.nsc-carousel { position: relative; } /* * Fades peeking step content into the (solid, unmasked) background near the * left/right edges. Applied to a full-width wrapper *outside* .nsc-carousel__inner * so it covers slides that visually overflow past the centered content column * via .nsc-carousel__swiper's overflow:visible — masking .nsc-carousel__inner * itself wouldn't reach that overflow, and masking .nsc-carousel directly would * fade the background color too, not just the content sitting on it. * The Edge Feather Width control writes the per-instance width into the * --nsc-feather custom property (and its desktop-only/0-on-mobile default) * via Elementor's own responsive breakpoints. Always fades the right edge — * that's where a peeking next slide shows (from slidesPerView > 1 * overflowing the viewport), which is independent of the Offset Side * control: that control only moves the reserved blank runway space at one * end of the track, it doesn't change which edge slides visually overflow. * Flipping this mask to the left when Offset Side is "right" was tried and * reverted — with no slide reserved to peek in on the left, it just faded * the active step's own text instead. The 80px fallback matches the * control's own default, in case Elementor ever skips emitting CSS for an * untouched default value. */ @media (min-width: 1025px) { .nsc-carousel__feather { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--nsc-feather, 80px)), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - var(--nsc-feather, 80px)), transparent 100%); } } .nsc-carousel__inner, .nsc-carousel__nav-outer { max-width: 1280px; margin-left: auto; margin-right: auto; } /* * .nsc-carousel__nav (dots/line) intentionally lives here, as a sibling of * .nsc-carousel__feather rather than nested inside it. Applying mask-image * to .nsc-carousel__feather promotes it to its own compositing layer, which * — like transform/filter — clips overflowing descendants to its own box * even with overflow:visible set. That's fine for the swiper's peeking * slides (the mask is meant to fade them), but it was also clipping the * active dot's transform:scale(1.6) at the bottom edge. Keeping the nav * outside the masked wrapper avoids that entirely — it never needed * feathering anyway. */ .nsc-carousel__swiper { overflow: visible; } .nsc-carousel .swiper-wrapper { align-items: flex-start; } .nsc-step { transition: opacity 0.35s ease, padding 0.35s ease; } /* * The reference design gives the active step 32px of side padding (its own * breathing room) while the compact preview steps sit flush with none — * matching Figma's why-card (32px padding) vs plain Frame (0 padding). */ .swiper-slide-active .nsc-step { padding-left: 32px; padding-right: 32px; } .nsc-step__number { font-family: 'Argent CF', serif; line-height: 1; margin-bottom: 0.4em; } .nsc-step__heading { margin: 0 0 0.5em; } .nsc-step__description { margin: 0; } .nsc-step__description p { margin: 0 0 0.75em; } .nsc-step__description p:last-child { margin-bottom: 0; } /* * Used only momentarily by JS to measure each step's true full height * (uncapped description) so the carousel can be pinned to the tallest step * and never resize when navigating between steps. */ .swiper-slide.nsc-measuring .nsc-step__description { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; } /* * .nsc-step has `transition: padding 0.35s ease`. The JS measurement * momentarily gives each slide the real .swiper-slide-active class (so it * picks up whatever active-state padding/typography styles actually exist, * including any per-instance Elementor style-tab customizations) and reads * outerHeight() in the very same synchronous tick — without this, that read * would capture the pre-transition, not-yet-repadded box size, since the * padding only visually "arrives" once the browser advances the transition * on a later frame. */ .swiper-slide.nsc-measuring .nsc-step { transition: none !important; } /* * Sits outside the sliding track (a sibling of .nsc-carousel__swiper, not * nested inside any .nsc-step) so it stays fixed in place while the steps * themselves slide underneath — rather than sliding along with whichever * step happened to render it. */ .nsc-step__nav-buttons { display: flex; align-items: center; gap: 12px; margin: 20px 0 0 32px; } /* * Nav buttons stay pinned to the left regardless of the Offset Side control * — only the reserved peek-offset gap itself (and where the Swiper track * leaves room for it) moves to the right; the prev/next buttons always sit * where they did originally. So the offset amount (--nsc-offset, written by * the Peek Offset control) only pulls the buttons over when Offset Side is * "left" — with "right" selected, slide 1 sits flush left already, so the * buttons just get the plain 32px base gap. The 160px fallback matches the * Peek Offset control's own desktop default (0 on tablet & mobile) — a * more-specific per-instance rule from the control always wins over this. */ @media (min-width: 1025px) { .nsc-step__nav-buttons { margin-left: calc(var(--nsc-offset, 160px) + 32px); } .nsc-carousel--offset-right .nsc-step__nav-buttons { margin-left: 32px; } } /* * !important throughout: this button previously inherited an unrelated * theme/reset `button{...}` rule (padding, border-radius, sizing) despite * normal cascade rules — pinning every shape-critical property here so it * reliably renders as a small icon circle regardless of what else targets * a bare