Spaces:
Sleeping
Sleeping
| /** | |
| * Auth Page - Professional Landing Page Styling | |
| * | |
| * Full landing page with multiple sections: | |
| * - Hero with animated background | |
| * - Demo video section | |
| * - Features grid | |
| * - Testimonials | |
| * - Auth form | |
| * | |
| * Supports both light and dark themes | |
| */ | |
| /* =========================================== | |
| LANDING PAGE BASE | |
| =========================================== */ | |
| .landing-page { | |
| min-height: 100vh; | |
| background: #f0eef8; | |
| overflow-x: hidden; | |
| } | |
| [data-theme="dark"] .landing-page { | |
| background: #0a0a14; | |
| } | |
| /* =========================================== | |
| FIXED NAVIGATION | |
| =========================================== */ | |
| .landing-nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| padding: 16px 0; | |
| transition: all 0.3s ease; | |
| } | |
| .landing-nav.scrolled { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); | |
| padding: 12px 0; | |
| } | |
| [data-theme="dark"] .landing-nav.scrolled { | |
| background: rgba(10, 10, 20, 0.95); | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .landing-nav-container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .landing-nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| } | |
| .landing-nav-logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .landing-nav-logo span { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: white; | |
| transition: color 0.3s ease; | |
| } | |
| .landing-nav.scrolled .landing-nav-logo span { | |
| color: #191970; | |
| } | |
| [data-theme="dark"] .landing-nav.scrolled .landing-nav-logo span { | |
| color: white; | |
| } | |
| .landing-nav-links { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .landing-nav-links button { | |
| padding: 10px 20px; | |
| background: transparent; | |
| border: none; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .landing-nav.scrolled .landing-nav-links button { | |
| color: #7272a8; | |
| } | |
| [data-theme="dark"] .landing-nav.scrolled .landing-nav-links button { | |
| color: #94a3b8; | |
| } | |
| .landing-nav-links button:hover, | |
| .landing-nav-links button.active { | |
| background: rgba(255, 255, 255, 0.15); | |
| color: white; | |
| } | |
| .landing-nav.scrolled .landing-nav-links button:hover, | |
| .landing-nav.scrolled .landing-nav-links button.active { | |
| background: rgba(79, 124, 130, 0.1); | |
| color: #d000d0; | |
| } | |
| .landing-nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .landing-nav-theme { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(255, 255, 255, 0.15); | |
| border: none; | |
| border-radius: 10px; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .landing-nav.scrolled .landing-nav-theme { | |
| background: #e4e0f2; | |
| color: #7272a8; | |
| } | |
| [data-theme="dark"] .landing-nav.scrolled .landing-nav-theme { | |
| background: #1e293b; | |
| color: #94a3b8; | |
| } | |
| .landing-nav-cta { | |
| padding: 10px 24px; | |
| background: white; | |
| border: none; | |
| border-radius: 10px; | |
| color: #d000d0; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .landing-nav-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .landing-nav.scrolled .landing-nav-cta { | |
| background: linear-gradient(135deg, #d000d0 0%, #00cccc 100%); | |
| color: white; | |
| } | |
| /* =========================================== | |
| HERO SECTION | |
| =========================================== */ | |
| .landing-hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| padding: 120px 24px 80px; | |
| overflow: hidden; | |
| } | |
| .landing-hero-bg { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); | |
| } | |
| .hero-gradient { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at 30% 20%, rgba(79, 124, 130, 0.4) 0%, transparent 50%), | |
| radial-gradient(circle at 70% 80%, rgba(147, 51, 234, 0.4) 0%, transparent 50%); | |
| } | |
| .hero-grid { | |
| position: absolute; | |
| inset: 0; | |
| background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| } | |
| .hero-particles { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| } | |
| .hero-particles .particle { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.4); | |
| border-radius: 50%; | |
| animation: particleFloat 10s ease-in-out infinite; | |
| } | |
| @keyframes particleFloat { | |
| 0%, 100% { | |
| transform: translateY(0) translateX(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(20px); | |
| opacity: 0; | |
| } | |
| } | |
| .landing-hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 900px; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 50px; | |
| color: white; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| margin-bottom: 24px; | |
| } | |
| .hero-title { | |
| font-size: clamp(2.5rem, 6vw, 4rem); | |
| font-weight: 800; | |
| color: white; | |
| line-height: 1.1; | |
| margin-bottom: 24px; | |
| letter-spacing: -0.03em; | |
| } | |
| .hero-title .gradient-text { | |
| background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fcd34d 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-description { | |
| font-size: 1.25rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| line-height: 1.7; | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| } | |
| .hero-cta-group { | |
| display: flex; | |
| gap: 16px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-bottom: 60px; | |
| } | |
| .hero-cta-primary, | |
| .hero-cta-secondary { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 16px 32px; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| } | |
| .hero-cta-primary { | |
| background: white; | |
| color: #d000d0; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .hero-cta-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .hero-cta-secondary { | |
| background: rgba(255, 255, 255, 0.15); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| backdrop-filter: blur(10px); | |
| } | |
| .hero-cta-secondary:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .hero-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 48px; | |
| flex-wrap: wrap; | |
| } | |
| .hero-stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .hero-stat .stat-icon { | |
| color: rgba(255, 255, 255, 0.6); | |
| margin-bottom: 4px; | |
| } | |
| .hero-stat .stat-number { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: white; | |
| } | |
| .hero-stat .stat-label { | |
| font-size: 0.875rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .hero-scroll-indicator { | |
| position: absolute; | |
| bottom: 32px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| animation: bounce 2s ease-in-out infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateX(-50%) translateY(0); } | |
| 50% { transform: translateX(-50%) translateY(8px); } | |
| } | |
| /* =========================================== | |
| SECTION COMMON STYLES | |
| =========================================== */ | |
| .landing-section-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .section-label { | |
| display: inline-block; | |
| padding: 6px 16px; | |
| background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(147, 177, 181, 0.1) 100%); | |
| border-radius: 50px; | |
| color: #d000d0; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| [data-theme="dark"] .section-label { | |
| background: rgba(99, 102, 241, 0.2); | |
| } | |
| .section-title { | |
| font-size: clamp(2rem, 4vw, 2.75rem); | |
| font-weight: 800; | |
| color: #191970; | |
| margin-bottom: 16px; | |
| letter-spacing: -0.02em; | |
| } | |
| [data-theme="dark"] .section-title { | |
| color: white; | |
| } | |
| .section-description { | |
| font-size: 1.125rem; | |
| color: #7272a8; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| line-height: 1.7; | |
| } | |
| [data-theme="dark"] .section-description { | |
| color: #94a3b8; | |
| } | |
| /* =========================================== | |
| DEMO VIDEO SECTION | |
| =========================================== */ | |
| .landing-demo { | |
| padding: 100px 0; | |
| background: #f0eef8; | |
| } | |
| [data-theme="dark"] .landing-demo { | |
| background: #0f0f1a; | |
| } | |
| .demo-video-container { | |
| max-width: 900px; | |
| margin: 0 auto 60px; | |
| } | |
| .demo-video-wrapper { | |
| position: relative; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15); | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .demo-video-wrapper:hover { | |
| transform: scale(1.02); | |
| } | |
| [data-theme="dark"] .demo-video-wrapper { | |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4); | |
| } | |
| .demo-video-thumbnail { | |
| position: relative; | |
| aspect-ratio: 16 / 9; | |
| background: linear-gradient(135deg, #191970 0%, #2b2b8a 100%); | |
| } | |
| .demo-video-overlay { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| background: rgba(0, 0, 0, 0.4); | |
| z-index: 2; | |
| transition: background 0.3s ease; | |
| } | |
| .demo-video-wrapper:hover .demo-video-overlay { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .demo-play-btn { | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: white; | |
| border: none; | |
| border-radius: 50%; | |
| color: #d000d0; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .demo-play-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .demo-video-overlay span { | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| } | |
| /* Demo Preview (Mock App Screen) */ | |
| .demo-preview { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .demo-preview-header { | |
| display: flex; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| background: #191970; | |
| } | |
| .preview-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .preview-dot.red { background: #ef4444; } | |
| .preview-dot.yellow { background: #fbbf24; } | |
| .preview-dot.green { background: #22c55e; } | |
| .demo-preview-content { | |
| flex: 1; | |
| display: flex; | |
| background: #0f172a; | |
| } | |
| .preview-sidebar { | |
| width: 60px; | |
| padding: 16px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| background: #191970; | |
| } | |
| .preview-menu-item { | |
| height: 32px; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .preview-menu-item.active { | |
| background: #d000d0; | |
| } | |
| .preview-main { | |
| flex: 1; | |
| display: flex; | |
| padding: 20px; | |
| gap: 20px; | |
| } | |
| .preview-video-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| background: rgba(79, 124, 130, 0.1); | |
| border-radius: 16px; | |
| } | |
| .preview-avatar { | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #d000d0 0%, #00cccc 100%); | |
| border-radius: 50%; | |
| color: white; | |
| } | |
| .preview-video-area span { | |
| color: rgba(255, 255, 255, 0.7); | |
| font-size: 0.875rem; | |
| } | |
| .preview-chat { | |
| width: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .preview-message { | |
| padding: 12px; | |
| border-radius: 12px; | |
| background: #191970; | |
| } | |
| .preview-message.ai { | |
| width: 80%; | |
| height: 40px; | |
| } | |
| .preview-message.user { | |
| width: 70%; | |
| height: 32px; | |
| margin-left: auto; | |
| background: #d000d0; | |
| } | |
| .preview-message.short { | |
| width: 50%; | |
| height: 24px; | |
| } | |
| .demo-caption { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 16px; | |
| color: #7272a8; | |
| font-size: 0.875rem; | |
| } | |
| [data-theme="dark"] .demo-caption { | |
| color: #94a3b8; | |
| } | |
| /* How It Works Steps */ | |
| .how-it-works { | |
| margin-top: 80px; | |
| } | |
| .how-it-works h3 { | |
| text-align: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: #191970; | |
| margin-bottom: 40px; | |
| } | |
| [data-theme="dark"] .how-it-works h3 { | |
| color: white; | |
| } | |
| .steps-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .steps-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .steps-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .step-card { | |
| position: relative; | |
| padding: 32px 24px; | |
| background: white; | |
| border-radius: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| [data-theme="dark"] .step-card { | |
| background: #1e293b; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .step-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .step-number { | |
| position: absolute; | |
| top: -16px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #d000d0 0%, #00cccc 100%); | |
| border-radius: 50%; | |
| color: white; | |
| font-weight: 700; | |
| font-size: 0.875rem; | |
| } | |
| .step-icon { | |
| width: 56px; | |
| height: 56px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 16px; | |
| background: rgba(79, 124, 130, 0.1); | |
| border-radius: 16px; | |
| color: #d000d0; | |
| } | |
| .step-card h4 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: #191970; | |
| margin-bottom: 8px; | |
| } | |
| [data-theme="dark"] .step-card h4 { | |
| color: white; | |
| } | |
| .step-card p { | |
| font-size: 0.875rem; | |
| color: #7272a8; | |
| line-height: 1.6; | |
| } | |
| [data-theme="dark"] .step-card p { | |
| color: #94a3b8; | |
| } | |
| .step-connector { | |
| position: absolute; | |
| right: -22px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: #00cccc; | |
| z-index: 1; | |
| } | |
| [data-theme="dark"] .step-connector { | |
| color: #475569; | |
| } | |
| @media (max-width: 900px) { | |
| .step-connector { | |
| display: none; | |
| } | |
| } | |
| /* =========================================== | |
| FEATURES SECTION | |
| =========================================== */ | |
| .landing-features { | |
| padding: 100px 0; | |
| background: white; | |
| } | |
| [data-theme="dark"] .landing-features { | |
| background: #0a0a14; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .features-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .feature-card { | |
| position: relative; | |
| padding: 32px; | |
| background: #f0eef8; | |
| border-radius: 20px; | |
| border: 1px solid #c4b8de; | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| } | |
| [data-theme="dark"] .feature-card { | |
| background: #1e293b; | |
| border-color: #334155; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-8px); | |
| border-color: var(--feature-color, #d000d0); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| [data-theme="dark"] .feature-card:hover { | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .feature-glow { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--feature-color, #d000d0); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .feature-card:hover .feature-glow { | |
| opacity: 1; | |
| } | |
| .feature-icon { | |
| width: 56px; | |
| height: 56px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| color: #191970; | |
| margin-bottom: 12px; | |
| } | |
| [data-theme="dark"] .feature-card h3 { | |
| color: white; | |
| } | |
| .feature-card p { | |
| font-size: 0.95rem; | |
| color: #7272a8; | |
| line-height: 1.7; | |
| } | |
| [data-theme="dark"] .feature-card p { | |
| color: #94a3b8; | |
| } | |
| /* =========================================== | |
| TESTIMONIALS SECTION | |
| =========================================== */ | |
| .landing-testimonials { | |
| padding: 100px 0; | |
| background: #f0eef8; | |
| } | |
| [data-theme="dark"] .landing-testimonials { | |
| background: #0f0f1a; | |
| } | |
| .testimonials-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| margin-bottom: 60px; | |
| } | |
| @media (max-width: 900px) { | |
| .testimonials-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .testimonial-card { | |
| padding: 32px; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| [data-theme="dark"] .testimonial-card { | |
| background: #1e293b; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-quote { | |
| color: #d000d0; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .testimonial-text { | |
| font-size: 1rem; | |
| color: #475569; | |
| line-height: 1.7; | |
| margin-bottom: 20px; | |
| font-style: italic; | |
| } | |
| [data-theme="dark"] .testimonial-text { | |
| color: #cbd5e1; | |
| } | |
| .testimonial-rating { | |
| display: flex; | |
| gap: 4px; | |
| margin-bottom: 20px; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .testimonial-avatar { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #e4e0f2 0%, #c4b8de 100%); | |
| border-radius: 50%; | |
| font-size: 1.5rem; | |
| } | |
| [data-theme="dark"] .testimonial-avatar { | |
| background: linear-gradient(135deg, #334155 0%, #475569 100%); | |
| } | |
| .testimonial-info h4 { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: #191970; | |
| margin-bottom: 2px; | |
| } | |
| [data-theme="dark"] .testimonial-info h4 { | |
| color: white; | |
| } | |
| .testimonial-info p { | |
| font-size: 0.875rem; | |
| color: #7272a8; | |
| } | |
| [data-theme="dark"] .testimonial-info p { | |
| color: #94a3b8; | |
| } | |
| /* Trust Badges */ | |
| .trust-badges { | |
| text-align: center; | |
| } | |
| .trust-badges > p { | |
| color: #7272a8; | |
| font-size: 0.875rem; | |
| margin-bottom: 20px; | |
| } | |
| [data-theme="dark"] .trust-badges > p { | |
| color: #94a3b8; | |
| } | |
| .company-logos { | |
| display: flex; | |
| justify-content: center; | |
| gap: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .company-logo { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: #94a3b8; | |
| opacity: 0.6; | |
| } | |
| [data-theme="dark"] .company-logo { | |
| color: #64748b; | |
| } | |
| /* =========================================== | |
| AUTH SECTION | |
| =========================================== */ | |
| .landing-auth { | |
| padding: 100px 0; | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); | |
| } | |
| .auth-section-wrapper { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| @media (max-width: 900px) { | |
| .auth-section-wrapper { | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| } | |
| } | |
| .auth-section-info h2 { | |
| font-size: clamp(2rem, 4vw, 2.5rem); | |
| font-weight: 800; | |
| color: white; | |
| margin-bottom: 16px; | |
| letter-spacing: -0.02em; | |
| } | |
| .auth-section-info > p { | |
| font-size: 1.125rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| margin-bottom: 32px; | |
| line-height: 1.7; | |
| } | |
| .auth-benefits { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .auth-benefit { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: white; | |
| font-size: 1rem; | |
| } | |
| .auth-benefit svg { | |
| color: #fbbf24; | |
| } | |
| /* Auth Form Card */ | |
| .auth-form-card { | |
| background: white; | |
| padding: 40px; | |
| border-radius: 24px; | |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2); | |
| } | |
| [data-theme="dark"] .auth-form-card { | |
| background: #1e293b; | |
| } | |
| .auth-form-card .auth-form-header { | |
| margin-bottom: 24px; | |
| } | |
| .auth-form-card .auth-form-header h3 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: #191970; | |
| margin-bottom: 8px; | |
| } | |
| [data-theme="dark"] .auth-form-card .auth-form-header h3 { | |
| color: white; | |
| } | |
| .auth-form-card .auth-form-header p { | |
| color: #7272a8; | |
| font-size: 0.95rem; | |
| } | |
| [data-theme="dark"] .auth-form-card .auth-form-header p { | |
| color: #94a3b8; | |
| } | |
| /* =========================================== | |
| FOOTER | |
| =========================================== */ | |
| .landing-footer { | |
| padding: 60px 0 40px; | |
| background: #0f172a; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 40px; | |
| border-bottom: 1px solid #191970; | |
| margin-bottom: 24px; | |
| } | |
| @media (max-width: 768px) { | |
| .footer-content { | |
| flex-direction: column; | |
| gap: 32px; | |
| text-align: center; | |
| } | |
| } | |
| .footer-brand p { | |
| color: #7272a8; | |
| margin-top: 12px; | |
| font-size: 0.95rem; | |
| } | |
| .landing-footer .landing-nav-logo span { | |
| color: white; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 24px; | |
| } | |
| .footer-links button { | |
| background: none; | |
| border: none; | |
| color: #94a3b8; | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| transition: color 0.2s ease; | |
| } | |
| .footer-links button:hover { | |
| color: white; | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .footer-bottom p { | |
| color: #7272a8; | |
| font-size: 0.875rem; | |
| } | |
| .footer-legal-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .footer-legal-links a { | |
| color: #7272a8; | |
| font-size: 0.875rem; | |
| text-decoration: none; | |
| transition: color 0.2s ease; | |
| } | |
| .footer-legal-links a:hover { | |
| color: #00cccc; | |
| } | |
| .footer-divider { | |
| color: #475569; | |
| } | |
| /* =========================================== | |
| VIDEO MODAL | |
| =========================================== */ | |
| .video-modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 24px; | |
| animation: modalFadeIn 0.3s ease; | |
| } | |
| @keyframes modalFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .video-modal-content { | |
| position: relative; | |
| width: 100%; | |
| max-width: 1000px; | |
| background: #191970; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| animation: modalSlideIn 0.3s ease; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| transform: scale(0.9); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .video-modal-close { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| z-index: 10; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.5); | |
| border: none; | |
| border-radius: 50%; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .video-modal-close:hover { | |
| background: rgba(0, 0, 0, 0.7); | |
| transform: scale(1.1); | |
| } | |
| .video-modal-player { | |
| aspect-ratio: 16 / 9; | |
| background: #0f172a; | |
| } | |
| .video-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .video-placeholder-content { | |
| text-align: center; | |
| color: white; | |
| } | |
| .video-placeholder-content svg { | |
| margin-bottom: 20px; | |
| opacity: 0.5; | |
| } | |
| .video-placeholder-content h3 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| } | |
| .video-placeholder-content p { | |
| color: #94a3b8; | |
| margin-bottom: 8px; | |
| } | |
| .video-placeholder-content .video-hint { | |
| font-size: 0.875rem; | |
| color: #7272a8; | |
| } | |
| /* =========================================== | |
| AUTH FORM COMPONENTS (Shared) | |
| =========================================== *//* Branding Content */ | |
| .auth-branding-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 500px; | |
| } | |
| /* Logo */ | |
| .auth-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 48px; | |
| } | |
| .auth-logo-icon { | |
| width: 56px; | |
| height: 56px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| color: white; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); | |
| } | |
| .auth-logo-text { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: white; | |
| letter-spacing: -0.02em; | |
| } | |
| /* Hero Text */ | |
| .auth-hero { | |
| margin-bottom: 48px; | |
| } | |
| .auth-hero h1 { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| color: white; | |
| line-height: 1.15; | |
| margin-bottom: 16px; | |
| letter-spacing: -0.03em; | |
| } | |
| .auth-hero .gradient-text { | |
| display: block; | |
| background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fcd34d 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .auth-hero p { | |
| font-size: 1.125rem; | |
| color: rgba(255, 255, 255, 0.85); | |
| line-height: 1.7; | |
| max-width: 400px; | |
| } | |
| /* Features */ | |
| .auth-features { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| margin-bottom: 48px; | |
| } | |
| .auth-feature { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 16px; | |
| padding: 16px 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| transition: all 0.3s ease; | |
| animation: featureSlideIn 0.6s ease forwards; | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| @keyframes featureSlideIn { | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .auth-feature:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateX(8px); | |
| } | |
| .auth-feature-icon { | |
| width: 44px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .auth-feature-text h4 { | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 4px; | |
| } | |
| .auth-feature-text p { | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| line-height: 1.5; | |
| } | |
| /* Stats */ | |
| .auth-stats { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| padding: 24px 28px; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| } | |
| .auth-stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .auth-stat-number { | |
| font-size: 1.75rem; | |
| font-weight: 800; | |
| color: white; | |
| letter-spacing: -0.02em; | |
| } | |
| .auth-stat-label { | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: 600; | |
| } | |
| .auth-stat-divider { | |
| width: 1px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Floating Cards */ | |
| .auth-floating-elements { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .floating-card { | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 18px; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 12px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: #4f46e5; | |
| } | |
| .floating-card-1 { | |
| top: 15%; | |
| right: 10%; | |
| animation: floatCard1 6s ease-in-out infinite; | |
| } | |
| .floating-card-2 { | |
| bottom: 20%; | |
| right: 15%; | |
| animation: floatCard2 7s ease-in-out infinite; | |
| } | |
| @keyframes floatCard1 { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(-3deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(3deg); | |
| } | |
| } | |
| @keyframes floatCard2 { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(3deg); | |
| } | |
| 50% { | |
| transform: translateY(-15px) rotate(-3deg); | |
| } | |
| } | |
| /* =========================================== | |
| RIGHT PANEL - FORM | |
| =========================================== */ | |
| .auth-form-panel { | |
| flex: 0 0 520px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 40px 60px; | |
| background: #ffffff; | |
| position: relative; | |
| } | |
| [data-theme="dark"] .auth-form-panel { | |
| background: #0f0f1a; | |
| } | |
| /* Theme Toggle */ | |
| .auth-theme-toggle { | |
| position: absolute; | |
| top: 28px; | |
| right: 28px; | |
| width: 44px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #e4e0f2; | |
| border: none; | |
| border-radius: 12px; | |
| color: #7272a8; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| [data-theme="dark"] .auth-theme-toggle { | |
| background: #1e1e2e; | |
| color: #94a3b8; | |
| } | |
| .auth-theme-toggle:hover { | |
| background: #c4b8de; | |
| color: #4f46e5; | |
| transform: rotate(15deg); | |
| } | |
| [data-theme="dark"] .auth-theme-toggle:hover { | |
| background: #2d2d40; | |
| color: #a78bfa; | |
| } | |
| /* Form Container */ | |
| .auth-form-container { | |
| width: 100%; | |
| max-width: 380px; | |
| } | |
| /* Form Header */ | |
| .auth-form-header { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .auth-form-header h2 { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| color: #0f172a; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.02em; | |
| } | |
| [data-theme="dark"] .auth-form-header h2 { | |
| color: #f1f5f9; | |
| } | |
| .auth-form-header p { | |
| font-size: 0.95rem; | |
| color: #7272a8; | |
| line-height: 1.6; | |
| } | |
| [data-theme="dark"] .auth-form-header p { | |
| color: #94a3b8; | |
| } | |
| /* Alerts */ | |
| .auth-alert { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 18px; | |
| border-radius: 12px; | |
| margin-bottom: 24px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| .auth-alert-error { | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| color: #dc2626; | |
| } | |
| [data-theme="dark"] .auth-alert-error { | |
| background: rgba(239, 68, 68, 0.15); | |
| border-color: rgba(239, 68, 68, 0.25); | |
| color: #f87171; | |
| } | |
| .auth-alert-success { | |
| background: rgba(34, 197, 94, 0.1); | |
| border: 1px solid rgba(34, 197, 94, 0.2); | |
| color: #16a34a; | |
| } | |
| [data-theme="dark"] .auth-alert-success { | |
| background: rgba(34, 197, 94, 0.15); | |
| border-color: rgba(34, 197, 94, 0.25); | |
| color: #4ade80; | |
| } | |
| /* Form */ | |
| .auth-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| /* Input Group */ | |
| .auth-input-group { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| background: #f0eef8; | |
| border: 2px solid #c4b8de; | |
| border-radius: 14px; | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| } | |
| [data-theme="dark"] .auth-input-group { | |
| background: #1a1a2e; | |
| border-color: #2d2d40; | |
| } | |
| .auth-input-group:hover { | |
| border-color: #00cccc; | |
| } | |
| [data-theme="dark"] .auth-input-group:hover { | |
| border-color: #3d3d55; | |
| } | |
| .auth-input-group.focused { | |
| border-color: #4f46e5; | |
| box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); | |
| } | |
| [data-theme="dark"] .auth-input-group.focused { | |
| border-color: #7c3aed; | |
| box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15); | |
| } | |
| .auth-input-group.has-value .auth-input-icon { | |
| color: #4f46e5; | |
| } | |
| [data-theme="dark"] .auth-input-group.has-value .auth-input-icon { | |
| color: #a78bfa; | |
| } | |
| .auth-input-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 52px; | |
| color: #94a3b8; | |
| transition: color 0.25s ease; | |
| flex-shrink: 0; | |
| } | |
| .auth-input-group input { | |
| flex: 1; | |
| height: 56px; | |
| padding: 0 16px 0 0; | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: #0f172a; | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| } | |
| [data-theme="dark"] .auth-input-group input { | |
| color: #f1f5f9; | |
| } | |
| .auth-input-group input::placeholder { | |
| color: #94a3b8; | |
| font-weight: 400; | |
| } | |
| [data-theme="dark"] .auth-input-group input::placeholder { | |
| color: #64748b; | |
| } | |
| .auth-input-highlight { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #4f46e5, #7c3aed, #9333ea); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.3s ease; | |
| } | |
| .auth-input-group.focused .auth-input-highlight { | |
| transform: scaleX(1); | |
| } | |
| /* Password Toggle */ | |
| .auth-password-toggle { | |
| position: absolute; | |
| right: 14px; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: none; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| transition: all 0.25s ease; | |
| } | |
| .auth-password-toggle:hover { | |
| color: #4f46e5; | |
| background: rgba(79, 70, 229, 0.1); | |
| } | |
| [data-theme="dark"] .auth-password-toggle:hover { | |
| color: #a78bfa; | |
| background: rgba(167, 139, 250, 0.1); | |
| } | |
| /* Password Hint */ | |
| .auth-password-hint { | |
| margin-top: -12px; | |
| font-size: 0.8rem; | |
| color: #94a3b8; | |
| padding-left: 4px; | |
| } | |
| [data-theme="dark"] .auth-password-hint { | |
| color: #64748b; | |
| } | |
| /* Submit Button */ | |
| .auth-submit-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| height: 56px; | |
| margin-top: 8px; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: white; | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| border: none; | |
| border-radius: 14px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3); | |
| } | |
| .auth-submit-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(79, 70, 229, 0.4); | |
| } | |
| .auth-submit-btn:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .auth-submit-btn:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| .auth-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Divider */ | |
| .auth-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin: 28px 0; | |
| } | |
| .auth-divider::before, | |
| .auth-divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: #c4b8de; | |
| } | |
| [data-theme="dark"] .auth-divider::before, | |
| [data-theme="dark"] .auth-divider::after { | |
| background: #2d2d40; | |
| } | |
| .auth-divider span { | |
| font-size: 0.8rem; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| font-weight: 600; | |
| } | |
| /* Switch Text */ | |
| .auth-switch-text { | |
| text-align: center; | |
| font-size: 0.95rem; | |
| color: #7272a8; | |
| } | |
| [data-theme="dark"] .auth-switch-text { | |
| color: #94a3b8; | |
| } | |
| .auth-switch-btn { | |
| background: none; | |
| border: none; | |
| color: #4f46e5; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| padding: 0; | |
| } | |
| [data-theme="dark"] .auth-switch-btn { | |
| color: #a78bfa; | |
| } | |
| .auth-switch-btn:hover { | |
| color: #7c3aed; | |
| text-decoration: underline; | |
| } | |
| /* Security Badge */ | |
| .auth-security { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 32px; | |
| padding: 12px 20px; | |
| background: #f0eef8; | |
| border-radius: 10px; | |
| font-size: 0.8rem; | |
| color: #7272a8; | |
| } | |
| [data-theme="dark"] .auth-security { | |
| background: #1a1a2e; | |
| color: #94a3b8; | |
| } | |
| .auth-security svg { | |
| color: #22c55e; | |
| } | |
| /* =========================================== | |
| RESPONSIVE DESIGN | |
| =========================================== */ | |
| @media (max-width: 1024px) { | |
| .auth-branding { | |
| padding: 40px; | |
| } | |
| .auth-hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .auth-form-panel { | |
| flex: 0 0 480px; | |
| padding: 40px; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .auth-page { | |
| flex-direction: column; | |
| } | |
| .auth-branding { | |
| display: none; | |
| } | |
| .auth-form-panel { | |
| flex: 1; | |
| padding: 40px 24px; | |
| justify-content: flex-start; | |
| padding-top: 100px; | |
| } | |
| .auth-form-container { | |
| max-width: 400px; | |
| } | |
| /* Show mobile branding */ | |
| .auth-form-header::before { | |
| content: '✨'; | |
| display: block; | |
| font-size: 3rem; | |
| margin-bottom: 16px; | |
| } | |
| .auth-form-header h2::after { | |
| content: ' to AI Interviewer'; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #4f46e5; | |
| display: block; | |
| margin-top: 4px; | |
| } | |
| [data-theme="dark"] .auth-form-header h2::after { | |
| color: #a78bfa; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .auth-form-panel { | |
| padding: 24px 20px; | |
| padding-top: 80px; | |
| } | |
| .auth-theme-toggle { | |
| top: 20px; | |
| right: 20px; | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .auth-form-header h2 { | |
| font-size: 1.75rem; | |
| } | |
| .auth-input-group input { | |
| height: 52px; | |
| font-size: 0.9rem; | |
| } | |
| .auth-submit-btn { | |
| height: 52px; | |
| } | |
| } | |
| /* =========================================== | |
| GOOGLE OAUTH BUTTON | |
| =========================================== */ | |
| .auth-google-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| width: 100%; | |
| height: 56px; | |
| padding: 0 24px; | |
| background: #ffffff; | |
| border: 2px solid #c4b8de; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #191970; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-bottom: 20px; | |
| } | |
| .auth-google-btn:hover:not(:disabled) { | |
| background: #f0eef8; | |
| border-color: #00cccc; | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .auth-google-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .auth-google-btn svg { | |
| flex-shrink: 0; | |
| } | |
| [data-theme="dark"] .auth-google-btn { | |
| background: #1e1e2e; | |
| border-color: #2d2d44; | |
| color: #f1f5f9; | |
| } | |
| [data-theme="dark"] .auth-google-btn:hover:not(:disabled) { | |
| background: #262636; | |
| border-color: #3d3d5c; | |
| } | |
| /* =========================================== | |
| GOOGLE OAUTH CALLBACK PAGE | |
| =========================================== */ | |
| .auth-callback-container { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%); | |
| } | |
| .auth-callback-card { | |
| text-align: center; | |
| padding: 60px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 24px; | |
| backdrop-filter: blur(20px); | |
| max-width: 400px; | |
| width: 100%; | |
| } | |
| .auth-callback-card h2 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: #fff; | |
| margin: 20px 0 10px; | |
| } | |
| .auth-callback-card p { | |
| color: rgba(255, 255, 255, 0.7); | |
| margin-bottom: 24px; | |
| } | |
| .auth-callback-spinner { | |
| color: #00cccc; | |
| animation: spin 1s linear infinite; | |
| } | |
| .auth-callback-success { | |
| color: #22c55e; | |
| } | |
| .auth-callback-error { | |
| color: #ef4444; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |