/* ============================================================
GREENVILLE TRIUMPH — DESIGN TOKENS
design.greenvilletriumph.club/tokens.css
2026 rebrand. Brand palette byte-verified against the .aco swatch.
Brandpad source of truth: https://brandpad.io/greenville-triumph/
How to consume in any Triumph dashboard:
Then use var(--token-name) in CSS, never hex/RGBA/OKLCH.
Chart.js exception: canvas API can't resolve CSS vars, so dataset
colors must be hex literals. Use the values listed in --brand-* below.
============================================================ */
/* ============================================================
BRAND FONTS (self-hosted, served from this domain)
------------------------------------------------------------
Brandpad mandates two families:
• Fabiola Capitals — H1 / H2 / H3 (single-weight 400 OTF)
• Inter — H4 + body + UI (H4 = Black 900)
Both are served from this origin with CORS open, so any
Triumph dashboard that links tokens.css inherits the real
fonts automatically. Source files copied from the Brandpad
asset pack at brandpad.io/greenville-triumph (Fabiola .otf
from the "02. Fonts/Heading" folder; Inter variable .ttfs
from the "02. Fonts/Body" folder, SIL OFL).
⚠ CRITICAL: Fabiola Capitals is a SINGLE-WEIGHT OTF. Asking
for font-weight 900 (or any weight > 400) on it causes the
browser to SYNTHETICALLY bold the glyphs — fattening every
stroke and crushing the inter-letter spacing into mush. The
`font-synthesis: none` declaration in the base reset (below)
prevents this at the browser level: any future code that
accidentally requests `font-weight: 900` on a Fabiola element
gracefully renders the real 400-weight instead of fake-bold.
Don't remove that rule. Don't override it. Don't add
`font-weight: 900` to Fabiola elements — use 400 only.
============================================================ */
@font-face {
font-family: 'Fabiola Capitals';
src: url('https://design.greenvilletriumph.club/fonts/Fabiola-Capitals.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('https://design.greenvilletriumph.club/fonts/Inter-VariableFont.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('https://design.greenvilletriumph.club/fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
:root {
color-scheme: only dark;
/* ============================================================
BRAND PALETTE (canonical 7, never extend)
------------------------------------------------------------
The seven approved colors. Every other token references one
of these. Never introduce an 8th color, even temporarily.
============================================================ */
--brand-greenville-blue: #002855; /* PMS 295 C — formal navy, surfaces */
--brand-triumph-green: #61a631; /* PMS 369 C — primary brand accent */
--brand-upstate-fog: #f2fafa; /* PMS 7541 C — primary text on dark */
--brand-morning-mist: #d2e6e5; /* PMS 5455 C — soft text on dark */
--brand-deep-night: #020022; /* PMS Black 6 C — page background */
--brand-electric-lime: #69b3e7; /* PMS 292 C — blue accent (named "lime") */
--brand-light-green: #97d700; /* PMS 375 C — lime accent (never with electric-lime) */
/* ============================================================
SURFACE ROLES (semantic mapping of brand colors)
------------------------------------------------------------
Use these in components. Never reach past them to the
raw --brand-* tokens for surface decisions.
============================================================ */
--color-bg: var(--brand-deep-night); /* page background */
--color-surface: var(--brand-greenville-blue); /* banded section / card surface */
--color-surface-alt: rgba(242, 250, 250, 0.04); /* subtle hover / inset surface */
--color-text: var(--brand-upstate-fog); /* primary body + headings */
--color-text-soft: var(--brand-morning-mist); /* secondary body / supporting */
--color-text-muted: rgba(242, 250, 250, 0.55); /* captions, labels, meta */
--color-border: rgba(242, 250, 250, 0.10); /* default hairline */
--color-border-emphasis: rgba(242, 250, 250, 0.22); /* table headers, input underlines */
/* ============================================================
ACCENT ROLES
------------------------------------------------------------
One accent per layout. Pick --color-blue OR --color-pop,
not both (Brandpad rule: accents never appear together).
============================================================ */
--color-accent: var(--brand-triumph-green); /* primary CTA, active nav, KPI 1st */
--color-blue: var(--brand-electric-lime); /* secondary accent, KPI 2nd */
--color-pop: var(--brand-light-green); /* third accent, KPI 3rd, hover-pop on CTA */
/* ============================================================
STATUS COLORS (system signals only, NEVER decorative)
------------------------------------------------------------
Reserve for state communication: success/warning/danger/info.
Do not use --color-warning as a 4th accent. Yellow signals
warning; using it decoratively means a real warning will be missed.
============================================================ */
--color-success: var(--brand-triumph-green);
--color-success-subtle: rgba(97, 166, 49, 0.14);
--color-warning: #d4a14b;
--color-warning-subtle: rgba(212, 161, 75, 0.14);
--color-danger: #ef4444;
--color-danger-subtle: rgba(239, 68, 68, 0.14);
--color-info: var(--brand-electric-lime);
--color-info-subtle: rgba(105, 179, 231, 0.14);
/* ============================================================
TYPOGRAPHY FAMILIES
------------------------------------------------------------
Per Brandpad: Fabiola Capitals for headlines (H1–H3), Inter
for H4 + body + UI. Both are self-hosted from this origin via
the @font-face declarations at the top of this file, so any
dashboard linking tokens.css gets the real fonts. JetBrains
Mono is NOT in the brand spec — it's a design-system-only
utility for numeric tables and code blocks (still served via
Google Fonts on pages that need it).
============================================================ */
--font-display: 'Fabiola Capitals', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
/* ============================================================
TYPE SCALE (fluid, dashboard-dense)
------------------------------------------------------------
--text-xs 0.72–0.78rem captions, table headers, eyebrows
--text-sm 0.82–0.9rem body small, KPI labels
--text-base 0.94–1rem body default
--text-lg 1.05–1.18rem body lead, section subtitles
--text-xl 1.2–1.45rem section intro lede
--text-2xl 1.5–1.95rem h3 / large KPI value
--text-3xl 1.9–3rem h2 / section titles
--text-display 2.6–5rem h1 / hero only
============================================================ */
--text-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
--text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
--text-base: clamp(0.94rem, 0.9rem + 0.15vw, 1rem);
--text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
--text-xl: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
--text-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.95rem);
--text-3xl: clamp(2.4rem, 1.8rem + 2.4vw, 4.2rem);
--text-display: clamp(3.2rem, 2rem + 6vw, 8.7rem);
/* ============================================================
WEIGHT SCALE
------------------------------------------------------------
Brandpad ships body at Inter Light (300). The Inter variable
font supports weights 100–900. Fabiola is a single-weight 400
OTF — never request 800/900 on a Fabiola element (see headings
rule below).
============================================================ */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extra: 800;
--weight-black: 900;
/* ============================================================
SPACING SCALE (fluid)
------------------------------------------------------------
--space-xs 0.3–0.45rem icon gaps, badge padding
--space-sm 0.55–0.85rem inline element gaps, button padding
--space-md 0.9–1.35rem grid gaps, between cards in a row
--space-lg 1.35–2rem between content blocks within a section
--space-xl 2–3rem between major content blocks
--space-2xl 2.75–4.25rem between sections (= --section-pad)
============================================================ */
--space-xs: clamp(0.3rem, 0.25rem + 0.15vw, 0.45rem);
--space-sm: clamp(0.55rem, 0.45rem + 0.3vw, 0.85rem);
--space-md: clamp(0.9rem, 0.75rem + 0.5vw, 1.35rem);
--space-lg: clamp(1.35rem, 1.1rem + 0.85vw, 2rem);
--space-xl: clamp(2rem, 1.5rem + 1.4vw, 3rem);
--space-2xl: clamp(2.75rem, 2rem + 2.5vw, 4.25rem);
/* ============================================================
LAYOUT SHELLS
------------------------------------------------------------
--content-max 1180px container — never multi-column body
--section-pad top/bottom of every
--card-pad default padding for component cards
============================================================ */
--content-max: 1180px;
--section-pad: var(--space-2xl);
--card-pad: var(--space-md);
/* ============================================================
RADIUS (Triumph is sharp by default)
------------------------------------------------------------
--radius 0px everything that isn't a badge or thumb
--radius-cta 4px buttons only (slight rounding signals interactivity)
--radius-full 999px badges, toggle thumb, accent dots
============================================================ */
--radius: 0px;
--radius-cta: 4px;
--radius-full: 999px;
/* ============================================================
SHADOW ELEVATION
------------------------------------------------------------
Conveys hierarchy, not decoration. Use sparingly.
--shadow-sm 1px ambient resting cards, table rows
--shadow-md 6px lift hovered cards, dropdowns
--shadow-lg 18px lift modals, sticky overlays
============================================================ */
--shadow-sm: 0 1px 3px rgba(2, 0, 34, 0.45);
--shadow-md: 0 6px 16px rgba(2, 0, 34, 0.50);
--shadow-lg: 0 18px 44px rgba(2, 0, 34, 0.62);
/* ============================================================
MOTION
------------------------------------------------------------
Standardized so hover / focus / state transitions feel
consistent across every component.
============================================================ */
--duration: 0.35s;
--duration-fast: 0.2s;
--duration-slow: 0.6s;
--ease-out: cubic-bezier(0.2, 0, 0.1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
BASE RESET + ELEMENTS
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: 72px;
-webkit-font-smoothing: antialiased;
background-color: var(--color-bg);
color-scheme: only dark;
}
body {
font-family: var(--font-sans);
font-size: 16px;
/* Brandpad ships body at Inter weight 300 — they label it "Regular"
in prose, but the actual computed weight is Light (300). Match. */
font-weight: 300;
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
/* Brand guardrail: refuse browser-synthesized weights and italics.
Fabiola Capitals is a single-weight 400 OTF; without this rule a
stray `font-weight: 900` on a heading would silently produce a
crushed fake-bold instead of the real Fabiola. With this rule,
any unsupported variant falls back to the real one. Never remove. */
font-synthesis: none;
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-pop); }
img { display: block; max-width: 100%; }
code {
font-family: var(--font-mono);
font-size: 0.875em;
background: rgba(242, 250, 250, 0.08);
padding: 0.15em 0.4em;
color: var(--color-accent);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
/* ============================================================
HEADINGS (rules derived from inspecting brandpad.io/greenville-triumph)
------------------------------------------------------------
Brandpad publishes ONLY the family + role assignment:
H1 / H2 / H3 = Fabiola Capitals
H4 = Inter Black 900, 24px
Body = Inter (labeled "Regular" but renders weight 300)
Everything else below (font-weight 400 on Fabiola, the specific
line-heights, the tracking values) is OUR engineering choice,
measured from how Brandpad's typography page happens to render
at desktop sizes. Treat as a sensible default for Triumph
dashboards, not as brand law.
Fabiola Capitals is a single-weight display face. Forcing
font-weight 900 makes the browser SYNTHETICALLY bold the glyphs
(fattens strokes, crowds spacing) — which is why earlier
iterations of this page read as "smashed serif" instead of
clean Fabiola. The font is uppercase-only, so text-transform
stays off. Body font-synthesis: none (in the body rule above)
is the guardrail.
Our derived values:
H1 — clamp 3.2–8.7rem, weight 400, line-height 1.0, tracking normal
H2 — clamp 2.4–4.2rem, weight 400, line-height 1.1, tracking -0.018em
H3 — clamp 1.6–2.7rem, weight 400, line-height 1.25, tracking -0.007em
H4 — clamp 1.1–1.5rem, Inter 900, line-height 1.45, tracking -0.007em
H1 line-height is loosened from Brandpad's 0.8 to 1.0 so
multi-line hero headlines don't crash into each other.
============================================================ */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: var(--weight-regular);
color: var(--color-text);
text-transform: none;
}
h1 {
font-size: var(--text-display);
line-height: 1.0;
letter-spacing: normal;
}
h2 {
font-size: var(--text-3xl);
line-height: 1.1;
letter-spacing: -0.018em;
}
h3 {
font-size: var(--text-2xl);
line-height: 1.25;
letter-spacing: -0.007em;
}
h4 {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-black);
line-height: 1.45;
letter-spacing: -0.007em;
text-transform: none;
}
/* ============================================================
LAYOUT PRIMITIVES
------------------------------------------------------------
.container horizontal padding + max-width wrapper
section vertical rhythm; add .bg-surface to alternate bands
.table-scroll wrap any wide table to allow x-overflow
============================================================ */
.container {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
section {
padding: var(--section-pad) 0;
scroll-margin-top: 72px;
position: relative;
}
section.bg-surface { background: var(--color-surface); }
.table-scroll { overflow-x: auto; }