/* =========================================================================
SPORTS PERFORMANCE CEO — BRAND TOKENS
Generated artifact. Source of truth is ./DESIGN.md — do not hand-edit.
Business coaching for sports performance gym owners: coach -> CEO across
Systems, Marketing, Retention, Profit.
ONE accent (#0094ff, sampled from the logo) on TWO equal canvases.
Light and dark are both first-class defaults, not a theme and its inverse.
USAGE
Default is light. For dark, set data-theme="dark" on or any
subtree, or let prefers-color-scheme decide (both are wired below).
FONTS
ALL FIVE FACES ARE LOCAL, in ./fonts/ beside this file. Nothing is
requested from Google.
---------------------------------------------------------------------------
THIS IS A DEPLOY COPY, not the kit. The source of truth is
brand-kits/sports-performance-ceo/tokens.css (itself generated from
DESIGN.md). It was copied here so this folder deploys standalone — Vercel
only ships this directory, so a reference climbing out to brand-kits/ would
arrive unstyled.
THREE deliberate differences from the kit copy, all listed so a future diff
does not read as drift:
1. The Google Fonts @import was REMOVED. It is not replaced by a
either — see 3.
2. The @font-face paths point at ./fonts/ (this folder), not the kit's
location.
3. Cormorant Garamond and JetBrains Mono are SELF-HOSTED as variable
woff2 at the bottom of the font block. They were the last two faces
still coming from Google, which meant every visit told Google about
it and cost two blocking round trips before any text could paint.
Both files were taken from the High-Profit Gym Model page, which did
this first. One variable file per family covers every weight the kit
asks for.
Re-sync by hand if the kit changes. Nothing automatic watches this.
========================================================================= */
/* Local faces, in ./fonts/ beside this stylesheet. url() resolves against the
stylesheet's own URL, so these stay correct wherever the page is served. */
@font-face {
font-family: 'Norwester';
src: url('./fonts/Norwester.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Intro Rust';
src: url('./fonts/IntroRust-Base.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('./fonts/Avenir-Regular.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
/* The two former Google faces, self-hosted. Both are variable, so ONE file
per family covers every weight. Latin subset only. */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('./fonts/CormorantGaramond-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('./fonts/JetBrainsMono-var.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Avenir';
src: url('./fonts/Avenir-Heavy.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
:root {
/* =========================
BRAND PRIMITIVES
Sampled from the logo files. #0094ff verified identical across the
hexagon, the lockup, and the cover asset.
========================= */
--spc-blue: #0094ff;
--spc-black: #000000;
--spc-white: #ffffff;
--spc-off-white: #f0f1f3;
/* =========================
AZURE RAMP. The one accent, in eleven steps.
========================= */
--blue-50: #e6f5ff;
--blue-100: #cceaff;
--blue-200: #99d5ff;
--blue-300: #66bfff;
--blue-400: #33aaff; /* accent on dark: one step up for contrast */
--blue-500: #0094ff; /* PRIMARY ACCENT */
--blue-600: #0077db; /* hover */
--blue-700: #005fb0; /* pressed */
--blue-800: #004788;
--blue-900: #00305c;
--blue-950: #001b33;
/* =========================
NEUTRAL RAMP. Cool grays, fourteen steps, serves both canvases.
========================= */
--n-0: #ffffff;
--n-50: #f7f8fa;
--n-100: #f0f1f3;
--n-150: #e7e9ec;
--n-200: #d8dbe0;
--n-300: #bcc0c8;
--n-400: #9094a0;
--n-500: #62656b;
--n-600: #474a50;
--n-700: #2d2f35;
--n-800: #1a1c20;
--n-850: #121316;
--n-900: #08090b;
--n-950: #000000;
/* =========================
SEMANTIC STATUS. Brand-neutral: status, not identity.
========================= */
--green-600: #0f8a5f; --green-500: #12a06e; --green-100: #d8f3e7;
--amber-600: #c47d10; --amber-500: #e8a12b; --amber-100: #fdefce;
--red-600: #cc2f37; --red-500: #e5484d; --red-100: #fbe0e1;
/* =========================
TYPE FAMILIES. Five faces, one per rank. Never collapse the stack.
========================= */
--font-title: 'Norwester', 'Oswald', sans-serif;
--font-heading: 'Intro Rust', 'Archivo', sans-serif;
--font-subtitle: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Avenir', 'Mulish', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* =========================
TYPE SCALE
========================= */
--fs-title: clamp(40px, 6vw, 76px);
--fs-heading: clamp(26px, 3.4vw, 40px);
--fs-subtitle: 22px;
--fs-body: 17px;
--fs-mono: 13px;
--lh-title: 1.02; --lh-heading: 1.15; --lh-subtitle: 1.35; --lh-body: 1.6;
--ls-title: 0.01em; --ls-mono: 0.04em;
/* =========================
SPACING + LAYOUT
========================= */
--gutter: clamp(1.25rem, 4vw, 4rem);
--section-y: clamp(4rem, 8vw, 8rem);
--container-max: 1240px;
--container-narrow: 760px; /* the reading column. Long-form brand. */
/* =========================
RADII. Rounded and approachable — deliberately NOT the squared-off
athletic look of the gyms this brand's customers run.
========================= */
--radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px;
--radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
--bw-base: 1.5px; --bw-strong: 2px;
/* =========================
ELEVATION. Blue-tinted, never neutral black.
========================= */
--shadow-sm: 0 1px 3px rgba(0,30,60,0.09), 0 1px 2px rgba(0,30,60,0.06);
--shadow-md: 0 6px 16px -4px rgba(0,30,60,0.14), 0 2px 6px -2px rgba(0,30,60,0.09);
--shadow-lg: 0 18px 40px -12px rgba(0,25,55,0.22), 0 6px 14px -8px rgba(0,25,55,0.14);
--shadow-xl: 0 32px 64px -16px rgba(0,15,35,0.36);
--shadow-focus: 0 0 0 3px rgba(0,148,255,0.35); /* identical both polarities */
/* =========================
MOTION
========================= */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}
/* =========================================================================
CANVAS: LIGHT (default)
========================================================================= */
:root,
[data-theme='light'] {
--bg-page: var(--n-0);
--bg-subtle: var(--n-50);
--surface-1: #ffffff;
--surface-2: var(--n-50);
--surface-3: var(--n-100);
--surface-inverse: var(--n-950);
--border: var(--n-200);
--border-strong: var(--n-300);
--text-strong: var(--n-900);
--text-body: var(--n-700);
--text-muted: var(--n-500);
--text-inverse:var(--n-0);
--text-on-accent: #ffffff;
--primary: var(--spc-black);
--primary-hover: var(--n-800);
--primary-press: var(--n-950);
--text-on-primary: var(--spc-white);
--accent: var(--blue-500);
--accent-hover:var(--blue-600);
--accent-press:var(--blue-700);
--accent-soft: var(--blue-50);
--link: var(--blue-600);
--focus-ring: var(--blue-500);
--success: var(--green-600); --success-soft: var(--green-100);
--warning: var(--amber-600); --warning-soft: var(--amber-100);
--danger: var(--red-600); --danger-soft: var(--red-100);
--elevation-card: var(--shadow-sm);
--elevation-card-hover: var(--shadow-md);
}
/* =========================================================================
CANVAS: DARK — a first-class default, not an inversion.
Matches the marketing treatment: pure black page, white display type,
azure accent. Depth comes from the neutral ramp, NOT bigger shadows.
========================================================================= */
[data-theme='dark'] {
--bg-page: var(--n-950); /* pure black, as on the cover */
--bg-subtle: var(--n-900);
--surface-1: var(--n-850);
--surface-2: var(--n-800);
--surface-3: var(--n-700);
--surface-inverse: var(--n-0);
--border: rgba(255,255,255,0.14);
--border-strong: rgba(255,255,255,0.24);
--text-strong: var(--spc-white);
--text-body: var(--spc-off-white);
--text-muted: var(--n-400);
--text-inverse:var(--n-950);
--text-on-accent: #ffffff;
/* Primary inverts: white fill, black text. */
--primary: var(--spc-white);
--primary-hover: var(--n-100);
--primary-press: var(--n-200);
--text-on-primary: var(--spc-black);
/* Accent steps one rung lighter so small text clears contrast on black. */
--accent: var(--blue-500);
--accent-hover:var(--blue-400);
--accent-press:var(--blue-600);
--accent-soft: var(--blue-950);
--link: var(--blue-400);
--focus-ring: var(--blue-500);
--success: var(--green-500); --success-soft: #0a2e21;
--warning: var(--amber-500); --warning-soft: #33260a;
--danger: var(--red-500); --danger-soft: #331315;
/* Shadows are near-invisible on black. Use tone instead. */
--elevation-card: none;
--elevation-card-hover: none;
}
/* Respect the OS preference unless an explicit data-theme overrides it. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg-page: var(--n-950); --bg-subtle: var(--n-900);
--surface-1: var(--n-850); --surface-2: var(--n-800);
--surface-3: var(--n-700); --surface-inverse: var(--n-0);
--border: rgba(255,255,255,0.14);
--border-strong: rgba(255,255,255,0.24);
--text-strong: var(--spc-white); --text-body: var(--spc-off-white);
--text-muted: var(--n-400); --text-inverse: var(--n-950);
--primary: var(--spc-white); --primary-hover: var(--n-100);
--primary-press: var(--n-200); --text-on-primary: var(--spc-black);
--accent-hover: var(--blue-400); --accent-soft: var(--blue-950);
--link: var(--blue-400);
--elevation-card: none; --elevation-card-hover: none;
}
}
/* =========================================================================
BASE
========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* =========================================================================
TYPE. Five faces, one per rank.
========================================================================= */
.spc-title {
font-family: var(--font-title);
font-size: var(--fs-title);
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
text-transform: uppercase;
color: var(--text-strong);
}
.spc-heading {
font-family: var(--font-heading);
font-size: var(--fs-heading);
line-height: var(--lh-heading);
color: var(--text-strong);
}
/* The one serif moment. At most once per screen. */
.spc-subtitle {
font-family: var(--font-subtitle);
font-size: var(--fs-subtitle);
line-height: var(--lh-subtitle);
color: var(--text-muted);
}
.spc-mono {
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--text-muted);
}
.spc-mono--accent { color: var(--accent); }
/* The emphasis word inside a title, as in "FROM COACH TO ". */
.spc-title em,
.spc-heading em { color: var(--accent); font-style: normal; }
p { max-width: var(--container-narrow); }
/* The four pillars: Systems · Marketing · Retention · Profit */
.spc-pillars {
font-family: var(--font-title);
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.spc-pillars > * + *::before { content: " · "; opacity: 0.6; }
/* =========================================================================
COMPONENTS
========================================================================= */
.spc-btn-primary {
background: var(--primary);
color: var(--text-on-primary);
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out);
}
.spc-btn-primary:hover { background: var(--primary-hover); }
/* Reserved for the single most important action on a screen. */
.spc-btn-accent {
background: var(--accent);
color: var(--text-on-accent);
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out);
}
.spc-btn-accent:hover { background: var(--accent-hover); }
.spc-btn-accent:active { background: var(--accent-press); }
.spc-card {
background: var(--surface-1);
color: var(--text-body);
border: var(--bw-base) solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--elevation-card);
transition: box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.spc-card:hover {
box-shadow: var(--elevation-card-hover);
border-color: var(--border-strong);
}
.spc-input {
background: var(--surface-1);
color: var(--text-strong);
border: var(--bw-base) solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-family: var(--font-body);
font-size: var(--fs-body);
width: 100%;
}
.spc-input:focus-visible { border-color: var(--accent); }
/* LOGO ON DARK.
The logo always keeps its white background — a deliberate brand decision
(a vector/reversed version broke the mark, so it was rejected).
PREFERRED: use assets/logo/spc-hexagon-plate.png directly. Its white field
is already trimmed to a hexagon with transparent corners, so it needs no
wrapper and reads as intentional on black. */
.spc-logo-hex { display: inline-block; }
.spc-logo-hex img { display: block; height: auto; }
/* FALLBACK: for the square-background assets (the lockup), wrap in a plate. */
.spc-logo-plate {
background: var(--spc-white);
border-radius: var(--radius-lg);
padding: 12px;
display: inline-flex;
}
/* =========================================================================
LAYOUT
========================================================================= */
.spc-wrap {
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--gutter);
}
.spc-wrap--narrow { max-width: var(--container-narrow); }
.spc-section { padding-block: var(--section-y); }
/* =========================================================================
ACCESSIBILITY
========================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.spc-btn-primary, .spc-btn-accent, .spc-card { transition: none; }
}