/* Site-wide motion layer. Everything is opt-in via JS (the `motion-on` class is only added when JS runs and the user hasn't asked for reduced motion), so with no JS / reduced motion nothing is hidden and there's zero layout risk. Goal: ultra-smooth, premium feel — calm entrances, frosted sticky nav, a thin scroll-progress rail, and refined hover micro-interactions. On-brand throughout (accent #9b51e0, indigo #6320ee, ink #1c1548, Poppins). */ :root { /* shared easings — expo-out reads as "premium/decelerating", the soft one for hovers */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1); } /* Off-flow marker the nav's IntersectionObserver watches to know when the page has scrolled past the top (no scroll listener needed). Always positioned, regardless of motion preference, since it only feeds the observer. */ .scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* ============================================================ Scroll-progress rail — thin gradient bar pinned to the top. Pure CSS scroll-driven animation (no scroll listener). On browsers without scroll-timeline support it stays at scaleX(0), i.e. invisible — a clean no-op fallback for a decorative element. ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000; background: linear-gradient(90deg, #9b51e0, #6320ee); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; pointer-events: none; animation: scrollProgress linear both; animation-timeline: scroll(root); } @keyframes scrollProgress { to { transform: scaleX(1); } } /* ============================================================ Sticky frosted-glass nav. Transparent at the top of the page; on scroll it gains a translucent white backdrop, blur, and a soft lift. ============================================================ */ /* The frosted layer lives on the full-width sticky wrapper (a direct child of ), so the glass spans the whole viewport edge-to-edge. The inner .shadow-three container is max-width 1332px with 60px side margins, so the CONTENT stays contained while the glass goes full-bleed. Low alpha + strong blur = real frosted glass, not an opaque white bar. */ .navbar-logo-left { position: sticky; top: 0; z-index: 100; transition: background-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), backdrop-filter 0.35s var(--ease-soft); } .navbar-logo-left.nav-scrolled { background-color: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(28, 21, 72, 0.06), 0 10px 30px rgba(28, 21, 72, 0.06); } /* logo shrinks a touch once docked — subtle "condensed" cue */ .navbar-brand .image { transition: transform 0.35s var(--ease-soft); } .navbar-logo-left.nav-scrolled .navbar-brand .image { transform: scale(0.95); } /* ============================================================ Hero entrance (homepage). Staggered cascade on load. Scoped to homepage-only classes so other pages are untouched. `both` fill-mode holds the hidden start state before paint, so there's no flash of fully-rendered → hidden. ============================================================ */ .motion-on .container-homepage > * { opacity: 0; animation: heroRise 0.9s var(--ease-premium) both; } .motion-on .container-homepage > .smalluppercaseheading { animation-delay: 0.05s; } .motion-on .container-homepage > .sectionheading { animation-delay: 0.16s; } .motion-on .container-homepage > .textdescription { animation-delay: 0.3s; } .motion-on .container-homepage > .c2a { animation-delay: 0.44s; } @keyframes heroRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } /* hero image drifts in from the right with a gentle settle */ .motion-on #Overview .image-5 { opacity: 0; animation: heroImage 1.15s var(--ease-premium) 0.22s both; } @keyframes heroImage { from { opacity: 0; transform: translate3d(34px, 0, 0) scale(1.04); } to { opacity: 1; transform: none; } } /* ============================================================ Scroll reveal — refined: longer travel, expo easing, soft blur-in for a high-end "developing into focus" feel. ============================================================ */ .motion-on [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); will-change: opacity, transform, filter; } .motion-on [data-reveal].in-view { opacity: 1; transform: none; filter: none; transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-premium), filter 0.8s var(--ease-soft); } /* "How it works" numbered badges pop in with a soft overshoot */ .motion-on .div-block-2[data-reveal] { opacity: 0; transform: scale(0.7) translateY(18px); filter: none; } .motion-on .div-block-2[data-reveal].in-view { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.7s var(--ease-overshoot); } /* ============================================================ Buttons — refined lift + a light-sweep sheen on hover. Primary CTAs get a subtle on-brand gradient for depth. ============================================================ */ .c2a, .c2anav, .c2asubmit { background-image: linear-gradient(135deg, #9b51e0 0%, #6320ee 100%); position: relative; overflow: hidden; isolation: isolate; } .w-button { transition: transform 0.22s var(--ease-soft), box-shadow 0.28s var(--ease-soft), filter 0.22s var(--ease-soft); } .w-button:hover { transform: translateY(-2px); } .w-button:active { transform: translateY(0); transition-duration: 0.08s; } .c2a:hover, .c2anav:hover, .c2asubmit:hover { /* subtle brand-tinted lift shadow, not a neon glow */ box-shadow: 0 10px 22px rgba(28, 21, 72, 0.16); filter: brightness(1.03); } /* the sheen: a soft diagonal highlight that sweeps across on hover */ .c2a::after, .c2anav::after, .c2asubmit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 115deg, transparent 25%, rgba(255, 255, 255, 0.32) 48%, transparent 62% ); transform: translateX(-120%); transition: transform 0.7s var(--ease-soft); } .c2a:hover::after, .c2anav:hover::after, .c2asubmit:hover::after { transform: translateX(120%); } /* secondary / outline CTA keeps a clean lift without the gradient */ .c2alearnmore { transition: transform 0.22s var(--ease-soft), box-shadow 0.28s var(--ease-soft); } .c2alearnmore:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(155, 81, 224, 0.22); } /* ============================================================ Nav links — sliding gradient underline that grows from the left; persists for the current page. ============================================================ */ .nav-link { position: relative; transition: color 0.18s var(--ease-soft); } .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #9b51e0, #6320ee); transform: scaleX(0); transform-origin: left center; transition: transform 0.32s var(--ease-premium); } .nav-link:hover { color: #9b51e0; } .nav-link:hover::after, .nav-link.w--current::after { transform: scaleX(1); } /* ============================================================ Audience / value-prop icon row (#3points) — gentle hover lift. ============================================================ */ /* NOTE: the id starts with a digit, so it must be attribute-selected, not `#3points`. */ [id="3points"] .image-2 { transition: transform 0.3s var(--ease-soft); } [id="3points"] .column:hover .image-2, [id="3points"] .column-2:hover .image-2, [id="3points"] .column-3:hover .image-2 { transform: translateY(-6px) scale(1.04); } /* Blog card image gets a gentle zoom on hover */ .blog-card-img { transition: transform 0.5s var(--ease-premium); } .blog-card:hover .blog-card-img { transform: scale(1.045); } /* ============================================================ Team photos (About): spin + pop in, with a hover ring. ============================================================ */ .team-photo { border-radius: 50%; transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft); } .motion-on .team-photo[data-reveal] { opacity: 0; transform: scale(0.45) rotate(-22deg); filter: none; } .motion-on .team-photo[data-reveal].in-view { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.8s var(--ease-overshoot); } .team-photo:hover { transform: scale(1.06) rotate(3deg); box-shadow: 0 10px 28px rgba(155, 81, 224, 0.32), 0 0 0 4px rgba(155, 81, 224, 0.16); } /* ============================================================ Footer + social links. ============================================================ */ .footer-link2, .footer-link { transition: color 0.16s var(--ease-soft); } .footer-link2:hover, .footer-link:hover { color: #9b51e0; } .footer-social-link { transition: transform 0.2s var(--ease-soft), opacity 0.2s var(--ease-soft); } .footer-social-link:hover { transform: translateY(-3px); opacity: 0.85; } }