/* wgf-housing-builder.css - the CONTENT sections of /housing/builder/. * * Scope note: assets/wgf-house-builder.css owns the 3D editor chrome (the client's own * catalog window, ability bar and keybind caps). THIS sheet owns only the page copy * around it: the identity row, the decor art strip, the category counts, the facts * grid, the room/dye lists and the outbound link cards. Nothing here touches a * .wgf-hb-* selector, so the two sheets never fight. * * Palette: the shell tokens only (near-black slate plates, bronze/gold rules, gold * #ffd100, parchment #f4ecd8, muted grey). No green chrome, no gradients, no glows. * Fallback hexes are the token values so the sheet is correct even if it ever loads * before _tokens.css. */ /* ── Hero identity: the client's decor palette icon beside the h1 ───────────────── */ .wgf-hbx-ident { vertical-align: middle; margin-right: 12px; } .wgf-hbx-title { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } /* FrizQT is the client's title face. The @font-face rules currently live only in wgf-game-skin.css, which restyles , so this page must not pull that sheet in; until the faces are lifted to a shell sheet the stack degrades to the serif. */ .wgf-hbx-title .wgf-seo-h1 { font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif; } /* ── Art strip: real decor renders under the hero ───────────────────────────────── */ .wgf-hbx-strip { margin: 14px 0 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--wgf-panel, #14161c); border: 1px solid #6e5a2a; border-radius: 3px; } .wgf-hbx-strip__art { width: 72px; height: 72px; object-fit: contain; background: #0d0f14; border: 1px solid #3a2f18; border-radius: 2px; flex: 0 0 auto; } .wgf-hbx-credit { flex: 1 1 100%; margin: 4px 0 0; font-size: 0.78rem; color: var(--wgf-muted, #9d9d9d); } /* ── Category counts (the client's own rail icons) ──────────────────────────────── */ .wgf-hbx-cats { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .wgf-hbx-cat { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; background: #0d0f14; border: 1px solid #6e5a2a; border-radius: 3px; } .wgf-hbx-cat__icon { width: 26px; height: 26px; object-fit: contain; } .wgf-hbx-cat__name { color: var(--wgf-text, #f4ecd8); font-size: 0.9rem; } .wgf-hbx-cat__n { color: var(--wgf-gold-accent, #b7912f); font-variant-numeric: tabular-nums; font-size: 0.86rem; } /* ── Decor tiles (shares .wgf-ag-card / .wgf-ag-grid from wgf-ag-card.css) ──────── */ .wgf-hbx-tile { display: flex; align-items: center; gap: 10px; padding: 8px; } .wgf-hbx-tile__art { width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; background: #0d0f14; border: 1px solid #3a2f18; border-radius: 2px; } /* A tile is a LINK to that piece's encyclopedia page (2026-09-03). Colours stay the sheet's own bronze/gold; no underline until hover so a 24-tile grid does not read as a wall of links. */ a.wgf-hbx-tile { color: inherit; text-decoration: none; } a.wgf-hbx-tile:hover, a.wgf-hbx-tile:focus-visible { border-color: #b7912f; } a.wgf-hbx-tile:hover .wgf-ag-card__name, a.wgf-hbx-tile:focus-visible .wgf-ag-card__name { text-decoration: underline; text-underline-offset: 2px; } /* Placeholder for a piece this host has not baked a render for. An empty frame, never a broken image and never a stand-in picture from another piece. */ .wgf-hbx-tile__art--none { display: inline-block; } /* Art-strip tiles are links too. */ .wgf-hbx-strip__a { display: inline-flex; flex: 0 0 auto; line-height: 0; } a.wgf-hbx-strip__a:hover .wgf-hbx-strip__art, a.wgf-hbx-strip__a:focus-visible .wgf-hbx-strip__art { border-color: #b7912f; } /* ── Facts grid. Same class contract detail pages use (.wgf-facts-grid/.wgf-fact); scoped to .wgf-hbx here so this sheet never becomes a second global home. ──── */ .wgf-hbx .wgf-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0 0 12px; } .wgf-hbx .wgf-fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #0d0f14; border: 1px solid #2e313a; border-left: 2px solid #6e5a2a; border-radius: 2px; } .wgf-hbx .wgf-fact__k { color: var(--wgf-muted, #9d9d9d); font-size: 0.86rem; } .wgf-hbx .wgf-fact__v { color: var(--wgf-text, #f4ecd8); font-size: 0.9rem; text-align: right; } /* ── Rooms and dyes ────────────────────────────────────────────────────────────── */ .wgf-hbx-rooms, .wgf-hbx-dyes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .wgf-hbx-room { padding: 4px 10px; background: #0d0f14; border: 1px solid #2e313a; border-radius: 2px; color: var(--wgf-text, #f4ecd8); font-size: 0.88rem; } .wgf-hbx-dye { display: flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; background: #0d0f14; border: 1px solid #2e313a; border-radius: 2px; } .wgf-hbx-dye__icon { width: 24px; height: 24px; border: 1px solid #3a2f18; border-radius: 2px; } .wgf-hbx-dye__name { color: var(--wgf-muted, #9d9d9d); font-size: 0.82rem; } /* ── Outbound link cards ───────────────────────────────────────────────────────── */ .wgf-hbx-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .wgf-hbx-rel { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--wgf-panel, #14161c); border: 1px solid #6e5a2a; border-radius: 3px; text-decoration: none; } .wgf-hbx-rel:hover, .wgf-hbx-rel:focus-visible { border-color: #b7912f; } .wgf-hbx-rel__icon { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #3a2f18; border-radius: 2px; } .wgf-hbx-rel__text { display: block; } .wgf-hbx-rel__name { display: block; color: var(--wgf-gold, #ffd100); font-size: 0.95rem; } .wgf-hbx-rel__blurb { display: block; color: var(--wgf-muted, #9d9d9d); font-size: 0.82rem; } @media (max-width: 600px) { .wgf-hbx-strip__art { width: 56px; height: 56px; } .wgf-hbx .wgf-fact { flex-direction: column; gap: 2px; } .wgf-hbx .wgf-fact__v { text-align: left; } }