in front-page.php. That works on
desktop, but if anything (Yoast HTML cleanup, a CSP, a stale
service-worker HTML cache) strips the inline style on a phone,
the hero degrades to a flat dark block.
This rule paints the same photo + overlay from CSS as a fall-
back. Inline style (specificity 1000) still wins when present,
so admins overriding the image via ACF still works. */
body.mmh-v2 .mmh-hero--editorial .mmh-hero__bg {
background-image:
linear-gradient(180deg, rgba(13,24,32,0.0) 0%, rgba(13,24,32,0.25) 35%, rgba(13,24,32,0.78) 100%),
url('assets/images/hero-mollymook.png');
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
}
/* 58.3 — Hero search-bar mobile layout.
The earlier @media (max-width: 720px) rule at §6770 stacked
the form via `grid-template-columns: 1fr !important`. That
relies on out-running the desktop grid rule's own !important
in source order, which is brittle.
Switching to flex column here removes the dependency entirely
— flex-direction beats whatever grid-template-columns says —
and we lock width/min-width on every nested element so no
single misbehaving descendant can push the form past the
viewport edge. */
@media (max-width: 720px) {
body.mmh-v2 .mmh-hero__search {
position: relative;
width: auto;
max-width: 100%;
margin: clamp(-32px, -6vw, -16px) 16px clamp(28px, 4vw, 36px);
padding: 0;
transform: none;
left: auto;
z-index: 6;
}
body.mmh-v2 .mmh-hero__search > .mmh-container {
width: auto;
max-width: 100%;
padding-inline: 0;
margin-inline: 0;
}
body.mmh-v2 .mmh-search {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 10px;
border-radius: 18px;
box-sizing: border-box;
}
body.mmh-v2 .mmh-search__form {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
width: 100%;
gap: 0;
}
body.mmh-v2 .mmh-search__field {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 12px 14px 10px !important;
border-right: none !important;
border-bottom: 1px solid var(--mmh-sand-200) !important;
border-radius: 0;
min-height: 56px;
box-sizing: border-box;
}
body.mmh-v2 .mmh-search__field:last-of-type {
border-bottom: none !important;
}
body.mmh-v2 .mmh-search__field--dates {
border-right: none !important;
border-bottom: 1px solid var(--mmh-sand-200) !important;
}
body.mmh-v2 .mmh-search__input,
body.mmh-v2 .mmh-search__select,
body.mmh-v2 .mmh-search__input--dates {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
body.mmh-v2 .mmh-search__submit {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
margin: 10px 0 0 !important;
font-size: 1rem !important;
box-sizing: border-box;
}
/* The same form is reused on the accommodation-search page —
carry the layout there too so behaviour is consistent. */
body.mmh-v2 .mmh-search-page__search .mmh-search,
body.mmh-v2 .mmh-search-page__search .mmh-search__form,
body.mmh-v2 .mmh-search-page__search .mmh-search__field,
body.mmh-v2 .mmh-search-page__search .mmh-search__submit {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
}
/* 58.4 — Image safety. Every image and SVG inside the page
should scale to its container. Catches any third-party
markup (Guesty, Yoast schema) that ships an explicit
pixel width. */
body.mmh-v2 main img,
body.mmh-v2 main svg,
body.mmh-v2 main video,
body.mmh-v2 main iframe {
max-width: 100%;
height: auto;
}
/* ============================================================
59. #featured-stays — Editor's Picks mobile carousel fixes
(2026-05-13 audit). Tested at 360 / 390 / 414 px.
Background: the existing mobile rules at §6461-§6481 forced
`display: flex; flex-wrap: nowrap` on `.row.content`, intending
a pure CSS snap-scroll. But Slick is initialized on that same
element whenever `featuredCount > 3`, and its computed slide
widths fight the flex layout — net result was a half-width
card with dark bands. We split the two cases via
`.row.content.slick-slider` vs `:not(.slick-slider)`.
Paired with the Slick init switching mobile to
`slidesToShow: 1.05` so a 5% peek of the next card shows on
the right edge — swipe affordance without a custom carousel.
============================================================ */
/* 59.1 — Restrict the CSS snap-scroll layout to the Slick-OFF
path. When Slick is active it manages the slide widths, the
sliding transform, and the dot pagination on its own; we
stay out of its way. */
@media (max-width: 720px) {
body.mmh-v2 .featuredListings .row.content:not(.slick-slider) {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-inline: 16px;
}
body.mmh-v2 .featuredListings .row.content:not(.slick-slider) > .listing-wrapper {
flex: 0 0 calc(100vw - 48px) !important;
max-width: calc(100vw - 48px) !important;
scroll-snap-align: start;
margin-right: 0;
}
}
/* 59.2 — Slick-active mobile layout. With slidesToShow:1.05 the
carousel renders ~95% of the visible area as the active slide
and a 5% peek of the next card on the right. The slide width
is calculated by Slick — we only need to:
· give each slide breathing room from its neighbour (4px
padding-right) so cards don't appear glued together
· make sure the .listing-wrapper inside fills the slide and
can shrink (min-width: 0) so its Bootstrap col-12 max-width
doesn't fight the Slick width
· expose the Slick dots and theme them for the dark card */
@media (max-width: 720px) {
body.mmh-v2 .featuredListings .row.content.slick-slider {
padding-inline: 16px;
overflow: visible;
/* Slick gives .slick-list overflow:hidden which would clip
the dot row if it sat too low; keep dots visible. */
}
body.mmh-v2 .featuredListings .row.content.slick-slider .slick-list {
overflow: visible;
}
body.mmh-v2 .featuredListings .slick-slide {
padding-right: 6px;
box-sizing: border-box;
min-width: 0;
}
body.mmh-v2 .featuredListings .slick-slide > .listing-wrapper,
body.mmh-v2 .featuredListings .slick-slide .listing-wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
padding-inline: 0 !important;
margin: 0 !important;
box-sizing: border-box;
}
/* Slick dots — visible on the dark card surface. */
body.mmh-v2 .featuredListings .slick-dots {
position: static;
display: flex !important;
justify-content: center;
gap: 8px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
body.mmh-v2 .featuredListings .slick-dots li {
width: auto; height: auto;
margin: 0;
}
body.mmh-v2 .featuredListings .slick-dots li button {
width: 8px; height: 8px;
padding: 0;
border-radius: 50%;
background: rgba(15, 26, 26, 0.25);
border: 1px solid rgba(15, 26, 26, 0.10);
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
transition: background var(--mmh-d-fast) var(--mmh-ease), transform var(--mmh-d-fast) var(--mmh-ease);
}
body.mmh-v2 .featuredListings .slick-dots li button::before { content: none !important; }
body.mmh-v2 .featuredListings .slick-dots li.slick-active button {
background: var(--mmh-primary);
transform: scale(1.25);
}
}
/* 59.3 — Card body: suburb badge, description, propField row.
Apply on mobile only — desktop layout is unchanged. */
@media (max-width: 720px) {
/* Suburb badge — never break mid-word, fall back to ellipsis. */
body.mmh-v2 #featured-stays .productListing .suburb,
body.mmh-v2 #featured-stays .productListing .listingSuburb {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
max-width: calc(100% - 64px);
overflow: hidden;
text-overflow: ellipsis;
padding: 6px 10px !important;
font-size: 0.66rem !important;
}
/* Description — clean word-boundary line-clamp (no mid-word ellipsis). */
body.mmh-v2 #featured-stays .productListing .listingDesc {
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* propField row — allow wrapping rather than clipping the 4th
icon at the right edge. Tighten the per-item right margin
so 4 fields normally still fit on one row at 360-414px. */
body.mmh-v2 #featured-stays .productListing .stats,
body.mmh-v2 #featured-stays .productListing .count {
flex-wrap: wrap !important;
overflow: visible !important;
column-gap: 6px;
row-gap: 4px;
}
body.mmh-v2 #featured-stays .productListing .propField {
margin-right: 0 !important;
padding-right: 4px;
white-space: nowrap !important;
}
}
/* 59.4 — Section header on mobile: stop the "Browse all stays"
CTA from forcing the intro lead onto a narrower column that
then visually truncates. Make both children full-width and
stack the CTA under the lead. */
@media (max-width: 720px) {
body.mmh-v2 #featured-stays .mmh-section-head {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 24px;
}
body.mmh-v2 #featured-stays .mmh-section-head__intro {
max-width: 100%;
flex: 1 1 100%;
}
body.mmh-v2 #featured-stays .mmh-section-head__intro .mmh-lead {
max-width: 100%;
}
body.mmh-v2 #featured-stays .mmh-section-head__cta {
align-self: flex-start;
}
}
/* 59.5 — Reduce the dead space below the carousel on mobile.
The default .mmh-section padding-block is 56px; the carousel
already has its own bottom margin via .mb-3 on each card
and the dots row adds ~18px, so 32px of section bottom-
padding is plenty. */
@media (max-width: 720px) {
body.mmh-v2 #featured-stays.mmh-section {
padding-bottom: clamp(28px, 5vw, 40px);
}
/* Trim the per-card bottom margin from Bootstrap's .mb-3 (16px)
since we're inside a horizontal carousel — vertical gap is
wasted. */
body.mmh-v2 #featured-stays .listing-wrapper.mb-3 {
margin-bottom: 0 !important;
}
}
/* ============================================================
60. Mobile vertical rhythm + homepage overlap fixes
(2026-05-13 audit, third pass).
Mobile-only — desktop ≥768px is untouched. The previous
homepage spacing rollback (§57 note) was about not lightening
the body bg; the rules below only change padding/margin and
leave colour alone.
============================================================ */
/* 60.1 — Cumulative homepage gap was ~180px between sections
on mobile: 90px sibling margin (parent twenty-twenty-one's
`body:not(.archive) .site-main > *`) + 96px section padding.
Trim both on mobile only so the page reads as a tighter
vertical rhythm without affecting desktop. */
@media (max-width: 767.98px) {
body.mmh-v2.home main.site-main > * {
margin-top: 32px;
margin-bottom: 32px;
}
body.mmh-v2 .mmh-section,
body.mmh-v2 .mmh-section--sand,
body.mmh-v2 .mmh-callband {
padding-block: 48px;
}
body.mmh-v2 .mmh-pullquote-section {
padding-block: 72px;
}
body.mmh-v2 .mmh-marquee {
padding-block: 12px;
}
}
/* 60.2 — Hero search bar floating-overlap on mobile.
§58.3 already gives the search bar a small negative top
margin so it overlaps the hero photo. Combined with §60.1's
32px sibling margins, the spacing reads correctly. We
guard against accidental excess top margin from the parent's
`.site-main > *` rule by tightening to clamp(-32px, -6vw, -8px). */
@media (max-width: 767.98px) {
body.mmh-v2 .mmh-hero__search {
margin-top: clamp(-32px, -6vw, -8px) !important;
margin-bottom: clamp(20px, 4vw, 28px) !important;
}
}
/* 60.3 — Editorial section ("Three hours south") photo tiles
were absolute-positioned (.mmh-editorial__photo--lg uses
`inset: 0 24% 28% 0`; --sm uses `inset: 32% 0 0 32%`) for
the desktop "scattered" look. On mobile the parent media
container is only ~4/5 aspect, so the scattered photos
collapse into each other. Stack them statically below the
copy. */
@media (max-width: 767.98px) {
body.mmh-v2 .mmh-editorial__media {
aspect-ratio: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
body.mmh-v2 .mmh-editorial__photo,
body.mmh-v2 .mmh-editorial__photo--lg,
body.mmh-v2 .mmh-editorial__photo--sm {
position: static;
inset: auto;
width: 100%;
aspect-ratio: 4 / 3;
}
body.mmh-v2 .mmh-editorial__caption {
position: static;
margin-top: 8px;
}
}
/* 60.4 — Make sure section-head intro paragraph never wraps
into a wider column than its mobile container. Belt-and-
braces; the homepage `body.home` rule at §6760 already
handles the hero copy, this catches every other section. */
@media (max-width: 767.98px) {
body.mmh-v2 .mmh-section-head {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
body.mmh-v2 .mmh-section-head__intro,
body.mmh-v2 .mmh-section-head__intro .mmh-lead {
max-width: 100%;
}
}
/* ============================================================
61. Sitewide dark theme (2026-05-13).
Three-colour brand system:
· #166B71 — primary teal (CTAs, links, surface accents)
· #1CA0B1 — bright teal (hover / active states)
· #E9A522 — gold (highlights, eyebrows, icons)
Neutrals:
· #14252a — page surface (matches Editor's Picks card)
· #11202a / #18313a — alt surfaces for banding
· #f7f2e8 — body text on dark (cream)
· rgba(247,242,232,0.62-0.92) — text hierarchy on dark
Pairs with §57's earlier rollback note: that rollback was about
not lightening the body for the homepage. This direction is the
opposite — go fully dark everywhere, on purpose. The two are
not in conflict because §57 contained no body-bg rule any
longer; only §57.3 (search-page width fix) survives, and it's
compatible with this section.
============================================================ */
/* 61.1 — Brand colour map. Constrain accent palette to the three
approved colours; derived darks/lights of those primaries are
the only secondary accents. */
body.mmh-v2 {
--c-bg-page: #14252a; /* page surface */
--c-bg-alt: #11202a; /* alt section surface for banding */
--c-bg-card: #18313a; /* card surface (top of gradient) */
--c-bg-card-end: #11202a; /* card surface (bottom of gradient) */
--c-line-soft: rgba(247, 242, 232, 0.10);
--c-line-strong: rgba(247, 242, 232, 0.18);
--c-text: #f7f2e8;
--c-text-mute: rgba(247, 242, 232, 0.78);
--c-text-dim: rgba(247, 242, 232, 0.62);
--c-text-faint: rgba(247, 242, 232, 0.42);
}
/* 61.2 — Page surface. Cover every wrapper the WP/twenty-twenty-
one stack paints a background on. !important defeats Yoast +
custom-background + parent twenty-twenty-one defaults all at
once. */
html,
body,
body.mmh-v2,
body.mmh-v2.custom-background,
body.custom-background,
.site,
#page.site,
#content.site-content,
main.site-main {
background-color: var(--c-bg-page) !important;
}
/* 61.3 — Default text on dark. */
body.mmh-v2 {
color: var(--c-text);
}
body.mmh-v2 h1, body.mmh-v2 h2, body.mmh-v2 h3,
body.mmh-v2 h4, body.mmh-v2 h5, body.mmh-v2 h6 {
color: var(--c-text);
}
body.mmh-v2 p,
body.mmh-v2 li {
color: var(--c-text-mute);
}
body.mmh-v2 .mmh-lead {
color: var(--c-text-mute) !important;
}
body.mmh-v2 a:not(.mmh-btn):not(.mmh-tabbar__tab):not(.mmh-header__brand):not(.shortlist-container) {
color: #1CA0B1;
}
body.mmh-v2 a:not(.mmh-btn):hover {
color: #E9A522;
}
/* 61.4 — Section bands. Default dark; .mmh-section--sand becomes
the alt dark band so the alternating rhythm is preserved. */
body.mmh-v2 .mmh-section,
body.mmh-v2 .mmh-section--dark {
background-color: var(--c-bg-page);
}
body.mmh-v2 .mmh-section--sand {
background-color: var(--c-bg-alt);
}
body.mmh-v2 .mmh-pullquote-section,
body.mmh-v2 .mmh-editorial,
body.mmh-v2 .mmh-pullquote-section blockquote,
body.mmh-v2 .mmh-editorial p {
background-color: transparent;
color: var(--c-text);
}
body.mmh-v2 .mmh-pullquote blockquote {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-pullquote figcaption {
color: var(--c-text-dim) !important;
}
/* 61.5 — Eyebrows + section-head copy on dark. */
body.mmh-v2 .mmh-eyebrow,
body.mmh-v2 .mmh-section-head .mmh-eyebrow {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-eyebrow::before,
body.mmh-v2 .mmh-eyebrow__marker {
background: #E9A522 !important;
color: var(--c-bg-page) !important;
}
body.mmh-v2 .mmh-section-head h2,
body.mmh-v2 .mmh-section-head h2 em {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-section-head h2 em {
color: #E9A522 !important;
}
/* 61.6 — Property cards (single source of truth).
Everything wearing `.productListing.card` — homepage Editor's
Picks, search results, destination archive, taxonomy archive,
shortlist page — now uses the same dark surface treatment.
Removes the divergent light-card variant on archives. */
body.mmh-v2 .productListing.card,
body.mmh-v2 .productListing.card .new-card-body,
body.mmh-v2 .productListing.card .card-body,
body.mmh-v2 .productListing.card a.new-card-body,
body.mmh-v2 .productListing.card a.card-body,
body.mmh-v2 .productListing.card .card-footer {
background-color: var(--c-bg-card-end) !important;
background-image: linear-gradient(180deg, var(--c-bg-card) 0%, var(--c-bg-card-end) 100%) !important;
color: var(--c-text) !important;
border: 1px solid var(--c-line-soft) !important;
}
body.mmh-v2 .productListing.card {
border-radius: 18px !important;
overflow: hidden !important;
box-shadow: 0 18px 38px -22px rgba(8, 24, 28, 0.5),
0 2px 6px rgba(8, 24, 28, 0.22) !important;
transition: transform 320ms cubic-bezier(.2,.7,.2,1),
box-shadow 320ms cubic-bezier(.2,.7,.2,1) !important;
}
body.mmh-v2 .productListing.card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 26px 56px -22px rgba(8, 24, 28, 0.65),
0 4px 10px rgba(8, 24, 28, 0.28) !important;
}
body.mmh-v2 .productListing .new-card-body {
padding: 18px 18px 20px !important;
}
body.mmh-v2 .productListing .listingTitle,
body.mmh-v2 .productListing .listingTitle a,
body.mmh-v2 .productListing h3.listingTitle,
body.mmh-v2 .productListing .listingText {
color: var(--c-text) !important;
}
body.mmh-v2 .productListing .listingDesc,
body.mmh-v2 .productListing .home__desc,
body.mmh-v2 .productListing .reviews,
body.mmh-v2 .productListing .no_of_reviews {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .productListing .reviews .stars {
color: #E9A522 !important;
}
body.mmh-v2 .productListing .stats .propField,
body.mmh-v2 .productListing .count .propField,
body.mmh-v2 .productListing .fieldSleeps,
body.mmh-v2 .productListing .fieldBedrooms,
body.mmh-v2 .productListing .fieldBathrooms,
body.mmh-v2 .productListing .fieldCars {
color: var(--c-text) !important;
}
body.mmh-v2 .productListing .propField::before {
color: #E9A522 !important;
}
body.mmh-v2 .productListing .listingPrice,
body.mmh-v2 .productListing .listingPrice .price-amount,
body.mmh-v2 .productListing .price-amount {
color: var(--c-text) !important;
}
body.mmh-v2 .productListing .listingPrice .shrink,
body.mmh-v2 .productListing .shrink {
color: var(--c-text-dim) !important;
}
body.mmh-v2 .productListing .listingPrice {
border-top: 1px solid var(--c-line-soft) !important;
padding-top: 10px !important;
margin-top: 4px !important;
}
body.mmh-v2 .productListing .card-footer {
border-top: 1px solid var(--c-line-soft) !important;
background: transparent !important;
}
body.mmh-v2 .productListing .suburb,
body.mmh-v2 .productListing .listingSuburb {
background: rgba(15, 26, 26, 0.78) !important;
color: var(--c-text) !important;
border: 1px solid var(--c-line-strong) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* 61.7 — Destination / search archive page container.
Suburb taxonomy (/destinations/{slug}/) and features taxonomy
pages previously inherited the 1100 px entry-content cap from
§4650, leaving cards squeezed into a narrow column. Lift the
cap so the grid lives on the same 80%/1600px container as the
homepage. Pairs with §57.3's accommodation-search width fix. */
body.mmh-v2.tax-suburbs .entry-content,
body.mmh-v2.tax-features .entry-content,
body.mmh-v2.tax-regions .entry-content,
body.mmh-v2.tax-listingcat .entry-content {
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
body.mmh-v2.tax-suburbs .entry-content > *:not(.alignwide):not(.alignfull),
body.mmh-v2.tax-features .entry-content > *:not(.alignwide):not(.alignfull),
body.mmh-v2.tax-regions .entry-content > *:not(.alignwide):not(.alignfull),
body.mmh-v2.tax-listingcat .entry-content > *:not(.alignwide):not(.alignfull) {
max-width: none;
margin-inline: 0;
}
body.mmh-v2.tax-suburbs .site-main,
body.mmh-v2.tax-features .site-main {
padding-inline: 0 !important;
max-width: none !important;
}
/* The archive page-header (term name + count) gets its own
container width so it lines up with the grid below it. */
body.mmh-v2.tax-suburbs .page-header,
body.mmh-v2.tax-features .page-header,
body.mmh-v2.archive .page-header {
max-width: min(80%, 1600px);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
padding-block: clamp(48px, 8vw, 96px) clamp(24px, 4vw, 48px);
}
body.mmh-v2.tax-suburbs .archive-title,
body.mmh-v2.tax-features .archive-title,
body.mmh-v2 .archive-title,
body.mmh-v2 .page-header .page-title {
color: var(--c-text) !important;
font-family: var(--mmh-font-serif);
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
line-height: 1.04;
letter-spacing: -0.022em;
}
/* 61.8 — Archive grid: 3-up at desktop, 2-up at tablet, 1-up
on mobile — matching the homepage Editor's Picks proportions.
The plugin emits `.listing-wrapper.col` (auto-fill flex item);
we lock the column widths explicitly so cards always render at
the same size as the homepage. */
body.mmh-v2.tax-suburbs #searchResults,
body.mmh-v2.tax-features #searchResults,
body.mmh-v2.archive #searchResults {
background: transparent !important;
padding-block: 0 !important;
}
body.mmh-v2.tax-suburbs #searchResults .row.content,
body.mmh-v2.tax-features #searchResults .row.content,
body.mmh-v2.archive #searchResults .row.content {
--bs-gutter-x: 28px;
--bs-gutter-y: 36px;
max-width: min(80%, 1600px);
margin-inline: auto !important;
padding-inline: clamp(20px, 4vw, 40px);
}
body.mmh-v2.tax-suburbs #searchResults .listing-wrapper,
body.mmh-v2.tax-features #searchResults .listing-wrapper,
body.mmh-v2.archive #searchResults .listing-wrapper {
flex: 0 0 100%;
max-width: 100%;
padding-inline: 14px;
margin-bottom: 0;
}
@media (min-width: 600px) {
body.mmh-v2.tax-suburbs #searchResults .listing-wrapper,
body.mmh-v2.tax-features #searchResults .listing-wrapper,
body.mmh-v2.archive #searchResults .listing-wrapper {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (min-width: 992px) {
body.mmh-v2.tax-suburbs #searchResults .listing-wrapper,
body.mmh-v2.tax-features #searchResults .listing-wrapper,
body.mmh-v2.archive #searchResults .listing-wrapper {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}
/* 61.9 — Card image — fixed aspect so the photo dominates the
card visually, matching the homepage Editor's Picks card. */
body.mmh-v2 .productListing .card-img-top {
aspect-ratio: 4 / 3 !important;
border-radius: 0 !important;
overflow: hidden;
border-bottom: 1px solid var(--c-line-soft);
}
/* 61.10 — Form controls on dark. Inputs, selects, the search
bar fields all need a dark surface + cream text or they look
like leaked white islands. */
body.mmh-v2 .mmh-search,
body.mmh-v2 .mmh-search__form {
background: var(--c-bg-card) !important;
border: 1px solid var(--c-line-soft) !important;
color: var(--c-text);
}
body.mmh-v2 .mmh-search__field {
border-right-color: var(--c-line-soft) !important;
border-bottom-color: var(--c-line-soft) !important;
color: var(--c-text);
}
body.mmh-v2 .mmh-search__field:hover {
background: rgba(247, 242, 232, 0.04) !important;
}
body.mmh-v2 .mmh-search__label {
color: var(--c-text-dim) !important;
}
body.mmh-v2 .mmh-search__input,
body.mmh-v2 .mmh-search__select,
body.mmh-v2 .mmh-search__input--dates {
color: var(--c-text) !important;
background: transparent !important;
}
body.mmh-v2 .mmh-search__input::placeholder,
body.mmh-v2 .mmh-search__input--dates::placeholder {
color: var(--c-text-faint) !important;
}
body.mmh-v2 .mmh-search__submit {
background: #166B71 !important;
color: #f7f2e8 !important;
}
body.mmh-v2 .mmh-search__submit:hover {
background: #1CA0B1 !important;
}
/* 61.11 — Toolbar (Bedrooms / Bathrooms / Max price / Sort by)
on the search page. */
body.mmh-v2 .mmh-toolbar {
background: var(--c-bg-card) !important;
border: 1px solid var(--c-line-soft) !important;
color: var(--c-text);
}
body.mmh-v2 .mmh-toolbar__count,
body.mmh-v2 .mmh-toolbar__field span,
body.mmh-v2 .mmh-toolbar__field label {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-toolbar__field select {
background: var(--c-bg-page) !important;
color: var(--c-text) !important;
border: 1px solid var(--c-line-soft) !important;
}
body.mmh-v2 .mmh-chip {
background: var(--c-bg-page) !important;
color: var(--c-text-mute) !important;
border: 1px solid var(--c-line-soft) !important;
}
body.mmh-v2 .mmh-chip:hover {
border-color: #1CA0B1 !important;
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-chip.is-active,
body.mmh-v2 .mmh-chip[aria-pressed="true"] {
background: #166B71 !important;
color: #f7f2e8 !important;
border-color: #166B71 !important;
}
/* 61.12 — Buttons. Only the three brand colours allowed. */
body.mmh-v2 .mmh-btn--primary {
background: #166B71 !important;
color: #f7f2e8 !important;
border-color: #166B71 !important;
}
body.mmh-v2 .mmh-btn--primary:hover {
background: #1CA0B1 !important;
color: #f7f2e8 !important;
}
body.mmh-v2 .mmh-btn--inverse {
background: #E9A522 !important;
color: #14252a !important;
border-color: #E9A522 !important;
}
body.mmh-v2 .mmh-btn--inverse:hover {
background: #f7c659 !important;
color: #14252a !important;
}
/* 61.13 — Breadcrumbs cream-tinted. */
body.mmh-v2 .mmh-breadcrumbs,
body.mmh-v2 .mmh-breadcrumbs a,
body.mmh-v2 .mmh-breadcrumbs li {
color: var(--c-text-dim) !important;
}
body.mmh-v2 .mmh-breadcrumbs a:hover {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-breadcrumbs__sep {
color: var(--c-text-faint) !important;
}
/* 61.14 — Cards/tiles outside .productListing — destination
bento tiles on the homepage are .mmh-destination; the same
dark treatment so the visual system stays unified. */
body.mmh-v2 .mmh-destination {
background-color: var(--c-bg-card-end) !important;
border: 1px solid var(--c-line-soft);
}
body.mmh-v2 .mmh-destination .mmh-destination__name,
body.mmh-v2 .mmh-destination__kicker {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-destination__blurb {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-destination__count {
color: #E9A522 !important;
}
/* 61.15 — FAQ accordion on dark. */
body.mmh-v2 .entry-content details,
body.mmh-v2 .mmh-faq__item {
background-color: var(--c-bg-card-end) !important;
border-color: var(--c-line-soft) !important;
color: var(--c-text);
}
body.mmh-v2 .entry-content details > summary,
body.mmh-v2 .mmh-faq__item summary {
color: var(--c-text) !important;
}
body.mmh-v2 .entry-content details > *:not(summary) {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-faq-chevron {
color: #1CA0B1 !important;
}
/* 61.16 — Mobile: tighten card grid padding so the wider cards
still look comfortable at 360-414px. */
@media (max-width: 767.98px) {
body.mmh-v2.tax-suburbs #searchResults .row.content,
body.mmh-v2.tax-features #searchResults .row.content,
body.mmh-v2.archive #searchResults .row.content {
padding-inline: 16px;
--bs-gutter-x: 16px;
--bs-gutter-y: 20px;
}
body.mmh-v2.tax-suburbs .page-header,
body.mmh-v2.tax-features .page-header,
body.mmh-v2.archive .page-header {
padding-inline: 16px;
padding-block: 40px 20px;
}
}
/* ============================================================
62. Contrast fixes for dark theme (2026-05-13 follow-up).
§61 flipped surfaces to dark but the inherited text-colour
rules still target the dark-tones in the token system
(--mmh-stone-900 #111919, --ink #1A1A1A, --mmh-stone-700
#364444). On the new dark page surface those produce
1.1-1.5:1 contrast — illegible. We can't redefine the tokens
sitewide because many BACKGROUND rules reuse them. So this
section explicitly overrides text-colour at the affected
selectors, leaving surface tokens alone.
Rule of thumb: any text on a dark surface goes to one of
--c-text #f7f2e8 (headings, primary body)
--c-text-mute rgba(247,242,232,0.78) (body paragraphs, leads)
--c-text-dim rgba(247,242,232,0.62) (meta, captions)
--c-text-faint rgba(247,242,232,0.42) (placeholder, hint)
#E9A522 (gold accents — italics in display heads, eyebrows, icons)
#1CA0B1 (bright teal — links, hover states)
Light surfaces (gold buttons, teal buttons) keep their dark
text from §61.12. Those rules are NOT touched here.
============================================================ */
/* 62.1 — Editorial section ("Three hours south") had ink-on-paper
text. Its lead and body copy now need cream. */
body.mmh-v2 .mmh-editorial,
body.mmh-v2 .mmh-editorial__copy,
body.mmh-v2 .mmh-editorial__copy p,
body.mmh-v2 .mmh-editorial__copy .mmh-lead,
body.mmh-v2 .mmh-editorial__list li {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-editorial h2,
body.mmh-v2 .mmh-editorial__copy h2 {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-editorial h2 em,
body.mmh-v2 .mmh-editorial__copy h2 em {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-editorial__list svg {
color: #1CA0B1 !important;
}
body.mmh-v2 .mmh-editorial__caption {
color: var(--c-text-dim) !important;
}
/* 62.2 — Mood filter ("Travel by feeling, not just place")
tabs/panels. The mood card had ink text on paper. */
body.mmh-v2 .mmh-mood,
body.mmh-v2 .mmh-mood__copy,
body.mmh-v2 .mmh-mood__panel {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-mood__tab {
color: var(--c-text-mute) !important;
border-color: var(--c-line-soft) !important;
}
body.mmh-v2 .mmh-mood__tab:hover {
color: var(--c-text) !important;
border-color: #1CA0B1 !important;
}
body.mmh-v2 .mmh-mood__tab.is-active {
color: #14252a !important;
background: #E9A522 !important;
border-color: #E9A522 !important;
}
body.mmh-v2 .mmh-mood__tab svg {
color: inherit !important;
}
/* 62.3 — Value-props ("A small team. A high bar.") cards. */
body.mmh-v2 .mmh-value-prop,
body.mmh-v2 .mmh-value-props li {
color: var(--c-text-mute) !important;
background-color: var(--c-bg-card-end) !important;
border: 1px solid var(--c-line-soft);
}
body.mmh-v2 .mmh-value-prop h3,
body.mmh-v2 .mmh-value-props li h3 {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-value-prop p,
body.mmh-v2 .mmh-value-props li p {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-value-prop__icon,
body.mmh-v2 .mmh-value-prop__icon svg {
color: #E9A522 !important;
}
/* 62.4 — Pull-quote ("Our philosophy has always been..."). */
body.mmh-v2 .mmh-pullquote,
body.mmh-v2 .mmh-pullquote blockquote,
body.mmh-v2 .mmh-pullquote-section blockquote {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-pullquote blockquote em,
body.mmh-v2 .mmh-pullquote-section blockquote em {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-pullquote figcaption {
color: var(--c-text-dim) !important;
}
body.mmh-v2 .mmh-pullquote__mark {
color: rgba(233, 165, 34, 0.18) !important;
}
/* 62.5 — Trust strip + hero stat row + hero trust band. */
body.mmh-v2 .mmh-hero__trust,
body.mmh-v2 .mmh-hero__trust span {
color: rgba(247, 242, 232, 0.85) !important;
}
body.mmh-v2 .mmh-hero__trust .mmh-hero__trust-star {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-hero-stat__num {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-hero-stat__label {
color: rgba(247, 242, 232, 0.72) !important;
}
/* 62.6 — Section heads — eyebrow markers + headings + leads.
Catches every `.mmh-section-head h2` site-wide (not just
homepage) so destination archive heads and search-page heads
match. */
body.mmh-v2 .mmh-section-head h2,
body.mmh-v2 .mmh-section-head .mmh-section-head__intro h2 {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-section-head h2 em {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-section-head .mmh-lead,
body.mmh-v2 .mmh-section-head__intro .mmh-lead {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-link-arrow,
body.mmh-v2 .mmh-section-head__cta {
color: #1CA0B1 !important;
}
body.mmh-v2 .mmh-link-arrow:hover,
body.mmh-v2 .mmh-section-head__cta:hover {
color: #E9A522 !important;
}
/* 62.7 — CTA strip ("Become part of the family"). The
.mmh-cta--owners surface was already dark; we just unify the
accent text colors. */
body.mmh-v2 .mmh-cta,
body.mmh-v2 .mmh-cta--owners {
color: var(--c-text);
}
body.mmh-v2 .mmh-cta h2,
body.mmh-v2 .mmh-cta h3 {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-cta p,
body.mmh-v2 .mmh-cta__copy p {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-cta__steps li,
body.mmh-v2 .mmh-cta__steps li span {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-cta__steps li span {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-cta__incentive {
color: var(--c-text-dim) !important;
}
/* 62.8 — Marquee strip. Already dark; just confirm gold accent
+ cream separator. */
body.mmh-v2 .mmh-marquee__item {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-marquee__sep {
color: rgba(247, 242, 232, 0.42) !important;
}
/* 62.9 — Footer. The footer was originally dark with cream
text; keep that, but make sure the dark theme didn't break
the column heads / link colors. */
body.mmh-v2 .mmh-footer,
body.mmh-v2 .mmh-footer__brand p,
body.mmh-v2 .mmh-footer__col ul li,
body.mmh-v2 .mmh-footer__col ul li a {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-footer__col h4,
body.mmh-v2 .mmh-footer__brand .mmh-header__brand-text {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-footer__col ul li a:hover {
color: #E9A522 !important;
}
body.mmh-v2 .mmh-footer__bar,
body.mmh-v2 .mmh-footer__legal a {
color: var(--c-text-dim) !important;
}
/* 62.10 — Catch-all for generic text inside .mmh-section blocks
that none of the above caught. Last-resort sweep — explicitly
excludes elements we KNOW have light backgrounds (buttons,
active chips, the active mood tab) so we don't accidentally
paint dark text in a way that hurts contrast. */
body.mmh-v2 .mmh-section :is(p, li, dt, dd, span):not(.mmh-btn):not(.mmh-btn *):not(.mmh-chip.is-active):not(.mmh-mood__tab.is-active):not(.mmh-eyebrow):not(.mmh-eyebrow__marker):not(.mmh-eyebrow *) {
color: var(--c-text-mute);
}
body.mmh-v2 .mmh-section :is(h1, h2, h3, h4, h5, h6) {
color: var(--c-text);
}
/* 62.11 — Eyebrow markers (the gold pill with Roman numerals
"I", "II", ...) — gold background, dark text. */
body.mmh-v2 .mmh-eyebrow__marker {
color: #14252a !important;
background: #E9A522 !important;
}
/* 62.12 — Visited-link color was dark teal #166B71, which on a
#14252a surface clears 4.5:1 — fine. Hover stays gold. But
reset `:visited` on the value-prop / cta / mood cards so the
links inside them aren't a different colour from the static
text around them. */
body.mmh-v2 .mmh-value-prop a,
body.mmh-v2 .mmh-cta a:not(.mmh-btn),
body.mmh-v2 .mmh-mood__panel a:not(.mmh-btn) {
color: #1CA0B1;
}
body.mmh-v2 .mmh-value-prop a:visited,
body.mmh-v2 .mmh-cta a:not(.mmh-btn):visited,
body.mmh-v2 .mmh-mood__panel a:not(.mmh-btn):visited {
color: #1CA0B1;
}
/* ============================================================
63. Follow-up: AA contrast + seamless cards / search-bar
(2026-05-15, from Playwright audit findings).
Six AA failures the §62 sweep didn't catch:
- hero search floated-label dark on dark (#2a3a3a/#18313a)
- inner-page breadcrumb current-page dark on dark
- contact / list-with-us form labels dark on dark
- hero `.mmh-hero__phone` gold-soft on teal (3.32:1)
- callband `.mmh-btn--inverse[href^=tel:]` gold-on-gold,
because a tel-specific !important rule trumped the
button's dark text colour
- hero `.mmh-search__label` (WHERE/DATES/GUESTS) stone-700
on dark teal — barely AA, eyestrain
Plus two visual asks: drop the WHERE/DATES/GUESTS column
dividers, and remove the 1px outline on `.productListing`
cards so they sit flush on the dark page background.
============================================================ */
/* 63.1 — Seamless hero search bar (no internal dividers). */
body.mmh-v2 .mmh-search__field { border-right: none !important; }
@media (max-width: 920px) {
body.mmh-v2 .mmh-search__field { border-bottom: none !important; }
}
/* 63.2 — Floated form labels legible on dark surfaces.
The hero search, contact form, and list-with-us form all sit
on dark backgrounds; inherited stone-700 was 1.14–1.55:1. */
body.mmh-v2 .mmh-floated-label,
body.mmh-v2 .mmh-hero__search .mmh-floated-label,
body.mmh-v2 .mmh-search__field .mmh-floated-label,
body.mmh-v2 .entry-content form .mmh-floated-label,
body.mmh-v2 .entry-content label,
body.mmh-v2 form label {
color: var(--c-text-mute) !important;
}
body.mmh-v2 .mmh-floated-label__req,
body.mmh-v2 .entry-content label .required,
body.mmh-v2 form label .required {
color: #E9A522 !important;
}
/* 63.3 — Hero search column labels (WHERE / DATES / GUESTS)
and input values legible against the dark search form. */
body.mmh-v2 .mmh-hero__search .mmh-search__label,
body.mmh-v2 .mmh-search__form .mmh-search__label {
color: var(--c-text-dim) !important;
}
body.mmh-v2 .mmh-hero__search .mmh-search__input,
body.mmh-v2 .mmh-search__form .mmh-search__input {
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-hero__search .mmh-search__input::placeholder,
body.mmh-v2 .mmh-search__form .mmh-search__input::placeholder {
color: var(--c-text-faint) !important;
}
/* 63.4 — Breadcrumb current page legible on the dark page-header
strip. Was painted with stone-900 / ink-900 (1.12:1). */
body.mmh-v2 .mmh-breadcrumbs li[aria-current="page"],
body.mmh-v2 .mmh-breadcrumbs li[aria-current="page"] span,
body.mmh-v2 .mmh-breadcrumbs [aria-current="page"] {
color: var(--c-text) !important;
}
/* 63.5 — Hero phone link: was gold-soft on teal (3.32:1).
Lift to cream so it reads alongside the other hero meta. */
body.mmh-v2 .mmh-hero__phone {
color: var(--c-text) !important;
border-bottom-color: rgba(247, 242, 232, 0.42) !important;
}
body.mmh-v2 .mmh-hero__phone:hover {
color: #E9A522 !important;
border-bottom-color: #E9A522 !important;
}
/* 63.6 — Callband phone CTA (`.mmh-btn--inverse[href^="tel:"]`).
The gold-on-gold (1.13:1) happened because the tel-selector
rule had higher specificity than `.mmh-btn--inverse`. Need
selectors that beat (0,3,2) — hence the long-form below. */
body.mmh-v2 .mmh-callband a.mmh-btn--inverse[href^="tel:"],
body.mmh-v2 .mmh-callband a.mmh-btn[href^="tel:"].mmh-btn--inverse,
body.mmh-v2 a.mmh-btn--inverse[href^="tel:"] {
color: #14252a !important;
}
/* 63.7 — Property cards seamless on dark background.
Drop the 1px outline + internal price/footer dividers; cards
already separate via gradient + shadow.
#featured-stays at line 8965 wins on specificity, so we include
it explicitly here. */
body.mmh-v2 .productListing.card,
body.mmh-v2 .productListing.card .new-card-body,
body.mmh-v2 .productListing.card .card-body,
body.mmh-v2 .productListing.card a.new-card-body,
body.mmh-v2 .productListing.card a.card-body,
body.mmh-v2 .productListing.card .card-footer,
body.mmh-v2 #featured-stays .productListing.card,
body.mmh-v2 #featured-stays .productListing.card .new-card-body,
body.mmh-v2 #featured-stays .productListing.card .card-body,
body.mmh-v2 #featured-stays .productListing.card .card-footer {
border: none !important;
}
body.mmh-v2 .productListing .listingPrice,
body.mmh-v2 .productListing .card-footer,
body.mmh-v2 #featured-stays .productListing .listingPrice,
body.mmh-v2 #featured-stays .productListing .card-footer {
border-top: none !important;
}
/* ============================================================
64. Round-2 follow-ups (2026-05-15):
- hero search bar still showed a 1px outer ring on .mmh-search
and .mmh-search__form
- eyebrow Roman-numeral marker rendered as a tiny gold
rectangle that looked like a layout artefact — replace with
a slim gold accent line, drop the numeral text
- homepage FAQ section (.mmh-section--sand → light surface)
inherited the dark-theme h2 colour from §62 — invisible
- FAQ accordion's open state flipped the summary to a
pale-mint surface with dark stone-900 text, breaking the
dark-card visual rhythm of the closed items
- .mmh-value-prop::before injected a "01/02/03/04" counter
chip onto each card; not part of the intended look
============================================================ */
/* 64.1 — Hero search bar: kill the outer 1px ring AND the inset
top-edge highlight (the rgba(255,255,255,0.6) 0 1 inset shadow
that read as a hairline border around the pill). Keep the
drop shadow for elevation. */
body.mmh-v2 .mmh-hero__search .mmh-search,
body.mmh-v2 .mmh-hero__search .mmh-search__form,
body.mmh-v2 .mmh-search,
body.mmh-v2 .mmh-search__form {
border: none !important;
}
body.mmh-v2 .mmh-hero__search .mmh-search,
body.mmh-v2 .mmh-search {
box-shadow:
0 24px 60px -24px rgba(15, 102, 98, 0.32),
0 8px 24px -8px rgba(0, 0, 0, 0.10) !important;
}
/* 64.2 — Eyebrow marker: replace the gold rectangle with a small
horizontal accent line. The Roman numeral text is hidden, the
element stays in flow as a 18×2px gold rule sitting on the
eyebrow baseline. */
body.mmh-v2 .mmh-eyebrow__marker {
display: inline-block !important;
width: 18px !important;
height: 2px !important;
padding: 0 !important;
background: #E9A522 !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
border-radius: 1px !important;
vertical-align: middle !important;
overflow: hidden !important;
text-indent: 9999px !important;
margin: 0 10px 0 0 !important;
}
/* 64.3 — Value-prop cards: remove the "1./2./3./4." numbering.
`.mmh-value-props` is an
, so each - gets a native
`list-item` marker on top of any counter chip §62 may inject. */
body.mmh-v2 .mmh-value-props {
list-style: none !important;
padding-left: 0 !important;
}
body.mmh-v2 .mmh-value-props li,
body.mmh-v2 .mmh-value-prop {
list-style: none !important;
}
body.mmh-v2 .mmh-value-props li::marker,
body.mmh-v2 .mmh-value-prop::marker {
content: "" !important;
}
body.mmh-v2 .mmh-value-prop::before,
body.mmh-v2 .mmh-value-props li::before,
body.mmh-v2 .mmh-value-prop__num {
content: none !important;
display: none !important;
}
/* 64.4 — FAQ section heading legible on its cream background.
§62.6/§62.10 paint every .mmh-section-head h2 cream for the
dark-theme flip. The FAQ section (`#faq`) is the one section
that's still cream (other `.mmh-section--sand` blocks have been
re-painted dark by a later rule), so we scope by id here. */
body.mmh-v2 #faq .mmh-section-head h2,
body.mmh-v2 #faq .mmh-section :is(h1, h2, h3, h4, h5, h6),
body.mmh-v2 #faq h2 {
color: var(--mmh-stone-900) !important;
}
body.mmh-v2 #faq .mmh-section-head h2 em,
body.mmh-v2 #faq h2 em {
color: #B6841C !important;
}
body.mmh-v2 #faq .mmh-section-head .mmh-lead,
body.mmh-v2 #faq .mmh-section-head__intro .mmh-lead,
body.mmh-v2 #faq p {
color: var(--mmh-stone-700) !important;
}
/* 64.5 — FAQ accordion: open state was flipping to pale-mint with
dark stone-900 text. Force it to match the dark closed state
so all items read as one stack. */
body.mmh-v2 .mmh-faq details[open],
body.mmh-v2 .mmh-faq__item[open],
body.mmh-v2 .entry-content details[open] {
background-color: var(--c-bg-card-end) !important;
}
body.mmh-v2 .mmh-faq details[open] summary,
body.mmh-v2 .mmh-faq__item[open] summary,
body.mmh-v2 .entry-content details[open] > summary,
body.mmh-v2 .mmh-faq details[open] summary span,
body.mmh-v2 .mmh-faq__item[open] summary span {
background: transparent !important;
background-color: transparent !important;
color: var(--c-text) !important;
}
body.mmh-v2 .mmh-faq details[open] > *:not(summary),
body.mmh-v2 .mmh-faq__item[open] > *:not(summary),
body.mmh-v2 .mmh-faq__item[open] p,
body.mmh-v2 .entry-content details[open] > *:not(summary) {
color: var(--c-text-mute) !important;
}
/* ============================================================
65. QA audit (2026-05-22) — surface-aware contrast pass.
Driven by a live-DOM WCAG crawl across home, /specials/,
/list-with-us/, /contact/, /faqs/ and /stay/*. The root cause
in every finding was the same: the cream brand text
(--c-text-mute = rgba(247,242,232,0.78)) and the dark teal
ink (--c-ink-700 = #2A3A3A) being applied without knowing
which surface they sit on. Section 62 painted "mood" copy
cream when the mood card is white; the homepage editorial
lead inherited an ink-700 rule meant for sand sections, but
Section 61 flipped sand sections dark.
Approach: introduce a small set of paired tokens
(text-on-dark / text-on-light, gold-on-dark / gold-on-light,
teal-link-dark / teal-link-light) and apply them at the
component level so dark-on-dark and cream-on-cream stop
happening as more components are added.
============================================================ */
body.mmh-v2 {
/* Paired text tokens — pick by surface, not by component. */
--text-on-dark: #F7F2E8;
--text-on-light: #14252A;
--text-muted-on-dark: #C8D4D4;
--text-muted-on-light: #4F5C5C;
/* Eyebrow gold flips: light surfaces need the deep variant
to clear 4.5:1 — #E9A522 only manages 1.9–2.0:1 on cream. */
--gold-on-dark: #E9A522;
--gold-on-light: #8A5E0A;
/* Link teal flips: #166B71 is fine on cream but 2.5:1 on
the dark page surface; lift to #5BC0CB there. */
--teal-link-on-dark: #5BC0CB;
--teal-link-on-light: #0F6F75;
}
/* 65.1 — Mood card ("Travel by feeling, not just place").
`.mmh-mood` is a white card sitting inside the dark sand
section. §62.2 painted .mmh-mood__copy cream-mute (invisible
on white). Lock the copy to dark ink on the white surface. */
body.mmh-v2 .mmh-mood,
body.mmh-v2 .mmh-mood__copy,
body.mmh-v2 .mmh-mood__panel,
body.mmh-v2 .mmh-mood__panel p {
color: var(--text-on-light) !important;
}
body.mmh-v2 .mmh-mood__copy {
opacity: 1 !important;
}
/* 65.2 — Property description paragraphs on /stay/* pages.
`#listingContent` is rendered into the white card on single
listings. §61.3's global `body.mmh-v2 p` rule paints every
paragraph cream-mute; the older `.singleListing p` ink-700
override at line 7494 loses to source-order in some setups.
Lock every text-bearing child of the description block to
dark ink. */
body.mmh-v2 #listingContent,
body.mmh-v2 #listingContent p,
body.mmh-v2 #listingContent li,
body.mmh-v2 .singleListing #listingContent p,
body.mmh-v2 .single-listing-block p,
body.mmh-v2 .single-listing-block li,
body.mmh-v2 .listingContentWrapper p,
body.mmh-v2 .listingContentWrapper li,
body.mmh-v2 .description p,
body.mmh-v2 .description li {
color: var(--text-on-light) !important;
}
body.mmh-v2 #listingContent h2,
body.mmh-v2 .single-listing-block h2,
body.mmh-v2 .listingContentWrapper h2 {
color: var(--text-on-light) !important;
}
/* 65.3 — Hero search bar placeholders + helper labels. The
floated-label pattern earlier puts a real