s, so the global `section{padding-block:var(--section-y)}` in 20-layout.css applies and has to be cleared — 12 categories at 6rem of padding each would add three screens of dead air. scroll-margin-top tops up the global html{scroll-padding-top} in 10-reset.css (nav-h + 1rem) so a jumped-to category clears the sticky header with a small gap instead of sitting flush against it. Keep it small — the two ADD. */ .rn-cat{ padding-block:0; margin-top:clamp(2rem,4vw,3rem); scroll-margin-top:.5rem; } .rn-cat:first-of-type{ margin-top:0; } .rn-cat-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem; padding-left:.85rem; border-left:3px solid var(--accent); } .rn-cat-head h3{ font-size:var(--heading-3); text-transform:uppercase; } .rn-cat-count{ font-size:var(--body-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } .rn-cat-back{ margin-left:auto; font-size:var(--body-xs); text-transform:uppercase; letter-spacing:.09em; color:var(--muted); white-space:nowrap; } .rn-cat-back:hover{ color:var(--accent); } .rn-cat-blurb{ margin:.7rem 0 1rem; padding-left:calc(.85rem + 3px); max-width:78ch; font-size:var(--body-sm); color:var(--muted); } /* ----------------------------------------------------------- rate sheets -- */ .rn-sheets-panel .btn-pair{ margin-top:1.35rem; } /* ------------------------------------------------------------- book band -- */ .rn-book{ display:grid; grid-template-columns:1fr; gap:clamp(1.75rem,4vw,3rem); align-items:center; } .rn-book-copy .lede{ margin-top:1rem; } .rn-book-media{ overflow:hidden; border:var(--border); border-radius:var(--card-radius); background:var(--bg-2); } .rn-book-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .rn-related{ margin-top:1.5rem; font-size:var(--body-sm); color:var(--muted); } .rn-related a{ color:var(--text); border-bottom:1px solid var(--line-strong); } .rn-related a:hover{ color:var(--accent); border-bottom-color:var(--accent); } @media (min-width:760px){ .rn-book{ grid-template-columns:1fr 1fr; } .rn-book-media img{ aspect-ratio:5/4; } } /* ── styles/53-page-content.css ── */ /* ============================================================================ 53-page-content.css — /, /about, /service, /parts BREAKPOINTS: 760px and 1024px. There is no third one. NAMING: everything page-specific is prefixed `pc-`. This fragment is concatenated LAST, so an unprefixed `.hero` or `.figure` here would outrank .eq-hero / .rn-hero / .bs-hero in 50-52 and silently restyle three other agents' pages. The only unprefixed selectors below are deliberate additions to SHARED components (.panel--top, .badge-row--lg, .on-light .badge, .btn-pair--center) — each one additive, none redefining an existing rule. COLOUR: nothing here names a colour. Every accent is var(--accent), which the theme-* class on — or on any ancestor element — re-points. The homepage depends on that: has no theme, and each pillar teaser (plus the BOSS band and the /parts panels) carries its own theme-* wrapper. TYPE: sizes come from the tokens only (--heading-3, --body-sm, --body-xs). No literal font-size anywhere in this file. ========================================================================== */ /* ----------------------------------------------------------- reveal state -- MOVED to styles/90-motion.css (2026-07-30). This block was unscoped (`.anim [data-reveal]`), so despite living in a file named for four content pages it was the from-state for the WHOLE site — and it collided with three other copies: an identical one in 52-page-rentals.css, a bespoke one in 50-page-equipment.css, and a `.bs-reveal` one in 51-page-boss.css that landed on the same elements as this one on every BOSS page. 90-motion.css now owns a single global from-state and explicitly excludes .theme-equipment, which keeps its own. The safety reasoning is unchanged and written out in full there: the gate on `scripting: enabled` is what stops turning into a blank page when JavaScript never runs. Do not re-add a from-state here. -------------------------------------------------------------------------- */ /* --------------------------------------------------------------- pc-split -- The one two-column primitive these four pages use: hero, about intro, visit block, parts pair. Single column until 1024 — at 760 a photo beside a paragraph leaves both halves too narrow. -------------------------------------------------------------------------- */ /* minmax(0,1fr), not 1fr — a bare 1fr track has an auto minimum, so one long unbreakable string inside it pushes the grid wider than 375px instead of wrapping. Same reason .grid in 30-components.css spells it out. */ .pc-split{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); } @media (min-width:1024px){ .pc-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(2rem,4vw,4rem); align-items:center; } .pc-split--wide-first{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } .pc-split--top{ align-items:start; } } /* -------------------------------------------------------------- pc-figure -- Shared by the hero photo and the /about photo. The caption carries a short accent rule, which ties the photo into the page's colour system without tinting the photo itself. -------------------------------------------------------------------------- */ .pc-figure{ margin:0; } .pc-figure img{ width:100%; border:var(--border); border-radius:var(--card-radius); } .pc-figure figcaption{ margin-top:.9rem; padding-left:.8rem; border-left:2px solid var(--accent); font-size:var(--body-sm); color:var(--muted); } .on-light .pc-figure figcaption{ color:var(--muted-light); } /* ---------------------------------------------------------------- pc-hero -- Homepage only. The markup also carries the bare `hero` class, which is an anim.js hook, not a style hook: anything inside .hero is revealed immediately instead of waiting for the IntersectionObserver. Copy comes first in the DOM so a 375px screen reads the headline before it scrolls past a square photo. -------------------------------------------------------------------------- */ .pc-hero{ padding-block:clamp(2.25rem,5vw,4rem) var(--section-y); } .pc-hero h1{ margin-top:.15rem; } .pc-hero .lede{ margin-top:1.1rem; } .pc-hero .specs{ margin-top:1.6rem; } @media (min-width:1024px){ /* The source photo is square (1800x1773). Left unbounded it makes the hero taller than the viewport on a laptop, so it is capped and cropped from the centre — the sign and the two people both sit inside that crop. */ .pc-hero .pc-figure img{ max-height:34rem; object-fit:cover; } } /* ----------------------------------------------------------- pc-page-head -- Inner pages: breadcrumbs, then the section_head that carries the h1. -------------------------------------------------------------------------- */ .pc-page-head{ padding-bottom:clamp(1.5rem,3vw,2.5rem); } .pc-page-head .btn-pair{ margin-top:1.75rem; } /* ------------------------------------------------------------ pc-spectrum -- THE HOMEPAGE'S ONE PIECE OF PURPOSE-BUILT COLOUR. Three segments, generated from site.pillars in the same order as the three teaser cards below it, each wrapped in its own theme-* class so it paints var(--accent). It reads as a legend: it states that orange, red and yellow are ONE SET OF THREE before the eye meets them scattered across three cards. From 1024 it uses the same track sizing and gap as .grid--3, so each segment sits directly above the card whose 3px top border it matches. Decorative only — aria-hidden in the markup, no meaning carried by colour. -------------------------------------------------------------------------- */ .pc-spectrum{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; height:4px; margin-bottom:1.4rem; } .pc-spectrum > span{ display:block; background:var(--accent); } @media (min-width:1024px){ .pc-spectrum{ gap:var(--gap); } } /* ------------------------------------------------------------ pc-band-news -- Full-bleed band for the BOSS announcement on / and /service. Carries theme-boss in the markup, so everything inside is BOSS red on an otherwise neutral page. -------------------------------------------------------------------------- */ .pc-band-news{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pc-band-news .section-head{ margin-bottom:1.25rem; } /* ------------------------------------------------------------- panel--top -- SHARED COMPONENT ADDITION. Accent rule along the top edge, matching .pillar-card. Used where two differently-themed panels sit side by side (/parts) and the accent has to stay in one strictly repeated slot. -------------------------------------------------------------------------- */ .panel--top{ border-top:3px solid var(--accent); } /* --------------------------------------------------------------- pc-panel -- */ .pc-panel-title{ font-size:var(--heading-3); text-transform:uppercase; } .pc-panel-body{ margin-top:.8rem; color:var(--muted); } .on-light .pc-panel-body{ color:var(--muted-light); } .pc-panel-stack{ display:grid; gap:var(--gap); } .panel .btn-pair{ margin-top:1.4rem; } /* Manufacturer logo lock-up. logo-bobcat.png has a solid orange background — it can only sit on a dark surface, never inside .on-light. */ .pc-panel-logo{ width:auto; height:3.4rem; margin-block:1.1rem; border-radius:var(--card-radius); } /* nap.html inside a panel — the hours table sets its own max-width. */ .pc-nap-panel .nap{ margin-bottom:1.25rem; } /* ---------------------------------------------------------- pc-brand-tile -- TYPOGRAPHIC ON PURPOSE. Of the four brands sold, logo-bobcat.png and logo-generac.png ship with solid (non-transparent) backgrounds and BOSS has no licensed asset at all. A logo row would be two coloured rectangles, one transparent mark and one hole — four different objects, not a system. Setting all four in the display face gives BOSS equal standing and invents nothing. -------------------------------------------------------------------------- */ .pc-brand-tile{ border:var(--border); border-radius:var(--card-radius); transition:border-color var(--t); } .pc-brand-tile a{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:100%; padding:1.15rem; min-height:5rem; } .pc-brand-name{ font-family:var(--font-display); font-size:var(--heading-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; line-height:1.15; } .on-light .pc-brand-tile{ border-color:var(--line-light); } .on-light .pc-brand-tile:hover{ border-color:var(--accent-deep); } .on-light .pc-brand-tile a:hover{ color:var(--accent-deep); } /* ----------------------------------------------------------------- badges -- SHARED COMPONENT ADDITION. .badge ships in 30-components.css coloured for a dark surface; on a light band its var(--muted) grey falls to roughly 2.4:1 against --bg-light, so ink and border both need re-pointing. Same component, correct colours — no .chip variant invented. -------------------------------------------------------------------------- */ .on-light .badge{ color:var(--muted-light); border-color:var(--line-light); } .on-light .badge-accent{ color:var(--accent-deep); border-color:var(--accent-deep); } /* Roomier badges for a standalone list of brand or place names. */ .badge-row--lg{ gap:.55rem; margin-top:1.25rem; } .badge-row--lg .badge{ padding:.45rem .8rem; font-size:var(--body-sm); } /* --------------------------------------------------------------- pc-prose -- Running body copy in the client's own words. Measure held by .wrap-narrow on the container. -------------------------------------------------------------------------- */ .pc-prose > * + *{ margin-top:1.15rem; } .pc-prose p{ color:var(--muted); } .on-light .pc-prose p{ color:var(--muted-light); } /* ------------------------------------------------------------ small parts -- */ .pc-note{ margin-top:1.25rem; font-size:var(--body-sm); color:var(--muted); } .on-light .pc-note{ color:var(--muted-light); } .pc-note--center{ text-align:center; } .pc-note a{ text-decoration:underline; text-underline-offset:.2em; } /* SHARED COMPONENT ADDITION. .btn-pair stacks full-width below 760 on purpose (a long label must not overflow at 375px) and only becomes a flex row above it, so centring is a 760-and-up concern. */ @media (min-width:760px){ .btn-pair--center{ justify-content:center; } } /* ── styles/54-testimonials.css ── */ /* ============================================================================ Testimonials — see templates/partials/testimonials.html Deliberately quiet. These are short, real quotes from a small-town dealer's Facebook page, not marketing copy. Oversized pull-quote treatment would make three genuine sentences look like invented filler, which is the opposite of what they are for. Restraint reads as authentic. ========================================================================== */ .testimonials{ background:var(--bg-2); } .tm-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; margin-top:2rem; } @media (min-width:760px){ .tm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1024px){ .tm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* One review on its own shouldn't stretch the full width — it reads as a layout accident. Cap it and centre it instead. */ .tm-grid:has(> :only-child){ grid-template-columns:minmax(0,42rem); justify-content:center; } .tm-card{ display:flex; background:var(--surface); border:var(--border); border-top:2px solid var(--accent); border-radius:var(--card-radius); padding:clamp(1.25rem,3vw,1.75rem); } .tm-card > figure{ display:flex; flex-direction:column; gap:1rem; height:100%; } .tm-quote p{ font-size:1.05rem; line-height:1.55; color:var(--text); } /* The opening mark is decorative, so it must not reach the accessibility tree or the text selection. ::before keeps it out of both. */ .tm-quote p::before{ content:'\201C'; font-family:var(--font-display); font-size:2.5rem; line-height:0; color:var(--accent-text); margin-right:.15em; vertical-align:-.35em; } .tm-by{ margin-top:auto; display:flex; flex-direction:column; gap:.15rem; font-size:var(--body-sm); } .tm-name{ font-family:var(--font-display); font-weight:600; letter-spacing:.02em; color:var(--heading-color); text-transform:uppercase; } .tm-signoff{ color:var(--muted); } .tm-src{ color:var(--muted); font-size:var(--body-xs); text-transform:uppercase; letter-spacing:.08em; } .tm-date{ opacity:.8; } .on-light .testimonials, .testimonials.on-light{ background:var(--bg-light); } .on-light .tm-card{ background:#fff; border-color:var(--line-light); } .on-light .tm-quote p{ color:var(--on-light); } .on-light .tm-quote p::before{ color:var(--accent-deep); } .on-light .tm-name{ color:var(--on-light); } .on-light .tm-signoff, .on-light .tm-src{ color:var(--muted-light); } /* ── styles/90-motion.css ── */ /* ============================================================================ 90-motion.css — the site's motion contract SORTS LAST ON PURPOSE. build.py concatenates styles/*.css in filename order, so `90-` lands after every page fragment. That is load-bearing: the reduced-motion block at the bottom of this file has to be able to overrule a from-state written in any fragment, including one written next year. ── THE CRITICAL GUARDRAIL ───────────────────────────────────────────────── base.html hard-codes . Nothing removes that class except anim.js's own catch block. So a from-state written as .anim [data-reveal]{ opacity:0 } with no further gate is a BLANK PAGE for anyone whose JavaScript never runs — there is nothing left to add `.in`. Every from-state below is therefore fenced behind `@media (scripting: enabled)`, and every failure mode lands on "visible": JS switched off -> scripting:enabled is false -> block never applies browser too old -> feature unknown, whole block dropped anim.js throws -> it strips html.anim -> selector stops matching reduced motion -> no-preference is false -> block never applies Four independent ways to fail, all of them to shown. Never write a hidden from-state outside a gate like this one. ── CONSOLIDATION (2026-07-30) ───────────────────────────────────────────── The same [data-reveal] from-state had been written four times, in four fragments, with two different rise values and three different gates. On the BOSS pages that produced a genuine double from-state: boss.html puts class="bs-reveal" AND data-reveal on the SAME element, so 51's `.bs-reveal` rule (16px, ungated) and 53's `[data-reveal]` rule (14px, gated) both hit it and only specificity decided the outcome. Worse, 51's gate was inverted — it hid by default and un-hid inside `@media (scripting:none)`, so a browser that does not know the `scripting` feature AND has JS off got a blank BOSS page. Resolved as follows: • 52-page-rentals.css from-state DELETED — identical to this one. • 53-page-content.css from-state DELETED — identical to this one. • 51-page-boss.css .bs-reveal / .bs-stagger from-state DELETED. Every element carrying those classes also carries data-reveal / data-stagger, so this file covers them. Rise goes 16px -> 14px. That deletion is what fixes the inverted gate. • 50-page-equipment.css KEPT, and this file's rule deliberately excludes .theme-equipment via :not(). Equipment runs its own rise (--eq-rise) and its own slower duration (--t-slow) as a design choice, it is already correctly gated on (scripting:enabled), and the two selectors are mutually exclusive — so no element on the site can ever receive two different from-states. ONE from-state per element. That is the whole rule. ========================================================================== */ /* ---------------------------------------------------------- reveal state -- anim.js observes [data-reveal] and [data-stagger] and adds `.in` — to the element itself for a reveal, to each direct CHILD (with an inline transition-delay) for a stagger. It writes no styles of its own, so the before-and-after lives here. Values (14px / .55s ease) are the ones 52 and 53 already shipped, kept byte-identical so this consolidation is a no-op on screen. -------------------------------------------------------------------------- */ @media (scripting:enabled) and (prefers-reduced-motion:no-preference){ html.anim body:not(.theme-equipment) [data-reveal], html.anim body:not(.theme-equipment) [data-stagger] > *{ opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; } html.anim body:not(.theme-equipment) [data-reveal].in, html.anim body:not(.theme-equipment) [data-stagger] > .in{ opacity:1; transform:none; } } /* ============================================================================ REDUCED MOTION `prefers-reduced-motion: reduce` is a user telling the browser that motion makes them ill. It is not a style preference. Everything below is therefore !important: it has to beat any from-state in any fragment at any specificity, including fragments that do not exist yet. This is the one place in the codebase where !important is the correct tool — the alternative is an accessibility guarantee that a future 60-page-whatever.css can silently break. The rules are ordered: un-hide first, then stop the motion, then remove the ornaments that exist only to move. ========================================================================== */ @media (prefers-reduced-motion:reduce){ /* ---- 1. everything is visible, instantly ------------------------------ A from-state is only safe while something is guaranteed to un-hide it. Under reduce, nothing is: anim.js still adds `.in`, but a user who cannot tolerate motion should not be waiting on an IntersectionObserver to be allowed to read the page. Both selectors below are listed — the plain one AND every scoped variant a page fragment owns — so the guarantee does not depend on which fragment won. */ html.anim [data-reveal], html.anim [data-reveal].in, html.anim [data-stagger] > *, html.anim [data-stagger] > .in, html.anim body.theme-equipment [data-reveal], html.anim body.theme-equipment [data-stagger] > *, html.anim .rentals-page [data-reveal], html.anim .rentals-page [data-stagger] > *, html.anim .bs-reveal, html.anim .bs-stagger > *, html.anim .wr, html.anim .tw-body{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; visibility:visible !important; } /* ---- 2. nothing moves ------------------------------------------------- .01ms rather than 0: a zero-length transition never fires transitionend, and any script waiting on that event would hang forever. This keeps the event, removes the movement. animation-iteration-count:1 is what kills an INFINITE animation — a duration of .01ms on an infinite loop is still an infinite loop, just a fast one, and it will still burn a repaint every frame for as long as the page is open. */ *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; } /* 10-reset.css sets html{scroll-behavior:smooth}. A smooth scroll is motion the user did not ask for, and the universal selector above does not reliably reach the scrolling element on every engine. Name it directly. */ html{ scroll-behavior:auto !important; } /* ---- 3. no hover-transform ornaments ---------------------------------- */ .card:hover, .card:hover .card-media img, .bs-cat-grid .cat-card:hover::after, .eq-next-card:hover, .pillar-card:hover{ transform:none !important; } /* ---- 4. things that exist only to move -------------------------------- The typewriter caret is a blinking bar and the scroll-progress bar is a width animation tied to scroll position. Neither carries information — the caret marks a cursor that is no longer typing (anim.js pastes the text in one go under reduce) and the progress bar duplicates the scrollbar. Both are removed rather than frozen. */ .tw-caret, .scroll-progress{ display:none !important; } /* ---- 5. the filter chrome -------------------------------------------- Filtering itself is not motion — hiding a row is instant either way — but the button and input states are transitioned in 30-components.css. */ .filter-btn, .filter-search-input, .filter-clear{ transition:none !important; } }