/** * Scroll Slider — styles for the bg_pb_scroll_slider Divi module. * * In-scope naming: every rule is anchored on the block .bg-scroll-slider and * no .in__ class is ever defined globally. Children are reached with the * direct child combinator, except where Owl Carousel injects its own nodes * (.owl-stage-outer > .owl-stage > .owl-item) between the viewport and the * slides, which makes an unbroken > chain impossible. * * The default state is unpinned so the module degrades to normal flow when * JavaScript or Owl is unavailable. .is-pinned is added by scroll-slider.js. */ /* * Divi clamps the page overflow whenever any module on the page uses an * entrance animation: js/custom.unified.js does * $('body').css('overflow-x','hidden') * $('#page-container').css('overflow-y','hidden') * as inline styles. That turns #page-container into a scroll container which * never scrolls, so position: sticky inside it silently stops working. * * overflow: clip clips exactly like hidden but does NOT create a scroll * container, so the pin works and Divi still gets its horizontal-overflow * protection. !important is required to beat the inline styles. * * The class is added to by scroll-slider.js, and only when a slider * actually pins, so pages without one keep Divi's behaviour untouched. */ .has-pinned-scroll-slider body, .has-pinned-scroll-slider #page-container { overflow-x: clip !important; overflow-y: visible !important; } /* * Scroll lock while the theme's lightbox is open. Without it the wheel keeps * driving the pinned slider behind the overlay, so closing it reveals a * different slide than the one that was opened. * * It has to sit on : the rule above forces overflow-y: visible on body * with !important and would win. scroll-slider.js mirrors the overlay's own * .active class onto . */ html.has-lightbox-open { overflow: hidden; } /* * Same lock while the slider modal is open, so the page cannot scroll behind * it. :has() sees the dialog's own [open] attribute, so no JS is involved. * Kept as its own rule: a browser without :has() drops the whole selector * list, and would take the lightbox lock above down with it. */ html:has(.bg-scroll-slider-modal > .in__dialog[open]) { overflow: hidden; } .bg-scroll-slider { --in-slide-count: 1; --in-image-height: 58vh; --in-thumb-size: 64px; --in-header-offset: 0px; --in-scroll-per-slide: 70vh; --in-stage-height: calc(100vh - var(--in-header-offset)); } .bg-scroll-slider > .in__track { height: auto; } .bg-scroll-slider > .in__track > .in__stage { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; height: auto; } /* Pinned mode. Only ever enabled by JS. */ .bg-scroll-slider.is-pinned > .in__track { height: calc( var(--in-stage-height) + (var(--in-slide-count) - 1) * var(--in-scroll-per-slide) ); } .bg-scroll-slider.is-pinned > .in__track > .in__stage { position: sticky; top: var(--in-header-offset); height: var(--in-stage-height); overflow: hidden; } /* The Visual Builder must never pin, or the slides cannot be clicked. */ .bg-scroll-slider.is-builder-preview > .in__track, .bg-scroll-slider.is-builder-preview.is-pinned > .in__track { height: auto; } .bg-scroll-slider.is-builder-preview > .in__track > .in__stage, .bg-scroll-slider.is-builder-preview.is-pinned > .in__track > .in__stage { position: static; height: auto; overflow: visible; } /* * The frame exists only to give the arrows a positioning context that hugs the * slide. They cannot live inside .in__viewport: Owl moves every child of * .owl-carousel into its own stage element on init. */ .bg-scroll-slider .in__stage > .in__frame { position: relative; width: 100%; max-width: var(--rowMaxWidth, 1200px); margin: 0 auto; } .bg-scroll-slider .in__frame > .in__viewport { width: 100%; } .bg-scroll-slider .in__frame > .in__arrows { position: absolute; top: 0; right: 0; left: 0; /* Height of the image box only. Stretching to the full frame would drag the arrows down with the caption, which sits inside the same figure. */ height: var(--in-image-height); z-index: 2; display: flex; align-items: center; justify-content: space-between; /* The bar spans the slide, so it must not swallow clicks meant for it. */ pointer-events: none; } .bg-scroll-slider .in__arrows > .in__arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--black, #000); cursor: pointer; pointer-events: auto; transition: opacity 0.25s ease, background-color 0.25s ease; } .bg-scroll-slider .in__arrows > .in__arrow:hover, .bg-scroll-slider .in__arrows > .in__arrow:focus-visible { background: rgba(255, 255, 255, 1); } .bg-scroll-slider .in__arrows > .in__arrow[disabled] { opacity: 0.25; cursor: default; } /* Owl injects .owl-stage-outer > .owl-stage > .owl-item around each slide. */ .bg-scroll-slider .owl-item > .in__slide-outer { display: flex; align-items: center; justify-content: center; } .bg-scroll-slider .in__slide { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; } /* Present only when the lightbox is enabled, so every image rule below has to match both with and without it. */ .bg-scroll-slider .in__slide > .in__slide-link { display: block; max-width: 100%; cursor: zoom-in; } /* Beats owl.carousel.min.css `.owl-carousel .owl-item img { width: 100% }`. */ .bg-scroll-slider .in__slide > .in__slide-image, .bg-scroll-slider .in__slide > .in__slide-link > .in__slide-image { width: auto; max-width: 100%; height: var(--in-image-height); margin: 0 auto; object-fit: contain; } .bg-scroll-slider .in__slide > .in__slide-caption { /* Three lines reserved, so slides keep a constant height and the pinned stage never jumps. */ min-height: 4.5em; max-width: 52ch; margin: 1.6rem auto 0; font-family: var(--flatFont, inherit); font-size: var(--smallestFontMin, 1.4rem); line-height: 1.5; text-align: center; } .bg-scroll-slider .in__stage > .in__thumbs { display: flex; flex-wrap: nowrap; /* Scroll container: its min-height would otherwise collapse to 0 when the pinned stage is shorter than image + caption + strip. */ flex-shrink: 0; gap: 0.8rem; /* Explicit width: a nowrap row's min-content is the whole strip, and the stage's align-items: center would size the list to it and overflow. */ width: 100%; max-width: var(--rowMaxWidth, 1200px); margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; list-style: none; } .bg-scroll-slider .in__stage > .in__thumbs::-webkit-scrollbar { display: none; } .bg-scroll-slider .in__thumbs > .in__thumb { margin: 0; padding: 0; list-style: none; } /* Centre the row while it fits, start-align it once it overflows. Auto margins instead of `justify-content: safe center`, which Safari still lacks. */ .bg-scroll-slider .in__thumbs > .in__thumb:first-child { margin-inline-start: auto; } .bg-scroll-slider .in__thumbs > .in__thumb:last-child { margin-inline-end: auto; } .bg-scroll-slider .in__thumb > .in__thumb-button { display: block; width: var(--in-thumb-size); height: calc(var(--in-thumb-size) * 1.35); padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.45; transition: opacity 0.25s ease, border-color 0.25s ease; } .bg-scroll-slider .in__thumb-button > .in__thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; } .bg-scroll-slider .in__thumb.is-active > .in__thumb-button, .bg-scroll-slider .in__thumb > .in__thumb-button:hover, .bg-scroll-slider .in__thumb > .in__thumb-button:focus-visible { border-color: var(--black, #000); opacity: 1; } /* Phones: never pin. Enforced here as well as in JS, so a missed rotation can never leave a several-viewport-tall empty column. */ @media (max-width: 767px) { .bg-scroll-slider > .in__track, .bg-scroll-slider.is-pinned > .in__track { height: auto; } .bg-scroll-slider.is-pinned > .in__track > .in__stage { position: static; height: auto; overflow: visible; } .bg-scroll-slider .in__slide > .in__slide-link { align-self: stretch; } .bg-scroll-slider .in__slide > .in__slide-image, .bg-scroll-slider .in__slide > .in__slide-link > .in__slide-image { width: 100%; height: auto; } .bg-scroll-slider .in__slide > .in__slide-caption { min-height: 0; } /* Slides are auto-height here, so portrait and landscape photos differ. Owl floats the items, which parks the shorter ones at the top of the tallest. Flex centres them in the stage instead. */ .bg-scroll-slider .owl-stage { display: flex; align-items: center; } /* Owl sets the item widths inline. Its clearfix pseudo (:after, content ".") becomes a flex item too and would shave a fraction off every slide, drifting the translate offsets by a few px on the last slides. */ .bg-scroll-slider .owl-item { flex-shrink: 0; } /* The image is auto-height here, so --in-image-height no longer describes it. Centre on the whole frame instead and shrink the targets. */ .bg-scroll-slider .in__frame > .in__arrows { height: 100%; } .bg-scroll-slider .in__arrows > .in__arrow { width: 36px; height: 36px; } /* Thumbnails on phone are opt-out, via the module's own setting. */ .bg-scroll-slider[data-thumbs-mobile='off'] .in__stage > .in__thumbs { display: none; } /* When they are shown, cap the size so the row stays compact; 44px keeps the tap target. */ .bg-scroll-slider .in__stage > .in__thumbs { gap: 0.5rem; margin-top: 0.4rem; } .bg-scroll-slider .in__thumb > .in__thumb-button { width: min(var(--in-thumb-size), 44px); height: calc(min(var(--in-thumb-size), 44px) * 1.35); } } @media (prefers-reduced-motion: reduce) { .bg-scroll-slider.is-pinned > .in__track { height: auto; } .bg-scroll-slider.is-pinned > .in__track > .in__stage { position: static; height: auto; overflow: visible; } .bg-scroll-slider .in__stage > .in__thumbs { scroll-behavior: auto; } } /* * Modal mode ("Open In Modal"). The page shows only .bg-scroll-slider-modal: a * cover button with the first image, and a closed that holds a plain, * never-pinned .bg-scroll-slider flagged .is-modal. Captions sit on the bottom * of the image here, over a gradient that keeps white text readable on any * photo. */ .bg-scroll-slider-modal { --in-image-height: 58vh; } .bg-scroll-slider-modal > .in__open { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; border: 0; background: none; color: #fff; cursor: zoom-in; } /* Same size as a slide image, so the cover matches the slider it opens. */ .bg-scroll-slider-modal > .in__open > .in__image { display: block; width: auto; max-width: 100%; height: var(--in-image-height); object-fit: contain; } .bg-scroll-slider-modal > .in__open > .in__caption { font-family: var(--flatFont, inherit); font-size: var(--smallestFontMin, 1.4rem); line-height: 1.5; text-align: center; } /* White is set on the parents, so a caption colour picked in Divi still wins. */ .bg-scroll-slider.is-modal .in__slide { position: relative; color: #fff; } /* The gradient is solid enough behind the text itself and only fades out across the top padding, however many lines the caption runs to. */ .bg-scroll-slider-modal > .in__open > .in__caption, .bg-scroll-slider.is-modal .in__slide > .in__slide-caption { position: absolute; right: 0; bottom: 0; left: 0; min-height: 0; max-width: none; margin: 0; padding: 4.8rem 1.6rem 1.2rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.65) calc(100% - 4.8rem), transparent ); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); transition: opacity 0.2s ease; } /* A photo zoomed by a pinch (scroll-slider.js) drops its caption, which would cover the very part being looked at. */ .bg-scroll-slider.is-modal.is-zoomed .in__slide > .in__slide-caption { opacity: 0; } /* A closed dialog keeps display: none from the browser; only restyle it open. */ .bg-scroll-slider-modal > .in__dialog { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 1.6rem; border: 0; background: var(--black, #000); color: #fff; overscroll-behavior: contain; } .bg-scroll-slider-modal > .in__dialog[open] { display: flex; flex-direction: column; } .bg-scroll-slider-modal > .in__dialog::backdrop { background: var(--black, #000); } /* Floats over the corner of the photo, which gets the whole screen. */ .bg-scroll-slider-modal > .in__dialog > .in__close { position: fixed; top: 1.6rem; right: 1.6rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--black, #000); cursor: pointer; transition: background-color 0.25s ease; } .bg-scroll-slider-modal > .in__dialog > .in__close:hover, .bg-scroll-slider-modal > .in__dialog > .in__close:focus-visible { background: #fff; } /* * The photo gets all the height the thumbnails leave. Each level down to the * frame fills its parent, and the frame is a size container, so the image can * cap itself at 100cqh: Owl's wrappers in between have no height a percentage * could resolve against. Image Height only sizes the cover in this mode. */ .bg-scroll-slider-modal > .in__dialog > .bg-scroll-slider, .bg-scroll-slider.is-modal > .in__track, .bg-scroll-slider.is-modal > .in__track > .in__stage { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .bg-scroll-slider.is-modal > .in__track > .in__stage { gap: 1.2rem; } .bg-scroll-slider.is-modal .in__stage > .in__frame { flex: 1 1 auto; min-height: 0; max-width: none; container-type: size; } /* Filling the frame also lets a zoomed photo use all of it before Owl's overflow: hidden clips it. */ .bg-scroll-slider.is-modal .in__frame > .in__viewport, .bg-scroll-slider.is-modal .owl-stage-outer, .bg-scroll-slider.is-modal .owl-stage { height: 100%; } /* Portrait and landscape slides differ in height; centre them all. */ .bg-scroll-slider.is-modal .owl-stage { display: flex; align-items: center; } .bg-scroll-slider.is-modal .owl-item { flex-shrink: 0; } /* Fit the frame, upscaling small files, while the box stays the photo itself so the caption lands on its bottom edge, not on letterboxing. No CSS sizing does both without the ratio, which scroll-slider.js sets once loaded. */ .bg-scroll-slider.is-modal .in__slide > .in__slide-image { width: min(100cqw, 100cqh * var(--in-ratio, 1)); height: auto; max-height: 100cqh; } .bg-scroll-slider.is-modal .in__frame > .in__arrows { height: 100%; } /* The default black border would vanish on the black backdrop. */ .bg-scroll-slider.is-modal .in__thumb.is-active > .in__thumb-button, .bg-scroll-slider.is-modal .in__thumb > .in__thumb-button:hover, .bg-scroll-slider.is-modal .in__thumb > .in__thumb-button:focus-visible { border-color: #fff; } @media (max-width: 767px) { /* Both sides auto, so the box is the photo itself and the caption lands on its bottom edge, not on letterboxing. */ .bg-scroll-slider-modal > .in__open > .in__image { height: auto; max-height: var(--in-image-height); } /* Edge to edge: on a phone the width is what limits most photos. */ .bg-scroll-slider-modal > .in__dialog { padding: 1.6rem 0; } }