/* Dark recut 2026-07-30: owner - parchment was too bright/hard to read. */ /* 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: #e8c56e; --wgf-link: #e8c56e; --wgf-gold-link: #e8c56e; /* Dark recut completion 2026-08-02: the 07-30 recut flipped every text color light but left wgf-chrome.css's LIGHT paper fill + dark-ink tokens in place, so the page shipped light-on-light (owner: "this page is hard to read"). The pane now actually IS dark: same wood 9-slice frame, with a heavy dark wash over the parchment fill so the paper grain survives as texture. Keep the frame layer list in sync with wgf-chrome.css .wgf-parchment-pane. Tokens re-scoped light to match. */ --wgf-text: #ece3cf; --wgf-muted: #b1a58c; --wgf-gold: #e8c56e; color: #ece3cf; 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, linear-gradient(180deg, rgba(24, 18, 10, 0.90), rgba(16, 12, 7, 0.94)), url(/assets/ui/questbg-parchment.png) center / cover no-repeat; } /* The bare page canvas gets the same dark treatment so panes and canvas read as one dark journal rather than dark plates floating on bright paper. */ .wgf-canvas--parchment { background: linear-gradient(180deg, rgba(14, 10, 6, 0.88), rgba(9, 6, 3, 0.93)), url(/assets/ui/questbg-parchment.png) top center / 512px auto repeat; background-attachment: fixed, fixed; } /* Chrome.css paints these dark-ink for light paper; on the dark recut they go light. */ .wgf-canvas--parchment .wgf-parchment-pane__title { color: #e8c56e; } .wgf-canvas--parchment .wgf-parchment-row { color: #ece3cf; border-bottom-color: rgba(232, 197, 110, 0.18); } .wgf-canvas--parchment .rd-section-caption { color: #b1a58c; } .wgf-canvas--parchment .rd-find__label { color: #e8c56e; } /* ----------------------------------------------------------------------------- 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: #e8c56e; } .wgf-canvas--parchment .wgf-seo-hero .wgf-seo-eyebrow { color: #d4b657; opacity: 1; } .wgf-canvas--parchment .wgf-seo-hero .wgf-seo-sub { color: #cfc3a5; } /* Collection-checker on parchment: light text on dark panel. */ .wgf-canvas--parchment .wgf-cc__h { color: #e8c56e; } .wgf-canvas--parchment .wgf-cc__lede { color: #cfc3a5; } .wgf-canvas--parchment .wgf-cc__field { color: #cfc3a5; } .wgf-canvas--parchment .wgf-cc__summary { color: #b1a58c; } .wgf-canvas--parchment .wgf-cc__summary b { color: #e8c56e; } .wgf-canvas--parchment .wgf-cc__grouph { color: #e8c56e; } .wgf-canvas--parchment .wgf-cc__msg { color: #9a9184; } .wgf-canvas--parchment .wgf-cc__more { color: #9a9184; } /* 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); } /* Dark parchment form fields: dark backgrounds, light text, metal borders. */ .wgf-canvas--parchment .wgf-cc__input, .wgf-canvas--parchment .rd-find__input { color: #cfc3a5; background: rgba(28, 23, 16, 0.95); border: 1px solid rgba(74, 74, 74, 0.5); } .wgf-canvas--parchment .wgf-cc__input::placeholder, .wgf-canvas--parchment .rd-find__input::placeholder { color: #9a9184; } .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: #e8c56e; box-shadow: 0 0 0 3px rgba(232, 197, 110, 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. Red-tab re-cut (2026-08-05): the crumbs now carry their own dark red tab plates (wgf-site-shell.css), legible on the light paper by themselves, so only the pieces that sit on the bare canvas BETWEEN tabs need darkening here: the gold chevron and any plate-less (href-less inner) crumb text. Scoped to the parchment body only. */ .wgf-canvas--parchment .wgf-seo-breadcrumb li:not(:last-child) { color: #9a9184; } .wgf-canvas--parchment .wgf-seo-breadcrumb li::after { color: rgba(74, 74, 74, 0.6); } /* ----------------------------------------------------------------------------- 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(74, 74, 74, 0.5); background: linear-gradient(180deg, rgba(42, 35, 24, 0.4), rgba(35, 28, 18, 0.5)); box-shadow: inset 0 1px 0 rgba(58, 48, 32, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } .wgf-parchment-pane .wgf-ag-card:hover, .wgf-parchment-pane .wgf-ag-card:focus-visible { border-color: rgba(232, 197, 110, 0.4); } .wgf-parchment-pane .wgf-ag-card__name { color: #d4b657; text-shadow: none; } .wgf-parchment-pane .wgf-ag-card__meta { color: #9a9184; 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: #cfc3a5; } .wgf-parchment-pane .wgf-crit-list a { color: #e8c56e; } /* Criteria nesting depth utilities (data-depth attribute from achievement_app.py). Depth 2+ items receive proportional left margin for visual hierarchy. */ .wgf-parchment-pane .wgf-crit-list li[data-depth="2"] { margin-left: 1.25em; } .wgf-parchment-pane .wgf-crit-list li[data-depth="3"] { margin-left: 2.5em; } .wgf-parchment-pane .wgf-crit-list li[data-depth="4"] { margin-left: 3.75em; } .wgf-parchment-pane .wgf-crit-list li[data-depth="5"] { margin-left: 5em; } .wgf-parchment-pane .wgf-crit-list li[data-depth="6"] { margin-left: 6.25em; }