Discount Countdown

<!-- Discount Countdown — wire the values from JS each second -->
<div class="nuda-disc">
  <span class="nuda-disc__label">Offer ends in</span>
  <div class="nuda-disc__time">
    <span><b data-unit="hours">02</b><i>h</i></span>
    <span class="nuda-disc__sep">:</span>
    <span><b data-unit="minutes">14</b><i>m</i></span>
    <span class="nuda-disc__sep">:</span>
    <span class="is-tick"><b data-unit="seconds">37</b><i>s</i></span>
  </div>
</div>

/* Discount Countdown
   Compact countdown pill. Seconds tick scales subtly each beat.
   Customize: --disc-accent */

.nuda-disc {
  --disc-accent: #e4ff54;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(228, 255, 84, 0.08), rgba(228, 255, 84, 0.02));
  border: 1px solid rgba(228, 255, 84, 0.25);
  border-radius: 10px;
}

.nuda-disc__label {
  font: 600 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nuda-disc__time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fafafa;
}

.nuda-disc__time > span {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.nuda-disc__time b {
  font: 800 1.125rem ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-disc__time i {
  font: 600 0.6rem ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  color: #a1a1aa;
  margin-left: 2px;
}

.nuda-disc__sep {
  color: #63636e;
  font: 800 1.125rem ui-sans-serif, system-ui, sans-serif;
}

.is-tick b {
  display: inline-block;
  animation: nuda-disc-tick 1s ease-in-out infinite;
  color: var(--disc-accent);
}

@keyframes nuda-disc-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .is-tick b { animation: none; }
}

/* Discount Countdown — drives the [data-unit] elements until the deadline. */

(function () {
  var disc = document.querySelector('.nuda-disc');
  if (!disc) return;

  // Set your real deadline here (e.g. ISO from your server).
  var target = new Date(Date.now() + 2 * 3600e3 + 14 * 60e3 + 37e3);

  var h = disc.querySelector('[data-unit="hours"]');
  var m = disc.querySelector('[data-unit="minutes"]');
  var s = disc.querySelector('[data-unit="seconds"]');

  function pad(n) { return n < 10 ? '0' + n : '' + n; }

  function tick() {
    var diff = Math.max(0, target - Date.now());
    h.textContent = pad(Math.floor(diff / 3600e3));
    m.textContent = pad(Math.floor((diff % 3600e3) / 60e3));
    s.textContent = pad(Math.floor((diff % 60e3) / 1000));
    if (diff > 0) setTimeout(tick, 1000);
  }
  tick();
})();