/* --------------------------------------------------------------------------- Dark mode for the customer-facing mall surfaces (shop, product detail, cart, checkout). Activation is automatic based on the device's `prefers-color-scheme`: a tiny inline script in the of each page applies `body.dark-mode` when the OS is in dark mode and removes it when it isn't. It also listens for OS-level theme changes so the site flips live without a reload. --------------------------------------------------------------------------- */ /* Small transition when the OS theme changes so the flip feels intentional. */ body.dark-mode, body.dark-mode * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* =========================================================================== 1. Design tokens: redefine so anything referencing these vars adapts. =========================================================================== */ body.dark-mode { --primary-blue: #4d8dff; --primary-dark: #0a1220; --text-dark: #f1f5f9; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-light: #94a3b8; --bg-light: #0f172a; /* overall app surface */ --white: #1e293b; /* card surface (anywhere `var(--white)` is used as bg) */ --card-bg: #1e293b; --border-color: #334155; --shadow: 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); background-color: #0f172a; color: var(--text-body); color-scheme: dark; } /* =========================================================================== 2. Global surfaces shared by all pages (header, footer, menus, cards) =========================================================================== */ body.dark-mode header, body.dark-mode .header, body.dark-mode .main-header, body.dark-mode footer, body.dark-mode .footer { background-color: #111a2e; border-color: var(--border-color); color: var(--text-body); } /* ----------------------------------------------------------------- Search bar — dark variant of the unified pill design. ----------------------------------------------------------------- */ body.dark-mode .sticky-search-bar { background: transparent !important; border: none !important; box-shadow: none !important; } body.dark-mode .header-search, body.dark-mode .sticky-search-bar .header-search, body.dark-mode .main-header .header-search { background: linear-gradient(180deg, #1e293b 0%, #18223a 100%) !important; border: 1px solid #334155 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } body.dark-mode .header-search:hover { border-color: #3f5170 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } body.dark-mode .header-search:focus-within { border-color: var(--primary-blue) !important; box-shadow: 0 0 0 4px rgba(77, 141, 255, 0.18), 0 8px 26px rgba(77, 141, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } body.dark-mode .header-search::before { color: #64748b; } body.dark-mode .header-search:focus-within::before { color: var(--primary-blue); } body.dark-mode .header-search input { color: var(--text-dark) !important; background: transparent !important; } body.dark-mode .header-search input::placeholder { color: #64748b; opacity: 1; } body.dark-mode .search-icon-btn, body.dark-mode .header-search button { background: linear-gradient(180deg, #5a96ff 0%, #2563eb 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(77, 141, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } body.dark-mode .search-icon-btn:hover, body.dark-mode .header-search button:hover { background: linear-gradient(180deg, #74a8ff 0%, #3875ef 100%) !important; box-shadow: 0 6px 20px rgba(77, 141, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } body.dark-mode .search-suggestions, body.dark-mode .search-suggestions-dropdown { background: var(--card-bg); border-color: var(--border-color); color: var(--text-body); } body.dark-mode .search-suggestions .suggestion-item, body.dark-mode .search-suggestions-dropdown .suggestion-item { border-color: var(--border-color); color: var(--text-body); } body.dark-mode .search-suggestions .suggestion-item:hover, body.dark-mode .search-suggestions-dropdown .suggestion-item:hover, body.dark-mode .search-suggestions .suggestion-item.selected { background: #263247; } body.dark-mode .suggestion-name { color: var(--text-dark); } body.dark-mode .suggestion-category { color: var(--text-muted); } body.dark-mode .suggestion-image-placeholder { background: #0f172a; color: var(--text-muted); } body.dark-mode .header a, body.dark-mode .header .nav-links a, body.dark-mode .main-header a, body.dark-mode footer a, body.dark-mode .footer a { color: var(--text-body); } body.dark-mode .header .nav-links a:hover, body.dark-mode .header a:hover, body.dark-mode .main-header a:hover { color: var(--primary-blue); } body.dark-mode .nav-dropdown .dropdown-menu, body.dark-mode .user-menu-dropdown, body.dark-mode .notification-dropdown, body.dark-mode .search-suggestions-dropdown { background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow-lg); color: var(--text-body); } /* ---------- Mobile side menu (dark mode) ---------- */ body.dark-mode .mobile-menu { background: linear-gradient(180deg, #111a30 0%, #0b1220 100%); color: var(--text-body); border-left: 1px solid rgba(255, 255, 255, 0.06); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55); } body.dark-mode .mobile-menu-overlay { background: rgba(4, 8, 18, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* "Menu" title + close (X) icon. */ body.dark-mode .mobile-menu-top h3 { color: var(--text-dark); } body.dark-mode .mobile-menu-top .close-icon { /* index.css sets both background: #f1f5f9 and color: #64748b on the close circle. In dark mode we flip `color` to --text-dark which is also near-white (#f1f5f9), so the X ends up white on a white circle and disappears. Override the background too so the X has real contrast. */ background: rgba(255, 255, 255, 0.08) !important; color: var(--text-dark) !important; border: 1px solid rgba(255, 255, 255, 0.15); opacity: 0.95; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } body.dark-mode .mobile-menu-top .close-icon:hover { background: rgba(239, 68, 68, 0.18) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.4); opacity: 1; transform: rotate(90deg); } /* Nav link rows (anchors AND dropdown trigger buttons — the "Services" item is a