:root{ --bg:#0b1020; --ink:#eef2ff; --muted:#9fb0d0; --navy:#0f1e46; --accent:#3f9bf0; --panel:rgba(9,13,28,.93); --text:#dbe6fb; --radius:12px; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} /* ---------- blurred backdrop ---------- The poster, blown up and blurred, fills wide screens with something related to the content instead of dead space. Same trick Relatable uses. */ .backdrop{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} .backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:brightness(.5)} /* the asset is already blurred — don't blur it twice */ .backdrop::after{content:"";position:absolute;inset:0;background:rgba(5,8,18,.55)} /* ---------- start screen ---------- */ #start{position:relative;min-height:100svh;display:flex;align-items:center; justify-content:center;padding:24px} #start .start-card{position:relative;z-index:1} .start-card{width:100%;max-width:560px;text-align:center} .poster-wrap{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer; box-shadow:0 24px 60px rgba(0,0,0,.55);line-height:0} /* A minimum height so a poster that fails to load cannot collapse the whole start screen to nothing — which reads as "the video disappeared" rather than "an image is missing". */ .poster-wrap{min-height:180px;background:#0d1424} .poster-wrap img{width:100%;height:auto;display:block} .poster-wrap::after{content:"";position:absolute;inset:0;background:rgba(8,12,28,.28); transition:background .2s} .poster-wrap:hover::after{background:rgba(8,12,28,.12)} .play-badge{position:absolute;inset:0;display:grid;place-items:center;z-index:2} .play-badge span{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.94); color:var(--navy);display:grid;place-items:center;font-size:30px;padding-left:6px; box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .2s} .poster-wrap:hover .play-badge span{transform:scale(1.06)} /* ---------- lightbox ---------- */ #lightbox{position:fixed;inset:0;background:#070b16;z-index:50} #stage{position:absolute;z-index:1;left:0;right:0; top:max(16px,env(safe-area-inset-top)); bottom:calc(58px + max(8px,env(safe-area-inset-bottom))); margin:0 16px} #lightbox.clean #stage{bottom:max(16px,env(safe-area-inset-bottom))} /* isolate: contains #clickCatch, #scrim and #floats. Without a stacking context here their z-indexes escape into the root layer, and the transparent click catcher ends up painted over #menu — the buttons render but cannot be clicked. */ #videoFrame{position:absolute;z-index:1;isolation:isolate; background:#000;border-radius:10px;overflow:hidden; transition:left .32s ease,top .32s ease,width .32s ease,height .32s ease} /* #player is sized and offset by the engine so the video can cover a frame of a different shape; the iframe simply fills whatever box it is given. */ #player{position:absolute} #player iframe{width:100%!important;height:100%!important;border:0;display:block} /* Sits over the iframe so clicks are ours, not Vimeo's, and carries the play badge. */ #clickCatch{position:absolute;inset:0;z-index:1;border:0;padding:0;background:none; cursor:pointer;display:grid;place-items:center} #clickCatch .pbadge{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94); color:var(--navy);display:grid;place-items:center;font-size:28px;padding-left:5px; box-shadow:0 8px 30px rgba(0,0,0,.45);opacity:0;transform:scale(.85); transition:opacity .2s,transform .2s;pointer-events:none} #clickCatch.paused .pbadge{opacity:1;transform:none} #clickCatch.paused:hover .pbadge{transform:scale(1.05)} #scrim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none; transition:opacity .3s} #floats{position:absolute;inset:0;z-index:3;pointer-events:none} .float{position:absolute;pointer-events:auto;animation:pop .28s ease both} @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Wrapping flex rather than grid: a last row with fewer buttons centres itself, which grid will not do without extra rules. */ #menu{position:absolute;z-index:4;display:flex;flex-wrap:wrap;justify-content:center; align-content:center; transition:left .32s ease,top .32s ease,width .32s ease,opacity .25s ease} #menu[hidden]{display:none} .ibtn{appearance:none;border:0;padding:0;background:none;cursor:pointer;display:block; width:var(--bw,100%);border-radius:10px;overflow:hidden;line-height:0; box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s} .ibtn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.55)} .ibtn:active{transform:translateY(0)} .ibtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .ibtn img{width:100%;height:auto;display:block} /* ---------- our own control bar ---------- */ #controls{position:absolute;z-index:2;display:flex;align-items:center;gap:12px; padding:0 14px; transition:left .32s ease,top .32s ease,width .32s ease} #controls[hidden]{display:none} .cbtn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.12);color:#fff;font-size:13px;display:grid; place-items:center;transition:background .15s} .cbtn:hover:not(:disabled){background:rgba(255,255,255,.26)} .cbtn:disabled{opacity:.3;cursor:default} .cbtn[hidden]{display:none} .cbtn.on{background:var(--accent)} #time{flex:0 0 auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} #track{flex:1 1 auto;display:flex;gap:4px;min-width:0} .seg{flex-grow:1;flex-shrink:1;flex-basis:0;display:flex;flex-direction:column;gap:6px; border:0;background:none;padding:0;cursor:pointer;min-width:0} .seg .rail{height:7px;border-radius:4px;background:rgba(255,255,255,.20); overflow:hidden;position:relative;transition:background .15s} .seg:hover .rail{background:rgba(255,255,255,.34)} .seg .fill{position:absolute;inset:0;background:var(--accent);transform-origin:left; transform:scaleX(0)} .seg .lbl{font-size:10.5px;letter-spacing:.02em;color:#8fa3c6;text-align:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s} .seg:hover .lbl{color:#cfe0ff} .seg.current .lbl{color:#fff} /* In "current" mode the single label names the section and is the only place that appears, so it stays even on a phone. In "sections" mode three labels don't fit. */ @media (max-width:560px){ #track:not(.single) .seg .lbl{display:none} } /* One frame around header, video and controls — they read as a single object rather than three panels floating near each other. */ #shell{position:absolute;z-index:0;background:var(--panel); border:1px solid rgba(255,255,255,.09);border-radius:16px; box-shadow:0 20px 55px rgba(0,0,0,.55); transition:left .32s ease,top .32s ease,width .32s ease,height .32s ease} #shell[hidden]{display:none} #topbar{position:absolute;z-index:3;display:flex;align-items:center;gap:10px; padding:0 14px; transition:left .32s ease,top .32s ease,width .32s ease} #topbar[hidden]{display:none} #topbar .spacer{flex:0 0 34px} /* balances the hamburger so the title truly centres */ #secTitle{flex:1 1 auto;min-width:0;text-align:center;font-size:13px;font-weight:600; color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #sectionMenu{position:absolute;z-index:6;min-width:230px;padding:6px;border-radius:12px; background:var(--panel);border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 44px rgba(0,0,0,.6)} #sectionMenu[hidden]{display:none} #sectionMenu button{display:block;width:100%;text-align:left;padding:10px 12px; border:0;background:none;color:#cfe0ff;font-size:13.5px;border-radius:8px; cursor:pointer} #sectionMenu button:hover{background:rgba(255,255,255,.09)} #sectionMenu button.current{color:#fff;background:rgba(63,155,240,.20)} /* ---------- temporary dev bar ---------- */ #devbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:6px; align-items:center;overflow-x:auto;padding:9px 12px; padding-bottom:calc(9px + max(0px,env(safe-area-inset-bottom))); background:rgba(10,14,30,.94);border-top:1px solid rgba(255,255,255,.10)} #devbar b{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#6d80a6; margin-right:2px;flex:0 0 auto} #devbar button{flex:0 0 auto;font-size:12px;padding:6px 11px;border-radius:999px; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#cfe0ff; cursor:pointer;white-space:nowrap} #devbar button:hover{background:rgba(255,255,255,.16)} #lightbox.clean #devbar{display:none} /* Editor mode: the editor draws its own timeline below the player, and two scrubbers doing different jobs is worse than one. */ #lightbox.editor #controls{display:none} /* The frame is the thing being judged in the editor, so nothing large sits on it. Playback is controlled from the timeline there. */ #lightbox.editor #clickCatch .pbadge{display:none} /* ---------- embedded in someone else's page ---------- */ /* No backdrop and no page-height start screen: the host page owns the background and decides how much room this gets. */ #lightbox.embed{background:transparent;position:absolute} #lightbox.embed #stage{margin:0;top:0;bottom:0} #lightbox.embed #shell{border-radius:14px} body:has(#lightbox.embed){background:transparent} /* Height comes from the poster, not the viewport: the host page is told how tall to make the frame, so anything fixed here just leaves dead space around the image. */ /* Never scroll inside an embed. If the content is a pixel taller than the height the host was told, a scrollbar appears — and it takes width off the right, which shows up as a band beside the poster. */ html:has(#lightbox.embed),body:has(#lightbox.embed){overflow:hidden} #start:has(~ #lightbox.embed){min-height:0;height:auto;padding:0;display:block; overflow:hidden} #start:has(~ #lightbox.embed) .start-card{max-width:none} #start:has(~ #lightbox.embed) .poster-wrap{border-radius:14px;box-shadow:none}