/* ================================================================
REVVY — Design System
Based on V5 Motorsport Editorial aesthetic
================================================================
HOW TO USE
──────────
1. Import this file first in every page's stylesheet:
@import url('../design-system.css');
or link it before the page stylesheet in .
2. Use CSS custom properties (var(--token)) everywhere.
Never hardcode a color, font, or spacing value directly.
3. Dark surfaces (search docks, panels, footers) use the
--dark-* prefix token family.
4. Typography roles:
--f-display → hero headings, section numbers, brand mark
--f-serif → editorial section titles (h2), feature names
--f-mono → labels, data values, prices, eyebrows, tags
--f-body → all paragraph text, UI copy, descriptions
================================================================ */
/* ────────────────────────────────────────────────────────────────
GOOGLE FONTS IMPORT
Copy this block into every page before your CSS.
──────────────────────────────────────────────────────────────── */
:root {
/* ──────────────────────────────────────────────────────────
COLOR — LIGHT SURFACE (default)
The warm-paper base used for all public-facing pages.
────────────────────────────────────────────────────────── */
/* Backgrounds */
--color-bg: #F8F5F0; /* page background — warm paper */
--color-surface: #EDEAE4; /* cards, stat boxes, inset sections */
--color-surface-raised:#F3F0EA; /* slightly lighter card variant */
/* Ink (text) */
--color-ink: #0E0C0A; /* primary text — near-black */
--color-ink-mid: #5C5851; /* secondary text — mid gray */
--color-ink-dim: #9A9590; /* tertiary / placeholder text */
--color-ink-xdim: #C4C0BA; /* disabled / very subtle text */
/* Borders & Rules */
--color-rule: #D8D4CC; /* dividing lines, card borders */
--color-rule-strong: #B8B4AC; /* stronger separators */
--color-rule-ink: #0E0C0A; /* ink-weight border (feat grid top) */
/* Accent — Racing Red */
--color-red: #C61A14; /* primary brand accent */
--color-red-hover: #A81410; /* red on hover */
--color-red-muted: rgba(198, 26, 20, 0.10); /* red tint backgrounds */
/* ──────────────────────────────────────────────────────────
COLOR — DARK SURFACE
Used for search docks, dark panels, footer, any inverted block.
────────────────────────────────────────────────────────── */
--dark-bg: #1C1A18; /* dark panel / dock — warm dark gray (not harsh black) */
--dark-bg-raised: #242220; /* slightly elevated surfaces on dark */
--dark-bg-deep: #141210; /* deepest recessed areas */
--dark-border: rgba(255,255,255,0.08); /* borders on dark surfaces */
--dark-rule: rgba(255,255,255,0.05); /* subtle dividers on dark */
/* Dark text */
--dark-text: #EAE6DE; /* primary text on dark */
--dark-text-mid: #A09890; /* secondary text on dark */
--dark-text-dim: #807970; /* labels, dim text on dark */
/* Amber — data accent on dark surfaces */
--dark-amber: #D4A82A; /* price values, active states, CTA bg */
--dark-amber-hover: #E0B82C; /* amber on hover */
/* ──────────────────────────────────────────────────────────
TYPOGRAPHY — FAMILIES
────────────────────────────────────────────────────────── */
--f-display: 'Oswald', sans-serif;
/* → Hero headings (clamp-sized), REVVY brand mark,
section numbers (01/02…), nav CTA labels.
Bold/condensed. Use weight 600–700 for impact. */
--f-serif: 'Playfair Display', serif;
/* → Editorial section titles (h2), feature card titles,
pull-quotes, any copy requiring elegance.
Use italic variant for emphasis. */
--f-mono: 'JetBrains Mono', monospace;
/* → Form labels, data values, prices, eyebrow/kicker text,
stats labels, tag chips, metadata rows.
Communicates precision and technical authority. */
--f-body: 'Nunito Sans', sans-serif;
/* → All paragraph / description text, nav links,
button copy, dropdown options, footer copy. */
/* ──────────────────────────────────────────────────────────
TYPOGRAPHY — SCALE
Uses clamp() for fluid sizing: clamp(min, fluid, max).
fluid = vw-based middle value.
────────────────────────────────────────────────────────── */
/* Display (Oswald) */
--text-hero: clamp(4rem, 10.5vw, 10.5rem); /* hero h1 — giant */
--text-display-lg:clamp(2.4rem, 4.5vw, 4.5rem); /* section h2 — Playfair */
--text-display-md:clamp(1.8rem, 3vw, 3rem); /* sub-section heading */
--text-display-sm:clamp(1.2rem, 2vw, 1.8rem); /* card heading */
--text-num-xl: 3.8rem; /* feat number 01/02 */
--text-num-lg: 2.2rem; /* stats panel number */
/* Body (Nunito Sans) */
--text-body-lg: 1.1rem; /* lead paragraph */
--text-body: 0.9375rem; /* default body = 15px */
--text-body-sm: 0.875rem; /* secondary descriptions = 14px */
--text-body-xs: 0.8125rem; /* small captions = 13px */
/* Mono labels (JetBrains Mono) */
--text-label-lg: 0.875rem; /* 14px — eyebrow, kicker text */
--text-label: 0.75rem; /* 12px — form labels, dock labels */
--text-label-sm: 0.6875rem; /* 11px — very small metadata */
/* Letter spacing */
--ls-tight: -0.025em; /* display headings */
--ls-normal: 0em;
--ls-wide: 0.08em; /* brand wordmark */
--ls-wider: 0.14em; /* ticker brands */
--ls-widest: 0.22em; /* form labels, kicker text */
--ls-extreme: 0.28em; /* logo sub-label */
/* Line heights */
--lh-hero: 0.92; /* hero heading — very tight */
--lh-display: 1.1; /* section headings */
--lh-heading: 1.25; /* card titles */
--lh-body: 1.65; /* body text */
--lh-loose: 1.75; /* long descriptions */
/* Font weights used */
--fw-light: 300;
--fw-regular: 400;
--fw-semi: 600;
--fw-bold: 700;
--fw-black: 900;
/* ──────────────────────────────────────────────────────────
SPACING SCALE
Follows a 4px base grid.
────────────────────────────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ──────────────────────────────────────────────────────────
LAYOUT
────────────────────────────────────────────────────────── */
/* Horizontal page padding — fluid, shrinks on mobile */
--gutter: clamp(1.5rem, 5vw, 5rem);
/* Max content width */
--max-width: 1440px;
/* Vertical section rhythm */
--section-v: clamp(5rem, 9vw, 9rem);
--section-v-sm: clamp(3rem, 5vw, 5rem);
/* Nav height (used for margin-top on first section) */
--nav-h: 66px;
/* ──────────────────────────────────────────────────────────
BORDERS & RADIUS
Apple-inspired: generous rounding, nothing harsh.
16px for large surfaces, 8px for small elements.
────────────────────────────────────────────────────────── */
--radius-none: 0;
--radius-xs: 4px; /* tiny badges, inline tags */
--radius-sm: 8px; /* small elements: buttons, chips, inputs, thumbs */
--radius-md: 12px; /* medium cards, form panels */
--radius-lg: 16px; /* large cards, image containers, main panels */
--radius-xl: 20px; /* hero panels, stage glass cards */
--radius-pill: 999px; /* pills / badge chips */
/* ──────────────────────────────────────────────────────────
SHADOWS
Layered, soft — Apple-style elevation system.
────────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 3px rgba(14,12,10,0.07);
--shadow-sm: 0 2px 8px rgba(14,12,10,0.08), 0 1px 2px rgba(14,12,10,0.04);
--shadow-md: 0 4px 16px rgba(14,12,10,0.10), 0 2px 6px rgba(14,12,10,0.06);
--shadow-lg: 0 8px 32px rgba(14,12,10,0.12), 0 4px 12px rgba(14,12,10,0.07);
--shadow-xl: 0 16px 56px rgba(14,12,10,0.16), 0 6px 20px rgba(14,12,10,0.08);
/* Shadow for floating panels on dark backgrounds */
--shadow-dark-lg: 0 24px 64px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
--shadow-dark-xl: 0 32px 80px rgba(0,0,0,0.6), 0 12px 32px rgba(0,0,0,0.4);
/* ──────────────────────────────────────────────────────────
TRANSITIONS & ANIMATION
────────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* snappy deceleration */
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* balanced */
--duration-fast: 150ms;
--duration-base: 220ms;
--duration-slow: 400ms;
--duration-enter: 600ms; /* page-load element reveals */
/* Standard transition shorthand */
--transition: var(--duration-base) var(--ease-out);
/* ──────────────────────────────────────────────────────────
Z-INDEX STACK
────────────────────────────────────────────────────────── */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-overlay: 50;
--z-nav: 200;
--z-modal: 500;
}
/* ================================================================
BASE RESET & GLOBALS
Include once per page. Pair with the Google Fonts @import above.
================================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: var(--f-body);
font-size: var(--text-body);
line-height: var(--lh-body);
background: var(--color-bg);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
select { cursor: pointer; font-family: inherit; }
img, svg { display: block; max-width: 100%; }
/* Sticky-footer content wrapper — grows to fill remaining body height,
pushing the footer to the viewport bottom on short pages. */
.page-content { flex: 1 0 auto; }
/* ================================================================
UTILITY CLASSES
Prefixed rv- (revvy) to avoid collisions with Bootstrap etc.
================================================================ */
/* Layout containers */
.rv-container {
width: 100%;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.rv-section {
padding-top: var(--section-v);
padding-bottom: var(--section-v);
}
.rv-section--sm {
padding-top: var(--section-v-sm);
padding-bottom: var(--section-v-sm);
}
/* ── Eyebrow / kicker labels ── */
.rv-kicker {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.rv-kicker-rule {
display: block;
width: 36px;
height: 2px;
background: var(--color-red);
flex-shrink: 0;
}
.rv-kicker-text {
font-family: var(--f-mono);
font-size: var(--text-label-lg);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-ink-dim);
}
/* ── Display headings ── */
.rv-heading-hero {
font-family: var(--f-display);
font-size: var(--text-hero);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
line-height: var(--lh-hero);
color: var(--color-ink);
}
.rv-heading-section {
font-family: var(--f-serif);
font-size: var(--text-display-lg);
font-weight: var(--fw-bold);
line-height: var(--lh-display);
color: var(--color-ink);
}
.rv-heading-section em {
font-style: italic;
color: var(--color-red);
}
.rv-heading-card {
font-family: var(--f-serif);
font-size: var(--text-display-sm);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
color: var(--color-ink);
}
/* Outline-only heading variant (used on hero last line) */
.rv-heading-outline {
-webkit-text-stroke: 2px var(--color-ink);
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ── Text styles ── */
.rv-text-lead {
font-family: var(--f-body);
font-size: var(--text-body-lg);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--color-ink-mid);
}
.rv-text-body {
font-family: var(--f-body);
font-size: var(--text-body);
line-height: var(--lh-body);
color: var(--color-ink-mid);
}
.rv-text-sm {
font-family: var(--f-body);
font-size: var(--text-body-xs);
line-height: var(--lh-body);
color: var(--color-ink-dim);
}
.rv-label {
font-family: var(--f-mono);
font-size: var(--text-label);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-ink-dim);
}
.rv-data {
font-family: var(--f-mono);
font-size: var(--text-body-sm);
font-weight: 500;
color: var(--color-ink);
}
/* ── Red accent text ── */
.rv-red { color: var(--color-red); }
.rv-amber { color: var(--dark-amber); }
.rv-dim { color: var(--color-ink-dim); }
/* ── Horizontal rule ── */
.rv-rule {
border: none;
border-top: 1px solid var(--color-rule);
margin: 0;
}
.rv-rule--strong {
border-top-width: 2px;
border-color: var(--color-ink);
}
.rv-rule--red {
border-top-width: 2.5px;
border-color: var(--color-red);
}
/* ── Buttons ── */
.rv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--f-display);
font-size: 13.5px;
font-weight: var(--fw-semi);
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
}
.rv-btn--primary {
background: var(--color-ink);
color: var(--color-bg);
}
.rv-btn--primary:hover {
background: var(--color-red);
color: #fff;
}
.rv-btn--red {
background: var(--color-red);
color: #fff;
}
.rv-btn--red:hover { background: var(--color-red-hover); }
.rv-btn--outline {
background: transparent;
color: var(--color-ink);
box-shadow: inset 0 0 0 1.5px var(--color-ink);
}
.rv-btn--outline:hover {
background: var(--color-ink);
color: var(--color-bg);
}
/* Amber variant for dark surfaces */
.rv-btn--amber {
background: var(--dark-amber);
color: var(--dark-bg);
}
.rv-btn--amber:hover { background: var(--dark-amber-hover); }
/* ── Surface cards ── */
.rv-card {
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radius-sm);
padding: var(--space-8);
}
/* Dark surface panel */
.rv-panel-dark {
background: var(--dark-bg);
border: 1px solid var(--dark-border);
border-radius: var(--radius-sm);
}
/* ── Form elements ── */
.rv-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Label above a field — always mono, uppercase */
.rv-field-label {
font-family: var(--f-mono);
font-size: var(--text-label);
font-weight: 500;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
/* Light surface label */
.rv-field-label--light {
color: var(--color-ink-dim);
}
/* Dark surface label */
.rv-field-label--dark {
color: var(--dark-text-dim);
}
/* Select wrapper */
.rv-select-wrap {
position: relative;
}
.rv-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: none;
outline: none;
background: transparent;
padding-right: 22px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--transition);
}
/* Light surface select */
.rv-select--light {
font-family: var(--f-body);
font-size: var(--text-body-sm);
font-weight: var(--fw-semi);
color: var(--color-ink);
border-bottom: 1.5px solid var(--color-rule);
padding-bottom: var(--space-2);
}
.rv-select--light:focus {
border-color: var(--color-red);
}
/* Dark surface select */
.rv-select--dark {
font-family: var(--f-body);
font-size: var(--text-body-sm);
font-weight: var(--fw-semi);
color: var(--dark-text);
}
.rv-select--dark option {
background: var(--dark-bg-raised);
color: var(--dark-text);
}
/* Chevron arrow for selects */
.rv-select-arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
width: 10px;
height: 10px;
}
/* ── Pill / badge ── */
.rv-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-family: var(--f-mono);
font-size: var(--text-label-lg);
font-weight: var(--fw-regular);
letter-spacing: 0.1em;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.rv-pill--light {
background: var(--color-surface);
color: var(--color-ink-mid);
border: 1px solid var(--color-rule);
}
.rv-pill--red {
background: var(--color-red-muted);
color: var(--color-red);
border: 1px solid rgba(198,26,20,0.18);
}
/* ── Stats block ── */
.rv-stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.rv-stat-num {
font-family: var(--f-display);
font-size: var(--text-num-lg);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
color: var(--color-ink);
line-height: 1;
}
.rv-stat-label {
font-family: var(--f-mono);
font-size: var(--text-label-lg);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-ink-dim);
}
/* ── Ticker strip ── */
.rv-ticker {
background: var(--color-ink);
border-top: 2.5px solid var(--color-red);
overflow: hidden;
white-space: nowrap;
padding: 9px 0;
user-select: none;
}
.rv-ticker-track {
display: inline-flex;
align-items: center;
animation: rv-ticker-scroll 30s linear infinite;
}
.rv-ticker-brand {
font-family: var(--f-display);
font-size: 11px;
font-weight: var(--fw-regular);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: rgba(255,255,255,0.45);
padding: 0 0.6rem;
}
.rv-ticker-dot {
font-size: 14px;
color: rgba(255,255,255,0.18);
padding: 0 0.1rem;
}
@keyframes rv-ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Scroll reveal animation ── */
/*
Usage:
JS: add .rv-reveal--visible via IntersectionObserver
*/
.rv-reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity var(--duration-enter) var(--ease-out),
transform var(--duration-enter) var(--ease-out);
transition-delay: var(--rv-delay, 0ms);
}
.rv-reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* Page-load entrance (no scroll trigger needed) */
.rv-enter {
opacity: 0;
transform: translateY(18px);
animation: rv-enter var(--duration-enter) var(--ease-out) forwards;
animation-delay: var(--rv-delay, 0ms);
}
@keyframes rv-enter {
to { opacity: 1; transform: translateY(0); }
}
/* ── Dot-grid background texture ── */
.rv-dot-grid {
background-image: radial-gradient(
circle, rgba(14,12,10,0.07) 1px, transparent 1px
);
background-size: 30px 30px;
}
/* ── Dark surface text helpers ── */
.rv-on-dark { color: var(--dark-text); }
.rv-on-dark-mid { color: var(--dark-text-mid); }
.rv-on-dark-dim { color: var(--dark-text-dim); }
.rv-on-dark-amber { color: var(--dark-amber); }
/* ================================================================
RESPONSIVE BREAKPOINTS
Reference these values when writing page-specific media queries.
--bp-sm: 480px (large phone)
--bp-md: 768px (tablet portrait)
--bp-lg: 1024px (tablet landscape / small laptop)
--bp-xl: 1280px (desktop)
--bp-2xl: 1440px (wide desktop = --max-width)
Prefer mobile-first: write base styles for small screens,
then add complexity with min-width breakpoints.
================================================================ */