/* ============================================================================ /contact/ — the only page in the product with a general-purpose form. Everything structural (.wrap, .doc, .doc-head, .toc, .eyebrow, .lede) comes from home/home.css, and every control comes from Backbone's bb- primitives. This file adds ONLY what no other document page needs: the operator-identity list, the routing table, and the three form affordances (hint, error summary, honeypot) that Backbone does not ship. House rules observed: radius 0 everywhere, one accent (--sig) used for the required marker and the focus ring and nothing else, hairlines in --line, uppercase micro-labels with positive tracking, body copy at 15.5px to match .doc so the form does not read as a different document from the page it is on. ========================================================================= */ /* ── Operator identity ───────────────────────────────────────────────────── */ .op-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 4px 0 8px; } .op-list dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-top: 3px; } .op-list dd { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.72; } /* Below 560px a two-column dl becomes two unreadable columns of one word each. */ @media (max-width: 560px) { .op-list { grid-template-columns: 1fr; gap: 2px 0; } .op-list dd { margin-bottom: 14px; } } /* `.todo-banner` and `.todo` lived here: the loud treatment for an unfilled operator placeholder, which existed so a placeholder could never be mistaken for shipped copy. The operator identity is filled in now, both banners are gone, and no markup carries either class — `pnpm check:operator` is the gate that says so. Deleted rather than left behind, because a style with no user is a style the next reader has to prove is dead. Recover from git if a placeholder is ever reinstated. */ /* ── Routing table ───────────────────────────────────────────────────────── */ /* `position: relative` is load-bearing, not tidiness. The inside is `.sr-only`, which is `position: absolute` — an absolutely positioned box resolves against its nearest POSITIONED ancestor, so without this it would escape the scroller, be laid out against the document, and (with `white-space: nowrap`) widen the page by the full length of the caption text. That is a real bug this codebase has already been bitten by once. Containing it here also keeps the horizontal overflow inside this box instead of on , which is the rule for every wide element on the site. */ .table-scroll { position: relative; overflow-x: auto; margin: 6px 0 8px; border: 1px solid var(--line); background: var(--slab); } .table-scroll:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; } .route-table { width: 100%; border-collapse: collapse; min-width: 520px; } .route-table th, .route-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--muted); } .route-table thead th { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border-bottom-color: var(--line-hi); white-space: nowrap; } .route-table tbody th { color: var(--text); font-weight: 700; white-space: nowrap; } .route-table tbody tr:last-child th, .route-table tbody tr:last-child td { border-bottom: 0; } /* Deep-linked rows (/contact/#privacy from the privacy page, #accessibility from the a11y statement) get a visible marker, so a visitor who followed a link lands on something that confirms it worked rather than on an anonymous table. */ .route-table tbody tr:target th, .route-table tbody tr:target td { background: var(--slab-hi); } .route-table tbody tr:target th { box-shadow: inset 3px 0 0 var(--sig); } .route-table td:last-child { white-space: nowrap; color: var(--text); } /* ── Form ────────────────────────────────────────────────────────────────── */ #contact-form { margin: 6px 0 4px; max-width: 56ch; } .bb-hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--faint); } .bb-hint.count { font-variant-numeric: tabular-nums; } .bb-label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); } .form-errors { border-left: 2px solid var(--err); background: var(--slab); padding: 12px 14px; margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; } .form-errors b { display: block; color: var(--err); margin-bottom: 4px; } .form-errors ul { margin: 0; padding-left: 20px; } .form-errors a { color: var(--err); } /* [hidden] loses to any explicit `display` in this file's own cascade — stated outright because that exact collision has bitten this codebase before. */ .form-errors[hidden] { display: none !important; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; } .form-status { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); min-height: 1.6em; /* reserve the line so a result does not shift the layout under the cursor */ } .form-status.is-ok { color: var(--sig-text); } .form-status.is-err { color: var(--err); } /* Sent state: the form is replaced by its own confirmation rather than left filled in, so nobody re-sends the same message wondering whether the first one landed. */ .form-done { border-left: 2px solid var(--sig); background: var(--slab); padding: 18px 18px 16px; margin: 6px 0 4px; max-width: 56ch; } .form-done h3 { margin: 0 0 8px; color: var(--text); font-size: 17px; letter-spacing: -0.01em; } .form-done p { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.7; } .form-done p:last-child { margin-bottom: 0; } .form-done .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--sig-text); } /* Honeypot. Off-screen rather than display:none: a bot that skips hidden inputs is exactly the bot this is meant to catch, and `display:none` is the first thing such a script checks. Kept out of the a11y tree (aria-hidden in the markup) and out of the tab order (tabindex="-1"), so no human path reaches it. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Every standalone control on this page clears 44px on a touch device — the select and the inputs inherit Backbone's control height, the submit button is a .btn, and the only thing left is the inline links inside the routing table. */ @media (pointer: coarse) { .route-table td a, .route-table th a { display: inline-block; min-height: 44px; line-height: 44px; } }