* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth scroll for anchor links + dark mode base background */ html { scroll-behavior: smooth; background-color: #FFFFFF; } html.dark { background-color: #0B0B0B; } body { background-color: #FFFFFF; } .dark body { background-color: #0B0B0B; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Theme transition - only on specific properties, not box-shadow (expensive) */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out !important; } .moon-icon, .sun-icon { transition: opacity 0.2s ease; } /* ======================================== iOS-STYLE THEME TOGGLE SWITCH ======================================== */ .theme-toggle-ios { position: relative; width: 44px; height: 24px; border-radius: 9999px; border: none; cursor: pointer; padding: 2px; transition: background-color 0.25s ease-out; flex-shrink: 0; } /* Track background - Light mode (default) */ .theme-toggle-ios { background-color: #E5E5E5; } /* Track background - Dark mode (orange accent matching CTA button) */ /* Using .dark class on for instant styling without JS delay */ .dark .theme-toggle-ios { background-color: #F97316; } /* Knob (the white circle) */ .theme-toggle-ios .toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 9999px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1); transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Knob position - Dark mode (right side) */ /* Using .dark class on for instant styling without JS delay */ /* Use calc: 100% width - knob width (20px) - right padding (2px) */ .dark .theme-toggle-ios .toggle-knob { left: calc(100% - 22px); } /* Hover effects */ .theme-toggle-ios:hover { opacity: 0.9; } .theme-toggle-ios:active { opacity: 0.8; } /* Focus ring for accessibility */ .theme-toggle-ios:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; } /* ======================================== LANGUAGE TOGGLE BUTTON ======================================== */ .locale-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); color: white; border: none; cursor: pointer; transition: all 0.2s ease; font-weight: 600; } .locale-toggle:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .locale-toggle.is-russian { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); } .locale-toggle.is-russian:hover { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .locale-toggle:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.02em; font-weight: 700; } /* ======================================== ZALANDO-STYLE CLEAN MINIMAL BACKGROUND ======================================== */ .zalando-clean-bg { position: relative; min-height: 100vh; } /* Apple-style soft pastel glow accents (very subtle) */ /* GPU-accelerated with will-change and contain for scroll performance */ .apple-glow-accent { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; will-change: opacity; contain: strict; transform: translateZ(0); } .apple-glow-accent.light-mode { opacity: 0.15; } .dark .apple-glow-accent.light-mode { opacity: 0; } .apple-glow-accent.dark-mode { opacity: 0; } .dark .apple-glow-accent.dark-mode { opacity: 0.08; } .glow-blue { background: radial-gradient(circle, #C9D8FF 0%, transparent 70%); } .glow-peach { background: radial-gradient(circle, #FFE6D4 0%, transparent 70%); } .glow-mint { background: radial-gradient(circle, #DFFBEA 0%, transparent 70%); } .glow-lilac { background: radial-gradient(circle, #E9E3FF 0%, transparent 70%); } /* ======================================== SCROLL PERFORMANCE OPTIMIZATIONS ======================================== */ /* Smooth scroll for mobile carousel */ .scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-container::-webkit-scrollbar { display: none; } /* GPU acceleration for fixed/sticky elements */ .site-header { transform: translateZ(0); backface-visibility: hidden; } /* Prevent layout shifts on sections */ section { contain: layout style; } /* Optimize images to prevent CLS */ img { max-width: 100%; height: auto; } /* Reduce paint areas for large backgrounds */ .zalando-clean-bg { contain: layout style paint; isolation: isolate; } /* ======================================== REVEAL ANIMATIONS (IntersectionObserver) Pure CSS - triggered by adding .revealed class With JS fallback for first load ======================================== */ [data-controller="reveal"] { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; will-change: opacity, transform; /* Fallback: auto-reveal after 1s if JS hasn't loaded */ animation: autoRevealFallback 0.5s ease-out 1s forwards; } /* When JS works, it adds .revealed class before fallback animation */ [data-controller="reveal"].revealed { opacity: 1; transform: translateY(0); animation: none; /* Cancel fallback animation */ } @keyframes autoRevealFallback { to { opacity: 1; transform: translateY(0); } } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { [data-controller="reveal"] { opacity: 1; transform: none; transition: none; animation: none; } } /* Subtle animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* PREMIUM SHIMMER ANIMATIONS - REVOLUT STYLE */ @keyframes shimmerRed { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes shimmerGreen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes shimmerOrange { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } .animate-scale-in { animation: scaleIn 0.5s ease-out; } /* Premium minimal shadows (Zalando-style) */ .minimal-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); } .minimal-shadow-lg { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.04); } /* PREMIUM PRICE COMPARISON BOX - APPLE + REVOLUT FINTECH */ .premium-price-box { position: relative; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 28px; padding: 32px 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02); } /* Mobile centering fix (≤ 640px) */ @media (max-width: 640px) { .premium-price-box { margin-left: auto; margin-right: auto; } } @media (min-width: 768px) { .premium-price-box { padding: 48px 40px; } } .dark .premium-price-box { background: #141414; border-color: #2A2A2A; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } .price-row { position: relative; z-index: 1; } .price-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #EEEEEE 20%, #EEEEEE 80%, transparent 100%); margin: 20px 0; } .dark .price-divider { background: linear-gradient(90deg, transparent 0%, #2A2A2A 20%, #2A2A2A 80%, transparent 100%); } /* PREMIUM RED BACKGROUND BAND - ANIMATED SHIMMER */ .price-row-red { position: relative; padding: 18px 20px; margin: 0 -20px 16px -20px; border-radius: 14px; background: linear-gradient( 135deg, #FEE2E2 0%, #FECACA 25%, #FEE2E2 50%, #FECACA 75%, #FEE2E2 100% ); background-size: 200% 200%; animation: shimmerRed 8s ease-in-out infinite; } .dark .price-row-red { background: linear-gradient( 135deg, rgba(254, 226, 226, 0.08) 0%, rgba(254, 202, 202, 0.12) 25%, rgba(254, 226, 226, 0.08) 50%, rgba(254, 202, 202, 0.12) 75%, rgba(254, 226, 226, 0.08) 100% ); background-size: 200% 200%; } /* Premium red badge - expensive indicator */ .price-badge-expensive { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #DC2626; } .dark .price-badge-expensive { background: rgba(254, 226, 226, 0.15); border-color: rgba(254, 202, 202, 0.25); color: #FCA5A5; } .price-badge-expensive svg { width: 12px; height: 12px; } /* PREMIUM GREEN BACKGROUND BAND - ANIMATED SHIMMER */ .price-row-green { position: relative; padding: 18px 20px; margin: 0 -20px 20px -20px; border-radius: 14px; background: linear-gradient( 135deg, #DCFCE7 0%, #BBF7D0 25%, #DCFCE7 50%, #BBF7D0 75%, #DCFCE7 100% ); background-size: 200% 200%; animation: shimmerGreen 8s ease-in-out infinite; } .dark .price-row-green { background: linear-gradient( 135deg, rgba(220, 252, 231, 0.08) 0%, rgba(187, 247, 208, 0.12) 25%, rgba(220, 252, 231, 0.08) 50%, rgba(187, 247, 208, 0.12) 75%, rgba(220, 252, 231, 0.08) 100% ); background-size: 200% 200%; } /* Premium green badge - savings indicator */ .price-badge-savings { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(22, 163, 74, 0.12); border: 1px solid rgba(22, 163, 74, 0.2); border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #16A34A; } .dark .price-badge-savings { background: rgba(187, 247, 208, 0.15); border-color: rgba(187, 247, 208, 0.25); color: #86EFAC; } .price-badge-savings svg { width: 12px; height: 12px; } /* Subtle progress indicators behind prices */ .price-progress-high { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 4px; width: 45%; background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.15) 100%); border-radius: 100px; pointer-events: none; } .dark .price-progress-high { background: linear-gradient(90deg, transparent 0%, rgba(254, 202, 202, 0.1) 100%); } .price-progress-low { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 4px; width: 30%; background: linear-gradient(90deg, transparent 0%, rgba(22, 163, 74, 0.2) 100%); border-radius: 100px; pointer-events: none; } .dark .price-progress-low { background: linear-gradient(90deg, transparent 0%, rgba(187, 247, 208, 0.12) 100%); } /* Premium arrow connector - from price to savings */ .savings-arrow { display: flex; align-items: center; justify-content: center; margin: 16px 0; position: relative; } .savings-arrow svg { width: 20px; height: 20px; color: #16A34A; opacity: 0.4; animation: bounceDown 2s ease-in-out infinite; } .dark .savings-arrow svg { color: #86EFAC; opacity: 0.3; } @keyframes bounceDown { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(4px); opacity: 0.6; } } /* ======================================== SAVINGS BRIDGE - Central Divider Design ======================================== */ .savings-bridge { display: flex; align-items: center; justify-content: center; gap: 0; margin: 8px -24px; position: relative; } /* Connector lines */ .savings-bridge-line { flex: 1; height: 2px; position: relative; } .savings-bridge-line-left { background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.3) 30%, rgba(220, 38, 38, 0.5) 100% ); } .savings-bridge-line-right { background: linear-gradient(90deg, rgba(22, 163, 74, 0.5) 0%, rgba(22, 163, 74, 0.3) 70%, transparent 100% ); } .dark .savings-bridge-line-left { background: linear-gradient(90deg, transparent 0%, rgba(252, 165, 165, 0.2) 30%, rgba(252, 165, 165, 0.4) 100% ); } .dark .savings-bridge-line-right { background: linear-gradient(90deg, rgba(134, 239, 172, 0.4) 0%, rgba(134, 239, 172, 0.2) 70%, transparent 100% ); } /* Central badge */ .savings-bridge-badge { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.95) 100% ); border: 2px solid #16A34A; border-radius: 50px; position: relative; z-index: 2; box-shadow: 0 4px 20px rgba(22, 163, 74, 0.25), 0 2px 8px rgba(22, 163, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); animation: badgePulse 3s ease-in-out infinite; } .dark .savings-bridge-badge { background: linear-gradient(135deg, rgba(20, 30, 20, 0.95) 0%, rgba(20, 83, 45, 0.3) 100% ); border-color: #22C55E; box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3), 0 2px 8px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @keyframes badgePulse { 0%, 100% { box-shadow: 0 4px 20px rgba(22, 163, 74, 0.2), 0 2px 8px rgba(22, 163, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 6px 28px rgba(22, 163, 74, 0.35), 0 4px 12px rgba(22, 163, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5); } } .savings-bridge-icon { width: 32px; height: 32px; color: #16A34A; flex-shrink: 0; animation: iconBounce 2s ease-in-out infinite; } .dark .savings-bridge-icon { color: #22C55E; } @keyframes iconBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .savings-bridge-content { display: flex; flex-direction: column; gap: 1px; } .savings-bridge-label { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #16A34A; } .dark .savings-bridge-label { color: #86EFAC; } .savings-bridge-value { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #111111; line-height: 1; } .dark .savings-bridge-value { color: #F7F7F7; } .savings-bridge-percent { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 10px; background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%); border-radius: 14px; font-size: 13px; font-weight: 800; color: white; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); } .dark .savings-bridge-percent { background: linear-gradient(135deg, #15803D 0%, #16A34A 100%); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); } /* ======================================== HEADER & NAVIGATION ======================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dark .site-header { background: rgba(11, 11, 11, 0.85); border-bottom-color: rgba(255, 255, 255, 0.08); } .nav-link { position: relative; display: inline-block; padding: 10px 18px; font-size: 15px; font-weight: 500; color: #555555; text-decoration: none; border-radius: 10px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dark .nav-link { color: #C7C7C7; } .nav-link:hover { background: rgba(0, 0, 0, 0.05); color: #111111; transform: translateY(-1px); } .dark .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #F7F7F7; } .nav-link.active { background: rgba(0, 0, 0, 0.08); color: #111111; font-weight: 600; } .dark .nav-link.active { background: rgba(255, 255, 255, 0.15); color: #FFFFFF; } /* Hamburger icon - perfect alignment */ .hamburger { width: 28px; height: 20px; position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: #111111; border-radius: 2px; opacity: 1; left: 0; /* Smoother spring-like animation */ transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease-out, top 0.4s cubic-bezier(0.23, 1, 0.32, 1), bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center center; } .dark .hamburger span { background: #F7F7F7; } .hamburger span:nth-child(1) { top: 2px; } .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger span:nth-child(3) { bottom: 2px; } /* Open state - elegant X transformation */ .hamburger.menu-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .hamburger.menu-open span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); } .hamburger.menu-open span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } /* Mobile menu overlay - full-screen fixed overlay */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; background: #FFFFFF; z-index: 9999; overflow: hidden; /* Slide + fade animation */ transform: translateX(100%); opacity: 0; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease-out; } .mobile-menu-overlay.opacity-100 { transform: translateX(0); opacity: 1; } .dark .mobile-menu-overlay { background: #0B0B0B; } /* Staggered menu items animation */ .mobile-menu-link { display: block; padding: 14px 20px; font-size: 17px; font-weight: 500; color: #111111; text-decoration: none; border-radius: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Initial state for stagger animation */ opacity: 0; transform: translateX(20px); } .mobile-menu-overlay.opacity-100 .mobile-menu-link { opacity: 1; transform: translateX(0); } /* Staggered delays for each menu item */ .mobile-menu-link:nth-child(1) { transition-delay: 0.05s; } .mobile-menu-link:nth-child(2) { transition-delay: 0.1s; } .mobile-menu-link:nth-child(3) { transition-delay: 0.15s; } .mobile-menu-link:nth-child(4) { transition-delay: 0.2s; } .mobile-menu-link:nth-child(5) { transition-delay: 0.25s; } .mobile-menu-link:nth-child(6) { transition-delay: 0.3s; } .dark .mobile-menu-link { color: #F7F7F7; } .mobile-menu-link:active { background: rgba(0, 0, 0, 0.06); transform: scale(0.98); } .dark .mobile-menu-link:active { background: rgba(255, 255, 255, 0.1); } /* PREMIUM CTA BUTTON - APPLE-STYLE CONFIDENT PILL */ .btn-primary-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* Apple-style proportions: substantial but elegant */ padding: 15px 48px; width: 100%; max-width: 480px; /* Typography - confident and clear */ font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; color: #FFFFFF; /* Warmer red-orange gradient with shimmer animation */ background: linear-gradient(135deg, #EF4444 0%, #DC2626 25%, #F97316 50%, #EA580C 75%, #DC2626 100%); background-size: 200% 200%; animation: shimmerOrange 6s ease-in-out infinite; border: none; border-radius: 9999px; /* Soft Apple-style shadow */ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.18), 0 1px 3px rgba(220, 38, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; } .btn-primary-cta:hover { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25), 0 2px 6px rgba(220, 38, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .btn-primary-cta:active { transform: translateY(0) scale(0.99); box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* Very subtle glow (minimal) */ .btn-primary-cta::before { content: ''; position: absolute; inset: -2px; background: radial-gradient(circle at center, rgba(239, 68, 68, 0.25) 0%, transparent 70%); filter: blur(8px); opacity: 0; transition: opacity 0.2s ease; z-index: -1; border-radius: 9999px; } .btn-primary-cta:hover::before { opacity: 0.6; } /* Arrow icon - proportional to text */ .btn-primary-cta svg { width: 20px; height: 20px; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .btn-primary-cta:hover svg { transform: translateX(3px); } /* Mobile: full width with substantial tap target */ @media (max-width: 640px) { .btn-primary-cta { width: 100%; max-width: none; font-size: 17px; padding: 16px 36px; } } /* Micro-interaction: button press */ .btn-press { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .btn-press:active { transform: scale(0.98); } /* Optimize hero spacing */ @media (min-width: 1024px) { .hero-section { padding-top: 3rem !important; padding-bottom: 4rem !important; min-height: 85vh; } } @media (max-width: 1023px) { .hero-section { padding-top: 0.5rem !important; padding-bottom: 1.5rem !important; } } /* Hero headline responsive sizing */ .hero-headline { font-size: 1.75rem; line-height: 1.2; margin-bottom: 0.75rem; } @media (min-width: 768px) { .hero-headline { font-size: 2.25rem; line-height: 1.15; margin-bottom: 0.875rem; } } @media (min-width: 1024px) { .hero-headline { font-size: 3.75rem; line-height: 1.1; margin-bottom: 1rem; } } /* Hero subheadline responsive sizing */ .hero-subheadline { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } @media (min-width: 768px) { .hero-subheadline { font-size: 1.125rem; line-height: 1.55; margin-bottom: 1.25rem; } } @media (min-width: 1024px) { .hero-subheadline { font-size: 1.25rem; line-height: 1.6; margin-bottom: 1.5rem; } } /* Hero headline animations */ @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes breatheGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } .headline-line-1 { animation: fadeInSlideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; } .headline-line-2 { animation: fadeInSlideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards; opacity: 0; } /* Gradient accent for highlighted words */ .text-gradient-accent { background: linear-gradient(135deg, #EF4444 0%, #F97316 50%, #DC2626 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: breatheGlow 6s ease-in-out infinite; position: relative; } .dark .text-gradient-accent { background: linear-gradient(135deg, #F87171 0%, #FB923C 50%, #EF4444 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Value proposition text animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-value-text { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; opacity: 0; } /* Badge animations - sequential appearance */ @keyframes badgeFadeIn { from { opacity: 0; transform: translateY(15px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .badge-1 { animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards; opacity: 0; } .badge-2 { animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards; opacity: 0; } .badge-3 { animation: badgeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards; opacity: 0; } /* ======================================== STICKY MOBILE CTA ======================================== */ .sticky-cta-mobile { position: fixed; /* Anchored to bottom */ bottom: 0; left: 0; right: 0; z-index: 50; padding: 16px 20px; padding-bottom: max(16px, env(safe-area-inset-bottom)); /* No background on container - use pseudo-elements for cross-fade */ background: transparent; border: none; /* Hidden state: pushed below viewport */ opacity: 0; pointer-events: none; transform: translate3d(0, 100%, 0); /* GPU acceleration */ will-change: transform, opacity; /* Smooth transition */ transition: opacity 0.3s ease-out, transform 0.3s ease-out; } /* Light mode gradient layer */ .sticky-cta-mobile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.85) 80%, rgba(255, 255, 255, 0) 100% ); opacity: 1; transition: opacity 0.25s ease-out; } /* Dark mode gradient layer */ .sticky-cta-mobile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 11, 11, 0.98) 0%, rgba(11, 11, 11, 0.95) 50%, rgba(11, 11, 11, 0.85) 80%, rgba(11, 11, 11, 0) 100% ); opacity: 0; transition: opacity 0.25s ease-out; } /* Cross-fade: in dark mode, hide light layer and show dark layer */ .dark .sticky-cta-mobile::before { opacity: 0; } .dark .sticky-cta-mobile::after { opacity: 1; } .sticky-cta-mobile.visible { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); } /* Sticky Chat Card - Modern gradient card style */ .sticky-chat-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: linear-gradient(135deg, rgba(60, 30, 40, 0.95) 0%, rgba(80, 35, 45, 0.95) 50%, rgba(50, 25, 35, 0.95) 100% ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } .sticky-chat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } .sticky-chat-card:active { transform: translateY(0); } .sticky-chat-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #E94560 0%, #FF6B6B 50%, #F97316 100% ); border-radius: 12px; box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4); } .sticky-chat-text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; } .sticky-chat-title { font-size: 15px; font-weight: 600; color: #FFFFFF; line-height: 1.3; } .sticky-chat-subtitle { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.3; } /* Channel Chat Card - For contacts section */ .channel-chat-card { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: linear-gradient(135deg, rgba(60, 30, 40, 0.95) 0%, rgba(80, 35, 45, 0.95) 50%, rgba(50, 25, 35, 0.95) 100% ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9999px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } .channel-chat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } .channel-chat-card:active { transform: translateY(0); } .channel-chat-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #E94560 0%, #FF6B6B 50%, #F97316 100% ); border-radius: 10px; box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4); } .channel-chat-text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; } .channel-chat-title { font-size: 14px; font-weight: 600; color: #FFFFFF; line-height: 1.3; } .channel-chat-subtitle { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.3; } /* Hide completely on desktop (lg: 1024px+) */ @media (min-width: 1024px) { .sticky-cta-mobile { display: none !important; } } /* Add bottom padding to body when sticky CTA is visible on mobile */ @media (max-width: 1023px) { body.sticky-cta-active { padding-bottom: 80px; } } /* ======================================== CHAT DEMO COMPONENT ======================================== */ .chat-demo-container { position: relative; max-width: 420px; margin: 0 auto; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); } .dark .chat-demo-container { background: #141414; border-color: #2A2A2A; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } .chat-demo-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #FAFAFA; border-bottom: 1px solid #EEEEEE; } .dark .chat-demo-header { background: #1A1A1A; border-bottom-color: #2A2A2A; } .chat-demo-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-demo-avatar svg { width: 22px; height: 22px; color: white; } .chat-demo-info { flex: 1; } .chat-demo-name { font-size: 15px; font-weight: 600; color: #111111; } .dark .chat-demo-name { color: #F7F7F7; } .chat-demo-status { font-size: 13px; color: #16A34A; display: flex; align-items: center; gap: 6px; } .chat-demo-status::before { content: ''; width: 8px; height: 8px; background: #16A34A; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .chat-demo-body { padding: 20px; min-height: 320px; display: flex; flex-direction: column; gap: 16px; } /* Chat messages */ .chat-message { display: flex; gap: 10px; max-width: 85%; opacity: 0; transform: translateY(10px); animation: messageAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .chat-message.from-user { align-self: flex-end; flex-direction: row-reverse; } .chat-message.from-ai { align-self: flex-start; } @keyframes messageAppear { to { opacity: 1; transform: translateY(0); } } /* Staggered animation delays */ .chat-message:nth-child(1) { animation-delay: 0.3s; } .chat-message:nth-child(2) { animation-delay: 1.2s; } .chat-message:nth-child(3) { animation-delay: 2.4s; } .chat-message:nth-child(4) { animation-delay: 3.6s; } .chat-bubble { padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; } .chat-message.from-user .chat-bubble { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; border-bottom-right-radius: 6px; } .chat-message.from-ai .chat-bubble { background: #F5F5F5; color: #333333; border-bottom-left-radius: 6px; } .dark .chat-message.from-ai .chat-bubble { background: #252525; color: #E5E5E5; } /* Typing indicator */ .typing-indicator { display: flex; gap: 4px; padding: 12px 16px; opacity: 0; animation: messageAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .typing-indicator span { width: 8px; height: 8px; background: #AAAAAA; border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; } .typing-indicator span:nth-child(1) { animation-delay: 0s; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } .dark .typing-indicator span { background: #666666; } /* Result card in chat */ .chat-result-card { background: #FAFAFA; border: 1px solid #EEEEEE; border-radius: 12px; padding: 14px; margin-top: 8px; } .dark .chat-result-card { background: #1E1E1E; border-color: #333333; } .chat-result-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEEEEE; } .dark .chat-result-item { border-bottom-color: #333333; } .chat-result-item:last-child { border-bottom: none; padding-bottom: 0; } .chat-result-item:first-child { padding-top: 0; } .chat-result-name { font-size: 13px; color: #555555; } .dark .chat-result-name { color: #AAAAAA; } .chat-result-price { font-size: 14px; font-weight: 600; color: #111111; } .dark .chat-result-price { color: #F7F7F7; } .chat-result-savings { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 6px 10px; background: rgba(22, 163, 74, 0.1); border-radius: 100px; font-size: 12px; font-weight: 600; color: #16A34A; } .dark .chat-result-savings { background: rgba(134, 239, 172, 0.15); color: #86EFAC; } /* ======================================== CHAT WIDGET - Apple/Zalando Style ======================================== */ /* Container */ .chat-widget-container { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: flex-end; } .chat-widget-container.hidden { display: none; } /* Backdrop (mobile only) */ .chat-widget-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease-out; z-index: 1; } .chat-widget-backdrop.is-visible { opacity: 1; } /* Panel */ .chat-widget-panel { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; max-height: 85vh; max-height: 85dvh; background: #FFFFFF; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12), 0 -1px 8px rgba(0, 0, 0, 0.06); transform: translateY(100%); opacity: 0; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease-out; overflow: hidden; } .dark .chat-widget-panel { background: #141414; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5), 0 -1px 8px rgba(0, 0, 0, 0.3); } .chat-widget-panel.is-visible { transform: translateY(0); opacity: 1; } /* Desktop styles */ @media (min-width: 1024px) { .chat-widget-container { padding: 20px; } .chat-widget-backdrop { display: none; } .chat-widget-panel { width: 380px; max-width: 380px; max-height: 70vh; border-radius: 20px; transform: translateY(20px) scale(0.95); } .chat-widget-panel.is-visible { transform: translateY(0) scale(1); } } /* Header */ .chat-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #EEEEEE; background: #FAFAFA; flex-shrink: 0; } .dark .chat-widget-header { background: #1A1A1A; border-bottom-color: #2A2A2A; } .chat-widget-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .chat-widget-title { font-size: 16px; font-weight: 600; color: #111111; line-height: 1.3; } .dark .chat-widget-title { color: #F7F7F7; } .chat-widget-subtitle { font-size: 13px; color: #666666; line-height: 1.3; } .dark .chat-widget-subtitle { color: #AAAAAA; } .chat-widget-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #EEEEEE; color: #666666; border: none; cursor: pointer; transition: all 0.2s ease; } .chat-widget-close:hover { background: #E5E5E5; color: #333333; } .dark .chat-widget-close { background: #2A2A2A; color: #AAAAAA; } .dark .chat-widget-close:hover { background: #333333; color: #F7F7F7; } /* Language Toggle Button */ .chat-widget-language { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); color: white; border: none; cursor: pointer; transition: all 0.2s ease; font-weight: 600; } .chat-widget-language:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .chat-widget-language.is-russian { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); } .chat-widget-language.is-russian:hover { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .dark .chat-widget-language { background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); } .dark .chat-widget-language.is-russian { background: linear-gradient(135deg, #F87171 0%, #EF4444 100%); } /* Messages Container */ .chat-widget-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; display: flex; flex-direction: column; gap: 16px; -webkit-overflow-scrolling: touch; position: relative; } /* Individual Message - override demo styles completely */ .chat-widget-messages .chat-message { display: flex; gap: 10px; max-width: 85%; /* GPU-accelerated properties for smooth animations */ will-change: opacity, transform; /* Fully reset animation from demo chat .chat-message rule */ animation: none; } /* ===================================================== CHAT MESSAGE ENTRANCE ANIMATION - Clearly visible fade + slide up effect - 220ms duration for smooth, noticeable movement - 12px vertical slide for clear visibility ===================================================== */ /* Initial state: invisible and offset - MUST be separate from animation */ .chat-widget-messages .chat-message.animate-in { opacity: 0; transform: translateY(12px); } /* Animation trigger class - applied after reflow */ .chat-widget-messages .chat-message.animate-in.is-animating { animation: chatMessageSlideIn 220ms ease-out forwards; } /* Client messages slide from right with horizontal offset */ .chat-widget-messages .chat-message.from-client.animate-in { opacity: 0; transform: translateY(12px) translateX(8px); } .chat-widget-messages .chat-message.from-client.animate-in.is-animating { animation: chatMessageSlideInClient 220ms ease-out forwards; } @keyframes chatMessageSlideIn { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes chatMessageSlideInClient { 0% { opacity: 0; transform: translateY(12px) translateX(8px); } 100% { opacity: 1; transform: translateY(0) translateX(0); } } /* Final state after animation - ensure visibility */ .chat-widget-messages .chat-message.animate-complete { opacity: 1; transform: translateY(0) translateX(0); } /* Typing indicator animation */ #typing-indicator { opacity: 0; transform: translateY(12px); } #typing-indicator.is-animating { animation: chatMessageSlideIn 220ms ease-out forwards; } .chat-message.from-client { align-self: flex-end; flex-direction: row-reverse; } .chat-message.from-assistant { align-self: flex-start; } .chat-message-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; margin-top: 4px; } .chat-message-content { display: flex; flex-direction: column; gap: 4px; } .chat-bubble { padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; } .chat-message.from-client .chat-bubble { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; border-bottom-right-radius: 6px; } .chat-message.from-assistant .chat-bubble { background: #F5F5F5; color: #333333; border-bottom-left-radius: 6px; } .dark .chat-message.from-assistant .chat-bubble { background: #252525; color: #E5E5E5; } .chat-message-time { font-size: 11px; color: #999999; padding: 0 4px; display: flex; align-items: center; gap: 6px; } .chat-message.from-client .chat-message-time { text-align: right; justify-content: flex-end; } .dark .chat-message-time { color: #666666; } .chat-engineer-badge { font-size: 10px; font-weight: 500; color: #16A34A; background: rgba(22, 163, 74, 0.1); padding: 2px 6px; border-radius: 4px; } .dark .chat-engineer-badge { color: #86EFAC; background: rgba(134, 239, 172, 0.15); } /* Typing Indicator */ .chat-typing-indicator { display: flex; align-items: center; gap: 3px; padding: 4px 0; } .chat-typing-indicator span { width: 6px; height: 6px; background: #AAAAAA; border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; } .chat-typing-indicator span:nth-child(1) { animation-delay: 0s; } .chat-typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .chat-typing-indicator span:nth-child(3) { animation-delay: 0.4s; } .dark .chat-typing-indicator span { background: #666666; } /* Loading State - absolutely positioned to avoid layout shift */ .chat-loading-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: inherit; z-index: 5; opacity: 1; transition: opacity 0.2s ease; } .chat-loading-wrapper.hidden { opacity: 0; pointer-events: none; } .chat-message-loading { display: flex; justify-content: center; padding: 20px; } .chat-message-loading.hidden { display: none; } /* Input Area */ .chat-widget-input-area { padding: 16px 20px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #EEEEEE; background: #FFFFFF; flex-shrink: 0; } .dark .chat-widget-input-area { background: #141414; border-top-color: #2A2A2A; } .chat-widget-form { display: flex; align-items: flex-end; gap: 12px; } .chat-input-wrapper { flex: 1; display: flex; align-items: flex-end; gap: 10px; background: #F7F7F7; border: 1px solid #E5E5E5; border-radius: 24px; padding: 10px 10px 10px 18px; transition: all 0.2s ease; } .chat-input-wrapper:focus-within { background: #FFFFFF; border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .dark .chat-input-wrapper { background: #1E1E1E; border-color: #333333; } .dark .chat-input-wrapper:focus-within { background: #252525; border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .chat-widget-textarea { flex: 1; min-height: 24px; max-height: 120px; padding: 4px 0; background: transparent; border: none; outline: none; resize: none; font-family: inherit; font-size: 15px; line-height: 1.5; color: #1A1A1A; } .chat-widget-textarea::placeholder { color: #9CA3AF; font-style: normal; } .dark .chat-widget-textarea { color: #F5F5F5; } .dark .chat-widget-textarea::placeholder { color: #6B7280; } .chat-widget-send { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; border: none; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .chat-widget-send:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } .chat-widget-send:disabled { opacity: 0.5; cursor: not-allowed; } /* Attachment Button (Paperclip) */ .chat-widget-attach { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; color: #6B7280; border: none; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .chat-widget-attach:hover { color: #EF4444; background: rgba(239, 68, 68, 0.1); } .chat-widget-attach:active { transform: scale(0.95); } .dark .chat-widget-attach { color: #9CA3AF; } .dark .chat-widget-attach:hover { color: #EF4444; background: rgba(239, 68, 68, 0.15); } /* Attachment Preview Area */ .chat-attachment-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; } .chat-attachment-preview.hidden { display: none; } .dark .chat-attachment-preview { background: #1E1E1E; border-color: #333333; } .attachment-preview-item { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #E5E7EB; } .attachment-preview-item img { width: 100%; height: 100%; object-fit: cover; } .attachment-preview-item.is-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #FEE2E2; color: #DC2626; } .dark .attachment-preview-item.is-pdf { background: rgba(239, 68, 68, 0.15); color: #F87171; } .attachment-filename { font-size: 9px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .attachment-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: white; border: none; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; } .attachment-preview-item:hover .attachment-remove { opacity: 1; } /* Mobile: always show remove button */ @media (max-width: 768px) { .attachment-remove { opacity: 1; } } /* Audio Preview Player - for voice messages before sending */ .attachment-preview-item.is-audio-player { width: auto; min-width: 160px; max-width: 200px; height: auto; padding: 8px 12px; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); border-radius: 20px; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25); } .attachment-preview-item.is-audio-player audio { display: none; } .audio-preview-play { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: white; color: #F97316; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease; } .audio-preview-play:hover { transform: scale(1.08); } .audio-preview-play:active { transform: scale(0.95); } .audio-preview-waveform { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .audio-preview-waveform .waveform-bars { display: flex; align-items: center; gap: 2px; height: 20px; } .audio-preview-waveform .waveform-bars .bar { width: 3px; background: rgba(255, 255, 255, 0.5); border-radius: 1.5px; transition: background 0.2s ease; } .attachment-preview-item.is-audio-player.is-playing .waveform-bars .bar { animation: waveform-pulse 0.6s ease-in-out infinite alternate; } @keyframes waveform-pulse { from { background: rgba(255, 255, 255, 0.5); } to { background: rgba(255, 255, 255, 0.9); } } .audio-preview-time { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; } .attachment-preview-item.is-audio-player .attachment-remove { position: relative; top: auto; right: auto; opacity: 1; background: rgba(255, 255, 255, 0.25); } .attachment-preview-item.is-audio-player .attachment-remove:hover { background: rgba(255, 255, 255, 0.4); } /* Dark mode adjustments for audio preview */ .dark .attachment-preview-item.is-audio-player { background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%); } /* Message Attachments (in chat bubble) */ .chat-message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .chat-attachment-image { max-width: 200px; border-radius: 12px; overflow: hidden; } .chat-attachment-image img { width: 100%; height: auto; display: block; } .chat-attachment-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(0, 0, 0, 0.05); border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; transition: background 0.2s ease; } .chat-attachment-file:hover { background: rgba(0, 0, 0, 0.1); } .from-client .chat-attachment-file { background: rgba(255, 255, 255, 0.2); } .from-client .chat-attachment-file:hover { background: rgba(255, 255, 255, 0.3); } .dark .chat-attachment-file { background: rgba(255, 255, 255, 0.1); } .dark .chat-attachment-file:hover { background: rgba(255, 255, 255, 0.15); } /* Video Attachment */ .chat-attachment-video { margin-top: 8px; border-radius: 12px; overflow: hidden; max-width: 280px; } .chat-attachment-video video { max-height: 200px; width: 100%; display: block; background: #000; } /* Custom Audio Player - orange gradient style */ .chat-audio-player { margin-top: 8px; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); border-radius: 20px; padding: 8px 14px; min-width: 200px; max-width: 280px; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25); } .chat-audio-player audio { display: none; /* Hide native player */ } .chat-audio-player .audio-play-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: inherit; } .chat-audio-player .audio-play-btn:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.05); } .chat-audio-player .audio-play-btn svg { width: 18px; height: 18px; } .chat-audio-player .audio-play-btn .hidden { display: none; } .chat-audio-player .audio-progress-wrapper { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .chat-audio-player .audio-progress-bar { height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; cursor: pointer; overflow: hidden; } .chat-audio-player .audio-progress-fill { height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 2px; transition: width 0.1s linear; } .chat-audio-player .audio-time { font-size: 11px; color: rgba(255, 255, 255, 0.9); font-weight: 600; font-variant-numeric: tabular-nums; } /* Audio player uses same orange style everywhere */ .chat-audio-player .audio-play-btn { background: white; color: #F97316; } .chat-audio-player .audio-play-btn:hover { background: rgba(255, 255, 255, 0.9); } .chat-audio-player .audio-progress-bar { background: rgba(255, 255, 255, 0.35); } .chat-audio-player .audio-progress-fill { background: white; } /* Dark theme - slightly darker orange */ .dark .chat-audio-player { background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%); } /* Voice Recording Button */ .chat-widget-voice { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: none; color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .chat-widget-voice:hover { color: #10B981; background: rgba(16, 185, 129, 0.1); } .chat-widget-voice.recording { color: #EF4444; background: rgba(239, 68, 68, 0.15); animation: pulse-recording 1.5s ease-in-out infinite; } @keyframes pulse-recording { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .dark .chat-widget-voice { color: #64748b; } .dark .chat-widget-voice:hover { color: #10B981; background: rgba(16, 185, 129, 0.15); } .dark .chat-widget-voice.recording { color: #EF4444; background: rgba(239, 68, 68, 0.2); } /* Engineer Voice Button */ .engineer-voice-btn.recording { background: rgba(239, 68, 68, 0.15) !important; color: #EF4444 !important; animation: pulse-recording 1.5s ease-in-out infinite; } /* Error Toast */ .chat-error-toast { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: #DC2626; color: white; padding: 10px 20px; border-radius: 8px; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); animation: toastFadeIn 0.3s ease, toastFadeOut 0.3s ease 3.7s; z-index: 10; } @keyframes toastFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toastFadeOut { from { opacity: 1; } to { opacity: 0; } } /* Input Error */ .chat-input-error { min-height: 0; } /* ======================================== CHAT TOGGLE ICON Floating button to reopen chat ======================================== */ .chat-toggle-icon { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9998; opacity: 0; transform: scale(0.8); } .chat-toggle-icon.hidden { display: none; } .chat-toggle-icon.is-visible { display: flex; opacity: 1; transform: scale(1); } .chat-toggle-icon:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45), 0 4px 8px rgba(0, 0, 0, 0.15); } .chat-toggle-icon:active { transform: scale(0.95); } .chat-toggle-icon-default { width: 26px; height: 26px; } /* Badge with sparkle indicator */ .chat-toggle-badge { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #EF4444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .dark .chat-toggle-badge { background: #1E1E1E; color: #F87171; } /* Mobile adjustments */ @media (max-width: 1023px) { .chat-toggle-icon { bottom: 80px; /* Above sticky CTA */ right: 16px; width: 52px; height: 52px; } .chat-toggle-icon-default { width: 24px; height: 24px; } .chat-toggle-badge { width: 18px; height: 18px; } } /* Desktop - position to not overlap content */ @media (min-width: 1024px) { .chat-toggle-icon { bottom: 32px; right: 32px; } } /* ======================================== STREAMING CURSOR ANIMATION ======================================== */ .streaming-cursor { display: inline-block; opacity: 1; animation: blink-cursor 0.8s infinite; color: #6B7280; font-weight: 300; margin-left: 1px; } .dark .streaming-cursor { color: #9CA3AF; } @keyframes blink-cursor { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } /* Hide cursor when streaming ends */ .animate-complete .streaming-cursor { display: none; } /* ======================================== QUICK REPLY BUTTONS ======================================== */ .chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .chat-quick-replies::-webkit-scrollbar { display: none; } .chat-quick-reply-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 20px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.2s ease; } .chat-quick-reply-btn:hover { background: #FEF2F2; border-color: #EF4444; color: #DC2626; } .chat-quick-reply-btn:active { transform: scale(0.97); } .chat-quick-reply-btn svg { flex-shrink: 0; color: #9CA3AF; transition: color 0.2s ease; } .chat-quick-reply-btn:hover svg { color: #EF4444; } .dark .chat-quick-reply-btn { background: #1E1E1E; border-color: #333333; color: #D1D5DB; } .dark .chat-quick-reply-btn:hover { background: rgba(239, 68, 68, 0.15); border-color: #EF4444; color: #F87171; } .dark .chat-quick-reply-btn svg { color: #6B7280; } .dark .chat-quick-reply-btn:hover svg { color: #F87171; } /* Hide quick replies when hidden class is applied */ .chat-quick-replies.hidden { display: none; } /* ======================================== SUGGESTED PROMPTS (at chat start) ======================================== */ .chat-suggested-prompts { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; } .chat-suggested-prompts.hidden { display: none; } .chat-suggested-prompt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 14px; color: #374151; cursor: pointer; text-align: left; transition: all 0.2s ease; } .chat-suggested-prompt:hover { background: #FEF2F2; border-color: #FECACA; color: #DC2626; } .chat-suggested-prompt:active { transform: scale(0.99); } .chat-suggested-prompt svg { width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0; } .chat-suggested-prompt:hover svg { color: #EF4444; } .dark .chat-suggested-prompt { background: #1E1E1E; border-color: #333333; color: #D1D5DB; } .dark .chat-suggested-prompt:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #F87171; } .dark .chat-suggested-prompt svg { color: #6B7280; } .dark .chat-suggested-prompt:hover svg { color: #F87171; } /* ======================================== MARKDOWN STYLES (in assistant messages) ======================================== */ /* Bold text */ .chat-bubble strong { font-weight: 600; color: #1F2937; } .dark .chat-bubble strong { color: #F3F4F6; } /* Italic text */ .chat-bubble em { font-style: italic; } /* Lists */ .chat-bubble .chat-list { margin: 8px 0; padding-left: 0; list-style: none; } .chat-bubble .chat-list li { position: relative; padding-left: 20px; margin-bottom: 4px; line-height: 1.5; } .chat-bubble .chat-list li::before { content: "•"; position: absolute; left: 6px; color: #EF4444; font-weight: bold; } /* Links */ .chat-bubble .chat-link { color: #EF4444; text-decoration: none; border-bottom: 1px dotted #EF4444; transition: all 0.2s ease; } .chat-bubble .chat-link:hover { color: #DC2626; border-bottom-style: solid; } .dark .chat-bubble .chat-link { color: #F87171; border-bottom-color: #F87171; } .dark .chat-bubble .chat-link:hover { color: #FCA5A5; border-bottom-color: #FCA5A5; } /* ======================================== COPY BUTTON (on assistant messages) ======================================== */ .chat-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 4px; margin-left: 8px; background: transparent; border: none; border-radius: 4px; color: #9CA3AF; cursor: pointer; opacity: 0; transition: all 0.2s ease; vertical-align: middle; } .chat-message:hover .chat-copy-btn, .chat-copy-btn:focus { opacity: 1; } .chat-copy-btn:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; } .chat-copy-btn:active { transform: scale(0.95); } .chat-copy-btn svg { width: 14px; height: 14px; } .chat-copy-btn .check-icon { color: #10B981; } .dark .chat-copy-btn { color: #6B7280; } .dark .chat-copy-btn:hover { background: rgba(239, 68, 68, 0.15); color: #F87171; } .dark .chat-copy-btn .check-icon { color: #34D399; } /* Note: .hidden utility is provided by Tailwind CSS Don't override with !important as it breaks responsive variants like lg:flex */ /* ======================================== CHAT SAFETY POPUPS (Contact Collection) Welcome & Exit-warning popups ======================================== */ .chat-safety-popup { position: fixed; inset: 0; z-index: 300; /* Above chat widget (200) */ display: flex; align-items: center; justify-content: center; padding: 20px; } .chat-safety-popup.hidden { display: none; } /* Backdrop with blur */ .chat-safety-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease-out; } .chat-safety-popup.is-visible .chat-safety-popup-backdrop { opacity: 1; } /* Popup Content */ .chat-safety-popup-content { position: relative; z-index: 1; width: 100%; max-width: 380px; background: #FFFFFF; border-radius: 24px; padding: 32px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0.9) translateY(20px); transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .chat-safety-popup.is-visible .chat-safety-popup-content { opacity: 1; transform: scale(1) translateY(0); } .dark .chat-safety-popup-content { background: #1A1A1A; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); } /* Warning style */ .chat-safety-popup-content.chat-safety-popup-warning { border: 2px solid #FEF3C7; } .dark .chat-safety-popup-content.chat-safety-popup-warning { border-color: rgba(252, 211, 77, 0.3); } /* Icon */ .chat-safety-popup-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EF4444 0%, #F97316 100%); border-radius: 50%; color: white; } .chat-safety-popup-icon svg { width: 32px; height: 32px; } /* Warning icon */ .chat-safety-popup-icon-warning { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); } /* Title */ .chat-safety-popup-title { font-size: 20px; font-weight: 700; color: #111111; text-align: center; margin-bottom: 12px; line-height: 1.3; } .dark .chat-safety-popup-title { color: #F7F7F7; } /* Description */ .chat-safety-popup-description { font-size: 14px; line-height: 1.6; color: #6B7280; text-align: center; margin-bottom: 24px; } .dark .chat-safety-popup-description { color: #9CA3AF; } /* Form */ .chat-safety-form { display: flex; flex-direction: column; gap: 16px; } .chat-safety-field { display: flex; flex-direction: column; gap: 6px; } .chat-safety-label { font-size: 13px; font-weight: 500; color: #374151; } .dark .chat-safety-label { color: #D1D5DB; } .chat-safety-input { width: 100%; padding: 12px 16px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 15px; color: #111111; outline: none; transition: all 0.2s ease; } .chat-safety-input::placeholder { color: #9CA3AF; } .chat-safety-input:focus { background: #FFFFFF; border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .dark .chat-safety-input { background: #252525; border-color: #3F3F3F; color: #F5F5F5; } .dark .chat-safety-input::placeholder { color: #6B7280; } .dark .chat-safety-input:focus { background: #2D2D2D; border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } /* Error message */ .chat-safety-error { font-size: 13px; color: #DC2626; background: #FEF2F2; padding: 10px 14px; border-radius: 8px; border: 1px solid #FECACA; } .chat-safety-error.hidden { display: none; } .dark .chat-safety-error { color: #FCA5A5; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } /* Actions */ .chat-safety-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } /* Buttons */ .chat-safety-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; border-radius: 12px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s ease; } .chat-safety-btn:active { transform: scale(0.98); } .chat-safety-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Primary button */ .chat-safety-btn-primary { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); } .chat-safety-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); transform: translateY(-1px); } .chat-safety-btn-primary .btn-loading { display: none; } .chat-safety-btn-primary.is-loading .btn-text { display: none; } .chat-safety-btn-primary.is-loading .btn-loading { display: block; } .chat-safety-btn-primary .btn-loading svg { width: 20px; height: 20px; } /* Secondary button */ .chat-safety-btn-secondary { background: transparent; color: #6B7280; border: 1px solid #E5E7EB; } .chat-safety-btn-secondary:hover { background: #F9FAFB; color: #374151; } .dark .chat-safety-btn-secondary { color: #9CA3AF; border-color: #3F3F3F; } .dark .chat-safety-btn-secondary:hover { background: #252525; color: #D1D5DB; } /* Danger button */ .chat-safety-btn-danger { background: transparent; color: #DC2626; border: 1px solid #FECACA; } .chat-safety-btn-danger:hover { background: #FEF2F2; } .dark .chat-safety-btn-danger { color: #FCA5A5; border-color: rgba(239, 68, 68, 0.3); } .dark .chat-safety-btn-danger:hover { background: rgba(239, 68, 68, 0.1); } /* Spin animation for loading */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .chat-safety-popup-backdrop, .chat-safety-popup-content, .chat-safety-input, .chat-safety-btn { transition: none; } .animate-spin { animation: none; } } /* ======================================== VIN SCANNER ANIMATIONS ======================================== */ /* VIN Scanner positioned on the progress line - centered vertically */ .vin-scanner-on-line { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 2; } .vin-scanner { width: 140px; height: 47px; flex-shrink: 0; } /* Larger VIN scanner on desktop */ @media (min-width: 640px) { .vin-scanner { width: 160px; height: 53px; } } .vin-scanner svg { width: 100%; height: 100%; } /* Common VIN plate styling */ .vin-scanner .vin-plate { fill: #F3F4F6; stroke: #D1D5DB; stroke-width: 0.5; } .dark .vin-scanner .vin-plate { fill: #1F2937; stroke: #374151; } /* VIN characters base */ .vin-scanner .vin-char { font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace; font-size: 10px; font-weight: 600; fill: #374151; } .dark .vin-scanner .vin-char { fill: #D1D5DB; } /* ---- BAD STATE (Red/Error) ---- */ .vin-scanner--bad .vin-plate { fill: #FEF2F2; stroke: #FECACA; } .dark .vin-scanner--bad .vin-plate { fill: rgba(239, 68, 68, 0.1); stroke: rgba(239, 68, 68, 0.3); } /* Scan line - chaotic movement */ .vin-scanner--bad .scan-line { fill: #DC2626; opacity: 0.9; animation: vin-scan-chaotic 2s ease-in-out infinite; } .dark .vin-scanner--bad .scan-line { fill: #FCA5A5; } /* Character glitch effect - subtle opacity flicker */ .vin-scanner--bad .vin-char { animation: vin-char-flicker 1.8s ease-in-out infinite; } .vin-scanner--bad .vin-char.c1 { animation-delay: 0s; } .vin-scanner--bad .vin-char.c2 { animation-delay: 0.1s; } .vin-scanner--bad .vin-char.c3 { animation-delay: 0.2s; } .vin-scanner--bad .vin-char.c4 { animation-delay: 0.3s; } .vin-scanner--bad .vin-char.c5 { animation-delay: 0.4s; } .vin-scanner--bad .vin-char.c6 { animation-delay: 0.5s; } .vin-scanner--bad .vin-char.c7 { animation-delay: 0.6s; } .vin-scanner--bad .vin-char.c8 { animation-delay: 0.7s; } .vin-scanner--bad .vin-char.c9 { animation-delay: 0.8s; } .vin-scanner--bad .vin-char.c10 { animation-delay: 0.9s; } .vin-scanner--bad .vin-char.c11 { animation-delay: 1.0s; } .vin-scanner--bad .vin-char.c12 { animation-delay: 1.1s; } /* Error badge - premium pulse (always visible) */ .vin-scanner--bad .error-badge { transform-origin: 112px 11px; animation: vin-error-pulse 2s ease-in-out infinite; } /* Error triangle uses gradient from SVG */ .dark .vin-scanner--bad .error-triangle { filter: brightness(1.2); } .vin-scanner--bad .error-exclaim { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 7px; font-weight: 700; fill: #FFFFFF; text-anchor: middle; dominant-baseline: central; } .dark .vin-scanner--bad .error-exclaim { fill: #1F2937; } /* ---- GOOD STATE (Green/Success) ---- */ .vin-scanner--good .vin-plate { fill: #F0FDF4; stroke: #BBF7D0; } .dark .vin-scanner--good .vin-plate { fill: rgba(34, 197, 94, 0.1); stroke: rgba(34, 197, 94, 0.3); } /* Scan line - smooth movement */ .vin-scanner--good .scan-line { fill: #16A34A; opacity: 0.9; animation: vin-scan-smooth 2.2s ease-in-out infinite; } .dark .vin-scanner--good .scan-line { fill: #86EFAC; } /* Character activation effect - smooth glow */ .vin-scanner--good .vin-char { opacity: 0.5; animation: vin-char-glow 2.2s ease-in-out infinite; } .vin-scanner--good .vin-char.c1 { animation-delay: 0s; } .vin-scanner--good .vin-char.c2 { animation-delay: 0.12s; } .vin-scanner--good .vin-char.c3 { animation-delay: 0.24s; } .vin-scanner--good .vin-char.c4 { animation-delay: 0.36s; } .vin-scanner--good .vin-char.c5 { animation-delay: 0.48s; } .vin-scanner--good .vin-char.c6 { animation-delay: 0.6s; } .vin-scanner--good .vin-char.c7 { animation-delay: 0.72s; } .vin-scanner--good .vin-char.c8 { animation-delay: 0.84s; } .vin-scanner--good .vin-char.c9 { animation-delay: 0.96s; } .vin-scanner--good .vin-char.c10 { animation-delay: 1.08s; } .vin-scanner--good .vin-char.c11 { animation-delay: 1.2s; } .vin-scanner--good .vin-char.c12 { animation-delay: 1.32s; } /* Success badge - premium pulse (always visible) */ .vin-scanner--good .success-badge { transform-origin: 112px 11px; animation: vin-success-pulse 2.5s ease-in-out infinite; } /* Success circle uses gradient from SVG */ .dark .vin-scanner--good .success-circle { filter: brightness(1.2); } .vin-scanner--good .success-check { stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } .dark .vin-scanner--good .success-check { stroke: #1F2937; } /* ---- KEYFRAMES ---- */ /* Bad state - chaotic scan movement */ @keyframes vin-scan-chaotic { 0% { transform: translateX(0); opacity: 0.9; } 15% { transform: translateX(25px); opacity: 0.7; } 30% { transform: translateX(15px); opacity: 0.9; } 45% { transform: translateX(50px); opacity: 0.6; } 60% { transform: translateX(40px); opacity: 0.85; } 75% { transform: translateX(75px); opacity: 0.7; } 90% { transform: translateX(95px); opacity: 0.9; } 100% { transform: translateX(100px); opacity: 0.5; } } /* Bad state - subtle character flicker */ @keyframes vin-char-flicker { 0%, 100% { opacity: 1; } 20% { opacity: 0.65; } 40% { opacity: 0.9; } 60% { opacity: 0.55; } 80% { opacity: 0.85; } } /* Bad state - premium error pulse (always visible) */ @keyframes vin-error-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } /* Good state - smooth scan line */ @keyframes vin-scan-smooth { 0% { transform: translateX(0); opacity: 0.9; } 65% { transform: translateX(100px); opacity: 0.9; } 75% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } } /* Good state - character glow when scan passes */ @keyframes vin-char-glow { 0% { opacity: 0.5; fill: #9CA3AF; } 25% { opacity: 1; fill: #16A34A; } 50% { opacity: 1; fill: #16A34A; } 75%, 100% { opacity: 1; fill: #374151; } } .dark .vin-scanner--good .vin-char { animation-name: vin-char-glow-dark; } @keyframes vin-char-glow-dark { 0% { opacity: 0.5; fill: #6B7280; } 25% { opacity: 1; fill: #86EFAC; } 50% { opacity: 1; fill: #86EFAC; } 75%, 100% { opacity: 1; fill: #D1D5DB; } } /* Good state - premium success pulse (always visible) */ @keyframes vin-success-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.9; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .vin-scanner--bad .scan-line, .vin-scanner--bad .vin-char, .vin-scanner--bad .error-badge, .vin-scanner--good .scan-line, .vin-scanner--good .vin-char, .vin-scanner--good .success-badge { animation: none; } .vin-scanner--good .vin-char { opacity: 1; } .vin-scanner--bad .error-badge, .vin-scanner--good .success-badge { opacity: 1; } }