soulog-sticky-steps{--sss-bg: #f5f6f7;--sss-accent: #e8623b;--sss-panel-h: 480px;--sss-panel-ratio: 16 / 9;--sss-scroll-h: 255vh;--sss-n: 3;--sss-rows: 3;--sss-heading: var(--color-heading);--sss-text: rgba(var(--color-body-rgb), .7);--sss-muted: rgba(var(--color-body-rgb), .45);--sss-reserve: 160px;display:block;background:var(--sss-bg);color:var(--sss-heading)}.sss__track{position:relative;padding-inline:20px}@media only screen and (min-width:768px){.sss__track{padding-inline:50px}}.sss__inner{width:100%;max-width:var(--grid-width, 1140px);margin:0 auto}.sss__head{text-align:center;margin-bottom:40px}soulog-sticky-steps .sss__h{color:var(--sss-heading)}.sss__sub{margin-top:10px;color:var(--sss-muted)}.sss__grid{position:relative;display:flex;flex-direction:column;gap:32px}.sss__unit{display:flex;flex-direction:column;gap:14px}.sss__indicator,.sss__pills{display:none}.sss__group+.sss__group{margin-top:48px}.sss__group-title{margin:0 0 16px}.sss__step{display:block;width:100%;margin:0;padding:0;text-align:left;background:none;border:0;font:inherit;color:inherit}.sss__step-name{display:block;font-size:17px;font-weight:500;letter-spacing:-.2px;color:var(--sss-text);transition:color .35s ease}.sss__step-desc{display:block;margin-top:6px;line-height:calc(var(--font-body-line-height-scale, 1) * 1.6);color:var(--sss-text);transition:opacity .35s ease}.sss__media{--sss-ratio: var(--sss-media-ratio, var(--sss-panel-ratio));position:relative;aspect-ratio:var(--sss-ratio);border-radius:var(--sss-radius, 16px);overflow:hidden;background-color:var(--sss-bg)}.sss__video,.sss__image,.sss__placeholder{display:block;width:100%;height:100%;object-fit:contain}.sss__placeholder{background-image:repeating-linear-gradient(135deg,#ffffff0a 0 12px,#fff0 12px 24px)}@media(max-width:749px){soulog-sticky-steps[data-ready] .sss__step,soulog-sticky-steps[data-ready] .sss__media{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}soulog-sticky-steps[data-ready] .sss__step.is-in,soulog-sticky-steps[data-ready] .sss__media.is-in{opacity:1;transform:none}}@media(min-width:750px){soulog-sticky-steps[data-ready] .sss__track{height:calc(100vh + var(--sss-scroll-h))}soulog-sticky-steps[data-ready] .sss__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}soulog-sticky-steps[data-ready] .sss__grid{display:grid;grid-template-columns:300px 1fr;grid-template-rows:repeat(var(--sss-rows),1fr);column-gap:52px;align-items:start}soulog-sticky-steps[data-ready] .sss__unit{display:contents}soulog-sticky-steps[data-ready] .sss__step{grid-column:1;padding:20px 0 20px 22px;border-top:1px solid rgba(0,0,0,.08);cursor:pointer;will-change:opacity,transform}soulog-sticky-steps[data-ready] .sss__step.is-on .sss__step-name{color:var(--sss-heading);font-weight:700}soulog-sticky-steps[data-ready] .sss__step-desc{opacity:.55}soulog-sticky-steps[data-ready] .sss__step.is-on .sss__step-desc{opacity:1}soulog-sticky-steps[data-ready] .sss__indicator{display:block;position:absolute;left:0;top:0;width:3px;height:0;border-radius:3px;background:var(--sss-accent);opacity:0;transition:top .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),opacity .3s ease}soulog-sticky-steps[data-ready] .sss__media{grid-column:2;grid-row:1 / -1;align-self:center;justify-self:stretch;width:100%;height:var(--sss-panel-h);max-height:calc(100vh - var(--sss-reserve));aspect-ratio:auto;opacity:0;transform-origin:left center;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),filter .5s ease;will-change:opacity,transform,filter}soulog-sticky-steps[data-ready][data-size-mode=aspect] .sss__media:not(.sss__media--ratio){height:auto;aspect-ratio:var(--sss-ratio)}soulog-sticky-steps[data-ready] .sss__media--ratio{justify-self:center;width:min(100%,calc((100vh - var(--sss-reserve)) * (var(--sss-ratio))));height:auto;max-height:none;aspect-ratio:var(--sss-ratio)}soulog-sticky-steps[data-ready] .sss__media.is-on{opacity:1}soulog-sticky-steps[data-ready] .sss__media.is-scrub{transition:none}soulog-sticky-steps[data-ready] .sss__pills{position:relative;display:flex;justify-content:center;gap:4px;width:fit-content;max-width:100%;margin:0 auto 28px;padding:5px;border-radius:999px;background:#0000000d}soulog-sticky-steps[data-ready] .sss__pill-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--sss-accent);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.3,.64,1),width .5s cubic-bezier(.34,1.3,.64,1),opacity .3s ease}soulog-sticky-steps[data-ready] .sss__pill{position:relative;z-index:1;margin:0;padding:10px 24px;border:0;border-radius:999px;background:none;font:inherit;font-weight:500;white-space:nowrap;color:var(--sss-text);cursor:pointer;transition:color .3s ease}soulog-sticky-steps[data-ready] .sss__pill.is-on{color:#fff}soulog-sticky-steps[data-ready] .sss__group-title{display:none}soulog-sticky-steps[data-ready] .sss__panels{display:grid;overflow:hidden}soulog-sticky-steps[data-ready] .sss__group{grid-area:1 / 1;margin-top:0;opacity:0;transform:translate(var(--sss-group-x, 100%));pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.33,1,.68,1);will-change:opacity,transform}soulog-sticky-steps[data-ready] .sss__group.is-on{opacity:1;transform:none;pointer-events:auto}}@media(prefers-reduced-motion:reduce){soulog-sticky-steps *,soulog-sticky-steps *:before,soulog-sticky-steps *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.sss__media--split{height:auto;aspect-ratio:auto}.sss__caps{display:flex;flex-direction:column;gap:.75rem;margin:.75rem 0 0;padding:0;list-style:none}.sss__cap{margin:0}.sss__cap-p{display:block;font-weight:400;line-height:1.45;color:var(--sss-heading)}.sss__cap-p+.sss__cap-p{margin-top:.6rem}soulog-sticky-steps[data-ready] .sss__caps{position:absolute;left:var(--sss-caps-left, 50%);right:var(--sss-caps-right, 6%);top:50%;transform:translateY(-50%);margin:0}soulog-sticky-steps[data-ready] .sss__cap{position:absolute;inset:auto 0;top:50%;transform:translateY(calc(-50% + 6px));opacity:0;pointer-events:none;transition:opacity .32s ease,transform .32s cubic-bezier(.22,1,.36,1)}soulog-sticky-steps[data-ready] .sss__cap.is-on{opacity:1;transform:translateY(-50%);pointer-events:auto}@media(prefers-reduced-motion:reduce){soulog-sticky-steps[data-ready] .sss__cap,soulog-sticky-steps[data-ready] .sss__cap.is-on{transition:none;transform:translateY(-50%)}}
/*# sourceMappingURL=/cdn/shop/t/53/assets/soulog-sticky-steps.css.map */