/* ============================================================================= CHRONICLE PLATES — the surface spends the identity the palette paid for ============================================================================= Cards become PLATES: a gold hairline rule broken by a seal, a drop cap, small-caps tags, a breath of parchment grain, and a lamplight hover. All on the existing tokens, so dark mode inherits for free and the a11y contrast modes keep winning (this file loads with the palette's dependency chain, before ncg-a11y's overrides). THE DRESS IS A PREFERENCE. Every ornamental rule below is gated on `html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"])`: the plate dress is the default, "Plain card" in the accessibility panel strips it (drop caps and letterspaced small caps are real readability costs for some readers, so the toggle lives with the other reading preferences, not in a theme picker), and high contrast strips it unconditionally because a decoration a user must opt out of is not a high-contrast mode. What is NOT gated: the seal mask variables (placeholders use them), the palette corrections to ncg-core's card list, and the almanac's functional category colors -- those are fixes, not dress. THE SEALS are inline SVG data-URIs used as CSS masks, so they take whatever color the context gives them (gold on light, gold-lit on dark) with one set of shapes: sword, anvil, banner, tower, book, quill. Assign with class="tac-seal tac-seal--sword" or let the category classes below pick one. ========================================================================== */ /* ── the seal shapes (always defined; placeholders and templates use them) ── */ :root { --tac-seal-sword: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.5 12h-3L12 2zm-1.5 13h3l.5 3-2 4-2-4 .5-3zM7 10l10 0 0 1.6-10 0z'/%3E%3C/svg%3E"); --tac-seal-anvil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h16v3c-3 0-5 1-6 3h-4c-1-2-3-3-6-3V8zm4 8h8l2 4H6l2-4z'/%3E%3C/svg%3E"); --tac-seal-banner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v18l-6-4-6 4V2z'/%3E%3C/svg%3E"); --tac-seal-tower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 22V8H5V4h3v2h2V4h4v2h2V4h3v4h-2v14h-4v-5h-2v5H7z'/%3E%3C/svg%3E"); --tac-seal-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4c3-1.5 6-1.5 8 0 2-1.5 5-1.5 8 0v15c-3-1.5-6-1.5-8 0-2-1.5-5-1.5-8 0V4zm8 1.6v12'/%3E%3C/svg%3E"); --tac-seal-quill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4c-6 0-11 4-13 10l-3 6 6-3c6-2 10-7 10-13zM7 17l4-4'/%3E%3C/svg%3E"); } .tac-seal { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; background-color: var(--tac-gold); -webkit-mask: var(--tac-seal-book) center / contain no-repeat; mask: var(--tac-seal-book) center / contain no-repeat; } html[data-ncg-theme="dark"] .tac-seal { background-color: var(--tac-gold-lit); } .tac-seal--sword { -webkit-mask-image: var(--tac-seal-sword); mask-image: var(--tac-seal-sword); } .tac-seal--anvil { -webkit-mask-image: var(--tac-seal-anvil); mask-image: var(--tac-seal-anvil); } .tac-seal--banner { -webkit-mask-image: var(--tac-seal-banner); mask-image: var(--tac-seal-banner); } .tac-seal--tower { -webkit-mask-image: var(--tac-seal-tower); mask-image: var(--tac-seal-tower); } .tac-seal--book { -webkit-mask-image: var(--tac-seal-book); mask-image: var(--tac-seal-book); } .tac-seal--quill { -webkit-mask-image: var(--tac-seal-quill); mask-image: var(--tac-seal-quill); } /* ═════════════════════════════════════════════════════════════════════════ THE GATED DRESS — everything from here to the "always on" section only applies while the dress preference is plate (the default) and the theme is not high contrast. ═════════════════════════════════════════════════════════════════════════ */ /* ── the plate treatment ──────────────────────────────────────────────── */ /* Applies to every card family the site draws; .tac-plate is the opt-in class for anything new. */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-svc-card, .ncg-media-card, .ncg-team-card, .tac-great, .tac-plate) { position: relative; background-image: radial-gradient(ellipse at 18% 8%, rgba(138, 94, 15, .035), transparent 55%), radial-gradient(ellipse at 85% 92%, rgba(18, 94, 88, .03), transparent 55%); transition: box-shadow .25s ease, border-color .25s ease; } /* the gold hairline rule, broken by a centered seal */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-svc-card, .ncg-media-card, .tac-great, .tac-plate)::before { content: ''; display: block; height: 1px; margin: 2px 10% 14px; background: linear-gradient(90deg, transparent, var(--tac-gold) 18%, var(--tac-gold) 42%, transparent 46%, transparent 54%, var(--tac-gold) 58%, var(--tac-gold) 82%, transparent); opacity: .75; } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-svc-card, .ncg-media-card, .tac-great, .tac-plate)::after { content: ''; position: absolute; top: -6px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%); background-color: var(--tac-gold); -webkit-mask: var(--tac-seal-book) center / contain no-repeat; mask: var(--tac-seal-book) center / contain no-repeat; } html[data-ncg-theme="dark"]:not([data-tac-dress="card"]) :where(.ncg-svc-card, .ncg-media-card, .tac-great, .tac-plate)::after { background-color: var(--tac-gold-lit); } /* per-plate seals: add one of these beside the card class */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .tac-plate--sword::after { -webkit-mask-image: var(--tac-seal-sword); mask-image: var(--tac-seal-sword); } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .tac-plate--anvil::after { -webkit-mask-image: var(--tac-seal-anvil); mask-image: var(--tac-seal-anvil); } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .tac-plate--banner::after { -webkit-mask-image: var(--tac-seal-banner); mask-image: var(--tac-seal-banner); } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .tac-plate--tower::after { -webkit-mask-image: var(--tac-seal-tower); mask-image: var(--tac-seal-tower); } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .tac-plate--quill::after { -webkit-mask-image: var(--tac-seal-quill); mask-image: var(--tac-seal-quill); } /* the lamplight hover: the reader's lamp passes over the page */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-svc-card, .ncg-media-card, .tac-great, .tac-plate):hover, html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-svc-card, .ncg-media-card, .tac-great, .tac-plate):focus-within { box-shadow: 0 0 0 1px var(--tac-gold), 0 6px 24px rgba(138, 94, 15, .14); border-color: var(--tac-gold); } /* small-caps tags replace the generic pill (letterspaced small caps are a readability cost for some readers; plain-card mode restores the pill) */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.ncg-eyebrow, .ncg-cal-cat, .tac-great__count, .ncg-alm-panel__cat) { font-variant-caps: all-small-caps; letter-spacing: .14em; font-weight: 650; text-transform: none; color: var(--tac-card-tag); } /* the drop cap: long-form bodies open like a chronicle page. The last two selectors are the ncg-publication reader (chronicle entries, book chapters), so long-form reading feels like the book the Library promises. Gated with the rest: a floated initial is exactly the kind of ornament a reader with tracking difficulties turns off first. */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.tac-dropcap, .tac-lore-body, .ncg-prose, .ncg-article-body, #ncg-reader-content) > p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .82; padding: .06em .12em 0 0; font-weight: 700; color: var(--tac-gold); } html[data-ncg-theme="dark"]:not([data-tac-dress="card"]) :where(.tac-dropcap, .tac-lore-body, .ncg-prose, .ncg-article-body, #ncg-reader-content) > p:first-of-type::first-letter { color: var(--tac-gold-lit); } /* ── wing headers: engraved chapter heads ─────────────────────────────── */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.tac-hall h2, .tac-wing-head) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; text-align: center; } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.tac-hall h2, .tac-wing-head)::before, html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.tac-hall h2, .tac-wing-head)::after { content: ''; height: 1px; background: linear-gradient(90deg, transparent, var(--tac-gold)); opacity: .6; } html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) :where(.tac-hall h2, .tac-wing-head)::after { background: linear-gradient(90deg, var(--tac-gold), transparent); } /* the almanac's chronicle flourishes (its category colors are functional and stay below, always on) */ html:not([data-tac-dress="card"]):not([data-ncg-theme="high-contrast"]) .ncg-cal--almanac .ncg-cal-grid caption::first-letter { color: var(--tac-gold); } html[data-ncg-theme="dark"]:not([data-tac-dress="card"]) .ncg-cal--almanac .ncg-cal-grid caption::first-letter { color: var(--tac-gold-lit); } /* ═════════════════════════════════════════════════════════════════════════ ALWAYS ON — corrections and functional color, not dress ═════════════════════════════════════════════════════════════════════════ */ /* ledger totals: the counts in ink, the label beneath in small caps */ .tac-great__count { display: block; } .tac-great__name { color: var(--ncg-color-heading); } /* ── the Almanac in chronicle dress ───────────────────────────────────── */ .ncg-cal--almanac .ncg-cal-grid caption { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; color: var(--ncg-color-heading); } .ncg-cal--almanac .ncg-alm-grid td { background: var(--ncg-color-bg-surface); border-color: var(--ncg-color-border); } .ncg-cal--almanac .ncg-alm-day.is-today { box-shadow: inset 0 0 0 2px var(--tac-gold); } .ncg-cal--almanac .ncg-alm-ribbon { color: var(--tac-card-tag); } .ncg-cal--almanac .ncg-alm-band { color: #FFFCF6; } .ncg-cal--almanac .ncg-alm-band.cat--festival { color: #17140F; } /* the world's own hues: gold festivals, oxblood war, verdigris spire */ .ncg-cal--almanac .ncg-alm-band.cat--festival, .ncg-cal--almanac .ncg-alm-key.cat--festival::before { background: var(--tac-gold); } html[data-ncg-theme="dark"] .ncg-cal--almanac .ncg-alm-band.cat--festival, html[data-ncg-theme="dark"] .ncg-cal--almanac .ncg-alm-key.cat--festival::before { background: var(--tac-gold-lit); } .ncg-cal--almanac .ncg-alm-band.cat--battleground, .ncg-cal--almanac .ncg-alm-key.cat--battleground::before { background: var(--tac-oxblood); } .ncg-cal--almanac .ncg-alm-band.cat--the-spire, .ncg-cal--almanac .ncg-alm-band.cat--clans, .ncg-cal--almanac .ncg-alm-key.cat--the-spire::before, .ncg-cal--almanac .ncg-alm-key.cat--clans::before { background: var(--tac-verdigris); } /* ── the Chronicles card list (ncg-core's ncg-cl) ─────────────────────── */ /* An entry with no featured image drew ncg-core's fallback: the dark hero gradient, which on a vellum card reads as a hole in the page. Parchment with a centred seal instead: the entry looks sealed, not broken. `html` prefix on purpose: the component's own