/* ========================================================================== mobile.css — the phone layout, from Figma 14532:15599 (402 x 874). LAST IN THE LIST, and that is the whole architecture. Everything here is an override of a rule that already exists somewhere else, at equal or lower specificity, so loading order is what makes it win. Nothing above it needs to know this file exists, and deleting it leaves the desktop site exactly as it was. THE DESKTOP HUD IS BUILT OUT OF 283px BOXES — the map, the coordinates, the panel and the progress bar are all `left:10px; width:283px`, which on a 1920 frame is a column down the left edge. Figma's phone frame keeps the 10px margin and lets every one of those run the FULL width instead: 402 - 20 = 382. So most of this file is one idea repeated — pin both edges, drop the fixed width — and the pieces inside then land where the design puts them without any of them being positioned again. MEASURED AGAINST THE FRAME, NOT COPIED FROM IT. Figma's y values are for a 874px-tall phone, and a phone is never 874px tall: the browser chrome moves, the address bar hides on scroll. So a distance from the BOTTOM stays a distance from the bottom (the panel at 90px, the progress at 38px — the same numbers desktop uses, because they are measured off the bar), and the one value that is genuinely a proportion of the height is written as one: the coordinates sit at 435/874 = 49.8%. WHY 720px. It is the breakpoint css/base.css already had, and a site with two breakpoints that disagree is worse than one with a breakpoint in a slightly wrong place. ========================================================================== */ @media (max-width: 720px){ /* ---------------- the HUD's four columns, all of them full width --------- */ .hud__map, .hud__panel, .hud__progress{ left: 10px; right: 10px; width: auto; } /* The map's inner box carries its own 283 — it is the hatched rectangle the corner ticks and the figure are positioned against, so widening only the wrapper left it at 283 inside a 382 column. Both, or neither. */ .hud__mapbox{ width: 100%; } /* The dim track is a string of slashes clipped to a box — it was 283px wide because that was the column. It is the column now. */ .hud__slashes{ width: 100%; } /* THE MAP'S LABELS ARE POSITIONED IN PIXELS off the left edge (the inline `left:` values in index.html are Figma's own, for a 283px box). At 382 the right-hand pair has to move with the right edge instead, or it sits in the middle of a box half again as wide. They are re-anchored rather than re-numbered: `right` beats the inline `left` only because the inline style sets left and this sets right on an absolutely positioned element — so both are declared, and `left:auto` is what actually releases the inline one. */ .hud__maplabels p[style*="190px"], .hud__maplabels p[style*="275px"], .hud__maplabels p[style*="234px"]{ left: auto !important; } /* Figma's own right-edge distances: "i am watching you" ends 21px in from the right, the // sits hard against it, "get out" lines up with the row above. */ .hud__maplabels p[style*="190px"]{ right: 21px; } /* i am watching you */ .hud__maplabels p[style*="275px"]{ right: 0; } /* the // after it */ .hud__maplabels p[style*="234px"]{ right: 21px; } /* get out */ /* ---------------- the coordinates --------------------------------------- TIGHT PAIRS AT THE TWO EDGES, not two 283px boxes with space-between. On 1920 those boxes have a screen between them; at 402 they overlap in the middle, which is what was happening — the longitude was printing to the LEFT of the latitude. Figma's phone frame draws them as a 60px group at x=0 and a 64px group at x=318, so they are exactly as wide as their type. top is Figma's 435/874. */ .hud__coord{ top: 49.8%; width: auto; gap: 10px; justify-content: flex-start; } .hud__coord--r{ justify-content: flex-end; } /* ---------------- the panel --------------------------------------------- The 219px body inside it is already centred by the panel's `align-items:center`, so widening the panel is the whole change: Figma has the body at x=81.5 of 382, and (382-219)/2 = 81.5 exactly. */ /* ---------------- the scroll label -------------------------------------- It shared `bottom:38px` with the progress bar, which is fine on 1920 where the bar ends at 293 and this sits at 1910. At 402 they are the same strip of screen and the word lands on the slashes. Figma's phone frame has no SCROLL label at all — the progress bar is the scroll indicator — so it goes, rather than being moved somewhere it was never drawn. */ .hud__scroll{ display: none; } /* ---------------- the bar ------------------------------------------------ IT OVERFLOWED. Three nav items at 16px gaps, then the clock, then a 124px button do not fit across 402px: "don't contact me" wrapped onto a second line and hung below the bar's 28px. The clock is the thing that gives, and the reasoning is that it is the only element here that is not navigation — it is a detail about where I am, and a phone already shows the time. Figma's phone frame predates it and has three nav items and the button, which is what this produces. */ .bar__left{ gap: 10px; } .bar__clock{ display: none; } .bar__mail{ /* One line, always. The wrap was the actual bug; this is the fix, and the narrower gap is what buys the room for it. */ white-space: nowrap; gap: 6px; padding: 0 5px; } /* ---------------- block 01's copy ---------------------------------------- THE COLUMN PARTS AROUND THE FIGURE'S SILHOUETTE, and --fig-w is the channel it keeps clear. At 420px — the desktop figure's width — there is no room left on either side of a 402px screen and every line is pushed off the edge. Figma's phone figure is 147 wide, so that is the channel. */ .about{ --fig-w: 147px; } /* ...AND THE FIGURE ITSELF. Figma draws it 296px tall in an 874px frame — 0.34 of the viewport where the desktop is 0.46. It is set HERE, on block 01's canvas alone, rather than in js/about-figure.js: the breakpoint is already in this file and a matchMedia over there would be a second copy of 720px to keep in step. js/about-figure.js reads this in measure() and falls back to its own dial wherever it is unset — which is every other canvas the same renderer draws, block 02's head included. */ #aboutFigure{ --fig-height: 0.34; } /* Figma's phone copy is roughly half the desktop size, which is what keeps the same number of words on a line a third of the width. The leading is a multiplier, so it follows on its own. */ .about__column{ --text-size: 6px; --line-gap: 3px; } /* ---------------- and the HUD stands down for it ------------------------- ON 1920 THE TWO NEVER MEET: the HUD is a 283px column down the left edge and the story runs past it in the middle. Full width, they are the same screen — the panel's "enemy detected" printed straight through the copy's "he took the picture", and both became unreadable. Figma's phone frames say the same thing in pictures: frame 1 is all HUD, and by the frame where the copy has arrived the map, the coordinates and the panel are gone and only the progress bar is left. So they go — as soon as the story starts moving, on js/hud.js's own travel figure. THE PROGRESS BAR AND THE BAR STAY, because they are the two things that are still true while you read: how far through you are, and how to leave. Transitioned rather than switched, so it is a hand-off and not a blink. */ .hud__map, .hud__coord, .hud__panel{ transition: opacity .3s linear; } .hud.is-deep .hud__map, .hud.is-deep .hud__coord, .hud.is-deep .hud__panel{ opacity: 0; } } /* ---------------- short screens --------------------------------------------- A phone in landscape, and any browser whose chrome eats the height. The HUD is four fixed strips plus a bar, and below about 620px they start meeting in the middle — the panel is 212px tall on its own. The copy and the figure are the page; the panel is the frame around it, so the panel is what goes. */ @media (max-width: 720px) and (max-height: 620px){ .hud__panel{ display: none; } }