/* * Overstory Design Tokens * ----------------------------------------------------------------------------- * Ported from `Design system/Overstory Design System.html` (the canonical * reference). This file is the SINGLE SOURCE OF TRUTH for color, type, * spacing, radii, and shadow tokens used across the site. * * - Palette values come straight from the approved system (navy, navy-deep, * green, sun, paper, ink + supporting paper-2 / ink-2 / line). * - Type scale tiers (display / h1 / h2 / h3 / body / small / mono-meta) * follow the design system's "Display 56 / 60", "Heading 28 / 34", * "Body 15 / 24", "Metadata 11 / 16 · Mono" tiers. * - Manrope is the approved display + body family. It is self-hosted from * `public/fonts/` (woff2, weights 300/400/500/700/800). NO Google Fonts CDN * and NO external font requests anywhere in the site. * - IBM Plex Mono is the approved mono family for eyebrows, labels, and * data-sheet content (Option C). Self-hosted from `public/fonts/` * (woff2, weights 400/500). NO Google Fonts CDN. * * Authoring rules (see AGENTS.md): * - Every color/spacing/typography value used in site CSS must resolve to a * token defined here. No raw hex or px values outside this file. * - Page-level styles inherit Manrope + paper background + ink text by * virtue of the html/body declarations below. */ /* ----------------------------------------------------------------------------- * @font-face — self-hosted Manrope (300, 400, 500, 700, 800) * * Files live under /fonts/ in the static preview root (`public/fonts/...`). * Weights 300–700 were downloaded from the @fontsource/manrope package. * Weight 800 (ExtraBold) was subset from the full Manrope ExtraBold TTF * (github.com/sharanda/manrope) using fonttools/pyftsubset to include * Latin + Latin-1 Supplement + Latin Extended + General Punctuation + Arrows. * font-display:swap keeps text visible while the woff2 loads. * ----------------------------------------------------------------------------- */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/manrope-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------- * @font-face — self-hosted IBM Plex Mono (400, 500) * * Files live under /fonts/ in the static preview root (`public/fonts/...`). * Subset from the full IBM Plex Mono (github.com/IBM/plex) using * fonttools/pyftsubset. The subset covers Basic Latin, Latin-1 Supplement, * Latin Extended-A/B, Combining Diacritical Marks, General Punctuation, * Currency Symbols, Arrows (→ U+2192), Mathematical Operators, and Geometric * Shapes. Note: U+25CF (● BLACK CIRCLE) is NOT in the IBM Plex Mono glyph * set; the browser will fall back to the system font for that character. * font-display:swap keeps text visible while the woff2 loads. * ----------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+25A0-25FF, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+25A0-25FF, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------- * Metric-matched fallback face. While Manrope woff2 is loading, the browser * renders text in this synthetic face — Arial scaled so each glyph occupies * roughly the same advance width and line box as Manrope. With this, the * `font-display: swap` moment is essentially invisible: no weight jump, no * reflow, no apparent change as the real font swaps in. Metrics derived from * Manrope ExtraBold cap-height / x-height / advance averages. * ----------------------------------------------------------------------------- */ @font-face { font-family: 'Manrope Fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 105%; descent-override: 27%; line-gap-override: 0%; } /* ----------------------------------------------------------------------------- * :root — design tokens * ----------------------------------------------------------------------------- */ :root { /* Palette --------------------------------------------------------------- */ --color-navy-deep: #001A3A; /* emphasis surface (deepest navy) */ --color-navy: #004080; /* brand navy */ --color-green: #30B040; /* accent green */ --color-sun: #F0B040; /* accent sun (warm highlight) */ --color-paper: #F7F3EC; /* default page surface */ --color-paper-2: #EFE9DF; /* secondary paper surface */ --color-ink: #14202C; /* body text on paper */ --color-ink-2: #5B6773; /* muted text / captions */ --color-cream: #F7EFDC; /* light text on navy surfaces */ --color-white: #ffffff; /* card / form surfaces atop paper */ --color-line: rgba(20, 32, 44, 0.12); /* hairline divider */ /* Compatibility aliases used by the design system & validation contract. These let downstream CSS read `var(--navy)`, `var(--paper)`, etc., while keeping the canonical token names above. */ --navy-deep: var(--color-navy-deep); --navy: var(--color-navy); --green: var(--color-green); --sun: var(--color-sun); --paper: var(--color-paper); --paper-2: var(--color-paper-2); --ink: var(--color-ink); --ink-2: var(--color-ink-2); --cream: var(--color-cream); --white: var(--color-white); --line: var(--color-line); /* Typography — families ------------------------------------------------- */ --font-display: 'Manrope', 'Manrope Fallback', 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', 'Manrope Fallback', 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Typography — type scale (px values match the design-system tiers) ---- */ --font-size-display: 64px; /* hero / display headline */ --font-size-h1: 48px; /* primary page heading */ --font-size-h2: 34px; /* section heading */ --font-size-h3: 24px; /* sub-section heading */ --font-size-body: 16px; /* default body copy */ --font-size-small: 13px; /* captions / fine print */ --font-size-mono-meta: 12px; /* eyebrows / metadata (mono) — was 11px, bumped for readability over 40+ */ /* Typography — line heights -------------------------------------------- */ --line-height-display: 1.04; /* Option C: tightest — hero / display tier */ --line-height-h1: 1.06; /* Option C: page-level h1 */ --line-height-h2: 1.10; /* Option C: section h2 */ --line-height-h3: 1.16; /* Option C: sub-section h3 */ --line-height-heading: 1.16; /* fallback for h4–h6, matches h3 */ --line-height-body: 1.55; --line-height-tight: 1.2; /* Typography — weights ------------------------------------------------- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Typography — letter spacing ----------------------------------------- */ --letter-spacing-display: -0.020em; /* Option C: headline tightening */ --letter-spacing-headline: -0.020em; /* Alias for h1/h2 (same value) */ --letter-spacing-tight: -0.005em; --letter-spacing-normal: 0; --letter-spacing-meta: 0.18em; /* Spacing scale (4px base rhythm) ------------------------------------- */ --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; /* Radii --------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* Shadows ------------------------------------------------------------- */ --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 6px rgba(20, 32, 44, 0.04); --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(20, 32, 44, 0.05); --shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.02), 0 12px 30px rgba(20, 32, 44, 0.05); /* Layout -------------------------------------------------------------- */ --max-content-width: 1280px; --container-padding-x: 56px; /* Measure — single source of truth for body-text line length. 65 characters is the sweet spot for body copy at 16px, per Bringhurst, Butterick, and WCAG 1.4.8. Every paragraph of body or lead text on the site uses this; do not introduce per-component overrides. */ --measure: 65ch; } /* ----------------------------------------------------------------------------- * Base element styles — apply tokens globally * ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); } body { margin: 0; padding: 0; font-family: 'Manrope', 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--color-paper); color: var(--color-ink); font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings inherit Manrope and use the type scale by default; pages can override these via more specific layout/section CSS without losing the global baseline. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); color: var(--color-navy-deep); margin: 0 0 var(--space-3); } h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-headline); } h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-headline); } h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); } p { margin: 0 0 var(--space-4); } small { font-size: var(--font-size-small); color: var(--color-ink-2); } a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-navy-deep); } a:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; border-radius: var(--radius-sm); } /* Utility class for the largest "display" tier (used on hero headlines). */ .display { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); color: var(--color-navy-deep); } /* Mono metadata tier (eyebrows / captions). */ .mono-meta { font-family: var(--font-mono); font-size: var(--font-size-mono-meta); letter-spacing: var(--letter-spacing-meta); text-transform: uppercase; color: var(--color-ink-2); }