/* ===== PRODUCTION OPTIMIZED PUBLIC.CSS ===== */ /* Consolidated styles for non-authenticated pages */ /* Removed CDN dependencies - Use local assets */ /* ===== Custom Fonts: Barlow ===== */ @font-face { font-family: 'Barlow'; src: url("../fonts/landing/barlow-400.9ece4fa893b6.ttf") format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url("../fonts/landing/barlow-600.2ba5eb1be9f5.ttf") format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url("../fonts/landing/barlow-condensed-700.e49e5407f837.ttf") format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url("../fonts/landing/barlow-condensed-800.a78abd6ac73a.ttf") format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } /* ===== CSS Custom Properties ===== */ :root { /* Typography */ --font-sans: 'Barlow', 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Barlow Condensed', 'Poppins', 'Inter', system-ui, sans-serif; /* Colors - synced with Tailwind config */ --brand-indigo: #4338ca; --brand-gold: #d4af37; --soft-dark: #0f102f; --accent-blue: #3b82f6; --accent-emerald: #10b981; --accent-rose: #f43f5e; /* Add this line - Rose 500 */ --accent-pink: #ec4899; /* Add this line - Pink 500 */ } /* ===== Base Styles ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); color: #334155; min-height: 100vh; } /* ===== Custom Scrollbar ===== */ @media (min-width: 768px) { .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } /* Firefox */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; } } /* ===== Modern Gradient Backgrounds ===== */ /* Add rose-pink gradients for warning/danger */ .rose-pink-gradient { background: linear-gradient(135deg, var(--accent-rose) 0%, var(--accent-pink) 100%); } /* Rose glass morphism for warning cards */ .rose-glass { background: rgba(244, 63, 94, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(244, 63, 94, 0.3); } .gradient-bg { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); } /* The compiled tailwind.css .font-sans utility is Inter — it never picked up Barlow, the body face the landing page actually uses (.sg-landing sets it directly, scoped to landing's own markup only). Every other public page has "font-sans" on via body_class, including the shared footer, so without this override the footer (and every other page's body copy) reads in a different typeface than landing's paragraphs and labels. Scoped to public.css only, so the authenticated app (app.css) is untouched. */ .font-sans { font-family: var(--font-sans); } /* The compiled tailwind.css .font-display utility is stale (missing Barlow Condensed), so it silently falls back to Poppins, which isn't loaded anywhere — headlines rendered in the browser default instead of the condensed face the landing page actually uses. Override with the correct stack until tailwind.css is rebuilt from tailwind.config.js. Also match the landing page's actual headline treatment (.sg-display / .sg-section-title in landing_team.css): condensed weight reads right only uppercase and tight, so login/register headlines were a visibly different, smaller-looking style even once the typeface itself matched. */ .font-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.025em; } .hero-gradient { /* The sticky header (bg-softDark, #0f102f) sits directly on top of this hero with no border between them, so the hero needs the exact same navy — the cobalt used here previously left a visible seam under the nav. */ background: var(--soft-dark); position: relative; overflow: hidden; /* Full-width gold bar at the hero's own bottom edge, same idea as .sg-role-rail::after on the landing page. The white card overlaps this section from below (by design — see the "Performance Threshold" note in login.html), so the bar shows along the exposed sides and passes behind the card, rather than crossing over its content. */ border-bottom: 3px solid var(--brand-gold); } .hero-gradient::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( circle at 20% 50%, rgba(67, 56, 202, 0.15) 0%, transparent 50% ); pointer-events: none; z-index: 0; } .hero-gradient > * { position: relative; z-index: 1; } /* Same soft ring as the /resources/ header (.sg-cover::before in public_editorial.css) — a blurred halo via a wide, low-alpha box-shadow, not the crisp bordered .target-ring divs. Using ::after (::before above is already the radial wash) means no extra markup and nothing that depends on a percentage transform, which is what made .target-ring fragile. */ .hero-gradient::after { content: ''; position: absolute; top: 2rem; right: -8rem; width: 26rem; height: 26rem; border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 50%; box-shadow: 0 0 0 4.5rem rgba(212, 175, 55, 0.035), 0 0 0 9rem rgba(212, 175, 55, 0.02); pointer-events: none; z-index: 0; } @media (max-width: 720px) { .hero-gradient::after { top: 2rem; right: -9rem; width: 20rem; height: 20rem; box-shadow: 0 0 0 3rem rgba(212, 175, 55, 0.03); } } .accent-gradient { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); } .gold-gradient { background: linear-gradient(135deg, #d4af37 0%, #fbbf24 100%); } /* ===== Glass Morphism Effect ===== */ .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } /* ===== Focus Styles ===== */ .modern-focus:focus { outline: none; box-shadow: 0 0 0 2px #d4af37, 0 0 0 3px rgba(212, 175, 55, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Mobile-friendly focus */ @media (hover: hover) and (pointer: fine) { :focus-visible { outline: 3px solid #d4af37; outline-offset: 2px; border-radius: 0.25rem; } } /* ===== Card Hover Effects ===== */ .hover-lift { transition: all 0.3s ease; will-change: transform, box-shadow; backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } } .feature-card { transition: all 0.3s ease; will-change: transform, box-shadow; backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } } /* ===== Step Indicator ===== */ .step-indicator { position: relative; } .step-indicator::after { content: ''; position: absolute; top: 50%; left: 100%; width: 60px; height: 2px; background: linear-gradient(90deg, #4338ca, #cbd5e1); transform: translateY(-50%); } .step-indicator:last-child::after { display: none; } /* ===== Shooting Target Decoration ===== */ .target-ring { border: 2px solid rgba(212, 175, 55, 0.35); border-radius: 50%; position: absolute; pointer-events: none; z-index: 0; will-change: transform; backface-visibility: hidden; /* Same cobalt halo as the #features ring (.sg-performance::before in landing_team.css), so hero bands read consistently with the landing page. Kept tight: these hero rings are 3 concentric circles, not the single large one #features uses, so a wide spread bled past the ring cluster and read as a second, separate ring on the far side of the section. */ box-shadow: 0 0 0 1.5rem rgba(67, 56, 202, 0.1); } /* The lg:block utility on these rings hid them below 1024px entirely, while the mobile query further down still expects them present (just dimmer) — so on the phone/tablet range they never rendered at all. Show them at every width and let that existing opacity rule handle the small screens. */ .target-ring.hidden { display: block; } /* Templates additionally set opacity-20 (Tailwind, 0.2) on these divs, which on top of the low border/shadow alpha above made them read as invisible — the #features ring they're meant to match has no such multiplier. Raise it back up so the ring and its halo are actually visible against the hero. */ .target-ring.opacity-20 { opacity: 0.7; } .shot-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d4af37; opacity: 0.8; pointer-events: none; z-index: 0; will-change: transform; backface-visibility: hidden; } /* ===== OTP Input Styles ===== */ .otp-input { width: 2.75rem; height: 2.75rem; text-align: center; font-size: 1.25rem; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 0.5rem; background: white; transition: all 0.2s ease; } @media (min-width: 640px) { .otp-input { width: 3rem; height: 3rem; font-size: 1.375rem; border-radius: 0.625rem; } } @media (min-width: 768px) { .otp-input { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; border-radius: 0.75rem; } } @media (max-width: 360px) { .otp-input { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; } } .otp-input:focus { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1); outline: none; transform: scale(1.05); } .otp-input.filled { border-color: #10b981; background-color: rgba(16, 185, 129, 0.05); } .otp-input.error { border-color: #ef4444; background-color: rgba(239, 68, 68, 0.05); animation: shake 0.5s ease-in-out; } /* ===== Password Strength ===== */ .password-requirement { transition: color 0.3s ease; } .password-requirement.met { color: #10b981; } /* ===== GDPR Notice ===== */ .gdpr-notice { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; } /* ===== Accessibility ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only:focus, .sr-only:active { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } /* ===== Animation Keyframes ===== */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes slideIn { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes successPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes checkmark { 0% { stroke-dashoffset: 100; opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } 100% { stroke-dashoffset: 0; opacity: 1; transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes pulse-gold { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse-slow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Animation Utility Classes ===== */ .animate-float-slow { animation: float 6s ease-in-out infinite; will-change: transform; backface-visibility: hidden; } .animate-pulse-subtle { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-in { animation: slideIn 0.5s ease-out; } .animate-fade-in { animation: fadeIn 0.5s ease-out; opacity: 1; } .animate-success-pulse { animation: successPulse 2s ease-in-out infinite; } .animate-pulse-gold { animation: pulse-gold 2s ease-in-out infinite; will-change: transform, opacity; backface-visibility: hidden; } .animate-spin-slow { animation: spin-slow 20s linear infinite; will-change: transform; } .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; will-change: opacity; } .success-check { animation: checkmark 0.5s ease-in-out forwards; } .timer-pulse { animation: timerPulse 1s ease-in-out infinite; } /* Floating animation delays */ .animation-delay-1 { animation-delay: 0.5s; } .animation-delay-2 { animation-delay: 1s; } .delay-1 { animation-delay: 1s; } .delay-2 { animation-delay: 2s; } /* ===== Spinner ===== */ .spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin-slow 0.75s linear infinite; will-change: transform; } .spinner-lg { width: 2rem; height: 2rem; border-width: 3px; } /* ===== Mobile Menu ===== */ .mobile-menu { display: none; position: absolute; top: 100%; right: 1rem; background: white; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); z-index: 50; width: calc(100vw - 2rem); max-width: 300px; overflow: hidden; } .mobile-menu.active { display: block; animation: fadeIn 0.2s ease-out; } .mobile-menu a { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; } .mobile-menu a:last-child { border-bottom: none; } /* Hide mobile bottom nav on desktop */ @media (min-width: 768px) { .mobile-bottom-nav { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ===== Visual Effects ===== */ .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 0.25rem; } /* Dark mode skeleton */ @media (prefers-color-scheme: dark) { .skeleton { background: linear-gradient( 90deg, #2d3748 25%, #4a5568 50%, #2d3748 75% ); } } .workflow-step { transition: all 0.3s ease; will-change: transform, box-shadow; backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .workflow-step:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } } /* ===== Custom Utilities ===== */ .gradient-text { background: linear-gradient(135deg, #4338ca, #d4af37); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-stroke { -webkit-text-stroke: 1px currentColor; text-stroke: 1px currentColor; color: transparent; } .gradient-border { border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4338ca, #d4af37) border-box; } /* ===== Login Page Local Utilities ===== */ @keyframes login-fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes login-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } @keyframes login-loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } .login-page .fade-in { animation: login-fade-in 0.3s ease-out forwards; } .login-page .animate-shake { animation: login-shake 0.5s ease-in-out; } .login-page .animate-loading { animation: login-loading 1.5s ease-in-out infinite; } .login-page input, .login-page button, .login-page a, .login-page label { transition: all 0.2s ease; } .login-page input:focus, .login-page button:focus, .login-page select:focus { outline: none; } .login-page #togglePassword { background: none; border: none; cursor: pointer; outline: none; } .login-page ::-webkit-scrollbar { width: 8px; } .login-page ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .login-page ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .login-page ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .login-page ::selection { background-color: rgba(79, 70, 229, 0.3); color: #1e293b; } .oauth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; } .btn-google { display: inline-flex; width: 100%; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font-weight: 600; font-size: 0.875rem; cursor: pointer; text-decoration: none; transition: all 0.2s; } .btn-google:hover { border-color: #4f46e5; background: #f8fafc; } .btn-google img { width: 1.125rem; height: 1.125rem; } /* ===== Register Page Local Utilities ===== */ .register-page * { margin: 0; padding: 0; box-sizing: border-box; } .register-page { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; background: radial-gradient(90% 60% at 50% -10%, #3b2280 0%, transparent 60%), linear-gradient(170deg, #131442 0%, #0f102f 55%, #0a0a1f 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; } /* Header-overlap layout (signup flow) — dark header band with the card pulled up over it */ .register-page.hero, .verify-otp-page.hero, .login-page.hero, .onboarding-page.hero { display: block; min-height: 0; background: #f1f5f9; padding: 0; } .register-page.hero .signup-header, .verify-otp-page.hero .signup-header, .login-page.hero .signup-header, .onboarding-page.hero .signup-header { background: radial-gradient(90% 120% at 50% -30%, #2a1f6b 0%, transparent 55%), #0f102f; color: #fff; text-align: center; padding: 2.25rem 1.25rem 5.5rem; position: relative; overflow: hidden; } .register-page.hero .signup-header h1, .verify-otp-page.hero .signup-header h1, .login-page.hero .signup-header h1, .onboarding-page.hero .signup-header h1 { position: relative; z-index: 2; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #fff; } .register-page.hero .signup-header p, .verify-otp-page.hero .signup-header p, .login-page.hero .signup-header p, .onboarding-page.hero .signup-header p { position: relative; z-index: 2; color: #cbd5e1; font-size: 0.95rem; margin-top: 0.5rem; } /* Hero decoration: bullseye target rings with shots that impact, flash, and fade */ .signup-header .hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .signup-header .hero-target { position: absolute; top: -60px; right: -70px; width: 280px; height: 280px; } .signup-header .hero-target.hero-target-sm { top: auto; right: auto; bottom: -50px; left: -50px; width: 160px; height: 160px; } .signup-header .hero-band { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(212, 175, 55, 0.16); animation: hero-breathe 5s ease-in-out infinite; } .signup-header .hero-band.b2 { inset: 42px; animation-delay: 0.3s; } .signup-header .hero-band.b3 { inset: 84px; animation-delay: 0.6s; } .signup-header .hero-band.b4 { inset: 126px; animation-delay: 0.9s; border-color: rgba(212, 175, 55, 0.24); } .signup-header .hero-target-sm .hero-band.b2 { inset: 24px; } .signup-header .hero-target-sm .hero-band.b3 { inset: 48px; } .signup-header .hero-target-sm .hero-band.b4 { inset: 72px; } @keyframes hero-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .signup-header .hero-shot, .signup-header .hero-ripple { position: absolute; width: 8px; height: 8px; border-radius: 50%; opacity: 0; } .signup-header .hero-shot { background: #d4af37; animation: hero-shot-hit 4s ease-in-out infinite; } .signup-header .hero-ripple { border: 1.5px solid #d4af37; animation: hero-shot-ripple 4s ease-in-out infinite; } @keyframes hero-shot-hit { 0% { opacity: 0; transform: scale(0.3); } 3% { opacity: 1; transform: scale(1.8); } 10% { opacity: 1; transform: scale(1); } 62% { opacity: 1; transform: scale(1); } 78% { opacity: 0; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } } @keyframes hero-shot-ripple { 0% { opacity: 0; transform: scale(0.6); } 3% { opacity: 0.9; transform: scale(0.6); } 28% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } } /* Shots are children of .hero-target now, positioned as % of that ring cluster so they stay locked to their rings (and shrink together on mobile) instead of drifting toward the centered headline. Most land in the 10-ring (bullseye); one per cluster lands wider. */ .signup-header .hero-shot.s1, .signup-header .hero-ripple.r1 { top: 46%; left: 52%; } .signup-header .hero-shot.s2, .signup-header .hero-ripple.r2 { top: 53%; left: 45%; animation-delay: 1s; } .signup-header .hero-shot.s3, .signup-header .hero-ripple.r3 { top: 30%; left: 66%; animation-delay: 2s; } .signup-header .hero-shot.s4, .signup-header .hero-ripple.r4 { top: 48%; left: 50%; animation-delay: 3s; } .signup-header .hero-shot.s5, .signup-header .hero-ripple.r5 { top: 65%; left: 34%; animation-delay: 1.6s; } @media (max-width: 480px) { .signup-header .hero-target { transform: scale(0.75); transform-origin: top right; } .signup-header .hero-target.hero-target-sm { transform: scale(0.75); transform-origin: bottom left; } } @media (prefers-reduced-motion: reduce) { .signup-header .hero-band, .signup-header .hero-shot, .signup-header .hero-ripple { animation: none; } .signup-header .hero-shot { opacity: 0.6; } .signup-header .hero-ripple { opacity: 0; } } .register-page.hero .signup-overlap, .verify-otp-page.hero .signup-overlap, .login-page.hero .signup-overlap, .onboarding-page.hero .signup-overlap { position: relative; z-index: 2; max-width: 27rem; margin: -4rem auto 0; padding: 0 1rem 2.5rem; } @media (min-width: 768px) { .register-page.hero .signup-header, .verify-otp-page.hero .signup-header, .login-page.hero .signup-header, .onboarding-page.hero .signup-header { padding: 3rem 1.25rem 7rem; } .register-page.hero .signup-header h1, .verify-otp-page.hero .signup-header h1, .login-page.hero .signup-header h1, .onboarding-page.hero .signup-header h1 { font-size: 2.1rem; } .register-page.hero .signup-overlap, .verify-otp-page.hero .signup-overlap, .login-page.hero .signup-overlap, .onboarding-page.hero .signup-overlap { margin-top: -5.5rem; } } .register-page .signup-headline { font-size: 2rem; font-weight: 700; color: #0f172a; line-height: 1.2; margin-bottom: 0.5rem; } .register-page .signup-subtext { font-size: 0.9375rem; color: #64748b; line-height: 1.5; margin-bottom: 1.5rem; } .register-page .oauth-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.625rem; background: white; border: 1.5px solid #0f172a; border-radius: 0.625rem; padding: 0.875rem 1rem; font-size: 0.9375rem; font-weight: 600; color: #0f172a; cursor: pointer; transition: background 0.15s ease; } .register-page .oauth-btn:hover { background: #f8fafc; } .register-page .oauth-btn img { width: 20px; height: 20px; } .register-page .divider-text { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; color: #94a3b8; font-size: 0.8125rem; } .register-page .divider-text::before, .register-page .divider-text::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } .register-page .btn-block { width: 100%; margin-top: 0.5rem; } .register-page .signup-fineprint { font-size: 0.8125rem; color: #94a3b8; line-height: 1.5; margin-top: 1.25rem; } .register-page .signup-fineprint a { color: #4f46e5; text-decoration: underline; } .register-page .container { max-width: 26rem; width: 100%; } .register-page .card { background: white; border-radius: 1.25rem; border: 1px solid #e8ecf2; box-shadow: 0 6px 18px -10px rgba(15, 16, 47, 0.18); padding: 2rem; overflow: hidden; } .register-page h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 0.5rem; } @media (min-width: 768px) { .register-page h2 { font-size: 1.875rem; } } .register-page .subtitle { color: #475569; text-align: center; margin-bottom: 1.5rem; } .register-page .subtitle span { font-weight: 600; color: #4f46e5; } .register-page .role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; } .register-page .role-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; } .register-page .role-card:hover { border-color: #4f46e5; } .register-page .role-card.selected { border-color: #4f46e5; background: #eef2ff; } .register-page .role-card input[type="radio"] { width: 1rem; height: 1rem; accent-color: #4f46e5; } .register-page .role-label { font-size: 0.875rem; font-weight: 500; color: #1f2937; } .register-page .role-cards .role-card { position: relative; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1.1rem 0.5rem; text-align: center; } .register-page .role-list { display: flex; flex-direction: column; gap: 0.5rem; } .register-page .role-cards .role-card input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .register-page .role-card-icon { display: inline-flex; width: 1.75rem; height: 1.75rem; color: #9ca3af; } .register-page .role-card-icon svg { width: 100%; height: 100%; } .register-page .role-card.selected .role-card-icon { color: #4f46e5; } .register-page .other-toggle { display: inline-flex; align-items: center; gap: 0.25rem; width: 100%; text-align: left; background: none; border: none; padding: 0.25rem 0; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: #4f46e5; cursor: pointer; } .register-page .other-toggle svg { width: 0.875rem; height: 0.875rem; transition: transform 0.2s; } .register-page .other-toggle.open svg { transform: rotate(180deg); } .register-page .other-toggle:hover { text-decoration: underline; } .register-page .other-panel { margin-bottom: 1rem; } .register-page .role-badge { text-align: center; font-size: 0.875rem; color: #6b7280; margin-bottom: 2rem; } .register-page .role-badge span { font-weight: 600; color: #4f46e5; } .register-page .form { max-width: 32rem; margin: 0 auto; } /* Confirmed email at the top of the signup card: quiet, not a form field. */ .register-page .verified-email { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.625rem 0.75rem; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #f9fafb; font-size: 0.875rem; } .register-page .verified-email-tick { color: #10b981; font-weight: 700; } .register-page .verified-email-address { font-weight: 600; color: #111827; overflow-wrap: anywhere; } .register-page .verified-email-change { margin-left: auto; color: #4f46e5; font-weight: 600; text-decoration: none; white-space: nowrap; } .register-page .verified-email-change:hover { text-decoration: underline; } .register-page .form-group { margin-bottom: 1.5rem; } .register-page label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; } .register-page .required { color: #ef4444; } .register-page .input-field { width: 100%; padding: 0.875rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s; } .register-page .input-field:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .register-page .input-field.error { border-color: #ef4444; } .register-page .input-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; } .register-page .input-error { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; display: none; } .register-page .input-error.visible { display: block; } .register-page .form-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; color: #991b1b; font-size: 0.875rem; } .register-page .form-errors ul { margin-left: 1rem; } .register-page .password-wrapper { position: relative; } .register-page .password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0.25rem; } .register-page .password-toggle:hover { color: #4f46e5; } .register-page .strength-meter { display: flex; gap: 0.25rem; height: 0.25rem; margin-top: 0.5rem; } .register-page .strength-bar { flex: 1; height: 100%; border-radius: 9999px; background: #e5e7eb; transition: all 0.3s; } .register-page .strength-bar.strength-1 { background: #ef4444; } .register-page .strength-bar.strength-2 { background: #f97316; } .register-page .strength-bar.strength-3 { background: #eab308; } .register-page .strength-bar.strength-4 { background: #10b981; } .register-page .requirements { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; font-size: 0.75rem; } .register-page .requirement { color: #6b7280; display: flex; align-items: center; gap: 0.25rem; } .register-page .requirement.met { color: #10b981; } .register-page .checkbox-group { border-top: 1px solid #e5e7eb; padding-top: 1rem; margin-top: 1rem; } .register-page .checkbox-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; cursor: pointer; } .register-page .checkbox-item input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0.125rem; accent-color: #4f46e5; } .register-page .checkbox-label { font-size: 0.875rem; color: #374151; } .register-page .checkbox-label a { color: #4f46e5; text-decoration: none; } .register-page .checkbox-label a:hover { text-decoration: underline; } .register-page .button-group { display: flex; justify-content: space-between; margin-top: 2rem; } .register-page .btn { padding: 0.875rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.3s; border: none; } .register-page .btn-primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; } .register-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4); } .register-page .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .register-page .btn-secondary:hover { background: #f9fafb; } .register-page .login-link { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: #6b7280; } .register-page .login-link a { color: #4f46e5; font-weight: 500; text-decoration: none; } .register-page .login-link a:hover { text-decoration: underline; } @media (max-width: 640px) { .register-page .card { padding: 1rem; } .register-page .button-group { flex-direction: column-reverse; gap: 0.75rem; } .register-page .btn { width: 100%; } } /* ===== Verify OTP Page Local Utilities ===== */ .verify-otp-page * { margin: 0; padding: 0; box-sizing: border-box; } .verify-otp-page { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; background: radial-gradient(90% 60% at 50% -10%, #3b2280 0%, transparent 60%), linear-gradient(170deg, #131442 0%, #0f102f 55%, #0a0a1f 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem 3rem; } .verify-otp-page .container { max-width: 26rem; width: 100%; } .verify-otp-page .card { background: white; border-radius: 1.25rem; border: 1px solid #e8ecf2; box-shadow: 0 6px 18px -10px rgba(15, 16, 47, 0.18); padding: 2rem; overflow: hidden; } .verify-otp-page h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 0.5rem; } @media (min-width: 768px) { .verify-otp-page h2 { font-size: 1.875rem; } } .verify-otp-page .email-display { text-align: center; color: #475569; margin-bottom: 2rem; } .verify-otp-page .email-display strong { color: #4f46e5; font-weight: 600; } .verify-otp-page .otp-container { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .verify-otp-page .otp-digit { width: 3rem; height: 3rem; text-align: center; font-size: 1.25rem; font-weight: 700; border: 2px solid #d1d5db; border-radius: 0.5rem; transition: all 0.2s; } .verify-otp-page .otp-digit:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .verify-otp-page .otp-digit.filled { border-color: #4f46e5; background: #eef2ff; } @media (min-width: 640px) { .verify-otp-page .otp-digit { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; } } .verify-otp-page .timer { text-align: center; margin-bottom: 1rem; } .verify-otp-page .timer-text { font-size: 0.875rem; color: #4b5563; } .verify-otp-page .timer-value { font-weight: 700; color: #4f46e5; } .verify-otp-page .timer-value.expiring { animation: verify-otp-pulse 1s infinite; color: #ef4444; } @keyframes verify-otp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .verify-otp-page .resend { text-align: center; margin-bottom: 1.5rem; } .verify-otp-page .resend-btn { background: none; border: none; color: #4f46e5; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .verify-otp-page .resend-btn:hover:not(:disabled) { text-decoration: underline; } .verify-otp-page .resend-btn:disabled { opacity: 0.5; cursor: not-allowed; } .verify-otp-page .resend-count { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; } .verify-otp-page .btn { width: 100%; padding: 0.875rem 1.5rem; background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; border: none; border-radius: 0.75rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; margin-bottom: 1rem; } .verify-otp-page .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4); } .verify-otp-page .btn:disabled { opacity: 0.5; cursor: not-allowed; } .verify-otp-page .help-text { text-align: center; font-size: 0.75rem; color: #6b7280; } .verify-otp-page .help-text button { background: none; border: none; color: #4f46e5; font-size: 0.75rem; cursor: pointer; } .verify-otp-page .help-text button:hover { text-decoration: underline; } .verify-otp-page .error-message { background: #fef2f2; border: 1px solid #fee2e2; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; color: #991b1b; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; } .verify-otp-page .error-message svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* ===== Register Success Page Local Utilities ===== */ .register-success-page * { margin: 0; padding: 0; box-sizing: border-box; } .register-success-page { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .register-success-page .container { max-width: 28rem; width: 100%; } .register-success-page .card { background: white; border-radius: 1.5rem; border: 1px solid #e2e8f0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02); padding: 2rem; text-align: center; } .register-success-page .success-icon { width: 5rem; height: 5rem; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; animation: register-success-bounce 1s ease-in-out; } .register-success-page .success-icon svg { width: 2.5rem; height: 2.5rem; color: #10b981; } @keyframes register-success-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .register-success-page h1 { font-size: 1.875rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; } @media (min-width: 640px) { .register-success-page h1 { font-size: 2.25rem; } } .register-success-page .message { color: #475569; margin-bottom: 2rem; } .register-success-page .next-steps { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 2rem; text-align: left; } .register-success-page .next-steps h3 { font-weight: 600; color: #1f2937; margin-bottom: 1rem; text-align: center; } .register-success-page .steps-list { list-style: none; } .register-success-page .step-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } .register-success-page .step-number { width: 1.5rem; height: 1.5rem; background: #4f46e5; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .register-success-page .step-text { color: #374151; font-size: 0.9375rem; } .register-success-page .btn { display: inline-block; padding: 0.875rem 2rem; background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; text-decoration: none; border-radius: 0.75rem; font-weight: 600; font-size: 1rem; transition: all 0.3s; border: none; cursor: pointer; } .register-success-page .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4); } .register-success-page .confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; } .register-success-page .confetti-piece { position: absolute; width: 10px; height: 10px; background: #4f46e5; opacity: 0.6; animation: register-success-fall 3s linear infinite; } @keyframes register-success-fall { 0% { transform: translateY(-100%) rotate(0deg); } 100% { transform: translateY(100vh) rotate(720deg); } } @media (max-width: 640px) { .register-success-page .card { padding: 1.5rem; } .register-success-page .next-steps { padding: 1.25rem; } } .athlete-mask { mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); } .clip-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .clip-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* ===== Selection Color ===== */ ::selection { background-color: rgba(212, 175, 55, 0.3); color: #000; } ::-moz-selection { background-color: rgba(212, 175, 55, 0.3); color: #000; } /* ===== Performance Optimizations ===== */ .content-visibility-auto { content-visibility: auto; contain-intrinsic-size: 1px 5000px; } .will-change-transform { will-change: transform; } /* ===== Page Transition Keyframes ===== */ @keyframes page-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ===== Page Transition Utility Classes ===== */ .page-transition-fade-out { animation: page-fade-out 0.5s ease-out forwards; } .page-transition-fade-in { animation: page-fade-in 0.5s ease-out forwards; opacity: 1; } /* ===== Reduce motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High DPI optimizations */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* .target-ring excluded: it's vertically centered with -translate-y-1/2 (translateY(-50%)), and `transform` isn't additive — translateZ(0) here was replacing that centering shift outright, which only high-DPI (i.e. most phone) screens ever hit, making the three rings lose their shared center. backface-visibility alone still gets it the GPU-layer hint. */ .target-ring { backface-visibility: hidden; } .shot-dot { transform: translateZ(0); backface-visibility: hidden; } } /* ===== Responsive Adjustments ===== */ @media (max-width: 768px) { /* Improve mobile touch targets */ button, a, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; min-width: 44px; } /* Keep shared header navigation sizing consistent with app pages. */ header.sticky.top-0.z-50 a, header.sticky.top-0.z-50 button, header.sticky.top-0.z-50 select, header.bg-softDark.text-white a, header.bg-softDark.text-white button, header.bg-softDark.text-white select { min-height: 0; min-width: 0; -webkit-tap-highlight-color: transparent; } /* Remove mobile default blue focus box on nav controls. */ header.sticky.top-0.z-50 a:focus, header.sticky.top-0.z-50 button:focus, header.sticky.top-0.z-50 select:focus { outline: none; box-shadow: none; } /* Mouse/keyboard only — touch taps set :focus-visible on mobile browsers, which left a gold box around nav links after tapping. */ @media (pointer: fine) { header.sticky.top-0.z-50 a:focus-visible, header.sticky.top-0.z-50 button:focus-visible, header.sticky.top-0.z-50 select:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; } } /* Reduce target rings on mobile */ .target-ring { opacity: 0.1; } /* Hide shot dots on mobile */ .shot-dot { display: none; } } /* Responsive gap for OTP */ @media (max-width: 360px) { .flex.justify-center.gap-3 { gap: 0.375rem; } } /* ===== Page Transition Blend ===== */ #pageTransition { inset: 0; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1000; } #pageTransition .spinner-lg { width: 3rem; height: 3rem; border-width: 4px; } /* ===== High Contrast Mode Support ===== */ @media (prefers-contrast: high) { :focus-visible { outline: 3px solid #000; outline-offset: 2px; } .target-ring { border-color: #000; } .shot-dot { background: #000; } } /* ===== Button States ===== */ button:disabled, a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ===== Pricing Toggle ===== */ .pricing-toggle button[aria-selected="true"] { background-color: #4338ca; color: white; } /* ===== Progress Bar ===== */ .progress-bar { height: 0.5rem; background-color: #e5e7eb; border-radius: 9999px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease; } /* ===== FAQ Details ===== */ details[open] summary { color: #4338ca; } /* ===== Scroll Snap (Optional) ===== */ @media (min-width: 1024px) { .scroll-snap-x { scroll-snap-type: x mandatory; overflow-x: auto; } .scroll-snap-item { scroll-snap-align: start; flex-shrink: 0; } } /* ===== Focus Trap ===== */ .focus-trap:focus { outline: 3px solid #d4af37; outline-offset: 2px; } /* ===== Print Styles ===== */ @media print { .no-print, .mobile-bottom-nav, .target-ring, .shot-dot { display: none; } body { color: #000; background: #fff; font-size: 12pt; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } .hero-gradient { background: #fff !important; color: #000 !important; } .hero-gradient::before { display: none; } @page { margin: 0.5in; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } img { page-break-inside: avoid; page-break-after: avoid; } ul, ol, dl { page-break-before: avoid; } } /* ===== Fallback for Older Browsers ===== */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .hero-gradient::before, .glass, .gradient-text, .athlete-mask { display: none; } } /* ===== Loading State for Images ===== */ img[loading="lazy"] { content-visibility: auto; contain-intrinsic-size: 1px 1000px; } /* ===== Custom Scrollbar for Dark Areas ===== */ .scrollbar-dark::-webkit-scrollbar { width: 10px; height: 10px; } .scrollbar-dark::-webkit-scrollbar-track { background: #0f102f; } .scrollbar-dark::-webkit-scrollbar-thumb { background: #4338ca; border-radius: 5px; border: 2px solid #0f102f; } .scrollbar-dark::-webkit-scrollbar-thumb:hover { background: #d4af37; } .scrollbar-dark { scrollbar-width: thin; scrollbar-color: #4338ca #0f102f; } /* ===== Star Rating ===== */ .star-rating svg { fill: currentColor; } /* ===== Organizations Profile Setup Page ===== */ .club-profile-page * { margin: 0; padding: 0; box-sizing: border-box; } .club-profile-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); min-height: 100vh; padding: 1rem; } .club-profile-page .progress-steps { display: flex; align-items: center; justify-content: space-between; max-width: 28rem; margin: 0 auto 2.5rem; } .club-profile-page .step { flex: 1; text-align: center; position: relative; } .club-profile-page .step-indicator { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 600; font-size: 0.875rem; background: white; border: 2px solid #e5e7eb; color: #9ca3af; transition: all 0.3s; } .club-profile-page .step-indicator::after { content: none; } .club-profile-page .step.active .step-indicator { background: linear-gradient(135deg, #4f46e5, #6366f1); border-color: #4f46e5; color: white; box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3); } .club-profile-page .step.completed .step-indicator { background: #10b981; border-color: #10b981; color: white; } .club-profile-page .step.completed .step-indicator::before { content: "✓"; font-size: 1.25rem; line-height: 1; } .club-profile-page .step-label { font-size: 0.75rem; font-weight: 500; color: #6b7280; } .club-profile-page .step.active .step-label { color: #4f46e5; } .club-profile-page .step-line { position: absolute; top: 1.25rem; left: 60%; width: 80%; height: 2px; background: #e5e7eb; z-index: 0; } .club-profile-page .step:last-child .step-line { display: none; } .club-profile-page .profile-container { max-width: 48rem; margin: 0 auto; } .club-profile-page .profile-card { background: white; border-radius: 1.5rem; border: 1px solid #e2e8f0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.02); overflow: hidden; animation: slideIn 0.4s ease-out forwards; } .club-profile-page .profile-header { padding: 2rem; border-bottom: 1px solid #f1f5f9; text-align: center; background: linear-gradient(135deg, #f8fafc, #ffffff); } .club-profile-page .profile-body { padding: 2rem; } @media (max-width: 640px) { .club-profile-page .profile-header, .club-profile-page .profile-body { padding: 1.5rem; } } .club-profile-page .club-icon { width: 4rem; height: 4rem; background: linear-gradient(135deg, #4f46e5, #6366f1); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3); } .club-profile-page .club-icon svg { width: 2rem; height: 2rem; color: white; } .club-profile-page h1 { font-size: 1.875rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; } @media (min-width: 768px) { .club-profile-page h1 { font-size: 2.25rem; } } .club-profile-page .subtitle { color: #475569; font-size: 0.875rem; max-width: 32rem; margin: 0 auto; } .club-profile-page .step-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: #eef2ff; color: #4f46e5; font-size: 0.75rem; font-weight: 600; margin-bottom: 1rem; } .club-profile-page .step-badge span { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #4f46e5; animation: pulse-subtle 2s infinite; } .club-profile-page .error-container { background: #fef2f2; border: 1px solid #fee2e2; border-radius: 1rem; padding: 1.25rem; margin-bottom: 2rem; } .club-profile-page .error-title { display: flex; align-items: center; gap: 0.5rem; color: #991b1b; font-weight: 600; margin-bottom: 0.75rem; } .club-profile-page .error-title svg { width: 1.25rem; height: 1.25rem; } .club-profile-page .error-list { list-style: none; padding-left: 1.75rem; } .club-profile-page .error-list li { color: #b91c1c; font-size: 0.875rem; margin-bottom: 0.25rem; list-style-type: disc; } .club-profile-page .form-section { background: #f9fafb; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem; } .club-profile-page .form-section:last-child { margin-bottom: 0; } .club-profile-page .section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: #0f172a; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; } .club-profile-page .section-title svg { width: 1.25rem; height: 1.25rem; color: #4f46e5; } .club-profile-page .form-group { margin-bottom: 1.5rem; } .club-profile-page .form-group:last-child { margin-bottom: 0; } .club-profile-page .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .club-profile-page .form-row { grid-template-columns: 1fr; gap: 1.5rem; } } .club-profile-page .form-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; } .club-profile-page .required { color: #ef4444; font-size: 0.75rem; font-weight: normal; } .club-profile-page .form-input, .club-profile-page .form-select, .club-profile-page .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.75rem; font-size: 1rem; transition: all 0.2s; background: white; } .club-profile-page .form-input:focus, .club-profile-page .form-select:focus, .club-profile-page .form-textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .club-profile-page .form-textarea { min-height: 6rem; resize: vertical; } .club-profile-page .input-hint { margin-top: 0.5rem; font-size: 0.75rem; color: #6b7280; } .club-profile-page .input-error { margin-top: 0.5rem; font-size: 0.75rem; color: #ef4444; } .club-profile-page .file-input-wrapper { position: relative; } .club-profile-page .file-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; } .club-profile-page .file-label { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 2px dashed #e5e7eb; border-radius: 0.75rem; background: white; cursor: pointer; transition: all 0.2s; position: relative; z-index: 1; } .club-profile-page .file-label:hover { border-color: #4f46e5; background: #f5f3ff; } .club-profile-page .file-label svg { width: 1.5rem; height: 1.5rem; color: #9ca3af; } .club-profile-page .file-label span { color: #374151; font-size: 0.875rem; } .club-profile-page .file-name { margin-top: 0.5rem; font-size: 0.75rem; color: #10b981; display: none; } .club-profile-page .file-name.visible { display: block; } .club-profile-page .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .club-profile-page .checkbox-grid { grid-template-columns: repeat(3, 1fr); } } .club-profile-page .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; transition: background 0.2s; } .club-profile-page .checkbox-item:hover { background: #f3f4f6; } .club-profile-page .checkbox-item input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: #4f46e5; } .club-profile-page .checkbox-label { font-size: 0.875rem; color: #374151; } .club-profile-page .btn-primary { width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; font-weight: 600; border: none; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .club-profile-page .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4); } .club-profile-page .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .club-profile-page .btn-primary svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s; } .club-profile-page .btn-primary:hover svg { transform: translateX(4px); } .club-profile-page .save-indicator { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.75rem; color: #6b7280; } .club-profile-page .save-indicator svg { width: 1rem; height: 1rem; color: #10b981; } .club-profile-page .footer-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; } .club-profile-page .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #fff; color: #475569; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s; } .club-profile-page .btn-secondary:hover { border-color: #4f46e5; color: #4f46e5; background: #f8fafc; } .club-profile-page .trust-indicators { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; font-size: 0.75rem; color: #6b7280; } .club-profile-page .trust-item { display: flex; align-items: center; gap: 0.25rem; } .club-profile-page .trust-item svg { width: 1rem; height: 1rem; color: #10b981; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { to { transform: rotate(360deg); } } .club-profile-page .animate-spin { animation: spin 0.6s linear infinite; }