justinzeus
1668445418
All checks were successful
review/code-claude Code review passed on 16684454, no blocking finding
review/design-claude Design review pass: motion numbers equal direction A; 6 non-blocking notes
72 lines
6.3 KiB
CSS
72 lines
6.3 KiB
CSS
/* Prototype stages: 1920x1080 CSS px, approved tokens from data/tv-v2/focus-2026-11-06 (colors, type, ring, card sizes at Level 2 spacing). */
|
|
.sbox{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;border:1px solid var(--line);background:#000}
|
|
.sbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
|
|
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#07070a;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:#f4f4f6;font-size:28px;line-height:1.3;
|
|
--bg:#07070a;--surface:#13131a;--surface2:#1b1b25;--surface3:#252532;--muted:rgb(244 244 246/.74);--dim:rgb(244 244 246/.56);--accent:oklch(78% 0.14 305);--accent-text:oklch(88% 0.08 305)}
|
|
.stage *{box-sizing:border-box}
|
|
.stage .abs{position:absolute}
|
|
/* nav */
|
|
.stage .nav{position:absolute;left:0;top:0;width:1920px;height:150px;z-index:5;display:flex;align-items:center;gap:12px;padding:44px 96px 0}
|
|
.stage .wm{font-size:36px;font-weight:800;letter-spacing:-.02em;margin-right:40px}.stage .wm b{color:var(--accent)}
|
|
.stage .ni{height:64px;padding:0 26px;border-radius:32px;display:inline-flex;align-items:center;font-size:30px;font-weight:600;color:var(--muted);position:relative}
|
|
.stage .ni.cur{color:#f4f4f6}.stage .ni.cur::after{content:"";position:absolute;left:26px;right:26px;bottom:4px;height:4px;border-radius:2px;background:var(--accent)}
|
|
.stage .ni.f{background:#f4f4f6;color:#0b0b10}.stage .ni.f::after{display:none}
|
|
.stage .nsp{flex:1}.stage .av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#0b0b10;font-size:30px;background:#9be38f}
|
|
/* hero */
|
|
.stage .amb{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:auto}
|
|
.stage .bd{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.stage .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgb(7 7 10/.92) 0%,rgb(7 7 10/.55) 42%,rgb(7 7 10/0) 70%),linear-gradient(0deg,#07070a 0%,rgb(7 7 10/.6) 26%,rgb(7 7 10/0) 48%)}
|
|
.stage .copy{position:absolute;left:96px;width:1000px}
|
|
.stage .kicker{font-size:26px;font-weight:650;color:var(--accent-text);margin-bottom:10px}
|
|
.stage .ht{font-size:84px;line-height:1.02;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
|
|
.stage .hm{font-size:28px;color:var(--muted);margin-bottom:14px;min-height:38px;display:flex;gap:22px;align-items:center}
|
|
.stage .ho{font-size:28px;color:var(--muted);margin:0 0 30px;max-width:960px}
|
|
.stage .btns{display:flex;gap:20px}
|
|
.stage .btn{height:76px;padding:0 38px;border-radius:38px;font-size:28px;font-weight:700;display:inline-flex;align-items:center;background:rgb(255 255 255/.14)}
|
|
.stage .btn.pri{background:#f4f4f6;color:#0b0b10}
|
|
.stage .btn.f{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 2px var(--accent);transform:scale(1.05)}
|
|
.stage .rate{display:inline-flex;gap:10px;align-items:center;font-weight:700;color:#f4f4f6}.stage .rate i{width:24px;height:24px;border-radius:50%;background:#e2483a;display:inline-block}
|
|
.stage .rate i.pc{background:#f5c518;border-radius:4px}
|
|
.stage .slot{display:inline-block;height:30px;border-radius:15px;background:rgb(255 255 255/.10)}
|
|
/* rows + cards */
|
|
.stage .sh{position:absolute;left:96px;font-size:34px;font-weight:700}
|
|
.stage .card{position:absolute;border-radius:16px;overflow:hidden;background:var(--surface);background-size:cover;background-position:center}
|
|
.stage .card.poster{width:256px;height:384px}.stage .card.tile{width:400px;height:225px}
|
|
.stage .card .img{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.stage .card .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(rgb(7 7 10/0),rgb(7 7 10/.92));font-size:26px;font-weight:700}
|
|
.stage .ring{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 2px var(--accent),0 18px 40px rgb(0 0 0/.55)}
|
|
.stage .circle{position:absolute;width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--surface2);display:grid;place-items:center;font-size:44px;font-weight:800;color:var(--dim)}
|
|
.stage .circle .img{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.stage .bar{position:absolute;height:28px;border-radius:14px;background:var(--surface2)}
|
|
.stage .spin{position:absolute;left:940px;top:520px;width:40px;height:40px;border-radius:50%;border:4px solid rgb(155 120 255/.25);border-top-color:oklch(65% 0.2 300);animation:spin .8s linear infinite}
|
|
/* picker */
|
|
.stage .pk{position:absolute;top:290px;left:0;width:1920px;text-align:center;font-size:72px;font-weight:800;letter-spacing:-.02em}
|
|
.stage .person{position:absolute;top:426px;width:220px;height:220px;border-radius:50%;display:grid;place-items:center;font-size:110px;font-weight:800;color:#0b0b10}
|
|
.stage .pname{position:absolute;top:670px;width:220px;text-align:center;font-size:34px;font-weight:700;color:var(--muted)}
|
|
/* replay label */
|
|
.stage .tl{position:absolute;right:14px;bottom:10px;font:22px/1 ui-monospace,Menlo,monospace;background:rgb(0 0 0/.6);padding:6px 8px;border-radius:6px;color:#fff;z-index:20}
|
|
|
|
/* keyframes */
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
@keyframes fade{from{opacity:0}to{opacity:1}}
|
|
@keyframes fadeout{from{opacity:1}to{opacity:0}}
|
|
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
|
|
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
|
|
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
|
|
@keyframes hide{to{opacity:0;visibility:hidden}}
|
|
@keyframes show{from{opacity:0}to{opacity:1}}
|
|
|
|
/* anything with .an waits for .play */
|
|
.stage .an{opacity:0}
|
|
.stage.play .an{animation-fill-mode:both}
|
|
.stage .gone{animation-fill-mode:both}
|
|
/* skeleton styles */
|
|
.stage .sk{background:var(--surface2)}
|
|
.stage .sk.breathe{animation:breathe 1.4s ease-in-out infinite}
|
|
.stage .sk.shim{position:relative;overflow:hidden}
|
|
.stage .sk.shim::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(255 255 255/.07),transparent);animation:shimmer 1.3s linear infinite}
|
|
|
|
/* reduced motion: no movement, short fades only */
|
|
body.rm .stage.play .an{animation-name:fade!important;animation-duration:.08s!important}
|
|
body.rm .stage .sk.breathe,body.rm .stage .sk.shim::after{animation:none}
|
|
body.rm .stage .mv{transition:none!important}
|