/* * NorthBanked design tokens. * * One source of truth for colour, type, spacing and radius. Every other * stylesheet in this plugin should consume these variables rather than * hardcoding a hex value or a pixel size. When something looks inconsistent * between the match centre, the squad picker and the player pages, the fix * belongs here, not in another override file. * * Loaded first, so everything downstream can read the variables. The tokens * are declared on :root and mirrored onto the plugin's own wrappers so the * component still resolves correctly if a theme scopes or resets :root. */ :root, .nb-pred-wrap, .nbpl-wrap, .nb-mobile-platform-shell, .nb-matchday-platform { /* ---- Brand -------------------------------------------------------- */ --nb-red: #ED111F; /* primary action, club identity */ --nb-red-dark: #B8000A; /* pressed state, gradient foot */ --nb-gold: #C9A227; /* secondary accent, labels */ --nb-gold-bright: #E8BD43; /* highlights, winning states */ /* ---- Surfaces ------------------------------------------------------ */ --nb-bg: #0A1729; /* page background */ --nb-surface: #0E2039; /* cards, panels */ --nb-surface-raised: #16263C; /* inputs, raised rows */ --nb-line: #24384F; /* borders, dividers */ /* ---- Text ---------------------------------------------------------- */ --nb-text: #E8ECF3; /* body copy */ --nb-text-strong: #FFFFFF; /* headings, numerals */ --nb-text-muted: #8FA2BA; /* captions, metadata */ --nb-text-faint: #5C6E85; /* disclaimers, timestamps */ /* ---- Positions (shared by pitch tokens, bench and stats) ----------- */ --nb-pos-gk: #E6A700; --nb-pos-def: #1E7145; --nb-pos-mid: #2A72D0; --nb-pos-fwd: #C0392B; /* ---- Status -------------------------------------------------------- */ --nb-win: #E8BD43; --nb-correct: #2F8F5B; --nb-live: #37CB82; --nb-locked: #8FA2BA; /* ---- Typography ---------------------------------------------------- * Three roles only. Oswald carries headings and numerals because the * condensed forms read like a scoreboard; Inter carries body copy for * legibility at small sizes; Space Mono carries labels and data so * figures align in columns. */ --nb-font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif; --nb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --nb-font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale. Fluid where it matters, so one set works on both phone and desktop without a second stack of breakpoint overrides. */ --nb-text-xs: 12px; /* the legibility floor */ --nb-text-sm: 13px; --nb-text-base: 15px; --nb-text-md: 17px; --nb-text-lg: clamp(19px, 2.2vw, 22px); --nb-text-xl: clamp(23px, 3vw, 28px); /* Button sizing — the single source of truth. Every button class in every route/mobile/desktop context should resolve to one of these three, not its own hand-picked pixel value. Before this token set existed, .nb-btn alone had 6 different declared heights (38-46px) across 8 files, .nb-step-btn had 7 (18-38px) — this is what stops that drift from creeping back in. */ --nb-btn-height: 44px; /* standard buttons — meets the 44px touch-target floor everywhere, mobile and desktop alike */ --nb-btn-height-sm: 36px; /* compact contextual buttons: week-nav, filter chips */ --nb-step-size: 32px; /* small circular +/- steppers next to a score input */ --nb-h3: clamp(20px, 3vw, 26px); --nb-h2: clamp(26px, 4vw, 36px); --nb-h1: clamp(34px, 6vw, 54px); --nb-display: clamp(44px, 9vw, 78px); /* scorelines */ --nb-weight-normal: 500; --nb-weight-medium: 600; --nb-weight-bold: 700; --nb-weight-black: 800; --nb-leading-tight: 1.1; --nb-leading-snug: 1.3; --nb-leading-body: 1.55; --nb-tracking-label: .08em; /* uppercase mono labels */ /* ---- Spacing: a 4px scale, so paddings agree across sections -------- */ --nb-space-1: 4px; --nb-space-2: 8px; --nb-space-3: 12px; --nb-space-4: 16px; --nb-space-5: 20px; --nb-space-6: 24px; --nb-space-8: 32px; --nb-space-10: 40px; --nb-space-12: 48px; --nb-space-16: 64px; /* Section rhythm — use these rather than ad-hoc margins, so the gap between a header and a section is the same everywhere. */ --nb-section-gap: clamp(24px, 5vw, 48px); --nb-card-padding: clamp(16px, 3vw, 24px); --nb-page-gutter: clamp(16px, 4vw, 32px); --nb-content-max: 1080px; --nb-content-narrow: 720px; /* ---- Radius & elevation -------------------------------------------- */ --nb-radius-sm: 8px; --nb-radius-md: 12px; --nb-radius-lg: 18px; --nb-radius-pill: 999px; --nb-shadow-sm: 0 2px 8px rgba(4, 10, 20, .28); --nb-shadow-md: 0 8px 24px rgba(4, 10, 20, .34); --nb-shadow-lg: 0 18px 46px rgba(4, 10, 20, .42); /* ---- Controls ------------------------------------------------------- */ --nb-tap-min: 44px; /* WCAG 2.5.5 / Apple HIG minimum */ --nb-tap-comfort: 48px; /* frequently-tapped controls */ --nb-input-size: 16px; /* below this, iOS zooms on focus */ /* ---- Motion --------------------------------------------------------- */ --nb-ease: cubic-bezier(.4, 0, .2, 1); --nb-speed-fast: .15s; --nb-speed: .25s; /* ---- Squad pitch ---------------------------------------------------- * The board is sized from the viewport with a hard ceiling, so it fills a * phone screen without becoming an oversized slab on a desktop monitor. * A real pitch is 68x105, and 0.647 keeps that ratio. */ --nb-pitch-ratio: 0.647; --nb-pitch-max-width: 560px; --nb-pitch-token: clamp(38px, 9vw, 54px); --nb-pitch-name: clamp(10px, 2.2vw, 13px); } /* Breakpoints are documented here for reference; CSS cannot yet use variables inside media queries, so these values must be typed literally elsewhere. Use ONLY these four, so components change shape at the same widths: --nb-bp-sm: 480px phone, large --nb-bp-md: 768px tablet / mobile-desktop boundary --nb-bp-lg: 1024px small laptop --nb-bp-xl: 1280px desktop */ /* ---- Base application of the tokens ---------------------------------- */ .nb-pred-wrap, .nbpl-wrap, .nb-mobile-platform-shell { font-family: var(--nb-font-body); font-size: var(--nb-text-base); line-height: var(--nb-leading-body); color: var(--nb-text); } .nb-pred-wrap h1, .nbpl-wrap h1, .nb-mobile-platform-shell h1, .nb-pred-wrap h2, .nbpl-wrap h2, .nb-mobile-platform-shell h2, .nb-pred-wrap h3, .nbpl-wrap h3, .nb-mobile-platform-shell h3 { font-family: var(--nb-font-display); font-weight: var(--nb-weight-black); line-height: var(--nb-leading-tight); color: var(--nb-text-strong); text-transform: uppercase; margin: 0 0 var(--nb-space-4); } .nb-pred-wrap h1, .nbpl-wrap h1, .nb-mobile-platform-shell h1 { font-size: var(--nb-h1); } .nb-pred-wrap h2, .nbpl-wrap h2, .nb-mobile-platform-shell h2 { font-size: var(--nb-h2); } .nb-pred-wrap h3, .nbpl-wrap h3, .nb-mobile-platform-shell h3 { font-size: var(--nb-h3); } /* The small uppercase label above a section. One treatment, used everywhere. */ .nb-section-kicker { font-family: var(--nb-font-mono); font-size: var(--nb-text-xs); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-label); text-transform: uppercase; color: var(--nb-gold-bright); margin-bottom: var(--nb-space-2); } /* Section rhythm */ .nb-pred-wrap > section, .nbpl-wrap > section, .nb-mobile-platform-shell > section { margin-bottom: var(--nb-section-gap); }