/* Theme Name: MS EPG Theme Theme URI: https://github.com/your-repo/ms-epg-theme Description: A lightweight, modern, high-speed WordPress theme for TV Electronic Programme Guide (EPG) websites. Version: 1.0.5 Author: MS EPG Text Domain: ms-epg-theme License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: epg, tv, guide, lightweight, minimal, dark-mode, responsive */ /* ========================================================= 0. DESIGN TOKENS ========================================================= */ :root { /* Palette — light mode */ --bg: #FBFAF7; --bg-2: #F3F2EE; --bg-3: #ECEAE4; --ink: #141210; --ink-2: #3A3733; --ink-mute: #7B7570; --border: #DDD9D3; --accent: #E11D2E; --accent-hover: #C4172A; --accent-ink: #fff; --on-air: #E11D2E; --card-bg: #fff; --card-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.11), 0 8px 28px rgba(0,0,0,.07); /* Fluid type scale (clamp-based, mobile-first) */ --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.78rem); --step--1: clamp(0.83rem, 0.78rem + 0.27vw, 0.94rem); --step-0: clamp(1rem, 0.93rem + 0.36vw, 1.13rem); --step-1: clamp(1.2rem, 1.1rem + 0.51vw, 1.38rem); --step-2: clamp(1.44rem, 1.31rem + 0.68vw, 1.73rem); --step-3: clamp(1.73rem, 1.55rem + 0.89vw, 2.16rem); --step-4: clamp(2.07rem, 1.84rem + 1.18vw, 2.7rem); --step-5: clamp(2.49rem, 2.17rem + 1.58vw, 3.38rem); /* Spacing */ --space-xs: 0.4rem; --space-s: 0.75rem; --space-m: 1.25rem; --space-l: 2rem; --space-xl: 3.5rem; /* Layout */ --wrap: 1140px; --radius: 8px; --radius-s: 5px; --hdr-h: 60px; /* Typography */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --line-body: 1.65; } /* Auto dark mode via OS preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E0E10; --bg-2: #18181B; --bg-3: #232327; --ink: #F2F0EC; --ink-2: #C9C6C0; --ink-mute: #7A7872; --border: #2E2E33; --card-bg: #18181B; --card-shadow: 0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4); } } /* Manual dark mode override (JS toggle adds data-theme="dark" to ) */ [data-theme="dark"] { --bg: #0E0E10; --bg-2: #18181B; --bg-3: #232327; --ink: #F2F0EC; --ink-2: #C9C6C0; --ink-mute: #7A7872; --border: #2E2E33; --card-bg: #18181B; --card-shadow: 0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --card-shadow-hover: 0 4px 12px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4); color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* ========================================================= 1. RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--line-body); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color .15s; } a:hover { color: var(--accent-hover); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; } p { margin-bottom: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, button, select, textarea { font-family: inherit; } /* ========================================================= 2. UTILITIES ========================================================= */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-m); } .section { padding-block: var(--space-xl); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-mute { color: var(--ink-mute); } .text-center { text-align: center; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--accent); color: var(--accent-ink); padding: .4rem .9rem; border-radius: var(--radius-s); font-weight: 700; font-size: var(--step--1); z-index: 9999; transition: top .2s; } .skip-link:focus { top: 0.75rem; color: var(--accent-ink); } .eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 55ch; line-height: 1.55; } /* ========================================================= 3. ANIMATIONS ========================================================= */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ========================================================= 4. SITE HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); height: var(--hdr-h); } .site-header-inner { display: flex; align-items: center; gap: 1.25rem; height: 100%; } /* Brand */ .site-brand { display: flex; align-items: center; gap: .55rem; font-size: var(--step-1); font-weight: 800; color: var(--ink); letter-spacing: -.03em; flex-shrink: 0; } .site-brand:hover { color: var(--ink); } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* Custom logo inside brand */ .site-brand .custom-logo { height: 36px; width: auto; } /* Primary nav */ .site-nav { margin-inline-start: auto; } .site-nav .menu { display: flex; gap: .1rem; align-items: center; } .site-nav .menu a { display: block; padding: .35rem .7rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); border-radius: var(--radius-s); transition: background .15s, color .15s; } .site-nav .menu a:hover, .site-nav .menu .current-menu-item > a { background: var(--bg-2); color: var(--ink); } /* Mini search */ .search-mini { display: flex; align-items: center; gap: .3rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; padding: .25rem .25rem .25rem .75rem; transition: border-color .15s, box-shadow .15s; flex-shrink: 0; } .search-mini:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .search-mini input { background: none; border: none; outline: none; color: var(--ink); font-size: var(--step--1); width: 160px; } .search-mini input::placeholder { color: var(--ink-mute); } .search-mini button { display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 100px; width: 28px; height: 28px; flex-shrink: 0; transition: background .15s; } .search-mini button:hover { background: var(--accent-hover); } .search-mini svg { pointer-events: none; } /* Hamburger (mobile) */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-s); color: var(--ink); margin-inline-start: auto; transition: background .15s; } .menu-toggle:hover { background: var(--bg-2); } /* Dark/light mode toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-s); color: var(--ink-2); flex-shrink: 0; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--bg-2); color: var(--ink); } /* Show sun in dark mode, moon in light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* TV icon fallback when channel logo fails */ .logo-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-mute); background: var(--bg-3); border-radius: var(--radius); } /* ========================================================= 5. SITE MAIN & FOOTER ========================================================= */ .site-main { flex: 1; padding-bottom: var(--space-xl); } .site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: var(--space-l); font-size: var(--step--1); color: var(--ink-mute); } .footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-m); justify-content: space-between; } .footer-inner a { color: var(--ink-mute); } .footer-inner a:hover { color: var(--ink); } .footer-nav { display: flex; gap: .75rem; flex-wrap: wrap; } .content-sidebar-layout { display: grid; gap: var(--space-l); align-items: start; } .content-primary, .right-sidebar { min-width: 0; } .right-sidebar { font-size: var(--step--1); } .widget { margin-bottom: var(--space-m); padding: var(--space-m); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); } .widget:last-child { margin-bottom: 0; } .widget-title { margin-bottom: .75rem; font-size: var(--step-0); line-height: 1.3; color: var(--ink); } .widget p, .widget li { color: var(--ink-2); } .widget ul, .widget ol { display: flex; flex-direction: column; gap: .45rem; padding-inline-start: 1.1rem; } .widget a { color: var(--ink-2); } .widget a:hover { color: var(--accent); } .widget select, .widget input[type="text"], .widget input[type="email"], .widget input[type="search"], .widget input[type="url"] { width: 100%; min-height: 40px; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg); color: var(--ink); } .widget button, .widget input[type="submit"], .widget .wp-block-search__button { min-height: 40px; padding: .55rem .8rem; border: 0; border-radius: var(--radius-s); background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; } .widget .wp-block-search__inside-wrapper, .widget .search-form { display: flex; gap: .4rem; } .footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-l); padding-bottom: var(--space-l); margin-bottom: var(--space-m); border-bottom: 1px solid var(--border); } .footer-widget-area .widget { padding: 0; margin-bottom: var(--space-m); background: transparent; border: 0; border-radius: 0; box-shadow: none; } @media (min-width: 961px) { .content-sidebar-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; } .right-sidebar { position: sticky; top: calc(var(--hdr-h) + var(--space-m)); } } /* ========================================================= 6. PAGE HERO (front-page & archive) ========================================================= */ .page-hero { background: var(--bg); padding-block: var(--space-xl) var(--space-l); border-bottom: 1px solid var(--border); } .page-hero .eyebrow { margin-bottom: .4rem; } .page-hero h1 { font-size: var(--step-4); margin-block: .4rem .75rem; } /* Block search form on front page */ .search-form-block { display: flex; max-width: 480px; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card-bg); transition: border-color .15s, box-shadow .15s; } .search-form-block:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .search-form-block input { flex: 1; border: none; outline: none; padding: .7rem 1rem; font-size: var(--step-0); color: var(--ink); background: transparent; } .search-form-block input::placeholder { color: var(--ink-mute); } .search-form-block button { background: var(--accent); color: #fff; font-weight: 700; font-size: var(--step--1); padding: 0 1.25rem; letter-spacing: .02em; transition: background .15s; } .search-form-block button:hover { background: var(--accent-hover); } /* ========================================================= 7. GENRE TAGS ========================================================= */ .tag { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--step--2); font-weight: 600; letter-spacing: .04em; padding: .3rem .7rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; } .tag:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* ========================================================= 8. CHANNEL GRID & CARDS ========================================================= */ .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-m); } .channel-card { display: flex; flex-direction: column; align-items: center; gap: .55rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-m) var(--space-s); text-align: center; color: var(--ink); box-shadow: var(--card-shadow); transition: transform .18s, box-shadow .18s, border-color .18s; } .channel-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); border-color: var(--accent); color: var(--ink); } .channel-card.is-on-air { border-color: var(--on-air); } .channel-card .logo { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-s); background: var(--bg-2); } .channel-card .logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .channel-card .name { font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.3; } .channel-card .now { font-size: var(--step--2); color: var(--accent); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================= 9. BREADCRUMBS ========================================================= */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: var(--step--1); color: var(--ink-mute); padding-block: 1rem .25rem; } .breadcrumbs a { color: var(--ink-mute); } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs .sep { color: var(--border); } .breadcrumbs .current { color: var(--ink); font-weight: 600; } /* ========================================================= 10. CHANNEL HEADER (single-ms_channel) ========================================================= */ .channel-header { display: flex; align-items: flex-start; gap: var(--space-l); flex-wrap: wrap; padding-block: var(--space-l); border-bottom: 1px solid var(--border); margin-bottom: var(--space-l); } .channel-header .logo-wrap { flex-shrink: 0; width: 120px; height: 120px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); display: grid; place-items: center; overflow: hidden; box-shadow: var(--card-shadow); } .channel-header .logo-wrap img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; } .channel-header .meta { flex: 1; min-width: 0; } .channel-header .meta .eyebrow { margin-bottom: .3rem; } .channel-header h1 { font-size: var(--step-4); margin-bottom: .5rem; } /* Channel taxonomy pills (genre, language, etc.) */ .channel-taxes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; } .channel-taxes a { font-size: var(--step--2); font-weight: 600; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 100px; background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; } .channel-taxes a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* ========================================================= 11. DAY TABS ========================================================= */ .day-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: var(--space-m); border-bottom: 2px solid var(--border); padding-bottom: 0; } .day-tab { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 1rem .6rem; border-radius: var(--radius-s) var(--radius-s) 0 0; font-size: var(--step--1); font-weight: 600; color: var(--ink-mute); background: none; border: 2px solid transparent; border-bottom: none; margin-bottom: -2px; cursor: pointer; transition: color .15s, background .15s; } .day-tab .dow { font-size: var(--step--2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .day-tab:hover { color: var(--ink); background: var(--bg-2); } .day-tab[aria-selected="true"] { color: var(--accent); border-color: var(--border); border-bottom-color: var(--bg); background: var(--bg); } .day-tab[aria-selected="true"] .dow { opacity: 1; } /* ========================================================= 12. SCHEDULE PANELS ========================================================= */ .schedule-day { display: none; animation: fadeIn .2s ease; } .schedule-day.is-active { display: block; } .schedule-section { margin-bottom: var(--space-l); } .schedule-section > h3 { font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); padding-block: .6rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; } .schedule-list { display: flex; flex-direction: column; gap: .25rem; } .schedule-row { display: flex; align-items: center; gap: var(--space-m); padding: .6rem .75rem; border-radius: var(--radius-s); background: var(--card-bg); border: 1px solid var(--border); transition: background .15s, border-color .15s; } .schedule-row:hover { border-color: var(--accent); } .schedule-row.is-on-air { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); border-color: var(--accent); } .schedule-row.is-past { opacity: .5; } /* Time column */ .schedule-row .when { flex-shrink: 0; width: 70px; font-size: var(--step--1); font-weight: 700; color: var(--ink); line-height: 1.3; text-align: right; } .schedule-row .when small { display: block; font-size: var(--step--2); font-weight: 500; color: var(--ink-mute); } /* Show details column */ .schedule-row .show { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; } /* Icon column — first in row */ .schedule-row .prog-icon-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* Shared size for real image and fallback tile — slightly larger */ .schedule-row .show .prog-thumb, .schedule-row .show .prog-icon-fallback, .schedule-row .prog-icon-wrap .prog-thumb, .schedule-row .prog-icon-wrap .prog-icon-fallback { width: 80px; height: 90px; flex-shrink: 0; border-radius: var(--radius-s); } .schedule-row .prog-icon-wrap .prog-thumb, .schedule-row .show .prog-thumb { object-fit: cover; background: var(--bg-2); display: block; } /* Coloured fallback tile */ .schedule-row .prog-icon-wrap .prog-icon-fallback, .schedule-row .show .prog-icon-fallback { display: flex; align-items: center; justify-content: center; text-align: center; font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; word-break: break-word; overflow: hidden; padding: .35rem; white-space: pre-line; } .schedule-row .info { flex: 1; min-width: 0; } .schedule-row .info .title { display: block; font-weight: 700; font-size: var(--step-0); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.schedule-row .info .title:hover, .schedule-row .info a.title:hover { color: var(--accent); } .schedule-row .info .duration { font-size: var(--step--2); color: var(--ink-mute); margin-top: .15rem; } /* ON NOW badge */ .now-badge { flex-shrink: 0; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: .22rem .55rem; border-radius: var(--radius-s); display: none; } .is-on-air .now-badge { display: inline-block; } /* No schedule placeholder */ .no-schedule { padding: var(--space-xl) 0; color: var(--ink-mute); text-align: center; } /* ========================================================= 13. PROGRAM HERO (single-ms_program) ========================================================= */ .program-hero { display: flex; align-items: flex-start; gap: var(--space-l); flex-wrap: wrap; padding-block: var(--space-l); border-bottom: 1px solid var(--border); margin-bottom: var(--space-l); } .program-hero .poster { flex-shrink: 0; width: 200px; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); border: 1px solid var(--border); box-shadow: var(--card-shadow); min-height: 150px; } .program-hero .poster img { width: 100%; height: auto; display: block; } .program-hero .meta { flex: 1; min-width: 0; } .program-hero .meta .eyebrow { margin-bottom: .35rem; } .program-hero h1 { font-size: var(--step-4); margin-bottom: .75rem; } /* Program meta info (category, genre, language) */ .program-meta { display: flex; flex-direction: column; gap: .35rem; font-size: var(--step--1); color: var(--ink-2); margin-bottom: 1rem; } .program-meta a { color: var(--accent); } .program-meta a:hover { text-decoration: underline; } /* Description block */ .program-desc { font-size: var(--step-0); color: var(--ink-2); line-height: 1.7; max-width: 70ch; } .program-desc p + p { margin-top: .75rem; } /* ========================================================= 14. AIRINGS LIST (single-ms_program) ========================================================= */ .upcoming-airings { margin-top: var(--space-l); } .airings-list { display: flex; flex-direction: column; gap: .5rem; } .airing { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); box-shadow: var(--card-shadow); transition: border-color .15s, box-shadow .15s; } .airing:hover { border-color: var(--accent); box-shadow: var(--card-shadow-hover); color: var(--ink); } .airing .ch-logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-s); background: var(--bg-2); overflow: hidden; display: grid; place-items: center; } .airing .ch-logo img { width: 100%; height: 100%; object-fit: contain; padding: .2rem; } .airing .ch-name { display: block; font-weight: 700; font-size: var(--step-0); } .airing .ch-when { margin-inline-start: auto; font-size: var(--step--1); color: var(--ink-mute); white-space: nowrap; flex-shrink: 0; } /* ========================================================= 15. RELATED CHANNELS ========================================================= */ .related-channels { margin-top: var(--space-xl); } .related-channels .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--space-m); } .related-channels .head h2 { font-size: var(--step-2); letter-spacing: -.02em; } .related-channels .head .sub { font-size: var(--step--1); color: var(--ink-mute); } /* ========================================================= 16. SHOW TITLE (italic variant used across templates) ========================================================= */ .show-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* ========================================================= 17. PAGINATION ========================================================= */ .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-xl); } .pagination .page-numbers { display: grid; place-items: center; min-width: 36px; height: 36px; padding-inline: .5rem; border-radius: var(--radius-s); font-size: var(--step--1); font-weight: 600; background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; } .pagination .page-numbers:hover, .pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination .page-numbers.dots { background: none; border-color: transparent; } /* ========================================================= 18. RESPONSIVE — MOBILE ========================================================= */ @media (max-width: 720px) { :root { --hdr-h: 54px; } .site-nav { display: none; position: absolute; } .site-nav.is-open { display: block; position: fixed; top: var(--hdr-h); left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: .75rem var(--space-m); box-shadow: 0 4px 24px rgba(0,0,0,.12); z-index: 99; } .site-nav.is-open .menu { flex-direction: column; align-items: stretch; gap: .1rem; } .site-nav.is-open .menu a { padding: .65rem .75rem; font-size: var(--step-0); } .menu-toggle { display: flex; } .search-mini { display: none; } /* Hero */ .page-hero { padding-block: var(--space-l); } .page-hero h1 { font-size: var(--step-3); } /* Channel header */ .channel-header { flex-direction: column; gap: var(--space-m); } .channel-header .logo-wrap { width: 80px; height: 80px; } .channel-header h1 { font-size: var(--step-3); } /* Program hero */ .program-hero { flex-direction: column; } .program-hero .poster { width: 130px; } .program-hero h1 { font-size: var(--step-3); } /* Channel grid — 2 columns on small mobile */ .channel-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } /* Schedule row */ .schedule-row { gap: .5rem; } .schedule-row .when { width: 54px; } .now-badge { display: none !important; } /* Airing */ .airing .ch-when { display: none; } } /* Force nav visible on desktop — prevents is-open class from persisting after resize */ @media (min-width: 721px) { .site-nav, .site-nav.is-open { display: block !important; position: static !important; background: transparent !important; border-bottom: none !important; padding: 0 !important; box-shadow: none !important; } .site-nav.is-open .menu { flex-direction: row !important; align-items: center !important; } .menu-toggle { display: none !important; } } @media (min-width: 721px) and (max-width: 960px) { .channel-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ========================================================= 19. WORDPRESS DEFAULT CONTENT (wp_the_content, alignment) ========================================================= */ .program-desc img, .entry-content img { border-radius: var(--radius-s); } .program-desc a { color: var(--accent); } .program-desc a:hover { text-decoration: underline; } .program-desc ul, .program-desc ol { padding-inline-start: 1.4em; list-style: revert; margin-block: .75rem; } /* ========================================================= 20. WP SEARCH RESULTS / 404 (if theme needs them) ========================================================= */ .entry-title { font-size: var(--step-3); letter-spacing: -.02em; } /* ========================================================= 21. FOCUS STYLES (accessibility) ========================================================= */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-s); }