/* ========================================================================== iGreen Header — componente completo Header fixo · blur progressivo · tubelight navbar · botao · hamburguer · menu mobile. Vem do componente portavel igreen-header.zip. Requer header-fonts.css e header-tokens.css carregados ANTES deste arquivo. ⚠ CLASSES RENOMEADAS COM PREFIXO hd: o zip usava .nav, .nav__item, .btn, .menu-btn e .mmenu. O index.html ja tem .nav (header antigo) e .btn (botoes do hero "Iniciar jornada" / "Simular minha recorrencia"), e o CSS do site continua no arquivo. Sem prefixo, `.btn{border-radius:18px}` do componente vazaria para o hero e `.nav{position:fixed}` do site quebraria a navbar do header. De -> para: .nav->.hdnav .nav__item->.hdnav__item .nav__sep->.hdnav__sep .nav__bulb->.hdnav__bulb .nav__tube->.hdnav__tube .btn->.hdbtn .btn--ghost->.hdbtn--ghost .menu-btn->.hdmenu-btn .mmenu->.hdmmenu IDs: #nav->#hdnav #menu-btn->#hdmenu-btn #mobile-menu->#hdmobile-menu ========================================================================== */ /* -------------------------------------------------------------------------- HEADER -------------------------------------------------------------------------- */ .hd{ position:fixed;inset:0 0 auto 0;z-index:var(--hd-z-header); height:var(--hd-header-h); display:flex;align-items:center;justify-content:space-between; gap:20px; padding-inline:var(--hd-gutter); font-family:var(--hd-font); } .hd__logo{height:32px;flex:0 0 auto;display:flex;align-items:center} .hd__logo svg,.hd__logo img{height:100%;width:auto;display:block; filter:drop-shadow(0 0 12px rgba(24,255,0,.4))} /* glow da logo, como no header antigo */ /* Progressive gradient blur — camadas com blur crescente + mascara, evita a linha de corte de um backdrop-filter simples. */ .hdblur{position:fixed;inset:0 0 auto 0;height:150px;z-index:var(--hd-z-blur);pointer-events:none} .hdblur span{position:absolute;inset:0} .hdblur span:nth-child(1){ -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); -webkit-mask:linear-gradient(180deg,#000 0%,#000 22%,transparent 42%); mask:linear-gradient(180deg,#000 0%,#000 22%,transparent 42%); } .hdblur span:nth-child(2){ -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); -webkit-mask:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%); mask:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%); } .hdblur span:nth-child(3){ -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); -webkit-mask:linear-gradient(180deg,#000 0%,#000 52%,transparent 80%); mask:linear-gradient(180deg,#000 0%,#000 52%,transparent 80%); } /* Véu escuro em gradiente por cima do blur. ⚠ A COR VEM DE `--vidro` (css/tokens.css), a mesma da barra de cookies — pedido do dono em 2026-08-21: "o header coloque um blur na cor da barra de cookies". Antes era rgba(5,6,8), um preto AZULADO; a barra de cookies é rgba(6,14,8), esverdeado. Com as duas na tela ao mesmo tempo a diferença de temperatura aparecia. O fallback existe porque este arquivo é carregado também pelas páginas de produto, e se um dia alguma delas deixar de linkar o tokens.css o véu não deve sumir. ⚠ O FALLBACK USA VÍRGULAS, e escrevi errado na primeira vez. `rgba(6 14 8, .78)` mistura a sintaxe nova (canais separados por espaço) com a antiga (vírgula antes do alfa) e é INVÁLIDA — o navegador descarta a declaração inteira. Ou seja: o fallback que existia para o véu não sumir era exatamente o que o faria sumir. Dentro de `var()` tudo depois da primeira vírgula é o valor de reserva, então `var(--vidro, 6, 14, 8)` é legítimo. */ /* ⚠ A DENSIDADE SUBIU PARA .92 NO TOPO em 2026-08-21, e a conta explica por que a troca anterior nao apareceu. Eu tinha mudado so a COR (rgba(5,6,8) -> rgba(6,14,8)) e o dono respondeu "o header ainda ta antigo". Medindo a composicao sobre o fundo do site: antes rgba(5,6,8,.78) -> rgb(5,12,7) depois rgba(6,14,8,.78) -> rgb(5,12,7) (diferenca maxima de 6 niveis em 255) Ou seja a cor JA era praticamente a do vidro da barra de cookies, que compoe rgb(6,13,8). O que diferia nunca foi a cor — era o MATERIAL: a barra e um painel de .92 e o header ia no maximo a .78, ainda multiplicado pelo `opacity:.85` daqui, o que dava .66 efetivos. Agora o topo vai a .92, igual a barra; com `is-scrolled` (opacity 1) ele chega exatamente nela, e sem rolagem fica em .78 — mais leve sobre o hero, que e onde o video precisa aparecer. O degrade e os stops intermediarios ficam: sao eles que evitam a linha de corte que um painel de borda reta deixaria no meio da tela. */ .hdblur span:nth-child(4){ background:linear-gradient(180deg, rgba(var(--vidro, 6, 14, 8),.92) 0%, rgba(var(--vidro, 6, 14, 8),.62) 40%, rgba(var(--vidro, 6, 14, 8),.24) 70%, transparent 100%); opacity:.85;transition:opacity var(--hd-dur); } .hd.is-scrolled ~ .hdblur span:nth-child(4){opacity:1} /* -------------------------------------------------------------------------- TUBELIGHT NAVBAR -------------------------------------------------------------------------- */ /* ⚠ `position:absolute` + left 50% NAO E ENFEITE, e consequencia da retirada do CTA em 2026-08-20. O .hd e `justify-content:space-between`, e a nav ficava no meio por ACIDENTE: havia um terceiro item (o botao) na direita, e o space-between dividia a sobra em dois vaos. Sem o botao sobraram dois itens e a nav foi para a borda direita — medi 382px a direita do centro da tela, com um vazio no meio do header. Centrar de verdade nao depende de existir algo do outro lado. Antes do acidente ela estava a 40px a esquerda do centro, entao isto e praticamente a posicao de sempre. O `relative` que estava aqui existia para o .hdnav__tube, que e absoluto dentro dela; `absolute` tambem serve de bloco de contencao, o tubo nao sente. Em <=760px a nav e display:none, e a regra nao tem efeito nenhum. */ .hdnav{ position:absolute;left:50%;transform:translateX(-50%); display:flex;align-items:center; background:var(--hd-surface);border:1px solid var(--hd-border); border-radius:var(--hd-r-full);padding:6px; } .hdnav__item{ position:relative;z-index:2; padding:12px 24px;border-radius:var(--hd-r-full); font-size:var(--hd-font-small);font-weight:var(--hd-fw-medium); color:var(--hd-muted);white-space:nowrap;cursor:pointer; transition:color .3s; } .hdnav__item:hover{color:var(--hd-ink)} /* ⚠ `#fff` CHUMBADO SAIU DAQUI. Era o unico lugar do header que ignorava o token e escrevia a cor a mao — branco PURO, enquanto o site usa #f2fff0 (branco esverdeado). Nao e azul, por isso nao apareceu na varredura de "azul > verde"; e neutro, o que num header verde tambem destoa. E e o texto mais visivel do componente: o item ativo. */ .hdnav__item.is-active{color:var(--hd-ink);font-weight:var(--hd-fw-heading)} .hdnav__sep{width:1px;height:18px;background:var(--hd-border);align-self:center} /* realce do item ativo (recuado para respirar das divisorias) */ .hdnav__bulb{ position:absolute;top:6px;height:calc(100% - 12px);z-index:1; border-radius:var(--hd-r-full);background:var(--hd-glass-2); transition:left .45s var(--hd-ease-nav),width .45s var(--hd-ease-nav); } /* tubo de luz + cone descendo */ /* ⚠ pointer-events:none E O QUE FAZ O MENU RESPONDER AO CLIQUE (corrigido em 2026-08-20). Sem ele o menu inteiro ficava morto para o mouse, e a razao e sutil: o ::after deste tubo e um cone de 44px de altura e 150% de largura que desce POR CIMA do item (o tubo esta em z-index 3, os itens em 2). Pior: o js/header.js move o tubo para o item sob o cursor no mouseenter — ou seja, o cone perseguia o ponteiro e cobria justamente o item que a pessoa ia clicar. Qualquer item, sempre. Pelo teclado funcionava, o que ajudou a esconder o bug. Medido com elementFromPoint no centro do item: quem respondia era o .hdnav__tube. O .hdnav__bulb leva a mesma regra por precaucao: hoje ele esta em z-index 1 (abaixo dos itens) e nao atrapalha, mas e igualmente decorativo — se um dia alguem subir esse z-index, o bug volta pela outra porta. */ .hdnav__bulb,.hdnav__tube{pointer-events:none} .hdnav__tube{ position:absolute;top:-2px;height:4px;z-index:3; border-radius:2px;background:var(--hd-green); box-shadow:0 0 16px 2px var(--hd-green),0 0 40px 6px rgba(24,255,0,.5); transition:left .45s var(--hd-ease-nav),width .45s var(--hd-ease-nav); } .hdnav__tube::after{ content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%); width:150%;height:44px; background:radial-gradient(50% 100% at 50% 0%, rgba(24,255,0,.5), transparent 70%); } /* -------------------------------------------------------------------------- BOTAO DO HEADER O zip trazia o padrao "shiny borders" (preto com rim branco/verde). O dono pediu o botao nas cores do "Iniciar jornada" do hero — verde solido, texto #02220a, mesmo glow e mesmo pill radius. ⚠ SEM USO NO INDEX DESDE 2026-08-20: o dono pediu "retire esse botao" e os dois elementos (o do header e o gemeo do menu mobile) sairam do index.html. As regras ficam aqui de proposito — nao sao lixo, sao o que faz religar ser so markup, e o presentation-mode.css ainda referencia `.hd .hdbtn`. Ver a nota no index.html, no lugar de onde o botao saiu. -------------------------------------------------------------------------- */ .hdbtn{ display:inline-flex;align-items:center;gap:var(--hd-sp-2xs); padding:14px 28px;border:none;border-radius:var(--hd-r-full); font-family:var(--hd-font);font-size:var(--hd-font-small);font-weight:var(--hd-fw-heading); letter-spacing:.01em; color:#02220a;background:var(--hd-green); box-shadow:0 0 34px rgba(24,255,0,.35); cursor:pointer; transition:transform .25s cubic-bezier(.16,1.1,.3,1),box-shadow .25s,background .25s; } .hdbtn:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(24,255,0,.55)} .hdbtn:active{transform:scale(.97)} /* Variante fantasma, caso o botao mude de papel depois. ⚠ Os dois `rgba(255,255,255,...)` viraram --hd-glass/--hd-glass-2 (2026-08-21). Eram os ultimos brancos puros do componente; a 4% e 8% de opacidade a diferenca e minima, mas valor chumbado que existe em paralelo a um token e o que faz o token deixar de valer. */ .hdbtn--ghost{ background:var(--hd-glass);color:var(--hd-ink); border:1px solid var(--hd-border-2);box-shadow:none; } .hdbtn--ghost:hover{background:var(--hd-glass-2);box-shadow:none} /* -------------------------------------------------------------------------- MENU MOBILE (hamburguer + painel) -------------------------------------------------------------------------- */ .hdmenu-btn{ display:none;flex-direction:column;gap:5px; width:46px;height:46px;flex:0 0 auto; align-items:center;justify-content:center; background:var(--hd-surface);border:1px solid var(--hd-border);border-radius:12px; cursor:pointer; } .hdmenu-btn span{width:20px;height:2px;background:var(--hd-ink);border-radius:2px;transition:transform .3s,opacity .3s} .hdmenu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hdmenu-btn.is-open span:nth-child(2){opacity:0} .hdmenu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hdmmenu{ display:none;position:fixed;inset:var(--hd-header-h) 0 auto 0;z-index:var(--hd-z-menu); flex-direction:column;gap:0; padding:6px var(--hd-gutter) 22px; font-family:var(--hd-font); /* gradiente no lugar de cor plana + fio verde e sombra: o painel passa a ler como uma superficie que desceu por cima da pagina, nao como um bloco chapado */ background:linear-gradient(180deg,rgba(7,11,8,.97) 0%,rgba(3,6,4,.985) 100%); -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15); border-bottom:1px solid rgba(24,255,0,.16); border-radius:0 0 22px 22px; box-shadow:0 28px 64px rgba(0,0,0,.62); opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .3s,transform .3s; } .hdmmenu.is-open{opacity:1;transform:none;pointer-events:auto} /* ⚠ `:not(.hdbtn)` NAO E DETALHE — E CORRECAO DE BUG. O CTA do menu deixou de ser