/* ============================================================================ * PULSE — NAVBAR COM RECOLHA AUTOMÁTICA (html.pulse-nav-overflow) * * Quando os itens do menu não cabem numa linha (deteção em navbar.js), o * menu de topo esconde-se e aparece um hambúrguer que abre um PAINEL LATERAL * com os mesmos itens (inclui idioma e interruptor de tema). * <768px nada disto atua — o overlay mobile do tema continua como está. * Compatível com os 3 modos da navbar e com o tema claro (variáveis). * ========================================================================== */ /* ---- Hambúrguer (escondido até haver overflow) --------------------------- */ .pulse-drawer-btn { display: none; margin-left: auto; background: none; border: 0; padding: 0.4rem; cursor: pointer; flex-direction: column; gap: 5px; } .pulse-drawer-btn span { display: block; width: 26px; height: 2px; background: var(--pulse-white, #fff); } .pulse-drawer-btn:focus-visible { outline: 1px solid var(--pulse-white, #fff); outline-offset: 4px; } /* :not(.pulse-nav-probe) é ESSENCIAL: sem ele esta regra (mais específica) ganhava ao display:flex da sonda e, com o menu recolhido, a sonda media com display:none → "cabe" → o menu expandia de volta partido em 2 linhas. */ html.pulse-nav-overflow .site-header .site-header-nav:not(.pulse-nav-probe) { display: none !important; } html.pulse-nav-overflow .site-header .pulse-drawer-btn { display: flex; } /* ---- Anti-flash (html.pulse-nav-pending) --------------------------------- Classe posta por um script inline no (pulse-secoes.php) ANTES do primeiro paint; o navbar.js remove-a assim que mede e decide (fail-safe: o próprio inline remove-a ao fim de 3s se o navbar.js falhar). Esconde só VISUALMENTE (visibility, não display) — o layout mantém-se para a medição — e apenas ≥768px (no mobile manda o overlay do tema). Sem JS a classe nunca existe, logo nada fica escondido. */ @media (min-width: 768px) { html.pulse-nav-pending .site-header .site-header-nav, html.pulse-nav-pending .site-header .pulse-drawer-btn { visibility: hidden !important; } } /* <768px: o tema mostra o seu próprio hambúrguer/overlay. */ @media (max-width: 767.98px) { .pulse-drawer-btn { display: none !important; } .pulse-drawer { display: none !important; } } /* ---- Sonda de medição (invisível, nunca interativa) ----------------------- */ .pulse-nav-probe { display: flex !important; position: absolute !important; visibility: hidden !important; pointer-events: none !important; height: auto !important; left: 0; top: 0; } /* ---- Painel lateral -------------------------------------------------------- */ .pulse-drawer { position: fixed; inset: 0; z-index: 9400; } .pulse-drawer[hidden] { display: none; } .pulse-drawer-scrim { position: absolute; inset: 0; background: rgba(6, 6, 30, 0.5); opacity: 0; transition: opacity 0.25s ease; } .pulse-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(20rem, 85vw); background: var(--pulse-bg, #12127c); color: var(--pulse-white, #fff); padding: 3.5rem 1.75rem 2rem; transform: translateX(100%); transition: transform 0.28s var(--pulse-ease, ease); overflow-y: auto; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25); } .pulse-drawer.is-open .pulse-drawer-scrim { opacity: 1; } .pulse-drawer.is-open .pulse-drawer-panel { transform: none; } .pulse-drawer-close { position: absolute; top: 0.9rem; right: 1rem; background: none; border: 0; color: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; } .pulse-drawer-close:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } /* Menus clonados: verticais, com o espaçamento do overlay do tema. */ .pulse-drawer-menus ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; } .pulse-drawer-menus a { color: inherit; text-decoration: none; font-size: 1.15rem; } .pulse-drawer-menus a:hover { text-decoration: underline; } /* Bloqueia o scroll da página com o painel aberto. */ html.pulse-drawer-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .pulse-drawer-scrim, .pulse-drawer-panel { transition: none; } }