starts at 0. Elementor's header wrapper must not reserve height. */ body > header.elementor-location-header { height: 0; } /* --- Header scroll state ------------------------------------------------- The home header floats transparent over the hero, then turns cream once you scroll past it. Elementor exposes no control for a scroll-dependent style, so mu-plugins/sd-behaviour.php toggles ONE class (.sd-scrolled on ) and every value below is the source's, measured. Without this the header is cream-on-white and vanishes as soon as you leave the hero. */ .sd-head--over-hero { transition: background-color .3s ease, border-color .3s ease; } body.sd-scrolled .sd-head--over-hero { background-color: rgba(245, 243, 238, .92) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(12, 12, 12, .1); } /* type flips from cream to ink with the background */ body.sd-scrolled .sd-head--over-hero .elementor-heading-title, body.sd-scrolled .sd-head--over-hero .elementor-heading-title a, body.sd-scrolled .sd-head--over-hero .elementor-nav-menu a { color: #1a1a1a; transition: color .3s ease; } body.sd-scrolled .sd-head--over-hero .elementor-nav-menu a:hover, body.sd-scrolled .sd-head--over-hero .elementor-nav-menu a.elementor-item-active, body.sd-scrolled .sd-head--over-hero .elementor-heading-title a:hover { color: #c79a3b; } body.sd-scrolled .sd-head--over-hero .elementor-menu-toggle { color: #1a1a1a; }/* End custom CSS */