{} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --secondary: #8b5cf6; --accent: #ec4899; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --dark: #1e293b; --dark-light: #334155; --text: #475569; --text-light: #64748b; --border: #e2e8f0; --bg: #f8fafc; --white: #ffffff; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); --gradient-radial: radial-gradient(circle at top right, var(--primary), var(--secondary), var(--accent)); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; min-height: 100vh; position: relative; overflow-x: hidden; } /* Animated background */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-radial); opacity: 0.3; z-index: -2; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 80%, transparent 50%, rgba(139, 92, 246, 0.1) 50%), radial-gradient(circle at 80% 20%, transparent 50%, rgba(236, 72, 153, 0.1) 50%), radial-gradient(circle at 40% 40%, transparent 50%, rgba(99, 102, 241, 0.1) 50%); z-index: -1; animation: floatAnimation 20s ease-in-out infinite; } @keyframes floatAnimation { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, -20px) rotate(1deg); } 66% { transform: translate(20px, -10px) rotate(-1deg); } } .container { max-width: 1000px; margin: 40px auto; background: rgba(255, 255, 255, 0.98); border-radius: 32px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-2xl), 0 0 80px rgba(99, 102, 241, 0.15); overflow: hidden; backdrop-filter: blur(20px); animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideInUp { from { opacity: 0; transform: translateY(60px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .header { background: var(--gradient); color: white; padding: 80px 50px; text-align: center; position: relative; overflow: hidden; } .header::before, .header::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); } .header::before { top: -250px; left: -250px; animation: pulse 4s ease-in-out infinite; } .header::after { bottom: -250px; right: -250px; animation: pulse 4s ease-in-out infinite 2s; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.05; } 50% { transform: scale(1.1); opacity: 0.1; } } .floating-shapes { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 0; } .shape { position: absolute; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); backdrop-filter: blur(5px); border-radius: 50%; animation: float 20s infinite ease-in-out; } .shape:nth-child(1) { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; } .shape:nth-child(2) { width: 60px; height: 60px; top: 60%; right: 10%; animation-delay: 3s; } .shape:nth-child(3) { width: 100px; height: 100px; bottom: 20%; left: 20%; animation-delay: 6s; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); } 25% { transform: translateY(-20px) translateX(10px) rotate(90deg); } 50% { transform: translateY(10px) translateX(-10px) rotate(180deg); } 75% { transform: translateY(-10px) translateX(20px) rotate(270deg); } } .header-content { position: relative; z-index: 1; } .logo-container { display: inline-block; margin-bottom: 30px; animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes bounceIn { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .header h1 { font-size: 3.5em; font-weight: 900; margin-bottom: 15px; letter-spacing: -2px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fadeInScale 0.8s ease-out 0.2s both; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .header .subtitle { font-size: 1.4em; font-weight: 300; opacity: 0.95; margin-bottom: 40px; animation: fadeInUp 0.8s ease-out 0.4s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .company-info { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 25px; display: inline-block; animation: fadeInUp 0.8s ease-out 0.6s both; } .company-info p { margin: 8px 0; font-size: 1.05em; } .company-info a { color: white; text-decoration: none; font-weight: 500; position: relative; padding-bottom: 2px; transition: all 0.3s ease; } .company-info a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: white; transition: width 0.3s ease; } .company-info a:hover::after { width: 100%; } .form-container { padding: 60px 50px; background: linear-gradient(135deg, rgba(248, 250, 252, 0.5), rgba(241, 245, 249, 0.5)); } .form-section { margin-bottom: 50px; opacity: 0; transform: translateY(30px); animation: sectionFadeIn 0.6s ease-out forwards; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 24px; padding: 35px; border: 1px solid rgba(226, 232, 240, 0.5); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .form-section:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .form-section:nth-child(1) { animation-delay: 0.1s; } .form-section:nth-child(2) { animation-delay: 0.2s; } .form-section:nth-child(3) { animation-delay: 0.3s; } .form-section:nth-child(4) { animation-delay: 0.4s; } .form-section:nth-child(5) { animation-delay: 0.5s; } .form-section:nth-child(6) { animation-delay: 0.6s; } @keyframes sectionFadeIn { to { opacity: 1; transform: translateY(0); } } .section-title { font-size: 1.75em; font-weight: 800; color: var(--dark); margin-bottom: 30px; display: flex; align-items: center; position: relative; padding-bottom: 15px; } .section-title::before { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 4px; background: var(--gradient); border-radius: 2px; transition: width 0.3s ease; } .form-section:hover .section-title::before { width: 120px; } .form-group { margin-bottom: 28px; animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--dark); font-size: 0.95em; letter-spacing: 0.3px; transition: color 0.3s ease; } .form-group:focus-within label { color: var(--primary); } .label-hint { font-weight: 400; color: var(--text-light); font-size: 0.85em; margin-left: 5px; opacity: 0.8; } .required { color: var(--accent); font-weight: bold; margin-left: 3px; animation: twinkle 2s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea { width: 100%; padding: 14px 18px; border: 2px solid var(--border); border-radius: 16px; font-size: 1em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); font-family: 'Inter', sans-serif; font-weight: 500; color: var(--dark); } input:hover, select:hover, textarea:hover { border-color: var(--primary-light); background: rgba(255, 255, 255, 0.95); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 6px 24px rgba(99, 102, 241, 0.12); transform: translateY(-2px); } input::placeholder, textarea::placeholder { color: var(--text-light); opacity: 0.6; } textarea { resize: vertical; min-height: 120px; font-family: 'Inter', sans-serif; } /* Enhanced Radio and Checkbox Styles */ .radio-group, .checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; } .radio-item, .checkbox-item { position: relative; display: block; cursor: pointer; user-select: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .radio-item input, .checkbox-item input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radio-label, .checkbox-label { display: flex; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9)); border: 2px solid var(--border); border-radius: 16px; font-weight: 500; color: var(--text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .radio-label::before, .checkbox-label::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); transition: width 0.3s ease; z-index: 0; } .radio-label:hover, .checkbox-label:hover { border-color: var(--primary-light); background: linear-gradient(135deg, var(--white), rgba(248, 250, 252, 1)); transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.2), 0 4px 6px -2px rgba(99, 102, 241, 0.1); } .radio-label:hover::before, .checkbox-label:hover::before { width: 100%; } .radio-item input:checked ~ .radio-label, .checkbox-item input:checked ~ .checkbox-label { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05)); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 4px 6px -1px rgba(99, 102, 241, 0.2); transform: scale(1.02); } .radio-item input:focus ~ .radio-label, .checkbox-item input:focus ~ .checkbox-label { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 6px -1px rgba(99, 102, 241, 0.1); } /* Custom Radio Circle */ .radio-circle { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 50%; margin-right: 14px; position: relative; transition: all 0.3s ease; flex-shrink: 0; background: var(--white); z-index: 1; } .radio-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 10px; height: 10px; border-radius: 50%; background: var(--gradient); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .radio-item input:checked ~ .radio-label .radio-circle { border-color: var(--primary); background: var(--white); } .radio-item input:checked ~ .radio-label .radio-circle::after { transform: translate(-50%, -50%) scale(1); } /* Custom Checkbox */ .checkbox-box { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px; margin-right: 14px; position: relative; transition: all 0.3s ease; flex-shrink: 0; background: var(--white); z-index: 1; } .checkbox-box svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 14px; height: 14px; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .checkbox-item input:checked ~ .checkbox-label .checkbox-box { background: var(--gradient); border-color: var(--primary); } .checkbox-item input:checked ~ .checkbox-label .checkbox-box svg { transform: translate(-50%, -50%) scale(1); } .radio-text, .checkbox-text { position: relative; z-index: 1; } .info-box { background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05)); border-left: 4px solid var(--gradient); border-image: var(--gradient) 1; padding: 20px; margin: 25px 0; border-radius: 12px; position: relative; overflow: hidden; animation: slideInLeft 0.5s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .info-box::before { content: '💡'; position: absolute; top: 20px; right: 20px; font-size: 24px; opacity: 0.5; } .info-box p { color: var(--dark); font-size: 0.95em; line-height: 1.7; position: relative; z-index: 1; } .consent-section { background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9)); backdrop-filter: blur(10px); border: 2px solid var(--border); border-radius: 24px; padding: 35px; margin: 50px 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 8px 16px rgba(0, 0, 0, 0.04); position: relative; overflow: hidden; } .consent-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, transparent 70%); animation: rotate 20s linear infinite; } .consent-section h3 { color: var(--dark); margin-bottom: 25px; font-size: 1.4em; font-weight: 700; display: flex; align-items: center; gap: 10px; } .consent-section h3::before { content: '🔒'; font-size: 1.2em; } .consent-item { position: relative; margin: 18px 0; padding-left: 35px; animation: fadeIn 0.5s ease-out; } .consent-item input[type="checkbox"] { position: absolute; left: 0; top: 3px; width: 22px; height: 22px; cursor: pointer; opacity: 0; } .consent-checkbox { position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: var(--white); border: 2px solid var(--border); border-radius: 6px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none; } .consent-checkbox::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); color: white; font-size: 14px; font-weight: bold; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .consent-item input[type="checkbox"]:checked ~ .consent-checkbox { background: var(--gradient); border-color: var(--primary); transform: scale(1.1); } .consent-item input[type="checkbox"]:checked ~ .consent-checkbox::after { transform: translate(-50%, -50%) scale(1); } .consent-item label { font-weight: 400; color: var(--text); line-height: 1.7; cursor: pointer; transition: color 0.3s ease; display: block; padding: 3px 0; } .consent-item:hover label { color: var(--dark); } .submit-section { text-align: center; margin-top: 60px; padding-top: 50px; border-top: 2px solid transparent; background: linear-gradient(90deg, var(--border) 0%, var(--border) 30%, transparent 30%, transparent 70%, var(--border) 70%, var(--border) 100%); background-size: 20px 2px; background-repeat: repeat-x; background-position: top center; } .submit-info { background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(99, 102, 241, 0.05)); border-radius: 20px; padding: 30px; margin-bottom: 40px; position: relative; overflow: hidden; animation: pulseGlow 3s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.1); } 50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.2); } } .submit-info::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: var(--gradient); border-radius: 20px; opacity: 0.1; z-index: -1; animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.2; } } .submit-info p { color: var(--dark); font-size: 1.05em; margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-info .email-highlight { font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.1em; } .submit-btn { background: var(--gradient); color: white; padding: 18px 70px; font-size: 1.15em; font-weight: 700; border: none; border-radius: 100px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(99, 102, 241, 0.2); position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.6s ease; } .submit-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .submit-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4), 0 4px 8px rgba(99, 102, 241, 0.3); } .submit-btn:hover::before { left: 100%; } .submit-btn:hover::after { width: 300px; height: 300px; } .submit-btn:active { transform: translateY(-1px) scale(1); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(99, 102, 241, 0.2); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .submit-btn span { position: relative; z-index: 1; } .error-message { color: var(--error); font-size: 0.85em; margin-top: 6px; display: none; animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .success-message { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 197, 94, 0.1)); color: #059669; padding: 25px; border-radius: 20px; margin: 30px 0; display: none; text-align: center; border: 2px solid rgba(16, 185, 129, 0.3); font-weight: 600; font-size: 1.1em; animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .loading-spinner { display: none; width: 30px; height: 30px; margin: 0 auto 25px; position: relative; } .loading-spinner::before, .loading-spinner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 3px solid transparent; } .loading-spinner::before { border-top-color: var(--primary); animation: spin 1s linear infinite; } .loading-spinner::after { border-bottom-color: var(--secondary); animation: spin 1s linear infinite reverse; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .footer { background: linear-gradient(135deg, rgba(30, 41, 59, 0.05), rgba(51, 65, 85, 0.05)); padding: 40px; text-align: center; color: var(--text-light); font-size: 0.95em; border-top: 1px solid var(--border); position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 2px; background: var(--gradient); border-radius: 2px; } .footer p { margin: 8px 0; } .footer a { color: var(--primary); text-decoration: none; font-weight: 600; position: relative; transition: all 0.3s ease; } .footer a:hover { color: var(--primary-dark); } /* Responsive Design */ @media (max-width: 768px) { .container { margin: 20px auto; border-radius: 24px; } .header { padding: 60px 30px; } .header h1 { font-size: 2.5em; } .form-container { padding: 40px 25px; } .form-section { padding: 25px 20px; } .form-row { grid-template-columns: 1fr; } .submit-btn { padding: 16px 50px; font-size: 1.05em; } .radio-group, .checkbox-group { grid-template-columns: 1fr; } .section-title { font-size: 1.4em; } } @media (max-width: 480px) { .header h1 { font-size: 2em; letter-spacing: -1px; } .header .subtitle { font-size: 1.1em; } .form-container { padding: 30px 15px; } .form-section { padding: 20px 15px; border-radius: 16px; } .submit-btn { width: 100%; padding: 16px 30px; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--bg); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--secondary)); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--secondary), var(--primary)); } /* Print styles */ @media print { body { background: white; } .container { box-shadow: none; border: 1px solid #ddd; } .submit-section, .footer { display: none; } } /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .container { border: 2px solid var(--dark); } input, select, textarea { border-width: 2px; } } /* Dark mode support (optional) */ @media (prefers-color-scheme: dark) { :root { --bg: #1a1a2e; --white: #0f0f23; } }