…
Numbered because the ORDER is the product. Add class nl-tl-hit to the row
that carries the 3 cm trigger.
------------------------------------------------------------------------ */
.nl-tl{ list-style:none; margin:0; padding:0; position:relative; max-width:820px; }
.nl-tl::before{ content:""; position:absolute; left:112px; top:10px; bottom:10px; width:1px;
background:linear-gradient(180deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent); }
.nl-tl li{ display:grid; grid-template-columns:112px 1fr; gap:0 34px; position:relative; padding-block:16px; }
.nl-tl li::after{ content:""; position:absolute; left:108px; top:24px; width:9px; height:9px;
border-radius:50%; background:var(--bg); border:1.5px solid var(--line-strong); }
.nl-tl-t{ font-family:var(--mono,ui-monospace,Menlo,monospace); font-variant-numeric:tabular-nums;
font-size:.82rem; font-weight:600; color:var(--mut); text-align:right; padding-top:2px; }
.nl-tl-c h3{ font-size:1rem; margin:0 0 5px; color:#fff; }
.nl-tl-c p{ margin:0; font-size:.9rem; color:var(--body); line-height:1.6; max-width:58ch; }
.nl-tl-hit .nl-tl-t{ color:var(--green-l); font-weight:700; }
.nl-tl-hit::after{ background:var(--green-l); border-color:var(--green-l);
box-shadow:0 0 0 4px rgba(111,191,115,.18), 0 0 18px rgba(111,191,115,.75); }
.nl-tl-hit .nl-tl-c h3{ color:var(--green-l); }
@media (max-width:940px){
.hero .hero-card{ transform:none; }
.nl-tl::before{ left:8px; }
.nl-tl li{ grid-template-columns:1fr; gap:4px; padding-left:34px; padding-block:14px; }
.nl-tl li::after{ left:4px; top:20px; }
.nl-tl-t{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
.hero .hero-card{ transform:none !important; }
.nl-tilt{ transform:none !important; }
}
/* ---------------------------------------------------------------------------
9. THE SUMMER WEEK GRID —
------------------------------------------------------------------------ */
.nl-weeks{ width:64px; flex:0 0 64px; height:180px; display:grid;
grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:4px; }
.nl-weeks i{ display:block; border-radius:2px; background:rgba(111,191,115,.2);
border:1px solid rgba(111,191,115,.3); }
.nl-weeks i.on{ background:var(--green-l); box-shadow:0 0 8px rgba(111,191,115,.55); }
@media (max-width:760px){ .nl-weeks{ width:100%; flex:0 0 84px; height:84px; grid-template-columns:repeat(13,1fr); } }
/* ---------------------------------------------------------------------------
10. THE RENDERED SWEEP, AND WHAT IT FOUND
Sections 2 and 3 inverted the SURFACES. They did not touch the INK, and the
site sets most of its ink from --navy and --green, both of which are fills
chosen for a white page. Measured across all 44 pages: 960 failing elements.
The three big families were headings at 1.55:1, body links at 3.50:1 and the
gold button at 2.24:1. Everything below is measured, not guessed.
------------------------------------------------------------------------ */
/* Headings. The site sets h2/h3 to navy #1F3864, which is 1.55:1 on the ground.
--navy is NOT changed: it is still the brand fill for bands and table heads.
Only the ink moves. */
h1, h2, h3, h4, h5, h6,
.sec-head h2, .card h3, .plan h3, .offer h3, .faq-item summary{
color:var(--char); /* #FFFFFF, 17.97:1 on --bg */
}
.tier, .plan-head .tier, .offer-tier{ color:#fff; }
/* Body links. Canon green is 3.50:1 on the ground and fails the 4.5 floor.
Same hue, lifted for a dark page, exactly as --gold was: 8.02:1. */
main a, .card a, .faq-body a, .note a, li a, p a, td a, dd a{
color:var(--green-l);
}
main a:hover, .card a:hover, p a:hover, li a:hover{ color:#9BD79E; }
/* The gold button. Lifting --gold to #D9A521 for text legibility broke the one
place gold is a FILL: white on it measured 2.24:1. Dark ink on gold is
7.52:1 and is the only pairing that works on a gold pill. */
.btn--gold, .plan-flag, .offer-flag{
background:var(--gold);
color:#241C06 !important;
}
.btn--gold:hover{ background:#C79418; color:#241C06 !important; }
/* Prices, table price cells and inline emphasis all read from --green or --mut */
.price-cell, .price, .offer-price, .plan .price{ color:var(--green-l); }
em, .photo em, .form-note, .offer-fine, .small, .muted{ color:var(--mut); }
/* Form labels were navy on the ground */
label, legend, .field label, .form-grid label{ color:var(--body); }
label b, label strong{ color:#fff; }
/* A checkbox consent line and its helper text */
.field span, .form-note span{ color:var(--body); }
/* Steps, notes and callouts set their heading from --navy too */
.step h3, .note h2, .note h3, .note--band strong, .card-body h3{ color:#fff; }
.note--ice h2, .note--ice h3, .note--green h2, .note--green h3,
.note--gold h2, .note--gold h3, .note--navy h2, .note--navy h3{ color:#fff; }
.note, .note p, .note li{ color:var(--body); }
/* The last 21, each pinned to the rule that declared them ------------------ */
/* .tbl .price-cell beat a bare .price-cell on specificity */
.tbl .price-cell, .tbl td.price-cell{ color:var(--green-l); }
/* .trust li is set to navy, 1.55:1 on the ground */
.trust li{ color:var(--body); }
.trust li strong, .trust li b{ color:#fff; }
/* the consent helper em declares its own --mut, which is a light-page grey */
.field em, .form-note em, form em{ color:var(--mut); }
/* A white card inside a navy band deliberately keeps navy ink, because the card
used to be white. It is not any more, so the rule inverts with the surface. */
.sec--navy .card h3, .sec--navy .card h4{ color:#fff; }
.sec--navy .card, .sec--navy .card p, .sec--navy .card li{ color:var(--body); }
/* An INLINE style="color:#5A6B80" on the consent note beat every stylesheet
rule, because inline wins on specificity. The inline colour was removed from
the two pages that carried it and replaced with this class. The rule below is
the belt to that braces, in case the generator re-emits the inline form. */
.consent-note{ color:var(--mut); }
[style*="#5A6B80"], [style*="#5a6b80"]{ color:var(--mut) !important; }
/* ---------------------------------------------------------------------------
11. THE HERO GROUND
The site's hero paints its own lighter navy gradient, which is why a themed
page and the design preview did not look like the same site. The hero now
sits on the SAME ground as the page, with the light pool behind it, and the
type treatment carries the weight instead of a background change.
------------------------------------------------------------------------ */
.hero, .page-hero{
background:transparent !important;
position:relative;
}
/* THE POOL IS DRAWN INSIDE THE BOX, NEVER WIDER THAN IT.
This was `width:130%` centred with a translate, which put 15 per cent of the
ellipse outside the viewport on every page whose hero is `.page-hero`, and
`.page-hero` has no overflow rule of its own the way `.hero` does. The
result was 216px of horizontal scroll at 1440 and 59px at 390 on roughly
forty pages, which on a phone is a page that slides sideways under the
thumb. The ellipse is now shaped by the GRADIENT rather than by an
oversized box, so it reads the same and cannot overflow anything. */
.hero::before, .page-hero::before{
content:""; position:absolute; left:0; right:0; top:-18%; height:96%;
z-index:0; pointer-events:none; border-radius:50%;
background:radial-gradient(ellipse 66% 100% at 50% 50%,
rgba(var(--accent-rgb),.17), rgba(31,56,100,.11) 42%, transparent 68%);
}
.hero::after, .page-hero::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:0;
background:linear-gradient(90deg,transparent,rgba(124,160,206,.45),transparent);
}
.hero > *, .page-hero > *{ position:relative; z-index:1; }
.hero h1, .page-hero h1{ text-shadow:0 2px 40px rgba(0,0,0,.7), 0 0 50px rgba(var(--accent-rgb),.3); }
/* the hero's own card sits on its plane, as it does in the design */
.hero-grid, .page-hero .wrap{ perspective:1400px; }
.hero-card, .page-hero .offer{
transform:rotateY(-6deg) rotateX(1.5deg);
transition:transform .5s cubic-bezier(.22,.9,.28,1), box-shadow .5s ease;
box-shadow:-24px 34px 70px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(124,160,206,.16);
}
.hero-card:hover, .page-hero .offer:hover{ transform:rotateY(-2deg) rotateX(0) translateZ(14px); }
@media (max-width:940px){ .hero-card, .page-hero .offer{ transform:none; } }
/* the block storm.js injects, so it sits like a section of the page */
.nl-block{ padding-block:var(--nl-gap,64px); }
.nl-block > .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.nl-two{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; }
.nl-two > *{ height:100%; }
@media (max-width:940px){ .nl-two{ grid-template-columns:1fr; } }
.nl-lead{ max-width:60ch; margin:0 0 28px; }
.nl-lead h2{ margin:0 0 10px; }
.nl-lead p{ margin:0; color:var(--body); }
/* ---------------------------------------------------------------------------
12. THE HERO PROOF CHIPS
The site renders the proof line as green-ticked text and the reassurance line
as pills. In the design both are pills, which reads as a row of credentials
rather than a bulleted list. Same markup, restyled.
------------------------------------------------------------------------ */
.hero-proof{ gap:8px; margin-top:24px; }
.hero-proof li{
padding:6px 14px;
border:1px solid var(--line-strong);
border-radius:999px;
background:rgba(11,23,41,.62);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
font-size:.8rem; font-weight:500; color:var(--body);
}
.hero-proof li::before{ display:none; } /* the tick belongs on a list, not a chip */
.hero-proof li strong, .hero-proof li b{ color:#fff; font-weight:600; }
.hero-badges li{
background:rgba(11,23,41,.62);
border:1px solid var(--line-strong);
color:var(--body); font-size:.8rem;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* the eyebrow carries the season, as it does in the design */
.eyebrow, .eyebrow--light{
font-family:var(--font-mono); font-weight:600; font-size:.72rem;
letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
/* ---------------------------------------------------------------------------
13. THE SEASONAL CARD IN THE HERO
Inner pages ship a single-column hero. storm.js splits it into the two
columns the design uses and puts the seasonal card on the right: the 3 cm
gauge in winter, the 26-week season card in summer. The home page keeps its
Gold offer card instead, because a diagram should not displace the price.
------------------------------------------------------------------------ */
.nl-herogrid{
display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
perspective:1400px; perspective-origin:60% 50%;
}
.nl-heroright{ transform-style:preserve-3d; }
.nl-heroright > .nl-card{
transform:rotateY(-6deg) rotateX(1.5deg);
transition:transform .5s cubic-bezier(.22,.9,.28,1), box-shadow .5s ease;
box-shadow:-24px 34px 70px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(124,160,206,.16);
}
.nl-heroright > .nl-card:hover{ transform:rotateY(-2deg) rotateX(0) translateZ(14px); }
@media (max-width:940px){
.nl-herogrid{ grid-template-columns:1fr; gap:34px; }
.nl-heroright > .nl-card{ transform:none; }
}
/* ---------------------------------------------------------------------------
14. THE PHONE. THE ACTION COMES BEFORE THE EXPLANATION.
Measured on a 390px viewport, 13 September 2026: the first button sat 629px
down, behind a four line headline, a six line paragraph and four proof chips,
and a phone shows about 500px of page under the browser chrome. The most
motivated visitor this business gets, somebody searching snow removal on a
phone, had to scroll before they could act.
NOTHING IS HIDDEN AND NO WORD IS CUT. The order is changed, which is a mobile
pattern rather than a compromise: headline, action, then the explanation for
the people who want it. A visitor who already knows what they want stops
reading at the button, and a visitor who does not carries on down the page.
------------------------------------------------------------------------ */
@media (max-width:760px){
/* THREE SHAPES, ONE RULE. The home page hero puts its copy in .hero-left; an
inner page puts it straight in the .wrap; and once the season card is added
that .wrap holds a .nl-heroleft instead. All three are the same box doing
the same job, so all three are ordered the same way. */
.hero .hero-left,
.page-hero > .wrap,
.page-hero .nl-heroleft{ display:flex; flex-direction:column; }
.hero .hero-left > *,
.page-hero > .wrap > *,
.page-hero .nl-heroleft > *{ order:8; }
.hero .hero-left > .eyebrow,
.page-hero > .wrap > .eyebrow,
.page-hero .nl-heroleft > .eyebrow{ order:1; }
.hero .hero-left > h1,
.page-hero > .wrap > h1,
.page-hero .nl-heroleft > h1{ order:2; line-height:1.1; margin-bottom:8px; }
.hero .hero-left > .btn-row,
.page-hero > .wrap > .btn-row,
.page-hero .nl-heroleft > .btn-row{ order:3; margin:0 0 10px; }
/* THE SECOND ACTION SITS WITH THE FIRST, NOT BELOW THE READING.
`.hero-link` is the alternative way to act: the quote form on /contact, the
memberships page everywhere else. It was landing after the proof chips,
which on /contact put the form link off the bottom of a phone screen while
the page's whole job is collecting that form. Two ways to act, both above
the fold, then the explanation. */
/* THE SECOND ACTION SITS WITH THE FIRST ONLY WHERE IT IS AN ACTION.
`.hero-link` is two different things wearing one class. On /contact it
points at the quote form ON THIS PAGE, which is the page's entire job, and
it belongs beside the buttons. Everywhere else it points at another page,
which is navigation, and putting navigation above the opening paragraph
costs two lines of the only paragraph anybody reads. Told apart by where
the link GOES, not by a list of pages: an in page anchor is an action, a
link to somewhere else is not. A browser without `:has()` gets the safe
half of this, which is the link after the paragraph. */
.hero .hero-left > .hero-link,
.page-hero > .wrap > .hero-link,
.page-hero .nl-heroleft > .hero-link{ order:6; margin:0 0 12px; }
.hero .hero-left > .hero-link:has(a[href^="#"]),
.page-hero > .wrap > .hero-link:has(a[href^="#"]),
.page-hero .nl-heroleft > .hero-link:has(a[href^="#"]){ order:4; }
.hero .hero-left > .lead,
.page-hero > .wrap > .lead,
.page-hero .nl-heroleft > .lead{ order:5; margin-bottom:12px; line-height:1.5; }
.hero .hero-left > .hero-proof,
.page-hero > .wrap > .hero-proof,
.page-hero .nl-heroleft > .hero-proof{ order:7; }
/* the grid itself must stay first in the wrap, or the card outruns the copy */
.page-hero > .wrap > .nl-herogrid{ order:1; }
/* THE BUTTONS ARE FULL WIDTH AND STACKED, AND THEY ARE NOT OVERSIZED.
Measured at 375px: two buttons at 60px each, with an 18px gap under them,
pushed the opening paragraph to exactly 500px, which is the fold. The
paragraph was cut in half by the pinned bar on a real phone. 48px is a
comfortable target and it is still four pixels above the 44px
accessibility floor, so this buys 24px of readable page and costs nothing
anybody can feel with a thumb. */
.hero .hero-left > .btn-row .btn,
.page-hero > .wrap > .btn-row .btn,
.page-hero .nl-heroleft > .btn-row .btn{
width:100%; justify-content:center;
min-height:48px; padding:11px 18px; font-size:.97rem;
}
.hero .hero-left > .btn-row,
.page-hero > .wrap > .btn-row,
.page-hero .nl-heroleft > .btn-row{ gap:10px; }
/* AND THE ACTION NEVER LEAVES THE SCREEN.
The page already carries a mobile call to action block and it was sitting
at the very bottom, 23,910px down, where it is not a call to action, it is
a footer. Pinned to the bottom of the viewport it is reachable from every
word of every page, which on a one truck local business is the difference
between an inquiry and a back button. */
.mobile-cta{
position:fixed; left:0; right:0; bottom:0; z-index:60;
margin:0; border-radius:0;
border-top:1px solid var(--line-strong);
background:rgba(8,17,31,.94);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
box-shadow:0 -10px 30px -12px rgba(0,0,0,.8);
padding:7px 12px calc(7px + env(safe-area-inset-bottom));
}
/* AND THE PINNED BAR IS A BAR, NOT A PANEL. It was 77px tall with 56px
buttons, which is a seventh of a phone screen spent on two words, and it
was the thing cutting the opening paragraph in half. 46px buttons in a
60px bar are still a comfortable thumb target and give the page back
seventeen pixels where they matter most, at the bottom of the fold. */
.mobile-cta .btn{ min-height:46px; padding:10px 14px; font-size:.95rem; }
body{ padding-bottom:72px; }
}
/* ---------------------------------------------------------------------------
15. THE TOUCH TILT SURFACE
The script sets an inline transform every frame, so nothing here may set a
competing one. What this rule does is give the card a real 3D context and a
transition for the frames BETWEEN animation bursts, so a card that has
settled and is then touched does not jump.
------------------------------------------------------------------------ */
.nl-tilt3d{
transform-style:preserve-3d;
backface-visibility:hidden;
transition:box-shadow .3s ease;
}
@media (hover:none){
/* SQUARE FROM FIRST PAINT, NOT FROM WHEN THE SCRIPT RUNS.
The stylesheet gives these cards a resting angle, which is right on a
pointer device and wrong on a phone: with no hover there is nothing for a
resting angle to resolve into, so it just reads as a card that is not
straight. The script sets an inline transform of its own, but only once it
has run, and a tilt on the first frame is still a tilt somebody sees. */
.hero-card, .page-hero .offer, .nl-heroright > .nl-card,
.hero-grid .hero-card, .plan, .nl-card{ transform:none; transition:none; }
/* a pressed card earns a little more shadow, which is what makes a tap feel
like it touched something rather than just changed colour */
.nl-tilt3d:active{ box-shadow:var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce){
.nl-tilt3d{ transform:none !important; }
}