/* * Maine AA Area 28 — theme base + component styles (Phase 1, GP-native reshape). * Maine AA Area 28 · GeneratePress child theme * --------------------------------------------------------------------------- * Adapted from the VALIDATED playground (.scratch/pg-shell.html); its .st-* * components are renamed to .maineaa-* here, keeping the exact structure, * spacing, radii, shadows and responsive rules. * * COLOR SOURCE (reshape §5): the palette is no longer authored here. Our engine * derives it and writes GeneratePress's own global_colors (inc/gp-populate.php), * so GP emits it natively as :root{--contrast…--accent-2…}. Components read * those GP vars DIRECTLY — the old html:root override bridge is gone. The engine * tokens fold onto GP slots per §5: * ink→--contrast muted→--contrast-2 dim→--contrast-3 * soft→--base bg→--base-2 surface→--base-3 brand→--accent accent→--accent-2 * Only the 6 guarded helpers GP's 7-slot model can't express survive as * --maineaa-* (brand-text, on-brand, brand-dark, on-accent, line, border-strong), * emitted inline by MaineAA_Token_CSS; plus the non-color scales (space/radius/ * type/shadow/font) in tokens.css. Light-only — the reshape dropped dark mode. * * Layering: * L2 Targeted GP chrome + global base (body/headings/links/buttons/…) * L3 Content components GP does NOT provide (hero, cards, tabs, …) * L4 A11y utilities (skip-link, sr-only, font-size control) * L5 Reduced-motion * * Type scaling: the A-/A/A+ control (theme.js) writes --maineaa-font-scale on * ; every type size is calc( * var(--maineaa-font-scale)) so the * control scales the whole typographic surface. Do NOT re-declare the scales * from tokens.css here — this file only consumes them. * * See .implans/phase-1-gp-native-reshape.md §5. */ /* ========================================================================== Tier discipline (reshape §5) -------------------------------------------------------------------------- GeneratePress emits the derived palette natively on :root (--contrast{,-2,-3}, --base{,-2,-3}, --accent, plus the custom --accent-2 — all written by inc/gp-populate.php from our engine), so the components below read those GP vars DIRECTLY. There is no override bridge. --contrast-3 is the lowest-contrast text token (meets non-text 3.0, NOT body 4.5). Per H-4 (WCAG 1.4.3), NO text in this file is colored with it — every glyph, down to the faintest doc/card/sidebar meta, uses --contrast-2 (secondary) or --contrast (primary). Hairlines/borders use --maineaa-line. */ /* ========================================================================== L2 — Global base + targeted GP chrome (Wave4 §1c) -------------------------------------------------------------------------- A thin set of single-class / element rules for the handful of GP chrome pieces whose role our model splits differently than GP's flat ramp (page-canvas vs surface; link-text = brand-text; button on-color). GP's canonical selectors at single-class specificity — no !important. ========================================================================== */ body { background: var(--base-2); color: var(--contrast); font-family: var(--maineaa-font-body); font-size: calc(var(--maineaa-text-base) * var(--maineaa-font-scale)); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* H-1 — responsive heading sizes from the tokens.css type ladder (:47-53) + Eric's -0.01em tracking. GP's main.min.css hard-codes fixed px (h1 42 / h2 35 / h3 29 …) with no media query; theme.css prints after it, so these (0,0,1) rules tie on specificity and win on source order. Weight stays GP-native (the typography store assigns all-headings → Syne 500). Sizes carry the A-/A/A+ font-scale like every other type size in this file. */ h1, h2, h3, h4, h5, h6 { color: var(--contrast); font-family: var(--maineaa-font-display); letter-spacing: -.01em; } h1 { font-size: calc(var(--maineaa-text-3xl) * var(--maineaa-font-scale)); } h2 { font-size: calc(var(--maineaa-text-2xl) * var(--maineaa-font-scale)); } h3 { font-size: calc(var(--maineaa-text-xl) * var(--maineaa-font-scale)); } h4 { font-size: calc(var(--maineaa-text-lg) * var(--maineaa-font-scale)); } h5 { font-size: calc(var(--maineaa-text-md) * var(--maineaa-font-scale)); } /* Item 9 — H6 is the only heading that maps to body size (--maineaa-text-base); on narrow viewports the clamp bottoms at 1rem/16px, which puts Syne below its ~18px legibility floor. max() lifts H6's floor to 1.125rem (18px) so no heading equals body size and Syne never renders sub-18px. H1–H5 already clear body (H4 = text-lg ≈ 23–26px), so the plan's "H4 = body" premise is stale and H1–H5 need no change. */ h6 { font-size: calc(max(1.125rem, var(--maineaa-text-base)) * var(--maineaa-font-scale)); } /* Content links — the brand-text token (an AA-legible teal on our light surfaces; the reading-legible variant of --accent, which GP uses to color bare links). Broad on purpose: this base rule is NOT hand-scoped away from nav/buttons — their own higher-specificity FILL rules (GP's site-title + .main-navigation … a below, .button, .maineaa-btn*) win over a bare `a`, so it only reaches content / widget / entry / comment links. hover/focus re-assert the same token; no text-decoration here, so nav chrome is untouched. */ a { color: var(--maineaa-brand-text); } a:hover, a:focus { color: var(--maineaa-brand-text); } /* Item 8 — inline body-content links carry an underline (WCAG 1.4.1). Nav, buttons, pathway pills and cards keep their own no-underline treatment; the :not() guards keep block/GP buttons that live inside .entry-content clean. */ .entry-content a:not(.button):not(.wp-element-button):not(.wp-block-button__link), .maineaa-panel__body a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font; } ::selection { background: var(--accent); color: var(--maineaa-on-brand); } /* Focus-visible ring — brand-text is AA-legible on our light surfaces. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--maineaa-brand-text); outline-offset: 2px; border-radius: var(--maineaa-radius-sm); } /* H-6 — the doc rows, accordion summaries and A-/A/A+ buttons live inside overflow:hidden wrappers (.maineaa-doclist / .maineaa-accordion / .maineaa-font-size), which clip the offset outline above (WCAG 2.4.11 fail: a single-item list loses all four sides). Swap to an INSET box-shadow ring — painted inside the border box, so the wrapper's clip can never reach it. These selectors out-specify the generic *:focus-visible rule above. */ .maineaa-doc:focus-visible, .maineaa-accordion summary:focus-visible, .maineaa-font-size__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--maineaa-brand-text); } /* --- GP header / nav / footer chrome -------------------------------------- GP renders these; we only re-tint them from the token bridge. */ .site-header { background: var(--base-3); } .main-navigation, .main-navigation .inside-navigation { background: var(--base-3); } .main-navigation .main-nav ul li a { color: var(--contrast); } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li[class*="current-menu"] > a { color: var(--maineaa-brand-text); } .main-navigation ul ul { background: var(--base-3); border-color: var(--maineaa-line); } /* Item 3 — minimal floating navbar. MOBILE-ONLY (≤768px): GP's drawer only functions ≤768px, so a hamburger trigger is meaningful only there; on desktop the persistent help pill (item 5) covers always-available access and the nav returns on scroll-up. Hidden off-canvas until JS adds --visible on scroll past the header. Fill/border/shadow all tokenized. */ .maineaa-floatnav { display: none; } .maineaa-floatnav__title { font-family: var(--maineaa-font-display); font-weight: 600; font-size: calc(1.125rem * var(--maineaa-font-scale)); color: var(--contrast); text-decoration: none; } .maineaa-floatnav__toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--maineaa-space-2); background: transparent; border: 0; color: var(--contrast); cursor: pointer; border-radius: var(--maineaa-radius-sm); } .maineaa-floatnav__icon svg { display: block; width: 1.5rem; height: 1.5rem; } @media (max-width: 768px) { .maineaa-floatnav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: var(--maineaa-space-3); padding: var(--maineaa-space-3) var(--maineaa-space-5); background: var(--base-3); border-bottom: 1px solid var(--maineaa-line); transform: translateY(-100%); transition: transform 0.25s ease; /* Off-canvas: remove from tab order + a11y tree so keyboard/SR users don't hit the phantom title link + toggle before the bar slides in (WCAG 2.4.3, 2.4.7, 1.3.2). Snaps (no transition on visibility) — reduced-motion path unchanged. */ visibility: hidden; } .maineaa-floatnav--visible { transform: translateY(0); box-shadow: var(--maineaa-shadow-md); visibility: visible; } } /* When the float-nav bar is visible and the user taps ITS hamburger, GP opens #site-navigation in-flow at the header's original (scrolled-off) position — far above the viewport, so the menu appears dead. While the bar is active (body.maineaa-floatnav-active, set by theme.js), pin GP's opened .toggled drawer as a fixed overlay dropping down directly beneath the bar. GP's menu.min.js keeps owning open/close/aria/focus — this only relocates WHERE the already-open menu renders. z-index sits below the bar (9999) so the bar stays on top; covering the help bar (9998) while open is acceptable. */ @media (max-width: 768px) { body.maineaa-floatnav-active #site-navigation.toggled { position: fixed; /* 4rem ≈ the bar's rendered height (padding var(--maineaa-space-3) around a 1.5rem icon + title); the menu drops flush under it. */ top: 4rem; /* GP gives #site-navigation a default top margin (header↔nav spacing); as a fixed overlay that margin only opens a gap below the bar — collapse it. */ margin-top: 0; left: 0; right: 0; max-height: calc(100vh - 4rem); overflow-y: auto; z-index: 9998; box-shadow: var(--maineaa-shadow-lg); } } /* Guardrail: kill the slide for reduced-motion users (the only new transition in this wave). */ @media (prefers-reduced-motion: reduce) { .maineaa-floatnav { transition: none; } } /* Mobile burger — token-colored only; GP owns the drawer behavior. */ .main-navigation .menu-toggle, .main-navigation .menu-bar-items { color: var(--contrast); } /* Item 4 — hide the display controls from the mobile bar (they eat header width next to the hamburger); reveal the ALREADY-rendered second copy inside the slide-out drawer when it is open. CSS-only: GP renders .maineaa-controls twice, so no PHP/JS. 768px = GP's real mobile breakpoint. The leading `body` raises specificity to (1,4,1) so the reveal beats GP's own `.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(...)` hide rule (1,4,0). */ @media (max-width: 768px) { #mobile-menu-control-wrapper .maineaa-controls { display: none; } body.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation > .menu-bar-items { display: flex; } } .site-footer, .site-info { background: var(--base-3); color: var(--contrast-2); } /* --- GP / block-editor buttons -------------------------------------------- H-5/P-7: paint every GP-core + block button teal-on-brand at pill radius and weight 600. The sidebar Search submit is