soulog-sticky-steps{--sss-bg: #f5f6f7;--sss-accent: #e8623b;--sss-panel-bg: #1c1c1e;--sss-panel-h: 480px;--sss-panel-ratio: 16 / 9;--sss-scroll-h: 255vh;--sss-n: 3;--sss-rows: 3;--sss-radius: 24px;--sss-heading: #0d0f12;--sss-text: #5a5f66;--sss-muted: #9aa0a6;--sss-reserve: 260px;display:block;background:var(--sss-bg);color:var(--sss-heading)}.sss__track{position:relative}.sss__inner{width:100%;max-width:var(--grid-width, 1140px);margin:0 auto;padding-inline:20px}@media only screen and (min-width:768px){.sss__inner{padding-inline:50px}}.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{display:none}.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;font-size:13px;line-height:1.45;color:var(--sss-muted);transition:opacity .35s ease}.sss__media{position:relative;aspect-ratio:var(--sss-panel-ratio);border-radius:var(--sss-radius);overflow:hidden;background:var(--sss-panel-bg)}.sss__media--empty{background:transparent}.sss__video,.sss__image,.sss__placeholder{display:block;width:100%;height:100%;object-fit:cover}.sss__placeholder{background-image:repeating-linear-gradient(135deg,#ffffff0a 0 12px,#fff0 12px 24px)}.sss__media-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;pointer-events:none}.sss__tag{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:2px;color:#ffffff8c;border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:16px}.sss__mono{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:13px;color:#ffffffa6}@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;width:100%;height:var(--sss-panel-h);max-height:calc(100vh - var(--sss-reserve));aspect-ratio:auto;opacity:0;transform-origin:left center;box-shadow:0 24px 60px -24px #00000073;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{height:auto;aspect-ratio:var(--sss-panel-ratio)}soulog-sticky-steps[data-ready] .sss__media.is-on{opacity:1}soulog-sticky-steps[data-ready] .sss__media.is-scrub{transition:none}}@media(prefers-reduced-motion:reduce){soulog-sticky-steps *,soulog-sticky-steps *:before,soulog-sticky-steps *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/*# sourceMappingURL=/cdn/shop/t/52/assets/soulog-sticky-steps.css.map */