/* ============================================================ dumpster.css — THE DUMPSTER PAGE, COPIED FROM THE LIVE SITE A copy of every content section on njindooroutdoor.com/dumpster, taken from that page's own Webflow build. Same sections, same order, same copy, and — for most of them — the same layout, colours and type. THE PAGE IS BEING WALKED THROUGH SECTION BY SECTION and three have been reworked so far, each on request and each flagged in full where it is defined below: · the HERO is not the live site's at all. Rebuilt in v2's design language, as a copy of v2/junk-removal-page/'s. · DUMPSTER SERVICES is not either. Rebuilt as a full-bleed diptych from design-lab/dumpster-services.html, variant B — two photographs edge to edge with the copy on the bottom of each, the whole half a link, new photographs, and real type where live paints its labels into the pictures. · RENTAL PROCESS keeps live's layout but not its TYPE. The face, weights and case were matched to DUMPSTER SERVICES above it, and the flat blue band became a two-stop gradient with a noise layer. EVERYTHING BELOW THOSE THREE IS STILL THE LIVE DESIGN, AND IS SUPPOSED TO BE. That is the same arrangement live-sections.css already documents for the reviews slider and the dark CTA — the client likes that UI as it stands, so those sections are a reproduction, not a redesign. Their values were read off the live stylesheet (nj-indoor-outdoor.webflow.shared.5772f32ef.min.css) and are kept exactly as found. Do not "fix" them to match v2 without being asked. ⚠ THE PAGE IS THEREFORE MID-CONVERSION and reads as two designs at once: Montserrat above RENTAL PROCESS, Poppins below it. That is expected while the walk-through continues, not a bug to tidy. In the sections that are still live's, the class names are Webflow's too, and most are the editor's leftovers rather than anything meaningful — .asdasdsdadassda, .sddsdsd, .ytutuiugj. They are real classes on the live site, and renaming them would make the next diff against it harder to read, so they stay. The rebuilt sections use this build's own names (.svc, .split, .shead). WHAT THIS FILE COVERS — the v2 hero, then the live sections unique to the dumpster page: DUMPSTER SERVICES, RENTAL PROCESS, the six alternating use-case splits, ALLOWED & PROHIBITED ITEMS, the FAQ. The reviews slider and the dark CTA underneath them are NOT here; they are the same two sections live-sections.css already carries, and this page loads that file rather than duplicating them. FIVE THINGS CHANGED, all mechanical, none visual: 1. Webflow CDN URLs -> local /assets/img/. The build has a rule against hotlinking their CDN. Twelve images were downloaded (assets/img/dmp-*). 2. The FAQ MECHANISM. Webflow drives that accordion from ix2 — every answer ships with an inline height:0px and JavaScript animates it open. Rebuilt on
/ so it works without Webflow's runtime, keyboard-operable and open to find-in-page. Visually identical: same card, same inset shadows, same chevron, same 180deg flip. 3. The GLOBAL img RULE. The live stylesheet sets img{width:100%} on every image on the site. Copying that verbatim into v2 would reach the header logo and the footer, so the width is applied to the three image classes that still need it instead — the Rental Process step icons — which is the same result in the only place it still applies. 5. The custom properties. Webflow declares them globally from three separate UI kits; here they are scoped to .dmp so they cannot collide with v2's own tokens. Values are unchanged. ============================================================ */ .dmp { /* Webflow's three UI-kit palettes, verbatim. Several of these are misnomers on the live site and are kept anyway: --rl-white is a green, --black is a near-white, --light-slate-grey is a green. */ --fw--black: #f7f7f7; --fw--white: #ffffff; --fw--white-smoke: #f7f7f7; --fw--light-slate-grey: #0fa608; --fw--black-2: #00529f; --rl--black: #000000; --rl--white: #1ace11; --lynx--white: #ffffff; --walsh--black: #2c2c2c; } /* Stands in for the live site's global img{width:100%} — see note 3. */ .dmp .sddsdsd, .dmp .xcxc, .dmp .nmnm { width: 100%; } /* ============================================================ SHARED BUTTONS — A COPY OF junk-removal.css's Byte-identical to the .btn block in v2/junk-removal.css. It is duplicated rather than shared because this build has no bundling step and no shared partial; the same reason v2's header and footer are copied into all four pages. IF YOU CHANGE A BUTTON, CHANGE IT IN BOTH: v2/junk-removal.css and this file. Geometry: 48px tall, 34px sides, fully round, 16/700. Contrast, measured, all four combinations: #FFFFFF on #2F6FE5 .... 4.64 solid, on white #0B1226 on #FFFFFF ... 18.42 ghost, on white #0B1226 on #71B745 .... 8.06 solid green #FFFFFF on #131B2E ... 16.61 ghost, on the dark band ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; /* clears the 44px touch minimum */ padding: 0 34px; border: 1px solid transparent; border-radius: 100px; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none; transition: background-color .2s linear, border-color .2s linear, color .2s linear; } .btn--solid { background: var(--blue); border-color: var(--blue); color: #FFFFFF; } .btn--solid:hover { background: var(--blue-hover); border-color: var(--blue-hover); } /* The outlined button on a dark ground. A navy outline on navy is invisible, so the border and label invert and the hover fills solid white rather than solid navy. #FFFFFF border/label ... 16.6:1 #0B1226 on #FFFFFF (hover) ... 18.4:1 */ .btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #FFFFFF; } .btn--ghost-light:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0B1226; } /* NOT IN junk-removal.css — this one is only on this page, for the Full Service card in DUMPSTER SERVICES. It exists because that card is the ranked one of the two and needed a primary that reads hotter than the blue solid without introducing a second blue. --accent-green is v2's own token, sampled off the logo. Ink on it rather than white: #0B1226 on #71B745 measures 8.06:1, where white on the same green is 2.29:1 and fails outright. */ .btn--green { background: var(--accent-green); border-color: var(--accent-green); color: #0B1226; } .btn--green:hover { background: #63A63B; border-color: #63A63B; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* ============================================================ SERVICE HERO — FULL-BLEED PHOTOGRAPH, TYPE CENTRED ON IT THE SAME COMPONENT AS v2/junk-removal-page/'s, deliberately: same class names, same measurements, same structure. The two service pages should open identically, and the hero is the one place a visitor compares them. IF YOU CHANGE THE HERO, CHANGE IT IN BOTH: v2/junk-removal.css and this file. junk-removal.css carries the FULL rationale — where the structure came from (coconutcleaningco.com's home hero, the reference this whole v2 build was built against), why the band is 78svh, why the headline is weight 400 when every other heading on the page is 300, and why the scrim is one soft ellipse rather than a veil. Read it there before changing a number here. Only what is specific to THIS page's photograph is written out below. THIS IS NOT THE LIVE SITE'S HERO, and it is the one section on this page that is not. Everything from DUMPSTER SERVICES down is still the one-to-one Webflow copy; the hero was rebuilt in v2's design language on request, to match the About and Junk Removal pages. The live hero it replaced was a two-up: a green headline card and a lede on the left, an "OFFICIALLY LICENSED" badge on the right, on a dark green gradient. WHAT THAT MEANS FOR THE COPY. The headline and lede here are v1's dumpster hero, 1:1 — the same source v2/junk-removal-page/'s hero took its copy from, and the reason the accent lands on "Dumpster Rental": v1 already marked exactly that phrase, the way it marked "Same-Day" on the junk page. TWO THINGS FROM THE OLD HERO ARE GONE. The single BOOK NOW! button became the standard pair — solid primary plus outlined phone — because that is what the other two v2 heroes carry and the phone is the second-most-used route on a trade site. And the licensed badge came out: no v2 hero carries a badge, and the one commit that put the client's Google and Licensed badges into a hero was reverted (dc59a9b, reverted by cd370ed). Both belong to the live design, not this one. ============================================================ */ .dmp .shero { position: relative; isolation: isolate; /* Shows while the photograph decodes. Two-stop, never a flat fill, per the dark-section rule. */ background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%); } /* THE CROP AND THE PICTURE. gallery-10.jpg — the client's own roll-off truck with a container on the hook, a dump truck beside it. The subject is the service this page sells, which is the whole requirement, and at 1600x1200 it is the largest copy of that scene in the library (the same shot at 1280x960 is use-construction.jpg, on the home page). TWO OBVIOUS PICKS THAT LOSE, so neither gets tried again: · service-dumpster.jpg is the better photograph — a container on a residential driveway, which is what a customer is actually buying — but it is 600x748, far too small to run full-bleed, AND its flank is painted (732) 583-0378, which contradicts every (000) 000-0000 on this page. gallery-01.jpg loses to the second half of that for the same reason, and v2/junk-removal-page/ rejected work-truck.jpg over it too. · poster-dumpster.jpg is an aerial of empty containers on a lot. Accurate, and wrong as a first impression — the same objection that ruled out poster-junk.jpg on the junk page. THE X VALUE IS INERT AND KEPT ONLY FOR SYMMETRY WITH THE JUNK PAGE'S. Source is 4:3, the band is about 2:1 (1425 x 702 at a 1440 x 900 viewport), so cover matches the WIDTH and trims 367px off the height — the full width is always shown and no horizontal position can change anything. Measured: 50%, 58% and 66% produce identical pixels. Only the y value does work here. 35% y, chosen against three alternatives rendered and compared: 50%, 62% and 75% all crop into the cab and the grass, and this is the only one that keeps the container body on the truck in frame, top left — which is the difference between the picture reading as "dumpster rental" and reading as "two trucks". Contrast figures are on .shero__scrim. */ .dmp .shero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } /* ONE SOFT ELLIPSE, AND NOTHING ELSE — see junk-removal.css for why an ellipse and not a veil. THIS PHOTOGRAPH IS THE HARDER OF THE TWO. The junk page's picture has sky and a pale fence behind the type; this one has a white truck cab and a white pickup either side of centre, both running 230-250, and the headline crosses them both. MEASURED, NOT ESTIMATED, and measured on the rendered page rather than on the source file: the hero was screenshot twice, once with the type visible and once with it hidden, the two differenced to get the pixels a glyph actually covers, and the hidden version sampled inside that mask. So these are the real pixels behind the real glyphs at the real size, not an approximation of the box. no scrim this scrim floor 1440 viewport headline 8.71 / 1.42 12.75 / 5.58 3.0 PASS lede 9.06 / 1.36 12.86 / 5.69 4.5 PASS buttons 14.63 / 4.95 16.95 / 11.22 4.5 PASS 390 viewport headline 10.92 / 2.72 14.46 / 7.75 3.0 PASS lede 8.25 / 1.36 12.97 / 6.22 4.5 PASS buttons 9.62 / 1.37 13.77 / 6.15 4.5 PASS (mean / worst tenth) Unaided the worst tenth is 1.36:1 — barely legible, and that is the white bodywork. The peak sits at .68 where the junk page's is at .55, and the ellipse is a little wider at 82% against their 78%, because there is more bright metal to cover. THE COST IS SMALL AND WAS CHECKED: the top corners of the frame go 110.2 -> 102.7 mean RGB, 7% darker, so the photograph still reads as a photograph everywhere there is no text. On a phone the wider ellipse takes the corners 33% down, which is the same trade the junk page makes at that width and for the same reason — the type block is nearly as wide as the frame there. .62 WAS TRIED FIRST AND REJECTED. It cleared the headline (4.05) but left the lede at 4.63 against a 4.5 floor, which is a 0.13 margin — one photograph swap or one crop nudge from failing. RE-MEASURE IF THE PICTURE, THE CROP OR THE BAND HEIGHT CHANGES. All three change which pixels sit under the type. */ .dmp .shero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 82% 64% at 50% 50%, rgba(8, 14, 28, .68) 0%, rgba(8, 14, 28, .42) 55%, rgba(8, 14, 28, .03) 100%); } .dmp .shero__inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; min-height: clamp(500px, 78svh, 720px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(64px, 8vh, 104px) 24px clamp(88px, 12vh, 150px); text-align: center; } /* Weight 400, not the 300 the rest of v2 carries — the scrim fixes the ratio but not the stroke, and thin strokes let a busy ground read through them. junk-removal.css has the full argument. */ .dmp .shero__title { margin: 0; font-family: var(--font); font-weight: 400; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.04em; color: #FFFFFF; text-wrap: balance; } .dmp .shero__accent { color: var(--accent-green); } .dmp .shero__lede { margin: 20px auto 0; max-width: 76ch; font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; line-height: 1.6; color: #FFFFFF; text-wrap: balance; } .dmp .shero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } @media (max-width: 860px) { .dmp .shero__inner { min-height: clamp(440px, 62svh, 560px); padding: 52px 20px 68px; } .dmp .shero__title { max-width: none; } /* The ellipse WIDENS on a phone rather than darkening — at this size the type block is nearly as wide as the frame. Peak stays where it is; only the radii and the falloff change. */ .dmp .shero__scrim { background: radial-gradient(ellipse 108% 78% at 50% 50%, rgba(8, 14, 28, .68) 0%, rgba(8, 14, 28, .46) 60%, rgba(8, 14, 28, .10) 100%); } } @media (max-width: 560px) { .dmp .shero__inner { padding: 44px 18px 56px; } .dmp .shero__lede { max-width: none; } /* Full width and stacked. Two pills side by side in a 339px column leaves each about 163px, under the comfortable tap width. */ .dmp .shero__actions { gap: 10px; width: 100%; } .dmp .shero__actions .btn { flex: 1 1 100%; } } /* ============================================================ DUMPSTER SERVICES — FULL-BLEED DIPTYCH Picked from design-lab/dumpster-services.html, variant B. This replaces variant A2, which built the section as two horizontal cards on a wide rail — photograph beside copy, three ticks and a button each. B keeps A2's diagnosis and throws the cards away. THE DIAGNOSIS, WHICH BOTH BUILDS SHARE. Live lays this out as a GALLERY: two captioned pictures side by side and nothing else. But the two labels are the two ways to BUY — you fill the container, or the crew fills it — so it is a service-tier choice, and a gallery is the wrong shape for one. A2 answered that by making it a pricing module. B answers it by making the choice the entire section: two photographs edge to edge and floor to ceiling, split down the middle, with the copy sitting on the bottom of each. No cards, no gutter, no rail. It reads as a decision rather than as content. THE WHOLE HALF IS THE LINK, so there is no small button to hunt for, and the photograph lifts on hover and on keyboard focus to say so. The trade is width — at this scale there is no room for a bullet list, so each option gets one sentence and nothing more. A2's three ticks are gone. WHAT WENT WITH THE RAIL. .rl-padding-global-8, .rl-container-large-4 and .rl-padding-section-large-4 are deleted along with A2's cards: a full-bleed section has no rail to sit on, and the heading band carries its own padding instead. Those three were Webflow's names, and none of this markup is Webflow's any more — the .svc names are this build's. FOUR THINGS THE LIVE SECTION DOES THAT THIS DOES NOT: 1. It BAKES THE LABELS INTO THE PHOTOGRAPHS. "01. Drop Onsite - Customer Loads" and "02. Full Service - NJ Team Loads" are painted into the bottom 50px of each AVIF — a lossy picture of a word. Unselectable, unsearchable, unreadable by a screen reader, unresamplable, and un-editable without opening an image editor. Here both labels are real type. 2. It SQUASHES BOTH PICTURES. .rl_gallery3_image-wrapper is a padding-top:100% square and .rl_gallery3_image fills it with no object-fit, so a 459x424 photograph is stretched to 1:1 — about 8% narrower than it was shot. These cover their box at the aspect they were shot. 3. It WRAPS EACH TILE IN A DEAD LINK — a lightbox anchor with href="#" and no lightbox data behind it, so it goes nowhere. These halves go to the quote form. 4. It PAINTS THE BAND BOTTLE-GREEN. See the note directly below. ============================================================ */ /* THE HEADING BAND IS v2'S DARK SECTION, NOT LIVE'S GREEN. Live paints this band linear-gradient(#022b00, #045700) — a saturated bottle-green that appears nowhere else in v2 and reads as a different website bolted onto this one. Replaced with the ink band the rest of the build already uses: the same two stops as .foot in v2.css and .split--ink in junk-removal.css, plus the same noise layer at the same opacity. THE NOISE LAYER IS NOT DECORATION AND MUST NOT BE DROPPED. A flat dark fill is what the display pipeline spatial-dithers, which shows up as a faint diagonal hairline across the whole band. Two stops five luminance steps apart plus 3.5% noise give the dither nothing to latch onto. Same reasoning, same numbers, as .split--ink. The photographs cover most of this section now, but the heading band above them is still a large flat dark area, which is exactly the surface the dither picks. It stays. */ .rl_section_gallery21-3 { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%); } .rl_section_gallery21-3 > .noise-overlay { position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: overlay; } /* The heading sits in its own padded band above the diptych, and is the only part of the section that is still centred type on ink. */ .dmp .svc__head { position: relative; z-index: 1; padding: 84px 24px 46px; text-align: center; } /* The section title moves to v2's own treatment — Montserrat 300 with a 600 second word — rather than live's Poppins 48. Everything else in this section stopped being the live design several steps ago and the heading was the last thing still pretending otherwise. */ .dmp .svc__title { margin: 0; font-family: var(--font); font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; color: #FFFFFF; text-align: center; } /* The accent word goes green, the same move the hero makes with "Dumpster Rental" and the About page makes with its title. On the ink band #71B745 measures 7.0:1, which clears the body-copy floor of 4.5 let alone the 3.0 this size actually needs. */ .dmp .svc__title b { font-weight: 600; color: var(--accent-green); } .dmp .svc__lede { margin: 16px auto 0; max-width: 56ch; text-align: center; font-family: var(--font); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .72); } /* ---- the diptych ---- No gap and no gutter: the split down the middle is the only division there is, and anything between the halves would read as a frame and put A2's cards straight back. */ .dmp .svc__pair { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; } .dmp .svc__half { position: relative; display: flex; /* an is inline; this is what lets */ align-items: flex-end; /* the copy sit on the bottom edge */ min-height: 560px; overflow: hidden; /* this is what clips the zoom */ text-decoration: none; } /* THE PHOTOGRAPH IS ITS OWN LAYER so the zoom scales the picture without dragging the type with it — the same construction as .services__card / .services__bg on the home page. height:100% HAS TO WIN OVER v2.css's global `img { height: auto }`, and it does here on specificity. Drop the .dmp and it does not: the image falls back to its natural height, the half grows to ~712px of picture, and the veil stops reaching the copy. */ .dmp .svc__half picture { position: absolute; inset: 0; z-index: 0; display: block; } .dmp .svc__half img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); transform: translateZ(0); /* keeps the scale off the text */ } .dmp .svc__half:hover img, .dmp .svc__half:focus-visible img { transform: scale(1.045); } /* THE VEIL IS WHAT MAKES WHITE TYPE SAFE over a photograph nobody controls. Heaviest at the bottom where the copy sits — .90 of #0B1226 under 15.5px white is 13.9:1 even if the picture behind it were pure white — and nearly clear at the top, so the photograph still reads as a photograph rather than as a tint. */ .dmp .svc__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 18, 38, .30) 0%, rgba(11, 18, 38, .55) 42%, rgba(11, 18, 38, .90) 100%); transition: opacity .3s ease; } .dmp .svc__half:hover .svc__veil, .dmp .svc__half:focus-visible .svc__veil { opacity: .88; } .dmp .svc__copy { position: relative; z-index: 2; width: 100%; padding: 44px 44px 48px; font-family: var(--font); } .dmp .svc__n { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); } /* NO max-width HERE, on request. The lab held the name to 15ch, which broke both of these over two lines while 800-odd px of half sat empty to the right of them. Each name is short enough to set on one line at any width where the halves are still side by side. */ .dmp .svc__name { margin: 12px 0 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; color: #FFFFFF; } /* ONE GREEN WORD PER NAME, the same move the page title and the hero already make. The green word is the SUBJECT OF "Loads" in each — "Customer" against "Team" — because that one difference is the whole decision this section is asking a visitor to make, and it is otherwise buried mid-phrase in two names that scan alike. #71B745 on the veiled photograph is the same 7.0:1 the section title clears, and the weight does not change with the colour, so the name still reads as one phrase rather than two. */ .dmp .svc__name b { font-weight: inherit; color: var(--accent-green); } /* 58ch, not the lab's 40. Wider, because 40ch put this on three short lines in a half nearly twice that wide, but still inside the readable measure — turned loose it would run to about 95ch, and a line that long loses the reader on the carriage return. */ .dmp .svc__desc { margin: 14px 0 0; max-width: 58ch; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .8); } /* STILL NOT A BUTTON — the whole half is the link, and a button here would put back the small target B exists to get rid of. But on a photograph, white bold 14.5px reads as one more line of copy, so this now carries the accent green and a green rule under it: enough to be found at a glance, not enough to become a second target. The rule sizes itself to the text because the element is inline-flex. */ .dmp .svc__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding-bottom: 7px; border-bottom: 2px solid var(--accent-green); font-size: 15px; font-weight: 700; color: var(--accent-green); } .dmp .svc__go svg { flex: none; transition: transform .2s ease; } .dmp .svc__half:hover .svc__go svg, .dmp .svc__half:focus-visible .svc__go svg { transform: translateX(4px); } /* THE DEFAULT FOCUS RING IS DRAWN OUTSIDE THE ELEMENT — v2.css sets outline-offset:3px on every link. On a half that runs to the edge of the viewport, three of that ring's four sides land off the section or under the neighbouring half. Pulled inside instead, and white rather than the site blue, which is too dark to find against a photograph under a #0B1226 veil. */ .dmp .svc__half:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; border-radius: 0; } /* ONE COLUMN BEFORE THE TYPE OUTGROWS THE HALF. At 980 each half is 490px wide and .svc__name is still near its 34px ceiling, so the name wraps to three lines inside its 15ch measure and the two halves start reading as two columns of text with pictures behind them rather than as one choice. */ @media (max-width: 980px) { .dmp .svc__pair { grid-template-columns: 1fr; } .dmp .svc__half { min-height: 440px; } } @media (max-width: 620px) { .dmp .svc__head { padding: 62px 20px 34px; } .dmp .svc__half { min-height: 400px; } .dmp .svc__copy { padding: 30px 24px 34px; } } @media (prefers-reduced-motion: reduce) { .dmp .svc__half img, .dmp .svc__veil, .dmp .svc__go svg { transition: none; } .dmp .svc__half:hover img, .dmp .svc__half:focus-visible img, .dmp .svc__half:hover .svc__go svg, .dmp .svc__half:focus-visible .svc__go svg { transform: none; } } /* ============================================================ RENTAL PROCESS — DROP-OFF / FILL / PICK-UP, three up on blue. ============================================================ */ .rl_section_layout250-copy-copy-copy-copy-copy { position: relative; isolation: isolate; overflow: hidden; background-color: #00529F; } .rl_section_layout250-copy-copy-copy-copy-copy > .noise-overlay { position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: overlay; } .rl-padding-global-5 { position: relative; z-index: 1; padding-left: 10vw; padding-right: 10vw; } /* TWO STOPS, NOT A FLAT FILL. Live paints this band a single solid #00529f. That is the one thing this build never does with a large dark area: a flat fill is what the display pipeline spatial-dithers, and it surfaces as a faint diagonal hairline straight across the band. The two stops here are close enough that it does not read as a gradient — it only needs to not be flat — and the noise layer gives the dither nothing to latch onto. It also takes the edge off the section, which is the other reason it is here: a flat saturated blue directly under the ink band above it was the harshest transition on the page. */ .rl-padding-global-5.sadasdasdasd.fgfg { background-image: linear-gradient(180deg, #00529F 0%, #014A8F 100%); } .rl-container-large-3 { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; } .rl-padding-section-large-3-copy-copy { background-color: #1f2a2e; padding-top: 7rem; padding-bottom: 7rem; } .rl-padding-section-large-3-copy-copy.sdsdsdsd { background-color: #00529f; } .rl_layout250_component { flex-direction: column; justify-content: flex-start; align-items: center; display: flex; } .rl_layout250_heading-wrapper { text-align: left; flex: 0 auto; justify-content: center; align-items: center; width: 100%; max-width: 48rem; display: flex; } /* THE TITLE NOW MATCHES THE SECTION ABOVE, which was the whole ask. It was Poppins 700 at 2.5rem inside a 400px box with a 20px blue border on a blue ground — an invisible pill that did nothing except cap the width and force a wrap. It is now the same object as .svc__title: Montserrat 300, the same clamp, the same tracking, with the second word in 600 green. The 400px cap and the border go with it. At weight 300 a hard width cap is what makes a heading look broken rather than composed. */ .rl-heading-style-h3-copy-copy-copy-copy-copy-copy-copy { margin: 0; font-family: var(--font); font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; color: #FFFFFF; text-align: center; } /* A LIGHTER GREEN THAN THE ONE ABOVE, and the band is why. v2's --accent-green is #71B745, which measures 7.0:1 on the ink band in DUMPSTER SERVICES but only 3.16:1 on this blue one. At 44px that scrapes past the 3.0 large-text floor and at 28px on a phone it is still only 3.16 — a margin thin enough that one nudge to the band colour would break it. #A3D086 is the same hue mixed 35% toward white: 4.40:1 here, which clears the 4.5 body floor to within rounding and is comfortable at any size this heading takes. It still reads as the same green as the section above, because it is. */ .rl-heading-style-h3-copy-copy-copy-copy-copy-copy-copy b { font-weight: 600; color: #A3D086; } .rl_layout250_spacing-block-1 { width: 100%; padding-bottom: 5rem; } .rl_layout250_content { grid-column-gap: 3rem; grid-row-gap: 4rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; place-items: start; width: 100%; display: grid; } .rl_layout250_item { flex-direction: column; align-items: center; width: 100%; } .rl_home4-features_image-wrapper { justify-content: center; align-items: center; width: 100%; display: flex; position: relative; } .rl_layout250_spacing-block-2 { width: 100%; padding-bottom: 2rem; } .rl_layout250_spacing-block-3 { width: 100%; padding-bottom: 1.5rem; } /* The three step headings, matched to .svc__name in the section above — same face, same weight, same tracking, same clamp. */ .rl-heading-style-h5 { margin: 0; font-family: var(--font); font-size: clamp(19px, 1.55vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.22; color: #FFFFFF; text-align: center; } /* The step copy, matched to .svc__desc. Held at .82 white rather than the .72 used on the ink band: this ground is lighter, so the same alpha buys less separation. Measured against #00529F — .82 gives 5.76:1 against a 4.5 floor, .72 gives 4.81 and full white 7.76. */ .rl-text-style-regular-3 { margin: 0; font-family: var(--font); font-size: 15px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .82); text-align: center; } /* The three process icons, and — because .xcxc is reused — the last two use-case photographs below. Both get the 20px radius on live. */ .sddsdsd, .xcxc, .nmnm { border-radius: 20px; } /* ============================================================ THE SIX USE-CASE SPLITS — REBUILT IN v2'S DESIGN LANGUAGE Home Renovations, Construction Projects, Moving & Cleanouts, Landscaping & Yard Work, Estate & Foreclosure Cleanouts, Roofing & Demolition. Live's arrangement is kept — photograph one side, copy the other, alternating down the page — and everything else is not. WHAT LIVE DID. Each block was a full-bleed two-colour gradient, alternating #022b00 -> #0fa608 (bottle green) with #000146 -> #0055a6 (navy to blue), type in Poppins, centred, white on saturated colour, and a 260px green button. Six of them in a row. No section of v2 looks like that, the greens and blues appear nowhere else in the palette, and stacked six-deep it read as a different website spliced into the middle of this one. WHAT IT IS NOW. v2's own .split component, lifted from junk-removal.css where the Residential and Commercial sections already use it — same class names, same measurements, same .shead type, same .btn row. IF YOU CHANGE THE SPLIT, CHANGE IT IN BOTH: v2/junk-removal.css and this file. THE BACKGROUND RHYTHM, and the rule behind it: no two adjacent sections share a background. 1 Home Renovations #FFFFFF photo right 2 Construction Projects --surface photo left 3 Moving & Cleanouts #FFFFFF photo right 4 Landscaping ink photo left 5 Estate & Foreclosure #FFFFFF photo right 6 Roofing & Demolition --surface photo left The ink band at 4 is not decoration. Six light sections in a row is the same monotony problem the saturated version had, just quieter — one dark band gives the run a spine and splits it into two halves of three. It also keeps the join honest at both ends: the blue Rental Process band sits above section 1, and the near-black Allowed & Prohibited band sits below section 6, so neither edge meets its own colour. THE PHOTOGRAPHS ARE ALL NEW — six from Pexels, replacing the client's, which were a shed collage, two frames of the same truck-on-grass shoot, and three others that did not illustrate their headings. Sources and the licence are on .split__photo below. ============================================================ */ .dmp { /* junk-removal.css's two layout tokens, same values. They are not in v2.css, so they have to be declared wherever .split is used. */ --sec-pad: clamp(60px, 6.4vw, 92px); --rail: 1200px; } .split { position: relative; background: #FFFFFF; padding: var(--sec-pad) 20px; } .split--surface { background: var(--surface); } /* THE DARK SECTION RULE, APPLIED — the same two stops and the same noise layer as .foot, .split--ink and the two bands above. A flat dark fill is what the display pipeline spatial-dithers into a visible diagonal hairline across the band. */ .split--ink { background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%); } .split--ink > .noise-overlay { position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: overlay; } .split__inner { position: relative; z-index: 1; max-width: var(--rail); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; } /* Source order is copy-then-photo in all six, so the reversed ones reorder visually and leave the DOM alone. A screen reader and a keyboard both meet the heading before the picture either way, which is the order that makes sense read aloud. */ .split--rev .split__media { order: -1; } .split__media { margin: 0; } /* aspect-ratio holds the frame before the file decodes so the copy beside it never jumps. 4:3 for all six, and the files are cut to 4:3 as well, so cover has nothing to crop and no photograph is composed for a shape it never gets. THE SIX PHOTOGRAPHS, all Pexels, all free for commercial use with no attribution required, so none of them has to be credited on the page: renovations 8488031 a stripped interior, studs and insulation construction 15325569 a brick pile against blue sky moving 4246119 packed boxes in a cleared room landscaping 34581908 a chipper taking branches at the kerb estate 3935327 an emptied room, floors bare roofing 33404248 a roofer laying shingles Each is cut to 1200x900, which is 2x the column at the 1200 rail. */ .split__photo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; background: #0B1226; object-fit: cover; box-shadow: 0 20px 44px rgba(11, 18, 38, .16); } .split--ink .split__photo { box-shadow: 0 20px 44px rgba(0, 0, 0, .38); } .split__copy { min-width: 0; } /* ---- the section head, lifted from junk-removal.css ---- */ .dmp .shead { max-width: none; } .dmp .shead__eyebrow { margin: 0 0 14px; font-family: var(--font); font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-green); font-variant-numeric: tabular-nums; } .dmp .shead__title { margin: 0; font-family: var(--font); font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; color: var(--head-ink); text-wrap: balance; } .dmp .shead__copy { max-width: 60rem; text-wrap: pretty; margin: 20px 0 0; font-family: var(--font); font-size: clamp(16px, 1.15vw, 18px); font-weight: 500; line-height: 1.6; color: var(--body-ink); } /* On the one dark section the same two lines flip. Kept as a modifier on the SECTION so a section only ever declares its scheme once. */ .split--ink .shead__title { color: #FFFFFF; } .split--ink .shead__copy { color: rgba(255, 255, 255, .82); } /* THE EYEBROW TAKES TWO GREENS, and the light one is not the brand green. Measured: on #FFFFFF on --surface on ink #71B745 brand 2.45 2.24 7.00 #49772D light-section 5.30 4.83 — The eyebrow is 15-18px at weight 700, which is just under the 18.66px large-text threshold, so its floor is 4.5 and not 3.0. #71B745 fails that on both light grounds by a wide margin — 2.45 is not a near miss. #49772D is the same hue mixed 35% toward black and clears on both, with --surface the harder of the two at 4.83. On ink the brand green is 7.0:1 and stays exactly as it is. */ .split .shead__eyebrow { color: #49772D; } .split--ink .shead__eyebrow { color: var(--accent-green); } .dmp .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* Ghost on the light sections, ghost-light on ink — a navy outline on navy is invisible. */ .btn--ghost { background: transparent; border-color: #0B1226; color: #0B1226; } .btn--ghost:hover { background: #0B1226; color: #FFFFFF; } @media (max-width: 1040px) { .split__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; } /* The reorder has to be undone when stacked, or the reversed instance puts its photograph above its own heading. */ .split--rev .split__media { order: 0; } } @media (max-width: 640px) { .split__photo { border-radius: 16px; } .dmp .btn-row .btn { width: 100%; } } /* ============================================================ ALLOWED & PROHIBITED ITEMS — ICON LIST, ON LIGHT TREATMENT A OUT OF design-lab/allowed-prohibited.html. The lab put four of these side by side; this is the one that was picked, and it was drawn on light. The band it replaces was live's #1d1f1e. WHY IT CAME OFF THE DARK BAND. Three reasons, in order of weight: 1. This is the one section on the page a customer has to SCAN, and light-on-dark is measurably slower to scan for long lists of short phrases. Hiding it behind a click was the first thing that went; the dark ground was the second. 2. #1d1f1e was a third colour system. The page runs #FFFFFF, --surface (#F1F5F7) and ink navy (#131B2E). That grey-black is none of them — it was live's, kept while the rest of the section was rebuilt, and nothing else on the page answers it. 3. It never filled its own band. The two panels stopped well short of the bottom and left a dead strip of near-black. THE YES/NO PAIR, measured on #FFFFFF: #3F6B26 allowed 6.28 #B3261E prohibited 6.54 Both clear the 4.5 floor with room, and both are safe on --surface as well (5.73 and 5.96) if this section is ever re-grounded. They carry the column headings and the glyph fills, never body copy. COLOUR IS NOT DOING THIS ALONE. Every row is led by a drawn tick or a drawn cross, so the distinction survives greyscale and survives a reader who cannot separate the two hues. Each column also says which it is in words. No emoji anywhere — both glyphs are SVG. THE ROWS ARE NOT NUMBERED. They were, because live typed "1. 2. 3." into a paragraph and the earlier build turned that paragraph into a real
    . Numbers claim a sequence, and these five categories have none —
      now, in both columns. WHY IT CLOSES ON A HAIRLINE. The FAQ underneath is also #FFFFFF, so without a rule the two sections run together into one white field. #E4E7EE is the FAQ's own row hairline and this file's one light rule colour, so the boundary and the rows inside this section are both drawn in a grey the page already uses. The section above is .split--surface, which separates the top edge on its own. ============================================================ */ .fn-section-8 { width: 100%; padding: var(--sec-pad) 20px; background: #FFFFFF; border-bottom: 1px solid #E4E7EE; } .fn-container-grid-8 { width: 100%; max-width: var(--rail); margin: 0 auto; } /* The heading takes .shead__title's face, weight and tracking, like every other section title on the page, and centres like the services pair above it. */ .dmp .items__title { margin: 0; font-family: var(--font); font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; color: var(--head-ink); text-align: center; text-wrap: balance; } .dmp .items__lede { margin: 14px auto 0; max-width: 60ch; font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--body-ink); text-align: center; text-wrap: pretty; } .dmp .items__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: 46px; } /* A 2px rule in the column's own colour, under a glyph and a word. The rule is what tells the two columns apart at arm's length; the glyph and the word are what tell them apart up close. */ .dmp .items__colhead { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px solid; } .dmp .items__col--yes .items__colhead { border-color: rgba(63, 107, 38, .28); color: #3F6B26; } .dmp .items__col--no .items__colhead { border-color: rgba(179, 38, 30, .26); color: #B3261E; } .dmp .items__colname { margin: 0; font-family: var(--font); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } /* The glyphs never scale with the text — flex: none keeps a 20px tick 20px wide however long the label beside it wraps. */ .dmp .items__ic { flex: none; display: block; } .dmp .items__list { margin: 0; padding: 0; list-style: none; } /* Two rows, two columns: the glyph spans both rows in the first column, the label sits above its examples in the second. */ .dmp .items__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding: 15px 0; border-bottom: 1px solid #E4E7EE; font-family: var(--font); } .dmp .items__list li:last-child { border-bottom: 0; } .dmp .items__list .items__ic { grid-row: 1 / span 2; margin-top: 2px; } .dmp .items__label { font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--head-ink); } /* --body-ink on white measures 7.8:1, well past the 4.5 floor. */ .dmp .items__eg { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--body-ink); } /* Stacked, the columns need more air between them than the 24px that sat between the old panels — there is no border around either one now, so the gap is the only thing ending the first list. */ @media (max-width: 900px) { .dmp .items__grid { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 620px) { .dmp .items__grid { margin-top: 36px; } .dmp .items__list li { padding: 14px 0; } } /* ============================================================ FREQUENTLY ASKED QUESTIONS — v2's .faq, NOT LIVE'S THE SAME COMPONENT AS v2/junk-removal-page/'s FAQ, on request: same class names, same measurements, same hairline rows, same plus-to- minus icon. The two service pages should answer questions the same way. IF YOU CHANGE THE FAQ, CHANGE IT IN BOTH: v2/junk-removal.css and this file. WHAT LIVE HAD. A white card with 20px inset shadows on both sides, floating on a green gradient (#0fa608 -> #247a2e), the heading in a white pill with an 18px border and a 20px radius, Poppins throughout, and a chevron that rotated 180deg. None of that appears anywhere else in v2, and the green band in particular was the last saturated colour left on the page. WHAT IT IS NOW. White section, 860px column, questions separated by 1px hairlines, .shead type for the heading, and a plus that becomes a minus — two bars with the vertical one rotating away, transform only so it animates on the compositor rather than the main thread. THE MECHANISM STAYS
      /. It already was here — live drives its accordion from Webflow's ix2 with an inline height:0px on every answer, and this build replaced that so the section works without Webflow's runtime, keyboard-operable and open to find-in-page. junk-removal.css's FAQ is built the same way, so nothing had to change. ============================================================ */ .faq { background: #FFFFFF; padding: var(--sec-pad) 20px; } .faq__inner { max-width: 860px; margin: 0 auto; } .faq__list { margin-top: 40px; } .faq__item { border-bottom: 1px solid #E4E7EE; } .faq__item:first-child { border-top: 1px solid #E4E7EE; } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; /* kills the default triangle */ font-family: var(--font); font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; color: var(--head-ink); transition: color .2s linear; } /* Safari needs this one separately; it does not honour list-style on a summary. */ .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--blue); } .faq__q:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } /* Plus that becomes a minus. Two bars, the vertical one rotated to nothing when the item opens — transform only, so it animates on the compositor. */ .faq__icon { position: relative; flex: none; width: 22px; height: 22px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--blue); transform: translate(-50%, -50%); transition: transform .22s ease, opacity .22s ease; } .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .faq__a { margin: 0; padding: 0 4px 26px; max-width: 68ch; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--body-ink); } /* Live bolds a phrase in each answer. Kept — it is the client's own emphasis — but at 600 against the body's 400 rather than the browser default 700, which is heavy next to Montserrat at this size. */ .faq__a strong { font-weight: 600; color: var(--head-ink); } @media (prefers-reduced-motion: reduce) { .faq__q { transition: none; } .faq__icon::before, .faq__icon::after { transition: none; } } /* ============================================================ BREAKPOINTS — Webflow's four, in its order. Verbatim apart from three deletions. Webflow sized the DUMPSTER SERVICES rail here — .rl-padding-section-large-4 at 991 and 767, .rl-padding-global-8 at 479 — and that section is a full-bleed diptych now with no rail to size, so those three lines addressed nothing. Everything else in this block is still live. ============================================================ */ @media screen and (min-width: 1440px) { .rl-padding-global-5 { padding-left: 10vw; padding-right: 10vw; } .rl-padding-section-large-3-copy-copy { background-color: #1f2a2e; } } @media screen and (max-width: 991px) { .rl_layout250_spacing-block-1 { padding-bottom: 4.5rem; } .rl_layout250_content { grid-column-gap: 2rem; } .rl-padding-section-large-3-copy-copy { padding-top: 6rem; padding-bottom: 6rem; } } @media screen and (max-width: 767px) { .rl_layout250_spacing-block-1 { padding-bottom: 3rem; } .rl_layout250_spacing-block-3 { padding-bottom: 1.25rem; } .rl_layout250_content { grid-row-gap: 3rem; grid-template-columns: 1fr; } .rl_layout250_spacing-block-2 { padding-bottom: 1.5rem; } .rl-padding-section-large-3-copy-copy { padding-top: 4rem; padding-bottom: 4rem; } } @media screen and (max-width: 479px) { .rl_layout250_content { grid-template-columns: 1fr; } } /* ============================================================ FINAL CTA — v2's .cta BAND THE SAME COMPONENT AS v2/junk-removal-page/'s and v2/about/'s, on request: photograph on the left, panel on the right, ranged left. junk-removal.css lifted it from about.css; this is the third copy. IF YOU CHANGE THE CTA, CHANGE IT IN ALL THREE: v2/about.css, v2/junk-removal.css and this file. Moving it into v2.css is the fix now that a third page wants it — it was already flagged as the fix when the second one did. WHAT IT REPLACED HERE: .fn-cta-banner-dark, the live site's dark band, which this page carried one-to-one off njindooroutdoor.com. The junk removal page dropped the same band for the same component before this page did, so the two now end identically. NOTHING ELSE ON THE PAGE STILL USES .fn-cta-banner-dark, and neither does the junk removal page. Its rules are still sitting in live-sections.css and are now dead — left there rather than deleted because that file is shared and deleting from it is its own decision. TWO THINGS THE OLD BAND HAD THAT THIS DOES NOT: · "GET A FREE ESTIMATE NOW!" is gone. It pointed at /get-a-free-quote/ — the same URL as BOOK NOW! right beside it — so the band offered one destination twice. This carries one button and the phone number, which is two real choices rather than two of one. Same call the junk page made. · the office-desk photograph, cta-banner.webp. This uses cta-cleanout.webp, which is what About and Junk Removal both use. Three pages now share one picture — worth a swap eventually, but swap it for a dumpster photograph, not the desk; about.css has the long argument for why the desk loses in exactly this layout. The numbers below are about.css's, and its reasoning is not duplicated here. The short version: the split is 58/42 rather than even so the photograph is worth looking at and the headline can run 54px without wrapping badly, and white on var(--blue) is 4.64:1 where navy on it is 4.01:1. ============================================================ */ .cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: var(--surface); } .cta__media { position: relative; overflow: hidden; min-height: 420px; } /* transform-origin tracks object-position so the scale pushes out from the same point the crop is aimed at. Change the two together or not at all. */ .cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transform: scale(1.06); transform-origin: 50% 48%; } /* Ranged left, not centred: centred text in a half-panel has no edge to line up against, so the heading, paragraph, button and phone line each start at a different x. */ .cta__panel { display: flex; align-items: center; justify-content: flex-start; padding: 96px 56px; text-align: left; } .cta__inner { max-width: 29rem; } .cta__title { margin: 0 0 22px; font-family: var(--font); font-weight: 300; font-size: clamp(32px, 4.1vw, 54px); line-height: 1.1; letter-spacing: -.04em; color: var(--head-ink); } .cta__copy { margin: 0 0 36px; max-width: 46ch; font-family: var(--font); font-size: 16.5px; line-height: 1.65; color: var(--body-ink); } .cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 38px; border-radius: 999px; background: var(--blue); font-family: var(--font); font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: #FFFFFF; transition: background-color .2s ease; } .cta__btn:hover { background: var(--blue-hover); } .cta__btn:focus-visible { outline: 3px solid var(--head-ink); outline-offset: 3px; } /* Live runs TWO buttons in this block — BOOK NOW! and GET A FREE ESTIMATE NOW! — and v2 had only the first. Same treatment as the About and Junk Removal closing CTAs. The panel is var(--surface), a light ground, so the ghost is a blue outline; an older comment in dumpster/index.html called this "the dark CTA" and was describing a design that no longer exists. */ .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Live's H1 is "EXPERIENCE HASSLE-FREE DUMPSTER RENTALS!" and the hyphen is a legal break point, so the headline was wrapping as "EXPERIENCE HASSLE-" / "FREE DUMPSTER RENTALS!" — splitting a hyphenated compound across lines. Holding it together moves the break to the space before the accent span, which is where the line wants to turn anyway. */ .shero__nb { white-space: nowrap; } .cta__btn--ghost { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); } .cta__btn--ghost:hover { background: rgba(47, 111, 229, .08); border-color: var(--blue-hover); color: var(--blue-hover); } /* The call line is one anchor now, matching live, so it needs to read as a link rather than inherit the note's body colour. */ .cta__note .cta__tel { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .cta__note .cta__tel:hover { color: var(--blue); } .cta__note { margin: 22px 0 0; font-family: var(--font); font-size: 15px; color: #3F4655; } .cta__tel { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(63, 70, 85, .35); } .cta__tel:hover { border-bottom-color: #0B1226; } /* Stack below 900: the panel's measure and the photo's crop both stop working in a half-column narrower than about 440px. Stacked, the band is a wide short letterbox, so cover keeps the full width and slices top and bottom — the reverse of the desktop crop. 1.14 pulls the pile back up to filling that strip. */ @media (max-width: 900px) { .cta { grid-template-columns: 1fr; } .cta__media { min-height: 320px; } .cta__media img { transform: scale(1.14); } .cta__panel { padding: 64px 28px 72px; } .cta__inner { max-width: none; } } @media (max-width: 480px) { .cta__panel { padding: 52px 18px 60px; } /* Full width rather than a lone pill floating in a narrow column. */ .cta__btn { display: flex; width: 100%; padding-inline: 20px; } .cta__actions { flex-direction: column; width: 100%; } } @media (prefers-reduced-motion: reduce) { .cta__btn { transition: none; } }