/* ============================================================ SITE-WIDE DARK THEME OVERRIDE — theme-dark.css Applied to ALL pages when . Works by re-defining the CSS custom properties the whole stylesheet is built on, then patching hard-coded colours. ============================================================ */ html.theme-dark { --green: #00c46c; --green-light: rgba(0,196,108,0.14); --green-dark: #00a85a; --navy: #1b2a7a; --navy-light: rgba(255,255,255,0.055); --text: #edeef4; --text-2: rgba(237,238,244,0.62); --text-3: rgba(237,238,244,0.34); --border: rgba(255,255,255,0.09); --bg: #070a10; --white: #10141e; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 6px 22px rgba(0,0,0,.45); --shadow-lg: 0 18px 48px rgba(0,0,0,.6); } html.theme-dark body { background: var(--bg); color: var(--text); } /* ── Logo: invert dark logo to white on dark surfaces ── */ html.theme-dark .logo-img, html.theme-dark .footer-logo img, html.theme-dark .footer-brand img { filter: brightness(0) invert(1); } /* ── Topbar & header ── */ html.theme-dark .topbar { background: #0a0e16; border-bottom-color: var(--border); } html.theme-dark .site-header { background: rgba(12,16,26,0.92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } html.theme-dark .site-header.scrolled { background: rgba(9,12,20,0.96); } html.theme-dark .main-nav > ul > li > a { color: rgba(255,255,255,0.82); } html.theme-dark .main-nav > ul > li > a:hover { color: #fff; } /* ── Mega menu (dark glass) ── */ html.theme-dark .mega-menu { background: rgba(14,18,28,0.98); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,0.6); } html.theme-dark .mega-col a { color: rgba(255,255,255,0.55); } html.theme-dark .mega-col a:hover { color: #fff; } html.theme-dark .mega-title { color: var(--green); } /* ── Search bar ── */ html.theme-dark .search-bar { background: #0a0e16; border-bottom-color: var(--border); } html.theme-dark .search-bar input { background: var(--white); color: var(--text); border-color: var(--border); } /* ── Breadcrumb ── */ html.theme-dark .breadcrumb-bar { background: #0a0e16; border-bottom: 1px solid var(--border); } html.theme-dark .bc-current { color: var(--text-2); } /* ── Generic sections ── */ html.theme-dark .section, html.theme-dark .categories-section, html.theme-dark .featured-section { background: var(--bg); } html.theme-dark .page-hero { background: linear-gradient(180deg, #0b0f18 0%, #070a10 100%); border-bottom: 1px solid var(--border); } /* ── Hard-coded white surfaces → dark cards ── */ html.theme-dark .highlight-img-card, html.theme-dark .office-card, html.theme-dark .contact-info-card, html.theme-dark .distributor-card, html.theme-dark .spec-card, html.theme-dark .product-card, html.theme-dark .product-detail-card { background: var(--white); border-color: var(--border); } /* ── Forms ── */ html.theme-dark input, html.theme-dark textarea, html.theme-dark select, html.theme-dark .form-control, html.theme-dark .contact-form input, html.theme-dark .contact-form textarea { background: #0c1019 !important; color: var(--text) !important; border-color: var(--border) !important; } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--text-3); } /* ── Image panels: keep light so product photos stay clean ── */ html.theme-dark .product-img, html.theme-dark .product-img-link, html.theme-dark .product-gallery-main, html.theme-dark .product-gallery-thumb, html.theme-dark .about-img-wrap img, html.theme-dark .hero-product-frame img { background: #f4f5f8; } /* Brand pills: white panel so logos read */ html.theme-dark .brand-item { background: #fff; border-color: var(--border); } html.theme-dark .brand-item img { filter: grayscale(100%); opacity: 0.8; } html.theme-dark .brand-item:hover img { filter: none; opacity: 1; } html.theme-dark .brand-name-only { color: var(--navy); } /* ── Sub-category chips ── */ html.theme-dark .sub-cat-card { background: var(--white); border-color: var(--border); color: var(--text-2); } html.theme-dark .sub-cat-card:hover, html.theme-dark .sub-cat-card.active { background: var(--green-light); border-color: var(--green); color: var(--green); } /* ── Stats bar ── */ html.theme-dark .stats-bar { background: #0a0e16; border-color: var(--border); } html.theme-dark .stat-item strong { color: #fff; } /* ── Pro category cards (light-homepage component, if shown) ── */ html.theme-dark .cat-pro { background: var(--white); border-color: var(--border); } html.theme-dark .cat-pro-body h3 { color: #fff; } html.theme-dark .cat-pro-tag { background: rgba(255,255,255,0.05); border-color: var(--border); } html.theme-dark .cat-pro-arrow { background: rgba(255,255,255,0.06); } /* ── Highlight strip already dark; ensure text ── */ html.theme-dark .highlight-strip { background: linear-gradient(135deg, #0c1018 0%, #0a0e16 100%); } html.theme-dark .highlight-icon-card { background: var(--white); border-color: var(--border); } html.theme-dark .highlight-icon-card strong { color: #fff; } /* ── Theme toggle button ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: transparent; border: 1px solid var(--border); color: var(--text-2); cursor: pointer; transition: all var(--transition); flex-shrink: 0; } .theme-toggle:hover { color: var(--green); border-color: var(--green); } html.theme-dark .theme-toggle { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.7); } /* Show correct icon per theme */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } html.theme-dark .theme-toggle .icon-moon { display: none; } html.theme-dark .theme-toggle .icon-sun { display: block; } /* ── Cookie banner dark ── */ html.theme-dark .cookie-banner { background: #0c1019; border-top-color: var(--border); } html.theme-dark .cookie-text { color: var(--text-2); } html.theme-dark .btn-cookie-decline { border-color: var(--border); color: var(--text-2); }