/* ===================================================================== MENU MOBILE (hamburguer) — Black Edition. SO ATE 760px. --------------------------------------------------------------------- No desktop nada muda: a nav horizontal (.main-nav) continua igual e o hamburguer/menu ficam ocultos. Carregado por ultimo no index.html para vencer as regras de header de landing-theme.css / global-components.css. ===================================================================== */ /* Hamburguer: escondido por padrao (desktop). */ .pag1 .site-header .nav-burger { display: none; } /* Menu lateral: oculto ate ser aberto pelo JS. */ .mobile-menu[hidden] { display: none; } /* ---------------- MOBILE (<=760px) ---------------- */ @media (max-width: 760px) { /* Esconde a nav horizontal INTEIRA (inclusive o "Votar agora" solto). */ .pag1 .site-header .main-nav { display: none !important; } /* Mostra o hamburguer no canto direito do header. */ .pag1 .site-header .nav-burger { grid-row: 1; grid-column: 1; justify-self: end; align-self: center; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(229, 189, 103, 0.5); border-radius: 11px; background: rgba(229, 189, 103, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: pointer; -webkit-tap-highlight-color: transparent; } .pag1 .site-header .nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #e5bd67; transition: transform 0.25s ease, opacity 0.25s ease; } /* Vira "X" quando aberto (aria-expanded=true). */ .pag1 .site-header .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pag1 .site-header .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .pag1 .site-header .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Painel/overlay do menu (fica no , funciona em qualquer tela do app). */ .mobile-menu { position: fixed; inset: 0; z-index: 2000; } .mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.26s ease; } .mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; } .mobile-menu-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 320px); display: flex; flex-direction: column; gap: 6px; padding: 84px 22px 32px; background: linear-gradient(180deg, #100f0d 0%, #060504 100%); border-left: 1px solid rgba(229, 189, 103, 0.24); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu.is-open .mobile-menu-panel { transform: translateX(0); } .mobile-menu-panel a { display: block; padding: 15px 16px; border-radius: 12px; color: rgba(255, 255, 255, 0.86); font-family: "Montserrat", Arial, sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; transition: color 0.2s ease, background 0.2s ease; } .mobile-menu-panel a:hover, .mobile-menu-panel a:focus-visible { outline: 0; color: #fff; background: rgba(255, 255, 255, 0.06); } /* "Votar agora" (CTA): em MAIUSCULAS no header desktop e no menu mobile. */ .pag1 .site-header .nav-cta { text-transform: uppercase; } /* "Votar agora": CTA dourado em destaque (como no header desktop). */ .mobile-menu-panel .mobile-menu-cta { margin-top: 12px; text-align: center; text-transform: uppercase; color: #0e0b06; font-weight: 800; background: linear-gradient(135deg, #ffe9b5 0%, #e5bd67 56%, #b8923f 100%); border: 1px solid rgba(255, 227, 165, 0.72); box-shadow: 0 14px 30px rgba(229, 189, 103, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.36); } .mobile-menu-panel .mobile-menu-cta:hover, .mobile-menu-panel .mobile-menu-cta:focus-visible { color: #0e0b06; filter: brightness(1.05); background: linear-gradient(135deg, #ffe9b5 0%, #e5bd67 56%, #b8923f 100%); } .mobile-menu-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: #fff; background: rgba(0, 0, 0, 0.36); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 1.5rem; line-height: 1; cursor: pointer; } /* Trava o scroll do fundo quando o menu esta aberto. */ body.menu-open { overflow: hidden; } /* Seguranca: no desktop o menu nunca aparece (o hamburguer ja fica oculto). */ @media (min-width: 761px) { .mobile-menu { display: none !important; } }