/* ==========================================================================
CHROME DETAILING, Design System
Mobile interior detailing · Mississauga, ON · Serving the GTA
--------------------------------------------------------------------------
Colour tokens sampled directly from the brand logo:
forest #164C3D · bone #FAF5E8
Primary green #0E4D3E supplied by the client.
========================================================================== */
/* ---------- 1. TOKENS ---------- */
:root {
/* Greens, a ramp, so dark sections have depth instead of one flat fill */
--forest-900: #072A21; /* footer, deepest */
--forest-800: #0A3A2E;
--forest: #0E4D3E; /* PRIMARY, client-specified */
--forest-600: #164C3D; /* logo green, cards/surfaces on dark */
--forest-500: #1D6350;
--forest-400: #2A8168; /* borders, hover states on dark */
/* Neutrals, warm, never pure white. This is the single biggest reason
the page reads "designed" rather than "template". */
--bone: #FAF5E8; /* sampled from logo */
--bone-dim: #F0E7D4;
--bone-line: #E2D7BF;
--ink: #0A1512;
--ink-70: rgba(10, 21, 18, .70);
--ink-45: rgba(10, 21, 18, .45);
/* Accent, rationed. Headline emphasis + primary CTA only. */
--lime: #C6F24E;
--lime-600: #AEDD32;
--lime-700: #8FBA1E;
/* Kept from the client's existing print collateral */
--was: #C0392B; /* struck-through "was" price */
/* Type */
--font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Spacing, density 4/10 (marketing page, generous) */
--space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
--space-4: 2rem; --space-5: 3rem; --space-6: 4rem;
--space-7: 6rem; --space-8: 8rem;
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
--form-gap: 1.35rem;
/* Vertical breathing room, top and bottom, for every content section.
Was clamp(3.5rem, 9vw, 8rem), which hit ~115px on a laptop and read as
dead space. One token so the rhythm can never drift between sections. */
--section-pad: clamp(3rem, 7vw, 6rem);
--wrap: 1240px;
--ease-out-back: cubic-bezier(.22, 1.2, .36, 1);
--ease-smooth: cubic-bezier(.4, 0, .2, 1);
}
/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--ink);
background: var(--bone);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
/* Accessibility: always-visible focus. Never remove this. */
:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--lime); color: var(--forest-900);
padding: .875rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* Visible to screen readers only, used to announce the struck-through
"regular price" so it isn't read as the current price. */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- 3. TYPE SCALE ---------- */
.display, h1, h2, h3, .h-alt {
font-family: var(--font-display);
font-weight: 800;
line-height: .92;
letter-spacing: -.03em;
text-transform: uppercase;
text-wrap: balance; /* prevents orphan words on headlines */
}
h1 { font-size: clamp(2.75rem, 9.5vw, 7rem); font-weight: 900; }
h2 { font-size: clamp(2.1rem, 6vw, 4.25rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -.02em; }
.eyebrow {
font-family: var(--font-display);
font-size: .78rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
line-height: 1.2;
}
.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.55; }
.fine { font-size: .84rem; line-height: 1.5; color: var(--ink-70); }
/* ---------- 3b. POSTER TYPE TREATMENT ----------
Lifted from Pink's: a 1px outline plus a hard offset shadow with NO blur.
That combination is what makes flat headline type read as printed signage
rather than a web default. Their exact recipe was
-webkit-text-stroke: 1px navy; text-shadow: navy 2px 2px 0;
Ours swaps navy for the darkest forest, and pink for lime.
paint-order keeps the stroke behind the fill so letterforms keep their true
weight instead of being eaten from both sides. */
.poster {
-webkit-text-stroke: 1px var(--forest-900);
paint-order: stroke fill;
text-shadow: 2px 2px 0 var(--forest-900);
}
/* Dark backgrounds: lime fill, 7.5:1 against forest */
.poster--lime { color: var(--lime); }
.poster--bone { color: var(--bone); }
/* On bone: forest fill with a lime outline. This is the inversion Pink's uses
on "The Pink's Promise". Fill stays forest so contrast holds at 8.97:1. */
/* No stroke here. A lime outline around forest letters on bone softened every
edge and made the heading hard to read. Clean fill, lime as an offset shadow
instead, so contrast stays at 8.97:1 and the accent survives. */
.poster--invert {
color: var(--forest);
-webkit-text-stroke: 0;
text-shadow: 3px 3px 0 var(--lime);
}
/* The shadow is decoration. Below a certain size it turns to mud, so it
scales down rather than shouting on a phone. */
@media (max-width: 600px) {
.poster { -webkit-text-stroke-width: .75px; text-shadow: 1.5px 1.5px 0 var(--forest-900); }
.poster--invert { -webkit-text-stroke-width: 0; text-shadow: 2px 2px 0 var(--lime); }
}
/* ---------- 4. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.section { padding-block: var(--section-pad); }
.section--dark { background: var(--forest); color: var(--bone); }
.section--darker { background: var(--forest-800); color: var(--bone); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .eyebrow { color: var(--lime); margin-bottom: .9rem; }
.section--light .section-head .eyebrow { color: var(--forest); }
.section-head p { margin-top: 1.15rem; color: inherit; opacity: .82; }
/* ---------- 5. BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
min-height: 52px; /* > 44px touch target */
padding: .9rem 1.7rem;
font-family: var(--font-display);
font-weight: 800; font-size: 1rem;
letter-spacing: .04em; text-transform: uppercase;
border-radius: var(--radius-pill);
transition: transform .18s var(--ease-smooth),
background-color .18s var(--ease-smooth),
color .18s var(--ease-smooth),
box-shadow .18s var(--ease-smooth);
will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--lime); color: var(--forest-900); } /* 7.5:1 */
.btn--primary:hover { background: var(--lime-600); box-shadow: 0 10px 26px -8px rgba(198,242,78,.55); }
.btn--ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px rgba(250,245,232,.4); }
.btn--ghost:hover { background: var(--bone); color: var(--forest); box-shadow: inset 0 0 0 2px var(--bone); }
.btn--dark { background: var(--forest); color: var(--bone); }
.btn--dark:hover { background: var(--forest-800); box-shadow: 0 10px 26px -10px rgba(14,77,62,.6); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }
/* ---------- 6. HEADER ---------- */
.header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
padding-block: .85rem;
transition: background-color .3s var(--ease-smooth),
box-shadow .3s var(--ease-smooth),
padding .3s var(--ease-smooth);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header__logo { display: inline-flex; align-items: center; min-height: 44px; } /* 44px tap target */
.header__logo img { height: 40px; width: auto; transition: height .3s var(--ease-smooth); }
/* Solid state once scrolled past the hero */
.header.is-stuck {
background: var(--forest);
box-shadow: 0 6px 30px -12px rgba(7,42,33,.7);
padding-block: .55rem;
}
.header.is-stuck .header__logo img { height: 34px; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__link {
font-family: var(--font-display);
font-size: .84rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--bone);
position: relative;
display: inline-flex; align-items: center;
min-height: 44px; /* 44px tap target */
}
.nav__link::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 2px; background: var(--lime);
transform: scaleX(0); transform-origin: right;
transition: transform .28s var(--ease-smooth);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cta { display: inline-flex; }
@media (max-width: 960px) { .nav, .header__cta { display: none; } }
/* ---------- 7. HERO ---------- */
.hero {
position: relative;
min-height: 100svh;
display: flex; align-items: flex-end;
background: var(--forest-900);
overflow: hidden;
padding-bottom: clamp(3rem, 8vw, 5.5rem);
padding-top: 7rem;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder shown until real footage exists, deliberately designed,
so the page looks finished rather than broken. */
.hero__placeholder {
position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 78% 18%, rgba(198,242,78,.16), transparent 55%),
radial-gradient(90% 80% at 12% 88%, rgba(42,129,104,.42), transparent 60%),
linear-gradient(155deg, #0A3A2E 0%, #072A21 55%, #041d17 100%);
}
.hero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(7,42,33,.55) 0%, rgba(7,42,33,.25) 40%, rgba(7,42,33,.92) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero .eyebrow { color: var(--lime); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hero h1 { color: var(--bone); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero__lead { color: rgba(250,245,232,.88); max-width: 44ch; margin-top: 1.6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.3rem; }
/* Film grain, the cinematic texture that keeps flat colour from feeling cheap */
.grain {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: .16; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* ---------- 8. MARQUEE ---------- */
.marquee {
background: var(--lime); color: var(--forest-900);
padding-block: .9rem;
overflow: hidden;
border-block: 3px solid var(--forest-900);
}
.marquee__track { display: flex; width: max-content; animation: scroll 28s linear infinite; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee span {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(.95rem, 2vw, 1.2rem);
letter-spacing: .07em; text-transform: uppercase;
padding-inline: 1.5rem; white-space: nowrap;
}
.marquee .star { color: var(--forest-600); }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* ---------- 10. PACKAGES ----------
The two package cards were replaced by a single unified table (13c).
---------------------------------------------------------------- */
/* ---------- 11. PROMISE / HOW IT WORKS ----------
Modelled on Pink's promise block: icon, oversized numeral, then the copy. */
.promise { display: grid; gap: 1.9rem; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.promise__item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.promise__icon {
width: 62px; height: 62px; margin-bottom: 1rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--forest); color: var(--lime);
}
.promise__icon svg { width: 29px; height: 29px; }
.promise__num {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(2.9rem, 6vw, 4rem); line-height: 1;
letter-spacing: -.04em;
display: block; margin-bottom: .45rem;
}
.promise__item h3 { margin-bottom: .6rem; color: var(--forest); }
.promise__item p { color: var(--ink-70); font-size: .96rem; max-width: 32ch; }
/* ---------- 12b. BEFORE / AFTER SLIDER ----------
The control is a real , so keyboard, screen reader and
single-pointer use all work natively. WCAG 2.2 requires a non-drag
alternative for any drag interaction; a range input satisfies it rather
than bolting one on. */
.ba {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 3 / 4; /* matches the source photos, no crop */
max-width: 900px; /* and full-bleed 16/9 was still ~650px */
margin-inline: auto;
background: var(--forest-900);
box-shadow: 0 26px 60px -30px rgba(7,42,33,.8);
touch-action: pan-y; /* let the page still scroll vertically */
--pos: 50%;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Clipping keeps the image full size, so nothing squashes as the handle moves */
.ba__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag {
position: absolute; top: 1rem; z-index: 3;
font-family: var(--font-display); font-weight: 800;
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
padding: .4rem .85rem; border-radius: var(--radius-pill);
pointer-events: none;
}
.ba__tag--before { left: 1rem; background: rgba(7,42,33,.85); color: var(--bone); }
.ba__tag--after { right: 1rem; background: var(--lime); color: var(--forest-900); }
.ba__line {
position: absolute; top: 0; bottom: 0; left: var(--pos);
width: 3px; margin-left: -1.5px; z-index: 2;
background: var(--bone); pointer-events: none;
}
.ba__knob {
position: absolute; top: 50%; left: var(--pos); z-index: 2;
transform: translate(-50%, -50%);
width: 52px; height: 52px; border-radius: 50%;
background: var(--bone); color: var(--forest);
display: grid; place-items: center;
box-shadow: 0 4px 18px rgba(7,42,33,.55);
pointer-events: none;
transition: transform .18s var(--ease-smooth);
}
.ba__knob svg { width: 26px; height: 26px; }
/* The actual control, laid over the image. Opacity 0 but never display:none,
so it stays keyboard-reachable and announced. */
.ba__range {
position: absolute; inset: 0; z-index: 4;
width: 100%; height: 100%; margin: 0;
opacity: 0; cursor: ew-resize;
-webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 56px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
/* Focus ring must appear on the visible knob, since the input itself is invisible */
.ba__range:focus-visible ~ .ba__knob { outline: 3px solid var(--lime); outline-offset: 4px; transform: translate(-50%,-50%) scale(1.08); }
.ba__range:focus { outline: none; }
.ba { }
.ba__hint { margin-top: .9rem; text-align: center; font-size: .86rem; color: rgba(250,245,232,.62); }
/* ---------- 12c. BEFORE / AFTER CAROUSEL ----------
No autoplay by design. Nothing moves unless the visitor asks it to, which
removes the need for a pause control and the reduced-motion special case. */
/* Portrait frame, so the column is deliberately narrow. At full width a 3:4
image would run over 1000px tall. */
.bac { max-width: 430px; margin-inline: auto; }
.bac__frame { position: relative; }
.bac__slide[hidden] { display: none; } /* keeps offscreen sliders out of the tab order */
.bac__controls {
display: flex; align-items: center; justify-content: center; gap: 1.1rem;
margin-top: 1.1rem;
}
.bac__nav {
width: 48px; height: 48px; flex-shrink: 0;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(250,245,232,.09);
border: 1px solid rgba(250,245,232,.24);
color: var(--bone);
transition: background-color .2s var(--ease-smooth), color .2s var(--ease-smooth),
border-color .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.bac__nav:hover { background: var(--lime); border-color: var(--lime); color: var(--forest-900); transform: scale(1.06); }
.bac__nav svg { width: 22px; height: 22px; }
.bac__dots { display: flex; align-items: center; gap: .55rem; }
.bac__dot {
/* 10px visual dot, 44px hit area, so it meets touch guidance without looking clumsy */
width: 44px; height: 44px; padding: 0;
display: grid; place-items: center;
background: none; border: 0; border-radius: 50%;
}
.bac__dot::before {
content: ''; width: 10px; height: 10px; border-radius: 50%;
background: rgba(250,245,232,.34);
transition: background-color .2s var(--ease-smooth), transform .2s var(--ease-smooth);
}
.bac__dot:hover::before { background: rgba(250,245,232,.6); }
.bac__dot[aria-current="true"]::before { background: var(--lime); transform: scale(1.35); }
.bac__status {
margin-top: .7rem; text-align: center;
font-family: var(--font-display); font-weight: 700;
font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
color: rgba(250,245,232,.5);
}
.bac .ba__hint { margin-top: .35rem; }
@media (max-width: 560px) {
.bac__controls { gap: .5rem; }
.bac__nav { width: 44px; height: 44px; }
}
/* ---------- 13. REVIEWS ---------- */
.reviews { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review {
background: var(--bone-dim);
border: 1px solid var(--bone-line);
border-radius: var(--radius-lg);
padding: 1.8rem;
display: flex; flex-direction: column; gap: 1rem;
}
.review__stars { display: flex; gap: .18rem; color: var(--forest); }
.review__stars svg { width: 17px; height: 17px; }
.review blockquote { color: var(--ink-70); font-size: .97rem; line-height: 1.6; flex: 1; }
.review figcaption {
display: flex; align-items: center; gap: .7rem;
padding-top: .9rem; border-top: 1px solid var(--bone-line);
}
.review__avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
background: var(--forest); color: var(--bone);
font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.review__name {
font-family: var(--font-display); font-weight: 800;
font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--forest);
}
/* ---------- 13c. COMPARISON TABLE ---------- */
.cmp {
background: var(--bone);
border-radius: var(--radius-lg);
padding: clamp(1.4rem, 3vw, 2.4rem);
color: var(--ink);
box-shadow: 0 22px 50px -26px rgba(7,42,33,.5);
}
.cmp__head { margin-bottom: 1.5rem; }
.cmp__head h3 { color: var(--forest); margin-bottom: .4rem; }
.cmp__head p { font-size: .9rem; color: var(--ink-45); }
/* Wide content scrolls inside its own container, never the page body.
`contain: paint` is load-bearing: without it the table's min-width leaks out
and widens the initial containing block, which stretches the fixed header and
call bar past the viewport and exposes a strip of page background on phones. */
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: paint; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 500px; }
/* Reclaim horizontal room on small phones so less of the table is hidden.
The service column is pinned so it stays readable while prices scroll past,
and sized so a whole price column is visible at rest. Without this the
figures get clipped mid-number, which is the worst thing to truncate. */
@media (max-width: 620px) {
.cmp { padding-inline: 1rem; }
.cmp table { min-width: 460px; }
.cmp th, .cmp td { padding: .8rem .45rem; }
.cmp__feature {
font-size: .94rem;
width: 150px; min-width: 150px; max-width: 150px;
position: sticky; left: 0; z-index: 2;
background: var(--bone);
box-shadow: 6px 0 8px -6px rgba(7,42,33,.22);
}
.cmp thead .cmp__feature { z-index: 3; }
/* Group headers span the full width, so they must not be pinned */
.cmp__group th { position: static; width: auto; max-width: none; box-shadow: none; }
.cmp__tier { width: 155px; }
.cmp__for { font-size: .83rem; }
/* The add-on price spans both columns, so centring puts it off-screen.
Pull it left so it sits right beside the pinned service name. */
.cmp__span { text-align: left !important; padding-left: .9rem; }
/* Keep the buttons on one line in a narrow cell */
.cmp__cta .btn { font-size: .76rem; padding-inline: .45rem; white-space: nowrap; letter-spacing: .02em; }
}
.cmp th, .cmp td { text-align: left; padding: .85rem .7rem; vertical-align: top; }
.cmp thead th { border-bottom: 2px solid var(--forest); }
.cmp__feature {
font-family: var(--font-body); font-weight: 500;
font-size: 1.02rem; color: var(--ink-70);
width: 46%;
}
/* Sits on the same baseline as the tier names, and at a size that reads as a
column header rather than fine print. */
.cmp thead th.cmp__feature {
font-family: var(--font-display); font-weight: 800;
font-size: 1.15rem; letter-spacing: -.01em; text-transform: uppercase;
color: var(--forest);
padding-top: 3.1rem;
}
.cmp__tier { text-align: center !important; width: 27%; position: relative; }
/* Needs th in the selector to outrank `.cmp th`, otherwise the reserved space
collapses and the Most-popular badge lands on top of the tier name. */
.cmp thead th.cmp__tier { padding-top: 3.1rem; }
.cmp__tier-name {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.01em;
color: var(--forest); line-height: 1.1;
}
.cmp__tier-price {
display: block; margin-top: .15rem;
font-family: var(--font-display); font-weight: 900;
font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em;
}
.cmp tbody tr { border-bottom: 1px solid var(--bone-line); }
.cmp tbody tr:last-child { border-bottom: 0; }
/* Group header rows break the table into readable blocks */
.cmp__group th {
font-family: var(--font-display); font-weight: 800;
font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--forest);
background: rgba(14,77,62,.07);
padding-top: 1rem; padding-bottom: .6rem;
border-radius: 6px;
}
.cmp__mark { text-align: center !important; }
.cmp__mark svg { width: 19px; height: 19px; color: var(--forest); margin-inline: auto; }
.cmp__no { color: var(--ink-45); font-size: 1.1rem; text-align: center !important; }
.cmp__price {
text-align: center !important;
font-family: var(--font-display); font-weight: 800;
font-size: 1rem; color: var(--forest);
}
.cmp__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: .84rem; color: var(--ink-45); margin-top: .2rem; }
.cmp__note { margin-top: 1.5rem; font-size: .84rem; color: rgba(250,245,232,.55); line-height: 1.55; }
/* Highlighted Premium column */
.cmp__col-hi { background: rgba(14,77,62,.06); }
.cmp thead .cmp__col-hi { background: rgba(14,77,62,.10); border-radius: 10px 10px 0 0; }
.cmp tfoot .cmp__col-hi { border-radius: 0 0 10px 10px; }
.cmp__tier-flag {
position: absolute; top: .85rem; left: 50%; transform: translateX(-50%);
display: inline-block;
font-family: var(--font-display); font-weight: 800;
font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
background: var(--lime); color: var(--forest-900);
padding: .25rem .6rem; border-radius: var(--radius-pill);
white-space: nowrap;
}
.cmp__thlabel { display: block; }
/* Price cells */
.cmp__money { white-space: nowrap; }
.cmp__money strong {
font-family: var(--font-display); font-weight: 900;
font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em;
}
.cmp__was-sm {
display: block;
font-family: var(--font-display); font-weight: 700;
font-size: .82rem; color: var(--was);
text-decoration: line-through; text-decoration-thickness: 2px;
line-height: 1.1; margin-bottom: .1rem;
}
/* Add-ons cost the same either way, so one cell spans both columns */
.cmp__span { background: rgba(14,77,62,.04); border-radius: 8px; }
/* "Perfect for" row */
.cmp__for {
font-family: var(--font-body); font-weight: 400;
font-size: .87rem; color: var(--ink-70); line-height: 1.45;
text-align: left !important; vertical-align: top;
}
/* CTA row */
.cmp tfoot td { padding-top: 1.4rem; }
.cmp__cta { text-align: center !important; }
.cmp__cta .btn { width: 100%; font-size: .88rem; padding-inline: .9rem; }
.cmp__hint {
display: none;
margin-bottom: .8rem; font-size: .82rem; color: var(--ink-45);
}
@media (max-width: 620px) { .cmp__hint { display: block; } }
/* ---------- 13d. PRICE BY VEHICLE (horizontal boxes) ----------
Five vehicles across one strip, so the pricing reads at a glance instead of
costing ten table rows. */
.vprice { margin-top: 1.75rem; }
.vprice__title {
font-family: var(--font-display); font-weight: 800;
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--lime); margin-bottom: 1rem;
}
.vprice__grid {
display: grid; gap: .6rem;
/* Five equal columns across the full width, matching the comparison panel
above so the two blocks line up edge to edge. */
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vbox {
background: var(--bone);
border-radius: 12px;
padding: .6rem .55rem;
display: flex; flex-direction: column; gap: .3rem;
color: var(--ink);
}
.vbox { text-align: center; }
.vbox__name {
font-family: var(--font-display); font-weight: 800;
font-size: .82rem; letter-spacing: .01em; text-transform: uppercase;
color: var(--forest); line-height: 1.25;
/* No reserved second line. The grid already stretches every box in the row to
the same height, and the prices are pinned to the bottom with margin-top,
so a wrapping name stays aligned without padding the short ones. */
}
.vbox__prices { display: grid; gap: .18rem; margin-top: auto; }
.vbox__row {
display: flex; align-items: baseline; justify-content: center; gap: .4rem;
padding: .18rem .3rem; border-radius: 7px;
}
.vbox__row dt {
font-family: var(--font-display); font-weight: 700;
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-45);
}
.vbox__row dd {
font-family: var(--font-display); font-weight: 900;
font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink);
}
.vbox__row--hi { background: rgba(14,77,62,.09); }
.vbox__row--hi dt { color: var(--forest); }
.vbox__row--hi dd { color: var(--forest); }
@media (max-width: 900px) { .vprice__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
.vprice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vbox__name { min-height: 0; }
}
/* ---------- 13e. ADD-ONS ---------- */
.addons { margin-top: 1.75rem; }
.addons__title {
font-family: var(--font-display); font-weight: 800;
font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--lime); margin-bottom: 1rem;
}
.addons__title span {
font-weight: 700; letter-spacing: .1em;
color: rgba(250,245,232,.5); margin-left: .5rem;
}
.addons__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
display: inline-flex; align-items: center; gap: .6rem;
padding: .6rem .5rem .6rem 1rem;
background: rgba(250,245,232,.07);
border: 1px solid rgba(250,245,232,.18);
border-radius: var(--radius-pill);
}
.chip__name { font-size: .92rem; color: var(--bone); }
.chip__price {
font-family: var(--font-display); font-weight: 800; font-size: .85rem;
background: var(--lime); color: var(--forest-900);
padding: .25rem .65rem; border-radius: var(--radius-pill);
white-space: nowrap;
}
/* Tier subtitle inside the table header */
.cmp__tier-for {
display: block; margin-top: .55rem;
font-family: var(--font-body); font-weight: 400;
font-size: .8rem; line-height: 1.35; color: var(--ink-45);
text-transform: none; letter-spacing: 0;
}
/* ---------- 13f. MORE REVIEWS ---------- */
/* Matches the section's own bottom padding, so the button sits an equal
distance from the last review card and from the start of the next
section. Tracks --section-pad automatically at every breakpoint. */
.reviews__more { display: flex; justify-content: center; margin-top: var(--section-pad); }
.reviews__more .btn svg:first-of-type { width: 17px; height: 17px; color: var(--lime); }
.reviews__more .btn svg:last-of-type { width: 15px; height: 15px; opacity: .65; }
/* ---------- 13g. SERVICE AREA MAP ---------- */
.areas-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .areas-grid { grid-template-columns: 0.9fr 1.1fr; } }
.areas-grid .section-head { margin-bottom: 0; }
.areas-map svg { width: 100%; height: auto; overflow: visible; }
.map__lake { fill: rgba(7,42,33,.55); }
.map__shore { fill: none; stroke: rgba(198,242,78,.4); stroke-width: 2.5; }
.map__water {
font-family: var(--font-body); font-size: 17px; font-style: italic;
fill: rgba(250,245,232,.3); letter-spacing: .06em;
}
.map__pin { fill: var(--lime); }
.map__pin--home { fill: var(--bone); }
.map__ring {
fill: none; stroke: var(--lime); stroke-width: 2.5;
/* fill-box makes the origin the circle's own centre, so the pulse stays on
the dot no matter where the pin is moved. A hard-coded coordinate here
silently broke when the map was remapped. */
transform-box: fill-box;
transform-origin: center;
animation: mapPulse 2.8s ease-out infinite;
}
@keyframes mapPulse {
0% { transform: scale(.6); opacity: .9; }
70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map__ring { animation: none; opacity: .5; } }
.map__label {
font-family: var(--font-display); font-weight: 700;
font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
fill: rgba(250,245,232,.82);
}
.map__label--home { fill: var(--bone); font-weight: 800; font-size: 17px; }
@media (max-width: 560px) {
.map__label { font-size: 19px; }
.map__label--home { font-size: 21px; }
.map__water { font-size: 20px; }
}
/* ---------- 14. COMING SOON BANNER ---------- */
.soon {
margin-top: 1.5rem;
display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
padding: 1.35rem 1.6rem;
background: rgba(198,242,78,.07);
border: 2px dashed rgba(198,242,78,.45);
border-radius: var(--radius-lg);
}
.soon__badge {
flex-shrink: 0;
font-family: var(--font-display); font-weight: 800;
font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
padding: .45rem 1rem; border-radius: var(--radius-pill);
background: var(--lime); color: var(--forest-900);
}
.soon__body h3 { color: var(--bone); font-size: 1.25rem; margin-bottom: .2rem; }
.soon__body p { color: rgba(250,245,232,.72); font-size: .93rem; }
/* ---------- 14a. QUOTE PROMISE STICKER ----------
Pink's uses a static SVG banner for "within 1 business day". This is the same
idea drawn from scratch: a rotating stamp, which suits the streetwear
direction better than a rectangle. Decorative only, the promise is also
written in the copy beside it. */
.stamp {
position: relative;
width: clamp(124px, 15vw, 158px);
aspect-ratio: 1;
margin-bottom: 1.75rem;
display: grid; place-items: center;
}
.stamp__ring {
position: absolute; inset: 0;
width: 100%; height: 100%;
animation: stamp-spin 22s linear infinite;
}
.stamp__ring text {
font-family: var(--font-display);
font-size: 22px; font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
fill: var(--lime);
}
@keyframes stamp-spin { to { transform: rotate(360deg); } }
.stamp__core {
position: relative;
width: 58%; aspect-ratio: 1;
border-radius: 50%;
background: var(--lime);
color: var(--forest-900);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
line-height: 1;
/* Optical, not geometric. The stack is centred by flexbox, but BOOK carries
nearly all the visual weight and its ink sits above the midpoint, so the
whole thing reads high. Padding-top nudges the content down half of itself. */
padding-top: 4px;
}
.stamp__core strong {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.03em; line-height: 1;
/* letter-spacing is applied after the last glyph too, so it skews centring.
Cancelling it on the right edge puts the glyphs, not the box, in the middle.
Correction is -1 x letter-spacing, so negative tracking needs a positive value. */
margin-right: .03em;
}
.stamp__core small {
font-family: var(--font-display); font-weight: 800;
font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
margin-top: .1rem;
margin-right: -.12em; /* same trailing-space correction as above */
}
/* A slowly rotating badge is exactly the kind of ambient motion that triggers
vestibular discomfort, so it stops entirely rather than just slowing down. */
@media (prefers-reduced-motion: reduce) {
.stamp__ring { animation: none; }
}
@media (max-width: 939px) { .stamp { margin-inline: auto; } }
/* ---------- 14b. QUOTE FORM ---------- */
/* Single column on every width. The form reads as a step that follows the
"In a hurry" shortcut, rather than a second thing competing beside it. */
/* Fills .wrap exactly like the comparison table and reviews grid do. A 780px
cap left it visibly narrower than every other section on a wide screen. */
.quote { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
.quote__aside { display: grid; gap: 1.6rem; }
.quote__aside .lead { color: rgba(250,245,232,.82); margin-top: 1.1rem; }
/* Full width to match the form panel above it, centred content. */
.quote__direct {
text-align: center;
padding: 1.35rem;
background: var(--forest-600);
border: 1px solid rgba(250,245,232,.14);
border-radius: var(--radius-lg);
}
.quote__direct h3 { color: var(--bone); font-size: 1.05rem; margin-bottom: .35rem; }
.quote__direct p { color: rgba(250,245,232,.7); font-size: .9rem; margin-bottom: .9rem; }
.quote__direct-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.quote__direct-actions .btn { min-height: 46px; padding: .7rem 1.3rem; font-size: .9rem; }
.form {
background: var(--bone);
border-radius: var(--radius-lg);
padding: clamp(1.6rem, 3.5vw, 2.6rem);
color: var(--ink);
}
/* One gap value owns the whole form. Per-field margins produced 0/18/18/0/24/27px
because `.field:last-of-type` matched the last div AND the fieldset separately. */
#quote-form { display: flex; flex-direction: column; gap: var(--form-gap); }
.form__row { display: grid; gap: var(--form-gap); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Side-by-side fields: reserve two lines for every label so a wrapping question
("When do you want to get a detail done?") cannot push its own control lower
than the one beside it. Without this the two inputs sit on different lines. */
/* No reserved height. Two reserved lines kept the paired inputs aligned, but it
left a visible gap under every single-line label, so the space between label
and control differed field to field. Even spacing wins. */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 0; }
/* A