/* ============================================================================ XXVI — the integration layer, third delivery. THE TRANSITION, AND WHY IT IS SHAPED THIS WAY. The film's first frame is the page's own 26. Measured on the delivered page: at 1440x900 the page's mark is 625x346 at x=369 and the film draws its first frame at 624x344 at x=370 — the same mark, the same size, the same place. The two coincide at scrollY 3897, and the capability section ends at 3898. One pixel apart. So the film belongs immediately after the 26 and nowhere else. Putting it there means the pin engages exactly where the two marks already agree, and the handover needs no negative margin, no overlap and no trickery — the page scrolls to its 26, the film comes up over it on the same mark, and the mark then grows into the instrument, which is the film's own opening. The signature and the footer follow the film rather than preceding it. Nothing is covered: when the pin releases they scroll up as they always did, and the page ends where a page should. The second delivery put the film after the footer, which was stable but left the mark behind — the film arrived out of the ground, detached from the narrative. The first delivery pulled the section up a whole viewport to reach the mark and swallowed 732px of the page doing it. This needs neither, because the mark and the film already meet. ========================================================================== */ /* ---------- development labels -------------------------------------------- `.plate` is dropped from the markup. These two are written by the page's own scripts at run time, so they are taken off here: the masthead's concept name, and the footer's note about which mockup and exploration this came from. The footer itself stays, and so does its XXVI mark. */ .chrome .home{ display:none; } footer.sysfoot > p{ display:none; } /* ---------- orphans, and ONLY these two lines ------------------------------- Measured on the rendered page: the hero's lede dropped its last word onto a line of its own - "כמותי." at 1440 and 1280 in Hebrew, "funds." at 390 in English. It is the same fault in both languages at different widths, so the fix is the one that adapts per width rather than a hand-set max-width. `pretty`, not `balance`. Measured against the approved homepage at four widths in both languages: `balance` evens every line and so rewrote six wrappings that were already right, while `pretty` works only on the last line - it left all fourteen approved wrappings untouched and corrected exactly the two that were reported ("funds." at EN 390, "כמותי." at HE 1440 and 1280). Where it is unsupported nothing changes, which is the approved behaviour. THE HEADLINE IS NOT IN THIS LIST, and the reason is worth keeping. `.hero h1 .ln` carries `white-space:nowrap` - each span is an AUTHORED line. `text-wrap:balance` resets the wrap mode, so those spans began to wrap: "From ideas to / intelligent systems." became three lines, the headline's box grew from 181px to 272px, and because the hero is laid out from its foot the whole headline rose 91px. The same in Hebrew. Measured against the approved homepage in the same package, at 1440x900 and 390x844, both languages. Authored lines are not orphans, and nothing in the hero below `h1` was touched. */ .hero .lede, .hero .aud{ text-wrap:pretty; } /* ---------- the page's own furniture --------------------------------------- The page carries a fixed masthead and a scrim beneath it; the film carries its own watermark, corner mark and transport. Both sets on screen at once reads as a fault, so the page's leave ahead of the film's arrival. The 26 is not furniture: it stays, and it is what the two layers share. */ :root{ --chrome:1; } body:before{ opacity:var(--chrome); } /* THE ONE LANGUAGE CONTROL STAYS. Everything in the masthead fades as the film arrives - the wordmark, the scrim, the gradient - except the EN/HE pair, which is the website's single language control now that the film has none of its own. It is raised above the film's pin so it can still be clicked (the pin takes pointer events from 0.3 of the dissolve, and a control that is painted but cannot be clicked is worse than no control: a click on it simply times out). It also moves down a little as it is left alone. Measured, with the film on screen: the pair sits at y 32-55 at 1440x900 and the film draws its own identity line at y 26-44 and its section label at y 26-35 - and in Hebrew the pair moves to the left, straight over that identity line. 18px down (12 on a phone) clears both in both languages, and it travels only while everything around it is fading, so nothing appears to jump. */ .chrome{ opacity:1; z-index:110; background:linear-gradient(to bottom, rgba(8,9,11,calc(.94 * var(--chrome))), rgba(8,9,11,calc(.62 * var(--chrome))) 62%, rgba(8,9,11,0)); } .chrome > *:not(.chrome-r){ opacity:var(--chrome); } .chrome-r > *:not(.langs){ opacity:var(--chrome); } .chrome .langs{ opacity:1; } /* V17 · task 075 · THE PAIR NEVER MOVES. David: the EN/HE switch must always stay in one place. It used to drop 18 px (12 on a phone) as the masthead faded - the rule above, removed - and on the Results film it rose 40 px into the clear band above that film's top bar, and on a phone left with the film at the page's end (the rules after the Results box below, removed). Measured with today's films, the place it has at rest is clear of both other films in both languages, and of the Results film everywhere but its chapter row in English on a wide screen, which now ends before the pair (results_en/he.html, task 075). The old rules: .chrome .langs{ transform:translateY(calc((1 - var(--chrome)) * 18px)); } (12px at max-width:820px) */ /* task 077 · item 2 (David): the pair stands 4 px higher, on the very top line (1440: 28-51; phone 19-42), and still never moves */ .chrome .langs{ position:relative; top:-4px; } /* ---------- the Hebrew headline's leading ---------------------------------- `family.css` sets a floor of 1.34 on every RTL heading, and the reason is written there: lamed rises above the Latin ascender line and qof, final-kaf, final-nun and final-tsadi drop below the descender line. It is a floor for the SCRIPT, and on the hero's two lines it is far more room than the script needs - measured as lit pixels rather than font metrics: 1440x900 English 30px between the two lines Hebrew 59px 1280x800 English 27px Hebrew 29px 390x844 English 14px Hebrew 30px 360x800 English 13px Hebrew 27px Twice the leading, at the top of the page, is why the Hebrew headline sits high: its block is 236px against English's 181px, and the hero is laid out from its foot, so the extra height comes off the top. 1.22 on the hero's headline alone brings the measured gap to 30 / 29 / 16 / 15 against English's 30 / 27 / 14 / 13, and the first line's ink to within 13px of English's at 1440 and 7px at 390. The floor stays untouched for every other heading on the page. */ html[dir="rtl"] .hero h1{ line-height:1.22 !important; } /* ---------- opened from disk ------------------------------------------------ Over file:// Chrome refuses the webfonts as a cross-origin request and gives the film's frame its own opaque origin, so the brand typography is lost and the page cannot tell the film anything. The film's language is handled another way now (see site.js), but the fonts cannot be - so the page says so, quietly, and only there. */ .diskwarn{ position:fixed; inset-block-end:10px; inset-inline-start:12px; z-index:200; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); opacity:.75; pointer-events:none; max-inline-size:min(92vw, 560px); } /* ---------- section 02 ------------------------------------------------------ In normal flow, with its height in `svh` — the SMALL viewport height — and no script writing it. `vh` is the large viewport height on a phone, so a section measured in `vh` and then re-measured from `innerHeight` changes the document under the reader every time the address bar moves. */ .film{ position:relative; height:260svh; background:var(--ground); } .film-pin{ position:sticky; inset-block-start:0; height:100svh; overflow:hidden; background:var(--ground); opacity:0; pointer-events:none; /* above the page's own fixed layers: the scrim at 70, the masthead at 80 */ z-index:100; will-change:opacity; } /* While the section is still below the fold the film has to be able to cover the viewport, so that it can come up OVER the page's 26 rather than after it. Sticky cannot do that — it holds the element at the section's own top — so for that stretch the pin is fixed. It is released back to sticky at the moment the section's top reaches zero, which is where sticky would have put it anyway, so the swap moves nothing. */ .film-pin.ahead{ position:fixed; inset:0; height:100svh; } .film-pin > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--ground); } @supports not (height: 100svh){ .film{ height:260vh; } .film-pin, .film-pin.ahead{ height:100vh; } } /* ---------- mobile ---------------------------------------------------------- Two deliberate differences, not a scaled-down desktop. The runway is shorter: 260svh of pinned travel is a long way to push with a thumb and the film plays on a clock, not on scroll, so the distance buys nothing. The reveal is longer in proportion — see site.js. On a phone the page sizes its mark from its own layout (k=2.95 at 390 wide, a 287x159 mark) and the film from min(W/1440, H/820) (S=1.74, a 171x95 one), so the page's 26 is 1.69x the film's. The third delivery crossed them anyway and left two arcs of the larger mark standing above the smaller one. The fourth puts the page's mark into the film's own mapping over the first half of the dissolve — see "the register" in site.js — and the longer runway is the room that movement needs. */ @media (max-width:820px){ .film{ height:200svh; } @supports not (height: 100svh){ .film{ height:200vh; } } } /* ---------- V9 · the 26 is finished before the film arrives ----------------- In V8 the Optimization film began to dissolve in while the page's 26 was still being drawn: measured at 1440x900, the film was at 0.13 opacity when the 26 had not started to close (scroll 2800) and at 0.83 when it closed (3150), so the film's finished 26 was laid over the thirteen contracting circles - doubled strokes and stray marks, the "dirt". The drawing is untouched; the room after it is longer, so the 26 completes and the film then crosses it mark for mark, as designed. Measured: the 26 completes with the film's top 0.83 of a screen below the fold; the dissolve starts at 1.29 (desktop) and 1.57 (phone, longer runway), so the tail grows by 0.52 and 0.80 of a screen. */ /* task 075 · the dissolve after it is shorter (site.js: 0.55 -> 0.15 of a screen on desktop, 0.85 -> 0.60 on a phone), so the room is shorter by as much, and by a little of the margin that was left after the close: the film's first movement now comes right after the 26 has closed. Was 114svh / 142svh. */ /* task 077: the desktop dissolve is 0.35 of a screen again (site.js), so the desktop tail is 0.20 longer (was 69). */ .tail{ height:89vh; } @supports (height:100svh){ .tail{ height:89svh; } } @media (max-width:820px){ .tail{ height:112vh; } @supports (height:100svh){ .tail{ height:112svh; } } } /* ---------- V11 · section 04, the Results film ------------------------------ Two frames, one per language, in one box. The one on show is .on; a switch goes out in 0.12 s and comes in over 0.18 s, so two mirrored layouts are never laid over each other. Below 1100 x 640 results.js draws the box at 1280 x 800 and scales it to fit (.fit). */ .res-box{ position:absolute; inset:0; will-change:opacity; } .res-box.fit{ inset:auto; transform-origin:0 0; } .res-box > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--ground); opacity:0; visibility:hidden; transition:opacity .12s ease, visibility 0s linear .12s; } .res-box > iframe.on{ opacity:1; visibility:visible; transition:opacity .18s ease .12s, visibility 0s; } /* While this film is up, the page's EN/HE pair would sit on its top bar (the Optimization and Validation films leave that corner free; this one does not), so it moves up into the clear band above the bar. It uses translate, not transform, so the masthead's own transform above is left as it is. */ /* V17 · task 075: these moved the pair and are gone (the pair never moves; see "the one language control"): html.res-up .chrome .langs{ translate:0 calc(-40px - var(--res-leave, 0px)); } (wide screens) html.res-up .chrome .langs{ translate:0 calc(-1 * var(--res-leave, 0px)); } (phones) results.js still publishes res-up and --res-leave; nothing reads them for the pair now. */ /* V14 · A SECOND EN/HE ON THE SIGNATURE ROW (task 053). The masthead's pair leaves with the Results film (above), so for the last 160-180 px of the page, the signature and the footer, there was no language control in view. The signature row is laid out like the masthead, XXVI at the start, so the same pair sits at its end, at the masthead's own inset. It is in the page's flow below the film, so it never stands over the film. Its clicks go to the masthead's buttons (site.js), and brand.js marks the active language on every .langs, so the two never disagree. */ .sign .sign-langs{ position:absolute; top:0; inset-inline-end:26px; letter-spacing:normal; } /* V17 · task 075: the masthead's pair now stays in view to the page's end, so this second pair would stand in view with it - two language controls. It is kept in the page, hidden. */ .sign .sign-langs{ display:none; } @media (min-width:821px){ .sign .sign-langs{ inset-inline-end:clamp(30px,4.4vw,86px); } }