/* ========================================================================== My Tax Freedom Day — shared design system Light theme (default) + dark "gold" theme via .dark on . Loaded after Tailwind CDN on every page. ========================================================================== */ :root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --gold: #C8A96E; --gold-light: #D4B87A; --gold-muted: #8B7A5C; --ink: #0f172a; --accent: #4f46e5; } /* ---------- Typography ---------- */ html { font-family: var(--font-body); } body { font-family: var(--font-body); } h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; } h1 { font-weight: 650; } /* Numbers & data — used on result tables and stat callouts */ .mono-num, .mono-num td, table.results-table td, .stat-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Eyebrow labels (WorldPulse style) */ .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; color: var(--accent); } /* ---------- Ambient background ---------- */ body.grid-bg { background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99, 102, 241, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(16, 185, 129, 0.04) 0%, transparent 60%), radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0); background-size: 100% 100%, 100% 100%, 24px 24px; } /* ---------- Cards ---------- */ .rounded-2xl.shadow-sm, .rounded-3xl.shadow-sm { transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } /* ---------- Sticky glass nav ---------- */ header.sticky { transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } header.sticky.nav-scrolled { background-color: rgba(15, 23, 42, 0.88) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25); } /* ---------- Scroll reveal ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.revealed { opacity: 1; transform: none; } } /* ---------- Theme toggle button ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(148, 163, 184, 0.08); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { color: #fff; border-color: rgba(200, 169, 110, 0.6); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } .dark .theme-toggle { color: var(--gold); border-color: rgba(200, 169, 110, 0.35); } /* ---------- Trust badge ---------- */ .trust-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================== DARK THEME — warm near-black + antique gold (borrowed from WorldPulse) Overrides the Tailwind utilities used across the site. ========================================================================== */ html.dark { color-scheme: dark; } .dark body { background-color: #0D0C0A; color: #d9d3c7; } .dark body.grid-bg { background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(200, 169, 110, 0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(200, 169, 110, 0.04) 0%, transparent 60%), radial-gradient(circle at 1px 1px, rgba(200, 169, 110, 0.10) 1px, transparent 0); background-size: 100% 100%, 100% 100%, 24px 24px; } /* Surfaces */ .dark .bg-white { background-color: #141210 !important; } .dark .bg-gray-50 { background-color: #12100e !important; } .dark .bg-slate-50 { background-color: #1a1814 !important; } .dark .bg-gray-100, .dark .bg-slate-100 { background-color: #1E1C18 !important; } .dark .bg-gray-200 { background-color: #262319 !important; } .dark .bg-slate-800 { background-color: #1E1C18 !important; } .dark .bg-slate-900 { background-color: #100E0C !important; } .dark .bg-slate-700 { background-color: #262218 !important; } .dark .bg-indigo-50, .dark [class*="bg-indigo-50/"] { background-color: rgba(200, 169, 110, 0.08) !important; } .dark .bg-indigo-100 { background-color: rgba(200, 169, 110, 0.14) !important; } .dark .bg-emerald-50, .dark [class*="bg-emerald-50/"] { background-color: rgba(107, 155, 107, 0.12) !important; } .dark .bg-red-50, .dark [class*="bg-red-50/"] { background-color: rgba(176, 106, 106, 0.12) !important; } .dark .bg-amber-50, .dark [class*="bg-amber-50/"] { background-color: rgba(200, 169, 110, 0.12) !important; } .dark [class*="bg-slate-50/"] { background-color: rgba(200, 169, 110, 0.05) !important; } .dark .bg-indigo-500, .dark .bg-indigo-600 { background-color: #C8A96E !important; color: #0D0C0A !important; } .dark .bg-indigo-600:hover, .dark .hover\:bg-indigo-700:hover { background-color: #D4B87A !important; color: #0D0C0A !important; } .dark .bg-emerald-500 { background-color: #6B9B6B !important; } .dark .hover\:bg-emerald-600:hover { background-color: #7dab7d !important; } /* Text */ .dark .text-slate-900, .dark .text-gray-900, .dark .text-slate-950, .dark .text-indigo-950 { color: #EDE8DF !important; } .dark .text-slate-800, .dark .text-gray-800 { color: #E2DCCf !important; } .dark .text-slate-700, .dark .text-gray-700 { color: #C9C2B2 !important; } .dark .text-slate-600, .dark .text-gray-600 { color: #A89F8D !important; } .dark .text-slate-500, .dark .text-gray-500 { color: #8A8478 !important; } .dark .text-slate-400, .dark .text-gray-400 { color: #7a7365 !important; } .dark .text-indigo-600, .dark .text-indigo-700, .dark .text-indigo-500 { color: #C8A96E !important; } .dark .text-indigo-400 { color: #D4B87A !important; } .dark .text-emerald-600, .dark .text-emerald-700 { color: #86b586 !important; } .dark .text-emerald-400 { color: #8fbe8f !important; } .dark .text-red-500, .dark .text-red-600 { color: #c98282 !important; } .dark .text-amber-700 { color: #D4B87A !important; } .dark .eyebrow { color: var(--gold); } /* Borders */ .dark .border-gray-100, .dark .border-gray-200, .dark .border-slate-100, .dark .border-gray-50, .dark .border-slate-200, .dark .border-indigo-100, .dark [class*="border-indigo-100/"] { border-color: rgba(200, 169, 110, 0.15) !important; } .dark .border-slate-700, .dark .border-slate-800, .dark [class*="border-slate-800/"] { border-color: rgba(200, 169, 110, 0.12) !important; } .dark .border-emerald-100 { border-color: rgba(107, 155, 107, 0.3) !important; } .dark .border-red-100 { border-color: rgba(176, 106, 106, 0.3) !important; } .dark .border-amber-100 { border-color: rgba(200, 169, 110, 0.3) !important; } .dark .hover\:border-indigo-300:hover { border-color: rgba(200, 169, 110, 0.55) !important; } /* Form elements */ .dark select, .dark input[type="text"], .dark input[type="number"], .dark textarea { background-color: #1a1814 !important; border-color: rgba(200, 169, 110, 0.2) !important; color: #EDE8DF !important; } .dark select:focus, .dark input[type="text"]:focus, .dark input[type="number"]:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.4) !important; outline: none; } .dark input[type="range"] { accent-color: var(--gold) !important; } .dark input::placeholder { color: #6b6558 !important; } /* Nav (header already dark in light mode; make it warm-black + glass in dark) */ .dark header.sticky { background-color: rgba(13, 12, 10, 0.92) !important; } .dark header.sticky.nav-scrolled { background-color: rgba(13, 12, 10, 0.90) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(200, 169, 110, 0.12); } /* Shadows read differently on dark */ .dark .shadow-sm, .dark .shadow-md, .dark .shadow-xl, .dark .shadow-lg { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important; } /* Charts / inline SVGs — remap attribute-set colors so every chart adapts */ .dark svg [stroke="#6366f1"] { stroke: var(--gold); } .dark svg [fill="#6366f1"] { fill: var(--gold); } .dark svg [stop-color="#6366f1"] { stop-color: var(--gold); } .dark svg [stroke="#e2e8f0"] { stroke: rgba(200, 169, 110, 0.18); } .dark svg [stroke="#cbd5e1"] { stroke: #6b6558; } .dark svg [fill="#94a3b8"] { fill: #8a8478; } .dark svg [fill="#0f172a"], .dark svg [fill="#1e293b"] { fill: #EDE8DF; } /* Accent rings / focus */ .dark .accent-indigo-600 { accent-color: var(--gold) !important; } .dark .peer-checked\:bg-indigo-600:has(~ *), .dark .peer:checked ~ .peer-checked\:bg-indigo-600 { background-color: var(--gold) !important; }