/* ===== MOBILE DRILL-DOWN NAV (.mn-) ===== Apple-style push navigation, ported from the /store-demo `gn-` menu. The root view lists the top-level groups; tapping one slides it left and pushes the sub-view in from the right, with a back button to pop. Nothing here is hard-coded to the current links. mobile-nav.js builds the menu at runtime by reading #site-nav, so when the header changes in index.php the mobile menu follows on its own — do NOT duplicate the link list into this file or the JS. Progressive enhancement: the old flat mobile panel is only hidden once mobile-nav.js has run and set html.mn-ready. If the JS fails to load, the site falls back to its original menu rather than having none. Paired with /mobile-nav.js — both loaded site-wide via the custom_head setting. Standalone pages with their own (e.g. /news//) need the two tags added manually. */ :root { --mn-ease: cubic-bezier(0.32, 0.08, 0.24, 1); --mn-ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* The panel only exists below the header breakpoint. */ @media (min-width: 769px) { .mn { display: none !important; } } @media (max-width: 768px) { /* Retire the old flat panel — but only once the JS is alive. */ html.mn-ready #site-nav { display: none !important; } /* Scroll lock while the menu is open. */ html.mn-lock, html.mn-lock body { overflow: hidden; } .mn { position: fixed; top: 60px; /* sits under the 60px sticky header */ left: 0; right: 0; bottom: 0; z-index: 99; /* header is 100 — burger stays tappable */ background: rgba(0, 0, 0, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity 0.28s var(--mn-ease), visibility 0s linear 0.28s; } .mn.open { opacity: 1; visibility: visible; transition: opacity 0.28s var(--mn-ease); } /* Top padding is the breathing room under the sticky header — without it the first row sits flush against the header hairline. */ .mn-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 0 calc(56px + env(safe-area-inset-bottom)); } .mn-views { position: relative; } /* ----- view transitions ----- Only .current is rendered. During a push both views are current; the outgoing one is taken out of flow with .leaving so they overlay rather than stack, and the incoming one is delayed so the two don't collide. */ .mn-view { display: none; } .mn-view.current { display: block; } .mn-view.leaving { position: absolute; top: 0; left: 0; right: 0; } .mn-view.leave-fwd { animation: mnFwdOut 0.24s var(--mn-ease) both; } .mn-view.enter-fwd { animation: mnFwdIn 0.24s var(--mn-ease) 0.16s both; } .mn-view.leave-back { animation: mnBackOut 0.24s var(--mn-ease) both; } .mn-view.enter-back { animation: mnBackIn 0.24s var(--mn-ease) 0.16s both; } @keyframes mnFwdOut { to { opacity: 0; transform: translateX(-26%); } } @keyframes mnFwdIn { from { opacity: 0; transform: translateX(26%); } to { opacity: 1; transform: none; } } @keyframes mnBackOut { to { opacity: 0; transform: translateX(26%); } } @keyframes mnBackIn { from { opacity: 0; transform: translateX(-26%); } to { opacity: 1; transform: none; } } /* ----- rows ----- */ .mn-list { list-style: none; margin: 0; padding: 0; } .mn-list li { opacity: 0; border-bottom: 1px solid var(--border-subtle); } .mn-list li:last-child { border-bottom: 0; } /* Re-runs each time a view becomes current, which is the point — every push replays the stagger. --i is set inline by the JS. */ .mn-view.current .mn-list li { animation: mnRowIn 0.42s var(--mn-ease-out) both; animation-delay: calc(60ms + var(--i) * 22ms); } @keyframes mnRowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .mn-list a, .mn-list button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 0; padding: 15px 24px; background: none; border: 0; text-align: left; font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; line-height: 1.3; color: var(--text) !important; text-decoration: none !important; cursor: pointer; } .mn-list a:active, .mn-list button:active { color: var(--cyan) !important; } .mn-chev { color: var(--text-muted); flex: none; } /* Secondary rows inside a sub-view group read lighter than the group head. */ .mn-list.mn-sub-list a { font-size: 0.95rem; font-weight: 400; color: var(--text-secondary) !important; } .mn-list.mn-sub-list a:active { color: var(--cyan) !important; } /* ----- sub-view furniture ----- */ .mn-back { display: inline-flex; align-items: center; gap: 7px; padding: 4px 24px 14px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--cyan); } .mn-title { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 0 24px 24px; } .mn-label { display: block; margin: 26px 24px 2px; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .mn-group:first-child .mn-label { margin-top: 6px; } /* An unlabelled group after another one — the trailing "Request a connector" link — has no .mn-label to carry the gap, so it would butt straight against the list above it. */ .mn-group + .mn-group > .mn-list:first-child { margin-top: 20px; } /* ----- experience toggle, carried over from the desktop nav ----- */ .mn-xp { padding: 26px 24px 0; } .mn-xp .xp-toggle { margin: 0; display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .mn, .mn-view, .mn-view.current .mn-list li { animation: none !important; transition: none !important; } .mn-list li { opacity: 1; } }