/* ============================================================================ HSNexus Theme System — CSS Custom Properties Light mode = default. Dark mode = .dark class on . Strategy: CSS-variable layer that overrides key surfaces without touching every Tailwind utility in the 3,400-line app.jsx monolith. ============================================================================ */ /* ── Light Mode (Default) ──────────────────────────────────────────────────── */ :root { --hs-bg-page: #F2F2F0; --hs-bg-surface: #FFFFFF; --hs-bg-surface-alt: #F8FAFC; --hs-bg-header: var(--hs-header-brand, #2D3436); --hs-bg-footer: #2D3436; --hs-bg-card: rgba(255,255,255,0.3); --hs-bg-card-content:rgba(255,255,255,0.4); --hs-bg-input: #FFFFFF; --hs-bg-modal: #FFFFFF; --hs-bg-modal-overlay: rgba(45,52,54,0.5); --hs-bg-cookie: #FFFFFF; --hs-bg-toast: #2D3436; --hs-text-primary: #2D3436; --hs-text-secondary: #64748B; --hs-text-muted: #94A3B8; --hs-text-on-header: #FFFFFF; --hs-text-on-footer: #FFFFFF; --hs-border: #E2E8F0; --hs-border-light: rgba(255,255,255,0.4); --hs-border-card: rgba(255,255,255,0.4); --hs-accent: #1A4D2E; --hs-accent-hover: #143d23; --hs-action: #DFFF00; --hs-action-text: #2D3436; --hs-shadow-card: 0 1px 3px rgba(0,0,0,0.06); --hs-shadow-card-hover: 0 20px 25px -5px rgba(0,0,0,0.1); /* Scrollbar */ --hs-scrollbar-thumb: #BEC2C5; --hs-scrollbar-hover: #2D3436; /* Mobile search overlay */ --hs-mobile-search-bg: #F2F2F0; /* Route transition overlay */ --hs-route-overlay: rgba(242,242,240,0.92); /* Cookie consent specific */ --hs-cookie-text: #2D3436; --hs-cookie-muted: #64748B; --hs-cookie-btn-outline: #2D3436; --hs-cookie-btn-fill: #1A4D2E; color-scheme: light; } /* ── Dark Mode ─────────────────────────────────────────────────────────────── */ html.dark { --hs-bg-page: #0F172A; --hs-bg-surface: #1E293B; --hs-bg-surface-alt: #1E293B; --hs-bg-header: var(--hs-header-brand, #0F172A); --hs-bg-footer: #0F172A; --hs-bg-card: rgba(30,41,59,0.6); --hs-bg-card-content:rgba(30,41,59,0.7); --hs-bg-input: #1E293B; --hs-bg-modal: #1E293B; --hs-bg-modal-overlay: rgba(0,0,0,0.7); --hs-bg-cookie: #1E293B; --hs-bg-toast: #1E293B; --hs-text-primary: #F1F5F9; --hs-text-secondary: #94A3B8; --hs-text-muted: #64748B; --hs-text-on-header: #FFFFFF; --hs-text-on-footer: #F1F5F9; --hs-border: #334155; --hs-border-light: rgba(255,255,255,0.1); --hs-border-card: rgba(255,255,255,0.1); --hs-accent: #34D399; --hs-accent-hover: #6EE7B7; --hs-action: #DFFF00; --hs-action-text: #2D3436; --hs-shadow-card: 0 1px 3px rgba(0,0,0,0.3); --hs-shadow-card-hover: 0 20px 25px -5px rgba(0,0,0,0.4); --hs-scrollbar-thumb: #475569; --hs-scrollbar-hover: #94A3B8; --hs-mobile-search-bg: #0F172A; --hs-route-overlay: rgba(15,23,42,0.92); --hs-cookie-text: #F1F5F9; --hs-cookie-muted: #94A3B8; --hs-cookie-btn-outline: #94A3B8; --hs-cookie-btn-fill: #1A4D2E; color-scheme: dark; } /* ── Applied Overrides ─────────────────────────────────────────────────────── */ /* Body / Page */ body { background-color: var(--hs-bg-page) !important; color: var(--hs-text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Scrollbar */ ::-webkit-scrollbar-thumb { background: var(--hs-scrollbar-thumb) !important; } ::-webkit-scrollbar-thumb:hover { background: var(--hs-scrollbar-hover) !important; } /* ── DARK MODE: Product Cards ──────────────────────────────────────────────── */ html.dark .product-card-inner { background: var(--hs-bg-card) !important; border-color: var(--hs-border-card) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html.dark .product-card-inner h3, html.dark .product-card-inner .font-heading { color: var(--hs-text-primary) !important; } html.dark .product-card-inner > div:last-child { background: var(--hs-bg-card-content) !important; } html.dark .product-card-inner .text-gray-500, html.dark .product-card-inner .text-gray-400 { color: var(--hs-text-muted) !important; } /* ── DARK MODE: Footer ─────────────────────────────────────────────────────── */ html.dark footer { background-color: var(--hs-bg-footer) !important; } /* ── DARK MODE: Modals (contact, policy, vision) ───────────────────────────── */ html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-3xl { background-color: var(--hs-bg-modal) !important; color: var(--hs-text-primary) !important; } /* ── DARK MODE: Search dropdown ────────────────────────────────────────────── */ html.dark .bg-white.rounded-xl.shadow-xl.overflow-hidden { background-color: var(--hs-bg-surface) !important; } /* ── DARK MODE: Featured Section cards ─────────────────────────────────────── */ html.dark .bg-white.rounded-3xl.shadow-sm { background-color: var(--hs-bg-surface) !important; border-color: var(--hs-border) !important; } /* ── DARK MODE: Text color overrides for non-hero areas ────────────────────── */ html.dark .text-\[\#2D3436\] { color: var(--hs-text-primary) !important; } html.dark .text-gray-500 { color: var(--hs-text-secondary) !important; } html.dark .text-gray-400 { color: var(--hs-text-muted) !important; } html.dark .text-gray-600 { color: var(--hs-text-secondary) !important; } html.dark .text-gray-700 { color: var(--hs-text-secondary) !important; } /* ── DARK MODE: bg-gray surfaces ───────────────────────────────────────────── */ html.dark .bg-gray-50 { background-color: rgba(30,41,59,0.5) !important; } html.dark .bg-gray-100 { background-color: rgba(30,41,59,0.7) !important; } html.dark .border-gray-100, html.dark .border-gray-200 { border-color: var(--hs-border) !important; } /* ── DARK MODE: Cookie consent banner ──────────────────────────────────────── */ html.dark .hs-cookie-banner { background-color: var(--hs-bg-cookie) !important; color: var(--hs-cookie-text) !important; border-color: var(--hs-border) !important; } /* ── DARK MODE: Mobile search overlay ──────────────────────────────────────── */ html.dark .bg-\[\#F2F2F0\] { background-color: var(--hs-bg-page) !important; } /* Featured section heading */ html.dark #featured-section h3 { color: var(--hs-text-primary) !important; } /* ── DARK MODE: Input fields ───────────────────────────────────────────────── */ html.dark input.bg-white, html.dark input[type="search"].bg-white { background-color: var(--hs-bg-input) !important; color: var(--hs-text-primary) !important; border-color: var(--hs-border) !important; } /* ── Protect hero banners from dark mode interference ──────────────────────── */ /* Hero banners keep their dark cinematic overlay in all modes */ html.dark .min-h-\[80vh\] .text-white, html.dark .min-h-\[80vh\] .bg-white\/10 { /* Do not override hero banner elements */ color: inherit; } /* ── DARK MODE: Brand hub cards ────────────────────────────────────────────── */ html.dark .bg-\[\#F2F2F0\] { background-color: var(--hs-bg-page) !important; } /* ── DARK MODE: Product Detail drawer ──────────────────────────────────────── */ html.dark .bg-\[\#F2F2F0\]\/95 { background-color: rgba(15,23,42,0.95) !important; } /* ── DARK MODE: Accordion items ────────────────────────────────────────────── */ html.dark .border-gray-200 { border-color: var(--hs-border) !important; } /* ── DARK MODE: Route transition overlay ───────────────────────────────────── */ html.dark .bg-\[\#F2F2F0\]\/92 { background-color: var(--hs-route-overlay) !important; } /* ── Theme Toggle Component ────────────────────────────────────────────────── */ .hs-theme-toggle { position: relative; } .hs-theme-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; border-radius: 12px; overflow: hidden; z-index: 100; background: var(--hs-bg-surface); border: 1px solid var(--hs-border); box-shadow: 0 10px 25px rgba(0,0,0,0.15); animation: fadeInDown 0.15s ease-out; } .hs-theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: transparent; color: var(--hs-text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; font-family: 'Inter', sans-serif; } .hs-theme-option:hover { background: var(--hs-bg-surface-alt); } .hs-theme-option.active { color: var(--hs-accent); } .hs-theme-option .check { margin-left: auto; opacity: 0; font-size: 14px; transition: opacity 0.15s; } .hs-theme-option.active .check { opacity: 1; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Smooth transitions on theme switch ────────────────────────────────────── */ html.hs-theme-transitioning, html.hs-theme-transitioning *, html.hs-theme-transitioning *::before, html.hs-theme-transitioning *::after { transition: background-color 0.35s ease, color 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }