Footer 05

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<footer class="footer_component">
  <div class="footer_metabar">
    <p class="footer_metatag">N° 05 — FOOTER</p>
    <p class="footer_metacenter">STUDIO NORÉ / EST. 2019</p>
    <p class="footer_metaend">(C) 2026 — PAGE END</p>
  </div>
  <div class="footer_newsletter">
    <div class="footer_newsintro">
      <p class="footer_newsindex">01 — THE LIST</p>
      <h2 class="footer_newstitle">
        <span class="footer_newsaccent">first order in.</span>
      </h2>
    </div>
    <div class="footer_newsform">
      <div class="footer_inputrow">
        <input class="footer_input" />
        <button class="footer_submit">Subscribe</button>
      </div>
      <p class="footer_newsnote">New drops, restocks and members-only rates. No noise — unsubscribe anytime.</p>
    </div>
  </div>
  <div class="footer_grid">
    <div class="footer_brandcol">
      <h3 class="footer_wordmark">NORÉ.</h3>
      <p class="footer_brandline">Considered essentials, made in small runs. Shipped worldwide from Rotterdam.</p>
      <p class="footer_brandmeta">52° N — 4° E</p>
    </div>
    <nav class="footer_col">
      <p class="footer_colhead">Shop</p>
      <ul class="footer_list">
        <li class="footer_item">
          <a class="footer_link" href="#">New Arrivals</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Best Sellers</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Outerwear</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">The Archive Sale</a>
        </li>
      </ul>
    </nav>
    <nav class="footer_col">
      <p class="footer_colhead">Help</p>
      <ul class="footer_list">
        <li class="footer_item">
          <a class="footer_link" href="#">Shipping & Returns</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Size Guide</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Track Order</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Contact Support</a>
        </li>
      </ul>
    </nav>
    <nav class="footer_col">
      <p class="footer_colhead">Company</p>
      <ul class="footer_list">
        <li class="footer_item">
          <a class="footer_link" href="#">Our Story</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Sustainability</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Stockists</a>
        </li>
        <li class="footer_item">
          <a class="footer_link" href="#">Careers</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="footer_base">
    <div class="footer_legal">
      <p class="footer_copy">© 2026 Studio Noré B.V.</p>
      <a class="footer_legallink" href="#">Privacy</a>
      <a class="footer_legallink" href="#">Terms</a>
    </div>
    <div class="footer_pay">
      <p class="footer_paylabel">We accept</p>
      <div class="footer_badge">
        <p class="footer_badgetext">VISA</p>
      </div>
      <div class="footer_badge">
        <p class="footer_badgetext">MASTERCARD</p>
      </div>
      <div class="footer_badge">
        <p class="footer_badgetext">AMEX</p>
      </div>
      <div class="footer_badge">
        <p class="footer_badgetext">PAYPAL</p>
      </div>
      <div class="footer_badge">
        <p class="footer_badgetext">APPLE PAY</p>
      </div>
    </div>
  </div>
</footer>

<style>
.footer_component {
  background:#141414;
  color:#eae8e4;
  padding:64px 6vw 36px 6vw;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
  width:100%;
}

.footer_metabar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #2e2e2e;
  padding-bottom:18px;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a8681;
  gap:16px;
  flex-wrap:wrap;
}

.footer_metatag {
  color:#e63b2e;
  margin:0;
  font-weight:700;
}

.footer_metacenter {
  margin:0;
}

.footer_metaend {
  margin:0;
}

.footer_newsletter {
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:40px;
  align-items:end;
  padding:72px 0;
  border-bottom:1px solid #2e2e2e;
}

.footer_newsintro {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.footer_newsindex {
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a8681;
  margin:0;
}

.footer_newstitle {
  margin:0;
  font-weight:700;
  line-height:0.92;
  letter-spacing:-0.03em;
  font-size:clamp(40px,6vw,88px);
  font-family:'Helvetica Neue',Arial,sans-serif;
  color:#eae8e4;
}

.footer_newsaccent {
  color:#e63b2e;
}

.footer_newsform {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer_inputrow {
  display:flex;
  align-items:stretch;
  border:1px solid #3a3a3a;
  background:#1b1b1b;
}

.footer_input {
  flex:1;
  background:transparent;
  border:none;
  color:#eae8e4;
  padding:20px;
  font-size:15px;
  outline:none;
  font-family:inherit;
}

.footer_submit {
  background:#e63b2e;
  color:#141414;
  border:none;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:13px;
  padding:0 28px;
  cursor:pointer;
  font-family:inherit;
}

.footer_newsnote {
  font-size:12px;
  color:#8a8681;
  margin:0;
  line-height:1.5;
}

.footer_grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  padding:64px 0;
}

.footer_brandcol {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer_wordmark {
  margin:0;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#eae8e4;
}

.footer_brandline {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#8a8681;
  max-width:220px;
}

.footer_brandmeta {
  margin:0;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#e63b2e;
}

.footer_col {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer_colhead {
  margin:0;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#8a8681;
}

.footer_list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer_link {
  color:#eae8e4;
  text-decoration:none;
  font-size:15px;
  transition:color 0.2s;
}

.footer_base {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border-top:1px solid #2e2e2e;
  padding-top:28px;
  flex-wrap:wrap;
}

.footer_legal {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.footer_copy {
  margin:0;
  font-size:12px;
  color:#8a8681;
}

.footer_legallink {
  font-size:12px;
  color:#8a8681;
  text-decoration:none;
}

.footer_pay {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer_paylabel {
  margin:0 4px 0 0;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#8a8681;
}

.footer_badge {
  border:1px solid #3a3a3a;
  padding:7px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  color:#eae8e4;
}

.footer_badgetext {
  margin:0;
}
</style>