/* amodramas — folha unica, escrita a mao. Sem Tailwind, sem build, sem PostCSS. Tokens iguais aos do tema antigo pra que a cara do site nao mude: fundo #080808, card #121212, borda #242424, rosa #FF75A8. */ /* o atributo hidden SEMPRE oculta — componentes com display próprio (.field flex, etc.) sobrescreviam o hidden e vazavam campos (ex.: a senha do login). */ [hidden]{display:none!important} :root{ --bg:#080808; --card:#121212; --card2:#181818; --surface:#1c1c1c; --line:#242424; --line2:#2e2e2e; --txt:#ffffff; --muted:#a0a0a0; --muted2:#6b6b6b; --primary:#FF75A8; --primary-2:#e0568c; --primary-ink:#ffffff; --premium:#f0b429; --green:#10b981; --red:#ef4444; --radius:12px; --radius-lg:16px; --radius-xl:22px; --shell:1440px; --nav-h:64px; --tab-h:56px; } *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--txt); font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:clip; /* o fundo full-bleed do hero (100vw) nao gera barra horizontal */ padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom)); } @media(min-width:768px){body{padding-bottom:0}} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.2} :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px} ::selection{background:var(--primary);color:#fff} /* mata o zoom do duplo-toque e o flash cinza ao tocar nos controles */ a,button,label,summary,select, input[type=button],input[type=submit],input[type=reset], input[type=checkbox],input[type=radio], [role=button],[data-sheet-open],[data-subscribe]{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* iOS: input com menos de 16px faz a tela dar zoom no foco */ @supports(-webkit-touch-callout:none){ input,select,textarea{font-size:16px !important} } .shell{max-width:var(--shell);margin:0 auto;padding:0 16px} @media(min-width:640px){.shell{padding:0 24px}} @media(min-width:1024px){.shell{padding:0 48px}} .muted{color:var(--muted)} .small{font-size:12px} .center{text-align:center} .stack{display:flex;flex-direction:column;gap:12px} .row{display:flex;align-items:center;gap:10px} .spread{display:flex;align-items:center;justify-content:space-between;gap:12px} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0} .hide-mobile{display:none} @media(min-width:768px){.hide-mobile{display:flex}.hide-desktop{display:none!important}} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ─────────────── topo ─────────────── */ /* Header sólido, sempre fixo no topo (grudado), como o iDrama. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; /* vidro fumê (nao transparente total): dá pra ler o header sobre qualquer conteúdo */ background:rgba(12,12,14,.72); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(255,255,255,.06); transition:transform .34s var(--ease),background .3s,border-color .3s; } /* Esconde ao rolar pra BAIXO; reaparece a cada deslizada pra CIMA (app-fx.js) — PC e celular. */ .nav.nav-hidden{transform:translateY(-100%)} /* Home: no TOPO fica transparente sobre o banner; ao rolar ganha o vidro fumê. */ body.is-home .nav.at-top{background:transparent;border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none} /* O conteúdo começa abaixo do topo fixo. */ main{padding-top:var(--nav-h)} /* A pagina "bare" (paywall, /assinar) esconde a navbar, mas o main continuava reservando os 64px dela — uma faixa preta no topo, acima do papel de parede dourado. Foi o "retangulo preto" que o dono viu na tela. A excecao da linha ~121 (flash-wrap + main) devolve o espaco quando ha um aviso no topo, entao continua valendo. */ body.bare main{padding-top:0} /* A mensagem de flash e irma ANTERIOR do
, e quem compensa a navbar fixa e o `main{padding-top}` acima — entao o aviso nascia debaixo da barra (MEDIDO: alerta em y=16..61,5 dentro da navbar y=0..65, 100% coberto; elementFromPoint devolvia IMG.brand-logo). A compensacao passa pro flash e o
logo depois nao repete o padding. `+` e CSS2, sem :has(). MEDIDO na home depois do patch: alerta em y=80, elementFromPoint devolve DIV.alert e o conteudo continua comecando em 140. Telas BARE (assinar/checkout/login) nao tem navbar mas o main delas SEMPRE teve 64px de padding — a ultima linha devolve esses 64px pra pagina bare nao pular quando ha mensagem (MEDIDO em /assinar: identico com e sem flash, primeiro filho em y=140 nos dois casos). */ .flash-wrap{padding-top:var(--nav-h)} .flash-wrap + main{padding-top:0} body.is-player .flash-wrap,body.is-feed .flash-wrap,body.bare .flash-wrap{padding-top:0} body.bare .flash-wrap + main{padding-top:var(--nav-h)} .nav-in{display:flex;align-items:center;gap:10px;height:var(--nav-h); max-width:var(--shell);margin:0 auto;padding:0 12px} @media(min-width:640px){.nav-in{padding:0 20px;gap:14px}} @media(min-width:1024px){.nav-in{padding:0 32px}} /* Busca ocupando da borda esquerda até onde os botões começam. */ .nav-search{position:relative;display:flex;align-items:center;flex:1;min-width:0} .nav-search .ico{position:absolute;left:13px;color:var(--muted2);pointer-events:none;display:grid} .nav-search input{ width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09); border-radius:999px;padding:10px 16px 10px 38px;font-size:13.5px;color:var(--txt); transition:background .2s,border-color .2s } .nav-search input::placeholder{color:var(--muted2)} .nav-search input:focus{outline:none;background:rgba(255,255,255,.1); border-color:rgba(255,117,168,.45)} .nav-search input::-webkit-search-cancel-button{filter:invert(.6)} .nav-actions{display:flex;align-items:center;gap:6px;flex:none} /* botões da busca-lupa: só aparecem no celular (ver @media max-width:767) */ .nav-search-toggle,.nav-search-close{display:none;background:transparent;border:0;color:var(--txt);cursor:pointer;padding:0} /* Coroa: chama pra assinar. */ .crownbtn{ width:38px;height:38px;border-radius:999px;display:grid;place-items:center; color:var(--premium);background:rgba(240,180,41,.13); border:1px solid rgba(240,180,41,.28);transition:.2s } .crownbtn:hover{background:rgba(240,180,41,.22);color:#ffd166} /* ─────────────── dropdown (details, sem script) ─────────────── */ .drop{position:relative} .drop > summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px; height:38px;padding:0 8px;border-radius:999px;color:var(--muted);transition:.2s } .drop > summary::-webkit-details-marker{display:none} .drop > summary:hover{background:rgba(255,255,255,.07);color:var(--txt)} .drop[open] > summary{background:rgba(255,255,255,.09);color:var(--txt)} .drop .flag{border-radius:3px;display:block} .drop-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:198px; background:rgba(18,18,18,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border:1px solid var(--line2);border-radius:14px;padding:6px; box-shadow:0 18px 44px -16px rgba(0,0,0,.9) } .drop-menu a{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; font-size:13px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap } .drop-menu a:hover{background:rgba(255,255,255,.06);color:var(--txt)} .drop-menu a.on{color:var(--txt)} .drop-menu a.on svg:last-child{margin-left:auto;color:var(--primary)} .drop-menu a.hi{color:var(--primary)} .drop-head{padding:9px 11px 11px;border-bottom:1px solid var(--line);margin-bottom:5px} .drop-head b{display:block;font-size:13px} .drop-head span{display:block;font-size:11px;color:var(--muted2);margin-top:2px} .brand{display:flex;align-items:center;flex:none} .brand img{height:34px;width:auto;object-fit:contain;filter:brightness(1.1) drop-shadow(0 0 8px rgba(255,117,168,.35))} .brand .brand-txt{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em} .brand .brand-txt b{color:var(--primary)} @media(min-width:640px){.brand img{height:44px}} /* Links centralizados entre a logo e os ícones, como no site real. */ .nav-links{display:none;align-items:center;justify-content:center;gap:28px;flex:1} @media(min-width:768px){.nav-links{display:flex}} .nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s;white-space:nowrap} .nav-links a:hover{color:var(--txt)} .nav-links a.on{color:var(--txt);font-weight:600} .nav-links a.admin{color:var(--primary);display:inline-flex;align-items:center;gap:5px} .nav-right{margin-left:auto;display:flex;align-items:center;gap:6px} .iconbtn{ width:38px;height:38px;border-radius:999px;border:0;background:transparent; color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s } .iconbtn:hover{color:var(--txt);background:rgba(255,255,255,.06)} .avatar{ width:58px;height:58px;border-radius:999px;display:grid;place-items:center; background:rgba(255,117,168,.18);border:1px solid rgba(255,117,168,.35); color:var(--primary);font-weight:700;font-size:13px;overflow:hidden } .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* Seletor de idioma por bandeira. O ativo fica opaco; o outro apagado. */ .langsel{display:flex;gap:2px;background:var(--card);border:1px solid var(--line); border-radius:999px;padding:3px} .langsel a{ display:grid;place-items:center;width:30px;height:26px;border-radius:999px; font-size:15px;line-height:1;opacity:.4;transition:.15s } .langsel a:hover{opacity:.8} .langsel a.on{opacity:1;background:var(--surface)} .langsel .flag{filter:saturate(1.1)} /* ─────────────── modais (login e paywall) ─────────────── */ /* Abrem por :target — o link é #login / #premium e não precisa de script. .is-open força a abertura quando o servidor precisa reexibir (erro de senha). */ .modal{ position:fixed;inset:0;z-index:100;display:none; align-items:center;justify-content:center;padding:18px } .modal:target,.modal.is-open{display:flex} .modal-veil{ position:absolute;inset:0;background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15) } .modal-box{ position:relative;z-index:1;width:100%;max-width:390px; background:var(--card);border:1px solid var(--line2);border-radius:20px; padding:28px 24px 22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9); max-height:calc(100dvh - 36px);overflow-y:auto } .modal-box.wide{max-width:440px} .modal-box h2{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.03em} .modal-sub{font-size:12.5px;color:var(--muted);margin:5px 0 18px;line-height:1.5} .modal-x{ position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:999px; display:grid;place-items:center;color:var(--muted2);transition:.15s } .modal-x:hover{background:rgba(255,255,255,.07);color:var(--txt)} .modal-crown{ display:grid;place-items:center;width:48px;height:48px;border-radius:14px; background:rgba(240,180,41,.14);color:var(--premium);margin-bottom:12px } .modal-foot{font-size:11px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5} /* ── modal de entrada ───────────────────────────────────────────────────── Escopado em .modal-auth: a .input e usada no admin e no perfil inteiros, entao nada aqui pode vazar pra fora do modal. */ /* 42px e centrada: a marca e a primeira coisa que responde "estou no site certo pra digitar meu e-mail?". Em 30px, encostada na esquerda, ela lia como detalhe de cabecalho. `margin auto` centra sem mexer no fluxo do resto. */ /* 52px e 26px de respiro embaixo: a marca e a primeira coisa que responde "e o site certo pra eu digitar meu e-mail?", e apertada contra o titulo ela lia como cabecalho de sistema. Com o espaco ela vira assinatura. */ .modal-logo{display:block;height:52px;width:auto;object-fit:contain;margin:2px auto 26px; filter:drop-shadow(0 3px 14px rgba(255,117,168,.42))} .modal-logo-txt{display:block;font-family:'Poppins',sans-serif;font-size:26px;font-weight:800; letter-spacing:-.03em;margin:2px 0 26px;color:var(--txt);text-align:center} .modal-logo-txt b{color:var(--primary);font-weight:800} /* 16px NAO e capricho: abaixo disso o Safari do iPhone da zoom ao focar o campo e joga o modal (position:fixed) pra fora da tela, no passo mais importante. */ .modal-auth .input{font-size:16px} .modal-auth .input:focus{outline:2px solid var(--primary);outline-offset:1px} .modal-auth .input.err{border-color:#ff6b6b} /* o :focus-visible global aplica border-radius:4px e quadrava o botao pilula */ .modal-auth .btn-block:focus-visible{border-radius:999px} .modal-auth .btn[aria-busy="true"]{opacity:.65;pointer-events:none} /* campo que o app-login.js revela: entra deslizando, em vez de simplesmente aparecer. So transform/opacity — nada que gere reflow. */ .modal-auth .field[data-fld]:not([hidden]){animation:fieldIn .22s var(--ease) both} @keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.modal-auth .field[data-fld]:not([hidden]){animation:none}} /* Divisória com o "ou" no meio, separando e-mail do Google. */ .modal-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted2);font-size:11px} .modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--line2)} /* Contorno, nao bloco branco. Um botao branco solido do lado de um botao rosa solido cria duas chamadas do mesmo peso e a pessoa para pra escolher — o caminho principal aqui e o e-mail. Assim ele fica disponivel sem competir. */ .btn-google{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:11px 18px;border-radius:999px; background:transparent;border:1px solid var(--line2);color:var(--muted); font-size:13px;font-weight:600;transition:.15s; /* sem isto o iOS aplica o delay de 300ms (duplo-toque) → "não responde ao toque" */ touch-action:manipulation } .btn-google:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:var(--txt)} .btn-google svg{opacity:.95} /* SÓ-GOOGLE: com o e-mail desligado o Google vira a ação principal — sólido, maior e logo abaixo do subtítulo, ocupando o lugar que era do formulário. */ .btn-google-hero{ margin-top:6px;padding:14px 18px;font-size:14.5px; background:#fff;border-color:#fff;color:#1f1f24 } .btn-google-hero:hover{background:#f1f1f4;border-color:#f1f1f4;color:#1f1f24} .btn-google-hero svg{opacity:1} /* CTA do grupo de WhatsApp — abaixo do login (modal de entrada + parede do vídeo). Verde da marca do WhatsApp; touch-action p/ não pegar o delay de 300ms no iOS. */ .wa-cta{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; margin-top:12px;padding:11px 18px;border-radius:999px; background:#25d366;color:#fff;font-size:13px;font-weight:700; touch-action:manipulation;transition:background .15s } .wa-cta:hover{background:#1ebe5b;color:#fff} .wa-cta svg{flex:none} .modal-perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:16px} .modal-perks li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted)} .modal-perks li svg{flex:none;margin-top:2px;color:var(--primary)} .planlist{display:flex;flex-direction:column;gap:8px} .planrow{ display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:13px; background:var(--card2);border:1px solid var(--line);transition:.15s } .planrow:hover{border-color:var(--line2);background:var(--surface)} .planrow.best{border-color:rgba(255,117,168,.5);background:rgba(255,117,168,.06)} .planrow b{display:block;font-size:14px} .planrow span{display:block;font-size:11.5px;color:var(--muted2);margin-top:1px} .planrow strong{font-family:'Poppins',sans-serif;font-size:16px;font-weight:800;white-space:nowrap} /* ─────────────── busca ─────────────── */ .searchbar{position:relative;display:flex;align-items:center;width:100%} .searchbar input{ width:100%;background:var(--card);border:1px solid var(--line);border-radius:999px; padding:12px 46px 12px 42px;font-size:14px;color:var(--txt);transition:border-color .15s } .searchbar input::placeholder{color:var(--muted2)} .searchbar input:focus{outline:none;border-color:rgba(255,117,168,.5)} .searchbar .ico{position:absolute;left:15px;color:var(--muted2);pointer-events:none;display:grid} .searchbar button{ position:absolute;right:6px;background:var(--primary);border:0;border-radius:999px; color:#fff;padding:7px 15px;font-size:12.5px;font-weight:700;cursor:pointer } /* ─────────────── filtros ─────────────── */ /* Faixa de audio: grupo segmentado — pilula dentro de um trilho arredondado, a ativa em rosa. Sem contador, como no site. */ .seg{ display:inline-flex;width:100%;padding:4px;border-radius:999px; background:rgba(28,28,28,.4);border:1px solid rgba(36,36,36,.4); backdrop-filter:blur(6px);overflow-x:auto;scrollbar-width:none } .seg::-webkit-scrollbar{display:none} @media(min-width:640px){.seg{width:auto}} .seg a{ flex:1;white-space:nowrap;text-align:center;padding:8px 16px;border-radius:999px; font-size:12px;font-weight:600;color:var(--muted);transition:.2s } @media(min-width:640px){.seg a{flex:none;padding:8px 20px;font-size:13px}} .seg a:hover{color:var(--txt)} .seg a.on{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(255,117,168,.35)} /* Categorias: pilulas planas; a ativa ganha um leve preenchimento e borda. */ .chips{ display:flex;gap:6px;justify-content:center;overflow-x:auto;scrollbar-width:none; padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px } .chips::-webkit-scrollbar{display:none} @media(min-width:640px){.chips{margin:0;padding-left:0;padding-right:0}} .chip{ flex:none;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:500; letter-spacing:.01em;color:rgba(160,160,160,.8);border:1px solid transparent; white-space:nowrap;cursor:pointer;transition:.2s } .chip:hover{color:var(--txt);background:rgba(28,28,28,.4)} .chip.on{background:rgba(255,255,255,.1);color:var(--txt);border-color:rgba(255,255,255,.2)} /* ─────────────── secoes ─────────────── */ .section{margin-bottom:32px} @media(min-width:1024px){.section{margin-bottom:48px}} .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .section-head h2{ display:flex;align-items:center;gap:8px; font-size:14px;font-weight:700;letter-spacing:-.01em } @media(min-width:640px){.section-head h2{font-size:18px}} @media(min-width:1024px){.section-head h2{font-size:20px}} .section-head h2 .mark{color:var(--primary);display:inline-flex} .section-head p{font-size:11.5px;color:var(--muted2);margin-top:3px} .section-head a{ display:inline-flex;align-items:center;gap:2px; font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;transition:.15s } .section-head a:hover{color:var(--txt)} /* carrossel horizontal — scroll nativo com snap, sem JS */ .carousel{ display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;padding-bottom:4px; scroll-padding-left:16px } .carousel::-webkit-scrollbar{display:none} /* flex-basis (não width) manda no tamanho do item flex — assim o .mcard{width:100%} não estufa o card pra largura toda dentro do carrossel. */ .carousel > *{scroll-snap-align:start;flex:0 0 118px;max-width:118px} @media(min-width:640px){.carousel > *{flex-basis:140px;max-width:140px}.carousel{gap:14px}} @media(min-width:1024px){.carousel > *{flex-basis:184px;max-width:184px}} /* 2 por linha no celular; 5 no PC (a pedido) */ .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}} @media(min-width:1024px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}} /* ─────────────── card de filme ─────────────── */ .mcard{display:block;position:relative;width:100%;min-width:0} .mcard .thumb{ position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius); background:var(--card);transition:transform .18s ease-out } .mcard .thumb img{width:100%;height:100%;object-fit:cover} @media(hover:hover){.mcard:hover .thumb{transform:scale(1.04)}.mcard:hover .thumb img{filter:brightness(.9)}} .mcard:active .thumb{transform:scale(.97)} .mcard h3{ font-size:11.5px;font-weight:600;line-height:1.25;margin-top:6px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis /* 1 linha só, corta com … */ } .mcard .badge{ position:absolute;top:6px;right:6px;z-index:2; background:rgba(255,117,168,.92);color:#fff;font-size:8px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px } .mcard .mcard-date{ position:absolute;left:6px;bottom:6px;z-index:2; background:rgba(0,0,0,.72);color:#fff;font-size:9px;font-weight:700; letter-spacing:.02em;padding:3px 7px;border-radius:5px;white-space:nowrap; backdrop-filter:blur(2px) } .mcard .soon{ position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px } /* "Em breve" precisa ser LIDO de relance no meio de uma grade de capas iguais: a pilula preta translucida sumia em capa escura. Com a cor da marca ela conta a historia sozinha — a cliente entende que aquilo ainda nao abre. */ .mcard .soon span{ background:var(--primary);color:var(--accink,#2b0716);border-radius:999px; padding:4px 12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; box-shadow:0 4px 14px -4px rgba(0,0,0,.7) } .mcard.dim .thumb img{filter:brightness(.6)} /* Texto de apoio do carrossel (o "Em Breve" usa). Fica sob o subtitulo, com o icone alinhado a PRIMEIRA linha — em telas estreitas a frase quebra em duas e um icone centralizado ficaria boiando no meio. */ .sec-info{display:flex;align-items:flex-start;gap:6px;margin-top:6px;max-width:52ch; font-size:11.5px;line-height:1.45;color:var(--muted2)} /* o partial de icone devolve (fonte Material), nao — mirar so em svg deixaria o icone sem cor e desalinhado */ .sec-info .msym,.sec-info svg{flex:0 0 auto;margin-top:1px;color:var(--primary)} /* Drama "em breve": nao ha video, entao some tudo que so faz sentido tocando. A barra zerada ("0:00 / 0:00") e o que mais faz parecer defeito — e a cliente ja esta lendo que o drama esta sendo preparado. Curtir, comentar e reportar FICAM: sao justamente o que ela pode fazer enquanto espera. */ .vplayer.vp-soon .vp-progwrap, .vplayer.vp-soon .vp-skip, .vplayer.vp-soon .vp-playbtn, .vplayer.vp-soon .vp-fs{display:none} /* e a coluna nao se recolhe: sem video nao ha gesto que a traga de volta */ .vplayer.vp-soon .vp-side, .vplayer.vp-soon .vp-info{opacity:1!important;visibility:visible!important;pointer-events:auto!important} /* Top 10: numerao em italico atras da capa, que fica deslocada pra direita. O numero e absoluto e nao entra no fluxo — a altura da linha e a da capa. */ .mcard.ranked{padding-left:32px} .mcard.ranked .bignum{ position:absolute;left:0;bottom:0;z-index:0; font-family:'Poppins',sans-serif;font-weight:900;font-style:italic; font-size:80px;line-height:.8;letter-spacing:-.06em; color:var(--bg);-webkit-text-stroke:2px rgba(255,255,255,.22); user-select:none;pointer-events:none;white-space:nowrap } .mcard.ranked .bignum.two{font-size:64px} .mcard.ranked .thumb{position:relative;z-index:1} .mcard.ranked h3{margin-left:0} /* Selo pequeno com a posicao, no canto da capa. */ .mcard .rank{ position:absolute;top:6px;left:6px;z-index:3; width:20px;height:20px;border-radius:6px;background:rgba(255,117,168,.9); display:grid;place-items:center; font-size:10px;font-weight:800;line-height:1;color:#fff } /* barra de progresso do "continuar assistindo" */ .mcard .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)} .mcard .prog i{display:block;height:100%;background:var(--primary)} /* ─────────────── banner do topo (estilo iDrama) ─────────────── Carrossel de cards em RETRATO 3:4 (layout_banner2/3), radius 12dp, com os vizinhos espiando; fundo = a capa do card ativo borrada (iv_background, alpha .4); dots em LINHA (16/10dp) e legenda sp_14. Medidas do sistema real. */ .hero-wrap{position:relative;margin:4px 0 2px} /* fundo desfocado ocupa a TELA toda na horizontal (full-bleed), nao so o container central */ .hero-bg{position:absolute;left:50%;width:100vw;margin-left:-50vw;top:calc(-1 * var(--nav-h) - 58px);z-index:0;pointer-events:none; height:calc(62% + var(--nav-h) + 58px); background-size:cover;background-position:center top;opacity:.4; filter:blur(22px) saturate(1.2);transform:translateZ(0);backface-visibility:hidden} .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,transparent 40%,var(--bg))} /* proximity (não mandatory): o arrasto SEGUE o dedo livremente e só encaixa de leve quando solta perto de um card — tira a sensação de "segurar/lag". */ .hero-track{position:relative;z-index:1;display:flex;gap:12px;overflow-x:auto; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none;padding:4px 34px;scroll-padding:0 34px} .hero-track::-webkit-scrollbar{display:none} .hero-card{position:relative;flex:0 0 84%;max-width:430px;scroll-snap-align:center; aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--card); box-shadow:0 16px 38px -18px rgba(0,0,0,.8)} .hero-card img{width:100%;height:100%;object-fit:cover} .hero-card::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.55),transparent)} @media(min-width:640px){.hero-card{flex-basis:58%;max-width:460px}} @media(min-width:1024px){.hero-card{flex-basis:32%;max-width:392px}} .hero-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:58px;height:58px;border-radius:999px;display:grid;place-items:center;color:#fff; background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.9); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .2s var(--ease)} .hero-orb:active{transform:translate(-50%,-50%) scale(.92)} .hero-orb .msym{margin-left:3px} .hero-caption{position:relative;z-index:1;text-align:center;font-size:14px;font-weight:600;color:#fff; padding:12px 20px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:6px;padding:11px 0 2px} .hero-dots i{width:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:.25s} .hero-dots i.on{width:16px;background:var(--primary)} /* ─────────────── tabs SPA: painéis instantâneos ─────────────── */ .tab-panel[hidden]{display:none} .sub-tabs{display:flex;gap:20px;align-items:center;padding:2px 0 6px} .sub-tab{background:transparent;border:0;color:var(--muted2);font-size:14px;font-weight:700; cursor:pointer;padding:4px 0;transition:color .2s} .sub-tab.on{color:var(--premium)} /* ornamento dourado dos dois lados da sub-tab ativa (estilo iDrama) */ .sub-tab.on::before,.sub-tab.on::after{content:"";display:inline-block;width:12px;height:20px; vertical-align:-5px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cg fill='%23e9c06a'%3E%3Cpath d='M11 19C6 18 3 14 3 3' stroke='%23e9c06a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='6.5' cy='4.5' rx='3' ry='1.3' transform='rotate(-52 6.5 4.5)'/%3E%3Cellipse cx='4.6' cy='8.5' rx='3' ry='1.3' transform='rotate(-28 4.6 8.5)'/%3E%3Cellipse cx='4.6' cy='12.5' rx='3' ry='1.3' transform='rotate(-6 4.6 12.5)'/%3E%3Cellipse cx='6.6' cy='16' rx='2.5' ry='1.2' transform='rotate(20 6.6 16)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} .sub-tab.on::before{margin-right:7px} .sub-tab.on::after{margin-left:7px;transform:scaleX(-1)} /* grade de categorias (tab Categoria) — cards com banner de fundo animado. Flex (não grid) pro ÚLTIMO item esticar e preencher o resto da linha. */ .cat-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .cat-tile{ flex:0 0 calc((100% - 12px)/2); /* mobile: 2 por linha */ position:relative;overflow:hidden;isolation:isolate; display:flex;align-items:center;justify-content:center;text-align:center; min-height:68px;padding:12px;border-radius:14px;background-color:#1a1420; font-size:13px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.1); transition:transform .18s var(--ease),box-shadow .18s} @media(min-width:640px){.cat-tile{flex-basis:calc((100% - 24px)/3);min-height:96px}} /* tablet: 3 */ @media(min-width:1024px){.cat-tile{flex-basis:calc((100% - 60px)/6);min-height:104px}} /* PC: 6 */ .cat-tile:last-child{flex-grow:1} /* último preenche o restante da linha */ /* com capa de fundo (foto de um título da categoria): a capa PREENCHE o box, com um véu leve só pra o texto ler. Esconde o gradiente animado. */ .cat-tile.has-cover::before{display:none} .cat-tile.has-cover{background-size:cover;background-position:center center} /* LGBTQ+: personalização — texto arco-íris e anel colorido, pra identificar o público */ .cat-lgbt span{font-weight:900;font-style:italic;letter-spacing:.02em; background:linear-gradient(90deg,#ff5a5a,#ffb020,#ffe600,#5adf8a,#4aa8ff,#c07bff); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))} .cat-lgbt{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 20px -4px rgba(180,100,255,.55)} .cat-lgbt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;opacity:1;transform:none; background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787)} /* banner de fundo: gradiente vibrante que se move devagar */ .cat-tile::before{content:"";position:absolute;inset:0;z-index:-2; background-size:180% 180%;animation:catShift 9s ease-in-out infinite} /* brilho diagonal que atravessa no hover */ .cat-tile::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); transform:translateX(-130%);transition:transform .6s} .cat-tile:hover::after{transform:translateX(130%)} .cat-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px -12px rgba(0,0,0,.7)} .cat-tile:active{transform:scale(.98)} @keyframes catShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @media(prefers-reduced-motion:reduce){.cat-tile::before{animation:none}} /* paleta — uma cor por categoria (cicla a cada 8) */ .cat-tile:nth-child(8n+1)::before{background-image:linear-gradient(135deg,#ff5f8f,#c9366b)} .cat-tile:nth-child(8n+2)::before{background-image:linear-gradient(135deg,#7b6cff,#4b32c3)} .cat-tile:nth-child(8n+3)::before{background-image:linear-gradient(135deg,#ff9a5a,#e5532b)} .cat-tile:nth-child(8n+4)::before{background-image:linear-gradient(135deg,#39c6b0,#0f8a76)} .cat-tile:nth-child(8n+5)::before{background-image:linear-gradient(135deg,#5aa9ff,#2b63e5)} .cat-tile:nth-child(8n+6)::before{background-image:linear-gradient(135deg,#ff6ad5,#a5329b)} .cat-tile:nth-child(8n+7)::before{background-image:linear-gradient(135deg,#ffc24b,#e59a1f)} .cat-tile:nth-child(8n+8)::before{background-image:linear-gradient(135deg,#8ed14b,#3f9b2f)} /* ─────────────── PC / tablet: sai da coluna mobile e usa a largura ─────────────── No celular o app é tela cheia com a barra inferior (tabbar). Em telas maiores ele deixa de ser a coluna estreita de 500px: o conteúdo passa a ocupar a largura (contido em --shell pra não espalhar em telas muito largas), o header volta completo (idioma + conta), os grids abrem em várias colunas e a barra inferior some — no desktop a navegação fica no header. A página do player (is-player) é a exceção: vídeo vertical continua numa coluna central (regra própria). */ @media(min-width:768px){ body.app-shell main{max-width:var(--shell);margin-left:auto;margin-right:auto} } /* ─────────────── ranking (aba Trending), estilo iDrama ─────────────── */ .rank-list{display:flex;flex-direction:column;gap:10px} .rank-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);transition:.15s} .rank-item:hover{background:rgba(255,255,255,.08)} .rank-item:active{transform:scale(.99)} .rank-thumb{position:relative;flex:none;width:51px;height:68px;border-radius:4px;overflow:hidden;background:var(--card)} .rank-thumb img{width:100%;height:100%;object-fit:cover} .rank-num{position:absolute;top:0;left:0;min-width:20px;height:20px;padding:0 4px;line-height:1; display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff; background:rgba(0,0,0,.6);border-radius:4px 0 6px 0} .rank-num.r1{background:linear-gradient(135deg,#ff5b5b,#e5352b)} .rank-num.r2{background:linear-gradient(135deg,#ffa63e,#f97316)} .rank-num.r3{background:linear-gradient(135deg,#ffd166,#f0b429);color:#3a2600} .rank-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .rank-info b{font-size:14px;font-weight:600;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rank-info em{font-style:normal;font-size:12px;color:var(--muted2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rank-heat{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;color:#ff6a3d} .rank-heat img{width:15px;height:15px;object-fit:contain} /* ─────────────── arrastar-para-rolar nos sliders (PC) ─────────────── */ @media(hover:hover){ .carousel,.hero-track,.chips,.ctabs,.seg{cursor:grab} .carousel.dragging,.hero-track.dragging,.chips.dragging,.ctabs.dragging,.seg.dragging{cursor:grabbing} } .dragging{user-select:none} /* durante o arrasto, solta o scroll-snap (senão ele "gruda" e trava o deslize) */ .carousel.dragging,.hero-track.dragging,.chips.dragging,.ctabs.dragging,.seg.dragging{scroll-snap-type:none} /* mata o "arrastar imagem/link" nativo do navegador nos sliders */ .carousel img,.hero-track img,.carousel a,.hero-track a,.chips a,.seg a{-webkit-user-drag:none;user-drag:none} /* ═══════════════════════════════════════════════════════════════════ PLAYER estilo iDrama (vídeo vertical em tela cheia + UI sobreposta) ═══════════════════════════════════════════════════════════════════ */ body.is-player{padding-bottom:0;background:#000} body.is-player .nav,body.is-player .footer,body.is-player .tabbar{display:none} body.is-player main{padding-top:0;max-width:500px;margin:0 auto} .vplayer{position:relative;height:100dvh;background:#000;overflow:hidden} .vp-poster,#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000} .vp-poster{filter:brightness(.92);z-index:0} #video{z-index:1} /* Depois que o vídeo começou a rodar (app-vplayer marca vp-started no 1º progresso do tempo), o pôster some de vez: durante o playback ele só servia pra VAZAR por trás quando o vp-loading escurece o vídeo pra 35% — o "capa + carregando ao mesmo tempo do vídeo". Antes de começar, ele continua aparecendo normal. */ .vplayer.vp-started .vp-poster{opacity:0;visibility:hidden} /* fallback HEVC (h265web.js): o canvas WebGL ocupa o mesmo lugar do tem flex:1 e mede 222x24 no catalogo ES — com `>*` ele voltaria a ser um bloqueador morto no meio da barra. Consequencia conhecida e desejada: a faixa passa a valer play/pause (e arraste de busca), igual ao resto do video. */ pointer-events:none} .vp-top>a,.vp-top>button{pointer-events:auto} /* [C3] O `auto` do filho vence o `none` que o .vp-idle herda, e `visibility` tem transicao de .28s (linha ~576): sobravam ~300ms com o topo INVISIVEL e CLICAVEL. MEDIDO a +150ms do vp-idle: o toque cego no canto do voltar SAIA DO EPISODIO (/serie/... -> /). Aqui o ocioso volta a mandar; com a parede de pe a saida continua viva (a excecao abaixo acompanha a linha ~1862, que ja existe). MEDIDO depois: a +150ms elementFromPoint(26,26) devolve BUTTON.vp-tap e fica no episodio; com is-walled devolve o proprio A.vp-back. */ .vplayer.vp-idle .vp-top>a,.vplayer.vp-idle .vp-top>button{pointer-events:none} .vplayer.is-walled.vp-idle .vp-top>a,.vplayer.is-walled.vp-idle .vp-top>button{pointer-events:auto} /* Alvo de 44x44 SEM mexer no icone: com place-items:center o glifo fica no centro da caixa, entao crescer 20px e recuar 10px devolve o centro ao mesmo pixel. MEDIDO: caixa 14,14 24x24 -> 4,4 44x44 e o icone continua em 14,14 24x24; .vp-ep continua em x=50 e a .vp-top continua com 68px. Depois do patch os 4 cantos devolvem A.vp-back em 320, 390 e 1280. E a UNICA saida com a parede de pe. */ .vp-back{color:#fff;display:grid;place-items:center;width:44px;height:44px;margin:-10px} .vp-ep{font-size:16px;font-weight:700;flex:none;margin-left:auto} /* .vp-more: o "…" saiu do movie.php junto com o #sheet-syn. A regra fica como estava, sem uso, pra nao mexer em quem eventualmente reviver o botao. */ .vp-more{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1} /* auto-ocultar a interface: some 3s depois da última interação, volta ao toque/movimento. O grupo CENTRAL (-5s · play/pause · +5s) entrou nesta MESMA lista: um mecanismo só pros três. Antes o play central seguia .playing e sumia no instante do play, enquanto os skips só sumiam no ocioso — MEDIDO: 1300ms com os dois skips em volta de um buraco no meio da tela, e a UI voltando ao toque sem o botão do meio. Única exceção, e é a convenção de todo player: PAUSADO o botão central fica fixo mesmo com a interface recolhida — é ele que avisa que o vídeo parou. */ .vp-top,.vp-side,.vp-info,.vp-bottom,.vp-progwrap, .vp-playbtn,.vp-skip{transition:opacity .28s ease,visibility .28s ease} .vplayer.vp-idle .vp-top,.vplayer.vp-idle .vp-side,.vplayer.vp-idle .vp-info, .vplayer.vp-idle .vp-bottom,.vplayer.vp-idle .vp-progwrap, .vplayer.vp-idle .vp-playbtn,.vplayer.vp-idle .vp-skip{opacity:0;visibility:hidden;pointer-events:none} .vplayer.vp-idle:not(.playing) .vp-playbtn{opacity:1;visibility:visible} /* Troca de episodio sem "piscar" a interface. A classe nasce assim que o swipe vertical e reconhecido e permanece ate o proximo toque simples do usuario. O !important vence as excecoes mobile/desktop e o estado pausado do play central. */ .vplayer.vp-ep-switching .vp-top, .vplayer.vp-ep-switching .vp-side, .vplayer.vp-ep-switching .vp-info, .vplayer.vp-ep-switching .vp-bottom, .vplayer.vp-ep-switching .vp-progwrap, .vplayer.vp-ep-switching .vp-playbtn, .vplayer.vp-ep-switching .vp-skip, .vplayer.vp-ep-switching .vp-mute, .vplayer.vp-ep-switching .vp-vol, .vplayer.vp-ep-switching .vp-spin, .vplayer.vp-ep-switching .prism-controlbar, .vplayer.vp-ep-switching .prism-big-play-btn, .vplayer.vp-ep-switching .prism-animation, .vplayer.vp-ep-switching .prism-loading{ opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important } .vplayer.vp-ep-switching .vp-side::before{opacity:0!important} /* O X do paywall e uma saida, nao um controle do video. Se a parede abrir no instante de uma troca, ele precisa vencer o estado de transicao limpa. */ @media(max-width:1023px){ .vplayer.is-walled.vp-ep-switching .vp-top{ opacity:1!important;visibility:visible!important;pointer-events:auto!important } @supports selector(.vplayer:has(.vp-wall:not([hidden]))){ .vplayer.vp-ep-switching:has(.vp-wall:not([hidden])) .vp-top{ opacity:1!important;visibility:visible!important;pointer-events:auto!important } } } .vp-tap{position:absolute;inset:0;z-index:5;border:0;background:transparent;cursor:pointer;touch-action:none} .vp-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6; width:72px;height:72px;border-radius:999px;display:grid;place-items:center;color:#fff; background:rgba(0,0,0,.34);pointer-events:none} /* o glifo do meio conta o estado: ▶ parado, ❚❚ tocando. Os dois vêm no HTML, empilhados na MESMA célula do grid; o CSS escolhe. O pointer-events:none acima continua ali de propósito — quem recebe o toque é o .vp-tap, o play/pause não muda. */ .vp-playbtn .msym{grid-area:1/1} .vplayer:not(.playing) .vp-playbtn .vp-gl-pause, .vplayer.playing .vp-playbtn .vp-gl-play{display:none} .vp-side{position:absolute;right:12px;bottom:118px;z-index:12;display:flex;flex-direction:column;gap:12px;align-items:center; /* moldura nao recebe toque, botao recebe. Abaixo de 1024 a coluna vive no PAINEL (nao mais sobre o video), mas em TELA CHEIA ela volta a ser sobreposicao — e la o vao entre os icones engolia o toque. O
tambem fica none: quem recebe e o .vp-act de dentro. */ pointer-events:none} .vp-side .vp-act{pointer-events:auto} .vp-actf{margin:0} .vp-act{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#fff;cursor:pointer;padding:0; min-width:44px} /* Padrao medido no player de referencia do proprio dono (amodramas.app): circulo translucido de 40px com desfoque, icone de 20px dentro, 12px da borda, sem rotulo de texto. O rotulo ja existia como aria-label no markup, entao esconder o nao custa acessibilidade. */ .vp-act-ic{position:relative;width:40px;height:40px;display:grid;place-items:center; border-radius:999px;background:rgba(8,8,8,.34)} /* DESFOQUE SÓ NO PC — e o motivo é custo, não estética. backdrop-filter sobre VÍDEO TOCANDO é o efeito mais caro que existe numa página: o compositor precisa reamostrar a textura do vídeo atrás do elemento A CADA QUADRO. São 8 .vp-act-ic na coluna + .vp-cat + o painel de volume = 10 passagens de desfoque por quadro, a 24-30fps, na GPU de um celular que já está decodificando vídeo. É exatamente o tipo de coisa que faz o vídeo engasgar no começo, quando decodificador e compositor disputam a mesma GPU. No PC o desfoque continua: ali a GPU sobra e o efeito é o desenho da referência. No celular fica o círculo translúcido um pouco mais escuro — sobre vídeo em movimento a diferença é imperceptível, e o contraste do ícone até melhora. */ @media (hover:hover) and (pointer:fine){ .vp-act-ic{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} } @media not all and (pointer:fine){ .vp-act-ic{background:rgba(8,8,8,.52)} } .vp-act-ic img{width:22px;height:22px;object-fit:contain} .vp-act-ic svg{width:20px;height:20px} .vp-act-ic svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))} .vp-speedval{font-size:15px;font-weight:800;color:var(--premium);text-shadow:0 1px 3px rgba(0,0,0,.55)} .vp-act-n{font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)} /* Sobre o video o rotulo sai: era ele que "poluia" a coluna. Continua no DOM pra contagem (salvar/curtir) e volta inteiro no trilho do PC, onde ha espaco. */ @media(max-width:1023px){ .vp-side .vp-act-n{display:none} /* .vp-like entra na lista porque a versao DESLOGADA do coracao e um , sem .fav-btn nem [data-fav-btn]: sem isso a visitante era a unica a nao ver a contagem, justamente quem a prova social precisa convencer. */ .vp-side .vp-act[data-fav-btn] .vp-act-n, .vp-side .fav-btn .vp-act-n, .vp-side .vp-like .vp-act-n{display:block;font-size:10px} } /* O .fav-btn.is-fav pinta fundo e borda — desenho do botao-pilula da pagina de detalhe. Na coluna do player o fundo e o circulo do .vp-act-ic, entao aquilo virava um retangulo rosa fraco atras do icone redondo. */ .vp-side .fav-btn.is-fav{background:transparent;border-color:transparent} .vp-act:active .vp-act-ic{transform:scale(.86)} .vp-burst{position:absolute;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%);pointer-events:none;opacity:0} .vp-info{position:absolute;left:14px;right:76px;bottom:62px;z-index:11;display:flex;flex-direction:column;gap:8px;align-items:flex-start; /* MEDIDO: os 4 cantos do .vp-cat (89x28, raio 999px) caiam em div.vp-info — nada acontecia. Aqui `>*` e o certo (ao contrario da .vp-top): o filho nao-botao e o

, que precisa de pointer-events pra rolar/selecionar. */ pointer-events:none} .vp-info>*{pointer-events:auto} .vp-title{background:transparent;border:0;color:#fff;font-size:17px;font-weight:800;text-align:left; display:flex;align-items:center;gap:4px;cursor:pointer;text-shadow:0 2px 6px rgba(0,0,0,.7)} .vp-cat{background:rgba(255,255,255,.16);border:0;color:#fff;font-size:12px;font-weight:600; padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:3px;cursor:pointer} /* mesmo trato do .vp-act-ic: desfoque só onde a GPU sobra (ver comentário lá) */ @media (hover:hover) and (pointer:fine){ .vp-cat{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} } @media not all and (pointer:fine){ .vp-cat{background:rgba(255,255,255,.22)} } .vp-syn{background:transparent;border:0;color:rgba(255,255,255,.82);font-size:13px;text-align:left; line-height:1.4;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.7)} .vp-syn b{color:#fff} .vp-progwrap{position:absolute;left:12px;right:12px;bottom:44px;z-index:13;display:flex;align-items:center;gap:9px} .vp-time{font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);min-width:36px;flex:none; font-variant-numeric:tabular-nums} .vp-dur{text-align:right} .vp-prog{position:relative;flex:1;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none} /* trilha interativa: clique ou arraste para voltar/avançar */ .vp-prog::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); height:6px;border-radius:999px;background:rgba(255,255,255,.25)} .vp-prog i{position:relative;display:block;height:6px;width:0;border-radius:999px;background:var(--primary);z-index:1} .vp-prog i::after{content:"";position:absolute;right:0;top:50%;transform:translate(50%,-50%); width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.6); opacity:0;transition:opacity .15s} .vplayer:not(.vp-idle) .vp-prog i::after,.vp-prog:active i::after{opacity:1} /* ── VOLUME: botão na barra + dropdown vertical (de baixo pra cima) ────────── Toque/arraste na trilha ajusta (pointer events = mouse + toque). Abre no clique (celular) e no hover (PC). O painel sobe DENTRO do palco, então nunca é cortado. */ .vp-vol{position:relative;flex:none;display:flex;align-items:center;justify-content:center;order:-1} .vp-vol-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center; background:transparent;border:0;color:#fff;cursor:pointer;padding:0; text-shadow:0 1px 3px rgba(0,0,0,.7);transition:transform .12s} .vp-vol-btn:active{transform:scale(.9)} .vp-vol-btn .msym{font-size:22px} .vp-vol-panel{position:absolute;bottom:calc(100% + 10px);left:-3px;right:auto;z-index:30; display:flex;flex-direction:column;align-items:center;gap:10px;padding:13px 11px 12px; background:rgba(18,18,24,.94);border:1px solid rgba(255,255,255,.14);border-radius:16px; /* backdrop-filter:blur(10px) REMOVIDO — era o mais caro dos três e o único 100% invisível: o fundo acima já está em 94% de opacidade, então não sobra praticamente nada do vídeo pra desfocar. Pior: ele ficava ativo justamente enquanto o dedo arrasta o volume, competindo com o decodificador pela GPU no exato momento em que a resposta ao toque precisa ser fluida. Nada muda na aparência; some só o custo. */ box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:bottom left; transition:opacity .16s ease,transform .16s ease,visibility .16s} .vp-vol.open .vp-vol-panel{opacity:1;visibility:visible;transform:none} @media (hover:hover) and (pointer:fine){ .vp-vol:hover .vp-vol-panel{opacity:1;visibility:visible;transform:none} } .vp-vol-pct{font-size:11px;font-weight:700;color:#fff;min-width:34px;text-align:center; font-variant-numeric:tabular-nums;letter-spacing:.02em} /* ROLAGEM DA PÁGINA AO ARRASTAR O VOLUME — a correção é esta linha. O touch-action:none da trilha (abaixo) sempre existiu, mas a trilha tem 6px de LARGURA e o dedo tem ~45px: o toque caía nos 11px de padding do .vp-vol-panel, que NÃO declarava touch-action. Sem a declaração o navegador decide sozinho, vê um arraste vertical e ROLA A PÁGINA — e ao rolar dispara pointercancel, então o arraste do volume morria no meio. O preventDefault() do pointermove não salva: quando ele roda o navegador já se comprometeu com a rolagem. Vale no wrap inteiro pra cobrir botão + painel + trilha num lugar só. */ .vp-vol,.vp-vol-panel{touch-action:none} .vp-vol-track{position:relative;width:6px;height:110px;border-radius:999px; background:rgba(255,255,255,.24);cursor:pointer;touch-action:none;outline:none} /* Área de toque de 38x130 sem mexer no desenho de 6x110: o ::before é invisível (sem fundo) e o acerto de um pseudo-elemento conta como acerto do PAI, então o pointerdown continua caindo no .vp-vol-track e o fromY() segue medindo pelo getBoundingClientRect da trilha VISUAL — o cálculo do % não muda. O apply() já trava em 0..1, então encostar acima/abaixo da trilha satura em 100%/0% em vez de escapar da faixa. Antes disso o alvo real era menor que o próprio knob (15px). */ .vp-vol-track::before{content:"";position:absolute;left:-16px;right:-16px;top:-10px;bottom:-10px} .vp-vol-track:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.5)} .vp-vol-fill{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:999px; background:var(--primary,#ff2e88)} .vp-vol-knob{position:absolute;left:50%;bottom:100%;width:15px;height:15px;border-radius:50%; background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.6);transform:translate(-50%,50%);transition:bottom .02s linear} /* mudo: trilha e ícone ficam apagados */ .vp-vol.is-muted .vp-vol-fill{background:rgba(255,255,255,.4)} /* dica de tempo enquanto arrasta o dedo no vídeo */ .vp-seekhint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:16; background:rgba(0,0,0,.74);color:#fff;font-size:16px;font-weight:700;padding:10px 16px;border-radius:12px; font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap} .vp-seekhint[hidden]{display:none} /* som: quando o autoplay entra mudo, botao central pulsante rosa — visivel mas discreto */ .vp-mute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:14; display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;white-space:nowrap; background:var(--primary);color:#fff;font-size:13px;font-weight:700;padding:11px 18px;border-radius:999px; box-shadow:0 4px 18px rgba(255,117,168,.55);animation:vp-mute-pulse 1.7s ease-in-out infinite} .vp-mute .msym{font-size:20px} .vp-mute[hidden]{display:none} @keyframes vp-mute-pulse{ 0%,100%{box-shadow:0 4px 18px rgba(255,117,168,.45);transform:translate(-50%,-50%) scale(1)} 50% {box-shadow:0 7px 28px rgba(255,117,168,.85);transform:translate(-50%,-50%) scale(1.05)}} /* voltar/avançar 5s — nas laterais do centro. A transição e o sumiço no ocioso moravam aqui; foram pra regra do grupo central, que é quem manda nos três botões do meio agora. 54x54 medidos em 320, 360, 390 e 414. */ /* [C2] REGRA FUNDIDA: 54->48 (hierarquia do grupo central, FRENTE 1) + z-index 13 e ::before (toques mortos, FRENTE 3). As duas frentes reescreviam ESTA regra com conteudos incompativeis; qualquer ordem apagava metade em silencio. z-index 13: acima do .vp-side (12) e do .vp-info (11), abaixo do .vp-mute (14), da parede (15) e do topo (20). MEDIDO a 320: sem ele o canto TR do +5s devolvia o do botao SALVAR — errar a mira abria o #login e tirava a pessoa do video. 48px continua acima dos 44 minimos de toque. */ .vp-skip{position:absolute;top:50%;width:48px;height:48px;border:0;cursor:pointer;border-radius:999px; display:grid;place-items:center;line-height:1;color:#fff; background:rgba(0,0,0,.34);z-index:13} /* Os 4 cantos do quadrado caiam fora do raio 999px e devolviam o .vp-tap: errar a quina PAUSAVA em vez de pular (625,8px² = 21,5% da caixa). Este retangulo transparente ocupa a MESMA caixa que ja existe — nao cresce um pixel e nao come a folga pro botao central. MEDIDO depois do patch: os 4 cantos de -5s e +5s devolvem BUTTON.vp-skip em 320 e 390. */ .vp-skip::before{content:"";position:absolute;inset:0} .vp-skip-back{left:calc(50% - 100px);transform:translateY(-50%)} .vp-skip-fwd{right:calc(50% - 100px);transform:translateY(-50%)} /* tela pequena: a 320px o circulo central ocupava 22,5% da largura. So ele encolhe — o .vp-skip FICA em 48px de proposito: a pilula "Toque para ativar o som" tem 233x45 no centro exato e com 44px o botao inteiro cairia dentro dela (o skip e z13, a pilula z14). O glifo acompanha o circulo — e o `!important` NAO e enfeite: o tamanho do glifo vem de `style="font-size:46px"` INLINE (partials/icon.php:65) e estilo inline vence qualquer regra sem !important. MEDIDO a 320 com o patch: circulo 64 e glifo 40; skip 48 e glifo 22 (razao 1,33x, a mesma de hoje). */ @media(max-width:359px){ .vp-playbtn{width:64px;height:64px} .vp-playbtn .msym{font-size:40px!important} } /* barra de controles (TV/velocidade/qualidade): no TOPO, centralizada */ .vp-bottom{position:absolute;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;justify-content:center;gap:24px; padding:calc(12px + env(safe-area-inset-top)) 60px 12px;color:rgba(255,255,255,.9);font-size:12.5px;font-weight:600; background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)} .vp-b-item{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;color:inherit;cursor:pointer} .vp-speed{color:var(--premium)} .vp-locked,.vp-wall{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:12px;padding:24px;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.75))} .vp-wall[hidden]{display:none} .vp-locked h3,.vp-wall h3{font-family:'Poppins',sans-serif;font-size:18px} .vp-locked p,.vp-wall p{font-size:13px;color:var(--muted);max-width:280px} /* ── PAREDE COM OS PLANOS DENTRO (PC e celular) ────────────────────────────── O episodio pago passa a mostrar a tabela de precos NO LUGAR do video, dentro do mesmo palco — o paywall vira o "video" daquele slide. O swipe entre episodios continua valendo por cima dela (o .vp-wall nao entra na lista IGN do app-episodes.js), que e o comportamento pedido: deslizar passa de um episodio pago pro proximo, e para no primeiro gratis. O formulario e o caminho principal em qualquer largura: a cliente ve os precos direto no video, sem cair numa tela intermediaria. O link continua no HTML como fallback sem CSS, mas fica oculto no PC e no celular. */ .wall-plans{display:block;width:100%;max-width:340px} .wall-golink{display:none} @media(max-width:1023px){ .vp-wall:not([hidden]){display:flex} /* justify-content deixa de ser center: com a tabela inteira dentro, centralizar corta o primeiro cartao em tela baixa. Alinhado ao topo, rola. */ .vp-wall{justify-content:flex-start;gap:10px;padding:16px 14px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .vp-wall h3{font-size:16px;margin-top:2px} .wall-plans{display:block;width:100%;max-width:340px} .wall-golink{display:none} /* cartoes mais baixos que na /assinar: aqui eles dividem a altura do palco com titulo, botao e beneficios, em vez de terem a pagina inteira pra si. */ .wall-plans .vipx-plans{gap:8px} .wall-plans .vipx-plan{padding:10px 12px} .wall-plans .vipx-plan-price{font-size:20px} .wall-plans .wall-buy{margin-top:10px} /* os cinco beneficios comuns fecham a parede, menores — quem ja decidiu clicou no botao acima; eles servem a quem rolou ate o fim sem clicar. */ .wall-plans .vipx-inc{margin-top:12px} .wall-plans .vipx-inc-l{font-size:12px} } /* sheet de sinopse/episódios */ .sheet-box.sheet-tall{max-height:88dvh} .syn-head{display:flex;gap:12px;align-items:center;margin-bottom:14px} .syn-cover{width:56px;height:75px;border-radius:8px;object-fit:cover;flex:none} .syn-meta b{display:block;font-size:15px;font-weight:700;line-height:1.2} .syn-meta span{display:block;font-size:12px;color:var(--muted2);margin-top:4px} .syn-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .syn-tag{font-size:12px;font-weight:600;color:var(--muted);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px} .syn-text{font-size:13.5px;color:var(--muted);line-height:1.6} .syn-more{font-size:15px;font-weight:800;margin:18px 0 12px} /* Grade de episódios estilo ReelShort: tiles escuros, cadeado nos premium, ativo destacado com barrinhas tocando, e faixas (0-49, 50-99…) em série longa. */ .ep-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px} .ep-head .syn-more{margin:0} .ep-all{font-size:12.5px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap} .ep-all:hover{color:#fff} .ep-ranges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px} .ep-range{background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:8px;cursor:pointer} .ep-range.on{background:var(--primary);border-color:var(--primary);color:#fff} /* 5 por linha (flex): a ÚLTIMA linha, se incompleta, ESTICA as células pra preencher a largura (flex-grow), como o Jack pediu. */ .ep-grid{display:flex;flex-wrap:wrap;gap:8px} .ep-cell{position:relative;flex:1 1 calc((100% - 32px) / 5);min-width:52px;min-height:52px; display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--card2); border:1px solid var(--line);font-size:15px;font-weight:700;color:var(--txt);cursor:pointer;transition:background .12s,border-color .12s} .ep-cell:hover{border-color:var(--primary)} .ep-cell.on{background:var(--primary);border-color:var(--primary);color:#fff} .ep-cell.ep-lock{color:var(--muted)} /* Episódio JÁ ASSISTIDO: número esmaecido + ponto rosa no canto, pra ela achar de relance onde parou. Declarado ANTES da .on lá em cima? Não — a .on vem antes, mas é mais específica no fundo; aqui só mexo no ponto/opacidade, então o episódio TOCANDO agora (.on) mantém o fundo cheio. No .on o ponto fica branco pra aparecer. */ .ep-cell.ep-watched{border-color:color-mix(in srgb, var(--primary) 40%, var(--line))} .ep-cell.ep-watched .ep-n{opacity:.5} .ep-cell.ep-watched::after{content:"";position:absolute;top:5px;left:5px;width:7px;height:7px;border-radius:50%; background:var(--primary);box-shadow:0 0 0 2px var(--card2)} .ep-cell.on.ep-watched .ep-n{opacity:1} .ep-cell.on.ep-watched::after{background:#fff;box-shadow:0 0 0 2px var(--primary)} .ep-lockico{position:absolute;top:5px;right:5px;opacity:.7;display:flex} /* barras de "tocando": em TODA célula, mas só aparecem na ativa (.on) — assim o indicador segue o episódio em vez de ficar preso no trailer. */ .ep-bars{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:none;gap:2px;align-items:flex-end;height:9px} .ep-cell.on .ep-bars{display:flex} .ep-bars i{width:2.5px;height:100%;background:#fff;border-radius:1px;transform-origin:bottom;animation:epbar .8s ease-in-out infinite} .ep-bars i:nth-child(2){animation-delay:.25s} .ep-bars i:nth-child(3){animation-delay:.5s} @keyframes epbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} /* ─────────────── botoes ─────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:0;border-radius:999px;padding:12px 22px;font-size:13.5px;font-weight:700; cursor:pointer;transition:.15s;text-align:center;background:var(--surface);color:var(--txt) } .btn:hover{background:var(--line2)} .btn:active{transform:scale(.98)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff; box-shadow:0 6px 20px -8px rgba(255,117,168,.6)} .btn-primary:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--primary),var(--primary-2))} .btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--muted)} .btn-ghost:hover{background:var(--card);color:var(--txt)} .btn-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff} .btn-block{display:flex;width:100%} .btn-sm{padding:8px 16px;font-size:12px} .btn-lg{padding:15px 28px;font-size:15px} /* ─────────────── cartoes e formularios ─────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px} .card-pad0{padding:0;overflow:hidden} .panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg);padding:18px} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field label{font-size:12px;font-weight:600;color:var(--muted)} .field .hint{font-size:11px;color:var(--muted2)} .input{ width:100%;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius); padding:12px 14px;font-size:14px;color:var(--txt);transition:border-color .15s } .input::placeholder{color:var(--muted2)} .input:focus{outline:none;border-color:rgba(255,117,168,.55)} .input.err{border-color:rgba(239,68,68,.6)} textarea.input{min-height:96px;resize:vertical} .alert{border-radius:var(--radius);padding:12px 14px;font-size:13px;margin-bottom:14px;border:1px solid} .alert-ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35);color:#8ef0c4} .alert-err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:#ffb3b3} .alert-info{background:rgba(255,117,168,.08);border-color:rgba(255,117,168,.3);color:#ffc4da} .tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--muted)} .tag-ok{background:rgba(16,185,129,.14);color:#5fe0ab} .tag-warn{background:rgba(240,180,41,.14);color:var(--premium)} .tag-pink{background:rgba(255,117,168,.14);color:var(--primary)} /* ─────────────── player ─────────────── */ .player-wrap{display:flex;justify-content:center;background:var(--bg)} .player{ position:relative;width:100%;max-width:420px;aspect-ratio:9/16;max-height:85vh; background:#000;border-radius:var(--radius-xl);overflow:hidden } .player video{width:100%;height:100%;object-fit:contain;background:#000} .player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .player .veil{position:absolute;inset:0;background:rgba(0,0,0,.42)} .player .play-cta{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;border:0;background:transparent;cursor:pointer;color:#fff;z-index:3 } .play-orb{ width:78px;height:78px;border-radius:999px;display:grid;place-items:center; background:rgba(255,117,168,.92);box-shadow:0 12px 40px -10px rgba(255,117,168,.7) } .play-orb svg{margin-left:4px} .play-cta span{font-size:15px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6)} .player .locked{ position:absolute;inset:0;z-index:5;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center; background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.75)) } /* [hidden] e regra do navegador e perde pra .locked{display:flex} — sem este !important o paywall aparecia em cima do video desde o segundo 0. */ .player .locked[hidden]{display:none!important} .player .locked h3{font-family:'Poppins',sans-serif;font-size:17px} .player .locked p{font-size:12.5px;color:var(--muted);max-width:280px} .player-side{position:absolute;right:10px;bottom:74px;z-index:4;display:flex;flex-direction:column;gap:10px} .player-side button,.player-side a{ width:40px;height:40px;border-radius:999px;border:0;cursor:pointer; background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center } .player-side .on{color:var(--primary)} /* ─────────────── info do filme ─────────────── */ .movie-info{max-width:420px;margin:0 auto;padding:16px} .movie-info h1{font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .movie-info .syn{font-size:13px;color:var(--muted);line-height:1.65;margin-top:10px} .movie-info .syn.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .movie-info details > summary{list-style:none;cursor:pointer;color:var(--primary);font-size:12px;font-weight:600;margin-top:6px} .movie-info details > summary::-webkit-details-marker{display:none} /* faixa de indicacao */ .refcard{border-radius:var(--radius-xl);overflow:hidden;background:var(--card);border:1px solid var(--line)} .refcard .top{background:linear-gradient(135deg,var(--primary),#e0568c);padding:18px;display:flex;gap:12px;align-items:center} .refcard .top .ico{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none} .refcard .top h3{font-family:'Poppins',sans-serif;font-size:16.5px;font-weight:800} .refcard .top p{font-size:11.5px;color:rgba(255,255,255,.85);margin-top:1px} .refcard .body{padding:18px;display:flex;flex-direction:column;gap:14px} .refcard .body p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.6} /* ─────────────── planos ─────────────── */ .plans{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}} @media(min-width:1050px){.plans{grid-template-columns:repeat(4,1fr)}} .plan{ position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--radius-xl);padding:22px;display:flex;flex-direction:column;gap:12px } .plan.best{border-color:rgba(255,117,168,.55);box-shadow:0 0 0 1px rgba(255,117,168,.18)} .plan .flag{ position:absolute;top:-10px;left:50%;transform:translateX(-50%); background:var(--primary);color:#fff;font-size:10px;font-weight:800; text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:999px;white-space:nowrap } .plan h3{font-size:15px;color:var(--muted)} .plan .price{font-family:'Poppins',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1} .plan .price small{font-size:15px;color:var(--muted2);font-weight:600} .plan .was{font-size:12px;color:var(--muted2);text-decoration:line-through} .plan .per{font-size:12px;color:var(--muted)} .plan ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--muted)} .plan ul li{display:flex;gap:8px;align-items:flex-start} .plan ul li svg{flex:none;margin-top:2px;color:var(--primary)} /* ─────────────── checkout ─────────────── */ .checkout{display:grid;gap:18px;grid-template-columns:1fr;align-items:start} @media(min-width:900px){.checkout{grid-template-columns:1.4fr .9fr}} .pix-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .pix-box img{width:236px;height:236px;border-radius:var(--radius);background:#fff;padding:10px} .pix-code{ width:100%;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius); padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.45; color:var(--txt);overflow-wrap:anywhere;white-space:pre-wrap;min-height:108px;max-height:180px; overflow:auto;resize:vertical } .pix-copy-btn{width:100%;min-height:46px} .pix-copy-btn[data-copy-state="copied"]{background:#25a56f;border-color:#25a56f} .pix-copy-btn[data-copy-state="manual"]{background:var(--card2);border-color:var(--primary);color:var(--txt)} .pix-auto-status{display:flex;align-items:center;justify-content:center;gap:8px; width:100%;margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.4} [data-pix-create][aria-busy="true"],[data-ss-pay][aria-busy="true"]{cursor:wait;pointer-events:none;opacity:.82} .summary-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0} .summary-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px;font-weight:800} /* ── checkout: forma de pagamento (PIX / cartão) ── */ .pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .pay-opt{position:relative;display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer; border:1.5px solid var(--line2);border-radius:14px;background:var(--card2); transition:border-color .18s,background .18s} .pay-opt input{position:absolute;opacity:0;pointer-events:none} .pay-opt .pay-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:rgba(255,255,255,.06);color:var(--txt)} .pay-opt-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2} .pay-opt-txt b{font-size:14px} .pay-opt-txt small{font-size:11px;color:var(--muted2);margin-top:2px} .pay-check{margin-left:auto;flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center; border:1.5px solid var(--line2);color:#fff;opacity:0;transform:scale(.7);transition:.18s} .pay-opt.on{border-color:var(--primary);background:rgba(255,117,168,.08)} .pay-opt.on .pay-check{opacity:1;transform:scale(1);background:var(--primary);border-color:var(--primary)} .pay-opt.on .pay-ic{background:rgba(255,117,168,.16)} @media(max-width:380px){.pay-methods{grid-template-columns:1fr}} .pay-panel{margin-bottom:4px} .pix-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px; background:rgba(50,188,173,.1);border:1px solid rgba(50,188,173,.28)} .pix-note-ic{flex:none;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:#32BCAD;color:#fff} .pix-note b{font-size:13px;display:block} .pix-note p{font-size:12px;color:var(--muted);margin-top:2px} .pay-brands{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:14px} .pay-brands-lbl{font-size:11px;color:var(--muted2);width:100%;margin-bottom:1px} .pay-brand{display:inline-flex;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.3)} .pay-brand svg{display:block} /* ─────────────── paginacao ─────────────── */ .pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:28px 0;flex-wrap:wrap} .pager a,.pager span{ min-width:38px;height:38px;padding:0 12px;border-radius:10px;display:grid;place-items:center; background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted) } .pager a:hover{color:var(--txt);border-color:var(--line2)} .pager .on{background:var(--primary);border-color:var(--primary);color:#fff} .pager .gap{background:transparent;border:0} /* ─────────────── estados vazios ─────────────── */ .empty{text-align:center;padding:56px 20px;max-width:380px;margin:0 auto} .empty h3{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800} .empty p{font-size:13px;color:var(--muted);margin-top:6px} .empty .btn{margin-top:16px} /* ─────────────── rodape ─────────────── */ .footer{border-top:1px solid var(--line);margin-top:40px;padding:32px 0 40px;background:#0b0b0b} .footer-grid{display:grid;gap:26px;grid-template-columns:1fr} @media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}} .footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:10px} .footer a{display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:color .15s} .footer a:hover{color:var(--txt)} .footer .copy{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:11.5px;color:var(--muted2)} .socials{display:flex;gap:8px;flex-wrap:wrap} .socials a{ width:38px;height:38px;border-radius:999px;background:var(--card);border:1px solid var(--line); display:grid;place-items:center;color:var(--muted);padding:0 } .socials a:hover{color:var(--primary);border-color:rgba(255,117,168,.4)} /* ─────────────── barra inferior (mobile) ─────────────── */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:70; background:#0e0e0e;border-top:1px solid rgba(255,255,255,.07); padding-bottom:env(safe-area-inset-bottom) } @media(min-width:768px){.tabbar{display:none}} .tabbar-in{display:flex;align-items:center;justify-content:space-around;height:var(--tab-h)} .tabbar a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; font-size:10px;font-weight:600;color:var(--muted);padding:6px 0 } .tabbar a.on{color:var(--primary)} .tabbar a.hi .orb{ width:40px;height:40px;margin-top:-22px;border-radius:999px;display:grid;place-items:center; background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff; box-shadow:0 8px 22px -8px rgba(255,117,168,.75) } .tabbar a.hi{color:var(--primary)} /* ─────────────── faixa VIP ─────────────── */ /* Rosa solida com coroa, texto e botao translucido — igual ao VipBanner. */ .vip{ /* z-index:1 tira a faixa de baixo do .hero-bg (position:absolute;z-index:0), que sobe com top negativo e lavava o rosa no painel Popular. Fica na regra base porque no desktop a .vip tambem e static e sofria o mesmo. */ position:relative;z-index:1; display:flex;align-items:center;gap:12px;border-radius:var(--radius);padding:12px 16px; background:linear-gradient(135deg,#FF4D94,#FF75A8 42%,#E0568C); box-shadow:0 6px 22px -10px rgba(255,77,168,.6) } .vip .ico{color:#fff;flex:none;display:grid} .vip .ico img{width:28px;height:28px;object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))} .vip .txt{flex:1;min-width:0} .vip .txt b{display:block;color:#fff;font-size:12px;font-weight:600;line-height:1.35} .vip .txt span{display:block;color:rgba(255,255,255,.8);font-size:11px;font-weight:500;margin-top:2px} .vip a{ /* sem backdrop-filter: o botao fica sobre um gradiente OPACO, nao ha nada atras pra desfocar (zero pixel muda) e ele forcava uma camada + blur por frame */ flex:none;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.2); color:#fff;font-size:10px;font-weight:700; text-transform:uppercase;letter-spacing:.04em;transition:.2s;white-space:nowrap } .vip a:hover{background:rgba(255,255,255,.3)} /* Slot da faixa VIP: existe um por painel de aba. No Popular ela entra logo abaixo do carrossel de destaques; nas outras abas, no topo do painel (mesma altura de sempre). Atencao: nas abas sem hero o margin-top ESCAPA do .tab-panel por colapso de margem — e por isso que a posicao bate com a de antes. Se um dia o .tab-panel ganhar padding-top ou overflow, aparece um degrau de 16px aqui. */ .vip-slot{position:relative;z-index:1;margin:16px 0} .hero-wrap + .vip-slot{margin-top:14px} /* colado nas bolinhas do hero, sem buraco */ /* ─────────────── faixas promocionais ─────────────── */ .promo{ display:flex;align-items:center;gap:12px;border-radius:var(--radius-lg);padding:14px 16px; background:linear-gradient(135deg,rgba(255,117,168,.16),rgba(255,117,168,.05)); border:1px solid rgba(255,117,168,.28);margin:18px 0 } .promo .ico{width:40px;height:40px;border-radius:12px;background:rgba(255,117,168,.2); display:grid;place-items:center;color:var(--primary);flex:none} .promo h3{font-size:14px} .promo p{font-size:12px;color:var(--muted);margin-top:1px} .promo .btn{margin-left:auto;flex:none} @media(max-width:560px){.promo{flex-wrap:wrap}.promo .btn{margin-left:0;width:100%}} .banner-img{display:block;border-radius:var(--radius-lg);overflow:hidden;margin:18px 0} .banner-img img{width:100%;height:auto} /* ─────────────── abas ─────────────── */ .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs a{ padding:11px 15px;font-size:13px;font-weight:600;color:var(--muted); border-bottom:2px solid transparent;white-space:nowrap } .tabs a.on{color:var(--txt);border-bottom-color:var(--primary)} /* ─────────────── utilidades ─────────────── */ .page-head{padding:22px 0 14px} .page-head h1{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em} .page-head p{font-size:13px;color:var(--muted);margin-top:4px} .divider{height:1px;background:var(--line);margin:20px 0} .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ─────────────── escolha de gostos ─────────────── */ .tastegrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))} .tastechip{position:relative;display:block;cursor:pointer} .tastechip input{position:absolute;opacity:0;width:0;height:0} .tastechip .body{ display:flex;flex-direction:column;gap:3px;padding:16px 15px;border-radius:var(--radius-lg); background:var(--card);border:1px solid var(--line);transition:.15s;min-height:82px;justify-content:center } .tastechip .body b{font-size:14px} .tastechip .body em{font-style:normal;font-size:11.5px;color:var(--muted2)} .tastechip:hover .body{border-color:var(--line2)} .tastechip .tick{ position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:999px; display:grid;place-items:center;background:var(--primary);color:#fff; opacity:0;transform:scale(.6);transition:.15s } .tastechip input:checked ~ .body{ border-color:var(--primary);background:rgba(255,117,168,.09) } .tastechip input:checked ~ .tick{opacity:1;transform:scale(1)} .tastechip input:focus-visible ~ .body{outline:2px solid var(--primary);outline-offset:2px} /* ═══════════════════ paywall de tela cheia (/assinar) ═══════════════════ Layout do mockup, cores da marca: onde ele usava lime, aqui entra o rosa do tema — lime e a identidade do outro app, nao a nossa. */ body.bare{padding-bottom:0} body.bare #conteudo{min-height:100vh;display:flex;align-items:center;justify-content:center} @media(min-width:600px){body.bare #conteudo{padding:24px}} .pw{ position:relative;width:100%;max-width:460px; min-height:100vh;background:#000;overflow:hidden; display:flex;flex-direction:column } @media(min-width:600px){ .pw{ min-height:min(940px,calc(100vh - 48px)); border-radius:34px;box-shadow:0 30px 90px -20px rgba(0,0,0,.75) } } /* fundo: a propria capa central desfocada, pra pagina nao ficar caixa preta no desktop */ .pw-bg{ position:fixed;inset:0;z-index:-1; background-position:center;background-size:cover;background-repeat:no-repeat; filter:blur(70px) brightness(.3) saturate(1.15);transform:scale(1.25) } /* ── topo ── */ .pw-top{ position:absolute;top:20px;left:0;right:0;z-index:30; display:flex;align-items:center;justify-content:space-between;padding:0 20px } .pw-x{ width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:rgba(0,0,0,.32);color:#fff;backdrop-filter:blur(4px);flex:none } .pw-restore{ color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.7) } /* ── mosaico de capas ── */ .pw-hero{position:absolute;top:0;left:0;right:0;height:53%;z-index:1} .pw-grid{display:grid;grid-template-columns:1fr 1.28fr 1fr;gap:6px;height:100%;padding:6px} .pw-col{display:flex;flex-direction:column;gap:6px;min-height:0} .pw-col.pw-mid{margin-top:-16px} .pw-grid img{ width:100%;height:100%;object-fit:cover;border-radius:11px; flex:1;min-height:0;background:var(--card) } .pw-grid .pw-big{flex:1.7} .pw-grid .pw-small{flex:.55} /* degrade que apaga as capas pro preto, senao o titulo nao le */ .pw-fade{ position:absolute;left:0;right:0;top:24%;height:34%;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 55%,#000 100%) } /* ── conteudo ── */ .pw-content{ position:relative;z-index:10;margin-top:auto; display:flex;flex-direction:column;padding:0 22px 24px } .pw-title{ font-family:'Poppins',Montserrat,sans-serif; font-size:clamp(27px,8vw,33px);line-height:1.05;font-weight:800;letter-spacing:-.7px } .pw-title .hl{color:var(--primary)} .pw-sub{ color:var(--muted);font-size:13.5px;line-height:1.5;margin:12px 0 18px;max-width:310px } /* ── planos: radio escondido + label, selecao 100% em CSS ── */ .pw-plans{ display:flex;gap:8px;align-items:stretch; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;padding-top:9px } .pw-plans::-webkit-scrollbar{display:none} .pw-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .pw-plan{ position:relative;flex:1 0 auto;min-width:94px;scroll-snap-align:center; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09); border-radius:18px;padding:30px 7px 14px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:3px; transition:border-color .15s,background .15s } .pw-tag{ position:absolute;top:0;left:50%;transform:translate(-50%,-50%); font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; padding:5px 9px;border-radius:11px;white-space:nowrap; background:#242427;color:#c7c7cc } .pw-name{font-size:14.5px;font-weight:700} .pw-price{font-size:15px;font-weight:800} .pw-per{ color:var(--muted);font-size:11.5px;margin-top:7px;width:100%;text-align:center; background:rgba(0,0,0,.35);border-radius:9px;padding:6px 2px } .pw-off{ position:absolute;top:-11px;right:-7px;z-index:3; background:linear-gradient(135deg,#ff8a1e,#ff4d1c);color:#fff; font-size:9.5px;font-weight:800;padding:5px 8px;border-radius:11px; transform:rotate(6deg);box-shadow:0 4px 10px rgba(255,80,20,.4) } /* estado escolhido */ .pw-radio:checked + .pw-plan{ border-color:var(--primary);background:rgba(255,117,168,.11) } .pw-radio:checked + .pw-plan .pw-tag{background:var(--primary);color:#fff} .pw-radio:checked + .pw-plan .pw-per{color:#ffd4e4} .pw-radio:focus-visible + .pw-plan{outline:2px solid var(--primary);outline-offset:2px} /* ── relogio da promocao ── */ .pw-timerwrap{margin:18px 0 14px;text-align:center} .pw-timerlab{ display:block;color:var(--muted2);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px } .pw-timer{display:flex;align-items:center;justify-content:center;gap:7px} .pw-tbox{ background:rgba(255,255,255,.08);border-radius:12px;min-width:46px;padding:11px 0; text-align:center;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums } .pw-colon{font-size:17px;font-weight:700;opacity:.45} /* ── botao e rodape ── */ .pw-cta{ width:100%;border:0;cursor:pointer;background:#fff;color:#0a0a0a; font-size:15px;font-weight:800;letter-spacing:.3px;text-transform:uppercase; padding:18px;border-radius:17px;margin-top:4px; box-shadow:0 8px 24px -6px rgba(255,255,255,.22);transition:transform .1s } .pw-cta:active{transform:scale(.985)} .pw-legal{text-align:center;color:var(--muted2);font-size:11.5px;margin-top:13px} .pw-legal a{color:var(--muted);text-decoration:underline} .pw-skip{ display:block;text-align:center;color:var(--muted2);font-size:12.5px; margin-top:14px;padding:6px } .pw-skip:hover{color:var(--muted)} /* telas baixas: o mosaico encolhe pro preco nao sair da area visivel */ @media(max-height:680px){ .pw-hero{height:42%} .pw-fade{top:16%} .pw-title{font-size:25px} .pw-sub{margin:9px 0 14px} } /* ═══════════════════════════════════════════════════════════════════ CARA DE APP (mobile) Camada de polish + micro-interacoes pra o tema parecer app nativo: ripple no toque, reveal ao rolar, tabbar Material 3, cards com profundidade, transicao de pagina. Tudo enhancement — a classe .js (marcada no ) liga os estados iniciais; sem JS nada some. ═══════════════════════════════════════════════════════════════════ */ :root{--ease:cubic-bezier(.2,.7,.2,1)} /* ---------- icones Material Symbols (mesmo conjunto do site oficial) ---------- */ .msym{ font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1; letter-spacing:normal;text-transform:none;display:inline-grid;place-items:center; white-space:nowrap;direction:ltr;vertical-align:middle;user-select:none;flex:none;overflow:hidden; -webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24 } .msym.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24} /* ---------- ripple Material ---------- */ .ripple-host{position:relative;overflow:hidden} .ripple-ink{ position:absolute;border-radius:50%;pointer-events:none;z-index:5; background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 68%); transform:scale(0);opacity:.55;animation:rippleGo .58s ease-out forwards; mix-blend-mode:overlay } @keyframes rippleGo{to{transform:scale(2.4);opacity:0}} /* alvos ganham recorte + relevo pro toque */ .btn,.chip,.seg a,.crownbtn,.iconbtn,.hero-play,.vip a,.tabbar a{position:relative;overflow:hidden} /* ---------- entrada de pagina + secoes (CSS puro; nao depende de JS/CSP) ---------- */ @media(max-width:900px){ #conteudo{animation:pageIn .45s ease-out both} .anim-reveal{animation:secIn .6s var(--ease) both} .anim-reveal .mcard{animation:cardIn .5s var(--ease) both} .anim-reveal .mcard:nth-child(2){animation-delay:.05s} .anim-reveal .mcard:nth-child(3){animation-delay:.1s} .anim-reveal .mcard:nth-child(4){animation-delay:.15s} .anim-reveal .mcard:nth-child(n+5){animation-delay:.2s} } @keyframes pageIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}} @keyframes secIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ #conteudo,.anim-reveal,.anim-reveal .mcard{animation:none!important} } /* ---------- feedback tatil universal ---------- */ @media(hover:none){ .btn:active,.chip:active,.seg a:active,.hero-play:active,.vip a:active, .crownbtn:active,.iconbtn:active,.planrow:active{transform:scale(.95)} .mcard:active .thumb{transform:scale(.95)} } /* ═══════════ bottom nav estilo app (Material 3 + FAB central) ═══════════ */ @media(max-width:767px){ .tabbar{ background:rgba(10,10,12,.94); -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4); border-top:1px solid rgba(255,255,255,.06); box-shadow:0 -12px 36px -16px rgba(0,0,0,.85) } .tabbar-in{height:64px;padding:7px 2px 5px;align-items:flex-start} .tabbar a{gap:2px;padding:0;color:var(--muted2);transition:color .25s var(--ease)} .tabbar a .ico-wrap{ display:grid;place-items:center;width:58px;height:30px;border-radius:999px; position:relative;z-index:1;transition:transform .3s var(--ease);color:inherit } /* pilula rosa que cresce atras do icone ativo */ .tabbar a .ico-wrap::before{ content:"";position:absolute;inset:0;border-radius:999px;z-index:-1; background:rgba(255,117,168,.18);transform:scale(.4);opacity:0; transition:transform .32s var(--ease),opacity .28s var(--ease) } .tabbar a span{font-size:10px;font-weight:600;letter-spacing:.01em;transition:color .25s; white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .tabbar a.on{color:var(--primary)} .tabbar a.on .ico-wrap::before{transform:scale(1);opacity:1} .tabbar a.on span{font-weight:700} .tabbar a:active .ico-wrap{transform:scale(.84)} } /* ═══════════ cards com profundidade ═══════════ */ .mcard .thumb{ border-radius:14px; box-shadow:0 6px 18px -10px rgba(0,0,0,.7); transition:transform .22s var(--ease),box-shadow .22s var(--ease) } @media(hover:hover){ .mcard:hover .thumb{box-shadow:0 14px 30px -12px rgba(0,0,0,.85)} } /* selo de audio: pilula com vidro em vez de retangulo */ .mcard .badge{ top:8px;right:8px;border-radius:999px;padding:3px 8px;font-size:8.5px; background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);color:#fff } /* tipo de áudio, on-theme (rosa da marca): dublado = rosa preenchido, legendado = escuro com contorno rosa. Distinção na batida do olho sem fugir do tema. */ .mcard .badge-dublado{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;font-weight:800} .mcard .badge-legendado{background:rgba(18,18,24,.72);border-color:rgba(255,117,168,.55);color:#fff} .mcard .badge-brasileira{background:var(--primary-2);border-color:transparent;color:#fff;font-weight:800} /* rank do Top 10: gradiente da marca */ .mcard .rank{ border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 3px 10px -3px rgba(255,117,168,.6) } /* barra de progresso mais viva */ .mcard .prog{height:4px;background:rgba(255,255,255,.22)} .mcard .prog i{background:linear-gradient(90deg,var(--primary),var(--primary-2)); box-shadow:0 0 8px rgba(255,117,168,.7)} /* ═══════════ header, chips e hero — mais app ═══════════ */ @media(max-width:767px){ /* header estilo app: logo + busca-lupa que expande + idioma (o presente foi pro tabbar) */ .nav-actions{gap:6px} .nav-search input{padding-top:11px;padding-bottom:11px;font-size:14px} /* busca colapsada: SÓ a lupa, sem "box". Ao tocar (.nav.searching) expande e ocupa o header ao lado da logo, escondendo os outros ícones (ver app-fx.js). */ /* colapsada: encostada nos outros ícones à direita (sem vão), lupa como 1º do grupo */ .nav-search{flex:none;width:44px;max-width:44px;margin-left:auto; transition:max-width .34s var(--ease),width .34s var(--ease)} .nav-search .ico{display:none} .nav-search input{flex:1;min-width:0;opacity:0;transition:opacity .2s ease} .nav-search-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:40px;flex:none;color:var(--txt)} /* expandida: ocupa do lado da logo até o fim */ .nav.searching .nav-search{flex:1;width:auto;max-width:100%;margin-left:10px} .nav.searching .nav-search-toggle{display:none} .nav.searching .nav-search .ico{display:grid} .nav.searching .nav-search input{opacity:1} .nav.searching .nav-search-close{display:flex;align-items:center;justify-content:center;width:36px;height:40px;font-size:28px;line-height:1;color:var(--muted);flex:none} .nav.searching .nav-actions{display:none} /* chip ativo com preenchimento da marca */ .chip.on{background:rgba(255,117,168,.16);border-color:rgba(255,117,168,.4);color:var(--txt)} /* segmento ativo com brilho */ .seg a.on{box-shadow:0 3px 14px -2px rgba(255,117,168,.5)} /* hero: botao pulsa de leve chamando o toque */ .hero-play{box-shadow:0 8px 24px -8px rgba(255,117,168,.65);animation:heroPulse 2.6s ease-in-out infinite} /* titulo de secao com barrinha rosa a esquerda, cara de app */ .section-head h2{position:relative;padding-left:12px} .section-head h2::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:16px;border-radius:999px; background:linear-gradient(180deg,var(--primary),var(--primary-2)) } .section-head h2 .mark ~ *{padding-left:0} } @keyframes heroPulse{0%,100%{box-shadow:0 8px 24px -8px rgba(255,117,168,.55)} 50%{box-shadow:0 8px 30px -6px rgba(255,117,168,.85)}} @media(prefers-reduced-motion:reduce){.hero-play{animation:none}} /* ═══════════ skeleton shimmer (pronto pra uso) ═══════════ */ .skel{position:relative;overflow:hidden;background:var(--card2);border-radius:var(--radius)} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:shimmer 1.3s infinite} @keyframes shimmer{to{transform:translateX(100%)}} /* faixa VIP: leve brilho deslizante pra chamar atencao (mobile) */ @media(max-width:767px){ .vip{overflow:hidden;padding:10px 12px;gap:10px} /* O titulo NUNCA vira "...": quebra em quantas linhas precisar. Em uma linha ele pede 276px (pt) / 310px (es) e a coluna de texto tem 128-222px num telefone — nao cabe em largura nenhuma, entao reticencia aqui era corte garantido. */ .vip .txt b{white-space:normal;overflow:visible;text-overflow:clip; overflow-wrap:anywhere;font-size:11.5px;line-height:1.3} .vip .txt span{white-space:normal;overflow:visible;text-overflow:clip; overflow-wrap:anywhere} .vip a{padding:7px 10px;font-size:9.5px} /* pointer-events:none: sem isso o brilho passa NA FRENTE do CTA enquanto varre a barra, e o toque em "Ver planos" cai na .vip em vez de no link. */ .vip::after{content:"";position:absolute;top:0;bottom:0;width:40%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); transform:translateX(-160%);animation:vipShine 4.5s ease-in-out infinite} } /* Telas bem estreitas: o CTA ocupa a linha inteira e devolve ~98px de largura pro texto, assim o titulo cabe em 2 linhas e o preco nao quebra. */ @media(max-width:359px){ .vip{flex-wrap:wrap;row-gap:9px} .vip a{flex:1 0 100%;text-align:center;padding:9px 12px} } @keyframes vipShine{0%,60%{transform:translateX(-160%)}85%,100%{transform:translateX(320%)}} @media(prefers-reduced-motion:reduce){.vip::after{display:none}} /* ═══════════════════════════════════════════════════════════════════ FASE 1 — MOTION (transicoes portadas do iDrama, cores nossas) enter_ios_anim (scale+fade), slide_in_bottom (sheet), push (horizontal). ═══════════════════════════════════════════════════════════════════ */ @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes veilIn{from{opacity:0}to{opacity:1}} @keyframes iosPop{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}} /* login SEMPRE centralizado no meio da tela (zoom), nunca sobe de baixo */ @media(max-width:640px){ .modal-box{max-width:400px;width:100%;max-height:90dvh} .modal:target .modal-veil,.modal.is-open .modal-veil{animation:veilIn .25s ease both} .modal:target .modal-box,.modal.is-open .modal-box{animation:iosPop .28s var(--ease) both} } @media(min-width:641px){ .modal:target .modal-box,.modal.is-open .modal-box{animation:iosPop .28s var(--ease) both} } @media(prefers-reduced-motion:reduce){ .modal-box,.modal-veil{animation:none!important} } /* ═══════════ FASE 2 — curtir animado (Lottie) ═══════════ */ .lot{line-height:0} .fav-btn .fav-heart{position:relative;display:inline-grid;place-items:center;width:18px;height:18px} .fav-btn .msym{transition:color .2s,transform .2s var(--ease)} .fav-btn.is-fav{border-color:rgba(255,117,168,.42);background:rgba(255,117,168,.09)} .fav-btn.is-fav .msym{color:var(--primary)} .fav-btn:active .fav-heart{transform:scale(.85)} /* o coração que explode fica maior que o botão e centralizado nele */ .fav-burst{ position:absolute;left:50%;top:50%;width:78px;height:78px; transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:5 } /* mãozinha "assine" no botão do paywall */ .pw-cta{position:relative} .pw-cta-hand{position:absolute;right:8px;bottom:0;pointer-events:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))} /* ═══════════════════════════════════════════════════════════════════ FASE 3 — feed vertical (curtas): 1 filme por tela, snap, autoplay ═══════════════════════════════════════════════════════════════════ */ body.is-feed{padding-bottom:0;background:#000} body.is-feed .nav,body.is-feed .footer{display:none} body.is-feed main{padding-top:0} body.is-feed .tabbar{background:rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.08)} .feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory; scrollbar-width:none;background:#000;overscroll-behavior-y:contain} .feed::-webkit-scrollbar{display:none} .feed-slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always; overflow:hidden;background:#000} .feed-poster,.feed-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feed-poster{z-index:1} .feed-vid{z-index:2;opacity:0;transition:opacity .35s} .feed-slide.is-active .feed-vid{opacity:1} .feed-shade{position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.82),transparent 26%,transparent 60%,rgba(0,0,0,.5))} .feed-tap{position:absolute;inset:0;z-index:4;border:0;background:transparent;cursor:pointer} .feed-muted{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6; display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:600; background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:7px 13px;border-radius:999px;transition:opacity .3s} .feed[data-sound="on"] .feed-muted{opacity:0;pointer-events:none} .feed-slide.is-paused::after{content:"";position:absolute;left:50%;top:50%;z-index:5; width:74px;height:74px;transform:translate(-50%,-50%);pointer-events:none;border-radius:999px; background:rgba(0,0,0,.4) center/34px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5Z'/%3E%3C/svg%3E")} .feed-back{position:fixed;top:14px;left:12px;z-index:20;width:40px;height:40px;border-radius:999px; display:grid;place-items:center;color:#fff; background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .feed-side{position:absolute;right:10px;bottom:calc(var(--tab-h) + 34px);z-index:10; display:flex;flex-direction:column;gap:19px;align-items:center} .feed-act{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent; color:#fff;cursor:pointer;padding:0} .feed-act-ic{width:50px;height:50px;border-radius:999px;display:grid;place-items:center;position:relative; background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:transform .18s var(--ease),background .2s} .feed-act:active .feed-act-ic{transform:scale(.86)} .feed-act-n{font-size:11px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)} .feed-act.is-fav .feed-act-ic{background:rgba(255,117,168,.22)} .feed-act.is-fav .msym{color:var(--primary)} .feed-fav{margin:0} .feed-fav .fav-burst{width:98px;height:98px} .feed-info{position:absolute;left:16px;right:80px;bottom:calc(var(--tab-h) + 26px);z-index:9;color:#fff} .feed-info h2{font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center; gap:8px;flex-wrap:wrap;text-shadow:0 2px 8px rgba(0,0,0,.65)} .feed-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; background:rgba(255,117,168,.92);padding:3px 8px;border-radius:999px} .feed-info p{font-size:13px;color:rgba(255,255,255,.86);margin:8px 0 12px;line-height:1.42; text-shadow:0 1px 6px rgba(0,0,0,.7)} .feed-cta{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:13.5px;font-weight:700; padding:10px 20px;border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 8px 22px -8px rgba(255,117,168,.7)} .feed-prog{position:absolute;left:0;right:0;bottom:var(--tab-h);height:3px;z-index:11;background:rgba(255,255,255,.16)} .feed-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2))} .feed-wall{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center; background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.78))} .feed-wall[hidden]{display:none} .feed-wall h3{font-family:'Poppins',sans-serif;font-size:18px} .feed-guide{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + 70px);z-index:25; display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;color:#fff} .feed-guide[hidden]{display:none} .feed-guide span{font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.85)} /* ═══════════════════════════════════════════════════════════════════ FASE 4 — mini-player "continuar", badges de status, bottom-sheet ═══════════════════════════════════════════════════════════════════ */ /* mini-player flutuante (só mobile) */ .miniplayer{position:fixed;left:8px;right:8px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 22px);z-index:55; display:flex;align-items:center;overflow:hidden;border-radius:14px; background:rgba(20,20,22,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px -14px rgba(0,0,0,.75); animation:sheetUp .42s var(--ease) both} @media(min-width:768px){.miniplayer{display:none}} .mini-main{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:8px 6px 8px 8px} .mini-cover{width:40px;height:52px;border-radius:8px;object-fit:cover;flex:none} .mini-txt{flex:1;min-width:0} .mini-txt b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-txt span{display:block;font-size:11px;color:var(--muted);margin-top:1px} .mini-play{width:34px;height:34px;flex:none;border-radius:999px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-2))} .mini-x{width:34px;align-self:stretch;border:0;background:transparent;color:var(--muted2);cursor:pointer;flex:none} .mini-x:active{transform:scale(.9)} .mini-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)} .mini-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2))} /* badges de status no card (Novo / Em alta) */ .mcard .flag{position:absolute;top:8px;left:8px;z-index:3; font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff; padding:3px 8px;border-radius:999px;box-shadow:0 3px 10px -3px rgba(0,0,0,.5)} .mcard .flag.new{background:linear-gradient(135deg,var(--primary),var(--primary-2))} .mcard .flag.hot{background:linear-gradient(135deg,#ff8a1e,#ff4d1c)} .mcard.ranked .flag{left:38px} /* bottom-sheet reutilizável (abre via [data-sheet] -> #id) */ .sheet{position:fixed;inset:0;z-index:90;display:none} .sheet:target,.sheet.is-open{display:block} .sheet-veil{position:absolute;inset:0;background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .sheet:target .sheet-veil,.sheet.is-open .sheet-veil{animation:veilIn .25s ease both} .sheet-box{position:absolute;left:0;right:0;bottom:0; background:var(--card);border-radius:22px 22px 0 0;padding:26px 18px calc(20px + env(safe-area-inset-bottom)); max-height:88dvh;overflow-y:auto;box-shadow:0 -20px 50px -20px rgba(0,0,0,.7)} .sheet:target .sheet-box,.sheet.is-open .sheet-box{animation:sheetUp .34s var(--ease) both} .sheet-box::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%); width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.22)} .sheet-box h3{font-family:'Poppins',sans-serif;font-size:17px;margin-bottom:14px} @media(min-width:768px){ .sheet{display:none!important} /* sheet é padrão mobile; no desktop use modal */ } /* ...menos no player: ali o bottom sheet e a UNICA saida do "Compartilhar" (nao ha modal de desktop pra ele) e o botao ficava MORTO de 768px pra cima. Volta so quando aberto e so no player; 0,3,1 com !important vence os 0,1,0 da regra acima. O #sheet-syn deixou de existir — o player usa a folha responsiva unificada. MEDIDO: abre em 820 e em 1280, caixa de 560px centrada e inteira na tela. */ body.is-player .sheet.is-open{display:block!important} body.is-player .sheet-box{max-width:560px;margin-left:auto;margin-right:auto} .sheet-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:999px; background:rgba(255,255,255,.06);color:var(--muted);display:grid;place-items:center;cursor:pointer} .sheet-x:active{transform:scale(.9)} /* ═══════════════════════════════════════════════════════════════════ HEADER estilo iDrama: selo VIP dourado, presente, tabs de conteúdo ═══════════════════════════════════════════════════════════════════ */ /* selo VIP: a imagem VIP REAL do iDrama (ic_vip_benefit) inteira */ .vip-benefit{display:inline-flex;align-items:center;flex:none;height:32px} .vip-benefit img{height:32px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))} /* presente REAL do iDrama — sem cápsula, o ícone já é colorido */ .gift-btn{width:38px;height:38px;display:grid;place-items:center;flex:none;background:transparent;border:0; transition:transform .18s var(--ease)} .gift-btn:active{transform:scale(.88)} .gift-ic{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))} /* ═══════════ assinatura inline (planos → login → pagamento → PIX → pronto) ═══════════ */ .sub-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center} .sub-sheet[hidden]{display:none} .ss-veil{position:absolute;inset:0;background:rgba(0,0,0,.72);animation:veilIn .2s ease both} .ss-box{position:relative;z-index:1;width:100%;max-width:460px;max-height:92dvh;overflow-y:auto;scrollbar-width:none; background:var(--card);border-radius:22px 22px 0 0; /* padding-bottom ZERO na caixa: com a barra do botao em position:sticky bottom:0, o sticky para no fim do CONTEUDO e o padding-bottom fica DEPOIS dele — sobrava uma faixa embaixo da barra onde o formulario aparecia por baixo. O respiro passou pra cada passo (.ss-step), e o passo de pagar nao precisa dele porque a propria barra ja tem o dela. */ /* --bleed = o padding lateral da caixa. O cabecalho em sangria devolve exatamente este valor em margem negativa; declarar o numero nos dois lugares ja deixou 4px de fresta do fundo escuro aparecendo no PC, porque o passo de planos usa 32px e os outros 28px. Com a variavel, mudar o padding acerta a sangria junto. */ --bleed:20px; padding:24px var(--bleed) 0; box-shadow:0 -20px 60px -20px rgba(0,0,0,.9);animation:sheetUp .3s var(--ease) both} @media(min-width:560px){ .sub-sheet{align-items:center} .ss-box{border-radius:18px;max-height:88dvh;animation:iosPop .24s ease both} } /* CELULAR: o modal premium ocupa a tela TODA; como o box cobre o véu, só o X fecha. Os passos ficam centralizados na vertical (não "descem" a tela ao trocar). */ @media(max-width:559px){ .sub-sheet{align-items:stretch} /* height:100dvh dentro de um pai position:fixed sao DUAS alturas diferentes: no iOS com as barras recolhidas o dvh cresce ate ~75px a mais que o pai, a caixa transborda o .sub-sheet (que nao tem overflow) e esses 75px ficam fora da tela E fora da rolagem — e o que mora ali embaixo e justamente o botao e o "Site seguro". Com align-items:stretch o pai ja da a altura certa. E o padding-bottom sai da caixa e vai pro .ss-steps: padding de container de rolagem e descartado da regiao rolavel no WebKit. */ .ss-box{max-width:100%;width:100%;height:auto;max-height:none;border-radius:0;animation:none; display:flex;flex-direction:column;padding-bottom:0} /* --bleed herdado: 20px */ /* O cabecalho era ESMAGADO. Em flex-column os filhos sao .ss-vhead e .ss-steps; .ss-steps tem flex:0 0 auto e o .ss-vhead herda flex:0 1 auto, entao TODA a reducao caia nele — sobrava uma tarja com o nome dela cortado fora. Era o "cortando" literal. */ .ss-vhead{flex:none} /* UMA ROLAGEM SO, a da caixa inteira. Antes o .ss-steps era um segundo scroller com `justify-content:safe center`. Dois efeitos ruins: o cartao de plano era CORTADO NO MEIO pela borda invisivel do container (o dono viu "cortando o cabecalho do plano"), e num passo curto o conteudo era centralizado, deixando um vao enorme embaixo da coroa. Com uma rolagem so, a coroa sai de cena naturalmente e nada e fatiado. */ .ss-steps{flex:0 0 auto;display:block;overflow:visible;min-height:0} /* O X era absolute DENTRO do proprio scroller, entao rolava junto: assim que ela rolava pra digitar o cartao nao existia mais X na tela. O veu nao fecha de proposito e Escape nao existe no celular — a saida sumia. Aqui a caixa e a tela inteira, entao fixed cai no mesmo lugar que o absolute caia. */ .ss-x{position:fixed;background:rgba(0,0,0,.55);color:#fff} } /* mais horizontal no PC */ /* Coluna do FORMULARIO nao passa de ~520px. Estava 780px com 32px de padding = 716px de linha util, e o formulario e de UMA coluna: cada campo virava uma faixa de 716x47px, o rotulo do resumo ficava num extremo com o preco 716px longe, e o botao dourado ia a 716px (.ss-box .vipx-cta{max-width:none} ganha de qualquer max-width por especificidade). Era a maior causa do "porco". O passo de PLANOS continua largo: la sao cartoes lado a lado. */ @media(min-width:900px){ .ss-box{max-width:520px;--bleed:28px} .ss-box:has(.ss-step[data-step="plans"]:not([hidden])){max-width:780px;--bleed:32px} } /* sem a barra branca de rolagem (quebrava a harmonia) */ .ss-box::-webkit-scrollbar{display:none} /* No PLAYER, o paywall de planos ocupa o LUGAR do vídeo (coluna de 500px, altura cheia) em vez de subir como bottom sheet flutuante. */ body.is-player .sub-sheet{align-items:stretch} body.is-player .ss-veil{display:none} body.is-player .ss-box{max-width:500px;width:100%;height:100dvh;max-height:100dvh; border-radius:0;margin:0 auto;animation:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.82)} /* Passos CURTOS (pronto / em análise) não devem esticar até 100dvh — o resto virava uma faixa preta enorme embaixo do botão. Dimensiona pelo conteúdo e centraliza. */ body.is-player .ss-box:has(.ss-step[data-step="done"]:not([hidden])), body.is-player .ss-box:has(.ss-step[data-step="pending"]:not([hidden])){ height:auto;max-height:92dvh;align-self:center;border-radius:22px} /* títulos e resumo dos passos internos */ .ss-steptitle{font-family:'Poppins',sans-serif;font-size:18px;text-align:center;margin:0 0 4px;color:#fff} /* O titulo do passo de pagar estava espremido: 4px de margem embaixo, colado no cartao dourado, e encostado na tarja do logo em cima. Titulo sem ar nenhum le como legenda do que vem depois, nao como titulo da tela. Aqui ele ganha o dobro de respiro embaixo do que em cima — a distancia menor amarra ele ao logo (mesma unidade de cabecalho) e a maior separa do cartao, que e outro assunto. */ /* Agora ele mora ENTRE o cartao do pedido e o formulario: mais ar em cima, pra separar do cartao (outro assunto), e pouco embaixo, porque o que vem logo depois e' o "Seus dados" que ele apresenta. */ .ss-box .ss-step[data-step="pay"] > .ss-steptitle{ font-size:19px;letter-spacing:-.01em;margin:24px 0 6px} @media(max-height:720px){ .ss-box .ss-step[data-step="pay"] > .ss-steptitle{font-size:17px;margin:18px 0 4px} } .ss-stepsub{font-size:13px;color:var(--muted);text-align:center;margin:0 0 16px} /* Grid, nao flex: com space-between e um rotulo de plano longo o preco era empurrado pra segunda linha e a frase pra terceira — resumo de tres linhas com o preco no meio. E o -4px do .ss-sumsub brigava com o gap, que valia pras duas direcoes. Em grid nada disso depende do tamanho do texto. O FUNDO e o mesmo cartao dourado do perfil (.prof-sub, vip-card-bg.webp): a cliente ja conhece essa peca de dentro do app, entao ela chega aqui com cara de coisa da casa em vez de retangulo generico. Antes era um rgba(230,180,90,.08) chapado com borda de 1px — plano, sem material nenhum, e no meio de uma folha escura o unico bloco claro e' justamente o que a gente quer que ela olhe: o preco. Texto em marrom escuro, como no perfil: dourado sobre creme nao tem contraste. */ /* RESUMO DO TOPO: pequeno e escuro. Ele ja foi o cartao creme grande, com os cinco beneficios dentro, ocupando meia tela antes de a cliente digitar qualquer coisa. Agora carrega so o que ela precisa CONFERIR — plano, preco e a saida pra trocar — numa faixa dourada translucida, do peso de um cabecalho. O cartao creme com as capas nao morreu: virou o .ss-benescard, no fim da tela, com o que ela esta levando. */ /* RESUMO DO TOPO: o MESMO cartao creme com as capas, so que compacto. Encolher ele nao era motivo pra trocar o material — quando eu troquei o fundo por uma faixa dourada translucida, o cartao perdeu a identidade que ele tinha e virou mais uma caixa escura no meio de outras. O que saiu daqui foram os cinco beneficios, que desceram pro .ss-benescard no fim da tela. Isto aqui carrega so plano, preco e a saida pra trocar. Veu HORIZONTAL: creme cheio a esquerda, onde mora o texto, e quase transparente a direita, onde as capas aparecem. */ .ss-summary{display:grid;grid-template-columns:1fr auto;align-items:start;gap:6px 14px; position:relative;overflow:hidden; margin:0 0 4px;padding:15px 17px;border-radius:16px;border:0; background:linear-gradient(100deg,#f6e7c4 0%,rgba(244,227,189,.97) 26%,rgba(240,216,168,.72) 52%,rgba(232,200,140,.42) 78%,rgba(226,192,128,.34) 100%), url(../img/ui/vip-covers-bg.webp) right center/cover no-repeat, #f0dcb0; box-shadow:0 8px 26px -18px rgba(0,0,0,.9)} /* cada coluna e uma pilha propria: o texto encosta no numero que ele explica */ .ss-sumL{grid-column:1;min-width:0;display:flex;flex-direction:column;gap:3px} .ss-sumR{grid-column:2;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px} /* marrom: o cartao e creme. Ja esteve branco por um momento em que o fundo era escuro — se o fundo mudar de novo, esta cor muda junto. */ .ss-summary span[data-ss-sumlabel]{font-size:14px;font-weight:700;color:#5a3a12} .ss-summary b{font-size:20px;font-weight:800;color:#4e320f;white-space:nowrap;line-height:1.15} /* O mensal equivalente, encostado embaixo do valor cobrado — os dois se leem juntos: "R$ 44,70" e, logo abaixo, "R$ 14,90/mes". Vazio no mensal e no vitalicio, e ai o :empty tira ele da pilha. */ /* peso 600, nao 800: em negrito cheio ele competia com o valor cobrado logo acima (que e 800/21px) e os dois numeros brigavam pela mesma atencao. Mais leve, ele vira apoio — que e o papel dele. */ .ss-sumpm{font-style:normal;font-size:12.5px;font-weight:600;color:#6a4a1e;white-space:nowrap} .ss-sumpm:empty{display:none} /* a frase de cobranca fica colada no nome do plano, nao uma linha inteira abaixo */ .ss-sumsub{font-size:12.5px;font-weight:600;color:#6a4a1e;line-height:1.35} .ss-sumsub:empty{display:none} /* Os cinco beneficios, dentro do cartao dourado. Coluna unica: "Tudo liberado sem limites" mede ~140px a 12px e em duas colunas de 152px ele quebraria — e lista de beneficio com linha quebrada no meio le mal. A linha de cima separa o "o que custa" do "o que voce leva". */ /* ── O QUE ELA ESTA LEVANDO, no fim da tela ───────────────────────────────── E o cartao creme com as capas, que antes embrulhava o resumo inteiro. Veu HORIZONTAL: creme cheio a esquerda, onde mora o texto, e quase transparente a direita, onde as capas aparecem. Sem veu, o `cover` numa caixa alta amplia a imagem e as capas ficam legiveis POR BAIXO do texto; com veu uniforme, elas somem. O horizontal resolve os dois. */ .ss-benescard{margin:26px 0 0;padding:18px 20px;border-radius:20px;overflow:hidden; background:linear-gradient(100deg,#f6e7c4 0%,rgba(244,227,189,.97) 26%,rgba(240,216,168,.72) 52%,rgba(232,200,140,.42) 78%,rgba(226,192,128,.34) 100%), url(../img/ui/vip-covers-bg.webp) right center/cover no-repeat, #f0dcb0; box-shadow:0 10px 34px -20px rgba(0,0,0,.9)} .ss-sumben{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0} .ss-sumben li{display:flex;align-items:center;gap:10px; font-size:12.5px;font-weight:600;color:#6a4a1e;line-height:1.3} /* Idem no cartao do checkout: so o glifo, no marrom do proprio cartao. */ .ss-sumben-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;color:#7a5520} .ss-sumben-ic .msym{font-size:19px} /* A saida pra trocar de plano fica COLADA no preco, que e onde a duvida acontece. A seta .ss-back ficava absolute em cima do cabecalho: ocupava x 12..44 enquanto o nome dela comeca em x=36 — a primeira letra ficava ATRAS dela —, e era cinza sobre a foto, quase invisivel. */ .ss-sumback{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:5px; border:0;background:none;padding:6px 0 0;margin:0;cursor:pointer; font-size:12.5px;font-weight:700;color:#6a4a1e;text-decoration:underline;text-underline-offset:3px} .ss-sumback .msym{font-size:15px} .ss-sumback:active{opacity:.65} .ss-x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%; background:rgba(255,255,255,.08);color:var(--muted);display:grid;place-items:center;cursor:pointer} .ss-back{position:absolute;top:12px;left:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%; background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer} .ss-x:active,.ss-back:active{transform:scale(.9)} .ss-crown{display:grid;place-items:center;width:52px;height:52px;margin:6px auto 10px;border-radius:50%; background:linear-gradient(135deg,var(--premium),#e0952b);color:#3a2400} .ss-title{font-family:'Poppins',sans-serif;font-size:19px;text-align:center;margin:0 0 4px} .ss-sub{font-size:13px;color:var(--muted);text-align:center;margin:0 0 16px} .ss-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .ss-plan{position:relative;display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px; border:2px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s,background .15s} .ss-plan input{position:absolute;opacity:0;pointer-events:none} .ss-plan.best,.ss-plan:has(input:checked){border-color:var(--primary);background:rgba(255,117,168,.08)} .ss-plan-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .ss-plan-main b{font-size:15px} .ss-plan-main span{font-size:12px;color:var(--muted)} .ss-plan-price{font-size:17px;font-weight:800;white-space:nowrap} .ss-tag{position:absolute;top:-9px;left:14px;background:var(--primary);color:#fff;font-size:10px;font-weight:700; padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em} .ss-off{background:rgba(52,199,89,.16);color:#34c759;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px} .ss-perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0} .ss-perks li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)} .ss-perks li .ico,.ss-perks li svg{color:var(--primary);flex:none} /* flex-wrap e nowrap por padrao, entao o cadeado e o texto ficavam no MESMO item e so o texto quebrava por dentro: com duas linhas, o align-items:center deixava o cadeado flutuando ENTRE elas, alinhado com nada. Somado ao contraste de 3,5:1, era a ultima coisa que ela lia antes de pagar e a pior escrita da tela. */ .ss-foot{display:flex;align-items:flex-start;justify-content:center;gap:7px; font-size:12px;line-height:1.45;text-align:left;color:#8a8a8a; max-width:38ch;margin:12px auto 0} .ss-foot .msym{margin-top:1px} .ss-err{background:rgba(255,69,58,.12);color:#ff6b6b;font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:12px} .ss-err[hidden]{display:none} /* LISTA VERTICAL, uma linha por metodo — nao duas pilulas 50/50. Duas pilulas iguais comunicam "tanto faz", e o cartao e o metodo principal. Alem disso, em 320px cada pilula ficava com 116px de conteudo contra os ~126px de "Cartao de credito": quebrava em duas linhas e as alturas ficavam diferentes. E o mesmo .pay-opt da /pagamento, que ele ja aprovou. Os subtitulos sairam: "Da para parcelar" ele mandou tirar, e deixar so o do PIX daria ao PIX duas linhas de argumento contra uma do cartao. Quanto parcela quem diz e o select, com numero de verdade. */ /* margin-top maior por causa do selo "Mais escolhido": ele sobe 9px acima do botao, e com 8px de folga encostava no titulo da secao. */ .ss-methods{display:flex;flex-direction:column;gap:8px;margin:18px 0 14px} /* ── ABAS de pagamento (PIX | Cartão) — nada marcado até o cliente clicar ──── */ .ss-tabs{flex-direction:row;gap:8px;margin:18px 0 12px} .ss-tab{flex:1 1 0;min-width:0;justify-content:center;text-align:center;min-height:52px;border-radius:14px} .ss-tab b{flex:0 1 auto;justify-content:center;gap:8px} .ss-tab::after{display:none} /* aba não tem o círculo de rádio do .ss-method */ .ss-tab.on{border-color:#e6b45a;background:rgba(230,180,90,.14);box-shadow:inset 0 0 0 1px rgba(230,180,90,.5)} /* ── "ME CLICA" ────────────────────────────────────────────────────────────── Enquanto NENHUMA aba está escolhida, as duas pulsam com um brilho dourado e um leve zoom, pra deixar óbvio que precisam ser tocadas. No instante em que uma é selecionada (.on), o :has para a animação nas duas — a pessoa já entendeu. A 2ª aba entra defasada pra alternar (dá ritmo em vez de piscar junto). */ @keyframes ssTabPulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(230,180,90,0)} 50%{transform:scale(1.035);box-shadow:0 0 16px 2px rgba(230,180,90,.34),inset 0 0 0 1px rgba(230,180,90,.45)} } .ss-tabs .ss-tab{animation:ssTabPulse 1.7s ease-in-out infinite} .ss-tabs .ss-tab:nth-child(2){animation-delay:.85s} .ss-tabs:has(.ss-tab.on) .ss-tab, .ss-tabs.ss-chosen .ss-tab{animation:none} /* escolheu uma: para tudo (.ss-chosen = fallback JS p/ sem :has) */ @media (prefers-reduced-motion:reduce){ .ss-tabs .ss-tab{animation:none} } .ss-pixbox{margin:2px 0 10px} /* CLIP: nada (preço/plano/barra) vaza horizontalmente pra fora do modal */ .ss-box{overflow-x:hidden} /* ── passo de LOGIN dentro do checkout (Google | e-mail) ──────────────────── */ .ss-authstep .btn-google{width:100%} .ss-authstep .modal-or{margin:16px 0} .ss-authstep .vipx-cta{margin-top:8px} .ss-authstep .ss-sumback{margin:14px auto 0;display:flex;color:#fff} /* flecha + "trocar plano" BRANCO */ .ss-authstep .ss-sumback svg{color:#fff;stroke:currentColor} /* MATA o fundo branco/amarelo do autofill do Chrome nos campos do modal */ .ss-box .input:-webkit-autofill, .ss-box .input:-webkit-autofill:hover, .ss-box .input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--card2) inset; -webkit-text-fill-color:var(--txt); caret-color:var(--txt); transition:background-color 9999s ease-out 0s; } .ss-method{position:relative;width:100%;display:flex;align-items:center;gap:12px;text-align:left;min-height:56px; padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card2); color:var(--txt);font-size:14px;font-weight:600;cursor:pointer; transition:border-color .15s,background .15s} .ss-method b{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700} .ss-method::after{content:"";flex:none;width:20px;height:20px;border-radius:999px; border:2px solid var(--line2);transition:border-color .15s,box-shadow .15s} /* ── O DOURADO E A UNICA COR DE "ATIVO" NO FLUXO ───────────────────────────── O metodo escolhido vinha com borda ROSA e fundo rosado — uma segunda cor de estado no meio de uma tela que ja usa dourado pra tudo que esta ativo (o cartao de plano escolhido, o botao, o selo). Duas cores de "ligado" na mesma tela nao dobram o destaque, dividem ele: o olho passa a procurar dois significados onde so existe um. Os dois botoes tem exatamente o mesmo tratamento — o que muda e so o estado: fundo um tom acima, borda dourada fina e o radio preenchido de dourado. */ .ss-method.on{border-color:rgba(230,180,90,.55);background:rgba(255,255,255,.04)} .ss-method.on::after{border-color:#e6b45a;box-shadow:inset 0 0 0 4px #e6b45a} .ss-method:focus-visible{outline:2px solid #e6b45a;outline-offset:2px} /* ── ACORDEAO ──────────────────────────────────────────────────────────────── O painel do cartao mora DENTRO do seletor, entre a linha do cartao e a do PIX, e se funde com a linha que o comanda: mesma borda rosa, sem costura no meio. Sem isto ele parecia um bloco solto, sem dono, e o PIX ficava espremido entre a escolha e os campos dela. O :has() e o mesmo recurso ja usado no arquivo. Onde ele nao existir, o painel so fica como um bloco proprio logo abaixo — que continua legivel. */ /* border-top:0 e box-shadow:none, nao "transparente": a borda transparente de 1px deixava o fundo da pagina passar entre a nota e o painel, e o inset claro herdado do .ss-cardbox desenhava um risco por cima disso. Os dois juntos eram a emenda que aparecia no meio da caixa. */ /* -9px cancela o gap:8px do .ss-methods e sobrepoe 1px, pra a borda do painel e a do botao virarem uma linha so. */ .ss-methods > .ss-cardbox{margin:-9px 0 0;border-radius:0 0 14px 14px; border:1px solid rgba(230,180,90,.55);border-top:0;box-shadow:none; background:linear-gradient(to bottom,rgba(255,255,255,.04),transparent 120px),var(--card2)} /* so o cartao continua na caixa (o painel dos campos vem logo abaixo); o PIX fecha no proprio botao */ .ss-method.on:has(+ .ss-cardbox:not([hidden])){ border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent} /* a linha do cartao e o painel viram uma peca so: o PIX respira longe dela */ .ss-methods > .ss-cardbox:not([hidden]){margin-bottom:9px} /* O .ss-cardbox nao tinha ESTILO NENHUM: os quatro campos do cartao apareciam iguaizinhos aos quatro de "Seus dados" logo acima, sem nenhuma fronteira. Oito caixas identicas empilhadas viram uma parede, e e dai que vem o "generico". Vira painel; o input inverte o fundo pra nao sumir dentro dele. */ .ss-cardbox{margin:2px 0 4px;padding:16px 14px 4px;border-radius:16px; background:var(--card2);border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.03)} .ss-cardbox .input{background:var(--card)} @media(min-width:900px){.ss-cardbox{padding:20px 18px 6px}} /* Validade e codigo dividem a linha em 50/50. Um campo de 120px sozinho numa linha de 420px era o que fazia a tela parecer inacabada, e em 50/50 o codigo deixa de parecer opcional. minmax(0,1fr) e obrigatorio: 1fr e minmax(auto,1fr), e cai na MESMA armadilha de min-content que estourava a linha da validade antiga — input e flex/grid item nasce com largura intrinseca de ~180px e a linha pedia 370px em 320px de tela, com a barra de rolagem escondida, entao ela via o campo cortado sem nenhuma pista de que dava pra rolar. */ .ss-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start} .ss-row2 .field{margin-bottom:0;min-width:0} .ss-row2 .input{min-width:0;width:100%;max-width:none} /* Bandeiras na linha do ROTULO do numero. Ficavam no rodape do formulario, depois das parcelas: respondiam "meu cartao serve?" trinta segundos depois de ela perguntar, e gastavam ~60px. Fora do input de proposito — por dentro exigiria padding-right e os 19 digitos de um Elo passariam por baixo do logo, que e mais coisa cortando. */ .ss-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px} .ss-brandrow{flex:none;flex-wrap:nowrap;gap:3px;margin:0} .ss-brandrow .pay-brand{box-shadow:none;border-radius:3px;opacity:.85;transition:opacity .18s} .ss-brandrow .pay-brand svg{width:23px;height:15px} @media(max-width:359px){.ss-brandrow .pay-brand svg{width:20px;height:13px}} /* Antes de reconhecer, as cinco acesas dizem "aceitamos estas". A partir do 6o digito a dela acende e as outras apagam — a unica confirmacao em tempo real de que o site entendeu o cartao, e ela acontece enquanto a cliente digita. */ .ss-brandrow[data-brand] .pay-brand{opacity:.18} .ss-brandrow[data-brand="visa"] [data-b="visa"], .ss-brandrow[data-brand="master"] [data-b="master"], .ss-brandrow[data-brand="elo"] [data-b="elo"], .ss-brandrow[data-brand="amex"] [data-b="amex"], .ss-brandrow[data-brand="hiper"] [data-b="hiper"], .ss-brandrow[data-brand="diners"] [data-b="diners"]{opacity:1} @media(prefers-reduced-motion:reduce){.ss-brandrow .pay-brand{transition:none}} .ss-box .pay-brands-lbl{display:none} /* Bandeira do pais + DDI dentro da MESMA borda do campo. Nao da pra fazer no proprio .field, que e flex-direction:column e empilharia a bandeira ACIMA do input. A borda migra pro grupo, entao o .input.err (que so pinta borda) pararia de aparecer: dai o :has() no grupo E o fundo avermelhado no proprio input, que funciona ate onde o :has() nao chegar. */ .ss-ig{display:flex;align-items:stretch;min-height:48px; background:var(--card2);border:1px solid var(--line);border-radius:var(--radius); transition:border-color .15s} .ss-ig:focus-within{outline:2px solid #e6b45a;outline-offset:1px;border-color:transparent} .ss-ig:has(.input.err){border-color:#ff6b6b} .ss-ig-cc{flex:none;display:flex;align-items:center;gap:7px;padding:0 11px 0 13px; font-size:14px;font-weight:600;color:var(--muted); border-right:1px solid var(--line);user-select:none;white-space:nowrap} .ss-ig-cc .flag{border-radius:3px;flex:none} .ss-ig .input{border:0;background:transparent;border-radius:0 var(--radius) var(--radius) 0;padding-left:12px} .ss-ig .input:focus{outline:none} .ss-ig .input.err{background:rgba(255,69,58,.06)} .ss-cardbox .ss-ig{background:var(--card)} /* Barra do botao presa no rodape. Com o cartao aberto o passo tem ~1000px de conteudo e num iPhone SE com o teclado aberto sobram ~300px visiveis: o botao dourado nunca aparecia junto com o campo que ela esta preenchendo. Sticky funciona sem truque porque quem rola aqui e a propria .ss-box. As margens negativas batem com o padding lateral da caixa. O degrade curto e o que da a sensacao premium: o conteudo passa POR TRAS da barra em vez de bater numa borda dura. rgba(18,18,18,0) e o --card transparente — degrade pra "transparent" acinzenta no Safari. */ /* o respiro do fim da caixa mora em cada passo; o de pagar tem a barra */ .ss-step{padding-bottom:calc(22px + env(safe-area-inset-bottom))} .ss-step[data-step="pay"]{padding-bottom:0} /* SEM FLUTUAR. Isto ja foi position:sticky bottom:0 pra o botao estar sempre a mao. O efeito colateral matava a tela: a barra cobria a FORMA DE PAGAMENTO inteira, entao logo depois do CPF a cliente via o botao dourado e nenhum campo de cartao — e clicava nele achando que era "proximo passo". Botao de pagar visivel antes de existir o que pagar so produz clique errado. Agora ele fica no fim do formulario, onde o trabalho termina. */ .ss-paybar{margin:22px 0 0;padding:0} /* ── O APOIO DO METODO: SO TEXTO ───────────────────────────────────────────── Historico, pra ninguem refazer o caminho: ja foi paragrafo no rodape, ja foi par de badges com icone dourado, ja foi faixa DENTRO da caixa do metodo com filete, e ja foi caixa com borda e icone em capsula. Cada versao acrescentava um enfeite, e o enfeite pedia atencao que a frase nao precisa — ela e um aviso de duas linhas sobre cobranca, nao um componente. Sobrou o que importa: uma linha quieta, alinhada com os campos. */ .ss-renew{margin:2px 0 16px;font-size:12.5px;line-height:1.45; color:var(--muted);text-align:left} .ss-renew:empty,.ss-renew[hidden]{display:none} /* o campo focado nao pode encostar na borda quando o teclado abre */ .ss-box .input,.ss-box select.input{scroll-margin-bottom:24px;scroll-margin-top:16px} .ss-pixstep{text-align:center} .ss-pixamount{font-size:14px;color:var(--muted);margin:0 0 14px} .ss-pixamount b{font-size:20px;color:#e6b45a;margin-left:4px} /* os três passos até o app do banco, numerados */ .ss-pixhow{counter-reset:pix;list-style:none;text-align:left;margin:0 0 16px;padding:0; display:flex;flex-direction:column;gap:10px} .ss-pixhow li{counter-increment:pix;position:relative;padding-left:32px;font-size:13.5px;line-height:1.45;color:var(--txt)} .ss-pixhow li::before{content:counter(pix);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%; display:grid;place-items:center;font-size:12px;font-weight:800; background:rgba(230,180,90,.16);color:#e6b45a} .ss-pixback{font-size:12.5px;color:var(--muted);margin:12px 0 0} .ss-pixqr{margin-top:16px;border-top:1px solid var(--line);padding-top:14px} .ss-pixqr-hint{font-size:12px;color:var(--muted2);margin:0 0 8px;text-align:center} .ss-qr{display:block;margin:0 auto;border-radius:12px;background:#fff;padding:8px} .ss-qr[hidden]{display:none} /* box do codigo PIX + o botao dourado de copiar logo abaixo dela */ .ss-pixcode-field{margin-top:14px;text-align:left} .ss-pixcode-field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px} .ss-pixstep .vipx-cta{margin-top:12px} .ss-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);margin-top:12px} .ss-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--primary); border-radius:50%;animation:ssSpin .8s linear infinite;flex:none} @keyframes ssSpin{to{transform:rotate(360deg)}} .ss-done{text-align:center;padding:14px 0} .ss-check{display:grid;place-items:center;width:66px;height:66px;margin:6px auto 14px;border-radius:50%; background:rgba(52,199,89,.15);color:#34c759} /* cartão em análise: âmbar, não verde — não está aprovado ainda */ .ss-clock{background:rgba(230,180,90,.15);color:#e6b45a} body.ss-open{overflow:hidden} /* scroll-lock robusto p/ iOS (só entra na página do player, via app-fx.js): o overflow:hidden acima o iPhone ignora no toque; position:fixed segura de verdade. O top:-scrollY é setado inline pelo JS e o scroll é restaurado ao soltar. */ body.ss-lock{position:fixed;left:0;right:0;width:100%} /* tabs de conteúdo (Popular · Novos · Categoria · Trending) */ .ctabs{display:flex;gap:22px;align-items:center;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:2px 0} .ctabs::-webkit-scrollbar{display:none} .ctab{position:relative;flex:none;font-size:17px;font-weight:700;color:var(--muted2); padding:8px 0;letter-spacing:-.01em;transition:color .2s} .ctab:hover{color:var(--muted)} .ctab.on{color:var(--txt)} /* underline curto, centralizado embaixo da palavra ativa (como o iDrama) */ .ctab.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0; width:24px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2))} @media(min-width:640px){.ctab{font-size:19px}} /* no desktop/tablet as tabs centralizam (no celular rolam à esquerda) */ @media(min-width:768px){.ctabs{justify-content:center;gap:40px}} /* ═══════════ player em 3 colunas no PC (nav | vídeo | info + ações) ═══════════ No celular os wrappers "somem" (display:contents) e o layout fica idêntico ao de antes: vídeo em tela cheia com a UI sobreposta. Só no PC (≥1024) vira o layout de 3 colunas: a navegação do site à esquerda, o vídeo no centro e a série (título, sinopse) + ações (curtir, salvar, compartilhar) à direita. */ .vp-nav{display:none} .vp-nav-related{display:none} /* só aparece no desktop (coluna esquerda) */ body.is-player{overflow-x:hidden} /* mata a barra branca (scroll horizontal) */ /* Barras de rolagem no TEMA ESCURO (o padrão do Windows/Chrome é branco e destoa do site inteiro). Vale pra tudo — colunas do player, sheets, listas. */ *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)} .vp-stage,.vp-frame,.vp-rail{display:contents} .vp-syn-full{display:none} /* sinopse completa: so no PC (ver media 1024px abaixo) */ @media(min-width:1024px){ body.is-player main{max-width:none;margin:0} /* o player usa a tela toda */ /* 3 colunas CENTRALIZADAS: ESQUERDA (nav + "Você também vai gostar") | vídeo | trilha (título, ações, episódios). Larguras somam ~1260px pra caber em laptop (1280) sem scroll horizontal; a coluna do vídeo encolhe antes disso. */ .vplayer{display:grid;grid-template-columns:280px minmax(0,600px) 380px;justify-content:center; height:100dvh;overflow:hidden;background:#0a0a0c} /* No desktop o "Você também vai gostar" vai pra ESQUERDA (abaixo do menu); a cópia da trilha some. No mobile é o contrário (a nav esconde, some a da esquerda). */ .vp-rail-related{display:none} .vp-nav-related{display:block;margin-top:22px} .vp-nr-h{font-size:14px;font-weight:800;margin:0 0 12px;color:#fff} .vp-nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .vp-nr-grid .mcard h3{font-size:11px;-webkit-line-clamp:2} .vp-syn-m{display:none} /* no PC nao usa "ver mais" */ .vp-syn-full{display:block;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:10px;max-height:44vh;overflow:auto} /* ── coluna 1: nav lateral (o "header" do site em coluna) ── */ .vp-nav{display:flex;flex-direction:column;padding:22px 14px;overflow-y:auto;overflow-x:hidden;border-right:1px solid rgba(255,255,255,.07)} .vp-nav-logo{margin:0 6px 22px;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:#fff} .vp-nav-logo b{color:var(--primary)} .vp-nav-logo img{height:34px;width:auto;display:block;filter:brightness(1.3)} .vp-nav-links{display:flex;flex-direction:column;gap:4px} .vp-nav-links a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;transition:background .15s,color .15s} .vp-nav-links a:hover{background:rgba(255,255,255,.06);color:#fff} .vp-nav-links a .ico,.vp-nav-links a svg{flex:none} /* ── coluna 2: palco, centraliza o "aparelho" do vídeo (9:16) ── */ /* MEDIDO em 1024/1100/1200/1280: o .vp-frame e display:contents (linha ~1625) em TODA largura e este bloco nunca devolvia `display` — a regra do "aparelho 9:16" que morava aqui NUNCA pintou nada, e o video ficava numa coluna preta de 100dvh (650x900 a 1280) com a setinha de voltar boiando na tarja ACIMA da imagem. Quem carrega video, controles e parede e o .vp-stage: a forma vai nele. MEDIDO depois: palco 315,24 479x852 e a setinha em 323,32 44x44 DENTRO do cartao. O par vh/dvh e proposital: navegador sem dvh descarta a 2a linha e fica com a 1a. NAO devolver `display` ao .vp-frame: o app-vplayer.js:232 escolhe o alvo da tela cheia por frameEl.getBoundingClientRect().width — com largura 0 ele cai no .vplayer, que e o comportamento de hoje. Dar caixa a ele trocaria esse alvo. */ .vp-stage{display:block;position:relative;padding:0;min-width:0; justify-self:center;align-self:center; width:min(100%,calc(min(90vh,880px) * 9 / 16)); width:min(100%,calc(min(100dvh - 48px,880px) * 9 / 16)); height:auto;aspect-ratio:9/16; max-height:min(90vh,880px); max-height:min(100dvh - 48px,880px); border-radius:18px;overflow:hidden;background:#000; box-shadow:0 24px 70px -24px rgba(0,0,0,.85)} .vp-top{position:absolute;top:18px;left:18px;right:auto;width:auto;padding:0;z-index:30} /* ── coluna 3: trilho — info da série + ações, empilhados e roláveis ── */ .vp-rail{display:flex;flex-direction:column;gap:22px;padding:30px 24px;overflow-y:auto;overflow-x:hidden;border-left:1px solid rgba(255,255,255,.07)} .vp-info{position:static;inset:auto;padding:0;gap:12px;align-items:flex-start} .vp-info .vp-title{font-size:22px;line-height:1.3;white-space:normal} .vp-info .vp-syn{font-size:14px;line-height:1.5} /* ── ações: coluna DENTRO do cartão, encostada na direita, igual ao celular ── Era `position:static` aqui. Só que dentro do .vp-stage tudo o que importa (#video, controles, parede) é ABSOLUTO, então a coluna caía no fluxo e ia parar no topo do cartão, atrás do vídeo — MEDIDO em 1440x900: x=395 y=24, invisível. Na prática o PC não tinha curtir, comentar, compartilhar nem TV; sobrava só o botão de favoritos no trilho da direita. Absoluta resolve, e de quebra o PC passa a ter a mesma coluna do celular — uma tela só pra aprender. O cartão tem overflow:hidden, então nada escapa. */ .vp-side{position:absolute;right:14px;left:auto;top:auto;bottom:104px;z-index:12; flex-direction:column;flex-wrap:nowrap;gap:14px;align-items:center;justify-content:flex-end} .vp-side>*{flex:0 0 auto;min-width:44px} .vp-side .vp-actf{display:flex} .vp-side .vp-act-ic{width:44px;height:44px} .vp-side .vp-act-ic img{width:24px;height:24px} /* No PC o rótulo FICA: aqui sobra espaço, e ler "Comentários" é melhor que adivinhar o ícone. No celular ele sai (bloco de 1023) porque a coluna tapa a cena. */ .vp-side .vp-act-n{font-size:10.5px} /* no PC os elementos do trilho não somem com o auto-ocultar (só os do vídeo) */ .vplayer.vp-idle .vp-side,.vplayer.vp-idle .vp-info{opacity:1;visibility:visible;pointer-events:auto} } /* ═══════════ PAINEL FIXO de informacoes (abaixo do video, < 1024px) ═══════════ O .vp-rail JA e essa coluna no PC (bloco acima). Abaixo de 1024 ele deixava de existir (display:contents, linha ~1625) e o .vp-info/.vp-side viravam sobreposicao em cima do video — dai o "ver mais" dividindo pixel com a timeline (MEDIDO: .vp-info em bottom:62px e .vp-progwrap de 44 a 68 = 6px de sobreposicao). Aqui o trilho vira o MESMO painel, empilhado embaixo do palco. Nada e duplicado: um .vp-info, um .vp-side, um [data-episodes] — o #sheet-syn saiu do movie.php. ORDEM: este bloco entra DEPOIS do @media(min-width:1024px) (sobrescreve 549, 550, 605, 1625 e 1626, todas anteriores) e ANTES do bloco is-walled (~1855), que tem especificidade maior. ALTURA, nao so largura: quem encolhe o video e (min-height:560px). Celular DEITADO (844x390, 932x430) cai FORA dessa faixa e fica com o palco em 100svh — a geometria de hoje, pixel a pixel — com o painel abaixo da dobra, alcancavel rolando. MEDIDO em 844x390: palco 500x390 e a parede com os mesmos 6px de rolagem de hoje, com o botao do plano em 272,248 300x44 inteiro na tela. SEM aspect-ratio aqui: a altura e svh com o vh declarado na linha de cima — navegador que nao conhece svh degrada uns pontos percentuais, o player nunca some. */ /* O #conteudo tem `animation:pageIn .45s both` ate 900px (~linha 1175) e o estado final deixa `transform:matrix(1,0,0,1,0,0)` grudado no

— o que faz o
virar bloco-conteiner dos position:fixed que moram dentro dele. Enquanto o player media 100dvh isso era inofensivo; com o painel o
passa a ~1045px e o bottom sheet do COMPARTILHAR nasce no fim da PAGINA, nao da tela (MEDIDO a 390: caixa em y=859..1045 com a tela em 844 — 15px visiveis). Desligar a animacao SO no player devolve o sheet a viewport (MEDIDO: 658..844, inteiro na tela) e e exatamente o que quem usa prefers-reduced-motion ja tem hoje (~linha 1178). O #assinar e o #login ficam FORA do
(page.php 96 e 100), entao o checkout nunca dependeu disto. */ body.is-player #conteudo{animation:none} .vp-panel{display:flex;flex-direction:column;gap:14px} .vp-panel .syn-more{margin-top:0} .vp-meta{margin:0;font-size:12px;color:var(--muted2)} .vp-chips{display:flex;gap:8px;flex-wrap:wrap} /* titulo e categoria deixaram de ser