/* ========================================================================== LP v2 — TEMA CLARO Inverte o tema escuro herdado da mentoria: o fundo predominante passa a ser branco. As 4 seções que têm FOTO de fundo (hero, estratégias, fornecedores, mapa) continuam escuras, porque o texto delas vive em cima da imagem — só a borda do degradê passa a morrer no branco pra encostar sem emenda nas seções claras. Carregado por último no , então vence o CSS do Elementor. Gerado/injetado por scripts/build-lp-v2.py. ========================================================================== */ :root { --v2-bg: #ffffff; --v2-bg-2: #f4f6f9; --v2-ink: #101215; /* texto principal */ --v2-ink-2: #474c55; /* texto de apoio */ --v2-ink-3: #6b7078; /* texto fraco / legendas */ --v2-line: rgba(16, 18, 21, 0.12); --v2-line-2: rgba(16, 18, 21, 0.2); --v2-azul: #2563cf; /* acento legível sobre branco (o #93baff some) */ --v2-azul-esc: #17439a; } /* -------------------------------------------------- base */ html, body { background-color: var(--v2-bg) !important; color: var(--v2-ink) !important; } /* -------------------------------------------------- seções de fundo liso */ #sobre, #bp-personas, #bp-vs-intro, #metodologia, #bp-suapropria-wrap, #bp-social-proof, #bp-comparativo, #bp-transformacao, #bp-oferta, #bp-faq-section, #bp-final-cta, #bp-sill-footer, .elementor-element-7243550, .elementor-element-7738492 { background-color: var(--v2-bg) !important; color: var(--v2-ink) !important; /* ATENÇÃO: várias seções são pretas por `background-image` (um linear-gradient preto pintado por cima), não por `background-color`. Sobrescrever só a cor deixa a seção preta do mesmo jeito — foi o caso do #sobre. Nenhuma destas usa imagem de conteúdo no root. */ background-image: none !important; } /* PAINÉIS PREJUÍZO/LUCRO — vinheta original preservada, sem branco. Os dois painéis ficam empilhados (`position:absolute; inset:0`) e trocam por cross-fade de opacidade, então uma borda branca em cada um apareceria durante TODA a transição imagem→imagem, que não precisa de sombra. O branco vai pras bordas da seção (abaixo), que é onde a página encosta na imagem de verdade. */ #bp-transformacao { position: relative !important; } #bp-transformacao::before, #bp-transformacao::after { content: ""; position: absolute; left: 0; right: 0; height: 140px; z-index: 6; pointer-events: none; } /* Ficam no topo e no pé do container de 2979px. Enquanto a seção está fixada (imagem em tela cheia trocando de foto), as duas já saíram da viewport — então a sombra só aparece na entrada e na saída. */ #bp-transformacao::before { top: 0; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); } #bp-transformacao::after { bottom: 0; background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); } /* texto: zera o branco herdado. :where() mantém especificidade 0, então as regras de acento abaixo conseguem sobrescrever. */ :is(#sobre, #bp-personas, #bp-vs-intro, #metodologia, #bp-suapropria-wrap, #bp-social-proof, #bp-comparativo, #bp-faq-section, #bp-final-cta, #bp-sill-footer, .elementor-element-7243550, .elementor-element-7738492) :where(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, div, a, button, td, th, label, summary) { color: var(--v2-ink) !important; } /* #bp-oferta fica FORA da regra acima de propósito: o cartão de preço é o pricing da LP portado, com paleta escura própria. Só o cabeçalho da seção é clareado — nada dentro do cartão é tocado. */ #bp-oferta > .bp-of-inner > :is(.bp-of-kicker, .bp-of-heading, .bp-of-sub), #bp-oferta > .bp-of-inner > .bp-of-heading :where(span) { color: var(--v2-ink) !important; } #bp-oferta > .bp-of-inner > .bp-of-sub { color: var(--v2-ink-2) !important; } /* EXCEÇÕES: texto que vive sobre mídia escura (foto, vídeo, print de WhatsApp) continua branco — senão some. */ :is(#bp-transformacao .bp-tf-panel, #bp-social-proof .bp-sp-slide-body, #bp-social-proof .bp-sp-badge, #bp-social-proof .bp-sp-yt-wrap, #bp-social-proof .bp-sp-yt-toggle, #bp-social-proof .bp-sp-wa-card) :where(h1, h2, h3, h4, p, span, strong, b, em, div, a, button) { color: #fff !important; } #bp-social-proof .bp-sp-badge, #bp-social-proof .bp-sp-yt-toggle { color: #fff !important; } /* container interno que também era preto (moldura da foto da Trevo) */ #bp-suapropria-wrap .elementor-element-024d1a9 { background-color: var(--v2-bg) !important; background-image: none !important; } /* -------------------------------------------------- acentos e hierarquia */ [class*="-kicker"] { color: var(--v2-azul) !important; } [class*="-desc"], [class*="-sub"], [class*="-note"], [class*="card-texto"], .bp-sf-nav a, .bp-sf-copy, .bp-viblen-prefix { color: var(--v2-ink-2) !important; } /* EXCEÇÃO: #bp-vsl é uma banda escura no meio da página clara. Os seletores genéricos acima ([class*="-kicker"], [class*="-sub"]) são !important e pintariam o texto dela de azul-escuro e cinza-chumbo sobre quase-preto (medido: 3.6:1 e 2.33:1, os dois reprovam). Toda seção escura nova precisa entrar aqui — é a terceira vez que essa regra pega uma seção de surpresa. */ #bp-vsl .bp-vsl-kicker { color: #93baff !important; } #bp-vsl .bp-vsl-h2, #bp-vsl .bp-vsl-h2 span, #bp-vsl .bp-vsl-play span { color: #fff !important; } #bp-vsl .bp-vsl-sub { color: #c3cbdb !important; } #bp-vsl .bp-vsl-nota { color: #9aa4b8 !important; } #bp-vsl .bp-vsl-cta a { color: #fff !important; } /* O CTA da metodologia foi reaproveitado dentro do #bp-personas, e leva junto o `.gradient-vermelho`. Nesta build NENHUMA regra bate nessa classe -- o degradê dela nunca existiu aqui -- mas o elemento herda `-webkit-text-fill-color: transparent` do pai, entao o texto ficava INVISIVEL. Pinta explícito, sem degradê: gradiente claro de vermelho sobre branco reprova contraste, e aqui é texto pequeno. */ #bp-personas .gradient-vermelho, #bp-personas .gradient-vermelho * { color: #c81e1e !important; -webkit-text-fill-color: #c81e1e !important; background-image: none !important; } /* texto em degradê: as versões claras (#93baff/#cee0ff) somem no branco */ :is(#sobre, #bp-personas, #bp-vs-intro, #metodologia, #bp-suapropria-wrap, #bp-social-proof, #bp-comparativo, #bp-oferta, #bp-faq-section, #bp-final-cta, #bp-sill-footer) :is(.gradient-azul, .gradient-azul3, .gradient-azul6, .gradient-azul22, .grandient-azul9) { background-image: linear-gradient(90deg, var(--v2-azul-esc), var(--v2-azul)) !important; } /* Títulos em degradê com classe hasheada do Elementor (não têm .gradient-*). Aqui NÃO dá pra trocar o degradê: o recorte está num filho, e pintar o wrapper vira uma barra azul atrás do texto. Então desliga o degradê e pinta a letra direto. */ .elementor-element-31fa26d, .elementor-element-31fa26d *, .elementor-element-fa9e6ee, .elementor-element-fa9e6ee *, .elementor-element-dd7c2a2, .elementor-element-dd7c2a2 * { background-image: none !important; -webkit-text-fill-color: currentColor !important; } .elementor-element-fa9e6ee, .elementor-element-fa9e6ee *, .elementor-element-dd7c2a2, .elementor-element-dd7c2a2 * { color: var(--v2-azul) !important; } .elementor-element-31fa26d, .elementor-element-31fa26d * { color: var(--v2-ink-3) !important; } /* a marca d'água "SPL®" do rodapé usa color:transparent (e não text-fill-color), então o override genérico de cor a deixava preta sólida */ #bp-sill-footer .bp-sf-bigtext { color: transparent !important; background-image: linear-gradient(180deg, rgba(16, 18, 21, 0.13), rgba(16, 18, 21, 0.03)) !important; } /* -------------------------------------------------- metodologia Os cards de conexão e o kicker ficaram pra trás: o kicker tem recorte de degradê (fill transparente → sumia no branco) e os cards têm fundo escuro translúcido, o que deixava texto escuro sobre escuro. */ #metodologia .elementor-element-aeb492f, #metodologia .elementor-element-aeb492f .elementor-heading-title, #metodologia .gradient-vermelho, #metodologia .card-conexao.ativo .card-titulo, #metodologia .card-conexao-v2.ativo .card-titulo { -webkit-text-fill-color: currentColor !important; background-image: none !important; } #metodologia .elementor-element-aeb492f, #metodologia .elementor-element-aeb492f * { color: var(--v2-azul) !important; } #metodologia .card-conexao, #metodologia .card-conexao-v2 { background: var(--v2-bg-2) !important; border-color: var(--v2-line) !important; } #metodologia .card-titulo, #metodologia .card-titulo .elementor-heading-title { color: var(--v2-ink) !important; -webkit-text-fill-color: currentColor !important; } #metodologia .card-conexao.ativo, #metodologia .card-conexao-v2.ativo { background: #eef2f8 !important; border-color: rgba(37, 99, 207, 0.3) !important; } #metodologia .card-conexao.ativo .card-titulo, #metodologia .card-conexao-v2.ativo .card-titulo { color: var(--v2-azul) !important; } /* -------------------------------------------------- bordas e cartões Os cartões usam `background:` shorthand com degradê escuro, então sobrescrever só `background-color` não adianta. */ #bp-social-proof .bp-sp-slide, #bp-social-proof .bp-sp-wa-shell, #bp-faq-section .bp-faq-item { background: var(--v2-bg-2) !important; border-color: var(--v2-line) !important; box-shadow: 0 6px 20px rgba(16, 18, 21, 0.06) !important; } #bp-faq-section .bp-faq-item.bp-faq-active { background: #eef2f8 !important; } /* -------------------------------------------------- cartão de personas INTOCADO DE PROPÓSITO. O design original (degradê escuro + a arte de brilho `features-card-bg.webp` em mix-blend-mode:screen) fica exatamente como veio — o tema claro não mexe em nada aqui. Só é preciso devolver as cores de texto, que a regra genérica de "texto escuro em seção clara" tinha clareado. */ #bp-personas .bp-p-card .bp-p-title, #bp-personas .bp-p-card .bp-p-title * { color: #fff !important; } /* #a3a3a3 sobre o card escuro dava 4,45:1 -- reprova AA por 0,05. #b4b4b4 sobe pra ~5,2 sem mudar a hierarquia visual. */ #bp-personas .bp-p-card .bp-p-desc, #bp-personas .bp-p-card .bp-p-desc * { color: #b4b4b4 !important; } #bp-personas .bp-p-card .bp-p-num { color: #93baff !important; } /* a moldura do logo fica em cima da marca d'água: precisa de fundo sólido e borda definida, senão some dentro dela */ #bp-sill-footer .bp-sf-badge { background: #fff !important; border-color: rgba(16, 18, 21, 0.14) !important; box-shadow: 0 6px 22px rgba(16, 18, 21, 0.12) !important; } #bp-social-proof .bp-sp-placeholder, #bp-transformacao .bp-tf-box { border-color: var(--v2-line-2) !important; } #bp-transformacao .bp-tf-box-row + .bp-tf-box-row { border-top-color: var(--v2-line) !important; } #bp-oferta, #bp-final-cta, #bp-sill-footer { border-top-color: var(--v2-line) !important; } /* ícones desenhados em azul-claro por atributo SVG */ #bp-faq-section .bp-faq-icon line { stroke: var(--v2-azul) !important; } /* O cartão de oferta (.bp-of-frame) não tem nenhuma regra de tema: ele traz a própria paleta escura da LP. Ver a exceção lá em cima. */ /* -------------------------------------------------- botões Mudança mínima: os CTAs eram branco-sobre-preto e sumiriam no fundo claro, então só a cor muda. Forma, tamanho, raio, caixa e espaçamento continuam os do design original — nada de pílula, gradiente ou hover novo. */ /* Só o .bp-fc-btn precisa: no original é branco com texto preto e sumiria no fundo claro. O .bp-of-btn ficou de fora — o cartão de oferta traz o CTA em degradê azul→ciano da própria LP. */ #bp-final-cta .bp-fc-btn { background: var(--v2-azul) !important; border-color: var(--v2-azul) !important; color: #fff !important; } /* Os .elementor-button ficam INTOCADOS: já vêm com cor própria do design original (#7596D1, borda #C5DAFF e glow), que aparece bem no branco. Só o texto precisa ser reafirmado em branco, porque a regra genérica de "texto escuro em seção clara" o escureceria em cima do azul. */ :is(#bp-personas, #bp-comparativo, #metodologia, #bp-social-proof, #bp-suapropria-wrap, #bp-vs-intro) :is(.elementor-button, .elementor-button *) { color: #fff !important; } #bp-final-cta .bp-fc-btn:hover { background: var(--v2-azul-esc) !important; } #bp-final-cta .bp-fc-btn :where(span, svg path) { color: #fff !important; fill: #fff !important; } /* -------------------------------------------------- rodapé */ /* A marca d'água "SPL®" era branca a 16% sobre preto — o mesmo valor em escuro sobre branco fica quase invisível, então sobe pra ~32%. */ #bp-sill-footer .bp-sf-bigtext { background-image: linear-gradient(180deg, rgba(16, 18, 21, 0.32), rgba(16, 18, 21, 0.1)) !important; } #bp-sill-footer .bp-sf-line { background-image: linear-gradient(90deg, transparent, rgba(16, 18, 21, 0.28), transparent) !important; } #bp-sill-footer .bp-sf-badge { border-color: var(--v2-line-2) !important; } /* a logo é forçada pra branca lá em cima; no rodapé claro ela some */ #bp-sill-footer img[src*="logo-spl"], :is(#bp-suapropria-wrap, #metodologia) img[src*="logo-spl"] { filter: brightness(0) !important; } /* -------------------------------------------------- seções com FOTO Restou só o hero. `#bp-estrategias` foi cortada em 18/08, e `#bp-fornecedores` e `#bp-map` deixaram de ter foto de fundo no mesmo dia (viraram blocos de duas colunas `.bp-au`, com a imagem AO LADO do texto em vez de atrás dele — o Vitor: "a imagem de fundo atrapalha a legibilidade"). O degradê escuro destas duas foi desligado: sem foto atrás, ele viraria uma faixa cinza por cima de texto escuro. */ #bp-fornecedores::before, #bp-map::before { content: none !important; } /* faixa do vídeo das máquinas: segue escura (é vídeo em tela cheia), só as pontas passam a morrer no branco */ #bp-video-scroll::before { background: linear-gradient(180deg, #fff 0%, rgba(0, 0, 0, 0.7) 8%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.7) 92%, #fff 100%) !important; } /* o hero segue escuro (a headline vive sobre a foto). O rodapé dele NÃO vira branco: a faixa SPL e o vídeo abaixo são escuros, e o degradê pra branco estava lavando a faixa (ela vivia entre 86% e 97% da altura do hero). A transição pro claro acontece agora no fim da seção do vídeo. */ .hero-section::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.9) 92%, #030714 100%) !important; } /* -------------------------------------------------- menu do topo A barra era `rgba(12,12,12,.88)` com itens brancos e a logo forçada em branco por `filter:invert(1)`. No fundo claro isso some. O botão do menu NÃO é tocado: já tem degradê próprio que funciona no claro. */ .menu-smart, .menu-smart-celular { background-color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(16, 18, 21, 0.1) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 4px 20px rgba(16, 18, 21, 0.06) !important; } /* item ativo mais forte, os outros em cinza médio */ /* Os :not() abaixo se repetem de propósito: a regra genérica soma bastante especificidade, e sem repetir a mesma cadeia as regras de item ativo, hover e Login perdiam pra ela e ficavam cinza. */ :is(.menu-smart, .menu-smart-celular) :is(a, a h2, a span):not(.elementor-button):not(.elementor-button *):not(.bp-menu-cta):not(.bp-menu-login) { color: var(--v2-ink-3) !important; } :is(.menu-smart, .menu-smart-celular) a[href="#inicio"]:not(.elementor-button):not(.bp-menu-cta):not(.bp-menu-login), :is(.menu-smart, .menu-smart-celular) a[href="#inicio"] :is(h2, span):not(.bp-menu-cta):not(.bp-menu-login) { color: var(--v2-ink) !important; } :is(.menu-smart, .menu-smart-celular) a:hover:not(.elementor-button):not(.bp-menu-cta):not(.bp-menu-login), :is(.menu-smart, .menu-smart-celular) a:hover :is(h2, span):not(.bp-menu-cta):not(.bp-menu-login) { color: var(--v2-azul) !important; } /* a logo estava invertida pra branco; na barra clara precisa ser escura */ :is(.menu-smart, .menu-smart-celular) img[src*="logo-spl"] { filter: brightness(0) !important; } /* Login + CTA na linguagem de botão DA PRÓPRIA PÁGINA (a mesma dos .elementor-button: #7596D1, borda #C5DAFF, raio 10px, glow e caixa alta), em escala de menu. Dois botões separados — não a pílula colada da LP. */ /* O wrapper do Elementor tinha largura FIXA (~140px), dimensionada pro botão único que existia antes. Com dois botões (~205px) o segundo vazava pra fora da barra. Solta a largura do wrapper e do container. */ :is(.menu-smart, .menu-smart-celular) :has(> .bp-menu-actions) { width: auto !important; max-width: none !important; flex: 0 0 auto !important; } .bp-menu-actions { display: flex; align-items: center; gap: 10px; width: auto !important; max-width: none !important; flex: 0 0 auto !important; } .bp-menu-login, .bp-menu-cta { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; line-height: 1; padding: 11px 20px; border-radius: 10px; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* secundário: mesma família, versão vazada */ .bp-menu-login { color: #4a5b7d !important; background: transparent; border: 1px solid #c5daff; } .bp-menu-login:hover { background-color: rgba(117, 150, 209, 0.1); } /* primário: idêntico aos botões do corpo da página */ .bp-menu-cta { color: #fff !important; background: #7596d1; border: 1px solid #c5daff; /* o glow é parte da linguagem do botão na página; precisa de !important porque a barra do menu zera box-shadow dos filhos */ box-shadow: 0 0 24px 6px rgba(117, 150, 209, 0.35) !important; } .bp-menu-cta:hover { background-color: #6485c2; box-shadow: 0 0 32px 10px rgba(117, 150, 209, 0.45) !important; } /* Entre 768px e ~980px a barra fica sem folga e os itens de navegação colidiam com os botões. Só encolhe a escala — nada some. */ @media (max-width: 980px) { .bp-menu-actions { gap: 8px; } .bp-menu-login, .bp-menu-cta { font-size: 12px; padding: 9px 13px; letter-spacing: 0.02em; } } /* -------------------------------------------------- barra fixa mobile */ .bp-bottom-cta { background: rgba(255, 255, 255, 0.94) !important; border-top: 1px solid var(--v2-line) !important; } .bp-bottom-cta a { background: var(--v2-azul) !important; color: #fff !important; } .bp-bottom-cta a span { color: #fff !important; }