/* ============================================================================ TRIUMPH DESIGN SYSTEM v2 — tokens.css Promotional graphics (flyers / digital ads / graphic elements). NOT the dashboard system at design.greenvilletriumph.club — this is the brand-guide look: light canvas, navy #002855, green gradient hero accent. Link order: tokens.css -> pattern.css -> logos.css -> components.css ========================================================================== */ /* ---- Fonts (self-hosted; NO CDN — office TLS inspection blanks CDN assets) -- */ /* Fabiola Capitals ships pathological vertical metrics (caps=0.70em float in a ~1.9em box -> renders small + top-glued). These three overrides re-box it to its real caps, centered. DO NOT REMOVE and DO NOT hand-nudge Fabiola headers with margin/line-height/translateY — that now double-corrects. Weight 400 only. */ @font-face { font-family: "Fabiola Capitals"; src: url("fonts/Fabiola-Capitals.woff2?v=mpc") format("woff2"), url("fonts/Fabiola-Capitals.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 78%; descent-override: 8%; line-gap-override: 0%; } /* DELIBERATE DEVIATION from the vendored design-system copy (member portal only, 2026-08-17): woff2 first and subset to Latin, with the .ttf kept as a fallback source. Variable axes are intact. 854KB -> 110KB on the face that loads on every phone visit; the dropped Cyrillic, Greek and Vietnamese coverage is unreachable on this page. Regenerate with scripts\optimize_assets.py if the fonts are ever re-synced. */ @font-face { font-family: "Inter"; src: url("fonts/Inter-VariableFont.woff2?v=mpc") format("woff2-variations"), url("fonts/Inter-VariableFont.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/Inter-Italic-VariableFont.woff2?v=mpc") format("woff2-variations"), url("fonts/Inter-Italic-VariableFont.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } /* v3 addition. components.css and every preview set dates, counts and code in var(--font-mono); without this face and the token below that declaration is invalid and the type silently falls back to Inter, which loses the tabular figures the ledger and the status rows are aligned on. */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Variable.woff2?v=mpc") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ---- Canonical brand palette (official Brandpad — 7, never extend) ------ */ --navy: #002855; /* Greenville Blue · PMS 295C · primary / base surface */ --green: #61a631; /* Triumph Green · PMS 369C · official primary green */ --fog: #f2fafa; /* Upstate Fog · PMS 7541C · near-white page */ --mist: #d2e6e5; /* Morning Mist · PMS 5455C · pale blue-grey */ --night: #020022; /* Deep Night · Black 6C · near-black ink */ --sky: #69b3e7; /* accent (guide mislabels "Electric Lime") · PMS 292C */ --lime: #97d700; /* accent "Light Green" · PMS 375C · the promo hero accent */ /* ---- Promo accent gradient — Sean's established flyer hero accent ------- Runs LIGHT -> DARK green. Direction is law: NEVER flip it. */ --green-dark: #72b431; --grad-hero: linear-gradient(100deg, var(--lime) 0%, var(--green-dark) 100%); --grad-rule: linear-gradient(90deg, var(--green) 0%, var(--lime) 100%); /* thin accent underline */ /* ---- Greenville Liberty (pulled in for on-demand joint/women's work) ---- Official Brandpad: Greenville Blue + Liberty Yellow. Sean's flyer practice variant uses a deeper navy #182848 + #F8E008 — kept as *-deep tokens. */ --liberty-navy: #002855; --liberty-navy-deep: #182848; --liberty-yellow: #ffe900; /* PMS 803C */ --liberty-gold-deep: #f8e008; --liberty-sky: #70b2e4; /* ---- Semantic surface / ink roles -------------------------------------- */ --surface-light: var(--fog); /* default promo canvas (light) */ --surface-navy: var(--navy); /* dark band / dark graphic canvas */ --ink: var(--navy); /* headline ink on light */ --ink-body: #14304f; /* softened navy for body on light */ --ink-on-navy: #ffffff; /* text on navy */ --ink-muted-navy: #9db6d0; /* quiet label on navy */ --hairline: rgba(0,40,85,.14); /* ---- Type families ----------------------------------------------------- */ --font-display: "Fabiola Capitals", sans-serif; /* NO serif fallback masking a failed load in prod; sans here only to avoid FOIT ugliness */ --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* dates, counts, code, and every tabular figure */ /* ---- Type scale -------------------------------------------------------- Display = Fabiola (hero ONLY). Everything else = Inter. Never route working headings h2/h3 through Fabiola (it synthetic-bolds to mush). */ --text-hero: clamp(3.5rem, 2.4rem + 6vw, 8.5rem); /* @kind spacing */ /* poster hero, Fabiola */ --text-title: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); /* @kind spacing */ /* section title, Fabiola or Inter 900 */ --text-xl: 2rem; --text-lg: 1.5rem; --text-md: 1.125rem; --text-body: 1rem; --text-sm: 0.875rem; --text-label: 0.75rem; /* the ONE uppercase-label size */ --text-xs: 0.6875rem; /* absolute floor — nothing smaller */ --leading-hero: 0.9; /* tight poster leading */ --leading-tight: 1.08; --leading-body: 1.5; --track-label: 0.14em; /* uppercase eyebrow / label */ --track-kicker: 0.2em; --track-hero: 0; /* @kind spacing */ /* Brandpad: no tracking on the Fabiola H1 */ /* ---- Spacing (8pt-ish rhythm) ------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-section: 72px; /* ---- Radius — SHARP by default (only pills/thumbs get round) ----------- */ --radius: 0px; --radius-sm: 2px; --radius-full: 999px; /* ---- Weave pattern hooks (see pattern.css) ----------------------------- ONE seamless vector tile, applied as an alpha MASK so the same tile recolors to any surface via --brand-pattern-ink (navy-on-light, light-on-navy, etc). The tile is exactly ONE repeat period (419×279 ≈ 3:2) rebuilt as vector, so it tiles perfectly at any size with zero seams. Upright — no tilt. --brand-weave is the tile EMBEDDED as a data-URI on purpose: a CSS mask loaded from an external file gets silently CORS-dropped in some page/path contexts (the weave just vanishes). Embedding makes it same-origin and unbreakable. The identical art also lives at images/brand/triumph-weave.svg for download/editing; if you change one, regenerate the other. Keep --brand-pattern-size at ~3:2. */ --brand-weave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20419%20279'%3E%3Cpath%20d='M134,0h22v117h-22zM344,0h22v117h-22zM187,18h126v1h-126zM0,18h104v22h-104zM396,18h23v22h-23zM186,19h128v21h-128zM81,40h23v1h-23zM238,40h24v1h-24zM186,40h23v19h-23zM291,40h23v19h-23zM396,40h22v20h-22zM29,40h23v217h-23zM82,41h22v19h-22zM239,41h22v216h-22zM187,59h22v1h-22zM291,59h22v1h-22zM82,60h21v1h-21zM188,60h21v1h-21zM291,60h21v1h-21zM397,60h21v1h-21zM82,61h19v1h-19zM189,61h20v1h-20zM291,61h20v1h-20zM399,61h19v1h-19zM82,62h18v1h-18zM191,62h18v1h-18zM291,62h18v1h-18zM400,62h18v1h-18zM82,63h16v1h-16zM192,63h17v1h-17zM291,63h17v1h-17zM402,63h16v1h-16zM82,64h15v1h-15zM194,64h15v1h-15zM291,64h15v1h-15zM403,64h15v1h-15zM82,65h13v1h-13zM195,65h14v1h-14zM291,65h14v1h-14zM405,65h13v1h-13zM82,66h12v1h-12zM197,66h12v1h-12zM291,66h12v1h-12zM407,66h11v1h-11zM82,67h10v1h-10zM198,67h11v1h-11zM291,67h11v1h-11zM408,67h10v1h-10zM82,68h9v1h-9zM200,68h9v1h-9zM291,68h9v1h-9zM410,68h8v1h-8zM82,69h7v1h-7zM201,69h8v1h-8zM291,69h8v1h-8zM411,69h7v1h-7zM82,70h6v1h-6zM203,70h6v1h-6zM291,70h6v1h-6zM413,70h5v1h-5zM82,71h4v1h-4zM204,71h5v1h-5zM291,71h5v1h-5zM414,71h4v1h-4zM82,72h3v1h-3zM206,72h3v1h-3zM291,72h3v1h-3zM416,72h2v1h-2zM82,73h1v1h-1zM207,73h2v1h-2zM291,73h2v1h-2zM417,73h1v1h-1zM102,84h2v1h-2zM186,84h2v1h-2zM312,84h2v1h-2zM396,84h2v1h-2zM101,85h3v1h-3zM187,85h3v1h-3zM310,85h3v1h-3zM396,85h3v1h-3zM99,86h5v1h-5zM187,86h4v1h-4zM309,86h4v1h-4zM396,86h5v1h-5zM98,87h6v1h-6zM187,87h6v1h-6zM307,87h6v1h-6zM396,87h6v1h-6zM96,88h8v1h-8zM187,88h7v1h-7zM306,88h7v1h-7zM396,88h8v1h-8zM95,89h9v1h-9zM187,89h9v1h-9zM304,89h9v1h-9zM396,89h9v1h-9zM93,90h11v1h-11zM187,90h10v1h-10zM303,90h10v1h-10zM396,90h11v1h-11zM92,91h12v1h-12zM187,91h12v1h-12zM301,91h12v1h-12zM396,91h12v1h-12zM90,92h14v1h-14zM187,92h13v1h-13zM300,92h13v1h-13zM396,92h14v1h-14zM89,93h15v1h-15zM187,93h15v1h-15zM298,93h15v1h-15zM396,93h15v1h-15zM87,94h17v1h-17zM187,94h16v1h-16zM297,94h16v1h-16zM396,94h17v1h-17zM86,95h18v1h-18zM187,95h18v1h-18zM295,95h18v1h-18zM396,95h18v1h-18zM84,96h20v1h-20zM187,96h19v1h-19zM294,96h19v1h-19zM396,96h20v1h-20zM83,97h21v1h-21zM187,97h21v1h-21zM292,97h21v1h-21zM396,97h21v1h-21zM82,98h22v19h-22zM187,98h22v19h-22zM291,98h22v19h-22zM396,98h22v19h-22zM82,117h127v22h-127zM291,117h127v22h-127zM82,139h124v1h-124zM207,139h1v1h-1zM292,139h1v1h-1zM294,139h124v1h-124zM82,158h127v22h-127zM291,158h127v22h-127zM291,180h23v1h-23zM186,180h23v19h-23zM82,180h22v20h-22zM396,180h22v20h-22zM134,180h22v99h-22zM344,180h22v99h-22zM291,181h22v1h-22zM291,182h23v1h-23zM291,183h22v16h-22zM186,199h22v1h-22zM292,199h21v1h-21zM84,200h20v1h-20zM186,200h21v1h-21zM293,200h20v1h-20zM396,200h20v1h-20zM85,201h19v1h-19zM186,201h19v1h-19zM295,201h18v1h-18zM396,201h19v1h-19zM87,202h17v1h-17zM186,202h18v1h-18zM296,202h17v1h-17zM396,202h17v1h-17zM88,203h16v1h-16zM186,203h16v1h-16zM298,203h15v1h-15zM396,203h16v1h-16zM90,204h14v1h-14zM186,204h15v1h-15zM299,204h14v1h-14zM396,204h14v1h-14zM91,205h13v1h-13zM186,205h13v1h-13zM301,205h12v1h-12zM396,205h13v1h-13zM93,206h11v1h-11zM186,206h12v1h-12zM302,206h11v1h-11zM396,206h11v1h-11zM94,207h10v1h-10zM186,207h10v1h-10zM304,207h9v1h-9zM396,207h10v1h-10zM96,208h8v1h-8zM186,208h9v1h-9zM305,208h8v1h-8zM396,208h8v1h-8zM97,209h7v1h-7zM186,209h7v1h-7zM307,209h6v1h-6zM396,209h7v1h-7zM99,210h5v1h-5zM186,210h6v1h-6zM308,210h5v1h-5zM396,210h5v1h-5zM100,211h4v1h-4zM186,211h4v1h-4zM310,211h3v1h-3zM396,211h4v1h-4zM102,212h2v1h-2zM186,212h3v1h-3zM311,212h3v1h-3zM396,212h2v1h-2zM82,223h1v1h-1zM208,223h1v1h-1zM291,223h1v1h-1zM82,224h2v1h-2zM206,224h3v1h-3zM291,224h3v1h-3zM416,224h2v1h-2zM82,225h4v1h-4zM205,225h4v1h-4zM291,225h4v1h-4zM415,225h3v1h-3zM82,226h5v1h-5zM203,226h6v1h-6zM291,226h6v1h-6zM413,226h5v1h-5zM82,227h7v1h-7zM202,227h7v1h-7zM291,227h7v1h-7zM411,227h7v1h-7zM82,228h8v1h-8zM200,228h9v1h-9zM291,228h9v1h-9zM410,228h8v1h-8zM82,229h10v1h-10zM199,229h10v1h-10zM291,229h10v1h-10zM408,229h10v1h-10zM82,230h11v1h-11zM197,230h12v1h-12zM291,230h12v1h-12zM407,230h11v1h-11zM82,231h13v1h-13zM196,231h13v1h-13zM291,231h13v1h-13zM405,231h13v1h-13zM82,232h14v1h-14zM194,232h15v1h-15zM291,232h15v1h-15zM404,232h14v1h-14zM82,233h16v1h-16zM193,233h16v1h-16zM291,233h16v1h-16zM402,233h16v1h-16zM82,234h17v1h-17zM191,234h18v1h-18zM291,234h18v1h-18zM401,234h17v1h-17zM82,235h19v1h-19zM189,235h20v1h-20zM291,235h19v1h-19zM399,235h19v1h-19zM82,236h21v1h-21zM188,236h21v1h-21zM291,236h21v1h-21zM398,236h20v1h-20zM187,237h22v1h-22zM291,237h22v1h-22zM82,237h22v20h-22zM396,237h22v20h-22zM186,238h23v19h-23zM291,238h23v19h-23zM0,257h104v22h-104zM186,257h128v22h-128zM396,257h23v22h-23z'/%3E%3C/svg%3E"); /* @kind other */ --brand-pattern-size: 300px 200px; /* ≈3:2, the tile's true period. Scale both numbers together. */ --brand-pattern-ink: var(--navy); /* weave color on LIGHT surfaces; the dark-surface classes flip it light */ /* override hooks (defaults live as fallbacks in pattern.css, not here): --brand-pattern-opacity field/light default ~0.08 (whisper: 0.05–0.12) --brand-zone-opacity zone default ~0.05 */ } /* ---- Base reset relevant to type correctness ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--ink-body); background: var(--surface-light); font-synthesis: none; /* GUARD: never fake-bold Fabiola into mush */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display helper: the ONE correct way to set a Fabiola hero. */ .h-display { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--track-hero); text-transform: none; /* the OTF is already all-caps */ text-box-trim: trim-both; /* trims the phantom em box where supported */ text-box-edge: cap alphabetic; margin: 0; } /* ---- Fabiola HORIZONTAL metrics: stacked / flush-left headlines ----------- The @font-face above fixes Fabiola's VERTICAL seating; leave that alone. Horizontally is a separate problem: Fabiola's per-glyph LEFT side-bearing varies, so a line's visible left edge sits inset from its text box by (lsb x font-size). Stack two Fabiola lines left-aligned, or set a Fabiola hero flush-left against an Inter eyebrow / matchup, and the left edges go ragged. The correction is per-CONTENT (it depends on each line's FIRST glyph), so it CANNOT be a class and must NOT be baked into a placeholder template. Apply it per line at author time:

MATCHDAY

margin-left to apply, keyed to the first glyph (measured from Fabiola-Capitals.otf: unitsPerEm 1000, capHeight 698): A +0.007 B -0.015 C -0.017 D -0.015 E -0.015 F -0.015 G -0.017 H -0.015 I -0.015 J +0.068 K -0.015 L -0.015 M -0.015 N -0.015 O -0.017 P -0.015 Q -0.017 R -0.015 S -0.004 T -0.005 U -0.015 V +0.003 W +0.003 X 0.000 Y 0.000 Z +0.001 0 -0.025 1 -0.024 2 -0.022 3 -0.027 4 0.000 5 -0.020 6 -0.025 7 -0.044 8 -0.015 9 -0.025 Traps: J overhangs left hard (+0.068); 7 (-0.044) and every digit pull the line right; most caps cluster near +/-0.015, so a W / V / A / J-initial line set against them is the visibly ragged case (a W-line over an N-line is ~0.018em of correction). A single centered hero needs nothing. See SKILL.md RULE 4. */