Spaces:
Sleeping
Sleeping
TOTEM Studio commited on
Commit ·
3e03dc1
1
Parent(s): e47eb3f
fix hero image blur + shared bg override + gauge reposition
Browse files- Remove totem-hero from shared gradient rule (was overriding image bg)
- Hero bg: object-position left center to anchor comet sweep correctly
- Signal gauge: vertically centred on right side of hero
- Hero ::after pseudo removed (replaced by image)
- Topbar rule separated from hero rule
app.py
CHANGED
|
@@ -330,7 +330,6 @@ TOTEM_CSS = """
|
|
| 330 |
}
|
| 331 |
|
| 332 |
.totem-topbar,
|
| 333 |
-
.totem-hero,
|
| 334 |
.totem-status-row,
|
| 335 |
.totem-metrics-grid,
|
| 336 |
.totem-lower-grid {
|
|
@@ -351,26 +350,15 @@ TOTEM_CSS = """
|
|
| 351 |
|
| 352 |
.totem-hero {
|
| 353 |
position: relative;
|
| 354 |
-
|
| 355 |
-
padding: 44px 52px;
|
| 356 |
overflow: hidden;
|
| 357 |
border: 1px solid rgba(242, 193, 78, 0.35);
|
| 358 |
-
background:
|
| 359 |
-
|
| 360 |
-
linear-gradient(120deg, rgba(13, 23, 51, 0.98), rgba(35, 15, 62, 0.92) 58%, rgba(8, 18, 45, 0.98));
|
| 361 |
}
|
| 362 |
|
| 363 |
.totem-hero::after {
|
| 364 |
-
|
| 365 |
-
position: absolute;
|
| 366 |
-
left: 18%;
|
| 367 |
-
right: 10%;
|
| 368 |
-
top: 44%;
|
| 369 |
-
height: 76px;
|
| 370 |
-
transform: rotate(-10deg);
|
| 371 |
-
border-radius: 999px;
|
| 372 |
-
filter: blur(12px);
|
| 373 |
-
background: linear-gradient(90deg, transparent, rgba(138, 77, 255, 0.45), rgba(242, 193, 78, 0.38), transparent);
|
| 374 |
}
|
| 375 |
|
| 376 |
.totem-hero-title {
|
|
@@ -394,8 +382,9 @@ TOTEM_CSS = """
|
|
| 394 |
|
| 395 |
.totem-signal-wrap {
|
| 396 |
position: absolute;
|
| 397 |
-
right:
|
| 398 |
-
top:
|
|
|
|
| 399 |
width: 160px;
|
| 400 |
height: 160px;
|
| 401 |
}
|
|
@@ -708,7 +697,7 @@ TOTEM_CSS = """
|
|
| 708 |
width: 100%;
|
| 709 |
height: 100%;
|
| 710 |
object-fit: cover;
|
| 711 |
-
object-position: center;
|
| 712 |
border-radius: inherit;
|
| 713 |
z-index: 0;
|
| 714 |
}
|
|
|
|
| 330 |
}
|
| 331 |
|
| 332 |
.totem-topbar,
|
|
|
|
| 333 |
.totem-status-row,
|
| 334 |
.totem-metrics-grid,
|
| 335 |
.totem-lower-grid {
|
|
|
|
| 350 |
|
| 351 |
.totem-hero {
|
| 352 |
position: relative;
|
| 353 |
+
padding: 40px 52px;
|
|
|
|
| 354 |
overflow: hidden;
|
| 355 |
border: 1px solid rgba(242, 193, 78, 0.35);
|
| 356 |
+
background: #06091e;
|
| 357 |
+
min-height: 200px;
|
|
|
|
| 358 |
}
|
| 359 |
|
| 360 |
.totem-hero::after {
|
| 361 |
+
display: none;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 362 |
}
|
| 363 |
|
| 364 |
.totem-hero-title {
|
|
|
|
| 382 |
|
| 383 |
.totem-signal-wrap {
|
| 384 |
position: absolute;
|
| 385 |
+
right: 52px;
|
| 386 |
+
top: 50%;
|
| 387 |
+
transform: translateY(-50%);
|
| 388 |
width: 160px;
|
| 389 |
height: 160px;
|
| 390 |
}
|
|
|
|
| 697 |
width: 100%;
|
| 698 |
height: 100%;
|
| 699 |
object-fit: cover;
|
| 700 |
+
object-position: left center;
|
| 701 |
border-radius: inherit;
|
| 702 |
z-index: 0;
|
| 703 |
}
|