/* PB Hero Pics — every tunable comes in as a custom property set by Elementor */ .pb-hero-pics { position: relative; overflow: hidden; } /* Gives the effect its scroll length; the stage is pinned inside it. The z-index only has to clear the content layer, so it is kept as low as possible — anything on the page that must stay on top (a fixed header, for instance) only needs to beat this number. */ .pb-hero-pics__pin { position: relative; z-index: var(--pb-hp-layer, 2); height: calc(var(--pb-hp-scroll, 5) * 100vh); /* The pinned stage covers the whole screen; without this it would swallow every click meant for the content underneath */ pointer-events: none; } /* This is what gets pinned. Keeping it separate from the ring matters: while an element is pinned ScrollTrigger writes an inline width/height onto it, which would make the ring impossible to measure when the aspect ratio changes. */ .pb-hero-pics .pb-hero-pics__stage { position: relative; /* Forced, and deliberately so. Pinning writes the measured size onto this element inline; if it ever measures zero it writes zeros, and every later measurement then reads those zeros back and rewrites them — the effect stays dead with no way out. The stage is one viewport by definition, so stating that as non-negotiable means a bad frame can never become permanent. */ width: 100% !important; height: 100vh !important; max-width: none !important; max-height: none !important; /* Clips the medias to the viewport box. An ancestor's overflow does not clip a pinned element, because pinning makes it position:fixed — and while desktop engines refuse to let a fixed element grow the scrollable area, mobile ones are not all so strict about it. Clipping here removes the question. */ overflow: hidden; } /* Solid colour that builds up as the medias come in, so only the last one is left standing. It lives inside the stage rather than being fixed to the viewport: that way it is released with the pin and scrolls away with the hero instead of hanging over whatever section comes next. Painted below the ring by document order. */ .pb-hero-pics__veil { position: absolute; inset: 0; background: var(--pb-hp-veil, #121212); opacity: 0; } /* Hidden until the script has measured and placed everything. Without this, a first frame measured before the layout settled shows the medias — the video especially — sitting in the wrong place over the hero for an instant. The delayed animation is the safety net: if the script never runs at all, the ring still appears rather than staying invisible forever. */ .pb-hero-pics__ring { visibility: hidden; animation: pb-hero-pics-reveal 0s linear 1.2s forwards; } .pb-hero-pics.is-ready .pb-hero-pics__ring { visibility: visible; animation: none; } @keyframes pb-hero-pics-reveal { to { visibility: visible; } } .pb-hero-pics__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--pb-hp-size, 18%); aspect-ratio: var(--pb-hp-aspect, 1); } /* Measures the starting size. The two sizes can be given in different units — px against vw against % — so the only trustworthy way to know the ratio between them is to let the browser resolve both and compare what comes out. It sits beside the ring so percentages resolve against the same box. */ .pb-hero-pics__probe { position: absolute; top: 0; left: 0; height: 0; visibility: hidden; pointer-events: none; width: var(--pb-hp-start, var(--pb-hp-size, 18%)); } /* Sits on the ring at its own angle */ .pb-hero-pics__slot { position: absolute; inset: 0; } /* Carries the scroll animation (position and counter-rotation) */ .pb-hero-pics__media { position: absolute; inset: 0; transform: translate(60vw, 0); /* Off-screen until the script computes the real start position */ } /* Carries the idle float, on its own layer so it never fights the scroll. Scoped through the root on purpose: Elementor ships `.elementor img { border-radius: 0 }`, which outranks a single class and would flatten the corners on every image while leaving the video rounded. */ .pb-hero-pics .pb-hero-pics__float { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--pb-hp-radius, 0); } /* YouTube / Vimeo embed. The iframe is sized by the script to cover the box, because an embed is always 16:9 and the ring may not be. */ .pb-hero-pics__embed { position: relative; overflow: hidden; } .pb-hero-pics .pb-hero-pics__embed iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; /* Themes ship a global "iframe { max-width: 100% }" which would clamp the embed back to the box and undo the cover sizing the script applies */ max-width: none; max-height: none; } /* With the player's own controls on, the video becomes clickable — but only once it has landed in the centre, so a media flying past mid-animation never eats a click. The pin layer is pointer-events:none, so this has to opt back in. */ .pb-hero-pics .pb-hero-pics__embed.is-live iframe, .pb-hero-pics video.pb-hero-pics__float.is-live { pointer-events: auto; } /* Covers the embed until playback starts, so a cold player never shows through. Never takes clicks: it would sit between the viewer and the controls. */ .pb-hero-pics .pb-hero-pics__poster { pointer-events: none; position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: var(--pb-hp-radius, 0); } /* Sits in the corner of the pinned stage, so it travels and leaves with the effect. The pin layer is pointer-events:none, so this has to opt back in. Themes and the Elementor kit both style bare