/* ============================================================ MENU — barra sobreposta ao hero, fundo preto translúcido Gplay — site da banda ============================================================ Desktop (>991px): 3 links à esquerda | logo centralizada | 3 links à direita Mobile (<=991px): logo + botão hambúrguer -> menu cheio (drawer) O menu usa position: absolute (não fixed) — ele fica só no topo da seção logo abaixo dele (o .hero, na home), sem grudar na tela durante o scroll. Se um dia quiser ele "grudado" ao rolar a página, é só trocar esse "absolute" por "fixed" aqui embaixo, num lugar só. JS que liga o botão hambúrguer ao menu cheio: js/menu.js ============================================================ */ .banda-menu { position: absolute; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 64px); padding: 22px clamp(20px, 4vw, 56px); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%); } .banda-menu__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); flex: 1; } .banda-menu__nav--esquerda { justify-content: flex-end; } .banda-menu__nav--direita { justify-content: flex-start; } .banda-menu__nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-decoration: none; white-space: nowrap; transition: color 0.25s ease; } .banda-menu__nav a:hover, .banda-menu__nav a.banda-menu__ativo { color: #E4142B; /* vermelho do "G" da logo — troque aqui se a cor da marca mudar */ } .banda-menu__logo { flex: 0 0 auto; display: block; line-height: 0; } .banda-menu__logo img { height: clamp(38px, 4vw, 56px); width: auto; display: block; } .banda-menu__toggle { display: none; } /* ============================================================ MOBILE Só a estrutura muda aqui (esconde os 2 blocos de link, mostra o hambúrguer) — o resto do visual é fluido e não precisa de mais breakpoints. ============================================================ */ @media (max-width: 991px) { .banda-menu { justify-content: space-between; gap: 0; /* o gradiente do desktop desvanece ao longo da altura da barra — no mobile a barra é bem mais baixa (menos padding), então esse gradiente "não cabe" e vira quase uma faixa sólida. Uma cor lisa translúcida resolve isso, sobrepondo o hero igual ao desktop. */ background: rgba(0, 0, 0, 0.42); } .banda-menu__nav--esquerda, .banda-menu__nav--direita { display: none; } .banda-menu__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; } .banda-menu__toggle span { display: block; width: 100%; height: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; } /* hambúrguer vira "X" quando o drawer está aberto */ body.banda-menu-aberto .banda-menu__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.banda-menu-aberto .banda-menu__toggle span:nth-child(2) { opacity: 0; } body.banda-menu-aberto .banda-menu__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ============================================================ DRAWER (mobile) Tudo comandado por uma única classe no : "banda-menu-aberto" (js/menu.js só liga/desliga essa classe — não mexe em display/estilo). ============================================================ */ body.banda-menu-aberto { overflow: hidden; /* trava o scroll da página com o drawer aberto */ } .banda-menu__backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } body.banda-menu-aberto .banda-menu__backdrop { opacity: 1; visibility: visible; transition: opacity 0.35s ease; } .banda-menu__drawer { position: fixed; top: 0; right: 0; z-index: 200; width: min(320px, 82vw); height: 100%; background: #0a0a0a; display: flex; flex-direction: column; padding: 28px 32px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } body.banda-menu-aberto .banda-menu__drawer { transform: translateX(0); } .banda-menu__drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .banda-menu__drawer-header img { height: 40px; width: auto; } .banda-menu__close { background: none; border: none; width: 32px; height: 32px; position: relative; cursor: pointer; } .banda-menu__close span { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #fff; } .banda-menu__close span:first-child { transform: rotate(45deg); } .banda-menu__close span:last-child { transform: rotate(-45deg); } .banda-menu__drawer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; } .banda-menu__drawer-nav a { font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-decoration: none; } .banda-menu__drawer-nav a:hover, .banda-menu__drawer-nav a.banda-menu__ativo { color: #E4142B; }