/* ============================================================
CORE SURF ACADEMY — DESIGN TOKENS
Drop this file into the project and import it globally.
Google Fonts import must be added to (see below).
============================================================ */
/*
*/
:root{
/* ---- Color: Black / White / Red / Yellow only. No blue, anywhere. ---- */
--ink: #0A0A0A; /* primary site background, everywhere */
--surface: #161616; /* cards, panels, nav */
--surface-2: #1F1F1F; /* nested/secondary panels */
--white: #F5F3EC; /* body text, logo fill, light surfaces */
--white-dim: #A6A199; /* secondary/muted text on dark */
--red: #E2231A; /* primary hot accent: CTAs, prices, "Core" script */
--red-dim: #8A150F; /* red hover/pressed state */
--yellow: #F6C500; /* secondary accent: tags, tier badges */
--line: rgba(245,243,236,0.12); /* hairline borders on dark */
/* ---- Type roles ---- */
--font-logo-accent: 'UnifrakturCook', cursive; /* "Core" ONLY — never the rest of the name */
--font-logo-main: 'Big Shoulders Display', sans-serif; /* "Surf Academy" — condensed industrial, weight 900 */
--font-headline: 'Bebas Neue', sans-serif; /* all site headings, nav, buttons — NOT Anton */
--font-stamp: 'Archivo Black', sans-serif; /* badges, price tags, category stamps */
--font-body: 'Work Sans', sans-serif; /* body copy, forms, longform */
--font-mono: 'JetBrains Mono', monospace; /* specs, timestamps, eyebrows, prices */
/* ---- Spacing scale (8px base) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
/* ---- Radius: this brand uses hard/square edges. Keep radius at 0 unless a component explicitly needs it. ---- */
--radius-none: 0px;
}
/* ============================================================
LOGO LOCKUP — canonical markup + rule
"Core" is ALWAYS UnifrakturCook + red.
The rest of the name is ALWAYS Big Shoulders Display (900) + white.
Never mix these two fonts within a single word.
Never apply drop-shadows / text-stroke stacking to the logo — flat color only.
============================================================ */
.logo-core{
font-family: var(--font-logo-accent);
font-weight: 700;
color: var(--red);
font-size: 1.15em; /* scale relative to sibling text for visual balance */
}
.logo-rest{
font-family: var(--font-logo-main);
font-weight: 900;
text-transform: uppercase;
color: var(--white);
letter-spacing: 0.005em;
}
/*
Example usage:
Core Surf Academy
*/
/* ============================================================
BASE ELEMENT DEFAULTS
============================================================ */
body{
background: var(--ink);
color: var(--white);
font-family: var(--font-body);
margin: 0;
}
h1, h2, h3, h4{
font-family: var(--font-headline);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--white);
margin: 0;
}
a{
color: var(--white);
text-decoration: none;
}
a:hover{
color: var(--red);
}
.btn-primary{
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--red);
color: var(--ink);
border: none;
padding: 14px 24px;
font-weight: 700;
cursor: pointer;
}
.btn-primary:hover{
background: var(--red-dim);
}
.tag, .badge{
font-family: var(--font-stamp);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--yellow);
}
.pill-core-tier{
background: var(--yellow);
color: var(--ink);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 5px 10px;
font-weight: 700;
}