/* comunidade.denderson.ai : CSS especifico desta pagina. Carrega DEPOIS de tokens.css e base-visual.css. Aqui so entra o que o kit visual-bio-avalanche nao cobre: nav com badge, video incorporado, cards de bonus sem inversao, estatisticas, formulario dentro do painel acido e acordeao do FAQ. Nenhuma cor solta: tudo sai de var(--token). */ /* ============================================================ 1. UTILITARIOS ============================================================ */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .center{text-align:center;} .center .display{margin:0 auto;max-width:900px;} .center .lead{margin:16px auto 0;max-width:680px;} .center .actions{justify-content:center;} /* ------------------------------------------------------------ SEM EYEBROW A linha curta em mono antes do titulo saiu da pagina inteira. As margens de topo abaixo existiam so pra afastar o titulo dela, entao viram zero pra nao deixar buraco no comeco de cada bloco. ------------------------------------------------------------ */ .secthead .display, .prow-txt .display, .finalcta h2, .bionome{margin-top:0;} .finalcta h2{margin-bottom:18px;} .prow-txt .display{margin-bottom:16px;} .repo .biglead{margin-top:0;} /* lista em duas colunas, usada nas camadas de entrega */ .vlist.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;} @media (max-width:900px){.vlist.cols2{grid-template-columns:1fr;}} /* ============================================================ 2. NAV so com a marca O topo desta pagina nao tem botao nem selo, entao a pilula da nav deixa de ser uma barra de 1140px com dois lados e encolhe pro tamanho da palavra, centrada. O centro continua vindo do left:50% + translateX(-50%) que o kit ja aplica. ============================================================ */ .nav-solo{ width:auto;justify-content:center; padding:11px 26px; } /* ============================================================ 3. VSL VERTICAL 9:16 (facade) Capa propria da casa + botao de play. So no clique o player oficial da ConverteAI e injetado, junto com o script dele. Nada de terceiro carrega no load da pagina. LIMITE DURO de 400px de largura: a melhor rendition do stream e 404x720, entao acima disso a imagem amolece. No celular ele pega a largura disponivel respeitando o 9:16. ============================================================ */ .vslbox{margin:26px auto 0;display:flex;justify-content:center;} .vslplayer{ position:relative;width:min(100%,400px);aspect-ratio:9/16; border:2px solid var(--acid);border-radius:22px;overflow:hidden; background:var(--bg1);box-shadow:0 60px 110px -46px rgba(0,0,0,.85); } /* capa clicavel */ .vslcapa{ position:absolute;inset:0;width:100%;height:100%;padding:0;border:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; background:var(--bg2);cursor:pointer; } .vslcapa img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; transition:transform .6s var(--ease-out); } .vslcapa:hover img{transform:scale(1.03);} .vslcapa::before{ content:"";position:absolute;inset:0;background:rgba(11,11,16,.28); transition:background-color .3s; } .vslcapa:hover::before{background:rgba(11,11,16,.16);} .vslcapa:focus-visible{outline:2px solid var(--acid);outline-offset:-6px;} /* botao de play: circulo acido com triangulo em CSS puro. Sem SVG desenhado, sem icone de biblioteca e sem emoji. */ .vslplay{ position:relative;width:88px;height:88px;border-radius:50%;background:var(--acid); display:flex;align-items:center;justify-content:center; box-shadow:0 16px 38px -12px rgba(212,255,74,.6); transition:transform .35s var(--ease-out),background-color .3s; } .vslplay::after{ content:"";width:0;height:0;margin-left:7px; border-left:26px solid var(--ink); border-top:16px solid transparent; border-bottom:16px solid transparent; } .vslcapa:hover .vslplay{transform:scale(1.08);background:var(--acid-soft);} .vsllabel{ position:relative;background:var(--ink);color:var(--acid);border-radius:100px;padding:9px 18px; font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase; } /* onde o player oficial e injetado no clique */ .vslmount{position:absolute;inset:0;} .vslmount vturb-smartplayer{width:100%;max-width:400px;display:block;margin:0 auto;} /* ============================================================ 3b. TOPO: TITULO, DESCRICAO E VIDEO O hero tem tres elementos e nada mais. A arte do squad desceu pra seccao seguinte e os dois botoes sairam da primeira dobra. ORDEM NO CELULAR (titulo, video, descricao) sem duplicar o bloco do video: ate 900px o .hero-copy vira display:contents, entao o titulo e o paragrafo viram itens da MESMA grade do video e cada um pega o seu "order". O video continua existindo uma vez so. ============================================================ */ .hero-video{min-width:0;} .hero-video .vslbox{margin:0 auto;} /* celular: titulo, video e so entao a descricao */ @media (max-width:900px){ /* topo apertado de proposito: quanto menos respiro antes do titulo, mais do player cabe na primeira tela do celular */ .hero-wrap{gap:22px;padding-top:88px;} .hero-copy{display:contents;} .hero-title{order:1;margin-top:0;} .hero-video{order:2;} .hero-copy .lead{order:3;} } /* desktop: texto na esquerda, video na direita, preso em 400px. A largura tambem obedece a ALTURA da janela: sem isso, numa tela de 900px de altura o player de 711px nao cabe na primeira dobra. 0.5625 e o 9/16 do player. Os 230px sao o respiro do hero (96 de topo, 44 de base e a folga de seguranca). */ @media (min-width:901px){ .hero-wrap{ grid-template-columns:minmax(0,1fr) 420px; gap:48px;align-items:center; } /* a coluna da esquerda ficou so com duas pecas. O Chefe pediu o topo do desktop com titulo em 40px e descricao em 24px, entao os dois tamanhos ficam fixos aqui (o celular nao entra neste bloco). line-height 1.15 pro corpo de 40px respirar sem soltar demais. */ .hero-title{font-size:40px;line-height:1.15;margin:0 0 20px;max-width:760px;} .hero-copy .lead{font-size:24px;} .hero-video .vslplayer{width:min(100%,400px,calc((100svh - 230px) * .5625));} } @media (min-width:901px) and (max-width:1100px){ .hero-wrap{grid-template-columns:minmax(0,1fr) 340px;gap:34px;} } /* ============================================================ 4. BLOCO DE DESTAQUE estilo terminal Borda acida a esquerda, rotulo em mono. Substitui o bloco verde que a pagina antiga usava no fim do problema e do time. ============================================================ */ .callout{ margin-top:34px;background:var(--surface);border:1px solid var(--line-soft); border-left:3px solid var(--acid);padding:22px 26px; display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px; } .callout-label{ font:500 11px var(--font-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--acid);flex:none; } .callout p{font-size:16px;color:var(--mute);flex:1 1 300px;line-height:1.6;} .callout p b{color:var(--text);} /* ============================================================ 5. CARDS DE TIME com descricao O kit entrega nome e funcao. Esta pagina precisa da frase de cada agente, entao o card ganha um paragrafo e alinhamento a esquerda. ============================================================ */ .team-card{text-align:left;padding:22px 20px 24px;} .team-card img{margin:0 0 14px;} .team-card b{font-size:15px;} .team-card span{display:block;margin-bottom:10px;} .team-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mute);} .team-naia{gap:28px;} .team-naia .tn-body b{display:block;font:600 26px var(--font-display);letter-spacing:-.01em;} .team-naia .tn-body span{ display:block;font:400 10.5px var(--font-mono);letter-spacing:.14em; text-transform:uppercase;color:var(--acid);margin:4px 0 10px; } .team-naia .tn-body p{margin:0;font-size:15px;color:var(--mute);line-height:1.6;} .team-naia{border-color:var(--acid);} /* ============================================================ 6. CARD SEM INVERSAO O card padrao do kit vira acido inteiro no hover. Em bloco com lista longa isso pesa, entao .flat troca a inversao por borda e um empurrao pra cima. ============================================================ */ .card.flat:hover{background:var(--surface);border-color:var(--acid);transform:translateY(-5px);} .card.flat:hover h4{color:var(--text);} .card.flat:hover p{color:var(--mute);} .card.flat:hover .ctag{color:var(--mute);} .card.flat:hover .cnum,.card.flat:hover .arr{color:var(--acid);} .card .vlist{margin-top:14px;} .card .vlist li{font-size:13.5px;padding:7px 0 7px 24px;} .card .vlist .mk{top:7px;} .card.flat:hover .vlist li{color:var(--mute);} /* card do bento que ocupa a linha inteira */ .bento .b12{grid-column:span 12;} @media (max-width:900px){.bento .b12{grid-column:span 12;}} /* ============================================================ 7. CAMADAS DE ENTREGA ============================================================ */ .camada{border-top:1px solid var(--line);padding-top:38px;margin-top:48px;} .camada.first{border-top:0;padding-top:0;margin-top:8px;} .camada-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:12px;} .camada-num{font:500 11px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acid);} .camada-label{font:500 11px var(--font-mono);letter-spacing:.1em;color:var(--mute);} .camada .sub{margin:0;} .camada .biglead{margin-top:12px;max-width:760px;} /* ============================================================ 8. INFOGRAFICO Imagem larga sem proporcao travada, moldura reta. ============================================================ */ .infografico{ margin-top:38px;border:1px solid var(--line);border-radius:22px;overflow:hidden; background:var(--bg2);box-shadow:0 50px 90px -44px rgba(0,0,0,.7); } .infografico img{width:100%;height:auto;display:block;} /* ============================================================ 9. REPOSICIONAMENTO ============================================================ */ .repo{ max-width:900px;margin:0 auto;border-left:3px solid var(--acid); padding:6px 0 6px 28px; } .repo .biglead{margin-top:0;} .repo .biglead b{color:var(--text);} /* ============================================================ 10. MOLDURA RETRATO O kit trava a foto em 3/2.2 (deitada). A foto do Denderson e em pe, entao esta variante devolve a proporcao original. ============================================================ */ .imgframe.portrait{max-width:420px;margin-inline:auto;} .imgframe.portrait img{aspect-ratio:895/1200;} /* as artes de secao sao 3:2. .wide devolve a proporcao nativa em vez do 3/2.2 que o kit forca, pra nao cortar nada da cena. */ .imgframe.wide img{aspect-ratio:3/2;} .frame-acid{border:2px solid var(--acid);border-radius:22px;box-shadow:0 50px 90px -44px rgba(0,0,0,.8);} .frame-line{border:1px solid var(--line);border-radius:22px;box-shadow:0 50px 90px -44px rgba(0,0,0,.7);} /* rotacao so em moldura estreita. Em banner de largura total ela sangra pros lados e a seccao corta o canto. */ .frame-acid.rot{transform:rotate(-2deg);} /* banner dentro de uma camada de entrega. Contido em 920px de proposito: em largura total (1360px) o 3:2 vira um bloco de 900px de altura e engole a seccao inteira. */ .camada-fig{max-width:920px;margin:26px auto 8px;overflow:hidden;background:var(--bg2);} .camada-fig img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;} /* figura centrada acima do painel de oferta */ .oferta-fig{max-width:900px;margin:0 auto 34px;overflow:hidden;background:var(--bg2);} .oferta-fig img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;} /* arte do squad: banner centrado da seccao que vem logo depois do topo. Herda a moldura acida que ela tinha quando ficava na coluna do hero. O .tilt fica NESTE bloco e o .reveal no pai: se os dois ficassem no mesmo elemento, o transform:none !important do reveal mataria o tilt. */ .heroart{ max-width:980px;margin:42px auto 0;overflow:hidden;background:var(--bg2); border:2px solid var(--acid);border-radius:26px; box-shadow:0 60px 110px -46px rgba(0,0,0,.85); transition:transform .3s var(--ease-out); } .heroart img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;} /* ============================================================ 11. ESTATISTICAS ============================================================ */ .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;} .stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;padding:20px 18px;} .statnum{ font:600 clamp(30px,3.2vw,44px)/1 var(--font-display);color:var(--acid); font-variant-numeric:tabular-nums; } .statnum small{font-size:.62em;font-family:var(--font-display);font-weight:600;} .statlab{display:block;margin-top:8px;font:500 10.5px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);} /* o cargo novo do Chefe tem duas linhas, entao pede entrelinha e folga */ .biosub{font:500 11.5px/1.75 var(--font-mono);letter-spacing:.08em;color:var(--acid);margin-top:12px;max-width:520px;} .bionome{font-size:clamp(30px,3.4vw,46px);margin-top:0;} @media (max-width:900px){.statgrid{grid-template-columns:repeat(2,1fr);}} /* ============================================================ 12. OFERTA Painel do kit com o preco menor (a linha "12x R$ 123,80" nao cabe no tamanho padrao) e o formulario dentro da metade acida. ============================================================ */ .offer .right{gap:0;} /* o tabular-nums do kit abre demais os digitos da Cormorant e a linha "12x R$ 123,80" fica com buraco entre os numeros. Aqui volta ao normal. */ .offer .price{font-size:clamp(32px,3.6vw,52px);margin-top:6px;font-variant-numeric:normal;} .offer .right .strike{color:rgba(11,11,16,.55);font:400 15px var(--font-body);text-decoration-color:var(--magenta);margin-top:14px;} .offer .right p.price-sub{font:400 14.5px var(--font-body);color:rgba(11,11,16,.78);margin-top:6px;} /* ATENCAO de especificidade: o kit tem .offer .right p{color:...escuro}. Sem o seletor abaixo (mais especifico) o texto do selo de vagas fica preto sobre a pilula preta e some da tela. Nao rebaixe este seletor. */ .offer .right p.scarce{ display:inline-flex;align-items:center;gap:9px;margin-top:18px;align-self:flex-start; background:var(--ink);color:var(--acid);border-radius:100px;padding:10px 18px; font:500 11.5px var(--font-mono);letter-spacing:.04em; } .offer .right p.scarce .fire{color:var(--acid);} .offer .right p.formlead{margin-top:20px;font:400 13.5px/1.5 var(--font-body);color:rgba(11,11,16,.85);} .guarantee{ margin-top:26px;display:flex;gap:10px;align-items:flex-start; font:400 13.5px/1.55 var(--font-body);color:var(--mute); border-top:1px solid var(--line);padding-top:20px; } .guarantee .mk{color:var(--acid);font-weight:700;flex:none;} .urg{ margin-top:22px;text-align:center; font:400 12px var(--font-mono);letter-spacing:.08em;color:var(--mute); } /* ---- formulario sobre o painel acido ---- */ .ofform{margin-top:16px;display:flex;flex-direction:column;gap:12px;} .fld{display:flex;flex-direction:column;} .ofform input{ width:100%;font:400 15px var(--font-body);color:var(--text); background:var(--ink);border:1px solid rgba(11,11,16,.35);border-radius:100px; padding:15px 20px;transition:border-color .3s,box-shadow .3s; -webkit-appearance:none;appearance:none; } .ofform input::placeholder{color:var(--faint);} .ofform input:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 3px rgba(11,11,16,.25);} .ofform input[aria-invalid="true"]{border-color:var(--magenta);} .err{ margin:7px 0 0 20px;font:700 12px var(--font-mono);letter-spacing:.02em;color:var(--ink); display:flex;gap:6px;align-items:baseline; } .ofform .btn{margin-top:6px;justify-content:center;text-align:center;width:100%;font-size:14px;padding:17px 22px;} .ofform .btn[disabled]{opacity:.72;cursor:progress;} @media (max-width:900px){ .offer .right{padding:34px 26px 40px;} /* mesma especificidade do seletor de cima, senao o align-self nao pega */ .offer .right p.scarce{ align-self:stretch;justify-content:center;text-align:center; line-height:1.5;padding:12px 18px; } } /* ============================================================ 13. FAQ Acordeao nativo com
. Uma aberta por vez, controlado no faq.js. Sem biblioteca e sem icone desenhado: o sinal e o caractere + que gira 45 graus e vira x quando abre. ============================================================ */ .faq{margin:34px auto 0;max-width:900px;} .faq details{ border:1px solid var(--line-soft);border-radius:18px;background:var(--surface); margin-bottom:12px;transition:border-color .3s; } .faq details[open]{border-color:var(--acid);} .faq summary{ list-style:none;cursor:pointer;padding:22px 56px 22px 24px;position:relative; font:600 clamp(18px,2vw,23px) var(--font-display);letter-spacing:-.01em;color:var(--text); } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%); font:400 24px var(--font-mono);color:var(--acid);transition:transform .35s var(--ease-out); } .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);} .faq summary:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:18px;} .faq .faq-a{padding:0 24px 24px;font-size:15px;line-height:1.65;color:var(--mute);max-width:760px;} /* ============================================================ 14. DEPOIMENTOS Carrossel continuo de mockup de iPhone, um por depoimento, com o print INTEIRO dentro. Roda sozinho no celular e no desktop. NADA E CORTADO. A tela do mockup tem aspect-ratio 590/1280, que e exatamente a proporcao dos arquivos, e a imagem entra com object-fit:contain. Nao existe recorte possivel: se um print chegasse fora de proporcao, ele apareceria inteiro com sobra, nunca aparado. MECANICA DO LACO: a mesma da faixa rolante do topo (.marquee do kit). Fila com width:max-content e keyframe ate -50% sobre conteudo duplicado. A duplicata e feita pelo js/depoimentos.js, que tambem mede a fila e converte velocidade (px/s) em duracao, entao por ou tirar um depoimento nao pede acerto de tempo aqui. MARGEM E NAO gap. Com gap, metade da largura da fila cai meio intervalo antes do inicio da copia e a emenda pula na virada. Com margin-right em TODO item (inclusive o ultimo), metade da fila e exatamente o deslocamento do primeiro item da copia. Nao troque por gap. CONTENCAO. O overflow fica no involucro, aqui. O overflow-x:hidden do body apenas ESCONDE estouro da pagina, ele nao contem nada. Sem biblioteca: nem slider, nem GSAP. O js/fluid.js desta pagina e o WebGL do fundo, nao tem nada a ver com carrossel. ============================================================ */ /* involucro. z-index:1 pelo mesmo motivo do .marquee do kit: sem ele o canvas fixo do fluido pinta por cima. Antes do JS ligar o carrossel a fila fica arrastavel na horizontal, entao sem JS a seccao nunca vira um beco sem saida. Esse arrasto e local, nao da rolagem lateral na pagina. */ .dep-marquee{ position:relative;z-index:1; margin-top:clamp(30px,3.4vw,44px); overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; } .dep-marquee::-webkit-scrollbar{display:none;} /* o JS so liga o modo carrossel DEPOIS de clonar a fila */ .dep-marquee.dep-on{overflow:hidden;} .dep-track{display:flex;width:max-content;} .dep-run{display:flex;flex:none;} .dep-marquee.dep-on .dep-track{animation:dep-run var(--dep-dur,150s) linear infinite;} @keyframes dep-run{to{transform:translateX(-50%);}} /* PAUSA. Mouse por :hover, escopado em ponteiro fino: no toque o :hover fica grudado depois do tap e travaria a faixa parada pra sempre no celular. Dedo pela classe .dep-hold que o JS poe no toque, teclado por :focus-within, e video tocando pela classe .dep-lock. */ @media (hover:hover) and (pointer:fine){ .dep-marquee.dep-on:hover .dep-track{animation-play-state:paused;} } .dep-marquee.dep-on.dep-hold .dep-track, .dep-marquee.dep-on.dep-lock .dep-track, .dep-marquee.dep-on:focus-within .dep-track{animation-play-state:paused;} /* item da fila. A margem da direita vale pra TODOS, o ultimo inclusive: e ela que faz a emenda do laco cair certinha. */ .dep-item{ --dep-w:clamp(230px,20vw,288px); --dep-bezel:calc(var(--dep-w) * .031); --dep-r:calc(var(--dep-w) * .15); flex:none;width:var(--dep-w);margin:0 clamp(16px,1.6vw,26px) 0 0; } /* corpo do aparelho: moldura escura, canto do iPhone e sombra de apoio */ .dep-fone{ position:relative;padding:var(--dep-bezel); border-radius:var(--dep-r); background:var(--bg2);border:1px solid var(--line); box-shadow:0 50px 90px -44px rgba(0,0,0,.8); } /* botoes laterais. Sao pilulas solidas, sem gradiente: a esquerda os dois de volume (o segundo sai de um box-shadow deslocado, pra nao precisar de markup extra) e a direita o de ligar. As medidas saem de --dep-w porque a altura do aparelho e derivada dela, entao tudo escala junto. */ .dep-fone::before, .dep-fone::after{ content:"";position:absolute;width:2px;border-radius:100px; background:var(--line); } .dep-fone::before{ left:-2px;top:27.8%;height:calc(var(--dep-w) * .185); box-shadow:0 calc(var(--dep-w) * .245) 0 0 var(--line); } .dep-fone::after{ right:-2px;top:31.8%;height:calc(var(--dep-w) * .27); } /* tela. A proporcao e a do arquivo, entao o print entra inteiro. O fundo e o preto da pagina: so aparece no item do video, que e mais largo que a tela e sobra em cima e embaixo, como num player. */ .dep-tela{ position:relative;width:100%;aspect-ratio:590 / 1280; border-radius:calc(var(--dep-r) - var(--dep-bezel)); overflow:hidden;background:var(--bg0); } .dep-tela img, .dep-tela video{display:block;width:100%;height:100%;object-fit:contain;} /* ilha dinamica. Pilula escura no alto da tela, CSS puro, sem SVG e sem emoji. A caixa foi MEDIDA nos dez arquivos: e o vao vazio que o proprio screenshot ja tem entre a hora e a bateria, o lugar exato da ilha do aparelho. Ela nao cobre pixel de conteudo nenhum. */ .dep-ilha{ position:absolute;z-index:2;left:50%;top:1.17%;transform:translateX(-50%); width:31.7%;height:4.06%;border-radius:100px;background:var(--bg0); } /* ------------------------------------------------------------ ITEM DO VIDEO Facade, mesmo principio do player do topo: nasce com poster e preload="none", entao nenhum byte de video baixa antes do clique. O