/* ==========================================================================
Responsive fixes for the Mother Realtor replica.
Addresses horizontal-overflow issues found across mobile/tablet/desktop:
1. ElementsKit testimonial swiper leaking duplicate (loop) slides past
the viewport edge — the outer wrapper lacked overflow clipping.
2. A decorative rotated image on the contact pages bleeding off the
right edge and creating a horizontal scrollbar.
Kept in a single appended file so the mirrored vendor CSS stays untouched.
========================================================================== */
/* Belt-and-suspenders: never allow the page itself to scroll sideways. */
html,
body {
overflow-x: hidden;
}
/* Elementor's JS normally swaps .elementor-invisible to .animated on scroll-in.
Without Elementor's frontend JS running in the static scrape, elements stay
hidden. Force them all visible — the entrance animations still play via our
redefined keyframes when the JS does fire; this is just the no-JS fallback. */
/* Kill entrance animation keyframes so opacity:0 from-state never applies */
@keyframes fadeInUp { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 1; } to { opacity: 1; } }
.elementor-invisible {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
animation-fill-mode: none !important;
transform: none !important;
}
.animated {
animation: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Same issue: .e-con.e-parent containers ≥4th have background-image:none until
Elementor's IntersectionObserver adds .e-lazyloaded. Override with the same
selectors to cancel the suppression — backgrounds defined in the vendor CSS
will then apply normally.
Exception: the 8 Community-page carousel cards (elementor-element-5cad9ff
etc.) get their background-image set explicitly further down in this file
(see "COMMUNITY PAGE — carousel card background images"). Their section is
the 4th .e-con.e-parent on the page, so the universal `*` branch here was
reverting that explicit rule right back to none — :not()'d out below.
This same revert rule is duplicated at n+3/n+2 inside shorter-viewport
media queries below; the exclusion must be applied to all three copies or
the carousel photos disappear again on any viewport under 1024px tall. */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload)
*:not(.elementor-element-5cad9ff):not(.elementor-element-a2f839d):not(.elementor-element-9b5aa0f):not(.elementor-element-cd19d48):not(.elementor-element-d317366):not(.elementor-element-8db6676):not(.elementor-element-ab08284):not(.elementor-element-b1d52d6) {
background-image: revert !important;
}
@media screen and (max-height: 1024px) {
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload)
*:not(.elementor-element-5cad9ff):not(.elementor-element-a2f839d):not(.elementor-element-9b5aa0f):not(.elementor-element-cd19d48):not(.elementor-element-d317366):not(.elementor-element-8db6676):not(.elementor-element-ab08284):not(.elementor-element-b1d52d6) {
background-image: revert !important;
}
}
@media screen and (max-height: 640px) {
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload)
*:not(.elementor-element-5cad9ff):not(.elementor-element-a2f839d):not(.elementor-element-9b5aa0f):not(.elementor-element-cd19d48):not(.elementor-element-d317366):not(.elementor-element-8db6676):not(.elementor-element-ab08284):not(.elementor-element-b1d52d6) {
background-image: revert !important;
}
}
/* --- 1. Testimonial swiper -------------------------------------------------
Clip the carousel at every wrapping level so off-screen loop-duplicate
slides can't extend the document width. */
.elementskit-testimonial-slider,
.ekit-main-swiper,
.ekit-main-swiper .swiper-wrapper,
.elementskit-single-testimonial-slider {
overflow: hidden;
max-width: 100%;
}
/* --- 2. Contact-page decorative rotated image ------------------------------
The element is absolutely positioned and rotated ~88deg, so it pokes past
the right edge. Clip its containing section instead of moving the art. */
.elementor-element-454c0a7,
.elementor-element-454c0a7 > .e-con-inner {
overflow: hidden;
}
/* ==========================================================================
HEADER FIXES
========================================================================== */
/* --- HEADER LAYOUT ---------------------------------------------------------
Structure: 07a5716 has two children — f45840e (logo) and 691a9a3 (nav).
Use CSS grid with 3 equal columns: logo | nav | (empty mirror).
Nav sits in the true center column regardless of logo width. */
/* Outer wrapper: good vertical padding */
.elementor-1576 .elementor-element.elementor-element-ce5ceb4 {
--padding-top: 20px !important;
--padding-bottom: 20px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Header row: 3-column grid. Logo left, nav center, nothing right. */
.elementor-1576 .elementor-element.elementor-element-07a5716 {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
justify-content: unset !important;
--justify-content: unset !important;
}
/* Logo: first column, left-aligned with left padding */
.elementor-1576 .elementor-element.elementor-element-f45840e {
grid-column: 1 !important;
justify-self: start !important;
width: auto !important;
max-width: none !important;
--width: auto !important;
padding-left: 40px !important;
}
/* Nav widget: center column */
.elementor-1576 .elementor-element.elementor-element-691a9a3 {
grid-column: 2 !important;
width: auto !important;
max-width: none !important;
--container-widget-width: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Logo img: fixed height */
.elementor-element-437741d img {
height: 80px !important;
width: auto !important;
max-width: none !important;
}
.elementor-element-691a9a3 .elementor-nav-menu--main {
width: auto !important;
}
.elementor-element-691a9a3 ul.elementor-nav-menu {
justify-content: center !important;
}
.elementor-element-691a9a3 .elementor-nav-menu .elementor-item {
line-height: 1.4 !important;
font-size: 16px !important;
display: inline-flex;
align-items: center;
}
/* Below the centered-nav threshold: switch the header grid to flex
space-between (logo left, nav right). Measured: the nav ul is 814px wide
and the logo ends at ~191px, so viewport-centered nav clears the logo only
at >=1245px. From 1025-1249px the SAME inline menu still fits fine when it
right-aligns into the header's empty right column, so it stays visible
there instead of collapsing to the burger; the burger takes over at
<=1024px (Elementor's native dropdown-tablet breakpoint), where this flex
layout doubles as the logo+toggle row. */
@media (max-width: 1249px) {
.elementor-1576 .elementor-element.elementor-element-07a5716 {
display: flex !important;
justify-content: space-between !important;
--justify-content: space-between !important;
}
.elementor-1576 .elementor-element.elementor-element-f45840e {
grid-column: unset !important;
}
.elementor-1576 .elementor-element.elementor-element-691a9a3 {
grid-column: unset !important;
}
}
/* Remove the header divider line ENTIRELY, on EVERY page and at every width.
The line is NOT the container's border — Elementor's divider draws it via the
inner `.elementor-divider-separator` element's `border-top` (and the CSS var
`--divider-border-width`). Zeroing only the container border (my earlier rule)
left the line visible on the subpages, which is why their headers didn't match
the homepage. Zero the separator's border + the divider vars so it's gone
everywhere. Not in a media query → applies at all breakpoints, all pages. */
.elementor-element-03c8839,
.elementor-element-03c8839 .elementor-divider,
.elementor-element-03c8839 .elementor-divider-separator,
.elementor-element-03c8839 .elementor-divider__line {
border-width: 0 !important;
border-top-width: 0 !important;
border-bottom-width: 0 !important;
--divider-border-width: 0px !important;
--divider-pattern-height: 0px !important;
background: none !important;
}
/* Belt-and-suspenders: hide the separator outright so no hairline can show. */
.elementor-element-03c8839 .elementor-divider-separator {
display: none !important;
}
/* --- HARD RULE: the menu must NEVER wrap/stack --------------------------------
The old fix hid the inline menu and forced the burger everywhere below
1400px, which threw away usable desktop widths. With the flex space-between
header above, the one-line menu (814px) plus logo fits down to 1025px with
a >=30px gap, so the inline menu now stays visible through 1025-1249px and
Elementor's native <=1024px breakpoint handles the burger swap. The ul
never wraps (it is a nowrap flex row); below ~995px it would overflow, and
the <=1024px burger covers that entire range. */
/* --- 4. Logo sizing — scale down at smaller viewports ---------------------*/
@media (max-width: 1024px) {
.elementor-element-437741d img { height: 64px !important; width: auto !important; max-width: none !important; }
}
/* --- 5. Proper full-screen hamburger menu ----------------------------------
The default dropdown opened as a small, left-aligned grey box (~126px tall)
overlapping the hero. Replace it with a full-viewport overlay panel with
large, centered serif links — a "proper" mobile menu.
Elementor adds the dropdown container after the toggle; when the toggle is
checked (aria-expanded / .elementor-active) the dropdown is shown. We style
the dropdown container itself so it fills the screen whenever it is visible. */
/* Identity transforms (matrix(1,0,0,1,0,0)) on the nav widget and every
wrapper between it and the dropdown each establish a containing block, so
the dropdown's position:fixed + left:0 resolves against that wrapper
(~half width, offset ~151px) instead of the viewport. Clear transforms on
the whole nav subtree so fixed truly anchors to the screen. */
.elementor-element-691a9a3,
.elementor-element-691a9a3 * {
transform: none !important;
}
/* header-fixes.js reparents the dropdown to (.mr-fullscreen-menu) so
position:fixed anchors to the viewport rather than the nav widget's
containing block. It is hidden by default and revealed when the JS adds
.mr-menu-open to . */
.mr-fullscreen-menu {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
/* warm dark brown drawn from the site palette (#764C29 / #806B28 family) */
background-color: #2f2417 !important;
z-index: 9998 !important;
overflow-y: auto !important;
box-sizing: border-box;
padding: 64px 24px 40px !important;
/* hidden until opened */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .28s ease, visibility .28s ease;
/* pin the logo + link list to the top of the overlay */
display: flex !important;
flex-direction: column;
justify-content: flex-start;
align-items: center;
transform: none !important;
}
body.mr-menu-open .mr-fullscreen-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
max-height: 100vh !important; /* override Elementor's collapsed max-height */
}
.mr-fullscreen-menu ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.mr-fullscreen-menu li {
width: 100%;
text-align: center;
border: 0 !important;
}
.mr-fullscreen-menu .elementor-item {
font-family: "Cormorant Garamond", "DM Serif Text", serif !important;
font-size: 44px !important;
line-height: 1.5 !important;
letter-spacing: 1px;
text-transform: capitalize !important;
color: #f4ecdf !important;
background: transparent !important;
padding: 10px 0 !important;
justify-content: center !important;
text-align: center;
transition: color .2s ease;
}
.mr-fullscreen-menu .elementor-item:hover,
.mr-fullscreen-menu .elementor-item.elementor-item-active {
color: #d6b07a !important; /* warm gold accent on hover */
background: transparent !important;
}
/* Dedicated close (×) button injected into the overlay by header-fixes.js,
since the reparented overlay paints above the header toggle. */
.mr-menu-close {
position: fixed;
top: 20px;
right: 24px;
z-index: 10000;
width: 48px !important;
height: 48px !important;
line-height: 48px !important;
font-size: 36px !important;
color: #f4ecdf !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer;
padding: 0;
appearance: none;
-webkit-appearance: none;
transition: color .2s ease, transform .2s ease;
}
.mr-menu-close:hover {
color: #d6b07a;
transform: rotate(90deg);
}
/* Mother Realtor logo pinned above the link list in the open overlay,
injected by header-fixes.js. The plaque artwork carries its own tan
background so it reads fine on the dark brown. */
.mr-fullscreen-menu .mr-menu-logo {
text-align: center;
margin-bottom: 24px;
flex: 0 0 auto;
}
.mr-fullscreen-menu .mr-menu-logo img {
width: 170px;
height: auto;
display: inline-block;
}
/* Keep the header toggle above page content (when closed), and size it per the
md Mobile rule (48x48 tap target, ~2.25rem glyph).
IMPORTANT: do NOT set `display` here — Elementor controls toggle visibility
by display (none above 1024px, block at/below). Forcing display:inline-flex
unconditionally made the hamburger show on desktop ALONGSIDE the full menu.
The 48x48 box + flex centering only apply once the toggle is actually shown
(the media query below sets display); these properties are inert otherwise. */
.elementor-element-691a9a3 .elementor-menu-toggle {
position: relative;
z-index: 9999 !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
align-items: center !important;
justify-content: center !important;
font-size: 2.25rem !important; /* ~36px glyph */
}
/* Only flex-center the glyph at the widths where the toggle is visible
(Elementor's native dropdown-tablet breakpoint, <=1024px; the inline menu
right-aligns and stays visible from 1025px up). */
@media (max-width: 1024px) {
.elementor-element-691a9a3 .elementor-menu-toggle {
display: inline-flex !important;
}
}
.elementor-element-691a9a3 .elementor-menu-toggle svg,
.elementor-element-691a9a3 .elementor-menu-toggle i {
width: 2.25rem !important;
height: 2.25rem !important;
font-size: 2.25rem !important;
}
/* Lock background scroll while the full-screen menu is open. */
body.mr-menu-open {
overflow: hidden;
}
/* ==========================================================================
HERO SECTION HEIGHT — smooth, deterministic centering at every breakpoint
Strategy:
- clamp(floor, fluid, ceiling) gives a hero that grows with the viewport
but never becomes a void on tall/4K screens or collapses on short ones.
- svh (small viewport height) on mobile excludes the browser chrome bar so
the hero actually fills what the user sees, not the full layout height.
- padding-top clears the absolute header (~94px) with comfortable breathing
room above the content; justify-content:center handles vertical placement.
Much smaller than before — we're not centering via padding anymore.
========================================================================== */
/* Hero height + centering — all breakpoints in one place, largest last */
.elementor-element-94d829b {
--min-height: 100vh !important;
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
/* e-con-inner fills full hero height so justify-content:center works */
.elementor-element-94d829b > .e-con-inner {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding-top: 94px !important;
padding-bottom: 94px !important;
box-sizing: border-box !important;
}
/* Full desktop nav (≥1401px): header is in document flow above the hero,
so hero needs extra height to compensate and fill the screen.
max-height caps it on 4K/ultrawide monitors so it doesn't become a void. */
@media (min-width: 1401px) {
.elementor-element-94d829b {
--min-height: clamp(700px, calc(100vh + 94px), 1200px) !important;
min-height: clamp(700px, calc(100vh + 94px), 1200px) !important;
}
}
/* Tablet + narrow desktop (768px–1400px): hamburger header is overlaid (not in flow),
so 100vh alone can feel short at compressed widths. Ensure a tall, full-bleed hero. */
@media (min-width: 768px) and (max-width: 1400px) {
.elementor-element-94d829b {
--min-height: clamp(700px, 100vh, 1100px) !important;
min-height: clamp(700px, 100vh, 1100px) !important;
}
}
@media (max-width: 767px) {
.elementor-element-94d829b {
--min-height: clamp(620px, 100svh, 900px) !important;
min-height: clamp(620px, 100svh, 900px) !important;
--justify-content: center !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
flex-direction: column !important;
--padding-top: 100px !important;
--padding-bottom: 40px !important;
padding-top: 100px !important;
padding-bottom: 40px !important;
}
.elementor-element-6e40a01 {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* ==========================================================================
SECTION AFTER HERO — disable Elementor entrance animation so it never
appears blank on load. The .elementor-invisible override makes it visible,
but Elementor's JS still plays the fadeInUp FROM opacity:0 on scroll-in.
Removing the animation entirely means the section is always painted.
========================================================================== */
.elementor-element-18af0cb,
.elementor-element-18af0cb.elementor-invisible,
.elementor-element-18af0cb.animated,
.elementor-element-18af0cb.elementor-invisible.animated {
animation: none !important;
transition: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* ==========================================================================
HERO HEADING — fluid size, never awkwardly stacked
The H1 (5209525) used fixed steps 100px / 77px / 37px. At in-between widths
the 100px size forced an ugly wrap ("...Wisdom In" / "Every Property"), and
the steps jumped hard at the breakpoints. Replace with a single fluid
clamp() that scales smoothly with the viewport so the title always fills the
line cleanly and breaks land naturally. text-wrap:balance evens the two
lines; the sub-heading (f426e74) gets a matching gentle clamp.
========================================================================== */
.elementor-element-5209525 .elementor-heading-title {
/* min 34px (small phones) → fluid → max 100px (large desktop).
The line break is now FORCED by an explicit
in the markup, so the title is ALWAYS exactly two lines:
"A Mother's Wisdom In"
"Every Property"
regardless of browser engine. The font just needs to scale so the longer
first line never overflows; 6.6vw keeps it inside the content width down
to ~360px. No text-wrap:balance — it was non-deterministic and produced
an ugly 3-line split in some Chrome/Safari builds. */
/* "A Mother's Wisdom In" is ~9px wide per 1px of font; the hero content box
is ~56% of viewport width. So the first line fits on ONE line only while
font ≲ 0.56·vw / 9 ≈ 6.2vw, capped at ~88px (100px overflowed even on the
original site, forcing a 3rd line). 6.0vw / 88px max leaves safe margin. */
font-size: clamp(64px, 6.0vw, 88px) !important;
line-height: 1.1 !important;
text-wrap: initial !important; /* override any inherited balance/pretty */
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: none;
width: auto;
}
/* Hamburger range (768px–1400px): title scales with viewport,
buttons stay compact and never stretch full width */
@media (max-width: 1400px) and (min-width: 768px) {
.elementor-element-5209525 .elementor-heading-title {
font-size: clamp(52px, 8vw, 88px) !important;
}
.elementor-element-6e40a01 {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-element-87b6cce {
width: auto !important;
max-width: none !important;
justify-content: center !important;
}
.elementor-element-13d545f,
.elementor-element-2f9d82c {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
}
.elementor-element-13d545f .elementor-button,
.elementor-element-2f9d82c .elementor-button {
width: auto !important;
min-width: 180px !important;
max-width: 260px !important;
padding: 14px 36px !important;
}
}
/* The forced break is sized for the wide title. On phones the long first line
("A Mother's Wisdom In") would shrink the type too far, so below 767px we
drop the forced break, let the title wrap naturally, and (per the md Mobile
rule) scale it UP aggressively so the headline dominates the screen rather
than sitting at a polite default. */
/* The mobile-only break (.mr-hero-break-m) is hidden above mobile so desktop
stays a clean 2 lines. */
.mr-hero-break-m { display: none; }
@media (max-width: 767px) {
/* On phones use BOTH forced breaks for a controlled 3-line title:
"A Mother's"
"Wisdom In"
"Every Property"
The longest line ("Every Property") is ~5.9px wide per 1px of font; the
mobile content box is ~viewport minus 40px. 12vw floor scales it up
aggressively (md rule) while the 56px cap keeps "Every Property" inside
the viewport at every phone width. */
.mr-hero-break-m { display: inline !important; }
.elementor-element-5209525 .elementor-heading-title {
font-size: clamp(40px, 12vw, 56px) !important;
line-height: 1.06 !important;
}
}
.elementor-element-f426e74 .elementor-heading-title {
font-size: clamp(14px, 1.6vw, 20px) !important;
text-wrap: balance;
}
/* ==========================================================================
HERO BUTTONS — even, symmetric & responsive
Root cause of the unevenness was at the WIDGET (wrapper) level, not the
button: Elementor clamps the two widgets to DIFFERENT widths —
13d545f (Contact Angela): max-width 14.723% / 22% / 26% / 62%
2f9d82c (Learn More): width:initial; max-width:initial (auto)
So one widget was percentage-clamped (clipping its text) while the other
sized to content. An inner-button min-width can't win because the wrapper's
max-width caps it. Fix: neutralize the widget width/max-width on BOTH so
they shrink-to-fit identically, then give the inner buttons identical
symmetric padding + a shared min-width so they render as one matched pair.
The two widgets live in flex row container 87b6cce (gap 20px, centered).
IDs: 13d545f = Contact Angela, 2f9d82c = Learn More.
========================================================================== */
/* --- Button row: override the .elementor-12-scoped Elementor rules that set
13d545f to 14%/22%/26%/62% width and 87b6cce to 95-100% width.
Match the 3-class specificity so !important is unambiguous. ------------ */
.elementor-12 .elementor-element.elementor-element-87b6cce {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
--gap: 16px 16px !important;
--row-gap: 0px !important;
--column-gap: 16px !important;
width: auto !important;
--width: auto !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-12 .elementor-element.elementor-element-13d545f,
.elementor-12 .elementor-element.elementor-element-2f9d82c {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
--container-widget-width: auto !important;
--container-widget-flex-grow: 0 !important;
margin: 0 !important;
}
.elementor-12 .elementor-element.elementor-element-13d545f .elementor-button,
.elementor-12 .elementor-element.elementor-element-2f9d82c .elementor-button {
padding: 14px 32px !important;
min-width: 180px !important;
max-width: 260px !important;
width: auto !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
@media (max-width: 767px) {
.elementor-12 .elementor-element.elementor-element-87b6cce {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: center !important;
gap: 12px !important;
--gap: 12px 12px !important;
--row-gap: 0px !important;
--column-gap: 12px !important;
width: 100% !important;
--width: 100% !important;
max-width: 360px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-12 .elementor-element.elementor-element-13d545f,
.elementor-12 .elementor-element.elementor-element-2f9d82c {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
--container-widget-width: auto !important;
}
.elementor-12 .elementor-element.elementor-element-13d545f .elementor-button,
.elementor-12 .elementor-element.elementor-element-2f9d82c .elementor-button {
padding: 12px 8px !important;
min-width: 0 !important;
width: 100% !important;
letter-spacing: 1px !important;
font-size: 13px !important;
}
}
@media (max-width: 380px) {
.elementor-12 .elementor-element.elementor-element-13d545f .elementor-button,
.elementor-12 .elementor-element.elementor-element-2f9d82c .elementor-button {
padding: 11px 4px !important;
letter-spacing: .5px !important;
font-size: 12px !important;
}
}
/* ==========================================================================
SOLD LISTING CARDS — aligned tiles (md rule: side-by-side tiles must align)
Each card (a child of grid 45832bd) is a background photo holding two button
widgets: the SOLD badge (first) pinned top, the address (last) pinned bottom.
The addresses are 1 to 3 lines, so without a reserved address area every
card's badge/address landed at a different Y and the row read as ragged.
Fix structurally, independent of card IDs:
- all cards equal height via the grid (align stretch + equal min-height)
- badge pinned to the top, address pinned to the bottom
- the address widget gets a min-height of ~3 lines so 1-line and 3-line
addresses occupy the same vertical space → every address baseline aligns
========================================================================== */
.elementor-element-45832bd {
align-items: stretch !important; /* cards in a row share full height */
}
/* Each direct card container: column layout, badge top / address bottom. */
.elementor-element-45832bd > .e-con {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 420px !important; /* consistent, not viewport-relative */
height: 100% !important;
box-sizing: border-box !important;
padding: 22px !important; /* even inset for badge + address */
}
/* SOLD badge: pin to the top-left and SIZE TO ITS CONTENT.
The vendor capped the badge widget at max-width:34% (~117px), so a long price
like "SOLD: $8,000,000" overflowed and clipped out of the box. Let the widget
and its button shrink-wrap the text (width:auto, nowrap) so every price fits
its box at any column count / viewport width. */
.elementor-element-45832bd > .e-con > .elementor-widget-button:first-child {
align-self: flex-start !important;
margin: 0 !important;
width: auto !important;
max-width: 100% !important;
--container-widget-width: auto !important;
}
.elementor-element-45832bd > .e-con > .elementor-widget-button:first-child .elementor-button {
width: auto !important;
white-space: nowrap !important; /* price stays on one line, never clips */
}
/* Address widget: pin to the bottom, reserve a fixed area so 1-line and
3-line addresses align across the row.
NOTE: the widget WRAPPER has a #FFF background (from the vendor). If the
wrapper carries the min-height reservation, that white shows as a thin strip
above the grey (#EEE) button on short (1-line) addresses. So keep the wrapper
transparent + height-of-content, and put the reserved min-height on the
BUTTON itself — then the whole reserved box is one solid grey, no white line. */
.elementor-element-45832bd > .e-con > .elementor-widget-button:last-child {
margin-top: auto !important;
margin-bottom: 0 !important;
width: 100% !important;
background: transparent !important; /* no white wrapper strip */
}
.elementor-element-45832bd > .e-con > .elementor-widget-button:last-child .elementor-button {
width: 100% !important;
min-height: 4.2em !important; /* the grey box reserves ~3 lines */
display: flex !important;
align-items: center !important; /* text centered within the grey box */
justify-content: center !important;
white-space: normal !important; /* allow the address to wrap */
line-height: 1.35 !important;
}
/* CONSISTENT box backgrounds across ALL cards.
The vendor gave card 1 a solid #EEE address box but cards 2-4 a translucent
tan (#C2B59B47 ≈ 28% alpha), so the right three looked faded with the photo
showing through. Force every SOLD badge and address box to the same SOLID
#EEE so all four cards read identically. */
.elementor-element-45832bd > .e-con > .elementor-widget-button .elementor-button {
background-color: #eee !important;
}
@media (max-width: 1024px) {
.elementor-element-45832bd > .e-con { min-height: 380px !important; }
}
/* --- Responsive column count: 4 → 2×2 → 1, stack early, no cramming ---------
The vendor only dropped from 4 columns to 2 at <=1024px, so the 4 columns
stayed cramped down through the 1000s and clipped badges like "$8,000,000".
Switch to a clean 2×2 grid early — below 1400px — so cards always have room,
then to 1 column on phones. */
@media (max-width: 1400px) {
.elementor-element-45832bd {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767px) {
.elementor-element-45832bd {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 1024px) {
.elementor-element-45832bd > .e-con { min-height: 380px !important; }
}
@media (max-width: 767px) {
/* Single column on phones: cards still align internally; a touch shorter. */
.elementor-element-45832bd > .e-con {
min-height: 320px !important;
padding: 20px !important;
}
.elementor-element-45832bd > .e-con > .elementor-widget-button:last-child {
min-height: 0 !important; /* one per row, no cross-card align */
}
/* FILL THE WIDTH on mobile. The vendor capped the listings wrapper (18af0cb)
at a fixed --width:295px on phones, so the cards sat in a narrow left column
with dead space on the right. Make the wrapper + grid span the full content
width so each card fills edge-to-edge. */
.elementor-element-18af0cb,
.elementor-element-45832bd {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
ENTRANCE ANIMATIONS — one smooth, elegant fade-up for the WHOLE site
The original site used Elementor's defaults: fadeInUp/Down/Right keyframes
that translate a big 100%/2000px distance over 1.5s — a slow, heavy "float"
that felt clunky and inconsistent (different sections came in from different
directions). We REDEFINE those keyframes and the .animated timing so every
animated element, regardless of which Elementor animation it was assigned,
uses ONE refined motion: a short, subtle rise + fade with a soft ease-out.
This is the cohesive, clean entrance across every section and page.
Elementor's JS flow is unchanged: .elementor-invisible hides the element,
then on scroll-in it swaps to `.animated ` — we just make nice.
========================================================================== */
/* Unified motion: ~22px rise, fade in, smooth deceleration. */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight{ from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
/* Refined timing/easing for every Elementor entrance animation. The easing is a
gentle decelerate (no bounce, no overshoot) for a calm, elegant settle. */
.animated {
animation-duration: 0.7s !important;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
animation-fill-mode: both !important;
}
/* Respect the OS "reduce motion" setting — show content with no movement. */
@media (prefers-reduced-motion: reduce) {
.animated { animation: none !important; }
.elementor-invisible { visibility: visible !important; }
}
/* --- Cohesive stagger for grouped items -----------------------------------
When a row/grid of siblings animates (the 4 SOLD cards, paired CTAs, etc.),
a tiny incremental delay makes them cascade smoothly instead of snapping in
all at once. Applied to the listings grid and the hero button row. */
.elementor-element-45832bd > .e-con:nth-child(1).animated { animation-delay: 0.00s !important; }
.elementor-element-45832bd > .e-con:nth-child(2).animated { animation-delay: 0.08s !important; }
.elementor-element-45832bd > .e-con:nth-child(3).animated { animation-delay: 0.16s !important; }
.elementor-element-45832bd > .e-con:nth-child(4).animated { animation-delay: 0.24s !important; }
.elementor-element-45832bd > .e-con:nth-child(5).animated { animation-delay: 0.32s !important; }
.elementor-element-45832bd > .e-con:nth-child(6).animated { animation-delay: 0.40s !important; }
/* --- Scroll-reveal for EVERY element (driven by scroll-reveal.js) -----------
scroll-reveal.js tags every content block with .sr-reveal (hidden, nudged
down) and adds .sr-in when it scrolls into view. Same elegant motion as the
Elementor entrances: ~22px rise + fade, ~0.7s, gentle ease-out. Using a
transition (not a keyframe) so the JS can stagger siblings via
transition-delay. will-change keeps it GPU-smooth. */
.sr-reveal {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition:
opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.sr-reveal.sr-in {
opacity: 1;
transform: none;
}
/* Once revealed, drop will-change so it doesn't pin layers forever. */
.sr-reveal.sr-in {
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.sr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ==========================================================================
MOBILE POLISH (<=767px) — tighten the phone layout
Audit findings on phones:
• Service cards (FIND YOUR HOME / SELL A PROPERTY / LEASE A LISTING) were
32vh ≈ 269px each — three stacked = a huge scroll of mostly-empty photo.
• Full-bleed photo/CTA bands at 44vh+ left big empty mid-page gaps.
• Stacked stats and section padding were looser than they need to be.
These rules ONLY apply at phone widths; desktop/tablet are untouched.
========================================================================== */
@media (max-width: 767px) {
/* 1) Service cards: compact, content-driven height instead of 32vh.
The title + one line of copy fit comfortably in ~150px. */
.elementor-element-ee305d2,
.elementor-element-13cd1fd,
.elementor-element-49584ef {
--min-height: 150px !important;
min-height: 150px !important;
}
/* 2) Photo inner container (c1b1e87): zeroed out — photo height is set by
the img rule below (340px, object-fit:cover). No min-height needed. */
.elementor-element-c1b1e87 {
--min-height: 0 !important;
min-height: 0 !important;
}
/* 3) Stats rows ("25+ Years" / "985+ Properties"): center them as a tidy
block instead of left-ragged with mismatched leading dashes. */
.elementor-element-c324021,
.elementor-element-105061b,
.elementor-element-32f49ab,
.elementor-element-552f46a {
text-align: center !important;
}
/* 4) Comfortable, consistent tap targets for form fields (was 40px). */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
input.elementor-field,
textarea.elementor-field {
min-height: 46px !important;
font-size: 16px !important; /* 16px stops iOS zoom-on-focus */
}
/* 5) Footer social icons: bump to a real tap target (were ~17px). */
.elementor-social-icon {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ==========================================================================
MOBILE LAYOUT PASS 2 (<=767px) — hero, services, stats, quote, spacing
========================================================================== */
@media (max-width: 767px) {
/* --- HERO ----------------------------------------------------------------
Full-screen on mobile: 100svh so the hero fills the visible viewport.
Title dominates — big, bold, magazine-quality presence. */
.elementor-element-5209525 .elementor-heading-title {
font-size: clamp(46px, 13.5vw, 64px) !important;
line-height: 1.04 !important;
}
/* Header: revert desktop grid, go simple flex space-between */
.elementor-1576 .elementor-element.elementor-element-07a5716 {
display: flex !important;
justify-content: space-between !important;
--justify-content: space-between !important;
align-items: center !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.elementor-1576 .elementor-element.elementor-element-f45840e {
grid-column: unset !important;
padding-left: 0 !important;
width: auto !important;
}
.elementor-1576 .elementor-element.elementor-element-691a9a3 {
grid-column: unset !important;
width: auto !important;
}
.elementor-1576 .elementor-element.elementor-element-ce5ceb4 {
--padding-top: 10px !important;
--padding-bottom: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.elementor-element-437741d img { height: 62px !important; width: auto !important; }
/* Hero CTAs span the page width: the button row fills the content width and
each button takes an equal half. */
.elementor-element-87b6cce {
width: 100% !important;
max-width: 100% !important;
gap: 14px !important;
--gap: 14px 14px !important;
--column-gap: 14px !important;
}
.elementor-element-13d545f .elementor-button,
.elementor-element-2f9d82c .elementor-button {
font-size: 14px !important;
letter-spacing: 1px !important;
padding: 15px 8px !important;
}
/* --- SERVICE CARDS -------------------------------------------------------
Titles were right-shifted and clipping; descriptions were right-aligned.
Make the whole card content full-width and LEFT-aligned, content pinned
to the bottom with comfortable padding. */
.elementor-element-ee305d2,
.elementor-element-13cd1fd,
.elementor-element-49584ef {
--align-items: stretch !important;
align-items: stretch !important;
--padding-left: 22px !important;
--padding-right: 22px !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
.elementor-element-4756724,
.elementor-element-3429a48,
.elementor-element-73c8bb4,
.elementor-element-9cc6169,
.elementor-element-296da43,
.elementor-element-3f0e55c {
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
}
.elementor-element-4756724 .elementor-heading-title,
.elementor-element-3429a48 .elementor-heading-title,
.elementor-element-73c8bb4 .elementor-heading-title,
.elementor-element-9cc6169,
.elementor-element-296da43,
.elementor-element-3f0e55c {
text-align: left !important;
}
/* Tighten gap between service card title and subtext */
.elementor-element-4756724,
.elementor-element-3429a48,
.elementor-element-73c8bb4 {
margin-bottom: 2px !important;
}
.elementor-element-9cc6169,
.elementor-element-296da43,
.elementor-element-3f0e55c {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --- STATS (25+ Years / 985+ Properties) — HOME PAGE --------------------
Stack rows vertically. Hide the single-sided Elementor divider and use
CSS ::before/::after on the heading to draw symmetric lines on both sides.
Use 3-class specificity to beat the desktop rule (.elementor-12 .elementor-element.elementor-element-515e498)
which sets gap: 0 48px and has no media query — so it would otherwise win. */
.elementor-12 .elementor-element.elementor-element-515e498 {
--flex-direction: column !important;
flex-direction: column !important;
--align-items: stretch !important;
align-items: stretch !important;
--gap: 0 28px !important;
gap: 28px 0 !important;
--row-gap: 28px !important;
--column-gap: 0px !important;
row-gap: 28px !important;
--padding-top: 32px !important;
--padding-bottom: 32px !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-element-c324021,
.elementor-element-32f49ab {
width: 100% !important;
max-width: 100% !important;
}
.elementor-element-35c66a9,
.elementor-element-f2f488f {
display: none !important;
}
.elementor-element-105061b,
.elementor-element-552f46a {
width: 100% !important;
}
.elementor-element-105061b .elementor-heading-title,
.elementor-element-552f46a .elementor-heading-title {
display: flex !important;
align-items: center !important;
gap: 16px !important;
font-size: 24px !important;
font-weight: 500 !important;
color: #818181 !important;
white-space: nowrap !important;
width: 100% !important;
}
.elementor-element-105061b .elementor-heading-title::before,
.elementor-element-105061b .elementor-heading-title::after,
.elementor-element-552f46a .elementor-heading-title::before,
.elementor-element-552f46a .elementor-heading-title::after {
content: "" !important;
flex: 1 !important;
height: 1px !important;
background: #EFD1A7 !important;
display: block !important;
}
/* --- ABOUT PAGE STATS (25+ Years / 985+ Properties) --------------------
Same treatment as home: hide single-sided dividers, use ::before/::after
on the heading for symmetric gold lines on both sides. */
.elementor-element-de32cc4 {
--flex-direction: column !important;
flex-direction: column !important;
--align-items: stretch !important;
align-items: stretch !important;
--gap: 28px 0 !important;
gap: 28px !important;
--padding-top: 32px !important;
--padding-bottom: 32px !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-element-229b797,
.elementor-element-e319169 {
width: 100% !important;
max-width: 100% !important;
}
.elementor-element-229b797 .elementor-widget-divider,
.elementor-element-e319169 .elementor-widget-divider {
display: none !important;
}
.elementor-element-0b2e6ec,
.elementor-element-aafc25f {
width: 100% !important;
}
.elementor-element-0b2e6ec .elementor-heading-title,
.elementor-element-aafc25f .elementor-heading-title {
display: flex !important;
align-items: center !important;
gap: 16px !important;
font-size: 24px !important;
font-weight: 500 !important;
color: #818181 !important;
white-space: nowrap !important;
width: 100% !important;
}
.elementor-element-0b2e6ec .elementor-heading-title::before,
.elementor-element-0b2e6ec .elementor-heading-title::after,
.elementor-element-aafc25f .elementor-heading-title::before,
.elementor-element-aafc25f .elementor-heading-title::after {
content: "" !important;
flex: 1 !important;
height: 1px !important;
background: #EFD1A7 !important;
display: block !important;
}
/* --- PULL-QUOTE (Real estate, like motherhood) --------------------------
Fill more of the width and size up so it reads as a statement. */
.elementor-element-9e20498 {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
--padding-left: 24px !important;
--padding-right: 24px !important;
padding-left: 24px !important;
padding-right: 24px !important;
--padding-top: 48px !important;
--padding-bottom: 48px !important;
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.elementor-element-4e4a50c {
width: 100% !important;
max-width: 100% !important;
}
.elementor-element-4e4a50c p {
font-size: clamp(28px, 8.5vw, 42px) !important;
line-height: 1.2 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- SECTION SPACING ----------------------------------------------------
Add breathing room between the dark pull-quote band and the About photo
section that follows it. */
.elementor-element-8d7f066 {
--margin-bottom: 40px !important;
margin-bottom: 40px !important;
}
/* --- ABOUT SECTION padding — home (fb43632) and about page (fa56956) ----
On mobile the section stacks photo above text; 120px vertical padding just
creates dead space. Drop to something sensible. */
.elementor-element-fb43632 {
--padding-top: 72px !important;
--padding-bottom: 40px !important;
--padding-block-start: 72px !important;
--padding-block-end: 40px !important;
}
.e-con-full.elementor-element-fb43632 {
padding-block-start: 72px !important;
padding-block-end: 40px !important;
}
/* About page: add breathing room between hero and Angela section on mobile */
.elementor-element-fa56956 {
--padding-top: 72px !important;
--padding-bottom: 40px !important;
--padding-block-start: 72px !important;
--padding-block-end: 40px !important;
}
.e-con-full.elementor-element-fa56956 {
padding-block-start: 72px !important;
padding-block-end: 40px !important;
}
/* The inner flex row (5699db3 on about page, 50dab17 on home) gets gap:50px
from the 1024px breakpoint — still active on mobile. Kill it. */
.elementor-element-5699db3,
.elementor-element-50dab17 {
--gap: 0 !important;
--row-gap: 0 !important;
--column-gap: 0 !important;
gap: 0 !important;
}
/* The photo column has min-height:44vh which pads it out way beyond the image.
Remove it so height is content-driven.
about page: c92bbec, home: c1b1e87 */
.elementor-element-c92bbec,
.elementor-element-c1b1e87 {
--min-height: 0 !important;
min-height: 0 !important;
}
/* --- CONTACT: tighten the gap between intro and the form ----------------
The contact section was --min-height:77vh + 250px top padding on mobile,
leaving a big empty band between the "Let's Get in Touch" intro and the
form. Bring both down to sensible values. */
.elementor-element-71884ca {
--min-height: auto !important;
min-height: auto !important;
height: auto !important;
--padding-top: 60px !important;
--padding-bottom: 40px !important;
padding-top: 60px !important;
padding-bottom: 40px !important;
justify-content: flex-end !important;
--justify-content: flex-end !important;
}
.elementor-element-71884ca > .e-con-inner {
justify-content: flex-end !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* ==========================================================================
ABOUT SECTION — tablet/compressed collapse (768px–1200px)
At intermediate widths Elementor keeps the photo+text side-by-side but the
columns become oddly narrow. Stack them at ≤1200px so there's only ever
two states: full desktop side-by-side, or stacked column.
========================================================================== */
@media (max-width: 1200px) {
/* Outer flex row → column so photo stacks above text */
.elementor-element-5699db3,
.elementor-element-50dab17 {
flex-direction: column !important;
--flex-direction: column !important;
--gap: 0 !important;
gap: 0 !important;
}
/* Photo outer wrappers: full width */
.elementor-element-beaa93a,
.elementor-element-7b23ae3,
.elementor-element-c92bbec,
.elementor-element-c1b1e87 {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
--min-height: 0 !important;
min-height: 0 !important;
}
/* Photo image widget: fill column */
.elementor-element-1d41a7d,
.elementor-element-2c6ff04 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.elementor-element-1d41a7d img,
.elementor-element-2c6ff04 img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: unset !important;
display: block !important;
}
/* Text columns: full width */
.elementor-element-bb0c50c,
.elementor-element-6b3db21 {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
--padding-left: 60px !important;
--padding-right: 60px !important;
--padding-top: 40px !important;
--padding-bottom: 40px !important;
padding-left: 60px !important;
padding-right: 60px !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
/* ==========================================================================
ABOUT PAGE — REVIEW BADGES between photo and "About Angela" on mobile
A copy of the badge container (mr-badges-mobile) is inserted in the HTML
right before the text column. Hide the copy on desktop, hide the original
on mobile so each context shows exactly one instance.
========================================================================== */
.mr-badges-mobile { display: none; }
@media (max-width: 767px) {
/* Outer flex row: force column direction on mobile so photo, badges, text stack */
.elementor-element-5699db3,
.elementor-element-50dab17 {
--gap: 0 !important;
--row-gap: 0 !important;
--column-gap: 0 !important;
gap: 0 !important;
flex-direction: column !important;
--flex-direction: column !important;
}
/* Photo outer column (beaa93a = home, c92bbec = about): full width, no padding */
.elementor-element-beaa93a,
.elementor-element-c92bbec {
--min-height: 0 !important;
min-height: 0 !important;
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
--padding-top: 0 !important;
--padding-bottom: 0 !important;
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
padding-block-start: 0 !important;
padding-block-end: 0 !important;
padding-block: 0 !important;
}
/* Photo inner container c1b1e87: full width, no extra height */
.elementor-element-c1b1e87 {
--min-height: 0 !important;
min-height: 0 !important;
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
--padding-top: 0 !important;
--padding-bottom: 0 !important;
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
padding-block-start: 0 !important;
padding-block-end: 0 !important;
padding-block: 0 !important;
}
.elementor-element-1d41a7d,
.elementor-element-2c6ff04 {
width: 100% !important;
max-width: 100% !important;
--container-widget-width: 100% !important;
flex: 0 0 100% !important;
overflow: hidden !important;
}
.elementor-element-1d41a7d img,
.elementor-element-2c6ff04 img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Badge row (mobile copy): full width, side-by-side badges, tight padding */
.mr-badges-mobile {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 20px !important;
margin: 0 !important;
--padding-top: 16px !important;
--padding-bottom: 16px !important;
--padding-block-start: 16px !important;
--padding-block-end: 16px !important;
padding-block-start: 16px !important;
padding-block-end: 16px !important;
box-sizing: border-box !important;
}
.mr-badges-mobile .elementor-widget-image {
flex: 0 1 auto !important;
max-width: 48% !important;
}
.mr-badges-mobile .elementor-widget-image img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* Text column: comfortable padding so copy breathes inside the section */
.elementor-element-6b3db21,
.elementor-element-bb0c50c {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
--padding-top: 32px !important;
--padding-bottom: 0 !important;
--padding-left: 24px !important;
--padding-right: 24px !important;
--padding-block-start: 32px !important;
--padding-block-end: 0 !important;
padding-block-start: 32px !important;
padding-block-end: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Hide the original badges on mobile (about page: 0cb8952 original, home: fa2e5b8) */
.elementor-element-0cb8952:not(.mr-badges-mobile),
.elementor-element-fa2e5b8 {
display: none !important;
}
}
/* ==========================================================================
INNER-PAGE HERO TITLES — match the weight and fluid sizing of the home hero
Home hero (5209525) is Cormorant Garamond 700 at clamp(32px,6.0vw,88px).
The other pages use the same font but at weight 500–600 and a fixed 60px.
Override every inner-page hero heading to 700 + the same fluid clamp.
Page 21 (Contact) uses element 201f3cd for the real hero title; ab381ab is
an eyebrow label and is intentionally left alone.
========================================================================== */
/* elementor-invisible keeps visibility:hidden when animation JS doesn't run.
Force all inner-page hero widgets visible. */
.elementor-element-de77ca6,
.elementor-element-0c98a58,
.elementor-element-201f3cd,
.elementor-element-fabb9ab,
.elementor-element-05184d1,
.elementor-element-238111a,
.elementor-element-34c5378,
.elementor-element-00aad71,
.elementor-element-8c27b95 {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
.elementor-15 .elementor-element.elementor-element-de77ca6 .elementor-heading-title,
.elementor-19 .elementor-element.elementor-element-0c98a58 .elementor-heading-title,
.elementor-21 .elementor-element.elementor-element-201f3cd .elementor-heading-title,
.elementor-23 .elementor-element.elementor-element-fabb9ab .elementor-heading-title,
.elementor-966 .elementor-element.elementor-element-05184d1 .elementor-heading-title {
font-weight: 700 !important;
font-size: clamp(32px, 6.0vw, 88px) !important;
line-height: 1.1 !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
color: #FFF6EA !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
}
/* Keep 2-class fallback for any mobile/tablet overrides below */
.elementor-element-de77ca6 .elementor-heading-title,
.elementor-element-0c98a58 .elementor-heading-title,
.elementor-element-201f3cd .elementor-heading-title,
.elementor-element-fabb9ab .elementor-heading-title,
.elementor-element-05184d1 .elementor-heading-title {
color: #FFF6EA !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
}
/* Hero subtext (body copy beneath the heading) */
.elementor-element-238111a, /* Community subtext */
.elementor-element-34c5378, /* Sold subtext */
.elementor-element-00aad71, /* YHV subtext */
.elementor-element-8c27b95 { /* About subtext */
color: #FFF6EA !important;
text-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
width: 100% !important;
max-width: 560px !important;
--container-widget-width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (min-width: 768px) {
.elementor-element-8c27b95 {
max-width: 720px !important;
}
}
.elementor-element-238111a *,
.elementor-element-34c5378 *,
.elementor-element-00aad71 *,
.elementor-element-8c27b95 * {
color: #FFF6EA !important;
text-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
}
/* Longer titles get a max-width so they stack gracefully on wide screens
rather than stretching as one unbroken line.
"Building Homes, Nurturing Communities" (~37 chars) — cap at 14ch per line.
"Get an Accurate Valuation of Your Property" (~42 chars) — tighter cap. */
.elementor-element-0c98a58 .elementor-heading-title { /* Community */
max-width: 22ch !important;
}
.elementor-element-fabb9ab .elementor-heading-title { /* About */
max-width: 22ch !important;
}
.elementor-element-05184d1 .elementor-heading-title { /* Your Home's Value */
max-width: 24ch !important;
}
@media (max-width: 767px) {
.elementor-15 .elementor-element.elementor-element-de77ca6 .elementor-heading-title,
.elementor-19 .elementor-element.elementor-element-0c98a58 .elementor-heading-title,
.elementor-21 .elementor-element.elementor-element-201f3cd .elementor-heading-title,
.elementor-23 .elementor-element.elementor-element-fabb9ab .elementor-heading-title,
.elementor-966 .elementor-element.elementor-element-05184d1 .elementor-heading-title {
font-size: clamp(44px, 11vw, 60px) !important;
max-width: 100% !important;
}
}
@media (max-width: 767px) {
/* Inner-page heroes: shorter height, less top padding on mobile */
.elementor-element-ce5f6a5,
.elementor-element-5a3091b,
.elementor-element-2008092,
.elementor-element-054b745 {
--min-height: clamp(340px, 55vh, 480px) !important;
min-height: clamp(340px, 55vh, 480px) !important;
--padding-top: 80px !important;
--padding-bottom: 0px !important;
padding-top: 80px !important;
padding-bottom: 0px !important;
}
}
/* ==========================================================================
INNER-PAGE HERO HEIGHTS — smooth responsive sizing
Vendor CSS sets these at 40-50vh with 150-250px padding-top, which creates
tiny heroes on desktop (40vh ≈ 400px with almost no usable space above the
title) and broken ones on mobile (50vh = 333px but 250px is wasted on
padding). Fix with clamp() heights and proportional padding at every
breakpoint. justify-content:center does the vertical placement.
ce5f6a5 = Sold (p=15) 5a3091b = Community (p=19)
2008092 = About (p=23) 054b745 = Your Home's Value (p=966)
========================================================================== */
.elementor-element-ce5f6a5,
.elementor-element-5a3091b,
.elementor-element-2008092,
.elementor-element-054b745 {
--min-height: clamp(480px, 65vh, 680px) !important;
min-height: clamp(480px, 65vh, 680px) !important;
--overlay-opacity: 0.52 !important;
--justify-content: center !important;
justify-content: center !important;
--align-items: center !important;
align-items: center !important;
}
/* About and Featured heroes: more top padding, less bottom */
.elementor-element-ce5f6a5,
.elementor-element-2008092 {
--padding-top: 220px !important;
--padding-bottom: 140px !important;
padding-top: 220px !important;
padding-bottom: 140px !important;
}
/* Reduce hero overlay haze on all inner pages */
.elementor-element-ce5f6a5::before,
.elementor-element-5a3091b::before,
.elementor-element-2008092::before,
.elementor-element-054b745::before {
opacity: 0.52 !important;
}
/* Community hero: more top, less bottom */
.elementor-19 .elementor-element.elementor-element-5a3091b {
--padding-top: 260px !important;
--padding-bottom: 80px !important;
padding-top: 260px !important;
padding-bottom: 80px !important;
}
@media (max-width: 1024px) {
.elementor-element-ce5f6a5,
.elementor-element-5a3091b,
.elementor-element-2008092,
.elementor-element-054b745 {
--min-height: clamp(420px, 60vh, 640px) !important;
min-height: clamp(420px, 60vh, 640px) !important;
--padding-top: 100px !important;
--padding-bottom: 0px !important;
padding-top: 100px !important;
padding-bottom: 0px !important;
}
}
/* Stats row: never wrap above mobile. Use 3-class specificity to beat vendor. */
.elementor-12 .elementor-element.elementor-element-515e498,
.elementor-23 .elementor-element.elementor-element-de32cc4 {
--flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
align-items: center !important;
--align-items: center !important;
--column-gap: 48px !important;
gap: 0 48px !important;
}
/* Stat group columns: keep as row, items centered, gap between line and text */
.elementor-12 .elementor-element.elementor-element-c324021,
.elementor-12 .elementor-element.elementor-element-32f49ab {
flex-wrap: nowrap !important;
align-items: center !important;
--column-gap: 16px !important;
gap: 0 16px !important;
}
/* Divider lines: vertically center on the stat number line, not the whole text block */
.elementor-element-35c66a9,
.elementor-element-f2f488f {
align-self: center !important;
--align-self: center !important;
}
/* Stat headings: single line so the divider aligns cleanly */
.elementor-element-105061b .elementor-heading-title,
.elementor-element-552f46a .elementor-heading-title {
white-space: nowrap !important;
}
/* Quote box: widen text container to fill the dark box at all widths. */
.elementor-12 .elementor-element.elementor-element-9e20498 {
--width: 85% !important;
width: 85% !important;
}
@media (max-width: 1200px) {
.elementor-12 .elementor-element.elementor-element-9e20498 {
--padding-top: 48px !important;
--padding-bottom: 48px !important;
padding-top: 48px !important;
padding-bottom: 48px !important;
--width: 92% !important;
width: 92% !important;
}
}
/* Community hero mobile: override the desktop 180px top padding */
@media (max-width: 767px) {
.elementor-19 .elementor-element.elementor-element-5a3091b {
--padding-top: 130px !important;
padding-top: 130px !important;
}
}
/* ==========================================================================
TESTIMONIAL CAROUSEL — custom replacement for the broken Elementor slider
========================================================================== */
.mr-testi-carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.mr-testi-track {
position: relative;
}
.mr-testi-slide {
display: none;
padding: 8px 0 24px;
}
.mr-testi-slide.mr-testi-active {
display: block;
}
.mr-testi-quote {
font-size: 15px;
line-height: 1.7;
color: inherit;
margin: 0 0 18px;
}
.mr-testi-attr {
display: none;
}
.mr-testi-controls {
display: none;
}
/* ==========================================================================
TESTIMONIAL GRID — about page 3-column auto-rotating grid
========================================================================== */
.mr-testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
width: 100%;
}
.mr-grid-card {
display: none;
border: 1px solid rgba(0,0,0,0.08);
padding: 32px 28px;
text-align: center;
}
.mr-grid-card.mr-grid-active {
display: block;
}
.mr-grid-quote {
font-size: 14px;
line-height: 1.75;
margin: 0 0 20px;
}
.mr-grid-attr {
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.6;
margin: 0;
}
.mr-grid-attr strong {
font-weight: 600;
opacity: 1;
}
.mr-grid-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 36px;
}
.mr-grid-prev,
.mr-grid-next {
cursor: pointer;
font-size: 22px;
color: #FFBA59;
padding: 0 6px;
line-height: 1;
display: inline-block;
user-select: none;
}
.mr-grid-prev:hover,
.mr-grid-next:hover {
opacity: 0.7;
}
.mr-grid-dots {
display: flex;
gap: 8px;
align-items: center;
}
.mr-grid-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #c4845a;
opacity: 0.25;
cursor: pointer;
border: none;
outline: none;
padding: 0;
display: block;
transition: opacity 0.2s;
}
.mr-grid-dot:focus {
outline: none;
}
.mr-grid-dot.mr-grid-dot-active {
opacity: 1;
}
@media (max-width: 1024px) {
.mr-testi-grid {
grid-template-columns: 1fr;
}
.mr-grid-card.mr-grid-active ~ .mr-grid-card.mr-grid-active {
display: none;
}
}
/* ==========================================================================
ABOUT SECTION — desktop layout fixes (homepage fb43632, about page fa56956)
Elementor's per-page CSS (3-class specificity under .elementor-12/.elementor-23)
sets several bad values:
• Section padding: 60-70px top — wasteful dead space above the photo
• Photo widget (1d41a7d): width:70% — leaves 30% gap, shows landscape sliver
• Photo widget (2c6ff04 on about): same issue
Match 3-class specificity to reliably override. Image must NEVER be cropped
at any width — use height:auto so it scales naturally to its column width.
========================================================================== */
/* Section: remove excess padding so image starts flush, max-width cap */
.elementor-12 .elementor-element.elementor-element-fb43632,
.elementor-23 .elementor-element.elementor-element-fa56956 {
--padding-top: 0px !important;
--padding-bottom: 0px !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
--margin-bottom: 60px !important;
margin-bottom: 60px !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* About page only — extra top gap between hero and Angela section */
.elementor-23 .elementor-element.elementor-element-fa56956 {
--margin-top: 80px !important;
margin-top: 80px !important;
}
/* Photo widget: always fill 100% of its column, never cropped */
.elementor-12 .elementor-element.elementor-element-1d41a7d,
.elementor-23 .elementor-element.elementor-element-2c6ff04 {
width: 100% !important;
max-width: 100% !important;
--container-widget-width: 100% !important;
--container-widget-flex-grow: 1 !important;
}
.elementor-12 .elementor-element.elementor-element-1d41a7d img,
.elementor-23 .elementor-element.elementor-element-2c6ff04 img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: unset !important;
display: block !important;
}
/* Photo outer column: stretch to fill, no min-height forcing extra space */
.elementor-12 .elementor-element.elementor-element-beaa93a,
.elementor-23 .elementor-element.elementor-element-c92bbec {
--min-height: 0 !important;
min-height: 0 !important;
}
/* Review badge images — Home (1701fdc, 3d7c3bb) + About (627b33a, 3759744):
The widget__width-initial class + missing Elementor runtime causes these to
shrink-wrap. Force the widget div to fill its grid cell, then size the img. */
.elementor-element-1701fdc,
.elementor-element-3d7c3bb,
.elementor-element-627b33a,
.elementor-element-3759744 {
width: 100% !important;
max-width: 100% !important;
--container-widget-width: 100% !important;
}
.elementor-element-1701fdc img,
.elementor-element-3d7c3bb img,
.elementor-element-627b33a img,
.elementor-element-3759744 img {
width: 100% !important;
max-width: 340px !important;
height: auto !important;
display: block !important;
}
/* Desktop: widen badge grid so each 1fr cell is bigger */
@media (min-width: 768px) {
.elementor-12 .elementor-element.elementor-element-fa2e5b8,
.elementor-23 .elementor-element.elementor-element-0cb8952 {
--width: 100% !important;
width: 100% !important;
max-width: 420px !important;
}
.elementor-element-1701fdc img,
.elementor-element-3d7c3bb img,
.elementor-element-627b33a img,
.elementor-element-3759744 img {
max-width: 100% !important;
}
}
/* Text column: sensible padding so content breathes */
.elementor-12 .elementor-element.elementor-element-bb0c50c,
.elementor-23 .elementor-element.elementor-element-6b3db21 {
--padding-top: 48px !important;
--padding-bottom: 48px !important;
--padding-left: 56px !important;
--padding-right: 56px !important;
}
/* Stacked breakpoint (≤1200px): photo column constrained so image doesn't fill the screen */
@media (max-width: 1200px) {
.elementor-12 .elementor-element.elementor-element-beaa93a,
.elementor-23 .elementor-element.elementor-element-c92bbec {
max-width: 560px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-12 .elementor-element.elementor-element-1d41a7d img,
.elementor-23 .elementor-element.elementor-element-2c6ff04 img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: unset !important;
object-position: unset !important;
}
/* Text column: tighter padding, tighter internal gaps */
.elementor-12 .elementor-element.elementor-element-bb0c50c,
.elementor-23 .elementor-element.elementor-element-6b3db21 {
--padding-left: 48px !important;
--padding-right: 48px !important;
--padding-top: 40px !important;
--padding-bottom: 40px !important;
padding-left: 48px !important;
padding-right: 48px !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
--gap: 16px 0px !important;
--row-gap: 16px !important;
gap: 16px 0 !important;
justify-content: flex-start !important;
--justify-content: flex-start !important;
}
/* Badges grid: full width, natural size */
.elementor-12 .elementor-element.elementor-element-fa2e5b8,
.elementor-23 .elementor-element.elementor-element-0cb8952 {
--width: 100% !important;
width: 100% !important;
max-width: 500px !important;
}
/* Testimonial carousel: full width */
.elementor-12 .elementor-element.elementor-element-21d772c,
.elementor-23 .elementor-element.elementor-element-21d772c {
width: 100% !important;
--width: 100% !important;
max-width: 100% !important;
}
}
/* Mobile (≤767px): photo still full — never crop */
@media (max-width: 767px) {
.elementor-12 .elementor-element.elementor-element-1d41a7d img,
.elementor-23 .elementor-element.elementor-element-2c6ff04 img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: unset !important;
object-position: unset !important;
}
.elementor-12 .elementor-element.elementor-element-bb0c50c,
.elementor-23 .elementor-element.elementor-element-6b3db21 {
--padding-left: 24px !important;
--padding-right: 24px !important;
--padding-top: 32px !important;
--padding-bottom: 0px !important;
padding-left: 24px !important;
padding-right: 24px !important;
padding-top: 32px !important;
padding-bottom: 0px !important;
--gap: 12px 0px !important;
--row-gap: 12px !important;
justify-content: flex-start !important;
--justify-content: flex-start !important;
gap: 12px 0 !important;
}
}
/* ==========================================================================
CONTACT SECTION — spacing fixes
========================================================================== */
/* More gap between email and address list items (homepage + contact page) */
.elementor-element-c4d567c .elementor-icon-list-item,
.elementor-element-c15d82e .elementor-icon-list-item {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
@media (max-width: 767px) {
.elementor-element-c15d82e .elementor-icon-list-text {
font-size: 18px !important;
}
.elementor-element-c15d82e .elementor-icon-list-icon svg {
width: 20px !important;
height: 20px !important;
}
/* Homepage contact — larger title and icon list on mobile */
.elementor-element-ac88ae5 .elementor-heading-title {
font-size: clamp(32px, 9vw, 48px) !important;
}
.elementor-element-c4d567c .elementor-icon-list-text {
font-size: 18px !important;
}
.elementor-element-c4d567c .elementor-icon-list-icon svg {
width: 20px !important;
height: 20px !important;
}
}
/* About page contact section — make headings + icon list match contact page */
.elementor-element-56b5331,
.elementor-element-0ea741d {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
.elementor-element-56b5331 .elementor-heading-title {
color: #FFF6EA !important;
font-size: 14px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-align: center !important;
}
.elementor-element-0ea741d .elementor-heading-title {
color: #FFF6EA !important;
font-family: "Cormorant Garamond", Sans-serif !important;
font-weight: 600 !important;
font-size: 61px !important;
line-height: 1.1 !important;
text-align: center !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
}
.elementor-element-a95f03b .elementor-icon-list-item {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.elementor-element-a95f03b .elementor-icon-list-text,
.elementor-element-a95f03b .elementor-icon-list-icon svg {
color: #FFF6EA !important;
fill: #FFF6EA !important;
}
/* Contact title banner — content pinned to bottom, reduced height to cut top image space */
.elementor-element-71884ca,
.elementor-element-ad452f4 {
min-height: clamp(280px, 35vh, 420px) !important;
--min-height: clamp(280px, 35vh, 420px) !important;
justify-content: flex-end !important;
}
.elementor-element-71884ca > .e-con-inner,
.elementor-element-ad452f4 > .e-con-inner {
padding-top: 40px !important;
padding-bottom: 56px !important;
justify-content: flex-end !important;
align-items: center !important;
}
/* Contact page hero — taller to show more of the image above the content */
.elementor-element-d40aa30 {
min-height: clamp(420px, 70vh, 750px) !important;
--min-height: clamp(420px, 70vh, 750px) !important;
justify-content: flex-end !important;
}
.elementor-element-d40aa30 > .e-con-inner {
padding-top: 40px !important;
padding-bottom: 56px !important;
justify-content: flex-end !important;
align-items: center !important;
}
/* Form wrapper — negative top margin + positioning context for flowers */
.elementor-element-97e50c9,
.elementor-element-454c0a7,
.elementor-element-7b73a45 {
--margin-top: -30px !important;
margin-top: -30px !important;
position: relative !important;
overflow: visible !important;
}
/* Corner flowers — pinned to corners, always behind the form, no animation */
.elementor-element-bc7bd17,
.elementor-element-52647f6,
.elementor-element-3561d6f,
.elementor-element-29eb51e,
.elementor-element-a8349ab,
.elementor-element-cebe713 {
position: absolute !important;
z-index: 0 !important;
pointer-events: none !important;
animation: none !important;
transition: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.elementor-element-bc7bd17,
.elementor-element-3561d6f,
.elementor-element-a8349ab {
left: -40px !important;
bottom: -30px !important;
top: auto !important;
right: auto !important;
width: 280px !important;
max-width: 280px !important;
transform: rotate(79deg) !important;
}
.elementor-element-bc7bd17 img,
.elementor-element-3561d6f img,
.elementor-element-a8349ab img {
width: 280px !important;
height: auto !important;
}
.elementor-element-52647f6,
.elementor-element-29eb51e,
.elementor-element-cebe713 {
right: -40px !important;
bottom: -30px !important;
top: auto !important;
left: auto !important;
width: 280px !important;
max-width: 280px !important;
transform: rotate(-88deg) !important;
}
.elementor-element-52647f6 img,
.elementor-element-29eb51e img,
.elementor-element-cebe713 img {
width: 280px !important;
height: auto !important;
}
/* Form container always on top of flowers */
.elementor-element-b0eed74,
.elementor-element-1ad1f15,
.elementor-element-fb4fcc9 {
position: relative !important;
z-index: 1 !important;
}
/* ==========================================================================
ALL INNER-PAGE HEROES — dark overlay fix
The vendor CSS sets overlays via ::before { background-color:#968655 }
but Elementor's overlay system needs position:absolute + content:'' to
paint. Without the live runtime these never fire. Force them all here.
Pages: Community (5a3091b), Sold (ce5f6a5), About (2008092), YHV (054b745)
========================================================================== */
.elementor-element-5a3091b,
.elementor-element-ce5f6a5,
.elementor-element-2008092,
.elementor-element-054b745,
.elementor-element-d40aa30,
.elementor-element-ad452f4 {
position: relative !important;
}
.elementor-element-5a3091b::before,
.elementor-element-ce5f6a5::before,
.elementor-element-2008092::before,
.elementor-element-054b745::before,
.elementor-element-d40aa30::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background-color: #968655 !important;
opacity: 0.52 !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Direct children of the hero container must sit above the ::before overlay (z-index:1).
Some heroes use .e-con-inner, others use a sibling container div directly. */
.elementor-element-5a3091b > *,
.elementor-element-ce5f6a5 > *,
.elementor-element-2008092 > *,
.elementor-element-054b745 > *,
.elementor-element-d40aa30 > * {
position: relative !important;
z-index: 2 !important;
}
/* Shared hero background — all inner pages use the rolling green hills aerial.
Must override BOTH the element bg AND the motion-effects-layer child,
which the vendor CSS uses to set the actual visible background image. */
.elementor-element-054b745,
.elementor-element-d40aa30,
.elementor-element-ad452f4,
.elementor-element-ce5f6a5,
.elementor-element-2008092,
.elementor-element-5a3091b {
background-image: url('2026/03/Gemini_Generated_Image_gczfasgczfasgczf.png') !important;
background-size: cover !important;
background-position: center !important;
}
.elementor-element-054b745 .elementor-motion-effects-layer,
.elementor-element-d40aa30 .elementor-motion-effects-layer,
.elementor-element-ad452f4 .elementor-motion-effects-layer,
.elementor-element-ce5f6a5 .elementor-motion-effects-layer,
.elementor-element-2008092 .elementor-motion-effects-layer,
.elementor-element-5a3091b .elementor-motion-effects-layer {
background-image: url('2026/03/Gemini_Generated_Image_gczfasgczfasgczf.png') !important;
background-size: cover !important;
background-position: center !important;
}
/* ==========================================================================
COMMUNITY PAGE — content section padding (symmetric, on-theme)
Vendor CSS has padding-left:80px vs padding-right:50px on every content
section — asymmetric. Set all to symmetric 80px horizontal padding
matching the rest of the site.
Sections: 5e99bd3 (Garage 79), 425a5a4 (Date Festival), 2728bd2 (Ren Faire),
fbbae02 (Horse Camp), a0dbbd7 (Birdsong)
========================================================================== */
.elementor-19 .elementor-element.elementor-element-5e99bd3,
.elementor-19 .elementor-element.elementor-element-425a5a4,
.elementor-19 .elementor-element.elementor-element-2728bd2,
.elementor-19 .elementor-element.elementor-element-fbbae02,
.elementor-19 .elementor-element.elementor-element-a0dbbd7 {
--padding-left: 80px !important;
--padding-right: 80px !important;
--padding-top: 80px !important;
--padding-bottom: 80px !important;
padding-left: 80px !important;
padding-right: 80px !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* All content sections: explicit white background */
.elementor-19 .elementor-element.elementor-element-5e99bd3,
.elementor-19 .elementor-element.elementor-element-2728bd2,
.elementor-19 .elementor-element.elementor-element-a0dbbd7 {
background-color: #ffffff !important;
}
/* Alternate sections get a warm off-white background to break up the page */
.elementor-19 .elementor-element.elementor-element-425a5a4,
.elementor-19 .elementor-element.elementor-element-fbbae02 {
background-color: #f9f5f0 !important;
}
/* Carousel wrapper sections: white background */
.elementor-19 .elementor-element.elementor-element-a49ec35,
.elementor-19 .elementor-element.elementor-element-5c9fa87 {
background-color: #ffffff !important;
}
/* ==========================================================================
COMMUNITY PAGE — carousel card background images
Elementor's JS injects these from data-settings at runtime; it doesn't run
in the static scrape so we set them directly here.
========================================================================== */
/* First carousel — wine country */
.elementor-19 .elementor-element.elementor-element-5cad9ff { background-image: url('2026/03/imgi_34_temecula-valley-wine-tasting.webp') !important; background-size: cover !important; background-position: center !important; }
.elementor-19 .elementor-element.elementor-element-a2f839d { background-image: url('2026/05/Murrietas-Legend-1.png') !important; background-size: cover !important; background-position: center !important; }
.elementor-19 .elementor-element.elementor-element-9b5aa0f { background-image: url('2026/04/Balloon-Festival.jpeg') !important; background-size: cover !important; background-position: center !important; }
.elementor-19 .elementor-element.elementor-element-cd19d48 { background-image: url('2026/03/307768680_507172201416634_7249257699891504307_n.jpg') !important; background-size: cover !important; background-position: center !important; }
/* Second carousel — local spots */
.elementor-19 .elementor-element.elementor-element-d317366 { background-image: url('2026/04/BBQ.jpg') !important; background-size: cover !important; background-position: center !important; min-height: 40vh !important; }
.elementor-19 .elementor-element.elementor-element-8db6676 { background-image: url('2026/04/Sky-Sailing.jpg') !important; background-size: cover !important; background-position: center !important; min-height: 40vh !important; }
.elementor-19 .elementor-element.elementor-element-ab08284 { background-image: url('2026/04/Shadow-Mountain.jpg') !important; background-size: cover !important; background-position: center !important; min-height: 40vh !important; }
.elementor-19 .elementor-element.elementor-element-b1d52d6 { background-image: url('2026/04/La-Serenissima.jpg') !important; background-size: cover !important; background-position: center !important; min-height: 40vh !important; }
/* All carousel cards: min-height + position context for overlay */
.elementor-19 .elementor-element.elementor-element-5cad9ff,
.elementor-19 .elementor-element.elementor-element-a2f839d,
.elementor-19 .elementor-element.elementor-element-9b5aa0f,
.elementor-19 .elementor-element.elementor-element-cd19d48 {
min-height: 40vh !important;
}
/* Carousel card gradient overlays — vendor sets these via ::before but
the static scrape needs content:'' to activate them */
.elementor-19 .elementor-element.elementor-element-30b59a4,
.elementor-19 .elementor-element.elementor-element-dcfa206,
.elementor-19 .elementor-element.elementor-element-be51988,
.elementor-19 .elementor-element.elementor-element-a25c021,
.elementor-19 .elementor-element.elementor-element-e86375b,
.elementor-19 .elementor-element.elementor-element-824abff,
.elementor-19 .elementor-element.elementor-element-59cad09,
.elementor-19 .elementor-element.elementor-element-34c53a2 {
position: relative !important;
}
.elementor-19 .elementor-element.elementor-element-30b59a4::before,
.elementor-19 .elementor-element.elementor-element-dcfa206::before,
.elementor-19 .elementor-element.elementor-element-be51988::before,
.elementor-19 .elementor-element.elementor-element-a25c021::before,
.elementor-19 .elementor-element.elementor-element-e86375b::before,
.elementor-19 .elementor-element.elementor-element-824abff::before,
.elementor-19 .elementor-element.elementor-element-59cad09::before,
.elementor-19 .elementor-element.elementor-element-34c53a2::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
/* Warm espresso brown drawn from the site's own dark palette (#2f2417,
used for the mobile nav overlay) instead of the previous muddy olive
(#4D4018), which didn't match anything else on the site. */
background: linear-gradient(180deg, rgba(47,36,23,0) 40%, rgba(47,36,23,0.92) 100%) !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Card inner content sits above the gradient */
.elementor-19 .elementor-element.elementor-element-30b59a4 > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-dcfa206 > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-be51988 > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-a25c021 > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-e86375b > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-824abff > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-59cad09 > .e-con-inner,
.elementor-19 .elementor-element.elementor-element-34c53a2 > .e-con-inner {
position: relative !important;
z-index: 2 !important;
}
/* ==========================================================================
COMMUNITY PAGE — full-card clickable area
========================================================================== */
.elementor-element-5cad9ff,
.elementor-element-a2f839d,
.elementor-element-9b5aa0f,
.elementor-element-cd19d48,
.elementor-element-d317366,
.elementor-element-8db6676,
.elementor-element-ab08284,
.elementor-element-b1d52d6 { position: relative !important; }
/* ==========================================================================
COMMUNITY PAGE — carousel card titles match the site's heading system
(Cormorant Garamond, uppercase, letter-spaced — same as the other place
headings on this page like "Garage 79 | Beer Garden". Previously set to
plain Nunito Sans, which didn't match anything else on the page.
========================================================================== */
.elementor-element-da2136a .elementor-heading-title,
.elementor-element-3161318 .elementor-heading-title,
.elementor-element-51101e4 .elementor-heading-title,
.elementor-element-c2ad811 .elementor-heading-title,
.elementor-element-3c2b0c2 .elementor-heading-title,
.elementor-element-0ad7ae0 .elementor-heading-title,
.elementor-element-5bf6a5e .elementor-heading-title,
.elementor-element-455a0db .elementor-heading-title {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.01em !important;
font-size: clamp(13px, 1.5vw, 16px) !important;
line-height: 1.3 !important;
color: #fff !important;
display: block !important;
max-width: 100% !important;
/* Titles wrap instead of truncating — never cut a place name off with an
ellipsis. The card has enough bottom padding (see thumbnail rule below)
to fit two lines when a title is long. */
white-space: normal !important;
overflow: visible !important;
}
.elementor-element-da2136a .elementor-heading-title a,
.elementor-element-3161318 .elementor-heading-title a,
.elementor-element-51101e4 .elementor-heading-title a,
.elementor-element-c2ad811 .elementor-heading-title a,
.elementor-element-3c2b0c2 .elementor-heading-title a,
.elementor-element-0ad7ae0 .elementor-heading-title a,
.elementor-element-5bf6a5e .elementor-heading-title a,
.elementor-element-455a0db .elementor-heading-title a {
display: block !important;
white-space: normal !important;
max-width: 100% !important;
}
/* ==========================================================================
COMMUNITY PAGE — typography: section headings + body text
Headings: Cormorant Garamond, uppercase, warm tan #C2B59B
Body text: 18px, muted gray #6F6F6F
Dividers: use the primary warm tan color
========================================================================== */
.elementor-element-fd2d66c .elementor-heading-title,
.elementor-element-784f374 .elementor-heading-title,
.elementor-element-eb759a0 .elementor-heading-title,
.elementor-element-935f6ea .elementor-heading-title,
.elementor-element-ef8a883 .elementor-heading-title {
font-family: "Cormorant Garamond", serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: clamp(26px, 2.6vw, 38px) !important;
color: #C2B59B !important;
letter-spacing: 0.02em !important;
}
/* Section heading links — inherit the warm tan, no underline */
.elementor-element-fd2d66c .elementor-heading-title a,
.elementor-element-784f374 .elementor-heading-title a,
.elementor-element-eb759a0 .elementor-heading-title a,
.elementor-element-935f6ea .elementor-heading-title a,
.elementor-element-ef8a883 .elementor-heading-title a {
color: inherit !important;
text-decoration: none !important;
}
.elementor-element-fd2d66c .elementor-heading-title a:hover,
.elementor-element-784f374 .elementor-heading-title a:hover,
.elementor-element-eb759a0 .elementor-heading-title a:hover,
.elementor-element-935f6ea .elementor-heading-title a:hover,
.elementor-element-ef8a883 .elementor-heading-title a:hover {
color: #EFD1A7 !important;
}
.elementor-element-690d14b p,
.elementor-element-a7ae213 p,
.elementor-element-3840cdd p,
.elementor-element-d011742 p,
.elementor-element-d011742 span,
.elementor-element-fc39f38 p {
font-size: 18px !important;
line-height: 1.75 !important;
color: #6F6F6F !important;
}
/* Remove text-transform:capitalize from body (it title-cases every word) */
.elementor-element-690d14b p,
.elementor-element-a7ae213 p,
.elementor-element-3840cdd p,
.elementor-element-d011742 p,
.elementor-element-fc39f38 p {
text-transform: none !important;
}
/* Dividers color — use warm tan to match the headings */
.elementor-19 .elementor-element-c9448ce .elementor-divider-separator,
.elementor-19 .elementor-element-262035d .elementor-divider-separator,
.elementor-19 .elementor-element-cffd742 .elementor-divider-separator,
.elementor-19 .elementor-element-caf7d07 .elementor-divider-separator,
.elementor-19 .elementor-element-2cf8f30 .elementor-divider-separator {
border-color: #C2B59B !important;
}
/* ==========================================================================
SECTION HERO SUBTEXT — enlarged across all pages
The paragraph/body text beneath section hero headings was too small (~14-16px
vendor default). These rules bump it to 20px for comfortable reading at those
large-heading sizes.
IDs: listings page (34c5378), valuation page (00aad71), community (238111a),
about/p23 (8c27b95)
========================================================================== */
.elementor-element-34c5378,
.elementor-element-34c5378 p,
.elementor-element-34c5378 div,
.elementor-element-00aad71,
.elementor-element-00aad71 p,
.elementor-element-00aad71 div,
.elementor-element-238111a,
.elementor-element-238111a p,
.elementor-element-238111a div,
.elementor-element-8c27b95,
.elementor-element-8c27b95 p,
.elementor-element-8c27b95 div {
font-size: 20px !important;
line-height: 1.7 !important;
}
/* ==========================================================================
COMMUNITY PAGE — carousel converted to a static thumbnail row
Elementor's carousel JS never runs in this static scrape, so there is no
working prev/next control — a "carousel" that can only ever show slide 1
just hides 3 of the 4 recommended places for nothing. Converting
.swiper-wrapper to a CSS grid shows all 4 places per section as a row of
thumbnails (this also incidentally fixes the collapsed-height bug: the
grid gives every ancestor a real height instead of relying on
Elementor's JS to set one, which never happens here).
========================================================================== */
.elementor-19 .elementor-element-51f5e48 .e-n-carousel,
.elementor-19 .elementor-element-7f2ebf7 .e-n-carousel {
overflow: visible !important;
height: auto !important;
}
.elementor-19 .elementor-element-51f5e48 .swiper-wrapper,
.elementor-19 .elementor-element-7f2ebf7 .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
height: auto !important;
transform: none !important;
}
.elementor-19 .elementor-element-51f5e48 .swiper-slide,
.elementor-19 .elementor-element-7f2ebf7 .swiper-slide {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
flex-shrink: initial !important;
/* swiper.min.js does run and initializes a "fade" effect, setting
opacity:0 inline on every slide but the first (it expects further JS
navigation to fade the next one in, which never happens here since
there's no working prev/next). Force all 4 visible for the grid. */
opacity: 1 !important;
}
/* Grid items stretch to their column by default, but the e-flex/e-con
classes on .e-con-boxed set their own flex-basis driven by content,
which was winning over the grid's column width — every card ended up a
different width based on its title's text length. min-width:0 stops the
flex item from refusing to shrink below its content size, and width:100%
pins it to the grid cell regardless of what flex wants. */
.elementor-19 .elementor-element-51f5e48 .e-con-boxed,
.elementor-19 .elementor-element-7f2ebf7 .e-con-boxed {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
flex: none !important;
}
/* Thumbnail-sized cards, not the old full-bleed 40vh banners.
Flex + padding so the title sits inset from the card edges instead of
flush against them (the heading widget has no wrapper of its own). */
.elementor-19 .elementor-element.elementor-element-5cad9ff,
.elementor-19 .elementor-element.elementor-element-a2f839d,
.elementor-19 .elementor-element.elementor-element-9b5aa0f,
.elementor-19 .elementor-element.elementor-element-cd19d48,
.elementor-19 .elementor-element.elementor-element-d317366,
.elementor-19 .elementor-element.elementor-element-8db6676,
.elementor-19 .elementor-element.elementor-element-ab08284,
.elementor-19 .elementor-element.elementor-element-b1d52d6 {
min-height: 0 !important;
height: 380px !important;
display: flex !important;
align-items: flex-end !important;
padding: 0 20px 18px !important;
box-sizing: border-box !important;
}
.elementor-19 .elementor-element.elementor-element-5cad9ff .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-a2f839d .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-9b5aa0f .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-cd19d48 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-d317366 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-8db6676 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-ab08284 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-b1d52d6 .elementor-widget-heading {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
}
/* Tablet: 2 columns, taller cells since each column is wider than desktop's 4-up row */
@media (max-width: 1024px) {
.elementor-19 .elementor-element-51f5e48 .swiper-wrapper,
.elementor-19 .elementor-element-7f2ebf7 .swiper-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
}
.elementor-19 .elementor-element.elementor-element-5cad9ff,
.elementor-19 .elementor-element.elementor-element-a2f839d,
.elementor-19 .elementor-element.elementor-element-9b5aa0f,
.elementor-19 .elementor-element.elementor-element-cd19d48,
.elementor-19 .elementor-element.elementor-element-d317366,
.elementor-19 .elementor-element.elementor-element-8db6676,
.elementor-19 .elementor-element.elementor-element-ab08284,
.elementor-19 .elementor-element.elementor-element-b1d52d6 {
height: 320px !important;
}
}
/* ==========================================================================
COMMUNITY PAGE — carousel cards mobile fix
Single column of full-width thumbnails, proper height, title clearly
readable against the gradient.
========================================================================== */
@media (max-width: 767px) {
.elementor-19 .elementor-element-51f5e48 .swiper-wrapper,
.elementor-19 .elementor-element-7f2ebf7 .swiper-wrapper {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* Photo cards: tall enough on mobile */
.elementor-19 .elementor-element.elementor-element-5cad9ff,
.elementor-19 .elementor-element.elementor-element-a2f839d,
.elementor-19 .elementor-element.elementor-element-9b5aa0f,
.elementor-19 .elementor-element.elementor-element-cd19d48,
.elementor-19 .elementor-element.elementor-element-d317366,
.elementor-19 .elementor-element.elementor-element-8db6676,
.elementor-19 .elementor-element.elementor-element-ab08284,
.elementor-19 .elementor-element.elementor-element-b1d52d6 {
height: 68vw !important;
}
/* Card title: bigger and legible (still Cormorant Garamond, set above),
centered on mobile since each thumbnail is now a full-width standalone
card rather than one of a row. */
.elementor-element-da2136a .elementor-heading-title,
.elementor-element-3161318 .elementor-heading-title,
.elementor-element-51101e4 .elementor-heading-title,
.elementor-element-c2ad811 .elementor-heading-title,
.elementor-element-3c2b0c2 .elementor-heading-title,
.elementor-element-0ad7ae0 .elementor-heading-title,
.elementor-element-5bf6a5e .elementor-heading-title,
.elementor-element-455a0db .elementor-heading-title {
font-size: clamp(18px, 5vw, 26px) !important;
text-align: center !important;
}
/* Card itself: center the title block horizontally. The card is a
column flex (justify-content = vertical axis, align-items =
horizontal axis), so align-items:center is the horizontal centering —
justify-content stays flex-end (set above, unscoped) to keep the
title pinned to the bottom where the gradient is darkest. */
.elementor-19 .elementor-element.elementor-element-5cad9ff,
.elementor-19 .elementor-element.elementor-element-a2f839d,
.elementor-19 .elementor-element.elementor-element-9b5aa0f,
.elementor-19 .elementor-element.elementor-element-cd19d48,
.elementor-19 .elementor-element.elementor-element-d317366,
.elementor-19 .elementor-element.elementor-element-8db6676,
.elementor-19 .elementor-element.elementor-element-ab08284,
.elementor-19 .elementor-element.elementor-element-b1d52d6 {
align-items: center !important;
}
/* Elementor's vendor CSS puts a 20px left margin (and 0 right margin) on
heading widgets for normal top-down layouts. That asymmetric margin
was applied on top of the already-centered flex box above, shoving
the title 20px right of true center. Zero it out here so centering
isn't skewed. */
.elementor-19 .elementor-element.elementor-element-5cad9ff .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-a2f839d .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-9b5aa0f .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-cd19d48 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-d317366 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-8db6676 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-ab08284 .elementor-widget-heading,
.elementor-19 .elementor-element.elementor-element-b1d52d6 .elementor-widget-heading {
margin: 0 !important;
width: 100% !important;
}
/* Carousel section padding: tighter top/bottom on mobile, but keep side
padding so the stacked thumbnails don't bleed to the viewport edges. */
.elementor-19 .elementor-element.elementor-element-a49ec35,
.elementor-19 .elementor-element.elementor-element-5c9fa87 {
--padding-left: 24px !important;
--padding-right: 24px !important;
--padding-top: 48px !important;
--padding-bottom: 48px !important;
padding-left: 24px !important;
padding-right: 24px !important;
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
/* ==========================================================================
COMMUNITY PAGE — mobile section padding: tighten from 80px
========================================================================== */
@media (max-width: 767px) {
.elementor-19 .elementor-element.elementor-element-5e99bd3,
.elementor-19 .elementor-element.elementor-element-425a5a4,
.elementor-19 .elementor-element.elementor-element-2728bd2,
.elementor-19 .elementor-element.elementor-element-fbbae02,
.elementor-19 .elementor-element.elementor-element-a0dbbd7 {
--padding-left: 24px !important;
--padding-right: 24px !important;
--padding-top: 48px !important;
--padding-bottom: 48px !important;
padding-left: 24px !important;
padding-right: 24px !important;
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
/* ==========================================================================
COMMUNITY PAGE — (dead rules from a reverted redesign attempt, kept for
reference but never applied — no HTML elements carry these classes)
========================================================================== */
.mr-community-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto 80px;
padding: 0 40px;
}
.mr-comm-card {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mr-comm-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 36px rgba(0,0,0,0.13);
}
.mr-comm-img {
width: 100%;
height: 240px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.mr-comm-body {
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.mr-comm-tag {
font-family: "Nunito Sans", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #c4845a;
}
.mr-comm-title {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
font-weight: 500;
color: #2b2b2b;
margin: 0;
line-height: 1.2;
}
.mr-comm-desc {
font-family: "Nunito", sans-serif;
font-size: 15px;
font-weight: 300;
color: #6f6f6f;
line-height: 1.6;
margin: 0;
flex: 1;
}
.mr-comm-link {
font-family: "Nunito Sans", sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
color: #c4845a;
margin-top: 4px;
}
@media (max-width: 767px) {
.mr-community-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px;
margin-bottom: 48px;
}
.mr-comm-img {
height: 200px;
}
.mr-comm-body {
padding: 20px 20px 18px;
}
.mr-comm-title {
font-size: 22px;
}
}
/* ==========================================================================
COMMUNITY PAGE — full-bleed alternating feature rows
========================================================================== */
.mr-features {
width: 100%;
overflow: hidden;
}
.mr-feat-row {
display: flex;
min-height: 480px;
overflow: hidden;
}
.mr-feat-row.mr-feat-flip {
flex-direction: row-reverse;
}
.mr-feat-img {
flex: 0 0 55%;
background-size: cover;
background-position: center;
min-height: 420px;
}
.mr-feat-text {
flex: 0 0 45%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 60px;
background: #f9f5f0;
}
.mr-feat-row.mr-feat-flip .mr-feat-text {
background: #f2ece4;
}
.mr-feat-tag {
font-family: "Nunito Sans", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #c4845a;
margin-bottom: 14px;
display: block;
}
.mr-feat-title {
font-family: "Cormorant Garamond", serif;
font-size: clamp(28px, 3vw, 44px);
font-weight: 400;
color: #2b2316;
line-height: 1.15;
margin: 0 0 20px;
}
.mr-feat-desc {
font-family: "Nunito", sans-serif;
font-size: 15px;
font-weight: 300;
color: #6f6f6f;
line-height: 1.75;
margin: 0 0 28px;
}
.mr-feat-link {
display: inline-block;
font-family: "Nunito Sans", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #2b2316;
text-decoration: none;
border-bottom: 1.5px solid #c4845a;
padding-bottom: 3px;
width: fit-content;
transition: color 0.2s, border-color 0.2s;
}
.mr-feat-link:hover {
color: #c4845a;
}
@media (max-width: 900px) {
.mr-feat-row,
.mr-feat-row.mr-feat-flip {
flex-direction: column;
min-height: unset;
}
.mr-feat-img {
flex: none;
height: 260px;
width: 100%;
}
.mr-feat-text {
flex: none;
width: 100%;
padding: 36px 28px 40px;
}
}
/* ==========================================================================
SOLD PAGE — no rounded corners on any image container
========================================================================== */
.elementor-element-7ebc4e4,
.elementor-element-d4d86cd,
.elementor-element-9ffa238,
.elementor-element-d17d73d,
.elementor-element-a85280a,
.elementor-element-d296652,
.elementor-element-4f6a6fe,
.elementor-element-15d5f5d {
--border-radius: 0px !important;
border-radius: 0 !important;
}
/* ==========================================================================
SOLD PAGE — carousel photo height fix (ALL breakpoints)
Elementor's vendor CSS hard-codes height:4000px–5000px on each swiper
slide container (e-con-boxed inside .swiper-slide). Without Elementor JS
running there is no resize logic to correct this, so every listing photo
balloon to 5000px and the page becomes unusably tall.
Fix: override height/min-height/max-height on the slide wrappers and
the containing carousel image columns to a sensible photo height.
Desktop uses 560px, tablet 420px, mobile 65vw — matching the original
design intent of a side-by-side photo+text layout.
Scoped to (min-width: 1025px): browsers resolve matched-rule priority for
equal-specificity !important rules by cascade position, and an
unconditional rule here was outranking the 1024px/767px overrides below
regardless of source order (confirmed via CSS.getMatchedStylesForNode) —
mobile carousels rendered at the desktop 560px height with the photo
squeezed into the top instead of filling the slide. Scoping the desktop
rule to its own media query removes the overlap instead of relying on
source order to settle it.
========================================================================== */
@media (min-width: 1025px) {
/* The carousel image background columns (direct children of listing pair grids) */
.elementor-element-7ebc4e4,
.elementor-element-d4d86cd,
.elementor-element-9ffa238,
.elementor-element-d17d73d,
.elementor-element-a85280a,
.elementor-element-d296652,
.elementor-element-15d5f5d {
height: 560px !important;
min-height: 0 !important;
max-height: 560px !important;
overflow: hidden !important;
}
/* The nested carousel widget inside each image column */
.elementor-element-7ebc4e4 .elementor-widget-n-carousel,
.elementor-element-d4d86cd .elementor-widget-n-carousel,
.elementor-element-9ffa238 .elementor-widget-n-carousel,
.elementor-element-d17d73d .elementor-widget-n-carousel,
.elementor-element-a85280a .elementor-widget-n-carousel,
.elementor-element-d296652 .elementor-widget-n-carousel,
.elementor-element-15d5f5d .elementor-widget-n-carousel,
/* The swiper root and wrapper inside */
.elementor-element-7ebc4e4 .e-n-carousel,
.elementor-element-d4d86cd .e-n-carousel,
.elementor-element-9ffa238 .e-n-carousel,
.elementor-element-d17d73d .e-n-carousel,
.elementor-element-a85280a .e-n-carousel,
.elementor-element-d296652 .e-n-carousel,
.elementor-element-15d5f5d .e-n-carousel {
height: 560px !important;
min-height: 0 !important;
max-height: 560px !important;
overflow: hidden !important;
}
/* The individual swiper slides and their e-con-boxed containers */
.elementor-element-7ebc4e4 .swiper-slide,
.elementor-element-d4d86cd .swiper-slide,
.elementor-element-9ffa238 .swiper-slide,
.elementor-element-d17d73d .swiper-slide,
.elementor-element-a85280a .swiper-slide,
.elementor-element-d296652 .swiper-slide,
.elementor-element-15d5f5d .swiper-slide,
.elementor-element-7ebc4e4 .e-con-boxed,
.elementor-element-d4d86cd .e-con-boxed,
.elementor-element-9ffa238 .e-con-boxed,
.elementor-element-d17d73d .e-con-boxed,
.elementor-element-a85280a .e-con-boxed,
.elementor-element-d296652 .e-con-boxed,
.elementor-element-15d5f5d .e-con-boxed,
/* All the named slide containers */
.elementor-element-16e5e9f, .elementor-element-ab02b67,
.elementor-element-1493087, .elementor-element-f3c164a,
.elementor-element-f52376d, .elementor-element-0783f2f,
.elementor-element-130542e, .elementor-element-2c08347,
.elementor-element-2332907, .elementor-element-1ade780,
.elementor-element-ecb0beb, .elementor-element-ff7e77e,
.elementor-element-baa268c, .elementor-element-cad6491,
.elementor-element-9a6cb39, .elementor-element-d832c3a,
.elementor-element-79b963b,
.elementor-15 .elementor-element-6d92315,
.elementor-15 .elementor-element-66bf7d1,
.elementor-15 .elementor-element-088a415 {
height: 560px !important;
min-height: 0 !important;
max-height: 560px !important;
overflow: hidden !important;
}
} /* end @media (min-width: 1025px) */
/* ==========================================================================
FEATURED PAGE — listing carousel photos
The vendor CSS sets these as background-image on .elementor-motion-effects-layer,
which Elementor's JS creates dynamically at runtime. That div doesn't exist
in the static scrape. background-image also proved unreliable once the
custom autoplay script (header-fixes.js) transforms the slide via
translateX(): slides past #1 stopped painting their background in testing.
Fixed by adding a real ![]()
into each slide
(see listings/index.html) instead of relying on background-image.
========================================================================== */
.listing-carousel-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 0 !important;
}
/* MLS-sourced stock photos (Highway 79 and Imperial Hwy listings) carried a
"CRMLS" watermark baked into the bottom edge of the source file. The
watermark strip was physically cropped out of the image files themselves
(see wp-content/uploads/2026/03/*cc_ft_*.webp) rather than hidden with
CSS — object-fit: cover already handles reframing the shorter images. */
/* Slide containers need position:relative so the photo (absolute) and the
price-button overlay (relative, painted after) stack correctly. */
.elementor-element-36c4a75, .elementor-element-4cde52c,
.elementor-element-8967b59, .elementor-element-5fc6342,
.elementor-element-1d069b3, .elementor-element-93b7f61,
.elementor-element-d4f4640, .elementor-element-3851117,
.elementor-element-9a7974f, .elementor-element-648b8e6,
.elementor-element-80b8769, .elementor-element-ce5899b,
.elementor-element-05b488f, .elementor-element-752cbc4, .elementor-element-ab37e55,
.elementor-element-2b70fef, .elementor-element-a4ee8ea, .elementor-element-3ad8d74 {
position: relative !important;
}
.elementor-element-36c4a75 > .elementor-widget-button,
.elementor-element-4cde52c > .elementor-widget-button,
.elementor-element-8967b59 > .elementor-widget-button,
.elementor-element-5fc6342 > .elementor-widget-button,
.elementor-element-1d069b3 > .elementor-widget-button,
.elementor-element-93b7f61 > .elementor-widget-button,
.elementor-element-d4f4640 > .elementor-widget-button,
.elementor-element-3851117 > .elementor-widget-button,
.elementor-element-9a7974f > .elementor-widget-button,
.elementor-element-648b8e6 > .elementor-widget-button,
.elementor-element-80b8769 > .elementor-widget-button,
.elementor-element-ce5899b > .elementor-widget-button,
.elementor-element-05b488f > .elementor-widget-button,
.elementor-element-752cbc4 > .elementor-widget-button,
.elementor-element-ab37e55 > .elementor-widget-button,
.elementor-element-2b70fef > .elementor-widget-button,
.elementor-element-a4ee8ea > .elementor-widget-button,
.elementor-element-3ad8d74 > .elementor-widget-button {
position: relative !important;
z-index: 1 !important;
}
/* All slide inner containers must fill their parent so the bg-image shows */
.elementor-element-36c4a75, .elementor-element-4cde52c,
.elementor-element-8967b59, .elementor-element-5fc6342,
.elementor-element-1d069b3, .elementor-element-93b7f61,
.elementor-element-d4f4640, .elementor-element-3851117,
.elementor-element-9a7974f, .elementor-element-648b8e6,
.elementor-element-80b8769, .elementor-element-ce5899b,
.elementor-element-05b488f, .elementor-element-752cbc4, .elementor-element-ab37e55,
.elementor-element-2b70fef, .elementor-element-a4ee8ea, .elementor-element-3ad8d74 {
height: 100% !important;
width: 100% !important;
min-height: 0 !important;
}
/* Swiper wrapper must be a horizontal row — Swiper's own CSS sets
flex-direction:column in one rule; without Swiper JS that never gets
corrected so all slides stack vertically instead of side-by-side. */
.elementor-element-7ebc4e4 .swiper-wrapper,
.elementor-element-d4d86cd .swiper-wrapper,
.elementor-element-9ffa238 .swiper-wrapper,
.elementor-element-d17d73d .swiper-wrapper,
.elementor-element-a85280a .swiper-wrapper,
.elementor-element-d296652 .swiper-wrapper,
.elementor-element-15d5f5d .swiper-wrapper {
flex-direction: row !important;
flex-wrap: nowrap !important;
height: 100% !important;
}
/* The background photo containers inside each slide (e-con-full children) */
.elementor-element-7ebc4e4 .e-con-full,
.elementor-element-d4d86cd .e-con-full,
.elementor-element-9ffa238 .e-con-full,
.elementor-element-d17d73d .e-con-full,
.elementor-element-a85280a .e-con-full,
.elementor-element-d296652 .e-con-full,
.elementor-element-15d5f5d .e-con-full {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
@media (max-width: 1024px) {
.elementor-element-7ebc4e4,
.elementor-element-d4d86cd,
.elementor-element-9ffa238,
.elementor-element-d17d73d,
.elementor-element-a85280a,
.elementor-element-d296652,
.elementor-element-15d5f5d,
.elementor-element-7ebc4e4 .e-n-carousel,
.elementor-element-d4d86cd .e-n-carousel,
.elementor-element-9ffa238 .e-n-carousel,
.elementor-element-d17d73d .e-n-carousel,
.elementor-element-a85280a .e-n-carousel,
.elementor-element-d296652 .e-n-carousel,
.elementor-element-15d5f5d .e-n-carousel,
.elementor-element-7ebc4e4 .swiper-slide,
.elementor-element-d4d86cd .swiper-slide,
.elementor-element-9ffa238 .swiper-slide,
.elementor-element-d17d73d .swiper-slide,
.elementor-element-a85280a .swiper-slide,
.elementor-element-d296652 .swiper-slide,
.elementor-element-15d5f5d .swiper-slide,
.elementor-element-16e5e9f, .elementor-element-ab02b67,
.elementor-element-1493087, .elementor-element-f3c164a,
.elementor-element-f52376d, .elementor-element-0783f2f,
.elementor-element-130542e, .elementor-element-2c08347,
.elementor-element-2332907, .elementor-element-1ade780,
.elementor-element-ecb0beb, .elementor-element-ff7e77e,
.elementor-element-baa268c, .elementor-element-cad6491,
.elementor-element-9a6cb39, .elementor-element-d832c3a,
.elementor-element-79b963b,
.elementor-15 .elementor-element-6d92315,
.elementor-15 .elementor-element-66bf7d1,
.elementor-15 .elementor-element-088a415 {
height: 420px !important;
max-height: 420px !important;
}
}
@media (max-width: 767px) {
/* Verbena listing: fix row wrapper, remove rounded corners, fix image */
.elementor-element-f0c8960 {
--flex-direction: column !important;
flex-direction: column !important;
--gap: 0px 0px !important;
gap: 0 !important;
}
.elementor-element-d17d73d {
--border-radius: 0px !important;
border-radius: 0 !important;
--margin-left: 0px !important;
margin-left: 0 !important;
--width: 100% !important;
width: 100% !important;
height: 65vw !important;
max-height: 65vw !important;
overflow: hidden !important;
order: -1 !important;
}
.elementor-element-d17d73d .elementor-widget-n-carousel,
.elementor-element-d17d73d .e-n-carousel,
.elementor-element-d17d73d .swiper-wrapper,
.elementor-element-d17d73d .swiper-slide,
.elementor-element-d17d73d .e-con-boxed {
height: 65vw !important;
max-height: 65vw !important;
min-height: 0 !important;
overflow: hidden !important;
}
.elementor-element-d17d73d .e-con-inner {
height: 100% !important;
padding-block-start: 0 !important;
padding-block-end: 0 !important;
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
}
.elementor-element-0c792b5 {
--padding-top: 24px !important;
--padding-bottom: 80px !important;
padding: 24px 20px 80px 20px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-15 .elementor-element.elementor-element-648b8e6 {
height: 65vw !important;
min-height: 0 !important;
max-height: none !important;
--min-height: 0px !important;
overflow: hidden !important;
position: relative !important;
}
.elementor-15 .elementor-element.elementor-element-648b8e6:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-648b8e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-size: cover !important;
background-position: center center !important;
}
.elementor-15 .elementor-element.elementor-element-648b8e6 > .elementor-widget-button {
position: absolute !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
width: auto !important;
}
/* $890k listing: fix row wrapper gap + carousel margin */
.elementor-element-e505f7b {
--flex-direction: column !important;
flex-direction: column !important;
--gap: 0px 0px !important;
gap: 0 !important;
--row-gap: 0px !important;
--column-gap: 0px !important;
}
.elementor-element-9ffa238 {
--margin-left: 0px !important;
margin-left: 0 !important;
--width: 100% !important;
width: 100% !important;
}
.elementor-element-2061442 {
--padding-top: 24px !important;
--padding-bottom: 80px !important;
padding: 24px 20px 80px 20px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* All listing image containers: uniform 65vw cover crop for consistent sizing */
.elementor-element-ecb0beb,
.elementor-element-ff7e77e,
.elementor-element-baa268c, .elementor-element-cad6491,
.elementor-element-9a6cb39, .elementor-element-d832c3a,
.elementor-element-79b963b,
.elementor-15 .elementor-element-6d92315,
.elementor-15 .elementor-element-66bf7d1,
.elementor-15 .elementor-element-088a415 {
height: 65vw !important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden !important;
}
.elementor-15 .elementor-element.elementor-element-ce5899b,
.elementor-15 .elementor-element.elementor-element-ab37e55,
.elementor-15 .elementor-element.elementor-element-3ad8d74,
.elementor-15 .elementor-element.elementor-element-05b488f,
.elementor-15 .elementor-element.elementor-element-2b70fef,
.elementor-15 .elementor-element.elementor-element-a4ee8ea,
.elementor-15 .elementor-element.elementor-element-752cbc4 {
height: 65vw !important;
min-height: 0 !important;
max-height: none !important;
--min-height: 0px !important;
overflow: hidden !important;
position: relative !important;
}
.elementor-15 .elementor-element.elementor-element-ce5899b:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-ce5899b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-ab37e55:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-ab37e55 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-3ad8d74:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-3ad8d74 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-05b488f:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-05b488f > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-2b70fef:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-2b70fef > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-a4ee8ea:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-a4ee8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-752cbc4:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-752cbc4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-size: cover !important;
background-position: center center !important;
}
/* Carousel slide photo containers — uniform 65vw cover crop */
.elementor-15 .elementor-element.elementor-element-36c4a75,
.elementor-15 .elementor-element.elementor-element-4cde52c,
.elementor-15 .elementor-element.elementor-element-8967b59,
.elementor-15 .elementor-element.elementor-element-5fc6342,
.elementor-15 .elementor-element.elementor-element-1d069b3,
.elementor-15 .elementor-element.elementor-element-d4f4640,
.elementor-15 .elementor-element.elementor-element-3851117,
.elementor-15 .elementor-element.elementor-element-9a7974f,
.elementor-15 .elementor-element.elementor-element-93b7f61,
.elementor-15 .elementor-element.elementor-element-80b8769 {
height: 65vw !important;
min-height: 0 !important;
max-height: none !important;
--min-height: 0px !important;
overflow: hidden !important;
position: relative !important;
}
.elementor-15 .elementor-element.elementor-element-36c4a75:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-36c4a75 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-4cde52c:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-4cde52c > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-8967b59:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-8967b59 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-5fc6342:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-5fc6342 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-1d069b3:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-1d069b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-d4f4640:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-d4f4640 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-3851117:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-3851117 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-9a7974f:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-9a7974f > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-93b7f61:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-93b7f61 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-15 .elementor-element.elementor-element-80b8769:not(.elementor-motion-effects-element-type-background),
.elementor-15 .elementor-element.elementor-element-80b8769 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-size: cover !important;
background-position: center center !important;
}
.elementor-element-7ebc4e4,
.elementor-element-d4d86cd,
.elementor-element-9ffa238,
.elementor-element-d17d73d,
.elementor-element-a85280a,
.elementor-element-d296652,
.elementor-element-15d5f5d,
.elementor-element-7ebc4e4 .e-n-carousel,
.elementor-element-d4d86cd .e-n-carousel,
.elementor-element-9ffa238 .e-n-carousel,
.elementor-element-d17d73d .e-n-carousel,
.elementor-element-a85280a .e-n-carousel,
.elementor-element-d296652 .e-n-carousel,
.elementor-element-15d5f5d .e-n-carousel,
.elementor-element-7ebc4e4 .swiper-slide,
.elementor-element-d4d86cd .swiper-slide,
.elementor-element-9ffa238 .swiper-slide,
.elementor-element-d17d73d .swiper-slide,
.elementor-element-a85280a .swiper-slide,
.elementor-element-d296652 .swiper-slide,
.elementor-element-15d5f5d .swiper-slide,
.elementor-element-16e5e9f, .elementor-element-ab02b67,
.elementor-element-1493087, .elementor-element-f3c164a,
.elementor-element-f52376d, .elementor-element-0783f2f,
.elementor-element-130542e, .elementor-element-2c08347,
.elementor-element-2332907, .elementor-element-1ade780 {
height: 65vw !important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden !important;
}
}
/* ==========================================================================
FEATURED PAGE — carousel arrow color
========================================================================== */
.elementor-15 .elementor-swiper-button svg {
fill: #c4845a !important;
}
/* ==========================================================================
FEATURED PAGE — price/sold badge positioning (mobile only)
========================================================================== */
@media (max-width: 767px) {
.elementor-15 .elementor-element.elementor-element-36c4a75,
.elementor-15 .elementor-element.elementor-element-4cde52c,
.elementor-15 .elementor-element.elementor-element-8967b59,
.elementor-15 .elementor-element.elementor-element-5fc6342,
.elementor-15 .elementor-element.elementor-element-1d069b3,
.elementor-15 .elementor-element.elementor-element-93b7f61,
.elementor-15 .elementor-element.elementor-element-d4f4640,
.elementor-15 .elementor-element.elementor-element-3851117,
.elementor-15 .elementor-element.elementor-element-9a7974f,
.elementor-15 .elementor-element.elementor-element-80b8769,
.elementor-15 .elementor-element.elementor-element-ce5899b,
.elementor-15 .elementor-element.elementor-element-ab37e55,
.elementor-15 .elementor-element.elementor-element-3ad8d74,
.elementor-15 .elementor-element.elementor-element-05b488f,
.elementor-15 .elementor-element.elementor-element-2b70fef,
.elementor-15 .elementor-element.elementor-element-a4ee8ea,
.elementor-15 .elementor-element.elementor-element-752cbc4 {
position: relative !important;
}
.elementor-15 .elementor-element.elementor-element-36c4a75 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-4cde52c > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-8967b59 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-5fc6342 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-1d069b3 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-93b7f61 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-d4f4640 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-3851117 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-9a7974f > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-80b8769 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-ce5899b > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-ab37e55 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-3ad8d74 > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-05b488f > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-2b70fef > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-a4ee8ea > .elementor-widget-button,
.elementor-15 .elementor-element.elementor-element-752cbc4 > .elementor-widget-button {
position: absolute !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
}
}
/* ==========================================================================
SOLD PAGE — mobile layout (consolidated, single source of truth)
========================================================================== */
/* Roadway CTA parallax — desktop on, mobile/tablet off */
.elementor-element-0d34aeb:not(.elementor-motion-effects-element-type-background),
.elementor-element-0d34aeb > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-attachment: fixed !important;
}
@media (max-width: 1024px) {
.elementor-element-0d34aeb:not(.elementor-motion-effects-element-type-background),
.elementor-element-0d34aeb > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-attachment: scroll !important;
}
}
@media (max-width: 767px) {
/* Hero: push content clear of the 94px sticky header */
.elementor-element-ce5f6a5 {
--padding-top: 150px !important;
padding-top: 150px !important;
}
/* ── Outer boxed wrappers ───────────────────────────────────────────────
Side padding so carousels don't touch the screen edges on mobile. */
.elementor-element-522218e,
.elementor-element-87de5a9,
.elementor-element-bb7a5b8,
.elementor-element-2f8a7b4,
.elementor-element-56f3c49 {
--padding-left: 16px !important;
--padding-right: 16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
--margin-bottom: 0px !important;
margin-bottom: 0 !important;
}
.elementor-element-522218e {
--margin-top: 50px !important;
margin-top: 50px !important;
}
.elementor-element-87de5a9,
.elementor-element-bb7a5b8,
.elementor-element-2f8a7b4,
.elementor-element-56f3c49 {
--margin-top: 0px !important;
margin-top: 0 !important;
}
/* ── Listing pair grids: 1 column, no gap ─────────────────────────────── */
.elementor-element-13b8d32,
.elementor-element-e4ff38a,
.elementor-element-1ad40a5 {
--e-con-grid-template-columns: repeat(1, 1fr) !important;
--e-con-grid-template-rows: auto auto !important;
grid-template-columns: repeat(1, 1fr) !important;
grid-template-rows: auto auto !important;
--gap: 0px 0px !important;
--row-gap: 0px !important;
--column-gap: 0px !important;
gap: 0 !important;
align-items: start !important;
--align-items: start !important;
}
/* ── Inner listing columns: image on top, text below ──────────────────── */
.elementor-element-0226563,
.elementor-element-6457809,
.elementor-element-7f3b399,
.elementor-element-75d7514 {
--flex-direction: column !important;
flex-direction: column !important;
--flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
--gap: 0px 0px !important;
--row-gap: 0px !important;
--column-gap: 0px !important;
gap: 0 !important;
row-gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
--container-widget-flex-grow: 0 !important;
--container-widget-align-self: auto !important;
align-self: auto !important;
height: auto !important;
min-height: 0 !important;
}
/* 3-class specificity to beat Elementor's vendor rule on Ranchita/Ocotillo inner col */
.elementor-15 .elementor-element.elementor-element-7f3b399,
.elementor-15 .elementor-element.elementor-element-6457809 {
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
row-gap: 0 !important;
--gap: 0px !important;
--row-gap: 0px !important;
}
/* Mountain Mdw: small gap between photo and text column (0 read as no
breathing room at all between the photo and "Exclusive Listing"). */
.elementor-15 .elementor-element.elementor-element-6457809.elementor-element-6457809 {
gap: 12px !important;
row-gap: 12px !important;
--gap: 12px !important;
--row-gap: 12px !important;
}
/* ── Ranchita listing card outer wrapper: kill 150px desktop top padding ─
and shrink the 50px vendor flex-gap between the photo and text column,
which read as a large dead-space band on mobile. Same fix applied to
Imperial Hwy (e7c3987, same 50px gap) and Mountain Mdw (4f6a6fe gap +
d149c48 label padding-top) for the same dead-space issue. */
.elementor-element-16a678d,
.elementor-element-e7c3987 {
--padding-top: 0px !important;
padding-top: 0px !important;
--gap: 12px !important;
--row-gap: 12px !important;
gap: 12px !important;
row-gap: 12px !important;
}
.elementor-element-4f6a6fe {
--gap: 12px !important;
--row-gap: 12px !important;
gap: 12px !important;
row-gap: 12px !important;
}
/* ── Text content columns: 20px side inset, left-aligned ─────────────── */
/* a3ab51e = San Felipe, b85bca3 = Pine Hills, 2061442 = Old Mine,
0c792b5 = Verbena, d149c48 = Mountain Mdw, dffc560 = Ranchita,
0bff630 = others */
.elementor-element-a3ab51e,
.elementor-element-b85bca3,
.elementor-element-2061442,
.elementor-element-0c792b5,
.elementor-element-d149c48,
.elementor-element-dffc560,
.elementor-element-0bff630 {
--padding-left: 20px !important;
--padding-right: 20px !important;
--padding-top: 24px !important;
--padding-bottom: 80px !important;
padding: 24px 20px 80px 20px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
align-items: flex-start !important;
--align-items: flex-start !important;
justify-content: flex-start !important;
--justify-content: flex-start !important;
}
/* Mountain Mdw text column: tighter top padding than the shared 24px above
(doubled class = higher specificity so it reliably wins this override). */
.elementor-element-d149c48.elementor-element-d149c48 {
--padding-top: 4px !important;
padding-top: 4px !important;
}
/* Every widget container inside text columns: constrained, left-aligned */
.elementor-element-a3ab51e .elementor-widget-container,
.elementor-element-b85bca3 .elementor-widget-container,
.elementor-element-2061442 .elementor-widget-container,
.elementor-element-0c792b5 .elementor-widget-container,
.elementor-element-d149c48 .elementor-widget-container,
.elementor-element-dffc560 .elementor-widget-container,
.elementor-element-0bff630 .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.elementor-element-a3ab51e .elementor-widget-container *,
.elementor-element-b85bca3 .elementor-widget-container *,
.elementor-element-2061442 .elementor-widget-container *,
.elementor-element-0c792b5 .elementor-widget-container *,
.elementor-element-d149c48 .elementor-widget-container *,
.elementor-element-dffc560 .elementor-widget-container *,
.elementor-element-0bff630 .elementor-widget-container * {
text-align: left !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
max-width: 100% !important;
}
/* ── Ranchita (Montezuma Valley Rd) text column: tighter top padding ──
Photo has no arrows/caption row beneath it like multi-slide listings,
so the shared 24px top padding above reads as extra dead space here. */
.elementor-element-dffc560 {
--padding-top: 4px !important;
padding-top: 4px !important;
}
/* ── Address headings ─────────────────────────────────────────────────── */
.elementor-element-d8d1953 .elementor-heading-title,
.elementor-element-d342d4d .elementor-heading-title,
.elementor-element-7d92d4d .elementor-heading-title,
.elementor-element-ead44c5 .elementor-heading-title,
.elementor-element-dc82c2a .elementor-heading-title,
.elementor-element-df3828e .elementor-heading-title {
font-size: 20px !important;
line-height: 1.4 !important;
text-align: left !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
/* Pine Hills address: override constrained widget width so it stretches full column */
.elementor-element-3bdeebe,
.elementor-element-3bdeebe .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
left: auto !important;
}
.elementor-element-3bdeebe .elementor-heading-title {
font-size: 20px !important;
line-height: 1.4 !important;
text-align: left !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
/* ── Body copy: bump to 16px for readability ─────────────────────────── */
.elementor-element-dd86c22 p,
.elementor-element-44a2bf7 p,
.elementor-element-d2b58c3 p,
.elementor-element-a7e14d9 p,
.elementor-element-fa27958 p,
.elementor-element-7e9e3c7 p,
.elementor-element-ab0c94c p,
.elementor-element-5f91753 p,
.elementor-element-3dca0ae p,
.elementor-element-ab0c94c .elementor-widget-container,
.elementor-element-3dca0ae .elementor-widget-container,
.elementor-element-ab0c94c,
.elementor-element-3dca0ae {
font-size: 16px !important;
line-height: 1.65 !important;
}
/* ── Spec labels (BEDS / BATHS / SQFT / PRICE / SIZE / LOCATION) ─────── */
.elementor-element-810529e .elementor-heading-title,
.elementor-element-69976ab .elementor-heading-title,
.elementor-element-b26f326 .elementor-heading-title,
.elementor-element-5c82128 .elementor-heading-title,
.elementor-element-e4f5b42 .elementor-heading-title,
.elementor-element-f577ecc .elementor-heading-title,
.elementor-element-462c572 .elementor-heading-title,
.elementor-element-01e6f42 .elementor-heading-title,
.elementor-element-d7d4250 .elementor-heading-title,
.elementor-element-c9db2cb .elementor-heading-title,
.elementor-element-6a80667 .elementor-heading-title,
.elementor-element-f51a2c7 .elementor-heading-title,
.elementor-element-f3db61f .elementor-heading-title,
.elementor-element-9391394 .elementor-heading-title,
.elementor-element-bde83d1 .elementor-heading-title,
.elementor-element-b028636 .elementor-heading-title,
.elementor-element-26a1f16 .elementor-heading-title,
.elementor-element-03d39e1 .elementor-heading-title,
.elementor-element-b4b1a4f .elementor-heading-title,
.elementor-element-206c068 .elementor-heading-title,
.elementor-element-47297df .elementor-heading-title,
.elementor-element-bdee3f8 .elementor-heading-title,
.elementor-element-6ca6e1b .elementor-heading-title,
.elementor-element-5d21c64 .elementor-heading-title {
font-size: 13px !important;
letter-spacing: 0.05em !important;
}
/* ── Ocotillo listing: text column needs 20px side padding ───────────── */
.elementor-element-bf22c8b {
--padding-left: 20px !important;
--padding-right: 20px !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
/* Ocotillo address heading: stretch to full width */
.elementor-element-df3828e,
.elementor-element-df3828e .elementor-widget-container {
width: 100% !important;
max-width: 100% !important;
left: auto !important;
}
/* Ocotillo "Exclusive Listing" eyebrow: stretch so flex centering doesn't offset it */
.elementor-element-2c5ef87 {
width: 100% !important;
max-width: 100% !important;
align-self: stretch !important;
}
/* Mountain Mdw address: center-aligned in Elementor, override to left */
.elementor-element-bc4157c .elementor-heading-title {
text-align: left !important;
font-size: 20px !important;
line-height: 1.4 !important;
}
/* ── Specs wrappers: 20px side inset + 40px bottom so next section breathes */
/* f51445e = Old Mine specs, d82cf3a = San Felipe specs, b6431f5 = Verbena specs,
3c0c9ef = other specs, 2f4a2c1 = Mountain Mdw specs wrapper,
b4bbcc9 = Ranchita specs wrapper, 24df93d = Pine Hills specs wrapper,
373dca5 = Ocotillo specs wrapper.
NOTE: ecb0beb was previously (wrongly) included here — it's actually
Mountain Mdw's carousel SLIDE container, not a specs wrapper. The 16px
top/bottom padding it picked up here shrank the photo inside it below
its slide height, leaving a gap before the listing text. Removed. */
.elementor-element-f51445e,
.elementor-element-d82cf3a,
.elementor-element-b6431f5,
.elementor-element-3c0c9ef,
.elementor-element-2f4a2c1,
.elementor-element-b4bbcc9,
.elementor-element-24df93d,
.elementor-element-373dca5 {
--padding-left: 20px !important;
--padding-right: 20px !important;
--padding-top: 16px !important;
--padding-bottom: 16px !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── San Felipe + Mountain Mdw: extra space below specs row (outside bordered box) ── */
.elementor-element-d82cf3a,
.elementor-element-2f4a2c1 {
--margin-bottom: 80px !important;
margin-bottom: 80px !important;
}
/* ── Specs grids: keep as 3-column row (BEDS / BATHS / SQFT) ─────────── */
.elementor-element-edbf325,
.elementor-element-4547961,
.elementor-element-4b5ba3d,
.elementor-element-b496adb,
.elementor-element-5f0897e,
.elementor-element-071a816,
.elementor-element-fa99551,
.elementor-element-a9be4fa {
--e-con-grid-template-columns: repeat(3, 1fr) !important;
grid-template-columns: repeat(3, 1fr) !important;
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── Body copy paragraphs: left-align, no bleed ──────────────────────── */
.elementor-element-dd86c22,
.elementor-element-dd86c22 *,
.elementor-element-44a2bf7,
.elementor-element-44a2bf7 *,
.elementor-element-d2b58c3,
.elementor-element-d2b58c3 *,
.elementor-element-a7e14d9,
.elementor-element-a7e14d9 *,
.elementor-element-fa27958,
.elementor-element-fa27958 *,
.elementor-element-7e9e3c7,
.elementor-element-7e9e3c7 *,
.elementor-element-ab0c94c,
.elementor-element-ab0c94c *,
.elementor-element-5f91753,
.elementor-element-5f91753 *,
.elementor-element-3dca0ae,
.elementor-element-3dca0ae * {
text-align: left !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
max-width: 100% !important;
}
/* ── Ranchita address: override center alignment ─────────────────────── */
.elementor-element-37539c4 .elementor-heading-title {
text-align: left !important;
font-size: 20px !important;
line-height: 1.4 !important;
}
/* ── Eyebrow labels: left-align ──────────────────────────────────────── */
.elementor-element-0e59c4a .elementor-heading-title,
.elementor-element-b3898fa .elementor-heading-title,
.elementor-element-1ab44d9 .elementor-heading-title,
.elementor-element-666f4d0 .elementor-heading-title,
.elementor-element-34dbd5e .elementor-heading-title,
.elementor-element-df5403b .elementor-heading-title,
.elementor-element-2c5ef87 .elementor-heading-title,
.elementor-element-de77ca6 .elementor-heading-title,
.elementor-element-0e7d5d9 .elementor-heading-title {
text-align: left !important;
}
}
/* ==========================================================================
SOLD PAGE — Verbena Dr listing structure fix
The bb7a5b8 section uses a non-grid layout: f0c8960 is a flex row with
0c792b5 (text) and d17d73d (image) as siblings — unlike every other listing
which uses e-grid columns. Without width constraints, the text column grows
and squishes the image to the right. Fix with 50/50 flex widths at desktop,
stack at ≤1024px.
========================================================================== */
.elementor-element-f0c8960 {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
}
.elementor-element-0c792b5 {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
box-sizing: border-box !important;
padding: 40px 48px !important;
}
.elementor-element-d17d73d {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
}
@media (max-width: 1024px) {
.elementor-element-f0c8960 {
flex-direction: column !important;
}
.elementor-element-0c792b5 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
padding: 24px 20px 80px 20px !important;
order: 2 !important;
}
.elementor-element-d17d73d {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
border-radius: 0 !important;
order: 1 !important;
}
}
/* ==========================================================================
SOLD PAGE — normalize outer section vertical padding
Elementor's e-con-boxed containers use --padding-block-start/end vars.
Without the live WP/Elementor runtime these fall back to whatever the
scraped inline styles say. Zero out any residual top/bottom padding on
the outer listing-group wrappers so spacing is controlled only by the
margin-bottom: 60px rule already in place.
========================================================================== */
.elementor-element-522218e,
.elementor-element-87de5a9,
.elementor-element-bb7a5b8,
.elementor-element-2f8a7b4,
.elementor-element-56f3c49 {
--padding-top: 0 !important;
--padding-bottom: 0 !important;
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
.elementor-element-522218e > .e-con-inner,
.elementor-element-87de5a9 > .e-con-inner,
.elementor-element-bb7a5b8 > .e-con-inner,
.elementor-element-2f8a7b4 > .e-con-inner,
.elementor-element-56f3c49 > .e-con-inner {
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
/* ==========================================================================
FOOTER — Follow section spacing
More padding above FOLLOW heading; gap between divider line and social icons.
========================================================================== */
/* Padding above "FOLLOW" — zero out the container's flex gap so margins control spacing */
.elementor-346 .elementor-element.elementor-element-c5c0c68 {
--padding-top: 32px !important;
padding-top: 32px !important;
gap: 0 !important;
row-gap: 0 !important;
--gap: 0 !important;
}
/* Gap between FOLLOW heading and divider line */
.elementor-346 .elementor-element.elementor-element-9035216 {
margin-bottom: 6px !important;
margin-block-end: 6px !important;
}
/* FOLLOW divider — same visual length as QUICK LINKS divider.
QUICK LINKS col = 48% wide, its divider = 50% of that ≈ 24% of the row.
FOLLOW col = 100% wide, so to match: set divider to 24% of its container. */
.elementor-346 .elementor-element.elementor-element-5dcdb19 {
margin-bottom: 20px !important;
margin-block-end: 20px !important;
--container-widget-width: 24% !important;
width: 24% !important;
max-width: 24% !important;
}
/* Remove default top margin on social icons widget */
.elementor-346 .elementor-element.elementor-element-372a7fc {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
/* ==========================================================================
FOOTER — Quick Links column alignment
On mobile the column is 48% wide with padding-left:0 so everything sits
flush left with no breathing room. Add consistent padding and tighten
list item spacing.
========================================================================== */
.elementor-346 .elementor-element.elementor-element-83f3844 {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
gap: 0 !important;
row-gap: 0 !important;
--gap: 0 !important;
}
/* QUICK LINKS heading — tight gap before divider */
.elementor-346 .elementor-element.elementor-element-935dfa3 {
margin-bottom: 6px !important;
margin-block-end: 6px !important;
}
/* Divider under QUICK LINKS — breathing room before the list (mobile only) */
@media (max-width: 767px) {
.elementor-element-18ffc55 {
margin-bottom: 26px !important;
margin-block-end: 26px !important;
}
}
/* List items: consistent vertical spacing */
.elementor-element-c8844a6 .elementor-icon-list-item {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
/* Extra space below HOME (first item) — mobile only; desktop items are evenly spaced */
@media (max-width: 767px) {
.elementor-element-c8844a6 .elementor-icon-list-item:first-child {
padding-bottom: 16px !important;
}
}
/* ==========================================================================
FOOTER — desktop column alignment
At 768–1024px Elementor sets edbb510=47%, 83f3844=31%, c5c0c68=43% = 121%
so FOLLOW wraps to a second row. Force nowrap and fit all three columns.
Also match FOLLOW's padding-top to QUICK LINKS (30px) so headings align.
========================================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
.elementor-346 .elementor-element.elementor-element-d2efd42 {
flex-wrap: nowrap !important;
--flex-wrap: nowrap !important;
align-items: flex-start !important;
}
.elementor-346 .elementor-element.elementor-element-edbb510 {
--width: 40% !important;
width: 40% !important;
}
.elementor-346 .elementor-element.elementor-element-83f3844 {
--width: 28% !important;
width: 28% !important;
}
.elementor-346 .elementor-element.elementor-element-c5c0c68 {
--width: 32% !important;
width: 32% !important;
--padding-top: 30px !important;
padding-top: 30px !important;
}
}
/* Desktop: push Quick Links nav list down so it doesn't crowd the contact column */
@media (min-width: 768px) {
.elementor-346 .elementor-element.elementor-element-c8844a6 {
margin-top: 16px !important;
}
}
/* Large desktop: Elementor's --width values sum to 121% (47+31+43), causing overlap.
Override all three columns to fit within 100% and align headings at the top. */
@media (min-width: 1025px) {
.elementor-346 .elementor-element.elementor-element-d2efd42 {
flex-wrap: nowrap !important;
--flex-wrap: nowrap !important;
align-items: flex-start !important;
}
.elementor-346 .elementor-element.elementor-element-edbb510 {
--width: 45% !important;
width: 45% !important;
flex-shrink: 0 !important;
}
.elementor-346 .elementor-element.elementor-element-83f3844 {
--width: 28% !important;
width: 28% !important;
--padding-top: 30px !important;
padding-top: 30px !important;
flex-shrink: 0 !important;
}
.elementor-346 .elementor-element.elementor-element-c5c0c68 {
--width: 27% !important;
width: 27% !important;
--padding-top: 30px !important;
padding-top: 30px !important;
flex-shrink: 0 !important;
}
}
/* ==========================================================================
FOOTER — copyright bar
Mobile: "Website by" stacked above copyright, both centered.
Desktop (768px+): side-by-side — copyright left, "Website by" right.
========================================================================== */
/* Mobile: stack vertically, Website by on top */
@media (max-width: 767px) {
.elementor-element-9cd0f36 > .elementor-element-088a415 > .e-con-inner {
flex-direction: column !important;
align-items: center !important;
}
.elementor-element-e2ae88e {
order: -1 !important;
width: 100% !important;
}
.elementor-element-4445cc6 {
width: 100% !important;
}
.elementor-element-255b648,
.elementor-element-255b648 .elementor-widget-container,
.elementor-element-255b648 * {
text-align: center !important;
}
.elementor-element-7ac7b2b,
.elementor-element-7ac7b2b .elementor-widget-container,
.elementor-element-7ac7b2b * {
text-align: center !important;
}
}
/* Desktop: row layout — copyright left, "Website by" right */
@media (min-width: 768px) {
/* Main footer content — full width + consistent side padding */
.elementor-346 .elementor-element-6d92315.e-con-boxed {
max-width: 100% !important;
}
.elementor-346 .elementor-element-6d92315 > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
padding-left: 60px !important;
padding-right: 60px !important;
}
/* Copyright bar — same full width + matching side padding */
.elementor-element-088a415.e-con-boxed {
max-width: 100% !important;
}
.elementor-element-9cd0f36 > .elementor-element-088a415 > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
padding-left: 60px !important;
padding-right: 60px !important;
flex-direction: row !important;
align-items: center !important;
}
.elementor-element-e2ae88e {
order: 1 !important;
}
.elementor-element-4445cc6 {
order: 0 !important;
}
.elementor-element-255b648.elementor-align-right .elementor-widget-container,
.elementor-element-255b648 .elementor-widget-container {
text-align: right !important;
}
.elementor-element-7ac7b2b .elementor-widget-container {
text-align: left !important;
}
}
/* Footer logo — sized and left-aligned on desktop */
@media (min-width: 768px) {
.elementor-346 .elementor-element-2bf7616 {
text-align: left !important;
align-self: flex-start !important;
}
.elementor-346 .elementor-element-2bf7616 .elementor-widget-container {
text-align: left !important;
justify-content: flex-start !important;
display: flex !important;
}
.elementor-346 .elementor-element-2bf7616 img {
width: 170px !important;
height: auto !important;
margin-left: 0 !important;
}
}
/* Shared text styles — both breakpoints */
.elementor-element-255b648,
.elementor-element-255b648 .elementor-widget-container,
.elementor-element-255b648 * {
color: #b0b0b0 !important;
font-size: 17px !important;
}
.elementor-element-7ac7b2b,
.elementor-element-7ac7b2b .elementor-widget-container,
.elementor-element-7ac7b2b * {
color: #9a9a9a !important;
font-size: 15px !important;
}
/* ==========================================================================
STATS — prevent "25+ Years" / "985+ Properties" from wrapping at any width
Both homepage IDs (105061b / 552f46a) and About/p=23 IDs (0b2e6ec / aafc25f)
========================================================================== */
.elementor-element-105061b .elementor-heading-title,
.elementor-element-552f46a .elementor-heading-title,
.elementor-element-0b2e6ec .elementor-heading-title,
.elementor-element-aafc25f .elementor-heading-title {
white-space: nowrap !important;
overflow: visible !important;
}
/* ==========================================================================
COMMUNITY PAGE — mobile layout (≤767px)
Clean stacked layout: white sections, image above text, no cards/shadows.
========================================================================== */
@media (max-width: 767px) {
/* Page background: white */
.elementor-19 {
background-color: #ffffff !important;
}
/* Content sections: full width, white, no rounded corners or shadows */
.elementor-19 .elementor-element.elementor-element-5e99bd3,
.elementor-19 .elementor-element.elementor-element-2728bd2,
.elementor-19 .elementor-element.elementor-element-a0dbbd7 {
background-color: #ffffff !important;
width: 100% !important;
--width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.elementor-19 .elementor-element.elementor-element-425a5a4,
.elementor-19 .elementor-element.elementor-element-fbbae02 {
background-color: #f9f5f0 !important;
width: 100% !important;
--width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Inner row: stack column, no gap */
.elementor-19 .elementor-element.elementor-element-9cb94bf,
.elementor-19 .elementor-element.elementor-element-bbb302f,
.elementor-19 .elementor-element.elementor-element-007c379,
.elementor-19 .elementor-element.elementor-element-84ff6e1,
.elementor-19 .elementor-element.elementor-element-58cc74e {
flex-direction: column !important;
--flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
width: 100% !important;
--width: 100% !important;
}
/* Image containers: full width, image above text */
.elementor-19 .elementor-element.elementor-element-cfbbfdf,
.elementor-19 .elementor-element.elementor-element-2e83a60,
.elementor-19 .elementor-element.elementor-element-30d3e25,
.elementor-19 .elementor-element.elementor-element-4559da2,
.elementor-19 .elementor-element.elementor-element-29460dd {
width: 100% !important;
--width: 100% !important;
margin: 0 !important;
padding: 0 !important;
order: -1 !important;
flex-shrink: 0 !important;
}
/* Images: full width, natural aspect ratio */
.elementor-19 .elementor-element.elementor-element-cfbbfdf img,
.elementor-19 .elementor-element.elementor-element-2e83a60 img,
.elementor-19 .elementor-element.elementor-element-30d3e25 img,
.elementor-19 .elementor-element.elementor-element-4559da2 img,
.elementor-19 .elementor-element.elementor-element-29460dd img {
width: 100% !important;
height: auto !important;
object-fit: unset !important;
display: block !important;
}
/* Text containers: comfortable padding */
.elementor-19 .elementor-element.elementor-element-34eda38,
.elementor-19 .elementor-element.elementor-element-19ba87c,
.elementor-19 .elementor-element.elementor-element-e2421df,
.elementor-19 .elementor-element.elementor-element-904efdf,
.elementor-19 .elementor-element.elementor-element-5ec99e3 {
width: 100% !important;
--width: 100% !important;
padding: 28px 24px 36px !important;
box-sizing: border-box !important;
}
/* Section headings: slightly smaller on mobile */
.elementor-element-fd2d66c .elementor-heading-title,
.elementor-element-784f374 .elementor-heading-title,
.elementor-element-eb759a0 .elementor-heading-title,
.elementor-element-935f6ea .elementor-heading-title,
.elementor-element-ef8a883 .elementor-heading-title {
font-size: clamp(20px, 5.5vw, 28px) !important;
}
/* Body text */
.elementor-element-690d14b p,
.elementor-element-a7ae213 p,
.elementor-element-3840cdd p,
.elementor-element-d011742 p,
.elementor-element-d011742 span,
.elementor-element-fc39f38 p {
font-size: 15px !important;
line-height: 1.65 !important;
}
/* Force animated/invisible elements visible */
.elementor-19 .elementor-invisible {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
}
/* ==========================================================================
COMMUNITY PAGE — force sr-reveal visible on mobile so sections don't blank
The IntersectionObserver threshold means elements below the fold start at
opacity:0 and only reveal on scroll. On mobile the page is long enough that
entire sections stay invisible if the user doesn't scroll far enough.
Force them all visible; the transition still plays as they enter view.
========================================================================== */
@media (max-width: 767px) {
.elementor-19 .sr-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================================
GLOBAL — form submit buttons
The kit default sets all .elementor-button / input[type="submit"] to the
accent orange (#D4600A). Override every Elementor form submit button
site-wide to use the site's warm cream, with dark text.
========================================================================== */
.elementor-kit-41 button.elementor-button[type="submit"],
.elementor-kit-41 input[type="submit"],
.elementor-form .elementor-button,
.elementor-form .elementor-button[type="submit"],
.elementor-widget-form .elementor-button {
background-color: #D97030 !important;
color: #ffffff !important;
font-family: "Marcellus", serif !important;
font-size: 13px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
border: none !important;
padding: 14px 36px !important;
transition: background-color 0.2s !important;
}
.elementor-kit-41 button.elementor-button[type="submit"]:hover,
.elementor-kit-41 input[type="submit"]:hover,
.elementor-form .elementor-button:hover,
.elementor-widget-form .elementor-button:hover {
background-color: #b85c22 !important;
color: #ffffff !important;
}
/* ==========================================================================
FEATURED PAGE — "Reach Out to Angela" CTA band: more top spacing on mobile
The section's own top/bottom padding collapses on mobile, so the headline
and button run right up against the previous section above, and the band
sits too short for its content, letting the footer's "Mother Realtor"
logo text peek out underneath. More top margin + padding fixes both.
========================================================================== */
@media (max-width: 767px) {
.elementor-element-6576642 {
--margin-top: 100px !important;
margin-top: 100px !important;
--padding-top: 70px !important;
--padding-bottom: 70px !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
}
}
/* ==========================================================================
FEATURED PAGE — CTA band background-image dark overlay was missing
entirely. The vendor CSS sets --overlay-opacity:0.36 and paints a ::before
with background-color:var(--e-global-color-012f281), but that global-color
variable is never defined anywhere in this static scrape (the Elementor
kit stylesheet that would define it wasn't captured). Net effect: the
overlay never rendered, so the background photo (a bear-flag graphic with
large "MOTHER REALTOR" text) showed through at full brightness/sharpness
instead of as a dim watermark behind the "reach out to angela" heading.
A same-selector ::before override (matching color/opacity/position) was
tried first but never painted despite every computed style checking out
correctly — the same "computed style right, paint wrong" class of bug hit
earlier with the carousel background-images on this site. Worked around
it the same way: a real DOM element (.cta-overlay-fix, added right before
.e-con-inner in the HTML) instead of a pseudo-element. */
.elementor-element-6576642 {
position: relative !important;
}
.cta-overlay-fix {
position: absolute !important;
inset: 0 !important;
background-color: #968655 !important;
opacity: 0.36 !important;
pointer-events: none !important;
z-index: 0 !important;
}
.elementor-element-6576642 > .e-con-inner {
position: relative !important;
z-index: 1 !important;
}
/* ==========================================================================
YOUR HOME'S VALUE PAGE — hero top padding increased at every breakpoint
(054b745 only — the other 3 pages sharing the inner-page-hero rules above,
ce5f6a5/5a3091b/2008092, are untouched).
Also fixes a pre-existing cascade bug: the shared 767px rule (padding-top
80px) sits BEFORE the shared 1024px rule (padding-top 100px) in this file.
Equal specificity + !important means the browser's matched-rule priority
goes by cascade position, not media-query "narrowness" — confirmed via
CSS.getMatchedStylesForNode — so the 1024px rule was winning even on
narrow mobile viewports where 767px also matches, and true mobile has
been getting 100px instead of the intended 80px. Scoping this page's
override to explicit non-overlapping ranges avoids the ambiguity. */
@media (min-width: 1025px) {
.elementor-element-054b745 {
--padding-top: 320px !important;
padding-top: 320px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-element-054b745 {
--padding-top: 160px !important;
padding-top: 160px !important;
}
}
@media (max-width: 767px) {
.elementor-element-054b745 {
--padding-top: 200px !important;
padding-top: 200px !important;
}
}
/* ==========================================================================
FORM VALIDATION — required-field asterisks + red error state
Per agency CLAUDE.md forms rules. The `.req` span carries the asterisk so
it can be colored without inheriting the label's letter-spacing/transform.
`.field-error` is toggled by header-fixes.js on blur/submit and targets
both wrapper shapes used on this site: Elementor's .elementor-field-group
and the hand-built .mr-val-field (valuation form).
========================================================================== */
.elementor-field-label .req,
.mr-val-field label .req {
color: #c0392b;
letter-spacing: 0;
margin-left: 2px;
}
.field-error .elementor-field-label,
.field-error.mr-val-field label {
color: #c0392b !important;
}
.field-error input.elementor-field,
.field-error textarea.elementor-field,
.field-error select.elementor-field,
.field-error .elementor-field {
/* These inputs render with no visible border by default (border-width:0
in the site's base styles) — a border-color change alone would be
invisible, so the error state needs its own bottom border width too. */
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-color: #c0392b !important;
}
.field-error.mr-val-field {
border-bottom-color: #c0392b !important;
}
.field-error.mr-val-field input,
.field-error.mr-val-field select,
.field-error.mr-val-field textarea {
color: #c0392b;
}
/* ==========================================================================
FOOTER — REALTOR / Equal Housing Opportunity logo
Sits with the copyright line in the footer's bottom bar (4445cc6), same
placement convention used on the Bradley Sheppard site.
========================================================================== */
.mr-footer-legal-logo {
display: block !important;
height: 32px !important;
width: auto !important;
max-width: none !important;
margin-top: 10px;
filter: brightness(0) invert(1);
opacity: 0.85;
}
@media (min-width: 768px) {
.elementor-element-4445cc6 {
--flex-direction: row !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
flex-wrap: wrap !important;
width: auto !important;
max-width: none !important;
}
.mr-footer-legal-logo {
margin-top: 0;
flex-shrink: 0;
}
}
@media (max-width: 767px) {
.mr-footer-legal-logo {
margin-left: auto;
margin-right: auto;
}
}
/* ==========================================================================
ABOUT PAGE — hero top padding increased at every breakpoint (2008092
only — ce5f6a5/5a3091b/054b745, which share the base inner-page-hero
rules above, are untouched).
Same cascade-position bug as the Your Home's Value hero fix above: the
unconditional 220px rule and the 1024px/767px rules are equal specificity
+ !important, so the browser picks by source position, not by which
media query is "more specific." The 1024px rule (100px) sits after both
the unconditional rule and the 767px rule, so it was winning even on
narrow mobile viewports — confirmed via CSS.getMatchedStylesForNode.
Explicit non-overlapping ranges avoid the ambiguity. */
@media (min-width: 1025px) {
.elementor-element-2008092 {
--padding-top: 290px !important;
padding-top: 290px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-element-2008092 {
--padding-top: 160px !important;
padding-top: 160px !important;
}
}
@media (max-width: 767px) {
.elementor-element-2008092 {
--padding-top: 220px !important;
padding-top: 220px !important;
--padding-bottom: 60px !important;
padding-bottom: 60px !important;
}
}
/* ==========================================================================
ABOUT ANGELA PHOTO — no scroll-reveal fade, plus side padding
c1b1e87 (homepage) / c92bbec (About page) wrap the Angela + wildflower
portrait (Untitled-design-1.png). Both sit inside an ancestor tagged
.sr-reveal by scroll-reveal.js (50dab17 / 5699db3) — that ancestor's
opacity:0 + translateY(22px) start-state applies to this whole subtree,
so the photo fades/rises in with the rest of the block even though
scroll-reveal.js never tags the photo itself directly. Excluding just the
image from that subtree in JS wouldn't undo the inherited opacity/transform,
so instead force this element's own opacity/transform to stay static
regardless of the ancestor's .sr-reveal/.sr-in state.
========================================================================== */
.elementor-element-c1b1e87,
.elementor-element-c92bbec {
opacity: 1 !important;
transform: none !important;
transition: none !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
@media (min-width: 768px) {
.elementor-element-c1b1e87,
.elementor-element-c92bbec {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
/* ==========================================================================
HOME — pull-quote mobile: text should fill the dark box, not float in it
Measured at 390px: 48px above the text but ~102px of dark space below it
(48px padding + 14px paragraph margin + the 40px margin on 8d7f066, which
sits INSIDE the dark 911de80 band so it reads as dead box space, not
section spacing). The box was also 92% wide and left-pinned (55px dark
slack on the right vs 24px on the left) because the earlier width:100%
mobile rule loses to the higher-specificity .elementor-12 rule above.
Selectors here match that specificity and sit later in the file, so they
win. The band's breathing room against the Services section moves to
911de80, outside the dark background where it was always meant to be.
========================================================================== */
@media (max-width: 767px) {
.elementor-12 .elementor-element.elementor-element-9e20498 {
--width: 100% !important;
width: 100% !important;
--padding-top: 32px !important;
--padding-bottom: 32px !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-12 .elementor-element.elementor-element-4e4a50c p {
margin: 0 !important;
font-size: clamp(30px, 9vw, 42px) !important;
}
.elementor-12 .elementor-element.elementor-element-8d7f066 {
--margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
.elementor-12 .elementor-element.elementor-element-911de80 {
--margin-bottom: 40px !important;
margin-bottom: 40px !important;
}
}