/* ============================================================ SNOWFLAKE — Shared Design System (theme.css) Bold "frozen-night" sticker style. Linked by every page. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poetsen+One&family=Lilita+One&family=Luckiest+Guy&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap'); /* Guka (Fontfabric, commercial). Drop the file(s) into assets/fonts/ and this activates automatically. Accepts woff2 / woff / ttf / otf named "Guka". */ @font-face{ font-family:'Guka'; src:url('fonts/Guka.woff2') format('woff2'), url('fonts/Guka.woff') format('woff'), url('fonts/Guka.ttf') format('truetype'), url('fonts/Guka.otf') format('opentype'); font-weight:100 900; font-display:swap; } :root{ /* base / canvas */ --bg: #123254; /* deep frozen navy (nudged a touch brighter) */ --bg-deep: #081C33; /* darker pockets / section depth */ --bg-grad-1: #123A63; /* hero glow top */ --bg-grad-2: #0A2240; /* hero glow bottom */ --panel: #173B63; /* raised card/panel */ --panel-2: #1E4C7E; /* lighter panel / hover */ /* ink (outlines) — near-black navy, never pure black */ --ink: #0A1A2F; --ink-soft: rgba(10,26,47,.55); /* vivid candy accents */ --ice: #3DC6F5; --ice-deep: #1C97C4; --teal: #15D6C4; --teal-deep: #0FA897; --gold: #FFC83D; --gold-deep: #E0A21F; --coral: #FF5D6C; --coral-deep: #D63B58; --grape: #8A6BFF; --grape-deep: #6A49E0; /* snow / text */ --cream: #F4FAFF; --cream-dim: rgba(244,250,255,.70); --cream-faint: rgba(244,250,255,.40); --hairline: rgba(244,250,255,.12); /* shape language */ --r-btn: 18px; --r-card: 28px; --r-pill: 999px; /* chunky depth */ --lift: 0 14px 28px rgba(5,16,30,.45); --lift-lg: 0 22px 48px rgba(5,16,30,.55); /* motion */ --spring: cubic-bezier(.34,1.56,.64,1); --pop: cubic-bezier(.68,-0.6,.32,1.6); --t-fast: .14s; --t-med: .28s; --font-display: 'Lilita One', system-ui, sans-serif; --font-accent: 'Luckiest Guy', system-ui, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, sans-serif; --font-guka: 'Poetsen One', var(--font-display); /* hero + nav wordmark */ } /* ---------- shared candy button ---------- */ .btn-candy{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.4px; color:var(--ink); background:var(--gold); border:3.5px solid var(--ink); border-radius:var(--r-btn); padding:13px 26px; cursor:pointer; text-transform:uppercase; position:relative; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.16), 0 6px 0 0 var(--gold-deep), 0 12px 18px rgba(5,16,30,.4); transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) ease; } .btn-candy:hover{ transform:translateY(-2px) scale(1.03); } .btn-candy:active{ transform:translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 2px 0 0 var(--gold-deep), 0 4px 8px rgba(5,16,30,.35); } .btn-candy.ice { background:var(--ice); box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,0,0,.16),0 6px 0 0 var(--ice-deep), 0 12px 18px rgba(5,16,30,.4); color:var(--ink); } .btn-candy.ice:active { box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 2px 0 0 var(--ice-deep),0 4px 8px rgba(5,16,30,.35); } .btn-candy.coral{ background:var(--coral); box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.16),0 6px 0 0 var(--coral-deep),0 12px 18px rgba(5,16,30,.4); color:var(--cream); } .btn-candy.grape{ background:var(--grape); box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.16),0 6px 0 0 var(--grape-deep),0 12px 18px rgba(5,16,30,.4); color:var(--cream); } .btn-candy.ghost{ background:transparent; color:var(--cream); box-shadow:none; border-color:var(--hairline); } .btn-candy.ghost:hover{ border-color:var(--ice); color:var(--ice); transform:translateY(-2px); } /* ---------- pills / chips ---------- */ .pill{ font-family:var(--font-body); font-weight:800; font-size:.62rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink); background:var(--cream); border:2.5px solid var(--ink); border-radius:var(--r-pill); padding:3px 10px; display:inline-block; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition-duration:.001ms !important; } } /* ============================================================ GAME-PAGE CHROME (scoped to body.game-page) Rethemes the shared header + sidebar inside every game so the frame matches the new brand, without touching game logic. ============================================================ */ body.game-page{ font-family:var(--font-body) !important; background: radial-gradient(1200px 600px at 50% -10%, var(--bg-grad-1), transparent 60%), var(--bg) !important; color:var(--cream); } body.game-page .topbar, body.game-page #topbar{ background:rgba(8,28,51,.86) !important; backdrop-filter:blur(10px); border-bottom:3px solid var(--ink) !important; } body.game-page .topbar-logo-name{ font-family:var(--font-display) !important; color:var(--cream) !important; letter-spacing:.5px; } body.game-page .topbar-logo-icon{ color:var(--ice) !important; } body.game-page .sidebar{ background:var(--bg-deep) !important; border-right:3px solid var(--ink) !important; } body.game-page .sidebar-title{ font-family:var(--font-display) !important; color:var(--ice) !important; letter-spacing:.5px; } body.game-page .td-item{ border-radius:14px !important; font-family:var(--font-body) !important; font-weight:800 !important; color:var(--cream-dim) !important; transition:transform var(--t-fast) var(--spring), background var(--t-fast); } body.game-page .td-item:hover{ background:var(--panel) !important; color:var(--cream) !important; transform:translateX(3px); } body.game-page .td-item.td-active{ background:var(--ice) !important; color:var(--ink) !important; border:2.5px solid var(--ink) !important; } body.game-page .td-name{ font-family:var(--font-body) !important; }