/* ============================================================
BTC — BE THE CHANGE FITNESS · colours_and_type.css
Brand system v3.1 · @coachspiller (Julian Spiller)
The single source of truth for colour + type tokens.
Import the fonts once, then use the semantic vars.
------------------------------------------------------------
FONTS load from Google Fonts. Add to :
------------------------------------------------------------
The cardinal rule: if you're about to invent a font, colour,
spacing or layout value — STOP. The answer is here.
============================================================ */
:root {
/* ---- 1. CORE COLOUR TOKENS ----------------------------- */
--charcoal: #141414; /* primary canvas · >=70% of every frame. NEVER pure #000 */
--charcoal-raised: #1E1E1E; /* cards, raised surfaces */
--charcoal-line: #2A2A2A; /* hairlines, dividers, ruled-line devices */
--bone: #F2EEE3; /* primary text on dark. NEVER pure #FFF */
--bone-dim: rgba(242,238,227,.72); /* secondary text (60%) */
--bone-faint: rgba(242,238,227,.38); /* captions, metadata (38%) */
/* ---- 2. GOLD — the brand accent ------------------------ */
/* Metallic = LARGE HERO ONLY. Sharp 3-stop specular ramp. */
--metal: linear-gradient(135deg,#73591A 0%,#E5C158 45%,#FFF6D1 50%,#E5C158 55%,#73591A 100%);
--gold: #C9A84C; /* FLAT gold = everything small (<40px), hairlines, ticks */
--gold-bright: #EFD489; /* highlight only. Rare. */
--gold-deep: #8A6F2C; /* gold stripe shadow stop */
/* ---- 3. SIGNAL + EXTENSION PALETTE --------------------- */
--signal: #FF4B1F; /* urgency / CTA ONLY. Never decorative */
--petrol: #0E4D4A; /* Deep Petrol — the owned recurring cue of PERFORMANCE content */
--oxblood: #7A1F2B; /* Editorial kit accent */
--amber: #B5651D; /* Burnt Amber — warm campaign accent */
--forest: #1F3D2E; /* Deep Forest — earthy grounding (rare) */
/* ---- 4. ENERGY / FLUORO LAYER -------------------------- */
/* Discipline: ONE fluoro per asset · single element · never a fill behind copy · never body */
--volt: #CCFF00; /* hero energy accent (Performance kit) */
--tangerine: #FF5A1F; /* effort/urgency push of Signal */
--sport-red: #E0301E; /* Performance kit */
--electric-blue: #1E5BFF; /* gradient endpoint ONLY */
/* ---- 5. ATMOSPHERE ------------------------------------- */
/* #141414 is never flat — pair with at least one of these. One light direction, repeated. */
--glow-top: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201,168,76,.08) 0%, transparent 70%);
--paper: #EDE7D8; /* Editorial kit canvas (bone paper) */
/* ---- 6. TYPE FAMILIES ---------------------------------- */
--font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif; /* 900, all caps, <=4 words */
--font-body: "Sora", system-ui, sans-serif; /* 300/500/600/700 — NEVER 400 */
--font-accent: "Fraunces", Georgia, serif; /* italic only — rationed, emotional turns */
/* ---- 7. MODULAR TYPE SCALE (web · ratio 1.25) ---------- */
--fs-hero: clamp(72px, 16vw, 120px);
--fs-h1: clamp(48px, 9vw, 72px);
--fs-h2: clamp(32px, 5vw, 44px);
--fs-h3: clamp(24px, 3.5vw, 32px);
--fs-label: 17px;
--fs-body: 17px;
--fs-small: 14px;
--fs-caption: 12px;
--tracking-display: 0.01em; /* fixed 1-3px tracking on display caps — the lockup IS the identity */
--tracking-kicker: 0.25em; /* kickers / labels */
--tracking-cta: 0.2em;
/* ---- 8. SPACING — 8pt grid ----------------------------- */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 160px;
/* ---- 9. RADII + ELEVATION ------------------------------ */
--radius-cta: 4px; /* CTAs: tight 4px */
--radius-card: 8px; /* cards / raised surfaces */
--radius-pill: 100px;
--hairline: 1px solid var(--charcoal-line);
--shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 18px 48px -24px rgba(0,0,0,.7);
--shadow-cta: 0 10px 30px -10px rgba(201,168,76,.45); /* gold glow beneath CTA */
}
/* ============================================================
SEMANTIC ELEMENT STYLES
Opt-in helpers that bake the rules into real elements.
============================================================ */
.btc-canvas {
background: var(--glow-top), var(--charcoal);
color: var(--bone);
font-family: var(--font-body);
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
/* Film-grain atmosphere — texture != depth. 3-5% opacity, screen blend. */
.btc-grain::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
opacity: .035; mix-blend-mode: screen;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}
/* Display */
.btc-display, h1.btc {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: var(--tracking-display);
line-height: .9;
color: var(--bone);
}
.btc-h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); line-height: .95; }
.btc-h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h3); }
/* Kicker / eyebrow */
.btc-kicker {
font-family: var(--font-body); font-weight: 600;
font-size: var(--fs-caption); letter-spacing: var(--tracking-kicker);
text-transform: uppercase; color: var(--gold);
}
/* Body */
.btc-body { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body); line-height: 1.6; color: var(--bone-dim); }
.btc-caption { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-caption); color: var(--bone-faint); }
/* Accent — Fraunces italic. Emotional / editorial turns only. Never claims, prices, stats. */
.btc-accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; line-height: 1.15; color: var(--gold); }
/* Metallic gold text — hero only */
.btc-metal {
background: var(--metal); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* CTA — gold. charcoal text, never white. */
.btc-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
letter-spacing: var(--tracking-cta); font-size: var(--fs-small);
color: #0A0A0A; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
padding: 16px 24px; border-radius: var(--radius-cta); border: 0;
box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255,255,255,.4); cursor: pointer;
transition: filter .18s ease, transform .12s ease;
}
.btc-cta:hover { filter: brightness(1.06); }
.btc-cta:active { transform: translateY(1px); }
/* CTA — ghost / secondary */
.btc-cta-ghost {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
letter-spacing: var(--tracking-cta); font-size: var(--fs-small);
color: var(--gold); background: transparent; border: 1px solid var(--gold);
padding: 15px 23px; border-radius: var(--radius-cta); cursor: pointer;
transition: border-color .18s ease, color .18s ease;
}
.btc-cta-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
/* Gold stripe — the default top edge treatment */
.btc-stripe { height: 5px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep)); }
/* Card */
.btc-card {
background: var(--charcoal-raised); border: var(--hairline);
border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
/* Slide counter — bottom right, Sora 300 */
.btc-counter { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-caption); color: #888; letter-spacing: .12em; }