/* ============================================================ VÊNUS BELA — site público O que dá "encantamento" (aprendido da referência purpleberry.com.br): 1. RITMO DE COR. Não é uma cor só o tempo todo — é uma família que troca a cada seção (coral → creme → ameixa → pêssego). A página vira uma sequência de blocos coloridos, e isso é o que segura o scroll. 2. CANTOS MUITO REDONDOS. Blocos com 32-56px de raio e botões em formato de pílula. Canto reto lê como documento; canto redondo lê como marca. 3. TIPOGRAFIA COM PERSONALIDADE. Display condensada e pesada (Phudu) para gritar, manuscrita (Caveat) para o acento humano, Inter para ler. É o contraste entre elas que cria a voz. 4. CLAREZA LITERAL. O título pode ser emocional, mas logo abaixo vem uma frase que diz, sem poesia, o que isto é e para quem. ATENÇÃO 1 — cor de texto: todo componente com fundo claro PRÓPRIO (.card, .dep, .faq details, .ebook-card, .dor, .oferta, .popup) declara a própria cor. Sem isso ele herda a cor da seção, e numa seção escura o texto sai claro sobre cartão branco — invisível. ATENÇÃO 2 — ao mexer em .bloco: as seções se sobrepõem em --r-bloco para a transição curva funcionar. Qualquer padding vertical customizado PRECISA somar var(--r-bloco) nos dois lados, senão a seção seguinte cobre o conteúdo desta. Use a classe .faixa como exemplo. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--escuro)} body{ font:16.5px/1.6 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--texto); /* Fundo CLARO, e isto não é gosto: --texto é uma cor escura. Com o fundo escuro que estava aqui, qualquer conteúdo que não estivesse dentro de um bloco pintado ficava texto escuro sobre fundo escuro — invisível. Na home não aparecia porque toda seção lá pinta o próprio fundo; nas páginas internas, apagava tudo. O escuro continua no , que é o que aparece atrás do rodapé e no repique da rolagem. */ background:var(--creme); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ---------- tipografia ---------- */ h1,h2,h3,h4{ font-family:'Phudu','Arial Narrow',sans-serif; font-weight:800; line-height:.98; letter-spacing:-.005em; text-transform:uppercase; color:var(--escuro); } h1{font-size:clamp(2.5rem,6.2vw,4.5rem)} h2{font-size:clamp(1.9rem,4.4vw,3.1rem)} h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;text-transform:none;line-height:1.15} h4{font-size:1rem;font-weight:700} /* O acento manuscrito — é ele que humaniza o display pesado. */ .mao{ font-family:'Caveat',cursive; font-weight:700; text-transform:none; letter-spacing:0; line-height:.9; display:inline-block; } h1 .mao{font-size:1.18em} h2 .mao{font-size:1.2em} p{margin-bottom:.8em} a{color:inherit;text-decoration:none;transition:.15s} img{max-width:100%;height:auto;display:block} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} strong,b{font-weight:600} ::selection{background:var(--coral);color:#fff} /* ---------- blocos de seção ---------- Cada seção arredonda SÓ O TOPO e sobe por cima da anterior. O canto curvo revela a cor de quem está atrás, criando uma transição contínua. Arredondar os quatro cantos era o erro: as seções viravam cartões soltos e o fundo escuro aparecia nas frestas entre elas — parecia camada de sanduíche em vez de página. */ /* O recuo de --r-bloco é somado NOS DOIS LADOS do padding: em cima porque o próprio bloco sobe sobre o anterior, embaixo porque o próximo sobe sobre este. Sem a folga de baixo, o bloco seguinte cobre os últimos 56px de conteúdo — foi o que fez a faixa de categorias sumir. */ .bloco{ position:relative; border-radius:var(--r-bloco) var(--r-bloco) 0 0; padding: calc(clamp(44px,5.4vw,78px) + var(--r-bloco)) 0 calc(clamp(44px,5.4vw,78px) + var(--r-bloco)); margin-top:calc(var(--r-bloco) * -1); } /* O primeiro encosta no topo da página: sem curva e sem recuo. */ .bloco:first-of-type{ border-radius:0; margin-top:0; padding-top:clamp(44px,5.4vw,78px); } .bloco.coral {background:var(--coral-forte); color:#fff} .bloco.creme {background:var(--creme)} .bloco.escuro {background:var(--escuro); color:#EFE5EA} .bloco.pessego{background:var(--pessego)} /* Dentro de seção escura/coral as variáveis de texto são REDEFINIDAS. Sem isto, qualquer elemento que use --texto-2 ou --texto-3 (preço parcelado, legendas, apoio) mantinha a cor escura da paleta clara e ficava ilegível. Redefinir a variável conserta todos de uma vez, em vez de caçar classe por classe. */ /* E o contrário também precisa existir: um componente com fundo CLARO próprio, dentro de uma seção escura, tem que voltar às variáveis escuras. Sem este reset, as respostas do FAQ (cartão branco dentro da seção escura) herdavam o texto claro e ficavam ilegíveis — o mesmo defeito que a ATENÇÃO 1 no topo deste arquivo descreve. */ .bloco.escuro .faq details,.bloco.coral .faq details, .bloco.escuro .dep,.bloco.coral .dep, .bloco.escuro .ebook-card,.bloco.coral .ebook-card, .bloco.escuro .oferta,.bloco.coral .oferta, .bloco.escuro .popup,.bloco.coral .popup{ --texto:var(--texto-base); --texto-2:var(--texto-2-base); --texto-3:var(--texto-3-base); color:var(--texto-base); } .bloco.escuro{--texto:#EFE5EA;--texto-2:rgba(255,255,255,.90);--texto-3:rgba(255,255,255,.76)} .bloco.coral {--texto:#FFFFFF;--texto-2:rgba(255,255,255,.94);--texto-3:rgba(255,255,255,.84)} .bloco.coral h1,.bloco.coral h2,.bloco.coral h3, .bloco.escuro h1,.bloco.escuro h2,.bloco.escuro h3{color:#fff} .bloco.coral strong,.bloco.escuro strong{color:#fff} /* ------------------------------------------------------------------ .secao — as páginas internas (blog, post, contato, legais) Existia no HTML dessas páginas mas NÃO existia no CSS: era classe morta do design anterior. Sem fundo próprio, elas caíam no fundo do , que é escuro, enquanto o texto continuava com a cor escura da paleta clara. Resultado: texto da MESMA cor do fundo, contraste 1.00, letra invisível — foi o que o PageSpeed acusou. Aqui ela é o que sempre deveria ter sido: bloco claro, feito para ler texto longo. Sem as curvas do .bloco, porque página de conteúdo é uma leitura contínua, não uma sequência de seções coloridas. ------------------------------------------------------------------ */ .secao{ position:relative; background:var(--creme); color:var(--texto); padding:clamp(40px,5vw,72px) 0; } .secao:first-of-type{padding-top:clamp(92px,9vw,128px)} /* espaço para a barra flutuante */ .secao h1,.secao h2,.secao h3,.secao h4{color:var(--escuro)} .secao .sub{color:var(--texto);opacity:.82} /* Alternância suave entre seções seguidas, para não virar um bloco só. */ .secao.creme{background:#fff} /* Faixa fina (ex.: os filtros de categoria). O padding vertical é menor, MAS o topo continua somando o raio — sem isso o bloco seguinte, que sobe 56px, cobriria o conteúdo dela. */ .bloco.faixa{ padding-top:calc(26px + var(--r-bloco)); padding-bottom:calc(26px + var(--r-bloco)); } /* O rodapé fecha a página, então também sobe sobre o último bloco. */ .rodape{margin-top:calc(var(--r-bloco) * -1);border-radius:var(--r-bloco) var(--r-bloco) 0 0;position:relative} .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px} .wrap-fino{max-width:760px} .centro{text-align:center} /* Etiqueta de seção — pílula pequena em caixa alta. */ .olho{ display:inline-block;padding:7px 16px;border-radius:99px; font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px; background:var(--escuro);color:#fff; } .bloco.escuro .olho,.bloco.coral .olho{background:rgba(0,0,0,.42);color:#fff} .bloco.creme .olho,.bloco.pessego .olho{background:var(--coral-forte);color:#fff} .sub{font-size:1.05rem;color:var(--texto-2);max-width:54ch;line-height:1.55} .bloco.coral .sub{color:#fff} .bloco.escuro .sub{color:rgba(255,255,255,.88)} .centro .sub{margin-left:auto;margin-right:auto} /* A frase literal que diz o que isto é. Nunca some. */ .oquee{ display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap; background:rgba(0,0,0,.34);border-radius:99px; padding:9px 18px;font-size:14px;font-weight:500;margin-bottom:20px; } .bloco.creme .oquee,.bloco.pessego .oquee{background:rgba(46,32,51,.08);color:var(--texto)} /* ---------- topo: barra flutuante em pílula ---------- */ .topo{position:sticky;top:14px;z-index:60;padding:0 16px;margin-bottom:-68px} /* BARRA CLARA, e nao escura. O logo e um PNG de letra branca com contorno escuro — desenhado para fundo claro. Sobre a barra vinho, o contorno se fundia com o fundo e sobrava um borrao: a marca sumia justo no lugar mais visto da pagina. A altura tambem era o problema: 29px de logo em barra de 62px deixava a marca menor que os itens do menu ao lado dela. */ .topo .barra{ max-width:1120px;margin:0 auto;height:74px; background:var(--creme);border-radius:99px; display:flex;align-items:center;gap:22px;padding:0 12px 0 26px; box-shadow:0 8px 30px rgba(46,32,51,.28); } .topo .logo img{height:42px;width:auto} .topo nav{display:flex;gap:22px;margin-left:auto;align-items:center} .topo nav a{ color:rgba(46,32,51,.78);font-size:13.5px;font-weight:600; letter-spacing:.02em;text-transform:uppercase; } /* O :not(.btn) e obrigatorio: o botao tambem e um dentro do nav, e sem a excecao ele herdava texto escuro sobre fundo escuro ao passar o mouse. */ .topo nav a:not(.btn):hover,.topo nav a:not(.btn).ativo{color:var(--escuro)} /* O botao do topo em VINHO, nao coral. Sobre a barra creme, o coral do botao brigava com o coral do banner logo abaixo — duas manchas da mesma cor a poucos pixels uma da outra, e nenhuma das duas ganhava. O vinho e a cor mais escura da pagina: sobre creme ele e o ponto de maior contraste que existe, e e para la que o olho vai. */ .topo nav .btn{background:var(--escuro);color:#fff} .topo nav .btn i{color:#fff} .topo nav .btn:hover{background:#3C2B43;color:#fff;box-shadow:0 8px 22px rgba(46,32,51,.34)} .topo nav .btn:hover i{color:#fff} #menu-mobile{display:none;color:var(--escuro);font-size:20px;margin-left:auto;padding:8px} /* Estes tres so existem na gaveta do celular. */ .nav-topo,.nav-oferta{display:none} /* O fundo fica em 55, ABAIXO do .topo (60). O .topo tem z-index proprio, entao ele cria um contexto de empilhamento: a gaveta declara z-index 80 mas continua presa dentro do 60 do pai. Com o fundo em 70 ele passava por cima da propria gaveta e escurecia o menu inteiro. Numero maior nao vence contexto de pai. */ #nav-fundo{ position:fixed;inset:0;z-index:55;background:rgba(20,12,24,.55); opacity:0;transition:opacity .28s ease; } #nav-fundo.visivel{opacity:1} /* O whatsapp flutuante esta em 90 e aparecia na frente da gaveta. */ body.menu-aberto .zap{opacity:0;visibility:hidden;transition:opacity .2s ease} /* ---------- botões: pílula ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border-radius:99px; font-family:'Inter',sans-serif;font-weight:700;font-size:15px; letter-spacing:.01em; background:var(--coral-forte);color:#fff;transition:.18s;text-align:center; white-space:nowrap; /* pílula nunca quebra palavra no meio */ } .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,66,76,.35)} .btn:active{transform:none} .btn.g{padding:19px 40px;font-size:16.5px} .btn.p{padding:10px 20px;font-size:13px} /* Sobre fundo coral o botão vira branco — contraste sem sair da paleta. */ .bloco.coral .btn,.bloco.escuro .btn{background:#fff;color:var(--coral-link)} .bloco.coral .btn:hover,.bloco.escuro .btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.24)} .btn.linha{background:transparent;color:inherit;box-shadow:none;border:2px solid currentColor} .btn.linha:hover{background:currentColor;box-shadow:none} .btn.linha:hover span{color:var(--creme)} .btn.escuro{background:var(--escuro);color:#fff} /* Largura cheia. Chamava-se .bloco2, nome que convidava ao erro: duas views escreveram class="btn bloco" e o botão herdou a classe de SEÇÃO — 44px de padding no topo, canto reto, 83px de altura. O nome agora diz o que faz. */ .btn.largo{width:100%} /* WhatsApp tem cor própria e reconhecível. Botão de contorno neutro não é lido como "falar no WhatsApp"; o verde é o que faz a pessoa clicar. NÃO chamar de .zap: esse nome já é do botão FLUTUANTE (position:fixed, círculo de 54px). Reaproveitar o nome fazia este botão virar um círculo fixo escondido atrás do outro. #128C4B e não o #25D366 da marca: aquele com texto branco dá 2.2:1. */ .btn.whats{background:#128C4B;color:#fff;border:0} .btn.whats:hover{background:#0F7A41} .btn.whats i{font-size:1.15em} /* ---------- formulários do site ---------- Os campos estavam com estilo inline em cada view, repetido e fora do padrão do resto do site. Aqui viram componente. */ .campo{margin-bottom:16px} .campo label{ display:block;margin-bottom:7px; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--texto-2); } .campo input,.campo textarea{ width:100%;padding:14px 16px;border-radius:14px; border:1.5px solid rgba(46,32,51,.16);background:#fff; font-family:inherit;font-size:15.5px;line-height:1.5;color:var(--texto-base); transition:border-color .15s,box-shadow .15s; } .campo textarea{resize:vertical;min-height:130px} .campo input:focus,.campo textarea:focus{ outline:none;border-color:var(--coral-link); box-shadow:0 0 0 3px rgba(46,32,51,.07); } .campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)} .btn-nota{ font-size:13px;opacity:.72;margin-top:12px; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .centro .btn-nota{justify-content:center} /* ---------- herói ---------- */ .heroi-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:center;padding-top:34px} .heroi h1{margin-bottom:18px} .heroi-acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px} .heroi-visual{position:relative;max-width:400px;margin:0 auto;width:100%} .heroi-visual .moldura{ background:rgba(255,255,255,.14);border-radius:40px;padding:26px; } .heroi-visual img{filter:drop-shadow(0 16px 30px rgba(0,0,0,.3));margin:0 auto} /* SELO DE DESCONTO. Era um circulo branco de 84px com o numero em coral, sobre um banner coral: cor de fundo quase igual a do texto, tamanho pequeno e sombra fraca. O desconto e o argumento mais forte da dobra inicial e estava passando despercebido. Agora e um adesivo branco e redondo, com "60%" e "off" logo abaixo, na manuscrita (Caveat) do "um preco justo" do titulo. O branco recorta o coral do banner, e a letra manuscrita amarra com a chamada. */ .heroi-visual .selo{ position:absolute;right:-14px;top:-22px; background:#fff;color:var(--coral-link); width:114px;height:114px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; font-family:'Caveat',cursive;font-weight:700; font-size:59px;line-height:.66; box-shadow:0 12px 30px rgba(20,12,24,.32);transform:rotate(-8deg); } /* O anel tracejado colado na borda: e ele que transforma o circulo em carimbo e faz o "off" deslocado parecer escolha, nao desalinhamento. */ .heroi-visual .selo::before{ content:'';position:absolute;inset:3px;border-radius:50%; border:2px dashed currentColor;opacity:.7; } /* O "off" sai do centro e encaixa embaixo do "60", deixando o "%" livre. */ .heroi-visual .selo small{ display:block;font-size:.59em;font-weight:700; text-transform:lowercase;letter-spacing:0; transform:translateX(-18px); } /* bolinhas da paginacao de depoimentos */ .dep-bolinhas{display:flex;justify-content:center;gap:10px;margin-top:30px} .dep-bolinhas button{ width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(46,32,51,.22);transition:.18s; } .dep-bolinhas button:hover{background:rgba(46,32,51,.4)} .dep-bolinhas button[aria-current="true"]{ background:var(--coral-forte);transform:scale(1.25); } /* prova social */ .prova-linha{ display:inline-flex;align-items:center;gap:12px;margin-top:24px; /* Escurecida, e não clareada: a faixa fica sobre o coral, e clarear o fundo reduz o contraste do texto branco em cima dela. */ background:rgba(0,0,0,.42);border-radius:99px;padding:8px 20px 8px 8px;flex-wrap:wrap; } .bloco.creme .prova-linha{background:rgba(46,32,51,.07)} .prova-linha .rostos{display:flex} .prova-linha .rostos span{ width:34px;height:34px;border-radius:50%;border:2px solid var(--coral);margin-left:-11px; background:var(--escuro);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px; } .prova-linha .rostos span:first-child{margin-left:0} .prova-linha .txt{font-size:13.5px;line-height:1.3} .prova-linha .estrelas{color:#fff;font-size:12px;letter-spacing:1.5px} /* ---------- grades e cartões ---------- */ .grade{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .card{ background:#fff;color:var(--texto);border-radius:28px;padding:26px 24px;transition:.18s; } .bloco.coral .card,.bloco.escuro .card{background:rgba(255,255,255,.1);color:#fff} .card:hover{transform:translateY(-3px)} .card .ico{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:var(--coral);color:#fff;font-size:17px;margin-bottom:16px; } .card h3{margin-bottom:8px} .card p{font-size:14.5px;color:var(--texto-2);margin:0;line-height:1.5} .bloco.coral .card p,.bloco.escuro .card p{color:rgba(255,255,255,.8)} /* ---------- lista de dores ---------- */ .dores{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px} .dor{ display:flex;gap:12px;align-items:flex-start; background:#fff;color:var(--texto);border-radius:20px;padding:15px 18px; } .bloco.coral .dor{background:rgba(255,255,255,.13);color:#fff} .dor i{color:var(--coral-link);font-size:14px;margin-top:4px;flex:none} .bloco.coral .dor i{color:#fff;opacity:.7} .dor p{margin:0;font-size:15px;line-height:1.45} /* ---------- módulos ---------- */ .modulo{display:flex;gap:18px;padding:16px 0;align-items:flex-start} .modulo + .modulo{border-top:1px solid rgba(46,32,51,.1)} .bloco.coral .modulo + .modulo,.bloco.escuro .modulo + .modulo{border-top-color:rgba(255,255,255,.18)} .modulo .n{ font-family:'Phudu',sans-serif;font-weight:800;font-size:28px; color:var(--coral-link);flex:none;width:46px;line-height:1; } .bloco.coral .modulo .n,.bloco.escuro .modulo .n{color:#FFD55C} .modulo h3{margin-bottom:5px} .modulo p{font-size:14.5px;color:var(--texto-2);margin:0;line-height:1.5} .bloco.coral .modulo p,.bloco.escuro .modulo p{color:rgba(255,255,255,.8)} /* ---------- depoimentos ---------- */ .dep{ background:#fff;color:var(--texto); border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:13px; } .dep .estrelas{color:var(--dourado-texto);font-size:13px;letter-spacing:2px} .dep p{font-size:15.5px;line-height:1.5;margin:0;flex:1;color:var(--texto)} .dep .quem{display:flex;align-items:center;gap:11px} .dep .quem .av{ width:40px;height:40px;border-radius:50%;background:var(--coral-forte); color:#fff;display:grid;place-items:center;font-weight:700;flex:none;font-size:14px; } .dep .quem b{display:block;font-size:14px} .dep .quem span{font-size:12.5px;color:var(--texto-3)} /* ---------- oferta ---------- */ .oferta{ background:#fff;border-radius:40px;padding:clamp(28px,3.4vw,44px); max-width:480px;margin:0 auto;text-align:center;position:relative; box-shadow:0 18px 50px rgba(46,32,51,.18);color:var(--texto); } .oferta h3{color:var(--escuro);font-size:1.5rem;margin:12px 0 6px} .oferta .fita{ position:absolute;top:-15px;left:50%;transform:translateX(-50%); background:var(--escuro);color:#fff;padding:8px 22px;border-radius:99px; font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; } .oferta .de{color:var(--texto-3);text-decoration:line-through;font-size:15px} .oferta .por{ font-family:'Phudu',sans-serif;font-weight:800; font-size:clamp(3rem,7vw,4rem);color:var(--coral-link);line-height:1;margin:2px 0; } .oferta .por small{font-size:1.4rem;vertical-align:super} .oferta .parcela{color:var(--texto-2);font-size:14.5px;margin-bottom:20px} .oferta ul{list-style:none;text-align:left;margin:20px 0} .oferta ul li{padding:9px 0;display:flex;gap:11px;align-items:flex-start;font-size:14.8px} .oferta ul li i{color:var(--coral-link);margin-top:4px;flex:none;font-size:13px} .garantia{ display:flex;gap:14px;align-items:center;background:var(--creme); border-radius:24px;padding:18px;margin-top:20px;text-align:left; } .garantia .selo{ width:48px;height:48px;border-radius:50%;background:var(--coral);color:#fff; display:grid;place-items:center;font-size:19px;flex:none; } .garantia b{display:block;margin-bottom:3px;font-size:14.5px} .garantia p{font-size:13.5px;color:var(--texto-2);margin:0;line-height:1.45} /* ---------- FAQ ---------- */ /* Cartão branco em qualquer seção — por isso trava a própria cor de texto. Herdar a cor da seção deixava o texto claro sobre o branco, ilegível. */ .faq details{ background:#fff;color:var(--texto); border-radius:22px;margin-bottom:10px;overflow:hidden; } .faq summary{color:var(--escuro)} .faq summary{ padding:18px 52px 18px 22px;cursor:pointer;font-weight:600;font-size:15.5px; list-style:none;position:relative; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%); font-size:24px;font-weight:400;line-height:1;transition:.18s;color:var(--coral-link); } .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq .resposta{padding:0 22px 20px;font-size:14.8px;line-height:1.6;opacity:.86} /* ---------- blog ---------- */ .post-card{ background:#fff;border-radius:28px;overflow:hidden; display:flex;flex-direction:column;transition:.18s;color:var(--texto); } .post-card:hover{transform:translateY(-4px)} .post-card .capa{aspect-ratio:16/10;overflow:hidden;background:var(--creme)} .post-card .capa img{width:100%;height:100%;object-fit:cover;transition:.3s} .post-card:hover .capa img{transform:scale(1.04)} .post-card .corpo{padding:20px;display:flex;flex-direction:column;flex:1} .post-card .cat{ display:inline-block;align-self:flex-start; background:var(--pessego);color:var(--escuro);border-radius:99px; padding:4px 12px;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px; } .post-card h3{margin-bottom:8px;font-size:1.08rem;color:var(--escuro)} .post-card p{font-size:14px;color:var(--texto-2);margin-bottom:12px;flex:1;line-height:1.5} .post-card .pe{display:flex;gap:12px;font-size:12px;color:var(--texto-3);margin-top:auto} /* artigo */ .artigo{max-width:720px;margin:0 auto} .artigo .cabeca{margin-bottom:28px} .artigo .cabeca h1{margin:12px 0 14px;font-size:clamp(2rem,4.6vw,3rem)} .artigo .meta{display:flex;gap:14px;font-size:13px;color:var(--texto-3);flex-wrap:wrap;align-items:center} .artigo .capa-grande{border-radius:32px;overflow:hidden;margin-bottom:30px} .conteudo{font-size:17px;line-height:1.72} .conteudo h2{margin:1.6em 0 .5em;font-size:1.6rem} .conteudo h3{margin:1.3em 0 .4em;font-size:1.2rem} .conteudo ul,.conteudo ol{margin:0 0 1.1em 1.25em} .conteudo li{margin-bottom:.42em} .conteudo img{border-radius:24px;margin:1.4em 0} .conteudo blockquote{ background:var(--pessego);border-radius:24px;padding:20px 24px;margin:1.5em 0; font-family:'Caveat',cursive;font-size:1.5em;line-height:1.25;color:var(--escuro); } .conteudo a{color:var(--coral-link);text-decoration:underline;text-underline-offset:3px} .conteudo table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15.5px} .conteudo th,.conteudo td{padding:11px 13px;border:1px solid rgba(46,32,51,.14);text-align:left} .conteudo th{background:var(--creme);font-weight:700} .cta-artigo{ background:var(--coral-forte);color:#fff;border-radius:32px; padding:30px 26px;margin:2em 0;text-align:center; } .cta-artigo h3{color:#fff;margin-bottom:9px;font-size:1.4rem} .cta-artigo p{color:#fff;font-size:15px;margin-bottom:18px} .cta-artigo .btn{background:#fff;color:var(--coral-link)} /* ---------- captura ---------- */ .captura{text-align:center} .captura h2{margin-bottom:10px} .captura p{max-width:48ch;margin:0 auto 22px;opacity:.86} /* justify-content:center por causa da QUEBRA: com dois campos de 210px minimos em 460px de largura, o botao sempre cai para a linha de baixo. Sem alinhamento definido ele encostava na esquerda e ficava torto em relacao aos campos acima. No celular a direcao vira coluna e isso nao tem efeito. */ .form-lead{ display:flex;gap:10px;max-width:460px;margin:0 auto; flex-wrap:wrap;justify-content:center; } .form-lead input{ flex:1;min-width:210px;padding:15px 22px;border-radius:99px;border:2px solid transparent; background:rgba(0,0,0,.36);color:#fff;font-size:15px;font-family:inherit;transition:.15s; } .form-lead input::placeholder{color:rgba(255,255,255,.6)} .form-lead input:focus{outline:none;background:rgba(255,255,255,.3);border-color:#fff} /* O campo nasce com estilo de bloco ESCURO (fundo preto translucido, texto branco) e e corrigido aqui para os blocos claros. A correcao so citava .bloco — mas o post do blog usa .secao, e o campo ficava branco sobre branco: existia, tinha 283x54, e era invisivel. Quem chegava ali via so o botao e nao tinha onde digitar. */ .bloco.creme .form-lead input,.bloco.pessego .form-lead input, .secao.creme .form-lead input,.secao.pessego .form-lead input{ background:#fff;color:var(--texto);border-color:rgba(46,32,51,.14); } .bloco.creme .form-lead input::placeholder,.bloco.pessego .form-lead input::placeholder, .secao.creme .form-lead input::placeholder,.secao.pessego .form-lead input::placeholder{ color:var(--texto-3); } /* No claro o foco tambem precisa de borda escura: a borda branca do padrao desaparecia no fundo branco e o campo nao dava sinal de estar ativo. */ .bloco.creme .form-lead input:focus,.bloco.pessego .form-lead input:focus, .secao.creme .form-lead input:focus,.secao.pessego .form-lead input:focus{ background:#fff;border-color:var(--coral-forte); } .captura .lgpd{font-size:12px;opacity:.6;margin:14px auto 0;max-width:44ch} /* pop-up */ .popup-fundo{ position:fixed;inset:0;background:rgba(46,32,51,.76);backdrop-filter:blur(4px); z-index:200;display:none;place-items:center;padding:18px; } .popup-fundo.on{display:grid} .popup{ background:#fff;border-radius:36px;max-width:420px;width:100%;padding:36px 30px; position:relative;text-align:center;color:var(--texto); animation:sobe .25s cubic-bezier(.2,.9,.3,1); } @keyframes sobe{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}} .popup .fechar{ position:absolute;right:14px;top:12px;width:32px;height:32px;border-radius:50%; background:var(--creme);color:var(--escuro);font-size:17px;display:grid;place-items:center; } .popup .fechar:hover{background:var(--pessego)} .popup h3{margin-bottom:9px;font-size:1.4rem;color:var(--escuro)} .popup p{font-size:14.8px;color:var(--texto-2);margin-bottom:20px} .popup .form-lead{flex-direction:column} .popup .form-lead input{background:var(--creme);color:var(--texto);border-color:transparent;min-width:0} .popup .form-lead input::placeholder{color:var(--texto-3)} .popup .lgpd{font-size:11.5px;color:var(--texto-3);margin-top:13px} /* ---------- rodapé ---------- */ .rodape{ background:var(--escuro);color:rgba(255,255,255,.66);font-size:14.5px; /* +r-bloco no topo porque o rodapé sobe sobre o último bloco */ padding:calc(52px + var(--r-bloco)) 0 26px; } .rodape a{color:rgba(255,255,255,.66)} .rodape a:hover{color:#fff} /* As areas nomeadas existem porque as redes sociais viraram item proprio da grade. No computador elas continuam embaixo da marca, na primeira coluna; no celular vao para o lado de "A loja". Fosse por ordem de DOM, so daria para ter uma das duas disposicoes. */ .rodape .grade{ grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px; grid-template-areas: "marca loja conteudo contato" "redes loja conteudo contato"; grid-template-rows:auto 1fr; } .rodape .f-marca{grid-area:marca} .rodape .f-redes{grid-area:redes} .rodape .f-loja{grid-area:loja} .rodape .f-conteudo{grid-area:conteudo} .rodape .f-contato{grid-area:contato} .rodape .f-redes .redes{margin-top:0} .rodape img.logo{height:34px;width:auto;margin-bottom:14px} .rodape h4{ color:#fff;font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;margin-bottom:12px;font-weight:700; } .rodape ul{list-style:none} .rodape ul li{margin-bottom:8px} .rodape .redes{display:flex;gap:10px;margin-top:16px} .rodape .redes a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1); display:grid;place-items:center;font-size:15px;transition:.15s; } .rodape .redes a:hover{background:var(--coral);color:#fff} .rodape .base{ border-top:1px solid rgba(255,255,255,.1);padding-top:20px; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-size:12.5px;color:rgba(255,255,255,.62); } /* whatsapp flutuante */ .zap{ position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center;font-size:26px; box-shadow:0 8px 22px rgba(37,211,102,.4);z-index:90;transition:.18s; } .zap:hover{transform:scale(1.08)} /* ---------- responsivo ---------- */ @media(max-width:940px){ .heroi-grade{grid-template-columns:1fr;gap:32px} .heroi-visual{max-width:290px} /* Duas colunas: a marca ocupa a linha inteira, depois "A loja" com as redes ao lado, e "Conteudo" com "Contato" ao lado. */ .rodape .grade{ grid-template-columns:1fr 1fr;gap:26px 20px; grid-template-areas: "marca marca" "loja redes" "conteudo contato"; grid-template-rows:auto; } .rodape .f-redes{align-self:start} } @media(max-width:768px){ :root{--r-bloco:32px} body{font-size:16px} .topo{top:10px;margin-bottom:-68px} .topo .barra{height:64px;padding:0 8px 0 18px} .topo .logo img{height:34px} /* GAVETA LATERAL. A lista que caia por baixo da barra era o padrao de todo tema pronto e tinha um problema pratico: com cinco itens mais a oferta, ela cobria a dobra inteira e empurrava o conteudo. A gaveta ocupa a lateral, deixa a pagina visivel atras e cabe rolagem se o conteudo crescer. Ela fica FORA da tela por padrao (translateX) em vez de display:none: so assim existe transicao ao abrir e ao fechar. */ .topo nav{ display:flex;position:fixed;top:0;right:0;bottom:0;left:auto; width:min(82vw,330px);z-index:80; background:var(--creme);border-radius:0; flex-direction:column;align-items:stretch;gap:0; padding:18px 24px calc(24px + env(safe-area-inset-bottom)); box-shadow:-14px 0 40px rgba(20,12,24,.3); transform:translateX(102%); /* Saida rapida e chegada macia: 'ease' puro freia tarde e da a sensacao de painel duro batendo no fim do curso. */ transition:transform .36s cubic-bezier(.22,.7,.3,1); overflow-y:auto;overscroll-behavior:contain; } .topo nav.aberto{transform:translateX(0)} .nav-topo{ display:flex;align-items:center;justify-content:space-between; margin-bottom:6px; } .nav-topo span{ font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(46,32,51,.5); } #menu-fechar{ background:none;border:0;color:var(--escuro);font-size:22px; padding:6px 2px;line-height:1;cursor:pointer; } .topo nav a{padding:15px 0;border-bottom:1px solid rgba(46,32,51,.12)} .topo nav .btn{margin-top:16px;justify-content:center} /* A OFERTA no pe da gaveta. */ .nav-oferta{ display:flex!important;gap:14px;align-items:center; margin-top:auto;padding:14px!important;border:0!important; background:var(--escuro);border-radius:18px;color:#fff; } .nav-oferta img{ width:72px;height:98px;object-fit:cover;border-radius:8px;flex:none; box-shadow:0 6px 16px rgba(0,0,0,.35); } .nav-oferta .no-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .nav-oferta strong{ font-size:14px;line-height:1.2;font-weight:700;text-transform:none; letter-spacing:0; } .nav-oferta s{font-size:12px;opacity:.55} .nav-oferta b{ font-family:'Phudu',sans-serif;font-weight:800;font-size:23px; color:var(--pessego);line-height:1; } .nav-oferta em{ margin-top:6px;align-self:flex-start;font-style:normal; background:var(--coral-forte);color:#fff; font-size:12px;font-weight:700;padding:7px 14px;border-radius:99px; } #menu-mobile{display:block} .g2,.g3{grid-template-columns:1fr} .dores{grid-template-columns:1fr} .heroi-acoes .btn{width:100%} /* No celular a coluna e estreita e o texto alinhado a esquerda fica com o lado direito todo esfarrapado. Centralizar o selo e o titulo devolve simetria; o paragrafo continua a esquerda porque texto corrido centralizado cansa de ler. */ /* O selo e inline-flex: ele so centraliza pelo alinhamento do PAI. Forcar display:flex nele faria a pilula escura esticar de ponta a ponta. */ /* O selo estava colado na barra do menu: 0px de um lado e 20px do outro. A barra e sticky e a secao sobe por baixo dela (margin-bottom negativo do .topo), entao o respiro tem que vir da grade. */ .heroi-grade{padding-top:54px} .heroi-grade > div:first-child{text-align:center} .heroi .sub{text-align:left} .heroi-visual .selo{width:92px;height:92px;font-size:48px;right:-6px;top:-14px} .heroi-visual .selo small{transform:translateX(-14px)} .form-lead{flex-direction:column} .form-lead input,.form-lead .btn{width:100%} .rodape .grade{grid-template-columns:1fr} .modulo .n{width:36px;font-size:23px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ============================================================ VITRINE — a grade de ebooks que faz o site parecer loja ============================================================ */ .vitrine-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px; } .ebook-card{ background:#fff;color:var(--texto);border-radius:28px;overflow:hidden; display:flex;flex-direction:column;transition:.2s; } .ebook-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(46,32,51,.16)} .ebook-card .arte{ display:block;position:relative;aspect-ratio:3/4;overflow:hidden; background:var(--creme);display:grid;place-items:center;padding:18px; } .ebook-card .arte img{ width:100%;height:100%;object-fit:contain;transition:.3s; filter:drop-shadow(0 8px 18px rgba(46,32,51,.22)); } .ebook-card:hover .arte img{transform:scale(1.05)} .ebook-card .sem-arte{ font-family:'Phudu',sans-serif;font-weight:800;font-size:19px; text-transform:uppercase;color:var(--coral-link);text-align:center;line-height:1.05; } .ebook-card .etiqueta{ position:absolute;top:12px;left:12px; background:var(--escuro);color:#fff;border-radius:99px; padding:5px 12px;font-size:10px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; } .ebook-card .corpo{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1} .ebook-card .cat{ align-self:flex-start;background:var(--pessego);color:var(--escuro); border-radius:99px;padding:3px 11px;font-size:10px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px; } .ebook-card h3{font-size:1rem;line-height:1.16;margin-bottom:7px;color:var(--escuro)} .ebook-card h3 a{color:inherit} .ebook-card h3 a:hover{color:var(--coral-link)} .ebook-card p{font-size:13.2px;color:var(--texto-2);line-height:1.45;margin-bottom:11px;flex:1} .ebook-card .nota{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--texto-3);margin-bottom:9px} .ebook-card .nota .estrelas{color:var(--dourado-texto);letter-spacing:1px} .ebook-card .preco{margin-bottom:13px;line-height:1.25} .ebook-card .preco .de{ display:block;font-size:12px;color:var(--texto-3);text-decoration:line-through; } .ebook-card .preco strong{ font-family:'Phudu',sans-serif;font-weight:800;font-size:23px;color:var(--coral-link); } .ebook-card .preco .parc{display:block;font-size:11.5px;color:var(--texto-3)} @media(max-width:560px){ .vitrine-grade{grid-template-columns:repeat(2,1fr);gap:13px} .ebook-card{border-radius:22px} .ebook-card .corpo{padding:14px} .ebook-card h3{font-size:.92rem} .ebook-card p{display:none} } /* ============================================================ AVISO DE COOKIES Cartão flutuando no rodapé, sem cobrir a página inteira: quem chega precisa conseguir ver o site antes de decidir. Tampar tudo com um muro de consentimento força o "aceitar" — a ANPD chama isso de consentimento viciado. Os três botões têm o MESMO tamanho e o mesmo peso. Recusar não pode ser mais difícil nem mais apagado do que aceitar. ============================================================ */ .cookies{ position:fixed;left:16px;right:16px;bottom:16px;z-index:200; display:flex;justify-content:center; opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .25s,transform .25s; } .cookies.aberto{opacity:1;transform:none;pointer-events:auto} .cookies[hidden]{display:none} .cookies-caixa{ width:100%;max-width:720px; background:#fff;color:var(--texto-base); border-radius:24px;padding:22px 24px; box-shadow:0 18px 50px rgba(46,32,51,.24); border:1px solid rgba(46,32,51,.08); } .cookies-titulo{ font-weight:700;font-size:15px;color:var(--escuro); margin:0 0 6px;display:flex;align-items:center;gap:8px; } .cookies-titulo i{color:var(--coral-link)} #cookies-texto{font-size:14px;line-height:1.55;margin:0;color:var(--texto-2-base)} #cookies-texto a{color:var(--coral-link);text-decoration:underline} .cookies-opcoes{margin:16px 0 0;display:grid;gap:10px} /* O atributo hidden perde para display:grid declarado aqui — sem esta linha as categorias apareciam abertas antes de clicar em Personalizar. */ .cookies-opcoes[hidden]{display:none} .cookies-cat{ display:flex;gap:12px;align-items:flex-start;cursor:pointer; background:var(--creme);border-radius:14px;padding:12px 14px; } .cookies-cat input{margin-top:3px;width:18px;height:18px;accent-color:var(--coral-forte);flex:none} .cookies-cat input:disabled{cursor:not-allowed} .cookies-cat strong{font-size:14px;color:var(--escuro)} .cookies-cat small{display:block;font-size:12.5px;line-height:1.45;color:var(--texto-2-base);margin-top:2px} .cookies-botoes{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .ck-btn{ flex:1 1 0;min-width:130px; padding:12px 18px;border-radius:99px; font:700 14px 'Inter',sans-serif;cursor:pointer; background:var(--escuro);color:#fff;border:2px solid var(--escuro); transition:background .15s,color .15s; } .ck-btn:hover{background:#fff;color:var(--escuro)} .ck-btn[hidden]{display:none} @media (max-width:560px){ .cookies{left:10px;right:10px;bottom:10px} .cookies-caixa{padding:18px} .ck-btn{flex-basis:100%} } /* Aviso de material de parceiro (página do ebook afiliado). */ .nota-parceiro{ margin:16px 0 0;padding:12px 14px;border-radius:14px; background:rgba(0,0,0,.18);font-size:13.5px;line-height:1.5; } .nota-parceiro i{margin-right:4px} .nota-parceiro a{text-decoration:underline} .bloco.creme .nota-parceiro,.secao .nota-parceiro{background:rgba(46,32,51,.06)}