/* ═══════════════════════════════════════════════════════════════ ROSH STOREFRONT — DARK THEME OVERRIDES Applied when has class "dark" ═══════════════════════════════════════════════════════════════ */ /* ─── CSS Custom Properties for Dark Theme ─── */ .dark { --dark-bg: #0a0a0b; --dark-bg-secondary: #111113; --dark-bg-card: #141416; --dark-bg-elevated: #1a1a1e; --dark-bg-input: #1e1e22; --dark-bg-hover: #222226; --dark-border: #2a2a2e; --dark-border-subtle: #1e1e22; --dark-text: #f4f4f5; --dark-text-secondary: #a1a1aa; --dark-text-muted: #71717a; color-scheme: dark; } /* ─── Global Body ─── */ .dark body { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } /* ─── Smooth transition for theme switching ─── */ html.dark *, html.dark *::before, html.dark *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ─── Header & Navigation ─── */ .dark header { background-color: var(--dark-bg) !important; border-bottom-color: var(--dark-border) !important; } .dark header a, .dark header button, .dark header span { color: var(--dark-text-secondary) !important; } .dark header a:hover, .dark header button:hover { color: #ffffff !important; } /* Navigation pills */ .dark header .bg-gray-100, .dark #clothingBtn { background-color: #1e1e22 !important; color: var(--dark-text) !important; } .dark #clothingBtn:hover { background-color: #27272a !important; } .dark header .border-gray-200, .dark header .border-gray-100 { border-color: var(--dark-border) !important; } .dark header a.border-gray-200 { color: var(--dark-text-secondary) !important; border-color: var(--dark-border) !important; } .dark header a.border-gray-200:hover, .dark header a.hover\:bg-gray-50:hover { background-color: var(--dark-bg-hover) !important; color: #ffffff !important; } /* Clothing dropdown */ .dark #clothingDropdown { background-color: var(--dark-bg-elevated) !important; border-color: var(--dark-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } .dark #clothingDropdown a { color: var(--dark-text-secondary) !important; } .dark #clothingDropdown a:hover { background-color: var(--dark-bg-hover) !important; color: #ffffff !important; } /* Search inputs in header */ .dark header input, .dark #mobile-search-container input { background-color: var(--dark-bg-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark header input::placeholder, .dark #mobile-search-container input::placeholder { color: var(--dark-text-muted) !important; } .dark header input:focus { box-shadow: 0 0 0 1px #52525b !important; } /* Cart badge */ .dark .cart-badge { background-color: #ffffff !important; color: #000000 !important; border-color: var(--dark-bg) !important; } /* ─── Main Content Areas ─── */ .dark main { color: var(--dark-text) !important; } /* Generic white backgrounds → dark */ .dark .bg-white { background-color: var(--dark-bg-card) !important; } .dark .bg-gray-50, .dark .bg-gray-100, .dark .bg-neutral-100 { background-color: var(--dark-bg-secondary) !important; } /* Text color overrides */ .dark .text-black, .dark .text-gray-900, .dark .text-gray-950, .dark .text-gray-800 { color: var(--dark-text) !important; } .dark .text-gray-700, .dark .text-gray-600 { color: var(--dark-text-secondary) !important; } .dark .text-gray-500, .dark .text-gray-400 { color: var(--dark-text-muted) !important; } .dark .text-gray-300 { color: #d1d5db !important; } /* Border overrides */ .dark .border-gray-100, .dark .border-gray-200, .dark .border-gray-300 { border-color: var(--dark-border) !important; } .dark .divide-gray-100 > * + *, .dark .divide-gray-200 > * + * { border-color: var(--dark-border) !important; } /* ─── Buttons ─── */ .dark .bg-black { background-color: #ffffff !important; color: #000000 !important; } .dark .bg-black:hover, .dark .hover\:bg-neutral-800:hover { background-color: #e4e4e7 !important; color: #000000 !important; } .dark button.bg-black, .dark a.bg-black { background-color: #ffffff !important; color: #000000 !important; } /* ─── Form Inputs (Global) ─── */ .dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.newsletter-input), .dark select, .dark textarea { background-color: var(--dark-bg-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark input.bg-transparent:not(.otp-box), .dark select.bg-transparent, .dark textarea.bg-transparent { background-color: transparent !important; border-color: transparent !important; border-width: 0 !important; box-shadow: none !important; } .dark input::placeholder, .dark textarea::placeholder { color: var(--dark-text-muted) !important; } .dark input:focus, .dark select:focus, .dark textarea:focus { border-color: #52525b !important; box-shadow: 0 0 0 1px #52525b !important; } /* ─── Product Show Cards ─── */ .dark .product-show-card { background: var(--dark-bg-card) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2) !important; } .dark .product-show-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3) !important; } .dark .product-show-card__info { background: var(--dark-bg-card) !important; } .dark .product-show-card__name { color: var(--dark-text) !important; } .dark .product-show-card__desc { color: var(--dark-text-muted) !important; } .dark .product-show-card__stats { color: var(--dark-text-muted) !important; } .dark .product-show-card__cart-btn { background: var(--dark-bg-elevated) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } .dark .product-show-card__cart-btn:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } .dark .product-show-card__quick-view { background: rgba(30, 30, 34, 0.85) !important; color: var(--dark-text-secondary) !important; } .dark .product-show-card__quick-view:hover { background: rgba(30, 30, 34, 1) !important; color: #ffffff !important; } .dark .product-show-card__wishlist { background: rgba(30, 30, 34, 0.85) !important; color: var(--dark-text-muted) !important; } .dark .product-show-card__wishlist:hover { background: rgba(30, 30, 34, 1) !important; } .dark .product-show-card__brand-badge { background: #ffffff !important; } .dark .product-show-card__brand-badge svg { color: #000000 !important; } /* ─── Hero Section ─── */ .dark .bg-\[\#181818\] { background-color: #0d0d0d !important; } /* ─── Breadcrumbs ─── */ .dark nav .text-gray-400, .dark nav .text-gray-300 { color: var(--dark-text-muted) !important; } .dark nav .text-gray-800, .dark nav .text-gray-900 { color: var(--dark-text) !important; } /* ─── Filter Sidebar / Drawer ─── */ .dark #filter-drawer { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } .dark .filter-category-checkbox, .dark .filter-brand-checkbox, .dark .filter-avail-checkbox { background-color: var(--dark-bg-input) !important; border-color: var(--dark-border) !important; } .dark .filter-category-checkbox:checked, .dark .filter-brand-checkbox:checked, .dark .filter-avail-checkbox:checked { background-color: #ffffff !important; border-color: #ffffff !important; } .dark .filter-category-checkbox:checked::after, .dark .filter-brand-checkbox:checked::after, .dark .filter-avail-checkbox:checked::after { border-color: #000000 !important; } .dark .filter-rating-radio { background-color: var(--dark-bg-input) !important; border-color: var(--dark-border) !important; } .dark .filter-rating-radio:checked { border-color: #ffffff !important; } .dark .filter-rating-radio:checked::after { background-color: #ffffff !important; } /* Range slider */ .dark input[type="range"] { background: var(--dark-border) !important; } .dark input[type="range"]::-webkit-slider-thumb { background: #ffffff !important; border-color: var(--dark-bg) !important; } /* ─── Modals & Overlays ─── */ .dark .bg-black.bg-opacity-50, .dark .bg-black.bg-opacity-70 { background-color: rgba(0, 0, 0, 0.7) !important; } .dark #productDetailModal, .dark .fixed .bg-white { background-color: var(--dark-bg-card) !important; } /* ─── Footer ─── */ .dark footer { background-color: var(--dark-bg) !important; border-top-color: var(--dark-border) !important; color: var(--dark-text-secondary) !important; } .dark footer h4 { color: var(--dark-text) !important; } .dark footer a { color: var(--dark-text-muted) !important; } .dark footer a:hover { color: #ffffff !important; } .dark footer input:not(.newsletter-input) { background-color: var(--dark-bg-input) !important; } .dark .newsletter-form .newsletter-input{ background: transparent !important; } .dark footer .border-gray-800, .dark footer .border-t { border-color: var(--dark-border) !important; } /* ─── Checkout Page Specifics ─── */ .dark .glass-panel { background: rgba(15, 15, 15, 0.75) !important; border-color: var(--dark-border) !important; } .dark .luxury-card { background: linear-gradient(135deg, #2a2a2e 0%, #141416 100%) !important; } .dark .payment-method-selector { border-color: var(--dark-border) !important; background-color: var(--dark-bg-card) !important; } .dark .payment-method-selector .text-gray-900, .dark .payment-method-selector span { color: var(--dark-text) !important; } .dark .payment-method-selector .text-gray-700 { color: var(--dark-text-secondary) !important; } .dark .payment-method-selector .text-gray-400 { color: var(--dark-text-muted) !important; } .dark .payment-method-selector.border-black, .dark label.payment-method-selector:has(input:checked) { border-color: #ffffff !important; background-color: var(--dark-bg-elevated) !important; } .dark .payment-panel .bg-gray-50 { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } .dark .payment-panel .bg-amber-50 { background-color: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.2) !important; } .dark .payment-panel .bg-amber-100\/50 { background-color: rgba(245, 158, 11, 0.06) !important; } .dark .payment-panel .bg-white { background-color: var(--dark-bg-card) !important; } /* ─── Cart Page Specifics ─── */ .dark .shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } /* ─── Account Page ─── */ .dark .rounded-\[24px\] { border-color: var(--dark-border) !important; } /* ─── About / Blog / Contact / FAQ / Legal Pages ─── */ .dark section { color: var(--dark-text) !important; } .dark .bg-\[\#f5f5f5\], .dark .bg-\[\#fafafa\], .dark .bg-neutral-50 { background-color: var(--dark-bg-secondary) !important; } /* ─── Toast Notifications ─── */ .dark .bg-black.text-white { background-color: #ffffff !important; color: #000000 !important; } /* ─── Track / Order Confirmation ─── */ .dark .ring-1 { --tw-ring-color: var(--dark-border) !important; } /* ─── Scroll Bars ─── */ .dark .custom-scroll::-webkit-scrollbar-track { background: var(--dark-bg-secondary) !important; } .dark .custom-scroll::-webkit-scrollbar-thumb { background: var(--dark-border) !important; } /* ─── Accessibility Dropdown ─── */ .dark #accessibilityDropdown { background-color: var(--dark-bg-elevated) !important; border-color: var(--dark-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } /* ─── Selection Color ─── */ .dark ::selection { background-color: rgba(255, 255, 255, 0.2); color: #ffffff; } /* ─── Images & SVGs in dark context ─── */ .dark .dark\:hidden { display: none !important; } .dark .hidden.dark\:block { display: block !important; } /* ─── Theme Toggle Button ─── */ .theme-toggle-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: #6b7280; padding: 0; overflow: hidden; } .theme-toggle-btn:hover { color: #111827; transform: scale(1.05); } .dark .theme-toggle-btn { color: var(--dark-text-muted); } .dark .theme-toggle-btn:hover { color: #ffffff; } .theme-toggle-btn svg { width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .theme-toggle-btn .sun-icon { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle-btn .moon-icon { position: absolute; opacity: 1; transform: rotate(0deg) scale(1); } .dark .theme-toggle-btn .sun-icon { opacity: 1; transform: rotate(0deg) scale(1); } .dark .theme-toggle-btn .moon-icon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* ─── OAuth Login Page (Simulated Providers) ─── */ .dark .oauth-login-page, .dark .oauth-card { background-color: var(--dark-bg-card) !important; color: var(--dark-text) !important; } /* ======================================================== Newsletter Subscription styling (Light & Dark Modes) ======================================================== */ /* General / Light Mode */ .newsletter-form { background-color: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 9999px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; } .newsletter-form .newsletter-input { background: transparent !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 8px 16px !important; margin: 0 !important; color: #111827 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; letter-spacing: 0 !important; vertical-align: middle !important; height: auto !important; width: 100% !important; } .newsletter-form .newsletter-input::placeholder { color: #9ca3af !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; vertical-align: middle !important; } .newsletter-form .newsletter-btn { background-color: #1c1c1c !important; color: #ffffff !important; border-radius: 9999px !important; padding: 10px 24px !important; font-size: 14px !important; font-weight: 500 !important; transition: background-color 0.2s ease !important; } .newsletter-form .newsletter-btn:hover { background-color: #000000 !important; } /* Dark Mode overrides */ .dark .newsletter-form { background: #111113 !important; /* Premium dark capsule background */ border: 1px solid #232326 !important; box-shadow: none !important; } .dark .newsletter-form .newsletter-input { background: transparent !important; background-color: transparent !important; color: #f4f4f5 !important; border: none !important; box-shadow: none !important; } .dark .newsletter-form .newsletter-input::placeholder { color: #8b8b94 !important; } .dark .newsletter-form .newsletter-btn { background: #ffffff !important; /* Solid white button */ color: #000000 !important; /* Black text */ } .dark .newsletter-form .newsletter-btn:hover { background: #f2f2f2 !important; color: #000000 !important; } /* ─── Chatbot Button Dark Mode Overrides ─── */ .dark #rosh-chatbot-trigger { background-color: var(--dark-bg-input) !important; border-color: var(--dark-border) !important; } .dark #rosh-chatbot-trigger:hover { background-color: var(--dark-bg-hover) !important; }