/** * PropOffice Property UIs - slider presentation. * * Slider chrome only. Nothing here knows what a property is or how a showcase * looks; a slide is a box that holds whichever version renderer ran, and * version styling stays in assets/css/versions/. * * Swiper's own stylesheet comes from Elementor and does the layout. This file * adds only what Swiper has no opinion about: where the navigation and * pagination sit, and what they look like. * * Positioning is the substantial part. Navigation and pagination are each * absolutely positioned against the slider root and placed by two custom * properties - an anchor percentage and the matching translation - so a preset * is one declaration and needs no per-preset selector. Left is 0%/0%, centre is * 50%/-50%, right is 100%/-100%. Offsets nudge from the anchor and may be * negative, which is what makes an arbitrary position reachable without a * separate "custom" mode. Nothing uses a negative margin to fake a layout. */ /* * No gap or slides-per-view token here. Swiper writes both as inline styles on * the wrapper and slides once it initialises, and an inline style outranks * every stylesheet, so a token would be dead the moment the slider started. * Those two settings travel as Swiper configuration instead. */ .propoffice-pui-slider { --ppui-nav-x: 50%; --ppui-nav-tx: -50%; --ppui-nav-y: 100%; --ppui-nav-ty: 0%; --ppui-nav-dx: 0px; --ppui-nav-dy: 12px; --ppui-nav-gap: 0.75rem; --ppui-nav-size: 44px; --ppui-nav-icon-size: 1.25rem; --ppui-nav-color: var(--ppui-cta-text); --ppui-nav-color-hover: var(--ppui-cta-text); --ppui-nav-bg: var(--ppui-cta-bg); --ppui-nav-bg-hover: var(--ppui-cta-bg); --ppui-dot-x: 50%; --ppui-dot-tx: -50%; --ppui-dot-y: 100%; --ppui-dot-ty: 0%; --ppui-dot-dx: 0px; --ppui-dot-dy: 12px; --ppui-dot-gap: 0.5rem; --ppui-dot-size: 10px; --ppui-dot-active-size: 10px; --ppui-dot-color: var(--ppui-border); --ppui-dot-active-color: var(--ppui-cta-bg); --ppui-counter-x: 0%; --ppui-counter-tx: 0%; --ppui-counter-y: 0%; --ppui-counter-ty: 0%; --ppui-counter-dx: 0px; --ppui-counter-dy: 0px; --ppui-counter-color: var(--ppui-text-inverse); --ppui-counter-active: var(--ppui-text-inverse); --ppui-counter-bg: transparent; position: relative; /* * min-width, and it is not optional. * * The slider is a grid item of the component root, and a grid item defaults * to min-width: auto - meaning it refuses to become narrower than its own * min-content width. Inside is a flex row of every slide, so that * min-content width is the sum of all of them. * * The result was not a slightly wide slider but a runaway one: the item grew * to fit the row, Swiper measured that width and wrote it back as each * slide's width, which widened the row again. On a page of 21 properties it * settled at roughly 26.8 million pixels, dragging the document's scroll * width with it and stretching one placeholder across the whole viewport - * which is what the large flat colour blocks actually were. * * max-width pins the other end, so no future content can push it out again. */ max-width: 100%; min-width: 0; } /* * The viewport clips; the root does not. Navigation and pagination are siblings * of the viewport rather than children, so they can be placed outside the * slide area without being cut off by the overflow that makes a slider work. */ .propoffice-pui-slider__viewport { overflow: hidden; position: relative; width: 100%; } .propoffice-pui-slider__slide { height: auto; min-width: 0; } /* * Before Swiper initialises - and permanently, if the library never arrives - * the slides stay in normal block flow, which reads exactly like the static * presentation. * * This is where degradation belongs. An earlier version handled it in PHP by * refusing to emit slider markup unless Swiper was already registered, which * made the rendered HTML depend on asset-registration order and produced a * slider on the site and a vertical list in the editor from identical settings. * * Note what this does not do: no slide is hidden, none is clipped, and every * property remains a real .swiper-slide in the document. Swiper adds * .swiper-initialized the moment it takes over, and this stops applying. */ .propoffice-pui-slider .swiper:not(.swiper-initialized) .swiper-wrapper { display: block; } /* * The track's own layout, for an initialised slider. * * The comment at the top of this file says Swiper's stylesheet does the layout, * and on a page that carries it, it does. The widget's declared dependencies * and its render-time enqueue both request that stylesheet, but a request is not * a guarantee: an Elementor element-cache hit skips the render, and an asset * optimiser can drop a stylesheet it believes unused. Swiper still initialises * in that case - the script does not need the stylesheet - and then lays its * inline slide widths out in a `display: block` wrapper, which is a column of * full-height cards that reads as "the slider is broken on the live site" while * the editor, which always loads every stylesheet, looks right. * * These four declarations are the ones the track cannot work without, written * for the initialised state only and identical to Swiper's, so on a page that * has both stylesheets they change nothing. Navigation, pagination, effects and * the rest of Swiper's stylesheet are deliberately not copied. */ .propoffice-pui-slider .swiper.swiper-initialized { overflow: hidden; } .propoffice-pui-slider .swiper-initialized > .swiper-wrapper { display: flex; box-sizing: content-box; width: 100%; height: 100%; position: relative; } .propoffice-pui-slider .swiper-initialized > .swiper-wrapper > .swiper-slide { flex-shrink: 0; position: relative; } /* * The one frame between the markup landing and Swiper taking over. * * In the editor the build is deferred so the browser can paint the fields an * editor just changed rather than laying out twenty slides first. That leaves a * single frame in which the rule above is in force and every slide is in normal * block flow - twenty heroes stacked vertically, which is a worse flicker than * the wait it replaces. * * The attribute is set only while a build is actually pending, and only in the * editor, so the degradation above is untouched everywhere it matters: a page * that never receives Swiper still shows every property as a real slide. */ .propoffice-pui-slider[data-propoffice-initialising] .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; } /* ------------------------------------------------------------- Navigation */ /* * Every rule from here down is written as `.propoffice-pui-slider .x` rather * than `.x`, and the extra class is doing real work. * * The arrows are