/* Mobile nav drawer. * * The capture shipped Webflow's hamburger markup but not webflow.js, so the * button had no behaviour and `.make-grid.hide-mobile { display: none }` hid * the only menu below 992px — no navigation at all on a phone. This is a * self-contained replacement: nav-mobile.js clones the desktop links into the * panel below and toggles `.is-open` on . * * Desktop is untouched: the panel only exists under the same 991px breakpoint * styles.css uses to hide the desktop menu and show the button. */ .pk-nav { position: fixed; inset: 0; z-index: 998; /* under .fixed-element (999) so the bar stays tappable */ display: none; background: var(--c-bg); padding: 96px 6vw 6vh; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity .32s cubic-bezier(.22,1,.36,1), visibility .32s; } .pk-nav__links { display: flex; flex-direction: column; gap: 2px; } .pk-nav__link { display: block; padding: 10px 0; color: var(--c-text); font-size: clamp(2rem, 11vw, 3.2rem); font-weight: var(--font-weight--500); line-height: 1.02; letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--c-text-2); /* each link rides in behind its own mask */ opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); } .pk-nav__link[aria-current="page"] { color: var(--c-text-3); } /* The drawer's footer line. It was IBM Plex Mono at 13px/+0.04em — the last mono text left on the site, and the only one that survived the Insights labels going back to Switzer. This file is shared chrome, so the change lands on the homepage drawer too, which is the point: one label spec everywhere. Values are the site label tier from type-system.css (12px / 500 / +0.08em, as .pk-ps__step). */ .pk-nav__foot { color: var(--c-text-muted); font-size: var(--pk-text-label, 12px); font-weight: var(--pk-w-sub, 500); letter-spacing: var(--pk-tr-label, .08em); line-height: var(--pk-lh-meta, 1.3); text-transform: uppercase; opacity: 0; transition: opacity .4s ease .18s; } .pk-nav__foot a { color: inherit; text-decoration: underline; text-underline-offset: 4px; } /* open state */ html.pk-nav-open .pk-nav { opacity: 1; visibility: visible; } html.pk-nav-open .pk-nav__link { opacity: 1; transform: none; } html.pk-nav-open .pk-nav__foot { opacity: 1; } html.pk-nav-open, html.pk-nav-open body { overflow: hidden; } /* stagger: 60ms per link, only on the way in */ html.pk-nav-open .pk-nav__link:nth-child(1) { transition-delay: .06s; } html.pk-nav-open .pk-nav__link:nth-child(2) { transition-delay: .12s; } html.pk-nav-open .pk-nav__link:nth-child(3) { transition-delay: .18s; } html.pk-nav-open .pk-nav__link:nth-child(4) { transition-delay: .24s; } html.pk-nav-open .pk-nav__link:nth-child(5) { transition-delay: .30s; } /* the hamburger becomes a cross. The button holds a Lottie SVG, so the bars are drawn here rather than transformed — the SVG hides while open. */ .menu-button { position: relative; } html.pk-nav-open .menu-button > .lottie-white { opacity: 0; } .menu-button::before, .menu-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 1.5px; background: var(--c-text); opacity: 0; transition: opacity .2s ease, transform .32s cubic-bezier(.22,1,.36,1); transform: translate(-50%, -50%); } html.pk-nav-open .menu-button::before { opacity: 1; transform: translate(-50%,-50%) rotate(45deg); } html.pk-nav-open .menu-button::after { opacity: 1; transform: translate(-50%,-50%) rotate(-45deg); } @media (min-width: 992px) { /* desktop menu is visible up here — the panel must never exist */ .pk-nav { display: none !important; } } @media (max-width: 991px) { .pk-nav { display: flex; } } @media (prefers-reduced-motion: reduce) { .pk-nav, .pk-nav__link, .pk-nav__foot, .menu-button::before, .menu-button::after { transition-duration: .01ms !important; transition-delay: 0s !important; } .pk-nav__link { transform: none; } }