ABSOLUTE contido dentro do .hv-hero (600px altura). * Antes era `position:fixed` cobrindo 100vw×100vh, mas com Chrome 63 stacking * do Tizen isso escapava do .hs-main e o backdrop vazava por cima do preto do * shell (visto ao abrir Buscar → MoviesPage SPA). Contido no .hv-hero fica só * na área do hero (topo 600px); os rails abaixo cobrem o resto. Multi-page * (home-v2/movies/series/kids isoladas) usa #h2-backdrop no e não é * afetado por essa regra. */ .hv-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-size: cover; /* Alinha no canto superior direito — nitidez 100% naquela região. */ background-position: right top; background-repeat: no-repeat; z-index: 0; pointer-events: none; } /* Fade DIAGONAL (canto superior direito = 100% nítido, * canto inferior esquerdo = preto opaco). * angle 315deg = do top-right pro bottom-left. * Efeito Netflix: imagem visível "flutua" no canto sup dir e derrete * pra preto conforme desce/vai pra esquerda (onde tem texto+sidebar). */ .hv-hero-fade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-image: linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.95) 100%); } /* Overlay do Hero — 2 gradientes empilhados (esquerda escuro + baixo escuro). * Chrome 63 do Tizen: multi-gradient em background: parece OK, mas melhor * usar 2 pseudo-elementos separados pra garantir. */ .hv-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Gradient horizontal (esquerda escura → direita clara) */ background-image: linear-gradient(90deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.75) 35%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.05) 100%); } /* Gradient vertical extra (rodapé escuro) via pseudo-element pra garantir * que Chrome 63 renderiza ambos os gradients (multi-background comma-separated * às vezes é ignorado em versões antigas do Chrome). */ .hv-hero-overlay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 65%); pointer-events: none; } /* Content skeleton — coluna alinhada ao topo. Cada .hv-hero-line tem * altura previsível: ordem visual determinística independente do dado. * Alinhado à esquerda pra sobrepor o gradient escuro. */ .hv-hero-content { position: absolute; left: 48px; top: 32px; max-width: 720px; z-index: 3; color: #fff; } .hv-hero-line { margin-bottom: 12px; } .hv-hero-line:empty { display: none; /* remove line vazia sem afetar as próximas */ } /* Slot fixo pro logo/título — altura constante evita resize do Hero * quando alterna entre items com logo image (grande) e texto (pequeno). * Altura pensada pra caber ~2 linhas de texto OU logo image médio. */ /* Slot de altura FIXA — todos hero (Home + Details) mantêm mesma dimensão pra logo, evitando layout shift quando trocam de item (logo grande vs pequeno) ou entre tipos (logo image vs texto). */ .hv-hero-logo-slot { width: 100%; max-width: 560px; height: 110px; margin-bottom: 12px; display: flex; align-items: flex-end; overflow: hidden; } .hv-hero-logo { max-width: 100%; max-height: 110px; width: auto; height: auto; display: block; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7)); } .hv-hero-title { font-size: 48px; font-weight: 900; letter-spacing: -0.5px; line-height: 1; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.7); /* Trunca em 2 linhas pra não estourar o slot fixo */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Linha 1: classificação + ratings. Chrome 63 (Tizen) NÃO suporta `gap` em flexbox — usa margin-left em siblings. */ .hv-hero-ratings { display: flex; margin-bottom: 10px; align-items: center; } .hv-hero-ratings > * + * { margin-left: 14px; } .hv-badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 14px; font-weight: 700; border-radius: 4px; letter-spacing: 0.3px; } .hv-badge-cert { background: #E53935; color: #fff; min-width: 32px; justify-content: center; } .hv-rating { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; } /* Espaço entre ícone (★/♥/⏱) e o número dentro do .hv-rating */ .hv-rating > * + * { margin-left: 4px; } .hv-rating-imdb { color: #FFC107; } .hv-rating-tmdb { color: #4CAF50; } .hv-rating-runtime { color: #9ecff5; } .hv-rating-icon { font-size: 18px; line-height: 1; } /* Linha 2: gêneros + ano */ .hv-hero-genres { color: rgba(255,255,255,0.85); font-size: 15px; margin-bottom: 14px; letter-spacing: 0.2px; } /* Sinopse — até 4 linhas (skeleton fixo, mesmo em qualquer page) */ .hv-hero-overview { color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.5; max-width: 680px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 12px; } /* Diretor / Elenco (uma linha cada) */ .hv-hero-crew { color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.4; max-width: 680px; /* Trunca em 1 linha se muito longo (evita quebrar 3+ linhas de elenco) */ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .hv-hero-crew strong { color: rgba(255,255,255,0.72); font-weight: 400; margin-right: 4px; } /* Legacy — mantém compat com uso antigo */ .hv-hero-cast { color: rgba(255,255,255,0.75); font-size: 13px; } .hv-hero-meta { display: flex; margin-bottom: 12px; align-items: center; } .hv-hero-meta > * + * { margin-left: 12px; } .hv-badge-star { background: rgba(0,0,0,0.5); color: #FFEB3B; } .hv-badge-heart { background: rgba(0,0,0,0.5); color: #E91E63; } /* ─── RAIL horizontal ─────────────────────────────────────────────────── */ .hv-rail { /* padding-left menor (28px) porque scroller tem padding-left próprio 20px * → 1º card fica alinhado a 48px do viewport (mesma coluna do título). * padding-bottom 8px pra compensar padding-bottom do scroller (24px) * → total = 32px entre rails. */ padding: 0 0 8px 28px; } .hv-rail-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: 0.2px; } .hv-rail-scroller { display: flex; overflow-x: auto; overflow-y: visible; /* Padding vertical: espaço pro card focado (scale 1.08 + halo) não cortar * topo/rodapé. Padding LEFT: 20px pra halo do 1º card respirar (senão * overflow-x: auto do scroller corta o outline azul do card mais à esquerda). */ padding: 20px 48px 24px 20px; scroll-behavior: smooth; /* Esconde scrollbar Chrome/Tizen */ scrollbar-width: none; -ms-overflow-style: none; } .hv-rail-scroller::-webkit-scrollbar { display: none; } /* Chrome 63 do Tizen 5.0 NÃO suporta `gap` em flexbox (Chrome 84+). * Usa margin-left em cards a partir do 2º. */ .hv-rail-scroller > .hv-card + .hv-card, .hv-rail-scroller > .hv-card-top10 + .hv-card-top10 { margin-left: 12px; } /* ─── CARD (poster) ──────────────────────────────────────────────────── */ .hv-card { /* Poster 2:3 vertical (140×210) */ width: 140px; height: 210px; flex-shrink: 0; background: #1a1a1a; border: none; border-radius: 6px; padding: 0; overflow: hidden; cursor: pointer; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; outline: none; position: relative; } .hv-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hv-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; color: rgba(255,255,255,0.7); font-size: 12px; background: linear-gradient(135deg, #2a2a2a, #1a1a1a); } .hv-card.tv-focused, .hv-card:focus { transform: scale(1.08); box-shadow: 0 8px 32px rgba(0, 183, 235, 0.55), 0 0 0 3px var(--color-primary); z-index: 2; outline: none; } /* Barrinha de progresso — Continue Assistir (Netflix-style, base do poster) */ .hv-card-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); z-index: 3; pointer-events: none; } .hv-card-progress-fill { height: 100%; background: #E50914; /* vermelho Netflix — padrão universal */ box-shadow: 0 0 6px rgba(229, 9, 20, 0.6); } /* ─── Rail Top 10 (Netflix-style) ───────────────────────────────────── * Número gigante à esquerda + poster ENCOSTADO/SOBREPONDO ~20% do número. * Rail height maior pro número caber (número ocupa altura toda do rail). * Rank 10 (2 dígitos) precisa de mais espaço horizontal. */ .hv-rail-top10 .hv-rail-scroller { padding-left: 80px; /* espaço extra pro 1º número não cortar à esquerda */ align-items: flex-start; } /* Chrome 63 gap fallback + mais respiro pro número do próximo card */ .hv-rail-top10 .hv-rail-scroller > .hv-card-top10 + .hv-card-top10 { margin-left: 24px; } .hv-card-top10 { position: relative; /* Cards 60% do tamanho — poster 84×126 + espaço pro número (menor). */ width: 128px; height: 156px; padding-left: 44px; background: transparent; overflow: visible; flex-shrink: 0; display: block; } .hv-card-top10 .hv-card-img, .hv-card-top10 .hv-card-placeholder { width: 84px !important; height: 126px !important; border-radius: 4px; position: relative; top: 30px; /* poster desce, número fica alinhado ao topo */ z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.5); background: #1a1a1a; display: block; } .hv-card-top10.rank-10 { width: 150px; padding-left: 66px; } .hv-card-rank { position: absolute; left: 4px; top: 20px; /* alinha TOPO do número com TOPO do poster */ font-family: 'HokubaGrabs', 'Impact', 'Arial Black', sans-serif; font-size: 78px; /* metade do anterior (155) */ font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; color: #FFFFFF; /* fonte já é OUTLINE nativo — só branco */ z-index: 1; pointer-events: none; user-select: none; text-shadow: 0 2px 6px rgba(0,0,0,0.7); } .hv-card-top10.rank-10 .hv-card-rank { letter-spacing: -0.06em; } /* Foco: só o poster escala + ganha ring azul (não expande além da margem * pra evitar sobreposição com número do próximo card) */ .hv-card-top10.tv-focused, .hv-card-top10:focus { transform: none; box-shadow: none; outline: none; z-index: 5; } .hv-card-top10.tv-focused .hv-card-img, .hv-card-top10:focus .hv-card-img, .hv-card-top10.tv-focused .hv-card-placeholder, .hv-card-top10:focus .hv-card-placeholder { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 0 3px var(--color-primary); transition: transform 0.15s ease-out; transform-origin: center; }