/* ==========================================================================
THE KICKER — Brand Design Tokens
Locked: 2026-04-18
Source: D:\Sites\kicker\brand-preview.html (V2 primary, V3 nav, V1 article, V4 monogram)
========================================================================== */
/* Fonts — Google Fonts CDN
Import in :
*/
:root {
/* ---------- Primary palette ---------- */
--navy: #0A1628; /* Night Field Navy — primary brand, backgrounds, headlines */
--goal: #E63946; /* Goal Red — accent, CTAs, KICK Rating signal */
--cream: #F5EFE0; /* Cream — warmth, text on navy, paper feel */
--grass: #1F8A4C; /* Grass — win indicators, positive deltas (sparingly) */
/* ---------- Supporting palette ---------- */
--navy-soft: #131F35; /* Panels on navy backgrounds */
--navy-line: #1E2D47; /* Borders, dividers on navy */
--slate: #6B7B95; /* Secondary text on cream */
--slate-light: #9BA8BD; /* Tertiary text, meta labels */
--cream-soft: #FAF6EC; /* Page background, secondary surfaces */
--goal-soft: #F26B73; /* Hover states, highlighted labels on navy */
/* ---------- Semantic aliases ---------- */
--bg-page: var(--cream-soft);
--bg-surface: #FFFFFF;
--bg-elevated: var(--navy);
--bg-panel: var(--cream);
--text-primary: var(--navy);
--text-muted: var(--slate);
--text-on-dark: var(--cream);
--text-on-dark-muted: var(--slate-light);
--border: rgba(10, 22, 40, 0.10);
--border-subtle: rgba(10, 22, 40, 0.06);
--border-dark: var(--navy-line);
--accent: var(--goal);
--accent-hover: var(--goal-soft);
--positive: var(--grass);
/* ---------- Typography ---------- */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* Type scale (px) */
--fs-display: 64px; /* Hero display — Fraunces 800 */
--fs-h1: 40px; /* Page heading — Fraunces 700 */
--fs-h2: 28px; /* Section — Fraunces 700 */
--fs-h3: 18px; /* Subsection — Inter 700 */
--fs-body: 16px; /* Body — Inter 400 */
--fs-small: 13px; /* Captions — Inter 500 */
--fs-mono: 14px; /* Data displays — JetBrains Mono 500 */
--fs-eyebrow: 11px; /* Labels, eyebrows — JetBrains Mono 600, 2px letter-spacing */
/* Line heights */
--lh-tight: 1.0;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-relaxed: 1.6;
/* Letter spacing */
--ls-tight: -0.03em;
--ls-snug: -0.02em;
--ls-normal: -0.01em;
--ls-wide: 0.02em;
--ls-mono-tight: 0.5px;
--ls-label: 1.5px;
--ls-eyebrow: 2px;
/* ---------- Spacing (8-point grid) ---------- */
--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;
/* ---------- Radii ---------- */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;
/* ---------- Shadows ---------- */
--shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
--shadow-md: 0 4px 12px rgba(10, 22, 40, 0.08);
--shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.12);
--shadow-hero: 0 24px 64px rgba(10, 22, 40, 0.16);
/* ---------- Motion ---------- */
--dur-fast: 150ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
/* ---------- KICK Rating band colours ---------- */
--kick-elite: var(--goal); /* 90-100 */
--kick-star: #F59E0B; /* 80-89 — amber */
--kick-quality: var(--grass); /* 70-79 */
--kick-solid: var(--slate); /* 60-69 */
--kick-average: var(--slate-light); /* 50-59 */
--kick-below: #9CA3AF; /* 40-49 */
--kick-poor: #D1D5DB; /* <40 */
/* ---------- Layout constants ---------- */
--maxw-content: 1200px;
--maxw-prose: 720px;
--maxw-narrow: 640px;
--nav-height: 64px;
--nav-sub-height: 40px;
}
/* ==========================================================================
BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--text-primary);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--goal); }
/* ==========================================================================
TYPOGRAPHY UTILITIES
========================================================================== */
.t-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: var(--ls-normal); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.t-small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); color: var(--text-muted); }
.t-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: var(--ls-mono-tight); }
.t-eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--goal); }
.t-label { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); }
/* ==========================================================================
LAYOUT
========================================================================== */
.container {
max-width: var(--maxw-content);
margin: 0 auto;
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.container-prose {
max-width: var(--maxw-prose);
margin: 0 auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
}
/* ==========================================================================
LOGO
========================================================================== */
/* Primary brand mark — V2 stacked masthead. Use on hero, social cards, footer. */
.logo-primary {
font-family: var(--font-display);
font-weight: 900;
font-size: 64px;
letter-spacing: -0.04em;
line-height: 0.85;
color: var(--cream);
text-align: center;
display: inline-block;
}
.logo-primary .the {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 0.375em; /* ratio to main size */
letter-spacing: -0.01em;
display: block;
color: var(--slate-light);
margin-bottom: -0.06em;
}
/* Navigation mark — V3 inline + dot. Use in top nav, mobile, headers. */
.logo-nav {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--cream);
display: inline-flex;
align-items: baseline;
gap: 4px;
text-decoration: none;
}
.logo-nav .the {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 14px;
color: var(--slate-light);
}
.logo-nav .dot {
width: 8px;
height: 8px;
background: var(--goal);
border-radius: 50%;
display: inline-block;
margin-left: 4px;
flex-shrink: 0;
align-self: center;
}
/* Article masthead — V1 editorial. Use above article bodies. */
.logo-article {
font-family: var(--font-display);
font-weight: 800;
font-size: 36px;
letter-spacing: -0.03em;
line-height: 0.9;
color: var(--navy);
display: inline-block;
}
.logo-article .the {
font-family: var(--font-body);
font-size: 0.22em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
display: block;
margin-bottom: 2px;
color: var(--goal);
}
/* Monogram — V4 for favicon/avatars. Goal-red K on cream. */
.logo-monogram {
width: 48px;
height: 48px;
background: var(--goal);
color: var(--cream);
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 34px;
letter-spacing: -0.04em;
line-height: 1;
position: relative;
}
.logo-monogram::after {
content: "";
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 1.5px;
background: var(--cream);
opacity: 0.4;
}
/* ==========================================================================
KICK RATING BADGE
Core brand component — appears on every player, match, leaderboard.
========================================================================== */
.kick-badge {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--navy);
color: var(--cream);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
}
.kick-badge__labels {
display: flex;
flex-direction: column;
gap: 3px;
}
.kick-badge__label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--slate-light);
line-height: 1;
}
.kick-badge__band {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
color: var(--goal-soft);
text-transform: uppercase;
letter-spacing: 1px;
}
.kick-badge__value {
font-family: var(--font-display);
font-weight: 800;
font-size: 36px;
line-height: 1;
letter-spacing: var(--ls-snug);
}
.kick-badge--lg .kick-badge__value { font-size: 56px; }
.kick-badge--lg .kick-badge__label { font-size: 11px; }
.kick-badge--lg .kick-badge__band { font-size: 12px; }
.kick-badge--sm {
padding: var(--space-2) var(--space-3);
gap: var(--space-2);
}
.kick-badge--sm .kick-badge__value { font-size: 24px; }
.kick-badge--sm .kick-badge__label { font-size: 9px; }
.kick-badge--sm .kick-badge__band { font-size: 10px; }
/* Pill variant — for inline table rows */
.kick-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--cream);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--navy);
}
.kick-pill__label {
font-size: 9px;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 1px;
}
.kick-pill--elite { background: var(--navy); color: var(--cream); border-color: transparent; }
.kick-pill--elite .kick-pill__label { color: var(--goal-soft); }
.kick-pill--star { background: var(--goal); color: white; border-color: transparent; }
.kick-pill--star .kick-pill__label { color: rgba(255, 255, 255, 0.7); }
/* ==========================================================================
NAV HEADER
========================================================================== */
.nav {
background: var(--navy);
color: var(--cream);
}
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--navy-line);
height: var(--nav-height);
}
.nav-links {
display: flex;
gap: var(--space-7, 28px);
}
.nav-links a {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--cream);
text-decoration: none;
}
.nav-links a.is-active { color: var(--goal-soft); font-weight: 600; }
.nav-search {
background: var(--navy-line);
border: none;
color: var(--cream);
padding: 8px 14px;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 13px;
width: 220px;
}
.nav-search::placeholder { color: var(--slate-light); }
.nav-sub {
display: flex;
gap: var(--space-6);
padding: var(--space-3) var(--space-6);
background: var(--navy-soft);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--ls-label);
height: var(--nav-sub-height);
align-items: center;
}
.nav-sub a { color: var(--slate-light); text-decoration: none; }
.nav-sub a.is-active { color: var(--cream); }
/* ==========================================================================
CARDS
========================================================================== */
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.card--dark {
background: var(--navy);
color: var(--cream);
border-color: transparent;
}
.card--elevated {
box-shadow: var(--shadow-md);
border-color: transparent;
}
/* ==========================================================================
TABLES
========================================================================== */
.table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 14px;
}
.table th {
text-align: left;
padding: var(--space-3) var(--space-5);
background: var(--cream);
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--slate);
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.table td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
}
.table td.num {
font-family: var(--font-mono);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 18px;
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.btn--primary { background: var(--goal); color: white; }
.btn--primary:hover { background: var(--goal-soft); color: white; }
.btn--secondary { background: var(--navy); color: var(--cream); }
.btn--secondary:hover { background: var(--navy-soft); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--border); }
.btn--ghost:hover { background: var(--cream); }