/* Zero Cut - shared custom styles. Tailwind CDN handles utilities; this file is for keyframes, gradients, and overrides used across pages. */ * { font-family: 'Inter', system-ui, sans-serif; } /* Alpine: keep x-show/x-if elements hidden until Alpine initialises, otherwise they flash visible during page load. */ [x-cloak] { display: none !important; } /* Gradients */ .gradient-hero { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%); } .gradient-cta { background: linear-gradient(135deg, #FF6A00 0%, #E05E00 100%); } /* Card shadows - slightly different feel between marketing and app pages, so we keep both presets here. */ .card-shadow { box-shadow: 0 4px 24px rgba(0,0,0,0.08); } .card-shadow-soft { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); } /* Hero floating-avatar animations */ @keyframes float1 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(3deg); } } @keyframes float2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-3deg); } } @keyframes float3 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } @keyframes float4 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(5deg); } } @keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,106,0,0.3); } 50% { box-shadow: 0 0 20px 5px rgba(255,106,0,0.15); } } @keyframes slide-up { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .float-1 { animation: float1 4s ease-in-out infinite; } .float-2 { animation: float2 5s ease-in-out infinite 0.5s; } .float-3 { animation: float3 6s ease-in-out infinite 1s; } .float-4 { animation: float4 4.5s ease-in-out infinite 1.5s; } .float-5 { animation: float2 5.5s ease-in-out infinite 0.8s; } .pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } .slide-up { animation: slide-up 0.8s ease-out forwards; } .slide-up-delay { animation: slide-up 0.8s ease-out 0.2s forwards; opacity: 0; } .slide-up-delay2 { animation: slide-up 0.8s ease-out 0.4s forwards; opacity: 0; } /* ========================================================================= Homepage motion Every animation here is gated behind prefers-reduced-motion at the bottom of this file, so the page stays usable for anyone who asks for less motion. ========================================================================= */ /* Scroll reveal. Released by the IntersectionObserver in app.js adding .is-visible. Scoped to .js (set by an inline script in before first paint) so the page is never hidden when JavaScript is unavailable. Hiding content by default and relying on JS to reveal it means one script error blanks the whole page. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } [data-reveal-delay="4"] { transition-delay: .32s; } [data-reveal-delay="5"] { transition-delay: .40s; } /* Soft drifting background blobs behind the hero */ @keyframes blob-drift { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(24px,-18px) scale(1.06); } 66% { transform: translate(-18px,14px) scale(.96); } } .blob { animation: blob-drift 18s ease-in-out infinite; } .blob-slow { animation: blob-drift 26s ease-in-out infinite reverse; } /* Hero cards bob gently at different rates so they never look synced */ @keyframes card-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes card-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .float-card-a { animation: card-float-a 6s ease-in-out infinite; } .float-card-b { animation: card-float-b 7.5s ease-in-out infinite .8s; } /* Sparkline draws itself once its card is revealed */ .spark-path { stroke-dasharray: 260; stroke-dashoffset: 260; } .is-visible .spark-path { animation: spark-draw 1.6s ease-out .3s forwards; } @keyframes spark-draw { to { stroke-dashoffset: 0; } } /* Comparison + progress bars grow from zero when revealed */ .grow-bar { width: 0; transition: width 1.2s cubic-bezier(.16,1,.3,1) .2s; } .is-visible .grow-bar { width: var(--bar-w, 100%); } /* Card hover lift, used across How It Works / testimonials / pricing */ .lift { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(17,24,39,.10); } /* Avatar stack in the hero */ .stack-avatar { transition: transform .25s ease; } .stack-avatar:hover { transform: translateY(-4px) scale(1.08); z-index: 10; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .blob, .blob-slow, .float-card-a, .float-card-b, .float-1, .float-2, .float-3, .float-4, .float-5, .pulse-glow, .slide-up, .slide-up-delay, .slide-up-delay2 { animation: none !important; } .spark-path { stroke-dashoffset: 0; } .grow-bar { transition: none; width: var(--bar-w, 100%); } .lift:hover { transform: none; } } /* ---- Scroll progress bar (fixed, top of viewport) ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #FF6A00, #FF9147); z-index: 60; transition: width .1s linear; pointer-events: none; } /* ---- Infinite marquee ---- */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* ---- Dot travelling the How It Works connector ---- */ @keyframes travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .travel-dot { animation: travel 4.5s ease-in-out infinite; } /* ---- Sheen sweep across a card on hover ---- */ .sheen { position: relative; overflow: hidden; } .sheen::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .65s cubic-bezier(.16,1,.3,1); pointer-events: none; } .sheen:hover::after { left: 130%; } /* ---- Hero word rotator ---- */ .rotator-word { display: inline-block; animation: word-in .5s cubic-bezier(.16,1,.3,1); } @keyframes word-in { from { opacity: 0; transform: translateY(.5em) rotateX(-40deg); } to { opacity: 1; transform: none; } } /* ---- Parallax layer: JS writes --px/--py, CSS does the moving ---- */ .parallax { transition: transform .45s cubic-bezier(.16,1,.3,1); } /* ---- Testimonial stars fill left to right ---- */ .is-visible .star-pop { animation: star-pop .4s backwards; } .star-pop:nth-child(1) { animation-delay: .05s; } .star-pop:nth-child(2) { animation-delay: .12s; } .star-pop:nth-child(3) { animation-delay: .19s; } .star-pop:nth-child(4) { animation-delay: .26s; } .star-pop:nth-child(5) { animation-delay: .33s; } @keyframes star-pop { from { opacity: 0; transform: scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } } /* ---- Magnetic buttons: JS sets --mx/--my ---- */ .magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1); } /* ---- Gentle pulse ring behind step icons ---- */ @keyframes ring-pulse { 0% { transform: scale(.9); opacity: .55; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } } .ring-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: rgba(255,106,0,.25); animation: ring-pulse 2.8s ease-out infinite; } @media (prefers-reduced-motion: reduce) { .marquee-track, .travel-dot, .ring-pulse::before, .rotator-word { animation: none !important; } .sheen::after { display: none; } .parallax, .magnetic { transform: none !important; transition: none !important; } .scroll-progress { display: none; } .is-visible .star-pop { animation: none !important; } } /* Chat scrollbar (messages page) */ .chat-scroll { scrollbar-width: thin; scrollbar-color: #e5e7eb transparent; } .chat-scroll::-webkit-scrollbar { width: 5px; } .chat-scroll::-webkit-scrollbar-track { background: transparent; } .chat-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }