/* wgf-guide-book - THE guide-body table as a spellbook page (owner law 2026-08-05).
---------------------------------------------------------------------------
Owner verbatim: "if it's big list like this it should look like a spellbook or
something creative using blizzard assets not a list" and "if we are linking to
items, we need to be able to click them, we should follow our item card rules."
ONE home for the guide table skin (Rule 11). Markup comes from exactly one seam,
guides_app._md's table pass:
Material
Qty
(item chip or text)
123
Real semantic
markup stays (SEO + accessibility); this sheet only dresses
it. Every texture is the client's OWN spellbook art, extracted 2026-08-04 by the
standing lane and already shipped for wgf-spellbook.css (the palette below is
sampled from that art - see the readability notes in wgf-spellbook.css):
spellbook-background-evergreen-right.jpg the parchment leaf (the plate)
spellbook-background-evergreen-header.png the wood band (= the column header)
spellbook-divider.png the rule the client draws between entries
spellbook-item-backplate.png the warm wash under a hovered entry
spellbook-item-iconframe.png the gold octagon framing an item icon
Value-alignment law (13-ingame-reference sec 1): the renderer classes numeric
columns is-num, so values sit right with lining figures and prose stays left.
READABILITY: parchment is a LIGHT surface, so the book flips to dark ink locally;
it never inherits the site's light-on-dark body colors. */
.wgf-gbook {
/* sampled from the page art (same sampling pass as wgf-spellbook.css) */
--gbk-parchment: #c6a46b;
--gbk-parchment-edge: #ad7b40;
--gbk-ink: #241505; /* labels / item names - 7.1:1 on parchment */
--gbk-ink-body: #3b2a16; /* values and prose - 5.7:1 */
--gbk-link: #6b1e0c; /* the client's dark-red highlight - 4.9:1 */
--gbk-wood: #2a1a0f;
/* Parchment re-scope of the two quality tokens that have NO reading on light
paper (the wgf-achievements-parchment.css pattern: re-scope the token at the
surface, every consumer - incl. the kit's own a.wgf-item-chip.q-* rules -
follows). White "common" and grey "poor" ink themselves on parchment:
common = full ink; poor = faded ink (4.9:1, still reads washed-out). The
colored tiers (uncommon+) keep their site tokens and are darkened below. */
--q-common: var(--gbk-ink);
--q-poor: #40372e;
position: relative;
isolation: isolate;
max-width: 100%;
margin: var(--space-4) auto;
overflow-x: auto; /* dense brackets scroll on phones, never clip */
background-color: var(--gbk-parchment);
background-image:
url("/assets/ui/spellbook-background-evergreen-right.jpg"),
linear-gradient(180deg, var(--gbk-parchment-edge), var(--gbk-parchment) 22%,
var(--gbk-parchment) 78%, var(--gbk-parchment-edge));
background-repeat: no-repeat;
background-position: center 30%, center;
background-size: cover, 100% 100%;
border: 1px solid #1b1109;
border-radius: 4px;
box-shadow:
inset 0 0 0 1px rgba(255, 236, 196, 0.16), /* the page's lit inner edge */
inset 0 -14px 28px rgba(74, 44, 16, 0.24),
var(--shadow-2);
}
.wgf-gbook__table {
width: 100%;
border-collapse: collapse;
color: var(--gbk-ink-body);
font-family: var(--font-ui);
font-size: var(--text-sm);
}
/* The wood band across the top of the book IS the column header: the client's own
header texture tiled across the thead, title text burnt into the wood. */
.wgf-gbook__table thead th {
padding: var(--space-2) var(--space-3);
border: 0;
background:
url("/assets/ui/spellbook-background-evergreen-header.png") center / auto 100% repeat-x,
var(--gbk-wood);
color: #f2d698;
font-family: var(--font-game);
font-size: var(--text-xs);
font-weight: 700;
font-variant: small-caps;
letter-spacing: 0.05em;
text-align: left;
text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
white-space: nowrap;
}
/* label left, value right, ALWAYS (the renderer marks value columns is-num) */
.wgf-gbook__table th.is-num,
.wgf-gbook__table td.is-num {
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.wgf-gbook__table td {
padding: var(--space-2) var(--space-3);
border: 0;
vertical-align: middle;
line-height: 1.5;
}
.wgf-gbook__table td:first-child { min-width: 200px; }
/* The page art bakes a dark leaf-edge into BOTH sides of the parchment (~8% of
the sheet at cover scale), so edge-column content used to land ON the band:
the right-aligned Buy values read as clipped at the frame and left labels sank
into the gutter (owner shot 2026-08-05). Edge columns clear the band with the
same side clearance the kit's spellbook plate carries for this exact art
(wgf-chrome kit precedent: wgf-spellbook.css side padding clamp(20px,3.6vw,46px)).
th and td together so header labels stay column-aligned with their values. */
.wgf-gbook__table thead th:first-child,
.wgf-gbook__table td:first-child {
padding-left: calc(var(--space-3) + clamp(20px, 3.6vw, 46px));
}
.wgf-gbook__table thead th:last-child,
.wgf-gbook__table td:last-child {
padding-right: calc(var(--space-3) + clamp(20px, 3.6vw, 46px));
}
/* The rule between entries is the client's own divider art, never a CSS border.
It hangs on the row's bottom edge; the extra cell padding keeps text off it. */
.wgf-gbook__table tbody tr:not(:last-child) {
background: url("/assets/ui/spellbook-divider.png") center bottom / 100% 11px no-repeat;
}
.wgf-gbook__table tbody tr:not(:last-child) td {
padding-bottom: calc(var(--space-2) + 11px);
}
/* Hover = the client's warm backplate wash behind the entry (the spell-row hover).
Non-last rows keep their divider layered above the wash. */
.wgf-gbook__table tbody tr:hover {
background: url("/assets/ui/spellbook-item-backplate.png") center / 100% 100% no-repeat;
}
.wgf-gbook__table tbody tr:hover:not(:last-child) {
background:
url("/assets/ui/spellbook-divider.png") center bottom / 100% 11px no-repeat,
url("/assets/ui/spellbook-item-backplate.png") center / 100% 100% no-repeat;
}
/* Unlinked labels (a material with no unique DB item) read as book ink, not the
site's gold-on-dark strong. */
.wgf-gbook__table strong { color: var(--gbk-ink); font-weight: 700; }
/* Plain links inside the book: the client's dark-red highlight, always underlined. */
.wgf-gbook a {
color: var(--gbk-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.wgf-gbook a:hover { color: #8f3316; text-decoration-thickness: 2px; }
.wgf-gbook a:focus-visible {
outline: 2px solid #4a2a0c;
outline-offset: 2px;
border-radius: 2px;
}
/* ── Item chips in the book = spell entries ──────────────────────────────────
No pill bubble on parchment: the real icon sits inside the client's gold
octagon frame (the frame paints in the img's padding band, the icon fills the
centre) and the name reads as the spell name. The chip stays the canonical
item_card.render_chip anchor: /item/ link + data-wgf-item hover tooltip. */
.wgf-gbook .wgf-item-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-family: var(--font-game);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
white-space: normal;
vertical-align: middle;
text-shadow: 0 1px 0 rgba(255, 240, 210, 0.35);
}
.wgf-gbook .wgf-item-chip:hover { border-color: transparent; }
.wgf-gbook .wgf-item-chip img {
width: 34px;
height: 34px;
box-sizing: border-box;
padding: 6px;
border: 0;
border-radius: 3px;
background: url("/assets/ui/spellbook-item-iconframe.png") center / 100% 100% no-repeat;
}
/* Quality stays SEMANTIC (the q-* token classes are the only mechanism) but must
be legible on light parchment. Poor + common are re-scoped AT THE TOKEN in the
.wgf-gbook block above (white/grey have no reading on paper - they become ink),
which corrects every engine and every consumer with no extra selector. The
colored tiers (uncommon+) read fine as hues on parchment and are only mixed
toward the book ink where color-mix exists. */
@supports (color: color-mix(in srgb, red 50%, black)) {
.wgf-gbook a.wgf-item-chip.q-uncommon { color: color-mix(in srgb, var(--q-uncommon) 45%, var(--gbk-ink)); }
.wgf-gbook a.wgf-item-chip.q-rare { color: color-mix(in srgb, var(--q-rare) 55%, var(--gbk-ink)); }
.wgf-gbook a.wgf-item-chip.q-epic { color: color-mix(in srgb, var(--q-epic) 55%, var(--gbk-ink)); }
.wgf-gbook a.wgf-item-chip.q-legendary { color: color-mix(in srgb, var(--q-legendary) 55%, var(--gbk-ink)); }
.wgf-gbook a.wgf-item-chip.q-artifact { color: color-mix(in srgb, var(--q-artifact) 55%, var(--gbk-ink)); }
.wgf-gbook a.wgf-item-chip.q-heirloom { color: color-mix(in srgb, var(--q-heirloom) 55%, var(--gbk-ink)); }
}
/* ── Ink on white when printed; the art is decoration, not content ───────── */
@media print {
.wgf-gbook {
background: #fff;
border: 1px solid #999;
box-shadow: none;
color: #000;
}
.wgf-gbook__table thead th { background: #fff; color: #000; text-shadow: none; }
.wgf-gbook__table tbody tr,
.wgf-gbook__table tbody tr:hover { background: none; }
.wgf-gbook .wgf-item-chip img { background: none; padding: 0; }
.wgf-gbook a { color: #000; }
}