/* ==========================================================================
FITNESS SPOT — Design Tokens
Colors, type, spacing, motion. Pair with the brand-concept.md and README.md.
========================================================================== */
/* --- FONTS --- */
@font-face {
font-family: 'Ringstone';
src: url('fonts/Ringstone.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Headlines + body load from Google Fonts. Add to :
*/
:root {
/* ─── Color · Neutrals (the floor) ─────────────────── */
--fs-onyx: #0A0A0A; /* page bg, hero bg */
--fs-carbon: #131211; /* surface 1 */
--fs-steel: #1E1C1B; /* surface 2, cards */
--fs-iron: #2A2825; /* borders, dividers */
--fs-ash: #6E6A65; /* muted text */
--fs-bone: #F4F2EC; /* primary text on dark */
--fs-paper: #FFFFFF; /* peak contrast */
/* ─── Color · Signature (the strike) ───────────────── */
--fs-volt: #FDDB30; /* the brand accent */
--fs-volt-deep: #E5C220; /* hover/pressed */
--fs-volt-glow: #FFE85A; /* hover lift */
/* ─── Color · Semantic ─────────────────────────────── */
--fs-success: #4ADE80;
--fs-warn: #FBBF24;
--fs-error: #FF3B30;
/* ─── 70 / 25 / 5 mix ──────────────────────────────────
70% onyx/carbon/steel (black holds the floor)
25% bone (breathes)
5% volt (strikes — never decorative) */
/* ─── Type stack ──────────────────────────────────── */
--fs-display: 'Big Shoulders Display', 'Impact', 'Haettenschweiler', sans-serif;
--fs-body: 'Manrope', system-ui, -apple-system, sans-serif;
--fs-script: 'Ringstone', 'Brush Script MT', cursive;
--fs-mono: ui-monospace, 'SF Mono', Menlo, monospace;
/* ─── Type scale (clamp = fluid) ──────────────────── */
--fs-h1: clamp(64px, 9vw, 120px);
--fs-h2: clamp(40px, 6vw, 84px);
--fs-h3: clamp(22px, 2.4vw, 32px);
--fs-h4: clamp(18px, 1.6vw, 22px);
--fs-lead: 18px;
--fs-body-size: 16px;
--fs-small: 14px;
--fs-caption: 12px;
--fs-eyebrow: 11px;
/* ─── Spacing (4px base) ──────────────────────────── */
--fs-space-1: 4px;
--fs-space-2: 8px;
--fs-space-3: 12px;
--fs-space-4: 16px;
--fs-space-5: 24px;
--fs-space-6: 32px;
--fs-space-7: 48px;
--fs-space-8: 64px;
--fs-space-9: 96px;
--fs-space-10: 128px;
/* ─── Layout ──────────────────────────────────────── */
--fs-max: 1240px;
--fs-gutter: 32px;
--fs-gutter-sm: 16px;
/* ─── Borders & corners — sharp by default ────────── */
--fs-border: 1px solid var(--fs-iron);
--fs-radius: 0;
--fs-radius-sm: 2px; /* inputs/chips only */
/* ─── Motion ──────────────────────────────────────── */
--fs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--fs-quick: 150ms;
--fs-base: 250ms;
--fs-slow: 500ms;
/* ─── Z-index ─────────────────────────────────────── */
--fs-z-nav: 100;
--fs-z-modal: 1000;
}
/* ─── BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--fs-onyx);
color: var(--fs-bone);
font-family: var(--fs-body);
font-weight: 400;
font-size: var(--fs-body-size);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--fs-volt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
::selection { background: var(--fs-volt); color: var(--fs-onyx); }
/* ─── TYPOGRAPHY (semantic) ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--fs-display);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 0.4em;
color: var(--fs-bone);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0.02em; }
h4 { font-size: var(--fs-h4); letter-spacing: 0.04em; }
p { margin: 0 0 1em; max-width: 62ch; }
.fs-script {
font-family: var(--fs-script);
font-weight: 400;
text-transform: none;
letter-spacing: -0.005em;
line-height: 0.9;
color: var(--fs-volt);
}
.fs-eyebrow {
font-family: var(--fs-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--fs-volt);
}
.fs-eyebrow::before {
content:'';
display:inline-block;
width:36px; height:1px;
background: var(--fs-volt);
margin-right: 14px;
vertical-align: middle;
}
.fs-lead { font-size: var(--fs-lead); color: var(--fs-bone); }
.fs-muted { color: var(--fs-ash); }
/* ─── LAYOUT PRIMITIVES ───────────────────────────── */
.fs-wrap { max-width: var(--fs-max); margin: 0 auto; padding: 0 var(--fs-gutter); }
.fs-section { padding: var(--fs-space-10) 0; border-top: var(--fs-border); }
.fs-rule { height: 1px; background: var(--fs-iron); border: 0; margin: 0; }
/* ─── BUTTONS ─────────────────────────────────────── */
.fs-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--fs-display);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 22px;
border: 1px solid var(--fs-volt);
background: var(--fs-volt);
color: var(--fs-onyx);
cursor: pointer;
transition: all var(--fs-base) var(--fs-ease);
border-radius: var(--fs-radius);
text-decoration: none;
}
.fs-btn:hover { background: var(--fs-volt-glow); transform: translateY(-1px); text-decoration: none; }
.fs-btn:active { transform: translateY(0); background: var(--fs-volt-deep); }
.fs-btn::after { content: '→'; font-family: var(--fs-body); font-size: 18px; }
.fs-btn--ghost { background: transparent; color: var(--fs-volt); }
.fs-btn--ghost:hover { background: var(--fs-volt); color: var(--fs-onyx); }
.fs-btn--bone { background: var(--fs-bone); border-color: var(--fs-bone); color: var(--fs-onyx); }
.fs-btn--bone:hover { background: var(--fs-paper); }
.fs-btn--quiet { background: transparent; border-color: var(--fs-bone); color: var(--fs-bone); }
.fs-btn--quiet:hover { background: var(--fs-bone); color: var(--fs-onyx); }
/* ─── CHIPS ───────────────────────────────────────── */
.fs-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 6px 10px;
border: 1px solid var(--fs-iron);
background: var(--fs-carbon);
color: var(--fs-bone);
border-radius: var(--fs-radius-sm);
}
.fs-chip--volt { border-color: var(--fs-volt); color: var(--fs-volt); }
/* ─── CARDS ───────────────────────────────────────── */
.fs-card {
background: var(--fs-carbon);
border: var(--fs-border);
padding: var(--fs-space-6);
border-radius: var(--fs-radius);
}
/* ─── FORMS ───────────────────────────────────────── */
.fs-input, .fs-textarea, .fs-select {
width: 100%;
font-family: var(--fs-body);
font-size: 16px;
color: var(--fs-bone);
background: var(--fs-onyx);
border: 1px solid var(--fs-iron);
border-radius: var(--fs-radius-sm);
padding: 14px 16px;
transition: border-color var(--fs-base) var(--fs-ease);
}
.fs-input:focus, .fs-textarea:focus, .fs-select:focus {
outline: none; border-color: var(--fs-volt);
}
.fs-input::placeholder, .fs-textarea::placeholder { color: var(--fs-ash); }
.fs-label {
display: block;
font-size: 11px; font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--fs-ash);
margin-bottom: 8px;
}
/* ─── TICKER (yellow marquee under hero) ──────────── */
.fs-ticker {
background: var(--fs-volt);
color: var(--fs-onyx);
border-top: var(--fs-border);
border-bottom: var(--fs-border);
font-family: var(--fs-display);
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 14px;
padding: 14px 0;
white-space: nowrap;
overflow: hidden;
}
/* ─── UTILITIES ───────────────────────────────────── */
.fs-text-volt { color: var(--fs-volt); }
.fs-text-bone { color: var(--fs-bone); }
.fs-text-ash { color: var(--fs-ash); }
.fs-bg-onyx { background: var(--fs-onyx); }
.fs-bg-carbon { background: var(--fs-carbon); }
.fs-bg-volt { background: var(--fs-volt); color: var(--fs-onyx); }
.fs-bg-bone { background: var(--fs-bone); color: var(--fs-onyx); }
/* ─── RESPONSIVE / A11y ───────────────────────────── */
@media (max-width: 760px) {
:root { --fs-gutter: var(--fs-gutter-sm); }
.fs-section { padding: var(--fs-space-9) 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
:focus-visible { outline: 2px solid var(--fs-volt); outline-offset: 2px; }