(js). Aqui não, senão a caixa engole o clique/seleção do blockquote que está por baixo dela. */ pointer-events:none; } /* object-fit:contain = a marca ENCOLHE pra caber, NUNCA achata. Sem aspect-ratio (browser velho) o height:100% resolve pra auto e o próprio PNG define a altura da caixa — degrada sozinho, sem hack. */ .gla-png{ display:block;width:100%;height:100%;object-fit:contain; transition:opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1)); } .gla-stage.is-agua .gla-png{opacity:0} /* --- halo ----------------------------------------------------------------- * Fica ATRÁS do PNG (z-index:-1 dentro do stage, que já é stacking context). * O blur acompanha a largura fluida (~2% dela) pra não virar borrão nos * tamanhos pequenos. Sem suporte a mask, o @supports não entra e o elemento * fica sem background nenhum — invisível, não um retângulo azul. */ .gla-glow, .gla-stage::after{position:absolute;z-index:-1;pointer-events:none} @supports ((-webkit-mask-image:url(a.png)) or (mask-image:url(a.png))){ .gla-glow{ inset:0; background:#6BC2E0; -webkit-mask:url(../img/marcas/logo-global.png) center/contain no-repeat; mask:url(../img/marcas/logo-global.png) center/contain no-repeat; filter:blur(clamp(5px,0.9vw,11px)); opacity:.40; } } /* --- derrame estático (estado base: sem JS / sem WebGL / <760px / rm) ------ */ .gla-stage::after{ content:""; left:-8%;right:-8%;top:66%;height:110%; background:radial-gradient(58% 100% at 50% 0%, rgba(107,194,224,.20), rgba(107,194,224,.05) 55%, rgba(107,194,224,0) 78%); transition:opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1)); } .gla-stage.is-agua::after{opacity:0} /* o shader desenha o dele */ /* Se o usuário LIGAR reduced-motion com a página já aberta, o JS já assumiu. Devolve o estado estático em vez de deixar a animação rodando. */ @media (prefers-reduced-motion: reduce){ .gla-stage.is-agua .gla-png{opacity:1} .gla-stage.is-agua::after{opacity:1} .gla-stage canvas{display:none} } /* --------------------------------------------------------------------------- DECISÃO PENDENTE (não aplicada de propósito — é de MARCA, não de código): o gradiente da faixa é linear-gradient(135deg,#0a2e21,var(--verde) 55%,#06283F) [style.css:372] e o #0a2e21 é um VERDE cravado à mão que o remap .brand-global (que troca --verde por #0A3D66) não alcança. Ou seja: hoje a faixa começa em verde- petróleo e termina em azul-noite, e a luz aquática desta peça é fria. Se o Henrique/Sérgio aprovarem trocar o resíduo verde pelo azul da marca, é esta linha — e só ela: .gcv-hero-band{background:linear-gradient(135deg,#0C4A78,var(--verde) 55%,#06283F)} Precedente do mesmo conserto: style.css:1059 (.dgm-core trocou #1d6e4e por #1E6FA8). O #0C4A78 aí em cima é só uma PROPOSTA (é o --verde700 #0F5488 puxado pro escuro) — não é token de marca. Quem decide é o cliente. --------------------------------------------------------------------------- */