Banner Slide

<div class="nuda-banner" role="alert">
  <p class="nuda-banner__text">
    <strong>New:</strong> v2.0 is now available.
    <a class="nuda-banner__link" href="#">Learn more &rarr;</a>
  </p>
  <button class="nuda-banner__close" aria-label="Dismiss banner">&times;</button>
</div>

/* Banner Slide
   Top banner that slides down into view.
   Customize: --banner-bg, --banner-text */

.nuda-banner {
  --banner-bg: #e4ff54;
  --banner-text: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--banner-bg);
  color: var(--banner-text);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  animation: nuda-banner-slide-down 0.4s ease-out;
}

.nuda-banner__text {
  margin: 0;
}

.nuda-banner__text strong {
  font-weight: 700;
}

.nuda-banner__link {
  color: var(--banner-text);
  font-weight: 600;
  text-decoration: underline;
}

.nuda-banner__close {
  background: none;
  border: none;
  color: var(--banner-text);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.6;
}

.nuda-banner__close:hover {
  opacity: 1;
}

@keyframes nuda-banner-slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-banner {
    animation: none;
  }
}