, from main.css's `main{margin-top:100px}`) has main.css's unconditional `.dark\:bg-black{transition:all 2s}` — but [data-main] itself, which covers the rest of the page and flips to the same color in light-mode.css, had no transition at all and snapped instantly. That mismatch read as "a small section on top fading slower than the rest." Matching duration here keeps the whole page fading in sync. */ transition: background-color 2s; } .underlay-nav__header { z-index: 100; color: #fff; /* REQUIRED CHANGE (requested): was an opaque background-color: var(--primary-color) — now transparent, relying on the Progressive Blur layer below (behind .underlay-nav__bar, in front of the page) to keep the logo/links legible over whatever scrolls underneath instead of a solid backing color. */ position: fixed; inset: 0% 0% auto; /* FIX: initial hidden state used to be set by underlay-nav.js's initHeaderReveal() via gsap.set() only — that runs on DOMContentLoaded, which is AFTER the browser's first paint, so on every refresh the header flashed visible at its normal position for a frame, then JS snapped it to y:-100%/opacity:0, then GSAP tweened it back in. Setting the hidden state here means it's hidden from the very first paint, before any JS runs at all; initHeaderReveal()'s gsap.set() call is now redundant with this (harmless — same values) and left as-is so the GSAP tween still has an explicit starting point. will-change hints the browser to promote this ahead of the fly-in tween rather than decide mid-animation (same reasoning as .crisp-header's own will-change in preloader.css). */ opacity: 0; transform: translateY(-100%); will-change: transform; } /* Progressive Blur (stellae) — ported as-is (5 layers/masks unchanged) except adapted from its default bottom-anchored/viewport-fixed usage to sit nested behind this top-anchored nav header instead: absolutely positioned within .underlay-nav__header (itself already fixed) rather than independently fixed, anchored to the header's own top edge, and flipped vertically (scaleY(-1)) so the masks' un-blurred "anchor" edge (originally bottom) lines up with the header's top — the blur is strongest right behind the logo/links and fades out toward the page below, over a taller area than the header's own visible height by design (the resource's intended smooth transition zone). */ .underlay-nav__header .progressive-blur { position: absolute; top: 0; bottom: auto; left: 0; /* REQUIRED OVERRIDE: the resource's own z-index:40 (meant for a standalone fixed element in a page's general stacking) sits above .underlay-nav__bar's z-index:1 within this header's own stacking context, which made the blur paint OVER the logo/links (blurring the nav's own foreground content) instead of just the page behind it. */ z-index: 0; transform: scaleY(-1) translateZ(0); transition: opacity .3s ease; } /* REQUESTED CHANGE: hide the blur while the menu is open — underlay-nav.js sets data-menu-status="open" on (toggleNav()'s isOpen branch). */ [data-menu-status="open"] .underlay-nav__header .progressive-blur { opacity: 0; } .underlay-nav__bar { position: relative; z-index: 1; width: 100%; margin-left: auto; margin-right: auto; } .underlay-nav__container { justify-content: space-between; align-items: center; padding-left: 1.5em; padding-right: 1.5em; padding-top:0.5em; padding-bottom:0.5em; display: flex; } .underlay-nav__logo { justify-content: center; align-items: center; width: 16.875em; display: flex; /* REQUIRED SWAP: mix-blend-mode: multiply removed. Our logo SVG has explicit white (#fff) fill regions; multiplying white against this dark header background renders those regions near-black (white * dark ≈ dark), making part of the wordmark disappear. */ } .underlay-nav__logo-svg { width: 100%; } .underlay-nav__toggle { grid-column-gap: .75em; grid-row-gap: .75em; outline-offset: 0px; background-color: #0000; border: 1px #000; outline: 3px #555; justify-content: center; align-items: center; /* FIX: nav.md's margin:-1em/padding:1em hit-area trick assumed this button was the sole rightmost child of a space-between container. Nested inside .underlay-nav__actions next to the icon-toggle button with a small gap, the negative margin pulled it left far enough to overlap/hide behind its sibling, making it unclickable. Plain padding is enough here. */ padding: .75em; display: flex; } .underlay-nav__toggle-text { flex-flow: column; flex: none; justify-content: flex-start; align-items: flex-end; height: 1.5em; display: flex; overflow: hidden; } .underlay-nav__toggle-label { font-size: 1.25em; } .underlay-nav__toggle-icon { grid-column-gap: .375em; grid-row-gap: .375em; flex-flow: column; flex: none; justify-content: center; align-items: center; width: 1.5em; margin-bottom: -.3em; display: flex; } .underlay-nav__toggle-bar { background-color: currentColor; flex: none; width: 100%; height: .125em; padding: 0; } .underlay-nav__menu { z-index: 1; width: var(--menu-width); /* BUG FIX: this rule never had its own `color`. .underlay-nav__menu is a SIBLING of .underlay-nav__header (not a descendant), so header's color:#fff never reached the nav links here — they were inheriting the browser's default black from the whole time, regardless of mode. */ color: #fff; background-color: var(--primary-color); /* REQUIRED SWAP: same reason as .underlay-nav__header — menu panel needs a dark bg on a white-background site */ position: fixed; top: 0; bottom: 0; right: 0; } .underlay-nav__overlay { z-index: 100; pointer-events: none; cursor: pointer; visibility: hidden; position: fixed; inset: 0% -1px 0% 0%; overflow: clip; } .underlay-nav__inner { grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: column; justify-content: space-between; align-items: stretch; width: 100%; height: 100%; /* Top padding also scaled with viewport height (see .underlay-nav__link-label) so it doesn't eat into the same shrinking vertical budget on short windows. */ padding: clamp(3em, 9.5vh, 7.5em) 2em 2em; display: flex; overflow: hidden; /* was overflow: auto in nav.md — changed per explicit request */ } .underlay-nav__list { flex-flow: column; width: 100%; margin-bottom: 0; padding: 0; list-style: none; display: flex; } .underlay-nav__list.is--small { grid-column-gap: .75em; grid-row-gap: .75em; } .underlay-nav__link-large { /* FIX: this had no display set, so it defaulted to inline — its vertical padding never expanded the actual clickable/hoverable hit-area to match the painted highlight box (and width:100% had no effect either), so the real hit-area sat offset from the visible text, overlapping neighboring links and causing misclicks. display:block makes the box and the hit-area the same rect. */ display: block; border-radius: .25em; width: 100%; padding: .5em 1em; } .underlay-nav__link-large.w--current, .underlay-nav__link-large.active { /* REQUIRED SWAP: added ".active" — WordPress's nav-menu helper (TopNavigation::getMainNavigationOverlay) appends the literal class "active" to the current item; it never outputs Webflow's "w--current". */ color: #ededed; background-color: #f85931; } .underlay-nav__link-label { letter-spacing: -.04em; /* REQUESTED CHANGE: was Spectral (serif) — this theme has no "Lato" font loaded (checked header.php/functions.php/dist/styles), only Spectral and Karla (see header.php) — using Karla here, the same substitution just made for .crisp-header__copy. */ font-family: 'Karla', sans-serif; /* FIX: was a flat 3.25em — on shorter browser windows the 7-item list (plus .underlay-nav__bottom below it) overflowed .underlay-nav__inner's height, and since that container is overflow:hidden (not auto, see its own comment), the last items were silently clipped off-screen instead of scrolling into view. Sizing off viewport height instead of a fixed em keeps every item on screen at any window height; clamp() still caps it at the original 3.25em on tall windows. */ font-size: clamp(1.75em, 4.25vh, 3.25em); line-height: .9; } .underlay-nav__bottom { justify-content: flex-start; align-items: flex-start; width: 100%; padding-top: 1.5em; display: flex; position: relative; } .underlay-nav__bottom-col { grid-column-gap: 1em; grid-row-gap: 1em; flex-flow: column; flex: 1; justify-content: flex-start; align-items: flex-start; display: flex; } .underlay-nav__link-small { font-size: 1em; line-height: 1.1; } .underlay-nav__link-small.is--faded { opacity: .5; } .underlay-nav__corner { /* FIX: nav.md hardcodes #fff here, meant to blend against a light host page. Our menu/overlay backdrop is dark (var(--primary-color)), so white showed up as a stark, out-of-place blob instead of blending in. */ transform-origin: 100% 0; color: var(--primary-color); background-image: radial-gradient(circle farthest-side at 0 100%, transparent 99%, var(--primary-color)); width: 2em; height: 2em; } .underlay-nav__corner.is--bottom { transform-origin: 100% 100%; background-image: radial-gradient(circle farthest-side at 0 0, transparent 99%, var(--primary-color)); } .underlay-nav__dark { opacity: 0; background-color: #0000004d; position: absolute; inset: 0%; } .underlay-nav__bottom-border { opacity: .15; transform-origin: 0%; background-color: currentColor; width: 100%; height: 1px; position: absolute; inset: 0% 0% auto; } .underlay-nav__borders { flex-flow: column; justify-content: space-between; align-items: stretch; display: flex; position: absolute; inset: 0; } .underlay-nav__border { /* FIX: same #fff-on-light-host issue as .underlay-nav__corner above. */ background-color: var(--primary-color); width: 100%; height: 1em; } .underlay-nav__border-row { flex-flow: column; justify-content: flex-start; align-items: flex-end; display: flex; } @media screen and (max-width: 767px) { :root { --menu-width: 80vw; } .section-resource__h1 { font-size: 3em; } .underlay-nav__container { padding: 1.25em; } /* REQUESTED CHANGE: was 5em (~80px) — hard to read next to the "Menu" label at that size. */ .underlay-nav__logo { width: 8.5em; } .underlay-nav__toggle-text { height: 1.25em; } .underlay-nav__toggle-label { font-size: 1em; } .underlay-nav__inner { padding: 5em 1.25em 1.25em; } .underlay-nav__link-label { font-size: 2em; } .underlay-nav__bottom { grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: column; padding-left: 1em; padding-right: 1em; } } /* ------------------------------------------------------------------------ Header icon toggle button. Icon-only (sun/moon swap on click), placed directly beside the Menu/Close toggle via .underlay-nav__actions. Remembered via cookie; drives the site's real light/dark mode (see light-mode.css and dist/scripts/theme-toggle.js) — clicking it also sets [data-color-mode] on , this button's own [data-theme-status] is just its internal icon-swap state, kept in sync with that. ------------------------------------------------------------------------ */ .underlay-nav__actions { display: flex; align-items: center; gap: .5em; } .btn-darklight { color: #131313; cursor: pointer; background-color: #efeeec; border: 0 solid transparent; border-radius: .25em; outline: 0 transparent; justify-content: center; align-items: center; width: 2.5em; height: 2.5em; padding: 0; display: flex; position: relative; overflow: hidden; } .btn-darklight__icon { width: 1.25em; height: 1.25em; position: relative; /* FIX: without its own clip, translateY(-100%) on an icon-box only escapes the outer .btn-darklight button's bounds — since this wrapper is smaller than the (centered, padded) button, half the "hidden" icon stayed visible inside the button instead of being clipped. Clipping here, exactly at the wrapper's own edge, is correct regardless of the button's padding/centering. */ overflow: hidden; } .btn-darklight__icon-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .btn-darklight__icon-box.is--absolute { position: absolute; inset: 0; } /* Icon swap: sun and moon are stacked in the exact same spot (.is--absolute uses inset:0), so they MUST start from opposite rest positions or an identical shared transform just moves them together instead of swapping which one is visible — the sun box (normal flow) rests at translateY(0) [visible] and slides to -100% [hidden above] on toggle; the moon box (.is--absolute) rests at +100% [hidden below] and slides to 0 [visible] on toggle. That's an explicit, opposing 4-rule swap, not one shared rule. */ .btn-darklight .btn-darklight__icon-box { transition: transform 0.8s cubic-bezier(0.35, 1.5, 0.6, 1); transform: translateY(0%); } .btn-darklight .btn-darklight__icon-box.is--absolute { transform: translateY(100%); } .btn-darklight[data-theme-status="dark"] .btn-darklight__icon-box { transform: translateY(-100%); } .btn-darklight[data-theme-status="dark"] .btn-darklight__icon-box.is--absolute { transform: translateY(0%); }