/** * Rid'Air — Site-wide Dark Mode * Applied via [data-theme="dark"] on . * Token-driven, overrides Tailwind + M3 component classes. * Loaded in with anti-flash script for zero FOUC. */ /* ═══ DARK TOKENS ═══ */ [data-theme="dark"] { --dm-bg: #0a0f1a; --dm-bg2: #111827; --dm-bg3: #1a2236; --dm-bg4: #1e293b; --dm-fg: #f0f4f8; --dm-fg2: #cbd5e1; --dm-fg3: #94a3b8; --dm-fg4: #64748b; --dm-border: rgba(148,163,184,.12); --dm-border2: rgba(148,163,184,.18); --dm-primary: #19a4b0; --dm-accent: #FF6B35; /* Override M3 elevations for dark — lighter glow instead of shadow */ --m3-elevation-1: 0 1px 3px 1px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2); --m3-elevation-2: 0 2px 6px 2px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --m3-elevation-3: 0 4px 8px 3px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --m3-elevation-4: 0 6px 10px 4px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.25); --m3-elevation-5: 0 8px 12px 6px rgba(0,0,0,.35), 0 4px 4px rgba(0,0,0,.25); color-scheme: dark; } /* ═══ BODY / HTML ═══ */ [data-theme="dark"] body, [data-theme="dark"] body.bg-white, [data-theme="dark"] body.text-gray-900 { background: var(--dm-bg) !important; color: var(--dm-fg) !important; } /* ═══ HEADER ═══ */ [data-theme="dark"] #vue-header .bg-white, [data-theme="dark"] #siteHeader .bg-white { background: rgba(10,15,26,.88) !important; border-color: var(--dm-border) !important; backdrop-filter: blur(16px) saturate(1.5); } [data-theme="dark"] #vue-header .nav-link, [data-theme="dark"] #vue-header a, [data-theme="dark"] #vue-header .icon-btn, [data-theme="dark"] #vue-header button, [data-theme="dark"] #vue-header svg { color: var(--dm-fg3); } [data-theme="dark"] #vue-header .nav-link:hover, [data-theme="dark"] #vue-header a:hover, [data-theme="dark"] #vue-header button:hover { color: var(--dm-primary); } /* Logo inversion */ [data-theme="dark"] #vue-header img[alt="Rid'Air"] { filter: brightness(0) invert(1); } /* Dropdown panels & mobile menu */ [data-theme="dark"] #vue-header .border-gray-100, [data-theme="dark"] #vue-header .border-gray-200 { border-color: var(--dm-border) !important; } [data-theme="dark"] #vue-header .bg-gray-50, [data-theme="dark"] #vue-header .bg-gray-100, [data-theme="dark"] #vue-header .hover\:bg-gray-50:hover { background: var(--dm-bg3) !important; } [data-theme="dark"] #vue-header .shadow-xl, [data-theme="dark"] #vue-header .shadow-2xl { box-shadow: 0 20px 40px rgba(0,0,0,.5) !important; } [data-theme="dark"] #vue-header .text-gray-500, [data-theme="dark"] #vue-header .text-gray-600, [data-theme="dark"] #vue-header .text-gray-700, [data-theme="dark"] #vue-header .text-gray-900 { color: var(--dm-fg3) !important; } /* ═══ FOOTER ═══ */ [data-theme="light"] footer.bg-gray-900 { background: #ffffff !important; color: #1f2937 !important; border-top: 1px solid #e5e7eb; } [data-theme="light"] footer.bg-gray-900 .text-white { color: #111827 !important; } [data-theme="light"] footer.bg-gray-900 .text-gray-400 { color: #4b5563 !important; } [data-theme="light"] footer.bg-gray-900 .text-gray-500, [data-theme="light"] footer.bg-gray-900 .text-gray-600 { color: #6b7280 !important; } [data-theme="light"] footer.bg-gray-900 .border-gray-800 { border-color: #e5e7eb !important; } [data-theme="light"] footer.bg-gray-900 .hover\:text-white:hover { color: #111827 !important; } [data-theme="light"] footer.bg-gray-900 .hover\:bg-gray-800:hover { background: #f3f4f6 !important; } [data-theme="light"] footer.bg-gray-900 img[alt="Rid'Air"] { filter: none !important; } [data-theme="dark"] footer.bg-gray-900 { background: var(--dm-bg) !important; } [data-theme="dark"] footer .border-gray-800 { border-color: var(--dm-border) !important; } [data-theme="dark"] .v5-seo-links { background-color: var(--dm-bg2) !important; background-image: linear-gradient(180deg, var(--dm-bg2) 0%, var(--dm-bg3) 100%) !important; color: var(--dm-fg3) !important; border-top-color: var(--dm-border) !important; } /* ═══ GLOBAL BACKGROUNDS ═══ */ [data-theme="dark"] .bg-white { background-color: var(--dm-bg2) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--dm-bg3) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--dm-bg4) !important; } /* ═══ GLOBAL TEXT ═══ */ [data-theme="dark"] .text-gray-900 { color: var(--dm-fg) !important; } [data-theme="dark"] .text-gray-800 { color: var(--dm-fg) !important; } [data-theme="dark"] .text-gray-700 { color: var(--dm-fg2) !important; } [data-theme="dark"] .text-gray-600 { color: var(--dm-fg2) !important; } [data-theme="dark"] .text-gray-500 { color: var(--dm-fg3) !important; } [data-theme="dark"] .text-gray-400 { color: var(--dm-fg3) !important; } [data-theme="dark"] .text-gray-300 { color: var(--dm-fg4) !important; } /* ═══ GLOBAL BORDERS ═══ */ [data-theme="dark"] .border-gray-50 { border-color: var(--dm-border) !important; } [data-theme="dark"] .border-gray-100 { border-color: var(--dm-border) !important; } [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-200\/80 { border-color: var(--dm-border2) !important; } [data-theme="dark"] .border-gray-300 { border-color: var(--dm-border2) !important; } [data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); } /* ═══ M3 CARDS ═══ */ [data-theme="dark"] .card, [data-theme="dark"] .card-outlined { background: var(--dm-bg2) !important; border-color: var(--dm-border2); } [data-theme="dark"] .card-filled { background: var(--dm-bg3) !important; } /* ═══ PRODUCT CARDS ═══ */ [data-theme="dark"] .product-card { background: var(--dm-bg2); } [data-theme="dark"] .product-card__image { background: linear-gradient(135deg, #1a2236, #1e293b) !important; } [data-theme="dark"] .product-card__name { color: var(--dm-fg); } [data-theme="dark"] .product-card__price--current { color: var(--dm-fg); } [data-theme="dark"] .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); } /* ═══ CATEGORY CARDS ═══ */ [data-theme="dark"] .category-card, [data-theme="dark"] .aero-category-card { background: var(--dm-bg2) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .aero-category-card:hover { border-color: rgba(25,164,176,.3) !important; } [data-theme="dark"] .category-card__name { color: var(--dm-fg); } /* ═══ FORM ELEMENTS ═══ */ [data-theme="dark"] .form-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] .form-select, [data-theme="dark"] .aero-select { background: var(--dm-bg3) !important; color: var(--dm-fg) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .form-input:hover, [data-theme="dark"] .aero-select:hover { border-color: var(--dm-fg4) !important; } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dm-fg4) !important; } [data-theme="dark"] .form-label { color: var(--dm-fg2) !important; } [data-theme="dark"] .form-checkbox { color: var(--dm-fg3) !important; } /* ═══ BUTTONS ═══ */ [data-theme="dark"] .btn-outline { color: var(--dm-fg2) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .btn-outline:hover { background: var(--dm-bg3) !important; } [data-theme="dark"] .btn-ghost { color: var(--dm-fg3) !important; } [data-theme="dark"] .btn-ghost:hover { background: var(--dm-bg3) !important; } /* ═══ QUANTITY SELECTOR ═══ */ [data-theme="dark"] .quantity-selector { border-color: var(--dm-border2) !important; } [data-theme="dark"] .quantity-btn { color: var(--dm-fg3); } [data-theme="dark"] .quantity-btn:hover { background: var(--dm-bg3) !important; } [data-theme="dark"] .quantity-input { border-color: var(--dm-border2) !important; color: var(--dm-fg); } /* ═══ BREADCRUMBS ═══ */ [data-theme="dark"] .breadcrumb, [data-theme="dark"] nav[aria-label="breadcrumb"], [data-theme="dark"] .bg-gray-50.border-b { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } /* ═══ CHIPS / FILTERS ═══ */ [data-theme="dark"] .aero-chip { border-color: var(--dm-border2) !important; color: var(--dm-fg3) !important; } [data-theme="dark"] .aero-chip:hover { background: var(--dm-bg3) !important; border-color: rgba(25,164,176,.3) !important; color: var(--dm-primary) !important; } [data-theme="dark"] .aero-filter-link { color: var(--dm-fg3) !important; } [data-theme="dark"] .aero-filter-link:hover { background: var(--dm-bg3) !important; color: var(--dm-fg) !important; } [data-theme="dark"] .aero-filter-link--active { background: rgba(25,164,176,.12) !important; color: var(--dm-primary) !important; } /* ═══ VARIANT CHIPS ═══ */ [data-theme="dark"] .aero-variant-chip { color: var(--dm-fg3) !important; border-color: var(--dm-border2) !important; } [data-theme="dark"] .aero-variant-chip:hover { border-color: rgba(25,164,176,.4) !important; background: rgba(25,164,176,.08) !important; } /* ═══ PRICE CARD ═══ */ [data-theme="dark"] .aero-price-card { background: linear-gradient(135deg, rgba(25,164,176,.06), rgba(46,100,136,.08)) !important; border-color: rgba(25,164,176,.15) !important; } /* ═══ TRUST BADGES ═══ */ [data-theme="dark"] .aero-trust-badge { background: rgba(25,164,176,.06) !important; border-color: rgba(25,164,176,.12) !important; } [data-theme="dark"] .trust-badge:hover { background: var(--dm-bg3) !important; } [data-theme="dark"] .trust-badge__icon { background: rgba(25,164,176,.12) !important; } /* ═══ SPEC ROWS ═══ */ [data-theme="dark"] .aero-spec-dots { border-color: var(--dm-border2) !important; } /* ═══ SERVICE CARDS ═══ */ [data-theme="dark"] .service-card { background: linear-gradient(135deg, rgba(25,164,176,.06), rgba(25,164,176,.1)) !important; border-color: rgba(25,164,176,.2) !important; } /* ═══ BADGES ═══ */ [data-theme="dark"] .badge-success { background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important; } [data-theme="dark"] .badge-warning { background: rgba(245,158,11,.15) !important; color: #fcd34d !important; } [data-theme="dark"] .badge-danger { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } [data-theme="dark"] .badge-info { background: rgba(59,130,246,.15) !important; color: #93c5fd !important; } /* ═══ FLASH MESSAGES ═══ */ [data-theme="dark"] .flash-success { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.25) !important; color: #6ee7b7 !important; } [data-theme="dark"] .flash-error { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.25) !important; color: #fca5a5 !important; } [data-theme="dark"] .flash-warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #fcd34d !important; } [data-theme="dark"] .flash-info { background: rgba(59,130,246,.1) !important; border-color: rgba(59,130,246,.25) !important; color: #93c5fd !important; } /* ═══ PRODUCT DETAIL ═══ */ [data-theme="dark"] .product-thumb { background: var(--dm-bg3) !important; } [data-theme="dark"] .product-thumb:hover { border-color: var(--dm-fg4) !important; } /* Reviews */ [data-theme="dark"] .bg-gray-50\/50 { background: var(--dm-bg2) !important; } /* ═══ PROSE / CONTENT ═══ */ .product-description { color: #4b5563; } .product-description p, .product-description li, .product-description td, .product-description th, .product-description span { font-family: inherit !important; font-size: inherit !important; line-height: 1.85 !important; color: inherit !important; } .product-description p:empty { display: none; } .product-description h2, .product-description h3, .product-description h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; color: #111827 !important; line-height: 1.25 !important; margin: 2rem 0 1rem !important; } .product-description ul, .product-description ol { margin: 1rem 0 1.25rem !important; padding-left: 1.25rem !important; } .product-description table { width: 100% !important; display: block; overflow-x: auto; border-collapse: collapse !important; margin: 1.5rem 0 !important; } .product-description td, .product-description th { min-width: 6rem; padding: .7rem .85rem !important; border: 1px solid #e5e7eb !important; text-align: left !important; } .product-description strong, .product-description b { color: #111827 !important; font-weight: 700 !important; } [data-theme="dark"] .prose { color: var(--dm-fg2) !important; } [data-theme="dark"] .prose p, [data-theme="dark"] .prose li { color: var(--dm-fg2) !important; } [data-theme="dark"] .prose h2, [data-theme="dark"] .prose h3 { color: var(--dm-fg) !important; } [data-theme="dark"] .prose strong, [data-theme="dark"] .prose b, [data-theme="dark"] .prose th { color: var(--dm-fg) !important; } [data-theme="dark"] .prose a { color: #67e8f9 !important; } [data-theme="dark"] .prose a:hover { color: #a5f3fc !important; } [data-theme="dark"] .prose blockquote { color: var(--dm-fg) !important; background: rgba(25,164,176,.08) !important; border-color: rgba(25,164,176,.3) !important; } [data-theme="dark"] .product-description { color: var(--dm-fg2) !important; } [data-theme="dark"] .product-description h2, [data-theme="dark"] .product-description h3, [data-theme="dark"] .product-description h4, [data-theme="dark"] .product-description strong, [data-theme="dark"] .product-description b { color: var(--dm-fg) !important; } [data-theme="dark"] .product-description td, [data-theme="dark"] .product-description th { border-color: var(--dm-border) !important; background: var(--dm-bg3) !important; color: var(--dm-fg2) !important; } [data-theme="dark"] .section-header__title { color: var(--dm-fg) !important; } [data-theme="dark"] .section-header__subtitle { color: var(--dm-fg3) !important; } /* ═══ PAGINATION ═══ */ [data-theme="dark"] a.bg-white.border { background: var(--dm-bg2) !important; border-color: var(--dm-border2) !important; color: var(--dm-fg3) !important; } [data-theme="dark"] a.bg-white.border:hover { background: var(--dm-bg3) !important; } /* ═══ TABLES ═══ */ [data-theme="dark"] table { color: var(--dm-fg2); } [data-theme="dark"] thead .bg-gray-50, [data-theme="dark"] th { background: var(--dm-bg3) !important; color: var(--dm-fg2) !important; } [data-theme="dark"] td { color: var(--dm-fg2) !important; } [data-theme="dark"] tbody tr:hover, [data-theme="dark"] .hover\:bg-gray-50:hover { background: var(--dm-bg3) !important; } /* ═══ EMPTY STATE ═══ */ [data-theme="dark"] .empty-state__icon { background: var(--dm-bg3) !important; color: var(--dm-fg4) !important; } /* ═══ HERO GRADIENTS (keep as-is — already dark) ═══ */ /* Heroes with bg-gradient-to-br from-secondary-900 etc. are already dark-colored */ /* ═══ SVG WAVE FILLS ═══ */ [data-theme="dark"] .hero-wave-fill, [data-theme="dark"] svg[preserveAspectRatio] path[fill="white"], [data-theme="dark"] svg path[fill="#ffffff"], [data-theme="dark"] svg path[fill="white"] { fill: var(--dm-bg) !important; } /* ═══ GLASS UTILITIES ═══ */ [data-theme="dark"] .glass { background: rgba(17,24,39,.8) !important; border-color: rgba(148,163,184,.12) !important; } /* ═══ SURFACE TINTS ═══ */ [data-theme="dark"] .surface-primary { background: linear-gradient(135deg, rgba(25,164,176,.08), rgba(25,164,176,.04)) !important; } /* ═══ ACCOUNT SIDEBAR ═══ */ [data-theme="dark"] a.text-gray-600.hover\:bg-gray-50:hover { background: var(--dm-bg3) !important; } /* ═══ SELECTION ═══ */ [data-theme="dark"] ::selection { background: rgba(25,164,176,.3); color: #fff; } /* ═══ SCROLLBAR ═══ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-bg4); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dm-fg4); } /* ═══ NOTIFICATIONS ═══ */ [data-theme="dark"] #notifications .flash { box-shadow: 0 8px 24px rgba(0,0,0,.4); } /* ═══ COOKIE BANNER ═══ */ /* Already dark (bg-gray-900/95) — OK */ /* ═══ ADMIN SHORTCUT BUTTON ═══ */ /* Already dark (bg-gray-900/80) — OK */ /* ═══ THEME TOGGLE — moved to Vue header + v5-global.css ═══ */ /* ═══ REDUCED MOTION ═══ */ @media (prefers-reduced-motion: reduce) { /* reduced motion handled in v5-global.css */ }