/* ── FWS Darker add-on ───────────────────────────────────── Activated by Reduces harsh whites across the whole site. Transition only fires while fws-theme-transitioning is set (added/removed by JS around the class toggle, ~400ms). ──────────────────────────────────────────────────────── */ /* Scoped transition — plays only during the theme switch */ html.fws-theme-transitioning *, html.fws-theme-transitioning *::before, html.fws-theme-transitioning *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, opacity 0.4s ease !important; } /* ── CSS variable overrides ── */ html.fws-darker { --fws-white: #ffffff; /* white stays white for text, but backgrounds go darker */ --fws-black: #0e0e0e; --fws-bubble: #2b37c2; --fws-toggle-off: #888; --fws-border: #3a3a3a; --fws-bg-hover: #212121; --fws-disabled: #444; --fws-white-bg-replacement: #1a1a1a; /* for elements that would be too glaring if left white */ } /* ── Homepage hero — swap to darker variant ── */ html.fws-darker .fws-hero { background-image: url('../images/hero_darker.png'); } /* ── Navbar SVG diamond — very dark, nearly invisible against black bar ── */ html.fws-darker .nav-diamond path { fill: #191919 !important; } /* ── Desktop logo always transitions opacity smoothly ── */ #fws-logo-desktop { transition: opacity 0.35s ease; } /* ── Tailwind bg-white (footer, any miscellaneous usage) ── */ html.fws-darker .bg-white { background-color: var(--fws-white-bg-replacement) !important; } /* ── Footer text: keep legible on dimmed background ── */ html.fws-darker #fws-page-footer { background: var(--fws-white-bg-replacement) !important; color: var(--fws-white) !important; } /* ── Cart / language dropdowns (Tailwind bg-zinc-*) ── */ html.fws-darker .bg-zinc-900 { background-color: #111111 !important; } html.fws-darker .bg-zinc-800 { background-color: #171717 !important; } html.fws-darker .border-zinc-700 { border-color: #2a2a2a !important; } /* ── White-bg elements: replace glaring white backgrounds ── */ html.fws-darker .fws-settings-panel { background: var(--fws-white-bg-replacement) !important; color: var(--fws-white) !important; } html.fws-darker .fws-cog-btn { background: var(--fws-white-bg-replacement) !important; color: var(--fws-white) !important; } html.fws-darker .fws-social-btn { background: var(--fws-white-bg-replacement) !important; color: var(--fws-white) !important; } /* shop.css — angled promo label */ html.fws-darker .promo-banner-label { background: var(--fws-white-bg-replacement) !important; color: var(--fws-white) !important; } /* ════════════════════════════════════════════════ CART PAGE ════════════════════════════════════════════════ */ /* Cart is already dark-themed; only the Swiper nav buttons (white circles) need a slight dimming so they're less glaring on a near-black background. */ html.fws-darker .cart-reco-swiper .swiper-button-next, html.fws-darker .cart-reco-swiper .swiper-button-prev { background: #d8d8d8 !important; }