/* WeAreTENZING site navigation * One nav for every page. Hides the Boldlab theme header and the per-page * navs that were previously baked into individual page content. */ /* --- retire the old headers --- */ #qodef-page-header, #qodef-page-header-inner, #qodef-page-mobile-header, .qodef-header-sticky, #wat-hero > header, #wat-page > header { display: none !important; } /* the theme reserves space for its own fixed header */ .qodef-content-behind-header #qodef-page-outer, #qodef-page-outer { padding-top: 0 !important; } /* --- sticky needs a non-scrolling ancestor --- * The theme sets overflow-x:hidden on , which makes body a scroll * container and silently stops position:sticky working. `clip` clips exactly * the same way without creating one. Older browsers keep the theme's value and * fall back to a fixed nav below. */ body { overflow-x: clip; } @supports not (overflow-x: clip) { #wat-nav { position: fixed; left: 0; right: 0; } body { padding-top: 78px; } } /* --- the nav --- */ #wat-nav { --navy: #1E2A47; --rule: rgba(30,42,71,.12); --muted: rgba(30,42,71,.62); position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 44px); padding: 0 clamp(16px, 3vw, 44px); height: 78px; background: #fff; border-bottom: 1px solid var(--rule); font-family: "Poppins", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; box-sizing: border-box; } #wat-nav * { box-sizing: border-box; } body.admin-bar #wat-nav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #wat-nav { top: 46px; } } #wat-nav .lockup { display: block; flex: 0 0 auto; line-height: 0; color: var(--navy); text-decoration: none; } #wat-nav .lockup svg { height: 24px; width: auto; display: block; fill: currentColor; } #wat-nav .wordmark { font-size: 17px; letter-spacing: -.01em; color: var(--navy); line-height: 1; } #wat-nav .wordmark b { font-weight: 700; } #wat-nav nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 30px); } #wat-nav .main { margin-left: auto; } #wat-nav a:not(.lockup) { position: relative; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; white-space: nowrap; transition: color .2s ease; } #wat-nav a:not(.lockup):hover { color: var(--navy); } #wat-nav a.now { color: var(--navy); } #wat-nav a.now::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); } /* On desktop the drawer must not exist as a box: display:contents keeps .seg and .main as direct flex children of the bar. */ #wat-nav .drawer { display: contents; } /* separator between the two groups */ #wat-nav .seg { padding-right: clamp(12px, 1.6vw, 28px); border-right: 1px solid var(--rule); } #wat-nav .burger { display: none; } /* --- narrow --- */ @media (max-width: 1080px) { #wat-nav { gap: 14px; padding: 0 16px; } #wat-nav a:not(.lockup) { font-size: 11px; letter-spacing: .1em; } } @supports not (overflow-x: clip) { @media (max-width: 860px) { body { padding-top: 64px; } } } @media (max-width: 860px) { #wat-nav { height: 64px; } /* One drawer, absolutely positioned against the bar itself so it sits just below it whatever the bar's height or the admin bar's offset. The two groups stack inside it — as separate fixed panels they landed on the same coordinates and the segment links were painted over. */ #wat-nav .drawer { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; max-height: 0; overflow: hidden auto; -webkit-overflow-scrolling: touch; transition: max-height .3s ease; } #wat-nav.open .drawer { max-height: calc(100svh - 64px); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -22px rgba(30,42,71,.5); } #wat-nav .seg, #wat-nav .main { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 20px 10px; border: 0; } #wat-nav .seg { border-bottom: 1px solid var(--rule); } #wat-nav .seg a, #wat-nav .main a { padding: 14px 0; font-size: 13px; width: 100%; } /* the segment links are the point of the menu — give them the weight */ #wat-nav .seg a { font-size: 15px; letter-spacing: .1em; color: var(--navy); } #wat-nav a.now::after { left: 0; right: auto; width: 22px; } #wat-nav .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 34px; height: 34px; background: none; border: 0; cursor: pointer; padding: 0; } #wat-nav .burger span { display: block; height: 2px; width: 22px; background: var(--navy); transition: transform .25s ease, opacity .25s ease; } #wat-nav.open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); } #wat-nav.open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); } } @media (prefers-reduced-motion: reduce) { #wat-nav *, #wat-nav .seg, #wat-nav .main { transition-duration: .01ms !important; } }