8 CSS Navbar Designs 05 / 08
Sticky CSS Navbar on Scroll
A sustainable lifestyle brand navbar UI that gracefully compresses on scroll — proving the right way to do scroll-transforming sticky navigation without janky reflow.
Best forsustainable brands, lifestyle e-commerce, editorial product sites, slow-content brands, marketing pages that need scroll-aware chrome.
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<section class="nb-stk" aria-label="Sylve sticky scroll navbar demo">
<div class="progress-bar" data-nb-stk-progress aria-hidden="true"></div>
<nav data-nb-stk-nav aria-label="Primary">
<div class="nav-inner">
<a href="#nb-stk-home" class="brand">
<span class="brand-main">Sylvé</span>
<span class="brand-sub">Sustainable Living</span>
</a>
<ul class="nav-links">
<li><a href="#nb-stk-home" class="active">Home</a></li>
<li><a href="#nb-stk-about">About</a></li>
<li><a href="#nb-stk-products">Products</a></li>
<li><a href="#nb-stk-journal">Journal</a></li>
<li><a href="#nb-stk-contact">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="btn-ghost" type="button">Log in</button>
<button class="btn-solid" type="button">Shop Now</button>
</div>
</div>
</nav>
<section class="hero" id="nb-stk-home">
<div class="hero-circle hc-1" aria-hidden="true"></div>
<div class="hero-circle hc-2" aria-hidden="true"></div>
<div class="hero-circle hc-3" aria-hidden="true"></div>
<div class="hero-circle hc-4" aria-hidden="true"></div>
<div class="hero-inner">
<p class="hero-eyebrow">New Collection 2026</p>
<h1>Living in<br>full <em>bloom</em></h1>
<p class="hero-body">Scroll down to watch the navbar gracefully compress and transform — growing more refined as you descend deeper into the page.</p>
<div class="hero-ctas">
<button class="cta-primary" type="button">Explore Collection</button>
<a href="#nb-stk-about" class="cta-secondary">
Learn more
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
<div class="scroll-hint" aria-hidden="true">
<div class="scroll-mouse"></div>
<span class="scroll-hint-text">Scroll to see nav transform</span>
</div>
</section>
<section class="section" id="nb-stk-about">
<div class="section-inner">
<p class="section-label">Our Philosophy</p>
<h2 class="section-title">Designed with the<br><em>earth in mind</em></h2>
<p class="section-body">Every product in our collection is crafted with deep respect for natural systems. We source exclusively from regenerative farms and artisan workshops that prioritize ecological balance over extraction.</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-num">01</div>
<div class="feature-title">Regenerative</div>
<div class="feature-text">All materials sourced from certified regenerative agriculture operations that actively restore soil biodiversity.</div>
</div>
<div class="feature-card">
<div class="feature-num">02</div>
<div class="feature-title">Zero-Waste</div>
<div class="feature-text">Our production process generates zero landfill waste. All offcuts are composted or repurposed into secondary goods.</div>
</div>
<div class="feature-card">
<div class="feature-num">03</div>
<div class="feature-title">Transparent</div>
<div class="feature-text">Every product includes a full supply chain trace, from seed to shelf, available in your account dashboard.</div>
</div>
</div>
</div>
</section>
<div class="divider-section" id="nb-stk-products">
<div class="section-inner divider-inner">
<h2>"The most sustainable product<br>is one that lasts a lifetime."</h2>
<button type="button">Browse All Products →</button>
</div>
</div>
<section class="section long-section" id="nb-stk-journal">
<div class="section-inner">
<p class="section-label">From the Journal</p>
<h2 class="section-title">Stories of<br><em>slow living</em></h2>
<p class="section-body">Reflections on seasonality, craft, ecology, and the small daily choices that accumulate into a life well-lived in relationship with the living world.</p>
</div>
</section>
<section class="section long-section" id="nb-stk-contact">
<div class="section-inner">
<p class="section-label">Get in Touch</p>
<h2 class="section-title">Let's grow<br><em>together</em></h2>
<p class="section-body">Whether you're a stockist, collaborator, or simply curious — we'd love to hear from you. Reach us at [email protected]</p>
</div>
</section>
</section> <section class="nb-stk" aria-label="Sylve sticky scroll navbar demo">
<div class="progress-bar" data-nb-stk-progress aria-hidden="true"></div>
<nav data-nb-stk-nav aria-label="Primary">
<div class="nav-inner">
<a href="#nb-stk-home" class="brand">
<span class="brand-main">Sylvé</span>
<span class="brand-sub">Sustainable Living</span>
</a>
<ul class="nav-links">
<li><a href="#nb-stk-home" class="active">Home</a></li>
<li><a href="#nb-stk-about">About</a></li>
<li><a href="#nb-stk-products">Products</a></li>
<li><a href="#nb-stk-journal">Journal</a></li>
<li><a href="#nb-stk-contact">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="btn-ghost" type="button">Log in</button>
<button class="btn-solid" type="button">Shop Now</button>
</div>
</div>
</nav>
<section class="hero" id="nb-stk-home">
<div class="hero-circle hc-1" aria-hidden="true"></div>
<div class="hero-circle hc-2" aria-hidden="true"></div>
<div class="hero-circle hc-3" aria-hidden="true"></div>
<div class="hero-circle hc-4" aria-hidden="true"></div>
<div class="hero-inner">
<p class="hero-eyebrow">New Collection 2026</p>
<h1>Living in<br>full <em>bloom</em></h1>
<p class="hero-body">Scroll down to watch the navbar gracefully compress and transform — growing more refined as you descend deeper into the page.</p>
<div class="hero-ctas">
<button class="cta-primary" type="button">Explore Collection</button>
<a href="#nb-stk-about" class="cta-secondary">
Learn more
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
<div class="scroll-hint" aria-hidden="true">
<div class="scroll-mouse"></div>
<span class="scroll-hint-text">Scroll to see nav transform</span>
</div>
</section>
<section class="section" id="nb-stk-about">
<div class="section-inner">
<p class="section-label">Our Philosophy</p>
<h2 class="section-title">Designed with the<br><em>earth in mind</em></h2>
<p class="section-body">Every product in our collection is crafted with deep respect for natural systems. We source exclusively from regenerative farms and artisan workshops that prioritize ecological balance over extraction.</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-num">01</div>
<div class="feature-title">Regenerative</div>
<div class="feature-text">All materials sourced from certified regenerative agriculture operations that actively restore soil biodiversity.</div>
</div>
<div class="feature-card">
<div class="feature-num">02</div>
<div class="feature-title">Zero-Waste</div>
<div class="feature-text">Our production process generates zero landfill waste. All offcuts are composted or repurposed into secondary goods.</div>
</div>
<div class="feature-card">
<div class="feature-num">03</div>
<div class="feature-title">Transparent</div>
<div class="feature-text">Every product includes a full supply chain trace, from seed to shelf, available in your account dashboard.</div>
</div>
</div>
</div>
</section>
<div class="divider-section" id="nb-stk-products">
<div class="section-inner divider-inner">
<h2>"The most sustainable product<br>is one that lasts a lifetime."</h2>
<button type="button">Browse All Products →</button>
</div>
</div>
<section class="section long-section" id="nb-stk-journal">
<div class="section-inner">
<p class="section-label">From the Journal</p>
<h2 class="section-title">Stories of<br><em>slow living</em></h2>
<p class="section-body">Reflections on seasonality, craft, ecology, and the small daily choices that accumulate into a life well-lived in relationship with the living world.</p>
</div>
</section>
<section class="section long-section" id="nb-stk-contact">
<div class="section-inner">
<p class="section-label">Get in Touch</p>
<h2 class="section-title">Let's grow<br><em>together</em></h2>
<p class="section-body">Whether you're a stockist, collaborator, or simply curious — we'd love to hear from you. Reach us at [email protected]</p>
</div>
</section>
</section>/* ─── 05 Sylvé — sticky scroll-transforming navbar UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,300;1,9..144,600&family=Mulish:wght@300;400;600&display=swap');
.nb-stk {
--nb-stk-sage: #3a5a40;
--nb-stk-sage-light: #4e7c57;
--nb-stk-sand: #f7f4ef;
--nb-stk-warm: #e8e0d0;
--nb-stk-warm-2: #d4c9b4;
--nb-stk-clay: #8b6f47;
--nb-stk-text: #1c2417;
--nb-stk-muted: #7a8c72;
--nb-stk-nav-h-tall: 96px;
--nb-stk-nav-h-short: 60px;
position: relative;
width: 100%;
min-height: 1800px;
background: var(--nb-stk-sand);
color: var(--nb-stk-text);
font-family: 'Mulish', sans-serif;
/* overflow:clip keeps horizontal escapes contained without
establishing a scrolling container — overflow:hidden would make
this wrapper the scrolling ancestor for the sticky nav and break
sticky behavior inside the iframe + gallery context. */
overflow: clip;
box-sizing: border-box;
scroll-behavior: smooth;
}
.nb-stk *, .nb-stk *::before, .nb-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nb-stk .progress-bar { position: absolute; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--nb-stk-sage), var(--nb-stk-clay)); z-index: 200; transform-origin: left; transform: scaleX(0); transition: transform 0.05s linear; border-radius: 0 2px 2px 0; width: 100%; }
.nb-stk nav { position: sticky; top: 0; left: 0; right: 0; z-index: 100; height: var(--nb-stk-nav-h-tall); background: transparent; transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease; }
.nb-stk nav.scrolled { height: var(--nb-stk-nav-h-short); background: rgba(247,244,239,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(58,90,64,0.1), 0 8px 32px rgba(28,36,23,0.06); }
.nb-stk .nav-inner { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; gap: 2rem; transition: padding 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk nav.scrolled .nav-inner { padding: 0 2rem; }
.nb-stk .brand { text-decoration: none; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.nb-stk .brand-main { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; color: var(--nb-stk-sage); line-height: 1; transition: font-size 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk .brand-sub { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-stk-muted); line-height: 1; margin-top: 3px; transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 20px; overflow: hidden; }
.nb-stk nav.scrolled .brand-main { font-size: 1.3rem; }
.nb-stk nav.scrolled .brand-sub { opacity: 0; max-height: 0; margin: 0; }
.nb-stk .nav-links { display: flex; align-items: center; list-style: none; gap: 0.25rem; flex: 1; justify-content: center; }
.nb-stk .nav-links a { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-muted); text-decoration: none; padding: 8px 14px; border-radius: 100px; transition: color 0.2s, background 0.2s; position: relative; }
.nb-stk .nav-links a:hover { color: var(--nb-stk-sage); background: rgba(58,90,64,0.06); }
.nb-stk .nav-links a.active { color: var(--nb-stk-sage); background: rgba(58,90,64,0.1); }
.nb-stk .nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nb-stk .btn-ghost { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sage); background: none; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.nb-stk .btn-ghost:hover { border-color: var(--nb-stk-sage); background: rgba(58,90,64,0.04); }
.nb-stk .btn-solid { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: 1.5px solid var(--nb-stk-sage); border-radius: 100px; padding: 8px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.nb-stk .btn-solid:hover { background: var(--nb-stk-sage-light); transform: translateY(-1px); }
.nb-stk .hero { min-height: 680px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 1rem; }
.nb-stk .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(58,90,64,0.06) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(139,111,71,0.06) 0%, transparent 50%); }
.nb-stk .hero-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.nb-stk .hc-1 { width: 500px; height: 500px; border: 1px solid rgba(58,90,64,0.1); top: 10%; right: -100px; }
.nb-stk .hc-2 { width: 300px; height: 300px; border: 1px solid rgba(58,90,64,0.08); top: 25%; right: 50px; }
.nb-stk .hc-3 { width: 40px; height: 40px; background: rgba(58,90,64,0.12); bottom: 30%; left: 10%; animation: nb-stk-float 8s ease-in-out infinite; }
.nb-stk .hc-4 { width: 16px; height: 16px; background: var(--nb-stk-clay); opacity: 0.3; top: 35%; left: 25%; animation: nb-stk-float 12s ease-in-out infinite reverse; border-radius: 50%; }
@keyframes nb-stk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.nb-stk .hero-inner { max-width: 1320px; margin: 0 auto; padding: 4rem 3rem; position: relative; z-index: 1; width: 100%; }
.nb-stk .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 2rem; }
.nb-stk .hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--nb-stk-clay); }
.nb-stk h1 { font-family: 'Fraunces', serif; font-size: clamp(4rem, 7vw, 8rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-stk-text); margin-bottom: 2rem; max-width: 14ch; }
.nb-stk h1 em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .hero-body { font-size: 1.05rem; color: var(--nb-stk-muted); line-height: 1.7; max-width: 42ch; margin-bottom: 2.5rem; }
.nb-stk .hero-ctas { display: flex; gap: 1rem; align-items: center; }
.nb-stk .cta-primary { font-family: 'Mulish', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: none; border-radius: 100px; padding: 14px 32px; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(58,90,64,0.3); }
.nb-stk .cta-primary:hover { background: var(--nb-stk-sage-light); transform: translateY(-2px); }
.nb-stk .cta-secondary { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--nb-stk-muted); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.nb-stk .cta-secondary:hover { color: var(--nb-stk-sage); gap: 12px; }
.nb-stk .section { padding: 8rem 0; }
.nb-stk .section-inner { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.nb-stk .section-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.nb-stk .section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--nb-stk-clay); }
.nb-stk .section-title { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--nb-stk-text); line-height: 1.1; margin-bottom: 1.5rem; }
.nb-stk .section-title em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .section-body { font-size: 1rem; color: var(--nb-stk-muted); max-width: 52ch; line-height: 1.75; }
.nb-stk .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin-top: 4rem; background: var(--nb-stk-warm-2); border: 1.5px solid var(--nb-stk-warm-2); }
.nb-stk .feature-card { background: var(--nb-stk-sand); padding: 2.5rem 2rem; transition: background 0.2s; }
.nb-stk .feature-card:hover { background: var(--nb-stk-warm); }
.nb-stk .feature-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: rgba(58,90,64,0.12); line-height: 1; margin-bottom: 1rem; }
.nb-stk .feature-title { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--nb-stk-text); margin-bottom: 0.75rem; }
.nb-stk .feature-text { font-size: 0.85rem; color: var(--nb-stk-muted); line-height: 1.65; }
.nb-stk .divider-section { background: var(--nb-stk-sage); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.nb-stk .divider-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px); }
.nb-stk .divider-inner { position: relative; z-index: 1; }
.nb-stk .divider-inner h2 { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; font-style: italic; color: rgba(247,244,239,0.95); line-height: 1.2; margin-bottom: 2rem; }
.nb-stk .divider-inner button { font-family: 'Mulish', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-stk-sage); background: var(--nb-stk-sand); border: none; border-radius: 100px; padding: 13px 30px; cursor: pointer; }
.nb-stk .long-section { padding: 6rem 0; border-top: 1px solid var(--nb-stk-warm-2); }
.nb-stk .scroll-hint { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--nb-stk-muted); z-index: 1; }
.nb-stk .scroll-hint-text { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.nb-stk .scroll-mouse { width: 22px; height: 34px; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.nb-stk .scroll-mouse::after { content: ''; width: 4px; height: 8px; background: var(--nb-stk-sage); border-radius: 2px; animation: nb-stk-scrollDot 1.8s ease-in-out infinite; }
@keyframes nb-stk-scrollDot { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.2; transform: translateY(6px); } }
@media (max-width: 768px) {
.nb-stk .feature-grid { grid-template-columns: 1fr; }
.nb-stk .hero-inner { padding: 3rem 1.5rem; }
.nb-stk .section-inner { padding: 0 1.5rem; }
.nb-stk .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nb-stk nav, .nb-stk .brand-main, .nb-stk .brand-sub, .nb-stk .hc-3, .nb-stk .hc-4, .nb-stk .scroll-mouse::after { animation: none !important; transition: none !important; }
} /* ─── 05 Sylvé — sticky scroll-transforming navbar UI ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,300;1,9..144,600&family=Mulish:wght@300;400;600&display=swap');
.nb-stk {
--nb-stk-sage: #3a5a40;
--nb-stk-sage-light: #4e7c57;
--nb-stk-sand: #f7f4ef;
--nb-stk-warm: #e8e0d0;
--nb-stk-warm-2: #d4c9b4;
--nb-stk-clay: #8b6f47;
--nb-stk-text: #1c2417;
--nb-stk-muted: #7a8c72;
--nb-stk-nav-h-tall: 96px;
--nb-stk-nav-h-short: 60px;
position: relative;
width: 100%;
min-height: 1800px;
background: var(--nb-stk-sand);
color: var(--nb-stk-text);
font-family: 'Mulish', sans-serif;
/* overflow:clip keeps horizontal escapes contained without
establishing a scrolling container — overflow:hidden would make
this wrapper the scrolling ancestor for the sticky nav and break
sticky behavior inside the iframe + gallery context. */
overflow: clip;
box-sizing: border-box;
scroll-behavior: smooth;
}
.nb-stk *, .nb-stk *::before, .nb-stk *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nb-stk .progress-bar { position: absolute; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--nb-stk-sage), var(--nb-stk-clay)); z-index: 200; transform-origin: left; transform: scaleX(0); transition: transform 0.05s linear; border-radius: 0 2px 2px 0; width: 100%; }
.nb-stk nav { position: sticky; top: 0; left: 0; right: 0; z-index: 100; height: var(--nb-stk-nav-h-tall); background: transparent; transition: height 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease; }
.nb-stk nav.scrolled { height: var(--nb-stk-nav-h-short); background: rgba(247,244,239,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(58,90,64,0.1), 0 8px 32px rgba(28,36,23,0.06); }
.nb-stk .nav-inner { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; padding: 0 3rem; gap: 2rem; transition: padding 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk nav.scrolled .nav-inner { padding: 0 2rem; }
.nb-stk .brand { text-decoration: none; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; }
.nb-stk .brand-main { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; color: var(--nb-stk-sage); line-height: 1; transition: font-size 0.4s cubic-bezier(0.4,0,0.2,1); }
.nb-stk .brand-sub { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-stk-muted); line-height: 1; margin-top: 3px; transition: opacity 0.3s, max-height 0.3s, margin 0.3s; max-height: 20px; overflow: hidden; }
.nb-stk nav.scrolled .brand-main { font-size: 1.3rem; }
.nb-stk nav.scrolled .brand-sub { opacity: 0; max-height: 0; margin: 0; }
.nb-stk .nav-links { display: flex; align-items: center; list-style: none; gap: 0.25rem; flex: 1; justify-content: center; }
.nb-stk .nav-links a { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-muted); text-decoration: none; padding: 8px 14px; border-radius: 100px; transition: color 0.2s, background 0.2s; position: relative; }
.nb-stk .nav-links a:hover { color: var(--nb-stk-sage); background: rgba(58,90,64,0.06); }
.nb-stk .nav-links a.active { color: var(--nb-stk-sage); background: rgba(58,90,64,0.1); }
.nb-stk .nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nb-stk .btn-ghost { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sage); background: none; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.nb-stk .btn-ghost:hover { border-color: var(--nb-stk-sage); background: rgba(58,90,64,0.04); }
.nb-stk .btn-solid { font-family: 'Mulish', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: 1.5px solid var(--nb-stk-sage); border-radius: 100px; padding: 8px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.nb-stk .btn-solid:hover { background: var(--nb-stk-sage-light); transform: translateY(-1px); }
.nb-stk .hero { min-height: 680px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 1rem; }
.nb-stk .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(58,90,64,0.06) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(139,111,71,0.06) 0%, transparent 50%); }
.nb-stk .hero-circle { position: absolute; border-radius: 50%; pointer-events: none; }
.nb-stk .hc-1 { width: 500px; height: 500px; border: 1px solid rgba(58,90,64,0.1); top: 10%; right: -100px; }
.nb-stk .hc-2 { width: 300px; height: 300px; border: 1px solid rgba(58,90,64,0.08); top: 25%; right: 50px; }
.nb-stk .hc-3 { width: 40px; height: 40px; background: rgba(58,90,64,0.12); bottom: 30%; left: 10%; animation: nb-stk-float 8s ease-in-out infinite; }
.nb-stk .hc-4 { width: 16px; height: 16px; background: var(--nb-stk-clay); opacity: 0.3; top: 35%; left: 25%; animation: nb-stk-float 12s ease-in-out infinite reverse; border-radius: 50%; }
@keyframes nb-stk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.nb-stk .hero-inner { max-width: 1320px; margin: 0 auto; padding: 4rem 3rem; position: relative; z-index: 1; width: 100%; }
.nb-stk .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 2rem; }
.nb-stk .hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--nb-stk-clay); }
.nb-stk h1 { font-family: 'Fraunces', serif; font-size: clamp(4rem, 7vw, 8rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-stk-text); margin-bottom: 2rem; max-width: 14ch; }
.nb-stk h1 em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .hero-body { font-size: 1.05rem; color: var(--nb-stk-muted); line-height: 1.7; max-width: 42ch; margin-bottom: 2.5rem; }
.nb-stk .hero-ctas { display: flex; gap: 1rem; align-items: center; }
.nb-stk .cta-primary { font-family: 'Mulish', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-stk-sand); background: var(--nb-stk-sage); border: none; border-radius: 100px; padding: 14px 32px; cursor: pointer; transition: background 0.2s, transform 0.15s; box-shadow: 0 4px 24px rgba(58,90,64,0.3); }
.nb-stk .cta-primary:hover { background: var(--nb-stk-sage-light); transform: translateY(-2px); }
.nb-stk .cta-secondary { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--nb-stk-muted); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.nb-stk .cta-secondary:hover { color: var(--nb-stk-sage); gap: 12px; }
.nb-stk .section { padding: 8rem 0; }
.nb-stk .section-inner { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.nb-stk .section-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-stk-clay); margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.nb-stk .section-label::after { content: ''; flex: 1; max-width: 40px; height: 1px; background: var(--nb-stk-clay); }
.nb-stk .section-title { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--nb-stk-text); line-height: 1.1; margin-bottom: 1.5rem; }
.nb-stk .section-title em { font-style: italic; color: var(--nb-stk-sage); }
.nb-stk .section-body { font-size: 1rem; color: var(--nb-stk-muted); max-width: 52ch; line-height: 1.75; }
.nb-stk .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin-top: 4rem; background: var(--nb-stk-warm-2); border: 1.5px solid var(--nb-stk-warm-2); }
.nb-stk .feature-card { background: var(--nb-stk-sand); padding: 2.5rem 2rem; transition: background 0.2s; }
.nb-stk .feature-card:hover { background: var(--nb-stk-warm); }
.nb-stk .feature-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: rgba(58,90,64,0.12); line-height: 1; margin-bottom: 1rem; }
.nb-stk .feature-title { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--nb-stk-text); margin-bottom: 0.75rem; }
.nb-stk .feature-text { font-size: 0.85rem; color: var(--nb-stk-muted); line-height: 1.65; }
.nb-stk .divider-section { background: var(--nb-stk-sage); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.nb-stk .divider-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px); }
.nb-stk .divider-inner { position: relative; z-index: 1; }
.nb-stk .divider-inner h2 { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; font-style: italic; color: rgba(247,244,239,0.95); line-height: 1.2; margin-bottom: 2rem; }
.nb-stk .divider-inner button { font-family: 'Mulish', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-stk-sage); background: var(--nb-stk-sand); border: none; border-radius: 100px; padding: 13px 30px; cursor: pointer; }
.nb-stk .long-section { padding: 6rem 0; border-top: 1px solid var(--nb-stk-warm-2); }
.nb-stk .scroll-hint { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--nb-stk-muted); z-index: 1; }
.nb-stk .scroll-hint-text { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.nb-stk .scroll-mouse { width: 22px; height: 34px; border: 1.5px solid var(--nb-stk-warm-2); border-radius: 12px; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.nb-stk .scroll-mouse::after { content: ''; width: 4px; height: 8px; background: var(--nb-stk-sage); border-radius: 2px; animation: nb-stk-scrollDot 1.8s ease-in-out infinite; }
@keyframes nb-stk-scrollDot { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.2; transform: translateY(6px); } }
@media (max-width: 768px) {
.nb-stk .feature-grid { grid-template-columns: 1fr; }
.nb-stk .hero-inner { padding: 3rem 1.5rem; }
.nb-stk .section-inner { padding: 0 1.5rem; }
.nb-stk .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nb-stk nav, .nb-stk .brand-main, .nb-stk .brand-sub, .nb-stk .hc-3, .nb-stk .hc-4, .nb-stk .scroll-mouse::after { animation: none !important; transition: none !important; }
}(() => {
// Scoped sticky-scroll navbar wiring. The source mock bound a
// `window.scroll` listener and read documentElement.scrollTop —
// that would track the host gallery's scroll. Re-scope: use a
// sentinel `hero` element to toggle the .scrolled class via
// IntersectionObserver (fires when the hero top passes 60px below
// the viewport top), and compute reading progress from the wrapper's
// own bounding rect against the viewport.
const root = document.querySelector('.nb-stk');
if (!root) return;
const nav = root.querySelector('[data-nb-stk-nav]');
const progress = root.querySelector('[data-nb-stk-progress]');
const hero = root.querySelector('.hero');
if (!nav || !progress) return;
// Toggle .scrolled when the hero crosses 60px below the viewport top.
if (hero && 'IntersectionObserver' in window) {
const io = new IntersectionObserver(
([entry]) => {
// entry.boundingClientRect.top < -60 means the hero has scrolled
// up past the threshold. We rely on entry.isIntersecting plus
// the sentinel offset.
const top = entry.boundingClientRect.top;
nav.classList.toggle('scrolled', top < -60);
},
{ threshold: [0], rootMargin: '-60px 0px 0px 0px' }
);
io.observe(hero);
}
function updateProgress() {
const r = root.getBoundingClientRect();
const vh = window.innerHeight;
const total = root.offsetHeight - vh;
if (total <= 0) { progress.style.transform = 'scaleX(0)'; return; }
const scrolled = Math.min(Math.max(-r.top, 0), total);
const pct = scrolled / total;
progress.style.transform = 'scaleX(' + pct.toFixed(4) + ')';
}
window.addEventListener('scroll', updateProgress, { passive: true });
window.addEventListener('resize', updateProgress);
updateProgress();
// Smooth scroll for in-page anchors.
root.querySelectorAll('.nav-links a').forEach((a) => {
a.addEventListener('click', (e) => {
const href = a.getAttribute('href');
if (!href || !href.startsWith('#')) return;
const target = root.querySelector(href);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
root.querySelectorAll('.nav-links a').forEach((l) => l.classList.remove('active'));
a.classList.add('active');
});
});
})(); (() => {
// Scoped sticky-scroll navbar wiring. The source mock bound a
// `window.scroll` listener and read documentElement.scrollTop —
// that would track the host gallery's scroll. Re-scope: use a
// sentinel `hero` element to toggle the .scrolled class via
// IntersectionObserver (fires when the hero top passes 60px below
// the viewport top), and compute reading progress from the wrapper's
// own bounding rect against the viewport.
const root = document.querySelector('.nb-stk');
if (!root) return;
const nav = root.querySelector('[data-nb-stk-nav]');
const progress = root.querySelector('[data-nb-stk-progress]');
const hero = root.querySelector('.hero');
if (!nav || !progress) return;
// Toggle .scrolled when the hero crosses 60px below the viewport top.
if (hero && 'IntersectionObserver' in window) {
const io = new IntersectionObserver(
([entry]) => {
// entry.boundingClientRect.top < -60 means the hero has scrolled
// up past the threshold. We rely on entry.isIntersecting plus
// the sentinel offset.
const top = entry.boundingClientRect.top;
nav.classList.toggle('scrolled', top < -60);
},
{ threshold: [0], rootMargin: '-60px 0px 0px 0px' }
);
io.observe(hero);
}
function updateProgress() {
const r = root.getBoundingClientRect();
const vh = window.innerHeight;
const total = root.offsetHeight - vh;
if (total <= 0) { progress.style.transform = 'scaleX(0)'; return; }
const scrolled = Math.min(Math.max(-r.top, 0), total);
const pct = scrolled / total;
progress.style.transform = 'scaleX(' + pct.toFixed(4) + ')';
}
window.addEventListener('scroll', updateProgress, { passive: true });
window.addEventListener('resize', updateProgress);
updateProgress();
// Smooth scroll for in-page anchors.
root.querySelectorAll('.nav-links a').forEach((a) => {
a.addEventListener('click', (e) => {
const href = a.getAttribute('href');
if (!href || !href.startsWith('#')) return;
const target = root.querySelector(href);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
root.querySelectorAll('.nav-links a').forEach((l) => l.classList.remove('active'));
a.classList.add('active');
});
});
})();