/* ================================================================ The Netball Umpire — Design Tokens "COURT" visual direction — the court itself is the visual world. Deep court-teal floor, chalk-white markings, bright bib accents, the whistle as the brand mark. Font @font-face declarations live separately in tnu-fonts.css. ================================================================ */ :root { /* ============================================================ COURT — the playing surface, the canvas of the brand ============================================================ */ --tnu-floor: #0E3A38; /* deep court-teal · primary brand surface */ --tnu-floor-dk: #082322; /* deepest teal · footer, deep panels */ --tnu-floor-tint: #1A4A48; /* lighter teal · hover states on floor */ --tnu-floor-line: rgba(250,247,239,0.18); /* chalk line on teal */ /* ============================================================ CHALK — the markings that define the court The "paper" half of the palette. Off-white, warm. ============================================================ */ --tnu-chalk: #FAF7EF; /* chalk-white · text on floor, lines */ --tnu-paper: #F4EFE2; /* page surface · warm off-white */ --tnu-paper-dk: #EAE3D0; /* slightly darker paper · sub-surfaces */ --tnu-paper-line: rgba(10,30,29,0.12); /* ruled-line on paper */ /* ============================================================ INK — text on light surfaces, hard borders ============================================================ */ --tnu-ink: #0A1E1D; /* near-black with green undertone */ --tnu-ink-2: #233936; /* secondary text */ --tnu-ink-3: #56716E; /* muted text */ /* ============================================================ BIBS — accent palette, mapped to playing positions ============================================================ */ --tnu-bib-pink: #FF3E8B; /* GS / GA · position chip only, not a general accent */ --tnu-bib-pink-dk: #D11A65; --tnu-bib-yellow: #FFD23F; /* WA / C · ALSO the canonical brand accent */ --tnu-bib-yellow-dk:#E6B91A; --tnu-bib-teal: #1F8A82; /* WD / GD · defence — bold darker teal */ --tnu-bib-teal-dk: #14625C; --tnu-bib-blue: #3A8DA4; /* GK · keeper */ --tnu-bib-blue-dk: #1F6377; /* ============================================================ ACCENT — the canonical brand highlight One accent, applied consistently: yellow on dark, ink on light. ============================================================ */ --tnu-accent: var(--tnu-bib-yellow); --tnu-accent-fg: var(--tnu-ink); --tnu-accent-dk: var(--tnu-bib-yellow-dk); /* ============================================================ ACCENT DOT — the dark counter to the yellow accent Burnt orange — warm, less loud than red, distinct from yellow. ============================================================ */ --tnu-accent-dot: #D85F26; --tnu-accent-dot-fg: var(--tnu-chalk); /* ============================================================ SIGNAL — the directional red from the hand-signal photos ============================================================ */ --tnu-signal: #E0392C; --tnu-signal-dk: #B62318; /* ============================================================ SEMANTIC ============================================================ */ --tnu-bg: var(--tnu-paper); --tnu-surface: var(--tnu-chalk); --tnu-fg: var(--tnu-ink); --tnu-fg-muted: var(--tnu-ink-3); --tnu-border: var(--tnu-ink); --tnu-rule: var(--tnu-paper-line); --tnu-success: #1F8A5B; --tnu-warning: var(--tnu-bib-yellow); --tnu-danger: var(--tnu-signal); /* ============================================================ GAME MANAGEMENT — five-step severity ladder (Rule 19) Calm green → yellow → amber → red → deep crimson. ============================================================ */ --tnu-gm-advice: #1F8A5B; /* 1 · Proactive advice — calm, verbal */ --tnu-gm-advice-fg: var(--tnu-chalk); --tnu-gm-advance: #FFD23F; /* 2 · Advance — formal call, no penalty */ --tnu-gm-advance-fg: var(--tnu-ink); --tnu-gm-warning: #F58A1F; /* 3 · Warning — amber, on record */ --tnu-gm-warning-fg: var(--tnu-ink); --tnu-gm-suspension: #E0392C; /* 4 · Suspension — signal red */ --tnu-gm-suspension-fg: var(--tnu-chalk); --tnu-gm-orderingoff: #5C1611; /* 5 · Ordering off — deep crimson, gone */ --tnu-gm-orderingoff-fg:var(--tnu-chalk); /* ============================================================ POSITION-BIB SYSTEM ============================================================ */ --tnu-pos-GS: var(--tnu-bib-pink); --tnu-pos-GS-fg: var(--tnu-chalk); --tnu-pos-GA: var(--tnu-bib-pink); --tnu-pos-GA-fg: var(--tnu-chalk); --tnu-pos-WA: var(--tnu-bib-yellow); --tnu-pos-WA-fg: var(--tnu-ink); --tnu-pos-C: var(--tnu-bib-yellow); --tnu-pos-C-fg: var(--tnu-ink); --tnu-pos-WD: var(--tnu-bib-yellow); --tnu-pos-WD-fg: var(--tnu-ink); --tnu-pos-GD: var(--tnu-bib-teal); --tnu-pos-GD-fg: var(--tnu-chalk); --tnu-pos-GK: var(--tnu-bib-teal); --tnu-pos-GK-fg: var(--tnu-chalk); /* ============================================================ TYPE — Fredoka, pushed hard. Big display, tight leading, negative tracking. ============================================================ */ --tnu-font: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --tnu-display-xl: clamp(72px, 9vw, 144px); --tnu-display-l: clamp(56px, 6vw, 96px); --tnu-display-m: clamp(40px, 4.4vw, 64px); --tnu-h1: 44px; --tnu-h2: 36px; --tnu-h3: 28px; --tnu-h4: 22px; --tnu-h5: 18px; --tnu-text-lead: 20px; --tnu-text-base: 17px; --tnu-text-sm: 14px; --tnu-text-xs: 12px; --tnu-eyebrow: 12px; --tnu-eyebrow-track: 0.18em; --tnu-w-light: 300; --tnu-w-regular: 400; --tnu-w-medium: 500; --tnu-w-semibold: 600; --tnu-w-bold: 700; --tnu-wdth-condensed: 75%; --tnu-wdth-semi-condensed: 87.5%; --tnu-wdth-regular: 100%; --tnu-wdth-semi-expanded: 112.5%; --tnu-wdth-expanded: 125%; --tnu-lh-tight: 0.9; --tnu-lh-snug: 1.1; --tnu-lh-normal: 1.45; --tnu-lh-loose: 1.6; --tnu-tr-display: -0.035em; --tnu-tr-tight: -0.015em; --tnu-tr-normal: 0; --tnu-tr-wide: 0.06em; --tnu-tr-wider: 0.14em; --tnu-tr-widest: 0.22em; /* ============================================================ SPACING — generous, 8px grid ============================================================ */ --tnu-s-1: 4px; --tnu-s-2: 8px; --tnu-s-3: 12px; --tnu-s-4: 16px; --tnu-s-5: 24px; --tnu-s-6: 32px; --tnu-s-7: 48px; --tnu-s-8: 64px; --tnu-s-9: 96px; --tnu-s-10: 128px; --tnu-gutter: 56px; --tnu-gutter-mobile: 24px; /* ============================================================ SPACING BY CONTEXT — the agreed scale (Sam, spacing review, 30 Oct 2026; decisions in dev/spacing_review/decisions.json). Use these, not the raw scale above and not Bootstrap spacing utilities, whenever two things sit next to each other. The guide is the `spacing` skill (.claude/skills/spacing). ============================================================ */ /* Text rhythm (rule pages, guides, CPD, boxes) */ --tnu-space-paragraph: 16px; /* paragraph to paragraph */ --tnu-space-heading-above: 22px; /* anything to a sub-heading or sub-section */ --tnu-space-heading-text: 12px; /* any heading to the text under it */ --tnu-space-heading-box: 18px; /* sub-heading to a box under it */ --tnu-space-lead-in: 12px; /* a sentence to what it introduces (list, video) */ --tnu-space-list-item: 8px; --tnu-space-list-item-long: 12px; /* items that run to several lines (.tnu-list-roomy) */ --tnu-space-sublist-item: 4px; --tnu-space-in-box: 12px; /* paragraph to paragraph inside a callout or panel */ /* Blocks */ --tnu-space-block: 16px; /* text to box, box to box, steps, columns either way */ --tnu-space-caption: 8px; /* hand-signal image to its caption (image adds ~8) */ --tnu-space-card: 32px; /* card to card, lead or video to the first card */ --tnu-space-page-top: 40px; /* hero or strip to the first content */ /* Padding */ --tnu-pad-card-header-y: 16px; --tnu-pad-card-header-x: 24px; /* lines the heading up with the body text */ --tnu-pad-card-y: 20px; --tnu-pad-card-x: 24px; --tnu-pad-box-y: 16px; /* callouts, grey panels, answer reveals, small boxes */ --tnu-pad-box-x: 20px; --tnu-pad-cell-y: 10px; --tnu-pad-cell-x: 12px; --tnu-pad-hub-card: 32px; /* cards on the hub pages, quiz and contact cards */ --tnu-space-hub-grid: 16px; /* between hub cards and rule chips */ --tnu-space-band: 80px; /* home page bands, top and bottom */ /* Blog (20px text, 34px line: the rule-page proportions, scaled) */ --tnu-blog-paragraph: 20px; --tnu-blog-h2-above: 40px; --tnu-blog-h3-above: 28px; --tnu-blog-heading-text: 12px; --tnu-blog-block: 20px; /* asides, definitions, diagrams */ --tnu-blog-photo: 32px; --tnu-blog-caption: 12px; /* ============================================================ SHAPE — radii are chunky or zero ============================================================ */ --tnu-r-sm: 8px; --tnu-r-md: 16px; --tnu-r-lg: 24px; --tnu-r-xl: 32px; --tnu-r-pill: 9999px; --tnu-bw: 2px; --tnu-bw-thin: 1px; --tnu-bw-thick:3px; /* ============================================================ ELEVATION — restrained. Flat brand, ink border is the elevation cue. ============================================================ */ --tnu-shadow-sm: 0 2px 0 var(--tnu-ink); --tnu-shadow-md: 0 8px 24px rgba(10,30,29,0.08); --tnu-shadow-lg: 0 20px 60px rgba(10,30,29,0.18); /* ============================================================ MOTION ============================================================ */ --tnu-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --tnu-dur-fast: 140ms; --tnu-dur: 260ms; } /* Phone values (768px and below). Text-rhythm and in-box gaps stay the same at every width; box padding and page-scale gaps step down. Sam reviewed at desktop width and asked for these to be set from his desktop choices (spacing skill, "Phone and tablet"). */ @media (max-width: 768px) { :root { --tnu-space-card: 24px; --tnu-space-page-top: 32px; --tnu-pad-card-header-y: 12px; --tnu-pad-card-header-x: 20px; --tnu-pad-card-y: 16px; --tnu-pad-card-x: 20px; --tnu-pad-box-x: 16px; --tnu-pad-hub-card: 24px; --tnu-space-band: 56px; } } /* ================================================================ BASE — applies Fredoka + ink-on-paper defaults to the page. ================================================================ */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--tnu-bg); color: var(--tnu-fg); font-family: var(--tnu-font); font-size: var(--tnu-text-base); line-height: var(--tnu-lh-normal); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01'; } h1, h2, h3, h4, h5, h6 { font-family: var(--tnu-font); font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-snug); letter-spacing: var(--tnu-tr-tight); color: inherit; margin: 0 0 var(--tnu-s-4); } h1 { font-size: var(--tnu-h1); } h2 { font-size: var(--tnu-h2); } h3 { font-size: var(--tnu-h3); } h4 { font-size: var(--tnu-h4); } h5 { font-size: var(--tnu-h5); font-weight: var(--tnu-w-semibold); } p { margin: 0 0 var(--tnu-s-4); } a { color: inherit; } .tnu-display-xl { font-size: var(--tnu-display-xl); font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-tight); letter-spacing: var(--tnu-tr-display); } .tnu-display-l { font-size: var(--tnu-display-l); font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-tight); letter-spacing: var(--tnu-tr-display); } .tnu-display-m { font-size: var(--tnu-display-m); font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-snug); letter-spacing: var(--tnu-tr-tight); } .tnu-eyebrow { font-size: var(--tnu-eyebrow); font-weight: var(--tnu-w-semibold); letter-spacing: var(--tnu-tr-widest); text-transform: uppercase; color: var(--tnu-fg-muted); display: inline-flex; align-items: center; gap: var(--tnu-s-3); } .tnu-lead { font-size: var(--tnu-text-lead); line-height: var(--tnu-lh-normal); color: var(--tnu-ink-2); } .tnu-tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }