| |
| @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); |
|
|
| :root { |
| |
| |
| |
| --bg-primary: #090D16; |
| --bg-secondary: #0E1525; |
| --bg-surface: #121B2D; |
| --bg-elevated: #18243C; |
| --bg-glass: rgba(14, 21, 37, 0.75); |
|
|
| --text-primary: #F8FAFC; |
| --text-secondary: #94A3B8; |
| --text-muted: #64748B; |
|
|
| --accent-blue: #3B82F6; |
| --accent-cyan: #06B6D4; |
| --accent-purple: #8B5CF6; |
|
|
| --success: #10B981; |
| --success-bg: rgba(16, 185, 129, 0.12); |
| --success-border: rgba(16, 185, 129, 0.3); |
|
|
| --warning: #F59E0B; |
| --warning-bg: rgba(245, 158, 11, 0.12); |
| --warning-border: rgba(245, 158, 11, 0.3); |
|
|
| --danger: #EF4444; |
| --danger-bg: rgba(239, 68, 68, 0.12); |
| --danger-border: rgba(239, 68, 68, 0.3); |
|
|
| --color-teal: #00C9A7; |
| --color-teal-bg: rgba(0, 201, 167, 0.12); |
| --color-teal-border: rgba(0, 201, 167, 0.3); |
|
|
| --color-gold: #F6C90E; |
| --color-gold-bg: rgba(246, 201, 14, 0.12); |
| --color-gold-border: rgba(246, 201, 14, 0.3); |
|
|
| --border: #1E293B; |
| --border-subtle: #162032; |
| --border-hover: #334155; |
| --border-focus: #3B82F6; |
|
|
| |
| |
| |
| --space-1: 4px; |
| --space-2: 8px; |
| --space-3: 12px; |
| --space-4: 16px; |
| --space-5: 20px; |
| --space-6: 24px; |
| --space-8: 32px; |
| --space-10: 40px; |
| --space-12: 48px; |
| --space-14: 56px; |
| --space-16: 64px; |
|
|
| |
| |
| |
| --radius-sm: 6px; |
| --radius-md: 10px; |
| --radius-lg: 16px; |
| --radius-pill: 9999px; |
|
|
| --radius-card: var(--radius-lg); |
| --radius-button: var(--radius-md); |
| --radius-input: var(--radius-md); |
|
|
| |
| |
| |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15); |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2); |
| --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.28); |
| --shadow-glass: 0 8px 32px 0 rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset; |
| --shadow-hover: 0 14px 36px rgba(0,201,167,0.12), 0 4px 12px rgba(0,0,0,0.35); |
| --shadow-teal: 0 0 20px rgba(0,201,167,0.2); |
| --shadow-card: 0 1px 1px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.28); |
| --shadow-float: 0 20px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3); |
| --shadow-focus-ring: 0 0 0 3px rgba(0,201,167,0.2); |
|
|
| |
| |
| |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| --font-mono: 'JetBrains Mono', monospace; |
|
|
| --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1); |
| --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1); |
| --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
|
|
| |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| -webkit-text-size-adjust: 100%; |
| color-scheme: dark; |
| } |
|
|
| body { |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| font-family: var(--font-sans); |
| font-size: 15px; |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| overflow-x: hidden; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 5px; |
| height: 5px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg-primary); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border); |
| border-radius: var(--radius-sm); |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--border-hover); |
| } |
|
|
| |
| *:focus-visible { |
| outline: 2px solid var(--border-focus); |
| outline-offset: 2px; |
| } |
|
|
| |
| |
| |
| .typo-display { |
| font-size: 32px; |
| font-weight: 800; |
| letter-spacing: -0.03em; |
| line-height: 1.2; |
| color: var(--text-primary); |
| } |
|
|
| @media (min-width: 768px) { |
| .typo-display { |
| font-size: 40px; |
| } |
| } |
|
|
| .typo-h1 { |
| font-size: 24px; |
| font-weight: 800; |
| letter-spacing: -0.02em; |
| line-height: 1.25; |
| color: var(--text-primary); |
| } |
|
|
| @media (min-width: 768px) { |
| .typo-h1 { |
| font-size: 28px; |
| } |
| } |
|
|
| .typo-h2 { |
| font-size: 20px; |
| font-weight: 700; |
| letter-spacing: -0.015em; |
| line-height: 1.3; |
| color: var(--text-primary); |
| } |
|
|
| .typo-h3 { |
| font-size: 16px; |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| line-height: 1.4; |
| color: var(--text-primary); |
| } |
|
|
| .typo-body-lg { |
| font-size: 16px; |
| font-weight: 400; |
| line-height: 1.6; |
| color: var(--text-secondary); |
| } |
|
|
| .typo-body { |
| font-size: 14px; |
| font-weight: 400; |
| line-height: 1.5; |
| color: var(--text-primary); |
| } |
|
|
| .typo-small { |
| font-size: 12.5px; |
| font-weight: 400; |
| line-height: 1.4; |
| color: var(--text-secondary); |
| } |
|
|
| .typo-caption { |
| font-size: 11px; |
| font-weight: 500; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| .typo-mono { |
| font-family: var(--font-mono); |
| font-size: 14px; |
| font-weight: 600; |
| } |
|
|
| |
| .page-title { |
| font-size: 20px; |
| font-weight: 800; |
| color: var(--text-primary); |
| margin-bottom: var(--space-1); |
| letter-spacing: -0.02em; |
| line-height: 1.2; |
| } |
|
|
| @media (min-width: 768px) { |
| .page-title { |
| font-size: 24px; |
| } |
| } |
|
|
| .page-sub { |
| color: var(--text-muted); |
| font-size: 13px; |
| margin-bottom: var(--space-6); |
| } |
|
|
| |
| .card { |
| background-color: var(--bg-surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-card); |
| padding: var(--space-5); |
| box-shadow: var(--shadow-sm); |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); |
| } |
|
|
| .card:hover { |
| border-color: var(--border-hover); |
| } |
|
|
| |
| .card-glass { |
| background: var(--bg-glass); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| box-shadow: var(--shadow-glass); |
| } |
|
|
| |
| .reason-item { |
| padding: var(--space-3) var(--space-4); |
| border-left: 3px solid var(--accent-cyan); |
| background: var(--bg-elevated); |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; |
| font-size: 12.5px; |
| color: var(--text-primary); |
| line-height: 1.5; |
| } |
|
|
| |
| .live-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--color-teal); |
| animation: pulse 2s infinite; |
| display: inline-block; |
| margin-right: 4px; |
| } |
|
|
| .dot-pulse { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--color-teal); |
| animation: pulse 1s infinite; |
| flex-shrink: 0; |
| } |
|
|
| .dot-done { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--color-teal); |
| flex-shrink: 0; |
| } |
|
|
| .dot-idle { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--text-muted); |
| flex-shrink: 0; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.4; transform: scale(0.85); } |
| } |
|
|
| .fade-in { |
| animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(6px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
