/* ========================================================================== Over Oranje — Foundations: color + type tokens Independent fan dashboard for the Dutch national team (WK 2026). Load this once at the top of any page. Default theme = light. Add data-theme="dark" to (or any wrapper) for the dark theme. ========================================================================== */ /* ----- Webfonts (variable) ------------------------------------------------ */ @font-face { font-family: 'Archivo'; src: url('fonts/Archivo.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================== 1. PRIMITIVE TOKENS — raw brand values, theme-independent ========================================================================== */ :root { /* Brand */ --oranje: #F36C21; /* primary accent — use sparingly, as a spark */ --oranje-600: #DB5C16; /* hover / pressed accent */ --oranje-100: #FCE3D2; /* accent wash (light) */ --oranje-tint: rgba(243, 108, 33, 0.12); --navy: #0B2545; /* cool counter-accent, links */ --navy-300: #6E97D6; /* link on dark surfaces */ /* Neutrals — warm grey ramp (paper-leaning) */ --ink-900: #121212; --ink-800: #1A1A1A; --ink-700: #232323; --ink-600: #2C2C2B; --ink-500: #5C5A57; --ink-400: #8C8983; --ink-300: #B8B4AD; --ink-200: #E7E2DB; --ink-100: #F1EDE7; --paper: #FAF8F5; --white: #FFFFFF; /* Status */ --win: #1FA363; --win-tint: rgba(31, 163, 99, 0.14); --loss: #E5484D; --loss-tint: rgba(229, 72, 77, 0.14); --draw: #8C8983; --draw-tint: rgba(140, 137, 131, 0.16); --live: #E5484D; /* live pulse uses the loss red */ /* Radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; /* Type families */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ========================================================================== 2. SEMANTIC TOKENS — LIGHT THEME (default) ========================================================================== */ :root, [data-theme="light"] { --bg: var(--paper); /* page background */ --surface: var(--white); /* cards, panels */ --surface-2: #F4F0EA; /* sunken / secondary fill */ --surface-3: var(--ink-100); /* hover fill on neutral rows */ --fg-1: var(--ink-900); /* primary text / headlines */ --fg-2: var(--ink-500); /* body / secondary */ --fg-3: var(--ink-400); /* captions / muted / timestamps */ --border: var(--ink-200); /* hairline dividers, card edges */ --border-strong: var(--ink-300); --link: var(--navy); --link-hover: var(--oranje-600); --accent: var(--oranje); --accent-fg: var(--white); /* text on accent fill */ --accent-hover: var(--oranje-600); --accent-wash: var(--oranje-tint); --focus-ring: rgba(243, 108, 33, 0.45); /* Elevation (warm, low, soft — never heavy) */ --shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.05), 0 1px 1px rgba(18,18,18,0.04); --shadow-md: 0 4px 14px rgba(18, 18, 18, 0.07), 0 1px 3px rgba(18,18,18,0.05); --shadow-lg: 0 14px 40px rgba(18, 18, 18, 0.12); } /* ========================================================================== 3. SEMANTIC TOKENS — DARK THEME ========================================================================== */ [data-theme="dark"] { --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --surface-3: var(--ink-600); --fg-1: var(--paper); --fg-2: var(--ink-300); --fg-3: var(--ink-400); --border: #2A2A2A; --border-strong: #3A3A39; --link: var(--navy-300); --link-hover: var(--oranje); --accent: var(--oranje); --accent-fg: #1A1206; --accent-hover: #FF7D33; --accent-wash: rgba(243, 108, 33, 0.16); --focus-ring: rgba(243, 108, 33, 0.55); /* Dark elevation leans on borders + faint glow, not drop shadow */ --shadow-sm: 0 1px 0 rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6); } /* ========================================================================== 4. TYPE SCALE — semantic helpers Display & headlines: Archivo. Body & UI: Inter. ========================================================================== */ .t-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1); } .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.22; letter-spacing: -0.005em; color: var(--fg-1); } .t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--fg-2); } .t-body { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--fg-2); } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--fg-3); } .t-micro { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.3; color: var(--fg-3); } /* Eyebrow / kicker — small-caps label, the editorial signature */ .t-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* Numeric / score display — tabular figures */ .t-score { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ========================================================================== 5. BASE ELEMENT DEFAULTS (optional convenience layer) ========================================================================== */ body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } ::selection { background: var(--oranje-tint); }