/* ========================================================================== MWI — header: one appearance, scrolled or not -------------------------------------------------------------------------- Client 2026-08-17: the bar that appears under the logo and the nav once the header sticks should be there at the top of the page too, and the header should read the same in both states. Until now the header had two faces. Un-scrolled it was fully transparent over the hero (sections 46 and 52) with white text and a whited-out logo; scrolled, `.mwi-solid` gave it the ivory band, the gold hairline on ::after, an espresso logo at a smaller size, and espresso text. This file gives the un-scrolled state the scrolled one's clothes, so `.mwi-solid` stops changing anything visible. HOW IT WINS, and why the selector looks odd Earlier layers style the top state through `#mwi-header:not(.mwi-solid)`, which is (1,1,0) and carries !important. A plain `#mwi-header` is only (1,0,0) and would lose even with !important, so the id is DOUBLED to give (2,0,0). Same trick, same reason, as the doubled classes elsewhere in this codebase. THE ONE THING NOT COPIED: backdrop-filter below 1025px. backdrop-filter turns #mwi-header into a containing block for fixed descendants, and XPro's off-canvas menu panel is a fixed descendant. Chrome tolerates it; iOS Safari is where this broke before. Desktop has no drawer in play, so it keeps the real blur; mobile gets a more opaque flat gradient instead, which buys the same legibility with none of the risk. This mirrors the note already in section 54. Height unifies by itself: the header has no padding, so its 122px/99px difference was only the logo, and pinning the logo pins the height. ========================================================================== */ /* --- text, both states, every width ------------------------------------ */ /* Charcoal, client 2026-08-17: not gold, not brown. #242322 is neutral (R36 G35 B34) rather than the warm espresso #241A12 the rest of the site uses for ink — a deliberate, scoped exception to the warm-neutrals rule, asked for by name and limited to the header bar. */ #mwi-header#mwi-header .elementor-heading-title, #mwi-header#mwi-header a, #mwi-header#mwi-header .xpro-horizontal-menu a, #mwi-header#mwi-header .elementor-icon { color: #242322 !important; text-shadow: none !important; } /* The gold light dance that briefly lived on ::before was removed on the client's instruction 2026-08-17. ::before is parked again below 1025px, exactly as it was before: section 56's candlelight pool only existed to give the TRANSPARENT header a readable ground, and the header always carries a band now, so letting the pool return would only muddy it. */ #mwi-header#mwi-header::before { opacity: 0 !important; animation: none !important; } /* --- the one animation on this site that still ran layout --------------- */ /* `.mwi-nav-wrap::after` swept a white highlight across the nav capsule by animating `left` from -60% to 130% — 8s, infinite, on every page. Animating `left` runs layout on every frame forever, and it was the only remaining layout-driven animation sitewide; the client reported the site feeling as though "something is always running", which is exactly what this is. Converted to transform with identical travel. The maths matters: `left` percentages resolve against the CONTAINING BLOCK (.mwi-nav-wrap), while translateX percentages resolve against the ELEMENT'S OWN width. The sweep travels 190% of the wrap and is 30% of the wrap wide, so 190/30 = 633.333% of itself. `left:-60%` stays as the static start offset. translate is written BEFORE rotate so the highlight still travels along the page's X axis rather than along its own rotated axis. */ #mwi-header#mwi-header .mwi-nav-wrap::after { animation-name: mwiNavShimmerX !important; will-change: transform; } @keyframes mwiNavShimmerX { 0% { transform: translate3d(0, 0, 0) rotate(12deg); } 30% { transform: translate3d(633.333%, 0, 0) rotate(12deg); } 100% { transform: translate3d(633.333%, 0, 0) rotate(12deg); } } /* The off-canvas drawer is a descendant of the header, so the rule above would repaint it too. It is pinned back to the gold it already uses in the scrolled state — which also fixes a real pre-existing bug: at the top of the page the drawer inherited `color:#fff` from the transparent-state rule and its links were white on its own ivory ground, i.e. invisible. */ #mwi-header#mwi-header .xpro-elementor-horizontal-navbar-wrapper a { color: #242322 !important; text-shadow: none !important; } /* The account ring loses the pale border it wore over the photo. */ #mwi-header#mwi-header .mwi-account-icon { border-color: rgba(36, 26, 18, 0.12) !important; } /* --- desktop ------------------------------------------------------------ */ @media (min-width: 1025px) { /* Section 60's band, verbatim, now unconditional. */ #mwi-header#mwi-header { background: radial-gradient(120% 190% at 50% 122%, rgba(220, 196, 143, .24) 0%, rgba(220, 196, 143, 0) 64%), radial-gradient(70% 150% at 16% -20%, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(251, 248, 243, .93) 0%, rgba(249, 245, 237, .89) 56%, rgba(246, 241, 231, .84) 100%) !important; backdrop-filter: blur(24px) saturate(1.5) !important; -webkit-backdrop-filter: blur(24px) saturate(1.5) !important; border-bottom: 1px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 16px 40px -30px rgba(36, 26, 18, .45) !important; } /* The gold rule the client asked for, on at the top of the page too. */ #mwi-header#mwi-header::after { opacity: 1 !important; box-shadow: 0 0 12px 1px rgba(185, 146, 78, .26), 0 7px 20px -10px rgba(185, 146, 78, .20) !important; } /* Section 61's sizing, including the max-width release that stops the artwork being squashed. filter:none undoes the white-out of section 45. */ #mwi-header#mwi-header .mwi-logo-mark img { height: 54px !important; width: auto !important; max-width: none !important; object-fit: contain !important; filter: none !important; } #mwi-header#mwi-header .mwi-logo-mark, #mwi-header#mwi-header .mwi-logo-wrap { width: auto !important; max-width: none !important; overflow: visible !important; } /* The capsule sits on a band now, so its own glass stays a whisper. */ #mwi-header#mwi-header .mwi-nav-wrap { background: rgba(255, 255, 255, .26) !important; border-color: rgba(185, 146, 78, .24) !important; box-shadow: 0 6px 20px -16px rgba(36, 26, 18, .30) !important; animation: none !important; } } /* --- mobile and tablet -------------------------------------------------- */ @media (max-width: 1024px) { /* Same band, flat. No backdrop-filter here — see the note at the top of this file. The ivory is carried heavier (.90-.96 rather than .84-.93) because there is no blur underneath doing half the work. */ #mwi-header#mwi-header { background: radial-gradient(120% 190% at 50% 122%, rgba(220, 196, 143, .20) 0%, rgba(220, 196, 143, 0) 64%), linear-gradient(180deg, rgba(251, 248, 243, .96) 0%, rgba(248, 243, 235, .93) 60%, rgba(246, 241, 231, .90) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60), 0 14px 34px -26px rgba(36, 26, 18, .35) !important; } #mwi-header#mwi-header::after { opacity: 1 !important; } /* ::before is the gold light layer on mobile too — defined once above, nothing to override here. Section 56's candlelight pool is fully superseded by it. */ #mwi-header#mwi-header .mwi-logo-mark img { height: 40px !important; width: auto !important; max-width: none !important; object-fit: contain !important; filter: none !important; } }