/* ===== DARK MODE ===== */ /* Applied via data-theme="dark" on element. Preference is stored in localStorage under key "theme". */ [data-theme="dark"] { --off-white: #0d2038; --white: #0a1929; --gray-100: rgba(255,255,255,0.08); --gray-600: rgba(255,255,255,0.55); --text-dark: #e8f0f8; /* Flip navy so color: var(--navy) text becomes readable on dark backgrounds */ --navy: #e8f0f8; } /* ===== DARK TOGGLE BUTTON ===== */ .dark-toggle { background: none; border: none; cursor: pointer; padding: 8px; color: var(--gray-600); display: flex; align-items: center; transition: color 0.2s; flex-shrink: 0; } .dark-toggle:hover { color: var(--teal); } [data-theme="dark"] .dark-toggle { color: rgba(255,255,255,0.45); } [data-theme="dark"] .dark-toggle:hover { color: var(--teal-light); } .dark-toggle .icon-sun { display: none; } .dark-toggle .icon-moon { display: block; } [data-theme="dark"] .dark-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-toggle .icon-moon { display: none; } /* ===== GLOBAL TEXT ===== */ /* section-title uses --navy as text color; override for dark mode */ [data-theme="dark"] .section-title, [data-theme="dark"] .btn-outline-dark { color: #e8f0f8; } [data-theme="dark"] .btn-outline-dark { border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .btn-outline-dark:hover { border-color: var(--teal); color: var(--teal-light); } /* ===== NAV (non-scrolled state) ===== */ [data-theme="dark"] .nav:not(.scrolled) { background: rgba(8,20,38,0.95); border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.6); } [data-theme="dark"] .nav:not(.scrolled) .nav-links a:hover, [data-theme="dark"] .nav:not(.scrolled) .nav-links a.active { color: white; } /* ===== RESTORE INTENTIONALLY-DARK NAVY BACKGROUNDS ===== */ /* These elements use background: var(--navy) and should stay dark in dark mode */ [data-theme="dark"] .stats-section { background: #0A2540; } [data-theme="dark"] .marquee-section { background: #0A2540; } [data-theme="dark"] .benefits-bar { background: #0A2540; } [data-theme="dark"] .product-tag { background: #0A2540; color: white; } [data-theme="dark"] .comparison-table thead th { background: #0A2540; color: white; } [data-theme="dark"] .video-placeholder { background: linear-gradient(135deg, #0A2540 0%, #1a3a5c 100%); } [data-theme="dark"] .form-group select option { background: #0d2038; color: #e8f0f8; } /* ===== SECTION BACKGROUNDS (hardcoded white → dark) ===== */ [data-theme="dark"] .factory-section, [data-theme="dark"] .timeline-section, [data-theme="dark"] .product-specs, [data-theme="dark"] .product-nav, [data-theme="dark"] .product-related, [data-theme="dark"] .products-section, [data-theme="dark"] .guides-section, [data-theme="dark"] .case-studies, [data-theme="dark"] .map-section { background: #0a1929; } /* ===== CARD & CONTAINER BACKGROUNDS ===== */ [data-theme="dark"] .value-card, [data-theme="dark"] .product-card, [data-theme="dark"] .specs-card, [data-theme="dark"] .product-nav-link, [data-theme="dark"] .product-bag, [data-theme="dark"] .guide-card, [data-theme="dark"] .case-study-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .project-card-expanded, [data-theme="dark"] .faq-item, [data-theme="dark"] .hours-card, [data-theme="dark"] .address-card, [data-theme="dark"] .about-floating-card, [data-theme="dark"] .hero-card { background: #0d2038; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .app-item, [data-theme="dark"] .about-feature, [data-theme="dark"] .factory-highlight, [data-theme="dark"] .packaging-option, [data-theme="dark"] .product-cert, [data-theme="dark"] .related-card, [data-theme="dark"] .product-detail-tags span, [data-theme="dark"] .project-meta-tags span { background: #0a1929; border-color: rgba(255,255,255,0.08); } /* ===== TEXT ===== */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] .spec-label, [data-theme="dark"] .product-nav-name, [data-theme="dark"] .faq-question span, [data-theme="dark"] .related-card h3, [data-theme="dark"] .product-detail-body h2, [data-theme="dark"] .app-item span, [data-theme="dark"] .about-feature, [data-theme="dark"] .factory-highlight, [data-theme="dark"] .address-card h3, [data-theme="dark"] .address-item-text strong, [data-theme="dark"] .hours-card h3, [data-theme="dark"] .guide-card h3, [data-theme="dark"] .project-card-expanded h3, [data-theme="dark"] .case-study-card h3, [data-theme="dark"] .testimonial-info h4, [data-theme="dark"] .packaging-option, [data-theme="dark"] .product-cert, [data-theme="dark"] .about-floating-card .number, [data-theme="dark"] .hero-stat-info h4 { color: #e8f0f8; } [data-theme="dark"] .about-floating-card .label { color: rgba(255,255,255,0.55); } [data-theme="dark"] .case-study-item strong { color: rgba(255,255,255,0.75); } /* ===== COMPARISON TABLE ===== */ [data-theme="dark"] .comparison-table { background: #0d2038; } [data-theme="dark"] .comparison-table tbody td { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .comparison-table tbody td:first-child { color: #e8f0f8; } [data-theme="dark"] .comparison-table tbody tr:hover { background: #0a1929; } [data-theme="dark"] .comparison-table-wrapper { border-color: rgba(255,255,255,0.08); } /* ===== SPECS TABLE (product pages) ===== */ [data-theme="dark"] .specs-table td { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .specs-table td:first-child { color: #e8f0f8; } [data-theme="dark"] .specs-table th { border-color: rgba(255,255,255,0.06); } /* ===== PRODUCT DETAIL SECTIONS (products.html) ===== */ [data-theme="dark"] .product-detail:nth-child(odd) { background: var(--off-white); } [data-theme="dark"] .product-detail:nth-child(even) { background: #0a1929; } [data-theme="dark"] .product-detail + .comparison-section { background: var(--off-white); } [data-theme="dark"] .comparison-section + .guides-section { background: #0a1929; } /* ===== CERTS & WHY CARDS (shared.css white bg) ===== */ [data-theme="dark"] .certs-section { background: #0a1929; } [data-theme="dark"] .why-card, [data-theme="dark"] .project-card { background: #0d2038; border-color: rgba(255,255,255,0.08); } /* ===== FORMS ===== */ [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .form-group select { background: #0d2038; border-color: rgba(255,255,255,0.12); color: #e8f0f8; } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: rgba(255,255,255,0.35); } /* ===== NAV SCROLLED STATE ===== */ [data-theme="dark"] .nav.scrolled { background: rgba(10,25,41,0.98); border-bottom-color: rgba(255,255,255,0.06); } /* ===== FOOTER ===== */ [data-theme="dark"] .footer { background: #060f1a; }