/* * The left plate: the cover, the chapter title pages, the story plate, the * contact sheet, and the typographic plate. */ /* * The plate's fields are the SAME tokens as the page's, mirrored. * * In the prototype the plate invented its own padding, which resolved against * the half while --gut and --pad resolved against the frame: 60.4px inside the * spine on the left against 92px on the right at 1920, and the asymmetry * changed sign around 1180px. A spread whose four margins do not mirror reads * as a seam laid over two unrelated pages rather than as a binding. * 09-art-direction-review.md, G1 — the report's single most important finding. */ .plate { /* * cqi inside .plate-page is the HALF's width, while --gut and --pad on the * page resolve against the whole spread. Same token, two different numbers: * measured 54px inside the spine on the plate against 92px on the page. * These coefficients are the page's, doubled, so both halves land on the * same value and the four margins mirror. */ --plate-pad: clamp(18px, 6.8cqi, 58px); --plate-gut: clamp(54px, 11.2cqi, 92px); /* * The season seal's diameter, and the air between it and the type that sets * around it. Here rather than on `.stamp`, because `.coverlines` is a * sibling and has to compute its reservation from the same number. */ --stamp-size: clamp(58px, 8cqi, 86px); --stamp-gap: clamp(10px, 1.4cqi, 20px); position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--plate-pad) var(--plate-gut) var(--plate-pad) var(--plate-pad); color: #FFFFFF; opacity: 0; visibility: hidden; transition: opacity .6s cubic-bezier(.33, 0, .2, 1), visibility .6s; /* White type over a photograph needs a white ring, not a claret one. */ --focus: #FFFFFF; /* * Shared furniture — the credit rail, labels, meta — reads --ink-2 and * --ink-3. In the Ivory edition those are dark, and on a photographic plate * that put the rail's labels at 2.78:1 against the scrim. Rebinding them * here fixes every reuse at once rather than one selector at a time. */ --ink: #FFFFFF; /* * The colour that sits ON --ink. Not --paper: the page's paper is ivory, * and a white button carrying ivory text measured 1.00:1. */ --on-ink: #0C0B0B; --ink-2: rgba(255, 255, 255, .88); --ink-3: rgba(255, 255, 255, .78); --rule: rgba(255, 255, 255, .22); --rule-2: rgba(255, 255, 255, .5); } .plate a { /* * theme.json colours links from the root, which on a photographic plate is * the page's ink, not the plate's — measured 1.09:1 on every coverline. * Inherit from the plate instead. */ color: inherit; } .plate.is-on { opacity: 1; visibility: visible; z-index: 3; } /* * The outgoing plate is held opaque underneath for the length of the fade * rather than fading out alongside the incoming one. Two layers fading * independently expose the sheet beneath: measured at 25% at the midpoint, * lifting Day to 1.93x its true luminance and dropping Night to 0.53x, with * the headline falling from 13.07:1 to 2.13:1 for the middle third of every * transition. 11-motion-review.md, Part 1. */ .plate.is-leaving { opacity: 1; visibility: visible; z-index: 2; } .plate__frame { position: absolute; inset: 0; z-index: 0; /* * A FLAT DARK GROUND, AND NO GRADIENT. * * This was `linear-gradient(155deg, #B5B0A7, #37322E)` — a light warm grey * fading to a dark one — as the ground behind the photograph. It is only * ever seen while the picture is still arriving or if it never does, and in * both of those moments it is a large pale wash where a photograph belongs, * which is the reading the owner rejected: a cover under a light haze. * * A single dark colour is what the plate is. It also means anything asking * what is painted behind the masthead gets a dark answer rather than one * that changes down the box. */ background-color: #26221F; } .plate__img { width: 100%; height: 100%; object-fit: cover; } /* * THE LOCAL BACKINGS, AND THE ONLY TREATMENT THE PHOTOGRAPH GETS. * * One layer, ramped down the picture, carrying a per-band alpha that * `Tone\cover_style()` computed from what that band actually measures: exactly * enough to bring the colour chosen for that band to AA, and `rgba(6,5,5,0)` — * nothing at all — for every band that already carries its own type. * * On a properly dark cover and on a genuinely bright one every band is 0 and the * photograph is printed as it was taken. Only a mid-tone is touched, and only * where the type is. * * THE RAMP ACROSS THE WHOLE PLATE IS GONE, AND WITH IT A WHOLE CLASS OF BUG. * * It was one vertical gradient over the entire photograph with three alphas and * the stops `24% 30% 50% 58% 100%` typed into this file. Two things were wrong * with that, and the second one cannot be fixed by correcting the first. * * 1. THE STOPS HAD DRIFTED FROM THE BANDS. `Tone\regions()` had been re-cut to * 24/42/100 and these literals had not, so the `list` backing was painted six * points below the band it was computed for and the `foot` backing sixteen * points below its own. Measured on the installed 1.9.0 build at 1512, the * kicker sat at .419-.455 of the plate, took the LIST alpha of 0.41 from the * ramp, and was printed in a colour chosen from the FOOT's reading — which * had assumed an alpha of 0.11. One band's ground, another band's colour, a * third band's backing. * * 2. A RAMP IS A PARTITION AND THE LAYOUT IS NOT. The cover story's block starts * at .323 of the plate at 1280 and at .567 at 1024, so the bands that contain * it at each width OVERLAP across widths. Three boxes that overlap cannot be * three stops on one gradient, and forcing them to be is what made the stops * a compromise nobody had measured. * * So the treatment is local now — which is also what the brief asks for: "add * local backing only where needed". Each group of type carries its own, under * itself and nowhere else, at the alpha its own band was measured to need. A * cover whose every band reads on its own gets no treatment at all and the * photograph is printed exactly as it was taken, which on well-shot dark and * genuinely bright covers is the common case. * * `.plate__frame::before` keeps only the job it can still do honestly: nothing. * It is deleted rather than left at zero alpha, because an element that paints * nothing is one somebody restores a gradient into. */ /* * The backings, under the type and nowhere else. * * `--lift--` is written by `Tone\cover_style()` and is the exact * alpha that band needs to bring the colour that band was given to AA — 0 when * the picture already carries it. The fallback is `rgba(6,5,5,0)`: transparent, * so a plate with no photograph, or one measured by an older companion that * writes only two geometries, paints nothing. * * Each patch is a gradient that reaches zero on its own edges rather than a box * with a hard edge — four hard-edged slabs down a 390px cover is what the first * version of this looked like, and the seal's own vignette further down exists * for the same reason. */ .plate--cover .masthead--plate, .plate--cover .plate__rule, .plate--section .plate__rule, .plate--cover .plate__foot, .plate--section .plate__foot { position: relative; isolation: isolate; } .plate--cover .masthead--plate::before, .plate--cover .plate__rule::before, .plate--section .plate__rule::before, .plate--cover .plate__foot::before, .plate--section .plate__foot::before { content: ""; position: absolute; z-index: -1; pointer-events: none; } /* * The masthead group: the mark and the issue rule under it. * * On `.masthead--plate` and not on `.mast-zone`. The zone is `position: * absolute` in the three centre compositions — it leaves the flow and covers * the whole plate so the mark can sit in the middle of the picture — so a * backing anchored to it would be a wash over the entire cover in exactly the * composition an owner chooses to show the photograph off. The mark's own box * is the mark. */ .plate--cover .masthead--plate::before, .plate--cover .plate__rule::before, .plate--section .plate__rule::before { /* * FULL ALPHA UNDER THE TYPE, AND A FADE ONLY OUTSIDE IT. * * `Tone\backing_alpha()` solves for the alpha that brings the chosen colour * to exactly 4.5:1 on that band. It therefore assumes the alpha is actually * THERE, uniformly, under the type. The first version of this patch was a * radial that fell away from its own centre, so the average alpha under a * wide element was about half what the engine had solved for — measured on * the rendered page, the issue line came out at 4.06:1 where the engine had * computed 4.50. A backing that fades where the type is is not a backing. * * So the plateau is expressed in the same lengths as the inset: opaque from * one inset in to one inset from the end, which is exactly the element's own * box whatever its height, and transparent at both edges. * * Sideways it reaches the PLATE'S own edges and stops there — the negatives * are the plate's own padding, so the wash ends exactly where the picture * does. A patch that stopped at the type's left and right edges would draw * two vertical seams down the cover; one that overhung the plate would be * clipped by `.plate-page`, which `verify.mjs` reports as content cut off by * a clipping ancestor — measured at 293px past the clip at 1512 when this was * written as `-50cqi`, and it was right to. */ inset-block: -1em; inset-inline: calc(-1 * var(--plate-pad)) calc(-1 * var(--plate-gut)); background: linear-gradient( to bottom, rgba(6, 5, 5, 0) 0, var(--lift-mast, rgba(6, 5, 5, 0)) 1em, var(--lift-mast, rgba(6, 5, 5, 0)) calc(100% - 1em), rgba(6, 5, 5, 0) 100% ); } /* * The cover story's block. Wider than it is tall and anchored to the foot of * the plate, so a linear wash upward reads as the print convention it is rather * than as a panel. */ .plate--cover .plate__foot::before, .plate--section .plate__foot::before { inset-block: -1.4em calc(-1 * var(--plate-pad)); inset-inline: calc(-1 * var(--plate-pad)) calc(-1 * var(--plate-gut)); background: linear-gradient( to top, var(--lift-foot, rgba(6, 5, 5, 0)) 0, var(--lift-foot, rgba(6, 5, 5, 0)) calc(100% - 1.4em), rgba(6, 5, 5, 0) 100% ); } /* * The season seal's own patch. * * One rule, not three gated on a boolean, and at the alpha the engine solved for * rather than a hand-written 0.62. `--lift-seal` is `rgba(6,5,5,0)` on a cover * whose corner already carries the stamp, so nothing is painted there. * * The plateau reaches 70% of the ellipse, which is past the stamp's own edge — * the pseudo is inset a little over an em on each side, so the disc occupies * about the middle two thirds of it. A vignette that falls away from its centre * puts less than the solved alpha under the type at the very place the type is, * which is what the first version of the band patches did and what * `cover.mjs` measured as 3.88:1 against a computed 4.50. * * `.stamp` is already `position: absolute`, so it is its own containing block — * giving it `position: relative` drops it back into the flow and onto the * headline, which is a mistake this file has a note about further up. */ .plate--cover .stamp, .plate--section .stamp { isolation: isolate; } /* * A COVER CARRYING A CONTENTS LIST PUTS ITS SEAL AT THE FOOT. * * In its usual corner the stamp sits at the same height as the coverlines and * straddles the edge of their backing: measured on the high-contrast subject at * 820, the label stood on rgb(63,66,73) and the value on rgb(105,111,123) — * forty points apart inside one 86px disc. A seal half in and half out of a * treatment cannot be given a colour. * * It is a density rule and not a nudge: when the top of the cover is spoken for, * the seal goes where there is room for it. Beside the price line is where a * magazine puts one anyway. `Cover\get()` moves its reading down with it, so the * colour and the ground are still the same band's. */ .plate--listed .stamp { top: auto; bottom: 0; } /* * THE SEAL IS PRINTED, ALWAYS — IT DOES NOT FLOAT ON THE PHOTOGRAPH. * * It was an outlined disc with small caps inside it, standing on whatever the * picture happened to be, and it is the most fragile mark on the cover: the * smallest type, in a corner, over the least predictable part of the frame. * Across seven subjects measured at three widths in both editions it found a new * way to fail on almost every one — 1.92:1 straddling the coverlines' backing, * 3.11:1 on a foot that ramps to bright, 1.44:1 on busy mid-tone. Each fix moved * the failure to the next photograph, which is the signal that the element is * wrong rather than the numbers. * * So it carries its own ground, the way the menu trigger and the call to action * already do, on every cover: the disc is filled with the colour the band was * given and the type on it is the pair `Tone\cover_style()` worked out with that * colour. What a reader sees is a printed stamp, which is what it is, and the * photograph under it is untouched. */ /* * Only where there IS a photograph. A bare plate is the magazine's own paper, * nothing was measured and nothing is written, so the fill would fall back to * `--ink` and the type on it to a token rebound by the same rule — measured * 1.00:1 on the shim's own bare cover, which is a disc of one colour. An * outlined seal on paper is what a seal on paper looks like. */ .plate--cover:not(.plate--bare) .stamp, .plate--section:not(.plate--bare) .stamp { background: var(--fg-badge-mob, var(--ink)); border-color: transparent; color: var(--on-badge-mob, var(--on-ink, var(--paper))); } @media (min-width: 641px) and (max-width: 1120px), (min-width: 641px) and (pointer: coarse), (min-width: 641px) and (pointer: none), (min-width: 641px) and (hover: none) { .plate--cover:not(.plate--bare) .stamp, .plate--section:not(.plate--bare) .stamp { background: var(--fg-badge-tab, var(--fg-badge-mob, var(--ink))); color: var(--on-badge-tab, var(--on-badge-mob, var(--on-ink, var(--paper)))); } } @media (min-width: 1121px) and (pointer: fine) and (hover: hover) { .plate--cover:not(.plate--bare) .stamp, .plate--section:not(.plate--bare) .stamp { background: var(--fg-badge-desk, var(--ink)); color: var(--on-badge-desk, var(--on-ink, var(--paper))); } } /* * A COVER CARRYING A CONTENTS LIST DOES NOT PRINT A SEASON SEAL. — a density rule. * * The two have never fitted together. In its own corner the seal sits at the * same height as the coverlines and straddles the edge of their backing — one * disc, two grounds forty points apart, no colour that serves both. Moved to the * foot it lands under the cover story's own wash and inside the price line's * row. Every placement traded one collision for another, across seven subjects * at three widths. * * So the cover drops it, which is what a magazine does when the top of the cover * is spoken for: five stories and a seal is a contents page, not a cover. The * issue line above still carries the number, the city and the season, so nothing * a reader needs is lost — and an owner who wants the seal has a five-line * control that turns the list off. * * This is the same class of decision as `plate--listed`'s type sizes: when the * content does not fit the plate, something gives, and it is chosen rather than * clipped. */ .plate--listed .stamp { display: none; } /* The coverlines, and a section opener's name and standfirst: the `list` band. */ .plate--cover .coverlines, .plate--section .plate__section, .plate--section .plate__brief { position: relative; isolation: isolate; } .plate--cover .coverlines::before, .plate--section .plate__section::before, .plate--section .plate__brief::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset-block: -0.9em; inset-inline: calc(-1 * var(--plate-pad)) calc(-1 * var(--plate-gut)); background: linear-gradient( to bottom, rgba(6, 5, 5, 0) 0, var(--lift-list, rgba(6, 5, 5, 0)) 0.9em, var(--lift-list, rgba(6, 5, 5, 0)) calc(100% - 0.9em), rgba(6, 5, 5, 0) 100% ); } /* * WHICH GEOMETRY'S ALPHAS THESE ARE. * * The spread's by default, the phone's under the narrow-layout query, and the * tablet's after that — a subset of the narrow query, because a tablet is not a * large phone. Measured on one 1200x1800 master: a 390x844 plate keeps 69.3% of * the master's WIDTH and all of its height; an 820x1180 plate keeps all of the * width and 95.9% of the height. Those are different pixels, so a reading taken * on one is not evidence about the other, and until now every tablet took the * phone's. * * Written as a comma list of ANDed clauses rather than with `not`, because * CSSTidy mangles `not (…)` inside a media query list — the same reason the * narrow-layout query is a negated OR list. `css-check.php` enforces it. */ .plate { --lift-mast: var(--lift-mast-desk, rgba(6, 5, 5, 0)); --lift-list: var(--lift-list-desk, rgba(6, 5, 5, 0)); --lift-foot: var(--lift-foot-desk, rgba(6, 5, 5, 0)); --lift-seal: var(--lift-seal-desk, rgba(6, 5, 5, 0)); } @media (max-width: 1120px), (pointer: coarse), (pointer: none), (hover: none) { .plate { --lift-mast: var(--lift-mast-mob, rgba(6, 5, 5, 0)); --lift-list: var(--lift-list-mob, rgba(6, 5, 5, 0)); --lift-foot: var(--lift-foot-mob, rgba(6, 5, 5, 0)); --lift-seal: var(--lift-seal-mob, rgba(6, 5, 5, 0)); } } @media (min-width: 641px) and (max-width: 1120px), (min-width: 641px) and (pointer: coarse), (min-width: 641px) and (pointer: none), (min-width: 641px) and (hover: none) { .plate { --lift-mast: var(--lift-mast-tab, var(--lift-mast-mob, rgba(6, 5, 5, 0))); --lift-list: var(--lift-list-tab, var(--lift-list-mob, rgba(6, 5, 5, 0))); --lift-foot: var(--lift-foot-tab, var(--lift-foot-mob, rgba(6, 5, 5, 0))); --lift-seal: var(--lift-seal-tab, var(--lift-seal-mob, rgba(6, 5, 5, 0))); } } /* * THE SCRIM OVER THE WHOLE PHOTOGRAPH IS GONE. * * `.plate__frame::after` used to be * `linear-gradient(177deg, rgba(6,5,5,var(--scrim)) 0, …, rgba(6,5,5,.90) 100%)` * — 62 per cent of near-black across the top of every cover and 90 per cent * across the foot, whatever the picture was. Measured on the demonstration * stand by rendering the cover and the same file raw and differencing them: * the render was 101 points of red darker at the top of the plate, 58 at the * middle, 51 at the foot of the coverlines. That is not a treatment of a * photograph, it is a replacement for one, and on bright fashion photography it * reads as the haze the owner asked to have removed. * * What replaces it is `::before` above: a per-band alpha, computed from what * each band actually measures, zero wherever the picture carries its own type. */ .plate__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---------- The masthead's own layout zone (1.5.0) ---------- */ /* * WHY THE MASTHEAD HAS A ZONE OF ITS OWN. * * The mark used to be a bare item in this flow, taking the plate's whole width, * with no way for the owner to say how large it should be or where on the cover * it should sit. On a phone that meant one enormous desktop logotype across half * the hero, and when the 1.4.0 navigation strip changed the header's height the * mark moved with it — the owner reported it as the logo sliding down the cover. * * The zone is the mark's anchor. Its size is a per cent of the plate's own * column and its place is one of six compositions, both set per crop by the * owner. Nothing printed on the cover can reach either. * * A TOP COMPOSITION STAYS IN THE FLOW; A CENTRE COMPOSITION LEAVES IT. * * That is deliberate, and it is why there is no reserved band anywhere in this * file. Over the top of the plate the mark IS the first line of the cover and * the issue rule belongs directly under it, whatever height the owner's file and * size give it — a flow item does that exactly, and an absolute box can only * approximate it from the file's ratio. Set to the middle of the plate the mark * is over the photograph, where the cover deliberately has nothing else, so it * leaves the flow and gives the band back to the picture. * * `position: absolute` resolves against `.plate__body`, which is `relative` — so * `inset: 0` is the plate's own text column and the six compositions place the * mark inside exactly the box a top composition would have used. * * `pointer-events` is off in the floated case only, where the zone covers the * whole plate and would otherwise swallow every click on the cover. */ .mast-zone { z-index: 2; display: grid; /* * One track, the width of the zone. Without this the implicit track is * `auto` — it sizes to the mark's max-content, so a mark set wider than the * plate widened the track with it and `max-width: 100%` measured against the * widened track and clamped nothing. Measured at 390: the mark came out * 296px inside a 282px zone. */ grid-template-columns: 100%; /* The three crops. The two queries below swap in the tablet's and phone's. */ --mast-w: var(--mast-w-desk, 100%); --mast-dx: var(--mast-dx-desk, 0cqi); --mast-dy: var(--mast-dy-desk, 0cqi); } /* * AND BELOW THE SPREAD THE ZONE IS NOT DRAWN AT ALL — §1.7/§2. * * The masthead moves into the header row, beside the menu trigger, which is * what the owner asked for and what Anymag has always done: its * `inc/headers/header-cover.php` prints the trigger and `.cover-logo` in ONE * header inside the cover. Measured on 1.6.0 at 390x844 this theme had the * trigger at y=8 and the mark at y=74 with 66px of photograph between them — * "логотип находится ниже гамбургера, и над ним слишком много пустого * пространства", exactly. * * Hidden rather than moved, because one element cannot be in two subtrees: the * header is `position: fixed` outside the plate here and inside the right-hand * page on the spread. Exactly one copy is displayed at any width, so exactly * one is in the accessibility tree and the way home is announced once — see * page-top.php. * * The condition is the spread's own, negated, character for character. Written * as the OR list because CSSTidy mangles `not (…)` in a media query list. */ /* * AND IT IS `.masthead--plate` TOO — §1.9/§1, §1.9/§2. * * The rule above was written for the COVER, whose masthead is inside a * `.mast-zone` because the owner can place it. Four plates print the same * masthead WITHOUT that wrapper — the story, the index, the page and the plain * plate — so on those the rule reached nothing and the publication's mark was * printed twice on the first screen of a phone. * * Measured on the installed 1.8.0 build at 390x844, counting only marks the * browser actually renders: * * home 2 header y=11 (168x40) footer * section 2 header y=9 (168x44) footer * article 3 header y=9 (143x44) PLATE y=88 (309x74) footer * news 3 the same * page 3 the same * search 3 the same * 404 3 the same * * Two logotypes, 44px apart, at 44px and 74px tall, on the first screen — * which is the whole of "на статье появляется другой Header … это визуально * другая тема". It is not another header: it is this one, printed under a * second copy of the masthead that belongs to the spread. * * At 1121 and up every route is 2 and always was: there the plate IS the * left-hand page of the spread and carrying the masthead is what a left-hand * page does. */ @media (max-width: 1120px), (pointer: coarse), (pointer: none), (hover: none) { .mast-zone, .masthead--plate { display: none; } } .mast-zone > .brand { width: var(--mast-w); max-width: 100%; /* * The owner's fine adjustment, in per cent of the plate — the same unit the * size is in, bounded to a fifth of the plate either way by the model. A * translate rather than a margin so it never changes what is reserved below. */ translate: var(--mast-dx) var(--mast-dy); pointer-events: auto; } /* * The six compositions. * * `mid` rather than `center` in the class name because `center-center` reads as * a typo and `mid-mid` reads as a decision — see Cover\logo_style(), which does * the substitution. * * Each crop states BOTH cases, because the desktop rules are the base and a * phone set to a top composition has to undo a desktop set to a centre one. * * EVERY ONE OF THEM IS SCOPED TO `.mast-zone`, AND THAT IS NOT TIDINESS. * * They were bare class selectors. The header carries the same three classes now * — it has to, because below the spread the header is where the masthead is — * and `.mast--desk-top-left { position: static }` matched it, beat both * `.page-top { position: sticky }` and the narrow layout's `position: fixed` on * source order, and dropped the whole header out of the viewport: measured at * 390x844 with the bar at y=844, under the cover instead of over it. * * A modifier that describes one component must say which component. */ .mast-zone.mast--desk-top-left, .mast-zone.mast--desk-top-mid, .mast-zone.mast--desk-top-right { position: static; pointer-events: auto; } .mast-zone.mast--desk-mid-left, .mast-zone.mast--desk-mid, .mast-zone.mast--desk-mid-right { position: absolute; inset: 0; align-content: center; pointer-events: none; } .mast-zone.mast--desk-top-left, .mast-zone.mast--desk-mid-left { justify-items: start; } .mast-zone.mast--desk-top-mid, .mast-zone.mast--desk-mid { justify-items: center; } .mast-zone.mast--desk-top-right, .mast-zone.mast--desk-mid-right { justify-items: end; } @media (min-width: 641px) and (max-width: 1120px) { .mast-zone { --mast-w: var(--mast-w-tab, 100%); --mast-dx: var(--mast-dx-tab, 0cqi); --mast-dy: var(--mast-dy-tab, 0cqi); } .mast-zone.mast--tab-top-left, .mast-zone.mast--tab-top-mid, .mast-zone.mast--tab-top-right { position: static; pointer-events: auto; } .mast-zone.mast--tab-mid-left, .mast-zone.mast--tab-mid, .mast-zone.mast--tab-mid-right { position: absolute; inset: 0; align-content: center; pointer-events: none; } .mast-zone.mast--tab-top-left, .mast-zone.mast--tab-mid-left { justify-items: start; } .mast-zone.mast--tab-top-mid, .mast-zone.mast--tab-mid { justify-items: center; } .mast-zone.mast--tab-top-right, .mast-zone.mast--tab-mid-right { justify-items: end; } } @media (max-width: 640px) { .mast-zone { --mast-w: var(--mast-w-mob, 100%); --mast-dx: var(--mast-dx-mob, 0cqi); --mast-dy: var(--mast-dy-mob, 0cqi); } .mast-zone.mast--mob-top-left, .mast-zone.mast--mob-top-mid, .mast-zone.mast--mob-top-right { position: static; pointer-events: auto; } .mast-zone.mast--mob-mid-left, .mast-zone.mast--mob-mid, .mast-zone.mast--mob-mid-right { position: absolute; inset: 0; align-content: center; pointer-events: none; } .mast-zone.mast--mob-top-left, .mast-zone.mast--mob-mid-left { justify-items: start; } .mast-zone.mast--mob-top-mid, .mast-zone.mast--mob-mid { justify-items: center; } .mast-zone.mast--mob-top-right, .mast-zone.mast--mob-mid-right { justify-items: end; } } :root[data-split="45-55"] .plate { /* The plate is 45% of the spread, so the coefficients scale by 1/0.45. */ --plate-pad: clamp(18px, 7.56cqi, 58px); --plate-gut: clamp(54px, 12.44cqi, 92px); } /* ---------- Masthead and the brand mark ---------- */ /* * The mark links home, so the link has to be the mark's shape and not an inline * box collapsed around an SVG. `display: block` and the full width, the same as * what it wraps; the focus ring is then drawn around the wordmark rather than * around a two-pixel sliver of it. */ .brand__home { display: block; width: 100%; color: inherit; text-decoration: none; } .brand__wordmark svg { display: block; width: 100%; height: auto; } /* * TWO FILES IN THE MARKUP, ONE OF THEM VISIBLE. * * Both logotypes are printed by PHP on every page. Which one shows is decided * here and only here — no JavaScript, no `data-` attribute written after load, * no second paint. That is the whole answer to "never flash the wrong logo on * first paint": there is no moment at which the browser has one and then * changes to the other. * * The default is the light-ground variant, because the page's own paper is the * commonest ground. Anything darker overrides it below. * * `filter: invert()` appears nowhere in this file and must not. A logotype is * an asset the publication commissioned; inverting it is arithmetic on somebody * else's colours. */ .brand__logo { display: block; position: relative; } .brand__img { display: block; width: auto; max-width: 100%; height: var(--logo-h, 34px); object-fit: contain; object-position: left center; } .brand__img--dark { display: none; } /* * A dark ground: the Noir edition, a photographic plate, or a region the tone * sampler measured as dark. Each of these three is a separate cause and they * are listed rather than combined, because a selector list is an OR and CSSTidy * — which W3 Total Cache runs over this file — mangles `:is()` in some builds. */ :root[data-mode="dark"] .brand__img--light, .plate .brand__img--light, [data-mast-desk~="dark"] .brand__img--light, .brand--on-dark .brand__img--light { display: none; } :root[data-mode="dark"] .brand__img--dark, .plate .brand__img--dark, [data-mast-desk~="dark"] .brand__img--dark, .brand--on-dark .brand__img--dark { display: block; } /* * The mark on the plate is the masthead: the width its owner asked for, its own * proportions, and a ceiling so a very tall file cannot push the cover story * off the plate. A 2000px logo once rendered at 2000px and tore the spread in * half; this is that ceiling. * * WHO OWNS THIS MARK — §1.9.2, and it is decided by the WRAPPER, not by a * media query. * * Two plates print it. On a COVER — the homepage and a section landing — * `plate-cover.php` and `plate-section.php` wrap it in `.mast-zone`, which * declares `--mast-w` from the cover's own `--mast-w-desk`, so the Cover * Masthead size owns it. On the four INNER plates — the story, the index, the * page and the plain plate — there is no zone, nothing declares `--mast-w`, and * the mark takes the fallback below. That fallback is a DESIGN CONSTANT and no * setting claims it: the left-hand page of the spread carries the publication's * mark at the width of its column, the same on every inner page, which is what * a left-hand page does. * * `100%` and not `var(--mast-w-desk, 100%)`, deliberately. Reading the cover's * token here would let the Homepage screen resize the masthead on an article, * and one rendered mark cannot answer to a control on a screen that is not * about it. * * AND THE CEILING IS A BOUND, NOT THE ANSWER — §1.9.2/§2. * * It was `clamp(56px, 14cqh, 150px)`, and 14cqh is a fraction of the plate's * HEIGHT: it decided the everyday case rather than guarding the pathological * one. Measured on the demonstration stand with Cover Masthead Desktop at 100%, * which is what every install ships with: * * 1920 box 810.0x150.0 the 150px ceiling, not the owner's per cent * 1440 box 590.4x126.0 14cqh, not the owner's per cent * 1280 box 524.8x112.0 14cqh, not the owner's per cent * * At 100% the owner asks for the full column and gets whatever 14cqh happens to * be — which is the shape of "owner puts 30 and CSS makes it 40". * * The bound is `24cqi` now: a fraction of the left-hand page's own WIDTH rather * than of its height, so it scales with the thing the setting is a per cent OF. * `cqi` resolves against `.plate-page`, which is where `container-type` is * declared — the whole page, not the plate's text column. * * the column is about 82% of that, after the plate's padding * this publication's wordmark is 4.2:1 * so at 100% it renders 0.82 / 4.2 = 19.5cqi tall, and never reaches 24 * * A square file at 100% would be 82cqi and is held at 24 — which is the case the * ceiling exists for, and the only one it now touches. Measured at 1512 against * the `front-logo` fixture, whose logotype is 2.7:1: 227px under a 30cqi bound, * 181px under this one, 150px under the clamp that decided the everyday case. */ .brand--plate .brand__logo, .brand--plate .brand__wordmark { width: 100%; } .brand--plate .brand__img { width: 100%; height: auto; max-height: 24cqi; } /* * ---------- THE OWNER'S ONE OPTICAL CORRECTION — §1.9.2b/§1 ---------- * * `--top-inset` aligns the utility group with the top of the mark's BOX. A * logotype cropped to its letterforms puts its ink on that line. A file carrying * transparent room inside itself does not, and the two halves of the spread stop * agreeing while their boxes stay in register to the tenth of a pixel. * * The answer is a tighter file — the Branding screen measures the uploaded one * and says so when it is not. This is the correction for an owner who cannot * re-cut it: ONE number, theirs, bounded to ±12px by `Branding\offset_y()`, and * printed as a property only when they have set it. * * NOT a per-asset ink-bound alignment. The owner ruled that out and was right: * a placement computed from a pixel scan is different for every file, changes * under the owner on re-upload, and cannot be reasoned about when it is wrong. * * `translate` and not a margin, so the correction never changes what is reserved * around the mark — the row's height, the plate's rhythm and the space under the * masthead are all exactly what they were. It moves the ink and nothing else. * * Both places the mark stands on a line, because a file's padding is the file's * wherever it prints: the plate masthead on the spread, and the row's mark below * it. The footer is deliberately not included — it signs off at the foot of the * page and stands on no shared axis. */ .brand--plate .brand__img, .brand--plate .brand__wordmark, .brand--bar .brand__img, .brand--bar .brand__wordmark, .menu-panel .brand__img, .menu-panel .brand__wordmark { translate: 0 var(--logo-nudge-y, 0px); } /* * THE HEADER'S SIZE, THE FOOTER'S SIZE, AND THE COVER'S ARE THREE SETTINGS. * * One number used to size all of them and the cover took the plate's width * whatever anybody wanted, so making the mark smaller on a phone made it smaller * everywhere and the footer could not be set at all. `--logo-h-desk`, `-tab`, * `-mob` and `-foot` are written into the document by `Branding\tokens()` from * four separate settings; the cover's is a per cent of the plate and lives on * the plate. The tablet and the phone are only written when the owner has set * one, so the fallback chain here is what makes them inherit the desktop. */ :root { --logo-h: var(--logo-h-desk, 34px); } @media (min-width: 641px) and (max-width: 1120px) { :root { --logo-h: var(--logo-h-tab, var(--logo-h-desk, 34px)); } } @media (max-width: 640px) { :root { --logo-h: var(--logo-h-mob, var(--logo-h-desk, 34px)); } } /* * In the bar, the menu panel and the footer the mark sits in a line of type * rather than on a plate, so it takes the height the owner set and lets the * width follow. */ .brand--bar .brand__img, .menu-panel .brand__img, .footer .brand__img { width: auto; height: var(--logo-h, 34px); max-height: var(--logo-h, 34px); } /* * The wordmark at line height rather than plate width, in the same three * places. Without this the fallback SVG stretched to the width of the bar and * set the publication's name in 90px letters across a phone. */ .brand--bar .brand__wordmark, .menu-panel .brand__wordmark, .footer .brand__wordmark { display: block; width: auto; } .brand--bar .brand__wordmark svg, .menu-panel .brand__wordmark svg, .footer .brand__wordmark svg { width: auto; height: clamp(15px, 3.6vw, 20px); } /* * THE MARK IS ALSO THE WAY HOME, AND A THUMB HAS TO BE ABLE TO HIT IT. * * `.brand__home` wraps the whole mark and takes its height from it. In the bar * that is the logotype height — 34px by default — and where no logotype has been * uploaded it is the fallback wordmark, which is smaller again. Measured on the * installed build at 390, 412, 393, 430, 768, 820 and 1024 with touch: * * 222x34 the bar, on a site with a logotype * 222x15 the bar, on a site with none — the fallback wordmark * 309x36 the cover's masthead, same site * * All three are the link home, all three are under the 44px this project holds * itself to for a control, and the third is the largest thing on the screen and * still not a target. Only the second and third appear on a site nobody has * configured, which is why no suite had seen them. * * The link grows, the lettering does not: the mark keeps the height the owner * set and the box around it is centred at 44. In the bar and the footer that is * free — both are flex rows that already centre their contents. On the plate it * adds at most eight pixels above the masthead on a site with no logotype, and * the composition checks in verify.mjs, live.mjs and viewports.mjs all measure * the cover after it. */ .brand--bar .brand__home, .brand--plate .brand__home, .menu-panel .brand__home, .footer .brand__home { display: flex; align-items: center; min-height: 44px; } .brand__wordmark text { fill: var(--ink); font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 96; } .brand__wordmark--foil text { fill: url(#prom-foil); } .plate__rule { display: flex; justify-content: space-between; gap: 16px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-2); font-family: var(--sans); font-size: var(--label-fine); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; } /* ---------- Coverlines ---------- */ .coverlines { margin-top: clamp(20px, 4cqh, 46px); } /* * The seal owns a column, and the coverlines set around it. * * `.stamp` is absolutely positioned over the plate and the coverlines are in * normal flow beneath the masthead, so nothing stopped a headline running under * the seal. Measured on `front-cover` before this rule, with the seal tested * against its circle rather than its box: 22px of headline under it at 390, 5px * at 412, 22px at 820, 10px at 1512. * * It had never been seen because no fixture, clone or screenshot in this * project has ever had coverlines AND a seal at the same time — `coverlines` * defaults to 0 and the seal prints only when its text is set. * * The width is the seal's own, from the same custom property the seal is drawn * with, so the reservation tracks it at every viewport instead of being a * number that happens to work at one. `--stamp-gap` is the only judgement here. * * Only when there IS a seal. `.plate--sealed` is written by the template, so a * cover without one keeps the full measure. */ .plate--sealed .coverlines { padding-right: calc(var(--stamp-size) + var(--stamp-gap)); } /* * The mask the entrance rises out of clips with `overflow: clip` and a clip * margin, not `overflow: hidden`. * * Hidden is coterminous with the link on three sides — measured at 0px of slack * top, left and bottom for a ring that needs 3px — so it cut the focus * indicator off every coverline on the cover's primary navigation, leaving a * stray hairline 216px away. The 5px margin lets the ring out and still masks * the entrance, which travels 66px. 11-motion-review.md, Part 1. */ .coverlines__mask { display: block; overflow: clip; overflow-clip-margin: 5px; } /* * width: 100% because a