/* ======================================================================== 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). Hidden state only applies under html.js (set by an inline head script), so if JS fails or is still downloading, text renders normally instead of staying invisible. */ .js .motion-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .js .motion-reveal.revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js .motion-reveal { opacity: 1; transform: none; transition: none; } } .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; }