asdfdas

src/components/verifier/SoonHero.astro

@@ -168,7 +168,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     display: grid;
     gap: var(--space-5);
     padding: var(--space-6);
-    background: var(--glass-on-night);
+    background: var(--panel-on-night);
     align-content: start;
     justify-items: start;
   }
@@ -210,7 +210,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     letter-spacing: var(--track-caps);
     text-transform: uppercase;
     line-height: var(--leading-small);
-    background: var(--glass-on-night);
+    background: var(--panel-on-night);
   }
   .readout__cell {
     display: grid;
@@ -221,7 +221,23 @@ const ridges = Array.from({ length: rows }, (_, r) => {
   .readout__cell + .readout__cell { border-top: var(--hairline) solid var(--line-on-night); }
   .readout__cell--head, .readout dt { color: var(--ink-muted); }
   .readout dd { display: flex; align-items: center; gap: var(--space-2); }
-  .readout__live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); flex: none; }
+  .readout__live { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); flex: none; }
+  /* The live phase pulses: a ring in the signal tone grows out of the dot and fades. */
+  .readout__live::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: var(--signal);
+    animation: readout-pulse calc(6 * var(--dur-slow)) var(--ease) infinite;
+  }
+  @keyframes readout-pulse {
+    from { transform: scale(1); opacity: 0.7; }
+    70%, to { transform: scale(3); opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .readout__live::after { animation: none; opacity: 0; }
+  }
 
   @media (max-width: 30rem) {
     .signup { padding: var(--space-5); }
@@ -242,5 +258,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     .shero__name { grid-column: 1 / -1; margin-top: var(--space-4); }
     .readout__cell { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
     .readout__cell + .readout__cell { border-top: 0; border-left: var(--hairline) solid var(--line-on-night); }
+    /* The strip's title sits in the middle of its cell, apart from the label/value cells beside it. */
+    .readout__cell--head { place-content: center; text-align: center; }
   }
 </style>