/** * Scrollytelling Section — front-end styles. * * All custom properties are prefixed with --st- to avoid collisions. * * @package Scrollytelling */ /* * STICKY FIX — overflow-x:hidden on / breaks position:sticky. * * Hello Elementor theme and Elementor core both set overflow-x:hidden on * and to suppress horizontal scroll. That has a side-effect: * it makes the scroll container (instead of the viewport), and * position:sticky inside it stops working. * * overflow-x:clip is a drop-in replacement that: * - visually clips content that overflows horizontally (same as hidden), BUT * - does NOT create a new scroll container (unlike hidden), so sticky works. * * The :has() selector scopes this to pages that actually contain our widget * so we don't change global behaviour on every page. * Supported: Chrome 105+, Firefox 121+, Safari 15.4+. * Older browsers get the JS inline-style fallback applied at init time. */ html:has(.scrollytelling-track), html:has(.scrollytelling-track) body { overflow-x: clip !important; } /* * Elementor's widget container must also not clip its content so the * tall track element can size the wrapper to its full calc() height. */ .elementor-widget-scrollytelling_section { overflow: visible !important; } .elementor-widget-scrollytelling_section > .elementor-widget-container { overflow: visible !important; height: auto !important; } .scrollytelling-track { /* --st-item-count is set inline by the widget render. */ --st-background-color: #0e0e10; --st-dot-inactive-color: rgba(255, 255, 255, 0.35); --st-dot-active-color: #ffffff; --st-dot-size: 12px; --st-fade-duration: 600ms; --st-fade-easing: cubic-bezier(0.22, 0.61, 0.36, 1); /* 100 = 100% = one full viewport height of scroll runway per slide. * Overridden per-breakpoint by the Scroll Distance control. */ --st-scroll-distance: 100; position: relative; width: 100%; height: calc(100vh * var(--st-item-count) * var(--st-scroll-distance) / 100); } /* --------------------------------------------------------------------------- * Sticky viewport * ------------------------------------------------------------------------- */ .scrollytelling-sticky-viewport { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--st-background-color); display: flex; flex-direction: column; } /* --------------------------------------------------------------------------- * Section header — sits above the stage, visible across all slides. * ------------------------------------------------------------------------- */ .scrollytelling-section-header { flex-shrink: 0; box-sizing: border-box; padding: 4vh 8%; width: 100%; display: flex; flex-direction: column; } .scrollytelling-section-headline { margin: 0 0 0.4em; line-height: 1.1; } .scrollytelling-section-subheadline { margin: 0; line-height: 1.3; opacity: 0.85; } /* The stage holds the absolutely-stacked slide wrappers and dots. */ .scrollytelling-stage { position: relative; width: 100%; flex: 1; min-height: 0; } /* --------------------------------------------------------------------------- * Slide wrappers: stacked and cross-faded on desktop. * Each slide holds its image and text as side-by-side flex children. * ------------------------------------------------------------------------- */ .scrollytelling-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: stretch; opacity: 0; visibility: hidden; z-index: 1; transition: opacity var(--st-fade-duration) var(--st-fade-easing), visibility 0s linear var(--st-fade-duration); pointer-events: none; } .scrollytelling-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity var(--st-fade-duration) var(--st-fade-easing), visibility 0s linear 0s; pointer-events: auto; } /* Image Position: Right (default) — text left, image right. */ .scrollytelling-image-right .scrollytelling-text-item { order: 1; } .scrollytelling-image-right .scrollytelling-image-item { order: 2; } /* Image Position: Left — image left, text right. */ .scrollytelling-image-left .scrollytelling-image-item { order: 1; } .scrollytelling-image-left .scrollytelling-text-item { order: 2; } /* --------------------------------------------------------------------------- * Items: 50/50 flex children within each slide. * Visibility is controlled at the slide level; items are always in flow. * ------------------------------------------------------------------------- */ .scrollytelling-image-item, .scrollytelling-text-item { height: 100%; overflow: hidden; } .scrollytelling-image-item { flex: 0 0 auto; width: 50%; } .scrollytelling-text-item { flex: 1; width: auto; } /* --------------------------------------------------------------------------- * Text item internals * ------------------------------------------------------------------------- */ .scrollytelling-text-item { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; padding: 8vh 8%; /* Prevent overflowing copy from leaking out of the block. */ overflow: hidden; } .scrollytelling-text-inner { width: 100%; max-height: 100%; overflow: hidden; } .scrollytelling-headline { margin: 0 0 0.5em; line-height: 1.1; } .scrollytelling-subheadline { margin: 0 0 1em; line-height: 1.3; opacity: 0.85; } .scrollytelling-body { margin: 0; line-height: 1.6; overflow: hidden; } .scrollytelling-body p { margin: 0 0 1em; } .scrollytelling-body p:last-child { margin-bottom: 0; } .scrollytelling-link { display: inline-block; margin-top: 1.25em; text-decoration: underline; } /* "See more" / "Show less" toggle — only shown on mobile when the text * overflows its collapsed height (see .has-overflow below). Inert on * desktop. */ .scrollytelling-text-item .scrollytelling-text-toggle { display: none; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 0 0 !important; margin-top: 0.5em !important; min-width: 0 !important; min-height: 0 !important; box-sizing: content-box !important; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; align-self: flex-start; } /* When the whole block is a link, remove default anchor styling so the * typography controls still apply. */ .scrollytelling-block-link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; } /* --------------------------------------------------------------------------- * Image item internals * ------------------------------------------------------------------------- */ /* Flex container so the image can be placed (not stretched) within the area. * justify-content (H) and align-items (V) are written by Elementor selectors * from the alignment controls; these are the defaults for new widgets. */ .scrollytelling-image-item { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 0 8%; } /* When an aspect ratio is set via the control, height is driven by the ratio * and the image fills the container with object-fit cover. */ .scrollytelling-image-item.has-aspect-ratio { height: auto; align-self: center; } .scrollytelling-image-item.has-aspect-ratio .scrollytelling-image { width: 100%; height: auto; max-width: none; max-height: none; object-fit: cover; } /* Image placed naturally within its container — not stretched to fill. * max-width/max-height ensure it never overflows; width/height auto * maintain the intrinsic aspect ratio. */ .scrollytelling-image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } /* --------------------------------------------------------------------------- * Dot navigation * ------------------------------------------------------------------------- */ .scrollytelling-dots { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; } /* Image Right -> dots on the LEFT margin. * Image Left -> dots on the RIGHT margin. */ .scrollytelling-image-right .scrollytelling-dots { left: 24px; right: auto; } .scrollytelling-image-left .scrollytelling-dots { right: 24px; left: auto; } .scrollytelling-dots .scrollytelling-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--st-dot-size) !important; height: var(--st-dot-size) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; background: transparent !important; box-sizing: content-box !important; cursor: pointer; line-height: 0 !important; } .scrollytelling-dot-inner { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--st-dot-inactive-color); transition: background-color 300ms ease, transform 300ms ease; } .scrollytelling-dot.is-active .scrollytelling-dot-inner { background-color: var(--st-dot-active-color); transform: scale(1.35); } .scrollytelling-dot:focus-visible { outline: 2px solid var(--st-dot-active-color); outline-offset: 3px; border-radius: 50%; } /* --------------------------------------------------------------------------- * Reduced motion — disable cross-fade transition for users who prefer it. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .scrollytelling-slide, .scrollytelling-dot-inner { transition: none; } } /* --------------------------------------------------------------------------- * Mobile layout (< 768px) * * Keeps sticky cross-fade behaviour but switches each slide to a column * layout: image on top, text below. Dot navigation stays visible, anchored * to the bottom of the panel. * ------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Tighter padding on mobile to preserve vertical space for slides. */ .scrollytelling-section-header { padding: 3vh 6%; } /* Column layout — image stacks above text inside the sticky panel. */ .scrollytelling-slide { flex-direction: column; } /* Image fills full width; default height approximates 16:9 for a * full-width element when no aspect ratio control is set. */ .scrollytelling-image-item { width: 100% !important; height: 56vw; min-height: 200px; padding: 0 6% 0 8%; } /* When an aspect ratio is explicitly set, let it drive the height. */ .scrollytelling-image-item.has-aspect-ratio { height: auto; min-height: 0; } /* When aspect ratio is on the img, height: auto lets the ratio take effect. */ .scrollytelling-image-item.has-aspect-ratio .scrollytelling-image { height: auto; } /* Image always fills its container on mobile. */ .scrollytelling-image { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } /* Text fills the remaining height of the sticky panel. Collapsed copy * clips at .scrollytelling-text-inner; the toggle button (sibling, * outside the clipped inner) expands it via .is-expanded below. */ .scrollytelling-text-item { width: 100%; flex: 1; height: auto; display: flex; flex-direction: column; padding: 4% 6% 0 8%; /* Leave room for the dot nav anchored to the bottom of the panel. */ padding-bottom: calc(6vh + 32px); } .scrollytelling-text-inner { flex: 1; min-height: 0; overflow: hidden; } .scrollytelling-text-item.has-overflow .scrollytelling-text-toggle { display: inline-flex; } /* Expanded state: the text panel covers the full slide, overlaying the * image, so the full copy is readable. .scrollytelling-slide is already * position:absolute, so it's the containing block for inset:0. */ .scrollytelling-text-item.is-expanded { position: absolute; top: 0; left: 0; /* Explicit width/height (not inset:0) — letting the browser solve * height from top+bottom:0 with height:auto is a known WebKit soft * spot that can leave the flex column without a confidently definite * height, so the flex:1 text-inner below doesn't get its full share * of space and leaves dead space above the toggle button. */ width: 100%; height: 100%; z-index: 5; background-color: var(--st-background-color); } .scrollytelling-text-item.is-expanded .scrollytelling-text-inner { overflow-y: auto; flex: 1; /* Clear the desktop-only max-height:100% — combined with flex:1 inside * an absolutely-positioned ancestor it can make WebKit miscalculate * the scrollable height. */ max-height: none; /* Classic iOS Safari fix: without this, a nested overflow:auto panel * can repaint incorrectly mid-scroll, momentarily showing blank * content instead of the text. */ -webkit-overflow-scrolling: touch; /* Without this, scrolling past the end of the inner text hands the * gesture off to the page itself, dragging the whole sticky section * (panel still expanded) up and out from under the user — exactly * the scroll-chaining problem this feature exists to avoid. */ overscroll-behavior: contain; } /* Override desktop two-class order rules (specificity 0,2,0) so image * always appears above text regardless of the Slide Layout setting. */ .scrollytelling-image-left .scrollytelling-image-item, .scrollytelling-image-right .scrollytelling-image-item { order: 0; } .scrollytelling-image-left .scrollytelling-text-item, .scrollytelling-image-right .scrollytelling-text-item { order: 1; } /* Dots stay visible on mobile (hinting slide count / scroll progress), * but anchor to the bottom of the panel instead of inheriting the * desktop vertical-center position — centering against the full sticky * viewport would often land them over the image with no guaranteed * contrast. z-index:10 keeps them above the expanded text overlay * (z-index:5). */ /* Dots inherit top:50% + translateY(-50%) from base CSS (vertical center). * Horizontal position is set per layout; translateY(-50%) is added to each * transform so the vertical centering is preserved alongside the X shift. */ .scrollytelling-image-right .scrollytelling-dots { left: 3%; right: auto; transform: translateX(-50%) translateY(-50%); } .scrollytelling-image-left .scrollytelling-dots { right: 3%; left: auto; transform: translateX(50%) translateY(-50%); } }