/* ========================================================================== Site institucional do Renave Total — folha PRÓPRIA (frente `site-institucional`). 🔴 ESTA FOLHA VIVE FORA DO VITE, em `public/site-assets/`, e é isso que torna IMPOSSÍVEL — não improvável — a colisão com o CSS do painel. As duas nunca carregam no mesmo documento: a página do site é standalone e não usa `@vite`. Consequência prática: `npm run build` NÃO alcança este arquivo (é o que o deploy precisa saber) e nada daqui vaza para o sistema. 🔴 NADA DE TERCEIROS: sem Bootstrap, sem jQuery, sem Google Fonts. O tema BeSmart dos exemplos serviu de REFERÊNCIA VISUAL e não foi copiado — a licença dele é por produto final e não há confirmação de que cubra o Renave Total. Pilha de fonte nativa: zero requisição, zero licença. As cores são as do sistema (`resources/css/app.css`), copiadas como literais porque esta folha não tem acesso ao `@theme` do Tailwind. ========================================================================== */ :root { --marca-50: #f0f2fc; --marca-100: #e4e6f9; --marca-600: #5766da; --marca-700: #4253d5; --marca-900: #2a3484; --faixa-1: #233c4a; --faixa-2: #253a5a; --faixa-3: #2a2a46; --tinta: #2f394e; --suave: #6c757d; --borda: #dee2e6; --fundo: #f2f5f7; --sucesso: #1ecab8; --perigo: #f93b7a; /* 🔴 A ALTURA DO CABEÇALHO FIXO (prompt-525). Ela já existia como o número 76 repetido em QUATRO lugares — a altura da barra, o `scroll-padding-top`, o recuo do hero e o `inset` do menu no celular. ⚠️ Extraída para cá porque a compensação das páginas de texto passou a precisar dela: número mágico copiado quebra quando o cabeçalho mudar, e aí o título volta a sair cortado sem ninguém relacionar as duas coisas. 🛑 O VALOR NÃO MUDOU. */ --altura-topo: 76px; /* 🔴 O VERDE DA SEÇÃO DE BENEFÍCIOS É DERIVADO DO VERDE DO LOGO, E O TOM FOI MEDIDO (`site-institucional-10`). O verde do próprio logo — o cluster dominante é `#008C24` — dá **4,40:1** contra branco: REPROVA o AA de texto normal por um fio. `--verde` é ele escurecido no MESMO matiz (135,4° → 135°): **7,86:1** contra branco. ⚠️ O TEXTO MAIS CLARO DESTA SEÇÃO É O SUBTÍTULO, A **82%** DE OPACIDADE — **5,85:1**, e é ele que manda. (Uma versão anterior deste comentário dizia "72%, 4,90:1": a opacidade não existe em regra nenhuma da folha, e o número era mais pessimista que a realidade. Medido no DOM renderizado, não lido daqui.) O item da lista vem a 88% (**6,49:1**). Nada aqui é escolha de olho. */ --verde: #0b5f20; --verde-marca: #8fe9a3; /* os ✓ da lista — 5,37:1 sobre `--verde` */ /* Cinza escuro do bloco de contato final (11,51:1 com branco). É neutro de propósito: a faixa ao lado dele é a `--marca-700`, e duas cores fortes seguidas competiriam entre si. */ --grafite: #343a40; --raio: 10px; --sombra: 0 10px 30px rgba(35, 60, 74, .10); --largura: 1140px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--altura-topo); } body { margin: 0; background: #fff; color: var(--tinta); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--marca-700); } .envelope { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; } .secao { padding: 72px 0; } .secao--clara { background: var(--fundo); } .secao--escura { background: linear-gradient(135deg, var(--faixa-1), var(--faixa-2) 55%, var(--faixa-3)); color: #fff; } /* A cor primária da marca, atrás do formulário do topo (`site-institucional-10` §6). */ .secao--marca { background: var(--marca-700); color: #fff; } .secao--verde { background: var(--verde); color: #fff; } .secao--grafite { background: var(--grafite); color: #fff; } .titulo-secao { font-size: 2rem; line-height: 1.25; margin: 0 0 8px; font-weight: 700; } .subtitulo-secao { color: var(--suave); margin: 0 0 32px; max-width: 780px; } .secao--escura .subtitulo-secao, .secao--marca .subtitulo-secao, .secao--verde .subtitulo-secao, .secao--grafite .subtitulo-secao { color: rgba(255, 255, 255, .82); } .secao--centrada { text-align: center; } .secao--centrada .subtitulo-secao { margin-left: auto; margin-right: auto; } .cabecalho-secao { margin-bottom: 40px; } /* Os dois botões no topo da seção de diferenciais (`site-institucional-12` §2) — onde o `.docx` os coloca e onde a referência põe o dela. Envolvem para não espremer no celular. */ .acoes-topo { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 0 34px; } /* 🔴 A ALTURA É A DA REFERÊNCIA, E ELA FOI MEDIDA NO FONTE DO WIDGET OFICIAL, não estimada de olho (`site-institucional-13` §2). O botão de lá é o "Message us" do WhatsApp em `size=compact`: `padding: 8px 13px`, ícone de 24px, `line-height: 0`, borda de 1px — **42px** de altura. O nosso `.botao` genérico dá 47px, e era essa a diferença que se via. 🔴 O ESCOPO É `.acoes-topo`, DE PROPÓSITO: `.botao` também veste o CTA do topo fixo, os do formulário e os do rodapé — mexer nele encolheria a página inteira, que é justamente o que a rodada não pode fazer. ⚠️ E os DOIS botões desta seção entram na regra, não só o verde: o §2 pede que fiquem da mesma altura, lado a lado. ⚠️ `min-height`, não `height`: numa tela estreita o texto do CTA quebra em duas linhas, e uma altura fixa o cortaria. Em desktop os dois medem 42px — é o que o teste de comparação afere. */ .acoes-topo .botao { min-height: 42px; padding: 8px 20px; font-size: .92rem; } /* ------------------------------------------- marcador linha–estrela–linha */ /* 🔴 COPIADO DA REFERÊNCIA, NÃO REDESENHADO (`site-institucional-12` §4). A receita é a do `.separator_wrapper` da landing do Aviso de Venda, medida no CSS dela: dois pseudo-elementos de **60×1px** ladeando a estrela, `inline-block` + `vertical-align: middle`. ⚠️ O que muda é só a COR — lá é o azul-piscina `#34b1c4`, aqui é a cor da marca, porque a estrela é um elemento de identidade e copiar a cor do outro produto seria copiar a marca dele. ⚠️ A estrela é SVG inline (não temos fonte de ícone, e não vamos carregar uma por um glifo). */ .separador { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 18px; } .separador::before, .separador::after { content: ""; width: 60px; height: 1px; background: var(--marca-600); flex: none; } .separador svg { display: block; color: var(--marca-600); flex: none; } .secao--escura .separador::before, .secao--escura .separador::after, .secao--grafite .separador::before, .secao--grafite .separador::after { background: rgba(255, 255, 255, .45); } .secao--escura .separador svg, .secao--grafite .separador svg { color: #fff; } /* ------------------------------------------------ faixa de números (§1) */ /* 🔴 O ÍCONE É O DA REFERÊNCIA, RECORTADO DO PNG DELA (`site-institucional-13` §1) — o que REVOGA os desenhos de traço simples que a rodada 12 pôs aqui. Na referência esta faixa são TRÊS PNGs (`APR_imagens_site_aviso_de_venda_16/17/18.png`, 465×197) com o ícone à esquerda e o texto CRAVADO NO PIXEL à direita. Veio só a metade da esquerda: o texto continua em HTML, porque dizer em imagem não se corrige, não se traduz e não se lê em leitor de tela — e estes dois números são justamente os que o Fabricio ainda vai conferir. ⚠️ ESTES TRÊS NÃO USAM `currentColor`, ao contrário dos outros ícones da página: são raster, e o cinza é o do pixel original — a cor de lá, sem retoque. Isso amarra a faixa a um fundo CLARO (`--fundo`, #f2f5f7): num fundo tingido o cinza sumiria, e não haveria como corrigi-lo pelo CSS. */ .faixa-numeros { background: var(--fundo); padding: 34px 0; } .faixa-numeros__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .faixa-numeros__item { display: flex; align-items: center; gap: 18px; justify-content: center; } .faixa-numeros__icone { flex: none; } .faixa-numeros__icone img { display: block; } .faixa-numeros__texto { color: #9aa4ad; font-size: .95rem; line-height: 1.35; } .faixa-numeros__forte { display: block; color: #7d868f; font-weight: 700; font-size: 1.28rem; } /* --------------------------------- blocos centrados com ícone preenchido (§2) */ /* 🔴 COPIADO DA REFERÊNCIA: quadrado PREENCHIDO na cor da marca, cantos arredondados, glifo branco dentro, centralizado — e o título e o texto ABAIXO dele. ⚠️ SEM CARD: sem fundo branco, sem borda, sem sombra. Era exatamente isso que a rodada anterior tinha reinterpretado como cartão. */ .blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; } /* ⚠️ A CAIXA É A DE LÁ, MEDIDA NO CSS DA REFERÊNCIA (`.features-icon`): glifo de 42px com `padding: 18px 22px` e `border-radius: 8px` — 86×78, não o quadrado de 84×84 que eu tinha estimado. A COR continua sendo a da marca, e não o azul-piscina de lá: a cor é identidade do outro produto, e o §1 da rodada 13 fala dos ÍCONES (ver o cabeçalho do partial). */ .bloco__icone { padding: 18px 22px; border-radius: 8px; background: var(--marca-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 25px; } .bloco__titulo { font-size: 1.12rem; font-weight: 700; margin: 0 0 10px; color: var(--tinta); } .bloco__texto { margin: 0; color: var(--suave); font-size: .96rem; } /* --------------------------- os sete blocos: ícone à ESQUERDA, texto à direita (§3) */ /* 🔴 COPIADO DA REFERÊNCIA (`.services-item`): ícone à esquerda em posição absoluta, texto com recuo à direita, fileiras de três, SEM CARD. A medida do recuo é a de lá (`padding-left: 60px` sobre um ícone de 70px de caixa). Hoje eram cartões brancos com o ícone em cima — errado. */ .servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; text-align: left; } /* ⚠️ AS TRÊS MEDIDAS SÃO AS DE LÁ, agora que o ícone também é (`site-institucional-13` §1): caixa de 70px, glifo de 48px e recuo de 60px. Os 62px que estavam aqui eram ajuste ao ícone de 30px que eu tinha desenhado — com o desenho real, o número da referência é o que fecha. */ .servico { position: relative; padding-left: 60px; } .servico__icone { position: absolute; left: 0; top: 5px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: var(--marca-600); } .servico__titulo { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--tinta); } .servico__texto { margin: 0; color: var(--suave); font-size: .95rem; } /* ------------------------------------------- revelação progressiva (§3) */ /* 🔴🔴 O ESTADO ESCONDIDO SÓ EXISTE DEPOIS QUE O JS ASSUME — e essa inversão é o ponto. A referência usa WOW.js, que manda `opacity: 0` na FOLHA e conta com o script para desfazer: sem JS, o conteúdo fica invisível PARA SEMPRE. Aqui é ao contrário — os blocos nascem visíveis, e é o `js-revelar` (posto pelo próprio script, na inicialização) que liga o esconde-e-revela. Sem JS, nada some. É a mesma regra do carrossel (p476): o realce nunca vira requisito. ⚠️ `prefers-reduced-motion` desliga a animação inteira — e vale para ESTA seção e para o carrossel, não só para ele: um fade disparado por rolagem é precisamente o que essa preferência existe para calar. */ .js-revelar .servico { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .js-revelar .servico.revelado { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-revelar .servico { opacity: 1; transform: none; transition: none; } .carrossel__trilho { scroll-behavior: auto; } } /* -------------------------------------------------------------- topo fixo */ .topo { position: fixed; inset: 0 0 auto 0; z-index: 30; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--borda); backdrop-filter: blur(6px); } .topo__linha { display: flex; align-items: center; gap: 16px; height: var(--altura-topo); } .topo__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 700; } .topo__marca img { height: 38px; width: auto; } .topo__menu { margin-left: auto; display: flex; align-items: center; gap: 22px; } .topo__menu a { color: var(--tinta); text-decoration: none; font-size: .95rem; font-weight: 500; } .topo__menu a:hover { color: var(--marca-700); } /* 🔴 O BOTÃO DENTRO DO MENU PRECISA VENCER A COR DOS LINKS DO MENU — medido por CDP, não por olho. `.topo__menu a` (0,2,0) tem especificidade MAIOR que `.botao--principal` (0,1,0), então o CTA do topo herdava a cor de link: fundo azul com texto `--tinta` dava contraste **2.38** em repouso, e no `:hover` o texto virava `--marca-700` — a MESMA cor do fundo, contraste **1.00**: o texto sumia por completo. Estas duas linhas são o conserto, e a especificidade delas é deliberada. */ .topo__menu a.botao--principal, .topo__menu a.botao--principal:hover { color: #fff; } .topo__menu a.botao--principal:hover { background: var(--marca-700); } .topo__alternar { display: none; margin-left: auto; background: none; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--tinta); } /* ------------------------------------------------------------------ botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--raio); border: 1px solid transparent; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .botao--principal { background: var(--marca-600); color: #fff; } .botao--principal:hover { background: var(--marca-700); } .botao--claro { background: #fff; color: var(--marca-700); } .botao--claro:hover { background: var(--marca-50); } .botao--contorno { border-color: currentColor; color: inherit; background: transparent; } /* 🔴 O VERDE ESCURECEU PARA O TEXTO PODER SER BRANCO (`site-institucional-13` §2), e isto REVOGA o texto escuro que estava aqui. A referência usa o widget oficial "Message us" do WhatsApp, que pinta branco sobre `#25d366`: **1,98:1** — reprova AA e é pouco legível de verdade, não por formalidade. Copiar aquilo seria copiar um defeito. ⚠️ O TOM NÃO FOI ESCOLHIDO NO OLHO: é o próprio `#25d366` escurecido no MESMO matiz (142,4°) e na mesma saturação (0,702) — só a luminosidade desce. Continua lendo-se como o verde do WhatsApp, e o branco passa: repouso #15793b → 5,48:1 com #fff hover #115f2e → 7,78:1 com #fff ⚠️ O alvo é 4,5:1, não 3:1: o texto é 15px/600, que NÃO é "texto grande" pela régua do WCAG. ⚠️ Existe uma saída oficial (o widget aceita `color="teal"`, `#075E54`, 7,67:1), mas ela troca o verde por um azul-esverdeado escuro — o §2 pede escurecer o verde, mantendo a cara de WhatsApp. */ .botao--zap { background: #15793b; color: #fff; } .botao--zap:hover { background: #115f2e; color: #fff; } .botao--bloco { width: 100%; } /* -------------------------------------------------------------------- hero */ .hero { margin-top: var(--altura-topo); position: relative; color: #fff; overflow: hidden; background: #1d2733 url('../img/hero.webp') right center / cover no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(29, 39, 51, .96) 42%, rgba(29, 39, 51, .35) 72%, rgba(29, 39, 51, .1)); } .hero__conteudo { position: relative; z-index: 1; max-width: 620px; padding: 96px 0 104px; } .hero__titulo { font-size: 2.6rem; line-height: 1.15; font-weight: 800; margin: 0 0 18px; } .hero__texto { color: rgba(255, 255, 255, .86); margin: 0 0 14px; } .hero__numero { font-weight: 700; color: #fff; } .hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } /* ------------------------------------------------------------- duas colunas */ .duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .duas-colunas img { border-radius: var(--raio); box-shadow: var(--sombra); } /* --------------------------------------------------------- características */ .cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px 24px; box-shadow: var(--sombra); } .cartao__icone { width: 46px; height: 46px; border-radius: 12px; background: var(--marca-50); color: var(--marca-700); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .cartao__titulo { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .02em; } .cartao__texto { margin: 0; color: var(--suave); font-size: .96rem; } /* --------------------------------------------------------------- benefícios */ .beneficios { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; } .beneficios li { display: flex; gap: 12px; align-items: flex-start; } .beneficios__marca { color: var(--verde-marca); font-weight: 700; flex: none; line-height: 1.65; } .beneficios strong { color: #fff; } .beneficios span:last-child { color: rgba(255, 255, 255, .88); } /* ------------------------------------------------------------- depoimentos */ /* 🔴 O CARROSSEL FUNCIONA SEM JS, E ISSO É REQUISITO (p476). O trilho é um contêiner com `overflow-x: auto` + `scroll-snap`: arrastar já navega, sem uma linha de script. Os pontos são ÂNCORAS (``), não `