/* ========================================================================== Accessibility Governance Record: "Record" palette layer (agr-theme) Loaded AFTER ncg-a11y.css + the parent ncg-theme style.css, so these win. Aligned to the publisher's Rural Modern scheme (ncg-theme): dark chrome, one warm accent, near-black type on warm paper. The publisher's Rural Modern palette. Redefines the ncg --ncg-color-* tokens for the a11y toolbar's three modes (default / dark / high-contrast, via html[data-ncg-theme=...]). Contrast targets, checked at generation: body and link text 4.5:1 or better, UI and focus 3:1 or better, text on the accent 4.5:1 or better. High-contrast is the plugin's black / white / yellow scheme (ncg-a11y.css forces links cyan and headings yellow with !important; this file only guarantees that the yellow buttons keep black text). Chrome tokens (--ncg-hero-*, --ncg-chrome) are MODE-STABLE so heroes, the CTA band, and the footer stay dark in every mode; high-contrast forces them black. Tokens the ncg-core/templates/agr/ pages read beyond the parent's set: --ncg-link, --ncg-focus, --ncg-accent-text, --ncg-accent-2, --ncg-chrome, --ncg-on-chrome, --ncg-hero-1/2/3, --ncg-chrome-accent, --ncg-on-accent. ========================================================================== */ /* ---- Base / light ----------------------------------------------------- */ :root { --ncg-color-primary: #23312C; /* Deep Norwood Pine, the publisher's brand ink */ --ncg-color-secondary: #4E625B; /* slate green, a touch cooler than NCG's */ --ncg-color-accent: #C89B7B; /* copper, as NCG */ --ncg-on-accent: #23312C; /* text that sits ON the accent */ /* Accent that sits ON the dark chrome (heroes, CTA band, footer). */ --ncg-chrome-accent: #C89B7B; /* The accent as TEXT on the light ground (labels, hover, small type): the plain accent is a button color and is not legible as text on paper. */ --ncg-accent-text: #8A5A38; --ncg-focus: #8A5A38; /* focus ring: 3:1 or better against paper and white */ --ncg-color-heading: #050505; --ncg-color-body: #111111; --ncg-color-muted: #444444; --ncg-color-bg-paper: #F9F8F4; /* warm off-white, as NCG */ --ncg-color-bg-surface: #FFFFFF; --ncg-color-border: #767676; /* 3:1 boundary on paper and white */ --ncg-link: #23312C; /* mode-stable chrome: pine into deep teal */ --ncg-hero-1: #23312C; --ncg-hero-2: #1F3A3D; --ncg-hero-3: #1A2B3A; --ncg-chrome: #1B2724; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #5F8F86; /* verdigris: card numbers, accent borders, the second voice */ --agr-hover-tint: rgba(138, 90, 56, 0.10); --agr-focus-glow: rgba(138, 90, 56, 0.25); } /* ---- Dark ------------------------------------------------------------- */ html[data-ncg-theme="dark"] { --ncg-color-primary: #8FBFA8; --ncg-color-secondary: #A8B8B0; --ncg-color-accent: #E3B98C; --ncg-on-accent: #23312C; --ncg-chrome-accent: #E3B98C; --ncg-accent-text: #E3B98C; --ncg-focus: #E3B98C; --ncg-color-heading: #FAFAFA; --ncg-color-body: #E4E4E4; --ncg-color-muted: #B7B7B7; --ncg-color-bg-paper: #1A1F1D; --ncg-color-bg-surface: #23282A; --ncg-color-border: #6E7A75; /* raised from the parent's #5A5A5A, which is 2.4:1 on this ground */ --ncg-link: #9FCDB8; --ncg-hero-1: #121816; --ncg-hero-2: #16262A; --ncg-hero-3: #121D27; --ncg-chrome: #121816; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #8CC2B8; } /* ---- HIGH CONTRAST: black / white / yellow ---------------------------- */ html[data-ncg-theme="high-contrast"] { --ncg-color-primary: #FFFFFF; --ncg-color-secondary: #FFFFFF; --ncg-color-accent: #FFFF00; --ncg-on-accent: #000000; --ncg-chrome-accent: #FFFF00; --ncg-accent-text: #FFFF00; --ncg-focus: #FFFF00; --ncg-color-heading: #FFFFFF; --ncg-color-body: #FFFFFF; --ncg-color-muted: #FFFFFF; --ncg-color-bg-paper: #000000; --ncg-color-bg-surface: #000000; --ncg-color-border: #FFFFFF; --ncg-link: #FFFF00; --ncg-hero-1: #000000; --ncg-hero-2: #000000; --ncg-hero-3: #000000; --ncg-chrome: #000000; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #FFFF00; --agr-hover-tint: transparent; --agr-focus-glow: transparent; } /* ========================================================================== PAGE SURFACES: body follows the tokens in light mode too (the parent already handles dark via html[data-ncg-theme="dark"] body). ========================================================================== */ body { background-color: var(--ncg-color-bg-paper); color: var(--ncg-color-body); margin: 0; } /* Nothing upstream resets box-sizing, and the parent gives .site-footer-legal width: 100% while this file gives it side padding: border-box keeps the header and footer inside the viewport at every width. */ .site-header, .site-footer, .agr-footer * { box-sizing: border-box; } /* ========================================================================== LINKS: the parent points a{} at --primary and hover at the plain accent, which is a button color, not a text color. Hover uses the text-safe accent. Underline is inherited from the parent (kept for color-blind users). ========================================================================== */ a { color: var(--ncg-link); } a:hover, a:focus { color: var(--ncg-accent-text); background-color: var(--agr-hover-tint); } /* ========================================================================== FOCUS + SKIP LINK: the plugin's copper focus ring is 2.3:1 on paper; use the dedicated focus token (dark accent in light mode, light accent in dark). ========================================================================== */ .ncg-skip-link { background: var(--ncg-chrome) !important; color: var(--ncg-on-chrome) !important; } :focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .ncg-skip-link:focus { outline-color: var(--ncg-focus) !important; } html[data-ncg-theme="high-contrast"] :focus-visible { outline-color: #FFFF00 !important; } /* The plugin's high-contrast rules force every cyan and every