/* ============================================================================ JETTISON — brand tokens (single source of truth for the Site) Extracted 2026-07-16 from Identity/brand/Jettison/Visual Identity/ (Colors.md · Typography.md · Motion.md · Spacing & Layout.md — canonical) plus the Site's currently-implemented values (the "SITE CURRENT" layer). TWO LAYERS, read carefully: 1) BRAND CANON — the MP072 palette + 4-face type system as adopted in Identity. Status: canonical. 2) SITE CURRENT — what the shipped pages actually use today. It DIVERGES from canon (warm near-black canvas instead of Abyssal navy; rust instead of Truffle; no Aeonik). Divergences are flagged inline. Which layer wins per-token is a DESIGN.md decision with Zac — do not silently reconcile in either direction. ========================================================================= */ /* ---------------------------------------------------------------------------- FONTS — the 4-face stack (Typography.md, canonical) Files live in _lib/fonts/ (copied from Visual Identity/_fonts). NOTE: FK Grotesk files are the Trial license set (license decision TBD). NOTE: Aeonik is paid (CoType); web license tier unconfirmed. SITE CURRENT: kontext ships Aeonik Regular 400 as the editorial display voice (2026-07-17 typography pass; referenced from _lib/fonts/, .otf until a woff2 converter lands). Marketing surfaces stay 42dot Sans 500 display. Full role split: DESIGN.md § Type. ---------------------------------------------------------------------------- */ @font-face { font-family: '42dot Sans'; font-weight: 300; src: url('fonts/42dotsans-light.ttf') format('truetype'); font-display: swap; } @font-face { font-family: '42dot Sans'; font-weight: 400; src: url('fonts/42dotsans-regular.ttf') format('truetype'); font-display: swap; } @font-face { font-family: '42dot Sans'; font-weight: 500; src: url('fonts/42dotsans-medium.ttf') format('truetype'); font-display: swap; } @font-face { font-family: '42dot Sans'; font-weight: 700; src: url('fonts/42dotsans-bold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: '42dot Sans'; font-weight: 800; src: url('fonts/42dotsans-extrabold.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Aeonik'; font-weight: 400; src: url('fonts/Aeonik-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 400; src: url('fonts/FKGroteskTrial-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 400; font-style: italic; src: url('fonts/FKGroteskTrial-Italic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 500; src: url('fonts/FKGroteskTrial-Medium.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 500; font-style: italic; src: url('fonts/FKGroteskTrial-MediumItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 700; src: url('fonts/FKGroteskTrial-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'FK Grotesk'; font-weight: 700; font-style: italic; src: url('fonts/FKGroteskTrial-BoldItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Geist Mono'; font-weight: 400; src: url('fonts/GeistMono-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Geist Mono'; font-weight: 500; src: url('fonts/GeistMono-Medium.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Geist Mono'; font-weight: 600; src: url('fonts/GeistMono-SemiBold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Geist Mono'; font-weight: 700; src: url('fonts/GeistMono-Bold.otf') format('opentype'); font-display: swap; } :root { /* -------------------------------------------------------------------------- TYPE — families by role (Typography.md § The 4-Face Stack) -------------------------------------------------------------------------- */ --font-display: '42dot Sans', system-ui, sans-serif; /* 32/48/64/96px, weight 500 only */ --font-heading: 'Aeonik', system-ui, sans-serif; /* 18/20/24px, weight 400 only */ --font-body: 'FK Grotesk', system-ui, sans-serif; /* 14/16/18px, 400/italic/700 */ --font-mono: 'Geist Mono', ui-monospace, monospace; /* 11/12/14px labels, 700 canonical */ /* Scale ladder (Typography.md § The Scale Ladder) — size / line-height / tracking */ --type-hero: 96px; --lh-hero: 0.95; --ls-hero: -0.03em; /* 42dot 500 */ --type-cover: 64px; --lh-cover: 0.98; --ls-cover: -0.025em; /* 42dot 500 */ --type-title: 48px; --lh-title: 1.02; --ls-title: -0.02em; /* 42dot 500 */ --type-section: 32px; --lh-section: 1.10; --ls-section: -0.015em; /* 42dot 500 */ --type-subhead: 24px; --lh-subhead: 1.20; --ls-subhead: -0.01em; /* Aeonik 400 */ --type-cardtitle: 20px; --lh-cardtitle: 1.25; --ls-cardtitle: -0.005em; /* Aeonik 400 */ --type-smallhead: 18px; --lh-smallhead: 1.30; /* Aeonik 400 (heading) */ --type-lead: 18px; --lh-lead: 1.55; /* FK Grotesk 400 (lead body) */ --type-body: 16px; --lh-body: 1.55; /* FK Grotesk 400 */ --type-caption: 14px; --lh-caption: 1.55; /* FK Grotesk 400 */ --type-label: 12px; --lh-label: 1.40; --ls-label: 0.04em; /* Geist Mono 700 UPPER */ --type-eyebrow: 11px; --lh-eyebrow: 1.40; --ls-eyebrow: 0.14em; /* Geist Mono 700 UPPER */ --ls-mono-body: 0.02em; /* 14px mixed-case mono (data, code) */ /* -------------------------------------------------------------------------- COLOR LAYER 1 — BRAND CANON: the MP072 palette (Colors.md, canonical) Principle: neutral by default, color pops. LIGHT TIER IS THE BRAND DEFAULT (Light Oatmeal canvas); Abyssal dark tier is RESERVED for hero / product-data / stark-break moments. Two warm accents max per surface. -------------------------------------------------------------------------- */ --abyssal: #1B2632; /* deepest dark; dark-tier canvas; type on light */ --blue-fantastic: #2C3B4D; /* dark-tier card surface */ --palladian: #EEE9DF; /* near-white highlight; type on dark */ --light-oatmeal: #F6F1E7; /* LIGHT-TIER CANVAS — the brand default surface */ --oatmeal: #C9C1B1; /* light-tier cards; the only sanctioned mid-tone */ --burning-flame: #FFB162; /* primary warm accent; CTA; matches site --flame */ --truffle: #A35139; /* secondary warm accent; gradient mid; accent on lights */ /* Signature gradient — hero moments only, ONE per artifact max. Truffle midpoint is load-bearing; never collapse to two stops. */ --signature-gradient: linear-gradient(165deg, var(--burning-flame) 0%, var(--truffle) 45%, var(--abyssal) 100%); /* Derived mono alpha steps (only sanctioned way past the 3 neutrals) */ --abyssal-15: rgba(27, 38, 50, 0.15); --abyssal-30: rgba(27, 38, 50, 0.30); --abyssal-50: rgba(27, 38, 50, 0.50); --palladian-15: rgba(238, 233, 223, 0.15); --palladian-30: rgba(238, 233, 223, 0.30); --palladian-50: rgba(238, 233, 223, 0.50); /* -------------------------------------------------------------------------- COLOR LAYER 2 — SITE CURRENT (implemented on shipped pages, 2026-07) DIVERGES from canon. The landing/kontext/solutions all run this today. Divergence notes per token. DESIGN.md decides: adopt, reconcile, or kill. -------------------------------------------------------------------------- */ --canvas: #131210; /* DIVERGENT: warm near-black, not canon Abyssal #1B2632; also dark-first, where canon says light tier default */ --panel: #1A1917; /* DIVERGENT: raised dark, not canon Blue Fantastic */ --surface: #1F1E1B; /* DIVERGENT: card dark, off-canon */ --bone: #E9EBDF; /* NEAR-CANON: cooler cousin of Palladian #EEE9DF */ --dim: #B3B0A4; /* NEAR-CANON: cousin of Oatmeal #C9C1B1 */ --soft: #84806F; /* OFF-CANON mid-tone (canon allows only Oatmeal or alpha steps) */ --cream: #F1EFE5; /* NEAR-CANON: sits between Palladian and Light Oatmeal */ --flame: #FFB162; /* MATCHES canon Burning Flame exactly */ --rust: #C56A50; /* DIVERGENT: "dark-adjusted Truffle"; canon Truffle is #A35139 */ --hair: rgba(233, 235, 223, 0.13); /* hairline on dark (bone-alpha) */ --hair-faint: rgba(233, 235, 223, 0.07); --ink-dark: #161511; /* text on cream (site's inversion-band ink) */ --muted-dark: #55524a; /* muted text on cream */ /* -------------------------------------------------------------------------- MOTION (Motion.md) — signature curve EXTRACTED from brand deck; the rest is the PROPOSED grammar (pending Zac sign-off, but the only grammar we have — use it consistently rather than inventing). -------------------------------------------------------------------------- */ --ease-sig: cubic-bezier(0.45, 0, 0.15, 1); /* stage-separation; EXTRACTED; site already uses it */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* default transitions (PROPOSED) */ --ease-decel: cubic-bezier(0, 0, 0.2, 1); /* elements entering (PROPOSED) */ --ease-accel: cubic-bezier(0.4, 0, 1, 1); /* elements leaving — the jettison gesture (PROPOSED) */ --dur-micro: 150ms; /* hover, focus, link shift */ --dur-standard: 250ms; /* modal, panel, dropdown, tab */ --dur-slow: 400ms; /* page transition, hero reveal */ --dur-liftoff: 600ms; /* the canonical one-shot stage-separation (loaders, landings) */ --dur-cinematic: 1000ms; /* hero moments, 800-1200ms band */ --hover: color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard), background var(--dur-micro) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); /* -------------------------------------------------------------------------- SPACING (Spacing & Layout.md — PROPOSED 4px-base geometric scale) Tiers: dense 1-3 (data UI) · content 4-7 (read-at-length) · hero 8-12 (landing sections; Jettison's poster register wants MORE air than SaaS). -------------------------------------------------------------------------- */ --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; --space-11: 192px; --space-12: 256px; } /* ============================================================================ SEMANTIC MODE LAYER (2026-07-16, Zac decision: the site supports light AND dark mode). Pages style against THESE tokens only — never the literal palette tokens above, never hardcoded hexes. The literal tokens remain as the vocabulary these mappings draw from. Mechanics: the head bootstrap sets `data-theme="light|dark"` on from localStorage('jettison:theme') before first paint; with no stored choice, prefers-color-scheme decides via the media query below. shell.js owns the toggle API (window.jettisonTheme) and syncs meta[theme-color]. Mode-invariant zones (sections that stay dark in BOTH modes — the scrolly-K stage, photographic overlays, the footer finale) scope themselves with `.mode-invariant` which re-declares the semantic tokens to dark values. ========================================================================= */ :root { /* ---- DARK (the shipped look; default when system prefers dark) ---- */ --ground: #131210; /* page canvas */ --ground-2: #1A1917; /* raised panel */ --ground-3: #1F1E1B; /* card / surface */ --ink: #E9EBDF; /* primary text (bone) */ --ink-2: #B3B0A4; /* dim text */ --ink-3: #84806F; /* captions, quiet labels */ --line: rgba(233, 235, 223, 0.13); --line-faint: rgba(233, 235, 223, 0.07); --accent: #FFB162; /* fills, CTAs (Burning Flame, both modes) */ --accent-ink: #FFB162; /* accent-as-text: Flame reads on dark */ --inverse-ground: #F1EFE5; /* the inversion band (cream panel on dark) */ --inverse-ground-2: #EEE9DF; --inverse-ink: #161511; --inverse-ink-2: #55524a; color-scheme: dark; } :root[data-theme="light"] { /* ---- LIGHT (canon light tier: cream paper, warm ink) ---- */ --ground: #F6F1E7; /* Light Oatmeal canvas (canon default surface) */ --ground-2: #F1EFE5; /* cream raised panel */ --ground-3: #EEE9DF; /* Palladian card */ --ink: #161511; /* warm near-black ink (site inversion vocab) */ --ink-2: #55524a; /* muted */ --ink-3: rgba(22, 21, 17, 0.52); --line: rgba(22, 21, 17, 0.14); --line-faint: rgba(22, 21, 17, 0.07); --accent: #FFB162; /* Flame FILLS still work on light */ --accent-ink: #A35139; /* accent-as-text: canon Truffle. Flame floats on warm lights; rust #C56A50 measured ~3.3:1 on oatmeal, Truffle clears AA (~4.9:1) */ --inverse-ground: #131210; /* the inversion band flips: night panel on cream */ --inverse-ground-2: #1A1917; --inverse-ink: #E9EBDF; --inverse-ink-2: #B3B0A4; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --ground: #F6F1E7; --ground-2: #F1EFE5; --ground-3: #EEE9DF; --ink: #161511; --ink-2: #55524a; --ink-3: rgba(22, 21, 17, 0.52); --line: rgba(22, 21, 17, 0.14); --line-faint: rgba(22, 21, 17, 0.07); --accent: #FFB162; --accent-ink: #A35139; --inverse-ground: #131210; --inverse-ground-2: #1A1917; --inverse-ink: #E9EBDF; --inverse-ink-2: #B3B0A4; color-scheme: light; } } /* Mode-invariant dark zones: K stage, photo overlays, footer finale. Scoping class re-pins the semantic tokens to the dark mapping. */ .mode-invariant { --ground: #131210; --ground-2: #1A1917; --ground-3: #1F1E1B; --ink: #E9EBDF; --ink-2: #B3B0A4; --ink-3: #84806F; --line: rgba(233, 235, 223, 0.13); --line-faint: rgba(233, 235, 223, 0.07); --accent: #FFB162; --accent-ink: #FFB162; --inverse-ground: #F1EFE5; --inverse-ground-2: #EEE9DF; --inverse-ink: #161511; --inverse-ink-2: #55524a; } /* ============================================================================ RECONCILIATION QUEUE — the decisions DESIGN.md must make (with Zac): 1. RESOLVED (Zac, 2026-07-18): the warm near-black family (#131210/#1A1917/ #1F1E1B) IS the site's dark world — graded against Abyssal and console black in a 3-way probe; navy is never a ground on the site. The "DIVERGENT" flags on --canvas/--panel/--surface resolve in the site's favor; Abyssal keeps only its non-ground canon roles (type on light, chart semantics). See DESIGN.md § 2. 2. Rust #C56A50 vs Truffle #A35139 (chart-semantic dark-adjust vs canon). 3. Bone/cream/dim/soft greys vs Palladian/Oatmeal/alpha-step system. 4. Aeonik adoption on the web (heading band + wordmark) + license confirm. 5. Site font sizes vs the 11-row ladder (W29 type-scale pass shrank display sizes below ladder values; ladder may need web-specific clamp rows). ========================================================================= */