/** * Step intro video modal for [33percent_carrousel]. * * Shell markup: includes/dashboard/views/step-video-modal.php * Behaviour: assets/step-video.js * * The modal is a direct child of and sits at z-index 10050, above the * mobile tab bar (1500) and the theme modals (2000), in line with the stacking * plan in CLAUDE.md. Every selector is scoped under .ur33-vidmodal so the theme * content-wrapper rules cannot reach into it. */ /* =================================================================== Overlay + panel =================================================================== */ .ur33-vidmodal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 3vw, 2rem); padding-bottom: max(clamp(0.5rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px)); font-family: var(--ur33-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); } .ur33-vidmodal[hidden] { display: none !important; } .ur33-vidmodal__backdrop { position: absolute; inset: 0; background: rgba(9, 12, 20, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ur33vid-fade 0.2s ease-out; } .ur33-vidmodal__panel { /* Portrait by default, because the step intros are filmed vertically. The real ratio is read from the video metadata (applyAspect in step-video.js), so a landscape clip still gets the wide layout. For a portrait clip the stage is sized by height and the panel width follows from it; a 9:16 video in a 940px panel would be mostly black bars. */ --ur33-vid-ar: 9 / 16; --ur33-vid-arf: 0.5625; --ur33-vid-h: min(66vh, calc(100vh - 190px)); position: relative; display: flex; flex-direction: column; width: min(calc(var(--ur33-vid-h) * var(--ur33-vid-arf)), 100%); min-width: min(320px, 100%); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); background: linear-gradient(135deg, #1E293B 0%, #2B3F5C 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ur33-radius-md, 16px); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6); overflow: hidden; color: #F8FAFC; animation: ur33vid-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes ur33vid-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ur33vid-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ur33-vidmodal__panel, .ur33-vidmodal__backdrop { animation: none; } } /* Page behind the modal must not scroll away under it. */ html.ur33-vidmodal-lock, html.ur33-vidmodal-lock body { overflow: hidden !important; } /* =================================================================== Header =================================================================== */ .ur33-vidmodal__head { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ur33-vidmodal__heading { min-width: 0; flex: 1 1 auto; } .ur33-vidmodal__eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ur33-secondary, #FFA726); } .ur33-vidmodal .ur33-vidmodal__title { margin: 0.15rem 0 0; padding: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ur33-vidmodal__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #F8FAFC; cursor: pointer; transition: background 0.15s ease-out, border-color 0.15s ease-out, transform 0.15s ease-out; } .ur33-vidmodal__close:hover { background: rgba(255, 107, 53, 0.85); border-color: transparent; transform: rotate(90deg); } /* =================================================================== Video stage =================================================================== */ /* A landscape clip keeps the classic wide player. */ .ur33-vidmodal__panel.is-landscape { --ur33-vid-ar: 16 / 9; --ur33-vid-h: 58vh; width: min(940px, 100%); } .ur33-vidmodal__stage { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: var(--ur33-vid-ar); max-height: var(--ur33-vid-h); background: #000; } .ur33-vidmodal__video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; } /* Transparantielabel: deze intro's zijn met AI gemaakt. Linksonder in het beeld, buiten de bediening, en niet klikbaar zodat het de speler niet in de weg zit. */ .ur33-vidmodal__ai { position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2; padding: 0.2rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(9, 12, 20, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #F8FAFC; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; pointer-events: none; } .ur33-vidmodal__bigplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; padding: 0 0 0 4px; border: none; border-radius: 50%; background: var(--ur33-gradient, linear-gradient(135deg, #FF6B35 0%, #FFA726 100%)); color: #FFFFFF; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .ur33-vidmodal__bigplay:hover { transform: translate(-50%, -50%) scale(1.06); } .ur33-vidmodal.is-playing .ur33-vidmodal__bigplay, .ur33-vidmodal.is-error .ur33-vidmodal__bigplay { opacity: 0; pointer-events: none; } .ur33-vidmodal__spinner { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid rgba(255, 255, 255, 0.22); border-top-color: var(--ur33-primary, #FF6B35); border-radius: 50%; animation: ur33vid-spin 0.8s linear infinite; } .ur33-vidmodal__spinner[hidden] { display: none; } @keyframes ur33vid-spin { to { transform: rotate(360deg); } } .ur33-vidmodal__error { position: absolute; inset: auto 1rem 1rem; margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--ur33-radius-sm, 12px); background: rgba(239, 68, 68, 0.92); color: #FFFFFF; font-size: 0.85rem; text-align: center; } .ur33-vidmodal__error[hidden] { display: none; } /* =================================================================== Control bar =================================================================== */ .ur33-vidmodal__bar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem 1.1rem 0.9rem; background: rgba(0, 0, 0, 0.28); } /* ── Progress bar ─────────────────────────────────────── */ .ur33-vidmodal__seek { position: relative; height: 20px; } .ur33-vidmodal__track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); transition: box-shadow 0.15s ease-out; } .ur33-vidmodal__buffer, .ur33-vidmodal__played { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 3px; } .ur33-vidmodal__buffer { background: rgba(255, 255, 255, 0.28); } .ur33-vidmodal__played { background: var(--ur33-gradient, linear-gradient(135deg, #FF6B35 0%, #FFA726 100%)); } .ur33-vidmodal__thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); pointer-events: none; } /* Invisible native range on top: keeps drag, click-to-seek and keyboard. */ .ur33-vidmodal__seek-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; } .ur33-vidmodal__seek-input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 20px; } .ur33-vidmodal__seek-input::-moz-range-thumb { width: 18px; height: 20px; border: none; } .ur33-vidmodal__seek:focus-within .ur33-vidmodal__track { box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.45); } /* ── Buttons, time, volume ────────────────────────────── */ .ur33-vidmodal__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; } .ur33-vidmodal__buttons { display: flex; align-items: center; gap: 0.4rem; } /* A portrait panel is narrow, so the bar reads better stacked and centred: the three buttons on their own row, time and volume underneath. */ .ur33-vidmodal__panel:not(.is-landscape) .ur33-vidmodal__controls { justify-content: center; gap: 0.5rem 0.9rem; } .ur33-vidmodal__panel:not(.is-landscape) .ur33-vidmodal__buttons { flex: 1 0 100%; justify-content: center; } .ur33-vidmodal .ur33-vidbtn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--ur33-radius-pill, 50px); background: rgba(255, 255, 255, 0.07); color: #F8FAFC; font-family: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out; } .ur33-vidmodal .ur33-vidbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); } .ur33-vidmodal .ur33-vidbtn--primary { background: var(--ur33-gradient, linear-gradient(135deg, #FF6B35 0%, #FFA726 100%)); border-color: transparent; color: #FFFFFF; } .ur33-vidmodal .ur33-vidbtn--primary:hover:not(:disabled) { background: var(--ur33-gradient, linear-gradient(135deg, #FF6B35 0%, #FFA726 100%)); filter: brightness(1.08); border-color: transparent; } .ur33-vidmodal .ur33-vidbtn:disabled { opacity: 0.4; cursor: default; } .ur33-vidmodal__time { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: rgba(248, 250, 252, 0.78); } .ur33-vidmodal__time-sep { opacity: 0.5; } .ur33-vidmodal__volume { display: inline-flex; align-items: center; gap: 0.45rem; } .ur33-vidmodal__mute { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #F8FAFC; cursor: pointer; transition: background 0.15s ease-out; } .ur33-vidmodal__mute:hover { background: rgba(255, 255, 255, 0.12); } .ur33-vidmodal__ico-muted { display: none; } .ur33-vidmodal.is-muted .ur33-vidmodal__ico-loud { display: none; } .ur33-vidmodal.is-muted .ur33-vidmodal__ico-muted { display: block; } .ur33-vidmodal__volume-input { width: 92px; height: 16px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .ur33-vidmodal__volume-input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); } .ur33-vidmodal__volume-input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .ur33-vidmodal__volume-input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); } .ur33-vidmodal__volume-input::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: #FFFFFF; } .ur33-vidmodal__volume-input:focus-visible, .ur33-vidmodal__seek-input:focus-visible { outline: 2px solid rgba(255, 167, 38, 0.8); outline-offset: 2px; } /* =================================================================== Replay button, injected next to the carrousel navigation =================================================================== */ .ur33-stepvid-replay { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 2px solid rgba(255, 107, 53, 0.35); border-radius: var(--ur33-radius-pill, 50px); background: rgba(255, 107, 53, 0.08); color: var(--ur33-primary, #FF6B35); font-family: var(--ur33-font, inherit); font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease-out, border-color 0.15s ease-out; } .ur33-stepvid-replay:hover { background: rgba(255, 107, 53, 0.18); border-color: var(--ur33-primary, #FF6B35); } .ur33-stepvid-replay[hidden] { display: none !important; } /* Desktop: far left of the footer bar. The auto margin swallows all free space, so previous / dots / counter / next stop spreading out and pack together at the right, only separated by the footer's own gap. Keeping the alignment on the footer itself means steps without a video (button hidden) keep the same right aligned navigation instead of falling back to a spread out row. */ .ur33-carrousel-footer.ur33-stepvid-footer { justify-content: flex-end; } .ur33-carrousel-footer.ur33-stepvid-footer > .ur33-stepvid-replay { margin-right: auto; background: var(--ur33-white, #FFFFFF); } /* Previous and next sit side by side at the end of that group, with the dots and the counter in front of them. Reordered visually only, so the carrousel markup and its own script stay untouched. */ .ur33-stepvid-footer > .ur33-carrousel-dots { order: 1; } .ur33-stepvid-footer > .ur33-carrousel-counter { order: 2; } .ur33-stepvid-footer > .ur33-carrousel-next { order: 4; } /* 40px between the counter and previous: the footer's own 1rem gap plus this. */ .ur33-stepvid-footer > .ur33-carrousel-prev { order: 3; margin-left: calc(40px - 1rem); } /* Mobile shell header is dark: neutral chip, pushed to the right of the row. */ .ur33-device-mobile .ur33m-header-row > .ur33-stepvid-replay { margin-left: auto; padding: 0.35rem 0.6rem; border-width: 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #F8FAFC; font-size: 0.72rem; } .ur33-device-mobile .ur33m-header-row > .ur33-stepvid-replay:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); } /* =================================================================== Small screens =================================================================== */ @media (max-width: 640px) { .ur33-vidmodal { padding: 0.5rem; } .ur33-vidmodal__panel { /* Width still follows the video ratio, capped at the screen width. */ --ur33-vid-h: min(62vh, calc(100vh - 180px)); max-width: 100%; border-radius: var(--ur33-radius-sm, 12px); } .ur33-vidmodal__panel.is-landscape { --ur33-vid-h: 46vh; width: 100%; } .ur33-vidmodal__head { padding: 0.7rem 0.85rem; } .ur33-vidmodal .ur33-vidmodal__title { font-size: 1rem; } .ur33-vidmodal__bar { padding: 0.7rem 0.85rem 0.8rem; } .ur33-vidmodal__controls { justify-content: center; gap: 0.5rem 0.75rem; } .ur33-vidmodal__buttons { order: 1; flex: 1 0 100%; justify-content: center; } .ur33-vidmodal__time { order: 2; } .ur33-vidmodal__volume { order: 3; } .ur33-vidmodal .ur33-vidbtn { padding: 0.5rem 0.7rem; font-size: 0.78rem; } .ur33-vidmodal__volume-input { width: 76px; } .ur33-vidmodal__bigplay { width: 64px; height: 64px; } }