/* ========================================================================== marcha-shell-claro.css — skin CLARA do header e do rodapé O shell (marcha-shell.js + marcha-shell.css) monta header e rodapé em runtime, no tema escuro. Este arquivo é a variação clara: rodapé branco, logo escuro, CTA em creme, dropdowns claros. COMO USAR 1. (pode somar com outras classes) 2. carregar ESTE arquivo DEPOIS de marcha-shell.css Usado hoje por: /premiacoes/ e /duvidas-frequentes/ (e subpáginas da central). Os !important daqui existem porque o shell já usa !important no tema escuro — não é preferência, é o mínimo para vencer a regra que carrega antes. ========================================================================== */ /* Tokens da skin. Ficam AQUI e não no :root da página, senão a skin só funciona onde alguém lembrou de declarar — foi exatamente o que quebrou na primeira tentativa de reusar isto fora do /premiacoes/. */ body.shell-claro { --rosa: #FF2D8A; --lima: #DFFF00; /* secundaria OFICIAL da marca (2026-08-07) */ --creme: #FAF5EB; --branco: #FFFFFF; --preto: #2A2A2A; } /* ===== SKIN CLARA — header e rodapé (conteúdo do shell intocado) ===== */ /* faixa de aviso do topo: lima -> rosa */ body.shell-claro .marcha-shared-revenue-banner { background:var(--rosa) !important; color:var(--creme) !important; } body.shell-claro .marcha-shared-revenue-banner a, body.shell-claro .marcha-shared-revenue-banner b, body.shell-claro .marcha-shared-revenue-banner strong { color:var(--creme) !important; border-color:rgba(250,245,235,.6) !important; } /* header */ body.shell-claro .mnav { background:rgba(250,245,235,.92) !important; backdrop-filter:blur(14px); border-bottom:1px solid rgba(42,42,42,.08); } body.shell-claro .mnav-bar a, body.shell-claro .mnav-trigger { position:relative; transition:color .18s ease; } body.shell-claro .mnav-bar > .mnav-links a:hover, body.shell-claro .mnav-trigger:hover { color:var(--rosa) !important; } body.shell-claro .mnav-links > a::after, body.shell-claro .mnav-trigger::after { content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--rosa); transition:right .22s ease; } body.shell-claro .mnav-links > a:hover::after { right:0; } body.shell-claro .mnav a[href*="register"] { background:var(--rosa) !important; color:var(--creme) !important; border-radius:12px !important; transition:transform .15s ease, box-shadow .15s ease; } body.shell-claro .mnav a[href*="register"]:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,45,138,.35); } /* Painel: card flutuante, arredondado, com sombra — o formato original. Em 2026-08-07 isto virou por um tempo uma faixa full-bleed no modelo da wise.com/br. Foi revertido no mesmo dia: para sangrar de ponta a ponta o painel precisa de .mnav-dd { position: static }, e ai os tres paineis passam a ocupar o mesmo retangulo em vez de um sob cada botao. Painel empilhado sobre painel faz o menu trocar de aba sozinho, e o vao entre o botao e a faixa fazia o menu fechar no meio do caminho do mouse. O card por botao nao tem nenhum dos dois problemas. */ body.shell-claro .mnav-panel { background:var(--creme) !important; border-radius:16px !important; border:1px solid rgba(42,42,42,.08) !important; box-shadow:0 24px 60px rgba(42,42,42,.16) !important; } body.shell-claro .mnav-col-title { color:var(--rosa) !important; letter-spacing:.14em !important; font-size:12px !important; } body.shell-claro .mnav-item:hover .mnav-item-label { color:var(--rosa) !important; } /* cta pre-footer: com o CTA em creme o lima volta a ser o primario (preto sobre lima e o par de maior contraste da marca; rosa fica no hover) */ body.shell-claro .marcha-footer-cta a[href*="register"], body.shell-claro .marcha-footer-cta .b1, body.shell-claro .marcha-footer-cta a[style*="DFFF00"] { background:var(--lima) !important; color:var(--preto) !important; } body.shell-claro .marcha-footer-cta a[href*="register"]:hover, body.shell-claro .marcha-footer-cta a[href*="register"]:focus-visible { background:var(--rosa) !important; color:var(--creme) !important; } body.shell-claro .marcha-footer-cta [class*="eyebrow"], body.shell-claro .marcha-footer-cta p[class*="eyebrow"] { color:rgba(42,42,42,.68) !important; } /* ===== RODAPE BRANCO — premiacao ===== creme (CTA) -> branco (rodape) -> wordmark gigante fechando. Escopo body.shell-claro: o resto do site segue escuro. */ /* -- faixa de CTA: de preto para creme -- */ body.shell-claro .marcha-footer-cta { background: var(--creme) !important; color: var(--preto) !important; border-bottom: 1px solid rgba(42,42,42,.12) !important; } body.shell-claro .marcha-footer-cta h2 { color: var(--preto) !important; } body.shell-claro .marcha-footer-cta .pricing-eyebrow { color: rgba(42,42,42,.68) !important; } body.shell-claro .marcha-footer-cta .pricing-container > p:not(.pricing-eyebrow) { color: rgba(42,42,42,.66) !important; } body.shell-claro .marcha-footer-cta .pricing-button { border: 1px solid rgba(42,42,42,.3) !important; color: var(--preto) !important; border-radius: 12px !important; font-weight: 500 !important; } /* primario em lima: preto sobre lima e o par de maior contraste da marca */ body.shell-claro .marcha-footer-cta .pricing-button-primary { border-color: var(--lima) !important; background: var(--lima) !important; color: var(--preto) !important; } body.shell-claro .marcha-footer-cta .pricing-button:hover, body.shell-claro .marcha-footer-cta .pricing-button:focus-visible { border-color: var(--rosa) !important; background: var(--rosa) !important; color: var(--creme) !important; } /* -- corpo do rodape -- */ body.shell-claro .marcha-final-footer { position: relative; overflow: hidden; background: var(--branco) !important; color: var(--preto) !important; padding: clamp(52px, 6vw, 78px) 0 clamp(56px, 6vw, 84px) !important; } /* tira o filete rosa antigo */ body.shell-claro .marcha-final-footer::before { content: none; } /* a tarja das 6 placas foi removida a pedido — o rodape abre direto no logo */ body.shell-claro .marcha-final-footer .pricing-footer-inner { padding-top: 0 !important; } /* logo do topo: versao escura (a clara some no branco) */ body.shell-claro .marcha-final-footer .pricing-footer-brand img { filter: none !important; } /* logo do rodape: o mesmo arquivo do head. Feito em CSS porque o markup e compartilhado com as paginas de rodape escuro, que precisam da versao clara. */ body.shell-claro .marcha-final-footer .pricing-footer-brand { background: url('/marcas/marcha-logo-escuro.png?v=logo-20260808') no-repeat left center / contain; } body.shell-claro .marcha-final-footer .pricing-footer-brand img { visibility: hidden; } /* colunas */ body.shell-claro .marcha-final-footer h2, body.shell-claro .marcha-final-footer h3, body.shell-claro .marcha-final-footer h4, body.shell-claro .marcha-final-footer [class*="col-title"] { text-transform: uppercase; letter-spacing: .16em !important; font-size: 11.5px !important; color: rgba(42,42,42,.4) !important; font-weight: 500 !important; margin-bottom: 18px !important; } body.shell-claro .marcha-final-footer .pricing-footer-columns > div { padding-left: 22px; border-left: 1px solid rgba(42,42,42,.1); } body.shell-claro .marcha-final-footer .pricing-footer-columns > div:first-child { padding-left: 0; border-left: 0; } /* so cor no hover: o padding-left de 5px empurrava o link para a direita e reflowava a coluna inteira a cada passada de mouse. 2026-08-14. */ body.shell-claro .marcha-final-footer .pricing-footer-columns a { color: rgba(42,42,42,.72) !important; transition: color .16s ease; } body.shell-claro .marcha-final-footer .pricing-footer-columns a:hover { color: var(--rosa) !important; } body.shell-claro .marcha-final-footer .pricing-footer-contact strong { color: var(--preto) !important; } body.shell-claro .marcha-final-footer .pricing-footer-contact span { color: rgba(42,42,42,.5) !important; } body.shell-claro .marcha-final-footer .pricing-footer-phone { color: var(--rosa) !important; } /* apps + selos */ body.shell-claro .marcha-final-footer .pricing-footer-apps { border-top: 1px solid rgba(42,42,42,.12) !important; } body.shell-claro .marcha-final-footer .pricing-app-links strong { color: var(--preto) !important; } body.shell-claro .marcha-final-footer .pricing-trust { background: none; border: 0; padding: 0; } body.shell-claro .marcha-final-footer .pricing-aws { color: rgba(42,42,42,.62) !important; } /* redes sociais */ /* mesma regra dos links: no hover muda so a cor, sem mover o elemento */ body.shell-claro .marcha-final-footer .msoc { background: rgba(42,42,42,.06) !important; color: var(--preto) !important; transition: background .16s ease, color .16s ease; } body.shell-claro .marcha-final-footer .msoc:hover { background: var(--rosa) !important; color: var(--creme) !important; } body.shell-claro .marcha-final-footer .msoc:hover svg, body.shell-claro .marcha-final-footer .msoc:hover path { fill: currentColor !important; } /* base legal */ body.shell-claro .marcha-final-footer .pricing-copyright { color: rgba(42,42,42,.55) !important; } body.shell-claro .marcha-final-footer .pricing-footer-legal { color: rgba(42,42,42,.68) !important; } body.shell-claro .marcha-final-footer .pricing-footer-legal .pricing-footer-company { color: rgba(42,42,42,.6) !important; } body.shell-claro .marcha-final-footer .pricing-footer-company strong { color: rgba(42,42,42,.8) !important; } /* mapa claro das classes novas do rodape (modelo azify) */ body.shell-claro .marcha-final-footer h2 { color: rgba(42,42,42,.95) !important; font-size:14px !important; font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; } body.shell-claro .marcha-final-footer .pricing-footer-columns a { color: rgba(42,42,42,.6) !important; } body.shell-claro .marcha-final-footer .pricing-footer-contact strong { color: rgba(42,42,42,.95) !important; } body.shell-claro .marcha-final-footer .pricing-footer-phone { color: rgba(42,42,42,.6) !important; } body.shell-claro .marcha-final-footer .pricing-footer-phone:hover { color: var(--rosa) !important; } body.shell-claro .marcha-final-footer .pricing-footer-legal { border-top-color: rgba(42,42,42,.12) !important; } body.shell-claro .marcha-final-footer .pricing-footer-canais a { color: rgba(42,42,42,.62) !important; } body.shell-claro .marcha-final-footer .pricing-footer-canais a:hover { color: var(--rosa) !important; } body.shell-claro .marcha-final-footer .pricing-footer-selos { border-top-color: rgba(42,42,42,.12) !important; } body.shell-claro .marcha-final-footer .pricing-selos-label { color: rgba(42,42,42,.42) !important; } body.shell-claro .marcha-final-footer .pricing-footer-selos .pricing-aws { color: rgba(42,42,42,.62) !important; } body.shell-claro .marcha-final-footer .pricing-footer-contact a { color: rgba(42,42,42,.6) !important; } /* especificidade pesada p/ vencer o shell (carrega depois) */ html body.shell-claro aside.pricing-revenue-banner.marcha-shared-revenue-banner { background:var(--rosa) !important; color:var(--creme) !important; } html body.shell-claro aside.pricing-revenue-banner a, html body.shell-claro aside.pricing-revenue-banner strong, html body.shell-claro aside.pricing-revenue-banner b { color:var(--creme) !important; border-color:rgba(250,245,235,.65) !important; } /* O #__mnav aqui e obrigatorio, nao e exagero de seletor. marcha-shell.css pinta o botao de lima em: html.marcha-global-shell #__mnav .mnav-signup -> (0,1,2,1), com id Sem um id do nosso lado, qualquer quantidade de classe perde: um id vence todas elas. Era por isso que existia um