/* ============================================ Zomg Theme System v3 — Maximum Readability Light Mode ============================================ Toggle: activates light mode. v3: NUCLEAR text-color override to defeat all inline styles. ============================================ */ :root { --gold: #fbbc04; --gold-dark: #e5a800; } /* DARK MODE (default — current site) */ :root { --bg-body: #0a2a30; --bg-elevated: #0f3a44; --bg-card: rgba(255, 255, 255, 0.04); --bg-glass: rgba(255, 255, 255, 0.06); --bg-nav: rgba(10, 58, 68, 0.95); --text-main: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --text-subtle: rgba(255, 255, 255, 0.55); --border-soft: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.15); --gradient-hero: linear-gradient(135deg, #0a3a44 0%, #0f4f5c 25%, #145968 50%, #1a6b7d 75%, #0f4f5c 100%); --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.25); --logo-text: #ffffff; } /* LIGHT MODE */ html[data-theme="light"] { --bg-body: #f7fafb; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-glass: #ffffff; --bg-nav: rgba(255, 255, 255, 0.97); --text-main: #0a2a30; --text-muted: #2a4a52; --text-subtle: #5a7682; --border-soft: rgba(10, 42, 48, 0.08); --border-medium: rgba(10, 42, 48, 0.14); --gradient-hero: linear-gradient(135deg, #ffffff 0%, #eef5f8 25%, #dde8ee 50%, #cddee5 75%, #eef5f8 100%); --shadow-card: 0 2px 8px rgba(10, 42, 48, 0.06), 0 8px 24px rgba(10, 42, 48, 0.04); --logo-text: #0a2a30; } /* ============================================ NUCLEAR TEXT OVERRIDE — defeats inline styles Forces every text element to dark color in light mode, except buttons and badges that need to keep their colors. ============================================ */ html[data-theme="light"] body, html[data-theme="light"] body *:not(.nav-cta):not(.nav-cta *):not(.cta-box):not(.cta-box *):not(.btn-gold):not(.btn-gold *):not(.btn-primary):not(.btn-primary *):not(.amzn-cta):not(.amzn-rank):not(.amzn-label):not(.cat-tile):not(.cat-tile *):not(.cat-tile-emoji):not(.cat-tile-name):not(.cat-tile-count):not(.pick-emoji):not(.pick-visual):not(.pick-visual *):not(.post-card-vis):not(.post-card-vis *):not(.amzn-card-img):not(.amzn-card-img *):not(.amzn-card-img-emoji):not(.theme-toggle):not(.show-more-btn):not(.zomg-book-primary):not(.zomg-sticky-book):not(.zomg-trust .ts .v):not(.faq-item h3):not(.tldr strong):not(.amzn-disclosure strong):not(.zomg-cross-item a):not(.amzn-inline):not(.area-svc-block h4):not(.zomg-seealso strong):not(.zomg-related h3):not(.cat-header-count):not(.toc-title):not(.hero-stat-num):not(.stat-value):not(.stat-value.gold):not([class*="gold"]):not(.highlight) { color: var(--text-main) !important; } /* Muted text for body copy, labels, descriptions */ html[data-theme="light"] body p, html[data-theme="light"] body li, html[data-theme="light"] body td, html[data-theme="light"] body small, html[data-theme="light"] body .meta, html[data-theme="light"] body .breadcrumb, html[data-theme="light"] body .stat-label, html[data-theme="light"] body .pick-blurb, html[data-theme="light"] body .amzn-blurb, html[data-theme="light"] body .zomg-cross-item .bl, html[data-theme="light"] body .zomg-cross .sub, html[data-theme="light"] body .zomg-bookblock-text span, html[data-theme="light"] body .cat-header-blurb, html[data-theme="light"] body .faq-item p, html[data-theme="light"] body .hero-subtitle, html[data-theme="light"] body .hero-stat-label, html[data-theme="light"] body .amzn-card-count, html[data-theme="light"] body .hub-card-count { color: var(--text-muted) !important; } /* Headings — strong dark color */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: var(--text-main) !important; } /* Strong/bold = full dark contrast */ html[data-theme="light"] body strong, html[data-theme="light"] body b { color: var(--text-main) !important; } /* Links default to gold-dark for contrast */ html[data-theme="light"] body a { color: var(--gold-dark) !important; } html[data-theme="light"] body a:hover { color: var(--gold) !important; } /* Gold-styled headlines stay gold */ html[data-theme="light"] body .gold, html[data-theme="light"] body [class*="gold-text"], html[data-theme="light"] body .highlight, html[data-theme="light"] body .stat-value.gold, html[data-theme="light"] body .stat-value, html[data-theme="light"] body .hero-stat-num, html[data-theme="light"] body .pick-cta, html[data-theme="light"] body .toc-title, html[data-theme="light"] body .cat-header-count, html[data-theme="light"] body .area-svc-block h4, html[data-theme="light"] body .zomg-trust .ts .v, html[data-theme="light"] body .zomg-seealso strong, html[data-theme="light"] body .zomg-related h3, html[data-theme="light"] body .faq-item h3, html[data-theme="light"] body .amzn-label, html[data-theme="light"] body .show-more-btn, html[data-theme="light"] body .hero-eyebrow { color: var(--gold-dark) !important; } /* ============================================ NUCLEAR BACKGROUND OVERRIDE Targets every common dark background pattern. ============================================ */ html[data-theme="light"], html[data-theme="light"] body { background: var(--bg-body) !important; background-attachment: scroll !important; background-image: none !important; } /* Override inline rgba dark backgrounds */ html[data-theme="light"] [style*="background:rgba(10,58,68"], html[data-theme="light"] [style*="background: rgba(10,58,68"], html[data-theme="light"] [style*="background:rgba(15,79,92"], html[data-theme="light"] [style*="background: rgba(15,79,92"], html[data-theme="light"] [style*="background:rgba(0,0,0"], html[data-theme="light"] [style*="background: rgba(0,0,0"], html[data-theme="light"] [style*="background:rgba(10,42,48"], html[data-theme="light"] [style*="background: rgba(10,42,48"], html[data-theme="light"] [style*="background:rgba(255,255,255,0.04"], html[data-theme="light"] [style*="background: rgba(255,255,255,0.04"], html[data-theme="light"] [style*="background:rgba(255,255,255,0.06"], html[data-theme="light"] [style*="background:rgba(255,255,255,0.08"], html[data-theme="light"] [style*="background:rgba(255,255,255,0.1"] { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-card) !important; } /* Override dark linear-gradient hero/section backgrounds */ html[data-theme="light"] [style*="linear-gradient(135deg, #0a"], html[data-theme="light"] [style*="linear-gradient(135deg,#0a"], html[data-theme="light"] [style*="linear-gradient(135deg, #0f"], html[data-theme="light"] [style*="linear-gradient(135deg,#0f"], html[data-theme="light"] [style*="linear-gradient(135deg, var(--primary)"], html[data-theme="light"] [style*="linear-gradient(135deg,var(--primary)"] { background: var(--gradient-hero) !important; color: var(--text-main) !important; } /* ============================================ NAV ============================================ */ html[data-theme="light"] nav, html[data-theme="light"] body > nav { background: var(--bg-nav) !important; border-bottom: 1px solid var(--border-soft) !important; box-shadow: 0 1px 3px rgba(10, 42, 48, 0.06) !important; backdrop-filter: blur(20px); } html[data-theme="light"] .nav-logo span, html[data-theme="light"] nav .nav-logo, html[data-theme="light"] nav .nav-logo span { color: var(--logo-text) !important; } html[data-theme="light"] .nav-links a, html[data-theme="light"] nav .nav-links a, html[data-theme="light"] nav .nav-links li a { color: var(--text-main) !important; } html[data-theme="light"] .nav-links a:hover { color: var(--gold-dark) !important; } html[data-theme="light"] .hamburger span { background: var(--text-main) !important; } /* Gold CTAs in nav stay yellow with dark text */ .nav-links .nav-cta, .nav-links .nav-gold, nav .nav-cta, nav .nav-gold { color: #0a2a30 !important; } /* Mobile menu — full visibility for all items including Blog */ @media(max-width: 768px) { html[data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.99) !important; } .nav-links.active { display: flex !important; flex-direction: column !important; max-height: calc(100vh - 80px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 20px 16px 40px 16px !important; gap: 14px !important; -webkit-overflow-scrolling: touch; } .nav-links.active li { width: 100%; list-style: none; margin: 0; } .nav-links.active a { display: block; width: 100%; padding: 10px 8px; font-size: 1rem; } .nav-links.active .nav-cta, .nav-links.active .nav-gold { text-align: center; padding: 12px 24px !important; } .nav-links.active .theme-toggle { margin: 4px auto; } } /* ============================================ HERO SECTIONS — light gradient + dark text ============================================ */ html[data-theme="light"] .hero, html[data-theme="light"] .article-hero, html[data-theme="light"] section.hero, html[data-theme="light"] section[class*="hero"]:not([class*="amzn"]), html[data-theme="light"] body > section:first-of-type { background: var(--gradient-hero) !important; color: var(--text-main) !important; } html[data-theme="light"] .hero h1, html[data-theme="light"] .hero p, html[data-theme="light"] .hero-subtitle, html[data-theme="light"] .hero-content, html[data-theme="light"] .hero-content *, html[data-theme="light"] .article-hero h1, html[data-theme="light"] .article-hero p, html[data-theme="light"] .article-hero .meta, html[data-theme="light"] .article-hero .breadcrumb, html[data-theme="light"] .article-hero .breadcrumb span, html[data-theme="light"] .hero-eyebrow { color: var(--text-main) !important; } html[data-theme="light"] .article-hero .breadcrumb a { color: var(--text-muted) !important; } html[data-theme="light"] .hero .highlight { color: var(--gold-dark) !important; } /* ============================================ GLASS / CARD CONTAINERS ============================================ */ html[data-theme="light"] .glass, html[data-theme="light"] .stat, html[data-theme="light"] .stat.glass, html[data-theme="light"] .tldr, html[data-theme="light"] [class*="glass"]:not(.theme-toggle) { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; color: var(--text-main) !important; box-shadow: var(--shadow-card) !important; backdrop-filter: none !important; } html[data-theme="light"] .stat-value, html[data-theme="light"] .stat-value.gold { color: var(--gold-dark) !important; } html[data-theme="light"] .stat-label { color: var(--text-muted) !important; } html[data-theme="light"] .tldr { background: rgba(251, 188, 4, 0.08) !important; border: 1px solid rgba(251, 188, 4, 0.25) !important; border-left: 4px solid var(--gold) !important; } /* ============================================ ARTICLE / BLOG CONTENT ============================================ */ html[data-theme="light"] .content, html[data-theme="light"] section.content, html[data-theme="light"] article { background: var(--bg-body) !important; color: var(--text-main) !important; } html[data-theme="light"] .content h3 { color: var(--gold-dark) !important; } /* Tables */ html[data-theme="light"] table { background: var(--bg-card) !important; color: var(--text-main) !important; border: 1px solid var(--border-soft) !important; } html[data-theme="light"] th { background: rgba(251, 188, 4, 0.1) !important; color: var(--text-main) !important; } html[data-theme="light"] td { border-bottom: 1px solid var(--border-soft) !important; color: var(--text-muted) !important; } html[data-theme="light"] blockquote { background: rgba(251, 188, 4, 0.08) !important; color: var(--text-main) !important; border-left-color: var(--gold) !important; } /* ============================================ CTA Boxes — keep yellow, dark text ============================================ */ .cta-box { /* yellow gradient stays */ } html[data-theme="light"] .cta-box { background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; } html[data-theme="light"] .cta-box, html[data-theme="light"] .cta-box h2, html[data-theme="light"] .cta-box h3, html[data-theme="light"] .cta-box p, html[data-theme="light"] .cta-box a { color: #0a2a30 !important; } /* ============================================ AMAZON AFFILIATE CARDS ============================================ */ html[data-theme="light"] .amzn-card { background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="light"] .amzn-label { background: rgba(251, 188, 4, 0.15) !important; color: var(--gold-dark) !important; } html[data-theme="light"] .amzn-cta, html[data-theme="light"] .amzn-rank { background: var(--gold) !important; color: #0a2a30 !important; } html[data-theme="light"] .amzn-disclosure { background: rgba(251, 188, 4, 0.06) !important; border-left-color: var(--gold) !important; color: var(--text-muted) !important; } html[data-theme="light"] .amzn-card-img { background: rgba(10, 42, 48, 0.04) !important; } html[data-theme="light"] .amzn-inline { color: var(--gold-dark) !important; text-decoration-color: rgba(229, 168, 0, 0.5) !important; } /* ============================================ ZOMG ENHANCED COMPONENTS ============================================ */ html[data-theme="light"] .zomg-trust { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="light"] .zomg-cross, html[data-theme="light"] .zomg-bookblock { background: linear-gradient(135deg, #ffffff, #f7fafb) !important; border: 1px solid var(--border-medium) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="light"] .zomg-cross-item { background: rgba(10, 42, 48, 0.03) !important; border: 1px solid var(--border-soft) !important; } html[data-theme="light"] .zomg-cross-item a { color: var(--gold-dark) !important; border-color: var(--gold-dark) !important; } html[data-theme="light"] .zomg-cross-item a:hover { background: var(--gold) !important; color: #0a2a30 !important; } html[data-theme="light"] .zomg-book-secondary { background: rgba(10, 42, 48, 0.05) !important; color: var(--text-main) !important; border-color: var(--border-medium) !important; } html[data-theme="light"] .zomg-seealso { background: rgba(251, 188, 4, 0.06) !important; border-left-color: var(--gold) !important; } html[data-theme="light"] .zomg-related { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-card) !important; } /* Sticky bottom CTA */ html[data-theme="light"] .zomg-sticky { background: #ffffff !important; border-top: 2px solid var(--gold) !important; box-shadow: 0 -8px 24px rgba(10, 42, 48, 0.1) !important; } html[data-theme="light"] .zomg-sticky-quote { background: rgba(10, 42, 48, 0.04) !important; border-color: var(--border-medium) !important; } /* ============================================ HUB / BLOG INDEX ============================================ */ html[data-theme="light"] .pick-card, html[data-theme="light"] .post-card { background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="light"] .toc { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; } html[data-theme="light"] .toc-list a { color: var(--text-main) !important; background: rgba(10, 42, 48, 0.04) !important; border: 1px solid var(--border-soft) !important; } html[data-theme="light"] .toc-list a:hover { background: var(--gold) !important; color: #0a2a30 !important; } html[data-theme="light"] .show-more-btn { background: rgba(251, 188, 4, 0.08) !important; color: var(--gold-dark) !important; border: 1px solid var(--gold) !important; } html[data-theme="light"] .show-more-btn:hover { background: var(--gold) !important; color: #0a2a30 !important; } html[data-theme="light"] .cat-header-count { background: rgba(251, 188, 4, 0.12) !important; color: var(--gold-dark) !important; border: 1px solid var(--gold) !important; } /* ============================================ HOMEPAGE-SPECIFIC SECTIONS ============================================ */ html[data-theme="light"] .zomg-areas, html[data-theme="light"] section.zomg-areas { background: rgba(10, 42, 48, 0.03) !important; } html[data-theme="light"] .area-svc-block { background: var(--bg-card) !important; border: 1px solid var(--border-medium) !important; box-shadow: var(--shadow-card) !important; } html[data-theme="light"] .area-svc-block a { color: var(--text-main) !important; } html[data-theme="light"] .area-svc-block a:hover { color: var(--gold-dark) !important; } html[data-theme="light"] .area-city-pill { background: var(--bg-card) !important; color: var(--text-main) !important; border: 1px solid var(--border-medium) !important; } html[data-theme="light"] .area-city-pill:hover { background: rgba(251, 188, 4, 0.12) !important; color: var(--gold-dark) !important; border-color: var(--gold) !important; } /* Local injected sections (Week 2 content depth) */ html[data-theme="light"] .local-trust { background: rgba(251, 188, 4, 0.06) !important; border-left: 4px solid var(--gold) !important; } /* ============================================ FOOTER ============================================ */ html[data-theme="light"] footer { background: #ffffff !important; border-top: 1px solid var(--border-soft) !important; box-shadow: 0 -1px 3px rgba(10, 42, 48, 0.04) !important; } /* ============================================ THEME TOGGLE BUTTON ============================================ */ .theme-toggle { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; transition: all 0.2s; padding: 0; } .theme-toggle:hover { background: rgba(251, 188, 4, 0.15); border-color: var(--gold); transform: scale(1.05); } html[data-theme="light"] .theme-toggle { background: rgba(10, 42, 48, 0.05) !important; border-color: rgba(10, 42, 48, 0.18) !important; color: var(--text-main) !important; } html[data-theme="light"] .theme-toggle:hover { background: rgba(251, 188, 4, 0.18) !important; border-color: var(--gold) !important; } @media(max-width: 768px) { .theme-toggle { width: 36px; height: 36px; font-size: 0.9rem; } } /* ============================================ SMOOTH TRANSITIONS ============================================ */ html, body, nav, .glass, .stat, .pick-card, .post-card, .amzn-card, .zomg-cross, .zomg-bookblock, .zomg-related, .zomg-trust, .zomg-sticky, footer, .area-svc-block, .area-city-pill, .toc, .tldr, table, th, td { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } html[data-theme="light"] a:focus-visible, html[data-theme="light"] button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }