/* ============================================================ Beyond79 design tokens — extracted verbatim from Design Kit v2 (August 2026). This file is the single source of truth for color, type, spacing, radius and elevation. Do not invent values outside this file. ============================================================ */ :root { /* --- Ink: base surfaces --- */ --ink-900: #0B0E10; /* hero, footer */ --ink-800: #14181B; /* dark cards */ --ink-700: #1E2428; /* dark hairlines */ /* --- Neutral ramp: warm gray --- */ --neutral-50: #FAF9F7; --neutral-100: #F3F1ED; --neutral-200: #E6E3DC; --neutral-300: #D2CEC4; --neutral-400: #A9A498; --neutral-500: #7B7669; /* 7.6:1 IS AGAINST PURE #FFF, WHICH THIS SITE NEVER PAINTS. Measured against the surfaces actually used: 7.28:1 on --neutral-50 and 6.79:1 on --neutral-100, i.e. UNDER the 7:1 AAA threshold on every muted band. Same class of stale figure as the gold-700 5.52-vs-6.6 note in CLAUDE.md §5. Body copy in `.band__body` uses --neutral-700 (11.13:1 / 10.38:1) for this reason. The token's VALUE is unchanged — the kit is the spec; only the claim is corrected (2026-08-24). */ --neutral-600: #57534A; /* secondary copy; see the note above */ --neutral-700: #3A3833; --neutral-800: #23221E; --neutral-900: #121110; /* --- Gold: accent only --- gold-700 is the ONLY gold legal as text on white (6.6:1). gold-300 is the ONLY gold legal as text on ink (9.4:1 on ink-900). gold-500 is large/non-text only: stat numerals, rules, icons (3.4:1). */ --gold-100: #F6ECD6; --gold-300: #E3C68A; --gold-500: #C08A2E; --gold-700: #8A6118; /* --- Marine: interactive --- DORMANT since 2026-08-18. All three are unreferenced: the maintainer took marine off buttons and text that day ("Stop using that blue color for buttons and text"), and gold-700 replaced it as the link colour, the outline-button label and the breadcrumb colour. Retained, not deleted, because these are Design Kit v2 values and the kit is the spec — but nothing in src/css reads them now, so changing them changes nothing. Grep before assuming otherwise. The hero gradient's middle stop is a literal #10222e, NOT --marine-500, so it was never affected and is not what keeps these alive. Note the 7.1:1 below was the marine-on-white figure. Gold-700 on white measures 5.52:1 — still AA for normal text, but lower; do not use gold-700 where a 7:1 AAA claim is being made. */ --marine-100: #E7F0F6; --marine-500: #14567F; /* links, buttons (7.1:1 on white) */ --marine-600: #0F415F; /* hover */ /* --- Semantic --- */ --success: #17734A; --error: #A32218; --focus-ring: 2px solid var(--gold-700); /* at 2px offset, everywhere */ /* --- Hero gradient: 150° ink→marine→gold, ≤6% chroma --- "hero only" RETIRED 2026-08-21, as pages.css §5.4 said to do once a fourth surface wanted it. Four paint it now: the homepage hero, one brand header per brand page, and the homepage Our Story band. The kit still documents it as the hero's; this site deliberately departs, the way CLAUDE.md §5 records the marine departure. Every one of the four pairs it with `.graticule` (components.css §4.16) — gradient and grid travel together, and a fifth dark surface should take both. --- */ --grad-hero: linear-gradient(150deg, var(--ink-900) 0%, #10222e 55%, #2a2214 100%); /* --- Typography --- Newsreader (300/400) = display + headings. Archivo (400/500/600) = nav, UI, body. Self-hosted, display=swap. PT Serif retires entirely. */ --font-display: "Newsreader", Georgia, serif; --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif; --type-display: 300 clamp(40px, 6vw, 68px)/1.02 var(--font-display); /* -0.022em */ /* CLAMPED 2026-08-24. Both were hard px at every width — only --type-display clamped — so an interior page opened with a 48px h1 and a 34px h2 on a 390px screen. The floors are one step down, and both reach their original desktop value well below 64em (h1 at 565px, h2 at 524px), so NOTHING CHANGES AT DESKTOP: this is a mobile-only step, not a rescale. This is a deliberate departure from Design Kit v2, which specifies fixed values. Task 10 adds it to CLAUDE.md §5 alongside the marine departure, which is the one precedent of its kind actually recorded there. Do not restore the fixed values on the kit's authority. Letter-spacing is unchanged and still lives on the consuming rules — the `font` shorthand cannot carry it. */ --type-h1: 400 clamp(34px, 8.5vw, 48px)/1.1 var(--font-display); /* -0.018em */ --type-h2: 400 clamp(27px, 6.5vw, 34px)/1.18 var(--font-display); /* -0.014em */ --type-h3: 600 21px/1.3 var(--font-body); /* -0.008em */ --type-h4: 600 16px/1.35 var(--font-body); --type-body: 400 17px/1.65 var(--font-body); /* measure 68ch */ --type-small: 400 14.5px/1.6 var(--font-body); /* NEVER below 14px */ --type-eyebrow: 600 11px/1 var(--font-body); /* 0.16em tracking, caps */ --measure: 68ch; /* --- Spacing: 8px base --- */ --space-1: 4px; /* icon gap */ --space-2: 8px; /* label→field */ --space-3: 12px; /* inline */ --space-4: 16px; /* card padding sm */ --space-6: 24px; /* card padding */ --space-8: 32px; /* grid gutter */ --space-12: 48px; /* block gap */ --space-16: 64px; /* section pad sm */ --space-24: 96px; /* section pad */ --space-32: 128px; /* hero pad */ --container: 1200px; --gutter: 24px; /* 32px ≥ desktop, see base.css */ /* The floating nav pill is deliberately narrower than --container, so it reads as an object sitting ON the page rather than as the page's own top edge. GoldKit's 1000px, adopted 2026-08-17. See components.css 4.1. */ --container-nav: 1000px; /* --- Radius --- */ --radius-sm: 4px; /* tags, badges */ --radius-md: 6px; /* buttons, fields */ --radius-lg: 10px; /* cards, tiles */ --radius-xl: 16px; /* hero panels */ --radius-pill: 999px; /* --- Elevation --- */ --e0: 0 0 0 1px var(--neutral-200); /* hairline */ --e1: 0 1px 2px rgba(11, 14, 16, 0.05); /* resting card */ --e2: 0 4px 14px -4px rgba(11, 14, 16, 0.14); /* hover */ --e3: 0 18px 40px -12px rgba(11, 14, 16, 0.22); /* dropdown */ /* --- Gold-tinted elevation (GoldKit-derived, 2026-08-17) --- */ /* The one place this site casts a warm shadow instead of a neutral one. Same geometry as GoldKit's signature nav shadow, retinted from their #dcaa31 to our --gold-500 (192,138,46). Nav pill + its CTA only — everywhere else keeps --e1/--e2/--e3. */ --e-gold-1: 0 2px 8px -2px rgba(192, 138, 46, 0.25); /* nav pill, hover */ --e-gold-2: 0 4px 10px -3px rgba(192, 138, 46, 0.55); /* gold CTA, rest */ --e-gold-3: 0 8px 18px -4px rgba(192, 138, 46, 0.70); /* gold CTA, hover */ } /* --- Self-hosted faces ------------------------------------------------- Google serves ONE variable woff2 per family per subset — the 400/500/600 Archivo URLs are byte-identical — so this is two files, not the kit's "five". Same intent: self-hosted, swap, no Google round-trip. No `unicode-range`: with exactly one file per family there is no sibling subset for it to let the browser skip, so it buys nothing. Google's boilerplate "latin" range was tried and found to be actively wrong — it omits U+2192 (→) and U+2197 (↗), both used live in CTA copy ("→" / "↗" in src/index.njk, src/brands/brands.njk) — and verified via fontTools cmap inspection that neither downloaded woff2 contains those glyphs regardless (Archivo has only U+2191/U+2193; Newsreader has no arrows at all). Omitting the descriptor lets the browser apply this face to everything and fall back per-glyph on its own for the codepoints these files don't contain, which is correct without a range that can misrepresent what's inside the file. ---------------------------------------------------------------------- */ /* --- Breakpoint ladder ------------------------------------------------- CSS custom properties cannot be used in media query conditions, so these are documented constants rather than tokens. Every media query in src/css should use one of them. 40em (640px) phone -> large phone. Above it `.grid--3`/`--4` go 2-up; below it `.stat-band` tightens its gap and numeral, and `#expertise` drops its card paragraphs. 64em (1024px) desktop. The main layout switch: .grid--4 goes 4-up, .section padding opens up, sticky asides engage, .timeline--horizontal takes over. 900px THE NAV ISLAND BREAKPOINT, AND LOAD-BEARING. The header becomes a floating island here, and its measured heights (73px below / 80px at-and-above) are terms in the scroll-margin-top arithmetic on /expertise/, /responsibility/ and /about/. It is NOT 56.25em by accident and it must NOT be folded into 64em — doing so silently lands every in-page anchor under the header. See pages.css §5.5. Four non-nav rules also key off it for the same reason (the nav island's own geometry, not a coincidence): pages.css `.hero` margin (~line 38), `.brand-header` margin (~line 979), `:target` (~line 1272) and `.band__aside h2:target` (~line 1311). 75em (1200px) wide. --container's own max-width; used by /contact/'s two-column split. `63.99em` / `39.99em` are the max-width complements of 64em / 40em. RETIRED OUTLIER, KEPT AS HISTORY ONLY — not a live pattern, nothing in src/css keys off this value: 48em (768px) RETIRED 2026-08-24. `.journey` was the only caller, and its row/column fork was deleted when the stepper became horizontal at every width (pages.css §5.5). The outlier is gone, not moved. Grep before re-adding one. KNOWN OUTLIERS, LEFT ALONE: 70em (1120px) `.brand-panels` (components.css §4.3). NORMALISATION TRIED AND REVERTED 2026-08-24: at 64em the panels flip 1-up -> 2-up a breakpoint early, measured as a -320px height change on `/` at 1024px, which reproduces the 398px-panel tagline-wrap regression that rule's own comment already warns about. It is a real breakpoint, not a stray value. Do not retry this. KNOWN, UN-NORMALISED STRAYS, DOCUMENTED ONLY — do not change any of these three on this review's authority; each needs its own change: max-width: 40em `.trust-marquee` (pages.css:214). OVERLAPS, does not complement, `min-width: 40em` rules — both fire at exactly 640px, where the ladder's own convention (`63.99em`/`39.99em` as the max-width complements) would use `39.99em` instead. max-width: 39.999em `.site-drawer`-adjacent block (pages.css:2890). Three nines where the ladder specifies `39.99em`. max-width: 899px The mobile nav drawer (components.css:585). A pixel value paired with the `900px` nav-island breakpoint above rather than the em ladder; consistent with `900px` itself being px, not em. ---------------------------------------------------------------------- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/fonts/newsreader-latin-var.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url("/fonts/archivo-latin-var.woff2") format("woff2"); }