, não no canvas */ } /* -------------------------------------------------------------------------- 3. Tipografia e componentes do hero sobre fundo escuro -------------------------------------------------------------------------- */ body.hero-dark .hero h1 { color: var(--hero-ink); } body.hero-dark .hero h1 .aq { color: var(--hero-accent); } body.hero-dark .hero .eyebrow { color: var(--hero-accent); } body.hero-dark .hero .lead { color: var(--hero-body); } body.hero-dark .hero .lead b { color: var(--hero-ink); font-weight: 600; } body.hero-dark .hero .trust { border-top-color: var(--hero-line); } body.hero-dark .hero .trust span { color: var(--hero-body); } body.hero-dark .hero .trust svg { color: var(--hero-accent); } body.hero-dark .hero .btn-ghost{ background: transparent; color: var(--hero-ink); border-color: rgba(255,255,255,.32); } body.hero-dark .hero .btn-ghost:hover{ background: rgba(79,209,186,.10); border-color: var(--hero-accent); color: var(--hero-accent); } body.hero-dark .hero .halo{ background: radial-gradient(circle at 50% 45%, rgba(79,209,186,.20), transparent 62%); } /* Foco visível precisa continuar legível no escuro (WCAG 2.4.7 / 2.4.11) */ body.hero-dark .hero :focus-visible, body.hero-dark header:not(.scrolled) :focus-visible{ outline: 3px solid var(--hero-accent); outline-offset: 3px; } /* -------------------------------------------------------------------------- 4. Cabeçalho transparente enquanto está sobre o hero ATENÇÃO — armadilha do position:sticky Um elemento sticky continua ocupando espaço no fluxo: ele NÃO flutua sobre o conteúdo seguinte. Deixá-lo apenas transparente revelaria o branco do , criando uma faixa clara acima do hero. Solução: puxar o hero para cima em -74px (altura de .nav) e devolver o mesmo valor em padding-top. O fundo e o canvas passam a se estender por trás do cabeçalho, sem alterar a posição do conteúdo. -------------------------------------------------------------------------- */ body.hero-dark{ --hdr-h: 74px; } body.hero-dark .hero{ margin-top: calc(var(--hdr-h) * -1); padding-top: calc(76px + var(--hdr-h)); /* 76px é o padding original */ } body.hero-dark header:not(.scrolled){ background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } body.hero-dark header:not(.scrolled) .brand { color: #fff; } body.hero-dark header:not(.scrolled) .brand small { color: var(--hero-accent); } /* :not(.btn) preserva o contraste do botão aqua "Orçamento" */ body.hero-dark header:not(.scrolled) .menu a:not(.btn) { color: rgba(255,255,255,.90); } body.hero-dark header:not(.scrolled) .menu a:not(.btn):hover { color: var(--hero-accent); } body.hero-dark header:not(.scrolled) .burger span { background: #fff; } /* -------------------------------------------------------------------------- 5. Ilustração vetorial do hero sobre fundo escuro O SVG original usa traços em navy, invisíveis no escuro. Aqui só clareamos. -------------------------------------------------------------------------- */ body.hero-dark .hero-art svg .traco-forte { stroke: var(--hero-accent); } body.hero-dark .hero-art svg .traco-fraco { stroke: #7FB4D4; opacity: .75; } body.hero-dark .hero-art svg .preenche { fill: rgba(79,209,186,.10); } /* -------------------------------------------------------------------------- 6. Acessibilidade — movimento reduzido O JS já congela a animação em um quadro estático; aqui apenas reduzimos a presença visual do campo de partículas. WCAG 2.2, critério 2.3.3. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .hero-net{ opacity: .5; } } /* -------------------------------------------------------------------------- 7. Responsivo Em telas pequenas o hero encolhe e a ilustração vem antes do texto (regra herdada de style.css). O canvas acompanha por inset:0. -------------------------------------------------------------------------- */ @media (max-width: 900px){ /* Sobre o campo de partículas, um véu escuro com desfoque mantém o menu legível sem voltar ao branco. */ body.hero-dark header:not(.scrolled){ background: rgba(7,26,43,.72); backdrop-filter: blur(10px); } } @media (max-width: 560px){ /* style.css reduz o hero para padding:52px 0 66px neste breakpoint; o padding-top compensatório precisa acompanhar. */ body.hero-dark .hero{ padding-top: calc(52px + var(--hdr-h)); } }