/* ============================================================ NJ INDOOR OUTDOOR — /get-a-free-quote/'s COMPACT HERO The page slice for the contact page, same arrangement as v2-nav.css, v2-hero.css and v2-pricing.css and for the same reason: this page is a 1:1 Webflow mirror styled by Webflow's stylesheet and cannot load v2.css — the two collide on *, html, body, a and img. THE BRIDGE IS SCOPED TO .chero AND WRAPPED IN :where(). Unscoped it would restyle the whole mirrored page. Verified: `.chero` appears nowhere in Webflow's 137KB stylesheet. WHAT IT REPLACED. A 320px band of flat #14A800 green holding a dark-green rounded box with "GET IN TOUCH WITH US" in heavy black type. Three problems, and the brief named the third: 1. THE GREEN IS NOT v2'S. #14A800 against v2's #71B745, and it was the largest area of saturated colour left anywhere in the build. 2. A BOX INSIDE A BAND, doing nothing but holding one line. 3. NOTHING WAS GOING ON IN THE BACKGROUND. A flat fill, which is also what the display pipeline spatial-dithers into a diagonal hairline. IT IS A HERO, BUT A SHORT ONE. The three page heroes run 78-84svh; this is capped at 400px, which is about what the green band occupied. The contact form is the point of this page and it should stay above the fold on a laptop. THE COPY IS LIVE'S, to the character — "GET IN TOUCH WITH US", the page's own h1. Nothing was added: the sentence that would have made a lede is already directly below in the Contact Us panel, and repeating it here would be the same fault as the junk panel's four identical tags. ============================================================ */ /* --- bridge: v2's base rules, scoped to the hero subtree --- */ :where(.chero) { font-family: var(--font, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif); color: #FFFFFF; -webkit-font-smoothing: antialiased; } :where(.chero) h1 { margin: 0; } :where(.chero) p { margin: 0; } :where(.chero) img { max-width: 100%; height: auto; display: block; } .chero { position: relative; isolation: isolate; overflow: hidden; /* Shows while the photograph decodes. Two-stop, never a flat fill. */ background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%); } /* contact-hero.jpg — an aerial of a suburban neighbourhood, houses and tree-lined streets around a green. Pexels 9716228, Kindel Media, Pexels License. Cropped to 3:2 and re-encoded to 1600x1067, q62, 347KB — heavier than the library's usual 280-310KB because a detailed aerial is the worst case for JPEG, and it was traded down from 1800px to keep it near that. WHY THIS AND NOT SOMEONE ON A PHONE. The first attempt used gallery-11, the client's own office shot of someone taking a call, and it was rejected outright. The search that followed is worth recording so it is not repeated: · CALL-CENTRE STOCK reads corporate. Rows of headsets and cubicles belong to a telecoms company, not a family firm in Aberdeen. · "WORKER ON THE PHONE" STOCK is almost all VERTICAL and almost all business suits, neither of which survives a 6:1 band. · A CLOSE-UP OF A FACE OR A HEADSET, cropped to this ratio, is a slice of a mouth. Checked against the real band ratio before being discarded. AN AERIAL SOLVES THE FORMAT. A wide short band wants a wide subject, and a neighbourhood read from above is one. It also says something the page needs: these are the streets the business covers, which is the same claim the footer's Service Areas list makes. object-position 50% 42%: the band is about 6:1 at desktop, so cover matches the WIDTH and shows roughly a sixth of the height. 42% keeps the green and the curved street in frame across the middle and holds houses on the left, under the type. Only the y value does anything at desktop; on a phone the band is nearly square and the crop takes the middle. */ .chero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } /* A LEFT-WEIGHTED VEIL, NOT THE ELLIPSE THE PAGE HEROES USE. Those centre their type and an ellipse follows it. This one is left-aligned in a band a third the height, where an ellipse would have to be so wide it would flatten the whole photograph. A linear ramp darkens the left third where the type sits and lets the right two thirds stay a photograph. Measured figures are in the note below .chero__title. */ .chero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 14, 28, .80) 0%, rgba(8, 14, 28, .62) 32%, rgba(8, 14, 28, .24) 62%, rgba(8, 14, 28, .10) 100%); } /* Same rail as the pricing page and the footer — padding inside the max-width — so the headline starts on the same vertical as the content below it. */ .chero__inner { position: relative; z-index: 2; max-width: 1800px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 110px); /* vh first as the fallback: where svh is unsupported the clamp is dropped entirely and the band collapses to the height of one line of type. The three page heroes carry the same risk and no fallback, but they are a matched set that has to stay identical; this file answers to nothing, so it takes the safer pair. */ min-height: clamp(260px, 34vh, 400px); min-height: clamp(260px, 34svh, 400px); display: flex; flex-direction: column; justify-content: center; } /* WEIGHT 800, heavier than the three page heroes' 400, and that is a deliberate split rather than drift. Those headlines run 50-60px across two or three lines and carry the page on their own. This one is a single short line in a band a third the height, sitting over an aerial with detail at every scale — at 400 it read as a caption laid on a photograph rather than as the page's title. 800 is the same weight the junk panel and the pricing closer use. Uppercase is live's, not an addition — its own h1 was "GET IN TOUCH WITH US". MEASURED, not estimated: the band is reconstructed from contact-hero.jpg, the object-fit: cover geometry and the ramp above, then sampled inside the headline's real glyph box read off the live page (a Range around the text, not the h1's block box — the block runs the full rail and would have averaged in bright pixels the words never touch). no veil with veil floor headline 5.32 / 2.02 12.95 / 9.41 3.0 PASS accent 2.10 / 1.11 5.23 / 4.06 3.0 PASS (mean / worst tenth) The headline is 50px at weight 800, which is large text, so both rows answer to 3.0 rather than 4.5. The accent is the tighter of the two at 4.06 and it is still a third clear of the floor — measured where the word "TOUCH" actually falls, x 326-507, not where the line starts. Move the accent to a different word and this number moves with it. THE VEIL WAS LIGHTENED AFTER MEASURING, not before. It opened at .88/.74/.34/.18, which measured 15.11 / 12.57 — four times the floor, bought by taking the right two thirds of the frame 22% darker than the bare photograph. At .80/.62/.24/.10 the headline still runs 9.54 across its worst tenth and the cost drops to 14.7%, so more of the picture survives. The brief asked for something going on in the background; there is no reason to bury it to clear a floor three times over. RE-MEASURE IF THE PICTURE, THE CROP OR THE BAND HEIGHT CHANGES. */ .chero__title { font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: #FFFFFF; text-transform: uppercase; } @media (max-width: 860px) { .chero__inner { min-height: clamp(220px, 30vh, 320px); min-height: clamp(220px, 30svh, 320px); } /* The veil goes vertical on a phone: the type block is nearly as wide as the frame there, so a left-weighted ramp leaves the end of the line uncovered. */ .chero__scrim { background: linear-gradient(180deg, rgba(8, 14, 28, .62) 0%, rgba(8, 14, 28, .80) 55%, rgba(8, 14, 28, .86) 100%); } } @media (max-width: 560px) { .chero__inner { padding-inline: 18px; } } /* THE GREEN LANDS ON "TOUCH" and on nothing else. The three page heroes each accent one phrase — "Dumpster Rentals", "Same-Day" — and this is the same move on the one word in the line that is not grammar. Measured where it actually sits, which is the point of accenting a word rather than a position: see the ratios below. #71B745 is v2's brand green. It is safe here because the veil keeps this part of the band dark; on a LIGHT ground it drops to 2.45:1 and has to become #49772D, which is what the pricing sections do. */ .chero__accent { color: #71B745; } /* ============================================================ THE CONTACT BOX — TREATMENT B OUT OF design-lab/contact-box.html WHAT IT REPLACED, and the first two were failures rather than taste: 1. WHITE BODY COPY ON #0FA608 MEASURED 3.24:1. The lede and the three contact lines are 16px, so their floor is 4.5. They failed. The 48px heading scraped past the 3.0 large-text floor on the same 3.24. 2. THE TWO LEGAL LINKS WERE NEVER STYLED AT ALL. They computed to rgb(0, 0, 238) — the browser default link blue, underlined — which on that green is 2.90:1. They sat stacked and centred between the message box and the button. 3. THE FIELDS WERE SET IN system-ui, so the text a visitor types was in a typeface used nowhere else on the page, coloured #00529F — a navy that is not in v2. 4. THE SUBMIT BUTTON WAS 125px WIDE in a 550px column, centred under those links rather than aligned to the fields. 5. THE LEFT COLUMN DEAD-ENDED — about 300px of content in a 630px panel, the rest flat green. 6. THE SLAB WAS 1280px on a page whose hero and footer run to 1800px, so it lined up with nothing. B KEEPS LIVE'S IDEA — a bold solid block — AND CHANGES ITS COLOUR. The ink gradient, same two stops as the footer and the featured pricing card, with the noise layer over it. That one swap fixes 1 and 2 outright rather than by going quiet, which is the mistake made once already on the junk panel. MEASURED ON THE NEW PANEL, computed against the ink ground: #FFFFFF heading, copy, field text ... 17.16 rgba(255,255,255,.70) legal links ... 8.89 #71B745 field labels ................ 7.00 rgba(255,255,255,.55) placeholders .. 5.14 on the field fill #0B1226 on #71B745, the button ...... 8.06 THE FIELDS ARE TRANSLUCENT, NOT SOLID WHITE. Five solid white boxes on a coloured card is what made the old one read as bandages stuck to a slab. rgba(255,255,255,.07) with a .22 hairline keeps them reading as wells recessed into the panel. EVERY FIELD HAS A REAL