/* ========================================================================= /contact, on the site's palette and rhythm. The hero and the three problem cards were the strong part and keep their shape. The form was the problem: a large administrative box inside another large administrative box, with a second copy of the question the cards had already asked. ========================================================================= */ .ct12{ --ct-ground:#171413; --ct-ground-dark:#0F0D0C; --ct-cream:#F6F1EA; --ct-accent:#B28479; --ct-accent-hi:#C99084; --ct-inset:clamp(44px,8vw,120px); --ct-rule:rgba(246,241,234,.10); background:var(--ct-ground-dark); color:var(--ct-cream); } .ct12 *{box-sizing:border-box} .ct12-wrap{width:100%;padding:0 var(--ct-inset)} /* the shared mobile gutter -- see the note in blog-n12.css */ @media(max-width:1024px){ .ct12{--ct-inset:32px} } @media(max-width:640px){ .ct12{--ct-inset:20px} } .ct12-eyebrow{ display:block; font-family:'Questrial',sans-serif; font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:rgba(246,241,234,.7);margin:0; } .ct12 h2{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:clamp(30px,3.2vw,38px);line-height:1.04;letter-spacing:-.035em; text-transform:lowercase;color:var(--ct-cream); margin:14px 0 20px; } /* ------------------------------- the hero ------------------------------- Untouched in substance: the neon 12 and "what's next?" were the best things on the page. */ .ct12-hero{ position:relative;display:flex;align-items:flex-start;overflow:hidden; /* THE HERO CARRIES THE CHOICES NOW, so it is not the 340px label it was a moment ago -- it is the first screen, and everything a visitor can act on is inside it. The page still opens once rather than twice, which was the point. */ min-height:0; /* 151px at the top -- the blog masthead's number, shared by all four rebuilt heroes so their type starts on the same line. 64px at the bottom, down from 180. That tail was sized for a hero whose picture ran on well past the cards, with the form climbing over the last of it. The picture now finishes before the hero does -- see the mask below -- so the tail was just distance: the form was sitting under the whole image instead of under the cards. The band below still pulls up 110, so the gap from the last card to the form panel is about 56px. */ padding:151px var(--ct-inset) 64px; /* IT HAS TO END ON THE COLOUR THAT FOLLOWS IT. The hero's ground was --ct-ground-dark (#0F0D0C) and the form band below is --ct-ground (#171413), so the picture faded out onto one dark and the page then stepped to a lighter one -- a band of a third colour between the photograph and the next section, which is what she is seeing. A gradient, not a swap: the masthead still wants the darker ground under it, as it has on every other page, and by 520px -- before the picture's own fade finishes at 565 -- this is already --ct-ground, so the two meet on the same value and there is nothing to see. */ background:linear-gradient(180deg, var(--ct-ground-dark) 0px, var(--ct-ground-dark) 340px, var(--ct-ground) 520px); } /* THE NEON 12 STAYS, BUT AS A TEXTURE. "No decorative hero image necessary" is true of a 340px functional band -- but deleting it leaves a flat panel, and the glow is the one thing that told you which page you were on. Held well back instead: darker, further right, out of the way of the copy. */ /* THE SKY, AND ONLY THE SKY. The plate is 1678x937 with the neon standing at 20% across and 77% down. The hero uses the top 640 rows of it -- Milky Way, horizon glow, the first line of rocks -- which is 2.62:1, close to the hero's own shape, and has no 12 anywhere in it. The neon appears exactly once on this page, further down, inside the form. That is also why this is a build-time crop rather than a background-position: the hero is wider than the plate, so cover fits it by WIDTH and the vertical crop is whatever is left. There is no number you can write in background-position that keeps a feature at 77% out of a window that tall. */ /* THE PICTURE LIVES IN THE HERO, BEHIND THE CARDS, and fades out to the page's own colour before the form starts. One photograph on the page, at the top, where the scene can be a scene -- and the form below it sits on flat ground, which is what a form should sit on. The neon tube measures 76.6% across and 55.9% down this plate and is 22.8% of its width, so `cover` puts it in the right-hand third with the cards' third column in front of it. */ /* THE SAME TREATMENT THE ABOUT HERO GOT. Every previous attempt here fought `cover`: the layer was the HERO's shape, so the plate was cropped to fit it and the 12 landed wherever the arithmetic put it -- which changed with the viewport, because a height-based size renders a constant width while the cards, a centred 1,010px block, walk right as the screen grows. Tuned at 1440 it was behind card three at 1728. Given the PICTURE's aspect-ratio the layer IS the picture: `cover` fills it exactly, nothing is cropped, and every feature sits at a fixed FRACTION of the width -- so the 12 is in the same place relative to the cards at 1280 and at 2560. The mask fades it into the page's own dark at the top and out again at the bottom, so it has no edges, and the dimming is the layer's own brightness. */ .ct12-hero::before{ content:"";position:absolute;top:0;left:0;z-index:0; /* 2.4:1, NOT THE PLATE'S OWN 2:1 -- and that is a crop, not a squeeze. The hero shows a 574px window; a 2:1 frame is half the viewport tall, so at 1728 it is 864 and most of its lower half falls outside that window, with the 12 at 53% down landing in the fade. Cropping 148px of sky off the TOP shortens the frame without moving the number, which raises its fraction to 44% and brings it up into the band: measured, the 12 now spans y154-311 at 1280 and y231-467 at 1920, clear of both the fade and the cut at every width. */ width:100%;aspect-ratio:1774 / 739;height:auto; background-image:url('/assets/images/contact-hero-desert3-1800.jpg'); /* GRAIN OVER THE PICTURE, AND WHY IT IS HERE. The plate is 1774px wide and this layer paints it at 115% of the viewport -- 1987px at 1728, and twice that in device pixels on a 2x screen. There are no more pixels to be had: the source render is 1774 across, so the hero is being asked to cover about twice its own resolution and it goes soft. Nothing in CSS adds detail that is not in the file. What CSS can do is stop the softness reading as a mistake. A fine tiled feTurbulence gives the frame a grain, and a soft image with grain reads as atmosphere where a soft image without it reads as a low-resolution image. It is the same answer, and the same filter, the planning video and the software hero already use for their banding -- see software-app.css. First in the list, so it sits ON the photograph. Slightly stronger than the 2.8% used elsewhere because this layer runs under brightness(.55), which takes the grain down with the picture. */ background-image: url("data:image/svg+xml;utf8,\ \ \ "), image-set( url('/assets/images/contact-hero-desert3-1800.avif') type("image/avif"), url('/assets/images/contact-hero-desert3-1800.webp') type("image/webp"), url('/assets/images/contact-hero-desert3-1800.jpg') type("image/jpeg")); background-repeat:repeat, no-repeat; /* 115%, NOT cover. At cover the frame is drawn exactly the width of the page and the 12, which sits at 78.1% across the plate, lands at 0.781 x vw -- 1350 at 1728, where the cards end at 1369. It straddled the last card instead of sitting beside it. Zooming to 115% moves it to 0.781 x 1.15 x vw = 0.898 x vw: 1552 at 1728, 1293 at 1440, always right of (vw + 1010) / 2, which is where the cards stop. The number gets bigger with the zoom, which is the other half of what she asked for. */ /* the grain tiles at its own size; the plate keeps the 115% that places the 12 beside the third card */ background-size:160px 160px, 115% auto; background-position:0 0, 0% 0%; filter:saturate(.86) brightness(.55); /* NO EDGES, AND THE STOPS ARE IN PIXELS ON PURPOSE. The layer is the picture's own 2:1, so it is half the VIEWPORT tall -- 640 at 1280, 960 at 1920 -- while the hero is its own content at 574 whatever the screen. The hero clips the picture, so the fade has to be finished before 574 at every width. A percentage cannot do that: it is a fraction of the PICTURE, so it moves down the screen as the screen widens. 75% was 480 at 1280 and 720 at 1920 -- inside the hero at one end and well past the cut at the other, which is a hard edge across the bottom of a 1920 screen. BUT PIXELS ALONE BREAK THE OTHER WAY. This layer is the viewport over 2.4, so it is SHORTER than the hero below about 1356px: at 1180 it is 491 tall while a 565px fade is still 87% opaque there, and the picture's own bottom edge becomes the line -- which is exactly what happens when the window is dragged narrower. So the end of the fade is whichever comes first, the layer's own bottom or the hero's cut: min(97%, 565px) 97% of the layer at narrow widths, a flat 565 once the layer is taller than the hero. The fade is always 90px long and always finishes on something transparent. Checked from 1180 to 1920. The 12 stays clear of it: it sits at 29-58% of the frame, which is y163-329 at 1180 against a fade starting at 387. */ AND THE TOP FADE IS 150px, not 64. The hero's ground under it is --ct-ground-dark, the same near-black the masthead sits on across the rest of the site, so lengthening this is what puts the wordmark and the nav on that colour instead of on a lit starfield. The eyebrow lands at 157 and the headline at 190, both on the last of the fade, which is also the cleanest ground either of them has had. */ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0px, #000 150px, #000 calc(min(97%, 565px) - 90px), rgba(0,0,0,0) min(97%, 565px)); mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0px, #000 150px, #000 calc(min(97%, 565px) - 90px), rgba(0,0,0,0) min(97%, 565px)); } /* NO min-height. It was here so the whole 2:1 frame would fit inside the hero, which at 1728 made the hero 864 tall against 505 of cards -- 250px of picture with nothing on it, and the form pushed below all of it. The mask above finishes the picture at 75% instead, so the hero can go back to being its own content and the form can sit where it belongs: just under the cards. */ /* ONE JOB NOW: the headline's contrast. The vertical scrim that used to be here closed the picture into --ct-ground by the foot of the hero; the layer's own mask does that, tied to the picture rather than to the box, so a second gradient would only be darkening the ground it had already reached. What is left is a pool behind the copy, which the sky underneath still needs. */ .ct12-hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 62% 26% at 50% 20%, rgba(15,13,12,.8) 0%, rgba(15,13,12,.54) 48%, rgba(15,13,12,.16) 78%, rgba(15,13,12,0) 100%); } /* CENTRED, like blog, pricing and about. This was the last hero on the site still setting its type hard left, and moving between pages the headline jumped sideways. The centring is on the three elements of the headline, NOT on .ct12-hero-copy -- the checkbox cards are inside that same block and they inherit, which centred every card's number, title and body. */ .ct12-hero-copy{ position:relative;z-index:2;align-self:stretch; max-width:none;width:100%;margin:0;text-align:left; } .ct12-hero .ct12-eyebrow, .ct12-hero-copy > h1, .ct12-hero-copy > p{text-align:center} /* the sentence keeps a measure, and now centres inside the block rather than hanging off its left edge */ .ct12-hero-copy > p{max-width:56ch;margin-left:auto;margin-right:auto} .ct12-hero h1{ font-family:'League Spartan',sans-serif;font-weight:700; /* smaller than every other h1 on the site, deliberately: this is a label on a form, not a proposition */ font-size:var(--n12-h1);line-height:1.02;letter-spacing:-.035em; text-transform:lowercase;color:var(--ct-cream); margin:11px 0 13px; } .ct12-hero p{ margin:0 auto;max-width:56ch; font-family:'Questrial',sans-serif; font-size:15px;line-height:24px;color:rgba(246,241,234,.68); } /* ------------------------------ the bands ------------------------------ */ /* 80px into the first band, not 118. The transition after a hero is the one place the 118px rhythm reads as a gap rather than as air -- there is nothing above it to breathe away from. Bands BETWEEN sections keep 118; only the first one after the hero is tightened. */ .ct12-band{padding:118px 0;position:relative} /* 56, not 80: the cards are what this page is for and they should be in view without scrolling. */ .ct12-hero + .ct12-band{padding-top:56px} /* THE FORM CLIMBS BACK OVER THE HERO. -118px pulls the band up into the hero's tail, so "tell us what's going on" begins on the photograph and the picture is still behind it as it resolves into the page. The band's own ground fades in over the next 150px, which is what "fades out into the background colour" means here -- there is no edge anywhere, just the picture becoming the page. z-index because the hero's scrim is z-index 1 and would otherwise paint over a band that arrives later in the document but sits in the same space. (0,2,0) on the padding rule, because .ct12-hero + .ct12-band is the same weight and earlier in the file -- a bare .ct12-band--tight is (0,1,0) and loses, which is why its 51px had never actually applied. */ /* SOLID GROUND, NOT A FADE-IN. This band used to climb over a hero that still had a photograph in it at this point, so it had to arrive transparent and resolve to --ct-ground 172px later. The hero's own scrim now closes on --ct-ground exactly where this band begins, so there is nothing to fade over -- and the old gradient, still part-way through at the hero's bottom edge, was drawing the line. */ .ct12-hero + .ct12-band--tight{ position:relative;z-index:2; /* 0, not -110. The pull existed so the form could climb over a hero whose picture ran on past the cards; the hero's tail is 64px now and the picture finishes inside it, so -110 was lifting the form 46px ABOVE the last card and covering it. At 0 the gap from the cards to the form panel is the hero's own tail: 64px. */ margin-top:0;padding-top:0; background:var(--ct-ground); } .ct12-band--lift{background:var(--ct-ground)} .ct12-band--dark{background:var(--ct-ground-dark)} /* THE CARDS AND THE FORM ARE ONE CONTINUOUS IDEA. Left as two full bands they had 118 + 118 = 236px of nothing between them, which read as the end of the page. --joined drops the first band's bottom padding and --tight halves the second's top, so the step is 56px. */ .ct12-band--joined{padding-bottom:0} /* 51, to match the space above the skip line. The form's own 26px top margin is dropped rather than added to this, so the number here is the whole gap and not two thirds of it. */ .ct12-band--tight{padding-top:51px} .ct12-band--tight .ct12-form{margin-top:0} /* --------------------------- the problem cards --------------------------- Real checkboxes, because more than one can be true. The label IS the card, so the whole card is the hit area and the focus ring belongs to the input. */ .ct12-routes{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); /* the same 1,010 as the form below them -- the cards are its first question, so they share its width rather than running wider than the thing they belong to */ max-width:1010px; border:0;padding:0;margin:34px auto 0; } /* inside the hero the cards sit over a photograph, so they need a ground of their own rather than the 2% wash that works on a band */ .ct12-hero .ct12-route{ background:rgba(15,13,12,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .ct12-hero .ct12-route:hover{background:rgba(15,13,12,.74)} .ct12-hero .ct12-route:has(input:checked), .ct12-hero .ct12-route.is-on{background:rgba(178,132,121,.20)} .ct12-route{ position:relative;display:block;cursor:pointer; padding:26px 26px 24px; border:1px solid var(--ct-rule); background:rgba(246,241,234,.022); transition:border-color .2s ease,background-color .2s ease; } .ct12-route:hover{border-color:rgba(246,241,234,.26);background:rgba(246,241,234,.04)} .ct12-route input{ position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none; } /* SELECTED IS A VISIBLE STATE, not a changed icon. The old card moved a tiny + to a tiny check and left everything else identical, so at a glance nothing had happened. */ .ct12-route:has(input:checked), .ct12-route.is-on{ border-color:var(--ct-accent); background:rgba(178,132,121,.10); } .ct12-route:has(input:focus-visible){ outline:2px solid var(--ct-accent);outline-offset:3px; } .ct12-route-n{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:12px;letter-spacing:.16em;color:var(--ct-accent); } .ct12-route strong{ display:block;margin:18px 0 10px; font-family:'League Spartan',sans-serif;font-weight:700; font-size:22px;line-height:1.08;letter-spacing:-.03em; text-transform:lowercase;color:var(--ct-cream); } .ct12-route small{ display:block;max-width:40ch; font-family:'Questrial',sans-serif; font-size:14.5px;line-height:1.55;color:rgba(246,241,234,.76); } .ct12-route-mark{ position:absolute;top:22px;right:24px; display:grid;place-items:center; width:24px;height:24px;border-radius:50%; border:1px solid rgba(246,241,234,.28); font-family:'Questrial',sans-serif;font-size:15px;line-height:1; color:rgba(246,241,234,.6); transition:background-color .18s ease,border-color .18s ease,color .18s ease; } /* THE PLUS IS DRAWN, NOT TYPESET. A "+" glyph sits on the font's maths axis, which is above the middle of its line box -- so place-items: center centred the BOX and left the visible cross a couple of pixels high inside a 24px circle. Two gradient bars are geometrically centred by construction, and the same is true of the tick, which is a rotated corner rather than U+2713. */ /* ON WHOLE PIXELS. A 1.4px bar centred in a 9px box starts at 3.8 and ends at 5.2, so both strokes of the cross straddled a pixel boundary and the browser drew each of them as two half-lit rows -- a soft, lopsided plus inside a crisp 1px ring. 11 and 1 put the offset at exactly 5: one pixel, fully lit, the same weight as the ring. */ .ct12-route-mark::after{ content:"";display:block; width:11px;height:11px; background: linear-gradient(currentColor,currentColor) center/11px 1px no-repeat, linear-gradient(currentColor,currentColor) center/1px 11px no-repeat; } .ct12-route:has(input:checked) .ct12-route-mark, .ct12-route.is-on .ct12-route-mark{ background:var(--ct-accent);border-color:var(--ct-accent);color:#171413; } .ct12-route:has(input:checked) .ct12-route-mark::after, .ct12-route.is-on .ct12-route-mark::after{ width:5px;height:9px; background:none; border:solid currentColor;border-width:0 1.6px 1.6px 0; transform:translate(0,-1px) rotate(45deg); } .ct12-skip{ margin:20px 0 0; } /* THE "NOT SURE YET?" LINE SITS BETWEEN THE TWO BLOCKS, not under the first one. Measured: 20px above it and 82px below, so it read as a footnote to the cards rather than as the bridge to the form. 51 each side. The total gap is unchanged at 125px -- the line just stops belonging to the block above it. */ .ct12-routes + .ct12-skip{ margin-top:51px; font-family:'Questrial',sans-serif; font-size:15px;line-height:1.55;color:rgba(246,241,234,.7); } .ct12-skip a{ color:var(--ct-cream);text-decoration:none; border-bottom:1px solid rgba(246,241,234,.3); } .ct12-skip a:hover{border-bottom-color:var(--ct-cream)} /* ------------------------------- the form ------------------------------- TWO COLUMNS, ONE BORDER. What it is for on the left, the fields on the right, and no box inside the box: the field rows are separated by the space between them rather than by a rule each. */ /* ONE COLUMN. The two-column grid existed to stand the fields beside an intro block -- an eyebrow, a heading and a paragraph -- that has been deleted: it restated the question the cards above had already asked. With nothing in the left column the fields take the panel, which is also what lets them keep a sane measure rather than being squeezed into 1.18 of 2 fractions. */ .ct12-form{ display:block; /* NARROWER THAN THE WRAP, and centred. At the full 1,210 the fields were a wall and the picture behind them had nowhere to show; 1,010 leaves 100px of desert either side and brings the form closer to a readable measure. */ max-width:1010px; margin:26px auto 0;padding:clamp(30px,3.4vw,46px); border:1px solid var(--ct-rule); background:rgba(246,241,234,.022); } /* ------------------------- THE NEON, BEHIND IT ------------------------- IT IS THE PAGE, NOT PART OF THE FORM. The first version hung the patch off .ct12-form-intro::after, which made it a decoration inside the left column -- it stopped where the copy stopped and the form sat NEXT TO it. What it should be is the ground the whole band is standing on, with the form on top of it and the 12 reading straight through the panel. So it moves to the band's own ::before: full width, full height, behind everything, and scaled up so the neon is a few hundred pixels tall instead of a hundred. THREE THINGS MAKE IT WORK AS BACKGROUND RATHER THAN AS A PHOTOGRAPH: 1. mix-blend-mode:screen. Every pixel darker than the page vanishes into it, so there is no rectangle of "slightly different dark" -- only the neon, the glow on the sand and the horizon survive. 2. A 50%/50% ellipse mask, which reaches transparent exactly at all four edges of the band. The patch is built with the neon composited dead centre and the rest padded black for this reason; an off-centre mask has to be bigger than the box to cover its subject, and a mask bigger than its box never fades at all. 3. The form keeps its 2.2% cream fill, so the 12 shows through the panel instead of stopping at its border. */ /* TWO LAYERS: THE SCENE, AND THE NEON ON TOP OF IT. This is the about band's treatment -- a photograph filling the whole section and fading out on every side -- except that here the subject has to land in a specific place, so it comes in as its own layer. layer 1 the neon patch, placed right of the field column layer 2 the desert and the stars, full bleed One element, so one mask covers both and the fade is genuinely all-angles rather than two separate vignettes. mix-blend-mode:screen on the pair means every pixel darker than the page disappears into it: no rectangle, no seam, and the black padding around the neon in layer 1 costs nothing. ONE LAYER NOW. The two-layer build existed because the old plate had its 12 at 20% across and 77% down, so the only way to get the number where the form needed it was to cut it out and place it separately -- and a 160px region blown up to 300 was never going to be sharp. The new plate is shot the way the page needs it: desert, Milky Way and the 12 standing on the right of the frame, so the scene and the subject are the same image and nothing is upscaled. */ .ct12-hero + .ct12-band--tight::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; /* NO PICTURE HERE ANY MORE. The scene has moved up into the hero, behind the cards, and fades to --ct-ground before this band starts. One photograph on the page: the form sits on flat colour, which is what a form should sit on, and there is no second horizon to read as the background repeating. The element stays so the band keeps its stacking context and the .ct12-wrap rule below still has something to sit on top of. */ background:none; } /* the form rides on top of it */ .ct12-hero + .ct12-band--tight > .ct12-wrap{position:relative;z-index:1} /* THE CHIPS. What the cards above selected, shown once, removable -- instead of a second "what sounds familiar?" field that filled itself in and made three mysterious things select themselves. */ /* 0 0 28px, not 26px 0 0. The chips are the first thing in the form now, so a top margin pushed them away from nothing and left them sitting on the FIRST NAME label -- the margin belongs underneath. */ .ct12-chosen{margin:0 0 28px} .ct12-chosen[hidden]{display:none} .ct12-chosen > span{ display:block;margin:0 0 10px; font-family:'Questrial',sans-serif; font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:rgba(246,241,234,.62); } .ct12-chips{display:flex;gap:8px;flex-wrap:wrap} .ct12-chip{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; padding:6px 10px 6px 13px;border-radius:999px; border:1px solid rgba(178,132,121,.5); background:rgba(178,132,121,.12); font-family:'Questrial',sans-serif; font-size:13px;letter-spacing:.02em;color:var(--ct-accent-hi); transition:background-color .18s ease; } .ct12-chip:hover{background:rgba(178,132,121,.22)} .ct12-chip b{font-weight:400} .ct12-chip i{font-style:normal;font-size:15px;line-height:1;opacity:.8} .ct12-chip:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px} .ct12-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .ct12-field{display:block} .ct12-field--wide{grid-column:1 / -1} .ct12-field > span{ display:block;margin:0 0 7px; font-family:'Questrial',sans-serif; font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; /* was .48 cream. Labels are the one thing on a form nobody should have to squint at. */ color:rgba(246,241,234,.78); } .ct12-field em{ font-style:normal;font-weight:400;letter-spacing:.04em; color:rgba(246,241,234,.5); } .ct12-field input, .ct12-field select, .ct12-field textarea{ width:100%; padding:12px 14px; border:1px solid rgba(246,241,234,.18); background:rgba(15,13,12,.5); font-family:'Questrial',sans-serif; /* 16px, NOT 14. Anything under 16 makes iOS Safari zoom the page on focus and the visitor has to pinch back out. */ font-size:16px;line-height:1.45;color:var(--ct-cream); transition:border-color .18s ease,background-color .18s ease; } .ct12-field textarea{resize:vertical;min-height:132px} .ct12-field input::placeholder, .ct12-field textarea::placeholder{color:rgba(246,241,234,.38)} .ct12-field input:focus, .ct12-field select:focus, .ct12-field textarea:focus{ outline:none;border-color:var(--ct-accent);background:rgba(15,13,12,.72); } .ct12-field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,rgba(246,241,234,.5) 50%), linear-gradient(135deg,rgba(246,241,234,.5) 50%,transparent 50%); background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .ct12-field.is-bad input, .ct12-field.is-bad select, .ct12-field.is-bad textarea{border-color:#C46A5C} /* NOT UPPERCASE -- and it has to out-specify the label to say so. .ct12-field > span is the label rule, the error is also a direct span child, and (0,1,1) beats (0,1,0), so a plain .ct12-error lost and the validation shouted "THIS ONE WE DO NEED." at people. */ .ct12-field > .ct12-error{ display:block;margin:6px 0 0; font-family:'Questrial',sans-serif; font-size:13px;font-weight:400; letter-spacing:0;text-transform:none; color:#E0897B; } .ct12-error[hidden]{display:none} /* the honeypot: off-screen, not display:none, so a bot filling every field finds it and a screen reader does not announce it */ .ct12-pot{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; } .ct12-submit{ grid-column:1 / -1; display:flex;align-items:center;gap:20px;flex-wrap:wrap; margin:6px 0 0; } .ct12-submit button{ display:inline-flex;align-items:center;gap:10px;cursor:pointer; padding:14px 26px; border:1px solid var(--ct-cream);background:var(--ct-cream); font-family:'Questrial',sans-serif;font-size:15px;font-weight:700; letter-spacing:.02em;color:#171413; transition:background-color .2s ease,opacity .2s ease; } .ct12-submit button:hover{background:#fff} .ct12-submit button[disabled]{opacity:.55;cursor:default} .ct12-submit button svg{width:17px;height:17px;transition:transform .2s ease} .ct12-submit button:not([disabled]):hover svg{transform:translateX(4px)} .ct12-note{ margin:0;max-width:40ch; font-family:'Questrial',sans-serif; font-size:13.5px;line-height:1.5;color:rgba(246,241,234,.66); } .ct12-note a{color:rgba(246,241,234,.86)} /* ----------------------------- the success ----------------------------- */ .ct12-done{ grid-column:1 / -1; max-width:52ch; } .ct12-done[hidden]{display:none} .ct12-done h2{margin-top:14px} .ct12-done p{ margin:0 0 26px; font-family:'Questrial',sans-serif; font-size:16px;line-height:1.62;color:rgba(246,241,234,.8); } /* -------------------------- other ways to reach -------------------------- */ .ct12-other{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;margin:26px 0 0; border-top:1px solid var(--ct-rule); border-left:1px solid var(--ct-rule); } .ct12-other > div{ padding:28px clamp(20px,2.2vw,30px) 26px; border-right:1px solid var(--ct-rule); border-bottom:1px solid var(--ct-rule); } .ct12-other svg.ct12-ico{width:22px;height:22px;stroke:var(--ct-accent);fill:none} .ct12-other h3{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:18px;line-height:1.1;letter-spacing:-.025em; text-transform:lowercase;color:var(--ct-cream); margin:16px 0 10px; } .ct12-other a{ font-family:'Questrial',sans-serif; font-size:15px;color:rgba(246,241,234,.82);text-decoration:none; border-bottom:1px solid rgba(246,241,234,.22); } .ct12-other a:hover{color:var(--ct-cream);border-bottom-color:var(--ct-cream)} .ct12-social{display:flex;align-items:center;gap:14px} .ct12-social a{border:0;display:inline-flex} .ct12-social svg{width:21px;height:21px;color:rgba(246,241,234,.78)} .ct12-social a:hover svg{color:var(--ct-cream)} /* ------------------------------- narrower ------------------------------- */ @media(max-width:1024px){ .ct12-routes{grid-template-columns:1fr} .ct12-form{grid-template-columns:1fr;gap:32px 0} .ct12-other{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ /* THE SHORTHAND UNDOES --joined. .ct12-band{padding:76px 0} is a shorthand and it sits after the modifier in the cascade, so the cards band got its 76px bottom padding back at phone width and the skip line ended up 63px under the cards and 108px above the form -- the same imbalance, only larger. Both restated here. */ .ct12-band{padding:76px 0} .ct12-band--joined{padding-bottom:0} .ct12-routes + .ct12-skip{margin-top:40px} /* 112px, the blog masthead's phone number. The tail is shorter here -- 150px rather than 236 -- because a phone hero is already a screen and a half by the time the third card ends. */ .ct12-hero{min-height:0;padding:128px var(--ct-inset) 150px} /* A 390px frame against a 1.46:1 plate fits by HEIGHT, so cover gives no vertical slack at all and the neon's own 76% lands inside the third card. 116% buys back the 6% of travel that drops it into the gap, and 80% across brings both digits in from the right. */ /* the sky plate has no neon in it, so the phone crop is only a question of which part of the horizon shows */ .ct12-hero::before{ background-size:cover;background-position:62% 58%; filter:saturate(.72) brightness(.56); } /* the 12 sits behind the form here too, just smaller -- a 350px band cannot carry a 380px numeral */ /* THE 12 WAS OFF THE LEFT EDGE ON A PHONE. `center` on a 440-wide band whose plate renders 1,700 across puts the image's midpoint at the screen's midpoint, and the 12 sits at 30% of the plate -- which lands it at x-120, entirely outside the viewport. Anchoring at 0% shows the left of the plate, which is where the number is. Brighter too: at .3 under the form panel it was invisible even where it was in frame. */ /* the phone's crop of the same scene -- the form band carries no picture at any width now. 80%, worked out: cover on a 440-wide hero fits the 2:1 plate by HEIGHT and renders it 1,400 across, so the 12 at 76.6% sits at x1072 with 960px of travel. 62% left it at 477, off the right edge of a 440px screen; 80% brings it to 300, behind the cards where the desktop puts it. */ /* THE LAYER IS THE BAND, NOT THE HERO. With inset:0 this box is 967px tall on a phone, because the three cards stack inside the hero. `cover` then fits the plate by HEIGHT and there is no vertical travel at all -- the 12 sits at 59% of 967, which is y574, and the scrim has been solid ground since 271. The number was in the box and invisible. Held to the 290px the picture is actually allowed to occupy, there is travel in both axes again: at 200% the plate renders 960 across and the 12 is 156 wide, and 80%/72% puts it at x323, y137 -- beside the headline, above the cards, which is where she asked for it. */ /* THE PHONE KEEPS THE UNCROPPED PLATE AND ITS OWN NUMBERS. She said this one was right, so the desktop's 2.4:1 crop and its px-based fade stop at the breakpoint: the image, the aspect-ratio and the mask are all restated here rather than inherited. */ .ct12-hero::before{ inset:auto;top:0;left:0;right:0;height:290px; aspect-ratio:auto; background-image:url('/assets/images/contact-hero-desert-1800.jpg'); background-image:image-set( url('/assets/images/contact-hero-desert-1800.avif') type("image/avif"), url('/assets/images/contact-hero-desert-1800.webp') type("image/webp"), url('/assets/images/contact-hero-desert-1800.jpg') type("image/jpeg")); background-size:auto 200%; /* 70, not 80: at 80 the number sat through the middle of "what brought you here?". 70 moves it to the right of the block, where it crosses the last word rather than the whole line. */ background-position:70% 72%; /* brighter than the desktop's .62 because the picture only has this band to work in -- but not so bright that the headline has to compete with it */ filter:saturate(.9) brightness(.7); /* and it dissolves at its own bottom, so the layer's edge never shows even if the scrim above it is retuned */ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%); } /* ------------------ SKIP THE FORM, EDGE TO EDGE ------------------ Four contact routes in a 2x2 grid inside a 20px gutter is four 155px cells. Run to the screen edges they are 195 each, which is the difference between a phone number that fits on its line and one that does not. Side borders come off with the margin: a 1px line hard against the screen edge is a rendering artefact. */ .ct12-other{ margin-left:calc(-1 * var(--ct-inset)); margin-right:calc(-1 * var(--ct-inset)); border-left:0; } /* The right border comes off so the grid can bleed to both screen edges without a hairline sitting on them -- but that took the divider BETWEEN the two columns with it, and four blocks in a 2x2 with only horizontal rules read as two wide rows, not four blocks. The left column of each row gets it back; the right column, which is the one against the screen edge, does not. */ .ct12-other > div{padding:24px var(--ct-inset) 22px;border-right:0} .ct12-other > div:nth-child(odd){border-right:1px solid var(--ct-rule)} .ct12-hero + .ct12-band--tight{ margin-top:-74px;padding-top:0; background:var(--ct-ground); } /* THE PICTURE STOPS ABOVE THE CARDS. On a phone the hero is 967px tall -- the three cards stack, so they take everything from 27.6% to 84.5% of it. Running the photograph behind all of that makes the whole first screen-and-a-half a picture, which is not what a hero is. It belongs behind the eyebrow, the headline and the one line under them: the copy ends at 24.1%, the cards begin at 27.6%, so the scrim closes on the page's ground in that gap and everything below is flat. The radial comes up with it -- it was aimed at 22% of a 967px block, which is the copy, and it only needs to cover the copy. */ .ct12-hero::after{ background: radial-gradient(ellipse 74% 14% at 50% 12%, rgba(15,13,12,.8) 0%, rgba(15,13,12,.5) 52%, rgba(15,13,12,0) 100%), linear-gradient(180deg, var(--ct-ground-dark) 0%, rgba(15,13,12,.5) 5%, rgba(15,13,12,.18) 12%, rgba(15,13,12,.3) 19%, rgba(23,20,19,.74) 24%, var(--ct-ground) 28%, var(--ct-ground) 100%); } /* the form's own padding comes in too. 30px inside a 20px gutter put the first label 50px from the screen edge while every other page starts its copy at 20 -- the panel was undoing the gutter it sits in. */ .ct12-form{padding:22px 18px 24px;margin-top:0} .ct12-fields{grid-template-columns:1fr} .ct12-submit{flex-direction:column;align-items:stretch;gap:14px} .ct12-submit button{justify-content:center} .ct12-note{max-width:none} }