/* enquiry.css — the contact dialog. * * Self-contained on purpose. The dialog is opened from relaunch.html today but * will also be opened from the campaign landing pages, and those do not share * relaunch.html's inline palette. So it defines its own tokens and only borrows * the page's accent where that exists. * * Theme follows the site's own switch: this project sets data-theme="dark" on * and has no system-preference path of its own, so the dialog mirrors * that rather than inventing a second mechanism the toggle would not reach. */ .enq-dialog { --enq-bg: #ffffff; --enq-ink: #12171b; --enq-ink-mut: #5c6a72; --enq-line: #d8e0e3; --enq-field-bg: #f6f8f9; --enq-accent: var(--blue-0, #0083a3); --enq-ok: #1f6b42; --enq-error: #a3341c; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); /* A modal is centred by the UA stylesheet's `margin: auto`. The site's reset zeroes margins globally, which lands the dialog in the top left corner — so it is restored here explicitly. */ margin: auto; padding: 0; border: 1px solid var(--enq-line); border-radius: 14px; background: var(--enq-bg); color: var(--enq-ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); overflow: auto; } [data-theme="dark"] .enq-dialog { --enq-bg: #12171b; --enq-ink: #e9eef0; --enq-ink-mut: #9aa9b0; --enq-line: #263238; --enq-field-bg: #0d1215; --enq-accent: var(--inv-blue, #47c6dd); --enq-ok: #6fbf8e; --enq-error: #e2856a; } .enq-dialog::backdrop { background: rgba(8, 11, 13, .62); backdrop-filter: blur(2px); } .enq-form { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 4vw, 34px); font-family: inherit; } .enq-head { display: flex; flex-direction: column; gap: 6px; } .enq-eyebrow { font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--enq-accent); } .enq-title { margin: 0; font-family: var(--serif, "Instrument Serif", Georgia, serif); font-weight: 400; font-size: clamp(1.5rem, 4vw, 1.95rem); line-height: 1.15; color: var(--enq-ink); text-wrap: balance; } .enq-lead { margin: 0; font-size: .93rem; color: var(--enq-ink-mut); } /* Two columns where there is room; the label/field pairs stack on their own below that without a second breakpoint. */ .enq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .enq-field { display: flex; flex-direction: column; gap: 5px; } .enq-field label { font-size: .8rem; font-weight: 600; color: var(--enq-ink-mut); letter-spacing: .01em; } .enq-req { color: var(--enq-accent); margin-left: 3px; } .enq-field input, .enq-field textarea, .enq-field select { width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem; color: var(--enq-ink); background: var(--enq-field-bg); border: 1px solid var(--enq-line); border-radius: 8px; transition: border-color .16s ease, box-shadow .16s ease; } .enq-field textarea { resize: vertical; min-height: 88px; } .enq-field input:focus-visible, .enq-field textarea:focus-visible, .enq-field select:focus-visible { outline: none; border-color: var(--enq-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--enq-accent) 22%, transparent); } .enq-privacy { margin: 0; font-size: .8rem; color: var(--enq-ink-mut); } .enq-privacy a { color: var(--enq-accent); } .enq-status { margin: 0; font-size: .88rem; min-height: 1.2em; color: var(--enq-ink-mut); } .enq-status.is-ok { color: var(--enq-ok); font-weight: 600; } .enq-status.is-error { color: var(--enq-error); font-weight: 600; } .enq-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .enq-btn { font: inherit; font-size: .92rem; font-weight: 600; padding: 10px 20px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; } .enq-btn:focus-visible { outline: 2px solid var(--enq-accent); outline-offset: 2px; } .enq-btn-quiet { background: transparent; border-color: var(--enq-line); color: var(--enq-ink-mut); } .enq-btn-quiet:hover { color: var(--enq-ink); border-color: var(--enq-ink-mut); } .enq-btn-send { background: var(--enq-accent); color: #fff; } [data-theme="dark"] .enq-btn-send { color: #08181d; } .enq-btn-send:hover { transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .enq-btn, .enq-field input, .enq-field textarea, .enq-field select { transition: none; } .enq-btn-send:hover { transform: none; } }