/* ═══════════════════════════════════════════════════════════════════ 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 ────────────────────────────────────────────────────── */ /* Dark (default) */ :root { --bg: #0d0d0f; --bg-header: rgba(13,13,15,0.93); --surface: #16161a; --surface2: #1e1e24; --border: #2a2a35; --text: #f0eff4; --muted: #7a7a8c; --dim: #3a3a48; --desc-text: #8a8a9a; --tonight-bg: rgba(245,200,66,0.06); --tonight-hover: rgba(245,200,66,0.11); --row-hover: #1e1e24; --ch-color: #E4173A; --ch-dim: rgba(228,23,58,0.15); --accent: #f5c842; --accent-dim: rgba(245,200,66,0.12); --accent-border: rgba(245,200,66,0.25); --jump-text: #0d0d0f; --theme-icon: '☀'; } /* Light — applied via [data-theme="light"] on */ [data-theme="light"] { --bg: #f4f3ef; --bg-header: rgba(244,243,239,0.94); --surface: #eae8e2; --surface2: #dedad0; --border: #ccc9be; --text: #18171a; --muted: #65626c; --dim: #b0adb8; --desc-text: #56535f; --tonight-bg: rgba(155,110,0,0.07); --tonight-hover: rgba(155,110,0,0.13); --row-hover: #dedad0; --ch-color: #C7102E; --ch-dim: rgba(199,16,46,0.1); --accent: #a07000; --accent-dim: rgba(160,112,0,0.1); --accent-border: rgba(160,112,0,0.28); --jump-text: #fff; --theme-icon: '☾'; } /* Honour OS preference when no explicit choice is saved */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f4f3ef; --bg-header: rgba(244,243,239,0.94); --surface: #eae8e2; --surface2: #dedad0; --border: #ccc9be; --text: #18171a; --muted: #65626c; --dim: #b0adb8; --desc-text: #56535f; --tonight-bg: rgba(155,110,0,0.07); --tonight-hover: rgba(155,110,0,0.13); --row-hover: #dedad0; --ch-color: #C7102E; --ch-dim: rgba(199,16,46,0.1); --accent: #a07000; --accent-dim: rgba(160,112,0,0.1); --accent-border: rgba(160,112,0,0.28); --jump-text: #fff; --theme-icon: '☾'; } } /* ── 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; } /* ── 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; } /* .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: none; /* block at ≤768px */ position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,0.52); 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: none; /* block at ≤768px */ position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 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; } 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; } /* 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.8rem 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); } /* ── 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-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); } /* ── CHANNEL NAV FILTER ──────────────────────────────────────────────── */ .ch-nav-filter-row { padding: 0.45rem clamp(0.75rem, 4vw, 3rem) 0; } .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; } .ch-nav-scroll::-webkit-scrollbar { display: 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; 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 both; -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-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; width: 100%; max-height: 200px; object-fit: cover; border-radius: 3px; margin-top: 0.65rem; } .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); } /* ── EXPAND HINT ─────────────────────────────────────────────────────── */ .expand-hint { font-size: 0.6rem; color: var(--dim); font-weight: 500; 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; } .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: rgba(255,255,255,0.85); animation: pulse 1.3s infinite; } /* 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; } /* 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; } /* ── 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: 25px; height: 25px; flex-shrink: 0; background: url('/heart-yellow-60.png') -25px 0 / 50px 25px no-repeat; border: none; cursor: pointer; padding: 0; opacity: 0.65; 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 */ /* 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.8rem 0.65rem 0.8rem 0.25rem; box-sizing: content-box; } .ch-drawer-item .fav-btn.active { /* Show both sprites: yellow heart (left) + grey heart (right) */ background-size: 58px 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(--dim); 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); } } /* ── RESPONSIVE ──────────────────────────────────────────────────────── */ /* Tablet + mobile: ≤768px */ @media (max-width: 768px) { /* Hide date chip and desktop channel pills */ .date-chip { display: none; } .ch-nav { display: none; } /* Show mobile controls */ .nav-toggle { display: flex; } .ch-overlay { display: block; } .ch-drawer { display: block; width: 85vw} .mobile-toolbar { display: flex; } /* Push content above toolbar */ main { padding-bottom: 5.5rem; } /* Drawer fav buttons: always fully visible on mobile for easy tapping */ .ch-drawer-item .fav-btn { opacity: 1; } /* Favourite channels in drawer: bold name + larger heart button */ .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; /* grey inactive */ } } /* Mobile: ≤480px */ @media (max-width: 480px) { .show-row { grid-template-columns: 48px 1fr; gap: 0 0.7rem; } .show-title { font-size: 0.92rem; } .time-big { font-size: 0.86rem; } .day-btn { padding: 0.65rem 0.65rem; } .day-num { font-size: 1.1rem; } .section-label { margin: 1.6rem 0 0.7rem; } /* Jump bar on mobile: label hidden to save space */ .jump-label { display: none; } } /* Very small: ≤360px */ @media (max-width: 360px) { .day-btn { padding: 0.55rem 0.48rem; } .day-num { font-size: 0.95rem; } .day-date { font-size: 0.58rem; } .show-row { grid-template-columns: 44px 1fr; gap: 0 0.6rem; } } /* ── LARGE SCREEN TYPOGRAPHY (≥1024px) ──────────────────────────────── */ /* * Minimum body text: 1.2rem. * Root font-size bumped to 18px so all rem values scale up uniformly. * Explicit overrides for key heading-level elements. */ @media (min-width: 1024px) { html { font-size: 18px; } /* 1rem = 18px; scales all rem values */ body { font-size: 1.2rem; } /* body paragraphs: 21.6px minimum */ /* ── H1-equivalent ── */ .site-title { font-size: 1.7rem; } .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; /* yellow: active */ } /* ── H2-equivalent (section / show title) ── */ .show-title { font-size: 1.3rem; } .section-label-text { font-size: 0.72rem; } /* mono label, keep compact */ .index-section-label-text { font-size: 0.72rem; } /* ── H3-equivalent (card / drawer names) ── */ .ch-drawer-link { font-size: 1.15rem; } .day-num { font-size: 1.4rem; } /* ── Body text elements ── */ .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 — intentionally smaller but still scaled ── */ .ep-badge { font-size: 0.68rem; } .genre-tag { font-size: 0.72rem; } .ch-pill { font-size: 0.78rem; } .date-chip { font-size: 0.75rem; } }