/* =========================================================================== GamePick theming system --------------------------------------------------------------------------- Three themes, switched via . Every page that includes this file + theme.js gets: - themed color/font/shape tokens (CSS variables) - shared components (.gp-* : buttons, cards, panels, nav, toast, brand) - per-theme background atmosphere (#gp-fx) and the settings menu New pages: just set the tokens via these classes and they theme for free. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Default theme = OVERDRIVE -------------------------------------------- */ :root, [data-theme="overdrive"] { --bg:#050505; --bg2:#0e0e0e; --surface:#0e0e0e; --surface2:#141414; --border:#242424; --text:#f2f2f2; --muted:#7a7a7a; --accent:#ccff00; --accent2:#ff007a; --accent3:#ff5e00; --good:#ccff00; --good-ink:#0a0a00; --bad:#ff007a; --f-display:'Anton',sans-serif; --f-body:'Chakra Petch',sans-serif; --disp-transform:uppercase; --disp-style:italic; --disp-spacing:-1px; --disp-weight:400; --radius:0px; --radius-lg:0px; --clip-btn:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%); --clip-card:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); --btn-skew:-8deg; --shadow-card:0 14px 40px rgba(0,0,0,.6); --glow:0 0 35px color-mix(in srgb, var(--accent) 60%, transparent); } /* ---- ARCADE --------------------------------------------------------------- */ [data-theme="arcade"] { --bg:#160a2e; --bg2:#0a0118; --surface:#1f1140; --surface2:#2a1856; --border:#3a2470; --text:#fff4e0; --muted:#9b8bbf; --accent:#ffd60a; --accent2:#ff2150; --accent3:#2bff88; --good:#2bff88; --good-ink:#062a13; --bad:#ff2150; --f-display:'Press Start 2P',monospace; --f-body:'VT323',monospace; --disp-transform:uppercase; --disp-style:normal; --disp-spacing:1px; --disp-weight:400; --radius:0px; --radius-lg:0px; --clip-btn:none; --clip-card:none; --btn-skew:0deg; --shadow-card:8px 8px 0 rgba(0,0,0,.6); --glow:0 0 0 transparent; } /* ---- LEGENDARY ------------------------------------------------------------ */ [data-theme="legendary"] { --bg:#1a0e12; --bg2:#0c0608; --surface:#241319; --surface2:#2d1820; --border:#5a3d1f; --text:#f3e9d2; --muted:#9a8a78; --accent:#f5c542; --accent2:#a855f7; --accent3:#ff8a00; --good:#f5c542; --good-ink:#2a1a06; --bad:#b5564e; --f-display:'Cinzel',serif; --f-body:'Spectral',serif; --disp-transform:none; --disp-style:normal; --disp-spacing:1px; --disp-weight:700; --radius:5px; --radius-lg:8px; --clip-btn:none; --clip-card:none; --btn-skew:0deg; --shadow-card:0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(245,197,66,.12); --glow:0 0 35px rgba(245,197,66,.45); } /* =========================================================================== Base =========================================================================== */ html, body { min-height:100%; } body { background:var(--bg2); color:var(--text); font-family:var(--f-body); position:relative; } [data-theme="overdrive"] body{ background: radial-gradient(circle at 50% 30%, rgba(204,255,0,.14), transparent 45%), radial-gradient(circle at 15% 85%, rgba(255,0,122,.12), transparent 42%), var(--bg); } [data-theme="arcade"] body{ background: radial-gradient(circle at 50% 0%, rgba(155,77,255,.32), transparent 60%), radial-gradient(circle at 80% 90%, rgba(255,33,80,.22), transparent 50%), linear-gradient(180deg,var(--bg),var(--bg2)); } [data-theme="legendary"] body{ background: radial-gradient(ellipse at 50% 0%, rgba(245,197,66,.16), transparent 55%), radial-gradient(ellipse at 50% 65%, rgba(168,85,247,.10), transparent 55%), linear-gradient(180deg,var(--bg),var(--bg2)); } ::selection{ background:var(--accent); color:var(--good-ink); } /* =========================================================================== Background FX (injected by theme.js as #gp-fx). One layer per theme; only the active theme's layer is shown. =========================================================================== */ #gp-fx{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } #gp-fx > *{ display:none; position:absolute; inset:0; } [data-theme="arcade"] #gp-fx .fx-scanlines, [data-theme="arcade"] #gp-fx .fx-stars, [data-theme="overdrive"] #gp-fx .fx-speed, [data-theme="legendary"] #gp-fx .fx-rays, [data-theme="legendary"] #gp-fx .fx-embers{ display:block; } /* arcade scanlines + stars */ .fx-scanlines{ background:repeating-linear-gradient(0deg,rgba(0,0,0,.16),rgba(0,0,0,.16) 1px,transparent 2px,transparent 4px); mix-blend-mode:multiply; } .fx-stars{ background-image: radial-gradient(1px 1px at 20px 30px,#fff,transparent), radial-gradient(1px 1px at 120px 80px,var(--accent),transparent), radial-gradient(2px 2px at 200px 160px,var(--accent3),transparent), radial-gradient(1px 1px at 300px 50px,#fff,transparent), radial-gradient(1px 1px at 380px 220px,var(--accent2),transparent); background-size:400px 280px; opacity:.5; animation:gp-twinkle 3s steps(2) infinite; } @keyframes gp-twinkle{50%{opacity:.22}} /* overdrive speed lines */ .fx-speed span{ position:absolute; height:2px; width:40%; left:-40%; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:gp-zoom 2.2s linear infinite; } .fx-speed span:nth-child(1){ top:16%; animation-delay:0s } .fx-speed span:nth-child(2){ top:40%; animation-delay:.6s; background:linear-gradient(90deg,transparent,var(--accent2),transparent) } .fx-speed span:nth-child(3){ top:66%; animation-delay:1.1s } .fx-speed span:nth-child(4){ top:88%; animation-delay:1.6s; background:linear-gradient(90deg,transparent,var(--accent3),transparent) } @keyframes gp-zoom{to{left:120%}} /* legendary rays + embers */ .fx-rays{ top:-20%; left:50%; width:140%; height:80%; transform:translateX(-50%); background:conic-gradient(from 200deg at 50% 0,transparent 0,rgba(245,197,66,.08) 10%,transparent 20%,rgba(245,197,66,.06) 30%,transparent 40%); } .fx-embers .ember{ position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:var(--accent3); box-shadow:0 0 8px var(--accent3); opacity:0; animation:gp-rise linear infinite; } @keyframes gp-rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.9}100%{transform:translateY(-105vh) scale(.3);opacity:0}} /* #gp-fx sits at z-index:-1 so all page content (including position:fixed layouts) paints above it without needing extra z-index plumbing. */ /* =========================================================================== Brand / logo — GAMEPICK =========================================================================== */ .gp-brand{ font-family:var(--f-display); font-style:var(--disp-style); text-transform:var(--disp-transform); letter-spacing:var(--disp-spacing); font-weight:var(--disp-weight); line-height:1; display:inline-block; } .gp-brand b, .gp-brand i{ font-style:inherit; font-weight:inherit; } .gp-brand b{ color:var(--text); } .gp-brand i{ color:var(--accent); } [data-theme="overdrive"] .gp-brand{ transform:skewX(-6deg); } [data-theme="overdrive"] .gp-brand i{ text-shadow:0 0 24px color-mix(in srgb,var(--accent) 60%,transparent); } [data-theme="arcade"] .gp-brand b{ text-shadow:3px 3px 0 var(--accent2); } [data-theme="arcade"] .gp-brand i{ color:var(--accent); text-shadow:3px 3px 0 #9b4dff; } [data-theme="legendary"] .gp-brand{ background:linear-gradient(180deg,#fff3c4,var(--accent) 55%,#9a6a12); -webkit-background-clip:text; background-clip:text; color:transparent; } [data-theme="legendary"] .gp-brand b, [data-theme="legendary"] .gp-brand i{ color:transparent; } /* =========================================================================== Buttons — .gp-btn (primary), .gp-btn.alt (secondary accent) =========================================================================== */ .gp-btn{ font-family:var(--f-display); text-transform:var(--disp-transform); letter-spacing:var(--disp-spacing); font-style:var(--disp-style); font-size:18px; line-height:1; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 30px; border:none; color:var(--good-ink); background:var(--accent); border-radius:var(--radius); clip-path:var(--clip-btn); transform:skewX(var(--btn-skew)); transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .gp-btn > *{ transform:skewX(calc(-1 * var(--btn-skew))); display:inline-flex; align-items:center; gap:10px; } .gp-btn svg{ width:1.25em; height:1.25em; fill:currentColor; } .gp-btn.alt{ background:var(--accent2); color:#fff; } .gp-btn:hover{ box-shadow:var(--glow); transform:skewX(var(--btn-skew)) translateY(-2px); } .gp-btn:active{ transform:skewX(var(--btn-skew)) translateY(1px); } .gp-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; } [data-theme="arcade"] .gp-btn{ font-size:12px; box-shadow:0 6px 0 #a98700,8px 8px 0 rgba(0,0,0,.5); } [data-theme="arcade"] .gp-btn.alt{ box-shadow:0 6px 0 #8a0f2c,8px 8px 0 rgba(0,0,0,.5); } [data-theme="arcade"] .gp-btn:hover{ box-shadow:0 6px 0 #a98700,8px 8px 0 rgba(0,0,0,.5); transform:none; } [data-theme="arcade"] .gp-btn:active{ transform:translateY(6px); box-shadow:0 0 0 #a98700,8px 8px 0 rgba(0,0,0,.4); } [data-theme="legendary"] .gp-btn{ background:linear-gradient(180deg,#fff3c4,var(--accent)); border:1px solid #fff3c4; box-shadow:0 0 24px rgba(245,197,66,.3),inset 0 1px 0 #fff; font-size:16px; } /* =========================================================================== Inputs =========================================================================== */ .gp-input{ width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--accent); font-family:var(--f-display); font-size:24px; letter-spacing:6px; text-transform:uppercase; padding:14px 18px; outline:none; border-radius:var(--radius); transition:border-color .15s, box-shadow .15s; } .gp-input:focus{ border-color:var(--accent); box-shadow:var(--glow); } .gp-input::placeholder{ color:var(--border); } /* =========================================================================== Panels (lobby create/join, generic surfaces) =========================================================================== */ .gp-panel{ background:var(--surface); border:1px solid var(--border); padding:30px; position:relative; border-radius:var(--radius-lg); overflow:hidden; } [data-theme="arcade"] .gp-panel{ border-width:3px; border-color:var(--text); box-shadow:8px 8px 0 rgba(0,0,0,.55); } [data-theme="legendary"] .gp-panel{ box-shadow:0 0 30px rgba(0,0,0,.4) inset, 0 0 0 1px rgba(245,197,66,.15); } .gp-panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent3)); } /* =========================================================================== Game card (used on swipe stack, lobby preview, results) The page keeps layout; these style the look per theme. =========================================================================== */ .gp-card{ background:var(--surface); border:1px solid var(--border); overflow:hidden; position:relative; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); clip-path:var(--clip-card); } [data-theme="arcade"] .gp-card{ border-width:3px; border-color:var(--text); } [data-theme="overdrive"] .gp-card::before{ content:''; position:absolute; top:0; left:0; width:5px; height:100%; background:var(--accent); z-index:2; } [data-theme="legendary"] .gp-card{ border-color:transparent; } [data-theme="legendary"] .gp-card::after{ content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.5px; background:linear-gradient(180deg,var(--accent3),#7a3b00); pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* =========================================================================== Toast =========================================================================== */ .gp-toast{ position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(90px); background:var(--surface); border-left:3px solid var(--accent); color:var(--accent); font-family:var(--f-body); font-size:15px; letter-spacing:1px; padding:14px 26px; z-index:600; white-space:nowrap; box-shadow:var(--shadow-card); border-radius:var(--radius); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .gp-toast.show{ transform:translateX(-50%) translateY(0); } .gp-toast.error{ border-left-color:var(--bad); color:var(--bad); } /* =========================================================================== Settings menu (injected by theme.js as #gp-settings) =========================================================================== */ #gp-settings{ position:fixed; top:14px; right:14px; z-index:700; } .gp-gear{ width:44px; height:44px; display:grid; place-items:center; cursor:pointer; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--radius); transition:transform .2s, box-shadow .15s; } .gp-gear:hover{ box-shadow:var(--glow); } .gp-gear svg{ width:22px; height:22px; fill:currentColor; transition:transform .4s; } .gp-gear:hover svg{ transform:rotate(90deg); } .gp-pop{ position:absolute; top:54px; right:0; width:230px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; box-shadow:var(--shadow-card); opacity:0; transform:translateY(-8px) scale(.96); transform-origin:top right; pointer-events:none; transition:all .18s ease; } [data-theme="arcade"] .gp-pop{ border-width:3px; border-color:var(--text); box-shadow:6px 6px 0 rgba(0,0,0,.5); } #gp-settings.open .gp-pop{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .gp-pop h4{ font-family:var(--f-display); font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:12px; } .gp-theme-opt{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; margin-bottom:6px; cursor:pointer; background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:var(--f-body); font-size:14px; text-align:left; border-radius:var(--radius); transition:border-color .15s, transform .1s; } .gp-theme-opt:hover{ border-color:var(--accent); } .gp-theme-opt.active{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } .gp-theme-opt .dots{ display:flex; gap:4px; } .gp-theme-opt .dots span{ width:12px; height:12px; border-radius:50%; } .gp-theme-opt .lbl{ flex:1; font-weight:600; } .gp-theme-opt .chk{ color:var(--accent); opacity:0; font-family:var(--f-display); } .gp-theme-opt.active .chk{ opacity:1; }