/* ========================================================================== Moorwell - marketing site -------------------------------------------------------------------------- Self-contained by design. No CDN, no webfont, no remote image, no analytics. Every colour below is a token lifted from the app's own palette in lib/data/style.dart, so the site and the product read as one thing. Two themes, and the reader picks. The masthead carries a System / Light / Dark control; the choice is written to one localStorage key and read back by a short inline script in before first paint. With JavaScript off the control is hidden and prefers-color-scheme decides, which is what this page did before the control existed. Contrast, measured (WCAG 2.1, ratio against the surface each sits on): light body text 12.85 soft text 5.36 accent link 6.35 control border 3.07 hairline 1.19 (decorative, unbound) dark body text 13.91 soft text 7.61 accent link 5.42 control border 4.35 hairline 1.28 (decorative, unbound) A control *border* wants 3:1 (WCAG 1.4.11); text wants 4.5:1. Those are different jobs and --border is deliberately not drawn at text weight. Elevation is declared once per mode, following docs/Design Language.md: light surfaces carry a hairline border, dark surfaces carry a lifted fill and no border. A 1px border under a soft shadow is the ghost card. Radius rule for the whole site: cards 16px, small controls pill, inline code 6px. Nothing else. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Light palette (AppColors: bone, surface, ink, inkSoft, hairline, border, sageText). Light is the default, not a flip of the dark one: the page is bone rather than white, and the accent is the darkened sageText variant, because the original sage reaches only 3:1 on bone. */ --page: #f4f2ec; --surface: #fbfaf6; --surface-sunk: #efece3; --text: #2b2a28; --text-soft: #67645f; --hairline: #e4e0d6; --border: #8f897b; --accent: #4a5d46; --accent-quiet: #657961; --accent-on: #ffffff; --wash: color-mix(in srgb, var(--accent) 7%, transparent); --wash-strong: color-mix(in srgb, var(--accent) 13%, transparent); --chrome: rgba(244, 242, 236, 0.82); --shadow: 0 1px 2px rgba(43, 42, 40, 0.04), 0 16px 40px -20px rgba(43, 42, 40, 0.16); --card-border: 1px solid var(--hairline); /* Type */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --font-head: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Space */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --section: clamp(4rem, 9vw, 7.5rem); --measure: 62ch; /* The changelog's own column, narrower than --wrap and wider than --measure, because a release row is not a paragraph: it is a version rail, a summary at --measure's neighbour of 58ch, and a toggle, side by side. 60rem is the sum of those three plus the card's padding, which is why it is that number and not a round one. See section 15. */ --log-column: 60rem; --log-pad: clamp(1.25rem, 3vw, 2rem); --log-rail: 9rem; --log-gap: var(--s-7); /* Shape */ --r-card: 16px; /* ---- THE RAIL GAP ------------------------------------------------- The distance from a vertical rule to the text it identifies, in one place, because it was in seven and every one of them was too small. Reported plainly: *"the verticle line you draw in some places and then doesnt give any right space and put the text so close to the line it looks like a bug"*. It was 0.9rem-1.1rem, or about 15px, which is under the type's own line-height and reads as a collision rather than as an indent. 1.6rem is a little over one line of body copy, which is the distance that makes a rule read as a margin the text is set against. */ /* ---- THE SPACE SCALE ----------------------------------------------- Measured before it was written: the stylesheet carried **100 distinct hardcoded spacing values** โ€” 0.4, 0.5, 0.6, 0.625, 0.7, 0.75, 0.875, 0.9 and 1rem all in use, often within one component. That is not a rhythm, it is noise, and it is the web form of the defect the app audit found in its own units (`spaceScale` reaches only inside a card, so every gap between two cards is a hardcoded number). It is also the honest answer to a complaint the owner has now made three times about spacing. A reader cannot name it, but the eye reads eight near-identical gaps as a surface that was assembled rather than composed โ€” which is precisely the word that keeps coming back. A 4px base on a 1.5 ratio at the top end. The odd values below snap to the nearest step; the deliberate `clamp()` values are left alone, because a fluid value is a decision and these are not. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 3rem; --rail-gap: clamp(1.35rem, 2.4vw, 1.75rem); --claim-gap: clamp(2rem, 5vw, 4.5rem); --rail-gap-wide: clamp(1.6rem, 3vw, 2.25rem); --r-pill: 999px; --r-code: 6px; /* Section 21's block shadow. The ink triple --shadow already uses, at the alpha a zero-blur offset needs to read on bone. Not a new colour: the same 43, 42, 40 that section 18's --shadow-lift is built from. */ --spec-block: rgba(43, 42, 40, 0.28); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* -------------------------------------------------------------------------- Dark, twice, on purpose. -------------------------------------------------------------------------- One block for the reader who asked for it, one for the reader who asked their operating system instead. CSS has no way to write a single rule that matches both an attribute and a media query, and the alternatives (a `light-dark()` pair on every token, or a custom-property space toggle) cost more than they save. **KEEP THE TWO BODIES BYTE-IDENTICAL.** A token added to one and not the other is invisible until somebody tests the other path. Both selectors are specificity (0,2,0), and the media block comes second so an explicit `light` always wins over an OS that prefers dark. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Dark palette (AppColors: inkBg, inkSurface, inkText, inkTextSoft, inkHairline, inkBorder, sage). */ --page: #1c1e1d; --surface: #272a28; --surface-sunk: #222524; --text: #edeae2; --text-soft: #b2afa0; --hairline: #3a3d3a; --border: #858378; --accent: #83987e; --accent-quiet: #9ab094; --accent-on: #1c1e1d; --wash: color-mix(in srgb, var(--accent) 7%, transparent); --wash-strong: color-mix(in srgb, var(--accent) 13%, transparent); --chrome: rgba(28, 30, 29, 0.82); --shadow: none; --card-border: 1px solid transparent; /* Section 18: an opaque black shadow on the dark page reaches 1.253:1, so the ink block is invisible here. --hairline is 1.523 against the page and carries the same shape upward instead. */ --spec-block: #3a3d3a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sage"]) { /* ๐Ÿ”ด `:not([data-theme="sage"])` as well, and that is a bug fix rather than tidiness. This selector predates the third look: written as `:not([data-theme="light"])` it also matches `[data-theme="sage"]`, so a reader who chose Sage on a machine set to dark got Night's tokens painted under Sage's name. The attribute form was right and the media form silently disagreed with it โ€” which is the exact drift the byte-identical assertion below this file's first group exists to catch, in the one direction it could not see. */ --wash: color-mix(in srgb, var(--accent) 7%, transparent); --wash-strong: color-mix(in srgb, var(--accent) 13%, transparent); --chrome: rgba(28, 30, 29, 0.82); --card-border: 1px solid transparent; --spec-block: #3a3d3a; --page: #0c0a12; --surface: #19171f; --surface-sunk: #110f17; --text: #f6f3fb; --text-soft: #aba4be; --hairline: #2c2934; --border: #676274; --accent: #cfbdf2; --accent-quiet: #877b9f; --accent-on: #191325; --ink-sage: #a8afa6; --ink-dusk: #a6acb3; --ink-clay: #c8b3aa; --ink-heather: #aea9b8; --ink-sand: #b3aea0; } } /* Form controls, scrollbars and the canvas the browser paints outside the body all read `color-scheme`, not our variables. Without these two lines a forced theme leaves white scrollbars on a dark page. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* -------------------------------------------------------------------------- 1b. The accent family -------------------------------------------------------------------------- Sage, dusty blue, terracotta, mauve, ochre. All five are `AppColors` constants and all five already ship in the product; the page had been using one of them. Colour here is not decoration for its own sake. `lib/data/style.dart` records the decision and the evidence: the clinical constraint is a **chroma ceiling**, not an absence of hue - Valdez & Mehrabian put arousal in saturation, and the app's own rule moved to "muted is the default, not the whole idea". These are the muted accents, unchanged, at the chroma the app ships them at. Two variants per hue, because an accent has two jobs: --fill-* the tint behind a card. Decorative, not WCAG-bound. --ink-* the same hue darkened (light) or lifted (dark) only as far as AA needs. `AppColors.*Text` / `AppColors.*OnDark`. Never colour text with a --fill-*. That is the exact defect docs/Design Language.md records. -------------------------------------------------------------------------- */ :root { /* THE 2.0 FAMILY HUES, from 03-tokens-and-components.md's own table. These are one axis of the redesign that is easy to miss because no element names them directly: every card tint, every illustration wash and every bloom in the field reads `rgba(var(--hue), var(--fill))`, so replacing five triples here repaints the site's colour at page scale without touching a component. They are brighter and cleaner than 1.0's, which were chosen to be muted against a warm bone ground. The 2.0 ground is paler and the tints have to carry across it. Every `--ink-*` above was solved against tints computed from EXACTLY these triples โ€” 60 pairs, all clearing AA โ€” so the two sets move together or not at all. */ --rgb-sage: 174, 203, 158; --rgb-dusk: 170, 192, 218; --rgb-clay: 198, 124, 96; --rgb-heather: 186, 172, 214; --rgb-sand: 226, 208, 148; /* The tint alphas are a solved ceiling, not a taste setting. Above 0.22 the muted accents stop being decoration: --text-soft on the strongest tint drops under AA (4.23 at 0.30), and so does the accent heading over its own tint in dark (4.25). Both are the "solved against a background that is not the one rendered" defect docs/Design Language.md records. Raise these and re-run the numbers, or do not raise them. */ --fill: 0.17; --fill-hi: 0.22; --ink-sage: #4a5d46; --ink-dusk: #485c6f; --ink-clay: #7b503c; --ink-heather: #61556c; --ink-sand: #68593d; /* AppColors.moodScale - the reference ladder. Luminance ramps monotonically, so the scale still reads with colour removed. */ --mood-1: #5d5068; --mood-2: #516a80; --mood-3: #6e7a73; --mood-4: #70906c; --mood-5: #789783; } :root[data-theme="dark"] { --fill: 0.16; --fill-hi: 0.20; /* 0.20 in Night, not 0.22. ยง1b fixed 0.22 as the ceiling where the 1.0 hues stopped carrying --text-soft; the 2.0 hues are brighter, and sand โ€” the brightest of the five โ€” took soft text to 4.31 over the dark surface, under AA. Measured across all five hues and all three dark grounds, 0.20 is the highest alpha where every one of the fifteen pairs still clears: the worst is sand at 4.57. The light looks keep 0.22, where their own solve is clean. */ --ink-sage: #9fb59a; --ink-dusk: #9eb9d0; --ink-clay: #e1aa90; --ink-heather: #c0b0cd; --ink-sand: #c6b48f; --mood-1: #9083a2; --mood-2: #7f9dbb; --mood-3: #9aa79f; --mood-4: #93bb8e; --mood-5: #a6c9ad; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sage"]) { --fill: 0.16; --fill-hi: 0.20; /* 0.20 in Night, not 0.22. ยง1b fixed 0.22 as the ceiling where the 1.0 hues stopped carrying --text-soft; the 2.0 hues are brighter, and sand โ€” the brightest of the five โ€” took soft text to 4.31 over the dark surface, under AA. Measured across all five hues and all three dark grounds, 0.20 is the highest alpha where every one of the fifteen pairs still clears: the worst is sand at 4.57. The light looks keep 0.22, where their own solve is clean. */ --ink-sage: #9fb59a; --ink-dusk: #9eb9d0; --ink-clay: #e1aa90; --ink-heather: #c0b0cd; --ink-sand: #c6b48f; --mood-1: #9083a2; --mood-2: #7f9dbb; --mood-3: #9aa79f; --mood-4: #93bb8e; --mood-5: #a6c9ad; } } /* One class per hue. An element that carries it gets the tint, the readable ink, and a matching edge, and everything downstream reads --hue-* rather than naming a colour. */ .hue-sage { --hue: var(--rgb-sage); --hue-ink: var(--ink-sage); } .hue-dusk { --hue: var(--rgb-dusk); --hue-ink: var(--ink-dusk); } /* Clay tints at .20 where the other four tint at .24 โ€” the design's HUES table gives it its own alpha, and the reason is visible once you look for it: clay is the most saturated of the five, so an equal alpha reads louder than the rest and the family stops looking like one family. `--tint-a` was already the knob; nothing else had ever turned it. */ .hue-clay { --hue: var(--rgb-clay); --hue-ink: var(--ink-clay); --tint-a: 0.20; } .hue-heather{ --hue: var(--rgb-heather); --hue-ink: var(--ink-heather); } .hue-sand { --hue: var(--rgb-sand); --hue-ink: var(--ink-sand); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--text); } ul, ol, dl, dd { margin: 0; padding: 0; } li { list-style: none; } code { font-family: var(--font-mono); font-size: 0.88em; background: var(--wash); border-radius: var(--r-code); padding: 0.08em 0.28em; overflow-wrap: anywhere; } strong { font-weight: 600; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--wash-strong); } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); } .prose { max-width: var(--measure); } .section { padding-block: var(--section); } .section--sunk { background: var(--surface-sunk); border-block: 1px solid var(--hairline); } /* A plain section that has to sit next to another plain section. The sunk bands draw their own edges, so the only boundary the page was missing is the one below a page-coloured section followed by a page-coloured section. */ .section--edge { border-bottom: 1px solid var(--hairline); } .skip { position: absolute; left: var(--gutter); top: 0; z-index: 20; transform: translateY(-140%); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.6rem 1.1rem; font-size: 0.9375rem; text-decoration: none; } .skip:focus-visible { transform: translateY(0.75rem); } /* Available to a screen reader, not to the eye. Used for the two control legends and for the breathing announcement. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Type scale -------------------------------------------------------------------------- */ .display { font-size: clamp(2.375rem, 1.55rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; } .h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); line-height: 1.14; letter-spacing: -0.02em; } .h3 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.25; letter-spacing: -0.012em; } .lead { font-size: clamp(1.125rem, 1.03rem + 0.42vw, 1.3125rem); line-height: 1.55; color: var(--text-soft); } .soft { color: var(--text-soft); } .tiny { font-size: 0.9375rem; line-height: 1.55; } /* `.h2`, `.lead` and `.tiny` are TYPE classes โ€” size, leading and colour, no margin โ€” which is right, because the block rhythm belongs to the layout layer (`.flow`, `.stack`, `.prose`). Where one of them is a direct child of a plain `.wrap` there is no layout layer, so they abut: measured at 0px for `.h2` -> `.lead` on evidence and for the small print under the crisis directory on safety, twice each. ยง24's own comment already names the failure โ€” "a missing margin looks like a design choice". The values are not new: `.stack > .lead` already settled a heading's lead at --s-5, so these adjacencies answer the same question the same way rather than inventing a second answer. */ .h2 + .lead { margin-top: var(--s-5); } .dirs + .tiny { margin-top: var(--s-6); } .tiny + .tiny { margin-top: var(--s-4); } .section__head { max-width: 34ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .section__head p { margin-top: var(--s-4); max-width: var(--measure); } /* One head on the page carries a four-line lead rather than a one-line one, and 34ch turns that into a column. The measure is the cap that applies to every other paragraph on the page. */ .section__head--wide { max-width: var(--measure); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.6rem 1.5rem; border-radius: var(--r-pill); border: 1px solid transparent; font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease); } .btn--primary { background: var(--accent); color: var(--accent-on); } .btn--primary:hover { background: var(--accent-quiet); color: var(--accent-on); } .btn--quiet { background: transparent; color: var(--text); border-color: var(--border); } .btn--quiet:hover { background: var(--wash); color: var(--text); } /* Multiplied by the move channel rather than listed in section 33's reduce block, which is the idiom `.spec__card:active` already uses: the multiplier makes the transform identity AND the duration zero in one place, where the enumerated version has to remember both and be kept in step with a rule 500 lines away. Found by sweeping the CSSOM for interaction rules that set a transform โ€” section 33 says the move channel collapses under reduce, and five press states did not. */ .btn:active { transform: scale(calc(1 - 0.015 * var(--motion-move))); } /* 44px, not 40. The app's own floor is `AppTouch.minTarget = 44` and a marketing page that ships a smaller control than the product does is the wrong way round. */ .btn--small { min-height: 44px; padding: 0.35rem 1.1rem; font-size: 0.9375rem; } /* A link that reads as a next step rather than a button. */ .go { display: inline-block; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: border-color 180ms var(--ease), color 180ms var(--ease); } .go:hover { color: var(--text); border-bottom-color: var(--text); } /* -------------------------------------------------------------------------- 6. Masthead -------------------------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 10; background: var(--chrome); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--hairline); } .masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; min-height: 68px; padding-block: var(--s-3); } .brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text); text-decoration: none; font-family: var(--font-head); font-size: 1.1875rem; letter-spacing: -0.01em; } .brand svg { display: block; color: var(--accent); } /* The wordmark's Pebble โ€” 2026-10-10. It was a flat outlined circle with two dots and a smile, which read as a generic emoji rather than this product's mascot. This is the real thing: `web/favicon.png`, rendered from `PebblePainter` by `tool/icon/render_pebble_icon.dart`, so the mark on the site and the icon on the phone cannot drift. An image rather than inline SVG, so it keeps the gradient and the blush that make it a Pebble and not a circle; it carries its own colour on both themes, so it needs no `currentColor`. */ .brand__mark { display: block; width: 22px; height: 22px; object-fit: contain; } .masthead__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); } .masthead__nav a:not(.btn) { color: var(--text-soft); text-decoration: none; font-size: 0.9375rem; transition: color 180ms var(--ease); /* The target, not the text. This rule sets a size and a colour and no box, so what a finger actually gets is the 25px line box โ€” which clears WCAG 2.2 AA (24x24) by a single pixel and is well under the 44 this stylesheet demands of `.btn--small`, in a comment that says why: the app's own floor is 44 and a marketing page shipping a smaller control than the product is the wrong way round. It applied to buttons and never to the navigation. โš ๏ธ GROWN WITH PADDING, NOT WITH `display`. The first fix here was `display: inline-flex; align-items: center; min-height: 44px`, which is the standard recipe and was wrong in this bar. `.masthead__nav a:not(.btn)` is (0,2,1); the rule hiding the overflow links under 900px is `.masthead__nav .is-secondary` at (0,2,0), and it sits earlier in the file. So the recipe silently beat `display: none`, unhid the whole secondary set on mobile, and wrapped the navigation across three lines with "Changelog" clipped at the right edge. Every contrast and target measurement still passed โ€” the links were larger, more numerous and perfectly legible. Only a screenshot at 390px showed it. Vertical padding on an inline box extends the hit area and the background without touching the line box, so the target grows and the layout does not, and nothing here can ever collide with a `display` rule again. The `em` basis keeps it correct if the font size changes. */ padding-block: calc((44px - 1.65em) / 2); } .masthead__nav a:not(.btn):hover { color: var(--text); } /* The theme control is wide enough that the two quiet links have to go earlier than they used to. They are anchors on this same page and both are repeated in the footer. */ @media (max-width: 900px) { .masthead__nav .is-secondary { display: none; } } /* -------------------------------------------------------------------------- 6a. The phone's route to the rest of the site -------------------------------------------------------------------------- The rule directly above hides five of the six content links below 900px, so the only page a phone visitor could reach from the header was `Changelog` โ€” the developer changelog. The footer carries all twelve links, so this was usability rather than safety, but it is the wrong single link to be left with, and "scroll to the bottom" is not a navigation. โš ๏ธ THE OBVIOUS FIX IS THE ONE THAT WAS ALREADY TRIED. Unhiding `.is-secondary` on mobile is recorded a few rules above: it wrapped the navigation across three lines and clipped "Changelog" at the right edge, and every contrast and target measurement still passed โ€” only a screenshot at 390px found it. This adds a disclosure instead, so the header does not grow at all when it is closed. `
` rather than a scripted menu. It opens with no JavaScript, which matters here because the theme control below is hidden entirely when scripting is off: a navigation that needs a script to open is one that can fail closed. Keyboard operation and the expanded/collapsed announcement come from the element. Hidden above 900px, where all six links are already in the bar. -------------------------------------------------------------------------- */ .masthead__more { display: none; } @media (max-width: 900px) { /* ๐Ÿ”ด `static`, not `relative`, and that one word is a bug fix. With `position: relative` here, `.masthead__sheet` anchored to the summary. That is correct while the bar is one row and "More" sits at its right-hand end. Below about 600px the bar WRAPS, "More" lands on the left, and a panel pinned with `inset-inline-end: 0` to a control at x = 20 opens from x = 79 leftward: measured at **-113px to 79px** in a 390px viewport, so roughly 40% of the phone menu was off the left edge of the screen and the rest overlapped the logo. Every page, every phone width from 320 to 560; correct again by 700 where the bar stops wrapping. `tool/site_overflow.html` could not have caught it. That harness compares `scrollWidth` to `clientWidth`, and content escaping the LEFT edge produces no scrollable overflow in any browser โ€” the numbers it reads were honest and blind at the same time. It now checks both edges, with the disclosure open. Made static, the sheet's containing block becomes `.masthead`, which is `position: sticky` and spans the viewport at every width. The panel is then placed against the bar rather than against a control that moves. */ .masthead__more { display: block; position: static; } /* 44px, the same floor `.btn--small` is held to and for the same reason given there: the marketing page must not ship a smaller control than the product. Padding rather than `min-height`, so this can never collide with a `display` rule the way the navigation links did. */ .masthead__more > summary { list-style: none; cursor: pointer; color: var(--text-soft); font-size: 0.9375rem; padding-block: calc((44px - 1.65em) / 2); padding-inline: 0.35rem; transition: color 180ms var(--ease); } .masthead__more > summary::-webkit-details-marker { display: none; } .masthead__more > summary::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-inline-start: 0.45em; vertical-align: 0.15em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 180ms var(--ease); } .masthead__more[open] > summary, .masthead__more > summary:hover { color: var(--text); } .masthead__more[open] > summary::after { transform: rotate(-135deg); } /* Absolutely positioned so opening it does not move the page underneath a finger that is already reaching for something. The sticky masthead keeps its height whether this is open or shut. */ .masthead__sheet { position: absolute; /* Against the bar's own gutter, not against the summary โ€” see the note on `.masthead__more` above. `max-inline-size` is the belt to that braces: whatever the gutter resolves to, the panel cannot be wider than the screen it opens on. */ inset-inline-end: var(--gutter); max-inline-size: calc(100vw - (var(--gutter) * 2)); top: calc(100% + 0.5rem); z-index: 40; min-width: 12rem; display: flex; flex-direction: column; padding: 0.4rem; /* โš ๏ธ OPAQUE, and that is the point rather than a style choice. The masthead itself is glass, and the comment on `.masthead` records what that cost: at 0.72 alpha the bar's composited ground moved with whatever scrolled beneath it and "Changelog" measured 2.65:1 on one page. A panel that opens over arbitrary page content has that problem in its worst form, so it does not borrow the bar's glass โ€” it paints `--surface` and every link in it has a fixed ratio. */ background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-lift, 0 12px 32px rgb(0 0 0 / 0.18)); } .masthead__sheet a { /* `--text`, not the bar's `--text-soft`. The demoted ink in the masthead is a hierarchy against the links beside it; inside this panel there is nothing to be demoted relative to, and these are the only links a phone visitor gets. */ color: var(--text); text-decoration: none; font-size: 0.9375rem; padding-block: calc((44px - 1.65em) / 2); padding-inline: 0.6rem; border-radius: var(--r-card); } .masthead__sheet a:hover, .masthead__sheet a:focus-visible { color: var(--text); background: var(--fill); } } /* -------------------------------------------------------------------------- 6b. The theme control -------------------------------------------------------------------------- A radio group, not a two-state button. Three states have to be reachable - System is the page's original behaviour and removing it would be a regression - and `aria-pressed` is a boolean. Radios also give arrow-key traversal and a "selected" announcement for free, and the checked state is expressible in CSS without asking JavaScript for it. Hidden when JavaScript is off. A visible control that cannot do anything is a worse failure than no control: with no script the page follows prefers-color-scheme, exactly as it did before. -------------------------------------------------------------------------- */ .theme { display: none; margin: 0; padding: 0; border: 0; min-inline-size: 0; } :root[data-js] .theme { display: block; margin-inline-start: auto; } .theme__set { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); background: color-mix(in srgb, var(--surface) 70%, transparent); } /* Off-screen rather than `display: none`, which would take the radio out of the tab order and out of the accessibility tree. */ .theme__set input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .theme__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 0.85rem; font-size: 0.875rem; line-height: 1; color: var(--text-soft); cursor: pointer; user-select: none; border-radius: var(--r-pill); transition: background-color 200ms var(--ease), color 200ms var(--ease); } .theme__opt:hover { color: var(--text); } .theme__set input:checked + .theme__opt { background: rgba(var(--rgb-sage), var(--fill-hi)); color: var(--ink-sage); font-weight: 500; } .theme__set input:focus-visible + .theme__opt { outline: 2px solid var(--accent); outline-offset: -3px; } @media (max-width: 560px) { .masthead__inner { justify-content: space-between; } :root[data-js] .theme { margin-inline-start: 0; } /* Its own row, with the two remaining items pushed to the edges. Three wrapped rows in a sticky header on a 320px screen is too much header. */ .masthead__nav { flex: 1 0 100%; justify-content: space-between; } .theme__opt { padding-inline: 0.6rem; font-size: 0.8125rem; } } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); position: relative; overflow: hidden; } /* The one place on the page where the whole accent family is visible at once: three of the app's muted hues, overlapping at low alpha, drifting. It is a colour field and not a mesh-gradient blob - no glow ring, no saturated bloom, nothing sharp enough to read as a shape. The motion is a 40s translate at 8% of the viewport, which is slow enough that you notice it only if you stop and look, and it stops dead under reduced motion. */ .hero::before { content: ""; position: absolute; inset: -45% -25% auto -30%; height: 130%; background: radial-gradient(38% 44% at 18% 34%, rgba(var(--rgb-sage), 0.52), transparent 66%), radial-gradient(34% 42% at 50% 16%, rgba(var(--rgb-dusk), 0.42), transparent 64%), radial-gradient(34% 40% at 78% 46%, rgba(var(--rgb-clay), 0.38), transparent 62%), radial-gradient(30% 36% at 40% 76%, rgba(var(--rgb-heather), 0.34), transparent 62%), radial-gradient(26% 30% at 88% 82%, rgba(var(--rgb-sand), 0.30), transparent 62%); filter: blur(28px); pointer-events: none; } /* Breathing, not sliding. The first version travelled 7% of its own width and read as a slow pan; the swell is now carried by the scale and the translate is small enough to be a wobble rather than a direction. `will-change` is claimed inside this block, so a reader who has asked for less motion is not paying for a compositor layer that never moves. */ @media (prefers-reduced-motion: no-preference) { .hero::before { will-change: transform; animation: drift 44s ease-in-out infinite alternate; } } @keyframes drift { from { transform: translate3d(-1.2%, -0.8%, 0) scale(1.03); } to { transform: translate3d(1.4%, 1.2%, 0) scale(1.09); } } /* A hairline of the accent family under the hero, so the colour reads as a system rather than as one washy background. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, rgb(var(--rgb-sage)), rgb(var(--rgb-dusk)) 28%, rgb(var(--rgb-heather)) 52%, rgb(var(--rgb-clay)) 76%, rgb(var(--rgb-sand)) ); opacity: 0.62; } /* One word of the headline carries the accent. Solid colour, not a gradient: emphasis comes from hue and weight, and gradient text is a costume. */ .display em { font-style: normal; color: var(--ink-sage); } /* The hero shares the page's left edge. Constraining the measure on the container instead centres the whole block and leaves the headline out of line with every heading below it. */ .hero__inner { position: relative; } .hero h1 { max-width: 15ch; } .hero p.lead { margin-top: var(--s-6); max-width: 34ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 2.25rem; } /* -------------------------------------------------------------------------- 8. Statement band -------------------------------------------------------------------------- */ .statement { padding-block: clamp(3rem, 7vw, 5rem); border-block: 1px solid var(--hairline); background: var(--surface); } .statement__lede { font-family: var(--font-head); font-size: clamp(1.375rem, 1.1rem + 1.15vw, 2rem); line-height: 1.32; letter-spacing: -0.015em; max-width: 24ch; } .statement__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 860px) { .statement__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } } .statement__body p + p { margin-top: var(--s-4); } /* -------------------------------------------------------------------------- 9. Moments (what happens when you open it) -------------------------------------------------------------------------- */ .moment { position: relative; display: grid; gap: 0.5rem 3rem; padding-block: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--hairline); } /* The rule above each moment is drawn in that moment's hue, over the hairline, and it draws itself in as the moment arrives. Three steps, three colours, one gesture - not the same fade on every block. */ .moment::before { content: ""; position: absolute; top: -1px; left: 0; width: min(15rem, 42%); height: 2px; background: rgb(var(--hue, var(--rgb-sage))); transform-origin: left center; } .moment:last-child { border-bottom: 1px solid var(--hairline); } .moment h3 { color: var(--hue-ink, var(--ink-sage)); } .moment p { max-width: 52ch; color: var(--text-soft); } @media (min-width: 780px) { .moment { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; } } /* -------------------------------------------------------------------------- 10. Bento (what is in it) -------------------------------------------------------------------------- */ .bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 720px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento__cell--wide { grid-column: span 2; } } /* Each cell wears one of the app's five accents. Six tiles, five hues, and the sixth returns to sage - so the grid reads as a family with a home colour rather than as a rainbow. The tint is decorative and unbound; the heading uses the AA-solved ink variant of the same hue. */ .bento__cell { position: relative; overflow: hidden; background: linear-gradient(152deg, rgba(var(--hue, var(--rgb-sage)), var(--fill)), rgba(var(--hue, var(--rgb-sage)), calc(var(--fill) * 0.36))), var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(1.375rem, 3vw, 1.875rem); display: flex; flex-direction: column; gap: var(--s-3); min-height: 11rem; transition: transform 320ms var(--ease), border-color 320ms var(--ease); } /* The edge is the hue too, at the strength a boundary needs and no more. */ .bento__cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.34); pointer-events: none; transition: border-color 320ms var(--ease); } /* Gated on a real pointer. On a touch screen :hover sticks after a tap, so an ungated lift leaves one tile raised until the next tap lands. */ @media (hover: hover) and (pointer: fine) { /* The lift for these lives with the rest of the family in section 33. This said `translateY(-2px)` with no `--motion-move` factor: a second answer to the same question, and the only one of the set that would not scale down under reduced motion. Superseded rather than deleted silently. */ .bento__cell:hover::after { border-color: rgba(var(--hue, var(--rgb-sage)), 0.62); } } .bento__cell h3 { color: var(--hue-ink, var(--ink-sage)); } .bento__cell--washed { background: linear-gradient(152deg, rgba(var(--hue, var(--rgb-sage)), var(--fill-hi)), rgba(var(--hue, var(--rgb-sage)), calc(var(--fill-hi) * 0.3))), var(--surface); } .bento__cell p { color: var(--text-soft); max-width: 42ch; } /* Concentric geometry, not an illustration: the shape the app's breathing exercise draws. Decorative, so it is hidden from assistive technology. */ .bento__rings { position: absolute; right: -3.5rem; bottom: -4.5rem; width: 15rem; height: 15rem; color: var(--hue-ink, var(--ink-sage)); opacity: 0.2; pointer-events: none; } /* The rings are the shape the breathing exercise draws, so they breathe. One authored moment, at the pace of the exercise itself: 10 seconds in and out, which is the "Longer out than in" cycle the demo runs. */ @media (prefers-reduced-motion: no-preference) { .bento__rings { transform-origin: 50% 50%; animation: rings 10s ease-in-out infinite; } } @keyframes rings { 0% { transform: scale(0.94); opacity: 0.14; } 40% { transform: scale(1.05); opacity: 0.24; } 100% { transform: scale(0.94); opacity: 0.14; } } /* -------------------------------------------------------------------------- 10b. The demo -------------------------------------------------------------------------- Two panes: a check-in the visitor can actually answer, and a breathing exercise that actually runs. Every line of copy inside it is lifted from assets/content/*.json - the same files the app reads - so the demo cannot drift into saying something the product would not say. Hidden with JavaScript off, for the same reason the theme control is: a demo that does not do anything is a picture of software, which is the thing the hero comment already refuses. -------------------------------------------------------------------------- */ /* THE SECTION IS NO LONGER HIDDEN WITHOUT JAVASCRIPT, and that changed on 2026-08-16 when the check-in became a real `input[type=range]` with a static ladder behind it. The old rule was right for what stood here: two panes that both did nothing without a script, and "a demo that does not do anything is a picture of software", which is the thing the hero comment refuses. The check-in pane now degrades instead of disappearing โ€” the reader gets every band's copy at once (section 10a, `.ladder`) โ€” so hiding it would be throwing away content that works. The BREATHING pane is unchanged in that respect: a paced-breathing circle with no timer really is a picture of software, so it keeps the old rule and takes it alone. The grid collapses with it. `display: none` takes a child out of the grid rather than leaving a hole, but the TRACKS are declared on the container, so the surviving pane would sit in a 1.08fr column with an empty 1fr beside it โ€” a card two-thirds of the way across a section, which reads as a layout that broke rather than as one that adapted. */ :root:not([data-js]) .demo__pane--breath { display: none; } @media (min-width: 880px) { :root:not([data-js]) .demo { grid-template-columns: 1fr; } } .demo { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 880px) { .demo { grid-template-columns: 1.08fr 1fr; } } .demo__pane { position: relative; overflow: hidden; background: linear-gradient(158deg, rgba(var(--hue, var(--rgb-sage)), var(--fill)), rgba(var(--hue, var(--rgb-sage)), calc(var(--fill) * 0.34))), var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(1.375rem, 3.2vw, 2rem); display: flex; flex-direction: column; } .demo__pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.32); pointer-events: none; } .demo__h { font-family: var(--font-head); font-size: 1.25rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.012em; margin: 0; } .demo__sub { margin-top: 0.35rem; color: var(--text-soft); font-size: 0.9375rem; } /* The mood scale. Five options, and colour is never the only channel: the word is there, and so is the position. AppColors.moodScale ramps in luminance as well as hue, so the row reads in greyscale too. */ /* --- The check-in control ------------------------------------------------ A REAL `input[type=range]`, from 2026-08-16, and the reason is fidelity rather than taste: `lib/screens/checkin/check_in_screen.dart` builds a Slider with `min: 1, max: 5, divisions: 4`. The five radio buttons that stood here were the reinterpretation; this is the reproduction. What the native control buys, none of which had to be written: arrow keys, Home and End, page keys, drag, touch, the correct pointer capture, and a role a screen reader already knows. The one thing it does not carry for free is the VALUE โ€” "3" is not what the app says โ€” so the script sets `aria-valuetext` to the mood word on every input event. ## The one inline style on this site, and this is it Section 10's note that the site "carries exactly one inline style declaration (the mood scale's --c, which is data)" still holds. `--c` is the ladder colour for the current step and `--pct` is where the thumb is; both are data, both are set from the same five tokens the contrast test holds to a monotonic luminance ramp, and neither is a style decision made at the call site. ## Cross-engine, because a range is the least uniform control there is WebKit and Blink take `::-webkit-slider-runnable-track` and `::-webkit-slider-thumb`; Gecko takes `::-moz-range-track` and `::-moz-range-thumb`. They cannot be combined into one selector list โ€” an unrecognised pseudo-element invalidates the whole rule โ€” so each is written out. `appearance: none` on the input and on the WebKit thumb, and `border: 0` on the Gecko thumb, which otherwise inherits a system bevel. The thumb is 22px and the track is 6px, so the hit area is the 44px the rest of the site holds itself to: the input carries the height, not the track. */ .mood { --c: var(--mood-3); --pct: 50%; margin: 1.5rem 0 0; display: none; } :root[data-js] .mood { display: block; } /* The word, above the control, which is where the app puts it. `` rather than a span: it is a live region by default, so a screen reader hears the word change without a second announcement being wired up, and `for` ties it to the control that produced it. โš ๏ธ IT IS `--text` AND NOT `--c`, AND THAT IS A MEASUREMENT RATHER THAN A PREFERENCE. The app colours this word from the mood ladder, and copying that here would ship a contrast failure at two of the five positions. Measured against the pane's own gradient โ€” sage at `--fill` over `--surface` at the top, at `--fill * 0.34` at the bottom, worse end taken: step 1 2 3 4 5 light 6.10 4.61 3.65 2.91 2.62 dark 3.16 3.95 4.46 5.17 6.14 The word is large text, so its floor is 3:1 โ€” and light steps 4 and 5 are under it. The reason is not a defect in the ladder: `lib/data/style.dart` does not use these five values as text either. It re-hues them at run time onto an arc ending on the active accent and binary-searches each step back to a pinned relative luminance, which is a mechanism this stylesheet has no way to reproduce and no business approximating. A colour measured for one role is not valid in another, which is ยง18's rule arriving somewhere ยง18 did not look. So the ladder keeps the roles it was measured for โ€” the filled track and the thumb, both decoration โ€” and the word takes the body ink. Colour is never the only signal: the word prints itself, which is the same rule the register's verdict chips and the privacy callouts follow. */ .mood__word { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--text); margin-bottom: var(--s-3); } /* THE SLIDER, TAKEN FROM THE APPROVED DESIGN'S `.zr` โ€” 2026-09-03. -------------------------------------------------------------------------- What was here: a 6px track split at `--pct` into a filled half in the current mood's colour and an unfilled half in `rgba(var(--hue), .22)`, with a 22px thumb in the same mood colour. Two things were wrong with it. The unfilled half fell back to `--rgb-sage` โ€” the 1.0 green โ€” so at "Really low" the control was a dark mauve dot on a pale green rail, which is the *opposite* of what the ladder means. And a fill that grows tells the reader they are making progress along a scale. There is no progress here. Mood 5 is not more finished than mood 1. The design paints the WHOLE ladder into the track and slides a plain white thumb along it. Every stop is visible before it is chosen, the colour under the thumb is the colour of the mood it is on, and nothing about it reads as completion. Values are the design's own, byte for byte โ€” the five stops are Pebble's five `fillFrom` colours, so the rail and the face are one ladder. The thumb is white rather than the mood colour on purpose: it is the thing the hand holds, and it has to stay findable on all five stops. */ .mood__range { appearance: none; -webkit-appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; display: block; margin: 0; } .mood__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #cfc7e6, #cbd6ea 27%, #d4ccec 50%, #e7dfb6 76%, #f0d8c0); } .mood__range::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #cfc7e6, #cbd6ea 27%, #d4ccec 50%, #e7dfb6 76%, #f0d8c0); } /* `margin-top` centres the thumb on a 10px track by hand, because a WebKit thumb is laid out from the top of the track rather than from its middle. */ .mood__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: #fff; border: 1px solid rgba(21, 19, 15, 0.16); box-shadow: 0 6px 16px -8px rgba(58, 48, 78, 0.55); } .mood__range::-moz-range-thumb { width: 30px; height: 30px; border: 1px solid rgba(21, 19, 15, 0.16); border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px rgba(58, 48, 78, 0.55); } .mood__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; } /* Only the two ends are labelled. The app shows one word at a time and so does this; printing all five under the track would be the radio row again, in smaller type. */ .mood__ends { display: flex; justify-content: space-between; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--text-soft); } /* --- The ladder, for a reader with no script ------------------------------ `:root:not([data-js])` and NOT `@media (scripting: none)`. The media query is Baseline and is the obvious answer, and it answers a different question: it reports that scripting is ENABLED, which is not the same fact as the script having RUN. An extension that blocks the file, a connection that died mid-page and a syntax error all leave scripting "enabled" and the page inert, and a fallback conditioned on the media query is invisible in exactly those cases. The attribute is set on the first line of the head script, so it is the honest signal, and it is the one the theme control and the register's filters already use. Recorded rather than done quietly, because the design research asked for the media query by name. What the reader gets: every band's copy at once. They lose the control and keep all five sentences, which is the right direction for a page whose argument is that the content is finite and readable. */ .ladder { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; } :root[data-js] .ladder { display: none; } .ladder__row { display: grid; gap: 0.2rem; padding-block: var(--s-3); border-top: 1px solid var(--hairline); font-size: 0.9375rem; color: var(--text-soft); } .ladder__row:last-child { border-bottom: 1px solid var(--hairline); } .ladder__word { font-weight: 600; color: var(--ink-sage); } @media (min-width: 560px) { .ladder__row { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; } } .demo__reply { margin-top: var(--s-6); border-top: 1px solid var(--hairline); padding-top: 1.25rem; /* โš ๏ธ THE CARD MUST NOT RESIZE WHEN THE SLIDER MOVES, reported by the owner as *"when we change the slider of the home like okay to others the size of that card shouldnt change"*. Five moods swap in five different replies of different lengths, so the panel grew and shrank under the reader's own thumb โ€” and on this component that is worse than untidy: everything below the card jumps while a person is dragging, which is the thing a check-in screen must never do to somebody who is already unsettled. Reserved from the tallest reply rather than from an average, so the floor is set by the content that actually exists. It is a MIN, not a fixed height: a longer line at a larger text scale still grows the panel rather than being clipped, which is the only version of this that survives someone reading at 200%. */ min-height: 9.5rem; } @media (min-width: 900px) { .demo__reply { min-height: 8.25rem; } } /* NO ARRIVAL ANIMATION ON THE REPLY, and its removal is the point rather than an omission. The reply used to fade and rise 8px when a radio was picked, which was right for a control you press once. A slider fires on every step of a drag, so the same keyframe would restart four times between "Really low" and "Good" โ€” and a keyframe restarts from zero where a transition retargets, so the pane would flicker under the reader's own thumb. The text simply changes, which is what the register's filters do for the same reason. The block is present from the first paint, holding band 2's copy, so the pane never jumps height and a reader who never touches the control still sees a real answer rather than a placeholder asking them to act. */ .demo__line { font-family: var(--font-head); font-size: 1.1875rem; line-height: 1.4; } /* With no script the ladder below prints all five answers, so the single answer in this block would be one of them printed twice โ€” and the reader would have no way to tell why that one. It goes, and the ladder is the whole of what the pane says. */ :root:not([data-js]) .demo__reply { display: none; } .demo__offers { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); } .demo__offer[hidden] { display: none; } /* The kind label is a block so the line under it starts at the left margin at every width, which is what makes the two offers at the bottom of the scale read as two things rather than as one paragraph with a bold run in it. That distinction is the whole exhibit at that band. */ .demo__kind { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-sage); } .demo__thing { display: block; margin-top: 0.35rem; color: var(--text-soft); } .demo__note { margin-top: auto; padding-top: 1.5rem; font-size: 0.875rem; color: var(--text-soft); } /* --- The breathing pane -------------------------------------------------- */ .breath__stage { position: relative; display: grid; place-items: center; height: 12.5rem; margin-top: var(--s-4); } .breath__circle { position: absolute; width: 12rem; height: 12rem; border-radius: 50%; background: rgba(var(--rgb-dusk), 0.2); border: 1.5px solid rgba(var(--rgb-dusk), 0.55); transform: scale(0.55); transition: transform var(--breath-dur, 4s) cubic-bezier(0.42, 0, 0.4, 1); } .breath__circle[data-full] { transform: scale(1); } /* The second ring trails the first by a beat, so the circle has a little depth to it rather than reading as a flat disc. */ .breath__circle::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(var(--rgb-dusk), 0.28); } .breath__read { display: grid; justify-items: center; gap: 0.15rem; margin-top: 0.25rem; min-height: 3.5rem; text-align: center; } .breath__phase { font-family: var(--font-head); font-size: 1.375rem; line-height: 1.2; } /* Counting up, not down. A countdown is a deadline, and this is a pace. */ .breath__count { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--text-soft); font-variant-numeric: tabular-nums; } .breath__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .breath__help { margin-top: auto; padding-top: 1.25rem; font-size: 0.875rem; color: var(--text-soft); } /* Reduced motion: the circle stops moving and the counts carry the pace on their own. The exercise still works; it just does not animate. */ @media (prefers-reduced-motion: reduce) { .breath__circle { transition: none; transform: scale(0.82); } .breath__circle[data-full] { transform: scale(0.82); } } /* -------------------------------------------------------------------------- 10c. The science section -------------------------------------------------------------------------- The longest section on the page, so it is built out of five different shapes rather than one shape repeated: a drawn loop, a three-column mechanism table, a prose column, one tinted panel of refusals, and a compact safety strip. The reference list that used to close it is now section 10d, its own band. Colour carries the argument and is not decoration. Sage is what the app does, and that now includes the refusals, because a refusal IS something the app does. Clay is no longer spent on them: a warm tint over a list of deliberate decisions reads as a warning about the product. Dusk is the worst moment. Sand is the paragraph where it states its own ceiling. Nothing else in this section is hued. Contrast, measured against the surface each pair actually sits on, and re-measured under prefers-contrast: more, where --fill drops and a tint gets lighter rather than stronger: normal contrast:more light mechanism name on page 6.37 6.37 technique name on page 6.37 6.37 loop node text on page 12.81 12.81 "No X" term on sage panel 5.82 6.28 reason text on sage panel 4.81 5.19 bold lead on sage panel 11.71 12.62 heading on dusk strip 5.67 6.11 sentence on dusk strip 4.83 5.20 bold lead on dusk strip 11.75 12.66 "The rest of it" on dusk strip 5.67 6.11 signal sentence on clay wash 4.57 4.90 signal sentence on sage wash 4.53 4.86 body text on sand panel 11.18 11.93 ring arc on page 3.62 3.62 ring arrowhead on page 5.04 5.04 cut tick on page 6.14 6.14 segmented control border 3.33 3.33 dark mechanism name on page 7.62 7.62 technique name on page 7.62 7.62 loop node text on page 13.94 13.94 "No X" term on sage panel 5.14 5.44 reason text on sage panel 5.13 5.43 bold lead on sage panel 9.41 9.96 heading on dusk strip 5.52 5.84 sentence on dusk strip 5.11 5.40 bold lead on dusk strip 9.37 9.89 "The rest of it" on dusk strip 5.52 5.84 signal sentence on clay wash 5.90 6.44 signal sentence on sage wash 5.98 6.52 body text on sand panel 10.74 12.14 ring arc on page 3.63 3.63 ring arrowhead on page 4.63 4.63 cut tick on page 8.26 8.26 segmented control border 3.81 3.81 Two thresholds are in play and they are different jobs. Text is held to 4.5:1. The ring, its arrowheads and the cut tick are a graphical object a reader needs in order to follow the argument, so WCAG 1.4.11 applies and they are held to 3:1 - the same bar as the segmented control's border, and NOT the decorative-hairline exemption. The one line under that bar is the cut arc itself, at 0.28 opacity, because its meaning is that it is gone. The divider between two refusals is decorative and unbound, the same as --hairline. -------------------------------------------------------------------------- */ .sci + .sci { margin-top: clamp(2.75rem, 6vw, 4.5rem); } .sci__h { max-width: 30ch; margin-bottom: var(--s-5); } .sci__lede { max-width: var(--measure); margin-bottom: 1.75rem; color: var(--text-soft); } .sci__lede b { color: var(--text); font-weight: 600; } /* --- The drawn loop ------------------------------------------------------ */ /* The one diagram on the page, and the only thing in this section that moves for a reason other than arrival. It teaches the section's own idea: a maintaining loop is a ring in which every step makes the next one more likely, and an intervention is a cut in the ring. State is two radios and a sibling combinator, so there is no JavaScript in it and it works with scripting off. That also decides the reduced-motion story: both states are already complete, static pictures. The ring is whole in one and cut in the other, the arrowheads carry the direction without moving, and the captions explain either way. Under `reduce` the travelling dot simply never exists, and nothing it was saying is lost. The four steps sit INSIDE the ring rather than on it. A chip wide enough to hold "Fewer good things" cannot mask a circle cleanly - the arc leaves the bottom of the chip before it leaves the side of it, and a stub of stroke pokes out. Inside, nothing has to be masked at all. */ .loop { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); justify-items: start; margin: 0; padding: 0; border: 0; min-width: 0; } .loop__state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* The same segmented control as the masthead's theme switch, so the page has one way of saying "pick one of two views" rather than two. */ .loop__set { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); } .loop__opt { padding: 0.42rem 1rem; border-radius: var(--r-pill); font-size: 0.875rem; line-height: 1.2; color: var(--text-soft); cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); } #loop-run:checked ~ .loop__set [for="loop-run"], #loop-cut:checked ~ .loop__set [for="loop-cut"] { background: var(--accent); color: var(--accent-on); } #loop-run:focus-visible ~ .loop__set [for="loop-run"], #loop-cut:focus-visible ~ .loop__set [for="loop-cut"] { outline: 2px solid var(--accent); outline-offset: 2px; } .loop__body { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: center; width: 100%; } @media (min-width: 860px) { .loop__body { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } } .loop__stage { position: relative; width: 100%; max-width: 25rem; aspect-ratio: 1; } .loop__ring { position: absolute; inset: 0; width: 100%; height: 100%; } /* The ring and its arrowheads are a graphical object a reader needs in order to follow the argument, so WCAG 1.4.11 applies and they are held to 3:1 like a control boundary, not left at decorative weight. The first version drew them as the raw sage at 0.6 alpha and measured 1.77:1 in light: a line you could see and not a line the standard would accept. `--ink-*` is the AA-safe variant of each hue, and 0.75 of it keeps the diagram soft while clearing the bar in both themes. */ .loop__arc { fill: none; stroke: var(--ink-sage); stroke-opacity: 0.75; stroke-width: 2; stroke-linecap: round; transition: stroke-opacity 220ms var(--ease); } .loop__head path { fill: none; stroke: var(--ink-sage); stroke-opacity: 0.9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .loop__head { transition: opacity 200ms var(--ease); } /* The cut mark: a radial tick across the ring where the last step used to be. Present in the markup always so the transition has something to act on; visible only once the ring is cut. Clay, because clay is this page's colour for a refusal. */ .loop__cut { stroke: var(--ink-clay); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity 220ms var(--ease); } .loop__runner circle { fill: var(--accent); } /* Widths are a percentage of the stage rather than a rem value, because the stage is fluid: a fixed chip fits at 1440 and hangs off a 320 viewport. East and west get less than north and south because horizontally they have the stage edge and the arc to respect, and vertically they do not. */ .loop__node { position: absolute; margin: 0; padding: 0.3rem 0.5rem; border-radius: 10px; background: var(--page); color: var(--text); font-size: clamp(0.75rem, 0.69rem + 0.3vw, 0.875rem); line-height: 1.3; text-align: center; transform: translate(-50%, -50%); } .loop__node--n, .loop__node--s { width: 42%; } .loop__node--e, .loop__node--w { width: 26%; } .loop__node--n { left: 50%; top: 26%; } .loop__node--e { left: 74%; top: 50%; } .loop__node--s { left: 50%; top: 74%; } .loop__node--w { left: 26%; top: 50%; } .loop__read { max-width: 46ch; } .loop__say { margin: 0; } .loop__say b { color: var(--text); font-weight: 600; } .loop__aside { margin-top: var(--s-4); color: var(--text-soft); font-size: 0.9375rem; } /* --- Loop state ---------------------------------------------------------- */ /* The cut arc is the one line here allowed under 3:1, and deliberately: it is the path that is NO LONGER there. Its meaning is its absence, the cut tick and the missing arrowhead say the same thing at full strength, and the caption says it in words. */ #loop-cut:checked ~ .loop__body .loop__arc--last { stroke-opacity: 0.28; stroke-dasharray: 4 9; } #loop-cut:checked ~ .loop__body .loop__head--last { opacity: 0; } #loop-cut:checked ~ .loop__body .loop__cut { opacity: 1; } /* The two captions are display-swapped rather than faded, so a screen reader is never offered the caption for the state that is not showing. */ .loop__say--cut, #loop-cut:checked ~ .loop__body .loop__say--run { display: none; } #loop-cut:checked ~ .loop__body .loop__say--cut { display: block; } /* The travelling dot. Twelve seconds is three seconds a step, which is about as fast as a reader can follow a four-step argument and slow enough that it never competes with the sentence beside it. Cut, it becomes a one-shot: three quarters of a turn, then it stops dead at the step the technique acts on, which is the point being made. 900ms with a hard deceleration, so the arrival reads as a stop. */ .loop__runner { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; } @media (prefers-reduced-motion: no-preference) { .loop__runner { opacity: 1; animation: loop-turn 12s linear infinite; } #loop-cut:checked ~ .loop__body .loop__runner { animation: loop-halt 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } } @keyframes loop-turn { to { transform: rotate(360deg); } } @keyframes loop-halt { from { transform: rotate(0deg); } to { transform: rotate(270deg); } } /* --- The mechanism table ------------------------------------------------- */ /* Three columns and not two, because the three are doing different jobs for different readers: the middle column is the loop described in words anybody recognises, and the right column names the technique that interrupts it AND says how that technique works. Naming without explaining was the defect in the version this replaces. A reader who only wants one of the three can read down a single column. */ .mech { margin: 0; } .mech__row { display: grid; gap: var(--s-2); padding-block: clamp(1.25rem, 2.8vw, 1.75rem); border-top: 1px solid var(--hairline); } .mech__row:last-child { border-bottom: 1px solid var(--hairline); } .mech__name { font-family: var(--font-head); font-size: 1.0625rem; line-height: 1.3; color: var(--ink-sage); } .mech__what { color: var(--text-soft); max-width: 54ch; } .mech__how { max-width: 54ch; } /* The technique's name is the thing a technical reader came for, so it is set in the accent and carries the weight. Text, not a control: held to 4.5:1, not 3:1. */ .mech__how b { color: var(--ink-sage); font-weight: 600; } /* 960 and not 900: three columns arrive only once the two text tracks can each hold a readable line. At 900 the outer track left the description about 316px, which is four lines of a two-line sentence. */ @media (min-width: 960px) { .mech__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 2.25rem; align-items: start; } } .sci__note { margin-top: 1.75rem; max-width: var(--measure); color: var(--text-soft); } .sci__note b { color: var(--ink-sage); font-weight: 500; } /* --- The same signal, two labels ----------------------------------------- */ /* The second figure in this section, and the quieter of the two. It exists to make one row of the table above checkable rather than asserted. The whole argument is that NOTHING moves except the label. There is one in the markup and it is never redrawn, restyled or recoloured; the wash behind it changes hue and the sentence under it changes, and that is all. Anything that animated the trace itself would be arguing the opposite of the copy. Reduced motion loses the two crossfades and keeps both complete states, the same as the ring above. */ .signal { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; max-width: 46rem; } .signal__pick { margin: 0; padding: 0; border: 0; min-width: 0; } .signal__legend { padding: 0; margin-bottom: var(--s-4); font-family: var(--font-head); font-size: 1.0625rem; color: var(--text); } .signal__state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .signal__opts { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; margin-bottom: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); } .signal__opt { padding: 0.42rem 1rem; border-radius: var(--r-pill); font-size: 0.875rem; line-height: 1.2; color: var(--text-soft); cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); } #sig-threat:checked ~ .signal__opts [for="sig-threat"], #sig-ready:checked ~ .signal__opts [for="sig-ready"] { background: var(--accent); color: var(--accent-on); } #sig-threat:focus-visible ~ .signal__opts [for="sig-threat"], #sig-ready:focus-visible ~ .signal__opts [for="sig-ready"] { outline: 2px solid var(--accent); outline-offset: 2px; } .signal__panel { padding: clamp(1.125rem, 3vw, 1.5rem); border-radius: var(--r-card); background: rgba(var(--rgb-clay), var(--fill)); transition: background-color 260ms var(--ease); } #sig-ready:checked ~ .signal__panel { background: rgba(var(--rgb-sage), var(--fill)); } /* One path, one stroke, one colour, in both states. */ .signal__trace { display: block; width: 100%; height: clamp(48px, 9vw, 68px); } .signal__trace path { fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .signal__say { margin: 0.875rem 0 0; color: var(--text-soft); max-width: 52ch; } .signal__say b { color: var(--text); font-weight: 600; } .signal__say--ready, #sig-ready:checked ~ .signal__panel .signal__say--threat { display: none; } #sig-ready:checked ~ .signal__panel .signal__say--ready { display: block; } .signal figcaption { margin-top: var(--s-4); max-width: var(--measure); color: var(--text-soft); font-size: 0.9375rem; } /* The one paragraph on the page that states what the app cannot do. It gets its own colour so it does not read as a footnote to the block above it. No side stripe: a coloured left border above a hairline is a costume, and the tint is already doing the separating. */ .sci__limits { max-width: var(--measure); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-card); background: rgba(var(--rgb-sand), var(--fill)); } .sci__limits b { font-weight: 600; } /* --- What Moorwell will not do ---------------------------------------------- */ /* One panel now, not two. -------------------------------------------------------------------------- It was two side-by-side panels of equal weight: the refusals, in clay, and the worst-moment guarantees, in dusk. Two changes, from the owner reading the page in a browser. The hue. Clay is warm and it is the colour this site uses for a warning. Over a list of deliberate good decisions it read as an alert about the app, which is the exact opposite of the argument the list is making. It is sage now, the colour of what Moorwell does, because a refusal IS something Moorwell does. The width. One panel at the full 1120px wrap would put the reason column past any sensible measure, so the panel is capped: the 13rem term column, the 2rem gap, and 62ch of reason, plus its own padding. Same reasoning as --log-column on the changelog. A container query and not a media query, still: the panel used to sit in a two-column grid where its own width and the viewport's had nothing to do with each other. It measures itself, which also means the cap above cannot silently break the row layout. */ .nots { container-type: inline-size; margin: 0; max-width: 54rem; overflow: hidden; background: linear-gradient(152deg, rgba(var(--hue, var(--rgb-clay)), var(--fill)), rgba(var(--hue, var(--rgb-clay)), calc(var(--fill) * 0.36))), var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(0.5rem, 2vw, 1rem) clamp(1.375rem, 3vw, 2rem); } .nots__row { display: grid; gap: var(--s-2); padding-block: clamp(1.125rem, 2.6vw, 1.375rem); } .nots__row + .nots__row { border-top: 1px solid rgba(var(--hue, var(--rgb-clay)), 0.28); } .nots dt { font-weight: 600; color: var(--hue-ink, var(--ink-clay)); line-height: 1.35; } .nots dd { color: var(--text-soft); max-width: 62ch; } /* The clause that names what everybody else ships. It is bold and it is in the body colour, so the row reads in two beats: Moorwell's refusal in the term, then the industry default, then why. That subject used to live in the head row over the whole list, where it captured the terms and made them read as things Moorwell does. */ .nots dd b { color: var(--text); font-weight: 600; } /* The panel's own title row. A heading element would land between the h3 and nothing, so the list says what it is in its own first row instead. It also labels the two columns below it, which is why it names Moorwell on the left and other apps on the right. */ .nots__row--head dt { font-family: var(--font-head); font-size: 1.0625rem; } .nots__row--head dd { font-size: 0.875rem; } @container (min-width: 36rem) { .nots__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: var(--s-7); align-items: baseline; } } /* --- The worst moment, as a strip ----------------------------------------- */ /* This was a second panel the same size as the one above it, carrying five entries. It is the most important content on the page and it was also the heaviest, which is a bad trade on a page a person is skimming. Two of the five stay in the open and may never be folded away, because without them the length and confidence of this page can be heard as a claim of clinical validation. The other three are behind a disclosure, in the markup, so they print and an in-page search still finds them. Dusk, not sage: this is a different kind of statement from the refusals above, and the site already spends dusk on it. */ .guard { max-width: 44rem; border-radius: var(--r-card); border: var(--card-border); background: linear-gradient(152deg, rgba(var(--hue, var(--rgb-dusk)), var(--fill)), rgba(var(--hue, var(--rgb-dusk)), calc(var(--fill) * 0.36))), var(--surface); padding: clamp(1.125rem, 2.6vw, 1.5rem) clamp(1.375rem, 3vw, 2rem); } .guard__h { font-size: 1.0625rem; color: var(--hue-ink, var(--ink-dusk)); margin-bottom: var(--s-3); } .guard__list { display: grid; gap: var(--s-3); color: var(--text-soft); font-size: 0.9375rem; line-height: 1.6; max-width: 66ch; } .guard__list b { color: var(--text); font-weight: 600; } .guard__more { margin-top: var(--s-4); } .guard__more .guard__list { margin-top: var(--s-4); } .guard__toggle { display: inline-flex; align-items: center; cursor: pointer; list-style: none; font-size: 0.9375rem; /* The strip's own hue, not --accent. On a dusk tint in the dark theme --accent measures 3.62 against the panel, and this is text. --ink-dusk measures 5.52 there and 5.67 in light. */ color: var(--hue-ink, var(--ink-dusk)); min-height: 44px; } .guard__toggle::-webkit-details-marker { display: none; } .guard__toggle::marker { content: ""; } .guard__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Same caret as the changelog's, drawn from two borders rather than set as a glyph, so it turns over when the state does. */ .guard__toggle::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-right: 0.55em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.14em) rotate(45deg); } .guard__more[open] .guard__toggle::before { transform: translateY(0.06em) rotate(-135deg); } @media (prefers-reduced-motion: no-preference) { .guard__toggle::before { transition: transform 200ms var(--ease); } } @media (hover: hover) and (pointer: fine) { .guard__toggle:hover { color: var(--text); } } /* -------------------------------------------------------------------------- 11. Privacy -------------------------------------------------------------------------- */ .privacy__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .privacy__grid { grid-template-columns: 1fr minmax(0, 26rem); } } .privacy__body p + p { margin-top: 1.125rem; } .facts { background: var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 1.75rem); } .facts div { padding-block: 0.9375rem; } .facts div + div { border-top: 1px solid var(--hairline); } .facts dt { font-weight: 600; font-size: 0.9375rem; } .facts dd { color: var(--text-soft); font-size: 0.9375rem; margin-top: 0.2rem; } /* -------------------------------------------------------------------------- 12. Unfinished list -------------------------------------------------------------------------- */ .unfinished { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; max-width: 60rem; } @media (min-width: 780px) { .unfinished { grid-template-columns: repeat(3, 1fr); } } .unfinished li { border-top: 2px solid rgb(var(--hue, var(--rgb-sage))); padding-top: 1rem; } .unfinished h3 { margin-bottom: var(--s-2); color: var(--hue-ink, var(--ink-sage)); } .unfinished p { color: var(--text-soft); font-size: 0.9375rem; line-height: 1.6; } /* -------------------------------------------------------------------------- 12b. Changelog pointer on the landing page -------------------------------------------------------------------------- */ .log__lede { margin-top: var(--s-5); color: var(--text-soft); } .log__cta { margin-top: 1.75rem; } /* -------------------------------------------------------------------------- 13. Closing invitation -------------------------------------------------------------------------- */ /* Two plain sections on the same background stack their full padding, which reads as a hole rather than as breathing room. The invitation carries its own top edge in the card. */ .section--tight { padding-top: 0; } /* Except when the section above it is sunk. --------------------------------------------------------------------------- `--tight` exists because two plain sections on the same background stack their full padding and leave a hole. That reasoning needs both sections to be on the *same* background โ€” and `#try-it` follows `#changelog`, which is `--sunk`. There the background already does the separating, so removing the padding does not close a hole, it puts the card hard against the edge of the release panel. The owner, reading the live site: "the try it in your browser card is just on the border of every release, give some space there." Scoped to the adjacency rather than to `#try-it`, so any section that ends up after a sunk one gets the same treatment without anyone remembering. */ .section--sunk + .section--tight { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .invite { max-width: 46rem; background: var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(2rem, 6vw, 3.75rem); display: grid; gap: var(--s-6); justify-items: start; } .invite p { max-width: 44ch; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem, 6vw, 4rem); } .footer__inner { display: grid; gap: var(--s-7); grid-template-columns: 1fr; } @media (min-width: 780px) { .footer__inner { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 3rem; } } .footer__note { margin-top: var(--s-4); color: var(--text-soft); font-size: 0.9375rem; max-width: 40ch; } .footer__version { margin-top: var(--s-4); font-size: 0.9375rem; } .footer__version a { color: var(--text-soft); text-decoration: none; } .footer__version a:hover { color: var(--text); } .footer__version .release__version { font-size: inherit; color: inherit; } .footer__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-content: start; } @media (min-width: 780px) { .footer__links { justify-content: flex-end; } } .footer__links a { color: var(--text-soft); text-decoration: none; /* Same 44px floor and the same reason as `.masthead__nav a`. Eleven of these on every page, and they were the site's smallest real targets at 25px. The row already wraps with a 0.75rem row gap, so nothing shifts. */ display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; } .footer__links a:hover { color: var(--text); } /* -------------------------------------------------------------------------- 15. Changelog page -------------------------------------------------------------------------- */ /* One axis for the whole page. -------------------------------------------------------------------------- Every release used to be a bare
with a hairline over it inside the 1120px wrap, so each one ran the full width of the page with nothing but a 1px rule holding it, and the text sat hard against the left end of that rule with several hundred pixels of nothing after it. Two changes, and they are one idea: 1. The header and the list share --log-column, which is narrower than the wrap. The page now has a reading column the way the landing page's prose blocks do, rather than a full-bleed one. 2. A release is a card, with the same surface, border, radius and shadow as every other card on this site (.bento__cell, .log__empty, .nots). It is the site's one card recipe, not a new one. The card is what centres it: the container alone still leaves a rule floating in space, and a background with two edges is what makes a reader see a contained object rather than a divider. Contrast, against the card rather than against the page it used to sit on, and against the hovered card as well, because that is a second state and not a decoration: light dark version and body text on card 13.73 12.06 summary text on card 5.64 6.58 "Read this release" on card 6.83 4.67 summary text, card hovered 5.19 5.68 "Read this release", card hovered 12.62 10.40 card edge (hairline, decorative) 1.18 1.52 The label goes to --text on hover rather than staying --accent, and the reason is the dark column: --accent is 4.67 on the card and 4.02 once the wash is over it, which is under 4.5 for text. */ .wrap.log, .wrap.log__header { max-width: var(--log-column); } .log__header { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem); } .log__header p { margin-top: var(--s-5); max-width: var(--measure); } .log__current { margin-top: var(--s-4); color: var(--text-soft); font-size: 0.9375rem; } .log__current .release__version { font-size: inherit; } .log__back { display: inline-block; margin-bottom: var(--s-6); font-size: 0.9375rem; text-decoration: none; color: var(--text-soft); } .log__back:hover { color: var(--text); } /* Drawn, not a glyph: two borders on an empty box. It points the way the link goes, and on hover it moves that way, which is the whole reason it is there rather than a full stop. */ .log__back::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-right: 0.55em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.06em) rotate(45deg); } @media (hover: hover) and (pointer: fine) { .log__back::before { transition: transform 180ms var(--ease); } .log__back:hover::before { transform: translate(-3px, -0.06em) rotate(45deg); } } .log { padding-bottom: clamp(4rem, 9vw, 7rem); display: grid; gap: var(--s-3); } .release { background: var(--surface); border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); } .release > summary { display: grid; cursor: pointer; padding: clamp(1.25rem, 3vw, 1.625rem) var(--log-pad); border-radius: calc(var(--r-card) - 1px); list-style: none; gap: 0.2rem var(--log-gap); grid-template-columns: 1fr; grid-template-areas: "ver" "dat" "sum" "tog"; } /* The only feedback a whole-card click target needs, and it is paint on one element rather than movement: the card does not lift, because a page of thirty cards each lifting under the pointer is noise. Gated on a real pointer for the reason .bento__cell is: on a touch screen :hover sticks after a tap. */ @media (hover: hover) and (pointer: fine) { .release > summary { transition: background-color 150ms var(--ease); } .release > summary:hover { background: var(--wash); } /* The label snaps rather than fading, on purpose. --accent measures 4.67 against the dark card and 4.02 once the wash is over it, which is under the 4.5 text threshold. --text clears it from the first frame, and no transition means there is no interpolated state that does not. */ .release > summary:hover .release__toggle { color: var(--text); } } .release > summary::-webkit-details-marker { display: none; } .release > summary::marker { content: ""; } .release > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: calc(var(--r-card) - 2px); } @media (min-width: 780px) { .release > summary { grid-template-columns: minmax(0, var(--log-rail)) minmax(0, 1fr) auto; /* Row 2 absorbs the summary's extra height. Without `1fr` and the `align-self` below, the date drifts a different distance under each version, because the summary spans both rows and splits their height between them. */ grid-template-rows: min-content 1fr; grid-template-areas: "ver sum tog" "dat sum tog"; } .release__version, .release__date, .release__toggle { align-self: start; } } .release__version { grid-area: ver; font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.01em; color: var(--text); } .release__date { grid-area: dat; font-size: 0.875rem; color: var(--text-soft); } .release__summary { grid-area: sum; color: var(--text-soft); max-width: 58ch; margin-top: var(--s-2); } @media (min-width: 780px) { .release__summary { margin-top: 0; } } .release__toggle { grid-area: tog; font-size: 0.9375rem; color: var(--accent); white-space: nowrap; margin-top: var(--s-3); } @media (min-width: 780px) { .release__toggle { margin-top: 0; } } .release__toggle::after { content: "Read this release"; } .release[open] .release__toggle::after { content: "Close"; } /* The one piece of feedback a disclosure actually needs: something that turns over when the state does. Drawn from two borders for the same reason as the back link. */ .release__toggle::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-right: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.14em) rotate(45deg); } .release[open] .release__toggle::before { transform: translateY(0.06em) rotate(-135deg); } @media (prefers-reduced-motion: no-preference) { .release__toggle::before { transition: transform 200ms var(--ease); } } /* NOT animated: the height of an opening release. ------------------------------------------------------------------------ `::details-content` with `interpolate-size: allow-keywords` is the modern way to do this and it was written, measured and taken back out. Two reasons, and the second is the one that decided it. It animates a layout property, which everything else on this site avoids. And its failure mode is that the content never appears: the collapse is held open by a discrete `content-visibility` transition, so anywhere that transition does not run to completion, a release stays measurably 0px tall after `open` is set. That was reproduced here - the pseudo-element stayed `content-visibility: hidden` and `block-size: 0px` on an opened release - and the changelog is a page whose whole purpose is opening those. A 240ms slide is not worth a page that might not open. The caret above is the feedback the disclosure actually needed, and it cannot fail closed. */ .release__body { padding: 0 var(--log-pad) clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: var(--s-7); } /* Aligned under the summary column, not under the version rail: the rail plus the grid gap plus the card's own padding. */ @media (min-width: 780px) { .release__body { padding-left: calc(var(--log-pad) + var(--log-rail) + var(--log-gap)); } } .release__group h3 { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4); } .release__group ul { display: grid; gap: var(--s-4); max-width: 68ch; } .release__group li { position: relative; padding-left: 1.25rem; color: var(--text-soft); line-height: 1.6; } .release__group li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 1px; background: var(--border); } .release__group li strong { color: var(--text); } .log__empty { border: var(--card-border); border-radius: var(--r-card); background: var(--surface); padding: 2rem; max-width: var(--measure); } /* -------------------------------------------------------------------------- 16. Motion -------------------------------------------------------------------------- One authored moment per page: the first screenful settles in. It is an opacity change with a 10px rise, which is the category the app's own motion research treats as well tolerated. Everything else is hover, focus and press feedback. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .settle { animation: settle 700ms var(--ease) both; } .settle-2 { animation-delay: 90ms; } .settle-3 { animation-delay: 180ms; } } @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 16b. Arrival -------------------------------------------------------------------------- Scroll-linked, and written in CSS rather than JavaScript: a view timeline costs no script, no listener and no layout read, and a browser without one simply shows the element, which is the correct fallback. Three different gestures, not one fade repeated down the page: - a section heading lifts, - a moment's coloured rule draws itself in from the left, - the bento tiles rise with a stagger taken from their own position. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .section__head, .privacy__body, .invite, .facts { animation: lift linear both; animation-timeline: view(); animation-range: entry 4% cover 22%; } /* One entrance per object. `.privacy__body` on the landing page contains a `.section__head`, so both matched and the floor applied twice โ€” 0.72 x 0.72 = 0.52, which is 3.4:1 for this ink on this ground and the one place the new floor did not clear AA. The parent already carries the gesture; the child arriving separately inside it was never the design. Found by walking the rendered tree for an animated element with an animated ancestor, which is the only way to see it: each rule is correct on its own and the selector list gives no hint that two of its entries can nest. */ .privacy__body .section__head { animation: none; } .moment::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 12% cover 26%; } .bento__cell, .unfinished li { animation: lift linear both; animation-timeline: view(); animation-range: entry 2% cover 26%; } /* The mechanism rows stagger off their own position, exactly as the bento tiles do. */ .mech__row { animation: lift linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; } /* A panel of refusals arrives as one object, because the refusals in it are one argument. Its range end is a LENGTH and not a percentage, and that is the whole point: both `entry` and `cover` are measured against the element's own height, so on a panel taller than the scrollport any percentage becomes hundreds of pixels of scrolling spent at partial opacity. Measured here at 0.62 on a changelog entry that was on screen at page load. A length says "260px into the entry, whatever this thing's height is". */ .nots, .guard { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 280px; } /* A fourth gesture, for the two things on the site a visitor can actually operate. They do not rise: they come into focus, which is a different sentence about a different kind of object. No translate at all, so nothing under the cursor moves as it settles. */ .demo__pane, .loop__stage { animation: focus-in linear both; animation-timeline: view(); animation-range: entry 4% cover 18%; } /* The changelog. It had none of this and read as a different site. An open release runs to several thousand pixels, so the range end is a length here for the same reason as the panel above. */ .log__header, .release { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 240px; } } } /* The disclosure inside the crisis strip. It runs on [open], not on a view timeline, because the trigger is the tap and not the scroll. It is outside the @supports block above on purpose - a browser with no view timeline still has @keyframes - and inside the reduced-motion gate, where the list simply appears. Nothing is carried by the motion: closed is closed and open is open, in every case. The four-group stagger that used to sit here belonged to "See every source" on the landing page's research section, which moved to evidence.html on 2026-08-16 and took its forty citation rows with it. */ @media (prefers-reduced-motion: no-preference) { .guard__more[open] .guard__list { animation: lift 260ms var(--ease) both; } } /* The composed sentence is pushed away from the reader and the identifier is what stays. Both settle at identity, so the resting state of the section is flat, square and undistorted โ€” a page whose final state is rotated is a page that looks broken to anyone who arrives at the bottom of it. */ @keyframes recede { from { transform: perspective(1600px) translateZ(calc(-90px * var(--motion-move))) rotateY(calc(9deg * var(--motion-move))); opacity: 0.72; } to { transform: none; opacity: 1; } } @keyframes settle-square { from { transform: perspective(1600px) translateZ(calc(-40px * var(--motion-move))) rotateY(calc(-5deg * var(--motion-move))); } to { transform: none; } } @keyframes draw-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* THE ENTRY FLOOR, AND WHY IT IS NOT ZERO. -------------------------------------------------------------------------- Both keyframes below used to start at `opacity: 0`, and both are driven by a view timeline with `both` fill โ€” so every element that had not yet entered its range held the `from` state. Measured 2026-08-29 at 1440px, unscrolled, motion on: 43 of safety.html's 73 text blocks were painted at zero, 26 of mission.html's 36, and 23 of vision.html's 44. That is not an animation. It is a page that withholds most of itself from anyone who has not yet scrolled it, and it withholds it from a print, a screenshot and a social preview permanently, because none of those scroll. The fix is the one the handoff asks for: make the read state the default and let the animation subtract from it. So the floor is a value a reader can read at. 0.72 is not a new number โ€” `recede` above already chose it for the same sentence, "pushed away but still there". This is a TINT decision in the two-channel vocabulary further down: the opacity is what a reduced-motion reader keeps, the translate is what collapses. A tint channel that reaches zero is not a gentler equivalent of the movement, it is the content being absent, and this is a site read by people in a bad state at 2am. Nothing on it should have to be earned by scrolling. One dial, declared beside the two keyframes that consume it, so tuning the entrance is one edit and the two gestures cannot drift apart. */ :root { --enter-floor: 0.72; } @keyframes focus-in { from { opacity: var(--enter-floor); transform: scale(0.985); } to { opacity: 1; transform: none; } } @keyframes lift { from { opacity: var(--enter-floor); transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 17. The desktop tier -------------------------------------------------------------------------- Everything above this point is responsive and always was: twenty breakpoints, real multi-column from 720 up. What the file never had is a tier ABOVE its own container. `.wrap` caps at 1120px and the largest query in the file is 1100px, so 1440, 1728 and 2560 all render byte-identically to 1120 โ€” a phone-width strip of content sitting in the middle of the display belonging to the reader most likely to be evaluating this for funding. That is the defect. It is not that the site "serves the mobile layout"; it is that it stops improving 300px before the reader starts. So this section is additive and every block in it carries a 1280px minimum, which is above every existing query in the file. Nothing below 1280 is touched by anything here. That is not a promise to be careful โ€” it is a consequence of the minimum, and it is what lets the mobile view be left alone by construction. No colour, accent or gradient value is named here. This section is geometry only. */ :root { --wrap-wide: 1440px; } /* Opt-in, never automatic. A section takes the wide container by asking for it, so a reading column that should stay at --measure cannot be widened from here by accident. `.wrap` keeps its 1120 and its exact meaning. THE GATE IS 1600, NOT 1280, AND IT IS THE WHOLE DECISION. ------------------------------------------------------------------------- Phase 2 shipped this class unused and Phase 4 declined to wire it blind. Both were right, and the reason is arithmetic rather than caution. `.wrap` carries `padding-inline: clamp(1.25rem, 4vw, 2.5rem)`, which is pinned at its 2.5rem = 40px ceiling for every viewport at or above 1000px. So a 1440px max-width AT a 1440px viewport is not "more breathing room" โ€” it is the page running edge to edge with 40px of padding standing in for a margin, which is a narrower outer margin than the phone layout has. Rendered and measured in a real browser on 2026-08-16 (headless Chrome 151 over CDP, which composites โ€” see the note in the build direction about why the previous session's readings could not): viewport .wrap box outer margin content width share of screen ---------- ----------- -------------- --------------- --------------- 1440 1120 160 1040 72% 1600 1120 240 1040 65% 2560 1120 720 1040 41% 41% is the defect ยง17 was named for, still present at the width the defect is worst at. But the fix only clears the margin it needs from 1600 up: at 1600 a 1440 box leaves 80px of true outer margin either side, and at 2560 it leaves 560. At 1440 it leaves zero, which is why the gate is not 1280. The consequence, stated so it does not have to be rediscovered: below 1600, `.wrap--wide` and `.wrap` are the same container, byte for byte. So the class is safe to put on any section at any width โ€” every phone and every laptop renders it exactly as `.wrap`, and only a large desktop sees a difference. That is the same construction that makes the whole of ยง17 safe for mobile, applied one tier higher. Why 1440 and not more. The content ceiling is a reading decision, not a screen decision: the widest thing on the site is a three-column grid, and at 1440 minus padding that is three 440px cells, which is the size the bento was designed around. A 1920 container would give 600px cells and a heading measure nobody can track back to the next line. So the cap stays where the content wants it and the extra screen becomes margin, which is what margin is for. */ .wrap--wide { max-width: 1120px; } @media (min-width: 1600px) { .wrap--wide { max-width: var(--wrap-wide); } } @media (min-width: 1280px) { /* These three caps are the specific rules that made desktop read as phone-shaped. A 15ch headline inside a 1120 column inside a 1440 viewport is about 340px of visible mass with the rest of the screen empty. Widened rather than removed: the measure still has a job, it was just chosen for one width. */ .hero h1 { max-width: 20ch; } .hero p.lead { max-width: 46ch; } .section__head { max-width: 52ch; } /* The base clamps stop growing at roughly 1085px of viewport and are frozen for every width above it. These re-declare the ceiling only. The numbers are chosen so the curve is CONTINUOUS at 1280 rather than stepping: `.display` reaches exactly 4rem at 1280 (-1rem + 6.25vw = 64px there, which is the base clamp's own maximum) and rises to 5.25rem at 1600. `.h2` reaches exactly 2.5rem at 1280 (3.125vw = 40px) and 3.125rem at 1600. A breakpoint that jumps type by 7px is a breakpoint you can watch happen while resizing. */ .display { font-size: clamp(4rem, -1rem + 6.25vw, 5.25rem); } .h2 { font-size: clamp(2.5rem, 3.125vw, 3.125rem); } } @media (min-width: 1600px) { .hero h1 { max-width: 22ch; } } @media (prefers-reduced-transparency: reduce) { .masthead { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Specificity, deliberately: the two dark blocks above are (0,2,0), so a bare `:root` here would lose to them and the high-contrast override would apply in the light theme only. `:root:root` ties, and later wins. */ @media (prefers-contrast: more) { :root:root { --hairline: var(--border); --card-border: 1px solid var(--border); --fill: 0.09; --fill-hi: 0.13; } .masthead { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; } .bento__cell::after, .demo__pane::after { border-color: rgba(var(--hue, var(--rgb-sage)), 0.7); } } @media print { .masthead, .skip { display: none; } .release__body { display: grid !important; padding-left: 0; } /* A printed page does not scroll, so every view timeline on it is frozen wherever the reader left it โ€” which for anything below the fold is the entrance's first frame. The floor above keeps that legible rather than blank; this makes it right. Paper is the one surface where the entrance has no reader to arrive for, so it is simply not run. Scoped to the two entrance keyframes rather than swept with `*`, for the reason section 33 gives about the blunt version: a sweep here would also take out the drawn rules and the clip-path reveals, which carry structure on paper as much as on screen. */ .section__head, .privacy__body, .invite, .facts, .bento__cell, .unfinished li, .mech__row, .nots, .guard, .demo__pane, .loop__stage, .log__header, .release { animation: none !important; opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- Privacy page โ€” callouts, quotes and wide tables. Added 2026-08-11, after the generated page was opened on a phone and its `[!important]` callout rendered as ordinary body text. The generator emitted `.callout`, `.callout--*`, `.quote` and `.table-scroll`; none of them existed here. Nothing failed: the markup was valid, the page rendered, and only looking at it showed that the one paragraph meant to stand out did not. `test/privacy_page_test.dart` now asserts every class the generator emits is defined in this file, so the next invented name fails the build instead. -------------------------------------------------------------------------- */ .prose .callout, .prose .quote { padding-left: var(--rail-gap); margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 3px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 0 6px 6px 0; background: color-mix(in srgb, currentColor 4%, transparent); } .prose .callout > :first-child, .prose .quote > :first-child { margin-top: 0; } .prose .callout > :last-child, .prose .quote > :last-child { margin-bottom: 0; } .prose .callout__title { font-weight: 600; /* The title is a heading in role but not in outline: it must not enter the document's heading structure, because a screen-reader user navigating by heading would find "danger" between two policy sections. */ margin-bottom: var(--s-2); } /* The three levels the document actually uses. Colour is not the only signal โ€” the border weight changes too, so the distinction survives greyscale, a colour-blind reader, and a printed copy. */ /* The two edge colours were `#4a5d46` and `#8c4a3f` โ€” 1.0's accent-ink and clay-ink, typed rather than referenced, which is why they were still 1.0 after the palette moved. `--ink-sage` and `--ink-clay` are the same two roles in the 2.0 palette and they are defined per look, so these now follow Night and Sage instead of staying at their Calm values. */ .prose .callout--important { border-left-color: var(--ink-sage); } .prose .callout--danger { border-left-width: 4px; border-left-color: var(--ink-clay); } .prose .callout--note { border-left-color: color-mix(in srgb, currentColor 35%, transparent); } /* A policy table on a 320pt screen is wider than the screen. Scrolling the table is right; scrolling the page sideways is not โ€” a body that scrolls horizontally makes every other line hard to read. */ .prose .table-scroll { overflow-x: auto; margin: 1.5rem 0; /* Tells a touch device this is a scroll surface of its own. */ -webkit-overflow-scrolling: touch; } .prose .table-scroll table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .prose .table-scroll th, .prose .table-scroll td { text-align: left; vertical-align: top; padding: 0.5rem 0.7rem; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .prose .table-scroll th { font-weight: 600; } /* -------------------------------------------------------------------------- 18. Surfaces โ€” elevation is a boundary, never a ground -------------------------------------------------------------------------- Phase 3 of docs/Public Site - Build Direction.md. Section 1 declares elevation once per mode and section 17 adds a width tier; neither says how a *new* surface is built, and phases 4-8 need that written down before they start inventing one per page. Everything here is a token or a utility class. Nothing below changes an existing component except one declaration, called out where it happens, and nothing below is width-gated โ€” a contrast floor is not a desktop feature. ## The finding, first: each theme has exactly ONE elevation channel with ## headroom, and they are opposite ones. The app floors a card's separation from its page at **1.25:1** by fill, edge, rim or shadow โ€” whichever reaches it at the smallest alpha (`_cardBoundaryFloor`, lib/design/theme.dart:352). Measured against this palette, in both directions: channel light dark ---------------------------------------- ------------ ------------ fill: --surface against --page 1.072 1.156 edge: --hairline against --page 1.177 1.523 rim: white at 100%, against --page 1.119 16.762 rim: white at 100%, against --surface 1.044 14.502 shadow: ink/black at 100%, against --page 12.809 1.253 THREE OF THESE CELLS WERE WRONG until 2026-08-16, and the correction is recorded rather than quietly applied because one of them cost a red suite. The rim row carried a single light cell, 1.044, under a heading that reads "against --page" โ€” but 1.044 is white against --surface (#fbfaf6); against --page (#f4f2ec) it is 1.119. `test/site_contrast_test.dart` was written from the table, asserted `< 1.10` against the page, and failed on a stylesheet that was correct. The dark rim cell read "1.809 (at 14%)"; at 14% it is 1.565, and 1.809 needs 18.4%. The light shadow cell read 4.750; ink at 100% against the light page is 12.809. **Every cell above is now recomputed by that test rather than trusted**, which is the whole reason it exists โ€” a hand-computed number in a comment is a claim with no guard on it, and this section opened with a whole table of them. Read the two extreme cells. **A pure white top edge on the light page reaches 1.119:1, and 1.044:1 on the card it would actually be drawn on** โ€” both under the 1.25 floor below, so the treatment that carries every glass surface on the web is not merely weak here, it is unavailable, at any opacity. And **a fully opaque black drop shadow on the dark page reaches 1.253:1** โ€” that is the ceiling of the entire shadow channel in dark, at an opacity no design would ship. Each theme's headroom runs one way only. So: **light elevates downward** (an ink edge and a shadow), **dark elevates upward** (a bright rim). Neither theme may borrow the other's channel. This is the same arithmetic that rules out glass on light pages, arriving at the surface question instead of the blur question, and it is why section 1's "light carries a hairline, dark carries a lifted fill" was right โ€” this section only supplies the numbers and the missing third case. ## Why the GROUND never moves The obvious way to build a lifted surface in dark is a brighter fill, and it was measured before it was rejected. Mixing --text 10% into --surface gives a fill 1.325:1 above it โ€” and on that ground **--accent falls from 4.667 to 3.522** (under AA) and **--border falls from 3.808 to 2.874** (under the 3:1 WCAG 1.4.11 asks of a control edge). One surface, two regressions, in a theme where every accent was measured against --surface. That is the audit the build direction warns about โ€” checking only the page put 10 of 35 accent cells under AA once. The rule that makes it impossible to repeat: **A raised surface changes its boundary. It never changes its ground.** Every level below paints on --surface (or --page, or --surface-sunk for a recessed band). So every text ratio in this file's header is measured once and holds at every elevation, and a new surface cannot silently invalidate a colour that was checked somewhere else. ## Rejected - **A shadow ramp** (Material 3's elevation model). Two of the six levels would be indistinguishable in light and all six in dark โ€” see the shadow column above. - **backdrop-filter on anything new.** The blur budget is exactly one use, the masthead, and it stays that way. Blur is not an elevation channel here; it is a cost with a single sanctioned payer. - **A third surface colour.** No palette value is added, changed or introduced by this section. --rim is white at an alpha; --edge and --edge-lift are the existing --hairline and --border. -------------------------------------------------------------------------- */ :root { /* Light. The rim is `none` rather than a faint white because a faint white is not faint here โ€” it is absent (1.119 against the page, 1.044 against the card, both under the 1.25 floor, above). Declaring it none says "this channel does not exist in this theme", which is a fact a future surface should not have to rediscover. */ --rim: none; --rim-strong: none; /* The channel that actually carries a light card, and the stronger one for the level above it. Both already exist; naming them by ROLE is what lets a component ask for "the boundary" instead of naming a colour. */ --edge: var(--hairline); /* 1.177 against the page */ --edge-lift: var(--border); /* 3.110 against the page */ /* The same ink triple --shadow already uses (43, 42, 40 = --text), pushed one step. 0.22 reaches 1.526 over the page; the tight 5% pair is the contact shadow that stops the card looking like it is floating free. */ --shadow-lift: 0 2px 4px rgba(43, 42, 40, 0.05), 0 28px 60px -28px rgba(43, 42, 40, 0.22); } /* KEEP THE TWO BODIES BYTE-IDENTICAL โ€” the rule section 1 sets, and this section adds four tokens to both. A token added to one path and not the other is invisible until somebody tests the other path. */ :root[data-theme="dark"] { /* 0.08 is the smallest alpha that clears the 1.25 floor: 1.281 against --surface, 1.481 against --page. 0.07 measures 1.240 and misses. `inset 0 1px 0` at zero blur is the app's own solved lifted-surface recipe โ€” light catching the top of a real material โ€” and it costs no blur, no layout and no extra paint area. */ /* 0.085, not 0.08. The 2.0 Night surface is #19171f where 1.0's was #272a28 โ€” darker, so a white rim at the old alpha composites to a smaller step: measured 1.249:1 against the surface, a thousandth under the app's own 1.25 boundary floor. The rim is the ONLY elevation channel dark has (a drop shadow on a near-black ground reaches 1.253 at full black, which is why ยง18 rejected it), so this is not a value to leave a rounding error below its floor. 0.085 measures 1.270. */ --rim: inset 0 1px 0 rgba(255, 255, 255, 0.085); --rim-strong: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* Dark's card carries no border by section 1's decision, and that decision stands: a 1px border under a soft shadow is the ghost card. The level above it can afford one, because it has no shadow to ghost against. */ --edge: transparent; --edge-lift: var(--hairline); /* 1.523 against the page */ /* THE ONE EXISTING DECLARATION THIS SECTION CHANGES, and it is a defect fix rather than a design change. `--shadow: none` in dark left --facts, --invite, .release and .log__empty separating from the page by fill alone, at **1.156:1** โ€” under the app's own 1.25 floor, with no edge and no shadow to make it up. The changelog page is 62KB of .release. A drop shadow cannot fix it (1.253 at full black, above). The rim can, and does, at 1.481. Cards that already carry their own hue edge โ€” .bento__cell and .demo__pane โ€” paint that edge over the rim in the same pixel row and are visually unchanged. */ --shadow: var(--rim); /* No drop shadow. Deliberately: see the 1.253 ceiling. A dark drop shadow is a paint cost that buys 0.1 of ratio, which is how a design ends up with a shadow ramp nobody can see. */ --shadow-lift: var(--rim-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sage"]) { /* 0.085, not 0.08. The 2.0 Night surface is #19171f where 1.0's was #272a28 โ€” darker, so a white rim at the old alpha composites to a smaller step: measured 1.249:1 against the surface, a thousandth under the app's own 1.25 boundary floor. The rim is the ONLY elevation channel dark has (a drop shadow on a near-black ground reaches 1.253 at full black, which is why ยง18 rejected it), so this is not a value to leave a rounding error below its floor. 0.085 measures 1.270. */ --rim: inset 0 1px 0 rgba(255, 255, 255, 0.085); --rim-strong: inset 0 1px 0 rgba(255, 255, 255, 0.14); --edge: transparent; --edge-lift: var(--hairline); --shadow: var(--rim); --shadow-lift: var(--rim-strong); } } /* The three levels, as classes phases 4-8 ask for by name rather than rebuilding. Named for what they ARE in the page's hierarchy, not for a number โ€” an "elevation 3" tells a later reader nothing about whether it may hold a control. */ /* Content sitting on the page. No boundary, and it is a class rather than an absence so that a component can be moved down a level without deleting the line that says which level it is on. */ .surface-flat { background: var(--page); border: 1px solid transparent; box-shadow: none; } /* A card. Identical in effect to what .facts / .invite / .release already compose by hand, so adopting it is a refactor and not a restyle. */ .surface-raised { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); } /* The one thing above everything โ€” a popover, a sticky side panel, the open state of a disclosure that overlaps what it came from. There is no level above this and there must not be: a fourth would have to reach for the channel the theme does not have. */ .surface-lifted { background: var(--surface); border: 1px solid var(--edge-lift); border-radius: var(--r-card); box-shadow: var(--shadow-lift); } /* A recessed band. The existing .section--sunk treatment, named so a card can also be sunk without borrowing a section's class. --surface-sunk is 1.055 below the light page and 1.084 below the dark one: too shallow to be a boundary on its own, which is correct โ€” a sunk band is a change of ground for a whole region, read from its EDGES against the sections above and below it, not from a card-sized patch. Never sink a card. */ .surface-sunk { background: var(--surface-sunk); border: 1px solid transparent; box-shadow: none; } /* prefers-reduced-transparency reaches the masthead in section 17 and nothing here, because nothing here is transparent โ€” the rim is a paint, not a veil, and that is exactly why it was chosen over the treatment that would have needed this block. prefers-contrast: more DOES reach here. Section 17 already promotes --hairline to --border, which promotes --edge with it for free (--edge reads --hairline, not a literal). Dark needs one line, because its --edge is `transparent` and reads nothing: */ @media (prefers-contrast: more) { :root:root { --edge: var(--border); /* The rim doubles rather than disappears. A reader asking for more contrast wants the boundary louder, not swapped for a different one: 1.809 against the page in dark, and still `none` in light, where the channel does not exist at any setting. */ --rim: inset 0 1px 0 rgba(255, 255, 255, 0.16); } } /* -------------------------------------------------------------------------- 19. Motion โ€” a vocabulary, and two channels through reduced motion -------------------------------------------------------------------------- Sections 16 and 16b hold the site's authored motion. What they do not hold is a vocabulary: fourteen literal durations across the file, one shared easing, and no written rule for which of them survives a reduced-motion request. Phases 4-8 add a scroll-driven pipeline, a composition-guard gesture and a filterable register. Those need the rule to exist first. ## Every duration below is a value the file ALREADY USES 180ms is the hover-colour timing at three call sites; 320ms is the card lift at four; 700ms is the arrival settle. This section names them and adds nothing new, on purpose. **A vocabulary that retunes the timings is a redesign wearing a token's clothes** โ€” the point is that a later page can reach for `--dur-tint` and land on the site's existing tempo rather than guessing 250ms. Their justification, now that they are written down once (Emil Kowalski's duration table, which these already sat inside): press feedback 100-160, tooltips 125-200, disclosures 150-250, modals 200-500, and UI under 300ms as a ceiling. --dur-explain is the deliberate exception: an explanatory animation on a marketing page is not UI, nobody is waiting on it, and the 700ms settle predates this section and is correct. ## The reduced-motion rule, and why it is two channels rather than one The blunt version of this โ€” `* { animation: none !important }` โ€” is worse than nothing here. It strips the colour change that tells a reader their hover landed, and it turns every transition into a snap, which reads as broken rather than as calm. Apple's guidance and the app's own motion research agree and say the same thing from different directions: reduced motion means a *gentler, non-vestibular equivalent*, and colour and opacity transitions are the licensed category while large positional movement, parallax and abrupt zoom are the risky ones. So there are two channels and the request separates them: --motion-tint colour and opacity. SURVIVES reduce. --motion-move transform and position. Collapses to zero under reduce. A duration written `calc(--dur-move * var(--motion-move))` is 320ms normally and 0ms under reduce, which removes the transition rather than accelerating it. The tint durations are untouched by the multiplier and keep their full value, which is the whole point. ## What this section found, and fixes Section 8 of the build direction says motion "lives inside @media (prefers-reduced-motion: no-preference)". That is true of every `animation:` in this file and **false of nineteen of the twenty-three `transition:` declarations**, which sit outside any reduced-motion gate. Most of them are colour and are correct there by the rule above. Five move something, and those are listed and neutralised at the bottom of this section. This is an app for people in distress; the gap is small and it is not one to leave for the phase-8 audit to find. -------------------------------------------------------------------------- */ :root { /* --ease is declared in section 1 and is a public API across three files โ€” cubic-bezier(0.22, 1, 0.36, 1), a strong ease-out. It is not renamed, not retuned and not wrapped. These three sit beside it, each for a job it is the wrong curve for. */ /* On-screen movement between two states the reader can see both of. An ease-out here reads as the object being flung; movement wants acceleration at both ends. */ --ease-move: cubic-bezier(0.65, 0, 0.35, 1); /* A colour or opacity change under the cursor. Near-symmetrical on purpose: a hover tint has no origin and no destination, so a strong ease-out gives it a direction it does not have. */ --ease-tint: cubic-bezier(0.4, 0, 0.6, 1); /* The mirror of --ease, for the RETURN leg of a reversible pair only โ€” a panel closing along the path it opened. Never for an entrance: an ease-in entrance delays the first frames, which are the ones the reader is watching hardest, and a 300ms ease-in dropdown feels slower than a 400ms ease-out one. */ --ease-exit: cubic-bezier(0.64, 0, 0.78, 0); /* The two channels. 1 = the motion runs. */ --motion-tint: 1; --motion-move: 1; /* Tint channel โ€” unaffected by the multiplier by design, because these durations are what a reduced-motion reader keeps. */ --dur-press: 120ms; /* the press, felt not watched */ --dur-tint: 180ms; /* hover and focus colour; the file's existing value */ --dur-reveal: 240ms; /* a disclosure opening */ /* Move channel โ€” every one multiplied, so a single media query below retires all of them at once and no call site has to remember. */ --dur-move: calc(320ms * var(--motion-move)); /* a card lifting */ --dur-settle: calc(420ms * var(--motion-move)); /* something arriving */ --dur-explain: calc(700ms * var(--motion-move)); /* motion that teaches */ } @media (prefers-reduced-motion: reduce) { :root { --motion-move: 0; } /* Zero duration removes a transition; it does not stop the transform being APPLIED. An instant 2px jump under the cursor is worse than no lift at all, so the five states in this file that move something are told not to move. Each keeps a non-positional signal, which is the requirement โ€” reduced motion is a gentler equivalent, not a silent one. Enumerated rather than swept. A `*` rule here would also cancel the scaleY that tells a reader which mood they picked, and there is no selector for "transforms that are decorative". */ /* Card lift on hover. The hue edge still brightens (section 10) โ€” the feedback survives, the movement does not. */ .bento__cell:hover { transform: none; } /* The changelog's back arrow slid 3px toward its direction of travel. It still recolours on hover. */ .log__back:hover::before { transform: translateY(-0.06em) rotate(45deg); } /* The mood bar's selected state scaled 12% and was listed here. The five radio buttons it belonged to became one `input[type=range]` on 2026-08-16 (section 10a), and a native range thumb does not move under a transform of ours โ€” it moves because the value changed, which is the control doing its job and not an animation. Nothing replaced this rule. The reply's 420ms arrival keyframe went at the same time and for a reason that outlives it: a keyframe restarts from zero where a transition retargets, so an animation on a value that changes four times during one drag flickers. */ /* Already correct and listed so a later reader does not "fix" them twice: .breath__circle is pinned in section 10b, every `animation:` in the file sits inside a no-preference gate, and `scroll-behavior: smooth` is in section 16's gate. */ } /* The theme change itself, which was the one abrupt brightness jump left on the site: the Light/Dark control repainted the whole page in a single frame, and this page is read at 2am by people whose eyes are adjusted to a dark room. It is a TINT transition, so it survives reduced motion โ€” which is the two-channel rule doing exactly the job it was written for. It costs nothing at load: a transition never runs on an element's initial value. Bounded to the surfaces that actually repaint, not applied with `*`. A universal selector would attach a transition record to every node on a 62KB page to catch nine, and would silently become the fallback timing for any future element whose own rule forgets to declare one. */ body, .masthead, .section--sunk, .facts, .invite, .release, .log__empty, .bento__cell, .demo__pane { transition: background-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), border-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint); } /* The one above that also carries its own hover transition declares it after this rule in source order โ€” .bento__cell (section 10) sits earlier in the file, so this rule would win and cancel its lift. Re-declared here, tint and move together, in the new vocabulary. `.study` was the second name in this list until 2026-08-16. It belonged to the landing page's research cards, and section 10d went with them. */ .bento__cell { transition: transform var(--dur-move) var(--ease), background-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), border-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint); } /* -------------------------------------------------------------------------- 20. The pages beyond the first -------------------------------------------------------------------------- Phases 4-8 of docs/Public Site - Build Direction.md. Six pages join the landing page, and this section is everything they need that sections 1-19 did not already provide. ## Three rules this section holds itself to 1. **It adopts the surface classes rather than composing a seventh card by hand.** ยง12.1 of the build direction found `.surface-raised`, `.surface-lifted`, `.surface-flat` and `.surface-sunk` built, measured and used by nothing โ€” AGENTS.md ยง3.5's first row, reproduced inside the plan that quotes it. ยง12.2 explained why Home could not fix that: its only real cards are the four names reserved for a separate refactor. The pages below have cards of their own, so this is where the debt is paid. Every card here is `.surface-raised` or `.surface-lifted` plus a hue, and none of them redeclares a background, a border or a shadow. 2. **It names no colour.** Every tint is `rgba(var(--hue), var(--fill))` through the `.hue-*` indirection section 1b established, every ink is `var(--hue-ink)`, and the elevation channels are `--edge`, `--rim` and `--shadow` from ยง18. So a palette change reaches this section without touching it, and the arithmetic in ยง18's header stays true here: a raised surface changes its boundary, never its ground. 3. **Every duration is a ยง19 token.** Nothing below writes a millisecond literal, so the whole of it retires under `prefers-reduced-motion` through `--motion-move` without a single extra media query. ## Width Blocks that are a reading column stay in `.wrap`. Blocks that are a grid or a diagram take `.wrap--wide`, which ยง17 gates at 1600 โ€” so on every phone, tablet and laptop these are the same container, and only a large desktop sees the difference. That is the whole of the desktop-tier ambition: it arrives where there is room for it and is inert everywhere else. -------------------------------------------------------------------------- */ /* --- The interior page head ---------------------------------------------- The landing page's `.hero` is a full-height arrival with a gradient behind it. An interior page is somewhere a reader has already decided to go, so it gets a smaller one: an eyebrow that says which page this is, the claim, and the sentence that opens underneath it. No gradient โ€” the gradient is the landing page's, and repeating it on seven pages would spend the one moment of colour the site has seven times. */ .page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--hairline); } .page-head h1 { max-width: 18ch; } .page-head .lead { margin-top: var(--s-5); max-width: var(--measure); } @media (min-width: 1280px) { .page-head h1 { max-width: 22ch; } } /* --- The layered claim --------------------------------------------------- The proposal's ยง3 in one component, and it is the site's central idea rather than a widget: one sentence anyone can read, with the substantiation opening a click beneath it. Someone having a hard week reads the summary and stops; a grant reader opens every one. `
`, not a JavaScript accordion. It is keyboard-reachable and screen-reader-announced without a line of script, it prints open in browsers that honour the print rule below, and โ€” the reason that decides it โ€” a reader searching the page with Cmd-F finds text inside a closed `
` in every current engine. A div that is `display: none` is invisible to that search, which would hide the evidence from the reader most likely to be looking for it. */ /* ๐Ÿ”ด **A claim's rule is a separator BETWEEN claims โ€” 2026-10-11.** `.claim` carries `border-top` and no top margin, which is exactly right in a run of them: claim, hairline, claim, each padded 36. It is wrong the moment a claim follows something else, because the hairline is then drawn on that thing's bottom edge. On about the three `.steps` cards had the rule laid flush along them โ€” measured 0px. The padding is not the gap here: the border sits at the OUTER edge of it, so the text is 36px clear while the line touches. A sweep that treats padding as separation cannot see this, which is why it was not in the previous pass. Scoped to a claim that follows a non-claim, so a run of claims keeps the flush rule it is designed around. Block flow, so where the previous block already declares a bottom margin โ€” `.panel` does โ€” the two collapse to one gap rather than stacking. */ :not(.claim) + .claim { margin-top: var(--s-8); } /* The rail is inset by exactly the claim's own padding, so it spans the content box and nothing else. It is one value, not two: the inset used to be a hardcoded copy of this clamp, so `.claim--on-panel` setting `padding: 0` left the rail still insetting 36px top and bottom โ€” on a 117px claim that is a 45px stub floating between two paragraphs. */ .claim { --claim-rail-inset: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--hairline); padding-block: var(--claim-rail-inset); } .claim:last-child { border-bottom: 1px solid var(--hairline); } .claim__say { font-family: var(--font-head); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.28; letter-spacing: -0.015em; max-width: 30ch; } .claim__body { margin-top: var(--s-3); max-width: var(--measure); color: var(--text-soft); } .claim__more { margin-top: 1.1rem; } /* The disclosure control. A summary is a control, so it carries the 3:1 the WCAG 1.4.11 asks of one โ€” `--border` measures 3.110 against the light page and 3.808 against the dark one, both from ยง18's table, and neither is a value this section invents. */ .claim__toggle { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-inline: 0.95rem; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 0.9375rem; color: var(--text); cursor: pointer; list-style: none; transition: background-color var(--dur-tint) var(--ease-tint), color var(--dur-tint) var(--ease-tint), transform var(--dur-press) var(--ease); } .claim__toggle::-webkit-details-marker { display: none; } /* The caret is the one thing here that rotates, so it is on the move channel and stops rotating under `reduce` โ€” where the open state is still carried by the label swap below, which is a text change and needs no motion. */ .claim__toggle::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.1em) rotate(45deg); transition: transform var(--dur-move) var(--ease-move); } .claim__more[open] .claim__toggle::after { transform: translateY(0.1em) rotate(-135deg); } .claim__toggle:hover { background: var(--wash); color: var(--text); } .claim__toggle:active { transform: scale(calc(1 - 0.02 * var(--motion-move))); } .claim__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The two labels are named for the state they BELONG to: --shut is what the toggle says while the disclosure is shut, --open is what it says while it is open. This rule hides the other one, and until 2026-08-16 it hid the wrong one โ€” so every disclosure on the site read "Close" while closed and "How do we know that" while open, which is the exact reverse of the affordance. Seven of them shipped that way across how.html and vision.html. Measured rather than spotted: with the disclosure shut, the --shut label computed `display: none` and the --open label computed `display: block`. */ .claim__more[open] .claim__toggle .claim__label--shut, .claim__more:not([open]) .claim__toggle .claim__label--open { display: none; } .claim__detail { margin-top: var(--s-5); padding-left: var(--rail-gap); border-left: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.55); max-width: var(--measure); } .claim__detail > * + * { margin-top: var(--s-4); } .claim__detail dl { display: grid; gap: 0.55rem 1.25rem; margin: 0; } .claim__detail dt { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--hue-ink, var(--accent)); } .claim__detail dd { margin: 0; color: var(--text-soft); } @media (min-width: 720px) { .claim__detail dl { grid-template-columns: 12rem 1fr; } .claim__detail dt { grid-column: 1; } .claim__detail dd { grid-column: 2; } } @media print { .claim__more > .claim__detail { display: block; } } /* --- The onward index ------------------------------------------------------ NOT three identical cards. "Three equal feature cards in a row" is the single most recognisable generated-page signature there is, and a card is the lazy container: it says "these things are peers" and nothing else. These are not peers. They are a reading order. So the component is a list of editorial rows โ€” a large title, one sentence of what is behind it, a hairline between โ€” which is the same language the mechanism table and the reference list already speak on this site, and which scales to two items or to seven without the grid developing a hole. The hue survives as a short rule against the title rather than as a filled card, so the family colour still identifies the destination and the page does not gain a fourth card shape. */ .onward { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .route { display: grid; gap: 0.35rem 2.5rem; align-items: baseline; padding-block: clamp(1.25rem, 2.6vw, 1.9rem); /* Breathing room on the trailing edge โ€” 2026-10-11. The row had `padding-block` and no `padding-inline`, so the last grid column (`.route__go`, the "Read the mechanism" link) sat flush against the row's own edge. Invisible at rest, obvious on hover: `background-color` tints the whole row, and the tint ended exactly where the letters did. Only the trailing edge is padded. The leading edge is already handled โ€” `.route::before` is the hue rule at `left: 0`, and the title and body clear it with `padding-left: var(--rail-gap)`. The hairline is drawn on the border box, so it still spans the full measure while the content sits inside it, which is the arrangement the rest of this page uses. */ padding-inline-end: clamp(1rem, 2.2vw, 1.75rem); border-top: 1px solid var(--hairline); text-decoration: none; color: inherit; position: relative; transition: background-color var(--dur-tint) var(--ease-tint); } .onward .route:last-child { border-bottom: 1px solid var(--hairline); } /* The hue rule. One pixel, drawn against the title, sitting in the row's own leading edge โ€” the boundary a card would have carried, spent on the one place it identifies something. It grows on hover, which is a tint-channel change of scale on a decorative rule: it carries no meaning, so `reduce` collapsing it costs nothing. */ .route::before { content: ""; position: absolute; left: 0; top: clamp(1.4rem, 2.8vw, 2.05rem); width: 2px; /* Full-height rather than a stub. It now runs the height of the row's text block, so it reads as a rule identifying the row rather than as a fragment of one that failed to paint. The hover growth moves to opacity and colour, both tint-channel, because a rule that is already the right length has nowhere to grow to. */ top: clamp(1.4rem, 2.8vw, 2.05rem); bottom: clamp(1.4rem, 2.8vw, 2.05rem); height: auto; border-radius: 1px; background: rgba(var(--hue, var(--rgb-sage)), 0.55); transition: background-color calc(var(--dur-tint) * var(--motion-tint)) var(--ease-tint); } .route:hover::before, .route:focus-visible::before { background: rgba(var(--hue, var(--rgb-sage)), 1); } .route__h { font-family: var(--font-head); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -0.015em; padding-left: var(--rail-gap); } .route p { color: var(--text-soft); max-width: 46ch; padding-left: var(--rail-gap); } .route__go { padding-left: 1.1rem; font-weight: 500; color: var(--hue-ink, var(--accent)); border-bottom: 1px solid transparent; justify-self: start; transition: border-color var(--dur-tint) var(--ease-tint); } @media (min-width: 860px) { .route { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; } .route p { padding-left: 0; } .route__go { padding-left: 0; } } /* Hover is guarded, because a touch device fires it on tap and leaves the row stuck in its hovered state until something else is touched. */ @media (hover: hover) and (pointer: fine) { .route:hover { background: var(--wash); } .route:hover::before { transform: scaleY(1); } .route:hover .route__go { border-bottom-color: currentColor; } } /* Press. The whole row is the target, so the whole row acknowledges the press โ€” on pointer-down, not on release, because waiting for the click reads as a dead control. */ .route:active { background: var(--wash-strong); } .route:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* --- The pipeline -------------------------------------------------------- How it works, and the page's whole argument. Five stages, drawn as a column of cards with a rule running down through them, so the SHAPE of the thing is legible before a word of it is read. The motion is scroll-driven and it teaches: each stage settles as it arrives, in the order the pipeline runs, so scrolling the page IS running the pipeline. Under `reduce` โ€” and in any browser without a view timeline โ€” all five render complete and static with the connector drawn, and the page teaches identically. Nothing here carries meaning through movement. The connector is a border on the list rather than a pseudo-element per stage, so it cannot end up half-drawn between two cards. */ .pipe { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); margin: 0; padding: 0; list-style: none; } .stage { display: grid; gap: 0.35rem 1.5rem; padding: clamp(1.25rem, 2.6vw, 2rem); position: relative; isolation: isolate; } .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(var(--hue, var(--rgb-sage)), var(--fill)); } /* The stage number. A counter rather than typed digits, so inserting a stage cannot leave the page numbered 1 2 3 3 4 โ€” which is the specific way a hand-numbered list goes wrong, and it goes wrong silently. */ .pipe { counter-reset: stage; } .stage__n { counter-increment: stage; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); border: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.5); font-family: var(--font-head); font-size: 1.0625rem; color: var(--hue-ink, var(--accent)); } .stage__n::before { content: counter(stage); } .stage__h { font-family: var(--font-head); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.22; letter-spacing: -0.014em; } .stage__say { color: var(--text-soft); max-width: 54ch; } .stage__hold { margin-top: var(--s-3); padding-top: 0.75rem; border-top: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.35); font-size: 0.9375rem; line-height: 1.55; max-width: 54ch; } .stage__hold b { color: var(--hue-ink, var(--accent)); font-weight: 600; } @media (min-width: 860px) { .stage { grid-template-columns: 2.25rem 1fr; align-items: start; } .stage__n { grid-row: 1 / span 4; } } /* The withheld clause becomes a column of its own rather than a paragraph under the last one, and that is a content decision before it is a layout one. Every stage on this page makes two statements โ€” what happens, and what this site will not tell you about it โ€” and they are a pair. Setting them side by side says so; stacking them makes the second look like a footnote to the first. It also fixes the specific thing that showed up on the render: `.stage__say` is capped at 54ch, so above about 1100px the right half of each card was empty. Filling it with the clause that was already there costs no new copy and no new component. 1100 rather than 1280 because the constraint is the two text columns, not the desktop tier: 54ch plus 40ch plus the gutters is what needs the room, and that arrives before ยง17's breakpoint does. */ @media (min-width: 1100px) { .stage { grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 0.78fr); column-gap: clamp(1.5rem, 3vw, 2.75rem); } .stage__n { grid-row: 1 / span 2; } .stage__h { grid-column: 2 / -1; } .stage__say { grid-column: 2; max-width: none; } .stage__hold { grid-column: 3; grid-row: 2; margin-top: 0; padding-top: 0; padding-left: var(--rail-gap-wide); border-top: 0; border-left: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.35); max-width: none; } } /* --- The composition guard, and the site's one dimensional moment --------- The hardest idea on the site in one gesture: a model reaches for a sentence and receives an identifier. ## Why this is the place the third dimension is spent The brief asks for a genuinely three-dimensional treatment somewhere prominent. Most of the ways a marketing page reaches for that are ruled out here before taste gets a vote โ€” ยง18's arithmetic makes glass on a light page not weak but absent (a pure white top edge measures 1.119:1 on the page, 1.044:1 on a card, both under the 1.25 boundary floor), and a parallax hero is in the exact category [[Design Language]] ยงMotion names as risky for this audience. What is NOT ruled out is geometry. `perspective` and `rotateY` name no colour, change no contrast ratio, cost no blur, and compose on the GPU. So the depth is spent once, on the one gesture where depth is the argument: **the composed sentence is pushed away from the reader, and the identifier is what stays.** The left panel rotates back and recedes as it scrolls through; the right panel comes to rest square to the page. That is the claim, drawn. Motion that explains is the only motion this page is allowed, and it earns its exemption from the sub-300ms UI rule the same way a diagram does: nobody is waiting on it. ## What it does under `reduce`, and it is not "less" Both panels sit flat, square and complete, side by side, and the labels above them carry the whole idea in words. The reader loses an illustration of the argument and keeps the argument. Everything below is transform-only and multiplied by ยง19's `--motion-move`, so the whole effect retires through a token rather than through a second media query. */ .swap { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; } @media (min-width: 900px) { .swap { grid-template-columns: 1fr auto 1fr; /* The shared vanishing point. On the container, not on the panels, so both read as sitting in ONE space rather than in two private ones โ€” which is the difference between a scene and two rotated rectangles. */ perspective: 1600px; perspective-origin: 50% 45%; } } .swap__pane { padding: clamp(1.25rem, 2.6vw, 1.9rem); position: relative; isolation: isolate; transform-style: preserve-3d; } .swap__pane::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(var(--hue, var(--rgb-sage)), var(--fill)); } .swap__label { display: block; font-size: 0.8125rem; font-weight: 600; /* Small text takes POSITIVE tracking; the display sizes take negative. One letter-spacing across a scale is wrong somewhere. */ letter-spacing: 0.06em; text-transform: uppercase; color: var(--hue-ink, var(--accent)); margin-bottom: var(--s-3); } .swap__wire { font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.6; overflow-wrap: anywhere; } .swap__say { margin-top: var(--s-4); font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); } .swap__foot { margin-top: var(--s-5); max-width: 62ch; } /* The connector. Authored geometry rather than a "โ†’" character: a unicode glyph standing in for drawn artwork inherits whatever arrow the reader's font happens to have, and this one has to align with two panel edges. */ .swap__arrow { display: flex; align-items: center; justify-content: center; color: var(--text-soft); } .swap__arrow svg { display: block; width: 2.5rem; height: 2.5rem; } @media (max-width: 899px) { .swap__arrow svg { transform: rotate(90deg); } } /* --- The register -------------------------------------------------------- The Evidence page. Every row is one study, and every row is complete in the markup โ€” the filters below only HIDE rows, so a reader with no JavaScript gets the whole register and loses only the ability to narrow it. That order matters: the alternative renders rows from a script, and a page whose evidence disappears when a script fails is not a page about evidence. The verdict chip carries the repo's own four-value vocabulary. Colour is never the only signal โ€” each chip prints its word โ€” so the distinction survives greyscale, colour blindness and a printed copy, which is the same rule the privacy page's callouts follow. */ /* Tightened 2026-08-16 with the evidence rebuild. The real lever on "the cards are too big" is padding and gap, not content โ€” the rows had already lost a fact line and were still tall. Geometry only: no type size and no colour changes here, so nothing this section does can move a contrast reading. */ .reg { display: grid; gap: clamp(0.55rem, 1.1vw, 0.8rem); margin: 0; padding: 0; list-style: none; } .reg__row { padding: clamp(0.9rem, 1.7vw, 1.2rem); } .reg__row[hidden] { display: none; } .reg__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; } .reg__h { font-family: var(--font-head); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.24; letter-spacing: -0.012em; flex: 1 1 20rem; } .reg__cite { font-size: 0.9375rem; color: var(--text-soft); } .chip { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); border: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.55); background: rgba(var(--hue, var(--rgb-sage)), var(--fill-hi)); color: var(--hue-ink, var(--accent)); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .reg__facts { display: grid; gap: 0.3rem 1.1rem; margin: 0.7rem 0 0; font-size: 0.9375rem; } .reg__facts dt { font-weight: 600; color: var(--text); } .reg__facts dd { margin: 0; color: var(--text-soft); } @media (min-width: 640px) { .reg__facts { /* 8rem, down from 9.5. The label column was sized for a four-row grid whose longest term was "Design"; the rebuild merged Design and N into one "Study" row, so 1.5rem of the column was holding nothing open. */ grid-template-columns: 8rem 1fr; } } .reg__ceiling { margin-top: var(--s-3); padding-left: var(--rail-gap); border-left: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.6); font-size: 0.9375rem; line-height: 1.6; } .reg__ids { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-family: var(--font-mono); font-size: 0.8125rem; } .reg__ids a { color: var(--text-soft); } .reg__ids a:hover { color: var(--text); } /* --- The filters --------------------------------------------------------- Hidden until JavaScript announces itself, by the same rule the theme control follows: a visible control that cannot do anything is a worse failure than no control. With scripting off the register is simply whole. The feedback is instant reflow with no transition, per ยง8 of the build direction โ€” a filter that animates its result makes the reader wait to find out whether it did anything. */ .filters { display: none; } /* Three axes and twenty-six options, from 2026-08-16. One flat wrap of twenty-six pills is a wall, so the bar is three labelled groups stacked as rows โ€” legend in its own track from 720 up, pills wrapping in the other. That is the same two-track editorial row `.mech` and `.tense` already use, which is why the page does not gain a layout family for it. The reset sits in a fourth group with an empty legend cell rather than inline with the population pills, so its column aligns with the others and it never reads as an eighth population. */ :root[data-js] .filters { display: grid; gap: 0.9rem 0; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .filters__group { display: grid; gap: var(--s-2); align-items: start; } .filters__set { display: flex; flex-wrap: wrap; gap: var(--s-2); } .filters__legend { font-size: 0.875rem; color: var(--text-soft); padding-top: 0.7rem; } /* The reset's legend cell is empty, so nothing sets the row's height and it sits tighter to the population group than the three labelled rows sit to each other. One step of separation, and it is a modifier rather than a `:last-child` rule so that adding a fourth axis after it cannot silently move the spacing onto the new group. */ .filters__group--reset { margin-top: 0.2rem; } @media (min-width: 720px) { .filters__group { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--s-4); } .filters__legend { text-align: right; } } /* THE NAME LEADS AND THE COUNT FOLLOWS, from 2026-08-16. ------------------------------------------------------------------------ The label and its count used to be set at 0.875 and 0.8125rem, both in `--text-soft`. Two figures of near-equal weight, fourteen times in a row, and the bar read as a tally of how thin the evidence is rather than as an index of what the app claims to do. The counts are all correct and none of them is hidden; what changed is which one the eye reaches first. The mechanism is the subject and gets `--text` at 500. The count is an affordance - it says what pressing this would leave - and is set smaller, softer and raised off the baseline so it reads as an annotation on the word rather than as a second word. */ .filter { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.9rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background-color var(--dur-tint) var(--ease-tint), color var(--dur-tint) var(--ease-tint), transform var(--dur-press) var(--ease); } @media (hover: hover) and (pointer: fine) { .filter:hover { color: var(--text); background: var(--wash); } } .filter:active { transform: scale(calc(1 - 0.02 * var(--motion-move))); } .filter[aria-pressed="true"] { background: var(--wash-strong); border-color: var(--accent); font-weight: 600; } /* An option that would leave nothing. `disabled` rather than hidden: a facet bar that removes its own options as you press them stops being a map of what is in the register, and the reader loses the ability to see that a combination is empty โ€” which is itself a finding on a page whose subject is what the literature does and does not cover. Held at 0.55 rather than at a paler ink, because opacity carries the whole control down together โ€” border, label and count โ€” where a colour change would have to be measured against three grounds. A disabled button is out of the tab order and cannot be pressed, so it is not a control any more and the 3:1 that WCAG 1.4.11 asks of one does not apply to it. */ .filter[disabled] { opacity: 0.55; cursor: default; } /* The yield count. Tabular figures because the whole point of the column is that the numbers are compared down it, and a proportional 1 next to a proportional 8 makes two buttons of the same word different widths. It is inside the button, so the accessible name is "Rumination 3" โ€” the count is part of what the control offers, not decoration beside it. A screen reader is not affected by which of the two is set larger, which is the point of demoting it visually rather than removing it. */ .filter__n { margin-left: 0.45rem; align-self: flex-start; margin-top: 0.62rem; font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 400; color: var(--text-soft); } .filter[aria-pressed="true"] .filter__n { color: var(--text); } /* The reset carries no count โ€” "how many rows would showing everything leave" is the total, which is already in the status line under the bar and would be the only number on the page printed twice. */ .filter--reset { font-weight: 500; } .filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .reg__count { margin-bottom: var(--s-4); font-size: 0.9375rem; color: var(--text-soft); } /* --- The measurement ledger ---------------------------------------------- Its own layout family, and that is the reason it exists rather than a fourth run of the disclosure component. A page that says everything in one shape teaches the reader to stop looking. The shape is the content: an assumption on the left in the quiet voice, the measurement on the right in the loud one, and the corpus it was measured against underneath. No strikethrough, no red, no cross โ€” the correction is carried by which column is emphasised, so it reads as precision rather than as confession. That is the register the whole evidence argument depends on. */ .ledger { display: grid; gap: 0; margin: 0; } .ledger__row { display: grid; gap: 0.5rem 2.5rem; padding-block: clamp(1.25rem, 2.6vw, 1.9rem); border-top: 1px solid var(--hairline); } .ledger__row:last-child { border-bottom: 1px solid var(--hairline); } .ledger__k { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); } .ledger__said { margin: 0; color: var(--text-soft); max-width: 42ch; } .ledger__is { margin: 0; font-family: var(--font-head); font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.3; letter-spacing: -0.012em; max-width: 42ch; } .ledger__on { margin: 0; font-size: 0.9375rem; color: var(--text-soft); } @media (min-width: 900px) { .ledger__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } .ledger__k--said, .ledger__said { grid-column: 1; } .ledger__k--is, .ledger__is, .ledger__on { grid-column: 2; } } /* --- Invariants ---------------------------------------------------------- The Safety page. A constraint on the left, the test that holds it on the right โ€” the pairing IS the argument, so they share a row and never a list. */ .inv { display: grid; gap: 0; margin: 0; } .inv__row { display: grid; gap: 0.35rem 2rem; padding-block: clamp(1.1rem, 2.2vw, 1.5rem); border-top: 1px solid var(--hairline); } .inv__row:last-child { border-bottom: 1px solid var(--hairline); } .inv__what { font-weight: 600; margin: 0; max-width: 46ch; } .inv__how { margin: 0; color: var(--text-soft); max-width: 46ch; } .inv__test { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-soft); overflow-wrap: anywhere; } @media (min-width: 900px) { .inv__row { grid-template-columns: 1fr 22rem; } .inv__what, .inv__how { grid-column: 1; } .inv__test { grid-column: 2; grid-row: 1 / span 2; padding-left: var(--rail-gap-wide); border-left: 1px solid var(--hairline); } } /* --- The directory ------------------------------------------------------- Thirteen services, and the point of the component is the last column: what `sourceVerified` means and what it does not. Never a table on a phone โ€” a definition list of cards reflows and a table does not. */ .dirs { display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem); margin: 0; padding: 0; list-style: none; } .dir { padding: clamp(0.9rem, 1.8vw, 1.25rem); display: grid; gap: 0.3rem 1.25rem; } .dir__name { font-weight: 600; } .dir__num { font-family: var(--font-mono); font-size: 1.0625rem; color: var(--hue-ink, var(--accent)); } .dir__meta { font-size: 0.875rem; color: var(--text-soft); } @media (min-width: 720px) { .dir { grid-template-columns: 1fr 10rem 14rem; align-items: baseline; } } /* The same three-part shape carrying a permission instead of a service: a name, a machine-readable identifier, and what is known about it. The identifier is the reason for the modifier โ€” `SCHEDULE_EXACT_ALARM` is twenty characters of monospace and the 10rem track above was measured for `0800 567 567`. Widening the track is the whole change: no new colour, no new component, and the phone-number layout is untouched. */ .dir--perm .dir__num { font-size: 0.9375rem; overflow-wrap: anywhere; } @media (min-width: 720px) { .dir--perm { grid-template-columns: 1fr 15rem 13rem; } } /* --- Vision -------------------------------------------------------------- Two components, and the difference between them is the whole rule of that page. `.now` is what is true today. `.next` is what is intended, and every one of them is marked as intended in the markup itself โ€” a label a reader cannot miss and a caption cannot lose. A page where the reader has to infer which half is built is a page that will eventually be read wrong. */ .horizon { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); } @media (min-width: 900px) { .horizon { grid-template-columns: repeat(2, 1fr); } } .tenet { padding: clamp(1.25rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; gap: var(--s-3); position: relative; isolation: isolate; } .tenet::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(var(--hue, var(--rgb-sage)), var(--fill)); } /* The tense marker. Not decoration: it is the one hard rule the Vision page has, made structural so it cannot be edited away by someone rewriting a sentence. */ .tenet__when { align-self: flex-start; padding: 0.2rem 0.65rem; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); } .tenet__h { font-family: var(--font-head); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.22; letter-spacing: -0.014em; color: var(--hue-ink, var(--accent)); } .tenet p { color: var(--text-soft); } .tension { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: var(--s-4); } .tension__h { font-family: var(--font-head); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.22; letter-spacing: -0.015em; max-width: 26ch; } .tension__pull { display: grid; gap: 0.75rem 1.5rem; padding-block: var(--s-2); } @media (min-width: 760px) { .tension__pull { grid-template-columns: 1fr 1fr; } } .tension__side { padding-left: var(--rail-gap); border-left: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.6); font-size: 0.9375rem; line-height: 1.6; } .tension__answer { max-width: var(--measure); } .tension__answer b { color: var(--hue-ink, var(--accent)); } /* --- The design page's own exhibits -------------------------------------- A page about a design system has to show the system rather than describe it, so these two are the argument: a strip of the accent family in the theme the reader is actually in, and a table of measured ratios. The swatches are decorative fills paired with a text label, which WCAG exempts and `test/contrast_test.dart` exempts for the same reason โ€” the label carries the meaning and the fill illustrates it. The INK sample inside each one is not exempt and is the thing being demonstrated. */ .swatches { display: grid; gap: clamp(0.6rem, 1.4vw, 0.9rem); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0; padding: 0; list-style: none; } .swatch { padding: clamp(0.9rem, 1.8vw, 1.25rem); border-radius: var(--r-card); border: 1px solid rgba(var(--hue, var(--rgb-sage)), 0.5); background: rgba(var(--hue, var(--rgb-sage)), var(--fill-hi)); } .swatch__ink { display: block; font-family: var(--font-head); font-size: 1.125rem; color: var(--hue-ink, var(--accent)); } .swatch__name { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-soft); } .ratios { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .ratios th, .ratios td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--hairline); } .ratios th { font-weight: 600; } .ratios td:not(:first-child) { font-family: var(--font-mono); font-size: 0.875rem; /* A column of ratios a reader is meant to compare down has to be aligned down. Proportional digits put 1.072 and 12.809 on different rhythms and the comparison stops being free. */ font-variant-numeric: tabular-nums; text-align: right; } .ratios caption { text-align: left; padding-bottom: 0.75rem; color: var(--text-soft); font-size: 0.9375rem; } /* --- The crisis route in the footer -------------------------------------- Above the fold of the footer on every page, and it is markup rather than a component with state: no disclosure, no script, no animation, nothing that can fail to open. The only thing it borrows from the rest of the site is the typography. */ .help { /* The rule was landing about 10px under "Version 1.11.0" with no air between them, so the version read as a caption on the line rather than as the end of the block above it. A border is a boundary between two things and needs to belong to neither. */ margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hairline); } .help__h { font-family: var(--font-head); font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: var(--s-3); } .help__grid { display: grid; gap: 0.75rem 2.5rem; max-width: var(--measure); } /* The immediate route reads at body weight rather than small print. It is the sentence a person in trouble needs to find without reading the paragraph under it, so it does not get the quiet treatment the sourcing note gets. */ .help__now { font-weight: 500; } .help__dir { color: var(--text-soft); } .help__dir .go { color: var(--text); } .help__note { max-width: 66ch; } @media (min-width: 900px) { .help__grid { grid-template-columns: 1fr 1fr; max-width: none; } .help__note { grid-column: 1 / -1; } } /* --- Arrival, for the components above ----------------------------------- The same three gestures section 16b established, extended to the new components rather than a fourth invented for them. Inside the same `@supports` and the same reduced-motion gate, so a browser without view timelines shows every one of these complete โ€” which is also what `reduce` shows, and what a printed page shows. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* The register and the directory are LONG LISTS and are deliberately absent from this block. Twenty-five rows each rising as they cross the fold is the "one identical entrance on every element" failure โ€” it reads as a template, it delays the one thing a reader came to this page to read, and on the Evidence page it animates the evidence. They render immediately, at full opacity, always. */ .tenet { animation: lift linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; } /* The stages arrive in pipeline order for free: a view() range is measured per element, so a card lower in the column is further behind without a delay ladder, and the order cannot desynchronise from the markup the way an nth-child ladder does when a stage is inserted. */ .stage { animation: lift linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; } /* A panel of argument arrives as one object, and its range end is a LENGTH for ยง16's reason: both `entry` and `cover` are measured against the element's own height, so a percentage on a tall panel becomes hundreds of pixels spent at partial opacity. */ .claim, .tension, .ledger__row, .inv__row { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 240px; } /* The composition guard. Two different gestures, because the two panels are making opposite statements โ€” the whole point is that they do NOT arrive the same way. Transform only; both retire through --motion-move. */ .swap__pane--away { animation: recede linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } .swap__pane--stays { animation: settle-square linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; } /* The connector draws itself along its own length rather than fading in. clip-path is a compositor property, names no colour, and is the one reveal that survives every constraint this palette imposes. */ .swap__arrow svg { animation: draw-line linear both; animation-timeline: view(); animation-range: entry 12% cover 30%; } } } /* The theme crossfade ยง19 bounds to the surfaces that repaint. The new cards repaint too, and are added here rather than to a `*` rule for the reason ยง19 gives. `.route` and `.stage` carry their own transitions above and are not repeated. */ .reg__row, .tenet, .dir, .tension, .swap__pane, .swatch { transition: background-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), border-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint); } /* The footnote under the composition guard. A class rather than an inline style: the site carries exactly one inline style declaration (the mood scale's --c, which is data), and a second one would be the start of a parallel stylesheet nobody audits. */ .swap__foot { margin-top: var(--s-5); max-width: 62ch; } /* -------------------------------------------------------------------------- 21. The specimen โ€” a design system you can operate -------------------------------------------------------------------------- The Design page. Everything below exists to serve one component, and the component exists to make one argument that prose cannot make: **a design language here changes form and motion, and never colour.** ## Why this is a specimen and not a screenshot The app declares nine design languages. A page that lists them is a brochure. A page where the reader switches between them and watches the same card answer differently is the system itself, running โ€” and it costs nothing this site did not already have, because every value below is read out of `lib/design/design_language.dart` and reproduced, never invented. ## The palette is not a variable here, and that is the point Section 1's lock says no palette, accent or gradient value may change. This component obeys it structurally rather than by discipline: **not one custom property below carries a colour.** They carry a press depth, an edge width, a shadow strength, a space scale, an entrance scale and a tempo. Switching language cannot alter a colour because no colour is reachable from the switch. That is also the truth about the app โ€” colour lives on the orthogonal axis, the palette, which this exhibit does not touch. ## No JavaScript Nine radio inputs and the general sibling combinator. The exhibit works with scripting off, which matters more here than anywhere else on the site: a page arguing that the product is careful should not need a script to demonstrate its own design system. The inputs are real radios in a real fieldset, so the whole thing is keyboard-operable and announced as a radio group without a line of ARIA. ## Reduced motion Every moving value is multiplied by --motion-move, so `reduce` collapses the squash and the landing to nothing rather than making them instant. That is section 19's rule, and it is also the app's own: a squash whose duration is zero is the scale applied instantly, which `design_language.dart` calls the one outcome worse than either having the press or not having it. The tint under the press survives, so a reduced-motion reader still sees the control answer. -------------------------------------------------------------------------- */ .spec { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } /* The radios themselves. Visually hidden, never `display: none` โ€” a hidden input is not focusable and the exhibit would stop being keyboard-operable. Same technique as .vh, inlined because these also need to stay in the flow as siblings for the ~ combinator below. */ .spec__in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .spec__pick { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; } .spec__opt { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 0.4rem 0.85rem; border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 0.9375rem; cursor: pointer; color: var(--text-soft); background: var(--surface); transition: color var(--dur-tint) var(--ease-tint), background-color var(--dur-tint) var(--ease-tint), border-color var(--dur-tint) var(--ease-tint); } /* The character line beside each name, so the control teaches while it selects rather than being nine words in a row. */ .spec__opt i { font-style: normal; font-size: 0.8125rem; color: var(--text-soft); opacity: 0.85; } /* Gated, as the other six hover rules in this file are. A touch device fires :hover on tap, so an ungated hover leaves the last-tapped chip looking selected next to the one that actually is. */ @media (hover: hover) and (pointer: fine) { .spec__opt:hover { color: var(--text); border-color: var(--border); } } /* Focus lands on the input, which is hidden, so the ring is drawn on the label it controls. Without this the exhibit is keyboard-operable and invisible while you operate it. */ #lang-soft:checked ~ .spec__pick .spec__opt[for="lang-soft"], #lang-loft:checked ~ .spec__pick .spec__opt[for="lang-loft"], #lang-clay:checked ~ .spec__pick .spec__opt[for="lang-clay"], #lang-stack:checked ~ .spec__pick .spec__opt[for="lang-stack"], #lang-veil:checked ~ .spec__pick .spec__opt[for="lang-veil"], #lang-relief:checked ~ .spec__pick .spec__opt[for="lang-relief"], #lang-press:checked ~ .spec__pick .spec__opt[for="lang-press"], #lang-crisp:checked ~ .spec__pick .spec__opt[for="lang-crisp"], #lang-slate:checked ~ .spec__pick .spec__opt[for="lang-slate"] { color: var(--accent-on); background: var(--accent); border-color: var(--accent); } #lang-soft:checked ~ .spec__pick .spec__opt[for="lang-soft"] i, #lang-loft:checked ~ .spec__pick .spec__opt[for="lang-loft"] i, #lang-clay:checked ~ .spec__pick .spec__opt[for="lang-clay"] i, #lang-stack:checked ~ .spec__pick .spec__opt[for="lang-stack"] i, #lang-veil:checked ~ .spec__pick .spec__opt[for="lang-veil"] i, #lang-relief:checked ~ .spec__pick .spec__opt[for="lang-relief"] i, #lang-press:checked ~ .spec__pick .spec__opt[for="lang-press"] i, #lang-crisp:checked ~ .spec__pick .spec__opt[for="lang-crisp"] i, #lang-slate:checked ~ .spec__pick .spec__opt[for="lang-slate"] i { color: var(--accent-on); opacity: 0.85; } .spec__in:focus-visible + .spec__opt { outline: 2px solid var(--accent); outline-offset: 2px; } .spec__body { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); /* The default row. Soft ships, so Soft is what an unstyled or unswitched reader gets, and every value here is Soft's own. */ --l-press: 0.02; --l-tempo: 1; --l-edge: 1px; --l-space: 1; --l-entrance: 0.97; --l-radius: 16px; --l-land: 0px; } @media (min-width: 960px) { .spec__body { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: start; gap: clamp(1.5rem, 3vw, 2.5rem); } } /* --- The nine rows ------------------------------------------------------- Read out of 1.0's design-language table, which went with Design 1.0 on 2026-09-06. pressDepth, tempo, edgeWidth, shadowStrength, spaceScale and entranceScale are the language's own numbers; --l-radius and --l-land are this component's reproduction of two things the app expresses in Dart rather than in a scalar. Slate is the row worth reading. It declares NO press depth, and that is not a gap: it presses by travelling onto its own block shadow โ€” zero blur, offset (3, 3) โ€” so the gap between card and shadow closes to nothing. The app's own comment records that a sweep for `pressDepth: 0.0` miscounted this row as silent, and that the audit which counted four languages with no press response should have counted three. It is reproduced here the way the app draws it, not the way the sweep read it. */ #lang-soft:checked ~ .spec__body { --l-press: 0.02; --l-tempo: 1; --l-edge: 1px; --l-space: 1; --l-entrance: 0.97; --l-radius: 16px; --l-land: 0px; } #lang-loft:checked ~ .spec__body { --l-press: 0.03; --l-tempo: 0.875; --l-edge: 1.5px; --l-space: 0.8; --l-entrance: 0.94; --l-radius: 22px; --l-land: 0px; } #lang-clay:checked ~ .spec__body { --l-press: 0.03; --l-tempo: 1; --l-edge: 1.5px; --l-space: 0.8; --l-entrance: 0.92; --l-radius: 20px; --l-land: 0px; } #lang-stack:checked ~ .spec__body { --l-press: 0.035; --l-tempo: 0.875; --l-edge: 1px; --l-space: 1; --l-entrance: 0.95; --l-radius: 14px; --l-land: 0px; } #lang-veil:checked ~ .spec__body { --l-press: 0.03; --l-tempo: 0.875; --l-edge: 1px; --l-space: 1; --l-entrance: 0.96; --l-radius: 18px; --l-land: 0px; } #lang-relief:checked ~ .spec__body { --l-press: 0.025; --l-tempo: 1; --l-edge: 1px; --l-space: 0.9; --l-entrance: 0.97; --l-radius: 16px; --l-land: 0px; } #lang-press:checked ~ .spec__body { --l-press: 0.02; --l-tempo: 0.85; --l-edge: 1px; --l-space: 1.2; --l-entrance: 1; --l-radius: 4px; --l-land: 0px; } #lang-crisp:checked ~ .spec__body { --l-press: 0.03; --l-tempo: 0.65; --l-edge: 1px; --l-space: 0.7; --l-entrance: 0.95; --l-radius: 2px; --l-land: 0px; } #lang-slate:checked ~ .spec__body { --l-press: 0; --l-tempo: 0.86; --l-edge: 2px; --l-space: 0.6; --l-entrance: 0.96; --l-radius: 0px; --l-land: 3px; } /* --- The card being specified -------------------------------------------- */ .spec__stage { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); border-radius: var(--r-card); background: var(--surface-sunk); } .spec__card { width: min(100%, 22rem); text-align: left; font: inherit; cursor: pointer; display: grid; gap: calc(0.5rem * var(--l-space)); padding: calc(1.25rem * var(--l-space)); border-radius: var(--l-radius); border: var(--l-edge) solid var(--edge-lift); background: var(--surface); /* Slate's press mechanism, and every other language's absent one, written once at an offset of 0 rather than as a rule only Slate gets. The colour is --spec-block, which is theme-scoped for the reason section 18 gives: a zero-blur ink shadow reaches 1.253:1 at FULL black on the dark page, so in dark the block is drawn in --hairline (1.523 against the page) and the landing stays visible. Light elevates downward, dark upward; this is that rule applied to one component rather than an exception to it. */ box-shadow: var(--l-land) var(--l-land) 0 var(--spec-block); transform: scale(1); transition: transform calc(var(--dur-press) * var(--motion-move)) var(--ease-move), background-color var(--dur-press) var(--ease-tint), border-color var(--dur-press) var(--ease-tint); } /* The press. Both the squash and Slate's landing are multiplied by --motion-move, so `reduce` removes the movement instead of making it instant โ€” the app's own finding, in section 19's mechanism. The background step is the tint-channel signal that survives, so the control still answers a reduced-motion reader. */ .spec__card:active { transform: translate(calc(var(--l-land) * var(--motion-move)), calc(var(--l-land) * var(--motion-move))) scale(calc(1 - var(--l-press) * var(--motion-move))); background: var(--surface-sunk); } .spec__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .spec__card h3 { font-family: var(--font-head); font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.012em; } .spec__card p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); } .spec__hint { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--text-soft); text-align: center; } /* --- The readout --------------------------------------------------------- Tabular figures, because a column of numbers that shifts as the reader switches language is a column nobody can compare down. This is the whole reason the readout is a table and not a paragraph. */ .spec__read { border-collapse: collapse; width: 100%; font-size: 0.875rem; } .spec__read caption { text-align: left; padding-bottom: 0.6rem; color: var(--text-soft); font-size: 0.875rem; } .spec__read th, .spec__read td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; } .spec__read th { font-weight: 400; color: var(--text-soft); } .spec__read td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; color: var(--text); } /* The readout is the WHOLE table, not the selected row. ------------------------------------------------------------------------ The first version printed one row and rewrote it as the reader switched. That is worse in two ways: a number you cannot compare against its neighbours is a number you cannot judge, and printing a CSS variable as text needs a counter trick that breaks the moment a value is not an integer. So all nine rows are in the markup, always, and the checked one is marked. The reader gets the system and its current position at once, the table is a specimen rather than a display, and it is all still true with the stylesheet off. */ .spec__row th { transition: color var(--dur-tint) var(--ease-tint); } #lang-soft:checked ~ .spec__body .spec__row--soft, #lang-loft:checked ~ .spec__body .spec__row--loft, #lang-clay:checked ~ .spec__body .spec__row--clay, #lang-stack:checked ~ .spec__body .spec__row--stack, #lang-veil:checked ~ .spec__body .spec__row--veil, #lang-relief:checked ~ .spec__body .spec__row--relief, #lang-press:checked ~ .spec__body .spec__row--press, #lang-crisp:checked ~ .spec__body .spec__row--crisp, #lang-slate:checked ~ .spec__body .spec__row--slate { color: var(--text); } #lang-soft:checked ~ .spec__body .spec__row--soft th::before, #lang-loft:checked ~ .spec__body .spec__row--loft th::before, #lang-clay:checked ~ .spec__body .spec__row--clay th::before, #lang-stack:checked ~ .spec__body .spec__row--stack th::before, #lang-veil:checked ~ .spec__body .spec__row--veil th::before, #lang-relief:checked ~ .spec__body .spec__row--relief th::before, #lang-press:checked ~ .spec__body .spec__row--press th::before, #lang-crisp:checked ~ .spec__body .spec__row--crisp th::before, #lang-slate:checked ~ .spec__body .spec__row--slate th::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.5rem; border-radius: 50%; background: var(--accent); } /* --- The clamp ----------------------------------------------------------- "A variant is a bounded multiplier" made visible. The bar is the legal range for a press depth, 0 to 0.08 โ€” the clamp in `AppDesignSpec.withVariant`. The fill is the current language's declared depth; the mark is where the most emphatic factor in the system, 1.5, would put it. It never passes the end, because passing it is not expressible. ## Cut once, restored, and the reason is worth keeping It was removed before its first commit because it measured as though the `var()` fallback had been taken โ€” 170.5px where 299px was expected โ€” while the variable demonstrably inherited onto the element at the right value. An unverified exhibit on a page about craft is the one thing that page cannot carry, so it went out rather than shipping on hope. Restored after the mechanism was reproduced in isolation twice: a `:checked ~` sibling setting a custom property, consumed by a nested absolutely-positioned child through the identical `calc()`, with and without a transition on the driven property. Both returned the correct width. The original reading was the measuring tool, not the stylesheet โ€” the fourth such artefact this session. It is verified here by rendering two static copies of the page with `checked` on different radios and comparing the painted pixels, which uses no scripting at all. */ .clamp { display: grid; gap: var(--s-2); margin-top: var(--s-6); } .clamp__lede { font-size: 0.875rem; color: var(--text-soft); } .clamp__bar { position: relative; height: 0.5rem; border-radius: var(--r-pill); background: var(--surface-sunk); border: 1px solid var(--hairline); } .clamp__bar > * { display: block; } .clamp__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--accent); /* 0.08 is the ceiling, so a value's share of the bar is value / 0.08. */ width: calc(var(--l-press, 0.02) / 0.08 * 100%); transition: width calc(var(--dur-reveal) * var(--motion-move)) var(--ease-move); } .clamp__ghost { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--border); /* min() IS the clamp, drawn. */ left: calc(min(var(--l-press, 0.02) * 1.5, 0.08) / 0.08 * 100%); transition: left calc(var(--dur-reveal) * var(--motion-move)) var(--ease-move); } .clamp__scale { display: flex; justify-content: space-between; gap: var(--s-4); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-soft); } /* Successive prose blocks in a section that is not on a component grid. One named value rather than an inline margin at each call site. RESTORED: this rule was deleted as collateral when the clamp block above was cut, and design.html shipped using .flow at three call sites with no rule behind it. Caught by grepping the markup against the stylesheet rather than by looking at the page, because a missing margin looks like a design choice. */ .flow > * + * { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); } /* --- Sidenotes ----------------------------------------------------------- Depth on demand without a disclosure widget. At reading widths a note sits inline under the paragraph it belongs to, quiet and smaller. From 1180px it moves into the margin beside it, where an expert reads it and a lay reader's eye skips it entirely โ€” which is the whole brief for this site in one component: layered by depth, never segmented by audience, and no control to press. It is a in the markup rather than a positioned div, so with the stylesheet off it still reads as an aside attached to the paragraph. */ .side { display: block; margin-top: var(--s-3); padding-left: var(--rail-gap); border-left: 1px solid var(--hairline); font-size: 0.875rem; line-height: 1.6; color: var(--text-soft); max-width: 46ch; } /* โš ๏ธ THE MAX-WIDTH IS THE FIX FOR A HORIZONTAL SCROLLBAR, and it is not decoration. Found 2026-08-16 by measuring every page at 390 / 768 / 1440 / 2560 through explicitly sized iframes: `design.html` at 1440 reported `scrollWidth` 1552 against an `innerWidth` of 1440, and the eight elements past the edge were all `.side`. The arithmetic, because it explains why raising the breakpoint would not have worked. A `.has-side` paragraph is a block child of `.wrap`, so at any viewport at or above 1120 it is 1120 wide. The note is then placed at `100% + 2.5rem` and runs 17rem further, which puts its right edge 312px past the paragraph's. For that to land inside the viewport the container's own right margin has to be at least 312 โ€” and `.wrap` centres, so that needs a viewport of **1744**. The component was gated at 1180. Every width between 1180 and 1744 scrolled sideways, which is most laptops. Constraining the paragraph to the reading measure puts the note in space the container already had: 62ch is about 527px, so the note runs to roughly 839 inside a 1120 container and fits from 1180 up with room to spare. It is also the width the paragraph should have had โ€” a 1120px line of body copy is twice the measure this stylesheet sets for every other reading column. Scoped to the same query rather than declared unconditionally, so nothing below 1180 changes by a pixel. */ @media (min-width: 1180px) { .has-side { position: relative; max-width: var(--measure); } .has-side .side { position: absolute; top: 0; left: calc(100% + 2.5rem); width: 17rem; max-width: none; margin-top: 0.2rem; padding-left: 0; border-left: 0; } } /* -------------------------------------------------------------------------- 22. The Mission page โ€” the same subject, in two tenses -------------------------------------------------------------------------- Phase 7 item 5. Mission and Vision were briefed as differing "by tense, not subject", and a cross-link at the bottom of a page is the weakest possible way to say that โ€” nobody follows it, and nobody who does can hold the two pages side by side in their head afterwards. So the claim is made structurally instead: one row per subject, the present tense in the left cell and the intended one in the right, with the right-hand cell explicitly labelled as belonging to another page and carrying no authority of its own. A reader checks the pair in one glance, and so does the next person auditing whether either page has drifted into the other's job. ## Three rules it holds itself to 1. **The tense is in the markup, not in the prose.** Every cell opens with a `.tense__when` badge reading "Today" or "Intended", exactly as vision.html's `.tenet__when` does. An editor rewriting a sentence cannot delete the tense by accident, because the tense is not in the sentence. That badge is also why there is no header row: a header would carry the distinction only visually, and a screen reader walking a `
` reads both `
`s under one `
` with nothing to tell them apart. 2. **The two cells never differ in text contrast.** The obvious way to make the intended column read as lighter is to lighten it, and that is the one channel this palette cannot spare โ€” every ink on this site is measured against `--surface` and `--page` and nothing else. The distinction is carried by the leading rule instead: solid hue for today, the same hue at a third for intended. Colour is never the only signal either, because the badge prints its word. 3. **No new colour, no new elevation.** The row is a hairline-separated editorial row, which is the language `.mech`, `.route` and `.reg` already speak on this site, rather than a sixth card shape. -------------------------------------------------------------------------- */ .tense { margin: 0; } .tense__row { display: grid; gap: var(--s-3); padding-block: clamp(1.25rem, 2.8vw, 1.9rem); border-top: 1px solid var(--hairline); } .tense__row:last-child { border-bottom: 1px solid var(--hairline); } .tense__subject { font-family: var(--font-head); font-size: 1.0625rem; line-height: 1.3; color: var(--hue-ink, var(--accent)); } /* Both cells are `
` and both reset the browser's indent. The rule is the only thing that separates them, and it is a border rather than a pseudo-element so it grows with the cell rather than needing a height. */ .tense__now, .tense__next { margin: 0; padding-left: var(--rail-gap); max-width: 46ch; border-left: 2px solid rgba(var(--hue, var(--rgb-sage)), 0.85); } .tense__next { border-left-color: rgba(var(--hue, var(--rgb-sage)), 0.3); color: var(--text-soft); } /* The badge. Small text takes positive tracking; the display sizes take negative โ€” the same split `.swap__label` makes. It is a block so the sentence under it starts on its own line at every width, which is what makes the row scannable down the column rather than across it. */ .tense__when { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--s-2); } .tense__now .tense__when { color: var(--hue-ink, var(--accent)); } /* 900, not 720: three tracks only arrive once both prose cells can hold a readable line. Below it the row stacks and the badges do the whole job, which is the same degradation `.mech` takes. */ @media (min-width: 900px) { .tense__row { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.25rem; align-items: start; } } /* -------------------------------------------------------------------------- 23. The Contact page โ€” one address, and it is a placeholder -------------------------------------------------------------------------- Phase 7 item 6. The whole page is one component and a `.mech` list, and this is the component. ## Why it looks like this The brief for the address was that it must **fail loudly rather than look plausible**, because a plausible address nobody reads is worse than a broken one โ€” only the broken one gets fixed. Failing loudly is a typographic job as much as a copy one, so the block does three things at once and none of them is colour alone: 1. **The label prints the word.** "Placeholder โ€” this address does not receive mail" sits above the address, in the markup, and survives greyscale, a colour-blind reader and a printed copy. That is the same rule the privacy callouts and the register chips follow. 2. **The host half is set apart from the local half.** `@example.invalid` is the part that makes it impossible, so it is the part that is tinted and tracked away from the name. Two spans, no image, selectable as one string. 3. **It is `.surface-lifted`, the top of ยง18's three levels.** There is one thing on this page and it is this; a card at the same level as the prose around it would read as a footnote. It is deliberately not a link. A `mailto:` invites a click and pays it back with a bounce two minutes later, which is a worse failure than a line of text that says so where the reader is looking. ## The one thing to change when the address is real Replace the two spans with an `` and delete `.mail__label`. Nothing else here assumes the placeholder โ€” the type scale, the surface and the geometry are all as correct for a working address as for this one. -------------------------------------------------------------------------- */ .mail { padding: clamp(1.5rem, 3.4vw, 2.25rem); max-width: 46rem; } .mail__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hue-ink, var(--accent)); margin: 0 0 0.85rem; } /* The one place on this site where a monospace face carries a display size. It is an identifier rather than prose โ€” a reader has to copy it character by character, and a proportional face at this size loses the distinction between a hyphen and an en dash in the middle of a word. `overflow-wrap: anywhere` and not `break-all`: at 390px the address is wider than the column, and breaking at the hyphens and the `@` is readable where breaking mid-token is not. */ .mail__addr { margin: 0; font-family: var(--font-mono); font-size: clamp(1.125rem, 0.85rem + 1.5vw, 1.75rem); line-height: 1.35; overflow-wrap: anywhere; } .mail__local { color: var(--text); } /* Tracked out by a hair as well as tinted, so the split between the name and the impossible host reads without colour. */ .mail__host { color: var(--hue-ink, var(--accent)); letter-spacing: 0.01em; } .mail__say { margin-top: 1.1rem; max-width: 54ch; color: var(--text-soft); } .mail__say b { color: var(--text); font-weight: 600; } .mail__crisis { margin-top: var(--s-5); max-width: 54ch; } /* -------------------------------------------------------------------------- 24. The highlights โ€” the app's interface, rebuilt in HTML -------------------------------------------------------------------------- Phase 7 item 10, and the owner's favourite idea. There are no screenshots of this app and none may be fabricated, so the interface is REBUILT: real markup, at the app's own values, carrying the app's own copy. ## The one rule that decides the whole section ๐Ÿ”’ **Reproduce, never reinterpret.** Every colour inside a reproduction is the literal value the app resolves for its default look โ€” Soft/Regular on the `light` palette, the one `AppDesignChoice.fallback` and `recommendedGroundsFor` hand a new user โ€” read out of `lib/design/` and `lib/data/style.dart` rather than approximated from this site's palette. They are declared ONCE, on `.appshot__screen`, and every rule below reads them through a variable. A palette value appears in this file exactly once. ## Why the interior does not follow the site's theme, and the frame does The obvious move is to make the reproduction dark when the page is dark. It is wrong twice over. The app's dark palette is a different set of measured values, so following the page would mean either shipping a second palette this section has not measured, or โ€” far worse โ€” tinting the light one, which is the reinterpretation the rule above forbids. And a reproduction that changes with its surroundings is not a reproduction. So the FRAME is the page's and the INTERIOR is the app's. That is `taste-skill`'s Page Theme Lock resolved the same way the Design page resolves it: chrome, label and rule lines are site tokens, and only what is being exhibited changes. A reader in dark mode sees a lit object on a dark page, which is what a specimen is. ## Two deviations, stated rather than hidden 1. **The icons are redrawn.** The app's are Material's. Reproducing a third party's icon set is a licensing question this work is not answering, and the argument here is layout and copy rather than glyph shapes. They are authored inline SVG in the site's own stroke weight, which is also what `craft-floor` requires of every icon here. 2. **Lora is not loaded.** It is the app's heading face (`typography.dart:413`) and the site loads no external font and ships no CDN request. Copying the file into `website/` is a deploy-surface and licensing decision, so the reproduction uses this site's own serif at the app's weight and size. Owed, and recorded. ## Sizes are the app's numbers, unscaled `AppSpacing` gives 24 of page padding and 20 inside a card; `AppRadius` gives 16 for a card and 24 for the featured one; the type ramp gives 26 / 19 / 16.5 / 14 / 12.5. They are written here in px rather than rem for the one case where px is right: these are a reproduction of fixed logical pixels, and a specimen that resizes with the reader's root font is not a specimen. The frame around it is in rem and does scale. -------------------------------------------------------------------------- */ /* --- The feature row ------------------------------------------------------ Prose and reproduction side by side from 1024, stacked below it. The modifier flips the order rather than the columns, so the reading order in the markup is always prose-then-exhibit and a screen reader never meets the caption of something it has not been told about yet. */ .feat { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--hairline); } .feat:last-of-type { border-bottom: 1px solid var(--hairline); } .feat__body > * + * { margin-top: var(--s-4); } .feat__h { font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 20ch; } .feat__body p { max-width: 46ch; color: var(--text-soft); } /* The two questions every feature has to answer, per the brief: why it exists and how it helps. A run-in label rather than a heading, because six more entries in the document outline between the section heading and the next one is a table of contents nobody asked for. */ .feat__k { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hue-ink, var(--accent)); margin-right: 0.5rem; } /* ๐Ÿ”ด A grid item's automatic minimum size is its MIN-CONTENT size, and that is what made this page scroll sideways at 320px. Below 1024px `.feat` is a single-column grid, so every item shares one track and the track is as wide as the widest item refuses to go below. The `.appshot` mock's min-content is **323.83px**; the content box at 320px viewport is 280px. The track took the mock's number, `.feat__body` was dragged to 324px with it, and `scrollWidth` came out at 361. `min-width: 0` is the standard release valve, and the mock reflows to 280px with nothing clipped โ€” checked at 320px in Chrome, not assumed. Two of the three widths that show this (320, 360) were not in `tool/site_overflow.html`'s list until today; the harness started at 390. A guard's coverage is a claim about the world, and that one quietly asserted no reader has a 320px phone. */ @media (max-width: 1023px) { .feat > * { min-width: 0; } } @media (min-width: 1024px) { .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); column-gap: clamp(2rem, 4vw, 4rem); } .feat--flip .feat__body { order: 2; } .feat--flip .appshot { order: 1; } } /* --- The frame ------------------------------------------------------------ */ /* A `
`, which the base reset does not reach โ€” the reset enumerates the elements the site uses rather than sweeping with `*`, and this is the first figure on the site. */ .appshot { margin: 0; justify-self: center; width: 100%; max-width: 25.5rem; } .appshot__label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--s-3); } .appshot__plate { padding: 10px; border-radius: 22px; background: var(--surface-sunk); border: 1px solid var(--border); } /* --- The app --------------------------------------------------------------- Everything from here down is inside a reproduction. The `ui-` prefix is not decoration: it marks the boundary where this site's design system stops and another product's begins, so nothing below can be mistaken for a component of this site and nothing above can be reached from inside a specimen. */ .ui { /* ๐Ÿ”ด REPAINTED TO 2.0, 2026-09-03. Every value below was the 1.0 app's, and the accent was the giveaway: `#83987e`, a muted green, on screens the app now draws in lilac. Owner: *"why it is green are we still using the colours of the old design"*. They were. Each line is now the app's own `AppV2Palette.calm` โ€” the Calm entry in `lib/design/v2/design_v2.dart`, which is what these mockups are labelled as ("Home ยท default look"). The mapping is one-to-one and the Dart names are on each line, so the next person can diff a token against the file it came from instead of guessing which shade of near-white this was meant to be. This is the whole repaint. Four screens, three pages and every card, chip, button and hairline inside them are painted from these twelve declarations โ€” which is the point of `.ui` owning a palette rather than the mockups carrying colours inline. */ --app-page: #faf7f2; /* calm.base */ --app-surface: #fbf9f4; /* calm.panelSoft */ --app-card: #fdfbf7; /* calm.sheet */ --app-text: #15130f; /* calm.ink */ --app-soft: #5f5a52; /* calm.ink2 */ --app-hairline: rgba(21, 19, 15, 0.16); /* calm.hair */ --app-control: #5f5a52; /* calm.ink2 โ€” controls take the soft ink */ --app-accent: #b9a8de; /* calm.accent โ€” lilac, not green */ --app-accent-deep: #8f7cc0; /* accent, darkened for a border on tint */ --app-accent-ink: #463a55; /* calm.famInk โ€” ink that sits on a tint */ --app-clay: #d3a08c; /* AppV2Family.clay */ --app-dusk: #aac0da; /* AppV2Family.steel */ --app-panel: #15130f; /* calm.panelDark */ --app-on-panel: #f7f4ee; /* calm.onDark */ /* The page wash every screen carries. `theme.dart` composites the accent over the page at 7% and stops it at 55%. It never moves โ€” every design language in the app refuses ambient motion on it. The top stop was `#efeee7`, which is that composite taken with the 1.0 green. Written as the composite itself now, so it follows the accent above rather than needing to be recomputed by hand whenever it moves. */ background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 7%, var(--app-page)) 0%, var(--app-page) 55%); color: var(--app-text); border-radius: 12px; padding: 24px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; overflow: hidden; } /* The one screen that takes no wash. `AppPage` is skipped on the crisis pathway and on the flat screens beneath it, and a reproduction that painted a gradient there would be showing something the app refuses to do. */ .ui--flat { background: var(--app-page); } .ui-bar { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 16px; } .ui-bar__t { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.2; } .ui-title { font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; } .ui-sec { font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.3; } .ui-cardt { font-family: var(--font-head); font-size: 16.5px; font-weight: 600; line-height: 1.3; } .ui-body { font-size: 14px; line-height: 1.5; } /* The grounding line under a validation line inside the featured card. It is `bodyLarge` in `textSoft` in the app; the size step is not reproduced because the featured card here is narrower than a phone's and the two sentences would set at nearly the same measure. The colour is. */ .ui-body--soft { color: var(--app-soft); } .ui-cap { font-size: 12.5px; line-height: 1.4; color: var(--app-soft); } .ui-lab { font-size: 13px; font-weight: 600; } .ui-stack > * + * { margin-top: 12px; } .ui-gap { height: 16px; } .ui-gap--lg { height: 32px; } /* A card. Fill, a 1px edge and NO shadow โ€” `AppDesignLanguage.soft` declares `shadowStrength: 0.0`, so the card separates by boundary alone. The edge alpha is the one `theme.dart` solves for when the hairline cannot reach the 1.25 boundary floor: `controlBorder` at 0.27. */ .ui-card { background: var(--app-card); border: 1px solid var(--app-hairline); border-radius: 16px; padding: 20px; } /* The featured card, and it is the app's loudest surface: radius 24, the accent at 12% for the fill and 30% for the edge, padding 24. It carries exactly one thing โ€” the sentence the app came back with. */ .ui-card--featured { border-radius: 24px; padding: 24px; background: color-mix(in srgb, var(--app-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--app-accent) 30%, transparent); } .ui-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--app-accent) 18%, transparent); color: var(--app-accent-ink); flex: none; } /* These were `rgba(128,152,174,.15)` and `rgba(192,142,118,.15)` โ€” the 1.0 dusk and clay, typed out rather than referenced, so they survived the palette repaint above them. Now the family tokens, at the same alpha. */ .ui-badge--dusk { background: color-mix(in srgb, var(--app-dusk) 15%, transparent); } .ui-badge--clay { background: color-mix(in srgb, var(--app-clay) 15%, transparent); } .ui-badge svg { width: 16px; height: 16px; display: block; } .ui-row { display: flex; align-items: center; gap: 12px; } .ui-row__grow { flex: 1 1 auto; min-width: 0; } /* Buttons. Filled is `accent.deep` with white on it, min height 48, radius 16, label 15.5 at 600. Outlined takes the text ink and a 1px `controlBorder`. Both are non-interactive here โ€” they are ``s, not buttons, because a control in a reproduction that does nothing when pressed is worse than a picture of one. */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 16px; border-radius: 16px; background: var(--app-accent-deep); color: #fff; font-size: 15.5px; font-weight: 600; text-align: center; } .ui-btn--quiet { background: transparent; color: var(--app-text); border: 1px solid var(--app-control); } .ui-btn--wide { width: 100%; } .ui-btn svg { width: 18px; height: 18px; flex: none; } .ui-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* The selectable chip, and it is one of the app's signatures: radius 14, not a pill; 1.2px hairline unselected; the accent at 16% with a 1.5px accent edge when it is. The weight goes 500 โ†’ 600 with it, so selection is never carried by colour alone. */ .ui-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 14px; border: 1.2px solid var(--app-hairline); font-size: 14px; font-weight: 500; } .ui-chip--on { background: color-mix(in srgb, var(--app-accent) 16%, transparent); border: 1.5px solid var(--app-accent); font-weight: 600; } .ui-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* A text field: filled with `surface`, 14 of content padding, the hint in `textSoft` at 14. */ .ui-field { background: var(--app-surface); border: 1px solid var(--app-control); border-radius: 16px; padding: 14px; color: var(--app-soft); font-size: 14px; } .ui-field--tall { min-height: 76px; } .ui-divider { height: 1px; background: var(--app-hairline); margin: 16px 0; } .ui-foot { margin-top: 24px; text-align: center; font-size: 11px; color: var(--app-soft); } /* The toolkit's tiles. `AppCardGrid` at a 16 gutter, and the tile is the standard card with a badge above its title. */ .ui-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ui-tile > * + * { margin-top: 8px; } /* The rested-level row on the sleep screen: five words, no numbers, and no average anywhere on the screen. */ .ui-scale { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 12.5px; color: var(--app-soft); } /* --- The swap, extended --------------------------------------------------- The site spends its third dimension exactly once, on `.swap`, and this is that component reused rather than a second one. What is added is a single modifier and a single keyframe. The existing pair says "this is pushed away and that is what stays" โ€” the composition guard's argument on how.html. Discreet mode is not that argument: neither register is refused, they are two faces of one object, and importing `--away` / `--stays` here would import a meaning that is not true. So `--turn` opens both panes symmetrically toward the shared vanishing point and settles them square, which is the gesture for "the same thing, seen twice". The sign of the rotation comes from position rather than a second class: the panes are the first and third children of `.swap`, with the connector between them, and that is already load-bearing for the arrow's own layout. Transform only, on the `--motion-move` channel, inside the same reduced-motion and `@supports` gates as the original โ€” so it retires through a token, and a browser with no view timelines shows both panes flat, square and complete, which is exactly what the argument needs. */ .swap__pane--turn { --turn: 0deg; } @media (min-width: 900px) { .swap__pane--turn:nth-child(1) { --turn: 15deg; } .swap__pane--turn:nth-child(3) { --turn: -15deg; } } @keyframes turn-flat { from { transform: rotateY(var(--turn)) translateZ(-30px); } to { transform: none; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .swap__pane--turn { animation: turn-flat linear both; animation-timeline: view(); animation-range: entry 10% cover 36%; } } } /* The theme crossfade, bounded to the surfaces that repaint, per ยง19. The plate repaints; the screen inside it never does, because it names no site token. */ .appshot__plate { transition: background-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint), border-color calc(var(--dur-reveal) * var(--motion-tint)) var(--ease-tint); } /* ========================================================================== 25. FROSTED โ€” the site's material, its measure, and its light ========================================================================== ## The thesis Frosted glass is not a decoration borrowed from a trend deck. It is this product's own mechanism rendered as a material: **light passes through, detail does not.** That is what the app claims about a person's writing, and it is what a frosted pane does to whatever is behind it. Every panel on this site is that sentence, drawn. The old site was a centred reading column with forty per cent of a laptop viewport empty beside it, one section rhythm from top to bottom, and a palette of five accents that reached the page as a single green button. It was not restrained. It was unfinished, and it looked like a thousand other sites because it had made no decision that any of them had not made. ## The three rules this section is built on, each with its arithmetic **Rule one. The field is a ground for ink and for glass, and for nothing else.** `tool/site_layer_contrast.py` composites a stack of translucent layers and reports what a word measures on the result โ€” the question `test/site_contrast_test.dart` cannot ask, because that test reads token pairs and a field is four fills deep. Run at the boldest field this section ships (sage 0.22, dusk 0.14, clay 0.10, all three overlapping, which is the worst pixel on the page rather than a typical one): light --text 8.99 --text-soft 3.70 --accent 4.47 dark --text 7.10 --text-soft 3.87 --accent 2.75 So `--text` clears the 4.5 body floor with between two and four times the headroom it needs, on either theme, at the worst pixel. `--text-soft` and `--accent` do not clear it on either. That is not a reason to dim the field; it is the specification for what may sit on one. A headline and a lead in `--text` are safe anywhere on the field. Soft text, accent text and any small type go on glass or on the bare page. โš ๏ธ This is why the lead paragraph is `--text` here and was `--text-soft` before. It is a legibility requirement first. It also happens to be the better typography: a lead is not a caption. **Rule two. Glass is opaque enough to be read through, and the number is measured, not chosen.** Same tool, a panel of `--surface` at rising alpha over that same worst-case field: light 0.72 -> --text-soft 4.86 --accent 5.88 dark 0.72 -> --text-soft 5.29 --accent 3.75 dark 0.86 -> --text-soft 5.92 --accent 4.20 0.72 is the floor in light. Dark's accent never clears 4.5 on glass over a field, so **accent text is not painted on dark glass over a field** โ€” it takes `--text`, and the accent does its work as fill, rim and light. The shipped alphas are 0.80 and 0.88, both above the floor, because a floor is not a target. **Rule three. Elevation is still ยง18's, and glass does not repeal it.** A white top edge on the light page measures 1.119:1 and an opaque black shadow on the dark page measures 1.253:1, which is the ceiling of that whole channel. Those numbers killed several treatments for earlier sessions and they are still true. They do not rule out glass; they rule out *one particular way of drawing its edge*, and they rule it out per theme rather than everywhere: light the panel is separated by SHADOW, offset and softly blurred, plus a hairline. The white top sheen is present and is decorative only, and is not asked to carry the separation. dark the panel is separated by a white RIM at 0.07-0.10, which ยง18 measured clearing the 1.25 boundary floor at 0.08, plus a deep shadow that reads as occlusion rather than as an edge. That split is not a compromise. It is the same physical claim rendered correctly twice: on a bright ground a pane casts, on a dark ground a pane catches. ## What is deliberately not here No `feTurbulence` grain and no sketch-style SVG. No gradient text; emphasis is weight and size. No eyebrow or kicker above any heading. No section numbers. No `border-left` accent stripes. No glyph or emoji icons. No backdrop blur above 24px, which is where Safari's compositor starts to cost real frames on a large pane. No second three-dimensional exhibit beyond the two this site now has, both of which are arguments rather than effects. Colour is spent at page scale, in fields that own whole regions, and never as an accent scattered on a neutral. **No palette value is changed.** Every colour below is `rgba(var(--rgb-*), a)` over a token that already shipped; the five accents are the app's own constants at the app's own chroma, and what is new is the area they are given. -------------------------------------------------------------------------- */ :root { /* ---- The measure ---------------------------------------------------- One ramp, ratio 1.25, and a display step that is fluid because a marketing headline should fill the room it is given. The ceiling is 6rem: past that a headline stops being read and starts being looked at, and this one has to be read. Tracking is size-specific โ€” a single letter-spacing is wrong somewhere by definition, and it is wrong at both ends at once. */ /* โš ๏ธ RAISED 2026-08-16. Previous ceilings kept here because they are the thing to restore if this reads as shouting on a laptop rather than as confidence: --t-1 3.8125rem, --t-2 2.4375rem, --t-3 1.5rem, --t-lead 1.3125rem. --t-display is UNCHANGED at 6rem, which is `craft-floor`'s hard ceiling โ€” past it a headline stops being read and starts being looked at, and this one has to be read. The complaint being answered is *"it looks conjusted sometimes and like traditional apps"* and *"it needs to use the space well"*. Those are the same complaint: a page whose largest element is 2.4rem on a 1512 screen is not using the room it was given, and the eye reads the whole thing as one texture. The gap between --t-1 and --t-2 was 1.56x and is now 1.59x, so the ramp is not merely bigger, the STEPS are more legible โ€” which is what makes a page scannable rather than merely large. */ --t-display: clamp(2.625rem, 1.05rem + 6.55vw, 6rem); --t-1: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem); --t-2: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem); --t-3: clamp(1.25rem, 1.14rem + 0.5vw, 1.625rem); --t-lead: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem); --t-body: 1rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; --tr-display: -0.035em; --tr-1: -0.03em; --tr-2: -0.022em; --tr-3: -0.014em; --tr-body: 0em; --tr-micro: 0.012em; /* ---- The rhythm ----------------------------------------------------- Three band heights, not one. A page whose every section is the same height has no emphasis, which was the fourth thing wrong with the old one. --band-open is for the two or three moments a page is allowed; the rest alternate tight and normal. */ /* Opened with the type, and by more than the type was โ€” because "more air" is mostly a vertical measurement and the horizontal one was never the problem. Previous: 4.5rem / 7rem / 11rem. The RATIO between them widens from 1.56x to 1.62x for the same reason the type ramp does: three band heights that are nearly equal are one band height with rounding. */ --band-tight: clamp(3.25rem, 6vw, 5.25rem); --band: clamp(5rem, 9vw, 8.5rem); --band-open: clamp(7rem, 14vw, 13.75rem); /* ---- The material --------------------------------------------------- --glass-rgb is --surface's own triple, so a panel is the site's raised surface with light behind it rather than a new colour. The two alphas are the measured floor plus headroom (see rule two above). */ --glass-rgb: 251, 250, 246; --glass-a: 0.80; --glass-a-hi: 0.88; /* 14px, not 20. Uniform heavy blur is 2020 glassmorphism and it is the thing that reads as dated; the effect lives in the RIM, and a large pane at 20px+ is also where Safari's compositor starts costing frames. The production references cluster far lower than the tutorials do: Raycast's floating nav is blur(5px), Linear's is 20px over a fully transparent fill, Stripe's single glass panel is 12px. */ --glass-blur: 14px; --glass-sat: 1.55; /* Light: separation is the shadow. Offset and soft blur, per the craft floor โ€” a zero-offset halo is not depth, it is a glow. */ --glass-lift: 0 1px 2px rgba(43, 42, 40, 0.05), 0 2px 8px -4px rgba(43, 42, 40, 0.10), 0 28px 64px -28px rgba(43, 42, 40, 0.30); /* The sheen. Decorative and unbound: at 1.119:1 it cannot carry an edge and is not asked to. */ --glass-sheen: 0.92; --glass-rim: rgba(43, 42, 40, 0.10); --r-glass: 14px; --r-glass-lg: 18px; /* ---- The field ------------------------------------------------------ Peak alphas, and they only all meet where the blobs overlap. Rule one is measured at exactly this triple. */ --field-sage: 0.34; --field-dusk: 0.22; --field-clay: 0.17; --field-heather: 0.15; --field-blur: 34px; /* ---- THE LIT FIELD ------------------------------------------------- Added beside the values above, never replacing them: `--field-*` is untouched and `.aura` still uses it, so nothing that shipped has moved. ## Why this exists, measured The site's whole page measures SATAVG 1.75 with a **p90 of 3**. The owner's favourite reference measures p90 **24.3**. Ours has saturated pixels โ€” SATMAX 32, the accent โ€” and essentially none of them. That is the same defect the app's three rejected mockups had, and the app review found what it actually is: the reference is NOT a saturated screen. Cropped in two, its text half measures 3.42 โ€” statistically the same as ours โ€” and its decorative half measures 11.91. **What is missing is not saturation. It is a ZONE where no contrast floor binds because nothing legible sits on it.** ## What the arithmetic allows, and it is far more than was being used `tool/site_layer_contrast.py`, sage rising against dusk 0.22, then ยง25's glass at 0.80 โ€” because on this site the glass panel is what carries the text, which is the entire reason a loud field is affordable: field text ON GLASS over it text DIRECTLY on the field 0.34 12.48 body / 5.13 soft 8.22 body / 3.38 soft / 4.09 accent 0.55 12.13 / 4.99 โ€” 0.75 11.81 / 4.85 5.84 body / 2.40 / 2.90 0.95 11.48 / 4.72 4.87 body / 2.00 / 2.42 Every glass row clears 4.5. **Soft text and accent text fail on the bare field at 0.34 already** โ€” that is ยง25's rule one, unchanged and now load-bearing rather than advisory. Body text survives on the bare field to 0.95 and that is the hard ceiling: past it nothing may sit on the field at all. Shipped at 0.70 โ€” inside the comfortable band, leaving body text at ~6:1 on the bare field rather than at the 4.87 cliff, because a floor is not a target. */ --field-sage-lit: 0.70; --field-dusk-lit: 0.46; --field-clay-lit: 0.36; --field-heather-lit: 0.32; /* ---- THE SOLO FIELD: ONE HUE PER REGION ---------------------------- Added beside everything above. `--field-*` and `--field-*-lit` are untouched, `.aura` and `.aura--quiet` still read them, and every page that shipped is byte-identical until a class is added. ## The defect this replaces, measured `.aura` composites FOUR hues, and the reason it reads grey is not alpha. Their angular separation in the UV plane, which is the plane the saturation is measured in: dusk <-> clay 170 deg sage <-> heather 163 deg sage <-> dusk 96 deg sage <-> clay 94 deg Two pairs at 163 and 170 degrees is two pairs of near-complements, and a complement pair does not blend, it ANNIHILATES. The individual hues carry chroma 11.7 (heather) to 33.8 (clay). Composited at the `-lit` alphas they carry **4.14 in light and 2.04 in dark** โ€” below the bone page's own 3.65. Raising the alphas cannot fix this and did not: the `-lit` values took vision.html from SATAVG 1.75 to 4.10 and stopped, because at alpha 1.00 four opposing hues still cancel to ~2.6. **So the fix is subtractive, not additive: remove three hues.** ## The ceiling is luminance, not hue โ€” which is why one alpha serves all Swept with `tool/site_layer_contrast.py` over all five hues, the binding ink being the italic accent word in a display heading at its 3:1 floor (`--text` is never the binding constraint here โ€” it holds 2x higher): light alpha 0.70 accent ink 3.17-3.35 --text 6.67-6.98 light alpha 0.75 accent ink 2.96-3.07 --text 6.12-6.17 <- edge light alpha 0.80 accent ink 2.85-2.97 --text 6.00-6.33 FAILS dark alpha 0.50 accent ink 3.04-3.54 --text 5.56-5.99 dark alpha 0.55 accent ink 2.97-3.24 --text 5.43-5.47 <- edge dark alpha 0.60 accent ink 2.51-2.94 --text 4.59-5.01 FAILS The spread ACROSS HUES at a fixed alpha is under 0.4 of a ratio point, while the spread across alpha is the whole budget. The field's cost is how far it drags the ground away from the ink's luminance, and all five hues sit at similar luminance. **One ceiling therefore serves every hue: ~0.73 in light, ~0.50 in dark.** The corollary is the important half, and it is a design constraint, not a tuning knob: **the hue choice IS the chroma choice.** At the same alpha and the same contrast cost, on the bone page, clay 24.6 sand 16.7 dusk 13.3 sage 9.4 heather 7.5 Sage cannot be made loud. At alpha 1.00 it reaches 12.6 and its accent ink is already at 2.29 โ€” it fails the floor long before it gets bright, because sage is a desaturated green sitting near the bone page's own hue. A region that wants colour picks a WARM hue. That is why the default below is clay and not the brand sage. ## Three lights, one hue, and the worst case is bounded by construction Same-hue blobs REINFORCE where they meet โ€” that is the whole point โ€” so the peak is the union, not the token. Three lights at a1/a2/a3 that all met would composite to 1-(1-a1)(1-a2)(1-a3): light 1 - 0.54 x 0.68 x 0.76 = 0.721 (ceiling ~0.73) dark 1 - 0.73 x 0.81 x 0.86 = 0.492 (ceiling ~0.50) โš ๏ธ **AND THE THREE-WAY OVERLAP IS REACHED, SO THE UNION IS THE REAL NUMBER, NOT A BOUND.** This comment first said the centres were too far apart for all three to meet and that bounding the impossible case was belt-and-braces. That was wrong, and sampling the wrong part of the page nearly confirmed it: the text-free left margin renders #56453d in dark, which is comfortably inside the bound, while the field BEHIND THE ACCENT WORD renders #6a5346 โ€” the union, near enough. The plateaus are wide (a third of radii that are 74-90% of a box 1.36x the section), so they intersect over roughly 285x73px of the band. Read the extreme where the hot spots meet, not where it is convenient to find bare ground. The alphas above are sized so the union itself clears every floor, which is why the error was not also a bug. */ --field-solo: 0.46; --field-solo-2: 0.32; --field-solo-3: 0.24; /* THE CORE. An intense light, and it is only ever placed where glass or nothing covers it. Measured in light: --text on the bare core is 5.94, and --text-soft under a 0.80 pane over it is 4.75. Both clear the body floor, which means a stray paragraph landing on one is a design mistake rather than a legibility failure - the belt as well as the braces. */ --core-sage: 0.55; --core-clay: 0.38; --core-dusk: 0.30; } :root[data-theme="dark"] { --glass-rgb: 39, 42, 40; --glass-a: 0.80; --glass-a-hi: 0.88; /* Dark: separation is the rim. ยง18 measured 0.08 clearing the 1.25 boundary floor; the shadow below it is occlusion, not an edge, because an opaque black one reaches 1.253 and cannot be one. */ --glass-lift: inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 30px 80px -36px rgba(0, 0, 0, 0.85); --glass-sheen: 0.10; --glass-rim: rgba(255, 255, 255, 0.10); /* NIGHT'S FIELD IS 54% OF CALM'S, NOT 74%. `03-tokens-and-components.md` states the ratio as a rule rather than a taste โ€” wash alpha is `.26` on the light looks and `.14` on Night, and *"a fixed alpha makes the drawing the loudest thing on the page in dark mode, which happened once and was fixed at the call site."* These were at 74% of the light values, which was right for 1.0's muted hues and wrong for 2.0's: clay went from 192,142,118 to 198,124,96, and at 0.12 over a near-black ground it washed the whole hero warm brown against a look whose ground is meant to be cool. Scaled to the package's own ratio. Nothing measured moves โ€” the contrast arithmetic is done against `--fill`/`--fill-hi` and `--page`, and lowering the field only brings each bloom nearer the page it was measured against. */ --field-sage: 0.18; --field-dusk: 0.12; --field-clay: 0.09; --field-heather: 0.08; --field-sage-lit: 0.44; --field-dusk-lit: 0.30; --field-clay-lit: 0.24; --field-heather-lit: 0.20; /* Scaled to the package's Night ratio for the same reason as the four above. A page-head takes a SOLO field โ€” one hue, three lights โ€” so it is the loudest surface on any interior page, and on a hue-sand or hue-clay head at 0.27 the 2.0 clay washed the whole hero warm brown over a ground the design draws cool. 0.46 -> 0.20 is the same 54% the package states between its light and Night wash alphas. */ --field-solo: 0.20; --field-solo-2: 0.14; --field-solo-3: 0.10; --core-sage: 0.40; --core-clay: 0.28; --core-dusk: 0.22; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sage"]) { --glass-rgb: 39, 42, 40; --glass-a: 0.80; --glass-a-hi: 0.88; --glass-lift: inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 30px 80px -36px rgba(0, 0, 0, 0.85); --glass-sheen: 0.10; --glass-rim: rgba(255, 255, 255, 0.10); /* NIGHT'S FIELD IS 54% OF CALM'S, NOT 74%. `03-tokens-and-components.md` states the ratio as a rule rather than a taste โ€” wash alpha is `.26` on the light looks and `.14` on Night, and *"a fixed alpha makes the drawing the loudest thing on the page in dark mode, which happened once and was fixed at the call site."* These were at 74% of the light values, which was right for 1.0's muted hues and wrong for 2.0's: clay went from 192,142,118 to 198,124,96, and at 0.12 over a near-black ground it washed the whole hero warm brown against a look whose ground is meant to be cool. Scaled to the package's own ratio. Nothing measured moves โ€” the contrast arithmetic is done against `--fill`/`--fill-hi` and `--page`, and lowering the field only brings each bloom nearer the page it was measured against. */ --field-sage: 0.18; --field-dusk: 0.12; --field-clay: 0.09; --field-heather: 0.08; /* โš ๏ธ THESE FOUR WERE MISSING AND IT WAS A LIVE CONTRAST FAILURE. `[data-theme="dark"]` above defines `--field-*-lit`; this block, which is the one that serves a visitor on system dark who has never touched the theme toggle, did not. So `.aura--vivid` on vision.html fell back to `:root`'s LIGHT alphas โ€” sage at 0.70 โ€” and painted them over the #1c1e1d page. Measured on that composite the accent ink reaches 2.42:1 against a 3:1 floor: shipped, failing, and invisible to every screenshot, because `tool/site_shot.sh` always sets an explicit theme and therefore always took the branch that was correct. Nothing here is an edit in place. These are the values already declared for explicit dark, repeated into the block that was silently omitting them, so the two dark paths finally agree. */ --field-sage-lit: 0.44; --field-dusk-lit: 0.30; --field-clay-lit: 0.24; --field-heather-lit: 0.20; /* Scaled to the package's Night ratio for the same reason as the four above. A page-head takes a SOLO field โ€” one hue, three lights โ€” so it is the loudest surface on any interior page, and on a hue-sand or hue-clay head at 0.27 the 2.0 clay washed the whole hero warm brown over a ground the design draws cool. 0.46 -> 0.20 is the same 54% the package states between its light and Night wash alphas. */ --field-solo: 0.20; --field-solo-2: 0.14; --field-solo-3: 0.10; --core-sage: 0.40; --core-clay: 0.28; --core-dusk: 0.22; } } /* -------------------------------------------------------------------------- 25.1 The voice -------------------------------------------------------------------------- โš ๏ธ **THIS IS THE ONE DECISION ON THE SITE THAT IS WAITING ON A LICENCE, AND IT IS STATED HERE RATHER THAN QUIETLY ABSORBED.** The strongest version of this design uses a display face with a point of view โ€” a grotesque with real character at 96px. Every skill that governs this work says so, in the same words: the closest installed font is a failure, not a fallback. It is right. It cannot be done today. `website/` makes no external font request and copies no font file, and whether a face may be vendored here is a licensing decision the owner has not made โ€” the same open question as Lora, the app's own heading face, which is why `features.html` reproduces the app's headings in this site's serif instead. Loading a webfont to settle a design argument would be settling a legal one by accident. So `--font-head` below is the platform's own display grotesque, used as a system rather than as a shrug: one family, four weights, tracking that changes with size because a single letter-spacing is wrong at one end or the other, and `font-optical-sizing: auto` so the face's own optical tables do the work a hand-tuned scale would otherwise fake. On Apple platforms that resolves to SF Pro Display, which ships genuine optical sizing and tracking tables; on Windows to Segoe UI Variable Display, which ships a width and an optical axis. Both are better display faces than Georgia at 96px by a wide margin, and neither needs a licence. **The recommendation, for whoever settles it:** a variable grotesque with a real width axis, self-hosted as one `woff2` subset to Latin โ€” Sรถhne, ABC Diatype, Neue Haas Grotesk Display, or if the budget must be zero, Uncut Sans or Geist under the OFL. Any of them is one file, roughly 30 KB subset, and it would be the largest single visual upgrade left on this site. It is the first line of the handover. --font-accent keeps the old serif, and its job shrank to exactly one word per display heading. A whole headline in a transitional serif is the look this redesign is replacing; a single italic serif word inside a tight grotesque is a different device, and it is the one warm note the palette asks for. -------------------------------------------------------------------------- */ :root { --font-head: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-accent: Georgia, "Iowan Old Style", "Times New Roman", serif; } h1, h2, h3, h4, h5, h6 { font-optical-sizing: auto; text-wrap: balance; } .display { font-family: var(--font-head); font-size: var(--t-display); font-weight: 700; line-height: 0.98; letter-spacing: var(--tr-display); } /* The one warm note. Serif, italic, optically enlarged because a serif at a grotesque's cap height reads small, and given a hair of positive tracking because italic serifs set tight next to a tightly-tracked sans. */ .display em, .h1 em, .h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -0.005em; color: var(--accent); } .h1 { font-family: var(--font-head); font-size: var(--t-1); font-weight: 680; line-height: 1.02; letter-spacing: var(--tr-1); } .h2 { font-family: var(--font-head); font-size: var(--t-2); font-weight: 660; line-height: 1.1; letter-spacing: var(--tr-2); } .h3 { font-family: var(--font-head); font-size: var(--t-3); font-weight: 620; line-height: 1.24; letter-spacing: var(--tr-3); } /* Rule one: a lead is --text, not --text-soft, because a lead sits on the field and --text-soft measures 3.70 there. It is also simply better. */ .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--text); text-wrap: pretty; max-width: 46ch; } .lead--soft { color: var(--text-soft); } p { text-wrap: pretty; } /* Small type gets a touch of positive tracking, which is the other end of the size-specific rule and the end that usually goes unwritten. */ .micro { font-size: var(--t-micro); line-height: 1.5; letter-spacing: var(--tr-micro); color: var(--text-soft); } /* -------------------------------------------------------------------------- 25.2 The canvas โ€” a grid that owns the whole width -------------------------------------------------------------------------- The single biggest defect in the old site: every page was one column with forty per cent of a laptop viewport empty beside it. Not restraint. An unfinished second column. `.canvas` is a named-line grid, so a child chooses its own width by naming a line rather than by having a wrapper wrapped around it. Three widths: content the reading column, 1120 โ€” what `.wrap` was wide 1300, for exhibits and asymmetric splits full edge to edge, for fields and rules The outer `minmax(var(--gutter), 1fr)` means the gutter never collapses and the grid never overflows, which is the failure the Design page shipped at 1180-1744px when a component reached outside a centred container. -------------------------------------------------------------------------- */ .canvas { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, 90px) [content-start] minmax(0, 1120px) [content-end] minmax(0, 90px) [wide-end] minmax(var(--gutter), 1fr) [full-end]; } .canvas > * { grid-column: content; min-width: 0; } .canvas > .to-wide { grid-column: wide; } .canvas > .to-full { grid-column: full; } /* The three band heights. A page alternates them; it does not pick one. */ .band { padding-block: var(--band); } .band--tight{ padding-block: var(--band-tight); } .band--open { padding-block: var(--band-open); } /* Asymmetric splits. Deliberately not 50/50 and deliberately not the same ratio twice in a row โ€” the reason a page reads as composed rather than as a template is that its columns are not all the same width. */ .split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 7fr 5fr; } .split--minor { grid-template-columns: 5fr 7fr; } .split--wide { grid-template-columns: 8fr 4fr; } .split--even { grid-template-columns: 1fr 1fr; } .split--center { align-items: center; } } /* -------------------------------------------------------------------------- 25.3 The field โ€” colour at page scale -------------------------------------------------------------------------- The palette is five muted accents that already ship in the product, and before this section the site reached the page as beige with one green button. Nothing about the palette was the problem; the area given to it was. `.aura` is four soft-focus lights behind a region, at the peak alphas rule one is measured against. It is bounded to its own section rather than laid across the document, because a full-viewport moving background is the one thing the app's own motion research names as risky for this audience, and because an unbounded blur is a compositor cost on every scroll frame. `overflow: hidden` on the parent and `inset: -25%` on the layer together mean the blur never bleeds a hard edge at the section boundary, which is what a blurred gradient does if you let it end inside the box. -------------------------------------------------------------------------- */ .lit { position: relative; isolation: isolate; overflow: hidden; } .aura { position: absolute; inset: -18%; z-index: -1; pointer-events: none; /* โš ๏ธ TWO THINGS ABOUT THESE NUMBERS, AND THE FIRST ONE COST A WHOLE ITERATION. **They are in the aura's own box, not the section's.** The layer is inset -18% on every side, so it is 1.36x the section, and a blob written at `8%` lands at 8% of 1.36 minus 18%, which is off the left edge of the screen. Every position is written as (wanted + 0.18) / 1.36. **They overlap on purpose, and the overlap is the design.** The first version placed four small lights in four corners so that none of them ever met. That is arithmetically safe and visually nothing: the field was measured at its worst-case overlap, cleared it with 7:1 of headroom, and then never reached a tenth of that density on the actual page. A field is not four accents in the corners; it is one lit ground made of four. So the blobs are large and they meet in the middle, which is the composite that rule one measured: light #b8b5b2 --text 7.05 --ink-sage 3.51 dark #525351 --text 6.44 --ink-sage 3.52 Both clear their floors: 4.5 for the body copy, 3.0 for the accent word at display size, which is the number that actually binds this whole section. Raise a field alpha and re-run `tool/site_layer_contrast.py` against BOTH, or do not raise it. **And each blob holds its peak to about 28% of its radius before it starts falling off**, which is the third thing that went wrong here. A two-stop radial gradient reaches its stated alpha at exactly one point, the centre, and is already fading everywhere else; blurred, the average lands at roughly two thirds of the number in the token. The page measured 0.22 where the stylesheet said 0.34 and the field looked like a wash rather than a ground. The plateau is what makes the token honest, and it is why the composite above can be trusted as the worst case rather than as an upper bound nothing reaches. */ background: /* sage, wide, upper left through centre */ radial-gradient(72% 76% at 22% 30%, rgba(var(--rgb-sage), var(--field-sage)) 0%, rgba(var(--rgb-sage), var(--field-sage)) 30%, transparent 78%), /* dusk, upper right, meeting sage across the middle */ radial-gradient(66% 70% at 78% 20%, rgba(var(--rgb-dusk), var(--field-dusk)) 0%, rgba(var(--rgb-dusk), var(--field-dusk)) 28%, transparent 76%), /* clay, lower right */ radial-gradient(62% 66% at 74% 84%, rgba(var(--rgb-clay), var(--field-clay)) 0%, rgba(var(--rgb-clay), var(--field-clay)) 26%, transparent 74%), /* heather, lower left */ radial-gradient(58% 62% at 20% 88%, rgba(var(--rgb-heather), var(--field-heather)) 0%, rgba(var(--rgb-heather), var(--field-heather)) 26%, transparent 74%); filter: blur(var(--field-blur)); } /* A second, quieter field for interior pages, so a page that is not the landing page is still lit without competing with it. */ .aura--quiet { opacity: 0.62; } /* The reverse: the field is the section. Used once per page at most. */ .aura--deep { inset: -35%; filter: blur(calc(var(--field-blur) * 1.4)); opacity: 1.15; } /* -------------------------------------------------------------------------- 25.4 Glass -------------------------------------------------------------------------- The material, and the reason the site is allowed to have one: a frosted pane passes light and stops detail, which is the product's own claim about a person's writing. It is used where it means that, and not as a finish on everything that needed a background. Read 25's rule two for the alphas. Read ยง18 for why the edge is drawn from a shadow in light and from a rim in dark, and why the two are not interchangeable. The rim is a masked gradient border rather than a `border`, because a border cannot be a gradient and a gradient background under a transparent border shows through the fill. `mask-composite: exclude` cuts the middle out of a padded box, leaving a one-pixel gradient ring. It is Baseline. -------------------------------------------------------------------------- */ .glass { position: relative; isolation: isolate; border-radius: var(--r-glass); background: linear-gradient(157deg, rgba(var(--glass-rgb), var(--glass-a-hi)) 0%, rgba(var(--glass-rgb), var(--glass-a)) 58%, rgba(var(--glass-rgb), var(--glass-a-hi)) 100%); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); /* Four inset hairlines, not one. A pane lit from above catches light on its top edge, bounces a weaker line off its bottom edge, and shows a trace on both sides; one top highlight reads as a border, four read as an object. The outer shadow is section 18's, unchanged and still theme-split. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.62)), inset 0 -1px 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.28)), inset 1px 0 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.20)), inset -1px 0 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.20)), var(--glass-lift); } /* The rim. One pixel, brightest at the top-left where the light is, fading to the page's own hairline at the bottom-right. */ .glass::before { content: ""; position: absolute; inset: 0; z-index: 2; /* ๐Ÿ”ด **Decorative, so it must not take clicks โ€” 2026-10-10.** This rim is `inset: 0` at `z-index: 2`, so it covers the whole element and, without this line, swallowed every pointer event inside it. On the evidence register that meant all 28 claim rows showed a working-looking chevron that did nothing: the `` was underneath the rim, so the click never reached it. The affordance was visible, the hit target was not, and nothing in a screenshot could tell you which. 47 elements across the site carry `.glass`. */ pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(255, 255, 255, var(--glass-sheen)) 0%, rgba(255, 255, 255, calc(var(--glass-sheen) * 0.18)) 34%, var(--glass-rim) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* The specular. A single soft light source at the upper left, the same one the rim is brightest under, so the panel reads as one object under one lamp rather than as a box with two unrelated highlights. */ .glass::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(70% 52% at 16% -6%, rgba(255, 255, 255, calc(var(--glass-sheen) * 0.55)) 0%, transparent 62%); pointer-events: none; } .glass > * { position: relative; z-index: 3; } .glass--lg { border-radius: var(--r-glass-lg); } .glass__pad { padding: clamp(1.5rem, 3vw, 2.5rem); } /* A pane with no fill at all: rim and sheen only, for framing something that must not be tinted โ€” the app reproductions, whose colours are the point. It is the one glass that carries no text of its own. */ .pane { position: relative; border-radius: var(--r-glass-lg); box-shadow: var(--glass-lift); } .pane::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(255, 255, 255, var(--glass-sheen)) 0%, rgba(255, 255, 255, calc(var(--glass-sheen) * 0.15)) 40%, var(--glass-rim) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* -------------------------------------------------------------------------- 25.5 Motion as structure -------------------------------------------------------------------------- Not polish added at the end. The three things below are the only motion this section introduces, and each one is doing a structural job that the layout would otherwise need a paragraph to do. **The rule that shapes all three**, from the app's own motion research and from every skill that governs this work: reduced motion is honoured by SUBSTITUTION, not deletion. ยง19's two channels do that mechanically โ€” `--motion-move` collapses to zero and takes every transform with it, while `--motion-tint` survives and keeps the colour and opacity that tell a reader their hover landed. Nothing below writes a literal millisecond. **Why scroll-linked and not triggered-once.** A one-shot entrance fired by an observer is the right tool for a list that appears. These are not that: the depth on the hero panes and the rise of an exhibit are *positional relationships to the reader's own scroll*, and they should run backwards when the reader scrolls backwards, because that is what a spatial relationship does. `animation-timeline: view()` expresses exactly that and costs no main-thread frame. Everything is visible in its finished state before the timeline attaches, so a browser without it, a reader with reduced motion, and a page whose script never ran all see the same composed page. โš ๏ธ Deliberately NOT a fade-and-rise on every section. One identical entrance repeated down a page is the tell that motion was applied to a document rather than designed into a surface, and it is the exact thing the owner is describing when he says the page has no moment. -------------------------------------------------------------------------- */ /* 1. Depth. Panels sit at their own distance and close on the reader as the section arrives. This is the site's spatial hierarchy: nearer is more important, and the reader learns it once in the hero. */ @keyframes settle-near { from { transform: translate3d(0, var(--rise, 26px), -60px) scale(0.972); } to { transform: none; } } /* 2. Reveal. A masked wipe rather than a fade, because a wipe has a direction and a fade does not, and because the clip is the one property besides transform and opacity that composites without paint. */ @keyframes wipe-up { from { clip-path: inset(0 0 42% 0); opacity: 0.35; } to { clip-path: inset(0 0 0 0); opacity: 1; } } /* 3. Drift. The field breathes, once every fifty seconds, well under the 0.2 Hz the app's motion notes flag and well under any threshold a vestibular reader would register. Colour and position both, so the light appears to move rather than to pulse. */ @keyframes field-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: no-preference) { .aura { animation: field-drift 52s cubic-bezier(0.4, 0, 0.6, 1) infinite; will-change: transform; } @supports (animation-timeline: view()) { .depth { animation: settle-near linear both; animation-timeline: view(); animation-range: entry 4% cover 34%; transform-style: preserve-3d; } .reveal { animation: wipe-up linear both; animation-timeline: view(); animation-range: entry 2% cover 26%; } /* A stagger inside one arriving group, capped at four steps so the last item is never waiting on the first. Past four it stops reading as one group arriving and starts reading as a queue. */ .depth-set > * { --rise: 30px; } .depth-set > :nth-child(2) { --rise: 40px; } .depth-set > :nth-child(3) { --rise: 50px; } .depth-set > :nth-child(n+4) { --rise: 58px; } } } /* -------------------------------------------------------------------------- 25.6 The three accessibility queries, answered separately -------------------------------------------------------------------------- They are three different requests from three different people and collapsing them into one is how a site ends up removing the wrong thing. prefers-reduced-motion stop moving. Colour may stay. prefers-reduced-transparency stop layering. Motion may stay. prefers-contrast: more stop being subtle. Both may stay. The second is the one this section makes necessary and the one sites with glass routinely skip. A reader who asks for reduced transparency gets an opaque surface and no backdrop filter, which is a real answer rather than a slightly-less-blurred one, and the layout does not move a pixel. -------------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .glass::after { display: none; } .aura { opacity: 0.35; filter: blur(calc(var(--field-blur) * 1.6)); animation: none; } } @media (prefers-contrast: more) { .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; outline: 1px solid var(--border); } .glass::before, .glass::after, .pane::before { display: none; } .aura { display: none; } } /* -------------------------------------------------------------------------- 25.7 The chrome โ€” a floating pane, and the theme control put in its place -------------------------------------------------------------------------- Two changes, one of them the owner's and one of them the material's. **The theme control is demoted.** It sat between the wordmark and the navigation, which is the most valuable strip of pixels on the site, and it is a developer's priority: a visitor arriving from a search result does not want to choose a colour scheme, they want to know what this is. It keeps every one of its three states, its arrow-key traversal and its announcement โ€” it moves to the end of the bar and is drawn at micro size in the soft ink, so it is findable and is no longer first. **The bar is a pane rather than a strip.** Apple's own guidance for this material, and the reason is legibility rather than fashion: content scrolling under a translucent layer needs an edge that says "this is in front", and a 1px hairline says it much less well than a soft mask does. So the hairline is replaced by a scroll edge โ€” a short gradient that fades the bar's own fill into the page instead of ruling a line under it. -------------------------------------------------------------------------- */ .masthead { /* 0.90, not 0.72. At 0.72 the bar's composited ground is a function of whatever is passing beneath it: on features.html, whose light app plates are the largest bright surfaces on the site, the ground rose to rgb(98,98,94) and "Changelog" measured 2.65:1 in dark. The same nav clears comfortably at scroll 0. The instinct is to swap the link ink for `--text`, and that is the wrong repair: a ratio that changes as the reader scrolls is not a bad choice of token pair, it is a bar that is too transparent to have a ratio. Raising its own alpha bounds the ground instead, which fixes every link in the bar at once and keeps the demoted-ink hierarchy the nav is designed around. Still visibly glass โ€” 0.90 over an 18px blur reads as frosted, not as a solid slab. */ background: rgba(var(--glass-rgb), 0.90); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); border-bottom: 0; } /* The scroll edge. `mask-image` on a pseudo-element rather than a border, so what a reader sees under the bar is their own content dissolving into the chrome rather than being cut off by a rule. */ .masthead::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; pointer-events: none; background: linear-gradient( rgba(var(--glass-rgb), 0.5), rgba(var(--glass-rgb), 0)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); } .masthead__inner { min-height: 62px; } /* โš ๏ธ `flex-wrap: nowrap` WAS SET HERE UNCONDITIONALLY AND IT BROKE THE PHONE ON ALL ELEVEN PAGES. Below 560 the bar is meant to wrap onto two rows - section 6b sets `.masthead__nav { flex: 1 0 100% }` for exactly that. Forbidding the wrap left the nav on one line and pushed the page's scrollWidth to 484 against a 390 viewport: every page, including `privacy.html` and `changelog.html`, which this session had not otherwise touched. That identical 94px on a page with none of the new work on it is what identified the masthead as the cause rather than the field or the exhibit. Found by `tool/site_overflow.html`, which drives every page through fourteen widths in a sized iframe and reports `scrollWidth > clientWidth`. It is in the repo now because this is the second sideways scroll this site has shipped: the Design page scrolled at every laptop width between 1180 and 1744 and nothing caught it either. */ @media (min-width: 900px) { .masthead__inner { flex-wrap: nowrap; } } .brand { font-weight: 660; letter-spacing: -0.022em; } .masthead__nav a:not(.btn) { font-size: var(--t-small); letter-spacing: -0.006em; } /* Demoted: micro size, soft ink, no fill until it is the chosen one, and last in the bar. */ :root[data-js] .theme { order: 9; margin-left: 0.25rem; } .theme__set { gap: 0; } .theme__opt { font-size: var(--t-micro); letter-spacing: var(--tr-micro); padding: 0.3rem 0.5rem; color: var(--text-soft); opacity: 0.72; } .theme__set input:checked + .theme__opt { opacity: 1; } /* Below the desktop tier the bar keeps exactly the two items it has always had, so the phone layout is untouched by any of this. */ @media (max-width: 900px) { :root[data-js] .theme { display: none; } } /* -------------------------------------------------------------------------- 25.8 Controls -------------------------------------------------------------------------- The primary action is the one place on the site where the accent is a fill rather than a field, so it is also the one place a specular edge is worth spending: a filled pill with a light on its top edge reads as an object, and a flat one reads as a rectangle of colour. -------------------------------------------------------------------------- */ .btn { font-weight: 550; letter-spacing: -0.008em; transition: background-color var(--dur-tint) var(--ease-tint), color var(--dur-tint) var(--ease-tint), border-color var(--dur-tint) var(--ease-tint), box-shadow var(--dur-tint) var(--ease-tint), transform var(--dur-press) var(--ease); } .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(43, 42, 40, 0.14), 0 12px 28px -14px rgba(74, 93, 70, 0.55); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(43, 42, 40, 0.16), 0 16px 36px -14px rgba(74, 93, 70, 0.65); } .btn--quiet:hover { border-color: var(--text-soft); } } .btn--quiet { background: rgba(var(--glass-rgb), 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* โš ๏ธ The three preference queries, answered HERE rather than left to ยง25.6. This is the site's fourth glass material and it shipped without either override, which is the same defect ยง33 was written to stop recurring โ€” and it recurred anyway, on a class the earlier blocks had never heard of. The cost of missing it is not cosmetic and not evenly spread. Under `prefers-reduced-transparency` the site drops from 83 backdrop-filtered elements to 2, and the two survivors were index.html's *"See what it does"* and the breathing exercise's **Stop** โ€” the primary call to action and the control that ends a running exercise. A reader who has asked the operating system for less layering is the reader least well served by the two most load-bearing buttons on the site ignoring them. The general lesson, and the reason this comment is longer than the rule: an override attached to a *list of selectors* protects the selectors that existed when it was written. Attaching it to the material, at the point the material is introduced, is what makes the next glass class inherit the answer instead of re-opening the hole. */ @media (prefers-reduced-transparency: reduce) { .btn--quiet { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .btn--quiet { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--text-soft); } } .btn:active { transform: scale(calc(1 - 0.028 * var(--motion-move))); } /* -------------------------------------------------------------------------- 25.9 The first screen -------------------------------------------------------------------------- The composition, and why it is this one. A two-column hero with the headline left and a panel right is the form every product site reaches for, and at 1440 it gives the headline about nine characters a line at display size, which is why so many of them have a small headline. This one is a **two-row** composition instead: the headline takes the wide column at full display size and wraps to two lines that occupy roughly two thirds of it, and the exhibit rises into the space the second line leaves. The reader gets a headline at 96px AND a working product in the same viewport, and the right half is no longer a margin. The overlap is the point and it is not decoration: the pane crossing the headline's baseline is what makes the two rows read as one composition rather than as a stack, and it is the only place on the site where an element breaks its own row. โš ๏ธ The old `.hero::before` field is retired here rather than deleted, because `.hero` is on one page and the rule is long enough that removing it and being wrong is worse than shadowing it and saying so. `.aura` is the same idea at the alphas section 25's rule one is measured against. -------------------------------------------------------------------------- */ .hero { padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--band); overflow: clip; } /* Retired. See the note above. */ .hero::before { display: none; } /* The accent rule under the hero stays, and is the one hard edge on the screen: five hues at full chroma in a two-pixel line, which is the whole palette declared once before anything else uses it. */ .hero::after { height: 2px; opacity: 0.7; } .hero__title { /* Space Grotesk is a wider face than the system grotesque this was tuned against, so the same character count is about 60px wider on the line. The cap is in characters and the character got bigger; the number had to come down with it or the headline runs under the exhibit. */ max-width: 11ch; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); } /* --ink-sage, not --accent. Measured: over the worst pixel of the field the accent reaches 4.47 in light but only 2.75 in dark, which is under the 3:1 a word at display size needs. --ink-sage is the AA variant of the same hue and clears it on both, at 4.47 and 3.88. Same colour family, correct value, and the arithmetic is the reason rather than the taste. */ .display em, .h1 em, .h2 em { color: var(--accent); } .hero__body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .hero__say .lead { margin-top: 0; /* 30ch, not 34. Space Grotesk is wider per character than the face this was tuned against, and at 2560 the last word of the first line was landing against the exhibit's left edge. A `ch` cap moves when the character does. */ max-width: 30ch; } .hero__facts { margin-top: var(--s-6); max-width: 32ch; /* โš ๏ธ `--text-soft` is not allowed on the bare field and this line sat on it at 3.83:1 against a 4.5 floor โ€” on the first screenful, in light, in the three sentences that say the product is free, offline and accountless. The brief's own rule, broken in the place with the most readers. The class is `.micro` for its size; the colour is overridden here because the ground it lands on is a property of this slot, not of `.micro`. */ color: var(--text); } .hero__actions { margin-top: var(--s-7); } @media (min-width: 1000px) { .hero__body { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); align-items: center; } /* The exhibit is the taller column and it leads the eye, so it starts slightly above the headline's cap line and finishes below the lead's last baseline. An element that begins and ends exactly where its neighbour does reads as a table cell; this one reads as a panel the text is arranged around, which is the difference between a layout and a composition. Negative margin rather than absolute positioning, deliberately: the pane still takes part in the grid and still pushes the section's own height. An absolutely-positioned exhibit is the one that overflows a section at some viewport nobody tested, which is exactly how the Design page shipped a sideways scroll on every laptop between 1180 and 1744. */ .hero__exhibit { margin-block: clamp(-2.5rem, -2vw, -1rem) clamp(-2rem, -1.5vw, -0.5rem); } } @media (min-width: 1260px) { .hero__title { max-width: 10ch; } } /* -------------------------------------------------------------------------- 25.10 The check-in, as the hero's exhibit -------------------------------------------------------------------------- The pane carries text, so rule two applies to it and the glass is at 0.80 rather than at the 0.72 floor. Everything inside is a class that already existed and already measured; what is new is the container and the fact that the container is the first thing on the page. -------------------------------------------------------------------------- */ .checkin__h { margin: 0 0 1.25rem; } .checkin .mood { margin-bottom: var(--s-6); } .checkin__note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hairline); } .checkin__note b { color: var(--text); font-weight: 600; } /* -------------------------------------------------------------------------- 25.11 The bar's own alignment -------------------------------------------------------------------------- Brand at the left edge, everything else gathered at the right, which is what `space-between` stopped doing the moment a third child arrived. -------------------------------------------------------------------------- */ .masthead__nav { margin-left: auto; } /* -------------------------------------------------------------------------- 25.12 The theme control, finished -------------------------------------------------------------------------- The demotion is not only position. A bordered pill with a filled selected segment is the visual weight of a primary control, and it was sitting two inches from the actual primary control wearing the same shape. The border and the fill go; the chosen state is carried by ink and weight, which is enough for a three-item control whose states are words. Focus and hover are untouched, and the checked state is still expressed in CSS rather than asked of JavaScript. -------------------------------------------------------------------------- */ .theme__set { border: 0; background: transparent; overflow: visible; } .theme__opt { min-height: 32px; padding-inline: 0.45rem; } .theme__set input:checked + .theme__opt { background: transparent; color: var(--text); font-weight: 600; } @media (hover: hover) and (pointer: fine) { .theme__opt:hover { color: var(--text); opacity: 1; } } .theme__set input:focus-visible + .theme__opt { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- 25.13 The core โ€” where the colour is allowed to be loud -------------------------------------------------------------------------- The field above is capped by one number and it is worth naming: the italic accent word in a display heading. `--ink-sage` over the field has to clear the 3:1 a word at that size needs, and in dark that binds at roughly a 0.25 sage peak. Everywhere a heading can reach, the field stops there. **So the loud colour goes where no heading can reach.** `.aura__core` is a small, high-alpha light placed behind the glass, and it is the reason the material reads as a material: a pane over a flat ground is a white rectangle, and a pane over a bright light is glass. The blur and the 1.55 saturation in `.glass` act on the core, which is what makes the frosted edge visible at all. Placement is a rule, not a preference: the field goes where text goes, at the measured ceiling the core goes behind glass, or behind nothing A core with bare body text on it is the one arrangement this section does not sanction. It is still legible if it happens - 5.94 in light, and the dark values are pulled to 0.40/0.28/0.22 for the same reason - but it is not the composition being designed. -------------------------------------------------------------------------- */ .aura__core { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 58% at 76% 40%, rgba(var(--rgb-sage), var(--core-sage)) 0%, rgba(var(--rgb-sage), var(--core-sage)) 24%, transparent 72%), radial-gradient(38% 46% at 96% 12%, rgba(var(--rgb-clay), var(--core-clay)) 0%, rgba(var(--rgb-clay), var(--core-clay)) 20%, transparent 68%), radial-gradient(36% 44% at 58% 92%, rgba(var(--rgb-dusk), var(--core-dusk)) 0%, rgba(var(--rgb-dusk), var(--core-dusk)) 20%, transparent 68%); filter: blur(30px); } @media (prefers-reduced-motion: no-preference) { .aura__core { animation: field-drift 64s cubic-bezier(0.4, 0, 0.6, 1) infinite reverse; will-change: transform; } } @media (prefers-reduced-transparency: reduce) { .aura__core { opacity: 0.4; animation: none; } } @media (prefers-contrast: more) { .aura__core { display: none; } } /* Glass over a lit core wants more saturation than glass over a flat page, because the blur is averaging a coloured light rather than a neutral one and an unsaturated average of a colour is grey. */ .hero__exhibit { --glass-sat: 1.9; } /* -------------------------------------------------------------------------- 25.14 The mood field โ€” the edge the glass needed -------------------------------------------------------------------------- The finding that turned this hero around, and it took three attempts to see it: **a pane of glass over a soft gradient is a white rectangle.** Blur has nothing to do unless there is an edge behind it. Every version of this hero that sat on an aurora read as flat no matter how much blur or saturation the pane carried, and the instinct - add more blur - made it worse, because more blur is more averaging and an average of a soft wash is a flat colour. `AppColors.moodScale` is five hard stops. It is also, and this is why it is this graphic rather than a decorative one, the exact ladder the slider inside the pane moves along. Measured, glass at 0.88 over the worst band of each theme: light --text-soft 4.72 (worst band --mood-1 #5d5068) dark --text-soft 5.06 (worst band --mood-5 #a6c9ad) 0.80 was not enough here - three of the ten combinations landed between 4.17 and 4.45 - so the exhibit pane alone runs at 0.88. That is the one glass on the site tuned per placement rather than per role, and the reason is written above it. -------------------------------------------------------------------------- */ .hero__frame { position: relative; } .mood-field { position: absolute; /* Asymmetric, and offset down-left like a misregistered print run. Equal insets put an even border of colour round the pane, which reads as a frame; an uneven one reads as two objects at different depths, which is what they are. */ inset: -1.25rem -1.5rem -3.25rem -3.5rem; z-index: 0; border-radius: calc(var(--r-glass-lg) + 10px); background: linear-gradient(112deg, var(--mood-1) 0 19%, var(--mood-2) 19% 39%, var(--mood-3) 39% 60%, var(--mood-4) 60% 80%, var(--mood-5) 80% 100%); } .hero__exhibit { position: relative; z-index: 1; /* See 25.14: the bands are full chroma and the pane has to carry body copy over them. */ --glass-a: 0.88; --glass-a-hi: 0.93; --glass-sat: 1.9; } @media (prefers-contrast: more) { .mood-field { display: none; } } /* -------------------------------------------------------------------------- 25.15 Cross-document transitions -------------------------------------------------------------------------- Eleven static pages that reload white between every navigation. One at-rule makes the whole site cross-fade instead, with no script, no framework and no fallback cost: a browser that does not know the rule navigates exactly as it did before. Under the move channel it is off, because a cross-document transition is a positional effect on the whole viewport and that is the category the app's own motion notes name as the risky one. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* -------------------------------------------------------------------------- 25.16 The highlights page -------------------------------------------------------------------------- This is the page with the most visually interesting material on the site - the app's interface, rebuilt in HTML - and it was buried under three screenfuls of caveats. The caveats are all still on the page; they are simply no longer the page. The composition is the landing page's, on purpose: prose left, exhibit right, the exhibit slightly taller than its column so the two read as one arrangement rather than as two cells. A reader who has seen the home page already knows how to read this one. -------------------------------------------------------------------------- */ .feat-hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .feat-hero__say .lead { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .feat-hero .display { max-width: 15ch; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); } .feat-hero__prose > * + * { margin-top: var(--s-4); } .feat-hero__prose p { max-width: 44ch; color: var(--text-soft); } @media (min-width: 1000px) { .feat-hero { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); } .feat-hero__show { margin-top: clamp(-3rem, -3vw, -1rem); } } /* The reproduction gets the frameless pane: rim and light, no fill, because the colours inside it are the exhibit and tinting them is the one thing a reproduction may not do. */ .feat-hero__show .appshot__plate, .appshot .appshot__plate { border-radius: var(--r-glass-lg); } /* -------------------------------------------------------------------------- 25.17 Disclosure -------------------------------------------------------------------------- Where a page's apparatus goes once it stops leading. Narrow, quiet, and below the argument: the shape of a reader's own second question rather than of the author's first caveat. -------------------------------------------------------------------------- */ .disclose { max-width: var(--measure); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--hairline); } .disclose > p { margin-top: var(--s-4); color: var(--text-soft); } .disclose > p b { color: var(--text); } .disclose__more { margin-top: 1.75rem; } .disclose__more > summary { cursor: pointer; font-family: var(--font-head); font-size: var(--t-small); font-weight: 560; letter-spacing: -0.008em; color: var(--text-soft); padding: 0.5rem 0; list-style: none; display: flex; align-items: center; gap: var(--s-2); transition: color var(--dur-tint) var(--ease-tint); } .disclose__more > summary::-webkit-details-marker { display: none; } /* The marker is drawn rather than a glyph, per the icon rule, and it turns with the state. `transform` is on the move channel, so under reduced motion it snaps rather than turns and the state is still legible. */ .disclose__more > summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform calc(var(--dur-reveal) * var(--motion-move)) var(--ease); } .disclose__more[open] > summary::before { transform: rotate(45deg); } @media (hover: hover) and (pointer: fine) { .disclose__more > summary:hover { color: var(--text); } } .disclose__body > * + * { margin-top: var(--s-4); } .disclose__body { padding-top: 0.75rem; color: var(--text-soft); font-size: var(--t-small); line-height: 1.6; } .disclose__body b { color: var(--text); } /* -------------------------------------------------------------------------- 25.18 Two things the highlights hero got wrong on its first render -------------------------------------------------------------------------- **The display step is the landing page's, and it does not belong on an interior page in a two-column hero.** `--t-display` tops out at 96px, which in a 650px column is about seven characters a line: the headline became three lines of very large type and the exhibit beside it looked like a thumbnail. `--t-1` is the step below and it is the right one here, which also gives the site a hierarchy it did not have - the landing page is the only page that gets the top of the ramp. **The exhibit was capped at 25.5rem** because it was designed to sit beside a reading column at the same width everywhere. In the hero it is the argument, so it takes the column it is given. -------------------------------------------------------------------------- */ .feat-hero .display { font-size: var(--t-1); line-height: 1.0; letter-spacing: var(--tr-1); max-width: 16ch; } .feat-hero__show .appshot { max-width: none; } /* -------------------------------------------------------------------------- 25.19 The mono role -------------------------------------------------------------------------- The site had a `--font-mono` token and used it in eight places for code spans, and no role at all. Every strong reference this work looked at pairs its display face with a mono, and the reason is not decoration: a mono is the only face in a system stack that carries character without a licence, and it is the one that makes a figure look measured. โš ๏ธ **It is for measurement, never for atmosphere.** Monospace as a costume for "technical" is a named anti-pattern and it is the obvious way to get this wrong. The rule here: a mono span names a thing that came off a file or a rendering - an exhibit's provenance, a count, a ratio, a version, a date checked. If the text would still be true with the numbers removed, it is not a candidate. -------------------------------------------------------------------------- */ .appshot__label, .spec-label { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } /* The prose beside the breathing exhibit. Its own class rather than a bare div so `tool/site_class_audit.py` can see it: an undefined class ships silently because a missing margin looks like a design choice. */ .demo__aside .lead { max-width: 38ch; } /* ========================================================================== 26. THE VOICE, SETTLED โ€” three faces, self-hosted, 99 KB ========================================================================== Section 25.1 said the display face was the one decision on this site waiting on a licence, and that a system grotesque was the best that could be done until somebody made it. It has been made, and the answer was already in the repository. ## What ships, and why each one **Space Grotesk** carries the display, every heading, the UI labels and every figure. It is a technical grotesque with real character - the angled terminals, the flat-sided round letters, the distinctive `g` - and it is the thing the research said this site was missing and every strong reference has: a face that reads as *made*, not as *installed*. It has been sitting in `assets/fonts/` under the OFL for the whole project. **Lora Italic** is the one warm note, and its job is exactly one word per display heading. A whole headline in a transitional serif is the look this redesign replaced; a single italic serif word inside a tight grotesque is a different device, and it is the only place the site is allowed to be literary. **Lora upright** exists for one purpose and it closes an owed decision: `lib/design/typography.dart` sets `appHeadingFontFamily` to Lora, and until now the reproductions on the highlights page used this site's own serif instead, with a note on the page apologising for it. They can now use the app's actual face. The note about it goes. **The body is `system-ui`, deliberately, and it is not a compromise.** It costs nothing to send, it is the only face on any platform that ships optical sizing and per-size tracking tables tuned by the vendor, and it is what the reader's own text-size settings expect. The audience for this app is on Indian mobile data; four families would have been vanity. ## Weight, measured SpaceGrotesk-Variable-latin.woff2 22.9 KB wght 300-700 Lora-Variable-latin.woff2 36.8 KB wght 400-700 Lora-Italic-Variable-latin.woff2 39.7 KB wght 400-700, italic ------ 99.4 KB All three are variable, so those are the *complete* weight ranges rather than one weight each - a static three-weight family of any one of them would cost more and do less. All three are subset to Latin plus punctuation and the currency and arrow marks the pages actually use, down from 570 KB of unsubset TrueType. ## Licence, and the one clause worth reading twice SIL Open Font License 1.1, and `-OFL.txt` sits beside each file, which is what the licence requires. Provenance is recorded in `website/fonts/SOURCES.md` the way `tool/eval/data/SOURCES.md` records a dataset, because a font with no recorded provenance is the same class of problem as an unsourced number. โš ๏ธ **The Reserved Font Name clause.** OFL requires a MODIFIED version to be renamed. Subsetting is not a modification in that sense and the SIL FAQ says so directly - it is the same outlines with unused glyphs removed, and it is what every font CDN in the world serves. No outline, metric, name or axis was altered. If any of that changes, the family has to be renamed, and that is the line not to cross without reading the licence again. ## Self-hosted, and that is a privacy decision as much as a design one No CDN and no Google Fonts link. `vercel.json` sets `font-src 'self'` and would refuse a remote one anyway, but the real reason is that a hosted font is a third-party request on every page load of a site whose central argument is that almost nothing leaves the device. The stylesheet would have contradicted the copy. ========================================================================== */ @font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable-latin.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } /* The body face the redesign specifies. It was already in this repository โ€” `assets/fonts/PlusJakartaSans-Variable.ttf`, bundled for the app with its own OFL beside it โ€” so nothing was downloaded and nothing is fetched at runtime; it was subset with the same pyftsubset invocation as the other three and copied in. 24.8 KB, taking the site's whole font payload from 99.4 KB to 121.3 KB. This replaces `system-ui` as the body voice, and that swap is a real trade rather than a free upgrade: `system-ui` costs nothing to send and ships vendor-tuned optical sizing. What it cannot do is be the same face on two devices, and the redesign's whole argument is that the site and the app should look like one product โ€” which they cannot while the site's body copy is whatever the reader's OS happens to supply. The app sets Plus Jakarta Sans; now so does the site. `font-display: swap` with a metric-adjacent fallback below, so a reader on a slow connection gets text immediately and the swap is a reflow nobody notices. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Variable-latin.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("fonts/Lora-Variable-latin.woff2") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("fonts/Lora-Italic-Variable-latin.woff2") format("woff2-variations"); font-weight: 400 700; font-style: italic; font-display: swap; } :root { /* The fallbacks are metric-adjacent rather than alphabetical: if the woff2 has not arrived, `font-display: swap` paints in these, and a swap between two faces of similar width is a reflow nobody notices while a swap between a grotesque and Times is a page that jumps. */ --font-head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --font-accent: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif; /* The app's own heading face, for the reproductions on the highlights page and for nothing else. Named separately from --font-accent so that a change to the site's editorial voice cannot silently change what the reproductions claim to be. */ --font-app-head: "Lora", Georgia, serif; } /* Space Grotesk sets tighter than a system grotesque at the same tracking, and its caps are relatively short, so the display steps lose a little of their negative tracking and the small steps gain a little. Size-specific, per the rule this file has followed since section 25. */ .display { letter-spacing: -0.028em; font-weight: 620; } .h1 { letter-spacing: -0.024em; font-weight: 600; } .h2 { letter-spacing: -0.018em; font-weight: 580; } .h3 { letter-spacing: -0.010em; font-weight: 560; } /* The accent word. Real italics from a real italic file, not a synthesised oblique: `font-style: italic` on a family with no italic face is a shear transform, and it looks like one. */ .display em, .h1 em, .h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.04em; letter-spacing: -0.004em; color: var(--accent); } /* The reproductions use the app's face, which they could not do before. */ .ui-title, .ui-sec, .appshot .ui h1, .appshot .ui h2, .appshot .ui h3 { font-family: var(--font-app-head); } /* -------------------------------------------------------------------------- 27. The evidence page's first screen -------------------------------------------------------------------------- The three words a visitor used to read first on this page were "Did not hold", "Deliberately not used" and "Unverifiable" - an audit's taxonomy, in the shop window, before a sentence about what the audit found. ๐Ÿ”’ Nothing in the register was changed. All 28 rows, one list, one type size, the same four verdicts under the same four words. What moved is the order of encounter: the result before the vocabulary, and the subject matter before the taxonomy, which is why the mechanism facet is now the first control rather than the verdict facet. The tally is a `figure` with a caption, because it is a chart: four bars on one rail, measured against the register's own 28. It was a `dl` of four equal cards until 2026-08-16, and the reason it changed is in the block that draws it. The figures are set in the grotesque's `tnum` so the column compares down, and the cells carry different hues from the accent family, in the order the register uses, so the reader learns the colour before they meet it on a row. -------------------------------------------------------------------------- */ .ev-hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; } .ev-hero .display { font-size: var(--t-1); line-height: 1.02; letter-spacing: var(--tr-1); max-width: 18ch; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); } .ev-hero .lead { max-width: 44ch; } /* The footnote under the lead says what the other 63 assessed claims are, and it is a longer sentence than the lead it sits beneath. Left at the default `.tiny` measure it wrapped to a narrow ragged column against a wide lead. */ .ev-hero .stack > .tiny { max-width: 44ch; } @media (min-width: 1000px) { .ev-hero { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); } } /* THE TALLY, AS A METER CHART AND AS THE REGISTER'S FILTER. ------------------------------------------------------------------------ It was a 2x2 of flat rectangles, each holding one large figure. Four magnitudes - 16, 8, 3, 1 - set at one size, so nothing on screen carried the one thing they are about. And it was the obvious control on the page while being no control at all. FOUR BARS ON ONE RAIL, AND THE RAIL IS 28. Every row is measured against the same track, so the bars decompose the register rather than each filling its own box. A bar's length is a share of the whole, which is why the unverifiable row is a 3.6% stub - that is what one row in twenty-eight looks like, and the figure beside it still reads 1. NEVER COLOUR ALONE, AND THAT IS A MEASURED REQUIREMENT HERE RATHER THAN A PREFERENCE. The four verdict hues fail as a categorical SET, in both themes, measured rather than guessed: light #4a5d46 #68593d #7b503c #61556c on --surface-sunk #efece3 dark #9fb59a #c6b48f #e1aa90 #c0b0cd on --surface-sunk #222524 worst adjacent pair, clay against sand light ฮ”E 4.0 normal vision ยท 0.7 deutan ยท 4.7 tritan dark ฮ”E 4.7 normal vision ยท 0.9 deutan ยท 5.5 tritan A normal-vision ฮ”E of 4 is not a colour-blindness problem; it means a reader with full colour vision cannot tell those two apart either. The palette is ๐Ÿ”’ fixed and muted on purpose and none of this is a defect in it - it is a statement about what it may be asked to ENCODE. Each row here is its own bar with its own word and its own figure, so no colour carries identity and the chart is legal. **A stacked or grouped bar putting two of these hues side by side to mean two different things is not, and must not be built on this site.** Contrast against the ground passes at 3:1 in both themes; separation from each other is what fails. The hues are still the register's own, in the register's own order, so the reader learns a colour here and meets it again on a row - the reason this is not four identical bars in the accent. ON GLASS, NOT ON THE FIELD. Section 16.2's first rule: the field is a ground for ink and for glass and nothing else. A coloured bar is neither, and the peak-sage pixel under it is not a ground anything was measured against. The pane gives every bar one known ground, and it gives the hero's second column the mass it was missing - which is most of what the dead gap under this section was. The chart is `figure`/`figcaption` rather than the `dl` it used to be. It stopped being four terms and four definitions the moment the rows became one comparable series, and a figure with a caption is what a chart is. */ .tally { margin: 0; padding: clamp(1.25rem, 2.6vw, 1.75rem); } .tally__cap { font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--text-soft); margin-bottom: 1.1rem; } .tally__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } /* Two tracks and two rows: the word and its figure share a line, and the bar spans both beneath them. The alternative - word, bar and figure on one line - gives the longest label ("Holds, with a qualification") a column the bar then has to fit around, and the bars stop being comparable the moment they start at different x. */ .tally__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-2); /* The padding is the selected row's breathing room. It was 0.45rem/0.5rem โ€” 7.2px above the label and 8px beside it โ€” which the rim then traced tight against the words, so the selection read as a box drawn ON the text rather than around it. The negative inline margin cancels the horizontal half, so the labels still align with the caption and the footnote; only the ring moves outward. Constant across every row, not just the selected one, or the list would reflow on click. */ padding: var(--s-3); margin-inline: calc(var(--s-3) * -1); border-radius: var(--r-card); } .tally__k { grid-column: 1; grid-row: 1; font-size: 0.9375rem; color: var(--text); min-width: 0; } /* The figure sits at the end of its own bar's line, so the four of them form a column the eye can run down - which is the whole reason for tabular figures here and the reason it is not under the bar. */ .tally__v { grid-column: 2; grid-row: 1; justify-self: end; font-family: var(--font-head); font-variant-numeric: tabular-nums; font-size: 1.375rem; font-weight: 620; line-height: 1; letter-spacing: -0.01em; color: var(--hue-ink); } /* The rail is the denominator, drawn. Same hue as its own fill, at the surface alpha, which is the same-ramp track a meter asks for - a neutral grey rail under four coloured fills would read as four different charts sharing a background. */ .tally__track { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: var(--r-pill); background: rgba(var(--hue), var(--fill)); overflow: hidden; } .tally__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--hue-ink); /* Share of twenty-eight, and a floor so that one row is still a mark rather than nothing. The floor is 3px, which is under the 3.6% a single row already earns at every width this pane is used at, so it never overstates a count. */ width: max(3px, calc(var(--n, 0) / 28 * 100%)); } .tally__foot { margin: 1.1rem 0 0; font-size: 0.8125rem; color: var(--text-soft); } /* The invitation to press, and it is not printed until pressing is possible. Same rule as the filter bar below: with scripting off the chart is a chart and says nothing about controls it does not have. */ .tally__hint { display: none; } :root[data-js] .tally__hint { display: inline; } /* --- and as a control ---------------------------------------------------- Only under `[data-js]`, and only after the script has promoted each row to `role="button"`. Everything here is affordance: the markup ships a list. */ :root[data-js] .tally__row { cursor: pointer; transition: background-color var(--dur-tint) var(--ease-tint), box-shadow var(--dur-tint) var(--ease-tint), transform var(--dur-press) var(--ease); } /* Three channels at once, which is what the owner's reference does and what reads as an object responding rather than as a colour changing: the fill arrives, a rim in the row's own hue arrives with it, and the row lifts one pixel. One, not four - these are rows in a chart four deep, and a card-sized lift inside a pane makes the pane look broken. The lift is a transform, so ยง19's --motion-move retires it to zero under `reduce` and the other two channels survive, which is the split that section is for. Gated on a real pointer for the reason .bento__cell is: on a touch screen :hover sticks after a tap. */ @media (hover: hover) and (pointer: fine) { :root[data-js] .tally__row:hover { background: rgba(var(--hue), var(--fill)); box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.5); transform: translateY(calc(-1px * var(--motion-move))); } } :root[data-js] .tally__row:active { transform: translateY(0) scale(calc(1 - 0.005 * var(--motion-move))); } :root[data-js] .tally__row[aria-pressed="true"] { background: rgba(var(--hue), var(--fill-hi)); } :root[data-js] .tally__row[aria-pressed="true"] .tally__k { font-weight: 600; } :root[data-js] .tally__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ๐Ÿ”ด **The hue fill is a light-palette rule โ€” 2026-10-11.** The selected row paints `rgba(var(--hue), 0.20)`, and on Calm and Sage that is a soft cream band over a white card, which is right and stays. On Night the same declaration is sand at 20% over `#0c0a12`: it composites to a muddy olive slab that reads as a rendering fault rather than a selection. Reported as "this looks so bad". Nothing caught it because the rule is one declaration serving two grounds, and it was authored and reviewed against the light one. `site_contrast_test` measures text, and the text here was never the problem. The same ruling the register rows got applies: the tint comes off the row and the hue moves to the rim, where a saturated colour is an outline rather than a wash. `--soft-track` is the neutral raised surface and is already brightness-aware, so the band reads as lifted on any dark palette. The fill bar still carries the row's colour, so nothing is lost. */ @media (prefers-color-scheme: dark) { :root[data-js]:not([data-theme="light"]):not([data-theme="sage"]) .tally__row[aria-pressed="true"] { background: var(--soft-track); box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.45); } } :root[data-js][data-theme="dark"] .tally__row[aria-pressed="true"] { background: var(--soft-track); box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.45); } @media (hover: hover) and (pointer: fine) { @media (prefers-color-scheme: dark) { :root[data-js]:not([data-theme="light"]):not([data-theme="sage"]) .tally__row:hover { background: var(--wash); box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.38); } } :root[data-js][data-theme="dark"] .tally__row:hover { background: var(--wash); box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.38); } } /* The ceiling. `tnum` because the figure and its interval are meant to be read as one measurement, and a proportional `2` in `0.22` beside a proportional `2` in `0.10` makes two numbers look like two subjects. */ .ceiling__n { margin: 0; font-family: var(--font-head); font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); font-weight: 620; line-height: 1; letter-spacing: -0.03em; color: var(--hue-ink); } .ceiling__ci { margin: 0.6rem 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-small); letter-spacing: 0.01em; color: var(--text); } .ceiling__say { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hairline); max-width: 38ch; } .ceiling { max-width: 26rem; } /* -------------------------------------------------------------------------- 27.1 Rhythm inside a column -------------------------------------------------------------------------- The owl, and it is here because the old page got its vertical rhythm from `.section__head`, which no longer wraps everything. More space above a heading than below it, which is the rule that makes a stack read as grouped rather than as evenly spaced. -------------------------------------------------------------------------- */ .stack > * + * { margin-top: var(--s-4); } .stack > .lead { margin-top: var(--s-5); } .stack > .h2, .stack > .h3 { margin-top: 2.5rem; } .stack > :first-child { margin-top: 0; } /* -------------------------------------------------------------------------- 28. The interior page head -------------------------------------------------------------------------- Six pages still opened with a narrow left column and an empty right half, which was the single largest visual defect on the site and the one the owner named first. โš ๏ธ **This is deliberately NOT the split header** - big headline left, small explanatory column right, on the same baseline. That arrangement is a named tell and it is what every product site with a template does. The composition here is a single asymmetric one: the headline takes the wide column and breaks its own measure, and the standfirst is indented to start past the halfway line, so the eye travels down and right rather than across a gutter. It reads as a page that was set rather than filled in. The display step is `--t-1`, not `--t-display`. The landing page is the only page on the site that gets the top of the ramp, which is a hierarchy the site did not have when every page shouted the same size. -------------------------------------------------------------------------- */ .page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); } .page-head__grid .display { font-size: var(--t-1); line-height: 1.02; letter-spacing: var(--tr-1); max-width: 19ch; margin: 0; } .page-head__lede { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; max-width: 46ch; } @media (min-width: 900px) { .page-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); } .page-head__grid .display { grid-column: 1 / 9; max-width: none; } /* Past the halfway line, and one row down. The indent is the composition. */ .page-head__lede { grid-column: 6 / 12; margin-top: clamp(2rem, 4vw, 3rem); } } @media (min-width: 1240px) { .page-head__grid .display { grid-column: 1 / 8; } .page-head__lede { grid-column: 7 / 12; } } /* -------------------------------------------------------------------------- 29. Depth on the highlights page โ€” z-space, and deliberately no tilt -------------------------------------------------------------------------- The reference the owner sent gets one thing right that this site had nowhere: **real z-space.** Cards at different distances, overlapping, breaking their own container, with shadow that reads as physical. Every section here sat on one plane, and type was doing all the work because nothing else was doing any. โš ๏ธ **The tilt is deliberately not taken.** The reference rotates its cards, and a rotated screenshot frame is one of the devices the research named as dated in 2026 - Linear has dropped it. Depth does not require rotation: overlap, scale, shadow and z-order carry it, and they carry it without the costume. So the exhibits break their rows, sit at two distances, and cast a shadow that changes with the distance. The rows lose their hairline in the process, which is the point: a rule between two sections is what a page uses when it has no depth to separate them with. `.depth` is already on each figure and is scroll-linked, so the distance closes as the reader arrives at it and opens again if they scroll back. Under reduced motion the animation does not run and every exhibit sits at its finished distance, which is the composed page. -------------------------------------------------------------------------- */ @media (min-width: 900px) { .feat { border-top: 0; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); } .feat:last-of-type { border-bottom: 0; } /* The exhibit breaks its row. Odd rows lift, even rows drop, so the page has a rhythm down the right side instead of a stack of equal boxes. */ .feat .appshot { margin-block: clamp(-3.5rem, -3vw, -1.5rem); } .feat:nth-of-type(even) .appshot { margin-block: clamp(-1.5rem, -1.5vw, -0.5rem) clamp(-4.5rem, -4vw, -2rem); } /* Two distances. The nearer exhibit is fractionally larger and carries the deeper shadow, which is what makes the difference read as distance rather than as a size mistake. */ .feat .appshot__plate { transform: scale(1.02); box-shadow: var(--glass-lift); } .feat:nth-of-type(even) .appshot__plate { transform: scale(0.985); } } /* ========================================================================== 30. THE BAR THAT LETS GO OF THE EDGE ========================================================================== The owner's reference for this is a site whose masthead is flush and full-width at the top of the page and, once you scroll, lifts away from the edge into a floating translucent pill with the page blurred behind it. His word for what our site was missing: interactiveness, and glass. Section 25.7 already made the bar a pane rather than a strip. What it does not do is CHANGE, and a bar that looks identical at scroll 0 and at scroll 4000 tells the reader nothing about where they are. This is the one piece of chrome on the site that every page shares, so one rule here is worth more than eleven rules anywhere else. โš ๏ธ NOT ONE PROPERTY ANIMATED HERE AFFECTS LAYOUT, AND THAT IS THE WHOLE DESIGN OF IT. The obvious way to build this - animate the bar's own margins so it insets - reflows a sticky element that is still in flow, which pushes every pixel of the page down as you scroll and turns a thirteen-thousand-pixel document into a slow-motion earthquake. So: - the INSET comes for free. The fill moves from the full-bleed `.masthead` onto `.masthead__inner`, which is a `.wrap` and is already inset by `--gutter` and capped at 1120. Nothing moves; the paint just stops earlier. - the LIFT off the top edge comes from a constant 7px of padding on the bar, present at every scroll position, invisible until the pill has a fill to be lifted away from. - background-color, border-radius, box-shadow and backdrop-filter are the only things on the timeline. All paint, none of them layout. The timeline is `scroll()`, not `view()`: the subject is the reader's position in the document, which is what a scroll progress timeline is, and the bar is sticky so a view timeline on it would never advance. ๐Ÿ”’ DESKTOP ONLY, at the 900 tier the rest of the chrome already uses. The phone bar is untouched - it wraps onto two rows below 560, it has no room to inset, and the mobile design is not this work's to change. And it degrades in the right direction three separate ways: a browser with no scroll-driven animations keeps the flush bar of 25.7, `reduce` keeps it, and the two queries below make it opaque. */ @media (min-width: 900px) { .masthead { padding-block: 10px; } /* Rounded and shadowed at every scroll position, and invisible until the fill arrives - so nothing about the pill's SHAPE is on the timeline either, only whether it is painted. A radius that animates from 0 reads as the corners being cut off rather than as an object arriving. */ .masthead__inner { border-radius: var(--r-glass-lg); background: rgba(var(--glass-rgb), 0); box-shadow: none; } } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { /* The full-bleed fill retires as the pill's arrives, so the two never add up to a doubled wash down the middle of the bar. */ .masthead { animation: bar-release linear both; animation-timeline: scroll(root block); animation-range: 0 160px; } .masthead__inner { animation: bar-pill linear both; animation-timeline: scroll(root block); animation-range: 0 160px; } /* 25.7's scroll edge is the mask that dissolves content into a bar welded to the top of the window. Once the bar has let go of the edge there is nothing to dissolve into and the gradient reads as a smear under a floating object, so it goes with the flush state. */ .masthead::after { animation: bar-edge linear both; animation-timeline: scroll(root block); animation-range: 0 160px; } } } @keyframes bar-release { from { background-color: rgba(var(--glass-rgb), 0.72); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); } to { background-color: rgba(var(--glass-rgb), 0); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); } } /* The pill. It goes to `--glass-a-hi`, not to the 0.72 the flush bar used: a full-bleed bar has the whole window's worth of ground behind it, and a detached pill has whatever paragraph happens to be under it. 16.2's second rule is the reason - 0.88 is the alpha the mood bands forced, and a bar floating over an arbitrary section of the page is the same problem. The only text on it is nav labels and the wordmark, both at --text. */ @keyframes bar-pill { from { background-color: rgba(var(--glass-rgb), 0); box-shadow: none; backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); } to { background-color: rgba(var(--glass-rgb), var(--glass-a-hi)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.62)), inset 0 -1px 0 rgba(255, 255, 255, calc(var(--glass-sheen) * 0.22)), var(--glass-lift); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); } } @keyframes bar-edge { from { opacity: 1; } to { opacity: 0; } } /* --- and the two queries 25.6 answers separately ------------------------- โš ๏ธ PRE-EXISTING GAP, FOUND ON THE WAY IN. 25.6 makes `.glass` opaque under both queries and the masthead is not a `.glass` - it carries its own fill and its own backdrop-filter and neither query reached it. So a reader who asked for reduced transparency has had a translucent blurred bar over every page of this site since the bar was built. Fixed here rather than left, because this section is what made it obvious. */ @media (prefers-reduced-transparency: reduce) { .masthead, .masthead__inner { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; } .masthead::after { display: none; } } @media (prefers-contrast: more) { .masthead, .masthead__inner { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; } .masthead { border-bottom: 1px solid var(--border); } .masthead::after { display: none; } } /* ========================================================================== 31. THE INTERIORS ========================================================================== 16.6 recorded this and did not fix it: the first screens were rebuilt and the interiors were not. A reader who scrolls past the hero on `how`, `design`, `mission`, `vision` or `safety` meets a heading, a paragraph capped at 34ch, and then half a screen of nothing to its right, six times down the page, at one rhythm. The cause is one rule. `.section__head` is `max-width: 34ch` and stacks its lead under its heading, so at 1512 it uses a third of the page and leaves the rest empty - and it is on every section of every page, which is why the flatness is uniform and why one rule fixes it everywhere. -------------------------------------------------------------------------- */ /* THE EDITORIAL HEAD. Heading in one track, lead in the other, bottoms aligned - which is what makes it read as a composed masthead rather than as two columns that happen to be side by side. `:has()` is what makes this safe to apply site-wide. A head carrying only a heading (the "Read on" sections, and a dozen others) has no second child and keeps the single-column rule it has always had - so nothing gains an empty second track, which would be the same defect with more steps. The measure is preserved where it matters: the lead is capped at 46ch in its own track, so no line of body copy gets longer, only better placed. Below 900 this does not apply at all and the phone is untouched. */ @media (min-width: 900px) { .section__head:has(> :nth-child(2)) { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: end; } .section__head:has(> :nth-child(2)) > :first-child { grid-column: 1; margin-bottom: 0; } .section__head:has(> :nth-child(2)) > :not(:first-child) { grid-column: 2; max-width: 46ch; } /* A head that is the page's turn rather than its next paragraph. One per page at most: a second one stops being a change of address and becomes the rhythm it was meant to break. The lead sits under the heading again here, because a centred head with its lead beside it is two axes at once and reads as an accident. */ .section__head--centre:has(> :nth-child(2)) { display: block; max-width: 54ch; margin-inline: auto; text-align: center; } .section__head--centre > :first-child { margin-bottom: var(--s-4); } .section__head--centre > :not(:first-child) { max-width: none; } } /* THE TEST BESIDE THE COMMITMENT, AS AN ARTEFACT RATHER THAN AS A CAPTION. ------------------------------------------------------------------------ `.inv__test` is the strongest idea on the Safety page - every commitment in the left column names the file that goes red the day it stops being true - and it was set as loose mono text against nothing, so the right column read as ragged notes in the margin. Six rows of it is most of that page's dead half. It is a plaque now, built out of section 18's declared `surface-raised` level rather than a new one: the same fill, edge, radius and shadow, so there is one card material on this site and not two. It is not the CLASS, because these are paragraphs in a data row rather than cards, and adding a card class to markup to borrow a fill is how a design system acquires two names for one thing. */ .inv__test { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 0.85rem 1rem; line-height: 1.55; } @media (min-width: 900px) { .inv__test { align-self: start; padding-left: var(--rail-gap); border-left: 1px solid var(--edge); } } /* THE CLAIM, COMPOSED RATHER THAN STACKED. ------------------------------------------------------------------------ A statement at display size over a 30ch measure, its argument stacked under it at 62ch, and half the row empty to the right. It is on `safety` once and on `how` three times in a column, which is where that page's interior goes flat. Same device as the head above, and deliberately the same: the statement holds the left track and the argument answers it in the right, which is what the component is FOR. The hue rail moves to the gutter between them so the two tracks read as one object rather than as two paragraphs, and it is the one place on this component colour appears at all. Bottoms are not aligned here. A claim's statement is the thing being argued with and belongs at the top of its track; aligning it to the foot of an argument three times longer would bury it. */ @media (min-width: 900px) { .claim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--claim-gap); align-items: start; } /* ๐Ÿ”ด **The rows have to be explicit โ€” 2026-10-11.** `.claim__body` and `.claim__more` both declared only `grid-column: 2`, so auto-placement put the body in row 1 and the disclosure in row 2 โ€” and row 1's height is set by `.claim__say`, a display-size statement in the OTHER column. On `how.html` that is three lines against a two-line argument, so the pill was pushed **76px** below the text it belongs to and the claim carried a void most of its own height. The hue rail, inset from the claim's box, stretched over that emptiness and read as a stub floating between two paragraphs. The statement spans both rows instead of dictating where the second one starts, so the argument and its disclosure sit together and the claim is as tall as its tallest column rather than the sum of two. */ .claim__say { grid-column: 1; grid-row: 1 / span 2; max-width: 22ch; } .claim__body, .claim__more { grid-column: 2; max-width: 46ch; } .claim__body { grid-row: 1; } .claim__more { grid-row: 2; align-self: start; } .claim__body { margin-top: 0; } /* The rail sits in the column gap, drawn against the statement it belongs to. One pixel of the hue this block already carries - the same spend `.route` makes, in the same place, so the two read as one family. */ .claim { position: relative; } .claim__say::after { content: ""; position: absolute; top: var(--claim-rail-inset); bottom: var(--claim-rail-inset); /* โš ๏ธ THE GAP HAS TO COME OUT BEFORE THE FRACTION, and leaving it in put this rule 2px from the text it is set against โ€” measured, after the owner reported it as *"the vertical line and the text is so close no spacing in between"*. `5fr 6fr` divides the width MINUS the column gap, so column one ends at `(100% - gap) * 5/11`, not at `100% * 5/11`. The old formula took the fraction of the full width, which overshoots by the gap's own share โ€” at 1512 that is 472.7px instead of 440px, and adding the intended inset landed the rule at 744.7 in a gutter running 676โ†’748. It was not in the gutter at all; it was against the far wall of it. Now it is the true centre: half the gap either side, 36px each at the desktop tier instead of 68 and 2. */ left: calc((100% - var(--claim-gap)) * 5 / 11 + var(--claim-gap) / 2); width: 1px; background: rgba(var(--hue, var(--rgb-sage)), 0.5); } } /* ========================================================================== 32. THE INTERIORS, MATERIALISED ========================================================================== ยง31 fixed the interiors' LAYOUT. It did not give them a MATERIAL, and that is the defect the owner has now named three times in three different words: "underwhelming", "it doesn't look like the future of any web design", "apply it on every page like safety mission vision all pages". The measurement that settles what the complaint actually is. Of the eleven pages, `.glass` appears on TWO โ€” index and evidence. `.aura` at page scale appears on those same two. Every other page is ink on a bare ground with a hairline between rows, six to ten times down the page. The site did not lack a design language; it built one in ยง25, spent it on the landing page, and never carried it inland. So nothing below is a new look. Every value here is ยง25's material, ยง18's elevation and ยง19's two motion channels, applied where they were always supposed to reach. **No palette value is added or changed by this section**, which keeps the 2026-08-16 unlock's binding half โ€” `save the current ones too` โ€” true by construction rather than by promise. ## What this section refuses, and why each refusal is not taste - **Not a card grid.** The obvious answer to a flat page is to put every row in a box, and it is wrong twice: identical icon-plus-heading-plus- text cards are the named lazy scaffold, and a card is a claim that its contents are peers. `.tenet` and `.tension` are peers and become cards; `.claim` and `.inv` are an argument and its evidence and stay composed. - **Not glass everywhere.** ยง18 budgeted blur at one payer and ยง25 raised it to the panels that mean "light passes, detail does not". A page that frosts every surface has said nothing with the material. Glass lands here on the exhibits and on the peer cards, and nowhere else. - **No second hue channel.** Colour still arrives as area, per ยง25, not as an accent scattered on a neutral. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 32.1 The interior first screen, which now carries an exhibit -------------------------------------------------------------------------- ยง28 built the interior head as headline-left with the standfirst indented past the halfway line, and argued โ€” correctly โ€” against the split header, "big headline left, small explanatory column right, on the same baseline", which is the template tell. That argument is about a PROSE column, and it still holds: no interior page gains one. What the composition left behind was a genuinely empty lower right on six pages, at the exact moment a reader is deciding whether this site was made by anyone. The exhibit fills it with the one thing the ยง28 objection does not cover โ€” a drawn figure, which is not a second column of words and cannot be mistaken for one. The standfirst keeps its indent. It moves from `6 / 12` to `3 / 8`, so it still starts past the headline's own left edge and one row down โ€” the eye still travels down and to the right โ€” and the figure takes the right five columns across both rows. -------------------------------------------------------------------------- */ .page-head__fig { display: none; } @media (min-width: 900px) { .page-head__grid { grid-template-rows: auto auto; align-items: start; } .page-head__grid .display { grid-column: 1 / 8; grid-row: 1; } .page-head__lede { grid-column: 3 / 8; grid-row: 2; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } /* Both rows, bottom-aligned to the standfirst's foot, and it bleeds past the container's right edge. The bleed is the point: a figure that stops politely inside the margin reads as an illustration slotted into a box, and one that runs off the page reads as an object the page is a window onto. `--wrap-bleed` is the distance from the wide container's edge to the viewport's, so the figure ends exactly at the screen. */ .page-head__fig { display: block; grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; margin-right: calc(var(--fig-bleed, 0px) * -1); margin-bottom: clamp(0.5rem, 1.5vw, 1.25rem); } } @media (min-width: 1240px) { .page-head__grid .display { grid-column: 1 / 8; } .page-head__lede { grid-column: 3 / 8; } .page-head__fig { grid-column: 8 / 13; } } /* The pane. ยง25's glass at the higher alpha, because a figure drawn in one hue over a four-fill field needs the ground steadier than a paragraph does โ€” the strokes are non-text and have no 4.5:1 to hide behind. */ .figpane { position: relative; padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--r-glass-lg); overflow: hidden; } /* -------------------------------------------------------------------------- 32.2 The figure โ€” geometry that argues, never geometry that decorates -------------------------------------------------------------------------- โš ๏ธ **Every figure on this site is drawn from the page's own structure, and that is a hard rule rather than a preference.** The safety diagram has four boundaries because the page lists four layers; the vision diagram has four markers because the page has four tenets, and the one that is filled is the one whose `when` reads "built". A figure whose count does not match its page is decoration wearing a diagram's clothes, and it will drift the first time the page's content changes. This is `craft-floor`'s SVG rule read exactly: **geometry, not pictures.** Shapes a session can specify to the pixel โ€” no shading, no perspective, no figures, no `feTurbulence`, no sketch stroke. It is also the owner's instruction, which was "we dont need to use images of people we can use vectors and other things". ## The contrast rule for a drawn figure, which is not the text rule A stroke that carries meaning is non-text UI and wants 3:1 against what it sits on (WCAG 1.4.11); a stroke that is scaffolding may sit below that and must then carry no information alone. So the figures split their strokes into exactly two roles and never a gradient between them: `.fig__lead` carries the argument. Full hue, 2px, โ‰ฅ3:1, and it is the stroke a reader could describe afterwards. `.fig__quiet` is the frame it is read against. Low alpha, 1px, and nothing is knowable from it alone. Any text inside a figure takes `--text` or `--text-soft` and never the accent: ยง25's rule two measured accent on dark glass over a field at **3.75**, under the 4.5 body floor, and a figure label is small type. -------------------------------------------------------------------------- */ .fig { display: block; width: 100%; height: auto; overflow: visible; } .fig__quiet { fill: none; stroke: rgba(var(--hue, var(--rgb-sage)), 0.34); stroke-width: 1; } .fig__lead { fill: none; /* โš ๏ธ `--hue-ink`, NOT the raw hue, and this is a contrast failure in the rule's own section. ยง32.2 above states that a lead stroke *"carries the argumentโ€ฆ โ‰ฅ3:1"* โ€” and then shipped it as the raw hue, which measures **2.78:1 on the light page** for sage and 2.49 for sand. Every figure on the site failed the floor its own paragraph demanded. Measured: sage 2.78, dusk 2.67, clay 2.54, heather 2.81, sand 2.49 โ€” none reaches 3. The `--ink-*` variants of the same hues measure 6.37 and 6.83, so the fix costs nothing but the right token. It is the exact shape of the app's rejected elevation ladder: a number written into the specification and then not measured against the thing that shipped. Writing the floor down is not the same as meeting it. */ stroke: var(--hue-ink, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* A thing that exists today. Filled, because a reader should be able to tell built from intended without reading a word โ€” which is the vision page's entire editorial problem, solved in the drawing. */ .fig__on { fill: var(--hue-ink, var(--accent)); stroke: none; } /* A thing that does not exist yet. Outlined at the same diameter, so the difference is presence and never size โ€” a smaller circle would read as "less important" rather than as "not built". */ .fig__off { fill: var(--surface); stroke: var(--hue-ink, var(--accent)); stroke-width: 1.6; } .fig__label { fill: var(--text-soft); font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tr-micro); } .fig__label--on { fill: var(--text); font-weight: 500; } /* THE ONE AUTHORED MOMENT, and it is one per page rather than one per element. The lead stroke draws itself in over its own length; everything else is already at its finished state on the first frame. `--motion-move` is not consulted here because a dash offset is not a transform and the two-channel rule does not stretch to cover it. It is gated the way every other animation in this file is gated โ€” inside a `no-preference` query โ€” which means a reduced-motion reader gets the finished drawing with no interpolation, not a missing one. */ @media (prefers-reduced-motion: no-preference) { .figpane .fig__lead { /* โš ๏ธ `--fig-len` IS MEASURED BY THE BROWSER, NEVER TYPED, and the first build of this section typed it and shipped two clipped drawings. A dash pattern shorter than the path it is on paints the path and then stops: mission's outer arc is ฯ€ ร— 190 โ‰ˆ 597 units against a guessed 330, so 45% of it simply never appeared, and safety's route stopped short of the terminus it was drawn to reach. Both looked deliberate. `motion.js` sets the exact `getTotalLength()` per path. That is the site's own standing rule โ€” *numbers on this site must be derived, never typed* โ€” arriving at the one place nobody thought of it as a number. The fallback is 4000, comfortably past every path here, so a reader with no scripting sees the finished drawing rather than a fragment: at offset 0 a dash longer than the path covers all of it. */ stroke-dasharray: var(--fig-len, 4000); stroke-dashoffset: var(--fig-len, 4000); animation: fig-draw 1400ms var(--ease) 220ms forwards; } @keyframes fig-draw { to { stroke-dashoffset: 0; } } } /* -------------------------------------------------------------------------- 32.3 THE LIFT โ€” the reference's two-rate parallax, finally built -------------------------------------------------------------------------- ยง15.8 read `deepseek.com/harness/en/`'s own stylesheet rather than guessing at it, wrote down what it found, and shipped none of it. This is that specification, built, and it is the thing the owner has been pointing at since they sent the link: *"such intractiveness on the cards like they move and trasnparentcy glass effect which is missing"*. **What makes it read as movement is that there are two rates, not one.** A card that lifts is a hover state. A card whose interior keeps travelling after the card itself has stopped is an object with depth, because that is what parallax is: things at different distances moving at different rates. The reference lifts the card 4px and scales an inner layer to 1.08, and the second number is useless without a second DURATION โ€” at one duration the two are a single rigid transform and the effect collapses. So: the card -4px, over --dur-move (320ms) โ€” arrives, settles the interior 1.08, over --dur-explain (700ms) โ€” still travelling Three channels at once, which ยง15.8 identified as the actual mechanism: the lift, a border step, and a fill step. One alone is a hover tint. ## Where it may go, and this is a safety rule rather than a style one ๐Ÿ”’ **Only on a card that is a control.** Movement is an affordance claim; putting it on a card that does nothing when clicked is a lie about interactivity, and it is the specific thing ยง8 of the handoff already refused once. `.lift` therefore appears in the markup only on an ``, a `