Navbar 04

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<nav class="navbar_component">
  <a class="navbar_brand" href="#">
    <div class="navbar_mark">◈</div>
    <p class="navbar_wordmark">Verdant</p>
  </a>
  <ul class="navbar_links">
    <li class="navbar_item">
      <a class="navbar_link" href="#">Philosophy</a>
    </li>
    <li class="navbar_item">
      <a class="navbar_link" href="#">Sourcing</a>
    </li>
    <li class="navbar_item">
      <a class="navbar_link" href="#">Journal</a>
    </li>
    <li class="navbar_item">
      <a class="navbar_link" href="#">Impact</a>
    </li>
  </ul>
  <div class="navbar_actions">
    <a class="navbar_signin" href="#">Sign in</a>
    <a class="navbar_cta" href="#">Start free</a>
    <button class="navbar_toggle">≡</button>
  </div>
  <ul class="navbar_mobile">
    <li class="navbar_mobileitem">
      <a class="navbar_mobilelink" href="#">Philosophy</a>
    </li>
    <li class="navbar_mobileitem">
      <a class="navbar_mobilelink" href="#">Sourcing</a>
    </li>
    <li class="navbar_mobileitem">
      <a class="navbar_mobilelink" href="#">Journal</a>
    </li>
    <li class="navbar_mobileitem">
      <a class="navbar_mobilelink" href="#">Impact</a>
    </li>
  </ul>
</nav>

<style>
.navbar_component {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  box-sizing:border-box;
  width:min(1180px,92vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 24px;
  border-radius:999px;
  background:rgba(7,34,29,0.7);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(143,227,136,0.15);
  box-shadow:0 18px 50px -20px rgba(0,0,0,0.7);
  font-family:Georgia,'Times New Roman',serif;
}

.navbar_brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}

.navbar_mark {
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#8fe388;
  color:#07221d;
  font-family:Georgia,serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.navbar_wordmark {
  margin:0;
  color:#f3f7f2;
  font-family:Georgia,'Times New Roman',serif;
  font-size:21px;
  letter-spacing:-0.3px;
  font-weight:400;
}

.navbar_links {
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
}

.navbar_link {
  color:#c5d8c8;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  letter-spacing:0.2px;
  text-decoration:none;
  transition:color 0.25s ease;
}

.navbar_actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.navbar_signin {
  display:inline-block;
  color:#c5d8c8;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  text-decoration:none;
  transition:color 0.25s ease;
}

.navbar_cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  background:#8fe388;
  color:#07221d;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background 0.25s ease,transform 0.25s ease;
  box-shadow:0 8px 24px -8px rgba(143,227,136,0.6);
}

.navbar_toggle {
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(143,227,136,0.2);
  color:#8fe388;
  font-size:18px;
  cursor:pointer;
}

.navbar_mobile {
  display:none;
  position:absolute;
  top:72px;
  left:0;
  width:100%;
  box-sizing:border-box;
  flex-direction:column;
  gap:4px;
  padding:16px;
  border-radius:24px;
  background:rgba(7,34,29,0.96);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(143,227,136,0.15);
  list-style:none;
  margin:0;
}

.navbar_mobilelink {
  display:block;
  padding:12px 16px;
  color:#c5d8c8;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:16px;
  text-decoration:none;
  border-radius:16px;
}
</style>