@charset "UTF-8"; /* ═══════════════════════════════════════════════════════════════════ TV Guide — guide.css Supports: light / dark theme · mobile-first responsive layout ═══════════════════════════════════════════════════════════════════ */ /* ── BASE ────────────────────────────────────────────────────────────── */ /* Ensure [hidden] always hides regardless of element-level display rules */ [hidden] { display: none !important; } /* ── THEME TOKENS ────────────────────────────────────────────────────── */ /* Light (default) */ :root { --bg: #f4f3ef; --bg-header: #f4f3eff0; --surface: #eae8e2; --surface2: #dedad0; --border: #ccc9be; --text: #000d3d; --muted: #595661; --desc-text: #56535f; --tonight-bg: #9b6e0012; --tonight-hover: #9b6e0021; --row-hover: #dedad0; --ch-color: #C7102E; --ch-dim: #c7102e1a; --accent: #7a5500; --accent-dim: #7a55001a; --accent-border: #7a550047; --jump-text: #fff; } /* Dark — applied via [data-theme="dark"] on */ [data-theme="dark"] { --bg: #0d0d0f; --bg-header: #0d0d0fed; --surface: #16161a; --surface2: #1e1e24; --border: #2a2a35; --text: #f0eff4; --muted: #7a7a8c; --desc-text: #8a8a9a; --tonight-bg: #f5c8420f; --tonight-hover: #f5c8421c; --row-hover: #1e1e24; --ch-color: #E4173A; --ch-dim: #e4173a26; --accent: #f5c842; --accent-dim: #f5c8421f; --accent-border: #f5c84240; --jump-text: #0d0d0f; } /* Light explicit — overrides OS dark preference when user chose light */ [data-theme="light"] { --bg: #f4f3ef; --bg-header: #f4f3eff0; --surface: #eae8e2; --surface2: #dedad0; --border: #ccc9be; --text: #000d3d; --muted: #595661; --desc-text: #56535f; --tonight-bg: #9b6e0012; --tonight-hover: #9b6e0021; --row-hover: #dedad0; --ch-color: #C7102E; --ch-dim: #c7102e1a; --accent: #7a5500; --accent-dim: #7a55001a; --accent-border: #7a550047; --jump-text: #fff; } /* Honour OS dark preference when no explicit choice is saved */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0d0d0f; --bg-header: #0d0d0fed; --surface: #16161a; --surface2: #1e1e24; --border: #2a2a35; --text: #f0eff4; --muted: #7a7a8c; --dim: #3a3a48; --desc-text: #8a8a9a; --tonight-bg: #f5c8420f; --tonight-hover: #f5c8421c; --row-hover: #1e1e24; --ch-color: #E4173A; --ch-dim: #e4173a26; --accent: #f5c842; --accent-dim: #f5c8421f; --accent-border: #f5c84240; --jump-text: #0d0d0f; } } /* ── RESET ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; transition: background 0.25s, color 0.25s; } .logo{ background-color: transparent; } .logo>img{ width: 40px; display: block; } /* ── HEADER ──────────────────────────────────────────────────────────── */ header { border-bottom: 1px solid var(--border); padding: 0 clamp(0.75rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; position: sticky; top: 0; z-index: 200; background: var(--bg-header); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.25s, border-color 0.25s; } .logo-wrap { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; min-width: 0; } .ch-badge { width: 80px; height: 80px; min-width: 80px; background: var(--ch-color); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 0.9rem; color: #fff; clip-path: polygon(0 0,100% 0,100% 70%,70% 100%,0 100%); text-transform: uppercase; letter-spacing: 0.02em; flex-shrink: 0; text-decoration: none; } /* Home link wrapping the badge */ a.ch-badge { transition: opacity 0.15s; } a.ch-badge:hover { opacity: 0.82; } .site-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(1rem, 2.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; overflow: visible; min-width: clamp(120px, 30vw, 260px); display: flex; flex-direction: column; } .site-title-name { display: flex; align-items: center; gap: 0.5rem; line-height: 1; margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; } .site-title-suffix, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* .fav-btn--header inherits flex-shrink:0 from .fav-btn */ /* No scale transform on the header button — it sits in a tight flex row */ .fav-btn--header:hover, .fav-btn--header.active:hover { transform: none; opacity: 1; } .site-sub { display: block; font-size: 0.52em; font-family: 'DM Sans', sans-serif; font-weight: 300; color: var(--muted); letter-spacing: 0.12em; margin-top: 0.2rem; } /* Header right: date chip + theme toggle (+ hamburger on mobile) */ .header-right { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .date-chip { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); padding: 0.28rem 0.65rem; border-radius: 2px; white-space: nowrap; letter-spacing: 0.05em; transition: border-color 0.25s, color 0.25s; } /* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────── */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--surface2); color: var(--text); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.94); } /* Icon is driven by the CSS variable so PHP never needs to read the theme */ .theme-toggle::before { content: var(--theme-icon, '☀'); } /* ── HAMBURGER (mobile only) ─────────────────────────────────────────── */ .nav-toggle { display: none; /* shown at ≤768px via media query */ width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 8px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background 0.2s; } .nav-toggle:hover { background: var(--surface2); } .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 1px; transition: transform 0.25s, opacity 0.2s; transform-origin: center; } /* Animated X when drawer is open */ body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── CHANNEL DRAWER (mobile slide-in) ───────────────────────────────── */ .ch-overlay { display: block; /* always in DOM — visibility via body.nav-open */ position: fixed; inset: 0; z-index: 140; background: #00000085; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; pointer-events: none; } body.nav-open .ch-overlay { opacity: 1; pointer-events: auto; } .ch-drawer { display: block; /* always in DOM — off-screen until body.nav-open */ position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 85vw); z-index: 160; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; padding: 5rem 1.25rem 2rem; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.25s; } @media (min-width: 1200px) { .ch-drawer { width: 80vw; } .ch-drawer-list { column-count: 3; column-gap: 1.5rem; } .ch-drawer-list .ch-drawer-item { break-inside: avoid; } .ch-drawer-list .ch-drawer-fav-sep { column-span: all; } } @media (min-width: 1600px) { .ch-drawer-list { column-count: 4; } } body.nav-open .ch-drawer { transform: translateX(0); } .ch-drawer-title { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.7rem; display: flex; align-items: center; justify-content: space-between; } /* Wrapper row: link + fav button */ .ch-drawer-item { display: flex; align-items: center; border-bottom: 1px solid var(--border); } .ch-drawer-link { flex: 1; display: flex; align-items: center; padding: 0.3rem 0.5rem; text-decoration: none; color: var(--text); font-size: 0.95rem; transition: color 0.15s, background 0.15s; border-radius: 3px 0 0 3px; min-width: 0; } .ch-drawer-link:hover { color: var(--ch-color); background: var(--ch-dim); } .ch-drawer-link.active { color: var(--ch-color); font-weight: 500; } .ch-drawer-link.active::after { content: '✓'; margin-left: auto; font-size: 0.75rem; padding-left: 0.5rem; } /* Favourites separator inside drawer */ .ch-drawer-fav-sep { font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 0.7rem 0.5rem 0.3rem; border-bottom: 1px solid var(--border); } /* ── MULTI-CHANNEL PILLS (sport / series rows) ───────────────────────── */ .row-ch-pills { display: flex; flex-wrap: wrap; gap: 0.2rem 0.3rem; align-items: center; } .row-ch-pill { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 500; color: var(--accent); text-decoration: none; background: transparent; border: 1.5px solid var(--accent); border-radius: 4px; padding: 0.2rem 0.65rem; white-space: nowrap; line-height: 1.4; transition: background 0.15s, color 0.15s; display: inline-block; } .row-ch-pill:hover { background: var(--accent); color: #fff; } /* ── LISTING PAGE TITLE FILTER ───────────────────────────────────────── */ .tn-live-toggle-wrap { margin: .4rem 0 1rem; } .tn-live-toggle { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--muted); padding:.35rem .8rem; border:1px solid var(--border); border-radius:999px; background:var(--surface2); transition:color .15s,border-color .15s,background .15s; user-select:none; } .tn-live-toggle:hover { color:var(--accent); border-color:var(--accent); } .tn-live-toggle input { appearance:none; width:0; height:0; margin:0; padding:0; } .tn-live-toggle:has(input:checked) { color:#fff; background:#e11; border-color:#e11; } .tn-live-toggle:has(input:checked) .tn-live-toggle-text::before { content:''; } .tn-live-empty { margin: 2rem 0; text-align:center; color:var(--muted); } .tn-filter-bar { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0rem; } .tn-filter-wrap { position: relative; flex: 1; max-width: 360px; } .tn-filter-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1rem; pointer-events: none; line-height: 1; } .tn-filter-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; padding: 0.45rem 0.75rem 0.45rem 2rem; outline: none; transition: border-color 0.15s, background 0.15s; } .tn-filter-input::placeholder { color: var(--muted); } .tn-filter-input:focus { border-color: var(--accent); background: var(--surface2); } .tn-filter-count { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.06em; white-space: nowrap; } .tn-filter-empty { color: var(--muted); font-style: italic; font-size: 0.85rem; padding: 1.5rem 0; } /* ── SLOT FILTER BAR ─────────────────────────────────────────────────── */ .tn-slot-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; } .tn-slot-btn { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .tn-slot-btn:hover { border-color: var(--accent); color: var(--text); } .tn-slot-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ── PAGE NAV (site-wide) ────────────────────────────────────────────── */ .pg-nav { border-bottom: 1px solid var(--border); background: var(--bg); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; transition: background 0.25s, border-color 0.25s; } .pg-nav::-webkit-scrollbar { display: none; } .pg-nav-inner { display: flex; align-items: stretch; padding: 0 clamp(0.75rem, 4vw, 3rem); min-width: max-content; } .pg-nav-link { font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 0.6rem 0.3rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .pg-nav-link:hover { color: var(--text); background: var(--surface); border-bottom-color: var(--surface2); } .pg-nav-link:not(:last-child)::after { content: '·'; margin-left: 0.3rem; color: var(--border); pointer-events: none; } .pg-nav-link--active { color: var(--accent); border-bottom-color: var(--accent); } /* ── DAY NAV ─────────────────────────────────────────────────────────── */ .day-nav { background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; transition: background 0.25s, border-color 0.25s; } .day-nav::-webkit-scrollbar { display: none; } .day-nav-inner { display: flex; min-width: max-content; padding: 0 clamp(0.75rem, 4vw, 3rem); } .day-btn { display: flex; flex-direction: column; align-items: center; padding: 0.75rem clamp(0.6rem, 2vw, 1.2rem); text-decoration: none; color: var(--muted); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; gap: 0.18rem; -webkit-tap-highlight-color: transparent; } .day-btn:hover { color: var(--text); } .day-btn.active { color: var(--ch-color); border-bottom-color: var(--ch-color); } .day-num { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; line-height: 1; color: inherit; } .day-name-short { display: inline; } .day-name-full { display: none; } @media (min-width: 900px) { .day-name-short { display: none; } .day-name-full { display: inline; text-transform: capitalize; } } .day-date { color: inherit; font-size: 0.66rem; } /* ── CHANNEL PILLS (desktop only) ───────────────────────────────────── */ .ch-nav { background: var(--bg); border-bottom: 1px solid var(--border); transition: background 0.25s, border-color 0.25s; } .ch-nav-inner { display: flex; gap: 0.38rem; min-width: max-content; } .ch-pill { padding: 0.26rem 0.68rem; border-radius: 100px; font-size: 0.68rem; font-weight: 500; text-decoration: none; color: var(--muted); border: 1px solid var(--border); transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; } .ch-pill:hover, .ch-pill.active { background: var(--ch-color); color: #fff; border-color: var(--ch-color); } /* "Toate canalele" trigger — leftmost pill on desktop */ .ch-pill--all { display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit; cursor: pointer; background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 600; position: sticky; left: 0; z-index: 2; box-shadow: 4px 0 6px -4px var(--bg); } .ch-pill--all:hover { background: #e91e85; color: #fff; border-color: #e91e85; } .ch-pill-all-icon { font-size: 0.8rem; line-height: 1; } /* ── CHANNEL NAV FILTER ──────────────────────────────────────────────── */ .ch-nav-filter-row { padding: 0.45rem clamp(0.75rem, 4vw, 3rem) 0; display: flex; align-items: center; gap: 0.5rem; } .ch-nav-filter-row .ch-nav-filter-wrap { flex: 1; } .ch-nav-filter-row .theme-toggle { display: none; } .ch-nav-filter-wrap { display: flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 0.2rem 0.65rem; max-width: 240px; transition: border-color 0.2s, background 0.2s; } .ch-nav-filter-wrap:focus-within { border-color: var(--ch-color); background: var(--surface2); } .ch-filter-icon { font-size: 1rem; color: var(--muted); line-height: 1; flex-shrink: 0; transition: color 0.2s; } .ch-nav-filter-wrap:focus-within .ch-filter-icon { color: var(--ch-color); } .ch-nav-filter { flex: 1; background: transparent; border: none; outline: none; font-size: 0.7rem; color: var(--text); font-family: 'DM Sans', sans-serif; min-width: 0; } .ch-nav-filter::placeholder { color: var(--muted); } /* Remove native clear button on WebKit — we rely on the browser's built-in */ .ch-nav-filter::-webkit-search-cancel-button { cursor: pointer; } .ch-filter-count { font-family: 'DM Mono', monospace; font-size: 0.58rem; color: var(--muted); white-space: nowrap; transition: color 0.2s; } /* Scroll wrapper replaces overflow on .ch-nav itself */ .ch-nav-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0.5rem clamp(0.75rem, 4vw, 3rem) 0.6rem; cursor: grab; overscroll-behavior-x: contain; } .ch-nav-scroll::-webkit-scrollbar { display: none; } .ch-nav-scroll.is-dragging { cursor: grabbing; user-select: none; } .ch-nav-scroll.is-dragging .ch-pill { pointer-events: none; } /* "No channels" message inside pill row */ .ch-no-results { font-size: 0.7rem; color: var(--muted); white-space: nowrap; padding: 0.25rem 0.4rem; font-style: italic; } /* ── DRAWER FILTER ───────────────────────────────────────────────────── */ .ch-drawer-filter-wrap { display: flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.75rem; margin-bottom: 0.75rem; transition: border-color 0.2s, background 0.2s; } .ch-drawer-filter-wrap:focus-within { border-color: var(--ch-color); background: var(--surface2); } .ch-drawer-filter-wrap .ch-filter-icon { color: var(--muted); transition: color 0.2s; } .ch-drawer-filter-wrap:focus-within .ch-filter-icon { color: var(--ch-color); } .ch-drawer-filter { flex: 1; background: transparent; border: none; outline: none; font-size: 0.85rem; color: var(--text); font-family: 'DM Sans', sans-serif; min-width: 0; } .ch-drawer-filter::placeholder { color: var(--muted); } .ch-drawer-filter::-webkit-search-cancel-button { cursor: pointer; } #ch-drawer-list .ch-no-results { padding: 1rem 0.5rem; font-size: 0.85rem; color: var(--muted); font-style: italic; } /* ── JUMP BAR ────────────────────────────────────────────────────────── */ .jump-bar { padding: 0.55rem clamp(0.75rem, 4vw, 3rem); background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; transition: background 0.25s, border-color 0.25s; } .jump-label { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .jump-btn { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.3rem 0.82rem; background: var(--accent); color: var(--jump-text); font-size: 0.71rem; font-weight: 500; border-radius: 2px; text-decoration: none; letter-spacing: 0.03em; transition: opacity 0.2s; -webkit-tap-highlight-color: transparent; } .jump-btn::before { content: '↓'; font-size: 0.76rem; } .jump-btn:hover { opacity: 0.82; } .jump-btn:active { opacity: 0.68; } /* ── MAIN ────────────────────────────────────────────────────────────── */ main { max-width: 860px; margin: 0 auto; padding: clamp(0.75rem, 3vw, 2rem) clamp(0.75rem, 4vw, 3rem) 4rem; } /* ── SECTION LABELS ──────────────────────────────────────────────────── */ .section-label { display: flex; align-items: center; gap: 0.75rem; margin: 2.2rem 0 0.85rem; scroll-margin-top: 8rem; /* clears sticky header + day/channel nav stack */ } .section-label-text { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.25s; } .section-label-line { flex: 1; height: 1px; background: var(--border); transition: background 0.25s; } .tonight-label .section-label-text { color: var(--accent); } .section-label-dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; } /* ── SHOW ROW ────────────────────────────────────────────────────────── */ .show-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 0 1rem; padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--border); align-items: start; cursor: pointer; transition: background 0.15s, border-color 0.25s; border-radius: 4px; margin: 0 -0.5rem; animation: fadeUp 0.3s ease forwards; -webkit-tap-highlight-color: transparent; } .show-row:hover { background: var(--row-hover); } .show-row:focus-visible { outline: 2px solid var(--ch-color); outline-offset: 2px; } .show-row.tonight-row { background: var(--tonight-bg); } .show-row.tonight-row:hover { background: var(--tonight-hover); } /* ── TIME ────────────────────────────────────────────────────────────── */ .show-time { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--muted); padding-top: 0.12rem; letter-spacing: 0.02em; line-height: 1.5; transition: color 0.25s; } .time-big { display: block; font-size: 0.93rem; color: var(--text); font-weight: 400; letter-spacing: -0.01em; transition: color 0.25s; } .tonight-row .time-big { color: var(--accent); } /* ── BODY ────────────────────────────────────────────────────────────── */ .show-body { min-width: 0; } .show-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--text); margin-bottom: 0.28rem; letter-spacing: -0.01em; transition: color 0.25s; } .show-title-link { color: inherit; text-decoration: none; } .show-title-link:hover { color: var(--accent); } .show-meta { display: flex; flex-wrap: wrap; gap: 0.32rem; align-items: center; margin-bottom: 0.28rem; } .ep-badge { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: var(--ch-color); background: var(--ch-dim); padding: 0.11rem 0.36rem; border-radius: 2px; letter-spacing: 0.05em; transition: color 0.25s, background 0.25s; } .badge-film { color: var(--accent); background: var(--accent-dim); } .genre-tag { font-size: 0.63rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; transition: color 0.25s; } .show-tagline { font-size: 0.81rem; color: var(--muted); line-height: 1.5; transition: color 0.25s; } /* ── EXPANDABLE ──────────────────────────────────────────────────────── */ .show-expand { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .show-row.expanded .show-expand { max-height: 700px; transition: max-height 0.38s ease; } .show-desc { font-size: 0.8rem; color: var(--desc-text); line-height: 1.65; margin-top: 0.5rem; transition: color 0.25s; } .show-img { display: block; max-height: 200px; object-fit: cover; border-radius: 3px; margin-top: 0.65rem; } /* Always-visible variant — outside .show-expand, no click needed */ .show-img--always { max-width: 100%; margin-top: 0.5rem; } .movie-pill { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.64rem; font-weight: 500; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 0.18rem 0.46rem; border-radius: 2px; text-decoration: none; letter-spacing: 0.04em; margin-top: 0.55rem; transition: background 0.2s, color 0.2s; } .movie-pill:hover { background: var(--accent); color: var(--jump-text); } .movie-pill--stiri { margin-left: 0.35rem; background: #e91e85; color: #fff; border-color: #e91e85; } .movie-pill--stiri:hover { background: transparent; color: #e91e85; } /* ── EXPAND HINT ─────────────────────────────────────────────────────── */ .expand-hint { font-size: 0.6rem; color: var(--accent); font-weight: 600; letter-spacing: 0.08em; margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.2rem; text-transform: uppercase; user-select: none; transition: color 0.25s; } .expand-hint-text { color: inherit; } .arrow { display: inline-block; transition: transform 0.22s; } .show-row.expanded .arrow { transform: rotate(180deg); } .show-row.expanded .expand-hint-text { display: none; } /* ── NEW / LIVE BADGE ────────────────────────────────────────────────── */ .live-dot { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.6rem; font-weight: 500; color: #fff; background: var(--ch-color); padding: 0.12rem 0.4rem; border-radius: 2px; letter-spacing: 0.07em; text-transform: uppercase; } .live-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ffffffd9; animation: pulse 1.3s infinite; } /* Local time (shown by JS only when visitor is outside London timezone) */ .time-local { display: none; font-family: 'DM Mono', monospace; font-size: 0.82rem; color: var(--muted); letter-spacing: -0.01em; margin-top: 0.05rem; } /* Duration under time */ .time-dur { display: block; font-size: 0.62rem; color: var(--muted); margin-top: 0.1rem; letter-spacing: 0.02em; transition: color 0.25s; } /* channel pill column in show-row: align to top like the time column */ .show-row .row-ch-pills { padding-top: 0.12rem; } /* Live badge variant (pulsing red) */ .live-dot--live { background: #d62828; animation: none; } .live-dot--live::before { background: #fff; animation: pulse 1s infinite; } /* TMDB rating tag */ .rating-tag { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: var(--accent); letter-spacing: 0.04em; transition: color 0.25s; } /* Channel logo badge — overrides clip-path and background from .ch-badge */ .ch-badge--logo { display: flex; align-items: center; justify-content: center; background: none !important; clip-path: none !important; } .ch-badge--logo img { width: 80px; height: 80px; object-fit: contain; } /* ── FAV TOAST ───────────────────────────────────────────────────────── */ #fav-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 100px; padding: 0.5rem 1.2rem; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 9999; } #fav-toast.fav-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); } #fav-toast.fav-toast--hide { opacity: 0; transform: translateX(-50%) translateY(1rem); } /* ── FAVOURITE BUTTON — PNG sprite (heart-yellow-60.png) ─────────────── */ /* * heart-yellow-60.png is a 125×60 horizontal sprite: * x=0–60 → yellow heart (active / favourited) * x=65–125 → grey heart (inactive / not favourited) * * At display size 24×24px: * background-size: 50px 24px (125×0.4 × 60×0.4) * inactive → background-position: -26px 0 (65×0.4 = 26px offset) * active → background-position: 0 0 */ .fav-btn { width: 32px; height: 32px; flex-shrink: 0; background: url('/heart-yellow-60.png') -32px 0 / 64px 32px no-repeat; border: none; cursor: pointer; padding: 0; opacity: 0.65; border-radius: 4px; transition: background-position 0.15s, transform 0.15s, opacity 0.15s; -webkit-tap-highlight-color: transparent; } .fav-btn:hover { opacity: 1; transform: scale(1.12); } .fav-btn.active { background-position: 0 0; opacity: 1; } /* yellow */ .fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; } /* Drawer row — scaled up to 28×28 */ .ch-drawer-item .fav-btn { width: 28px; min-width: 28px; height: 28px; flex-shrink: 0; /* 125×(28/60)=58px wide; grey heart offset: 65×(28/60)≈30px */ background-size: 58px 28px; background-position: -29px center; /* inactive: grey */ padding: 0.3rem 0.65rem 0.3rem 0.25rem; box-sizing: content-box; } .ch-drawer-item .fav-btn.active { /* Show both sprites: yellow heart (left) + grey heart (right) */ background-size: 60px 28px; background-position: 14px center; } /* ── FAVOURITE YELLOW-SHADE on links ─────────────────────────────────── */ .ch-pill.is-fav { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); } .ch-drawer-item.is-fav .ch-drawer-link { color: var(--accent); background: var(--accent-dim); } /* ── MOBILE BOTTOM TOOLBAR ────────────────────────────────────────────── Fixed bar visible on ≤768px screens. Houses: Channels · Tonight · Theme toggle ──────────────────────────────────────────────────────────────────── */ .mobile-toolbar { display: none; /* flex at ≤768px */ position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--bg-header); border-top: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 180; align-items: stretch; transition: background 0.25s, border-color 0.25s; } .toolbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; border-right: 1px solid var(--border); color: var(--muted); font-size: 0.58rem; font-family: 'DM Sans', sans-serif; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color 0.2s, background 0.2s, border-color 0.25s; padding: 0; } .toolbar-btn:last-child { border-right: none; } .toolbar-btn:active { background: var(--surface2); } .toolbar-btn.active { color: var(--ch-color); } .toolbar-icon { font-size: 1.2rem; line-height: 1; } /* ── RELATED CHANNELS ────────────────────────────────────────────────── */ .related-channels { max-width: var(--content-max, 900px); margin: 2rem auto 0; padding: 0 clamp(0.75rem, 3vw, 2rem) 1.5rem; border-top: 1px solid var(--border); } .related-channels__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.5rem; } .related-channels__list { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ── FOOTER ──────────────────────────────────────────────────────────── */ footer { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: 0.66rem; border-top: 1px solid var(--border); font-family: 'DM Mono', monospace; letter-spacing: 0.05em; transition: color 0.25s, border-color 0.25s; } /* ── ANIMATIONS ──────────────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } } /* ── Timezone notice ─────────────────────────────────────────────────── */ .tz-notice { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: var(--muted); text-align: center; padding: 0.35rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border); } /* ── tn-pages.css — Shared styles for tonight / today / tomorrow / sport / series ──────── * * Pages override the default 900px layout width via $extra_head_css: * :root { --tn-w: 1200px; } * ─────────────────────────────────────────────────────────────────────────────────────── */ :root { --tn-w: 1200px; } /* ── Hero ────────────────────────────────────────────────────────────── */ .tn-hero { max-width:var(--tn-w,900px); margin:0 auto; padding:clamp(1.5rem,4vw,2.5rem) clamp(.75rem,4vw,2rem) .5rem; } .tn-hero h1 { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(1.6rem,5vw,2.8rem); letter-spacing:-.03em; line-height:1.1; margin:0 0 .35rem; } .tn-hero-sub { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .tn-hero-sub strong { color:var(--accent); font-weight:400; } /* ── Quicklinks ──────────────────────────────────────────────────────── */ .tn-quicklinks { max-width:var(--tn-w,900px); margin:1rem auto 1rem 0; padding:0 clamp(.75rem,4vw,2rem); display:flex; flex-wrap:wrap; gap:.5rem; } .tn-ql { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-decoration:none; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:.3rem .75rem; transition:color .15s,border-color .15s; } .tn-ql:hover { color:var(--accent); border-color:var(--accent); } .tn-ql.tn-ql--active { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); } /* ── Main / sections ─────────────────────────────────────────────────── */ .tn-main { max-width:var(--tn-w,900px); margin:0 auto; padding:1.2rem clamp(.75rem,4vw,2rem) 4rem; } .tn-section { margin-bottom:2.5rem; } .tn-section-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); } .tn-section-title { font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; } .tn-section-sub { font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:auto; } .tn-section-label { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } .tn-section-label--now { color:#22c55e; } .tn-section-label--soon { color:var(--accent); } .tn-section-label--slot { color:var(--accent); } .tn-section-label--ended { color:var(--muted); } .tn-section-count { font-family:'DM Mono',monospace; font-size:.55rem; color:var(--muted); letter-spacing:.08em; } .tn-see-more { font-family:'DM Mono',monospace; font-size:.62rem; color:var(--accent); text-decoration:none; border:1px solid var(--accent); border-radius:4px; padding:.25rem .6rem; letter-spacing:.06em; transition:background .15s; white-space:nowrap; margin-left:auto; } .tn-see-more:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); } .tn-empty { color:var(--muted); font-style:italic; font-size:.85rem; padding:1rem 0; } /* ── Movie grid ──────────────────────────────────────────────────────── */ .mc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } /* ── Movie card ──────────────────────────────────────────────────────── */ .mc { background:var(--surface); border-radius:6px; overflow:hidden; transition:transform .15s; content-visibility:auto; contain-intrinsic-size:0 320px; display:flex; flex-direction:column; } .mc:hover { transform:translateY(-2px); } .mc.mc--ended { opacity:.55; } .mc-img-link { display:block; text-decoration:none; flex-shrink:0; } .mc-thumb { position:relative; width:100%; aspect-ratio:16/9; background:var(--surface2); overflow:hidden; } .mc-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; } .mc-img-link:hover .mc-img { transform:scale(1.04); } .mc-img-ph { display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:900; font-size:1.6rem; color:var(--muted); width:100%; height:100%; } .mc-badge { position:absolute; top:.5rem; left:.5rem; font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .5rem; border-radius:3px; line-height:1.4; pointer-events:none; } .mc-badge--now { background:#22c55e; color:#000; animation:pulse-now 2s ease-in-out infinite; } .mc-badge--ended { background:var(--surface2); color:var(--muted); border:1px solid var(--border); } @keyframes pulse-now { 0%,100% { opacity:1; } 50% { opacity:.7; } } .mc-progress { position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(0,0,0,.4); pointer-events:none; display:none; } .mc-progress-bar { height:100%; width:0%; background:#f472b6; transition:width .6s linear; } .mc-body { padding:.7rem .75rem .85rem; display:flex; flex-direction:column; gap:.3rem; flex:1; } .mc-channels { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .35rem; } .mc-time { font-family:'DM Mono',monospace; font-size:.58rem; color:var(--muted); letter-spacing:.06em; flex-shrink:0; } .mc-ch-pill { font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600; color:var(--accent); text-decoration:none; background:var(--surface2); border:1px solid var(--accent); border-radius:3px; padding:.12rem .5rem; white-space:nowrap; transition:color .15s,border-color .15s,background .15s; line-height:1.6; } .mc-ch-pill:hover { color:#fff; border-color:var(--accent); background:var(--accent); } .mc-title-link { text-decoration:none; display:block; margin-top:.1rem; } .mc-title { font-family:'Playfair Display',serif; font-size:clamp(.82rem,1.4vw,.95rem); font-weight:700; color:var(--text); line-height:1.25; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s; } .mc-title-link:hover .mc-title,.mc:hover .mc-title { color:var(--accent); } .mc-meta { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-top:.1rem; } .mc-rating { font-family:'DM Mono',monospace; font-size:.6rem; color:#f59e0b; letter-spacing:.04em; } .mc-genre { font-family:'DM Sans',sans-serif; font-size:.58rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:3px; padding:.1rem .35rem; white-space:nowrap; } .mc-tag { font-size:.72rem; color:var(--desc-text); line-height:1.4; margin:.2rem 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ── Shared sticky header ────────────────────────────────────────────── */ .tn-header, .index-header, .sh-header { position:sticky; top:0; z-index:200; background:var(--bg-header); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(.75rem,4vw,3rem); gap:1rem; transition:background .25s,border-color .25s; } .tn-header-left { display:flex; align-items:center; gap:.75rem; padding:.85rem 0; min-width:0; flex-shrink:0; } .tn-header-center { flex:1; display:flex; justify-content:center; align-items:center; min-width:0; overflow:hidden; } .tn-header-right { display:flex; align-items:center; gap:.55rem; flex-shrink:0; } .tn-back { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:.3rem; white-space:nowrap; flex-shrink:0; transition:color .15s; } .tn-back:hover { color:var(--text); } .tn-site-title { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(.85rem,2.5vw,1.35rem); letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tn-header .tn-hero { max-width:none; margin:0; padding:0; text-align:center; min-width:0; } .tn-header .tn-hero h1 { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:-.02em; margin:0 0 .15rem; line-height:1.1; overflow-wrap:anywhere; } .tn-header .tn-hero .tn-hero-sub { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── Sport rows ──────────────────────────────────────────────────────── */ .sp-row { display:grid; grid-template-columns:3.5rem 1fr auto; align-items:start; gap:.5rem 1rem; padding:.65rem .75rem; border-bottom:1px solid var(--border); transition:background .15s; } .sp-row:last-child { border-bottom:none; } .sp-row:hover { background:var(--surface2); } .sp-time { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; padding-top:.15rem; } .sp-info { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .6rem; } .sp-title { font-size:.88rem; font-weight:500; color:var(--text); text-decoration:none; } a.sp-title:hover { color:var(--ch-color); text-decoration:underline; } .sp-live-dot { font-family:'DM Mono',monospace; font-size:.58rem; color:#22c55e; letter-spacing:.06em; white-space:nowrap; } .sp-tag { font-size:.75rem; color:var(--desc-text); width:100%; } /* ── Series rows ─────────────────────────────────────────────────────── */ .sr-row { display:grid; grid-template-columns:3.5rem 1fr auto; align-items:start; gap:.4rem .9rem; padding:.6rem .75rem; border-bottom:1px solid var(--border); transition:background .15s; } .sr-row:last-child { border-bottom:none; } .sr-row:hover { background:var(--surface2); } .sr-time { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; padding-top:.1rem; } .sr-info { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; } .sr-title { font-size:.88rem; font-weight:500; color:var(--text); } .sr-ep { font-family:'DM Mono',monospace; font-size:.6rem; color:var(--accent); letter-spacing:.06em; white-space:nowrap; } .sr-tag { font-size:.75rem; color:var(--desc-text); width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ── Index page ──────────────────────────────────────────────────────── */ .index-logo-wrap { display:flex; align-items:center; gap:.75rem; padding:.85rem 0; } .index-site-title { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(.95rem,2.5vw,1.35rem); letter-spacing:-.02em; line-height:1; } .index-site-sub { display:block; font-size:.52em; font-family:'DM Sans',sans-serif; font-weight:300; color:var(--muted); letter-spacing:.12em; margin-top:.2rem; } .index-header-right { display:flex; align-items:center; gap:.55rem; flex-shrink:0; } .index-search-wrap { display:flex; align-items:center; gap:.45rem; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:.3rem .8rem; min-width:min(280px,38vw); transition:border-color .2s,background .2s; } .index-search-wrap:focus-within { border-color:var(--accent); background:var(--surface2); } .index-search-icon { font-size:.95rem; color:var(--muted); flex-shrink:0; } .index-search { flex:1; background:transparent; border:none; outline:none; font-size:.75rem; color:var(--text); font-family:'DM Sans',sans-serif; min-width:0; } .index-search::placeholder { color:var(--muted); } .index-search::-webkit-search-cancel-button { cursor:pointer; } .index-main { max-width:1200px; margin:0 auto; padding:clamp(.75rem,3vw,1.5rem) clamp(.75rem,4vw,2rem) 4rem; } .index-section-label { display:flex; align-items:center; gap:.75rem; margin:1.8rem 0 .9rem; } .index-section-label-text { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .index-section-label-line { flex:1; height:1px; background:var(--border); } .ch-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; } .ch-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:border-color .2s,background .2s,transform .15s; display:flex; flex-direction:column; } .ch-card:hover { border-color:var(--ch-color); transform:translateY(-1px); } .ch-card-head { display:flex; align-items:center; gap:.65rem; padding:.65rem .85rem; border-bottom:1px solid var(--border); text-decoration:none; } .ch-card-logo { width:80px; height:40px; min-width:80px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0; background:none; box-shadow:none; text-decoration:none; flex-shrink:0; transition:opacity .15s; } a.ch-card-logo:hover { opacity:.75; } .ch-card-logo img { width:80px; height:40px; object-fit:contain; } .ch-card-logo-fallback { font-family:'Playfair Display',serif; font-weight:900; font-size:1rem; text-transform:uppercase; background:var(--ch-dim); width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); } .ch-card-name { font-family:'Playfair Display',serif; font-weight:700; font-size:.85rem; color:var(--text); text-decoration:none; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s; margin-right:.25rem; } .ch-card:hover .ch-card-name { color:var(--ch-color); } .ch-card-guide-link { display:inline-block; align-self:flex-start; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:500; color:var(--accent); text-decoration:none; border:1.5px solid var(--accent); border-radius:5px; padding:.35rem .85rem; margin-top:auto; white-space:nowrap; transition:background .15s,color .15s; } .ch-card-guide-link:hover { background:var(--accent); color:#fff; } .ch-card-body { padding:.7rem .85rem .85rem; flex:1; display:flex; flex-direction:column; gap:.55rem; } .ch-card-row-label { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem; } .ch-card-now .ch-card-row-label { color:var(--accent); } .ch-card-show-title { font-size:.85rem; font-weight:500; color:var(--text); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ch-card-show-meta { font-family:'DM Mono',monospace; font-size:.62rem; color:var(--muted); margin-top:.1rem; } .ch-card-show-tagline { font-size:.72rem; color:var(--desc-text); line-height:1.4; margin-top:.15rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .ch-card-progress { height:3px; background:var(--surface2); border-radius:2px; margin-top:.45rem; overflow:hidden; } .ch-card-progress-bar { height:100%; background:var(--accent); border-radius:2px; transition:width 1s linear; } .ch-card-divider { height:1px; margin:0 -.85rem; } .ch-card-empty { font-size:.75rem; color:var(--muted); font-style:italic; padding:.5rem 0; } #no-cards-msg { grid-column:1/-1; padding:3rem 0; text-align:center; color:var(--muted); font-size:.85rem; font-style:italic; } #fav-section { margin-bottom:.5rem; } #fav-section .index-section-label-line { background:color-mix(in srgb,var(--accent) 30%,var(--border)); } .ch-card-head .fav-btn { margin-left:auto; } /* ── Movie info page (movieInfo.php) ─────────────────────────────────── */ .sh-header-left { display:flex; align-items:center; gap:.75rem; padding:.85rem 0; min-width:0; } .sh-back { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.06em; color:var(--muted); text-decoration:none; white-space:nowrap; flex-shrink:0; transition:color .15s; } .sh-back:hover { color:var(--text); } .sh-header-title { font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(.85rem,2vw,1.1rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-header-right { display:flex; align-items:center; gap:.55rem; flex-shrink:0; } .mi-wrap { max-width:860px; margin:2rem auto; padding:clamp(.75rem,3vw,2rem) clamp(.75rem,4vw,3rem) 4rem; } .mi-backdrop { width:100%; max-height:320px; object-fit:cover; border-radius:6px; margin-bottom:1.5rem; display:block; } .mi-grid { display:grid; grid-template-columns:160px 1fr; gap:1.5rem 2rem; margin-bottom:2rem; } .mi-poster { width:100%; border-radius:4px; box-shadow:0 4px 20px #00000066; } .mi-title { font-family:'Playfair Display',serif; font-size:clamp(1.4rem,4vw,2rem); font-weight:900; line-height:1.15; margin:0 0 .4rem; color:var(--text); } .mi-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:1rem; } .mi-overview { font-size:.9rem; line-height:1.7; color:var(--desc-text); margin-top:.75rem; } .mi-cast-title { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; } .mi-cast-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:1rem; } .mi-cast-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; } .mi-cast-photo { width:80px; height:80px; border-radius:50%; object-fit:cover; background:var(--surface2); } .mi-cast-no-photo { width:80px; height:80px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:900; font-size:1.4rem; color:var(--muted); } .mi-cast-name { font-size:.78rem; font-weight:500; color:var(--text); line-height:1.2; } .mi-cast-char { font-size:.68rem; color:var(--muted); line-height:1.2; } /* ── Show page (show.php) ────────────────────────────────────────────── */ .sh-hero { position:relative; background:var(--surface); border-bottom:1px solid var(--border); overflow:hidden; } .sh-hero-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:.2; pointer-events:none; display:block; } .sh-hero-inner { position:relative; max-width:1200px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem) clamp(.75rem,4vw,2rem); } .sh-hero-title { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(1.5rem,5vw,2.8rem); letter-spacing:-.03em; line-height:1.1; margin:0 0 .65rem; } .sh-hero-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.85rem; } .sh-hero-genre { font-family:'DM Sans',sans-serif; font-size:.63rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:3px; padding:.15rem .5rem; text-transform:uppercase; letter-spacing:.06em; } .sh-hero-rating { font-family:'DM Mono',monospace; font-size:.7rem; color:#f59e0b; letter-spacing:.04em; } .sh-hero-tmdb { font-family:'DM Mono',monospace; font-size:.6rem; color:var(--accent); text-decoration:none; letter-spacing:.05em; border:1px solid var(--accent-border); padding:.15rem .5rem; border-radius:3px; transition:background .15s; } .sh-hero-tmdb:hover { background:var(--accent-dim); } .sh-hero-stiri { background:#e91e85; color:#fff; border-color:#e91e85; } .sh-hero-stiri:hover { background:transparent; color:#e91e85; border-color:#e91e85; } .sh-hero-desc { font-size:.88rem; color:var(--desc-text); line-height:1.65; max-width:680px; margin:0; } .sh-main { max-width:1200px; margin:0 auto; padding:1.5rem clamp(.75rem,4vw,2rem) 4rem; } .sh-section { margin-bottom:2rem; } .sh-date-head { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:.5rem .4rem; border-bottom:1px solid var(--border); margin:1.6rem 0 .4rem; display:flex; align-items:center; gap:.6rem; } .sh-date-head:first-of-type { margin-top:.4rem; } .sh-date-head.sh-date-today { color:var(--accent); } .sh-date-count { color:var(--muted); font-size:.55rem; } .sh-group-head { font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text); padding:.55rem .4rem .3rem; margin-top:.4rem; } .sh-group-head:first-of-type { margin-top:0; } .sh-airing { display:grid; grid-template-columns:3.5rem auto; gap:0 1rem; align-items:center; padding:.55rem .4rem; border-radius:4px; border-bottom:1px solid var(--border); transition:background .15s; } .sh-airing:last-child { border-bottom:none; } .sh-airing:hover { background:var(--row-hover); } .sh-airing.sh-airing--ended { opacity:.42; } .sh-airing.sh-airing--live { background:#22c55e0f; } .sh-airing-time { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; display:flex; align-items:center; } .sh-airing-time.sh-time--live { color:#22c55e; } .sh-airing-body { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; } .sh-airing-ch { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:500; color:var(--text); text-decoration:none; display:inline-block; transition:color .15s; } .sh-airing-ch:hover { color:var(--accent); } .sh-airing-ep { font-family:'DM Mono',monospace; font-size:.6rem; color:var(--muted); margin-top:.15rem; } .sh-live-dot { font-family:'DM Mono',monospace; font-size:.55rem; color:#22c55e; letter-spacing:.08em; text-transform:uppercase; padding-top:.15rem; animation:pulse-now 2s ease-in-out infinite; } .sh-empty { color:var(--muted); font-style:italic; font-size:.85rem; padding:1rem 0; } /* ── Page-specific overrides (scoped via body class) ─────────────────── */ .pg-today .tn-main, .pg-tomorrow .tn-main { padding:1.5rem clamp(.75rem,4vw,2rem) 4rem; } .pg-today .tn-section, .pg-tomorrow .tn-section { margin-bottom:3rem; } .pg-today .tn-section-head { border-bottom:2px solid var(--border); } .pg-tomorrow .mc { border:1px solid var(--border); } .pg-tomorrow .mc:hover { border-color:var(--accent); } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — all breakpoints below base rules Cascade order: min-width first, then max-width largest → smallest ═══════════════════════════════════════════════════════════════════ */ /* Large screens: ≥1024px — typography scale-up */ @media (min-width: 1024px) { html { font-size: 18px; } /* 1rem = 18px; all rem values scale up */ body { font-size: 1.2rem; } /* H1-equivalent */ .site-title { font-size: 1.7rem; margin-left: 5rem; } .index-site-title { font-size: 1.7rem; } /* Scale header fav button to match larger title */ .fav-btn--header { width: 32px; height: 32px; background-size: 64px 32px; background-position: -32px 0; /* grey: inactive */ } .fav-btn--header.active { background-position: 0 0; } /* H2-equivalent */ .show-title { font-size: 1.3rem; } .section-label-text { font-size: 0.72rem; } .index-section-label-text { font-size: 0.72rem; } /* H3-equivalent */ .ch-drawer-link { font-size: 1.15rem; } .day-num { font-size: 1.4rem; } /* Body text */ .show-tagline { font-size: 1rem; } .show-desc { font-size: 1rem; } .time-big { font-size: 1.1rem; } .time-dur { font-size: 0.72rem; } /* Meta / badge labels */ .ep-badge { font-size: 0.68rem; } .genre-tag { font-size: 0.72rem; } .ch-pill { font-size: 0.78rem; } .date-chip { font-size: 0.75rem; } /* Index / channel card scaling */ .ch-card-name { font-size: 1.05rem; } .ch-card-show-title { font-size: 1rem; } .ch-card-show-tagline { font-size: 0.88rem; } .ch-card-show-meta { font-size: 0.72rem; } .ch-card-row-label { font-size: 0.62rem; } .ch-grid { gap: 1rem; } .index-header-right .nav-toggle { display: none; } .logo > img { width: 80px; } } /* Tablet: ≤1024px */ @media (max-width: 1024px) { .pg-nav-link { padding: 0.6rem 0.3rem; } .index-header-right .theme-toggle { display: none; } .mc-grid { grid-template-columns: repeat(3, 1fr); } } /* Mobile: ≤768px */ @media (max-width: 768px) { .sp-row { grid-template-columns: 3.5rem 1fr; } .sp-row .row-ch-pills { grid-column: 2; padding-top: 0.25rem; } /* Hide desktop-only elements */ .date-chip { display: none; } .ch-nav { display: none; } .theme-toggle { display: none; } .ch-drawer .theme-toggle { display: flex; } .ch-badge { display: none; } /* Show mobile controls */ .nav-toggle { display: flex; } .ch-drawer { width: 85vw; } .mobile-toolbar { display: flex; } /* Push content above fixed toolbar */ main { padding-bottom: 5.5rem; } /* Drawer fav buttons: always fully visible on mobile for easy tapping */ .ch-drawer-item .fav-btn { opacity: 1; } .ch-drawer-item.is-fav .ch-drawer-link { font-weight: 600; } .ch-drawer-item.is-fav .fav-btn:not(.active) { width: 32px; height: 32px; background-size: 64px 32px; background-position: -33px center; } .mc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; } .tn-header .tn-hero .tn-hero-sep { display: none; } .tn-header .tn-hero .tn-hero-stats { display: block; } } /* Small mobile: ≤480px */ @media (max-width: 480px) { .show-row { grid-template-columns: 48px 1fr auto; gap: 0 0.7rem; } .show-title { font-size: 0.92rem; } .time-big { font-size: 0.86rem; } .day-btn { padding: 0.85rem 0.65rem; min-height: 44px; } .day-num { font-size: 1.1rem; } .section-label { margin: 1.6rem 0 0.7rem; } .jump-label { display: none; } .mc-grid { grid-template-columns: 1fr; } .mi-grid { grid-template-columns: 1fr; } .mi-poster { max-width: 160px; } .mi-cast-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.75rem; } .tn-header-center { justify-content: flex-start; } .tn-header .tn-hero { text-align: left; } .ch-grid { grid-template-columns: 1fr; } .index-search-wrap { min-width: 0; flex: 1; } .ch-card-head .fav-btn { opacity: 1; } .ch-card[data-slug] .fav-btn.active { width: 32px; height: 32px; background-size: 64px 32px; background-position: 0 0; } .sh-live-dot { display: none; } /* No-image placeholder: collapse the 16/9 box to just fit the initial letter */ .mc-thumb:has(.mc-img-ph) { aspect-ratio: unset; height: 2.5rem; } .mc-thumb:has(.mc-img-ph) .mc-img-ph { font-size: 0; } } /* Very small: ≤360px */ @media (max-width: 360px) { .day-btn { padding: 0.85rem 0.55rem; min-height: 44px; } .day-num { font-size: 0.95rem; } .day-date { font-size: 0.58rem; } .show-row { grid-template-columns: 44px 1fr auto; gap: 0 0.6rem; } } /* ── PWA INSTALL BANNER ──────────────────────────────────────────────── */ #pwa-install-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,.18); transform: translateY(100%); transition: transform .3s ease; } #pwa-install-banner.pwa-banner--visible { transform: translateY(0); } #pwa-install-banner img { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; } .pwa-banner-text { flex: 1; min-width: 0; } .pwa-banner-text strong { display: block; font-size: .9rem; color: var(--text); line-height: 1.3; } .pwa-banner-text span { font-size: .78rem; color: var(--muted); } .pwa-banner-install { flex-shrink: 0; padding: 0.5rem 1rem; border-radius: 6px; border: none; background: var(--accent); color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .pwa-banner-install:hover { opacity: .88; } .pwa-banner-dismiss { flex-shrink: 0; width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .pwa-banner-dismiss:hover { background: var(--surface2); }