/* 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 ); /* 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 ); } /* 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 ); } /* 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 */ .site-header { position: relative; background: #fff; } .site-header.is-sticky { position: sticky; top: 0; z-index: 500; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var( --space-sm, 1rem ) var( --space-md, 2rem ); } .site-header--centered .site-header__inner { flex-direction: column; text-align: center; } .site-header__menu { display: flex; gap: var( --space-md, 2rem ); list-style: none; margin: 0; padding: 0; } .site-header__menu a { text-decoration: none; color: inherit; font-family: var( --font-body ); } .site-header__menu-toggle { display: none; background: none; border: none; cursor: pointer; } @media ( max-width: 782px ) { .site-header__nav { display: none; } .site-header__nav.is-open { display: block; } .site-header__menu-toggle { display: block; } .site-header--logo-left .site-header__inner { flex-wrap: wrap; } } /* Footer */ .site-footer { background: var( --color-bg-secondary, #f5f5f5 ); padding: var( --space-lg, 4rem ) var( --space-md, 2rem ) var( --space-md, 2rem ); } .site-footer__top { display: flex; flex-wrap: wrap; gap: var( --space-lg, 4rem ); justify-content: space-between; margin-bottom: var( --space-lg, 4rem ); } .site-footer__menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__menu-list a { text-decoration: none; color: inherit; } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba( 0, 0, 0, 0.1 ); padding-top: var( --space-sm, 1rem ); font-size: 0.875rem; } .site-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; } .site-footer__legal-list a { text-decoration: none; color: inherit; }