/* =====================================================================
THEME v2 — shared upgrade layer
---------------------------------------------------------------------
Loaded AFTER site.css. Every colour here comes from tokens.css, so this
one file re-skins itself per site: warm retail on Consignment, cool
industrial on Warehousing, navy/brass and sage/terracotta on the two
real estate sites.
Additive by design — no existing class is redefined out from under
site.css, so nothing in the FSWD renderer breaks.
Also carries the components the brief asks for that site.css has no
vocabulary for:
.inv-* inventory card + sold badge (raw.pdf p4, p6)
.flow Next Move Program service flow (Realtor PDF 5)
.aud-* audience cards (raw.pdf p15, Realtor PDF 5)
.tstrip trust strip
===================================================================== */
/* ---------- fluid type: no breakpoint jumps ------------------------- */
:root {
--fs-xs: clamp(.75rem, .72rem + .15vw, .8125rem);
--fs-sm: clamp(.875rem, .85rem + .15vw, .9375rem);
--fs-base: clamp(1rem, .97rem + .18vw, 1.0625rem);
--fs-lg: clamp(1.125rem,1.07rem + .3vw, 1.25rem);
--fs-xl: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
--fs-2xl: clamp(1.5rem, 1.32rem + .9vw, 2rem);
--fs-3xl: clamp(1.875rem,1.55rem + 1.6vw, 2.75rem);
--fs-4xl: clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
--ease-out: cubic-bezier(.16,1,.3,1);
--dur-fast: .16s;
--dur: .28s;
--shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
--shadow-xl: 0 24px 56px rgba(0,0,0,.13), 0 8px 16px rgba(0,0,0,.05);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
body {
font-size: var(--fs-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.022em; }
h1 { letter-spacing: -.032em; }
h2 { letter-spacing: -.026em; }
p { text-wrap: pretty; }
p, li { max-width: 72ch; }
::selection { background: var(--green-050); color: var(--ink); }
:focus-visible {
outline: 3px solid var(--green-text);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ---------- eyebrow ------------------------------------------------- */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--s1);
font-size: var(--fs-xs); font-weight: 650;
letter-spacing: .12em; text-transform: uppercase;
color: var(--green-text);
margin-bottom: var(--s2);
}
.eyebrow::before {
content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
background: var(--ribbon);
}
.eyebrow--on-dark { color: var(--on-dark-2); }
.lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); }
/* ---------- buttons: lift + shadow ---------------------------------- */
.btn, .button, a.btn {
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background-color var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
/* ---------- cards --------------------------------------------------- */
.card {
transition: transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
/* ---------- trust strip --------------------------------------------- */
.tstrip {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--s2) var(--s5);
padding: var(--s3) 0;
border-block: 1px solid var(--line);
}
.tstrip__item {
display: inline-flex; align-items: center; gap: var(--s1);
font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.tstrip__item svg, .tstrip__item i { color: var(--green-text); flex: none; }
/* =====================================================================
INVENTORY CARD — Consignment
raw.pdf p4/p6: photo, name, price, dimensions, condition, brand,
available/sold, category, item number. Sold badge required.
===================================================================== */
.inv-grid {
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.inv-card {
position: relative; display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.inv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.inv-card__media {
position: relative; aspect-ratio: 4 / 3;
background: var(--surface-3); overflow: hidden;
}
.inv-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s var(--ease-out);
}
.inv-card:hover .inv-card__media img { transform: scale(1.04); }
.inv-card__body { padding: var(--s2) var(--s2) var(--s3); display: grid; gap: 6px; }
.inv-card__name { font-size: var(--fs-base); font-weight: 650; color: var(--ink); margin: 0; }
.inv-card__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.inv-card__price {
font-family: var(--font-head);
font-size: var(--fs-lg); font-weight: 700; color: var(--green-text);
}
/* status badges — sold must be unmistakable */
.inv-badge {
position: absolute; top: 10px; left: 10px; z-index: 2;
padding: .3em .7em;
font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
border-radius: 999px;
background: var(--surface); color: var(--ink-2);
box-shadow: var(--shadow-sm);
}
.inv-badge--new { background: var(--green-text); color: #fff; }
.inv-badge--sold { background: var(--ink); color: #fff; }
.inv-card--sold .inv-card__media img { filter: grayscale(1) opacity(.55); }
.inv-card--sold .inv-card__price { color: var(--ink-3); text-decoration: line-through; }
/* =====================================================================
SERVICE FLOW — "The Next Move Program"
Realtor PDF 5: Real Estate -> Moving -> Storage -> Consignment/Delivery
Also used by raw.pdf p20's designer workflow.
===================================================================== */
.flow {
display: flex; flex-wrap: wrap; align-items: stretch;
gap: var(--s2);
list-style: none; margin: 0; padding: 0;
counter-reset: flow;
}
.flow__step {
counter-increment: flow;
flex: 1 1 12rem; min-width: 11rem;
position: relative;
padding: var(--s3) var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
}
.flow__step::before {
content: counter(flow);
display: grid; place-items: center;
width: 2.1rem; aspect-ratio: 1; margin: 0 auto var(--s1);
border-radius: 999px;
background: var(--green-050); color: var(--green-text);
font-weight: 700; font-size: var(--fs-sm);
}
/* connector chevron — hidden when the row wraps and on mobile */
.flow__step:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: calc(var(--s2) * -1);
width: var(--s2); height: 2px; background: var(--line);
}
@media (max-width: 720px) { .flow__step:not(:last-child)::after { display: none; } }
.flow__title { font-size: var(--fs-base); font-weight: 650; color: var(--ink); }
.flow__note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
/* =====================================================================
AUDIENCE CARDS — "Who We Help" / "Choose Your Situation"
raw.pdf p15 (designers, builders, Realtors, businesses, homeowners)
Realtor PDF 5 (four situation cards)
===================================================================== */
.aud-grid {
display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.aud-card {
display: flex; flex-direction: column; gap: var(--s1);
padding: var(--s3);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
transition: transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.aud-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--green);
}
.aud-card__icon {
display: grid; place-items: center;
width: 2.75rem; aspect-ratio: 1; margin-bottom: var(--s1);
border-radius: var(--radius-sm);
background: var(--green-050); color: var(--green-text);
font-size: 1.25rem;
}
.aud-card__title { font-size: var(--fs-lg); font-weight: 650; color: var(--ink); margin: 0; }
.aud-card__body { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.aud-card__cta {
margin-top: auto; padding-top: var(--s2);
font-size: var(--fs-sm); font-weight: 650; color: var(--green-text);
}
.aud-card__cta::after { content: " \2192"; transition: transform var(--dur) var(--ease-out); display: inline-block; }
.aud-card:hover .aud-card__cta::after { transform: translateX(3px); }
/* =====================================================================
MEDIA
===================================================================== */
.media-frame {
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-md); background: var(--surface-3);
}
.media-frame img, .media-frame video { display: block; width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }
/* =====================================================================
DARK / MESH BANDS
===================================================================== */
.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark p { color: var(--on-dark-2); }
.band-mesh { position: relative; isolation: isolate; background: var(--dark); color: var(--on-dark); }
.band-mesh::before {
content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
background:
radial-gradient(60rem 30rem at 8% 0%, var(--green-050), transparent 60%),
radial-gradient(50rem 26rem at 92% 100%, var(--amber-050), transparent 60%);
}
.band-mesh h2 { color: var(--on-dark); }
.band-mesh p { color: var(--on-dark-2); }
/* =====================================================================
ACCESSIBILITY
===================================================================== */
.skip-link {
position: absolute; left: var(--s2); top: -100%; z-index: 999;
padding: var(--s2) var(--s3);
background: var(--ink); color: #fff;
border-radius: var(--radius-sm); font-weight: 650;
transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--s2); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* =====================================================================
PRINT
===================================================================== */
@media print {
.btn, .btn-row, .tstrip, .skip-link { display: none !important; }
body { color: #000; font-size: 11pt; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* =====================================================================
BRAND LOCKUP
brand.logo_mark is TODO_ on every new site until real marks exist.
A deliberate monogram reads as a design decision; a broken ![]()
does not.
Swap automatically once brand.logo_mark is filled in — no CSS change needed.
===================================================================== */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__monogram {
display: grid; place-items: center;
width: 38px; height: 38px; flex: none;
border-radius: 10px;
background: var(--green);
color: #fff;
font-family: var(--font-head);
font-size: .95rem; font-weight: 700; letter-spacing: .02em;
box-shadow: var(--shadow-sm);
}
.brand__name {
font-family: var(--font-head);
font-weight: 650;
font-size: 1.02rem;
line-height: 1.15;
letter-spacing: -.015em;
color: var(--ink);
max-width: 15ch;
}
.brand[style*="#fff"] .brand__name { color: #fff; }
@media (max-width: 900px) { .brand__name { max-width: 11ch; font-size: .95rem; } }
/* =====================================================================
EQUAL HOUSING OPPORTUNITY / REALTOR COMPLIANCE BLOCK
Real estate sites only. Must be legible, not buried — this is a
regulatory notice, so it does not get 10px grey treatment.
The EHO mark is a regulated logo: never recolour, distort or crop it.
===================================================================== */
.compliance {
display: flex; align-items: flex-start; gap: var(--s3);
padding: var(--s3) 0;
margin-top: var(--s3);
border-top: 1px solid rgba(255,255,255,.12);
}
.compliance__eho {
flex: none; width: 46px; height: auto;
color: var(--on-dark);
opacity: .92;
}
.compliance__text p {
font-size: .78rem;
line-height: 1.6;
color: var(--on-dark-2);
margin: 0 0 .5em;
max-width: 92ch;
}
.compliance__text p:last-child { margin-bottom: 0; }
.compliance__text strong { color: var(--on-dark); font-weight: 650; }
@media (max-width: 640px) {
.compliance { flex-direction: column; gap: var(--s2); }
}
/* checkbox rows in the Plan My Move form */
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s3); }
fieldset.field legend {
font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
padding: 0; margin-bottom: var(--s1);
}
.check {
display: flex; align-items: center; gap: .55rem;
font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2);
padding: .3rem 0; cursor: pointer;
}
.check input { width: auto; margin: 0; }
/* =====================================================================
SESSION 6 — homesforsalestgeorgeutah.com only.
Appended, never edited into the shared rules above (PARALLEL-WORK.md:
"appending a site-specific rule is fine; editing shared rules is not").
===================================================================== */
/* Territory note in the footer. The metro core is the whole service area;
everything outside it links to the regional sibling instead. */
.footer__area {
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid rgba(255,255,255,.10);
font-size: var(--fs-xs);
color: var(--on-dark-2);
max-width: 78ch;
}
.footer__area strong { color: var(--on-dark); font-weight: 600; }
/* UNUSED. Written for a second implementation of the move-offer block that was
withdrawn in favour of inc/offer.php (which styles its hold notice inline).
Kept only so a future approved offer block has somewhere to land; delete if
inc/offer.php is still styling itself when the offer is signed off. */
.offer-draft {
border: 2px dashed var(--amber);
border-radius: var(--radius);
background: var(--amber-050);
padding: var(--s4);
margin-top: var(--s4);
}
.offer-draft__flag {
display: inline-block;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #6b4410;
background: rgba(200,134,42,.28);
border-radius: var(--radius-sm);
padding: .3rem .6rem;
margin: 0 0 var(--s3);
}
.offer-draft__headline {
font-family: var(--font-head);
font-size: var(--fs-lg);
font-weight: 650;
color: var(--ink);
margin: 0 0 var(--s2);
max-width: 34ch;
}
.offer-draft__body {
font-size: var(--fs-sm);
color: var(--ink-2);
margin: 0 0 var(--s2);
max-width: 68ch;
}
.offer-draft__todo {
margin: 0 0 var(--s2);
padding-left: 1.15rem;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.offer-draft__todo li { margin-bottom: .35rem; }
/* Community lists on /areas/ and the relocation pages. */
.area-group { margin-bottom: var(--s5); }
.area-group:last-child { margin-bottom: 0; }
.area-group__head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
padding-bottom: var(--s2);
border-bottom: 1px solid var(--line);
}
.area-group__head h3 { margin: 0; font-size: var(--fs-lg); }
.area-group__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.area-list {
list-style: none; margin: var(--s3) 0 0; padding: 0;
display: grid; gap: var(--s2);
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.area-list li {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
padding: var(--s2) var(--s3);
}
.area-list b { display: block; font-size: var(--fs-base); font-weight: 650; color: var(--ink); }
.area-list span { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
/* ---------------------------------------------------------------------
Checkbox rows — "What else do you need?" on Plan My Move step 2.
APPENDED, not edited into the shared .check block further up this file,
per the header of this section.
Two things were broken, both because the checkboxes sit inside a .field
wrapper that site.css writes for TEXT inputs:
1. `.field input` (site.css) gives every input min-height:48px, 12px/14px
padding, a 1.5px border and a white fill. The shared `.check input`
rule resets only width and margin — equal specificity, so it wins on
those two properties and nothing else. The checkbox was therefore
being drawn as a ~48px tall bordered box instead of a checkbox.
2. `.field label` (0,0,1,1) outranks `.check` (0,0,1,0), so the row never
received display:flex at all: it rendered as a 600-weight block label,
and the gap and vertical centring in the shared rule were dead code.
Every selector below is deliberately specific enough to beat
`.field label` and `.field input`, and the control is redrawn from
scratch with appearance:none rather than fought with property by
property. Colours are the navy/brass tokens, not browser blue.
--------------------------------------------------------------------- */
/* The row. A real 48px tap target, per the mobile-first rule in the
runbook — the old .3rem padding gave about 35px. */
.field label.check {
display: flex;
align-items: center;
gap: .7rem;
min-height: 48px;
margin-bottom: 0;
padding: .7rem .85rem;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-2);
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* Sibling spacing rather than a grid on the fieldset: