/** * Mobile off-canvas navigation * ========================================================================= * Styles the #a3-mobile-menu panel that header-new.php already renders, as a * drawer sliding in from the right. Everything is scoped under 991.98px so * the desktop header is untouched. */ @media (max-width: 991.98px) { .a3-site-header__mobile-menu { position: fixed; top: 0; right: 0; z-index: 1000; display: block !important; /* beats any display:none in the base theme */ width: min(86vw, 340px); height: 100dvh; max-height: 100dvh; padding: 88px 24px 32px; background: #fff; box-shadow: -18px 0 48px rgba(0, 0, 0, 0.18); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform 0.36s cubic-bezier(0.22, 0.85, 0.28, 1), visibility 0s linear 0.36s; } .a3-site-header__mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.36s cubic-bezier(0.22, 0.85, 0.28, 1), visibility 0s linear 0s; } .a3-mobile-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .a3-mobile-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; } /* Stop the page scrolling behind the drawer. */ html.a3-nav-locked, html.a3-nav-locked body { overflow: hidden; } /* The toggle sits above the drawer so it can also close it. */ .a3-site-header__mobile-toggle { position: relative; z-index: 1001; } /* Menu items inside the drawer. */ .a3-site-header__mobile-menu ul { margin: 0; padding: 0; list-style: none; } .a3-site-header__mobile-menu li { border-bottom: 1px solid #f4f4f5; } .a3-site-header__mobile-menu li:last-child { border-bottom: 0; } .a3-site-header__mobile-menu a { display: block; padding: 14px 0; font-size: 16px; font-weight: 500; line-height: 24px; color: #3F3F46; text-decoration: none; } .a3-site-header__mobile-menu a:hover, .a3-site-header__mobile-menu a:focus-visible { color: var(--primary, #ff6900); } } @media (prefers-reduced-motion: reduce) { .a3-site-header__mobile-menu, .a3-mobile-backdrop { transition: none; } } @media (max-width: 991.98px) { /* Close control, injected by mobile-nav.js - header-new.php has none. */ .a3-mobile-close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; background: #f4f4f5; border: 0; border-radius: 10px !important; color: #18181b; cursor: pointer; } .a3-mobile-close:hover, .a3-mobile-close:focus-visible { background: #e4e4e7; color: #18181b; } /* Give the drawer a proper header band instead of a blank 88px gap. */ .a3-site-header__mobile-menu { padding-top: 76px; background: #fff; } /* The floating CTA sits at z-index 999, the same layer as the backdrop, so * it floated over the dimmed page while the drawer was open. */ html.a3-nav-locked .a3-fcta-wrap { opacity: 0; visibility: hidden; pointer-events: none; } } @media (max-width: 991.98px) { /* The drawer is moved to by the script, so it is no longer scoped by * the header - restate the layer here and keep it above the backdrop. */ body > .a3-site-header__mobile-menu { z-index: 1001; } /* Hamburger and the drawer's own X were both visible at once. */ html.a3-nav-locked .a3-site-header__mobile-toggle { opacity: 0; pointer-events: none; } } @media (max-width: 991.98px) { /* Parent rows become a link + caret pair. */ .a3-site-header__mobile-menu li.menu-item-has-children { position: relative; } .a3-site-header__mobile-menu li.menu-item-has-children > a { padding-right: 44px; } .a3-mobile-sub-toggle { position: absolute; top: 4px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; padding: 0; background: transparent; border: 0; border-radius: 8px !important; color: #71717a; cursor: pointer; transition: transform 0.28s cubic-bezier(0.22, 0.85, 0.28, 1); } .a3-mobile-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--primary, #ff6900); } /* Collapsed by default; grid-template-rows animates to auto height. */ .a3-site-header__mobile-menu .sub-menu { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.85, 0.28, 1); } .a3-site-header__mobile-menu .sub-menu > * { min-height: 0; } .a3-site-header__mobile-menu li.is-expanded > .sub-menu { grid-template-rows: 1fr; } .a3-site-header__mobile-menu .sub-menu li { border-bottom: 0; } .a3-site-header__mobile-menu .sub-menu a { padding: 10px 0 10px 16px; font-size: 15px; font-weight: 400; color: #52525b; } } @media (max-width: 991.98px) { /* Tighter top: the X sits at 18 and is 40 tall, so 70 clears it with 12 of * breathing room instead of the previous 76 + blank band. */ .a3-site-header__mobile-menu { padding-top: 70px; } /* Header action buttons, cloned in by the script. */ .a3-mobile-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e4e4e7; } .a3-mobile-actions ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .a3-mobile-actions li { border-bottom: 0; } .a3-mobile-actions a { display: block; padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 600; text-align: center; } /* The last one is the primary CTA in the header, so keep it filled. */ .a3-mobile-actions li:last-child a { background: var(--primary, #ff6900); color: #fff; } .a3-mobile-actions li:not(:last-child) a { background: #f4f4f5; color: #18181b; } } /* Reserve the scrollbar gutter so locking the body on open does not shift the * page sideways - that horizontal snap is the "jump" when the drawer opens. */ html { scrollbar-gutter: stable; } @media (max-width: 991.98px) { /* Logo row at the top of the drawer, mirroring the header. The close button * is absolutely positioned, so the brand just needs to clear it. */ .a3-mobile-brand { display: flex; align-items: center; min-height: 40px; margin: 0 0 24px; padding-right: 52px; } .a3-mobile-brand a { display: inline-flex; align-items: center; gap: 8px; padding: 0; text-decoration: none; } .a3-mobile-brand img, .a3-mobile-brand svg { display: block; max-height: 32px; width: auto; } /* The brand now occupies the top, so the panel no longer needs the blank * band that was reserving space for the close button. */ .a3-site-header__mobile-menu { padding-top: 20px; } .a3-mobile-close { top: 16px; } } @media (max-width: 991.98px) { /* Match the desktop header buttons: square corners, not rounded. global.css * sets border-radius: 0 !important on buttons, so the drawer's clones need * !important too or they keep the 8px I gave them. */ .a3-mobile-actions a { display: block; width: 100%; padding: 16px 20px; border-radius: 0 !important; font-size: 15px; font-weight: 600; line-height: 24px; letter-spacing: 0.4px; text-align: center; } .a3-mobile-actions li:last-child a { background: var(--primary, #ff6900); color: #fff; } .a3-mobile-actions li:last-child a:hover, .a3-mobile-actions li:last-child a:focus-visible { background: var(--primary-hover, #e45f00); color: #fff; } .a3-mobile-actions li:not(:last-child) a { background: transparent; border: 1px solid #e4e4e7; color: #18181b; } } @media (max-width: 991.98px) { /* The cloned

s shrink-wrap, so the buttons came out at their text width * (166 / 89 / 150). Stretch them to the drawer so they read as a stack. */ .a3-mobile-actions ul { align-items: stretch; } .a3-mobile-actions li { display: block; width: 100%; } } @media (max-width: 991.98px) { /* Top row: logo and close button share a centre line, both 40px tall and * both starting at the panel's 24px top padding. Previously the panel had * 20px padding while the close sat at 16, so they were 8px out and the * whole row hugged the top edge. */ .a3-site-header__mobile-menu { padding-top: 24px; } .a3-mobile-close { top: 24px; right: 24px; } .a3-mobile-brand { min-height: 40px; margin-bottom: 28px; } } @media (max-width: 991.98px) { /* Desktop shows "Enterprise Sales" and "Log In" as plain text links and only * "Contact Sales" as a filled button. The drawer was boxing all three. */ .a3-mobile-actions li:not(:last-child) a { background: transparent; border: 0; padding: 12px 0; color: #18181b; font-weight: 600; text-align: left; } .a3-mobile-actions li:not(:last-child) a:hover, .a3-mobile-actions li:not(:last-child) a:focus-visible { color: var(--primary, #ff6900); } /* Only the CTA keeps the filled, square-cornered button treatment. */ .a3-mobile-actions li:last-child a { margin-top: 8px; padding: 16px 20px; text-align: center; } } @media (max-width: 991.98px) { /* Once moved to the panel inherits stray block margins from the * theme's element defaults, which showed as a gap above the logo and pushed * the drawer down. Zero them and pin it to the viewport top. */ body > #a3-mobile-menu.a3-site-header__mobile-menu { margin: 0 !important; top: 0 !important; inset-block-start: 0 !important; } } @media (max-width: 991.98px) { /* Square drawer - no rounded corners on the off-canvas panel. */ body > #a3-mobile-menu.a3-site-header__mobile-menu { border-radius: 0 !important; } } @media (max-width: 991.98px) { /* The header is position: sticky. Locking html/body with overflow:hidden * removes its scroll container, so it snaps from the top of the viewport to * its natural document position - measured jumping 0 -> -600 -> 0 on a page * scrolled 600px. Pinning it while the drawer is open holds it in place. */ html.a3-nav-locked .a3-site-header { position: fixed; top: 0; left: 0; right: 0; } }