/* =========================================================================== GET IN TOUCH — /get-in-touch/ (9/17) --------------------------------------------------------------------------- Built by scripts/build-get-in-touch.py. Design = concept A3 "Three steps" without the numeral icons (Brees' pick, canvas claude.ai/artifact/ 7Gem7ZFhHTn4nkfcxwLWTZ). Scoped to .page-contact and gt-* classes. Tokens only; verify.js reads this sheet, comments included. 1 hero white · 2 doors: indigo (top-right curve) | lime one step lower (top-left curve) · 3 Everything else: light blue, full width, top-left curve sweeping over both doors. Corner = --corner-3x (96 -> 240px), the site's section corner. Contrast: ink on white 13.3 · white on indigo 8.09 · oat on indigo 7.01 · ink on lime 8.95 (the lime button on indigo: ink text) · oat on ink (button) above 11 · ink on --sky-soft 12.3. =========================================================================== */ .page-contact { /* where the doors' copy lines up: the container's content edge, at any width */ --gt-edge: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))); --gt-step: clamp(40px, 6vw, 88px); /* how far the lime door sits below the indigo one */ } /* ---------------------------------------------------------------- 1. hero */ .gt-hero { position: relative; z-index: 1; isolation: isolate; /* clip BOTH axes: the pattern circle must not climb over the header or dip into the doors */ overflow: clip; /* 🔁 9/17 responsive pass — the site's hero top, `--section-pad * 0.5 + 43px` (the sticky header's clearance; see direction-d-v3.css `.hero`). This page was built on its own 1.1x multiple, which ran 9px tight under the header at 390 and 10px loose at 1536. Bottom padding is untouched. */ padding-block: calc(var(--section-pad) * 0.5 + 43px) var(--section-pad); background-color: var(--white); } .gt-hero__inner { position: relative; z-index: 1; } .gt-hero__h1 { margin: 0 0 var(--s-4); } .gt-hero__intro { max-width: 40rem; margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.5rem); } /* anchored to the hero's BOTTOM so only its top is cropped (under the header), never sliced flat at the doors */ .gt-hero__pattern { z-index: 0; width: clamp(260px, 30vw, 480px); aspect-ratio: 1; top: auto; bottom: clamp(24px, 3vw, 48px); right: -7%; } .gt-hero__discs { position: absolute; inset: 0; z-index: 0; isolation: isolate; pointer-events: none; } .gt-hero__disc { position: absolute; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; } .gt-hero__disc--petal { --d: clamp(80px, 9vw, 150px); width: var(--d); right: 22%; bottom: 16%; background-color: var(--petal); } .gt-hero__disc--lime { --d: clamp(100px, 11.5vw, 185px); width: var(--d); right: 15%; bottom: 7%; background-color: var(--lime); } @media (max-width: 899px) { .gt-hero { padding-bottom: calc(var(--section-pad) + 40px); } .gt-hero__disc--petal { --d: 64px; right: 26%; bottom: 20px; } .gt-hero__disc--lime { --d: 82px; right: 10%; bottom: 8px; } } @media (max-width: 599px) { .gt-hero__pattern { width: 220px; top: -96px; bottom: auto; right: -110px; } } /* ------------------------------------------------------- 2 + 3. the steps */ .gt-steps { position: relative; z-index: 2; display: grid; /* 🔴 WHITE, not transparent: a rounded corner reveals , which is --oat cream. The doors' curves must show the hero's white (as in the concept), so this wrapper paints it. */ background-color: var(--white); grid-template-columns: minmax(0, 1fr); } .gt-door { position: relative; display: flex; flex-direction: column; } .gt-door__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-block: calc(var(--section-pad) + 16px) calc(var(--section-pad) + var(--corner-3x)); padding-inline: var(--gt-edge); } .gt-door__h { max-width: 14ch; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } .gt-door__p { max-width: 26rem; margin: 0; font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.55; } .gt-door__btn { margin-top: var(--s-2); } .gt-door__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; } .gt-door--work { color: var(--white); background-color: var(--indigo); border-top-right-radius: var(--corner-3x); } .gt-door--work .gt-door__h { color: var(--white); } .gt-door--work .gt-door__p { color: var(--oat); } .gt-door--client { color: var(--ink); background-color: var(--lime); border-top-left-radius: var(--corner-3x); } .gt-door--client .gt-door__h, .gt-door--client .gt-door__p { color: var(--ink); } .gt-door--client .gt-door__btn:focus-visible { outline-color: var(--ink); } /* Stacked (phones, small tablets): the lime door pulls up over the indigo one by its corner, so its top-left curve reveals indigo; Everything else pulls up over lime the same way. */ .gt-door--client { margin-top: calc(-1 * var(--corner-3x)); } .gt-door--client .gt-door__inner { padding-top: calc(var(--section-pad) + var(--corner-3x) * 0.5); } .gt-else { position: relative; z-index: 1; margin-top: calc(-1 * var(--corner-3x)); border-top-left-radius: var(--corner-3x); background-color: var(--sky-soft); } .gt-else__inner { display: flex; flex-direction: column; gap: var(--s-2); padding-block: calc(var(--section-pad) + var(--corner-3x) * 0.35) var(--section-pad); padding-inline: var(--gt-edge); } .gt-else__h { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } .gt-else__p { max-width: 52rem; margin: 0; color: var(--ink); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.6; } .gt-else__link { color: var(--ink); /* Altivo, like the rest of the sentence (Brees 9/17) - not the display face */ font-family: var(--font-body); font-size: clamp(1.25rem, 2.1vw, 1.875rem); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; overflow-wrap: anywhere; } .gt-else__link--tel { white-space: nowrap; } .gt-else__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* Side by side (>= 900): indigo left, lime right one step lower, both running on under the light-blue step. */ @media (min-width: 900px) { .gt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gt-door__inner { padding-block: calc(var(--section-pad) + 16px) calc(var(--section-pad) + var(--corner-3x)); } .gt-door--work .gt-door__inner { padding-right: clamp(40px, 6.7vw, 96px); } .gt-door--client { margin-top: var(--gt-step); } .gt-door--client .gt-door__h { max-width: none; } .gt-door--client .gt-door__inner { padding-top: calc(var(--section-pad) + 16px); padding-left: clamp(48px, 7.6vw, 110px); } .gt-else { grid-column: 1 / -1; } /* the copy starts in from the curve, as in the concept (x 400 of 1440) */ .gt-else__inner { padding-left: max(var(--gt-edge), calc(var(--corner-3x) + 10vw)); } /* ONE LINE (Brees 9/17: the email + phone sentence "should be on one line"). Sizes ride the viewport so the line always fits beside the indent - measured 900 -> 2560 in the build notes; re-measure if the copy changes. */ .gt-else__p { max-width: none; white-space: nowrap; font-size: clamp(1rem, 1.3vw, 1.375rem); } .gt-else__link { font-size: clamp(1.0625rem, 1.75vw, 1.875rem); overflow-wrap: normal; } } /* ============================================================ CONTACT FORM (Everything else) Alie 9/21: "for the everything else page, I do think we need a contact form here". It sits UNDER the email + phone sentence, which is untouched: Brees 9/17 pinned that line to ONE LINE at >=900 with measured sizes, and re-writing it would mean re-measuring. 9/21: the hand-built form is gone - this is JotForm 262634825200047 embedded as its own iframe (Brees: "I'd like it to be embedded on there as it currently is"). The old input/label/button rules went with it. 🔴 NOTHING HERE CAN STYLE THE FIELDS. The iframe is cross-origin, so the form's look is set by its OWN custom CSS inside JotForm. These rules size the frame and nothing else - do not add field styling here expecting it to land. The embed handler sets the height inline; min-height only covers the moment before it runs. */ .gt-form__embed { width: 100%; max-width: 46rem; margin-top: var(--s-2); } .gt-form__frame { display: block; width: 100%; min-height: 560px; border: 0; } .gt-form__fallback { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }