Glass Card

<!-- Glass Card — frosted glass card with blur background -->
<div class="nuda-glass-card">
  <h3 class="nuda-glass-card__title">Glass Card</h3>
  <p class="nuda-glass-card__desc">Frosted glass effect with backdrop blur</p>
</div>

/* ── Glass Card ──────────────────────────────────────────────
   Requires a colorful / image background behind the card
   for the blur to be visible.
   Customize:
     --nuda-gc-bg        : glass background (semi-transparent)
     --nuda-gc-blur      : blur amount
     --nuda-gc-border    : border color
     --nuda-gc-clr       : text color
     --nuda-gc-radius    : corner radius
     --nuda-gc-shadow    : optional shadow
   ──────────────────────────────────────────────────────────── */
.nuda-glass-card {
  --nuda-gc-bg: rgba(255, 255, 255, 0.08);
  --nuda-gc-blur: 16px;
  --nuda-gc-border: rgba(255, 255, 255, 0.12);
  --nuda-gc-clr: #e0e7ff;
  --nuda-gc-radius: 16px;
  --nuda-gc-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

  width: 280px;
  padding: 28px 20px;
  background: var(--nuda-gc-bg);
  backdrop-filter: blur(var(--nuda-gc-blur));
  -webkit-backdrop-filter: blur(var(--nuda-gc-blur));
  border: 1px solid var(--nuda-gc-border);
  border-radius: var(--nuda-gc-radius);
  box-shadow: var(--nuda-gc-shadow);
  color: var(--nuda-gc-clr);
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.nuda-glass-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

.nuda-glass-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.nuda-glass-card__desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 6px 0 0;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-glass-card {
    transition: none;
  }
}