Glassmorphic. Shrink no scroll.

Pílula flutuante, fixed top, com backdrop-blur e inset hairline. Encolhe sutilmente após 32px de scroll — economiza presença visual sem desaparecer.

Demonstração

EntrelaçosPsi

Entrar →

Anatomia

Position: fixed top, max-width 1200px, padding lateral 24px.
Glass: backdrop-filter: blur(20px) saturate(140%) com fundo rgba(15,8,32,0.72).
Inset hairline: box-shadow: inset 0 1px 0 rgba(255,255,255,0.06).
Shrink no scroll: classe .is-scrolled aplicada após 32px de scrollY, reduz altura de 64→52px.
Mobile: nav some, vira menu hambúrguer (drawer slide-in da direita).

Snippet · pronto pra colar

HTML · cole no seu projeto

<header class="e-header">
  <div class="e-header-pill" id="siteHeader">
    <a class="e-brand" href="#topo">
      <img class="e-logo-img" src="/assets/borboleta.png" alt="" aria-hidden="true">
      <span>Entrelaços<em>Psi</em></span>
    </a>
    <nav class="e-nav">
      <a href="#manifesto">Manifesto</a>
      <a href="#programas">Programas</a>
      <a href="#comunidade">Comunidade</a>
      <a href="#fundadoras">Co-fundadoras</a>
    </nav>
    <div class="e-header-cta">
      <a href="#cta" class="e-btn e-btn-primary e-btn-sm">Entrar →</a>
    </div>
  </div>
</header>

<script>
// Shrink no scroll (após 32px)
const headerPill = document.getElementById('siteHeader');
window.addEventListener('scroll', () => {
  headerPill.classList.toggle('is-scrolled', window.scrollY > 32);
});
</script>