/* * Maine AA Area 28 — theme base + component styles (Phase 1, Wave 4). * Maine AA Area 28 · GeneratePress child theme * --------------------------------------------------------------------------- * Built entirely on the --maineaa-* design tokens in tokens.css. 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. * * Layering (per .scratch/wave4-contract.md Decision 1 + Decision 2): * L1 GP global-color -> maineaa token bridge (html:root, order-proof) * 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, theme toggle) * L5 Reduced-motion * * TOKEN DISCIPLINE: every color is var(--maineaa-*). There is NO raw hex, * rgb(), hsl(), Bootstrap, or CDN anywhere in this file — light/dark flips * happen purely because the tokens flip. GeneratePress ships the header, nav, * mobile menu, footer and layout; we STYLE those via tokens (L1/L2), never * rebuild them. * * 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-design-system.md §5 W4 and .scratch/wave4-contract.md. */ /* ========================================================================== L1 — GP global-color -> maineaa token bridge (Wave4 §1b) -------------------------------------------------------------------------- GeneratePress emits its seven Global-Color custom properties on :root (--contrast / -2 / -3, --base / -2 / -3, --accent). Redefining them in terms of our tokens flips GP's ENTIRE chrome in dark mode for free — the vars just point at whatever --maineaa-* currently resolves to. html:root (specificity 0,1,1) deterministically beats GP's :root (0,1,0) REGARDLESS of source order, so this wins even when GP prints its dynamic :root{--accent:…} block after theme.css. One-notch bump, no !important. ========================================================================== */ html:root { --contrast: var(--maineaa-ink); /* primary text / headings */ --contrast-2: var(--maineaa-muted); /* secondary + body/meta/caption text */ --contrast-3: var(--maineaa-dim); /* DECORATIVE/BORDER tier + faintest labels */ --base: var(--maineaa-soft); --base-2: var(--maineaa-soft); --base-3: var(--maineaa-surface); --accent: var(--maineaa-brand); } /* TIER DISCIPLINE — --contrast-3 (= --maineaa-dim) is the DECORATIVE / BORDER tier (subtle hairlines, faint tertiary labels). It is intentionally the lowest-contrast text token (light 3.78:1 — meets non-text 3.0, NOT body 4.5), so our own rules NEVER color body-copy (reading prose) with it: paragraphs, ledes, tab/accordion bodies and card copy all use --maineaa-muted (--contrast-2) or --maineaa-ink (--contrast). --maineaa-dim only ever touches borders and the faintest tertiary meta/label glyphs, matching the validated playground. */ /* ========================================================================== 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(--maineaa-bg); color: var(--maineaa-ink); 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; } h1, h2, h3, h4, h5, h6 { color: var(--maineaa-ink); font-family: var(--maineaa-font-display); } /* Content links — the mode-flipping brand-text token, kept legible in BOTH modes. Broad on purpose: GP colors bare links via --accent (= --maineaa-brand), which is only ~2.6:1 on dark surfaces; --maineaa-brand-text (#57c1df in dark) is legible. 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 legible token over GP's own a:hover accent color (also ~2.6:1 dark) — no text-decoration here, so nav chrome is untouched. */ a { color: var(--maineaa-brand-text); } a:hover, a:focus { color: var(--maineaa-brand-text); } ::selection { background: var(--maineaa-brand); color: var(--maineaa-on-brand); } /* Focus-visible ring — brand-text is AA-legible on both light and dark. */ 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); } /* --- GP header / nav / footer chrome -------------------------------------- GP renders these; we only re-tint them from the token bridge. */ .site-header { background: var(--maineaa-surface); } .main-navigation, .main-navigation .inside-navigation { background: var(--maineaa-surface); } .main-navigation .main-nav ul li a { color: var(--maineaa-ink); } .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(--maineaa-surface); border-color: var(--maineaa-line); } /* Mobile burger — token-colored only; GP owns the drawer behavior. */ .main-navigation .menu-toggle, .main-navigation .menu-bar-items { color: var(--maineaa-ink); } .site-footer, .site-info { background: var(--maineaa-surface); color: var(--maineaa-muted); } /* --- GP / block-editor buttons -------------------------------------------- */ .button, button.button, input[type="submit"], .wp-block-button__link { background: var(--maineaa-brand); color: var(--maineaa-on-brand); border-radius: var(--maineaa-radius-pill); } .button:hover, .button:focus, button.button:hover, button.button:focus, input[type="submit"]:hover, input[type="submit"]:focus, .wp-block-button__link:hover, .wp-block-button__link:focus { background: var(--maineaa-brand-dark); color: var(--maineaa-on-brand); } /* ========================================================================== L3 — Content components (Wave4 §Decision 2; from pg-shell.html .st-*) ========================================================================== */ /* --- Hero band (owns the single

) — pg-shell.html L256-260 ------------- */ .maineaa-hero { padding: var(--maineaa-space-8) var(--maineaa-space-6); background: linear-gradient(160deg, var(--maineaa-soft), var(--maineaa-surface)); border-bottom: 1px solid var(--maineaa-line); } .maineaa-hero__eyebrow { font-family: var(--maineaa-font-body); font-size: calc(.78rem * var(--maineaa-font-scale)); letter-spacing: .16em; text-transform: uppercase; color: var(--maineaa-brand-text); font-weight: 700; margin: 0 0 var(--maineaa-space-3); } .maineaa-hero__title { font-family: var(--maineaa-font-display); font-weight: 700; font-size: calc(var(--maineaa-text-3xl) * var(--maineaa-font-scale)); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--maineaa-space-4); color: var(--maineaa-ink); text-wrap: balance; max-width: 18ch; } .maineaa-hero__lede { font-size: calc(var(--maineaa-text-md) * var(--maineaa-font-scale)); color: var(--maineaa-muted); max-width: 46ch; margin: 0 0 var(--maineaa-space-6); line-height: 1.5; } .maineaa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--maineaa-space-3); } /* --- Buttons (pill; on-brand / on-accent) — pg-shell.html L263-268 --------- */ .maineaa-btn { font-family: var(--maineaa-font-body); font-size: calc(.98rem * var(--maineaa-font-scale)); font-weight: 600; padding: calc(var(--maineaa-space-3) + 1px) var(--maineaa-space-5); border-radius: var(--maineaa-radius-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--maineaa-space-2); line-height: 1; } .maineaa-btn--primary { background: var(--maineaa-brand); color: var(--maineaa-on-brand); box-shadow: var(--maineaa-shadow-sm); } .maineaa-btn--primary:hover { background: var(--maineaa-brand-dark); } .maineaa-btn--accent { background: var(--maineaa-accent); color: var(--maineaa-on-accent); box-shadow: var(--maineaa-shadow-sm); } .maineaa-btn--ghost { background: transparent; color: var(--maineaa-brand-text); border-color: var(--maineaa-border-strong); } .maineaa-btn--ghost:hover { border-color: var(--maineaa-brand); background: var(--maineaa-soft); } /* --- Section rhythm — pg-shell.html L271-276 ------------------------------- */ .maineaa-section { padding: var(--maineaa-space-7) var(--maineaa-space-6); } .maineaa-section + .maineaa-section { border-top: 1px solid var(--maineaa-line); } .maineaa-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--maineaa-space-4); margin-bottom: var(--maineaa-space-5); } .maineaa-section__head h2, .maineaa-section__title { font-family: var(--maineaa-font-display); font-weight: 700; font-size: calc(var(--maineaa-text-xl) * var(--maineaa-font-scale)); margin: 0; letter-spacing: -.01em; color: var(--maineaa-ink); } .maineaa-section__more { color: var(--maineaa-brand-text); text-decoration: none; font-size: calc(.9rem * var(--maineaa-font-scale)); font-weight: 600; white-space: nowrap; } .maineaa-section__more:hover { text-decoration: underline; } /* --- Card grid + cards — pg-shell.html L279-288 ---------------------------- */ .maineaa-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--maineaa-space-5); } .maineaa-card, .maineaa-event-card { background: var(--maineaa-surface); border: 1px solid var(--maineaa-line); border-radius: var(--maineaa-radius); box-shadow: var(--maineaa-shadow-sm); padding: var(--maineaa-space-5); display: flex; flex-direction: column; gap: var(--maineaa-space-2); } .maineaa-card:hover, .maineaa-event-card:hover { box-shadow: var(--maineaa-shadow-md); } .maineaa-card h3, .maineaa-card__title, .maineaa-event-card h3 { font-family: var(--maineaa-font-display); font-weight: 700; font-size: calc(var(--maineaa-text-md) * var(--maineaa-font-scale)); margin: 2px 0 0; line-height: 1.2; color: var(--maineaa-ink); } .maineaa-card p, .maineaa-event-card p { margin: 2px 0 0; font-size: calc(.92rem * var(--maineaa-font-scale)); color: var(--maineaa-muted); line-height: 1.5; } .maineaa-card__meta { font-size: calc(.82rem * var(--maineaa-font-scale)); color: var(--maineaa-dim); font-weight: 500; } .maineaa-card__kv { display: flex; gap: var(--maineaa-space-2); font-size: calc(.86rem * var(--maineaa-font-scale)); } .maineaa-card__kv b { color: var(--maineaa-ink); font-weight: 600; } .maineaa-card__kv span { color: var(--maineaa-muted); } /* --- Chip / pill (reusable + card + event) — pg-shell.html L282-283 -------- */ .maineaa-chip, .maineaa-card__chip { align-self: flex-start; font-size: calc(.72rem * var(--maineaa-font-scale)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--maineaa-on-accent); background: var(--maineaa-accent); padding: 3px 9px; border-radius: var(--maineaa-radius-pill); } .maineaa-chip--soft, .maineaa-card__chip--soft { color: var(--maineaa-brand-text); background: var(--maineaa-soft); } /* --- Split: main + committee sidebar — pg-shell.html L291-299 -------------- */ .maineaa-split { display: grid; grid-template-columns: 1fr; gap: var(--maineaa-space-6); } @media (min-width: 800px) { .maineaa-split { grid-template-columns: 1.7fr 1fr; } } .maineaa-sidebar { background: var(--maineaa-soft); border: 1px solid var(--maineaa-line); border-radius: var(--maineaa-radius-lg); padding: var(--maineaa-space-5); align-self: start; } .maineaa-sidebar h3, .maineaa-sidebar__title { font-family: var(--maineaa-font-display); margin: 0 0 var(--maineaa-space-3); font-size: calc(var(--maineaa-text-md) * var(--maineaa-font-scale)); color: var(--maineaa-ink); } .maineaa-sidebar__row { display: flex; justify-content: space-between; gap: var(--maineaa-space-3); padding: var(--maineaa-space-3) 0; border-top: 1px solid var(--maineaa-line); font-size: calc(.9rem * var(--maineaa-font-scale)); } .maineaa-sidebar__row:first-of-type { border-top: 0; } .maineaa-sidebar__row span { color: var(--maineaa-dim); } .maineaa-sidebar__row b { color: var(--maineaa-ink); font-weight: 600; text-align: right; } .maineaa-sidebar__vacancy { margin-top: var(--maineaa-space-4); padding: var(--maineaa-space-3) var(--maineaa-space-4); border-radius: var(--maineaa-radius-sm); background: var(--maineaa-surface); border: 1px dashed var(--maineaa-border-strong); font-size: calc(.85rem * var(--maineaa-font-scale)); color: var(--maineaa-muted); } .maineaa-sidebar__vacancy a { color: var(--maineaa-brand-text); font-weight: 600; } /* --- Tabs (ARIA; behavior in theme.js) — pg-shell.html L302-306 ------------ */ .maineaa-tabs__list { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--maineaa-line); margin-bottom: var(--maineaa-space-4); } .maineaa-tab { appearance: none; border: 0; background: transparent; font-family: var(--maineaa-font-body); font-size: calc(.95rem * var(--maineaa-font-scale)); font-weight: 600; color: var(--maineaa-muted); padding: var(--maineaa-space-3) var(--maineaa-space-4); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; } .maineaa-tab[aria-selected="true"] { color: var(--maineaa-brand-text); border-bottom-color: var(--maineaa-brand); } .maineaa-tabpanel { font-size: calc(.94rem * var(--maineaa-font-scale)); color: var(--maineaa-muted); line-height: 1.6; } .maineaa-tabpanel[hidden] { display: none; } /* --- Accordion (native
/) — pg-shell.html L309-315 ------- */ .maineaa-accordion { border: 1px solid var(--maineaa-line); border-radius: var(--maineaa-radius); overflow: hidden; background: var(--maineaa-surface); } .maineaa-accordion details + details { border-top: 1px solid var(--maineaa-line); } .maineaa-accordion summary { cursor: pointer; padding: var(--maineaa-space-4) var(--maineaa-space-5); font-family: var(--maineaa-font-body); font-weight: 600; font-size: calc(.98rem * var(--maineaa-font-scale)); color: var(--maineaa-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--maineaa-space-3); } .maineaa-accordion summary::-webkit-details-marker { display: none; } .maineaa-accordion summary::after { content: "+"; color: var(--maineaa-brand-text); font-size: 1.2em; font-weight: 700; line-height: 1; } .maineaa-accordion details[open] summary::after { content: "\2013"; /* en dash */ } .maineaa-accordion__body { padding: 0 var(--maineaa-space-5) var(--maineaa-space-4); font-size: calc(.92rem * var(--maineaa-font-scale)); color: var(--maineaa-muted); line-height: 1.6; } /* --- Document list — pg-shell.html L318-327 ------------------------------- */ .maineaa-doclist { display: flex; flex-direction: column; border: 1px solid var(--maineaa-line); border-radius: var(--maineaa-radius); overflow: hidden; } .maineaa-doc { display: flex; align-items: center; gap: var(--maineaa-space-4); padding: var(--maineaa-space-4) var(--maineaa-space-5); background: var(--maineaa-surface); text-decoration: none; color: inherit; } .maineaa-doc + .maineaa-doc { border-top: 1px solid var(--maineaa-line); } .maineaa-doc:hover { background: var(--maineaa-soft); } .maineaa-doc__icon { width: 34px; height: 34px; flex: none; border-radius: var(--maineaa-radius-sm); background: var(--maineaa-soft); color: var(--maineaa-brand-text); display: grid; place-items: center; font-family: var(--maineaa-font-body); font-size: 10px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--maineaa-line); } .maineaa-doc__title { flex: 1; min-width: 0; } .maineaa-doc__title b { display: block; font-size: calc(.95rem * var(--maineaa-font-scale)); color: var(--maineaa-ink); font-weight: 600; } .maineaa-doc__title span { font-size: calc(.8rem * var(--maineaa-font-scale)); color: var(--maineaa-dim); } .maineaa-doc__tag { font-family: var(--maineaa-font-body); font-size: calc(.68rem * var(--maineaa-font-scale)); letter-spacing: .04em; color: var(--maineaa-muted); border: 1px solid var(--maineaa-border-strong); padding: 2px 7px; border-radius: var(--maineaa-radius-pill); white-space: nowrap; } .maineaa-doc__ext { color: var(--maineaa-brand-text); font-weight: 700; } /* ========================================================================== L4 — A11y utilities + nav embellishments ========================================================================== */ /* --- Skip link (helpers.php: .maineaa-skip-link.screen-reader-text -> #main). Hidden state comes from GP's .screen-reader-text; this fully defines the :focus reveal, token-driven and self-contained. safe-area-aware. --------- */ .maineaa-skip-link:focus { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--maineaa-space-3)); left: calc(env(safe-area-inset-left, 0px) + var(--maineaa-space-3)); z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none; padding: var(--maineaa-space-3) var(--maineaa-space-5); background: var(--maineaa-brand); color: var(--maineaa-on-brand); border-radius: var(--maineaa-radius-pill); font-family: var(--maineaa-font-body); font-weight: 600; text-decoration: none; box-shadow: var(--maineaa-shadow-lg); } /* --- Visually-hidden utility (theme's own; GP also ships .screen-reader-text) */ .maineaa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Utility-controls wrapper (site-controls.php, in generate_menu_bar_items) */ .maineaa-site-controls { display: inline-flex; align-items: center; gap: var(--maineaa-space-3); } /* --- Font-size control (helpers.php markup) — segmented A- / A / A+ -------- */ .maineaa-font-size { display: inline-flex; align-items: stretch; border: 1px solid var(--maineaa-border-strong); border-radius: var(--maineaa-radius-sm); overflow: hidden; background: var(--maineaa-surface); } .maineaa-font-size__btn { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--maineaa-font-body); font-weight: 600; color: var(--maineaa-muted); padding: var(--maineaa-space-2) var(--maineaa-space-3); line-height: 1; display: inline-flex; align-items: baseline; gap: 1px; } .maineaa-font-size__btn + .maineaa-font-size__btn { border-left: 1px solid var(--maineaa-line); } .maineaa-font-size__btn:hover { color: var(--maineaa-brand-text); background: var(--maineaa-soft); } .maineaa-font-size__btn[data-maineaa-font-size="decrease"] { font-size: calc(.82rem * var(--maineaa-font-scale)); } .maineaa-font-size__btn[data-maineaa-font-size="reset"] { font-size: calc(1rem * var(--maineaa-font-scale)); } .maineaa-font-size__btn[data-maineaa-font-size="increase"] { font-size: calc(1.18rem * var(--maineaa-font-scale)); } /* --- Dark-mode toggle (site-controls.php: [data-maineaa-theme-toggle]) ----- */ .maineaa-theme-toggle { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--maineaa-border-strong); border-radius: var(--maineaa-radius-sm); background: var(--maineaa-surface); color: var(--maineaa-ink); line-height: 1; } .maineaa-theme-toggle:hover { color: var(--maineaa-brand-text); border-color: var(--maineaa-brand); background: var(--maineaa-soft); } .maineaa-theme-toggle[aria-pressed="true"] { background: var(--maineaa-brand); color: var(--maineaa-on-brand); border-color: var(--maineaa-brand); } /* ========================================================================== L5 — Motion -------------------------------------------------------------------------- Transitions on the interactive surfaces only; killed under reduced-motion (playground L221-222 pattern). Scoped to our own classes + the GP chrome we restyle, so no !important and no specificity war. ========================================================================== */ .maineaa-btn, .maineaa-card, .maineaa-event-card, .maineaa-doc, .maineaa-tab, .maineaa-chip, .maineaa-card__chip, .maineaa-section__more, .maineaa-sidebar__vacancy a, .maineaa-theme-toggle, .maineaa-font-size__btn, .button, button.button, input[type="submit"], .wp-block-button__link { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } @media (prefers-reduced-motion: reduce) { .maineaa-btn, .maineaa-card, .maineaa-event-card, .maineaa-doc, .maineaa-tab, .maineaa-chip, .maineaa-card__chip, .maineaa-section__more, .maineaa-sidebar__vacancy a, .maineaa-theme-toggle, .maineaa-font-size__btn, .maineaa-skip-link:focus, .button, button.button, input[type="submit"], .wp-block-button__link { transition: none; } }