(or on the h3 itself for the static
variant) so the whole button area is the click target. The 0,3,0 selector
also has to out-specify `.section-dark a` (0,1,1), which would otherwise
tint the label with --color-secondary. */
.service-card .service-card-cta {
margin: 0;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.2;
}
.service-card .service-card-cta > a,
.service-card .service-card-cta.service-card-cta--static {
display: block;
background: var(--color-accent);
color: var(--color-on-accent);
text-align: center;
text-decoration: none;
padding: 0.7rem 1rem;
border-radius: var(--radius-sm);
transition: background-color .15s ease;
}
.service-card .service-card-cta > a:hover { background: var(--color-accent-dark); }
/* Static (non-link) variant — looks like the button but isn't interactive.
Used on the service cards we deliberately don't link out from the home page. */
.service-card .service-card-cta--static { cursor: default; }
/* ---------- Why-choose-us — now uses the shared .flex-media block (see above) ---------- */
/* ---------- Feature-aside (text column + aside links, over image bg) ---------- */
/* Background image behind the (already dark) section. Placed after .section-dark
in source so it wins the equal-specificity background cascade. Swap the image
once real content/photography lands. */
.feature-aside {
position: relative;
background:
var(--overlay-deep),
url("/images/snow-removal-service-bg.webp") center / cover no-repeat,
var(--color-primary);
}
.feature-aside-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 960px) { .feature-aside-grid { grid-template-columns: 1.5fr 1fr; } }
.feature-aside-side {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
.feature-aside-box {
background: var(--color-primary-mid);
padding: 1.75rem;
border-radius: var(--radius-md);
text-align: center;
}
.feature-aside-box .feature-aside-box-title {
color: #fff;
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: uppercase;
line-height: 1.05;
}
.feature-aside-box .btn { width: 100%; background: var(--color-secondary); color: var(--color-primary); }
.feature-aside-box .btn:hover { background: #fff; }
/* ---------- Spotlight ---------- */
/* ---------- Banner (flex block: centered content over image bg) ---------- */
.banner {
position: relative;
min-height: 480px;
display: flex;
align-items: center;
background:
var(--overlay-banner),
url("/images/parking-lot-snow-removal-piles-bg.webp") center / cover no-repeat,
var(--color-primary);
color: #fff;
padding: clamp(3rem, 6vw, 5rem) 0;
}
.banner-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.banner h2 { color: #fff; }
.banner p { color: rgba(255, 255, 255, 0.85); }
/* Heading and CTA row stay centred (.banner-inner text-align + the row's own
justify-content); only the body copy goes ragged-right, which reads far
better now the block runs to two paragraphs. */
.banner-inner p { text-align: left; }
.banner-inner .banner-kicker { text-align: center; }
/* Stucco Systems and Finishes: the 70ch intro keeps the base rule's auto
margins so it sits centred under the centred h2, but its text reads
left-justified. #systems is the only .process-intro left on the site. */
#systems .process-intro { text-align: left; }
/* Our Stucco Project Process: .process-step centres the whole step, which is
right for the icon, the step number and the h3 — only the step's body copy
goes ragged-right. The icon keeps its own margin:0 auto, so it is unaffected.
NOTE: the FAQ intro and the process intro were both .process-intro and both
have been removed, so #systems is the only remaining use and the base rule's
`text-align: center` no longer renders anywhere. */
.process-step p { text-align: left; }
.banner-kicker {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
font-size: 0.9rem;
color: var(--color-secondary) !important;
margin: 0 0 0.5rem;
}
.banner-cta-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
justify-content: center;
margin-top: 1.75rem;
}
.spotlight {
position: relative;
background:
var(--overlay-spotlight),
url("/images/downtown-grand-rapids-mi-skyline-bg.webp") center / cover no-repeat,
var(--color-charcoal);
color: #fff;
}
.spotlight .container { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 880px) { .spotlight .container { grid-template-columns: 1.3fr 1fr; } }
.spotlight h2 { color: var(--color-secondary); }
/* .spotlight is a dark panel but carries no .section-dark class, so headings
would take the base light-surface ink (--color-primary) and vanish. */
.spotlight h3 { color: var(--color-fg-on-dark); }
.spotlight-side-title {
font-family: var(--font-display);
font-size: clamp(1.85rem, 4vw, 2.75rem);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: uppercase;
line-height: 1.05;
color: #ffffff;
margin: 0 0 1rem;
}
.spotlight-areas {
display: grid;
grid-template-columns: 1fr;
gap: 0 1.5rem;
}
@media (min-width: 480px) { .spotlight-areas { grid-template-columns: 1fr 1fr; } }
.spotlight-areas li { color: rgba(255,255,255,0.9); }
.spotlight-areas a { color: rgba(255,255,255,0.9); text-decoration: none; }
.spotlight-areas a:hover { color: #fff; text-decoration: underline; }
/* ---------- (feature-columns retired — long content now uses .flex-media--long) ---------- */
/* ---------- How it works ---------- */
.process-intro { max-width: 70ch; margin: 0 auto 2.5rem; text-align: center; }
.process-grid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 600px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-step { text-align: center; }
.process-step img,
.process-step .process-step-icon {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.process-step .process-step-icon {
background: var(--color-primary-mid);
color: var(--color-secondary);
}
.process-step .step-num {
display: block;
font-family: var(--font-display);
font-size: 2rem;
color: var(--color-accent);
line-height: 1;
margin-bottom: 0.25rem;
}
.process-step h3 { color: #fff; margin-bottom: 0.5rem; }
.process-step p { color: rgba(255,255,255,0.78); font-size: 0.95rem; }
/* Mini CTA inside dark sections */
.mini-cta {
margin-top: 3rem;
text-align: center;
padding: 1.5rem;
background: rgba(255,255,255,0.03);
border-radius: var(--radius-md);
}
.mini-cta p {
color: var(--color-accent);
font-weight: 700;
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.mini-cta p + p { color: rgba(255,255,255,0.78); font-weight: 400; margin-bottom: 1rem; }
.mini-cta .btn-primary { font-size: 0.95rem; color: var(--color-on-accent); }
.mini-cta .btn-primary:hover { color: var(--color-on-accent); }
/* ---------- Areas served chips (used elsewhere) ---------- */
.areas-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
padding: 0;
margin: 1rem 0 0;
list-style: none;
}
.areas-list li {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 0;
padding: 0.35rem 0.9rem;
font-size: 0.95rem;
color: var(--color-primary);
}
/* ---------- Testimonials carousel ---------- */
.testimonials { background: var(--color-bg-alt); }
.testi-carousel {
display: flex;
align-items: center;
gap: clamp(0.5rem, 2vw, 1rem);
margin-top: 2rem;
}
.testi-viewport {
overflow: hidden;
flex: 1 1 auto;
min-width: 0; /* allow the flex item to shrink instead of forcing overflow */
}
.testi-track {
display: flex;
margin: 0;
padding: 0;
list-style: none;
will-change: transform;
}
.testi-slide {
flex: 0 0 100%;
width: 100%;
padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem);
}
.testi-quote {
margin: 0 auto;
max-width: 760px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-top: 4px solid var(--color-accent);
padding: clamp(1.5rem, 4vw, 2.75rem);
text-align: center;
box-shadow: var(--shadow-md);
}
.testi-quote > p {
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.6;
font-style: italic;
color: var(--color-text);
margin: 0 0 1.5rem;
}
.testi-quote > p::before { content: "\201C"; }
.testi-quote > p::after { content: "\201D"; }
.testi-cite {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.testi-name {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-primary);
}
.testi-meta { font-size: 0.9rem; color: var(--color-text-muted); }
.testi-arrow {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.testi-arrow:hover { background: var(--color-accent); color: var(--color-on-accent); }
.testi-arrow:active { transform: scale(0.94); }
.testi-arrow svg { width: 24px; height: 24px; }
.testi-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
/* The idle dot was --color-border, a hairline token doing duty as a UI fill: it
measured 1.15–1.27:1 against its own band in ALL FIVE palettes, so the row read
as one floating dot rather than a position indicator (same bug fixed on
rochester-radon-mitigation-co, 2026-08-04). --color-dot-idle is --color-text-muted
mixed 45% into that palette's band, precomputed per palette and shipped as a token
rather than left as a live color-mix() — the token set IS the skin here, and a
palette-critical color computed inline in a block rule is the one thing this
stylesheet's contract rules out. (color-mix renders this correctly; it was tried.)
It lands ~1.85:1 — visible, and deliberately NOT higher: the
accent-colored ACTIVE dot is itself only 1.65–2.59:1 on a light band, so a
full-strength muted idle dot (4.5–5.4:1) would out-shout the active one in
graphite and evergreen and invert the emphasis. State is carried by hue —
neutral gray vs saturated accent — not by lightness. Like rochester, these
dots are aria-hidden decoration and the arrows are the real control. */
.testi-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-dot-idle);
transition: background-color .15s ease;
}
.testi-dot.is-active { background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
.testi-track { transition: none !important; }
}
/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.faq-item {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.faq-item > summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 400;
color: var(--color-accent);
flex-shrink: 0;
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item > .faq-body { padding: 0 1.25rem 1.25rem; color: var(--color-text-muted); }
/* ---------- Get In Touch ---------- */
.cta-split {
/* Single stacked column at every width: heading, copy, then buttons each get
their own row. The block is centred in the container but its text stays
left-justified, so the left edge lines up down the whole stack. */
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: 1fr;
align-items: start;
max-width: 68ch;
margin-inline: auto;
/* Paragraphs read left-justified; the heading and the button row centre. */
text-align: left;
}
.cta-split h2 { text-align: center; margin: 0; }
.cta-split .btn-row { justify-content: center; }
/* The two inner s are leftovers of the old two-column split. display:
contents lifts their children into the grid, so heading, paragraphs and
button row each land in their own row with ONE uniform gap between rows —
without it the seam between the divs got grid gap + paragraph margin. */
.cta-split > div { display: contents; }
.cta-split p { margin: 0; }
.cta-split .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--color-charcoal);
color: var(--on-dark-body);
padding: 3rem 0 1.5rem;
}
.site-footer a { color: var(--on-dark-body); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Three columns: brand/NAP/quick-links, Services, Service Areas. */
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1.1fr 1.5fr; } }
/* 19 service areas run a full column taller than every neighbour, so the areas
list splits into two flowed columns and its grid track is widened to suit. */
@media (min-width: 720px) {
.footer-areas-list { columns: 2; column-gap: 1.5rem; }
.footer-areas-list li { break-inside: avoid; }
}
.footer-grid h3 {
color: #fff;
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 0.04em;
margin: 0 0 0.4rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--color-accent);
display: inline-block;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-logo {
height: 80px;
width: auto;
display: block;
max-width: 100%;
}
@media (max-width: 720px) {
.footer-logo { height: 64px; }
}
.footer-contact .phone {
display: block;
font-family: var(--font-display);
font-size: 1.5rem;
color: #fff;
letter-spacing: 0.04em;
margin-bottom: 0.5rem;
}
.footer-contact address { font-style: normal; line-height: 1.7; margin-top: 0.75rem; }
/* NAP block under the footer logo: icon in a fixed gutter, text beside it. */
.footer-nap { margin: 1.25rem 0 1.75rem !important; }
.footer-nap li {
display: grid;
grid-template-columns: 16px 1fr;
align-items: start;
gap: 0.6rem;
line-height: 1.5;
}
.footer-nap svg { margin-top: 0.2em; color: var(--color-accent); flex: none; }
.footer-nap address { font-style: normal; margin: 0; }
/* The phone is one NAP row among four, so it takes the same type as its
siblings — no display face, no size bump. */
.footer-nap .phone { font-size: inherit; }
.footer-quick-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-quick-links svg { color: var(--color-accent); flex: none; }
.legal {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.85rem;
color: var(--on-dark-faint);
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
}
.legal a { margin-right: 1rem; }
/* ============================================================
Service page — content column + sticky right rail
(template basis for /services//)
============================================================ */
/* .hero-service inherits the home-page .hero dimensions as-is (same height);
it only carries the breadcrumb above the H1 and its own hero photo. */
.hero-service {
background:
var(--overlay-hero),
url("/images/snow-hauling-relocation-bg.webp") center / cover no-repeat,
var(--color-charcoal);
}
/* Breadcrumb (sits above the H1 inside the hero) */
.breadcrumb { margin: 0 0 1rem; }
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 0.6rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.85rem;
}
.breadcrumb li {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: rgba(255, 255, 255, 0.75);
}
.breadcrumb li:not(:last-child)::after {
content: "/";
color: rgba(255, 255, 255, 0.4);
}
.breadcrumb a { color: var(--color-secondary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }
/* Two-column layout: content + rail */
.service-layout {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 960px) {
.service-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}
/* Content column */
.service-content > :first-child { margin-top: 0; }
.service-content h2 {
margin-top: 1.8em;
color: var(--color-primary);
}
/* in-page anchor targets clear the sticky header on jump */
.service-content h2[id] { scroll-margin-top: calc(80px + 1rem); }
.service-content h3 {
margin-top: 1.4em;
color: var(--color-link);
/* size inherits the global h3 (20px desktop) so it matches every other page */
}
.service-intro { color: var(--color-text); }
.service-areas-line {
font-size: 0.95rem;
margin-bottom: 1.75rem;
}
.service-areas-line strong { color: var(--color-primary); }
/* Numbered process steps */
.process-steps {
list-style: none;
counter-reset: step;
margin: 1rem 0 0;
padding: 0;
display: grid;
gap: 1.5rem;
}
.process-steps li {
position: relative;
padding-left: 3.75rem;
counter-increment: step;
min-height: 2.75rem;
}
.process-steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-display);
font-size: 1.5rem;
line-height: 1;
}
.process-steps h3 { margin: 0 0 0.35rem; color: var(--color-primary); }
.process-steps p { margin: 0; }
/* Sticky right rail */
.service-rail {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 960px) {
.service-rail {
position: sticky;
top: calc(80px + 1.5rem); /* header height + breathing room */
}
}
.rail-card {
background: var(--color-primary);
color: var(--color-secondary);
padding: 1.5rem 1.5rem 1.75rem;
}
.rail-title {
margin: 0 0 1rem;
text-align: center;
color: #fff;
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rail-nav { list-style: none; margin: 0; padding: 0; }
.rail-nav li { margin: 0; }
.rail-nav a {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0;
color: var(--color-secondary);
text-decoration: none;
font-weight: 600;
font-size: 0.98rem;
line-height: 1.3;
}
/* leading navigation arrow from the icon sprite; color follows currentColor */
.rail-nav a svg { flex-shrink: 0; }
.rail-nav a:hover { color: #fff; text-decoration: underline; }
.rail-nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.rail-cta {
background: var(--color-primary-mid);
color: #fff;
padding: 1.5rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.rail-cta-title {
margin: 0;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.1;
}
.rail-cta-sub { margin: 0 0 0.25rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; }
/* Final dark CTA (call / quote split) */
.final-cta .cta-split { margin-top: 2.5rem; align-items: start; }
.final-cta .cta-split h3 { margin-top: 0; color: #fff; }
.final-cta .cta-split .btn { margin-top: 0.5rem; }
/* ---------- Utility pages ---------- */
.page-narrow { max-width: 720px; margin: 0 auto; }
.page-narrow h2 { margin-top: 2em; }
.page-narrow ul { padding-left: 1.25em; }
/* ---------- Heading weight (Fraunces on this site) ----------
Give headings real weight so they don't read thin.
Placed last so it wins on cascade order. */
h1, h2, h3,
.subhead, .spotlight-side-title, .feature-aside-box .feature-aside-box-title,
.service-card-header, .rail-title { font-weight: 700; }
.process-step .step-num { font-weight: 800; }
/* ============================================================
SITE-LOCAL — st-george-elite-stucco
TEMPORARY: gray placeholder art.
The template's section-background photos are rely's snow images, deleted from
this site (wrong trade). Each of the five background slots now carries its own
St. George stucco photograph, so this block is PERMANENT — it is the point at
which this file deliberately diverges from the template. Swap a filename here
to change a section background; do not delete the block.
============================================================ */
/* Each rule keeps its OWN overlay gradient and its OWN solid fallback layer —
these are three-layer `background` shorthands, so overriding background-image
alone would drop `center / cover no-repeat` and the fallback colour. */
.hero {
background:
var(--overlay-hero),
url("/images/hero-st-george-red-rock-v3-1600.webp") center / cover no-repeat,
var(--color-charcoal);
}
.hero-service {
background:
var(--overlay-hero),
url("/images/hero-service-scratch-coat-1600.webp") center / cover no-repeat,
var(--color-charcoal);
}
.feature-aside {
/* --overlay-deep runs 0.87->0.94 and is shared with another rule, so it is
overridden here rather than retuned globally. Softened so the sand-float
texture actually reads; white body copy still measures well above 7:1 over it. */
background:
linear-gradient(135deg, rgba(9, 33, 44, 0.78) 0%, rgba(9, 33, 44, 0.87) 100%),
url("/images/why-choose-bg-1600.webp") center / cover no-repeat,
var(--color-primary);
}
.banner {
background:
var(--overlay-banner),
url("/images/benefits-bg-1600.webp") center / cover no-repeat,
var(--color-primary);
}
.spotlight {
background:
var(--overlay-spotlight),
url("/images/about-st-george-red-rock-1600.webp") center / cover no-repeat,
var(--color-charcoal);
}
/* --- Top-of-right-column figure: absorb column slack ---------------------
rely's .flex-media-long-figure is fixed-height, so a --long block only
balances if the copy happens to divide evenly. On "Which Stucco Service Do
You Need?" every legal split point left 82px+ of ragged bottom. Letting the
figure grow into the slack (the trick the polebarn skin gets from
`flex: 1 1 0`) squares the columns without touching a word of copy. */
/* Figures stay at their NATURAL aspect ratio — deliberately not stretched.
An earlier revision let them grow to square up the two columns, which
balanced every block but produced 561x831 portrait crops of a 4:3 source.
Image fidelity wins. */
.flex-media-long-col > .flex-media-long-figure { flex: 0 0 auto; }
.flex-media-long-col > .flex-media-long-figure img { height: auto; object-fit: initial; }
/* Bottom-anchoring the figure column's tail copy was tried here to make the two
columns end level. It does — but it just relocates the slack into a void in
the MIDDLE of the column (370px between the image and a one-line CTA on the
pricing block), which reads worse than an uneven bottom. Reverted: the slack
is dealt with per block, by choosing the split point so the copy divides more
evenly. See the block comments in index.html. */
/* --- Corner accent triangle on every block figure ------------------------
Sits ON the image at its top outer corner, offset outward past both edges.
The corner FOLLOWS THE IMAGE'S COLUMN: figures that render on the right get
the top-right corner, figures that render on the left get the top-left.
Note --reverse flips the image side in CSS only (source order is unchanged),
so the side is read off the section's modifier, never off source position. */
.flex-media-figure,
.flex-media-long-figure {
position: relative;
overflow: visible; /* let the accent break the figure's bounds */
}
.flex-media-figure::after,
.flex-media-long-figure::after {
content: "";
position: absolute;
top: -8px;
width: 76px;
height: 76px;
background: var(--color-accent);
z-index: 2;
pointer-events: none;
}
/* --- --long-reverse: stop bottom-anchoring the figure --------------------
The template pins that figure to the foot of its column with margin-top:auto.
That only looks right when the column's copy nearly fills the row; on the
Desert Climate block the left column is one intro paragraph against three
subsections opposite, so the auto margin opened a ~134px gap between the
paragraph and the image. Sit the image directly under the copy and let the
column end early instead — an uneven bottom beats a hole.
This block is the only --long-reverse left on the page (Systems and Finishes
became a grid), so the override is effectively block-scoped. */
.flex-media--long-reverse .flex-media-long-col > .flex-media-long-figure:last-child {
margin-top: 1.25rem; /* was auto */
padding-top: 0; /* the padding only existed to open space above the pinned figure */
}
/* padding-top is gone, so the accent no longer needs offsetting by it */
.flex-media--long-reverse .flex-media-long-col > .flex-media-long-figure:last-child::after {
top: -8px;
}
/* ALIGNMENT FIX — the bottom-anchored figure in a --long-reverse column carries
`padding-top: 1.25rem` (it is how the template opens space above a figure that
margin-top:auto has pushed to the bottom). The accent is positioned against the
FIGURE BOX, whose top therefore sits 20px above the image's top edge — so on
that one block the triangle floated ~20px high. Offset it back by the padding.
Only the :last-child (bottom-anchored) case is affected; :first-child uses
margin-bottom, which does not move the box's top edge. */
.flex-media-long-col > .flex-media-long-figure:last-child::after {
top: calc(1.25rem - 8px);
}
/* Image renders RIGHT -> top-right corner; right angle at top-right. */
.flex-media:not(.flex-media--reverse):not(.flex-media--long-reverse) .flex-media-figure::after,
.flex-media--long .flex-media-long-figure::after {
right: -8px;
clip-path: polygon(100% 0, 100% 100%, 0 0);
}
/* Image renders LEFT -> top-left corner; mirrored, right angle at top-left. */
.flex-media--reverse .flex-media-figure::after,
.flex-media--long-reverse .flex-media-long-figure::after {
left: -8px;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* The figure's own drop shadow would otherwise sit over the accent. */
.flex-media-figure img,
.flex-media-long-figure img { position: relative; z-index: 1; }
/* --- Inline links in the hero -------------------------------------------
The template gives .section-dark its own on-dark link ink, but .hero is not
.section-dark and was never covered — its alt-hero lede shipped with no links
in it, so nothing surfaced the gap. This pour puts a tel: link in the lede,
and it inherited --color-link (#326A7A), the LIGHT-surface ink: 2.44:1 on the
hero's charcoal base. The sand secondary is this palette's on-dark accent and
reads 9.31:1 there. Buttons are excluded — they carry their own fills.
Worth promoting to _rely-template; left site-local for now. */
.hero a:not(.btn) { color: var(--color-secondary); }
.hero a:not(.btn):hover { color: var(--color-fg-on-dark); }
/* --- Hero split: wider copy column, tighter lede ------------------------
Template ships 1.05fr / 0.95fr (a near-even split). Give the copy the room
and let the form card shrink. FLOOR ON THE FORM COLUMN: the Turnstile widget
is a fixed 300px iframe, so the card's inner width must stay above it or the
challenge overflows the card — hence minmax(), not a bare fr. */
@media (min-width: 900px) {
.hero-split-grid { grid-template-columns: 1.5fr minmax(380px, 1fr); }
}
.hero--split .hero-lede {
margin-bottom: 0.75rem; /* template 2rem -> 1rem -> 0.75rem */
line-height: 1.45; /* was body's 1.6 */
}
/* h1 sits tighter to the copy + form beneath it */
.hero--split .hero-split-title {
margin-bottom: clamp(1rem, 2vw, 1.5rem); /* was clamp(1.5rem, 3vw, 2.25rem) */
}
/* --- Headings that were pinned to --font-sans ---------------------------
rely sets `.hero h1` and the service-card h3 in var(--font-sans). That was
invisible in the parent skin because --font-sans and --font-display were BOTH
Raleway, so the two tokens were interchangeable. The moment display != sans
it surfaces: the h1 — the largest type on the page — renders in the body face
while every other heading is the display face. Repointed to --font-display.
Deliberately NOT changed: h4, .brand-text .tag and .quote-form-title, which
are UI labels rather than document headings and read better in the sans. */
.hero h1,
.service-card .service-card-cta { font-family: var(--font-display); }
/* --- Optical sizing for Fraunces ----------------------------------------
Its opsz axis runs 9–144: small text gets the sturdier text cut, the hero h1
and watermark get the finer display cut. `auto` is the browser default, but
it is stated here because the whole point of choosing this face is that the
axis is doing work. */
h1, h2, h3, .hero-watermark, .subhead, .spotlight-side-title,
.service-card-header, .quote-form-title { font-optical-sizing: auto; }
/* --- process-grid: fit any step count ------------------------------------
The template hard-codes `repeat(4, 1fr)` at desktop, so the 5th step orphaned
onto a row of its own. auto-fit makes the track count follow the step count,
which is what the block vocabulary already claims this grid does. */
@media (min-width: 960px) {
.process-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* --- CTA row at the foot of a long column --------------------------------
The --long variants ship no CTA furniture, so the button row added to the
pricing block is pinned to the bottom of its column. Side effect worth
having: it consumes that column's leftover slack, so the two columns finish
level instead of leaving a ragged bottom. padding-top guarantees breathing
room when there is no slack to absorb. */
.flex-media--long .flex-media-long-col > .flex-media-cta-row:last-child {
margin-top: auto;
padding-top: 2rem;
}
/* --- .section-alt: the palette's alt band --------------------------------
Reusable light-band utility (rely has no equivalent). Uses the token rather
than the literal #FBF3DA so it re-resolves if the skin ever changes; in
sandstone --color-bg-alt IS #FBF3DA. Currently on Common Stucco Problems.
The palette already tunes --color-link and --color-text-muted to clear 4.5
on bg-alt as well as bg, so body copy and links need no adjustment. */
.section-alt { background: var(--color-bg-alt); }
/* --- Service-areas heading matches the h2 -------------------------------
.spotlight-side-title shipped LARGER than h2 (up to 2.75rem vs 1.9rem).
Pinned to the exact h2 ramp so the two column headings read as one level. */
.spotlight-side-title { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.9rem); }
/* --- Header phone ------------------------------------------------------- */
.nav-cta { font-size: 1.15rem; }
/* --- .snow-list--single -------------------------------------------------
The shared block vocabulary documents this modifier ("force a 1-column
list"), but rely never implemented it — so the class was inert here while
`.flex-media .snow-list` and `.spotlight-areas` both went 2-up at their
breakpoints. Implemented so the documented modifier actually does its job;
used only where the items are full sentences or long comma runs. */
.flex-media .snow-list.snow-list--single,
.snow-list.snow-list--single,
.spotlight-areas.snow-list--single { grid-template-columns: 1fr; }
/* ---------- Print ---------- */
@media print {
.site-header, .site-footer, .mini-cta, .nav-cta { display: none; }
body { font-size: 12pt; color: #000; background: #fff; }
}