/* ============================================================ AVANTCERT · home-conversion.css Conversion + animation layer for index.html ONLY. All classes prefixed .hc-* (zero collision with avantcert.css) Solid colours only — NO gradients. Navy #001F3F · Orange #FD910B ============================================================ */ /* ---------- scroll-reveal (JS adds .hc-anim to , .hc-in on enter) ---------- */ .hc-anim .hc-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--hd,0s);} .hc-anim .hc-reveal.hc-in{opacity:1;transform:none;} /* ---------- H1 rotating power phrase ---------- */ .hc-rotate-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;} .hc-rotate{display:inline-block;will-change:transform,opacity;} .hc-rotate.hc-out{animation:hcWordOut .28s ease-in forwards;} .hc-rotate.hc-in-word{animation:hcWordIn .34s cubic-bezier(.22,.61,.36,1);} @keyframes hcWordOut{to{opacity:0;transform:translateY(-115%);}} @keyframes hcWordIn{from{opacity:0;transform:translateY(115%);}to{opacity:1;transform:none;}} /* ---------- hero CTA row + micro risk-reversal ---------- */ .hc-hero-cta{display:flex;align-items:center;gap:14px;margin-top:1.4rem;flex-wrap:wrap;} .hc-micro{font-size:.82rem;color:#5B6B82;font-weight:600;letter-spacing:.01em;} .hc-micro--light{color:rgba(255,255,255,.85);margin-top:.9rem;font-size:.85rem;} /* ---------- CTA pulse (solid-colour shadow ring, no gradient) ---------- */ .hc-pulse{animation:hcPulse 2.6s ease-out infinite;} .hc-pulse:hover{animation-play-state:paused;transform:translateY(-2px);} @keyframes hcPulse{0%{box-shadow:0 0 0 0 rgba(253,145,11,.45);}55%{box-shadow:0 0 0 16px rgba(253,145,11,0);}100%{box-shadow:0 0 0 0 rgba(253,145,11,0);}} /* ---------- form card glow when in view (JS toggles .hc-glow) ---------- */ .hc-glow{animation:hcGlow 2.2s ease-in-out 3;} @keyframes hcGlow{0%,100%{box-shadow:0 18px 44px rgba(0,31,63,.16);}50%{box-shadow:0 0 0 4px rgba(253,145,11,.35),0 18px 44px rgba(0,31,63,.16);}} /* ---------- pain strip ---------- */ .hc-pain{background:#001F3F;padding:4.5rem 0;} .hc-pain__kicker{color:#FFA733;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;text-align:center;margin:0 0 2rem;} .hc-pain__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;} .hc-pain__card{background:#0A2A4D;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:1.9rem 1.7rem;display:flex;flex-direction:column;transition:transform .3s ease,border-color .3s ease;} .hc-pain__card:hover{transform:translateY(-6px);border-color:rgba(253,145,11,.55);} .hc-pain__icon{width:42px;height:42px;color:#FD910B;margin-bottom:1rem;} .hc-pain__card.hc-in .hc-pain__icon{animation:hcShake .5s ease .45s 1;} @keyframes hcShake{0%,100%{transform:rotate(0);}25%{transform:rotate(-9deg);}50%{transform:rotate(7deg);}75%{transform:rotate(-4deg);}} .hc-pain__card h3{color:#fff;font-size:1.18rem;line-height:1.35;margin:0 0 .65rem;} .hc-pain__card p{color:rgba(255,255,255,.78);font-size:.97rem;line-height:1.6;margin:0 0 1.2rem;flex-grow:1;} .hc-pain__card a{color:#FFA733;font-weight:700;text-decoration:none;font-size:.95rem;} .hc-pain__card a:hover{color:#fff;} /* ---------- process final-step CTA ---------- */ .hc-step-cta{display:inline-block;margin-top:.8rem;color:#C76C00;font-weight:700;text-decoration:none;} .hc-step-cta:hover{color:#FD910B;} /* ---------- scroll progress bar ---------- */ .hc-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#FD910B;z-index:10001;pointer-events:none;} /* ---------- sticky CTA pill (appears after hero) ---------- */ .hc-sticky{position:fixed;left:16px;bottom:16px;z-index:9990;display:flex;align-items:center;gap:12px;background:#001F3F;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 16px 40px rgba(0,31,63,.35);transform:translateY(140%);transition:transform .45s cubic-bezier(.22,.61,.36,1);max-width:min(92vw,430px);} .hc-sticky[hidden]{display:none;} .hc-sticky.hc-show{transform:none;} .hc-sticky p{margin:0;font-size:.9rem;line-height:1.3;} .hc-sticky__btn{background:#FD910B;color:#001F3F;font-weight:800;text-decoration:none;padding:9px 16px;border-radius:999px;white-space:nowrap;font-size:.9rem;transition:transform .2s ease;} .hc-sticky__btn:hover{transform:translateY(-2px);} .hc-sticky__close{background:none;border:none;color:rgba(255,255,255,.65);font-size:1.3rem;cursor:pointer;padding:2px 6px;line-height:1;} .hc-sticky__close:hover{color:#fff;} @media(max-width:480px){.hc-sticky{left:10px;right:84px;max-width:none;padding-left:14px;}.hc-sticky p{font-size:.8rem;}} /* ---------- exit-intent modal ---------- */ .hc-exit{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,15,31,.62);opacity:0;transition:opacity .3s ease;} .hc-exit[hidden]{display:none;} .hc-exit.hc-show{opacity:1;} .hc-exit__card{position:relative;background:#fff;border-radius:20px;padding:2.6rem 2.4rem 2.2rem;max-width:430px;width:calc(100vw - 40px);text-align:center;box-shadow:0 30px 80px rgba(0,15,31,.4);transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.22,.61,.36,1);} .hc-exit.hc-show .hc-exit__card{transform:none;} .hc-exit__tag{display:inline-block;background:#FFF6EA;color:#C76C00;border:1px solid #FFE0B3;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:1rem;} .hc-exit__card h3{color:#0B1F3A;font-size:1.5rem;line-height:1.3;margin:0 0 .7rem;} .hc-exit__card>p,.hc-exit__card .hc-exit__lead{color:#5B6B82;font-size:1rem;line-height:1.55;margin:0 0 1.4rem;} .hc-exit__btn{display:inline-block;background:#FD910B;color:#001F3F;font-weight:800;text-decoration:none;padding:13px 28px;border-radius:12px;font-size:1.02rem;transition:transform .2s ease,box-shadow .2s ease;} .hc-exit__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(253,145,11,.4);} .hc-exit__micro{color:#8A97A8;font-size:.8rem;margin:1rem 0 0;} .hc-exit__close{position:absolute;top:12px;right:16px;background:none;border:none;color:#8A97A8;font-size:1.6rem;cursor:pointer;line-height:1;} .hc-exit__close:hover{color:#0B1F3A;} /* ---------- counters ---------- */ .stat-number[data-hc-count]{font-variant-numeric:tabular-nums;} /* ---------- reduced motion: kill everything ---------- */ @media (prefers-reduced-motion: reduce){ .hc-anim .hc-reveal{opacity:1;transform:none;transition:none;} .hc-rotate.hc-out,.hc-rotate.hc-in-word,.hc-pulse,.hc-glow,.hc-pain__card.hc-in .hc-pain__icon{animation:none !important;} .hc-sticky{transition:none;} .hc-exit,.hc-exit__card{transition:none;} } /* ============================================================ Floating-button stack — never overlap the CRM chatbot bubble (homepage only; chatbot owns the bottom-right corner, our WhatsApp + back-to-top buttons stack vertically above it). --hc-wa-bottom is refined at runtime by home-conversion.js to sit exactly above the real chatbot; this is the safe default. ============================================================ */ :root{ --hc-wa-bottom:100px; } .whatsapp-float{ bottom:var(--hc-wa-bottom); right:var(--hc-fab-right,var(--space-8,2rem)); } .whatsapp-float.shift-left{ right:var(--hc-fab-right,var(--space-8,2rem)); } /* cancel horizontal shift → vertical stack */ .back-to-top{ bottom:calc(var(--hc-wa-bottom) + 72px); right:var(--hc-fab-right,var(--space-8,2rem)); } @media (max-width:480px){ .whatsapp-float,.back-to-top{ right:var(--hc-fab-right,16px); } }