/** * header.css — cabeçalho e navegação (estilo todamateria.com.br, no azul da marca). * * Camada de estilo sobre os componentes do Bootstrap (navbar, dropdown, * offcanvas). Carregada depois de main.css; usa os tokens --ee-*. * * Estrutura (ver template-parts/layout/site-header.php): * Faixa 1 (.site-header-brand) — logo + busca inline + botão de destaque (CTA). * Faixa 2 (.site-header-nav) — dois blocos de menu (esquerda/direita), desktop. * Offcanvas (.ee-mobile-offcanvas) — menu mobile. * * Sumário: * 1. Variáveis locais do cabeçalho * 2. Estrutura geral / sticky * 3. Faixa da marca (logo, ações) * 4. Botão de destaque (CTA) * 5. Busca inline (desktop) * 6. Faixa de navegação (dois blocos) e item ativo * 7. Submenu dropdown * 8. Hambúrguer * 9. Offcanvas (menu mobile) */ /* ========================================================================== 1. Variáveis locais do cabeçalho -------------------------------------------------------------------------- Duas faixas de azul MUITO próximas (como no exemplo): a navegação é só um tom levemente mais escuro que a marca, e uma linha divisória um pouco mais clara separa as duas. A diferença de "degrau" vem mais da textura do que da cor. Derivadas dos tokens da marca. ========================================================================== */ .site-header { --ee-header-brand-bg: #07182c; /* azul muito escuro da marca. */ --ee-header-nav-bg: #145cb0; /* só um tom mais escuro. */ --ee-header-divider: rgba(255, 255, 255, 0.22); /* linha sutil entre as faixas. */ --ee-header-link: rgba(255, 255, 255, 0.92); --ee-header-link-hover-bg: #ffffff; --ee-header-link-hover-color: var(--ee-blue-dark); } /* ========================================================================== 2. Estrutura geral / sticky (inteligente: esconde ao descer, mostra ao subir) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1020; /* Transição usada pelo "smart sticky" (classe .is-hidden via main.js). */ transition: transform 0.3s ease; will-change: transform; } /* Escondido: desliza o cabeçalho inteiro para cima (fora da tela). */ .site-header.is-hidden { transform: translateY(-100%); } /* Não esconde enquanto a busca ou o menu mobile estiverem abertos. */ .site-header.is-hidden:has(.ee-header-search.is-open) { transform: none; } /* Quem prefere menos movimento: sem deslizar (esconde/mostra instantâneo). */ @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* Sobrescreve o bg-primary do Bootstrap por faixa, mantendo o azul da marca. A faixa da marca ganha uma TEXTURA própria (grade de pontinhos claros em baixíssima opacidade, via SVG inline no CSS — sem arquivo/binário), diferente do padrão de chevrons do todamateria. A textura fica atrás do conteúdo. */ .site-header .site-header-brand.bg-primary { position: relative; background-color: var(--ee-header-brand-bg) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E"); background-size: 24px 24px; } .site-header .site-header-brand.bg-primary > .container { position: relative; /* conteúdo acima da textura. */ z-index: 1; } /* Faixa de navegação: cor quase igual à da marca + linha divisória sutil. */ .site-header .site-header-nav.bg-primary { background-color: var(--ee-header-nav-bg) !important; border-top: 1px solid var(--ee-header-divider); } /* A sombra só aparece após rolar (classe is-scrolled aplicada por main.js). */ .site-header.is-scrolled { box-shadow: var(--ee-shadow-lg); } /* Cabeçalho fixo desligado no painel (classe no ). */ .ee-no-sticky-header .site-header { position: static; } /* ========================================================================== 3. Faixa da marca (logo, ações) ========================================================================== */ .site-header-brand-row { min-height: 72px; gap: 0.75rem; padding-block: 1.1rem; /* mais respiro acima/abaixo da logo. */ } .site-header .navbar-brand, .site-header .site-title { font-size: 1.4rem; letter-spacing: -0.01em; color: var(--ee-white); } .site-header .navbar-brand .custom-logo { max-height: 44px; width: auto; display: block; } .site-header-actions { gap: 0.25rem; } /* ========================================================================== 4. Botão de destaque (CTA) -------------------------------------------------------------------------- Pílula de destaque (laranja da marca — cor de CTA do projeto), com setinha. ========================================================================== */ .ee-header-cta { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--ee-orange); color: var(--ee-text); /* escrita preta, como pedido. */ font-weight: 700; border: 0; border-radius: var(--ee-radius-pill); padding: 0.5rem 1.1rem; white-space: nowrap; transition: background-color var(--ee-transition), transform var(--ee-transition); } /* Hover, foco E clique (:active) usam a MESMA cor — o botão nunca perde o fundo. */ .ee-header-cta:hover, .ee-header-cta:focus, .ee-header-cta:active, .ee-header-cta:focus-visible { background-color: var(--ee-orange-dark); color: var(--ee-text); } .ee-header-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } /* Setinha dentro de um círculo claro, como nos prints. */ .ee-header-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.16); flex-shrink: 0; } .ee-header-cta-arrow svg { width: 16px; height: 16px; } /* ========================================================================== 5. Busca inline (desktop) — expande suavemente, fundo translúcido -------------------------------------------------------------------------- Fechada: gatilho discreto ("Busque um tema" + lupa). Aberta: o formulário se expande (largura + opacidade) numa pílula translúcida, sobreposta à faixa da marca e alinhada à direita. Abrir e fechar são animados (efeito vai-e-vem). ========================================================================== */ .ee-header-search { position: relative; display: flex; align-items: center; justify-content: flex-end; } /* --- Gatilho (estado fechado) --- */ .ee-header-search-trigger { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 0; color: var(--ee-header-link); font-weight: 500; padding: 0.4rem 0.6rem; border-radius: var(--ee-radius-pill); cursor: pointer; transition: color var(--ee-transition), background-color var(--ee-transition), opacity var(--ee-transition); } .ee-header-search-trigger:hover, .ee-header-search-trigger:focus { color: var(--ee-white); background-color: rgba(255, 255, 255, 0.12); } .ee-header-search-icon { display: inline-flex; line-height: 0; } /* Ao abrir, o gatilho some (sem ocupar espaço para o foco) e o form aparece. */ .ee-header-search.is-open .ee-header-search-trigger { opacity: 0; pointer-events: none; } /* --- Formulário (estado aberto) --- */ .ee-header-search-form { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; gap: 0.35rem; /* Fundo translúcido (como no exemplo), não cor sólida. */ background-color: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--ee-radius-pill); padding: 0.2rem 0.25rem 0.2rem 1rem; /* Estado fechado da animação: largura zero, invisível, sem cliques. */ width: 0; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: width 0.28s ease, max-width 0.28s ease, opacity 0.22s ease, padding 0.28s ease, background-color var(--ee-transition); } /* Aberto: expande suavemente até a largura final. */ .ee-header-search.is-open .ee-header-search-form { width: min(440px, 64vw); max-width: 64vw; opacity: 1; pointer-events: auto; } .ee-header-search-field { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ee-white); font-size: 1rem; padding: 0.45rem 0; } .ee-header-search-field:focus { outline: none; } .ee-header-search-field::placeholder { color: rgba(255, 255, 255, 0.75); } .ee-header-search-submit { flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background-color: rgba(0, 0, 0, 0.22); color: var(--ee-white); cursor: pointer; transition: background-color var(--ee-transition); } .ee-header-search-submit:hover, .ee-header-search-submit:focus { background-color: rgba(0, 0, 0, 0.38); } /* Esconde qualquer botão "limpar" (×) nativo do campo (caso o navegador renderize um, mesmo com type=text). Sem ×: a busca fecha clicando fora, no ESC ou no gatilho. */ .ee-header-search-field::-webkit-search-cancel-button, .ee-header-search-field::-webkit-search-decoration, .ee-header-search-field::-ms-clear { display: none; -webkit-appearance: none; appearance: none; } /* Texto do gatilho fechado: mostra a busca atual; trunca com reticências se for longo, para não quebrar o layout do cabeçalho. */ .ee-header-search-trigger-text { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sem JS: o formulário aparece (e fica utilizável) ao receber foco. */ .ee-header-search-form:focus-within { width: min(440px, 64vw); max-width: 64vw; opacity: 1; pointer-events: auto; } /* Respeita quem prefere menos movimento: sem animação de largura. */ @media (prefers-reduced-motion: reduce) { .ee-header-search-form { transition: opacity var(--ee-transition); } } /* ========================================================================== 6. Faixa de navegação (dois blocos) e item ativo ========================================================================== */ .site-header-nav-row { min-height: 48px; } .ee-header-menu { display: flex; flex-direction: row; /* sobrepõe o flex-direction: column do .navbar-nav. */ flex-wrap: nowrap; /* itens do cabeçalho ficam sempre em uma linha. */ align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; } .ee-header-menu .nav-item { position: relative; white-space: nowrap; } .ee-header-menu .nav-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ee-header-link); font-weight: 600; font-size: 0.95rem; padding: 0.45rem 0.85rem; border-radius: var(--ee-radius-pill); transition: color var(--ee-transition), background-color var(--ee-transition); } .ee-header-menu .nav-link:hover, .ee-header-menu .nav-link:focus, .ee-header-menu .dropdown:hover > .nav-link, .ee-header-menu .dropdown:focus-within > .nav-link { color: var(--ee-header-link-hover-color); background-color: var(--ee-header-link-hover-bg); } /* Item ativo: pílula clara (como o "Geografia" selecionado nos prints). */ .ee-header-menu .current-menu-item > .nav-link, .ee-header-menu .current-menu-parent > .nav-link, .ee-header-menu .current-menu-ancestor > .nav-link, .ee-header-menu .nav-link.active { color: var(--ee-header-link-hover-color); background-color: var(--ee-header-link-hover-bg); } /* Setinha do dropdown (substitui a do Bootstrap por uma mais limpa). */ .ee-header-menu .dropdown-toggle::after { margin-left: 0.1rem; border-top-color: currentColor; } /* ========================================================================== 7. Submenu dropdown ========================================================================== */ .ee-header-menu .dropdown-menu { /* Posiciona o submenu logo abaixo do item, SEM afetar a altura da linha. O open é por CSS (:hover/:focus-within), não pelo Popper do Bootstrap — por isso fixamos a posição aqui e não há deslocamento ao clicar. */ position: absolute; top: 100%; left: 0; right: auto; margin-top: 0.35rem; /* pequeno respiro abaixo da pílula (sem fundir). */ border: 0; border-radius: var(--ee-radius-md); /* painel todo arredondado. */ box-shadow: var(--ee-shadow-lg); padding: 0.4rem 0.4rem; /* respiro lateral p/ o destaque das opções não colar. */ min-width: 234px; } /* No bloco da direita, alinha o submenu pela direita (não vaza da tela). */ .ee-nav-right .ee-header-menu .dropdown-menu { left: auto; right: 0; } /* Ponte invisível sobre o respiro: mantém o :hover ao mover o mouse da pílula para o painel (o vão de 0.35rem não derruba o submenu). */ .ee-header-menu .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem; } .ee-header-menu .dropdown-item { display: flex; align-items: center; justify-content: space-between; font-weight: 500; padding: 0.55rem 0.85rem; border-radius: var(--ee-radius-sm); /* destaque arredondado. */ color: var(--ee-text); white-space: normal; } /* Hover/seleção NÃO ocupa 100% da largura: o respiro vem do padding do painel (0.4rem de cada lado) + o destaque arredondado (como no print de referência). */ .ee-header-menu .dropdown-item:hover, .ee-header-menu .dropdown-item:focus { background-color: var(--ee-blue-light); color: var(--ee-blue-dark); } .ee-header-menu .dropdown-item.active, .ee-header-menu .dropdown-item:active, .ee-header-menu .current-menu-item > .dropdown-item { background-color: var(--ee-blue); color: var(--ee-white); } /* Abre o submenu no hover OU no foco via teclado (desktop). */ @media (min-width: 992px) { .ee-header-menu .dropdown:hover > .dropdown-menu, .ee-header-menu .dropdown:focus-within > .dropdown-menu { display: block; } } /* ========================================================================== 8. Hambúrguer ========================================================================== */ .site-header-toggler { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ee-white); } .site-header-toggler:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } .site-header-toggler-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; } .site-header-toggler-bars span { display: block; height: 2.5px; border-radius: 2px; background-color: currentColor; } /* ========================================================================== 9. Offcanvas (menu mobile) ========================================================================== */ /* O offcanvas é renderizado FORA de .site-header (ver site-header.php), então as variáveis locais do cabeçalho (--ee-header-brand-bg) NÃO existem aqui. Usa o mesmo azul escuro da faixa da marca para o menu mobile combinar. */ .ee-mobile-offcanvas { background-color: #07182c; color: var(--ee-white); width: min(86vw, 360px); } .ee-mobile-offcanvas .offcanvas-header { padding: 1rem 1.25rem; } .ee-mobile-offcanvas .navbar-brand .custom-logo { max-height: 40px; width: auto; } .ee-mobile-close { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--ee-white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; margin-left: auto; /* empurra o botão para o canto direito, longe da logo. */ flex-shrink: 0; } .ee-mobile-close:hover, .ee-mobile-close:focus { color: var(--ee-white); background-color: rgba(255, 255, 255, 0.12); } .ee-mobile-offcanvas .offcanvas-body { padding: 0 1.25rem 1.5rem; display: flex; flex-direction: column; } /* Busca no topo do painel: pílula translúcida. */ .ee-mobile-search { display: flex; align-items: center; gap: 0.4rem; background-color: rgba(255, 255, 255, 0.14); border-radius: var(--ee-radius-pill); padding: 0.25rem 0.4rem 0.25rem 1.1rem; margin-bottom: 1rem; } .ee-mobile-search-field { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ee-white); font-size: 1rem; padding: 0.55rem 0; } .ee-mobile-search-field:focus { outline: none; } .ee-mobile-search-field::placeholder { color: rgba(255, 255, 255, 0.7); } .ee-mobile-search-submit { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background-color: rgba(0, 0, 0, 0.25); color: var(--ee-white); cursor: pointer; } .ee-mobile-search-submit:hover, .ee-mobile-search-submit:focus { background-color: rgba(0, 0, 0, 0.4); } /* Navegação empilhada, com divisórias (como nos prints do mobile). */ .ee-mobile-menu-nav .navbar-nav { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .ee-mobile-menu-nav .nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .ee-mobile-menu-nav .nav-link { color: var(--ee-white); font-weight: 700; font-size: 1.05rem; padding: 0.85rem 0; } .ee-mobile-menu-nav .nav-link:hover, .ee-mobile-menu-nav .nav-link:focus { color: rgba(255, 255, 255, 0.85); } /* Submenu no offcanvas: estático e recuado (sem dropdown flutuante). */ .ee-mobile-menu-nav .dropdown-menu { position: static; display: block; float: none; background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0 0 0.5rem 0.75rem; min-width: 0; } .ee-mobile-menu-nav .dropdown-toggle::after { display: none; /* sem seta de dropdown no mobile */ } .ee-mobile-menu-nav .dropdown-item { color: rgba(255, 255, 255, 0.82); font-weight: 500; padding: 0.55rem 0; white-space: normal; } .ee-mobile-menu-nav .dropdown-item:hover, .ee-mobile-menu-nav .dropdown-item:focus { color: var(--ee-white); background: transparent; } /* CTA em largura total dentro do offcanvas (mantém o laranja da marca). */ .ee-header-cta-mobile { margin-top: auto; } /* ========================================================================== 10. Barra de destaque (CTA) no mobile — abaixo do cabeçalho, fixa no topo -------------------------------------------------------------------------- Faixa de largura total, grudada no topo da viewport (sticky), com o rótulo à esquerda e um botão de seta à direita. Independente do "smart sticky" do cabeçalho: permanece visível mesmo quando o cabeçalho desliza para fora. ========================================================================== */ .ee-mobile-cta { position: sticky; top: 0; z-index: 1019; /* logo abaixo do cabeçalho (1020). */ background-color: var(--ee-white); border-bottom: 1px solid var(--ee-border); } .ee-mobile-cta-link { display: flex; align-items: center; justify-content: space-between; gap: var(--ee-space-3); padding-block: 0.6rem; color: var(--ee-text); font-weight: 700; text-decoration: none; } .ee-mobile-cta-label { line-height: 1.2; } .ee-mobile-cta-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background-color: var(--ee-orange); color: var(--ee-text); } .ee-mobile-cta-link:hover .ee-mobile-cta-btn, .ee-mobile-cta-link:focus .ee-mobile-cta-btn { background-color: var(--ee-orange-dark); } .ee-mobile-cta-btn svg { width: 18px; height: 18px; }