hero-v2: fix KPI cards positioning, boost sweep visibility
- .hero now overflow:hidden, kpi-cards absolute fill - .kpi-card pointer-events:auto (was none) - Sweep gradient 3x brighter - Responsive: position-static cards on mobile
This commit is contained in:
1 parent
6c2d2e87a6
commit
af8b30e51d
1 file changed
+18
-11
+18
-11
@@ -78,11 +78,11 @@ body {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
transparent 35%,
|
||||
rgba(255,255,255,0.008) 47%,
|
||||
rgba(34,197,94,0.03) 50%,
|
||||
rgba(255,255,255,0.006) 53%,
|
||||
transparent 65%,
|
||||
transparent 32%,
|
||||
rgba(255,255,255,0.025) 44%,
|
||||
rgba(34,197,94,0.06) 50%,
|
||||
rgba(255,255,255,0.02) 56%,
|
||||
transparent 68%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
@@ -99,15 +99,20 @@ body {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
padding: 120px 24px 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
KPI CARDS — floating on sides
|
||||
============================================================ */
|
||||
.kpi-cards { position: relative; z-index: 20; }
|
||||
.kpi-cards {
|
||||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 20; pointer-events: none;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
background: rgba(22,22,24,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
@@ -242,16 +247,18 @@ body {
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.kpi-card {
|
||||
position: static; transform: none;
|
||||
width: 100%; max-width: 320px; margin: 0 auto 12px;
|
||||
}
|
||||
.kpi-card.left, .kpi-card.right { left: auto; }
|
||||
.kpi-cards {
|
||||
position: relative; top: auto; left: auto; right: auto; bottom: auto;
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 12px; width: 100%; max-width: 660px;
|
||||
margin: 0 auto 32px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.kpi-card {
|
||||
position: static; transform: none;
|
||||
width: 100%;
|
||||
}
|
||||
.kpi-card.left, .kpi-card.right { left: auto; }
|
||||
.hero { padding-top: 160px; }
|
||||
.hero-glow { width: 500px; height: 500px; }
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user