/*! * webinar-player.css v1.4.0 * Sestek-style controller skin for webinar-player.js. The player injects the * DOM (.swp__bigplay, .swp__bar, …); this file owns the look. Accent colour * comes from --swp-accent (set per-player from data-webinar-accent, defaults * to --interactive--color-primary-base). * https://github.com/roicool/sestek */ /* ── No-CLS reservation ─────────────────────────────────────────── * Reserve the 16:9 box at CSS-parse time — BEFORE the (lazy) poster image * loads and BEFORE the JS adds .swp. This is what prevents Cumulative Layout * Shift: the box never grows, so nothing below it moves. * * MUST be loaded in (render-blocking) to apply before first paint. * The doubled [data-webinar][data-webinar] selector (specificity 0,2,0) and * height:auto are deliberate — they beat a single Webflow class that may set * a height, which would otherwise cancel aspect-ratio. */ [data-webinar][data-webinar] { position: relative; display: block; aspect-ratio: 16 / 9; height: auto; min-height: 0; overflow: hidden; border-radius: var(--radius--xl, 1rem); background: #000; } [data-webinar] [data-webinar-picture] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Accent fallback — JS sets --swp-accent inline per wrapper */ .swp { --swp-accent: var(--interactive--color-primary-base, #ec008c); --swp-bar-h: 3rem; isolation: isolate; /* own stacking context for the overlay layers */ } .swp, .swp * { box-sizing: border-box; } /* ── Big centre play button ───────────────────────────────────── */ .swp__bigplay { position: absolute; top: 50%; left: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; width: clamp(3.75rem, 5.5vw, 5.25rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius--full, 9999px); background: var(--swp-accent); color: #fff; cursor: pointer; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, box-shadow 0.3s ease; /* Premium: brand-tinted glow + crisp lift, soft white inner ring */ box-shadow: 0 12px 38px -6px color-mix(in srgb, var(--swp-accent) 60%, transparent), 0 4px 14px -4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .swp__bigplay svg { width: 42%; height: 42%; fill: currentColor; /* Path is bbox-centred; tiny nudge right for true optical centring */ transform: translateX(3%); } .swp__bigplay:hover { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 16px 46px -6px color-mix(in srgb, var(--swp-accent) 72%, transparent), 0 6px 18px -4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .swp__bigplay:active { transform: translate(-50%, -50%) scale(0.97); } .swp__bigplay:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* Soft pulsing halo behind the button to draw the eye (paused state only) */ .swp__bigplay::before { content: ""; position: absolute; inset: -18%; border-radius: inherit; background: var(--swp-accent); opacity: 0.25; z-index: -1; animation: swp-pulse 2.4s ease-out infinite; } @keyframes swp-pulse { 0% { transform: scale(0.85); opacity: 0.35; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* Hide the big button while playing */ .swp.is-playing .swp__bigplay { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); } /* Loading state: swap the triangle for a spinner while YouTube boots */ .swp.is-loading .swp__bigplay { pointer-events: none; } .swp.is-loading .swp__bigplay::before { animation: none; opacity: 0; } .swp.is-loading .swp__bigplay svg { display: none; } .swp.is-loading .swp__bigplay::after { content: ""; width: 42%; height: 42%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: swp-spin 0.7s linear infinite; } @keyframes swp-spin { to { transform: rotate(360deg); } } /* ── Bottom control bar (floating frosted glass) ──────────────── */ .swp__bar { position: absolute; inset: auto 0 0 0; z-index: 5; display: flex; align-items: center; gap: var(--spacing--3, 0.75rem); height: var(--swp-bar-h); margin: clamp(0.5rem, 1.4vw, 0.875rem); padding: 0 clamp(0.625rem, 1.4vw, 1rem); border-radius: var(--radius--full, 9999px); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(18, 18, 22, 0.46); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.65); opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; } /* Auto-hide while playing + idle */ .swp.is-idle .swp__bar { opacity: 0; transform: translateY(0.75rem); pointer-events: none; } /* ── Buttons in the bar ───────────────────────────────────────── */ .swp__btn { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius--base, 0.5rem); background: transparent; color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease; } .swp__btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Filled glyphs (play / pause) read better solid */ .swp__toggle svg { fill: currentColor; stroke: none; } .swp__btn:hover { background: rgba(255, 255, 255, 0.14); } .swp__btn:focus-visible { outline: 2px solid var(--swp-accent); outline-offset: 2px; } .swp__toggle:hover { color: var(--swp-accent); } /* ── Time labels ──────────────────────────────────────────────── */ .swp__time { flex: 0 0 auto; min-width: 3ch; font-family: var(--font--mono, var(--font--primary, inherit)); font-size: var(--text--xs, 0.75rem); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); user-select: none; } /* ── Scrubber ─────────────────────────────────────────────────── */ .swp__scrub { position: relative; flex: 1 1 auto; height: 0.375rem; display: flex; align-items: center; } .swp__scrub::before { content: ""; position: absolute; inset: 50% 0 auto 0; height: 0.25rem; transform: translateY(-50%); border-radius: var(--radius--full, 9999px); background: rgba(255, 255, 255, 0.25); } .swp__buffered, .swp__fill { position: absolute; left: 0; top: 50%; height: 0.25rem; transform: translateY(-50%); border-radius: var(--radius--full, 9999px); pointer-events: none; } .swp__buffered { width: 0; background: rgba(255, 255, 255, 0.35); } .swp__fill { width: 0; background: var(--swp-accent); } /* Native range sits on top — invisible track, draggable thumb */ .swp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .swp__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #fff; border: 2px solid var(--swp-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; } .swp__range::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #fff; border: 2px solid var(--swp-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .swp__range:hover::-webkit-slider-thumb, .swp__range:active::-webkit-slider-thumb { transform: scale(1.25); } .swp__range:focus-visible { outline: none; } .swp__range:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; } /* ── Fullscreen ───────────────────────────────────────────────── */ .swp.is-fullscreen { width: 100%; height: 100%; aspect-ratio: auto; /* fill the whole screen, no 16:9 lock */ border-radius: 0; /* sharp edges edge-to-edge */ display: flex; align-items: center; } /* Center the 16:9 video within a non-16:9 screen */ .swp.is-fullscreen [data-webinar-frame] { margin: auto; } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 767px) { .swp { --swp-bar-h: 2.75rem; } .swp__btn { width: 1.75rem; height: 1.75rem; } .swp__btn svg { width: 1.1rem; height: 1.1rem; } .swp__time { font-size: 0.7rem; } } /* ── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .swp__bigplay, .swp__bar, .swp__btn, .swp__range::-webkit-slider-thumb { transition: none; } .swp__bigplay::before { animation: none; } }