Spaces:
Runtime error
Runtime error
| .navbar-brand { | |
| font-size: 1.75rem ; | |
| } | |
| .navbar-brand i { | |
| font-size: 1.5rem ; | |
| } | |
| .profile-hero { | |
| background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #3730a3 100%); | |
| padding: 3rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| color: white; | |
| margin-top: -1rem; | |
| margin-bottom: 3rem; | |
| } | |
| .profile-hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle at 30% 70%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); | |
| animation: profileFloat 20s ease-in-out infinite; | |
| } | |
| @keyframes profileFloat { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(1deg); } | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero-greeting { | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(45deg, #fff, rgba(255,255,255,0.8)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| margin-bottom: 2rem; | |
| } | |
| .profile-card { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| } | |
| .profile-header { | |
| background: linear-gradient(135deg, #6366f1, #4f46e5); | |
| color: white; | |
| padding: 3rem 2rem; | |
| position: relative; | |
| } | |
| .profile-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); | |
| } | |
| /* .profile-avatar-container { | |
| position: relative; | |
| z-index: 2; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .profile-avatar { | |
| width: 120px; | |
| height: 120px; | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.2); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .avatar-placeholder { | |
| width: 120px; | |
| height: 120px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 3rem; | |
| font-weight: 700; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.2); | |
| backdrop-filter: blur(10px); | |
| } */ | |
| .profile-name { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .profile-email { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| margin-bottom: 1rem; | |
| } | |
| .profile-meta { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .profile-content { | |
| padding: 3rem; | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .section-title i { | |
| margin-right: 0.75rem; | |
| color: #6366f1; | |
| } | |
| .form-floating { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-floating label { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .form-control, .form-select { | |
| background: var(--input-bg); | |
| border: 2px solid var(--border-color); | |
| border-radius: 10px; | |
| color: var(--text-primary); | |
| padding: 1rem 1.25rem; | |
| transition: all 0.3s ease; | |
| } | |
| .form-control:focus, .form-select:focus { | |
| border-color: #6366f1; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| outline: none; | |
| } | |
| .form-control::placeholder { | |
| color: var(--text-secondary); | |
| } | |
| .file-input-wrapper { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .file-input-label { | |
| display: block; | |
| background: var(--background-light); | |
| border: 2px dashed var(--border-color); | |
| border-radius: 10px; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--text-secondary); | |
| } | |
| .file-input-label:hover { | |
| border-color: #6366f1; | |
| background: rgba(99, 102, 241, 0.05); | |
| color: var(--text-primary); | |
| } | |
| .file-input-label i { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .file-input { | |
| position: absolute; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .btn-profile { | |
| background: linear-gradient(135deg, #6366f1, #4f46e5); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| padding: 0.75rem 2rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-profile:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-outline-profile { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border: 2px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 0.75rem 2rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-outline-profile:hover { | |
| background: var(--border-color); | |
| color: var(--text-primary); | |
| transform: translateY(-2px); | |
| } | |
| .stats-section { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .stats-title { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .stat-card { | |
| background: var(--background-light); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.1); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #6366f1; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .alert { | |
| border-radius: 10px; | |
| border: none; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .text-muted { | |
| color: var(--text-secondary) ; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .profile-hero { | |
| padding: 2rem 0; | |
| } | |
| .hero-greeting { | |
| font-size: 2rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1rem; | |
| } | |
| .profile-header { | |
| padding: 2rem 1.5rem; | |
| } | |
| .profile-avatar { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .avatar-placeholder { | |
| width: 100px; | |
| height: 100px; | |
| font-size: 2.5rem; | |
| } | |
| .profile-name { | |
| font-size: 1.5rem; | |
| } | |
| .profile-content { | |
| padding: 2rem 1.5rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| } |