Glass Search Bar

<div class="nuda-glass-search">
  <svg class="nuda-glass-search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="11" cy="11" r="8"/>
    <path d="m21 21-4.3-4.3"/>
  </svg>
  <input class="nuda-glass-search__input" type="text" placeholder="Search&hellip;" aria-label="Search" />
</div>

/* Glass Search Bar
   Frosted pill input with a lime focus glow.
   Customize: --glass-search-accent */

.nuda-glass-search {
  --glass-search-accent: #e4ff54;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nuda-glass-search:focus-within {
  border-color: rgba(228, 255, 84, 0.5);
  box-shadow: 0 0 18px rgba(228, 255, 84, 0.25);
}

.nuda-glass-search__icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: rgba(250, 250, 250, 0.5);
  transition: color 0.3s ease;
}

.nuda-glass-search:focus-within .nuda-glass-search__icon {
  color: var(--glass-search-accent);
}

.nuda-glass-search__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fafafa;
  font: 500 0.82rem ui-sans-serif, system-ui;
}

.nuda-glass-search__input::placeholder {
  color: rgba(250, 250, 250, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-glass-search,
  .nuda-glass-search__icon { transition: none; }
}