/* v2/assets/forms.css — form styling for the v2 PHP port.
*
* WHY THIS FILE EXISTS
* The v2 static build contains no forms at all — one incidental `input` rule in the whole
* of tokens.css and no field primitives. The design system was never asked to describe a
* form. This adds that layer using ONLY existing v2 tokens, so nothing here introduces a
* new colour, radius or spacing step.
*
* Load AFTER tokens.css.
*/
/* ── layout ─────────────────────────────────────────────────────────────── */
.form-card {
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: var(--s5);
box-shadow: var(--shadow-sm);
max-width: 62ch;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s3) var(--s4);
}
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field-wide { grid-column: 1 / -1; }
/* ── labels ─────────────────────────────────────────────────────────────── */
.field > label {
font-family: var(--font-body);
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.field > label .req { color: var(--accent-text); margin-inline-start: .15em; }
/* ── controls ───────────────────────────────────────────────────────────── */
.field input,
.field select,
.field textarea {
font: inherit;
font-family: var(--font-body);
color: var(--text-primary);
background: var(--canvas);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: .7rem .85rem;
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
/* Keyboard focus must be visible — the v2 QA gauntlet checks for it. */
/* Walk mark 14 (mc-fjyq): "All of these fields are required fields and they should highlight in red
when they try to submit." The form already blocked the submit and showed a summary message, but
never said WHICH field — so on a long form the message was true and useless.
NEW TOKEN, FLAGGED: --danger. The palette has --warn-* (an amber advisory used by the legal
under-review banner) and no error colour. The operator asked specifically for RED, and amber is
not red; reusing the advisory tokens would have quietly answered a different request. #B3261E
measures 6.4:1 on --surface-1 and 5.9:1 on --canvas, so it clears AA as text, not just as a
border. It needs BRAND-DESIGN-DOCTRINE sign-off like any other token — raised, not smuggled. */
.field.is-invalid > label { color: var(--danger); }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
border-color: var(--danger);
box-shadow: 0 0 0 1px var(--danger); /* a second pixel of weight — a 1px border alone is
easy to miss on a form this long */
}
/* mc-kmzx (review pin 1): "text above them that says 'required field'".
IT IS ABOVE THE INPUT, and that is a MARKUP fact, not a CSS one: `.field` is a flex column, so
the span renders wherever it sits in the source, and consult.php places it between the label and
the input. This rule only decides whether it shows at all. The vendor form, which authored this
class, still puts its span after the input — both work, and neither needs an `order` override. */
.field-error {
display: none;
color: var(--danger);
font-size: .85rem;
line-height: 1.4;
}
.field.is-invalid .field-error { display: block; }
/* An error span the validator left empty must not open a gap above the input. */
.field.is-invalid .field-error:empty { display: none; }
/* mc-kmzx: "I need them to shake." Four pixels each way, twice, over .4s — enough to catch the eye
at the moment of the blocked submit, small enough that it never moves the layout (transform does
not reflow). It runs on the class being ADDED, so re-submitting a still-empty form re-runs it
only if the class was cleared first, which the submit handler does.
Motion sensitivity is already handled globally: tokens.css zeroes every animation duration under
prefers-reduced-motion, so this becomes a still red field there, which is the whole point. */
@keyframes field-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.field.is-invalid { animation: field-shake .4s ease; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:placeholder-shown) { border-color: var(--warn-line); }
/* ── checkbox rows (preferred contact method) ───────────────────────────── */
.check-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.check {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-body); font-size: .95rem;
color: var(--text-primary); text-transform: none; letter-spacing: 0;
cursor: pointer;
}
.check input { width: auto; accent-color: var(--accent); margin: 0; }
/* ── helper + error text ────────────────────────────────────────────────── */
.field .hint { font-size: .84rem; color: var(--text-muted); }
.form-error {
background: var(--warn-bg);
border: 1px solid var(--warn-line);
color: var(--warn-text);
border-radius: var(--radius);
padding: var(--s3);
margin-bottom: var(--s4);
}
/* mc-kmzx: the base `.form-error` is AMBER — it is the advisory tone, and amber is not red. The
fields it summarises go red, and a summary in a different colour from the thing it summarises
makes the reader look for a second problem. --danger is the palette's only red: 6.4:1 as text on
white, so it carries the sentence as well as the border. */
.form-error--danger {
background: var(--surface-1);
border-color: var(--danger);
color: var(--danger);
font-weight: 500;
}
/* THE NUMBERED SUMMARY — mc-wx24, operator mark 6: "This should show every error in the form, not
just one, and it should number each of the errors ... The text should definitely be red and it
should flash when they try to submit without this stuff filled in."
An gives the numbers, so the count is the browser's job and cannot drift from the list.
Each entry is a link to the field it names, in the same red, underlined so it is not colour
alone. The box itself takes focus (tabindex=-1 in the markup) so the whole list is read out. */
.form-error--danger .form-error-title { margin: 0; font-weight: 600; }
.form-error--danger ol { margin: .45rem 0 0; padding-inline-start: 1.5rem; }
.form-error--danger li { margin: .25rem 0; }
.form-error--danger a { color: var(--danger); text-decoration: underline; }
.form-error--danger a:hover { color: color-mix(in srgb, var(--danger) 78%, #000); }
.form-error--danger:focus { outline: none; }
.form-error--danger:focus-visible { outline: 3px solid var(--danger); outline-offset: 2px; }
/* ONE flash, not a pulse loop: the summary is new on the screen at the moment of the blocked
submit and has to be noticed, but it must not keep blinking while it is being read. Only the
ground and the border move — the text never dips below its contrast floor. */
@keyframes form-error-flash {
0%, 100% { background: var(--surface-1); box-shadow: 0 0 0 1px transparent; }
30%, 70% { background: color-mix(in srgb, var(--danger) 12%, var(--surface-1)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 35%, transparent); }
}
.form-error--danger.is-flash { animation: form-error-flash .6s ease 1; }
@media (prefers-reduced-motion: reduce) {
.form-error--danger.is-flash { animation: none; }
}
/* ── honeypot: reachable by bots, invisible and unfocusable to people ───── */
.hp {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* ── actions ────────────────────────────────────────────────────────────── */
.form-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
margin-top: var(--s4);
}
.form-actions .small { color: var(--text-muted); }
/* Respect the reduced-motion preference the rest of v2 already honours. */
@media (prefers-reduced-motion: reduce) {
.field input, .field select, .field textarea { transition: none; }
}
/* 375px gate: single column, no horizontal overflow. */
@media (max-width: 480px) {
.form-card { padding: var(--s4); }
.form-grid { grid-template-columns: 1fr; }
}
/* ── Section heading with the notepad ABOVE it (mc-1838 → mc-4msk) ──────────────────────────
HISTORY, because this block has been ruled on three times and the shape of it only makes sense
with the reasons attached.
mc-1838 put the notepad to the LEFT of "What we need to answer well" in a two-column grid,
out of a 460px centred inset that used to sit BETWEEN the sentence and the form.
mc-4msk, first ruling: match its height to the text. Built, then denied — with the caption
still under the picture the notepad came out drawn at 92x68, an icon.
mc-4msk, second ruling: move the caption sentence out from under the picture to under the
paragraph. Built, then denied again.
mc-4msk, third and current ruling (2026-09-06), operator verbatim: "Can you crop the image down
to the red rectangle in the screenshot? Also, I changed my mind. I want the image about the
'Send a message / What we need to answer well / None of this commits you to anything. The
fuller it is, the more useful our first reply. / The more you write here, the more useful the
first reply can be.'"
SO: ONE COLUMN AT EVERY WIDTH, PICTURE FIRST. "About" reads as ABOVE, and the four lines she
quotes are the whole text group — eyebrow, heading, paragraph, and the sentence moved under the
paragraph last time, which stays exactly where she put it. There is no side-by-side left at any
width, so the whole height-matching apparatus that the previous two builds needed is GONE: there
is no second column to match a height to. That is why this block is shorter than what it
replaced, not because anything was dropped.
The markup did not have to move. It has been picture-then-text since mc-1838, chosen then so the
stacked order would already be the reading order; the grid was the only thing making it
side-by-side, and removing the grid is the whole change.
WHY 300px WIDE. The file was cropped to the operator's red rectangle in the same change and is
now 849x849, so "natural size" would put an 849px notepad above a section heading — three times
the size it has ever been shown at, and larger than the phone column, so it could not be natural
size everywhere in any case. 300px keeps the DRAWING itself at about 219px across, which is the
size she has been looking at through both previous builds (it drew at 219.5 when it was beside
the text), and it is comfortably below the file's own 849px so the pixel art is only ever scaled
DOWN — scaling a pixel grid UP past its authored resolution is what makes it look soft. `min()`
caps it against the column so a 375px phone gets 327px and never a sideways scrollbar.
LEFT-ALIGNED, not centred: `margin-inline: 0` against the `margin-inline: auto` the base
`.section-art` rule carries, so the picture's left edge lines up with the eyebrow and the heading
under it. `img.section-art.section-art--stacked` is written at element-plus-two-classes because
`img.section-art.section-art--inset` (tokens.css) centres at 460px at the same specificity, and a
plain `.section-art--stacked` would lose to it; forms.css loads after tokens.css, so equal
specificity resolves here.
-------------------------------------------------------------------------------------------- */
.section-header--media {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s4);
text-align: start; /* .section-header.center is a different, opt-in variant */
}
/* The CAP LIVES ON THE FIGURE, not on the picture, and that is not cosmetic. Written as
`width: min(100%, 300px)` on the ![]()
, the percentage is circular while the figure is being
sized — the browser falls back to the file's intrinsic width and the FIGURE comes out 849 wide,
overrunning its container by 148px at 1280 with no scrollbar to show for it. Measured, then
fixed: the figure takes the cap, the picture simply fills the figure. */
.section-header--media .section-media { margin: 0; width: min(100%, 300px); }
img.section-art.section-art--stacked {
width: 100%;
height: auto;
margin: 0;
border-radius: var(--radius);
}
.section-header--media .section-header-text > :first-child { margin-top: 0; }
/* ── The stepped consult flow (mc-kmzx + mc-1838) ───────────────────────────────────────────
A numbered flow inside ONE