/* HomeIsSecure, human redesign 2026-10-14: the six trade pages (src/components/inner/TradePage.tsx; ART-DIRECTION.md section 5, "Trade pages"). Every section takes one of the site's own compositions: 1 lineup head 2 uses (three kraft dog-ear cards) 3 photo + checklist (F8) 4 dog-ear cards on a kraft board 5 the statement on a charcoal board 6 numbered stops on a sky line 7 the stamped plate 8 ledger of reasons 9 questions beside the work-order tag, the other trades as stamped tags 10 tablets and phones. The middle five come in each page's own order; white sections pad 56 px (inner.css section 1). */ .tr-uses, .tr-photo, .tr-route, .tr-why, .tr-faq { padding: 56px 0; } /* ---------------------------------------------------------------- 1 lineup head: the trade's portrait as one tall lineup column on the left (columns 1-4, square corners like the home lineup), ending in the lineup's tan strip (the stamped trade tag, the trade's name and line, the season squares); the copy in columns 6-12, centred against it. Portrait left, copy right (2026-10-14, uniqueness gate): with the copy on the left and the photo on the right the first screen measured as MyHomeZilla's inner pages (structure 0.49); the DOM keeps the copy first for phones */ .tr-head { padding: 28px 0 56px; } .tr-hgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; } .tr-htxt { grid-column: 6 / -1; grid-row: 1; padding-left: 8px; } .tr-htxt h1 { max-width: 17ch; margin: 0 0 24px; font-size: 56px; line-height: 1.03; } .tr-htxt .lede { margin-bottom: 32px; } .tr-busy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 36px; } .tr-busy-l { margin: 0; font-size: 15px; font-weight: 700; } .tr-portrait { grid-column: 1 / span 4; grid-row: 1; display: flex; flex-direction: column; margin: 0; background: var(--tan); } .tr-pph { display: block; height: 560px; overflow: hidden; background: var(--kraft); } .tr-pph img { display: block; width: 100%; height: 100%; object-fit: cover; } /* fresh-eyes check 2026-10-15: HVAC from 1200 px. The 4-column frame is narrowest at 1200 px (357 px), where 59 % left the frame's edge at 76.4 % of the photo and trimmed the cap's brim (77 %); a percentage that clears the brim there shows the out-of-focus colleague (from 79 %) on wide screens. As below 1200 px, the photo box is wider than the frame (which clips it) and the photo sits at its right edge: the frame is 560 px tall, so the photo is 840 px wide, and 185 px past the frame keeps the frame's edge at 78 % of the photo at every width */ @media (min-width: 1200px) { .tr-portrait.is-hvac .tr-pph img { width: calc(100% + 185px); max-width: none; object-position: 100% 20% !important; } } /* roofing: the 1.5 times zoom that hid a utility company's logo on the old photo's hard hat (client review 2026-10-14) cut the head off; the photos pass (2026-10-14) gave the trade a new photo without a logo (Pexels 8961155), shown whole */ .tr-strip { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 20px 20px; background: var(--tan); color: var(--charcoal); font-size: inherit; line-height: inherit; } .tr-strip .tag { min-height: 26px; padding: 4px 8px 3px 9px; font-size: var(--t-tag); } .tr-strip .tag .pi { width: 13px; height: 13px; } .tr-sname { margin: 10px 0 4px; font: 800 24px / 1.1 var(--f-sans); letter-spacing: -0.02em; } .tr-sline { margin: 0 0 14px; font-size: 16px; line-height: 1.4; } /* ---------------------------------------------------------------- 2 uses: three kraft dog-ear cards under the h2 */ .tr-uses h2 { max-width: 22ch; margin: 0 0 40px; } .tr-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin: 0; padding: 0; list-style: none; } .tr-cards3 > li { max-width: none; margin: 0; padding: 30px 30px 32px; border-color: transparent; background: var(--kraft); background-image: var(--grain); } .tr-cards3 h3 { margin: 0 0 12px; padding-right: 20px; font-size: 22px; line-height: 1.15; } .tr-cards3 p { margin: 0; font-size: 17px; line-height: 1.55; } /* ---------------------------------------------------------------- 3 photo + checklist (F8): the section photo in columns 1-5 (as tall as the copy, at least 520 px), the h2, intro and checklist in 7-12, centred against it */ .tr-f8 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; } .tr-f8-ph { grid-column: 1 / span 5; align-self: stretch; min-height: 520px; margin: 0; } .tr-f8-ph img { position: absolute; inset: 0; } .tr-f8-txt { grid-column: 7 / -1; } .tr-f8-txt h2 { margin: 0 0 18px; } .tr-f8-txt .lead { max-width: 52ch; margin: 0 0 12px; } /* ---------------------------------------------------------------- 4 dog-ear cards on a kraft board: the head in columns 1-4 beside 2 x 2 white cards; with three cards the head takes the first cell of the 2 x 2 */ .tr-bgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: stretch; } .tr-bhead { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; padding-right: 16px; } .tr-bhead h2 { margin: 0 0 18px; } .tr-bhead p { margin: 0; font-size: 18px; line-height: 1.55; } .tr-bcard { padding: 28px 30px 30px; border-color: transparent; } .tr-bcard h3 { margin: 0 0 10px; padding-right: 20px; font-size: 21px; line-height: 1.18; } .tr-bcard p { margin: 0; font-size: 17px; line-height: 1.55; } .tr-bgrid > .tr-bcard:nth-child(2) { grid-column: 5 / span 4; grid-row: 1; } .tr-bgrid > .tr-bcard:nth-child(3) { grid-column: 9 / span 4; grid-row: 1; } .tr-bgrid > .tr-bcard:nth-child(4) { grid-column: 5 / span 4; grid-row: 2; } .tr-bgrid > .tr-bcard:nth-child(5) { grid-column: 9 / span 4; grid-row: 2; } .tr-bgrid.is-3 .tr-bhead { grid-column: 1 / span 6; grid-row: 1; padding: 6px 32px 24px 0; } .tr-bgrid.is-3 > .tr-bcard:nth-child(2) { grid-column: 7 / span 6; grid-row: 1; } .tr-bgrid.is-3 > .tr-bcard:nth-child(3) { grid-column: 1 / span 6; grid-row: 2; } .tr-bgrid.is-3 > .tr-bcard:nth-child(4) { grid-column: 7 / span 6; grid-row: 2; } /* ---------------------------------------------------------------- 5 the statement on a charcoal board, beside a portrait-format photo; "Join Us" stays a text link (no button band) */ .tr-band { padding: 64px 0; } .tr-bd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; } .tr-bd-ph { grid-column: 1 / span 4; height: 440px; margin: 0; } .tr-bd-txt { grid-column: 6 / -1; } .tr-say { max-width: 22ch; margin: 0 0 28px; color: var(--white); font: 800 44px / 1.1 var(--f-sans); letter-spacing: -0.025em; text-wrap: balance; } .tr-band .go { font-size: 18px; } /* ---------------------------------------------------------------- 6 numbered stops on a sky line (the home route, simplified, no photo): square tan markers on a 3 px sky line, a white dog-ear card under each */ .tr-stops { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gut); margin: 0; padding: 0; list-style: none; } /* the route line is dashed 12 / 9 like the home route and the 404 route (review 2026-10-14) */ .tr-stops::before { content: ""; position: absolute; left: 23px; right: 0; top: 21px; height: 3px; background: repeating-linear-gradient(90deg, var(--sky) 0 12px, transparent 12px 21px); } .tr-stops > li { position: relative; display: flex; flex-direction: column; max-width: none; margin: 0; } .tr-mk { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 22px; border: 3px solid var(--charcoal); border-radius: 4px; background: var(--tan); color: var(--charcoal); font: 400 18px / 1 var(--f-tag); } .tr-stop { flex: 1; padding: 24px 26px 26px; } .tr-stop b { display: block; margin: 0 0 10px; padding-right: 18px; font: 800 21px / 1.18 var(--f-sans); letter-spacing: -0.015em; } .tr-stop span { display: block; font-size: 17px; line-height: 1.55; } /* ---------------------------------------------------------------- 7 v-list on a kraft board (review 2026-10-14, the plan's "four columns under stamped tags"; it also breaks the run of white sections): the h2 over the lead, then the points as three or four columns under a 2 px charcoal rule, each under a stamped Michroma number tag, with 1 px charcoal 20 % rules between the columns (between the rows on phones). The board pads 88 px (inner.css section 1). */ .tr-phead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin-bottom: 52px; } .tr-phead h2 { grid-column: 1 / span 8; max-width: 20ch; margin: 0 0 20px; } .tr-phead .lead { grid-column: 1 / span 8; max-width: 62ch; margin: 0; } .tr-plate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 2px solid var(--charcoal); list-style: none; } .tr-plate.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-plate > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: none; margin: 0; padding: 30px 28px 4px; } .tr-plate > li:first-child { padding-left: 0; } .tr-plate > li:last-child { padding-right: 0; } .tr-plate > li + li { border-left: 1px solid var(--ink-20); } .tr-pno { min-height: 26px; margin: 0 0 20px; padding: 4px 8px 3px 9px; font-size: 12px; } .tr-plate h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; } .tr-plate p { margin: 0; font-size: 17px; line-height: 1.55; } /* ---------------------------------------------------------------- 8 ledger of reasons: a 2 px charcoal top rule, one row per reason (title | text), 1 px rules; no markers, so it never reads as a second checklist */ .tr-ledger { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--charcoal); } .tr-ledger > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gut); align-items: start; max-width: none; margin: 0; padding: 26px 0; border-bottom: 1px solid var(--ink-20); } .tr-ledger h3 { margin: 0; font-size: 22px; line-height: 1.2; } .tr-ledger p { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.55; } /* ---------------------------------------------------------------- 9 questions: the head and the work-order tag in columns 1-4, the ledger rows in 6-12, the other trades as stamped tags under them */ .tr-faq { padding-bottom: 64px; } .tr-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; } .tr-fhead { grid-column: 1 / span 4; } .tr-fhead h2 { margin: 0 0 16px; } .tr-fhead > p { max-width: 34ch; margin: 0 0 28px; font-size: 18px; line-height: 1.55; } .tr-fbody { grid-column: 6 / -1; } .tr-fbody .ledger { border-top: 2px solid var(--charcoal); } .tr-others { margin-top: 44px; } .tr-others-l { margin: 0 0 14px; font-size: 15px; font-weight: 700; } .tr-others .tag-row { gap: 8px; } .tr-others a.tag { min-height: 36px; padding: 6px 12px 5px; font-size: var(--t-tag); } .tr-others a.tag .pi { width: 14px; height: 14px; } /* ---------------------------------------------------------------- 10 tablets and phones */ @media (max-width: 1199.98px) { .tr-htxt h1 { font-size: 52px; } .tr-htxt { grid-column: 6 / -1; padding-left: 0; } .tr-portrait { grid-column: 1 / span 5; } /* photos pass 2026-10-14: 420 px (was 480), so the narrow 992-1199 px frame is wide enough for HVAC's two heads */ .tr-pph { height: 420px; } /* HVAC below 1200 px: an out-of-focus colleague stands at the photo's right edge (from 79 % of its width). The frame is 420 px tall, so the photo is 630 px wide: its right edge 137 px past the frame's keeps the frame's edge at 78 % of the photo, between the cap's brim (77.5 %) and the colleague, at every width (from 1200 px the 560 px frame does the same with 185 px, section 1; fresh-eyes check 2026-10-15). Devices pass 2026-10-15: the same crop, set as a photo box 137 px wider than the frame (which clips it) with the photo at its right edge, instead of "right -137px", a position the crop report cannot measure */ .tr-portrait.is-hvac .tr-pph img { width: calc(100% + 137px); max-width: none; object-position: 100% 20% !important; } .tr-bhead { grid-column: 1 / -1; grid-row: auto; padding: 0 0 12px; } .tr-bgrid > .tr-bcard:nth-child(n) { grid-column: span 6; grid-row: auto; } .tr-bgrid.is-3 .tr-bhead { grid-column: 1 / -1; grid-row: auto; padding: 0 0 12px; } /* devices pass 2026-10-14: the three-card boards kept their desktop places (the .is-3 rules outrank the ones above), so the second card sat on top of the head; now two cards side by side and the third across the row */ .tr-bgrid.is-3 > .tr-bcard:nth-child(n) { grid-column: span 6; grid-row: auto; } .tr-bgrid.is-3 > .tr-bcard:last-child { grid-column: 1 / -1; } .tr-say { font-size: 38px; } .tr-phead h2, .tr-phead .lead { grid-column: 1 / span 10; } .tr-plate > li { padding-inline: 20px; } .tr-fhead { grid-column: 1 / span 5; } .tr-fbody { grid-column: 6 / -1; } } @media (max-width: 991.98px) { .tr-hgrid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .tr-htxt, .tr-portrait { grid-column: 1; grid-row: auto; } .tr-htxt { padding: 0; } .tr-portrait { flex-direction: row; } .tr-pph { flex: 0 0 58%; height: 420px; } /* HVAC: 470 px tall (photo 705 px wide), so the 58 % frame (up to 538 px at 991 px) still ends at 78 % of the photo */ .tr-portrait.is-hvac .tr-pph { height: 470px; } .tr-portrait.is-hvac .tr-pph img { width: calc(100% + 153px); object-position: 100% 20% !important; } .tr-strip { flex: 1; justify-content: flex-end; padding: 24px; } .tr-cards3 { grid-template-columns: minmax(0, 1fr); } .tr-f8 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .tr-f8-ph, .tr-f8-txt { grid-column: 1; } .tr-f8-ph { min-height: 0; aspect-ratio: 16 / 10; } .tr-bd { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .tr-bd-ph, .tr-bd-txt { grid-column: 1; } .tr-bd-ph { height: 300px; } .tr-stops { grid-template-columns: minmax(0, 1fr); gap: 0; } .tr-stops::before { left: 21px; right: auto; top: 23px; bottom: 40px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--sky) 0 12px, transparent 12px 21px); } .tr-stops > li { flex-direction: row; align-items: flex-start; gap: 18px; padding-bottom: 20px; } .tr-mk { flex: none; margin: 0; } /* the points stack, the same 1 px rule between every two of them (review 2026-10-14: on four-point plates a rule showed only between the first two) */ .tr-phead { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; } .tr-phead h2, .tr-phead .lead { grid-column: 1; } .tr-plate, .tr-plate.n3 { grid-template-columns: minmax(0, 1fr); } .tr-plate > li, .tr-plate > li:first-child, .tr-plate > li:last-child { padding: 26px 0 28px; } .tr-plate > li + li { border-left: 0; border-top: 1px solid var(--ink-20); } .tr-plate > li:last-child { padding-bottom: 0; } .tr-pno { margin-bottom: 14px; } .tr-ledger > li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .tr-fgrid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } .tr-fhead, .tr-fbody { grid-column: 1; } } @media (max-width: 767.98px) { .tr-uses, .tr-photo, .tr-route, .tr-why, .tr-faq { padding: 40px 0; } .tr-head { padding: 16px 0 40px; } .tr-htxt h1 { font-size: 40px; line-height: 1.04; } .tr-busy { gap: 10px; margin-bottom: 28px; } .tr-busy-l { flex-basis: 100%; } /* the portrait first (CSS order only, the DOM keeps the copy first), 240 px tall, its tan strip under it, then the h1 (review 2026-10-14: the phone's first screen was text only, the portrait came at about 830 px) */ .tr-hgrid { row-gap: 28px; } .tr-portrait { order: -1; flex-direction: column; } /* photos pass 2026-10-14 (owner rule: no head cut): 240 px tall on phones up to about 480 px wide; wider frames (a 540 px phone, phones held sideways) grow at 2:1 up to 340 px, because at 619 x 240 the HVAC and handyman heads no longer fitted the frame's height */ .tr-pph { flex: none; height: auto; min-height: 240px; max-height: 340px; aspect-ratio: 2 / 1; } /* HVAC on phones (devices pass 2026-10-15, owner rule: no head cut): the out-of-focus colleague at the photo's right edge is cut by the photo itself (behind his ear), so no crop may show him (the 2:1 frame of the other trades showed the photo's whole width, him included). A frame of 8:7 shows 76 % of the photo's width; at 9 % it ends at 78 % of the photo, between the cap's brim (77.5 %) and the colleague (79 %), at every phone width, as on tablets and desktops */ .tr-portrait.is-hvac .tr-pph { height: auto; min-height: 0; max-height: none; aspect-ratio: 8 / 7; } .tr-portrait.is-hvac .tr-pph img { width: 100%; object-position: 9% 20% !important; } .tr-strip { padding: 14px 16px 16px; } .tr-sname { font-size: 21px; } .tr-uses h2 { margin-bottom: 28px; } .tr-cards3 > li { padding: 24px 22px 26px; } .tr-bgrid { gap: 12px; } .tr-bgrid > .tr-bcard:nth-child(n), .tr-bgrid.is-3 > .tr-bcard:nth-child(n) { grid-column: 1 / -1; } .tr-bcard { padding: 24px 22px 26px; } .tr-bd-ph { height: 240px; } .tr-say { font-size: 30px; line-height: 1.14; } .tr-stop { padding: 20px 20px 22px; } .tr-stop b { font-size: 19px; } .tr-plate > li, .tr-plate > li:first-child, .tr-plate > li:last-child { padding: 22px 0 24px; } .tr-plate > li:last-child { padding-bottom: 0; } .tr-pno { font-size: 11px; } .tr-ledger > li { padding: 22px 0; } .tr-ledger h3 { font-size: 20px; } .tr-others a.tag { min-height: 44px; } } /* devices pass 2026-10-14: at 320-389 px "PEST CONTROL COMPANIES" and "HANDYMAN & REMODELING" ran past the screen's edge (the tags do not wrap): smaller tracking, and a tag may wrap as a last resort */ @media (max-width: 389.98px) { .tr-others a.tag { max-width: 100%; font-size: 11px; letter-spacing: 0.04em; white-space: normal; } /* fresh-eyes check 2026-10-15: a wrapped tag's two lines touched at the tags' 1.1 line height */ .tr-others a.tag { line-height: 1.3; } } /* devices pass 2026-10-15: phones held sideways and small tablets (576-767 px): the 8:7 HVAC frame (section 10) sits beside its tan strip, as on tablets, so the photo is not taller than the screen */ @media (min-width: 576px) and (max-width: 767.98px) { .tr-portrait.is-hvac { flex-direction: row; } .tr-portrait.is-hvac .tr-pph { flex: 0 0 58%; align-self: flex-start; } .tr-portrait.is-hvac .tr-strip { justify-content: flex-end; padding: 20px; } }