/* ============================================================ RADIUS RED LIGHT — DESIGN SYSTEM v2 (master stylesheet) Single source of truth for colors, type, spacing, and motion. Every page in the design system and video templates links this file. Change a value here, it changes everywhere. ============================================================ */ /* ---------- Fonts (Google Fonts link goes in each page's ): https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap ------------------------------------------------------------- */ :root { /* Color — core */ --bg: #0A0A0B; /* page black */ --red: #E60023; /* Radius red — CTAs, key numbers, meaning only */ --red-bright: #FF2A3D; /* glow, active states */ --red-deep: #C50018; /* gradient partner (use sparingly) */ --red-shadow: #5A0010; /* deepest red, vignette only */ /* Color — text */ --fg-1: #F5F5F7; /* primary text */ --fg-2: #B8B8C0; /* secondary text */ --fg-3: #8A8A93; /* muted text / captions */ --on-red: #FFE4E7; /* pale text on red surfaces, 18px+ only */ /* Color — structure */ --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.14); --surface: #121214; /* card background, one step off black */ --scrim: rgba(10, 10, 11, 0.6); --nav-material: rgba(10, 10, 11, 0.72); /* Color — science diagrams only */ --tissue-skin: #F4D7C0; --tissue-dermis: #EBAFA6; --tissue-fat: #F1C04A; --tissue-muscle: #8E1F1F; --tissue-bone: #E5E0D6; /* Type families */ --font-display: "Antonio", "Arial Narrow", sans-serif; --font-sans: "Inter", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", monospace; --font-serif: "Fraunces", Georgia, serif; /* Type scale (the ONLY sizes) */ --text-display: clamp(3rem, 6vw, 5.5rem); /* hero headlines */ --text-title: clamp(2rem, 4vw, 3.25rem); /* section headlines */ --text-heading: 1.375rem; /* card/item headings */ --text-body: 1.0625rem; /* body copy, 17px */ --text-small: 0.9375rem; /* secondary copy, 15px */ --text-label: 0.8125rem; /* mono eyebrows, 13px */ /* Tracking + leading pairs */ --track-display: -0.015em; --track-title: -0.01em; --track-label: 0.22em; --leading-display: 1.02; --leading-title: 1.1; --leading-body: 1.6; /* Spacing scale */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 7.5rem; /* section padding, desktop */ --content-max: 1080px; --prose-max: 640px; /* Radius: square is the brand. Pills are the only exception. */ --radius: 0; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-press: 100ms; --dur-hover: 150ms; --dur-reveal: 500ms; --dur-ambient: 8s; /* One glow, used once per section at most */ --glow: 0 0 60px rgba(230, 0, 35, 0.25); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } /* ---------- Type components ---------- */ .display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--track-display); text-transform: uppercase; margin: 0; } .title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 500; line-height: var(--leading-title); letter-spacing: var(--track-title); text-transform: uppercase; margin: 0; } .heading { font-family: var(--font-sans); font-size: var(--text-heading); font-weight: 600; line-height: 1.3; margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--red); margin: 0 0 var(--space-3); } .numeral { font-family: var(--font-display); font-weight: 600; color: var(--red); letter-spacing: var(--track-title); } .muted { color: var(--fg-3); } .secondary { color: var(--fg-2); } p { margin: 0 0 var(--space-2); max-width: var(--prose-max); } /* ---------- Layout ---------- */ .section { padding: var(--space-6) var(--space-4); } .container { max-width: var(--content-max); margin: 0 auto; } .hairline-top { border-top: 1px solid var(--hairline); } .hairline-bottom { border-bottom: 1px solid var(--hairline); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; padding: 1rem 2rem; border-radius: var(--radius-pill); transition: transform var(--dur-press) var(--ease-out), background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-bright); } .btn-ghost { background: transparent; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--hairline-strong); } .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--fg-3); } /* ---------- Nav material ---------- */ .nav-material { background: var(--nav-material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--hairline); } /* ---------- Reveal + ambient motion ---------- */ @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } .reveal { animation: fade-up var(--dur-reveal) var(--ease-out) both; } .ambient { animation: breathe var(--dur-ambient) ease-in-out infinite; } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { animation: none; opacity: 1; transform: none; } .ambient { animation: none; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media (prefers-reduced-transparency: reduce) { .nav-material { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ---------- Mobile ---------- */ @media (max-width: 720px) { :root { --space-6: 5rem; } .section { padding-left: var(--space-3); padding-right: var(--space-3); } }