/* ===================================================================== 04-cabecalho.css Barra do topo e menu de celular Carregado pelo index.html na ordem dos arquivos — a ordem importa para a cascata, entao nao troque os de lugar. ===================================================================== */ /* --------------------------------------------------------------- 5. Cabeçalho --------------------------------------------------------------- */ /* Tema claro: o topo é branco desde o começo — a logo é azul-escura e sumiria sobre o degradê do hero. Ao rolar, só ganha sombra e encolhe. */ .topo { position: fixed; inset: 0 0 auto; z-index: 100; padding: .7rem 0; /* Nada de backdrop-filter aqui: filtro no header cria containing block para os filhos position:fixed (.nav e .nav-fundo) e a gaveta do menu passa a se posicionar dentro da barra, não da tela. */ background: #fff; border-bottom: 1px solid transparent; /* A barra COMECA ESCONDIDA e desce quando a pessoa sai do hero (May, 30/07/2026: "podia aparecer so na hora q vc scrolla pra segunda, meio q ela abaixa suavemente"). No hero ela nao faz falta: a logo agora esta dentro do hero e o card de contato tambem. Assim a primeira tela fica inteira, sem faixa branca comendo o topo. Quem liga e desliga a classe e o `app.js`, por IntersectionObserver no proprio hero — nao por contagem de pixels, que erraria em cada altura de tela diferente. */ transform: translateY(-100%); transition: transform .38s cubic-bezier(.22, .61, .36, 1), box-shadow var(--transicao), padding var(--transicao), border-color var(--transicao); } .topo--visivel { transform: translateY(0); } /* Sem JS a barra tem que aparecer: melhor barra sempre visivel do que navegacao nenhuma. O `app.js` adiciona `js` no ao iniciar. */ html:not(.js) .topo { transform: translateY(0); } .topo--fixo { border-bottom-color: var(--cinza-200); box-shadow: 0 4px 24px rgba(37, 71, 150, .10); padding: .45rem 0; } /* Quem tem "reduzir movimento" ligado no sistema nao ganha o deslize. */ @media (prefers-reduced-motion: reduce) { .topo { transition: box-shadow var(--transicao), padding var(--transicao); } } .topo__conteudo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { display: inline-flex; align-items: center; } .logo:hover { text-decoration: none; } /* Aumentada em 30/07/2026 junto com a do hero (May: logo pequena demais). Era clamp(38px, 5vw, 48px) / clamp(34px, 4.4vw, 42px) ao rolar. O teto de 60px cabe no `scroll-padding-top: 6rem` do `02-base.css`: barra com 60px de logo + .7rem de padding em cima e embaixo da ~82px, ainda abaixo dos 96px reservados — a ancora nao passa a parar embaixo da barra. Se um dia a logo passar de 60px aqui, o `scroll-padding-top` tem que subir junto. */ .logo__img { height: clamp(46px, 6vw, 60px); width: auto; transition: height var(--transicao); } .topo--fixo .logo__img { height: clamp(40px, 5vw, 50px); } /* No rodapé o fundo é escuro: a logo vira 100% branca por filtro, sem depender de um segundo arquivo. */ /* Logo negativa oficial da marca — nada de filtro por cima. */ .rodape__logo { height: 58px; width: auto; margin-bottom: 1rem; } .nav { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 1.9rem); } .nav a { color: var(--cinza-700); font-weight: 600; font-size: .96rem; position: relative; padding: .3rem 0; transition: color var(--transicao); } .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--transicao); } .nav a:hover { text-decoration: none; color: var(--azul-600); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } .nav .btn { padding: .7rem 1.35rem; font-size: .93rem; } .menu-btn { display: none; flex-direction: column; gap: 2px; width: 52px; height: 52px; border: 0; border-radius: 12px; background: var(--azul-50); color: var(--azul-700); place-items: center; } .menu-btn svg { width: 24px; height: 24px; } @media (max-width: 940px) { /* NO CELULAR NAO TEM BARRA DE TOPO (May, 30/07/2026: "deixa um site livre pra deslizar com o botao do whats flutuante"). A barra era `position: fixed` e comia uma faixa da tela em TODAS as 12 telas de 100vh — num aparelho pequeno isso e caro. E o menu nao faz falta: a pagina e uma rolagem linear e cada tela traz o proprio botao verde. Quem conduz e o WhatsApp flutuante, que fica na tela inteira a rolagem. O `.nav`, o `.menu-btn` e a cortina `.nav-fundo` vivem dentro do `.topo`, entao saem junto — nao fica botao de menu orfao. */ .topo { display: none; } /* Sem barra fixa, o vao reservado para ela nao faz mais sentido: com 6rem, o link de ancora parava com um vazio grande acima do alvo. */ html { scroll-padding-top: 1rem; } .menu-btn { display: grid; } .nav { position: fixed; z-index: 101; /* acima da cortina (99), senão o toque não chega no link */ inset: 0 0 0 auto; width: min(82vw, 330px); flex-direction: column; align-items: stretch; justify-content: center; gap: .35rem; padding: 2rem 1.75rem; background: var(--branco); box-shadow: -20px 0 60px rgba(16, 20, 92, .22); transform: translateX(100%); transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .nav[data-aberto='true'] { transform: translateX(0); visibility: visible; } .nav:not([data-aberto='true']) { visibility: hidden; } .nav a { color: var(--cinza-900); font-size: 1.1rem; padding: .85rem 0; border-bottom: 1px solid var(--cinza-200); } .nav a::after { display: none; } .nav .btn { margin-top: 1.25rem; } .nav-fundo { position: fixed; inset: 0; background: rgba(14, 17, 48, .5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--transicao); z-index: 99; } .nav-fundo[data-aberto='true'] { opacity: 1; pointer-events: auto; } }