/* * theme.css — Eclipse 2026 Covarrubias * ───────────────────────────────────────────────────────────── * All CSS custom properties live here. * Dark theme is the default (defined on :root). * Light theme overrides via [data-theme="light"] on . * * FOR CLAUDE DESIGN: Edit this file to change the visual identity. * JS never reads or writes these variables directly. * ───────────────────────────────────────────────────────────── */ /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400&family=Space+Mono:wght@400;700&display=swap'); /* ══════════════════════════════════════════════════════════════ DARK THEME (default) ══════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* ── Backgrounds ── */ --bg-base: #07090f; /* page background — deep space */ --bg-surface: #0d1119; /* card surfaces */ --bg-elevated: #141824; /* higher cards, tooltips */ --bg-overlay: rgba(7, 9, 15, 0.85); /* ── Text ── */ --text-primary: #e8e3d8; /* main text — warm white */ --text-secondary: #8b8780; /* secondary / metadata */ --text-tertiary: #504e4c; /* very muted labels */ --text-inverted: #0d1119; /* text on accent backgrounds */ /* ── Solar accent (corona gold) ── */ --accent: #e0a030; /* primary accent — corona */ --accent-dim: #7a5510; /* dimmed accent */ --accent-glow: rgba(224, 160, 48, 0.20); /* ── Borders ── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.20); /* ── Semantic status colors ── */ --status-danger-bg: rgba(200, 50, 30, 0.15); --status-danger-text: #e87060; --status-danger-border: rgba(200, 50, 30, 0.30); --status-warn-bg: rgba(200, 130, 30, 0.15); --status-warn-text: #d89050; --status-warn-border: rgba(200, 130, 30, 0.30); --status-ok-bg: rgba(60, 160, 90, 0.15); --status-ok-text: #60c880; --status-ok-border: rgba(60, 160, 90, 0.30); --status-info-bg: rgba(50, 100, 200, 0.15); --status-info-text: #70a0e0; --status-info-border: rgba(50, 100, 200, 0.30); /* ── Eclipse phase colors ── */ --phase-partial: #5070a0; /* soft blue for partial phase */ --phase-totality: #e0a030; /* corona gold for totality */ --phase-progress: #1e3c6e; /* progress bar track */ /* ── Map ── */ --map-path-fill: rgb(224, 160, 48); /* solid — fillOpacity in Leaflet controls alpha */ --map-path-stroke: rgb(224, 140, 20); --map-center-stroke: rgb(255, 200, 60); /* ── Theme toggle icon ── */ --toggle-icon: '☀'; /* show sun = "switch to light" */ /* ── Shadows ── */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px var(--accent-glow), 0 0 40px rgba(224, 160, 48, 0.10); /* ── Transitions ── */ --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* ── Theme indicator (for JS to read via getComputedStyle) ── */ --theme-name: "dark"; } /* ══════════════════════════════════════════════════════════════ LIGHT THEME ══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Backgrounds ── */ --bg-base: #f4f0e6; /* aged parchment */ --bg-surface: #fdfaf3; /* card surfaces — lighter parchment */ --bg-elevated: #fffef9; --bg-overlay: rgba(244, 240, 230, 0.92); /* ── Text ── */ --text-primary: #18150e; --text-secondary: #6a6258; --text-tertiary: #9a9088; --text-inverted: #fdfaf3; /* ── Solar accent ── */ --accent: #a06e00; /* darker amber for contrast on light bg */ --accent-dim: #dccca0; --accent-glow: rgba(160, 110, 0, 0.12); /* ── Borders ── */ --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.25); /* ── Semantic status ── */ --status-danger-bg: rgba(180, 40, 20, 0.08); --status-danger-text: #b02010; --status-danger-border: rgba(180, 40, 20, 0.20); --status-warn-bg: rgba(160, 100, 0, 0.10); --status-warn-text: #8a6000; --status-warn-border: rgba(160, 100, 0, 0.25); --status-ok-bg: rgba(30, 120, 60, 0.10); --status-ok-text: #1a7040; --status-ok-border: rgba(30, 120, 60, 0.25); --status-info-bg: rgba(30, 70, 160, 0.10); --status-info-text: #1a4090; --status-info-border: rgba(30, 70, 160, 0.20); /* ── Eclipse phase colors ── */ --phase-partial: #2a4a80; --phase-totality: #a06e00; --phase-progress: #d4c8a8; /* ── Map ── */ --map-path-fill: rgb(160, 110, 0); --map-path-stroke: rgb(130, 85, 0); --map-center-stroke: rgb(120, 75, 0); /* ── Theme toggle ── */ --toggle-icon: '☽'; /* show moon = "switch to dark" */ /* ── Shadows ── */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-glow: 0 0 20px var(--accent-glow); /* ── Transitions ── */ --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; --theme-name: "light"; } /* ══════════════════════════════════════════════════════════════ TYPOGRAPHY TOKENS (same in both themes — override here if needed per theme) ══════════════════════════════════════════════════════════════ */ :root { /* Font families */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'Space Mono', 'Courier New', monospace; --font-body: 'Source Serif 4', Georgia, serif; --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Font sizes — type scale */ --text-xs: 0.70rem; /* 11.2px — labels, badges */ --text-sm: 0.80rem; /* 12.8px — secondary text */ --text-base: 0.9375rem; /* 15px — body text */ --text-md: 1.0625rem; /* 17px — lead text */ --text-lg: 1.25rem; /* 20px — section headers */ --text-xl: 1.625rem; /* 26px — card titles */ --text-2xl: 2.25rem; /* 36px — page title */ --text-3xl: 3.5rem; /* 56px — countdown digits (mobile) */ --text-4xl: 5rem; /* 80px — countdown digits (desktop) */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Z-index layers */ --z-map: 10; --z-overlay: 20; --z-sticky: 30; --z-toast: 40; /* Animation durations */ --dur-fast: 120ms; --dur-base: 250ms; --dur-slow: 450ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ══════════════════════════════════════════════════════════════ TOTALITY STATE — applied to during C2–C3 ══════════════════════════════════════════════════════════════ */ [data-eclipse-state="totality"] { --bg-base: #000000; --bg-surface: #0a0808; --text-primary: #ffffff; --accent: #f5c040; --accent-glow: rgba(245, 192, 64, 0.35); } /* Corona pulse animation — used by countdown during totality */ @keyframes corona-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 30px 8px var(--accent-glow); } } /* Digit tick animation — fires each second in countdown */ @keyframes digit-tick { 0% { transform: translateY(-4px); opacity: 0.6; } 30% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* Phase progress fill animation */ @keyframes progress-fill { from { width: 0; } } /* Data load fade-in */ @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Skeleton shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }