/* ================================================================ * ySF — design tokens * * Ported from the brand handover (handover/colors_and_type.css + * handover/CLAUDE.md). This is the token source-of-truth for the * site. Loaded BEFORE style.css in every page . * * The four sport colors are load-bearing: each is permanently mapped * to one league. Never invent new sport colors or remap them. * * Brand decision for the site: body copy stays Palatino (serif). * Display type is Shuttleblock; data/labels are JetBrains Mono. * ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Big+Shoulders+Display:wght@700;800;900&display=swap'); :root { /* ── The four sport colors (locked) ──────────────────────────── green→football blue→hockey orange→basketball red→baseball. Federation Cup ring orientation: green top, blue right, orange bottom, red left. Never recolor or reorder. */ --ysf-green: #177245; /* Football · ySFFL · 363 C */ --ysf-blue: #6da7ee; /* Hockey · ySFHL · 279 C */ --ysf-orange: #e86100; /* Basketball · ySFBA · 165 C */ --ysf-red: #ba0c2f; /* Baseball · ySFLB · 200 C */ --league-football: var(--ysf-green); --league-hockey: var(--ysf-blue); --league-basketball: var(--ysf-orange); --league-baseball: var(--ysf-red); /* ── Ink / paper neutrals ──────────────────────────────────── */ --ink-1000: #000000; /* canonical black — body copy, UI strokes */ --ink-800: #1F1F1F; /* dark UI surfaces */ --ink-600: #4A4A4A; /* secondary body */ --ink-400: #8A8A8A; /* captions, helper text */ --ink-200: #C7C7C7; /* disabled / muted UI */ --ink-100: #E5E5E5; /* hairline rules */ --ink-50: #F2F2F2; /* subtle fills */ --paper: #FFFFFF; /* default light background */ --paper-warm: #FAFAF7; /* editorial off-white — page background */ /* ── Brand-page accents (brand book only — not product UI) ──── */ --accent-magenta: #E500C5; --accent-purple: #660066; /* ── Type families ─────────────────────────────────────────── */ /* Display — Shuttleblock (Adobe Fonts kit, loaded in HTML head). Big Shoulders Display is the open-licence fallback. */ --font-display: 'shuttleblock','Shuttleblock','Big Shoulders Display',Impact,sans-serif; /* Body — Palatino (self-hosted WOFF2 in /fonts/). */ --font-body: 'Palatino','Palatino Linotype','Book Antiqua',serif; /* Mono / data — JetBrains Mono. Labels, all-caps tags, scorelines. */ --font-mono: 'JetBrains Mono',ui-monospace,monospace; /* UI chrome (nav, labels, buttons) shares the display face. */ --font-ui: var(--font-display); /* Legacy alias kept so older style.css rules keep resolving. */ --ui: var(--font-display); /* ── Type scale ────────────────────────────────────────────── */ --t-display: clamp(40px, 5.5vw, 72px); --t-h1: 40px; --t-h2: 28px; --t-h3: 20px; --t-h4: 16px; --t-body: 16px; --t-small: 14px; --t-micro: 12px; /* ── Spacing (4-px grid) ───────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ── Rules / radius ────────────────────────────────────────── */ --rule: 1px solid var(--ink-100); --rule-strong: 2px solid var(--ink-1000); --r-card: 4px; /* ── Match-state chrome ──────────────────────────────────────── Reserved match-state words carry fixed meaning. LIVE is the only "alert" color on the site; everything else reads quiet. */ --state-live: #D7263D; /* LIVE */ --state-final: var(--ink-600); /* FINAL · FT */ --state-progress: var(--ysf-orange);/* HT · OT — in play */ --state-pending: var(--ink-400); /* TBC · POSTPONED */ /* ── 12 club palettes (locked) ───────────────────────────────── --club-{abbr}-{role}. Use a club's primary as its identity color; --{abbr}-ink is the readable-on-white text variant. */ --club-aac-primary: #004B41; --club-aac-secondary: #80684B; --club-aac-ink: #004B41; --club-acf-primary: #00333F; --club-acf-secondary: #F7BA61; --club-acf-accent: #ED8453; --club-acf-accent-2: #EB5E4C; --club-acf-ink: #00333F; --club-basc-primary: #0D00B2; --club-basc-secondary: #FFFFFF; --club-basc-ink: #0D00B2; --club-insc-primary: #12E0E5; --club-insc-secondary: #E500C5; --club-insc-globe-1: #10C7CC; --club-insc-globe-2: #0EADB2; --club-insc-globe-3: #0B898C; --club-insc-globe-4: #0A777F; --club-insc-accent: #0D3A3F; --club-insc-ink: #0B898C; /* cyan is unreadable on white */ --club-kmu-primary: #10153F; --club-kmu-secondary: #19B9EE; --club-kmu-accent: #8DD3D9; --club-kmu-ink: #10153F; --club-mbjc-primary: #036B08; --club-mbjc-field: #FFFFFF; --club-mbjc-ink: #036B08; --club-oysc-primary: #6F263D; --club-oysc-secondary: #006194; --club-oysc-accent: #A2AAAD; --club-oysc-ink: #6F263D; --club-rc-primary: #034072; --club-rc-secondary: #A70F23; --club-rc-accent: #AF983F; --club-rc-accent-2: #F8ECA8; --club-rc-field: #F4EED7; --club-rc-ink: #034072; --club-rmck-primary: #7700B5; --club-rmck-secondary: #FFCB05; --club-rmck-accent: #0076B6; --club-rmck-ink: #7700B5; --club-ssu-primary: #C8102E; --club-ssu-secondary: #FF8C24; --club-ssu-field: #FFFFFF; --club-ssu-ink: #C8102E; --club-wu-primary: #EAAA00; --club-wu-secondary: #9D2235; --club-wu-accent: #000000; --club-wu-field: #FFFED7; --club-wu-ink: #9D2235; /* gold is unreadable on white */ --club-wwfc-primary: #B30007; --club-wwfc-secondary: #000000; --club-wwfc-ink: #B30007; /* ── Championship palettes (per league) ────────────────────── */ --champ-fl-primary: #95A2AC; --champ-fl-secondary: #353A3D; /* Supper Bowl */ --champ-ba-primary: #EEB21D; --champ-ba-secondary: #B1882E; /* The Syllys */ --champ-hl-primary: #8CC63F; /* Gordos Cup */ --champ-lb-primary: #8B2144; --champ-lb-secondary: #046B4D; /* Sim. Series */ --champ-lb-navy: #2E2F78; --champ-lb-accent: #EBAA20; } /* ── Sport scoping ─────────────────────────────────────────────── Set data-sport on (or any surface) and components reach for var(--sport) to inherit the right league tint. */ [data-sport="football"] { --sport: var(--ysf-green); } [data-sport="hockey"] { --sport: var(--ysf-blue); } [data-sport="basketball"] { --sport: var(--ysf-orange); } [data-sport="baseball"] { --sport: var(--ysf-red); } :root, [data-sport="federation"] { --sport: var(--ink-1000); } /* Preserve the lowercase `y` in ySF / yoy inside uppercase contexts. */ .lc { text-transform: none !important; }