/* ============================================================================ Jeff Brokaw — navigation system. Themes off the site tokens with hard fallbacks so it works on every page, including the inline homepage. MOBILE (<=720px): full-screen "Signal" menu (clip reveal, masked link reveals, per-item descriptor, pinned CTA). Progressive: the contact pill stays as a no-JS fallback until nav.js adds .jbnav-ready to . DESKTOP (>=721px): inline nav stays visible; adds an animated underline, an on-hover descriptor readout, and (via JS) a magnetic Contact pill. Prefixed .jbnav- to avoid collisions. ========================================================================== */ :root{ --jbnav-ink: var(--ink, #0A0A0A); --jbnav-ac: var(--ac, #ff6a1f); --jbnav-fg: var(--fg, #f4f1ea); --jbnav-mut: var(--mut, #b4aea4); --jbnav-dim: var(--dim, #9b958b); --jbnav-hair: var(--hair, #1c1a17); --jbnav-expo: cubic-bezier(.16,1,.3,1); --jbnav-z: 200; } /* --------------------------------------------------------------------------- 1. DESKTOP — underline + descriptor readout on the primary nav (>=721px) --------------------------------------------------------------------------- */ @media (min-width:721px){ header nav a:not(.pill), .site-header .nav a:not(.pill), .topbar .tb-r a:not(.pill){ position:relative; padding-bottom:3px; } header nav a:not(.pill)::after, .site-header .nav a:not(.pill)::after, .topbar .tb-r a:not(.pill)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--jbnav-ac); transform:scaleX(0); transform-origin:left center; transition:transform .42s var(--jbnav-expo); } header nav a:not(.pill):hover::after, header nav a:not(.pill):focus-visible::after, .site-header .nav a:not(.pill):hover::after, .site-header .nav a:not(.pill):focus-visible::after, .topbar .tb-r a:not(.pill):hover::after, .topbar .tb-r a:not(.pill):focus-visible::after{ transform:scaleX(1); } header nav a[aria-current="page"], .site-header .nav a[aria-current="page"]{ color:var(--jbnav-fg); } header nav a[aria-current="page"]::after, .site-header .nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left center; } /* WORD ROLL — on hover the label rolls up and an accent copy rolls into its place. Fully self-contained inside the link's own box, so it can never overlap the pill or a neighbour (unlike an absolutely-positioned tooltip). JS wraps the label in .jbnav-lbl. */ .jbnav-lbl{ position:relative; display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.28; } .jbnav-lbl-a, .jbnav-lbl-b{ display:block; transition:transform .52s var(--jbnav-expo); } .jbnav-lbl-b{ position:absolute; left:0; top:0; color:var(--jbnav-ac); transform:translateY(100%); } header nav a:not(.pill):hover .jbnav-lbl-a, header nav a:not(.pill):focus-visible .jbnav-lbl-a, .site-header .nav a:not(.pill):hover .jbnav-lbl-a, .site-header .nav a:not(.pill):focus-visible .jbnav-lbl-a, .topbar .tb-r a:not(.pill):hover .jbnav-lbl-a, .topbar .tb-r a:not(.pill):focus-visible .jbnav-lbl-a{ transform:translateY(-100%); } header nav a:not(.pill):hover .jbnav-lbl-b, header nav a:not(.pill):focus-visible .jbnav-lbl-b, .site-header .nav a:not(.pill):hover .jbnav-lbl-b, .site-header .nav a:not(.pill):focus-visible .jbnav-lbl-b, .topbar .tb-r a:not(.pill):hover .jbnav-lbl-b, .topbar .tb-r a:not(.pill):focus-visible .jbnav-lbl-b{ transform:translateY(0); } /* current page already sits in the accent-forward state */ header nav a[aria-current="page"] .jbnav-lbl-b, .site-header .nav a[aria-current="page"] .jbnav-lbl-b{ transform:translateY(0); } header nav a[aria-current="page"] .jbnav-lbl-a, .site-header .nav a[aria-current="page"] .jbnav-lbl-a{ transform:translateY(-100%); } /* DESCRIPTOR — revealed beneath the label on hover. Right-anchored links (.is-right) grow leftward toward the page centre, so the text can never reach the pill. */ .jbnav-desc-d{ position:absolute; top:calc(100% + 8px); left:0; white-space:nowrap; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:11.5px; font-weight:450; letter-spacing:.01em; text-transform:none; color:var(--jbnav-mut); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .32s var(--jbnav-expo), transform .42s var(--jbnav-expo); } .jbnav-desc-d.is-right{ left:auto; right:0; text-align:right; } .jbnav-desc-d::before{ content:""; position:absolute; top:-7px; left:0; width:16px; height:2px; background:var(--jbnav-ac); transform:scaleX(0); transform-origin:left center; transition:transform .42s var(--jbnav-expo) .04s; } .jbnav-desc-d.is-right::before{ left:auto; right:0; transform-origin:right center; } header nav a:not(.pill):hover .jbnav-desc-d, header nav a:not(.pill):focus-visible .jbnav-desc-d, .site-header .nav a:not(.pill):hover .jbnav-desc-d, .site-header .nav a:not(.pill):focus-visible .jbnav-desc-d{ opacity:1; transform:translateY(0); } header nav a:not(.pill):hover .jbnav-desc-d::before, header nav a:not(.pill):focus-visible .jbnav-desc-d::before, .site-header .nav a:not(.pill):hover .jbnav-desc-d::before, .site-header .nav a:not(.pill):focus-visible .jbnav-desc-d::before{ transform:scaleX(1); } /* magnetic pill easing (JS sets transform) */ header nav a.pill, .site-header .nav a.pill{ transition:transform .35s var(--jbnav-expo), background .22s, color .22s, box-shadow .3s var(--jbnav-expo); } header nav a.pill:hover, .site-header .nav a.pill:hover{ box-shadow:0 0 0 4px rgba(255,106,31,.13), 0 10px 34px rgba(255,106,31,.2); } } /* --------------------------------------------------------------------------- 2. THE TRIGGER (mobile only, once JS-ready) --------------------------------------------------------------------------- */ .jbnav-trigger{ display:none; align-items:center; gap:11px; -webkit-appearance:none; appearance:none; background:transparent; border:0; margin:0; padding:6px 2px 6px 10px; cursor:pointer; color:var(--jbnav-fg); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1; -webkit-tap-highlight-color:transparent; } .jbnav-trigger-label{ color:var(--jbnav-mut); transition:color .2s ease; } .jbnav-trigger:hover .jbnav-trigger-label, .jbnav-trigger[aria-expanded="true"] .jbnav-trigger-label{ color:var(--jbnav-fg); } .jbnav-glyph{ position:relative; width:26px; height:26px; flex:0 0 26px; display:block; } .jbnav-glyph svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .jbnav-glyph .g-line{ fill:none; stroke:var(--jbnav-ac); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .jbnav-glyph .g-node{ fill:var(--jbnav-ac); } .jbnav-glyph .g-tri,.jbnav-glyph .g-x{ transform-origin:13px 13px; transition:opacity .34s var(--jbnav-expo), transform .5s var(--jbnav-expo); } .jbnav-glyph .g-x{ opacity:0; transform:rotate(-90deg) scale(.6); } .jbnav-trigger[aria-expanded="true"] .g-tri{ opacity:0; transform:rotate(90deg) scale(.6); } .jbnav-trigger[aria-expanded="true"] .g-x{ opacity:1; transform:rotate(0) scale(1); } .jbnav-glyph .g-node.pulse{ animation:jbnav-pulse 3.2s ease-in-out infinite; } @keyframes jbnav-pulse{ 0%,100%{opacity:1} 50%{opacity:.45} } @media (max-width:720px){ .jbnav-ready header nav > a, .jbnav-ready .site-header .nav > a, .jbnav-ready .topbar .tb-r > a{ display:none !important; } /* The trigger is PINNED to the viewport, not the header, so it is always reachable no matter how far the page has scrolled. Matches the topbar's own ink-blur treatment so it reads as part of the site, not a foreign floating button. */ .jbnav-ready .jbnav-trigger{ display:inline-flex; position:fixed; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); z-index:calc(var(--jbnav-z) - 10); /* above the topbar (50), below the panel (200) */ padding:9px 14px; border-radius:999px; background:rgba(12,11,10,.82); -webkit-backdrop-filter:blur(11px) saturate(1.15); backdrop-filter:blur(11px) saturate(1.15); border:1px solid rgba(244,241,234,.13); box-shadow:0 8px 30px rgba(0,0,0,.42); transition:background .2s ease, box-shadow .3s var(--jbnav-expo), transform .2s var(--jbnav-expo); } .jbnav-ready .jbnav-trigger:active{ transform:scale(.96); } /* when the panel is open the pinned trigger sits behind it; hide it so its ghost never shows through the clip-path circle as it expands */ .jbnav-ready .jbnav-trigger[aria-expanded="true"]{ opacity:0; pointer-events:none; } } /* --------------------------------------------------------------------------- 3. THE PANEL — full-screen ink takeover --------------------------------------------------------------------------- */ .jbnav-panel{ position:fixed; inset:0; z-index:var(--jbnav-z); display:flex; flex-direction:column; background:var(--jbnav-ink); color:var(--jbnav-fg); visibility:hidden; opacity:0; clip-path:circle(0% at calc(100% - 44px) 46px); transition:clip-path .58s var(--jbnav-expo), opacity .3s ease, visibility 0s linear .6s; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .jbnav-panel.is-open{ visibility:visible; opacity:1; clip-path:circle(150% at calc(100% - 44px) 46px); transition:clip-path .62s var(--jbnav-expo), opacity .2s ease, visibility 0s; } /* animated node-grid field, on-brand with the hero swarm */ .jbnav-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,106,31,.10) 1px, transparent 1.5px); background-size:28px 28px; opacity:0; transition:opacity .8s ease .1s; -webkit-mask-image:radial-gradient(130% 100% at 100% 0%, #000 40%, transparent 78%); mask-image:radial-gradient(130% 100% at 100% 0%, #000 40%, transparent 78%); } .jbnav-panel.is-open .jbnav-grid{ opacity:1; animation:jbnav-drift 22s linear infinite; } @keyframes jbnav-drift{ from{background-position:0 0} to{background-position:28px 56px} } .jbnav-panel-inner{ position:relative; z-index:1; display:flex; flex-direction:column; min-height:100%; padding:clamp(18px,5vw,30px) clamp(22px,7vw,40px) clamp(26px,7vw,40px); padding-top:max(clamp(18px,5vw,30px), env(safe-area-inset-top)); padding-bottom:max(clamp(26px,7vw,40px), env(safe-area-inset-bottom)); } .jbnav-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .jbnav-brand{ display:inline-flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--jbnav-fg); text-decoration:none; } .jbnav-brand svg{ width:22px; height:22px; overflow:visible; } .jbnav-brand .g-line{ fill:none; stroke:var(--jbnav-ac); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .jbnav-brand .g-node{ fill:var(--jbnav-ac); } .jbnav-close{ -webkit-appearance:none; appearance:none; background:transparent; border:0; cursor:pointer; color:var(--jbnav-mut); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; padding:8px 4px 8px 12px; -webkit-tap-highlight-color:transparent; transition:color .2s ease; } .jbnav-close:hover{ color:var(--jbnav-fg); } .jbnav-close svg{ width:16px; height:16px; } .jbnav-close svg line{ stroke:currentColor; stroke-width:2; stroke-linecap:round; } /* links */ .jbnav-links{ display:flex; flex-direction:column; align-items:stretch; margin-top:clamp(26px,8vw,56px); flex:1 1 auto; } .jbnav-link{ --i:0; position:relative; display:flex; align-items:center; gap:16px; width:100%; box-sizing:border-box; padding:clamp(13px,3vw,20px) 0; border-bottom:1px solid var(--jbnav-hair); text-decoration:none; color:var(--jbnav-fg); text-transform:none; text-align:left; } .jbnav-link:first-child{ border-top:1px solid var(--jbnav-hair); } .jbnav-node{ width:9px; height:9px; flex:0 0 9px; border-radius:50%; border:1.5px solid var(--jbnav-ac); background:transparent; opacity:0; transform:scale(.4); transition:opacity .4s var(--jbnav-expo), transform .5s var(--jbnav-expo), background .25s ease, box-shadow .25s ease; } .jbnav-col{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1 1 auto; } .jbnav-mask{ display:block; overflow:hidden; padding-bottom:2px; } .jbnav-word{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(34px,11vw,60px); line-height:1; letter-spacing:-.03em; transform:translateY(112%); transition:transform .66s var(--jbnav-expo), color .2s ease; } .jbnav-desc{ font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:13px; font-weight:450; letter-spacing:.01em; color:var(--jbnav-dim); opacity:0; transform:translateY(6px); transition:opacity .5s var(--jbnav-expo), transform .5s var(--jbnav-expo); } .jbnav-go{ flex:0 0 auto; color:var(--jbnav-dim); font-size:22px; line-height:1; opacity:0; transform:translateX(-8px); transition:opacity .45s var(--jbnav-expo), transform .45s var(--jbnav-expo), color .2s ease; } /* staged reveal on open */ .jbnav-panel.is-open .jbnav-node{ opacity:1; transform:scale(1); transition-delay:calc(150ms + var(--i)*66ms); } .jbnav-panel.is-open .jbnav-word{ transform:translateY(0); transition-delay:calc(150ms + var(--i)*66ms); } .jbnav-panel.is-open .jbnav-desc{ opacity:1; transform:translateY(0); transition-delay:calc(220ms + var(--i)*66ms); } .jbnav-panel.is-open .jbnav-go{ opacity:1; transform:translateX(0); transition-delay:calc(200ms + var(--i)*66ms); } /* active + interaction */ .jbnav-link[aria-current="page"] .jbnav-word{ color:var(--jbnav-ac); } .jbnav-link[aria-current="page"] .jbnav-node{ background:var(--jbnav-ac); box-shadow:0 0 0 4px rgba(255,106,31,.16); } .jbnav-link[aria-current="page"] .jbnav-go{ color:var(--jbnav-ac); } @media (hover:hover){ .jbnav-link:hover .jbnav-word{ color:var(--jbnav-ac); } .jbnav-link:hover .jbnav-node{ background:var(--jbnav-ac); } .jbnav-link:hover .jbnav-go{ color:var(--jbnav-ac); transform:translateX(3px); } } .jbnav-link:active .jbnav-word{ color:var(--jbnav-ac); } /* footer */ .jbnav-foot{ margin-top:clamp(24px,6vw,40px); opacity:0; transform:translateY(16px); transition:opacity .5s var(--jbnav-expo), transform .55s var(--jbnav-expo); } .jbnav-panel.is-open .jbnav-foot{ opacity:1; transform:translateY(0); transition-delay:calc(220ms + var(--links-n,4)*66ms + 40ms); } .jbnav-cta{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:60px; border-radius:14px; background:var(--jbnav-ac); color:var(--jbnav-ink); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; box-shadow:0 0 0 0 rgba(255,106,31,.5); transition:transform .14s ease, box-shadow .3s var(--jbnav-expo); } .jbnav-cta .jbnav-cta-arrow{ transition:transform .3s var(--jbnav-expo); } .jbnav-cta:hover{ box-shadow:0 0 0 5px rgba(255,106,31,.14), 0 14px 40px rgba(255,106,31,.24); } .jbnav-cta:hover .jbnav-cta-arrow{ transform:translateX(5px); } .jbnav-cta:active{ transform:scale(.98); } .jbnav-meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:20px; font-size:12px; letter-spacing:.06em; color:var(--jbnav-dim); } .jbnav-meta a{ color:var(--jbnav-mut); text-decoration:none; transition:color .2s ease; } .jbnav-meta a:hover{ color:var(--jbnav-ac); } .jbnav-meta .jbnav-loc{ display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; } .jbnav-meta .jbnav-loc i{ width:7px; height:7px; background:var(--jbnav-ac); display:block; } html.jbnav-locked, html.jbnav-locked body{ overflow:hidden; } /* --------------------------------------------------------------------------- 4. MOTION SAFETY --------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .jbnav-panel{ clip-path:none !important; transition:opacity .2s ease, visibility 0s linear .2s !important; } .jbnav-panel.is-open{ transition:opacity .2s ease, visibility 0s !important; } .jbnav-grid{ animation:none !important; } .jbnav-word,.jbnav-node,.jbnav-desc,.jbnav-go,.jbnav-foot, .jbnav-glyph .g-tri,.jbnav-glyph .g-x,.jbnav-cta,.jbnav-cta .jbnav-cta-arrow,.jbnav-tip{ transition-duration:.001ms !important; transition-delay:0s !important; } .jbnav-word{ transform:none !important; } .jbnav-node,.jbnav-desc,.jbnav-go,.jbnav-foot{ opacity:1 !important; transform:none !important; } .jbnav-glyph .g-node.pulse{ animation:none !important; } }