/* ════════════════════════════════════════════════════════ ALBIR — theme-dark.css Dark theme for the storefront. Activated by ; without it the site stays light. Strategy: flip the neutral tokens, then pin brand-black surfaces (header, footer, pill nav) so they stay dark. ════════════════════════════════════════════════════════ */ /* Smooth switch */ body, .site-header, .site-footer, .cart-drawer { transition: background 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-theme="dark"] { /* Flipped neutrals: --white is "surface", --black is "ink" */ --white: #131110; --black: #f0ede6; --gray-50: #191713; --gray-100: #221f1a; --gray-200: #2d2a24; --gray-300: #3e3a32; --gray-500: #97907f; --gray-700: #d8d2c6; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5); --shadow-md: 0 4px 20px rgba(0,0,0,0.55); --shadow-lg: 0 8px 40px rgba(0,0,0,0.65); /* Glass tokens flip to their dark variants */ --glass-light-bg: rgba(24, 22, 18, 0.72); --glass-light-border: rgba(255, 255, 255, 0.12); --glass-inset: rgba(255, 255, 255, 0.045); --glass-hairline: rgba(255, 255, 255, 0.12); --input-bg: rgba(255, 255, 255, 0.05); --input-bg-focus: rgba(255, 255, 255, 0.09); --input-border: rgba(255, 255, 255, 0.14); --input-ring: rgba(200, 169, 110, 0.28); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* ── Brand-black surfaces stay black ───────────────────────── Inside these sections the neutral tokens are re-pinned to their original meaning (--black = ink-dark canvas, --white = light text) so `background: var(--black)` stays black and text stays readable. */ [data-theme="dark"] .site-header:not(.header-light), [data-theme="dark"] .site-footer, [data-theme="dark"] .hero, [data-theme="dark"] .brand-story, [data-theme="dark"] .lifestyle-strip, [data-theme="dark"] .whatsapp-banner, [data-theme="dark"] .gallery-hero { --black: #0b0a08; --white: #f0ede6; --gray-700: #b3aca0; --gray-500: #8a8375; } [data-theme="dark"] .site-header:not(.header-light) { background: #0b0a08; color: #f0ede6; } [data-theme="dark"] .site-footer { background: #0b0a08; color: #f0ede6; } /* header-light pages: the flipped tokens make the bar dark — swap to the white logo and soften the divider. */ [data-theme="dark"] .site-header.header-light { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .site-header.header-light .logo-dark { display: none; } [data-theme="dark"] .site-header.header-light .logo-white { display: block; } /* ── Components with hardcoded light colors ──────────── */ [data-theme="dark"] .badge--pending { background: rgba(229, 180, 94, 0.16); color: #e5b45e; } [data-theme="dark"] .cart-item__remove:hover, [data-theme="dark"] [style*="background:#fff0f0"] { background: rgba(240, 127, 116, 0.14) !important; } /* Cart drawer inherits the flipped glass tokens; deepen the scrim */ [data-theme="dark"] .cart-drawer-overlay { background: rgba(0, 0, 0, 0.72); } /* ── Newsletter popup ────────────────────────────────── */ [data-theme="dark"] .popup-modal { background: rgba(26, 24, 20, 0.92); color: #f0ede6; border: 1px solid rgba(255,255,255,0.1); } [data-theme="dark"] .popup-title, [data-theme="dark"] .popup-coupon-code { color: #f0ede6; } [data-theme="dark"] .popup-subtitle { color: #a49d90; } [data-theme="dark"] .popup-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #f0ede6; } [data-theme="dark"] .popup-input::placeholder { color: #7d766a; } /* Storefront form inputs: readable placeholder on the dark input surface */ [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder { color: #8a8375; } /* ── AI chat widget ──────────────────────────────────── */ [data-theme="dark"] #albir-chat-win { background: rgba(22, 20, 17, 0.88); border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] #albir-chat-msgs { background: rgba(16, 14, 12, 0.4); } [data-theme="dark"] .chat-msg.bot { background: rgba(255, 255, 255, 0.08); color: #e5e0d6; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chat-msg.user { background: #c8a96e; color: #16130e; } [data-theme="dark"] #albir-chat-form { background: rgba(20, 18, 15, 0.6); border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] #albir-chat-input { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); color: #f0ede6; } [data-theme="dark"] #albir-chat-intro { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.07); color: #c8a96e; } /* ── Media & imagery ─────────────────────────────────── */ [data-theme="dark"] img { filter: brightness(0.94); } [data-theme="dark"] .site-header img, [data-theme="dark"] .site-footer img, [data-theme="dark"] .mob-pill img { filter: none; } /* ── Inline-style rescues (page markup with hardcoded colours) ── */ [data-theme="dark"] [style*="border:2px solid #000"] { border-color: #f0ede6 !important; } [data-theme="dark"] [style*="border:2px solid #e0e0e0"], [data-theme="dark"] [style*="border:1.5px solid #e0e0e0"], [data-theme="dark"] [style*="border:1px solid #e0e0e0"] { border-color: rgba(255,255,255,0.2) !important; } [data-theme="dark"] [style*="accent-color:#000"] { accent-color: #c8a96e !important; } [data-theme="dark"] [style*="background:#000"]:not(a) { background: #f0ede6 !important; color: #16130e !important; } [data-theme="dark"] [style*="background:#fff3cd"] { background: rgba(229, 180, 94, 0.14) !important; border-color: rgba(229, 180, 94, 0.4) !important; color: #e5b45e !important; } [data-theme="dark"] [style*="background:#fff0f0"] { background: rgba(240, 127, 116, 0.13) !important; border-color: rgba(240, 127, 116, 0.4) !important; color: #f07f74 !important; } [data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff0"]):not([style*="background:#fff3"]) { background: #1d1b17 !important; color: #f0ede6 !important; } [data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color:#555"] { color: #a49d90 !important; } [data-theme="dark"] [style*="color:#111"], [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color:#000"] { color: #f0ede6 !important; } /* ── Theme toggle button (both themes) ───────────────── */ .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: block; } [data-theme="dark"] .theme-toggle .ic-sun { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: none; }