/* ========================================================================== COMPONENTE: Cabeçalho do Site (Sticky, sem menu tradicional) -------------------------------------------------------------------------- Mobile-first, e deliberadamente minimal: logótipo + redes sociais + gatilho do menu. Telefone, WhatsApp, email e o CTA "Solicitar Consulta" já não vivem aqui — passaram todos para dentro do menu (ver _menu-drawer.css), para o cabeçalho nunca competir visualmente com o conteúdo da página nem acumular formas circulares redundantes. Com apenas três elementos interativos (2 ícones de rede social + 1 gatilho de menu), o único risco de confusão seria o par de ícones sociais parecer parte do mesmo controlo do menu. Resolve-se com dois recursos deliberados, não apenas espaçamento: 1. Um divisor vertical subtil (.site-header__divider) separa fisicamente os dois grupos; 2. O gatilho do menu é sempre maior (44px vs. 36–40px dos ícones sociais) e é o único com um rótulo textual ("Menu", a partir do tablet) — nunca fica ambíguo qual dos círculos abre o menu. "position: sticky" (não "fixed") propositadamente: o cabeçalho continua a ocupar o seu espaço normal no fluxo do documento, por isso o cálculo já existente em _hero.css ("min-height: calc(100svh - var(--header-height))") continua correto sem precisar de nenhum ajuste — só passa a "colar" ao topo quando se ultrapassa a sua posição natural. O estado "scrolled" (fundo translúcido + sombra) NUNCA muda a altura do cabeçalho — só a aparência. Isso é deliberado: o menu usa var(--header-height) como o seu "top" fixo, e uma altura variável obrigaria a sincronizar as duas coisas em JavaScript, uma fonte de bugs desnecessária. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-height); display: flex; align-items: center; background-color: var(--color-cream); transition: background-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); } /* Auditoria 07/09: bug reportado (com screenshot) — abrir o menu depois de já ter feito scroll fazia desaparecer o cabeçalho inteiro, incluindo o "X" de fechar. Causa raiz confirmada com Playwright (inspeção real da posição do elemento, não só leitura de código): o bloqueio de scroll do body (ver site-header.js, técnica "position:fixed" + "top:-Npx" para compatibilidade com iOS) muda o "containing block" do cabeçalho. Um ".site-header" com "position:sticky" deixa de colar ao topo do ECRÃ e passa a colar ao topo da própria caixa do — que a técnica de bloqueio acabou de deslocar Npx para cima. Resultado medido: o cabeçalho renderizava a -1582px do topo do ecrã (invisível), variável consoante o quanto se tinha feito scroll antes de abrir o menu — daí não ser óbvio em testes rápidos perto do topo da página. Correção: enquanto o menu está aberto (".has-menu-open" no body — a mesma classe que já ativa o bloqueio, ver _menu-drawer.css), o cabeçalho passa a "position:fixed". Sem nenhum ascendente com "transform"/"will-change" (confirmado em base/_reset.css e base/_layout.css), "fixed" ancora sempre ao viewport real, ignorando por completo o deslocamento do — exatamente o comportamento visual que o resto do CSS já pressupõe ("o cabeçalho permanece visível por cima", ver _menu-drawer.css). */ body.has-menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; } .site-header.is-scrolled { background-color: rgba(250, 247, 241, 0.88); box-shadow: 0 12px 32px -16px rgba(18, 54, 116, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* rede de segurança: em ecrãs excecionalmente estreitos, o grupo de ações quebra para uma segunda linha em vez de transbordar horizontalmente */ row-gap: var(--space-2); column-gap: var(--space-4); width: 100%; } .site-header__logo { flex-shrink: 0; line-height: 0; } .site-header__logo img { /* O ficheiro original (PsicoNutri-logo.png) tinha ~26% da sua altura em espaço transparente (margens verticais desiguais em torno do desenho), por isso qualquer "height" aplicado ao nunca correspondia à altura real do logótipo visível — daí continuar a parecer pequeno mesmo depois de aumentado. A imagem usada aqui (PsicoNutri-logo-header.webp) é uma versão recortada rente ao conteúdo (com uma margem mínima e uniforme), por isso "height" passa a refletir a altura visual real. Escala fluida entre 44px (mobile) e 54px (desktop); a altura do cabeçalho foi aumentada de 68px para 76px (var(--header-height) em base/_layout.css) para acomodar este tamanho com respiro. */ height: clamp(2.75rem, 2.3rem + 1.2vw, 3.375rem); width: auto; } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } @media (min-width: 768px) { .site-header__actions { gap: var(--space-4); } } /* -------------------------------------------------------------------- Redes sociais — mesmos ícones do rodapé (ver _footer.css), com o tratamento circular claro já usado no cabeçalho (fundo branco, contorno subtil, elevação + contorno dourado no hover). Visíveis em todos os breakpoints: ao contrário dos antigos botões de telefone/WhatsApp (só a partir do tablet), redes sociais fazem parte da identidade do cabeçalho em qualquer tamanho de ecrã. -------------------------------------------------------------------- */ .site-header__social-list { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .site-header__icon-link { display: inline-flex; align-items: center; justify-content: center; /* Fluido entre 36px (mobile, para caber com folga junto ao logótipo maior e ao gatilho do menu) e 40px (desktop). */ width: clamp(2.25rem, 2rem + 0.5vw, 2.5rem); height: clamp(2.25rem, 2rem + 0.5vw, 2.5rem); flex-shrink: 0; border-radius: 50%; background-color: var(--color-white); border: 1px solid var(--color-navy-deep); color: var(--color-navy-deep); transition: transform var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default); } .site-header__icon-link svg { width: 1.05rem; height: 1.05rem; } .site-header__icon-link:hover, .site-header__icon-link:focus-visible { transform: translateY(-2px); border-color: var(--color-gold); box-shadow: 0 10px 20px -12px rgba(14, 42, 78, 0.35); } /* O realce de foco acima (borda dourada + elevação) já é, por si só, um indicador de foco claramente visível — por isso desligamos aqui o "outline" genérico global (ver ":focus-visible" em base/_reset.css). Motivo: em elementos circulares, o Safari não faz o "outline" acompanhar o "border-radius" (ao contrário do Chrome/Firefox), pelo que esse outline aparecia como um quadrado sobre um botão redondo — um artefacto visual, nunca intencional. */ .site-header__icon-link:focus-visible { outline: none; } /* Divisor entre o grupo de redes sociais e o gatilho do menu — ver nota de acessibilidade/clareza visual no cabeçalho deste ficheiro. */ .site-header__divider { width: 1px; height: 1.5rem; flex-shrink: 0; background-color: var(--color-grey-light); } /* -------------------------------------------------------------------- Gatilho do Menu — dois traços que se transformam em "X" quando o menu está aberto (.is-open). Alvo de toque generoso (44×44px, mínimo recomendado), mesmo o ícone visual sendo pequeno. -------------------------------------------------------------------- */ .site-header__menu-trigger { display: flex; align-items: center; gap: var(--space-2); padding: 0; border: none; background: none; cursor: pointer; color: var(--color-navy-deep); -webkit-tap-highlight-color: transparent; } .site-header__menu-trigger-box { position: relative; display: flex; align-items: center; justify-content: center; width: 2.75rem; /* 44px — alvo de toque mínimo recomendado, sempre maior que os ícones sociais (36–40px) */ height: 2.75rem; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-grey-light); background-color: var(--color-white); transition: border-color var(--duration-fast) var(--ease-default); } .site-header__menu-trigger-line { position: absolute; width: 1.125rem; height: 2px; border-radius: 2px; background-color: currentColor; transition: transform var(--duration-base) var(--ease-default); } .site-header__menu-trigger-line:first-child { transform: translateY(-3px); } .site-header__menu-trigger-line:last-child { transform: translateY(3px); } /* Estado aberto: os dois traços rodam e sobrepõem-se, formando um "X" */ .site-header__menu-trigger.is-open .site-header__menu-trigger-line:first-child { transform: translateY(0) rotate(45deg); } .site-header__menu-trigger.is-open .site-header__menu-trigger-line:last-child { transform: translateY(0) rotate(-45deg); } .site-header__menu-trigger:hover .site-header__menu-trigger-box, .site-header__menu-trigger:focus-visible .site-header__menu-trigger-box { border-color: var(--color-gold); } /* Anel de foco próprio, desenhado com "box-shadow" em vez do "outline" genérico global (ver ":focus-visible" em base/_reset.css). ------------------------------------------------------------------- PORQUÊ: o "outline" nativo não acompanha "border-radius" no Safari — fica sempre um retângulo, mesmo à volta de um botão perfeitamente redondo. É esse o "quadrado" que ficava visível junto ao ícone depois de fechar o menu (o JS devolve o foco ao gatilho por acessibilidade ao fechar — ver site-header.js). "box-shadow" contorna sempre a forma real do elemento em todos os browsers, por isso substitui aqui o outline por um anel dourado com a mesma folga visual de 3px que o outline tinha (outline-offset), recriada com duas camadas: a primeira, da cor do próprio cabeçalho, funciona como "vão" invisível; a segunda é o anel dourado em si. */ .site-header__menu-trigger:focus-visible { outline: none; } .site-header__menu-trigger:focus-visible .site-header__menu-trigger-box { box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 5px var(--color-navy-deep); } .site-header__menu-trigger-label { font-size: var(--fs-small); font-weight: 600; color: var(--color-navy-deep); } /* A palavra "Menu" só aparece a partir do tablet — em mobile o círculo com o ícone já é suficientemente claro e generoso por si só. */ @media (max-width: 767px) { .site-header__menu-trigger-label { display: none; } } @media (prefers-reduced-motion: reduce) { .site-header, .site-header__menu-trigger-line { transition: none !important; } }