/* ============================================================ THEMES.CSS — 5 Dynamic Themes via CSS Custom Properties Applied via [data-theme="..."] on ============================================================ */ /* ── FOUC Prevention ─────────────────────────────────────── */ body { opacity: 0; transition: opacity 0.25s ease; } body.theme-ready { opacity: 1; } /* ── Base Token Defaults (fallback = taxi) ────────────────── */ :root { --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 12px 40px rgba(0,0,0,0.18); --shadow-xl: 0 24px 64px rgba(0,0,0,0.24); --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --nav-height: 64px; --max-width: 1200px; } /* ══════════════════════════════════════════════════════════ 1. TAXI THEME — Yellow + Black, Bold Street Food ══════════════════════════════════════════════════════════ */ [data-theme="taxi"], :root:not([data-theme]) { --color-primary: #F5C518; --color-primary-dark: #D4A800; --color-primary-light:#FFF3B0; --color-accent: #FF3D2E; --color-bg: #111111; --color-bg-2: #1A1A1A; --color-bg-3: #222222; --color-surface: #1E1E1E; --color-surface-2: #2A2A2A; --color-border: rgba(245,197,24,0.2); --color-text: #F5F5F5; --color-text-2: #B0B0B0; --color-text-3: #707070; --color-text-inv: #111111; --color-success: #22C55E; --color-error: #EF4444; --color-warning: #F5C518; --gradient-hero: linear-gradient(135deg, #111111 0%, #1A1A1A 100%); --gradient-primary: linear-gradient(135deg, #F5C518, #D4A800); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%); --ticker-bg: #F5C518; --ticker-text: #111111; --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; } /* ══════════════════════════════════════════════════════════ 2. MATCHA THEME — Green + White, Calm Cafe ══════════════════════════════════════════════════════════ */ [data-theme="matcha"] { --color-primary: #5B8C5A; --color-primary-dark: #3D6B3C; --color-primary-light:#D4E9D4; --color-accent: #C8965A; --color-bg: #F5F7F2; --color-bg-2: #EAF0E4; --color-bg-3: #DDE8D6; --color-surface: #FFFFFF; --color-surface-2: #F0F4EC; --color-border: rgba(91,140,90,0.18); --color-text: #1E2D1E; --color-text-2: #4A6045; --color-text-3: #8AAB85; --color-text-inv: #FFFFFF; --color-success: #5B8C5A; --color-error: #C0392B; --color-warning: #C8965A; --gradient-hero: linear-gradient(135deg, #3D6B3C 0%, #5B8C5A 100%); --gradient-primary: linear-gradient(135deg, #5B8C5A, #3D6B3C); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(30,45,30,0.85) 100%); --ticker-bg: #5B8C5A; --ticker-text: #FFFFFF; --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Nunito', 'Helvetica Neue', sans-serif; } /* ══════════════════════════════════════════════════════════ 3. SPICY THEME — Red + Orange, Vibrant Energy ══════════════════════════════════════════════════════════ */ [data-theme="spicy"] { --color-primary: #FF4500; --color-primary-dark: #CC3700; --color-primary-light:#FFD5C2; --color-accent: #FF8C00; --color-bg: #0F0802; --color-bg-2: #1A1008; --color-bg-3: #241810; --color-surface: #1E1208; --color-surface-2: #2A1C10; --color-border: rgba(255,69,0,0.25); --color-text: #FFF5F0; --color-text-2: #FFAA80; --color-text-3: #995540; --color-text-inv: #0F0802; --color-success: #4CAF50; --color-error: #FF1744; --color-warning: #FF8C00; --gradient-hero: linear-gradient(135deg, #1A1008 0%, #2A1810 100%); --gradient-primary: linear-gradient(135deg, #FF4500, #FF8C00); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(15,8,2,0.92) 100%); --ticker-bg: #FF4500; --ticker-text: #FFFFFF; --font-display: 'Righteous', 'Impact', sans-serif; --font-body: 'Poppins', 'Helvetica Neue', sans-serif; } /* ══════════════════════════════════════════════════════════ 4. COOL THEME — Blue + Cyan, Modern Clean ══════════════════════════════════════════════════════════ */ [data-theme="cool"] { --color-primary: #2196F3; --color-primary-dark: #1565C0; --color-primary-light:#BBDEFB; --color-accent: #00BCD4; --color-bg: #050D1A; --color-bg-2: #091525; --color-bg-3: #0E1E32; --color-surface: #0D1B2E; --color-surface-2: #142338; --color-border: rgba(33,150,243,0.2); --color-text: #E8F4FD; --color-text-2: #90CAF9; --color-text-3: #42A5F5; --color-text-inv: #050D1A; --color-success: #00E676; --color-error: #FF1744; --color-warning: #FFAB00; --gradient-hero: linear-gradient(135deg, #050D1A 0%, #0E1E32 100%); --gradient-primary: linear-gradient(135deg, #2196F3, #00BCD4); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(5,13,26,0.92) 100%); --ticker-bg: #2196F3; --ticker-text: #FFFFFF; --font-display: 'Exo 2', 'Arial', sans-serif; --font-body: 'Inter', 'Helvetica Neue', sans-serif; } /* ══════════════════════════════════════════════════════════ 5. MINIMAL THEME — Black + White, Typography-Led ══════════════════════════════════════════════════════════ */ [data-theme="minimal"] { --color-primary: #111111; --color-primary-dark: #000000; --color-primary-light:#E8E8E8; --color-accent: #666666; --color-bg: #FAFAFA; --color-bg-2: #F2F2F2; --color-bg-3: #E8E8E8; --color-surface: #FFFFFF; --color-surface-2: #F5F5F5; --color-border: rgba(0,0,0,0.1); --color-text: #111111; --color-text-2: #444444; --color-text-3: #888888; --color-text-inv: #FFFFFF; --color-success: #111111; --color-error: #CC0000; --color-warning: #888888; --gradient-hero: linear-gradient(135deg, #111111 0%, #333333 100%); --gradient-primary: linear-gradient(135deg, #111111, #444444); --gradient-card: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.88) 100%); --ticker-bg: #111111; --ticker-text: #FFFFFF; --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif; }