/* ======================================================================== VachanAI - Premium Dark Mode BPO Voice Automation Custom Design System ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:ital,wght@0,500;0,600;0,700;1,500;1,700&display=swap'); :root { /* Colors */ --color-bg-deep: #05050c; --color-bg-dark: #0a0b18; --color-bg-card: rgba(230, 235, 255, 0.03); --color-bg-card-hover: rgba(230, 235, 255, 0.06); --color-brand-blue: #2934ff; --color-brand-light: #8aa5ff; --color-brand-navy: #031457; --color-brand-purple: #854dff; --color-text-primary: #ffffff; --color-text-secondary: rgba(230, 236, 255, 0.7); --color-text-muted: rgba(230, 236, 255, 0.45); --border-light: rgba(230, 235, 255, 0.08); --border-glow: rgba(41, 52, 255, 0.25); /* Fonts */ --font-headings: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; /* Transitions */ --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Base resets & styles */ html { /* Clip decorative off-canvas glows so they never trigger horizontal scroll */ overflow-x: hidden; } body { background-color: var(--color-bg-deep); color: var(--color-text-primary); font-family: var(--font-body) !important; letter-spacing: -0.01em !important; /* position:relative makes the containing block for the absolutely positioned .glow-spotlight backdrops; without it they resolve against the viewport and escape overflow-x:hidden, causing sideways scroll on mobile. */ position: relative; overflow-x: hidden; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-headings) !important; font-weight: 700; letter-spacing: -0.02em !important; } input, textarea, button, select, .font-sans { font-family: var(--font-body) !important; } /* Glassmorphism & Panel Utilities */ .glass-panel { background: var(--color-bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: var(--transition-smooth); } .glass-panel:hover { border-color: rgba(41, 52, 255, 0.2); background: var(--color-bg-card-hover); } /* Text Gradients */ .text-gradient-blue { background: linear-gradient(135deg, #ffffff 30%, #8aa5ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-purple { background: linear-gradient(135deg, #854dff 0%, #2934ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-glow { background: linear-gradient(to right, #ffffff, #a6b4e8, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Full-page layer that clips the decorative glow spotlights. The glows are sized in the hundreds of px and positioned partly off-canvas (e.g. right-[-10%]); on iOS Safari that horizontal overflow widened the layout viewport, which flipped on the md: breakpoint (desktop nav on mobile) and pushed content off the right edge. Clipping them here keeps the layout viewport at device-width. The layer is absolutely positioned to inset:0 so it spans the full page height and the glows keep their exact scroll positions. */ .glow-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Radial Spots / Glowing Spotlights */ .glow-spotlight { position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: 0; opacity: 0.45; mix-blend-mode: plus-lighter; } .glow-blue { background: radial-gradient(circle, var(--color-brand-blue) 0%, transparent 70%); } .glow-purple { background: radial-gradient(circle, var(--color-brand-purple) 0%, transparent 70%); } /* Premium Background Animated Rainbow Beams & Grid Overlay */ .bg-grid-overlay { position: absolute; top: 0; left: 0; right: 0; height: 140vh; background-size: 60px 60px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 70%, transparent 100%); pointer-events: none; z-index: 1; } .rainbow-container { position: absolute; top: 0; left: 0; right: 0; height: 140vh; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.22; /* High-end subtle atmosphere glow */ } .rainbow { height: 140vh; width: 0; top: 0; position: absolute; transform: rotate(10deg); transform-origin: top right; } @keyframes slide { from { right: -25vw; } to { right: 125vw; } } .h-glow { box-shadow: 0 0 50vh 40vh rgba(133, 77, 255, 0.06); width: 100vw; height: 0; bottom: 0; left: 0; position: absolute; pointer-events: none; z-index: 0; } .v-glow { box-shadow: 0 0 35vw 25vw rgba(41, 52, 255, 0.06); width: 0; height: 100vh; bottom: 0; left: 0; position: absolute; pointer-events: none; z-index: 0; } /* Infinite Marquee for Brand Partners */ .marquee-container { display: flex; overflow: hidden; user-select: none; mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); } .marquee-content { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 4rem; min-width: 100%; animation: marquee-scroll 25s linear infinite; } @keyframes marquee-scroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } } .marquee-container:hover .marquee-content { animation-play-state: paused; } /* Dynamic Interactive Cards with Cursor Tracking Glow */ .glow-card { position: relative; background: rgba(230, 235, 255, 0.015); border: 1px solid var(--border-light); border-radius: 24px; overflow: hidden; transition: var(--transition-smooth); } /* 1. Vibrant Border Glow (Follows cursor, masked to border boundary) */ .glow-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient( 300px circle at var(--mouse-x, 0) var(--mouse-y, 0), var(--glow-color-1, rgba(41, 52, 255, 0.85)) 0%, /* Dynamic primary border color */ var(--glow-color-2, rgba(133, 77, 255, 0.5)) 45%, /* Dynamic secondary border color */ transparent 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 2; } /* 2. Soft Inner Spotlight (Volumetric back-glow that follows cursor) */ .glow-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient( 420px circle at var(--mouse-x, 0) var(--mouse-y, 0), var(--glow-bg-color, rgba(41, 52, 255, 0.16)) 0%, /* Dynamic inner spotlight */ var(--glow-bg-color-2, rgba(133, 77, 255, 0.08)) 50%, transparent 100% ); opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 0; } .glow-card:hover::before, .glow-card:hover::after { opacity: 1; } .glow-card:hover { background: rgba(230, 235, 255, 0.038); border-color: var(--glow-border, rgba(138, 165, 255, 0.35)); box-shadow: 0 15px 45px -12px var(--glow-shadow-1, rgba(41, 52, 255, 0.32)), 0 0 25px -4px var(--glow-shadow-2, rgba(133, 77, 255, 0.2)); transform: translateY(-5px); } /* Prevent full-width section cards from lifting up on hover to preserve scroll stability */ .glow-card-stable:hover { transform: none !important; } /* Motion Scroll Reveals (Intersection Observer) */ .motion-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .motion-reveal.revealed { opacity: 1; transform: translateY(0); } .motion-reveal-delay-1 { transition-delay: 100ms; } .motion-reveal-delay-2 { transition-delay: 200ms; } .motion-reveal-delay-3 { transition-delay: 300ms; } .motion-reveal-delay-4 { transition-delay: 400ms; } /* Interactive Orbit Widget (Integrations) */ .orbit-wrapper { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; } .orbit-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(230, 235, 255, 0.1); } .orbit-circle-1 { width: 50%; height: 50%; animation: spin 45s linear infinite; } .orbit-circle-2 { width: 80%; height: 80%; animation: spin-reverse 60s linear infinite; } .orbit-circle-3 { width: 100%; height: 100%; } .orbit-node { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #0d0f22; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); transition: var(--transition-fast); } .orbit-node:hover { transform: scale(1.15); border-color: var(--color-brand-light); box-shadow: 0 0 15px rgba(138, 165, 255, 0.4); cursor: pointer; } /* Specific nodes alignment in keyframe rotation context */ .orbit-circle-1 .orbit-node-1 { top: 0; left: 50%; transform: translate(-50%, -50%); } .orbit-circle-1 .orbit-node-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); } .orbit-circle-2 .orbit-node-1 { top: 50%; left: 0; transform: translate(-50%, -50%); } .orbit-circle-2 .orbit-node-2 { top: 50%; right: 0; transform: translate(50%, -50%); } .orbit-circle-2 .orbit-node-3 { top: 15%; left: 15%; transform: translate(-50%, -50%); } .orbit-circle-2 .orbit-node-4 { bottom: 15%; right: 15%; transform: translate(50%, 50%); } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin-reverse { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } } /* Logo Hub center */ .orbit-center-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple)); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 0 35px rgba(41, 52, 255, 0.4); } .orbit-center-hub::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(41, 52, 255, 0.3); animation: pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } /* Interactive Dashboard & Chart Motion Elements */ .dashboard-grid { background-image: linear-gradient(rgba(230, 235, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 235, 255, 0.02) 1px, transparent 1px); background-size: 24px 24px; } .chart-line-animate { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-chart 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite; animation-delay: 0.5s; } @keyframes draw-chart { to { stroke-dashoffset: 0; } } .pulsing-chart-dot { animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { r: 4px; opacity: 1; } 50% { r: 8px; opacity: 0.4; } 100% { r: 4px; opacity: 1; } } /* FAQ Accordion Transitions */ .faq-accordion-header { cursor: pointer; user-select: none; transition: var(--transition-fast); } .faq-accordion-header:hover { color: var(--color-brand-light); } .faq-accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .faq-accordion-content-inner { min-height: 0; transition: opacity 0.3s ease; opacity: 0; } .faq-accordion-item.active .faq-accordion-content { grid-template-rows: 1fr; } .faq-accordion-item.active .faq-accordion-content-inner { opacity: 1; padding-top: 1rem; } .faq-accordion-icon { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .faq-accordion-item.active .faq-accordion-icon { transform: rotate(180deg); } /* Pricing Toggle Pill Switch */ .pricing-switch-bg { position: relative; background: rgba(230, 235, 255, 0.05); border: 1px solid var(--border-light); border-radius: 9999px; padding: 4px; } .pricing-switch-toggle { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--color-brand-blue); border-radius: 9999px; box-shadow: 0 4px 15px rgba(41, 52, 255, 0.45); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } .pricing-switch-btn { position: relative; z-index: 2; font-weight: 600; font-size: 0.875rem; padding: 8px 24px; border-radius: 9999px; transition: var(--transition-fast); } .pricing-switch-active-yearly .pricing-switch-toggle { transform: translateX(100%); } /* Comparison Table Layout */ .comparison-table-row { border-bottom: 1px solid var(--border-light); transition: var(--transition-fast); } .comparison-table-row:hover { background: rgba(230, 235, 255, 0.015); } /* General Buttons */ .btn-primary { background: var(--color-brand-blue); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--font-headings); font-weight: 600; box-shadow: 0 4px 20px -5px rgba(41, 52, 255, 0.5); transition: var(--transition-smooth); } .btn-primary:hover { background: #3c48ff; transform: translateY(-2px); box-shadow: 0 8px 30px -5px rgba(41, 52, 255, 0.7); } .btn-secondary { background: var(--color-bg-card); color: #fff; border: 1px solid var(--border-light); font-family: var(--font-headings); font-weight: 600; transition: var(--transition-smooth); } .btn-secondary:hover { background: var(--color-bg-card-hover); border-color: rgba(41, 52, 255, 0.3); transform: translateY(-2px); } /* Modal overlays for Blog reading */ .blog-modal { position: fixed; inset: 0; background: rgba(5, 5, 12, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .blog-modal.active { opacity: 1; pointer-events: auto; } .blog-modal-container { width: 100%; max-width: 720px; max-height: 85vh; background: #0a0b18; border: 1px solid var(--border-light); border-radius: 28px; overflow-y: auto; transform: translateY(40px) scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8); } .blog-modal.active .blog-modal-container { transform: translateY(0) scale(1); } /* Custom Scrollbar for Blog Modal */ .blog-modal-container::-webkit-scrollbar { width: 6px; } .blog-modal-container::-webkit-scrollbar-track { background: transparent; } .blog-modal-container::-webkit-scrollbar-thumb { background: rgba(230, 235, 255, 0.1); border-radius: 3px; } .blog-modal-container::-webkit-scrollbar-thumb:hover { background: rgba(230, 235, 255, 0.2); } /* Custom Voice Wave Soundwave Animations */ @keyframes sound-wave { 0% { height: 10%; } 50% { height: 100%; } 100% { height: 10%; } } .bar { animation: sound-wave 1s ease-in-out infinite; } .bar:nth-child(1) { animation-duration: 0.8s; } .bar:nth-child(2) { animation-duration: 1.1s; } .bar:nth-child(3) { animation-duration: 0.9s; } .bar:nth-child(4) { animation-duration: 1.2s; } .bar:nth-child(5) { animation-duration: 0.7s; } /* Hidden utility state */ .hidden-state { display: none !important; }