/* ============================================ Radcalcs Dark Mode Theme Deep dark purple — applied via data-theme="dark" on ============================================ */ /* Smooth transitions on theme switch */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; } /* Dark theme CSS variable overrides */ [data-theme="dark"] { --blue: #60a5fa; --blue-light: #1a0f3f; --blue-mid: #1e1244; --blue-dark: #93c5fd; --text: #f3e8ff; --text-2: #d4bbf5; --text-3: #9b7fc8; --border: #3d1f6e; --bg: #220f3b; --white: #1a0a2e; --green: #34d399; --green-light: #0b2a1a; --amber: #fbbf24; --amber-light: #2a1500; --purple: #a78bfa; --purple-light: #1e0a3c; } /* Body background */ [data-theme="dark"] body { background: #1a0a2e; color: #f3e8ff; } /* Nav dark */ [data-theme="dark"] nav { background: #130720 !important; border-bottom-color: #3d1f6e !important; } /* Footer uses var(--text) as bg — override explicitly */ [data-theme="dark"] footer { background: #0f061d !important; } /* Input/select/textarea dark styling */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #220f3b; color: #f3e8ff; border-color: #3d1f6e; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: #60a5fa; outline-color: #60a5fa; } /* Tables */ [data-theme="dark"] table { background: #1a0a2e; } [data-theme="dark"] th { background: #220f3b !important; color: #f3e8ff !important; border-color: #3d1f6e !important; } [data-theme="dark"] td { border-color: #3d1f6e !important; color: #f3e8ff; } [data-theme="dark"] tr:nth-child(even) td { background: #1f0d36 !important; } /* Cards and panels */ [data-theme="dark"] .calc-card { background: #220f3b; border-color: #3d1f6e; } [data-theme="dark"] .calc-card:hover { border-color: #60a5fa; box-shadow: 0 4px 20px rgba(96, 165, 250, 0.15); } /* result boxes, info boxes */ [data-theme="dark"] .result-box, [data-theme="dark"] .result, [data-theme="dark"] .calc-section, [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .box { background: #220f3b !important; border-color: #3d1f6e !important; } /* Disclaimer box */ [data-theme="dark"] .disclaimer { background: #2a1500 !important; border-color: #78350f !important; color: #fde68a !important; } [data-theme="dark"] .disclaimer strong { color: #fbbf24 !important; } /* Scrollbars */ [data-theme="dark"] ::-webkit-scrollbar { background: #1a0a2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3d1f6e; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5b2fa0; } /* ============================================ Theme toggle button ============================================ */ .theme-toggle { background: none; border: 1px solid var(--border); cursor: pointer; padding: 5px 9px; border-radius: 8px; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; transition: background 0.2s, border-color 0.2s; } .theme-toggle:hover { background: var(--bg); border-color: var(--blue); } /* Related Calculators dark mode */ [data-theme="dark"] .related-card { background: #220f3b; border-color: #3d1f6e; } [data-theme="dark"] .related-card:hover { border-color: #60a5fa; box-shadow: 0 4px 16px rgba(96, 165, 250, 0.15); } [data-theme="dark"] .related-card-name { color: #f3e8ff; } [data-theme="dark"] .related-card-desc { color: #9b7fc8; } [data-theme="dark"] .specialty-blue { background: #1a0f3f; color: #93c5fd; } [data-theme="dark"] .specialty-red { background: #2d0a0a; color: #fca5a5; } [data-theme="dark"] .specialty-amber { background: #2a1500; color: #fde68a; } [data-theme="dark"] .specialty-green { background: #0b2a1a; color: #6ee7b7; } [data-theme="dark"] .specialty-purple { background: #1e0a3c; color: #c4b5fd; } [data-theme="dark"] .specialty-gray { background: #1f2937; color: #d1d5db; } /* ── AdSense slots ───────────────────────────────────────────────────────── */ .ad-header-banner, #ad-header-banner { display: flex; justify-content: center; align-items: center; padding: 12px 0; min-height: 90px; background: var(--bg); border-bottom: 1px solid var(--border); } .ad-header-banner ins, #ad-header-banner ins { display: block; width: 728px; max-width: 100%; height: 90px; background: var(--bg); } .ad-sidebar, #ad-sidebar { display: flex; justify-content: center; align-items: flex-start; padding: 12px 0; min-height: 250px; width: 100%; } .ad-sidebar ins, #ad-sidebar ins { display: block; width: 300px; height: 250px; background: var(--bg); } .ad-mid-banner, #ad-mid-banner { display: flex; justify-content: center; padding: 16px 0; min-height: 90px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 24px 0; } .ad-mid-banner ins, #ad-mid-banner ins { display: block; width: 728px; max-width: 100%; height: 90px; } .ad-in-content { display: flex; justify-content: center; padding: 16px 0; min-height: 250px; } .ad-in-content ins { display: block; width: 300px; height: 250px; } .ad-banner { display: flex; justify-content: center; padding: 12px 0; min-height: 90px; background: var(--bg); border-bottom: 1px solid var(--border); } .ad-banner ins { display: block; width: 728px; max-width: 100%; height: 90px; } .ad-mid { display: flex; justify-content: center; padding: 16px 0; min-height: 90px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 24px 0; } .ad-mid ins { display: block; width: 728px; max-width: 100%; height: 90px; }