Frost & Field — A Sticky Glass Navbar in Deep Aqua

Summary

A sticky frosted-glass navbar in deep aqua for a dark, modern product site. A fixed top-0 header carries a translucent glass bar (backdrop-blur 18px + saturate) with a thin aqua hairline highlight on top; the layout beneath bleeds through the blur as you scroll. The bar is left wordmark (an aqua-gradient hexagon tile + 'Lumen' in Space Grotesk) / center nav links with an animated aqua underline-on-hover / right cluster (a ghost ⌘K 'Search prompts' button, a 'Sign in' text link, and one glowing aqua 'Get started' CTA). Below lg it collapses to a search + burger pair that toggles a glass drawer with stacked links and CTAs. The page beneath is an aqua-on-near-black hero (gradient field + faint grid + glow orbs) with a floating glass preview panel demoing the effect, then a logo strip band.

Style

Glassmorphism on a near-black canvas with a single deep-aqua accent. A semi-transparent white-tinted surface over heavy backdrop-blur and saturation gives the navbar real frosted depth, with an inset top highlight + a soft drop shadow so it floats above the content. Space Grotesk for the wordmark/headings (geometric, slightly techy), Inter for body/UI. Color comes almost entirely from one teal-aqua family doing all the pointing (links underline, CTA fill + glow, chips, icon accents); everything else is white at low opacity on ink-black. Texture (faint grid, blurred glow orbs, radial gradient field) creates atmosphere without adding hues.

Layout & Structure

A fixed sticky header (fixed top-0 inset-x-0 z-50) holding one translucent .glass <nav> with a thin aqua hairline gradient highlight absolutely on its top edge. Inside, a centered mx-auto max-w-[1200px] px-5 lg:px-8 container with an h-[68px] lg:h-[74px] flex row: left wordmark / center desktop nav (hidden below lg) / right desktop cluster (hidden below lg) / a mobile cluster (search + burger) shown below lg. A lg:hidden glass drawer hangs below the bar, toggled by the burger, with stacked links and stacked Sign-in + Get-started CTAs. The page content sits behind/under the fixed bar (hero section pads pt-[68px]/[74px] to clear it): an aqua hero field with a centered headline, dual CTAs, a trust row, and a floating glass preview panel that re-demos the glass effect, then a bordered logo-strip band. Everything aligns to the same centered max-w-[1200px] container.

Fixed sticky header shell + aqua hairline

The frosted glass <nav> bar

Left wordmark

Center nav links (>=lg) with animated underline

Right cluster (>=lg): search / sign-in / aqua CTA

Mobile cluster + glass drawer (<lg)

Hero field behind the glass (page context)

Floating glass preview panel + logo strip

Special Notes

Keep the palette strictly ink-black (#0b0f14 / #0e141b, deeper bands #090c11 / #0a0d12 / #0c1117) + a single deep-aqua family (#2dd4bf primary, #14b8a6, #0f766e, #5eead4, CTA ink #042f2a) with only a faint sky #38bdf8 glow; express hierarchy through WHITE OPACITY (white/66 nav, white/70-85 body, white/55-45 muted, white/40 meta), not extra hues. The navbar MUST be a real frosted-glass surface (the .glass recipe: translucent white gradient + backdrop-blur(18px) saturate(160%) + white/8 border + inset highlight + soft shadow) and MUST be fixed top-0 so the page scrolls beneath it and bleeds through the blur, with the hero padding pt-[68px] lg:pt-[74px] to compensate. Preserve the thin aqua top hairline, the grow-from-left aqua nav underline, the aqua-gradient hexagon logo tile, and exactly ONE loud aqua-gradient CTA with its glow + hover lift. Space Grotesk for wordmark/headings (tracking-tight), Inter for body/UI. On reflow below lg the desktop nav and right cluster hide and a search + burger pair toggles the glass drawer; no horizontal overflow at 390px. The hero field, floating preview panel and logo strip beneath are optional page context that show off the glass effect, not part of the navbar pattern itself.