/* wgf-battle-pets.css - /battle-pets/ + /battle-pet/-/ only. * * Palette: docs/ui-ux/17-blizzard-palette.md tokens ONLY. Near-black slate, bronze/gold * edges, gold headings, parchment text. NO green chrome; the only green here is * --q-uncommon on an uncommon ITEM name, which is Blizzard's own semantic. * * Frames and textures come from sheets that already ship - wgf-blizzard-textures.css * (.wgf-tex-icon-frame), wgf-chrome.css, wgf-obtain.css, wgf-worldmap.css, wgf-ag-card.css. * This sheet declares NO url() of its own: it must never become a second home for an * asset path. It only lays those pieces out for this page family. */ /* ── Detail: the identity block ─────────────────────────────────────────────────── */ .wgf-bp-hero__inner { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .wgf-bp-hero__text { flex: 1 1 260px; min-width: 0; } /* The portrait rides the achievement icon ring at journal size (64px art, 76px frame). */ .wgf-bp-portrait { flex: 0 0 auto; width: 76px; height: 76px; padding: 6px; } .wgf-bp-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wgf-bp-eyebrow__src { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--wgf-metal, #6e5a2a); color: var(--wgf-neutral-text, #9b9384); } .wgf-bp-title { color: var(--wgf-gold-primary, #ffd100); } /* The real client title face. 18-blizzard-asset-kit.md s0 says the @font-face block lives * ONLY in wgf-game-skin.css (which restyles and so cannot be pulled onto a shell * page) - that is stale for this face: static/css/_tokens.css lines 181-188 declare * 'FrizQuadrata' from the same /assets/fonts/frizqt.woff2, and the shell links * /static/css/_tokens.css on every page (verified live 2026-09-03: the served sheet * carries the face). So the pet title wears the client's own Friz Quadrata, with the * site's display stack behind it. */ .wgf-bp-title { font-family: 'FrizQuadrata', var(--font-display, Georgia, serif); } /* ── Badges: the family / source icons on labels ────────────────────────────────── */ .wgf-bp-badge { display: inline-block; vertical-align: -3px; margin-right: 6px; border: 1px solid var(--wgf-metal, #6e5a2a); border-radius: 2px; background: #000; object-fit: cover; } .wgf-bp-famlink { color: var(--wgf-gold-link, #ffe375); text-decoration: none; } .wgf-bp-famlink:hover, .wgf-bp-famlink:focus-visible { text-decoration: underline; } /* ── Taught-by item chips (quality-coloured, tooltip-hooked) ────────────────────── */ .wgf-bp-item { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .wgf-bp-item:hover, .wgf-bp-item:focus-visible { text-decoration: underline; } /* The standard item-quality scale (static/css/_tokens.css). Uncommon green is Blizzard * semantics on an ITEM name and is explicitly on the keep-list of the no-green rule. */ .wgf-bp-q0 { color: var(--q-poor, #9d9d9d); } .wgf-bp-q1 { color: var(--q-common, #ffffff); } .wgf-bp-q2 { color: var(--q-uncommon, #1eff00); } .wgf-bp-q3 { color: var(--q-rare, #0070dd); } .wgf-bp-q4 { color: var(--q-epic, #a335ee); } .wgf-bp-q5 { color: var(--q-legendary, #ff8000); } .wgf-bp-q6 { color: var(--q-artifact, #e6cc80); } .wgf-bp-q7 { color: var(--q-heirloom, #00ccff); } /* ── Hub: the family filter row ─────────────────────────────────────────────────── */ .wgf-bp-typebtn { display: inline-flex; align-items: center; gap: 4px; } .wgf-bp-typebtn .wgf-bp-badge { margin-right: 2px; } /* The hub tile's meta line now carries a 14px family badge; keep it on the baseline of * the small label rather than pushing the row taller. */ .wgf-ag-card__meta .wgf-bp-badge { vertical-align: -2px; width: 14px; height: 14px; } @media (max-width: 520px) { .wgf-bp-portrait { width: 60px; height: 60px; } }