/* ═══════════════════════════════════════════════════════════════════ LIGHT MODE — overrides when [data-theme="light"] is on ═══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --text-main: #f0e8ff; --text-dim: rgba(220,200,255,0.55); --bg-main: #08050f; } /* ── Body & html ───────────────────────────────────────────────── */ html[data-theme="light"] { background: #08050f !important; } html[data-theme="light"] body, html[data-theme="light"] > body { background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(0,60,180,0.5), transparent 55%), radial-gradient(ellipse 80% 70% at 100% 100%, rgba(180,0,0,0.45), transparent 55%), radial-gradient(ellipse 60% 60% at 50% 50%, rgba(80,0,120,0.2), transparent 65%), linear-gradient(135deg, #08050f 0%, #0d0520 45%, #150310 100%) !important; background-attachment: scroll !important; color: #f0e8ff !important; } html[data-theme="light"] section:not(#home) { background: rgba(204,0,0,0.02); } /* ── Navbar ─────────────────────────────────────────────────────── */ html[data-theme="light"] nav { background: rgba(8,5,15,0.96); border-bottom: 1px solid rgba(204,0,0,0.25); box-shadow: 0 2px 20px rgba(0,60,180,0.1); } html[data-theme="light"] nav.shrunk { background: rgba(6,4,12,0.99); } html[data-theme="light"] .nav-hamburger span { background: #f0e8ff; } html[data-theme="light"] .nav-hamburger:hover span { background: #2277ff; } html[data-theme="light"] .nav-links a { color: #f0e8ff; } html[data-theme="light"] .nav-brand { color: #f0e8ff; } /* ── Cards ──────────────────────────────────────────────────────── */ html[data-theme="light"] .image-card { background: linear-gradient(160deg, rgba(0,60,180,0.2), rgba(8,5,15,0.92)); border: 1px solid rgba(0,85,204,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.5); } html[data-theme="light"] .image-card.is-ps5 { background: linear-gradient(160deg, rgba(180,0,0,0.2), rgba(8,5,15,0.92)); border-color: rgba(204,0,0,0.3); } html[data-theme="light"] .image-card-imgwrap { background: #05030c; } html[data-theme="light"] .image-card-img { background: radial-gradient(ellipse at center, rgba(0,60,180,0.12), #05030c 70%); } html[data-theme="light"] .image-card-imgwrap::after { background: linear-gradient(180deg, transparent 60%, rgba(8,5,15,0.9)); } html[data-theme="light"] .image-card-title { color: #f0e8ff; } html[data-theme="light"] .image-card-genre { color: rgba(200,180,255,0.55); } html[data-theme="light"] .image-card:hover { border-color: rgba(0,85,204,0.7); box-shadow: 0 25px 60px rgba(0,85,204,0.3), 0 0 0 1px rgba(204,0,0,0.15); } /* ── Section titles ─────────────────────────────────────────────── */ html[data-theme="light"] .section-title { color: #f0e8ff; } html[data-theme="light"] .dynamic-section-title { color: #f0e8ff; } /* ── Cart sidebar ───────────────────────────────────────────────── */ html[data-theme="light"] #cart-sidebar { background: rgba(8,5,15,0.99); border-left: 1px solid rgba(204,0,0,0.25); } html[data-theme="light"] .cart-item { background: rgba(0,85,204,0.06); border: 1px solid rgba(0,85,204,0.18); } html[data-theme="light"] .cart-item-name { color: #f0e8ff; } html[data-theme="light"] .cart-empty { color: rgba(200,180,255,0.4); } html[data-theme="light"] .cart-footer { background: rgba(8,5,15,0.99); border-top: 1px solid rgba(0,85,204,0.12); } /* ── Favorites sidebar ──────────────────────────────────────────── */ html[data-theme="light"] .favorite-sidebar { background: rgba(8,5,15,0.99); border-left: 1px solid rgba(204,0,0,0.25); } html[data-theme="light"] .favorite-sidebar-empty { color: rgba(200,180,255,0.4); } /* ── Category sidebar ───────────────────────────────────────────── */ html[data-theme="light"] .cat-sidebar { background: linear-gradient(180deg, #0a0518, #080415); border-left: 1px solid rgba(0,85,204,0.2); } html[data-theme="light"] .cat-sidebar-header h3 { color: #f0e8ff; } html[data-theme="light"] .cat-sidebar-header button { color: rgba(200,180,255,0.5); } html[data-theme="light"] .cat-sidebar-item { color: #f0e8ff; } /* ── Filter bar ─────────────────────────────────────────────────── */ html[data-theme="light"] .cat-filter-bar { background: transparent; } html[data-theme="light"] .cat-filter-row { background: linear-gradient(135deg, rgba(0,10,30,0.92), rgba(8,5,15,0.95)); border: 1px solid rgba(0,85,204,0.35); box-shadow: 0 0 24px rgba(0,85,204,0.1), 0 0 48px rgba(204,0,0,0.06); } html[data-theme="light"] .cat-filter-search { background: rgba(0,85,204,0.08); border: 1px solid rgba(0,85,204,0.3); color: #f0e8ff; } html[data-theme="light"] .cat-filter-search::placeholder { color: rgba(200,180,255,0.5); } html[data-theme="light"] .cat-filter-search:focus { border-color: rgba(0,85,204,0.7); box-shadow: 0 0 12px rgba(0,85,204,0.25); } html[data-theme="light"] .cat-filter-price span { color: #f0e8ff; } html[data-theme="light"] .price-value { color: #ff2244; font-weight: 700; } html[data-theme="light"] .custom-select-btn { background: rgba(0,85,204,0.1); border: 1px solid rgba(0,85,204,0.3); color: #f0e8ff; } html[data-theme="light"] .custom-select-dropdown { background: rgba(5,3,15,0.99); border: 1px solid rgba(0,85,204,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.6); } html[data-theme="light"] .custom-option { color: #f0e8ff; } html[data-theme="light"] .custom-option:hover, html[data-theme="light"] .custom-option:active { background: rgba(0,85,204,0.15); color: #2277ff; } html[data-theme="light"] .custom-option.selected { background: rgba(204,0,0,0.12); color: #ff2244; font-weight: 600; } html[data-theme="light"] .custom-select-btn:hover, html[data-theme="light"] .custom-select-btn.active { border-color: rgba(0,85,204,0.6); box-shadow: 0 0 10px rgba(0,85,204,0.2); background: rgba(0,85,204,0.12); } html[data-theme="light"] .custom-select-btn.has-value { border-color: rgba(204,0,0,0.5); color: #ff2244; } /* Price range slider red */ html[data-theme="light"] input[type=range], html[data-theme="light"] .cat-filter-slider { accent-color: #cc0000; background: transparent; padding: 0; } html[data-theme="light"] .cat-filter-slider::-webkit-slider-runnable-track { background: rgba(0,85,204,0.3); } html[data-theme="light"] .cat-filter-slider::-moz-range-track { background: rgba(0,85,204,0.3); } html[data-theme="light"] input[type=range]::-webkit-slider-thumb, html[data-theme="light"] .cat-filter-slider::-webkit-slider-thumb { background: #cc0000; box-shadow: 0 0 10px rgba(204,0,0,0.9); } html[data-theme="light"] .cat-filter-slider::-moz-range-thumb { background: #cc0000; box-shadow: 0 0 10px rgba(204,0,0,0.9); } html[data-theme="light"] input[type=range]::-webkit-slider-runnable-track { background: rgba(0,85,204,0.2); border-radius: 4px; } /* ── Hero section ───────────────────────────────────────────────── */ html[data-theme="light"] .hero-title { color: #f0e8ff; } html[data-theme="light"] .hero-sub { color: rgba(200,180,255,0.75); } html[data-theme="light"] .hero-tagline { color: rgba(0,85,204,0.8); } /* ── Stats ──────────────────────────────────────────────────────── */ html[data-theme="light"] .stat-label { color: rgba(0,85,204,0.85); } /* ── Ticker ─────────────────────────────────────────────────────── */ html[data-theme="light"] .ticker-heading { color: rgba(204,0,0,0.9); } html[data-theme="light"] .news-ticker-wrap { background: rgba(8,5,15,0.92); border-top: 1px solid rgba(0,85,204,0.12); border-bottom: 1px solid rgba(0,85,204,0.12); } html[data-theme="light"] .ticker-item { color: #f0e8ff; } html[data-theme="light"] .ticker-item:hover { background: rgba(0,85,204,0.08); } /* ── Toast ──────────────────────────────────────────────────────── */ html[data-theme="light"] #toast { background: #08050f; color: #f0e8ff; border: 2px solid #cc0000; box-shadow: 0 4px 20px rgba(204,0,0,0.35); } /* ── Modals ─────────────────────────────────────────────────────── */ html[data-theme="light"] .game-detail-box { background: rgba(8,5,15,0.99); border: 1px solid rgba(0,85,204,0.25); } html[data-theme="light"] .game-detail-name { color: #f0e8ff; } html[data-theme="light"] .game-detail-genre { color: rgba(0,85,204,0.85); } html[data-theme="light"] .game-detail-desc { color: rgba(200,180,255,0.7); } /* ── Bottom buttons ─────────────────────────────────────────────── */ html[data-theme="light"] .track-order-btn { background: rgba(0,85,204,0.08); border: 1px solid rgba(0,85,204,0.25); color: #f0e8ff; } /* ── Back to home ───────────────────────────────────────────────── */ html[data-theme="light"] .page-back-btn { background: rgba(0,85,204,0.08); color: #f0e8ff; border: 1px solid rgba(0,85,204,0.25); } /* ── Social offer row ───────────────────────────────────────────── */ html[data-theme="light"] .social-offer-text { color: rgba(200,180,255,0.65); } /* ── Theme toggle button ────────────────────────────────────────── */ #theme-toggle-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 7px; padding: 5px 10px; font-size: 1rem; cursor: pointer; line-height: 1; transition: background 0.2s, border-color 0.2s; } html[data-theme="light"] #theme-toggle-btn { background: rgba(204,0,0,.1); border-color: rgba(204,0,0,.35); color: #ff2244; } html[data-theme="light"] #lang-toggle-btn { background: rgba(0,85,204,.1); border-color: rgba(0,85,204,.3); color: #f0e8ff; } /* ── Hero decoratives ──────────────────────────────────────────── */ html[data-theme="light"] .split-line { background: linear-gradient(135deg, transparent 49.5%, rgba(204,0,0,0.2) 49.5%, rgba(204,0,0,0.2) 50.5%, transparent 50.5%); } html[data-theme="light"] .hero-grid-bg { background-image: linear-gradient(rgba(204,0,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,85,204,0.06) 1px, transparent 1px); } html[data-theme="light"] .hero-bg { background: radial-gradient(ellipse at 15% 50%, rgba(204,0,0,0.2) 0%, transparent 55%), radial-gradient(ellipse at 85% 50%, rgba(0,85,204,0.2) 0%, transparent 55%); } html[data-theme="light"] .scanlines { opacity: 0.3; } /* bg symbols — teal + pink */ html[data-theme="light"] .bg-symbol.s-x { color: rgba(204,0,0,0.35); } html[data-theme="light"] .bg-symbol.s-circle { color: rgba(0,85,204,0.38); } html[data-theme="light"] .bg-symbol.s-square { color: rgba(0,85,204,0.30); } html[data-theme="light"] .bg-symbol.s-triangle { color: rgba(204,0,0,0.30); } html[data-theme="light"] .bg-symbol.bright.s-x { color: rgba(204,0,0,0.75); } html[data-theme="light"] .bg-symbol.bright.s-circle { color: rgba(0,85,204,0.80); } html[data-theme="light"] .bg-symbol.bright.s-square { color: rgba(0,85,204,0.70); } html[data-theme="light"] .bg-symbol.bright.s-triangle { color: rgba(204,0,0,0.70); } /* ── Section line glow ──────────────────────────────────────────── */ html[data-theme="light"] .section-line { background: linear-gradient(90deg, transparent, #cc0000, #0055cc, transparent); box-shadow: 0 0 10px #cc0000; } /* ── Scrollbar teal ─────────────────────────────────────────────── */ html[data-theme="light"] .cart-items::-webkit-scrollbar-thumb { background: #cc0000; } html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(0,85,204,0.5); }