/* ============================================================================ SUB: the sub page system (v1.1, approved by the founder on 9 Oct 2026 with the Trust, Product and Research mockups). Every page on Landing.Master that is not the homepage is built from this file, under ONE root:
. Loaded by Landing.Master after landing.css (the chrome) and landing-dial.css (the warm tokens on body.lp and the homepage itself, under .dl), so every token used here is already resolved there. Nothing here reaches the homepage: every page rule sits under .sp, and the three chrome rules below only match an aria-current="page" link, which the homepage never renders. Colours are tokens only (canon guard rule 4: no hex outside tos-site.css). The grammar (Timer\Plans\Website\Subpage_*_v1.0_2026-10-08_2059.html, system.md v1.1): - warm light paper, near black ink, ONE accent (orange) meaning "alive / needs you" - Montserrat for every heading and sentence; JetBrains Mono ONLY for records (times, sources, small labels, chapter numbers) - square corners, hairlines, no shadows, no pills, no glows, no coloured edge bars - one grand gesture per page, one dark band per page (the close, which the master draws) - mobile first: the rules outside media queries ARE the 390px phone - text never below 12px, tap targets 44px or more - motion is transform and opacity only; anything moving longer than 5s has Pause; reduced motion shows meaningful still states; everything reads without JavaScript Sections: 0 chrome on sub pages | 1-11 the approved system (system.css part C, as approved) | 12 plain pages (the same look without an instrument) | 13 right to left. The migration guide for the page lanes documents every class with its markup. ============================================================================ */ /* ---- 0. CHROME ON SUB PAGES ---- The page you are on is marked by the master (aria-current="page", LandingMaster.CurrentPath): on a desktop the nav link is ink with an orange underline, in the phone menu it carries an orange square, in the footer it is ink and semibold. A jump to a chapter lands under the nav. */ @media (min-width: 981px) { .lp-links a[aria-current="page"] { color: var(--lp-ink); border-bottom-color: var(--lp-accent); } } .lp-menu a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; background: var(--lp-accent); margin-inline-start: 12px; flex: none; } .lp-col a[aria-current="page"] { color: var(--lp-ink); font-weight: 600; } html:has(body.lp .sp) { scroll-behavior: smooth; scroll-padding-top: 80px; } html:has(body.lp .sp), body.lp:has(.sp) { overflow-x: clip; } /* ============================== 1-11. THE APPROVED SYSTEM (system.css part C, v1.1) ============================== */ /* ---- base ---- */ .sp { color: var(--lp-ink-2); line-height: 1.62; } .sp h1, .sp h2, .sp h3, .sp p, .sp ol, .sp ul, .sp dl, .sp dd, .sp figure, .sp blockquote, .sp table { margin: 0; padding: 0; } .sp ol, .sp ul { list-style: none; } .sp a { color: inherit; } .sp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; touch-action: manipulation; } .sp :focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; } .sp .close :focus-visible { outline-color: var(--dl-dink); } .sp .wrap { max-width: var(--lp-max); margin: 0 auto; padding-inline: var(--dl-g); } .sp .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* a record: the only place the mono appears (times, sources, small labels, numbers) */ .sp .rec { font-family: var(--tos-font-mono); font-size: 12px; font-weight: 450; letter-spacing: 0; line-height: 1.5; } .sp strong { font-weight: 600; color: var(--lp-ink); } /* ---- type scale (phone first; desktop steps at 1180px) ---- eyebrow 13 caps | h1 36-48 / 52-72 | h2 30-46 / 34-48 | h3 22 | lede 18 / 19 | body 17 / 18 | note 15 | rec 12 */ .sp .eyebrow { display: flex; align-items: center; gap: 10px; font: 600 13px/1.4 var(--tos-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink-2); } .sp .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; } .sp h1 { font: 600 clamp(36px, 10.2vw, 48px)/1.0 var(--tos-font-body); letter-spacing: -.04em; color: var(--lp-ink); margin-top: 12px; text-wrap: balance; } .sp h2 { font: 600 clamp(30px, 7.4vw, 46px)/1.06 var(--tos-font-body); letter-spacing: -.032em; color: var(--lp-ink); text-wrap: balance; } .sp h3 { font: 600 20px/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); } /* German compounds are wider than a phone heading ("Unternehmenssystemen" at 30px): let the browser hyphenate them where it can, instead of overflow-wrap cutting one letter onto a line of its own. */ html[lang^="de"] .sp h1, html[lang^="de"] .sp h2, html[lang^="de"] .sp h3 { -webkit-hyphens: auto; hyphens: auto; } .sp .lede { font-size: 18px; line-height: 1.55; color: var(--lp-ink-2); margin-top: 24px; max-width: 36em; } .sp .body > p { max-width: 34em; } .sp .body > p + p { margin-top: 16px; } .sp .body > .lead { font-size: 19px; line-height: 1.5; color: var(--lp-ink); } .sp .note { font-size: 15px; color: var(--lp-muted); margin-top: 14px; } .sp .chn { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font: 600 13px/1.4 var(--tos-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-ink-2); } .sp .chn .rec { font-size: 13px; font-weight: 600; color: var(--lp-accent-text); } .sp .more { margin-top: 24px; } .sp .more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lp-ink); text-decoration: none; border-bottom: 1px solid var(--lp-ink); } .sp .more a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 10px; margin-inline-end: 2px; } .sp .more a:hover { border-bottom-color: var(--lp-accent); } /* ---- buttons (the homepage's .btn) ---- */ .sp .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 2px; font: 600 16px/1 var(--tos-font-body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; } .sp .btn-p { background: var(--lp-accent); color: var(--lp-on-accent); } .sp .btn-s { border: 1px solid var(--lp-ink); color: var(--lp-ink); } .sp .btn-s:hover { background: var(--lp-ink); color: var(--lp-paper); } .sp .cta { display: grid; gap: 10px; margin-top: 28px; } @media (min-width: 480px) { .sp .cta { display: flex; flex-wrap: wrap; gap: 12px; } } /* ---- 1. PAGE HEADER (replaces the old "timer://path" hero) ---- .hd-a (eyebrow: the page's place in the site, h1) > .hd-fig (the page's alive figure: on a phone it sits in the first screen, straight after the h1) > .hd-b (lede, stamp: the dated record line). On a desktop .hd-a/.hd-b stack on the left and the figure holds the right. */ .sp .sp-head { padding-block: 20px 48px; } .sp .sp-head .hd-fig { margin-top: 22px; } .sp .stamp { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--lp-muted); } .sp .stamp svg { width: 18px; height: 18px; flex: none; } /* ---- 2. ON THIS PAGE: the index ledger (every chapter's answer, before the chapters) ---- */ .sp .sp-index { padding-block: 8px 56px; } .sp .list-tag { color: var(--lp-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sp .list-tag::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; } .sp .idx { border-top: 1px solid var(--lp-ink); } .sp .idx a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; column-gap: 10px; align-items: baseline; padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--lp-rule); text-decoration: none; } .sp .idx-n { grid-row: 1 / 3; color: var(--lp-accent-text); font-weight: 600; padding-top: 2px; } .sp .idx-k { color: var(--lp-muted); } .sp .idx-t { grid-column: 2; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--lp-ink); letter-spacing: -.01em; } .sp .idx a:hover .idx-t { text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ---- 3. CHAPTER ---- */ .sp .ch { padding-block: 64px 56px; border-top: 1px solid var(--lp-rule); } .sp .ch-b { margin-top: 22px; } .sp .ch-b > * + * { margin-top: 28px; } .sp .ch-b > .body + .body { margin-top: 16px; } /* ---- 4. FIGURE FRAME + CAPTION ---- A figure is drawn on the paper, never boxed: a record tag above (what it shows, orange square), the drawing, and a caption below in the body face. */ .sp .fig { position: relative; } .sp .fig-tag { display: flex; align-items: center; gap: 8px; color: var(--lp-muted); margin-bottom: 10px; } .sp .fig-tag::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; } .sp .fig-c { position: relative; } .sp .fig-c > svg { display: block; width: 100%; height: auto; overflow: visible; } .sp .fig-cap { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lp-rule); font-size: 15px; line-height: 1.5; color: var(--lp-ink-2); max-width: 40em; } /* labels drawn on a figure are real HTML pixels (never SVG text), so they stay 12px and up */ .sp .fl { position: absolute; white-space: nowrap; font: 600 13px/1.2 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-muted); transform: translate(var(--tx, -50%), var(--ty, -50%)); transition: opacity .35s ease, color .3s; } .sp .fl.rec { font-family: var(--tos-font-mono); font-weight: 450; font-size: 12px; letter-spacing: 0; } .sp .fl.ax-l { --tx: -100%; } .sp .fl.ax-r { --tx: 0%; } .sp .fl.ay-t { --ty: -100%; } .sp .fl.ay-b { --ty: 0%; } /* figure geometry vocabulary (SVG classes) */ .sp .g-bezel { fill: none; stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; } .sp .g-line { fill: none; stroke: var(--lp-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; } .sp .g-ticks line { stroke: var(--lp-rule-2); stroke-width: 1px; vector-effect: non-scaling-stroke; } .sp .g-ticks line.h { stroke: var(--lp-ink-2); stroke-width: 1.5px; } .sp .g-off { fill: var(--lp-dot-off); } .sp .g-ink { fill: var(--lp-ink); } .sp .g-on { fill: var(--lp-accent); } .sp .g-hand { stroke: var(--lp-accent); stroke-linecap: round; } /* ---- 5. LIVE FIGURE: one moment at a time, and it acts ---- Markup: .live[data-s][data-rest] > .fig (drawing, CSS reads data-s) + ol.live-steps (one li per moment) + .live-ctl (tabs + Pause, [hidden] until JS). Without JS: the drawing shows data-rest and every step reads as a list. With JS (.sp.js): the steps share ONE slot, the tabs choose, it advances on its own, Pause holds it, it stops off screen. Reduced motion: no advance, the rest state, tabs still choose. */ .sp .live-steps { margin-top: 16px; border-top: 1px solid var(--lp-rule); } .sp .live-steps li { padding: 14px 0 16px; border-bottom: 1px solid var(--lp-rule); } .sp .ls-k { display: flex; align-items: center; gap: 8px; color: var(--lp-ink); font-weight: 600; } .sp .ls-x { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--lp-ink); } .sp .ls-s { margin-top: 4px; color: var(--lp-muted); } .sp.js .live-steps { display: grid; border-top: 0; margin-top: 14px; } /* the swap is sequential, never a cross-fade: the outgoing moment leaves in 160ms, the incoming one starts only then (0 to 1 with a 6px rise), so two sentences are never both legible */ .sp.js .live-steps li, .sp .ro-set > * { grid-area: 1 / 1; border: 0; padding: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform 0s linear .16s, visibility 0s linear .16s; } .sp.js .live-steps li.on, .sp .ro-set > .on { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease .16s, transform .32s var(--dl-ease) .16s, visibility 0s linear .16s; } .sp .ro-set { display: grid; } .sp:not(.js) .ro-set > .live-steps.on li { opacity: 1; visibility: visible; transform: none; } .sp.js .live-steps li.on .ls-k::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; } /* the figure's head row: its record tag on the left, Pause on the right (the tabs keep the whole width under the readout, so four moments fit a 320px phone) */ .sp .fig-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .sp .fig-top .fig-tag { margin: 0; } .sp .live-ctl { display: flex; align-items: stretch; margin-top: 16px; } .sp .tabs { display: flex; flex: 1; min-width: 0; border-bottom: 1px solid var(--lp-rule); } .sp .tabs button, .sp .pause { min-height: 44px; padding: 0 4px; font: 500 13.5px/1.1 var(--tos-font-body); color: var(--lp-muted); } .sp .tabs button { flex: 1 1 0; min-width: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } /* a tab's name stays on one line; when a language's names do not fit the row (German: Vorgeschlagen, Freigegeben), sub.js marks the row .is-tight and the tabs take two columns, each wide enough */ .sp .tabs button { white-space: nowrap; overflow: hidden; } .sp .live-ctl.is-tight .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp .live-ctl.is-tight .tabs button { white-space: normal; overflow-wrap: anywhere; } .sp .tabs button.on { color: var(--lp-ink); font-weight: 600; border-bottom-color: var(--lp-ink); } .sp .pause { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--lp-rule-2); border-radius: 2px; color: var(--lp-ink); min-width: 72px; padding: 0 12px; margin-inline-start: 8px; } .sp .live-ctl .tabs { align-self: stretch; } /* the pause glyph: two bars, a triangle when held. On a 320-359px phone the word hides (it stays for screen readers) so four tabs keep their width */ .sp .pz-i { display: none; width: 10px; height: 12px; border-inline: 3px solid currentColor; flex: none; } .sp .pause[aria-pressed="true"] .pz-i { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-inline-start: 10px solid currentColor; } @media (max-width: 359px) { .sp .pause { min-width: 44px; padding: 0; } .sp .pz-i { display: block; } .sp .pz-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .sp .tabs button { font-size: 12.5px; padding: 0 2px; } } @media (min-width: 600px) { .sp .tabs button, .sp .pause { font-size: 14px; } } .sp .pause[aria-pressed="true"] { background: var(--lp-ink); color: var(--lp-paper); border-color: var(--lp-ink); } /* ---- 6. RECORD LIST (ledger): key in mono, the sentence in the body face ---- */ .sp .ledger { border-top: 1px solid var(--lp-ink); } .sp .ledger li { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--lp-rule); } .sp .lg-k { color: var(--lp-muted); } .sp .lg-x { font-size: 16px; line-height: 1.5; color: var(--lp-ink); } .sp .lg-x b { font-weight: 600; } .sp .lg-s { color: var(--lp-muted); } .sp .lg-s a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-accent); text-underline-offset: 4px; } /* a ledger whose rows are items of one kind (rights, verbs): a run of records on one line */ .sp .runs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--lp-ink); border-inline-start: 1px solid var(--lp-rule); } .sp .runs li { flex: 1 1 33%; min-width: 0; padding: 12px 12px 14px; border-inline-end: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule); } .sp .runs .rec { display: block; color: var(--lp-muted); } .sp .runs b { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; color: var(--lp-ink); } /* ---- 7. COMPARISON: a table on a desktop, one card per row on a phone ---- rows = the things compared, columns = what is asked of each. Every td carries data-l (its column's name), printed as the card's record key on a phone. */ .sp .cmp { width: 100%; border-collapse: collapse; } .sp .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .sp .cmp tr { display: block; border: 1px solid var(--lp-rule-2); padding: 16px; background: var(--lp-paper); } .sp .cmp tr + tr { margin-top: 12px; } .sp .cmp th[scope="row"] { display: block; text-align: start; font: 600 19px/1.3 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); padding-bottom: 10px; border-bottom: 1px solid var(--lp-rule); } .sp .cmp td { display: block; padding: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--lp-ink); } .sp .cmp td::before { content: attr(data-l); display: block; font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); } .sp .cmp .k-on { display: inline-flex; align-items: center; gap: 8px; } .sp .cmp .k-on::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; } @media (min-width: 760px) { .sp .cmp thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; display: table-header-group; } .sp .cmp tr { display: table-row; border: 0; padding: 0; background: none; } .sp .cmp th, .sp .cmp td { display: table-cell; vertical-align: top; text-align: start; padding: 14px 16px 16px 0; border-bottom: 1px solid var(--lp-rule); } .sp .cmp thead th { font: 450 12px/1.5 var(--tos-font-mono); color: var(--lp-muted); padding-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--lp-ink); } .sp .cmp { table-layout: fixed; } .sp .cmp thead th:first-child { width: 28%; } .sp .cmp thead th:last-child { width: 24%; } .sp .cmp th[scope="row"] { display: table-cell; font-size: 18px; padding: 14px 16px 16px 0; } .sp .cmp + .fig-cap { border-top: 0; padding-top: 0; } .sp .cmp td::before { display: none; } } /* ---- 8. CALLOUT: a held aside (an address, a status, a document to ask for) ---- */ .sp .callout { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 20px; } .sp .callout .rec { display: flex; align-items: center; gap: 8px; color: var(--lp-muted); } .sp .callout .rec::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; } .sp .callout.is-live .rec::before { background: var(--lp-accent); } .sp .callout p:not(.rec) { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--lp-ink); max-width: 36em; } .sp .callout .big { font: 600 clamp(20px, 5.6vw, 28px)/1.25 var(--tos-font-body); letter-spacing: -.02em; color: var(--lp-ink); overflow-wrap: anywhere; } .sp .callout .big a { text-decoration: underline; text-decoration-color: var(--lp-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; display: inline-flex; min-height: 44px; align-items: center; } /* ---- 9. RECORD CARD (the homepage's sealed decision record) ---- */ .sp .av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--lp-ink); color: var(--lp-paper); font: 600 12px/1 var(--tos-font-body); letter-spacing: .02em; flex: none; } .sp .rcard { border: 1px solid var(--lp-rule-2); background: var(--lp-paper); padding: 20px; } .sp .rc-k { color: var(--lp-muted); } .sp .rc-t { font: 600 19px/1.3 var(--tos-font-body); color: var(--lp-ink); letter-spacing: -.015em; margin-top: 4px; } .sp .rc-l { margin-top: 12px; border-top: 1px solid var(--lp-rule); } .sp .rc-l div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lp-rule); font-size: 15px; color: var(--lp-ink); } .sp .rc-l dt { color: var(--lp-muted); padding-top: 2px; } .sp .rc-ok { display: inline-flex; align-items: center; gap: 8px; } .sp .rc-ok .av { width: 22px; height: 22px; } .sp .rc-seal { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--lp-ink); } .sp .rc-seal::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--lp-ink); flex: none; } /* ---- 10. THE CLOSE: the one dark band, with the brand mark arriving ---- */ .sp .close { background: var(--dl-dark); color: var(--dl-dmut); } .sp .close-in { display: grid; gap: 36px; padding-top: 72px; padding-bottom: 80px; } .sp .close-dial { width: min(64vw, 260px); } .sp .close-dial svg { display: block; width: 100%; height: auto; } .sp .close .eyebrow { color: var(--dl-dink); } .sp .close h2 { color: var(--dl-dink); font-size: clamp(32px, 7.4vw, 56px); } .sp .close .btn-s { border-color: var(--dl-dink); color: var(--dl-dink); } .sp .close .btn-s:hover { background: var(--dl-dink); color: var(--dl-dark); } .sp .close .note { color: var(--dl-dmut); } /* the way on for a smaller team, under the audience line (10 Oct 2026): the homepage close's .small */ .sp .close .small { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--dl-drule); font-size: 16px; color: var(--dl-dink); } .sp .close .small a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dl-dink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .sp .cm-off { fill: var(--dl-dline); transform-box: fill-box; transform-origin: center; transition: transform .8s var(--dl-ease) 1.1s; } .sp .cm-on { fill: var(--lp-accent); opacity: 1; transform-box: fill-box; transform-origin: center; transition: opacity .3s ease, transform .3s ease; } .sp .cm-hand { stroke: var(--lp-accent); stroke-width: 70; stroke-linecap: round; transform-origin: 500px 500px; transition: opacity .6s ease 1.1s, transform .8s var(--dl-ease) 1.1s; } .sp .cm-hub { fill: var(--lp-accent); transform-box: fill-box; transform-origin: center; transition: transform .8s var(--dl-ease) 1.1s; } .sp .cm-ring { fill: none; stroke: var(--dl-dline); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: opacity .8s ease .9s; } /* JS present: the mark assembles when the band is reached (dots light, the hand arrives) */ .sp.js .close:not(.is-mark) .cm-on { opacity: 0; transform: scale(.82); } .sp.js .close:not(.is-mark) .cm-hand { opacity: 0; transform: scale(.4); } .sp.js .close:not(.is-mark) .cm-hub { transform: scale(.3); } .sp.js .close.is-mark .cm-ring { opacity: 0; } .sp .close .cm-on:nth-of-type(1) { transition-delay: .25s; } .sp .close .cm-on:nth-of-type(2) { transition-delay: .55s; } .sp .close .cm-on:nth-of-type(3) { transition-delay: .85s; } /* ---- 11. THE RUN: the homepage's scroll grammar ---- Copy on the left, ONE instrument on the right that stays and changes with every chapter. Markup: .run > .stage.bd[data-st] + section.ch[data-st] (> .ch-h + .inst.bd + .ch-b, and .ch-b may hold .step[data-st][data-s]). A chapter, or a step inside it, names the state the instrument shows (data-st, and data-s for a moment of a live sequence). The page's CSS draws every state from [data-st]; system.js only sets it. - desktop with JS: .stage is sticky in the right column and morphs as the chapters pass. - phone/tablet with JS: each chapter pins its own copy (.inst) in a band at the top while it reads and releases it at the chapter's end (the homepage's phone .inst). - without JS: every chapter shows its own .inst, still, at its own state (a 2-column chapter on a desktop). Nothing is lost. .ro-set holds one readout per state ([data-for] = state names, space separated); .tag-set the same for the instrument's record tag. */ .sp { --fig-hero: 100%; } .sp .stage { display: none; } .sp .run > .ch:first-child, .sp .run > .stage + .ch { border-top: 0; } /* the page header is the run's first chapter (.ch.hd): eyebrow + h1, the alive figure, lede */ .sp .run > .ch.hd { padding-block: 20px 48px; } .sp .ins-c { position: relative; width: min(100%, var(--ins-w, 100%)); margin: 0 auto; } .sp .ins-c > svg { display: block; width: 100%; height: auto; overflow: visible; } .sp .tag-set { display: grid; margin-bottom: 8px; } .sp .tag-set > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; color: var(--lp-muted); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; } .sp .tag-set > *::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; } .sp .tag-set > .on { opacity: 1; visibility: visible; transition: opacity .26s ease .16s, visibility 0s linear .16s; } .sp .ro-set { margin-top: 14px; } .sp .ro-k { display: flex; align-items: center; gap: 8px; color: var(--lp-ink); font-weight: 600; } .sp .ro-x { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--lp-ink); } /* a chapter's own copy of the instrument: the readout centred under it, as on the homepage */ .sp .inst:not(.is-hero) { margin-top: 28px; } .sp .inst:not(.is-hero) .ro-set { text-align: center; } .sp .inst:not(.is-hero) .ro-k { justify-content: center; } .sp .inst:not(.is-hero) .ro-x { font-size: 15px; max-width: 30em; margin-inline: auto; } .sp.js .run .inst:not(.is-hero) { --ins-w: clamp(176px, calc(42vh - 104px), 300px); position: sticky; top: var(--lp-nav-h); z-index: 20; background: var(--lp-paper); margin: 24px calc(-1 * var(--dl-g)) 0; padding: 14px var(--dl-g) 12px; border-block: 1px solid var(--lp-rule); } .sp.js .run .inst:not(.is-hero) .ro-set { margin-top: 10px; } /* a step is a stretch of the copy that moves the instrument; the current one is marked */ .sp .steps > .step + .step { margin-top: 24px; } .sp .ledger.steps > li.step + li.step { margin-top: 0; } .sp.js .run .ledger li.step.cur .lg-k { color: var(--lp-ink); display: flex; align-items: flex-start; gap: 6px; } .sp.js .run .ledger li.step.cur .lg-k::after { content: ""; width: 6px; height: 6px; background: var(--lp-accent); margin-top: 6px; flex: none; } /* ---- tablet ---- */ @media (min-width: 600px) { .sp .ledger li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; } .sp .lg-k { grid-row: 1 / 3; padding-top: 3px; } .sp .lg-x, .sp .lg-s { grid-column: 2; } .sp .idx a { grid-template-columns: 40px 200px minmax(0, 1fr) 16px; } .sp .idx-n { grid-row: auto; } .sp .idx-k { padding-top: 2px; } .sp .idx-t { grid-column: 3; } .sp .runs li { flex-basis: 20%; } .sp .close-dial { width: 300px; } } /* ---- desktop ---- */ @media (min-width: 1180px) { .sp h1 { font-size: clamp(52px, 4.6vw, 72px); line-height: .98; } .sp h2 { font-size: clamp(34px, 3.1vw, 48px); } .sp h3 { font-size: 22px; } .sp .lede { font-size: 19px; margin-top: 32px; max-width: 30em; } .sp .body > p { font-size: 18px; } .sp .body > .lead { font-size: 21px; } /* page header: words left, the page's alive figure right, one screen tall */ .sp .sp-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto 1fr; column-gap: 0; min-height: calc(100vh - var(--lp-nav-h)); padding-block: 40px 56px; } .sp .sp-head > .hd-a { grid-column: 1 / span 6; grid-row: 1; align-self: end; } .sp .sp-head > .hd-b { grid-column: 1 / span 6; grid-row: 2; align-self: start; } .sp .sp-head > .hd-fig { grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: center; margin-top: 0; } .sp .sp-index { padding-block: 24px 96px; } .sp .idx { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 0; } .sp .idx li { border-top: 1px solid var(--lp-ink); } .sp .idx li:nth-child(n+3) { border-top: 0; } .sp .idx a { grid-template-columns: 40px 170px minmax(0, 1fr) 16px; padding: 18px 0; } /* a chapter: its head holds still on the left while its body reads on the right */ .sp .ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 120px; } .sp .ch-h { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--lp-nav-h) + 48px); } .sp .ch-b { grid-column: 7 / span 6; margin-top: 0; } .sp .ch-b > * + * { margin-top: 36px; } .sp .ch-b > .body + .body { margin-top: 18px; } .sp .ch-b > .body:first-child { padding-top: 34px; } /* THE RUN on a desktop: one instrument, sized like the homepage's dial */ /* --fig-col: the instrument column (the homepage dial width); --fig-hero: the drawing, which also fits the screen height so the tag, the readout and the tab row stay on one screen */ .sp { --fig-col: min(620px, 44vw); --fig-hero: min(var(--fig-col), calc(100vh - var(--lp-nav-h) - 210px)); --run-gap: clamp(56px, 6vw, 120px); } .sp .run { display: grid; grid-template-columns: minmax(0, 1fr) var(--fig-col); column-gap: var(--run-gap); align-items: start; } .sp .run > .ch { grid-column: 1; display: block; padding: 18vh 0 14vh; min-height: 92vh; border-top: 0; } .sp .run > .ch > .ch-h, .sp .run > .ch > .ch-b, .sp .run > .ch > .hd-a, .sp .run > .ch > .hd-b { max-width: 560px; } .sp .run > .ch > .ch-h { position: static; } .sp .run > .ch > .ch-b { margin-top: 28px; } .sp .run > .ch > .ch-b > .body:first-child { padding-top: 0; } .sp .run > .ch.hd { min-height: calc(100vh - var(--lp-nav-h)); display: flex; flex-direction: column; justify-content: center; padding: 40px 0 72px; } .sp .run .steps > .step { min-height: 30vh; } .sp .run .steps > .step:last-child { min-height: 0; } .sp .run .ledger.steps > li.step { min-height: 24vh; padding-top: 18px; } .sp .run .ledger.steps > li.step:last-child { min-height: 0; } .sp.js .stage { display: block; grid-column: 2; grid-row: 1 / span 30; position: sticky; top: calc(var(--lp-nav-h) + max(12px, (100vh - var(--lp-nav-h) - var(--fig-hero) - 170px) / 2)); align-self: start; z-index: 1; } .sp .stage { --ins-w: var(--fig-hero); } .sp .stage .tag-set { margin-bottom: 10px; } .sp .stage .ro-set { text-align: center; margin-top: 8px; min-height: 66px; align-content: start; } .sp .stage .ro-k, .sp .stage .ls-k { justify-content: center; } .sp .stage .ro-x, .sp .stage .ls-x { font-size: 17px; max-width: 32em; margin-inline: auto; } .sp .stage .live-ctl { width: min(520px, 100%); margin: 10px auto 0; } .sp .stage:not(.is-live) .live-ctl { visibility: hidden; } .sp.js .run .inst { display: none; } /* without JS every chapter carries its own still instrument in the right column */ .sp:not(.js) .run > .ch { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) var(--fig-col); column-gap: var(--run-gap); align-content: start; } .sp:not(.js) .run > .ch > * { grid-column: 1; } .sp:not(.js) .run > .ch > .inst { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--lp-nav-h) + 40px); margin: 0; } .sp .close-in { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding-top: 140px; padding-bottom: 140px; align-items: center; } .sp .close-dial { grid-column: 1 / span 4; width: 100%; max-width: 400px; } .sp .close-t { grid-column: 7 / span 6; } } /* ---- reduced motion: states, never movement ---- */ @media (prefers-reduced-motion: reduce) { html:has(body.lp) { scroll-behavior: auto; } .sp *, .sp *::before, .sp *::after, body.lp:has(.sp) .lp-nav, body.lp:has(.sp) .lp-nav * { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; } } /* ============================== 12. PLAIN PAGES ============================== The same look without an instrument. A page gets a live instrument (the run, section 11) ONLY where it shows a real idea from that page; every other page is built from these. One site, not seventy dials. */ /* ---- 12.1 page header without a figure: words only, not a screen tall ---- */ .sp .sp-head.is-plain { padding-block: 28px 40px; } @media (min-width: 1180px) { .sp .sp-head.is-plain { display: block; min-height: 0; padding-block: 96px 80px; } .sp .sp-head.is-plain > .hd-a, .sp .sp-head.is-plain > .hd-b { max-width: 860px; } } /* ---- 12.2 a wide chapter: the head on top, the body across (tables, cards, long lists) ---- */ @media (min-width: 1180px) { .sp .ch.is-wide { display: block; } .sp .ch.is-wide > .ch-h { position: static; max-width: 860px; } .sp .ch.is-wide > .ch-b { margin-top: 44px; } } /* ---- 12.3 cards: items of one kind (cells, pillars, principles, modules, papers, cases). Hairline rows on a phone, two or three columns from 760px. Never boxed, never rounded.