/* wgf-achievements-parchment.css - parchment-canvas legibility reconciliation for the achievement encyclopedia (/achievements/, /achievements/, /achievement/). Owner Addendum 7.34 (OWNER_REVIEW_2026-07-04): the achievement parchment canvas ships sitewide on everything achievement-related. Loaded ONLY on achievement pages (achievement_app.py extra_css), so no other surface is touched. wgf-chrome.css supplies the primitives (.wgf-canvas--parchment page surface, .wgf-parchment-pane wood-frame pane - whose selector list now also dresses the parchment page hero + the collection-checker panel in the same frame - and .wgf-parchment-row ledger row), and already re-scopes --wgf-text / --wgf-muted / --wgf-gold DARK inside a pane. This file carries the page-local polish on top: nulling the hero/checker dark-plate leftovers, dark-ink text, parchment-native form fields, the red kit action button, and softened journal category tiles. Every selector is scoped to the parchment surface or pane. */ /* ----------------------------------------------------------------------------- Content sections wear the wood-frame pane. The shared .wgf-section rule paints a dark plate border + inset/shadow; the wood frame IS the border now, so drop them. The shared .section-heading reads --wgf-gold-primary (a bright canvas gold that is illegible on light paper), so re-scope that token to the parchment red-brown inside the pane. --wgf-link/--wgf-gold-link re-scoped too so plain links in the pane (criteria entities, the category caption link) read dark, not bright gold. --------------------------------------------------------------------------- */ .wgf-section.wgf-parchment-pane, .wgf-canvas--parchment .wgf-seo-hero, .wgf-canvas--parchment .wgf-cc { border: none; box-shadow: none; --wgf-gold-primary: #7a3f10; --wgf-link: #7a3f10; --wgf-gold-link: #7a3f10; } /* ----------------------------------------------------------------------------- One-canvas composition (owner 2026-07-04): the page hero ("World of Warcraft ACHIEVEMENTS") and the "Check your achievement collection" panel now wear the wood-frame parchment pane (the frame comes from .wgf-parchment-pane's selector list in wgf-chrome.css). Here we only null the dark-plate leftovers those two carry from their own base rules and set their inner text dark, so the whole page reads as one achievement journal instead of dark plates on paper. --------------------------------------------------------------------------- */ .wgf-canvas--parchment .wgf-seo-hero .wgf-seo-h1 { color: #5a2f0c; } .wgf-canvas--parchment .wgf-seo-hero .wgf-seo-eyebrow { color: #7a3f10; opacity: 1; } .wgf-canvas--parchment .wgf-seo-hero .wgf-seo-sub { color: #4a3316; } /* Collection-checker on parchment: dark-ink header/lede/labels; the whole panel sits in the wood frame now (its own dark card is nulled above). */ .wgf-canvas--parchment .wgf-cc__h { color: #7a3f10; } .wgf-canvas--parchment .wgf-cc__lede { color: #4a3316; } .wgf-canvas--parchment .wgf-cc__field { color: #4a3316; } .wgf-canvas--parchment .wgf-cc__summary { color: #2c1d0b; } .wgf-canvas--parchment .wgf-cc__summary b { color: #7a3f10; } .wgf-canvas--parchment .wgf-cc__grouph { color: #7a3f10; } .wgf-canvas--parchment .wgf-cc__msg { color: #6a5334; } .wgf-canvas--parchment .wgf-cc__more { color: #6a5334; } /* Result rows keep their own dark card art, so restore the dark-canvas text tokens inside a row (mirrors the tile rule below) - dark ink on a dark result card would be illegible. */ .wgf-canvas--parchment .wgf-cc__row { --wgf-text: #ece3cf; --wgf-muted: var(--wgf-muted); } /* ----------------------------------------------------------------------------- Form controls on parchment: the dark inset fields (checker + the "find" search box) are illegible on paper, so give them a light parchment field with dark ink and a warm brown border. Scoped to the parchment canvas only, so the same controls on the stone-canvas hubs (mounts/pets/toys/transmogs) are untouched. The primary action stays the red kit button (below). */ .wgf-canvas--parchment .wgf-cc__input, .wgf-canvas--parchment .rd-find__input { color: #2c1d0b; background: rgba(250, 244, 227, 0.72); border: 1px solid rgba(90, 60, 24, 0.55); } .wgf-canvas--parchment .wgf-cc__input::placeholder, .wgf-canvas--parchment .rd-find__input::placeholder { color: #8a7350; } .wgf-canvas--parchment .wgf-cc__input:focus, .wgf-canvas--parchment .wgf-cc__input:focus-visible, .wgf-canvas--parchment .rd-find__input:focus { outline: none; border-color: #7a3f10; box-shadow: 0 0 0 3px rgba(122, 63, 16, 0.18); } /* The checker's primary action wears the client red kit button (.wgf-btn-red). Its markup is shared by five hubs, so instead of changing that markup we mirror the red-button skin onto .wgf-cc__btn HERE, scoped to the parchment canvas. Same three real 128-redbutton slices, caps, and yellow Friz label as wgf-chrome.css .wgf-btn-red (keep in sync). */ .wgf-canvas--parchment .wgf-cc__btn { height: var(--wgf-btn-h); min-width: 96px; padding: 0 var(--wgf-btn-cap); border: 0; border-radius: 0; background: url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box, url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box, url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box; background-color: transparent; color: var(--wgf-gold-bright); font-family: var(--font-game); font-weight: 700; letter-spacing: 0.02em; text-shadow: var(--text-ink-outline); } .wgf-canvas--parchment .wgf-cc__btn:hover { background-color: transparent; filter: brightness(1.12); } .wgf-canvas--parchment .wgf-cc__btn:active { background: url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box, url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box, url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box; transform: translateY(1px); filter: brightness(0.92); } /* ----------------------------------------------------------------------------- The breadcrumb sits on the BARE parchment canvas (outside any pane), so it never picks up the pane's dark-ink token re-scope. Darken its muted/text/separator so the trail stays legible on the light paper. Scoped to the parchment body only. */ .wgf-canvas--parchment .wgf-seo-breadcrumb li { color: #6a5334; } .wgf-canvas--parchment .wgf-seo-breadcrumb li:last-child { color: #2c1d0b; } .wgf-canvas--parchment .wgf-seo-breadcrumb li::after { color: rgba(90, 60, 24, 0.55); } .wgf-canvas--parchment .wgf-seo-breadcrumb a { color: #6a5334; } /* ----------------------------------------------------------------------------- Category tiles on parchment (owner 2026-07-04): the achievement category / list tiles carry no background art, so the shared dark-plate gradient reads as a heavy near-black slab on paper. Soften them to a warm parchment-tinted plate with a thin gilt-wood border and dark-ink label, so they belong to the journal while the icon + label stay high-contrast. (Art-backed tiles elsewhere keep their own dark palette; these achievement tiles are icon+label only.) */ .wgf-parchment-pane .wgf-ag-card { border: 1px solid rgba(90, 60, 24, 0.5); background: linear-gradient(180deg, rgba(74, 51, 22, 0.12), rgba(74, 51, 22, 0.22)); box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.28), 0 1px 2px rgba(60, 40, 16, 0.16); } .wgf-parchment-pane .wgf-ag-card:hover, .wgf-parchment-pane .wgf-ag-card:focus-visible { border-color: rgba(122, 63, 16, 0.75); } .wgf-parchment-pane .wgf-ag-card__name { color: #5a2f0c; text-shadow: none; } .wgf-parchment-pane .wgf-ag-card__meta { color: #6a5334; text-shadow: none; } /* ----------------------------------------------------------------------------- Criteria list on the detail page: dark-ink ordinals + legible red-brown entity links on parchment. The (x N) count caption already inherits the pane's dark muted. */ .wgf-parchment-pane .wgf-crit-list { color: #2c1d0b; } .wgf-parchment-pane .wgf-crit-list a { color: #7a3f10; }