/* * kq-video-player.css — the ONE stylesheet for the custom video player chrome. * * Extracted verbatim from the `KQP_STYLES` string that used to live inside * funnel-renderer.js. It now has two consumers — the funnel/store/builder * renderer (which emits the markup as an HTML string) and the `` * Blade component used by the course surfaces — so it must NOT be forked: both * render the same `.kqp` markup contract and both style it from here. * * COLORS ARE DELIBERATELY LITERAL, and this is the one place in the app where * that is correct. The chrome floats ON TOP OF THE VIDEO PICTURE, not on the * page surface: it is white-on-black in light mode and white-on-black in dark * mode, because the backdrop is the video, never `var(--bg)`. Theming it with * surface tokens would make the controls vanish against bright footage. The one * genuinely themeable value — the accent — IS a variable (`--kqp-a`), which each * host sets: the funnel passes the element's configured accent, the course * surfaces pass the platform coral `var(--co)`. * * The accent is deliberately NOT the tenant brand: it paints the progress fill * ON the black player, and a tenant whose brand is near-black (the `#0a0a0a` * default is exactly that) would get an invisible scrubber. The literal below is * the fallback for hosts where `--co` is undefined — the legacy coach layout * ships no design-system tokens, which makes `--kqp-a` guaranteed-invalid and * hands the fallback control. * * Loaded by: the host page's (funnel/store/builder/course views) with a * runtime fallback in kq-video-player.js `ensureStyles()` for markup injected * into a page that never linked it. */ .kqp { position: relative; width: 100%; overflow: hidden; background: #000; line-height: 0 } .kqp-stage { position: relative; width: 100%; cursor: pointer } .kqp video { display: block; width: 100% } /* Scrim: only under the chrome, so the picture stays clean. */ .kqp-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 10 } /* Center play — the ONLY play affordance while paused. The control row deliberately has no play button: two of them on one frame is the mess this replaced. */ .kqp-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94); width: 68px; height: 68px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 13; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; box-shadow: 0 6px 28px rgba(0, 0, 0, .35); padding: 0 } .kqp.kqp-paused .kqp-center { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1) } .kqp-center:hover { transform: translate(-50%, -50%) scale(1.06) } .kqp-center svg { width: 26px; height: 26px; margin-left: 3px } /* Control row — sits ABOVE the progress bar, right-aligned like videoask. */ .kqp-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px 14px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; z-index: 12 } .kqp:hover .kqp-scrim, .kqp.kqp-paused .kqp-scrim, .kqp:focus-within .kqp-scrim { opacity: 1 } .kqp:hover .kqp-ctl, .kqp.kqp-paused .kqp-ctl, .kqp:focus-within .kqp-ctl { opacity: 1; transform: none } .kqp-sp { flex: 1 1 auto } .kqp-btn { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); color: #fff; cursor: pointer; padding: 0; transition: background .15s, transform .15s } .kqp-btn:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06) } .kqp-btn svg { width: 16px; height: 16px } .kqp-speed { width: auto; min-width: 38px; padding: 0 10px; border-radius: 99px; font: 700 11px/1 system-ui, -apple-system, sans-serif; letter-spacing: .02em } .kqp-time { flex: 0 0 auto; color: #fff; font: 600 12px/1 system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); padding-left: 2px } /* Progress: a hairline on the very bottom edge that thickens on hover. */ .kqp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); z-index: 14; cursor: default; transition: height .18s } .kqp:hover .kqp-bar { height: 7px } .kqp-bar.kqp-seekable { cursor: pointer } .kqp-buffered { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .2) } .kqp-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--kqp-a, #e94e2b); transition: width .12s linear } /* Knob only when the bar can actually be dragged — no fake affordance. */ .kqp-bar.kqp-seekable .kqp-fill::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%) scale(0); width: 11px; height: 11px; border-radius: 50%; background: var(--kqp-a, #e94e2b); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .18s } .kqp:hover .kqp-bar.kqp-seekable .kqp-fill::after { transform: translateY(-50%) scale(1) } .kqp-toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 99px; background: rgba(0, 0, 0, .85); color: #fff; font: 600 13px/1 system-ui, -apple-system, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 16; white-space: nowrap } .kqp.kqp-blocked .kqp-toast { opacity: 1 } /* Terminal failure state. A video whose source never loads would otherwise sit black behind a play button that does nothing forever — so the frame says what happened instead, and the dead play affordance is removed rather than left there to be clicked. Driven by `failPlayer()` in kq-video-player.js. */ .kqp-err { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; background: rgba(0, 0, 0, .72); color: #fff; z-index: 17; line-height: 1.45 } .kqp.kqp-error .kqp-err { display: flex } .kqp.kqp-error .kqp-center, .kqp.kqp-error .kqp-ctl, .kqp.kqp-error .kqp-bar, .kqp.kqp-error .kqp-scrim { display: none } .kqp-err-t { font: 600 14px/1.35 system-ui, -apple-system, sans-serif } .kqp-err-d { font: 500 12px/1.4 system-ui, -apple-system, sans-serif; opacity: .72 } @media (max-width: 600px) { .kqp-ctl { opacity: 1; transform: none; gap: 6px; padding: 0 8px 12px } .kqp-scrim { opacity: 1 } .kqp-btn { width: 29px; height: 29px } .kqp-time { font-size: 11px } .kqp-center { width: 56px; height: 56px } .kqp-center svg { width: 22px; height: 22px } }