/* ===================================================================== header.css — CABEÇALHO 64 / 56 px (padrão novo da frota) v1.6.3 Site: byworksy.com · Tema: GeneratePress 3.6 + GP Premium Card: t_ccb3779d · Autor: Pedro dev / CompanyStart Tech · 28/10/2026 Base: 10-design/2026-10-27-concursosonlinegh-header/ESPEC.md GEOMETRIA (igual à do concursosonlinegh, cor = marca do byworksy) - barra ......... 64 px no desktop (>= 1280) / 56 px no celular (<= 768) a linha de 1 px entra por box-shadow INSET (não soma) - item de menu .. 64 px de área clicável (altura da barra) - logo .......... capa 14,0 px (largura 111 px, asset @2x 230x29) - tipografia .... 13 px, caixa alta, letter-spacing 1 px, peso 600 - cores ......... azul #184098 (9,7:1 no branco) · laranja #F88820 (sublinhado de hover/ativo) NADA AQUI TOCA: conteúdo, rodapé, anúncios (GPT/AdX), Polylang, redirects, seletor PT | ES | EN e o core do GeneratePress. --------------------------------------------------------------------- A CONTA DO PADDING (medida no DOM em 28/10/2026 — não estimada) --------------------------------------------------------------------- container do cabeçalho ............................. 1200,0 px logo (capa 14 px) ................................... 111,0 px seletor PT | ES | EN (90,4) + margem (8) ............. 98,4 px margem do #site-navigation (9,375) ................... 9,4 px => largura útil da UL ............................... 981,2 px soma dos rótulos (13 px, caixa alta, tracking 1 px) .. 889,2 px (o peso 600 e o 700 caem na MESMA face do system-ui: largura de texto idêntica — medido por canvas, 206,32 px em "ORIENTAÇÃO PROFISSIONAL" nos dois pesos) UL = rótulos + 8 + 10 x padding (os 2 itens das pontas ficam com 4 px no lado externo, que não conta como espaço ENTRE rótulos): padding 16 .......... 1081,2 px ✗ faltam 100,0 px padding 10 .......... 996,2 px ✗ faltam 15,0 px padding 9 .......... 986,2 px ✗ faltam 5,0 px padding 8 .......... 977,2 px ✅ folga 4,0 px <-- ADOTADO --> 16 px entre rótulos (o mínimo exigido; o ideal de 32 px exigiria 100 px que o site não tem). Fonte, rótulos, ordem e URL intactos. A lupa do header continua desligada pela opção do tema (33 px). FAIXAS DE LARGURA - >= 1280 px ... menu horizontal, barra 64 px (é aqui que o seletor aparece no header; em 1280 a UL fecha em 1 linha); - 769–1279 px .. INTOCADO (como estava antes deste card: menu em 2 linhas, barra de 60 px). Aplicar item de 64 px aqui faria a barra ir a 128 px — regressão visível em tablet. A geometria nova vale nas faixas do aceite; - <= 768 px .... hambúrguer (drawer do GP), barra 56 px, alvo 44 x 44. Rollback: desligar "9 · Cabeçalho (padrão da frota)" no admin devolve o estado anterior. Nenhum dado é gravado por este módulo. ===================================================================== */ /* --------------------------------------------------------------------- 1) LOGO — capa 14,0 px → 111 px de largura Conta: 115,0 (render atual) x 14 / 14,5 (capa atual) = 111,03 → 111 px. Conferência da capa: 111 x 29 / 230 = 13,996 ≈ 14,00 px ✓ Arquivo servido: byworksy-wordmark-2x.png (230 x 29 @2x, tinta recortada). Largura oficial também na opção do tema (logo_width=111); este seletor garante o teto se a opção for regerada. Mesma capa no desktop e no celular (320 px incluso: cabe com folga). --------------------------------------------------------------------- */ .site-header .site-logo img { width: 111px; height: auto; max-width: 111px; max-height: 14px; } /* --------------------------------------------------------------------- 2) LINHA DE 1 PX DA BASE — box-shadow `inset` (não soma altura) `border-bottom` somaria 1 px e jogaria a barra para 65/57 px. Cor neutra da marca (#D8DEE9, mesmo tom dos divisores do site). --------------------------------------------------------------------- */ .site-header { box-shadow: inset 0 -1px 0 #d8dee9; } /* --------------------------------------------------------------------- 3) DESKTOP (>= 1280 px) — barra de 64 px e item com 64 px clicáveis Especificidade: `li.menu-item` + id vencem o `seletor.css` (que fixa padding 8 e tracking 0) sem `!important` em nenhuma linha. --------------------------------------------------------------------- */ @media (min-width: 1280px) { .site-header .inside-header { min-height: 64px; padding-top: 0; padding-bottom: 0; align-items: center; } #site-navigation { display: flex; align-items: stretch; } #site-navigation .inside-navigation { align-items: stretch; } #site-navigation .main-nav, #site-navigation .main-nav > ul { display: flex; align-items: stretch; flex-wrap: nowrap; } /* o item ocupa a barra inteira: 64 px de área clicável. `display:block` + `line-height:64px` é o modelo do próprio GeneratePress: o chevron do "Institucional" (que fica DENTRO do ) continua na mesma linha do rótulo. Com `display:flex` o chevron virava item de flex e descolava para a direita do rótulo. */ #site-navigation .main-nav > ul > li.menu-item > a { display: block; height: 64px; line-height: 64px; padding: 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #184098; box-shadow: inset 0 0 0 0 transparent; transition: color .12s linear, box-shadow .15s linear; } /* lado externo dos itens das pontas: 4 px (não é espaço ENTRE rótulos) */ #site-navigation .main-nav > ul > li.menu-item:first-child > a { padding-left: 4px; } #site-navigation .main-nav > ul > li.menu-item:last-child > a { padding-right: 4px; } /* hover / foco: sublinhado laranja de 2 px */ #site-navigation .main-nav > ul > li.menu-item > a:hover, #site-navigation .main-nav > ul > li.menu-item > a:focus { color: #102b66; box-shadow: inset 0 -2px 0 #f88820; } /* foco de teclado: anel visível, não depende de cor */ #site-navigation .main-nav > ul > li.menu-item > a:focus-visible { outline: 2px solid #184098; outline-offset: -6px; } /* ATIVO: azul #184098 sobre branco (9,7:1) + barra laranja de 3 px. Mata o #B3AFAF (2,17:1) que o GeneratePress grava no CSS dinâmico via `.main-navigation .main-nav ul li[class*="current-menu-"] > a`. */ #site-navigation .main-nav > ul > li[class*="current-menu-"] > a, #site-navigation .main-nav > ul > li.current_page_item > a { color: #184098; box-shadow: inset 0 -3px 0 #f88820; } #site-navigation .main-nav > ul > li[class*="current-menu-"] > a:hover, #site-navigation .main-nav > ul > li[class*="current-menu-"] > a:focus { color: #102b66; box-shadow: inset 0 -3px 0 #f88820; } } /* --------------------------------------------------------------------- 4) CELULAR (<= 768 px) — barra de 56 px, hambúrguer 44 x 44 O drawer (menu off-canvas do GP Premium) e o seletor PT | ES | EN centralizado na última linha continuam como estão (`menu-mobile.css`). --------------------------------------------------------------------- */ @media (max-width: 768px) { .site-header .inside-header { min-height: 56px; padding-top: 0; padding-bottom: 0; align-items: center; } /* O GeneratePress imprime uma regra INLINE `#masthead .inside-header` (0,7 px solid #D3D3D3) abaixo de 768 px. Com o box-shadow `inset` do módulo, as duas linhas caíam no mesmo pixel e a cor que aparecia era a do tema (a de 0,7 px). Aqui ela é neutralizada por especificidade (`#masthead.site-header` = 1 id + 2 classes > `#masthead` = 1 id + 1 classe), sem `!important`: a linha do cabeçalho passa a ser só a do módulo (#D8DEE9), igual à do desktop. */ #masthead.site-header .inside-header { border-bottom: 0; } #mobile-menu-control-wrapper { display: flex; align-items: center; } /* alvo de toque 44 x 44 (WCAG 2.5.5) — ícone de 24 px */ #mobile-menu-control-wrapper .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; line-height: 1; box-sizing: border-box; } #mobile-menu-control-wrapper .menu-toggle svg { width: 24px; height: 24px; } } /* respeita quem reduziu animação */ @media (prefers-reduced-motion: reduce) { #site-navigation .main-nav > ul > li.menu-item > a { transition: none; } }