/* ============================================================
NJ INDOOR OUTDOOR — /pricing/'s OWN SECTIONS
The page slice, section by section, as each one comes out of the
mirrored Webflow embed and is rebuilt in v2's language. v2-hero.css
carries the hero, which is a SHARED component with the two service
pages; this file carries what belongs to this page alone. Same
split as v2.css against dumpster.css.
IT CANNOT BE v2.css, for the reason the other two slices give: this
page is styled by Webflow's stylesheet and the two collide on *,
html, body, a and img.
THE BRIDGE BLOCK IS THE SAME TRICK, and the same warning applies —
Webflow owns h2, h3, p, ul, li and a on this page, so every rule
below is scoped to a section root and wrapped in :where(), which
contributes no specificity. UNSCOPED IT WOULD RESTYLE THE WHOLE
MIRRORED PAGE.
VERIFIED BEFORE WRITING: `.dsize` appears nowhere in Webflow's
137KB stylesheet.
============================================================ */
/* --- bridge: v2's base rules, scoped to this page's sections --- */
:where(.dsize, .jhaul, .pcta) {
font-family: var(--font);
color: var(--body-ink);
-webkit-font-smoothing: antialiased;
}
:where(.dsize, .jhaul, .pcta) h2,
:where(.dsize, .jhaul, .pcta) h3,
:where(.dsize, .jhaul, .pcta) p,
:where(.dsize, .jhaul, .pcta) ul { margin: 0; }
:where(.dsize, .jhaul, .pcta) ul { padding: 0; list-style: none; }
:where(.dsize, .jhaul, .pcta) li { margin: 0; }
:where(.dsize, .jhaul, .pcta) a { color: inherit; text-decoration: none; }
/* ============================================================
CHOOSE YOUR DUMPSTER SIZE — TREATMENT A OUT OF
design-lab/pricing-sizes.html
THE LAYOUT IS LIVE'S AND WAS NOT THE PROBLEM. Three cards, the
middle one featured, label over title with the lede to its right,
price under the size, five ticks, one button each — all kept, in
order. All three sizes, prices, weight limits, descriptions and
feature lines are live's to the character. What changed is the
style, and it changed for six specific reasons:
1. EVERYTHING WAS WEIGHT 900 — label, title, size, price, tick
and button, with no lighter weight anywhere on the section.
A spread of zero means nothing can be emphasised, so
everything shouts. v2 runs headings at 300 and body at 400,
and this section now uses 300 for the title, 300 for the
price and 600-700 for the small furniture.
2. THE CORNERS WERE 30px, AND 34px ON THE JUNK PANEL. Past about
20px a rectangle stops reading as a card and starts reading as
a sticker. v2's cards are 16-18px; these are 18.
3. THERE WERE FIVE COLOURED SHADOWS — 0 12px 32px on the card,
0 20px 44px on its hover, 0 24px 50px on the featured card,
0 10px 22px on the button and 0 8px 18px on the tag, every one
of them tinted blue or green rather than neutral. Nothing on
the section sat on the page. There are none now: a 1px
hairline does the work, and hover darkens it rather than
lifting the card.
4. THE CARD MOVED — translateY(-5px) on hover and a permanent
scale(1.025) on the featured one. Both gone. A card that is
1.025x its neighbours is also 1.025x their type, which is a
second, accidental type scale.
5. THE TWO COLOURS WERE NOT v2's. #00529f and #0fa608 against
v2's #2F6FE5 and #71B745. The featured card is now the ink
gradient the footer and the dark splits use, not a saturated
blue, and the eyebrow takes #49772D because #71B745 measures
2.45:1 on white and fails the 4.5 floor.
6. THE TICK WAS A TYPED CHARACTER, content: "✓" at weight 900 —
a font glyph pretending to be an icon, which changes shape
with the typeface and cannot be optically aligned. Drawn SVG
now, the same mark as /dumpster/'s allowed list.
THE RAIL MATCHES THE HERO'S EXACTLY — same max-width, same 5vw
padding — so "Dumpster Rentals" starts on the same vertical as
"Clear Pricing for" directly above it. That alignment is the only
thing tying a 1800px-wide hero to the content under it; if the hero
rail changes, change this one with it.
============================================================ */
.dsize {
background: #FFFFFF;
padding-block: var(--sec-pad, clamp(60px, 6.4vw, 92px));
}
/* THE PADDING GOES INSIDE THE max-width, NOT ON THE SECTION, and that
is the whole reason this is two rules instead of one. The hero puts
its 5vw on .shero__inner within an 1800px box, so at 1920 its type
starts at (1920-1800)/2 + 96 = 156. Padding the SECTION instead
starts the type at 96 — a 60px step between the headline above and
the eyebrow below, which is exactly the misalignment this rail
exists to avoid. Measured after the change: both land on 149. */
.dsize__inner {
max-width: 1800px;
margin: 0 auto;
padding-inline: clamp(20px, 5vw, 110px);
}
/* Live's arrangement, kept: label over title on the left, lede on the
right, bottom edges aligned. */
.dsize__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: clamp(24px, 4vw, 72px);
margin-bottom: 44px;
}
/* #49772D, not the brand #71B745. The eyebrow is 13px at weight 700,
under the 18.66px large-text threshold, so its floor is 4.5 and not
3.0 — and #71B745 measures 2.45:1 on white, which is not a near
miss. #49772D is the same hue mixed 35% toward black and lands at
5.30:1. Same value, same reasoning, as .split .shead__eyebrow in
dumpster.css. */
.dsize__eyebrow {
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #49772D;
}
.dsize__title {
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 300;
letter-spacing: -.04em;
line-height: 1.1;
color: var(--head-ink, #0B1226);
}
.dsize__lede {
max-width: 48ch;
font-size: 15.5px;
line-height: 1.7;
color: var(--body-ink, #4C5265);
text-wrap: pretty;
}
.dsize__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
/* One hairline, no shadow, 18px. #E4E7EE is this build's one light
rule colour — the FAQ's rows and the allowed/prohibited list use
the same value. */
.dsize__card {
position: relative;
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid #E4E7EE;
border-radius: 18px;
padding: 32px 30px 30px;
transition: border-color .2s linear;
}
.dsize__card:hover { border-color: #C9D2E0; }
/* THE FEATURED CARD IS INK, NOT BLUE, and it is a two-stop gradient
with a noise layer rather than a flat fill — the standing
dark-section rule. A flat dark area is what the display pipeline
spatial-dithers into a faint diagonal hairline across the whole
block. The two stops are five luminance steps apart and do not read
as a gradient. THE NOISE DIV IS NOT DECORATION; do not drop it. */
.dsize__card--feat {
overflow: hidden;
border-color: #131B2E;
background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%);
}
.dsize__card--feat:hover { border-color: #131B2E; }
.dsize__noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Live floats this tag half outside the card on a green shadow, which
is what breaks the top line of the grid. Inside the card, top
right, it labels the card instead of interrupting it.
#0B1226 on #71B745 measures 8.06:1. White on it is 2.45:1, which is
what live sets. */
.dsize__tag {
position: absolute;
top: 22px;
right: 22px;
z-index: 2;
background: #71B745;
color: #0B1226;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
}
.dsize__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1;
}
.dsize__size {
font-size: 26px;
font-weight: 600;
letter-spacing: -.03em;
line-height: 1.1;
color: var(--head-ink, #0B1226);
}
.dsize__tons {
margin-top: 6px;
font-size: 14px;
font-weight: 600;
color: var(--body-ink, #4C5265);
}
.dsize__pricerow {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #E4E7EE;
}
/* Weight 300 at 46px, against live's 900 at 50px. A price is the one
number on the card that does not need help being found; setting it
black as well as large is belt and braces, and it is what made the
section read as a toy shop. Tabular figures so the three prices
line up down the row. */
.dsize__price {
font-size: 46px;
font-weight: 300;
letter-spacing: -.04em;
line-height: 1;
color: var(--head-ink, #0B1226);
font-variant-numeric: tabular-nums;
}
.dsize__tax {
font-size: 14px;
font-weight: 600;
color: var(--body-ink, #4C5265);
}
.dsize__copy {
margin-top: 18px;
font-size: 14.5px;
line-height: 1.6;
color: var(--body-ink, #4C5265);
}
.dsize__list {
margin-top: 18px;
display: grid;
gap: 11px;
}
.dsize__list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
align-items: start;
font-size: 14px;
line-height: 1.45;
color: var(--head-ink, #0B1226);
}
.dsize__ic { flex: none; display: block; margin-top: 1px; }
.dsize__foot { margin-top: auto; padding-top: 26px; }
/* Every one of these flips on the ink card. Kept as a block rather
than spread through the file so a future colour change to the
featured card has one place to happen. */
.dsize__card--feat .dsize__size,
.dsize__card--feat .dsize__price,
.dsize__card--feat .dsize__list li { color: #FFFFFF; }
.dsize__card--feat .dsize__tons,
.dsize__card--feat .dsize__tax,
.dsize__card--feat .dsize__copy { color: rgba(255, 255, 255, .80); }
.dsize__card--feat .dsize__pricerow { border-bottom-color: rgba(255, 255, 255, .18); }
/* ============================================================
THE CARD BUTTONS
Ghost on the two white cards, solid white on the ink one — a navy
outline on navy is invisible, which is the same argument
.btn--ghost-light answers in the hero.
Full width, because a card button that is narrower than its card
leaves an ambiguous strip either side of it.
Contrast:
#0B1226 on #FFFFFF ... 18.42 ghost, at rest
#FFFFFF on #0B1226 ... 18.42 ghost, hovered
#0B1226 on #FFFFFF ... 18.42 solid white on the ink card
============================================================ */
:is(.dsize, .jhaul, .pcta) .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px; /* clears the 44px touch minimum */
padding: 0 24px;
border: 1px solid transparent;
border-radius: 100px;
font-family: var(--font);
font-size: 15.5px;
font-weight: 700;
line-height: 1;
text-align: center;
transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}
/* FULL WIDTH ON THE SIZE CARDS ONLY. A card button narrower than its
card leaves an ambiguous strip either side of it. The junk panel's
button is not in a card — it sits under a paragraph, where a
full-width pill would read as a banner. */
.dsize .btn { display: flex; width: 100%; }
/* THE BLUE ONE LIVES HERE TOO, NOT ONLY IN v2-hero.css. That file
scopes .btn--solid to .shero, so the closing CTA's Call button had
no rule at all and rendered as a bare Webflow link. Same values as
the hero's — #FFFFFF on #2F6FE5 is 4.64:1. */
:is(.dsize, .jhaul, .pcta) .btn--solid {
background: var(--blue, #2F6FE5);
border-color: var(--blue, #2F6FE5);
color: #FFFFFF;
}
:is(.dsize, .jhaul, .pcta) .btn--solid:hover {
background: var(--blue-hover, #2560CC);
border-color: var(--blue-hover, #2560CC);
}
:is(.dsize, .jhaul, .pcta) .btn--ghost {
background: transparent;
border-color: #0B1226;
color: #0B1226;
}
:is(.dsize, .jhaul, .pcta) .btn--ghost:hover { background: #0B1226; color: #FFFFFF; }
:is(.dsize, .jhaul, .pcta) .btn--light {
background: #FFFFFF;
border-color: #FFFFFF;
color: #0B1226;
}
:is(.dsize, .jhaul, .pcta) .btn--light:hover { background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .86); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1080px) {
/* Two up before one up. Three cards at this width leave each about
300px, which breaks "3 extra days free when you book now" onto
three lines. */
.dsize__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
.dsize__head {
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin-bottom: 34px;
}
.dsize__lede { max-width: 60ch; }
}
@media (max-width: 760px) {
.dsize__grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
.dsize { padding-block: 56px; }
.dsize__inner { padding-inline: 18px; }
.dsize__card { padding: 28px 22px 26px; }
/* The tag stops being a corner label and takes its own line, or it
collides with a two-word size at this width. */
.dsize__tag { position: static; display: inline-block; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
:is(.dsize, .jhaul, .pcta) .btn,
.dsize__card,
.jhaul__card { transition: none; }
}
/* ============================================================
WE LOAD IT. WE HAUL IT. YOU RELAX. — TREATMENT A OUT OF
design-lab/pricing-junk.html
THIS IS LIVE'S PANEL, KEPT, WITH THE TYPEFACE AND THE PALETTE
SWAPPED. Structure, radii, tints, pills, weights, the big coloured
price and the whole hierarchy are live's.
AND THAT IS A DELIBERATE REVERSAL OF THE FIRST ATTEMPT, which is
worth recording so nobody re-does it. The first pass treated this
panel the way the sizes section above was treated: panel removed,
tags dropped, prices at weight 300, four plain boxes on a tint. It
was rejected, and correctly — you could no longer see at a glance
that these are four separately priced things.
THE LESSON, STATED PLAINLY: this panel's problem was never that it
was bold. It was bold in the WRONG TYPEFACE AND THE WRONG COLOURS.
Boldness is what makes four price tiers read as four price tiers.
Do not take it out again.
THE COMPLETE LIST OF WHAT CHANGED:
1. Poppins -> Montserrat, at the weights live already used. 800
in Montserrat sits about where 900 does in Poppins.
2. #00529f -> #2F6FE5 on the price. Same 30px, same weight, same
prominence — v2's blue rather than a navy that appears nowhere
else in the build.
3. #0fa608 -> #71B745 on the button, and #49772D on the tag's
type. THIS ONE IS A CONTRAST FIX, NOT A PREFERENCE. Measured:
#0fa608 on its own 10% wash ... 2.89 FAILS the 4.5 floor
#49772D on the same wash ...... 4.73 PASS
#0B1226 on #71B745 ............ 8.06 the button
The tag is 11px at weight 800, which is under the 18.66px
large-text threshold, so its floor is 4.5 and not 3.0. 2.89 is
not a near miss.
4. The shadows go neutral. Live's were rgba(0, 82, 159, .1),
which lays a blue cast on the white page under every card.
5. The hover lift comes off — translateY(-3px). The border and
background change on hover stay.
NOT CHANGED, AND ASKED ABOUT: "15 yd truck" still appears on all
four cards while the copy to their left already opens "Our 15-yard
dump truck service". That is live's repetition and treatment A
keeps it. design-lab/pricing-junk.html's treatment C is the version
that fixes it, if it is ever wanted.
ONE FIX THAT IS NOT COSMETIC: live's button points at
https://www.njindooroutdoor.com/get-a-free-quote — the live domain.
Every other internal link was re-pointed into v2 when this page was
mirrored; this one inside the embed was missed, so it walked the
visitor off the v2 build. It points at /get-a-free-quote/ now.
============================================================ */
.jhaul {
background: #FFFFFF;
padding-block: var(--sec-pad, clamp(60px, 6.4vw, 92px));
}
/* Same rail as the hero and the sizes section — padding inside the
max-width, not on the section. See the note on .dsize__inner. */
.jhaul__inner {
max-width: 1800px;
margin: 0 auto;
padding-inline: clamp(20px, 5vw, 110px);
}
/* Live's outer panel, kept. It is the one place in this build where a
card holds other cards, and it survives because it is what makes
the section read as one offer with four prices rather than as four
loose boxes. */
.jhaul__panel {
background: #FFFFFF;
border: 1px solid #E4E7EE;
border-radius: 34px;
box-shadow: 0 16px 40px rgba(11, 18, 38, .07);
padding: clamp(28px, 3vw, 46px);
}
.jhaul__layout {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: clamp(28px, 3.4vw, 56px);
align-items: center;
}
.jhaul__eyebrow {
margin-bottom: 12px;
font-size: 13px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #49772D;
}
/* Weight 800, NOT the 300 the rest of v2's headings use. This panel is
supposed to be the loud one on the page and live set it at 900. */
.jhaul__title {
font-size: clamp(28px, 2.9vw, 40px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.12;
color: var(--head-ink, #0B1226);
}
.jhaul__copy {
margin-top: 16px;
max-width: 44ch;
font-size: 15.5px;
line-height: 1.7;
color: var(--body-ink, #4C5265);
}
.jhaul__btnwrap { margin-top: 28px; }
.jhaul__quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Live's card: a #f8fbff tint at 24px. The tint is a shade cooler here
so it separates from the panel's white by a little more. */
.jhaul__card {
background: #F6FAFF;
border: 1px solid #E1EBF5;
border-radius: 24px;
padding: 22px;
transition: border-color .2s linear, background-color .2s linear;
}
.jhaul__card:hover {
border-color: rgba(113, 183, 69, .55);
background: #F2F8FF;
}
.jhaul__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.jhaul__name {
font-size: 21px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.15;
color: var(--head-ink, #0B1226);
}
/* live: 30px / 900 / #00529f. Same size, same weight, v2's blue.
#2F6FE5 on #F6FAFF measures 4.45:1 — under the 4.5 body floor, but
this is 30px at weight 800, which is large text, so its floor is
3.0 and it clears with room. It is never used at body size on this
tint. */
.jhaul__price {
margin-bottom: 10px;
font-size: 30px;
font-weight: 800;
letter-spacing: -.03em;
line-height: 1;
color: var(--blue, #2F6FE5);
font-variant-numeric: tabular-nums;
}
.jhaul__desc {
font-size: 14px;
line-height: 1.55;
color: var(--body-ink, #4C5265);
}
.jhaul__tag {
flex: none;
background: rgba(113, 183, 69, .14);
border: 1px solid rgba(113, 183, 69, .35);
color: #49772D;
border-radius: 999px;
padding: 6px 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
white-space: nowrap;
}
/* The green button, ink on #71B745 at 8.06:1. White on it is 2.45:1,
which is what live sets. */
:is(.dsize, .jhaul, .pcta) .btn--green {
background: #71B745;
border-color: #71B745;
color: #0B1226;
}
:is(.dsize, .jhaul, .pcta) .btn--green:hover { background: #63A63B; border-color: #63A63B; }
@media (max-width: 1080px) {
.jhaul__layout { grid-template-columns: 1fr; gap: 32px; align-items: start; }
.jhaul__copy { max-width: 60ch; }
}
@media (max-width: 680px) {
.jhaul__quad { grid-template-columns: 1fr; gap: 12px; }
.jhaul__panel { border-radius: 26px; }
}
@media (max-width: 560px) {
.jhaul { padding-block: 56px; }
.jhaul__inner { padding-inline: 18px; }
/* The tag drops below the name rather than beside it — at this width
"Quarter Truck" and "15 yd truck" cannot share a line. */
.jhaul__top { flex-direction: column; gap: 8px; }
}
/* ============================================================
READY TO SCHEDULE YOUR CLEANUP? — TREATMENT C OUT OF
design-lab/pricing-cta.html
THE PAGE'S CLOSER, AND IT IS DELIBERATELY SHORT. The brief was that
the section looked fine and only needed the typeface and palette,
and that there was too much white space — so this is a port, and
the height is the thing that changed.
WHAT THE PORT SWAPPED, and nothing else:
Poppins -> Montserrat, at live's weights
#00529f -> #2F6FE5 on the call button
#0fa608 -> #71B745 with #0B1226 type on it (8.06:1; live sets
white on it, which is 2.45:1)
rgba(0,82,159,.1) shadow -> gone entirely, this band has none
WHAT THE LAYOUT CHANGED, and why. Live centres a 900px card inside
a 1200px container on a full-width band. Three of those four
decisions cost vertical height and none of them buy anything:
· the card is now a band across the full page rail, so the
heading and the copy sit left and the two buttons sit right, on
ONE ROW. Live stacks all three centred, which is three rows.
· the "Pricing may vary…" note stops floating between the junk
panel and the card — 26px of margin above, 34px below, centred,
alone — and moves inside the band under a hairline. A pricing
caveat belongs next to the thing it qualifies.
· the section padding is deliberately small. This is the last
thing before the footer and it was asked to sit tight against
it, so it takes about a third of --sec-pad rather than the
full value every other section uses. IT IS NOT A MISTAKE AND
IT IS NOT DRIFT — do not "fix" it to match the others.
Measured together, that is about 40% less height than live's card.
THE EMBED WENT WITH IT. This was the last thing inside
.nio-pricing-section, so removing it took the whole