@charset "UTF-8"; /* Kills WP core's default editor-canvas block constraint: html :where(.wp-block) { margin-top: 28px; margin-bottom: 28px; max-width: 840px; } That's core's generic "constrained layout" fallback (theme.json content- size, applied to any block via the .wp-block class useBlockProps() adds in the editor), and it was fighting every one of our components' own width/spacing (Container's 1440px gutter, Hero's full-bleed slides, etc.) — every block showed up narrower and with extra gaps in the editor than it actually renders on the frontend. A :where() selector always has zero specificity, so a plain class selector here beats it regardless of load order — no !important needed. This is editor-only and can't leak to the frontend: "wp-block" is a class useBlockProps() adds for editing, get_block_wrapper_attributes() (what every one of our render.php files uses) never adds it. */ .wp-block { max-width: none; margin-top: 0; margin-bottom: 0; } /* Light/Dark UI mode — just 2 semantic aliases: --text and the button pair (--button-bg / --button-text). Components should reference these (plus --accent for decorative hover/active states), never the raw *-light/ *-dark tokens directly. Everything else a component needs — borders, dividers, card surfaces, muted text, icons — is derived from --text right where it's used (color-mix()/currentColor/opacity), not stored as its own variable. That keeps the whole system to "2 things change" instead of a growing list of per-component color knobs. Two independent ways this switches: 1. Container: automatic. Theme_Settings::get_theme_pairing_rules() prints a rule per bgTheme (.section-wrapper--bg-primary/secondary/tertiary) that redefines --text/--button-bg/--button-text based on the UI mode paired with that theme in Super Admin > Design. Picking a background theme IS picking the UI mode — no separate toggle. 2. Hero Slide: manual. Its background is a photo/video, not one of the 3 flat theme colors, so it keeps its own explicit per-slide Light/Dark toggle, applied as data-ui-mode="dark" on the slide wrapper. Anything nested inside inherits until another boundary overrides it again. */ :root { --text: var( --text-light ); --button-bg: var( --button-bg-light ); --button-text: var( --button-text-light ); /* Named text/link palette a component's own "Text: color" or "In-text link: color" field picks from — same light/dark cascade as --text above, see class-theme-settings.php's ui.light/ui.dark for the source values. */ --text-secondary: var( --text-secondary-light ); --text-tertiary: var( --text-tertiary-light ); --link-primary: var( --link-primary-light ); --link-secondary: var( --link-secondary-light ); --link-tertiary: var( --link-tertiary-light ); /* Decorative accent (quote marks, active states, hover) — always the tertiary theme color, independent of whichever UI mode is active. */ --accent: var( --color-bg-tertiary ); } [data-ui-mode=dark] { --text: var( --text-dark ); --button-bg: var( --button-bg-dark ); --button-text: var( --button-text-dark ); --text-secondary: var( --text-secondary-dark ); --text-tertiary: var( --text-tertiary-dark ); --link-primary: var( --link-primary-dark ); --link-secondary: var( --link-secondary-dark ); --link-tertiary: var( --link-tertiary-dark ); } /* Base typography — the actual element and default headings never had a font-family at all before this; only specific component classes (.theme-body, .theme-heading, etc.) opted into --font-body/--font-heading individually. That meant anything without one of those classes (plain WP content, post excerpts, comments, core block output) silently fell back to the browser default instead of the site's chosen fonts. Setting it here means every element inherits the right font unless something more specific overrides it — the component classes still work the same, this just makes them the exception rather than the only path to the font. */ body { font-family: var(--font-body); text-transform: var(--font-body-case, none); color: var(--text); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); text-transform: var(--font-heading-case, none); } /* Content-block rhythm -- the vertical spacing below an eyebrow, heading, * and body copy whenever they stack together as one piece of content (Hero * Slide, Callout, Text + Image, Content Grid Column, CTA, Contact Form, * Contact Person, Gallery, Modal, Video, Newsletter, WYSIWYG Column -- * anywhere theme/eyebrow, theme/heading, theme/body appear). Wes * 2026-09-16: "That could easily be set like any of the other variables * as a default... it be margin-bottom that we set instead of margin-top." * * Admin-editable now (Theme Settings > Design > Spacing Scale > * Content-Block Rhythm; defaults/'0' handling in * class-theme-settings.php's get_defaults()/get_css_variable_rules()) -- * --content-gap-xs/sm/md, same family as --space-* / --spacer-*. Each value * is margin-bottom set directly on that element's OWN base rule (see * theme-eyebrow/theme-heading/theme-body's style.scss), not here -- this * file only holds the 2 rules below that every one of them shares. */ /* Nothing trails the last piece of a stack -- without this, a body/heading/ * eyebrow that happens to be the final element still carries its own * margin-bottom into the section's padding underneath it. */ .theme-eyebrow:last-child, .theme-heading:last-child, .theme-body:last-child { margin-bottom: 0; } /* A manually-inserted Spacer block (already in the inserter -- see * src/blocks/spacer) right after one of these is the author choosing a * one-off custom gap instead of the automatic one; without this the two * would stack. */ .theme-eyebrow:has(+ .theme-spacer), .theme-heading:has(+ .theme-spacer), .theme-body:has(+ .theme-spacer) { margin-bottom: 0; } /* Skip link — visually hidden until focused */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; color: #000; padding: 1em; } .skip-link:focus { left: 0; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Eyelid — a slim promo/announcement bar pinned above the header (NOT a cookie-consent notice). Colors come from inline custom properties set on #theme-eyelid itself (see template-parts/eyelid.php), computed from Super Admin > Theme Settings > Header > Eyelid — scoped to this one element rather than added to the site-wide :root vars, since nothing else needs them. */ .theme-eyelid { position: relative; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: var(--space-sm, 1rem); padding: 0.75rem 2.5rem 0.75rem 1rem; background: var(--eyelid-bg, #1a1a1a); color: var(--eyelid-text, #fff); text-align: center; flex-wrap: wrap; } .theme-eyelid__message { margin: 0; } .theme-eyelid__cta { display: inline-flex; align-items: center; padding: 0.4em 1.1em; border-radius: 4px; border: 2px solid var(--eyelid-cta-border, transparent); background: var(--eyelid-cta-bg, transparent); color: var(--eyelid-cta-text, inherit); text-decoration: none; font-weight: 600; font-size: 0.875rem; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .theme-eyelid__cta:hover, .theme-eyelid__cta:focus-visible { background: var(--eyelid-cta-hover-bg, transparent); color: var(--eyelid-cta-hover-text, inherit); border-color: var(--eyelid-cta-hover-border, currentColor); } .theme-eyelid__close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.15s ease; } .theme-eyelid__close:hover { background: rgba(255, 255, 255, 0.15); } .theme-eyelid__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Header * --inner is constrained to the same 1440px/clamp gutter as * .section-wrapper__inner (see src/styles/_containers.scss) — without this * the logo/nav sat at the raw viewport edges on wide screens while every * other section on the site respected the page gutter, which is exactly * the kind of mismatch that makes a whole site read as unfinished even * when each piece individually looks fine. */ .site-header { position: relative; background: var(--header-bg, #fff); color: var(--header-text, var(--text)); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .site-header.is-sticky { position: sticky; top: 0; z-index: 500; } /* Floating -- only present on a page that's opted in while Theme Settings * > Header > Layout Behavior is set to Floating (see header.php + * Header_Page_Settings). Absolutely positioned so it takes no space in * the document flow, sitting directly on top of whatever's first on the * page (a Hero/Video/Image Slider block) instead of pushing it down -- * and, unlike Sticky, it scrolls away normally once you pass it; the two * are mutually exclusive treatments, never combined. */ .site-header--floating { position: absolute; top: 0; left: 0; right: 0; z-index: 500; background: var(--header-floating-bg, transparent); border-bottom: none; color: var(--header-floating-text, #fff); } .site-header--floating .site-header__logo a, .site-header--floating .site-header__logo-text, .site-header--floating .site-header__menu a, .site-header--floating .site-header__search-toggle { color: var(--header-floating-text, #fff); } .site-header--floating .site-header__menu-icon, .site-header--floating .site-header__menu-icon::before, .site-header--floating .site-header__menu-icon::after { background-color: var(--header-floating-text, #fff); } .site-header--floating .site-header__nav--desktop a:hover { color: var(--header-floating-link, var(--header-floating-text, #fff)); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width, 1440px); margin-inline: auto; padding-block: var(--header-padding-y, 1rem); padding-inline: clamp(16px, 4vw, 64px); } /* Centered: logo stays visually centered while nav splits left/right of * it in a single row (see Navigation wireframe) — left/right nav content * comes from the header-left/header-right menu locations (Appearance > * Menus), not the Primary location Logo Left uses. */ .site-header__inner--centered { justify-content: space-between; } .site-header__inner--centered .site-header__nav { flex: 1 1 0; } .site-header__inner--centered .site-header__logo { flex: 0 0 auto; margin-inline: var(--space-md, 2rem); } .site-header__right-group { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md, 2rem); flex: 1 1 0; } .site-header__logo a { display: inline-flex; align-items: center; color: var(--header-text, var(--text)); text-decoration: none; } .site-header__logo-image { display: block; width: var(--header-logo-width, 160px); height: auto; } .site-header__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1; } .site-header__menu { display: flex; gap: var(--header-nav-gap, var(--space-md, 2rem)); list-style: none; margin: 0; padding: 0; } .site-header__menu a { display: inline-flex; align-items: center; padding: var(--header-nav-item-padding, 0); text-decoration: none; color: inherit; font-family: var(--header-nav-font-family, var(--font-body)); font-size: var(--header-nav-font-size, 16px); font-weight: var(--header-nav-font-weight, 500); text-transform: var(--header-nav-font-transform, none); transition: opacity 0.15s ease; } .site-header__menu a:hover { opacity: 0.7; } .site-header__menu-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-width: 32px; height: 32px; padding: 0 2px; background: none; border: none; color: inherit; cursor: pointer; } /* Optional text next to the hamburger icon -- see Theme Settings > Header * > Mobile menu > Menu label. aria-hidden in header.php since the button * already carries an aria-label; purely decorative. */ .site-header__menu-label { font-family: var(--header-mobile-menu-label-font, var(--font-body)); font-size: 14px; font-weight: 500; color: inherit; white-space: nowrap; } /* 3-bar hamburger built from one span + its 2 pseudo-elements, no icon * font/image needed. All 3 bars flip to the floating-state color together * via .site-header--floating above. */ .site-header__menu-icon { position: relative; display: block; width: 20px; height: 2px; background-color: var(--text); transition: background-color 0.15s ease; } .site-header__menu-icon::before, .site-header__menu-icon::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background-color: var(--text); transition: background-color 0.15s ease; } .site-header__menu-icon::before { top: -6px; } .site-header__menu-icon::after { top: 6px; } /* Search + Donate CTA, grouped with the mobile menu toggle at the end of * the header — see Theme Settings > Header (`search.enabled`/`cta`) and * header.php. */ .site-header__actions { display: flex; align-items: center; gap: var(--space-sm, 1rem); } .site-header__search { position: relative; } .site-header__search-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; color: var(--text); cursor: pointer; } .site-header__search-icon { width: 20px; height: 20px; } /* Expands below the toggle button rather than shifting header layout — * matches the wireframe's compact icon-first search affordance. */ .site-header__search-form { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; min-width: 260px; background: #fff; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 6px; padding: var(--space-sm, 1rem); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .site-header__search-form[hidden] { display: none; } .site-header__search-form .search-form, .site-header__search-form form { display: flex; gap: 8px; } .site-header__cta { white-space: nowrap; font-size: var(--header-cta-font-size, var(--type-button-size)); } /* The mobile off-canvas panel (site-header__mobile-panel, in header.php) -- * `[hidden]` (native) covers the closed state at every width; this only * needs to (a) style it as a dropdown when JS opens it on a narrow * viewport, and (b) force it off on wider ones regardless of that * attribute, in case a panel was left open through a resize. */ .site-header__mobile-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 490; background: var(--header-mobile-overlay-bg, #fff); color: var(--header-mobile-overlay-text, var(--text)); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); padding: var(--space-md, 1.5rem) clamp(16px, 4vw, 64px); max-height: calc(100vh - 100%); overflow-y: auto; } .site-header__mobile-panel .site-header__nav--mobile + .site-header__nav--mobile { margin-top: var(--space-md, 1.5rem); padding-top: var(--space-md, 1.5rem); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .site-header__mobile-panel .site-header__menu { flex-direction: column; gap: var(--space-sm, 1rem); } .site-header__mobile-panel .site-header__menu a { font-size: var(--header-mobile-overlay-font-size, var(--header-nav-font-size, 16px)); } @media (max-width: 782px) { .site-header--logo-left .site-header__inner { flex-wrap: wrap; } /* Mobile gutter: the search flyout would otherwise overflow a narrow * viewport since it's positioned off the toggle button's right edge. */ .site-header__search-form { position: fixed; top: auto; left: 16px; right: 16px; min-width: 0; } /* The Donate CTA's own padding is already sized for desktop; on mobile * it competes with logo + hamburger for the same row, so it drops to a * smaller tap target rather than pushing the hamburger off-screen. */ .site-header__cta.theme-button { padding: var(--space-sm, 0.65rem) var(--space-sm, 1rem); } /* Floating is a desktop-only treatment -- a page opted into it still * needs a normal, in-flow header on mobile rather than one absolutely * positioned over its hero, so nothing on a small screen ever starts * covered by transparent header content. This overrides * .site-header--floating above, not .is-sticky -- the two states are * still mutually exclusive on desktop, this only affects what * "floating" renders as once the viewport is this narrow. */ .site-header--floating { position: sticky; top: 0; z-index: 500; background: var(--header-bg, #fff); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); color: var(--header-text, var(--text)); } .site-header--floating .site-header__logo a, .site-header--floating .site-header__logo-text, .site-header--floating .site-header__menu a, .site-header--floating .site-header__search-toggle { color: var(--header-text, var(--text)); } .site-header--floating .site-header__menu-icon, .site-header--floating .site-header__menu-icon::before, .site-header--floating .site-header__menu-icon::after { background-color: var(--text); } } /* Footer — same 1440px/clamp gutter as the header and every * .section-wrapper, for the same reason. */ .site-footer { background: var(--footer-bg, var(--color-bg-secondary, #f5f5f5)); color: var(--footer-text, var(--text)); padding-block: var(--footer-outer-top) var(--footer-outer-bottom); } .site-footer__top, .site-footer__bottom { max-width: var(--max-width, 1440px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 64px); } .site-footer__top { display: flex; flex-wrap: wrap; gap: var(--footer-top-gap); justify-content: space-between; align-items: flex-start; padding-top: var(--footer-top-padding-top); padding-bottom: var(--footer-top-padding-bottom); } .site-footer__logo { display: flex; flex-direction: column; gap: var(--space-sm, 1rem); align-items: flex-start; } .site-footer__top-item--own-row { flex: 1 0 100%; } .site-footer__social-row { display: flex; justify-content: center; max-width: var(--max-width, 1440px); margin-inline: auto; margin-bottom: var(--space-lg, 4rem); padding-inline: clamp(16px, 4vw, 64px); } .site-footer__logo-image { display: block; width: var(--footer-logo-width, 120px); height: auto; } .site-footer__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--footer-text, var(--text)); } /* Theme Settings > Footer > Social links -- one icon per non-empty URL, * grouped under the logo (site-footer__logo is already a column flexbox, * so this just becomes its 2nd row, no layout restructuring needed). See * theme_render_social_icon() in functions.php for the actual glyphs. */ .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-sm, 1rem); } .site-footer__social-link { display: flex; align-items: center; justify-content: center; color: var(--footer-text, var(--text)); opacity: 0.75; transition: opacity 0.15s ease; } .site-footer__social-link:hover, .site-footer__social-link:focus-visible { opacity: 1; } .site-footer__social-icon { display: block; } .site-footer__menu--1 { max-width: var(--footer-menu-1-max-width); } .site-footer__menu--2 { max-width: var(--footer-menu-2-max-width); } .site-footer__menu-title { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--footer-text, var(--text)); } .site-footer__menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .site-footer__menu-list--inline { flex-direction: row; flex-wrap: wrap; align-items: center; } .site-footer__menu-list a { text-decoration: none; color: color-mix(in srgb, var(--footer-text, var(--text)) 85%, transparent); font-size: var(--footer-top-link-size); transition: opacity 0.15s ease; } .site-footer__menu-list a:hover { opacity: 0.7; } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--footer-bottom-gap); border-top: 1px solid color-mix(in srgb, var(--footer-text, var(--text)) 15%, transparent); padding-top: var(--footer-bottom-padding-top); padding-bottom: var(--footer-bottom-padding-bottom); font-size: 0.875rem; color: color-mix(in srgb, var(--footer-text, var(--text)) 70%, transparent); } .site-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; } .site-footer__legal-list a { text-decoration: none; color: inherit; font-size: var(--footer-bottom-link-size); transition: opacity 0.15s ease; } .site-footer__legal-list a:hover { opacity: 0.7; } @media (max-width: 782px) { .site-footer__top { flex-direction: column; align-items: stretch; } .site-footer__top > * { order: var(--footer-order-mobile, 0); } .site-footer__top-item--own-row { flex-basis: auto; } }