/* Aprumo — navegação compartilhada pelas 7 páginas públicas. Existe para que header e rodapé sejam UM só: até 2026-08-20 cada CSS de página carregava a sua própria regra de responsivo, e as quatro cópias divergiram — landing/proposito/intelligence cortavam a nav em 767px e as legais em 560px, todas com `display:none` e nenhum menu no lugar. No celular o site ficava sem navegação: sobrava só o "Entrar". Este arquivo é a única autoridade sobre esse recorte; os CSS de página não redeclaram nada daqui. Tokens (cores, fontes) vêm de /css/tokens.css — consumir var(--...). */ /* O gatilho só existe no recorte estreito; no largo a nav é a barra inteira. */ .nav-trigger{display:none} /* ===== Recorte estreito: a nav vira painel revelado pelo gatilho ===== O breakpoint é 767px para TODAS as páginas (as legais usavam 560px). */ @media (max-width:767px){ /* Sem JS não há quem abra o painel, então a nav continua visível e quebra linha. `js-nav` entra em /js/theme-init.js, que é bloqueante no : o recorte já vale no primeiro paint e não há salto. A barra TEM de crescer junto. Todo CSS de página crava `height` no `.site-head .wrap` (62px na landing, 60px nas legais); com a nav quebrando em três fileiras a 360px isso dava 112px de conteúdo dentro de 62px de caixa — a nav começava acima do topo da barra e vazava 24px por cima do texto da página. Medido com JS desligado antes de existir esta regra. Aqui a altura passa a ser o que o conteúdo pedir, e as fileiras ganham respiro vertical próprio. */ html:not(.js-nav) .site-head .wrap{ height:auto;min-height:0;flex-wrap:wrap; padding-top:11px;padding-bottom:11px;row-gap:10px; } html:not(.js-nav) .site-nav{flex-wrap:wrap;justify-content:flex-end;gap:10px 16px} .js-nav .nav-trigger{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border:1px solid var(--line);border-radius:999px; background:transparent;color:var(--ink);cursor:pointer; font-family:inherit;font-size:14px;font-weight:600;line-height:1; transition:border-color .15s ease,background .15s ease; } .js-nav .nav-trigger:hover{border-color:var(--line-strong)} .js-nav .nav-trigger[aria-expanded="true"]{ background:var(--accent-wash);border-color:var(--accent);color:var(--accent); } .nav-trigger__icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* A barra passa a ser o contexto de posicionamento do painel. */ .js-nav .site-head .wrap{position:relative} .js-nav .site-nav{ display:none; position:absolute;top:calc(100% + 8px);right:0;left:0; flex-direction:column;align-items:stretch;gap:2px; padding:10px;border:1px solid var(--line);border-radius:14px; background:var(--bg);box-shadow:0 24px 48px -24px rgba(0,0,0,.45); /* O painel tem de caber na tela que sobra abaixo da barra. Sem teto ele simplesmente transborda: como e absoluto dentro de um cabecalho sticky, o que passa da dobra nao entra em rolagem nenhuma e fica inalcancavel. Medido antes desta regra, com o celular deitado: a 667x375 o alternador de tema ficava 22px fora da tela, e a 568x320, 77px. O `100%` aqui resolve contra a altura do `.wrap`, que e a propria altura da barra (62px na landing, 60px nas legais) e e definida — entao a conta acompanha as duas sem cravar numero. `dvh` cobre a barra do navegador movel que o `vh` ignora, com `vh` de reserva para quem nao tem `dvh`. */ max-height:calc(100vh - 100% - 20px); max-height:calc(100dvh - 100% - 20px); overflow-y:auto;overscroll-behavior:contain; } .js-nav .site-nav[data-open="true"]{display:flex} .js-nav .site-nav > a{ opacity:1;padding:12px 12px;border-radius:9px;font-size:16px; } .js-nav .site-nav > a:hover{background:var(--accent-wash)} .js-nav .site-nav > a[aria-current="page"]{color:var(--accent)} /* O CTA mantém o desenho de pílula, mas ocupa a linha inteira do painel. */ .js-nav .site-nav .entrar{ margin-top:6px;text-align:center;padding:13px 19px;border-radius:999px; } .js-nav .site-nav .theme-toggle{ align-self:flex-start;margin-top:10px; } } /* ===== Rodapé — mesma forma nas 7 páginas ===== O `.wrap` do rodapé é flex com wrap nos dois sistemas (landing e legal); sem base 100% a linha de copyright disputaria a faixa com os links em vez de assentar embaixo. Era o que a antiga `.foot-nota` fazia, e a regra volta aqui porque agora o rodapé é o mesmo nas sete páginas. */ .site-foot .foot-legal{ flex-basis:100%;margin:0; font-size:.78rem;color:var(--muted);letter-spacing:.01em; }