/* ═══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS Load this BEFORE style.css. Everything else in the project should read from here rather than declaring its own values. THE RULE Two colour literals exist in this file — white and black — and they are captured as tokens. Every other colour is derived from the club's three brand values with color-mix(). If you find yourself typing a hex or an rgba() anywhere else in the codebase, it belongs here as a token instead. WHY IT MATTERS Brand colours are easy to remember to tokenise. The neutrals are not — a grey hairline, a muted caption, a white overlay at 12% all feel safe to hardcode. They are exactly what makes a second club's site look like this club's site in a different jersey. Deriving the greys from the primary means they re-tint automatically when the brand changes. WHERE THE VALUES COME FROM 1. Fallbacks below — neutral greys, so an unconfigured club is obviously unstyled rather than wearing someone else's colours 2. seo-injector.js — injects the club's real colours server-side into , so the first paint is already correct 3. color-manager.js — re-applies on the client and computes the values CSS cannot work out on its own (see ON-COLOURS) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── The only two literals in the file ─────────────────────────────────── */ --white: #ffffff; --black: #000000; /* ── CLUB INPUTS ─────────────────────────────────────────────────────────── Set from CMS settings (color-primary-green, color-primary-maroon, color-accent-gold). Names kept as-is: 118 var() references in style.css and 123 rgb-triplet consumers depend on them. These fallbacks are deliberately neutral grey — see note above. */ --primary-green: #6b7280; --primary-maroon: #374151; --accent-gold: #9ca3af; /* RGB triplets, generated by color-manager.js hexToRgb(). Legacy: supports the rgba(var(--x-rgb), .2) pattern still used in 123 places. New code should use color-mix() instead — see MIXING below. */ --primary-green-rgb: 107, 114, 128; --primary-maroon-rgb: 55, 65, 81; --accent-gold-rgb: 156, 163, 175; /* Existing text/background inputs, also CMS-settable. Left alone so current pages keep working; the derived --ink-* scale below supersedes them and pages should move over as they are restyled. */ --text-dark: #333; --text-light: #666; --bg-light: #f8f9fa; /* ── ON-COLOURS ──────────────────────────────────────────────────────────── Whether text on a brand colour should be white or dark depends on that colour's luminance, and CSS has no reliable way to ask. contrast-color() is arriving in browsers but is not safe to depend on yet, so these are computed in color-manager.js and injected. The fallbacks assume a dark primary, which is only true until a club picks a light one. */ --on-primary: var(--white); --on-secondary: var(--white); --on-accent: var(--primary-green); /* A club's accent is often unusable for text as supplied — a mid orange, a bright yellow. Rather than reject it, color-manager.js nudges it until it clears 4.5:1 and exposes the result here. The pure --accent-gold stays available for rules, dividers and underlines, where contrast does not apply. */ --accent-surface: var(--accent-gold); /* accent as a background under text */ --on-accent-surface: var(--on-accent); /* the label on that background */ --accent-ink: var(--accent-gold); /* accent used AS text on a brand band */ /* Computed in color-manager.js / seo-injector.js: the brand gradient when a single ink reads against both ends of it, otherwise a solid primary. */ --header-bg: linear-gradient(135deg, var(--primary-green), var(--primary-maroon)); /* Darkens the hero only as much as a pale brand overlay requires. A dark brand resolves to transparent, so its hero is untouched. */ --hero-scrim: transparent; /* ── SURFACES ────────────────────────────────────────────────────────────── Faintly brand-tinted, so the neutrals belong to the club. */ --surface: var(--white); --surface-sunk: color-mix(in srgb, var(--primary-green) 5%, var(--white)); --hairline: color-mix(in srgb, var(--primary-green) 15%, var(--white)); --hairline-strong: color-mix(in srgb, var(--primary-green) 26%, var(--white)); /* ── TEXT ──────────────────────────────────────────────────────────────── */ --ink: color-mix(in srgb, var(--primary-green) 22%, var(--black)); --ink-muted: color-mix(in srgb, var(--ink) 64%, var(--surface)); --ink-faint: color-mix(in srgb, var(--ink) 44%, var(--surface)); /* ── BRAND VARIATIONS ──────────────────────────────────────────────────── */ --primary-deep: color-mix(in srgb, var(--primary-green) 84%, var(--black)); --primary-tint: color-mix(in srgb, var(--primary-green) 8%, var(--white)); --maroon-deep: color-mix(in srgb, var(--primary-maroon) 84%, var(--black)); --accent-deep: color-mix(in srgb, var(--accent-surface) 88%, var(--black)); --row-highlight: color-mix(in srgb, var(--accent-gold) 18%, var(--surface)); /* ── INK LAYERED ON A BRAND BAND ─────────────────────────────────────────── Replaces every rgba(255,255,255,.x). Those look harmless until a club picks a light primary, at which point they are white on white. */ --on-primary-soft: color-mix(in srgb, var(--on-primary) 80%, transparent); --on-primary-faint: color-mix(in srgb, var(--on-primary) 60%, transparent); --on-primary-rule: color-mix(in srgb, var(--on-primary) 18%, transparent); --on-primary-fill: color-mix(in srgb, var(--on-primary) 10%, transparent); --on-primary-fill-2: color-mix(in srgb, var(--on-primary) 20%, transparent); --well: color-mix(in srgb, var(--black) 20%, transparent); /* ── SCRIMS & SHADOWS ────────────────────────────────────────────────────── Brand-tinted rather than neutral black, so overlays sit in the same colour world as the rest of the page. */ --shade: color-mix(in srgb, var(--primary-green) 32%, var(--black)); --scrim-deep: color-mix(in srgb, var(--shade) 74%, transparent); --scrim-mid: color-mix(in srgb, var(--shade) 14%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shade) 8%, transparent); --shadow: 0 1px 2px color-mix(in srgb, var(--shade) 8%, transparent), 0 10px 28px -16px color-mix(in srgb, var(--shade) 32%, transparent); --shadow-lg: 0 2px 4px color-mix(in srgb, var(--shade) 8%, transparent), 0 20px 48px -20px color-mix(in srgb, var(--shade) 38%, transparent); /* ── TYPE ────────────────────────────────────────────────────────────────── One family, variable weight, self-hostable later (see assets/fonts). Arial stays in the stack so nothing shifts if the font fails to load. Clubs can override --font-body from settings. */ --font-body: 'Archivo', 'Helvetica Neue', Arial, Helvetica, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* A real scale. The site currently uses 35 distinct sizes; these are the only ones that should appear from here on. */ --t-xs: 0.6875rem; /* 11px — eyebrows, table headers */ --t-sm: 0.8125rem; /* 13px — captions, meta, small labels */ --t-base: 1rem; /* 16px — body */ --t-md: 1.125rem; /* 18px — lead paragraphs */ --t-lg: 1.375rem; /* 22px — card titles */ --t-xl: 1.75rem; /* 28px — section titles */ --t-2xl: clamp(1.6rem, 4vw, 2.25rem); /* page titles */ --t-hero: clamp(1.85rem, 6vw, 3.1rem); /* hero only */ --lh-tight: 1.1; --lh-snug: 1.35; --lh-body: 1.6; --track-tight: -0.025em; /* headings */ --track-wide: 0.14em; /* uppercase labels */ /* ── SPACE ───────────────────────────────────────────────────────────────── 4px base. Replaces 110 ad-hoc padding combinations. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; /* ── SHAPE ───────────────────────────────────────────────────────────────── One radius for cards. The site currently uses 8, 10, 12, 15 and 20px for the same component. */ --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-pill: 999px; /* ── MOTION ──────────────────────────────────────────────────────────────── Every transition on the public site currently uses the browser default `ease` at 0.3s. These give it tiers and a curve with some intent. */ --ease: cubic-bezier(.2, .6, .3, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; /* ── TARGETS ─────────────────────────────────────────────────────────────── WCAG 2.2 sets 24px as the floor; 44px is the comfortable target. */ --tap: 44px; /* ── LAYERS ────────────────────────────────────────────────────────────── */ --z-header: 1000; --z-overlay: 2000; --z-modal: 3000; --z-toast: 4000; } /* ═══════════════════════════════════════════════════════════════════════════ MIXING — for anyone adding to this codebase Old pattern, still working in 123 places, do not add more: background: rgba(var(--primary-green-rgb), 0.2); New pattern, no triplet needed: background: color-mix(in srgb, var(--primary-green) 20%, transparent); Text on a brand band — never a raw white: color: var(--on-primary); full strength color: var(--on-primary-soft); secondary text border-color: var(--on-primary-rule); Accent used for a button, where the label must stay legible: background: var(--accent-surface); color: var(--on-accent-surface); Accent used decoratively, where contrast does not apply: background: var(--accent-gold); ═══════════════════════════════════════════════════════════════════════════ */ /* Respect the OS setting everywhere, once, rather than per-component. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }