Footer 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="footer_component">
  <nav class="footer_social">
    <p class="footer_social_kicker">Follow the journey</p>
    <div class="footer_social_row">
      <a class="footer_social_link" href="#">Instagram ↗</a>
      <a class="footer_social_link" href="#">LinkedIn ↗</a>
      <a class="footer_social_link" href="#">YouTube ↗</a>
      <a class="footer_social_link" href="#">Journal ↗</a>
    </div>
  </nav>
  <div class="footer_columns">
    <div class="footer_col">
      <h3 class="footer_col_title">Products</h3>
      <ul class="footer_col_list">
        <li class="footer_col_item">
          <a class="footer_link" href="#">Botanical Skincare</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Daily Supplements</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Herbal Teas</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Refill Program</a>
        </li>
      </ul>
    </div>
    <div class="footer_col">
      <h3 class="footer_col_title">Company</h3>
      <ul class="footer_col_list">
        <li class="footer_col_item">
          <a class="footer_link" href="#">Our Story</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Sustainability</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Ingredient Sourcing</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Careers</a>
        </li>
      </ul>
    </div>
    <div class="footer_col">
      <h3 class="footer_col_title">Support</h3>
      <ul class="footer_col_list">
        <li class="footer_col_item">
          <a class="footer_link" href="#">Shipping & Returns</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Track Your Order</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Contact Us</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="footer_col">
      <h3 class="footer_col_title">Resources</h3>
      <ul class="footer_col_list">
        <li class="footer_col_item">
          <a class="footer_link" href="#">The Field Journal</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Wellness Guides</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Impact Report 2026</a>
        </li>
        <li class="footer_col_item">
          <a class="footer_link" href="#">Affiliate Program</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer_cta">
    <div class="footer_brand">
      <h2 class="footer_logo">Everleaf</h2>
      <p class="footer_brand_line">Slow-crafted botanicals for a calmer, greener daily ritual. Join the list for seasonal drops and field notes.</p>
    </div>
    <form class="footer_subscribe">
      <input class="footer_input" />
      <button class="footer_button">Subscribe →</button>
    </form>
  </div>
  <div class="footer_base">
    <p class="footer_copy">© 2026 Everleaf Botanicals. Certified B Corporation. Made with care in Portland, OR.</p>
    <nav class="footer_legal">
      <a class="footer_legal_link" href="#">Privacy</a>
      <a class="footer_legal_link" href="#">Terms</a>
      <a class="footer_legal_link" href="#">Cookies</a>
    </nav>
  </div>
</section>

<style>
.footer_component {
  background:#07221d;
  color:#dce9df;
  padding:64px 6vw 40px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
  width:100%;
}

.footer_social {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:40px;
  border-bottom:1px solid #1c3b34;
}

.footer_social_kicker {
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#8fe388;
  margin:0;
  font-weight:500;
}

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

.footer_social_link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid #284b42;
  border-radius:999px;
  padding:10px 18px;
  font-size:15px;
  color:#dce9df;
  text-decoration:none;
  transition:background .25s,border-color .25s,color .25s;
}

.footer_columns {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:40px;
  padding:56px 0;
}

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

.footer_col_title {
  font-size:15px;
  font-weight:600;
  color:#8fe388;
  letter-spacing:0.04em;
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
}

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

.footer_col_item {
  margin:0;
}

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

.footer_cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background:#0c2c26;
  border:1px solid #1c3b34;
  border-radius:24px;
  padding:40px;
}

.footer_brand {
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:360px;
}

.footer_logo {
  font-size:30px;
  font-weight:400;
  color:#f2f7f2;
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:-0.01em;
}

.footer_brand_line {
  font-size:15px;
  line-height:1.5;
  color:#9db6a4;
  margin:0;
}

.footer_subscribe {
  display:flex;
  align-items:center;
  gap:8px;
  background:#07221d;
  border:1px solid #284b42;
  border-radius:999px;
  padding:6px 6px 6px 20px;
  min-width:320px;
}

.footer_input {
  flex:1;
  background:transparent;
  border:0;
  font-size:15px;
  color:#dce9df;
  outline:none;
  padding:10px 0;
  font-family:'Inter',system-ui,sans-serif;
}

.footer_button {
  border:0;
  border-radius:999px;
  background:#8fe388;
  color:#07221d;
  font-size:15px;
  font-weight:600;
  padding:12px 24px;
  cursor:pointer;
  transition:background .2s;
  font-family:'Inter',system-ui,sans-serif;
}

.footer_base {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:32px;
  margin-top:32px;
  border-top:1px solid #1c3b34;
}

.footer_copy {
  font-size:14px;
  color:#7f9986;
  margin:0;
}

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

.footer_legal_link {
  font-size:14px;
  color:#7f9986;
  text-decoration:none;
  transition:color .2s;
}
</style>