/* * THE ONE PATTERN — CSS Variables * Source of truth for all visual decisions * Based on: TheOnePattern_VisualRedesignBrief.md * ───────────────────────────────────────────── * Dark-Gold Brutalist system * Do not override these in page files — extend only */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Didact+Gothic&family=Share+Tech+Mono&display=swap'); :root { /* ───────────────────────────────────────── BACKGROUNDS Near-black with warmth — never pure cold black ───────────────────────────────────────── */ --bg-primary: #0A0A08; /* page background */ --bg-secondary: #111110; /* card / section backgrounds */ --bg-tertiary: #1A1A17; /* subtle elevation, hover states */ --bg-book: #F0EDE0; /* cream — book preview only, intentional contrast */ /* ───────────────────────────────────────── GOLD PALETTE Warm, never garish — the emotional core ───────────────────────────────────────── */ --gold-primary: #C9A84C; /* main gold */ --gold-light: #E8C97A; /* headings, highlights */ --gold-dim: #8A6F35; /* subtle accents, borders */ --gold-glow: rgba(201, 168, 76, 0.15); /* glow effects */ /* ───────────────────────────────────────── TEXT Warm white primary — never pure #FFF ───────────────────────────────────────── */ --text-primary: #F0EDE6; /* main body text */ --text-secondary: #9A9488; /* descriptions, body copy */ --text-dim: #5C5850; /* labels, captions */ --text-book: #1A1A14; /* text inside cream book preview */ /* ───────────────────────────────────────── ACCENTS Neon green: HUD / technical elements ONLY Never on copy, CTAs, or trust elements ───────────────────────────────────────── */ --accent-green: #39FF14; /* ───────────────────────────────────────── BORDERS ───────────────────────────────────────── */ --border-gold: rgba(201, 168, 76, 0.25); --border-subtle: rgba(240, 237, 230, 0.08); --border-card: rgba(201, 168, 76, 0.18); /* ───────────────────────────────────────── TYPOGRAPHY — FONT FAMILIES ───────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; /* hero headlines, chapter titles */ --font-body: 'Didact Gothic', sans-serif; /* all body text, subheadings */ --font-mono: 'Share Tech Mono', monospace; /* HUD elements ONLY */ /* ───────────────────────────────────────── TYPOGRAPHY — TYPE SCALE ───────────────────────────────────────── */ --text-xs: 13px; /* labels, captions — floor raised for readability */ --text-sm: 16px; /* captions, micro copy */ --text-base: 17px; /* body text */ --text-lg: 22px; /* subheadings */ --text-xl: 32px; /* section headings */ --text-2xl: 48px; /* page titles */ --text-3xl: 72px; /* hero headline */ --text-4xl: 96px; /* display — used once per site */ /* Mobile type scale reductions (~25%) */ --text-xl-mobile: 24px; --text-2xl-mobile: 36px; --text-3xl-mobile: 52px; --text-4xl-mobile: 64px; /* ───────────────────────────────────────── TYPOGRAPHY — LINE HEIGHTS & TRACKING ───────────────────────────────────────── */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.7; --leading-relaxed: 1.85; --leading-loose: 2.0; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.08em; --tracking-wider: 0.15em; --tracking-widest: 0.25em; /* ───────────────────────────────────────── SPACING SCALE (rem-based, base 18px) ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Section padding — vertical rhythm */ --section-padding-y: 80px; --section-padding-y-mobile: 56px; --section-padding-x: 24px; /* ───────────────────────────────────────── LAYOUT ───────────────────────────────────────── */ --max-width-content: 720px; /* main reading column */ --max-width-narrow: 560px; /* pull quotes, subheads */ --max-width-wide: 960px; /* full-bleed sections */ --max-width-cta: 480px; /* CTA button max-width on desktop */ --max-width-opt-in: 600px; /* free.html column */ --max-width-form: 420px; /* ConvertKit form */ /* ───────────────────────────────────────── BORDERS — RADII & WIDTHS ───────────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --radius-base: 4px; --radius-lg: 8px; --border-width-thin: 1px; --border-width-accent: 3px; /* ───────────────────────────────────────── SHADOWS ───────────────────────────────────────── */ --shadow-gold-glow: 0 0 32px rgba(201, 168, 76, 0.12); --shadow-gold-hard: 0 0 0 1px rgba(201, 168, 76, 0.3); --shadow-book: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 168, 76, 0.3); --shadow-deep: 0 24px 48px rgba(0, 0, 0, 0.5); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); /* ───────────────────────────────────────── ANIMATION DURATIONS & EASINGS ───────────────────────────────────────── */ --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 600ms; --duration-page: 800ms; --duration-symbol: 120s; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0); /* ───────────────────────────────────────── Z-INDEX SCALE ───────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-hud: 30; /* HUD elements float above content */ } /* ───────────────────────────────────────────────────────────────── BACKGROUND TEXTURE Applied globally — grain + radial vignette Never flat black ───────────────────────────────────────────────────────────────── */ body { background-color: var(--bg-primary); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 30%, #16160F 0%, #0A0A08 70%); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-relaxed); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.4s ease, color 0.4s ease; } /* ───────────────────────────────────────────────────────────────── LIGHT THEME OVERRIDES Applied via data-theme="light" on All gold tones shift darker (for contrast on light bg) HUD green shifts to muted olive ───────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-primary: #F5F0E8; --bg-secondary: #EDE8DC; --bg-tertiary: #E4DED1; --text-primary: #1A1A18; --text-secondary: #4A4848; --text-dim: #4A4A44; --gold-primary: #8B6914; --gold-light: #7A5C10; --gold-dim: #A07820; --gold-glow: rgba(139, 105, 20, 0.12); --border-gold: rgba(139, 105, 20, 0.3); --border-subtle: rgba(26, 26, 24, 0.1); --border-card: rgba(139, 105, 20, 0.22); --shadow-gold-glow: 0 0 32px rgba(139, 105, 20, 0.1); --shadow-gold-hard: 0 0 0 1px rgba(139, 105, 20, 0.25); --shadow-book: 0 40px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 105, 20, 0.25); --shadow-deep: 0 24px 48px rgba(0, 0, 0, 0.12); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1); --accent-green: #5A6B2A; } [data-theme="light"] body { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 30%, #F8F3EB 0%, #F5F0E8 70%); } /* ───────────────────────────────────────────────────────────────── GLOBAL RESET & BASE ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img, svg { display: block; max-width: 100%; } a { color: var(--gold-primary); text-decoration: none; } a:hover { color: var(--gold-light); }