/* ============================================ CONTACT — contact.html Split hero (invitation panel + founders photo) → centered message form with an intent selector. Pairs with . ============================================ */ /* ----- HERO: two-panel split ----- */ .contact-hero { display: grid; grid-template-columns: 1.02fr 0.98fr; min-height: clamp(600px, 88vh, 860px); position: relative; isolation: isolate; } /* LEFT — dark Hampton Blue invitation + direct contact */ .contact-hero-copy { background: linear-gradient(158deg, var(--ink) 0%, #1b2942 52%, #243f63 100%); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: clamp(110px, 13vh, 168px) clamp(28px, 5.5vw, 92px) clamp(52px, 8vh, 96px); } .contact-hero-eyebrow { font-family: var(--font-heading); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 22px; } .contact-hero-copy h1 { font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.7rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 22px; } .contact-hero-copy h1 strong { font-weight: 700; } .contact-hero-lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.7; color: rgba(255, 255, 255, 0.74); max-width: 44ch; margin: 0 0 40px; } /* Maroon soul-accent hairline above the direct-contact rows */ .contact-hero-methods { list-style: none; margin: 0; padding: 32px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; gap: 20px; } .contact-method { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; } .contact-method-icon { width: 44px; height: 44px; border-radius: var(--r-circle); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; color: var(--white); } .contact-method-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .contact-method-label { display: block; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; } .contact-method-value, .contact-method-value a { font-size: 1.02rem; line-height: 1.45; color: var(--white); } .contact-method-value a { border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: border-color var(--t-base) var(--ease-soft); } .contact-method-value a:hover { border-bottom-color: var(--white); } /* RIGHT — founders photo, shown clean (faces not covered) */ .contact-hero-media { position: relative; overflow: hidden; background: var(--ink); } .contact-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; } /* Top scrim only — keeps the floating nav legible over the photo without darkening the founders' faces lower in the frame. */ .contact-hero-media::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 180px; background: linear-gradient(180deg, rgba(12, 20, 38, 0.55), transparent); z-index: 1; } .contact-hero-caption { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: rgba(18, 30, 54, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--white); font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.02em; } .contact-hero-caption strong { font-weight: 600; } .contact-hero-caption span { color: rgba(255, 255, 255, 0.6); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ----- FORM SECTION: centered centerpiece ----- */ .contact-form-section { background: var(--light-gray); padding: clamp(72px, 9vw, 128px) 0; } .contact-form-shell { max-width: 760px; margin: 0 auto; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(32px, 5vw, 64px); } .contact-form-head { text-align: center; margin-bottom: 36px; } .contact-form-head .section-label { margin-bottom: 12px; } .contact-form-head h2 { font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; } .contact-form-head h2 strong { font-weight: 700; } .contact-form-head p { font-size: 1rem; line-height: 1.65; color: var(--text-light); max-width: 46ch; margin: 0 auto; } /* Intent selector — accessible radio chips */ .intent-group { border: 0; padding: 0; margin: 0 0 28px; } .intent-legend { display: block; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-body); margin: 0 0 14px; padding: 0; } .intent-options { display: flex; flex-wrap: wrap; gap: 10px; } .intent-option { position: relative; } /* Visually hidden but focusable radio */ .intent-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .intent-option label { display: inline-block; cursor: pointer; padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--white); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; color: var(--text-body); transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft); } .intent-option label:hover { border-color: var(--accent); color: var(--accent); } .intent-option input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--white); } .intent-option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; } .contact-form .form-actions { margin-top: 28px; } .contact-form .form-actions .btn { width: 100%; } .contact-success { text-align: center; padding: 28px 8px; } .contact-success h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; } .contact-success p { font-size: 1.02rem; line-height: 1.7; color: var(--text-body); margin: 0; } /* ----- Responsive ----- */ @media (max-width: 860px) { .contact-hero { grid-template-columns: 1fr; min-height: 0; } /* Photo leads on mobile, then the invitation panel. */ .contact-hero-media { order: -1; min-height: 300px; } .contact-hero-media img { object-position: 50% 28%; } .contact-hero-copy { padding: 56px 24px 64px; } .contact-hero-caption { left: 16px; bottom: 16px; } } @media (max-width: 520px) { .contact-form-shell { padding: 28px 20px; border-radius: var(--r-md); } .intent-options { gap: 8px; } .intent-option label { padding: 10px 16px; font-size: 0.8rem; } }