/* ===========================================================
page-used-units.css -- Used Units shop page
-----------------------------------------------------------
Wrapper: .page-used-units Slug: ?page=Used-Units
Loaded by CMS via:
Out ('\t\n');
FRAME WIDTHS
Desktop: 1640px frame, content at 1200 (Figma 15225:546)
Mobile: NO mobile frame was provided -- clamp mobile
endpoints use the site-standard 400px basis and the
established mobile sizes (titles 50->30, hero 54->30);
flagged as unverified against a mobile design.
PAGE FONT-SIZE BASE
font-size: 18px on .page-used-units (dominant Figma
paragraph size). Every non-clamp size is em against it;
clamp endpoints are px (em-endpoint post-mortem in the kit).
CLAMP FORMULA (1200 desktop / 400 mobile basis)
slope_vw = (desktop_px - mobile_px) / 8
value = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px)
INHERITED FROM CMS-LOADED CSS (not re-declared):
- font-family: 'Roboto', sans-serif
- color-scheme: light only
The card 2-photo drag strip uses the shared site-card-scroller.js
(its generic data-card-scroller-* hooks; appearance is page-scoped
.unit-card__* classes, so no shared-component rules are re-declared).
ASCII rule: this file MUST stay ASCII-clean.
SECTION INDEX (search the block prefix)
hero 1. Hero (gradient, eyebrow, two-tone H1)
expect 2. What to Expect (3 icon cards)
tiers 2b. Shop by condition (tinted panel, 4 tier cards)
shop 3. Shop shell (rail + results grid)
filters 3a. Filter rail (checkbox groups)
results 3b. Results head + grid
unit-card 3c. Unit card (photo swipe, chip, price, CTA)
lightbox 4. Shared photo lightbox dialog
=========================================================== */
/* -- TOKENS ------------------------------------------------ */
.page-used-units {
font-size: 18px;
font-family: 'Roboto', sans-serif;
/* Ink: this design's text colour throughout is #3b3b3b. */
--color-ink: #3b3b3b;
color: var(--color-ink);
/* Brand colours -- product-named convention. */
--color-silver-pulser: #92ca6a; /* green */
--color-magnetic-pulser: #59afb2; /* teal */
--color-water-ozonator: #4792bc; /* blue -- site primary */
--color-bio-tuner: #a194c7; /* purple */
/* Page accent: site-primary blue (non-product page). */
--color-accent: var(--color-water-ozonator);
--color-accent-dark: #38769a;
--color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent);
/* Surfaces & hairlines */
--color-cream: #f8f4f2; /* filter-group panels */
--color-card-border: #e2dbd7; /* unit-card border */
--color-line: #d4d4d4; /* expect-card border */
--color-chip-bg: color-mix(in srgb, var(--color-magnetic-pulser) 14%, transparent);
--color-badge: var(--color-silver-pulser); /* discount badge */
--color-badge-ink: #2c3e2d; /* expect icon ink (Figma) */
--color-dot: #cfd6da; /* inactive photo dots */
--color-meta-soft: #6b7378; /* lightbox condition notes */
--color-meta-softer: #858c91; /* lightbox tier line */
/* Type scale (clamps: 1200/400 basis, px endpoints) */
--text-hero: clamp(30px, 3vw + 18px, 54px); /* hero H1 54 -> 30 */
--text-heading: clamp(30px, 2.5vw + 20px, 50px); /* section titles 50 -> 30 */
--text-heading-sm: clamp(26px, 1.75vw + 19px, 40px); /* tiers title 40 -> 26 */
--text-results: clamp(24px, 0.75vw + 21px, 30px); /* results head 30 -> 24 */
--text-subheading: 1.222em; /* 22px, constant (site convention) */
--text-lead: clamp(18px, 0.25vw + 17px, 20px); /* hero lead 20 -> 18 */
--text-body: 1em; /* 18px */
/* Spacing */
--space-section-y: clamp(50px, 3.75vw + 35px, 80px); /* 80 -> 50 */
--space-container: clamp(10px, 2.5vw, 30px); /* 30 -> 10 gutter */
--space-header-gap: 0.556em; /* 10px title-to-subhead (site rule) */
--space-block-gap: 1.667em; /* 30px header-to-content */
/* Radii (px: corner-matching rule) */
--radius-panel: 32px; /* tiers panel (Figma rounded-32) */
--radius-card: 20px; /* unit cards + filter groups */
--radius-tier: 30px; /* tier cards */
--radius-box: 24px; /* expect cards + lightbox */
--radius-pill: 999px;
/* Section colours promoted to tokens (consistency audit, Oct 2026):
no inline hex in section rules. */
--tint-cream: #f9fbf6; /* hero gradient start */
--tint-warm-light: #f5faf0; /* icon-tile gradient start / callout bg */
--tint-azure-light: #e6f4f8; /* icon-tile gradient start */
--color-white: #ffffff;
--tint-green-light: #eaf4e7; /* icon-tile gradient start / feel level 0 */
--tint-green: #d4edcc; /* icon-tile gradient end */
--tint-azure: #c4e4f2; /* icon-tile gradient end */
--tint-warm: #ffe8c4; /* icon-tile gradient end */
--color-btn-hover: #555555; /* site-wide blue-button hover (confirmed by designer) */
--tint-azure-soft: #eef4f8; /* filter / card wash */
}
/* -- Required boilerplate ---------------------------------- */
.page-used-units button {
cursor: pointer; border: none; background: none;
font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
.page-used-units header { font: inherit; } /* CMS bare-header leak */
.page-used-units .sec-title {
font-size: var(--text-heading);
font-weight: 900;
line-height: 1.2; /* 60/50 */
margin: 0;
}
.page-used-units a:focus-visible,
.page-used-units button:focus-visible,
.page-used-units input:focus-visible,
.page-used-units [tabindex]:focus-visible {
outline: 2px solid var(--color-accent-dark);
outline-offset: 2px;
}
/* -- Shared page utilities --------------------------------- */
.page-used-units .container {
box-sizing: border-box;
width: 100%;
max-width: calc(1200px + 2 * var(--space-container));
margin-inline: auto;
padding-inline: var(--space-container);
}
.page-used-units .section {
padding-block: var(--space-section-y);
}
.page-used-units .text-accent { color: var(--color-accent); }
/* This design's headings pair the accent with the page ink
(#3b3b3b), not the site blue -- so NOT .text-ink (fixed
mapping to #4792bc site-wide); a page-local role instead. */
.page-used-units .text-ink-soft { color: var(--color-ink); }
.page-used-units .brand-sub {
font-size: 0.7em; line-height: 0; vertical-align: -0.15em;
}
/* === SECTION 1: HERO ====================================== */
/* Figma 15225:577. Same soft green->blue gradient as repairs. */
.page-used-units .hero {
background: linear-gradient(178deg, var(--tint-cream) 0%, var(--tint-warm-light) 40%, var(--tint-azure-light) 100%);
padding-block: var(--space-section-y);
}
.page-used-units .hero__text {
display: flex;
flex-direction: column;
gap: 1.222em; /* 22px (Figma container gap) */
}
.page-used-units .hero__eyebrow {
margin: 0;
font-size: var(--text-subheading);
font-weight: 700;
line-height: 1.364; /* 30/22 */
letter-spacing: 0.3em; /* 6.6px at 22 */
}
.page-used-units .hero__title {
margin: 0;
font-size: var(--text-hero);
font-weight: 400; /* deliberate: the Figma H1 opens Regular */
line-height: 1.08; /* 58.32/54 */
}
.page-used-units .hero__title-accent {
font-weight: 900;
color: var(--color-accent);
}
.page-used-units .hero__lead {
margin: 0;
font-size: var(--text-lead);
line-height: 1.53; /* 30.6/20 */
}
/* === SECTION 2: WHAT TO EXPECT ============================ */
/* Figma 15226:945. White bg; centred two-tone title; three
bordered cards with tinted-gradient icon badges (sprite
icons ico-bubbles / ico-droplet / ico-home stand in for the
Figma emoji per the site icon convention). */
.page-used-units .expect__title {
text-align: center;
margin-bottom: var(--space-block-gap);
}
.page-used-units .expect__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.111em; /* 20px */
align-items: stretch;
}
.page-used-units .expect__card {
display: flex;
flex-direction: column;
gap: 0.5em; /* 9px */
padding: 2em 1.6em; /* ~37px / ~29px (Figma 36.8 / 28.8) */
background: var(--color-white);
border: 1px solid var(--color-line);
border-radius: var(--radius-box);
}
.page-used-units .expect__ico {
display: flex;
align-items: center;
justify-content: center;
width: 2.889em; /* 52px */
height: 2.889em;
border-radius: 14px;
color: var(--color-badge-ink);
}
.page-used-units .expect__ico .icon { font-size: 1.222em; } /* 22px glyph */
.page-used-units .expect__ico--green {
background: linear-gradient(135deg, var(--tint-green-light) 0%, var(--tint-green) 100%);
}
.page-used-units .expect__ico--blue {
background: linear-gradient(135deg, var(--tint-azure-light) 0%, var(--tint-azure) 100%);
}
.page-used-units .expect__ico--amber {
background: linear-gradient(135deg, var(--tint-warm-light) 0%, var(--tint-warm) 100%);
}
.page-used-units .expect__card-title {
margin: 0;
padding-top: 0.611em; /* 11px (Figma heading inset) */
font-size: var(--text-subheading);
font-weight: 700;
line-height: 1.364; /* 30/22 */
}
.page-used-units .expect__card-body {
margin: 0;
font-size: var(--text-body);
line-height: 1.667; /* 30/18 */
}
/* -- 2b. SHOP BY CONDITION --------------------------------- */
/* Figma 15313:5204. Accent-tint panel, four white tier cards. */
.page-used-units .tiers {
margin-top: 2.778em; /* 50px card-row-to-panel (Figma) */
padding: 2.778em 4em; /* 50px 72px */
background: var(--color-accent-a20);
border-radius: var(--radius-panel);
}
.page-used-units .tiers__title {
margin: 0;
font-size: var(--text-heading-sm);
font-weight: 900;
line-height: 1.5; /* 60/40 */
}
.page-used-units .tiers__sub {
margin: 0 0 var(--space-block-gap);
font-size: var(--text-subheading);
font-weight: 700;
line-height: 1.364; /* 30/22 */
}
.page-used-units .tiers__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.111em; /* 20px */
align-items: stretch;
}
.page-used-units .tiers__card {
position: relative; /* anchors the stretched tiers__link */
display: flex;
flex-direction: column;
gap: 0.556em; /* 10px */
padding: 1.111em; /* 20px */
background: var(--color-white);
border-radius: var(--radius-tier);
transition: box-shadow 0.2s ease;
}
.page-used-units .tiers__card:hover {
box-shadow: 0 6px 18px rgba(59, 59, 59, 0.14);
}
.page-used-units .tiers__card.is-active {
outline: 3px solid var(--color-accent);
outline-offset: -3px;
}
/* Stretched button: makes the whole card clickable while the p
elements keep their semantics. The engine (page-used-units.js)
swaps the results view to this tier on click. */
.page-used-units .tiers__link {
position: absolute;
inset: 0;
border-radius: var(--radius-tier);
}
.page-used-units .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.page-used-units .tiers__discount {
margin: 0;
font-size: 1.778em; /* 32px */
font-weight: 900;
line-height: normal;
}
.page-used-units .tiers__name {
margin: 0;
font-size: var(--text-subheading);
font-weight: 500;
line-height: 1.364; /* 30/22 */
}
.page-used-units .tiers__body {
margin: 0;
font-size: var(--text-body);
line-height: 1.667; /* 30/18 */
}
.page-used-units .tiers__warranty {
margin: auto 0 0; /* pin to the card bottom (Figma 15% / 50%) */
padding-top: 0.556em;
font-size: var(--text-body);
font-weight: 700;
line-height: 1.667;
color: var(--color-accent);
}
/* === SECTION 3: THE SHOP ================================== */
/* Figma 15225:609. 200px rail + 20px gap + 980px results. */
.page-used-units .shop { padding-top: 0; } /* expect's bottom padding carries the rhythm */
.page-used-units .shop__inner {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 1.111em; /* 20px */
align-items: start;
}
/* -- 3a. FILTER RAIL --------------------------------------- */
.page-used-units .filters {
display: flex;
flex-direction: column;
gap: 0.667em; /* 12px */
}
.page-used-units .filters__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0.556em; /* 10px (Figma) */
}
.page-used-units .filters__heading {
margin: 0;
font-size: var(--text-subheading);
font-weight: 600; /* Figma SemiBold; nearest loaded Roboto weight applies */
line-height: 1.273; /* 28/22 */
}
.page-used-units .filters__clear {
padding: 0;
font-size: 0.75em; /* 13.5px */
line-height: 1.333; /* 18/13.5 */
text-decoration: underline;
}
.page-used-units .filters__clear:hover { color: var(--color-accent-dark); }
.page-used-units .filters__group {
display: flex;
flex-direction: column;
gap: 0.222em; /* 4px */
padding: 1em 1.111em; /* 18px 20px */
background: var(--color-cream);
border-radius: var(--radius-card);
}
.page-used-units .filters__group-title {
margin: 0;
font-size: 0.833em; /* 15px */
font-weight: 800;
line-height: 1.067; /* 16/15 */
letter-spacing: 0.093em; /* 1.4px at 15 */
}
.page-used-units .filters__group-sub {
margin: 0 0 0.444em; /* 8px spacer below (Figma) */
font-size: 0.722em; /* 13px */
line-height: 1.385; /* 18/13 */
}
.page-used-units .filters__opt {
display: flex;
align-items: center;
gap: 0.611em; /* 11px */
padding-block: 0.389em; /* 7px */
cursor: pointer;
}
.page-used-units .filters__check {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
flex: 0 0 auto;
width: 19px;
height: 19px;
margin: 0;
background: var(--color-white);
border: 2px solid var(--color-ink);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.page-used-units .filters__check:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.page-used-units .filters__check:checked::after {
content: "";
width: 4px;
height: 8px;
margin-top: -2px;
border: solid var(--color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.page-used-units .filters__label {
flex: 1 1 0;
min-width: 0;
font-size: 0.833em; /* 15px */
line-height: 1.333; /* 20/15 */
}
.page-used-units .filters__count {
font-size: 0.722em; /* 13px */
font-weight: 600;
line-height: 1.385; /* 18/13 */
}
/* Rows whose count is 0 (JS-derived) dim and disable. */
.page-used-units .filters__opt.is-empty {
opacity: 0.45;
cursor: default;
}
/* -- 3b. RESULTS ------------------------------------------- */
.page-used-units .results {
scroll-margin-top: 120px; /* fixed menu height (tier clicks scroll here) */
}
/* Each view = one server render (head + grid); only one shows at
a time, so each carries the head-to-grid rhythm itself. */
.page-used-units .results__view {
display: flex;
flex-direction: column;
gap: 0.889em; /* 16px head-to-grid (Figma 46 - 30 head height) */
}
/* display:flex above beats the UA's [hidden]{display:none} (author
styles always win over UA styles) -- re-assert it. */
.page-used-units .results__view[hidden] { display: none; }
.page-used-units .results__head {
display: flex;
flex-wrap: wrap; /* the tier views' back link takes the first row */
align-items: center;
gap: 0.778em; /* 14px */
}
.page-used-units .results__backline {
flex: 1 0 100%; /* own row above the heading */
margin: 0;
}
.page-used-units .results__back {
font-size: 0.833em; /* 15px */
font-weight: 700;
line-height: 1.333;
color: var(--color-accent-dark);
text-decoration: underline;
text-underline-offset: 4px;
}
.page-used-units .results__heading {
margin: 0;
flex: 0 0 auto;
font-size: var(--text-results);
font-weight: 600; /* Figma SemiBold; nearest loaded Roboto weight applies */
line-height: 1; /* 30/30 */
}
.page-used-units .results__note {
margin: 0;
flex: 1 1 0;
min-width: 0;
font-size: 0.833em; /* 15px */
line-height: 1.333; /* 20/15 */
}
.page-used-units .results__empty {
margin: 0;
font-size: var(--text-body);
line-height: 1.667;
}
.page-used-units .results__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.222em; /* 22px (Figma pitch) */
align-items: stretch;
}
/* -- 3c. UNIT CARD ----------------------------------------- */
.page-used-units .unit-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-card);
overflow: hidden;
}
/* Media: a 2-photo scroll-snap strip driven by the shared
site-card-scroller.js in gallery mode: dragging with the mouse
pulls the next photo into view live (snap suspended via
.is-dragging), touch gets native momentum snap, the engine keeps
the dots in sync, and a tap dispatches card-scroller:tap --
page-used-units.js opens the lightbox on it. */
.page-used-units .unit-card__media {
position: relative;
height: 210px;
background: var(--color-white);
}
.page-used-units .unit-card__strip {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox: hide the native bar */
cursor: grab;
touch-action: pan-x pan-y; /* single-axis values block the page's other axis
from touches starting on the strip */
overscroll-behavior-x: contain; /* an edge over-drag must not trigger
browser back/forward navigation */
user-select: none;
-webkit-user-select: none;
}
.page-used-units .unit-card__strip::-webkit-scrollbar { display: none; }
.page-used-units .unit-card__strip.is-dragging {
cursor: grabbing;
scroll-snap-type: none; /* snap suspended while the mouse drags */
}
.page-used-units .unit-card__shot {
flex: 0 0 100%;
min-width: 100%;
height: 100%;
display: block;
padding: 0;
scroll-snap-align: start;
}
.page-used-units .unit-card__shot:focus-visible {
outline-offset: -3px; /* the strip clips; keep the ring inside the box */
}
.page-used-units .unit-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* real per-serial photos vary; contain is crop-safe */
pointer-events: none; /* clicks land on the button; also disarms native image drag */
}
.page-used-units .unit-card__badge {
position: absolute;
top: 14px;
left: 14px;
padding: 0.278em 0.556em; /* 5px 10px */
background: var(--color-badge);
border-radius: var(--radius-pill);
font-size: 0.611em; /* 11px */
font-weight: 800;
line-height: 1.273; /* 14/11 */
letter-spacing: 0.073em; /* 0.8px at 11 */
pointer-events: none;
}
.page-used-units .unit-card__dots {
position: absolute;
left: 0;
right: 0;
bottom: 6px;
display: flex;
justify-content: center;
gap: 4px;
}
.page-used-units .unit-card__dots .unit-card__dot {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
}
.page-used-units .unit-card__dots .unit-card__dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-dot);
transition: background-color 0.2s ease;
}
.page-used-units .unit-card__dots .unit-card__dot.is-active::before {
background: var(--color-accent);
}
.page-used-units .unit-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.444em; /* 8px */
padding: 1.111em 1.222em 0.667em; /* 20px 22px 12px */
}
.page-used-units .unit-card__title {
margin: 0;
font-size: var(--text-subheading);
font-weight: 700;
line-height: 1.364; /* 30/22 */
}
.page-used-units .unit-card__model {
margin: 0;
font-size: 0.833em; /* 15px */
font-weight: 700;
line-height: 1.667; /* 25/15 */
letter-spacing: 0.1em; /* 1.5px at 15 */
text-transform: uppercase;
color: var(--color-accent);
}
.page-used-units .unit-card__chip {
margin: 0;
padding: 0.222em 0.5em; /* 4px 9px */
background: var(--color-chip-bg);
border-radius: 6px;
font-size: 0.722em; /* 13px */
font-weight: 700;
line-height: 1.308; /* 17/13 */
}
.page-used-units .unit-card__serial {
margin: 0;
font-size: 0.833em; /* 15px */
line-height: normal;
}
.page-used-units .unit-card__foot {
display: flex;
flex-direction: column;
gap: 0.5em; /* 9px */
margin-top: auto; /* equal-height rows: pin the foot */
padding: 0 1.222em 1.222em; /* 0 22px 22px */
}
.page-used-units .unit-card__price {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.667em; /* 12px */
line-height: 1.944; /* 35/18 */
}
.page-used-units .unit-card__was {
font-size: 1em; /* 18px */
font-weight: 500;
text-decoration: line-through;
text-decoration-skip-ink: none;
}
.page-used-units .unit-card__now {
font-size: 1.389em; /* 25px */
font-weight: 900;
line-height: 1.4; /* 35/25 */
color: var(--color-accent);
}
.page-used-units .unit-card__cur { font-weight: 400; }
.page-used-units .unit-card__note {
margin: 0;
font-size: 0.833em; /* 15px */
line-height: normal;
}
.page-used-units .unit-card__cta {
width: 100%;
padding: 0.667em 1em; /* 12px 18px */
background: var(--color-accent);
border-radius: var(--radius-pill);
font-size: 0.833em; /* 15px */
font-weight: 800;
line-height: 1.133; /* 17/15 */
color: var(--color-white);
transition: background-color 0.2s ease;
}
.page-used-units .unit-card__cta:hover { background: var(--color-btn-hover); }
/* === SECTION 4: LIGHTBOX ================================== */
/* Figma 15330:20797 / 15335:18327. One shared