/** * Cabeçalho fixo no topo e transparente sobre bloco Capa. * * As classes vêm do body_class() em inc/class-plataformaosc-cabecalho.php: * .cabecalho-fixo -> cabeçalho grudado no topo * .cabecalho-transparente -> primeira coisa da página é um bloco Capa */ .cabecalho-site { position: relative; z-index: 100; margin-bottom: var( --wp--preset--spacing--40, 3rem ); } /* ---------- Fixo no topo ---------- */ /* * position: sticky mantém o elemento no fluxo normal: o margin-bottom da * regra base continuaria reservando espaço logo abaixo dele, e esse espaço * "gruda" junto ao cabeçalho ao rolar — uma faixa vazia entre o menu e o * conteúdo. Zera aqui e devolve o respiro como margin-top no
seguinte, * que não sofre esse efeito por não ser a caixa fixada. */ .cabecalho-fixo .cabecalho-site { position: sticky; top: 0; margin-bottom: 0; } /* * Só quando NÃO é transparente: a versão transparente não pode ganhar esse * respiro, ou o cabeçalho deixaria de ficar colado à capa. */ .cabecalho-fixo:not( .cabecalho-transparente ) .cabecalho-site + main { margin-top: var( --wp--preset--spacing--40, 3rem ); } /* * Compensação da barra de administração (apenas usuário logado, front-end). * O WordPress injeta margin-top no : 32px acima de 782px e 46px abaixo. * - Acima de 782px a barra é fixa (32px): desloca o cabeçalho colado nela. * - Até 782px a barra NÃO é fixa (rola com a página); o margin-top:46px que o * WP injeta já empurra a página toda, então o cabeçalho (top:0) fica logo * abaixo dela ao rolar. Compensar aqui criaria uma faixa vazia. * Cobre tanto o cabeçalho fixo quanto o transparente-fixo num só lugar. */ @media ( min-width: 783px ) { .cabecalho-fixo.admin-bar .cabecalho-site, .cabecalho-transparente.cabecalho-fixo.admin-bar .cabecalho-site { top: 32px; } } @media ( max-width: 782px ) { .cabecalho-fixo.admin-bar .cabecalho-site, .cabecalho-transparente.cabecalho-fixo.admin-bar .cabecalho-site { top: 0; } } .cabecalho-site__interno { transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease; } /* ---------- Hide on scroll down / show on scroll up ---------- */ .cabecalho-fixo .cabecalho-site { transition: transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease; } /* * -102% em vez de -100%: a sombra do cabeçalho rolado vaza alguns pixels para * baixo e continuaria aparecendo como um risco no topo da tela. * * Sobre a capa o cabeçalho nunca recebe esta classe (o JS só a aplica depois * que a capa sai da tela), então não há regra especial para o transparente. */ .cabecalho-fixo .cabecalho-site.esta-oculto { transform: translateY(-102%); margin-bottom: 0; } .cabecalho-fixo .cabecalho-site.esta-rolado .cabecalho-site__interno { box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.15 ); } /* ---------- Transparente sobre a capa ---------- */ .cabecalho-transparente .cabecalho-site { position: absolute; top: 0; left: 0; right: 0; margin-bottom: 0; } .cabecalho-transparente.cabecalho-fixo .cabecalho-site { position: fixed; } /* A classe de cor de fundo do bloco usa !important, então precisa ser vencida. */ .cabecalho-transparente .cabecalho-site__interno { background-color: transparent !important; box-shadow: none; } /* * Gradiente atrás do cabeçalho transparente: garante contraste da logo e do * menu mesmo quando a parte de cima da imagem da capa é clara (ex.: céu). * z-index negativo o mantém atrás do conteúdo do cabeçalho, mas ainda dentro * do contexto de empilhamento da .cabecalho-site (acima da capa). */ .cabecalho-transparente .cabecalho-site::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.45 ), rgba( 0, 0, 0, 0 ) ); pointer-events: none; } .cabecalho-transparente .cabecalho-site.esta-rolado::before { content: none; } /* Passou da capa: volta o fundo sólido. */ .cabecalho-transparente .cabecalho-site.esta-rolado .cabecalho-site__interno { background-color: var( --wp--preset--color--marca, #2e3466 ) !important; box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.15 ); } /* * Com a capa no topo, a página já tem um título grande dentro dela. * O título do template seria repetição. */ .cabecalho-transparente .pagina-titulo { display: none; } /* * Sem JavaScript o cabeçalho transparente ficaria ilegível ao rolar, * então mantemos o fundo sólido nesse caso. */ .no-js .cabecalho-transparente .cabecalho-site__interno { background-color: var( --wp--preset--color--marca, #2e3466 ) !important; } /* Legibilidade do menu aberto sobre a capa. */ .cabecalho-transparente .plataformaosc-menu--com-toggle .plataformaosc-menu__nav { background-color: var( --wp--preset--color--marca-escura, #22274c ); } /* Âncoras não ficam escondidas atrás do cabeçalho fixo. */ .cabecalho-fixo :target, .cabecalho-fixo .wp-block-heading[id] { scroll-margin-top: 6rem; } /* * O cabeçalho transparente sai do fluxo normal (position: absolute/fixed), * mas o
continua sendo o 2º filho de .wp-site-blocks (depois do *
). A regra global do WordPress dá margin-block-start a todo filho * que não seja ":first-child" do .wp-site-blocks — como isso é baseado na * ordem do DOM, e não no fluxo visual, o
herda essa margem mesmo com * o cabeçalho fora do fluxo. Resultado: uma faixa vazia acima da Capa, que * deveria tocar o topo. Zeramos só quando o cabeçalho é transparente. */ .cabecalho-transparente .wp-site-blocks > main { margin-block-start: 0; } @media ( prefers-reduced-motion: reduce ) { .cabecalho-site__interno, .cabecalho-fixo .cabecalho-site { transition: none; } }