Newsletter Hero

<!-- Newsletter Hero -->
<section class="nuda-news">
  <h2>Get updates</h2>
  <form class="nuda-news__form" action="/subscribe" method="post">
    <input class="nuda-news__input" type="email" placeholder="email@you.dev" required />
    <button class="nuda-news__btn" type="submit" aria-label="Subscribe">→</button>
  </form>
  <span class="nuda-news__hint">No spam. Unsubscribe anytime.</span>
</section>

/* Newsletter Hero
   Headline + email form + reassurance line. Form border glows on focus.
   Customize: --news-accent */

.nuda-news {
  --news-accent: #e4ff54;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px;
  text-align: center;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.nuda-news h2 {
  font: 800 clamp(1.75rem, 4vw, 2.5rem) ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.nuda-news__form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 5px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.nuda-news__form:focus-within {
  border-color: rgba(228, 255, 84, 0.4);
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.1);
}

.nuda-news__input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fafafa;
  font: 500 0.95rem ui-sans-serif, system-ui, sans-serif;
  outline: none;
  padding: 8px 12px;
  min-width: 0;
}

.nuda-news__input::placeholder { color: #63636e; }

.nuda-news__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--news-accent);
  color: #09090b;
  border: none;
  border-radius: 7px;
  font: 700 1.1rem ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.nuda-news__btn:hover {
  transform: translateX(2px);
  box-shadow: 0 0 12px rgba(228, 255, 84, 0.4);
}

.nuda-news__hint {
  font: 500 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: #63636e;
}