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

Files changed (1) hide show
  1. app.py +8 -19
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
- min-height: 222px;
355
- padding: 44px 52px;
356
  overflow: hidden;
357
  border: 1px solid rgba(242, 193, 78, 0.35);
358
- background:
359
- radial-gradient(circle at 85% 50%, rgba(138, 77, 255, 0.24), transparent 30%),
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
- content: "";
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: 46px;
398
- top: 31px;
 
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
  }