/* ===================================================================== video-modal.css Portrait (9:16) video lightbox. Deliberately never fullscreen. Override these on :root to restyle without touching this file: --vmodal-accent progress bar colour --vmodal-backdrop overlay colour --vmodal-ratio frame aspect ratio (default 9/16) --vmodal-height frame height (default min(74vh, 600px)) --vmodal-maxw frame width cap (default min(84vw, 340px)) --vmodal-radius corner radius ===================================================================== */ .vmodal{ --_accent: var(--vmodal-accent, #4d8dff); --_backdrop: var(--vmodal-backdrop, rgba(6,8,12,.80)); --_ratio: var(--vmodal-ratio, 9/16); --_height: var(--vmodal-height, min(74vh, 600px)); --_maxw: var(--vmodal-maxw, min(84vw, 340px)); --_radius: var(--vmodal-radius, 18px); border:0;padding:0;margin:0;background:transparent; width:100%;height:100%;max-width:none;max-height:none; overflow:hidden;color:#fff } .vmodal::backdrop{ background:rgba(6,8,12,.80); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px) } .vmodal__shell{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom)) } /* Height sets the box; max-width clamps it on narrow screens and the aspect-ratio recomputes the other axis. Both axes are capped, so the frame always leaves visible backdrop on every side. */ .vmodal__frame{ position:relative;flex:none; aspect-ratio:var(--_ratio); height:var(--_height); width:auto;max-width:var(--_maxw); border-radius:var(--_radius);overflow:hidden;background:#000; box-shadow:0 28px 70px rgba(0,0,0,.6); animation:vmodal-pop .22s cubic-bezier(.2,.8,.3,1) } @keyframes vmodal-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} .vmodal__video{ width:100%;height:100%;display:block; object-fit:cover;background:#000 } /* full-frame hit area for play/pause */ .vmodal__tap{ position:absolute;inset:0;z-index:2; border:0;background:transparent;cursor:pointer;padding:0 } .vmodal__play{ position:absolute;inset:0;z-index:3; display:grid;place-items:center; pointer-events:none;opacity:0;transition:opacity .18s } .vmodal.is-paused .vmodal__play{opacity:1} .vmodal__play i{ width:62px;height:62px;border-radius:50%;font-style:normal; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); display:grid;place-items:center;font-size:24px;padding-left:4px } .vmodal__close{ position:absolute;top:8px;right:8px;z-index:4; width:34px;height:34px;padding:0;border:0;border-radius:50%; cursor:pointer;background:rgba(0,0,0,.55);color:#fff; font-size:19px;line-height:1;display:grid;place-items:center; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px) } .vmodal__close:hover{background:rgba(0,0,0,.85)} .vmodal__sound{ position:absolute;left:10px;bottom:16px;z-index:4; border:0;cursor:pointer;border-radius:999px; background:rgba(0,0,0,.55);color:#fff; font:600 12px/1 inherit;padding:9px 13px; display:flex;align-items:center;gap:6px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px) } .vmodal__sound:hover{background:rgba(0,0,0,.85)} .vmodal__sound[hidden]{display:none} .vmodal__bar{ position:absolute;left:0;right:0;bottom:0;z-index:4; height:3px;background:rgba(255,255,255,.22) } .vmodal__bar i{ display:block;height:100%;width:0; background:var(--_accent);transition:width .1s linear } /* applied to while the modal is open */ .vmodal-lock{overflow:hidden} @media (prefers-reduced-motion:reduce){ .vmodal__frame{animation:none} .vmodal__bar i{transition:none} }