/* ========================================================= BazaarSe — Dark mode override layer Activated by the `dark` class on (set by theme.js). Uses higher-specificity + !important to override Tailwind CDN utilities without touching every element. ========================================================= */ :root { --dk-bg: #0b0e13; /* page background */ --dk-surface: #151a22; /* cards / white surfaces */ --dk-surface-2: #1c222c; /* raised surfaces / inputs */ --dk-surface-3: #232a34; /* hover surfaces */ --dk-border: #262d38; /* default borders */ --dk-border-2: #333b47; /* stronger borders */ --dk-text: #e5e7eb; /* body text */ --dk-strong: #f3f4f6; /* headings */ --dk-muted: #9aa3b2; /* secondary text */ } /* Smooth transition in both directions */ body, nav, header, footer, section, aside, main, a, button, .glass, .glass-nav, .card-hover, .hero-gradient { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; } /* ---------- Base ---------- */ html.dark, html.dark body { background-color: var(--dk-bg) !important; color: var(--dk-text) !important; } html.dark ::selection { background: rgba(52,211,153,.35); } /* ---------- Surfaces (white / grays) ---------- */ html.dark .bg-white, html.dark .bg-white\/70, html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: rgba(21,26,34,.92) !important; } html.dark .bg-white\/10, html.dark .bg-white\/20 { background-color: rgba(255,255,255,.06) !important; } html.dark .bg-gray-50 { background-color: #10141b !important; } html.dark .bg-gray-100 { background-color: var(--dk-surface-2) !important; } html.dark .bg-gray-800 { background-color: #1c222c !important; } html.dark .bg-gray-900 { background-color: #0a0d12 !important; } /* Custom glass / gradient helpers used across pages */ html.dark .glass { background-color: rgba(18,23,31,.72) !important; } html.dark .hero-gradient { background: linear-gradient(180deg,#0b0e13 0%,#10141b 50%,#0b0e13 100%) !important; } html.dark .card-hover:hover { box-shadow: 0 20px 40px rgba(0,0,0,.55) !important; } /* ---------- Text (grays) ---------- */ html.dark .text-gray-900 { color: var(--dk-strong) !important; } html.dark .text-gray-800 { color: #e5e7eb !important; } html.dark .text-gray-700 { color: #d3d8e0 !important; } html.dark .text-gray-600 { color: var(--dk-muted) !important; } html.dark .text-gray-500 { color: #8b93a3 !important; } html.dark .text-gray-400 { color: #9aa3b2 !important; } html.dark .text-gray-300 { color: #b6bdc9 !important; } /* ---------- Borders (grays) ---------- */ html.dark .border-gray-100 { border-color: var(--dk-border) !important; } html.dark .border-gray-200, html.dark .border-gray-200\/50 { border-color: #2b323d !important; } html.dark .border-gray-300 { border-color: var(--dk-border-2) !important; } html.dark .border-gray-600 { border-color: #3a424f !important; } html.dark .border-gray-800 { border-color: #232a34 !important; } html.dark .border-white\/20, html.dark .border-white\/30 { border-color: rgba(255,255,255,.09) !important; } html.dark .divide-gray-100 > * + * { border-color: var(--dk-border) !important; } /* ---------- Hover surfaces ---------- */ html.dark .hover\:bg-gray-100:hover { background-color: var(--dk-surface-3) !important; } html.dark .hover\:bg-gray-800:hover { background-color: #262d38 !important; } html.dark .hover\:bg-white\/10:hover, html.dark .hover\:bg-white\/20:hover { background-color: rgba(255,255,255,.08) !important; } /* ---------- Form controls ---------- */ html.dark input, html.dark textarea, html.dark select { background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280 !important; } /* ========================================================= Accent families - light 50/100 backgrounds -> subtle translucent tint - 600–900 text -> brightened to the 400 shade - light borders -> translucent - solid 500/600/700 fills kept vivid (CTAs) ========================================================= */ /* ----- Green / Brand (primary) ----- */ html.dark .bg-brand-50, html.dark .bg-brand-50\/50, html.dark .bg-brand-50\/80, html.dark .bg-brand-100, html.dark .bg-brand-100\/30, html.dark .bg-brand-100\/50, html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34,197,94,.14) !important; } html.dark .text-brand-600, html.dark .text-brand-700, html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #4ade80 !important; } html.dark .border-brand-100, html.dark .border-brand-200, html.dark .border-green-100, html.dark .border-green-200 { border-color: rgba(34,197,94,.30) !important; } html.dark .hover\:bg-brand-50:hover, html.dark .hover\:bg-brand-100:hover, html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-green-100:hover { background-color: rgba(34,197,94,.18) !important; } /* ----- Warm (dine-in theme) ----- */ html.dark .bg-warm-50, html.dark .bg-warm-50\/80, html.dark .bg-warm-100, html.dark .bg-warm-200, html.dark .bg-warm-200\/40 { background-color: rgba(245,158,11,.14) !important; } html.dark .text-warm-600, html.dark .text-warm-700 { color: #fbbf24 !important; } html.dark .border-warm-100, html.dark .border-warm-200, html.dark .border-warm-300 { border-color: rgba(245,158,11,.30) !important; } /* ----- Amber ----- */ html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245,158,11,.14) !important; } html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fbbf24 !important; } html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245,158,11,.30) !important; } /* ----- Red ----- */ html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239,68,68,.15) !important; } html.dark .text-red-600, html.dark .text-red-700 { color: #f87171 !important; } html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(239,68,68,.32) !important; } /* ----- Rose ----- */ html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgba(244,63,94,.15) !important; } html.dark .text-rose-600, html.dark .text-rose-700 { color: #fb7185 !important; } html.dark .border-rose-100 { border-color: rgba(244,63,94,.32) !important; } /* ----- Blue ----- */ html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59,130,246,.15) !important; } html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800 { color: #60a5fa !important; } html.dark .border-blue-100 { border-color: rgba(59,130,246,.32) !important; } /* ----- Purple ----- */ html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(168,85,247,.15) !important; } html.dark .text-purple-600, html.dark .text-purple-700 { color: #c084fc !important; } html.dark .border-purple-100 { border-color: rgba(168,85,247,.32) !important; } /* ----- Teal ----- */ html.dark .bg-teal-50, html.dark .bg-teal-100 { background-color: rgba(20,184,166,.15) !important; } html.dark .text-teal-600, html.dark .text-teal-700 { color: #2dd4bf !important; } html.dark .border-teal-100 { border-color: rgba(20,184,166,.32) !important; } /* ---------- Light gradient backgrounds -> flat dark ---------- Any gradient that includes a light stop (white / 50 / 100 / light 200) is neutralised to a flat dark surface. Vivid gradients built only from 500-900 stops (CTA bands, dark hero strips) are left untouched, and translucent decorative orbs (.../20, 300-400 stops) keep their glow. */ html.dark .to-white, html.dark .from-white, html.dark .via-white, html.dark .from-gray-50, html.dark .to-gray-50, html.dark .from-gray-100, html.dark .to-gray-100, html.dark .from-brand-50, html.dark .to-brand-50, html.dark .from-brand-100, html.dark .to-brand-100, html.dark .from-brand-200, html.dark .to-brand-200, html.dark .from-green-50, html.dark .to-green-50, html.dark .from-green-100, html.dark .to-green-100, html.dark .from-warm-50, html.dark .from-warm-50\/50, html.dark .to-warm-50, html.dark .to-warm-100, html.dark .from-amber-50, html.dark .to-amber-50, html.dark .from-teal-50, html.dark .from-rose-50, html.dark .from-red-50, html.dark .from-purple-50, html.dark .from-blue-50 { background-image: none !important; background-color: #0f141b !important; } /* ========================================================= Theme toggle button — icon visibility ========================================================= */ .theme-toggle .theme-sun { display: none; } .theme-toggle .theme-moon { display: block; } html.dark .theme-toggle .theme-sun { display: block; } html.dark .theme-toggle .theme-moon { display: none; }