), só os candidatos a "header principal do site". ========================================================================== */ body > header:not(.dc-header), header[role="banner"]:not(.dc-header), .site-header:not(.dc-header), #masthead:not(.dc-header) { display: none !important; } /* ========================================================================== Impede a barra de rolagem horizontal causada pelo truque "full-bleed" (width: 100vw + margin negativa) usado no header e em outros blocos do plugin abaixo. 100vw conta a largura da tela INCLUINDO a barra de rolagem vertical, então esses elementos acabam vazando alguns pixels pra fora da área visível — e o navegador mostra uma barra de rolagem horizontal no rodapé da página por causa disso. Como o header é injetado em toda página do site, essa regra também vale pra toda página. ========================================================================== */ html { overflow-x: hidden !important; } /* ========================================================================== [dc_header] — logo à esquerda, menu (Aparência → Menus) centralizado, ícone de conta/login à direita. Full-bleed (ocupa a largura da tela inteira), com !important nas propriedades visuais mais visadas por temas/Bricks, pelo mesmo motivo documentado em frontend.css. ========================================================================== */ .dc-shortcode-scope.dc-header { position: relative !important; background: var(--dc-bg) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, .08) !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box !important; z-index: 40 !important; } .dc-shortcode-scope .dc-header-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 24px !important; min-height: 64px !important; display: flex !important; align-items: center !important; gap: 20px !important; } /* Modelo "Full": o menu ocupa a largura inteira da tela, borda a borda (mantendo só o respiro de 24px do padding), em vez de ficar limitado a 1280px centralizado. Escolhido em Divulcar → Cabeçalho. */ .dc-shortcode-scope.dc-header.dc-header-width-full .dc-header-inner { max-width: none !important; } /* ---------------- Logo ---------------- */ .dc-shortcode-scope .dc-header-logo { display: flex !important; align-items: center !important; flex: 0 0 auto !important; text-decoration: none !important; } .dc-shortcode-scope .dc-header-logo img { display: block !important; max-height: 42px !important; width: auto !important; } .dc-shortcode-scope .dc-header-logo-text { font-size: 20px !important; font-weight: 800 !important; color: var(--dc-secondary) !important; letter-spacing: -.01em !important; } /* ---------------- Menu (centralizado) ---------------- */ .dc-shortcode-scope .dc-header-nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; } .dc-shortcode-scope .dc-header-menu { display: flex !important; align-items: center !important; justify-content: center !important; gap: 34px !important; margin: 0 !important; padding: 0 !important; } .dc-shortcode-scope .dc-header-menu > li { position: relative !important; } .dc-shortcode-scope .dc-header-menu > li > a { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--dc-secondary) !important; text-decoration: none !important; padding: 10px 2px !important; transition: color .15s ease !important; white-space: nowrap !important; } .dc-shortcode-scope .dc-header-menu > li > a:hover, .dc-shortcode-scope .dc-header-menu > li.dc-submenu-open > a { color: var(--dc-primary) !important; } /* Setinha (▾) só nos itens de topo que têm submenu. */ .dc-shortcode-scope .dc-header-menu > li.menu-item-has-children > a::after { content: "" !important; width: 7px !important; height: 7px !important; border-right: 1.6px solid currentColor !important; border-bottom: 1.6px solid currentColor !important; transform: rotate(45deg) !important; margin-top: -3px !important; transition: transform .15s ease !important; flex: 0 0 auto !important; } .dc-shortcode-scope .dc-header-menu > li.menu-item-has-children.dc-submenu-open > a::after { transform: rotate(-135deg) !important; margin-top: 2px !important; } /* Submenu (dropdown) */ .dc-shortcode-scope .dc-header-menu .sub-menu { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; min-width: 200px !important; background: var(--dc-bg) !important; border: 1px solid var(--dc-border) !important; border-radius: 10px !important; box-shadow: 0 16px 32px rgba(15, 23, 42, .12) !important; padding: 8px !important; margin: 10px 0 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(-50%) translateY(6px) !important; transition: opacity .15s ease, transform .15s ease, visibility .15s ease !important; z-index: 10 !important; } .dc-shortcode-scope .dc-header-menu .sub-menu li a { display: block !important; padding: 9px 12px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--dc-text) !important; text-decoration: none !important; white-space: nowrap !important; } .dc-shortcode-scope .dc-header-menu .sub-menu li a:hover { background: var(--dc-bg-alt) !important; color: var(--dc-primary) !important; } /* Desktop: abre no hover (e mantém aberto por um instante ao sair, evitando "fechar" o submenu no meio do caminho até ele). */ @media (min-width: 901px) { .dc-shortcode-scope .dc-header-menu > li.menu-item-has-children:hover > .sub-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; } } /* ---------------- Ícones de favoritos e conta/login ---------------- */ .dc-shortcode-scope .dc-header-favorites, .dc-shortcode-scope .dc-header-account { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; color: var(--dc-secondary) !important; border: 1px solid transparent !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; } .dc-shortcode-scope .dc-header-favorites:hover, .dc-shortcode-scope .dc-header-account:hover { background: var(--dc-bg-alt) !important; color: var(--dc-primary) !important; border-color: var(--dc-border) !important; } .dc-shortcode-scope .dc-header-favorites svg, .dc-shortcode-scope .dc-header-account svg { width: 21px !important; height: 21px !important; } /* ---------------- Botão hambúrguer (mobile) ---------------- */ .dc-shortcode-scope .dc-header-burger { display: none !important; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; background: none !important; border: 0 !important; cursor: pointer !important; } .dc-shortcode-scope .dc-header-burger span { display: block !important; width: 22px !important; height: 2px !important; background: var(--dc-secondary) !important; border-radius: 2px !important; transition: transform .2s ease, opacity .2s ease !important; } .dc-shortcode-scope .dc-header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .dc-shortcode-scope .dc-header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; } .dc-shortcode-scope .dc-header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } .dc-shortcode-scope .dc-header-menu-hint { margin: 0 !important; font-size: 12.5px !important; color: var(--dc-text-muted) !important; } /* ---------------- Elementos exclusivos do menu mobile ---------------- */ @media (min-width: 901px) { .dc-shortcode-scope .dc-header-nav-top, .dc-shortcode-scope .dc-header-nav-social { display: none !important; } .dc-shortcode-scope .dc-header-nav-scroll { display: block !important; width: 100% !important; } } /* Garante que os ícones sociais nunca sejam renderizados em tamanho natural. */ .dc-shortcode-scope .dc-header-nav-social-icon svg { width: 18px !important; height: 18px !important; display: block !important; } /* ---------------- Responsivo ---------------- */ @media (max-width: 900px) { .dc-shortcode-scope .dc-header-inner { min-height: 62px !important; padding: 10px 0.8rem !important; gap: 12px !important; flex-wrap: wrap !important; } /* Ordem visual no mobile: logo | (espaço) | favoritos | conta | hambúrguer. O margin-left:auto fica no PRIMEIRO ícone do grupo da direita (favoritos), pra empurrar o grupo inteiro pra direita mantendo favoritos, conta e hambúrguer colados entre si. */ .dc-shortcode-scope .dc-header-favorites { order: 2 !important; margin-left: auto !important; } .dc-shortcode-scope .dc-header-account { order: 3 !important; } .dc-shortcode-scope .dc-header-burger { display: flex !important; order: 4 !important; margin-left: 0 !important; } /* Menu mobile agora é um painel EM TELA CHEIA (não mais um drawer lateral estreito), no mesmo espírito de apps de notícias: logo e botão de fechar (X) no topo, lista de links ocupando a largura toda com linhas divisórias, e ícones de redes sociais no rodapé do painel. Fundo branco (var(--dc-bg), a cor padrão do header), não escuro. position:fixed tira o nav do fluxo do flex, então ele não ocupa mais uma "linha" do .dc-header-inner (e não sobra mais aquele respiro extra embaixo do header quando fechado). */ .dc-shortcode-scope .dc-header-nav { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; flex-direction: column !important; justify-content: flex-start !important; background: var(--dc-bg) !important; padding: 0 !important; overflow-y: auto !important; visibility: hidden !important; transform: translateX(100%) !important; transition: transform .28s ease, visibility .28s ease !important; z-index: 50 !important; } .dc-shortcode-scope .dc-header-nav.is-open { visibility: visible !important; transform: translateX(0) !important; } /* Trava o scroll da página atrás do painel enquanto ele está aberto (o painel já ocupa a tela inteira, então não precisa de um overlay escurecido separado). */ body.dc-header-nav-locked { overflow: hidden !important; } /* ---- Topo do painel: logo + botão de fechar (X) ---- */ .dc-shortcode-scope .dc-header-nav-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 20px !important; border-bottom: 1px solid var(--dc-border) !important; } .dc-shortcode-scope .dc-header-nav-logo { display: flex !important; align-items: center !important; text-decoration: none !important; } .dc-shortcode-scope .dc-header-nav-logo img { display: block !important; width: auto !important; } .dc-shortcode-scope .dc-header-nav-close { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--dc-bg-alt) !important; border: 0 !important; color: var(--dc-secondary) !important; cursor: pointer !important; } .dc-shortcode-scope .dc-header-nav-close svg { width: 18px !important; height: 18px !important; } .dc-shortcode-scope .dc-header-nav-scroll { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 8px 0 28px !important; } .dc-shortcode-scope .dc-header-menu { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; padding: 0 !important; } .dc-shortcode-scope .dc-header-menu > li { border-bottom: 1px solid var(--dc-border) !important; } .dc-shortcode-scope .dc-header-menu > li > a { padding: 16px 20px !important; justify-content: space-between !important; font-size: 16px !important; } .dc-shortcode-scope .dc-header-menu-hint { padding: 0 20px !important; } /* No mobile o submenu não é hover — ele empilha logo abaixo do item pai, e só some/aparece via classe (alternada por toque, ver dc-header.js), já que não existe "hover" real em touch. */ .dc-shortcode-scope .dc-header-menu .sub-menu { position: static !important; display: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 0 6px !important; padding: 0 20px 0 34px !important; background: var(--dc-bg-alt) !important; } .dc-shortcode-scope .dc-header-menu > li.dc-submenu-open > .sub-menu { display: block !important; } /* ---- Ícones de redes sociais no rodapé do painel ---- */ .dc-shortcode-scope .dc-header-nav-social { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin-top: auto !important; padding: 24px 20px 0 !important; } .dc-shortcode-scope .dc-header-nav-social-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--dc-bg-alt) !important; color: var(--dc-secondary) !important; transition: background .15s ease, color .15s ease !important; } .dc-shortcode-scope .dc-header-nav-social-icon:hover { background: var(--dc-primary) !important; color: #fff !important; } .dc-shortcode-scope .dc-header-nav-social-icon svg { width: 18px !important; height: 18px !important; } }