/* ========================================================================== contact-v2.css — page layer for /contact-us -------------------------------------------------------------------------- Scoped to `.nm-contact` on , loaded AFTER site-v2.css. Consumes the shared v2 tokens (site-v2.css §1) — declares no colours or type sizes of its own beyond composition values. Same page-layer pattern as enterprise-v2.css (scoped to `.nm-ent`). PAGE SHAPE 1. hero — copy column + "send us a message" form card (white) 2. channels — 6 direct-line cards (bg-light band) 3. final CTA + footer (shared, dark) Rhythm is NOT set here for section 2: `.section.pad-layout` + `.bg-light` are both in site-v2.css §6's lists, so that band gets its inter-section margin and internal padding from the shared layer. Only the hero needs local values, because `.contact-us-main` is a legacy container that sits outside §6's allowlist. The legacy `.contact-line` / `.contact-right-*` markup and CSS (notify-me.webflow.css) are left untouched — the 20 localized `public/{locale}/contact-us.html` pages still use them, so nothing here may assume they're gone site-wide. Radius follows DESIGN-SYSTEM.md "sharp shell, curved interior": the outer card/panel shells are square; everything nested inside them (inputs, select, textarea, the submit pill) is curved. ========================================================================== */ .nm-contact { --contact-gap: clamp(1.6rem, 1.6vw, 2.4rem); /* Form controls match the values the site's existing form component already ships (`.agency-form-*`, agency-page.css) so the two read as ONE input component rather than two. Tokenised here so the shape is set once. DESIGN-SYSTEM.md → Do: reuse core components; extend with a scoped modifier instead of cloning under a new name. */ --contact-field-radius: 2.4rem; --contact-field-h: 5.2rem; --contact-field-border: var(--_apps---colors--border); } /* ========================================================================== 1. HERO -------------------------------------------------------------------------- `.contact-us-main` is the legacy full-bleed container. site-v2.css §19 owns its horizontal gutter (three tiers, matching `.pad-layout`); this block owns only its vertical space. ========================================================================== */ .nm-contact .nm-contact-hero-sec { /* The nav is a transparent overlay on this page (`.nm-nav-overlay--light`), so the hero has to clear it itself — otherwise the eyebrow tucks under the bar. */ padding-top: calc(var(--nm-nav-h, 8rem) + clamp(4rem, 5vw, 7rem)); /* §6's model: each section owns the gap ABOVE it, bottoms are zeroed. The channels band below already brings its own `margin-top` rhythm, so a bottom padding here would double the seam. */ padding-bottom: 0; } .nm-contact .nm-contact-hero__grid { display: grid; /* The form is the page's primary action, so it takes the larger track. */ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(4rem, 6vw, 9rem); align-items: start; } .nm-contact .nm-contact-hero__copy .nm-contact-eyebrow { margin-bottom: 1.6rem; } .nm-contact .nm-contact-hero__copy .big-heading-n { margin-bottom: 2rem; max-width: 46rem; } /* The legacy `.big-heading-n.left-align.contact` modifier carries its own 7rem top/bottom padding, sized for the old layout where the h1 was the page's only element. With an eyebrow above and a lead below it reads as a stray gap on both sides — spacing is owned by the wrapper here. */ .nm-contact .nm-contact-hero__copy .big-heading-n.contact { padding-top: 0; padding-bottom: 0; } .nm-contact-hero__lead { margin: 0; max-width: 46rem; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--v2-muted); } .nm-contact-hero__alt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.8rem; margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--v2-line); font-size: var(--fs-body); color: var(--v2-muted); } /* ========================================================================== 2. THE FORM CARD ========================================================================== */ .nm-contact-formcard { padding: clamp(2.8rem, 3vw, 4rem); border: 1px solid var(--v2-line); background: var(--web-white); } .nm-contact-formcard__title { margin: 0 0 2.4rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .nm-contact-form__field { display: flex; flex-direction: column; /* §9b rule 9: a grid item's min-content size is its floor, so a long placeholder would push the track past the card. */ min-width: 0; } .nm-contact-form__field--full { grid-column: 1 / -1; } /* Honeypot: must be reachable by a naive bot's DOM walk but invisible and unfocusable for humans and screen readers. `display:none` is skipped by some bots, so take it out of flow instead. */ .nm-contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nm-contact-form__label { margin-bottom: 0.8rem; font-size: var(--fs-body-sm); font-weight: 500; color: var(--_apps---colors--foreground); } .nm-contact-form__req { color: var(--red); } .nm-contact-form__input, .nm-contact-form__select, .nm-contact-form__textarea { width: 100%; padding: 1.2rem 2rem; border: 1px solid var(--contact-field-border); border-radius: var(--contact-field-radius); background: #fff; font-family: var(--_apps---typography--body-font, "Inter Tight", sans-serif); font-size: var(--fs-body-lg); color: var(--_apps---colors--foreground); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nm-contact-form__input, .nm-contact-form__select { height: var(--contact-field-h); } .nm-contact-form__textarea { min-height: 13rem; padding-top: 1.6rem; line-height: var(--lh-body); resize: vertical; } /* Visible focus is an accessibility requirement, not decoration — a colour change alone is too quiet on a white card, so pair it with a ring. */ .nm-contact-form__input:focus, .nm-contact-form__select:focus, .nm-contact-form__textarea:focus { outline: none; border-color: var(--v2-blue); box-shadow: 0 0 0 3px rgba(0, 59, 175, 0.12); } .nm-contact-form__input::placeholder, .nm-contact-form__textarea::placeholder { color: var(--v2-muted); opacity: 0.75; } /* `.blue-button` is the shared section-CTA component (DESIGN-SYSTEM.md → Buttons). It ships block-level, which inside a grid column would stretch it to the full row and stop it reading as a control. Layout glue only — no colour, no hover (§4 owns the canonical scale hover). */ .nm-contact-form__submit { /* The field wrapper is a FLEX COLUMN, so `justify-self` is inert here and the default `align-items: stretch` blew the pill out to the full card width — it read as a banner, not a control. `align-self` is the axis that actually applies. */ align-self: flex-start; width: auto; cursor: pointer; } .nm-contact-form__fineprint { margin: 1.6rem 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--v2-muted); } .nm-contact-form__fineprint a { color: var(--v2-blue); } /* ---- submit states ------------------------------------------------------ `js/form-handler.js` hides the form and reveals `.success-message` / `.error-message` (its own selectors — do not rename these classes). */ .nm-contact-form__done, .nm-contact-form__error { display: none; } .nm-contact-form__done h3 { margin: 0 0 1rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); color: var(--_apps---colors--foreground); } .nm-contact-form__done p, .nm-contact-form__error p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-contact-form__done a, .nm-contact-form__error a { color: var(--v2-blue); } /* ========================================================================== 3. CHANNEL LIST -------------------------------------------------------------------------- Deliberately NOT cards. Seven bordered boxes with a pictogram each read as a busy dashboard, and the boxes carried no information — the shell was the loudest thing on the page while the actual content (a team and an address) is two short lines. So: no box, no shadow, no icon, no per-item eyebrow. Each channel is a column under a single hairline rule, which is the house minimal idiom already in use for the enterprise onboarding steps (`.nm-ent-step`, enterprise-v2.css section 5). The grid's own alignment does the work the borders were doing. ========================================================================== */ .nm-contact .nm-contact-channels__head { width: 100%; margin-bottom: clamp(3.2rem, 4vw, 4.8rem); } .nm-contact .nm-contact-channels__head .nm-contact-eyebrow { margin-bottom: 1.6rem; } /* Left-aligned eyebrow drops its leading rule — a rule before a flush-left block reads as an indent (same rule site-v2.css §12 applies to heroes). */ .nm-contact .nm-contact-channels__head .nm-contact-eyebrow::before { display: none; } .nm-contact .nm-contact-channels__head .big-heading-n { margin: 0; text-align: left; } .nm-contact-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Column gap is generous, row gap larger still: with no boxes, SPACE is the only thing separating one channel from the next, so the vertical break has to be unmistakably bigger than the gap inside an entry. */ column-gap: clamp(2.4rem, 4vw, 6rem); row-gap: clamp(4rem, 5vw, 6rem); } .nm-contact-card { display: flex; flex-direction: column; padding-top: 2rem; border-top: 1px solid var(--v2-line); } /* `.hide-release` is `display:none` at (0,1,0) — the same specificity as `.nm-contact-card`'s `display:flex`, and this file loads later, so the cascade would re-show it. Restate at (0,2,0). The Sales card stays in the DOM, ready to switch on, but drops out of the grid so it leaves no gap. */ .nm-contact-card.hide-release { display: none; } .nm-contact-card__title { margin: 0 0 0.8rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-contact-card__copy { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } /* `margin-top:auto` pins the links to the column's floor so they sit on one baseline across a row even when the copy above wraps to different depths — without the boxes, a ragged link row is the only thing that would read as misalignment. */ .nm-contact-card__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: auto; padding-top: 1.6rem; } .nm-contact-card__link { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--v2-blue); text-decoration: none; transition: color 0.2s ease; } .nm-contact-card__link:hover { color: var(--v2-blue-bright); } /* ========================================================================== 4. RESPONSIVE ========================================================================== */ @media (max-width: 1199px) { .nm-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991px) { /* The form stops being a side-by-side partner and becomes the next thing you scroll to. Copy column un-caps so it uses the full measure. */ .nm-contact .nm-contact-hero__grid { grid-template-columns: minmax(0, 1fr); } .nm-contact .nm-contact-hero__copy .big-heading-n, .nm-contact-hero__lead { max-width: 62rem; } } @media (max-width: 767px) { .nm-contact-grid { grid-template-columns: minmax(0, 1fr); } /* One column of controls — two 50% fields inside a ~330px card leave no room for either label. */ .nm-contact-form { grid-template-columns: minmax(0, 1fr); } .nm-contact-formcard { padding: 2.4rem 2rem; } .nm-contact-form__submit { width: 100%; align-self: stretch; } }