8 CSS Navbar Designs 06 / 08
Full Screen Overlay CSS Menu
A creative-agency full-screen overlay menu navbar UI for Kairos/Studio — proving that hamburger nav can be the headline interaction instead of an afterthought.
Best forcreative agency sites, design studios, motion/portfolio brands, asymmetric editorial sites, full-bleed creative landings.
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-ovl" aria-label="Kairos Studio fullscreen overlay menu demo">
<div class="overlay" data-nb-ovl-overlay aria-hidden="true">
<div class="overlay-panel" aria-hidden="true"></div>
<div class="overlay-panel overlay-panel-2" aria-hidden="true"></div>
<div class="overlay-content">
<nav class="overlay-nav" aria-label="Overlay menu">
<div class="overlay-counter">NAVIGATION — 05 LINKS</div>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">01</span>
<span class="item-label">Work</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">02</span>
<span class="item-label">Studio</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">03</span>
<span class="item-label">Services</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">04</span>
<span class="item-label">Journal</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">05</span>
<span class="item-label">Contact</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
</nav>
<aside class="overlay-sidebar">
<div>
<div class="sidebar-block">
<div class="sidebar-label">Selected Work</div>
<a href="#" class="sidebar-link">Brand Identity, Oasis Collective</a>
<a href="#" class="sidebar-link">Motion Design, Volta Studio</a>
<a href="#" class="sidebar-link">Web Design, Meridian Labs</a>
<a href="#" class="sidebar-link">Campaign, Norda Athletics</a>
</div>
</div>
<div>
<div class="sidebar-block">
<div class="sidebar-label">Currently</div>
<div class="sidebar-status">
<div class="status-dot" aria-hidden="true"></div>
Available for projects — Q3 2026
</div>
</div>
<div class="sidebar-block sidebar-block-spaced">
<div class="sidebar-label">Follow</div>
<div class="sidebar-social">
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">Instagram</a>
<a href="#" class="social-link">Dribbble</a>
<a href="#" class="social-link">LinkedIn</a>
</div>
</div>
</div>
</aside>
</div>
</div>
<header>
<a href="#" class="brand">Kairos<span class="slash">/</span>Studio</a>
<div class="header-spacer"></div>
<button class="menu-btn" type="button" data-nb-ovl-toggle aria-label="Open menu" aria-expanded="false">
<span class="menu-line l1" aria-hidden="true"></span>
<span class="menu-line l2" aria-hidden="true"></span>
<span class="menu-line l3" aria-hidden="true"></span>
</button>
</header>
<div class="page">
<div class="bg-text" aria-hidden="true">KAIROS</div>
<div class="corner-deco" aria-hidden="true">
DESIGN STUDIO<br>
EST. 2019<br>
BERLIN — NYC
</div>
<div class="grid-deco" data-nb-ovl-dotgrid aria-hidden="true"></div>
<div class="hero-content">
<div class="hero-caption">
<div>
<div class="h-eyebrow">
<div class="h-eyebrow-line" aria-hidden="true"></div>
<div class="h-eyebrow-text">Selected work — 2026</div>
</div>
<h1 class="h-title">We craft<br>the un<span class="accent">usual.</span></h1>
</div>
<div class="h-right">
<p class="h-desc">Click the hamburger above to trigger a full-screen overlay — bold typography slides in with staggered reveals and the menu becomes the moment.</p>
<button class="h-cta" type="button" data-nb-ovl-open>
Open the menu
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</button>
</div>
</div>
</div>
</div>
</section> <section class="nb-ovl" aria-label="Kairos Studio fullscreen overlay menu demo">
<div class="overlay" data-nb-ovl-overlay aria-hidden="true">
<div class="overlay-panel" aria-hidden="true"></div>
<div class="overlay-panel overlay-panel-2" aria-hidden="true"></div>
<div class="overlay-content">
<nav class="overlay-nav" aria-label="Overlay menu">
<div class="overlay-counter">NAVIGATION — 05 LINKS</div>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">01</span>
<span class="item-label">Work</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">02</span>
<span class="item-label">Studio</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">03</span>
<span class="item-label">Services</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">04</span>
<span class="item-label">Journal</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
<a href="#" class="menu-item" data-nb-ovl-link>
<span class="item-line" aria-hidden="true"></span>
<span class="menu-item-inner">
<span class="item-num">05</span>
<span class="item-label">Contact</span>
<span class="item-arrow" aria-hidden="true">→</span>
</span>
</a>
</nav>
<aside class="overlay-sidebar">
<div>
<div class="sidebar-block">
<div class="sidebar-label">Selected Work</div>
<a href="#" class="sidebar-link">Brand Identity, Oasis Collective</a>
<a href="#" class="sidebar-link">Motion Design, Volta Studio</a>
<a href="#" class="sidebar-link">Web Design, Meridian Labs</a>
<a href="#" class="sidebar-link">Campaign, Norda Athletics</a>
</div>
</div>
<div>
<div class="sidebar-block">
<div class="sidebar-label">Currently</div>
<div class="sidebar-status">
<div class="status-dot" aria-hidden="true"></div>
Available for projects — Q3 2026
</div>
</div>
<div class="sidebar-block sidebar-block-spaced">
<div class="sidebar-label">Follow</div>
<div class="sidebar-social">
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">Instagram</a>
<a href="#" class="social-link">Dribbble</a>
<a href="#" class="social-link">LinkedIn</a>
</div>
</div>
</div>
</aside>
</div>
</div>
<header>
<a href="#" class="brand">Kairos<span class="slash">/</span>Studio</a>
<div class="header-spacer"></div>
<button class="menu-btn" type="button" data-nb-ovl-toggle aria-label="Open menu" aria-expanded="false">
<span class="menu-line l1" aria-hidden="true"></span>
<span class="menu-line l2" aria-hidden="true"></span>
<span class="menu-line l3" aria-hidden="true"></span>
</button>
</header>
<div class="page">
<div class="bg-text" aria-hidden="true">KAIROS</div>
<div class="corner-deco" aria-hidden="true">
DESIGN STUDIO<br>
EST. 2019<br>
BERLIN — NYC
</div>
<div class="grid-deco" data-nb-ovl-dotgrid aria-hidden="true"></div>
<div class="hero-content">
<div class="hero-caption">
<div>
<div class="h-eyebrow">
<div class="h-eyebrow-line" aria-hidden="true"></div>
<div class="h-eyebrow-text">Selected work — 2026</div>
</div>
<h1 class="h-title">We craft<br>the un<span class="accent">usual.</span></h1>
</div>
<div class="h-right">
<p class="h-desc">Click the hamburger above to trigger a full-screen overlay — bold typography slides in with staggered reveals and the menu becomes the moment.</p>
<button class="h-cta" type="button" data-nb-ovl-open>
Open the menu
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</button>
</div>
</div>
</div>
</div>
</section>/* ─── 06 Kairos/Studio — fullscreen overlay menu navbar UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;1,400&display=swap');
.nb-ovl {
--nb-ovl-void: #09090b;
--nb-ovl-lime: #c8f135;
--nb-ovl-lime-dim: #9bb822;
--nb-ovl-off-white: #f0efeb;
--nb-ovl-warm-grey: #a09fa0;
--nb-ovl-border: rgba(240,239,235,0.1);
position: relative;
width: 100%;
min-height: 720px;
background: var(--nb-ovl-void);
color: var(--nb-ovl-off-white);
font-family: 'Outfit', sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.nb-ovl *, .nb-ovl *::before, .nb-ovl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nb-ovl header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; padding: 1.5rem 2.5rem; display: flex; align-items: center; mix-blend-mode: difference; }
.nb-ovl .brand { font-family: 'Space Mono', monospace; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; color: var(--nb-ovl-off-white); text-decoration: none; z-index: 10; position: relative; }
.nb-ovl .brand .slash { color: var(--nb-ovl-lime); margin: 0 2px; }
.nb-ovl .header-spacer { flex: 1; }
.nb-ovl .menu-btn { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 0; align-items: flex-end; z-index: 300; position: relative; }
.nb-ovl .menu-line { display: block; height: 1.5px; background: var(--nb-ovl-off-white); border-radius: 1px; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), width 0.3s ease, opacity 0.2s; }
.nb-ovl .l1 { width: 28px; margin-bottom: 6px; }
.nb-ovl .l2 { width: 18px; margin-bottom: 6px; }
.nb-ovl .l3 { width: 28px; }
.nb-ovl .menu-btn.open .l1 { transform: translateY(7.5px) rotate(45deg); width: 28px; }
.nb-ovl .menu-btn.open .l2 { opacity: 0; transform: scaleX(0); }
.nb-ovl .menu-btn.open .l3 { transform: translateY(-7.5px) rotate(-45deg); width: 28px; }
.nb-ovl .overlay { position: absolute; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.nb-ovl .overlay-panel { position: absolute; inset: 0; background: var(--nb-ovl-void); transform: translateY(-100%); transition: transform 0.65s cubic-bezier(0.86,0,0.07,1); }
.nb-ovl .overlay-panel-2 { background: #0f0f11; transition-delay: 0.05s; }
.nb-ovl .overlay.open .overlay-panel { transform: translateY(0); }
.nb-ovl .overlay.open { pointer-events: all; }
.nb-ovl .overlay:not(.open) .overlay-panel { transition: transform 0.5s cubic-bezier(0.86,0,0.07,1); transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel { transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel-2 { transition-delay: 0.05s; }
.nb-ovl .overlay-content { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr 340px; opacity: 0; transition: opacity 0.3s 0.2s; pointer-events: none; }
.nb-ovl .overlay.open .overlay-content { opacity: 1; pointer-events: all; }
.nb-ovl .overlay.closing .overlay-content { opacity: 0; transition-delay: 0s; }
.nb-ovl .overlay-nav { display: flex; flex-direction: column; justify-content: center; padding: 6rem 4rem; border-right: 1px solid var(--nb-ovl-border); overflow: hidden; }
.nb-ovl .overlay-counter { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.25); margin-bottom: 3rem; }
.nb-ovl .menu-item { display: flex; align-items: baseline; gap: 1.5rem; text-decoration: none; overflow: hidden; padding: 0.3rem 0; cursor: pointer; position: relative; }
.nb-ovl .menu-item-inner { display: flex; align-items: baseline; gap: 1.5rem; transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.23,1,0.32,1); width: 100%; }
.nb-ovl .overlay.open .menu-item:nth-child(2) .menu-item-inner { transition-delay: 0.15s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(3) .menu-item-inner { transition-delay: 0.20s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(4) .menu-item-inner { transition-delay: 0.25s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(5) .menu-item-inner { transition-delay: 0.30s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(6) .menu-item-inner { transition-delay: 0.35s; transform: translateY(0); }
.nb-ovl .overlay.closing .menu-item .menu-item-inner { transform: translateY(-100%); transition-delay: 0s !important; transition-duration: 0.3s; }
.nb-ovl .item-num { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: rgba(240,239,235,0.3); letter-spacing: 0.1em; flex-shrink: 0; margin-bottom: 4px; align-self: flex-end; }
.nb-ovl .item-label { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 400; letter-spacing: 0.02em; color: var(--nb-ovl-off-white); line-height: 0.9; transition: color 0.2s; position: relative; }
.nb-ovl .item-arrow { opacity: 0; transform: translateX(-10px); transition: opacity 0.2s, transform 0.2s; color: var(--nb-ovl-lime); font-size: 2rem; align-self: center; flex-shrink: 0; }
.nb-ovl .menu-item:hover .item-label { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-num { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-arrow { opacity: 1; transform: translateX(0); }
.nb-ovl .item-line { position: absolute; bottom: 0; left: 0; height: 1px; background: var(--nb-ovl-border); width: 100%; }
.nb-ovl .overlay-sidebar { padding: 6rem 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; opacity: 0; transform: translateX(20px); transition: opacity 0.4s 0.4s, transform 0.4s 0.4s; }
.nb-ovl .overlay.open .overlay-sidebar { opacity: 1; transform: translateX(0); }
.nb-ovl .overlay.closing .overlay-sidebar { opacity: 0; transform: translateX(20px); transition-delay: 0s; }
.nb-ovl .sidebar-block { display: flex; flex-direction: column; gap: 0.5rem; }
.nb-ovl .sidebar-block-spaced { margin-top: 1.5rem; }
.nb-ovl .sidebar-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,239,235,0.3); margin-bottom: 0.5rem; }
.nb-ovl .sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(240,239,235,0.6); text-decoration: none; transition: color 0.15s; padding: 3px 0; }
.nb-ovl .sidebar-link:hover { color: var(--nb-ovl-off-white); }
.nb-ovl .sidebar-link::before { content: '→'; color: var(--nb-ovl-lime); font-size: 0.7rem; }
.nb-ovl .sidebar-status { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: rgba(240,239,235,0.5); }
.nb-ovl .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-ovl-lime); box-shadow: 0 0 8px var(--nb-ovl-lime); flex-shrink: 0; animation: nb-ovl-pulse 2s ease-in-out infinite; }
@keyframes nb-ovl-pulse { 0%, 100% { box-shadow: 0 0 8px var(--nb-ovl-lime); } 50% { box-shadow: 0 0 16px var(--nb-ovl-lime); } }
.nb-ovl .sidebar-social { display: flex; gap: 1rem; flex-wrap: wrap; }
.nb-ovl .social-link { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(240,239,235,0.35); text-decoration: none; transition: color 0.15s; }
.nb-ovl .social-link:hover { color: var(--nb-ovl-lime); }
.nb-ovl .page { min-height: 720px; position: relative; overflow: hidden; }
.nb-ovl .page::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: 0.6; }
.nb-ovl .bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Bebas Neue', sans-serif; font-size: clamp(12rem, 25vw, 28rem); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(240,239,235,0.04); letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; line-height: 1; }
.nb-ovl .hero-content { position: relative; z-index: 1; min-height: 720px; display: flex; flex-direction: column; justify-content: flex-end; padding: 4rem 3rem; }
.nb-ovl .hero-caption { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: end; max-width: 1200px; }
.nb-ovl .h-eyebrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.nb-ovl .h-eyebrow-line { width: 40px; height: 1.5px; background: var(--nb-ovl-lime); }
.nb-ovl .h-eyebrow-text { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.45); text-transform: uppercase; }
.nb-ovl .h-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 10vw, 12rem); font-weight: 400; letter-spacing: 0.02em; line-height: 0.9; color: var(--nb-ovl-off-white); }
.nb-ovl .h-title .accent { color: var(--nb-ovl-lime); }
.nb-ovl .h-right { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding-bottom: 0.5rem; }
.nb-ovl .h-desc { font-size: 0.9rem; color: rgba(240,239,235,0.5); line-height: 1.65; max-width: 36ch; }
.nb-ovl .h-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-ovl-void); background: var(--nb-ovl-lime); border: none; padding: 12px 24px; border-radius: 100px; cursor: pointer; transition: background 0.2s, transform 0.15s; width: fit-content; font-family: inherit; }
.nb-ovl .h-cta:hover { background: #d4f850; transform: translateX(4px); }
.nb-ovl .corner-deco { position: absolute; top: 2rem; right: 2rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(240,239,235,0.15); text-align: right; line-height: 2; z-index: 1; pointer-events: none; }
.nb-ovl .grid-deco { position: absolute; bottom: 3rem; right: 3rem; display: grid; grid-template-columns: repeat(5, 6px); grid-template-rows: repeat(5, 6px); gap: 4px; z-index: 1; pointer-events: none; }
.nb-ovl .grid-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(240,239,235,0.12); }
.nb-ovl .grid-dot.lit { background: var(--nb-ovl-lime); opacity: 0.6; }
@media (max-width: 768px) {
.nb-ovl .hero-caption { grid-template-columns: 1fr; gap: 1.5rem; }
.nb-ovl .overlay-content { grid-template-columns: 1fr; }
.nb-ovl .overlay-sidebar { display: none; }
.nb-ovl .overlay-nav { padding: 6rem 2rem; }
.nb-ovl .item-label { font-size: clamp(3rem, 12vw, 6rem); }
.nb-ovl header { padding: 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.nb-ovl .overlay-panel, .nb-ovl .menu-item-inner, .nb-ovl .overlay-sidebar, .nb-ovl .status-dot, .nb-ovl .menu-line { transition: none !important; animation: none !important; }
} /* ─── 06 Kairos/Studio — fullscreen overlay menu navbar UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;1,400&display=swap');
.nb-ovl {
--nb-ovl-void: #09090b;
--nb-ovl-lime: #c8f135;
--nb-ovl-lime-dim: #9bb822;
--nb-ovl-off-white: #f0efeb;
--nb-ovl-warm-grey: #a09fa0;
--nb-ovl-border: rgba(240,239,235,0.1);
position: relative;
width: 100%;
min-height: 720px;
background: var(--nb-ovl-void);
color: var(--nb-ovl-off-white);
font-family: 'Outfit', sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.nb-ovl *, .nb-ovl *::before, .nb-ovl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nb-ovl header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; padding: 1.5rem 2.5rem; display: flex; align-items: center; mix-blend-mode: difference; }
.nb-ovl .brand { font-family: 'Space Mono', monospace; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; color: var(--nb-ovl-off-white); text-decoration: none; z-index: 10; position: relative; }
.nb-ovl .brand .slash { color: var(--nb-ovl-lime); margin: 0 2px; }
.nb-ovl .header-spacer { flex: 1; }
.nb-ovl .menu-btn { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 0; align-items: flex-end; z-index: 300; position: relative; }
.nb-ovl .menu-line { display: block; height: 1.5px; background: var(--nb-ovl-off-white); border-radius: 1px; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), width 0.3s ease, opacity 0.2s; }
.nb-ovl .l1 { width: 28px; margin-bottom: 6px; }
.nb-ovl .l2 { width: 18px; margin-bottom: 6px; }
.nb-ovl .l3 { width: 28px; }
.nb-ovl .menu-btn.open .l1 { transform: translateY(7.5px) rotate(45deg); width: 28px; }
.nb-ovl .menu-btn.open .l2 { opacity: 0; transform: scaleX(0); }
.nb-ovl .menu-btn.open .l3 { transform: translateY(-7.5px) rotate(-45deg); width: 28px; }
.nb-ovl .overlay { position: absolute; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.nb-ovl .overlay-panel { position: absolute; inset: 0; background: var(--nb-ovl-void); transform: translateY(-100%); transition: transform 0.65s cubic-bezier(0.86,0,0.07,1); }
.nb-ovl .overlay-panel-2 { background: #0f0f11; transition-delay: 0.05s; }
.nb-ovl .overlay.open .overlay-panel { transform: translateY(0); }
.nb-ovl .overlay.open { pointer-events: all; }
.nb-ovl .overlay:not(.open) .overlay-panel { transition: transform 0.5s cubic-bezier(0.86,0,0.07,1); transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel { transform: translateY(-100%); }
.nb-ovl .overlay.closing .overlay-panel-2 { transition-delay: 0.05s; }
.nb-ovl .overlay-content { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: 1fr 340px; opacity: 0; transition: opacity 0.3s 0.2s; pointer-events: none; }
.nb-ovl .overlay.open .overlay-content { opacity: 1; pointer-events: all; }
.nb-ovl .overlay.closing .overlay-content { opacity: 0; transition-delay: 0s; }
.nb-ovl .overlay-nav { display: flex; flex-direction: column; justify-content: center; padding: 6rem 4rem; border-right: 1px solid var(--nb-ovl-border); overflow: hidden; }
.nb-ovl .overlay-counter { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.25); margin-bottom: 3rem; }
.nb-ovl .menu-item { display: flex; align-items: baseline; gap: 1.5rem; text-decoration: none; overflow: hidden; padding: 0.3rem 0; cursor: pointer; position: relative; }
.nb-ovl .menu-item-inner { display: flex; align-items: baseline; gap: 1.5rem; transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.23,1,0.32,1); width: 100%; }
.nb-ovl .overlay.open .menu-item:nth-child(2) .menu-item-inner { transition-delay: 0.15s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(3) .menu-item-inner { transition-delay: 0.20s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(4) .menu-item-inner { transition-delay: 0.25s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(5) .menu-item-inner { transition-delay: 0.30s; transform: translateY(0); }
.nb-ovl .overlay.open .menu-item:nth-child(6) .menu-item-inner { transition-delay: 0.35s; transform: translateY(0); }
.nb-ovl .overlay.closing .menu-item .menu-item-inner { transform: translateY(-100%); transition-delay: 0s !important; transition-duration: 0.3s; }
.nb-ovl .item-num { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: rgba(240,239,235,0.3); letter-spacing: 0.1em; flex-shrink: 0; margin-bottom: 4px; align-self: flex-end; }
.nb-ovl .item-label { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 8vw, 8rem); font-weight: 400; letter-spacing: 0.02em; color: var(--nb-ovl-off-white); line-height: 0.9; transition: color 0.2s; position: relative; }
.nb-ovl .item-arrow { opacity: 0; transform: translateX(-10px); transition: opacity 0.2s, transform 0.2s; color: var(--nb-ovl-lime); font-size: 2rem; align-self: center; flex-shrink: 0; }
.nb-ovl .menu-item:hover .item-label { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-num { color: var(--nb-ovl-lime); }
.nb-ovl .menu-item:hover .item-arrow { opacity: 1; transform: translateX(0); }
.nb-ovl .item-line { position: absolute; bottom: 0; left: 0; height: 1px; background: var(--nb-ovl-border); width: 100%; }
.nb-ovl .overlay-sidebar { padding: 6rem 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; opacity: 0; transform: translateX(20px); transition: opacity 0.4s 0.4s, transform 0.4s 0.4s; }
.nb-ovl .overlay.open .overlay-sidebar { opacity: 1; transform: translateX(0); }
.nb-ovl .overlay.closing .overlay-sidebar { opacity: 0; transform: translateX(20px); transition-delay: 0s; }
.nb-ovl .sidebar-block { display: flex; flex-direction: column; gap: 0.5rem; }
.nb-ovl .sidebar-block-spaced { margin-top: 1.5rem; }
.nb-ovl .sidebar-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,239,235,0.3); margin-bottom: 0.5rem; }
.nb-ovl .sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(240,239,235,0.6); text-decoration: none; transition: color 0.15s; padding: 3px 0; }
.nb-ovl .sidebar-link:hover { color: var(--nb-ovl-off-white); }
.nb-ovl .sidebar-link::before { content: '→'; color: var(--nb-ovl-lime); font-size: 0.7rem; }
.nb-ovl .sidebar-status { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: rgba(240,239,235,0.5); }
.nb-ovl .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-ovl-lime); box-shadow: 0 0 8px var(--nb-ovl-lime); flex-shrink: 0; animation: nb-ovl-pulse 2s ease-in-out infinite; }
@keyframes nb-ovl-pulse { 0%, 100% { box-shadow: 0 0 8px var(--nb-ovl-lime); } 50% { box-shadow: 0 0 16px var(--nb-ovl-lime); } }
.nb-ovl .sidebar-social { display: flex; gap: 1rem; flex-wrap: wrap; }
.nb-ovl .social-link { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(240,239,235,0.35); text-decoration: none; transition: color 0.15s; }
.nb-ovl .social-link:hover { color: var(--nb-ovl-lime); }
.nb-ovl .page { min-height: 720px; position: relative; overflow: hidden; }
.nb-ovl .page::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; opacity: 0.6; }
.nb-ovl .bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Bebas Neue', sans-serif; font-size: clamp(12rem, 25vw, 28rem); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(240,239,235,0.04); letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; line-height: 1; }
.nb-ovl .hero-content { position: relative; z-index: 1; min-height: 720px; display: flex; flex-direction: column; justify-content: flex-end; padding: 4rem 3rem; }
.nb-ovl .hero-caption { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: end; max-width: 1200px; }
.nb-ovl .h-eyebrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.nb-ovl .h-eyebrow-line { width: 40px; height: 1.5px; background: var(--nb-ovl-lime); }
.nb-ovl .h-eyebrow-text { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(240,239,235,0.45); text-transform: uppercase; }
.nb-ovl .h-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 10vw, 12rem); font-weight: 400; letter-spacing: 0.02em; line-height: 0.9; color: var(--nb-ovl-off-white); }
.nb-ovl .h-title .accent { color: var(--nb-ovl-lime); }
.nb-ovl .h-right { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding-bottom: 0.5rem; }
.nb-ovl .h-desc { font-size: 0.9rem; color: rgba(240,239,235,0.5); line-height: 1.65; max-width: 36ch; }
.nb-ovl .h-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-ovl-void); background: var(--nb-ovl-lime); border: none; padding: 12px 24px; border-radius: 100px; cursor: pointer; transition: background 0.2s, transform 0.15s; width: fit-content; font-family: inherit; }
.nb-ovl .h-cta:hover { background: #d4f850; transform: translateX(4px); }
.nb-ovl .corner-deco { position: absolute; top: 2rem; right: 2rem; font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(240,239,235,0.15); text-align: right; line-height: 2; z-index: 1; pointer-events: none; }
.nb-ovl .grid-deco { position: absolute; bottom: 3rem; right: 3rem; display: grid; grid-template-columns: repeat(5, 6px); grid-template-rows: repeat(5, 6px); gap: 4px; z-index: 1; pointer-events: none; }
.nb-ovl .grid-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(240,239,235,0.12); }
.nb-ovl .grid-dot.lit { background: var(--nb-ovl-lime); opacity: 0.6; }
@media (max-width: 768px) {
.nb-ovl .hero-caption { grid-template-columns: 1fr; gap: 1.5rem; }
.nb-ovl .overlay-content { grid-template-columns: 1fr; }
.nb-ovl .overlay-sidebar { display: none; }
.nb-ovl .overlay-nav { padding: 6rem 2rem; }
.nb-ovl .item-label { font-size: clamp(3rem, 12vw, 6rem); }
.nb-ovl header { padding: 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.nb-ovl .overlay-panel, .nb-ovl .menu-item-inner, .nb-ovl .overlay-sidebar, .nb-ovl .status-dot, .nb-ovl .menu-line { transition: none !important; animation: none !important; }
}(() => {
// Scoped fullscreen-overlay wiring. Drops the source mock's
// `document.body.style.overflow = 'hidden'` since the embedded
// wrapper isn't the viewport. Escape-to-close listener bound to
// the wrapper, so two demos can coexist on one page.
const root = document.querySelector('.nb-ovl');
if (!root) return;
const overlay = root.querySelector('[data-nb-ovl-overlay]');
const toggle = root.querySelector('[data-nb-ovl-toggle]');
const opener = root.querySelector('[data-nb-ovl-open]');
const dotGrid = root.querySelector('[data-nb-ovl-dotgrid]');
if (!overlay || !toggle) return;
// Build the 5x5 dot grid once.
if (dotGrid && dotGrid.childElementCount === 0) {
for (let i = 0; i < 25; i++) {
const d = document.createElement('div');
d.className = 'grid-dot' + (Math.random() > 0.7 ? ' lit' : '');
dotGrid.appendChild(d);
}
}
let isOpen = false;
function openMenu() {
isOpen = true;
overlay.classList.remove('closing');
overlay.classList.add('open');
toggle.classList.add('open');
toggle.setAttribute('aria-expanded', 'true');
overlay.setAttribute('aria-hidden', 'false');
}
function closeMenu() {
if (!isOpen) return;
isOpen = false;
overlay.classList.add('closing');
toggle.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
overlay.setAttribute('aria-hidden', 'true');
setTimeout(() => {
overlay.classList.remove('open', 'closing');
}, 650);
}
toggle.addEventListener('click', () => { isOpen ? closeMenu() : openMenu(); });
if (opener) opener.addEventListener('click', openMenu);
// Close on any overlay menu item click.
root.querySelectorAll('[data-nb-ovl-link]').forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
closeMenu();
});
});
// Escape closes (only when overlay is open). Listener on wrapper so
// multiple demos don't all close on one keypress.
root.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isOpen) closeMenu();
});
// Subtle dot animation, scoped.
let dotTimer = null;
if (dotGrid) {
dotTimer = setInterval(() => {
const dots = dotGrid.querySelectorAll('.grid-dot');
if (!dots.length) return;
const idx = Math.floor(Math.random() * dots.length);
dots[idx].classList.toggle('lit');
}, 800);
root._nbOvlDotTimer = dotTimer;
}
})(); (() => {
// Scoped fullscreen-overlay wiring. Drops the source mock's
// `document.body.style.overflow = 'hidden'` since the embedded
// wrapper isn't the viewport. Escape-to-close listener bound to
// the wrapper, so two demos can coexist on one page.
const root = document.querySelector('.nb-ovl');
if (!root) return;
const overlay = root.querySelector('[data-nb-ovl-overlay]');
const toggle = root.querySelector('[data-nb-ovl-toggle]');
const opener = root.querySelector('[data-nb-ovl-open]');
const dotGrid = root.querySelector('[data-nb-ovl-dotgrid]');
if (!overlay || !toggle) return;
// Build the 5x5 dot grid once.
if (dotGrid && dotGrid.childElementCount === 0) {
for (let i = 0; i < 25; i++) {
const d = document.createElement('div');
d.className = 'grid-dot' + (Math.random() > 0.7 ? ' lit' : '');
dotGrid.appendChild(d);
}
}
let isOpen = false;
function openMenu() {
isOpen = true;
overlay.classList.remove('closing');
overlay.classList.add('open');
toggle.classList.add('open');
toggle.setAttribute('aria-expanded', 'true');
overlay.setAttribute('aria-hidden', 'false');
}
function closeMenu() {
if (!isOpen) return;
isOpen = false;
overlay.classList.add('closing');
toggle.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
overlay.setAttribute('aria-hidden', 'true');
setTimeout(() => {
overlay.classList.remove('open', 'closing');
}, 650);
}
toggle.addEventListener('click', () => { isOpen ? closeMenu() : openMenu(); });
if (opener) opener.addEventListener('click', openMenu);
// Close on any overlay menu item click.
root.querySelectorAll('[data-nb-ovl-link]').forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
closeMenu();
});
});
// Escape closes (only when overlay is open). Listener on wrapper so
// multiple demos don't all close on one keypress.
root.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && isOpen) closeMenu();
});
// Subtle dot animation, scoped.
let dotTimer = null;
if (dotGrid) {
dotTimer = setInterval(() => {
const dots = dotGrid.querySelectorAll('.grid-dot');
if (!dots.length) return;
const idx = Math.floor(Math.random() * dots.length);
dots[idx].classList.toggle('lit');
}, 800);
root._nbOvlDotTimer = dotTimer;
}
})();