/* ========================================================================= Leaguecast Design System — Colors & Type ------------------------------------------------------------------------- The Leaguecast visual identity is built around two hero hues lifted from the "LEAGUE / CAST" wordmark: a bright "summoner" yellow and a steady "hextech" blue, sitting on top of a scratched, slate-metal background. Type leans heavy-industrial sans for display (to echo the wordmark) and a warm, readable humanist sans for body copy to match the "welcoming community" tone. ========================================================================= */ /* Google Fonts — Futura isn't on Google Fonts, so we use the closest open substitutes in a Futura-first stack. The browser will use Futura if the user's OS has it (macOS ships with Futura), and fall back gracefully otherwise. Flagged in README for license replacement. - Display / Body: Futura → Jost (geometric sans, very close to Futura) - Mono: JetBrains Mono (for timestamps / patch notes) */ @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Jost:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ------------------------------------------------------------------ */ /* BRAND — hero colors */ /* ------------------------------------------------------------------ */ --lc-yellow: #EED536; /* summoner gold, the loudest brand color */ --lc-yellow-hot: #FFE34A; /* hover / glow */ --lc-yellow-deep: #C9A81F; /* pressed / deep gold on dark bg */ --lc-gold: #D4A637; /* warm gold accent (from lobster logo) */ --lc-blue: #1B96C8; /* hextech blue, the calm counterweight */ --lc-blue-hot: #35B3E3; /* hover */ --lc-blue-deep: #12678B; /* pressed */ --lc-blue-ink: #0B3A54; /* deep navy for large fills */ /* ------------------------------------------------------------------ */ /* NEUTRALS — scratched-metal grays */ /* ------------------------------------------------------------------ */ --lc-ink: #15181B; /* near-black, backgrounds */ --lc-ink-2: #1E2226; /* card bg on dark */ --lc-slate-900: #2A2F34; --lc-slate-700: #3E454B; --lc-slate-500: #6B7278; /* muted text on dark */ --lc-slate-300: #A7ADB2; --lc-slate-200: #C8CDD1; /* the wordmark's etched steel */ --lc-slate-100: #E2E5E7; --lc-paper: #F4F5F6; /* light-mode page bg */ --lc-white: #FFFFFF; /* ------------------------------------------------------------------ */ /* SEMANTIC — foreground / background */ /* ------------------------------------------------------------------ */ --fg-1: var(--lc-white); /* primary text on dark */ --fg-2: var(--lc-slate-200); /* secondary text on dark */ --fg-3: var(--lc-slate-500); /* muted / meta */ --fg-accent: var(--lc-yellow); --fg-link: var(--lc-blue-hot); --bg-1: var(--lc-ink); /* page bg */ --bg-2: var(--lc-ink-2); /* card */ --bg-3: var(--lc-slate-900); /* raised card / nav */ --bg-line: #33383D; /* hairline dividers */ /* light surfaces (used sparingly, e.g. show-notes printables) */ --fg-on-light-1: var(--lc-ink); --fg-on-light-2: var(--lc-slate-700); --bg-light-1: var(--lc-paper); --bg-light-2: var(--lc-white); /* Status (derived to live beside yellow/blue without clashing) */ --status-live: #E0484B; /* "LIVE" red, reserved for broadcast */ --status-ok: #4DB070; --status-warn: #E8A13A; /* ------------------------------------------------------------------ */ /* TYPE — families */ /* ------------------------------------------------------------------ */ /* Futura is the heritage family; Jost is the open stand-in that ships with the site so users without Futura installed get the right feel. */ --font-wordmark: "Archivo Black", "Futura", "Jost", "Helvetica Neue", system-ui, sans-serif; --font-display: "Futura", "Futura PT", "Jost", "Century Gothic", system-ui, sans-serif; --font-body: "Futura", "Futura PT", "Jost", "Century Gothic", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* weight tokens */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ------------------------------------------------------------------ */ /* SPACING — 4px base */ /* ------------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ------------------------------------------------------------------ */ /* RADII */ /* ------------------------------------------------------------------ */ --radius-xs: 2px; /* tight chips */ --radius-sm: 4px; /* buttons, inputs */ --radius-md: 8px; /* cards */ --radius-lg: 14px; /* hero cards / modal */ --radius-pill: 999px; /* ------------------------------------------------------------------ */ /* SHADOWS — soft on dark, hard-edged yellow "glow" accent */ /* ------------------------------------------------------------------ */ --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 14px rgba(0,0,0,.45); --shadow-3: 0 16px 40px rgba(0,0,0,.55); --shadow-glow: 0 0 0 1px rgba(238,213,54,.6), 0 0 24px rgba(238,213,54,.35); --shadow-inner: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35); /* ------------------------------------------------------------------ */ /* MOTION */ /* ------------------------------------------------------------------ */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; } /* ========================================================================= Base element styles — semantic defaults ========================================================================= */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display / wordmark-echo headings — condensed, heavy, uppercase */ h1, .lc-h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 var(--space-5); } h2, .lc-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 var(--space-4); } h3, .lc-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 22px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-3); } h4, .lc-h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.3; margin: 0 0 var(--space-2); } p, .lc-p { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; } .lc-lead { font-size: 20px; line-height: 1.5; color: var(--fg-2); } .lc-meta, small { font-family: var(--font-body); font-size: 13px; color: var(--fg-3); letter-spacing: 0.02em; text-transform: uppercase; } .lc-eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lc-yellow); } code, kbd, pre, .lc-mono { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--lc-blue-hot); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } hr { border: 0; height: 1px; background: var(--bg-line); margin: var(--space-6) 0; } /* ========================================================================= Utility — scratched metal texture (CSS-only fallback for backgrounds) ========================================================================= */ .lc-metal { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(0,0,0,.35), transparent 55%), linear-gradient(180deg, #3a3f44 0%, #23272b 100%); position: relative; } .lc-metal::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), repeating-linear-gradient(75deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px); mix-blend-mode: overlay; pointer-events: none; }