Footer 04

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="footer_component">
  <div class="footer_glow"></div>
  <div class="footer_inner">
    <div class="footer_top">
      <div class="footer_eyebrow">
        <div class="footer_dot"></div>
        <p class="footer_eyebrow_text">Booking projects for Q3 2026</p>
      </div>
      <h2 class="footer_headline">Let's talk about something big.</h2>
      <p class="footer_sub">Drop your email and tell us what you're building. We reply to every note within a day — no bots, no forms with twelve fields.</p>
      <form class="footer_pill">
        <input class="footer_input" />
        <button class="footer_submit">Say hello →</button>
      </form>
    </div>
    <div class="footer_chips">
      <a class="footer_chip" href="#work">See the work</a>
      <a class="footer_chip" href="#instagram">Instagram</a>
      <a class="footer_chip" href="#linkedin">LinkedIn</a>
      <a class="footer_chip" href="#dribbble">Dribbble</a>
    </div>
    <div class="footer_divider"></div>
    <div class="footer_legal">
      <div class="footer_brand">
        <div class="footer_mark">P</div>
        <p class="footer_brand_name">Peachy Studio</p>
      </div>
      <nav class="footer_nav">
        <a class="footer_nav_link" href="#privacy">Privacy</a>
        <a class="footer_nav_link" href="#terms">Terms</a>
        <a class="footer_nav_link" href="#cookies">Cookies</a>
      </nav>
      <p class="footer_copy">© 2026 Peachy Studio. Made with too much coffee.</p>
    </div>
  </div>
</section>

<style>
.footer_component {
  position:relative;
  width:100%;
  background:#fdf8f0;
  color:#1a1714;
  padding:5rem 1.5rem;
  overflow:hidden;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  box-sizing:border-box;
}

.footer_glow {
  pointer-events:none;
  position:absolute;
  top:-10rem;
  right:-10rem;
  width:520px;
  height:520px;
  border-radius:9999px;
  background:#ff5a5f;
  opacity:0.14;
  filter:blur(120px);
}

.footer_inner {
  position:relative;
  z-10;
  margin:0 auto;
  display:flex;
  width:100%;
  max-width:1200px;
  flex-direction:column;
  gap:4rem;
  z-index:10;
}

.footer_top {
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}

.footer_eyebrow {
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:0.5rem;
  border-radius:9999px;
  background:#1a1714;
  padding:0.5rem 1rem;
  font-size:13px;
  font-weight:600;
  color:#fdf8f0;
  letter-spacing:0.01em;
}

.footer_dot {
  width:8px;
  height:8px;
  border-radius:9999px;
  background:#ff5a5f;
}

.footer_eyebrow_text {
  margin:0;
}

.footer_headline {
  margin:0;
  max-width:14ch;
  font-size:clamp(3rem,10vw,8rem);
  font-weight:800;
  line-height:0.92;
  letter-spacing:-0.03em;
}

.footer_sub {
  margin:0;
  max-width:46ch;
  font-size:clamp(1rem,2vw,1.25rem);
  font-weight:500;
  color:#5a534c;
  line-height:1.5;
}

.footer_pill {
  display:flex;
  width:100%;
  max-width:560px;
  flex-direction:row;
  align-items:center;
  gap:0.75rem;
  border-radius:9999px;
  background:#ffffff;
  padding:0.75rem;
  box-shadow:0 20px 60px -20px rgba(26,23,20,0.25);
  border:1px solid #f0e8db;
}

.footer_input {
  width:100%;
  flex:1;
  border:none;
  background:transparent;
  padding:1rem 1.25rem;
  font-size:16px;
  font-weight:500;
  color:#1a1714;
  outline:none;
  font-family:inherit;
}

.footer_submit {
  flex-shrink:0;
  border:none;
  border-radius:9999px;
  background:#ff5a5f;
  padding:1rem 2rem;
  font-size:16px;
  font-weight:700;
  color:#ffffff;
  cursor:pointer;
  transition:transform 0.18s ease;
  font-family:inherit;
  white-space:nowrap;
}

.footer_chips {
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}

.footer_chip {
  display:inline-block;
  border:1px solid #e3d9c9;
  border-radius:9999px;
  padding:0.625rem 1.25rem;
  font-size:14px;
  font-weight:600;
  color:#1a1714;
  text-decoration:none;
  transition:background 0.18s ease,color 0.18s ease;
}

.footer_divider {
  height:1px;
  width:100%;
  background:#e8dfce;
}

.footer_legal {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}

.footer_brand {
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.footer_mark {
  display:flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#ff5a5f;
  font-size:16px;
  font-weight:800;
  color:#ffffff;
}

.footer_brand_name {
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#1a1714;
}

.footer_nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem 1.5rem;
}

.footer_nav_link {
  font-size:14px;
  font-weight:500;
  color:#5a534c;
  text-decoration:none;
  transition:color 0.18s ease;
}

.footer_copy {
  margin:0;
  font-size:14px;
  font-weight:500;
  color:#a89f94;
}
</style>