/*
* Palette set by scripts/set-palette.py.
*
* Coldwell Banker Envision's navy, and three colors off the buildings Mario sells in: the Eastern Columbia's turquoise glaze and gold trim on Broadway, and the terra cotta of the Historic Core.
*
* Coldwell Banker navy #0B2A57 structure: headings, buttons, footer, the ink
* Eastern Columbia turquoise #1E8C8F fills, rules, washes — never text
* Broadway terra cotta #B0522F the warm accent and the thing to press
* Deco gold #C79A3C the fourth stop in the rule — fills only
*
* Carried in one repeated four-part rule under every heading.
* Fully light, on a warm ground.
*
* Measured (WCAG):
* brand on ground 13.4:1
* white on brand 14.2:1
* coral on ground 4.8:1
* white on coral 5.1:1
* surf on ground 3.8:1 large type / fills only
* dune on ground 2.4:1 FILLS ONLY
* body on ground 9.6:1
*/
/* ---------------------------------------------------------------- tokens -- */
:root {
--mcb-brand: #0B2A57;
--mcb-brand-mid: #2D486F;
--mcb-brand-lt: #919FB3;
--mcb-brand-pale: #E7EAEE;
--mcb-accent: #0B2A57;
--mcb-accent-mid: #2D486F;
--mcb-accent-lt: #1E8C8F;
/*
* Trap 24, this palette's version of it. --mcb-accent-lt is the Eastern
* Columbia turquoise at full strength, which is right on the light washes
* it is used for (the creed's call line, the icons) and is NOT light — it
* is a mid color. Everywhere it sits on a PHOTOGRAPH it measured barely
* over the bar: the hero phone number 4.75:1 and the banner eyebrows
* 4.66:1 against a 4.5 requirement, one brighter frame from failing. So
* the photo contexts get the turquoise lifted 45% toward white, and the
* light-ground ones keep the real color.
*/
--mcb-accent-photo: #83C0C1;
--mcb-accent-metal: linear-gradient(135deg, #092247 0%, #145670 52%, #0B2A57 100%);
--mcb-surf: #1E8C8F;
--mcb-surf-dk: #176D70;
--mcb-surf-pale: #E4F1F2;
--mcb-coral: #B0522F;
--mcb-coral-br: #BD6E50;
--mcb-coral-dk: #974728;
--mcb-coral-pale: #F7EEEA;
--mcb-dune: #C79A3C;
--mcb-dune-dk: #95742D;
--mcb-dune-pale: #F8F3E8;
--mcb-sand: #E7D2AE;
--mcb-sand-dp: #D9BC8C;
--mcb-red: #B0522F;
--mcb-deep: #051327;
--mcb-deep-dk: #030C18;
--mcb-deep-lt: #071B39;
--mcb-stone: #5E6976;
--mcb-ink: #051327;
--mcb-body: #374252;
--mcb-muted: #5F6875;
--mcb-faint: #8E959E;
--mcb-white: #FFFFFF;
--mcb-shell: #FCF8F1;
--mcb-tint: #FCF8F1;
--mcb-tint-2: #F5EDE0;
--mcb-sky: #E7EAEE;
--mcb-line: #E4DED2;
--mcb-line-soft: #F1EBE1;
--mcb-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
--mcb-body-font: 'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
--mcb-wrap: 1280px;
--mcb-gutter: clamp(1.25rem, 4vw, 3rem);
--mcb-band: clamp(4rem, 8vw, 7rem);
--mcb-header-h: 128px;
--mcb-bar-max: 128px;
--mcb-bar-min: 76px;
--mcb-logo-max: 92px;
--mcb-logo-min: 56px;
--mcb-shrink: 0;
--mcb-ease: cubic-bezier(.22, .61, .36, 1);
--mcb-shadow: 0 1px 2px rgba(5, 19, 39, .05), 0 8px 24px -12px rgba(5, 19, 39, .16);
--mcb-shadow-lg: 0 2px 4px rgba(5, 19, 39, .06), 0 20px 48px -20px rgba(5, 19, 39, .24);
}
@media (max-width: 1040px) {
:root {
--mcb-header-h: 96px;
--mcb-bar-max: 96px;
--mcb-bar-min: 62px;
--mcb-logo-max: 68px;
--mcb-logo-min: 38px;
}
}
/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 6rem;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--mcb-shell);
color: var(--mcb-body);
font-family: var(--mcb-body-font);
font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
line-height: 1.72;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* clip, NOT hidden: `hidden` makes the body a scroll container and kills
every position: sticky below it (themes/CLAUDE.md trap 38). clip does
the same clipping without the scroll container. This is the ONLY
overflow guard on this site — see the note where the root rule used to
be, further down. */
overflow-x: clip;
}
body.mcb-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--mcb-deep-lt); text-decoration: none; transition: color .2s var(--mcb-ease); }
a:hover { color: var(--mcb-deep); }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--mcb-display);
font-weight: 400;
line-height: 1.16;
letter-spacing: -.018em;
color: var(--mcb-ink);
text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.03rem + .4vw, 1.3rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mcb-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--mcb-accent-lt); color: var(--mcb-ink); }
.mcb-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mcb-skip {
position: absolute; top: -100px; left: 1rem; z-index: 200;
padding: .75rem 1.25rem;
background: var(--mcb-deep); color: #fff; font-weight: 600;
transition: top .2s var(--mcb-ease);
}
.mcb-skip:focus { top: 1rem; color: #fff; }
/* --------------------------------------------------------------- layout -- */
.mcb-wrap {
width: 100%;
max-width: var(--mcb-wrap);
margin-inline: auto;
padding-inline: var(--mcb-gutter);
}
.mcb-wrap--narrow { max-width: 60rem; }
.mcb-section { position: relative; padding-block: var(--mcb-band); }
.mcb-section--tint { background: var(--mcb-tint); }
/* The two navy bands. Full-bleed color is the only thing on a light site that
gives the eye a place to rest, so there are exactly two per page and they are
always separated by white. */
.mcb-section--dark {
background: var(--mcb-deep);
color: rgba(255, 255, 255, .82);
}
.mcb-section--dark h1,
.mcb-section--dark h2,
.mcb-section--dark h3 { color: #fff; }
/* ------------------------------------------------------------- typography -- */
.mcb-eyebrow {
display: inline-block;
margin-bottom: .9rem;
font-family: var(--mcb-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-eyebrow--light { color: var(--mcb-accent-lt); }
/* On the hero specifically the eyebrow sits on a photograph rather than a flat
dark band, and the brand light blue disappears into the water. Near-white with
a slight shadow holds it without turning it into a second headline. */
.mcb-hero .mcb-eyebrow--light {
color: rgba(255, 255, 255, .95);
text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 1px 14px rgba(10, 12, 16, .5);
}
.mcb-hero__title { text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45); }
.mcb-rule {
display: block;
width: 56px; height: 3px;
margin: 1.1rem 0 1.4rem;
background: var(--mcb-accent-metal);
border-radius: 3px;
}
.mcb-head--center .mcb-rule,
.mcb-closer .mcb-rule,
.mcb-modal__head .mcb-rule { margin-inline: auto; }
.mcb-lede {
font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
line-height: 1.65;
color: var(--mcb-muted);
max-width: 56ch;
}
.mcb-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.mcb-head--center { margin-inline: auto; text-align: center; }
.mcb-head--center .mcb-lede { margin-inline: auto; }
.mcb-head--light .mcb-lede { color: rgba(255, 255, 255, .8); }
.mcb-head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
max-width: none;
}
@media (max-width: 720px) {
.mcb-head--split { flex-direction: column; align-items: flex-start; }
}
.mcb-prose { color: var(--mcb-body); }
.mcb-prose p { margin-bottom: 1.1em; }
.mcb-prose--editor h2,
.mcb-prose--editor h3 { margin: 2rem 0 .75rem; }
.mcb-prose--editor ul,
.mcb-prose--editor ol { margin: 0 0 1.2em 1.25rem; list-style: disc; }
.mcb-prose--editor ol { list-style: decimal; }
.mcb-prose--editor li { margin-bottom: .4em; }
.mcb-prose--article { font-size: 1.05rem; }
.mcb-prose--article p { margin-bottom: 1.3em; }
.mcb-pull {
margin: 1.75rem 0 0;
padding: 1.1rem 1.4rem;
border-left: 3px solid var(--mcb-accent);
background: var(--mcb-tint);
border-radius: 0 4px 4px 0;
font-family: var(--mcb-display);
font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
font-weight: 400;
line-height: 1.45;
color: var(--mcb-ink);
}
/* --------------------------------------------------------------- buttons -- */
.mcb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9rem 1.6rem;
border: 1px solid var(--mcb-deep);
border-radius: 4px;
background: var(--mcb-deep);
color: #fff;
font-family: var(--mcb-display);
font-size: .82rem;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: transform .2s var(--mcb-ease), box-shadow .2s var(--mcb-ease), background .2s var(--mcb-ease);
-webkit-appearance: none;
appearance: none;
}
.mcb-btn:hover {
background: var(--mcb-deep-dk);
border-color: var(--mcb-deep-dk);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 24px -12px rgba(5, 19, 39, .5);
}
.mcb-btn:active { transform: translateY(0); }
/*
* The primary call to action.
*
* Three things here were inherited from a gold-era build and were all wrong
* once the gradient became navy: a comment claiming the fill was gold, dark
* navy ink (#071934) sitting on a navy gradient — effectively invisible — and
* a gold drop shadow. White on #0B2A57 is 9.8:1 and needs no argument.
*/
.mcb-btn--accent {
background: var(--mcb-accent-metal);
border-color: transparent;
color: #FFFFFF;
}
.mcb-btn--accent:hover {
background: var(--mcb-accent-metal);
filter: brightness(1.08);
color: #FFFFFF;
box-shadow: 0 12px 26px -12px rgba(11, 42, 87, .55);
}
.mcb-btn--ghost {
background: transparent;
border-color: var(--mcb-line);
color: var(--mcb-deep);
}
.mcb-btn--ghost:hover {
background: var(--mcb-tint);
border-color: var(--mcb-deep);
color: var(--mcb-deep);
box-shadow: none;
}
.mcb-btn--ghost-light {
background: transparent;
border-color: rgba(255, 255, 255, .5);
color: #fff;
}
.mcb-btn--ghost-light:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
box-shadow: none;
}
.mcb-btn--sm { padding: .68rem 1.1rem; font-size: .74rem; }
.mcb-btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.mcb-btn--block { display: flex; width: 100%; }
/* -------------------------------------------------------------- utility -- */
.mcb-utility {
position: relative;
z-index: 60;
background: var(--mcb-deep);
color: rgba(255, 255, 255, .72);
font-size: .78rem;
}
.mcb-utility__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 40px;
padding-block: .35rem;
}
.mcb-utility__tagline {
margin: 0;
font-family: var(--mcb-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mcb-accent-lt);
white-space: nowrap;
}
.mcb-utility__list { display: flex; align-items: center; gap: 1.4rem; }
.mcb-utility__list a {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, .82);
}
.mcb-utility__list a:hover { color: #fff; }
.mcb-icon { flex-shrink: 0; color: var(--mcb-accent-lt); transition: color .2s var(--mcb-ease); }
.mcb-utility__list a:hover .mcb-icon { color: #fff; }
@media (max-width: 1040px) {
/* Gone entirely on mobile. It was a strip of navy holding a phone number and
an email in 12px type — the phone is now a proper button in the masthead,
which is a real target and does not cost a band of color above the logo. */
.mcb-utility { display: none; }
}
/* ------------------------------------------------------------- language -- */
/*
* EN / ES.
*
* A segmented pair rather than a dropdown: with exactly two languages a select
* costs a tap to discover what it even contains, and both labels visible is its
* own advertisement — a Spanish speaker sees "ES" without hunting for it, which
* is the whole point of the feature.
*
* The inactive side is a link and the active side is not, so keyboard order
* carries no dead stop and screen readers get aria-current on the live one.
*/
.mcb-lang {
display: inline-flex;
align-items: center;
gap: 1px;
padding: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
}
.mcb-lang__on,
.mcb-lang__off {
display: inline-block;
padding: .18rem .55rem;
border-radius: 999px;
line-height: 1.5;
}
.mcb-lang__on {
background: #fff;
color: var(--mcb-deep);
}
.mcb-utility__list .mcb-lang__off {
color: rgba(255, 255, 255, .8);
transition: background .18s var(--mcb-ease), color .18s var(--mcb-ease);
}
.mcb-utility__list .mcb-lang__off:hover {
background: rgba(255, 255, 255, .16);
color: #fff;
}
/*
* In the drawer the bar is on white, not on the deep band, so the whole thing
* inverts. It also spells the languages out — there is room for "Español" on a
* phone and it reads as a promise rather than a two-letter code.
*/
.mcb-lang--drawer {
align-self: center;
background: var(--mcb-sky);
font-size: .82rem;
}
.mcb-lang--drawer .mcb-lang__on {
background: var(--mcb-brand);
color: #fff;
}
.mcb-lang--drawer .mcb-lang__off {
color: var(--mcb-accent);
}
.mcb-lang--drawer .mcb-lang__off:hover {
background: rgba(30, 140, 143, .12);
}
/* --------------------------------------------------------------- header -- */
/* Constant-height shell; only the bar inside it moves. Collapsing the header
itself would shorten the document mid-scroll and drag the page up under the
reader — see themes/CLAUDE.md. */
.mcb-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--mcb-header-h);
pointer-events: none;
}
.mcb-header__bar {
pointer-events: auto;
background: #fff;
border-bottom: 1px solid var(--mcb-line);
box-shadow: 0 8px 24px -18px rgba(5, 19, 39, calc(1.4 * var(--mcb-shrink)));
}
.mcb-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: calc(var(--mcb-bar-max) + (var(--mcb-bar-min) - var(--mcb-bar-max)) * var(--mcb-shrink));
}
.mcb-brand { display: inline-flex; flex-shrink: 0; }
.mcb-logo { display: inline-flex; align-items: center; gap: .65rem; }
.mcb-logo__img {
height: calc(var(--mcb-logo-max) + (var(--mcb-logo-min) - var(--mcb-logo-max)) * var(--mcb-shrink));
width: auto;
/* The height above is fixed and the width is auto, so the max-width guard
further down would SQUASH the lockup rather than scale it if it ever
bit. object-fit letterboxes instead, which is recoverable. */
object-fit: contain;
object-position: left center;
}
.mcb-logo__mark { display: inline-flex; }
.mcb-logo__mark svg { width: 40px; height: 40px; }
.mcb-logo--footer .mcb-logo__mark svg { width: 46px; height: 46px; }
.mcb-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.mcb-logo__name {
font-family: var(--mcb-display);
font-size: 1.32rem;
font-weight: 400;
letter-spacing: -.01em;
color: var(--mcb-deep);
}
.mcb-logo__sub {
margin-top: .18rem;
font-family: var(--mcb-display);
font-size: .62rem;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-logo--footer .mcb-logo__name { color: #fff; }
.mcb-logo--footer .mcb-logo__img { height: 74px; }
/* ------------------------------------------------------------------ nav -- */
.mcb-nav { margin-inline: auto; }
.mcb-nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }
.mcb-nav__list a {
position: relative;
display: inline-block;
padding-block: .35rem;
font-family: var(--mcb-display);
font-size: .8rem;
font-weight: 400;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mcb-ink);
}
.mcb-nav__list a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--mcb-accent-metal);
transition: width .25s var(--mcb-ease);
}
.mcb-nav__list a:hover { color: var(--mcb-deep); }
.mcb-nav__list a:hover::after,
.mcb-nav__list .is-current > a::after,
.mcb-nav__list .current-menu-item > a::after { width: 100%; }
.mcb-nav__list .is-current > a,
.mcb-nav__list .current-menu-item > a { color: var(--mcb-deep); }
.mcb-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.mcb-burger {
display: none;
padding: .55rem;
background: none;
border: 1px solid var(--mcb-line);
border-radius: 4px;
cursor: pointer;
}
.mcb-burger__box { display: block; width: 20px; }
.mcb-burger__box i {
display: block; height: 2px; background: var(--mcb-deep);
transition: transform .25s var(--mcb-ease), opacity .2s var(--mcb-ease);
}
.mcb-burger__box i + i { margin-top: 4px; }
.mcb-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mcb-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.mcb-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1040px) {
.mcb-nav { display: none; }
.mcb-burger { display: block; }
}
@media (max-width: 620px) {
/* The "Talk to an agent" button goes; the call button stays. Excluded by
name rather than by raising specificity elsewhere — this rule is more
specific than .mcb-callnow and would otherwise win silently. */
.mcb-header__actions .mcb-btn:not(.mcb-callnow) { display: none; }
}
/* --------------------------------------------------------------- drawer -- */
.mcb-drawer {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1.5rem;
padding: calc(var(--mcb-header-h) + 1.75rem) var(--mcb-gutter) 2.5rem;
background: #fff;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .28s var(--mcb-ease), visibility .28s var(--mcb-ease);
}
.mcb-drawer[hidden] { display: flex; }
.mcb-drawer.is-open { opacity: 1; visibility: visible; }
.mcb-drawer__nav .mcb-nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; }
.mcb-drawer__nav .mcb-nav__list a { padding-block: .7rem; font-size: 1.3rem; letter-spacing: .04em; }
.mcb-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.mcb-drawer__call {
font-family: var(--mcb-display);
font-size: 1.05rem;
font-weight: 400;
text-align: center;
color: var(--mcb-deep);
}
/* --------------------------------------------------------------- figures -- */
.mcb-figure {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--mcb-tint-2);
}
.mcb-figure img { width: 100%; height: 100%; object-fit: cover; }
.mcb-figure--cover { position: absolute; inset: 0; border-radius: 0; }
.mcb-figure--tall { aspect-ratio: 4 / 5; }
.mcb-figure--portrait { aspect-ratio: 3 / 4; }
.mcb-figure--wide { aspect-ratio: 16 / 10; }
.mcb-figure--hero { aspect-ratio: 16 / 9; border-radius: 8px; }
.mcb-figure--lead { margin-bottom: 2rem; }
.mcb-figure--empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
min-height: 12rem;
background:
repeating-linear-gradient(135deg, transparent 0 12px, rgba(5, 19, 39, .03) 12px 24px),
var(--mcb-tint-2);
}
.mcb-figure__mark { opacity: .5; }
.mcb-figure__note {
font-family: var(--mcb-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mcb-faint);
}
/* ------------------------------------------------------------------ hero -- */
.mcb-hero {
position: relative;
display: flex;
align-items: center;
min-height: clamp(30rem, 74vh, 42rem);
padding-block: clamp(5rem, 10vh, 7rem);
overflow: hidden;
background: #020811;
}
.mcb-hero__media { position: absolute; inset: 0; z-index: 0; }
/* Warm, not navy.
*
* The hero is a house at golden hour, and a navy scrim was arguing with it —
* the sky went slate, the lit windows went gray, and the one genuinely
* attractive thing about the photograph was suppressed to make room for a brand
* color it did not need. The scrim is now a deep warm brown, which darkens
* exactly as much for the text but reads as dusk rather than as a blue filter.
*
* The amber wash on the right is doing the opposite job: it sits over the part
* of the frame with no text on it and lifts the water, so the color is
* strongest where the eye is free to enjoy it.
*
* Temperature matters here. The copied theme scrimmed in warm brown, which over
* a blue-green aerial reads as dirt on the lens. This one is a deep ocean blue
* drawn from --mcb-deep, so the photograph stays in the same family as the logo.
* The photograph is also a top-down aerial and therefore busy edge to edge —
* there is no empty sky to drop type onto — so the left side is scrimmed harder
* than a normal hero would need. */
/*
* A LIGHT hero. This is the fifth version of this decision in the repo and it
* is settled: Adam has rejected dark twice and rejected light-with-dark-bands
* as still too dark. The version inherited here scrimmed the left edge at 0.92
* navy, which turned a bright aerial of a sunlit barrier island into a navy
* panel with a photograph faintly behind it.
*
* So the scrim is low and NEUTRAL — a warm-gray dark rather than navy, because
* a blue scrim over blue water grades the footage toward the brand color,
* which is the thing not to do. Legibility comes from the text shadow on
* .mcb-hero__title and .mcb-hero__lede instead, which darkens only the pixels
* immediately behind the letterforms and leaves the picture alone. Measured
* with scripts/hero-contrast.py, not eyeballed.
*/
.mcb-hero__scrim {
position: absolute;
inset: 0;
background:
/*
* A BAND, not a blanket. The headline measured 2.58:1 against the
* brightest stretch of beach behind it and large text needs 3:1, so
* the fix is a soft horizontal band of extra density across the rows
* the type actually occupies — roughly 26% to 66% of the hero — while
* the sky at the top and the surf at the bottom stay as bright as the
* footage shot them. Darkening the whole picture to fix one line is
* what produced the navy panel this replaced.
*/
linear-gradient(to bottom, rgba(16, 18, 22, 0) 16%, rgba(16, 18, 22, .36) 30%, rgba(16, 18, 22, .36) 62%, rgba(16, 18, 22, 0) 78%),
linear-gradient(to right, rgba(16, 18, 22, .58) 0%, rgba(16, 18, 22, .40) 44%, rgba(16, 18, 22, .06) 76%, rgba(16, 18, 22, .12) 100%),
linear-gradient(to bottom, rgba(16, 18, 22, .14) 0%, rgba(16, 18, 22, .00) 38%, rgba(16, 18, 22, .26) 100%);
}
.mcb-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.mcb-hero__title { color: #fff; }
.mcb-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }
.mcb-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.mcb-hero__note {
margin-top: 1.35rem;
font-size: .84rem;
color: rgba(255, 255, 255, .62);
}
/* ---------------------------------------------------------------- banner -- */
.mcb-banner {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(16rem, 38vh, 22rem);
padding-block: clamp(4rem, 9vh, 6rem) clamp(2rem, 5vh, 3rem);
overflow: hidden;
background: var(--mcb-deep-dk);
}
.mcb-banner__media { position: absolute; inset: 0; z-index: 0; }
.mcb-banner__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .46) 55%, rgba(16, 18, 22, .30) 100%),
linear-gradient(to bottom, rgba(16, 18, 22, .24) 0%, rgba(16, 18, 22, .12) 50%, rgba(16, 18, 22, .42) 100%);
}
.mcb-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.mcb-banner__title { color: #fff; }
.mcb-banner__lede { color: rgba(255, 255, 255, .85); }
/* Banners with no photograph still need to be navy, not a white void. */
.mcb-banner:not(:has(.mcb-banner__media)) { background: var(--mcb-deep); }
/* ----------------------------------------------------------------- split -- */
.mcb-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.mcb-split--reverse .mcb-split__media { order: 2; }
.mcb-split--reverse .mcb-split__body { order: 1; }
.mcb-split__body .mcb-lede { margin-bottom: 1.25rem; }
.mcb-split__body .mcb-btn { margin-top: 1.5rem; }
@media (max-width: 900px) {
.mcb-split { grid-template-columns: 1fr; }
.mcb-split--reverse .mcb-split__media,
.mcb-split--reverse .mcb-split__body { order: initial; }
.mcb-figure--tall, .mcb-figure--portrait { aspect-ratio: 16 / 11; }
}
/* ----------------------------------------------------------- cards, grid -- */
.mcb-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.5rem;
}
.mcb-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--mcb-ease), box-shadow .28s var(--mcb-ease), border-color .28s var(--mcb-ease);
}
.mcb-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mcb-shadow-lg);
}
.mcb-card__media { position: relative; display: block; }
.mcb-card__media .mcb-figure { border-radius: 0; }
.mcb-card__media img { transition: transform .5s var(--mcb-ease); }
.mcb-card:hover .mcb-card__media img { transform: scale(1.035); }
.mcb-card__status {
position: absolute;
top: .75rem; left: .75rem;
padding: .35rem .7rem;
border-radius: 3px;
background: var(--mcb-deep);
color: #fff;
font-family: var(--mcb-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
}
/* A sold listing should not look like an available one. */
.mcb-status--sold,
.mcb-status--closed { background: var(--mcb-ink); }
.mcb-status--pending,
.mcb-status--under-contract { background: var(--mcb-accent); color: #FFFFFF; }
.mcb-status--coming-soon { background: var(--mcb-deep-lt); }
.mcb-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.5rem; }
.mcb-card__price {
margin-bottom: .35rem;
font-family: var(--mcb-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--mcb-deep);
}
.mcb-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.mcb-card__title a { color: var(--mcb-ink); }
.mcb-card__title a:hover { color: var(--mcb-deep); }
.mcb-card__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .9rem;
font-size: .88rem;
color: var(--mcb-muted);
}
.mcb-card__addr .mcb-icon { color: var(--mcb-accent); }
.mcb-card__specs {
display: flex;
flex-wrap: wrap;
gap: .35rem 1.1rem;
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid var(--mcb-line-soft);
font-size: .84rem;
color: var(--mcb-body);
}
.mcb-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.mcb-card__specs .mcb-icon { color: var(--mcb-deep-lt); }
.mcb-card__date {
margin-bottom: .4rem;
font-family: var(--mcb-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-card__text { font-size: .93rem; color: var(--mcb-muted); margin-bottom: 1rem; }
.mcb-count {
margin-bottom: 1.75rem;
font-size: .88rem;
color: var(--mcb-muted);
}
/* --------------------------------------------------------------- services -- */
.mcb-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1.25rem;
}
.mcb-service {
display: flex;
flex-direction: column;
padding: 2rem 1.6rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
color: inherit;
transition: transform .28s var(--mcb-ease), box-shadow .28s var(--mcb-ease), border-color .28s var(--mcb-ease);
}
.mcb-service:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mcb-shadow-lg);
color: inherit;
}
.mcb-service__num {
margin-bottom: .9rem;
font-family: var(--mcb-display);
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
color: var(--mcb-accent);
}
.mcb-service__title { margin-bottom: .5rem; }
.mcb-service__text { font-size: .93rem; color: var(--mcb-muted); margin-bottom: 1.25rem; }
.mcb-service__link {
margin-top: auto;
font-family: var(--mcb-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-deep);
}
.mcb-service__link::after {
content: ' \2192';
display: inline-block;
transition: transform .25s var(--mcb-ease);
}
.mcb-service:hover .mcb-service__link::after,
.mcb-card:hover .mcb-service__link::after { transform: translateX(4px); }
/* --------------------------------------------------------------- pillars -- */
.mcb-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1.25rem;
}
.mcb-pillar {
padding: 1.75rem 1.5rem;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 8px;
}
.mcb-pillar__title { margin-bottom: .6rem; font-size: 1.05rem; }
.mcb-pillar__body { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }
/* ----------------------------------------------------------------- steps -- */
.mcb-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1.5rem;
}
.mcb-step { padding-top: 1.5rem; border-top: 2px solid var(--mcb-line); }
.mcb-step__num {
display: block;
margin-bottom: .7rem;
font-family: var(--mcb-display);
font-size: 1.7rem;
font-weight: 400;
line-height: 1;
color: var(--mcb-accent);
}
.mcb-step__title { margin-bottom: .4rem; }
.mcb-step__text { font-size: .92rem; color: var(--mcb-muted); margin: 0; }
/* ---------------------------------------------------------------- quotes -- */
.mcb-quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 1.5rem;
}
.mcb-quote {
margin: 0;
padding: 1.9rem 1.6rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
}
.mcb-quote__stars { color: var(--mcb-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.mcb-quote blockquote { margin: 0 0 1.1rem; color: var(--mcb-body); }
.mcb-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.mcb-quote__name { font-family: var(--mcb-display); font-weight: 400; color: var(--mcb-ink); font-size: .92rem; }
.mcb-quote__via { font-size: .8rem; color: var(--mcb-faint); }
/* ------------------------------------------------------------------ team -- */
.mcb-team { display: grid; gap: 2rem; }
.mcb-member {
display: grid;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.5rem, 3vw, 2.25rem);
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
}
@media (max-width: 760px) {
.mcb-member { grid-template-columns: 1fr; }
}
.mcb-member__photo { position: relative; }
.mcb-member__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
border-radius: 6px;
background: var(--mcb-deep);
color: var(--mcb-accent-lt);
font-family: var(--mcb-display);
font-size: 3.5rem;
font-weight: 400;
letter-spacing: .04em;
}
.mcb-member__name { margin-bottom: .2rem; }
.mcb-member__role {
font-family: var(--mcb-display);
font-size: .78rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-member__bio { color: var(--mcb-body); margin-bottom: 1.1rem; }
.mcb-member__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mcb-member__contact a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.mcb-member__contact .mcb-icon { color: var(--mcb-accent); }
.mcb-joinus {
margin-top: 2rem;
padding: clamp(1.75rem, 4vw, 2.5rem);
background: var(--mcb-tint);
border: 1px solid var(--mcb-line);
border-radius: 8px;
text-align: center;
}
.mcb-joinus h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.mcb-joinus p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.4rem; color: var(--mcb-muted); }
/* -------------------------------------------------------------- listing -- */
.mcb-listing { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.mcb-listing__head { margin-bottom: 1.75rem; }
.mcb-crumb { font-size: .82rem; color: var(--mcb-faint); margin-bottom: 1rem; }
.mcb-crumb span { margin-inline: .4rem; }
.mcb-listing__titles {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.mcb-listing__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-top: .6rem;
color: var(--mcb-muted);
}
.mcb-listing__addr .mcb-icon { color: var(--mcb-accent); }
.mcb-listing__price { text-align: right; }
.mcb-listing__amount {
font-family: var(--mcb-display);
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
font-weight: 400;
color: var(--mcb-deep);
margin-bottom: .4rem;
}
.mcb-listing__price .mcb-card__status { position: static; display: inline-block; }
.mcb-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
gap: 1px;
margin-top: 1.75rem;
background: var(--mcb-line);
border: 1px solid var(--mcb-line);
border-radius: 8px;
overflow: hidden;
}
.mcb-facts li { padding: 1.1rem 1.25rem; background: #fff; text-align: center; }
.mcb-facts__value {
display: block;
font-family: var(--mcb-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--mcb-ink);
}
.mcb-facts__label {
display: block;
margin-top: .2rem;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mcb-faint);
}
.mcb-listing__body {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) { .mcb-listing__body { grid-template-columns: 1fr; } }
.mcb-listing__galleryhead { margin-top: 2.5rem; }
.mcb-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: 1rem;
}
.mcb-askbox {
position: sticky;
top: calc(var(--mcb-header-h) + 1.5rem);
padding: 1.75rem 1.6rem;
background: var(--mcb-tint);
border: 1px solid var(--mcb-line);
border-radius: 8px;
}
.mcb-askbox h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.mcb-askbox p { font-size: .92rem; color: var(--mcb-muted); margin-bottom: 1.25rem; }
.mcb-askbox__call {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: .9rem;
font-family: var(--mcb-display);
font-weight: 400;
color: var(--mcb-deep);
}
/* ----------------------------------------------------------------- empty -- */
.mcb-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 34rem;
margin-inline: auto;
padding: clamp(2.5rem, 5vw, 3.5rem);
text-align: center;
background: var(--mcb-tint);
border: 1px solid var(--mcb-line);
border-radius: 8px;
}
.mcb-empty__mark { opacity: .7; }
.mcb-empty h2 { font-size: 1.3rem; }
.mcb-empty p { color: var(--mcb-muted); margin-bottom: .5rem; }
/* ------------------------------------------------------------------ faqs -- */
.mcb-faqs { display: grid; gap: .75rem; }
.mcb-faq {
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 6px;
}
.mcb-faq[open] { border-color: var(--mcb-deep-lt); }
.mcb-faq__q {
position: relative;
padding: 1.15rem 3rem 1.15rem 1.35rem;
font-family: var(--mcb-display);
font-size: 1rem;
font-weight: 400;
color: var(--mcb-ink);
cursor: pointer;
list-style: none;
}
.mcb-faq__q::-webkit-details-marker { display: none; }
.mcb-faq__q:hover { color: var(--mcb-deep); }
.mcb-faq__q::after,
.mcb-faq__q::before {
content: '';
position: absolute;
right: 1.35rem; top: 50%;
width: 12px; height: 2px;
background: var(--mcb-accent);
transition: transform .25s var(--mcb-ease);
}
.mcb-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.mcb-faq__q::after { transform: translateY(-50%); }
.mcb-faq[open] .mcb-faq__q::before { transform: translateY(-50%) rotate(0deg); }
.mcb-faq__a { margin: 0; padding: 0 3rem 1.35rem 1.35rem; color: var(--mcb-muted); }
/* ---------------------------------------------------------------- contact -- */
.mcb-contact {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 3.5rem);
align-items: start;
}
@media (max-width: 900px) { .mcb-contact { grid-template-columns: 1fr; } }
.mcb-contact__form .mcb-form { margin-top: 1.75rem; }
.mcb-contact__aside {
display: grid;
gap: 1px;
background: var(--mcb-line);
border: 1px solid var(--mcb-line);
border-radius: 8px;
overflow: hidden;
}
.mcb-contact__block { padding: 1.4rem 1.5rem; background: #fff; }
.mcb-contact__heading {
margin-bottom: .4rem;
font-family: var(--mcb-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-contact__big {
display: inline-block;
font-family: var(--mcb-display);
font-size: 1.1rem;
font-weight: 400;
color: var(--mcb-ink);
word-break: break-word;
}
.mcb-contact__big:hover { color: var(--mcb-deep); }
.mcb-contact__note, .mcb-contact__text { margin: .3rem 0 0; font-size: .9rem; color: var(--mcb-muted); }
.mcb-contact__text { color: var(--mcb-body); }
.mcb-contact__seal {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
padding: 1.75rem 1.5rem;
text-align: center;
background: var(--mcb-deep);
}
.mcb-contact__seal p {
margin: 0;
font-family: var(--mcb-display);
font-size: .78rem;
font-weight: 400;
color: rgba(255, 255, 255, .82);
}
.mcb-contact__seal .mcb-mark { filter: brightness(1.6); }
/* ------------------------------------------------------------------ form -- */
.mcb-form { display: grid; gap: 1rem; }
.mcb-field { display: grid; gap: .4rem; min-width: 0; }
.mcb-field__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: 1rem;
}
.mcb-field label {
font-family: var(--mcb-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--mcb-muted);
}
.mcb-field label span { color: var(--mcb-accent); }
.mcb-field input,
.mcb-field select,
.mcb-field textarea {
width: 100%;
padding: .8rem .95rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 5px;
color: var(--mcb-ink);
font-family: var(--mcb-body-font);
font-size: 1rem;
line-height: 1.5;
transition: border-color .2s var(--mcb-ease), box-shadow .2s var(--mcb-ease);
-webkit-appearance: none;
appearance: none;
}
.mcb-field textarea { resize: vertical; min-height: 8rem; }
.mcb-field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--mcb-deep) 50%),
linear-gradient(135deg, var(--mcb-deep) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.75rem;
cursor: pointer;
}
.mcb-field input:focus,
.mcb-field select:focus,
.mcb-field textarea:focus {
border-color: var(--mcb-deep-lt);
box-shadow: 0 0 0 3px rgba(30, 140, 143, .12);
outline: none;
}
.mcb-field input::placeholder, .mcb-field textarea::placeholder { color: var(--mcb-faint); }
/* Off-screen rather than display:none — some bots skip explicitly hidden
fields, and this one is meant to be filled in. */
.mcb-trap {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}
.mcb-form__note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.mcb-form__note.is-ok { color: #1E7A4C; }
.mcb-form__note.is-bad { color: #C0392B; }
.mcb-form.is-sending { opacity: .6; pointer-events: none; }
.mcb-alert {
padding: .9rem 1.15rem;
margin-bottom: 1.5rem;
border-left: 3px solid var(--mcb-deep);
background: var(--mcb-tint);
border-radius: 0 4px 4px 0;
font-size: .94rem;
}
.mcb-alert--ok { border-left-color: #1E7A4C; color: #1E7A4C; }
.mcb-alert--bad { border-left-color: #C0392B; color: #C0392B; }
/* ----------------------------------------------------------------- modal -- */
.mcb-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: var(--mcb-gutter);
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--mcb-ease), visibility .25s var(--mcb-ease);
}
.mcb-modal[hidden] { display: flex; }
.mcb-modal.is-open { opacity: 1; visibility: visible; }
.mcb-modal__veil {
position: absolute;
inset: 0;
background: rgba(5, 19, 39, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mcb-modal__panel {
position: relative;
width: 100%;
max-width: 38rem;
max-height: min(90vh, 52rem);
overflow-y: auto;
padding: clamp(1.75rem, 4vw, 2.5rem);
background: #fff;
border-radius: 10px;
box-shadow: var(--mcb-shadow-lg);
transform: translateY(14px) scale(.99);
transition: transform .3s var(--mcb-ease);
}
.mcb-modal.is-open .mcb-modal__panel { transform: translateY(0) scale(1); }
.mcb-modal__panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--mcb-accent-metal);
border-radius: 10px 10px 0 0;
}
.mcb-modal__close {
position: absolute;
top: .8rem; right: .8rem;
width: 2.25rem; height: 2.25rem;
display: flex; align-items: center; justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: 4px;
color: var(--mcb-muted);
font-size: 1.55rem;
line-height: 1;
cursor: pointer;
transition: color .2s var(--mcb-ease), border-color .2s var(--mcb-ease);
}
.mcb-modal__close:hover { color: var(--mcb-deep); border-color: var(--mcb-line); }
.mcb-modal__head { margin-bottom: 1.6rem; text-align: center; }
.mcb-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.mcb-modal__lede { margin: 0; font-size: .94rem; color: var(--mcb-muted); }
/* ---------------------------------------------------------------- closer -- */
.mcb-closer {
position: relative;
padding-block: clamp(3.5rem, 7vw, 5.5rem);
background: var(--mcb-deep);
color: rgba(255, 255, 255, .82);
text-align: center;
overflow: hidden;
}
.mcb-closer::before {
content: '';
position: absolute;
top: -45%; left: 50%;
width: 44rem; height: 44rem;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(109, 180, 182, .17) 0%, transparent 62%);
pointer-events: none;
}
.mcb-closer__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.mcb-closer__title { color: #fff; }
.mcb-closer__lede { color: rgba(255, 255, 255, .82); margin-inline: auto; margin-top: 1rem; }
.mcb-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
/* ----------------------------------------------------------------- posts -- */
.mcb-posts { display: grid; gap: 2.25rem; }
.mcb-post { padding-bottom: 2.25rem; border-bottom: 1px solid var(--mcb-line); }
.mcb-post__date {
font-family: var(--mcb-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-post__title { margin: .4rem 0 .6rem; }
.mcb-post__excerpt { color: var(--mcb-muted); margin: 0; }
.mcb-backlink { margin-top: 2.5rem; font-family: var(--mcb-display); font-weight: 400; }
.mcb-pagination { margin-top: 2.75rem; }
.mcb-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.mcb-pagination .page-numbers {
padding: .5rem .9rem;
border: 1px solid var(--mcb-line);
border-radius: 4px;
color: var(--mcb-body);
font-size: .88rem;
}
.mcb-pagination .page-numbers.current,
.mcb-pagination .page-numbers:hover {
border-color: var(--mcb-deep);
background: var(--mcb-deep);
color: #fff;
}
/* --------------------------------------------- syndicated legal documents -- */
/* Light site, so the plugin's inline color:#000000 is survivable here — but it
is still forced to the body color so legal pages match everything else. */
.bb-legal-container,
.bb-legal-container * { color: var(--mcb-body) !important; }
.bb-legal-container { max-width: 70ch; }
.bb-legal-container h1,
.bb-legal-container h2,
.bb-legal-container h3,
.bb-legal-container strong,
.bb-legal-container b { color: var(--mcb-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--mcb-display); }
.bb-legal-container p, .bb-legal-container li { margin-bottom: 1em; }
.bb-legal-container ul, .bb-legal-container ol { margin: 0 0 1.25em 1.25rem; list-style: disc; }
.bb-legal-container ol { list-style: decimal; }
.bb-legal-container a { color: var(--mcb-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--mcb-line); margin: 2rem 0; }
/* ---------------------------------------------------------------- reveal -- */
@media (prefers-reduced-motion: no-preference) {
html.js [data-mcb-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity .7s var(--mcb-ease), transform .7s var(--mcb-ease);
}
html.js [data-mcb-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* ------------------------------------------------------------------ misc -- */
@media (max-width: 620px) {
.mcb-section { padding-block: clamp(3rem, 10vw, 4rem); }
.mcb-card__body { padding: 1.15rem; }
.mcb-service { padding: 1.6rem 1.3rem; }
.mcb-listing__titles { flex-direction: column; align-items: flex-start; }
.mcb-listing__price { text-align: left; }
}
body.admin-bar .mcb-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mcb-header { top: 46px; } }
/* -------------------------------------------------------- nav dropdowns -- */
.mcb-nav__item { position: relative; display: flex; align-items: center; gap: .2rem; }
/* The chevron is a button, not decoration: on a touch screen there is no hover,
so the parent link has to stay a link and something else has to open the
submenu. */
.mcb-nav__toggle {
display: inline-flex;
align-items: center;
padding: .25rem;
background: none;
border: 0;
color: var(--mcb-ink);
cursor: pointer;
transition: transform .2s var(--mcb-ease);
}
.mcb-nav__item.is-open > .mcb-nav__toggle { transform: rotate(180deg); }
.mcb-nav__sub {
position: absolute;
top: 100%;
left: -1rem;
min-width: 15rem;
padding: .5rem 0;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 6px;
box-shadow: var(--mcb-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .2s var(--mcb-ease), transform .2s var(--mcb-ease), visibility .2s var(--mcb-ease);
z-index: 20;
}
.mcb-nav__item:hover > .mcb-nav__sub,
.mcb-nav__item:focus-within > .mcb-nav__sub,
.mcb-nav__item.is-open > .mcb-nav__sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mcb-nav__sub a {
display: block;
padding: .55rem 1.1rem;
font-size: .78rem;
text-transform: none;
letter-spacing: .01em;
color: var(--mcb-body);
}
.mcb-nav__sub a::after { display: none; }
.mcb-nav__sub a:hover { background: var(--mcb-tint); color: var(--mcb-deep); }
/* In the drawer every submenu is an accordion, collapsed by default.
*
* They used to be forced open, which turned six top-level items into fourteen
* rows and pushed the bottom of the menu off a phone screen entirely. Collapsed,
* the whole menu fits without scrolling and each section opens on a tap. */
.mcb-drawer__nav .mcb-nav__list { width: 100%; gap: 0; }
.mcb-drawer__nav .mcb-nav__item {
display: grid;
/* A centered row with the chevron pinned right: three columns where the outer
two are equal, so the label lands on the true center rather than being
pushed left by the arrow's width. */
grid-template-columns: 3rem 1fr 3rem;
align-items: center;
width: 100%;
border-bottom: 1px solid var(--mcb-line);
}
.mcb-drawer__nav .mcb-nav__item > a {
grid-column: 2;
padding-block: 1rem;
font-size: 1.06rem;
text-align: center;
}
.mcb-drawer__nav .mcb-nav__item > a::after { display: none; }
/* The row is the control, so it should look like one under the finger. */
.mcb-drawer__nav .mcb-nav__item.has-children { cursor: pointer; }
.mcb-drawer__nav .mcb-nav__item.has-children:active { background: var(--mcb-tint); }
/* A proper hit target — the chevron is the control that opens the section, and
on a phone it has to be thumb-sized rather than icon-sized. */
.mcb-drawer__nav .mcb-nav__toggle {
grid-column: 3;
display: inline-flex;
justify-content: center;
width: 3rem;
height: 3rem;
color: var(--mcb-deep);
}
.mcb-drawer__nav .mcb-nav__sub {
grid-column: 1 / -1;
background: var(--mcb-tint);
position: static;
min-width: 0;
border: 0;
box-shadow: none;
background: none;
transform: none;
visibility: visible;
opacity: 1;
/* Collapsed by default.
*
* NOT the grid-template-rows: 0fr trick — that declares a single track, so
* only the first child collapses and every item after it lands in an
* implicit auto row and stays visible. It looked like the accordion worked
* until a submenu had more than one entry. max-height is unfashionable and
* correct. */
display: block;
max-height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: max-height .3s var(--mcb-ease), opacity .2s var(--mcb-ease), padding .3s var(--mcb-ease);
}
.mcb-drawer__nav .mcb-nav__item.is-open > .mcb-nav__sub {
/* Comfortably past the tallest submenu (three items); the transition eases
on the real height because the content is shorter than the cap. */
max-height: 22rem;
opacity: 1;
padding-bottom: .6rem;
}
.mcb-drawer__nav .mcb-nav__sub a {
padding: .55rem 0;
font-size: .95rem;
font-weight: 500;
text-align: center;
text-transform: none;
letter-spacing: 0;
color: var(--mcb-body);
}
/* ----------------------------------------------------------- credentials -- */
/* White, not navy. It sat directly beneath a navy-scrimmed hero and the two ran
together as one undifferentiated slab of blue. */
.mcb-creds { background: #fff; border-bottom: 1px solid var(--mcb-line); }
.mcb-creds__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 13rem), 1fr));
gap: 1px;
background: var(--mcb-line);
}
.mcb-creds__list li {
padding: 1.5rem 1.25rem;
background: #fff;
text-align: center;
}
.mcb-creds__label {
display: block;
font-family: var(--mcb-display);
font-size: 1.02rem;
font-weight: 400;
color: var(--mcb-deep);
}
.mcb-creds__note {
display: block;
margin-top: .3rem;
font-size: .82rem;
color: var(--mcb-muted);
}
/* ----------------------------------------------------------------- paths -- */
.mcb-paths {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.mcb-path {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--mcb-ease), box-shadow .28s var(--mcb-ease);
}
.mcb-path:hover { transform: translateY(-4px); box-shadow: var(--mcb-shadow-lg); }
.mcb-path__media .mcb-figure { border-radius: 0; }
.mcb-path__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.mcb-path__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.mcb-path__text { color: var(--mcb-muted); margin-bottom: 1.5rem; }
/* ----------------------------------------------------------------- creed -- */
.mcb-creed__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.mcb-creed__quote { margin: 0; }
.mcb-creed__goal {
font-family: var(--mcb-display);
font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.95rem);
font-weight: 400;
line-height: 1.3;
color: #fff;
margin-bottom: 1.5rem;
}
.mcb-creed__close {
font-size: clamp(1rem, .97rem + .3vw, 1.12rem);
color: var(--mcb-accent-lt);
font-weight: 500;
}
.mcb-creed__attrib {
margin-top: 1.25rem;
font-family: var(--mcb-display);
font-size: .76rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.mcb-creed__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
margin-top: 2rem;
}
/* ------------------------------------------------------- valuation call -- */
.mcb-valuecta {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
padding: clamp(1.75rem, 4vw, 2.75rem);
background: var(--mcb-tint);
border: 1px solid var(--mcb-line);
border-left: 4px solid var(--mcb-accent-mid);
border-radius: 8px;
}
@media (max-width: 820px) { .mcb-valuecta { grid-template-columns: 1fr; } }
.mcb-valuecta h2 { margin-bottom: .6rem; }
.mcb-valuecta p { color: var(--mcb-muted); margin: 0; }
.mcb-valuecta__act { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.mcb-valuecta__call {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: var(--mcb-display);
font-weight: 400;
color: var(--mcb-deep);
}
.mcb-valuecta__call .mcb-icon { color: var(--mcb-accent-mid); }
/* Both step lists are four items. auto-fit put three on one row and left the
fourth stranded beside a hole, so the count is pinned instead: four across,
then two, then one. Two never orphans a four-item list. */
.mcb-steps--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .mcb-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mcb-steps--wide { grid-template-columns: 1fr; } }
.mcb-quotes__more { margin-top: 2rem; text-align: center; }
/* Pillars sit on navy by default; this is the variant for a light band. */
.mcb-pillars--light .mcb-pillar {
background: #fff;
border-color: var(--mcb-line);
}
.mcb-pillars--light .mcb-pillar__title { color: var(--mcb-ink); }
.mcb-pillars--light .mcb-pillar__body { color: var(--mcb-muted); }
/* ---------------------------------------------------------------- footer -- */
/* Same structure as themes/brokerboost-flagship, but white.
*
* The flagship paints it with --bbt-primary. Here the closing band above it is
* already navy, so a navy footer made the bottom fifth of every page one
* continuous blue block with a hairline through it. White separates the two and
* lets the logo sit on its own background without a plate. */
/*
* The footer, continuous with the closer above it.
*
* It used to be white with a cream legal strip, which meant the bottom of every
* page was three surfaces in a row: a glowing navy band, a hard edge, white, and
* then cream. The glow Adam liked was doing its work and then hitting a wall an
* inch below.
*
* Now the closer and the footer share one ground, with no border between them,
* and a second much wider glow sits at the top of the footer continuing the same
* light. Read together they are one object: light falls from the closer's
* headline and dies out somewhere around the legal line.
*
* Everything else is subtraction — the logo came down from 96px, the columns
* tightened, and the legal strip is now a darker shelf rather than a different
* material.
*/
.mcb-foot {
position: relative;
background: var(--mcb-deep);
color: rgba(255, 255, 255, .70);
overflow: hidden;
}
/* The continuation of the closer's light. Wider and fainter than the one above
it, so it reads as the same source falling further rather than a second lamp. */
.mcb-foot::before {
content: '';
position: absolute;
top: -70%; left: 50%;
width: 74rem; height: 52rem;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(109, 180, 182, .10) 0%, transparent 64%);
pointer-events: none;
}
.mcb-foot__in {
position: relative;
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4.5vw, 68px);
padding-block: clamp(40px, 5vw, 60px);
}
.mcb-foot__brand { flex: 1 1 300px; }
.mcb-foot__col { flex: 0 1 190px; }
.mcb-foot__brand .mcb-logo { margin-bottom: .9rem; }
.mcb-foot__brand .mcb-logo__img { height: 64px; }
.mcb-foot__name { margin: 0; font-family: var(--mcb-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.mcb-foot__firm {
margin: 2px 0 12px;
font-size: .7rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
/* --mcb-accent is a dark blue and vanishes here; the light tint is the only
member of the brand family that survives on this ground. */
color: var(--mcb-brand-lt);
}
.mcb-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }
.mcb-foot__h {
margin: 0 0 12px;
font-family: var(--mcb-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .45);
}
.mcb-foot__menu { list-style: none; margin: 0; padding: 0; }
.mcb-foot__menu a,
.mcb-foot__link {
display: block;
padding: 4px 0;
color: rgba(255, 255, 255, .72);
text-decoration: none;
font-size: .92rem;
transition: color .18s var(--mcb-ease);
}
.mcb-foot__menu a:hover,
.mcb-foot__link:hover { color: #fff; text-decoration: none; }
.mcb-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.mcb-foot__social { margin: 14px 0 0; font-size: .88rem; }
.mcb-foot__social a { color: var(--mcb-brand-lt); }
/* A darker shelf rather than a different material. The hairline is white at low
alpha so it reads as a fold in the same surface, not a seam between two. */
.mcb-foot__legal {
position: relative;
border-top: 1px solid rgba(255, 255, 255, .09);
background: rgba(0, 0, 0, .18);
}
.mcb-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.mcb-foot__legal-in p { margin: 0 0 6px; }
.mcb-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.mcb-foot__legal-in a:hover { color: #fff; }
.mcb-foot__legalnav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 10px 0; }
.mcb-foot__legalnav a { text-decoration: underline; text-underline-offset: 2px; }
.mcb-foot__eho { display: flex; align-items: center; gap: 8px; }
/* The Equal Housing mark is now real SVG geometry — see mcb_eho_mark(). */
.mcb-eho { flex: 0 0 auto; opacity: .85; }
/* --------------------------------------------------------- property search -- */
/* A mockup. It has to look like a working search or it undersells the site, and
it has to be obviously a form or nobody will try it. */
.mcb-searchband {
position: relative;
z-index: 5;
/* Rides up over the hero so it reads as part of it. */
margin-top: -3.5rem;
padding-bottom: 1rem;
}
@media (max-width: 900px) { .mcb-searchband { margin-top: -1.5rem; } }
.mcb-section--searchtop { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.mcb-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.mcb-search {
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 10px;
box-shadow: var(--mcb-shadow-lg);
}
.mcb-search--page { box-shadow: var(--mcb-shadow); }
.mcb-search__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: .75rem;
align-items: end;
}
@media (max-width: 900px) {
.mcb-search__row { grid-template-columns: 1fr 1fr; }
.mcb-search__field--wide { grid-column: 1 / -1; }
.mcb-search__submit { grid-column: 1 / -1; }
}
.mcb-search__field { display: grid; gap: .3rem; min-width: 0; }
.mcb-search__field label {
font-family: var(--mcb-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-muted);
}
.mcb-search__field input,
.mcb-search__field select {
width: 100%;
padding: .7rem .8rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 5px;
color: var(--mcb-ink);
font-family: var(--mcb-body-font);
font-size: .95rem;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
transition: border-color .2s var(--mcb-ease), box-shadow .2s var(--mcb-ease);
}
.mcb-search__field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--mcb-deep) 50%),
linear-gradient(135deg, var(--mcb-deep) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.4rem;
cursor: pointer;
}
.mcb-search__field input:focus,
.mcb-search__field select:focus {
border-color: var(--mcb-deep-lt);
box-shadow: 0 0 0 3px rgba(30, 140, 143, .12);
outline: none;
}
.mcb-search__submit .mcb-btn { width: 100%; padding-block: .78rem; }
.mcb-search__more { margin-top: .85rem; }
.mcb-search__more summary {
display: inline-block;
font-family: var(--mcb-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mcb-deep-lt);
cursor: pointer;
list-style: none;
}
.mcb-search__more summary::-webkit-details-marker { display: none; }
.mcb-search__more summary::after { content: ' +'; }
.mcb-search__more[open] summary::after { content: ' \2013'; }
.mcb-search__row--more {
grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
margin-top: .85rem;
padding-top: .85rem;
border-top: 1px solid var(--mcb-line-soft);
}
/* ------------------------------------------------------------------ creed -- */
.mcb-creed__call {
display: inline-flex;
align-items: center;
gap: .5rem;
color: rgba(255, 255, 255, .86);
font-size: .98rem;
}
.mcb-creed__call strong { color: var(--mcb-accent-lt); }
.mcb-creed__call:hover { color: #fff; }
.mcb-creed__call .mcb-icon { color: var(--mcb-accent-lt); }
.mcb-glyph { color: var(--mcb-faint); }
/* ---------------------------------------------------------------- slider -- */
/* A real horizontal scroller with scroll-snap, not a JS carousel. Trackpad,
swipe, keyboard and the arrow buttons all work without special-casing any of
them — the buttons just call scrollBy(). */
.mcb-slider__controls { display: flex; align-items: center; gap: .5rem; }
.mcb-slider__btn {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 50%;
color: var(--mcb-deep);
cursor: pointer;
transition: background .2s var(--mcb-ease), border-color .2s var(--mcb-ease), opacity .2s var(--mcb-ease);
}
.mcb-slider__btn:hover { background: var(--mcb-deep); border-color: var(--mcb-deep); color: #fff; }
.mcb-slider__btn[disabled] { opacity: .35; cursor: default; }
.mcb-slider__btn[disabled]:hover { background: #fff; border-color: var(--mcb-line); color: var(--mcb-deep); }
.mcb-slider__track {
display: grid;
grid-auto-flow: column;
/* Likewise a floor that is not zero, so the track overflows. */
/* The cap used to be a flat 21rem, which is narrower than the container on
any phone above ~400px: a 336px card sat in a 390px track and left ~54px
of dead space on the right, so the carousel read as left-aligned rather
than centered. Falling back to 100% of the track means the card fills the
width on a phone and still peeks the next one on a tablet. */
grid-auto-columns: min(84vw, 21rem, 100%);
gap: 1.25rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Room for the card hover lift and its shadow, which would otherwise be
clipped by the scroll container. */
padding: .5rem .25rem 1.5rem;
margin-inline: -.25rem;
scrollbar-width: thin;
}
.mcb-slider__track::-webkit-scrollbar { height: 6px; }
.mcb-slider__track::-webkit-scrollbar-thumb { background: var(--mcb-line); border-radius: 6px; }
.mcb-slider__track::-webkit-scrollbar-track { background: transparent; }
.mcb-slider__slide { scroll-snap-align: start; min-width: 0; }
/*
* On a phone the card is centered in the viewport with a symmetric peek either
* side, rather than sitting flush against the left gutter with one card showing
* on the right. Both are legitimate; this one reads as deliberate rather than
* as a grid that happened to be cut off, which is the point on a site whose job
* is to look more expensive than the client's current one.
*
* The negative margin lets the track escape the wrap's gutter so the peeking
* cards run to the screen edge; the matching scroll-padding is what actually
* centers the snap target, and without it the first and last cards cannot reach
* the middle.
*/
/*
* ON A PHONE THE CARD GOES ALL THE WAY ACROSS (Adam, 2026-09-28).
*
* It used to be 78vw with an 11vw peek either side, on the theory that a
* centered card with a symmetric peek "reads as deliberate". On a 390px screen
* that is a 304px card with 43px of dead gutter down both edges, and what it
* actually reads as is a card that did not fit. A listing photograph is the
* most expensive thing on the page and it was being shown at 78% of the width
* available to it.
*
* Now the card spans the full content width, one per screen, and the track
* still scrolls and snaps. The 1.5rem right padding is what makes the next
* card peek by a sliver so the row is still legibly a scroller -- without it a
* full-width card looks like a static image.
*/
@media (max-width: 899px) {
.mcb-slider__track {
grid-auto-columns: 100%;
margin-inline: 0;
padding-inline: 0 1.5rem;
scroll-padding-inline: 0;
}
.mcb-slider__slide { scroll-snap-align: start; }
}
.mcb-slider__slide .mcb-card { height: 100%; }
@media (min-width: 900px) {
/* A FIXED track width, not minmax(0, …).
*
* With a zero minimum every column is allowed to shrink, and a grid inside
* an overflow container will always take that offer — so twelve slides
* collapsed to 80px each and squeezed into the visible width instead of
* overflowing. scrollWidth equalled clientWidth, which is the tell: nothing
* to scroll, because nothing overflowed. A single length forces the track to
* that size and the container to scroll. */
.mcb-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}
/* ------------------------------------------------- masthead over the hero -- */
/*
* On the front page the masthead floats over the hero photograph and resolves
* to the normal white bar as you scroll. Everywhere else it is opaque from the
* first pixel, because only the front page has a dark image to float over.
*
* Two mechanisms, deliberately:
*
* - the BACKGROUND interpolates continuously off --mcb-shrink, so the bar
* arrives smoothly rather than snapping;
* - the FOREGROUND (nav text, logo, CTA) swaps on the .is-solid class the
* scroll handler sets past 60%, with a transition doing the blending.
*
* The foreground is not interpolated through the same variable on purpose.
* Doing so makes legibility depend on a value JS rewrites every frame, and the
* failure mode is white text on a white bar. A class is either present or not,
* so the worst case is "solid too early", never "invisible".
*
* The hero is pulled up under the masthead rather than the masthead being taken
* out of flow — a fixed bar would force every other page to compensate for it.
*/
.mcb-home .mcb-hero { margin-top: calc(var(--mcb-header-h) * -1); }
.mcb-home .mcb-hero__inner { padding-top: var(--mcb-header-h); }
.mcb-home .mcb-header__bar {
background: rgba(255, 255, 255, var(--mcb-shrink));
border-bottom-color: rgba(228, 222, 210, var(--mcb-shrink));
}
/* The light state: only while over the photograph. */
.mcb-home .mcb-header:not(.is-solid) .mcb-nav__list > li > a,
.mcb-home .mcb-header:not(.is-solid) .mcb-nav__toggle,
.mcb-home .mcb-header:not(.is-solid) .mcb-callnow {
color: #fff;
}
.mcb-home .mcb-header:not(.is-solid) .mcb-burger__box i { background: #fff; }
/* The hover underline is a gold-era gradient; on the photograph it reads as
mud, so it becomes plain white until the bar arrives. */
.mcb-home .mcb-header:not(.is-solid) .mcb-nav__list > li > a::after { background: #fff; }
.mcb-header .mcb-nav__list > li > a,
.mcb-header .mcb-nav__toggle,
.mcb-header .mcb-callnow { transition: color .28s var(--mcb-ease); }
/* The submenu panel is its own white surface and is never part of the swap. */
.mcb-home .mcb-nav__sub a { color: var(--mcb-body); }
/*
* The masthead CTA. Solid navy on a navy photograph disappears, so over the
* hero it is an outlined button and fills in once the bar is there.
*/
.mcb-header__actions .mcb-btn--sm { transition: background .28s var(--mcb-ease), border-color .28s var(--mcb-ease); }
.mcb-home .mcb-header:not(.is-solid) .mcb-header__actions .mcb-btn--sm {
background: transparent;
border: 1px solid rgba(255, 255, 255, .75);
color: #fff;
}
/* The light lockup sits on top of the dark one and fades out as the bar lands. */
.mcb-logo { position: relative; }
.mcb-logo__img--light {
position: absolute;
inset-block-start: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity .28s var(--mcb-ease);
}
.mcb-home .mcb-header:not(.is-solid) .mcb-logo__img--light { opacity: 1; }
/* No JS: .is-solid is never added and --mcb-shrink never moves, so the masthead
would sit transparent forever over a hero that has been pulled up under it.
The document only gains .js once the inline script in header.php runs. */
html:not(.js) .mcb-home .mcb-hero { margin-top: 0; }
html:not(.js) .mcb-home .mcb-hero__inner { padding-top: 0; }
html:not(.js) .mcb-home .mcb-header__bar { background: #fff; }
html:not(.js) .mcb-logo__img--light { display: none; }
.mcb-rent__all { margin: 1.5rem 0 0; }
/* ------------------------------------------------------ search notice -- */
/*
* Reuses the inquiry modal's veil and panel wholesale — it is the same object,
* just carrying a message instead of a form. Only the width and the button row
* differ, so only those are declared.
*/
.mcb-modal__panel--sm { max-width: 34rem; }
.mcb-note__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.6rem;
}
.mcb-note__actions .mcb-btn { flex: 1 1 auto; justify-content: center; }
/* ------------------------------------------------------- agent page -- */
/*
* The facts block. This is what carries the eight agents who have neither a bio
* nor a review: a direct line, an email and a state license number, presented
* as a proper specification rather than as leftovers. A definition list because
* that is genuinely what it is, which also gives screen readers the pairing.
*/
.mcb-agentfacts {
display: grid;
gap: .85rem 2rem;
margin: 1.75rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--mcb-line);
}
@media (min-width: 560px) {
.mcb-agentfacts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.mcb-agentfacts dt {
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-muted);
}
.mcb-agentfacts dd {
margin: .3rem 0 0;
font-family: var(--mcb-display);
font-size: 1.02rem;
color: var(--mcb-ink);
/* License numbers and long emails must not push the column open. */
overflow-wrap: anywhere;
}
.mcb-agentfacts a { color: var(--mcb-accent); }
.mcb-agentfacts a:hover { text-decoration: underline; }
.mcb-agent__actions {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: 1.9rem;
}
/* The monogram at portrait size, for an agent with no headshot yet. */
.mcb-agentcard__initials--lg {
border-radius: 8px;
font-size: clamp(3.5rem, 9vw, 6rem);
letter-spacing: .04em;
}
/* ------------------------------------------------- review attribution -- */
.mcb-quote__via--google {
display: inline-flex;
align-items: center;
gap: .32em;
}
/* Sized in em so the mark tracks the caption rather than being pinned to a
pixel size that stops matching the moment the type scale changes. */
.mcb-gmark {
width: 1em;
height: 1em;
flex-shrink: 0;
/* The optical center of the G sits slightly above the text baseline. */
transform: translateY(.04em);
}
.mcb-quote__via--google > span { line-height: 1; }
/* ----------------------------------------------------------- agent cards -- */
/*
* The team slider's card. Narrower than a property card on purpose — a
* portrait, a name and a role is the whole job, and fitting more of them in
* view is what makes fifteen people read as a roster rather than a queue.
*/
.mcb-slider--team .mcb-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }
@media (min-width: 900px) {
.mcb-slider--team .mcb-slider__track { grid-auto-columns: calc((100% - 5rem) / 5); }
}
.mcb-agentcard {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 8px;
overflow: hidden;
color: inherit;
transition: transform .25s var(--mcb-ease), box-shadow .25s var(--mcb-ease), border-color .25s var(--mcb-ease);
}
.mcb-agentcard:hover {
transform: translateY(-4px);
border-color: var(--mcb-brand-lt);
box-shadow: var(--mcb-shadow);
}
.mcb-agentcard__photo { position: relative; background: var(--mcb-sky); }
/* The monogram, for anyone whose headshot has not arrived. */
.mcb-agentcard__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
font-family: var(--mcb-display);
font-size: 2.4rem;
color: var(--mcb-brand);
background: var(--mcb-sky);
}
.mcb-agentcard__body { padding: .95rem 1rem 1.15rem; }
.mcb-agentcard__name {
display: block;
font-family: var(--mcb-display);
font-size: 1.12rem;
line-height: 1.2;
color: var(--mcb-ink);
}
.mcb-agentcard__role {
display: block;
margin-top: .3rem;
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mcb-muted);
}
.mcb-agentcard:hover .mcb-agentcard__name { color: var(--mcb-accent); }
/* --------------------------------------------------------------- filters -- */
.mcb-filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--mcb-line);
}
.mcb-filter {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .9rem;
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 999px;
color: var(--mcb-body);
font-family: var(--mcb-display);
font-size: .78rem;
font-weight: 400;
transition: background .2s var(--mcb-ease), border-color .2s var(--mcb-ease), color .2s var(--mcb-ease);
}
.mcb-filter:hover { border-color: var(--mcb-deep); color: var(--mcb-deep); }
.mcb-filter.is-on {
background: var(--mcb-deep);
border-color: var(--mcb-deep);
color: #fff;
}
.mcb-filter__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
height: 1.35rem;
padding-inline: .3rem;
border-radius: 999px;
background: var(--mcb-tint-2);
color: var(--mcb-muted);
font-size: .68rem;
}
.mcb-filter.is-on .mcb-filter__n { background: rgba(255, 255, 255, .18); color: #fff; }
/* --------------------------------------------------------------- headshot -- */
/* Her headshot is square, so it gets a square frame. It was being forced into a
3/4 portrait, which cropped it and blew it up far larger than the section
needed. Capped so it sits beside the text rather than dominating it. */
.mcb-figure--square { aspect-ratio: 1 / 1; }
.mcb-split__media--headshot { max-width: 26rem; margin-inline: auto; }
/* A placeholder that fills whatever frame it lands in — the card, the slider,
the single-property hero — rather than collapsing to its min-height. */
.mcb-figure--empty.mcb-figure--wide,
.mcb-figure--empty.mcb-figure--hero,
.mcb-figure--empty.mcb-figure--square { min-height: 0; }
.mcb-listing__repd {
margin: 0 0 .4rem;
font-family: var(--mcb-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mcb-accent);
}
/* ------------------------------------------------------- hero phone, card -- */
.mcb-hero__phone {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.35rem;
font-family: var(--mcb-display);
font-size: 1.15rem;
font-weight: 400;
color: #fff;
}
.mcb-hero__phone .mcb-icon { color: var(--mcb-accent-lt); }
.mcb-hero__phone:hover { color: var(--mcb-accent-lt); }
.mcb-hero__phone + .mcb-hero__note { margin-top: .5rem; }
/* The representation line is the reason a sold listing is worth showing. */
.mcb-card__repd {
margin-bottom: .5rem;
font-family: var(--mcb-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--mcb-accent);
}
/* ------------------------------------------------------- mobile call button -- */
/* Desktop already carries the number in the utility bar, so this is the phone's
home only on the sizes where that bar is hidden. */
.mcb-callnow { display: none; }
@media (max-width: 1040px) {
.mcb-callnow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
white-space: nowrap;
/* Flat fill, not the metal gradient the other gold buttons use. That
gradient runs dark at the corners and bright through the middle, which
is fine across a 200px button and reads as a smudge across a 43px one. */
background: var(--mcb-accent-lt);
background-image: none;
border-color: var(--mcb-accent-lt);
color: var(--mcb-deep);
/* A real touch target. It was 43x39 — under the 44px minimum and visibly
squatter than the burger sitting next to it. */
min-height: 44px;
min-width: 44px;
padding: .6rem 1rem;
border-radius: 6px;
}
.mcb-callnow:hover {
background: var(--mcb-accent-mid);
background-image: none;
border-color: var(--mcb-accent-mid);
color: var(--mcb-deep);
box-shadow: none;
}
/* The brand navy, so it picks up the logo sitting beside it. */
.mcb-callnow .mcb-icon { color: var(--mcb-deep); width: 17px; height: 17px; }
}
/* Below this the words go and the icon carries it — at 380px a labeled button
plus a burger leaves the logo nowhere to sit. */
@media (max-width: 400px) {
/* Icon only, and square — a squashed rectangle with a glyph floating in it
is what made this look broken. */
.mcb-callnow span { display: none; }
.mcb-callnow { padding: 0; width: 44px; height: 44px; }
}
.mcb-hero__phone strong { color: var(--mcb-accent-lt); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
.mcb-hero__phone { font-size: 1.02rem; align-items: flex-start; }
.mcb-hero__phone .mcb-icon { margin-top: .3rem; }
}
/* ------------------------------------------------------------ team roster -- */
/* Six members, so a grid rather than six full-width rows. The broker keeps the
wide treatment because she is the reason to choose the brokerage. */
@media (min-width: 860px) {
.mcb-team { grid-template-columns: 1fr 1fr; }
.mcb-team .mcb-member:first-child { grid-column: 1 / -1; }
.mcb-team .mcb-member:not(:first-child) { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
/* A two-person brokerage. :nth-child(2):last-child matches only when the
second member is also the final one, so a roster of two gets two full
cards instead of one wide card and one stranded half beside a hole. Three
or more still pair up as before. */
.mcb-team .mcb-member:nth-child(2):last-child {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
}
.mcb-member__license {
margin: .75rem 0 0;
font-family: var(--mcb-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-faint);
}
/* A card with no bio should sit tight rather than leave the gap the bio left. */
.mcb-member__bio:empty { display: none; }
/* A heading section immediately above another section doubles its vertical
padding, which reads as a missing block rather than as breathing room. */
.mcb-section--flush { padding-bottom: 0; }
.mcb-head--tight { margin-bottom: 0; }
/* ------------------------------------------------------- listing address plate --
Stands in for the listing photo. See mcb_listing_media() for why most synced
listings arrive without one. It has to read as a designed panel, because on
this site it is the common case. */
.mcb-plate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .85rem;
padding: 2rem 1.5rem;
text-align: center;
background:
repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .022) 14px 28px),
linear-gradient(160deg, #082041 0%, var(--mcb-deep) 55%, #061730 100%);
}
.mcb-plate__addr {
font-family: var(--mcb-display);
font-size: clamp(1.05rem, 1.9vw, 1.45rem);
font-weight: 400;
line-height: 1.25;
color: #fff;
text-wrap: balance;
}
.mcb-plate__rule {
width: 42px;
height: 2px;
background: var(--mcb-accent);
}
.mcb-plate__city {
font-family: var(--mcb-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .62);
}
/* The hero on a single listing is far taller than a card, so it needs room. */
.mcb-figure--hero.mcb-plate { min-height: clamp(15rem, 34vw, 26rem); }
.mcb-foot__blurb--sm { font-size: .82rem; }
/* ------------------------------------------------------------ hero search --
This brokerage is on the IDX plan, so the search sits inside the hero. It has
to stay legible over a photograph, which the page variant never has to do:
the panel is translucent-dark rather than white, and the labels invert. */
.mcb-hero__search { margin: 1.75rem 0 1.25rem; max-width: 62rem; }
/*
* The hero search panel: light frosted glass over the photograph.
*
* It was a 62% warm-charcoal veil carried over from the previous client, which
* on a blue-green aerial read as a dirty smudge. This is the opposite — a light
* material that lifts the photograph rather than covering it.
*
* Two things make it read as glass rather than as a flat white box: a real blur
* doing the work at low opacity, and `saturate()`, which keeps the water and
* the greenery showing through in color instead of going milky gray. The inner
* hairline is the classic glass edge — a light top rim catching the light.
*
* The panel is light, so the labels flip to ink. That is the whole reason the
* old rules cannot simply have their alpha lowered: white-on-light would fail.
*/
.mcb-search--hero {
background: rgba(255, 255, 255, .52);
border-color: rgba(255, 255, 255, .65);
box-shadow:
0 18px 44px rgba(5, 19, 39, .28),
inset 0 1px 0 rgba(255, 255, 255, .55);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.mcb-search--hero .mcb-search__field label { color: var(--mcb-ink); }
/*
* The fields stay solidly white so they still read as things you type into —
* on a translucent panel an equally translucent input disappears into it. The
* hairline border is what separates white-on-light; without it the fields merge
* into the glass.
*/
.mcb-search--hero .mcb-search__field input,
.mcb-search--hero .mcb-search__field select {
background: #fff;
border-color: rgba(5, 19, 39, .14);
}
.mcb-search--hero .mcb-search__field input::placeholder { color: var(--mcb-faint); }
.mcb-search--hero .mcb-search__more summary { color: var(--mcb-body); }
.mcb-search--hero .mcb-search__more summary:hover { color: var(--mcb-accent); }
/*
* Safari on iOS honours backdrop-filter; a browser that does not would render a
* 52%-white box with no blur, which is legible but flat. Give those a more
* opaque panel so the type never sits on a half-transparent ground.
*/
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mcb-search--hero { background: rgba(255, 255, 255, .88); }
}
/* The disclosure and the result line. */
.mcb-search__more { margin-top: .8rem; }
.mcb-search__more summary {
font-family: var(--mcb-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--mcb-muted);
cursor: pointer;
}
.mcb-search__row--more {
grid-template-columns: repeat(3, 1fr);
margin-top: .75rem;
}
@media (max-width: 900px) { .mcb-search__row--more { grid-template-columns: 1fr 1fr; } }
.mcb-search__result {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .75rem;
margin: 1rem 0 0;
font-size: .95rem;
color: var(--mcb-body);
}
.mcb-search__clear {
font-family: var(--mcb-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--mcb-accent);
}
/* ============================================================= markets === */
/*
* The market grid.
*
* Each card is an area's own boundary, drawn from OpenStreetMap geometry —
* see TYN_Areas. The shape is the picture, so it gets the space a photograph
* would and the caption sits under it rather than over it.
*
* Cards whose outline has not been cached yet carry .mcb-market--noshape and
* simply center their caption. That has to look deliberate, because on a cold
* cache it is what every card looks like.
*/
.mcb-markets__grid {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1040px) { .mcb-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .mcb-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
.mcb-market__link {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
height: 100%;
padding: 1.5rem 1rem 1.25rem;
/* White, not the cream ground — a cream card on a cream page has no edge. */
background: var(--mcb-white);
border: 1px solid var(--mcb-line);
border-radius: 14px;
text-align: center;
text-decoration: none;
transition: border-color .22s var(--mcb-ease), transform .22s var(--mcb-ease), box-shadow .22s var(--mcb-ease);
}
.mcb-market__link:hover {
border-color: var(--mcb-accent);
transform: translateY(-3px);
box-shadow: 0 16px 34px -20px rgba(16, 10, 12, .4);
}
.mcb-market__shape {
display: block;
width: 96px; height: 96px;
margin-bottom: .55rem;
}
/* The silhouette itself. Filled rather than stroked: at this size a 1px
outline of a municipal boundary is a gray haze, and a solid shape reads as
a place. */
.mcb-market__shape .mcb-shape { width: 100%; height: 100%; display: block; }
.mcb-market__shape .mcb-shape path {
fill: var(--mcb-accent);
opacity: .16;
transition: opacity .22s var(--mcb-ease);
}
.mcb-market__link:hover .mcb-shape path { opacity: .34; }
.mcb-market__name {
font-family: var(--mcb-display);
font-size: 1.2rem;
line-height: 1.15;
color: var(--mcb-ink);
}
.mcb-market__note {
color: var(--mcb-muted);
font-size: .82rem;
line-height: 1.45;
}
.mcb-market__cta {
margin-top: .55rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcb-accent);
opacity: 0;
transform: translateY(3px);
transition: opacity .22s var(--mcb-ease), transform .22s var(--mcb-ease);
}
.mcb-market__link:hover .mcb-market__cta,
.mcb-market__link:focus-visible .mcb-market__cta { opacity: 1; transform: none; }
/* Keep the caption vertically centered when there is no shape to sit under. */
.mcb-market--noshape .mcb-market__link { justify-content: center; padding-block: 2.25rem; }
/* ================================================================ pair === */
.mcb-pair__photo {
margin: 2.5rem auto 0;
max-width: 900px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 26px 60px -34px rgba(16, 10, 12, .55);
}
.mcb-pair__photo img { display: block; width: 100%; height: auto; }
.mcb-pair__grid {
margin-top: 2.25rem;
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
max-width: 900px;
margin-inline: auto;
}
@media (max-width: 780px) { .mcb-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.mcb-pair__name { margin: 0 0 .15rem; font-family: var(--mcb-display); font-size: 1.5rem; color: var(--mcb-ink); }
.mcb-pair__role {
margin: 0 0 .7rem;
font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--mcb-accent);
}
.mcb-pair__bio { margin: 0 0 .9rem; color: var(--mcb-body); font-size: .95rem; }
.mcb-pair__more {
font-size: .82rem; font-weight: 600; color: var(--mcb-accent); text-decoration: none;
}
.mcb-pair__more:hover { text-decoration: underline; }
/* ================================================== mobile header controls ==
*
* The call button and the menu button sit next to each other and were built at
* different times, which showed: 44px tall with a 6px radius and a flat red
* fill against roughly 38px with a 4px radius and a hairline border. Two
* controls a thumb-width apart have to look like one set of controls, or the
* masthead reads as unfinished before a word of the site is read.
*
* So the burger is now the same 44px square with the same radius, and it takes
* the hero omnibar's glass — blur plus a desaturating filter, which is what
* keeps the surface neutral over whatever photograph is behind it rather than
* picking up its color. The call button stays solid: these should be the same
* SIZE, not the same weight. Calling is the thing worth doing, and the button
* that does it should be the one with the fill.
*/
.mcb-burger {
width: 44px;
height: 44px;
padding: 0;
display: none;
place-items: center;
border-radius: 6px;
border: 1px solid rgba(5, 19, 39, .12);
background: rgba(255, 255, 255, .55);
-webkit-backdrop-filter: blur(18px) saturate(.6);
backdrop-filter: blur(18px) saturate(.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
transition: background .25s var(--mcb-ease), border-color .25s var(--mcb-ease),
transform .18s var(--mcb-ease);
}
@media (max-width: 1040px) { .mcb-burger { display: grid; } }
/* A press that answers. Nothing else in the masthead moves on tap. */
.mcb-burger:active { transform: scale(.94); }
.mcb-burger__box { width: 18px; }
.mcb-burger__box i { height: 1.5px; border-radius: 1px; }
.mcb-burger__box i + i { margin-top: 4.5px; }
/*
* Over the home hero the header is transparent and the backdrop is a dark
* photograph, so a white glass would be a bright chip on a dark scene and the
* white bars inside it would disappear. Same material, inverted: a dark tint
* with a white hairline, which reads as frosted rather than as a hole.
*/
.mcb-home .mcb-header:not(.is-solid) .mcb-burger {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* Browsers without backdrop-filter get a solid chip instead of a see-through
one — legible either way, which is the only requirement. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mcb-burger { background: rgba(255, 255, 255, .92); }
.mcb-home .mcb-header:not(.is-solid) .mcb-burger { background: rgba(5, 19, 39, .42); }
}
/* The X state fills in, so the control that closes the drawer is unmistakably
the live one while the drawer is open. */
.mcb-burger[aria-expanded="true"],
.mcb-home .mcb-header:not(.is-solid) .mcb-burger[aria-expanded="true"] {
background: var(--mcb-accent-mid);
border-color: var(--mcb-accent-mid);
box-shadow: none;
}
.mcb-burger[aria-expanded="true"] .mcb-burger__box i,
.mcb-home .mcb-header:not(.is-solid) .mcb-burger[aria-expanded="true"] .mcb-burger__box i {
background: #fff;
}
/* ============================================================ drawer entry ==
*
* The drawer was a flat white sheet cross-fading in — correct, and inert. On a
* phone this panel IS the navigation, so it is worth the few frames it takes to
* feel like something opened rather than something appeared.
*
* Three things happen at once. The panel is the same glass as the omnibar and
* the menu button, so the three surfaces are visibly one material. It settles
* down and up to its resting size instead of arriving there. And the links
* arrive in sequence, which is what makes a list read as a list rather than as
* a block of text that faded in.
*
* The stagger is nth-child rather than an inline --i, so this is a stylesheet
* change with no markup behind it and nothing to keep in sync. Eight items is
* more than these menus carry; past that the last ones share the final delay,
* which is the right failure — a ninth link is late, never missing.
*/
.mcb-drawer {
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(30px) saturate(1.1);
backdrop-filter: blur(30px) saturate(1.1);
transform: translateY(-10px) scale(.985);
transform-origin: 50% 0;
transition:
opacity .3s var(--mcb-ease),
visibility .3s var(--mcb-ease),
transform .42s cubic-bezier(.16, .84, .32, 1);
}
.mcb-drawer.is-open { transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mcb-drawer { background: rgba(255, 255, 255, .97); }
}
/* Resting state of every row: down and out. */
.mcb-drawer__nav .mcb-nav__item,
.mcb-drawer__foot > * {
opacity: 0;
transform: translateY(14px);
transition:
opacity .34s var(--mcb-ease),
transform .44s cubic-bezier(.16, .84, .32, 1);
}
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item,
.mcb-drawer.is-open .mcb-drawer__foot > * {
opacity: 1;
transform: none;
}
/* 55ms apart. Fast enough that the whole menu is settled in about a third of a
second, slow enough to read as a sequence rather than a flicker. */
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(1) { transition-delay: .06s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(2) { transition-delay: .115s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(3) { transition-delay: .17s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(4) { transition-delay: .225s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(5) { transition-delay: .28s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(6) { transition-delay: .335s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(7) { transition-delay: .39s; }
.mcb-drawer.is-open .mcb-drawer__nav .mcb-nav__item:nth-child(n+8) { transition-delay: .445s; }
.mcb-drawer.is-open .mcb-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.mcb-drawer.is-open .mcb-drawer__foot > *:nth-child(2) { transition-delay: .455s; }
/* Closing runs immediately and together. A staggered exit makes a menu feel
slow to dismiss, which is the one thing a menu must never feel. */
.mcb-drawer:not(.is-open) .mcb-drawer__nav .mcb-nav__item,
.mcb-drawer:not(.is-open) .mcb-drawer__foot > * { transition-delay: 0s; }
/*
* Honour the OS setting. Someone who has asked for less motion still needs the
* menu, so the panel and the rows still change state — they just do it without
* travelling or waiting their turn.
*/
@media (prefers-reduced-motion: reduce) {
.mcb-drawer,
.mcb-drawer.is-open,
.mcb-drawer__nav .mcb-nav__item,
.mcb-drawer__foot > * {
transform: none;
transition-duration: .01ms;
transition-delay: 0s !important;
}
.mcb-burger { transition-duration: .01ms; }
}
/*
* While the drawer is open the header still floats above it, and over the home
* hero that header is in its light state -- so the white lockup was sitting on
* the drawer's near-white glass and all but disappeared. The dark lockup is
* always rendered underneath it, so fading the light one out is the whole fix.
*
* Driven by a body class rather than :has() so it works the same everywhere,
* and kept separate from mcb-locked, which the inquiry modal also sets --
* that one opens over a dark scrim where the light logo is correct.
*/
body.mcb-nav-open .mcb-logo__img--light,
body.mcb-nav-open.mcb-home .mcb-header:not(.is-solid) .mcb-logo__img--light { opacity: 0; }
/* ============================================== the shore rule, repeated ==
*
* One motif carries the whole palette: a four-part bar under every section
* heading, running the coast from the water to the dune — Atlantic teal, surf
* aqua, sunset coral, sea-grass.
*
* This is the difference between a colorful site and a site that could not
* pick a color. Five hues scattered across five unrelated components reads as
* indecision; the same five in one shape, repeated on every heading, reads as
* a brand. Yessenia Storing's pine / sandstone / red heading rule is the same
* idea, and themes/CLAUDE.md trap 12 is the rule that produced it: the lockup
* gets a short two-tone rule carrying the brand colors, never a monogram.
*
* The colors in it are FILLS. Aqua at 2.4:1 and sea-grass at 2.8:1 could not
* carry a word, and in a 3px bar they never have to.
*/
.mcb-rule {
/* Four stops, hard-edged, no blending — gradients between these hues go
muddy through the teal/coral midpoint. Widened to 72px so four bands are
each still legible rather than four slivers. */
width: 72px;
background: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%);
box-shadow: inset 0 0 0 1px rgba(5, 19, 39, .07);
}
/*
* Coral is the call to action, teal is the furniture.
*
* The gradient here was three hardcoded hexes of flag red (#8E1B29 / #C6293C /
* #B22234) left over from the theme this was copied from. Swapping the :root
* tokens did not touch them and a grep for the old client's NAME did not find
* them either — this is trap 16 exactly, and it survived until the rendered
* page was sampled pixel by pixel and the button came back #AF363F on a site
* with no crimson in its palette.
*
* Sunset coral is 4.1:1 on the cream ground: right for a button, and it is the
* only warm thing on a mostly teal-and-sand page, so it is unmistakably the
* thing to press.
*/
.mcb-btn--accent {
background: linear-gradient(135deg, var(--mcb-coral-dk) 0%, var(--mcb-coral-br) 58%, var(--mcb-coral) 100%);
border-color: transparent;
color: #fff;
}
.mcb-btn--accent:hover {
background: linear-gradient(135deg, var(--mcb-coral-dk) 0%, var(--mcb-coral-br) 58%, var(--mcb-coral) 100%);
filter: brightness(1.07);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 26px -12px rgba(176, 82, 47, .55);
}
/* The same four-part shore rule the hero closes on, above the footer — so the
page opens and closes on the same motif that sits under every heading. */
.mcb-foot::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
z-index: 2;
background: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%);
}
/* The stat band gets the full shore rule as its top edge, so the credentials
strip reads as a ribbon rather than a gray band. */
.mcb-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%) 1; }
/* Eyebrows run teal, not coral. Coral is reserved for the thing to press —
spending it on every section label is what makes an accent stop working. */
.mcb-eyebrow:not(.mcb-eyebrow--light) { color: var(--mcb-brand); }
.mcb-nav__list > li > a::after { background: var(--mcb-coral); }
/* The hero closes on the shore rule, full width — the same four colors in the
same order as the bar under every heading and in the favicon. */
.mcb-hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 5px;
z-index: 3;
background: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%);
}
/* One red button state, on the primary call to action only. */
.mcb-btn--accent:hover {
background: var(--mcb-red);
border-color: var(--mcb-red);
color: #fff;
}
/* The portrait frame follows the photograph rather than imposing a square on
it — his headshot is 4:5 and a square crop takes off his hair and his arms. */
.mcb-split__media--portrait { max-width: 24rem; margin-inline: auto; }
.mcb-figure--portrait { aspect-ratio: auto; }
.mcb-figure--portrait img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border-radius: 12px;
}
@media (max-width: 900px) {
.mcb-split__media--portrait { max-width: 19rem; }
}
/* The brokerage mark in the footer. White artwork on the near-black ground it
was recolored for; capped so it sits under his own name rather than beside
it, which is the way the relationship actually reads. */
.mcb-foot__firmmark {
display: block;
width: auto;
max-width: 220px;
height: auto;
margin-top: 1.5rem;
opacity: .92;
}
@media (max-width: 560px) { .mcb-foot__firmmark { max-width: 180px; } }
/* ================================================ the hero video loop ==
*
* The poster is a real ![]()
so it paints with the page; the video fades in
* over it only once it can actually play, or the fade shows a black box while
* the first frames arrive.
*/
.mcb-hero__poster,
.mcb-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
.mcb-hero__video {
opacity: 0;
transition: opacity .9s var(--mcb-ease);
pointer-events: none;
}
.mcb-hero__video.is-ready { opacity: 1; }
/*
* At 900px and under the swaps in hero-mobile.jpg — the One Wilshire
* dusk crop, 1200x1600, pink sky at the top and dark towers below. Held at
* 48% so the type sits over the towers rather than the sky; pulled further up
* and the eyebrow lands on the brightest pink in the frame.
*
* And the phone gets its OWN scrim (trap 27). On a phone the copy runs the
* full width, so the desktop's left-hand horizontal gradient does nothing for
* it, and the eyebrow at the top of the column sits over the brightest band of
* sky. Measured at 430px with hero-contrast.py: without this the eyebrow is
* 4.51:1 against a 4.5 requirement and the headline 3.38:1 against 3 — both
* technically passes and both one brighter frame away from failing.
*/
@media (max-width: 900px) {
.mcb-hero__poster { object-position: 60% 30%; }
.mcb-hero__scrim {
background:
linear-gradient(to bottom, rgba(16, 18, 22, .26) 0%, rgba(16, 18, 22, .30) 11%, rgba(16, 18, 22, .56) 20%, rgba(16, 18, 22, .54) 80%, rgba(16, 18, 22, .44) 100%);
}
}
/* ==================================================== the floating call ==
*
* Red, white and blue rather than a single brand color: a white pill with a
* navy label, an Old Glory red icon plate, and the three-part band along the
* bottom edge that the hero and the footer also carry. White is the ground
* because the pill sits over photographs and a navy pill on a navy-scrimmed
* hero disappears.
*/
.mcb-callbar {
position: fixed;
right: clamp(.9rem, 2vw, 1.5rem);
bottom: clamp(.9rem, 2vw, 1.5rem);
z-index: 80;
}
.mcb-callbar__call {
position: relative;
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .7rem 1.15rem .8rem .7rem;
background: #fff;
border-radius: 999px;
box-shadow: 0 14px 34px -12px rgba(5, 19, 39, .55), 0 2px 6px rgba(5, 19, 39, .16);
text-decoration: none;
overflow: hidden;
transition: transform .22s var(--mcb-ease), box-shadow .22s var(--mcb-ease);
}
.mcb-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(5, 19, 39, .6); }
/* The flag band, along the bottom edge of the pill. */
.mcb-callbar__call::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%);
}
.mcb-callbar__ico {
display: grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--mcb-red);
color: #fff;
}
.mcb-callbar__ico svg { width: 17px; height: 17px; }
.mcb-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.mcb-callbar__txt strong {
font-family: var(--mcb-display);
font-size: .95rem;
font-weight: 400;
color: var(--mcb-brand);
}
.mcb-callbar__txt em {
font-style: normal;
font-size: .82rem;
font-weight: 600;
color: var(--mcb-red);
letter-spacing: .01em;
}
/* ================================================ mobile: logo and hero ==
*
* The lockup is stacked, so the same height that reads well on a desktop bar
* swallows a phone masthead.
*/
@media (max-width: 720px) {
/*
* The masthead overflowed: measured at a 500px viewport the burger's right
* edge sat at 521px, so scrollWidth beat clientWidth by 21px and the button
* was partly off-screen. Logo 290 + actions 187 does not fit in 500.
*
* The header's Call Now is what goes. The floating pill carries the number
* on every screen and is closer to the thumb, so a second call control in
* the masthead was buying nothing and costing the burger its place.
*/
.mcb-header__actions .mcb-callnow { display: none; }
.mcb-header__inner { gap: .75rem; }
/*
* Size the logo through the tokens, not with height:auto.
*
* The height is a calc that interpolates on --mcb-shrink, which is what
* makes the masthead shrink as you scroll. Overriding it with height:auto
* — which an earlier pass here did — pins the logo at one size and quietly
* removes the shrink on phones, where the bar can least afford the room.
* max-width stays only as a guard against a very wide lockup.
*/
/*
* Adam, 2026-09-23: bigger on mobile. 44px in a 96px bar left the lockup
* looking apologetic — and this lockup is a WORDMARK over a letterspaced
* subline (trap 12), so the subline is the part that dies first when the
* whole thing shrinks. 62px puts "COLDWELL BANKER ENVISION" back at a
* readable size, which matters here beyond taste: California wants the
* responsible broker's identity on the first point of contact.
*
* Room check at 390px: the file is 827x276, so 62px tall is 186px wide.
* 186 + .75rem gap + a 44px burger + two 1.25rem gutters = 282 of 390.
*/
:root { --mcb-logo-max: 62px; --mcb-logo-min: 42px; }
.mcb-logo--header .mcb-logo__img { max-width: 58vw; }
}
/* ------------------------------------------- drawer: is-open, and only that --
*
* `.mcb-nav__item:focus-within > .mcb-nav__sub` is (0,3,0) and the drawer's own
* collapsed rule is (0,2,0), so focus-within wins inside the drawer too. On a
* phone the tapped link keeps focus, which pinned the section open — the first
* tap worked and the section could then never be collapsed again.
*
* Hover and focus-within are a desktop affordance. In the drawer the only thing
* that opens a section is is-open, set by the tap handler.
*/
.mcb-drawer__nav .mcb-nav__item:hover > .mcb-nav__sub,
.mcb-drawer__nav .mcb-nav__item:focus-within > .mcb-nav__sub {
opacity: 0;
max-height: 0;
padding-bottom: 0;
}
.mcb-drawer__nav .mcb-nav__item.is-open > .mcb-nav__sub,
.mcb-drawer__nav .mcb-nav__item.is-open:hover > .mcb-nav__sub,
.mcb-drawer__nav .mcb-nav__item.is-open:focus-within > .mcb-nav__sub {
opacity: 1;
max-height: 22rem;
padding-bottom: .6rem;
}
/* ================================================ no dark bands anywhere ==
*
* Adam asked for dark, was shown dark, rejected it — and then rejected
* light-with-dark-bands as still too dark (memory: feedback_dark_themes_too_dark).
* The settled answer for this lineage is FULLY light, so the one remaining
* near-black band on the page is converted here rather than by editing the
* template that asks for it. Keeping the `--dark` class name means the
* markup and every sibling theme still read the same; only what it means
* changed.
*
* It still has to be a BAND — a page of unbroken cream has no rhythm. So it
* becomes the most saturated light thing on the site: a pale-aqua-to-sand
* wash, edged top and bottom with the shore rule, carrying ink type.
*/
.mcb-section--dark {
background: linear-gradient(168deg, var(--mcb-surf-pale) 0%, var(--mcb-shell) 46%, var(--mcb-sand) 100%);
color: var(--mcb-body);
position: relative;
}
.mcb-section--dark::before,
.mcb-section--dark::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%);
}
.mcb-section--dark::before { top: 0; }
.mcb-section--dark::after { bottom: 0; }
.mcb-section--dark h1,
.mcb-section--dark h2,
.mcb-section--dark h3 { color: var(--mcb-ink); }
/* The creed sat white-on-near-black. Same hierarchy, inverted. */
.mcb-creed__goal { color: var(--mcb-ink); }
.mcb-creed__close { color: var(--mcb-brand); font-weight: 600; }
.mcb-creed__attrib { color: var(--mcb-muted); }
.mcb-creed__call { color: var(--mcb-body); }
.mcb-creed__call strong,
.mcb-creed__call .mcb-icon { color: var(--mcb-brand); }
.mcb-creed__call:hover { color: var(--mcb-ink); }
/* ======================================= the town grid carries the thesis ==
*
* The whole site argues that Cape May County is two markets. The eight-town
* grid is where that is easiest to SHOW rather than state: the first four are
* barrier islands and the last four are the mainland behind them, so the
* islands are washed in surf aqua and the mainland in sand. Read the grid
* and the split explains itself before the copy does.
*
* It also fixes a real flatness problem. These cards were white on cream with
* a hairline border and a faint map outline, and on a page sold on its color
* they were the largest and dullest block in it.
*
* The wash is a tint behind the card, never behind the text: the name and note
* keep ink and body colors at full contrast on a ground no darker than 8%.
*/
.mcb-market:nth-child(-n+4) .mcb-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, var(--mcb-surf-pale) 100%);
border-color: #CED4DD;
}
.mcb-market:nth-child(n+5) .mcb-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, #F7EEEA 100%);
border-color: #EBD4CB;
}
/* A color chip on the top edge of every card — aqua for an island, sand-deep
for the mainland — so the grouping survives at phone width where the cards
stack into a single column and the two-by-four reading is lost. */
.mcb-market__link { position: relative; overflow: hidden; }
.mcb-market__link::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}
.mcb-market:nth-child(-n+4) .mcb-market__link::before { background: var(--mcb-surf); }
.mcb-market:nth-child(n+5) .mcb-market__link::before { background: var(--mcb-sand-dp); }
.mcb-market:nth-child(-n+4) .mcb-market__link:hover { border-color: var(--mcb-surf-dk); }
.mcb-market:nth-child(n+5) .mcb-market__link:hover { border-color: var(--mcb-dune-dk); }
/* The map outline was a pale gray wash that read as a smudge on three cards
and was invisible on the five whose boundary never resolved. Give it the
band's own color so it reads as intentional artwork either way. */
.mcb-market:nth-child(-n+4) .mcb-market__shape svg * { fill: var(--mcb-surf); opacity: .5; }
.mcb-market:nth-child(n+5) .mcb-market__shape svg * { fill: var(--mcb-sand-dp); opacity: .62; }
/* ------------------------------------------------- the closer, also light --
*
* Same call as .mcb-section--dark above: this was a near-black block sitting
* directly on top of an already-dark footer, which stacked into roughly a
* third of the page being dark on a site briefed as fully light. It keeps its
* weight by being the most saturated light band instead — teal-tinted, edged
* with the shore rule — so the eye still stops on it.
*/
.mcb-closer {
background: linear-gradient(168deg, var(--mcb-surf-pale) 0%, var(--mcb-shell) 52%, var(--mcb-sand) 100%);
color: var(--mcb-body);
border-top: 4px solid transparent;
border-image: linear-gradient(90deg,
var(--mcb-brand) 0%, var(--mcb-brand) 25%,
var(--mcb-surf) 25%, var(--mcb-surf) 50%,
var(--mcb-coral) 50%, var(--mcb-coral) 75%,
var(--mcb-dune) 75%, var(--mcb-dune) 100%) 1;
}
.mcb-closer::before {
background: radial-gradient(circle, rgba(30, 140, 143, .16) 0%, transparent 62%);
}
.mcb-closer__title { color: var(--mcb-ink); }
.mcb-closer__lede { color: var(--mcb-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.mcb-closer .mcb-eyebrow { color: var(--mcb-brand); }
/* --------------------------------------------------- footer contrast fixes --
*
* scripts/contrast-audit.js checked 48 elements on the home page and failed
* three, all in the footer and all marginal: the two column headings at
* 4.27:1 and the phone number at 4.32:1, against 4.5:1 required. Marginal is
* still failing, and these are small text on a dark ground, which is the
* combination people actually struggle with.
*/
.mcb-foot__h { color: rgba(255, 255, 255, .62); }
.mcb-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }
/* The floating call pill's number sat on --mcb-coral, which is 4.32:1 on the
pill's white ground — right for a button fill, wrong for 13px text. The
darker coral is 5.2:1 and is visually the same color at this size. */
.mcb-callbar__txt em { color: var(--mcb-coral-dk); }
/* The closer's secondary button was .mcb-btn--ghost-light: a white outline
with white type, drawn for the near-black band this section used to be. On
the light band it is now, it was a pale ghost on cream — present, rendered,
effectively invisible. Same class of mistake as trap 4. Inside the closer it
becomes a teal outline instead. */
.mcb-closer .mcb-btn--ghost-light {
border-color: var(--mcb-brand);
color: var(--mcb-brand);
}
.mcb-closer .mcb-btn--ghost-light:hover {
background: var(--mcb-brand);
border-color: var(--mcb-brand);
color: #fff;
}
/* "1 Atlantic Avenue, Ocean / City, NJ 08226" — the footer column is narrow
enough to break the town in half. Keep the city-state-zip together. */
.mcb-foot__addr { text-wrap: balance; }
/* The license line under an agent's name was --mcb-faint, which is 2.7:1 on
the card — fine as a decorative gray, and this is not decorative. California
(and most states) require the number to be legible in advertising. */
.mcb-member__license { color: var(--mcb-muted); }
/* === upgrade-lineage: frames and figures === */
/*
* Added by scripts/upgrade-lineage.py. See that file for why each exists.
*/
/* A transparent GROUP cutout: wide, anchored to the bottom of a soft brand
panel, never cropped. */
.mcb-split__media--team { max-width: none; width: 100%; }
.mcb-figure--team {
aspect-ratio: auto;
margin: 0;
padding: 1.5rem 1rem 0;
border-radius: 16px;
background: linear-gradient(180deg, var(--mcb-shell) 0%, var(--mcb-tint-2) 100%);
overflow: hidden;
position: relative;
}
.mcb-figure--team img {
display: block; width: 100%; height: auto;
object-fit: contain; object-position: center bottom;
}
/* NO HEADSHOT: a photograph of the market in the agent's slot. Cropped to a
calm landscape, because it is a place and cropping a place costs nothing —
the opposite rule from a face. */
.mcb-split__media--scene { max-width: none; width: 100%; }
.mcb-figure--scene {
aspect-ratio: 4 / 3;
margin: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--mcb-shadow-lg);
}
.mcb-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figures set large; word labels untouched. */
.mcb-creds__label--num {
font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
line-height: 1;
letter-spacing: -.01em;
color: var(--mcb-brand);
}
.mcb-creds__label--num + .mcb-creds__note {
margin-top: .55rem;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
}
/* A small SQUARE headshot (homes.com serves 300x300): centered and capped so it
is never enlarged past its source, instead of cropped into a portrait frame
that loses the sides of the face. 'shape' => 'square' in team(). */
.mcb-split__media--square { max-width: 22rem; margin-inline: auto; }
.mcb-split__media--square .mcb-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .mcb-split__media--square { max-width: 17rem; } }
/* === install-features: feature sections === */
/*
* Added by scripts/install-features.py. Tones use the theme's four roles, so
* each site's sections come out in its own palette.
*/
.mcb-tone--brand { --tone: var(--mcb-brand); --tone-pale: var(--mcb-brand-pale); }
.mcb-tone--coral { --tone: var(--mcb-coral); --tone-pale: var(--mcb-coral-pale); }
.mcb-tone--surf { --tone: var(--mcb-surf-dk); --tone-pale: var(--mcb-surf-pale); }
.mcb-tone--dune { --tone: var(--mcb-dune-dk); --tone-pale: var(--mcb-dune-pale); }
.mcb-feat__note { max-width: 44rem; margin: 2.25rem auto 0; text-align: center; color: var(--mcb-muted); font-size: .95rem; }
/* journey: a line that draws, stops that pop in turn */
.mcb-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.mcb-journey::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--mcb-brand), var(--mcb-coral), var(--mcb-dune), var(--mcb-surf)); transform-origin: left center; }
.mcb-journey__stop { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.mcb-journey__dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--mcb-white);
border: 3px solid var(--tone); color: var(--tone); font-weight: 700; font-size: .85rem; position: relative; z-index: 1; box-shadow: 0 6px 18px -10px var(--tone); }
.mcb-journey__when { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 600; margin-top: .35rem; }
.mcb-journey__label { font-family: var(--mcb-display); font-size: 1.3rem; line-height: 1.15; color: var(--mcb-ink); font-weight: 400; }
.mcb-journey__body { color: var(--mcb-body); font-size: .95rem; line-height: 1.55; }
/* bento: colored tiles, one big counting number */
.mcb-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mcb-bento__tile { position: relative; border-radius: 18px; padding: 1.6rem 1.5rem 1.7rem; background: var(--tone-pale); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
overflow: hidden; transition: transform .35s var(--mcb-ease), box-shadow .35s var(--mcb-ease); }
.mcb-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.mcb-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--mcb-shadow-lg); }
.mcb-bento__tile--wide { grid-column: span 2; }
.mcb-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.mcb-bento__tile--big::after { display: none; }
.mcb-bento__tile--big .mcb-bento__title, .mcb-bento__tile--big .mcb-bento__body { color: #fff; }
.mcb-bento__big { display: block; font-family: var(--mcb-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.mcb-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone); font-weight: 700; margin-bottom: .9rem; }
.mcb-bento__title { font-family: var(--mcb-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--mcb-ink); font-weight: 400; }
.mcb-bento__body { margin: 0; color: var(--mcb-body); font-size: .95rem; line-height: 1.55; }
/* split: two panels facing each other */
.mcb-splitfeat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.mcb-splitfeat__panel { border-radius: 20px; padding: 2rem 1.9rem; background: var(--tone-pale); border-top: 5px solid var(--tone); }
.mcb-splitfeat__eye { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tone); }
.mcb-splitfeat__title { font-family: var(--mcb-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: .35rem 0 .7rem; color: var(--mcb-ink); font-weight: 400; }
.mcb-splitfeat__body { color: var(--mcb-body); margin: 0 0 1rem; }
.mcb-splitfeat__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mcb-splitfeat__points li { position: relative; padding-left: 1.4rem; color: var(--mcb-body); }
.mcb-splitfeat__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone); }
.mcb-splitfeat__join { align-self: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--mcb-ink); color: #fff; font-family: var(--mcb-display); font-size: 1.25rem; }
/* timeline: years down a drawn line */
.mcb-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.mcb-timeline::before { content: ""; position: absolute; left: 6.2rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, var(--mcb-brand), var(--mcb-coral), var(--mcb-dune), var(--mcb-surf)); transform-origin: top center; }
.mcb-timeline__item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 2.2rem; padding-block: .9rem; position: relative; }
.mcb-timeline__item::before { content: ""; position: absolute; left: 5.85rem; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--mcb-white); border: 3px solid var(--tone); }
.mcb-timeline__when { text-align: right; font-family: var(--mcb-display); font-size: 1.6rem; line-height: 1.2; color: var(--tone); }
.mcb-timeline__card strong { display: block; font-family: var(--mcb-display); font-weight: 400; font-size: 1.3rem; color: var(--mcb-ink); margin-bottom: .25rem; }
.mcb-timeline__card p { margin: 0; color: var(--mcb-body); }
@media (max-width: 900px) {
.mcb-journey { grid-template-columns: 1fr; gap: 1.4rem; padding-left: .2rem; }
.mcb-journey::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 3px; height: auto; transform-origin: top center; }
.mcb-journey__stop { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
.mcb-journey__stop > :not(.mcb-journey__dot) { grid-column: 2; }
.mcb-journey__dot { grid-row: span 3; }
.mcb-bento { grid-template-columns: 1fr 1fr; }
.mcb-splitfeat { grid-template-columns: 1fr; }
.mcb-splitfeat__join { justify-self: center; }
}
@media (max-width: 560px) {
.mcb-bento { grid-template-columns: 1fr; }
.mcb-bento__tile--wide { grid-column: auto; }
.mcb-timeline::before { left: 4.4rem; }
.mcb-timeline__item { grid-template-columns: 3.6rem 1fr; gap: 1.6rem; }
.mcb-timeline__item::before { left: 4.05rem; }
.mcb-timeline__when { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: no-preference) {
html.js .mcb-journey::before { transform: scaleX(0); transition: transform 1.4s var(--mcb-ease) .15s; }
html.js .mcb-journey.is-in::before { transform: scaleX(1); }
html.js .mcb-journey .mcb-journey__stop { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--mcb-ease), transform .6s var(--mcb-ease); transition-delay: calc(.25s + var(--i) * .18s); }
html.js .mcb-journey.is-in .mcb-journey__stop { opacity: 1; transform: none; }
html.js .mcb-journey .mcb-journey__dot { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .18s); }
html.js .mcb-journey.is-in .mcb-journey__dot { transform: none; }
html.js .mcb-timeline::before { transform: scaleY(0); transition: transform 1.6s var(--mcb-ease) .1s; }
html.js .mcb-timeline.is-in::before { transform: scaleY(1); }
html.js .mcb-timeline .mcb-timeline__item { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--mcb-ease), transform .6s var(--mcb-ease); transition-delay: calc(.2s + var(--i) * .2s); }
html.js .mcb-timeline.is-in .mcb-timeline__item { opacity: 1; transform: none; }
html.js .mcb-splitfeat__panel[data-mcb-reveal] { transform: translateX(calc((var(--i) * 2 - 1) * 28px)); }
html.js .mcb-splitfeat__panel[data-mcb-reveal].is-in { transform: none; }
html.js .mcb-splitfeat__join[data-mcb-reveal] { transform: scale(.3) rotate(-90deg); transition-delay: .35s; }
html.js .mcb-splitfeat__join[data-mcb-reveal].is-in { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
html.js .mcb-journey::before { transform: scaleY(0); }
html.js .mcb-journey.is-in::before { transform: scaleY(1); }
/*
* NO SIDEWAYS REVEALS ON A PHONE. Adam, 2026-09-23: "when you scroll on
* mobile itll scroll accidentally to left or right like feeling broken".
*
* This is the cause, and it is in the whole lineage, not just this site.
* The split-feature panels rest at translateX(±28px) until the observer
* adds .is-in. On a desktop the gutter absorbs 28px. At 390px the right
* panel's edge lands at 398 against a 390 viewport, the document gains
* 8px of real horizontal scroll, and — because the panel is only revealed
* once you reach it — the page can be dragged sideways for the whole
* scroll down to it. Ablation: hiding .mcb-splitfeat__panel takes
* documentElement.scrollWidth from 398 straight back to 390.
*
* .mcb-timeline__item has the same translateX(18px) and will do the same
* on any site that uses a timeline feature.
*
* The animation is not worth a broken-feeling page, and the movement
* reads just as well vertically, which is the direction the reader is
* already going.
*/
html.js .mcb-splitfeat__panel[data-mcb-reveal] { transform: translateY(18px); }
html.js .mcb-splitfeat__panel[data-mcb-reveal].is-in { transform: none; }
html.js .mcb-timeline .mcb-timeline__item { transform: translateY(18px); }
html.js .mcb-timeline.is-in .mcb-timeline__item { transform: none; }
}
/*
* THE ROOT RULE THAT USED TO BE HERE WAS WRONG, and it shipped.
*
* `html { overflow-x: clip }` was added on 2026-09-23 as a guard behind the
* split-panel fix (trap 55). Measured on this site at 390px on 2026-09-28:
* at scrollY 1400 the masthead's top was **-1400** — it scrolled away
* entirely. Overflow on the root propagates to the viewport, and clipping
* there breaks `position: sticky` against the viewport just as `hidden` does.
* lashelle-washington hit the identical thing the same week.
*
* The guard belongs on `body`, where this lineage already had `overflow-x:
* hidden` — changed to `clip` above, which keeps the clipping and gives the
* sticky back. Nothing at the root.
*/
/* long reviews: the first 46 words, and the rest in place (never cut off) */
.mcb-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--mcb-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mcb-quote__full[hidden] { display: none; }
/* Four tiles sit 2 x 2; a 'wide' tile would leave a hole in a three-column row. */
@media (min-width: 561px) {
.mcb-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcb-bento:has(> :nth-child(4):last-child) .mcb-bento__tile--wide { grid-column: auto; }
}
/* ------------------------------------------------ accent over photography --
See --mcb-accent-photo at :root. Hero call line and banner eyebrows only;
every other use of --mcb-accent-lt sits on a light wash and keeps the full
turquoise. Measured with hero-contrast.py, not eyeballed. */
/*
* The number itself is WHITE, not the accent.
*
* It sits below the buttons, past the bottom of the scrim's band, over the
* brightest part of a golden-hour skyline. The full turquoise measured 4.75:1
* there and the lifted one measured WORSE — 4.41:1 — because against a bright
* background lifting the foreground closes the gap rather than opening it.
* White is 9.5:1 on the same line, which is what the rest of the sentence
* already is. The accent stays on the icon, where it is decoration.
*/
.mcb-hero__phone strong { color: #fff; }
.mcb-hero__phone .mcb-icon { color: var(--mcb-accent-photo); }
.mcb-hero__phone:hover { color: var(--mcb-accent-photo); }
.mcb-banner .mcb-eyebrow--light { color: var(--mcb-accent-photo); }
/* ------------------------------------------------- the lockup on the sky --
*
* On a phone the masthead sits on the top of hero-mobile.jpg, which for this
* client is a dusk sky — a MID tone, not a dark one. Measured off the rendered
* page, "COLDWELL BANKER ENVISION" in the light lockup came out at 1.8:1
* against it, and no color fixes that: the pale turquoise is 1.8:1, the full
* turquoise 2.1:1 and pure white 1.9:1, because the background sits between
* them. Darkening the sky enough to carry 4.5:1 would take a 62% scrim across
* the masthead strip and cost the picture.
*
* drop-shadow follows the PNG's alpha, so it shadows the letterforms
* themselves and leaves the photograph alone. Two passes: a tight one for the
* edge and a soft wide one for the ground.
*
* Desktop does not need it — the lockup sits in the hero scrim's left-hand
* wash, which is .58 there.
*/
@media (max-width: 900px) {
.mcb-home .mcb-header:not(.is-solid) .mcb-logo__img,
.mcb-home .mcb-header:not(.is-solid) .mcb-logo__img--light {
filter: drop-shadow(0 1px 2px rgba(10, 12, 16, .9))
drop-shadow(0 0 12px rgba(10, 12, 16, .6));
}
}
/* ----------------------------------------- his face on the floating call --
*
* The icon plate becomes a portrait with the phone as a badge, so the control
* reads as a person rather than a support widget. Sized a little larger than
* the plate it replaces (2.35rem → 2.7rem): a face needs more diameter than a
* glyph to be legible, and the pill's text block is tall enough to carry it
* without the pill growing.
*
* The double ring is white-then-navy so the disc separates from the pill AND
* from whatever photograph the pill is floating over.
*
* object-position sits at 50% 22%: the source is a studio head-and-shoulders,
* so pulling the crop up puts his eyes on the disc's center line instead of
* leaving dead gray backdrop above his hair.
*/
.mcb-callbar__ico--face {
position: relative;
width: 2.7rem;
height: 2.7rem;
background: none; /* the plate's terra-cotta fill must not show behind a JPEG */
overflow: visible; /* the badge hangs off the bottom-right corner */
}
.mcb-callbar__face {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
/* No object-position: the source is square and so is the box, so cover
crops nothing and it would be inert. The framing is in the FILE — the
Instagram avatar cropped to its middle 84%, which puts his head across
the disc instead of leaving a ring of gray backdrop at 43px. */
object-fit: cover;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mcb-brand);
}
.mcb-callbar__badge {
position: absolute;
right: -2px;
bottom: -2px;
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--mcb-red);
box-shadow: 0 0 0 2px #fff;
}
.mcb-callbar__badge svg { width: 10px; height: 10px; }
/* .mcb-icon paints every glyph in --mcb-accent-lt, which is not the badge's
fill but is close enough in weight to read as a smudge. White on the
terra cotta is 5.1:1. */
.mcb-callbar__badge .mcb-icon,
.mcb-callbar__badge svg { color: #fff; }
/* The pill's left padding was sized for the 2.35rem plate; the larger disc and
its ring need a hair more room or the ring touches the pill's edge. */
.mcb-callbar__call:has(.mcb-callbar__ico--face) { padding-left: .5rem; }
/* ---- "Experience Matters" -------------------------------------------------
* The section under the hero is named now, not a bare row of figures
* (themes/CLAUDE.md, "The first three sections"). The heading is what makes
* four numbers read as a claim about the agent rather than as a widget, and it
* is what the non-coded template his first fifty clients run has always had.
*
* The band keeps its hairline grid; the head sits above it with air, centered,
* and collapses to the list alone on a phone where the numbers are the point.
*/
.mcb-creds__head {
text-align: center;
padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.mcb-creds__head .mcb-eyebrow { display: block; }
.mcb-creds__title {
margin: .45rem 0 0;
font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
line-height: 1.12;
}
.mcb-creds__list { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 620px) {
.mcb-creds__head { padding-top: clamp(2rem, 8vw, 2.6rem); }
}
/* ---- "How much is your home worth?" --------------------------------------
The address-capture band, ported from his own site (Adam, 2026-09-23).
Copy on the left, one field and a button on the right; it stacks on a phone
with the field first, because on a phone the field IS the section. */
.mcb-valcta__in {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.mcb-valcta__title { margin: .35rem 0 0; }
.mcb-valcta__points {
list-style: none;
margin: 1.4rem 0 0;
padding: 0;
display: grid;
gap: .6rem;
}
.mcb-valcta__points li {
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: 1.02rem;
color: var(--mcb-body);
}
.mcb-valcta__points .mcb-icon { margin-top: .28rem; color: var(--mcb-brand); }
.mcb-valcta__form {
background: #fff;
border: 1px solid var(--mcb-line);
border-radius: 2px;
padding: clamp(1.3rem, 3vw, 2rem);
}
.mcb-valcta__label {
display: block;
font-size: .76rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mcb-muted);
margin-bottom: .6rem;
}
.mcb-valcta__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.mcb-valcta__row input {
flex: 1 1 14rem;
min-width: 0;
padding: .85rem 1rem;
font: inherit;
font-size: 1rem;
color: var(--mcb-ink);
background: var(--mcb-tint);
border: 1px solid var(--mcb-line);
border-radius: 2px;
}
.mcb-valcta__row input:focus-visible {
outline: none;
border-color: var(--mcb-brand);
box-shadow: 0 0 0 3px var(--mcb-brand-pale);
}
.mcb-valcta__row .mcb-btn { flex: 0 0 auto; }
.mcb-valcta__note {
margin: .85rem 0 0;
font-size: .86rem;
color: var(--mcb-muted);
}
@media (max-width: 860px) {
/*
* Copy first, then the field. It shipped the other way round — the form was
* pulled above the heading on the theory that "on a phone the field IS the
* section" — and that lands a phone visitor on a bare address box with the
* question it answers scrolled off underneath it. The heading is what makes
* typing your address make sense, so it goes first (Adam, 2026-09-23).
*/
.mcb-valcta__in { grid-template-columns: 1fr; gap: 1.6rem; }
.mcb-valcta__form { order: 0; }
.mcb-valcta__row .mcb-btn { flex: 1 1 100%; }
.mcb-valcta__points { margin-top: 1.1rem; }
}
/* ------------------------------------------- the call/text consent box ----
Separate from the submit button and never pre-checked. Small, quiet and
legible: it is a disclosure, not a selling point, but it has to be readable
or it is not a disclosure at all. 44px of tap target on the checkbox. */
.mcb-field--consent { margin-top: .25rem; }
.mcb-consent {
display: grid;
grid-template-columns: auto 1fr;
gap: .6rem;
align-items: start;
font-size: .78rem;
line-height: 1.5;
color: var(--mcb-muted);
cursor: pointer;
}
.mcb-consent input[type="checkbox"] {
width: 1.1rem;
height: 1.1rem;
margin: .12rem 0 0;
accent-color: var(--mcb-brand);
flex: 0 0 auto;
cursor: pointer;
}
.mcb-consent a { color: var(--mcb-brand); text-decoration: underline; text-underline-offset: 2px; }
/* --------------------------------- the call pill vs the consent banner ----
*
* bb-consent is anchored bottom-left and the call pill bottom-right. At 1440
* they never meet (banner ends at 440, pill starts at 1243). At 390 they
* overlap by 170px — measured: banner L12-R372, pill L202-R376 — so the pill
* sits on top of the Accept button, which is the one control the banner exists
* for. The launch checklist says to position the banner away from the floating
* call button; there is nowhere to put it on a phone, so the pill moves
* instead, and only while the banner is up.
*
* --bb-consent-height and the bb-consent-visible / bb-consent-bottom classes
* are set by the plugin's own JS, and both come off when the visitor answers,
* so the pill drops back by itself. This is the same mechanism the plugin uses
* for the TranslatePress switcher; done here in the theme so the shared plugin
* — which is live on other clients' sites — is not touched.
*/
@media (max-width: 900px) {
.mcb-callbar { transition: transform .15s ease; }
body.bb-consent-visible.bb-consent-bottom .mcb-callbar {
transform: translateY(calc(-1 * (var(--bb-consent-height, 88px) + 12px)));
}
}
/* Agent sign-in, pushed to the far end of the legal row. Staff furniture: it
has to be findable at the very bottom of any page and invisible to a buyer
skimming. Drops back into the flow when the row wraps on a phone. */
.mcb-foot__signin { margin-left: auto; }
.mcb-foot__signin a { opacity: .7; }
.mcb-foot__signin a:hover { opacity: 1; }
@media (max-width: 720px) { .mcb-foot__signin { margin-left: 0; } }
/* ======================================================= area guides ==
*
* The eight-area SEO buildout. Ported from themes/marco-torres, which is
* the non-IDX version of this (his came from jose-aquino and yessenia-
* storing). Every --mtr-* token in the original had an --mcb-* of the same
* name, so the palette carried over untouched.
*/
.mcb-crumb { font-size: .82rem; color: var(--mcb-faint); margin-bottom: 1rem; }
.mcb-crumb span { margin-inline: .4rem; }
.mcb-cbanner {
position: relative;
overflow: hidden;
padding-block: clamp(3rem, 7vw, 5.5rem);
background: linear-gradient(180deg, var(--mcb-tint) 0%, var(--mcb-white) 100%);
border-bottom: 1px solid var(--mcb-line);
}
.mcb-cbanner::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: var(--mcb-accent-metal);
}
.mcb-cbanner__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.mcb-cbanner--photo .mcb-cbanner__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) { .mcb-cbanner--photo .mcb-cbanner__in { grid-template-columns: 1fr; } }
.mcb-cbanner__text { max-width: 46rem; }
.mcb-cbanner__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.06; }
.mcb-cbanner__photo { margin: 0; }
.mcb-cbanner__photo img {
width: 100%;
max-width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 18px;
box-shadow: var(--mcb-shadow-lg);
}
.mcb-cbanner__photo figcaption { margin-top: .55rem; font-size: .74rem; line-height: 1.45; color: var(--mcb-muted); }
.mcb-crumb { margin-bottom: 1.1rem; font-size: .84rem; color: var(--mcb-muted); }
.mcb-crumb a { color: var(--mcb-brand); }
.mcb-crumb span { margin-inline: .4rem; }
.mcb-csplit {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
@media (max-width: 900px) { .mcb-csplit { grid-template-columns: 1fr; } }
.mcb-csplit__body p { margin-bottom: 1.15rem; }
.mcb-csplit__body .mcb-btn { margin-top: 1rem; }
.mcb-cfacts {
padding: clamp(1.5rem, 2.6vw, 2rem);
background: var(--mcb-brand-pale);
border: 1px solid var(--mcb-line);
border-top: 4px solid var(--mcb-brand);
border-radius: 12px;
}
.mcb-cfacts__h {
margin: 0 0 1.1rem;
font-family: var(--mcb-body-font);
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mcb-brand);
}
.mcb-cfacts dl { margin: 0; }
.mcb-cfacts__row { padding: .85rem 0; border-bottom: 1px solid var(--mcb-line); }
.mcb-cfacts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.mcb-cfacts dt {
margin-bottom: .3rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mcb-muted);
}
.mcb-cfacts dd { margin: 0; color: var(--mcb-ink); font-size: .95rem; line-height: 1.45; }
.mcb-cfaq { display: grid; gap: .75rem; margin-top: 2rem; }
.mcb-cfaq__item {
padding: 1rem 1.25rem;
background: var(--mcb-white);
border: 1px solid var(--mcb-line);
border-radius: 10px;
}
.mcb-cfaq__item summary {
cursor: pointer;
font-family: var(--mcb-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--mcb-deep);
}
.mcb-cfaq__item p { margin: .75rem 0 0; color: var(--mcb-body); }
/* A guide's banner without a photograph (Cutler Bay) still needs a picture
of something: its outline, when cached, sits where the photo would. */
.mcb-cbanner__shape { display: grid; place-items: center; }
.mcb-cbanner__shape .mcb-shape { width: min(60%, 260px); height: auto; }
.mcb-cbanner__shape .mcb-shape path { fill: var(--mcb-brand-lt); opacity: .4; }
/* Two boxes, not four, so the row is centred rather than stretched across a
four-column grid. Mario has exactly two figures that are true and checkable
(33 years on the DRE record; 16-30 closings, his own answer on the form). */
.mcb-creds__list:has(> li:nth-child(2):last-child) {
max-width: 46rem;
margin-inline: auto;
}
/* --------------------------------------- area cards on the guides -------
*
* The hub grid and each guide's "nearby" row. These were the one thing the
* port from marco-torres missed: my extraction filtered on cbanner/csplit/
* cfacts/cfaq/crumb and `place` was not in the list, so the outline SVG
* rendered unstyled — a full-width BLACK silhouette the height of the
* viewport, on every guide page. It looked like a broken image and it
* shipped, which is exactly why the rendered page gets looked at.
*
* Modelled on .mcb-market__* — the same shape treatment the home page grid
* already uses, so the two read as one system.
*/
.mcb-places {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.mcb-place { min-width: 0; }
.mcb-place__link {
display: block;
height: 100%;
padding: 1.4rem 1.4rem 1.5rem;
background: var(--mcb-white);
border: 1px solid var(--mcb-line);
border-radius: 14px;
text-decoration: none;
transition: border-color .22s var(--mcb-ease), box-shadow .22s var(--mcb-ease), transform .22s var(--mcb-ease);
}
.mcb-place__link:hover {
border-color: var(--mcb-brand-lt);
box-shadow: var(--mcb-shadow);
transform: translateY(-2px);
}
.mcb-place__shape { display: block; width: 84px; height: 84px; margin-bottom: .7rem; }
.mcb-place__shape .mcb-shape { width: 100%; height: 100%; display: block; }
.mcb-place__shape .mcb-shape path {
fill: var(--mcb-accent);
opacity: .16;
transition: opacity .22s var(--mcb-ease);
}
.mcb-place__link:hover .mcb-shape path { opacity: .34; }
.mcb-place__body { display: block; }
.mcb-place__name {
display: block;
font-family: var(--mcb-display);
font-size: 1.2rem;
color: var(--mcb-ink);
margin-bottom: .3rem;
}
.mcb-place__note {
display: block;
font-size: .9rem;
line-height: 1.55;
color: var(--mcb-body);
margin-bottom: .8rem;
}
.mcb-place__cta {
display: block;
font-family: var(--mcb-display);
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mcb-coral-dk);
}
/* ------------------------------------- "what to check" on a guide -------
A real list, not five run-together lines. Each item is one thing a buyer
can go and ask about, so it gets its own row and its own marker. */
.mcb-cchecks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .85rem;
}
.mcb-cchecks li {
position: relative;
padding-left: 1.9rem;
color: var(--mcb-body);
line-height: 1.65;
}
.mcb-cchecks li::before {
content: '';
position: absolute;
left: .35rem;
top: .62em;
width: .5rem;
height: .5rem;
border-radius: 50%;
background: var(--mcb-coral);
}