/* ============================================================= Liam Thuilot — Design System Colors & Type tokens ============================================================= */ /* ---- Webfonts (Google Fonts) -------------------------------- */ /* Anton — display / athletic headlines (condensed) Manrope — body / UI JetBrains Mono — stats, results, mono numerals */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ========================================================= COLOR — BRAND ========================================================= */ /* Navy — primary. Liam's chosen color; carries the brand. */ --navy-950: #060F1F; /* near-black, hero backgrounds */ --navy-900: #0B1A33; /* dark surfaces */ --navy-800: #102447; /* card-on-dark, deep */ --navy-700: #163261; /* primary brand blue */ --navy-600: #1E4585; /* hover / interactive */ --navy-500: #2E5BAA; /* mid blue */ --navy-400: #6189C9; /* tints / borders on dark */ --navy-200: #C2D2EC; /* light tint */ --navy-100: #E6EEF9; /* subtle wash */ /* Crimson — accent. Pulled from team logo + emblem flag. */ --crimson-900: #4A1018; --crimson-800: #7A1F2B; --crimson-700: #9A2A38; --crimson-600: #B23A48; /* primary accent */ --crimson-500: #C95463; --crimson-200: #EFC4CA; --crimson-100: #F8E4E7; /* Cream / Ivory — paper, light surfaces */ --ivory-50: #FAF7F0; /* page background */ --ivory-100: #F4EEE3; /* warm card background */ --ivory-200: #E8DFCB; /* dividers on cream */ /* Neutrals — text & UI structure */ --ink-1000: #0A0A0B; /* highest-contrast text */ --ink-900: #1A1A1F; --ink-700: #2D3038; --ink-500: #5A5F6E; /* secondary text */ --ink-400: #8A8F9C; --ink-300: #B8BCC6; --ink-200: #D8DBE3; /* borders */ --ink-100: #ECEDF1; /* hairlines / tracks */ --ink-50: #F6F7F9; /* Semantic */ --win: #2E7D5B; /* gold / submission / victory */ --gold: #C8A442; /* podium gold */ --silver: #B8B8B8; --bronze: #B07539; --loss: #8C2E2E; --draw: --ink-500; /* ========================================================= SEMANTIC SURFACES (use these in product code) ========================================================= */ --bg-page: var(--ivory-50); --bg-elevated: #FFFFFF; --bg-inverse: var(--navy-950); --bg-accent: var(--navy-700); --fg-1: var(--ink-1000); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-on-dark: var(--ivory-50); --fg-on-accent: #FFFFFF; --border-1: var(--ink-200); --border-2: var(--ink-100); --border-strong: var(--ink-700); --accent: var(--crimson-600); --brand: var(--navy-700); /* ========================================================= TYPE — families ========================================================= */ --font-display: 'Anton', 'Oswald', 'Impact', 'Arial Narrow', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ========================================================= TYPE — scale (16px base, modular ~1.25) Display sizes are big — Anton compresses, so size up. ========================================================= */ --size-display-1: clamp(72px, 11vw, 180px); /* hero kicker / name */ --size-display-2: clamp(56px, 7.5vw, 120px); --size-h1: clamp(40px, 5vw, 72px); --size-h2: clamp(32px, 3.6vw, 52px); --size-h3: 28px; --size-h4: 22px; --size-h5: 18px; --size-body-lg: 18px; --size-body: 16px; --size-body-sm: 14px; --size-micro: 12px; --size-stat: clamp(48px, 6vw, 96px); /* match results numerals */ /* ========================================================= SPACING — 4px grid ========================================================= */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radii — sharper, more athletic. Keep tight. */ --radius-0: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* Borders */ --hairline: 1px; --rule: 2px; --heavy: 4px; /* Shadows — subtle. Athletic/clean, not floaty. */ --shadow-sm: 0 1px 2px rgba(6, 15, 31, 0.06), 0 1px 1px rgba(6, 15, 31, 0.04); --shadow-md: 0 4px 12px rgba(6, 15, 31, 0.08), 0 1px 3px rgba(6, 15, 31, 0.05); --shadow-lg: 0 12px 32px rgba(6, 15, 31, 0.14), 0 4px 8px rgba(6, 15, 31, 0.06); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08); --ring-focus: 0 0 0 3px rgba(46, 91, 170, 0.35); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-snap: cubic-bezier(0.5, 1.4, 0.5, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; } /* ============================================================= SEMANTIC TYPE CLASSES ============================================================= */ .display-1 { font-family: var(--font-display); font-size: var(--size-display-1); line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg-1); } .display-2 { font-family: var(--font-display); font-size: var(--size-display-2); line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase; } .h1, h1 { font-family: var(--font-display); font-size: var(--size-h1); line-height: 0.95; letter-spacing: -0.005em; text-transform: uppercase; font-weight: 400; } .h2, h2 { font-family: var(--font-display); font-size: var(--size-h2); line-height: 1.0; text-transform: uppercase; font-weight: 400; } .h3, h3 { font-family: var(--font-body); font-size: var(--size-h3); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } .h4, h4 { font-family: var(--font-body); font-size: var(--size-h4); line-height: 1.3; font-weight: 700; } .h5, h5 { font-family: var(--font-body); font-size: var(--size-h5); line-height: 1.4; font-weight: 600; } .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .body, p { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.55; color: var(--fg-2); font-weight: 400; } .body-lg { font-size: var(--size-body-lg); line-height: 1.5; } .body-sm { font-size: var(--size-body-sm); line-height: 1.5; } .micro { font-size: var(--size-micro); line-height: 1.4; } .stat { font-family: var(--font-display); font-size: var(--size-stat); line-height: 0.9; font-feature-settings: 'tnum' 1; } .mono, code { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; } /* ============================================================= BASE RESET (light) ============================================================= */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); } * { box-sizing: border-box; }