:root { --primary-color: #0528F2; --primary-light: rgba(5, 40, 242, 0.1); --secondary-color: #6C63FF; --dark-color: #121212; --darker-color: #0A0A0A; --light-color: #FFFFFF; --gray-color: #888888; --light-gray: #F5F5F7; --card-bg: rgba(30, 30, 30, 0.6); --card-bg-hover: rgba(40, 40, 40, 0.8); --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); --glass-effect: rgba(255, 255, 255, 0.05); --gradient-blue: linear-gradient(45deg, #0528F2, #6C63FF); --transition-fast: all 0.3s ease; --transition-medium: all 0.5s ease; --transition-slow: all 0.8s ease; --form-max-width: 1000px; --form-max-height: 90vh; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */ } body { background-color: var(--darker-color); color: var(--light-color); /* SCROLL FIX: Changed from overflow-x:hidden to overflow-x:clip. overflow-x:hidden on triggers an iOS Safari bug that blocks ALL scrolling (vertical included). clip achieves the same horizontal clipping without that bug. */ overflow-x: clip; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Hide scrollbar but keep functionality */ body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background: var(--darker-color); } body::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } /* Custom Cursor (only on desktop) */ @media (pointer: fine) { .custom-cursor { position: fixed; width: 40px; height: 40px; border: 2px solid var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.2s, height 0.2s, background-color 0.2s; mix-blend-mode: difference; opacity: 0; animation: fadeInCursor 0.5s ease-in-out 0.5s forwards; } .custom-cursor-dot { position: fixed; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; opacity: 0; animation: fadeInCursor 0.5s ease-in-out 0.5s forwards; } @keyframes fadeInCursor { 0% { opacity: 0; } 100% { opacity: 1; } } } /* Hide cursor on touch devices */ @media (pointer: coarse) { .custom-cursor, .custom-cursor-dot { display: none; } } /* Animated Background */ .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; /* SCROLL FIX: Prevents fixed background from intercepting touch events on mobile */ pointer-events: none; } .animated-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( ellipse at center, rgba(5, 40, 242, 0.03) 0%, rgba(108, 99, 255, 0.02) 25%, rgba(10, 10, 10, 0) 70% ); animation: rotate 60s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* SCROLL FIX: Background child elements also need pointer-events:none to prevent touch interception on mobile Safari and Android */ .animated-circles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .circle { position: absolute; border-radius: 50%; background: linear-gradient(180deg, rgba(5, 40, 242, 0.05) 0%, rgba(108, 99, 255, 0.05) 100%); animation: pulse 15s infinite; opacity: 0; } .circle:nth-child(1) { width: 400px; height: 400px; left: 10%; top: 10%; animation-delay: 0s; } .circle:nth-child(2) { width: 300px; height: 300px; right: 20%; top: 30%; animation-delay: 3s; } .circle:nth-child(3) { width: 500px; height: 500px; left: 30%; bottom: 10%; animation-delay: 6s; } .circle:nth-child(4) { width: 250px; height: 250px; right: 10%; bottom: 20%; animation-delay: 9s; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1); opacity: 0.03; } 100% { transform: scale(0.8); opacity: 0; } } /* Particles */ .particle { position: absolute; background-color: rgba(255, 255, 255, 0.07); border-radius: 50%; opacity: var(--opacity, 0.2); animation: float var(--duration, 15s) linear infinite; } /* SCROLL FIX: #particles container also needs pointer-events:none */ #particles { pointer-events: none; } @keyframes float { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-20vh) translateX(20vw); } 50% { transform: translateY(-40vh) translateX(0); } 75% { transform: translateY(-20vh) translateX(-20vw); } 100% { transform: translateY(0) translateX(0); } } /* Main Content Container */ .container { width: 100%; min-height: 100vh; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: center; } /* Logo and Header */ .logo-container { position: fixed; top: 20px; left: 20px; z-index: 100; } .logo-container img { height: 35px; transition: var(--transition-fast); } /* Sign Up Form */ .signup-container { display: flex; width: 100%; max-width: var(--form-max-width); max-height: var(--form-max-height); border-radius: 16px; background: rgba(20, 20, 20, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* For Safari */ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05); transition: var(--transition-medium); overflow: hidden; transform: translateY(30px); opacity: 0; animation: fadeInUp 0.8s ease-out 0.5s forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .signup-left { flex: 1; padding: 30px; border-right: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .signup-right { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; max-height: var(--form-max-height); overflow-y: auto; -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */ } /* Shiny border effect */ .signup-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); animation: animateBorder 4s linear infinite; } @keyframes animateBorder { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .signup-header { margin-bottom: 20px; } .signup-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; background: linear-gradient(90deg, white, #b3b3ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .signup-subtitle { color: var(--gray-color); font-size: 0.9rem; } .signup-benefits { margin-top: 20px; } .benefit-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--light-color); } .benefit-list { list-style: none; } .benefit-item { display: flex; align-items: flex-start; margin-bottom: 12px; opacity: 0; transform: translateX(-20px); animation: fadeInRight 0.5s ease-out forwards; } .benefit-item:nth-child(1) { animation-delay: 0.7s; } .benefit-item:nth-child(2) { animation-delay: 0.9s; } .benefit-item:nth-child(3) { animation-delay: 1.1s; } .benefit-item:nth-child(4) { animation-delay: 1.3s; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .benefit-icon { width: 32px; height: 32px; min-width: 32px; margin-right: 12px; background: var(--gradient-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; box-shadow: 0 5px 15px rgba(5, 40, 242, 0.3); } .benefit-text h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; } .benefit-text p { color: var(--gray-color); font-size: 0.8rem; line-height: 1.4; } .form-group { margin-bottom: 15px; position: relative; } .form-row { display: flex; gap: 15px; } .form-row .form-group { flex: 1; } .input-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95rem; } .input-field { width: 100%; padding: 14px 20px; font-size: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--light-color); transition: var(--transition-medium); -webkit-appearance: none; /* Remove default iOS styling */ appearance: none; } .input-field:focus { outline: none; border-color: var(--primary-color); background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 2px rgba(5, 40, 242, 0.2); } .input-field::placeholder { color: rgba(255, 255, 255, 0.3); } /* Date Input */ input[type="date"] { color-scheme: dark; } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0; position: absolute; right: 0; top: 0; width: 40px; z-index: 10; } /* Hide clear button in IE */ input[type="date"]::-ms-clear { display: none; } .date-icon { position: absolute; right: 15px; top: 47px; color: var(--gray-color); pointer-events: none; font-size: 0.9rem; z-index: 5; } /* Terms and conditions checkbox */ .terms-group { display: flex; align-items: flex-start; margin: 20px 0; } .terms-checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; min-width: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; margin-right: 10px; position: relative; cursor: pointer; transition: var(--transition-fast); } .terms-checkbox:checked { background: var(--primary-color); border-color: var(--primary-color); } .terms-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; } .terms-text { font-size: 0.9rem; color: var(--gray-color); } .terms-text a { color: var(--primary-color); text-decoration: none; transition: var(--transition-fast); } .terms-text a:hover { text-decoration: underline; } /* Submit Button */ .btn { width: 100%; padding: 14px 20px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: var(--transition-fast); border: none; outline: none; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; /* Remove tap highlight */ touch-action: manipulation; /* Improve touch behavior */ } .btn-primary { background: var(--gradient-blue); color: white; box-shadow: 0 4px 15px rgba(5, 40, 242, 0.3); } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.6s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(5, 40, 242, 0.4); } .btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 10px rgba(5, 40, 242, 0.3); } .btn-primary:hover::before { left: 100%; } .or-divider { display: flex; align-items: center; margin: 15px 0; color: var(--gray-color); font-size: 0.8rem; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); } .or-divider::before { margin-right: 15px; } .or-divider::after { margin-left: 15px; } .social-signup { display: flex; gap: 12px; margin-bottom: 15px; } .social-btn { flex: 1; padding: 12px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--light-color); transition: var(--transition-fast); cursor: pointer; } .social-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .social-btn:active { transform: translateY(1px); } .login-link { text-align: center; margin-top: 20px; color: var(--gray-color); font-size: 0.9rem; } .login-link a { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: var(--transition-fast); } .login-link a:hover { text-decoration: underline; } /* Animation for button click */ .btn-click-effect { animation: buttonClick 0.3s forwards; } @keyframes buttonClick { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } } /* Visual validation feedback */ /*.input-field.valid { border-color: #16c79a; }*/ .input-field.invalid { border-color: #f05454; } .selected-region.valid { border-color: #16c79a; } .selected-region.invalid { border-color: #f05454; } /* Region dropdown styles */ .region-dropdown { position: relative; } .selected-region { position: relative; width: 100%; padding: 14px 20px; font-size: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--light-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-medium); } .selected-region:hover, .selected-region.active { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.07); } .region-options { position: absolute; width: 100%; max-height: 250px; overflow-y: auto; top: calc(100% + 5px); left: 0; background: rgba(30, 30, 30, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 100; display: none; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; } .region-options.show { display: block; opacity: 1; transform: translateY(0); } .region-group { margin-bottom: 5px; } .region-group-title { font-size: 0.8rem; font-weight: 600; color: var(--gray-color); padding: 10px 15px 5px; text-transform: uppercase; letter-spacing: 1px; } .region-option { padding: 12px 15px; cursor: pointer; transition: var(--transition-fast); } .region-option:hover { background: rgba(255, 255, 255, 0.1); color: var(--primary-color); } .region-options::-webkit-scrollbar { width: 5px; } .region-options::-webkit-scrollbar-track { background: transparent; } .region-options::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } /* Responsive styles */ @media (max-width: 1100px) { .signup-container { flex-direction: column; max-width: 600px; max-height: none; overflow-y: auto; } .signup-left { padding: 30px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .signup-right { padding: 30px; max-height: none; overflow-y: visible; } .benefit-item { margin-bottom: 15px; } .container { padding: 30px 15px; height: auto; } } @media (max-width: 768px) { .container { padding: 15px; align-items: flex-start; padding-top: 70px; /* Space for the logo */ } .logo-container { top: 15px; left: 0; width: 100%; display: flex; justify-content: center; padding: 0 15px; } .signup-container { margin-bottom: 30px; border-radius: 12px; /* SCROLL FIX: Remove 90vh max-height cap. When columns stack vertically on mobile, content easily exceeds 90vh. With max-height + overflow:hidden the form gets clipped with no way to scroll to the submit button. */ max-height: none; overflow: visible; } /* SCROLL FIX: Also remove max-height restriction on signup-right panel */ .signup-right { max-height: none; overflow-y: visible; } .signup-left, .signup-right { padding: 25px 20px; } .signup-title { font-size: 1.6rem; } .form-row { flex-direction: column; gap: 15px; } .benefit-item { margin-bottom: 15px; } .benefit-icon { width: 32px; height: 32px; min-width: 32px; font-size: 14px; } .benefit-text h4 { font-size: 0.95rem; } .social-signup { flex-direction: column; gap: 10px; } .input-field, .btn, .selected-region, .social-btn { padding: 12px 15px; /* Slightly larger touch targets */ font-size: 16px; /* Better readability on mobile */ } .input-label { font-size: 0.9rem; } .terms-text { font-size: 0.85rem; } /* Avoid super small elements on mobile */ .terms-checkbox { width: 22px; height: 22px; min-width: 22px; } } @media (max-width: 480px) { .signup-left, .signup-right { padding: 20px 15px; } .signup-title { font-size: 1.5rem; } .benefit-title { font-size: 1rem; } } /* iOS specific fixes */ @supports (-webkit-touch-callout: none) { /* Fix for iOS momentary white background during transitions */ .signup-container { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* Ensure proper text rendering in iOS */ .signup-title, .benefit-title, .input-label, .terms-text, .login-link { -webkit-font-smoothing: antialiased; } /* Fix for iOS date inputs */ input[type="date"] { min-height: 48px; } } /* Android specific fixes */ @supports (-webkit-appearance:none) and (not (-webkit-touch-callout:none)) { /* Ensure proper input rendering on Android */ .input-field { min-height: 48px; } }