/* ============================================================================ GARAGE GALS . DESIGN TOKENS ---------------------------------------------------------------------------- The single source of truth for the visual language. Every color, type ramp, space step, radius, shadow, easing, and timing the site uses lives here as a custom property. Nothing downstream hardcodes a value. Swap a token, reskin the whole site. Concept: "The Art of the Reveal." Cinematic garage editorial. Deep ink, signature GG red, warm cream, brushed steel. Built for motion. ============================================================================ */ :root { /* ------------------------------------------------------------------------ 1. COLOR PRIMITIVES Raw, unsemantic swatches. Reference these only to build semantic tokens. ------------------------------------------------------------------------ */ /* Ink . near-blacks and charcoals (garage floor, night, depth) */ --ink-1000: #000000; --ink-950: #050505; --ink-900: #0a0a0b; --ink-850: #0d0d0f; --ink-800: #121214; --ink-700: #18181b; --ink-600: #1f1f23; --ink-500: #27272c; --ink-400: #34343b; --ink-300: #44444d; --ink-200: #5b5b66; --ink-100: #767682; /* Red . the GG signature, from oxblood to flare */ --red-900: #5e0a04; --red-800: #7e1109; --red-700: #8b0000; /* deep . letterhead, formal headers */ --red-600: #b81e12; --red-550: #d12a1c; --red-500: #e63a2d; /* PRIMARY brand accent */ --red-400: #ff4b3a; /* bright . hover, glow */ --red-350: #ff6354; --red-300: #ff8173; --red-200: #ffa99e; --red-100: #ffd2cb; --red-050: #fff0ed; /* Cream . warm paper, the calm "after" */ --cream-50: #fdfbf6; --cream-100: #f8f3ea; --cream-150: #f5efe4; /* paper . light bg */ --cream-200: #eae2d1; /* sub-strip, accent bg */ --cream-300: #ded3bd; --cream-400: #cdbfa3; --cream-500: #b6a487; /* Steel . brushed metal, chrome, the luxe toolbox accent */ --steel-50: #f4f5f7; --steel-100: #e6e8ec; --steel-200: #cfd3da; --steel-300: #aab1bd; --steel-400: #828b9a; --steel-500: #5f6775; --steel-600: #474d58; --steel-700: #343943; /* Warm metals . brass / amber spark for small highlights (used sparingly) */ --ember-400: #ffb155; --ember-300: #ffc878; /* Pure utility */ --white: #ffffff; --black: #000000; /* ------------------------------------------------------------------------ 2. SEMANTIC COLOR (default = light/cream canvas) Components reference THESE. The dark theme block overrides them. ------------------------------------------------------------------------ */ --bg: var(--cream-150); --bg-sunk: var(--cream-200); --bg-raised: var(--cream-50); --surface: var(--cream-50); --surface-2: var(--cream-100); --fg: var(--ink-600); --fg-strong: var(--ink-850); --fg-soft: var(--ink-300); --fg-faint: var(--ink-200); --fg-onaccent: var(--cream-50); --accent: var(--red-500); --accent-bright: var(--red-400); --accent-deep: var(--red-700); --accent-ink: var(--red-900); --rule: rgba(26, 26, 26, 0.12); /* form lines, dividers */ --rule-strong: rgba(26, 26, 26, 0.22); --rule-faint: rgba(26, 26, 26, 0.06); --metal: var(--steel-300); --metal-edge: var(--steel-200); --selection-bg: var(--red-500); --selection-fg: var(--cream-50); /* ------------------------------------------------------------------------ 3. GRADIENTS . the cinematic surfaces ------------------------------------------------------------------------ */ --grad-red-flare: linear-gradient(135deg, var(--red-400) 0%, var(--red-500) 42%, var(--red-700) 100%); --grad-ember: linear-gradient(135deg, var(--ember-300) 0%, var(--red-400) 55%, var(--red-600) 100%); --grad-ink-depth: radial-gradient(120% 120% at 50% 0%, var(--ink-700) 0%, var(--ink-900) 55%, var(--ink-1000) 100%); --grad-paper: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-150) 100%); --grad-chrome: linear-gradient(180deg, #fbfcfd 0%, var(--steel-100) 18%, var(--steel-300) 50%, var(--steel-200) 70%, #ffffff 86%, var(--steel-300) 100%); --grad-chrome-text: linear-gradient(180deg, #ffffff 0%, var(--steel-200) 40%, var(--steel-400) 60%, #ffffff 100%); --grad-safety: repeating-linear-gradient(135deg, var(--red-500) 0 18px, var(--cream-150) 18px 36px); --grad-pegboard: radial-gradient(circle at center, rgba(26,26,26,0.10) 1.4px, transparent 1.6px); /* Glow auras for the red CTAs and headline flares */ --glow-red-sm: 0 0 0.6rem rgba(230, 58, 45, 0.45); --glow-red-md: 0 0 1.4rem rgba(230, 58, 45, 0.42), 0 0 3rem rgba(230, 58, 45, 0.22); --glow-red-lg: 0 0 2rem rgba(255, 75, 58, 0.55), 0 0 5rem rgba(230, 58, 45, 0.3); /* ------------------------------------------------------------------------ 4. TYPOGRAPHY Fraunces (display, optical + soft axes for the expensive editorial feel), Inter (body), a mono for spec-sheet eyebrows and metadata. ------------------------------------------------------------------------ */ --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Space Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fraunces variable axes (used via font-variation-settings) */ --fr-soft: 40; /* SOFT axis . roundness of terminals */ --fr-wonk: 0; /* WONK axis . off we keep it classy by default */ /* Fluid type scale . clamp(min, fluid, max). Mobile-first, scales to desktop. Ramp is roughly a major-third blend tuned for big editorial headlines. */ --fs-display-2xl: clamp(3.25rem, 1.6rem + 8.2vw, 9.5rem); --fs-display-xl: clamp(2.75rem, 1.6rem + 5.8vw, 7rem); --fs-display-lg: clamp(2.3rem, 1.5rem + 4.0vw, 5rem); --fs-h1: clamp(2.1rem, 1.45rem + 3.2vw, 4rem); --fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); --fs-h3: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); --fs-h4: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); --fs-lead: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem); --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem); --fs-caption: clamp(0.75rem, 0.73rem + 0.1vw, 0.82rem); --fs-eyebrow: clamp(0.7rem, 0.68rem + 0.08vw, 0.8rem); --lh-tight: 0.98; --lh-snug: 1.08; --lh-head: 1.14; --lh-body: 1.62; --lh-relax: 1.78; --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.12em; --tracking-widest: 0.26em; /* mono eyebrows */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 900; /* ------------------------------------------------------------------------ 5. SPACE . an 8px-rooted rhythm with a few half steps ------------------------------------------------------------------------ */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ --space-5xl: 11rem; /* 176 */ /* Section vertical rhythm . ALWAYS symmetric top and bottom (brand rule). Use --section-pad on every band. */ --section-pad: clamp(4rem, 2.5rem + 7vw, 9rem); --section-pad-sm: clamp(2.75rem, 2rem + 4vw, 5.5rem); --section-pad-lg: clamp(5rem, 3rem + 9vw, 12rem); /* ------------------------------------------------------------------------ 6. LAYOUT . containers and gutters ------------------------------------------------------------------------ */ --container: 75rem; /* 1200px standard reading width */ --container-wide: 86rem; /* 1376px feature width */ --container-narrow: 48rem; /* 768px prose */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* ------------------------------------------------------------------------ 7. RADII ------------------------------------------------------------------------ */ --r-xs: 0.375rem; --r-sm: 0.625rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2rem; --r-2xl: 2.75rem; --r-pill: 999px; --r-circle: 50%; /* ------------------------------------------------------------------------ 8. SHADOWS . elevation, plus brand glow and inset sheen ------------------------------------------------------------------------ */ --shadow-1: 0 1px 2px rgba(10,10,11,0.06), 0 1px 1px rgba(10,10,11,0.04); --shadow-2: 0 4px 10px -4px rgba(10,10,11,0.16), 0 2px 5px -3px rgba(10,10,11,0.10); --shadow-3: 0 12px 28px -12px rgba(10,10,11,0.28), 0 6px 12px -8px rgba(10,10,11,0.14); --shadow-4: 0 24px 50px -18px rgba(10,10,11,0.36), 0 10px 22px -14px rgba(10,10,11,0.20); --shadow-5: 0 40px 90px -28px rgba(10,10,11,0.48), 0 18px 40px -24px rgba(10,10,11,0.28); --shadow-card: 0 18px 44px -22px rgba(10,10,11,0.34); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(10,10,11,0.06); --shadow-ring: 0 0 0 1px var(--rule); /* ------------------------------------------------------------------------ 9. MOTION . durations and easings The whole site leans on these. The "garage door" ease has a mechanical settle to it. Expo and spring give the expensive, weighty feel. ------------------------------------------------------------------------ */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 760ms; --dur-6: 1100ms; --dur-7: 1600ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --ease-garage-door: cubic-bezier(0.22, 0.61, 0.18, 1); /* roll up and settle */ --ease-spring: linear( 0, 0.006, 0.025, 0.101, 0.539, 0.721, 0.849, 0.937, 0.991, 1.006, 1.013, 1.011, 1.006, 1.002, 0.999, 1); /* ------------------------------------------------------------------------ 10. Z-INDEX LAYERS . named so stacking never becomes guesswork ------------------------------------------------------------------------ */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-dropdown: 700; --z-overlay: 800; --z-modal: 900; --z-cursor: 1000; --z-toast: 1100; --z-preloader: 2000; /* ------------------------------------------------------------------------ 11. MISC . focus ring, backdrop, blur ------------------------------------------------------------------------ */ --focus-ring: 0 0 0 3px var(--cream-50), 0 0 0 5.5px var(--red-500); --focus-ring-dark: 0 0 0 3px var(--ink-900), 0 0 0 5.5px var(--red-400); --blur-sm: 6px; --blur-md: 14px; --blur-lg: 28px; --backdrop: rgba(5, 5, 5, 0.62); } /* ============================================================================ DARK THEME . the cinematic ink canvas Applied via [data-theme="dark"] on a section wrapper or . Semantic tokens flip; primitives stay constant. This lets any band go dark by adding one attribute. ============================================================================ */ [data-theme="dark"] { --bg: var(--ink-900); --bg-sunk: var(--ink-950); --bg-raised: var(--ink-800); --surface: var(--ink-800); --surface-2: var(--ink-700); --fg: rgba(245, 239, 228, 0.86); --fg-strong: var(--cream-50); --fg-soft: rgba(245, 239, 228, 0.62); --fg-faint: rgba(245, 239, 228, 0.40); --fg-onaccent: var(--cream-50); --accent: var(--red-400); --accent-bright: var(--red-350); --accent-deep: var(--red-600); --rule: rgba(245, 239, 228, 0.14); --rule-strong: rgba(245, 239, 228, 0.26); --rule-faint: rgba(245, 239, 228, 0.07); --metal: var(--steel-400); --metal-edge: var(--steel-500); --shadow-card: 0 28px 60px -26px rgba(0,0,0,0.7); --shadow-ring: 0 0 0 1px var(--rule); --grad-paper: var(--grad-ink-depth); --grad-pegboard: radial-gradient(circle at center, rgba(245,239,228,0.07) 1.4px, transparent 1.6px); color-scheme: dark; }