/* ============================================ DARK MODE — Rafif Modest Wear Applied via [data-theme="dark"] on ============================================ */ [data-theme="dark"] { /* Backgrounds */ --color-bg: #1A1612; --color-bg-alt: #221E19; --color-bg-dark: #F7F4EF; /* Text */ --color-text-primary: #EDE7DC; --color-text-muted: #B8AFA6; --color-text-faint: #7A6E64; --color-text-light: #5A4E44; /* Borders */ --color-border: #2E2820; --color-border-dark: #3E3630; /* Accent */ --color-accent: #C8A882; } /* --- Smooth transition on theme change --- */ html { transition: background-color 0.35s ease, color 0.35s ease; } html *, html *::before, html *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease; } /* Don't slow down interaction transitions (hover, animations) */ html .hero__cta, html .product-card, html .navbar__action-btn, html .category-card, html .filter-btn, html .sidebar-filter, html .btn, html .marquee__track { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.22s ease, opacity 0.22s ease; } /* --- Hero --- */ [data-theme="dark"] .hero__visual { background-color: #221E19; } /* --- Navbar --- */ [data-theme="dark"] .navbar { background-color: var(--color-bg); border-bottom-color: var(--color-border); } [data-theme="dark"] .navbar--scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } /* --- Marquee --- */ [data-theme="dark"] .marquee { background-color: #0E0C09; } /* --- Product card coming soon blur overlay --- */ [data-theme="dark"] .product-card__soon-label { background: rgba(26, 22, 18, 0.5); color: var(--color-text-primary); } /* --- About --- */ [data-theme="dark"] .about--simple { background-color: var(--color-bg-alt); } /* --- Values --- */ [data-theme="dark"] .value-card:hover { background-color: #2A2420; } /* --- Hero CTA --- */ [data-theme="dark"] .hero__cta { background-color: var(--color-text-primary); color: var(--color-bg); } [data-theme="dark"] .hero__cta:hover { opacity: 0.85; } /* --- Product page gallery --- */ [data-theme="dark"] .product-gallery { background-color: var(--color-bg-alt); } /* --- Guide page --- */ [data-theme="dark"] .guide-cta { background-color: #0E0C09; } /* --- Footer --- */ [data-theme="dark"] .footer { background-color: #0E0C09; } [data-theme="dark"] .footer__bottom { border-top-color: #1A1612; } /* --- Mobile menu --- */ [data-theme="dark"] .mobile-menu { background-color: var(--color-bg); } /* --- Dark mode toggle button --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: none; border: 0.5px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); font-size: 14px; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--color-text-faint); color: var(--color-text-primary); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }