/* ── forms.css ────────────────────────────────────────────────────────────── Every text input, select, and textarea on the site — Contact, Login, and the Subscribe email-capture — shares this one set of rules. Square, hairline-bordered, mono labels: the same vocabulary as the rest of the page rather than a separate "form" idiom. ───────────────────────────────────────────────────────────────────────── */ .field { display: grid; gap: var(--s2); } .field-label { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); } .field-input, .field-select, .field-textarea { width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--rule); background: var(--surface); color: var(--fg); font-family: var(--font-text); font-size: var(--fs-text); } .field-textarea { resize: vertical; min-height: 12rem; } .field-input:focus-visible, .field-select:focus-visible, .field-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } /* The one honeypot field on the site: present in the DOM for bots, invisible and unreachable for everyone else. */ .field-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-submit { display: inline-flex; padding: var(--s4) var(--s6); background: var(--accent); color: var(--accent-fg); border: 0; cursor: pointer; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; } .form-submit:disabled { opacity: 0.5; cursor: default; } .form-status { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; } .form-status[data-state="success"] { color: var(--accent); } .form-status[data-state="error"] { color: var(--fg-faint); } /* ══ Form personality — Contact, Login, Subscribe ═══════════════════════════ [data-forms] on picks how a field reports its own validity: plain-annotated the base state above — no per-field feedback added terminal a hardware-readout line, typed in levels a thin meter bar instead of a border colour or icon stamped success/error render as an overprinted stamp Not built: `patched` (a connector rail down the form) — noted in the v3 handoff as the more involved option; skipped this pass, not abandoned. Every field always carries .field-readout/.field-meter in the DOM (see forms.js); which one (if either) is visible is a pure CSS switch, so switching variants never touches markup or re-runs validation. ═════════════════════════════════════════════════════════════════════ */ .field-readout, .field-meter { display: none; } /* ── terminal ──────────────────────────────────────────────────────────── */ [data-forms="terminal"] .field-readout { display: inline-block; margin-top: var(--s1); font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); color: var(--fg-faint); } [data-forms="terminal"] .field[data-valid="true"] .field-readout { color: var(--accent); } @media (prefers-reduced-motion: no-preference) { [data-forms="terminal"] .field-readout { overflow: hidden; white-space: nowrap; vertical-align: bottom; } [data-forms="terminal"] .field-readout.is-decoding { animation: buy-decode var(--dur-detect) steps(19, end) forwards; } } /* ── levels ────────────────────────────────────────────────────────────── */ [data-forms="levels"] .field-meter { display: block; height: 2px; margin-top: var(--s2); background: var(--rule); overflow: hidden; } [data-forms="levels"] .field-meter::before { content: ""; display: block; height: 100%; width: 0; background: var(--fg-muted); transition: width var(--dur-throw) var(--ease-throw), background var(--dur-throw) var(--ease-throw); } [data-forms="levels"] .field[data-valid="false"] .field-meter::before { width: 35%; } [data-forms="levels"] .field[data-valid="true"] .field-meter::before { width: 100%; background: var(--accent); } /* ── stamped — success/error read as an overprinted stamp, not a status line. One fixed rotation, not randomised per load. ────────────────────── */ [data-forms="stamped"] .form-status[data-state="success"], [data-forms="stamped"] .form-status[data-state="error"] { display: inline-block; padding: var(--s2) var(--s3); border: 1px solid currentColor; transform: rotate(-2deg); }