/* GuessDaily — the HUB surface (guessdaily.today, or local `/` with no ?game=). The hub has its own identity and is deliberately NOT any game's: cool slate canvas, a Space Grotesk display face and a single blue accent — a family shopfront, not Recipedle. It never reads a game's tokens. The one exception is intentional: each `.game-card` gets an inline `--accent` from games/registry.js so a card can *cite* its game's colour without the hub adopting it. Tokens live on [data-surface="hub"], which app.js sets on (so the page canvas is painted too, with no flash) and index.html sets on
(the scoping root). All hub tokens are `--hub-*`-prefixed so they can never collide with the engine's set. */ [data-surface="hub"] { --hub-bg:#0E1014; --hub-bg-2:#171A21; --hub-bg-3:#1E222A; --hub-line:#282E38; --hub-line-2:#1F242C; --hub-ink:#E8EBF1; --hub-ink-soft:#99A2AE; --hub-ink-faint:#6B7480; --hub-accent:#4C8DFF; --hub-accent-ink:#06122B; --hub-offset:#05070B; /* hard offset "sticker" shadow */ --hub-shadow:0 18px 40px -26px rgba(0,0,0,.9); --hub-font-display:"Space Grotesk", system-ui, sans-serif; --hub-font-ui:"Inter", system-ui, sans-serif; --hub-radius:12px; background:var(--hub-bg); color:var(--hub-ink); } /* Both halves matter: app.js puts data-surface on (canvas) and index.html puts it on
(scope root), and a descendant combinator alone would skip itself. */ html[data-theme="light"][data-surface="hub"], html[data-theme="light"] [data-surface="hub"] { --hub-bg:#F5F7FA; --hub-bg-2:#FFFFFF; --hub-bg-3:#EDF0F5; --hub-line:#DDE3EB; --hub-line-2:#E9EDF3; --hub-ink:#141821; --hub-ink-soft:#59616E; --hub-ink-faint:#828A97; --hub-accent:#2F6BE0; --hub-accent-ink:#FFFFFF; --hub-offset:#141821; --hub-shadow:0 18px 40px -30px rgba(20,30,60,.5); } /* A cool ambient wash — the counterpart to the game shell's warm accent field. */ #hub { background: radial-gradient(900px 460px at 50% -12%, color-mix(in srgb, var(--hub-accent) 12%, transparent) 0%, transparent 70%), var(--hub-bg); font-family:var(--hub-font-ui); padding:0 14px; } #hub .iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--hub-line); background:var(--hub-bg-2); color:var(--hub-ink); font-size:16px; cursor:pointer; display:grid; place-items:center; transition:border-color .15s, color .15s; } #hub .iconbtn:hover { border-color:var(--hub-accent); color:var(--hub-accent); } #hub .iconbtn:focus-visible, #hub a:focus-visible { outline:2px solid var(--hub-accent); outline-offset:2px; border-radius:var(--hub-radius); } .hub-theme { position:absolute; top:14px; right:14px; z-index:2; } #hub .hub-inner { width:100%; max-width:760px; margin:0 auto; padding:20px 0 6px; } /* ---------- Hero ---------- */ #hub .hero { text-align:center; padding:36px 46px 6px; animation:fade .3s ease; } #hub .hero .kicker { display:inline-block; font-family:var(--hub-font-ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--hub-ink-soft); border:1px solid var(--hub-line); border-radius:99px; padding:4px 11px; background:var(--hub-bg-2); } #hub .hero .kicker b { color:var(--hub-accent); font-weight:700; } #hub .hero .wordmark { font-family:var(--hub-font-display); font-weight:700; font-size:clamp(32px,7.6vw,50px); line-height:1; letter-spacing:-.03em; margin:14px 0 14px; display:flex; align-items:center; justify-content:center; gap:0; color:var(--hub-ink); } #hub .hero .wordmark .dle { color:var(--hub-accent); } #hub .hero .wordmark .ic { font-size:.6em; transform:translateY(1px); margin-right:.18em; } /* The drawn mark sits where the emoji used to. Slightly larger than the emoji's .6em because a rounded tile reads smaller than a glyph at the same box size, and nudged down to sit on the text baseline rather than the line box. `1em` keeps it locked to the wordmark's own clamp() size, so it scales with the hero instead of needing its own breakpoints. */ #hub .hero .wordmark .ic.mark { font-size:.78em; transform:none; margin-right:.22em; } #hub .hero .wordmark .ic.mark img { width:1em; height:1em; display:inline-block; vertical-align:-.14em; border-radius:.2em; box-shadow:0 2px 10px rgb(0 0 0 / .18); } #hub .hero p { color:var(--hub-ink-soft); font-size:15.5px; line-height:1.55; max-width:460px; margin:0 auto; } #hub .hero p.tag { font-family:var(--hub-font-display); color:var(--hub-ink-faint); font-weight:600; font-size:12.5px; margin-top:12px; letter-spacing:.04em; text-transform:uppercase; } #hub .section-title { font-family:var(--hub-font-display); font-weight:600; font-size:13px; color:var(--hub-ink-faint); text-align:center; margin:36px 0 14px; letter-spacing:.14em; text-transform:uppercase; } /* ---------- Game grid ---------- `--accent` here is the per-card inline tint from games/registry.js — the hub referencing a game's identity, never adopting it. Everything else is a --hub-* token. */ #hub .game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } #hub .game-card { position:relative; display:flex; flex-direction:column; text-align:left; text-decoration:none; background:var(--hub-bg-2); color:var(--hub-ink); border:1px solid var(--hub-line); border-left:4px solid var(--accent, var(--hub-accent)); border-radius:var(--hub-radius); padding:16px 16px 18px; box-shadow:var(--hub-shadow); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; } #hub .game-card.live:hover { transform:translate(-2px,-3px); border-color:var(--accent, var(--hub-accent)); box-shadow:5px 6px 0 -1px var(--hub-offset); } #hub .gc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } #hub .gc-emoji { font-size:26px; line-height:1; } #hub .gc-play { font-family:var(--hub-font-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent, var(--hub-accent)); } #hub .game-card h3 { font-family:var(--hub-font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; margin:2px 0 4px; } #hub .game-card p { font-size:13px; color:var(--hub-ink-soft); line-height:1.45; margin:0; } #hub .game-card.soon { opacity:.62; border-left-color:var(--hub-line); cursor:default; box-shadow:none; } #hub .game-card.preview { opacity:.85; } #hub .game-card.preview .gc-play { color:var(--hub-ink-faint); } #hub .game-card.preview:hover { border-color:var(--accent, var(--hub-accent)); } #hub .soon-pill { position:absolute; top:12px; right:12px; background:var(--hub-bg-3); color:var(--hub-ink-faint); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:99px; } /* A built-but-unlaunched game on a LOCAL dev server only (see gameCardHTML in app.js): the card is fully playable, so it gets no dimming — just this quiet badge explaining why production differs. Inline, not in the .soon-pill corner, which "Play →" already occupies. */ #hub .gc-local { align-self:flex-start; margin-top:10px; background:var(--hub-bg-3); color:var(--hub-ink-faint); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; } /* ---------- How it works ---------- Two columns on desktop: the 3 step captions (unchanged, just no longer 3-across) beside a worked example — a small, real recipe-card excerpt (built in app.js's howCardHTML(), styled by the `[data-mk-demo]`-scoped rules in styles/engine.css) demonstrating the engine's actual green/gold/gray marks. Stacks to one column on narrow viewports. */ #hub .how-wrap { display:grid; grid-template-columns:minmax(170px,240px) minmax(0,264px); justify-content:center; gap:40px; align-items:start; margin:0 0 12px; } #hub .how { list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; } #hub .how .step { display:flex; gap:10px; align-items:flex-start; } #hub .how .step .n { flex:0 0 26px; width:26px; height:26px; border-radius:8px; background:var(--hub-accent); color:var(--hub-accent-ink); font-weight:700; font-size:13px; display:grid; place-items:center; font-family:var(--hub-font-display); } #hub .how .step b { font-family:var(--hub-font-display); font-weight:600; font-size:14.5px; letter-spacing:-.01em; display:block; } #hub .how .step span { font-size:12.5px; color:var(--hub-ink-soft); line-height:1.45; display:block; margin-top:2px; } /* The worked example itself. `.how-card` combines with the reused `.recipe` class (see engine.css) — `#hub .how-card`'s id-bearing selector outranks the `[data-mk-demo] .recipe` fallback sizing on specificity alone, so it can retune just the card's size for this context without touching engine.css again. */ #hub .how-example { margin:0; text-align:center; } #hub .how-example-cap { font-family:var(--hub-font-ui); font-size:11px; font-style:italic; color:var(--hub-ink-faint); margin:0 0 10px; } #hub .how-card-wrap { display:inline-block; max-width:100%; } #hub .how-card { max-width:264px; margin:0 auto; } #hub .how-row + .how-row { margin-top:1px; } #hub .how-cap { font-family:var(--hub-font-ui); font-size:11.5px; color:var(--hub-ink-soft); line-height:1.4; text-align:left; margin:1px 0 9px 3px; } #hub .how-note { font-size:12.5px; color:var(--hub-ink-soft); text-align:center; max-width:480px; margin:0 auto; line-height:1.5; } /* ---------- Footer ---------- */ #hub .hub-footer { text-align:center; font-size:11px; color:var(--hub-ink-faint); padding:22px 14px 26px; margin-top:16px; border-top:1px solid var(--hub-line-2); } #hub .hub-footer .fam { color:var(--hub-ink-soft); } #hub .hub-footer .ver { font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--hub-ink-faint); } #hub .hub-footer a { color:var(--hub-ink-soft); text-decoration:none; } #hub .hub-footer a:hover { color:var(--hub-accent); } @media (max-width:560px) { #hub .hero { padding:52px 10px 6px; } #hub .how-wrap { grid-template-columns:1fr; gap:22px; } } @media (prefers-reduced-motion: reduce) { #hub .hero { animation:none; } #hub .game-card.live:hover { transform:none; } }