/* ============ CONTACT MESSAGE MOCKUP ============ Styles for _design/concepts/contact-message-mockup.html only. Not linked from field-manual.css or any production page. Borrows the shared tokens (--space-*, --t-*, --ink, --red, --oaktag, --hair) from field-manual.css, which this page loads first. */ /* Impeccable critique P0: the browser's own UA rule for [hidden] is `[hidden]{ display:none }` at (0,1,0), and .form-error/.receipt below are also (0,1,0) but load after it, so they were winning and both panels rendered permanently, even on a fresh empty-state load. This restates the UA rule with !important so JS toggling the hidden attribute is the only thing that can show either panel. */ [hidden]{ display:none !important; } /* Impeccable critique P1: --red on --oaktag measures ~3.35:1, below the 4.5:1 body-text floor. --red stays the graphic color (borders, the button base, large glyphs); small red TEXT on oaktag uses this mixed, darker value instead, measured at ~6.1:1: --red-text, now in tokens.css. */ /* Round 3, layout: Lee, live 2026-09-23 7:30am, on the 1:2 split: "50/50 doesn't make any choices for the user. We'll see." Equal width it is -- the booking card's own content still sizes with width:fit-content (per close.css), so a 50/50 track just hands it more air, not more copy. */ .contact-ways{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-l); } @media (min-width:861px){ .contact-ways{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } } /* Round 3: Lee, same review, on the red card's padding: "it's just a hair too much padding... it reads as off center." close.css's own .close rule pads var(--space-l) (80px) above 1180px; that file is shared with contact.html and out of scope here, so the one step down to var(--space-m) is scoped to this page's own .contact-ways ancestor instead of edited at the source. Left unscoped below 1181px, where close.css already steps its own padding down to var(--space-m) (the 901-1180 range) and var(--space-s) (the phone range) -- an unscoped override here would have frozen both of those at var(--space-m) and undone close.css's own narrower-width padding. */ @media (min-width:1181px){ .contact-ways .close{ padding:var(--space-m); } } /* Holds the booking card and reuses close.css's own .quiet reassurance block underneath it, so the narrower column carries real content instead of ending at the card's own height with nothing below it. */ .close-column{ display:flex; flex-direction:column; } .write-card{ border:1px solid var(--hair); padding:var(--space-l); box-sizing:border-box; display:flex; flex-direction:column; position:relative; /* Establishes a container-query context sized to this card's own box (not the viewport) for the starter-prompts grid below. */ container-type:inline-size; } @media (max-width:860px){ .write-card{ padding:var(--space-m); } } /* Impeccable pass, round 3: a flat flex gap gave the heading, its intro line, the chips and the form all the same var(--space-m) breathing room, so a tightly-related pair (the h2 and the sentence under it) read as no closer to each other than two unrelated groups. Explicit margins replace the blanket gap: small below the heading, then a step up at every real group boundary, biggest before the "Rather talk?" line since that is a second call to action, not a continuation of the form above it. Flex items don't collapse margins, so each of these is the actual rendered gap, not halved against a neighbor. */ .write-card h2{ margin:0 0 var(--space-xs); } .write-intro{ margin:0 0 var(--space-l); } /* ---------- starter prompts ---------- Impeccable pass, round 3: four bordered boxes read as a mismatched button toolbar and wrapped unevenly, the heaviest thing on the card after the red button. The site already has a quiet-label idiom for exactly this (close.css's .tool-item .lnk): a painted hairline rule at rest that reddens and thickens on hover, no box, no fill. Same idiom here -- these read as a row of labeled options, not buttons, while staying real