/* Page spacing and workbench captures. Uses the existing design tokens. */ /* ============================================================== the acts == */ section[id] { scroll-margin-top: calc(var(--bar) + 10px); } /* One idea, one screen, optically centred in it. */ .act { position: relative; min-height: 92vh; /* The px line first, the clamp() second: an engine that does not know clamp keeps a real gap instead of collapsing an act's padding to zero and dropping the folio on top of the eyebrow. */ padding: 110px 0; padding: clamp(78px, 10vh, 130px) 0; display: grid; /* minmax(0, 1fr), not the default `auto`: a grid column's automatic minimum is its content's min-content size, and the install line is one un-wrappable command. Left as `auto` the column grows to that command and takes the whole act off the right edge of a phone -- where body's overflow-x:hidden then clips the copy rather than scrolling it. The old block layout never had this because a block box just shrinks. */ grid-template-columns: minmax(0, 1fr); align-content: center; } /* And the item's own automatic minimum, which is the other half of the same rule: the track can be 1fr and the child will still refuse to go below its min-content unless it is told it may. */ .act > * { min-width: 0; } /* A 92vh act on a 1600px monitor is a poster nobody reads; cap it the way stage.css caps the hero. A media query rather than min(), for the same reason it gives there. */ @media (min-height: 1080px) { .act { min-height: 980px; } } /* The act counter. Written by sequence.js and re-written whenever a door hides some of them, because "hides 5 of 12" has to still be true after. */ /* A folio at the head of each act. Centred, because everything else on this page is, and set in plain px rather than a clamp() so that it lands in the same place on an engine that has never heard of clamp -- it is the one element that has to be in the identical spot on twelve screens in a row. The hero's scroll cue sits just above it and the two read as one column: an arrow, then the number of the act it is pointing at. */ .act[data-act]::before { content: attr(data-act); position: absolute; top: 32px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .32em; color: var(--faint); opacity: .5; pointer-events: none; z-index: 2; } @media (min-height: 900px) { .act[data-act]::before { top: 48px; } } /* Figures and the rail get air of their own rather than sharing a screen. px first, clamp second -- the same order the acts' padding is written in above, and here it is load-bearing twice over: an engine that drops the clamp() declaration drops `auto` with it, and the rail stops being centred at all rather than merely sitting closer to the heading. */ .figbox { margin-top: 46px; } .figbox { margin-top: clamp(32px, 4.6vw, 60px); } .railbox { max-width: 460px; margin: 46px auto 0; } .railbox { max-width: 460px; margin: clamp(34px, 5vw, 58px) auto 0; } /* `.stmt .note` was here: the one-sentence concession act, set as a whole screen with no heading. The act was cut from index.html and nothing else on the page uses either class, so the rules went with it rather than sitting here waiting to restyle something by accident. The reasoning is in index.html where the act stood. */ /* The hero's hand-off. The blanket reduced-motion block in motion.css stops this the same way it stops everything else. */ .cue-down { position: absolute; left: 50%; bottom: 30px; z-index: 2; margin: 0; transform: translateX(-50%); } .cue-down span { display: block; width: 11px; height: 11px; border-right: 1.5px solid var(--house); border-bottom: 1.5px solid var(--house); transform: rotate(45deg); animation: cue-fall 2.9s var(--ease) 2; } @keyframes cue-fall { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .32; } 50% { transform: rotate(45deg) translate(3px, 3px); opacity: .8; } } /* ============================================================ the hero == NOTE 1 fallout. The lamp block in stage.css lifts the print from brightness(.34) to .52 so the theatre actually reads; the scrim there was mixed against the darker plate and, over the brighter one, still closed the middle of the picture -- exactly where the boxes and the crowd are. Only the RADIAL is opened up here, and only in its inner two stops. The linear layer is left alone on purpose: its top keeps the header bar off the lanterns and its bottom is what dissolves the plate into the first act with no visible edge, and both of those jobs are unchanged by a brighter picture. The centre is still darker than the rim, so the headline keeps its own pool of ground to sit in -- 62px type over a woodblock print is only legible because of this layer. It is now a veil rather than a lid. */ .backdrop::after { background: radial-gradient(88% 60% at 50% 38%, rgba(12, 15, 22, .62) 0%, rgba(12, 15, 22, .38) 52%, rgba(12, 15, 22, .06) 100%), linear-gradient(180deg, rgba(21, 26, 35, .72) 0%, rgba(21, 26, 35, .28) 26%, rgba(21, 26, 35, .54) 66%, var(--ground) 100%); } /* ============================================================ the doors == NOTE 3. The three blocks are the page's only real control and nobody was pressing them: a heading, a paragraph and a small grey label look like an article, not a button. What is added is the shape this page already uses for "you may press this" -- the same pill as the header's Install and the chip's two buttons -- put at the end of every row, with the consequence directly beneath it so the promise and its cost are one object. It is a inside the existing