/* --------------------------------------------------------------------------- BeDRY — phone navigation (shared by every page). Desktop is untouched: the toggle and panel only exist below 900px, which is exactly where `nav ul { display: none }` hides the links in each page's own stylesheet. The panel is position:fixed from the bottom of the header to the bottom of the screen, so it always fills the screen and never leaves a strip of page showing. Background scrolling is held back with overscroll-behavior rather than `overflow: hidden` on : the headers are position:sticky, and freezing the scroll container mid-page makes a sticky header jump out of view. --------------------------------------------------------------------------- */ .nav-toggle { display: none; } .nav-cta .cta-free { display: inline; } @media (max-width: 900px) { /* "Get Started — Free" becomes "Get Started" — room for the toggle */ .nav-cta .cta-free { display: none; } /* Circle, exactly as tall as the Get Started button next to it */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 49px; flex: none; padding: 0; /* = height of .btn beside it */ background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; } .nav-toggle:hover { background: var(--bg-soft); } .nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; transition: transform .18s ease, top .18s ease; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); } /* Full screen below the header; --hdr-h is set by nav.js from the real header */ .mobile-menu { position: fixed; left: 0; right: 0; top: var(--hdr-h, 68px); bottom: 0; z-index: 49; background: var(--bg); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 26px 0 36px; } .mobile-menu .mm-group + .mm-group { margin-top: 26px; } .mobile-menu .mm-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); } .mobile-menu ul { list-style: none; margin: 0; padding: 0; } .mobile-menu li + li { margin-top: 2px; } .mobile-menu a { display: block; padding: 11px 0; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; } .mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--brand); } } @media (min-width: 901px) { .mobile-menu { display: none !important; } }