/* ───────────────────────────────────────────────────────────────────────── * clever-prep-page-transition.css * Framer-style "fade + blur settle" page transition for a multi-page WP site. * * Mechanism: a single fixed full-viewport veil (#cp-pt) is injected into * by an early head script BEFORE the body paints. On load it fades * (and un-blurs) away → entrance. On internal link click it fades (and * blurs) back in, then the browser navigates → exit. The page renders * behind the opaque veil so there is no flash of unstyled / mid-load * content either direction. * * Why a veil and not body transforms: filter/transform on creates a * containing block that breaks position:fixed (our sticky header, megamenu * dropdowns, GSAP ScrollTrigger pin). A fixed veil with backdrop-filter * touches none of that. * ───────────────────────────────────────────────────────────────────────── */ #cp-pt { position: fixed; inset: 0; z-index: 2147483646; /* above everything, below nothing we own */ background: var(--cp-pt-bg, #F7F4ED); opacity: 1; /* opaque by default — covers initial paint */ pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); will-change: opacity, backdrop-filter; } /* Entrance: veil fades + un-blurs away to reveal the loaded page. */ html.cp-pt-ready #cp-pt { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity 0.5s ease, -webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease; } /* Exit: veil fades + blurs back in over the current page before navigation. */ html.cp-pt-out #cp-pt { opacity: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.34s ease, -webkit-backdrop-filter 0.34s ease, backdrop-filter 0.34s ease; } /* No-JS / accessibility: the veil only exists when the script runs and adds html.cp-pt. Users who prefer reduced motion get no veil at all (the JS bails before injecting it), so nothing here needs a reduced-motion block — but guard anyway in case the class is present. */ @media (prefers-reduced-motion: reduce) { #cp-pt { display: none !important; } }