Live Clock Footer

<!-- Live Clock Footer -->
<footer class="nuda-ft2-live-clock">
  <div class="nuda-ft2-live-clock__zone">
    <span class="nuda-ft2-live-clock__city">SF</span>
    <span class="nuda-ft2-live-clock__time" data-tz="America/Los_Angeles">09<span class="nuda-ft2-live-clock__colon">:</span>14</span>
  </div>
  <div class="nuda-ft2-live-clock__zone">
    <span class="nuda-ft2-live-clock__city">NY</span>
    <span class="nuda-ft2-live-clock__time" data-tz="America/New_York">12<span class="nuda-ft2-live-clock__colon">:</span>14</span>
  </div>
  <div class="nuda-ft2-live-clock__zone">
    <span class="nuda-ft2-live-clock__city">LON</span>
    <span class="nuda-ft2-live-clock__time" data-tz="Europe/London">17<span class="nuda-ft2-live-clock__colon">:</span>14</span>
  </div>
</footer>

// Progressive enhancement: replace the static hh:mm with each zone's real local time.
document.querySelectorAll('.nuda-ft2-live-clock__time').forEach((el) => {
  const tz = el.dataset.tz;
  const render = () => {
    const parts = new Intl.DateTimeFormat('en-US', {
      timeZone: tz,
      hour: '2-digit',
      minute: '2-digit',
      hour12: false,
    }).formatToParts(new Date());
    const hh = parts.find((p) => p.type === 'hour').value;
    const mm = parts.find((p) => p.type === 'minute').value;
    el.innerHTML = hh + '<span class="nuda-ft2-live-clock__colon">:</span>' + mm;
  };
  render();
  setInterval(render, 30000);
});

.nuda-ft2-live-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 20px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  width: 100%;
  max-width: 320px;
  flex-wrap: wrap;
}

.nuda-ft2-live-clock__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nuda-ft2-live-clock__city {
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nuda-ft2-live-clock__time {
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 16px;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.nuda-ft2-live-clock__colon {
  color: #e4ff54;
  animation: _nuda-ft2LiveClockBlink 1s steps(1,end) infinite;
}

@keyframes _nuda-ft2LiveClockBlink {
  0%,49% {
    opacity: 1;
  }
  50%,100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ft2-live-clock__colon {
    animation: none;
    opacity: 1;
  }
}