/* web/lobby.css — PAGE LAYOUT for the lobby. Nothing else. * * WHAT THIS FILE USED TO BE, AND WHY THAT WAS WRONG. It carried its own `:root` — its own --bg, * --gold, --panel, its own system-ui font stack — so `/`, `/j/`, `/game/` and `/me` * rendered in a palette that merely RESEMBLED the app. The result is the one thing a screenshot * shows instantly and no node suite ever will: the front of the site looked like a different * product from the table it leads to. Nate's words on seeing it: "the design language on the first * pages should not be different than the rest." * * It was a defensible engineering instinct — table.html's stylesheet is enormous and page-specific, * so a small standalone skin looked like the tidy choice. It was not, because `web/theme.css` is not * the table's stylesheet. It is the APP'S DESIGN SYSTEM: 997 lines of tokens (--ember, --arcane, * --blood, the three Aether faces) and a `ds-` component vocabulary (.ds-panel, .ds-card, .ds-btn, * .ds-input, .ds-field, .ds-chip, .ds-tab, .ds-empty) built to be shared. * * So the lobby pages now load `/fonts/fonts.css` → `/theme.css` → this file, and this file adds * ONLY what a document-shaped page needs that an app shell does not: a header, a centred column, * and a few compositions of existing tokens. There is no colour defined here that theme.css does * not already own. If a lobby page needs a new component, it belongs in theme.css where the table * can use it too. * * ─── THE TIERS ARE THE MECHANISM, and must be on the markup ───────────────────────────────────── * * theme.css splits TYPE, not colour: `.tier-atmos` heads in Cormorant and reads in Spectral * (shell chrome, branding, lore); `.tier-clarity` is Inter throughout (sheets, tracker, BUILDER, * VTT HUD, libraries). `--body-font`, `--heading-font`, `--accent` and `--edge-c` are defined ONLY * inside those wrappers — so a page that forgets them gets no font at all and the browser falls * back to Times New Roman, which is exactly how the first version of this looked wrong in a way no * token check would catch. * * The lobby follows theme.css's own division: the header and the hero are atmosphere; everything * you fill in or read off a card is clarity. */ /* ── the page frame ───────────────────────────────────────────────────────────────────────────── */ body.lobby { margin: 0; background: var(--app-bg, var(--bg)); color: var(--text); font-family: var(--body-font); /* supplied by the tier class on — see above */ font-size: var(--fs-body); min-height: 100vh; } .lobby-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--edge-c); background: var(--surface); position: sticky; top: 0; z-index: 5; } .lobby-header h1 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin: 0; letter-spacing: .01em; color: var(--accent); } .lobby-header h1 a { color: inherit; text-decoration: none; } .lobby-header h1 .ico { vertical-align: -0.15em; margin-right: .35em; color: var(--ember); } .lobby-header .sp { flex: 1; } .lobby-header .who { color: var(--text-dim); font-size: var(--fs-caption); } .lobby-main { max-width: 62rem; margin: 0 auto; padding: var(--sp-4); } .lobby-hero { max-width: 62rem; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-2); } .lobby-hero h2 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; margin: 0 0 var(--sp-2); letter-spacing: -.01em; color: var(--text); } .lobby-hero p { color: var(--text-dim); max-width: 62ch; font-family: var(--font-serif); } /* ── compositions of what theme.css already owns ──────────────────────────────────────────────── */ .lobby-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; } .lobby-row > .ds-field { flex: 1; min-width: 11rem; } .lobby-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); } /* A card the page is telling you it will not let you act on. Opacity alone reads as "broken", so it keeps its border and gets an explanation underneath — see commitmentOf().reason. */ .ds-card--muted { opacity: .68; } .lobby-code { font-family: var(--font-clarity); font-weight: 700; font-size: var(--fs-body); letter-spacing: .14em; color: var(--accent); } .lobby-invite { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .lobby-invite .ds-input { flex: 1; min-width: 16rem; font-family: var(--font-clarity); font-size: var(--fs-caption); } .lobby-abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); } .lobby-abilities .ds-field > label { text-align: center; text-transform: uppercase; } .lobby-abilities .ds-input { text-align: center; } .lobby-sheet { white-space: pre-wrap; font-family: var(--font-clarity); font-size: var(--fs-caption); line-height: 1.5; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--edge-c); border-radius: var(--radius-sm); padding: var(--sp-3); max-height: 22rem; overflow: auto; margin: 0; } .lobby-note { color: var(--text-dim); font-size: var(--fs-caption); line-height: 1.5; } .lobby-bad { color: var(--danger); } .lobby-good { color: var(--s-success, var(--arcane)); } .hidden { display: none !important; } @media (max-width: 40rem) { .lobby-abilities { grid-template-columns: repeat(3, 1fr); } .lobby-header { flex-wrap: wrap; } } /* ── THE LAUNCHER'S TWO QUICK LISTS ──────────────────────────────────────────────────────────── Side by side where there is room, stacked where there is not. Characters on the left because that is the half a player owns; games on the right because that is the half a table owns. */ /* THE TWO QUICK LISTS ARE ONE PAIR, so they are one SIZE. `align-items:start` sized each column to its own contents, which meant the two panels were different heights for the ordinary reason that most people have more characters than games — and a pair of boxes that disagree about how tall they are reads as a layout accident rather than a choice. They stretch to match now, they are deliberately taller than one row needs, and the LIST inside scrolls when somebody has more heroes than the box can hold. The verb at the foot stays put while it does, so "+ New character" is never scrolled off the bottom of its own panel. */ .lobby-quicklists{display:grid;gap:var(--sp-4);grid-template-columns:1fr 1fr;align-items:stretch} .lobby-quicklist{display:flex;flex-direction:column} .lobby-quicklist__body{flex:1 1 auto;min-height:20rem;max-height:34rem;overflow-y:auto; /* room for the scrollbar so a row's own edge is not hidden under it */ padding-right:var(--sp-2);scrollbar-gutter:stable} .lobby-quicklist .lobby-actions--foot{margin-top:auto} /* …and air between the pair and whatever comes under them. The Join-by-code panel was sitting hard against the two lists, so the three read as one block of three boxes rather than a pair and a separate thing you only need occasionally. */ .lobby-quicklists{margin-bottom:var(--sp-5)} @media (max-width:860px){ .lobby-quicklists{grid-template-columns:1fr} } /* The foot of a quick list: its one verb, pushed clear of the rows above it. */ .lobby-actions--foot{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--edge-c)} /* A character row: the card that opens them, and — when they are committed to a game — the control that takes them back (OL-G). The control sits BESIDE the card rather than inside it, because a button nested in a link is a click the browser has to guess at. Tightened up against the card so the two still read as one row. */ .lobby-charrow{margin-bottom:var(--sp-3)} .lobby-charrow .lobby-actions{margin-top:var(--sp-2);align-items:center} /* A whole card that is a link. The card was already the click target in spirit — it carried a button that went where the card said — so it becomes one, and stops needing the button. */ .ds-card--link{display:block;text-decoration:none;color:inherit;transition:border-color .12s ease,transform .12s ease} .ds-card--link:hover{border-color:var(--ember);transform:translateY(-1px)} .ds-card--link:focus-visible{outline:2px solid var(--ember);outline-offset:2px}