/** * Reels Showcase — esalespage/reels. * * Mobile-first (base = phone, 768 tablet, 1024 computer). Sizes arrive as * --rl-* custom properties from the block root; private ones are --_name. * * Who owns which transform, so effects never fight: * .espt-rl-it `transform` → the layout (centre zoom, coverflow, fan) * .espt-rl-it `translate / scale / rotate` → entrance, polaroid / tape tilt * .espt-rl-card `transform` → hover effect * .espt-rl-card `translate` → the "float" design's loop * .espt-rl-img `transform` → hover zoom of the cover * * The lightbox (.espt-rl-lb) is appended to by reels.js, so its rules * are NOT under .espt-block-reels. */ @property --rl-ang { syntax: ""; inherits: false; initial-value: 0deg; } /* ------------------------------------------------------------------ root */ .espt-block-reels { margin-bottom: 24px; } .espt-block-reels.is-bleed-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .espt-block-reels .espt-rl { --_accent: var(--rl-accent, var(--bd-primary, #16a34a)); --_ga: var(--rl-ga, #f59e0b); --_gb: var(--rl-gb, #ec4899); --_r: var(--rl-r, 18px); --_gap: var(--rl-gap, 10px); --_pv: var(--rl-pv, 2); --_ratio: 9 / 16; --_cap-c: var(--rl-cap-c, #fff); --_shade: var(--rl-cap-bg, #000); --_z: calc(var(--rl-zoom, 22) / 100); min-width: 0; position: relative; } .espt-block-reels.is-ratio-3-4 .espt-rl { --_ratio: 3 / 4; } .espt-block-reels.is-ratio-4-5 .espt-rl { --_ratio: 4 / 5; } .espt-block-reels.is-ratio-1-1 .espt-rl { --_ratio: 1 / 1; } /* --------------------------------------------------------------- heading */ .espt-block-reels .espt-rl-head { margin: 0 auto var(--rl-hg, 26px); max-width: 760px; padding: 0 16px; text-align: center; } .espt-block-reels.is-text-align-left .espt-rl-head { margin-left: 0; text-align: left; } .espt-block-reels.is-text-align-right .espt-rl-head { margin-right: 0; text-align: right; } .espt-block-reels:not(.is-bleed-full) .espt-rl-head { padding: 0; } .espt-block-reels .espt-rl-eye { background: color-mix(in srgb, var(--_accent) 12%, transparent); border-radius: 999px; color: var(--_accent); display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; margin-bottom: 10px; padding: .4em 1em; text-transform: uppercase; } .espt-block-reels .espt-rl-h { color: var(--rl-head-c, var(--bd-ink, #0f172a)); font-size: var(--rl-hs, 23px); font-weight: 800; line-height: 1.25; margin: 0; overflow-wrap: anywhere; text-wrap: balance; } .espt-block-reels .espt-rl-h strong { color: var(--_accent); font-weight: inherit; } .espt-block-reels .espt-rl-sub { color: var(--rl-sub-c, var(--bd-muted, #64748b)); font-size: 15px; line-height: 1.6; margin: 8px 0 0; } /* ------------------------------------------------------------ the card */ .espt-block-reels .espt-rl-stage { min-width: 0; position: relative; } .espt-block-reels .espt-rl-it { display: flex; flex-direction: column; min-width: 0; position: relative; } .espt-block-reels .espt-rl-card { -webkit-tap-highlight-color: transparent; appearance: none; aspect-ratio: var(--_ratio); background: var(--rl-card-bg, #0f172a); border: 0; border-radius: var(--_r); color: var(--_cap-c); cursor: pointer; display: block; font: inherit; margin: 0; overflow: hidden; padding: 0; position: relative; text-align: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, opacity .45s ease, filter .45s ease; width: 100%; } .espt-block-reels .espt-rl-card:focus-visible { outline: 3px solid var(--_accent); outline-offset: 3px; } .espt-block-reels .espt-rl-m { border-radius: inherit; display: block; inset: 0; overflow: hidden; position: absolute; } .espt-block-reels .espt-rl-m picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; } .espt-block-reels .espt-rl-img, .espt-block-reels .espt-rl-pv { display: block; height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; width: 100%; } /* A preview video lies over its cover and shows only while it plays. */ .espt-block-reels .espt-rl-img + .espt-rl-pv, .espt-block-reels picture + .espt-rl-pv { opacity: 0; } .espt-block-reels .espt-rl-it.is-previewing .espt-rl-pv { opacity: 1; } /* Facebook gives no thumbnail: a brand-coloured stand-in. */ .espt-block-reels .espt-rl-ph { align-items: center; background: linear-gradient(160deg, #1877f2, #0b3d91); color: rgba(255, 255, 255, .5); display: flex; inset: 0; justify-content: center; position: absolute; } .espt-block-reels .espt-rl-ph svg { height: 34%; width: 34%; } .espt-block-reels .espt-rl-sh { background: linear-gradient(0deg, color-mix(in srgb, var(--_shade) 82%, transparent) 0%, color-mix(in srgb, var(--_shade) 30%, transparent) 38%, transparent 62%); inset: 0; pointer-events: none; position: absolute; transition: opacity .4s ease; } .espt-block-reels .espt-rl-fx { display: none; } /* tag, source mark */ .espt-block-reels .espt-rl-tag { background: var(--rl-tag-bg, var(--_accent)); border-radius: 999px; color: var(--rl-tag-c, #fff); font-size: 10.5px; font-weight: 800; left: 10px; letter-spacing: .04em; line-height: 1; max-width: calc(100% - 52px); overflow: hidden; padding: 5px 9px; position: absolute; text-overflow: ellipsis; top: 10px; white-space: nowrap; z-index: 2; } .espt-block-reels .espt-rl-src { -webkit-backdrop-filter: blur(6px); align-items: center; backdrop-filter: blur(6px); background: rgba(0, 0, 0, .45); border-radius: 50%; color: #fff; display: flex; height: 26px; justify-content: center; position: absolute; right: 10px; top: 10px; width: 26px; z-index: 2; } .espt-block-reels .espt-rl-src svg { height: 14px; width: 14px; } /* play button */ .espt-block-reels .espt-rl-play { --_ps: clamp(40px, 26%, 58px); -webkit-backdrop-filter: blur(8px); align-items: center; aspect-ratio: 1; backdrop-filter: blur(8px); background: var(--rl-play-bg, rgba(255, 255, 255, .22)); border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; color: var(--rl-play-c, #fff); display: flex; justify-content: center; left: 50%; position: absolute; top: 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .35s ease, background-color .35s ease; translate: -50% -50%; width: var(--_ps); z-index: 2; } .espt-block-reels .espt-rl-play svg { height: 44%; margin-left: 6%; width: 44%; } .espt-block-reels .espt-rl-card:hover .espt-rl-play { transform: scale(1.12); } .espt-block-reels.is-play-style-solid .espt-rl-play { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--rl-play-bg, var(--_accent)); border-color: transparent; } .espt-block-reels.is-play-style-square .espt-rl-play { border-radius: 28%; } .espt-block-reels.is-play-style-pulse .espt-rl-play { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--rl-play-bg, #fff); border-color: transparent; color: var(--rl-play-c, var(--_accent)); } .espt-block-reels.is-play-style-pulse .espt-rl-play::before { animation: espt-rl-ring 2s ease-out infinite; border: 2px solid var(--rl-play-bg, #fff); border-radius: 50%; content: ""; inset: -2px; position: absolute; } @keyframes espt-rl-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } } .espt-block-reels.is-play-style-corner .espt-rl-play { --_ps: 32px; bottom: 10px; left: auto; right: 10px; top: auto; translate: 0 0; } .espt-block-reels.is-play-style-hover .espt-rl-play { opacity: 0; } .espt-block-reels.is-play-style-hover .espt-rl-card:hover .espt-rl-play, .espt-block-reels.is-play-style-hover .espt-rl-card:focus-visible .espt-rl-play, .espt-block-reels.is-play-style-hover .espt-rl-it.is-active .espt-rl-play { opacity: 1; } .espt-block-reels.is-play-style-none .espt-rl-play { display: none; } /* caption over the video */ .espt-block-reels .espt-rl-cap { bottom: 0; display: flex; flex-direction: column; gap: 4px; left: 0; padding: 12px; pointer-events: none; position: absolute; right: 0; transition: opacity .4s ease, transform .4s ease; z-index: 2; } .espt-block-reels.is-play-style-corner .espt-rl-cap { padding-right: 50px; } .espt-block-reels .espt-rl-tt { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-size: var(--rl-ts, 13px); font-weight: 700; line-clamp: 2; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; } .espt-block-reels .espt-rl-tx { -webkit-box-orient: vertical; -webkit-line-clamp: var(--rl-tl, 2); display: -webkit-box; font-size: var(--rl-xs, 11px); line-clamp: var(--rl-tl, 2); line-height: 1.45; opacity: .88; overflow: hidden; overflow-wrap: anywhere; } .espt-block-reels .espt-rl-au { align-items: center; display: flex; gap: 6px; margin-top: 2px; min-width: 0; } .espt-block-reels .espt-rl-av { align-items: center; background: linear-gradient(135deg, var(--_ga), var(--_gb)); border-radius: 50%; color: #fff; display: flex; flex: none; font-size: 10px; font-weight: 800; height: 20px; justify-content: center; width: 20px; } .espt-block-reels .espt-rl-an { font-size: var(--rl-xs, 11px); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .espt-block-reels .espt-rl-stars { color: var(--rl-star, #fbbf24); font-size: 11px; letter-spacing: 1px; line-height: 1; } .espt-block-reels .espt-rl-stars i { font-style: normal; opacity: .3; } .espt-block-reels .espt-rl-pc { align-items: center; background: rgba(255, 255, 255, .94); border-radius: 9px; color: #0f172a; display: flex; gap: 6px; margin-top: 4px; min-width: 0; padding: 4px 8px 4px 4px; } .espt-block-reels .espt-rl-pc img { border-radius: 6px; flex: none; height: 28px; object-fit: cover; width: 28px; } .espt-block-reels .espt-rl-pn { flex: 1 1 auto; font-size: 11px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .espt-block-reels .espt-rl-pp { color: var(--bd-primary, #15803d); flex: none; font-size: 11px; font-weight: 800; white-space: nowrap; } .espt-block-reels .espt-rl-pp del { display: none; } .espt-block-reels .espt-rl-pp ins { background: none; text-decoration: none; } .espt-block-reels .espt-rl-pp .screen-reader-text { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; } @media (hover: hover) and (pointer: fine) { .espt-block-reels.is-cap-mode-hover .espt-rl-cap, .espt-block-reels.is-cap-mode-hover .espt-rl-sh { opacity: 0; } .espt-block-reels.is-cap-mode-hover .espt-rl-cap { transform: translateY(10px); } .espt-block-reels.is-cap-mode-hover .espt-rl-card:hover .espt-rl-cap, .espt-block-reels.is-cap-mode-hover .espt-rl-card:focus-visible .espt-rl-cap, .espt-block-reels.is-cap-mode-hover .espt-rl-it.is-active .espt-rl-cap { opacity: 1; transform: none; } .espt-block-reels.is-cap-mode-hover .espt-rl-card:hover .espt-rl-sh, .espt-block-reels.is-cap-mode-hover .espt-rl-card:focus-visible .espt-rl-sh, .espt-block-reels.is-cap-mode-hover .espt-rl-it.is-active .espt-rl-sh { opacity: 1; } } /* caption under the card */ .espt-block-reels .espt-rl-below { color: var(--rl-cap-c, var(--bd-ink, #0f172a)); display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 2px 0; } .espt-block-reels .espt-rl-below .espt-rl-tx { opacity: .72; } .espt-block-reels .espt-rl-below .espt-rl-pc { background: color-mix(in srgb, currentColor 7%, transparent); color: inherit; } /* shadow */ .espt-block-reels.is-shadow-soft .espt-rl-card { box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .45); } .espt-block-reels.is-shadow-strong .espt-rl-card { box-shadow: 0 24px 46px -18px rgba(15, 23, 42, .65); } .espt-block-reels.is-shadow-glow .espt-rl-card { box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--_accent) 75%, transparent); } /* An inline player sits exactly over its card (reels.js sizes it). */ .espt-block-reels .espt-rl-player { background: #000; border-radius: var(--_r); overflow: hidden; position: absolute; z-index: 5; } .espt-block-reels .espt-rl-player iframe, .espt-block-reels .espt-rl-player video { border: 0; display: block; height: 100%; object-fit: cover; width: 100%; } .espt-block-reels .espt-rl-player-x { align-items: center; background: rgba(0, 0, 0, .6); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 16px; height: 28px; justify-content: center; line-height: 1; padding: 0; position: absolute; right: 8px; top: 8px; width: 28px; z-index: 2; } /* ========================================================= CARD DESIGNS */ /* 03 glass caption */ .espt-block-reels.is-card-glass .espt-rl-sh { opacity: 0; } .espt-block-reels.is-card-glass .espt-rl-cap { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); background: color-mix(in srgb, var(--rl-cap-bg, #0f172a) 42%, transparent); border: 1px solid rgba(255, 255, 255, .28); border-radius: calc(var(--_r) * .6); bottom: 8px; left: 8px; padding: 9px 10px; right: 8px; } /* 04 phone frame */ .espt-block-reels.is-card-phone .espt-rl-card { --_r: calc(var(--rl-r, 18px) + 10px); border: 5px solid var(--rl-card-bg, #0b0f19); box-shadow: 0 0 0 1.5px #334155, 0 18px 38px -16px rgba(15, 23, 42, .6); } .espt-block-reels.is-card-phone .espt-rl-card::before { background: var(--rl-card-bg, #0b0f19); border-radius: 0 0 10px 10px; content: ""; height: 11px; left: 50%; position: absolute; top: 0; translate: -50% 0; width: 34%; z-index: 3; } .espt-block-reels.is-card-phone .espt-rl-tag, .espt-block-reels.is-card-phone .espt-rl-src { top: 18px; } /* 05 story ring, 11 spinning border: the border IS the background's border-box */ .espt-block-reels.is-card-ring .espt-rl-card, .espt-block-reels.is-card-spin .espt-rl-card { background: linear-gradient(var(--rl-card-bg, #0f172a), var(--rl-card-bg, #0f172a)) padding-box, linear-gradient(135deg, var(--_ga), var(--_gb)) border-box; border: 3px solid transparent; } .espt-block-reels.is-card-ring .espt-rl-m, .espt-block-reels.is-card-spin .espt-rl-m { border-radius: calc(var(--_r) - 3px); inset: 2px; } .espt-block-reels.is-card-spin .espt-rl-card { animation: espt-rl-spin 4s linear infinite; background: linear-gradient(var(--rl-card-bg, #0f172a), var(--rl-card-bg, #0f172a)) padding-box, conic-gradient(from var(--rl-ang), var(--_ga), var(--_gb), var(--_accent), var(--_ga)) border-box; } @keyframes espt-rl-spin { to { --rl-ang: 360deg; } } /* 07 neon */ .espt-block-reels.is-card-neon .espt-rl-card { border: 2px solid var(--_accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--_accent) 40%, transparent), 0 0 22px color-mix(in srgb, var(--_accent) 65%, transparent), inset 0 0 18px color-mix(in srgb, var(--_accent) 35%, transparent); } .espt-block-reels.is-card-neon .espt-rl-tt { text-shadow: 0 0 10px var(--_accent); } /* 08 brutalist */ .espt-block-reels.is-card-brutal .espt-rl-card { --_r: 0px; border: 3px solid #0b0f19; box-shadow: 6px 6px 0 #0b0f19; } .espt-block-reels.is-card-brutal .espt-rl-tag { border-radius: 0; left: 0; top: 0; } .espt-block-reels.is-card-brutal .espt-rl-it { padding: 0 6px 6px 0; } /* 09 minimal */ .espt-block-reels.is-card-minimal .espt-rl-cap, .espt-block-reels.is-card-minimal .espt-rl-sh, .espt-block-reels.is-card-minimal .espt-rl-tag { display: none; } /* 12 floating card, big play */ .espt-block-reels.is-card-float .espt-rl-card { animation: espt-rl-float 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); box-shadow: 0 26px 44px -20px rgba(15, 23, 42, .6); } .espt-block-reels.is-card-float .espt-rl-play { --_ps: clamp(48px, 34%, 76px); } .espt-block-reels.is-card-float .espt-rl-it { padding: 10px 0 14px; } @keyframes espt-rl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } /* the framed family: the frame is the item, the caption sits inside it */ .espt-block-reels.is-card-polaroid .espt-rl-it, .espt-block-reels.is-card-tape .espt-rl-it, .espt-block-reels.is-card-review .espt-rl-it, .espt-block-reels.is-card-dark .espt-rl-it { background: var(--rl-card-bg, #fff); border-radius: calc(var(--_r) * .7); box-shadow: 0 14px 30px -16px rgba(15, 23, 42, .45); } .espt-block-reels.is-card-polaroid .espt-rl-card, .espt-block-reels.is-card-tape .espt-rl-card, .espt-block-reels.is-card-review .espt-rl-card, .espt-block-reels.is-card-dark .espt-rl-card { box-shadow: none; } /* With the text under the card there is nothing on the video to shade. */ .espt-block-reels.is-card-below .espt-rl-sh, .espt-block-reels.is-card-polaroid .espt-rl-sh, .espt-block-reels.is-card-tape .espt-rl-sh, .espt-block-reels.is-card-review .espt-rl-sh, .espt-block-reels.is-card-dark .espt-rl-sh { opacity: 0; } /* 06 polaroid, 13 taped photo */ .espt-block-reels.is-card-polaroid .espt-rl-it, .espt-block-reels.is-card-tape .espt-rl-it { border-radius: 4px; padding: 7px 7px 0; rotate: calc((mod(var(--i, 0), 2) * 2 - 1) * 1.6deg); } @supports not (rotate: calc(mod(3, 2) * 1deg)) { .espt-block-reels.is-card-polaroid .espt-rl-it:nth-child(odd), .espt-block-reels.is-card-tape .espt-rl-it:nth-child(odd) { rotate: -1.6deg; } .espt-block-reels.is-card-polaroid .espt-rl-it:nth-child(even), .espt-block-reels.is-card-tape .espt-rl-it:nth-child(even) { rotate: 1.6deg; } } .espt-block-reels.is-card-polaroid .espt-rl-card, .espt-block-reels.is-card-tape .espt-rl-card { --_r: 2px; } .espt-block-reels.is-card-polaroid .espt-rl-below, .espt-block-reels.is-card-tape .espt-rl-below { min-height: 40px; padding: 9px 4px 11px; text-align: center; } .espt-block-reels.is-card-polaroid .espt-rl-below .espt-rl-au, .espt-block-reels.is-card-tape .espt-rl-below .espt-rl-au { justify-content: center; } .espt-block-reels.is-card-tape .espt-rl-it::before { background: color-mix(in srgb, var(--_ga) 55%, rgba(255, 255, 255, .6)); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); content: ""; height: 20px; left: 50%; opacity: .85; position: absolute; rotate: -3deg; top: -9px; translate: -50% 0; width: 42%; z-index: 4; } /* 10 customer review */ .espt-block-reels.is-card-review .espt-rl-it { overflow: hidden; } .espt-block-reels.is-card-review .espt-rl-card { border-radius: calc(var(--_r) * .7) calc(var(--_r) * .7) 0 0; } .espt-block-reels.is-card-review .espt-rl-below { border-top: 3px solid var(--_accent); padding: 10px 11px 12px; } .espt-block-reels.is-card-review .espt-rl-below .espt-rl-stars { font-size: 13px; } .espt-block-reels.is-card-review .espt-rl-below .espt-rl-au { order: -1; } .espt-block-reels.is-card-review .espt-rl-below .espt-rl-av { height: 26px; width: 26px; font-size: 12px; } .espt-block-reels.is-card-review .espt-rl-below .espt-rl-an { font-size: 13px; font-weight: 700; } /* 14 dark panel */ .espt-block-reels.is-card-dark .espt-rl-it { background: var(--rl-card-bg, #0b0f19); overflow: hidden; } .espt-block-reels.is-card-dark .espt-rl-card { border-radius: calc(var(--_r) * .7) calc(var(--_r) * .7) 0 0; } .espt-block-reels.is-card-dark .espt-rl-below { color: var(--rl-cap-c, #fff); padding: 10px 11px 12px; } /* ============================================================== LAYOUTS */ /* ---- 01–03 the carousels: a native scroll-snap row ---- */ .espt-block-reels.is-layout-slider .espt-rl-vp, .espt-block-reels.is-layout-zoom .espt-rl-vp, .espt-block-reels.is-layout-coverflow .espt-rl-vp, .espt-block-reels.is-layout-stories .espt-rl-vp { -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; /* Room for shadows, the hover lift and tilted frames — overflow-y is clipped the moment overflow-x scrolls. */ padding: 14px 0 26px; scroll-snap-type: x mandatory; scrollbar-width: none; } /* offsetLeft of a card is measured from here (reels.js). It is also the container the card widths are a share of: 100cqw = this row's width, which — unlike a percentage — does not change when the track gets spacers. */ .espt-block-reels .espt-rl-vp { container-type: inline-size; position: relative; } .espt-block-reels .espt-rl-vp::-webkit-scrollbar { display: none; } /* Fewer reels than fit across: nothing to slide, so they sit in the middle. */ .espt-block-reels.is-layout-slider .espt-rl.is-static .espt-rl-track { justify-content: center; } /* While reels.js glides to a card, snapping would fight the animation. */ .espt-block-reels .espt-rl-vp.is-gliding { scroll-snap-type: none; } .espt-block-reels .espt-rl-vp.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .espt-block-reels .espt-rl-vp.is-dragging .espt-rl-card { pointer-events: none; } .espt-block-reels.is-layout-slider .espt-rl-track, .espt-block-reels.is-layout-zoom .espt-rl-track, .espt-block-reels.is-layout-coverflow .espt-rl-track { --_iw: calc((100cqw - (var(--_pv) - 1) * var(--_gap)) / var(--_pv)); display: flex; gap: var(--_gap); } .espt-block-reels.is-layout-slider .espt-rl-it, .espt-block-reels.is-layout-zoom .espt-rl-it, .espt-block-reels.is-layout-coverflow .espt-rl-it { flex: 0 0 var(--_iw); scroll-snap-align: start; } .espt-block-reels.is-bleed-full.is-layout-slider .espt-rl-track::before, .espt-block-reels.is-bleed-full.is-layout-slider .espt-rl-track::after { content: ""; flex: 0 0 max(0px, calc(16px - var(--_gap))); } .espt-block-reels.is-bleed-full.is-layout-slider .espt-rl-track { --_iw: calc((100cqw - 32px - (var(--_pv) - 1) * var(--_gap)) / var(--_pv)); } .espt-block-reels.is-bleed-full.is-layout-slider .espt-rl-vp { scroll-padding: 0 16px; } /* A slice of the next card on phones says "swipe me". */ @media (max-width: 767px) { .espt-block-reels.is-layout-slider.is-peek .espt-rl-track { --_iw: calc((100cqw - var(--_pv) * var(--_gap)) / (var(--_pv) + .38)); } } /* 02 centre zoom, 03 coverflow: cards snap to the middle; reels.js writes --d (0 in the middle … 1 one card away, and so on) and --s (its sign). A spacer at each end lets the first and the last card reach the middle (spacers, not padding: a flex row's end padding is not scrollable everywhere). */ .espt-block-reels.is-layout-zoom .espt-rl-track::before, .espt-block-reels.is-layout-zoom .espt-rl-track::after, .espt-block-reels.is-layout-coverflow .espt-rl-track::before, .espt-block-reels.is-layout-coverflow .espt-rl-track::after { content: ""; flex: 0 0 max(0px, calc((100cqw - var(--_iw)) / 2 - var(--_gap))); } .espt-block-reels.is-layout-zoom .espt-rl-it, .espt-block-reels.is-layout-coverflow .espt-rl-it { --_k: min(var(--d, 1), 1.6); /* A shrunken card leaves air on both sides. Each card is pulled toward the middle by the air its inner neighbours left plus half its own: that grows with the square of the distance while the card is still shrinking (up to 1.6 cards out), and steadily after that. */ --_pull: calc(var(--_z) * 50 * var(--_k) * var(--_k) + max(0, var(--d, 1) - 1.6) * var(--_z) * 160); scroll-snap-align: center; transform: translateX(calc(var(--s, 0) * var(--_pull) * -1%)) scale(calc(1 - var(--_k) * var(--_z))); transform-origin: 50% 50%; will-change: transform; z-index: calc(10 - var(--zi, 0)); } .espt-block-reels.is-layout-zoom .espt-rl-vp, .espt-block-reels.is-layout-coverflow .espt-rl-vp { padding: 22px 0 34px; } .espt-block-reels.is-layout-zoom.is-dim-sides .espt-rl-card, .espt-block-reels.is-layout-coverflow.is-dim-sides .espt-rl-card { filter: brightness(calc(1 - min(var(--d, 1), 1.4) * .34)) saturate(calc(1 - min(var(--d, 1), 1) * .3)); } .espt-block-reels.is-layout-coverflow .espt-rl-track { perspective: 1400px; } .espt-block-reels.is-layout-coverflow .espt-rl-it { transform: translateX(calc(var(--s, 0) * (var(--_pull) + var(--_k) * 9) * -1%)) rotateY(calc(var(--s, 0) * min(var(--d, 1), 1.2) * -38deg)) scale(calc(1 - var(--_k) * var(--_z))); } /* Before reels.js has measured anything, the first card is "the middle". */ .espt-block-reels.is-layout-zoom .espt-rl-it:first-child:not([style*="--d"]), .espt-block-reels.is-layout-coverflow .espt-rl-it:first-child:not([style*="--d"]) { --d: 0; } /* ---- 04–05 endless auto-scroll ---- */ .espt-block-reels.is-layout-marquee .espt-rl-vp, .espt-block-reels.is-layout-marquee-2 .espt-rl-vp { display: flex; flex-direction: column; gap: var(--_gap); overflow: hidden; padding: 14px 0 26px; } .espt-block-reels .espt-rl-belt { animation: espt-rl-marq var(--rl-ms, 38s) linear infinite; display: flex; width: max-content; } .espt-block-reels .espt-rl-run { display: flex; flex: none; gap: var(--_gap); padding-right: var(--_gap); } .espt-block-reels.is-layout-marquee .espt-rl-it, .espt-block-reels.is-layout-marquee-2 .espt-rl-it { flex: 0 0 var(--rl-cw, 160px); width: var(--rl-cw, 160px); } .espt-block-reels.is-marquee-dir-right .espt-rl-belt { animation-direction: reverse; } .espt-block-reels.is-layout-marquee-2 .espt-rl-belt + .espt-rl-belt { animation-direction: reverse; } .espt-block-reels.is-layout-marquee-2.is-marquee-dir-right .espt-rl-belt + .espt-rl-belt { animation-direction: normal; } @keyframes espt-rl-marq { to { transform: translateX(-50%); } } .espt-block-reels.is-pause-hover .espt-rl-vp:hover .espt-rl-belt, .espt-block-reels.is-pause-hover .espt-rl-vp:focus-within .espt-rl-belt, .espt-block-reels .espt-rl.is-held .espt-rl-belt { animation-play-state: paused; } /* ---- 06–07 grids ---- */ .espt-block-reels.is-layout-grid .espt-rl-track, .espt-block-reels.is-layout-stagger .espt-rl-track { display: grid; gap: var(--_gap); grid-template-columns: repeat(var(--_pv), minmax(0, 1fr)); } .espt-block-reels.is-layout-stagger .espt-rl-track { padding-bottom: 28px; } .espt-block-reels.is-layout-stagger .espt-rl-it:nth-child(even) { top: 28px; } /* ---- 08 fan ---- */ .espt-block-reels.is-layout-fan .espt-rl-vp { -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; padding: 30px 16px 40px; scrollbar-width: none; } .espt-block-reels.is-layout-fan .espt-rl-track { display: flex; justify-content: safe center; margin: 0 auto; width: max-content; } .espt-block-reels.is-layout-fan .espt-rl-it { --_m: calc(var(--i, 0) - (var(--n, 5) - 1) / 2); /* As wide as asked, but never so wide that the whole hand overflows the row: n cards overlapping by 22% span 1 + (n − 1) × .78 card widths. */ --_fw: max(96px, min(var(--rl-cw, 160px), calc((100cqw - 56px) / (1 + (var(--n, 5) - 1) * .78)))); flex: 0 0 var(--_fw); margin-left: calc(var(--_fw) * -.22); transform: translateY(calc(var(--_m) * var(--_m) * 5px)) rotate(calc(var(--_m) * 6deg)); transform-origin: 50% 120%; transition: transform .5s cubic-bezier(.2, .7, .2, 1), z-index 0s .1s; width: var(--_fw); z-index: 1; } .espt-block-reels.is-layout-fan .espt-rl-it:first-child { margin-left: 0; } .espt-block-reels.is-layout-fan .espt-rl-it:hover, .espt-block-reels.is-layout-fan .espt-rl-it:focus-within { transform: translateY(-16px) rotate(0deg) scale(1.06); transition: transform .5s cubic-bezier(.2, .7, .2, 1), z-index 0s; z-index: 6; } /* ---- 09 spotlight ---- */ .espt-block-reels .espt-rl-spot { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .espt-block-reels .espt-rl-feat { margin: 0 auto; max-width: 300px; width: 100%; } .espt-block-reels.is-layout-spotlight .espt-rl-track { display: grid; } .espt-block-reels.is-layout-spotlight .espt-rl-it { grid-area: 1 / 1; opacity: 0; pointer-events: none; scale: .96; transition: opacity .5s ease, scale .5s cubic-bezier(.2, .7, .2, 1); visibility: hidden; } .espt-block-reels.is-layout-spotlight .espt-rl-it.is-active { opacity: 1; pointer-events: auto; scale: 1; visibility: visible; } .espt-block-reels .espt-rl-thumbs { -webkit-overflow-scrolling: touch; display: flex; gap: 10px; min-width: 0; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; } .espt-block-reels .espt-rl-th { align-items: center; appearance: none; background: var(--rl-card-bg, #fff); border: 1.5px solid var(--bd-line, #e2e8f0); border-radius: 14px; color: var(--rl-cap-c, var(--bd-ink, #0f172a)); cursor: pointer; display: flex; flex: 0 0 auto; font: inherit; gap: 10px; max-width: 230px; padding: 6px 12px 6px 6px; text-align: left; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .espt-block-reels .espt-rl-th:hover { transform: translateY(-2px); } .espt-block-reels .espt-rl-th.is-on { border-color: var(--_accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 20%, transparent); } .espt-block-reels .espt-rl-th:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; } .espt-block-reels .espt-rl-th-m { aspect-ratio: 9 / 16; background: #0f172a; border-radius: 9px; flex: none; overflow: hidden; position: relative; width: 38px; } .espt-block-reels .espt-rl-th-m .espt-rl-ph svg { height: 46%; width: 46%; } .espt-block-reels .espt-rl-th-m img, .espt-block-reels .espt-rl-th-m video { height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; } .espt-block-reels .espt-rl-th-t { display: grid; gap: 2px; min-width: 0; } .espt-block-reels .espt-rl-th .espt-rl-tt { -webkit-line-clamp: 1; line-clamp: 1; } .espt-block-reels .espt-rl-th .espt-rl-tx { -webkit-line-clamp: 1; line-clamp: 1; } @media (min-width: 768px) { .espt-block-reels .espt-rl-spot { align-items: start; gap: 28px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); margin: 0 auto; max-width: 900px; } .espt-block-reels .espt-rl-feat { max-width: none; } .espt-block-reels .espt-rl-thumbs { align-content: start; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 4px; } .espt-block-reels .espt-rl-th { max-width: none; } .espt-block-reels .espt-rl-th-m { width: 46px; } } /* ---- 10 story circles ---- */ .espt-block-reels.is-layout-stories .espt-rl-track { display: flex; gap: var(--_gap); justify-content: safe center; margin: 0 auto; padding: 0 4px; width: max-content; } .espt-block-reels.is-layout-stories .espt-rl-it { align-items: center; flex: 0 0 var(--rl-ss, 72px); gap: 6px; scroll-snap-align: start; width: var(--rl-ss, 72px); } .espt-block-reels.is-layout-stories .espt-rl-card { aspect-ratio: 1; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--_ga), var(--_gb)) border-box; border: 3px solid transparent; border-radius: 50%; box-shadow: none; } .espt-block-reels.is-layout-stories .espt-rl-m { border-radius: 50%; inset: 2px; } .espt-block-reels.is-layout-stories .espt-rl-sh, .espt-block-reels.is-layout-stories .espt-rl-tag, .espt-block-reels.is-layout-stories .espt-rl-src { display: none; } .espt-block-reels.is-layout-stories .espt-rl-play { --_ps: 34%; opacity: 0; } .espt-block-reels.is-layout-stories .espt-rl-card:hover .espt-rl-play { opacity: 1; } .espt-block-reels.is-layout-stories .espt-rl-card.is-seen { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#cbd5e1, #cbd5e1) border-box; } .espt-block-reels .espt-rl-sn { color: var(--rl-cap-c, var(--bd-ink, #0f172a)); font-size: 11.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* ---- edge fade ---- */ .espt-block-reels.is-edge-fade .espt-rl-vp { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } /* ========================================================= ARROWS, DOTS */ .espt-block-reels .espt-rl-nav { align-items: center; appearance: none; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 8px 22px -8px rgba(15, 23, 42, .45); color: #0f172a; cursor: pointer; display: none; height: 42px; justify-content: center; padding: 0; position: absolute; top: calc(50% - 6px); transition: transform .3s ease, opacity .3s ease, background-color .3s ease, color .3s ease; translate: 0 -50%; width: 42px; z-index: 12; } .espt-block-reels .espt-rl-nav.is-prev { left: 6px; } .espt-block-reels .espt-rl-nav.is-next { right: 6px; } .espt-block-reels .espt-rl-nav:hover { transform: scale(1.1); } .espt-block-reels .espt-rl-nav:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; } .espt-block-reels .espt-rl-nav[disabled] { cursor: default; opacity: .35; transform: none; } .espt-block-reels .espt-rl.is-static .espt-rl-nav, .espt-block-reels .espt-rl.is-static .espt-rl-dots { display: none; } .espt-block-reels.is-arrow-style-dark .espt-rl-nav { background: #0b0f19; color: #fff; } .espt-block-reels.is-arrow-style-glass .espt-rl-nav { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(15, 23, 42, .4); border: 1px solid rgba(255, 255, 255, .45); color: #fff; } .espt-block-reels.is-arrow-style-accent .espt-rl-nav { background: var(--_accent); color: #fff; } .espt-block-reels.is-arrow-style-square .espt-rl-nav { border-radius: 10px; } /* Side arrows are a mouse thing; on a phone the row is swiped. "Below" stays. */ @media (min-width: 768px) { .espt-block-reels.is-arrows .espt-rl-nav { display: flex; } .espt-block-reels:not(.is-bleed-full) .espt-rl-nav.is-prev { left: -8px; } .espt-block-reels:not(.is-bleed-full) .espt-rl-nav.is-next { right: -8px; } .espt-block-reels.is-bleed-full .espt-rl-nav.is-prev { left: 18px; } .espt-block-reels.is-bleed-full .espt-rl-nav.is-next { right: 18px; } } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-stage { display: flex; flex-wrap: wrap; gap: 0 12px; justify-content: center; } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-vp { flex: 0 0 100%; order: 0; } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-nav { box-shadow: none; border: 1.5px solid var(--bd-line, #e2e8f0); display: flex; height: 38px; position: static; translate: 0 0; width: 38px; } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-nav.is-prev { order: 1; } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-dots { align-self: center; margin: 0; order: 2; } .espt-block-reels.is-arrows.is-arrow-style-below .espt-rl-nav.is-next { order: 3; } .espt-block-reels .espt-rl-dots { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 2px; min-height: 12px; } .espt-block-reels .espt-rl-dot { background: color-mix(in srgb, var(--bd-ink, #0f172a) 22%, transparent); border-radius: 999px; cursor: pointer; height: 8px; transition: width .4s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; width: 8px; } .espt-block-reels .espt-rl-dot.is-on { background: var(--_accent); } .espt-block-reels.is-dots-pill .espt-rl-dot.is-on { width: 26px; } .espt-block-reels.is-dots-line .espt-rl-dot { border-radius: 2px; height: 3px; width: 22px; } .espt-block-reels .espt-rl-count { color: var(--bd-muted, #64748b); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 700; } .espt-block-reels .espt-rl-count b { color: var(--_accent); } /* ================================================================ HOVER */ @media (hover: hover) and (pointer: fine) { .espt-block-reels.is-hover-lift .espt-rl-card:hover { transform: translateY(-8px); } .espt-block-reels.is-hover-zoom .espt-rl-card:hover .espt-rl-img, .espt-block-reels.is-hover-zoom .espt-rl-card:hover .espt-rl-pv { transform: scale(1.09); } .espt-block-reels.is-hover-tilt .espt-rl-track { perspective: 1000px; } .espt-block-reels.is-hover-tilt .espt-rl-card:hover { transform: rotateY(-9deg) rotateX(4deg) translateY(-4px); } .espt-block-reels.is-hover-glow .espt-rl-card:hover { box-shadow: 0 0 0 2px var(--_accent), 0 18px 40px -12px color-mix(in srgb, var(--_accent) 80%, transparent); } .espt-block-reels.is-hover-shine .espt-rl-fx { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); display: block; inset: 0; pointer-events: none; position: absolute; transform: translateX(-120%); } .espt-block-reels.is-hover-shine .espt-rl-card:hover .espt-rl-fx { transform: translateX(120%); transition: transform .8s ease; } .espt-block-reels.is-hover-focus .espt-rl-track:hover .espt-rl-card { filter: brightness(.55) saturate(.7); transform: scale(.97); } .espt-block-reels.is-hover-focus .espt-rl-track:hover .espt-rl-card:hover { filter: none; transform: scale(1.03); } } /* ============================================================= ENTRANCE Hidden until reels.js adds .is-in (the block scrolled into view). The individual transform properties are used, so the layout's own `transform` on the same element is left alone. */ .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in] .espt-rl-it:not(.is-clone), .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in] .espt-rl-head > * { opacity: 0; } .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in].is-in .espt-rl-head > * { animation: espt-rl-in-up .7s cubic-bezier(.2, .7, .2, 1) backwards; opacity: 1; } .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in].is-in .espt-rl-head > :nth-child(2) { animation-delay: .08s; } .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in].is-in .espt-rl-head > :nth-child(3) { animation-delay: .16s; } .espt-block-reels:not(.is-anim-in-none) .espt-rl[data-rl-in].is-in .espt-rl-it:not(.is-clone) { animation: var(--_in, espt-rl-in-fade) .75s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.12s + min(var(--i, 0), 9) * .07s); opacity: 1; } /* In a marquee every copy is on screen at once: they simply fade together. */ .espt-block-reels.is-layout-marquee .espt-rl[data-rl-in] .espt-rl-belt, .espt-block-reels.is-layout-marquee-2 .espt-rl[data-rl-in] .espt-rl-belt { opacity: 0; transition: opacity .9s ease; } .espt-block-reels.is-layout-marquee .espt-rl[data-rl-in].is-in .espt-rl-belt, .espt-block-reels.is-layout-marquee-2 .espt-rl[data-rl-in].is-in .espt-rl-belt { opacity: 1; } .espt-block-reels.is-layout-marquee .espt-rl[data-rl-in] .espt-rl-it:not(.is-clone), .espt-block-reels.is-layout-marquee-2 .espt-rl[data-rl-in] .espt-rl-it:not(.is-clone) { animation: none; opacity: 1; } .espt-block-reels.is-anim-in-fade .espt-rl { --_in: espt-rl-in-fade; } .espt-block-reels.is-anim-in-up .espt-rl { --_in: espt-rl-in-up; } .espt-block-reels.is-anim-in-zoom .espt-rl { --_in: espt-rl-in-zoom; } .espt-block-reels.is-anim-in-flip .espt-rl { --_in: espt-rl-in-flip; } .espt-block-reels.is-anim-in-deal .espt-rl { --_in: espt-rl-in-deal; } @keyframes espt-rl-in-fade { from { opacity: 0; } } @keyframes espt-rl-in-up { from { opacity: 0; translate: 0 38px; } } @keyframes espt-rl-in-zoom { from { opacity: 0; scale: .78; } } @keyframes espt-rl-in-flip { from { opacity: 0; rotate: y 70deg; translate: 0 20px; } } @keyframes espt-rl-in-deal { from { opacity: 0; rotate: -14deg; translate: -60px 50px; } } /* =========================================================== BREAKPOINTS */ @media (min-width: 768px) { .espt-block-reels .espt-rl-tag { font-size: 11px; left: 12px; top: 12px; } .espt-block-reels .espt-rl-src { right: 12px; top: 12px; } .espt-block-reels .espt-rl-cap { padding: 14px; } .espt-block-reels .espt-rl-sub { font-size: 16px; } } /* A phone has no room to fan five cards: they become a gently tilted row. */ @media (max-width: 767px) { .espt-block-reels.is-layout-fan .espt-rl-track { gap: var(--_gap); justify-content: flex-start; } .espt-block-reels.is-layout-fan .espt-rl-it { --_fw: var(--rl-cw, 160px); margin-left: 0; transform: rotate(calc((mod(var(--i, 0), 2) * 2 - 1) * 2deg)); transform-origin: 50% 50%; } .espt-block-reels.is-layout-stories .espt-rl-track { justify-content: flex-start; } } /* ======================================================= REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { .espt-block-reels .espt-rl, .espt-block-reels .espt-rl *, .espt-block-reels .espt-rl *::before, .espt-block-reels .espt-rl *::after { animation: none !important; transition: none !important; } .espt-block-reels .espt-rl[data-rl-in] .espt-rl-it, .espt-block-reels .espt-rl[data-rl-in] .espt-rl-head > *, .espt-block-reels .espt-rl[data-rl-in] .espt-rl-belt { opacity: 1 !important; } /* An auto-scroll that may not move becomes a row the visitor scrolls. */ .espt-block-reels.is-layout-marquee .espt-rl-vp, .espt-block-reels.is-layout-marquee-2 .espt-rl-vp { overflow-x: auto; } .espt-block-reels .espt-rl-run[aria-hidden="true"] { display: none; } } /* ================================================================ LIGHTBOX Appended to : deliberately not under .espt-block-reels. */ html.espt-rl-lock, html.espt-rl-lock body { overflow: hidden !important; } .espt-rl-lb { --_accent: #16a34a; align-items: center; background: var(--rl-lb-bg, rgba(2, 6, 23, .94)); box-sizing: border-box; color: #fff; display: flex; inset: 0; justify-content: center; opacity: 0; overflow: hidden; position: fixed; transition: opacity .35s ease; z-index: 1000000; } .espt-rl-lb *, .espt-rl-lb *::before, .espt-rl-lb *::after { box-sizing: border-box; } .espt-rl-lb.is-open { opacity: 1; } .espt-rl-lb-bg { background-position: center; background-size: cover; filter: blur(46px) saturate(1.3) brightness(.5); inset: -60px; opacity: 0; position: absolute; transition: opacity .6s ease; } .espt-rl-lb-bg.is-on { opacity: .85; } .espt-rl-lb-shell { align-items: stretch; display: flex; flex-direction: column; height: 100%; max-width: 100%; position: relative; width: 100%; } .espt-rl-lb-stage { background: #000; flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; width: 100%; } .espt-rl-lb-slide { inset: 0; position: absolute; } .espt-rl-lb-slide iframe, .espt-rl-lb-slide video { border: 0; display: block; height: 100%; object-fit: contain; width: 100%; } .espt-rl-lb-slide video { background: #000; cursor: pointer; } .espt-rl-lb-slide.is-enter-next { animation: espt-rl-lb-up .45s cubic-bezier(.2, .7, .2, 1); } .espt-rl-lb-slide.is-enter-prev { animation: espt-rl-lb-down .45s cubic-bezier(.2, .7, .2, 1); } .espt-rl-lb-slide.is-leave-next { animation: espt-rl-lb-out-up .45s cubic-bezier(.2, .7, .2, 1) forwards; } .espt-rl-lb-slide.is-leave-prev { animation: espt-rl-lb-out-down .45s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes espt-rl-lb-up { from { opacity: .2; transform: translateY(100%); } } @keyframes espt-rl-lb-down { from { opacity: .2; transform: translateY(-100%); } } @keyframes espt-rl-lb-out-up { to { opacity: 0; transform: translateY(-40%) scale(.92); } } @keyframes espt-rl-lb-out-down { to { opacity: 0; transform: translateY(40%) scale(.92); } } /* paused / muted flash */ .espt-rl-lb-flash { align-items: center; background: rgba(0, 0, 0, .5); border-radius: 50%; display: flex; height: 74px; justify-content: center; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; transition: opacity .25s ease; translate: -50% -50%; width: 74px; z-index: 3; } .espt-rl-lb-flash svg { height: 32px; width: 32px; } .espt-rl-lb.is-paused .espt-rl-lb-flash { opacity: 1; } /* story progress */ .espt-rl-lb-bars { display: flex; gap: 4px; left: 12px; pointer-events: none; position: absolute; right: 12px; top: 10px; z-index: 4; } .espt-rl-lb-bar { background: rgba(255, 255, 255, .32); border-radius: 2px; flex: 1 1 0; height: 3px; overflow: hidden; } .espt-rl-lb-bar i { background: #fff; display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; width: 100%; } .espt-rl-lb-bar.is-done i { transform: scaleX(1); } .espt-rl-lb-bar.is-on.is-full i { transform: scaleX(1); transition: transform .4s ease; } .espt-rl-lb-btn { -webkit-backdrop-filter: blur(8px); align-items: center; appearance: none; backdrop-filter: blur(8px); background: rgba(15, 23, 42, .55); border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; cursor: pointer; display: flex; height: 42px; justify-content: center; padding: 0; position: absolute; transition: background-color .25s ease, transform .25s ease, opacity .25s ease; width: 42px; z-index: 6; } .espt-rl-lb-btn:hover { background: rgba(15, 23, 42, .85); transform: scale(1.08); } .espt-rl-lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .espt-rl-lb-btn[disabled] { cursor: default; opacity: .3; transform: none; } .espt-rl-lb-btn svg { height: 20px; width: 20px; } .espt-rl-lb-close { right: 12px; top: 22px; } .espt-rl-lb-mute { right: 12px; top: 72px; } .espt-rl-lb-mute[hidden] { display: none; } .espt-rl-lb-prev { right: 12px; top: calc(50% - 48px); } .espt-rl-lb-next { right: 12px; top: calc(50% + 6px); } .espt-rl-lb.is-single .espt-rl-lb-prev, .espt-rl-lb.is-single .espt-rl-lb-next, .espt-rl-lb.is-single .espt-rl-lb-bars { display: none; } /* info */ .espt-rl-lb-info { background: linear-gradient(0deg, rgba(2, 6, 23, .96), rgba(2, 6, 23, .82)); display: flex; flex: none; flex-direction: column; gap: 6px; max-height: 42%; overflow-y: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 5; } .espt-rl-lb-info:empty { display: none; } .espt-rl-lb-au { align-items: center; display: flex; font-size: 13px; font-weight: 700; gap: 8px; } .espt-rl-lb-av { align-items: center; background: linear-gradient(135deg, #f59e0b, #ec4899); border-radius: 50%; display: flex; flex: none; font-size: 13px; font-weight: 800; height: 30px; justify-content: center; width: 30px; } .espt-rl-lb-stars { color: #fbbf24; font-size: 12px; letter-spacing: 1px; margin-left: auto; } .espt-rl-lb-tt { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; overflow-wrap: anywhere; } .espt-rl-lb-tx { color: rgba(255, 255, 255, .8); font-size: 13.5px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; } .espt-rl-lb-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .espt-rl-lb-pc { align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; color: #fff; display: flex; flex: 1 1 180px; gap: 9px; min-width: 0; padding: 6px 10px 6px 6px; text-decoration: none; transition: background-color .25s ease; } .espt-rl-lb-pc:hover { background: rgba(255, 255, 255, .18); color: #fff; } .espt-rl-lb-pc img { border-radius: 8px; flex: none; height: 40px; object-fit: cover; width: 40px; } .espt-rl-lb-pc span { display: grid; gap: 1px; min-width: 0; } .espt-rl-lb-pc b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .espt-rl-lb-pc em { color: #86efac; font-size: 13px; font-style: normal; font-weight: 800; } .espt-rl-lb-cta { align-items: center; /* The accent, not the theme's button colour: that one is often dark, and this button sits on a near-black panel. */ background: var(--_accent); border-radius: min(var(--espt-btn-radius, 12px), 23px); color: #fff; display: inline-flex; flex: 1 1 140px; font-size: 15px; font-weight: 800; justify-content: center; min-height: 46px; padding: 10px 18px; text-align: center; text-decoration: none; transition: filter .25s ease, transform .25s ease; } .espt-rl-lb-cta:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); } .espt-rl-lb-cta:focus-visible, .espt-rl-lb-pc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* From the tablet up: the reel is a 9:16 column, the info a panel beside it. */ @media (min-width: 768px) { .espt-rl-lb-shell { flex-direction: row; gap: 0; height: min(calc(100vh - 48px), 880px); height: min(calc(100svh - 48px), 880px); justify-content: center; width: auto; } .espt-rl-lb-stage { aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); flex: none; height: 100%; width: auto; } .espt-rl-lb.has-info .espt-rl-lb-stage { border-radius: 18px 0 0 18px; } .espt-rl-lb-info { background: #0b1220; border-radius: 0 18px 18px 0; gap: 10px; justify-content: flex-end; max-height: none; padding: 26px 24px; width: min(340px, 34vw); } .espt-rl-lb-tt { font-size: 20px; } .espt-rl-lb-tx { font-size: 14.5px; } .espt-rl-lb-row { flex-direction: column; } .espt-rl-lb-pc, .espt-rl-lb-cta { flex: none; } .espt-rl-lb-close { position: fixed; right: 22px; top: 22px; } .espt-rl-lb-mute { right: 12px; top: 22px; } .espt-rl-lb-prev, .espt-rl-lb-next { height: 50px; position: fixed; top: 50%; translate: 0 -50%; width: 50px; } .espt-rl-lb-prev { left: 22px; right: auto; } .espt-rl-lb-next { right: 22px; } .espt-rl-lb-prev svg { rotate: -90deg; } .espt-rl-lb-next svg { rotate: -90deg; } .espt-rl-lb-slide.is-enter-next { animation-name: espt-rl-lb-left; } .espt-rl-lb-slide.is-enter-prev { animation-name: espt-rl-lb-right; } .espt-rl-lb-slide.is-leave-next { animation-name: espt-rl-lb-out-left; } .espt-rl-lb-slide.is-leave-prev { animation-name: espt-rl-lb-out-right; } } @keyframes espt-rl-lb-left { from { opacity: .2; transform: translateX(100%); } } @keyframes espt-rl-lb-right { from { opacity: .2; transform: translateX(-100%); } } @keyframes espt-rl-lb-out-left { to { opacity: 0; transform: translateX(-40%) scale(.92); } } @keyframes espt-rl-lb-out-right { to { opacity: 0; transform: translateX(40%) scale(.92); } } @media (prefers-reduced-motion: reduce) { .espt-rl-lb, .espt-rl-lb * { animation: none !important; transition: none !important; } }