/* ============================================================ Dark Mode Fix — v1.14.4 Forces dark variants on elements that don't pick up the [data-theme="dark"] cascade for whatever reason (specificity, inline styles, or transferred-bg quirks on ). ============================================================ */ /* ── Force the design tokens at html level (specificity nudge) ── */ html[data-theme="dark"] { --bg: #0E0E10 !important; --surface: #17181C !important; --surface-warm: #22242A !important; --text-primary: #F5F1E8 !important; --text-secondary: #D8D1C4 !important; --text-muted: #B5AE9F !important; --border: #36383F !important; } /* ── Body / canvas: hardcoded dark to bypass transferred-bg quirk ── */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #0E0E10 !important; color: #F5F1E8 !important; } /* ── Site header & footer ── */ html[data-theme="dark"] .site-header:not(.is-transparent) { background: #17181C !important; border-bottom-color: #36383F !important; box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important; } html[data-theme="dark"] .site-footer { background: #0E0E10 !important; color: #D8D1C4 !important; border-top-color: #36383F !important; } html[data-theme="dark"] .site-footer a:not(:hover) { color: #D8D1C4 !important; } html[data-theme="dark"] .footer-col-title, html[data-theme="dark"] .footer-copyright { color: #F5F1E8 !important; } html[data-theme="dark"] .footer-legal a { color: #B5AE9F !important; } /* ── Hero sections (about / contact / blog / generic page-hero) ── */ html[data-theme="dark"] .about-hero, html[data-theme="dark"] .contact-hero, html[data-theme="dark"] .page-hero, html[data-theme="dark"] .page-hero--blog, html[data-theme="dark"] .blog-hero { background: #17181C !important; border-bottom-color: #1E1E22 !important; } /* ── Section padding wrappers that use inline style="background:var(--bg)" or var(--surface-warm). The CSS variable resolves correctly but the inline declaration loses the cascade refresh on some browsers — pin them with stronger selectors. ── */ html[data-theme="dark"] section.section-padding[style*="--bg"], html[data-theme="dark"] section.section-padding[style*="var(--bg)"] { background: #0E0E10 !important; } html[data-theme="dark"] section.section-padding[style*="--surface-warm"], html[data-theme="dark"] section.section-padding[style*="var(--surface-warm)"] { background: #22242A !important; } html[data-theme="dark"] section.section-padding[style*="--surface"]:not([style*="warm"]) { background: #17181C !important; } /* Named sections ─────────────────────────────────────────────── */ html[data-theme="dark"] .testimonials-section, html[data-theme="dark"] .lead-capture-section, html[data-theme="dark"] .blog-main-section, html[data-theme="dark"] .contact-main-section { background: #0E0E10 !important; } html[data-theme="dark"] .process-cta-section { background: #22242A !important; border-top-color: #36383F !important; border-bottom-color: #36383F !important; } /* ── Catalog filter pills ── */ html[data-theme="dark"] .filter-cat-btn { background: #17181C !important; color: #B5AE9F !important; border-color: #36383F !important; } html[data-theme="dark"] .filter-cat-btn:hover, html[data-theme="dark"] .filter-cat-btn.active { background: #C8A96B !important; color: #0E0E10 !important; border-color: #C8A96B !important; } /* ── Pagination buttons (catalog + blog) ── */ html[data-theme="dark"] .pagination-btn, html[data-theme="dark"] .blog-pagination a, html[data-theme="dark"] .blog-pagination .page-numbers { background: #17181C !important; color: #D8D1C4 !important; border-color: #36383F !important; } html[data-theme="dark"] .pagination-btn.active, html[data-theme="dark"] .blog-pagination .current { background: #C8A96B !important; color: #0E0E10 !important; border-color: #C8A96B !important; } /* ── Cards / catalog items ── */ html[data-theme="dark"] .catalog-card, html[data-theme="dark"] .blog-card, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .testimonial, html[data-theme="dark"] .feature-card { background: #17181C !important; border-color: #36383F !important; color: #F5F1E8 !important; } /* ── Form inputs ── */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input:not([type]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #17181C !important; color: #F5F1E8 !important; border-color: #36383F !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #B5AE9F !important; opacity: 0.7; } /* ── Header inner wrappers that may have hardcoded white ── */ html[data-theme="dark"] .nav-inner, html[data-theme="dark"] .category-strip-outer, html[data-theme="dark"] .header-inner { background: transparent !important; } /* ── Mobile menu overlay ── */ html[data-theme="dark"] #mobile-menu .mobile-menu-inner { background: #17181C !important; color: #F5F1E8 !important; } /* ── Utility: any element with style="background:#fff" or white ── */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background:#FFFFFF"], html[data-theme="dark"] [style*="background-color:#FFFFFF"] { background: #17181C !important; }