/* ── TDB Activewears — Light Mode Overrides ─────────────────── */ /* Applied when has class "light" (Tailwind dark-mode: class) */ html.light { --tw-bg-obsidian: #f5f5f5; } /* Base page background & text */ html.light body { background-color: #f5f5f5 !important; color: #111 !important; } /* Nav */ html.light nav { background-color: rgba(255,255,255,0.97) !important; border-color: rgba(0,0,0,0.08) !important; } html.light nav a, html.light nav span.material-symbols-outlined { color: #333 !important; } html.light nav a:hover, html.light nav a.text-primary { color: #10b981 !important; } /* Mobile menu */ html.light #mobile-menu { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; } html.light #mobile-menu a { color: #444 !important; } /* Search bar inside nav */ html.light .hidden.lg\:flex.items-center { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; } html.light nav input { color: #111 !important; } html.light nav input::placeholder { color: #888 !important; } /* Sections with dark bg */ html.light .bg-obsidian, html.light .bg-background, html.light [class*="bg-[#0a0a0a]"], html.light [class*="bg-[#121212]"] { background-color: #f5f5f5 !important; } /* Surface cards */ html.light .bg-\[\#121212\], html.light section.bg-\[\#121212\] { background-color: #fff !important; } /* Text */ html.light .text-white { color: #111 !important; } html.light .text-gray-300 { color: #444 !important; } html.light .text-gray-400 { color: #555 !important; } html.light .text-gray-500 { color: #666 !important; } html.light .text-gray-600 { color: #777 !important; } /* Hero overlay — lighten it */ html.light .hero-overlay { background: linear-gradient(to bottom, rgba(245,245,245,0.3) 0%, rgba(245,245,245,0.05) 50%, rgba(245,245,245,0.6) 100%) !important; } /* Borders */ html.light .border-white\/5, html.light .border-white\/10, html.light .border-white\/20 { border-color: rgba(0,0,0,0.08) !important; } /* Cards & tiles */ html.light .group.border { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; } html.light .group.border:hover { border-color: rgba(16,185,129,0.4) !important; } /* Product cards */ html.light .product-card-v2 .text-white, html.light .product-card-scroll .text-white { color: #111 !important; } /* Stat boxes on about page */ html.light .bg-\[\#121212\].border { background: #fff !important; } /* Footer */ html.light footer { background-color: #e8e8e8 !important; border-color: rgba(0,0,0,0.1) !important; } html.light footer p { color: #888 !important; } /* Forms */ html.light input, html.light textarea, html.light select { background: #fff !important; color: #111 !important; border-color: rgba(0,0,0,0.15) !important; } html.light input::placeholder, html.light textarea::placeholder { color: #999 !important; } /* Buttons */ html.light .border.border-white\/20.text-white { border-color: rgba(0,0,0,0.2) !important; color: #111 !important; } html.light .border.border-white\/20.text-white:hover { background: rgba(0,0,0,0.05) !important; } /* Theme toggle button */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: transparent; cursor: pointer; transition: all 0.2s; color: inherit; flex-shrink: 0; } .theme-toggle-btn:hover { background: rgba(16,185,129,0.12); border-color: #10b981; } html.light .theme-toggle-btn { border-color: rgba(0,0,0,0.15); color: #333; } html.light .theme-toggle-btn:hover { background: rgba(16,185,129,0.1); } /* Mobile theme toggle FAB */ .theme-fab { position: fixed; bottom: 80px; right: 18px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; background: #10b981; color: #000; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(16,185,129,0.4); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .theme-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(16,185,129,0.5); } html.light .theme-fab { background: #111; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } /* ── Admin Panel Light Mode ──────────────────────────────── */ html.admin-light body { background-color: #f0f2f5 !important; color: #1a1a1a !important; } /* Sidebar */ html.admin-light .sidebar { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 2px 0 12px rgba(0,0,0,0.06) !important; } html.admin-light .sidebar-logo, html.admin-light .nav-link-custom { color: #333 !important; } html.admin-light .nav-link-custom:hover, html.admin-light .nav-link-custom.active { background: rgba(16,185,129,0.08) !important; color: #10b981 !important; } html.admin-light .sidebar-footer { border-color: rgba(0,0,0,0.06) !important; } /* Topbar */ html.admin-light .topbar { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } html.admin-light .topbar h1 { color: #111 !important; } /* Cards */ html.admin-light .card { background: #fff !important; border-color: rgba(0,0,0,0.07) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; } html.admin-light .card-header { background: #fafafa !important; border-color: rgba(0,0,0,0.07) !important; color: #111 !important; } html.admin-light .card-body { color: #222 !important; } /* Tables */ html.admin-light .table { color: #222 !important; } html.admin-light .table thead th { background: #f5f5f5 !important; color: #555 !important; border-color: rgba(0,0,0,0.08) !important; } html.admin-light .table td, html.admin-light .table tr { border-color: rgba(0,0,0,0.06) !important; } html.admin-light .table-hover tbody tr:hover { background: rgba(16,185,129,0.04) !important; } /* Stat cards */ html.admin-light .stat-card { background: #fff !important; border-color: rgba(0,0,0,0.07) !important; } html.admin-light .stat-card .text-muted { color: #777 !important; } /* Text utilities */ html.admin-light .text-muted { color: #666 !important; } html.admin-light h1,html.admin-light h2,html.admin-light h3, html.admin-light h4,html.admin-light h5,html.admin-light h6 { color: #111 !important; } /* Offcanvas mobile nav */ html.admin-light .offcanvas { background: #fff !important; } html.admin-light .offcanvas .nav-link-custom { color: #444 !important; } /* Forms */ html.admin-light .form-control, html.admin-light .form-select { background-color: #fff !important; border-color: rgba(0,0,0,0.15) !important; color: #111 !important; } html.admin-light .form-label { color: #333 !important; } /* Buttons */ html.admin-light .btn-outline-secondary { color: #555 !important; border-color: rgba(0,0,0,0.2) !important; } html.admin-light .btn-outline-secondary:hover { background: rgba(0,0,0,0.05) !important; } /* Admin login page */ html.admin-light .admin-login-card { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; } html.admin-light .admin-login-card .text-white, html.admin-light .admin-login-card h1, html.admin-light .admin-login-card label { color: #111 !important; } html.admin-light .admin-login-card input { background: #fff !important; border-color: rgba(0,0,0,0.15) !important; color: #111 !important; } /* Badges */ html.admin-light .badge.bg-secondary { background: #ddd !important; color: #333 !important; }