/* Talhao - navbar compartilhado: itens tipo botao + realce do item ativo + hover acentuado nos itens NAO destacados. A rota ativa e calculada em navbar-active.js (marca ). */ /* Botao pintado por ::before (inset negativo) -> cobre o texto sem mexer no layout */ [data-nav-link] { position: relative; z-index: 0; text-decoration: none; transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-nav-link]::before { content: ""; position: absolute; inset: -6px -14px; border-radius: 9px; background: transparent; transition: background .2s ease; z-index: -1; } /* HOVER acentuado (itens nao destacados): cresce com "mola" e o fundo surge (sem deslocar para cima, pra nao passar da altura do item selecionado) */ [data-nav-link]:hover { transform: scale(1.1); } [data-nav-link]:hover::before { background: rgba(31, 82, 48, 0.1); } /* DESKTOP: item ativo = botao solido ESCURO + texto BRANCO, ja no MESMO tamanho do destaque de hover (scale 1.1). !important na cor porque a cor base vem do style inline do link. */ html[data-active-nav="anuncios"] [data-nav-link="anuncios"]::before, html[data-active-nav="buscar"] [data-nav-link="buscar"]::before, html[data-active-nav="analises"] [data-nav-link="analises"]::before { background: var(--green-900, #08150d); } html[data-active-nav="anuncios"] [data-nav-link="anuncios"], html[data-active-nav="buscar"] [data-nav-link="buscar"], html[data-active-nav="analises"] [data-nav-link="analises"] { color: var(--paper, #f9fdfa) !important; transform: scale(1.1); } html[data-active-nav="anuncios"] [data-nav-link="anuncios"]:hover, html[data-active-nav="buscar"] [data-nav-link="buscar"]:hover, html[data-active-nav="analises"] [data-nav-link="analises"]:hover { transform: scale(1.1); } /* MOBILE (menu do burger): item ativo = mesmo botao escuro + texto branco */ html[data-active-nav="anuncios"] [data-nav-mlink="anuncios"], html[data-active-nav="buscar"] [data-nav-mlink="buscar"], html[data-active-nav="analises"] [data-nav-mlink="analises"] { font-weight: 600; color: var(--paper, #f9fdfa) !important; background: var(--green-900, #08150d); } /* Acessibilidade: respeita quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { [data-nav-link] { transition: none; } [data-nav-link]:hover { transform: none; } }