/* ===================== CABEÇALHO DO SITE PÚBLICO ===================== Barra horizontal do topo (template/template_header_menu_site.php) e o dropdown "Soluções". Carregado pelo template_head.php em TODA página fora do /painel — landings (bundle leve) e páginas com o bundle completo (login, cadastro, recuperar senha, 2FA, evento...). Até 07/11/2026 este bloco morava no eventuxi-home.css, que só as landings carregam: no login, no cadastro e no 2FA o menu saía com o espaçamento do tema e "Venda de Ingressos", "Tarifas e Preços", "Central de Ajuda" e "Fale Conosco" quebravam em duas linhas (até em 1920 px), e o "Soluções" abria sem estilo. Escopo = .menu-site, classe que o template_header.php põe no menu só quando inclui o menu do site. O cabeçalho do painel e o do RSVP/lista de presentes (template_header_rsvp.php) usam a mesma estrutura .app-header-menu > .menu e NÃO devem receber estas regras. */ /* Fix Menu Line Break ATENÇÃO ao seletor: ele existe para apertar os itens da BARRA HORIZONTAL do topo (para "Venda de Ingressos", "Tarifas e Preços" etc. caberem numa linha). Antes era `.app-header-menu .menu-site .menu-item .menu-link`, que também pegava os itens DENTRO do dropdown "Soluções" — o Popper não move o .menu-sub para fora do .app-header-menu, então eles continuam descendentes. Resultado: os links do submenu ficavam com 0.5rem de padding lateral, colados na borda do painel. O `>` limita a regra aos filhos diretos da barra. Não remover os `>`. */ @media (min-width: 992px) { .app-header-menu > .menu-site > .menu-item > .menu-link { padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 0.95rem; } .app-header-menu > .menu-site > .menu-item { white-space: nowrap; } /* ----- Dropdown "Soluções" ----- */ /* O padrão do tema é um painel sem borda, com sombra de 50px sem deslocamento (um halo que não separa do fundo) e hover que só troca a cor do texto. */ .app-header-menu .menu-site .menu-sub-lg-dropdown { border: 1px solid var(--bs-gray-200); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); overflow: hidden; } .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item { padding: 0 0.5rem; } .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link { padding: 0.7rem 0.85rem; border-radius: 0.5rem; align-items: flex-start; } /* Faixa de fundo no hover: sem isso o item só muda de cor e o alvo do clique fica invisível (o menu do site não declara menu-state-bg). */ .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link { background-color: var(--bs-gray-100); } .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-descricao { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 400; line-height: 1.35; color: var(--bs-gray-600); white-space: normal; } .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-icone { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 0.7rem; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--bs-gray-100); color: var(--bs-primary); font-size: 0.95rem; } /* Em hover a caixinha do ícone fica azul sólida. O glifo PRECISA virar branco: o tema pinta o .menu-link inteiro de var(--bs-primary) no hover, e o herda essa cor — daria azul sobre azul, sumindo o ícone. O !important segue a convenção do projeto (CLAUDE.md): fundo colorido = texto e ícones brancos. Cobre o e também svg, caso o ícone mude. */ .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icone, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link .menu-icone { background: var(--bs-primary); } .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icone, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icone i, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icone svg, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icone [class*="path"]::before, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link .menu-icone, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link .menu-icone i, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link .menu-icone svg, .app-header-menu .menu-site .menu-sub-lg-dropdown .menu-item.hover > .menu-link .menu-icone [class*="path"]::before { color: #fff !important; fill: #fff; opacity: 1; } /* Seta do gatilho: no desktop nada indicava que "Soluções" expande. */ .app-header-menu .menu-site .menu-item .menu-seta-desktop { display: inline-block; margin-left: 0.3rem; font-size: 0.62rem; transition: transform 0.25s ease; vertical-align: middle; } .app-header-menu .menu-site .menu-item.show > .menu-link .menu-seta-desktop { transform: rotate(180deg); } } /* Entre 992 e 1199 px a barra não cabia ao lado de "Entrar"/"Cadastrar" (o "Cadastrar" ficava cortado na borda, nas landings também). Nessa faixa o "Home" sai da barra (d-lg-none d-xl-flex no menu; o logo leva à home) e os itens e os botões ficam mais justos. A "Central de Ajuda" já some abaixo de 1400 px. Abaixo de 992 o menu vira a gaveta lateral e nada disto vale. */ @media (min-width: 992px) and (max-width: 1199.98px) { .app-header-menu > .menu-site > .menu-item > .menu-link { padding-left: 0.35rem !important; padding-right: 0.35rem !important; } #kt_app_header_wrapper .app-navbar-item { margin-left: 0.5rem !important; } #kt_app_header_wrapper .app-navbar-item > .btn { padding-left: 1rem; padding-right: 1rem; } }