/* shop-theme.css — scroll-reveal animation + light/neon-dark theme. Shared by shop.html, game-detail.html, my-orders.html, order-detail.html. Dark mode works by overriding the Tailwind utility classes the pages already use: `html[data-theme="dark"] .bg-white` out-specifies `.bg-white`, so no !important is needed. Only NEUTRAL utilities are remapped — brand pinks / vivid gradients keep their color and gain a neon glow instead. Readability first: body text gets NO glow, contrast stays high. */ /* ============ 1. Scroll reveal (both themes) ============ */ /* JS tags elements with .rx-reveal and flips them to .rx-in when they scroll into view. --rx-d is a per-element stagger delay set by JS. */ .rx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--rx-d, 0ms), transform .7s cubic-bezier(.16, 1, .3, 1) var(--rx-d, 0ms); } .rx-reveal.rx-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rx-reveal { opacity: 1; transform: none; transition: none; } } /* ============ 2. Theme toggle button (injected by shop-theme.js) ===== */ .rx-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 10px; margin-right: 4px; background: #f1f5f9; color: #64748b; border: 1px solid transparent; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; } .rx-theme-btn:hover { color: #0f172a; background: #e2e8f0; } .rx-theme-btn svg { width: 16px; height: 16px; } .rx-theme-btn .rx-sun { display: none; } .rx-theme-btn .rx-moon { display: block; } html[data-theme="dark"] .rx-theme-btn { background: rgba(236, 72, 153, .10); border-color: rgba(236, 72, 153, .30); color: #ffd166; box-shadow: 0 0 12px rgba(236, 72, 153, .25); } html[data-theme="dark"] .rx-theme-btn:hover { box-shadow: 0 0 18px rgba(236, 72, 153, .45); background: rgba(236, 72, 153, .16); } html[data-theme="dark"] .rx-theme-btn .rx-sun { display: block; filter: drop-shadow(0 0 4px rgba(255, 209, 102, .7)); } html[data-theme="dark"] .rx-theme-btn .rx-moon { display: none; } /* ============ 3. Neon-dark theme ============ */ html[data-theme="dark"] { color-scheme: dark; } /* Page canvas: deep space navy + fixed ambient neon glows. */ html[data-theme="dark"] body { background-color: #070a14; background-image: radial-gradient(55% 40% at 85% -5%, rgba(236, 72, 153, .13), transparent 60%), radial-gradient(50% 40% at 0% 110%, rgba(139, 92, 246, .12), transparent 60%); background-attachment: fixed; color: #dde3f0; } html[data-theme="dark"] ::selection { background: rgba(236, 72, 153, .45); color: #fff; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, .5); } /* --- surfaces --- */ html[data-theme="dark"] .bg-white { background-color: #0f1426; } html[data-theme="dark"] .bg-white\/70 { background-color: rgba(15, 20, 38, .70); } html[data-theme="dark"] .bg-white\/80 { background-color: rgba(15, 20, 38, .80); } html[data-theme="dark"] .bg-white\/90 { background-color: rgba(15, 20, 38, .90); } html[data-theme="dark"] .bg-slate-50 { background-color: #0c1120; } html[data-theme="dark"] .bg-slate-100 { background-color: #1a2036; } html[data-theme="dark"] .bg-slate-900 { background-color: #0a0e1c; } html[data-theme="dark"] .bg-jpink-50 { background-color: rgba(236, 72, 153, .10); } html[data-theme="dark"] .bg-jpink-50\/50 { background-color: rgba(236, 72, 153, .08); } html[data-theme="dark"] .bg-jpink-100 { background-color: rgba(236, 72, 153, .16); } /* decorative blur blobs on light banners → dimmed neon versions */ html[data-theme="dark"] .bg-jpink-200\/40 { background-color: rgba(236, 72, 153, .16); } html[data-theme="dark"] .bg-amber-200\/40 { background-color: rgba(245, 158, 11, .14); } /* status tints (order/account pages) */ html[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, .12); } html[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, .16); } html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, .12); } html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, .10); } html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, .16); } html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, .10); } html[data-theme="dark"] .bg-emerald-50\/50 { background-color: rgba(16, 185, 129, .08); } html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, .16); } /* violet = the own-brand accent (TikSpark games on the storefront) */ html[data-theme="dark"] .bg-violet-50 { background-color: rgba(139, 92, 246, .12); } html[data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, .16); } html[data-theme="dark"] .bg-sky-100 { background-color: rgba(56, 189, 248, .16); } html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, .18); } html[data-theme="dark"] .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, .08); } html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, .18); } html[data-theme="dark"] .bg-purple-50\/50 { background-color: rgba(168, 85, 247, .08); } html[data-theme="dark"] .bg-slate-200 { background-color: #232a44; } html[data-theme="dark"] .bg-slate-300 { background-color: #2c3552; } /* --- text: neutral scale remapped for dark, no glow on body copy --- */ html[data-theme="dark"] .text-slate-900 { color: #f2f5fb; } html[data-theme="dark"] .text-slate-800 { color: #e6ebf5; } html[data-theme="dark"] .text-slate-700 { color: #cdd5e4; } html[data-theme="dark"] .text-slate-600 { color: #a8b2c7; } html[data-theme="dark"] .text-slate-500 { color: #8e99b0; } html[data-theme="dark"] .text-slate-400 { color: #77829b; } html[data-theme="dark"] .text-slate-300 { color: #9aa5bd; } html[data-theme="dark"] .hover\:text-slate-900:hover { color: #ffffff; } html[data-theme="dark"] .hover\:text-slate-700:hover { color: #e6ebf5; } html[data-theme="dark"] .hover\:text-slate-600:hover { color: #cdd5e4; } /* brand pinks brighten a touch so they pop on navy */ html[data-theme="dark"] .text-jpink-700 { color: #ff8fc2; } html[data-theme="dark"] .text-jpink-600 { color: #ff5fa8; } html[data-theme="dark"] .hover\:text-jpink-600:hover { color: #ff5fa8; } /* status text on the tinted chips above */ html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800 { color: #fcd34d; } html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800 { color: #34d399; } html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700 { color: #4ade80; } html[data-theme="dark"] .text-violet-500, html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-violet-700 { color: #c4b5fd; } html[data-theme="dark"] .text-sky-700, html[data-theme="dark"] .text-sky-800 { color: #7dd3fc; } html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-indigo-700 { color: #a5b4fc; } html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-purple-700 { color: #c4b5fd; } html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700 { color: #f87171; } html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-rose-700 { color: #fb7185; } /* -900 body copy inside tinted boxes (notice modal etc.) */ html[data-theme="dark"] .text-rose-900 { color: #fecdd3; } html[data-theme="dark"] .text-emerald-900 { color: #a7f3d0; } html[data-theme="dark"] .text-amber-900 { color: #fde68a; } /* --- borders --- */ html[data-theme="dark"] .border-slate-100 { border-color: rgba(148, 163, 184, .10); } html[data-theme="dark"] .border-slate-200 { border-color: rgba(148, 163, 184, .16); } html[data-theme="dark"] .border-slate-300 { border-color: rgba(148, 163, 184, .26); } html[data-theme="dark"] .border-jpink-100 { border-color: rgba(236, 72, 153, .22); } html[data-theme="dark"] .border-jpink-200 { border-color: rgba(236, 72, 153, .35); } html[data-theme="dark"] .hover\:border-jpink-300:hover { border-color: rgba(236, 72, 153, .6); } html[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, .30); } html[data-theme="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, .30); } html[data-theme="dark"] .border-rose-300 { border-color: rgba(244, 63, 94, .45); } html[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, .30); } html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, .30); } html[data-theme="dark"] .border-violet-200 { border-color: rgba(139, 92, 246, .30); } html[data-theme="dark"] .hover\:border-violet-400:hover { border-color: rgba(139, 92, 246, .65); } html[data-theme="dark"] .border-slate-400 { border-color: rgba(148, 163, 184, .35); } html[data-theme="dark"] .border-slate-500 { border-color: rgba(148, 163, 184, .45); } html[data-theme="dark"] .ring-jpink-100 { --tw-ring-color: rgba(236, 72, 153, .25); } html[data-theme="dark"] .ring-jpink-200 { --tw-ring-color: rgba(236, 72, 153, .35); } /* --- hovers on neutral surfaces --- */ html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, .08); } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: rgba(148, 163, 184, .12); } /* --- shadows: flat drop-shadows read as mud on navy; use depth + a faint pink rim so cards feel lit by the neon ambience --- */ html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg, html[data-theme="dark"] .shadow-xl, html[data-theme="dark"] .shadow-2xl, html[data-theme="dark"] .hover\:shadow-md:hover, html[data-theme="dark"] .hover\:shadow-lg:hover, html[data-theme="dark"] .hover\:shadow-xl:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(236, 72, 153, .05), 0 14px 34px -14px rgba(0, 0, 0, .65); } /* neon glow for pink CTAs (buttons/links only — not tiny dots or pills) */ html[data-theme="dark"] a.bg-jpink-500, html[data-theme="dark"] button.bg-jpink-500, html[data-theme="dark"] a.bg-gradient-to-r.from-jpink-500, html[data-theme="dark"] button.bg-gradient-to-r.from-jpink-500, html[data-theme="dark"] .shadow-jpink-500\/25 { box-shadow: 0 0 18px rgba(236, 72, 153, .38); } /* --- decorative gradients, rebuilt per combo for dark --- */ /* shop hero */ html[data-theme="dark"] .from-jpink-100.via-pink-50.to-purple-100 { background-image: radial-gradient(80% 120% at 85% 0%, rgba(236, 72, 153, .30), transparent 55%), radial-gradient(70% 110% at 10% 100%, rgba(139, 92, 246, .28), transparent 55%), linear-gradient(135deg, #151228, #0d0f20); } /* success page canvas */ html[data-theme="dark"] .from-jpink-50.via-white.to-purple-50 { background-image: radial-gradient(70% 100% at 80% 0%, rgba(236, 72, 153, .16), transparent 55%), radial-gradient(60% 100% at 10% 100%, rgba(139, 92, 246, .15), transparent 55%), linear-gradient(135deg, #0d0f20, #0a0c18); } /* reseller / promo banners */ html[data-theme="dark"] .from-jpink-50.via-white.to-amber-50, html[data-theme="dark"] .from-jpink-50.to-amber-50 { background-image: radial-gradient(70% 120% at 90% 0%, rgba(245, 158, 11, .12), transparent 55%), linear-gradient(135deg, #191024, #12101c); } /* thumbnail / icon placeholders */ html[data-theme="dark"] .from-jpink-100.to-amber-100 { background-image: linear-gradient(135deg, #241226, #201812); } html[data-theme="dark"] .from-slate-100.to-slate-200 { background-image: linear-gradient(135deg, #161b2e, #10152a); } html[data-theme="dark"] .group:hover .from-slate-100.to-slate-200 { background-image: linear-gradient(135deg, #2a1630, #1a1030); } /* small amber badges */ html[data-theme="dark"] .from-amber-100.to-orange-100 { background-image: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(249, 115, 22, .14)); } /* Pastel gradient tails (icon tiles on the account/buy pages, etc.). Tailwind gradients resolve through --tw-gradient-from/-to vars, so re-pointing the vars per token darkens EVERY remaining combo without enumerating them. The big banners above set background-image directly, which wins over these vars — both layers coexist safely. */ html[data-theme="dark"] .from-white { --tw-gradient-from: #161b2e var(--tw-gradient-from-position); } html[data-theme="dark"] .from-jpink-100 { --tw-gradient-from: rgba(236, 72, 153, .16) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-jpink-50 { --tw-gradient-from: rgba(236, 72, 153, .08) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-amber-50 { --tw-gradient-from: rgba(245, 158, 11, .08) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-amber-100 { --tw-gradient-from: rgba(245, 158, 11, .14) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-orange-100 { --tw-gradient-from: rgba(249, 115, 22, .14) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-emerald-100 { --tw-gradient-from: rgba(16, 185, 129, .14) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-rose-100 { --tw-gradient-from: rgba(244, 63, 94, .14) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-sky-100 { --tw-gradient-from: rgba(56, 189, 248, .14) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-violet-100 { --tw-gradient-from: rgba(139, 92, 246, .16) var(--tw-gradient-from-position); } html[data-theme="dark"] .from-violet-50 { --tw-gradient-from: rgba(139, 92, 246, .10) var(--tw-gradient-from-position); } html[data-theme="dark"] .to-jpink-50 { --tw-gradient-to: rgba(236, 72, 153, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-pink-50 { --tw-gradient-to: rgba(236, 72, 153, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-purple-50 { --tw-gradient-to: rgba(168, 85, 247, .10) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-purple-100 { --tw-gradient-to: rgba(168, 85, 247, .16) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-amber-50 { --tw-gradient-to: rgba(245, 158, 11, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-amber-100 { --tw-gradient-to: rgba(245, 158, 11, .14) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-orange-100 { --tw-gradient-to: rgba(249, 115, 22, .14) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-yellow-50 { --tw-gradient-to: rgba(234, 179, 8, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-lime-50 { --tw-gradient-to: rgba(132, 204, 22, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-cyan-50 { --tw-gradient-to: rgba(34, 211, 238, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-fuchsia-50 { --tw-gradient-to: rgba(232, 121, 249, .10) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-rose-50 { --tw-gradient-to: rgba(244, 63, 94, .08) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-slate-50 { --tw-gradient-to: rgba(148, 163, 184, .06) var(--tw-gradient-to-position); } html[data-theme="dark"] .to-slate-200 { --tw-gradient-to: rgba(148, 163, 184, .10) var(--tw-gradient-to-position); } /* via-* bakes its color into --tw-gradient-stops, so redefine stops */ html[data-theme="dark"] .via-white { --tw-gradient-stops: var(--tw-gradient-from), rgba(15, 20, 38, .5) var(--tw-gradient-via-position), var(--tw-gradient-to); } html[data-theme="dark"] .via-pink-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(236, 72, 153, .06) var(--tw-gradient-via-position), var(--tw-gradient-to); } html[data-theme="dark"] .via-orange-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(249, 115, 22, .06) var(--tw-gradient-via-position), var(--tw-gradient-to); } html[data-theme="dark"] .via-fuchsia-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(232, 121, 249, .07) var(--tw-gradient-via-position), var(--tw-gradient-to); } /* --- chrome: nav glassy + neon hairlines --- */ /* backdrop-filter creates a stacking context, which would trap the account dropdown (z-50 INSIDE the nav) below the hero's own blur layers. So the nav itself must sit above the page content: z-40 on every nav, plus position:relative for static navs (sticky ones are already positioned — don't override their position). */ html[data-theme="dark"] nav.bg-white { background-color: rgba(9, 12, 24, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(236, 72, 153, .16); z-index: 40; } html[data-theme="dark"] nav.bg-white:not(.sticky) { position: relative; } html[data-theme="dark"] footer { border-top: 1px solid rgba(236, 72, 153, .12); } /* --- form controls --- */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0c1120; border-color: rgba(148, 163, 184, .22); color: #e8edf7; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #5d6880; }