/* ========================================================================== CONSÓRCIO PIX — camada CINEMA da HOME -------------------------------------------------------------------------- Carregado SÓ no index.html, DEPOIS do base.css. Todo seletor daqui é prefixado por `.pg-home` (classe no da home) — nada vaza para as outras 7 páginas, mesmo que este arquivo seja incluído por engano. Direção: "Aurora de marca + composição editorial" — o verde da marca vira ATMOSFERA em camadas (discos de luz em profundidades diferentes, com paralaxe real na rolagem), a grade quebra em bento com hierarquia de produto, e a leitura é conduzida por revelações de rolagem. Regras de execução: - Só transform / opacity / clip-path animam em movimento contínuo. - Duas exceções de PAINT, ambas de disparo único e curtas: o traço do marca-texto do H1 (background-size) e a abertura do acordeão (::details-content). Nada disso roda por frame de rolagem. - Zero dependência externa. Zero handler de scroll em JS: a paralaxe é `animation-timeline: scroll()/view()`, nativa, atrás de @supports. - Tudo que se move está dentro de `prefers-reduced-motion: no-preference`. ========================================================================== */ .pg-home { --cine: cubic-bezier(.22, 1, .36, 1); --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); --dome-h: clamp(38px, 6vw, 78px); } /* ========================================================================== 1. NAV — barra de progresso da narrativa + "pouso" da barra ao rolar ========================================================================== */ /* camada sólida que aparece quando a página sai do topo (só opacity anima) */ .pg-home .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--areia); box-shadow: 0 10px 30px color-mix(in srgb, var(--verde-esc) 13%, transparent); opacity: 0; } /* fio de progresso de leitura, no gradiente da marca */ .pg-home .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1; pointer-events: none; border-radius: 0 2px 2px 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .pg-home .nav::before { animation: navPousa linear both; animation-timeline: scroll(root); animation-range: 0 140px; } .pg-home .nav::after { animation: navProgresso linear both; animation-timeline: scroll(root); } } } @keyframes navPousa { to { opacity: 1; } } @keyframes navProgresso { to { transform: scaleX(1); } } /* ========================================================================== 2. HERO — abertura em camadas -------------------------------------------------------------------------- 4 planos de profundidade, cada um com sua velocidade de rolagem: anéis (::before do base) → +22vh atmosfera (discos de luz) → +12vh conteúdo/texto → -5vh, esmaece cartão do simulador → fixo (é âncora de #simular; não desalinha) ========================================================================== */ .pg-home .hero { padding-block: clamp(3rem, 8vw, 5.5rem) calc(clamp(3rem, 8vw, 5.5rem) + var(--dome-h)); } /* --- plano de atmosfera: discos de luz (radial-gradient, sem filter:blur) --- */ .pg-home .hero__atmo { position: absolute; inset: -12% -6% 0; z-index: 0; pointer-events: none; overflow: hidden; } .pg-home .hero__atmo .blob { position: absolute; display: block; border-radius: 50%; will-change: transform; } .pg-home .hero__atmo .blob--a { width: min(76vw, 620px); aspect-ratio: 1; left: -16%; top: -14%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lima) 62%, transparent), transparent 64%); opacity: .7; } .pg-home .hero__atmo .blob--b { width: min(92vw, 780px); aspect-ratio: 1; right: -24%; bottom: -40%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--verde-esc) 92%, transparent), transparent 62%); opacity: .8; } .pg-home .hero__atmo .blob--c { width: min(46vw, 330px); aspect-ratio: 1; right: 12%; top: -20%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ouro) 34%, transparent), transparent 66%); opacity: .55; } /* --- conteúdo --- SCRIM (a "seda" do cinema): uma elipse escura, do próprio verde profundo da marca, atrás da coluna de leitura. Não é só estética — é ACESSIBILIDADE. Texto claro direto sobre o verde vivo dava ~2,5:1 de contraste (o mínimo para corpo de texto é 4,5:1). Com o scrim, a mesma tipografia clara passa de 4,6:1 para cima, e a identidade não muda: continua verde, só ganha profundidade. Para clarear/escurecer, mexa nas duas porcentagens de #04351F abaixo. */ .pg-home .hero__in { position: relative; z-index: 1; background: radial-gradient(88% 96% at 22% 44%, color-mix(in srgb, #04351F 72%, transparent) 0%, color-mix(in srgb, #04351F 58%, transparent) 45%, color-mix(in srgb, #04351F 40%, transparent) 70%, transparent 100%); } @media (max-width: 819px) { /* empilhado, a coluna de leitura ocupa o topo inteiro */ .pg-home .hero__in { background: radial-gradient(140% 88% at 50% 34%, color-mix(in srgb, #04351F 72%, transparent) 0%, color-mix(in srgb, #04351F 58%, transparent) 45%, color-mix(in srgb, #04351F 40%, transparent) 70%, transparent 100%); } } .pg-home .hero .eyebrow { color: #E8F5EE; } .pg-home .hero__h1 { max-width: 16ch; } .pg-home .hero__lead { color: #EAF6F0; max-width: 48ch; } .pg-home .hero__lead strong { color: #fff; } .pg-home .hero__cta { margin-top: 1.2rem; } /* palavras do título: cada uma é um bloco próprio para poder subir */ .pg-home .hero__h1 .w { display: inline-block; } /* --- faixa de prova: pílulas de vidro ESCURO sobre o verde --- vidro escuro (e não branco): o texto claro de dentro ganha contraste em vez de perder, e as pílulas leem como camada à frente do fundo. --- */ .pg-home .hero__provas { margin-top: 1.9rem; gap: .55rem .6rem; } .pg-home .hero__provas li { padding: .55rem 1rem .55rem .8rem; border-radius: 999px; background: color-mix(in srgb, #04351F 34%, transparent); border: 1px solid color-mix(in srgb, #fff 22%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .86rem; font-weight: 600; } /* (0,3,0) para vencer o `.verde-bg .provas svg` do base.css) */ .pg-home .hero .provas svg { color: var(--lima); } /* --- cartão do simulador: painel fantasma atrás = profundidade --- (o id #simular é o alvo de "Simular agora" e do CTA — só ganha respiro para não parar debaixo da barra fixa; o id em si não muda) --- */ .pg-home #simular { scroll-margin-top: 5.5rem; } .pg-home .hero__card { position: relative; } .pg-home .hero__card::before { content: ""; position: absolute; z-index: -1; inset: 7% -3.5% -6% -3.5%; border-radius: var(--r-lg); background: color-mix(in srgb, #fff 15%, transparent); border: 1px solid color-mix(in srgb, #fff 22%, transparent); transform: rotate(-2.2deg); } .pg-home .hero__card h3 { margin: .8rem 0 .4rem; } /* --- curva de passagem: a seção clara "engole" a base do hero --- */ .pg-home .hero__dome { position: absolute; z-index: 2; left: 50%; bottom: -1px; width: 150%; height: var(--dome-h); transform: translateX(-50%); background: var(--areia); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; } /* --- indicação decorativa de rolagem (sem texto, aria-hidden) --- */ .pg-home .hero__cue { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--dome-h) + .8rem); width: 2px; height: 42px; border-radius: 2px; overflow: hidden; transform: translateX(-50%); background: color-mix(in srgb, #fff 22%, transparent); pointer-events: none; } .pg-home .hero__cue::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 42%; background: #fff; border-radius: 2px; transform: translateY(-120%); } /* ========================================================================== 3. SEÇÕES — bandas com passagem suave (nada de corte seco) ========================================================================== */ .pg-home .sec-obj { position: relative; background: radial-gradient(120% 62% at 50% -14%, color-mix(in srgb, var(--verde-cl) 72%, transparent), transparent 62%), var(--areia); padding-block: clamp(2.8rem, 7vw, 4.6rem); } .pg-home .sec-por { position: relative; background: linear-gradient(180deg, var(--areia) 0%, var(--areia-esc) 11%, var(--areia-esc) 89%, var(--areia) 100%); } .pg-home .sec-calc { position: relative; background: var(--areia); padding-block: clamp(2.4rem, 6vw, 4rem); } .pg-home .sec-como { position: relative; background: linear-gradient(180deg, var(--areia) 0%, var(--areia-esc) 11%, var(--areia-esc) 89%, var(--areia) 100%); } /* grão fino nas bandas claras — tira o "chapado" sem sujar o texto */ .pg-home .atmo > .wrap { position: relative; z-index: 1; } .pg-home .atmo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: var(--grao); } /* cabeçalho de seção */ .pg-home .sec-cab { max-width: 22ch; } .pg-home .sec-cab--centro { max-width: 24ch; margin-inline: auto; } /* -------------------------------------------------------------------------- VERDE DE TEXTO sobre fundo claro. O --verde (#12B76A) rende 2,46:1 sobre a areia e o --verde-esc (#0A8F57) rende 4,13:1 sobre o branco — os dois abaixo dos 4,5:1 exigidos para texto pequeno. #087B4A é o mesmo verde da marca, um degrau mais fundo, e passa em TODOS os fundos claros da página (mínimo 4,65:1). Aplicado só na home; nas outras 7 páginas o token do base.css continua valendo — vale abrir uma rodada depois para levar isso ao site inteiro. -------------------------------------------------------------------------- */ .pg-home { --verde-txt: #087B4A; } .pg-home main section:not(.hero) .eyebrow { color: var(--verde-txt); } .pg-home .card:not(.card--escuro) .card__ir { color: var(--verde-txt); } .pg-home a.card:not(.card--escuro):hover h3 { color: var(--verde-txt); } /* ========================================================================== 4. BENTO — "simule por objetivo" com hierarquia de produto -------------------------------------------------------------------------- Ritmo 2 / 3 / 2 em grade de 6 colunas. No celular continua empilhado. ========================================================================== */ .pg-home .bento .card { position: relative; } @media (min-width: 600px) and (max-width: 899px) { .pg-home .bento { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .pg-home .bento > .b--flag { grid-column: span 2; } } @media (min-width: 900px) { .pg-home .bento { grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 1.5vw, 1.4rem); align-items: stretch; } .pg-home .bento > * { grid-column: span 2; } .pg-home .bento > .b3 { grid-column: span 3; } } /* cartão-carro-chefe */ .pg-home .bento .b--flag { overflow: hidden; padding: clamp(1.6rem, 3.4vw, 2.6rem); border-color: color-mix(in srgb, var(--verde) 24%, transparent); box-shadow: var(--sh-2); } .pg-home .bento .b--flag::before { content: ""; position: absolute; z-index: 0; right: -20%; bottom: -46%; width: min(64%, 330px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lima) 52%, transparent), transparent 68%); } .pg-home .bento .b--flag > * { position: relative; z-index: 1; } .pg-home .bento .b--flag h3 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem); } .pg-home .bento .b--flag p { font-size: 1.02rem; max-width: 32ch; } .pg-home .bento .b--flag .ico { width: 62px; height: 62px; border-radius: 20px; } .pg-home .bento .b--flag .ico svg { width: 31px; height: 31px; } /* ========================================================================== 5. RESPOSTA 3D AO PONTEIRO (só mouse fino; celular não paga nada por isso) ========================================================================== */ .pg-home .tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; } @media (hover: hover) and (pointer: fine) { /* a perspectiva vive na própria função transform: não precisa (nem deve) de transform-style: preserve-3d, que brigaria com o overflow:hidden */ .pg-home .bento .tilt:hover, .pg-home .bento .tilt:focus-visible { transform: perspective(900px) translate3d(0, -6px, 0) rotateX(var(--rx)) rotateY(var(--ry)); } /* brilho especular que segue o ponteiro */ .pg-home .tilt::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, #fff 60%, transparent), transparent 72%); mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--dur) var(--ease); } .pg-home .tilt:hover::after { opacity: 1; } } /* ========================================================================== 6. "POR QUE" — pódio editorial + fio de marca no topo do cartão ========================================================================== */ .pg-home .podio .card { position: relative; padding-top: clamp(1.8rem, 3.8vw, 2.4rem); } .pg-home .podio .card::before { content: ""; position: absolute; top: 0; left: clamp(1.5rem, 3.5vw, 2.1rem); width: 46px; height: 4px; border-radius: 0 0 4px 4px; background: var(--grad); } @media (min-width: 900px) { .pg-home .podio { align-items: start; } .pg-home .podio > :nth-child(2) { position: relative; top: -1.6rem; } .pg-home .podio > :nth-child(3) { position: relative; top: -.7rem; } } /* ========================================================================== 7. CALCULADORA — painel flutuante com luz própria ========================================================================== */ .pg-home .painel { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(24px, 4vw, 40px); padding: clamp(1.5rem, 4vw, 3.2rem); background: linear-gradient(158deg, var(--verde-cl) 0%, color-mix(in srgb, var(--areia) 55%, #fff) 78%); border: 1px solid color-mix(in srgb, var(--verde) 20%, transparent); box-shadow: var(--sh-2); } .pg-home .painel::before, .pg-home .painel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; } .pg-home .painel::before { width: min(72%, 420px); aspect-ratio: 1; right: -12%; top: -34%; background: radial-gradient(circle, color-mix(in srgb, var(--lima) 58%, transparent), transparent 68%); } .pg-home .painel::after { width: min(62%, 360px); aspect-ratio: 1; left: -16%; bottom: -38%; background: radial-gradient(circle, color-mix(in srgb, var(--ouro) 26%, transparent), transparent 68%); } .pg-home .painel .card { background: color-mix(in srgb, #fff 92%, transparent); } /* lista de benefícios com marca de conferido (CSS puro, sem mexer no texto) */ .pg-home .lista-check { list-style: none; margin: 0; padding: 0; } .pg-home .lista-check li { position: relative; padding-left: 2rem; margin-bottom: .7rem; line-height: 1.55; } .pg-home .lista-check li:last-child { margin-bottom: 0; } .pg-home .lista-check li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--verde-cl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087B4A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .82rem no-repeat; } /* ========================================================================== 8. COMO FUNCIONA — numerais em escala editorial + trilha que se desenha ========================================================================== */ .pg-home .passos { position: relative; padding-top: 2.4rem; margin-top: 2.2rem; } /* trilha horizontal — mesma em celular e desktop, some no reduce */ .pg-home .passos::before { content: ""; position: absolute; z-index: 0; left: 4px; right: 8%; top: .5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--verde), color-mix(in srgb, var(--verde) 18%, transparent)); transform-origin: 0 50%; /* já nasce desenhada; só encolhe para 0 quando existe rolagem para desenhá-la de volta (ver o bloco de movimento) */ } .pg-home .passos .passo { position: relative; z-index: 1; } /* marcador de cada passo sobre a trilha — só quando os 3 estão lado a lado */ @media (min-width: 820px) { .pg-home .passos .passo::after { content: ""; position: absolute; left: 0; top: calc(-1.9rem - 4px); width: 11px; height: 11px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 16%, transparent); } } /* empilhado, o marcador viraria bolinha solta no meio do texto: no celular quem marca o ritmo é o numeral vazado, que fica ainda maior. */ /* numeral vazado, grande, atrás da leitura */ .pg-home .passos .passo__n { font-size: clamp(3.2rem, 2.2rem + 4vw, 5.6rem); line-height: .84; letter-spacing: -.05em; margin: .35rem 0 .45rem -.06em; } @supports (-webkit-text-stroke: 2px currentColor) { .pg-home .passos .passo__n { color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--verde) 46%, transparent); } } /* ========================================================================== 9. DÚVIDAS FREQUENTES — composição editorial + acordeão de produto (estilos migrados do