/** * IGR — dual header scroll swap * Layout Section: "Main header 2" (post 240), used by the Home-2 layout. * * .fusion-builder-row-1 = container "1st header" -> fades OUT past IGR_HIDE_FIRST * #sticky-header = container "2nd header" -> fades IN past IGR_SHOW_SECOND * * Both containers are pinned to the top of the viewport, so the two fades overlap in * place — a true crossfade: no sliding, no movement, no height change. Classes are * toggled on by assets/igr-header-scroll.js; the script does nothing on pages * without #sticky-header, so the Global Layout header ("Main header") is untouched. */ /* Shared crossfade timing. Change --igr-fade to retune the speed. */ html.igr-dual-header { --igr-fade: .55s; --igr-ease: ease-in-out; } /** * Avada's own sticky script slides a stuck container up out of view with * transform: translateY(-…) as soon as you scroll down (.fusion-scrolling-down). * That slide is what made the swap look like a jump — cancel it so the containers * hold their position and only opacity changes. */ html.igr-dual-header .fusion-tb-header > .fusion-builder-row-1, html.igr-dual-header #sticky-header { transform: none !important; opacity: 1; visibility: visible; will-change: opacity; transition: opacity var(--igr-fade) var(--igr-ease), visibility 0s; } /* --- 1st header: on screen at the top of the page, fades out on scroll --- */ html.igr-dual-header.igr-h1-hidden .fusion-tb-header > .fusion-builder-row-1 { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--igr-fade) var(--igr-ease), visibility 0s linear var(--igr-fade); } /* --- 2nd header: pinned to the top of the viewport, hidden until scrolled --- */ html.igr-dual-header #sticky-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 10011; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--igr-fade) var(--igr-ease), visibility 0s linear var(--igr-fade); } html.igr-dual-header.igr-h2-visible #sticky-header { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--igr-fade) var(--igr-ease), visibility 0s; } /* --- keep clear of the WP admin bar for logged-in users --- */ html.igr-dual-header.igr-admin-bar #sticky-header { top: 32px; } @media screen and (max-width: 782px) { html.igr-dual-header.igr-admin-bar #sticky-header { top: 46px; } } @media (prefers-reduced-motion: reduce) { html.igr-dual-header .fusion-tb-header > .fusion-builder-row-1, html.igr-dual-header #sticky-header { transition: none; } }