/* BUILD: 2026-09-02 14:56 UTC --------------------------------------------------------------------------- Open this file directly in the browser to see which copy is being served: /assets/tv-skin.css If the date above is not the one you just uploaded, the stale copy is between the server and the screen — not in the file. ------------------------------------------------------------------------- */ /* =========================================================================== tv-skin.css — the television app's look, applied to the whole website. --------------------------------------------------------------------------- Loaded last in , after every page's own styles, so it wins where the two disagree. It restyles and changes no markup: remove the one in includes/header.php and the site is exactly as it was. THE PALETTE IS THE TV APP'S, NOT THE PHONE'S The first attempt at this file used ui/theme/Color.kt — navy #0B0B0B with a blue #E50914. That is the *phone* theme, and the phone theme was taken from this website in the first place, so applying it changed nothing at all. The television app uses ui/tv/TvColors.kt: near-black and one red. Those are the values below, copied rather than matched by eye. =========================================================================== */ :root { /* Ink — TvColors.kt. True black at the bottom: an OLED turns those pixels off entirely, and the app was built for televisions. */ --ink-900: #000000; /* player, scrims */ --ink-850: #0B0B0B; /* page background — a step off black so cards separate */ --ink-800: #141414; /* bars, sheets */ --ink-700: #1F1F1F; /* cards at rest */ --ink-600: #2B2B2B; /* cards raised, inputs */ --ink-500: #3A3A3A; /* dividers on raised surfaces */ /* The one accent. Everything selected, focused or primary is this red and nothing else is. */ --signal: #E50914; --signal-deep: #B20710; --signal-glow: rgba(229, 9, 20, 0.24); --lock: #2FD07A; /* active, live, success — green, because it is not the brand */ --amber: #E8B923; /* Errors lean orange on purpose. With a red accent, an error in the same red says nothing: the eye reads brand, not alarm. */ --fault: #FF7043; --text-hi: #FFFFFF; /* pure white, not the blue-tinted white the phone uses */ --text-mid: #B3B3B3; --text-lo: #757575; --hairline: rgba(255, 255, 255, 0.12); --hairline-strong: rgba(255, 255, 255, 0.20); --r-card: 10px; --r-plate: 14px; --r-panel: 16px; --r-pill: 8px; /* Drawn at all times, only ever changing colour. An outline that appears on hover shifts the card by its own width as the pointer arrives. */ --border-w: 2px; } /* The site's own variables, pointed at the app's, so every rule already written against them comes across without being touched. */ :root { --accent: #E50914; --accent-glow: rgba(229, 9, 20, 0.24); --d-bg: #0B0B0B; --d-bg2: #141414; --d-card: #1F1F1F; --d-border: rgba(255, 255, 255, 0.20); --d-muted: #B3B3B3; --d-dim: #757575; --d-blue: #E50914; --dark-bg: #0B0B0B; --card-bg: #141414; --text-gray: #B3B3B3; --text-muted: #B3B3B3; --bg: #0B0B0B; --bg2: #141414; --card: #1F1F1F; --border: rgba(255, 255, 255, 0.20); } /* =========================================================================== The page itself. Backgrounds are stated broadly because the site sets navy in a dozen places and each one would otherwise show through as a lighter patch. =========================================================================== */ html, body { background: #0B0B0B !important; color: var(--text-hi); } .home-wrap, .wtv-main, .wtv-layout, .wtv-content, .sub-container, .ms-wrap, .sup-wrap, .page-section, main, .browse-header, .dynamic-hero { background-color: transparent !important; } /* =========================================================================== Cards — posters, channels, episodes, everything. One object across the whole site: a near-black plate, a permanent outline that only changes colour, and a lift when pointed at. The app's tiles lift by a tenth; a pointer can be anywhere, so tiles here grow far more often and at 1.10 a grid never stops moving. =========================================================================== */ .pv-poster, .pv-wall-card, .pv-chan-well, .channel-card, #channelsGrid > *, .c24-card, .doc-card, .sp-card, .cl-card, .ep-grid-card, .episode-row-item, .quick-card, .rec-modal-box { background: #141414 !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: var(--r-card) !important; box-shadow: none !important; transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important; } /* Hover turns the outline red. The app marks a focused tile in the accent; white was a guess before the palette was right, and against near-black it read as a highlight rather than as the thing that had been chosen. */ .pv-poster:hover, .pv-wall-card:hover, .pv-chan-well:hover, .channel-card:hover, #channelsGrid > *:hover, .c24-card:hover, .doc-card:hover, .sp-card:hover, .ep-grid-card:hover, .episode-row-item:hover, .quick-card:hover { background: #1F1F1F !important; border-color: #E50914 !important; transform: scale(1.05) !important; outline: none; z-index: 3; } /* Whatever each page uses to draw the picture inside the card. The channel mark is not in this list any more: it no longer has a box to outline. */ .pv-poster:hover .pv-poster-img { border-color: #E50914 !important; } /* =========================================================================== The sidebar categories. No counts. "News 10" said something true and useless: nobody picks a category by how many channels are in it, and eleven numbers down the left edge were eleven things competing with the eleven words that matter. The grid says how many as soon as you arrive. The names take the space instead — they are the navigation of this page. =========================================================================== */ /* The sidebar is .wtv-side-item / .ws-name / .ws-count. The first attempt at this aimed at .prov-count and .prov-name — the classes the *mobile* category deck uses. They exist, so nothing looked wrong in the stylesheet; they are simply not what the sidebar is built from, so the rules applied to an element that is hidden on desktop and the counts stayed. */ .ws-count, .prov-count { display: none !important; } .ws-name, .prov-name { font-size: 18.5px !important; font-weight: 800 !important; letter-spacing: .1px; } /* The icon and the name sit together, in both languages. The row is flex with a 13px gap, but it also carries text-align:left, which does not mirror — so in Hebrew the badge went to the right edge and the name stayed pinned to the left of a box stretched by flex:1, with the whole width of the sidebar between them. text-align:start follows the direction instead of a physical side, and the name is sized by its own text rather than filling the row, so the gap is the 13px the row asked for and nothing more. */ .wtv-side-item { text-align: start; } .ws-name { flex: 0 1 auto !important; } .wtv-side-item { justify-content: flex-start; } /* =========================================================================== The logo, over the sidebar. The header was inset by 4vw and the page content by 4% of its own column. Below 1600px those are the same measurement of different things — 4vw is 4% of the viewport, and the column IS the viewport — so plain 4% here lines the logo up with the sidebar exactly. Above 1600px the content also gains a centring margin and the two part again. A calc() reproducing that margin was tried and is not worth it: it is a long expression on the one element every page depends on, and the payoff is alignment on screens wider than most people have. Simple and right for the common case beats clever and fragile everywhere. */ .site-header { padding-left: 9% !important; padding-right: 4% !important; } /* =========================================================================== Where a category lands when you pick one. selectCategory() already scrolls the grid into view, with block:'start' — which puts the grid's top edge at the viewport's top edge. The header is sticky and 82px tall, so it sat over the first row: every category change left the top row half-hidden and the page needing a nudge. scroll-margin-top is the browser's own answer to this. scrollIntoView honours it, so the fix is one line rather than arithmetic in the script — and it keeps working if the header's height ever changes. =========================================================================== */ #channelsGrid, .lt-searchbar { scroll-margin-top: 104px; } /* =========================================================================== No box behind a channel mark. .card-logo carried its own gradient, border and inset highlight, so every tile was two nested rounded rectangles with the mark sitting in the smaller one. The tile is already the container; the mark only needs the space. =========================================================================== */ .card-logo { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } .card-logo img, #channelsGrid img { background: transparent !important; box-shadow: none !important; } .pv-poster-img, .card-img, .c24-poster-img, .doc-poster-img, .ep-grid-thumb, .ep-thumb { border-radius: 0 !important; } /* =========================================================================== The name under a card. It sat directly against the bottom of the artwork with nothing between them, so on a dark poster the two ran together and the title read as part of the picture. A hairline in the accent separates them — the same short red rule the row headings use, drawn the full width here because it is doing a job rather than decorating. The label itself is given room: a little more space above and below, tighter tracking, and the size raised a point. A caption crammed into eight pixels looks like an afterthought whatever colour it is. =========================================================================== */ .pv-poster-name, .pv-wall-label, .pv-chan-name, .channel-name, .c24-card-name, .doc-card-name, .sp-card-name, .ep-grid-title, .channel-name-only, .card-fallback-title { position: relative; color: #B3B3B3 !important; font-weight: 600 !important; font-size: 14.5px !important; letter-spacing: -0.1px; line-height: 1.35 !important; padding: 11px 12px 12px !important; } /* The rule, only where the name sits under the artwork in its own strip. Not on .pv-poster-name: the home page lays its titles over the bottom of the poster, so a line above the text lands across the picture rather than between the two. A separator that needs something to separate is no use on a caption that is already inside the thing it captions. A pseudo-element rather than a border, so it can be inset from the card's own edge and does not fight the outline the card already has. */ .pv-chan-name::before, .channel-name::before, .c24-card-name::before, .doc-card-name::before, .sp-card-name::before, .ep-grid-title::before, .channel-name-only::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; border-radius: 1px; background: rgba(229, 9, 20, 0.55); transition: background-color 140ms ease; } /* Full strength on the card being pointed at, so the rule tracks the same selection the outline does. */ .c24-card:hover .c24-card-name::before, .doc-card:hover .doc-card-name::before, .sp-card:hover .sp-card-name::before, .ep-grid-card:hover .ep-grid-title::before, .channel-card:hover .channel-name::before, #channelsGrid > *:hover .channel-name::before { background: #E50914; } .pv-poster:hover .pv-poster-name, .pv-wall-card:hover .pv-wall-label, .pv-chan-well:hover .pv-chan-name, .channel-card:hover .channel-name, .c24-card:hover .c24-card-name, .doc-card:hover .doc-card-name, .sp-card:hover .sp-card-name, #channelsGrid > *:hover .channel-name { color: #FFFFFF !important; } /* =========================================================================== Room for the lift. .pv-track scrolls horizontally, and overflow-x:auto clips vertically too — there is no such thing as scrolling one axis and overflowing the other. With 6px above the cards, a card that grows on hover had its top corners cut off by the edge of its own row. The padding is the room. It has to be more than the growth: a 220px card at 1.05 gains about 7px of height, half of it upward. =========================================================================== */ .pv-track, .pv-wall-track, .tv-row__cards { padding-top: 14px !important; padding-bottom: 18px !important; } /* =========================================================================== Row headings — a short red rule, then the title. The app puts one over every group, and repeating it is most of what makes a page look like it belongs. =========================================================================== */ .pv-row-head, .grid-header, .shelf-title, .ep-section-title, .sec-title, .section-header { position: relative; } .pv-row-title, .shelf-title, .section-title, .grid-header h3, .ep-section-title, .sec-title { color: #FFFFFF !important; font-weight: 800 !important; letter-spacing: -0.3px; } .pv-row-title::before { content: ''; display: inline-block; width: 4px; height: 0.95em; margin-right: 12px; border-radius: 2px; background: #E50914; vertical-align: -0.08em; } .pv-row-more, .grid-count, .sec-sub, .pv-cta-sub { color: #757575 !important; } .pv-row-more:hover { color: #FFFFFF !important; } /* No icon beside a row title. Each row had a different little glyph — a globe, a television, a clapper — and none of them said anything the words beside them did not. Twelve rows meant twelve small pictures competing with the artwork the page exists to show. The short red rule is enough to mark where a row starts. */ .pv-row-title svg, .pv-row-head svg, .shelf-title svg, .section-title svg, .grid-header svg, .ep-section-title svg, .pv-row-title i, .shelf-title i, .section-title i { display: none !important; } /* =========================================================================== What is on now, under a channel. It was one grey line — a bullet, a time and a title, ellipsed — and a "See All" button. The television guide gives the same information a shape: the word NOW in the accent, the programme in white beside it, and a bar showing how far through it is. The bar is the part that matters: what a viewer actually wants to know is not what is on but whether they have missed it. =========================================================================== */ .epg-slot { width: 100%; margin-top: 8px; } /* The channel name is centred too, so the name and what is playing under it line up as one block rather than starting from different places. Both languages, one rule — the pair was never edge-aligned by intent. */ .channel-name { text-align: center; } /* One rule for this element, not two. There were a pair of .epg-line blocks in this file — an earlier one setting text-align:left and a later one centring it. The later won, so the page looked right and the first rule sat there contradicting it, waiting for somebody to edit the wrong one. Merged. */ .epg-line { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; min-height: 20px; font-size: 11.5px; line-height: 1.35; text-align: center; } .epg-when { flex: none; font-weight: 800; letter-spacing: 0.6px; font-size: 10px; padding: 2px 6px; border-radius: 5px; } /* Nothing is drawn for something on air — the bar under the title says it, and says how far through as well. Only a later start gets a time. */ /* Stated in grey: it is information, not an alert. */ .epg-line.is-next .epg-when { background: rgba(255, 255, 255, 0.07); color: #757575; border: 1px solid rgba(255, 255, 255, 0.14); } /* One line, and the space for it reserved. It wrapped to two, which fitted more titles whole but made every card a different height — a row where one card is a line taller than its neighbours has its bars, its buttons and its bottom edges all at different heights, and that reads as broken far more loudly than a truncated title reads as unhelpful. So: one line, and a fixed height on the row whether or not a programme is known. Reserving the space is what actually does the aligning; clamping the text alone would still leave a card with no listing shorter than the rest. */ .epg-title { flex: 1; min-width: 0; color: #B3B3B3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* What is playing sits under the middle of the card, in both languages. It was aligned to one edge — left in English, and an RTL override pushed it right in Hebrew — while the channel name above it is centred, so the two lines started from different places on every card. `justify-content` rather than `text-align` alone, because this is a flex row: the time and the title are separate children, and text-align would only move the text inside each of them, not the pair as a whole. Both are set — one places the children, the other the text within them. */ /* Same for the slot as a whole, so a channel the guide has nothing for still occupies the height of one that does. */ .epg-slot { min-height: 52px; } .channel-card:hover .epg-title, #channelsGrid > *:hover .epg-title { color: #FFFFFF !important; text-align: center; } /* The bar. Two pixels: enough to read as progress, not enough to become a second thing on the card competing with the mark. */ .epg-bar { position: relative; width: 100%; height: 2px; margin-top: 7px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .epg-bar span { display: block; height: 100%; background: #E50914; border-radius: 1px; } .epg-guide-btn { margin-top: 8px !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #757575 !important; border-radius: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 3px 10px !important; letter-spacing: 0.3px; } .epg-guide-btn:hover { border-color: #E50914 !important; color: #FFFFFF !important; } /* The RTL override is gone with the edge it was correcting: centred is centred in both languages, and one rule is easier to keep true than two. */ /* ── The full guide ────────────────────────────────────────────────────── The same shapes as the card: a red rule beside what is on now, times in grey, titles in white. What is on air gets a filled marker rather than a faint tint — in a list of thirty rows a 10% wash is not a position, and finding "where am I now" is the only reason the list is open. */ .epg-modal-head { background: #141414 !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; } .epg-modal-title { color: #FFFFFF !important; font-weight: 800 !important; } .epg-modal-tz { color: #757575 !important; } .epg-daysep { background: transparent !important; color: #757575 !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase; border-top: 1px solid rgba(255,255,255,0.12) !important; border-bottom: none !important; } .epg-item { position: relative; background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; } .epg-item:hover { background: #1F1F1F !important; } .epg-item--now { background: rgba(229, 9, 20, 0.10) !important; } /* The marker down the side, which is what the eye finds. */ .epg-item--now::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #E50914; } .epg-item-time { color: #757575 !important; font-weight: 700 !important; } .epg-item--now .epg-item-time { color: #FFFFFF !important; } .epg-item-content h4 { color: #FFFFFF !important; font-weight: 700 !important; } .epg-item-content p { color: #B3B3B3 !important; } .epg-liveTag { background: #E50914 !important; color: #FFFFFF !important; border: none !important; border-radius: 5px !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.6px; padding: 2px 7px !important; } .epg-modal-close { background: #1F1F1F !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #FFFFFF !important; } .epg-modal-close:hover { border-color: #E50914 !important; } .epg-loading, .epg-empty { color: #757575 !important; } [dir="rtl"] .epg-item--now::before { left: auto; right: 0; } /* =========================================================================== Category pills and tabs. The chosen one is filled in the accent. It was a hairline and a slightly brighter grey — plenty at arm's length, nothing across a room. =========================================================================== */ .cat-pill, .prov-card, .line-tab, .ep-season-tab, .rec-datetab, .pill { background: transparent !important; border: var(--border-w) solid transparent !important; border-radius: var(--r-pill) !important; color: #B3B3B3 !important; box-shadow: none !important; font-weight: 600 !important; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease !important; } .cat-pill:hover, .prov-card:hover, .line-tab:hover, .ep-season-tab:hover, .rec-datetab:hover, .pill:hover { background: #1F1F1F !important; color: #FFFFFF !important; } .cat-pill.active, .prov-card.active, .line-tab.active, .ep-season-tab.active, .rec-datetab.active, .pill.active, .cat-pill.selected, .prov-card.selected { background: #E50914 !important; border-color: #E50914 !important; color: #FFFFFF !important; font-weight: 800 !important; } .prov-glow { display: none !important; } .prov-count { color: #757575 !important; } .prov-card.active .prov-count { color: rgba(255,255,255,0.85) !important; } /* =========================================================================== Buttons. =========================================================================== */ .pv-btn-primary, .btn-primary, .sub-btn.primary, .btn-p, .pv-cta-btn, .doc-info-btn, .go-now-btn, .tv-btn, .ssb-btn { background: #E50914 !important; border: var(--border-w) solid #E50914 !important; border-radius: var(--r-pill) !important; color: #FFFFFF !important; font-weight: 800 !important; box-shadow: none !important; transition: background-color 140ms ease, transform 140ms ease !important; } .pv-btn-primary:hover, .btn-primary:hover, .sub-btn.primary:hover, .pv-cta-btn:hover, .go-now-btn:hover, .tv-btn:hover { background: #B20710 !important; transform: scale(1.03); } .pv-btn-ghost, .btn-secondary, .sub-btn.ghost, .btn-g, .tv-btn--quiet, .back-btn-bar a, .close-modal, .rec-close-btn { background: #1F1F1F !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: var(--r-pill) !important; color: #FFFFFF !important; box-shadow: none !important; } .pv-btn-ghost:hover, .btn-secondary:hover, .sub-btn.ghost:hover, .tv-btn--quiet:hover, .close-modal:hover { background: #2B2B2B !important; border-color: #FFFFFF !important; } /* =========================================================================== Hover on a poster — a play mark and a dim, and nothing else. The site painted the whole tile in the accent when pointed at, so a red rectangle replaced the artwork and a blue circle sat on top of it: the one moment somebody is deciding what to watch was the one moment they could not see it. The app dims the picture slightly and puts a mark in the middle. =========================================================================== */ .pv-play-ico, .cl-play-icon, .ep-grid-play, .doc-poster-play, .ep-play-overlay { background: transparent !important; border: none !important; box-shadow: none !important; } /* The circle itself, wherever each page happens to put it. */ .pv-play-ico span, .cl-play-icon span, .ep-grid-play span, .doc-poster-play span, .ep-play-overlay span, .pv-play-ico i, .ep-grid-play i, .doc-poster-play i { background: #E50914 !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55) !important; } /* The artwork stays visible, one step darker. */ .pv-poster:hover .pv-poster-img, .c24-card:hover .c24-poster-img, .doc-card:hover .doc-poster-img, .sp-card:hover .sp-poster-img, .ep-grid-card:hover .ep-grid-thumb { filter: brightness(0.72) !important; border-color: transparent !important; box-shadow: none !important; transition: filter 140ms ease !important; } /* Nothing paints over the picture on hover. */ .pv-poster:hover, .c24-card:hover, .doc-card:hover, .sp-card:hover, .cl-card:hover, .ep-grid-card:hover { background: #141414 !important; } /* =========================================================================== The hero. =========================================================================== */ .pv-hero, .c24-hero, .doc-hero, .sp-hero, .k12-hero, .r12-hero, .dynamic-hero, .modal-hero-wrapper, .pv-hero-slide, .pv-wall, .pv-cta, .pv-cta-inner, .hero-content, .hero-stats-bar, .pv-chan-well { background-color: #0B0B0B !important; background-image: none !important; } /* The loading screen, which is the first thing anybody sees and was the last navy thing left. */ #preloader, .cinematic-loader, .tab-loading-overlay, .c24-loading-overlay, .doc-loading-overlay { background: #0B0B0B !important; background-image: none !important; } .preloader-logo span, .preloader-logo { color: #FFFFFF !important; } .preloader-message, .cl-phrase, .tab-loader-label, .cl-title { color: #757575 !important; } /* The badge over the hero, and the featured pips beside it. */ .pv-hero-badge, .pv-cta-tag, .cat-badge, .meta-badge, .c24-logo-badge, .doc-logo-badge, .sp-logo-badge, .k12-logo-badge, .r12-logo-badge { background: rgba(229, 9, 20, 0.16) !important; border: 1px solid rgba(229, 9, 20, 0.5) !important; color: #E50914 !important; } .pv-hero-title, .c24-hero-title, .doc-hero-title, .sp-hero-title, .k12-hero-title, .r12-hero-title, .modal-title-large, .gm-title { color: #FFFFFF !important; font-weight: 800 !important; } .pv-hero-sub, .c24-hero-sub, .doc-hero-sub, .sp-hero-sub, .k12-hero-sub, .r12-hero-sub, .modal-desc, .ep-overview, .ep-grid-ov { color: #B3B3B3 !important; } .pv-hero-overlay, .c24-hero-overlay, .doc-hero-overlay, .sp-hero-overlay, .k12-hero-overlay, .r12-hero-overlay, .hero-gradient, .modal-hero-gradient { background: linear-gradient(90deg, #0B0B0B 0%, rgba(11,11,11,0.85) 45%, rgba(11,11,11,0) 100%) !important; } /* No LIVE badge on a channel tile. Every channel in a live row is live, so a word repeated under all of them marks nothing. It is gone from livetv.js, and hidden here as well — the two files ship separately, and a stylesheet that arrives before its script should not leave the old badge on screen. */ .channel-card .live-badge, #channelsGrid .live-badge, .pv-live-pill { display: none !important; } /* The live mark stays where it still means something: the section heading and the player. */ .sec-tag.sec-main, .slot-badge, .featured-badge { background: rgba(255, 112, 67, 0.16) !important; border: 1px solid rgba(255, 112, 67, 0.5) !important; color: #FF7043 !important; font-weight: 800 !important; letter-spacing: 1.2px; border-radius: var(--r-pill) !important; } .status-pulse, .pv-dot, .stat-growing-dot, .rec-dot { background: #FF7043 !important; box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.6); animation: tv-pulse 2s infinite; } @keyframes tv-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 112, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 112, 67, 0); } } /* =========================================================================== Row arrows — the app shows them only when there is more to see. =========================================================================== */ .pv-arrow, .shelf-nav, .pagination-btn, .page-btn { background: rgba(20, 20, 20, 0.88) !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: 50% !important; color: #FFFFFF !important; box-shadow: none !important; } .pv-arrow:hover, .shelf-nav:hover, .page-btn:hover { background: #E50914 !important; border-color: #E50914 !important; } .page-btn.active, .pagination-btn.active { background: #E50914 !important; border-color: #E50914 !important; border-radius: var(--r-pill) !important; } .pv-hero-dots .dot { background: rgba(255,255,255,0.3) !important; } .pv-hero-dots .dot.active { background: #E50914 !important; } /* =========================================================================== Panels, modals, inputs. =========================================================================== */ .modal-content, .doc-modal, .rec-modal-box, .epg-modal, .sub-card, .tv-panel, .ms-list, .ms-chat, .sup-window, .mu-create { background: #141414 !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: var(--r-panel) !important; box-shadow: none !important; } .modal-hero-blur, .epg-overlay, .c24-loading-overlay, .doc-loading-overlay, .tab-loading-overlay, .cinematic-loader { background: rgba(0, 0, 0, 0.82) !important; } input, select, textarea, .custom-search-wrapper input, .search-wrap input, #searchInput { background: #1F1F1F !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: var(--r-pill) !important; color: #FFFFFF !important; } input:focus, select:focus, textarea:focus, #searchInput:focus { outline: none !important; border-color: #E50914 !important; background: #2B2B2B !important; } select option { background: #141414 !important; color: #FFFFFF !important; } .search-ico, .search-icon { color: #757575 !important; } /* Spinners take the accent. */ .spinner-inner, .slot-spinner, .cl-ring, .tab-loader-ring, .cl-ring-1, .cl-ring-2, .cl-ring-3 { border-top-color: #E50914 !important; } .cl-bar, .tab-loader-bar, .ms-step-progress { background: #E50914 !important; } /* =========================================================================== Decorative washes, removed rather than recoloured. The site lit its hero sections with soft radial gradients in the accent. As a faint blue those were nearly invisible; turned red by the palette sweep, the same values became stains — a smear across the top of a page, a half-circle glowing under the fold. Recolouring them again would only pick a different wrong colour: the app has no washes at all, and a flat black is what makes the artwork on top of it the brightest thing on the screen. =========================================================================== */ .pv-hero, .pv-cta, .k12-hero, .c24-hero, .doc-hero, .sp-hero, .r12-hero, .dynamic-hero, .browse-header, .sub-card, .home-wrap { background-image: none !important; } .pv-hero::before, .pv-hero::after, .pv-cta::before, .pv-cta::after, .sub-card::before, .sub-card::after, .cl-halo, .k12-hero::before, .c24-hero::before, .doc-hero::before { display: none !important; } /* =========================================================================== Multi Screen — the two mode tiles, which were solid blue. =========================================================================== */ /* .ms-chan-grid > * is gone from this list. It matched the same elements as .ms-chan below but with higher specificity — a class plus a child combinator beats a class — so the older, broader rule silently won: the picker tiles kept this block's 16px radius and its grey hover instead of the Live TV card's 12px and red. Nothing looked broken, which is why it survived two rounds of "why has this not changed". */ /* .ms-panel is not a card on the layout step: the two choices are the cards, and a plate around them was a box drawn round two boxes. */ #panel1.ms-panel { background: none !important; border: none !important; padding: 0 !important; } /* .ms-layout-card is gone: the layout step no longer uses it. */ .ms-panel, .fs-mode, .arena-1, .arena-2, .arena-4, .slot-icon-wrap { background: #141414 !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; border-radius: var(--r-panel) !important; box-shadow: none !important; } .fs-mode:hover { background: #2B2B2B !important; border-color: #E50914 !important; } /* The .ms-lc-* rules that painted the old mode tiles are gone with the tiles. Making them red was the right call while they existed; they no longer do. */ .ms-panel-title, .ms-pb-title { color: #FFFFFF !important; } .ms-next-hint { color: #B3B3B3 !important; } .ms-cat-tabs .active, .ms-cat-tabs button.active { background: #E50914 !important; border-color: #E50914 !important; color: #FFFFFF !important; } .ms-next-btn, .ms-pb-fs { background: #E50914 !important; border: var(--border-w) solid #E50914 !important; color: #FFFFFF !important; } .ms-next-btn:hover { background: #B20710 !important; } .ms-back-btn, .ms-pb-reset { background: #1F1F1F !important; border: var(--border-w) solid rgba(255,255,255,0.20) !important; color: #FFFFFF !important; } .ms-live-dot, .ms-dot, .ms-step-icon { background: #FF7043 !important; } /* ── Choosing a layout ──────────────────────────────────────────────────── Two cards, each mostly picture. The first attempt made them short wide rows with a small preview at one end, which left three-quarters of the screen empty below and read as a page that had failed to finish loading. A choice between two things should fill the space it is given. ------------------------------------------------------------------------- */ .ms-head { padding: 36px 0 24px; text-align: center; } .ms-head__title { margin: 0 0 8px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.8px; color: #FFFFFF; } .ms-head__sub { margin: 0; color: #757575; font-size: 1rem; } .ms-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; } @media (max-width: 720px) { .ms-layout-grid { grid-template-columns: 1fr; } } .ms-lay { display: block; width: 100%; text-align: center; padding: 0 0 28px; background: #141414; border: 2px solid rgba(255,255,255,0.20); border-radius: 16px; cursor: pointer; font: inherit; overflow: hidden; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } .ms-lay:hover { background: #1F1F1F; border-color: #E50914; transform: translateY(-4px); } .ms-lay:focus-visible { outline: 2px solid #E50914; outline-offset: 3px; } /* A diagram, not a stand-in for content. At full card width these panes were large empty grey rectangles, which is exactly what a page looks like when its images have failed to load — the thing meant to explain the layout was the thing making people hesitate. Small enough to read as a symbol, and it stops looking broken. */ .ms-lay__frame { display: grid; gap: 6px; width: 62%; max-width: 240px; margin: 30px auto 4px; aspect-ratio: 16 / 9; padding: 6px; background: #000000; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; } .ms-lay__frame--2 { grid-template-columns: 1fr 1fr; } .ms-lay__frame--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } /* Each pane carries a small play mark, so it reads as a screen with something on it rather than as a blank waiting to be filled. */ .ms-lay__pane { position: relative; border-radius: 3px; background: #1F1F1F; border: 1px solid rgba(255,255,255,0.07); transition: background-color 140ms ease; } .ms-lay__pane::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-40%, -50%); border-left: 7px solid rgba(255,255,255,0.22); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } .ms-lay:hover .ms-lay__pane::after { border-left-color: rgba(255,255,255,0.40); } /* One pane carries the sound — the whole difference between watching four channels and watching four muted pictures. A bar along its foot, not a filled block: the accent marks a pane, it does not become the illustration. */ .ms-lay__pane.is-audio { background: linear-gradient(#E50914, #E50914) left bottom / 100% 3px no-repeat, #2B2B2B; border-color: rgba(229, 9, 20, 0.45); } .ms-lay:hover .ms-lay__pane { background-color: #2B2B2B; } .ms-lay:hover .ms-lay__pane.is-audio { background-color: #3A3A3A; } .ms-lay__body { display: block; padding: 20px 20px 0; } .ms-lay__name { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.4px; color: #FFFFFF; margin-bottom: 5px; } .ms-lay__desc { display: block; color: #B3B3B3; font-size: .95rem; } /* The arrow is a cue on the card, not a control beside it. */ .ms-lay__go { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.20); color: #757575; transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; } .ms-lay__go svg { width: 20px; height: 20px; display: block; } .ms-lay:hover .ms-lay__go { background: #E50914; border-color: #E50914; color: #FFFFFF; } .ms-panel-head { display: flex; justify-content: flex-end; margin-bottom: 16px; } .ms-selcount { background: transparent !important; border: 1px solid rgba(255,255,255,0.20) !important; color: #B3B3B3 !important; border-radius: 999px !important; padding: 8px 16px !important; font-weight: 700 !important; font-size: .88rem !important; } /* Said once, under both, rather than as a caption on each. */ .ms-hint { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 26px auto 0; max-width: 900px; color: #757575; font-size: .9rem; } .ms-hint__dot { width: 6px; height: 6px; border-radius: 50%; background: #E50914; flex: none; } [dir="rtl"] .ms-lay__pane.is-audio { background-position: right bottom; } /* ── The channel picker, given the Live TV page's tiles ────────────────── Same object as the grid on /livetv: a plate, a permanent outline that only changes colour, a mark with no box behind it, and a name under a red rule. The two screens do the same job — pick a channel — so they look the same. */ .ms-cat-tabs { display: none !important; } /* The same grid as /livetv, down to the cap on the card. Five columns alone was not enough: the cell is a fifth of a very wide panel, so without a maximum the tile stretched to ~330px and the mark sat lost in the middle of it. The Live TV page caps its card at 250px and centres it in the cell, which is what makes the mark fill the tile. Same here. */ .ms-chan-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; align-items: start !important; justify-items: center !important; } @media (max-width: 1400px) { .ms-chan-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } } @media (max-width: 1100px) { .ms-chan-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } } @media (max-width: 820px) { .ms-chan-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } .ms-chan { position: relative; width: 100%; max-width: 250px; background: #141414 !important; border: 2px solid rgba(255,255,255,0.20) !important; border-radius: 12px !important; box-shadow: none !important; padding: 10px 8px 0 !important; cursor: pointer; transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important; } .ms-chan:hover { background: #1F1F1F !important; border-color: #E50914 !important; transform: scale(1.05) !important; z-index: 3; } /* Chosen, and which of the two or four it is. The outline is filled rather than merely tinted: on a grid this size a wash is not an answer to "did that click register". */ .ms-chan.sel { background: #1F1F1F !important; border-color: #E50914 !important; } .ms-chan-logo { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; display: flex; align-items: center; justify-content: center; } /* The same size as the marks on /livetv — 96px tall, 150px at the widest. max-height had to be overridden too, and that is why the last two attempts at this did nothing: multi.css caps the image at 58px, and a cap is not beaten by setting height. The mark was 96px tall and then clipped back to 58px by a property I had not touched. */ .ms-chan-logo img { width: auto !important; height: 96px !important; max-width: 150px !important; max-height: 96px !important; min-height: 96px !important; object-fit: contain !important; background: transparent !important; box-shadow: none !important; } /* The wrapper had a fixed 72px height and a tinted plate of its own, which would have clipped a 96px mark whatever the image rules said. */ .ms-chan-logo { width: 100% !important; height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; } /* Same weight, size and spacing as the name under a Live TV card. */ .ms-chan-name { position: relative; margin-top: 10px !important; padding: 11px 4px 12px !important; color: #B3B3B3 !important; font-weight: 600 !important; font-size: 14.5px !important; letter-spacing: -0.1px; line-height: 1.35 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-chan-name::before { content: ''; position: absolute; top: 0; left: 2px; right: 2px; height: 2px; border-radius: 1px; background: rgba(229, 9, 20, 0.55); transition: background-color 140ms ease; } .ms-chan:hover .ms-chan-name, .ms-chan.sel .ms-chan-name { color: #FFFFFF !important; } .ms-chan:hover .ms-chan-name::before, .ms-chan.sel .ms-chan-name::before { background: #E50914; } /* The number showing which slot it took. Only drawn when there is one. */ .ms-chan-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E50914; color: #fff; font-size: 13px; font-weight: 800; opacity: 0; transition: opacity 140ms ease; } .ms-chan.sel .ms-chan-check { opacity: 1; } /* ── The search box: the only control on this page now ───────────────────── */ /* One box, not two. .ms-search-wrap already had its own background, border and padding, and the input inside it was transparent. Styling the input as well produced a box inside a box with an inch of dead space around the text. The wrap goes back to being a positioning context and nothing else. */ .ms-search-wrap { position: relative; display: block !important; width: 100%; margin: 0 0 22px !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; } .ms-search-wrap svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #757575; pointer-events: none; } .ms-search-wrap input { width: 100%; box-sizing: border-box; padding: 16px 18px 16px 52px !important; font-size: 1.02rem !important; background: #1F1F1F !important; border: 2px solid rgba(255,255,255,0.20) !important; border-radius: 12px !important; color: #FFFFFF !important; } .ms-search-wrap input::placeholder { color: #757575; } .ms-search-wrap input:focus { outline: none !important; border-color: #E50914 !important; background: #2B2B2B !important; } [dir="rtl"] .ms-search-wrap svg { left: auto; right: 18px; } [dir="rtl"] .ms-search-wrap input { padding: 16px 52px 16px 18px !important; } .ms-empty { padding: 40px; text-align: center; color: #757575; } /* =========================================================================== Header and footer — on every page, so they matter most. =========================================================================== */ /* The mark, larger. It shares the bar with five nav items and an account button, so it can afford the height and nothing else needs to move. */ .logo-img { height: 78px !important; max-width: 280px !important; } @media (max-width: 640px) { .logo-img { height: 52px !important; max-width: 180px !important; } } .site-header, header.site-header, .wtv-header { background: #0B0B0B !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; } .nav-link { color: #B3B3B3 !important; font-weight: 700 !important; } .nav-link:hover, .nav-link.active { color: #FFFFFF !important; } .nav-link.active::after { background: #E50914 !important; } .nav-link .nav-dot { background: #E50914 !important; } .header-account-btn { background: #E50914 !important; border: var(--border-w) solid #E50914 !important; border-radius: var(--r-pill) !important; color: #FFFFFF !important; box-shadow: none !important; } .header-account-btn:hover { background: #B20710 !important; } .site-footer, footer { background: #000000 !important; border-top: 1px solid rgba(255,255,255,0.12) !important; } .footer-link { color: #B3B3B3 !important; } .footer-link:hover { color: #FFFFFF !important; } /* The clock strip is removed in header.php, not hidden here — a hidden element still ran its once-a-second timer. */ /* =========================================================================== Status colours, kept consistent everywhere. =========================================================================== */ .pill.active, .ms-pill--on, .sub-badge.active { background: rgba(47, 208, 122, 0.16) !important; border: 1px solid rgba(47, 208, 122, 0.45) !important; color: #2FD07A !important; } .ms-pill--off, .sub-badge.inactive { background: rgba(255, 112, 67, 0.16) !important; border: 1px solid rgba(255, 112, 67, 0.45) !important; color: #FF7043 !important; } .ms-badge, .dash-dot { background: #E50914 !important; color: #fff !important; } /* =========================================================================== Right to left. Everything above is flex or logical properties, which mirror on their own; only what is placed by hand is repeated here. =========================================================================== */ [dir="rtl"] .pv-row-title::before { margin-right: 0; margin-left: 12px; } [dir="rtl"] .pv-hero-overlay, [dir="rtl"] .hero-gradient { background: linear-gradient(270deg, #0B0B0B 0%, rgba(11,11,11,0.85) 45%, rgba(11,11,11,0) 100%) !important; }