/* ========================================================= BudgetMonies — Theme overlay (Deep Money Green default) Loaded site-wide. Applies dark theme by default; light theme activated via html[data-theme="light"]. Designed to layer on top of existing styles.css files so forms / calculators are not broken. ========================================================= */ /* The theme.js script sets data-theme on before paint to prevent flash. If JS is disabled, dark is the visual default per the rules below (no html attribute = dark). */ /* ----- 1. Theme toggle button (reusable on every page) ----- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 8px; padding: 0; background: rgba(255, 255, 255, 0.04); color: #d7e2dc; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; cursor: pointer; font: inherit; line-height: 1; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.18s ease; } .theme-toggle:hover { background: rgba(58, 194, 138, 0.14); color: #7fd5a8; border-color: rgba(58, 194, 138, 0.45); transform: rotate(-10deg); } .theme-toggle:focus-visible { outline: 2px solid #3ac28a; outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; color: currentColor; } .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-moon { display: block; } html[data-theme="light"] .theme-toggle { background: #ffffff; color: #0b3a3a; border-color: #d9e3e0; } html[data-theme="light"] .theme-toggle:hover { background: #ebf1ee; color: #1f8c5a; border-color: #1f8c5a; } html[data-theme="light"] .theme-toggle .ti-sun { display: block; } html[data-theme="light"] .theme-toggle .ti-moon { display: none; } /* ----- 2. Dark theme — applied when no light attribute set ----- */ /* We scope only to html:not([data-theme="light"]) so the toggle to light reverts to the original styles. */ html:not([data-theme="light"]) { color-scheme: dark; background: #0b1f1a; } /* Body + base text */ html:not([data-theme="light"]) body { background: #0b1f1a; color: #d7e2dc; } /* Universal selection */ html:not([data-theme="light"]) ::selection { background: rgba(58, 194, 138, 0.35); color: #f3fbf6; } /* ----- 3. Homepage / shared-styles.css surfaces (dark) ----- */ /* Header */ html:not([data-theme="light"]) .site-header { background: rgba(11, 31, 26, 0.88); border-bottom-color: rgba(255, 255, 255, 0.08); } html:not([data-theme="light"]) .brand, html:not([data-theme="light"]) .brand-mark { color: #7fd5a8; } html:not([data-theme="light"]) .brand-name { color: #f3fbf6; } html:not([data-theme="light"]) .brand-sub { color: #8ea59a; } html:not([data-theme="light"]) .site-nav a { color: #c0d2c8; } html:not([data-theme="light"]) .site-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #7fd5a8; } html:not([data-theme="light"]) .site-nav .nav-cta { background: #3ac28a; color: #061612; } html:not([data-theme="light"]) .site-nav .nav-cta:hover { background: #7fd5a8; color: #061612; } /* Hero (homepage / shared) */ html:not([data-theme="light"]) .hero { background: radial-gradient(1200px 420px at 85% -10%, rgba(58,194,138,.18), transparent 60%), radial-gradient(800px 320px at 0% 0%, rgba(127,213,168,.08), transparent 60%), linear-gradient(180deg, #0c211b 0%, #0b1f1a 100%); border-bottom-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .hero h1, html:not([data-theme="light"]) .hero h1 .ink { color: #f3fbf6; } html:not([data-theme="light"]) .hero h1 .ink { color: #7fd5a8; } html:not([data-theme="light"]) .lede { color: #b3c2bb; } html:not([data-theme="light"]) .eyebrow { background: rgba(58, 194, 138, 0.12); color: #7fd5a8; border: 1px solid rgba(58, 194, 138, 0.25); } html:not([data-theme="light"]) .hero-checks li { color: #b3c2bb; } html:not([data-theme="light"]) .hero-checks li::before { background: #3ac28a; box-shadow: inset 0 0 0 3px #0b1f1a; } html:not([data-theme="light"]) .btn-ghost { color: #d7e2dc; border-color: rgba(255, 255, 255, 0.18); background: transparent; } html:not([data-theme="light"]) .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: #3ac28a; color: #7fd5a8; } html:not([data-theme="light"]) .btn-primary { background: #3ac28a; color: #061612; } html:not([data-theme="light"]) .btn-primary:hover { background: #7fd5a8; color: #061612; } /* Featured hero stat block — keep brand block, deepen */ html:not([data-theme="light"]) .hero-stat { background: linear-gradient(160deg, #0e2e25 0%, #061612 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.4); } html:not([data-theme="light"]) .stat-label { color: rgba(255, 255, 255, 0.72); } html:not([data-theme="light"]) .stat-value { color: #7fd5a8; } html:not([data-theme="light"]) .stat-foot { color: rgba(255, 255, 255, 0.82); } html:not([data-theme="light"]) .stat-link { color: #7fd5a8; } html:not([data-theme="light"]) .stat-link:hover { color: #ffffff; } /* Bands & section eyebrows */ html:not([data-theme="light"]) .band { background: #0b1f1a; border-bottom-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .band.band-alt { background: #0e211b; } html:not([data-theme="light"]) .band.band-dark { background: linear-gradient(180deg, #061612 0%, #03100c 100%); color: #e6efed; } html:not([data-theme="light"]) .section-eyebrow { color: #7fd5a8; } html:not([data-theme="light"]) .section-eyebrow.light { color: #7fd5a8; } html:not([data-theme="light"]) .band-head h2 { color: #f3fbf6; } html:not([data-theme="light"]) .band-intro { color: #b3c2bb; } /* Trust cards */ html:not([data-theme="light"]) .trust { background: #0b1f1a; } html:not([data-theme="light"]) .trust-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .trust-ico { background: rgba(58, 194, 138, 0.14); color: #7fd5a8; } html:not([data-theme="light"]) .trust-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .trust-card p { color: #b3c2bb; } /* Tools grid */ html:not([data-theme="light"]) .tool-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); color: inherit; } html:not([data-theme="light"]) .tool-card:hover { border-color: rgba(58, 194, 138, 0.45); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html:not([data-theme="light"]) .tool-card.featured { background: linear-gradient(180deg, rgba(58,194,138,.16) 0%, rgba(31,140,90,.06) 100%); border-color: rgba(58, 194, 138, 0.45); } html:not([data-theme="light"]) .tool-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .tool-card p { color: #b3c2bb; } html:not([data-theme="light"]) .tool-cta { color: #7fd5a8; } html:not([data-theme="light"]) .tool-tag { color: #7a8a82; } html:not([data-theme="light"]) .tool-card.featured .tool-tag { color: #7fd5a8; } html:not([data-theme="light"]) .tool-card.featured .tool-cta { color: #7fd5a8; } /* Hustles */ html:not([data-theme="light"]) .hustle-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .hustle-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .hustle-card p { color: #b3c2bb; } html:not([data-theme="light"]) .hustle-pill { background: rgba(58, 194, 138, 0.14); color: #7fd5a8; } html:not([data-theme="light"]) .dot-list { color: #b3c2bb; } html:not([data-theme="light"]) .dot-list li::before { background: #3ac28a; } html:not([data-theme="light"]) .fine-print { color: #7a8a82; } /* Saving cards */ html:not([data-theme="light"]) .save-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .save-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .save-card p { color: #b3c2bb; } /* Reviews (dark band stays dark in both modes — tweak for unified palette) */ html:not([data-theme="light"]) .review-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(127, 213, 168, 0.22); } html:not([data-theme="light"]) .review-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(127, 213, 168, 0.5); } html:not([data-theme="light"]) .review-cat { color: #7fd5a8; } /* Newsletter */ html:not([data-theme="light"]) .newsletter { background: radial-gradient(700px 240px at 90% 10%, rgba(58,194,138,.14), transparent 60%), #0b1f1a; border-bottom-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .newsletter-copy h2 { color: #f3fbf6; } html:not([data-theme="light"]) .newsletter-form { background: #0e211b; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html:not([data-theme="light"]) .field-row input[type="email"] { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); color: #f3fbf6; } html:not([data-theme="light"]) .field-row input[type="email"]::placeholder { color: #7a8a82; } html:not([data-theme="light"]) .field-row input[type="email"]:focus { border-color: #3ac28a; background: rgba(58, 194, 138, 0.06); box-shadow: 0 0 0 3px rgba(58, 194, 138, 0.22); } html:not([data-theme="light"]) .form-foot { color: #7a8a82; } html:not([data-theme="light"]) .form-foot.ok { color: #7fd5a8; } /* Footer */ html:not([data-theme="light"]) .site-footer { background: #091814; border-top-color: rgba(255, 255, 255, 0.07); color: #b3c2bb; } html:not([data-theme="light"]) .footer-tag { color: #8ea59a; } html:not([data-theme="light"]) .footer-cols h4 { color: #7fd5a8; } html:not([data-theme="light"]) .footer-cols a { color: #b3c2bb; } html:not([data-theme="light"]) .footer-cols a:hover { color: #7fd5a8; } html:not([data-theme="light"]) .footer-base { color: #7a8a82; border-top-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .footer-family a { color: #7fd5a8; } html:not([data-theme="light"]) .footer-family a:hover { color: #ffffff; } /* Generic text links inside shared pages */ html:not([data-theme="light"]) a { color: #7fd5a8; } html:not([data-theme="light"]) a:hover { color: #ffffff; } html:not([data-theme="light"]) .site-nav a, html:not([data-theme="light"]) .footer-cols a, html:not([data-theme="light"]) .brand, html:not([data-theme="light"]) .tool-card, html:not([data-theme="light"]) .review-card, html:not([data-theme="light"]) .directory-card { /* Restore non-mint anchors set above */ /* color rules already set explicitly above */ } /* Article / review hero (shared pages) */ html:not([data-theme="light"]) .article-hero, html:not([data-theme="light"]) .page-hero { background: radial-gradient(880px 360px at 82% 0%, rgba(58,194,138,.2), transparent 62%), radial-gradient(720px 320px at 8% 18%, rgba(31,140,90,.09), transparent 60%), linear-gradient(180deg, #0c211b 0%, #0b1f1a 100%); border-bottom-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .article-hero h1, html:not([data-theme="light"]) .page-hero h1 { color: #f3fbf6; } html:not([data-theme="light"]) .article-meta span { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: #b3c2bb; } html:not([data-theme="light"]) .hero-pick-card { background: linear-gradient(160deg, #0e2e25 0%, #061612 100%); } html:not([data-theme="light"]) .pick-label { color: #7fd5a8; } html:not([data-theme="light"]) .hero-pick-card .btn-primary { background: #3ac28a; color: #061612; } html:not([data-theme="light"]) .hero-pick-card .btn-primary:hover { background: #ffffff; color: #0b3a3a; } /* Article body */ html:not([data-theme="light"]) .article-body { background: #0b1f1a; } html:not([data-theme="light"]) .toc-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .toc-card h2 { color: #7fd5a8; } html:not([data-theme="light"]) .toc-card a { color: #b3c2bb; } html:not([data-theme="light"]) .toc-card a:hover { color: #7fd5a8; } html:not([data-theme="light"]) .article-card .affiliate-note { background: rgba(58, 194, 138, 0.08); border-color: rgba(58, 194, 138, 0.3); color: #c8d4cd; } html:not([data-theme="light"]) .quick-pick, html:not([data-theme="light"]) .app-review { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); color: #d7e2dc; } html:not([data-theme="light"]) .rating-pill { background: rgba(58, 194, 138, 0.14); color: #7fd5a8; } html:not([data-theme="light"]) .table-wrap { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .comparison-table th { background: #061612; color: #f3fbf6; } html:not([data-theme="light"]) .comparison-table td { color: #b3c2bb; border-top-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .comparison-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); } html:not([data-theme="light"]) .comparison-table td:first-child { color: #f3fbf6; } html:not([data-theme="light"]) .calculator-cta { background: radial-gradient(500px 220px at 95% 0%, rgba(58,194,138,.22), transparent 60%), linear-gradient(160deg, #0e2e25 0%, #061612 100%); } html:not([data-theme="light"]) .source-note { border-top-color: rgba(255, 255, 255, 0.07); } /* Reviews hub */ html:not([data-theme="light"]) .directory-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); color: inherit; } html:not([data-theme="light"]) .directory-card:hover { border-color: rgba(58, 194, 138, 0.45); } html:not([data-theme="light"]) .directory-card.primary { background: linear-gradient(180deg, rgba(58,194,138,.14) 0%, rgba(31,140,90,.04) 100%); border-color: rgba(58, 194, 138, 0.5); } html:not([data-theme="light"]) .directory-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .directory-card p { color: #b3c2bb; } /* Trust/legal pages — content cards */ html:not([data-theme="light"]) .content-card, html:not([data-theme="light"]) .side-card { background: #0e211b; border-color: rgba(255, 255, 255, 0.07); } html:not([data-theme="light"]) .content-card p, html:not([data-theme="light"]) .content-card li { color: #b3c2bb; } html:not([data-theme="light"]) .content-card h2, html:not([data-theme="light"]) .content-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .content-card a { color: #7fd5a8; } html:not([data-theme="light"]) .side-card h3 { color: #f3fbf6; } html:not([data-theme="light"]) .side-card p { color: #8ea59a; } html:not([data-theme="light"]) .side-card a { color: #7fd5a8; } html:not([data-theme="light"]) .form-row label { color: #f3fbf6; } html:not([data-theme="light"]) .form-row input, html:not([data-theme="light"]) .form-row textarea, html:not([data-theme="light"]) .form-row select { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); color: #f3fbf6; } html:not([data-theme="light"]) .form-row input::placeholder, html:not([data-theme="light"]) .form-row textarea::placeholder { color: #7a8a82; } html:not([data-theme="light"]) .form-row input:focus, html:not([data-theme="light"]) .form-row textarea:focus, html:not([data-theme="light"]) .form-row select:focus { border-color: #3ac28a; box-shadow: 0 0 0 3px rgba(58, 194, 138, 0.22); } html:not([data-theme="light"]) .form-note { color: #7a8a82; } html:not([data-theme="light"]) .status-box.success { background: rgba(58, 194, 138, 0.1); border-color: rgba(58, 194, 138, 0.35); color: #7fd5a8; } /* ----- 4. Tool pages — conservative dark surfaces only ----- */ /* Tool pages have their own elaborate stylesheets with hardcoded light backgrounds. We darken the *page chrome* (body, sticky header, footer) but leave calculator forms / hero cards / tool sections in their original light color so forms and JS aren't visually broken. Page is identified by .tool-page class on body. */ html:not([data-theme="light"]) body.tool-page { background: #0b1f1a; color: #d7e2dc; } html:not([data-theme="light"]) body.tool-page .site-header { background: rgba(11, 31, 26, 0.9) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: saturate(160%) blur(10px); } html:not([data-theme="light"]) body.tool-page .site-header .brand, html:not([data-theme="light"]) body.tool-page .site-header .brand-mark, html:not([data-theme="light"]) body.tool-page .site-header .brand small, html:not([data-theme="light"]) body.tool-page .site-header nav, html:not([data-theme="light"]) body.tool-page .site-header nav a { color: #d7e2dc; } html:not([data-theme="light"]) body.tool-page .site-header .brand-mark { color: #7fd5a8; } html:not([data-theme="light"]) body.tool-page .site-footer { background: #091814 !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; color: #b3c2bb !important; } html:not([data-theme="light"]) body.tool-page .site-footer a { color: #7fd5a8; }