/* Gate: keep only the preloader visible until auth/initial data unlocks the UI */ html[data-boot="locked"] body> :not(#preloader) { display: none !important; } html { width: 100% !important; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 25%, #dbeafe 65%, #e0f2fe 100%); background-attachment: fixed; background-size: cover; width: 100% !important; } header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 50 !important; } /* Dark mode base (compatible with profile.html; toggled by adding .dark to ) */ html.dark body { background: radial-gradient(circle at 20% 20%, #0f172a 0%, #1e293b 45%, #0f172a 100%); color: #e2e8f0 } /* Use Mirza for Arabic text */ [lang="ar"] { font-family: 'Traditional Arabic', 'Amiri', 'Mirza', serif } .text-logo-blue { color: #1e3a8a } :root { --brand-blue: #1e3a8a; --brand-green: #16a34a; --brand-indigo: #6366f1; --surface-white: 255 255 255; --glass-border: 15 23 42; --radius-xl: 1.25rem } .dark :root { --surface-white: 15 23 42 } .theme-transition * { transition: background-color .35s ease, color .35s ease, border-color .35s ease } /* Reusable glass panel utility (profile.html style) */ .glass-panel { position: relative; background: linear-gradient(145deg, rgba(var(--surface-white)/.82), rgba(var(--surface-white)/.72)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(var(--glass-border), .08); border-radius: var(--radius-xl); box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .15), 0 2px 6px rgba(15, 23, 42, .12); overflow: hidden } html.dark .glass-panel { background: linear-gradient(160deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .78)); border-color: rgba(148, 163, 184, .18); box-shadow: 0 8px 28px -4px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4) } .glass-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(at 15% 20%, rgba(59, 130, 246, .25), transparent 65%), radial-gradient(at 85% 80%, rgba(34, 197, 94, .20), transparent 70%); mix-blend-mode: overlay; opacity: .55 } html.dark .glass-panel::before { opacity: .35 } .elevate-hover { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease } .elevate-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -4px rgba(15, 23, 42, .25), 0 4px 10px rgba(15, 23, 42, .18) } html.dark .elevate-hover:hover { box-shadow: 0 18px 42px -6px rgba(0, 0, 0, .65), 0 4px 18px rgba(0, 0, 0, .5) } /* Hero layout */ .profile-hero { position: relative; margin-bottom: 3.5rem !important } .profile-hero::before { content: ""; position: absolute; inset: -70px -24px -40px; z-index: -1; background: radial-gradient(600px 500px at 14% 25%, rgba(59, 130, 246, .22), transparent 70%), radial-gradient(520px 420px at 88% 30%, rgba(34, 197, 94, .18), transparent 72%), linear-gradient(115deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .05)); opacity: .85; filter: saturate(1.1); -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .65) 80%, rgba(0, 0, 0, 0) 100%); mask: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .65) 80%, rgba(0, 0, 0, 0) 100%) } html.dark .profile-hero::before { background: radial-gradient(620px 520px at 14% 28%, rgba(59, 130, 246, .28), transparent 68%), radial-gradient(540px 440px at 86% 35%, rgba(16, 185, 129, .24), transparent 70%), linear-gradient(120deg, rgba(51, 65, 85, .85), rgba(15, 23, 42, .25)); opacity: .8; filter: saturate(1.15); -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .9) 55%, rgba(0, 0, 0, .5) 82%, rgba(0, 0, 0, 0) 100%); mask: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .9) 55%, rgba(0, 0, 0, .5) 82%, rgba(0, 0, 0, 0) 100%) } @media (max-width: 767px) { .profile-hero::before { inset: -70px 0 -40px !important; } } /* Button micro-interactions (subtle in-button animation on hover/press) */ .iie-btn-motion { will-change: transform; transition: transform 150ms cubic-bezier(.22, 1, .36, 1) } .iie-btn-motion:not(:disabled):hover { transform: translateY(-1px) } .iie-btn-motion:not(:disabled):active { transform: translateY(0) scale(.98) } .avatar-ring { position: relative; display: inline-grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: linear-gradient(145deg, #1e3a8a, #3b82f6); padding: 4px; box-shadow: 0 6px 18px rgba(30, 58, 138, .35) } .avatar-inner { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(145deg, #ffffff, #e2e8f0); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2rem; color: #1e3a8a; letter-spacing: -1px; box-sizing: border-box } .avatar-inner.has-photo { padding: 0 } html.dark .avatar-inner { background: linear-gradient(145deg, #1e293b, #0f172a); color: #e2e8f0 } /* Tabs */ .profile-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: .5rem; padding-bottom: 4px } .profile-tabs::-webkit-scrollbar { display: none } .profile-tabs button { position: relative; font-weight: 600; font-size: .875rem; padding: .6rem 1rem; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; transition: color .25s ease, background-color .25s ease } @media (min-width: 480px) { .profile-tabs button { padding: .75rem 1.25rem } } .profile-tabs button[aria-selected="true"] { background: linear-gradient(90deg, #1e3a8a, #2563eb); color: #fff; box-shadow: 0 4px 18px rgba(30, 58, 138, .35) } html.dark .profile-tabs button { color: #94a3b8 } html.dark .profile-tabs button[aria-selected="true"] { background: linear-gradient(90deg, #1e3a8a, #3b82f6); color: #fff } .tab-panel[hidden] { display: none } /* Card accents + header (profile.html style) */ .card-accent-blue { border-left: 4px solid #3b82f6 } .card-accent-green { border-left: 4px solid #16a34a } .card-accent-indigo { border-left: 4px solid #6366f1 } .card-accent-purple { border-left: 4px solid #8b5cf6 } .card-accent-amber { border-left: 4px solid #f59e0b } .card-tint-blue { background-image: linear-gradient(to top, rgba(219, 234, 254, .35), transparent 60%) } .card-tint-green { background-image: linear-gradient(to top, rgba(187, 247, 208, .35), transparent 60%) } .card-tint-indigo { background-image: linear-gradient(to top, rgba(199, 210, 254, .35), transparent 60%) } .card-tint-purple { background-image: linear-gradient(to top, rgba(233, 213, 255, .35), transparent 60%) } .card-tint-amber { background-image: linear-gradient(to top, rgba(254, 243, 199, .35), transparent 60%) } .card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .75rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem } html.dark .card-header { border-color: #334155 } /* Layout centering (profile.html style) */ .profile-grid-areas { max-width: 1240px; margin-left: auto; margin-right: auto } .profile-grid-areas #tab-panels-wrapper { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto } .profile-grid-areas .profile-card { width: 100% } .profile-card { background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); overflow-wrap: anywhere; word-break: break-word } .profile-card.glass-panel { background: linear-gradient(145deg, rgba(var(--surface-white)/.82), rgba(var(--surface-white)/.72)); border: 1px solid rgba(var(--glass-border), .08); border-radius: var(--radius-xl); box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .15), 0 2px 6px rgba(15, 23, 42, .12) } html.dark .profile-card.glass-panel { background: linear-gradient(160deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .78)); border-color: rgba(148, 163, 184, .18); box-shadow: 0 8px 28px -4px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4) } /* Dark mode: improve readability inside cards without rewriting all utility classes */ html.dark .profile-card .text-gray-800 { color: #f1f5f9 } html.dark .profile-card .text-gray-700 { color: #e2e8f0 } html.dark .profile-card .text-gray-600 { color: #94a3b8 } html.dark .profile-card .text-gray-500 { color: #64748b } html.dark .profile-card .border-gray-200 { border-color: #334155 } html.dark .profile-card .border-gray-300 { border-color: #334155 } html.dark .profile-card .bg-gray-50 { background-color: rgba(15, 23, 42, .55) } html.dark .profile-card .bg-gray-100 { background-color: rgba(30, 41, 59, .65) } html.dark .profile-card .bg-gray-200 { background-color: rgba(51, 65, 85, .75) } html.dark .profile-card input[type="text"], html.dark .profile-card input[type="email"], html.dark .profile-card input[type="tel"], html.dark .profile-card textarea, html.dark .profile-card select { background-color: rgba(30, 41, 59, .75); border-color: #334155; color: #f1f5f9 } html.dark .profile-card input[type="text"]::placeholder, html.dark .profile-card input[type="email"]::placeholder, html.dark .profile-card input[type="tel"]::placeholder, html.dark .profile-card textarea::placeholder { color: #64748b } html.dark .profile-card input[type="text"]:disabled, html.dark .profile-card input[type="email"]:disabled, html.dark .profile-card input[type="tel"]:disabled, html.dark .profile-card textarea:disabled, html.dark .profile-card select:disabled { background-color: rgba(15, 23, 42, .65); color: #94a3b8 } img { max-width: 100%; height: auto } /* Drawer + hamburger (parity with student/teacher) */ .hamburger-top, .hamburger-middle, .hamburger-bottom { transition: all .3s ease-in-out; transform-origin: center } .open .hamburger-top { transform: translateY(5px) rotate(45deg) } .open .hamburger-middle { opacity: 0 } .open .hamburger-bottom { transform: translateY(-5px) rotate(-45deg) } #mobile-menu-overlay { transition: opacity 200ms ease-out; will-change: opacity } #mobile-menu { width: 16rem; overflow: hidden; transform: translateZ(0); will-change: transform, opacity; transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease-out; opacity: 0; pointer-events: none; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); border-left: 1px solid #e5e7eb; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; box-shadow: -6px 0 24px rgba(2, 6, 23, .15) } #mobile-menu:not(.translate-x-full) { opacity: 1; pointer-events: auto } #mobile-menu .drawer-header { padding: 1rem; display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid #eef2f7; min-height: 72px; position: relative } /* Close button animation and positioning to match profile drawer */ #mobile-menu .drawer-header #mobile-menu-close-btn { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; overflow: hidden } #mobile-menu-close-btn { position: relative } #mobile-menu-close-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 80% at 50% 50%, rgba(30, 58, 138, .12), rgba(30, 58, 138, 0)); opacity: 0; transform: scale(.8); transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1) } #mobile-menu-close-btn:hover::after { opacity: 1; transform: scale(1) } #mobile-menu-close-btn:active::after { opacity: 1; transform: scale(1.05) } #mobile-menu-close-btn .close-icon { transition: transform 260ms cubic-bezier(.22, 1, .36, 1), color 200ms ease } #mobile-menu-close-btn:hover .close-icon { transform: rotate(90deg) scale(1.1); color: #1e3a8a } #mobile-menu-close-btn:active .close-icon { transform: rotate(135deg) scale(.96) } #mobile-menu-close-btn.open .close-icon { transform: rotate(0deg); animation: close-spin-pulse 1200ms ease-in-out 1 } @keyframes close-spin-pulse { 0% { transform: rotate(0) scale(1) } 20% { transform: rotate(22.5deg) scale(1.06) } 50% { transform: rotate(45deg) scale(1.12) } 100% { transform: rotate(0) scale(1) } } @media (prefers-reduced-motion: reduce) { #mobile-menu-close-btn::after, #mobile-menu-close-btn .close-icon { transition: none !important; animation: none !important } } #mobile-menu .drawer-brand { display: flex; flex-direction: column; line-height: 1.1 } #mobile-menu .drawer-brand .title { font-weight: 800; color: #1e3a8a; font-size: 1rem; line-height: 1.15 } #mobile-menu .drawer-brand .subtitle { color: #16a34a; font-weight: 700; font-size: .9rem; line-height: 1.15 } #mobile-menu .menu-modern { display: flex; flex-direction: column; gap: .25rem; padding: .5rem .5rem 1rem } #mobile-menu .menu-item { display: flex; align-items: center; gap: 12px; padding: .625rem .75rem; border-radius: .75rem; transition: background-color .2s ease, transform .08s ease } #mobile-menu .menu-item:hover { background: linear-gradient(90deg, #f3f4f6, #eef2ff) } #mobile-menu .menu-item .icon-wrap { width: 36px; height: 36px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px #e5e7eb } #mobile-menu .menu-item .menu-item-text { font-weight: 600; color: #374151; white-space: nowrap; opacity: 1; padding-left: .25rem } #mobile-menu .menu-item.active { background: linear-gradient(90deg, #e0f2fe, #ecfeff); box-shadow: inset 0 0 0 1px #bae6fd } .scroll-locked { overflow: hidden !important; padding-right: var(--scrollbar-comp, 0px) } .scroll-locked-root { overflow: hidden !important } /* Dark mode header + drawer tweaks (profile.html parity) */ html.dark header.bg-white { background: #0f172a } html.dark header h1.text-logo-blue { color: #ffffff } html.dark #mobile-menu { background: rgba(15, 23, 42, .92); border-color: #334155 } html.dark #mobile-menu .drawer-header { border-bottom: 1px solid #334155 } html.dark #mobile-menu .drawer-brand .title { color: #ffffff !important } html.dark #mobile-menu .drawer-brand .subtitle { color: #16a34a !important } html.dark #mobile-menu .menu-item:hover { background: linear-gradient(90deg, #1e293b, #0f172a) } html.dark #mobile-menu .menu-item.active { background: linear-gradient(90deg, #1e3a8a, #2563eb); color: #ffffff; box-shadow: inset 0 0 0 1px #1e3a8a } html.dark #mobile-menu .menu-item .icon-wrap { background: #1e293b; color: #e2e8f0; box-shadow: inset 0 0 0 1px #334155 } html.dark #mobile-menu .menu-item .menu-item-text { color: #e2e8f0 } html.dark #mobile-menu .bg-gray-50 { background: linear-gradient(145deg, #1e293b, #0f172a) } html.dark #mobile-menu .border-t { border-top-color: #334155 } /* Theme toggle (profile.html parity) */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #1e3a8a; border: 1px solid rgba(30, 58, 138, 0.25); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.12); transition: background .4s ease, color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; overflow: hidden; isolation: isolate } .theme-toggle::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from 0deg, #1e3a8a, #2563eb, #16a34a, #1e3a8a 360deg); opacity: .15; filter: blur(4px) saturate(140%); transition: opacity .6s ease } .theme-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 0 4px rgba(255, 255, 255, 0.25); mix-blend-mode: overlay; pointer-events: none } .theme-toggle:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.35), 0 4px 10px rgba(15, 23, 42, 0.15) } .theme-toggle:hover::before { opacity: .3 } .theme-toggle:active { transform: translateY(0) scale(.96); transition-duration: .15s } .theme-toggle i { font-size: 1.15rem; transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .35s ease } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.65) } html.dark .theme-toggle { background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.85)); color: #f8fafc; border-color: rgba(148, 163, 184, 0.3); box-shadow: 0 6px 22px -4px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5) } html.dark .theme-toggle::before { opacity: .22 } html.dark .theme-toggle:hover::before { opacity: .38 } .theme-toggle[aria-pressed="true"] i { transform: rotate(180deg) } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle i { transition: none !important } .theme-toggle:hover { transform: none } } /* Modern circular back button (parity with profile.html) */ .back-btn { position: relative; border: 1px solid rgba(30, 58, 138, 0.15); background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(160%) blur(6px); backdrop-filter: saturate(160%) blur(6px); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease; } .back-btn:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(30, 58, 138, 0.25); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12), 0 2px 4px rgba(2, 6, 23, 0.06); } .back-btn:active { transform: translateY(1px); } .back-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0)); opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.25s ease; } .back-btn:hover::after { opacity: 1; transform: scale(1); } .back-icon { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .back-btn:hover .back-icon { transform: translateX(-2px); } .back-btn:active .back-icon { transform: translateX(-4px); } .back-btn--circle { width: 40px; height: 40px; border-radius: 9999px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(2, 6, 23, 0.08); } .back-btn--circle:hover { box-shadow: 0 8px 22px rgba(2, 6, 23, 0.12); } .back-btn--circle .back-icon { font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .back-icon, .back-btn, .back-btn::after { transition: none !important; } } /* Accordion chevron rotation for details dropdown */ .details-chevron { transition: transform 200ms ease; } details[open] .details-chevron { transform: rotate(180deg); } /* Preloader + Action Loader (parity with Student/Volunteer) */ #preloader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: #ffffff; transition: opacity 0.7s ease; } #preloader.opacity-0 { opacity: 0; } .loader-logo { animation: pulse-zoom 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } .loader-text { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; color: #1e3a8a; animation: text-fade 2s infinite ease-in-out; text-align: center; } .loader-quote { margin-top: 1.0rem; font-size: 0.95rem; font-style: italic; color: #4b5563; max-width: 90vw; width: 500px; text-align: center; padding: 0 1rem; } @keyframes pulse-zoom { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.85; } } @keyframes text-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Match student/volunteer overlay behavior */ #loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.75s ease-in-out, visibility 0.75s; opacity: 1; visibility: visible; text-align: center; } #loader-overlay.hidden { opacity: 0; visibility: hidden; } /* Constrain overlay logo size so it doesn’t appear oversized */ #loader-overlay .loader-logo { width: 6rem; height: 6rem; } /* Avoid inline styles (lint) */ #preloader-progress-bar { width: 5%; } .header-title-wrap { width: calc(100% - 220px); } .progress-wrap { margin-top: 1rem; height: 0.5rem; width: 100%; background: #e5e7eb; border-radius: 9999px; overflow: hidden; } .progress-bar { height: 100%; background: #16a34a; width: 5%; transition: width 0.3s ease; border-radius: 9999px; } /* Site version: regular inline at bottom of page content */ #site-version { font-size: 10px; color: #9ca3af; margin: 0 0 4px; } /* Badge styles (to match profile.html current ID pill) */ .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 2px 10px; font-size: 12px; font-weight: 600; } .badge-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } /* Gender is fixed (disabled) — hide the dropdown arrow icon */ #profileGender { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } #profileGender::-ms-expand { display: none; } /* Claim ID success pulse */ @keyframes claimPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); transform: scale(1); } 60% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); } } .claim-success-pulse { animation: claimPulse 1.2s ease-out; } /* --- Modern Claim Button 2.0 --- */ .claim-btn-modern { --cbg: linear-gradient(140deg, #059669, #10b981, #0ea5e9, #6366f1, #8b5cf6, #059669); --cglow: #10b981; --csize: 300%; background: rgba(255, 255, 255, 0.08); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); position: relative; border: 0; cursor: pointer; font-family: inherit; } .claim-btn-modern:disabled { cursor: not-allowed; } .claim-btn-modern .claim-btn-bg { position: absolute; inset: 0; border-radius: inherit; background: var(--cbg); background-size: var(--csize) var(--csize); animation: claimBtnBg 12s linear infinite; opacity: .35; transition: opacity .4s ease; } .claim-btn-modern:hover .claim-btn-bg { opacity: .55; } .claim-btn-modern .claim-btn-border { position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(16, 185, 129, .85), rgba(14, 165, 233, .6), rgba(99, 102, 241, .75)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .9; } /* ===== Modern Password Section Styles ===== */ /* Show password card when details element is open */ #password-section[open] .pw-modern-card { opacity: 1; transform: translateY(0) scale(1); } /* If JS toggles a data-open attribute in future keep both */ #password-section[data-open] .pw-modern-card { opacity: 1; transform: translateY(0) scale(1); } .pw-modern-card { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .22), 0 2px 10px rgba(15, 23, 42, .12); border-radius: var(--radius-xl); padding: 1.5rem 1.25rem; transition: all .55s cubic-bezier(.16, .8, .3, 1); opacity: 1; transform: translateY(0) scale(1); overflow: hidden; } .pw-modern-card:before, .pw-modern-card:after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; } .pw-modern-card:before { background: radial-gradient(circle at 20% 15%, rgba(59, 130, 246, .25), transparent 60%), radial-gradient(circle at 85% 80%, rgba(16, 185, 129, .25), transparent 55%); } .pw-modern-card:after { background: linear-gradient(140deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%); mix-blend-mode: overlay; } .pw-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .pw-header .icon-wrap { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #10b981, #2563eb); color: #fff; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .25); } .pw-title { font-size: 1.3rem; font-weight: 600; letter-spacing: .5px; background: linear-gradient(90deg, #0ea5e9, #6366f1, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; } .pw-grid { display: grid; gap: 1.25rem; } .pw-field { position: relative; } .pw-field label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #475569; display: block; margin-bottom: .55rem; } .pw-input-wrap { position: relative; } .pw-input { width: 100%; border: 1px solid rgba(148, 163, 184, .55); background: linear-gradient(120deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .65)); border-radius: 14px; padding: .9rem 3.25rem .9rem 1rem; font-size: .95rem; font-weight: 500; color: #0f172a; outline: none; transition: all .35s; border-bottom-width: 2px; } .pw-input::placeholder { color: #94a3b8; font-weight: 400; } .pw-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25), 0 4px 18px -4px rgba(99, 102, 241, .35); } .pw-input.invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .25); } .pw-visibility-btn { position: absolute; top: 50%; right: .65rem; transform: translateY(-50%); color: #64748b; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(148, 163, 184, .45); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; transition: all .35s; } .pw-visibility-btn:hover { color: #334155; border-color: #6366f1; } .pw-policy { position: relative; border: 1px solid rgba(148, 163, 184, .35); background: linear-gradient(135deg, rgba(241, 245, 249, .9), rgba(255, 255, 255, .75)); padding: 1.1rem 1rem 1.15rem; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 4px 14px -4px rgba(0, 0, 0, .15); } .pw-policy h4 { font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #475569; margin: 0 0 .75rem; } .pw-policy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .pw-policy li { position: relative; padding: .45rem .65rem .45rem 1.9rem; font-size: .72rem; line-height: 1.15rem; border-radius: 12px; font-weight: 500; color: #64748b; background: rgba(255, 255, 255, .65); border: 1px solid rgba(148, 163, 184, .25); transition: all .35s; } .pw-policy li i { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: .85rem; opacity: .75; transition: all .35s; } .pw-policy li.text-green-600 { background: linear-gradient(90deg, rgba(16, 185, 129, .18), rgba(16, 185, 129, .08)); color: #065f46; border-color: rgba(16, 185, 129, .35); } .pw-policy li.text-red-600 { background: linear-gradient(90deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .08)); color: #991b1b; border-color: rgba(239, 68, 68, .35); } .pw-strength { margin-top: .85rem; } .pw-bar-wrap { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #e2e8f0, #f1f5f9); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); } .pw-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 2px 6px -1px rgba(0, 0, 0, .3); transition: width .45s cubic-bezier(.16, .8, .3, 1), filter .45s; } .pw-strength-label { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #475569; margin-top: .45rem; display: inline-flex; align-items: center; gap: .35rem; } .pw-strength-label .dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); } .pw-strength-label.state-medium .dot { background: #f59e0b; } .pw-strength-label.state-strong .dot { background: #10b981; } .pw-submit-btn { --btnGrad: linear-gradient(95deg, #6366f1, #10b981, #0ea5e9); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; border: none; padding: 1rem 1.1rem; font-size: .95rem; font-weight: 600; color: #fff; background: var(--btnGrad); background-size: 220% 220%; border-radius: 18px; cursor: pointer; box-shadow: 0 10px 32px -8px rgba(99, 102, 241, .45), 0 4px 12px -4px rgba(16, 185, 129, .4); transition: background-position .8s ease, transform .45s, box-shadow .45s; overflow: hidden; } .pw-submit-btn:hover { background-position: 100% 0; transform: translateY(-3px); box-shadow: 0 14px 40px -10px rgba(99, 102, 241, .55), 0 6px 16px -6px rgba(16, 185, 129, .5); } .pw-submit-btn:active { transform: translateY(0); } .pw-submit-btn .shine { position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent 60%); mix-blend-mode: overlay; animation: pwShine 3.5s linear infinite; } @keyframes pwShine { 0% { transform: translateX(-60%); } 60% { transform: translateX(120%); } 100% { transform: translateX(120%); } } .pw-submit-btn .icon { margin-right: .55rem; font-size: 1rem; } .pw-footer-note { margin-top: 1rem; font-size: .65rem; color: #64748b; text-align: center; letter-spacing: .05em; } /* Dark mode: password UI parity */ html.dark .pw-modern-card { background: linear-gradient(135deg, rgba(30, 41, 59, .78), rgba(15, 23, 42, .65)); border-color: rgba(148, 163, 184, .18); box-shadow: 0 10px 34px -12px rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .45); } html.dark .pw-modern-card:after { background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%); } html.dark .pw-field label { color: #e2e8f0; } html.dark .pw-input { border-color: #334155; background: linear-gradient(120deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .75)); color: #f1f5f9; } html.dark .pw-input::placeholder { color: #64748b; } html.dark .pw-visibility-btn { background: rgba(15, 23, 42, .35); border-color: rgba(148, 163, 184, .22); color: #94a3b8; } html.dark .pw-visibility-btn:hover { color: #e2e8f0; border-color: #3b82f6; } html.dark .pw-policy { border-color: rgba(148, 163, 184, .22); background: linear-gradient(135deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .65)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 18px -10px rgba(0, 0, 0, .55); } html.dark .pw-policy h4 { color: #e2e8f0; } html.dark .pw-policy li { background: rgba(15, 23, 42, .35); border-color: rgba(148, 163, 184, .18); color: #94a3b8; } html.dark .pw-policy li.text-green-600 { background: linear-gradient(90deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .10)); color: #10b981; border-color: rgba(16, 185, 129, .35); } html.dark .pw-policy li.text-red-600 { background: linear-gradient(90deg, rgba(239, 68, 68, .22), rgba(239, 68, 68, .10)); color: #ef4444; border-color: rgba(239, 68, 68, .35); } html.dark .pw-strength-label { color: #e2e8f0; } html.dark .pw-strength-label .dot { box-shadow: 0 0 0 2px rgba(15, 23, 42, .85); } html.dark .pw-bar-wrap { background: linear-gradient(90deg, rgba(51, 65, 85, .8), rgba(15, 23, 42, .8)); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18); } html.dark .pw-footer-note { color: #94a3b8; } @media (min-width:640px) { .pw-modern-card { padding: 1.75rem 1.75rem; } .pw-title { font-size: 1.45rem; } .pw-policy li { font-size: .74rem; } .pw-grid { grid-template-columns: 1fr 1fr; align-items: start; } .pw-policy { grid-column: 1/-1; } .pw-actions { grid-column: 1/-1; } } /* Inline loader state */ .pw-submit-btn.is-loading { pointer-events: none; opacity: .85; } .pw-submit-btn .pw-spinner { width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: pwSpin .9s linear infinite; margin-right: .55rem; } @keyframes pwSpin { to { transform: rotate(360deg); } } .claim-btn-modern .claim-btn-glow { position: absolute; inset: -8px; border-radius: inherit; background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, .55), rgba(34, 197, 94, 0)), radial-gradient(circle at 70% 70%, rgba(99, 102, 241, .45), rgba(99, 102, 241, 0)); filter: blur(14px); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .claim-btn-modern:hover .claim-btn-glow { opacity: 1; } .claim-btn-modern .claim-btn-particles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .claim-btn-modern .claim-btn-particles::before, .claim-btn-modern .claim-btn-particles::after { content: ""; position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; background: repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .28) 0 2px, transparent 2px 40px); animation: claimParticles 18s linear infinite; mix-blend-mode: overlay; opacity: .22; } .claim-btn-modern .claim-btn-particles::after { animation-direction: reverse; animation-duration: 28s; opacity: .18; filter: hue-rotate(40deg); } @keyframes claimParticles { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(0, 0, 0) rotate(360deg); } } @keyframes claimBtnBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .claim-btn-content { position: relative; z-index: 2; } .claim-btn-modern .claim-btn-progress { width: 0; height: 0; opacity: 0; transition: width .4s cubic-bezier(.22, 1, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; display: flex; align-items: center; } .claim-btn-modern.is-claiming .claim-btn-progress { width: 22px; height: 22px; opacity: 1; } .claim-btn-modern .progress-ring { width: 22px; height: 22px; transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 4; } .progress-ring .pr-track { stroke: rgba(255, 255, 255, .25); } .progress-ring .pr-indicator { stroke: #fff; stroke-dasharray: 163.36; stroke-dashoffset: 163.36; animation: claimProgress 2.1s ease-in-out infinite; stroke-linecap: round; } @keyframes claimProgress { 0% { stroke-dashoffset: 163.36; } 50% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 163.36; } } .claim-btn-modern .icon-check, .claim-btn-modern .icon-spark { width: 20px; height: 20px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; display: none; } .claim-btn-modern .icon-spark path { stroke-width: 1.5; } .claim-btn-modern.is-success .icon-check { display: block; stroke-dasharray: 30; stroke-dashoffset: 30; animation: checkDraw .6s ease forwards .15s; } .claim-btn-modern.is-success .icon-spark { display: block; position: absolute; top: -6px; right: -6px; opacity: 0; animation: sparkPop .8s ease forwards .25s; } @keyframes checkDraw { to { stroke-dashoffset: 0; } } @keyframes sparkPop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 40% { transform: scale(1.1) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0; } } .claim-btn-modern.is-success { background: rgba(34, 197, 94, .12); } .claim-btn-modern.is-success .claim-btn-glow { opacity: 1; filter: blur(18px) brightness(1.1); } .claim-btn-modern.is-success .claim-btn-bg { animation-duration: 4s; opacity: .65; } .claim-btn-modern.is-success .claim-btn-border { background: linear-gradient(120deg, #10b981, #34d399, #10b981); } .claim-btn-modern.is-claiming .claim-btn-label { opacity: .8; } .claim-btn-modern .claim-btn-label { transition: color .35s ease, opacity .35s ease; letter-spacing: .25px; } .claim-btn-modern.is-success .claim-btn-label { color: #ecfdf5; } /* Reduced motion */ @media (prefers-reduced-motion:reduce) { .claim-btn-modern .claim-btn-bg, .claim-btn-modern .claim-btn-glow, .claim-btn-modern .claim-btn-particles::before, .claim-btn-modern .claim-btn-particles::after, .progress-ring .pr-indicator { animation: none !important; } .claim-btn-modern .claim-btn-bg { opacity: .5; } } /* Modern Check Availability Button */ .check-btn-modern { position: relative; overflow: hidden; border: 0; background: rgba(30, 64, 175, .15); color: #1e3a8a; font-weight: 600; padding: .65rem 1.1rem; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-size: .85rem; letter-spacing: .25px; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); transition: background .35s ease, color .35s ease, box-shadow .4s ease; text-align: center; } .check-btn-modern:disabled { opacity: .5; cursor: not-allowed; } .check-btn-modern:not(:disabled):hover { background: rgba(30, 64, 175, .25); box-shadow: 0 4px 18px -2px rgba(30, 64, 175, .25); } .check-btn-modern::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #1d4ed8, #0ea5e9, #6366f1, #1d4ed8); background-size: 260% 260%; opacity: 0; transition: opacity .5s ease; z-index: 0; } .check-btn-modern:not(:disabled):hover::before { opacity: .25; animation: checkBg 8s linear infinite; } @keyframes checkBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .check-btn-modern .check-inner { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; } .check-btn-modern .check-spinner { width: 16px; height: 16px; border: 3px solid rgba(30, 64, 175, .35); border-top-color: #1d4ed8; border-radius: 50%; animation: checkSpin .85s linear infinite; display: none; } @keyframes checkSpin { to { transform: rotate(360deg); } } .check-btn-modern.is-checking { cursor: progress; } .check-btn-modern.is-checking .check-spinner { display: inline-block; } .check-btn-modern.state-available { background: rgba(16, 185, 129, .18); color: #065f46; } .check-btn-modern.state-available::before { background: linear-gradient(120deg, #059669, #34d399, #059669); opacity: .3; animation: checkBg 5s linear infinite; } .check-btn-modern.state-taken { background: rgba(220, 38, 38, .15); color: #991b1b; } .check-btn-modern.state-taken::before { background: linear-gradient(120deg, #dc2626, #f87171, #dc2626); opacity: .28; animation: checkBg 7s linear infinite; } .check-btn-modern .status-icon { width: 14px; height: 14px; display: none; } .check-btn-modern.state-available .status-icon.available { display: inline-block; } .check-btn-modern.state-taken .status-icon.taken { display: inline-block; } /* Legacy claim animation block removed (superseded by .claim-btn-modern styles) */ /* Profile Save changes button success state */ #profileSaveBtn.is-success { background-color: #10b981 !important; /* Premium Emerald-500 */ box-shadow: 0 0 16px rgba(16, 185, 129, 0.6); animation: saveSuccessPulse 1.5s ease-out; } @keyframes saveSuccessPulse { 0% { transform: scale(1); } 30% { transform: scale(1.02); box-shadow: 0 0 22px rgba(16, 185, 129, 0.85); } 100% { transform: scale(1); box-shadow: 0 0 16px rgba(16, 185, 129, 0.6); } }