Spaces:
Sleeping
Sleeping
| /** | |
| * ProfileQuote Styles | |
| * | |
| * Glassmorphism design with animated elements. | |
| * Supports light/dark mode and multiple sizes. | |
| */ | |
| .profile-quote { | |
| --bg-card: rgba(255, 255, 255, 0.05); | |
| --border-color: rgba(128, 128, 128, 0.2); | |
| --text-primary: #fff; | |
| --text-secondary: #aaa; | |
| --accent-glow: rgba(79, 124, 130, 0.3); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 20px 24px; | |
| backdrop-filter: blur(12px); | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: all 0.4s ease; | |
| } | |
| .profile-quote--visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Light mode */ | |
| :root[data-theme="light"] .profile-quote, | |
| .light-mode .profile-quote { | |
| --bg-card: rgba(232, 244, 246, 0.8); | |
| --text-primary: #191970; | |
| --text-secondary: #7272a8; | |
| --accent-glow: rgba(79, 124, 130, 0.15); | |
| } | |
| /* Size variants */ | |
| .profile-quote--compact { | |
| padding: 12px 16px; | |
| } | |
| .profile-quote--large { | |
| padding: 28px 32px; | |
| } | |
| /* Main quote section */ | |
| .quote-main { | |
| display: flex; | |
| gap: 16px; | |
| align-items: flex-start; | |
| } | |
| .quote-icon { | |
| font-size: 2rem; | |
| line-height: 1; | |
| flex-shrink: 0; | |
| } | |
| .profile-quote--compact .quote-icon { | |
| font-size: 1.5rem; | |
| } | |
| .profile-quote--large .quote-icon { | |
| font-size: 2.5rem; | |
| } | |
| .quote-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .quote-text { | |
| margin: 0; | |
| font-size: 1.15rem; | |
| font-weight: 500; | |
| line-height: 1.4; | |
| color: var(--text-primary); | |
| } | |
| .profile-quote--compact .quote-text { | |
| font-size: 1rem; | |
| } | |
| .profile-quote--large .quote-text { | |
| font-size: 1.35rem; | |
| font-weight: 600; | |
| } | |
| /* Confidence indicator */ | |
| .quote-confidence { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 12px; | |
| } | |
| .confidence-bar { | |
| flex: 1; | |
| max-width: 150px; | |
| height: 6px; | |
| background: rgba(128, 128, 128, 0.2); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .confidence-fill { | |
| height: 100%; | |
| width: var(--confidence, 0%); | |
| background: var(--confidence-color, #d000d0); | |
| border-radius: 3px; | |
| transition: width 1s ease-out; | |
| } | |
| .confidence-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| /* Badges row */ | |
| .quote-badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| background: rgba(128, 128, 128, 0.1); | |
| border: 1px solid rgba(128, 128, 128, 0.2); | |
| color: var(--text-secondary); | |
| transition: all 0.2s ease; | |
| } | |
| .badge:hover { | |
| background: rgba(128, 128, 128, 0.15); | |
| transform: translateY(-1px); | |
| } | |
| .badge-icon { | |
| font-style: normal; | |
| } | |
| .badge-score { | |
| padding: 2px 6px; | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #22C55E; | |
| border-radius: 10px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| } | |
| /* Domain badge */ | |
| .badge--domain { | |
| background: rgba(59, 130, 246, 0.1); | |
| border-color: rgba(59, 130, 246, 0.2); | |
| color: #60A5FA; | |
| } | |
| /* Trend badge */ | |
| .badge--trend { | |
| background: rgba(var(--trend-rgb, 79, 124, 130), 0.1); | |
| border-color: rgba(var(--trend-rgb, 79, 124, 130), 0.2); | |
| color: var(--trend-color, #d000d0); | |
| } | |
| /* Interviews badge */ | |
| .badge--interviews { | |
| background: rgba(79, 124, 130, 0.1); | |
| border-color: rgba(79, 124, 130, 0.2); | |
| color: #00cccc; | |
| } | |
| /* Empty state */ | |
| .profile-quote--empty { | |
| opacity: 1; | |
| transform: none; | |
| border-style: dashed; | |
| } | |
| .profile-quote--empty .quote-text { | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| font-style: italic; | |
| } | |
| /* Hover effect */ | |
| .profile-quote:not(.profile-quote--empty):hover { | |
| border-color: rgba(79, 124, 130, 0.4); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 480px) { | |
| .profile-quote { | |
| padding: 16px; | |
| } | |
| .quote-main { | |
| flex-direction: column; | |
| gap: 12px; | |
| text-align: center; | |
| align-items: center; | |
| } | |
| .quote-badges { | |
| justify-content: center; | |
| } | |
| .quote-confidence { | |
| justify-content: center; | |
| } | |
| } | |
| /* Animation keyframes */ | |
| @keyframes pulseGlow { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 10px var(--accent-glow); | |
| } | |
| 50% { | |
| box-shadow: 0 0 25px var(--accent-glow); | |
| } | |
| } | |
| .profile-quote.profile-quote--highlight { | |
| animation: pulseGlow 2s infinite; | |
| } | |
| /* =========================================== | |
| IDENTITY SECTION (for UserProfile integration) | |
| =========================================== */ | |
| .identity-section { | |
| margin-bottom: 24px; | |
| } | |
| .identity-loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 32px; | |
| color: var(--text-secondary, #aaa); | |
| font-size: 0.9rem; | |
| background: rgba(128, 128, 128, 0.05); | |
| border-radius: 12px; | |
| margin-bottom: 24px; | |
| } | |
| .identity-loading .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } |