| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| } | |
| .logo-box { | |
| background: var(--bg-color); | |
| padding: 0.8rem; | |
| border-radius: 12px; | |
| border: 1px solid var(--accent-cyan); | |
| box-shadow: 0 0 15px rgba(102, 252, 241, 0.2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .header-title { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| } | |
| .header-subtitle { | |
| font-size: 0.85rem; | |
| letter-spacing: 1px; | |
| opacity: 0.8; | |
| } | |
| .header-stats { | |
| display: flex; | |
| gap: 2rem; | |
| font-size: 0.85rem; | |
| } | |
| .stat-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .text-pulse { | |
| animation: textPulse 2s infinite; | |
| } | |
| @keyframes textPulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; text-shadow: 0 0 8px var(--accent-purple); } | |
| 100% { opacity: 0.5; } | |
| } | |
| /* === Responsive Header === */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding: 0.75rem 1rem; | |
| margin-bottom: 0.75rem; | |
| gap: 0.75rem; | |
| } | |
| .header-left { | |
| gap: 0.75rem; | |
| width: 100%; | |
| } | |
| .logo-box { | |
| padding: 0.5rem; | |
| border-radius: 10px; | |
| } | |
| .header-title { | |
| font-size: 1.25rem; | |
| letter-spacing: 1px; | |
| } | |
| .header-subtitle { | |
| font-size: 0.72rem; | |
| } | |
| .header-stats { | |
| width: 100%; | |
| gap: 0.5rem; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| flex: 1; | |
| min-width: 130px; | |
| padding: 0.4rem 0.6rem; | |
| font-size: 0.68rem; | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 420px) { | |
| .header-container { | |
| padding: 0.6rem 0.75rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .header-title { | |
| font-size: 1.1rem; | |
| letter-spacing: 0.5px; | |
| } | |
| .header-subtitle { | |
| font-size: 0.66rem; | |
| } | |
| .stat-item { | |
| font-size: 0.62rem; | |
| padding: 0.35rem 0.5rem; | |
| min-width: 120px; | |
| } | |
| } | |