| |
|
|
| .home-hero { |
| position: relative; |
| padding: var(--space-10) var(--space-6); |
| border-radius: var(--radius-xl); |
| background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,0.35) 0%, rgba(16,185,129,0.25) 30%, rgba(99,102,241,0.25) 60%, rgba(255,255,255,0.05) 100%); |
| border: 1px solid var(--border-subtle); |
| } |
|
|
| .home-hero .title { |
| font-size: var(--font-size-3xl); |
| font-weight: var(--font-weight-bold); |
| color: var(--text-strong); |
| margin: 0 0 var(--space-2); |
| } |
|
|
| .home-hero .subtitle { |
| color: var(--text-secondary); |
| margin: 0 0 var(--space-6); |
| } |
|
|
| .cta-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: var(--space-3); |
| } |
|
|
| .cta-row .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-2); |
| } |
|
|
| .status-row { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: var(--space-3); |
| margin-top: var(--space-6); |
| } |
|
|
| .status-card { |
| background: var(--surface-elevated); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| padding: var(--space-4); |
| } |
|
|
| .status-card h4 { |
| margin: 0 0 var(--space-2); |
| font-size: var(--font-size-md); |
| color: var(--text-strong); |
| } |
|
|
| .badges { display: flex; gap: var(--space-2); flex-wrap: wrap; } |
|
|
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 10px; |
| border-radius: var(--radius-full); |
| background: var(--surface-glass); |
| color: var(--text-strong); |
| border: 1px solid var(--border-subtle); |
| } |
|
|
| .badge.success { background: var(--color-success-alpha); color: var(--color-success); } |
| .badge.warning { background: var(--color-warning-alpha); color: var(--color-warning); } |
| .badge.info { background: var(--color-primary-alpha); color: var(--color-primary); } |
|
|
| .section { |
| margin-top: var(--space-8); |
| } |
|
|
| .cards-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: var(--space-3); |
| } |
|
|
| .card { |
| background: var(--surface-elevated); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| padding: var(--space-4); |
| } |
|
|
| .card .name { font-weight: var(--font-weight-semibold); color: var(--text-strong); } |
| .card .price { color: var(--text-secondary); } |
| .card .change.pos { color: var(--color-success); } |
| .card .change.neg { color: var(--color-danger); } |
|
|
| @media (max-width: 1024px) { |
| .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| } |
|
|
| @media (max-width: 640px) { |
| .status-row { grid-template-columns: 1fr; } |
| .cards-grid { grid-template-columns: 1fr; } |
| } |
|
|
