.sl-stories { --sl-story-size: 92px; --sl-story-item: 114px; --sl-story-ring: var(--sl-teal, #00897B); position: relative; width: 100%; max-width: calc(1320px + 96px); margin-inline: auto; padding-inline: 48px; } .sl-stories__track { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 2px; } .sl-stories__track::-webkit-scrollbar { display: none; } .sl-story { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; width: var(--sl-story-item); scroll-snap-align: start; text-align: center; } .sl-story__ring { display: block; width: var(--sl-story-size); height: var(--sl-story-size); padding: 4px; border: 2px solid var(--sl-story-ring); border-radius: 100px; box-sizing: border-box; transition: transform .2s ease; } .sl-story__ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 100px; } .sl-story:hover .sl-story__ring { transform: translateY(-3px); } .sl-story__title { color: var(--sl-ink); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.02em; } .sl-story:hover .sl-story__title { color: var(--sl-teal); } .sl-stories__nav { position: absolute; inset-block-start: calc(var(--sl-story-size) / 2); transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: #fff; border: 1px solid var(--sl-line, #F3F3F3); border-radius: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); color: var(--sl-teal); cursor: pointer; transition: box-shadow .18s ease, border-color .18s ease, color .18s ease; } .sl-stories__nav:hover { border-color: var(--sl-teal); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } .sl-stories__nav[disabled] { cursor: default; color: var(--sl-muted, #828282); box-shadow: none; } .sl-stories__nav[disabled] svg { opacity: .5; } .sl-stories__nav[disabled]:hover { border-color: var(--sl-line, #F3F3F3); } .sl-stories__nav--prev { inset-inline-end: 24px; } .sl-stories__nav--next { inset-inline-start: 24px; } .sl-stories__nav--next svg { transform: scaleX(-1); } @media (max-width: 767px) { .sl-stories { padding-inline: var(--sl-gutter); --sl-story-size: 76px; --sl-story-item: 92px; } .sl-stories__nav { display: none; } } .sl-story--video { cursor: pointer; } .sl-story--video .sl-story__ring { box-shadow: 0 0 0 2px #fff inset; } body.sl-storyview-open { overflow: hidden; } .sl-storyview { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; } .sl-storyview[hidden] { display: none; } .sl-storyview__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 4, .88); backdrop-filter: blur(4px); } .sl-storyview__stage { position: relative; width: min(420px, 92vw); aspect-ratio: 9 / 16; max-height: 92vh; background: #000; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); } .sl-storyview__video, .sl-storyview__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sl-storyview__video[hidden], .sl-storyview__img[hidden] { display: none; } .sl-storyview__cta { position: absolute; inset-block-end: 24px; inset-inline: 24px; z-index: 3; display: block; padding: 12px 20px; border-radius: 100px; background: rgba(255, 255, 255, .92); color: var(--sl-ink, #040404); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; backdrop-filter: blur(6px); } .sl-storyview__cta[hidden] { display: none; } .sl-storyview__bars { position: absolute; inset-block-start: 12px; inset-inline: 12px; z-index: 3; display: flex; flex-direction: row; gap: 4px; direction: rtl; } .sl-storyview__bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; } .sl-storyview__bar i { display: block; width: 0; height: 100%; background: #fff; } .sl-storyview__bar.is-done i { width: 100%; } .sl-storyview__head { position: absolute; inset-block-start: 26px; inset-inline: 16px; z-index: 3; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; color: #fff; } .sl-storyview__title { font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } .sl-storyview__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 100px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .sl-storyview__close:hover { background: rgba(0, 0, 0, .6); } .sl-storyview__side { position: absolute; inset-block: 60px 0; width: 40%; border: 0; background: none; cursor: pointer; z-index: 2; } .sl-storyview__side--prev { inset-inline-start: 0; } .sl-storyview__side--next { inset-inline-end: 0; } @media (max-width: 560px) { .sl-storyview__stage { width: 100vw; height: 100vh; max-height: none; border-radius: 0; } }