/* Sweet Scales — shared app-page tokens, DERIVED from the candy theme. * * sweet_theme.css (assets/) is the single source of truth: it defines the * --sw-* palette for light (candy: cream, pink, teal, navy ink) and dark * (near-black, blue accents) and flips on . This file maps * the donor-lineage token names (--bone, --glass, --accent, --display, ...) * onto those --sw-* values so every app page (admin, status, and the gated * later-stage pages) themes automatically without markup rewrites. * * LOAD ORDER on every page: sweet_theme.css FIRST, then this file. * No external fonts — system stacks only (self-contained rule). */ :root { --bg-0: var(--sw-bg); --bg-1: var(--sw-bg-2); --bone: var(--sw-ink); --bone-80: rgba(var(--sw-ink-rgb), 0.8); --bone-62: rgba(var(--sw-ink-rgb), 0.6); --bone-34: rgba(var(--sw-ink-rgb), 0.34); --bone-18: rgba(var(--sw-ink-rgb), 0.16); --bone-08: rgba(var(--sw-ink-rgb), 0.07); --accent: var(--sw-accent-2); --accent-hot: var(--sw-teal); --accent-glow: rgba(var(--sw-accent-rgb), 0.35); /* --green/--green-glow: /live references these; alias to the accent so the "live" pulse dots actually render (were previously undefined). */ --green: var(--sw-ok); --green-glow: rgba(var(--sw-accent-rgb), 0.35); --crimson: var(--sw-bad); --crimson-glow: rgba(var(--sw-warm-rgb), 0.4); --glass: var(--sw-glass); --glass-2: var(--sw-glass-2); --glass-border: var(--sw-glass-border); --glass-border-lit: rgba(var(--sw-accent-rgb), 0.5); --ok: var(--sw-ok); --err: var(--sw-bad); --warn: var(--sw-warn); --amber: var(--sw-warn); --amber-hot: var(--sw-warn); --amber-glow: rgba(var(--sw-warn-rgb), 0.35); --display: var(--sw-serif); --ui: var(--sw-sans); --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --ease: var(--sw-ease); } * { box-sizing:border-box; } html, body { margin:0; min-height:100%; background:radial-gradient(ellipse at 50% 0%, var(--bg-1) 0%, var(--bg-0) 65%); color:var(--bone-80); font-family:var(--ui); -webkit-font-smoothing:antialiased; transition:background .35s, color .35s; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } /* topbar (parity with index.html .topbar / .brand) */ .topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; gap:16px; } .brand { display:flex; align-items:center; gap:14px; padding:10px 18px; background:var(--glass); backdrop-filter:blur(14px) saturate(110%); -webkit-backdrop-filter:blur(14px) saturate(110%); border:1px solid var(--glass-border); border-radius:12px; } .brand-mark { width:48px; height:48px; border-radius:8px; background:transparent url('/assets/brand/sweetlogo.svg') center/contain no-repeat; flex:0 0 auto; box-shadow:0 0 22px rgba(var(--sw-accent-rgb),0.16), inset 0 0 0 1px rgba(var(--sw-ink-rgb),0.10); } .brand-text .name { font-family:var(--display); font-size:22px; letter-spacing:0.18em; color:var(--bone); } .brand-text .sub { font-size:10px; color:var(--bone-62); letter-spacing:0.22em; text-transform:uppercase; margin-top:2px; } .nav { display:flex; gap:8px; align-items:center; padding:8px 12px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .nav a { padding:6px 12px; border-radius:6px; color:var(--bone-62); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; } .nav a:hover { color:var(--bone); background:rgba(var(--sw-accent-rgb),0.06); text-decoration:none; } .nav a.active { color:var(--bone); border:1px solid var(--accent); background:rgba(var(--sw-accent-rgb),0.08); box-shadow:inset 0 0 12px rgba(var(--sw-accent-rgb),0.10); } .nav .future { opacity:0.5; pointer-events:none; } .balance-pill { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; font-family:var(--mono); font-size:12px; color:var(--bone-80); } .balance-pill .claw { color:var(--amber); } .balance-pill .point-amt { color:var(--accent); } .balance-pill .sep { color:var(--bone-34); } main { max-width:1100px; margin:0 auto; padding:32px 24px 96px; } h1.title { font-family:var(--display); font-size:36px; letter-spacing:0.01em; color:var(--bone); margin:8px 0 4px; } .subtitle { font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bone-62); margin-bottom:32px; } /* glass buttons (parity with index.html button rules) */ button, .btn { font:inherit; font-size:13px; padding:10px 16px; border-radius:8px; background:var(--glass-2); color:var(--bone); border:1px solid var(--glass-border); cursor:pointer; transition:border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.12s ease, box-shadow 0.18s var(--ease); letter-spacing:0.02em; } button:hover, .btn:hover { border-color:var(--glass-border-lit); background:rgba(var(--sw-accent-rgb),0.06); } button:active { transform:scale(0.97); } button:disabled { opacity:0.4; cursor:not-allowed; } button.primary { background:linear-gradient(180deg, rgba(var(--sw-accent-rgb),0.20) 0%, rgba(var(--sw-accent-rgb),0.08) 100%); border:1px solid var(--accent); color:var(--bone); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; box-shadow:0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06); padding:14px 24px; } button.primary:hover { background:linear-gradient(180deg, rgba(var(--sw-accent-rgb),0.30) 0%, rgba(var(--sw-accent-rgb),0.14) 100%); } /* lightning flash (parity with index.html @keyframes lightningFlash:179) */ @keyframes lightningFlash { 0% { box-shadow:inset 0 0 0 1px var(--glass-border); } 18% { box-shadow:inset 0 0 28px 4px rgba(var(--sw-accent-rgb),0.75), 0 0 60px var(--accent-glow); } 55% { box-shadow:inset 0 0 14px 2px rgba(var(--sw-warm-rgb),0.42); } 100% { box-shadow:inset 0 0 0 1px var(--glass-border); } } .lightning-pulse { animation:lightningFlash 600ms var(--ease) both; } /* card grid (landing) */ .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; } .card { position:relative; display:flex; flex-direction:column; gap:8px; padding:24px; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; backdrop-filter:blur(10px) saturate(110%); -webkit-backdrop-filter:blur(10px) saturate(110%); text-decoration:none; color:inherit; transition:border-color 0.2s var(--ease), transform 0.2s var(--ease); min-height:160px; } .card:hover { border-color:var(--glass-border-lit); transform:translateY(-2px); text-decoration:none; } .card .name { font-family:var(--display); font-size:24px; letter-spacing:0.18em; color:var(--bone); } .card .meta { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-62); } .card .blurb { font-size:13px; color:var(--bone-80); line-height:1.5; margin-top:4px; } .card.coming::after { content:'COMING SOON'; position:absolute; top:14px; right:14px; font-size:10px; letter-spacing:0.18em; color:var(--amber); border:1px solid var(--amber); padding:3px 8px; border-radius:4px; background:rgba(var(--sw-warn-rgb),0.08); } /* play page common layout */ .play { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; } @media (max-width: 900px) { .play { grid-template-columns:1fr; } } .stage { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:32px; min-height:300px; backdrop-filter:blur(10px) saturate(110%); -webkit-backdrop-filter:blur(10px) saturate(110%); } .rail { display:flex; flex-direction:column; gap:16px; } .row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--glass-2); border:1px solid var(--glass-border); border-radius:10px; } .row .label { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-62); } .row .val { font-family:var(--mono); font-size:14px; color:var(--bone); } .outcome { padding:24px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass-2); min-height:80px; } .outcome .head { font-family:var(--display); font-size:24px; letter-spacing:0.16em; color:var(--bone); margin-bottom:8px; } .outcome .body { font-size:14px; color:var(--bone-80); line-height:1.5; } .outcome .delta { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:18px; padding:6px 12px; border-radius:6px; } .outcome .delta.win { color:var(--accent); background:rgba(var(--sw-accent-rgb),0.10); border:1px solid rgba(var(--sw-accent-rgb),0.30); } .outcome .delta.loss { color:var(--crimson); background:rgba(var(--sw-warm-rgb),0.10); border:1px solid rgba(var(--sw-warm-rgb),0.30); } /* small inputs */ input[type="number"], input[type="text"] { font:inherit; font-family:var(--mono); font-size:14px; padding:10px 12px; border-radius:8px; background:var(--bg-1); color:var(--bone); border:1px solid var(--glass-border); width:100%; } input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--sw-accent-rgb),0.18); } .toggle { display:flex; gap:8px; } .toggle button { flex:1; padding:12px 0; letter-spacing:0.16em; text-transform:uppercase; } .toggle button.on { border-color:var(--accent); background:rgba(var(--sw-accent-rgb),0.10); color:var(--bone); box-shadow:inset 0 0 12px rgba(var(--sw-accent-rgb),0.10); } .tier-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; } .tier-grid .tier { padding:14px 10px; text-align:center; border-radius:10px; cursor:pointer; background:var(--glass-2); border:1px solid var(--glass-border); font-size:12px; letter-spacing:0.10em; text-transform:uppercase; color:var(--bone-62); } .tier-grid .tier.on { border-color:var(--accent); color:var(--bone); background:rgba(var(--sw-accent-rgb),0.10); } .tier-grid .tier .pct { font-family:var(--mono); font-size:11px; color:var(--bone-62); margin-top:4px; } .tier-grid .tier.on .pct { color:var(--bone-80); } .notice { padding:12px 16px; border-radius:8px; border:1px solid var(--crimson); color:var(--crimson); background:rgba(var(--sw-warm-rgb),0.06); font-size:13px; } .notice.warn { border-color:var(--warn); color:var(--warn); background:rgba(var(--sw-warn-rgb),0.06); } .notice.ok { border-color:var(--accent); color:var(--accent); background:rgba(var(--sw-accent-rgb),0.06); } .recent { margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--bone-62); } .recent .item { padding:6px 0; border-top:1px solid var(--bone-08); } .recent .item:first-child { border-top:none; }