/* Space Gate Nova+ final layer: transparent video/startup status header + truly fixed bottom menu. */ :root { --sg-bottom-nav-z-final: 2147483000; } html, body { background: #000 !important; min-height: 100dvh !important; overscroll-behavior-y: auto !important; transform: none !important; perspective: none !important; filter: none !important; } #app, .app-root, .main-layout-shell, .oscar-app, .native-view, .nova-app-shell, .catalog-landing-app { background: #000 !important; min-height: 100dvh !important; transform: none !important; perspective: none !important; filter: none !important; } body.sg-bottom-nav-portaled { padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; } /* Absolute final lock: the nav is moved under by JS, away from any scrolling page container. */ html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal, html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked, nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal, nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked { position: fixed !important; z-index: var(--sg-bottom-nav-z-final) !important; right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; max-width: 100vw !important; height: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; margin: 0 !important; transform: none !important; translate: none !important; will-change: auto !important; contain: layout paint style !important; pointer-events: auto !important; background: rgba(5,5,6,.985) !important; } nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal *, nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked * { animation-name: none !important; } .oscar-app, .native-view, .catalog-landing-main, .nova-catalog-page, .movies-catalog-page, .series-catalog-page, .anime-catalog-page, .wrestling-catalog-page, .details-page, .channel-details { padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 22px) !important; } /* Video/startup headers: no strip above the video, only system icons over content. */ .video-topbar, .player-topbar, .video-header, .player-header, .startup-header, .startup-video-header, .sg-video-header, .sg-player-header, .secure-start-header, .nova-secure-start, .nova-startup-badge, .nova-loading-badge, .header-bar.video, .header-bar.player { background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .video-topbar::before, .video-topbar::after, .player-topbar::before, .player-topbar::after, .video-header::before, .video-header::after, .player-header::before, .player-header::after, .startup-header::before, .startup-header::after, .startup-video-header::before, .startup-video-header::after, .secure-start-header::before, .secure-start-header::after, .nova-secure-start::before, .nova-secure-start::after, .nova-startup-badge::before, .nova-startup-badge::after { content: none !important; display: none !important; } /* Video header pass for startup/player surfaces. */ .sg-player-layer, .sg-player-shell { inset: 0 !important; width: 100dvw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; } .sg-player-topbar, .mc-video-topbar, .video-header, .video-topbar, .player-header, .player-topbar, .splash-header, .startup-header, .startup-video-header, .secure-start-header, .status-strip, .top-safe-area { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sg-player-topbar { margin: 0 !important; padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important; } .sg-player-topbar::before, .sg-player-topbar::after, .mc-video-topbar::before, .mc-video-topbar::after, .video-header::before, .video-header::after, .video-topbar::before, .video-topbar::after, .player-header::before, .player-header::after, .player-topbar::before, .player-topbar::after, .splash-header::before, .splash-header::after, .startup-header::before, .startup-header::after, .startup-video-header::before, .startup-video-header::after, .secure-start-header::before, .secure-start-header::after, .status-strip::before, .status-strip::after, .top-safe-area::before, .top-safe-area::after { content: none !important; display: none !important; } .status-strip, .top-safe-area { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .sg-player-topbar .sg-player-icon, .sg-player-topbar .sg-player-select-wrap, .mc-video-topbar button, .video-header :is(button, a, .icon-button), .video-topbar :is(button, a, .icon-button), .player-header :is(button, a, .icon-button), .player-topbar :is(button, a, .icon-button), .splash-header :is(button, a, .icon-button), .startup-header :is(button, a, .icon-button), .secure-start-header :is(button, a, .icon-button) { background: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .mc-video-details { position: relative !important; padding-top: 0 !important; } .mc-video-details > .mc-video-topbar { position: absolute !important; z-index: 8 !important; top: 0 !important; right: 0 !important; left: 0 !important; min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important; margin: 0 !important; padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important; } .mc-video-details > .mc-video-hero { width: 100% !important; margin: 0 !important; border-radius: 0 !important; } /* Final video edge-to-edge lock: only video/startup header surfaces are affected. */ .sg-player-layer, .sg-player-shell { inset: 0 !important; width: 100dvw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; } .video-header, .video-topbar, .player-header, .player-topbar, .splash-header, .startup-header, .startup-video-header, .secure-start-header, .status-strip, .top-safe-area, .sg-video-header, .sg-player-header, .sg-player-topbar, .mc-video-topbar { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .video-header::before, .video-header::after, .video-topbar::before, .video-topbar::after, .player-header::before, .player-header::after, .player-topbar::before, .player-topbar::after, .splash-header::before, .splash-header::after, .startup-header::before, .startup-header::after, .startup-video-header::before, .startup-video-header::after, .secure-start-header::before, .secure-start-header::after, .status-strip::before, .status-strip::after, .top-safe-area::before, .top-safe-area::after, .sg-video-header::before, .sg-video-header::after, .sg-player-header::before, .sg-player-header::after, .sg-player-topbar::before, .sg-player-topbar::after, .mc-video-topbar::before, .mc-video-topbar::after { content: none !important; display: none !important; } .status-strip, .top-safe-area { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .sg-player-topbar { top: 0 !important; margin: 0 !important; min-height: calc(58px + var(--safe-top, 0px)) !important; padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important; } .sg-player-topbar .sg-player-icon, .sg-player-topbar .sg-player-select-wrap, .mc-video-topbar button, .video-header :is(button, a, .icon-button), .video-topbar :is(button, a, .icon-button), .player-header :is(button, a, .icon-button), .player-topbar :is(button, a, .icon-button), .splash-header :is(button, a, .icon-button), .startup-header :is(button, a, .icon-button), .secure-start-header :is(button, a, .icon-button) { background: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .mc-video-details { position: relative !important; padding-top: 0 !important; } .mc-video-details > .mc-video-topbar { position: absolute !important; z-index: 8 !important; top: 0 !important; right: 0 !important; left: 0 !important; min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important; margin: 0 !important; padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important; } .mc-video-details > .mc-video-hero { width: 100% !important; margin: 0 !important; border-radius: 0 !important; } .video-topbar :is(button, a, .icon-button), .player-topbar :is(button, a, .icon-button), .video-header :is(button, a, .icon-button), .player-header :is(button, a, .icon-button) { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } @supports (padding: env(safe-area-inset-top)) { .video-topbar, .player-topbar, .video-header, .player-header { padding-top: calc(var(--safe-top,0px) + 4px) !important; } } /* SCROLL-SAFE PATCH --------------------------------------------------------- Keep the bottom nav fixed without touching the page scroll container. */ html, body, #app, .app-root, .main-layout-shell, .sg-route-frame, .sg-route-surface { overflow-y: auto !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal, html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked { touch-action: pan-x manipulation !important; overscroll-behavior: contain !important; } body.sg-bottom-nav-fixed-body, body.sg-bottom-nav-portaled { overflow-y: auto !important; touch-action: pan-y !important; } /* FINAL v2: Scroll-safe native Android layer -------------------------------- No JS portaling, no transformed route containers, and the browser document is the only vertical scroll root. */ html, body, #app, .app-root { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch !important; } body, body.sg-bottom-nav-fixed-body, body.sg-bottom-nav-portaled { overflow-y: auto !important; touch-action: pan-y !important; } .main-layout-shell, .sg-route-frame, .sg-route-surface, .oscar-app, .oscar-main, .native-view, .catalog-landing-main, .nova-catalog-page, .movies-catalog-page, .series-catalog-page, .anime-catalog-page, .wrestling-catalog-page, .details-page, .channel-details { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; transform: none !important; translate: none !important; contain: none !important; pointer-events: auto !important; touch-action: pan-y !important; } .sg-route-is-navigating .sg-route-frame { pointer-events: auto !important; } /* Fixed bottom menu without moving it to body. */ nav.oscar-bottom-nav.original-bottom-nav, .oscar-bottom-nav.original-bottom-nav { position: fixed !important; z-index: 2147483000 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; transform: none !important; translate: none !important; contain: none !important; pointer-events: auto !important; touch-action: pan-x manipulation !important; } .oscar-app, .native-view, .catalog-landing-main, .nova-catalog-page, .movies-catalog-page, .series-catalog-page, .anime-catalog-page, .wrestling-catalog-page, .details-page, .channel-details { padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 28px) !important; } /* Professional video page: completely transparent top/header/status area. */ .sg-player-layer, .sg-player-shell { background: #000 !important; } .sg-player-vignette { background: linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0,0,0,.88) 100%) !important; } .sg-player-topbar, .sg-player-topbar::before, .sg-player-topbar::after { background: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sg-player-topbar { min-height: calc(58px + var(--safe-top, 0px)) !important; padding-top: calc(8px + var(--safe-top, 0px)) !important; } .sg-player-topbar .sg-player-icon, .sg-player-topbar .sg-player-select-wrap { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Catalog filters exactly like the channels page: black headerless tabs + pill filters. */ .nova-catalog-page { padding-top: calc(10px + var(--safe-top, 0px)) !important; background: #000 !important; } .nova-catalog-minimal-actions { position: sticky !important; top: var(--safe-top, 0px) !important; z-index: 60 !important; min-height: 38px !important; padding: 2px 12px 4px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; background: #000 !important; border: 0 !important; box-shadow: none !important; } .nova-catalog-back-plain, .nova-catalog-back-plain:hover, .nova-catalog-back-plain:focus, .nova-catalog-back-plain:active { width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #fff !important; box-shadow: none !important; outline: none !important; } .nova-catalog-controls { padding: 0 12px 8px !important; background: #000 !important; border: 0 !important; box-shadow: none !important; } .nova-search-box { min-height: 40px !important; border: 0 !important; border-radius: 12px !important; background: #111 !important; box-shadow: none !important; } .nova-category-strip { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 12px 10px !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; direction: rtl !important; scrollbar-width: none !important; background: #000 !important; border: 0 !important; box-shadow: none !important; } .nova-category-strip::-webkit-scrollbar, .nova-select-row::-webkit-scrollbar { display: none !important; } .nova-category-strip button, .nova-category-strip .nova-category-chip { flex: 0 0 auto !important; height: 34px !important; min-width: auto !important; padding: 0 14px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #999 !important; font-size: .95rem !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: none !important; } .nova-category-strip button.active, .nova-category-strip .nova-category-chip.active, .nova-category-strip button.is-active, .nova-category-strip .nova-category-chip.is-active { background: linear-gradient(to left, #14D7FF, #9B4DFF) !important; color: #fff !important; font-weight: 700 !important; } .nova-select-row, .nova-live-filter-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 0 8px !important; margin: 8px 0 0 !important; overflow-x: auto !important; overflow-y: hidden !important; direction: rtl !important; scrollbar-width: none !important; background: transparent !important; } .nova-select-row label, .nova-live-filter-row label { position: relative !important; flex: 0 0 auto !important; height: 30px !important; min-width: auto !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; border: 0 !important; border-radius: 15px !important; background-color: #1a1a1a !important; color: #ccc !important; font-size: .8rem !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: none !important; } .nova-select-row label span, .nova-live-filter-row label span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } .nova-select-row label:has(select:not([value="all"])), .nova-live-filter-row label:has(select:not([value="all"])) { color: #fff !important; } .nova-select-row label select, .nova-live-filter-row label select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer !important; } .nova-result-summary, .nova-result-summary.silent { display: none !important; } /* SG RESTORE v3: startup video + scroll-safe layout bottom nav ---------------- This layer does not portal/move elements with JS and does not turn the page into a fixed-height scroll trap. It only locks the layout-level nav created in MainLayout. */ html, body, #app, .app-root, .main-layout-shell, .sg-route-frame, .sg-route-surface { overflow-x: hidden !important; transform: none !important; contain: none !important; } html, body, #app, .app-root { height: auto !important; min-height: 100% !important; overflow-y: auto !important; touch-action: pan-y !important; -webkit-overflow-scrolling: touch !important; } .main-layout-shell, .sg-route-frame, .sg-route-surface, .oscar-app, .oscar-main, .native-view, .catalog-landing-main, .nova-catalog-page, .movies-catalog-page, .series-catalog-page, .anime-catalog-page, .wrestling-catalog-page, .details-page, .channel-details { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow-y: visible !important; touch-action: pan-y !important; padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 28px) !important; } .sg-layout-bottom-nav { display: block !important; visibility: visible !important; position: fixed !important; z-index: 2147483000 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; height: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; pointer-events: none !important; transform: none !important; translate: none !important; contain: none !important; isolation: isolate !important; } .sg-layout-bottom-nav > nav.oscar-bottom-nav.original-bottom-nav { display: flex !important; visibility: visible !important; position: fixed !important; z-index: 2147483000 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; pointer-events: auto !important; transform: none !important; translate: none !important; contain: layout paint style !important; touch-action: pan-x manipulation !important; } /* Hide older page-level copies only, not the layout-level copy. */ .sg-route-frame nav.oscar-bottom-nav.original-bottom-nav, .sg-route-surface nav.oscar-bottom-nav.original-bottom-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Transparent video/startup top strip: no solid status/header band. */ .video-topbar, .player-topbar, .video-header, .player-header, .startup-header, .startup-video-header, .sg-video-header, .sg-player-header, .secure-start-header, .nova-secure-start, .nova-startup-badge, .nova-loading-badge, .header-bar.video, .header-bar.player { background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .video-topbar::before, .video-topbar::after, .player-topbar::before, .player-topbar::after, .video-header::before, .video-header::after, .player-header::before, .player-header::after, .startup-header::before, .startup-header::after, .startup-video-header::before, .startup-video-header::after, .secure-start-header::before, .secure-start-header::after, .nova-secure-start::before, .nova-secure-start::after, .nova-startup-badge::before, .nova-startup-badge::after { content: none !important; display: none !important; } /* Absolute final video header pass. Keep this block at EOF. */ .sg-player-layer, .sg-player-shell { inset: 0 !important; width: 100dvw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; } .sg-player-topbar, .mc-video-topbar, .video-header, .video-topbar, .player-header, .player-topbar, .splash-header, .startup-header, .startup-video-header, .secure-start-header, .status-strip, .top-safe-area { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sg-player-topbar { margin: 0 !important; padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important; } .sg-player-topbar::before, .sg-player-topbar::after, .mc-video-topbar::before, .mc-video-topbar::after, .video-header::before, .video-header::after, .video-topbar::before, .video-topbar::after, .player-header::before, .player-header::after, .player-topbar::before, .player-topbar::after, .splash-header::before, .splash-header::after, .startup-header::before, .startup-header::after, .startup-video-header::before, .startup-video-header::after, .secure-start-header::before, .secure-start-header::after, .status-strip::before, .status-strip::after, .top-safe-area::before, .top-safe-area::after { content: none !important; display: none !important; } .status-strip, .top-safe-area { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .sg-player-topbar .sg-player-icon, .sg-player-topbar .sg-player-select-wrap, .mc-video-topbar button, .video-header :is(button, a, .icon-button), .video-topbar :is(button, a, .icon-button), .player-header :is(button, a, .icon-button), .player-topbar :is(button, a, .icon-button), .splash-header :is(button, a, .icon-button), .startup-header :is(button, a, .icon-button), .secure-start-header :is(button, a, .icon-button) { background: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .mc-video-details { position: relative !important; padding-top: 0 !important; } .mc-video-details > .mc-video-topbar { position: absolute !important; z-index: 8 !important; top: 0 !important; right: 0 !important; left: 0 !important; min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important; margin: 0 !important; padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important; } .mc-video-details > .mc-video-hero { width: 100% !important; margin: 0 !important; border-radius: 0 !important; } /* SG FIXED PAGE HEADERS v1 ------------------------------------------------- Keeps every existing page header visible while the document scrolls. The catalog browser uses one sticky wrapper so search, filters, and categories move as a single unit without changing their approved sizes. */ :root { --sg-fixed-page-header-z: 860; --sg-fixed-page-overlay-z: 1200; } /* Existing full-width page headers. Heights, spacing, and visual identity remain owned by their original component styles. */ :where( .oscar-toolbar, .catalog-landing-toolbar, .anime-landing-toolbar, .movies-landing-toolbar, .series-landing-toolbar, .wrestling-landing-toolbar, .account-plain-header, .favorites-plain-header, .notifications-plain-header, .live-forced-header ) { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: var(--sg-fixed-page-header-z) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* All-movies / all-series / anime / wrestling catalog pages. */ .nova-catalog-page { padding-top: 0 !important; } .nova-catalog-fixed-header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; z-index: calc(var(--sg-fixed-page-header-z) + 10) !important; margin: 0 0 12px !important; padding-top: calc(8px + var(--safe-top, 0px)) !important; background: rgba(0, 0, 0, .985) !important; border-bottom: 1px solid rgba(255, 255, 255, .045) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .48) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; isolation: isolate !important; } .nova-catalog-fixed-header .nova-catalog-minimal-actions { position: relative !important; top: auto !important; z-index: auto !important; margin: 0 !important; } .nova-catalog-fixed-header .nova-catalog-controls, .nova-catalog-fixed-header .nova-category-strip { position: relative !important; top: auto !important; z-index: auto !important; } /* Detail-page floating action headers. They stay visible without reserving additional space because they already overlay the hero artwork. */ .details-app .nova-details-topbar { position: fixed !important; top: calc(var(--safe-top, 0px) + 12px) !important; right: clamp(12px, 3vw, 28px) !important; left: clamp(12px, 3vw, 28px) !important; z-index: calc(var(--sg-fixed-page-header-z) + 20) !important; } .media-details .details-topbar, .channel-details .details-topbar { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: calc(var(--sg-fixed-page-header-z) + 20) !important; } /* Match-center headers that already represent compact page bars. */ .mc-video-topbar, .mc-tabs, .mc-league-tabs { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; z-index: calc(var(--sg-fixed-page-header-z) + 5) !important; } .mc-league-back { position: fixed !important; top: calc(var(--safe-top, 0px) + 14px) !important; right: 14px !important; z-index: calc(var(--sg-fixed-page-header-z) + 20) !important; } /* Search and drawer overlays must remain above the newly fixed headers. */ .search-sheet { z-index: var(--sg-fixed-page-overlay-z) !important; } .menu-backdrop { z-index: calc(var(--sg-fixed-page-overlay-z) + 10) !important; } .side-menu { z-index: calc(var(--sg-fixed-page-overlay-z) + 20) !important; } @media (max-width: 680px) { .nova-catalog-fixed-header { margin-bottom: 10px !important; padding-top: calc(6px + var(--safe-top, 0px)) !important; } } /* More-specific rule required because the video details bar was previously forced to absolute positioning by an earlier compatibility layer. */ .mc-video-details > .mc-video-topbar { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: calc(var(--sg-fixed-page-header-z) + 20) !important; } /* SG VIEWPORT HEADER LOCK v2 — final cascade layer ------------------------- The document remains the only vertical scroll root. Every page header is fixed against the WebView viewport, not an animated route container. */ :root { --sg-page-header-z: 920; --sg-catalog-fixed-h: calc(146px + var(--safe-top, 0px)); } html, body, #app, .app-root, .main-layout-shell, .sg-route-frame, .sg-route-surface, .oscar-app, .oscar-main, .native-view, .catalog-landing-app, .nova-app, .details-app { transform: none !important; translate: none !important; filter: none !important; perspective: none !important; contain: none !important; } .sg-route-frame, .sg-route-frame[class*="sg-route-"] { animation: none !important; } :where( header.oscar-toolbar, .catalog-landing-toolbar, .account-plain-header, .favorites-plain-header, .notifications-plain-header, .live-forced-header, .nova-live-fixed-header ) { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: var(--sg-page-header-z) !important; transform: none !important; translate: none !important; contain: none !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* All-content catalog header: fixed as one compact unit. */ .nova-catalog-page { padding-top: var(--sg-catalog-fixed-h) !important; } .nova-catalog-fixed-header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: calc(var(--sg-page-header-z) + 5) !important; min-height: var(--sg-catalog-fixed-h) !important; margin: 0 !important; padding: calc(7px + var(--safe-top, 0px)) clamp(12px, 3vw, 24px) 8px !important; box-sizing: border-box !important; background: rgba(0, 0, 0, .99) !important; border-bottom: 1px solid rgba(255, 255, 255, .05) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .56) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; transform: none !important; contain: none !important; } .nova-catalog-fixed-header .nova-catalog-minimal-actions, .nova-catalog-fixed-header .nova-catalog-controls, .nova-catalog-fixed-header .nova-category-strip { position: relative !important; top: auto !important; right: auto !important; left: auto !important; z-index: auto !important; } /* Details and league back controls remain visible above hero artwork. */ .details-app .nova-details-topbar, .media-details .details-topbar, .channel-details .details-topbar, .mc-league-back { position: fixed !important; z-index: calc(var(--sg-page-header-z) + 30) !important; transform: none !important; contain: none !important; } /* Keep match-center primary bars attached to the viewport. */ .mc-video-details > .mc-video-topbar, .mc-video-topbar { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: calc(var(--sg-page-header-z) + 20) !important; } .search-sheet { z-index: 1300 !important; } .menu-backdrop { z-index: 1310 !important; } .side-menu { z-index: 1320 !important; } @media (max-width: 680px) { :root { --sg-catalog-fixed-h: calc(176px + var(--safe-top, 0px)); } .nova-catalog-fixed-header { padding-top: calc(5px + var(--safe-top, 0px)) !important; padding-inline: 10px !important; } }