/* Butterpie public site — Lemon Berry. ================================================================================================ ONE STYLESHEET, NO FRAMEWORK, NO WEBFONT, NO THIRD-PARTY REQUEST. The public page is what an unauthenticated stranger loads first, and every external reference is a request this estate cannot vouch for. The page's own CSP says so in machine terms — `default-src 'none'` with `style-src 'self'`, which also means NO inline `style=` attribute anywhere in the generated HTML, and (since `font-src` falls through to `default-src`) no web font at all. The type stack is what the visitor already has; the character comes from scale, weight, spacing and colour rather than from a face nobody is guaranteed to receive. THE PAGE IS BUILT LIKE THE MARK. Butter on filling on crust: a plum crust at the top and the bottom, a berry filling that does the work, and lemon as the thin bright line between layers. That is not a metaphor stretched over a template — it is the composition the brand kit prescribes for the product itself (plum navigation shell, berry actions, lemon for small emphasis, ~85-90% neutral where the reading happens), applied to a page instead of an application. DEPTH IS GROUNDS AND ELEVATION, NOT DECORATION. Three grounds alternate down the page; three elevations lift objects off them; one object crosses a seam to prove the grounds are separate sheets rather than a background that changed colour. There is no gradient on this page. THE ONE DEPARTURE FROM BOTH SENTENCES (2026-09-28, pending the owner's word) is the eye candy the owner asked for: the hero's ASCII object, and the hover kit's lights, which are gradients only while something is lit — at rest the page is still the one described here. See those two sections. ================================================================================================ */ /* ---- Tokens -------------------------------------------------------------------------------- */ :root { color-scheme: light; /* The three permanent colours of the approved mark. Never a UI surface; never recoloured. */ --bp-lemon: #F4E68A; --bp-berry: #A32142; --bp-plum: #3E2838; --bp-canvas: #F8F7F8; --bp-surface: #FFFFFF; --bp-sunk: #F1EDF0; --bp-text: #2E202A; --bp-text-2: #6B5D67; --bp-muted: #776772; --bp-border: #E6DFE4; --bp-control: #91818B; --bp-primary: #A32142; --bp-primary-hover: #8A1A38; --bp-primary-pressed: #71132D; --bp-on-primary: #FFFFFF; --bp-link: #A32142; --bp-link-hover: #71132D; --bp-focus: #285F91; --bp-highlight: #FCF8DD; --bp-on-highlight: #3E2838; --bp-ok: #26734D; --bp-danger: #B42318; /* THE SHELL. Plum in both themes — it is a brand surface, not a light-mode surface, exactly as in the product. Everything that sits on it takes a token from THIS group and never from the page's, which is the rule the judges' one confirmed AA failure came from breaking: the page's focus blue is 2.00:1 on plum, and the berry link colour is unreadable on it. */ --bp-shell: #3E2838; --bp-on-shell: #F8F3F6; --bp-shell-2: #C5B8C1; --bp-shell-hover: #52374A; --bp-shell-line: #5A4354; --bp-shell-focus: #F4E68A; /* THE PLATE IS PERMANENTLY LIGHT, IN BOTH THEMES, AND IT EXISTS FOR ONE REASON. The approved full-colour mark has three fills and no background: its crust is #3E2838, so on a plum shell the crust is literally invisible and the transparent separations fill with plum. The kit's own answer is "use the white logo on plum" — but the colour mark is the one the brand leads with, so instead of giving it up the page gives it a surface to live on. A physical object, mounted on the masthead the way a maker's badge is set into an instrument. */ --bp-plate: #FFFFFF; --bp-on-plate: #2E202A; /* Elevation. Plum-tinted, because a neutral-black shadow over plum-tinted neutrals reads as dirt. */ --e-ring: 0 0 0 1px var(--bp-border); --e-card: 0 0 0 1px var(--bp-border), 0 1px 2px rgb(46 32 42 / .05), 0 8px 20px -14px rgb(46 32 42 / .28); --e-plate: 0 0 0 1px rgb(46 32 42 / .10), 0 2px 6px rgb(27 21 27 / .18), 0 24px 56px -28px rgb(27 21 27 / .45); --maxw: 1120px; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px; --gut: 24px; } /* Dark. Three states: the un-stamped default follows the system, and either explicit choice beats it. The media query wraps the selector rather than nesting inside it, so this needs no CSS Nesting support to work. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bp-canvas: #1B151B; --bp-surface: #261E26; --bp-sunk: #312731; --bp-text: #F8F3F6; --bp-text-2: #C5B8C1; --bp-muted: #AB9BA6; --bp-border: #483B47; --bp-control: #8D7989; --bp-primary: #F28AA5; --bp-primary-hover: #F6A1B6; --bp-primary-pressed: #E87394; --bp-on-primary: #2A1420; --bp-link: #F28AA5; --bp-link-hover: #F6A1B6; --bp-focus: #F4E68A; --bp-highlight: #39331E; --bp-on-highlight: #F4E68A; --bp-ok: #8ED5AD; --bp-danger: #FFAAA0; /* THE SHELL GOES DARKER, NOT LIGHTER, AND THAT IS THE FIX FOR A MEASURED PROBLEM. Plum #3E2838 against the dark page #261E26 is 1.21:1 — a tonal shift nobody can see, so a reverse-printed band would simply vanish and the brand would exist at full strength in light mode only. The product's own dark nav is #211820, and using it here keeps the band a band. */ --bp-shell: #211820; --bp-shell-hover: #3E2838; --bp-shell-line: #483B47; --e-ring: 0 0 0 1px var(--bp-border); --e-card: 0 0 0 1px var(--bp-border), inset 0 1px 0 rgb(248 243 246 / .05); --e-plate: 0 0 0 1px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .5), 0 28px 60px -30px rgb(0 0 0 / .7); } } :root[data-theme="dark"] { color-scheme: dark; --bp-canvas: #1B151B; --bp-surface: #261E26; --bp-sunk: #312731; --bp-text: #F8F3F6; --bp-text-2: #C5B8C1; --bp-muted: #AB9BA6; --bp-border: #483B47; --bp-control: #8D7989; --bp-primary: #F28AA5; --bp-primary-hover: #F6A1B6; --bp-primary-pressed: #E87394; --bp-on-primary: #2A1420; --bp-link: #F28AA5; --bp-link-hover: #F6A1B6; --bp-focus: #F4E68A; --bp-highlight: #39331E; --bp-on-highlight: #F4E68A; --bp-ok: #8ED5AD; --bp-danger: #FFAAA0; --bp-shell: #211820; --bp-shell-hover: #3E2838; --bp-shell-line: #483B47; --e-ring: 0 0 0 1px var(--bp-border); --e-card: 0 0 0 1px var(--bp-border), inset 0 1px 0 rgb(248 243 246 / .05); --e-plate: 0 0 0 1px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .5), 0 28px 60px -30px rgb(0 0 0 / .7); } :root[data-theme="light"] { color-scheme: light; } /* ---- Base ---------------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } body { margin: 0; background: var(--bp-canvas); color: var(--bp-text); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 .5em; letter-spacing: -.022em; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; } h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 750; } h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1em; } a { color: var(--bp-link); text-underline-offset: 2px; } a:hover { color: var(--bp-link-hover); } :focus-visible { outline: 2px solid var(--bp-focus); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--bp-surface); color: var(--bp-text); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: var(--e-card); } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- The crust: masthead + hero, one continuous plum ground -------------------------------- */ .crust, .band-shell, .foot { background: var(--bp-shell); color: var(--bp-on-shell); /* THE SHELL IS A DARK SURFACE IN BOTH THEMES, SO IT TAKES THE DARK CONTROLS IN BOTH THEMES, and this is arithmetic rather than taste. A berry #A32142 button measures 1.82:1 against light plum and 2.35:1 against dark plum — a filled control whose fill is under the 3:1 non-text floor is a control you cannot see, which is 1.4.11 exactly. The kit's own dark-mode berry is a LIGHTER one "for controls", and it lands at 5.72:1 on light plum and 7.36:1 on dark, with its #2A1420 label at 7.34:1 on the fill. So the shell pins the dark ramp locally, once, and every button, border and ring on it inherits a checked pairing instead of the page's. */ --bp-primary: #F28AA5; --bp-primary-hover: #F6A1B6; --bp-primary-pressed: #E87394; --bp-on-primary: #2A1420; /* An outlined button's border IS its boundary, so it is a CONTROL border and not a decorative divider: `--bp-shell-line` is 1.95:1 on dark plum and fails. 3.34:1 / 4.30:1. */ --bp-shell-control: #8D7989; } /* EVERY FOCUSABLE THING ON PLUM TAKES THE LEMON RING. The page's focus blue is 2.00:1 against plum — below the 3:1 floor for a non-text indicator — so on this ground the ring is lemon (10.56:1) with a shell-coloured offset, which is the kit's own instruction for focus on a coloured surface. */ .crust :focus-visible { outline-color: var(--bp-shell-focus); box-shadow: 0 0 0 4px var(--bp-shell); } .crust a { color: var(--bp-on-shell); } .crust a:hover { color: var(--bp-shell-focus); } /* …EXCEPT A FILLED BUTTON, which carries its own label colour. `.crust a` outranks `.btn-primary`, so the header's "Create account" was painted near-white on the pink fill — 2.14:1 — and lemon on hover. The shell's own pairing, #2A1420 on #F28AA5, is 7.34:1. */ .crust .btn-primary, .crust .btn-primary:hover { color: var(--bp-on-primary); } /* THE MASTHEAD WRAPS INTO ROWS, NOT INTO A PILE. Left to `flex-wrap` alone the pickers drop under the mark and the nav floats where the pickers were, which reads as a layout that broke rather than one that responded. The nav takes a full row of its own instead, and the controls stay together. SINCE 2026-09-28 THE NAV ALWAYS HAS ITS OWN ROW. With "AI" and "Help & support" it holds six links, and the header's content box is capped at the page's 1120px: measured, the mark, six links, the two pickers and the two buttons need 1150-1235px in Polish, German, French and Japanese, so the single row that used to hold above 1080px would never hold again — the buttons wrapped under the mark at every width. Two rows at every width is one layout instead of one per language. THE ACCOUNT BUTTONS ARE ALWAYS THE RIGHT END OF THE FIRST ROW — top right is where a visitor looks for "Log in" — so each breakpoint below re-orders the rows around them rather than letting them wrap wherever they land: ≥701px mark … pickers · buttons, then the nav 481–700 mark … buttons, then the pickers, then the nav ≤480 the mark, then the buttons (right-aligned), then the pickers, then the nav The last split is measured, not guessed: the widest pair (French, 264px) beside the mark does not fit the 272px content box of a 320px phone, so on a phone the buttons take a row of their own. */ .top { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gut); } .top .picks { margin-inline-start: auto; } .top .auth { display: flex; gap: 8px; align-items: center; margin-inline-start: auto; } /* THE PICKER PILL'S SIZE, NOT THE PAGE BUTTON'S. At the full 15px/13px 22px every label is 25-30px wider and the French pair alone overflows a 320px phone. */ .top .auth .btn { font-size: 13.5px; padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; line-height: 1.2; } /* While the pickers share the buttons' row, the two are one group at the end of it. */ @media (min-width: 701px) { .top .auth { margin-inline-start: 0; } } /* On a phone the pickers get a row of their own, and a right-aligned pair alone on a line reads as something that fell off rather than as a control group. They align with everything else. */ @media (max-width: 700px) { .top .picks { margin-inline-start: 0; order: 2; flex-basis: 100%; } .top .auth { order: 1; } } @media (max-width: 480px) { .top .auth { flex-basis: 100%; justify-content: flex-end; } } /* THE PLATE. The full-colour mark's only home on a plum ground. */ /* A PLATE RE-DECLARES THE TOKENS OF THE THINGS ON IT, and that is not belt-and-braces. The plate is light in BOTH themes; the page's tokens are not. A dark-theme visitor reading `var(--bp-text)` on a white plate gets #F8F3F6 on #FFFFFF — 1.0:1, invisible — and a lemon focus ring on it measures 1.16:1. So anything that is a plate pins the light values locally, once, and everything inside it inherits them by construction rather than by each rule remembering. */ .plate { background: var(--bp-plate); --bp-surface: #FFFFFF; --bp-sunk: #F1EDF0; --bp-text: #2E202A; --bp-text-2: #6B5D67; --bp-muted: #776772; --bp-border: #E6DFE4; --bp-control: #91818B; --bp-link: #A32142; --bp-link-hover: #71132D; --bp-focus: #285F91; --bp-ok: #26734D; --bp-danger: #B42318; color: var(--bp-text); } .crust .plate :focus-visible { outline-color: var(--bp-focus); box-shadow: none; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 7px 14px 7px 10px; border-radius: var(--r-pill); font-weight: 800; font-size: 17px; letter-spacing: -.02em; box-shadow: 0 1px 2px rgb(0 0 0 / .22), 0 6px 16px -10px rgb(0 0 0 / .5); } .crust .brand, .crust .brand:hover { color: var(--bp-text); } .brand img { display: block; width: 34px; height: auto; } .topnav { display: flex; gap: 6px 22px; flex-wrap: wrap; order: 3; flex-basis: 100%; margin-inline-start: 0; } .topnav a { color: var(--bp-shell-2); text-decoration: none; font-weight: 600; font-size: 14px; } .topnav a:hover { color: var(--bp-on-shell); } /* THE PAGE YOU ARE ON, SHOWN AS WELL AS ANNOUNCED. `aria-current="page"` is the semantic half; this is the visible half — the shell's own foreground and a lemon underline, not a colour change alone. */ .topnav a[aria-current="page"] { color: var(--bp-on-shell); text-decoration: underline; text-decoration-color: var(--bp-shell-focus); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* ---- The two pickers ------------------------------------------------------------------------ Both are a native
/ disclosure: is mapped to a button with expanded/collapsed state by the browser itself, so Enter and Space work, screen readers announce it, and — for the language picker, which contains real — the whole control still works with no JavaScript at all and is crawlable. Zero ARIA, zero roving tabindex, zero focus trap. */ .picks { display: flex; gap: 8px; align-items: center; } .pick { position: relative; } .pick > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); /* A control border, not a divider — see the note on `--bp-shell-control`. */ border: 1px solid var(--bp-shell-control); background: transparent; color: var(--bp-on-shell); font-size: 13px; font-weight: 650; } .pick > summary::-webkit-details-marker { display: none; } .pick > summary::marker { content: ''; } .pick > summary:hover { background: var(--bp-shell-hover); } .pick > summary .chev { width: 9px; height: 9px; flex: none; opacity: .7; } .pick[open] > summary .chev { transform: rotate(180deg); } .pick-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 7px); z-index: 40; min-width: 190px; padding: 6px; background: var(--bp-surface); color: var(--bp-text); border-radius: var(--r); box-shadow: var(--e-card); display: flex; flex-direction: column; gap: 2px; } .pick-menu a, .pick-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 14px; text-align: start; text-decoration: none; color: var(--bp-text); background: transparent; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; width: 100%; } .pick-menu a:hover, .pick-menu button:hover { background: var(--bp-sunk); color: var(--bp-text); } /* THE CURRENT ITEM IS MARKED TWICE, and that is the "never by colour alone" rule: a lemon flag AND a check glyph AND `aria-current` / `aria-pressed` for anyone not looking at the page. */ .pick-menu [aria-current="true"], .pick-menu [aria-pressed="true"] { background: var(--bp-highlight); color: var(--bp-on-highlight); font-weight: 700; } .pick-menu .tick { visibility: hidden; flex: none; } .pick-menu [aria-current="true"] .tick, .pick-menu [aria-pressed="true"] .tick { visibility: visible; } /* The theme picker cannot work without script, so it is not SHOWN without script. A control that is visible and dead is worse than a control that is absent. boot.js stamps `data-js` before paint. */ .pick-theme { display: none; } :root[data-js="on"] .pick-theme { display: block; } /* ---- Hero ---------------------------------------------------------------------------------- */ /* The hero is a full-width band whose TEXT is measured, not a 46rem block floated in the middle of the page: `.wrap`'s auto margins would centre the whole section and leave the headline starting a third of the way across. The measure belongs to the lines, not to the section. */ .hero { padding-block: 56px 36px; } .hero h1, .hero .slogan, .hero .lead, .hero .ctas, .hero .note { max-width: 46rem; } .kicker { display: inline-block; margin: 0 0 18px; padding: 4px 12px; border-radius: var(--r-pill); /* Lemon's whole budget on this page is: this pill, the two seams, the focus ring on plum, and the product frame's active nav item. The kit's most repeated instruction is "sparingly". */ /* ON THE CANVAS THE PILL NEEDS AN EDGE. Lemon against the light canvas is 1.25:1 — the fill is invisible as a boundary — where against the plum it used to sit it was 10.56:1 and needed nothing. The plum text was always 10.56:1 on lemon and is unchanged; only the outline is new, and it makes the chip identical in both themes. */ background: var(--bp-lemon); color: var(--bp-plum); border: 1px solid var(--bp-plum); font-size: 12px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; } /* CANVAS PAIRS, because the hero is on the canvas now. These read `--bp-on-shell` and `--bp-shell-2` while the hero lived inside `.crust`; left behind after the move they would be near-white text on a near-white page in the light theme — the exact half-applied-change failure this estate keeps shipping. --bp-text on --bp-canvas is 14.49:1 light / 16.37:1 dark, and --bp-text-2 is 5.80:1 / 9.40:1. The link colour is 6.89:1 light and 7.66:1 dark. */ /* THE SLOGAN LEADS AND THE H1 FOLLOWS, SMALLER (the owner, 2026-09-27). The two swapped their type and their colour: the rotating line takes the headline size and the text colour, and the h1 ("Your whole back office, in one place.") takes the slogan's former size and the link colour. The h1 stays the h1 — it is what the page is about, for a search engine and a screen reader's heading list. */ .hero h1 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.012em; color: var(--bp-link); margin: 0 0 14px; } .hero .lead { color: var(--bp-text-2); font-size: 1.12rem; max-width: 62ch; } /* THE ROTATING LINE, AT HEADLINE SIZE. Eight spans, one shown: the markup gives the rest `hidden` (the page without script shows the first), and boot.js stamps `data-slogan` on the root BEFORE the first paint, which the rules below turn into exactly one visible span — so the line is never swapped under the reader, and a display-size line that wraps differently cannot shift the page. Only these rules give a slogan span a `display`: the one keyed to the stamped index, after the rule that hides all eight. A `display` anywhere else would beat `hidden` and show all eight at once. The list has exactly eight lines (the build refuses any other count, SLOGAN_COUNT). `anywhere` keeps a long word from widening a phone. */ .slogan { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.022em; text-wrap: balance; color: var(--bp-text); margin: 0 0 .3em; overflow-wrap: anywhere; } /* JAPANESE BREAKS AFTER 、 AND 。, NOT BETWEEN ANY TWO CHARACTERS. At headline size the slogans wrap, and Japanese may otherwise break anywhere: "Butterpie。経理 / も、サクサク。" split the particle from its noun, and phrase detection (`auto-phrase`) still split いい/厨房 and ひと/味. Every line of the list is punctuated into its phrases, so `keep-all` breaks exactly there, in every browser; `overflow-wrap: anywhere` above still breaks a phrase too wide for its line, and that break puts the 、 at the start of the next line. So every phrase, WITH its 、, must fit the narrowest line: a 320px phone leaves 272px, and at the Japanese floor of 1.9rem (30.4px, tracked -.022em) nine full-width characters measure about 267px (バックオフィスの、, 現地法人の数字が、, 事務の下ごしらえ、) and ten about 297px. A new Japanese slogan keeps each phrase to nine characters, the 、 included. */ :lang(ja) .slogan { word-break: keep-all; font-size: clamp(1.9rem, 5.2vw, 3.4rem); } :root[data-slogan] .slogan > span { display: none; } :root[data-slogan="0"] .slogan > span:nth-child(1), :root[data-slogan="1"] .slogan > span:nth-child(2), :root[data-slogan="2"] .slogan > span:nth-child(3), :root[data-slogan="3"] .slogan > span:nth-child(4), :root[data-slogan="4"] .slogan > span:nth-child(5), :root[data-slogan="5"] .slogan > span:nth-child(6), :root[data-slogan="6"] .slogan > span:nth-child(7), :root[data-slogan="7"] .slogan > span:nth-child(8) { display: inline; } @media (prefers-reduced-motion: no-preference) { .slogan > span { animation: slogan-in .35s ease-out; } } @keyframes slogan-in { from { opacity: 0; } to { opacity: 1; } } .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent; transition: background 140ms cubic-bezier(.2,0,0,1), color 140ms cubic-bezier(.2,0,0,1); } .btn-primary { background: var(--bp-primary); color: var(--bp-on-primary); } .btn-primary:hover { background: var(--bp-primary-hover); color: var(--bp-on-primary); } .btn-primary:active { background: var(--bp-primary-pressed); } /* On plum, an outlined button takes the shell's own foreground — a `--bp-surface` fill would be a white chip on the crust and a berry fill would be a second primary. */ .crust .btn-outline, .band-shell .btn-outline { border-color: var(--bp-shell-control); color: var(--bp-on-shell); background: transparent; } .crust .btn-outline:hover, .band-shell .btn-outline:hover { background: var(--bp-shell-hover); color: var(--bp-on-shell); } .btn-outline { border-color: var(--bp-control); color: var(--bp-text); background: transparent; } .btn-outline:hover { background: var(--bp-sunk); } .btn:disabled { background: var(--bp-sunk); color: var(--bp-muted); border-color: transparent; cursor: default; } .hero .note { color: var(--bp-muted); font-size: 13.5px; margin-top: 16px; } /* THE TWO-DEMO CHOOSER (2026-09-29; built only with SITE_DEMO_CAFE=on) — the demo leaves the hero's button row and becomes a labelled pair: a heading line, the two companies, one note. The group is spaced as one unit, and its parts sit closer to each other than to the rest of the hero. A long company name may wrap inside its button on a phone, so the pair's buttons get a line height that survives a second line. */ .demo-pick { max-width: 46rem; margin-top: 26px; } .demo-pick-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--bp-text); } .hero .demo-pick .ctas { margin-top: 12px; } .hero .demo-pick .note { margin-top: 10px; } .demo-pick .btn { line-height: 1.25; } /* ---- The hero's ASCII object (site.fx.js) ---------------------------------------------------- EYE CANDY THE OWNER ASKED FOR (2026-09-28), AND IT KEEPS THE PAGE'S RULES. "Depth is not decoration" gives way here, by request, and nowhere else. The box is RESERVED HERE, before the first paint, and the script only fills it with a canvas: nothing moves when it arrives (CLS 0). Without script the box is zero high — `data-js` is stamped by boot.js before the first paint — so a reader without it gets exactly the page. It takes no pointer events, and the script leaves every cell under a line of the hero's text blank, so no word's contrast changes. WHERE IT GOES. From 1000px up it is lifted out of the flow into the empty column beside the 46rem measure, behind the words (the hero isolates, the layer is -1), bleeding into the page margin to 24px short of the window's edge and never past it: min() keeps it at the hero's own edge until there is margin to take. Below 1000px there is no column, and it is a strip AFTER the trust line — never between the headline and the buttons, so a phone's first screen still ends in its buttons. */ .hero { position: relative; isolation: isolate; } .fx-ascii { display: block; height: 0; pointer-events: none; user-select: none; -webkit-user-select: none; } .fx-ascii canvas { display: block; width: 100%; height: 100%; } :root[data-js="on"] .fx-ascii { height: 200px; margin-top: 18px; } @media (min-width: 600px) { :root[data-js="on"] .fx-ascii { height: 240px; } } @media (min-width: 1000px) { :root[data-js="on"] .fx-ascii { position: absolute; z-index: -1; margin: 0; height: auto; top: 8px; bottom: 84px; left: calc(var(--gut) + 46rem + 16px); right: min(0px, calc((var(--maxw) - 100vw) / 2 + 24px)); } } /* Printed, in forced colours (its inks are ours, not the reader's), or when the reader asks for more contrast: no drawing at all, and no reserved strip either. */ @media print, (forced-colors: active), (prefers-contrast: more) { .fx-ascii { display: none; } } /* ---- The object that crosses the seam ------------------------------------------------------- It sits half on the crust and half on the canvas, which is what makes the two read as separate sheets rather than as a background that changed colour. IT IS A REAL SCREENSHOT, AND THAT IS A CORRECTION. The first draft of this page put a hand-built HTML replica of the application here — plum rail, lemon active item, a plausible sales register — which themes and translates for free and costs no bytes, and which sits one band above a caption that reads "Real screens from the product, not mock-ups." A drawing of the product directly above that sentence makes the sentence false. The screenshots are the proof; this is the first of them, given the position the drawing wanted. */ /* NO LONGER CROSSING A SEAM. The -68px pulled the plate up over the boundary between the plum crust and the canvas, which was the whole device; with the hero on the canvas there is no boundary to cross and the negative margin just collided with the buttons above it. */ .hero-shot { max-width: var(--maxw); margin-inline: auto; margin-top: 8px; position: relative; z-index: 2; border-radius: var(--r-lg); box-shadow: var(--e-plate); overflow: hidden; padding: 10px; } .hero-shot img { display: block; width: 100%; height: auto; border-radius: 10px; } .hero-shot figcaption { padding: 12px 8px 6px; color: var(--bp-text-2); font-size: .92rem; } .hero-shot figcaption strong { color: var(--bp-text); display: block; font-size: 1.02rem; letter-spacing: -.01em; } @media (max-width: 760px) { .hero-shot { margin-top: 4px; } } /* A status is a word AND a shape, never a colour on its own. */ .tag { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; border: 1px solid; } .tag-ok { color: var(--bp-ok); border-color: var(--bp-ok); } .tag-late { color: var(--bp-danger); border-color: var(--bp-danger); } /* ---- Bands --------------------------------------------------------------------------------- */ .band { padding-block: 74px; } .band-canvas { background: var(--bp-canvas); } /* RECESSED, not raised: a hairline top and bottom and a darker ground, with no shadow, reads as a well cut into the page. It is the ledger's shaded column. */ .band-sunk { background: var(--bp-sunk); border-block: 1px solid var(--bp-border); } .band-shell { /* ground + control tokens: see the shared rule above */ } /* THE SEAM. Three pixels of lemon where a sheet ends — the white gap between butter, filling and crust in the mark, translated. Used exactly twice on the page. */ .seam { height: 3px; background: var(--bp-lemon); } .band .lead { color: var(--bp-text-2); font-size: 1.06rem; max-width: 68ch; } .band-shell .lead { color: var(--bp-shell-2); } .band-shell h2 { color: var(--bp-on-shell); } /* ---- The index ------------------------------------------------------------------------------ Thirteen capability areas, as a numbered index rather than thirteen cards. An accountant reads an index; thirteen cards is a wall nobody finishes. The number is real information — it says how many there are and where you are — so it earns its place. EACH ROW SHOWS ITS AREA (2026-09-28): the area's dashboard, captured in the page's language, sits beside the text, and the area's short tour video under the bullets. A row with neither is the text index row it always was, its bullets in two columns. */ .index { margin-top: 34px; border-top: 1px solid var(--bp-border); } .idx { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 26px; padding: 26px 0; border-bottom: 1px solid var(--bp-border); align-items: start; } .idx.has-shot { grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.3fr); } .idx-n { font-variant-numeric: tabular-nums; color: var(--bp-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin: 4px 0 0; } .idx-text { min-width: 0; } .idx h3 { margin: 0 0 4px; font-size: 1.12rem; } .idx-blurb { color: var(--bp-text-2); font-size: .95rem; margin: 0; } .idx ul { margin: 10px 0 0; padding: 0; list-style: none; color: var(--bp-text-2); font-size: .9rem; } .idx:not(.has-shot) ul { columns: 2; column-gap: 26px; } .idx li { break-inside: avoid; padding-inline-start: 15px; position: relative; margin-bottom: 3px; } .idx li::before { content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 1px; background: var(--bp-control); } .idx-shot { margin: 0; padding: 8px; border-radius: var(--r-lg); box-shadow: var(--e-plate); min-width: 0; } .idx-shot img { display: block; width: 100%; height: auto; border-radius: 8px; } .idx .clip { margin-top: 18px; max-width: 480px; } @media (max-width: 860px) { .idx, .idx.has-shot { grid-template-columns: 2.6rem minmax(0, 1fr); } .idx-shot { grid-column: 2 / -1; margin-top: 14px; } .idx:not(.has-shot) ul { columns: 1; } } /* ---- Screens --------------------------------------------------------------------------------- */ /* ================================================================================================ MARKETING SURFACES — the trust strip, value cards, product tour, area list, plan table and FAQ. Every colour here is a token; the kit check in tests/unit refuses a literal it does not publish. ================================================================================================ */ /* ---- The compliance strip under the hero ---------------------------------------------------- */ .trust { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } .trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--bp-text-2); font-size: 14px; font-weight: 600; } .trust .tick { color: var(--bp-primary); flex: none; } /* ---- Value cards ----------------------------------------------------------------------------- */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; } .value { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: var(--r-lg); padding: 26px 24px; /* ONLY box-shadow AND transform MOVE. Transitioning a colour-bearing property is what produced a measured 1.27:1 mid-transition in the product's buttons; the rule is the same here. */ transition: box-shadow .18s var(--ease, ease), transform .18s var(--ease, ease); } .value:hover { box-shadow: var(--e-card); transform: translateY(-2px); } .value h2 { font-size: 1.12rem; margin: 0 0 10px; letter-spacing: -.01em; } .value p { margin: 0; color: var(--bp-text-2); font-size: .96rem; } /* ---- The product tour ------------------------------------------------------------------------ A RADIO GROUP WEARING TABS. The inputs are visually hidden, the