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:
neo committed 2026-06-21 21:14:09 +05:00
1 parent 6c2d2e87a6
commit af8b30e51d
1 file changed
+18 -11
+18 -11
View File
@@ -78,11 +78,11 @@ body {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent 0%, transparent 0%,
transparent 35%, transparent 32%,
rgba(255,255,255,0.008) 47%, rgba(255,255,255,0.025) 44%,
rgba(34,197,94,0.03) 50%, rgba(34,197,94,0.06) 50%,
rgba(255,255,255,0.006) 53%, rgba(255,255,255,0.02) 56%,
transparent 65%, transparent 68%,
transparent 100% transparent 100%
); );
background-size: 200% 100%; background-size: 200% 100%;
@@ -99,15 +99,20 @@ body {
min-height: 100vh; display: flex; flex-direction: column; min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center; align-items: center; justify-content: center;
padding: 120px 24px 80px; padding: 120px 24px 80px;
overflow: hidden;
} }
/* ============================================================ /* ============================================================
KPI CARDS — floating on sides 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 { .kpi-card {
position: absolute; position: absolute;
pointer-events: auto;
background: rgba(22,22,24,0.85); background: rgba(22,22,24,0.85);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
@@ -242,16 +247,18 @@ body {
RESPONSIVE RESPONSIVE
============================================================ */ ============================================================ */
@media (max-width: 1024px) { @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 { .kpi-cards {
position: relative; top: auto; left: auto; right: auto; bottom: auto;
display: grid; grid-template-columns: 1fr 1fr; display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; width: 100%; max-width: 660px; gap: 12px; width: 100%; max-width: 660px;
margin: 0 auto 32px; 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 { padding-top: 160px; }
.hero-glow { width: 500px; height: 500px; } .hero-glow { width: 500px; height: 500px; }
} }