/* Theme Name: ElizabethVenart.com (EVA) Theme URI: https://elizabethvenart.com Description: Custom child theme for ElizabethVenart.com — Lavender & Sage design system. Built on Ollie by Johns & Taylor. Author: Johns & Taylor Author URI: https://johnsandtaylor.com Template: ollie Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, portfolio, one-column, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, style-variations, template-editing, wide-blocks Text Domain: jandt-cwt-eva */ /* === Header: Sticky ===================================================== NOTE: do NOT add `backdrop-filter` (or `filter`, `transform`, `will-change`, `contain: paint/layout/strict`) to .eva-header. Per CSS spec, those properties make the element a *containing block* for position:fixed descendants — which means the open mobile-nav overlay (position:fixed; inset:0) gets clipped to the ~80px header bounds instead of filling the viewport. We hit that bug on 2026-05-04 and spent half a day chasing it through WP/Ollie CSS before isolating the cause. If a frosted-glass effect is wanted, apply backdrop-filter to a child element or pseudo-element of .eva-header — never the header itself. ─────────────────────────────────────────────────────────────────────── */ .eva-header { position: sticky; top: 0; z-index: 100; } /* === Desktop: Taller header padding === */ @media (min-width: 782px) { .eva-header { padding-top: 2rem !important; padding-bottom: 2rem !important; } /* Tagline reads at 1rem on desktop. Inline style on the block sets 0.75rem for mobile; !important is required to beat the inline rule. */ .eva-site-tagline, .eva-site-tagline a { font-size: 1rem !important; } } /* === Logo Texture Hook (add background-image when asset provided) === */ .eva-logo-area { position: relative; } /* Logo area links: inherit text color, no underline */ .eva-logo-area a { color: inherit !important; text-decoration: none !important; } .eva-logo-area a:hover { opacity: 0.8; } /* === Leaf icon (desktop only) ============================================ Real Elizabeth Venart leaf mark from Lynne's LeafLogo.ai (Adobe Illustrator CS3 source). Vector lives at assets/img/leaf.svg with fill="currentColor" so we can recolor in CSS via mask-image instead of baking color into the file. Currently rendered in the EVA palette's Primary Accent (#D4E8DF, "light green") for a soft botanical accent that doesn't compete with the wordmark. Implemented as a ::before pseudo-element on .eva-logo-area so no markup change is required — the wordmark + tagline get nudged right via padding-left. Sized to sit within the existing desktop header padding box, so nav height does not change. Hidden on mobile (≤781px) where horizontal real estate is scarce. To swap to a different palette color, change `background-color` only. To swap to a different leaf asset, replace assets/img/leaf.svg (keep fill="currentColor" so the mask trick continues to work). ────────────────────────────────────────────────────────────────────── */ @media (min-width: 782px) { .eva-logo-area { padding-left: 60px; } .eva-logo-area::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 96px; background-color: var(--wp--preset--color--primary, #5A7C6B); -webkit-mask-image: url("assets/img/leaf.svg"); mask-image: url("assets/img/leaf.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } } /* === Nav CTA Button: Lavender Accent === */ .eva-nav-cta a { background-color: var(--wp--preset--color--accent, #8B7BA5); color: #fff !important; padding: 0.5em 1.25em; border-radius: 6px; text-decoration: none; transition: background-color 0.2s ease; } .eva-nav-cta a:hover { background-color: var(--wp--preset--color--accent-hover, #7B6B95); } /* === Header nav: hamburger below 1280px, inline at desktop ============== Saved Navigation post sets overlayMenu:"always". WP renders the responsive container at every viewport but doesn't reliably apply .hidden-by-default on this site (Ollie or another filter strips it), and the Interactivity API's open/closed state can't be trusted on first paint. We override WP's rendering directly: <1280px: hamburger only. Container hidden. Tap = fullscreen overlay. ≥1280px: inline horizontal menu. No hamburger. No overlay wrappers. Works regardless of whether overlayMenu is "always" or "mobile" in the saved nav, so no database change is required. Scoped to .eva-header so it can't leak to any in-page blocks (e.g., footer menus) the site might add later. ─────────────────────────────────────────────────────────────────────── */ @media (max-width: 1279.98px) { /* Hamburger visible. */ .eva-header .wp-block-navigation__responsive-container-open { display: flex !important; } /* Container hidden by default. Note: no :not(.is-menu-open) — the open-state rule below has higher specificity + !important and wins when the menu is actually open. Without this unconditional hide, WP/Interactivity's flaky state handling left the container half-rendered (X close button visible, items partially leaking). */ .eva-header .wp-block-navigation__responsive-container { display: none; } /* Tap-to-open: fullscreen overlay. */ .eva-header .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; flex-direction: column !important; position: fixed !important; inset: 0 !important; z-index: 100000 !important; background: var(--wp--preset--color--base) !important; padding: var(--wp--preset--spacing--40) !important; overflow: auto !important; } /* Submenus collapsed by default in the open overlay. WP's Interactivity API auto-flips every submenu's aria-expanded to true when the overlay opens, exposing the entire hierarchy. Override Ollie's `[aria-expanded="true"] ~ ... { display: flex }` rule and key off our own `.eva-submenu-open` class instead, which is managed by assets/js/eva-mobile-submenu-toggle.js. */ .eva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .eva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.eva-submenu-open > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column !important; /* Override the desktop dropdown base rules that set opacity:0/visibility:hidden/pointer-events:none for the hover-fade animation, and position:absolute for the desktop right-flyout. Without these resets, nested submenus rendered off-screen or invisible. */ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; position: static !important; top: auto !important; left: auto !important; margin-left: 0 !important; } /* Visual cue: chevron rotates 180° when its submenu is expanded. */ .eva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle svg { transition: transform 0.2s ease; } .eva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.eva-submenu-open > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); } } /* === Desktop (≥1280px): inline horizontal menu =========================== Hide the hamburger. Strip the overlay wrapper divs from layout via `display: contents` so the