/* * Structural + chrome styles for the parts the engine renders itself * (viewport, track/stage, arrows, dots). This file is imported by the * component source, so the bundler shadow-scopes it — it never needs to * reach slotted slide content, only the shell around it. */ /* * Every real slide is light DOM, projected through a native and then * (per Webflow) wrapped one level deeper still — so nothing in this file can * reach or size individual slides at all; that's the global animation * stylesheet's job (css-transitions.ts). Height auto-sizes to content: the * active (or entering) slide is the one genuinely in normal flow — see * css-transitions.ts's `[data-slide][data-slide-state="active"]` rule — so * its real height propagates up through this whole chain the ordinary way. * Nothing here needs a min-height fallback; a min-height *floor* would also * become a hard *ceiling*, since the other (position: absolute, out-of-flow) * slides have nothing of their own to size against and would just get * clipped by .mb-slider-viewport's overflow: hidden at whatever the floor * value was. * * `height: 100%` is kept throughout purely as an escape hatch: it's a no-op * (resolves to auto) unless the Webflow developer sets an actual height, * min-height, or aspect-ratio on the slider instance in the Designer, in * which case it cascades normally and that explicit height wins instead. */ .mb-slider { position: relative; display: block; height: 100%; } /* * Discrete scroll-driving's self-built pin: SliderRoot renders this wrapper * (and stamps data-scroll-pinned on .mb-slider below) only when * scrollMode="discrete" and scroll interaction is on — see SliderRoot.tsx's * selfContainedScroll. Height is set inline by SliderRoot.tsx (scaled by * slideCount, since touch now maps real scroll distance to slide position — * see useScroll.ts's discrete/touch effect), not here; --scroll-range-height * still overrides it per instance same as always, just read from the inline * style's fallback rather than a rule in this file. */ /* * Specificity (class + attribute) deliberately beats the plain .mb-slider * rule above so this doesn't depend on source order. * * height can't stay the inherited 100% here: that's a no-op escape hatch * everywhere else (see the comment above .mb-slider) *because* it normally * resolves against an auto-height ancestor. Once wrapped in * .mb-slider-scroll-range, though, the immediate ancestor has a genuine * explicit height (see SliderRoot.tsx — slideCount * 100vh by default) — so * 100% would resolve to that literal height too, making the sticky element * exactly as tall as the range it's meant to scroll through. Sticky only * visibly sticks when its parent has * slack beyond the child's own height; with both equal there's zero slack, * so it behaves like ordinary position: relative and scroll runs straight * through it — which is exactly the "still able to scroll past" symptom * this fixes. A fixed viewport-height pin also avoids the pinned height * jittering as content-height varies slide to slide (only the active/ * entering slide is in normal flow, so unstyled height would chase it). */ .mb-slider[data-scroll-pinned] { position: sticky; top: var(--scroll-sticky-top, 0px); height: var(--scroll-pinned-height, 100vh); } .mb-slider-viewport { position: relative; overflow: hidden; height: 100%; } .mb-slider-track, .mb-slider-stage { position: relative; height: 100%; touch-action: pan-y; } .mb-slider-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .mb-slider-arrows { display: flex; gap: 0.5rem; } .mb-slider-arrow, .mb-slider-play-pause { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; padding: 0; } .mb-slider-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .mb-slider-pagination { display: flex; gap: 0.75rem; margin-inline-start: auto; } .mb-slider-dot { /* Size is the one pagination knob exposed as a CSS variable (rather than a fixed value) since it's a common ask and has no Properties-panel prop type suited to it. Color deliberately isn't a variable here — it already inherits via currentColor, see the README's pagination note. */ width: var(--slider-dot-size, 0.5rem); height: var(--slider-dot-size, 0.5rem); border-radius: 50%; border: none; background: var(--code-component-slider--slider-pagination); cursor: pointer; padding: 0; } .mb-slider-dot.is-active { border-radius: 0%; } /* * Cursor-style arrows (Featured): no visible buttons, the viewport itself * is the click target. The real Prev/Next buttons still exist in the DOM * (SliderControls always renders them when arrows are enabled at all) — * they're just visually hidden here, and restored on keyboard focus, so * keyboard/AT users get a labeled control instead of relying on the cursor * affordance, which only means anything with a mouse. */ [data-arrow-style="cursor"] .mb-slider-arrows { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [data-arrow-style="cursor"] .mb-slider-arrows:focus-within { position: static; width: auto; height: auto; padding: inherit; margin: 0; overflow: visible; clip: auto; white-space: normal; border: inherit; } /* * Featured's cursor-nav runs in "next-only" mode (SliderRoot.tsx) — a * looping, small (typically 3-slide) set has no reason to expose reverse * from the cursor — so data-cursor-zone is always "next" here; there's no * "prev" cursor rule to pair with it. */ [data-arrow-style="cursor"] .mb-slider-viewport { cursor: url("data:image/svg+xml,%3Csvg width=%2740%27 height=%2740%27 viewBox=%270 0 40 40%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect width=%2740%27 height=%2740%27 rx=%2720%27 fill=%27%23D6EE40%27/%3E%3Cpath d=%27M27.7107 20.5298V20.5353H27.7051L20.9766 27.2639L20.0533 26.3406L25.8586 20.5353H12.0466V19.2302H25.8531L20.0437 13.4207L20.9669 12.4975L27.4317 18.9623L27.4372 18.9567L28.3604 19.88L27.7107 20.5298Z%27 fill=%27%23232220%27/%3E%3C/svg%3E") 20 20, pointer; } .mb-slider-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Layout, typography, and spacing inside a slide are entirely up to the Webflow developer; this variant adds no opinion beyond the shared stage. */ /* * The "vertical replace" knobs, consumed by css-transitions.ts's * data-slider-variant="content" rules via ordinary CSS custom-property * inheritance (values, not selectors, do cross the shadow boundary into the * slotted slide content — see useSlottedSlides.ts for why selectors can't): * * --content-media-active-scale the resting/settled scale of the current * (active) image — deliberately > 1 * (i.e. genuinely larger than its own * container, not just "100%"). This is * what makes the active image fully cover * whatever's behind it regardless of that * element's own transform — see the * z-index comment in css-transitions.ts * --content-media-enter-offset how far below its resting position the * entering image starts (% of its own * height, since data-slide-media fills the * slide's full box) — 100% means it starts * entirely below the container, out of * view, and rises the container's full * height into place * --content-media-exit-offset how far up the outgoing image moves as it * exits (negative = up) * --content-media-exit-scale the outgoing image's scale once fully * exited — 1 = its normal, unscaled size * (it's *receding* from --active-scale, * not growing) * --content-push-enter-offset how far below rest the entering * heading/meta/CTA start (% of their own * height — unlike data-slide-media these * stay in normal flow, so 100% means "a * full line/element height", not "the * whole slide") — a full "push" effect * --content-push-exit-offset how far up the outgoing heading/meta/CTA * move as they exit (negative = up) — * opacity fading alongside this is already * handled by the shared rule in * css-transitions.ts, not repeated here * --content-body-enter-offset how far below rest the entering body copy * starts (px, not %) — body keeps the * original smaller nudge rather than the * full push, see css-transitions.ts * --content-body-exit-offset how far up the outgoing body copy moves * as it exits (negative = up) */ .mb-content-slider [data-slider-stage] { --content-media-active-scale: 1.2; --content-media-enter-offset: 100%; --content-media-exit-offset: -30%; --content-media-exit-scale: 1; --content-push-enter-offset: 100%; --content-push-exit-offset: -100%; --content-body-enter-offset: 24px; --content-body-exit-offset: -24px; } /* * Pagination moves to a vertical column on the right edge, centered — arrows * move with it since they share the same .mb-slider-controls box (still a * flex row internally, so arrows/dots sit side by side at that position; if * you want dots-only here, turn arrows off via the Properties panel rather * than fighting the shared layout). .mb-slider is already position: relative * (slider-components.css), so this positions against the whole component, * not just the viewport. */ .mb-content-slider .mb-slider-controls { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .mb-content-slider .mb-slider-pagination { flex-direction: column; } @media screen and (max-width: 768px){ .mb-content-slider .mb-slider-controls { bottom: 2rem; left:0; right: inherit; top:auto; transform: inherit; } .mb-content-slider .mb-slider-pagination { flex-direction: row; } } @media (max-height: 700px) and (min-width: 1000px){ .mb-slider-viewport { position: relative; overflow: hidden; height: 75%; top: 50%; transform: translateY(-50%); } [data-slider-slot-wrapper][data-slider-variant="content"][data-scroll-pinned] { height: 100%; top: 50%; transform: translateY(-50%); } }