/* ============================================================ CONTACT FORM MODAL — 2026-07-21 Popup form that replaces the mailto: CTAs. Markup is injected by js/contact.js and appended to ; these styles dress it. On-brand: ink panel, cream text, crimson accent, Cormorant. ============================================================ */ .cf-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vh, 2.5rem) var(--gutter); background: rgba(0, 0, 0, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow-y: auto; opacity: 0; transition: opacity 0.22s ease; } .cf-overlay.cf-open { opacity: 1; } .cf-overlay[hidden] { display: none; } .cf-modal { position: relative; width: 100%; max-width: 560px; margin: auto; background: #0a0908; border: 1px solid var(--hairline); padding: clamp(1.75rem, 4vw, 2.75rem); transform: translateY(8px); transition: transform 0.22s ease; } .cf-open .cf-modal { transform: translateY(0); } .cf-close { position: absolute; top: 0.55rem; right: 0.85rem; background: none; border: none; color: var(--cream-45); font-family: var(--serif); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; transition: color 0.2s; } .cf-close:hover { color: var(--cream); } .cf-close:focus-visible { color: var(--cream); outline: 2px solid var(--crimson); outline-offset: 2px; } .cf-title { font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.1; margin: 0 0 0.35rem; color: var(--cream); } .cf-intro { font-style: italic; color: var(--cream-70); font-size: 1.05rem; margin: 0 0 1.6rem; max-width: none; } .cf-form fieldset { border: none; margin: 0; padding: 0; } .cf-group { font-size: 1.15rem; font-weight: 600; color: var(--cream); padding: 0; margin-bottom: 0.5rem; } .cf-field { margin-bottom: 1.15rem; } .cf-field label { display: block; font-size: 1.08rem; font-weight: 600; color: var(--cream); margin-bottom: 0.4rem; } .cf-req { font-size: 0.82em; font-weight: 400; color: var(--cream-45); letter-spacing: 0.01em; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .cf-row .cf-field { margin-bottom: 1.15rem; } .cf-form input[type="text"], .cf-form input[type="email"], .cf-form textarea { width: 100%; background: #050505; border: 1px solid rgba(251, 248, 245, 0.34); color: var(--cream); font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; padding: 0.7rem 0.85rem; transition: border-color 0.2s; } .cf-form textarea { resize: vertical; min-height: 118px; } .cf-form input:focus, .cf-form textarea:focus { outline: none; border-color: var(--crimson); } .cf-form input:user-invalid, .cf-form textarea:user-invalid { border-color: rgba(175, 16, 28, 0.7); } /* Honeypot — hidden from humans */ .cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .cf-submit { display: block; width: 100%; margin-top: 0.6rem; background: var(--crimson); color: var(--cream); border: 1px solid var(--crimson); font-family: var(--serif); font-size: 1.35rem; font-style: italic; font-weight: 500; letter-spacing: 0.02em; padding: 0.85rem 1rem; cursor: pointer; transition: background 0.22s, color 0.22s; } .cf-submit:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .cf-submit:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; } .cf-submit:disabled { opacity: 0.6; cursor: default; } .cf-status { margin: 0.9rem 0 0; font-size: 1rem; color: var(--cream-70); min-height: 1.2em; max-width: none; } .cf-status.cf-error { color: #e46b73; } /* Success state */ .cf-success { text-align: center; padding: 1.5rem 0 0.5rem; } .cf-success h2 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; margin: 0 0 0.6rem; } .cf-success p { color: var(--cream-70); font-size: 1.15rem; margin: 0 auto 1.6rem; max-width: 30em; } .cf-success .cf-close-2 { background: none; border: 1px solid var(--cream-45); color: var(--cream); font-family: var(--serif); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding: 0.75rem 2rem; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .cf-success .cf-close-2:hover { border-color: var(--crimson); color: var(--crimson); } .cf-success .cf-close-2:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; } @media (max-width: 480px) { .cf-row { grid-template-columns: 1fr; gap: 0; } }