/* =========================================================================== WHO WE'RE FOR: PUTTING TECHNOLOGY TO WORK — /putting-technology-to-work/ (9/17) --------------------------------------------------------------------------- Built by scripts/build-technology.py from Alie's locked copy. The page carries body classes "page-launch page-tech" and loads launching.css first: hero, section 2, the chooser and the indigo quote are Launching's, unchanged. This sheet holds ONLY what Launching does not have. Tokens only; verify.js reads this sheet, comments included. Corners alternate back from the CTA as on Launching, with the teaser taking one slot: 3 chooser top-left · 4 quote top-right · 5 teaser top-left · 6 CTA top-right. Contrast: ink on lime 8.95 · oat on ink (button) above 11 · ink on white 13.3. =========================================================================== */ /* ----------------------------------------------- 1. hero: a longer H1 than Launching's */ .page-tech .lp-hero__h1 { max-width: 18ch; } /* --------------------------- the hero carries the product now (Alie, Feedbucket 987590) --------------------- Two columns from 900: copy left, the weekly recap render right. Below that it stacks, image last, because the headline has to be the first thing on a phone. 🔴 SCOPED TO .page-tech. `.lp-hero` and `.lp-hero__inner` come from launching.css and are shared with /launching-a-new-practice/, which has no art in its hero and must not grow a second column. ⚠️ The decorative discs are `position: absolute` in the hero and were sized against an EMPTY right half. They now sit behind the render — z-index keeps the image above them, and the image's own white card reads as the foreground. If the discs are ever resized, check they still frame rather than collide. */ @media (min-width: 900px) { .page-tech .lp-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: center; } } .page-tech .tw-hero__art { position: relative; z-index: 2; margin: var(--s-5) 0 0; } @media (min-width: 900px) { .page-tech .tw-hero__art { margin: 0; } } /* 🔁 9/18 — THREE ROLES, NOT ONE HEADER CROP (Brees: "the render that's on the right is very small... a render that shows all three: the front desk, the manager, and the owner"). Deliberately NOT the homepage's device: no journey line, no dark card, no draw-in - the homepage keeps that to itself. 🔁 9/18 (night) — A FAN OF THREE TALL CARDS, option B (Brees: "I'm thinking we just do two cards or change how wide and short they look" -> "do B"). The wide, short strips are gone: each email is re-captured from the Call Insights page at a NARROW width (400px, 2x), so it reflows tall and its numbers read larger. The three cards overlap side by side like a loosely held hand: front desk tilted left, manager level and a step lower, owner tilted right and on top. - Flex row, not absolute positioning, so the fan's height comes from the real cards at every width. - Each card overlaps the one before by --tw-ov and sits a step LOWER (8 / 44 / 96px), a descending staircase: every card's role tag clears the card on top of it, cadence included (at 16px the owner cut "Every Monday"). - Images: assets/img/tech/vci-role-{daily,weekly,monthly}-tall.webp, made by scripts/tech-role-shots.js. 🔴 NOTHING LINKS THEM TO THE MOCKS — if a render on /products/call-insights/ changes, re-run that script. - The columns go 0.85fr / 1.15fr from 900 so the art gets the larger half. */ @media (min-width: 900px) { .page-tech .lp-hero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } .page-tech .tw-roles { --tw-card: 44%; --tw-ov: 12%; display: flex; align-items: flex-start; padding-block: 12px 28px; } .page-tech .tw-role { position: relative; flex: 0 0 var(--tw-card); overflow: hidden; border-radius: 16px; background-color: var(--white); /* the mocks' own card edge is a 1px hairline that disappears on white, so each card gets a soft lift instead */ box-shadow: 0 18px 48px rgb(47 47 53 / 0.16), 0 0 0 1px var(--ink-10); } .page-tech .tw-role + .tw-role { margin-left: calc(-1 * var(--tw-ov)); } .page-tech .tw-role--desk { z-index: 1; transform: rotate(-3deg); margin-top: 8px; } .page-tech .tw-role--manager { z-index: 2; margin-top: 44px; } .page-tech .tw-role--owner { z-index: 3; transform: rotate(3deg); margin-top: 96px; } /* 🔁 9/18 (later), Brees: "utilize some space on the right also of the renders". From 1100 the fan runs PAST the content edge into the right gutter (stopping --s-4 short of the screen), the way the homepage's cards use that side. Below 1100 the gutter is too narrow to spend. */ @media (min-width: 1100px) { .page-tech .tw-roles { /* stops 40px further from the screen edge than the old cascade did: the owner card's 3deg tilt swings its top-right corner outward, and at the old distance the hero clipped it. Capped at 200px into the gutter: on wide screens the uncapped reach grew the cards past the screen edge (1920: 6px over). */ margin-right: max(-200px, calc(var(--s-4) + 40px - max(var(--container-pad), (100vw - var(--container-max)) / 2 + var(--container-pad)))); } } .page-tech .tw-role__who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--ink-10); font-size: 0.875rem; line-height: 1.3; } .page-tech .tw-role__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .page-tech .tw-role--desk .tw-role__dot { background-color: var(--petal); } .page-tech .tw-role--manager .tw-role__dot { background-color: var(--lime); } .page-tech .tw-role--owner .tw-role__dot { background-color: var(--sky); } .page-tech .tw-role__name { color: var(--ink); font-weight: 600; } .page-tech .tw-role__when { color: var(--ink-muted); } .page-tech .tw-role__shot { display: block; width: 100%; height: auto; } /* Phones and small tablets (to 767 - at 600 the cadence spilled into the gutter): the same fan, less tilted, with smaller tags and the cadence dropped so each role's name stays whole in the strip its neighbour leaves uncovered (3 x 42% - 2 x 13% = 100%). 🔴 AFTER the base .tw-role__who rule on purpose - placed before it, the base rule won and the tags stayed full size. */ @media (max-width: 767px) { .page-tech .tw-roles { --tw-card: 42%; --tw-ov: 13%; } .page-tech .tw-role--desk { transform: rotate(-2deg); } .page-tech .tw-role--owner { transform: rotate(2deg); margin-top: 72px; } .page-tech .tw-role__who { gap: 6px; padding: 8px 8px; font-size: 0.75rem; } /* 12px: the site's floor */ .page-tech .tw-role__when { display: none; } .page-tech .tw-role__dot { width: 8px; height: 8px; } } /* ----------------------------------------------- 2. POV heading runs longer too */ @media (min-width: 900px) { .page-tech .tw-pov__h { max-width: 16ch; } } /* ----------------------------------------------- 4. the quote on its own: no stats */ /* 🔁 9/17 — THE LOGO. Great Lakes' lockup from their Drive logo pack, EDITED on Brees' word: their tagline cropped off and every shape flattened to white, so the pink-to-teal mark is now a white silhouette. 🔴 This is OUR version of their logo. If anyone asks for the real one back, it is `fulllogo_transparent_nobuffer.png` in their Drive Logo folder — white type, gradient mark, tagline attached. Name and role above, logo beneath — the 9/16 order Brees set for every big quote on the site. */ .page-tech .tw-quote { margin-top: 0; } @media (min-width: 900px) { .page-tech .tw-quote { grid-template-rows: 1fr auto auto 1fr; } .page-tech .tw-quote .lp-quote__by { grid-row: 2; } .page-tech .tw-quote .lp-quote__card { grid-row: 3; } } /* 🔁 9/17 (later), Brees: tagline off, mark all white. The lockup is now near-SQUARE (760x805), not the wide strip the other client marks are, so it cannot be sized like them — height is what owns the column here. 🔁 9/17 (later still), Brees: "make the great lakes logo smaller" — 180px wide (191 tall) → 140 (149 tall). For scale: Sonoran Sky renders ~78-110px tall and State of the Heart 30-42px, so a stacked badge at 149 is still the tallest mark on the site by design — it is a circular lockup, not a wordmark strip. 🔴 DO NOT go much below 140. "VETERINARY GROUP" is arced type at ~5% of the lockup height: 7px caps at 140, under 6px by 120. Below that the arc stops reading as words. If it must be smaller than this, the logo needs re-cropping to the mark alone, not more CSS. */ .tw-quote__logo { width: 100%; max-width: 140px; height: auto; margin-top: var(--s-2); } /* ⏹ The published-prices bubble MOVED to launching.css (9/17) — the Launching page needed the same device, and this page already loads that sheet first. It is `.lp-more` there. */ /* ----------------------------------------------- 5. the teaser (the no-name product drip) */ .tw-teaser { position: relative; z-index: 6; margin-top: calc(-1 * var(--corner-3x)); padding-block: calc(var(--section-pad) + 24px) calc(var(--section-pad) + var(--corner-3x)); border-top-left-radius: var(--corner-3x); background-color: var(--white); } .tw-teaser__card { display: grid; gap: var(--s-3); justify-items: start; max-width: 52rem; margin-inline: auto; padding: clamp(28px, 4vw, 56px); border-radius: var(--corner-1); background-color: var(--lime); color: var(--ink); } .tw-teaser__h { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; } .tw-teaser__p { max-width: 54ch; margin: 0; color: var(--ink); font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.6; } /* 🟢 9/21: THE FORM IS EMBEDDED HERE (Brees). The button that opened a new tab is gone, and .tw-teaser__btn with it - the rules stay below only until the next sweep, in case the band is reverted to a CTA. ⏹ THE OAT INSET IS GONE (Brees, 9/22: "form shouldn't have a bg"). It existed because the shared newsletter CSS gives the submit button a LIME fill - chosen to read on the ink footer - which would have been lime on lime dropped straight onto this card. That job now belongs to a 2px INK STROKE on the button itself (jotform-custom-css/newsletter.css), which separates it on this lime card at 8.95:1 and on the oat and white panels too, while the fill still carries the ink footer. The white pill fields already carried their own 2px ink border, so they read on the lime directly. 🔴 DO NOT re-add a background here to "fix" the button. If the button ever loses that stroke, fix the stroke - the inset only ever hid the problem on ONE of the four grounds the form renders on. ⚠ min-height covers only the moment before JotForm's embed handler sets the height inline; the frame reflows once on load and again when the thank-you replaces the fields. */ .tw-teaser__embed { width: 100%; margin-top: var(--s-2); } .tw-teaser__frame { display: block; width: 100%; /* [!] MEASURED OFF THE RUNNING FORM, NOT GUESSED (playwright, 6 widths + a threshold sweep). JotForm's embed handler sets the real height inline on load: 52px when the three pills sit on ONE ROW, 162px when they STACK. The form flips at a FRAME width of ~600px - its own internal breakpoint, which is not one of this site's - and that lands at a ~790px viewport here. min-height is a FLOOR, so a floor above the handler's value wins and leaves a hole: the first draft of this rule said 190px and painted 138px of dead oat under the fields on every desktop. Each floor now matches the shape the form actually takes at that width, so there is no hole - and if an ad blocker eats cdn.jotfor.ms the fields are still fully visible instead of clipped by scrolling="no". */ min-height: 162px; /* stacked: two pill rows + the button */ border: 0; background-color: transparent; color-scheme: light; } .tw-teaser__fallback { margin: 0; color: var(--ink); } @media (min-width: 790px) { /* frame passes ~600px: the form becomes one row */ .tw-teaser__frame { min-height: 52px; } } .tw-teaser__btn { margin-top: var(--s-2); } .tw-teaser__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* ----------------------------------------------- 6. CTA: corner flips to the top-right */ .page-tech .lp-cta { z-index: 7; border-top-left-radius: 0; border-top-right-radius: var(--corner-3x); }