/* Fundo vivo do site (estrada e horizonte + sol nascendo + amanhecer contínuo). Vem dos estudos aprovados em 25/10/2026: estudos/fundo-c.css + estudos/fundo-sol.css. */ /* ========================================================================== ESTUDO C · ESTRADA E HORIZONTE "Cada financiamento é uma estrada." Céu de entardecer com um horizonte que brilha atrás do C, chão em perspectiva com as faixas da estrada vindo devagar na direção de quem lê, seções claras com horizonte suave e o tracejado da estrada passando de uma seção para a outra. Botões com volume e cartões que levantam. Regras deste arquivo: - só sobrescreve o CSS do site (carrega depois dele); - decoração sempre ATRÁS do texto (z-index:-1 dentro de seções isoladas) e sem clique; - animação só de transform/opacity; o fundo-c.js pausa tudo o que sai da tela; - prefers-reduced-motion: nada se mexe, a cena fica parada e bonita. ========================================================================== */ :root { --c-mola: cubic-bezier(.2, .75, .25, 1); --c-card: 0 1px 2px rgba(10, 23, 51, .05), 0 16px 34px -22px rgba(10, 23, 51, .34); --c-card-alto: 0 2px 6px rgba(10, 23, 51, .06), 0 34px 60px -28px rgba(10, 23, 51, .46); --c-claro-1: #F4F7FD; --c-claro-2: #EBF1FA; --c-dobra: 28px; /* quanto a "folha" clara sobe sobre a abertura e desce sobre o rodapé */ } /* ---------- camadas de fundo (criadas pelo fundo-c.js) ---------- */ .c-cena { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .c-cena > * { position: absolute; pointer-events: none; } /* céu: estrelas discretas, só no alto, somem perto do horizonte */ .c-estrelas { left: 0; right: 0; top: 0; height: var(--vp-y, 55%); -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 55%, transparent 96%); mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 55%, transparent 96%); } .c-estrelas i { position: absolute; inset: 0; } .c-estrelas i:first-child { opacity: .55; background-size: 560px 380px; background-image: radial-gradient(1.4px 1.4px at 38px 52px, #fff, transparent), radial-gradient(1px 1px at 162px 214px, #fff, transparent), radial-gradient(1.2px 1.2px at 298px 96px, #DCE6FF, transparent), radial-gradient(1px 1px at 414px 300px, #fff, transparent), radial-gradient(1.5px 1.5px at 506px 160px, #CFE0FF, transparent), radial-gradient(1px 1px at 232px 344px, #fff, transparent); } .c-estrelas i:last-child { opacity: .18; background-size: 430px 310px; background-image: radial-gradient(1.3px 1.3px at 92px 128px, #fff, transparent), radial-gradient(1px 1px at 330px 40px, #E4ECFF, transparent), radial-gradient(1.5px 1.5px at 214px 262px, #fff, transparent), radial-gradient(1px 1px at 388px 196px, #fff, transparent); animation: c-cintila 7s ease-in-out infinite alternate; } @keyframes c-cintila { to { opacity: .75; } } /* luz do horizonte: brilho largo e achatado no ponto de fuga + halo redondo atrás do C; abaixo do horizonte o chão escurece (silhueta), o que dá a sensação de distância */ .c-luz { inset: 0; background: linear-gradient(180deg, transparent calc(var(--vp-y, 55%) - 1px), rgba(2, 6, 18, .5) calc(var(--vp-y, 55%) + 70px), rgba(2, 6, 18, .18) 100%), radial-gradient(260px 260px at var(--vp-x, 73%) var(--vp-y, 55%), rgba(91, 140, 255, .17), transparent 70%), radial-gradient(640px 120px at var(--vp-x, 73%) var(--vp-y, 55%), rgba(160, 192, 255, .36), rgba(91, 140, 255, .10) 55%, transparent 80%), radial-gradient(1300px 460px at var(--vp-x, 73%) var(--vp-y, 55%), rgba(46, 86, 196, .36), transparent 72%); } /* a linha do horizonte, fina, mais clara no ponto de fuga */ .c-horiz { left: 0; right: 0; top: calc(var(--vp-y, 55%) - 1px); height: 2px; background: radial-gradient(ellipse 34% 100% at var(--vp-x, 73%) 50%, rgba(236, 243, 255, .9), rgba(140, 176, 255, .45) 40%, rgba(91, 140, 255, .12) 72%, transparent); } .c-horiz::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 34px; background: radial-gradient(ellipse 26% 50% at var(--vp-x, 73%) 50%, rgba(140, 176, 255, .34), transparent 72%); animation: c-respira 8s ease-in-out infinite; } @keyframes c-respira { 50% { opacity: .4; } } /* chão em perspectiva (abertura): um plano deitado em 3D; as faixas convergem para o C e o tracejado do meio anda devagar na direção de quem lê (só transform) */ .c-chao { left: 0; right: 0; top: var(--vp-y, 55%); bottom: 0; overflow: hidden; perspective: var(--persp, 470px); perspective-origin: var(--vp-x, 73%) 0; -webkit-mask-image: radial-gradient(ellipse 78% 118% at var(--vp-x, 73%) 100%, #000 22%, rgba(0, 0, 0, .6) 44%, transparent 68%); mask-image: radial-gradient(ellipse 78% 118% at var(--vp-x, 73%) 100%, #000 22%, rgba(0, 0, 0, .6) 44%, transparent 68%); } /* o plano é fixo (bordas da pista); só o tracejado e a luz andam, como filhos dele */ .c-plano { position: absolute; left: calc(var(--vp-x, 73%) - 700px); width: 1400px; bottom: 0; height: 1500px; transform-origin: 50% 100%; transform: rotateX(90deg) scaleX(var(--c-larg, 1)); background: linear-gradient(90deg, transparent 462px, rgba(124, 162, 255, .72) 462px 467px, transparent 467px 933px, rgba(124, 162, 255, .72) 933px 938px, transparent 938px), linear-gradient(90deg, transparent 452px, rgba(91, 140, 255, .1) 452px 477px, transparent 477px 923px, rgba(91, 140, 255, .1) 923px 948px, transparent 948px), linear-gradient(90deg, transparent 138px, rgba(124, 162, 255, .3) 138px 141px, transparent 141px 1259px, rgba(124, 162, 255, .3) 1259px 1262px, transparent 1262px); } .c-tracos { position: absolute; left: 688px; width: 24px; top: -120px; bottom: 0; background: linear-gradient(rgba(238, 244, 255, .82) 0 46px, transparent 46px) 50% 0 / 6px 120px repeat-y, radial-gradient(12px 34px at 50% 23px, rgba(140, 176, 255, .28), transparent) 50% 0 / 24px 120px repeat-y; animation: c-anda 3.4s linear infinite; } @keyframes c-anda { to { transform: translateY(120px); } } /* uma luz percorre a pista até o horizonte, onde mora o C (o caminho até o sim) */ .c-farol { position: absolute; left: 860px; width: 50px; margin-left: -25px; bottom: 0; height: 76px; opacity: 0; background: radial-gradient(closest-side, rgba(232, 240, 255, .95), rgba(120, 160, 255, .45) 45%, transparent); animation: c-farol 12s cubic-bezier(.3, 0, .7, 1) 2.5s infinite; } @keyframes c-farol { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 55% { opacity: .75; } 70% { transform: translateY(-1380px); opacity: 0; } 100% { transform: translateY(-1380px); opacity: 0; } } /* foto da estrada, minúscula, desfocada e tingida de azul (desenhada num canvas de 160 px pelo JS), só uma faixa em volta do horizonte: dá textura de paisagem real sem competir com o texto */ .c-foto { opacity: 0; transition: opacity 1.6s ease; -webkit-mask-image: radial-gradient(ellipse 46% 30% at 50% 53%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 46% 30% at 50% 53%, #000 30%, transparent 100%); } .c-foto.pronta { opacity: .4; } .c-foto, .inicio .c-estrelas { will-change: transform; } /* véu à esquerda: garante leitura folgada do título e dos botões */ .c-veu { inset: 0; background: linear-gradient(90deg, rgba(3, 8, 23, .62) 0%, rgba(3, 8, 23, .3) 36%, transparent 60%); } /* chão em SVG (seções seguintes): estático, desenhado pelo JS com perspectiva de verdade */ .c-svg { perspective: none; } .c-svg svg { display: block; position: absolute; left: 0; top: 0; max-width: none; } /* ---------- topo e abertura ---------- */ .topo.rolou { background: linear-gradient(180deg, rgba(7, 16, 40, .93), rgba(10, 23, 51, .86)); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), 0 12px 30px -12px rgba(0, 0, 0, .55); } .inicio { isolation: isolate; background: linear-gradient(180deg, #030817 0%, #071230 30%, #0B1A3D 62%, #081534 100%); } .inicio h1 { text-shadow: 0 2px 40px rgba(2, 6, 18, .45); } .selo { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -14px rgba(0, 0, 0, .8); } .procura-chips a { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .6); transition: border-color .25s, background .25s, transform .3s var(--c-mola), box-shadow .3s; } .procura-chips a:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 22px -12px rgba(31, 191, 117, .5); } .etapas-anel li { background: linear-gradient(180deg, #14284F, #0B1939); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 20px -10px rgba(0, 0, 0, .8); transition: color .3s, border-color .3s, transform .3s, box-shadow .4s; } .etapas-anel li.acesa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 4px rgba(91, 140, 255, .12), 0 10px 22px -10px rgba(91, 140, 255, .6); } .etapas-anel li.e-sim.acesa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 4px rgba(31, 191, 117, .12), 0 10px 24px -10px rgba(31, 191, 117, .7); } /* a folha clara sobe sobre a abertura com cantos arredondados: profundidade logo na primeira dobra */ #para-quem { position: relative; z-index: 2; margin-top: calc(var(--c-dobra) * -1); border-radius: var(--c-dobra) var(--c-dobra) 0 0; box-shadow: 0 -24px 48px -24px rgba(2, 6, 18, .6); } /* ---------- botões com volume ---------- */ .btn { transition: transform .3s var(--c-mola), box-shadow .3s ease, background-color .25s, border-color .25s, color .25s; } .btn:not(.mapa-centro) { position: relative; } .btn { isolation: isolate; overflow: hidden; } .btn:not(.mapa-centro):active { transform: translateY(1px) scale(.98); transition-duration: .08s; } .btn-verde { background: linear-gradient(180deg, #36D98E 0%, #1FBF75 52%, #18A968 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(6, 60, 34, .2), 0 1px 2px rgba(6, 40, 25, .3), 0 6px 14px -4px rgba(31, 191, 117, .45), 0 18px 34px -16px rgba(31, 191, 117, .6); } .btn-verde:hover { background: linear-gradient(180deg, #44E39A 0%, #24C97D 52%, #1BB06D 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(6, 60, 34, .18), 0 2px 4px rgba(6, 40, 25, .25), 0 0 0 4px rgba(31, 191, 117, .14), 0 14px 30px -8px rgba(31, 191, 117, .65); } .btn-verde:active { box-shadow: inset 0 2px 5px rgba(6, 60, 34, .3), 0 2px 6px -2px rgba(31, 191, 117, .5); } /* brilho que atravessa o botão no hover, como o farol passando */ .btn-verde::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s var(--c-mola); } .btn-verde:hover::after { transform: translateX(130%); } .btn-linha { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(0, 0, 0, .7); } .btn-linha:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 4px rgba(91, 140, 255, .16), 0 14px 30px -12px rgba(91, 140, 255, .55); } /* contorno escuro sobre fundo claro: folha branca com sombra; no hover o azul "enche" suave */ .btn-linha-escura { background: linear-gradient(180deg, #FFFFFF, #F1F5FC); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(10, 23, 51, .1), 0 10px 20px -12px rgba(10, 23, 51, .4); } .btn-linha-escura::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, #1F3A72, #0A1733); opacity: 0; transition: opacity .3s ease; } .btn-linha-escura:hover { background: linear-gradient(180deg, #FFFFFF, #F1F5FC); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(10, 23, 51, .12), 0 16px 30px -12px rgba(10, 23, 51, .55); } .btn-linha-escura:hover::before { opacity: 1; } /* dentro do "Como funciona" (fundo escuro) o contorno vira vidro, igual ao .btn-linha */ .ciclo .btn-linha-escura { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -12px rgba(0, 0, 0, .7); } .ciclo .btn-linha-escura::before { display: none; } .ciclo .btn-linha-escura:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 4px rgba(91, 140, 255, .16), 0 14px 30px -12px rgba(91, 140, 255, .5); } .anel-nav { background: radial-gradient(circle at 35% 28%, #1E386E, #0A1733 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .05), 0 16px 32px -10px rgba(5, 12, 30, .65); } /* ---------- seções claras: horizonte suave, sem corte seco entre uma e outra ---------- */ /* cada seção clara termina na cor em que a próxima começa: o branco "respira" em gelo e volta, como a luz do horizonte; o tracejado marca a passagem */ .secao { position: relative; } .secao.clara { background: radial-gradient(64% 42% at 50% 72%, rgba(91, 140, 255, .055), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, var(--c-claro-1) 100%); } #duvidas { background: radial-gradient(60% 36% at 50% 46%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(180deg, var(--c-claro-1) 0%, var(--c-claro-2) 50%, #FFFFFF 100%); } .contato { background: radial-gradient(64% 46% at 50% 74%, rgba(91, 140, 255, .06), transparent 70%), linear-gradient(180deg, var(--c-claro-1) 0%, #FFFFFF 28%, #FFFFFF 64%, #F5F8FD 100%); } /* tracejado da estrada passando de uma seção clara para a outra (o JS põe e o JS pausa fora da tela) */ .c-divisa { position: absolute; left: 50%; top: 0; z-index: 1; width: 4px; height: 112px; margin: -56px 0 0 -2px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); } .c-divisa i { position: absolute; left: 0; right: 0; top: -36px; bottom: 0; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(91, 140, 255, .75) 0 14px, transparent 14px 36px); animation: c-desce 3s linear infinite; } @keyframes c-desce { to { transform: translateY(36px); } } /* pré-atendimento (gelo): horizonte claro, um halo de luz atrás do formulário de vidro */ #pre-atendimento { isolation: isolate; background: linear-gradient(180deg, #E8EEF9 0%, #F0F4FB 50%, #FFFFFF 100%); } #pre-atendimento .c-luz { background: radial-gradient(900px 260px at var(--vp-x, 60%) var(--vp-y, 55%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), radial-gradient(1200px 520px at var(--vp-x, 60%) var(--vp-y, 55%), rgba(91, 140, 255, .1), transparent 70%); } /* ---------- "Como funciona": céu de entardecer, o C pousado no horizonte ---------- */ .ciclo { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #040A1C 0%, #091633 42%, #0C1C42 100%); } .ciclo .c-horiz { background: radial-gradient(ellipse 24% 100% at var(--vp-x, 27%) 50%, rgba(236, 243, 255, .8), rgba(140, 176, 255, .4) 40%, rgba(91, 140, 255, .1) 72%, transparent); } .ciclo .c-horiz::after { background: radial-gradient(ellipse 18% 50% at var(--vp-x, 27%) 50%, rgba(140, 176, 255, .3), transparent 72%); } .ciclo .c-luz { background: linear-gradient(180deg, transparent calc(var(--vp-y, 60%) - 1px), rgba(2, 6, 18, .45) calc(var(--vp-y, 60%) + 60px), rgba(2, 6, 18, .2) 100%), radial-gradient(240px 240px at var(--vp-x, 27%) var(--vp-y, 60%), rgba(91, 140, 255, .16), transparent 70%), radial-gradient(520px 110px at var(--vp-x, 27%) var(--vp-y, 60%), rgba(160, 192, 255, .28), rgba(91, 140, 255, .08) 55%, transparent 80%), radial-gradient(1100px 420px at var(--vp-x, 27%) var(--vp-y, 60%), rgba(46, 86, 196, .3), transparent 72%); } .ciclo .c-chao { bottom: auto; height: var(--chao-h, 40%); -webkit-mask-image: radial-gradient(ellipse 55% 115% at var(--vp-x, 27%) 100%, #000 15%, rgba(0, 0, 0, .5) 40%, transparent 66%); mask-image: radial-gradient(ellipse 55% 115% at var(--vp-x, 27%) 100%, #000 15%, rgba(0, 0, 0, .5) 40%, transparent 66%); } .ciclo-meio span { padding: 4px 12px; border-radius: 999px; color: #C9D3E6; background: rgba(7, 17, 41, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 18px -6px rgba(0, 0, 0, .8); } .ciclo-ponto { background: radial-gradient(circle at 35% 28%, #24427E, #11234A 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 20px -8px rgba(0, 0, 0, .75); transition: background .3s, border-color .3s, transform .3s var(--c-mola), box-shadow .3s; } .ciclo-ponto.feito { background: radial-gradient(circle at 35% 28%, #2A4C8E, #1B3263 72%); } .ciclo-ponto.ativo { background: radial-gradient(circle at 35% 28%, #9AB8FF, #5B8CFF 58%, #3F6FE0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 6px rgba(91, 140, 255, .16), 0 12px 26px -8px rgba(91, 140, 255, .7); } .ciclo-ponto.p4.ativo { background: radial-gradient(circle at 35% 28%, #6FEBB0, #1FBF75 58%, #17A566); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 6px rgba(31, 191, 117, .16), 0 12px 26px -8px rgba(31, 191, 117, .7); } /* ---------- faixa da estrada: a foto se aproxima devagar a partir do ponto de fuga ---------- */ .faixa-estrada { isolation: isolate; overflow: hidden; background: #0A1733; } .faixa-estrada::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("../img/estrada.jpg") center 55% / cover no-repeat; transform-origin: 50% 55%; animation: c-aproxima 28s ease-in-out infinite alternate; } .faixa-estrada::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(min(760px, 90%) 220px at 50% 46%, rgba(5, 12, 30, .5), transparent 72%), radial-gradient(120% 95% at 50% 55%, transparent 45%, rgba(3, 8, 23, .55) 100%), linear-gradient(180deg, rgba(10, 23, 51, .62), rgba(10, 23, 51, .2) 45%, rgba(10, 23, 51, .84)); } @keyframes c-aproxima { from { transform: scale(1.02); } to { transform: scale(1.12); } } .faixa-frase em { text-shadow: 0 2px 18px rgba(3, 8, 23, .85), 0 0 2px rgba(3, 8, 23, .6); } .faixa-frase b { box-shadow: 0 0 0 4px rgba(31, 191, 117, .18), 0 10px 26px -8px rgba(31, 191, 117, .7); } /* ---------- cartões que levantam ---------- */ .publico { border: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(120% 80% at 100% 100%, rgba(91, 140, 255, .2), transparent 60%), linear-gradient(160deg, #15305F 0%, #0A1733 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(10, 23, 51, .1), 0 28px 54px -24px rgba(10, 23, 51, .6); transition: transform .5s var(--c-mola), box-shadow .5s ease, opacity .7s ease; } .publico:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 8px rgba(10, 23, 51, .1), 0 40px 70px -26px rgba(10, 23, 51, .66); } .publico-loja { border: 1px solid #E2E9F5; background: radial-gradient(120% 80% at 100% 100%, rgba(91, 140, 255, .1), transparent 60%), linear-gradient(160deg, #FFFFFF 0%, #EFF4FB 100%); box-shadow: inset 0 1px 0 #fff, var(--c-card); } .publico-loja:hover { box-shadow: inset 0 1px 0 #fff, var(--c-card-alto); } .tipo { position: relative; overflow: hidden; border-color: #E4EBF6; background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%); box-shadow: var(--c-card); transition: transform .45s var(--c-mola), box-shadow .45s ease, border-color .3s, opacity .7s ease; } .tipo:hover { transform: translateY(-6px); box-shadow: var(--c-card-alto); border-color: #E4EBF6; } .tipo svg { width: 64px; height: 64px; padding: 11px; border-radius: 18px; background: linear-gradient(180deg, #F2F6FC, #E4ECF8); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(10, 23, 51, .45); transition: stroke .3s, background .3s; } .tipo:hover svg { background: linear-gradient(180deg, #F3FBF7, #E2F5EB); } /* tracejado da estrada que corre na base do cartão no hover, terminando no verde (o sim) */ .tipo::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 14px; height: 3px; pointer-events: none; background: linear-gradient(var(--verde), var(--verde)) right center / 20px 3px no-repeat, repeating-linear-gradient(90deg, var(--caminho) 0 14px, transparent 14px 24px) left center / calc(100% - 28px) 3px no-repeat; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--c-mola); } .tipo:hover::after { transform: scaleX(1); } .acesso:not(.acesso-rheny) { background: linear-gradient(180deg, #FFFFFF, #F4F7FD); border-color: #E4EBF6; } .acesso { box-shadow: var(--c-card); transition: transform .45s var(--c-mola), border-color .3s, background .3s, box-shadow .45s ease, opacity .7s ease; } .acesso:hover { transform: translateY(-5px); box-shadow: 0 0 0 4px rgba(91, 140, 255, .1), var(--c-card-alto); } .acesso:not(.acesso-rheny):hover { background: #fff; border-color: rgba(91, 140, 255, .55); } .acesso svg { background: linear-gradient(160deg, #22407A, #0A1733); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -8px rgba(10, 23, 51, .6); } .acesso-rheny svg { background: linear-gradient(160deg, #FFB25E, #F08A26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 16px -8px rgba(240, 138, 38, .6); } .acesso-rheny { box-shadow: 0 2px 4px rgba(26, 14, 51, .2), 0 22px 40px -22px rgba(42, 18, 80, .8); } .pre-form { border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .86)); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 23, 51, .04), 0 2px 6px rgba(10, 23, 51, .05), 0 44px 80px -36px rgba(10, 23, 51, .45); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (min-width: 900px) and (hover: hover) { .pre-form { background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .7)); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } .selo, .btn-linha, .ciclo .btn-linha-escura { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } } .opcoes span { background: #fff; box-shadow: 0 1px 2px rgba(10, 23, 51, .06), 0 6px 12px -10px rgba(10, 23, 51, .35); } .opcoes input:checked + span { background: linear-gradient(180deg, #1F3A72, #0A1733); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px -8px rgba(10, 23, 51, .55); } .campo input, .campo select { box-shadow: inset 0 1px 2px rgba(10, 23, 51, .05); transition: border-color .2s, box-shadow .2s; } .campo input:focus, .campo select:focus { box-shadow: 0 0 0 4px rgba(91, 140, 255, .14); } .pre-previa { background: linear-gradient(180deg, #EDF2FB, #F4F7FD); box-shadow: inset 0 1px 3px rgba(10, 23, 51, .06); } .aviso-seguranca { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(80% 60% at 0% 0%, rgba(31, 191, 117, .13), transparent 62%), radial-gradient(120% 90% at 100% 100%, rgba(91, 140, 255, .22), transparent 60%), linear-gradient(160deg, #15305F 0%, #0A1733 66%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(10, 23, 51, .1), 0 36px 64px -28px rgba(10, 23, 51, .6); transition: transform .5s var(--c-mola), box-shadow .5s ease, opacity .7s ease; } .aviso-seguranca:hover { transform: translateY(-4px); } .aviso-seguranca svg { filter: drop-shadow(0 0 10px rgba(31, 191, 117, .4)); } .busca input { border-color: #E0E8F5; box-shadow: inset 0 1px 2px rgba(10, 23, 51, .05), 0 16px 30px -24px rgba(10, 23, 51, .45); } .faq details { border-color: #E4EBF6; box-shadow: var(--c-card); transition: box-shadow .35s ease, border-color .3s; } .faq details:hover { border-color: rgba(91, 140, 255, .45); } .faq details[open] { box-shadow: var(--c-card-alto); } .canais li { border: 1px solid #E4EBF6; background: linear-gradient(180deg, #FFFFFF, #F5F8FD); box-shadow: var(--c-card); transition: transform .4s var(--c-mola), box-shadow .4s ease, border-color .3s; } .canais li:hover { transform: translateY(-3px); border-color: rgba(91, 140, 255, .45); box-shadow: var(--c-card-alto); } .aviso-banco { border-color: #E4EBF6; background: linear-gradient(180deg, #FFFFFF, #F7F9FE); box-shadow: var(--c-card); } /* a folha clara desce sobre o rodapé: a página fica "entre" o céu da abertura e a noite do rodapé */ .contato { z-index: 2; border-radius: 0 0 var(--c-dobra) var(--c-dobra); margin-bottom: calc(var(--c-dobra) * -1); box-shadow: 0 30px 50px -24px rgba(2, 6, 18, .7); } /* ---------- rodapé: noite, com o horizonte acendendo atrás da folha clara ---------- */ .rodape { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(64px + var(--c-dobra)); background: linear-gradient(180deg, #081434 0%, #060E22 34%, #040A19 100%); } .rodape .c-luz { background: radial-gradient(760px 180px at 50% var(--vp-y, 28px), rgba(110, 150, 255, .22), transparent 70%), radial-gradient(1400px 420px at 50% var(--vp-y, 28px), rgba(46, 86, 196, .18), transparent 70%); } .rodape .c-horiz { background: radial-gradient(ellipse 40% 100% at 50% 50%, rgba(200, 218, 255, .6), rgba(91, 140, 255, .2) 55%, transparent); } .rodape .c-horiz::after { display: none; } .rodape .c-chao { -webkit-mask-image: linear-gradient(transparent 0%, #000 45%, rgba(0, 0, 0, .6) 100%); mask-image: linear-gradient(transparent 0%, #000 45%, rgba(0, 0, 0, .6) 100%); } .rheny { border-top-color: rgba(255, 255, 255, .05); } /* ---------- celular ---------- */ @media (max-width: 900px) { .c-veu { display: none; } .inicio { --c-larg: .62; } } @media (max-width: 860px) { /* "Como funciona" em uma coluna: a estrada fica só logo abaixo do C, longe do texto */ .ciclo .c-chao { -webkit-mask-image: linear-gradient(transparent 0%, #000 40%, rgba(0, 0, 0, .7) 70%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 40%, rgba(0, 0, 0, .7) 70%, transparent 100%); } } @media (max-width: 760px) { :root { --c-dobra: 20px; } .c-divisa { height: 84px; margin-top: -42px; } .publico:hover, .tipo:hover, .acesso:hover, .canais li:hover, .aviso-seguranca:hover { transform: none; } } /* ---------- pausas (classes postas pelo fundo-c.js) ---------- */ .c-fora .c-anima, .c-fora .c-horiz::after, .c-fora.faixa-estrada::before, .c-oculto .c-anima, .c-oculto .c-horiz::after, .c-oculto .faixa-estrada::before { animation-play-state: paused; } /* ---------- movimento reduzido: tudo parado, cena estática ---------- */ @media (prefers-reduced-motion: reduce) { .c-tracos, .c-farol, .c-estrelas i, .c-horiz::after, .c-divisa i, .faixa-estrada::before { animation: none !important; } .c-farol { display: none; } .faixa-estrada::before { transform: scale(1.04); } .btn-verde::after { display: none; } .c-foto { transition: none; } } /* ========================================================================== ESTUDO SOL · camada sobre o estudo C (estrada e horizonte) O C da abertura vira um sol nascendo no horizonte: núcleo de luz champanhe atrás do anel, raios muito suaves, névoa que escapa pela abertura do C, anel perolado com textura fina. O título ganha luz e textura discretas; as etapas (Simulação, Proposta, Análise, Sim) ficam escondidas e surgem quando o mouse se aproxima. Visual de banco: sóbrio, nada "neon". ========================================================================== */ :root { --sol-luz: 255, 232, 188; /* champanhe: a luz do sol, sempre em baixa opacidade */ --sol-perola: #F6F2EA; --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ---------- abertura: C maior, encostando no título, menos vazio ---------- */ .inicio { padding-bottom: clamp(56px, 6vw, 90px); } .inicio-grade { grid-template-columns: 1fr 1fr; gap: 0; } .inicio-texto { position: relative; z-index: 2; } .inicio-sub { max-width: 470px; } /* o C encosta no título sem passar por baixo do texto */ .inicio-anel { width: min(680px, 54vw); margin-left: -7vw; margin-right: -3vw; justify-self: start; z-index: 1; --mx: 0; --my: 0; } /* ---------- o sol (camadas criadas pelo fundo-sol.js atrás do SVG do anel) ---------- */ .sol { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .sol > * { position: absolute; pointer-events: none; } /* núcleo: nasce de baixo do horizonte, no centro do C */ .sol-nucleo { left: 50%; top: 50%; width: 92%; height: 92%; margin: -46% 0 0 -46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 228, .5) 0%, rgba(var(--sol-luz), .3) 14%, rgba(var(--sol-luz), .12) 38%, rgba(120, 150, 230, .08) 62%, transparent 100%); transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 10px), 0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); animation: sol-nasce 2.8s cubic-bezier(.2, .7, .2, 1) .2s both; } @keyframes sol-nasce { from { opacity: 0; transform: translate3d(0, 22%, 0) scale(.55); } } /* halo largo e achatado: a luz que se espalha pelo céu */ .sol-halo { left: 50%; top: 50%; width: 230%; height: 120%; margin: -60% 0 0 -115%; background: radial-gradient(closest-side, rgba(var(--sol-luz), .16), rgba(91, 140, 255, .07) 55%, transparent); animation: sol-aparece 3.2s ease .6s both; } @keyframes sol-aparece { from { opacity: 0; } } /* raios: finos e quase invisíveis, girando bem devagar */ .sol-raios { left: 50%; top: 50%; width: 190%; height: 190%; margin: -95% 0 0 -95%; border-radius: 50%; opacity: .6; background: repeating-conic-gradient(from 0deg, transparent 0deg 5deg, rgba(var(--sol-luz), .022) 5.6deg 6.4deg, transparent 7deg 12deg); -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0, 0, 0, .5) 60%, transparent 92%); mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0, 0, 0, .5) 60%, transparent 92%); animation: sol-gira 160s linear infinite, sol-aparece 3.6s ease 1s both; } @keyframes sol-gira { to { transform: rotate(360deg); } } /* feixes que escapam pelas duas aberturas do C (entre o branco e o verde) */ .sol-feixe { left: 50%; top: 50%; width: 120%; height: 16%; margin-top: -8%; transform-origin: 0 50%; background: radial-gradient(ellipse 100% 50% at 0% 50%, rgba(255, 248, 232, .24), rgba(var(--sol-luz), .08) 45%, transparent 80%); animation: sol-aparece 2.4s ease 2.1s both, sol-pulsa 7s ease-in-out 4.5s infinite; } .sol-feixe.f1 { transform: rotate(-34deg); } .sol-feixe.f2 { transform: rotate(34deg); } @keyframes sol-pulsa { 50% { opacity: .55; } } /* névoa: três véus macios que vazam do C e derivam devagar; o mouse empurra de leve */ .sol-nevoa { left: 50%; top: 50%; width: 0; height: 0; transform: translate3d(calc(var(--mx) * -26px), calc(var(--my) * -16px), 0); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); } .sol-nevoa i { position: absolute; border-radius: 50%; filter: blur(18px); opacity: 0; animation: sol-aparece 3s ease 1.6s forwards, sol-deriva 22s ease-in-out infinite alternate; } .sol-nevoa i:nth-child(1) { width: 520px; height: 150px; left: -40px; top: -90px; background: radial-gradient(closest-side, rgba(236, 242, 255, .26), transparent); } .sol-nevoa i:nth-child(2) { width: 640px; height: 170px; left: -260px; top: 40px; background: radial-gradient(closest-side, rgba(var(--sol-luz), .2), transparent); animation-duration: 3s, 28s; animation-direction: normal, alternate-reverse; } .sol-nevoa i:nth-child(3) { width: 460px; height: 120px; left: 60px; top: 110px; background: radial-gradient(closest-side, rgba(210, 224, 255, .22), transparent); animation-duration: 3s, 34s; } @keyframes sol-deriva { from { transform: translate3d(-40px, 0, 0); } to { transform: translate3d(60px, -14px, 0); } } /* ---------- o anel: perolado, com textura fina e iluminado por dentro ---------- */ .anel-grande { transform: perspective(1000px) rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -7deg)); transition: transform 1s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 0 22px rgba(var(--sol-luz), .28)) drop-shadow(0 18px 40px rgba(2, 6, 18, .55)); } .anel-grande .desenha { stroke: url(#solTraco); } .anel-grande .trilho { stroke: rgba(255, 255, 255, .04); } .anel-grande .textura { fill: none; stroke-width: 12; stroke: url(#solTraco); filter: url(#solGrao); opacity: 0; transition: opacity 1.2s ease; } .anel-grande.fechou .textura, .anel-grande .textura.pronta { opacity: 1; } .anel-grande .sim { stroke: url(#solVerde); } .anel-grande.fechou .sim { filter: drop-shadow(0 0 6px rgba(31, 191, 117, .55)); } /* ---------- título: luz e textura discretas ---------- */ .inicio h1 { text-shadow: none; background-image: var(--grao), radial-gradient(120% 140% at 105% 40%, #FFF6E6 0%, transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #E9EEF8 100%); background-size: 160px 160px, 100% 100%, 100% 100%; background-blend-mode: soft-light, normal, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 30px rgba(2, 6, 18, .5)) drop-shadow(0 0 18px rgba(var(--sol-luz), .1)); } .inicio h1 em { background-image: var(--grao), linear-gradient(180deg, #8AF2C0 0%, #2BCB81 48%, #17A566 100%); background-size: 160px 160px, 100% 100%; background-blend-mode: soft-light, normal; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(31, 191, 117, .32)); } .inicio h1 em::after { background: linear-gradient(90deg, rgba(31, 191, 117, .2), #1FBF75 30%, #7CF0B6 60%, #1FBF75 85%, rgba(31, 191, 117, .2)); box-shadow: 0 0 14px rgba(31, 191, 117, .5); } /* ---------- etapas: escondidas; surgem quando o mouse chega perto ---------- */ .etapas-anel li { opacity: var(--perto, 0); pointer-events: none; transform: translate(-50%, -50%) scale(calc(.9 + var(--perto, 0) * .1)); background: linear-gradient(180deg, rgba(20, 40, 79, .88), rgba(11, 25, 57, .88)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .35s ease, transform .35s ease, color .3s, border-color .3s, box-shadow .4s; } /* posições: as etapas seguem o C pelo lado de fora do título (alto, baixo-esquerda, baixo, direita) */ .etapas-anel .e-topo { left: 46%; top: 7%; } .etapas-anel .e-esq { left: 20%; top: 84%; } .etapas-anel .e-base { left: 60%; top: 97%; } .etapas-anel .e-dir { left: 97%; top: 50%; } /* sem mouse (celular): elas aparecem só enquanto a luz percorre o C */ @media (hover: none) { .etapas-anel li.acesa { --perto: 1; } } /* ---------- celular ---------- */ @media (max-width: 900px) { .inicio-grade { grid-template-columns: 1fr; } .inicio-anel { width: min(360px, 86vw); margin: 6px auto 0; justify-self: center; } .sol-nevoa i { filter: blur(12px); } .sol-nevoa i:nth-child(2) { width: 420px; left: -210px; } .sol-raios { display: none; } .etapas-anel .e-esq { left: 12%; top: 50%; } .etapas-anel .e-base { left: 50%; top: 96%; } .etapas-anel .e-dir { left: 90%; top: 50%; } } /* ---------- pausas e movimento reduzido ---------- */ .c-fora .sol-raios, .c-fora .sol-nevoa i, .c-fora .sol-feixe, .c-oculto .sol-raios, .c-oculto .sol-nevoa i, .c-oculto .sol-feixe { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .sol-nucleo, .sol-halo, .sol-raios, .sol-feixe, .sol-nevoa i { animation: none !important; opacity: 1; } .sol-nevoa i { opacity: .8; } .anel-grande, .sol-nucleo, .sol-nevoa { transition: none; transform: none; } .etapas-anel li { --perto: 1; } } /* ---------- passagem suave da abertura para a primeira seção clara ---------- Sem "folha" com canto arredondado: o céu escuro clareia aos poucos, como névoa sobre a estrada, e a seção seguinte começa no mesmo tom em que a abertura termina. */ #para-quem { margin-top: 0; border-radius: 0; box-shadow: none; background: linear-gradient(180deg, #EEF3FB 0%, #FFFFFF 260px, #FFFFFF 70%, #F4F7FD 100%); } .inicio { padding-bottom: clamp(110px, 10vw, 170px); } .inicio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 16vw, 240px); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 23, 51, 0) 0%, rgba(38, 62, 118, .35) 35%, rgba(150, 172, 220, .62) 66%, rgba(226, 234, 248, .92) 88%, #F6F8FD 100%); } /* mesma névoa na entrada e na saída do "Como funciona" (claro → noite → claro) */ .ciclo { padding-top: clamp(120px, 12vw, 180px); padding-bottom: clamp(120px, 12vw, 180px); } .ciclo > .container { position: relative; z-index: 1; } .ciclo::before, .ciclo::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(110px, 11vw, 170px); z-index: 0; pointer-events: none; } .ciclo::before { top: 0; background: linear-gradient(0deg, rgba(10, 23, 51, 0) 0%, rgba(38, 62, 118, .35) 35%, rgba(150, 172, 220, .62) 66%, rgba(236, 242, 251, .94) 88%, #F6F8FD 100%); } .ciclo::after { bottom: 0; background: linear-gradient(180deg, rgba(10, 23, 51, 0) 0%, rgba(38, 62, 118, .35) 35%, rgba(150, 172, 220, .62) 66%, rgba(236, 242, 251, .94) 88%, #F6F8FD 100%); } #financiamento { background: linear-gradient(180deg, #F4F7FD 0%, #FFFFFF 240px), #fff; } /* ========================================================================== SEÇÕES CLARAS COM VIDA: luz quente do sol (laranja do painel de metas), papel com grão fino, arcos do C ao fundo e cartões que pegam luz onde o mouse passa. Laranja só como acento quente (rótulos, detalhes, brilhos); o verde continua sendo o "sim". ========================================================================== */ :root { --laranja: #E8743F; --laranja-esc: #C2562B; --laranja-claro: #FBE6DC; --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .09 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --arco-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E8743F'/%3E%3Cstop offset='1' stop-color='%235B8CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M93.7 31.7A44 44 0 1 0 93.7 88.3' fill='none' stroke='url(%23a)' stroke-width='1.2'/%3E%3Cpath d='M86 37A34 34 0 1 0 86 83' fill='none' stroke='url(%23a)' stroke-width='.5' stroke-dasharray='1 3'/%3E%3C/svg%3E"); } .secao.clara, #duvidas, .contato, #pre-atendimento { isolation: isolate; overflow: hidden; } /* luz quente num canto, azul no outro, e o grão de papel por cima */ .secao.clara::before, #duvidas::before, .contato::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grao-escuro) 0 0 / 180px 180px, radial-gradient(42% 60% at 100% 0%, rgba(232, 116, 63, .11), transparent 70%), radial-gradient(46% 60% at 0% 100%, rgba(91, 140, 255, .10), transparent 70%); } /* arcos do C entrando pela lateral, bem leves; alternam de lado */ .secao.clara::after, #duvidas::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 760px; height: 760px; top: -180px; right: -330px; background: var(--arco-c) center / contain no-repeat; opacity: .32; transform: rotate(-12deg); } #financiamento::after, #acessos::after { right: auto; left: -360px; top: auto; bottom: -260px; transform: scaleX(-1) rotate(-12deg); } /* rótulos das seções claras em laranja: dá contraste e calor ao branco */ .secao.clara .rotulo, #duvidas .rotulo, .contato .rotulo, #pre-atendimento .rotulo { color: var(--laranja-esc); } .secao.clara .titulo h2 em, .contato .titulo h2 em { color: var(--verde-esc); } /* cartão "Para a sua loja": deixa de ser pálido; borda de luz quente e etiqueta laranja */ .publico-loja { border: 1px solid #F0E2D8; background: radial-gradient(90% 70% at 100% 0%, rgba(232, 116, 63, .12), transparent 60%), radial-gradient(120% 80% at 0% 100%, rgba(91, 140, 255, .08), transparent 60%), linear-gradient(160deg, #FFFFFF 0%, #FBF7F3 100%); box-shadow: inset 0 1px 0 #fff, inset 0 3px 0 rgba(232, 116, 63, .55), 0 2px 6px rgba(10, 23, 51, .06), 0 30px 60px -30px rgba(194, 86, 43, .35); } .publico-loja .publico-tag { color: var(--laranja-esc); } .publico-loja::after { border-color: rgba(194, 86, 43, .07); border-right-color: rgba(232, 116, 63, .35); } .publico-loja .btn-linha-escura::before { background: linear-gradient(180deg, #F08A5D, #C2562B); } .publico-loja .btn-linha-escura:hover { border-color: var(--laranja-esc); } /* veículos: ícone com brilho quente no hover e linha de luz no topo */ .tipo { isolation: isolate; } .tipo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--laranja), var(--caminho), transparent); opacity: 0; transition: opacity .4s; } .tipo:hover::before { opacity: 1; } .tipo:hover svg { background: linear-gradient(180deg, #FFF4EE, #FBE3D6); stroke: var(--laranja-esc); } /* acessos e canais: borda quente no hover */ .acesso:not(.acesso-rheny):hover, .canais li:hover, .faq details:hover { border-color: rgba(232, 116, 63, .5); } .faq summary::after { color: var(--laranja-esc); } .busca input:focus { border-color: var(--laranja); box-shadow: 0 0 0 5px rgba(232, 116, 63, .14); } /* luz que segue o mouse dentro dos cartões claros (o JS põe --px/--py) */ .publico-loja, .tipo, .acesso, .canais li, .pre-form, .aviso-banco { position: relative; isolation: isolate; } .publico-loja .luz-mouse, .tipo .luz-mouse, .acesso .luz-mouse, .canais li .luz-mouse, .pre-form .luz-mouse, .aviso-banco .luz-mouse { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(280px circle at var(--px, 50%) var(--py, 50%), rgba(232, 116, 63, .13), rgba(91, 140, 255, .06) 45%, transparent 70%); } :is(.publico-loja, .tipo, .acesso, .canais li, .pre-form, .aviso-banco):hover .luz-mouse { opacity: 1; } .acesso-rheny .luz-mouse { display: none; } @media (max-width: 760px) { .secao.clara::after, #duvidas::after { width: 460px; height: 460px; right: -260px; top: -120px; } #financiamento::after, #acessos::after { left: -280px; bottom: -180px; } } /* todas as seções claras no mesmo tom de base: sem emenda entre uma e outra; as luzes dos cantos se apagam antes das bordas */ #para-quem, #financiamento, #pre-atendimento, #sobre, #duvidas, #acessos, .contato { background: linear-gradient(180deg, #F6F8FD 0%, #FCFDFF 50%, #F6F8FD 100%); } .secao.clara::before, #duvidas::before, .contato::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .secao.clara::after, #duvidas::after { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); } /* ========================================================================== AMANHECER AO LONGO DA PÁGINA As seções "claras" contam o nascer do sol: a primeira é o céu das 4h30 (azul-acinzentado escuro, sol laranja baixo no horizonte); cada seção seguinte clareia e esquenta um pouco, sem chegar ao branco total. Cada seção começa no tom em que a anterior terminou (sem emendas). --c1/--c2 = tom do topo/base · --s = força do sol laranja (diminui conforme ele sobe) ========================================================================== */ #para-quem { --c1: #A3AEC6; --c2: #AFB8CD; --s: .30; --sy: 82%; --rot: #5A2208; } #financiamento { --c1: #B4BCCF; --c2: #BEC4D4; --s: .25; --sy: 74%; --rot: #85340F; } #pre-atendimento { --c1: #C3C7D5; --c2: #CCCDD8; --s: .21; --sy: 66%; --rot: #8E3A13; } #sobre { --c1: #D0D0D9; --c2: #D8D5DB; --s: .17; --sy: 56%; --rot: #983F16; } #duvidas { --c1: #DCD8DD; --c2: #E3DDDF; --s: .14; --sy: 46%; --rot: #A2451A; } #acessos { --c1: #E6E0E1; --c2: #EBE5E3; --s: .11; --sy: 36%; --rot: #AA4A1F; } .contato { --c1: #EEE8E5; --c2: #F2EDE9; --s: .08; --sy: 26%; --rot: #B04D24; } #para-quem, #financiamento, #pre-atendimento, #sobre, #duvidas, #acessos, .contato { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); --texto-2: #2C3B59; } /* o sol laranja nasce baixo e vai subindo de seção em seção; azul frio do outro lado */ #para-quem::before, #financiamento::before, #pre-atendimento::before, #sobre::before, #duvidas::before, #acessos::before, .contato::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grao-escuro) 0 0 / 180px 180px, radial-gradient(60% 55% at 78% var(--sy), rgba(232, 116, 63, var(--s)), rgba(232, 116, 63, calc(var(--s) * .35)) 40%, transparent 72%), radial-gradient(48% 60% at 6% 20%, rgba(52, 82, 160, .14), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); } #para-quem .rotulo, #financiamento .rotulo, #pre-atendimento .rotulo, #sobre .rotulo, #duvidas .rotulo, #acessos .rotulo, .contato .rotulo { color: var(--rot); } /* textos fora dos cartões um tom mais firmes nos céus mais escuros */ #para-quem .titulo p, #financiamento .titulo p, #pre-atendimento .titulo p, #sobre .titulo p, .numeros span { color: #26344F; } .pre-aviso { border-left-color: var(--laranja-esc) !important; } #pre-atendimento .c-luz { opacity: .35; } /* cartões brancos ganham mais presença sobre o céu */ .tipo, .acesso:not(.acesso-rheny), .canais li, .faq details, .aviso-banco, .pre-form, .busca input { border-color: rgba(255, 255, 255, .7); } .tipo, .acesso, .canais li, .faq details, .aviso-banco { box-shadow: 0 1px 2px rgba(10, 23, 51, .08), 0 22px 44px -24px rgba(10, 23, 51, .5); } /* passagens: a névoa da abertura termina no céu da 1ª seção; o "Como funciona" emenda nos tons vizinhos */ .inicio::after { background: linear-gradient(180deg, rgba(10, 23, 51, 0) 0%, rgba(40, 58, 102, .45) 40%, rgba(120, 138, 178, .8) 75%, #A3AEC6 100%); } .ciclo::before { background: linear-gradient(0deg, rgba(10, 23, 51, 0) 0%, rgba(40, 58, 102, .45) 40%, rgba(130, 145, 180, .8) 75%, #AFB8CD 100%); } .ciclo::after { background: linear-gradient(180deg, rgba(10, 23, 51, 0) 0%, rgba(40, 58, 102, .45) 40%, rgba(140, 152, 186, .8) 75%, #B4BCCF 100%); } /* ========================================================================== UM CÉU SÓ, DO COMEÇO AO FIM Em vez de cada seção ter o seu fundo (o que criava faixas), a página inteira tem um único amanhecer contínuo atrás de tudo. As seções ficam transparentes; o "Como funciona" e a foto da estrada se dissolvem nesse céu com bordas longas e macias. ========================================================================== */ html { background: #A3AEC6; } body { background: linear-gradient(180deg, #A3AEC6 0%, #A6B1C8 12%, #B6BED1 30%, #C8CAD6 48%, #D7D5DC 64%, #E4DEE0 80%, #EFE9E6 92%, #F2EDE9 100%); } #para-quem, #financiamento, #pre-atendimento, #sobre, #duvidas, #acessos, .contato { background: transparent; } /* "Como funciona": uma nuvem de noite no meio do céu, sem bordas retas */ .ciclo { background: radial-gradient(ellipse 120% 64% at 50% 50%, #0A1733 0%, #0C1C42 40%, rgba(14, 30, 70, .8) 54%, rgba(36, 54, 102, .32) 67%, rgba(60, 78, 124, 0) 77%); padding-top: clamp(170px, 16vw, 240px); padding-bottom: clamp(170px, 16vw, 240px); } .ciclo::before, .ciclo::after { display: none; } .ciclo .c-cena { -webkit-mask-image: radial-gradient(ellipse 120% 60% at 50% 50%, #000 52%, transparent 86%); mask-image: radial-gradient(ellipse 120% 60% at 50% 50%, #000 52%, transparent 86%); } /* foto da estrada: entra e sai do céu esfumando */ .faixa-estrada { background: transparent; padding: 140px 16px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); } /* rodapé: a noite volta aos poucos depois do contato */ .contato { border-radius: 0; margin-bottom: 0; box-shadow: none; } .rodape { background: linear-gradient(180deg, rgba(242, 237, 233, 0) 0%, rgba(120, 128, 158, .55) 70px, #1A2546 170px, #081434 260px, #060E22 50%, #040A19 100%); padding-top: 230px; } .rodape .c-cena { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 150px, #000 280px); mask-image: linear-gradient(180deg, transparent 0, transparent 150px, #000 280px); } .c-divisa { display: none; } /* sem divisões entre seções, o tracejado da estrada não é mais necessário */ /* ---------- abertura se dissolvendo na seção 2 (sem linha de horizonte no fim) ---------- O céu da abertura fica transparente embaixo e deixa ver o céu da página, que começa mais escuro e só alcança o tom da seção 2 lá dentro dela: as duas se misturam. */ .inicio { background: linear-gradient(180deg, #030817 0%, #071230 30%, #0B1A3D 58%, rgba(11, 26, 61, .55) 82%, rgba(11, 26, 61, 0) 100%); padding-bottom: clamp(200px, 18vw, 300px); } .inicio::after { display: none; } .inicio .c-cena { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); } body { background: linear-gradient(180deg, #0B1A3D 0%, #3C4C78 9%, #7C89AC 15%, #A3AEC6 21%, #B6BED1 32%, #C8CAD6 48%, #D7D5DC 64%, #E4DEE0 80%, #EFE9E6 92%, #F2EDE9 100%); } #para-quem { margin-top: -120px; padding-top: 160px; } /* ---------- título: 4 opções para comparar (?titulo=1..4) ---------- */ /* 1 · Relevo perolado: letras com luz por cima, sombra por baixo e um degrau de profundidade */ .t1 .inicio h1 { background-image: var(--grao), linear-gradient(180deg, #FFFFFF 0%, #F6F2EA 48%, #C3CDE3 100%); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)) drop-shadow(0 3px 0 rgba(6, 14, 36, .85)) drop-shadow(0 16px 26px rgba(2, 6, 18, .65)); } /* 2 · Luz do sol nas letras: o lado mais perto do C é aceso em champanhe, com halo */ .t2 .inicio h1 { font-size: clamp(44px, 6.8vw, 80px); background-image: var(--grao), radial-gradient(85% 170% at 102% 58%, #FFD9A0 0%, #FFF1DA 26%, rgba(255, 255, 255, 0) 56%), linear-gradient(180deg, #FFFFFF, #E4EAF6); filter: drop-shadow(0 0 30px rgba(255, 210, 150, .22)) drop-shadow(0 12px 30px rgba(2, 6, 18, .6)); } /* 3 · Hierarquia: "Com você do" como entrada, "início ao sim." grande e pesado */ .t3 .inicio h1 .h-entrada, .t4 .inicio h1 .h-entrada { display: block; font-size: .62em; font-weight: 600; letter-spacing: -.01em; margin-bottom: .08em; opacity: .82; } .t3 .inicio h1, .t4 .inicio h1 { font-size: clamp(44px, 6.1vw, 80px); line-height: 1; } /* 4 · Hierarquia + relevo + luz: a 3 com o relevo perolado e a luz quente do sol */ .t4 .inicio h1 { background-image: var(--grao), radial-gradient(80% 160% at 104% 70%, #FFDDA8 0%, #FFF3E0 24%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #FFFFFF 0%, #F4F0E8 50%, #C8D1E5 100%); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .22)) drop-shadow(0 3px 0 rgba(6, 14, 36, .8)) drop-shadow(0 0 26px rgba(255, 210, 150, .18)) drop-shadow(0 16px 28px rgba(2, 6, 18, .6)); } /* estrada longa: atrás de todo o conteúdo, aparece onde a estrada da abertura some e se apaga lá embaixo */ .estrada-longa { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--m1), #000 var(--m2), #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent var(--m1), #000 var(--m2), #000 70%, transparent 100%); } .estrada-longa svg { display: block; max-width: none; } body { position: relative; z-index: 0; } /* o body vira a "camada" da página: a estrada fica acima do céu e abaixo do conteúdo */ /* o trecho escuro do céu acompanha o fim real da abertura (o js/fundo.js mede e põe --fi no body), assim a seção 2 começa no mesmo tom no computador e no celular */ body { background: linear-gradient(180deg, #0B1A3D 0, #2A3A66 calc(var(--fi, 1000px) - 420px), #6F7DA2 calc(var(--fi, 1000px) - 170px), #A3AEC6 calc(var(--fi, 1000px) + 90px), #B6BED1 32%, #C8CAD6 48%, #D7D5DC 64%, #E4DEE0 80%, #EFE9E6 92%, #F2EDE9 100%); }