/* Menu fixo no topo */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; padding: 16px 24px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* A barra de admin do WP também é fixa no topo (top: 0) - sem isso, ela fica sobreposta com a nossa navbar em vez de empurrá-la pra baixo. */ body.admin-bar .navbar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .navbar { top: 46px; } } /* Abaixo de 600px o próprio WordPress muda #wpadminbar de "fixed" pra "absolute" e mesmo assim continua reservando 46px de margem no (pensada originalmente pra compensar uma barra fixa). Como a barra virou absolute sem ancestral posicionado, ela nasce deslocada por essa margem - sobra um vão vazio de 46px no topo real da página e a barra só aparece depois dele. Zeramos a margem aqui (nosso CSS carrega depois do inline do WP, então "ganha" o empate de !important) pra barra voltar a ocupar o topo de verdade; a partir daí a regra de 46px logo acima já basta pra navbar ficar colada embaixo dela. Confirmado via Chrome real (getBoundingClientRect) antes de escrever esta regra. */ @media screen and (max-width: 600px) { html { margin-top: 0 !important; } } /* Versão pequena do logo (o grande, na home, é dimensionado por home.css) */ .navbar-logo { display: flex; align-items: center; } .navbar-logo .site-logo { height: 78px; width: auto; opacity: 1; } .navbar-logo .site-logo--svg { aspect-ratio: 1064.2 / 764.41; } #primary-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0; padding: 0; } /* Botão de menu hambúrguer, escondido no desktop - só aparece no lugar do menu abaixo do breakpoint mobile (ver media query no fim do arquivo). */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 100%; height: 2px; background: white; border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span:nth-child(2) { opacity: 0; } .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .navbar li { list-style: none; } .navbar a { color: white; text-decoration: none; font-family: system-ui, sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: .02em; opacity: .85; transition: opacity .2s; } .navbar a:hover { opacity: 1; } .navbar .social-links { display: flex; align-items: center; gap: 14px; padding-left: 20px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.2); } /* Endereço, exibido só dentro do dropdown do menu mobile, acima dos ícones sociais existentes (ver media query abaixo). No desktop fica escondido. */ .nav-mobile-address { display: none; margin: 0; color: white; font-family: system-ui, sans-serif; font-size: .8rem; text-align: center; opacity: .85; text-transform: none; } /* Rodapé, no mesmo estilo do menu */ /* Logo do rodapé (mesma técnica de máscara SVG do logo pequeno da navbar) */ .footer-logo .site-logo { height: 52px; width: auto; opacity: 1; } .footer-logo .site-logo--svg { aspect-ratio: 1064.2 / 764.41; } .footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 24px 28px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.1); color: white; font-family: system-ui, sans-serif; text-align: center; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; } .footer-links li { list-style: none; } .footer-links a { color: white; text-decoration: none; font-size: .9rem; font-weight: 600; opacity: .85; transition: opacity .2s; } .footer-links a:hover { opacity: 1; } .footer .social-links { display: flex; align-items: center; gap: 14px; } .footer-address { font-size: .8rem; color: rgba(255, 255, 255, 0.7); text-transform: none; } .footer-copy { font-size: .75rem; color: rgba(255, 255, 255, 0.55); text-transform: none; } /* Abaixo de 640px o menu de links vira um dropdown acionado pelo botão hambúrguer, que ocupa exatamente o lugar central onde o menu ficava. Os ícones sociais continuam exibidos como estão, sem mudança. */ @media screen and (max-width: 639px) { .nav-toggle { display: flex; } #primary-menu { display: none; flex-direction: column; align-items: center; width: 100%; gap: 16px; padding: 20px 0 4px; } #primary-menu.is-open { display: flex; } /* Ao abrir, força o endereço pra sua própria linha (largura total), empurrando os ícones sociais existentes pra linha seguinte - sem duplicar nada, é a mesma lista de sempre só que reposicionada. */ #primary-menu.is-open ~ .nav-mobile-address { display: block; width: 100%; padding: 4px 0 0; } #primary-menu.is-open ~ .social-links { padding-left: 0; margin-left: 0; border-left: none; } } /* Ícones sociais, usados tanto na navbar quanto no rodapé */ .social-links { list-style: none; } .social-links svg { width: 18px; height: 18px; fill: white; }