/* ========================================================= Rundown Sports — Colors & Type Source of truth: docs/21-brand-guidelines.md (v1.0, 2026-04-17) ========================================================= */ /* Web fonts are loaded once by the host page (index.html) via a self-hosted @font-face sheet (/assets/fonts/fonts.css). The duplicate @import that used to live here was removed 2026-07-17 — it double-requested the whole family set. */ :root { /* ---------- BRAND PALETTE ---------- */ --rd-forest: #0B4D3C; /* Primary — headlines, fills, ink */ --rd-forest-2: #0E5C48; /* Hover / lighter */ --rd-forest-3: #083A2D; /* Deeper / pressed */ --rd-forest-deep: #083A2D; /* Alias of forest-3, named for panel/stage grounds (added 2026-09-02) */ --rd-gold: #F4C430; /* Secondary — speed-lines, accents, streak */ --rd-gold-2: #E0B021; /* Hover */ --rd-cream: #F5F1E8; /* Paper — default background */ --rd-cream-2: #EDE7D6; /* Tinted cream — alt rows, section bg */ --rd-cream-3: #EEEADF; /* 2% green-tinted cream — leaderboard alt */ --rd-navy: #0A2342; /* Ink — formal print, dark-mode base */ --rd-navy-2: #071A33; /* Derived shade — helmet under-brim in field art (ratified 2026-06-12) */ --rd-near-black: #0F1311; /* Body text on cream */ --rd-cool-gray: #6B7571; /* Metadata, inactive */ /* ---------- SEMANTIC ---------- */ --rd-bg: var(--rd-cream); --rd-bg-alt: var(--rd-cream-2); --rd-bg-dark: var(--rd-forest); --rd-bg-formal: var(--rd-navy); --rd-fg: var(--rd-near-black); --rd-fg-strong: var(--rd-forest); /* headlines */ --rd-fg-muted: var(--rd-cool-gray); --rd-fg-on-dark: var(--rd-cream); --rd-fg-link: var(--rd-forest); --rd-accent: var(--rd-gold); --rd-accent-hover: var(--rd-gold-2); --rd-border: rgba(15, 19, 17, 0.10); --rd-border-strong: var(--rd-forest); /* state colors — limited use, not in palette but real */ --rd-good: #1F7A4D; /* correct flash, derived from forest */ --rd-bad: #B0432A; /* incorrect, terra-cotta-leaning red */ /* ---------- TYPE FACES ---------- */ /* Lifted from the live codebase: Rundown/landing/index.html L21 (Google Fonts URL), Rundown/landing/styles.css L33 (body), L52 (display), L1231 (mono), and Rundown/app/styles.css L38 (app body — note the native-first ordering). */ --rd-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif; /* @kind font */ --rd-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* @kind font */ /* Native-first stack for the PWA app shell. -apple-system / BlinkMacSystemFont already resolve to SF Pro on Apple platforms, so no quoted SF family is needed. */ --rd-body-native: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, system-ui, sans-serif; /* @kind font */ --rd-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace; /* @kind font */ /* ---------- TYPE SCALE (rem on 16px base) ---------- */ --rd-display-xxl: 4.5rem; /* 72px — hero H1 */ --rd-display-xl: 3.5rem; /* 56px — section H1 */ --rd-display-l: 2.5rem; /* 40px — H2 */ --rd-display-m: 1.75rem; /* 28px — H3 / card title */ --rd-lede: 1.25rem; /* 20px — hero subhead */ --rd-body-size: 1rem; /* 16px — body */ --rd-small: 0.875rem; /* 14px — small */ --rd-caption: 0.75rem; /* 12px — caption / eyebrow */ --rd-stat: 2rem; /* 32px — JetBrains Mono numerals */ /* ---------- SPACING / RADII / SHADOWS ---------- */ --rd-space-1: 4px; --rd-space-2: 8px; --rd-space-3: 12px; --rd-space-4: 16px; --rd-space-5: 20px; --rd-space-6: 24px; --rd-space-7: 32px; --rd-space-8: 48px; --rd-space-9: 64px; --rd-radius-sm: 6px; --rd-radius: 12px; --rd-radius-lg: 20px; --rd-radius-pill: 999px; --rd-shadow-sm: 0 2px 6px rgba(11, 77, 60, 0.08); --rd-shadow: 0 8px 28px rgba(11, 77, 60, 0.12); --rd-shadow-lg: 0 24px 60px rgba(11, 77, 60, 0.25); --rd-shadow-gold: 0 4px 14px rgba(244, 196, 48, 0.40); /* CTA "lifted card" signature: 2px gold bottom border on primary buttons */ --rd-cta-lift: inset 0 -2px 0 var(--rd-gold); --rd-motion: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* ---------- MOTION VOCABULARY (2026-08-04) ---------- Three curves and three durations for the whole surface. Ten distinct cubic-beziers meant every element had its own body; a page reads as one physical object only when everything on it obeys the same physics. Exactly ONE overshoot survives — the umpire's stamp, which earns it. */ --rd-ease-settle: cubic-bezier(0.22, 0.75, 0.18, 1); /* enters, reveals, panels */ /* @kind other */ --rd-ease-land: cubic-bezier(0.16, 1.00, 0.24, 1); /* stamps, freezes, arrivals */ /* @kind other */ --rd-ease-camera: cubic-bezier(0.62, 0.00, 0.20, 1); /* scale, pin, ground push */ /* @kind other */ --rd-dur-settle: 620ms; --rd-dur-land: 380ms; --rd-dur-camera: 900ms; --rd-stagger: 90ms; /* per child, capped at 4 children */ } /* ========================================================= SEMANTIC ELEMENT STYLES Apply by including this file and using the classes/tags below. ========================================================= */ html, body { background: var(--rd-bg); color: var(--rd-fg); font-family: var(--rd-body); font-size: var(--rd-body-size); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Display — Bebas Neue, all-caps, tight LH, slight tracking */ h1, .rd-h1 { font-family: var(--rd-display); font-size: var(--rd-display-xl); font-weight: 400; line-height: 1.00; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rd-fg-strong); margin: 0; } .rd-display-xxl { font-size: var(--rd-display-xxl); line-height: 0.95; } h2, .rd-h2 { font-family: var(--rd-display); font-size: var(--rd-display-l); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rd-fg-strong); margin: 0; } h3, .rd-h3 { font-family: var(--rd-display); font-size: var(--rd-display-m); font-weight: 400; line-height: 1.10; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rd-fg-strong); margin: 0; } /* Body */ p, .rd-body { font-family: var(--rd-body); font-size: var(--rd-body-size); font-weight: 400; line-height: 1.55; color: var(--rd-fg); margin: 0 0 1em; } .rd-lede { font-family: var(--rd-body); font-size: var(--rd-lede); font-weight: 500; line-height: 1.50; color: var(--rd-fg); } .rd-small { font-size: var(--rd-small); line-height: 1.50; } .rd-caption { font-size: var(--rd-caption); font-weight: 500; line-height: 1.40; letter-spacing: 0.02em; } /* Eyebrow — tight all-caps Inter, never Bebas */ .rd-eyebrow { font-family: var(--rd-body); font-size: var(--rd-caption); font-weight: 700; line-height: 1.20; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-gold-2); margin: 0; } .rd-eyebrow.on-dark { color: var(--rd-gold); } /* Mono — stats, timers, scenario IDs */ .rd-stat-num { font-family: var(--rd-mono); font-size: var(--rd-stat); font-weight: 700; line-height: 1.00; font-variant-numeric: tabular-nums; color: var(--rd-fg-strong); } .rd-stat-cap { font-family: var(--rd-mono); font-size: var(--rd-caption); font-weight: 500; letter-spacing: 0.04em; line-height: 1.20; color: var(--rd-fg-muted); text-transform: uppercase; } code, .rd-mono { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; } /* Links — forest green, 1.5px underline, gold on hover */ a, .rd-link { color: var(--rd-fg-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: text-decoration-color var(--rd-motion); } a:hover, .rd-link:hover { text-decoration-color: var(--rd-gold); }