/* ========================================================================== bto-contact.css — page-scoped additions for contact.html ONLY. Creative Designer · asset_export · round 2 · 2026-08-05 WHY THIS FILE EXISTS bto-static.css, reveals.js and static-panels.js are shared and were being edited by other agents in the same window. This build was told not to touch them. Everything below is a rule the shared sheet does not carry and that contact.html specifically needs. Linked from contact.html's IMMEDIATELY AFTER bto-static.css, so palette.css still loads last and the token cascade is unchanged. CONTRACTS HELD (same three bto-static.css states about itself): · ZERO new colour values — palette tokens only, no hex literal anywhere · ZERO !important · every selector scoped under .bto-static, most under #contact-* as well, so no other page — locked or in-flight — can be reached by this file Two curves only (design-system §4b). No rotation but the site's -3deg, which lives in bto-static.css and is not re-declared here. ========================================================================== */ /* --- 1 · GROUND C text repairs the shared sheet does not cover ------------- bto-static.css:269-276 re-inks `p`, `.bto-row__line`, `.bto-stat__label`, `.bto-stats`, `.bto-stat__amount` and `a` on a dark panel. It does NOT re-ink `.bto-row__label` (--fg-ink) or the row hairlines (--bg-hairline, a polar tint that is close to invisible on ink). C2 `#contact-details` is the first dark panel on the site to use `.bto-rows`, so it is the first page to need these. Kept generic under .bto-panel--dark rather than id-scoped: if the shared sheet later adopts them, this block simply becomes a duplicate of a rule that already agrees with it, never a conflict. */ .bto-static .bto-panel--dark .bto-row__label { color: var(--fg-on-dark); } .bto-static .bto-panel--dark .bto-rows > li { border-top-color: var(--bg-hairline-soft); } .bto-static .bto-panel--dark .bto-rows > li:last-child { border-bottom-color: var(--bg-hairline-soft); } /* --- 2 · the email, on GROUND C ------------------------------------------- `.bto-mail` ships `border-bottom: 2px solid var(--bg-hairline)`. On ink that polar tint reads as a grey smudge under a light word. --fg-on-dark-mute is the token the dark panel already uses for its secondary ink, so the rule under the address matches the rest of the panel instead of fighting it. The address's own colour is already handled by bto-static.css:276. */ .bto-static .bto-panel--dark .bto-mail { border-bottom-color: var(--fg-on-dark-mute); } /* --- 3 · the last panel runs to the footer -------------------------------- `.bto-static__body` carries `padding: 0 0 8vh`. That was correct when every section sat on the page canvas: it was breathing room. Now C6 is a full-bleed dark ground, and 8vh of container padding leaves a cream band between the dark panel and the footer that reads as a rendering fault. The panel supplies its own bottom rhythm — bto-static.css:226, clamp(56px,7vh,96px) — so the room is not lost, it moves inside the ground where it belongs. */ .bto-static #contact-body { padding-bottom: 0; } /* --- 3b · NARROW-WIDTH GUTTER — a regression this build caused, repaired --- MEASURED, not assumed. At 390px the backup page put its section content at left=8; this page put it at left=0, i.e. type touching the viewport edge. Cause: `.bto-static__body` has always carried `padding: 0 0 8vh`, a shorthand that zeroes the container's own inline padding, and until now the 8px came from the page's horizontal layout being fractionally wider than the viewport. Adopting `.bto-panel` engages the `:has()` overflow-x guard at bto-static.css:258, which removes that slack — correctly — and the borrowed gutter goes with it. So the gutter is given properly instead of borrowed. --svc-gutter's own floor (20px, design-system §3) is the value. The full-bleed grounds are unaffected — `.bto-panel::before` reaches the viewport edges from the section box via calc(50% - 50vw), so the ground still bleeds while the type sits back on the spine, which is the whole point of the device. BREAKPOINT: 1389px, not a round number and not arbitrary. Mokko's `.container` is max-width 1350. Below 1390 the container is edge-to-edge and has no margin to spare, so it needs the padding; at 1390 and above it is centred inside 1350 and already has 20px+ of real margin each side (measured: 45px at 1440), so the desktop measure I QA'd stays exactly as shot. Setting this at 991 first was not enough — 1200 was still landing type on the edge. */ @media (max-width: 1389px) { .bto-static #contact-body, .bto-static .page-header-content > .container { padding-inline: 20px; } } /* --- 3c · air under the closing address ----------------------------------- `.bto-mail` is `display:inline-block; margin:6px 0 0` with a 2px underline, and `.bto-prose p` opens with no top margin. On C6 that puts the trailing line hard against the underline of a 56px address — they read as one block instead of a statement and its footnote. 22px is the site's own small-gap step (`.bto-list` uses it at bto-static.css:146). */ .bto-static .bto-panel--dark .bto-mail + .bto-prose { margin-top: 22px; } /* Same problem at the other end of C4's address. `.bto-mail` opens with `margin: 6px 0 0` and closes with nothing, so on #contact-form it collides with the h2 above it and with the first field label below. It is the working route sitting one glance above the broken one (§5.1 point 5) — it has to read as its own statement, not as a caption on the heading or a value in the form. Same clamp the section rhythm uses at bto-static.css:226. */ .bto-static #contact-form .bto-mail { margin-top: clamp(20px, 2.4vh, 28px); margin-bottom: clamp(28px, 3.2vh, 40px); } /* --- 4 · THE INERT SUBMIT — spec §5.1 point 2, with one deviation ---------- The shared `.p2-cta[disabled]` rule sets `opacity:.55`. On this button that is a real accessibility problem rather than a theoretical one: composited over GROUND B (--bg-panel2), ink at 55% lands near 3.5:1, and the whole design of this section depends on the visitor actually READING the words "FORM NOT LIVE — EMAIL US". A submit label you cannot read defeats the honesty it exists to deliver. So: still muted, still obviously inactive, but legible. opacity .75 → composites to ~6.3:1 on --bg-panel2. Reads greyed, passes. color → pinned to --fg-ink instead of `currentColor`, which would otherwise inherit Mokko's mid-grey body ink and undo the gain. border-color → --bg-hairline is a polar tint ON a polar panel, i.e. an invisible outline. A ghost button with no visible edge is not a ghost button, it is a floating string. `cursor:not-allowed`, the `disabled` attribute and the ghost (never amber) treatment all still come from the shared sheet, untouched. */ .bto-static #contact-form .bto-form__submit { justify-self: start; /* .bto-form is a grid; without this the pill stretches */ } .bto-static #contact-form .bto-form__submit[disabled] { opacity: .75; color: var(--fg-ink); border-color: var(--fg-ink); } /* --- 5 · the inert fields -------------------------------------------------- Shared sheet gives these `opacity:.55; cursor:not-allowed`. Two things it cannot know from a page it has never seen: a) the label sits OUTSIDE the control, so it is unaffected by the field opacity and stays at full --fg-accent. Nothing to do there. b) a disabled