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(
|
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; }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user