diff --git a/trailer.html b/trailer.html index 832b8af..c45d6b7 100644 --- a/trailer.html +++ b/trailer.html @@ -13,7 +13,9 @@ .tab.on{color:var(--ink);border-color:var(--line);background:var(--panel)} .tab.lead{color:var(--accent)} .scene{color:var(--accent2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px} - .tab .sc{color:var(--accent2);margin-left:7px;font-weight:600} + .tab .sc{color:var(--accent2);margin-left:9px;font-weight:600;font-size:11px; + border:1px solid var(--accent2);border-radius:999px;padding:1px 7px; + font-variant-numeric:tabular-nums} .tab .st{color:var(--muted);margin-left:7px;font-size:12px} .head{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px} .head h2{margin:0;font-size:22px} @@ -116,6 +118,26 @@ .playbox video{width:100%;display:block;aspect-ratio:16/9;background:#000} .playbox .bar2{display:flex;gap:10px;align-items:center;padding:7px 10px;font-size:12px; color:var(--muted);background:var(--panel)} + .reel{border:1px solid var(--accent);border-radius:10px;padding:14px 16px;margin:0 0 18px} + .reel h4{margin:0 0 4px;font-size:15px;color:var(--accent)} + .reel .lede{color:var(--muted);font-size:13px;margin:0 0 12px} + .reelframes{display:flex;gap:12px} + .reelframes figure{margin:0;flex:1;min-width:0} + .reelframes img{width:100%;border-radius:10px;border:1px solid var(--line);display:block; + aspect-ratio:16/9;object-fit:cover;background:#000} + .reelframes img.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,170,80,.25)} + .reelframes figcaption{color:var(--muted);font-size:11px;margin-top:4px;text-align:center} + .reelnow{margin:12px 0 0;text-align:center} + .reelnow .t{font-size:15px;font-weight:600} + .reelnow .w{color:var(--muted);font-size:12.5px;margin-top:2px} + .reelnow .said{font-size:14px;margin-top:8px;max-width:46em;margin-left:auto;margin-right:auto} + .reelnow .said .who{color:var(--accent);font-size:12px;margin-right:6px} + .reelbar{display:flex;gap:8px;align-items:center;justify-content:center; + flex-wrap:wrap;margin-top:12px} + .reelbar .pos{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} + .reelprog{height:4px;background:var(--line);border-radius:999px;margin-top:12px;overflow:hidden} + .reelprog i{display:block;height:100%;background:var(--accent);width:0} + .shot.lit{background:rgba(255,170,80,.06);border-radius:10px}