/* wgf-housing.css - the /housing/ family's own surfaces (housing_render.py). Scope: .wgf-hs-* only, so it can never reach another page's chrome. The dashboard window, the category rail and the decor plate rows keep living in wgf-house-builder.css / wgf-chrome.css - this sheet adds the pieces the 2026-09-03 asset lane introduced: the in-game render band, render tiles, the quality-framed identity plate and the cohort grid. Palette: the in-game one (docs/ui-ux/17-blizzard-palette.md) through the shared tokens - slate panels, bronze/gold rules, gold links, parchment text, --q-* for item quality. Flat fills only: no gradients, no glows, no green chrome. The only green this sheet can paint is --q-uncommon on an uncommon-quality name, which is Blizzard's own. */ /* -- header art band ------------------------------------------------------------------ */ .wgf-hs-strip { margin: 0 0 18px; padding: 10px 10px 6px; background: var(--wgf-well, #08090c); border: 1px solid var(--wgf-metal, #6e5a2a); } .wgf-hs-strip__row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .wgf-hs-strip__cell { flex: 0 0 auto; display: block; width: 96px; height: 96px; background: var(--wgf-panel, #14161c); border: 1px solid var(--wgf-metal-soft, #3a3120); text-decoration: none; } .wgf-hs-strip__cell:hover, .wgf-hs-strip__cell:focus-visible { border-color: var(--wgf-gold-accent, #b7912f); outline: none; } .wgf-hs-strip__img { display: block; width: 96px; height: 96px; object-fit: contain; } .wgf-hs-strip__credit { margin: 6px 2px 0; color: var(--wgf-muted, #9d9d9d); font-size: .8rem; } /* -- grid tiles ------------------------------------------------------------------------ */ .wgf-hs-tile__art { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; background: var(--wgf-well, #08090c); border: 1px solid var(--wgf-metal-soft, #3a3120); } .wgf-hs-grid--cohort { --wgf-hs-cohort-min: 200px; } /* -- detail identity plate ------------------------------------------------------------- */ .wgf-hs-hero { display: flex; align-items: center; gap: 16px; padding: 0 0 12px; border-bottom: 1px solid var(--wgf-border-neutral, #2e313a); margin: 0 0 12px; } .wgf-hs-hero--noart { gap: 0; } .wgf-hs-hero__art { flex: 0 0 auto; display: inline-block; line-height: 0; } .wgf-hs-hero__art--plain { padding: 4px; background: var(--wgf-well, #08090c); border: 1px solid var(--wgf-metal, #6e5a2a); } .wgf-hs-hero__art--plain .wgf-hs-hero__art__img { display: block; object-fit: contain; } .wgf-hs-hero__art.wgf-qborder { display: inline-block; } .wgf-hs-hero__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* The client's own face. --font-game resolves to 'FrizQuadrata', whose @font-face (static/css/_tokens.css line 183, /assets/fonts/frizqt.woff2) is on every shell page - so this reads in Friz Quadrata without pulling wgf-game-skin.css, which would restyle . Verified 2026-09-03: the face is declared in _tokens.css, not only in the skin. */ .wgf-hs-hero__name { font-family: var(--font-game, 'FrizQuadrata', "Palatino Linotype", Georgia, serif); font-size: 1.35rem; line-height: 1.2; color: var(--wgf-gold, #ffd100); } .wgf-hs-q0 { color: var(--q-poor, #9d9d9d); } .wgf-hs-q1 { color: var(--q-common, #ffffff); } .wgf-hs-q2 { color: var(--q-uncommon, #1eff00); } .wgf-hs-q3 { color: var(--q-rare, #0070dd); } .wgf-hs-q4 { color: var(--q-epic, #a335ee); } .wgf-hs-q5 { color: var(--q-legendary, #ff8000); } /* -- small text ------------------------------------------------------------------------ */ .wgf-hs-note { margin: 10px 0 0; color: var(--wgf-muted, #9d9d9d); font-size: .88rem; } .wgf-hs-more { margin: 10px 0 0; } .wgf-hs-more a { color: var(--wgf-link, #ffe375); } /* -- client catalog category icons ------------------------------------------------------ assets/ui/housing/category-icons__active-2x.png, the in-game Decor Catalog art. Sized down in CSS (the files are 2x), never recoloured, never given a glow. */ .wgf-hs-cat__icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; vertical-align: middle; } /* The rail button is flex/space-between (wgf-small-mines.css line 72). With a third child the name would float in the middle, so it takes the slack and the count keeps its right edge. */ .wgf-house-cat .wgf-house-cat__name { flex: 1 1 auto; } .wgf-hs-cat { display: inline-flex; align-items: center; gap: 6px; } .wgf-hs-cat .wgf-hs-cat__icon { width: 20px; height: 20px; } /* -- placement budget table ------------------------------------------------------------ The yard decor budget against one decor's WeightCost (housing_render.placement_section). Slate plate, bronze rules, gold heads - the same plate language as the facts rows above it, so the page reads as one window rather than a document with a table dropped in. */ .wgf-hs-budget { width: 100%; margin: 12px 0 0; border-collapse: collapse; background: var(--wgf-panel, #14161c); border: 1px solid var(--wgf-border, #6e5a2a); font-size: .95rem; } .wgf-hs-budget caption { text-align: left; } .wgf-hs-budget th, .wgf-hs-budget td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229); } .wgf-hs-budget thead th { color: var(--wgf-gold-primary, #ffd100); font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid var(--wgf-border, #6e5a2a); } .wgf-hs-budget tbody tr:last-child th, .wgf-hs-budget tbody tr:last-child td { border-bottom: 0; } .wgf-hs-budget td { color: var(--wgf-text, #f4ecd8); } .wgf-hs-budget tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); } @media (max-width: 520px) { .wgf-hs-budget { font-size: .88rem; } .wgf-hs-budget th, .wgf-hs-budget td { padding: 6px 8px; } } @media (max-width: 640px) { .wgf-hs-strip__cell, .wgf-hs-strip__img { width: 72px; height: 72px; } .wgf-hs-hero { gap: 12px; } .wgf-hs-hero__name { font-size: 1.15rem; } }