/* * Global mobile (iOS Safari) + Smart TV (Tizen / webOS / Android TV / HbbTV) * compatibility layer. Loaded after main.css on every page so it can safely * win the cascade without needing !important everywhere. */ :root { --brand: #e50914; --plyr-color-main: #e50914; --plyr-video-control-color: #fff; --plyr-video-control-background-hover: #e50914; --plyr-menu-background: #181818; --plyr-menu-color: #fff; } /* ---------- Safe-area support (notch / TV overscan) ---------- */ html { -webkit-text-size-adjust: 100%; } body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-tap-highlight-color: transparent; } /* ---------- Native-app-like scrolling & touch feel ---------- */ html, body { /* Stops the whole page rubber-banding / pull-to-refresh on mobile browsers that honor it (Chrome/Edge on Android; Safari still gives elastic bounce but this keeps it from triggering a page reload gesture). */ overscroll-behavior-y: contain; } .owl-carousel .owl-stage, .mCSB_container, [class*="scroll"] { -webkit-overflow-scrolling: touch; } a, button, .canal-card, .card, .bottom-tab-bar__item { /* Removes the ~300ms tap delay and stray double-tap-to-zoom on controls. */ touch-action: manipulation; } /* Smooth, native-feeling cross-page transitions where the browser supports the View Transitions API (progressive enhancement - a no-op elsewhere). */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; } } /* ---------- Keyboard / remote-control focus visibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .header__nav-link:focus-visible, .canal-card:focus-visible, .canal-watch-btn:focus-visible { outline: 3px solid var(--brand) !important; outline-offset: 3px !important; border-radius: 6px; z-index: 2; position: relative; } /* Fallback for browsers without :focus-visible support (older Smart TV WebKit) */ .no-focus-visible a:focus, .no-focus-visible button:focus, .no-focus-visible [tabindex]:focus { outline: 3px solid var(--brand) !important; outline-offset: 3px !important; } /* ---------- Touch target sizing (Apple HIG: 44x44pt minimum) ---------- */ @media (max-width: 767px) { .header__nav-link, .header__search-btn, .header__signout-btn, .header__btn, button, .btn, a.canal-watch-btn { min-height: 44px; min-width: 44px; } input, select, textarea { font-size: 16px; /* prevents iOS Safari auto-zoom on focus */ } } /* ---------- iOS Safari specific fixes ---------- */ @supports (-webkit-touch-callout: none) { body { /* Avoid the 100vh keyboard/URL-bar jump on iOS Safari */ min-height: -webkit-fill-available; } input, textarea, select { border-radius: 0; } } /* ---------- TV mode (added to by tv-nav.js on Smart TV UAs / D-pad use) ---------- */ body.tv-mode { font-size: 18px; } body.tv-mode .container { max-width: 92vw; padding-left: 5vw; padding-right: 5vw; } body.tv-mode .header__nav-link, body.tv-mode .canal-nombre, body.tv-mode .section__title { font-size: 1.25em; } body.tv-mode a, body.tv-mode button { transition: transform 0.15s ease, outline-color 0.15s ease; } body.tv-mode a:focus-visible, body.tv-mode button:focus-visible, body.tv-mode [tabindex]:focus-visible { outline: 4px solid var(--brand) !important; outline-offset: 4px !important; transform: scale(1.05); } /* Hover-only affordances make no sense on a remote with no pointer */ body.tv-mode .card:hover, body.tv-mode .canal-card:hover { transform: none; } /* PWA "Add to Home Screen" standalone mode: hide the browser chrome affordances the page doesn't need to reproduce itself */ @media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); } } /* ---------- Language switcher ---------- */ .lang-switcher { position: relative; display: inline-block; } .lang-switcher__btn { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; line-height: 1; } .lang-switcher__btn:hover { background: rgba(255, 255, 255, 0.16); } .lang-switcher__menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 120px; margin: 0; padding: 6px; list-style: none; background: #181818; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); z-index: 500; } html[dir="rtl"] .lang-switcher__menu { right: auto; left: 0; } .lang-switcher.is-open .lang-switcher__menu { display: block; } .lang-switcher__item { display: block; padding: 8px 10px; border-radius: 5px; color: #ccc; text-decoration: none; font-size: 0.85rem; } .lang-switcher__item:hover, .lang-switcher__item:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; } .lang-switcher__item.is-active { color: var(--brand); font-weight: 700; } /* On the auth (login) page there's no header bar, so float the switcher */ .auth-page .lang-switcher { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); z-index: 50; } html[dir="rtl"] .auth-page .lang-switcher { right: auto; left: calc(16px + env(safe-area-inset-left)); } /* Inside the header nav bar */ .header__lang-switcher { margin-inline-start: 12px; } /* ---------- Install prompt / iOS "Add to Home Screen" coach mark ---------- */ .pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9999; background: #181818; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); max-width: 420px; margin: 0 auto; animation: pwaBannerIn 0.25s ease-out; } @keyframes pwaBannerIn { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pwa-install-banner__icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .pwa-install-banner__text { color: #fff; font-size: 0.9rem; line-height: 1.35; flex: 1; } .pwa-install-banner__actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .pwa-install-banner__btn { background: transparent; color: #b3b3b3; border: none; font-size: 0.85rem; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .pwa-install-banner__btn--primary { background: var(--brand); color: #fff; font-weight: 600; } /* body has a fixed bottom tab bar on mobile; lift the banner above it */ @media (max-width: 767px) { .pwa-install-banner { bottom: calc(68px + env(safe-area-inset-bottom)); } } /* ---------- Mobile bottom tab bar (native-app-style navigation) ---------- */ .bottom-tab-bar { display: none; } @media (max-width: 767px) { body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } .bottom-tab-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: rgba(20, 20, 20, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: env(safe-area-inset-bottom); } .bottom-tab-bar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 6px; min-height: 56px; color: #8c8c8c; text-decoration: none; font-size: 0.65rem; line-height: 1; } .bottom-tab-bar__item i { font-size: 1.15rem; } .bottom-tab-bar__item.is-active { color: var(--brand); } } /* TV mode has its own remote-driven navigation; a touch tab bar makes no sense there */ body.tv-mode .bottom-tab-bar { display: none !important; } body.tv-mode { padding-bottom: 0 !important; }