|
|
|
|
|
|
|
|
.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; } |
|
|
} |
|
|
|
