/* No stated height: a slide stretches to the track and grows past it when its own content is taller, which is what keeps a tall slide from clipping. The sidebar's Height is a floor on the slider, and it reaches this element through the flex chain rather than through a percentage — see blocks/slider/style.css for the full reasoning. */ .pw-slide { /* Timings read the theme's motion tokens, with the block's own values as the fallback so the block still behaves standalone. */ --pw-slide-easing: var( --wp--custom--motion--easing--default, ease ); --pw-slide-enter-duration: var( --wp--custom--motion--duration--entrance, 0.45s ); --pw-slide-enter-delay: var( --wp--custom--motion--stagger--one, 0.2s ); --pw-slide-cascade-step: var( --wp--custom--motion--stagger--step, 300ms ); --pw-slide-cascade-shift: 30px; position: relative; flex: 0 0 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; } /* The height chain, part 3 of 3 — and the reason .pw-slide-bg was the visible symptom of all of it. `min-height: 100%` used to sit on .pw-slide above. Against a track whose own height was `auto` it resolved to auto, so a slide was only ever as tall as its copy and the sidebar's Height moved the slider around it. .pw-slide-bg is `position: absolute; inset: 0`, which means it has always tracked its container exactly — the container was simply the wrong size. Nothing here needs a stated height now. A slide is a stretched item of the track in both effects: a flex item across the row for the default slide effect, a grid item sharing one cell for fade. Both stretch on the cross axis by default, so the slide fills the track, the track fills the viewport, the viewport fills the slider — and inset:0 does the rest. */ /* Background fills the slide */ .pw-slide-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center center; } /* ── Background patterns ─────────────────────────────────────────────────── */ .pw-slide-pattern { position: absolute; inset: 0; z-index: 1; } .pw-slide-pattern--dots { background-image: radial-gradient( circle, var( --pw-pattern-color, #fff ) 1px, transparent 1px ); background-size: var( --pw-pattern-scale, 20px ) var( --pw-pattern-scale, 20px ); } .pw-slide-pattern--lines { background-image: repeating-linear-gradient( 0deg, var( --pw-pattern-color, #fff ) 0, var( --pw-pattern-color, #fff ) 1px, transparent 1px, transparent var( --pw-pattern-scale, 20px ) ); } .pw-slide-pattern--grid { background-image: linear-gradient( var( --pw-pattern-color, #fff ) 1px, transparent 1px ), linear-gradient( 90deg, var( --pw-pattern-color, #fff ) 1px, transparent 1px ); background-size: var( --pw-pattern-scale, 20px ) var( --pw-pattern-scale, 20px ); } .pw-slide-pattern--diagonal { background-image: repeating-linear-gradient( 45deg, var( --pw-pattern-color, #fff ), var( --pw-pattern-color, #fff ) 1px, transparent 1px, transparent var( --pw-pattern-scale, 20px ) ); } .pw-slide-pattern--crosshatch { background-image: repeating-linear-gradient( 45deg, var( --pw-pattern-color, #fff ), var( --pw-pattern-color, #fff ) 1px, transparent 1px, transparent var( --pw-pattern-scale, 20px ) ), repeating-linear-gradient( -45deg, var( --pw-pattern-color, #fff ), var( --pw-pattern-color, #fff ) 1px, transparent 1px, transparent var( --pw-pattern-scale, 20px ) ); } /* Colour/gradient overlay on top of bg + pattern */ .pw-slide-overlay { position: absolute; inset: 0; z-index: 2; } /* Content sits above all background layers */ .pw-slide-content { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; /* Same substitution as the layers above: grow to fill the slide, never shrink below the copy. The slide is a flex column, so this is the percentage-free form of the min-height:100% that used to be here. */ flex: 1 0 auto; padding: var( --wp--preset--spacing--50, 2.5rem ); box-sizing: border-box; opacity: 0; transform: translateY( 14px ); transition: opacity var( --pw-slide-enter-duration, 0.45s ) var( --pw-slide-easing, ease ) var( --pw-slide-enter-delay, 0.2s ), transform var( --pw-slide-enter-duration, 0.45s ) var( --pw-slide-easing, ease ) var( --pw-slide-enter-delay, 0.2s ); } /* Entrance animation direction variants (applied before .is-active) */ .pw-slide-enter--down { transform: translateY( -14px ); } .pw-slide-enter--left { transform: translateX( 14px ); } .pw-slide-enter--right { transform: translateX( -14px ); } .pw-slide-enter--zoom { transform: scale( 0.95 ); } .pw-slide-enter--fade { transform: none; } /* Content becomes visible when slide is active */ .pw-slide.is-active .pw-slide-content { opacity: 1; transform: none; } /* ── Content position variants ─────────────────────────────────────────── */ .pw-slide-content--top-left { justify-content: flex-start; align-items: flex-start; text-align: left; } .pw-slide-content--top-center { justify-content: flex-start; align-items: center; text-align: center; } .pw-slide-content--top-right { justify-content: flex-start; align-items: flex-end; text-align: right; } .pw-slide-content--middle-left { justify-content: center; align-items: flex-start; text-align: left; } .pw-slide-content--center { justify-content: center; align-items: center; text-align: center; } .pw-slide-content--middle-right { justify-content: center; align-items: flex-end; text-align: right; } .pw-slide-content--bottom-left { justify-content: flex-end; align-items: flex-start; text-align: left; } .pw-slide-content--bottom-center{ justify-content: flex-end; align-items: center; text-align: center; } .pw-slide-content--bottom-right { justify-content: flex-end; align-items: flex-end; text-align: right; } /* ── Content width variants ─────────────────────────────────────────────── */ .pw-slide-content > * { max-width: 740px; } /* normal (default) */ .pw-slide-content--narrow > * { max-width: 560px; } .pw-slide-content--wide > * { max-width: 1100px; } .pw-slide-content--full > * { max-width: none; } /* ── Slide link cursor ──────────────────────────────────────────────────── */ .pw-slide[ data-slide-link ] { cursor: pointer; } @media ( prefers-reduced-motion: reduce ) { .pw-slide-content { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Cinematic background motion -------------------------------------------------------------------------- Applied to .pw-slide-bg only. The content layer is deliberately untouched: transforming text forces the browser to re-rasterise it every frame, which is what makes "cinematic" sliders look soft and jittery on mid-range phones. The layer is scaled up slightly at rest so a pan or zoom never exposes an edge, and every animation is a single compositor-friendly transform — no layout, no repaint. ========================================================================== */ .pw-slide-bg[class*="pw-slide-bg--motion-"] { will-change: transform; transform-origin: center center; transform: scale(1.06); animation-duration: var(--pw-slide-motion-duration, 18s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; } .pw-slide-bg--motion-zoom-in { animation-name: pw-slide-zoom-in; } .pw-slide-bg--motion-zoom-out { animation-name: pw-slide-zoom-out; } .pw-slide-bg--motion-pan-left { animation-name: pw-slide-pan-left; } .pw-slide-bg--motion-pan-right { animation-name: pw-slide-pan-right; } .pw-slide-bg--motion-pan-up { animation-name: pw-slide-pan-up; } .pw-slide-bg--motion-float { animation-name: pw-slide-float; } @keyframes pw-slide-zoom-in { from { transform: scale(1.04); } to { transform: scale(1.18); } } @keyframes pw-slide-zoom-out { from { transform: scale(1.18); } to { transform: scale(1.04); } } @keyframes pw-slide-pan-left { from { transform: scale(1.12) translate3d(2.5%, 0, 0); } to { transform: scale(1.12) translate3d(-2.5%, 0, 0); } } @keyframes pw-slide-pan-right { from { transform: scale(1.12) translate3d(-2.5%, 0, 0); } to { transform: scale(1.12) translate3d(2.5%, 0, 0); } } @keyframes pw-slide-pan-up { from { transform: scale(1.12) translate3d(0, 2.5%, 0); } to { transform: scale(1.12) translate3d(0, -2.5%, 0); } } @keyframes pw-slide-float { from { transform: scale(1.08) translate3d(-1.2%, 0.8%, 0); } to { transform: scale(1.12) translate3d(1.2%, -0.8%, 0); } } /* Motion is decoration. Anyone who has asked their system for less of it gets the same composition, held still. */ @media ( prefers-reduced-motion: reduce ) { .pw-slide-bg[class*="pw-slide-bg--motion-"] { animation: none !important; transform: scale(1.02); } } /* ========================================================================== Background masks -------------------------------------------------------------------------- mask-image, never clip-path: a mask affects painting only, so a focus ring on anything inside the slide can never be cut off. Masks sit on the background layer, so the content layer is unaffected either way. Shapes are inline SVG data URIs — no extra request, and each viewBox uses preserveAspectRatio="none" so they stretch to any slide size. ========================================================================== */ .pw-slide-bg[class*="pw-slide-bg--mask-"] { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; } /* Arch — flat base, semicircular head. */ .pw-slide-bg--mask-arch { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Arc sweep — a curve rising across the foot of the frame. */ .pw-slide-bg--mask-arc { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Blob — organic, asymmetric. */ .pw-slide-bg--mask-blob { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Diagonal — a clean rake across the frame. */ .pw-slide-bg--mask-diagonal { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Circle — vignette crop. A radial gradient keeps it a true circle whatever the slide's aspect ratio, which a stretched SVG circle would not. */ .pw-slide-bg--mask-circle { -webkit-mask-image: radial-gradient( circle at 50% 50%, #000 0 68%, transparent 70% ); mask-image: radial-gradient( circle at 50% 50%, #000 0 68%, transparent 70% ); } /* Torn edge — irregular lower boundary, like a torn print. */ .pw-slide-bg--mask-torn { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Overlay and pattern ride inside the mask with the photograph, or they would spill past the shaped edge and give the mask away. */ .pw-slide-bg[class*="pw-slide-bg--mask-"] > .pw-slide-overlay, .pw-slide-bg[class*="pw-slide-bg--mask-"] > .pw-slide-pattern { -webkit-mask-image: inherit; mask-image: inherit; -webkit-mask-size: inherit; mask-size: inherit; -webkit-mask-repeat: inherit; mask-repeat: inherit; -webkit-mask-position: inherit; mask-position: inherit; } /* ── Cascading content ─────────────────────────────────────────────────── Opt-in via the slide's "Cascade content" toggle. The wrapper stops animating and hands the entrance to its direct children, each one step later than the last. The step is the theme's own stagger token, so 300 / 600 / 900ms comes from settings.custom.motion and not from here. Six steps is the practical ceiling for a slide; anything past six shares the sixth delay rather than drifting further out of sync with the slide's own transition. */ .pw-slide-content--cascade { opacity: 1; transform: none; transition: none; } .pw-slide-content--cascade > * { opacity: 0; transform: translateY( var( --pw-slide-cascade-shift, 30px ) ); transition: opacity var( --pw-slide-enter-duration, 0.6s ) var( --pw-slide-easing, ease ), transform var( --pw-slide-enter-duration, 0.6s ) var( --pw-slide-easing, ease ); } .pw-slide.is-active .pw-slide-content--cascade > * { opacity: 1; transform: none; } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( 1 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 1 ); } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( 2 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 2 ); } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( 3 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 3 ); } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( 4 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 4 ); } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( 5 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 5 ); } .pw-slide.is-active .pw-slide-content--cascade > *:nth-child( n + 6 ) { transition-delay: calc( var( --pw-slide-cascade-step, 300ms ) * 6 ); } @media ( prefers-reduced-motion: reduce ) { .pw-slide-content--cascade > * { transition-duration: 1ms; transform: none; } .pw-slide.is-active .pw-slide-content--cascade > * { transition-delay: 0ms; } }