/* ============================================ Zomg Theme System — Dark (default) + Light ============================================ Toggle: activates light mode. Default: dark mode (no attribute needed). ============================================ */ :root { --gold: #fbbc04; --gold-dark: #e5a800; } /* DARK MODE (default) — these match the 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 overrides */ html[data-theme="light"] { --bg-body: #f5f8fa; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-glass: #ffffff; --bg-nav: rgba(255, 255, 255, 0.95); --text-main: #0a2a30; --text-muted: rgba(10, 42, 48, 0.78); --text-subtle: rgba(10, 42, 48, 0.55); --border-soft: rgba(10, 42, 48, 0.08); --border-medium: rgba(10, 42, 48, 0.15); --gradient-hero: linear-gradient(135deg, #f5f8fa 0%, #e8eef2 25%, #d8e3ea 50%, #cad8e1 75%, #e8eef2 100%); --shadow-card: 0 4px 12px rgba(10, 42, 48, 0.1); --logo-text: #0a2a30; } /* ============================================ Light-mode global overrides These apply when html has data-theme="light" Uses high specificity to override inline styles. ============================================ */ html[data-theme="light"] body { background: var(--bg-body) !important; color: var(--text-main); } /* Body backgrounds & gradients */ html[data-theme="light"] body, html[data-theme="light"] .container { background-attachment: fixed; } /* Override the main page gradient backgrounds */ html[data-theme="light"] body[style*="background"], html[data-theme="light"] .hero, html[data-theme="light"] section[style*="gradient"] { background: var(--bg-body) !important; } /* Headings */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: var(--text-main); } /* Body text */ html[data-theme="light"] p, html[data-theme="light"] li { color: var(--text-muted); } html[data-theme="light"] strong { color: var(--text-main); } /* Nav */ html[data-theme="light"] nav { background: var(--bg-nav) !important; border-bottom: 1px solid var(--border-soft); } html[data-theme="light"] .nav-logo, html[data-theme="light"] .nav-logo span { color: var(--logo-text) !important; } html[data-theme="light"] .nav-links a { color: var(--text-muted); } html[data-theme="light"] .nav-links a:hover { color: var(--gold); } html[data-theme="light"] .hamburger span { background: var(--text-main); } /* Mobile menu when open */ html[data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.98) !important; } @media(max-width:768px) { html[data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.98) !important; } /* Make mobile menu scroll if too long */ .nav-links.active { max-height: calc(100vh - 64px); overflow-y: auto; padding-bottom: 30px !important; } } /* Hero & sections with strong gradients */ html[data-theme="light"] .hero, html[data-theme="light"] .article-hero, html[data-theme="light"] section[class*="hero"] { background: var(--gradient-hero) !important; color: var(--text-main); } html[data-theme="light"] .hero h1, html[data-theme="light"] .article-hero h1, html[data-theme="light"] .hero p, html[data-theme="light"] .article-hero p, html[data-theme="light"] .article-hero .meta, html[data-theme="light"] .article-hero .breadcrumb { color: var(--text-main) !important; } html[data-theme="light"] .article-hero .breadcrumb a, html[data-theme="light"] .breadcrumb a { color: var(--text-muted) !important; } /* Glass / card containers */ html[data-theme="light"] .glass, html[data-theme="light"] .stat, html[data-theme="light"] .tldr { background: var(--bg-card) !important; border-color: var(--border-soft) !important; color: var(--text-main); box-shadow: var(--shadow-card); } html[data-theme="light"] .tldr { background: rgba(251, 188, 4, 0.08) !important; color: var(--text-main); } html[data-theme="light"] .tldr p { color: var(--text-main); } /* Content article body */ html[data-theme="light"] .content { background: var(--bg-body); } html[data-theme="light"] .content p, html[data-theme="light"] .content li, html[data-theme="light"] .content ul, html[data-theme="light"] .content ol { color: var(--text-muted) !important; } html[data-theme="light"] .content h2, html[data-theme="light"] .content h3 { color: var(--text-main) !important; } html[data-theme="light"] .content h3 { color: var(--gold-dark) !important; } html[data-theme="light"] .content table { background: var(--bg-card); } html[data-theme="light"] .content th { background: rgba(251, 188, 4, 0.08) !important; color: var(--text-main); } html[data-theme="light"] .content td { border-bottom-color: var(--border-soft) !important; color: var(--text-muted); } html[data-theme="light"] .content blockquote { background: rgba(251, 188, 4, 0.08) !important; color: var(--text-main); } /* CTA box (yellow gradient — keep) */ html[data-theme="light"] .cta-box { background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important; color: #0a2a30 !important; } html[data-theme="light"] .cta-box h3, html[data-theme="light"] .cta-box p { color: #0a2a30 !important; } /* Amazon affiliate cards */ html[data-theme="light"] .amzn-card { background: var(--bg-card) !important; border-color: var(--border-medium) !important; box-shadow: var(--shadow-card); } html[data-theme="light"] .amzn-title { color: var(--text-main) !important; } html[data-theme="light"] .amzn-blurb { color: var(--text-muted) !important; } html[data-theme="light"] .amzn-disclosure { background: rgba(251, 188, 4, 0.06) !important; color: var(--text-muted); } html[data-theme="light"] .amzn-disclosure strong { color: var(--text-main); } /* FAQ section */ html[data-theme="light"] .faq-item { border-bottom-color: var(--border-soft) !important; } html[data-theme="light"] .faq-item p { color: var(--text-muted) !important; } /* Zomg enhanced components (cross-sell, see-also, sticky, book block) */ html[data-theme="light"] .zomg-trust { background: var(--bg-card) !important; border-color: var(--border-soft) !important; } html[data-theme="light"] .zomg-trust .ts { color: var(--text-main) !important; } html[data-theme="light"] .zomg-cross, html[data-theme="light"] .zomg-bookblock { background: var(--bg-elevated) !important; border-color: var(--border-medium) !important; box-shadow: var(--shadow-card); } html[data-theme="light"] .zomg-cross h2, html[data-theme="light"] .zomg-cross .sub, html[data-theme="light"] .zomg-bookblock-text { color: var(--text-main) !important; } html[data-theme="light"] .zomg-cross-item { background: var(--bg-body) !important; border-color: var(--border-soft) !important; } html[data-theme="light"] .zomg-cross-item .ti { color: var(--text-main) !important; } html[data-theme="light"] .zomg-cross-item .bl { color: var(--text-muted) !important; } html[data-theme="light"] .zomg-seealso { background: rgba(251, 188, 4, 0.06) !important; } html[data-theme="light"] .zomg-seealso ul li { color: var(--text-main) !important; } html[data-theme="light"] .zomg-related { background: var(--bg-card) !important; border-color: var(--border-soft) !important; box-shadow: var(--shadow-card); } html[data-theme="light"] .zomg-related ul li { color: var(--text-muted) !important; } /* Sticky bottom CTA */ html[data-theme="light"] .zomg-sticky { background: var(--bg-elevated) !important; border-top: 2px solid var(--gold); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); } html[data-theme="light"] .zomg-sticky-text { color: var(--text-main) !important; } html[data-theme="light"] .zomg-sticky-quote { background: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-medium) !important; } html[data-theme="light"] .zomg-sticky-close { color: var(--text-subtle) !important; } /* Hub page (blog index) */ html[data-theme="light"] .pick-card, html[data-theme="light"] .post-card { background: var(--bg-card) !important; border-color: var(--border-medium) !important; box-shadow: var(--shadow-card); } html[data-theme="light"] .pick-title, html[data-theme="light"] .post-card-title { color: var(--text-main) !important; } html[data-theme="light"] .pick-blurb { color: var(--text-muted) !important; } html[data-theme="light"] .cat-header h2 { color: var(--text-main) !important; } html[data-theme="light"] .cat-header-blurb { color: var(--text-muted) !important; } html[data-theme="light"] .show-more-btn { background: rgba(251, 188, 4, 0.08) !important; color: var(--gold-dark) !important; } html[data-theme="light"] .toc { background: var(--bg-card) !important; border-color: var(--border-soft) !important; } html[data-theme="light"] .toc-list a { color: var(--text-main) !important; background: var(--bg-elevated) !important; border-color: var(--border-soft) !important; } /* Footer */ html[data-theme="light"] footer { background: var(--bg-elevated) !important; border-top-color: var(--border-soft) !important; color: var(--text-subtle); } html[data-theme="light"] footer a { color: var(--text-muted) !important; } html[data-theme="light"] footer a:hover { color: var(--gold); } /* ============================================ Theme toggle button (works in both modes) ============================================ */ .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); } html[data-theme="light"] .theme-toggle { background: rgba(10, 42, 48, 0.04); border-color: rgba(10, 42, 48, 0.15); color: var(--text-main); } html[data-theme="light"] .theme-toggle:hover { background: rgba(251, 188, 4, 0.18); border-color: var(--gold); } /* Mobile placement of toggle */ @media(max-width: 768px) { .theme-toggle { width: 36px; height: 36px; font-size: 0.9rem; } } /* Smooth theme transitions */ html, body, nav, .glass, .stat, .pick-card, .post-card, .amzn-card, .zomg-cross, .zomg-bookblock, .zomg-related, .zomg-trust, .zomg-sticky, footer, .cat-tile { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }