/* ============================================================ KLOK — Live Wire 2.0 · Foundations (LIGHT-primary, dark variant) Skill-based prediction game · Fontein Group · Windhoek Light is the default theme. Add data-theme="dark" on or any container to flip a region to dark. Display: Clash Display (Fontshare) · Body: Inter (Google) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap'); /* Clash Display — bundled locally (fonts/) for offline/print determinism. The Fontshare @import above remains as a network fallback. */ @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- BRAND CONSTANTS (theme-invariant) ---------------- */ --klok-onyx: #0B0F0E; /* near-black ink / structure */ --onyx: #0B0F0E; /* alias */ --klok-lime: #C6FF3D; /* the brand accent + hero fill */ --klok-white: #FFFFFF; --lime: #C6FF3D; --lime-bright: #D4FF66; --lime-deep: #8FBF1A; /* lime that reads as text on white */ --lime-dim: rgba(198,255,61,0.18); --lime-faint: rgba(198,255,61,0.10); /* Live signal + semantic */ --crimson: #FF3B47; /* LIVE + miss only */ --crimson-dim: rgba(255,59,71,0.14); --win: var(--lime); /* ---- COMPETITION BRIGHTS · the locked trio --------- */ /* Two roles: ONE primary bright per screen (hero banner / prize), chosen by the competition; secondary brights as accents only (chips, tags, lines, structure — several may coexist small). Lime doubles as the always-on brand/action layer (prize · CTA · active · win) on top of any competition. Crimson stays live-only. Lime = World Cup · Tangerine = AFCON/continental · Golden Yellow = club & friendlies */ --tang: #FF6B1A; /* Tangerine — AFCON */ --gold: #FFC400; /* Golden Yellow (locked 3rd bright) — club & friendlies */ --on-tang: #FFFFFF; /* text on tangerine */ --on-gold: #0B0F0E; /* text on golden */ /* ---- TEXTURED BRIGHTS · the locked 'semi-gradient' fields ------- Every bright field carries a near-flat single-hue tonal shift so it reads with depth/texture instead of dead-flat colour. This is a tonal shift WITHIN one hue, never a decorative multi-hue blend. Use the .grad-* utilities (or the --*-grad token) for any bright surface — banner, tile, prize chip, hero block. */ --lime-grad: linear-gradient(152deg, #D4FF66 0%, #B6F22A 100%); /* @kind color */ --tang-grad: linear-gradient(152deg, #FF8A3D 0%, #F25A0A 100%); /* @kind color */ --gold-grad: linear-gradient(152deg, #FFD24D 0%, #F5B400 100%); /* @kind color */ --crimson-grad: linear-gradient(152deg, #FF5660 0%, #E8222E 100%); /* @kind color */ /* legacy accent aliases (kept so older surfaces don't break) */ --blue: #2F6BFF; --blue-2: #1B3FA8; --violet: #7B5CFF; --violet-2: #5B3DE0; --magenta: #FF3D8B; --magenta-2: #E01E6B; /* ---- LIGHT THEME (default) ---------------------------- */ --paper: #F4F5F2; /* page background */ --card: #FFFFFF; /* primary card / list surface */ --card-2: #EEF0EB; /* subtle inset / pressed */ --card-3: #E5E8E1; --ink: #0B0F0E; /* primary text */ --ink-2: rgba(11,15,14,0.62); --ink-3: rgba(11,15,14,0.42); --ink-disabled: rgba(11,15,14,0.28); --line: rgba(11,15,14,0.10); --line-2: rgba(11,15,14,0.16); /* ---- DARK-COMPANION + LEGACY ALIASES ----------------- */ /* Theme-invariant handles used by the dark companion theme and by specimen cards that render on their own onyx context. Light surfaces use --paper / --card / --line / --ink instead. */ --surface-0: #0B0F0E; --surface-1: #121817; --surface-2: #1A2220; --surface-3: #232E2B; --hairline: rgba(255,255,255,0.10); --hairline-strong: rgba(255,255,255,0.18); --line-lime: rgba(198,255,61,0.50); /* the live wire */ --fg-1: #FFFFFF; --fg-2: rgba(255,255,255,0.64); --fg-3: rgba(255,255,255,0.42); --fg-disabled: rgba(255,255,255,0.26); /* action tokens — flip per theme */ --btn-bg: #0B0F0E; /* primary button = black on light (betco) */ --btn-fg: #FFFFFF; --structure: #0B0F0E; /* nav pill / category chip ground */ --structure-fg: #FFFFFF; --on-lime: #0B0F0E; /* text on lime fills */ --on-fill: #FFFFFF; /* text on blue/violet/magenta fills */ --shadow-1: 0 1px 2px rgba(11,15,14,0.06); --shadow-2: 0 6px 24px rgba(11,15,14,0.10); --shadow-3: 0 20px 48px rgba(11,15,14,0.16); --shadow-card: 0 2px 10px rgba(11,15,14,0.06), 0 12px 30px rgba(11,15,14,0.05); --glow-lime: 0 8px 30px rgba(198,255,61,0.45); --focus-ring: 0 0 0 3px rgba(47,107,255,0.30); /* ---- TYPE ---- */ --font-display: 'Clash Display', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --display-hero: clamp(54px, 11vw, 104px); /* @kind font */ --display-xxl: 80px; --display-xl: 60px; --display-l: 42px; --display-m: 30px; --display-s: 22px; --text-xl: 20px; --text-l: 17px; --text-base: 15px; --text-s: 13px; --text-xs: 11px; --label: 11px; /* ---- SPACING · 8px base ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* ---- RADII (rounder than v1 — the friendly direction) ---- */ --r-xs:8px; --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:30px; --r-pill:999px; --r-icon:24%; /* ---- MOTION ---- */ --ease-out: cubic-bezier(0.16,1,0.3,1); /* @kind other */ --ease-snap: cubic-bezier(0.34,1.56,0.64,1); /* @kind other */ --dur-fast:140ms; /* @kind other */ --dur-base:240ms; /* @kind other */ --dur-slow:420ms; /* @kind other */ } /* ---- DARK THEME (companion) ---- */ :root[data-theme="dark"], [data-theme="dark"] { --paper: #0B0F0E; --card: #121817; --card-2: #1A2220; --card-3: #232E2B; --ink: #FFFFFF; --ink-2: rgba(255,255,255,0.64); --ink-3: rgba(255,255,255,0.42); --ink-disabled: rgba(255,255,255,0.26); --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.18); --btn-bg: #C6FF3D; /* primary button = lime on dark */ --btn-fg: #0B0F0E; --structure: #FFFFFF; --structure-fg: #0B0F0E; --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 6px 24px rgba(0,0,0,0.45); --shadow-3: 0 20px 48px rgba(0,0,0,0.55); --shadow-card: 0 8px 28px rgba(0,0,0,0.40); --focus-ring: 0 0 0 3px rgba(198,255,61,0.35); } /* ============================================================ SEMANTIC TYPE ============================================================ */ .display, .klok-display { font-family: var(--font-display); font-weight: 600; line-height: 0.96; letter-spacing: -0.01em; } .display-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--display-hero); line-height: 0.9; letter-spacing: -0.02em; } .display-xxl { font-family: var(--font-display); font-weight: 700; font-size: var(--display-xxl); line-height: 0.92; letter-spacing: -0.02em; } .display-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--display-xl); line-height: 0.94; letter-spacing: -0.015em; } .display-l { font-family: var(--font-display); font-weight: 600; font-size: var(--display-l); line-height: 0.98; letter-spacing: -0.01em; } .display-m { font-family: var(--font-display); font-weight: 600; font-size: var(--display-m); line-height: 1.0; } .display-s { font-family: var(--font-display); font-weight: 500; font-size: var(--display-s); line-height: 1.05; } .caps { text-transform: uppercase; letter-spacing: 0.01em; } h1,.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--display-l); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink); } h2,.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--display-m); line-height: 1.0; color: var(--ink); } h3,.h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); } p,.body { font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); line-height: 1.5; color: var(--ink-2); } .lede { font-family: var(--font-body); font-weight: 500; font-size: var(--text-l); line-height: 1.55; color: var(--ink-2); } .caption{ font-family: var(--font-body); font-weight: 500; font-size: var(--text-s); line-height: 1.45; color: var(--ink-3); } .fine { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-3); } .eyebrow{ font-family: var(--font-body); font-weight: 700; font-size: var(--label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--lime-deep); } .num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .money { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ============================================================ COMPETITION BRIGHTS — locked fill + ink pairings One warm trio carries the competitions; crimson is live-only. ============================================================ */ .bright-lime { background: var(--lime); color: var(--on-lime); } /* World Cup + brand hero */ .bright-tang { background: var(--tang); color: var(--on-tang); } /* AFCON */ .bright-gold { background: var(--gold); color: var(--on-gold); } /* club & friendlies */ .is-live { color: var(--crimson); } /* live signal — text/dot only */ /* Textured (semi-gradient) bright fields — the locked default for any large bright surface. `.grad-*` applies the gradient outright; `.bright-*.textured` upgrades a flat bright in place. */ .grad-lime, .bright-lime.textured { background: var(--lime-grad); color: var(--on-lime); } .grad-tang, .bright-tang.textured { background: var(--tang-grad); color: var(--on-tang); } .grad-gold, .bright-gold.textured { background: var(--gold-grad); color: var(--on-gold); } .grad-crimson { background: var(--crimson-grad); color: #FFFFFF; } /* live/headline banners only */