.cf17 {
width: 100%;
padding: 56px 32px 22px;
background: #0c1014;
color: #c8cdd4;
font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
box-sizing: border-box;
}
.cf17top {
display: grid;
grid-template-columns: 1.5fr 3fr;
gap: 40px;
max-width: 1280px;
margin: 0 auto 36px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf17brand {
min-width: 0;
}
.cf17logo {
font:
800 24px/1 ui-sans-serif,
system-ui;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.cf17brand p {
margin: 0 0 18px;
font-size: 14px;
color: #8a93a0;
line-height: 1.5;
max-width: 320px;
}
.cf17nf {
display: flex;
gap: 6px;
margin-bottom: 18px;
max-width: 320px;
}
.cf17nf input {
flex: 1;
min-width: 0;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #fff;
font:
13px ui-sans-serif,
system-ui;
outline: none;
transition: border-color 0.2s;
}
.cf17nf input:focus {
border-color: #3b82f6;
}
.cf17nf button {
padding: 9px 14px;
background: #3b82f6;
border: 0;
border-radius: 6px;
color: #fff;
font:
600 12px ui-sans-serif,
system-ui;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
}
.cf17nf button:hover {
background: #2563eb;
}
.cf17social {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cf17social a {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: #c8cdd4;
text-decoration: none;
font-size: 14px;
transition:
background 0.2s,
color 0.2s;
}
.cf17social a:hover {
background: #3b82f6;
color: #fff;
}
.cf17cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
min-width: 0;
}
.cf17col {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
}
.cf17col h4 {
margin: 0 0 6px;
font:
600 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
}
.cf17col a {
font-size: 13px;
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.cf17col a:hover {
color: #fff;
}
.cf17badge {
display: inline-block;
padding: 1px 7px;
background: #3b82f6;
border-radius: 999px;
font:
700 10px/1.4 ui-sans-serif,
system-ui;
color: #fff;
}
.cf17bot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
max-width: 1280px;
margin: 0 auto 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.cf17trust {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cf17b1 {
padding: 5px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
font:
700 11px/1 ui-sans-serif,
system-ui;
color: #c8cdd4;
letter-spacing: 0.04em;
}
.cf17region {
display: flex;
align-items: center;
gap: 8px;
}
.cf17region select {
padding: 7px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #c8cdd4;
font:
12px ui-sans-serif,
system-ui;
cursor: pointer;
}
.cf17meta {
display: flex;
justify-content: space-between;
gap: 18px;
max-width: 1280px;
margin: 0 auto;
font-size: 12px;
color: #6a7280;
flex-wrap: wrap;
}
.cf17legal {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cf17legal a {
color: #8a93a0;
text-decoration: none;
transition: color 0.2s;
}
.cf17legal a:hover {
color: #fff;
}
@media (max-width: 880px) {
.cf17top {
grid-template-columns: 1fr;
}
.cf17cols {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.cf17cols {
grid-template-columns: 1fr;
}
} <footer class="cf17">
<div class="cf17top">
<div class="cf17brand">
<div class="cf17logo">▲ Helix</div>
<p>The composable infrastructure for modern teams.</p>
<form class="cf17nf">
<input type="email" placeholder="Email address" aria-label="Email" />
<button type="submit">Subscribe</button>
</form>
<div class="cf17social">
<a href="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="GitHub">◐</a>
<a href="#" aria-label="LinkedIn">in</a>
<a href="#" aria-label="YouTube">▶</a>
<a href="#" aria-label="Instagram">◉</a>
<a href="#" aria-label="Discord">⌬</a>
</div>
</div>
<div class="cf17cols">
<div class="cf17col">
<h4>Product</h4>
<a href="#">Overview</a>
<a href="#">Features</a>
<a href="#">Integrations</a>
<a href="#">Pricing</a>
<a href="#">Changelog</a>
<a href="#">Roadmap</a>
<a href="#">Status</a>
</div>
<div class="cf17col">
<h4>Solutions</h4>
<a href="#">Startups</a>
<a href="#">Enterprise</a>
<a href="#">Agencies</a>
<a href="#">Education</a>
<a href="#">Non-profits</a>
<a href="#">Developers</a>
</div>
<div class="cf17col">
<h4>Resources</h4>
<a href="#">Documentation</a>
<a href="#">API reference</a>
<a href="#">Guides</a>
<a href="#">Templates</a>
<a href="#">Customer stories</a>
<a href="#">Blog</a>
<a href="#">Webinars</a>
</div>
<div class="cf17col">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers <span class="cf17badge">12</span></a>
<a href="#">Press</a>
<a href="#">Contact</a>
<a href="#">Partners</a>
<a href="#">Investors</a>
</div>
</div>
</div>
<div class="cf17bot">
<div class="cf17trust">
<span class="cf17b1">SOC 2</span>
<span class="cf17b1">GDPR</span>
<span class="cf17b1">ISO 27001</span>
<span class="cf17b1">HIPAA</span>
</div>
<div class="cf17region">
<span>🌐</span>
<select aria-label="Region">
<option>United States</option>
<option>Europe</option>
<option>Asia Pacific</option>
</select>
</div>
</div>
<div class="cf17meta">
<span>© 2026 Helix Labs, Inc.</span>
<div class="cf17legal">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
<a href="#">Security</a>
<a href="#">DPA</a>
<a href="#">Sitemap</a>
</div>
</div>
</footer> Live preview Edit any tab — preview updates live Ready