/* ============================================================================ COGLINGS — game-ui.css · the "warm-premium" in-game theme (HYBRID) ---------------------------------------------------------------------------- The public landing stays warm-LIGHT (approachable). The in-game surfaces (dashboard, market, mint, guilds, bazaar, events, the 3D HUD) opt into THIS dark warm-premium skin by adding class="gameui" to and linking this file AFTER ui.css. It re-skins the shared vocabulary (.card .btn .mono .pill .bar …) — so a page joins the theme with a two-line change, and a whole TOWN can reskin by overriding one token (--accent) on the body. ========================================================================== */ .gameui{ --gold:#F0B54A; --gold-hi:#FFD782; --green:#35D48F; --green-d:#1E9E68; --cream:#F3ECDD; --muted:#A99E88; --btn-ink:#12100C; --edge:rgba(240,181,74,.30); --edge-hi:rgba(240,181,74,.55); --glass:linear-gradient(180deg,rgba(30,25,18,.82),rgba(20,17,12,.9)); --accent:var(--gold); --accent-hi:var(--gold-hi); /* a town overrides just this */ /* REDEFINE the pages' own design tokens so ALL their text/borders re-theme automatically (this is the "reskin by tokens" layer). */ --ink:#F3ECDD; --ink2:#A99E88; --line:rgba(240,181,74,.14); --leaf:#35D48F; --leaf-dark:#66E7AE; --cloud:rgba(12,10,7,.5); color:var(--cream); } /* ---- PER-TOWN SKINS — the "10 towns, one shell" layer ----------------------- A town sets and the whole chrome reskins from these tokens: buttons, card rims, the dock, accents. Money stays gold (--gold) for a consistent "COGS" read; the town's identity colour drives everything else. The Valley (no data-town) keeps the gold default above. ---- */ .gameui[data-town="gnome"] { --accent:#C77BE6; --accent-hi:#E4A6F7; --edge:rgba(199,123,230,.32); --edge-hi:rgba(199,123,230,.58) } .gameui[data-town="city"] { --accent:#5AA6EA; --accent-hi:#93C8F7; --edge:rgba(90,166,234,.32); --edge-hi:rgba(90,166,234,.58) } .gameui[data-town="sports"] { --accent:#EA6E4A; --accent-hi:#F79E7F; --edge:rgba(234,110,74,.32); --edge-hi:rgba(234,110,74,.58) } .gameui[data-town="suburbs"]{ --accent:#4FD08C; --accent-hi:#86E7B2; --edge:rgba(79,208,140,.32); --edge-hi:rgba(79,208,140,.58) } /* the ambient glow behind the page follows the town too */ body.gameui[data-town="gnome"] { background:radial-gradient(120% 80% at 62% -6%,rgba(80,50,96,.5),transparent 60%),radial-gradient(90% 60% at 78% 58%,rgba(199,123,230,.12),transparent 55%),linear-gradient(180deg,#241C2A 0%,#181320 46%,#120E17 100%) fixed } body.gameui[data-town="city"] { background:radial-gradient(120% 80% at 62% -6%,rgba(40,64,90,.5),transparent 60%),radial-gradient(90% 60% at 78% 58%,rgba(90,166,234,.12),transparent 55%),linear-gradient(180deg,#1A2230 0%,#141A24 46%,#0F141C 100%) fixed } body.gameui[data-town="sports"] { background:radial-gradient(120% 80% at 62% -6%,rgba(96,52,40,.5),transparent 60%),radial-gradient(90% 60% at 78% 58%,rgba(234,110,74,.12),transparent 55%),linear-gradient(180deg,#2A1C16 0%,#201410 46%,#170F0C 100%) fixed } body.gameui[data-town="suburbs"]{ background:radial-gradient(120% 80% at 62% -6%,rgba(40,80,58,.5),transparent 60%),radial-gradient(90% 60% at 78% 58%,rgba(79,208,140,.12),transparent 55%),linear-gradient(180deg,#182A1F 0%,#132018 46%,#0E1712 100%) fixed } /* ---- the warm-dark stage (overrides ui.css's light body + bg layer) ---- */ body.gameui{ background: radial-gradient(120% 80% at 62% -6%, rgba(58,86,74,.42), transparent 60%), radial-gradient(90% 60% at 78% 58%, rgba(240,181,74,.10), transparent 55%), linear-gradient(180deg,#20281F 0%,#1A1710 46%,#14110C 100%) fixed; color:var(--cream); } body.gameui::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 40% at 30% 108%, rgba(28,60,44,.5), transparent 70%); box-shadow:inset 0 0 260px rgba(0,0,0,.55); } /* ---- type ---- */ .gameui h1,.gameui h2,.gameui h3{ color:var(--cream); font-family:'Outfit',sans-serif; letter-spacing:-.01em } .gameui .sub{ color:var(--muted); font-weight:700 } .gameui .mono{ color:var(--muted); font-family:'Space Grotesk',monospace } /* broad "link = light gold" rule — but EXCLUDE accent-filled chrome (the sign-in pill, active dock/menu items) or light-gold text lands on a gold background */ .gameui a:not(.btn):not(.di):not(.me):not(.hudacct):not(.on){ color:var(--gold-hi) } .gameui a:not(.btn):not(.di):not(.me):not(.hudacct):not(.on):hover{ color:var(--cream) } /* ---- cards → dark glass with a glowing gold rim ---- */ .gameui .card,.gameui .tile,.gameui .lb,.gameui .ccard,.gameui .shop,.gameui .skillpanel{ background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid var(--edge); box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 18px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); color:var(--cream); } .gameui .card:hover,.gameui .tile:hover{ border-color:var(--edge-hi); box-shadow:0 0 26px rgba(240,181,74,.1),0 20px 46px rgba(0,0,0,.5) } /* a subtle "cut corner" accent so it reads like the premium frame */ .gameui .card{ position:relative } .gameui .card::before{ content:''; position:absolute; top:0; right:0; width:20px; height:20px; background:linear-gradient(225deg, var(--accent) 0 2px, transparent 2px); opacity:.7; border-top-right-radius:inherit } /* opt-in true cut-corner frame for hero/feature panels: class="card cut" */ .gameui .card.cut{ clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px) } .gameui .card.cut::before{ display:none } /* mono section labels (kept subtle + gold) */ .gameui .pill{ color:var(--muted); border:1px solid var(--edge); background:rgba(240,181,74,.06) } /* ---- buttons ---- */ .gameui .btn{ font-family:'Outfit',sans-serif; font-weight:800; border:none; color:var(--btn-ink); background:linear-gradient(180deg,var(--accent-hi),var(--accent)); box-shadow:0 0 18px rgba(240,181,74,.28), 0 8px 20px rgba(0,0,0,.35) } .gameui .btn:hover{ filter:brightness(1.06); transform:translateY(-2px) } .gameui .btn.green{ color:#08170F; background:linear-gradient(180deg,#66E7AE,var(--green)); box-shadow:0 0 18px rgba(53,212,143,.3),0 8px 20px rgba(0,0,0,.35) } .gameui .btn.ghost,.gameui .btn-out{ background:transparent; color:var(--cream); border:1px solid var(--edge); box-shadow:none } .gameui .btn.ghost:hover{ background:rgba(240,181,74,.08); color:#fff } .gameui .big-cta{ color:var(--btn-ink); background:linear-gradient(180deg,var(--accent-hi),var(--accent)); box-shadow:0 0 22px rgba(240,181,74,.35) } /* ---- inputs / selects ---- */ .gameui input,.gameui select,.gameui textarea{ background:rgba(12,10,7,.6); border:1px solid var(--edge); color:var(--cream) } .gameui input::placeholder{ color:rgba(169,158,136,.7) } .gameui input:focus,.gameui select:focus{ border-color:var(--edge-hi); outline:none } /* ---- needs bars, rarity chips, wallet ---- */ .gameui .bar{ background:rgba(255,255,255,.08) } .gameui .bar i{ background:linear-gradient(90deg,var(--green-d),var(--green)) } .gameui .bar i.low,.gameui .need .bar i.low{ background:linear-gradient(90deg,#B0462C,#E0864E) } .gameui .wallet{ color:var(--gold) } .gameui .big{ color:var(--cream) } /* ---- dashboard-specific pieces keep their meaning, warmed to the theme ---- */ .gameui .ccynote{ background:rgba(53,212,143,.08); border-color:rgba(53,212,143,.28); color:#CFE9DA } .gameui .ccynote b{ color:var(--green) } .gameui .quickstart{ border-color:var(--edge-hi) } .gameui .qs-num{ background:rgba(240,181,74,.14); color:var(--gold-hi); border-color:var(--edge) } .gameui .qs-step.done .qs-num{ background:linear-gradient(180deg,var(--accent-hi),var(--accent)); color:var(--btn-ink); border-color:transparent } .gameui .qs-body b{ color:var(--cream) } .gameui .qs-body span{ color:var(--muted) } .gameui .qs-go{ color:var(--btn-ink); background:linear-gradient(180deg,var(--accent-hi),var(--accent)) } /* ---- misc light-leftovers → dark ---- */ .gameui .doing{ background:rgba(12,10,7,.5); border:1px solid var(--edge); color:var(--cream) } .gameui .think{ color:var(--muted) } .gameui .snap{ border-top-color:rgba(240,181,74,.14) } .gameui .snap .v{ color:var(--green) } .gameui .qs-step.done .qs-body b{ color:var(--muted) } .gameui .qs-step{ border-bottom-color:rgba(240,181,74,.12) } /* .rchip is a light rarity pill → dark ink. .pev is a full-width event row on the dark card → must stay LIGHT (inherits --ink2), so it is NOT lumped in. */ .gameui .rchip{ color:#1c140a } .gameui .pev{ color:var(--ink2) } .gameui .pev .amt{ color:#66E7AE } .gameui .pev .amt.neg{ color:#E8926A } /* ---- market: rate tiles + order-book buy/sell colours ---- */ .gameui .rate{ background:rgba(12,10,7,.42); border:1px solid var(--edge) } .gameui .rate b{ color:var(--green) } .gameui .buy{ color:#66E7AE } .gameui .sell{ color:#E8926A } .gameui table th{ border-bottom-color:var(--edge) } .gameui table td{ border-bottom-color:rgba(240,181,74,.1) } /* ---- deliberate LIGHT "paper document" panels stay paper on the dark page (citizen record, deed sheet, lease notes) — a physical document on a dark desk. Re-darken their ink LOCALLY so text stays readable. ---- */ .gameui .record,.gameui .sheet,.gameui .lease-note,.gameui .thought{ --ink:#2A2418; --ink2:#7A6E52; --line:rgba(120,100,60,.28); color:#2A2418 } .gameui .record .mono,.gameui .sheet .mono,.gameui .lease-note .mono{ color:#8A7B58 } .gameui .record h1,.gameui .record h2,.gameui .record h3, .gameui .sheet h1,.gameui .sheet h2,.gameui .sheet h3{ color:#2A2418 } .gameui .record::before,.gameui .sheet::before{ display:none } /* ---- HUD + dock already dark; nudge the active accent from white → gold ---- */ .gameui .dock .di.on,.gameui .dockmore-menu a.on{ background:linear-gradient(180deg,var(--accent-hi),var(--accent)); color:var(--btn-ink) } .gameui .hudacct{ background:linear-gradient(180deg,var(--accent-hi),var(--accent)); color:var(--btn-ink) } .gameui .hudstat i{ color:var(--green) }