/* ========================================================================== Design tokens — generated from BRANDING.md §3–§7. Two-layer model (BRANDING.md §8.1): primitives (raw values, appearance- named) feed semantic tokens (role-named). Component CSS should reference semantic tokens, not primitives, except where noted. Breakpoints (BRANDING.md §5) can't live here as custom properties — media query conditions can't consume var() — so they're documented as a plain comment instead and hand-written into each media query: sm 576px · md 768px · lg 992px · xl 1200px · xxl 1400px ========================================================================== */ :root { /* -- Color primitives --------------------------------------------------- Named by appearance, per BRANDING.md §3. */ --raw-catfish-50: #F0F4F7; --raw-catfish-200: #BED1DF; /* not a bound Figma variable on any checked frame — kept as primitive only, not promoted to a semantic role */ --raw-catfish-500: #768F9F; --raw-midnight-black-900: #191919; --raw-sunglow-yellow-500: #fccc21; /* no confirmed role yet */ --raw-sun-orange-500: #ff9e1e; --raw-sun-orange-500-30: rgba(255, 158, 30, 0.3); --raw-sun-orange-500-40: rgba(255, 158, 30, 0.4); --raw-deep-orange-500: #fc7d24; /* btn/primary/hover — confirmed via Figma MCP (node 1744:682), 2026-07-25 */ --raw-deep-orange-700: #cb7b00; /* btn/primary/press — confirmed via Figma MCP (node 1744:682) */ --raw-espresso-900: #3b1802; /* btn/secondary/hover-press-bg — confirmed via Figma MCP (node 1744:682) */ --raw-alphabet-red-500: #ed1c24; /* reserved for error/alert state, unconfirmed */ --raw-white: #ffffff; /* -- Color semantic ------------------------------------------------------ */ --color-bg-page: var(--raw-midnight-black-900); /* bg/page — the site's default black background */ --color-bg-light: var(--raw-catfish-50); /* bg/light-bg — light card/panel fill */ --color-bg-alt: var(--raw-catfish-500); /* bg/arba-bg — section-alt background (e.g. Index Section 4) */ --color-text-primary: var(--raw-catfish-50); /* on dark backgrounds */ --color-text-secondary: var(--raw-midnight-black-900); /* body text on light-bg cards */ --color-text-disabled: var(--raw-catfish-500); /* inactive nav link, meta text */ --color-text-link: var(--raw-sun-orange-500); --color-action-primary: var(--raw-sun-orange-500); /* btn/primary/active fill */ --color-action-primary-hover: var(--raw-deep-orange-500); /* btn/primary/hover fill */ --color-action-primary-press: var(--raw-deep-orange-700); /* btn/primary/press fill */ --color-action-primary-text: var(--raw-midnight-black-900); /* btn/primary-text */ --color-action-secondary-border: var(--raw-sun-orange-500); /* btn/secondary/border */ --color-action-secondary-text: var(--raw-sun-orange-500); --color-action-secondary-hover-bg: var(--raw-espresso-900); /* btn/secondary/hover-press-bg — same fill for both hover and press, confirmed via Figma MCP */ --color-error: var(--raw-alphabet-red-500); /* -- Typography ------------------------------------------------------------ Font source: Google Sans Flex (switched 2026-07-26, client decision — see BRANDING.md §4) — loaded live from Google Fonts (same `` pattern as the Roboto fallback, see any page's ), not self-hosted. Fallback stack below matches BRANDING.md's confirmed metric match. */ --font-family-base: 'Google Sans Flex', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Desktop sizes */ --font-size-h1: 66px; --line-height-h1: 79px; --font-size-h2: 50px; --line-height-h2: 60px; --font-size-h3: 37px; --line-height-h3: 44.4px; --font-size-h4: 28px; --line-height-h4: 42px; --font-size-lead-body: 21px; --line-height-lead-body: 31.5px; --font-size-small-body: 16px; --line-height-small-body: 24px; --font-size-eyebrow: 16px; --line-height-eyebrow: 24px; --font-size-link: 16px; --line-height-link: 24px; /* Small desktop sizes (992–1399px, BRANDING.md §5's `lg`–`xxl` range) — confirmed responsive type/spacing proposal. Large desktop (≥1400px, the sizes above) is signed off and unchanged; small desktop, tablet, and mobile are the three tiers this proposal actually covers. */ --font-size-h1-small-desktop: 56px; --line-height-h1-small-desktop: 67px; --font-size-h2-small-desktop: 44px; --line-height-h2-small-desktop: 53px; --font-size-h3-small-desktop: 34px; --line-height-h3-small-desktop: 41px; --font-size-h4-small-desktop: 26px; --line-height-h4-small-desktop: 39px; --font-size-lead-body-small-desktop: 20px; --line-height-lead-body-small-desktop: 30px; /* Tablet sizes (768–991px, BRANDING.md §5's `md`–`lg` range — same range the text-heavy section's column stagger already uses for its own tablet step). */ --font-size-h1-tablet: 44px; --line-height-h1-tablet: 53px; --font-size-h2-tablet: 38px; --line-height-h2-tablet: 46px; --font-size-h3-tablet: 30px; --line-height-h3-tablet: 36px; --font-size-h4-tablet: 24px; --line-height-h4-tablet: 36px; --font-size-lead-body-tablet: 19px; --line-height-lead-body-tablet: 28.5px; --font-size-eyebrow-tablet: 15px; --line-height-eyebrow-tablet: 22.5px; /* Mobile sizes (applied under the `md` breakpoint in css/base.css). Eyebrow bumped 14px→15px (line-height 20px→22.5px, keeping the 1.5 ratio used everywhere else) — the one role that was below the 16px comfortable-reading floor; it carries real informational copy (hub labels, banner eyebrows), not decoration. Every other mobile value is unchanged from what's already signed off. */ --font-size-h1-mobile: 36px; --line-height-h1-mobile: 44px; --font-size-h2-mobile: 32px; --line-height-h2-mobile: 40px; --font-size-h3-mobile: 26px; --line-height-h3-mobile: 32px; --font-size-h4-mobile: 22px; --line-height-h4-mobile: 30px; --font-size-lead-body-mobile: 18px; --line-height-lead-body-mobile: 27px; --font-size-eyebrow-mobile: 15px; --line-height-eyebrow-mobile: 22.5px; /* -- Spacing --------------------------------------------------------------- BRANDING.md §5: Space/8,12,18,27,40,60,90,135,200 scale, authored in rem (base 16px). 90 isn't separately named in BRANDING.md but is the next step in the ×1.5 progression the shared Text-Heavy Section template uses for its tablet column stagger (§4 there). */ --space-8: 0.5rem; --space-12: 0.75rem; --space-18: 1.125rem; --space-27: 1.6875rem; --space-40: 2.5rem; --space-60: 3.75rem; --space-90: 5.625rem; --space-135: 8.4375rem; --space-200: 12.5rem; /* Grid (BRANDING.md §5) */ --container-max-width: 1280px; /* page content — header container width conflict (1140px vs 1280px) resolved via Figma MCP at header-build time, see BRANDING.md §5 */ --container-edge-padding: 70px; --container-edge-padding-small-desktop: 56px; --container-edge-padding-tablet: 40px; --container-edge-padding-mobile: 16px; --column-gutter: 24px; --column-gutter-tablet: 20px; --column-gutter-mobile: 16px; /* Section vertical rhythm — reduced 2026-07-25 (UX request, PROJECT_STATUS.md "Section padding issues"). Previously sized to double as reserved clearance for a scroll-snap-to-section interaction that was never actually implemented (confirmed: no `scroll-snap` anywhere in the codebase) — the gap read as genuine dead space wherever two sections share the same (or no) background, since only a real color change signals a boundary on its own. The one section that's an actual scroll/anchor target (Index Section 4, `#new-way-of-working`, per the 4 banner CTAs) now gets its own explicit `scroll-margin-top` instead — see `css/index.css` — decoupling "header-jump clearance" from "ordinary section rhythm" rather than sizing every section's padding for a landing scenario most of them never have. Large desktop specifically keeps more than a flat halving would give: part of its `200px→240px` bump (`BRANDING.md` §5, `.text-heavy-row` rules) was a client-approved fix for bold 3-column text reading as packed — that fix's other 4 levers (column gap, H3 margins, row margin, H3 line-height) are untouched here, only the section-padding lever is being dialed back, landing on the range's original floor. */ --section-padding-desktop-max: 9.375rem; /* 150px — was 240px; reuses the range's original 150px floor (see above) */ --section-padding-small-desktop: 5.625rem; /* 90px — was 140px; Space/90 */ --section-padding-tablet: 3.75rem; /* 60px — was 100px; Space/60 */ --section-padding-mobile: 2.5rem; /* 40px — was 64px; Space/40 */ /* -- Motion (BRANDING.md §7) ------------------------------------------- */ --ease-out: ease-out; /* entering elements: block reveal, fades */ --ease-in-out: ease-in-out; /* moves and stops in the same view */ --ease-in: ease-in; /* leaving elements */ --duration-fast: 150ms; --duration-standard: 400ms; --duration-slow: 700ms; --reveal-translate-y: 27px; /* Space/27 — text-heavy section reveal slide distance */ /* -- Radius -------------------------------------------------------------- Not specified in BRANDING.md beyond earth.html's own established precedent (`.tooltip { border-radius: 4px }`) — kept minimal, not invented per §8.5. */ --radius-sm: 4px; /* -- Z-index ------------------------------------------------------------- */ --z-sticky-nav: 100; --z-panel: 200; --z-tooltip: 300; }