/* ─── Base ─────────────────────────────────────────────── */ body { background-color: #0a0c10; color: #ffffff; font-family: 'Inter', sans-serif; overflow-x: hidden; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* ─── Brand colours ─────────────────────────────────────── */ :root { --brand-amber: #f59e0b; --brand-orange: #ea580c; --bg-base: #0a0c10; --bg-card: #13151c; --bg-surface: #16181f; --border-dim: #1f2330; } .storyaxis-btn-gradient { background: linear-gradient(90deg, var(--brand-amber) 0%, var(--brand-orange) 100%); } .storyaxis-btn-gradient:hover { background: linear-gradient(90deg, #d97706 0%, #c2410c 100%); } /* ─── Rail atmosphere tints (subtle radial glow per genre) ── */ .rail-atmosphere { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(80px); left: -120px; top: -40px; width: 500px; height: 300px; opacity: 0; transition: opacity 1.2s ease; } .rail-atmosphere.visible { opacity: 1; } /* Per-rail tint colour is no longer set via static CSS selectors here. It's computed at render time by railAtmosphereStyle(railId) (JS, search this file) from railConfig[railId].glowColor (CMS) first, falling back to the static GENRE_GLOW map, and applied as an inline `background` on the .rail-atmosphere element itself. Called from renderPlatformRails() for every rail — dynamic ones via the per-rail template, and the static CW/MyList divs directly — so rails created in the CMS (no entry in this stylesheet) still get a tint instead of silently rendering with none. */ /* ─── Genre colour map ──────────────────────────────────── */ .genre-wildlife { background: rgba(29,158,117,0.18); color: #4dd4a8; border-color: rgba(29,158,117,0.35); } .genre-survival { background: rgba(186,117,23,0.18); color: #fbbf24; border-color: rgba(186,117,23,0.35); } .genre-psychology { background: rgba(139,92,246,0.18); color: #c4b5fd; border-color: rgba(139,92,246,0.35); } .genre-puzzles { background: rgba(56,189,248,0.18); color: #7dd3fc; border-color: rgba(56,189,248,0.35); } .genre-shortfilm { background: rgba(244,63,94,0.18); color: #fda4af; border-color: rgba(244,63,94,0.35); } .genre-latest { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.35); } .genre-default { background: rgba(255,255,255,0.08); color: #9ca3af; border-color: rgba(255,255,255,0.12); } /* CMS-driven rails (accentColor set in railConfig): colors come from the inline style genreAccentStyle() attaches alongside this class; these are just a safe fallback in case that inline style is ever missing. */ .genre-cms { background: rgba(255,255,255,0.08); color: #9ca3af; border-color: rgba(255,255,255,0.12); } /* ─── Hero background video — 75% right side, vivid ── */ .yt-bg-wrapper { position: absolute; top: 0; right: 0; bottom: 0; /* Always 75% of screen width from the right */ width: 75%; overflow: hidden; z-index: 0; } .yt-bg-iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); pointer-events: none; /* Full vivid — no dimming */ opacity: 1; filter: saturate(1.1) contrast(1.02) brightness(1.0); transition: opacity 0.8s ease; } /* ─── Left gradient — cinematic content panel, deep anchor ── */ .hero-fade-left { background: linear-gradient( to right, #0a0c10 0%, #0a0c10 22%, rgba(10,12,16,0.97) 34%, rgba(10,12,16,0.82) 47%, rgba(10,12,16,0.38) 60%, rgba(10,12,16,0.08) 72%, transparent 82% ); } .hero-fade-bottom { background: linear-gradient( to top, #0a0c10 0%, rgba(10,12,16,0.92) 10%, rgba(10,12,16,0.45) 22%, rgba(10,12,16,0.08) 36%, transparent 48% ); } .hero-vignette { background: radial-gradient(ellipse at 25% 50%, transparent 50%, rgba(0,0,0,0.42) 100%); } .hero-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.028; mix-blend-mode: overlay; } /* ─── PHASE 1: Cinematic top vignette (new) ─────────────── */ .hero-fade-top { background: linear-gradient( to bottom, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.15) 20%, transparent 50% ); } /* ─── Ambient genre glow ────────────────────────────────── */ #heroAmbientGlow { position: absolute; left: -160px; top: -160px; width: 950px; height: 950px; border-radius: 50%; pointer-events: none; z-index: 4; opacity: 0; filter: blur(80px); transition: background 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease; } #heroBottomGlow { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; pointer-events: none; z-index: 12; opacity: 0; transition: background 1.2s ease, opacity 1s ease; } /* ─── Mobile: poster image instead of video ─────────────── */ #heroPosterMobile { display: none; position: absolute; inset: 0; background-size: cover; background-position: center 20%; z-index: 1; } @media (max-width: 767px) { #heroPosterMobile { display: block; } .yt-bg-wrapper { display: none; } .hero-fade-left { background: linear-gradient( to right, #0a0c10 0%, rgba(10,12,16,0.97) 55%, rgba(10,12,16,0.75) 100% ); } } /* ─── Hero fallback image ───────────────────────────────── */ #heroFallbackImage { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transition: opacity 0.8s ease; z-index: 2; } /* ─── "Now Streaming" live pill — sharper, more premium ─── */ #heroLivePill { display: inline-flex; align-items: center; gap: 7px; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.45); color: #fca5a5; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; margin-bottom: 14px; backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(239,68,68,0.12); } #heroLivePill .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: livePulse 1.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(239,68,68,0.7); } @keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:0.2; } } /* ─── Hero genre badge ──────────────────────────────────── */ #heroGenreBadge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; border: 1px solid; margin-bottom: 12px; transition: all 0.5s ease; } #heroGenreBadge .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; } /* ─── Hero logo treatment ───────────────────────────────── */ #heroLogoImage { max-width: 280px; max-height: 90px; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 2px 16px rgba(0,0,0,0.7)); display: none; } /* ─── HERO title — Barlow Condensed, cinematic scale ── */ #heroTitle { font-family: 'Barlow Condensed', 'Inter', sans-serif !important; font-weight: 900; letter-spacing: -0.02em; line-height: 0.96; text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 8px 32px rgba(0,0,0,0.6), 0 0 80px rgba(0,0,0,0.3); } /* ─── Hero meta row ─────────────────────────────────────── */ #heroMeta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .hero-match-score { font-size: 10px; font-weight: 700; color: #4dd4a8; letter-spacing: 0.02em; } .hero-quality-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.1); color: #fcd34d; text-transform: uppercase; letter-spacing: 0.05em; } /* ─── Hero tag pills ────────────────────────────────────── */ #heroTags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .hero-tag-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid; cursor: pointer; transition: filter 0.2s, transform 0.2s; } .hero-tag-pill:hover { filter: brightness(1.3); transform: translateY(-1px); } /* ─── Hero progress strip (dots + mini-thumbs) ──────────── */ #heroDots { display: flex; align-items: center; gap: 12px; margin-top: 28px; } .hero-dot-bars { display: flex; align-items: center; gap: 6px; } .hero-dot-wrap { position: relative; cursor: pointer; display: flex; align-items: center; } .hero-dot { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.2); transition: width 0.35s cubic-bezier(.4,0,.2,1), background 0.35s ease; overflow: hidden; } .hero-dot.active { width: 44px; background: rgba(255,255,255,0.28); } .hero-dot:not(.active) { width: 24px; } .hero-dot-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--brand-amber); } .hero-dot.active .hero-dot-fill { animation: dotProgress var(--dot-duration, 10s) linear forwards; } @keyframes dotProgress { from { width: 0% } to { width: 100% } } .hero-thumb-strip { display: flex; align-items: center; gap: 6px; } .hero-mini-thumb { width: 60px; height: 38px; border-radius: 5px; overflow: hidden; cursor: pointer; border: 1.5px solid transparent; opacity: 0.4; flex-shrink: 0; transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.25s ease; background: var(--bg-card); } .hero-mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-mini-thumb.active { border-color: var(--brand-amber); opacity: 1; transform: scale(1.1); } .hero-mini-thumb:hover:not(.active) { opacity: 0.75; transform: scale(1.04); } /* ═══════════════════════════════════════════════════════ PHASE 2 — CARD IDENTITY SYSTEM Complete rewrite of all card styles: · Proper 16:9 aspect-ratio poster with object-fit cover · Genre-tinted left border on hover (matches rail accent) · Centered play button overlay on hover · Shimmer skeleton loading state · Continue-watching progress bar · NEW badge with pulse animation · Richer hover panel with larger type + save button · Row dimming on hover refined ═══════════════════════════════════════════════════════ */ /* ── Row container ── */ .row { /* BUGFIX: rows are DOM siblings with no z-index, so when a card pops downward on hover, the NEXT row underneath (later in DOM, same default stacking level) paints on top of it and covers the bottom of the popped card — that's the "below part is cut" bug. position:relative + a z-index bump on :hover lifts the entire row (card and all) above every row below it, the same way Netflix/Hotstar raise the whole rail on hover, not just the card. */ position: relative; z-index: 1; pointer-events: none; /* let clicks fall through to the header/See-All button beneath; re-enabled on cards below */ overflow-y: visible; /* NETFLIX/HOTSTAR FIX: hover-pop grows a real meta panel below the poster. transform-origin is "top center" (see .card below), so growth is downward + sideways only — no upward growth — which is why padding-top only needs a small buffer (box-shadow/glow bleed) while padding-bottom needs to fit the fully expanded, scaled card. margin-top cancels padding-top for layout so the row still sits where it always did. */ /* Card hover is now a pure center-origin scale(1.1) with no translateY (see .card:hover), so growth is split evenly above and below the card's resting position. The buffer below still needs extra room for the meta-panel's own expansion (it grows independently, downward only, inside the scaled card), but the top buffer must match the *scale* portion of the growth so the card doesn't get clipped above — that was the actual bug even after removing translateY, because this padding was still lopsided from the old downward-pop design. */ padding-top: 6px; padding-bottom: 12px; margin-top: 0; margin-bottom: 0; scroll-behavior: smooth; scroll-snap-type: none; padding-left: 1rem; padding-right: 1rem; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .row { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 16px; } } @media (min-width: 1024px) { .row { padding-top: 20px; padding-bottom: 72px; margin-top: -12px; margin-bottom: -56px; padding-left: 2.5rem; padding-right: 2.5rem; margin-left: -2.5rem; margin-right: -2.5rem; } } /* ── Card slot — reserves the grid space; layout-stable ── NETFLIX/HOTSTAR REWRITE: .card used to be the sized, flowed element and grew via transform:scale on hover (whole card scaled uniformly, image + gradient overlay together — never looked like a distinct image/info split, and the growth clipped against the row above). Now .card-slot holds the width/aspect-ratio tokens and stays static in the flex row (no layout shift ever). The actual .card is position:absolute inside it, exactly filling the slot at rest, and on hover it detaches to grow into a taller floating card — top ~65% poster image, bottom ~35% solid info panel — the same technique Netflix/Hotstar use. */ .card-slot { position: relative; flex: none; aspect-ratio: 16 / 9; width: 44%; pointer-events: auto; /* undo .row's pointer-events:none for actual card hit area */ } @media (min-width: 640px) { .card-slot { width: 31%; } } @media (min-width: 768px) { .card-slot { width: 26%; } } @media (min-width: 1024px) { .card-slot { width: 19%; } } @media (min-width: 1280px) { .card-slot { width: 16.5%; } } @media (min-width: 1536px) { .card-slot { width: 14.5%; } } @media (min-width: 1920px) { .card-slot { width: 12.8%; } } /* CMS "Card Style" control (railConfig[rail].cardStyle) — wired into createCard() below, which adds one of these as a modifier class on .card-slot now (it owns the aspect-ratio). */ .card-slot.card--portrait { aspect-ratio: 2 / 3; width: 32%; } @media (min-width: 640px) { .card-slot.card--portrait { width: 23%; } } @media (min-width: 768px) { .card-slot.card--portrait { width: 19%; } } @media (min-width: 1024px) { .card-slot.card--portrait { width: 14.5%; } } @media (min-width: 1280px) { .card-slot.card--portrait { width: 12.8%; } } @media (min-width: 1536px) { .card-slot.card--portrait { width: 11.2%; } } @media (min-width: 1920px) { .card-slot.card--portrait { width: 9.8%; } } .card-slot.card--square { aspect-ratio: 1 / 1; } /* ── Card itself — fills the slot at rest, pops out on hover ── BUGFIX: previously animated .card's actual `width`/`height` properties on hover — that fights the flex layout mid-transition and was causing the glitchy split/seam look. Reverted to a single transform:scale (GPU-only, no layout recalculation) exactly like the original proven Top10-style hover, just applied to a card that now genuinely contains an image block + a real (collapsed) panel block instead of an overlay. */ .card { position: absolute; top: 0; left: 0; width: 100%; height: auto; /* hugs .card-media (aspect-ratio) + .card-meta-panel (0 at rest) */ display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #0d0f16; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.06); transform-origin: center center; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.2s ease, box-shadow 0.25s ease, z-index 0s; z-index: 10; } /* Poster image region — the "65%" zone. Owns its own aspect-ratio (matching .card-slot's) so .card's auto height is well-defined without relying on flex-grow inside an auto-height parent. */ .card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .card-slot.card--portrait .card-media { aspect-ratio: 2 / 3; } .card-slot.card--square .card-media { aspect-ratio: 1 / 1; } /* PHASE 2: Card thumbnail — full cover, no letterboxing */ .card-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform 0.5s ease, filter 0.3s ease; } /* Motion parity: single scale transform, same mechanism as the original working hover (and Top10's), just on a card that now has real height to grow into (the panel below expanding) rather than an overlay. .row's overflow-y:visible + extra padding stop this from clipping against the row above. */ .card-slot { transition: z-index 0.3s ease; z-index: 1; } .card-slot:hover { z-index: 100 !important; } .card { transform-origin: center center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease; will-change: transform, box-shadow; } .card:hover { border-color: rgba(255, 255, 255, 0.2); } .card.card--popout-active, .card:focus-visible, .card.spatial-focused { transform: scale(1.35); border: 1px solid rgba(255, 255, 255, 0.16); z-index: 500; background: #181818; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.85), 0 24px 60px rgba(0,0,0,0.95); } /* Edge cards: shift the growth origin inward so the first/last card in a rail doesn't blow past the row's clip boundary. */ .card-slot:first-child .card { transform-origin: left center; } .card-slot:last-child .card { transform-origin: right center; } .card.card--popout-active .card-thumb, .card:focus-visible .card-thumb, .card.spatial-focused .card-thumb { transform: scale(1.04); filter: brightness(0.85) saturate(1.05); } .card.card--popout-active .card-play-overlay { opacity: 0 !important; } .card:hover .card-genre-badge { opacity: 1; } .card.card--popout-active .card-meta-panel, .card:focus-visible .card-meta-panel, .card.spatial-focused .card-meta-panel { max-height: 320px; opacity: 1; padding: 12px 16px 16px; pointer-events: auto; background: #181818; overflow: visible; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* Lift the whole row above every row below it while any card inside is popped open */ .row:has(.card--popout-active), .row:has(.card:focus-within), .row.rail--active-hover { z-index: 100 !important; } /* PHASE 2: Play button overlay — centered, appears on hover */ .card-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.25s ease; } .card-play-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transform: scale(0.85); transition: transform 0.25s ease, background 0.2s ease; } .card-play-btn svg { margin-left: 3px; } /* PHASE 2: Genre badge — always visible (not just on hover) */ .card-genre-badge { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; border: 1px solid; pointer-events: none; z-index: 5; /* PHASE 2: visible at rest, brighter on hover */ opacity: 0.75; transition: opacity 0.25s ease; backdrop-filter: blur(6px); } /* PHASE 2: Badge label (NEW / EXCLUSIVE / TRENDING) */ .card-badge-label { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--brand-amber); color: #000; z-index: 5; } /* PHASE 2: NEW badge gets a pulse */ .card-badge-label.badge-new { background: #ef4444; color: #fff; animation: badgeNewPulse 2.5s ease-in-out infinite; } @keyframes badgeNewPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } } /* PHASE 2 -> NETFLIX/HOTSTAR REWRITE: this used to be an absolutely positioned gradient sitting ON TOP of the poster image (bottom ~40% of it opaque). Now it's a real flow element that sits BELOW .card-media — collapsed to 0 height at rest (so at-rest cards look identical to before: pure poster, badges, no panel), and expands to a solid ~180px panel on hover. That's the 65/35 image/info split from the reference screenshots. */ .card-meta-panel { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; max-height: 0; overflow: hidden; background: #12141b; padding: 0 12px; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease; pointer-events: none; z-index: 6; } /* HOTSTAR-STYLE REORDER: markup order in app-core.js's createCard() stays untouched (title, meta-row, tags, actions) — flex `order` here visually reflows it to match the Hotstar reference: action buttons first, then year/rating/language/duration, then the title last in a smaller font. Nothing in JS needs to change. */ .card-actions { order: 1; margin-top: 8px; margin-bottom: 8px; } .card-meta-row { order: 2; } .card-meta-tags { order: 3; } .card-meta-title { order: 4; margin-bottom: 4px; } /* PHASE 2: Card title — smaller/tighter, Hotstar-style secondary line */ .card-meta-title { font-size: clamp(11.5px, 0.88vw, 13px); font-weight: 600; color: #f1f5f9; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* PHASE 2: Card meta row */ .card-meta-row { display: flex; align-items: center; gap: 5px; font-size: clamp(10px, 0.72vw, 11px); font-weight: 600; color: #94a3b8; margin-bottom: 6px; flex-wrap: nowrap; overflow: hidden; } .card-meta-row .meta-year { color: #94a3b8; } .card-meta-row .meta-age { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); padding: 0 4px; border-radius: 3px; color: #fff; } .card-meta-row .meta-dur { color: #64748b; } .card-meta-row .meta-lang { color: var(--brand-amber); font-weight: 700; } .card-meta-row .meta-dot { color: #1f2330; } /* PHASE 2: Card tags line */ .card-meta-tags { font-size: 10px; font-weight: 700; color: var(--brand-amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; opacity: 0.85; } /* NETFLIX/HOTSTAR REWRITE: action row is now small circular icon buttons (play / add / like) instead of a full-width text pill — the pill was eating most of the panel's width and looked nothing like the reference screenshots. */ .card-actions { display: flex; align-items: center; gap: 8px; } .card-icon-btn { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .card-icon-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); } .card-icon-btn svg { width: 14px; height: 14px; } /* Play button — solid white like Netflix's primary action */ .card-icon-btn--play { background: #fff; border-color: #fff; color: #000; } .card-icon-btn--play:hover { background: #e2e8f0; } .card-icon-btn--play svg { margin-left: 1px; } .card-icon-btn--like.liked { border-color: var(--brand-amber); color: var(--brand-amber); } .card-icon-btn--save.saved { border-color: var(--brand-amber); color: var(--brand-amber); } /* PHASE 2: Continue-watching progress bar — bottom of card */ .card-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.12); z-index: 7; pointer-events: none; } .card-progress-fill { height: 100%; background: var(--brand-amber); border-radius: 0 2px 2px 0; min-width: 4px; } /* PHASE 2: Shimmer skeleton loading state */ .card-skeleton { position: relative; flex: none; border-radius: 10px; background: #13151c; overflow: hidden; aspect-ratio: 16 / 9; width: 42%; border: 1.5px solid rgba(255,255,255,0.04); } @media (min-width: 768px) { .card-skeleton { width: 29%; } } @media (min-width: 1024px) { .card-skeleton { width: 17.5%; } } @media (min-width: 1280px) { .card-skeleton { width: 16%; } } .card-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 60%, transparent 100% ); background-size: 200% 100%; animation: shimmer 1.8s infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* PHASE 2: Genre-specific card accent colors (CSS custom property) */ .card[data-genre="wildlife"] { --card-genre-color: rgba(29,158,117,0.65); } .card[data-genre="survival"] { --card-genre-color: rgba(245,158,11,0.65); } .card[data-genre="psychology"] { --card-genre-color: rgba(139,92,246,0.65); } .card[data-genre="puzzles"] { --card-genre-color: rgba(56,189,248,0.65); } .card[data-genre="shortfilm"] { --card-genre-color: rgba(244,63,94,0.65); } .card[data-genre="latest"] { --card-genre-color: rgba(59,130,246,0.65); } /* PHASE 2: Rail skeleton — show 6 ghost cards while loading */ .rail-skeleton-row { display: flex; gap: 1rem; padding-top: 1.5rem; padding-bottom: 2.5rem; overflow: hidden; } /* ─── PHASE 1: Loading overlay — branded cinematic screen ── */ #loadingOverlay { position: fixed; inset: 0; background: #0a0c10; z-index: 999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; } #loadingOverlay .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 0; } #loadingOverlay .loader-logo-ring { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 38px; font-weight: 900; color: #000; margin-bottom: 20px; box-shadow: 0 0 0 0 rgba(245,158,11,0.5); animation: loaderPulse 2s ease-in-out infinite; } @keyframes loaderPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); } 50% { box-shadow: 0 0 0 16px rgba(245,158,11,0); } } #loadingOverlay .loader-brand { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: 0.04em; margin-bottom: 8px; } #loadingOverlay .loader-tagline { font-size: 11px; font-weight: 600; color: #4b5563; letter-spacing: 0.2em; text-transform: uppercase; } .loader-bar-wrap { width: 120px; height: 2px; background: #1f2330; border-radius: 2px; margin-top: 24px; overflow: hidden; } .loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #ea580c); border-radius: 2px; animation: loaderBar 1.6s ease-in-out infinite; } @keyframes loaderBar { 0% { width: 0%; margin-left: 0%; } 50% { width: 60%; margin-left: 20%; } 100% { width: 0%; margin-left: 100%; } } /* ─── Hero transition ───────────────────────────────────── */ .hero-content-wrap { transition: opacity 0.5s ease, transform 0.5s ease; } .hero-content-wrap.transitioning { opacity: 0; transform: translateY(10px); } /* ═══════════════════════════════════════════════════════ PHASE 3 — STAGGERED HERO ENTRANCE ANIMATION Each element drifts up + fades in sequentially. Triggered by .hero-animate class on the content wrap. Matches the reveal pattern used by Netflix / Hotstar. ═══════════════════════════════════════════════════════ */ /* Base state: all animatable elements start invisible */ .hero-animate-el { opacity: 0; transform: translateY(18px); } /* The keyframe — drift up + fade in */ @keyframes heroReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* When .hero-animate is added to the wrap, fire each child */ .hero-content-wrap.hero-animate #heroLivePill { animation: heroReveal 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; } .hero-content-wrap.hero-animate #heroGenreBadge { animation: heroReveal 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.13s both; } .hero-content-wrap.hero-animate #heroLogoImage, .hero-content-wrap.hero-animate #heroTitle { animation: heroReveal 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both; } .hero-content-wrap.hero-animate #heroMeta { animation: heroReveal 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.34s both; } .hero-content-wrap.hero-animate #heroDesc { animation: heroReveal 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.44s both; } .hero-content-wrap.hero-animate #heroTags { animation: heroReveal 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) 0.54s both; } /* CTA row — Watch Now + Save + Info buttons */ .hero-content-wrap.hero-animate .hero-cta-row { animation: heroReveal 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) 0.63s both; } /* Dot / thumbnail strip comes in last */ .hero-content-wrap.hero-animate #heroDots { animation: heroReveal 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) 0.74s both; } /* Mute button fades in independently (it's outside the content wrap) */ @keyframes muteReveal { from { opacity: 0; } to { opacity: 1; } } .hero-mute-animate { animation: muteReveal 0.4s ease 0.9s both; } /* ─── Carousel thumbs ───────────────────────────────────── */ .carousel-thumb { transition: all 0.3s; opacity: 0.5; border: 2px solid transparent; } .carousel-thumb.active { opacity: 1; border-color: var(--brand-amber); transform: scale(1.05); } .carousel-thumb:hover { opacity: 1; } /* ══════════════════════════════════════════════════════ NAVIGATION — premium sticky / glass / scroll behavior (Nav-only upgrade — goHome(), mobile menu handlers, and shared genre classes are untouched.) ══════════════════════════════════════════════════════ */ #mainNav { backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.04); will-change: transform, background, box-shadow; transition: background-color 0.45s cubic-bezier(0.22,1,0.36,1), backdrop-filter 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1); } /* Solid glass state once the user has scrolled past the hero */ #mainNav.scrolled { background: rgba(10,12,16,0.78) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 32px -8px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04); } /* Hide-on-scroll-down / reveal-on-scroll-up, premium OTT pattern */ #mainNav.nav-hidden { transform: translateY(-100%); } /* Thin gradient accent line that fades in once solid (subtle premium touch) */ #mainNav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.35), transparent); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } #mainNav.scrolled::after { opacity: 1; } /* Logo micro-interaction refinement */ #mainNav .nav-logo-group { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), filter 0.25s ease; } #mainNav .nav-logo-group:hover { transform: scale(1.045); } #mainNav .nav-logo-group:active { transform: scale(0.97); } /* ─── Rail mood headers ─────────────────────────────────── */ .rail-header-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-right: 48px; padding-left: 12px; position: relative; } .rail-header-wrap::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 2px; background: var(--rail-accent, #f59e0b); } .rail-title-group { display: flex; align-items: center; gap: 10px; } .rail-icon { font-size: 16px; line-height: 1; } .rail-title { font-size: 18px; font-weight: 800; color: #f1f5f9; letter-spacing: -0.01em; } .rail-count { font-size: 11px; font-weight: 600; color: #475569; margin-left: 6px; } .rail-see-all { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--rail-accent, #f59e0b); color: var(--rail-accent, #f59e0b); background: transparent; opacity: 0.75; } .rail-see-all:hover { opacity: 1; background: var(--rail-accent, #f59e0b); color: #000; } /* ─── Footer ────────────────────────────────────────────── */ #site-footer { border-top: 1px solid #1f2330; padding: 48px 48px 32px; background: #0a0c10; } /* ══════════════════════════════════════════════════════ PHASE 4a — GENRE NAV LINKS ══════════════════════════════════════════════════════ */ #dynamicNavLinks a { position: relative; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); text-decoration: none; letter-spacing: 0.01em; padding: 6px 2px; transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); white-space: nowrap; } #dynamicNavLinks a:hover { color: #fff; transform: translateY(-1px); } #dynamicNavLinks a.nav-active { color: #fff; } #dynamicNavLinks a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange)); box-shadow: 0 0 8px rgba(245,158,11,0.5); transform: scaleX(0); transform-origin: left; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); } #dynamicNavLinks a:hover::after, #dynamicNavLinks a.nav-active::after { transform: scaleX(1); } #dynamicNavLinks a.nav-active { animation: navActivePop 0.35s cubic-bezier(0.34,1.56,0.64,1); } @keyframes navActivePop { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-2px) scale(1.04); } 100% { transform: translateY(0) scale(1); } } /* Mobile genre strip */ #mobileGenreStrip { display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 49; background: rgba(10,12,16,0.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 8px 16px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 8px; transition: background 0.4s ease, backdrop-filter 0.4s ease; } #mobileGenreStrip::-webkit-scrollbar { display: none; } @media (max-width: 767px) { #mobileGenreStrip { display: flex; } } .mobile-genre-pill { flex-shrink: 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); cursor: pointer; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .mobile-genre-pill:active { transform: scale(0.94); } .mobile-genre-pill:hover, .mobile-genre-pill.mpill-active { color: #000; background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange)); border-color: transparent; box-shadow: 0 2px 10px rgba(245,158,11,0.35); } .mobile-genre-pill.home-pill { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); } /* ══════════════════════════════════════════════════════ PHASE 4b — HERO CTA HIERARCHY ══════════════════════════════════════════════════════ */ /* Watch Now — primary pill, darker text for contrast on amber */ #heroLink { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 15px; font-weight: 900; border-radius: 10px; letter-spacing: 0.02em; border: none; outline: none; color: #000 !important; position: relative; overflow: hidden; } #heroLink::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 68%); transform: translateX(-150%); transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); pointer-events: none; } #heroLink:hover::after { transform: translateX(150%); } @media (min-width: 768px) { #heroLink { padding: 16px 42px; font-size: 16px; } } /* Pulse ring on play icon */ .hero-play-pulse { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .hero-play-pulse::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); animation: heroPlayPulse 2.2s ease-out infinite; } @keyframes heroPlayPulse { 0% { transform: scale(0.65); opacity: 0.9; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* More Info — frosted glass secondary */ #heroInfoBtn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 14px; font-weight: 700; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.2s; backdrop-filter: blur(12px); white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); } #heroInfoBtn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.48); transform: scale(1.03); box-shadow: 0 8px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1); } @media (min-width: 768px) { #heroInfoBtn { padding: 16px 28px; font-size: 15px; } } /* Save — tertiary small circle */ #heroSaveBtn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s; backdrop-filter: blur(8px); flex-shrink: 0; } #heroSaveBtn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.38); transform: scale(1.06); } #heroSaveBtn.saved { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.1); } /* ══════════════════════════════════════════════════════ MODAL DETAIL PAGE — premium redesign ══════════════════════════════════════════════════════ */ #modalContent { max-height: 90vh; overflow-y: auto; scrollbar-width: none; } #modalContent::-webkit-scrollbar { display: none; } .modal-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .modal-meta-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; border: 1px solid; } .modal-meta-pill { font-size: 11px; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 4px; } .modal-meta-pill + .modal-meta-pill::before { content: '·'; color: #1f2330; } /* More Like This rail */ #modalMoreLikeThis { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); } #modalMoreLikeTitle { font-size: 13px; font-weight: 700; color: #6b7280; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .modal-mlt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 640px) { .modal-mlt-grid { grid-template-columns: repeat(2, 1fr); } } .modal-mlt-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; cursor: pointer; background: #0d0f16; border: 1.5px solid rgba(255,255,255,0.05); transition: transform 0.2s ease, border-color 0.2s ease; } .modal-mlt-card:hover { transform: scale(1.04); border-color: rgba(245,158,11,0.4); } .modal-mlt-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-mlt-card-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(10,12,16,0.95) 0%, transparent 100%); padding: 16px 8px 6px; font-size: 11px; font-weight: 700; color: #f1f5f9; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* More Like This polish (additive, non-breaking) */ .modal-mlt-grid { gap: 14px; } @media (min-width: 1024px) { .modal-mlt-grid { gap: 16px; } } .mlt-enhanced { opacity: 0; transform: translateY(14px) scale(0.96); animation: mltCardIn 0.45s cubic-bezier(0.22,1,0.36,1) forwards; will-change: transform, opacity; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease; } .mlt-enhanced:hover { transform: scale(1.07) translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.25); z-index: 2; } .mlt-enhanced:hover .mlt-play-badge { opacity: 1; transform: translate(-50%,-50%) scale(1); } .mlt-enhanced:hover .modal-mlt-card-label { color: #ffffff; } .mlt-enhanced:active { transform: scale(1.02); } @keyframes mltCardIn { to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .mlt-enhanced { animation: none; opacity: 1; transform: none; } .mlt-enhanced:hover { transform: none; } } .mlt-play-badge { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,12,16,0.75); border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%,-50%) scale(0.7); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .mlt-play-badge svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; } @media (max-width: 480px) { .modal-mlt-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Premium action button polish (additive, non-breaking) */ .modal-cta-row { gap: 14px; margin-top: 4px; } .modal-action-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s cubic-bezier(0.22,1,0.36,1), background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease; will-change: transform; } .modal-action-btn:hover { transform: translateY(-2px) scale(1.035); } .modal-action-btn:active { transform: translateY(0) scale(0.965); transition-duration: 0.1s; } .modal-action-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-card, #13151c), 0 0 0 4.5px rgba(245,158,11,0.7); } /* Primary — Play Now */ .modal-action-primary { letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(245,158,11,0.22), 0 1px 2px rgba(0,0,0,0.3); } .modal-action-primary:hover { box-shadow: 0 10px 28px rgba(245,158,11,0.4), 0 2px 8px rgba(0,0,0,0.45); } .modal-action-primary:active { box-shadow: 0 4px 14px rgba(245,158,11,0.3), 0 1px 2px rgba(0,0,0,0.3); } .modal-action-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: -1; } .modal-action-primary:hover::before { opacity: 1; } .modal-action-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.32) 48%, transparent 70%); transform: translateX(-130%); transition: transform 0.65s cubic-bezier(0.22,1,0.36,1); pointer-events: none; } .modal-action-primary:hover::after { transform: translateX(130%); } .modal-action-primary svg { transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); } .modal-action-primary:hover svg { transform: scale(1.12); } /* Secondary icon buttons — Save / Share */ .modal-action-icon { backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .modal-action-icon:hover { background-color: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.32) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06); } .modal-action-icon:active { background-color: rgba(255,255,255,0.05) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .modal-action-icon svg { transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease; } .modal-action-icon:hover svg { transform: scale(1.14); } .modal-action-icon:active svg { transform: scale(0.92); } /* Saved state gets a warm glow — relies only on existing amber SVG class, no markup change */ .modal-action-icon:has(svg.text-amber-400) { border-color: rgba(245,158,11,0.45) !important; background-color: rgba(245,158,11,0.1) !important; box-shadow: 0 0 0 1px rgba(245,158,11,0.2), 0 4px 14px rgba(245,158,11,0.18); } /* ── Fix: close button decoupled from #modalContent's box ──────────── Previously position:absolute anchored to #modalContent (top/right), so when the YouTube iframe mounted/resized and modalContent's box changed size, the button visually relocated out from under the user's first tap — the first tap landed on empty space where the button *used* to be, the second tap landed on its new real spot. position:fixed relative to the viewport removes that dependency entirely: the button now sits in a fixed screen corner no matter what the modal's internal content does. !important beats any leftover inline/Tailwind `absolute` positioning class in the HTML. */ .modal-close-btn { position: fixed !important; top: max(1rem, var(--sa-top, 0px)) !important; right: max(1rem, var(--sa-right, 0px)) !important; left: auto !important; bottom: auto !important; z-index: 10001 !important; pointer-events: auto !important; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.35); } /* Fix: only apply the rotate/scale hover flourish on devices that can actually hover with a mouse. On touch devices, a CSS :hover state fires on the FIRST tap (before any click event), which visually "used up" that tap on the animation and made the button look like it needed two taps to close. Gating this behind (hover: hover) and (pointer: fine) means touch/tap devices skip the hover state entirely and the first tap goes straight to the click handler. */ @media (hover: hover) and (pointer: fine) { .modal-close-btn { transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), background-color 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .modal-close-btn:hover { transform: rotate(90deg) scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.4); } .modal-close-btn:active { transform: rotate(90deg) scale(0.92); } } .modal-close-btn:active { transform: scale(0.92); } .modal-close-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(10,12,16,1), 0 0 0 4.5px rgba(245,158,11,0.7); } @media (prefers-reduced-motion: reduce) { .modal-action-btn, .modal-close-btn { transition: none; } .modal-action-btn:hover, .modal-close-btn:hover { transform: none; } .modal-action-primary::after, .modal-action-primary::before { display: none; } .modal-action-primary:hover svg, .modal-action-icon:hover svg { transform: none; } } @media (max-width: 420px) { .modal-cta-row { gap: 10px; } .modal-action-primary { padding-left: 22px !important; padding-right: 22px !important; } } /* ══════════════════════════════════════════════════════ Cinematic Info Modal open/close animation (additive) Hooks purely into the classes openModal()/closeModal() already toggle (#infoModal.hidden, #modalContent's scale-95/opacity-0 ⇄ scale-100/opacity-100) — no JS function signatures touched. ══════════════════════════════════════════════════════ */ #infoModal { transition: background-color 0.45s cubic-bezier(0.22,1,0.36,1); } #infoModal:not(.hidden) { z-index: 9999 !important; } #infoModal .modal-backdrop { transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), backdrop-filter 0.5s ease; opacity: 0; } #infoModal:not(.hidden) .modal-backdrop { opacity: 1; } #modalContent.modal-content-cinematic { transition: opacity 0.48s cubic-bezier(0.16,1,0.3,1), transform 0.48s cubic-bezier(0.16,1,0.3,1), filter 0.48s cubic-bezier(0.16,1,0.3,1); transform-origin: center center; filter: blur(6px); } #modalContent.modal-content-cinematic.scale-95 { transform: scale(0.94) translateY(10px); filter: blur(6px); } #modalContent.modal-content-cinematic.scale-100 { transform: scale(1) translateY(0); filter: blur(0); } /* Staggered inner-content reveal — fires once #modalContent reaches its open state */ .modal-content-cinematic .modal-stagger-item { opacity: 0; transform: translateY(10px); transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1); transition-delay: 0s; } .modal-content-cinematic.scale-100 .modal-stagger-item { opacity: 1; transform: translateY(0); } .modal-content-cinematic.scale-100 .modal-stagger-item:nth-of-type(1) { transition-delay: 0.06s; } .modal-content-cinematic.scale-100 .modal-stagger-item:nth-of-type(2) { transition-delay: 0.14s; } @media (prefers-reduced-motion: reduce) { #infoModal, #infoModal .modal-backdrop, #modalContent.modal-content-cinematic, .modal-content-cinematic .modal-stagger-item { transition: opacity 0.15s linear !important; transform: none !important; filter: none !important; } } @media (min-width: 768px) and (max-width: 1023px) { .modal-mlt-grid { grid-template-columns: repeat(3, 1fr); } } /* PHASE 2: Grid cards (category view + search) override width to full column */ #category-grid .card, #searchResults .card { width: 100% !important; height: auto !important; aspect-ratio: unset !important; } /* PHASE 3: Grid cards use the same floating hover-preview clone as rails now, so no in-place scale here — avoids a flash before the clone takes over. */ #category-grid .row:hover .card:not(:hover), #searchResults .row:hover .card:not(:hover) { opacity: 1; filter: none; } /* ═══════════════════════════════════════════════════════════ TOP 10 NUMBERED RANKINGS RAIL — Premium Enhancement Portrait poster cards with metallic gradient numbers Taller rail, richer hover states, refined spacing ═══════════════════════════════════════════════════════════ */ /* Rail container */ .top10-atmosphere { position: absolute; top: -100px; left: -80px; width: 700px; height: 450px; background: radial-gradient(ellipse, rgba(245,158,11,0.07) 0%, transparent 70%); pointer-events: none; filter: blur(80px); z-index: 0; } /* Rail header */ .top10-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; flex-shrink: 0; } .top10-header-left { display: flex; align-items: center; gap: 14px; padding-left: 16px; position: relative; } .top10-header-left::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 28px; border-radius: 2px; background: linear-gradient(180deg, #fcd34d, var(--brand-orange)); box-shadow: 0 0 16px rgba(245,158,11,0.55); } .top10-fire-icon { font-size: 24px; filter: drop-shadow(0 0 8px rgba(245,158,11,0.6)); animation: fireWiggle 2.5s ease-in-out infinite; } @keyframes fireWiggle { 0%, 100% { transform: rotate(-3deg) scale(1); } 25% { transform: rotate(3deg) scale(1.1); } 50% { transform: rotate(-2deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.08); } } .top10-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; color: #f1f5f9; letter-spacing: 0.01em; } .top10-subtitle { font-size: 11px; font-weight: 700; color: #475569; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 2px; } .top10-see-all { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-amber); border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.06); padding: 7px 18px; border-radius: 99px; cursor: pointer; opacity: 0.8; transition: all 0.25s; text-decoration: none; backdrop-filter: blur(6px); } .top10-see-all:hover { opacity: 1; background: var(--brand-amber); color: #000; box-shadow: 0 4px 16px rgba(245,158,11,0.3); } /* Rail Scroll Navigation Buttons (OTT Standard) */ .rail-nav-btn, .top10-scroll-btn, button[onclick*="scrollRow"] { position: absolute; top: 0; bottom: 0; height: 100%; width: 44px; border: none; border-radius: 0 !important; background: rgba(10, 12, 16, 0.75); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.75; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, transform 0.2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 40; } .group:hover .rail-nav-btn:not(.is-hidden), .rail-container-wrap:hover .rail-nav-btn:not(.is-hidden), .top10-scroll-wrap:hover .top10-scroll-btn:not(.is-hidden), .rail-nav-btn:not(.is-hidden):hover, button[onclick*="scrollRow"]:not(.is-hidden):hover, .top10-scroll-btn:not(.is-hidden):hover { opacity: 1 !important; background: rgba(10, 12, 16, 0.95); } .rail-nav-btn:hover svg, button[onclick*="scrollRow"]:hover svg, .top10-scroll-btn:hover svg { transform: scale(1.15); } .rail-nav-btn svg, button[onclick*="scrollRow"] svg, .top10-scroll-btn svg { width: 32px; height: 32px; stroke-width: 2; transition: transform 0.2s ease; } .rail-nav-btn-left, .top10-scroll-btn.left, button[onclick*="-1"] { left: -1rem; border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; } .rail-nav-btn-right, .top10-scroll-btn.right, button[onclick*=" 1"], button[onclick*=",1"] { right: -1rem; border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; } @media (min-width: 768px) { .rail-nav-btn, .top10-scroll-btn, button[onclick*="scrollRow"] { width: 48px; } .rail-nav-btn-left, .top10-scroll-btn.left, button[onclick*="-1"] { left: -3rem; } .rail-nav-btn-right, .top10-scroll-btn.right, button[onclick*=" 1"], button[onclick*=",1"] { right: -3rem; } } .rail-nav-btn.is-hidden, .top10-scroll-btn.is-hidden, button[onclick*="scrollRow"].is-hidden, .rail-nav-btn[disabled], .top10-scroll-btn[disabled], button[onclick*="scrollRow"][disabled] { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; transform: scale(0.92); } /* Motion parity fix: same phantom-hover guard as Top10, generalized to every generic rail. When an arrow-button scroll (or any scroll) is in flight, a card can end up sitting under a stationary cursor once movement stops — the browser fires a "phantom" :hover on it, which (combined with any dim-siblings-on-hover rule) can make the rail flash oddly right as it settles. Applied by the shared setupRailScrollLock() helper in rows-and-lists.js. */ .row.is-scrolling .card { pointer-events: none; } /* ══════════════════════════════════════════════════════════════════ ★ NETFLIX-SPEC TOP 10 RAIL — SIDE-BY-SIDE OUTLINE NUMBERS & HOVER ══════════════════════════════════════════════════════════════════ */ .top10-item-slot { position: relative; flex: 0 0 calc((100% - 80px) / 6) !important; width: calc((100% - 80px) / 6) !important; max-width: calc((100% - 80px) / 6) !important; aspect-ratio: 1 / 1.02 !important; height: auto !important; display: flex; align-items: flex-end; margin-right: 16px !important; z-index: 1; pointer-events: auto; overflow: visible; transition: z-index 0.25s ease; } .top10-item-slot:hover, .top10-item-slot:has(.card:hover) { z-index: 250 !important; } /* Left Side: Slimmer Netflix Large Outline Number */ .top10-rank-side { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; height: 100%; display: flex; align-items: center; justify-content: flex-start; pointer-events: auto; cursor: pointer; z-index: 1; overflow: visible; } .top10-svg-num { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.95)); transition: filter 0.25s ease; } .top10-svg-text { font-family: 'Barlow Condensed', 'Outfit', 'Arial Black', sans-serif; font-weight: 900; font-size: 165px; letter-spacing: -6px; fill: #0b0d13; stroke: #595959; stroke-width: 4.5px; paint-order: stroke fill; dominant-baseline: alphabetic; transition: stroke 0.25s ease, fill 0.25s ease; } .top10-svg-text.double { font-size: 165px; letter-spacing: -16px; } .top10-item-slot[data-rank="10"] .top10-rank-side { width: 58%; } .top10-item-slot:hover .top10-svg-text { stroke: rgba(245, 158, 11, 0.85); } /* Right Side: Larger Portrait Card Container (matching Survival rail scale) */ .top10-card-side { position: absolute; right: 0; top: 0; bottom: 0; width: 68%; height: 100%; z-index: 10; overflow: visible; } .top10-card-side .card-slot { width: 100% !important; height: 100% !important; aspect-ratio: 2 / 3 !important; position: relative; overflow: visible; } /* ══════════════════════════════════════════════════════════════════ ★ NETFLIX TOP 10 HOVER — BLOOMS INTO A 16:9 WIDESCREEN PREVIEW ══════════════════════════════════════════════════════════════════ */ .top10-card-side .card { position: absolute; top: 0; left: 0; width: 100%; height: auto; border-radius: 6px; background: #181818; border: 1px solid rgba(255, 255, 255, 0.08); transform-origin: center center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.2s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; will-change: transform, box-shadow; } .top10-card-side .card-media { aspect-ratio: 2 / 3; border-radius: 6px 6px 0 0; overflow: hidden; transition: aspect-ratio 0.25s ease; } .top10-card-side .card.card--popout-active, .top10-card-side .card:focus-visible, .top10-card-side .card.spatial-focused { width: 195% !important; left: -50% !important; transform: scale(1.15) !important; transform-origin: center center !important; z-index: 500 !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 28px 65px rgba(0, 0, 0, 0.98) !important; } .top10-card-side .card.card--popout-active .card-media, .top10-card-side .card:focus-visible .card-media, .top10-card-side .card.spatial-focused .card-media { aspect-ratio: 16 / 9 !important; border-radius: 8px 8px 0 0 !important; } .top10-card-side .card.card--popout-active.card--edge-left, .top10-item-slot:first-child .top10-card-side .card.card--popout-active { left: 0 !important; transform-origin: left center !important; } .top10-card-side .card.card--popout-active.card--edge-right, .top10-item-slot:last-child .top10-card-side .card.card--popout-active { left: auto !important; right: 0 !important; transform-origin: right center !important; } .top10-card-side .card.card--popout-active .card-play-overlay { opacity: 0 !important; } @media (max-width: 1023px) { .top10-item-slot { flex: 0 0 calc((100% - 36px) / 3.3) !important; width: calc((100% - 36px) / 3.3) !important; max-width: calc((100% - 36px) / 3.3) !important; margin-right: 12px !important; } } @media (max-width: 767px) { .top10-item-slot { flex: 0 0 calc((100% - 16px) / 2.2) !important; width: calc((100% - 16px) / 2.2) !important; max-width: calc((100% - 16px) / 2.2) !important; margin-right: 8px !important; } .top10-svg-text { stroke-width: 3.5px; } } /* ═══════════════════════════════════════════════════════════ SCROLL REVEAL ANIMATION — Rails fade up on scroll ═══════════════════════════════════════════════════════════ */ .reveal-on-scroll { opacity: 1; transform: none; transition: opacity 0.4s cubic-bezier(0.22,0.61,0.36,1), transform 0.4s cubic-bezier(0.22,0.61,0.36,1); } .reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════════════════ UI/UX POLISH SPRINT ═══════════════════════════════════════════════════════ */ /* Fix: Mobile & Tablet hero layout — ensure generous height and clean clearance below navigation */ @media (max-width: 767px) { #hero-section { height: 82vh !important; min-height: 520px !important; max-height: 640px !important; } #hero-section > div.relative.z-20 { padding-top: 125px !important; /* clears fixed navbar (60px) + mobile category strip (50px) cleanly */ padding-bottom: 24px !important; display: flex !important; align-items: flex-end !important; } #heroTitle { font-size: clamp(1.8rem, 7vw, 2.3rem) !important; line-height: 1.05 !important; margin-bottom: 8px !important; } #heroDesc { font-size: 0.85rem !important; line-height: 1.4 !important; margin-bottom: 12px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } @media (min-width: 768px) and (max-width: 1023px) { #hero-section { height: 75vh !important; min-height: 560px !important; } #hero-section > div.relative.z-20 { padding-top: 90px !important; padding-bottom: 30px !important; display: flex !important; align-items: flex-end !important; } #heroTitle { font-size: 3rem !important; line-height: 1.02 !important; } } /* Fix: Smoother font rendering across all text */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fix: Card border-radius consistency — 10px feels flat; 8px + crisp shadow */ .card { border-radius: 8px !important; } /* Fix: Rail scroll arrows — make them taller to cover full card height */ .row ~ button, button[onclick*="scrollRow"] { border-radius: 0 !important; } /* Fix: Search overlay — make input feel more premium */ #searchOverlay input[type="text"], #searchOverlay input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 12px !important; font-size: 18px !important; padding: 14px 20px !important; color: #fff !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } #searchOverlay input:focus { outline: none !important; border-color: rgba(245,158,11,0.5) !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.1) !important; } /* ══════════════════════════════════════════════════════ SEARCH OVERLAY — UX POLISH (additive, scoped to #searchOverlay) Presentational / progressive-enhancement only — does not touch runSearch(), openModal(), or shared helper functions. ══════════════════════════════════════════════════════ */ /* Overlay: soft scale+fade entrance instead of a flat opacity snap */ #searchOverlay { transition: opacity 0.28s cubic-bezier(.2,.8,.2,1) !important; } #searchOverlay .search-panel { transform: translateY(10px) scale(0.99); opacity: 0; transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.32s ease; } #searchOverlay:not(.opacity-0) .search-panel { transform: translateY(0) scale(1); opacity: 1; } /* Animated search icon: highlights once a query is present */ #searchOverlay .search-icon-wrap { position: relative; flex-shrink: 0; display: flex; } #searchOverlay .search-icon-wrap svg { transition: color 0.2s ease, transform 0.2s ease; } #searchOverlay.has-query .search-icon-wrap svg.search-static-icon { color: var(--brand-amber); transform: scale(1.05); } /* Inline spinner shown next to the icon while the debounced query "thinks" */ #searchOverlay .search-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(245,158,11,0.25); border-top-color: var(--brand-amber); animation: sa-spin 0.7s linear infinite; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; } #searchOverlay.is-loading .search-spinner { opacity: 1; transform: scale(1); } #searchOverlay.is-loading .search-static-icon { opacity: 0; } @keyframes sa-spin { to { transform: rotate(360deg); } } /* Clear (×) button inside the input — only visible once typing */ #searchOverlay .search-clear-btn { opacity: 0; pointer-events: none; transform: scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease; color: #6b7280; flex-shrink: 0; background: none; border: none; cursor: pointer; } #searchOverlay.has-query .search-clear-btn { opacity: 1; pointer-events: auto; transform: scale(1); } #searchOverlay .search-clear-btn:hover { color: #fff; } /* Genre chips: smoother feel + momentum scroll on mobile */ #searchFilters { scrollbar-width: none; -ms-overflow-style: none; } #searchFilters::-webkit-scrollbar { display: none; } .search-chip { transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.12s ease !important; } .search-chip:active { transform: scale(0.95); } /* Status line: quick fade when it updates */ #searchStatus { transition: opacity 0.15s ease; } /* Result grid: cards fade/rise in, staggered */ #searchResults .card { opacity: 0; animation: sa-card-in 0.36s cubic-bezier(.2,.8,.2,1) forwards; } #searchResults .card:focus-visible, #searchResults .card.sa-kbd-focus { outline: 2px solid var(--brand-amber) !important; outline-offset: 3px; border-radius: 8px; } @keyframes sa-card-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } #searchResults .card:nth-child(1) { animation-delay: 0.00s; } #searchResults .card:nth-child(2) { animation-delay: 0.02s; } #searchResults .card:nth-child(3) { animation-delay: 0.04s; } #searchResults .card:nth-child(4) { animation-delay: 0.06s; } #searchResults .card:nth-child(5) { animation-delay: 0.08s; } #searchResults .card:nth-child(6) { animation-delay: 0.10s; } #searchResults .card:nth-child(7) { animation-delay: 0.12s; } #searchResults .card:nth-child(8) { animation-delay: 0.14s; } #searchResults .card:nth-child(9) { animation-delay: 0.16s; } #searchResults .card:nth-child(10) { animation-delay: 0.18s; } #searchResults .card:nth-child(n+11) { animation-delay: 0.20s; } /* Skeleton loading cards shown briefly while the debounced query "thinks" */ .sa-skeleton-card { aspect-ratio: 16/10; border-radius: 8px; position: relative; overflow: hidden; background: linear-gradient(100deg, rgba(255,255,255,0.045) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.045) 70%); background-size: 200% 100%; animation: sa-shimmer 1.3s ease-in-out infinite; } @keyframes sa-shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } } /* Empty / suggestion state */ .sa-empty-state { animation: sa-card-in 0.3s ease forwards; } .sa-suggest-chip { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.12); color: #d1d5db; background: rgba(255,255,255,0.04); cursor: pointer; transition: all 0.18s ease; } .sa-suggest-chip:hover { color: #000; background: var(--brand-amber); border-color: var(--brand-amber); transform: translateY(-1px); } /* No-results state polish */ #searchResults .sa-noresults { animation: sa-card-in 0.3s ease forwards; } /* ── Mobile responsiveness ───────────────────────────────── */ @media (max-width: 767px) { #searchOverlay .search-panel { padding-top: 0 !important; } #searchOverlay input[type="text"] { font-size: 20px !important; padding: 12px 14px !important; } #searchFilters { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px !important; -webkit-overflow-scrolling: touch; } .search-chip { white-space: nowrap; } #searchResults { gap: 10px !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; } #searchOverlay .search-header-row { gap: 10px !important; } .sa-suggest-row { flex-wrap: wrap; } } @media (max-width: 380px) { #searchOverlay input[type="text"] { font-size: 17px !important; } } /* Fix: Modal — slightly wider on large screens */ #modalContent { max-width: min(860px, 95vw) !important; } /* Fix: Category view heading typography */ #category-title { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.01em; } /* Fix: Rail see-all button — add gap so it doesn't hug the title */ .rail-header-wrap { padding-right: 60px !important; } /* Fix: Top10 section gets a subtle top border separator, plus bottom margin so it doesn't crowd the Continue Watching / genre rails below (previously had no gap of its own — #rails-section only puts gaps *between its own* children, not above its first child). */ #top10Section { border-top: 1px solid rgba(255,255,255,0.04); padding-top: 12px; margin-top: 1rem; margin-bottom: 3rem; position: relative; z-index: 45; overflow: visible !important; } #top10Section:hover, #top10Section:has(.top10-item-slot:hover), #top10Section:has(.card:hover), #top10Section:focus-within, #top10Section.rail--active-hover { z-index: 200 !important; } #top10Rail { overflow-y: visible !important; } /* Elevate hovered rail within #rails-section so it never clips into rails below, with healthy rail separation */ #rails-section > div, div[id^="rail-"], div[data-rail-genre], #top10Section { position: relative; z-index: 1; margin-bottom: 24px !important; transition: z-index 0.2s ease; } @media (min-width: 768px) { #rails-section > div, div[id^="rail-"], div[data-rail-genre], #top10Section { margin-bottom: 32px !important; } } @media (min-width: 1024px) { #rails-section > div, div[id^="rail-"], div[data-rail-genre], #top10Section { margin-bottom: 44px !important; } } #rails-section > div:hover, #rails-section > div:has(.card:hover), #rails-section > div:has(.top10-card:hover), #rails-section > div:focus-within, #rails-section > div.rail--active-hover, div[id^="rail-"]:hover, div[id^="rail-"]:has(.card:hover), div[id^="rail-"]:focus-within, div[id^="rail-"].rail--active-hover, div[data-rail-genre]:hover, div[data-rail-genre]:has(.card:hover), div[data-rail-genre]:focus-within, div[data-rail-genre].rail--active-hover, .rail-container-wrap.rail--active-hover, .row.rail--active-hover { z-index: 100 !important; } /* Fix: Footer brand S icon — use logo image if available, fallback to S */ #site-footer .footer-logo-s { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); } /* Fix: Mobile genre strip — hide on tablet+ (already handled by JS but belt+braces) */ @media (min-width: 768px) { #mobileGenreStrip { display: none !important; } } /* Fix: Scroll behaviour — smooth by default across the whole page */ html { scroll-behavior: smooth; } /* Fix: Hero CTA buttons — slightly larger tap target on mobile */ @media (max-width: 640px) { #heroLink { padding: 11px 24px !important; font-size: 13px !important; } #heroInfoBtn { padding: 11px 18px !important; font-size: 13px !important; } .hero-cta-row { gap: 10px !important; } } /* Fix: Category view back button polish */ #back-btn { transition: all 0.2s ease !important; } #back-btn:hover { background: rgba(255,255,255,0.08) !important; padding-left: 10px !important; } /* ══════════════════════════════════════════════════════════════════ MOBILE-FIRST ENHANCEMENT LAYER (additive, non-breaking) Does not alter business logic, JS handlers, IDs, or markup. Purely visual/UX refinements layered on top of existing styles: 1) Global overflow / horizontal-scroll guard 2) Safe-area support (notches, home-indicator, punch-holes) 3) Foldable / narrow-viewport compatibility (CSS env + dvh) 4) Touch target sizing (44x44 min per WCAG/Apple HIG) 5) Responsive spacing scale 6) Fluid typography via clamp() ══════════════════════════════════════════════════════════════════ */ /* ── 1) Horizontal scroll guard ───────────────────────────────── */ html, body { max-width: 100%; overflow-x: hidden; } * { -webkit-tap-highlight-color: transparent; } img, svg, video, iframe { max-width: 100%; } .row, .top10-rail, #searchFilters, #dynamicNavLinks { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .row, .top10-rail { scroll-padding-left: 1rem; scroll-padding-right: 1rem; } /* ── 2 & 3) Safe-area + foldable / dynamic-viewport support ──────── */ :root { --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); --sa-right: env(safe-area-inset-right, 0px); } body { padding-left: var(--sa-left); padding-right: var(--sa-right); } #mainNav { padding-top: max(0.875rem, calc(var(--sa-top) + 0.5rem)) !important; padding-left: max(1rem, calc(var(--sa-left) + 1rem)) !important; padding-right: max(1rem, calc(var(--sa-right) + 1rem)) !important; } #hero, #heroSection, section#hero { padding-top: var(--sa-top); } #mobileMenuDrawer { padding-top: var(--sa-top); padding-bottom: var(--sa-bottom); padding-right: var(--sa-right); width: min(75vw, 300px); } #site-footer { padding-left: max(1rem, var(--sa-left)); padding-right: max(1rem, var(--sa-right)); padding-bottom: max(2rem, calc(var(--sa-bottom) + 1.5rem)); } #infoModal { padding: max(1rem, var(--sa-top)) max(1rem, var(--sa-right)) max(1rem, var(--sa-bottom)) max(1rem, var(--sa-left)) !important; } /* NOTE: .modal-close-btn is now position:fixed + safe-area aware in its base rule above (single source of truth). The old rule here used to re-anchor it to the *card's* corner (top:-0.75rem/right:-0.75rem), which is exactly what caused it to jump when the card's box resized as the YouTube player mounted. Removed — do not reintroduce a second positioning rule for this element. */ /* Foldables / very narrow viewports (Galaxy Fold ~280px, Z Flip cover screens) */ @media (max-width: 320px) { html { font-size: 14px; } #heroTitle { font-size: clamp(1.75rem, 9vw, 2.25rem) !important; } .hero-cta-row { gap: 8px !important; } #heroLink, #heroInfoBtn { padding: 10px 16px !important; font-size: 12.5px !important; } .card-slot { width: 56% !important; } section#rails-section, #rails-section { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } @media (min-width: 280px) and (max-width: 360px) and (orientation: portrait) { .card-slot { width: 50% !important; } } /* Use dynamic viewport units where supported so foldable/keyboard UI never clips content */ @supports (height: 100dvh) { #loadingOverlay { height: 100dvh; } section#hero, .hero-section, #heroSection { min-height: 100dvh; } } /* ── 4) Touch target sizing — min 44x44px hit areas on touch devices ── */ @media (pointer: coarse) { button, a[href], .top10-scroll-btn, .hero-tag-pill, .carousel-thumb, .hero-mini-thumb, .hero-dot-wrap, #hamburgerBtn, #heroSaveBtn, #muteToggleBtn, .search-chip { min-height: 44px; min-width: 44px; } /* .modal-close-btn intentionally excluded here — it already gets a deterministic, symmetric 44x44 box from its base rule above. Applying min-width/min-height on top of that here would grow the box again off whatever corner it's anchored to, reintroducing the exact asymmetric-hitbox bug this whole fix removes. */ #heroSaveBtn, #muteToggleBtn, #hamburgerBtn { display: inline-flex; align-items: center; justify-content: center; } #heroLink, #heroInfoBtn { min-height: 48px; } .hero-tag-pill { padding: 8px 14px !important; } .top10-scroll-btn { width: 44px !important; height: 44px !important; } a, button, [onclick], [role="button"] { touch-action: manipulation; } .card-slot { min-height: 44px; } } /* ── 5) Responsive spacing scale (mobile-first, scales up) ───────── */ @media (max-width: 640px) { #rails-section { padding-left: 1rem !important; padding-right: 1rem !important; gap: 1.25rem !important; } .row { gap: 0.625rem !important; padding-bottom: 1.75rem !important; } #heroDesc { margin-bottom: 1.25rem !important; } #heroTags { margin-bottom: 1rem !important; gap: 5px !important; } .hero-cta-row { margin-bottom: 0.5rem !important; } #top10Section { padding-left: 1rem !important; padding-right: 1rem !important; } #infoModal { padding: 0.75rem !important; } footer#site-footer .max-w-6xl { gap: 1.5rem !important; } } @media (min-width: 641px) and (max-width: 1023px) { #rails-section { padding-left: 2rem !important; padding-right: 2rem !important; } } /* ── 6) Fluid typography — clamp() scaling across all breakpoints ── */ #heroTitle { font-size: clamp(2.1rem, 9.5vw, 4.5rem) !important; } #heroDesc { font-size: clamp(0.8125rem, 2.6vw, 0.95rem) !important; } .top10-title { font-size: clamp(1.05rem, 4vw, 1.5rem) !important; } #category-title { font-size: clamp(1.35rem, 5vw, 2.25rem) !important; } h2.rail-title, .rail-title { font-size: clamp(0.95rem, 3.2vw, 1.25rem) !important; } .hero-tag-pill { font-size: clamp(0.625rem, 2.4vw, 0.6875rem) !important; } #heroLink, #heroInfoBtn { font-size: clamp(0.75rem, 3vw, 0.875rem) !important; } /* Prevent iOS auto-zoom on form focus (16px minimum input font-size) */ input[type="text"], input[type="search"], input, textarea, select { font-size: max(16px, 1rem); } /* Landscape phones — reclaim vertical space, avoid hero overwhelming viewport */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { section#hero, .hero-section, #heroSection { min-height: 120vh; } #heroDots { margin-top: 14px !important; } #heroTags { margin-bottom: 10px !important; } } /* ══════════════════════════════════════════════════════════════════ FRONTEND PERFORMANCE LAYER (additive, non-breaking) No functional/behavioral change — purely render-cost reductions: · CSS containment to shrink reflow/repaint scope · GPU-promoted layers only on actively-animating elements · content-visibility to skip offscreen layout/paint work ══════════════════════════════════════════════════════════════════ */ /* ── Containment: allow unconstrained overflow for hover pop-out cards ── */ .row, .top10-rail, .card, .top10-card, #rails-section > div[data-rail-genre] { contain: none !important; } /* ── GPU layer promotion: only for elements with active transform/opacity animation, scoped narrowly so we don't blow the compositor budget with stray layers ── */ .card { will-change: auto; } .card:hover, .card:focus-within { will-change: transform; } .top10-card { will-change: auto; } .top10-card:hover { will-change: transform; } .hero-mini-thumb.active, .hero-mini-thumb:hover { will-change: transform; } .hero-dot.active .hero-dot-fill { will-change: width; } .loader-bar { will-change: width, margin-left; transform: translateZ(0); } .skeleton-shimmer::after, [class*="shimmer"]::after { will-change: background-position; transform: translateZ(0); } #mainNav { will-change: transform, background-color; } .hero-content-wrap.hero-animate #heroLivePill, .hero-content-wrap.hero-animate #heroGenreBadge, .hero-content-wrap.hero-animate #heroLogoImage, .hero-content-wrap.hero-animate #heroTitle, .hero-content-wrap.hero-animate #heroMeta, .hero-content-wrap.hero-animate #heroDesc, .hero-content-wrap.hero-animate #heroTags, .hero-content-wrap.hero-animate .hero-cta-row, .hero-content-wrap.hero-animate #heroDots { will-change: transform, opacity; } /* ── content-visibility: skip layout/paint for offscreen, rarely-viewed regions ── */ #site-footer { content-visibility: auto; contain-intrinsic-size: 1px 480px; } .rail-skeleton-row { content-visibility: auto; contain-intrinsic-size: 1px 240px; } /* ── Reduce paint cost of decorative blur/glow layers (GPU-friendly compositing) ── */ .rail-atmosphere, #heroAmbientGlow, #heroBottomGlow, .top10-atmosphere { transform: translateZ(0); backface-visibility: hidden; } /* ══════════════════════════════════════════════════════════════════ PHASE 4 — UX DIRECTOR PASS Premium micro-interaction layer. Purely additive: no layout, structure, or spacing changes. Introduces a single premium easing vocabulary, then applies it to hover, focus, scroll, button and transition moments across the existing UI so the whole app reads as one considered motion system. ══════════════════════════════════════════════════════════════════ */ :root { /* Signature OTT easing curves — reused everywhere below */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* confident, decelerating */ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* soft settle */ --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot, alive */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --focus-ring: 0 0 0 2px rgba(10,12,16,0.9), 0 0 0 4px rgba(245,158,11,0.65), 0 0 18px rgba(245,158,11,0.35); } /* ── Universal focus-visible treatment ─────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, .card:focus-visible, .top10-card:focus-visible { outline: none !important; box-shadow: var(--focus-ring) !important; border-radius: 6px; transition: box-shadow 0.18s var(--ease-smooth); } .card:focus-visible, .top10-card:focus-visible, .card-skeleton:focus-visible { border-radius: 10px; } /* ── Scroll-triggered reveals ─────────────────────────────────── Rows, rail headers and footer drift up + fade in the first time they cross into view. Class toggled by IntersectionObserver in the script block below; degrades gracefully if JS is disabled. */ [data-rail-genre], #category-view, #site-footer { opacity: 1; transform: none; position: relative; z-index: 1; } [data-rail-genre]:has(.card:hover), [data-rail-genre]:has(.card:focus-within) { z-index: 50; } [data-rail-genre].sa-revealed, #category-view.sa-revealed, #site-footer.sa-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); } .no-js [data-rail-genre], .no-js #category-view, .no-js #site-footer { opacity: 1; transform: none; } /* Cards within a just-revealed row cascade in with a light stagger */ [data-rail-genre].sa-revealed .card, #category-view.sa-revealed .card { animation: saCardIn 0.6s var(--ease-out-expo); } [data-rail-genre].sa-revealed .row .card:nth-child(1) { animation-delay: 0.02s; } [data-rail-genre].sa-revealed .row .card:nth-child(2) { animation-delay: 0.06s; } [data-rail-genre].sa-revealed .row .card:nth-child(3) { animation-delay: 0.10s; } [data-rail-genre].sa-revealed .row .card:nth-child(4) { animation-delay: 0.14s; } [data-rail-genre].sa-revealed .row .card:nth-child(5) { animation-delay: 0.18s; } [data-rail-genre].sa-revealed .row .card:nth-child(n+6) { animation-delay: 0.20s; } @keyframes saCardIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Card lift & popout — explicitly cancel entrance animation on hover and popout active ── */ .card:hover, .card:focus-within, .card.card--popout-active, .card-slot:hover .card, .card-slot.slot--popout-active .card { animation: none !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .card:focus-within { z-index: 30; border-color: rgba(255, 255, 255, 0.16); } .card:focus-within .card-thumb { transform: scale(1.06); filter: brightness(0.75) saturate(1.1); } .card:focus-within .card-play-overlay { opacity: 1; } .card:focus-within .card-play-btn { transform: scale(1); background: rgba(255,255,255,0.25); } .card:focus-within .card-genre-badge { opacity: 1; } .card:focus-within .card-meta-panel { max-height: 220px; opacity: 1; padding: 8px 12px 10px; pointer-events: auto; } .top10-card { transition: transform 0.42s var(--ease-out-expo); } /* Removed translateY(-5px) — .top10-poster already scales 1.1 with transform-origin: center bottom (see base rule), so the card wrapper itself doesn't need its own shift on top of that; the extra translateY was pushing hovered edge cards further out of the rail's visible/clipped area. */ .top10-card:first-child .top10-poster { transform-origin: left bottom; } .top10-card:last-child .top10-poster { transform-origin: right bottom; } /* Thumbnail gets a touch more life on hover — slower, silkier zoom */ .card-thumb, .top10-poster-img { transition: transform 0.6s var(--ease-premium), filter 0.35s ease !important; } /* Play button: springy pop instead of a flat scale */ .card-play-btn, .top10-play-btn { transition: transform 0.35s var(--ease-snap), background 0.25s ease !important; } /* ── Ambient cursor-follow glow on the hero ─────────────────────── */ #hero-section { position: relative; } #sa-hero-spotlight { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(480px circle at var(--sa-x, 50%) var(--sa-y, 50%), rgba(245,158,11,0.06), transparent 60%); } #hero-section:hover #sa-hero-spotlight { opacity: 1; } @media (hover: none) { #sa-hero-spotlight { display: none; } } /* ── Ambient background drift ─────────────────────────────────── A near-imperceptible animated gradient wash behind everything. */ body::before { content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(245,158,11,0.045), transparent 60%), radial-gradient(ellipse 50% 35% at 85% 100%, rgba(139,92,246,0.035), transparent 60%); animation: saAmbientDrift 26s ease-in-out infinite alternate; will-change: transform; } @keyframes saAmbientDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(1.5%, -1.5%) scale(1.04); } } /* ── Button interactions — magnetic hover + tactile press ──────── */ #heroLink, #heroInfoBtn, #heroSaveBtn, .card-icon-btn, .search-chip, #mainNav .nav-icon-btn, .modal-action-btn { transition: transform 0.3s var(--ease-snap), background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease !important; } #heroLink:active, #heroInfoBtn:active, #heroSaveBtn:active, .card-icon-btn:active, .search-chip:active { transform: scale(0.94); } /* Ripple pulse — driven by --sa-rx / --sa-ry set on pointerdown below */ .sa-ripple { position: relative; overflow: hidden; } .sa-ripple::before { content: ''; position: absolute; z-index: 0; pointer-events: none; left: var(--sa-rx, 50%); top: var(--sa-ry, 50%); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%); transform: translate(-50%, -50%) scale(0); opacity: 0; } .sa-ripple.sa-rippling::before { animation: saRipple 0.6s var(--ease-out-expo); } @keyframes saRipple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.65; } 100% { transform: translate(-50%, -50%) scale(18); opacity: 0; } } /* ── Cinematic modal overlay ──────────────────────────────────── */ .modal-backdrop { transition: opacity 0.5s var(--ease-smooth), backdrop-filter 0.5s var(--ease-smooth) !important; } #infoModal:not(.hidden) .modal-backdrop { backdrop-filter: blur(6px); } #infoModal:not(.hidden) #modalContent { transition: transform 0.45s var(--ease-snap), opacity 0.4s var(--ease-smooth) !important; } /* Search overlay — soft cinematic fade/scale rather than an instant toggle */ #searchOverlay { transition: opacity 0.4s var(--ease-smooth) !important; } #searchOverlay .search-panel { transition: transform 0.45s var(--ease-out-expo), opacity 0.4s var(--ease-smooth); transform: translateY(10px); opacity: 0; } #searchOverlay:not(.hidden) .search-panel { transform: translateY(0); opacity: 1; } /* ── Nav polish — icon buttons feel tactile, not just clickable ── */ #mainNav a, #mainNav button { transition: transform 0.25s var(--ease-snap), color 0.2s ease, opacity 0.2s ease; } #mainNav a:hover, #mainNav button:hover { transform: translateY(-1px); } #mainNav a:active, #mainNav button:active { transform: translateY(0) scale(0.95); } /* ── Rail title — quiet hover cue inviting exploration ─────────── */ .rail-title-group { transition: transform 0.3s var(--ease-smooth); } .rail-title-group:hover { transform: translateX(2px); } /* ── Hero mini-thumbs — silkier scale curve to match the rest ──── */ .hero-mini-thumb { transition: opacity 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth), transform 0.35s var(--ease-snap) !important; } /* ── Smooth page-level transitions between Home / Category / Search ── */ body.sa-view-transition #rails-section, body.sa-view-transition #category-view, body.sa-view-transition #hero-section { transition: opacity 0.28s var(--ease-smooth); opacity: 0; } /* ── Respect reduced-motion preference for all Phase 4 additions ── */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } #sa-hero-spotlight { display: none; } [data-rail-genre], #category-view, #site-footer { opacity: 1; transform: none; } [data-rail-genre].sa-revealed .card, #category-view.sa-revealed .card { animation: none; } .card:hover, .card:focus-within, .top10-card:hover { transform: none; } /* FIX: previously only the scale/lift was disabled here — the .card-meta-panel height-expand (and play-overlay/genre-badge fades) were untouched, so reduced-motion users got a half-fired hover: panel grows downward with nothing counterbalancing it, which reproduces the exact "popping down / bottom cut off" bug. Netflix/Hotstar avoid this by treating the whole hover effect as one atomic unit under reduced-motion — so we do too: keep cards fully static at rest, no partial expansion. */ .card:hover .card-meta-panel, .card:focus-within .card-meta-panel { max-height: 0; opacity: 0; padding: 0 12px; pointer-events: none; } .card:hover .card-play-overlay, .card:focus-within .card-play-overlay { opacity: 0; } .card:hover .card-genre-badge, .card:focus-within .card-genre-badge { opacity: 0.75; } .card:hover .card-thumb, .card:focus-within .card-thumb { transform: none; filter: none; } .sa-ripple::before { display: none; } } /* ── Skip-to-content link — hidden until keyboard focus reaches it ── */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; background: #fff; color: #000; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 8px; transition: top 0.25s var(--ease-out-expo, ease); } .skip-link:focus, .skip-link:focus-visible { top: 12px; outline: none; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } /* ══════════════════════════════════════════════════════════════════ SEE-ALL CLICK FIX + RAIL WRAPPER SPEC ══════════════════════════════════════════════════════════════════ */ /* 1. Ensure page scroll stays unlocked */ html, body { overflow-y: auto !important; height: auto !important; } .rail-container-wrap, .card-slot, .card { pointer-events: auto !important; } /* ─── Profile Lock & Guest Mode Rules (Extracted from index_claudev2.html) ─── */ body.sa-profile-locked { overflow: hidden; } body.sa-guest-mode #rail-continue-watching, body.sa-guest-mode #rail-mylist { display: none !important; } /* ═══════════════════════════════════════════════════════ CATEGORY GRID & HOVER PARITY (Netflix / Hotstar Grade) ═══════════════════════════════════════════════════════ */ #category-view { overflow: visible !important; } #category-grid { position: relative; z-index: 10; } /* Category Grid Card Slots: ensure static height space so expanding hover panels never overlap */ #category-grid .card-slot { position: relative; width: 100% !important; aspect-ratio: 16 / 9; margin-bottom: 28px; } #category-grid .card-slot.card--portrait { aspect-ratio: 2 / 3; margin-bottom: 32px; } /* Ensure smooth, identical hover transition across home & category pages */ .card { border-radius: 6px !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; transform-origin: center center !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.2s ease !important; will-change: transform, box-shadow; } .card.card--popout-active:not(.top10-card-side .card), .card:focus-visible:not(.top10-card-side .card), .card.spatial-focused:not(.top10-card-side .card) { transform: scale(1.35) !important; transform-origin: center center !important; z-index: 500 !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 24px 60px rgba(0, 0, 0, 0.95) !important; } .card.card--popout-active.card--edge-left, .card-slot:first-child .card.card--popout-active { transform-origin: left center !important; } .card.card--popout-active.card--edge-right, .card-slot:last-child .card.card--popout-active { transform-origin: right center !important; } .card.card--popout-active.card--edge-center { transform-origin: center center !important; } .card.card--popout-active .card-play-overlay { opacity: 0 !important; } .card.card--popout-active .card-meta-panel, .card:focus-visible .card-meta-panel, .card.spatial-focused .card-meta-panel { max-height: 320px !important; opacity: 1 !important; padding: 12px 16px 16px !important; background: #181818 !important; overflow: visible !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; } .card .hs-desc-snippet { display: none !important; } .hs-action-bar { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 6px !important; margin-bottom: 8px !important; } .hs-watch-btn { flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #ffffff !important; color: #000000 !important; font-weight: 800 !important; font-size: 12px !important; padding: 7px 12px !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; transition: background 0.15s ease, transform 0.15s ease !important; white-space: nowrap !important; } .hs-watch-btn:hover { background: #e5e7eb !important; transform: scale(1.02) !important; } .hs-add-btn { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; border-radius: 6px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; cursor: pointer !important; transition: background 0.15s ease !important; } .hs-add-btn:hover { background: rgba(255, 255, 255, 0.25) !important; } .hs-synopsis { font-size: 11px !important; color: #9ca3af !important; line-height: 1.4 !important; margin-top: 6px !important; } #category-grid { gap: 16px 14px !important; } #category-grid .card-slot { margin-bottom: 20px !important; } /* ═══════════════════════════════════════════════════════ DISNEY+ HOTSTAR DENSE GRID (6-7 CARDS PER ROW ON DESKTOP) ═══════════════════════════════════════════════════════ */ #category-view { overflow: visible !important; padding-left: 2rem !important; padding-right: 2rem !important; } #category-view.has-genre-hero { padding-top: 1.5rem !important; } #category-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; position: relative !important; z-index: 10 !important; } @media (min-width: 500px) { #category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 768px) { #category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px 14px !important; } } @media (min-width: 1024px) { #category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 20px 16px !important; } } @media (min-width: 1280px) { #category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 22px 18px !important; } } @media (min-width: 1536px) { #category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 24px 20px !important; } } #category-grid .card-slot { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; margin-bottom: 24px !important; } /* ═══════════════════════════════════════════════════════ PORTRAIT SLOTS & TOP 10 HOVER ELEVATION ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ NETFLIX UNIVERSAL HOVER ELEVATION ACROSS ALL RAILS ═══════════════════════════════════════════════════════ */ .card-slot.slot--popout-active, .card-slot:has(.card--popout-active), .top10-item-slot.slot--popout-active, .top10-item-slot:has(.card--popout-active) { z-index: 450 !important; } /* Any portrait slot in generic rails (e.g. survival, category grid) blooms into 16:9 widescreen */ .card-slot.card--portrait:not(.top10-card-side *) .card.card--popout-active, .card-slot.card--portrait:not(.top10-card-side *) .card:focus-visible, .card-slot.card--portrait:not(.top10-card-side *) .card.spatial-focused { width: 185% !important; left: -42.5% !important; transform: scale(1.15) !important; transform-origin: center center !important; z-index: 500 !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 28px 65px rgba(0, 0, 0, 0.98) !important; } .card-slot.card--portrait:not(.top10-card-side *) .card.card--popout-active .card-media, .card-slot.card--portrait:not(.top10-card-side *) .card:focus-visible .card-media, .card-slot.card--portrait:not(.top10-card-side *) .card.spatial-focused .card-media { aspect-ratio: 16 / 9 !important; border-radius: 8px 8px 0 0 !important; } .card-slot.card--portrait:not(.top10-card-side *) .card.card--popout-active.card--edge-left, .card-slot.card--portrait:not(.top10-card-side *):first-child .card.card--popout-active { left: 0 !important; transform-origin: left center !important; } .card-slot.card--portrait:not(.top10-card-side *) .card.card--popout-active.card--edge-right, .card-slot.card--portrait:not(.top10-card-side *):last-child .card.card--popout-active { left: auto !important; right: 0 !important; transform-origin: right center !important; } /* Any standard landscape slot in generic rails pops out cleanly matching Top 10 */ .card-slot:not(.card--portrait):not(.top10-card-side *) .card.card--popout-active, .card-slot:not(.card--portrait):not(.top10-card-side *) .card:focus-visible, .card-slot:not(.card--portrait):not(.top10-card-side *) .card.spatial-focused { width: 100% !important; left: 0 !important; transform: scale(1.35) !important; transform-origin: center center !important; z-index: 500 !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 28px 65px rgba(0, 0, 0, 0.98) !important; } .card-slot:not(.card--portrait):not(.top10-card-side *) .card.card--popout-active .card-media, .card-slot:not(.card--portrait):not(.top10-card-side *) .card:focus-visible .card-media, .card-slot:not(.card--portrait):not(.top10-card-side *) .card.spatial-focused .card-media { aspect-ratio: 16 / 9 !important; border-radius: 8px 8px 0 0 !important; } .card-slot:not(.card--portrait):not(.top10-card-side *) .card.card--popout-active.card--edge-left, .card-slot:not(.card--portrait):not(.top10-card-side *):first-child .card.card--popout-active { transform-origin: left center !important; } .card-slot:not(.card--portrait):not(.top10-card-side *) .card.card--popout-active.card--edge-right, .card-slot:not(.card--portrait):not(.top10-card-side *):last-child .card.card--popout-active { transform-origin: right center !important; } .card-slot:not(.card--portrait):not(.top10-card-side *) .card.card--popout-active.card--edge-center { transform-origin: center center !important; } /* ═══════════════════════════════════════════════════════ RAIL OVERFLOW PROTECTION (Universal Zero Cutting Off) ═══════════════════════════════════════════════════════ */ .row { position: relative; z-index: 1; overflow-y: visible !important; padding-top: 40px !important; margin-top: -20px !important; padding-bottom: 180px !important; margin-bottom: -150px !important; } #top10Rail { overflow-y: visible !important; padding-top: 40px !important; margin-top: -20px !important; padding-bottom: 180px !important; margin-bottom: -150px !important; } .rail-container-wrap:hover, .rail-container-wrap:has(.card:hover), .rail-container-wrap:has(.card--popout-active), .rail-container-wrap:has(.slot--popout-active), .rail-container-wrap.rail--active-hover, .row:has(.card--popout-active), .row:has(.slot--popout-active), .row.rail--active-hover { z-index: 150 !important; } #top10Section:hover, #top10Section:has(.top10-item-slot:hover), #top10Section:has(.card--popout-active), #top10Section.rail--active-hover { z-index: 200 !important; } /* ═══════════════════════════════════════════════════════ CATEGORY GRID CARD HOVER FIX (No Media Squeezing) ═══════════════════════════════════════════════════════ */ #category-grid .card-slot { position: relative !important; aspect-ratio: 16 / 9 !important; overflow: visible !important; margin-bottom: 32px !important; /* Extra bottom breathing room for expanded panel */ } #category-grid .card { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; /* Auto height hugs media + expanding panel */ display: flex !important; flex-direction: column !important; z-index: 10; } #category-grid .card-media { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; flex-shrink: 0 !important; /* CRITICAL: Never shrink image when meta panel expands */ overflow: hidden !important; } #category-grid .card.card--popout-active, #category-grid .card:focus-visible, #searchResults .card.card--popout-active, #searchResults .card:focus-visible { transform: scale(1.32) !important; transform-origin: center center !important; z-index: 500 !important; background: #181818 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 8px !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 28px 65px rgba(0, 0, 0, 0.98) !important; } #category-grid .card-slot.slot--popout-active, #category-grid .card-slot:has(.card--popout-active), #searchResults .card-slot.slot--popout-active, #searchResults .card-slot:has(.card--popout-active) { z-index: 450 !important; } #category-grid .card.card--popout-active .card-meta-panel, #category-grid .card:focus-visible .card-meta-panel, #searchResults .card.card--popout-active .card-meta-panel, #searchResults .card:focus-visible .card-meta-panel { max-height: 320px !important; opacity: 1 !important; padding: 12px 16px 16px !important; background: #181818 !important; overflow: visible !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; display: flex !important; flex-direction: column !important; } /* ══════════════════════════════════════════════════════════ NETFLIX / HOTSTAR SPEC BADGE SYSTEM (StoryAxis Theme) ══════════════════════════════════════════════════════════ */ .hs-top10-badge { position: absolute; top: 0; right: 12px; z-index: 10; width: 34px; height: 44px; background: linear-gradient(135deg, #e50914 0%, #b80710 100%); border-radius: 0 0 6px 6px; box-shadow: 0 4px 14px rgba(229, 9, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: #ffffff; font-family: var(--font-sans, inherit); pointer-events: none; transition: transform 0.25s ease; } .hs-top10-badge .hs-badge-top { font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.95; } .hs-top10-badge .hs-badge-num { font-size: 16px; font-weight: 900; letter-spacing: -0.04em; margin-top: 1px; } .hs-badge-pill { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10; background: #e50914; color: #ffffff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 3px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.8); pointer-events: none; } .hs-badge-pill.hs-pill-latest { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .hs-corner-tag { position: absolute; top: 0; right: 10px; z-index: 10; padding: 4px 9px; border-radius: 0 0 6px 6px; font-size: 9px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.5); pointer-events: none; } .hs-corner-tag.tag-latest { background: linear-gradient(135deg, #e50914 0%, #b80710 100%); } .hs-corner-tag.tag-trending { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #000; } /* Latest Rail Vertical Ribbon Badge */ .hs-top10-badge.hs-badge-latest { background: linear-gradient(135deg, #e50914 0%, #b80710 100%); box-shadow: 0 4px 14px rgba(229, 9, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); width: 38px; height: 44px; } /* Trending Rail Vertical Ribbon Badge */ .hs-top10-badge.hs-badge-trending { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #000; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); width: 46px; height: 44px; } .hs-top10-badge.hs-badge-trending .hs-badge-top { color: #000; } .hs-top10-badge.hs-badge-trending .hs-badge-num { color: #000; } .hs-badge-pill.hs-pill-trending { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; font-weight: 800; } /* ══════════════════════════════════════════════════════════ NETFLIX HOVER POPOVER SPEC (4-Button Cluster, Dwell Popout) ══════════════════════════════════════════════════════════ */ .nf-meta-panel { display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; } .nf-action-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; margin-bottom: 8px; } .nf-action-group-left { display: flex; align-items: center; gap: 8px; } .nf-btn-circle { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; border: none; outline: none; transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), background 0.18s ease, border-color 0.18s ease; flex-shrink: 0; } .nf-btn-circle:hover { transform: scale(1.12); } .nf-btn-play { background: #ffffff; color: #141414; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .nf-btn-play:hover { background: #e6e6e6; } .nf-btn-play svg { width: 16px; height: 16px; fill: #141414; margin-left: 2px; } .nf-btn-glass { background: rgba(42, 42, 42, 0.6); border: 1.5px solid rgba(255, 255, 255, 0.55); color: #ffffff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .nf-btn-glass:hover { border-color: #ffffff; background: rgba(65, 65, 65, 0.85); } .nf-btn-glass.saved { border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.18); } .nf-btn-glass.liked { border-color: #38bdf8; color: #38bdf8; background: rgba(56, 189, 248, 0.18); } .nf-btn-glass svg { width: 17px; height: 17px; } .nf-btn-more { margin-left: auto; } .nf-card-title, .card-meta-title { display: none !important; } .nf-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; font-weight: 500; color: #bcbcbc; margin-bottom: 6px; line-height: 1.2; } .nf-match-score { color: #46d369; font-weight: 700; letter-spacing: -0.2px; } .nf-badge-outline { border: 1px solid rgba(255, 255, 255, 0.4); color: #e5e5e5; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; line-height: 1.1; text-transform: uppercase; } .nf-badge-hd { font-size: 9px; border-color: rgba(255, 255, 255, 0.35); color: #a3a3a3; letter-spacing: 0.5px; font-family: monospace, sans-serif; } .nf-meta-duration { color: #a3a3a3; font-size: 12px; } .nf-genre-line { display: flex; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: #e5e5e5; font-weight: 500; line-height: 1.3; } .nf-bullet { color: #646464; margin: 0 5px; } /* ══════════════════════════════════════════════════════════ HOTSTAR HOVER POPOVER SPEC (Responsive & Overflow Guarded) ══════════════════════════════════════════════════════════ */ .hs-action-bar-v2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 6px; width: 100%; } .hs-watch-now-btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: #e2e8f0; color: #0f172a; font-size: clamp(11.5px, 0.82vw, 13px); font-weight: 700; padding: 7px 10px; border-radius: 6px; border: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.2s ease, transform 0.15s ease; } .hs-watch-now-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-watch-now-btn:hover { background: #ffffff; transform: scale(1.02); } .hs-watch-now-btn svg { flex-shrink: 0; width: 13px; height: 13px; fill: #0f172a; } .hs-plus-btn, .hs-info-circle-btn { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; color: #ffffff; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .hs-plus-btn svg, .hs-info-circle-btn svg { width: 15px; height: 15px; } .hs-plus-btn:hover, .hs-info-circle-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.06); } @media (min-width: 1440px) { .hs-action-bar-v2 { gap: 10px; margin-top: 10px; } .hs-watch-now-btn { font-size: 13px; padding: 8px 14px; border-radius: 8px; } .hs-plus-btn, .hs-info-circle-btn { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border-radius: 8px; } } /* ── Mobile & Touch Device Optimization: Native App Feel ── */ .card-mobile-title-overlay { display: none; } @media (hover: none), (max-width: 767px) { .card-mobile-title-overlay { display: block; position: absolute; inset: auto 0 0 0; padding: 24px 8px 6px; background: linear-gradient(180deg, transparent 0%, rgba(10,12,16,0.7) 45%, rgba(10,12,16,0.96) 100%); z-index: 5; pointer-events: none; } .card-mobile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; font-weight: 700; color: #f8fafc; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,0.9); } .card:hover { transform: none !important; box-shadow: none !important; border-color: rgba(255,255,255,0.08) !important; } .card:active { transform: scale(0.96) !important; transition: transform 0.1s ease !important; } .card-meta-panel { display: none !important; } .card-audio-toggle { display: none !important; } } .card-audio-toggle { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 12, 16, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9; opacity: 0; transition: opacity 0.25s ease, transform 0.15s ease, background 0.2s ease; } .card:hover .card-audio-toggle, .top10-card:hover .card-audio-toggle { opacity: 1; pointer-events: auto; } .top10-poster .card-audio-toggle { position: absolute; top: 8px; right: 8px; bottom: auto; z-index: 10; } .card-audio-toggle:hover { background: rgba(245, 158, 11, 0.85); transform: scale(1.1); } .hs-meta-row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #94a3b8; margin-top: 4px; } .hs-meta-row .hs-dot { color: #475569; } .hs-meta-row .hs-age-pill { background: rgba(255,255,255,0.1); padding: 1px 5px; border-radius: 3px; font-size: 10px; } .hs-desc-snippet { font-size: 11px; line-height: 1.45; color: #cbd5e1; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Red Trending Ribbon Badge Spec */ .hs-top10-badge.hs-badge-trending-red { background: linear-gradient(135deg, #e50914 0%, #b80710 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(229, 9, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); width: 48px; height: 44px; } .hs-top10-badge.hs-badge-trending-red .hs-badge-top { color: #ffffff; font-size: 7.5px; letter-spacing: 0.04em; } .hs-top10-badge.hs-badge-trending-red .hs-badge-num { color: #ffffff; font-size: 10px; font-weight: 900; } /* ── Navbar Social Buttons & Glow Effects ────────────────────────────── */ .social-btn-yt { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); color: #9ca3af; display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; } .social-btn-yt:hover { color: #ff0000 !important; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.85)); transform: scale(1.2); } .social-btn-ig { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); color: #9ca3af; display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; } .social-btn-ig:hover { color: #e4405f !important; filter: drop-shadow(0 0 10px rgba(228, 64, 95, 0.85)); transform: scale(1.2); } .social-btn-fb { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); color: #9ca3af; display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; } .social-btn-fb:hover { color: #1877f2 !important; filter: drop-shadow(0 0 10px rgba(24, 119, 242, 0.85)); transform: scale(1.2); } .social-btn-search { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); color: #9ca3af; display: flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; } .social-btn-search:hover { color: #ffffff !important; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); transform: scale(1.15); } .social-btn-profile { transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; border: none; background: none; } .social-btn-profile:hover #navProfileAvatar { border-color: #ffffff !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); transform: scale(1.1); } /* ══════════════════════════════════════════════════════════ OTT PICTURE-IN-PICTURE (PIP) / MINI-PLAYER MODE ══════════════════════════════════════════════════════════ */ #pipFloatingHeader { display: none; } #infoModal.pip-mode { position: fixed !important; top: auto !important; bottom: 24px !important; right: 24px !important; left: auto !important; width: 380px !important; max-width: calc(100vw - 32px) !important; height: auto !important; padding: 0 !important; background: transparent !important; z-index: 99999 !important; display: block !important; overflow: visible !important; pointer-events: none !important; } #infoModal.pip-mode .modal-backdrop { display: none !important; } #infoModal.pip-mode .modal-close-btn { display: none !important; } #infoModal.pip-mode #modalContent { max-width: 100% !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; box-shadow: 0 24px 60px rgba(0,0,0,0.95), 0 0 0 1.5px rgba(245,158,11,0.4), 0 0 30px rgba(0,0,0,0.8) !important; border-radius: 14px !important; animation: pipSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } #infoModal.pip-mode #modalInfoPanel, #infoModal.pip-mode .modal-stagger-item:last-child { display: none !important; } #infoModal.pip-mode #pipFloatingHeader { display: block !important; } @keyframes pipSlideIn { from { transform: translateY(30px) scale(0.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (max-width: 640px) { #infoModal.pip-mode { bottom: 16px !important; right: 16px !important; width: 300px !important; } } /* ═══════════════════════════════════════════════════════ PHASE 2: 10-FOOT SPATIAL TV FOCUS & SKELETON SHIMMERS ═══════════════════════════════════════════════════════ */ /* 10-Foot Spatial Focus Highlight Ring */ .spatial-focused { outline: none !important; box-shadow: 0 0 0 3px #f59e0b, 0 0 25px rgba(245, 158, 11, 0.75), 0 10px 30px rgba(0,0,0,0.9) !important; transform: scale(1.05) !important; border-color: #f59e0b !important; z-index: 100 !important; transition: transform 0.22s var(--ease-premium), box-shadow 0.22s var(--ease-premium) !important; } /* Top 10 Specific Spatial Focus */ .top10-card.spatial-focused { transform: scale(1.12) !important; z-index: 110 !important; } .top10-card.spatial-focused .top10-poster { border-color: #f59e0b !important; } /* Zero-CLS Hero & Card Skeleton Shimmer Layers */ .hero-skeleton { width: 100%; min-height: 70vh; background: radial-gradient(circle at center 30%, #171b26 0%, #0a0c10 80%); position: relative; overflow: hidden; } .hero-skeleton::after, .top10-card-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.05) 55%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.8s infinite; } .top10-card-skeleton { position: relative; flex-shrink: 0; width: clamp(140px, 14vw, 200px); aspect-ratio: 2 / 3; border-radius: 8px; background: #141722; margin-left: 20px !important; margin-right: 14px !important; overflow: hidden; } /* Rich Cinematic Modal Extra Metadata */ .modal-ott-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #e5e7eb; } .modal-ott-pill.match-score { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; } .modal-ott-pill.quality-badge { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.35); color: #93c5fd; } .modal-credits-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; color: #9ca3af; line-height: 1.6; } .modal-credits-row strong { color: #e5e7eb; font-weight: 600; } /* ═══════════════════════════════════════════════════════ NETFLIX / PRIME LIVE CARD HOVER VIDEO PREVIEWS ═══════════════════════════════════════════════════════ */ .card-video-teaser-wrap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden; background: #0a0c10; opacity: 0; transform: translateZ(0); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .card-video-teaser-wrap.is-loaded { opacity: 1 !important; } .card-video-teaser-iframe { position: absolute; top: 50%; left: 50%; width: 136%; height: 136%; transform: translate(-50%, -50%) scale(1.1); transform-origin: center center; border: none; pointer-events: none; } /* ═══════════════════════════════════════════════════════ PHASE 4: DISCOVERY & PERSONALIZATION STYLING ═══════════════════════════════════════════════════════ */ /* Remaining runtime resume badge on card */ .card-resume-badge { position: absolute; bottom: 8px; left: 8px; z-index: 4; background: rgba(10, 12, 16, 0.85); border: 1px solid rgba(245, 158, 11, 0.4); color: #f59e0b; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; backdrop-filter: blur(6px); letter-spacing: 0.02em; pointer-events: none; display: flex; align-items: center; gap: 4px; } .card-resume-badge svg { width: 10px; height: 10px; fill: currentColor; } /* "Because You Watched" Algorithmic Rail Header */ .recommendation-rail-title { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; } .recommendation-sparkle { background: linear-gradient(135deg, #f59e0b, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.15rem; } .recommendation-profile-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); padding: 2px 7px; border-radius: 9999px; letter-spacing: 0.05em; margin-left: 6px; } /* Smart Search Auto-Suggest Floating Dropdown */ .sa-search-dropdown { margin-top: 12px; margin-bottom: 20px; background: rgba(18, 22, 32, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); } .sa-search-dropdown-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #9ca3af; letter-spacing: 0.06em; margin-bottom: 8px; } .sa-suggest-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: all 0.18s ease; } .sa-suggest-item:hover, .sa-suggest-item.is-active { background: rgba(245, 158, 11, 0.15); border-left: 3px solid #f59e0b; } .sa-suggest-item img { width: 48px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .sa-suggest-item-text { flex: 1; min-width: 0; } .sa-suggest-item-title { font-size: 13px; font-weight: 600; color: #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa-suggest-item-genre { font-size: 11px; color: #9ca3af; } /* Trending & Filter Pills in Empty Search */ .sa-trending-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: #d1d5db; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .sa-trending-tag:hover { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════ CINEMATIC AMBIENT BACKLIGHT GLOW ENGINE (Apple TV Style) ═══════════════════════════════════════════════════════ */ .modal-ambient-glow { position: absolute; top: -15px; left: 50%; width: 112%; height: 65%; max-height: 520px; transform: translateX(-50%); border-radius: 28px; filter: blur(55px); opacity: 0.85; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at top center, var(--ambient-color-1, rgba(16, 185, 129, 0.9)) 0%, var(--ambient-color-2, rgba(5, 150, 105, 0.5)) 50%, transparent 80%); transition: opacity 0.4s ease, background 0.6s cubic-bezier(0.16, 1, 0.3, 1); animation: ambientPulse 4.5s ease-in-out infinite alternate; } @keyframes ambientPulse { 0% { opacity: 0.65; transform: translateX(-50%) scale(0.98); } 100% { opacity: 0.95; transform: translateX(-50%) scale(1.02); } } #infoModal.ambient-glow-off .modal-ambient-glow { opacity: 0 !important; display: none !important; } #infoModal.pip-mode .modal-ambient-glow { display: none !important; } /* Global OTT Toast Notification */ .sa-global-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 10002; display: flex; align-items: center; gap: 10px; background: rgba(18, 20, 28, 0.95); border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 14px; padding: 12px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.25); backdrop-filter: blur(14px); color: #f9fafb; font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .sa-global-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .sa-global-toast.hide { opacity: 0; transform: translateX(-50%) translateY(15px); } .sa-global-toast .toast-icon { font-size: 16px; } /* ═══════════════════════════════════════════════════════ INTERACTIVE WATCH PARTY & LIVE CHAT STYLES ═══════════════════════════════════════════════════════ */ #watchPartyDrawer { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; z-index: 60; box-shadow: -8px 0 25px rgba(0, 0, 0, 0.6); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .wp-reaction-particle { position: absolute; bottom: 15px; transform: translateX(-50%); pointer-events: none; z-index: 55; display: flex; flex-direction: column; align-items: center; animation: floatEmojiReaction 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .wp-particle-emoji { font-size: 32px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); } .wp-particle-sender { font-size: 10px; font-weight: 700; color: #f3f4f6; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 1px 6px; border-radius: 10px; margin-top: 2px; white-space: nowrap; } @keyframes floatEmojiReaction { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 35% { transform: translate(calc(-50% + 8px), -60px) scale(1.0); } 60% { transform: translate(calc(-50% - 8px), -130px) scale(0.95); } 85% { opacity: 0.9; transform: translate(calc(-50% + 4px), -200px) scale(0.9); } 100% { opacity: 0; transform: translate(-50%, -260px) scale(0.75); } } /* ═══════════════════════════════════════════════════════ LEGAL & CONTACT MODAL (Privacy Policy, Terms, Contact) ═══════════════════════════════════════════════════════ */ .sa-legal-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(10, 12, 16, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 16px; opacity: 0; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .sa-legal-overlay.active { display: flex; opacity: 1; } .sa-legal-dialog { width: min(860px, 95vw); max-height: 88vh; background: #12141a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(245, 158, 11, 0.08); animation: saModalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes saModalScaleIn { from { transform: scale(0.96) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .sa-legal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #161922; gap: 16px; flex-wrap: wrap; } .sa-legal-brand { display: flex; align-items: center; gap: 8px; } .sa-legal-logo { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #ea580c); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #000; font-size: 14px; } .sa-legal-brand-name { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -0.02em; } .sa-legal-tabs { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.35); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); } .sa-legal-tab { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; } .sa-legal-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .sa-legal-tab.active { background: rgba(245, 158, 11, 0.16); color: #f59e0b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .sa-legal-close { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.2s; line-height: 1; } .sa-legal-close:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #ef4444; } .sa-legal-body { padding: 32px; overflow-y: auto; max-height: calc(88vh - 72px); color: #cbd5e1; font-size: 14px; line-height: 1.7; scroll-behavior: smooth; } .sa-doc-wrap { max-width: 760px; margin: 0 auto; } .sa-doc-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sa-doc-badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); margin-bottom: 10px; } .sa-badge-amber { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.3) !important; } .sa-doc-title { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -0.02em; } .sa-doc-lead { font-size: 15px; color: #94a3b8; line-height: 1.6; margin: 0; } .sa-doc-section { margin-bottom: 28px; } .sa-doc-section h2 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -0.01em; } .sa-doc-section p { margin: 0 0 12px; } .sa-doc-section ul { margin: 0 0 12px 20px; padding: 0; } .sa-doc-section li { margin-bottom: 6px; } .sa-legal-link { color: #f59e0b; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .sa-legal-link:hover { color: #fbbf24; } /* Contact Grid */ .sa-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px; } .sa-contact-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; transition: all 0.2s; } .sa-contact-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(245, 158, 11, 0.4); transform: translateY(-2px); } .sa-contact-icon { font-size: 26px; margin-bottom: 10px; } .sa-contact-heading { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 6px; } .sa-contact-sub { font-size: 12px; color: #94a3b8; margin: 0 0 14px; line-height: 1.5; flex: 1; } .sa-contact-action { font-size: 13px; font-weight: 700; color: #f59e0b; text-decoration: none; transition: all 0.2s; } .sa-contact-action:hover { color: #fbbf24; text-decoration: underline; } /* Contact Form */ .sa-contact-form-card { background: #181b24; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 26px; } .sa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .sa-form-grid { grid-template-columns: 1fr; } } .sa-field-group { display: flex; flex-direction: column; gap: 6px; } .sa-field-label { font-size: 12px; font-weight: 700; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.05em; } .sa-field-input { background: #0f1117; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 14px; outline: none; transition: all 0.2s; font-family: inherit; } .sa-field-input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); } .sa-field-textarea { resize: vertical; min-height: 90px; } .sa-btn-primary { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #000; font-weight: 800; font-size: 14px; padding: 10px 22px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); } .sa-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .sa-btn-secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #cbd5e1; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .sa-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }