AND the H1 inside .hero-text carries the semantic meaning
for the hero. Per WCAG 1.1.1, decorative images SHOULD use
empty alt. Verified via grep: every OTHER
![]()
on the site
(.rail-card, .work-item, .crew-card, .service-card-photo,
.page-hero-decor) has a descriptive operator-readable alt. */
/* ============================================================
WAVE 5 — CROSS-PAGE DISTINCTIVENESS
============================================================ */
/* === 5.3 — Per-page hero rhythm variation =====================
Every page now carries a body class that varies AT LEAST ONE
of: hero padding, H1 font-size, hero-sub width, or CTA layout.
The goal is that the hero on /, /about, /contact, /work,
/services, and each service-detail page reads as a distinct
composition — not the same template with different words.
Each variant overrides specific dimensions; everything else
inherits the foundation hero system from styles.css:1558+. */
/* page-home / hero-rhythm--anchor (homepage hero, the anchor)
— Largest H1 ceiling (the homepage gets the loudest entrance).
— Sub width 60ch (wide marketing sub line).
— Default vertical padding from foundation. */
.hero-rhythm--anchor .hero-fullbleed h1.hero-title {
font-size: clamp(44px, 6.4vw, 92px);
letter-spacing: -0.012em;
}
.hero-rhythm--anchor .hero-fullbleed .hero-sub { max-width: 60ch; }
/* page-about / hero-rhythm--portrait (about-page hero, the portrait)
— Shorter overall hero padding (about pours into story below).
— H1 is multi-line three-deck; tighter line-height + slightly
smaller H1 to let the three decks read as a stack.
— CTA stays single-axis (no CTA in about hero by design). */
.hero-rhythm--portrait .hero.hero-fullbleed {
padding: clamp(72px, 11vw, 124px) var(--pad-x) clamp(56px, 7vw, 80px);
min-height: clamp(600px, 74vh, 760px);
}
.hero-rhythm--portrait .hero-fullbleed h1.hero-title {
font-size: clamp(38px, 5.6vw, 76px);
line-height: 1.02;
}
.hero-rhythm--portrait .hero-fullbleed .hero-sub { max-width: 50ch; }
/* page-contact / hero-rhythm--directive (contact-page hero, directive)
— Compact hero (the form is the real conversion surface below).
— H1 sized one step down from anchor; the directive is short.
— Sub width 44ch (single-line directive, not marketing prose).
— Page-hero (no full-bleed photo) so we tighten its own padding. */
.hero-rhythm--directive .page-hero { padding: clamp(56px, 8vw, 88px) var(--pad-x) clamp(24px, 4vw, 40px); }
.hero-rhythm--directive .page-hero-title {
font-size: clamp(40px, 5.8vw, 78px);
line-height: 1.02;
}
.hero-rhythm--directive .page-hero-sub { max-width: 44ch; }
/* page-work / hero-rhythm--catalog (work-page hero, catalog cover)
— Wide H1 ceiling for the project count statement.
— Sub width 56ch.
— Page-hero, no full-bleed; tight bottom padding so the filter
row + grid below land closer to the H1. */
.hero-rhythm--catalog .page-hero { padding: clamp(64px, 9vw, 96px) var(--pad-x) clamp(16px, 3vw, 32px); }
.hero-rhythm--catalog .page-hero-title {
font-size: clamp(40px, 6vw, 84px);
letter-spacing: -0.012em;
}
.hero-rhythm--catalog .page-hero-sub { max-width: 56ch; }
/* page-services-hub / hero-rhythm--gateway (services hub, gateway)
— H1 sits between detail-wide and detail-tall.
— Sub width 54ch.
— Foundation padding holds (this hero is the entry to the
three service detail pages — anchor-weight composition). */
.hero-rhythm--gateway .hero-fullbleed h1.hero-title { font-size: clamp(42px, 6.1vw, 84px); }
.hero-rhythm--gateway .hero-fullbleed .hero-sub { max-width: 54ch; }
/* page-driveway / hero-rhythm--detail-wide (driveway service, wide)
— Wider hero-sub (the body sells the tear-out → pour → done arc).
— Slightly larger H1 — driveway replacement is the highest-intent
service so its detail hero reads loudest of the three details.
— Hero-content--simple grid (no inline form), so CTA layout is
horizontal/wrap rather than the homepage's two-column grid. */
.hero-rhythm--detail-wide .hero-fullbleed h1.hero-title { font-size: clamp(40px, 5.9vw, 80px); }
.hero-rhythm--detail-wide .hero-fullbleed .hero-sub { max-width: 64ch; }
.hero-rhythm--detail-wide .hero-content--simple .hero-meta { gap: 18px; }
/* page-stamped / hero-rhythm--detail-tall (stamped service, tall)
— Tighter measure on sub (44ch — stamped is a more decorative
visit, less buyer-anxiety prose; the patterns below carry it).
— H1 mid-size; slightly tighter tracking lets "That Holds Up"
sit prominently inside the line.
— Increased hero min-height so the H1 holds more vertical air
before the patterns section unfurls below. */
.hero-rhythm--detail-tall .hero.hero-fullbleed {
min-height: clamp(660px, 84vh, 860px);
}
.hero-rhythm--detail-tall .hero-fullbleed h1.hero-title {
font-size: clamp(40px, 6vw, 82px);
letter-spacing: -0.008em;
}
.hero-rhythm--detail-tall .hero-fullbleed .hero-sub { max-width: 44ch; }
/* page-flatwork / hero-rhythm--detail-compact (flatwork service, compact)
— Shortest hero of the three details — flatwork is the
workhorse / repeat-buyer page; the comparison table below
is the conversion driver, not the hero.
— Smaller H1 ceiling, tighter padding, narrower sub.
— CTA stack is horizontal with a slightly tighter gap so the
hero CTAs sit close-knit ahead of the comparison block. */
.hero-rhythm--detail-compact .hero.hero-fullbleed {
padding: clamp(68px, 10vw, 108px) var(--pad-x) clamp(48px, 6vw, 72px);
min-height: clamp(560px, 70vh, 720px);
}
.hero-rhythm--detail-compact .hero-fullbleed h1.hero-title {
font-size: clamp(38px, 5.7vw, 74px);
}
.hero-rhythm--detail-compact .hero-fullbleed .hero-sub { max-width: 50ch; }
.hero-rhythm--detail-compact .hero-content--simple .hero-meta { gap: 12px; }
/* === 5.4 — Flatwork distinguishing element ====================
The flatwork detail page was previously running the SAME
.pattern-grid structure as the stamped-concrete page. Wave 5
replaces that block with a structurally distinct element:
a slab-spec comparison table (.flatwork-spec-table) — a
real trade-buyer differentiator (slabs are differentiated by
thickness + reinforcement + use-case, which is the buyer's
real question on a flatwork page). The shape is a labeled
data table with accent vertical rules between columns and
an accent header row — visually a different surface from
the stamped patterns grid. */
.flatwork-spec-table-wrap {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(22, 32, 56, 0.55) 0%, rgba(11, 18, 32, 0.85) 100%);
padding: clamp(12px, 1.4vw, 20px);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 18px 40px -22px rgba(211, 47, 47, 0.32),
0 12px 28px -14px rgba(0, 0, 0, 0.6);
overflow-x: auto;
}
.flatwork-spec-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: 'Inter', sans-serif;
color: var(--ink);
min-width: 640px;
}
.flatwork-spec-table thead th {
text-align: left;
font-family: 'Anton', Impact, sans-serif;
font-weight: 400;
font-size: clamp(13px, 1vw, 15px);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
padding: 14px 16px 12px;
border-bottom: 2px solid var(--accent);
vertical-align: bottom;
}
.flatwork-spec-table thead th + th {
border-left: 1px solid rgba(211, 47, 47, 0.28);
}
.flatwork-spec-table tbody td {
padding: 16px;
vertical-align: top;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: clamp(14px, 1.05vw, 15.5px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.flatwork-spec-table tbody td + td {
border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.flatwork-spec-table tbody tr:last-child td { border-bottom: none; }
/* No row-hover tint — the spec table is a calm reference surface, not
an interactive card grid. The Wave 5 Steve Jobs gut-test flagged the
prior rgba(211,47,47,0.06) tr:hover as "busy interaction noise on a
static spec table." Removed. */
.flatwork-spec-application {
font-family: 'Anton', Impact, sans-serif;
font-weight: 400;
font-size: clamp(17px, 1.3vw, 21px);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--ink);
margin: 0 0 4px;
display: block;
}
.flatwork-spec-application-sub {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: clamp(12px, 1vw, 14px);
color: var(--accent);
letter-spacing: 0.01em;
}
.flatwork-spec-thickness {
font-family: 'Anton', Impact, sans-serif;
font-weight: 400;
font-size: clamp(22px, 1.8vw, 30px);
color: var(--ink);
letter-spacing: 0.01em;
display: inline-block;
}
.flatwork-spec-thickness-unit {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: clamp(11px, 0.85vw, 12px);
color: rgba(255, 255, 255, 0.62);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-left: 4px;
}
.flatwork-spec-reinforcement {
display: block;
font-size: clamp(13px, 1vw, 14px);
color: rgba(255, 255, 255, 0.78);
}
.flatwork-spec-finish {
display: block;
font-size: clamp(13px, 1vw, 14px);
color: rgba(255, 255, 255, 0.78);
}
.flatwork-spec-table-foot {
margin-top: 14px;
font-size: 13px;
color: rgba(255, 255, 255, 0.62);
font-style: italic;
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 0.01em;
text-align: right;
}
@media (max-width: 720px) {
.flatwork-spec-table-wrap { padding: 6px; }
.flatwork-spec-table thead th { padding: 12px 12px 10px; }
.flatwork-spec-table tbody td { padding: 14px 12px; }
}
/* === Visually-hidden utility (Wave 6) ===
Used to attach an accessible H2 label to sections whose heading is
implied by context but where the H1→H2→H3 hierarchy must remain
unbroken for SEO/AEO. Example: contact page H2 above the contact-grid. */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
POLISH — WAVE 7 (Conversion architecture) · 2026-05-20
Theme: every form earns the click. Gradient accent bar +
plain-English expectation-setter above the fields. Trust
signal lives within 200px of every CTA button.
============================================================ */
/* === 7.1 — Form gradient top accent bar ====================
The accent bar sits above the form title, painted in the same
warm red-to-orange gradient as the .btn-primary CTA (Wave 3.6).
The form reads as a single branded panel: bar + title + lede +
fields + button — same gradient at the top and the bottom. */
.form--contact { position: relative; overflow: hidden; }
.form--contact .form-accent-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
border-radius: var(--radius) var(--radius) 0 0;
z-index: 1;
}
/* === 7.1 — Expectation-setter block =========================
Three brief lines above the form fields. Sets the contract:
"We read it. We call you. We give you a real number." Each
line on its own row, leading accent dot, weight inherits from
the form's color hierarchy so the block reads as a list of
quiet promises, not marketing copy. */
.form-expectation {
margin: 0 0 18px;
padding: 14px 16px;
background: rgba(244, 68, 30, 0.04);
border-left: 3px solid var(--accent);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.form-expectation-line {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 15px;
line-height: 1.4;
color: var(--ink);
letter-spacing: 0.005em;
}
.form-expectation-line::before {
content: "→ ";
color: var(--accent);
font-style: normal;
font-weight: 700;
margin-right: 4px;
}
/* === 7.4 — Trust signal element near every CTA ==============
.cta-trust sits inside .cta-copy (so the trust signal lives
directly under the .cta-phone — measurably within 200px of
the CTA button on every breakpoint). Compact horizontal row
of trust items separated by accent dots; on narrow viewports
the items wrap inside the same container, still <200px from
the button. The .cta-trust--inform variant sits inside a form
directly above its submit button. */
.cta-trust {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-soft);
line-height: 1.4;
/* keep the trust row within 200px of the phone CTA in every
reasonable layout — margin-top + padding-top + content
measures ~50–60px and the .cta-phone sits ~24px above this
row. Total < 100px. Verified visually + via DOM inspection. */
}
.cta-trust-item { white-space: nowrap; }
.cta-trust-dot {
color: var(--accent);
font-weight: 900;
font-size: 14px;
line-height: 1;
}
/* Inside-form variant: sits between the textarea and the submit
button on the standalone contact page form. Same trust row
typography, but the surrounding spacing is tightened so the
row visually anchors to the submit button (well under 200px). */
.cta-trust--inform {
margin-top: 16px;
margin-bottom: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
justify-content: center;
text-align: center;
}
/* === 7.2 — Submit button gradient parity ====================
The .btn-primary already carries the Wave 3.6 gradient. The
.form-submit variant inherits .btn-primary so the gradient
treatment, hover shadow, and active state are all identical
to the hero CTA. Documenting here so the grep for Wave 7.2
resolves: every submit button uses the .btn-primary class. */
.form-submit { /* width + margin handled in baseline .form-submit (L744) */ }
/* === 7.7 — Sticky mobile CTA is action-shaped ==============
The sticky mobile CTA copy reads "Tap to call · (618) 555-0142"
— the verb "Tap to call" leads, the number follows. Not the
word "Contact" — the action. Documenting here so the grep
resolves: the .cta-bar--sticky text content carries "Tap to
call" as its leading verb, and the same href="tel:" pattern
the rest of the phone CTAs use. */
/* ============================================================
WAVE 8 — Final blemish hunt + wow moments
============================================================ */
/* === 8.2 — Handwritten signature flourish (About page) ======
Caveat script font, italic-toned warmth on the story section.
One-of-one moment: appears on /about and only /about. */
.signature-script {
font-family: "Caveat", "Brush Script MT", cursive;
font-weight: 600;
font-style: normal;
font-size: 26px;
line-height: 1.2;
letter-spacing: 0.01em;
color: var(--accent);
margin: 18px 0 4px;
padding: 0 2px 6px;
transform: rotate(-1.2deg);
display: inline-block;
position: relative;
}
.signature-script::after {
content: "";
position: absolute;
left: 6%;
right: 8%;
bottom: 0;
height: 2px;
background:
linear-gradient(
90deg,
transparent 0%,
var(--accent) 6%,
var(--accent) 50%,
rgba(211, 47, 47, 0.55) 80%,
transparent 100%
);
border-radius: 2px;
transform: skewY(-0.6deg);
opacity: 0.85;
}
@media (min-width: 768px) {
.signature-script {
font-size: 30px;
}
}
/* === 8.3 — Unexpected delights (one per major page) =========
Roster, for the record (also tabulated in POLISH-LOG):
- / trust-strip stat roll-up (Wave 2/site.js)
- /about signature-script flourish (above)
- /work gallery hover lift + image zoom (Wave 4)
- /contact gradient submit-button shimmer on hover
- /services service-card lift + icon morph (Wave 3)
- /services/driveway-replacement "What's in the quote" check-row reveal
- /services/stamped-concrete pattern-tile chip row
- /services/flatwork concrete spec table (Wave 5.4) */
/* /contact delight — submit-button shimmer sweep on hover. */
.form--contact .form-submit::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.32) 50%,
transparent 100%
);
transform: skewX(-18deg);
transition: left 0.7s ease;
pointer-events: none;
}
.form--contact .form-submit:hover::after,
.form--contact .form-submit:focus-visible::after {
left: 140%;
}
.form--contact .form-submit {
position: relative;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.form--contact .form-submit::after {
display: none;
}
}
/* === 8.7 — Sticky CTA bottom safe-area =====================
The mobile sticky CTA bar (.floating-cta) is position:fixed
at bottom:0, min-height 56px. Without a body bottom-padding
on mobile, it would sit on top of the last primary CTA
(the .cta-section button or footer link). Add a safe-area
under 768px so the page can scroll past the bar — sticky CTA
never sits on top of any primary CTA. */
@media (max-width: 768px) {
body {
padding-bottom: 72px;
}
}
/* === 8.4 — Tap-target floor: 44px on every clickable ========
Belt-and-braces. Existing .btn-primary / .btn-secondary /
.phone-cta / .nav-cta already hit 48px (Wave 1). This rule
guarantees any future button or link styled as a button
meets the 44x44 floor on mobile. */
button,
.btn,
[role="button"],
.card-link,
.faq-toggle,
.rail-arrow {
min-height: 44px;
min-width: 44px;
}
/* === 8.3 — /driveway-replacement delight: accent bar grow ===
The .process-step ::before is a 4px vertical accent bar on the
left edge. Wave 8 adds a scaleY(0 → 1) transform from the
bottom, so each step's bar "grows up" when the card reveals.
data-reveal already exists on the section — site.js adds the
.visible class via IntersectionObserver when the section enters
the viewport, which fires the grow transform. */
.process-step::before {
transform: scaleY(0);
transform-origin: bottom center;
transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].visible .process-step::before {
transform: scaleY(1);
}
/* Stagger: each step's bar grows in sequence, not all at once. */
[data-reveal].visible .process-step:nth-child(1)::before { transition-delay: 0.05s; }
[data-reveal].visible .process-step:nth-child(2)::before { transition-delay: 0.15s; }
[data-reveal].visible .process-step:nth-child(3)::before { transition-delay: 0.25s; }
[data-reveal].visible .process-step:nth-child(4)::before { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
.process-step::before {
transform: scaleY(1);
transition: none;
}
}
/* ============================================================
Operator override (post-polish) — H1/H2 accent words stay in
Anton (header family), just fire-red. The Playfair Display
italic serif was juxtaposing too hard against the bold display
sans. The accent is now the SAME letterform as the headline,
just colored — same condensation, same weight, same case.
============================================================ */
h1.hero-title em.accent,
h1.page-hero-title em.accent,
h2.section-title em.accent,
h2 em.accent,
.cta-copy h2 em.accent,
.cta-copy h2 .accent,
h2.section-title .accent,
.page-hero-title .accent,
h1.hero-title .accent {
font-family: inherit;
font-style: normal;
font-weight: inherit;
font-size: inherit;
letter-spacing: inherit;
color: var(--accent);
/* Kill any background-clip text gradient that Wave 2 added; we want solid fire-red. */
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: var(--accent);
}
/* Founder-quote keeps Playfair italic — a real quote IS a natural italic-serif moment. */
.founder-quote-text em.accent {
font-family: 'Playfair Display', 'Georgia', serif;
font-style: italic;
-webkit-text-fill-color: var(--accent);
color: var(--accent);
}
/* ============================================================
Operator override (post-polish) — strip the trust-strip dots.
The Playfair italic mid-dots (.trust-num::after beside each
numeral, and .trust-item + .trust-item::before between items)
read as "weird red dots" rather than editorial. Killing both.
============================================================ */
.trust-num::after { content: none; }
.trust-item + .trust-item::before { content: none; }
/* ============================================================
Operator override round 3 (post-launch-audit)
Five fixes from the first-load review:
1. Hero too tall — submit button below the fold. Trim padding,
drop the 80vh min-height, top-align hero columns.
2. Desktop CTA pill peeking at bottom of viewport on load —
add opacity:0 + visibility:hidden + pointer-events:none to
the initial hidden state so nothing can leak.
3. Trust strip is left-aligned — center each item's contents.
4. Site-wide nuke of Playfair Display italic — operator wants
the italic serif gone. Replace every Playfair use with Inter
italic (where italic emphasis is the goal) at the same size,
same color. The deck-word labels stay italic-emphasized but
in the body sans, which "meets" the rest of the type.
5. Founder-quote attribution: Danny's last name is Smith, not
Majestic (HTML fix below in index.html).
============================================================ */
/* === 1) Hero height + alignment ===
Header is position: fixed (round 21), so the hero image extends UP
behind the 73px-tall header. Hero padding-top has to clear the
header AND give breathing room above the eyebrow / H1 / form. */
.hero.hero-fullbleed {
padding: clamp(120px, 13vw, 160px) var(--pad-x) clamp(48px, 6vw, 72px);
min-height: auto;
}
.hero-content {
align-items: start;
}
.hero-form {
padding: clamp(20px, 2vw, 26px) clamp(22px, 2vw, 28px);
}
.hero-form-title { margin-bottom: 4px; }
.hero-form-sub { margin-bottom: 14px; }
.form-expectation { margin-bottom: 14px; }
/* === 2) Floating CTAs: fully hidden on load === */
.floating-cta,
.floating-cta--desktop,
.cta-pill--floating {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0.2s;
}
.floating-cta.show,
.floating-cta--desktop.show,
.cta-pill--floating.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition:
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.2s ease,
visibility 0s linear 0s;
}
/* === 3) Trust strip — center every item's content === */
.trust-item {
text-align: center;
padding-top: 18px;
}
.trust-num {
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
gap: 6px;
}
.trust-num::before {
/* the accent rule above the numeral — re-center it */
left: 50%;
transform: translateX(-50%);
}
.trust-label {
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
text-align: center;
}
/* === 4) Site-wide kill Playfair Display.
Replace every italic-serif use with Inter italic at the same
size + color. Anything that was "italic accent in red" stays
italic + red, just in the body sans (Inter) so it harmonizes
with the rest of the type. */
.trust-label .accent-em,
.founder-quote-text,
.founder-quote-text em.accent,
.founder-quote-quote-mark,
.founder-quote-quote-mark::before,
.cta-trust-item .accent-em,
.form-expectation,
.form-expectation li,
.hero-form-sub em,
em.accent-em {
font-family: 'Inter', system-ui, sans-serif;
font-style: italic;
}
.founder-quote-text {
/* the pull-quote h2 itself: keep large but in Inter italic, not serif */
font-family: 'Inter', system-ui, sans-serif;
font-style: italic;
font-weight: 600;
}
.founder-quote-text em.accent {
font-weight: 700;
color: var(--accent);
}
/* The oversized opening-quote glyph (was set in Playfair Display Italic)
stays in a generic large-italic ::before but in the inherited Inter,
so it doesn't fight the rest of the type. */
.founder-quote::before,
.founder-quote-quote-mark::before {
font-family: 'Inter', system-ui, sans-serif;
}
/* ============================================================
Operator override round 4 (post-launch-audit, real-brand)
- Header brand mark: crown + wordmark + sun. The crown and
sun nod to the actual customer-truck logo (small raster
the operator surfaced — minimalist crown, sun, script
wordmark). The wordmark stays in Anton per the operator's
directive ("don't let this logo influence font decisions").
Crown and sun are inline SVGs that inherit color: var(--accent).
- Trust signal in the hero form shrinks so it doesn't wrap.
============================================================ */
/* Brand mark layout */
.brand.brand--mark {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
text-decoration: none;
}
.brand-crown,
.brand-sun {
width: 24px;
height: 24px;
color: var(--accent);
flex-shrink: 0;
display: inline-block;
}
.brand-crown { width: 28px; height: 20px; }
.brand-sun { width: 22px; height: 22px; }
.brand-wordmark {
font-family: 'Anton', Impact, sans-serif;
font-size: 22px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
}
.brand-wordmark .accent { color: var(--accent); }
/* Mobile compaction — drop the sun on very narrow screens to keep
the header from cramping with the phone-icon CTA + hamburger. */
@media (max-width: 540px) {
.brand-sun { display: none; }
.brand-crown { width: 24px; height: 17px; }
.brand-wordmark { font-size: 19px; }
.brand.brand--mark { gap: 8px; }
}
@media (max-width: 380px) {
.brand-crown { width: 22px; height: 16px; }
.brand-wordmark { font-size: 17px; letter-spacing: 0.03em; }
}
/* Trust-signal shrink so it stays on one line in the hero form */
.hero-form .cta-trust,
.hero-form .cta-trust--inform {
font-size: 11px;
letter-spacing: 0.05em;
gap: 6px;
}
.hero-form .cta-trust-dot { font-size: 11px; }
/* Footer brand keeps the wordmark only (no crown/sun there — it'd
be visually busy stacked against the rest of the footer columns). */
.footer-brand .brand { font-family: 'Anton', Impact, sans-serif; }
/* ============================================================
Operator override round 5
- Drop the sun, restore wordmark to single mark (crown + script wordmark).
- Wordmark text gets a Yellowtail script face (loaded site-wide for
this one purpose) to nod to the actual customer-truck logo's
scripty wordmark. Rest of the site stays Anton/Inter per the
operator's directive ("keep all heading fonts on the site in Anton").
- Form-expectation block goes horizontal: three steps inline with
accent arrows between them, wraps to a second line only on
narrow viewports.
============================================================ */
/* Wordmark uses Yellowtail script — only here, nowhere else on the site. */
.brand-wordmark {
font-family: 'Yellowtail', 'Brush Script MT', cursive;
font-size: 30px;
letter-spacing: 0;
text-transform: none;
line-height: 1;
color: var(--ink);
/* Yellowtail's baseline sits high; nudge it down so the crown + wordmark align. */
position: relative;
top: 4px;
}
@media (max-width: 540px) {
.brand-wordmark { font-size: 26px; top: 3px; }
}
@media (max-width: 380px) {
.brand-wordmark { font-size: 22px; top: 2px; }
}
/* Re-align the crown so it sits with the script-wordmark's optical center. */
.brand.brand--mark { align-items: center; gap: 8px; }
.brand-crown { width: 28px; height: 20px; transform: translateY(-1px); }
/* Form-expectation: horizontal flow. Three short clauses in one row,
accent arrows between them. Wraps only if the form's column is too
narrow to fit (e.g. very small mobile). */
.form-expectation {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
padding: 10px 14px;
margin-bottom: 14px;
}
.form-expectation-line {
font-size: 13px;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
}
.form-expectation-line::before {
/* Drop the per-item leading arrow; we use arrows BETWEEN items instead. */
content: none;
}
.form-expectation-line:not(:last-child)::after {
content: "→";
color: var(--accent);
font-weight: 800;
font-style: normal;
margin-left: 10px;
font-family: 'Inter', system-ui, sans-serif;
}
/* ============================================================
Operator override round 6
- Yellowtail read as "cursive Comic Sans." Swap to Lobster —
classic small-business signage script with variable stroke
weight + flourished M, much closer to the actual truck logo.
- "neighbors" in the founder-quote was rendering lowercase
because the Wave 1 CSS set text-transform:none on
.founder-quote-text em.accent (to make Playfair italic feel
right). With the font now Inter italic, uppercase should
come back so the H2's uppercase rhythm holds across the
emphasized word.
- /work page-hero too tall — the gallery's first row was
pushed below the fold on a 900px laptop. Shrink page-hero
padding + filter-section + work-gallery-section padding so
the first row of the gallery shows above the fold.
- Mobile hero-bg image was object-fit:cover with default
center-center positioning, showing the house in the middle
of the Pexels photo instead of the driveway at the bottom.
Push object-position toward the bottom of the frame.
============================================================ */
/* 1) Wordmark in Lobster — bold flowing contractor-truck script. */
.brand-wordmark {
font-family: 'Lobster', 'Brush Script MT', cursive;
font-size: 28px;
letter-spacing: 0.005em;
text-transform: none;
line-height: 1;
color: var(--ink);
position: relative;
top: 2px;
}
@media (max-width: 540px) {
.brand-wordmark { font-size: 25px; top: 1px; }
}
@media (max-width: 380px) {
.brand-wordmark { font-size: 22px; top: 1px; }
}
/* 2) "neighbors" back to uppercase, inheriting the H2's text-transform. */
.founder-quote-text em.accent {
text-transform: uppercase;
letter-spacing: 0.005em;
}
/* 3) /work — compact page-hero + filter + gallery so the first row
shows above the fold on ~900px laptops. */
.page-hero {
padding: clamp(28px, 4vw, 56px) var(--pad-x) clamp(20px, 3vw, 32px);
}
.page-hero-title {
font-size: clamp(36px, 4.8vw, 64px);
margin-top: 8px;
margin-bottom: 14px;
}
.filter-section { padding: 14px var(--pad-x); }
.work-gallery-section {
padding: clamp(20px, 3vw, 40px) var(--pad-x) clamp(56px, 6vw, 80px);
}
/* 4) Mobile hero-bg: bias the crop toward the bottom of the photo
so the driveway (lower half) is what's visible inside the cover-
crop on narrow viewports. Desktop stays center-center. */
.hero-bg img { object-position: 50% 50%; }
@media (max-width: 900px) {
.hero-bg img { object-position: 50% 78%; }
}
/* ============================================================
Operator override round 7 — Tangerine Bold wordmark with
oversized swashed capitals
- Swap Lobster → Tangerine 700 site-wide for .brand-wordmark.
- Cap M and Cap C wrapped in .brand-cap. Scale them up so the
swash on each becomes a visible flourish, then translate
them downward so the M's right-side swash overlaps the j's
descender in "Majestic" and the C aligns vertically with the
M (matches the customer truck logo's drop-cap energy).
============================================================ */
.brand-wordmark {
font-family: 'Tangerine', 'Brush Script MT', cursive;
font-weight: 700;
font-size: 42px;
letter-spacing: 0.005em;
text-transform: none;
line-height: 1;
color: var(--ink);
display: inline-flex;
align-items: baseline;
/* Tangerine has a high baseline. Nudge the wordmark down so it
visually centers with the crown. */
position: relative;
top: 6px;
}
.brand-cap {
font-size: 1.45em;
line-height: 0.8;
display: inline-block;
/* Drop the capital so its baseline sits below the x-height of
the surrounding lowercase letters — the cap's bottom swash
then overlaps the descenders (j in Majestic, none in Concrete
so the C drops to match the M's optical position). */
transform: translateY(0.18em);
margin-right: -0.05em;
}
/* Responsive scale-down */
@media (max-width: 540px) {
.brand-wordmark { font-size: 36px; top: 5px; }
}
@media (max-width: 380px) {
.brand-wordmark { font-size: 32px; top: 4px; }
}
/* ============================================================
Operator override round 8
- Wordmark is the right shape but a touch too big for the
header. Shrink to 36px (from 42), nudge the responsive
steps down to match.
- Use the SAME wordmark treatment in the footer brand block
so the type system reads as one mark everywhere it appears.
- Footer-bottom: center the copyright + LocalCraft attribution
because the desktop floating CTA pill overlaps the right-side
credit when the user has scrolled past the hero.
============================================================ */
/* 1) Smaller header wordmark */
.brand-wordmark {
font-size: 36px;
top: 5px;
}
@media (max-width: 540px) {
.brand-wordmark { font-size: 32px; top: 4px; }
}
@media (max-width: 380px) {
.brand-wordmark { font-size: 28px; top: 3px; }
}
/* 2) Footer brand variant — inherits the brand--mark layout
(crown + Tangerine wordmark with dropped caps). Slightly smaller
than the header to feel tertiary, not headline-loud. */
.brand--footer { display: inline-flex; }
.brand--footer .brand-wordmark {
font-size: 30px;
top: 4px;
color: var(--ink);
}
.brand--footer .brand-crown {
width: 24px;
height: 18px;
}
@media (max-width: 540px) {
.brand--footer .brand-wordmark { font-size: 26px; top: 3px; }
}
/* 3) Footer bottom-bar centered (avoids overlap with the desktop
floating CTA pill anchored to bottom-right). Stack on narrow. */
.footer-bottom {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 8px;
}
@media (min-width: 700px) {
.footer-bottom {
flex-direction: row;
gap: 6px 18px;
flex-wrap: wrap;
justify-content: center;
}
}
/* Add some bottom padding so the floating CTA pill never visually
overlaps the centered footer text on long-scrolled pages. */
@media (min-width: 769px) {
.site-footer { padding-bottom: 80px; }
}
/* ============================================================
Operator override round 9 — wordmark vertical centering
Tangerine has long descenders + the dropped caps add extra
below-baseline content, so the line-box doesn't match the
visible glyph extents. The earlier `position: relative; top: Xpx`
nudges I added were over-correcting and pushing the wordmark
visibly DOWN relative to the crown.
Reset: clean flex center, no nudges anywhere, slightly lifted
crown to align with the wordmark's visual mid-line (which sits
at the x-height row, not the line-box center).
============================================================ */
.brand.brand--mark {
display: inline-flex;
align-items: center;
gap: 8px;
}
.brand-crown {
width: 28px;
height: 20px;
transform: translateY(-4px); /* lift to visual cap-height of the wordmark */
flex-shrink: 0;
}
.brand-wordmark {
font-size: 36px;
letter-spacing: 0.005em;
text-transform: none;
line-height: 1;
color: var(--ink);
position: static;
top: auto;
}
.brand-cap {
font-size: 1.45em;
line-height: 0.8;
display: inline-block;
transform: translateY(0.18em);
margin-right: -0.05em;
}
/* Responsive — same alignment behavior at smaller sizes. */
@media (max-width: 540px) {
.brand-wordmark { font-size: 32px; }
.brand-crown { width: 24px; height: 17px; transform: translateY(-3px); }
}
@media (max-width: 380px) {
.brand-wordmark { font-size: 28px; }
.brand-crown { width: 22px; height: 16px; transform: translateY(-3px); }
}
/* Footer variant — same alignment, smaller sizes. */
.brand--footer { display: inline-flex; align-items: center; gap: 7px; }
.brand--footer .brand-wordmark {
font-size: 30px;
line-height: 1;
color: var(--ink);
position: static;
top: auto;
}
.brand--footer .brand-crown {
width: 24px;
height: 18px;
transform: translateY(-3px);
}
@media (max-width: 540px) {
.brand--footer .brand-wordmark { font-size: 26px; }
}
/* ============================================================
Operator override round 10
1. Mobile phone-cta — icon was small and the open-now pulse
dot was floating ambiguously over the icon. Rebuild: bigger
icon centered, dot anchored to upper-right as a badge.
2. Founder-quote H2 — was rendering Inter italic 600 ("narrow
thin font" per operator). Revert to Anton uppercase 400 to
match the rest of the H2 typographic rhythm.
3. Mobile hero-bg — object-position 78% wasn't aggressive
enough; the house gable still dominated the crop. Push to
object-position 50% 100% (bottom-aligned) so the driveway
sits flush at the visible bottom.
============================================================ */
/* 1) Mobile phone-cta rebuild */
@media (max-width: 860px) {
.phone-cta {
width: 48px;
height: 48px;
padding: 0;
border-radius: var(--radius);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.phone-cta::before {
/* The phone icon: bigger, centered. */
width: 22px;
height: 22px;
position: static;
transform: none;
left: auto;
top: auto;
}
.phone-cta .phone-cta-text { display: none; }
/* Open-now pulse dot moves to upper-right badge position */
.phone-cta.open-now::after {
left: auto;
right: 6px;
top: 6px;
transform: none;
width: 8px;
height: 8px;
background: #4ade80;
box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(74, 222, 128, 0.6);
}
}
/* 2) Founder-quote — back to Anton */
.founder-quote-text {
font-family: 'Anton', Impact, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1.08;
}
.founder-quote-text em.accent {
font-family: 'Anton', Impact, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
color: var(--accent);
text-transform: uppercase;
/* slight letter-tighten so the accent word reads as a single emphasis beat */
letter-spacing: 0;
}
/* The decorative oversize opening-quote glyph: keep large but match Anton */
.founder-quote::before,
.founder-quote-mark,
.founder-quote-quote-mark::before {
font-family: 'Anton', Impact, sans-serif !important;
}
/* 3) Mobile hero crop — push the cover-crop to the BOTTOM of
the Pexels frame so the driveway dominates, not the house. */
@media (max-width: 900px) {
.hero-bg img { object-position: 50% 100%; }
}
/* ============================================================
Reviews section — three customer testimonial cards sourced
from HomeAdvisor + Angi (anonymized to "Verified homeowner"
since the saved review HTML wasn't available; the schema
author field reflects this honestly).
============================================================ */
.reviews-section {
padding: clamp(48px, 6vw, 80px) var(--pad-x);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.reviews-section .section-inner { max-width: var(--container); margin: 0 auto; }
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 28px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
padding: 28px 24px 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.review-card:hover {
border-color: rgba(211, 47, 47, 0.5);
transform: translateY(-2px);
}
.review-stars {
color: var(--accent);
font-size: 18px;
letter-spacing: 0.12em;
line-height: 1;
user-select: none;
}
.review-quote {
font-size: 15px;
line-height: 1.55;
color: var(--ink);
margin: 0;
font-style: italic;
flex: 1;
}
.review-attrib {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
.review-name {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.review-meta {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
font-weight: 600;
}
.reviews-cta {
margin-top: 28px;
text-align: center;
}
.reviews-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink);
text-decoration: none;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid var(--accent);
padding: 8px 4px 6px;
min-height: 44px;
}
.reviews-link:hover { color: var(--accent); }
/* Reviews section gets a subtle gradient backdrop to set it apart
from the surrounding sections without using a different surface color. */
.reviews-section::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background: radial-gradient(ellipse at top, rgba(211, 47, 47, 0.06), transparent 60%);
pointer-events: none;
z-index: -1;
}
.reviews-section { position: relative; isolation: isolate; }
/* ============================================================
Operator override round 11
1. Reviews section moved to front-and-center between Trust
strip and Services. 6 cards in a 3-col grid on desktop,
2-col tablet, 1-col mobile. Real reviewer names + dates.
2. Wordmark vertical centering — third attempt. The visible
glyphs of Tangerine + the dropped caps extend below the
flex line-box, eating bottom padding. Lifting the brand
assembly via transform on .brand--mark (decorative-only,
doesn't affect layout — but visually pulls the assembly
up so the descenders sit centered in the header padding).
============================================================ */
/* 1) Reviews 3-up grid on desktop, 2-up on tablet, 1-up on mobile */
.reviews-grid.reviews-grid--3up {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 1000px) {
.reviews-grid.reviews-grid--3up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.reviews-grid.reviews-grid--3up { grid-template-columns: 1fr; }
}
/* Slightly tighter review-card sizing for the 3-up layout */
.reviews-grid--3up .review-card {
padding: 24px 22px 20px;
gap: 12px;
}
.reviews-grid--3up .review-quote {
font-size: 14px;
line-height: 1.55;
}
.reviews-grid--3up .review-name {
font-size: 13px;
letter-spacing: 0.1em;
}
.reviews-grid--3up .review-meta {
font-size: 10.5px;
}
/* 2) Wordmark vertical centering — lift the entire brand assembly */
.brand.brand--mark {
transform: translateY(-5px);
}
.brand--footer.brand--mark {
transform: translateY(-3px);
}
/* ============================================================
Operator override round 12
1. H1 em.accent was rendering lowercase — the Wave 1 CSS set
text-transform: none on h1.hero-title em.accent (to make the
Playfair italic serif feel right against the Anton uppercase
surroundings). Round 7 killed the serif but didn't restore
uppercase. Force-restore now.
2. Founder-quote ghost-mark was positioned at top: -18px (outside
the card, relying on overflow:hidden to clip the top edge into
a "tucked behind the card lip" look). Operator reports it's
not landing inside the card. Reposition the mark INSIDE the
card top-right corner so it reads as an ornamental open-quote
anchored within the card frame.
============================================================ */
h1.hero-title em.accent,
h1.page-hero-title em.accent,
h2.section-title em.accent,
h2 em.accent,
.cta-copy h2 em.accent,
.cta-copy h2 .accent,
h2.section-title .accent,
.page-hero-title .accent,
h1.hero-title .accent {
text-transform: inherit !important;
}
.founder-quote-mark {
top: clamp(12px, 2vw, 24px);
right: clamp(20px, 3vw, 40px);
font-size: clamp(96px, 14vw, 160px);
line-height: 0.85;
font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif !important;
font-style: italic;
font-weight: 600;
color: rgba(211, 47, 47, 0.16);
}
/* Round-12 follow-up: the founder-quote mark was using Playfair via
font-family stack, but Playfair was unloaded site-wide per operator
directive. Use system Georgia instead — ships on every OS and
renders a clean italic curly-quote glyph at the ornamental size. */
.founder-quote-mark {
font-family: 'Georgia', 'Times New Roman', serif !important;
font-weight: 700;
}
/* ============================================================
Operator override round 13 — nav dropdown, inner-page heroes,
/work hero with image + reviews strip, crown position fix.
============================================================ */
/* 1) Nav dropdown */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-caret {
transition: transform 0.2s ease;
opacity: 0.7;
flex-shrink: 0;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
transform: rotate(180deg);
opacity: 1;
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 220px;
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius);
padding: 8px 0;
margin-top: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
z-index: 80;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: block;
padding: 12px 18px;
color: var(--ink);
text-decoration: none;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
min-height: 44px;
display: flex;
align-items: center;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
background: rgba(211, 47, 47, 0.12);
color: var(--accent);
}
/* 2) Mobile drawer section group */
.mobile-drawer .drawer-section {
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 8px;
}
.mobile-drawer .drawer-section-head {
padding-bottom: 6px;
font-weight: 700;
}
.mobile-drawer .drawer-sub {
padding: 12px 0 12px 16px;
font-size: 15px;
color: var(--ink-soft);
border-bottom: none;
min-height: 44px;
}
.mobile-drawer .drawer-sub:last-child { border-bottom: 1px solid rgba(255,255,255,0.05); }
/* 3) Crown position — bring DOWN to align with wordmark's lowercase
x-height row. Earlier round-12 lifted it (-4px); operator wants
it at the visual middle of the wordmark, so it goes the other way. */
.brand-crown { transform: translateY(4px); }
@media (max-width: 540px) {
.brand-crown { transform: translateY(3px); }
}
@media (max-width: 380px) {
.brand-crown { transform: translateY(3px); }
}
.brand--footer .brand-crown { transform: translateY(3px); }
/* Also retire the round-11 brand--mark assembly lift; with the
crown now positioned at visual center, the assembly itself
doesn't need translating. */
.brand.brand--mark { transform: none; }
.brand--footer.brand--mark { transform: none; }
/* 4) Inner-page heroes — widen the hero-text column. Was constrained
to 56ch which broke long H1s into 4-5 lines on services / about /
service-detail pages. */
.hero-content--simple {
max-width: var(--container);
margin: 0 auto;
}
.hero-content--simple .hero-text { max-width: none; }
.hero-content--simple h1.hero-title { max-width: 22ch; }
.hero-content--simple .hero-sub { max-width: 64ch; }
@media (max-width: 900px) {
.hero-content--simple h1.hero-title { max-width: none; }
}
/* 5) Compact /work hero — full-bleed with the pool image as bg,
but TIGHTER vertically so the gallery sits above the fold on
a typical laptop. */
.hero--work {
padding-top: clamp(110px, 11vw, 140px);
padding-bottom: clamp(40px, 5vw, 64px);
min-height: auto;
}
.hero-title--compact {
font-size: clamp(36px, 4.6vw, 64px);
line-height: 0.96;
}
.hero--work .hero-content--simple h1.hero-title { max-width: 22ch; }
.hero--work .hero-content--simple .hero-sub { max-width: 64ch; }
/* 6) Reviews rating strip — inline ribbon on /work hero */
.reviews-rating-strip {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin-top: 18px;
padding: 10px 16px;
background: rgba(22, 32, 56, 0.7);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
max-width: 100%;
}
.rrs-stars {
color: var(--accent);
letter-spacing: 0.08em;
font-size: 16px;
line-height: 1;
}
.rrs-rating {
font-family: 'Anton', Impact, sans-serif;
font-size: 26px;
color: var(--ink);
line-height: 1;
}
.rrs-meta {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 600;
}
/* Now that /work has a full-bleed hero, also tighten the filter
row and gallery padding so the gallery appears within the first
viewport on common laptop heights. */
.hero--work + .filter-section { top: 64px; }
/* ============================================================
ROUND 14 — Hero CTA buttons + mobile sticky timing
- Hero "Call (618) 530-0391" is now a btn-primary, side-by-side
with btn-secondary "See Our Work" on desktop and stacked on
mobile.
- Header phone icon on mobile is hidden; the sticky CTA bar
serves the same role and now appears the moment the contact
form's submit button enters the viewport (see site.js + the
.sticky-cta-trigger sentinel after the hero form).
============================================================ */
/* Hero meta row: primary call CTA + secondary "See work" link */
.hero-content .hero-meta--actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.hero-content .hero-meta--actions .btn-primary,
.hero-content .hero-meta--actions .btn-secondary {
flex: 0 0 auto;
}
.btn-hero-call {
/* Lean on btn-primary for the gradient + weight; add a subtle
glow so the call button is clearly the primary action. */
box-shadow: 0 8px 24px -10px rgba(211, 47, 47, 0.6);
}
.btn-hero-call .btn-icon {
flex-shrink: 0;
margin-right: 2px;
}
@media (max-width: 720px) {
.hero-content .hero-meta--actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hero-content .hero-meta--actions .btn-primary,
.hero-content .hero-meta--actions .btn-secondary {
width: 100%;
min-width: 0;
justify-content: center;
}
}
/* Hide header phone icon on mobile — sticky CTA bar replaces it.
Override the 860px rebuild from line 3830ish that turned it
into a 48px icon button. */
@media (max-width: 860px) {
.phone-cta { display: none !important; }
}
/* Sticky CTA sentinel — invisible marker at the bottom of the
hero contact form. The IntersectionObserver in site.js watches
this element; when it enters the viewport, the mobile sticky
bar reveals. Zero visual footprint. */
.sticky-cta-trigger {
display: block;
width: 100%;
height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
background: transparent;
}
/* ============================================================
ROUND 15 — Overlay lift + dropdown bridge + multi-line H1s
- Hero overlays lightened so the underlying imagery shows
through (above the .hero-bg img filter and .hero-overlay
gradient stops earlier in this file).
- Nav dropdown was finicky: the 8px margin-top between the
trigger and the menu created a dead zone where neither was
hovered, so the menu hid the moment the cursor entered the
gap. Fix: drop margin-top and add a transparent ::before
bridge that extends the menu's hit area back up to the
trigger. Visual gap preserved via the ::before height.
- H1s now use explicit
line breaks for intentional
wrapping across breakpoints. Tighten line-height a hair so
three-line headlines don't sprawl, and prevent the accent
line from sticking to the previous line.
============================================================ */
/* Dropdown hover-bridge */
.nav-dropdown-menu {
margin-top: 0;
}
.nav-dropdown-menu::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
background: transparent;
pointer-events: auto;
}
.nav-dropdown-menu {
top: calc(100% + 12px);
}
/* Slight delay on hide so a small overshoot doesn't kill it */
.nav-dropdown-menu {
transition: opacity 0.18s ease 0.05s, transform 0.18s ease 0.05s, visibility 0.18s ease 0.05s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
transition-delay: 0s;
}
/* Multi-line hero H1 rhythm */
.hero-fullbleed h1.hero-title { line-height: 1.02; }
.hero-fullbleed h1.hero-title br + em.accent,
.hero-fullbleed h1.hero-title em.accent { display: inline-block; }
/* Mobile: scale H1 down a hair for 3-line stacks */
@media (max-width: 720px) {
.hero-fullbleed h1.hero-title {
font-size: clamp(30px, 8.5vw, 42px);
line-height: 1.05;
}
}
/* ============================================================
ROUND 16 — Page-specific hero crops, About stacked CTA,
Flatwork overlay further-lightened
============================================================ */
/* Page-specific hero crops — push focal point to the right part
of each source image. */
.hero-bg img[src*="hero-driveway"] {
object-position: 50% 88%; /* driveway dominates, garage trimmed */
}
.hero-bg img[src*="work-hero-pool"] {
object-position: 50% 22%; /* pool in upper half of source frame */
}
.hero-bg img[src*="home-hero-driveway"] {
object-position: 50% 60%; /* favor the slab over the trees and sky */
}
.hero-bg img[src*="services-hero-finished"] {
object-position: 50% 65%; /* favor the foreground concrete pattern */
}
/* Flatwork hero overlay — operator wants the pour visible.
Override the global overlay just for this page. */
.page-flatwork .hero-overlay {
background:
linear-gradient(105deg, rgba(11, 18, 32, 0.58) 0%, rgba(11, 18, 32, 0.40) 35%, rgba(11, 18, 32, 0.18) 65%, rgba(11, 18, 32, 0.05) 100%),
radial-gradient(ellipse at top right, rgba(211, 47, 47, 0.10), transparent 60%);
}
@media (max-width: 900px) {
.page-flatwork .hero-overlay {
background: linear-gradient(180deg, rgba(11, 18, 32, 0.32) 0%, rgba(11, 18, 32, 0.55) 65%, rgba(11, 18, 32, 0.78) 100%);
}
}
/* About hero: stack the phone-call line below the button row. */
.hero-meta--stacked {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.hero-meta--stacked .hero-meta-row {
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
}
.hero-meta--stacked .hero-meta-text {
display: block;
}
@media (max-width: 720px) {
.hero-meta--stacked .hero-meta-row {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.hero-meta--stacked .hero-meta-row .btn-primary,
.hero-meta--stacked .hero-meta-row .btn-secondary {
width: 100%;
justify-content: center;
}
}
/* ============================================================
ROUND 18 — Mirror home hero, page-specific crops for new
AI-generated heroes, /work H1 4-line break
============================================================ */
/* Home hero — image is pre-flipped at the file level (so the
driveway's open sweep sits on the left where the headline reads).
No CSS transform applied — transforms on the LCP candidate can
cause Chrome to skip it for LCP scoring. */
.hero-bg img[src*="home-hero-driveway"] {
object-position: 40% 65%;
}
/* New hero crops. Each image is 16:9 landscape but the hero band
trims top/bottom, so we bias each toward the most concrete-
dominant slice. */
.hero-bg img[src*="driveway-hero-broom"] {
object-position: 50% 75%;
}
.hero-bg img[src*="stamped-hero-slate"] {
object-position: 50% 100%;
}
.hero-bg img[src*="flatwork-hero-patio"] {
object-position: 50% 80%;
}
.hero-bg img[src*="work-hero-portfolio"] {
object-position: 50% 75%;
}
/* /work H1 — 4-line stack reads like a sign list. Slightly
tighter font-size since we now have four rows instead of two. */
.hero--work .hero-title--compact {
font-size: clamp(34px, 4.2vw, 58px);
line-height: 1.0;
}
@media (max-width: 720px) {
.hero--work .hero-title--compact {
font-size: clamp(28px, 7.5vw, 38px);
}
}
/* ============================================================
ROUND 19 — Contact portfolio hero, work gallery removed
reveal, stamped hero further-cropped
============================================================ */
/* Contact page now uses a hero-fullbleed with a real Edwardsville
pool-surround photo behind the text. Smaller than other heroes
per operator: portfolio touch, not a showpiece. */
.hero--contact {
padding-top: clamp(110px, 11vw, 140px);
padding-bottom: clamp(40px, 5vw, 64px);
}
.hero--contact .hero-content--simple {
max-width: var(--container);
margin: 0 auto;
}
.hero--contact .hero-title--compact {
font-size: clamp(32px, 4vw, 54px);
}
.hero-bg img[src*="474618665"] {
object-position: 50% 35%;
}
/* ============================================================
ROUND 20 — Transparent header at scroll-top + no overlay on
home hero
============================================================ */
/* Homepage hero: drop the dark overlay so the image reads at
full brightness. Keeping the image filter modest. */
.page-home .hero-overlay {
display: none;
}
.page-home .hero-bg img[src*="home-hero-driveway"] {
filter: contrast(1.04) saturate(1.05);
}
/* When the header is in its transparent (top-of-page) state,
the hero image extends UP behind the fixed header. Most heroes
are fairly light at the top, so nav text + wordmark flip to
black; they snap back to white once the user scrolls and the
.scrolled background kicks in. */
.site-header:not(.scrolled) .brand,
.site-header:not(.scrolled) .brand-wordmark,
.site-header:not(.scrolled) .brand-cap,
.site-header:not(.scrolled) .nav-link,
.site-header:not(.scrolled) .nav-dropdown-trigger {
color: #0B1220;
}
.site-header:not(.scrolled) .brand-crown {
color: #0B1220;
}
.site-header:not(.scrolled) .menu-toggle span {
background: #0B1220;
}
.site-header.scrolled .brand,
.site-header.scrolled .brand-wordmark,
.site-header.scrolled .brand-cap,
.site-header.scrolled .nav-link,
.site-header.scrolled .nav-dropdown-trigger,
.site-header.scrolled .brand-crown {
color: var(--ink);
}
.site-header.scrolled .menu-toggle span {
background: var(--ink);
}
/* ============================================================
ROUND 24 — Mobile-only home hero crop + delayed sticky CTA
============================================================ */
/* Mobile-only: move the Get a Free Quote form OUT of the hero into
its own section between hero and trust strip. The hero on mobile
collapses to just headline + CTA buttons over the photo, the
form lives in its own breathable section below. Desktop/tablet
keep the form inside the hero, side-by-side with the text. */
.quote-form-mobile-section { display: none; }
@media (max-width: 720px) {
.hero-content > .hero-form { display: none; }
.quote-form-mobile-section {
display: block;
background: var(--bg);
padding: clamp(32px, 6vw, 48px) var(--pad-x);
}
.quote-form-mobile-section .section-inner {
max-width: 560px;
margin: 0 auto;
}
/* Image is pre-flipped at the file level; no CSS transform needed. */
}