/* --------------------------------------------------------------------------- Lusaxweb — Rupture THE PHONE, AND EVERY WINDOW THAT IS NOT A DESK. A fifth stylesheet, for the same reason there is a second, a third and a fourth: one subject per file. The other four are about material, about two pages and about a form. This one is about a WINDOW THAT IS THE WRONG SHAPE for all of them — a hand held upright, a tablet turned on its side, a laptop with the browser at half width, a phone on its back with 375 points of height to spend. IT IS LOADED LAST AND IT IS ENTIRELY INSIDE MEDIA QUERIES. Both halves of that are load-bearing: **Last**, so a rule in here beats the same selector at the same specificity in any of the four before it, and none of them has to be edited to make room. The alternative — reaching into `styles.home.css` to add a `max-width` block beside every rule it would modify — is how a change to one section silently moves another, which is the one failure this project has paid for most. **Entirely inside a query**, so at a desk this file computes to nothing. Not "nearly nothing": a rule outside a query here is a rule that changed the piece at every width, and the only way to be sure that has not happened is for there to be no such rule. The one exception is the safe-area block at the top, and it is an exception that cannot bite — `env()` resolves to zero on every display without an inset, so the tokens it declares are zero everywhere the queries below do not apply. THE BANDS, and each of them is a different question: 1440 a wide desk. Nothing here; it is named so the ladder is complete. 1100 a laptop, or a browser at half a monitor. Type and gutters tighten. 860 a tablet. The run behind the key (already handled in styles.css), columns start collapsing. 640 a phone held upright. THE BIG ONE. Compositions change, not sizes. 480 a small phone. Only what actually breaks at 375 points. h 620 a phone on its side, and every short window. The other axis. The width bands are the same four integers `core/device.js` carries as `BP`, and they are stated in both places because a stylesheet and a module cannot share a constant. The pair is named in both. --------------------------------------------------------------------------- */ /* --- the notch, the pill, and the rounded corner --------------------------- `viewport-fit=cover` is set in the document head, which is what lets the sheet run under the status bar and behind the home indicator — and which is also what puts the wordmark under a notch and the row of marks under the bar the reader swipes up on. So every fixed edge in the shell is inset by its own side's `env()`. Outside a query on purpose: these are zero on every display that has no inset, which is all of them but a phone, and writing them once means the landscape case — where the inset is on the LEFT and RIGHT and no width query would have caught it — is covered by the same four lines. */ :root { --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } .rail { left: calc(var(--pad-edge) + var(--safe-l)); right: calc(var(--pad-edge) + var(--safe-r)); } .rail--top { top: calc(var(--pad-edge) + var(--safe-t)); } .rail--bottom { bottom: calc(var(--pad-edge) + var(--safe-b)); } .crown { top: calc(var(--pad-edge) + var(--safe-t)); right: calc(var(--pad-edge) + var(--safe-r)); } /* =========================================================================== 1024 — AN UPRIGHT WINDOW. THE RUN IS TALLER, SO WHAT HANGS OFF IT MOVES. ======================================================================== */ /* --- the sentence over the run, floored off the crown ---------------------- `.creed` hangs off `--zone-top` — the top of the run, written by `resize()` in main.js — and it hangs UPWARD: its own height, sixty points, and a gutter. That is exactly right, and it has one assumption in it that used to be safe and is not any more: that there is room above the run to hang in. The upright composition (see `PORTRAIT` in ribbon/config.js) makes the work as tall as the screen allows, which on a 768 x 1024 tablet is 782 points and leaves the run's top edge at 141. Subtract the sentence, the sixty and the gutter and the line is set at seven points from the top of the screen — through the wordmark, the key, the dial and the pill. So the anchor gets a floor, and the floor is written as the crown's own height rather than as the number it happens to resolve to. Reading down: where the crown starts, how tall it is, the air under it, the sentence's own line, and then the two terms the base rule hangs by — which are added back because the `translateY` is about to take them off again. `1.4em` is the line at `line-height: 1.16` with slack, in the sentence's own type size, which is a clamp and therefore not a number that can be written here. On a phone the two are within a point of each other and nothing moves. On a tablet the floor wins and the sentence sits under the crown where it belongs. */ @media (max-width: 1024px) { .creed { top: max( var(--zone-top, 30vh), calc( var(--pad-edge) + var(--safe-t) + clamp(34px, 3vw, 42px) + 20px + 1.4em + 60px + clamp(30px, 4.4vh, 76px) ) ); } } /* =========================================================================== 640 — A HAND, HELD UPRIGHT The band where compositions change rather than sizes. Everything under this heading is a different arrangement of the same parts, not the desk's arrangement scaled down: a phone is not a small monitor, it is a different rectangle with a different reach and one thumb. ======================================================================== */ /* --- the filter capsule, bounded by the screen it is centred on ------------ The capsule is content-width — five words at a clamped size — and it is centred with a `translateX(-50%)`, so its two ends are equidistant from the centre line and NEITHER of them is bounded by anything. At 375 points the five labels come to some three hundred and eighty and the last one is cut in half by the right edge of the screen, with the first one cut by the left. Capped at the sheet's own width less the shell's margin. The component already has the behaviour for a list that does not fit — its rail scrolls — and it is a better answer than five labels squeezed until they stop being words, which is what shrinking the type further would have got. `max-width` and not `width`: at four tabs it still hugs them. */ @media (max-width: 640px) { .ventures__filter { max-width: calc(100% - (var(--pad-edge) + var(--safe-l)) - (var(--pad-edge) + var(--safe-r))); } } /* --- the answer's two halves, and the half that was missed ----------------- `styles.home.css` already folds this deck onto one column below 620: the card's own grid goes to `1fr` and the hairline between its halves lies down across the top of the answer. Every part of that is right and one part of it is incomplete — the fold was applied to `.faq__card-in`, and the ANSWER has a grid of its own. So the room and the answer stacked, and inside the answer the prose and the ledger stayed side by side at 1.28 to 1. On a 343-point column that is 178 points of paragraph — some five words to the line, at a size set for a measure three times that — against a 139-point ledger whose keys are set at `12.5em` and had already been folded onto one column by the same branch, two rules further down. The block was legible in the way a newspaper read through a letterbox is legible. 620 and not 640, deliberately: this is the same fold, and the hairline that turns with it is behind that number. Two thresholds for one movement is a window twenty points wide where the rule is vertical and the columns it divides are not there. The ledger's gap grows on the way, because it is now separated from the prose above it by nothing but space. */ @media (max-width: 620px) { .faq__ans { grid-template-columns: minmax(0, 1fr); } .faq__facts { margin-top: clamp(26px, 4vh, 40px); } } /* =========================================================================== 860 — THE COLUMN STOPS BEING WIDE ENOUGH TO HOLD TWO THINGS APART ======================================================================== */ /* --- the estimate, floored off the ordinal --------------------------------- The span is positioned at the WEEK: `left: var(--led-w)` with its own width translated back, so its trailing edge stands on the mark where the bar under the name stops. That is the whole idea of the line — a range read as a position rather than as two figures with a dash between them — and it holds as long as the mark is further along the column than the ordinal in the corner. On a narrow sheet it is not. `--led-w` is a share of a measure that is now 343 points, and a three-to-eight-week service marks at about a fifth of it: the span's leading edge lands at sixty-eight points, the ordinal ends at thirty-two, and the two are set in the same face at the same size on the same baseline. `04` and `3–8 WEEKS` printed through each other, on four of the eleven lines. Floored, not moved. `max()` keeps the mark wherever the mark is on every line that has room for it — nine of the eleven at 375, and all of them by the time the sheet is 600 — and only the ones that would collide are held off. What they lose is the exactness of the position; what they would otherwise lose is the ability to be read. 14ch, in the span's OWN font: two for the ordinal, two of gutter, and ten for the longest estimate in the set (`8–20 WEEKS`). A `ch` rather than a number because the caption is set at `--t-micro`, which is a clamp, so any figure in points is the right one at one width only. */ @media (max-width: 860px) { .led__span { /* The walk, given a wall to stop at. * * Read the base rule first: the numeral is parked with its trailing edge on * the week mark (`left: var(--led-w)` plus `translateX(-100%)`), and as the * line opens it TRAVELS left by `(1 - --pl) · --led-w` — from the high week * to the low one, so the distance it covers is the estimate. On a wide * column that walk has the whole measure to happen in. * * On a narrow one it walks into the ordinal. `04` sits at the head of the * same caption, in the same face at the same size on the same baseline, and * at 375 points a three-to-eight-week service walks eighty-six points from a * mark that is only a hundred and thirty-seven along: the numeral finishes * three points off the LEFT EDGE OF THE SCREEN, printed straight through the * ordinal. Four of the eleven lines did it, and only while open — which on a * phone is whichever line is crossing the middle, so it was never the same * four twice. * * The walk is capped rather than cancelled. `min()` takes the shorter of * what the estimate asks for and what the room allows, and the room is the * mark less the numeral's own width less a gutter off the ordinal — `100%` * inside a translate is this element's own width, which is the one length * that cannot be written down here because the text is a different number of * characters on every line. `max(0px, …)` for the degenerate case where even * the resting position is inside the gutter: the numeral then holds still, * which is the correct reading of "there is no room to show a range". * * So on the lines that have the room the movement is untouched, and on the * ones that do not it is short. Nothing is hidden and nothing overlaps. */ transform: translateX(-100%) translateX(calc(-1 * var(--led-open) * max(0px, min( (1 - var(--pl, 1)) * var(--led-w), var(--led-w) - 100% - 5ch )))); } } /* =========================================================================== A THUMB IS NOT A CURSOR The shell's controls are drawn at the size the composition wants them, and that size is right: a 26px mark in a row of six is the whole reason the row reads as one object instead of six buttons. It is also, on a phone, half of what a thumb can reliably hit. SO NOTHING HERE CHANGES WHAT IS DRAWN. Every rule below adds an invisible box, centred on the control, and the control keeps its own geometry to the pixel — same circle, same ring, same air between the marks. What changes is only where a finger has to land. AND EVERY NUMBER IS MEASURED, NOT WISHED FOR. An expanded target that runs under its neighbour does not fix a dexterity test, it makes one you cannot see: the tap lands on the mark next door and nothing on screen says why. So in the axis where a control has neighbours the box takes THE PITCH — its own width plus the gap, no more, so two boxes meet exactly and never overlap — and in the axis where it has none it takes the full 44, which is the figure every platform's own guidance arrives at. Measured at 375 points, which is where the row is tightest: .social__item 26 wide, 2 of gap -> 28 x 44 (was 26 x 26) .rs__mark 17 wide, 5 of gap -> 22 x 44 (was 17 x 16) .rs__arrow alone on its side -> 44 x 44 (was 30 x 30) .foot__link 16 of leading -> full x 37 (was 21 tall) .menu .theme alone in the crown -> 44 x 44 (was 34 x 34) .sound alone in the corner -> 44 x 44 (was 30 x 30) .mark alone on its line -> full x 44 (was 18 tall) A coarse-pointer query and not a width: a tablet at 900 points is a hand, and a phone browser at 375 in desktop mode is still a hand. The question is what is doing the pointing, and that is the query that asks it. ======================================================================== */ @media (pointer: coarse) { /* The containing block for the boxes below, and nothing else: on a grid or flex item `position: relative` moves nothing and lays out nothing — it only gives the pseudo-element something to be absolute against. */ .social__item, .foot__link, .menu, .theme, .sound, .mark { position: relative; } .social__item::after, .rs__mark::after, .rs__arrow::after, .foot__link::after, .menu::after, .theme::after, .sound::after, .mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* Under everything the control draws, so a mark that paints its own background still paints it over this. It has no colour to show, but a stacking order that depends on the element having no background is a stacking order waiting for a background. */ z-index: -1; /* Not decoration and not a hover surface: a hit box. It must never be the thing a `:hover` or a mask reads, and on a coarse pointer there is no hover to read anyway. */ pointer-events: auto; } /* --- the row of marks at the foot ------------------------------------- */ .social__item::after { width: 28px; height: 44px; } /* --- the showreel's index, and the two arrows beside it ---------------- */ .rs__mark::after { width: 22px; height: 44px; } .rs__arrow::after { width: 44px; height: 44px; } /* --- the two columns in the foot --------------------------------------- */ .foot__link::after { /* The link's own measure. A text link is already wide enough to hit; what it has no way to be is tall enough, and the leading is all the room there is to take. */ width: 100%; height: 37px; } /* --- the crown, and the corner ----------------------------------------- */ .menu::after, .theme::after, .sound::after { width: 44px; height: 44px; } .mark::after { width: 100%; height: 44px; } }