/* ===== Header Transparente ===== Estado inicial controlado por body.hero-blue / body.hero-dark (PHP body_class filter). CSS no aplica antes do

ser pintado — zero flash. JS apenas gerencia a transição transparent → solid no scroll. ===== */ /* 1. Header fixo no topo */ body.hero-blue header, body.hero-dark header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; } /* 2. Fundo do preenche o espaço atrás do header fixo transparente */ body.hero-blue { background: linear-gradient(90deg, #3576E6 0%, #2B6BD9 44%, #1E4FB0 100%); } body.hero-dark { background: #0C0C0E; } /* 3. Compensação do header fixo dentro da section com cor */ body.hero-blue [data-hero-section], body.hero-dark [data-hero-section] { padding-top: 56px; /* h-14 desktop */ } @media (max-width: 1023px) { body.hero-blue [data-hero-section], body.hero-dark [data-hero-section] { padding-top: 64px; /* h-16 mobile */ } } /* 4. Estado inicial — header com a cor do hero */ body.hero-blue #main-menu-desktop:not(.is-solid), body.hero-blue #main-menu-mobile:not(.is-solid) { background: linear-gradient(90deg, #3576E6 0%, #2B6BD9 44%, #1E4FB0 100%); border-bottom-color: transparent; } body.hero-dark #main-menu-desktop:not(.is-solid), body.hero-dark #main-menu-mobile:not(.is-solid) { background-color: #0C0C0E; border-bottom-color: transparent; } #main-menu-desktop, #main-menu-mobile { transition: background-color 280ms ease, border-color 280ms ease; } /* Wrapper interno acompanha a cor */ body.hero-blue header > div:has(#main-menu-desktop:not(.is-solid)), body.hero-blue header > div:has(#main-menu-mobile:not(.is-solid)) { background: linear-gradient(90deg, #3576E6 0%, #2B6BD9 44%, #1E4FB0 100%); } body.hero-dark header > div:has(#main-menu-desktop:not(.is-solid)), body.hero-dark header > div:has(#main-menu-mobile:not(.is-solid)) { background-color: #0C0C0E; } /* 5. Estado sólido — JS adiciona .is-solid quando scroll passa o hero */ body.hero-blue #main-menu-desktop.is-solid, body.hero-blue #main-menu-mobile.is-solid { background: linear-gradient(90deg, #3576E6 0%, #2B6BD9 44%, #1E4FB0 100%); } body.hero-dark #main-menu-desktop.is-solid, body.hero-dark #main-menu-mobile.is-solid { background-color: #0C0C0E; } body.hero-blue header > div:has(#main-menu-desktop.is-solid), body.hero-blue header > div:has(#main-menu-mobile.is-solid) { background: linear-gradient(90deg, #3576E6 0%, #2B6BD9 44%, #1E4FB0 100%); } body.hero-dark header > div:has(#main-menu-desktop.is-solid), body.hero-dark header > div:has(#main-menu-mobile.is-solid) { background-color: #0C0C0E; } /* 6. Texto e ícones brancos (header sempre colorido nessas páginas) */ body.hero-blue #main-menu-desktop a, body.hero-blue #main-menu-desktop span.flex, body.hero-blue #main-menu-desktop .text-zinc-900, body.hero-dark #main-menu-desktop a, body.hero-dark #main-menu-desktop span.flex, body.hero-dark #main-menu-desktop .text-zinc-900 { color: #fff; } body.hero-blue #main-menu-desktop svg, body.hero-dark #main-menu-desktop svg { color: rgba(255, 255, 255, .75); } body.hero-blue #main-menu-desktop svg path[fill="currentColor"], body.hero-dark #main-menu-desktop svg path[fill="currentColor"] { fill: rgba(255, 255, 255, .75); } body.hero-blue #main-menu-mobile a, body.hero-blue #main-menu-mobile .text-zinc-900, body.hero-dark #main-menu-mobile a, body.hero-dark #main-menu-mobile .text-zinc-900 { color: #fff; } body.hero-blue #main-menu-mobile svg, body.hero-dark #main-menu-mobile svg { color: rgba(255, 255, 255, .8); } body.hero-blue #main-menu-mobile button, body.hero-dark #main-menu-mobile button { color: #fff; } /* 7. Logo branco (header sempre colorido nessas páginas) */ body.hero-blue #main-menu-desktop img, body.hero-blue #main-menu-mobile img, body.hero-dark #main-menu-desktop img, body.hero-dark #main-menu-mobile img { filter: brightness(0) invert(1); } /* 8. CTA com fundo branco no header colorido (sempre) */ body.hero-blue #main-menu-desktop #header-cta-desktop-cta-button, body.hero-blue #main-menu-desktop #header-cta-desktop-cta-button:hover, body.hero-dark #main-menu-desktop #header-cta-desktop-cta-button, body.hero-dark #main-menu-desktop #header-cta-desktop-cta-button:hover { background-color: #18181b; outline-color: transparent; color: #fff !important; } /* Garante texto escuro também em elementos filhos do CTA */ body.hero-blue #main-menu-desktop #header-cta-desktop-cta-button *, body.hero-dark #main-menu-desktop #header-cta-desktop-cta-button * { color: #fff !important; } /* 9. Dropdowns sempre sólidos com texto escuro */ #main-menu-desktop .group > div[class*="absolute"] { background-color: white; } body.hero-blue #main-menu-desktop .group > div[class*="absolute"] a, body.hero-blue #main-menu-desktop .group > div[class*="absolute"] span, body.hero-dark #main-menu-desktop .group > div[class*="absolute"] a, body.hero-dark #main-menu-desktop .group > div[class*="absolute"] span { color: #18181b; } body.hero-blue #main-menu-desktop .group > div[class*="absolute"] svg, body.hero-dark #main-menu-desktop .group > div[class*="absolute"] svg { color: #18181b; }