/* wgf-blizzard-textures.css - THE home for in-game texture utilities (2026-09-02).
Owner, on the /mounts/ checker cards: "god awful green ... replace it with in game asset
textures, think the backpack texture or something for items." Every image referenced here
is a real client texture. Nothing is drawn, tinted in an editor, or generated:
* assets/ui/blizzard/* - extracted 2026-09-02 on CAPTAIN with the repo's own CASC path
(tools/wow.tools.local TACTTool, listfile.csv at the repo root, retail build
12.1.0.69587 from us.patch.battle.net, BLP->PNG via tools/datamine/extract_atlas_sheets
_blp_to_png). Crops use the boxes in docs/ui-ux/ui-atlas-members.json or the slot
period measured on the sheet. Source paths below are the client's own.
* assets/ui/achv/*, assets/ui/achievement-wood-* - already on disk (extract_achievement_ui
.py / slice_ui_atlas.py).
class texture file client source
.wgf-tex-parchment /assets/ui/achv/piece-parchment-page.png interface/achievementframe/ui-achievement-parchment.blp (fdid 130662, vignette-trimmed crop)
.wgf-tex-backpack /assets/ui/blizzard/backpack-tile.png interface/containerframe/ui-backpackbackground.blp (fdid 130981): one 2x2-slot period of the Backpack grid, x120-204 y66-148
.wgf-tex-tooltip /assets/ui/blizzard/tooltip-border-9slice.png interface/tooltips/ui-tooltip-border.blp (fdid 137057): its 8 edgeFile sections re-laid as a 48x48 nine-slice
/assets/ui/blizzard/tooltip-background.png interface/tooltips/ui-tooltip-background.blp (fdid 137056), multiplied by the client's tooltip backdrop color
.wgf-tex-marble /assets/ui/blizzard/background-marble.png interface/framegeneral/ui-background-marble.blp (fdid 374154)
.wgf-tex-rock /assets/ui/blizzard/background-rock.png interface/framegeneral/ui-background-rock.blp (fdid 374155)
.wgf-tex-wood-frame /assets/ui/achievement-wood-nineslice-*.png ui atlas achievement-wood-nineslice members (8 pieces, tools/slice_ui_atlas.py)
.wgf-tex-icon-frame /assets/ui/achv/piece-iconframe.png interface/achievementframe/ui-achievement-iconframe.blp (fdid 130656, 72x72 ring crop)
(blank icon) /assets/ui/blizzard/emptyslot.png interface/buttons/ui-emptyslot.blp (fdid 130766): the classic empty bag slot
Ink rules (readability contract, no exceptions):
dark textures (backpack, tooltip, marble, rock) ink #f4ecd8, muted #cfc3a5, note bronze
#b58a4c, headers gold #ffd100 in FrizQT with the ink outline
parchment ink #2b1d0e, muted #4a3620, note bronze
#6b4a1e, headers red-brown #5a2a08 (bright gold is illegible on paper)
Each utility re-scopes the site's --wgf-text / --wgf-muted / --wgf-gold-* tokens to those
inks, so components rendered inside a textured surface pick them up without their own rules.
The ithildin green ramp never reaches a textured surface: no --wgf-panel-* / --wgf-metal use.
Composition: fill utilities (parchment / backpack / marble / rock) set the background;
frame utilities (tooltip = border-image, wood-frame = a ::before overlay, icon-frame = the
ring behind an icon) never touch the fill, so "wgf-tex-marble wgf-tex-tooltip" is one marble
panel inside the classic tooltip border. Fill rules come AFTER the tooltip rule on purpose:
combined, the fill class wins the background.
Applied here (one home, Rule 11): the collection checker panel + its result rows (the
markup lives in collection_checker_app.py / assets/wgf-collection-checker.js, class hooks
only) and the Journal grid + tile frame (card_ui.py, assets/wgf-ondemand.js twin). A page
gets the sheet through collection_checker_app.panel_assets() or its extra_css list.
Documented in docs/ui-ux/18-blizzard-textures.md. */
/* ---------------------------------------------------------------------------------------
Ink tokens per surface.
--------------------------------------------------------------------------------------- */
.wgf-tex-backpack,
.wgf-tex-tooltip,
.wgf-tex-marble,
.wgf-tex-rock,
.wgf-tex-wood-frame {
--tex-ink: #f4ecd8;
--tex-ink-muted: #cfc3a5;
--tex-ink-dim: #9d9d9d;
--tex-bronze: #b58a4c;
--tex-gold: #ffd100;
--tex-gold-dim: #b7912f;
--tex-rule: #6e5a2a;
}
.wgf-tex-parchment {
--tex-ink: #2b1d0e;
--tex-ink-muted: #4a3620;
--tex-ink-dim: #5e4a2c;
--tex-bronze: #6b4a1e;
--tex-gold: #5a2a08;
--tex-gold-dim: #7a3f10;
--tex-rule: #8a6a3a;
}
.wgf-tex-parchment,
.wgf-tex-backpack,
.wgf-tex-tooltip,
.wgf-tex-marble,
.wgf-tex-rock,
.wgf-tex-wood-frame {
color: var(--tex-ink);
--wgf-text: var(--tex-ink);
--wgf-muted: var(--tex-ink-muted);
--wgf-gold: var(--tex-gold);
--wgf-gold-primary: var(--tex-gold);
--wgf-gold-bright: var(--tex-gold);
--wgf-gold-soft: var(--tex-bronze);
--wgf-gold-dim: var(--tex-gold-dim);
--wgf-gold-link: var(--tex-gold);
--wgf-link: var(--tex-gold);
--wgf-gold-rgb: 183, 145, 47;
}
/* ---------------------------------------------------------------------------------------
Frames.
--------------------------------------------------------------------------------------- */
/* The classic tooltip: UI-Tooltip-Border (16px edgeFile, drawn at 12px) around
UI-Tooltip-Background multiplied by the client's default tooltip backdrop color, exactly the
SetBackdropColor vertex tint the game applies. The fill runs under the border art the way the
backdrop insets do, so no page canvas shows between fill and line. */
.wgf-tex-tooltip,
section.wgf-cc.wgf-tex-tooltip {
border: 12px solid transparent;
border-image: url(/assets/ui/blizzard/tooltip-border-9slice.png) 16 / 12px / 0 round;
border-radius: 0;
box-shadow: none;
background-color: #12121f;
background-image: url(/assets/ui/blizzard/tooltip-background.png);
background-repeat: repeat;
background-size: 64px 64px;
background-origin: border-box;
background-clip: border-box;
background-blend-mode: multiply;
}
/* The achievement journal's wood frame as an overlay: 8 real nine-slice pieces on a ::before,
so the element underneath keeps whichever fill utility it wears. 34px is the piece width the
rest of the kit draws it at (wgf-chrome.css .wgf-parchment-pane). */
.wgf-tex-wood-frame {
position: relative;
padding: 34px;
}
.wgf-tex-wood-frame::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
url(/assets/ui/achievement-wood-nineslice-cornertopleft.png) top left / 34px auto no-repeat,
url(/assets/ui/achievement-wood-nineslice-cornertopright.png) top right / 34px auto no-repeat,
url(/assets/ui/achievement-wood-nineslice-cornerbottomleft.png) bottom left / 34px auto no-repeat,
url(/assets/ui/achievement-wood-nineslice-cornerbottomright.png) bottom right / 34px auto no-repeat,
url("/assets/ui/_achievement-wood-nineslice-edgetop.png") top center / auto 34px repeat-x,
url("/assets/ui/_achievement-wood-nineslice-edgebottom.png") bottom center / auto 34px repeat-x,
url("/assets/ui/!achievement-wood-nineslice-edgeleft.png") left center / 34px auto repeat-y,
url("/assets/ui/!achievement-wood-nineslice-edgeright.png") right center / 34px auto repeat-y;
}
/* The Blizzard icon ring (achievement frame UI-Achievement-IconFrame) around a 56px box:
the wrapper form for a ![]()
, and the replaced-element
form where the ring rides the ![]()
's own border (border-image works on img). The ring band is
14 of 72 source px; at 6px it reads as the 5px ring the achievement rows show. */
.wgf-tex-icon-frame {
display: inline-block;
box-sizing: border-box;
width: 56px;
height: 56px;
padding: 6px;
border: 0;
border-radius: 0;
background: url(/assets/ui/achv/piece-iconframe.png) center / 100% 100% no-repeat #000;
}
.wgf-tex-icon-frame > img,
.wgf-tex-icon-frame > span {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
}
img.wgf-tex-icon-frame,
.wgf-tex-icon-frame--img,
section.wgf-cc .wgf-cc__row-icon {
box-sizing: content-box;
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 6px solid transparent;
border-image: url(/assets/ui/achv/piece-iconframe.png) 14 / 6px / 0 stretch;
border-radius: 0;
background: #000;
object-fit: cover;
}
/* No icon on file: the classic empty bag slot sits in the ring (honest: the entry is real). */
.wgf-tex-icon-frame--blank,
section.wgf-cc .wgf-cc__row-icon--blank {
background: url(/assets/ui/blizzard/emptyslot.png) center / 100% 100% no-repeat #000;
}
/* ---------------------------------------------------------------------------------------
Fills. Declared after the tooltip frame so a combined "frame + fill" element takes the fill.
--------------------------------------------------------------------------------------- */
/* Centered so a short panel samples the page's middle, not the darker top band. */
.wgf-tex-parchment {
background: #d8c39a url(/assets/ui/achv/piece-parchment-page.png) center center / 480px 480px repeat;
background-origin: border-box;
background-clip: border-box;
background-blend-mode: normal;
text-shadow: none;
}
/* Drawn at 1.5x (the client's own UI scale range): one slot per 60px card height, so the
bevel lines land between text lines instead of through them. Text on leather carries the
client's 1px ink drop, never a glow. */
.wgf-tex-backpack,
.wgf-jrnl__grid.wgf-tex-backpack,
section.wgf-cc .wgf-cc__row {
background: #1a130c url(/assets/ui/blizzard/backpack-tile.png) left top / 126px 123px repeat;
background-origin: border-box;
background-clip: border-box;
background-blend-mode: normal;
text-shadow: 0 1px 1px #000;
}
.wgf-tex-marble,
section.wgf-cc.wgf-tex-marble {
background: #0d0f14 url(/assets/ui/blizzard/background-marble.png) left top / 256px 256px repeat;
background-origin: border-box;
background-clip: border-box;
background-blend-mode: normal;
}
.wgf-tex-rock {
background: #2a2118 url(/assets/ui/blizzard/background-rock.png) left top / 512px 512px repeat;
background-origin: border-box;
background-clip: border-box;
background-blend-mode: normal;
}
/* Gold FrizQT header voice on a textured surface (the kit's --font-game with the same
fallbacks wgf-chrome.css declares; the outline is the client's 1px ink). */
.wgf-tex-h,
section.wgf-cc .wgf-cc__h,
section.wgf-cc .wgf-cc__grouph {
font-family: var(--font-game, "FrizQT", "FrizQuadrata", "Friz Quadrata TT", Georgia, serif);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--tex-gold, #ffd100);
text-shadow: var(--text-ink-outline, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000);
}
.wgf-tex-parchment .wgf-tex-h { text-shadow: none; }
/* ---------------------------------------------------------------------------------------
Application: the collection checker panel (collection_checker_app.render_checker_html adds
wgf-tex-marble + wgf-tex-tooltip to ; the rows below are built by
assets/wgf-collection-checker.js, so they are skinned by selector, not by class).
--------------------------------------------------------------------------------------- */
section.wgf-cc .wgf-cc__lede,
section.wgf-cc .wgf-cc__field,
section.wgf-cc .wgf-cc__summary { color: #cfc3a5; }
section.wgf-cc .wgf-cc__summary b { color: #ffd100; }
section.wgf-cc .wgf-cc__more,
section.wgf-cc .wgf-cc__msg { color: #9d9d9d; }
section.wgf-cc .wgf-cc__msg--err { color: #ff4040; }
section.wgf-cc .wgf-cc__input {
color: #f4ecd8;
background: #0d0f14;
border: 1px solid #6e5a2a;
border-radius: 0;
}
section.wgf-cc .wgf-cc__input::placeholder { color: #9d9d9d; }
section.wgf-cc .wgf-cc__input:focus-visible {
outline: none;
border-color: #b7912f;
box-shadow: 0 0 0 2px rgba(183, 145, 47, 0.35);
}
section.wgf-cc .wgf-cc__me {
border: 1px solid #6e5a2a;
background: rgba(0, 0, 0, 0.45);
}
section.wgf-cc .wgf-cc__me-label { color: #ffd100; }
section.wgf-cc .wgf-cc__me-link { color: #ffd100; }
/* The result cards ("Easiest wins" / "Requirements to verify" / "Missing"): bag leather,
bronze rule, the item icon in the gold ring, parchment ink, bronze requirement note. */
section.wgf-cc .wgf-cc__row {
min-height: 60px;
border: 1px solid #6e5a2a;
border-radius: 0;
color: #f4ecd8;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
section.wgf-cc a.wgf-cc__row:hover,
section.wgf-cc a.wgf-cc__row:focus-visible { border-color: #b7912f; }
section.wgf-cc a.wgf-cc__row:focus-visible { box-shadow: 0 0 0 2px rgba(183, 145, 47, 0.45); }
section.wgf-cc a.wgf-cc__row:hover .wgf-cc__row-name,
section.wgf-cc a.wgf-cc__row:focus-visible .wgf-cc__row-name { color: #ffd100; }
section.wgf-cc .wgf-cc__row-name { color: #f4ecd8; }
section.wgf-cc .wgf-cc__row-fact { color: #cfc3a5; }
section.wgf-cc .wgf-cc__row-fact .wgf-price { color: inherit; }
section.wgf-cc .wgf-cc__row-note { color: #b58a4c; }
/* ---------------------------------------------------------------------------------------
Application: the Journal grid (card_ui.journal_frame puts wgf-tex-backpack on the grid,
journal_tile puts wgf-tex-icon-frame on the frame). The sheet is inert on a page that does
not list it; a hub opts in through extra_css.
--------------------------------------------------------------------------------------- */
.wgf-jrnl__grid.wgf-tex-backpack {
padding: 6px;
border: 1px solid #6e5a2a;
}
.wgf-jrnl__grid.wgf-tex-backpack .wgf-jrnl__tile { color: #f4ecd8; }
.wgf-jrnl__grid.wgf-tex-backpack a.wgf-jrnl__tile:hover,
.wgf-jrnl__grid.wgf-tex-backpack a.wgf-jrnl__tile:focus-visible {
background: rgba(0, 0, 0, 0.45);
border-color: #b7912f;
}
.wgf-jrnl__grid.wgf-tex-backpack a.wgf-jrnl__tile:hover .wgf-jrnl__name,
.wgf-jrnl__grid.wgf-tex-backpack .wgf-jrnl__tile--active .wgf-jrnl__name { color: #ffd100; }
.wgf-jrnl__grid.wgf-tex-backpack .wgf-jrnl__meta { color: #cfc3a5; }
.wgf-jrnl__frame.wgf-tex-icon-frame {
width: 52px;
height: 52px;
padding: 5px;
border: 0;
border-radius: 0;
background: url(/assets/ui/achv/piece-iconframe.png) center / 100% 100% no-repeat #000;
}
.wgf-jrnl__frame.wgf-tex-icon-frame .wgf-jrnl__icon { border-radius: 2px; }
.wgf-jrnl__frame.wgf-tex-icon-frame .wgf-jrnl__icon--blank {
background: url(/assets/ui/blizzard/emptyslot.png) center / 100% 100% no-repeat #000;
}
/* The text-only and reputation journal variants hide the frame; keep that contract. */
.wgf-jrnl--text .wgf-jrnl__frame.wgf-tex-icon-frame,
.wgf-jrnl--reps .wgf-jrnl__frame.wgf-tex-icon-frame { display: none; }
@media (prefers-reduced-motion: reduce) {
section.wgf-cc .wgf-cc__row { transition: none; }
}