/* Layout: header, navegação, footer - Elevate Solutions */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid transparent; box-shadow: none; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: var(--neutral-200); box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } /* Logo passou de ícone+texto (spans .logo-word/.part-1/.part-2) para uma única imagem (lockup.png, do projeto de marca sua-empresa-os) - pedido do utilizador para usar o ativo de marca real em vez de recriar o texto em HTML. Só altura fixa: width:auto preserva a proporção real do PNG (672x156), em vez de arriscar distorcer esticando para um tamanho quadrado como o ícone antigo. */ /* Ajuste ótico vertical (pedido do utilizador: alinhar o logo com o texto do menu/botão) - o PNG (672x156) não tem o "peso" centrado no canvas: o ícone+"Elevate" ocupa y 0-104 (o resto, y 105-155, é o "Solutions" mais pequeno + espaço vazio antes de acabar). A centragem por flexbox do .site-header centra a CAIXA inteira da imagem, não este conteúdo visual - isso deixava "Elevate" a ler-se acima do centro do menu. Desloca a imagem ~5.5px para baixo (calculado a partir da posição real do conteúdo no PNG) para o centro de "Elevate" coincidir com o centro vertical do cabeçalho, tal como o menu/botão. */ .logo-mark { height: 34px; width: auto; transform: translateY(5.5px); } /* Pedido do utilizador: logo (e o resto do texto do site) sentia-se grande demais em mobile de um modo geral. 28px em vez de 34px - o deslocamento vertical escala na mesma proporção (5.5 × 28/34), para o ajuste ótico do comentário acima continuar válido a este tamanho menor. */ @media (max-width: 699px) { .logo-mark { height: 28px; transform: translateY(4.5px); } } .main-nav { display: flex; align-items: center; gap: var(--space-7); } .nav-links { display: none; align-items: center; list-style: none; gap: var(--space-6); padding: 0; } /* display:flex + align-items:center no próprio link (não só na lista) - o padding-block + border-bottom de 2px (reservado sempre, mesmo transparente, para não saltar o layout ao passar o rato) tornam a caixa do mais alta do que o texto sozinho, e essa caixa não estava a centrar-se dentro do
  • /.nav-links, deixando o texto visivelmente acima do centro do cabeçalho. */ .nav-links a { display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-200); color: var(--text); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy-800); border-bottom-color: var(--sky-500); } .header-actions { display: flex; align-items: center; gap: var(--space-4); } .header-actions .btn-primary { display: none; } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); } .nav-toggle svg { width: var(--icon-md); height: var(--icon-md); color: var(--navy-800); } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .mobile-nav { display: none; position: fixed; inset: 76px 0 0 0; background: var(--white); z-index: 99; padding: var(--space-6) var(--space-5); overflow-y: auto; } .mobile-nav.is-open { display: block; } .mobile-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } /* :where(:not(.btn)) - o CTA "Pedir orçamento" também vive dentro de .mobile-nav e é um , por isso caía nesta regra: como ".mobile-nav a" (classe+tipo) tem mais especificidade que ".btn"/".btn-primary" (só classe), estas propriedades ganhavam às do botão - display:block anulava o inline-flex/justify-content do .btn-block (texto ficava à esquerda em vez de centrado) e font-size:24px + padding:16px 0 tornavam-no enorme e sem padding horizontal, em vez do botão normal. :where(...) e não só :not(.btn) - :where() tem especificidade zero, por isso esta regra mantém a mesma especificidade (classe+tipo) que tinha antes de excluir o .btn. Com :not(.btn) simples, a especificidade subia para (classe+classe+tipo), empatando com ".mobile-nav a[aria-current]" (que é a mesma soma) - o empate passava a resolver-se pela ORDEM no ficheiro, e como a regra da cor branca de base vem depois no cascade (theme-dark.css carrega depois de layout.css), ela ganhava ao link da página atual, apagando o azul do "Início" ativo. */ .mobile-nav a:where(:not(.btn)) { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); color: var(--navy-800); text-decoration: none; padding: var(--space-4) 0; border-bottom: 1px solid var(--neutral-200); } /* Página atual (pedido do utilizador) - o menu desktop já tinha este tratamento em [aria-current="page"] (theme-dark.css), mas o mobile-nav nunca teve o equivalente: não havia forma de saber, dentro do menu aberto, em que página se estava. */ .mobile-nav a[aria-current="page"] { color: var(--sky-500); border-bottom-color: var(--sky-500); } .mobile-nav .btn { margin-top: var(--space-6); } /* Menu centrado (pedido do utilizador): antes, .container só tinha 2 "slots" (logo | main-nav), por isso o grupo nav-links+botão ficava sempre encostado à direita, colado ao botão, com um vazio grande entre o logo e o "Início". Passa a grid de 3 colunas (logo | nav-links | ações) só aqui, a partir do breakpoint em que os links ficam visíveis - .main-nav vira display:contents (não pinta caixa própria, só agrupa semanticamente para o