/* ========================================================================== detalhes.rauberconsorcio.css Ajustes específicos do site da Rauber sobre a base da agência. As regras abaixo vieram do bloco do simulador, resgatadas do padrao.css (folha do site da Midas Consórcios) antes dele sair do . ========================================================================== */ .botao-1 { border-radius: 30px; font-weight: 600; background-color: #cd1719; color: #414755; font-size: 1rem; } .botao-1.cor-2 { background: var(--gold) !important; color: var(--gold-foreground) !important; } .icone-input-form { background-color: #cd1719; color: #414755; width: 47px; height: 40px; font-family: Fontawesome, sans-serif; font-size: 22px; } .icone-input-form.cor-1 { background-color: #cd1719 !important; } .icone-input-form.valor { font-weight: 100; font-size: 24px; } .div-form-conversor { border-radius: 25px; padding: 24px 15px; width: 100%; } .div-simulador-slide { right: 10.5vw; top:110px; } input.botao-1.w-button.cor-1 { background-color: #cd1719 !important; color: #414755; } ========================================================================== */ /* ========================================================================== Simulador — markup Webflow da Midas, paleta Rauber -------------------------------------------------------------------------- Regras trazidas de midasconsorcios.com.br/css/midas.css (export Webflow) e recoloridas para os tokens deste arquivo. O HTML do simulador está escrito direto nas páginas, exatamente como veio da Midas — este bloco não presume nenhuma classe ou atributo além dos que estão lá. Três coisas que o CSS resolve porque o markup, sozinho, não resolveria: 1. .div-simulador-slide era `position: absolute` sobre o slider da home da Midas (top/bottom 0, right 5vw, width 22%). Na Rauber o simulador é uma coluna normal do grid, então vale aqui a variante estática que a própria Midas usava no responsivo. 2. As
.icone-simulador e .icone-input-form estão vazias no markup, e a Midas as preenchia com um caractere da fonte "Fontawesome". Como não há caractere nenhum, os glifos entram por ::before, na fonte do Font Awesome 6 que as páginas já carregam. Se um dia o rótulo de uma aba mudar, o seletor correspondente aqui embaixo precisa acompanhar. 3. O rótulo flutuante era uma interação do Webflow (IX2). Sem o webflow.js quem faz o efeito é o CSS, no par :focus / :not(:placeholder-shown) — daí a .placeholder-transparente, que esconde o placeholder nativo. Os seletores genéricos (.input, .label-input, .tabs-menu, .w-*) ficam escopados no simulador de propósito: `.input` também é usado pelo formulário de contato.html, que não deve herdar este visual. ========================================================================== */ /* --- Base do Webflow que o markup pressupõe ------------------------------ */ .div-form-conversor .w-inline-block { max-width: 100%; display: inline-block; } .div-form-conversor .w-tab-content { position: relative; display: block; overflow: hidden; } .div-form-conversor .w-tab-pane { position: relative; display: none; } .div-form-conversor .w-tab-pane.w--tab-active { display: block; } /* --- Caixa do simulador -------------------------------------------------- */ .div-simulador-slide { z-index: 10; width: auto; display: block; position: relative; /* zera o deslocamento que a folha da Midas aplicava quando o bloco flutuava sobre o slider da home (top: 110px / right: 10.5vw) */ top: auto; right: auto; } .div-form-conversor { z-index: 10; background-color: var(--card); color: var(--primary); text-align: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px 18px; position: relative; box-shadow: var(--shadow-elegant); } .div-form-conversor h3 { color: var(--primary); font-size: 22px; line-height: 1.2; margin: 0 0 18px; } .div-form-conversor .fonte-cor-1 { color: var(--primary); text-align: left; font-size: 13px; font-weight: 700; margin: 0 0 10px; } /* --- Abas ---------------------------------------------------------------- */ .div-form-conversor .tabs-menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 18px; } .opcao-simulador { flex: 1 1 28%; border: 1px solid var(--gold); border-radius: 6px; color: var(--gold); text-align: center; background-color: transparent; padding: 8px 4px 6px; transition: color 0.2s, background-color 0.2s; } .opcao-simulador:hover { background-color: rgba(205, 23, 25, 0.08); } .opcao-simulador.w--current { background-color: var(--gold); color: var(--gold-foreground); } .opcao-simulador:focus-visible { outline: 3px solid var(--focus, #1d6fe0); outline-offset: 2px; } .icone-simulador { display: block; margin-bottom: 4px; font-size: 22px; line-height: 1; } /* Glifos das abas: as
vêm vazias do markup (ver nota 2 no topo) */ .icone-simulador::before, .icone-input-form::before { font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif; font-weight: 900; font-style: normal; display: inline-block; } .opcao-simulador[data-w-tab="Consórcio Imóveis"] .icone-simulador::before { content: "\f015"; /* fa-house */ } .opcao-simulador[data-w-tab="Consórcio Veículos"] .icone-simulador::before { content: "\f1b9"; /* fa-car */ } .opcao-simulador[data-w-tab="Consórcio Investimento"] .icone-simulador::before { content: "\f201"; /* fa-chart-line */ } .titulo-tab-simulador { margin-top: 4px; font-size: 0.82rem; line-height: 1; font-weight: 600; } /* --- Campos -------------------------------------------------------------- */ .bloco-dados-envio { margin-top: 14px; margin-bottom: 15px; } .div-input-simulador { z-index: 1; display: flex; align-items: center; text-align: right; background-color: var(--card); border: 1px solid var(--border); border-radius: 18px 6px 6px 18px; margin-bottom: 12px; padding: 5px 10px 5px 0; position: relative; } .icone-input-form { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; align-self: center; width: 35px; height: 35px; border-radius: 100px; background-color: var(--gold); color: var(--gold-foreground); text-align: center; font-size: 17px; line-height: 1; transform: translate(-5px); } /* Glifo de cada campo. O markup não distingue nome/telefone/e-mail além da ordem, então a posição dentro de .bloco-dados-envio é o que resta. */ .icone-input-form.valor::before { content: "\f81d"; /* fa-sack-dollar */ } .bloco-dados-envio > .div-input-simulador:nth-of-type(1) .icone-input-form::before { content: "\f007"; /* fa-user */ } .bloco-dados-envio > .div-input-simulador:nth-of-type(2) .icone-input-form::before { content: "\f095"; /* fa-phone */ } .bloco-dados-envio > .div-input-simulador:nth-of-type(3) .icone-input-form::before { content: "\f0e0"; /* fa-envelope */ } .div-input-simulador .input { flex: 1 1 auto; min-width: 0; height: auto; margin-bottom: 0; padding: 6px 0; border-style: none none solid; border-width: 1px; border-color: transparent transparent var(--border); background-color: transparent; color: var(--foreground); font-size: 1em; text-align: left; } .div-input-simulador .input:focus { outline: 0; border-bottom-color: var(--gold); } .div-input-simulador .input.placeholder-transparente::placeholder { color: transparent; } /* --- Rótulo flutuante (substitui a interação IX2 do Webflow) ------------- */ .div-input-simulador .label-input { z-index: -1; transform-origin: 0 0; text-align: left; margin-bottom: 0; color: var(--muted); font-weight: 400; font-size: 14px; pointer-events: none; transition: color 0.2s, transform 0.2s; position: absolute; top: 15px; bottom: auto; left: 40px; right: auto; } .div-input-simulador .input:focus + .label-efeito-simulador, .div-input-simulador .input:not(:placeholder-shown) + .label-efeito-simulador { transform: translateY(-13px) scale(0.75); color: var(--gold); } @media (prefers-reduced-motion: reduce) { .div-input-simulador .label-input { transition: none; } } /* --- Botão --------------------------------------------------------------- */ .botao-1 { display: block; width: 100%; border: 1px solid var(--gold); border-radius: 6px; background-color: var(--gold); color: var(--gold-foreground); text-align: center; padding: 12px 14px; font-weight: 700; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; } .botao-1:hover { background-color: var(--card); color: var(--gold); } /* Armadilha para robô: precisa existir no DOM e nunca aparecer */ .div-form-conversor .input-oculto { display: none !important; } /* Mensagens de retorno do Webflow: só aparecem quando o JS as mostra */ .div-form-conversor .w-form-done, .div-form-conversor .w-form-fail { display: none; } /* ========================================================================== CORES DA RAUBER SOBRE O padrao.css O padrao.css vem do site da Midas e traz a paleta dela (verde #1d3128 / #17261f, dourado #d7b55d, verde-água do WhatsApp #00b2a8). Este arquivo carrega por último, então aqui as variáveis e as cores fixas da Midas são trocadas pela identidade da HS/Rauber definida no rauberconsorcio.css. ========================================================================== */ :root { /* Variáveis que o padrao.css define com as cores da Midas */ --cor-1: #CD1719; /* Midas #1d3128 -> vermelho HS */ --cor-2: #2f333d; /* Midas #17261f -> grafite HS */ --fonte-cor-1: #ffffff; --fonte-cor-2: #414755; /* Midas #000000 -> texto HS */ --gold: #CD1719; /* Midas #d7b55d -> vermelho HS */ --gold-foreground: #ffffff; /* Midas #1d3128 -> branco */ /* Os botões de WhatsApp da Rauber usam o verde-água escuro #078a76 — que na Midas é o --whatsapp-verde-escuro, e lá veste só o chat flutuante. Como ele passa a ser a cor de base, o tom escuro desce para o #027664, que é o próprio hover da Midas, senão hover e repouso ficariam iguais. */ --whatsapp-verde: #078a76; /* Midas #00b2a8 -> verde-água escuro */ --whatsapp-verde-escuro: #027664; --whatsapp-verde-texto: #ffffff; --cinza: #414755; --cinza-claro: #dfe2e7; --gainsboro: #EEEEEE; --branco: #ffffff; /* Variáveis usadas pelas regras do simulador acima e que nenhum arquivo definia mais (vinham do padrao.css antigo) */ --card: #ffffff; --primary: #414755; --primary-dark: #2f333d; --foreground: #414755; --muted: #6b7280; --secondary: #f6f7f9; --danger: #9C1C21; --shadow-card: 0 10px 30px -12px rgba(65, 71, 85, 0.28); --shadow-elegant: 0 24px 60px -20px rgba(65, 71, 85, 0.42); } /* Cores fixas (sem variável) que o padrao.css escreve com a paleta da Midas */ .div-produto { border-color: rgba(65, 71, 85, 0.15); box-shadow: 0 12px 40px rgba(24, 28, 36, 0.18); } .div-produto:hover { box-shadow: 0 5px 30px rgba(24, 28, 36, 0.12); } .icone-input-form, .icone-input-form.cor-1 { background-color: #CD1719 !important; color: #ffffff; } input.botao-1.w-button.cor-1 { background-color: #CD1719 !important; color: #ffffff; } .div-form-conversor { box-shadow: var(--shadow-elegant); } /* ========================================================================== VITRINE DE PLANOS — PADRÃO MIDAS O HTML dos cards vem de ferramentas/gerar-planos.py e usa as classes do site da Midas, que o css/padrao.css estiliza. O que falta é o que o padrao.css deixou de fora por não estar na folha de referência: os glifos que o markup espera de CSS, o ajuste das duas camadas de conversão e as cores da Rauber onde a Midas escreveu a dela. ========================================================================== */ /* --- Card ---------------------------------------------------------------- */ /* A foto do card hoje é o banner do segmento, deitado. Centralizar o corte evita perder o assunto, que nesses arquivos fica à direita. */ .imagem-produto { object-position: center; } /* O detalhes.acaoweb.css carrega depois do padrao.css e devolve o card para 5px. Os 20px sao os da Midas, e as duas camadas de conversao que cobrem o card ja usam esse raio. */ .div-produto { border-radius: 20px; } /* O título do card é h3 (a seção é h2), então carrega a margem de h3 */ .div-produto-texto .titulo-maiusculas-2 { margin-top: 0; font-family: var(--font-body); letter-spacing: .04em; color: var(--muted); } .div-produto .preco-produto { margin-bottom: 4px; font-family: var(--font-head); color: var(--cor-1); } .div-produto .paragrafo-1 { font-size: 14px; color: var(--muted); } .botao-consulta-whatsapp-2 { padding: 10px 14px; color: var(--whatsapp-verde-texto); font-weight: 600; text-decoration: none; } .botao-consulta-whatsapp-2:hover { color: var(--whatsapp-verde); } /* Linha incompleta: com space-between, dois cards sozinhos iriam para as pontas da seção. O gerador marca essas linhas com .alinhamento-esquerdo. */ .div-flex-horizontal.filhos.alinhamento-esquerdo { gap: 0 1.3333%; } /* --- Camadas de conversão sobre o card ----------------------------------- */ /* Os dois blocos cobrem o card inteiro (inset: 0). Precisam do mesmo arredondamento, e de rolagem própria quando o formulário passa da altura do card — sem isso o botão Simular fica fora do alcance no celular. */ .div-form-conversao, .bloco-conversao-whatsapp { border-radius: 20px; overflow-y: auto; } .div-form-conversao { justify-content: flex-start; padding: 26px 12px 12px; } .div-form-conversao .div-borda { display: block; width: 100%; border-color: rgba(255, 255, 255, 0.28); } .div-form-conversao .bloco-dados-envio { margin-top: 8px; } /* O rótulo flutuante precisa de contraste sobre a pastilha branca */ .div-form-conversao .div-input-simulador { border-radius: 8px; padding-left: 0; } .aviso-lgpd { margin: 10px 0 0; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, 0.82); } .aviso-lgpd a { color: #fff; text-decoration: underline; } .bloco-conversao-whatsapp .div-padding-10 { width: 100%; padding: 26px 14px 14px; } .bloco-conversao-whatsapp .w-input { width: 100%; margin-bottom: 8px; padding: 9px 10px; border: 0; border-radius: 6px; background: #fff; color: var(--foreground); font-size: 14px; } .bloco-conversao-whatsapp .branco { margin-bottom: 10px; font-size: 14px; line-height: 1.3; } .bloco-conversao-whatsapp .paragrafo-erro { margin-top: 8px; color: #fff; font-size: 12px; } /* Retorno do Webflow: só aparece quando o JavaScript mostra */ .div-form-conversao .w-form-done, .div-form-conversao .w-form-fail, .bloco-conversao-whatsapp .w-form-done, .bloco-conversao-whatsapp .w-form-fail { display: none; } /* --- Glifos que o markup espera de CSS ----------------------------------- */ /* O markup da Midas traz vazio: o X vem daqui. */ .botao-fechar::before { content: "\f00d"; font-family: Fontawesome, Fontawesome7, sans-serif; font-size: 13px; } /* O botão de WhatsApp da Midas usa uma imagem de fundo que este site não tem. Fica o glifo da fonte de ícones, que já está local. */ .botao-whatsapp { background-image: none; padding: 10px 14px; /* Mesma cor de texto do .btn--whats, pelo token. */ color: var(--whatsapp-verde-texto); font-weight: 700; } .botao-whatsapp:hover { color: var(--whatsapp-verde-texto); } .botao-whatsapp::before { content: "\f232"; margin-right: 8px; font-family: Fontawesome, Fontawesome7, sans-serif; font-weight: 400; } /* --- Celular ------------------------------------------------------------- */ @media screen and (max-width: 479px) { .div-form-conversao, .bloco-conversao-whatsapp { padding-top: 22px; } .aviso-lgpd { font-size: 10px; } } /* ========================================================================== RODAPÉ — PADRÃO MIDAS (#secao-rodape) Mesmo HTML da Midas; as regras de base vêm do padrao.css (link-rodape, titulo-rodape, link-icone). Aqui fica o que a folha da Midas não traz. ========================================================================== */ /* Nas telas em que as colunas quebram em duas linhas, sem isto o fim de uma coluna encosta no título da de baixo. */ #secao-rodape .div-flex-horizontal { row-gap: 32px; } #secao-rodape .titulo-rodape { font-size: 1.15rem; } #secao-rodape .link-rodape { text-decoration: none; font-size: 15px; line-height: 1.45; } #secao-rodape a.link-rodape:hover { text-decoration: underline; } #secao-rodape .imagem-logo { display: block; width: 150px; height: auto; } #secao-rodape .link-icone.redes-sociais { text-decoration: none; font-size: 24px; } /* E-mail longo não pode estourar a coluna no celular */ #secao-rodape a[href^="mailto:"] { overflow-wrap: anywhere; } /* ========================================================================== Slider da home — altura vem do slide, não do contêiner -------------------------------------------------------------------------- detalhes.acaoweb.css fixa .slider em height: 90vh (70vh até 991px), herança do slider Webflow da agência. Como aqui quem define a altura é o .slide (min-height: 90vh, em rauberconsorcio.css), o contêiner volta a ser auto — senão o slide de 90vh estouraria os 70vh do mobile e sobraria faixa escura quando a viewport fosse alta. Esta folha carrega por último, então basta a mesma especificidade. ========================================================================== */ .slider { height: auto; } /* ========================================================================== Chat flutuante do WhatsApp — Rauber sobre o padrao.css -------------------------------------------------------------------------- O bloco .secao-chat-whatsapp-cookie-2 veio inteiro da Midas e está no padrao.css como lá. Quatro coisas não servem para este site: 1. Lá a barra divide a largura da tela com o aviso de cookies, por isso o `space-between`. Aqui o botão está sozinho e iria para a esquerda. 2. A barra ocupa 100% da largura em posição fixa. Sem `pointer-events`, ela engoliria todo clique na faixa inferior da tela, em todas as páginas — inclusive nos links do rodapé. 3. A cor de base é a mesma da Midas (#078a76), mas lá ela está escrita como var(--whatsapp-verde-escuro), que aqui vale #027664. Por isso o fundo é reapontado para var(--whatsapp-verde). O texto branco e o hover #027664 do padrao.css valem como estão. 4. Até 479px a Midas transforma o botão numa barra de largura total. Aqui ele segue sendo uma pílula no canto, como era o botão flutuante antigo. Para voltar ao comportamento da Midas, basta apagar o bloco do @media abaixo. ========================================================================== */ .secao-chat-whatsapp-cookie-2 { justify-content: flex-end; /* até 991px o padrao.css vira `flex-direction: column`; sem isto o bloco esticaria na largura toda */ align-items: flex-end; pointer-events: none; } .bloco-whatsapp-2 { justify-content: flex-end; } .whatsapp-botao-verde { pointer-events: auto; background-color: var(--whatsapp-verde); } @media screen and (max-width: 479px) { .bloco-whatsapp-2 { width: auto; display: flex; } } /* ========================================================================== Assinatura da agência — Rauber sobre o padrao.css -------------------------------------------------------------------------- A Midas reserva de 70 a 120px de folga embaixo do .div-acao. Aquilo não é respiro: é o que impede a assinatura de encostar no botão de WhatsApp, que na folha original pintava por baixo dela. A causa foi corrigida no padrao.css, onde o chat passou a ter z-index 2300 — então a folga perdeu a função e aqui ela é zerada, senão sobraria uma faixa branca vazia no fim de todas as páginas. No celular a folga fica: ali a pílula e a assinatura disputam o mesmo lugar na tela, e é melhor que o botão flutue ao lado do bloco do que sobre ele. ========================================================================== */ .div-acao { margin-bottom: 0; } @media screen and (max-width: 767px) { .div-acao { margin-bottom: 70px; } } /* ========================================================================== Simulador sobre o banner — home e páginas do menu Consórcio -------------------------------------------------------------------------- Na home e nas cinco páginas do menu Consórcio o .div-simulador-slide flutua sobre o banner, encostado na direita, como na Midas. O gancho é o modificador .secao-slides--simulador, e não o .secao-slides sozinho: investimento.html também tem o simulador dentro do banner, mas ali ele é uma coluna normal do grid, ao lado do texto. Sem o modificador, a regra o arrancaria do fluxo e o banner daquela página colapsaria. Quem ancora o absoluto é o .secao-slides, que tem position: relative pelo detalhes.acaoweb.css — na home, o .slider, que também é relative. O corte em 992px acompanha o do padrao.css: daí para baixo a caixa volta a ser um bloco comum, agora dentro do slider. ========================================================================== */ @media screen and (min-width: 992px) { .secao-slides--simulador .div-simulador-slide { position: absolute; top: 0; bottom: 0; left: auto; /* Encosta na margem do .container, e não num vw solto como na Midas: assim o simulador alinha com o conteúdo das outras seções. */ right: max(var(--sp-4), (100% - var(--container)) / 2); z-index: 20; width: 24%; min-width: 340px; display: flex; align-items: center; justify-content: flex-end; } /* Sem o teto, o texto do banner corre por baixo da caixa entre 992 e 1300px, onde a coluna da esquerda ainda caberia nos 40rem. */ .secao-slides--simulador .slide-content { max-width: min(40rem, 52%); } /* A seta "próximo" ficaria atrás do simulador. O max() repete a largura real da caixa: 24%, nunca menos que os 340px do min-width. */ .slider .slider-btn--next { right: calc(max(var(--sp-4), (100% - var(--container)) / 2) + max(24%, 340px) + var(--sp-3)); } } /* Abaixo de 992px a caixa é um bloco comum dentro do slider, sobre o fundo escuro — precisa de respiro nas bordas. */ @media screen and (max-width: 991px) { .secao-slides--simulador .div-simulador-slide { padding: var(--sp-5) var(--sp-4) var(--sp-6); } } /* ========================================================================== Banner das páginas do menu Consórcio — Rauber sobre o padrao.css -------------------------------------------------------------------------- Duas diferenças em relação à AJ: 1. Altura. Na AJ o slide herda os 90vh do .slider, porque lá ele é um slide do Webflow dentro do carrossel. Aqui o banner é único e estático, então a altura vem dele mesmo — os 70vh pedidos para estas páginas. 2. Gutter lateral. A AJ usa `padding: 35px 5vw` porque o texto dela é uma caixa absoluta. Aqui dentro vive o .container do site, que já tem a própria margem e o teto de 1180px; somar os 5vw estreitaria o banner em relação a todas as outras seções da página. ========================================================================== */ .slide-gradiente { display: flex; align-items: center; /* Fundo escuro por baixo: o gradiente do style é semitransparente, e as páginas sem foto ficariam com texto branco sobre o branco da página. */ background-color: var(--bg-ink); /* A AJ usa `padding: 35px 5vw`. O respiro vertical aqui é o que o banner das páginas internas já tinha; o lateral fica com o .container, que tem a própria margem e o teto de 1180px — somar os 5vw estreitaria o banner em relação a todas as outras seções. */ padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem); padding-inline: 0; } .slide-gradiente > .container { width: 100%; } /* Banner alto — só as cinco páginas do menu Consórcio. Sem o modificador o banner tem a altura do conteúdo, que é o certo para sobre, contato, política, contempladas e investimento: ali o .container tem só título e uma linha de apoio, e 70vh viraria faixa escura quase vazia. */ .slide-gradiente--alto { min-height: 70vh; } /* ========================================================================== Seção de contato — rótulo flutuante sobre o campo da Rauber -------------------------------------------------------------------------- O markup da Midas esconde o placeholder (.placeholder-transparente) e põe o rótulo por cima do campo, com `z-index: -1`. Lá aquilo funciona porque o .input da Midas é transparente, com uma linha embaixo: o texto aparece através dele. Aqui não. O .input da Rauber é caixa branca com borda inteira, e carrega por último — o rótulo atrás dela some, e o campo fica em branco. Por isso o rótulo sobe para cima do campo, com `pointer-events: none` para o clique continuar chegando no input, e o campo ganha respiro no topo para caber o rótulo encolhido depois que a pessoa começa a escrever. Mesmo par :focus / :not(:placeholder-shown) que o simulador usa — sem JavaScript, como no resto do site. ========================================================================== */ .div-input .input { padding-top: 1.4rem; padding-bottom: 0.4rem; } .div-input .input.text-area { min-height: 120px; padding-top: 1.6rem; } .div-input .label-input { position: absolute; top: 13px; left: 15px; right: auto; bottom: auto; z-index: 2; margin-bottom: 0; transform-origin: 0 0; color: var(--muted); font-size: var(--fs-base); font-weight: 400; text-align: left; pointer-events: none; transition: color .2s ease, transform .2s ease; } .div-input .input:focus + .label-input, .div-input .input:not(:placeholder-shown) + .label-input { transform: translateY(-10px) scale(.75); color: var(--brand); } @media (prefers-reduced-motion: reduce) { .div-input .label-input { transition: none; } } /* ========================================================================== Menu — Rauber sobre o padrao.css -------------------------------------------------------------------------- O bloco veio inteiro da Midas, inclusive o comportamento (js/acaoweb.js). Lá a barra é escura com links brancos; aqui o cabeçalho é branco, grudado no topo, com link escuro e CTA vermelho — é o visual que o site já tinha, e é isto que as regras abaixo devolvem. A barra de contatos do topo é a única novidade visual: no lugar do fundo escuro da Midas ela fica no vermelho da marca, que é onde o .cor-1 do markup já aponta. ========================================================================== */ .secao-menu-2 { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); } /* A Midas estica o menu de borda a borda; aqui as duas linhas seguem a mesma coluna de 1180px do resto do site. O .w-nav-menu do components.css é `float: right`, de quando o Webflow ainda montava a barra com float. Junto do flex, ele tira o nav do fluxo e os links passam por cima do logo — por isso o float é zerado aqui. */ .bloco-sup, .secao-menu-2 .menu > .div-flex-horizontal { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); align-items: center; flex-wrap: nowrap; gap: var(--sp-4); } .secao-menu-2 .w-nav-menu { float: none; } /* A faixa de contatos herda o vermelho do .cor-1 no markup; a linha do menu volta a ser branca, como era o .site-header. */ .secao-menu-2 .menu { background-color: #fff; } /* A faixa de contatos do topo fica oculta: o bloco continua no HTML, como manda o padrão, mas não aparece no site. Para trazê-la de volta, é só remover o display. */ .bloco-sup { display: none; gap: var(--sp-5); font-size: var(--fs-xs); } .link-contatos-superior { text-decoration: none; } .link-contatos-superior:hover { text-decoration: underline; } /* Os dois logos, no mesmo tamanho do lockup anterior. */ .div-logos { width: auto; gap: var(--sp-3); } .div-logos .imagem-logo { width: auto; height: 34px; } .link-logo-3 .imagem-logo { height: 26px; } .link-logo.margem-direita-10 { margin-left: 0; } /* Links: escuros sobre o branco, vermelho no hover e na página atual. */ .link-menu, .link-menu.select-menu { /* O padrao.css usa `padding: 15px 0 5px`, herdado da Midas. Sem fundo isso não aparece, mas a pílula da página atual revela a assimetria: sobram 18px acima do texto e 9px abaixo. Simétrico, o texto centraliza na pílula e a altura da barra não muda. */ padding-block: 10px; color: var(--hs-ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; /* sem isto, "Cartas Contempladas" quebra em duas linhas e desalinha a barra */ white-space: nowrap; } .link-menu:hover, .link-menu.w--current { color: var(--brand); border-bottom-color: var(--brand); } .menu-flex { gap: var(--sp-5); justify-content: flex-end; } /* Dropdown branco, como o do cabeçalho anterior — o .cor-1 do markup o deixaria vermelho. */ .dropdown-list.cor-1 { /* O !important não é capricho: o detalhes.acaoweb.css declara `.cor-1 { background-color: var(--cor-1) !important }`, e sem empatar a arma o painel sai vermelho. O `cor-1` fica no markup porque é o padrão da Midas; quem decide a cor aqui é esta folha. */ background-color: #fff !important; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-2); min-width: 15rem; } .dropdown-list .fonte-branco { color: var(--hs-ink); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; } .dropdown-list .fonte-branco:hover { background: var(--bg-alt); color: var(--brand); } /* O CTA do menu é o vermelho da marca, não o grafite do .cor-2. */ .menu-flex .botao-1.cor-2 { /* o .botao-1 do padrao.css é `width: 100%`, feito para botão de card */ flex: 0 0 auto; width: auto; border-color: var(--brand); background-color: var(--brand); color: #fff; border-radius: var(--radius-pill); padding: 0.6rem 1.2rem; font-size: var(--fs-sm); font-weight: 700; } .menu-flex .botao-1.cor-2:hover { background-color: var(--brand-dark); color: #fff; } /* Sanduíche: o Webflow o mostra até 991px. */ .botao-menu { color: var(--hs-ink); } @media screen and (max-width: 991px) { .menu-flex { background-color: #fff; border-top: 1px solid var(--border); gap: 0; padding: var(--sp-3) var(--sp-4) var(--sp-5); } .link-menu { text-align: left; font-size: var(--fs-base); border-bottom: 1px solid var(--hs-gray-200); } .dropdown-list.cor-1 { box-shadow: none; border: 0; padding-left: var(--sp-3); } .menu-flex .botao-1.cor-2 { margin-top: var(--sp-4); text-align: center; } } /* ========================================================================== Menu — detalhes que o cabeçalho anterior tinha -------------------------------------------------------------------------- O bloco da Midas é mais enxuto que o .site-header que ele substituiu. As regras abaixo devolvem o que se perdeu na troca: a altura da barra, o traço entre os logos, o destaque do Investimento, a pílula da página atual e a seta do dropdown no lugar certo. ========================================================================== */ /* A barra tinha 72px; sem isto ela encolhe para a altura do texto. */ .secao-menu-2 .menu > .div-flex-horizontal { min-height: var(--header-h); } /* Traço entre o logo da HS e o da Rauber. */ .div-logos .link-logo { border-left: 1px solid var(--border); padding-left: var(--sp-3); } /* Investimento em destaque, como era o .nav-link--feature. O seletor é pelo href para não precisar de classe extra no arquivo padrão. */ .link-menu[href="investimento.html"] { color: var(--brand); border: 1.5px solid var(--brand); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-inline: var(--sp-1); } .link-menu[href="investimento.html"]::before { content: "\f201"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .35rem; } .link-menu[href="investimento.html"]:hover { background: var(--brand); color: #fff; border-color: var(--brand); } /* Página atual: a pílula rosa do menu anterior. O w--current é o Webflow que aplica. */ .link-menu.w--current { background: var(--hs-red-soft); border-radius: var(--radius-sm); padding-inline: 0.75rem; border-bottom-color: transparent; } /* A seta do dropdown é absoluta no components.css, com 40px de recuo à direita — sobra buraco depois de "Consórcio" e a seta desencontra. Aqui ela volta a ser um item em linha. */ .link-menu.select-menu { display: flex; align-items: center; gap: var(--sp-2); padding-right: 0; } .secao-menu-2 .icone-dropdown { position: static; margin: 0; width: auto; height: auto; font-size: .7rem; } .dropdown-menu { margin-inline: 0; } /* Os ícones dos itens do dropdown são injetados pelo main.js — o arquivo padrão é o markup da Midas, que não os prevê. Ficam no vermelho da marca, como no menu anterior. */ .dropdown-list .fonte-branco .fa-solid { width: 1.1em; color: var(--brand); font-size: 1em; } .dropdown-list .fonte-branco:hover .fa-solid { color: var(--brand-dark); }