/* * Page effects -- the transition wipe and the spotlight background. * * Loaded by inc/page-fx.php only on pages that have switched one of them on, so * a page with neither never sees this file. The layers are rendered at * wp_body_open, as siblings of .wp-site-blocks. * * Colour values arrive as inline custom properties written by the editor's * colour pickers; the var() fallbacks below are theme.json tokens and are the * only colours this file names. */ /* ----------------------------------------------------------------------- * Blurred spotlights. * * The layer has to land between the page's own background colour and the * blocks. Rather than lean on z-index:-1 and background propagation from * -- which is quietly dependent on how WordPress happens to emit the * global background this release -- the layer is an ordinary z-index:0 fixed * element and .wp-site-blocks is lifted to 1 above it. Deterministic in both * directions. * * isolation:isolate is what makes mix-blend-mode:screen blend each glow * against the base colour rather than against whatever is behind the document. * The reference control panel's live preview blends and its CSS export forgot * to; the preview is the look they signed off, so the blend stays. * ----------------------------------------------------------------------- */ .afters-spotlights { position: fixed; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background-color: var(--afters-spotlights-base, transparent); pointer-events: none; } /* The lift below places this element above the spotlight sheet, which means an opaque background on it -- or on the content wrapper inside it -- covers the spotlights outright. The Afters site's global styles do exactly that: section "1. DARK CANVAS" sets body,.wp-site-blocks,.entry-content{background:var(--aft-black)!important} so every spot rendered into the DOM and not one of them was ever visible. The spots are in the markup and the body class is set, so a markup-level smoke test still passes -- which is how it survived review. The page colour belongs to and to the layer's own base; the wrappers in front of it must not carry one. Sections that paint themselves still cover the layer, which is the restyle's own choice and left alone. !important is here only because the declaration it answers uses it. */ .afters-has-spotlights .wp-site-blocks, .afters-has-spotlights .entry-content { background-color: transparent !important; } .afters-has-spotlights .wp-site-blocks { position: relative; z-index: 1; } .afters-spotlights__spot { position: absolute; left: var(--afters-spotlight-x, 50%); top: var(--afters-spotlight-y, 50%); width: var(--afters-spotlight-size, 450px); height: var(--afters-spotlight-size, 450px); border-radius: 50%; background-color: var(--afters-spotlight-color, transparent); opacity: 0.75; filter: blur(var(--afters-spotlight-blur, 100px)); transform: translate(-50%, -50%); mix-blend-mode: screen; pointer-events: none; } /* ----------------------------------------------------------------------- * Transition wipe. * * The INCOMING reveal lives here rather than in the script. This stylesheet is * render-blocking and the script is deferred, so a JS-driven reveal would show * the page, cover it, and then uncover it. As a CSS animation it starts at the * first paint, and it finishes on its own with JavaScript off -- which an * overlay that begins by covering the document has to. * * The OUTGOING wipe is the Web Animations API in assets/js/page-transition.js. * Script animations sit above CSS animations in the cascade, so it overrides * the finished state below without either fighting the other. * ----------------------------------------------------------------------- */ .afters-page-wipe { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background-color: var(--afters-page-wipe-color, var(--wp--preset--color--ink)); transform: scaleY(0); transform-origin: bottom; pointer-events: none; animation: afters-page-wipe-reveal 650ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes afters-page-wipe-reveal { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } } /* The mark holds the animated logo image rather than text. */ .afters-page-wipe__logo { display: block; width: min(70vw, 56rem); height: auto; } .afters-page-wipe__mark { color: var(--afters-page-wipe-mark, var(--wp--preset--color--lime)); font-family: var(--wp--preset--font-family--sans); font-size: calc(var(--wp--preset--font-size--display) * 1.75); font-weight: 800; letter-spacing: var(--wp--custom--tracking--tight); line-height: 1; text-align: center; text-transform: uppercase; opacity: 0; } /* The wipe is pure decoration between two documents; under reduced motion the script navigates immediately and the overlay should not exist at all. */ @media (prefers-reduced-motion: reduce) { .afters-page-wipe { display: none; } }