/* ============================================================================ * MediaNet — Mobile UX Master Patches (2026-05-19) * * Universal mobile fixes applied across ALL sections (Filme, Seriale, TV, * Radio, Muzică, Audiobooks, JARVIS, Search, Profile). Loaded LAST in * so it overrides earlier antipatterns in styles.css, medianet-2026.css, etc. * * Compiled from research 5 paralel agents + audit local 2026-05-19. * Documentation: docs/MOBILE_UX.md * ========================================================================= */ /* ---------- 1. iOS Safari fundamentals ---------- */ /* Eliminate input zoom on focus (iOS auto-zooms inputs <16px) */ input, textarea, select { font-size: max(16px, 1rem) !important; } /* 2026-05-20 SCROLL REGRESSION FIX: dropped touch-action and overscroll-behavior * applications that were breaking vertical scroll on iOS. The "touch-action: * manipulation" on .card/.tile + body-level touch-action restrictions interact * badly with momentum scroll on WebKit. Now applied ONLY to true interactive * controls (buttons/links/chips), NOT to scroll containers or cards. * * Kill 300ms tap delay on actual interactive controls only */ button, a, [role="button"], .clickable, .nav-link, .ytm-chip, .mn-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Remove tap highlight on cards but keep their default touch-action so scroll * starts smoothly when user puts finger on a card to drag-scroll. */ .tile, .card, .mn-bottom-tabs > * { -webkit-tap-highlight-color: transparent; } /* Modals can opt out of scroll-chaining; body keeps native pull behavior. */ .modal, .overlay, [role="dialog"] { overscroll-behavior: contain; } /* ---------- 2. Hover stuck fix ---------- */ /* Disable hover transforms on touch devices — they get "stuck" after tap. * Use :active for tactile feedback instead. Note: this only neutralizes the * common patterns; individual rules with `:hover { transform: ... }` in older * CSS still apply but are overridden by these unsetters at touch-only. */ @media (hover: none) { *:hover { transform: none !important; /* Note: we keep color/background hover effects since they're harmless. */ } } /* Provide :active feedback on touch devices (mobile). 2026-05-20: REMOVED * .tile/.card from this list because the transform was firing on touchstart * (used to begin scrolling) and visually competing with scroll momentum on * iOS. Buttons/links/nav still get the feedback since they're tap-only. */ @media (hover: none) { button:active, a:active, [role="button"]:active, .nav-link:active, .mn-bottom-tabs > *:active, .ytm-chip:active { transform: scale(0.97); opacity: 0.85; transition: transform 80ms ease, opacity 80ms ease; } } /* ---------- 3. Safe-area insets on bottom tabs (notch + home indicator) ---------- */ .mn-bottom-tabs, .ytm-bottom-nav, .bottom-tabs, .ytm-player-bar { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; } /* Top bar: respect notch / Dynamic Island */ .ytm-topbar, .topbar, header[role="banner"] { padding-top: env(safe-area-inset-top); } /* ---------- 4. Viewport height fallback (URL bar shrink/expand) ---------- */ /* Replace 100vh with dvh fallback chain. Browsers without dvh support keep * the original vh value but with overflow-y:auto so URL bar shrink is safe. */ .ytm-shell, .ytm-main, .ytm-overlay, .mn-overlay, .search-overlay, .jarvis-overlay { min-height: 100vh; min-height: 100dvh; } /* ---------- 5. Focus management (WCAG 2.2 SC 2.4.11 + visible focus) ---------- */ :focus { outline: none; } :focus-visible { outline: 3px solid #4a90e2; outline-offset: 2px; border-radius: 4px; } /* Don't hide focus behind sticky headers / bottom-tabs / mini-player */ :root { --mn-header-h: 56px; --mn-bottom-tabs-h: 56px; } *[id], main, section, article { scroll-margin-top: calc(var(--mn-header-h) + 16px); scroll-margin-bottom: calc(var(--mn-bottom-tabs-h) + 16px); } input:focus, textarea:focus { scroll-margin-bottom: 50vh; /* keyboard-aware */ } /* Skip-link visible only on keyboard focus */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus, .skip-link:focus-visible { left: 16px; top: 16px; z-index: 99999; background: #000; color: #fff; padding: 12px 16px; border-radius: 8px; text-decoration: none; } /* ---------- 6. Reduced motion respect (WCAG 2.3.3 + 2.2.2) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- 7. Touch target minimums (WCAG 2.5.8 + Apple HIG) ---------- */ @media (max-width: 768px) { button, a[role="button"], .icon-btn, .ytm-icon-btn, .mn-bottom-tabs > *, .nav-link, .ytm-chip { min-width: 44px; min-height: 44px; } /* Inputs: 44px height on mobile for easy tapping */ input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; } } /* ---------- 8. Backdrop-filter fallback for older iPhones ---------- */ .ytm-topbar, .mn-bottom-tabs, .glass-nav { background: rgba(8, 9, 11, 0.92); /* solid fallback first */ } @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { .ytm-topbar, .mn-bottom-tabs, .glass-nav { background: rgba(8, 9, 11, 0.55); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } } /* ---------- 9. Image lazy-rendering off-screen (CSS containment) ---------- */ .ytm-track, .row-section, .mn-row, .ytm-track-list > *, .audiobook-card { contain: layout style paint; } /* 2026-05-20 REMOVED: content-visibility: auto on .row-section caused * WebKit momentum scroll to "jump back" because intrinsic-size estimate * differed from real layout. Re-enable only after measuring real heights. */ /* ---------- 10. Pointer-events: none on decorative SVG icons inside buttons ---------- */ button > svg, a > svg, .icon-btn > svg { pointer-events: none; /* clicks pass through to parent button */ } /* ---------- 11. Scroll snap on horizontal carousels (movie rows) ---------- */ .mn-row-scroll, .ytm-mobile-chips, .horizontal-carousel { scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; } .mn-row-scroll > *, .ytm-mobile-chips > *, .horizontal-carousel > * { scroll-snap-align: start; } /* ---------- 12. Audio player tap targets (audiobook + music) ---------- */ .ytm-ctrl-play, .play-pause-btn, .mn-play-btn { min-width: 56px; min-height: 56px; } .ytm-icon-btn, .scrubber-thumb { min-width: 44px; min-height: 44px; } input[type="range"].scrubber, .ytm-progress-bar { min-height: 24px; /* easier to grab */ } /* ---------- 13. Long-press text selection prevention on interactive elements ---------- */ button, .tile, .card, .mn-bottom-tabs > *, .nav-link { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* iOS no link callout menu */ } /* But preserve selection in actual content */ p, h1, h2, h3, h4, h5, h6, span:not(.icon), .text, .description { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }