/* ============================================================================ FlowPE Digital — Camada de movimento PREMIUM (flowpe-motion.css) · v22 Acopla animações sobre o site existente, sem reescrever o styles.css. Ligado por .fx-on no (via motion.js) e respeita prefers-reduced-motion. Tudo degrada com segurança: se o JS não rodar, o site fica idêntico ao normal. ============================================================================ */ /* ---------- entrada ao rolar (reveal) ---------- */ .fx-on .fx-reveal{ opacity:0; transform:translateY(30px) scale(.985); filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; } .fx-on .fx-reveal.in{opacity:1;transform:none;filter:none} .fx-on .fx-reveal.d1{transition-delay:.07s}.fx-on .fx-reveal.d2{transition-delay:.14s} .fx-on .fx-reveal.d3{transition-delay:.21s}.fx-on .fx-reveal.d4{transition-delay:.28s} .fx-on .fx-reveal.d5{transition-delay:.35s}.fx-on .fx-reveal.d6{transition-delay:.42s} /* ---------- gradiente de texto "vivo" (shimmer) ---------- */ .fx-on .gradient-text{ background-size:200% auto; animation:fxShimmer 6s linear infinite; } @keyframes fxShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}} /* ---------- TÍTULO: branco com a cor da marca PERCORRENDO as letras ---------- O texto fica predominantemente branco e um feixe colorido (gradiente FlowPE) atravessa a frase em loop, como uma luz passando. Sofisticado e legível. */ .fx-on .fx-title-grad{ background:linear-gradient(100deg, #fff 0%, #fff 30%, #FF8A3D 42%, #F0509E 50%, #6A4FE8 58%, #4A9FF0 66%, #fff 78%, #fff 100%); background-size:280% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:fxTitleSweep 7.5s ease-in-out infinite; } .fx-on .fx-title-grad .gradient-text{ background:none!important;-webkit-text-fill-color:inherit!important;color:inherit!important;animation:none!important; } @keyframes fxTitleSweep{ 0%{background-position:120% 50%} 100%{background-position:-40% 50%} } /* ---------- brilho que segue o cursor nos cards ---------- */ .fx-on .card{position:relative} .fx-on .card .fx-sheen{ position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .2s;pointer-events:none;z-index:1; background:radial-gradient(200px 200px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 60%); } .fx-on .card:hover .fx-sheen{opacity:1} .fx-on .card > *:not(.fx-sheen){position:relative;z-index:2} .fx-on .card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease} .fx-on .card:hover{transform:translateY(-6px);border-color:rgba(238,77,45,.45);box-shadow:0 22px 60px rgba(0,0,0,.45)} /* cards com leve inclinação 3D ao passar o mouse (premium, via JS define --rx/--ry) */ .fx-on.fx-extra .grid-3 > .card, .fx-on.fx-extra .grid-2 > .card{ transform-style:preserve-3d; } .fx-on.fx-extra .card.fx-tilt3d{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); } /* ---------- "respiração" sutil em loop ---------- */ .fx-on.fx-extra .badge{animation:fxFloat 5s ease-in-out infinite} @keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* ---------- botão primário com brilho passando ---------- */ .fx-on .btn-primary{position:relative;overflow:hidden} .fx-on .btn-primary::after{ content:"";position:absolute;top:0;left:0;width:40%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.30),transparent); transform:translateX(-160%);pointer-events:none; } .fx-on.fx-extra .btn-primary::after{animation:fxSweep 3.6s ease-in-out infinite} @keyframes fxSweep{0%{transform:translateX(-160%)}60%,100%{transform:translateX(260%)}} /* ---------- BARRAS DE PROGRESSO animadas (panel-line > i) ---------- */ /* começam zeradas e crescem até a largura real (definida inline) quando entram na tela */ .fx-on .panel-line > i{ width:0 !important; transition:width 1.2s cubic-bezier(.2,.7,.2,1); } .fx-on .panel-line.fx-fill > i{ width:var(--fx-w) !important; } /* ---------- HERO da HOME: camadas de fundo ---------- */ .fx-liquid-canvas, .fx-net-canvas{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none; } .fx-liquid-canvas{z-index:0;opacity:.5} /* -60%: era .55→.5 e o JS reduz o alpha das cores */ .fx-net-canvas{z-index:1} .fx-orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.34;z-index:0;will-change:transform;pointer-events:none} .fx-orb.a{width:420px;height:420px;background:radial-gradient(circle,#F0509E,transparent 70%);top:-60px;left:-40px} .fx-orb.b{width:480px;height:480px;background:radial-gradient(circle,#4A9FF0,transparent 70%);bottom:-100px;right:-60px} .fx-on.fx-extra .fx-orb{animation:fxPulse 8s ease-in-out infinite} .fx-on.fx-extra .fx-orb.b{animation-duration:10s;animation-delay:-2s} @keyframes fxPulse{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.46;transform:scale(1.07)}} .fx-on .hero > .container{position:relative;z-index:3} /* ---------- F / logo do hero com profundidade 3D ---------- */ .fx-on .logo-stage{perspective:1100px} .fx-on .fx-3d-target{ transition:transform .12s linear; transform-style:preserve-3d; will-change:transform; } .fx-on.fx-extra .fx-3d-target{animation:fxFloat3d 6s ease-in-out infinite} @keyframes fxFloat3d{0%,100%{filter:drop-shadow(0 16px 30px rgba(106,79,232,.35))}50%{filter:drop-shadow(0 26px 44px rgba(240,80,158,.45))}} /* ---------- respeita quem prefere menos movimento ---------- */ /* ============================================================================ CAMADA DE REFINO CLEAN (v22) — ativa junto com o movimento (.fx-on) Mais respiro, tipografia marcante, cards minimalistas. Mantém cores FlowPE. ============================================================================ */ .fx-on .hero h1, .fx-on .page-hero h1{ letter-spacing:-.025em; line-height:1.05; padding-bottom:.08em; font-size:clamp(34px,5.4vw,66px); } .fx-on .hero .lead, .fx-on .page-hero .lead{ font-weight:400; line-height:1.62; opacity:.92; } .fx-on .hero .badge, .fx-on .page-hero .badge{ background:transparent; border-color:transparent; padding:0; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-size:11.5px; font-weight:800; } .fx-on .hero .badge .badge-dot, .fx-on .page-hero .badge .badge-dot{ width:7px;height:7px;border-radius:50%; background:linear-gradient(120deg,#FF8A3D,#F0509E,#6A4FE8,#4A9FF0); } .fx-on .section{ padding-top:88px; padding-bottom:88px; } .fx-on .card{ box-shadow:0 8px 30px rgba(0,0,0,.18); border-color:rgba(255,255,255,.08); } .fx-on .card:hover{ box-shadow:0 18px 50px rgba(0,0,0,.30); } .fx-on .section-title{ letter-spacing:-.02em; } .fx-on .section-sub{ opacity:.85; } @media (prefers-reduced-motion: reduce){ .fx-on .fx-reveal{opacity:1!important;transform:none!important;filter:none!important} .fx-on .panel-line > i{width:var(--fx-w,0)!important;transition:none!important} .fx-on .gradient-text,.fx-on .card,.fx-on .badge,.fx-on .fx-orb, .fx-on .fx-3d-target,.fx-on .btn-primary::after{animation:none!important} .fx-liquid-canvas,.fx-net-canvas{display:none!important} } /* ============================================================================ CAMADA CLEAN — refinamento visual (ativa com .fx-on, reversível pelo interruptor) Mantém 100% as cores FlowPE; só dá mais respiro, sutileza e sofisticação. ============================================================================ */ /* mais respiro nas seções e hero */ .fx-on .section{padding:96px 0} .fx-on .hero{padding:92px 0 64px} .fx-on .hero-grid{gap:48px} .fx-on .section-sub{font-size:16.5px;line-height:1.65} /* kicker mais discreto e sofisticado (sem peso de pílula cheia) */ .fx-on .kicker.badge{ background:transparent;border:none;padding:0;color:var(--muted); font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; } .fx-on .kicker.badge .badge-dot{box-shadow:0 0 16px rgba(74,159,240,.6)} /* tipografia do título: um respiro a mais entre linhas e tracking elegante */ .fx-on .hero h1{letter-spacing:-.035em;line-height:1.0} .fx-on .section-title{letter-spacing:-.035em} /* cards minimalistas: borda sutil, sombra leve, canto refinado */ .fx-on .card{ border-radius:20px; border-color:rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(0,0,0,.18); background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); } .fx-on .card:hover{box-shadow:0 18px 48px rgba(0,0,0,.32);border-color:rgba(238,77,45,.35)} /* trust pills mais leves */ .fx-on .trust-pill{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)} /* botões: cantos e foco mais limpos */ .fx-on .btn{border-radius:13px} .fx-on .btn-soft{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} /* CTA box mais clean (menos brilho, mais elegância) */ .fx-on .cta-box{ border-radius:26px; border-color:rgba(255,255,255,.10); box-shadow:0 18px 50px rgba(0,0,0,.28); } /* tema claro: ajustes equivalentes pra não perder contraste */ html[data-theme="light"] .fx-on .card{border-color:rgba(15,23,41,.08);background:#fff;box-shadow:0 8px 26px rgba(15,23,41,.07)} html[data-theme="light"] .fx-on .kicker.badge{color:rgba(15,23,41,.6)} /* ============================================================================ v23 · varredura premium em TODOS os títulos importantes O título original permanece legível; uma camada de gradiente percorre a frase inteira, não apenas o trecho dentro de .gradient-text. ============================================================================ */ .fx-on .fx-title-grad{ position:relative!important; display:block; color:var(--text)!important; -webkit-text-fill-color:currentColor!important; background:none!important; isolation:isolate; } .fx-on .fx-title-grad .gradient-text{ background:none!important; color:inherit!important; -webkit-text-fill-color:inherit!important; animation:none!important; } .fx-on .fx-title-grad::after{ content:attr(data-fx-title); position:absolute; inset:0; display:block; width:100%; pointer-events:none; z-index:1; color:transparent; -webkit-text-fill-color:transparent; background:linear-gradient(100deg, transparent 0%, transparent 24%, #FF8A3D 34%, #F0509E 43%, #6A4FE8 52%, #4A9FF0 61%, transparent 72%, transparent 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; animation:fxTitleSweepFull 6.8s linear infinite; text-shadow:none; } @keyframes fxTitleSweepFull{0%{background-position:130% 50%}100%{background-position:-90% 50%}} .fx-on .section-title.fx-title-grad,.fx-on .cta-box h2.fx-title-grad,.fx-on .feature-band h2.fx-title-grad{display:inline-block;max-width:100%} .fx-on .section-title.fx-title-grad::after,.fx-on .cta-box h2.fx-title-grad::after,.fx-on .feature-band h2.fx-title-grad::after{white-space:normal} .fx-on .visual-card{transform-style:preserve-3d}.fx-on .logo-stage{transform-style:preserve-3d} .fx-on .logo-stage .fx-3d-target{transform-origin:center;backface-visibility:hidden} @media (prefers-reduced-motion:reduce){.fx-on .fx-title-grad::after{animation:none!important;background-position:45% 50%}} /* ============================================================================ v25 · Hero de entrada no padrão do demo + F 3D no palco central ============================================================================ */ .fx-on .hero-revolution h1{font-size:clamp(44px,7.4vw,92px)!important;line-height:.98!important;letter-spacing:-.062em!important;padding-bottom:.08em} .fx-on .hero-revolution .lead{max-width:720px!important;font-size:clamp(16px,1.7vw,20px)!important;line-height:1.65!important} .fx-on .hero-eyebrow{animation:fxFadeUp .9s .12s both} .fx-on .hero-fstage{animation:fxLogoRise 1s .24s both, fxFloat 5.6s 1.4s ease-in-out infinite} .fx-on .hero-revolution .hero-actions{animation:fxFadeUp .9s .55s both} .fx-on .hero-revolution .trust-strip{animation:fxFadeUp .9s .72s both} @keyframes fxFadeUp{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}} @keyframes fxLogoRise{from{opacity:0;transform:translateY(20px) scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} .fx-on .hero-fstage.logo-stage{perspective:1100px!important} .fx-on .hero-fstage.logo-stage .fx-3d-target{transform-origin:center!important;backface-visibility:hidden!important} .fx-on .hero > .container.hero-revolution{position:relative;z-index:3} .fx-on .fx-liquid-canvas{opacity:.64} .fx-on .fx-net-canvas{opacity:.80} .fx-on .fx-orb.a{width:460px;height:460px;top:-80px;left:-60px}.fx-on .fx-orb.b{width:520px;height:520px;right:-80px;bottom:-120px} @media(max-width:560px){.fx-on .hero-revolution h1{font-size:clamp(36px,12vw,56px)!important;line-height:1.02!important}.fx-on .hero-fstage{animation:fxLogoRise .9s .18s both, fxFloat 5.6s 1.2s ease-in-out infinite}}