/* ============================================================================ THEME — single source of truth for the site's colors, fonts, and shape. ---------------------------------------------------------------------------- TO REBRAND THE SITE: edit the "BRAND" block below (or activate one of the ready-made palettes at the bottom by setting in public/index.html and public/admin/index.html). Nothing else needs to change — every stylesheet, page fragment, and JS-rendered component reads from these variables. Conventions: - `*-rgb` variables hold bare "R, G, B" triplets so alpha variants can be built anywhere with rgba(var(--accent-rgb), 0.3). - `--on-accent` is the text color used ON TOP of accent-colored surfaces. ============================================================================ */ /* Self-hosted. Regular + a true Bold cut — the browser only has to synthesize italic (never bold), which is what keeps small-size headings crisp instead of compounding two synthetic transforms. */ @font-face { font-family: 'Eurostile Extended'; src: url('/fonts/EurostileExtended-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eurostile Extended'; src: url('/fonts/EurostileExtended-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ── BRAND ──────────────────────────────────────────────────────────── */ /* SRL logo palette: electric blue + gunmetal grey. */ --accent-rgb: 34, 172, 227; /* primary brand color (#22ace3) */ --accent-2-rgb: 124, 138, 148; /* gunmetal companion (#7c8a94) */ --accent: rgb(var(--accent-rgb)); --accent-2: rgb(var(--accent-2-rgb)); --on-accent: #ffffff; /* text placed on accent surfaces */ --gradient-accent: linear-gradient(45deg, var(--accent), var(--accent-2)); /* Header/banner backdrop (behind the league banner image) */ --banner-bg: #0a0d10; /* ── SURFACES ───────────────────────────────────────────────────────── */ --bg-0: #101013; /* page base */ --bg-1: #17171b; /* raised panels / modals */ --bg-2: #1f1f24; /* higher panels, table rows */ --bg-3: #26262c; /* highest (hover rows, inputs) */ --bg-page: radial-gradient(1200px 600px at 50% -10%, rgba(var(--accent-rgb), 0.08), transparent 60%), linear-gradient(180deg, #131316, #0e0e11); --surface-1: rgba(255, 255, 255, 0.04); /* translucent card fill */ --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.11); --overlay: rgba(0, 0, 0, 0.85); /* modal backdrop */ /* ── TEXT ───────────────────────────────────────────────────────────── */ --text-1: #f4f4f6; /* headings, primary text */ --text-2: #c2c3c9; /* body copy */ --text-3: #8b8d96; /* muted / captions */ --text-disabled: #64666e; /* ── BORDERS ────────────────────────────────────────────────────────── */ --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --border-accent: rgba(var(--accent-rgb), 0.35); --border-accent-strong: rgba(var(--accent-rgb), 0.6); /* ── SEMANTIC ───────────────────────────────────────────────────────── */ --success-rgb: 34, 197, 94; --success: rgb(var(--success-rgb)); --danger-rgb: 239, 68, 68; --danger: rgb(var(--danger-rgb)); --warning-rgb: 245, 158, 11; --warning: rgb(var(--warning-rgb)); --info-rgb: 59, 130, 246; --info: rgb(var(--info-rgb)); --fastest-lap-rgb: 168, 85, 247; --fastest-lap: rgb(var(--fastest-lap-rgb)); /* ── STANDINGS GRID RESULT COLORS ───────────────────────────────────── */ /* Podium metals are intentionally brand-independent. */ --podium-1: linear-gradient(135deg, #FFD700, #cfb000); --podium-2: linear-gradient(135deg, #d4d4d4, #929292); --podium-3: linear-gradient(135deg, #ffae00, #b47b00); --result-points-bg: linear-gradient(135deg, #4ade80, #3db86a); --result-finish-bg: rgba(100, 116, 139, 0.8); --result-dnf-bg: linear-gradient(135deg, #ef4444, #dc2626); --result-dns-bg: linear-gradient(135deg, #6e6e6e, #4d4d4d); --result-none-bg: rgba(30, 30, 30, 0.9); --on-result: #1a1a1a; /* dark text on bright result cells */ /* ── SHAPE & DEPTH ──────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-2: 0 10px 34px rgba(0, 0, 0, 0.45); --shadow-accent: 0 6px 24px rgba(var(--accent-rgb), 0.28); --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.45); /* ── TYPE ───────────────────────────────────────────────────────────── */ --font-body: 'Eurostile Extended', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-display: 'Eurostile Extended', 'Segoe UI', Tahoma, sans-serif; --font-mono: 'Cascadia Code', 'Courier New', monospace; } /* ============================================================================ READY-MADE ALTERNATE PALETTES Activate by adding data-theme to the tag, e.g. Add new palettes the same way — only brand values need overriding; surfaces and text inherit from :root unless you want a different mood. ============================================================================ */ /* The original orange brand, kept as a selectable fallback — "ember" */ [data-theme="ember"] { --accent-rgb: 255, 102, 0; --accent-2-rgb: 255, 133, 51; --on-accent: #ffffff; --banner-bg: #0b0b0d; --bg-page: radial-gradient(1200px 600px at 50% -10%, rgba(255, 102, 0, 0.08), transparent 60%), linear-gradient(180deg, #131316, #0e0e11); } /* Cool blue/cyan — "ice" */ [data-theme="ice"] { --accent-rgb: 56, 189, 248; --accent-2-rgb: 94, 234, 212; --on-accent: #06212e; --banner-bg: #0a0f14; --bg-page: radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.08), transparent 60%), linear-gradient(180deg, #101418, #0b0e12); } /* Racing red — "scarlet" */ [data-theme="scarlet"] { --accent-rgb: 225, 29, 46; --accent-2-rgb: 248, 90, 90; --on-accent: #ffffff; --banner-bg: #120a0b; --bg-page: radial-gradient(1200px 600px at 50% -10%, rgba(225, 29, 46, 0.08), transparent 60%), linear-gradient(180deg, #161113, #0e0b0c); } /* Podium purple — "violet" */ [data-theme="violet"] { --accent-rgb: 167, 86, 247; --accent-2-rgb: 196, 143, 253; --on-accent: #ffffff; --banner-bg: #0e0a14; --bg-page: radial-gradient(1200px 600px at 50% -10%, rgba(167, 86, 247, 0.08), transparent 60%), linear-gradient(180deg, #141018, #0d0b10); }