/* MEDIDA ÚNICA PARA QUALQUER TELA (TV de 14" a 100", Full HD, 4K, janela pequena): --u = 1% da altura de uma tela 16:9 que cabe inteira na janela; --px = 1 pixel de uma tela de 1080 de altura. Numa TV Full HD fica idêntico; em 4K cresce junto; em janela menor ou estreita diminui tudo junto. */ :root { --u: min(1vh, calc(100vw * 9 / 1600)); --px: calc(var(--u) / 10.8); } /* ===================== BASE ===================== */ :root { --fundo: #0a0d18; --fundo2: #121629; --texto: #f4f5fa; --suave: #a7abc0; --roxo: #7b3fe4; --rosa: #e8458b; --laranja: #ff9a3c; --grad: linear-gradient(120deg, #7b3fe4, #e8458b 55%, #ff9a3c); --curva: cubic-bezier(.2, .8, .2, 1); --mola: cubic-bezier(.34, 1.56, .64, 1); --margem: clamp(calc(20 * var(--px)), 4.2vw, calc(72 * var(--px))); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--fundo); color: var(--texto); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } img { display: block; } .img { opacity: 0; transition: opacity .6s var(--curva), transform .6s var(--curva); } .img.ok { opacity: 1; } ::-webkit-scrollbar { width: 0; height: 0; } body.travado { overflow: hidden; } /* ===================== TOPO ===================== */ .topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(78 * var(--px)); display: flex; align-items: center; gap: calc(40 * var(--px)); padding: 0 var(--margem); background: linear-gradient(#0a0d18cc, #0a0d1800); transition: background .4s, backdrop-filter .4s, height .4s var(--curva); } .topo.rolou { background: #0a0d18d9; backdrop-filter: blur(calc(22 * var(--px))) saturate(1.4); height: calc(64 * var(--px)); box-shadow: 0 1px 0 #ffffff12; } .topo .marca { display: flex; align-items: center; gap: calc(10 * var(--px)); font-weight: 800; letter-spacing: -.02em; font-size: calc(20 * var(--px)); } .topo .marca svg { width: calc(38 * var(--px)); height: calc(38 * var(--px)); filter: drop-shadow(0 calc(4 * var(--px)) calc(14 * var(--px)) #e8458b70); transition: transform .5s var(--mola); } .topo .marca:hover svg { transform: rotate(-12deg) scale(1.1); } .topo nav { display: flex; gap: calc(6 * var(--px)); } .topo nav a { position: relative; padding: calc(8 * var(--px)) calc(14 * var(--px)); border-radius: calc(999 * var(--px)); font-weight: 600; font-size: calc(15 * var(--px)); color: #dfe1ec; text-decoration: none; transition: color .25s, background .25s; } .topo nav a:hover { background: #ffffff14; color: #fff; } .topo nav a.ativo { color: #fff; } .topo nav a.ativo::after { content: ""; position: absolute; left: calc(14 * var(--px)); right: calc(14 * var(--px)); bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); } .topo .direita { margin-left: auto; display: flex; align-items: center; gap: calc(14 * var(--px)); } .atualizado { display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(12.5 * var(--px)); font-weight: 600; color: var(--suave); padding: calc(7 * var(--px)) calc(12 * var(--px)); border-radius: calc(999 * var(--px)); background: #ffffff0d; border: 1px solid #ffffff12; } .atualizado i { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 #3ddc8480; animation: pulsa 2.2s infinite; } @keyframes pulsa { 70% { box-shadow: 0 0 0 calc(8 * var(--px)) #3ddc8400; } 100% { box-shadow: 0 0 0 0 #3ddc8400; } } .icone-btn { width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; display: grid; place-items: center; transition: background .25s, transform .3s var(--mola); } .icone-btn:hover { background: #ffffff18; transform: scale(1.08); } .icone-btn svg { width: calc(21 * var(--px)); height: calc(21 * var(--px)); } .avatar { width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 0 2px #ffffff30; } /* ===================== HERÓI (início) ===================== */ .heroi { position: relative; height: min(calc(88 * var(--u)), calc(860 * var(--px))); min-height: calc(560 * var(--px)); overflow: hidden; } .heroi .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--curva); } .heroi .slide.ativo { opacity: 1; z-index: 1; } .heroi .slide .fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.08); } .heroi .slide.ativo .fundo { animation: kenburns 14s linear forwards; } @keyframes kenburns { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.0) translate3d(-1.2%, 0, 0); } } .heroi .veu { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #0a0d18f2 0%, #0a0d18b0 32%, #0a0d1800 62%), linear-gradient(0deg, var(--fundo) 0%, #0a0d1800 38%), linear-gradient(180deg, #0a0d1899 0%, #0a0d1800 22%); } .heroi .info { position: absolute; z-index: 3; left: var(--margem); bottom: calc(150 * var(--px)); width: min(calc(620 * var(--px)), 52vw); } .heroi .info > * { opacity: 0; transform: translateY(calc(18 * var(--px))); } .heroi .info.entra > * { animation: sobe .8s var(--curva) forwards; } .heroi .info.entra > *:nth-child(2) { animation-delay: .08s; } .heroi .info.entra > *:nth-child(3) { animation-delay: .16s; } .heroi .info.entra > *:nth-child(4) { animation-delay: .24s; } .heroi .info.entra > *:nth-child(5) { animation-delay: .32s; } @keyframes sobe { to { opacity: 1; transform: none; } } .logo-titulo { max-width: calc(440 * var(--px)); max-height: calc(170 * var(--px)); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 calc(6 * var(--px)) calc(24 * var(--px)) #0009); margin-bottom: calc(26 * var(--px)); } .titulo-texto { font-size: clamp(calc(38 * var(--px)), 5vw, calc(66 * var(--px))); font-weight: 900; letter-spacing: -.03em; line-height: .95; margin-bottom: calc(22 * var(--px)); } .chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); margin-bottom: calc(14 * var(--px)); } .chip { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); padding: calc(5 * var(--px)) calc(10 * var(--px)); border-radius: calc(7 * var(--px)); font-size: calc(12.5 * var(--px)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #ffffff14; border: 1px solid #ffffff1a; backdrop-filter: blur(calc(10 * var(--px))); } .chip svg { width: calc(13 * var(--px)); height: calc(13 * var(--px)); opacity: .85; } .notas { display: flex; align-items: center; gap: calc(16 * var(--px)); font-weight: 700; font-size: calc(14 * var(--px)); margin-bottom: calc(14 * var(--px)); } .notas span { display: flex; align-items: center; gap: calc(6 * var(--px)); } .selo-nota { background: #f5c518; color: #000; font-weight: 900; font-size: calc(11 * var(--px)); padding: 2px calc(5 * var(--px)); border-radius: calc(4 * var(--px)); } .sinopse { font-size: calc(17 * var(--px)); line-height: 1.5; color: #e7e8f0; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(26 * var(--px)); text-shadow: 0 1px calc(12 * var(--px)) #0008; } .botoes { display: flex; gap: calc(12 * var(--px)); align-items: center; } .btn { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); height: calc(52 * var(--px)); padding: 0 calc(26 * var(--px)); border-radius: calc(12 * var(--px)); font-weight: 700; font-size: calc(16.5 * var(--px)); position: relative; overflow: hidden; transition: transform .35s var(--mola), box-shadow .35s, background .25s; } .btn svg { width: calc(20 * var(--px)); height: calc(20 * var(--px)); } .btn:hover { transform: translateY(-2px) scale(1.03); } .btn:active { transform: scale(.97); } .btn-forte { background: #fff; color: #0a0d18; box-shadow: 0 calc(10 * var(--px)) calc(30 * var(--px)) calc(-10 * var(--px)) #ffffff80; } .btn-vidro { background: #ffffff1f; backdrop-filter: blur(calc(16 * var(--px))); border: 1px solid #ffffff22; } .btn-vidro:hover { background: #ffffff30; } .btn::after { /* brilho que passa */ content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, #ffffff55 50%, transparent 70%); } .btn:hover::after { transform: translateX(120%); transition: transform .8s var(--curva); } .idade-box { display: flex; align-items: center; gap: calc(12 * var(--px)); } .idade { min-width: calc(46 * var(--px)); height: calc(46 * var(--px)); border-radius: calc(8 * var(--px)); display: grid; place-items: center; font-weight: 900; font-size: calc(22 * var(--px)); color: #fff; padding: 0 calc(6 * var(--px)); } .idade.L { background: #0c9447; } .idade.i10 { background: #0f7dc2; } .idade.i12 { background: #f8c411; color: #000; } .idade.i14 { background: #e67824; } .idade.i16 { background: #db2827; } .idade.i18 { background: #000; box-shadow: inset 0 0 0 2px #fff3; } .idade-box small { color: var(--suave); font-size: calc(14 * var(--px)); display: block; } .idade-box b { font-size: calc(15 * var(--px)); } .heroi .idade-canto { position: absolute; z-index: 3; right: var(--margem); bottom: calc(160 * var(--px)); opacity: 0; transition: opacity .6s .4s; } .heroi .idade-canto.ver { opacity: 1; } .progresso { position: absolute; z-index: 3; left: var(--margem); bottom: calc(108 * var(--px)); display: flex; gap: calc(8 * var(--px)); } .progresso button { width: calc(34 * var(--px)); height: calc(4 * var(--px)); border-radius: calc(4 * var(--px)); background: #ffffff38; overflow: hidden; position: relative; transition: width .5s var(--curva); } .progresso button.ativo { width: calc(64 * var(--px)); } .progresso button i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); } .progresso button.ativo i { animation: enche var(--tempo, 8s) linear forwards; } .progresso button.visto i { transform: scaleX(1); } @keyframes enche { to { transform: scaleX(1); } } .heroi .setas { position: absolute; z-index: 4; right: var(--margem); bottom: calc(104 * var(--px)); display: flex; gap: calc(8 * var(--px)); } .seta-redonda { width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; display: grid; place-items: center; background: #ffffff14; border: 1px solid #ffffff22; backdrop-filter: blur(calc(12 * var(--px))); transition: background .25s, transform .3s var(--mola); } .seta-redonda:hover { background: #ffffff2e; transform: scale(1.1); } .seta-redonda svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); } /* ===================== STREAMINGS (faixa de marcas) ===================== */ .faixa-marcas { position: relative; z-index: 5; margin-top: calc(-88 * var(--px)); padding: 0 var(--margem); } .faixa-marcas .trilho { display: flex; gap: calc(16 * var(--px)); overflow-x: auto; padding: calc(18 * var(--px)) calc(4 * var(--px)) calc(26 * var(--px)); scroll-snap-type: x mandatory; } .marca-card { --cor: #333; --cor2: #111; flex: 0 0 auto; width: clamp(calc(210 * var(--px)), 15.5vw, calc(280 * var(--px))); aspect-ratio: 16/9; border-radius: calc(16 * var(--px)); position: relative; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, var(--cor) 0%, var(--cor2) 70%); box-shadow: 0 calc(12 * var(--px)) calc(30 * var(--px)) calc(-14 * var(--px)) #000, inset 0 0 0 1px #ffffff14; scroll-snap-align: start; transition: transform .5s var(--mola), box-shadow .5s; view-transition-name: none; } .marca-card .capas { position: absolute; right: -12%; top: 10%; height: 92%; width: 60%; } .marca-card .capas img { position: absolute; top: 0; height: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: calc(7 * var(--px)); box-shadow: calc(-6 * var(--px)) calc(6 * var(--px)) calc(18 * var(--px)) #0009; transition: transform .6s var(--mola); } .marca-card .capas img:nth-child(1) { right: 44%; transform: rotate(-9deg) translateY(8%) scale(.86); z-index: 1; } .marca-card .capas img:nth-child(2) { right: 22%; transform: rotate(-3deg) translateY(2%) scale(.94); z-index: 2; } .marca-card .capas img:nth-child(3) { right: 0; transform: rotate(4deg) scale(1); z-index: 3; } .marca-card:hover .capas img:nth-child(1) { transform: rotate(-14deg) translate(-16%, 4%) scale(.9); } .marca-card:hover .capas img:nth-child(2) { transform: rotate(-4deg) translate(-6%, -4%) scale(.98); } .marca-card:hover .capas img:nth-child(3) { transform: rotate(7deg) translate(4%, -6%) scale(1.04); } .marca-card .sombra { position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, var(--cor2) 30%, transparent 75%); opacity: .95; } .marca-card .logo-marca { position: absolute; z-index: 5; left: calc(18 * var(--px)); bottom: calc(18 * var(--px)); max-width: 54%; max-height: 34%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 2px calc(10 * var(--px)) #0008); } .marca-card .brilho { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #ffffff2a, transparent 45%); opacity: 0; transition: opacity .3s; } .marca-card:hover { transform: translateY(calc(-6 * var(--px))) scale(1.035); box-shadow: 0 calc(24 * var(--px)) calc(40 * var(--px)) calc(-16 * var(--px)) #000, 0 0 0 2px #ffffffb0, 0 0 calc(40 * var(--px)) calc(-6 * var(--px)) var(--cor); } .marca-card:hover .brilho { opacity: 1; } .marca-card.escolhida { box-shadow: 0 calc(12 * var(--px)) calc(30 * var(--px)) calc(-14 * var(--px)) #000, inset 0 0 0 2px #ffffffcc; } .marca-card .novo-pino { position: absolute; z-index: 7; top: calc(10 * var(--px)); left: calc(12 * var(--px)); font-size: calc(10.5 * var(--px)); font-weight: 800; letter-spacing: .06em; padding: 3px calc(7 * var(--px)); border-radius: calc(5 * var(--px)); background: #ffffffe6; color: #000; } /* vitrine do streaming escolhido */ .vitrine { --cor: #e50914; position: relative; margin: 0 0 calc(10 * var(--px)); padding: calc(40 * var(--px)) 0 calc(40 * var(--px)) var(--margem); display: grid; grid-template-columns: calc(250 * var(--px)) 1fr; gap: calc(28 * var(--px)); align-items: center; min-height: calc(420 * var(--px)); } .vitrine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 10% 50%, color-mix(in srgb, var(--cor) 32%, transparent), transparent 70%); transition: background 1s; } .vitrine .lado { text-align: center; display: grid; justify-items: center; gap: calc(14 * var(--px)); transition: opacity .35s, transform .45s var(--curva); } .vitrine .lado img { max-width: calc(190 * var(--px)); max-height: calc(110 * var(--px)); object-fit: contain; } .vitrine .lado p { color: var(--suave); font-weight: 500; } .vitrine .lado .btn { height: calc(46 * var(--px)); font-size: calc(15 * var(--px)); } .vitrine.trocando .lado, .vitrine.trocando .fileira-capas { opacity: 0; transform: translateY(calc(10 * var(--px))); } .vitrine .fileira-capas { transition: opacity .35s, transform .45s var(--curva); min-width: 0; } /* ===================== FILEIRAS ===================== */ .fileira { position: relative; margin: calc(8 * var(--px)) 0 calc(30 * var(--px)); } .fileira h2 { padding: 0 var(--margem); font-size: calc(22 * var(--px)); font-weight: 800; letter-spacing: -.01em; margin-bottom: calc(12 * var(--px)); display: flex; align-items: baseline; gap: calc(12 * var(--px)); } .fileira h2 small { font-size: calc(13 * var(--px)); color: var(--suave); font-weight: 600; } .fileira .trilho { display: flex; gap: calc(18 * var(--px)); overflow-x: auto; scroll-behavior: smooth; padding: calc(14 * var(--px)) var(--margem) calc(26 * var(--px)); scroll-padding: 0 var(--margem); } .vitrine .fileira .trilho { padding-left: calc(4 * var(--px)); } .fileira .rolar { position: absolute; top: calc(50 * var(--px)); bottom: calc(30 * var(--px)); width: calc(64 * var(--px)); z-index: 8; display: grid; place-items: center; opacity: 0; transition: opacity .3s; } .fileira:hover .rolar { opacity: 1; } .fileira .rolar.esq { left: 0; background: linear-gradient(90deg, var(--fundo), transparent); } .fileira .rolar.dir { right: 0; background: linear-gradient(270deg, var(--fundo), transparent); } .fileira .rolar svg { width: calc(30 * var(--px)); height: calc(30 * var(--px)); transition: transform .3s var(--mola); } .fileira .rolar:hover svg { transform: scale(1.3); } .revela { opacity: 0; transform: translateY(calc(30 * var(--px))); transition: opacity .9s var(--curva), transform .9s var(--curva); } .revela.visto { opacity: 1; transform: none; } .capa { flex: 0 0 auto; width: clamp(calc(150 * var(--px)), 12.4vw, calc(230 * var(--px))); position: relative; border-radius: calc(12 * var(--px)); cursor: pointer; transition: transform .45s var(--mola); outline: none; } .capa .moldura { position: relative; aspect-ratio: 2/3; border-radius: calc(12 * var(--px)); overflow: hidden; background: #1b2036; box-shadow: 0 calc(14 * var(--px)) calc(30 * var(--px)) calc(-18 * var(--px)) #000; } .capa .moldura img { width: 100%; height: 100%; object-fit: cover; } .capa::before { /* borda degradê do app dele, só ao focar */ content: ""; position: absolute; inset: -3px; border-radius: calc(15 * var(--px)); background: var(--grad); opacity: 0; transition: opacity .3s; z-index: -1; } .capa .reflexo { position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 35%, #ffffff40 48%, transparent 60%); transform: translateX(-100%); pointer-events: none; } .capa:hover, .capa:focus-visible { transform: translateY(calc(-8 * var(--px))) scale(1.06); z-index: 3; } .capa:hover::before, .capa:focus-visible::before { opacity: 1; } .capa:hover .reflexo { transform: translateX(100%); transition: transform .9s var(--curva); } .capa .faixa { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: calc(26 * var(--px)) calc(10 * var(--px)) calc(8 * var(--px)); font-size: calc(11.5 * var(--px)); font-weight: 800; letter-spacing: .06em; text-align: center; background: linear-gradient(0deg, #000d, transparent); text-transform: uppercase; } .capa .pino { position: absolute; top: calc(8 * var(--px)); left: calc(8 * var(--px)); z-index: 3; height: calc(24 * var(--px)); padding: 0 calc(7 * var(--px)); border-radius: calc(6 * var(--px)); background: #000a; backdrop-filter: blur(calc(6 * var(--px))); display: flex; align-items: center; } .capa .pino img { height: calc(12 * var(--px)); width: auto; max-width: calc(56 * var(--px)); object-fit: contain; } .capa .novo { position: absolute; top: calc(8 * var(--px)); right: calc(8 * var(--px)); z-index: 3; font-size: calc(10.5 * var(--px)); font-weight: 900; padding: calc(4 * var(--px)) calc(7 * var(--px)); border-radius: calc(6 * var(--px)); background: var(--grad); letter-spacing: .05em; } .capa .nome { margin-top: calc(10 * var(--px)); font-size: calc(14 * var(--px)); font-weight: 600; color: #d7d9e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .capa .sub { font-size: calc(12.5 * var(--px)); color: var(--suave); margin-top: 2px; } /* Top 10 com números */ .top10 .capa { width: clamp(calc(230 * var(--px)), 17vw, calc(310 * var(--px))); display: flex; align-items: flex-end; } .top10 .capa .numero { font-size: clamp(calc(120 * var(--px)), 10vw, calc(180 * var(--px))); font-weight: 900; line-height: .78; letter-spacing: -.08em; color: var(--fundo); -webkit-text-stroke: 3px #ffffff70; margin-right: calc(-14 * var(--px)); flex: 0 0 auto; transition: -webkit-text-stroke-color .3s; } .top10 .capa:hover .numero { -webkit-text-stroke-color: #fff; } .top10 .capa .moldura { flex: 1; } .top10 .capa::before { left: 40%; } /* ===================== DETALHE (estilo da tela dele) ===================== */ .detalhe { position: fixed; inset: 0; z-index: 80; background: var(--fundo); overflow-y: auto; } .detalhe .fundo-det { position: absolute; inset: 0 0 auto 0; height: calc(760 * var(--px)); overflow: hidden; } .detalhe .fundo-det img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; animation: kenburns 30s linear forwards; } .detalhe .fundo-det::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fundo) 0%, #0a0d18cc 40%, #0a0d1866 70%, #0a0d18aa 100%), linear-gradient(0deg, var(--fundo) 0%, transparent 50%); } .detalhe .conteudo { position: relative; padding: calc(110 * var(--px)) var(--margem) calc(40 * var(--px)); display: grid; grid-template-columns: calc(300 * var(--px)) 1fr calc(330 * var(--px)); gap: calc(44 * var(--px)); align-items: start; } .detalhe .voltar { position: fixed; top: calc(24 * var(--px)); left: var(--margem); z-index: 5; } .detalhe .etiquetas { position: absolute; top: calc(28 * var(--px)); right: var(--margem); display: flex; gap: calc(10 * var(--px)); } .poster-det { position: relative; border-radius: calc(14 * var(--px)); overflow: hidden; box-shadow: 0 calc(30 * var(--px)) calc(60 * var(--px)) calc(-20 * var(--px)) #000; view-transition-name: capa-aberta; } .poster-det img { width: 100%; aspect-ratio: 2/3; object-fit: cover; } .poster-det .ano { position: absolute; top: calc(12 * var(--px)); left: 0; background: #fff; color: #000; font-weight: 800; padding: calc(4 * var(--px)) calc(10 * var(--px)); font-size: calc(15 * var(--px)); } .poster-det .prov { position: absolute; top: calc(10 * var(--px)); right: calc(10 * var(--px)); background: #000c; padding: calc(6 * var(--px)) calc(8 * var(--px)); border-radius: calc(6 * var(--px)); } .poster-det .prov img { height: calc(16 * var(--px)); width: auto; aspect-ratio: auto; } .poster-det .dur { position: absolute; bottom: calc(10 * var(--px)); right: calc(10 * var(--px)); background: #000c; padding: calc(4 * var(--px)) calc(8 * var(--px)); border-radius: calc(6 * var(--px)); font-weight: 800; font-size: calc(13 * var(--px)); } .detalhe .meio > * { opacity: 0; transform: translateY(calc(16 * var(--px))); animation: sobe .7s var(--curva) forwards; } .detalhe .meio > *:nth-child(2) { animation-delay: .06s; } .detalhe .meio > *:nth-child(3) { animation-delay: .12s; } .detalhe .meio > *:nth-child(4) { animation-delay: .18s; } .detalhe .meio > *:nth-child(5) { animation-delay: .24s; } .detalhe .logo-titulo { max-height: calc(150 * var(--px)); max-width: calc(560 * var(--px)); margin-bottom: calc(10 * var(--px)); } .detalhe .original { font-size: calc(19 * var(--px)); font-weight: 700; margin-bottom: calc(22 * var(--px)); color: #e9eaf2; } .redondo { width: calc(60 * var(--px)); height: calc(60 * var(--px)); border-radius: 50%; display: grid; place-items: center; background: #ffffff1a; border: 1px solid #ffffff1a; backdrop-filter: blur(calc(12 * var(--px))); transition: transform .35s var(--mola), background .25s; } .redondo:hover { background: #ffffff33; transform: scale(1.1); } .redondo svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); } .redondo.play { background: #fff; color: #0a0d18; } .redondo.amei svg { transition: transform .4s var(--mola), fill .2s; } .redondo.amei.on svg { fill: var(--rosa); stroke: var(--rosa); animation: coracao .5s var(--mola); } @keyframes coracao { 40% { transform: scale(1.5); } } .pilula { height: calc(60 * var(--px)); padding: 0 calc(22 * var(--px)); border-radius: calc(999 * var(--px)); display: flex; align-items: center; gap: calc(10 * var(--px)); font-weight: 700; background: #ffffff1a; border: 1px solid #ffffff1a; transition: background .25s, transform .35s var(--mola); } .pilula:hover { background: #ffffff33; transform: scale(1.04); } .pilula svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } .detalhe .sinopse { -webkit-line-clamp: 6; margin-top: calc(22 * var(--px)); font-size: calc(18 * var(--px)); } .detalhe .lado-dir { padding-top: calc(220 * var(--px)); display: grid; gap: calc(22 * var(--px)); } .detalhe .lado-dir small { color: var(--suave); font-size: calc(13.5 * var(--px)); display: block; margin-bottom: calc(4 * var(--px)); } .detalhe .lado-dir p { line-height: 1.5; } .detalhe .mais { position: relative; margin-top: calc(10 * var(--px)); } /* modal do trailer */ .trailer { position: fixed; inset: 0; z-index: 200; background: #000d; backdrop-filter: blur(calc(10 * var(--px))); display: grid; place-items: center; animation: aparece .3s; } .trailer iframe { width: min(calc(1100 * var(--px)), 90vw); aspect-ratio: 16/9; border: 0; border-radius: calc(14 * var(--px)); box-shadow: 0 calc(30 * var(--px)) calc(80 * var(--px)) #000; animation: cresce .5s var(--mola); } .trailer .fechar { position: absolute; top: calc(24 * var(--px)); right: calc(24 * var(--px)); } @keyframes aparece { from { opacity: 0; } } @keyframes cresce { from { transform: scale(.85); opacity: 0; } } /* ===================== TRANSIÇÃO PARA O STREAMING ===================== */ .expansor { position: fixed; z-index: 300; border-radius: calc(16 * var(--px)); overflow: hidden; pointer-events: none; transition: all .75s cubic-bezier(.7, 0, .2, 1); } .expansor .logo-exp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 46%; max-height: 40%; transition: all .75s cubic-bezier(.7, 0, .2, 1); } .abertura { position: fixed; inset: 0; z-index: 310; display: grid; place-items: center; pointer-events: none; } .abertura.some { animation: someAbertura .7s var(--curva) forwards; } @keyframes someAbertura { to { opacity: 0; transform: scale(1.04); } } /* Netflix: N aparece, brilha e "entra" na tela */ .ab-netflix { background: #000; } .ab-netflix img { width: calc(120 * var(--px)); animation: nflix 1.5s cubic-bezier(.6, 0, .2, 1) forwards; filter: drop-shadow(0 0 0 #e5091400); } @keyframes nflix { 0% { transform: scale(.5); opacity: 0; } 30% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 calc(30 * var(--px)) #e50914cc); } 65% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 calc(60 * var(--px)) #e50914); } 100% { transform: scale(14); opacity: 0; filter: blur(calc(8 * var(--px))); } } .ab-netflix .listras { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #e5091400 0 3%, #e5091422 3% 4%); opacity: 0; animation: listras 1.5s forwards; } @keyframes listras { 55% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; transform: scaleX(3); } } /* Prime: fundo azul, logo sobe e o sorriso desenha */ .ab-prime { background: radial-gradient(circle at 50% 60%, #1a98ff40, #00050d 60%); } .ab-prime img { width: calc(300 * var(--px)); animation: primeEntra 1.4s var(--curva) forwards; } @keyframes primeEntra { 0% { opacity: 0; transform: translateY(calc(20 * var(--px))); filter: blur(calc(10 * var(--px))); } 40% { opacity: 1; transform: none; filter: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } } .ab-prime .luz { position: absolute; width: 60vw; height: 2px; background: linear-gradient(90deg, transparent, #1a98ff, transparent); top: 58%; animation: luzPassa 1.4s var(--curva) forwards; } @keyframes luzPassa { from { transform: translateX(-80vw); } to { transform: translateX(80vw); } } /* Apple: logo em vidro com brilho */ .ab-appletv { background: #000; } .ab-appletv img { width: calc(220 * var(--px)); filter: invert(1); animation: appleEntra 1.4s var(--curva) forwards; } @keyframes appleEntra { 0% { opacity: 0; transform: scale(.92); filter: invert(1) blur(calc(14 * var(--px))); } 45% { opacity: 1; transform: scale(1); filter: invert(1) blur(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.02); } } /* Crunchyroll: explosão laranja e o ícone gira */ .ab-crunchyroll { background: #000; overflow: hidden; } .ab-crunchyroll .onda { position: absolute; width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; background: #f47521; animation: onda 1.3s cubic-bezier(.7, 0, .2, 1) forwards; } @keyframes onda { 0% { transform: scale(0); } 55% { transform: scale(60); opacity: 1; } 100% { transform: scale(60); opacity: 0; } } .ab-crunchyroll .cr { position: relative; display: flex; align-items: center; gap: calc(16 * var(--px)); animation: crEntra 1.3s var(--curva) forwards; } .ab-crunchyroll .cr img { width: calc(90 * var(--px)); filter: brightness(0) invert(1); animation: gira 1.3s var(--mola); } .ab-crunchyroll .cr b { font: 800 calc(56 * var(--px)) "Lato", sans-serif; color: #fff; letter-spacing: -.02em; } @keyframes gira { from { transform: rotate(-200deg) scale(.4); } } @keyframes crEntra { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } .ab-generico img { width: calc(260 * var(--px)); animation: primeEntra 1.3s var(--curva) forwards; } /* ===================== MODO STREAMING (comum) ===================== */ .modo { position: fixed; inset: 0; z-index: 90; overflow-y: auto; overflow-x: hidden; background: var(--m-fundo, #000); color: #fff; } .modo.entra { animation: modoEntra .9s var(--curva); } @keyframes modoEntra { from { opacity: 0; transform: scale(1.03); } } .modo.sai { animation: modoSai .55s var(--curva) forwards; } @keyframes modoSai { to { opacity: 0; transform: scale(.97); filter: blur(calc(6 * var(--px))); } } .voltar-app { position: fixed; z-index: 120; left: 50%; bottom: calc(26 * var(--px)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(10 * var(--px)); height: calc(50 * var(--px)); padding: 0 calc(20 * var(--px)) 0 calc(8 * var(--px)); border-radius: calc(999 * var(--px)); background: #12141fcc; backdrop-filter: blur(calc(20 * var(--px))) saturate(1.5); border: 1px solid #ffffff22; box-shadow: 0 calc(20 * var(--px)) calc(40 * var(--px)) calc(-10 * var(--px)) #000; font-weight: 700; font-size: calc(14.5 * var(--px)); color: #fff; animation: voltarEntra .7s 1s var(--mola) both; transition: transform .35s var(--mola), background .25s; } .voltar-app:hover { transform: translateX(-50%) translateY(-3px) scale(1.04); background: #1d2133e6; } .voltar-app .bola { width: calc(36 * var(--px)); height: calc(36 * var(--px)); border-radius: 50%; display: grid; place-items: center; background: var(--grad); } .voltar-app .bola svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } @keyframes voltarEntra { from { opacity: 0; transform: translateX(-50%) translateY(calc(30 * var(--px))); } } .m-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: calc(70 * var(--px)); display: flex; align-items: center; gap: calc(34 * var(--px)); padding: 0 var(--margem); background: linear-gradient(#000b, transparent); transition: background .4s, height .4s; } .m-topo.rolou { background: var(--m-topo-rolou, #000); } .m-topo nav { display: flex; gap: calc(22 * var(--px)); font-size: calc(14.5 * var(--px)); } .m-topo nav a { color: #e5e5e5; text-decoration: none; transition: color .2s; cursor: pointer; } .m-topo nav a:hover { color: #b3b3b3; } .m-topo nav a.ativo { color: #fff; font-weight: 700; } .m-topo .direita { margin-left: auto; display: flex; gap: calc(18 * var(--px)); align-items: center; } .m-topo .direita svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } .m-heroi { position: relative; height: calc(92 * var(--u)); min-height: calc(600 * var(--px)); overflow: hidden; } .m-heroi .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--curva); } .m-heroi .slide.ativo { opacity: 1; z-index: 1; } .m-heroi .slide > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .m-heroi .slide.ativo > img { animation: kenburns 16s linear forwards; } .m-heroi .info { position: absolute; z-index: 3; left: var(--margem); bottom: 26%; width: min(calc(560 * var(--px)), 46vw); } .m-heroi .info > * { opacity: 0; transform: translateY(calc(16 * var(--px))); } .m-heroi .info.entra > * { animation: sobe .8s var(--curva) forwards; } .m-heroi .info.entra > *:nth-child(2) { animation-delay: .1s; } .m-heroi .info.entra > *:nth-child(3) { animation-delay: .2s; } .m-heroi .info.entra > *:nth-child(4) { animation-delay: .3s; } .m-heroi .info.entra > *:nth-child(5) { animation-delay: .4s; } .m-heroi .info .logo-titulo { max-width: 100%; max-height: calc(180 * var(--px)); } .m-fileiras { position: relative; z-index: 4; margin-top: calc(-14 * var(--u)); padding-bottom: calc(120 * var(--px)); } .m-fileira { margin-bottom: 3vw; position: relative; } .m-fileira h3 { padding: 0 var(--margem); font-size: 1.3vw; min-font-size: calc(16 * var(--px)); font-weight: 700; margin-bottom: calc(10 * var(--px)); } .m-fileira .trilho { display: flex; gap: calc(8 * var(--px)); overflow-x: auto; overflow-y: visible; padding: calc(10 * var(--px)) var(--margem) calc(30 * var(--px)); scroll-behavior: smooth; } .m-fileira .rolar { position: absolute; top: calc(34 * var(--px)); bottom: calc(30 * var(--px)); width: calc(56 * var(--px)); z-index: 30; display: grid; place-items: center; background: #0008; opacity: 0; transition: opacity .3s, background .3s; } .m-fileira:hover .rolar { opacity: 1; } .m-fileira .rolar:hover { background: #000b; } .m-fileira .rolar.esq { left: 0; } .m-fileira .rolar.dir { right: 0; } .m-fileira .rolar svg { width: calc(32 * var(--px)); height: calc(32 * var(--px)); transition: transform .3s var(--mola); } .m-fileira .rolar:hover svg { transform: scale(1.3); } .m-card { flex: 0 0 auto; position: relative; cursor: pointer; } .m-card .arte { position: relative; overflow: hidden; background: #222; } .m-card .arte > img:first-child { width: 100%; height: 100%; object-fit: cover; } .m-card .logo-card { position: absolute; left: 8%; bottom: 10%; max-width: 62%; max-height: 38%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 2px calc(8 * var(--px)) #000c); } .m-card .titulo-card { position: absolute; left: 8%; bottom: 10%; right: 8%; font-weight: 800; font-size: calc(15 * var(--px)); text-shadow: 0 2px calc(8 * var(--px)) #000; } /* ===================== NETFLIX ===================== */ .modo.netflix { --m-fundo: #141414; --m-topo-rolou: #141414; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .netflix .m-topo { height: calc(68 * var(--px)); } .netflix .m-topo .logo-m { height: calc(30 * var(--px)); } .netflix .m-topo .perfil { width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: calc(4 * var(--px)); background: linear-gradient(135deg, #2b64e0, #6ac0ff); } .netflix .m-heroi .veu { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, #141414 0%, #14141400 30%), linear-gradient(77deg, #000b 0%, #0000 60%); } .netflix .tipo-n { display: flex; align-items: center; gap: calc(8 * var(--px)); font-weight: 700; letter-spacing: .3em; font-size: calc(15 * var(--px)); color: #ddd; margin-bottom: calc(14 * var(--px)); } .netflix .tipo-n img { height: calc(26 * var(--px)); } .netflix .top-hoje { display: flex; align-items: center; gap: calc(10 * var(--px)); font-weight: 700; font-size: calc(20 * var(--px)); margin-bottom: calc(14 * var(--px)); } .netflix .selo-top { width: calc(30 * var(--px)); height: calc(32 * var(--px)); background: #e50914; border-radius: 3px; display: grid; place-items: center; font-size: calc(8 * var(--px)); font-weight: 900; line-height: 1; text-align: center; } .netflix .selo-top b { display: block; font-size: calc(13 * var(--px)); } .netflix .sinopse { font-size: 1.25vw; min-font-size: calc(15 * var(--px)); line-height: 1.35; text-shadow: 2px 2px calc(4 * var(--px)) #000a; color: #fff; font-weight: 400; } .netflix .btn { border-radius: calc(4 * var(--px)); height: auto; padding: .7rem 2rem .7rem 1.6rem; font-size: 1.15vw; font-weight: 700; } .netflix .btn:hover { transform: none; } .netflix .btn::after { display: none; } .netflix .btn-forte { background: #fff; color: #000; box-shadow: none; } .netflix .btn-forte:hover { background: #ffffffbf; } .netflix .btn-vidro { background: #6d6d6eb3; border: 0; backdrop-filter: none; } .netflix .btn-vidro:hover { background: #6d6d6e66; } .netflix .bandeira-idade { position: absolute; z-index: 3; right: 0; bottom: 30%; display: flex; align-items: center; gap: calc(14 * var(--px)); } .netflix .bandeira-idade .mudo { width: calc(42 * var(--px)); height: calc(42 * var(--px)); border-radius: 50%; border: 1px solid #fffb; display: grid; place-items: center; } .netflix .bandeira-idade .mudo svg { width: calc(20 * var(--px)); } .netflix .bandeira-idade .faixa-idade { background: #33333399; border-left: 3px solid #dcdcdc; padding: calc(8 * var(--px)) calc(60 * var(--px)) calc(8 * var(--px)) calc(10 * var(--px)); font-size: 1.1vw; } .netflix .m-fileira h3 { font-size: calc(20 * var(--px)); color: #e5e5e5; } .netflix .m-card { width: clamp(calc(220 * var(--px)), 15.6vw, calc(300 * var(--px))); transition: transform .35s .15s var(--curva); transform-origin: center; z-index: 1; } .netflix .m-card .arte { aspect-ratio: 16/9; border-radius: calc(4 * var(--px)); } .netflix .m-card .n-mini { position: absolute; top: calc(7 * var(--px)); left: calc(7 * var(--px)); height: calc(18 * var(--px)); width: auto; } .netflix .m-card .card-info { position: absolute; left: 0; right: 0; top: 100%; background: #181818; padding: calc(14 * var(--px)); border-radius: 0 0 calc(6 * var(--px)) calc(6 * var(--px)); opacity: 0; pointer-events: none; transition: opacity .25s .15s; box-shadow: 0 calc(14 * var(--px)) calc(24 * var(--px)) #000c; font-size: calc(12 * var(--px)); } .netflix .m-card:hover { transform: scale(1.32) translateY(-18%); z-index: 20; } .netflix .m-card:hover .arte { border-radius: calc(6 * var(--px)) calc(6 * var(--px)) 0 0; } .netflix .m-card:hover .card-info { opacity: 1; pointer-events: auto; } .netflix .m-card.borda-esq { transform-origin: left center; } .netflix .m-card.borda-dir { transform-origin: right center; } .netflix .acoes { display: flex; gap: calc(8 * var(--px)); margin-bottom: calc(12 * var(--px)); } .netflix .acoes button { width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: 50%; border: 2px solid #ffffff80; display: grid; place-items: center; background: #2a2a2a99; transition: border-color .2s; } .netflix .acoes button:hover { border-color: #fff; } .netflix .acoes button.play { background: #fff; border-color: #fff; color: #000; } .netflix .acoes button svg { width: calc(15 * var(--px)); height: calc(15 * var(--px)); } .netflix .acoes .fim { margin-left: auto; } .netflix .linha-meta { display: flex; align-items: center; gap: calc(8 * var(--px)); font-weight: 700; margin-bottom: calc(8 * var(--px)); } .netflix .rel { color: #46d369; } .netflix .caixinha { border: 1px solid #ffffff66; padding: 0 calc(5 * var(--px)); font-size: calc(11 * var(--px)); } .netflix .gen { color: #fff; display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); } .netflix .gen span + span::before { content: "•"; color: #646464; margin-right: calc(6 * var(--px)); } .netflix .top10 .m-card { width: clamp(calc(240 * var(--px)), 16vw, calc(300 * var(--px))); display: flex; justify-content: flex-end; transition: transform .35s var(--curva); } .netflix .top10 .m-card .numero { flex: 0 0 auto; margin-right: -.12em !important; font-size: clamp(calc(130 * var(--px)), 11vw, calc(200 * var(--px))); font-weight: 900; line-height: .9; letter-spacing: -.08em; color: #141414; -webkit-text-stroke: calc(4 * var(--px)) #595959; text-align: right; margin-right: -2%; align-self: flex-end; font-family: "Helvetica Neue", Arial, sans-serif; } .netflix .top10 .m-card .arte { flex: 0 0 46%; aspect-ratio: 2/3; position: relative; z-index: 1; box-shadow: calc(-10 * var(--px)) 0 calc(20 * var(--px)) #0008; } .netflix .top10 .m-card:hover { transform: scale(1.06); } /* ===================== PRIME VIDEO ===================== */ .modo.prime { --m-fundo: #00050d; --m-topo-rolou: #00050de6; font-family: "Amazon Ember", "Inter", -apple-system, sans-serif; } .prime .m-topo { height: calc(72 * var(--px)); gap: calc(26 * var(--px)); } .prime .m-topo.rolou { backdrop-filter: blur(calc(20 * var(--px))); } .prime .m-topo .logo-m { height: calc(34 * var(--px)); filter: brightness(0) invert(1); } .prime .m-topo nav { gap: calc(4 * var(--px)); } .prime .m-topo nav a { padding: calc(8 * var(--px)) calc(16 * var(--px)); border-radius: calc(999 * var(--px)); font-weight: 600; font-size: calc(16 * var(--px)); color: #fff; } .prime .m-topo nav a:hover { background: #ffffff1f; color: #fff; } .prime .m-topo nav a.ativo { background: #fff; color: #00050d; } .prime .m-topo .perfil { width: calc(36 * var(--px)); height: calc(36 * var(--px)); border-radius: 50%; background: linear-gradient(135deg, #1a98ff, #0f62c4); } .prime .m-heroi { height: calc(86 * var(--u)); } .prime .m-heroi .veu { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, #00050d 0%, transparent 35%), linear-gradient(90deg, #00050d 0%, #00050dcc 30%, transparent 65%); } .prime .incluido { display: flex; align-items: center; gap: calc(8 * var(--px)); font-weight: 700; font-size: calc(16 * var(--px)); margin-bottom: calc(18 * var(--px)); } .prime .incluido i { width: calc(22 * var(--px)); height: calc(22 * var(--px)); border-radius: 50%; background: #1a98ff; display: grid; place-items: center; font-style: normal; font-size: calc(13 * var(--px)); } .prime .sinopse { font-size: calc(16 * var(--px)); color: #c6ccd7; font-weight: 400; -webkit-line-clamp: 3; } .prime .btn { border-radius: calc(10 * var(--px)); height: calc(56 * var(--px)); font-size: calc(17 * var(--px)); } .prime .btn-forte { background: #fff; color: #00050d; box-shadow: none; } .prime .redondo { width: calc(56 * var(--px)); height: calc(56 * var(--px)); background: #ffffff26; } .prime .meta-p { color: #aab2bf; font-weight: 600; font-size: calc(15 * var(--px)); margin-bottom: calc(14 * var(--px)); display: flex; gap: calc(12 * var(--px)); align-items: center; } .prime .meta-p .caixinha { border: 1px solid #aab2bf; padding: 1px calc(6 * var(--px)); border-radius: calc(4 * var(--px)); font-size: calc(13 * var(--px)); } .prime .p-setas .seta-redonda { position: absolute; z-index: 5; top: 45%; width: calc(52 * var(--px)); height: calc(52 * var(--px)); } .prime .p-setas .seta-redonda:first-child { left: calc(20 * var(--px)); } .prime .p-setas .seta-redonda:last-child { right: calc(20 * var(--px)); } .prime .pontos { position: absolute; z-index: 5; bottom: 20%; left: 50%; transform: translateX(-50%); display: flex; gap: calc(8 * var(--px)); } .prime .pontos button { width: calc(8 * var(--px)); height: calc(8 * var(--px)); border-radius: 50%; background: #ffffff55; transition: all .4s var(--curva); } .prime .pontos button.ativo { background: #fff; width: calc(24 * var(--px)); border-radius: calc(6 * var(--px)); } .prime .m-fileira h3 { font-size: calc(21 * var(--px)); display: flex; gap: calc(10 * var(--px)); align-items: center; } .prime .m-fileira h3 .azul { color: #1a98ff; } .prime .m-fileira .trilho { gap: calc(14 * var(--px)); } .prime .m-card { width: clamp(calc(250 * var(--px)), 17vw, calc(330 * var(--px))); transition: transform .4s var(--curva); } .prime .m-card .arte { aspect-ratio: 16/9; border-radius: calc(10 * var(--px)); } .prime .m-card .selo-prime { position: absolute; left: calc(10 * var(--px)); top: calc(10 * var(--px)); width: calc(22 * var(--px)); height: calc(22 * var(--px)); border-radius: 50%; background: #1a98ff; display: grid; place-items: center; font-size: calc(12 * var(--px)); font-weight: 900; } .prime .m-card .card-info { position: absolute; left: 0; right: 0; top: calc(100% - calc(12 * var(--px))); background: #1b2530; padding: calc(22 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)); border-radius: 0 0 calc(10 * var(--px)) calc(10 * var(--px)); opacity: 0; transform: translateY(calc(-10 * var(--px))); transition: all .3s var(--curva); pointer-events: none; z-index: -1; box-shadow: 0 calc(20 * var(--px)) calc(30 * var(--px)) #000a; } .prime .m-card:hover { transform: scale(1.12); z-index: 20; } .prime .m-card:hover .arte { box-shadow: 0 0 0 3px #fff; } .prime .m-card:hover .card-info { opacity: 1; transform: none; } .prime .card-info b { display: block; font-size: calc(15 * var(--px)); margin-bottom: calc(6 * var(--px)); } .prime .card-info .linha { display: flex; gap: calc(10 * var(--px)); align-items: center; color: #aab2bf; font-size: calc(13 * var(--px)); font-weight: 600; } .prime .card-info .linha .play-p { width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; } .prime .card-info .linha .play-p svg { width: calc(14 * var(--px)); } .prime .top10 .m-card { width: clamp(calc(200 * var(--px)), 13vw, calc(250 * var(--px))); display: flex; align-items: flex-end; } .prime .top10 .m-card .numero { font-size: clamp(calc(90 * var(--px)), 7vw, calc(140 * var(--px))); font-weight: 800; line-height: .8; color: #00050d; -webkit-text-stroke: 2px #aab2bf; margin-right: calc(-10 * var(--px)); z-index: 1; } .prime .top10 .m-card .arte { aspect-ratio: 2/3; flex: 1; } /* ===================== APPLE TV ===================== */ .modo.appletv { --m-fundo: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; } .appletv .m-topo { justify-content: center; background: none; } .appletv .m-topo .logo-m { position: absolute; left: var(--margem); height: calc(28 * var(--px)); filter: invert(1); } .appletv .m-topo nav { gap: 2px; padding: calc(5 * var(--px)); border-radius: calc(999 * var(--px)); background: #1c1c1e99; backdrop-filter: blur(calc(30 * var(--px))) saturate(1.8); border: 1px solid #ffffff1a; box-shadow: 0 calc(10 * var(--px)) calc(30 * var(--px)) #0006; } .appletv .m-topo nav a { padding: calc(8 * var(--px)) calc(18 * var(--px)); border-radius: calc(999 * var(--px)); font-weight: 600; font-size: calc(15 * var(--px)); color: #ffffffcc; transition: all .3s var(--curva); } .appletv .m-topo nav a:hover { color: #fff; background: #ffffff14; } .appletv .m-topo nav a.ativo { background: #ffffffe6; color: #000; box-shadow: 0 2px calc(10 * var(--px)) #0004; } .appletv .m-topo .direita { position: absolute; right: var(--margem); } .appletv .m-topo .direita .ic { width: calc(38 * var(--px)); height: calc(38 * var(--px)); border-radius: 50%; background: #1c1c1e99; backdrop-filter: blur(calc(30 * var(--px))); display: grid; place-items: center; border: 1px solid #ffffff1a; } .appletv .m-topo .direita .ic svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); } .appletv .m-heroi { height: 100vh; } .appletv .m-heroi .veu { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, #000 0%, #0000 45%), linear-gradient(90deg, #000a 0%, #0000 50%); } .appletv .m-heroi .info { bottom: 22%; } .appletv .meta-a { color: #ffffffb3; font-size: calc(15 * var(--px)); font-weight: 600; margin-bottom: calc(18 * var(--px)); display: flex; gap: calc(8 * var(--px)); align-items: center; } .appletv .meta-a .caixinha { border: 1px solid #ffffff80; padding: 0 calc(5 * var(--px)); border-radius: calc(4 * var(--px)); font-size: calc(12 * var(--px)); } .appletv .sinopse { font-size: calc(17 * var(--px)); font-weight: 500; color: #ffffffd9; -webkit-line-clamp: 2; } .appletv .btn { border-radius: calc(999 * var(--px)); height: calc(50 * var(--px)); padding: 0 calc(30 * var(--px)); font-size: calc(16 * var(--px)); } .appletv .btn-forte { background: #fff; color: #000; box-shadow: none; } .appletv .redondo { width: calc(50 * var(--px)); height: calc(50 * var(--px)); background: #ffffff26; backdrop-filter: blur(calc(20 * var(--px))); } .appletv .pontos { position: absolute; z-index: 5; bottom: 18%; right: var(--margem); display: flex; gap: calc(8 * var(--px)); } .appletv .pontos button { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: #ffffff55; transition: all .4s var(--curva); } .appletv .pontos button.ativo { background: #fff; transform: scale(1.3); } .appletv .m-fileira h3 { font-size: calc(22 * var(--px)); font-weight: 700; display: flex; align-items: center; gap: calc(6 * var(--px)); } .appletv .m-fileira h3::after { content: "›"; color: #ffffff80; font-size: calc(26 * var(--px)); font-weight: 400; } .appletv .m-fileira .trilho { gap: calc(20 * var(--px)); perspective: calc(900 * var(--px)); } .appletv .m-card { width: clamp(calc(260 * var(--px)), 18vw, calc(360 * var(--px))); transition: transform .5s var(--curva); transform-style: preserve-3d; } .appletv .m-card .arte { aspect-ratio: 16/9; border-radius: calc(14 * var(--px)); box-shadow: 0 calc(10 * var(--px)) calc(24 * var(--px)) calc(-10 * var(--px)) #000; transition: box-shadow .5s; } .appletv .m-card .luz { position: absolute; inset: 0; border-radius: calc(14 * var(--px)); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #ffffff45, transparent 55%); } .appletv .m-card:hover { transform: scale(1.08) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 10; } .appletv .m-card:hover .arte { box-shadow: 0 calc(30 * var(--px)) calc(50 * var(--px)) calc(-14 * var(--px)) #000; } .appletv .m-card:hover .luz { opacity: 1; } .appletv .m-card .legenda { margin-top: calc(12 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; color: #fff; } .appletv .m-card .legenda small { display: block; color: #ffffff80; font-weight: 500; font-size: calc(13.5 * var(--px)); margin-top: 2px; } .appletv .top10 .m-card { width: clamp(calc(260 * var(--px)), 18vw, calc(360 * var(--px))); } .appletv .top10 .legenda { display: flex; gap: calc(14 * var(--px)); align-items: center; } .appletv .top10 .legenda .numero { font-size: calc(32 * var(--px)); font-weight: 700; } /* ===================== CRUNCHYROLL ===================== */ .modo.crunchyroll { --m-fundo: #000; --m-topo-rolou: #23252b; font-family: "Lato", "Helvetica Neue", sans-serif; } .crunchyroll .m-topo { height: calc(60 * var(--px)); background: #23252b; gap: calc(6 * var(--px)); padding-left: calc(20 * var(--px)); } .crunchyroll .m-topo .cr-logo { display: flex; align-items: center; gap: calc(10 * var(--px)); color: #f47521; font-weight: 900; font-size: calc(22 * var(--px)); letter-spacing: -.02em; margin-right: calc(20 * var(--px)); } .crunchyroll .m-topo .cr-logo img { height: calc(32 * var(--px)); filter: brightness(0) saturate(100%) invert(53%) sepia(81%) saturate(2016%) hue-rotate(347deg) brightness(99%) contrast(93%); } .crunchyroll .m-topo nav { gap: 0; height: 100%; } .crunchyroll .m-topo nav a { display: flex; align-items: center; padding: 0 calc(16 * var(--px)); height: 100%; font-weight: 600; color: #dadada; font-size: calc(15 * var(--px)); transition: background .2s, color .2s; } .crunchyroll .m-topo nav a:hover { background: #141519; color: #fff; } .crunchyroll .m-topo nav a.ativo { color: #fff; background: #141519; } .crunchyroll .premium { display: flex; align-items: center; gap: calc(8 * var(--px)); color: #fab818; font-weight: 800; font-size: calc(13 * var(--px)); text-transform: uppercase; line-height: 1.1; } .crunchyroll .premium svg { width: calc(26 * var(--px)); height: calc(26 * var(--px)); } .crunchyroll .m-heroi { height: calc(86 * var(--u)); } .crunchyroll .m-heroi .veu { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, #000 0%, transparent 30%), linear-gradient(90deg, #000 0%, #000c 30%, transparent 70%); } .crunchyroll .meta-c { color: #a0a0a0; font-size: calc(14 * var(--px)); font-weight: 600; margin-bottom: calc(14 * var(--px)); display: flex; gap: calc(8 * var(--px)); align-items: center; } .crunchyroll .meta-c .caixinha { background: #4a4e58; color: #fff; padding: 1px calc(6 * var(--px)); font-size: calc(12 * var(--px)); font-weight: 800; } .crunchyroll .sinopse { font-size: calc(16 * var(--px)); font-weight: 500; color: #dadada; -webkit-line-clamp: 3; } .crunchyroll .btn { border-radius: 0; height: calc(46 * var(--px)); padding: 0 calc(20 * var(--px)); font-size: calc(14 * var(--px)); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } .crunchyroll .btn-forte { background: #f47521; color: #000; box-shadow: none; } .crunchyroll .btn-forte:hover { background: #ff8a3d; } .crunchyroll .btn-borda { width: calc(46 * var(--px)); height: calc(46 * var(--px)); padding: 0; justify-content: center; border: 2px solid #f47521; color: #f47521; } .crunchyroll .btn-borda:hover { background: #f4752122; } .crunchyroll .barras { position: absolute; z-index: 5; bottom: 18%; left: var(--margem); display: flex; gap: calc(8 * var(--px)); } .crunchyroll .barras button { width: calc(50 * var(--px)); height: calc(8 * var(--px)); border-radius: calc(4 * var(--px)); background: #4a4e58; overflow: hidden; position: relative; } .crunchyroll .barras button i { position: absolute; inset: 0; background: #f47521; transform: scaleX(0); transform-origin: left; } .crunchyroll .barras button.ativo i { animation: enche var(--tempo, 8s) linear forwards; } .crunchyroll .m-fileira h3 { font-size: calc(24 * var(--px)); font-weight: 800; } .crunchyroll .m-fileira h3 + p { padding: 0 var(--margem); color: #a0a0a0; margin: calc(-6 * var(--px)) 0 calc(6 * var(--px)); font-size: calc(15 * var(--px)); } .crunchyroll .m-fileira .trilho { gap: calc(16 * var(--px)); } .crunchyroll .m-card { width: clamp(calc(180 * var(--px)), 12.5vw, calc(240 * var(--px))); } .crunchyroll .m-card .arte { aspect-ratio: 2/3; } .crunchyroll .m-card .por-cima { position: absolute; inset: 0; z-index: 3; background: #141519f2; padding: calc(14 * var(--px)); display: flex; flex-direction: column; opacity: 0; transition: opacity .25s; } .crunchyroll .m-card:hover .por-cima { opacity: 1; } .crunchyroll .por-cima b { font-size: calc(16 * var(--px)); margin-bottom: calc(8 * var(--px)); } .crunchyroll .por-cima .estrelas { color: #a0a0a0; font-size: calc(13 * var(--px)); margin-bottom: calc(4 * var(--px)); } .crunchyroll .por-cima .estrelas em { color: #fff; font-style: normal; font-weight: 700; } .crunchyroll .por-cima p { color: #dadada; font-size: calc(13.5 * var(--px)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(8 * var(--px)); } .crunchyroll .por-cima .icones { margin-top: auto; display: flex; gap: calc(14 * var(--px)); color: #f47521; } .crunchyroll .por-cima .icones svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); } .crunchyroll .m-card .nome-c { margin-top: calc(10 * var(--px)); font-weight: 700; font-size: calc(15 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crunchyroll .m-card .sub-c { color: #a0a0a0; font-size: calc(13.5 * var(--px)); margin-top: calc(4 * var(--px)); } .crunchyroll .m-card:hover .nome-c { opacity: 0; } .crunchyroll .faixa-destaque { margin: calc(10 * var(--px)) var(--margem) calc(50 * var(--px)); height: calc(340 * var(--px)); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: #141519; } .crunchyroll .faixa-destaque > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .crunchyroll .faixa-destaque:hover > img { transform: scale(1.05); } .crunchyroll .faixa-destaque .txt { padding: calc(40 * var(--px)); display: flex; flex-direction: column; justify-content: center; gap: calc(14 * var(--px)); } .crunchyroll .faixa-destaque .txt .logo-titulo { max-height: calc(110 * var(--px)); margin: 0; } /* ===================== GENÉRICO (Disney+, Globoplay, Max) ===================== */ .modo.generico { --m-fundo: var(--g-fundo, #0b1026); --m-topo-rolou: var(--g-fundo, #0b1026); } .generico .m-topo .logo-m { height: calc(38 * var(--px)); filter: brightness(0) invert(1); } .generico .m-topo nav a.ativo { color: #fff; border-bottom: 2px solid var(--g-cor); padding-bottom: calc(4 * var(--px)); } .generico .m-heroi .veu { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, var(--g-fundo) 0%, transparent 35%), linear-gradient(90deg, var(--g-fundo) 0%, transparent 60%); } .generico .btn { border-radius: calc(8 * var(--px)); } .generico .btn-forte { background: #fff; color: #000; } .generico .m-card { width: clamp(calc(250 * var(--px)), 17vw, calc(320 * var(--px))); transition: transform .45s var(--mola); } .generico .m-card .arte { aspect-ratio: 16/9; border-radius: calc(10 * var(--px)); box-shadow: 0 calc(10 * var(--px)) calc(20 * var(--px)) calc(-10 * var(--px)) #000; } .generico .m-card:hover { transform: scale(1.06); z-index: 5; } .generico .m-card:hover .arte { box-shadow: 0 0 0 3px #fff, 0 calc(20 * var(--px)) calc(40 * var(--px)) calc(-10 * var(--px)) #000; } .generico .m-fileira .trilho { gap: calc(16 * var(--px)); } .generico .m-fileira h3 { font-size: calc(20 * var(--px)); } .generico .top10 .m-card { width: clamp(calc(220 * var(--px)), 14vw, calc(270 * var(--px))); display: flex; align-items: flex-end; } .generico .top10 .m-card .numero { font-size: calc(120 * var(--px)); font-weight: 900; line-height: .8; -webkit-text-stroke: 2px #fff8; color: transparent; margin-right: calc(-8 * var(--px)); } .generico .top10 .m-card .arte { aspect-ratio: 2/3; flex: 1; } /* janela de detalhe dentro dos streamings */ .m-janela { position: fixed; inset: 0; z-index: 150; background: #000b; display: grid; justify-items: center; overflow-y: auto; padding: calc(40 * var(--px)) 0; animation: aparece .3s; } .m-janela .caixa { width: min(calc(880 * var(--px)), 94vw); background: var(--j-fundo, #181818); border-radius: calc(10 * var(--px)); overflow: hidden; box-shadow: 0 calc(30 * var(--px)) calc(80 * var(--px)) #000; animation: janelaEntra .5s var(--curva); align-self: start; } @keyframes janelaEntra { from { transform: scale(.88) translateY(calc(40 * var(--px))); opacity: 0; } } .m-janela .topo-j { position: relative; aspect-ratio: 16/9; } .m-janela .topo-j > img { width: 100%; height: 100%; object-fit: cover; } .m-janela .topo-j::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--j-fundo, #181818) 0%, transparent 50%); } .m-janela .topo-j .sobre { position: absolute; z-index: 2; left: calc(48 * var(--px)); bottom: calc(40 * var(--px)); width: 60%; } .m-janela .topo-j .sobre .logo-titulo { max-height: calc(120 * var(--px)); margin-bottom: calc(20 * var(--px)); } .m-janela .fechar { position: absolute; z-index: 3; top: calc(16 * var(--px)); right: calc(16 * var(--px)); width: calc(38 * var(--px)); height: calc(38 * var(--px)); border-radius: 50%; background: var(--j-fundo, #181818); display: grid; place-items: center; } .m-janela .fechar svg { width: calc(20 * var(--px)); } .m-janela .corpo { padding: calc(10 * var(--px)) calc(48 * var(--px)) calc(40 * var(--px)); display: grid; grid-template-columns: 2fr 1fr; gap: calc(30 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.5; } .m-janela .corpo .cinza { color: #777; } .m-janela .corpo .meta-j { display: flex; gap: calc(10 * var(--px)); align-items: center; margin-bottom: calc(14 * var(--px)); font-weight: 600; color: #bcbcbc; } .m-janela .semelhantes { padding: 0 calc(48 * var(--px)) calc(48 * var(--px)); } .m-janela .semelhantes h4 { font-size: calc(22 * var(--px)); margin-bottom: calc(16 * var(--px)); } .m-janela .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--px)); } .m-janela .grade .item { background: #2f2f2f; border-radius: calc(6 * var(--px)); overflow: hidden; cursor: pointer; transition: transform .3s var(--curva); } .m-janela .grade .item:hover { transform: translateY(calc(-4 * var(--px))); } .m-janela .grade .item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .m-janela .grade .item div { padding: calc(12 * var(--px)); font-size: calc(13 * var(--px)); color: #d2d2d2; } .m-janela .grade .item b { display: block; color: #fff; margin-bottom: calc(6 * var(--px)); font-size: calc(14 * var(--px)); } @media (max-width: 900px) { .topo nav { display: none; } .heroi .info { width: calc(100% - 2 * var(--margem)); } .vitrine { grid-template-columns: 1fr; padding-right: var(--margem); } .detalhe .conteudo { grid-template-columns: 1fr; } .detalhe .lado-dir { padding-top: 0; } .m-heroi .info { width: calc(100% - 2 * var(--margem)); } .m-topo nav { display: none; } .netflix .sinopse, .netflix .btn { font-size: calc(15 * var(--px)); } .m-fileira h3 { font-size: calc(18 * var(--px)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; } } /* Netflix: depois de alguns segundos o logo encolhe e a sinopse some (igual ao app) */ .netflix .m-heroi .info .logo-titulo { transform-origin: left bottom; transition: transform 1.2s var(--curva); } .netflix .m-heroi .info .sinopse, .netflix .m-heroi .info .top-hoje { transition: opacity 1s, max-height 1.2s var(--curva), margin 1.2s var(--curva); max-height: calc(200 * var(--px)); } .netflix .m-heroi .info.reduz .logo-titulo { transform: scale(.72); } .netflix .m-heroi .info.reduz .sinopse, .netflix .m-heroi .info.reduz .top-hoje { opacity: 0; max-height: 0; margin: 0; } /* espaço para o card crescer (Netflix/Prime) sem ser cortado pela fileira */ .netflix .m-fileira .trilho, .prime .m-fileira .trilho { padding-top: calc(70 * var(--px)); padding-bottom: calc(150 * var(--px)); margin: calc(-60 * var(--px)) 0 calc(-140 * var(--px)); pointer-events: none; } .netflix .m-fileira .m-card, .prime .m-fileira .m-card { pointer-events: auto; } .m-fileira:hover { z-index: 6; } .netflix .m-fileira .rolar, .prime .m-fileira .rolar { top: calc(44 * var(--px)); bottom: calc(30 * var(--px)); } .prime .top10 .m-card .numero, .generico .top10 .m-card .numero { flex: 0 0 38%; text-align: right; } .prime .top10 .m-card .arte, .generico .top10 .m-card .arte { flex: 0 0 62%; } .appletv .m-topo.rolou { background: linear-gradient(#000e, #0000); } /* ===================== TRANSIÇÃO NOVA (logo em destaque) ===================== */ .cena { position: fixed; inset: 0; pointer-events: none; } .cena-fundo { position: absolute; inset: 0; opacity: 0; } .halo { position: absolute; left: 50%; top: 50%; width: 90vmax; height: 90vmax; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--cor) 38%, transparent) 0%, color-mix(in srgb, var(--cor) 10%, transparent) 30%, transparent 60%); } .voo { position: fixed; display: flex; align-items: center; justify-content: center; transform-origin: 0 0; will-change: transform; } .voo-logo { filter: drop-shadow(0 calc(10 * var(--px)) calc(40 * var(--px)) #0009); } .voo-brilho { position: absolute; inset: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: linear-gradient(105deg, transparent 38%, #ffffffd0 50%, transparent 62%); background-size: 250% 100%; background-position: 150% 0; mix-blend-mode: screen; } .voo-n { position: absolute; left: 50%; top: 50%; height: calc(34 * var(--u)); opacity: 0; transform: translate(-50%, -50%); } .voo-onda { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #f47521 0%, #f47521 30%, #f4752100 70%); } .voo-luz { position: absolute; left: 50%; top: calc(50% + calc(15 * var(--u))); width: 56vw; height: 2px; background: linear-gradient(90deg, transparent, #1a98ff, #9fd4ff, #1a98ff, transparent); box-shadow: 0 0 calc(24 * var(--px)) #1a98ff; } .modo.escondido { visibility: hidden; } .modo.chegando .m-topo { animation: topoDesce .9s .35s cubic-bezier(.2,.8,.2,1) backwards; } .modo.chegando .m-heroi .slide { animation: assenta 1.8s cubic-bezier(.2,.8,.2,1); } .modo.chegando .m-fileira, .modo.chegando .faixa-destaque { animation: fileiraSobe 1s cubic-bezier(.2,.8,.2,1) backwards; } .modo.chegando .m-fileiras > :nth-child(1) { animation-delay: .5s; } .modo.chegando .m-fileiras > :nth-child(2) { animation-delay: .62s; } .modo.chegando .m-fileiras > :nth-child(3) { animation-delay: .74s; } @keyframes topoDesce { from { transform: translateY(-100%); opacity: 0; } } @keyframes assenta { from { transform: scale(1.12); filter: brightness(.75); } } @keyframes fileiraSobe { from { transform: translateY(calc(80 * var(--px))); opacity: 0; } } /* capa cresce inteira, sem cortar em cima */ .fileira .trilho { padding-top: calc(40 * var(--px)); margin-top: calc(-26 * var(--px)); } /* faixa LEGENDADO no degradê do app dele */ .capa .faixa { padding: calc(6 * var(--px)) calc(10 * var(--px)); background: linear-gradient(90deg, #4b6cf0, #9a46e8); font-size: calc(12.5 * var(--px)); letter-spacing: .03em; } /* vitrine só com as capas do streaming escolhido (sem bloco repetindo a logo) */ .vitrine { display: block; min-height: 0; padding: calc(6 * var(--px)) 0 calc(20 * var(--px)); } .vitrine .fileira .trilho, .vitrine .fileira-capas .trilho { padding-left: var(--margem); } .vitrine.trocando .fileira-capas { opacity: 0; transform: translateX(calc(-24 * var(--px))); } /* ===================== DESCRIÇÕES (uma por streaming) ===================== */ .cinza { color: #8c8c8c; } .m-pagina { position: fixed; inset: 0; z-index: 99; overflow-y: auto; overflow-x: hidden; animation: paginaEntra .55s cubic-bezier(.2,.8,.2,1); } .m-pagina.saindo { animation: paginaSai .38s ease-in forwards; } @keyframes paginaEntra { from { opacity: 0; } } @keyframes paginaSai { to { opacity: 0; } } .m-pagina .revela { opacity: 0; transform: translateY(calc(30 * var(--px))); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .m-pagina .revela.visto { opacity: 1; transform: none; } .abas { position: relative; display: flex; gap: calc(34 * var(--px)); border-bottom: 1px solid #ffffff1f; margin-bottom: calc(26 * var(--px)); } .abas button { padding: calc(14 * var(--px)) 0; font-weight: 700; font-size: calc(17 * var(--px)); color: #ffffff99; transition: color .25s; } .abas button.ativo, .abas button:hover { color: #fff; } .abas-risco { position: absolute; left: 0; bottom: -1px; height: 3px; background: #fff; border-radius: 3px; transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); } .aba.entra-aba { animation: abaEntra .5s cubic-bezier(.2,.8,.2,1); } @keyframes abaEntra { from { opacity: 0; transform: translateY(calc(14 * var(--px))); } } /* ---- Netflix: janela ---- */ .m-janela.nfx { background: #0000; padding: calc(30 * var(--px)) 0; } .nfx .caixa { width: min(calc(850 * var(--px)), 94vw); background: #181818; border-radius: calc(8 * var(--px)); animation: none; overflow: visible; } .nfx .topo-j { border-radius: calc(8 * var(--px)) calc(8 * var(--px)) 0 0; overflow: hidden; } .nfx .topo-j::after { background: linear-gradient(0deg, #181818 0%, #18181800 45%); } .nfx .topo-j .sobre { left: calc(48 * var(--px)); bottom: calc(48 * var(--px)); width: calc(100% - calc(96 * var(--px))); } .nfx .topo-j .sobre .logo-titulo { max-width: 46%; max-height: calc(130 * var(--px)); margin-bottom: calc(24 * var(--px)); } .nfx .fechar { background: #181818; width: calc(36 * var(--px)); height: calc(36 * var(--px)); } .botoes-n { display: flex; align-items: center; gap: calc(10 * var(--px)); } .btn-n { display: flex; align-items: center; gap: calc(10 * var(--px)); height: calc(44 * var(--px)); padding: 0 calc(26 * var(--px)) 0 calc(20 * var(--px)); border-radius: calc(4 * var(--px)); background: #fff; color: #000; font-weight: 700; font-size: calc(17 * var(--px)); transition: background .2s; } .btn-n:hover { background: #ffffffbf; } .btn-n svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } .circ { width: calc(42 * var(--px)); height: calc(42 * var(--px)); flex: 0 0 auto; border-radius: 50%; border: 2px solid #ffffff80; background: #2a2a2a99; display: grid; place-items: center; transition: border-color .2s, transform .25s; } .circ:hover { border-color: #fff; transform: scale(1.06); } .circ svg { width: calc(20 * var(--px)); height: calc(20 * var(--px)); } .nfx .corpo { padding: 0 calc(48 * var(--px)) calc(10 * var(--px)); grid-template-columns: 2fr 1fr; gap: calc(32 * var(--px)); font-size: calc(15 * var(--px)); color: #fff; } .nfx .meta-j { display: flex; gap: calc(8 * var(--px)); align-items: center; flex-wrap: wrap; margin-bottom: calc(8 * var(--px)); color: #bcbcbc; font-weight: 500; } .nfx .rel { color: #46d369; font-weight: 700; } .nfx .cx { border: 1px solid #ffffff66; border-radius: 3px; padding: 0 calc(5 * var(--px)); font-size: calc(11 * var(--px)); line-height: calc(16 * var(--px)); color: #fff; } .cx-idade { display: inline-grid; place-items: center; min-width: calc(22 * var(--px)); height: calc(22 * var(--px)); padding: 0 calc(4 * var(--px)); border-radius: 3px; font-weight: 800; font-size: calc(12 * var(--px)); color: #fff; } .cx-idade.L { background: #0c9447; } .cx-idade.i10 { background: #0f7dc2; } .cx-idade.i12 { background: #f8c411; color: #000; } .cx-idade.i14 { background: #e67824; } .cx-idade.i16 { background: #db2827; } .cx-idade.i18 { background: #000; border: 1px solid #fff5; } .nfx .top-hoje { display: flex; align-items: center; gap: calc(10 * var(--px)); font-weight: 700; font-size: calc(19 * var(--px)); margin: calc(14 * var(--px)) 0; } .nfx .selo-top { width: calc(28 * var(--px)); height: calc(30 * var(--px)); background: #e50914; border-radius: 3px; display: grid; place-items: center; font-size: calc(7.5 * var(--px)); font-weight: 900; line-height: 1; text-align: center; } .nfx .selo-top b { display: block; font-size: calc(12 * var(--px)); } .nfx .lado-n p { margin-bottom: calc(12 * var(--px)); font-size: calc(14 * var(--px)); line-height: 1.4; } .nfx .lado-n i { font-style: italic; color: #fff; } .secao-n { padding: calc(24 * var(--px)) calc(48 * var(--px)) calc(10 * var(--px)); } .secao-n h4 { font-size: calc(24 * var(--px)); font-weight: 700; margin-bottom: calc(18 * var(--px)); } .cab-n { display: flex; justify-content: space-between; align-items: center; } .temp-n { display: flex; gap: calc(10 * var(--px)); align-items: center; border: 1px solid #4d4d4d; background: #242424; border-radius: calc(4 * var(--px)); padding: calc(8 * var(--px)) calc(16 * var(--px)); font-weight: 700; font-size: calc(17 * var(--px)); } .temp-n svg { width: calc(18 * var(--px)); } .sub-n { font-size: calc(15 * var(--px)); margin: 0 0 calc(14 * var(--px)); display: flex; gap: calc(8 * var(--px)); align-items: center; } .ep-n { display: flex; align-items: center; gap: 0; padding: calc(16 * var(--px)) calc(28 * var(--px)) calc(16 * var(--px)) 0; border-bottom: 1px solid #404040; border-radius: calc(4 * var(--px)); cursor: pointer; transition: background .2s; } .ep-n.atual { background: #333; } .ep-n:hover { background: #333; } .ep-n .num { flex: 0 0 calc(64 * var(--px)); text-align: center; font-size: calc(24 * var(--px)); color: #d2d2d2; } .ep-n .foto { position: relative; flex: 0 0 calc(130 * var(--px)); aspect-ratio: 16/9; border-radius: calc(4 * var(--px)); overflow: hidden; margin-right: calc(18 * var(--px)); } .ep-n .foto img { width: 100%; height: 100%; object-fit: cover; } .ep-n .play-ep { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s; } .ep-n .play-ep svg { width: calc(38 * var(--px)); height: calc(38 * var(--px)); padding: calc(9 * var(--px)); border-radius: 50%; border: 1px solid #fff; background: #0007; } .ep-n:hover .play-ep { opacity: 1; } .ep-n .barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff55; } .ep-n .barra b { display: block; width: 35%; height: 100%; background: #e50914; } .ep-n .txt { flex: 1; min-width: 0; } .ep-n .lin { display: flex; justify-content: space-between; gap: calc(12 * var(--px)); margin-bottom: calc(6 * var(--px)); font-size: calc(16 * var(--px)); } .ep-n .txt p { font-size: calc(14 * var(--px)); color: #d2d2d2; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nfx .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--px)); } .nfx .grade .item { background: #2f2f2f; border-radius: calc(4 * var(--px)); overflow: hidden; cursor: pointer; transition: transform .25s; } .nfx .grade .item:hover { transform: none; } .nfx .img-g { position: relative; aspect-ratio: 16/9; } .nfx .img-g > img:first-child { width: 100%; height: 100%; object-fit: cover; } .nfx .dur-g { position: absolute; top: calc(8 * var(--px)); right: calc(8 * var(--px)); font-weight: 700; font-size: calc(14 * var(--px)); text-shadow: 0 1px calc(4 * var(--px)) #000; } .nfx .logo-g { position: absolute; left: calc(10 * var(--px)); bottom: calc(8 * var(--px)); max-width: 60%; max-height: 40%; object-fit: contain; filter: drop-shadow(0 1px calc(6 * var(--px)) #000); } .nfx .txt-g { padding: calc(14 * var(--px)); } .nfx .lin-g { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(8 * var(--px)); margin-bottom: calc(12 * var(--px)); font-size: calc(14 * var(--px)); } .nfx .lin-g > div > div { display: flex; gap: calc(6 * var(--px)); align-items: center; margin-top: calc(6 * var(--px)); color: #bcbcbc; } .nfx .txt-g p { font-size: calc(13.5 * var(--px)); color: #d2d2d2; line-height: 1.45; } .nfx .txt-g .circ { width: calc(36 * var(--px)); height: calc(36 * var(--px)); } .sobre-n { padding-bottom: calc(40 * var(--px)); border-top: 2px solid #404040; margin: calc(24 * var(--px)) calc(48 * var(--px)) 0; padding-left: 0; padding-right: 0; } .sobre-n h4 { font-weight: 400; } .sobre-n h4 b { font-weight: 700; } .sobre-n p { font-size: calc(14 * var(--px)); margin-bottom: calc(10 * var(--px)); line-height: 1.5; display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); align-items: center; } /* ---- Prime Video: página ---- */ .pv { background: #00050d; font-family: "Amazon Ember", "Inter", -apple-system, sans-serif; } .pv-heroi { position: relative; min-height: 100vh; display: flex; align-items: center; } .pv-fundo { position: absolute; inset: 0 0 0 30%; overflow: hidden; } .pv-fundo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s linear forwards; } .pv-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #00050d 0%, #00050de0 18%, #00050d00 55%), linear-gradient(0deg, #00050d 0%, #00050d00 30%); } .pv-volta { position: absolute; z-index: 3; top: calc(90 * var(--px)); left: var(--margem); width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; background: #ffffff1f; display: grid; place-items: center; transition: background .2s; } .pv-volta:hover { background: #ffffff38; } .pv-volta svg { width: calc(20 * var(--px)); } .pv-info { position: relative; z-index: 2; width: min(calc(620 * var(--px)), 48vw); margin-left: var(--margem); padding-top: calc(70 * var(--px)); } .pv-info > * { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; } .pv-info > *:nth-child(2) { animation-delay: .06s; } .pv-info > *:nth-child(3) { animation-delay: .12s; } .pv-info > *:nth-child(4) { animation-delay: .18s; } .pv-info > *:nth-child(5) { animation-delay: .24s; } .pv-info > *:nth-child(6) { animation-delay: .3s; } .pv-info .logo-titulo { max-height: calc(170 * var(--px)); max-width: calc(460 * var(--px)); margin-bottom: calc(24 * var(--px)); } .pv-meta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); align-items: center; color: #aab2bf; font-weight: 600; font-size: calc(15 * var(--px)); margin-bottom: calc(14 * var(--px)); } .pv-meta .imdb { color: #fff; } .pv .cx { border: 1px solid #aab2bf; border-radius: calc(4 * var(--px)); padding: 0 calc(6 * var(--px)); font-size: calc(12.5 * var(--px)); line-height: calc(20 * var(--px)); } .pv .incluido { display: flex; align-items: center; gap: calc(8 * var(--px)); font-weight: 700; font-size: calc(16 * var(--px)); margin-bottom: calc(22 * var(--px)); } .pv .incluido i { width: calc(22 * var(--px)); height: calc(22 * var(--px)); border-radius: 50%; background: #1a98ff; display: grid; place-items: center; font-style: normal; font-size: calc(13 * var(--px)); } .pv-botoes { display: flex; align-items: flex-start; gap: calc(18 * var(--px)); margin-bottom: calc(26 * var(--px)); } .pv-play { display: flex; align-items: center; gap: calc(12 * var(--px)); height: calc(56 * var(--px)); padding: 0 calc(30 * var(--px)) 0 calc(24 * var(--px)); border-radius: calc(10 * var(--px)); background: #fff; color: #00050d; font-weight: 700; font-size: calc(17 * var(--px)); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .pv-play:hover { transform: scale(1.05); } .pv-play svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } .pv-circ { display: grid; justify-items: center; gap: calc(6 * var(--px)); } .pv-circ span { width: calc(56 * var(--px)); height: calc(56 * var(--px)); border-radius: 50%; background: #ffffff26; display: grid; place-items: center; transition: background .2s, transform .3s cubic-bezier(.34,1.56,.64,1); } .pv-circ:hover span { background: #fff; color: #00050d; transform: scale(1.08); } .pv-circ svg { width: calc(22 * var(--px)); height: calc(22 * var(--px)); } .pv-circ em { font-style: normal; font-size: calc(12 * var(--px)); color: #aab2bf; opacity: 0; transform: translateY(calc(-4 * var(--px))); transition: all .25s; } .pv-circ:hover em { opacity: 1; transform: none; } .pv-sinopse { font-size: calc(17 * var(--px)); line-height: 1.55; color: #e5e8ec; margin-bottom: calc(18 * var(--px)); } .pv-gen { display: flex; gap: calc(8 * var(--px)); flex-wrap: wrap; } .pv-gen a { color: #aab2bf; font-size: calc(14 * var(--px)); font-weight: 600; } .pv-gen a + a::before { content: "·"; margin-right: calc(8 * var(--px)); } .pv-corpo { padding: calc(10 * var(--px)) var(--margem) calc(120 * var(--px)); } .pv .abas button { font-size: calc(19 * var(--px)); } .pv-h { font-size: calc(21 * var(--px)); margin-bottom: calc(16 * var(--px)); } .pv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280 * var(--px)), 1fr)); gap: calc(40 * var(--px)) calc(16 * var(--px)); } .pv-grade .m-card { width: auto; } .pv-temp { display: inline-flex; gap: calc(8 * var(--px)); align-items: center; font-weight: 700; font-size: calc(18 * var(--px)); margin-bottom: calc(20 * var(--px)); } .pv-temp svg { width: calc(18 * var(--px)); } .pv-ep { display: grid; grid-template-columns: calc(300 * var(--px)) 1fr; gap: calc(24 * var(--px)); padding: calc(18 * var(--px)) 0; border-bottom: 1px solid #ffffff14; max-width: calc(1100 * var(--px)); } .pv-ep .foto { position: relative; aspect-ratio: 16/9; border-radius: calc(10 * var(--px)); overflow: hidden; } .pv-ep .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .pv-ep:hover .foto img { transform: scale(1.05); } .pv-ep .play-p { position: absolute; left: calc(12 * var(--px)); bottom: calc(12 * var(--px)); width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; } .pv-ep .play-p svg { width: calc(16 * var(--px)); } .pv-ep b { font-size: calc(17 * var(--px)); } .pv-ep-meta { color: #aab2bf; font-size: calc(14 * var(--px)); font-weight: 600; margin: calc(6 * var(--px)) 0 calc(8 * var(--px)); display: flex; gap: calc(10 * var(--px)); align-items: center; } .pv-ep p { color: #c6ccd7; line-height: 1.5; font-size: calc(15 * var(--px)); } .pv-det { display: grid; grid-template-columns: calc(220 * var(--px)) 1fr; gap: calc(18 * var(--px)) calc(24 * var(--px)); max-width: calc(900 * var(--px)); font-size: calc(16 * var(--px)); } .pv-det dt { color: #aab2bf; font-weight: 600; } .pv-det dd a { color: #1a98ff; } .pv-aviso { color: #aab2bf; font-size: calc(13 * var(--px)); margin-top: calc(30 * var(--px)); } /* ---- Apple TV: página ---- */ .at { background: #000; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; } .at-heroi { position: relative; height: 100vh; min-height: calc(640 * var(--px)); overflow: hidden; } .at-fundo { position: absolute; inset: 0; } .at-fundo img { width: 100%; height: 100%; object-fit: cover; animation: atAssenta 2.4s cubic-bezier(.2,.8,.2,1); } @keyframes atAssenta { from { transform: scale(1.12); filter: blur(calc(10 * var(--px))) brightness(.6); } } .at-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, #000d 18%, #0000 55%); } .at-volta { position: absolute; z-index: 3; top: calc(90 * var(--px)); left: var(--margem); width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; background: #1c1c1e99; backdrop-filter: blur(calc(30 * var(--px))) saturate(1.8); border: 1px solid #ffffff22; display: grid; place-items: center; } .at-volta svg { width: calc(20 * var(--px)); } .at-baixo { position: absolute; z-index: 2; left: var(--margem); right: var(--margem); bottom: calc(56 * var(--px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(60 * var(--px)); align-items: end; } .at-baixo > * { animation: sobe .9s .2s cubic-bezier(.2,.8,.2,1) backwards; } .at-baixo > *:nth-child(2) { animation-delay: .32s; } .at-esq .logo-titulo { max-height: calc(190 * var(--px)); max-width: calc(520 * var(--px)); margin-bottom: calc(28 * var(--px)); } .at-botoes { display: flex; gap: calc(12 * var(--px)); align-items: center; } .at-play { display: flex; align-items: center; gap: calc(10 * var(--px)); height: calc(52 * var(--px)); padding: 0 calc(34 * var(--px)); border-radius: calc(12 * var(--px)); background: #fff; color: #000; font-weight: 600; font-size: calc(17 * var(--px)); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .at-play:hover { transform: scale(1.05); } .at-play svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); } .at-circ { width: calc(52 * var(--px)); height: calc(52 * var(--px)); border-radius: 50%; background: #ffffff2e; backdrop-filter: blur(calc(30 * var(--px))); display: grid; place-items: center; transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .at-circ:hover { transform: scale(1.1); } .at-circ svg { width: calc(22 * var(--px)); } .at-incl { display: block; color: #ffffffa6; font-size: calc(14 * var(--px)); margin-top: calc(12 * var(--px)); } .at-dir p { font-size: calc(17 * var(--px)); line-height: 1.45; color: #ffffffe0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(14 * var(--px)); } .at-meta { display: flex; flex-wrap: wrap; gap: calc(7 * var(--px)); align-items: center; color: #ffffffa6; font-size: calc(14 * var(--px)); font-weight: 600; margin-bottom: calc(10 * var(--px)); } .at .cx { border: 1px solid #ffffff73; border-radius: calc(4 * var(--px)); padding: 0 calc(5 * var(--px)); font-size: calc(11 * var(--px)); line-height: calc(17 * var(--px)); } .at-elenco { color: #ffffffa6; font-size: calc(14 * var(--px)); } .at-elenco b { color: #fff; font-weight: 600; margin-right: calc(6 * var(--px)); } .at-corpo { padding: calc(20 * var(--px)) 0 calc(140 * var(--px)); } .at-corpo section { margin-bottom: calc(44 * var(--px)); } .at-corpo h3 { padding: 0 var(--margem); font-size: calc(22 * var(--px)); font-weight: 700; margin-bottom: calc(14 * var(--px)); } .at-corpo h3 span { color: #ffffff80; font-weight: 400; } .at-linha { display: flex; gap: calc(20 * var(--px)); overflow-x: auto; padding: calc(10 * var(--px)) var(--margem) calc(24 * var(--px)); perspective: calc(900 * var(--px)); } .at-linha .m-card { width: clamp(calc(260 * var(--px)), 18vw, calc(340 * var(--px))); flex: 0 0 auto; position: relative; cursor: pointer; transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; } .at-linha .m-card .arte { aspect-ratio: 16/9; border-radius: calc(14 * var(--px)); overflow: hidden; position: relative; background: #222; } .at-linha .m-card .arte > img:first-child { width: 100%; height: 100%; object-fit: cover; } .at-linha .m-card .luz { position: absolute; inset: 0; height: calc(100% * 9 / 16); border-radius: calc(14 * var(--px)); pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #ffffff45, transparent 55%); } .at-linha .m-card:hover { transform: scale(1.06) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 5; } .at-linha .m-card:hover .luz { opacity: 1; } .at-linha .m-card .legenda { margin-top: calc(12 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; } .at-linha .m-card .legenda small { display: block; color: #ffffff80; font-weight: 500; font-size: calc(13.5 * var(--px)); margin-top: 2px; } .at-ep, .at-trailer { flex: 0 0 auto; width: clamp(calc(280 * var(--px)), 20vw, calc(380 * var(--px))); cursor: pointer; } .at-ep .foto, .at-trailer .foto { position: relative; aspect-ratio: 16/9; border-radius: calc(14 * var(--px)); overflow: hidden; margin-bottom: calc(12 * var(--px)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; } .at-ep:hover .foto, .at-trailer:hover .foto { transform: scale(1.04); box-shadow: 0 calc(24 * var(--px)) calc(40 * var(--px)) calc(-14 * var(--px)) #000; } .at-ep .foto img, .at-trailer .foto img { width: 100%; height: 100%; object-fit: cover; } .at-ep small, .at-trailer small { display: block; font-size: calc(12 * var(--px)); font-weight: 700; color: #ffffff80; letter-spacing: .04em; } .at-ep b, .at-trailer b { display: block; font-size: calc(15.5 * var(--px)); margin: 3px 0 calc(4 * var(--px)); } .at-ep p { font-size: calc(14 * var(--px)); color: #ffffffa6; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(6 * var(--px)); } .at-tplay { position: absolute; left: calc(14 * var(--px)); bottom: calc(14 * var(--px)); width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; background: #ffffffd9; color: #000; display: grid; place-items: center; } .at-tplay svg { width: calc(16 * var(--px)); } .at-pessoas { gap: calc(28 * var(--px)); } .pessoa { flex: 0 0 auto; width: calc(130 * var(--px)); text-align: center; } .pessoa .rosto { width: calc(130 * var(--px)); height: calc(130 * var(--px)); border-radius: 50%; overflow: hidden; background: #2c2c2e; display: grid; place-items: center; margin-bottom: calc(12 * var(--px)); transition: transform .4s cubic-bezier(.34,1.56,.64,1); } .pessoa:hover .rosto { transform: scale(1.07); } .pessoa .rosto img { width: 100%; height: 100%; object-fit: cover; } .pessoa .rosto span { font-size: calc(36 * var(--px)); font-weight: 600; color: #ffffff80; } .pessoa b { display: block; font-size: calc(14.5 * var(--px)); font-weight: 600; } .pessoa small { color: #ffffff80; font-size: calc(13 * var(--px)); } .at-info { padding: 0 var(--margem); } .at-info h3 { padding: 0; } .at-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: calc(30 * var(--px)); padding: calc(26 * var(--px)) calc(28 * var(--px)); border-radius: calc(16 * var(--px)); background: #1c1c1e; } .at-grade small { display: block; color: #ffffff80; font-size: calc(13 * var(--px)); font-weight: 600; margin-bottom: 3px; } .at-grade p { font-size: calc(15 * var(--px)); margin-bottom: calc(14 * var(--px)); line-height: 1.4; } .at-grade b { display: block; margin-bottom: calc(6 * var(--px)); font-size: calc(17 * var(--px)); } /* ---- Crunchyroll: página da série ---- */ .cr { background: #000; font-family: "Lato", "Helvetica Neue", sans-serif; padding-top: calc(60 * var(--px)); } .cr-heroi { position: relative; height: calc(62 * var(--u)); min-height: calc(420 * var(--px)); overflow: hidden; } .cr-heroi > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; animation: kenburns 22s linear forwards; } .cr-heroi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, #0000 50%), linear-gradient(90deg, #000a 0%, #0000 45%); } .cr-heroi .logo-titulo { position: absolute; z-index: 2; left: var(--margem); bottom: calc(40 * var(--px)); max-height: calc(150 * var(--px)); max-width: calc(420 * var(--px)); margin: 0; animation: sobe .8s .15s cubic-bezier(.2,.8,.2,1) backwards; } .cr-volta { position: absolute; z-index: 3; top: calc(20 * var(--px)); left: var(--margem); width: calc(42 * var(--px)); height: calc(42 * var(--px)); background: #000a; display: grid; place-items: center; color: #fff; } .cr-volta:hover { color: #f47521; } .cr-volta svg { width: calc(22 * var(--px)); } .cr-corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: calc(60 * var(--px)); padding: calc(10 * var(--px)) var(--margem) calc(40 * var(--px)); } .cr-esq > * { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; } .cr-esq > *:nth-child(2) { animation-delay: .05s; } .cr-esq > *:nth-child(3) { animation-delay: .1s; } .cr-esq > *:nth-child(4) { animation-delay: .15s; } .cr-esq > *:nth-child(5) { animation-delay: .2s; } .cr-esq h1 { font-size: calc(34 * var(--px)); font-weight: 900; margin-bottom: calc(12 * var(--px)); letter-spacing: -.01em; } .cr .cx { display: inline-block; background: #4a4e58; color: #fff; padding: 1px calc(6 * var(--px)); font-size: calc(12 * var(--px)); font-weight: 800; } .cr-tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)); align-items: center; color: #a0a0a0; font-size: calc(14 * var(--px)); font-weight: 600; margin-bottom: calc(14 * var(--px)); } .cr-tags a, .cr-dir dd a { color: #dadada; background: #23252b; padding: 3px calc(10 * var(--px)); font-size: calc(13 * var(--px)); transition: color .2s, background .2s; cursor: pointer; } .cr-tags a:hover, .cr-dir dd a:hover { background: #2f3138; color: #fff; } .cr-nota { display: flex; align-items: center; gap: calc(10 * var(--px)); margin-bottom: calc(22 * var(--px)); font-size: calc(15 * var(--px)); } .cr-nota .est i { font-style: normal; color: #4a4e58; font-size: calc(20 * var(--px)); } .cr-nota .est i.cheia { color: #f47521; } .cr-nota .est i.meia { background: linear-gradient(90deg, #f47521 50%, #4a4e58 50%); -webkit-background-clip: text; color: transparent; } .cr-nota .sep { width: 1px; height: calc(18 * var(--px)); background: #4a4e58; } .cr-botoes { display: flex; gap: calc(10 * var(--px)); margin-bottom: calc(22 * var(--px)); } .cr .btn { border-radius: 0; height: calc(46 * var(--px)); padding: 0 calc(20 * var(--px)); font-size: calc(14 * var(--px)); font-weight: 900; text-transform: uppercase; } .cr .btn::after { display: none; } .cr .btn:hover { transform: none; } .cr .btn-forte { background: #f47521; color: #000; box-shadow: none; } .cr .btn-forte:hover { background: #ff8a3d; } .cr .btn-borda { width: calc(46 * var(--px)); padding: 0; justify-content: center; border: 2px solid #f47521; color: #f47521; } .cr .btn-borda:hover { background: #f4752122; } .cr-sinopse { color: #dadada; font-size: calc(16 * var(--px)); line-height: 1.6; max-width: calc(780 * var(--px)); } .cr-mais { margin-top: calc(14 * var(--px)); color: #a0a0a0; font-weight: 900; font-size: calc(14 * var(--px)); text-transform: uppercase; letter-spacing: .03em; transition: color .2s; } .cr-mais:hover { color: #fff; } .cr-dir { border-left: 1px solid #23252b; padding-left: calc(30 * var(--px)); font-size: calc(14.5 * var(--px)); animation: sobe .7s .25s cubic-bezier(.2,.8,.2,1) backwards; } .cr-dir dt { color: #fff; font-weight: 800; margin-top: calc(16 * var(--px)); } .cr-dir dt:first-child { margin-top: 0; } .cr-dir dd { color: #a0a0a0; margin-top: calc(4 * var(--px)); line-height: 1.5; display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); align-items: center; } .cr-eps { padding: calc(20 * var(--px)) var(--margem) calc(40 * var(--px)); border-top: 1px solid #23252b; } .cr-eps-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(24 * var(--px)); } .cr-temp { display: flex; gap: calc(10 * var(--px)); align-items: center; font-size: calc(20 * var(--px)); font-weight: 900; } .cr-temp svg { width: calc(22 * var(--px)); } .cr-ord { display: flex; gap: calc(24 * var(--px)); color: #a0a0a0; font-weight: 900; font-size: calc(14 * var(--px)); text-transform: uppercase; } .cr-ord span { display: flex; gap: calc(6 * var(--px)); align-items: center; } .cr-ord svg { width: calc(16 * var(--px)); } .cr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250 * var(--px)), 1fr)); gap: calc(28 * var(--px)) calc(18 * var(--px)); } .cr-ep { cursor: pointer; } .cr-ep .foto { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: calc(10 * var(--px)); background: #23252b; } .cr-ep .foto > img:first-child { width: 100%; height: 100%; object-fit: cover; } .cr-ep .dur { position: absolute; right: calc(6 * var(--px)); bottom: calc(6 * var(--px)); background: #000c; font-size: calc(12 * var(--px)); font-weight: 700; padding: 1px calc(5 * var(--px)); } .cr-ep .play-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); z-index: 3; color: #fff; opacity: 0; transition: all .25s; } .cr-ep .play-c svg { width: calc(40 * var(--px)); height: calc(40 * var(--px)); } .cr-ep-hover { position: absolute; inset: 0; z-index: 2; background: #141519eb; padding: calc(12 * var(--px)); opacity: 0; transition: opacity .25s; } .cr-ep-hover b { display: block; font-size: calc(14 * var(--px)); margin-bottom: calc(6 * var(--px)); } .cr-ep-hover p { font-size: calc(12.5 * var(--px)); color: #dadada; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cr-ep:hover .cr-ep-hover { opacity: 1; } .cr-ep:hover .play-c { opacity: 1; transform: translate(-50%, -20%) scale(1); } .cr-ep small { display: block; font-size: calc(13 * var(--px)); font-weight: 700; } .cr-ep > b { display: block; font-size: calc(15 * var(--px)); margin: calc(4 * var(--px)) 0; transition: color .2s; } .cr-ep:hover > b { color: #f47521; } .cr-navtemp { display: flex; justify-content: space-between; margin-top: calc(30 * var(--px)); } .cr-navtemp button { display: flex; gap: calc(6 * var(--px)); align-items: center; color: #a0a0a0; font-weight: 900; font-size: calc(14 * var(--px)); text-transform: uppercase; padding: calc(10 * var(--px)) 0; } .cr-navtemp button:hover { color: #fff; } .cr-navtemp svg { width: calc(18 * var(--px)); } .cr-sem { padding: calc(10 * var(--px)) var(--margem) calc(120 * var(--px)); } .cr-sem h3 { font-size: calc(24 * var(--px)); font-weight: 800; margin-bottom: calc(16 * var(--px)); } .cr-linha { display: flex; gap: calc(16 * var(--px)); overflow-x: auto; padding-bottom: calc(20 * var(--px)); } .cr-linha .m-card { width: clamp(calc(180 * var(--px)), 12.5vw, calc(240 * var(--px))); flex: 0 0 auto; position: relative; cursor: pointer; } .cr-linha .m-card .arte { aspect-ratio: 2/3; position: relative; overflow: hidden; } .cr-linha .m-card .arte > img:first-child { width: 100%; height: 100%; object-fit: cover; } .cr-linha .m-card .por-cima { position: absolute; inset: 0; z-index: 3; background: #141519f2; padding: calc(14 * var(--px)); display: flex; flex-direction: column; opacity: 0; transition: opacity .25s; } .cr-linha .m-card:hover .por-cima { opacity: 1; } .cr-linha .por-cima b { font-size: calc(16 * var(--px)); margin-bottom: calc(8 * var(--px)); } .cr-linha .por-cima .estrelas { color: #a0a0a0; font-size: calc(13 * var(--px)); margin-bottom: calc(4 * var(--px)); } .cr-linha .por-cima .estrelas em { color: #fff; font-style: normal; font-weight: 700; } .cr-linha .por-cima p { color: #dadada; font-size: calc(13.5 * var(--px)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(8 * var(--px)); } .cr-linha .por-cima .icones { margin-top: auto; display: flex; gap: calc(14 * var(--px)); color: #f47521; } .cr-linha .por-cima .icones svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); } .cr-linha .m-card .nome-c { margin-top: calc(10 * var(--px)); font-weight: 700; font-size: calc(15 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-linha .m-card .sub-c { color: #a0a0a0; font-size: calc(13.5 * var(--px)); margin-top: calc(4 * var(--px)); } /* ---- Disney+, Globoplay, Max ---- */ .gn { background: var(--g-fundo, #0b1026); } .gn-fundo { position: fixed; inset: 0; z-index: 0; } .gn-fundo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s linear forwards; } .gn-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--g-fundo) 0%, transparent 65%), linear-gradient(0deg, var(--g-fundo) 5%, transparent 60%); } .gn-volta { position: absolute; z-index: 3; top: calc(90 * var(--px)); left: var(--margem); width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; background: #0008; display: grid; place-items: center; } .gn-volta svg { width: calc(20 * var(--px)); } .gn-info { position: relative; z-index: 2; padding: calc(150 * var(--px)) var(--margem) calc(30 * var(--px)); width: min(calc(700 * var(--px)), 55vw); } .gn-info > * { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; } .gn-info > *:nth-child(2) { animation-delay: .07s; } .gn-info > *:nth-child(3) { animation-delay: .14s; } .gn-info > *:nth-child(4) { animation-delay: .21s; } .gn-info .logo-titulo { max-height: calc(170 * var(--px)); max-width: calc(460 * var(--px)); margin-bottom: calc(24 * var(--px)); } .gn-meta { display: flex; gap: calc(12 * var(--px)); align-items: center; color: #f9f9f9cc; font-size: calc(15 * var(--px)); margin-bottom: calc(22 * var(--px)); flex-wrap: wrap; } .gn .cx { border: 1px solid #fff9; border-radius: calc(4 * var(--px)); padding: 0 calc(6 * var(--px)); font-size: calc(12 * var(--px)); } .gn-botoes { display: flex; gap: calc(14 * var(--px)); align-items: center; margin-bottom: calc(22 * var(--px)); } .gn-botoes .btn { height: calc(54 * var(--px)); border-radius: calc(6 * var(--px)); letter-spacing: .1em; } .gn-sinopse { font-size: calc(17 * var(--px)); line-height: 1.55; color: #f9f9f9; } .gn-corpo { position: relative; z-index: 2; padding: calc(30 * var(--px)) var(--margem) calc(120 * var(--px)); min-height: calc(60 * var(--u)); background: linear-gradient(180deg, transparent, var(--g-fundo) calc(140 * var(--px))); } .gn .abas-risco { background: var(--g-cor); } .gn-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260 * var(--px)), 1fr)); gap: calc(22 * var(--px)); } .gn-grade .m-card { width: auto; } .gn-ep .foto { aspect-ratio: 16/9; border-radius: calc(8 * var(--px)); overflow: hidden; margin-bottom: calc(10 * var(--px)); } .gn-ep .foto img { width: 100%; height: 100%; object-fit: cover; } .gn-ep b { display: block; } .gn-ep p { font-size: calc(14 * var(--px)); color: #f9f9f9b3; margin-top: calc(6 * var(--px)); line-height: 1.45; } .gn-det { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(40 * var(--px)); } .gn-det h4 { font-size: calc(22 * var(--px)); margin-bottom: calc(10 * var(--px)); } .gn-det p { line-height: 1.6; color: #f9f9f9cc; } .gn-det dt { color: #f9f9f9a0; font-size: calc(14 * var(--px)); margin-top: calc(14 * var(--px)); } .gn-det dd { margin-top: calc(4 * var(--px)); line-height: 1.5; } @media (max-width: 900px) { .pv-info, .gn-info { width: auto; margin-right: var(--margem); } .pv-fundo { left: 0; opacity: .5; } .at-baixo, .cr-corpo, .at-grade, .gn-det { grid-template-columns: 1fr; gap: calc(24 * var(--px)); } .pv-ep { grid-template-columns: 1fr; } .nfx .corpo { grid-template-columns: 1fr; } .nfx .grade { grid-template-columns: 1fr 1fr; } } /* com uma descrição aberta, só existe o voltar dela */ body:has(.m-pagina) .voltar-app, body:has(.m-janela) .voltar-app { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(calc(20 * var(--px))); transition: all .3s; } .nfx .grade .item img.logo-g { width: auto; aspect-ratio: auto; height: auto; } /* ===================== DESCRIÇÃO FORMATO TV (uma tela, sem rolar) ===================== */ .tela-tv { position: fixed; inset: 0; z-index: 99; overflow: hidden; display: grid; grid-template-rows: 1fr auto; background: #000; animation: tvEntra .5s cubic-bezier(.2,.8,.2,1); } .tela-tv.saindo { animation: tvSai .33s ease-in forwards; } @keyframes tvEntra { from { opacity: 0; } } @keyframes tvSai { to { opacity: 0; } } .tv-fundo { position: absolute; inset: 0; z-index: 0; } .tv-fundo img { width: 100%; height: 100%; object-fit: cover; animation: tvAssenta 1.6s cubic-bezier(.2,.8,.2,1); } @keyframes tvAssenta { from { transform: scale(1.08); filter: brightness(.6); } } .tv-fundo::after { content: ""; position: absolute; inset: 0; } .tv-volta { position: absolute; z-index: 5; top: calc(3.2 * var(--u)); left: var(--margem); width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; background: #0007; backdrop-filter: blur(calc(14 * var(--px))); display: grid; place-items: center; transition: background .2s, transform .3s; } .tv-volta:hover { background: #fff3; transform: scale(1.08); } .tv-volta svg { width: calc(20 * var(--px)); } .tv-cima { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 4vw; padding: calc(9 * var(--u)) var(--margem) calc(2.4 * var(--u)); min-height: 0; } .tv-cima > * { animation: sobe .7s cubic-bezier(.2,.8,.2,1) backwards; } .tv-cima > *:nth-child(2) { animation-delay: .1s; } .tv-info { width: min(calc(640 * var(--px)), 46vw); } .tv-info .logo-titulo { max-width: min(calc(460 * var(--px)), 34vw); max-height: calc(17 * var(--u)); margin-bottom: calc(2.2 * var(--u)); } .tv-info .titulo-texto { font-size: calc(5.4 * var(--u)); margin-bottom: calc(2 * var(--u)); } .tv-meta { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)); align-items: center; font-weight: 600; font-size: calc(1.7 * var(--u)); margin-bottom: calc(1.4 * var(--u)); } .tv-sinopse { font-size: calc(2 * var(--u)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(1.6 * var(--u)); } .tv-elenco { font-size: calc(1.6 * var(--u)); margin-bottom: calc(1.6 * var(--u)); } .tv-acoes { display: flex; gap: calc(14 * var(--px)); align-items: center; } .tv-baixo { position: relative; z-index: 2; padding: 0 0 calc(3.5 * var(--u)); } .tv-abas { position: relative; display: flex; gap: calc(30 * var(--px)); margin: 0 var(--margem) calc(1.4 * var(--u)); border-bottom: 1px solid #ffffff26; } .tv-abas button { padding: calc(1.2 * var(--u)) 0; font-weight: 700; font-size: calc(1.9 * var(--u)); color: #ffffff8c; transition: color .25s, transform .25s; } .tv-abas button.ativo, .tv-abas button:hover { color: #fff; } .tv-risco { position: absolute; left: 0; bottom: -1px; height: 3px; border-radius: 3px; background: #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); } .tv-conteudo { height: calc(28 * var(--u)); } .tv-linha { display: flex; gap: calc(18 * var(--px)); overflow-x: auto; overflow-y: visible; padding: calc(1.4 * var(--u)) var(--margem) 0; height: 100%; align-items: flex-start; scroll-behavior: smooth; } .tv-linha > button { flex: 0 0 auto; text-align: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .tv-linha .foto { position: relative; overflow: hidden; background: #222; } .tv-linha .foto > img:first-child { width: 100%; height: 100%; object-fit: cover; } .tv-ep, .tv-card { width: calc(calc(15 * var(--u)) * 16 / 9); } .tv-ep .foto, .tv-card .foto { aspect-ratio: 16/9; border-radius: calc(8 * var(--px)); } .tv-ep small { display: block; margin-top: calc(1 * var(--u)); font-size: calc(1.35 * var(--u)); font-weight: 700; color: #ffffff8c; letter-spacing: .03em; } .tv-ep b, .tv-card b, .tv-poster b, .tv-pessoa b { display: block; font-size: calc(1.65 * var(--u)); margin-top: calc(.4 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-ep p { font-size: calc(1.4 * var(--u)); color: #ffffffa6; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: calc(.4 * var(--u)); } .tv-card small { display: block; font-size: calc(1.4 * var(--u)); color: #ffffff80; margin-top: calc(.3 * var(--u)); } .tv-ep .dur { position: absolute; right: calc(8 * var(--px)); bottom: calc(6 * var(--px)); background: #000b; border-radius: calc(4 * var(--px)); padding: 1px calc(6 * var(--px)); font-size: calc(1.3 * var(--u)); font-weight: 700; } .tv-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; background: #0005; } .tv-play svg { width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); padding: calc(1.1 * var(--u)); border-radius: 50%; background: #fff; color: #000; } .tv-ep:hover .tv-play { opacity: 1; } .tv-card .logo-card { position: absolute; left: 8%; bottom: 10%; max-width: 60%; max-height: 38%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 2px calc(8 * var(--px)) #000c); } .tv-card .titulo-card { position: absolute; left: 8%; bottom: 10%; right: 8%; font-weight: 800; font-size: calc(1.7 * var(--u)); text-shadow: 0 2px calc(8 * var(--px)) #000; } .tv-card .n-mini { position: absolute; top: calc(7 * var(--px)); left: calc(7 * var(--px)); height: calc(2 * var(--u)); } .tv-card .selo-prime { position: absolute; left: calc(8 * var(--px)); top: calc(8 * var(--px)); width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; background: #1a98ff; display: grid; place-items: center; font-size: calc(1.2 * var(--u)); font-weight: 900; } .tv-poster { width: calc(calc(21 * var(--u)) * 2 / 3); } .tv-poster .foto { aspect-ratio: 2/3; height: calc(21 * var(--u)); } .tv-pessoa { width: calc(15 * var(--u)); text-align: center !important; } .tv-pessoa .rosto { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; overflow: hidden; background: #2c2c2e; transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; } .tv-pessoa .rosto img { width: 100%; height: 100%; object-fit: cover; } .tv-pessoa small { display: block; font-size: calc(1.35 * var(--u)); color: #ffffff80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-pessoa:hover .rosto { transform: scale(1.08); box-shadow: 0 0 0 calc(4 * var(--px)) #fff; } .tv-det { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); grid-auto-rows: min-content; gap: calc(1.6 * var(--u)) 3vw; padding: calc(1.4 * var(--u)) var(--margem) 0; font-size: calc(1.6 * var(--u)); } .tv-det .larga { grid-row: span 2; } .tv-det small { display: block; color: #ffffff80; font-weight: 700; font-size: calc(1.35 * var(--u)); margin-bottom: calc(.4 * var(--u)); } .tv-det p { line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* foco/hover dos itens de baixo */ .tv-ep:hover, .tv-card:hover, .tv-poster:hover { transform: translateY(calc(-.8 * var(--u))) scale(1.05); } .tv-ep:hover .foto, .tv-card:hover .foto, .tv-poster:hover .foto { box-shadow: 0 0 0 3px #fff, 0 calc(20 * var(--px)) calc(30 * var(--px)) calc(-10 * var(--px)) #000; } .tela-tv button:focus-visible { outline: none; } /* ---- Netflix TV ---- */ .tv-netflix { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #141414; } .tv-netflix .tv-fundo { left: 30%; } .tv-netflix .tv-fundo::after { background: linear-gradient(90deg, #141414 0%, #141414e6 12%, #14141400 55%), linear-gradient(0deg, #141414 0%, #14141400 45%); } .tv-netflix .tv-cima { align-items: flex-start; flex-direction: column; gap: calc(2 * var(--u)); padding-top: calc(7 * var(--u)); } .tv-netflix .tv-meta { color: #bcbcbc; } .tv-netflix .cx { border: 1px solid #ffffff66; border-radius: 3px; padding: 0 calc(5 * var(--px)); font-size: calc(1.25 * var(--u)); color: #fff; } .tv-netflix .top-hoje { display: flex; align-items: center; gap: calc(10 * var(--px)); font-weight: 700; font-size: calc(2 * var(--u)); margin-bottom: calc(1.4 * var(--u)); } .tv-netflix .selo-top { width: calc(2.8 * var(--u)); height: calc(3 * var(--u)); background: #e50914; border-radius: 3px; display: grid; place-items: center; font-size: calc(.8 * var(--u)); font-weight: 900; line-height: 1; text-align: center; } .tv-netflix .selo-top b { display: block; font-size: calc(1.2 * var(--u)); } .nf-lista { flex-direction: column; align-items: stretch; gap: calc(.4 * var(--u)); width: calc(30 * var(--u)); } .nf-lista button { display: flex; align-items: center; gap: calc(1.4 * var(--u)); height: calc(4.4 * var(--u)); padding: 0 calc(1.6 * var(--u)); border-radius: calc(4 * var(--px)); font-size: calc(1.8 * var(--u)); font-weight: 600; color: #e5e5e5; transition: background .2s, color .2s, transform .25s; } .nf-lista button svg { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); } .nf-lista button:hover { background: #fff; color: #000; transform: scale(1.04); } .tv-netflix .tv-cima { flex-direction: row; align-items: flex-end; justify-content: space-between; } .tv-netflix .tv-cima .tv-info { order: 2; flex: 1; } .tv-netflix .tv-cima .nf-lista { order: 1; } .tv-netflix .tv-cima { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .tv-netflix .tv-cima .tv-info { order: 1; flex: none; } .tv-netflix .tv-cima .nf-lista { order: 2; flex-direction: row; width: auto; flex-wrap: wrap; gap: calc(.8 * var(--u)); } .tv-netflix .nf-lista button { background: #ffffff1f; } .tv-netflix .nf-lista button:first-child { background: #fff; color: #000; } .tv-netflix .nf-lista button:hover { background: #fff; color: #000; } .tv-netflix .tv-abas { border-bottom-color: #404040; } .tv-netflix .tv-risco { background: #e50914; } .tv-netflix .tv-ep .foto, .tv-netflix .tv-card .foto { border-radius: calc(4 * var(--px)); } /* ---- Prime Video TV ---- */ .tv-prime { font-family: "Amazon Ember", "Inter", -apple-system, sans-serif; background: #00050d; } .tv-prime .tv-fundo { left: 32%; } .tv-prime .tv-fundo::after { background: linear-gradient(90deg, #00050d 0%, #00050de0 16%, #00050d00 55%), linear-gradient(0deg, #00050d 0%, #00050d00 50%); } .tv-prime .incluido { display: flex; align-items: center; gap: calc(8 * var(--px)); font-weight: 700; font-size: calc(1.8 * var(--u)); margin-bottom: calc(1.2 * var(--u)); } .tv-prime .incluido i { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%; background: #1a98ff; display: grid; place-items: center; font-style: normal; font-size: calc(1.4 * var(--u)); } .tv-prime .tv-meta { color: #aab2bf; } .tv-prime .tv-meta b { color: #fff; } .tv-prime .cx { border: 1px solid #aab2bf; border-radius: calc(4 * var(--px)); padding: 0 calc(6 * var(--px)); font-size: calc(1.3 * var(--u)); } .tv-prime .tv-sinopse { color: #e5e8ec; } .tv-prime .pv-play { height: calc(5.6 * var(--u)); font-size: calc(1.9 * var(--u)); } .tv-prime .pv-circ span { width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); } .tv-prime .pv-circ em { position: absolute; margin-top: calc(6.2 * var(--u)); } .tv-prime .pv-circ { position: relative; } .tv-prime .tv-ep .foto, .tv-prime .tv-card .foto { border-radius: calc(10 * var(--px)); } .tv-prime .tv-abas { border-bottom: 0; gap: calc(8 * var(--px)); } .tv-prime .tv-abas button { padding: calc(.9 * var(--u)) calc(2 * var(--u)); border-radius: calc(999 * var(--px)); } .tv-prime .tv-abas button.ativo { background: #fff; color: #00050d; } .tv-prime .tv-abas button:hover { background: #ffffff26; color: #fff; } .tv-prime .tv-abas button.ativo:hover { background: #fff; color: #00050d; } .tv-prime .tv-risco { display: none; } /* ---- Apple TV (tvOS) ---- */ .tv-appletv { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; } .tv-appletv .tv-fundo::after { background: linear-gradient(0deg, #000 0%, #000e 34%, #0000 70%); } .tv-appletv .tv-cima { justify-content: space-between; } .tv-appletv .tv-info .logo-titulo { max-height: calc(19 * var(--u)); } .tv-appletv .tv-lado { width: min(calc(640 * var(--px)), 44vw); } .tv-appletv .tv-meta { color: #ffffffa6; } .tv-appletv .cx { border: 1px solid #ffffff73; border-radius: calc(4 * var(--px)); padding: 0 calc(5 * var(--px)); font-size: calc(1.2 * var(--u)); } .tv-appletv .tv-elenco { color: #ffffffa6; } .tv-appletv .tv-elenco b { color: #fff; margin-right: calc(6 * var(--px)); } .tv-appletv .at-play { height: calc(5.4 * var(--u)); font-size: calc(1.9 * var(--u)); } .tv-appletv .at-circ { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); } .tv-appletv .tv-ep .foto, .tv-appletv .tv-card .foto { border-radius: calc(14 * var(--px)); } .tv-appletv .tv-abas { border-bottom: 0; gap: calc(6 * var(--px)); } .tv-appletv .tv-abas button { padding: calc(.8 * var(--u)) calc(1.8 * var(--u)); border-radius: calc(999 * var(--px)); font-weight: 600; } .tv-appletv .tv-abas button.ativo { background: #ffffffe6; color: #000; } .tv-appletv .tv-abas button:hover { background: #ffffff26; color: #fff; } .tv-appletv .tv-abas button.ativo:hover { background: #fff; color: #000; } .tv-appletv .tv-risco { display: none; } .tv-appletv .tv-card:hover, .tv-appletv .tv-ep:hover { transform: scale(1.08); } /* ---- Crunchyroll TV ---- */ .tv-crunchyroll { font-family: "Lato", "Helvetica Neue", sans-serif; } .tv-crunchyroll .tv-fundo { left: 35%; } .tv-crunchyroll .tv-fundo::after { background: linear-gradient(90deg, #000 0%, #000d 15%, #0000 60%), linear-gradient(0deg, #000 0%, #0000 50%); } .tv-crunchyroll .tv-info .logo-titulo { max-height: calc(12 * var(--u)); margin-bottom: calc(1.4 * var(--u)); } .tv-crunchyroll .cr-titulo { font-size: calc(3.6 * var(--u)); font-weight: 900; margin-bottom: calc(1 * var(--u)); } .tv-crunchyroll .cr-nota { display: flex; align-items: center; gap: calc(10 * var(--px)); margin-bottom: calc(1.2 * var(--u)); font-size: calc(1.7 * var(--u)); } .tv-crunchyroll .cr-nota .est i { font-style: normal; color: #4a4e58; font-size: calc(2.2 * var(--u)); } .tv-crunchyroll .cr-nota .est i.cheia { color: #f47521; } .tv-crunchyroll .cr-nota .est i.meia { background: linear-gradient(90deg, #f47521 50%, #4a4e58 50%); -webkit-background-clip: text; color: transparent; } .tv-crunchyroll .cr-tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)); align-items: center; color: #a0a0a0; font-size: calc(1.5 * var(--u)); font-weight: 600; margin-bottom: calc(1.4 * var(--u)); } .tv-crunchyroll .cr-tags a { color: #dadada; background: #23252b; padding: 2px calc(10 * var(--px)); } .tv-crunchyroll .cx { background: #4a4e58; color: #fff; padding: 1px calc(6 * var(--px)); font-size: calc(1.3 * var(--u)); font-weight: 800; } .tv-crunchyroll .tv-sinopse { color: #dadada; } .tv-crunchyroll .btn { border-radius: 0; height: calc(5 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(1.5 * var(--u)); font-weight: 900; text-transform: uppercase; } .tv-crunchyroll .btn::after { display: none; } .tv-crunchyroll .btn-forte { background: #f47521; color: #000; box-shadow: none; } .tv-crunchyroll .btn-forte:hover { background: #ff8a3d; transform: none; } .tv-crunchyroll .btn-borda { width: calc(5 * var(--u)); padding: 0; justify-content: center; border: 2px solid #f47521; color: #f47521; } .tv-crunchyroll .btn-borda:hover { background: #f4752122; transform: none; } .tv-crunchyroll .tv-risco { background: #f47521; } .tv-crunchyroll .tv-abas button { text-transform: uppercase; font-weight: 900; font-size: calc(1.6 * var(--u)); letter-spacing: .03em; } .tv-crunchyroll .tv-ep .foto, .tv-crunchyroll .tv-card .foto { border-radius: 0; } .tv-crunchyroll .tv-ep:hover .foto, .tv-crunchyroll .tv-poster:hover .foto { box-shadow: 0 0 0 3px #f47521; } .tv-crunchyroll .tv-ep:hover b { color: #f47521; } /* ---- Disney+, Globoplay, Max ---- */ .tv-generico { background: var(--g-fundo); } .tv-generico .tv-fundo::after { background: linear-gradient(90deg, var(--g-fundo) 0%, transparent 60%), linear-gradient(0deg, var(--g-fundo) 0%, transparent 50%); } .tv-generico .tv-meta { color: #f9f9f9cc; } .tv-generico .cx { border: 1px solid #fff9; border-radius: calc(4 * var(--px)); padding: 0 calc(6 * var(--px)); font-size: calc(1.3 * var(--u)); } .tv-generico .btn { height: calc(5.4 * var(--u)); letter-spacing: .1em; border-radius: calc(6 * var(--px)); } .tv-generico .redondo { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); } .tv-generico .tv-risco { background: var(--g-cor); } .tv-generico .tv-abas button { letter-spacing: .08em; } /* ===================== MENU LATERAL (Netflix e Crunchyroll na TV) ===================== */ .modo.netflix, .modo.crunchyroll { --margem: calc(118 * var(--px)); } .m-trilho { position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: calc(88 * var(--px)); display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--px)); padding: 0 calc(18 * var(--px)); transition: width .4s cubic-bezier(.2,.8,.2,1), background .4s; } .m-trilho::before { content: ""; position: absolute; inset: 0 calc(-60 * var(--px)) 0 0; z-index: -1; opacity: 0; transition: opacity .4s; } .m-trilho a { display: flex; align-items: center; gap: calc(22 * var(--px)); height: calc(46 * var(--px)); padding: 0 calc(13 * var(--px)); border-radius: calc(8 * var(--px)); color: #b3b3b3; white-space: nowrap; overflow: hidden; cursor: pointer; transition: color .2s, background .2s; } .m-trilho a svg { flex: 0 0 auto; width: calc(24 * var(--px)); height: calc(24 * var(--px)); } .m-trilho a span { opacity: 0; transform: translateX(calc(-10 * var(--px))); transition: opacity .3s, transform .3s; font-size: calc(17 * var(--px)); font-weight: 600; } .m-trilho a.ativo { color: #fff; } .m-trilho:hover, .m-trilho:focus-within { width: calc(300 * var(--px)); } .m-trilho:hover::before, .m-trilho:focus-within::before { opacity: 1; } .m-trilho:hover a span, .m-trilho:focus-within a span { opacity: 1; transform: none; } .m-trilho a:hover, .m-trilho a:focus-visible { color: #fff; outline: none; } .m-trilho .logo-t { position: absolute; left: calc(30 * var(--px)); bottom: calc(34 * var(--px)); height: calc(30 * var(--px)); } /* Netflix */ .nf-trilho::before { background: linear-gradient(90deg, #000 0%, #000e 55%, #0000 100%); } .nf-trilho a.ativo { position: relative; } .nf-trilho a.ativo::after { content: ""; position: absolute; left: 0; top: calc(10 * var(--px)); bottom: calc(10 * var(--px)); width: 3px; border-radius: 3px; background: #e50914; } .nf-trilho a:hover, .nf-trilho a:focus-visible { background: #ffffff1f; } .nf-trilho .perfil-t { position: absolute; top: calc(30 * var(--px)); left: calc(26 * var(--px)); display: flex; align-items: center; gap: calc(16 * var(--px)); white-space: nowrap; } .nf-trilho .perfil-t .perfil { width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: calc(6 * var(--px)); background: linear-gradient(135deg, #2b64e0, #6ac0ff); flex: 0 0 auto; } .nf-trilho .perfil-t span:last-child { opacity: 0; transition: opacity .3s; font-weight: 600; } .nf-trilho:hover .perfil-t span:last-child, .nf-trilho:focus-within .perfil-t span:last-child { opacity: 1; } .netflix .m-heroi .info { bottom: 30%; } /* Crunchyroll */ .cr-trilho { background: #141519; border-right: 1px solid #23252b; } .cr-trilho::before { background: linear-gradient(90deg, #141519 0%, #141519 70%, #14151900 100%); } .cr-trilho .logo-t { top: calc(30 * var(--px)); bottom: auto; left: calc(28 * var(--px)); height: calc(32 * var(--px)); filter: brightness(0) saturate(100%) invert(53%) sepia(81%) saturate(2016%) hue-rotate(347deg) brightness(99%) contrast(93%); } .cr-trilho a { border-radius: 0; color: #a0a0a0; } .cr-trilho a.ativo { color: #f47521; } .cr-trilho a:hover, .cr-trilho a:focus-visible { background: #23252b; color: #fff; } .modo.crunchyroll .m-heroi { height: calc(92 * var(--u)); } /* ===================== NETFLIX NA TV: topo parado, fileiras andam embaixo ===================== */ .modo.netflix { overflow: hidden; } .netflix .m-heroi { position: absolute; inset: 0; height: 100vh; } .netflix .m-heroi .slide > img { object-position: center 15%; } .netflix .m-heroi .veu { background: linear-gradient(0deg, #141414 0%, #141414 40%, #14141400 62%), linear-gradient(90deg, #141414 0%, #141414cc 22%, #14141400 55%) !important; } .netflix .m-heroi .info { bottom: auto; top: calc(9 * var(--u)); width: min(calc(560 * var(--px)), 40vw); } .netflix .m-heroi .info .logo-titulo { max-height: calc(15 * var(--u)); margin-bottom: calc(1.6 * var(--u)); } .netflix .m-heroi .info .sinopse { font-size: calc(1.9 * var(--u)); -webkit-line-clamp: 3; margin-bottom: calc(1.8 * var(--u)); } .netflix .m-heroi .info.tv-foco .botoes { display: none; } .netflix .bandeira-idade { bottom: auto; top: calc(40 * var(--u)); } .netflix .m-fileiras.rola { position: absolute; left: 0; right: 0; top: calc(50 * var(--u)); bottom: 0; margin: 0; padding-bottom: calc(40 * var(--u)); overflow-y: auto; overflow-x: hidden; z-index: 4; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(3 * var(--u))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(3 * var(--u))); } .netflix .m-fileiras.rola .m-fileira { margin-bottom: calc(1.6 * var(--u)); } .netflix .m-fileiras.rola .m-fileira .trilho { padding-top: calc(14 * var(--px)); padding-bottom: calc(18 * var(--px)); margin: 0; } /* card escolhido na TV: cresce com borda, sem a caixinha de site */ .netflix .m-card .card-info { display: none; } .netflix .m-card:hover, .netflix .m-card:focus-visible { transform: scale(1.1); transition-delay: 0s; z-index: 20; } .netflix .m-card:hover .arte, .netflix .m-card:focus-visible .arte { border-radius: calc(4 * var(--px)); box-shadow: 0 0 0 3px #fff, 0 calc(14 * var(--px)) calc(30 * var(--px)) #000c; } .netflix .top10 .m-card:hover, .netflix .top10 .m-card:focus-visible { transform: scale(1.06); } /* TV: sem setas/faixas nas pontas das fileiras — quem anda é o controle */ .fileira .rolar, .m-fileira .rolar { display: none !important; } /* o menu lateral só abre pelo controle (seta para a esquerda), não por passar o mouse perto */ .m-trilho:hover { width: calc(88 * var(--px)); } .m-trilho:hover::before { opacity: 0; } .m-trilho:hover a span { opacity: 0; transform: translateX(calc(-10 * var(--px))); } .m-trilho:focus-within { width: calc(300 * var(--px)); } .m-trilho:focus-within::before { opacity: 1; } .m-trilho:focus-within a span { opacity: 1; transform: none; } .nf-trilho:hover .perfil-t span:last-child { opacity: 0; } .nf-trilho:focus-within .perfil-t span:last-child { opacity: 1; } /* a imagem de fundo da descrição não vaza para fora da área dela (fazia uma faixa cortada no começo) */ .tv-fundo { overflow: hidden; } /* o destaque é o desenho de cada app, sem o contorno padrão do navegador */ :focus-visible { outline: none; } /* voltar ao início: pequeno, no canto de cima, longe das fileiras */ .voltar-app { left: auto; right: calc(28 * var(--px)); top: calc(22 * var(--px)); bottom: auto; transform: none; height: calc(42 * var(--px)); padding: 0 calc(16 * var(--px)) 0 calc(6 * var(--px)); font-size: calc(13.5 * var(--px)); animation: voltarEntra2 .6s 1s cubic-bezier(.34,1.56,.64,1) both; } .voltar-app .bola { width: calc(30 * var(--px)); height: calc(30 * var(--px)); } .voltar-app .bola svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); } .voltar-app:hover, .voltar-app:focus-visible { transform: scale(1.05); } @keyframes voltarEntra2 { from { opacity: 0; transform: translateY(calc(-16 * var(--px))); } } body:has(.m-pagina) .voltar-app { transform: translateY(calc(-16 * var(--px))); } .netflix .bandeira-idade { right: 0; } .prime .m-topo .direita, .appletv .m-topo .direita, .generico .m-topo .direita { margin-right: calc(190 * var(--px)); } .appletv .m-topo .direita { right: calc(var(--margem) + calc(180 * var(--px))); margin-right: 0; } /* descrição cobre o menu lateral (na TV a página do título não tem menu) */ .tela-tv { z-index: 110; --margem: clamp(calc(48 * var(--px)), 5vw, calc(96 * var(--px))); } .tv-cima { padding-top: calc(11 * var(--u)); } /* botões não escolhidos legíveis em cima de qualquer imagem: vidro escuro + texto branco */ .tv-netflix .nf-lista button { background: #181818b8; color: #fff; backdrop-filter: blur(calc(14 * var(--px))) saturate(1.3); box-shadow: inset 0 0 0 1px #ffffff1a; text-shadow: 0 1px 3px #0008; } .tv-netflix .nf-lista button:first-child { background: #ffffffe0; color: #000; text-shadow: none; } .tv-netflix .nf-lista button:hover, .tv-netflix .nf-lista button:focus-visible { background: #fff; color: #000; text-shadow: none; box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) #0008; } .tela-tv .pv-circ span, .tela-tv .at-circ, .tela-tv .redondo { background: #111b; backdrop-filter: blur(calc(14 * var(--px))) saturate(1.3); box-shadow: inset 0 0 0 1px #ffffff26; color: #fff; } .tela-tv .pv-circ:hover span, .tela-tv .pv-circ:focus-visible span, .tela-tv .at-circ:hover, .tela-tv .at-circ:focus-visible, .tela-tv .redondo:hover, .tela-tv .redondo:focus-visible { background: #fff; color: #000; } .tela-tv .tv-meta, .tela-tv .tv-sinopse, .tela-tv .tv-elenco { text-shadow: 0 1px calc(8 * var(--px)) #000a; } /* só um botão branco por vez: o escolhido (ou o Assistir, se nenhum estiver escolhido) */ .tv-netflix .nf-lista:focus-within button:first-child:not(:focus-visible) { background: #181818b8; color: #fff; text-shadow: 0 1px 3px #0008; } /* ===================== LEVE PARA TV (não pode travar) ===================== */ /* desfoque de fundo é o efeito mais pesado que existe: fora de tudo, com fundos sólidos no lugar */ *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .topo.rolou { background: #0a0d18f2; } .chip { background: #1b2033e6; } .btn-vidro { background: #2a2e40e6; } .seta-redonda, .redondo, .pilula { background: #262a3ae6; } .voltar-app { background: #12141ff2; } .tv-netflix .nf-lista button { background: #1c1c1ce6; } .tela-tv .pv-circ span, .tela-tv .at-circ, .tela-tv .redondo { background: #1a1a1ae6; } .tv-volta { background: #000c; } .appletv .m-topo nav, .appletv .m-topo .direita .ic { background: #1c1c1ef2; } .at-circ, .at-volta { background: #2c2c2ee6; } .prime .m-topo.rolou { background: #00050df2; } /* sombras de logo animadas e máscaras custam caro: simplificadas */ .netflix .m-fileiras.rola { -webkit-mask-image: none; mask-image: none; } .voo-logo { filter: none; } .voo-onda { width: 160vmax; height: 160vmax; } .halo { width: 70vmax; height: 70vmax; } /* só o destaque da vez anda; nada de animação infinita em lugar escondido */ .heroi .slide:not(.ativo) .fundo, .m-heroi .slide:not(.ativo) > img { animation: none !important; } .detalhe .fundo-det img, .pv-fundo img, .gn-fundo img, .cr-heroi > img:first-child { animation: none; } .img { will-change: auto; } /* ===================== PRIMEIRA TELA DE TV: destaque + primeira fileira visíveis ===================== */ .heroi { height: calc(66 * var(--u)); min-height: calc(480 * var(--px)); } .heroi .info { bottom: calc(16 * var(--u)); } .heroi .logo-titulo { max-height: calc(15 * var(--u)); margin-bottom: calc(2 * var(--u)); } .heroi .sinopse { -webkit-line-clamp: 2; margin-bottom: calc(2.2 * var(--u)); } .heroi .progresso { bottom: calc(11 * var(--u)); } .heroi .idade-canto { bottom: calc(15 * var(--u)); } .faixa-marcas { margin-top: calc(-8 * var(--u)); } .m-heroi { height: calc(68 * var(--u)) !important; min-height: calc(460 * var(--px)); } .m-heroi .info { bottom: 20% !important; } .m-heroi .info .logo-titulo { max-height: calc(16 * var(--u)); } .m-heroi .info .sinopse { -webkit-line-clamp: 2; } .m-fileiras { margin-top: calc(-7 * var(--u)); } .netflix .m-heroi { height: 100vh !important; } .netflix .m-fileiras { margin-top: 0; } .appletv .m-heroi .info { bottom: 20% !important; } .appletv .pontos, .prime .pontos, .crunchyroll .barras { bottom: 12% !important; } .prime .p-setas { display: none; } .netflix .m-fileiras.rola .m-fileira { transition: opacity .35s ease; } .netflix .m-fileiras.rola .m-fileira.acima { opacity: 0; pointer-events: none; } /* barras de rolagem escondidas em todos os navegadores (Firefox usa esta propriedade) */ * { scrollbar-width: none; -ms-overflow-style: none; } /* título escrito no card (quando não há logo) sempre legível: degradê escuro por baixo */ .tv-card .foto:has(.titulo-card)::after, .m-card .arte:has(.titulo-card)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(0deg, #000d, #0000); pointer-events: none; } .tv-card .titulo-card, .m-card .titulo-card { z-index: 1; text-shadow: 0 1px calc(6 * var(--px)) #000; } /* ===================== CAPAS VERTICAIS NOS STREAMINGS ===================== */ .modo .m-fileira .m-card { width: clamp(calc(150 * var(--px)), 9.4vw, calc(210 * var(--px))); } .modo .m-fileira .m-card .arte { aspect-ratio: 2/3; height: auto; } .modo .m-fileira .m-card .arte > img:first-child { width: 100%; height: 100%; object-fit: cover; } .netflix .m-fileira .m-card .arte, .netflix .m-fileira .m-card:hover .arte { border-radius: calc(6 * var(--px)); } .prime .m-fileira .m-card .arte { border-radius: calc(10 * var(--px)); } .appletv .m-fileira .m-card .arte { border-radius: calc(12 * var(--px)); } .appletv .m-card .luz { height: auto; aspect-ratio: 2/3; inset: 0 0 auto 0; border-radius: calc(12 * var(--px)); } .generico .m-fileira .m-card .arte { border-radius: calc(8 * var(--px)); } .prime .m-card .card-info { display: none; } /* Top 10: número + capa, mesmo tamanho em todos */ .modo .top10 .m-card { width: clamp(calc(220 * var(--px)), 13.6vw, calc(300 * var(--px))); display: flex; align-items: flex-end; } .modo .top10 .m-card .arte { flex: 0 0 62%; } .modo .top10 .m-card .numero { flex: 0 0 38%; text-align: right; } .appletv .top10 .m-card { display: block; width: clamp(calc(150 * var(--px)), 9.4vw, calc(210 * var(--px))); } .tv-poster { width: calc(calc(21 * var(--u)) * 2 / 3); } /* ===================== MEDIDAS DE TV (proporcionais à altura: igual em Full HD e 4K) ===================== Primeira tela = destaque (≤ 45% da altura) + primeira fileira inteira + começo da segunda. */ .m-heroi { height: calc(54 * var(--u)) !important; min-height: 0 !important; } .m-heroi .info { bottom: calc(13 * var(--u)) !important; width: min(46vw, calc(82 * var(--u))); } .m-heroi .info .logo-titulo { max-height: calc(11 * var(--u)) !important; max-width: calc(52 * var(--u)); margin-bottom: calc(1.4 * var(--u)); } .m-heroi .info .titulo-texto { font-size: calc(5 * var(--u)); } .m-heroi .info .sinopse, .m-heroi .info .meta-p, .m-heroi .info .meta-a, .m-heroi .info .meta-c { font-size: calc(1.7 * var(--u)) !important; } .m-heroi .info .sinopse { -webkit-line-clamp: 2; margin-bottom: calc(1.6 * var(--u)); } .m-heroi .info .btn, .m-heroi .info .pv-play { height: calc(4.8 * var(--u)) !important; font-size: calc(1.7 * var(--u)) !important; padding: 0 calc(2.4 * var(--u)) !important; } .m-heroi .info .redondo { width: calc(4.8 * var(--u)); height: calc(4.8 * var(--u)); } .m-heroi .info .btn svg, .m-heroi .info .redondo svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); } .appletv .pontos, .prime .pontos, .crunchyroll .barras { bottom: calc(9 * var(--u)) !important; } .m-fileiras { margin-top: calc(-9 * var(--u)) !important; } .m-fileira { margin-bottom: calc(1.4 * var(--u)) !important; } .m-fileira h3 { font-size: calc(2.2 * var(--u)) !important; margin-bottom: calc(.6 * var(--u)) !important; } .m-fileira .trilho { gap: calc(1.2 * var(--u)) !important; padding-top: calc(1 * var(--u)) !important; padding-bottom: calc(2 * var(--u)) !important; } .modo .m-fileira .m-card { width: calc(16 * var(--u)) !important; } .modo .top10 .m-card { width: calc(25 * var(--u)) !important; } .modo .top10 .m-card .numero { font-size: calc(15 * var(--u)) !important; } .appletv .top10 .m-card { width: calc(16 * var(--u)) !important; } .crunchyroll .m-card .nome-c, .appletv .m-card .legenda { font-size: calc(1.5 * var(--u)); margin-top: calc(.8 * var(--u)); } .crunchyroll .m-card .sub-c, .appletv .m-card .legenda small { font-size: calc(1.3 * var(--u)); } /* Netflix: topo até 46%, fileiras logo abaixo */ .netflix .m-heroi { height: 100vh !important; } .netflix .m-heroi .info { top: calc(8 * var(--u)); bottom: auto !important; } .netflix .m-fileiras.rola { top: calc(46 * var(--u)); margin-top: 0 !important; } .netflix .bandeira-idade { top: calc(34 * var(--u)); } /* Em destaque: do tamanho de uma fileira (nunca maior) */ .vt { height: calc(26 * var(--u)); align-items: stretch; overflow: visible; } .modo .m-fileira .m-card.vt-grande { width: calc(74 * var(--u)) !important; height: 100%; position: relative; border-radius: calc(10 * var(--px)); overflow: hidden; background: #111; flex: 0 0 auto; } .vt-grande .vt-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vt-grande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000e 0%, #000a 45%, #0000 80%); } .vt-info { position: absolute; z-index: 2; left: calc(3 * var(--u)); bottom: calc(2.6 * var(--u)); width: 52%; } .vt-info .logo-titulo { max-height: calc(7 * var(--u)); max-width: 100%; margin-bottom: calc(1 * var(--u)); } .vt-titulo { font-size: calc(2.8 * var(--u)); display: block; margin-bottom: calc(.8 * var(--u)); } .vt-meta { font-size: calc(1.4 * var(--u)); color: #ffffffb3; font-weight: 600; margin-bottom: calc(.6 * var(--u)); } .vt-info p { font-size: calc(1.45 * var(--u)); line-height: 1.4; color: #ffffffd9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: calc(1.2 * var(--u)); } .vt-btn { display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); height: calc(3.8 * var(--u)); padding: 0 calc(1.8 * var(--u)); border-radius: calc(6 * var(--px)); background: #fff; color: #000; font-weight: 700; font-size: calc(1.5 * var(--u)); } .vt-btn svg { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); } .modo .m-fileira .m-card.vt-capa { width: auto !important; height: 100%; aspect-ratio: 2/3; flex: 0 0 auto; } .modo .m-fileira .m-card.vt-capa .arte { height: 100%; } .modo .m-fileira .m-card.vt-grande:hover, .modo .m-fileira .m-card.vt-grande:focus-visible { transform: scale(1.02); box-shadow: 0 0 0 3px #fff; } .prime .vt-grande, .appletv .vt-grande { border-radius: calc(14 * var(--px)); } .crunchyroll .vt-grande { border-radius: 0; } .crunchyroll .vt-btn { background: #f47521; border-radius: 0; text-transform: uppercase; } /* atalhos de gênero */ .modo .m-fileira .m-card.gen-tile { width: calc(30 * var(--u)) !important; aspect-ratio: 16/9; border-radius: calc(10 * var(--px)); overflow: hidden; position: relative; cursor: pointer; background: radial-gradient(120% 140% at 0% 0%, var(--g-cor, #444) 0%, #0a0a0a 75%); box-shadow: inset 0 0 0 1px #ffffff1a; } .netflix .gen-tile { --g-cor: #e50914; } .prime .gen-tile { --g-cor: #1a98ff; } .appletv .gen-tile { --g-cor: #6a6a78; } .crunchyroll .gen-tile { --g-cor: #f47521; border-radius: 0 !important; } .gen-tile b { position: absolute; left: calc(2 * var(--u)); bottom: calc(3.4 * var(--u)); font-size: calc(2.4 * var(--u)); font-weight: 800; z-index: 2; text-shadow: 0 2px calc(10 * var(--px)) #000; } .gen-tile small { position: absolute; left: calc(2 * var(--u)); bottom: calc(1.6 * var(--u)); font-size: calc(1.3 * var(--u)); color: #ffffffb3; z-index: 2; } .gen-capas { position: absolute; right: calc(-2 * var(--u)); top: calc(1.2 * var(--u)); height: 88%; width: 55%; } .gen-capas img { position: absolute; top: 0; height: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: calc(5 * var(--px)); box-shadow: calc(-4 * var(--px)) calc(4 * var(--px)) calc(14 * var(--px)) #0009; transition: transform .45s cubic-bezier(.34,1.56,.64,1); } .gen-capas img:nth-child(1) { right: 42%; transform: rotate(-8deg) scale(.86); } .gen-capas img:nth-child(2) { right: 20%; transform: rotate(-2deg) scale(.94); } .gen-capas img:nth-child(3) { right: 0; transform: rotate(5deg); } .gen-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000c 25%, #0000 75%); } .modo .m-fileira .m-card.gen-tile:hover, .modo .m-fileira .m-card.gen-tile:focus-visible { transform: scale(1.05); box-shadow: 0 0 0 3px #fff; } /* ===================== INÍCIO (app dele) nas mesmas medidas de TV ===================== */ .heroi { height: calc(58 * var(--u)) !important; min-height: 0 !important; } .heroi .info { bottom: calc(15 * var(--u)) !important; width: min(46vw, calc(82 * var(--u))); } .heroi .logo-titulo { max-height: calc(11 * var(--u)) !important; max-width: calc(52 * var(--u)); } .heroi .titulo-texto { font-size: calc(5 * var(--u)); } .heroi .chip { font-size: calc(1.3 * var(--u)); padding: calc(.5 * var(--u)) calc(1 * var(--u)); } .heroi .notas { font-size: calc(1.5 * var(--u)); } .heroi .sinopse { font-size: calc(1.75 * var(--u)); } .heroi .btn { height: calc(4.8 * var(--u)); font-size: calc(1.7 * var(--u)); padding: 0 calc(2.4 * var(--u)); } .heroi .progresso { bottom: calc(11 * var(--u)) !important; } .heroi .idade-canto { bottom: calc(14 * var(--u)) !important; } .faixa-marcas { margin-top: calc(-9 * var(--u)) !important; } .faixa-marcas .trilho { gap: calc(1.4 * var(--u)); padding: calc(1.4 * var(--u)) calc(.4 * var(--u)) calc(2 * var(--u)); } .marca-card { width: calc(27 * var(--u)) !important; } .vitrine { padding: 0 0 calc(1 * var(--u)) !important; } .capa { width: calc(16 * var(--u)) !important; } .fileira h2 { font-size: calc(2.4 * var(--u)); } .fileira .trilho { gap: calc(1.4 * var(--u)); } .top10 .capa { width: calc(25 * var(--u)) !important; } .top10 .capa .numero { font-size: calc(15 * var(--u)) !important; } /* sem as margens negativas antigas (eram para a caixinha de site que crescia; na TV não existe) */ .netflix .m-fileira .trilho, .prime .m-fileira .trilho { margin: 0 !important; pointer-events: auto !important; } /* ===================== BLOCOS VERTICAIS COM VARIAÇÃO ===================== */ /* selo de novo (pela data real) */ .selo-novo { position: absolute; top: 0; right: 0; z-index: 2; background: #fff; color: #000; font-size: calc(1.1 * var(--u)); font-weight: 800; letter-spacing: .04em; padding: calc(.35 * var(--u)) calc(.8 * var(--u)); border-radius: 0 0 0 calc(4 * var(--px)); } .selo-novo.nf { top: auto; bottom: 0; left: 0; right: 0; border-radius: 0; background: #e50914; color: #fff; text-align: center; font-weight: 700; letter-spacing: 0; font-size: calc(1.2 * var(--u)); padding: calc(.5 * var(--u)) 0; } .crunchyroll .selo-novo { background: #f47521; color: #000; border-radius: 0; } /* fileira de capas grandes + cartão que se abre ao ser escolhido */ .modo .m-fileira.fmt-grande .m-card { width: calc(25 * var(--u)) !important; } .modo .m-fileira.fmt-grande .trilho { align-items: flex-start; } .modo .m-fileira .m-card.exp-card { position: relative; height: calc(37.5 * var(--u)); overflow: hidden; border-radius: calc(12 * var(--px)); flex: 0 0 auto; transition: width .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s; transform: none !important; } .exp-card .arte { position: absolute; inset: 0; transition: opacity .35s; } .exp-card .arte > img:first-child { width: 100%; height: 100%; object-fit: cover; } .exp-card .exp { position: absolute; inset: 0; opacity: 0; transition: opacity .35s .1s; } .exp-card .exp-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .exp-card .exp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000e 0%, #0009 35%, #0000 65%), linear-gradient(90deg, #000a 0%, #0000 55%); } .exp-info { position: absolute; z-index: 2; left: calc(2.6 * var(--u)); right: calc(2.6 * var(--u)); bottom: calc(2.4 * var(--u)); } .exp-info .logo-titulo { max-height: calc(8 * var(--u)); max-width: 60%; margin-bottom: calc(1.4 * var(--u)); display: block; } .exp-titulo { display: block; font-size: calc(3 * var(--u)); font-weight: 800; margin-bottom: calc(1.2 * var(--u)); } .exp-botoes { display: flex; align-items: center; gap: calc(1 * var(--u)); margin-bottom: calc(1.3 * var(--u)); } .exp-play { display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); height: calc(4.4 * var(--u)); padding: 0 calc(2.2 * var(--u)); background: #fff; color: #000; border-radius: calc(8 * var(--px)); font-weight: 700; font-size: calc(1.7 * var(--u)); } .exp-play svg { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); } .exp-circ { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: #ffffff33; display: grid; place-items: center; } .exp-circ svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); } .exp-meta { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font-size: calc(1.55 * var(--u)); font-weight: 600; color: #ffffffcc; } .exp-meta b { background: #fff; color: #000; font-size: calc(1.15 * var(--u)); padding: calc(.3 * var(--u)) calc(.7 * var(--u)); border-radius: 3px; letter-spacing: .03em; } .modo .m-fileira .m-card.exp-card:hover, .modo .m-fileira .m-card.exp-card:focus-visible { width: calc(66.6 * var(--u)) !important; box-shadow: 0 0 0 3px #fff, 0 calc(20 * var(--px)) calc(40 * var(--px)) calc(-10 * var(--px)) #000; } .exp-card:hover .arte, .exp-card:focus-visible .arte { opacity: 0; } .exp-card:hover .exp, .exp-card:focus-visible .exp { opacity: 1; } .exp-card:hover { transition-delay: .2s; } /* mouse: só abre se ficar em cima um instante */ /* acabamento de cada marca no cartão */ .netflix .exp-card { border-radius: calc(6 * var(--px)) !important; } .netflix .exp-play { border-radius: calc(4 * var(--px)); } .netflix .exp-meta b { background: #e50914; color: #fff; } .appletv .exp-card { border-radius: calc(14 * var(--px)) !important; } .appletv .exp-play { border-radius: calc(999 * var(--px)); } .crunchyroll .exp-card { border-radius: 0 !important; } .crunchyroll .exp-play { background: #f47521; border-radius: 0; text-transform: uppercase; font-weight: 900; } .crunchyroll .exp-circ { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 2px #f47521; color: #f47521; } .crunchyroll .exp-meta b { background: #f47521; } .modo .m-fileira .m-card.exp-card:hover, .modo .m-fileira .m-card.exp-card:focus-visible { transform: none !important; } .crunchyroll .exp-card .por-cima { display: none; } /* coleção: imagem do título principal ao fundo, nome grande, capas ao lado */ .col-bloco { position: relative; display: grid; grid-template-columns: calc(40 * var(--u)) 1fr; align-items: center; min-height: calc(40 * var(--u)); margin: calc(2 * var(--u)) 0 calc(3 * var(--u)) !important; padding: calc(3 * var(--u)) 0; overflow: hidden; } .col-fundo { position: absolute; inset: 0; z-index: 0; } .col-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .col-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--m-fundo, #000) 0%, color-mix(in srgb, var(--m-fundo, #000) 88%, transparent) 30%, color-mix(in srgb, var(--m-fundo, #000) 55%, transparent) 70%, color-mix(in srgb, var(--m-fundo, #000) 75%, transparent) 100%), linear-gradient(0deg, var(--m-fundo, #000) 0%, transparent 25%, transparent 75%, var(--m-fundo, #000) 100%); } .col-texto { position: relative; z-index: 1; padding-left: var(--margem); padding-right: calc(3 * var(--u)); } .col-texto small { display: block; font-size: calc(1.4 * var(--u)); font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: #ffffffa6; margin-bottom: calc(1 * var(--u)); } .col-texto h3 { font-size: calc(4.4 * var(--u)) !important; line-height: 1.05; font-weight: 800; margin-bottom: calc(1.4 * var(--u)) !important; padding: 0 !important; } .col-texto p { font-size: calc(1.6 * var(--u)); line-height: 1.45; color: #ffffffb3; } .col-capas { position: relative; z-index: 1; padding-left: 0 !important; } .netflix .col-texto small { color: #e50914; } .prime .col-texto small { color: #1a98ff; } .crunchyroll .col-texto small { color: #f47521; } .appletv .col-texto h3 { font-weight: 700; } /* ===================== CRUNCHYROLL: acabamento ===================== */ /* botões quadrados com ícone visível */ .crunchyroll .m-heroi .info .btn-borda, .crunchyroll .faixa-destaque .btn-borda { width: calc(4.8 * var(--u)) !important; height: calc(4.8 * var(--u)) !important; padding: 0 !important; justify-content: center; } .crunchyroll .btn-borda svg { width: calc(2.2 * var(--u)) !important; height: calc(2.2 * var(--u)) !important; flex: 0 0 auto; } /* texto sempre legível sobre imagens claras de anime */ .crunchyroll .m-heroi .veu { background: linear-gradient(0deg, #000 0%, #000c 18%, #0000 45%), linear-gradient(90deg, #000 0%, #000e 22%, #0009 42%, #0000 62%) !important; } .crunchyroll .m-heroi .info .sinopse { color: #e6e6e6; text-shadow: 0 1px calc(8 * var(--px)) #000; } /* barrinhas do destaque à direita, longe do título da fileira */ .crunchyroll .barras { left: auto !important; right: var(--margem); bottom: calc(11 * var(--u)) !important; } .crunchyroll .barras button { width: calc(4 * var(--u)); height: calc(.6 * var(--u)); } /* banner de destaque: imagem larga ao fundo, informações por cima */ .crunchyroll .faixa-destaque { display: block !important; position: relative; height: calc(44 * var(--u)) !important; margin: calc(1 * var(--u)) var(--margem) calc(3 * var(--u)) !important; background: #000; overflow: hidden; cursor: pointer; } .crunchyroll .faixa-destaque > img:first-child { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: center 30%; } .crunchyroll .faixa-destaque::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, #000d 28%, #0007 50%, #0000 70%), linear-gradient(0deg, #000a 0%, #0000 40%); } .crunchyroll .faixa-destaque .txt { position: absolute; z-index: 2; left: calc(4 * var(--u)); bottom: calc(4 * var(--u)); top: auto; width: min(46%, calc(70 * var(--u))); padding: 0 !important; display: block !important; } .crunchyroll .faixa-destaque .txt .logo-titulo { max-height: calc(10 * var(--u)) !important; max-width: 60%; margin-bottom: calc(1.6 * var(--u)) !important; display: block; } .crunchyroll .faixa-destaque .meta-c { font-size: calc(1.5 * var(--u)); margin-bottom: calc(1.2 * var(--u)); } .crunchyroll .faixa-destaque .sinopse { font-size: calc(1.7 * var(--u)) !important; -webkit-line-clamp: 3; margin-bottom: calc(2 * var(--u)); color: #dadada; } .crunchyroll .faixa-destaque .btn { height: calc(4.8 * var(--u)); font-size: calc(1.5 * var(--u)); } .crunchyroll .faixa-destaque:hover > img:first-child, .crunchyroll .faixa-destaque:focus-visible > img:first-child { transform: scale(1.03); } .crunchyroll .faixa-destaque > img:first-child { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); } .crunchyroll .faixa-destaque:focus-visible { box-shadow: 0 0 0 3px #f47521; } /* nomes embaixo das capas: uma linha, sem cortar no meio da palavra */ .crunchyroll .m-card .nome-c { font-size: calc(1.55 * var(--u)); font-weight: 700; } .crunchyroll .top10 .m-card .numero { color: #000; -webkit-text-stroke: 2px #f47521; font-weight: 900; line-height: .8; margin-right: calc(-1 * var(--u)); font-family: "Lato", sans-serif; } .crunchyroll .top10 .m-card .nome-c, .crunchyroll .top10 .m-card .sub-c { display: none; } /* sem menu lateral: só a marca no canto de cima */ .modo.netflix, .modo.crunchyroll { --margem: clamp(calc(40 * var(--px)), 4.2vw, calc(80 * var(--px))); } .m-marca { position: fixed; z-index: 100; top: calc(3 * var(--u)); left: var(--margem); display: flex; align-items: center; gap: calc(1 * var(--u)); pointer-events: none; } .m-marca img { height: calc(3.4 * var(--u)); } .m-marca.cr img { height: calc(3.6 * var(--u)); filter: brightness(0) saturate(100%) invert(53%) sepia(81%) saturate(2016%) hue-rotate(347deg) brightness(99%) contrast(93%); } .m-marca.cr b { color: #f47521; font: 900 calc(2.6 * var(--u)) "Lato", sans-serif; letter-spacing: -.02em; } .netflix .m-heroi .info { top: calc(10 * var(--u)) !important; } .crunchyroll .m-heroi .info { bottom: calc(13 * var(--u)) !important; } /* coleção: texto com largura certa */ .col-texto p { padding: 0 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .col-texto h3 { padding: 0 !important; } /* ===================== MENOS CAPAS, MAIS RESPIRO (como o Prime) ===================== */ .modo .m-fileira .m-card { width: calc(20 * var(--u)) !important; } .modo .m-fileira.fmt-grande .m-card { width: calc(27 * var(--u)) !important; } .modo .m-fileira .m-card.exp-card { height: calc(40.5 * var(--u)); } .modo .m-fileira .m-card.exp-card:hover, .modo .m-fileira .m-card.exp-card:focus-visible { width: calc(72 * var(--u)) !important; } .modo .top10 .m-card { width: calc(30 * var(--u)) !important; } .modo .top10 .m-card .numero { font-size: calc(17 * var(--u)) !important; } .appletv .top10 .m-card { width: calc(20 * var(--u)) !important; } .m-fileira .trilho, .modo .m-fileira .trilho { gap: calc(2 * var(--u)) !important; } .m-fileira { margin-bottom: calc(3.6 * var(--u)) !important; } .m-fileira h3 { font-size: calc(2.5 * var(--u)) !important; margin-bottom: calc(1 * var(--u)) !important; } .col-bloco { margin: calc(3 * var(--u)) 0 calc(5 * var(--u)) !important; } .vt { height: calc(30 * var(--u)); } .modo .m-fileira .m-card.vt-grande { width: calc(80 * var(--u)) !important; } .modo .m-fileira .m-card.gen-tile { width: calc(34 * var(--u)) !important; } /* início (app dele) também com mais respiro */ .capa { width: calc(18 * var(--u)) !important; } .fileira .trilho { gap: calc(1.8 * var(--u)); } /* ===================== INÍCIO: curadoria visual ===================== */ /* os 7 streamings inteiros na tela, menores, com moldura definida */ .faixa-marcas .trilho { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(1.2 * var(--u)) !important; overflow: visible !important; padding: calc(1.2 * var(--u)) 0 calc(1.6 * var(--u)) !important; } .faixa-marcas .marca-card { width: auto !important; aspect-ratio: 16/9; border-radius: calc(1.2 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) calc(-1.4 * var(--u)) #000, inset 0 0 0 1px #ffffff26; } .faixa-marcas .marca-card .logo-marca { left: calc(1.4 * var(--u)); bottom: calc(1.4 * var(--u)); max-width: 58%; max-height: 32%; } .faixa-marcas .marca-card:hover, .faixa-marcas .marca-card:focus-visible { transform: translateY(calc(-.6 * var(--u))) scale(1.05); box-shadow: 0 calc(1.6 * var(--u)) calc(3 * var(--u)) calc(-1.4 * var(--u)) #000, 0 0 0 2px #fff; } .faixa-marcas .marca-card.escolhida { box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) calc(-1.4 * var(--u)) #000, inset 0 0 0 2px #ffffffd9; } /* prévia do streaming escolhido: capas pequenas */ .vitrine .capa { width: calc(13 * var(--u)) !important; } .vitrine .capa .faixa { font-size: calc(1.05 * var(--u)); padding: calc(.4 * var(--u)) 0; } /* Novos Filmes: capas grandes */ .fileira.grande .capa { width: calc(23 * var(--u)) !important; } .fileira.grande .capa .faixa { font-size: calc(1.4 * var(--u)); padding: calc(.7 * var(--u)) 0; } /* Aclamados: capas médias */ .fileira.media .capa { width: calc(17 * var(--u)) !important; } /* coleção no início, nas cores do app dele */ .col-inicio { --m-fundo: #0a0d18; } .col-inicio .col-texto small { background: var(--grad); -webkit-background-clip: text; color: transparent; } .col-inicio .trilho { padding-left: 0 !important; padding-right: var(--margem) !important; } .col-inicio .capa { width: calc(17 * var(--u)) !important; } .fileira h2 { margin-bottom: calc(1 * var(--u)); } .fileira { margin-bottom: calc(3.4 * var(--u)) !important; } /* fim do destaque some sem deixar linha */ .heroi .veu { background: linear-gradient(0deg, var(--fundo) 0%, var(--fundo) 7%, #0a0d1800 46%), linear-gradient(90deg, #0a0d18f2 0%, #0a0d18b0 32%, #0a0d1800 62%), linear-gradient(180deg, #0a0d1899 0%, #0a0d1800 22%) !important; } .heroi { overflow: hidden; contain: paint; } /* sem a fileira de prévia: Novos Filmes sobe para logo abaixo dos streamings */ .faixa-marcas { margin-bottom: calc(1 * var(--u)); } /* ===================== NADA CORTADO AO CRESCER (fileiras com folga) ===================== A fileira rola para os lados, então corta o que passa da altura dela: a folga em cima e embaixo tem que ser maior que o crescimento + moldura do item escolhido. */ .modo .m-fileira .trilho { padding-top: calc(3.2 * var(--u)) !important; padding-bottom: calc(3.2 * var(--u)) !important; margin-top: calc(-2.2 * var(--u)) !important; margin-bottom: calc(-2.2 * var(--u)) !important; } .modo .m-fileira { margin-bottom: calc(3 * var(--u)) !important; } .modo .m-fileira h3 { position: relative; z-index: 1; } .vt { height: calc(36.4 * var(--u)); } .col-bloco { padding: calc(4 * var(--u)) 0 !important; } .col-bloco .trilho { margin-top: 0 !important; margin-bottom: 0 !important; } /* início (app dele) */ .fileira .trilho { padding-top: calc(3.2 * var(--u)) !important; padding-bottom: calc(3.2 * var(--u)) !important; margin-top: calc(-2.2 * var(--u)) !important; margin-bottom: calc(-2 * var(--u)) !important; } /* descrição: fileira de baixo com folga e altura que comporta */ .tv-conteudo { height: calc(31 * var(--u)); } .tv-linha { padding-top: calc(2.6 * var(--u)) !important; padding-bottom: calc(1 * var(--u)); } .tv-abas { margin-bottom: 0 !important; } /* o último cartão também tem espaço para se abrir inteiro dentro da tela */ .fmt-grande .trilho::after { content: ""; flex: 0 0 calc(50 * var(--u)); } /* descrição: a área de baixo tem a largura da tela (a fileira rola dentro dela) */ .tela-tv { grid-template-columns: minmax(0, 1fr); } .tv-baixo, .tv-cima, .tv-conteudo { min-width: 0; } /* coleção: folga dos lados para a capa escolhida crescer sem cortar */ .col-capas, .col-inicio .trilho { padding-left: calc(3 * var(--u)) !important; padding-right: var(--margem) !important; } .col-bloco { grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); } /* ===================== TOPO PADRÃO (igual em todos os streamings) ===================== */ .modo { --topo-h: calc(9 * var(--u)); } .m-topo { height: var(--topo-h) !important; padding: 0 var(--margem) !important; gap: calc(3 * var(--u)) !important; align-items: center; } .m-topo .logo-m { height: calc(3.8 * var(--u)) !important; width: auto; } .m-topo nav { gap: calc(.6 * var(--u)) !important; } .m-topo nav a { font-size: calc(2 * var(--u)) !important; padding: calc(.8 * var(--u)) calc(1.8 * var(--u)) !important; } .m-topo .direita { gap: calc(2 * var(--u)) !important; margin-right: calc(25 * var(--u)) !important; } .m-topo .direita svg { width: calc(2.6 * var(--u)) !important; height: calc(2.6 * var(--u)) !important; } .m-topo .perfil, .m-topo .avatar { width: calc(4.4 * var(--u)) !important; height: calc(4.4 * var(--u)) !important; } .appletv .m-topo .direita { right: calc(var(--margem) + 25 * var(--u)) !important; margin-right: 0 !important; } .appletv .m-topo .direita .ic { width: calc(4.4 * var(--u)) !important; height: calc(4.4 * var(--u)) !important; } .m-marca { top: calc((var(--topo-h) - 3.8 * var(--u)) / 2) !important; } .m-marca img { height: calc(3.8 * var(--u)) !important; } .m-marca.cr b { font-size: calc(2.8 * var(--u)) !important; } /* voltar ao início: maior e na mesma linha do topo */ .voltar-app { top: calc((9 * var(--u) - 5.6 * var(--u)) / 2) !important; right: var(--margem) !important; left: auto !important; bottom: auto !important; height: calc(5.6 * var(--u)) !important; padding: 0 calc(2.2 * var(--u)) 0 calc(.8 * var(--u)) !important; gap: calc(1.2 * var(--u)) !important; font-size: calc(1.9 * var(--u)) !important; } .voltar-app .bola { width: calc(4 * var(--u)) !important; height: calc(4 * var(--u)) !important; } .voltar-app .bola svg { width: calc(2.4 * var(--u)) !important; height: calc(2.4 * var(--u)) !important; } /* conteúdo do destaque começa abaixo do topo */ .netflix .m-heroi .info { top: calc(11 * var(--u)) !important; } /* ===================== CRUNCHYROLL: play junto da descrição ===================== */ .crunchyroll .m-card .por-cima { display: flex; flex-direction: column; padding: calc(1.6 * var(--u)); background: linear-gradient(0deg, #141519 0%, #141519f2 55%, #141519cc 100%); } .crunchyroll .por-cima b { font-size: calc(1.9 * var(--u)) !important; margin-bottom: calc(.6 * var(--u)) !important; } .crunchyroll .por-cima .estrelas { font-size: calc(1.4 * var(--u)) !important; } .crunchyroll .por-cima p { font-size: calc(1.4 * var(--u)) !important; -webkit-line-clamp: 4 !important; margin-top: calc(.8 * var(--u)) !important; } .cr-acoes { margin-top: auto; display: flex; gap: calc(.8 * var(--u)); } .cr-play { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(.6 * var(--u)); height: calc(4.4 * var(--u)); background: #f47521; color: #000; font-weight: 900; font-size: calc(1.5 * var(--u)); text-transform: uppercase; letter-spacing: .02em; } .cr-play svg { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); } .cr-mais { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); display: grid; place-items: center; box-shadow: inset 0 0 0 2px #f47521; color: #f47521; } .cr-mais svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); } /* destaque visível em todo item do Crunchyroll (Top 10, coleção, fileiras) */ .crunchyroll .m-card { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .crunchyroll .m-card:hover, .crunchyroll .m-card:focus-visible { transform: scale(1.05); z-index: 5; } .crunchyroll .m-card:hover .arte, .crunchyroll .m-card:focus-visible .arte { box-shadow: 0 0 0 3px #f47521, 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1 * var(--u)) #000; } .crunchyroll .top10 .m-card:hover .numero, .crunchyroll .top10 .m-card:focus-visible .numero { color: #f47521; } .crunchyroll .m-card.exp-card:hover, .crunchyroll .m-card.exp-card:focus-visible { transform: none !important; } /* voltar sempre na tela (na TV o usuário precisa ver para onde ir) */ body:has(.m-pagina) .voltar-app { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } .voltar-app .t-voltar { display: none; } body:has(.m-pagina) .voltar-app .t-inicio { display: none; } body:has(.m-pagina) .voltar-app .t-voltar { display: inline; } .tv-volta { display: none !important; } .voltar-app:focus-visible { box-shadow: 0 0 0 3px #fff, 0 calc(2 * var(--u)) calc(4 * var(--u)) -1vh #000; transform: scale(1.06); } /* play e "+" na mesma linha, mesma altura */ .cr-acoes { align-items: stretch; } .cr-add { flex: 0 0 auto; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); margin: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #f47521; color: #f47521; } .cr-add svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); } /* Netflix: a rolagem sempre para no começo de uma fileira */ .netflix .m-fileiras.rola { scroll-snap-type: y mandatory; scroll-padding-top: 0; } .netflix .m-fileiras.rola > .m-fileira { scroll-snap-align: start; } .netflix .m-fileiras.rola .m-fileira.acima { opacity: 0 !important; } /* Netflix: sem esconder fileira — a rolagem encaixa e a borda de cima da área das fileiras corta limpo */ .netflix .m-fileiras.rola .m-fileira.acima { opacity: 1 !important; pointer-events: auto !important; } .netflix .m-fileiras.rola { scroll-behavior: smooth; } /* Netflix: borda de cima das fileiras esmaece (nada é cortado seco ao rolar); a fileira parada encaixa logo abaixo da faixa de esmaecer, inteira */ .netflix .m-fileiras.rola { top: calc(39 * var(--u)) !important; padding-top: calc(7 * var(--u)) !important; scroll-padding-top: calc(7 * var(--u)) !important; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(7 * var(--u))) !important; mask-image: linear-gradient(180deg, transparent 0, #000 calc(7 * var(--u))) !important; } .netflix .m-fileiras.rola { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(4.6 * var(--u)), #000 calc(7 * var(--u))) !important; mask-image: linear-gradient(180deg, transparent 0, transparent calc(4.6 * var(--u)), #000 calc(7 * var(--u))) !important; } /* ===================== NETFLIX IGUAL AOS OUTROS: a página rola inteira (sem janela de fileiras) ===================== */ .modo.netflix { overflow-y: auto !important; --m-topo-rolou: #141414f2; } .netflix .m-heroi { position: relative !important; inset: auto !important; height: calc(54 * var(--u)) !important; } .netflix .m-heroi .veu { background: linear-gradient(0deg, #141414 0%, #14141400 40%), linear-gradient(90deg, #141414e6 0%, #14141499 30%, #14141400 60%) !important; } .netflix .m-heroi .info { top: auto !important; bottom: calc(13 * var(--u)) !important; } .netflix .bandeira-idade { top: auto !important; bottom: calc(15 * var(--u)) !important; } .netflix .m-fileiras { position: relative !important; inset: auto !important; top: auto !important; padding: 0 !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: none !important; margin-top: calc(-9 * var(--u)) !important; z-index: 4; } .netflix .m-fileiras > .m-fileira { scroll-snap-align: none !important; opacity: 1 !important; } /* topo da Netflix e do Crunchyroll no mesmo padrão dos outros */ .netflix .m-topo, .crunchyroll .m-topo { background: linear-gradient(#000b, #0000); } .netflix .m-topo.rolou { background: #141414f2; } .crunchyroll .m-topo { background: #000a !important; } .crunchyroll .m-topo.rolou { background: #141519f2 !important; } .netflix .m-topo nav a, .crunchyroll .m-topo nav a { color: #e5e5e5; border-radius: 999px; } .netflix .m-topo nav a.ativo { color: #fff; font-weight: 700; } .crunchyroll .m-topo nav a.ativo { color: #f47521; font-weight: 800; background: transparent; } .crunchyroll .m-topo nav a:hover, .crunchyroll .m-topo nav a:focus-visible { background: #ffffff1a; color: #fff; } .m-marca { display: none !important; } /* Apple TV: Top 10 com número pequeno ao lado do nome (como no app) */ .appletv .top10 .m-card .legenda { display: flex !important; align-items: center; gap: calc(1.2 * var(--u)); margin-top: calc(1.2 * var(--u)); } .appletv .top10 .m-card .legenda .numero { font-size: calc(3.6 * var(--u)) !important; font-weight: 700; line-height: 1; flex: 0 0 auto; text-align: left !important; -webkit-text-stroke: 0 !important; color: #fff !important; margin: 0 !important; } .appletv .top10 .m-card .legenda > div { font-size: calc(1.5 * var(--u)); font-weight: 600; line-height: 1.25; min-width: 0; } .appletv .top10 .m-card .legenda small { display: block; font-size: calc(1.3 * var(--u)); color: #ffffff80; font-weight: 500; } /* topo do Apple TV com fundo ao rolar (nada passa visível atrás da logo) */ .appletv .m-topo.rolou { background: #000000f2 !important; } .appletv .m-topo.rolou { background: #000 !important; } /* topo do streaming: só a marca (o Voltar fica à direita, fixo) */ .m-topo nav, .m-topo .direita { display: none !important; } .appletv .m-topo { justify-content: flex-start !important; } .appletv .m-topo .logo-m { position: static !important; } .generico .m-topo .logo-m:not([style]) { filter: none !important; } /* ===================================================================================== PERSONALIDADE DE CADA STREAMING (mesmas funções, cara própria) ===================================================================================== */ /* aberturas novas */ .voo-arco { position: absolute; left: 50%; top: 50%; width: calc(60 * var(--u)); transform: translate(-50%, -78%); overflow: visible; pointer-events: none; } .voo-arco path { fill: none; stroke: #9fd9ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 260; filter: drop-shadow(0 0 6px #6fc3ff); } .voo-faixa { position: absolute; left: 50%; top: 50%; width: 120vw; height: calc(14 * var(--u)); transform: translate(-50%, -50%) scaleX(0); background: linear-gradient(90deg, transparent, var(--cor) 30%, #ff7a3d 70%, transparent); } .voo-feixe { position: absolute; left: 50%; top: 50%; width: 90vw; height: calc(50 * var(--u)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #3b5bffcc, #1b2fd080 45%, transparent); } /* ---------- DISNEY+ : azul-noite com brilho, destaque em cartão, branco forte no escolhido ---------- */ .modo.g-disney { background: radial-gradient(120% 80% at 50% 0%, #1b2a5a 0%, #0e1530 35%, #060a1c 70%) fixed, #060a1c; font-family: "Inter", -apple-system, sans-serif; } .g-disney .m-topo.rolou { background: #060a1cf2 !important; } .g-disney .m-heroi { margin: calc(10 * var(--u)) var(--margem) 0; height: calc(46 * var(--u)) !important; border-radius: calc(1.4 * var(--u)); overflow: hidden; box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) #000c, inset 0 0 0 1px #ffffff1f; } .g-disney .m-heroi .veu { background: linear-gradient(90deg, #060a1ce6 0%, #060a1c99 35%, #060a1c00 65%) !important; } .g-disney .m-heroi .info { left: calc(5 * var(--u)) !important; bottom: calc(6 * var(--u)) !important; } .g-disney .m-heroi .pontos { bottom: calc(2.4 * var(--u)) !important; right: calc(3 * var(--u)); left: auto; transform: none; } .g-disney .m-fileiras { margin-top: calc(3 * var(--u)) !important; } .g-disney .m-heroi .info .btn { border-radius: calc(.5 * var(--u)) !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .g-disney .m-heroi .info .btn-vidro { background: #00000066 !important; box-shadow: inset 0 0 0 2px #f9f9f9cc; } .g-disney .m-fileira h3 { font-weight: 600 !important; letter-spacing: .01em; color: #f9f9f9; } .g-disney .m-card .arte { border-radius: calc(1 * var(--u)) !important; box-shadow: 0 calc(1.6 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) #000e; } .g-disney .m-card:hover, .g-disney .m-card:focus-visible { transform: scale(1.06) !important; } .g-disney .m-card:hover .arte, .g-disney .m-card:focus-visible .arte { box-shadow: 0 0 0 calc(.4 * var(--u)) #f9f9f9, 0 calc(2.6 * var(--u)) calc(5 * var(--u)) calc(-1 * var(--u)) #000; } .g-disney .top10 .m-card .numero { -webkit-text-stroke: 2px #9fd9ff !important; color: #060a1c !important; } .g-disney .gen-tile { --g-cor: #2a4fd6 !important; border-radius: calc(1 * var(--u)) !important; } .g-disney .col-texto small { color: #9fd9ff !important; } .g-disney .exp-play, .g-disney .vt-btn { text-transform: uppercase; letter-spacing: .1em; border-radius: calc(.5 * var(--u)); } /* ---------- GLOBOPLAY : preto com coral, cantos retos, coral no escolhido ---------- */ .modo.g-globoplay { background: #0b0b0c; font-family: "Inter", -apple-system, sans-serif; --gp: #ff2a3c; } .g-globoplay .m-topo.rolou { background: #0b0b0cf2 !important; box-shadow: inset 0 -2px 0 var(--gp); } .g-globoplay .m-heroi .veu { background: linear-gradient(0deg, #0b0b0c 0%, #0b0b0c00 45%), linear-gradient(90deg, #0b0b0cf2 0%, #0b0b0caa 32%, #0b0b0c00 62%) !important; } .g-globoplay .m-heroi .info::before { content: ""; display: block; width: calc(6 * var(--u)); height: calc(.6 * var(--u)); background: linear-gradient(90deg, var(--gp), #ff7a3d); margin-bottom: calc(2 * var(--u)); } .g-globoplay .m-heroi .info .btn { border-radius: calc(.3 * var(--u)) !important; font-weight: 800; } .g-globoplay .m-heroi .info .btn-forte { background: linear-gradient(90deg, var(--gp), #ff5a36) !important; color: #fff !important; } .g-globoplay .m-heroi .info .btn-vidro { background: #ffffff1f !important; } .g-globoplay .pontos button.ativo { background: var(--gp) !important; } .g-globoplay .m-fileira h3 { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font-weight: 800 !important; } .g-globoplay .m-fileira h3::before { content: ""; width: calc(.5 * var(--u)); height: calc(2.4 * var(--u)); background: linear-gradient(180deg, var(--gp), #ff7a3d); border-radius: 2px; } .g-globoplay .m-card .arte { border-radius: calc(.3 * var(--u)) !important; } .g-globoplay .m-card:hover, .g-globoplay .m-card:focus-visible { transform: scale(1.05) !important; } .g-globoplay .m-card:hover .arte, .g-globoplay .m-card:focus-visible .arte { box-shadow: 0 0 0 calc(.35 * var(--u)) var(--gp), 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1 * var(--u)) #000; } .g-globoplay .top10 .m-card .numero { -webkit-text-stroke: 2px var(--gp) !important; color: #0b0b0c !important; font-style: italic; } .g-globoplay .gen-tile { --g-cor: #ff2a3c !important; border-radius: calc(.3 * var(--u)) !important; } .g-globoplay .col-texto small { color: var(--gp) !important; } .g-globoplay .exp-card, .g-globoplay .vt-grande { border-radius: calc(.3 * var(--u)) !important; } .g-globoplay .exp-play, .g-globoplay .vt-btn { background: linear-gradient(90deg, #ff2a3c, #ff5a36); color: #fff; border-radius: calc(.3 * var(--u)); } .g-globoplay .selo-novo { background: var(--gp); color: #fff; } /* ---------- MAX : preto com azul profundo, tipografia larga, escolhido limpo e brilhante ---------- */ .modo.g-max { background: radial-gradient(90% 70% at 0% 0%, #0a1f8a 0%, #04104a 30%, #01030f 65%) fixed, #01030f; font-family: "Inter", -apple-system, sans-serif; } .g-max .m-topo.rolou { background: #01030ff2 !important; } .g-max .m-heroi .veu { background: linear-gradient(0deg, #01030f 0%, #01030f00 45%), linear-gradient(90deg, #01030ff2 0%, #01030faa 32%, #01030f00 62%) !important; } .g-max .m-heroi .info .meta-p { text-transform: uppercase; letter-spacing: .18em; font-size: calc(1.4 * var(--u)) !important; color: #c9d3ff !important; font-weight: 700; } .g-max .m-heroi .info .btn { border-radius: calc(.6 * var(--u)) !important; font-weight: 800; letter-spacing: .02em; } .g-max .m-heroi .info .btn-vidro { background: #ffffff1a !important; box-shadow: inset 0 0 0 1px #ffffff40; } .g-max .pontos button.ativo { background: #fff !important; box-shadow: 0 0 calc(1 * var(--u)) #6f86ff; } .g-max .m-fileira h3 { font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; font-size: calc(2 * var(--u)) !important; color: #e6eaff; } .g-max .m-card .arte { border-radius: calc(.6 * var(--u)) !important; } .g-max .m-card:hover, .g-max .m-card:focus-visible { transform: scale(1.06) !important; } .g-max .m-card:hover .arte, .g-max .m-card:focus-visible .arte { box-shadow: 0 0 0 2px #fff, 0 0 calc(3 * var(--u)) #3b5bff99, 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1 * var(--u)) #000; } .g-max .top10 .m-card .numero { color: transparent !important; -webkit-text-stroke: 2px #6f86ff !important; font-weight: 900; } .g-max .gen-tile { --g-cor: #2b4bff !important; border-radius: calc(.6 * var(--u)) !important; } .g-max .col-texto small { color: #8ea0ff !important; } .g-max .col-texto h3 { text-transform: uppercase; letter-spacing: .04em; } /* ---------- APPLE TV : jeito tvOS (degradê suave, cantos arredondados, item escolhido salta) ---------- */ .modo.appletv { background: linear-gradient(180deg, #1c1c1e 0%, #000 55%) fixed, #000; } .appletv .m-card .arte { border-radius: calc(1.4 * var(--u)) !important; } .appletv .m-card:hover, .appletv .m-card:focus-visible { transform: scale(1.1) translateY(calc(-.6 * var(--u))) !important; } .appletv .m-card:hover .arte, .appletv .m-card:focus-visible .arte { box-shadow: 0 calc(3 * var(--u)) calc(5 * var(--u)) calc(-1 * var(--u)) #000; } .appletv .m-fileira h3 { font-weight: 700 !important; } /* descrições no estilo de cada um */ .tv-disney { background: #060a1c; } .tv-disney .btn-forte { text-transform: uppercase; letter-spacing: .12em; border-radius: calc(.5 * var(--u)) !important; } .tv-disney .tv-risco { background: #f9f9f9 !important; } .tv-globoplay { background: #0b0b0c; } .tv-globoplay .btn-forte { background: linear-gradient(90deg, #ff2a3c, #ff5a36) !important; color: #fff !important; border-radius: calc(.3 * var(--u)) !important; } .tv-globoplay .tv-risco { background: #ff2a3c !important; } .tv-max { background: #01030f; } .tv-max .tv-meta { text-transform: uppercase; letter-spacing: .14em; } .tv-max .tv-risco { background: #6f86ff !important; } /* ===================== INÍCIO: ESPORTES ===================== */ .esportes { padding: 0 var(--margem); } .esp-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(3 * var(--u)); margin-bottom: calc(1.2 * var(--u)); } .esp-cab h2 { padding: 0 !important; margin: 0 0 calc(.4 * var(--u)) !important; } .esp-cab small { color: var(--suave); font-size: calc(1.5 * var(--u)); } .esp-chips { display: flex; gap: calc(1 * var(--u)); padding: calc(.6 * var(--u)); border-radius: 999px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; } .esp-chip { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); height: calc(5.2 * var(--u)); padding: 0 calc(2.4 * var(--u)); border-radius: 999px; color: #dfe1ec; font-weight: 700; font-size: calc(1.7 * var(--u)); transition: background .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1); } .esp-chip svg { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); } .esp-chip img { height: calc(3 * var(--u)); width: auto; max-width: calc(9 * var(--u)); object-fit: contain; display: none; } .esp-chip.com-logo img { display: block; } .esp-chip.com-logo span { display: none; } .esp-chip.ativo { background: var(--grad); color: #fff; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) #e8458b80; } .esp-chip:hover, .esp-chip:focus-visible { transform: scale(1.06); background: #ffffff24; color: #fff; } .esp-chip.ativo:hover, .esp-chip.ativo:focus-visible { background: var(--grad); box-shadow: 0 0 0 2px #fff; } .esp-jogos { margin: 0 calc(-1 * var(--margem)) !important; padding-left: var(--margem) !important; padding-right: var(--margem) !important; gap: calc(1.8 * var(--u)) !important; transition: opacity .3s; } .esp-jogos.trocando { opacity: 0; } .esp-vazio { color: var(--suave); font-size: calc(1.6 * var(--u)); padding: calc(4 * var(--u)) 0; } .ev-card { flex: 0 0 auto; position: relative; width: calc(36 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(1.4 * var(--u)); padding: calc(1.6 * var(--u)) calc(2 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, #1d2240 0%, #151a30 55%, #2a1838 100%); box-shadow: inset 0 0 0 1px #ffffff14, 0 calc(1.4 * var(--u)) calc(3 * var(--u)) calc(-1.4 * var(--u)) #000; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; } .ev-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 20% 50%, #7b3fe426, transparent 70%), radial-gradient(60% 90% at 80% 50%, #ff9a3c1f, transparent 70%); pointer-events: none; } .ev-card:hover, .ev-card:focus-visible { transform: translateY(calc(-.6 * var(--u))) scale(1.04); box-shadow: 0 0 0 2px #fff, 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1 * var(--u)) #000; } .ev-topo { position: relative; display: flex; justify-content: space-between; align-items: center; gap: calc(1 * var(--u)); } .ev-liga { font-size: calc(1.3 * var(--u)); font-weight: 700; color: #c7cbe0; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-st { flex: 0 0 auto; display: inline-flex; align-items: center; gap: calc(.6 * var(--u)); font-size: calc(1.15 * var(--u)); font-weight: 800; letter-spacing: .06em; padding: calc(.45 * var(--u)) calc(1 * var(--u)); border-radius: 999px; } .ev-st.vivo { background: #e5383b; color: #fff; } .ev-st.vivo b { width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); border-radius: 50%; background: #fff; animation: pulsa 1.6s infinite; } .ev-st.breve { background: #ffffff1a; color: #fff; } .ev-st.fim { background: #ffffff12; color: var(--suave); } .ev-confronto { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; } .ev-confronto img { width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); object-fit: contain; filter: drop-shadow(0 calc(.4 * var(--u)) calc(1 * var(--u)) #0009); } .ev-placar { font-size: calc(3.6 * var(--u)); font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; gap: calc(1 * var(--u)); } .ev-placar i { font-style: normal; color: #ffffff66; font-weight: 600; } .ev-placar i.vs { font-size: calc(2 * var(--u)); color: #ffffff80; } .ev-times { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: calc(1 * var(--u)); font-size: calc(1.45 * var(--u)); font-weight: 700; } .ev-times span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev-times span:last-child { text-align: right; } .ev-arte .ev-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .ev-arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0a0d18f2 0%, #0a0d1866 60%, #0a0d18aa 100%); } .ev-arte > * { position: relative; z-index: 1; } .ev-nome-evento { font-size: calc(2.2 * var(--u)); font-weight: 900; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; } .ev-rodape { font-size: calc(1.3 * var(--u)); color: #c7cbe0; } /* ===================== INÍCIO: COLETÂNEAS ===================== */ .coletaneas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(2.4 * var(--u)); padding: 0 var(--margem); align-items: stretch; } .colet-palco { position: relative; min-height: calc(46 * var(--u)); border-radius: calc(1.6 * var(--u)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: inset 0 0 0 1px #ffffff14, 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1.6 * var(--u)) #000; background: #12162a; } .colet-fundo { position: absolute; inset: 0; } .colet-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; } .colet-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0a0d18 0%, #0a0d18e6 30%, #0a0d1866 65%, #0a0d1833 100%), linear-gradient(90deg, #0a0d18cc 0%, #0a0d1800 60%); } .colet-info { position: relative; z-index: 1; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(1 * var(--u)); } .colet-info > * { opacity: 0; transform: translateY(calc(1.4 * var(--u))); } .colet-info.entra > * { animation: sobe .6s cubic-bezier(.2,.8,.2,1) forwards; } .colet-info.entra > *:nth-child(2) { animation-delay: .06s; } .colet-info.entra > *:nth-child(3) { animation-delay: .12s; } .colet-info.entra > *:nth-child(4) { animation-delay: .18s; } .colet-info small { display: block; font-size: calc(1.3 * var(--u)); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; color: transparent; margin-bottom: calc(1.2 * var(--u)); } .colet-marca img { max-height: calc(10 * var(--u)); max-width: 70%; object-fit: contain; object-position: left bottom; display: block; margin-bottom: calc(1 * var(--u)); filter: drop-shadow(0 calc(.4 * var(--u)) calc(1.6 * var(--u)) #000a); } .colet-info h3 { font-size: calc(2.4 * var(--u)); font-weight: 800; margin-bottom: calc(1 * var(--u)); } .colet-qtd { display: inline-block; font-size: calc(1.4 * var(--u)); font-weight: 700; padding: calc(.5 * var(--u)) calc(1.4 * var(--u)); border-radius: 999px; background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff26; } .colet-filmes { position: relative; z-index: 1; gap: calc(1.2 * var(--u)) !important; padding: calc(1.6 * var(--u)) calc(3 * var(--u)) calc(2.6 * var(--u)) !important; margin: 0 !important; } .colet-filme { flex: 0 0 auto; width: calc(9 * var(--u)); text-align: center; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .colet-filme img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: calc(.7 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) calc(-1 * var(--u)) #000; } .colet-filme small { display: block; margin-top: calc(.5 * var(--u)); font-size: calc(1.15 * var(--u)); color: var(--suave); font-weight: 600; } .colet-filme:hover, .colet-filme:focus-visible { transform: translateY(calc(-.5 * var(--u))) scale(1.08); } .colet-filme:hover img, .colet-filme:focus-visible img { box-shadow: 0 0 0 2px #fff; } .colet-capas { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: calc(1.6 * var(--u)) !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; align-content: start; } .colet-capa { position: relative; border-radius: calc(1 * var(--u)); overflow: hidden; cursor: pointer; aspect-ratio: 2/3; box-shadow: inset 0 0 0 1px #ffffff14; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, opacity .3s; opacity: .72; } .colet-capa img { width: 100%; height: 100%; object-fit: cover; } .colet-capa.ativa { opacity: 1; box-shadow: 0 0 0 2px #ffffffb3; } .colet-capa:hover, .colet-capa:focus-visible { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 calc(.35 * var(--u)) #fff, 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-1 * var(--u)) #000; z-index: 2; } .coletaneas .colet-capas .colet-capa:nth-child(n+7) { display: none; } /* 6 por vez na grade, as outras entram pela seta */ /* as 12 coleções cabem na grade ao lado do palco (6 x 2), sem esconder nenhuma */ .colet-capas { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: calc(1.2 * var(--u)) !important; align-content: center; } .coletaneas .colet-capas .colet-capa:nth-child(n+7) { display: block; } .esp-chip img[data-liga="4443"] { height: calc(6 * var(--u)); max-width: none; margin: calc(-1.2 * var(--u)) calc(-.6 * var(--u)); } /* Coletâneas: mais claro, menos informação, 6 sagas maiores */ .coletaneas { grid-template-columns: minmax(0, 1fr) calc(46 * var(--u)) !important; grid-template-rows: auto auto; row-gap: calc(1.4 * var(--u)) !important; } .coletaneas > h2 { grid-column: 1 / -1; padding: 0 !important; margin: 0 !important; } .colet-palco { min-height: calc(44 * var(--u)) !important; } .colet-fundo::after { background: linear-gradient(90deg, #0a0d18d9 0%, #0a0d1866 38%, #0a0d1800 62%), linear-gradient(0deg, #0a0d18cc 0%, #0a0d1800 45%) !important; } .colet-marca img { max-height: calc(11 * var(--u)) !important; margin-bottom: calc(1.4 * var(--u)) !important; } .colet-capas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: calc(1.6 * var(--u)) !important; align-content: stretch !important; } .colet-capa { opacity: 1 !important; } .colet-capa:not(.ativa):not(:hover):not(:focus-visible) { filter: brightness(.88); } /* Coletâneas: faixa com a cor da saga (o bloco se destaca da página; nada de escuro sobre escuro) */ @property --cc { syntax: ""; inherits: true; initial-value: #3b2a7a; } .coletaneas { --cc: #3b2a7a; transition: --cc .7s ease; margin: calc(3 * var(--u)) 0 calc(4 * var(--u)) !important; padding: calc(4 * var(--u)) var(--margem) calc(4.4 * var(--u)) !important; background: radial-gradient(70% 120% at 15% 0%, color-mix(in srgb, var(--cc) 100%, #fff 12%) 0%, transparent 60%), linear-gradient(135deg, var(--cc) 0%, color-mix(in srgb, var(--cc) 55%, #0a0d18) 100%); } .coletaneas > h2 { color: #fff; } .colet-palco { background: color-mix(in srgb, var(--cc) 40%, #000) !important; box-shadow: 0 calc(2.4 * var(--u)) calc(5 * var(--u)) calc(-2 * var(--u)) #000a, inset 0 0 0 1px #ffffff26 !important; } .colet-fundo img { filter: brightness(1.12) saturate(1.08); } .colet-fundo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 45%, #000) 0%, color-mix(in srgb, var(--cc) 45%, #000) 8%, transparent 55%), linear-gradient(0deg, #000a 0%, transparent 42%) !important; } .colet-qtd { background: #ffffff2e !important; } .colet-filme small { color: #ffffffd9 !important; } .colet-capa { box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) calc(-1.2 * var(--u)) #000b !important; } .colet-capa.ativa { box-shadow: 0 0 0 calc(.35 * var(--u)) #fff, 0 calc(1.2 * var(--u)) calc(3 * var(--u)) calc(-1.2 * var(--u)) #000b !important; } .colet-capa:not(.ativa):not(:hover):not(:focus-visible) { filter: none !important; } .voo-halo-disney { position: absolute; left: 50%; top: 50%; width: calc(90 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, #3a7bffaa, #1b3fa855 45%, transparent); pointer-events: none; } .voo-cr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: calc(2 * var(--u)); pointer-events: none; } .voo-cr img { height: calc(10 * var(--u)); width: auto; } .voo-cr b { font: 900 calc(6.4 * var(--u)) "Lato", sans-serif; color: #fff; letter-spacing: -.02em; }