/* ========================================== DARK THEME OVERRIDES Class-based: Toggled via 'dark' class on ========================================== */ /* ---- Body & Base ---- */ html.dark body { background-color: #0f172a !important; color: #e2e8f0 !important; transition: background-color 0.3s ease, color 0.3s ease; } /* ---- Glass Navigation ---- */ html.dark .glass-nav { background: rgba(15, 23, 42, 0.92) !important; border-bottom-color: #334155 !important; } /* ---- Navbar ---- */ html.dark .navbar { background-color: rgba(15, 23, 42, 0.95) !important; border-bottom-color: #334155 !important; } html.dark .navbar.scrolled { background-color: rgba(15, 23, 42, 0.88) !important; } /* ---- Glass Panels (dropdowns etc.) ---- */ html.dark .glass-panel { background: rgba(30, 41, 59, 0.92) !important; border-color: rgba(51, 65, 85, 0.5) !important; } /* ---- Hover Lift Shadows ---- */ html.dark .hover-lift:hover { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4) !important; } /* ---- Portal Dropdown ---- */ html.dark .portal-dropdown-menu { background: #1e293b !important; border-color: #334155 !important; } /* ---- Mobile Menu ---- */ html.dark .nav-menu { background-color: rgba(15, 23, 42, 0.98) !important; } html.dark .nav-dropdown { background-color: #0f172a !important; } html.dark .nav-link:hover { background-color: rgba(30, 41, 59, 0.8) !important; } /* ---- Cards ---- */ html.dark .card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .card:hover { border-color: rgba(96, 165, 250, 0.2) !important; } html.dark .card:hover .card-icon { background-color: #60a5fa !important; color: #0f172a !important; } /* ---- Pricing Cards ---- */ html.dark .pricing-card { background: #1e293b !important; border-color: #334155 !important; } html.dark .pricing-total { background: #0f172a !important; } html.dark .installment-step { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } /* ---- Rich Text Blocks ---- */ html.dark .rich-text-block { background-color: #1e293b !important; border-color: #334155 !important; } /* ---- Spec Items ---- */ html.dark .spec-item { background-color: #0f172a !important; } /* ---- List Docs ---- */ html.dark .list-docs li { background-color: #0f172a !important; } /* ---- Download Cards ---- */ html.dark .download-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---- Tables ---- */ html.dark .table-responsive { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .premium-table td { border-bottom-color: #334155 !important; } html.dark .premium-table tbody tr:hover { background-color: rgba(96, 165, 250, 0.04) !important; } html.dark .highlight-row { background-color: rgba(212, 175, 55, 0.08) !important; } /* ---- Gallery ---- */ html.dark .filter-btn { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .gallery-item { border-color: #334155 !important; } /* ---- Team Cards ---- */ html.dark .team-card { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .team-role { background-color: #0f172a !important; } /* ---- Accordion (FAQs) ---- */ html.dark .accordion-item { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .accordion-item.active .accordion-header { background-color: rgba(212, 175, 55, 0.08) !important; } html.dark .accordion-content { border-top-color: #334155 !important; } /* ---- Contact Form ---- */ html.dark .contact-form { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .contact-info-item { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .form-control { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .form-control:focus { background-color: #1e293b !important; border-color: #60a5fa !important; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12) !important; } html.dark .form-control::placeholder { color: #64748b !important; } /* ---- Tabs ---- */ html.dark .tabs-nav { border-bottom-color: #334155 !important; } html.dark .tab-btn { color: #94a3b8 !important; } html.dark .tab-btn.active { color: #60a5fa !important; } /* ---- Map ---- */ html.dark .map-wrapper { border-color: #334155 !important; } /* ---- Page Banner ---- */ html.dark .page-banner { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; } /* ---- Buttons (outline variants in dark) ---- */ html.dark .btn-outline { border-color: #60a5fa !important; color: #60a5fa !important; } html.dark .btn-outline:hover { background-color: #60a5fa !important; color: #0f172a !important; } html.dark .btn-primary { background-color: #2563eb !important; } html.dark .btn-primary:hover { background-color: #3b82f6 !important; } /* ---- Section backgrounds ---- */ html.dark .section-bg { background-color: #1e293b !important; } /* ---- Back to top ---- */ html.dark .back-to-top { background-color: #1e293b !important; border-color: #d4af37 !important; } /* ---- WhatsApp tooltip ---- */ html.dark .whatsapp-tooltip { background-color: #1e293b !important; } /* ---- Lightbox ---- */ html.dark .lightbox { background-color: rgba(2, 6, 23, 0.97) !important; } /* ---- Lightbox img ---- */ html.dark .lightbox-img { border-color: #334155 !important; } /* ---- Footer (already dark, but refine borders) ---- */ html.dark .footer { border-top-color: #d4af37 !important; } /* ---- Headings color override ---- */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #e2e8f0; } /* ---- Links ---- */ html.dark a { color: #93bbfc; } html.dark a:hover { color: #d4af37; } /* ---- Paragraph text ---- */ html.dark p { color: #94a3b8; } /* ---- Portal Icon Dark Overrides ---- */ html.dark .portal-icon.gold { background: rgba(212, 175, 55, 0.12); } html.dark .portal-icon.primary { background: rgba(96, 165, 250, 0.12); color: #60a5fa; } html.dark .portal-icon.admin { background: rgba(129, 140, 248, 0.12); color: #818cf8; } html.dark .portal-title { color: #e2e8f0 !important; } html.dark .portal-desc { color: #94a3b8 !important; } /* ---- Divider overrides ---- */ html.dark .portal-dropdown-divider { background-color: #334155 !important; } /* ---- Nav logo text ---- */ html.dark .nav-logo-title { color: #e2e8f0 !important; } html.dark .nav-logo-subtitle { color: #94a3b8 !important; } /* ---- Global layout overrides for subpages in dark mode ---- */ html.dark section, html.dark main, html.dark .bg-white, html.dark .bg-slate-50 { background-color: #0f172a !important; color: #cbd5e1 !important; } html.dark .bg-slate-100, html.dark .bg-slate-200\/50 { background-color: #1e293b !important; } html.dark .bg-slate-50\/50 { background-color: rgba(30, 41, 59, 0.5) !important; border-color: #334155 !important; } html.dark .text-slate-900, html.dark .text-slate-850, html.dark .text-slate-800, html.dark .text-slate-750, html.dark .text-slate-700, html.dark .text-slate-650, html.dark .text-slate-600 { color: #f1f5f9 !important; } html.dark .text-slate-500, html.dark .text-slate-400 { color: #94a3b8 !important; } /* Ensure text utility classes override global link color rule in dark mode */ html.dark .text-white { color: #ffffff !important; } html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300\/50, html.dark .border-slate-200\/50 { border-color: #334155 !important; } /* Glass panel dropdown links hover style */ html.dark .glass-panel a:hover { background-color: rgba(13, 148, 136, 0.2) !important; color: #2dd4bf !important; } /* Tab button specific states */ html.dark .tab-btn:not(.active) { color: #94a3b8 !important; background-color: transparent !important; } html.dark .tab-pane { background-color: transparent !important; color: #cbd5e1 !important; } /* ---- Smooth transition for theme switch ---- */ html.dark * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Hide floating WhatsApp button on mobile view to avoid overlap with Fixed bottom action bar */ @media (max-width: 1023px) { html body .whatsapp-float { display: none !important; } } /* Force block horizontal overflow globally at html and body levels to resolve mobile layout shifting */ html, body { overflow-x: hidden !important; width: 100% !important; }