/* ============================================================================ HOUSING FINDER — DARK MODE OVERRIDES Applied when is set. Toggle managed via localStorage key "hf-theme". Color palette: Page bg #111827 (gray-900) Section-alt #0D1421 (deeper dark for alternating sections) Section-main #1A2235 (elevated — bg-white sections) Card/UI #243044 (further elevated — cards, inputs) Border #2D3A4E Text primary #E2E8F0 (slate-200) Text secondary #94A3B8 (slate-400) Text muted #64748B (slate-500) ============================================================================ */ /* ============================================================ 1. BASE & BODY ============================================================ */ [data-theme="dark"] body { background-color: #111827; color: #E2E8F0; } /* ============================================================ 2. STANDARD TAILWIND GRAY CLASSES ============================================================ */ [data-theme="dark"] .bg-white { background-color: #1A2235 !important; } [data-theme="dark"] .bg-gray-50 { background-color: #0D1421 !important; } [data-theme="dark"] .bg-gray-100 { background-color: #243044 !important; } [data-theme="dark"] .bg-gray-200 { background-color: #2D3A4E !important; } [data-theme="dark"] .bg-gray-800 { background-color: #0A0F1A !important; } [data-theme="dark"] .bg-gray-900 { background-color: #060A12 !important; } [data-theme="dark"] .text-gray-900 { color: #F1F5F9 !important; } [data-theme="dark"] .text-gray-800 { color: #E2E8F0 !important; } [data-theme="dark"] .text-gray-700 { color: #CBD5E1 !important; } [data-theme="dark"] .text-gray-600 { color: #94A3B8 !important; } [data-theme="dark"] .text-gray-500 { color: #94A3B8 !important; } [data-theme="dark"] .text-gray-400 { color: #64748B !important; } [data-theme="dark"] .text-gray-300 { color: #94A3B8 !important; } [data-theme="dark"] .border-gray-50 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-gray-100 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-gray-200 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-gray-300 { border-color: #374151 !important; } /* Opacity variants */ [data-theme="dark"] [class*="border-gray-2"] { border-color: #2D3A4E !important; } [data-theme="dark"] [class*="border-gray-1"] { border-color: #2D3A4E !important; } [data-theme="dark"] .divide-gray-100 > * + * { border-color: #2D3A4E !important; } [data-theme="dark"] .divide-gray-200 > * + * { border-color: #2D3A4E !important; } /* ============================================================ 3. STANDARD TAILWIND ZINC CLASSES ============================================================ */ [data-theme="dark"] .bg-zinc-50 { background-color: #0D1421 !important; } [data-theme="dark"] .bg-zinc-100 { background-color: #243044 !important; } [data-theme="dark"] .bg-zinc-200 { background-color: #2D3A4E !important; } [data-theme="dark"] .text-zinc-900 { color: #F1F5F9 !important; } [data-theme="dark"] .text-zinc-800 { color: #E2E8F0 !important; } [data-theme="dark"] .text-zinc-700 { color: #CBD5E1 !important; } [data-theme="dark"] .text-zinc-600 { color: #94A3B8 !important; } [data-theme="dark"] .text-zinc-500 { color: #94A3B8 !important; } [data-theme="dark"] .text-zinc-400 { color: #64748B !important; } [data-theme="dark"] .text-zinc-300 { color: #94A3B8 !important; } [data-theme="dark"] .border-zinc-50 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-zinc-100 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-zinc-200 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-zinc-300 { border-color: #374151 !important; } /* Opacity variants (e.g. border-zinc-200/50, /60, /80) */ [data-theme="dark"] [class*="border-zinc-2"] { border-color: #2D3A4E !important; } [data-theme="dark"] [class*="border-zinc-1"] { border-color: #2D3A4E !important; } [data-theme="dark"] .divide-zinc-100 > * + * { border-color: #2D3A4E !important; } [data-theme="dark"] .divide-zinc-200 > * + * { border-color: #2D3A4E !important; } /* ============================================================ 4. SLATE / NEUTRAL CLASSES ============================================================ */ [data-theme="dark"] .bg-slate-50 { background-color: #0D1421 !important; } [data-theme="dark"] .bg-slate-100 { background-color: #243044 !important; } [data-theme="dark"] .text-slate-900 { color: #F1F5F9 !important; } [data-theme="dark"] .text-slate-800 { color: #E2E8F0 !important; } [data-theme="dark"] .text-slate-700 { color: #CBD5E1 !important; } [data-theme="dark"] .text-slate-600 { color: #94A3B8 !important; } [data-theme="dark"] .text-slate-500 { color: #94A3B8 !important; } [data-theme="dark"] .border-slate-200 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-slate-100 { border-color: #2D3A4E !important; } /* ============================================================ 5. CUSTOM CHARCOAL CLASSES (defined in inline tailwind.config) charcoal-900 = #111827 (very dark) — used as DEFAULT BODY TEXT CRITICAL: must be overridden or all body text is invisible ============================================================ */ [data-theme="dark"] .text-charcoal-900 { color: #F1F5F9 !important; } [data-theme="dark"] .text-charcoal-800 { color: #E2E8F0 !important; } [data-theme="dark"] .text-charcoal-700 { color: #CBD5E1 !important; } [data-theme="dark"] .text-charcoal-600 { color: #94A3B8 !important; } [data-theme="dark"] .text-charcoal-500 { color: #64748B !important; } [data-theme="dark"] .text-charcoal-400 { color: #64748B !important; } [data-theme="dark"] .bg-charcoal-50 { background-color: #1A2235 !important; } [data-theme="dark"] .bg-charcoal-100 { background-color: #243044 !important; } [data-theme="dark"] .bg-charcoal-200 { background-color: #2D3A4E !important; } /* charcoal-900 (dark sections) keep dark but slightly elevated */ [data-theme="dark"] .bg-charcoal-900 { background-color: #0A0F1A !important; } [data-theme="dark"] .border-charcoal-200 { border-color: #2D3A4E !important; } [data-theme="dark"] .border-charcoal-100 { border-color: #2D3A4E !important; } /* ============================================================ 6. CUSTOM SOFTRED CLASSES (defined in inline tailwind.config) softred-50 = #fff1f2 (light pink) — used as icon/badge bg ============================================================ */ [data-theme="dark"] .bg-softred-50 { background-color: rgba(239, 68, 68, 0.12) !important; } [data-theme="dark"] .bg-softred-100 { background-color: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .border-softred-100 { border-color: rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] .border-softred-200 { border-color: rgba(239, 68, 68, 0.3) !important; } /* Keep softred text vibrant */ [data-theme="dark"] .text-softred-600 { color: #EF4444 !important; } [data-theme="dark"] .text-softred-700 { color: #DC2626 !important; } /* ============================================================ 7. DESIGN SYSTEM COMPONENTS (design-system.css) ============================================================ */ /* Cards */ [data-theme="dark"] .card { background-color: #1A2235; border-color: #2D3A4E; } [data-theme="dark"] .card-header { border-color: #2D3A4E; } [data-theme="dark"] .card-body { background-color: #1A2235; } [data-theme="dark"] .card-footer { background-color: #0D1421; border-color: #2D3A4E; } /* Typography */ [data-theme="dark"] .heading-1, [data-theme="dark"] .heading-2, [data-theme="dark"] .heading-3, [data-theme="dark"] .heading-4 { color: #F1F5F9; } [data-theme="dark"] .text-body, [data-theme="dark"] .text-small { color: #CBD5E1; } [data-theme="dark"] .text-muted { color: #64748B; } /* Sections */ [data-theme="dark"] .section-alt { background-color: #0D1421; } /* Design-system inputs */ [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background-color: #243044; color: #E2E8F0; border-color: #2D3A4E; } [data-theme="dark"] .input::placeholder, [data-theme="dark"] .textarea::placeholder { color: #64748B; } /* Accordion */ [data-theme="dark"] .accordion { border-color: #2D3A4E; } [data-theme="dark"] .accordion-item { border-color: #2D3A4E; } [data-theme="dark"] .accordion-trigger { color: #E2E8F0; } [data-theme="dark"] .accordion-trigger:hover { background-color: #243044; } [data-theme="dark"] .accordion-trigger::after { background-color: #2D3A4E; color: #94A3B8; } [data-theme="dark"] .accordion-content-inner { color: #CBD5E1; } /* Testimonials */ [data-theme="dark"] .testimonial-card { background-color: #1A2235; border-color: #2D3A4E; } [data-theme="dark"] .testimonial-text { color: #CBD5E1; } [data-theme="dark"] .testimonial-name { color: #F1F5F9; } /* Trust badges */ [data-theme="dark"] .trust-badge { background-color: #243044; border-color: #2D3A4E; color: #CBD5E1; } /* Stats */ [data-theme="dark"] .stat-counter { color: #F1F5F9; } [data-theme="dark"] .stat-label { color: #94A3B8; } /* Skeleton */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #2D3A4E 25%, #374151 50%, #2D3A4E 75%); background-size: 200% 100%; } /* Badges */ [data-theme="dark"] .badge-charcoal { background-color: #2D3A4E; color: #CBD5E1; } /* Buttons */ [data-theme="dark"] .btn-ghost { color: #CBD5E1; } [data-theme="dark"] .btn-ghost:hover { background-color: #2D3A4E; color: #F1F5F9; } /* ============================================================ 8. PUBLIC WEBSITE NAVIGATION (header.blade.php) ============================================================ */ [data-theme="dark"] #mainNav { background-color: #1A2235 !important; border-color: #2D3A4E !important; } [data-theme="dark"] .header-scrolled { background-color: rgba(26, 34, 53, 0.97) !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important; } /* Nav links */ [data-theme="dark"] .hf-nav-link { color: #CBD5E1; } [data-theme="dark"] .hf-nav-link:hover, [data-theme="dark"] .hf-nav-link.active { color: #EF4444; } /* Dropdowns */ [data-theme="dark"] .hf-dropdown { background: #1A2235; border-color: #2D3A4E; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .hf-dropdown h5 { color: #64748B; } [data-theme="dark"] .hf-dropdown a { color: #CBD5E1; } [data-theme="dark"] .hf-dropdown a:hover { background: #243044; color: #EF4444; } [data-theme="dark"] .hf-dropdown-footer { border-color: #2D3A4E; } /* Hamburger icon */ [data-theme="dark"] .hf-hamburger span { background: #CBD5E1; } /* Auth links + logo in header */ [data-theme="dark"] .hf-auth-link { color: #CBD5E1 !important; } [data-theme="dark"] .hf-auth-link:hover { color: #EF4444 !important; } [data-theme="dark"] .hf-logo-text { color: #F1F5F9 !important; } /* Sticky bottom CTA */ [data-theme="dark"] .hf-sticky-cta { background-color: #1A2235 !important; border-color: #2D3A4E !important; } /* ============================================================ 9. DASHBOARD SIDEBARS ============================================================ */ [data-theme="dark"] #sidebar { background-color: #1A2235 !important; border-color: #2D3A4E !important; } /* Sidebar item borders */ [data-theme="dark"] #sidebar [class*="border-zinc-"] { border-color: #2D3A4E !important; } /* Sidebar hover states */ [data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } [data-theme="dark"] .hover\:bg-zinc-50:hover { background-color: #243044 !important; } /* Dashboard header bars */ [data-theme="dark"] header.bg-white\/80 { background-color: rgba(26, 34, 53, 0.8) !important; } [data-theme="dark"] header.hidden.lg\:flex { background-color: rgba(26, 34, 53, 0.9) !important; } /* ============================================================ 10. THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #374151; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; flex-shrink: 0; } .theme-toggle-btn:hover { background: #F3F4F6; border-color: #E5E7EB; } [data-theme="dark"] .theme-toggle-btn { color: #94A3B8; } [data-theme="dark"] .theme-toggle-btn:hover { background: #2D3A4E; border-color: #374151; color: #F1F5F9; } /* Icon visibility */ .theme-sun-icon { display: none; } .theme-moon-icon { display: block; } [data-theme="dark"] .theme-sun-icon { display: block; } [data-theme="dark"] .theme-moon-icon { display: none; } /* ============================================================ 11. NATIVE FORM ELEMENTS ============================================================ */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #243044 !important; color: #E2E8F0 !important; border-color: #2D3A4E !important; color-scheme: dark; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748B !important; } /* ============================================================ 12. TABLES ============================================================ */ [data-theme="dark"] table { color: #CBD5E1; } [data-theme="dark"] thead { background-color: #0D1421 !important; } [data-theme="dark"] th { color: #94A3B8 !important; border-color: #2D3A4E !important; } [data-theme="dark"] td { border-color: #2D3A4E !important; } [data-theme="dark"] tr:hover td { background-color: #243044 !important; } /* ============================================================ 13. MODALS / OVERLAYS ============================================================ */ [data-theme="dark"] [class*="modal"] .bg-white { background-color: #1A2235 !important; } [data-theme="dark"] [role="dialog"] .bg-white { background-color: #1A2235 !important; } /* ============================================================ 14. SCROLLBARS ============================================================ */ [data-theme="dark"] ::-webkit-scrollbar { background-color: #111827; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #2D3A4E; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #374151; } /* ============================================================ 15. SEARCH OVERLAY & TABS (homepage hero) ============================================================ */ /* The search box overlay container */ [data-theme="dark"] .bg-white\/95 { background-color: rgba(26, 34, 53, 0.97) !important; } /* Tab strip background */ [data-theme="dark"] #search-tabs { background-color: #0D1421 !important; } /* Active tab (bg-white inside tabs strip) */ [data-theme="dark"] #search-tabs .bg-white { background-color: #243044 !important; } /* Inactive tab text */ [data-theme="dark"] #search-tabs button { color: #94A3B8; } [data-theme="dark"] #search-tabs button.search-tab[class*="text-zinc-900"] { color: #F1F5F9 !important; } /* ============================================================ 16. MISC PAGE PATTERNS ============================================================ */ /* Property cards and other cards with bg-white directly on element */ [data-theme="dark"] [class*="bg-white"][class*="rounded"] { background-color: #1A2235 !important; } /* Border with opacity variants — general catch-all within sections */ [data-theme="dark"] [class*="border-zinc-1"], [data-theme="dark"] [class*="border-zinc-2"], [data-theme="dark"] [class*="border-gray-1"], [data-theme="dark"] [class*="border-gray-2"] { border-color: #2D3A4E !important; } /* Background with opacity that isn't a gradient overlay */ [data-theme="dark"] .bg-zinc-50\/50 { background-color: rgba(13, 20, 33, 0.5) !important; } /* Focus rings */ [data-theme="dark"] *:focus-visible { outline-color: #EF4444; } /* ============================================================ 17. SPECIFIC HOMEPAGE SECTION FIXES ============================================================ */ /* How It Works, Why Choose etc. — sections with bg-white */ [data-theme="dark"] section.bg-white { background-color: #1A2235 !important; } [data-theme="dark"] section.bg-zinc-50 { background-color: #0D1421 !important; } [data-theme="dark"] section.bg-gray-50 { background-color: #0D1421 !important; } /* border-y and border-t on sections */ [data-theme="dark"] .border-y { border-color: #2D3A4E !important; } [data-theme="dark"] .border-t { border-color: #2D3A4E !important; } [data-theme="dark"] .border-b { border-color: #2D3A4E !important; }