Bootstrap 5 Footer for Vanilla JS — Glassmorphism

<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<footer class="mt-5 glass">
  <div class="mw-6xl mx-auto px-4 py-5 row row-cols-1 row-cols-md-4 g-5">
    <div class="col">
      <p class="fs-5 fw-bold text-body-emphasis">◆ Acme</p>
      <p class="mt-2 small text-body-secondary">Tools for teams that ship.</p>
    </div>
    <div class="col">
      <h3 class="small fw-semibold text-uppercase text-body-emphasis">Product</h3>
      <ul class="list-unstyled mt-2 d-flex flex-column gap-2">
        <li><a href="#" class="small text-decoration-none text-body-secondary">Features</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Pricing</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Changelog</a></li>
      </ul>
    </div>
    <div class="col">
      <h3 class="small fw-semibold text-uppercase text-body-emphasis">Company</h3>
      <ul class="list-unstyled mt-2 d-flex flex-column gap-2">
        <li><a href="#" class="small text-decoration-none text-body-secondary">About</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Careers</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Blog</a></li>
      </ul>
    </div>
    <div class="col">
      <h3 class="small fw-semibold text-uppercase text-body-emphasis">Resources</h3>
      <ul class="list-unstyled mt-2 d-flex flex-column gap-2">
        <li><a href="#" class="small text-decoration-none text-body-secondary">Docs</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Guides</a></li>
        <li><a href="#" class="small text-decoration-none text-body-secondary">Support</a></li>
      </ul>
    </div>
  </div>
  <div class="border-top">
    <div class="mw-6xl mx-auto px-4 py-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
      <p class="small text-body-secondary">© 2026 Acme Inc. All rights reserved.</p>
      <form class="d-flex align-items-center gap-2">
        <label for="ft-email" class="small text-body-secondary">Newsletter</label>
        <input id="ft-email" type="email" placeholder="you@company.com" class="form-control rounded-2">
        <button type="submit" class="btn btn-brand fw-semibold rounded-2">Subscribe</button>
      </form>
    </div>
  </div>
</footer>

/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
  --bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
.glass { background: rgba(255, 255, 255, .6) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .6) !important; }
[data-bs-theme="dark"] .glass, [data-bs-theme="dark"].glass { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .1) !important; }
.bg-glass-page { background: linear-gradient(135deg, #e0e7ff, #f0f9ff, #ffe4e6); }
[data-bs-theme="dark"] .bg-glass-page, [data-bs-theme="dark"].bg-glass-page { background: linear-gradient(135deg, #020617, #1e1b4b, #0f172a); }