/* ReRun TV surface. Reuses the site design tokens from site.css. */ /* width:100% pins a definite inline size. Without it, this page is a flex-column child of and the aspect-ratio TV frame makes Chrome intermittently size the flex item to its content — collapsing the whole column (and the video window) on some channel changes. */ .tv-main { width: 100%; max-width: 1160px; margin: 0 auto; padding: 96px 20px 64px; } .tv-intro { text-align: center; margin-bottom: 28px; } .tv-h1 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0 12px; } .tv-lede { max-width: 720px; margin: 0 auto; color: var(--muted, #b9c2d0); line-height: 1.5; } .tv-stage { display: grid; /* Fixed proportional tracks. min-width:0 on the items (below) stops the aspect-ratio screen and variable guide content from feeding their intrinsic size back into fr resolution, which otherwise made the left column (and the 16:9 video frame) grow/shrink on every channel change. */ grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; } .tv-stage > .tv-screen, .tv-stage > .tv-guide { min-width: 0; } .tv-screen { padding: 16px; border-radius: 18px; } .tv-screen-frame { position: relative; width: 100%; background: #05070d; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.08); } .tv-video { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: #000; display: block; } .tv-no-signal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 4px), radial-gradient(circle at 50% 40%, #10151f, #05070d); } .tv-no-signal-bars { width: 60%; height: 8px; background: linear-gradient(90deg, #ff5f6d, #ffc371, #2bd1c4, #4f9dff, #b06dff); border-radius: 4px; opacity: 0.55; } .tv-no-signal-text { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; letter-spacing: 0.15em; margin: 0; } .tv-no-signal-sub { color: var(--muted, #9aa5b5); margin: 0; font-size: 0.9rem; } .tv-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(220, 40, 60, 0.92); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; padding: 4px 9px; border-radius: 999px; } .tv-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: tv-live-pulse 1.4s infinite; } @keyframes tv-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .tv-transport { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .tv-btn { font: inherit; cursor: pointer; color: var(--text, #eef2f8); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 9px 14px; font-weight: 600; transition: background .15s, border-color .15s, transform .1s; } .tv-btn:hover { background: rgba(255,255,255,0.12); } .tv-btn:active { transform: translateY(1px); } .tv-btn-power { background: linear-gradient(135deg, #2bd1c4, #4f9dff); color: #04121a; border: none; } .tv-btn-power.is-on { background: linear-gradient(135deg, #ff7a59, #ff5f6d); color: #1a0805; } .tv-channel-readout { font-family: 'JetBrains Mono', monospace; margin-left: auto; color: var(--muted, #b9c2d0); } .tv-now { margin-top: 16px; } .tv-now-row { display: flex; gap: 14px; align-items: flex-start; } .tv-now-poster { position: relative; flex: 0 0 80px; width: 80px; height: 120px; border-radius: 10px; overflow: hidden; background: #05070d; border: 1px solid rgba(255,255,255,0.12); } .tv-now-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity 0.35s ease; } .tv-now-poster.is-loading .tv-now-poster-img { opacity: 0; } .tv-now-poster .rerun-poster-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .tv-now-poster.is-loading .rerun-poster-loader { opacity: 1; } .tv-now-poster .rerun-chevron { width: 13px; height: 20px; } .tv-now-info { flex: 1; min-width: 0; } .tv-now-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--muted, #9aa5b5); } .tv-now-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; margin-top: 2px; } .tv-now-sub { color: var(--muted, #b9c2d0); font-size: 0.9rem; margin-top: 2px; } .tv-progress { margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; } .tv-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2bd1c4, #4f9dff); transition: width .6s linear; } .tv-guide { padding: 16px; border-radius: 18px; } .tv-guide-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .tv-guide-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; } .tv-guide-clock { font-family: 'JetBrains Mono', monospace; color: var(--muted, #b9c2d0); } .tv-channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tv-channel { width: 100%; text-align: left; cursor: pointer; color: inherit; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; font: inherit; } .tv-channel:hover { background: rgba(255,255,255,0.09); } .tv-channel.is-active { border-color: rgba(79,157,255,0.6); background: rgba(79,157,255,0.12); } .tv-channel-num { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted, #9aa5b5); } .tv-channel-name { font-weight: 600; } .tv-channel-now { grid-column: 2; font-size: 0.82rem; color: var(--muted, #b9c2d0); } .tv-upnext { margin-top: 16px; } .tv-upnext-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--muted, #9aa5b5); margin-bottom: 6px; } .tv-upnext-list, .tv-era-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .tv-upnext-list li, .tv-era-channels li { font-size: 0.85rem; color: var(--muted, #c3ccd8); } /* Keep every up-next row to a single line so the guide height (and page layout) stays constant as programs change. */ .tv-upnext-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-upnext-list b, .tv-era-channels b { font-family: 'JetBrains Mono', monospace; color: var(--text, #eef2f8); margin-right: 6px; } .tv-era-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .tv-era-label { font-size: 0.85rem; color: var(--muted, #b9c2d0); } .tv-era-form input { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: inherit; } .tv-era-result { margin-top: 16px; } .tv-era-head { color: var(--muted, #b9c2d0); font-size: 0.9rem; margin-bottom: 8px; } .tv-legal-note { color: var(--muted, #9aa5b5); font-size: 0.85rem; line-height: 1.5; max-width: 760px; } .tv-legal-note a { color: var(--teal, #2bd1c4); } @media (max-width: 860px) { .tv-stage { grid-template-columns: minmax(0, 1fr); } .tv-main { padding-top: 84px; } } @media (prefers-reduced-motion: reduce) { .tv-dot { animation: none; } .tv-progress-fill { transition: none; } }