/* ========================================================= POPPINS HOSPEDADA AQUI Bloco identico ao do ingresso.css, colado de proposito: cada variacao e' um arquivo CSS unico e independente. Cada visitante carrega uma variacao so', entao separar a fonte num arquivo comum nao economizaria nada e custaria uma requisicao a mais. Para atualizar as duas: scripts/fontes.py ========================================================= */ @font-face{ font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fontes/poppins-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fontes/poppins-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fontes/poppins-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fontes/poppins-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fontes/poppins-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('assets/fontes/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fontes/poppins-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fontes/poppins-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('assets/fontes/poppins-800-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('assets/fontes/poppins-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================= VARIACAO P5 — VSL COM A COPY PRIMEIRO Irma da p4, e de proposito quase identica a ela. As duas testam UMA variavel: onde o video fica. p4 video na primeira dobra (VSL classica) p5 copy na primeira dobra, video na segunda Por isso o sistema visual e' o mesmo — mesma paleta, mesma tipografia, mesmo botao. Se a cor mudasse junto, o teste deixaria de medir a posicao do video e passaria a medir a pagina inteira. O que muda aqui: - a dobra 1 nao tem video: e' olho, headline, subheadline, tres provas, a conta do ingresso e o botao - o video ganhou uma dobra so' pra ele, com o botao embaixo - o player carrega no clique (vale pras duas, ver o facade no fim do arquivo) ========================================================= */ :root{ /* PRETO — as duas paginas de VSL, e so' elas. Fundo preto e' o padrao do formato: a pagina some e sobra o video. Nao e' o roxo da marca, e isso e' desvio consciente do design-guide.md, que diz pra nao usar bloco preto nas LPs. Aqui a regra cede porque o formato manda — e o dourado, que e' o elo da marca, continua sendo o botao. Nao e' #000 puro: um preto levemente aberto (#0A0A0A) tira o "buraco" que o preto absoluto faz em tela OLED e deixa a moldura do player e as bordas visiveis sem precisar de linha mais forte. Contraste medido: branco 19.8:1, branco-soft 12.6:1, amarelo 12.4:1 no fundo; 18.1:1 e 11.7:1 na superficie elevada. Todos bem acima do 4.5 do AA. */ --preto:#0A0A0A; /* a pagina */ --preto-2:#161616; /* superficie elevada: provas, palco, rodape */ --linha:rgba(255,255,255,.15); --ouro:#E5B139; /* botao e moldura do player */ --ouro-ink:#2A1B00; --amarelo:#FFC41A; /* palavra destacada e preco */ --branco:#FFFFFF; --branco-soft:rgba(255,255,255,.8); /* teto de altura do video. Tudo o mais na pagina e' texto curto; e' esse numero que decide se o botao cabe na primeira tela. */ --video-teto:34vh; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--preto); color:var(--branco); line-height:1.6; font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:80px; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* A .wrap e' filha de um flex container em coluna (.vsl). Com 'margin:0 auto' o item para de esticar no eixo transversal e vira shrink-to-fit — o video ficava menor que o teto permitia. Quem centraliza aqui e' o align-items:center do .vsl. */ /* O 'margin:0 auto' e' necessario nos blocos normais (a dobra do video na p5, por exemplo). Nos containers flex quem centraliza e' o align-items:center — as duas coisas juntas dao o mesmo resultado e nenhuma cancela o width:100%, que e' o que dimensiona o player. */ .wrap{width:100%;max-width:880px;margin:0 auto;padding:0 22px} /* ---------- tipografia ---------- */ h1{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.1} h1{font-size:clamp(27px,3.5vw,44px)} p{margin:0 0 15px} .destaque{color:var(--amarelo)} .olho{ display:inline-flex;align-items:center;gap:10px; font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase; color:var(--amarelo);margin:0 0 16px } .olho::before,.olho::after{content:"";width:22px;height:3px;background:var(--ouro);border-radius:2px} /* ---------- botao ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px; background:var(--ouro);color:var(--ouro-ink); font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase; padding:20px 38px;border-radius:4px;border:0;cursor:pointer; transition:transform .12s ease,background .12s ease; text-align:center;line-height:1.25; box-shadow:0 12px 34px rgba(229,177,57,.34) } .btn::after{content:"\2192";font-size:18px;line-height:1} .btn:hover{background:#F2C24F;transform:translateY(-2px)} .btn:focus-visible{outline:3px solid var(--amarelo);outline-offset:4px} .btn-sub{font-size:12.5px;color:var(--branco-soft);margin:12px 0 0} /* topbar amarela — a assinatura de cor desta variacao */ .aviso{ background:var(--amarelo);color:var(--ouro-ink); font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:10px 18px;text-align:center } /* ========================================================= DOBRA 1 — A COPY Coluna unica centrada, sem video. O trabalho dela e' fazer a pessoa querer descer pra assistir. ========================================================= */ .vsl{ min-height:92vh;display:flex;flex-direction:column; justify-content:center;align-items:center; text-align:center;padding:44px 0 64px;position:relative; /* sem gradiente: no formato VSL o fundo nao disputa atencao com o video. Chapado tambem carrega mais rapido em tela fraca. */ background:var(--preto) } .vsl h1{max-width:24ch;margin:0 auto 16px} .sub{ max-width:640px;margin:0 auto 30px; font-size:clamp(15.5px,1.9vw,19px);line-height:1.55; color:var(--branco-soft);font-weight:400 } /* as tres provas: dado duro, nao adjetivo */ .provas{ list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px; max-width:760px;margin:0 auto 26px;padding:0; background:var(--linha);border-radius:10px;overflow:hidden } .provas li{ background:var(--preto-2);padding:20px 14px; display:flex;flex-direction:column;gap:5px } .provas b{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--branco)} .provas span{font-size:12.5px;line-height:1.45;color:var(--branco-soft)} .conta-linha{ max-width:600px;margin:0 auto 28px; font-size:15.5px;line-height:1.6;color:var(--branco-soft) } .conta-linha b{color:var(--amarelo);font-weight:700} /* a seta que manda descer pro video */ .desce{ position:absolute;left:50%;bottom:22px;transform:translateX(-50%); font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--branco-soft);display:flex;flex-direction:column;align-items:center;gap:8px } .desce::after{ content:"";width:1px;height:24px; background:linear-gradient(to bottom,var(--ouro),rgba(229,177,57,0)) } .desce:hover{color:var(--branco)} /* ========================================================= DOBRA 2 — O VIDEO E O BOTAO ========================================================= */ .palco{ background:var(--preto-2);border-top:1px solid var(--linha); padding:56px 0 64px;text-align:center } .olho-claro{color:var(--branco-soft)} .olho-claro::before,.olho-claro::after{background:var(--branco-soft)} /* ---------- o video ---------- */ .video{ position:relative;width:100%;max-width:820px; margin:0 auto;aspect-ratio:16/9; background:#000;border:2px solid var(--ouro);border-radius:10px; overflow:hidden;box-shadow:0 24px 56px rgba(0,0,0,.45) } /* o player entra aqui quando a pessoa clica */ .video iframe,.video video,.video embed,.video object{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block } /* ---------- depois do video: reforco, preco, botao ---------- */ .reforco{ max-width:700px;margin:24px auto 0; font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.55;color:var(--branco-soft) } .reforco b{color:var(--branco);font-weight:600} /* ========================================================= RODAPE + BARRA FIXA ========================================================= */ footer{ padding:40px 0 36px;text-align:center;font-size:13px; color:var(--branco-soft);background:var(--preto-2) } footer p{margin:0 0 8px} footer a{text-decoration:underline} .barra{ position:fixed;left:0;right:0;bottom:0;z-index:40; background:var(--preto-2);border-top:1px solid var(--linha); padding:11px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between; transform:translateY(105%);transition:transform .2s ease } .barra.on{transform:none} .barra .p{font-size:12px;color:var(--branco-soft);line-height:1.25} .barra .p b{display:block;font-size:19px;color:var(--amarelo);letter-spacing:-.02em} .barra .btn{padding:14px 20px;font-size:12.5px;flex:0 1 auto;box-shadow:none} /* ========================================================= RESPONSIVO O que encolhe primeiro e' o respiro; depois o video; a headline e o botao sao os ultimos a ceder. ========================================================= */ /* O orcamento vertical da VSL. Numa tela de notebook (768-900px de altura) headline + video 16:9 + botao nao cabem no tamanho cheio, e o botao caindo pra fora da dobra e' o que mata uma VSL. Entao, nessa faixa, o respiro e a tipografia encolhem e o --video-teto cai junto — o video continua sendo o maior objeto da tela. */ /* Aqui o aperto e' so' da dobra 1: o video mora na dobra 2 e tem a tela toda pra ele, entao nao precisa do teto em vh que a p4 usa. */ @media (max-height:1000px){ .vsl{padding:32px 0 56px} .vsl h1{font-size:clamp(25px,2.9vw,37px);margin-bottom:13px} .sub{font-size:16px;margin-bottom:24px} .provas li{padding:16px 12px} .conta-linha{margin-bottom:22px;font-size:15px} .olho{margin-bottom:13px} .btn{padding:18px 32px;font-size:14px} } @media (max-height:760px){ .vsl{min-height:0;padding:30px 0 48px} .desce{display:none} } @media (max-width:760px){ .vsl{min-height:0;padding:30px 0 46px} .desce{display:none} .palco{padding:44px 0 52px} .video{border-width:1px} /* tres colunas de prova nao cabem no celular */ .provas{grid-template-columns:1fr;max-width:420px} .provas li{flex-direction:row;align-items:baseline;justify-content:center;gap:9px} .provas span{font-size:12px} .btn{padding:18px 22px;font-size:13.5px} } @media (max-width:460px){ /* o olho quebra em duas linhas no celular e os tracinhos das pontas ficam soltos no meio do nada; saem */ .olho::before,.olho::after{display:none} .olho{font-size:10.5px;letter-spacing:.16em;margin-bottom:11px} } @media (max-width:400px){ .btn{padding:17px 16px;font-size:12.5px;letter-spacing:.06em} } @media (prefers-reduced-motion:reduce){ .btn,.barra{transition:none} .btn:hover{transform:none} } /* ========================================================= A CONTA, EM TIRA Numa VSL nao cabe o bloco de comparacao inteiro das outras paginas: o que sobra de tela depois do video e' uma linha. Entao o argumento vira uma linha so' — o que voce paga, o que um ajuste vale — e ela entra no lugar onde estava so' o preco. ========================================================= */ .conta-tira{ display:inline-flex;align-items:stretch;gap:14px;margin:16px 0 10px; flex-wrap:wrap;justify-content:center } .conta-tira .c{ display:flex;flex-direction:column;align-items:center;gap:5px; background:rgba(255,255,255,.07);border:1px solid var(--linha); border-radius:10px;padding:12px 22px } .conta-tira .k{ font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--branco-soft) } .conta-tira .v{ font-size:clamp(21px,2.7vw,29px);font-weight:700;letter-spacing:-.03em; line-height:1;color:var(--branco) } .conta-tira .alvo{background:rgba(229,177,57,.14);border-color:rgba(229,177,57,.5)} .conta-tira .alvo .v{color:var(--amarelo)} .conta-tira .seta{ display:flex;align-items:center;font-size:22px;color:var(--ouro);font-weight:400 } .conta-nota{ max-width:620px;margin:0 auto 2px; font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.62) } @media (max-height:1000px){ .conta-tira{margin:12px 0 8px;gap:10px} .conta-tira .c{padding:10px 18px} } @media (max-width:460px){ .conta-tira .seta{transform:rotate(90deg)} .conta-tira{gap:8px} } /* --------------------------------------------------------------- O PLAYER SO' CARREGA NO CLIQUE O que fica na pagina e' o poster (131 KB) com um botao. O