/* =========================================================================== FAID design tokens — change a brand decision ONCE, here. Copy this file per build; the PALETTE block is the config slot. Everything else (scale, spacing, motion) is the house system — leave it. =========================================================================== */ /* --- House font library (self-hosted OFL variable woff2) ------------------- Preload ONLY the above-the-fold faces in the HTML . Delete the @font-face rules for faces this build doesn't use so nothing extra loads. */ @font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/hanken-var.woff2') format('woff2'); } @font-face { font-family:'Hanken Grotesk'; font-style:italic; font-weight:300 800; font-display:swap; src:url('../fonts/hanken-italic.woff2') format('woff2'); } /* Display + script faces (Phase 2 defaults — the tuner previews the alternatives; only the winner ships) */ @font-face { font-family:'Archivo Expanded'; font-style:normal; font-weight:500 900; font-display:swap; src:url('../fonts/archivo-expanded-var.woff2') format('woff2'); } @font-face { font-family:'Kaushan Script'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/kaushan.woff2') format('woff2'); } :root { /* ===== PALETTE — Make A Break, sampled from Fin's logo file (the cyan roundel) ===== The page is dark throughout: bg = the roundel's navy; ink = its silver. Cyan is the ONE accent (signal, never a fill); gold is jewellery only (separators, script, keylines). */ --c-bg: #051C3A; /* navy — the logo's own ground */ --c-surface: #0E2A52; /* navy-2 — alt band / footer */ --c-ink: #ECEAE7; /* silver-white — body + display type */ --c-muted: #B4B6BA; /* secondary text */ --c-accent: #16CCEF; /* cyan-bright — THE accent */ --c-accent-2: #0A86BA; /* blue-mid — accent deep/hover */ --c-gold: #EFB735; /* gold-bright — jewellery */ --c-gold-deep:#B17D2C; /* gold-mid */ --c-on-dark: #ECEAE7; --c-line: rgba(236,234,231,.16); --c-line-dark: rgba(236,234,231,.16); --navy-rgb: 5 28 58; /* for alpha veils */ /* ===== Type families ===== */ --font-display: 'Archivo Expanded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Kaushan Script', 'Brush Script MT', cursive; /* ===== Fluid type scale (house system — leave as-is) ===== */ --fs-h1: clamp(2.5rem, 1.6rem + 4.6vw, 5rem); --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); --fs-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); --fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem); /* never < 16px on inputs (iOS no-zoom) */ --fs-small:.8125rem; --fs-kicker:.75rem; /* uppercase eyebrow */ /* ===== Spacing scale ===== */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --section-y: clamp(3rem, 6vw, 5.5rem); /* tight — dead space is the enemy */ --gutter: clamp(1.1rem, 4vw, 2.4rem); --maxw: 1200px; /* ===== Radii & shadows ===== */ --r-sm:6px; --r:12px; --r-pill:999px; --shadow: 0 8px 30px rgba(0,0,0,.12); --shadow-keyline:2px 3px 0 var(--c-ink); /* SW hard-shadow signature option */ /* ===== Motion ===== */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast:.18s; --dur:.32s; --dur-slow:.6s; /* ===== Chrome ===== */ --header-h:72px; --z-header:100; --z-overlay:200; } /* Belt-and-braces: kill all motion for reduced-motion users, on top of the per-component gates in base.css / core.js. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---- Palette A = the metallic badge (alternative, tuner only). Delete once locked. ---- */ :root[data-palette="A"] { --c-bg:#041127; --c-surface:#0B1D35; --c-ink:#E5E6E6; --c-on-dark:#E5E6E6; --c-accent:#1FA3E4; --c-accent-2:#096CAE; --c-gold:#DEB166; --c-gold-deep:#B18343; --navy-rgb: 4 17 39; }