/* soullinked.io component library — consumes ONLY tokens.css variables (no * raw hex outside tokens.css; the contract test greps). Mobile-first at * 360px; the only breakpoints are min-width: 768px and min-width: 1280px. * Reduced motion is handled globally in tokens.css — no per-component media * queries. Color is never the only channel: every status class pairs with an * icon or label in markup (spec 19.2). */ /* ---- base ------------------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; } html { color-scheme: dark; } body { background: var(--surface-0); color: var(--text); font: 400 var(--fs-base) / var(--lh) var(--font-ui); min-height: 100vh; -webkit-text-size-adjust: 100%; } img, canvas, svg, video { max-width: 100%; height: auto; } h1 { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; } h2 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; } h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; } a { color: var(--accent-2); } code, kbd, .mono { font-family: var(--font-mono); } .dim { color: var(--text-dim); } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .icon { width: 18px; height: 18px; flex: none; } /* ---- layout utilities -------------------------------------------------------- */ .container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--sp-4); } .stack > * + * { margin-top: var(--sp-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- skip link (first element in ) -------------------------------------- */ .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-dialog); padding: var(--sp-2) var(--sp-4); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; transform: translateY(-300%); } .skip-link:focus { transform: none; } /* ---- header / nav -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface-0); border-bottom: 1px solid var(--line); } .header-row { position: relative; display: flex; align-items: center; gap: var(--sp-4); min-height: 56px; } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none; } .wordmark { font: 800 var(--fs-md) / 1 var(--font-mono); letter-spacing: 0.5px; } .wordmark-io { /* decorative brand fill (logotype) — indigo is never used for copy text */ color: var(--brand-indigo); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); cursor: pointer; } .nav-toggle .nav-icon-close { display: none; } .nav-toggle[aria-expanded='true'] .nav-icon-menu { display: none; } .nav-toggle[aria-expanded='true'] .nav-icon-close { display: inline; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--surface-1); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); } .site-nav.open { display: flex; } .nav-link { display: inline-flex; align-items: center; min-height: 44px; /* touch target floor */ padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--text-dim); text-decoration: none; font-weight: 700; } .nav-link:hover { color: var(--text); background: var(--surface-2); } .nav-link[aria-current='page'] { color: var(--accent); background: var(--tint-ok); } .nav-identity { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* ---- privacy strip (always-visible privacy state) ------------------------------ */ .privacy-strip { background: var(--surface-1); border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; } /* ---- main + footer -------------------------------------------------------------- */ main { padding-block: var(--sp-5) var(--sp-6); } .site-footer { margin-top: var(--sp-7); padding: var(--sp-6) 0; border-top: 1px solid var(--line); color: var(--text-dim); font-size: var(--fs-sm); } .footer-groups { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); } .footer-group h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .footer-group ul { list-style: none; padding: 0; display: grid; gap: var(--sp-1); } .footer-group a { color: var(--text); text-decoration: none; } .footer-group a:hover { text-decoration: underline; } .footer-disclaimer { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); } /* ---- buttons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); font: 700 var(--fs-base) / 1 var(--font-ui); letter-spacing: 0.3px; text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .btn:hover:not(:disabled) { border-color: var(--text-dim); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn[aria-busy='true'] { opacity: 0.7; cursor: progress; pointer-events: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface-0); } .btn.primary:hover:not(:disabled) { filter: brightness(1.08); } .btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface-0); } .btn.danger:hover:not(:disabled) { filter: brightness(1.08); } .btn.ghost { background: none; border-color: transparent; color: var(--text-dim); } .btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); } /* ---- forms ------------------------------------------------------------------------- */ .field { display: grid; gap: var(--sp-1); } .field label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); } .field input, .field select, .field textarea { min-height: 44px; padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); } input.code-entry { width: 9ch; font: 800 var(--fs-lg) / 1 var(--font-mono); letter-spacing: 6px; text-transform: uppercase; text-align: center; } /* ---- cards -------------------------------------------------------------------------- */ .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); } .card-section > h2 { margin-bottom: var(--sp-3); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .card-highlight { /* the token-reveal well: shown once, treated like it matters */ background: var(--surface-sunken); border: 1px dashed var(--warn); color: var(--warn); font-family: var(--font-mono); word-break: break-all; } /* ---- summary tiles -------------------------------------------------------------------- */ .tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); } .tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); } .tile b { display: block; font-family: var(--font-mono); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.2; } .tile span { color: var(--text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; } .tile.ok b { color: var(--ok); } .tile.danger b { color: var(--danger); } .tile.warn b { color: var(--warn); } .tile.info b { color: var(--info); } /* ---- board tables ------------------------------------------------------------------------ */ .table-wrap { overflow-x: auto; } .board-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .board-table th, .board-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } .board-table th { color: var(--text-dim); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .board-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- pills (every pill = icon + text; color is never the only channel) --------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); background: var(--surface-2); color: var(--text-dim); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; } .pill .icon { width: 14px; height: 14px; } /* lobby lifecycle */ .pill-draft { background: var(--surface-2); color: var(--text-dim); } .pill-open { background: var(--tint-info); color: var(--info); } .pill-active { background: var(--tint-ok); color: var(--ok); } .pill-archived { background: var(--tint-indigo); color: var(--accent-2); } /* encounter fates */ .pill-caught { background: var(--tint-ok); color: var(--ok); } .pill-fainted { background: var(--tint-danger); color: var(--danger); } .pill-fled { background: var(--tint-warn); color: var(--warn); } .pill-void { background: var(--tint-indigo); color: var(--accent-2); } /* link state */ .pill-linked { background: var(--tint-ok); color: var(--ok); } .pill-dead { background: var(--tint-danger); color: var(--danger); } /* privacy (members-only is the norm and stays quiet; public is loud) */ .pill-private { background: var(--tint-indigo); color: var(--accent-2); } .pill-community { background: var(--tint-info); color: var(--info); } .pill-public { background: var(--tint-warn); color: var(--warn); } /* stub phases */ .pill-beta { background: var(--tint-info); color: var(--info); } .pill-future { background: var(--tint-indigo); color: var(--accent-2); } /* ---- banners -------------------------------------------------------------------------------- */ .banner { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-sm); font-size: var(--fs-sm); } .banner .icon { margin-top: 1px; } .banner-info { background: var(--tint-info); border-left-color: var(--info); } .banner-ok { background: var(--tint-ok); border-left-color: var(--ok); } .banner-danger { background: var(--tint-danger); border-left-color: var(--danger); } .banner-warn { background: var(--tint-warn); border-left-color: var(--warn); } /* ---- toasts (host div ships in the shell with aria-live) -------------------------------------- */ #toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); } .toast { max-width: 320px; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--info); border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-size: var(--fs-sm); animation: toast-in var(--dur-base) var(--ease); } .toast-ok { border-left-color: var(--ok); } .toast-danger { border-left-color: var(--danger); } .toast-warn { border-left-color: var(--warn); } .toast-info { border-left-color: var(--info); } @keyframes toast-in { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---- tabs -------------------------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); overflow-x: auto; } .tab { appearance: none; min-height: 44px; padding: 0 var(--sp-3); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font: 700 var(--fs-base) / 1 var(--font-ui); white-space: nowrap; cursor: pointer; } .tab:hover { color: var(--text); } .tab[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); } /* ---- empty state --------------------------------------------------------------------------------- */ .empty { padding: var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-dim); text-align: center; } /* ---- stub state (STUB-STANDARD template shape) ----------------------------------------------------- */ .stub { display: grid; gap: var(--sp-3); justify-items: start; max-width: 560px; } .stub .stub-icon { width: 48px; height: 48px; color: var(--line-strong); } .stub .today { color: var(--text-dim); } /* ---- identity chip ----------------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 220px; min-height: 32px; padding: var(--sp-1) var(--sp-3); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--text); font-size: var(--fs-sm); text-decoration: none; } .chip:hover { border-color: var(--line-strong); } .chip-dot { width: 10px; height: 10px; flex: none; border-radius: var(--r-full); background: var(--line-strong); } .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- color picker (player-chosen cosmetics) ------------------------------------------------------------ */ .swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .swatches button { width: 32px; height: 32px; padding: 0; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-full); cursor: pointer; } .swatches button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--text); } /* ---- QR / pairing block (code text = the accessible equivalent) ------------------------------------------ */ .qr-block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4); } .qr-block canvas { flex: none; border-radius: var(--r-sm); } .qr-code { font: 800 var(--fs-xl) / 1.3 var(--font-mono); letter-spacing: 6px; color: var(--warn); } .qr-link { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-2); word-break: break-all; } /* ---- link-graph nodes ---------------------------------------------------------------------------------------- */ .node { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--fs-sm); } .node-alive { background: var(--tint-ok); border-color: var(--ok); color: var(--ok); } .node-dead { background: var(--tint-danger); border-color: var(--danger); color: var(--danger); } .node-void { background: var(--tint-indigo); border-color: var(--accent-2); color: var(--accent-2); } /* ---- feed / ticker ---------------------------------------------------------------------------------------------- */ .feed { list-style: none; padding: 0; display: grid; gap: var(--sp-2); } .feed li { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-1); border-left: 2px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); } .feed time { flex: none; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); } /* ---- HP bars (role="meter"; width lands via the [data-hp] CSSOM pass) --------------------------------------------- */ .hpbar { position: relative; min-width: 120px; height: 10px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; } .hpbar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ok); transition: width var(--dur-base) var(--ease); } .hpbar.low > span { background: var(--warn); } .hpbar.crit > span { background: var(--danger); } /* ---- dialog (replaces confirm()) -------------------------------------------------------------------------------------- */ dialog { max-width: min(92vw, 480px); padding: var(--sp-5); background: var(--surface-1); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); } dialog::backdrop { background: var(--surface-sunken); opacity: 0.8; } /* ---- skeletons (tokens.css reduced-motion kill makes these static) ------------------------------------------------------- */ .skeleton { display: block; height: 1em; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: skeleton-slide 1.2s linear infinite; color: transparent; } @keyframes skeleton-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- breakpoints: the ONLY two ------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .nav-toggle { display: none; } .site-nav { display: flex; position: static; flex: 1; flex-direction: row; align-items: center; gap: var(--sp-2); padding: 0; background: none; border: 0; box-shadow: none; } .nav-identity { margin-left: auto; } .nav-link { min-height: 36px; } .footer-groups { grid-template-columns: repeat(4, 1fr); } .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .board-table th:first-child, .board-table td:first-child { position: sticky; left: 0; background: var(--surface-1); } } @media (min-width: 1280px) { .container { padding-inline: var(--sp-6); } } /* ==== page components (additive sections; web-design mission Phase C) ========== * Everything below serves the page refactors (career / lobby room / run board). * Same rules as above: tokens only, mobile-first, the two breakpoints only. */ /* ---- shared page scaffolding ---------------------------------------------------- */ /* Pages toggle visibility with the hidden attribute (the dynamic-styling * standard); it must beat display-setting component classes. */ [hidden] { display: none !important; } .eyebrow { color: var(--text-dim); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .hint { color: var(--text-dim); font-size: var(--fs-sm); } .code-big { font: 800 clamp(28px, 9vw, 52px) / 1.15 var(--font-mono); letter-spacing: 0.18em; color: var(--accent); overflow-wrap: anywhere; } .card-section > h2 .count { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; } .action-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .action-row .btn { flex: 1 1 100%; /* full-width touch targets at 360 */ } .two-col { display: grid; gap: var(--sp-4); } .cards-grid { display: grid; gap: var(--sp-4); } /* ---- career (web/src/careerpage.js) ----------------------------------------------- */ .who { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .who-dot { width: 18px; height: 18px; flex: none; border-radius: var(--r-full); background: var(--line-strong); } .who-name { font-size: var(--fs-lg); letter-spacing: 0.5px; } .rel-cards { display: grid; gap: var(--sp-3); } .rel-name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; } .rel-ok { color: var(--ok); } .rel-warn { color: var(--warn); } .rel-danger { color: var(--danger); } .code-cell { font-weight: 700; letter-spacing: 2px; } /* ---- lobby room (web/src/lobbypage.js) ---------------------------------------------- */ .roster-row { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-1) var(--sp-2); border-bottom: 1px dashed var(--line); } .roster-row:last-child { border-bottom: none; } .roster-row.me { background: var(--tint-ok); border-radius: var(--r-sm); } .roster-row .pill { margin-left: auto; } .roster-dot { width: 12px; height: 12px; flex: none; border-radius: var(--r-full); background: var(--line-strong); } .tag { flex: none; padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1px; } .tag-host { color: var(--warn); border: 1px solid var(--warn); } .tag-you { color: var(--info); border: 1px solid var(--info); } .pill-ready { background: var(--tint-ok); color: var(--ok); } .pill-wait { background: var(--surface-2); color: var(--text-dim); } .setup-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); } .setup-row:last-child { border-bottom: none; } .setup-key { color: var(--text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; } /* the RUN-IS-LIVE takeover — the pulse dies under the tokens.css * reduced-motion kill, so no per-component media query is needed */ .live-overlay { position: fixed; inset: 0; z-index: var(--z-live); display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface-sunken); text-align: center; } .live-overlay.show { display: flex; } .live-text { font: 800 min(11vw, 84px) / 1.1 var(--font-mono); letter-spacing: 8px; color: var(--ok); animation: live-pulse 0.9s var(--ease) infinite alternate; } .live-sub { color: var(--text-dim); font-size: var(--fs-base); letter-spacing: 2px; } @keyframes live-pulse { from { transform: scale(0.96); opacity: 0.85; } to { transform: scale(1.05); opacity: 1; } } /* ---- run board (web/src/dashboard.js) -------------------------------------------------- */ .statline { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); } .statline span { color: var(--text-dim); } .statline b { font-variant-numeric: tabular-nums; } .kills { color: var(--danger); } .blame { margin: var(--sp-2) 0; padding: var(--sp-1) var(--sp-2); background: var(--tint-danger); border-left: 3px solid var(--danger); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .rap { opacity: 0.62; margin-top: var(--sp-2); } .raphead { color: var(--text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .funline { padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); } .big { font-size: var(--fs-md); font-weight: 700; } .nick { color: var(--warn); font-weight: 700; } .deadname { color: var(--danger); text-decoration: line-through; } .ledger-ghost { opacity: 0.55; } .mon { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); } .mon .lv { color: var(--text-dim); font-size: var(--fs-xs); min-width: 34px; } .mon .hpbar { flex: 1; min-width: 50px; height: 8px; } .routetag { flex: none; padding: 0 var(--sp-1); border: 1px solid var(--info); border-radius: var(--r-sm); color: var(--info); font-size: var(--fs-xs); white-space: nowrap; } .routetag.dead { color: var(--danger); border-color: var(--danger); } .feed-scroll { max-height: 420px; overflow-y: auto; } .feed-status { color: var(--text-dim); font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; } .status-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-1); border-radius: var(--r-full); background: var(--text-dim); } .status-dot.ok { background: var(--ok); } .status-dot.warn { background: var(--warn); } .board-regions { display: grid; gap: var(--sp-4); } /* ---- page-component breakpoints ------------------------------------------------------- */ @media (min-width: 768px) { .action-row .btn { flex: 0 0 auto; } .two-col { grid-template-columns: 1fr 1fr; align-items: start; } .cards-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .tiles-4 { grid-template-columns: repeat(4, 1fr); /* career stat tiles: 2-up → 4-up */ } .rel-cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { /* WIREFRAMES §5: blame cards + parties side by side, fun cards full row, * ledger + feed split. DOM keeps the 360 order; areas do the rearranging. */ .board-regions { grid-template-columns: 3fr 2fr; grid-template-areas: 'players parties' 'fun fun' 'ledger feed'; align-items: start; } .region-players { grid-area: players; } .region-parties { grid-area: parties; } .region-fun { grid-area: fun; } .region-ledger { grid-area: ledger; } .region-feed { grid-area: feed; } .region-fun.cards-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } /* ==== auth cards + landing + home (additive sections; web-design mission * C9/C10 — the final page wave). Same rules as everything above: tokens * only, mobile-first, the two breakpoints only. ================================ */ /* ---- auth card (/claim, /signin — WIREFRAMES §2) ---------------------------------------- */ /* A phone design that happens to also run on desktop: one centered column, * max 420px at every breakpoint. */ .auth-wrap { display: grid; justify-items: center; gap: var(--sp-5); } .auth-card { width: 100%; max-width: 420px; } .color-picker input[type='color'] { width: 44px; height: 34px; padding: 2px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; } /* ---- landing (/ signed-out — WIREFRAMES §1) ----------------------------------------------- */ .hero { display: grid; gap: var(--sp-5); justify-items: center; text-align: center; padding-block: var(--sp-6); } .hero-copy { display: grid; gap: var(--sp-3); justify-items: center; max-width: 640px; } .hero-mark { width: 112px; height: 112px; } .hero-wordmark { font-size: var(--fs-xl); } .hero-tagline { font-size: clamp(34px, 8vw, 56px); } .hero-support { color: var(--text-dim); font-size: var(--fs-lg); } .hero-ctas { margin-top: var(--sp-2); } .step-strip { list-style: none; padding: 0; display: grid; gap: var(--sp-3); margin-top: var(--sp-3); counter-reset: step; } .step { counter-increment: step; display: grid; gap: var(--sp-2); justify-items: start; padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); } .step::before { content: counter(step); font: 800 var(--fs-md) / 1 var(--font-mono); color: var(--accent); } .step-icon { width: 24px; height: 24px; color: var(--accent); } .explore-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); } .explore-card { display: grid; gap: var(--sp-2); justify-items: start; color: var(--text); text-decoration: none; } .explore-card:hover { border-color: var(--line-strong); } .explore-card p { font-size: var(--fs-sm); } .explore-icon { width: 22px; height: 22px; color: var(--accent-2); } .invite-note { text-align: center; padding-block: var(--sp-4); } /* ---- runs home (/ signed-in — WIREFRAMES §3) ------------------------------------------------ */ .home-grid { display: grid; gap: var(--sp-4); align-items: start; } .home-grid .card-section > .pill { justify-self: start; } .row-link { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-2); color: var(--text); text-decoration: none; font-size: var(--fs-sm); } .row-link:hover { border-color: var(--info); } .row-link b { font-family: var(--font-mono); font-size: var(--fs-base); letter-spacing: 2px; } .row-link .chev { margin-left: auto; color: var(--text-dim); } /* ---- landing/home breakpoints (the ONLY two) ------------------------------------------------ */ @media (min-width: 768px) { .hero { grid-template-columns: auto 1fr; text-align: left; align-items: center; } .hero-copy { justify-items: start; } .step-strip { grid-template-columns: repeat(3, 1fr); } .explore-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .explore-grid { grid-template-columns: repeat(3, 1fr); } /* WIREFRAMES §3: runs column left, join/host + seed + pair right, live * under runs, settings full row. DOM keeps the 360 order; areas rearrange. */ .home-grid { grid-template-columns: 3fr 2fr; grid-template-areas: 'runs join' 'runs seed' 'live pair' 'settings settings' 'legacy legacy'; } .home-runs { grid-area: runs; } .home-join { grid-area: join; } .home-live { grid-area: live; } .home-seed { grid-area: seed; } .home-pair { grid-area: pair; } .home-settings { grid-area: settings; } .home-legacy { grid-area: legacy; } } /* ==== download page (/download — web/src/download.js). Additive; same rules: * tokens only, mobile-first, the two breakpoints only. Reuses .btn.primary, * .card, .card-section, .empty, .hint — this only tunes the CTA + prose lists. */ .download-lede { max-width: 60ch; font-size: var(--fs-md); color: var(--text-dim); } .download-cta { display: grid; gap: var(--sp-2); justify-items: start; } .download-btn { min-height: 52px; padding-inline: var(--sp-5); font-size: var(--fs-md); } .download-sub { color: var(--text-dim); font-size: var(--fs-sm); } .download-pending { text-align: left; } .download-steps, .download-notes { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-2); } .download-steps li, .download-notes li { padding-left: var(--sp-1); } .download-platforms { max-width: 60ch; } /* ==== board rule-violation receipts (web/static/board.js). Additive; tokens * only, mobile-first, zero-inline. A rap-sheet line with receipts is a native *

(a pure-markup disclosure — no JS handler, so it * lives inside the strict CSP); a zero-count line stays a plain .statline. * The summary mimics a .statline; the receipts wrap into chips that stay * scannable at 360px even with a long "Came unprepared" list. */ .rapline { border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); } .rapline > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; cursor: pointer; list-style: none; } /* drop the default disclosure triangle — .rapcaret is our own, count-side cue */ .rapline > summary::-webkit-details-marker { display: none; } .rapline > summary > span:first-child { color: var(--text-dim); } .rapline > summary .num { font-variant-numeric: tabular-nums; } .rapval { display: inline-flex; align-items: center; gap: var(--sp-1); } .rapcaret { width: 0; height: 0; border-left: 4px solid var(--text-dim); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s ease; } .rapline[open] .rapcaret { transform: rotate(90deg); } .receipts { margin: 0 0 var(--sp-1); padding: 2px 0 var(--sp-1) var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); list-style: none; } .receipts li { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; font-size: var(--fs-xs); color: var(--text); } .receipts .routetag { border-color: var(--line-strong); color: var(--text-dim); }