/* ========================================================================== main.css — Global base styles ========================================================================== */ /* ── Fonts & Base ── */ * { font-family: "Plus Jakarta Sans", sans-serif; } body { background-color: #F8FAFC; } /* ── Material Icons ── */ .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; line-height: 1; display: inline-block; } /* ── Page System ── */ .page { display: none; } .page.active { display: block; min-height: 100vh; } /* ── Tab Panels ── */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Smooth scroll ── */ html { scroll-behavior: smooth; } /* ── No-scrollbar utility ── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ========================================================================== DARK MODE — triggered by .dark class on ========================================================================== */ .dark body { background-color: #0F172A; color: #E2E8F0; } /* ── Navbar ── */ .dark header { background-color: rgba(15, 23, 42, 0.95) !important; border-color: #1E293B !important; } /* ── White surfaces ── */ .dark .bg-white, .dark [class*="bg-white"] { background-color: #1E293B !important; } /* ── Slate backgrounds ── */ .dark .bg-slate-50 { background-color: #1E293B !important; } .dark .bg-slate-100 { background-color: #0F172A !important; } .dark .bg-slate-200 { background-color: #334155 !important; } /* ── Borders ── */ .dark .border-slate-100 { border-color: #1E293B !important; } .dark .border-slate-200 { border-color: #334155 !important; } .dark .divide-slate-100 > * + * { border-color: #1E293B !important; } .dark .divide-y > * + * { border-color: #334155 !important; } /* ── Text ── */ .dark .text-slate-900 { color: #F1F5F9 !important; } .dark .text-slate-800 { color: #E2E8F0 !important; } .dark .text-slate-700 { color: #CBD5E1 !important; } .dark .text-slate-600 { color: #94A3B8 !important; } .dark .text-slate-500 { color: #64748B !important; } .dark .text-slate-400 { color: #94A3B8 !important; } .dark .text-slate-300 { color: #CBD5E1 !important; } /* ── Hover backgrounds in dark ── */ .dark .hover\:bg-slate-50:hover { background-color: #334155 !important; } .dark .hover\:bg-slate-100:hover { background-color: #0F172A !important; } /* ── Search input ── */ .dark input { background-color: #0F172A !important; color: #E2E8F0 !important; border-color: #334155 !important; } .dark input::placeholder { color: #64748B !important; } /* ── Select / dropdown ── */ .dark select { background-color: #1E293B !important; color: #E2E8F0 !important; border-color: #334155 !important; } /* ── Sidebar ── */ .dark aside { background-color: #1E293B !important; border-color: #334155 !important; } /* ── Modals ── */ .dark [id$="-modal"] > div, .dark #notif-dropdown, .dark #mobile-menu, .dark #mobile-search-overlay > div { background-color: #1E293B !important; border-color: #334155 !important; } /* ── Product cards ── */ .dark .product-card { background-color: #1E293B !important; border-color: #334155 !important; } /* ── Rounded / gradient backgrounds ── */ .dark .from-slate-50 { --tw-gradient-from: #1E293B !important; } .dark .to-slate-100 { --tw-gradient-to: #0F172A !important; } .dark .bg-gradient-to-br.from-slate-50 { background: #1E293B !important; } /* ── Pagination ── */ .dark nav.flex.items-center { background-color: #1E293B !important; border-color: #334155 !important; } /* ── Logo swap for dark mode ── */ .logo-dark-img { display: none; } .dark .logo-light { display: none !important; } .dark .logo-dark-img { display: block !important; } /* ── Breadcrumb dark mode ── */ .dark #product-name-bc { color: #E2E8F0 !important; } .dark #page-product nav.flex { color: #94A3B8 !important; } .dark #page-product nav.flex .text-slate-900 { color: #E2E8F0 !important; } /* ── Product tags dark mode ── */ .dark #product-tags span { background-color: #334155 !important; border-color: #475569 !important; color: #CBD5E1 !important; }