/** * Scroll-linked logo morph. * * Three states, driven from assets/js/logo-morph.js by classes on : * * .dalua-morph-pending written inline in , before first paint, so the * header logo is never shown and then taken away. * .dalua-morph-on the script is running and owns both marks. * .dalua-morph-landed the copy has arrived; the real header logo is back. * * With none of them present the page is exactly what it was before this file * existed — which is the state reduced-motion visitors, the Visual Builder and * any failure inside the script all fall back to. * * Everything here is front-page-only without needing a body class: functions.php * enqueues this stylesheet on is_front_page() and nowhere else. */ /* ========================================================================== 1. Small screens: give the wordmark somewhere to land ========================================================================== */ /* Divi drops #main-header to `position: absolute` at 980px and below, so the header logo scrolls away with the page and the morph has no destination — which is why it used to stand down on every phone and portrait tablet. This pins the header again so the effect can run there too. Scoped to the morph's own classes rather than applied outright: a sticky bar is the price of the effect, so it is only paid while the effect is actually running. If the script bails, or the visitor asked for reduced motion, the class never lands and the header goes back to scrolling away as Divi intended. It costs no layout shift in either direction. Divi already writes an inline padding-top on #page-container to clear the header — 90px at 412px wide, measured — and that reservation is identical whether the header is absolute or fixed. The only thing that changes is whether it scrolls away. The extra .et_fixed_nav is there to outrank Divi's own breakpoint rule, not for its meaning; the class is on whenever Divi's fixed nav is enabled, which is the only case in which its rule exists to be outranked. */ @media (max-width: 980px) { html.dalua-morph-pending body:not(.et-fb).et_fixed_nav #main-header, html.dalua-morph-on body:not(.et-fb).et_fixed_nav #main-header { position: fixed; } } /* ========================================================================== 2. The two real wordmarks ========================================================================== */ /* The header logo is the landing site, so it has to keep its box from the first paint: the script measures it every frame. opacity is the only way to hide it that leaves that box alone — display: none has no rectangle, and visibility: hidden would take it out of the accessibility tree along with the link around it. No opacity transition is declared, here or in chrome.css, so the handoff is a single frame rather than a fade. No breakpoint on this any more. It was previously held back above 981px, because below that the morph stood down and pre-hiding would have taken the logo off a phone and popped it back. Now that section 1 pins the header at every width the front page is served at, the morph runs everywhere and the logo should be hidden from first paint everywhere. Reduced motion and script failure are still covered: neither ever sets these classes. */ html.dalua-morph-pending body:not(.et-fb) #logo, html.dalua-morph-on:not(.dalua-morph-landed) body:not(.et-fb) #logo { opacity: 0; } /* An invisible link is still a link. Until the wordmark actually arrives there should be nothing to click in the corner it will arrive at. */ html.dalua-morph-on:not(.dalua-morph-landed) body:not(.et-fb) .logo_container a { pointer-events: none; } /* The hero mark keeps its box and hands over only its pixels — nothing in the hero moves, so there is no layout shift at either end of the scroll. */ html.dalua-morph-on .dalua-hero__mark { opacity: 0; } /* ========================================================================== 3. The travelling copy ========================================================================== Fixed to the viewport and parked on , out of reach of the hero's overflow clip, its isolation: isolate, and Divi's `z-index: 9` row. 100000 puts it one step above #main-header, so it crosses over the bar rather than sliding underneath the backdrop blur. Physical `top`/`left` rather than the logical properties used elsewhere in this theme: the transform is computed from getBoundingClientRect(), whose left is physical, and the two have to agree. */ .dalua-morph__ghost { position: fixed; top: 0; left: 0; z-index: 100000; display: block; /* Width and height are written from the measured hero mark; scale is expressed against that box. */ max-inline-size: none; transform-origin: 0 0; will-change: transform; pointer-events: none; /* Deliberately unanimated. The position is the scroll position — easing it here would leave the copy lagging behind the wheel and land it late. */ transition: none; } /* Nothing to fly to on paper, and the fixed copy would print over the header. */ @media print { .dalua-morph__ghost { display: none; } html.dalua-morph-on body #logo, html.dalua-morph-on body .dalua-hero__mark { opacity: 1; } }