/* wgf-races.css - the /races/ + /race/-/ family (race_app.py, race_render.py). Layout and geometry only. Every colour is a palette token from static/css/_tokens.css (docs/ui-ux/17-blizzard-palette.md); no green literal, no gradient, no glow. The only image URLs here are the client's own faction banners - the same two files assets/wgf-player-card.css already paints - and the portrait ring comes from the shared assets/wgf-blizzard-textures.css (.wgf-tex-icon-frame), so no art path is duplicated. FrizQT: the four @font-face rules live only in assets/wgf-game-skin.css, which restyles and therefore cannot be pulled into a shell page (docs/ui-ux/18-blizzard-asset-kit.md section 0). The stack below names the family and falls back until that lift lands. */ /* ---------------------------------------------------------------------------- hero band */ .wgf-race-band { position: relative; border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2)); background: var(--wgf-panel-1, #14161c); margin: 0 0 14px; overflow: hidden; } /* Blizzard's faction banner art, 512x256, behind a flat scrim so parchment text keeps its contrast floor. Painted only when the client's faction tree resolved a side. */ .wgf-race-band--alliance, .wgf-race-band--horde { background-position: right center; background-repeat: no-repeat; background-size: auto 100%; } .wgf-race-band--alliance { background-image: url(/assets/pvp/faction/bg-alliance.jpg); } .wgf-race-band--horde { background-image: url(/assets/pvp/faction/bg-horde.jpg); } /* The hub belongs to neither side, so it wears both banners, Alliance left, Horde right. */ .wgf-race-band--both { background-image: url(/assets/pvp/faction/bg-alliance.jpg), url(/assets/pvp/faction/bg-horde.jpg); background-position: left center, right center; background-repeat: no-repeat, no-repeat; background-size: auto 100%, auto 100%; } .wgf-race-band--both .wgf-race-band__scrim { background: linear-gradient(90deg, rgba(10, 11, 15, .58) 0%, rgba(10, 11, 15, .95) 30%, rgba(10, 11, 15, .95) 70%, rgba(10, 11, 15, .58) 100%); } .wgf-race-band__scrim { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 16px; /* The legibility floor, same recipe as assets/wgf-zonebg.css: a flat darkness scrim over the art so parchment text keeps its AA contrast. Not decoration - without it the banner's lit half eats the meta line. */ background: var(--wgf-plate, #08090c); background: linear-gradient(90deg, rgba(10, 11, 15, .96) 0%, rgba(10, 11, 15, .92) 62%, rgba(10, 11, 15, .55) 100%); } .wgf-race-band__text { min-width: 0; flex: 1 1 320px; } .wgf-race-band__title { font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif; font-size: 1.5rem; line-height: 1.15; margin: 0 0 4px; color: var(--wgf-gold, #ffd100); } .wgf-race-band__title--muted { color: var(--wgf-muted, #b3a88f); } .wgf-race-band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--wgf-neutral-text, #9b9384); } .wgf-race-band__meta a { color: var(--wgf-gold-link, #ffe375); } /* pvp_icons.faction_crest_img emits .wgf-pvp-crest, whose 18px geometry lives in assets/wgf-pvp.css - a 65 KB sheet this family has no other use for. Size it here, scoped to this family's two containers, so nothing else on the site is affected. */ .wgf-race-band__meta .wgf-pvp-crest, .wgf-race-card .wgf-pvp-crest { width: 18px; height: 18px; vertical-align: -3px; } /* ------------------------------------------------------------------------ portrait pair */ .wgf-race-portraits { display: flex; gap: 12px; flex: 0 0 auto; } .wgf-race-portrait { margin: 0; text-align: center; } .wgf-race-portrait .wgf-tex-icon-frame { display: inline-block; } .wgf-race-portrait__img { display: block; width: 100%; height: 100%; } .wgf-race-portrait__cap { margin: 4px 0 0; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wgf-neutral-text, #9b9384); } /* ------------------------------------------------------------------------- facts + rail */ .wgf-fact__icon { vertical-align: -4px; margin-right: 6px; border: 1px solid var(--wgf-metal, #6e5a2a); } .wgf-race-card .wgf-ag-card__meta .wgf-pvp-crest { margin-right: 5px; } /* The cohort rail is a shelf, not a catalogue: narrower tracks so 12 siblings sit in two rows instead of pushing the comments strip off the first screen. */ .wgf-ag-grid--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ------------------------------------------------------------------------ heritage card */ .wgf-race-heritage { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2)); background: var(--wgf-panel-2, #1a1d24); } .wgf-race-heritage__body { min-width: 0; } .wgf-race-heritage__title { display: block; font-family: FrizQT, "Friz Quadrata TT", Georgia, "Times New Roman", serif; color: var(--wgf-gold-link, #ffe375); } .wgf-race-heritage__desc { margin: 4px 0 0; font-size: .9rem; color: var(--wgf-text, #f4ecd8); } .wgf-race-heritage__points { margin: 4px 0 0; font-size: .82rem; color: var(--wgf-neutral-text, #9b9384); } @media (max-width: 640px) { .wgf-race-band--alliance, .wgf-race-band--horde, .wgf-race-band--both { background-image: none; } .wgf-race-band__scrim, .wgf-race-band--both .wgf-race-band__scrim { background: var(--wgf-plate, #08090c); } .wgf-race-band__title { font-size: 1.25rem; } } /* ------------------------------------------------------- racial abilities (detail page) Added 2026-09-03 with the Racial Abilities section. Geometry only; the icon ring itself is .wgf-tex-icon-frame from assets/wgf-blizzard-textures.css, so no art path repeats here. Rows, not a wall of chips: a person reads four racials top to bottom. */ .wgf-race-racials { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .wgf-race-racial { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 9px; border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2)); background: var(--wgf-panel-2, #191c24); } .wgf-race-racial__ring { flex: 0 0 auto; line-height: 0; } .wgf-race-racial__name { color: var(--wgf-gold-link, #ffd100); font-weight: 600; font-size: 14px; line-height: 1.25; text-decoration: none; } .wgf-race-racial__name:hover, .wgf-race-racial__name:focus-visible { text-decoration: underline; } span.wgf-race-racial__name { color: var(--wgf-text, #e8e3d6); } /* ------------------------------------------------------------- classes this race can roll The class crest is the committed assets/icons/classicon_.jpg that class_read resolves and checks on disk; an unbaked class renders text with no box. */ .wgf-race-classes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .wgf-race-class { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2)); background: var(--wgf-panel-2, #191c24); color: var(--wgf-gold-link, #ffd100); font-size: 13px; font-weight: 600; text-decoration: none; } .wgf-race-class:hover, .wgf-race-class:focus-visible { border-color: var(--wgf-gold, #ffd100); } .wgf-race-class--plain { color: var(--wgf-neutral-text, #c9c4b6); } .wgf-race-class__icon { width: 32px; height: 32px; display: block; border: 1px solid var(--wgf-metal, #4b4636); } .wgf-race-class__name { line-height: 1.2; } /* ---------------------------------------------------------------- grouped roster (/races/) Each faction block wears its own crest in the heading, so the eye lands on Alliance / Horde / Both Sides / Client Model Rows before it lands on 57 tiles. */ .wgf-race-group__h { display: flex; align-items: center; gap: 9px; } .wgf-race-group__h img { width: 26px; height: 26px; display: block; border: 1px solid var(--wgf-metal, #4b4636); } /* The 18px faction crest pvp_icons emits, sized down to sit on a tile meta line. */ .wgf-race-card .wgf-ag-card__meta .wgf-pvp-crest { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }