/* ============================================================ THE DRAWER — the phone's whole navigation, and nothing above 700px can see any of it. The phone used to be navigated by a floating pill of three words at the foot of the screen. Three words is all it could ever be, and the site is bigger than three words: the case studies, the resume, the mailbox and the four profiles have been listed in the desktop rail since the shell was built and had no way onto a phone at all. On the case pages the bar was worse than empty — its links still pointed at the about.html / work.html / play.html redirect stubs, and it marked the wrong one as the current page. So the rail comes to the phone, in the shape a phone reads: one button in the top-left corner, a panel that slides out from under it, and the page pushed aside behind it. Same TREE (js/shell.js), regrouped for a thumb — see js/drawer.js for what moves where and why. NOT a re-skin of .shell-side. That column is sticky, is as wide as a remembered localStorage number, carries a resize grip and a collapse toggle and a globe, and — fatally — its letterhead is driven by wireAskReveal(), which on a phone reads the hero at 100% of the screen, writes --ask-p: 0, and sets `inert` on the name. Every one of those would have to be undone here. This is a panel. Loaded on all five documents. Every rule is inside the one media query; js/drawer.js does its own matchMedia guard. ============================================================ */ @media (max-width: 700px) { /* THE WHOLE SCREEN. It was 81% — the reference's share, keeping a strip of the page visible so you could see it was still there — and a strip you cannot read is not reassurance, it is 74px of a 390px screen spent on a rumour of the page behind. Given all of it, the navigation gets room to be laid out rather than fitted in. What tells you the page is still there is the button in the corner, which never moved and is the way back. That was always the stronger signal; the strip was the weaker one standing next to it. */ :root { --m-drawer-w: 100%; --m-btn: 38px; /* both corner buttons, one number */ --m-btn-top: 12px; --m-btn-side: 14px; /* one left edge for the whole column: the mark, the labels and every glyph hang off this, so nothing in the panel is a pixel out */ --m-inset: 24px; } /* ============================================================ (GONE: THE PUSH — .shell travelling right and scaling to 0.88 behind the panel, with rounded corners, which was the gesture taken whole from the reference. It went with the strip. At 81% there was a page behind the drawer to push; at 100% there is nothing to see, so the transform was compositing an entire nine-thousand-pixel document into one layer to move it somewhere no one could look. This site has twice stopped drawing over exactly that kind of layer (css/styles.css's frost incident, js/case-overlay.js's iframe measurement), and this one was not even buying a picture. Its two preconditions STAY, on their own merits: the case studies' .read-progress is appended to (js/vicino.js and siblings) because a fixed bar has no business inside a transformable ancestor either way, and .globe-card is out of the phone document below because there is no hover here to open it. Neither is load-bearing for anything now — but if a push ever comes back, they are what makes it safe.) ============================================================ */ /* js/globe.js builds its card at parse time on EVERY page and appends it into #shell, and there is no hover on a phone to ever open it. It is already [hidden]; this also stops it being a fixed descendant of the element the push transforms. */ .globe-card { display: none !important; } /* ============================================================ THE PANEL ============================================================ */ .m-drawer { position: fixed; inset: 0 auto 0 0; z-index: 70; width: var(--m-drawer-w); display: flex; flex-direction: column; /* the rail's own material. --shell-surface (--g-100) against the card's --bg is the one considered step the whole frame is built on, and the drawer IS the rail — it should not invent a third surface to say so. */ background: var(--shell-surface); /* no border-right: at full width there is no edge for a seam to sit on, and a hairline against the screen's own edge is a line for nothing */ padding: calc(var(--m-btn-top) + var(--m-btn) + 18px) 0 calc(24px + env(safe-area-inset-bottom, 0px)); translate: -100% 0; /* visibility, not display: a display:none panel cannot transition, and a panel that is merely translated off-screen is still in the tab order. This is the pair that answers both. */ visibility: hidden; overscroll-behavior: contain; transition: translate var(--t-lift) var(--ease-lift), visibility var(--t-lift); } html.m-open .m-drawer { translate: 0 0; visibility: visible; } /* while a finger is on it the panel must track the pointer exactly — a transition here puts the panel on elastic (js/drawer.js) */ html.m-dragging .m-drawer { transition: none; } /* ---- the scrim, and it is the SCROLL LOCK. It covers every pixel of the page, so every touch meant for the page lands here instead — and `touch-action: none` means the browser will not pan from it. That is the whole lock: no overflow:hidden on (iOS honours it unevenly, and it would fight the pager's own per-screen scroll bank in js/mobile.js), no position:fixed body swap, no scrollY bookkeeping to get wrong. The panel's own overscroll-behavior closes the only other hole, and html { overscroll-behavior-y: none } (css/shell.css) already closed the rubber-band one. A