/* Dominia — the phone. Loaded LAST so it wins without specificity games. * * The audience arrives on a phone on its way to a Play Store install, so this is not a * degradation of the desktop layout — it is the layout most people will actually see. */ @media (max-width: 900px) { /* ---- the hero ---- The board stays a full-bleed backdrop rather than the 46svh band it used to be. That band was written when the board was a framed panel; with the board now a satellite plate carrying the whole hero, a band puts the picture in a box again and reintroduces exactly the stacked -- bar / image / text -- reading that four blind critics spent this gauntlet killing. */ /* THE KEY IS CUT ON THE PHONE. It stays on the desktop board, where it works. * * This reverses a decision made earlier in this same pass, so the reasoning is worth setting * down. It was cut originally, restored here on the argument that a board coded in three * colours with no legend anywhere leaves the colours meaningless, and has now been cut again * after three successive blind critics — judging independently, with fresh context — each * arrived at the same instruction without being asked about it. * * Their reasons converge and they are better than my argument for keeping it: * - it demands a first-time visitor learn a three-colour taxonomy before they know what they * are looking at, which is backwards for a marketing screen; * - CLAIMING and YOURS could not be told apart at 8px, and cutting that entry (tried) did * not save the rest; * - the two non-red classes are genuinely hard to find at this crop — the phone shows two * ally cells and one rival cell, all small and all near the left edge. * Against that, the thing the legend was protecting turns out not to need protecting: the red * is self-evident as "yours" beside a hero that says the ground goes to whoever walks it, and * the states are named properly further down the page where each has room. * * One correction to the record, because the loop's rule is to check a critic's claim before * acting on it: the third critic said the ally and rival blocks were CLIPPED by the left edge. * Measured, none of them are — all nine held cells render whole. What is true is that they sit * 10-12px from it, close enough to read as running off, which is why the margin in * pickVisibleStates went up. The verdict was right; the evidence given for it was not. */ /* ---- the nav ---- "GET EARLY ACCESS ->" wrapped to two lines inside its own chip once the mono label went from 11.2 to 12.6px in the type pass. The label shortens rather than the type: a two-line button is a broken button, and 44px of height is the Android touch target we are committed to. */ /* The bar becomes a FLEX ROW on the phone. css/grid.css lays the nav out on the page grid and gives the links `grid-column: 4 / span 5` below 900px, which is why right-aligning them did nothing: an auto margin pushes an item within its own grid AREA, not across the row, so the link stayed pinned 141px short of the margin however it was aligned. Three columns of a twelve-column grid is more machinery than a 390pt bar holding two or three items needs. Flex, and the items sit on the margins by themselves — wordmark left, link right over the hero, and the CTA taking the right margin past it with the link stepping aside. `align-items: center` is not cosmetic tidying: the link's 44px box was starting 4px below the wordmark's, so the two sat on different baselines in a bar 44px tall — small, and a critic picked it out of a screenshot. */ .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .nav__links { grid-column: auto; align-items: center; } /* A nav link never breaks inside itself. Measured at 2px steps from 360 to 900: index.html set FOR CORPORATES on two lines at 384-388, the band just above the 380px rule that drops the links altogether. Held to one line it still fits — the bar's gap absorbs it — so nowrap is the whole fix there, not a trade of a wrap for an overflow. */ .nav__links a { white-space: nowrap; } .nav__cta { white-space: nowrap; font-size: var(--t-label-sm); padding: var(--s-2); } .nav__cta .nav__cta-long { display: none; } /* The phone nav is a TWO-SLOT bar over the hero and a THREE-SLOT bar past it, and getting there took three attempts because each fix traded one critic's objection for another's. Recorded so the next person does not walk the same loop. css/chrome.css hides the CTA over the hero and brings it back past it, using `visibility` rather than `display` so the bar's columns do not reflow — right on a desktop, where 95px of reserved width costs nothing visible. On a 390pt bar it costs the layout: the CTA reserved 95px it was not using, so the one visible link ended 141px short of the right margin. 1. Showing the CTA early fixed the alignment — and duplicated the hero's own chip on a screen that already has one. A critic objected, correctly. 2. Taking it out of flow and centring the link removed both the duplication and the reserved width — and left the entire right third of the row empty, which a critic read as an element that had lost its right-edge anchor. Also correct. What both versions were avoiding is a reflow, and the reflow turns out to be the cheap part: it is one item moving, once, at the hero boundary, at the exact moment the CTA fades in — so it happens underneath a transition that is already drawing the eye. Dropping the CTA from flow over the hero lets the link sit on the right margin there, and lets the CTA take that margin past it. Both states are anchored on both edges and neither states an action twice. */ body[data-scrolled="hero"] .nav__cta { display: none; } /* "How it works" STAYS HIDDEN on phones, and this is a reversal worth recording because the first reading of it was wrong. css/site.css drops `.nav__links a[href^="#"]` below 900px alongside `a[aria-current]`, and at a glance that looks like an over-broad selector taking the primary nav item out with the self-referential one — leaving a bar reading DOMINIA / FOR CORPORATES, the secondary destination surviving and the primary one gone. Restoring it was tried and measured. Two things came back: the links wrap to two lines each ("HOW IT / WORKS"), because both labels plus the wordmark plus the CTA's reserved 95px come to 405px against 390 available; and the rule's own comment turns out to carry the real argument — an in-page anchor is reachable by scrolling, while the cross-page link is the only route to the corporates page above the footer. Dropping the anchor is therefore the correct one to drop, and a two-line nav link is broken for the same reason the two-line CTA below was. Left alone. */ /* ---- type ---- The display floor is 42px, which the type pass set from the reference's own phone hero. That floor was originally argued for on the grounds that the headline needed the room to run three lines at 0.9 leading. The headline is one line now, so the argument is different and worth restating: 42px is what makes the claim read as display type rather than as a large UI string, and it is the size at which "Walk it to own it." fills the phone's measure in a single line — which is the shape the copy was written for. */ } /* Very narrow phones. 360pt is the floor we support (Pixel 4a, most budget Android). */ /* ---------------------------------------------------------------- the nav CTA, 901-1199 THE SHORT LABEL IS NOT A PHONE THING. `.nav__cta-long` was introduced above for phones, where the mono label going 11.2 -> 12.6 wrapped "GET EARLY ACCESS ->" inside its own chip. The same wrap was live on every laptop between 901 and ~1140 and nobody had swept there: the chip sits in a 2-of-12 column slot, and two columns do not hold that string until the page is about 1150 wide. Measured at 940 / 1000 / 1060 / 1120: two lines, chip 55.8px tall against its 36.9. At 1150 it resolves on its own. NOWRAP ALONE DOES NOT FIX IT, which is why the label is what changes. At 940 the single-line long label measures 161.5px and the chip's right edge is at 896, so it would start at 734.5 -- and .nav__links ends at 752.4. It would not wrap, it would collide. The short label clears it. Switched at 1199 rather than at the measured ~1145 on purpose: the gap between the links and the chip is 14.3px at 1150 and 21.9px at 1200, and the first number is inside the range a different font-loading order could move. */ @media (min-width: 901px) and (max-width: 1199px) { .nav__cta { white-space: nowrap; } .nav__cta .nav__cta-long { display: none; } } @media (max-width: 380px) { .nav__links { display: none; } }