/* Seller Connect USA — visual system, re-skinned in the Porcelain design language
(see SPEC.md and docs from the presence-template porcelain reference).
Two faces, both revivals with a real American pedigree:
- Libre Franklin (variable, wght 100-900) for body/UI — an open revival of
Franklin Gothic, the workhorse of American newspaper classifieds and civic
signage. Plain-spoken and local, kept for every functional surface: nav,
buttons, labels, form fields, footer.
- Libre Caslon Display/Text for headings and the single hero flourish word —
a revival of the Caslon that set the Declaration of Independence and early
American newspapers ("when in doubt, use Caslon"). Pairs a founding-era
printing face against Franklin's mid-century civic-signage face: two
distinct American type traditions, deliberately not a single family doing
both jobs. Not on SPEC §9's banned list (Cormorant Garamond, Playfair,
Fraunces, Lora, Crimson, etc. are). Display (single weight, cut for large
sizes) carries h1/h2; Text (a cut meant to hold up smaller) carries h3 and
the italic accent word so nothing renders at a size the Display cut wasn't
drawn for.
All three loaded as direct @font-face src (not a googleapis.com @import) so
the only extra network hop is straight to the woff2 file the preconnect in
already warms up — same pattern as the original Libre Franklin load. */
@font-face {
font-family: "Libre Franklin";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librefranklin/v20/jizDREVItHgc8qDIbSTKq4XkRiUf2zc.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Libre Franklin";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librefranklin/v20/jizDREVItHgc8qDIbSTKq4XkRiUR2zcLig.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Libre Caslon Display — h1/h2 only; a display-only cut, drawn for large sizes. */
@font-face {
font-family: "Libre Caslon Display";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslondisplay/v18/TuGOUUFxWphYQ6YI6q9Xp61FQzxDRKmzr1lWfxk.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Libre Caslon Display";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslondisplay/v18/TuGOUUFxWphYQ6YI6q9Xp61FQzxDRKmzr1lYfxldCA.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Libre Caslon Text — h3, and the hero's single italic emphasis word. */
@font-face {
font-family: "Libre Caslon Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslontext/v5/DdT878IGsGw1aF1JU10PUbTvNNaDMfq41-I.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Libre Caslon Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslontext/v5/DdT878IGsGw1aF1JU10PUbTvNNaDMfq21-JbHg.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Libre Caslon Text";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslontext/v5/DdT678IGsGw1aF1JU10PUbTvNNaDMfq95-BDGg.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Libre Caslon Text";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://fonts.gstatic.com/s/librecaslontext/v5/DdT678IGsGw1aF1JU10PUbTvNNaDMfq95-5DGiO1.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- tokens ---------- */
:root {
/* neutrals: chroma 0, equal R=G=B, per SPEC §9 (no cream/sand/parchment) */
--bg: #FFFFFF;
--bg-alt: #F4F4F4;
--ink: #1E1E1E;
--ink-soft: #54504C;
--line: #D8D6D3;
--border: #918A83;
/* the one accent: a muted clay/terracotta, hsl(18, 55%, 37%) — brick and
roof-tile warmth, grounded, nowhere near real-estate blue or indigo/violet.
Kept unchanged in the Porcelain re-skin: it already measures ~6.5:1 against
white (safe for button/focus use), it's already the "muted clay" family
the brief asks for, and Porcelain's second hue (blush, alongside its sage)
would break SPEC §9's one-accent-colour rule — tonal variation (tint/dark
steps below) does that job instead of a second hue. */
--accent: #924A2A;
--accent-dark: #69331C;
--accent-tint: #F8F0ED;
/* status (functional feedback, not brand decoration — kept muted to match) */
--success: #335B41;
--error: #7E2E25;
--font-body: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Display cut — h1/h2 only, drawn for large sizes. */
--font-heading: "Libre Caslon Display", Georgia, "Times New Roman", serif;
/* Text cut — h3 and the hero's italic accent word, holds up smaller. */
--font-heading-text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
--gutter: clamp(16px, 5vw, 40px);
/* Porcelain language: zero radius throughout, no shadows anywhere (already true). */
--radius: 0;
--radius-sm: 0;
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
margin: 0;
min-width: 320px;
overflow-x: hidden;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
input, textarea, button { font-family: inherit; }
/* Headings: serif display (Caslon) at heading weight/size, sans stays for
everything functional (nav, buttons, labels, body copy) — see the top-of-file
comment for the pairing rationale. Neither Caslon cut ships an 800/700 weight
file, so asking for one here would synthetically (badly) bold a serif; both
are set at their real 400. Oldstyle serifs also want neutral-to-open tracking,
not the tight grotesk letter-spacing the previous all-sans system used. */
h1, h2, h3 { line-height: 1.2; letter-spacing: 0; color: var(--ink); }
h1, h2 { font-family: var(--font-heading); font-weight: 400; }
h3 { font-family: var(--font-heading-text); font-weight: 400; }
h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.15; }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; }
p { color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-dark); }
/* the hero's single italic flourish word (SPEC §9 imagery/type language) */
em {
font-family: var(--font-heading-text);
font-style: italic;
font-weight: 400;
color: var(--accent);
}
/* small tracked uppercase section label, sans on purpose — a technical label
reads crisper in the grotesk than in the display serif it introduces */
.eyebrow {
display: block;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
color: var(--accent-dark);
margin-bottom: 0.85rem;
}
/* ---------- focus (never outline:none) ---------- */
:focus { outline: none; }
:focus-visible {
outline: 3px solid var(--accent-dark);
outline-offset: 3px;
border-radius: 0;
}
/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------- skip link ---------- */
.skip {
position: absolute;
left: 1rem;
top: -3rem;
z-index: 100;
background: var(--ink);
color: #FFFFFF;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
transition: top 0.15s ease;
}
.skip:focus {
top: 1rem;
}
/* ---------- layout primitives ---------- */
.wrap {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap.narrow {
max-width: 70ch;
}
.block {
padding-block: clamp(3rem, 2.2rem + 4vw, 6.5rem);
}
.block .wrap > h2 {
margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
#how, #who, #form { background: var(--bg-alt); }
#final-cta { background: var(--accent-tint); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
padding: 0.85rem 2rem;
background: var(--accent);
color: #FFFFFF;
font-weight: 700;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 2px solid var(--accent);
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--border); border-color: var(--border); cursor: not-allowed; }
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--ink); color: var(--ink); }
.btn-sm {
min-height: 38px;
padding: 0.5rem 1.1rem;
font-size: 0.875rem;
}
/* ---------- header ---------- */
.site-header {
border-bottom: 1px solid var(--line);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
padding-block: 1.1rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--ink);
text-decoration: none;
}
.brand-mark {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
background: url("/favicon.svg") center / contain no-repeat;
}
.brand-name {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.01em;
}
.header-nav {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.25rem;
font-size: 0.8125rem;
font-weight: 600;
}
.header-nav a {
color: var(--ink-soft);
text-decoration: none;
padding-block: 0.25rem;
}
.header-nav a:hover { color: var(--accent); text-decoration: underline; }
.header-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
@media (max-width: 620px) {
/* Four legal links stacked above the hero pushed the actual message off a phone
screen. They are footer-tier navigation and appear in the footer of every page,
so nothing becomes unreachable by dropping them from the small-screen header. */
.header-nav { display: none; }
}
/* ---------- cookie bar ---------- */
.cookie-bar[hidden] { display: none; }
.cookie-bar {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 90;
max-width: 640px;
margin-inline: auto;
background: var(--ink);
color: #FFFFFF;
border-radius: var(--radius);
padding: 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.cookie-bar p {
color: #FFFFFF;
flex: 1 1 260px;
font-size: 0.9rem;
line-height: 1.5;
}
.cookie-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.cookie-bar .btn-ghost {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.55);
}
.cookie-bar .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; }
/* ---------- footer ---------- */
/* Porcelain's own chrome pairs a light, blurred header with a dark-ink footer
band — ported here as-is (colour family re-tinted, structure identical).
Contrast is the same pair of luminances as ink-on-bg-alt above, just
swapped fore/back — measured ~15.2:1, unchanged by the swap. */
.site-footer {
background: var(--ink);
border-top: none;
padding-block: 2.75rem;
}
.footer-legal {
color: #F4F4F4;
font-size: 0.9375rem;
line-height: 1.65;
max-width: 75ch;
}
.footer-legal a { color: inherit; text-decoration: underline; }
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 1.5rem;
font-size: 0.875rem;
font-weight: 600;
}
.footer-links a {
color: #F4F4F4;
text-decoration: underline;
text-decoration-color: rgba(244, 244, 244, 0.5);
}
.footer-links a:hover { color: var(--accent-tint); text-decoration-color: var(--accent-tint); }
.footer-by {
margin-top: 1.5rem;
color: #BDB6AC;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ---------- hero / final-cta ---------- */
#final-cta .wrap {
max-width: 46rem;
}
#hero h1, #final-cta h2 {
margin-bottom: 1.25rem;
}
#hero p, #final-cta p {
color: var(--ink-soft);
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
max-width: 52ch;
margin-bottom: 2rem;
}
/* Porcelain's airy photo-led hero: copy beside a main image with a smaller
offset secondary bleeding off its corner. Text stays first in source order
(and stays first visually on mobile, unlike the reference) so the headline
and CTA are what a phone visitor sees before a decorative photo — a
conversion-page call, not an oversight. */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 760px) {
.hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}
.hero-media {
position: relative;
min-height: 220px;
}
.hero-media img {
object-fit: cover;
display: block;
background: var(--bg-alt);
}
.hero-img-main { width: 78%; aspect-ratio: 4 / 5; position: relative; z-index: 1; }
.hero-img-second {
width: 44%;
aspect-ratio: 1 / 1;
position: absolute;
right: 0;
bottom: -30px;
z-index: 2;
border: 8px solid var(--bg);
}
@media (max-width: 759px) {
.hero-media { min-height: 260px; margin-bottom: 0.5rem; }
}
/* Restrained entrance motion: the hero is always in the initial viewport, so
this is a plain CSS keyframe on load, unconditional — no scroll-observer,
no JS class-gate (this project has no motion-detection script to hook into,
and none is added here). Because `to` is each element's normal resting
style, a renderer that never executes the animation still shows the final,
fully-visible state — the "already-visible default" the brief asks for.
prefers-reduced-motion is handled by the existing global rule below. */
@keyframes rise-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.hero-copy .eyebrow { animation: rise-in 550ms ease-out both; }
.hero-copy h1 { animation: rise-in 550ms ease-out 70ms both; }
.hero-copy .hero-sub { animation: rise-in 550ms ease-out 140ms both; }
.hero-copy .btn { animation: rise-in 550ms ease-out 210ms both; }
.hero-img-main { animation: rise-in 600ms ease-out 90ms both; }
.hero-img-second { animation: rise-in 600ms ease-out 220ms both; }
.final-cta-inner {
text-align: center;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding-block: 3rem;
}
/* ---------- how / steps ---------- */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
counter-reset: step;
}
.step {
counter-increment: step;
position: relative;
padding-top: 3.25rem;
}
.step::before {
content: counter(step);
position: absolute;
top: 0;
left: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #FFFFFF;
font-weight: 800;
font-size: 1.1rem;
border-radius: var(--radius-sm);
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); }
@media (min-width: 760px) {
.steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
/* ---------- situations (Porcelain's scroll-snap treatment-card row) ---------- */
.situations-scroll { position: relative; }
.situations {
display: flex;
gap: 1px;
background: var(--line);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
counter-reset: situation;
padding-bottom: 4px;
}
.situation {
counter-increment: situation;
scroll-snap-align: start;
flex: 0 0 clamp(230px, 32vw, 300px);
background: var(--bg);
padding: 1.85rem 1.6rem;
}
.situation::before {
content: counter(situation, decimal-leading-zero);
display: block;
font-family: var(--font-heading-text);
font-style: italic;
font-size: 1.3rem;
color: var(--accent);
margin-bottom: 0.6rem;
}
.situation h3 { margin-bottom: 0.4rem; }
.situation p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.4rem; }
.scroll-hint {
text-align: right;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: 0.9rem;
}
@media (max-width: 759px) {
.scroll-hint { display: none; }
}
/* ---------- who (Porcelain's image + text band) ---------- */
.who-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 760px) {
.who-grid { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }
}
.who-media img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.who-copy h2 { margin-bottom: 1rem; max-width: 16ch; }
#who p { color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.7; }
/* ---------- faq ---------- */
.faq {
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
padding-block: 1.5rem;
}
.faq-item dt,
.faq-item summary {
font-weight: 700;
font-size: 1.05rem;
color: var(--ink);
cursor: default;
list-style: none;
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
padding-block: 0.25rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-weight: 400;
font-size: 1.4rem;
line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item dd,
.faq-item p {
margin: 0;
margin-top: 0.6rem;
color: var(--ink-soft);
}
/* ---------- form: shared .scu-form vocabulary ---------- */
/* .scu-form is the shared hook for every form on the site: #lead-form on the
home page, and #dns-optout-form / #consent-optout-form on the two legal
pages (src/legal/do-not-sell.js, src/legal/consent.js — not this module,
but they carry class="scu-form" so this vocabulary reaches them too). A
defined surface, not a slab: same hairline-border-on-ground language as
.site-header/.faq. The legal-page forms sit directly on the page's plain
white ground with no wrapping section, so the base panel here is a pale
--bg-alt fill; #lead-form overrides to the inverse pairing below, because
it sits inside #form's own grey section instead and needs to invert to
stay legible there. Every direct child — a home .field/.field-row, or a
legal-page's plain — gets its spacing from one `gap`, so the rhythm
holds regardless of the wrapper markup. */
.scu-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
background: var(--bg-alt);
border: 1px solid var(--border);
padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}
#lead-form { background: var(--bg); }
.scu-form label {
display: block;
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.45rem;
color: var(--ink);
}
/* The legal pages' fields are plain
—
label is already block, so the leftover
just adds a blank line. */
.scu-form label + br { display: none; }
/* A considered fill against the ground, hairline borders that match the
rest of the page, comfortable height, generous padding — not a thin
default-looking line. 16px font-size (not 0.85rem/13.6px) so mobile
Safari never zooms on focus; 50px min-height keeps the touch target
comfortably over the 44px floor. */
.scu-form input:not([type="checkbox"]):not([type="hidden"]),
.scu-form select,
.scu-form textarea {
display: block;
width: 100%;
padding: 0.9rem 1.1rem;
font-size: 16px;
font-family: inherit;
color: var(--ink);
background: var(--bg);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
min-height: 50px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
#lead-form input:not([type="checkbox"]):not([type="hidden"]),
#lead-form select,
#lead-form textarea { background: var(--bg-alt); }
.scu-form textarea { min-height: 6.5rem; resize: vertical; }
/* Custom chevron replaces the OS default so the select matches the text
inputs; appearance:none only changes paint, not behaviour — still fully
keyboard-operable (Tab, Space/Enter to open, arrow keys, type-ahead). */
.scu-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5L7 9.5L11.5 5' fill='none' stroke='%2354504C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 14px;
cursor: pointer;
}
.scu-form input::placeholder,
.scu-form textarea::placeholder { color: var(--ink-soft); opacity: 0.75; }
.scu-form input:hover:not([disabled]),
.scu-form select:hover:not([disabled]),
.scu-form textarea:hover:not([disabled]) { border-color: var(--ink-soft); }
/* honeypot — off-screen per SPEC §10, never display:none */
.hp-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------- form: home page only ---------- */
/* #form's own block padding, tightened: the generic .block clamp (up to
6.5rem) is tuned for airier sections; the single conversion point needs
the submit button reachable sooner, not maximum whitespace. */
#form.block { padding-block: clamp(2.5rem, 1.9rem + 2.4vw, 4.5rem); }
#form .wrap { max-width: 46rem; }
#form h2 { margin-bottom: 0.6rem; }
#form > .wrap > p:not(.form-hint) { color: var(--ink-soft); margin-bottom: 1.25rem; }
#form > .wrap > p.form-hint { color: var(--ink-soft); font-size: 0.875rem; margin-bottom: 1.5rem; }
/* Name + phone pair into two columns above the breakpoint — short fields
don't need the full measure. Address (autocomplete) and the notes
textarea (prose) stay full width always, per the design brief. Only
#lead-form's markup ever contains a .field-row, so this rule is inert on
the shorter legal-page forms rather than forcing pairing onto them. */
.field-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem 1.25rem;
}
@media (min-width: 760px) {
.field-row { grid-template-columns: 1fr 1fr; }
}
/* consent — a legal record and a deliberate part of the form, not fine
print and not a warning box: the same grey well the inputs use, framed
by the brand accent (never --error red) on the leading edge. Only the
home page has a consent checkbox — the legal opt-out forms don't. */
#form .consent-field {
display: flex;
align-items: flex-start;
gap: 0.85rem;
background: var(--bg-alt);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-sm);
padding: 1.1rem 1.25rem;
cursor: pointer;
}
#form :is(label[for="consent"], label:has(#consent)) {
flex: 1 1 auto;
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink);
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
#form input[type="checkbox"] {
width: 26px;
height: 26px;
min-width: 26px;
margin: 0.15rem 0 0;
flex-shrink: 0;
accent-color: var(--accent-dark);
cursor: pointer;
}
/* Full width + centered on mobile: the panel's own padding narrows the
button's track enough that the flex-start/content-width button used
pre-redesign would wrap its label to two ragged-left lines at 375px.
Full width also reads as a stronger primary CTA on a narrow screen. Reverts
to the original content-hugging, left-aligned button once the panel is
wide enough (same 760px breakpoint as .field-row) that it never wraps. */
#lead-submit { width: 100%; text-align: center; }
@media (min-width: 760px) {
#lead-submit { width: auto; align-self: flex-start; }
}
#form-status { font-size: 0.9375rem; }
#form-status:empty { display: none; }
#form-status.is-error,
#form-status.is-success {
display: block;
padding: 1rem 1.1rem;
border-radius: var(--radius-sm);
font-weight: 600;
background: var(--bg-alt);
}
#form-status.is-error { color: var(--error); border-left: 4px solid var(--error); }
#form-status.is-success { color: var(--success); border-left: 4px solid var(--success); }
/* Success replaces the form itself (site.js); the no-JS return states
pre-render hidden alongside it. Both get the same panel treatment so the
payoff moment doesn't drop the definition the form just established. */
.form-notice,
.form-confirmation {
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
margin-bottom: 1.25rem;
}
.form-notice-error { border-left-color: var(--error); }
.form-notice p,
.form-confirmation p { color: var(--ink-soft); }
.form-confirmation strong { color: var(--ink); }
/* ---------- selection ---------- */
::selection { background: var(--accent-tint); color: var(--accent-dark); }