/* ── FWS Lighter add-on ──────────────────────────────────── Activated by Flips the entire site to a white-ish palette. Black only for text — backgrounds go white/light-gray. Transition only fires while fws-theme-transitioning is set (shared with _darker.css, ~400ms). ──────────────────────────────────────────────────────── */ /* ── CSS variable overrides ── */ html.fws-lighter { --fws-new-gray: #f5f5f5; --fws-new-gray-dark: #ebebeb; --fws-white: #ffffff; --fws-black: #111111; --fws-border: #d9d9d9; --fws-bg-hover: #e5e5e5; --fws-disabled: #aaaaaa; --fws-toggle-off: #cccccc; } /* ── Base ── */ html.fws-lighter body { background-color: #f5f5f5 !important; color: #111111 !important; } /* ── Section backgrounds ── */ html.fws-lighter .bg-black { background-color: #ffffff !important; } html.fws-lighter .bg-zinc-900 { background-color: #f5f5f5 !important; } html.fws-lighter .bg-zinc-800 { background-color: #ebebeb !important; } html.fws-lighter .bg-fws-new-gray { background-color: #f5f5f5 !important; } html.fws-lighter .bg-fws-new-gray-dark { background-color: #ebebeb !important; } html.fws-lighter .border-zinc-700 { border-color: #d9d9d9 !important; } /* ── Text colors ── */ html.fws-lighter .text-white { color: #111111 !important; } html.fws-lighter .text-gray-300, html.fws-lighter .text-gray-400, html.fws-lighter .text-zinc-100, html.fws-lighter .text-zinc-200, html.fws-lighter .text-zinc-300 { color: #555555 !important; } /* ── Navbar — white background, dark links ── */ html.fws-lighter .fws-nav { background-color: #e0e0e0 !important; } /* Disable the invert afterglow — it inverts white→black on a light page */ html.fws-lighter .fws-nav::after { display: none; } /* Diamond: barely visible on white nav */ html.fws-lighter .nav-diamond path { fill: #fff !important; } /* Nav button hover */ html.fws-lighter .hover\:bg-zinc-800:hover { background-color: #eeeeee !important; } /* ── Dropdowns ── */ html.fws-lighter .dropdown-content { background-color: #ffffff !important; border-color: #d9d9d9 !important; } html.fws-lighter .dropdown-item { color: #111111 !important; } html.fws-lighter .dropdown-item:hover { background-color: #eeeeee !important; } /* Language dropdown (Tailwind-classed) */ html.fws-lighter #languageDropdown { background-color: #ffffff !important; border-color: #d9d9d9 !important; } html.fws-lighter #languageDropdown button { color: #111111 !important; } html.fws-lighter #languageDropdown .border-b { border-color: #d9d9d9 !important; } /* Cart dropdown portal */ html.fws-lighter #cartDropdown { background-color: #ffffff !important; border-color: #d9d9d9 !important; color: #111111 !important; } html.fws-lighter #cartDropdown .text-white { color: #111111 !important; } html.fws-lighter #cartDropdown .text-gray-300, html.fws-lighter #cartDropdown .text-gray-400 { color: #555555 !important; } html.fws-lighter #cartDropdown .border-zinc-700 { border-color: #d9d9d9 !important; } /* ── Buttons — flip default to dark-on-white ── */ html.fws-lighter .fws-button { background: #111111 !important; border-color: #111111 !important; color: #ffffff !important; } html.fws-lighter .fws-button:hover { box-shadow: 0 0 20px rgba(0,0,0,0.15) !important; } /* ── Modal ── */ html.fws-lighter .modal-content { background-color: #ffffff !important; border-color: #d9d9d9 !important; color: #111111 !important; } /* ── Homepage hero — swap to lighter variant ── */ html.fws-lighter .fws-hero { background-image: url('../images/hero_lighter.png'); } /* ── Star ratings — dark stars on light bg ── */ html.fws-lighter .star-rating::after { color: rgba(0,0,0,.15); } html.fws-lighter .star-rating::before { color: #333333; } /* ── Social section ── */ html.fws-lighter .bg-fws-new-gray-dark .text-white { color: #111111 !important; } /* ── Footer ── */ /* footer already has bg-white + text-gray-800 — naturally fits lighter mode */ /* ── Logo transition baseline ── */ #fws-logo-desktop, #fws-hero-logo { transition: opacity 0.35s ease; } /* ════════════════════════════════════════════════ SHOP PAGE ════════════════════════════════════════════════ */ /* ── Search bar — flip from black to light ── */ html.fws-lighter .shop-searchbar { background: #e8e8e8 !important; } html.fws-lighter .shop-searchbar svg { color: #333333 !important; } html.fws-lighter .shop-searchbar input { color: #111111 !important; border-bottom-color: rgba(0,0,0,.35) !important; } html.fws-lighter .shop-searchbar input::placeholder { color: rgba(0,0,0,.35) !important; } /* ── Hero swiper — hardcoded dark slide bg ── */ html.fws-lighter .hero-swiper .swiper-slide { background: #f0f0f0 !important; } /* ── Card titles & prices (color: var(--fws-white) → invisible on light bg) ── */ html.fws-lighter .game-card-title { color: #111111 !important; } html.fws-lighter .game-card-price { color: #111111 !important; } html.fws-lighter .game-card-price-original { color: rgba(0,0,0,.4) !important; } html.fws-lighter .fws-game-card-title { color: #111111 !important; } html.fws-lighter .fws-games-title { color: #111111 !important; } /* ── Section headings ── */ html.fws-lighter .other-creator-title { color: #111111 !important; } html.fws-lighter .discover-section .section-title { color: #111111 !important; } /* ── Discover category pills — hardcoded rgba(white) border+color ── */ html.fws-lighter .discover-cat-pill { border-color: rgba(0,0,0,.25) !important; color: #333333 !important; } html.fws-lighter .discover-cat-pill:hover, html.fws-lighter .discover-cat-pill.active { background: #111111 !important; color: #ffffff !important; border-color: #111111 !important; } /* ── Discover thumbnail active indicator ── */ html.fws-lighter .discover-thumb.is-active { border-color: #333333 !important; } /* ════════════════════════════════════════════════ CART PAGE ════════════════════════════════════════════════ */ /* ── Header ── */ html.fws-lighter .cart-title { color: #111111 !important; } /* ── Item rows ── */ html.fws-lighter .cart-item-title { color: #111111 !important; } html.fws-lighter .cart-item-price { color: #111111 !important; } html.fws-lighter .cart-item-original { color: rgba(0,0,0,.4) !important; } html.fws-lighter .cart-item-qty { color: rgba(0,0,0,.45) !important; } /* ── Gift dropdown ── */ html.fws-lighter .cart-item-gift-btn { color: rgba(0,0,0,.45) !important; } html.fws-lighter .cart-item-gift-btn:hover { color: rgba(0,0,0,.8) !important; } html.fws-lighter .cart-gift-menu { border-color: rgba(0,0,0,.12) !important; } html.fws-lighter .cart-gift-option { color: rgba(0,0,0,.55) !important; } html.fws-lighter .cart-gift-option:hover { background: rgba(0,0,0,.06) !important; color: #111111 !important; } html.fws-lighter .cart-gift-option.is-active { color: #111111 !important; } /* ── Empty state ── */ html.fws-lighter .cart-empty { color: rgba(0,0,0,.4) !important; } html.fws-lighter .cart-empty p:first-of-type { color: #111111 !important; } /* ── Footer totals ── */ html.fws-lighter .cart-total-label { color: #111111 !important; } html.fws-lighter .cart-total-price { color: #111111 !important; } /* ── Recommendations ── */ html.fws-lighter .cart-reco-title { color: #111111 !important; } html.fws-lighter .cart-reco-card-title { color: #111111 !important; } html.fws-lighter .cart-reco-card-price { color: rgba(0,0,0,.5) !important; } html.fws-lighter .cart-reco-swiper .swiper-button-next, html.fws-lighter .cart-reco-swiper .swiper-button-prev { box-shadow: 0 0 0 1px rgba(0,0,0,.15); }