/* ============================================================================= NGS CAPITAL — DESIGN TOKENS & BASE STYLES ───────────────────────────────────────────────────────────────────────────── Single source of truth. Every NGS surface should @import this file at the top. Table of contents §1 Fonts — @font-face for Avenir (5 weights) §2 Color tokens — palette, neutrals, semantic, surface, foreground §3 Layout tokens — spacing, radii, borders, elevation §4 Type tokens — font families + sizing scale §5 Motion tokens — easings + durations §6 Base elements — html, body, h1-h6, p, a, small §7 Utility classes — .ngs-eyebrow, .ngs-display, .ngs-source, .ngs-tabular ============================================================================= */ /* ============================================================================= §1 FONTS ============================================================================= */ @font-face { font-family: "Avenir"; font-style: normal; font-display: swap; font-weight: 300; src: url("fonts/Avenir-Light.ttf") format("truetype"); } @font-face { font-family: "Avenir"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/Avenir-Book.ttf") format("truetype"); } @font-face { font-family: "Avenir"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/Avenir-Regular.ttf") format("truetype"); } @font-face { font-family: "Avenir"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/Avenir-Heavy.ttf") format("truetype"); } @font-face { font-family: "Avenir"; font-style: normal; font-display: swap; font-weight: 900; src: url("fonts/Avenir-Black.ttf") format("truetype"); } /* ============================================================================= §2 COLOR TOKENS ============================================================================= */ :root { /* ── §2.1 Brand palette (verbatim from brand book) ──────────────────── */ --ngs-near-black: #0D1320; /* highest-contrast text on light bg */ --ngs-navy: #1D2C44; /* primary structural color */ --ngs-steel: #3E5C76; /* secondary accent / sub-headers */ --ngs-blue-gray: #748CAB; /* tertiary / muted labels / sources */ --ngs-beige: #F0EBCC; /* warm accent, statement-section bg */ --ngs-light-beige: #F5F3E1; /* subtle warm bg variant */ --ngs-white: #FFFFFF; /* ── §2.2 Extended navy / steel scale (derived) ─────────────────────── */ --ngs-navy-50: #ECEFF4; --ngs-navy-100: #D4DCE5; --ngs-navy-200: #A6B5C7; --ngs-navy-300: #748CAB; /* alias of --ngs-blue-gray */ --ngs-navy-400: #5C7693; --ngs-navy-500: #3E5C76; /* alias of --ngs-steel */ --ngs-navy-600: #2A4060; --ngs-navy-700: #1D2C44; /* alias of --ngs-navy */ --ngs-navy-800: #142036; --ngs-navy-900: #0D1320; /* alias of --ngs-near-black */ /* ── §2.3 Beige scale ───────────────────────────────────────────────── */ --ngs-beige-50: #F5F3E1; /* alias of --ngs-light-beige */ --ngs-beige-100: #F0EBCC; /* alias of --ngs-beige */ --ngs-beige-200: #E5DFB3; /* deeper beige for borders on beige bg */ /* ── §2.4 Semantic / functional ─ Office "Standard Colors" ──────────── */ --ngs-positive: #00B050; /* green — gains, growth */ --ngs-negative: #C00000; /* red — losses, errors */ --ngs-warning: #ED7D31; /* orange — caution, flag */ --ngs-caution: #FFC000; /* yellow — watch, low alert */ --ngs-info: #595959; /* grey — neutral signal */ /* ── §2.5 Surface (background) ──────────────────────────────────────── */ --bg-canvas: var(--ngs-white); --bg-warm: var(--ngs-light-beige); --bg-statement: var(--ngs-beige); --bg-dark: var(--ngs-navy); --bg-deep: var(--ngs-near-black); /* ── §2.6 Foreground (text) ─────────────────────────────────────────── */ --fg-1: #000000; /* primary text — pure black */ --fg-2: #000000; /* heading text — pure black */ --fg-3: var(--ngs-steel); /* secondary / sub-heads */ --fg-4: var(--ngs-blue-gray); /* muted / labels / sources */ --fg-on-dark-1: var(--ngs-white); /* primary text on dark bg */ --fg-on-dark-2: var(--ngs-beige); /* warm headings on dark bg */ --fg-on-dark-3: var(--ngs-blue-gray); /* muted on dark bg */ /* ── §2.7 Borders ───────────────────────────────────────────────────── */ --border-hairline: rgba(13, 19, 32, 0.08); --border-soft: rgba(13, 19, 32, 0.16); --border-strong: rgba(13, 19, 32, 0.32); --border-on-dark: rgba(240, 235, 204, 0.18); } /* ============================================================================= §3 LAYOUT TOKENS ============================================================================= */ :root { /* ── §3.1 Spacing — 8-pt grid (4-pt half-step at --space-1) ─────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ── §3.2 Radii — restrained (financial brand) ──────────────────────── */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; /* cards, buttons */ --radius-md: 6px; /* form inputs, badges, tags */ --radius-lg: 10px; /* No pill / fully-rounded radius — badges are rectangles with --radius-md. */ /* ── §3.3 Elevation — soft, low spread, never colored ───────────────── */ --shadow-1: 0 1px 2px rgba(13, 19, 32, 0.06), 0 1px 1px rgba(13, 19, 32, 0.04); --shadow-2: 0 4px 12px rgba(13, 19, 32, 0.08), 0 2px 4px rgba(13, 19, 32, 0.04); --shadow-3: 0 12px 32px rgba(13, 19, 32, 0.12), 0 4px 8px rgba(13, 19, 32, 0.06); --shadow-inset: inset 0 0 0 1px rgba(13, 19, 32, 0.06); } /* ============================================================================= §4 TYPE TOKENS ============================================================================= */ :root { /* ── §4.1 Families ──────────────────────────────────────────────────── */ --font-sans: "Avenir", "DM Sans", "Calibri", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; /* ── §4.2 Scale ─ size / line-height / tracking ─────────────────────── */ /* token size line-h tracking */ --fs-display: 64px; --lh-display: 1.05; --tr-display: -0.02em; --fs-h1: 40px; --lh-h1: 1.10; --tr-h1: -0.015em; --fs-h2: 28px; --lh-h2: 1.18; --tr-h2: -0.01em; --fs-h3: 20px; --lh-h3: 1.30; --tr-h3: 0; --fs-body-lg: 18px; --lh-body-lg: 1.55; --fs-body: 16px; --lh-body: 1.55; --fs-caption: 10px; --lh-caption: 1.45; } /* ============================================================================= §5 MOTION TOKENS ============================================================================= */ :root { --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1); --ease-emphasis: cubic-bezier(0.2, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ============================================================================= §6 BASE ELEMENTS ============================================================================= */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.4em; color: var(--fg-2); font-family: var(--font-sans); font-weight: 700; text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } p { margin: 0 0 1em; } small { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-4); } a { color: var(--ngs-steel); text-decoration-color: rgba(62, 92, 118, 0.32); text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--ngs-navy); text-decoration-color: currentColor; } /* ============================================================================= §7 UTILITY CLASSES ============================================================================= */ /* Eyebrow / kicker — small uppercase tracked label above titles */ .ngs-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } /* Display — for hero & cover statements */ .ngs-display { font-family: var(--font-sans); font-weight: 900; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-2); } /* Source / footnote — for chart attribution */ .ngs-source { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-4); } /* Tabular figures — for KPIs and numeric tables */ .ngs-tabular { font-variant-numeric: tabular-nums; } /* ============================================================================= §8 SLIDE FRAME TOKENS (1280×720 deck template) ----------------------------------------------------------------------------- Single source of truth for the deck's chrome geometry. Change a value here and every slide template (action title, content, agenda, decision, etc.) updates in lockstep. _slide.css and _kit.css consume these — never hard-code pixel values inside individual slide files. ============================================================================= */ :root { /* ── §8.1 Stage ─────────────────────────────────────────────────────── */ --slide-w: 1280px; --slide-h: 720px; --slide-bg-canvas: #C9C7C0; /* viewport mat behind the slide */ --slide-fg: #000; /* default ink for slide body */ /* ── §8.2 Content frame insets ──────────────────────────────────────── */ /* All body content sits inside this rectangle. Title aligns to the top inset; footer rule sits at slide-h minus footer-band-h. */ --slide-pad-x: 22px; /* left & right gutter */ --slide-pad-top: 24px; /* title top inset */ --slide-body-top: 113px; /* where body frame begins */ --slide-body-bottom: 72px; /* gap above footer rule */ /* ── §8.3 Title (action headline) ───────────────────────────────────── */ --slide-title-size: 32px; --slide-title-lh: 1.18; --slide-title-tr: -0.005em; --slide-title-weight: 400; /* ── §8.4 Subsection bars (navy / grey row labels) ──────────────────── */ --slide-bar-size: 24px; --slide-bar-lh: 32px; --slide-bar-pad-x: 14px; --slide-bar-fg: #FFFFFF; --slide-bar-bg-navy: var(--ngs-navy); --slide-bar-bg-grey: #A6A6A6; /* ── §8.5 Comment / bullet body ─────────────────────────────────────── */ --slide-comment-size: 12px; --slide-comment-lh: 1.5; --slide-bullet-size: 5px; /* square bullet edge */ /* ── §8.6 Footer band ───────────────────────────────────────────────── */ --slide-footer-rule-y: 660px; /* top of the navy hairline */ --slide-footer-logo-y: 670px; --slide-footer-logo-h: 40px; --slide-footer-page-y: 682px; --slide-footer-page-size: 22px; --slide-footer-src-y: 690px; --slide-footer-src-right: 80px; --slide-footer-rule-color: var(--ngs-navy); /* ── §8.7 Top-corner chrome (title slides, dividers) ────────────────── */ --slide-chrome-pad: 36px; /* page-num / footer-mark inset */ --slide-logo-corner-h: 22px; }