/* /contact and /contact-thanks, ported from the reference build's page-contact.css (atlas-website/site/css/page-contact.css), which both pages load. Imported by Contact and ContactThanks, after site.base.css and site.system.css, as in the reference; the paper-deep ground itself is in site.system.css (_themes.css, keyed on the root's .atlas-contact). Scoped to .atlas-page. Breakpoints: 900 px is 991 px; the 600 px step stays. The contact form is native markup in the Form slot, outside the shadow root: the rules below for its fields (.contact-panel .field, .help, .check, .form-actions, .privacy-note) only apply in the local preview. In Webflow the same values come from contact.slotted.ts, on the document. */ /* ═══════════════════════════════════════════════════════════════ Atlas AI — /contact and /contact-thanks (round 3, 2026-09-29) Loaded after _system.css on both pages. Every rule is scoped to body.page-contact, so nothing reaches another page. /contact is one screen. The invitation and the direct contacts sit in the left column; the form sits on a lighter panel in the right column and starts level with the headline, so there is no gap between the opening copy and the fields. On phones the order is invitation, form, then the direct contacts. /contact-thanks is the confirmation and one strip of four places to learn more about Atlas AI. The grounds step up the palette ladder: paper-deep page (set in _themes.css), paper-alt panel and tiles, paper fields. No new hue. ═══════════════════════════════════════════════════════════════ */ /* ── Both pages: the opening ─────────────────────────────────── */ .atlas-page.atlas-contact .contact, .atlas-page.atlas-contact .thanks { padding: 64px 0 104px; } .atlas-page.atlas-contact .contact h1, .atlas-page.atlas-contact .thanks h1 { font: 400 clamp(38px, 4.4vw, 58px)/1.06 var(--serif); letter-spacing: -0.018em; margin: 18px 0 0; max-width: 20ch; text-wrap: balance; } .atlas-page.atlas-contact .standfirst { font: 400 clamp(19px, 1.6vw, 21px)/1.5 var(--serif); color: var(--ink-70); margin: 16px 0 0; max-width: 40ch; text-wrap: balance; } /* Small mono heading over a list: "Other ways to reach us", "More about Atlas AI" */ .atlas-page.atlas-contact .k-head { font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-64); margin: 0; } /* ── /contact: two columns ───────────────────────────────────── */ /* The form spans both rows on the right; the direct contacts drop to the bottom of the left column, level with the form's foot. */ .atlas-page.atlas-contact .contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro form" "direct form"; grid-template-rows: auto 1fr; column-gap: clamp(48px, 7vw, 96px); align-items: start; } .atlas-page.atlas-contact .contact-intro { grid-area: intro; } .atlas-page.atlas-contact .contact-panel { grid-area: form; background: var(--paper-alt); border: 1px solid var(--ink-14); padding: 34px 40px 30px; } .atlas-page.atlas-contact .contact-direct { grid-area: direct; align-self: end; margin-top: 56px; } /* The form, tightened for the panel */ .atlas-page.atlas-contact .contact-panel .field { margin-bottom: 20px; } .atlas-page.atlas-contact .contact-panel textarea { min-height: 128px; } .atlas-page.atlas-contact .contact-panel .help { color: var(--ink-64); } .atlas-page.atlas-contact .contact-panel .check { margin-top: 4px; } .atlas-page.atlas-contact .contact-panel .form-actions { margin-top: 22px; } .atlas-page.atlas-contact .contact-panel .privacy-note { color: var(--ink-64); margin-top: 16px; } /* Direct contacts: a compact list, mono label on the left */ .atlas-page.atlas-contact .direct-list { margin: 14px 0 0; border-top: 1px solid var(--ink-20); } .atlas-page.atlas-contact .direct-list > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--ink-14); } .atlas-page.atlas-contact .direct-list dt { font: 500 11px/24px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre-text); } .atlas-page.atlas-contact .direct-list dd { margin: 0; font: 400 15px/24px var(--sans); color: var(--ink-70); } .atlas-page.atlas-contact .direct-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-30); text-underline-offset: 3px; } .atlas-page.atlas-contact .direct-list a:hover { text-decoration-color: currentColor; } .atlas-page.atlas-contact .direct-list address { font-style: normal; } .atlas-page.atlas-contact .contact-direct .slot { margin-top: 20px; } /* ── /contact-thanks: one strip of four links ────────────────── */ /* Tiles joined by hairlines: the list's own background shows through the 1 px gaps. */ .atlas-page.atlas-contact .more { margin-top: 64px; } .atlas-page.atlas-contact .more-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: var(--ink-14); border: 1px solid var(--ink-14); } .atlas-page.atlas-contact .more-list a { display: flex; flex-direction: column; height: 100%; padding: 22px 24px 24px; background: var(--paper-alt); color: var(--ink); text-decoration: none; transition: background-color 0.15s ease; } .atlas-page.atlas-contact .more-list a:hover { background: var(--paper); } .atlas-page.atlas-contact .more-list a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .atlas-page.atlas-contact .more-list .kick { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre-text); } .atlas-page.atlas-contact .more-list .t { font: 400 21px/1.25 var(--serif); margin-top: 14px; } .atlas-page.atlas-contact .more-list .d { font: 400 14.5px/1.55 var(--sans); color: var(--ink-64); margin-top: 8px; } /* ── Tablet and phone ────────────────────────────────────────── */ @media (max-width: 991px) { .atlas-page.atlas-contact .contact, .atlas-page.atlas-contact .thanks { padding: 40px 0 72px; } .atlas-page.atlas-contact .contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "direct"; grid-template-rows: auto; } .atlas-page.atlas-contact .contact-panel { margin-top: 28px; } .atlas-page.atlas-contact .contact-direct { align-self: start; margin-top: 48px; } .atlas-page.atlas-contact .more { margin-top: 44px; } .atlas-page.atlas-contact .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .atlas-page.atlas-contact .contact h1, .atlas-page.atlas-contact .thanks h1 { font-size: 34px; } /* The form panel runs to the screen edges, so the fields keep the full content width */ .atlas-page.atlas-contact .contact-panel { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); padding: 26px var(--pad-x) 26px; border-left: 0; border-right: 0; } .atlas-page.atlas-contact .more-list { grid-template-columns: minmax(0, 1fr); } .atlas-page.atlas-contact .more-list a { padding: 18px 20px 20px; } .atlas-page.atlas-contact .more-list .t { font-size: 20px; margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { .atlas-page.atlas-contact .more-list a { transition: none; } } /* The panel sizes the shared form controls (nativeForm.slotted.ts) to the reference's: fields as tall as their 13px × 14px padding makes them, the submit as .btn-primary. Custom properties inherit into the slotted form. */ .atlas-page.atlas-contact .contact-panel { --wf-field-h: auto; --wf-field-pad: 13px 14px; --wf-submit-pad: 14px 20px; }