/* ========================================================================== MARIGOLD PROPERTY MANAGEMENT Customizer → Additional CSS Complete file — replaces everything currently in the panel. ========================================================================== Version 5.5 — 2026-08-09 CHANGELOG --------- 5.5 Reconciliation pass. On 2026-08-07 a fix for the invisible "Featured" badge link text was pasted directly into the Customizer (outside this versioned file) to get it live fast. It worked, but it never got folded back in here, so the live site and this file had drifted since Aug 7. This version folds that fix in as Section 13.9 (Featured Badge), next to the other Estatik listing- card rules it belongs with, and removes the loose unscoped copy. No other drift found — everything else in the live Customizer panel matched 5.4 exactly. 5.4 Tenant portal card: removed the eyebrow (redundant with the page title), removed the maintenance-request bullet (not live in the portal yet), added .mg-portal-card__link for the "Contact us" mailto link in the card's bottom note. 5.3 Added Section 16, the Tenant Portal card. Stylized dark card with gold top border, matching the noir/gold contact-bar treatment used elsewhere on the site. Links out to the external Rent Manager TWA login (not embedded — TWA blocks iframing, and even if it didn't, cross-site cookie handling on login flows makes embedding a bad idea for an auth page). 5.2 .mg-faq__address given margin: 0. display: inline alone wasn't enough to fully suppress
's browser-default spacing (~1em top/bottom in most browsers), which left a visible gap between "Our office is at" and the address in the FAQ block. The live site currently works around this by using a instead of
in that FAQ answer, so this fix is precautionary — it closes the gap at the source if
is ever used again anywhere on the site. 5.1 Restored the FAQ accordion section (14). It was missing from the 5.0 file entirely — not overridden, just absent — which is why the FAQ block on the live site stopped picking up its styling (gold eyebrow, serif heading, plus/minus icons, answer typography). Next time this file is replaced wholesale, keep Section 14 intact or the same thing will happen again. 5.0 Gold-bar investigation session. - RULED OUT: Estatik "My Listing" block has no width/full-bleed toggle anywhere in its settings (checked all 9 panels: General, Behaviour, Fields, Search, Content, Pagination, Display Options, Map, Query Filters, Appearance). - RULED OUT: hfm_full_width attribute. Tested live at 0 via a Custom HTML block override of the shortcode — gold persisted. This attribute is NOT the cause. (4.0's closing notes guessed wrong on this; corrected below.) Reverted back to the native "My Listing" block afterward for settings-panel simplicity. - RULED OUT: body background. Confirmed via Computed panel that body resolves to rgb(251,247,239) — the correct canvas color — with no gold competing at that level. - STILL UNRESOLVED: exact source of the gold edges around the Available Rentals section. Not found in any block setting, not found in this stylesheet, not found on . Next place to check if this resurfaces: itself, and any box-shadow / border / outline property (Computed's background filter would not have caught those). - APPLIED AS A DEFENSIVE MEASURE (not a confirmed fix): Section 2 now forces html/body/.wp-site-blocks to canvas with !important, closing off the most likely remaining culprit (a root-level background peeking through narrower content). - REMINDER: reverting to the native "My Listing" block reset its settings to defaults (posts_per_page reverted to 40). The Display Options / Map / Pagination / General configuration done earlier needs to be redone. See COMPANION EDITOR SETTINGS below. 4.0 Consolidation + root-cause fix for the gold blocks around listings. - SECTION 6 SCOPED. It previously read `.wp-block-button__link, .wp-element-button` with no context, so it matched elements inside Estatik's card markup and painted them gold. Now scoped to `.wp-block-button`, so it only touches real Button blocks. This WAS a real bug and IS fixed — but it was a different gold issue than the Available Rentals section edges (see 5.0 above). - Sections 12, 12.11 and 12.12 merged into one section 12 - Section 13 rewritten: background reset, sage card, section band - Removed the duplicate 12.12 override of the form heading 3.3 Button text centering, header gradient cleared, hover affordance. 3.2 Header CTA selectors corrected to real theme classes. 3.1 Mobile CTA restored. Footer contact items aligned. 3.0 Gold+Noir buttons, Footer option C, dual header CTAs. 2.0 Color rebalance + accessibility pass. 1.0 Baseline. Nav contrast, proof cards, hero panorama, utility bar. COMPANION EDITOR SETTINGS (not CSS — set these in the block editor) ------------------------------------------------------------------ Header Columns widths: logo 20% · menu 42% · header-btns 38% Buttons block: "Allow to wrap to multiple lines" = ON header-btns column: Styles → Background → clear any gradient ⚠ TODO — "My Listing" block (Available Rentals, homepage) needs reconfiguring after the 5.0 revert. Set: General → Show Page Title: OFF · Layout: Grid 3 Display Options → Show Sort / Show Total / Show Layout Switcher: OFF Map → Show Map: OFF Pagination → Disable Navigation: ON Content → Posts Per Page: 3 · Limit: 3 CLASSES REQUIRED IN THE EDITOR (Advanced → Additional CSS class(es)) ------------------------------------------------------------------- .proof-card — each of the four value cards [done] .hero-panorama-img — hero image wrapper [done] .hero-headline-shadow — hero headline [done] .hero-headline-top — hero headline [done] .marigold-utility — Row holding email + address [done] .utility-divider — divider paragraph in that Row [done] .marigold-footer-heading — "Quick Links" / "Legal & Support" [done] .marigold-contact-bar — outer group of bottom contact strip [done] .mg-btn-primary — "Get A Free Rent Estimate" [done] .mg-btn-secondary — "Browse Rentals" (header) [done] .rental-single — Group in the Single Rental template [done] .rental-featured — homepage featured rentals Group [done] (FAQ block needs no editor class — its Custom HTML root div carries .mg-faq directly, since it's pasted as raw markup, not built in blocks.) THEME CLASSES USED (supplied by Legacy Real Estate) --------------------------------------------------- .legacy-real-estate-header-cta · .header-btns .legacy-real-estate-main-navigation ESTATIK NOTES ------------- Post type is `properties`; URL slug for single listings is `rental`. The body class follows the post type, so `single-properties` is correct. The Rentals page lives at /rentals/ as a normal Page. The "My Listing" block has NO width/full-bleed setting anywhere in its 9 settings panels — confirmed by direct inspection, 2026-08-03. CONTRAST REFERENCE (WCAG AA: 4.5:1 body, 3:1 large) --------------------------------------------------- Noir on Linen ............ 13.7 Noir on #FBF7EF ......... 15.9 Linen on Noir ............ 13.7 Amber on Noir ............ 7.98 Gold on Noir .............. 4.94 Noir on Gold ............. 4.94 Noir on Sage .............. 4.80 Terracotta on #FBF7EF .... 4.68 White on Sage ............. 3.54 Gold on #FBF7EF .......... 3.23 (large only) Linen on Gold ............. 2.78 Amber on Linen ........... 1.72 (never) RULES OF THUMB -------------- - Gold is a DARK-background color. Never gold text on Linen or canvas. - Amber is Noir-only. Hover states and dark-surface accents. - Sage is a surround, not a text background. - Gold appears in two roles: the logo badge, and buttons. ========================================================================== */ /* ========================================================================== 1. BRAND TOKENS ========================================================================== */ :root { --mg-gold: #C07B1A; --mg-gold-deep: #A96914; --mg-amber: #DFA84E; --mg-noir: #1C1C1E; --mg-noir-soft: #3A3A3C; --mg-linen: #F0E6D0; --mg-canvas: #FBF7EF; --mg-sage: #6A9177; --mg-terra: #B05535; --mg-terra-deep: #8F4A22; --mg-serif: 'Cormorant Garamond', serif; --mg-sans: 'Jost', sans-serif; } /* ========================================================================== 2. PAGE CANVAS Forced with !important across html, body, and the block-theme root wrapper. This is a defensive fix for the unresolved gold-edge bug on the homepage — body alone was already confirmed correct via DevTools Computed panel, but the actual source of the gold was never found, so this closes off the most likely remaining candidate (a root-level background showing through narrower content) without guessing further. ========================================================================== */ html, body { background-color: var(--mg-canvas) !important; overflow-x: hidden; } /* ========================================================================== 3. NAVIGATION CONTRAST ========================================================================== */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: var(--mg-noir) !important; } @media (max-width: 768px) { .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label { color: var(--mg-noir) !important; } } .legacy-real-estate-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .legacy-real-estate-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label { color: var(--mg-noir) !important; } /* ========================================================================== 4. HEADER UTILITY BAR ========================================================================== */ .marigold-utility { display: flex; flex-direction: row; align-items: center; gap: 20px; } .marigold-utility p, .marigold-utility a { font-family: var(--mg-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.5; color: rgba(240, 230, 208, 0.72); white-space: nowrap; text-align: left; margin: 0; } .marigold-utility a { text-decoration: none; transition: color 0.2s ease; } .marigold-utility a:hover { color: var(--mg-amber); } .marigold-utility .utility-divider { color: rgba(192, 123, 26, 0.55); font-size: 12px; margin: 0; } @media (max-width: 781px) { .marigold-utility { flex-direction: column; align-items: center; gap: 6px; } .marigold-utility p, .marigold-utility a { text-align: center; white-space: nowrap; font-size: 11px; } .marigold-utility .utility-divider { display: none; } } /* ========================================================================== 5. HERO ========================================================================== */ .hero-panorama-img { position: relative; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; padding: 0 !important; background: none !important; } .hero-panorama-img img { width: 100% !important; max-width: none !important; height: clamp(420px, 62vh, 720px) !important; object-fit: cover !important; object-position: center 60%; display: block; } .hero-panorama-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(28, 28, 30, 0.55) 0%, rgba(28, 28, 30, 0.15) 45%, transparent 70% ); pointer-events: none; z-index: 1; } .hero-headline-shadow { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-headline-top { z-index: 2; } @media (max-width: 768px) { .hero-panorama-img img { height: 340px !important; object-position: center center; } .hero-headline-top { font-size: 28px !important; line-height: 1.25 !important; } } /* ========================================================================== 6. BUTTONS — BASE SCOPED to .wp-block-button. The unscoped version of this rule was matching elements inside Estatik's listing markup and painting them gold — that was the source of a DIFFERENT gold bug (on listing cards), now fixed. Every real Button block renders as:
…
so scoping to the wrapper loses nothing and contains the blast radius. ========================================================================== */ .wp-block-button > .wp-block-button__link, .wp-block-button > .wp-element-button, .wp-block-buttons .wp-block-button__link { background-color: var(--mg-gold) !important; color: var(--mg-noir) !important; font-family: var(--mg-sans); font-weight: 500; letter-spacing: 0.02em; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .wp-block-button > .wp-block-button__link:hover, .wp-block-button > .wp-element-button:hover, .wp-block-buttons .wp-block-button__link:hover { background-color: var(--mg-amber) !important; color: var(--mg-noir) !important; } /* Beat WordPress preset color classes */ .wp-block-button > a.wp-element-button.has-text-color, .wp-block-button > a.wp-element-button.has-background-color, .wp-block-button > a.wp-block-button__link.has-text-color.has-background-color { color: var(--mg-noir) !important; } /* Subtle clickability affordance — 1px lift plus a soft shadow */ .wp-block-button > .wp-element-button:hover, .wp-block-button > .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(28, 28, 30, 0.22); } .wp-block-button > .wp-element-button:active, .wp-block-button > .wp-block-button__link:active { transform: translateY(0); box-shadow: none; } /* ========================================================================== 7. BUTTONS — DUAL CTA SYSTEM ========================================================================== */ /* Clear the theme demo's gradient fill behind the header CTA pair */ .header-btns, .header-btns.has-background, .legacy-real-estate-header-cta, .legacy-real-estate-header-cta.has-background { background: none !important; background-image: none !important; background-color: transparent !important; } /* Text centering. No editor control exists for this — the Buttons block alignment control positions buttons in their container, not text inside a button. inline-flex removes text-align inheritance from the equation. */ .legacy-real-estate-header-cta a.wp-element-button, a.wp-element-button.mg-btn-primary, a.wp-element-button.mg-btn-secondary, a.wp-element-button.mg-btn-secondary-light { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 11px 26px !important; line-height: 1.2 !important; text-indent: 0.5px; } /* Primary — filled gold */ a.wp-element-button.mg-btn-primary, .mg-btn-primary .wp-block-button__link { background-color: var(--mg-gold) !important; color: var(--mg-noir) !important; border: 1.5px solid var(--mg-gold) !important; } a.wp-element-button.mg-btn-primary:hover, .mg-btn-primary .wp-block-button__link:hover { background-color: var(--mg-amber) !important; border-color: var(--mg-amber) !important; color: var(--mg-noir) !important; } /* Secondary — outlined. DARK SURFACES ONLY. Amber fails on the light canvas: use .mg-btn-secondary-light there. */ a.wp-element-button.mg-btn-secondary, .mg-btn-secondary .wp-block-button__link { background-color: transparent !important; background-image: none !important; color: var(--mg-amber) !important; border: 1.5px solid rgba(192, 123, 26, 0.65) !important; } a.wp-element-button.mg-btn-secondary:hover, .mg-btn-secondary .wp-block-button__link:hover { background-color: rgba(192, 123, 26, 0.15) !important; border-color: var(--mg-amber) !important; color: var(--mg-amber) !important; box-shadow: 0 3px 12px rgba(192, 123, 26, 0.28); } /* Secondary for LIGHT surfaces — Terracotta, 4.68:1 PASS */ a.wp-element-button.mg-btn-secondary-light, .mg-btn-secondary-light .wp-block-button__link { background-color: transparent !important; background-image: none !important; color: var(--mg-terra-deep) !important; border: 1.5px solid var(--mg-gold) !important; } a.wp-element-button.mg-btn-secondary-light:hover, .mg-btn-secondary-light .wp-block-button__link:hover { background-color: var(--mg-gold) !important; color: var(--mg-noir) !important; } /* Header CTA pair layout. Requires "Allow to wrap to multiple lines" ON in the Buttons block. */ .legacy-real-estate-header-cta { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; justify-content: flex-end; align-items: center; } .header-btns { padding-right: 24px; } .legacy-real-estate-header-cta a.wp-element-button { white-space: nowrap; } @media (max-width: 781px) { .legacy-real-estate-header-cta { justify-content: center; gap: 8px !important; row-gap: 8px !important; } .header-btns { padding-right: 0; } .legacy-real-estate-header-cta a.wp-element-button { font-size: 13px !important; padding: 9px 18px !important; letter-spacing: 0 !important; } } @media (max-width: 480px) { .legacy-real-estate-header-cta a.wp-element-button { font-size: 12px !important; padding: 8px 15px !important; } } /* Contain the theme's built-in shine-sweep hover effect on header CTA buttons. The ::before pseudo-element sits at left:-100% at rest and sweeps across on hover — without overflow:hidden here, it spills outside the button into the surrounding header space. */ .legacy-real-estate-header-cta .wp-block-button__link { overflow: hidden !important; } /* ========================================================================== 8. PROOF CARDS ========================================================================== */ .proof-card { background-color: rgba(106, 145, 119, 0.12); border-radius: 4px; padding: 28px 26px; border: 1px solid rgba(106, 145, 119, 0.3); } .proof-card h3 { color: var(--mg-noir); } .proof-card p { color: var(--mg-noir-soft); } /* ========================================================================== 9. FOOTER ========================================================================== */ .marigold-footer-heading { background: none !important; background-image: none !important; background-color: transparent !important; color: var(--mg-gold) !important; font-family: var(--mg-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 0 10px 0 !important; border-bottom: 1px solid rgba(192, 123, 26, 0.35); margin-bottom: 20px !important; } /* Continuous Noir contact strip */ .marigold-contact-bar { background-color: var(--mg-noir) !important; background-image: none !important; border-top: 2px solid var(--mg-gold); padding-top: 24px !important; padding-bottom: 24px !important; } .marigold-contact-bar .wp-block-group, .marigold-contact-bar .wp-block-column > * { background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } .marigold-contact-bar .wp-block-column { background-color: transparent !important; display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 12px; text-align: left; } .marigold-contact-bar, .marigold-contact-bar p, .marigold-contact-bar a, .marigold-contact-bar span { color: var(--mg-linen) !important; font-family: var(--mg-sans); font-size: 13px; letter-spacing: 0.03em; margin: 0; } .marigold-contact-bar a { text-decoration: none; transition: color 0.2s ease; } .marigold-contact-bar a:hover { color: var(--mg-amber) !important; text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 782px) { .marigold-contact-bar .wp-block-column + .wp-block-column { border-left: 1px solid rgba(192, 123, 26, 0.35) !important; padding-left: 20px; } } @media (max-width: 781px) { .marigold-contact-bar .wp-block-column { justify-content: flex-start; padding-left: 12%; margin-bottom: 14px; } } /* ========================================================================== 10. LINKS ========================================================================== */ main a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not([class*="es-"]) { color: var(--mg-terra-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } main a:not(.wp-element-button):not(.wp-block-button__link):not([class*="es-"]):hover { color: var(--mg-gold-deep); } main a:has(img) { text-decoration: none; } /* ========================================================================== 11. ACCESSIBILITY BASELINE ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .wp-element-button:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 2px; border-radius: 2px; } header a:focus-visible, header button:focus-visible, .marigold-contact-bar a:focus-visible { outline-color: var(--mg-amber); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transform: none !important; } } /* ========================================================================== 12. ESTATIK — SINGLE LISTING Scoped to body.single-properties throughout. ========================================================================== */ body.single-properties .rental-single { max-width: 1180px; margin: 0 auto; padding: 32px 32px 72px; } @media (max-width: 781px) { body.single-properties .rental-single { padding: 20px 18px 48px; } } /* Breadcrumb */ body.single-properties .es-breadcrumbs { font-family: var(--mg-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-noir-soft); margin-bottom: 18px; } /* Gallery — the tiled layout reserves height for several images, so a single-image listing leaves a large empty band without this cap. */ body.single-properties .es-gallery { margin-bottom: 0 !important; } body.single-properties .es-gallery__image { height: clamp(320px, 46vh, 520px); border-radius: 4px; overflow: hidden; position: relative; } body.single-properties .es-gallery__image-background { height: 100%; background-position: center !important; background-size: cover !important; } @media (max-width: 781px) { body.single-properties .es-gallery__image { height: 260px; } } /* Header row: beds/baths, price, request button */ body.single-properties .es-single__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 0; margin: 0 0 8px; border-bottom: 1px solid rgba(192, 123, 26, 0.22); } body.single-properties .es-single__header-terms:empty { display: none; } body.single-properties .es-listing__meta { display: flex; gap: 26px; align-items: center; font-family: var(--mg-sans); font-size: 14px; color: var(--mg-noir); } body.single-properties .es-single__header-right { display: flex; align-items: center; gap: 28px; } body.single-properties .es-price-container { margin: 0 !important; } body.single-properties .es-price { font-family: var(--mg-serif) !important; font-size: 34px !important; font-weight: 400 !important; color: var(--mg-noir) !important; line-height: 1; } /* Address renders as both H1 and small text below it */ body.single-properties .es-single__header-left .es-property-field--address, body.single-properties .es-single__header-left > .es-address { display: none; } @media (max-width: 781px) { body.single-properties .es-single__header { flex-direction: column; align-items: flex-start; } body.single-properties .es-single__header-right { width: 100%; justify-content: space-between; } } /* Section titles */ body.single-properties .es-property-section { margin-top: 34px; } body.single-properties .es-property-section__title { font-family: var(--mg-serif) !important; font-size: 27px !important; font-weight: 400 !important; color: var(--mg-noir) !important; letter-spacing: 0.005em; padding-bottom: 10px; margin: 0 0 18px; border-bottom: 1px solid rgba(192, 123, 26, 0.3); } /* Field rows */ body.single-properties .es-property-fields { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 32px; } body.single-properties .es-property-field { font-family: var(--mg-sans); font-size: 14px; line-height: 1.6; color: var(--mg-noir-soft); padding: 5px 0; } body.single-properties .es-property-field__label { color: var(--mg-noir-soft); opacity: 0.78; } body.single-properties .es-property-field__value { color: var(--mg-noir); font-weight: 500; } /* Currency prefix. Estatik renders these as plain Number fields, but each field carries its own modifier class, so a prefix can be injected without recreating anything. No thousands separator — "$1500" not "$1,500". If Estatik ever exposes a Price field type, use that and delete this. */ body.single-properties .es-property-field--security_deposit .es-property-field__value::before, body.single-properties .es-property-field--application_fee .es-property-field__value::before, body.single-properties .es-property-field--pet_deposit .es-property-field__value::before, body.single-properties .es-property-field--pet_fee .es-property-field__value::before, body.single-properties .es-property-field--pet_rent .es-property-field__value::before { content: "$"; } /* Buttons */ body.single-properties .es-btn--primary, body.single-properties .es-btn--request-info, body.single-properties .es-request-form .es-btn--primary, body.single-properties button.es-btn--primary { background-color: var(--mg-gold) !important; background-image: none !important; color: var(--mg-noir) !important; font-family: var(--mg-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; border: 1.5px solid var(--mg-gold) !important; border-radius: 30px !important; padding: 11px 26px !important; text-transform: none !important; transition: background-color 0.2s ease, border-color 0.2s ease; } body.single-properties .es-btn--primary:hover, body.single-properties .es-btn--request-info:hover, body.single-properties button.es-btn--primary:hover { background-color: var(--mg-amber) !important; border-color: var(--mg-amber) !important; color: var(--mg-noir) !important; } /* Save / Share sit on the gallery image, so keep them light */ body.single-properties .es-control__item .es-btn--default { background-color: rgba(251, 247, 239, 0.92) !important; color: var(--mg-noir) !important; border: 1px solid rgba(28, 28, 30, 0.12) !important; border-radius: 30px !important; font-family: var(--mg-sans) !important; font-size: 13px !important; font-weight: 500 !important; } body.single-properties .es-control__item .es-btn--default:hover { background-color: var(--mg-gold) !important; color: var(--mg-noir) !important; border-color: var(--mg-gold) !important; } body.single-properties .es-secondary-color { color: var(--mg-terra-deep) !important; font-family: var(--mg-sans) !important; font-size: 14px !important; } /* Description */ body.single-properties .es-property_section--description .es-property-section__content { padding-left: 0; max-width: 760px; } body.single-properties .es-property_section--description p { font-size: 15px; line-height: 1.75; color: var(--mg-noir-soft); } body.single-properties .es-property_section--description img { max-width: 460px; height: auto; border-radius: 3px; margin-bottom: 14px; } /* Request form. The white panel comes from an inline style="background: #ffffff" on .es-request-form--section. */ body.single-properties .es-request-form--section, body.single-properties .es-component, body.single-properties .es-property_section--request_form .es-property-section__content { background: transparent !important; padding: 0 !important; } body.single-properties .es-request-form__fields { max-width: 620px; margin: 0 auto; background-color: rgba(106, 145, 119, 0.10); border: 1px solid rgba(106, 145, 119, 0.28); border-radius: 4px; padding: 30px 32px; } body.single-properties .es-field__label { font-family: var(--mg-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--mg-noir) !important; } body.single-properties .es-field__input { font-family: var(--mg-sans) !important; font-size: 14px !important; border: 1px solid rgba(28, 28, 30, 0.18) !important; border-radius: 3px !important; background-color: #FFFFFF !important; } body.single-properties .es-field__input:focus { border-color: var(--mg-gold) !important; outline: 2px solid rgba(192, 123, 26, 0.3); outline-offset: 1px; } body.single-properties .es-btn-wrapper--center { max-width: 620px; margin: 0 auto; } /* Rename the form heading. Estatik exposes no setting for this string; if a translation plugin is ever added, change it there and delete this. */ body.single-properties .es-property_section--request_form .es-property-section__title { visibility: hidden; position: relative; font-size: 27px !important; } body.single-properties .es-property_section--request_form .es-property-section__title::after { content: "Ask About This Rental"; visibility: visible; position: absolute; left: 0; top: 0; font-family: var(--mg-serif); font-size: 27px; font-weight: 400; color: var(--mg-noir); white-space: nowrap; } /* Mobile gallery markup is present at every width */ @media (min-width: 782px) { body.single-properties .es-mobile-gallery-wrap { display: none !important; } } body.single-properties .es-single, body.single-properties .es-single p, body.single-properties .es-single span, body.single-properties .es-single li, body.single-properties .es-single label { font-family: var(--mg-sans); } /* ========================================================================== 13. ESTATIK — LISTING CARDS WRITTEN AGAINST REAL MARKUP --------------------------- Every selector below was read off the rendered card, not inferred: .es-post-entity .es-listing .es-listing__image .es-property__control > ul.es-control--property-image > li.es-control__item--wishlist ← "Save" heart .es-listing__image__slider.js-es-slick ← slick carousel > div > a.es-listings__image__link > img .es-listing__content .es-listing__content__inner .es-listing__content__left h3.es-listing__title > a .es-badges > span.es-price .es-address.es-listing--hide-on-grid p.es-excerpt.es-listing--hide-on-grid .es-listing__meta .es-listing__meta-bedrooms (svg + 2 beds) .es-listing__meta-bathrooms (svg + 1 bath) .es-address.es-listing--hide-on-list .es-listing__content__right.es-listing--hide-on-grid (duplicate wishlist + duplicate .es-price) NOTE ON .es-badge VS .es-badges — these are two different elements. .es-badges (plural, handled in 13.7) is the price wrapper on the card. .es-badge (singular, 13.9) is the "Featured" ribbon Estatik renders on listings flagged as featured. Similar names, unrelated markup — don't conflate them when debugging. COLOR LOGIC ----------- The band is the surround (Sage tint). The card is the surface (Canvas). Gold does not appear anywhere on the card — on Canvas it only reaches 3.23:1. NOTE ON 13.1 / 13.3 FURNITURE-HIDING RULES BELOW — these overlap with real toggles in the "My Listing" block's own settings panel (Display Options, Map, Pagination). They're kept here as a safety net because the block's settings were reset to default during this session's troubleshooting (see 5.0 changelog) and have not yet been reconfirmed. Once the ⚠ TODO above is done and double-checked live, these hiding rules become redundant and can be deleted — they're not doing harm in the meantime, just doing double duty. ========================================================================== */ /* ── 13.1 Theme z-index override ────────────────────────────────────────── The theme ships `.es-listings { position: relative !important; z-index: 999 }` in a 767–1920px media query. Kept as cheap insurance against that theme rule; unrelated to the unresolved gold-edge issue. */ @media (min-width: 767px) and (max-width: 1920px) { .es-listings, .es-properties, .es-properties__list, .es-listings__wrap-inner, .es-post-entity { position: static !important; z-index: auto !important; } } /* ── 13.2 Wrapper reset ───────────────────────────────────────────────── */ .es-properties { margin: 0 !important; font-size: inherit !important; display: block !important; background: transparent !important; } .es-properties__list, .es-properties--hfm--full-width .es-properties__list, .es-listings__wrap-inner { width: 100% !important; max-width: 100% !important; margin: 0 !important; background: transparent !important; } /* WordPress core's Shortcode block render callback is wpautop( do_shortcode( $content ) ) — always, no way to disable it. It injects
and empty

into Estatik's markup. */ .es-properties br, .es-properties p:empty { display: none !important; margin: 0 !important; height: 0 !important; } /* ── 13.3 Featured section band (homepage) ──────────────────────────────── Contained width — do NOT reintroduce 100vw. An earlier version did, and it caused horizontal overflow that wrapped the header nav onto two rows. */ .rental-featured { width: auto !important; max-width: none !important; margin: 48px 0 !important; padding: 52px 32px 56px !important; background-color: rgba(106, 145, 119, 0.10) !important; border-top: 1px solid rgba(106, 145, 119, 0.22); border-bottom: 1px solid rgba(106, 145, 119, 0.22); position: relative; z-index: 1; isolation: isolate; } .rental-featured > * { max-width: 1180px; margin-left: auto !important; margin-right: auto !important; } /* Heading matches the scale of "How Marigold Manages Your Property" instead of sitting a size below it. Left-aligned to agree with every other section heading on the page. */ .rental-featured > .wp-block-heading, .rental-featured > h2 { font-family: var(--mg-serif) !important; font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 400 !important; line-height: 1.15 !important; color: var(--mg-noir) !important; text-align: left !important; margin: 0 auto 36px !important; } .rental-featured .wp-block-buttons { justify-content: flex-start; margin-top: 36px; } /* Sort dropdown, "1 result", and the Grid/List/Half Map switcher are listings-page furniture. They do not belong on a curated homepage strip. See note at top of Section 13 — this overlaps with block-level toggles that should be the primary control once reconfirmed. */ .rental-featured .es-listings-filter, .rental-featured .es-total, .rental-featured .es-form, .rental-featured .es-control--layouts, .rental-featured .es-pagination, .rental-featured .es-powered { display: none !important; } @media (max-width: 781px) { .rental-featured { padding: 34px 18px 40px !important; margin: 32px 0 !important; } .rental-featured > .wp-block-heading, .rental-featured > h2 { margin-bottom: 26px !important; } } /* ── 13.4 Grid ──────────────────────────────────────────────────────────── auto-fill with a hard 340px cap, aligned left. A single listing sits at the left edge under the heading rather than stranded mid-row. */ .es-listings { display: grid !important; gap: 28px; margin: 0 !important; justify-content: start; justify-items: stretch; grid-template-columns: repeat(auto-fill, minmax(300px, 340px)) !important; } @media (max-width: 640px) { .es-listings { grid-template-columns: 1fr !important; gap: 22px; } } .es-post-entity { background: transparent !important; width: 100%; display: flex; } /* ── 13.5 Card shell ────────────────────────────────────────────────────── The theme ships `.es-listing { background: unset !important }`, which beats a single-class rule. Three classes plus !important wins. Canvas surface on the Sage band — this is what gives the card an edge. */ .es-properties .es-listings .es-listing, .es-properties .es-post-entity .es-listing, .es-listings .es-post-entity .es-listing { background-color: var(--mg-canvas) !important; background: var(--mg-canvas) !important; border: 1px solid rgba(28, 28, 30, 0.11) !important; border-radius: 4px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; box-shadow: 0 1px 3px rgba(28, 28, 30, 0.05) !important; font-size: 14px !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .es-properties .es-listing:hover { transform: translateY(-3px); border-color: rgba(28, 28, 30, 0.2) !important; box-shadow: 0 6px 22px rgba(28, 28, 30, 0.12) !important; } /* Slick is initialised with adaptiveHeight:true AND lazyLoad:ondemand. Do not touch .slick-list / .slick-track / .slick-slide heights — the lazy loader measures those boxes to decide what to load, and zeroing them means no image ever loads. Constrain the img only. */ .es-properties .es-listing .es-listing__image img { width: 100% !important; aspect-ratio: 3 / 2; object-fit: cover !important; display: block !important; margin: 0 !important; } /* ── 13.7 Card content ──────────────────────────────────────────────────── Reading order is rebuilt with flex `order`. The DOM gives us title → price → meta; a renter scans for price first, so price leads. */ .es-listing__content { padding: 18px 20px 20px; flex: 1; display: flex; } .es-properties .es-listing .es-listing__content__inner { display: block !important; width: 100%; } .es-properties .es-listing .es-listing__content__left { display: flex !important; flex-direction: column; width: 100%; } /* Price — the largest element on the card */ .es-listings .es-badges, .es-listings .es-badges.es-listing--hide-on-list { display: block !important; background: transparent !important; order: 1; margin: 0 0 4px !important; padding: 0 !important; } .es-listing .es-price { font-family: var(--mg-serif) !important; font-size: 28px !important; font-weight: 500 !important; line-height: 1.1 !important; color: var(--mg-noir) !important; background: transparent !important; letter-spacing: 0.005em; white-space: nowrap; } /* Address, set as the title */ .es-listing__title { order: 2; font-family: var(--mg-serif) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 0 16px !important; } .es-listing__title a { color: rgba(28, 28, 30, 0.78) !important; text-decoration: none !important; transition: color 0.15s ease; } .es-listing__title a:hover { color: var(--mg-noir) !important; text-decoration: underline !important; text-underline-offset: 3px; } .es-listing__title a:focus-visible { outline: 2px solid var(--mg-gold-deep); outline-offset: 3px; border-radius: 2px; } /* Both .es-address copies and the excerpt repeat the title. Cut them. */ .es-listing .es-address, .es-listing .es-excerpt { display: none !important; } /* Meta row — one quiet line. Estatik's icons are hardcoded #B0BEC5, a cool grey that reads as washed out against a warm palette, and they sit at a different weight from the numbers. Hiding them leaves one clean line. */ .es-listing__meta { order: 3; display: flex !important; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 !important; padding-top: 14px; border-top: 1px solid rgba(28, 28, 30, 0.09); font-family: var(--mg-sans) !important; font-size: 12.5px !important; letter-spacing: 0.06em; color: rgba(28, 28, 30, 0.62) !important; } .es-listing__meta svg { display: none !important; } .es-listing__meta > div { display: inline-flex; align-items: baseline; gap: 4px; } .es-listing__meta b, .es-listing__meta span { font-family: var(--mg-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; color: rgba(28, 28, 30, 0.62) !important; } /* Right column holds a duplicate price and a duplicate wishlist, both marked hide-on-grid. Keep it out of the grid layout entirely. */ .es-listings .es-listing__content__right { display: none !important; } .es-listing__footer:empty { display: none; } /* ── 13.8 Empty state, map, attribution ───────────────────────────────── */ .es-no-found-posts { text-align: left; padding: 40px 0; } .es-no-found-posts__title { font-family: var(--mg-serif) !important; font-size: 24px !important; font-weight: 400 !important; color: var(--mg-noir) !important; } /* The map container renders even with map_show=0 and shows a Google Maps error without an API key. Add one in Estatik → Settings → Map to use it. Also overlaps with the block's own Map settings panel — see note at top of Section 13. */ .es-properties__map, .es-map-error { display: none !important; } .es-powered { font-family: var(--mg-sans); font-size: 11px; color: rgba(28, 28, 30, 0.32); text-align: right; margin-top: 16px; } .es-powered a { color: rgba(28, 28, 30, 0.42); text-decoration: none; } /* ── 13.9 Featured badge ────────────────────────────────────────────────── Added 2026-08-07 directly in the Customizer, folded in here 2026-08-09. The "Featured" ribbon Estatik renders on featured listings is a gold background with an inside it; that link inherited the site's link color (gold-on-terracotta family), so the label text was invisible at rest and only appeared on hover/focus. Forcing Estate Noir on the link in every state fixes the contrast and matches the "Noir on Gold" pairing used everywhere else on the site (4.94:1, see CONTRAST REFERENCE above). */ .es-badge a, .es-badge a:visited, .es-badge a:hover, .es-badge a:focus { color: var(--mg-noir) !important; font-weight: 600; text-decoration: none; } /* ========================================================================== 14. FAQ ACCORDION Targets the Custom HTML block's raw markup directly (

...
...
). This section was missing from 5.0 — that's why the FAQ block lost its styling on the live site. Do not drop it on the next full replacement. ========================================================================== */ .mg-faq { max-width: 760px; margin: 0 auto; padding: 64px 24px; font-family: var(--mg-sans); } .mg-faq__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mg-gold); margin-bottom: 12px; text-align: center; } .mg-faq__heading { font-family: var(--mg-serif); font-weight: 400; font-size: clamp(32px, 4vw, 44px); color: var(--mg-noir); text-align: center; margin: 0 0 40px; } .mg-faq__list { border-top: 1px solid rgba(192,123,26,.25); } .mg-faq__item { border-bottom: 1px solid rgba(192,123,26,.25); } .mg-faq__item summary { list-style: none; } .mg-faq__item summary::-webkit-details-marker { display: none; } .mg-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 22px 4px; font-family: var(--mg-sans); font-size: 17px; font-weight: 500; color: var(--mg-noir); } .mg-faq__question:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; } .mg-faq__icon { flex-shrink: 0; position: relative; width: 18px; height: 18px; } .mg-faq__icon::before, .mg-faq__icon::after { content: ''; position: absolute; background: var(--mg-gold); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease; } .mg-faq__icon::before { width: 14px; height: 2px; } .mg-faq__icon::after { width: 2px; height: 14px; } .mg-faq__item[open] .mg-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .mg-faq__answer p { margin: 0 0 22px; padding: 0 4px 22px; font-size: 15px; line-height: 1.7; color: var(--mg-noir-soft); } .mg-faq__address { display: inline; font-style: normal; margin: 0; } .mg-faq__link { color: var(--mg-gold); text-decoration: underline; } @media (max-width: 600px) { .mg-faq { padding: 48px 16px; } } /* ========================================================================== 15. ABOUT PAGE — STORY NOTE (placeholder card) ========================================================================== */ .mg-story-note { border: 1px solid rgba(192,123,26,.25); border-left: 3px solid var(--mg-gold); border-radius: 4px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); padding: 28px 32px; margin: 32px 0; } .mg-story-note__label { font-family: var(--mg-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mg-gold); margin-bottom: 10px !important; } .mg-story-note p:last-child { font-family: var(--mg-serif); font-size: 19px; font-style: italic; color: var(--mg-noir); line-height: 1.6; margin: 0; } .mg-story-note a { color: var(--mg-gold); text-decoration: underline; font-style: normal; } /* ========================================================================== 16. TENANT PORTAL CARD Standalone stylized card that links out to the external Rent Manager TWA login page. Not embedded (see conversation notes on TWA blocking iframes) — this is a branded launch point instead, for the Tenant Portal page. Targets the Custom HTML block's raw markup directly. ========================================================================== */ .mg-portal-card { max-width: 560px; margin: 0 auto; padding: 48px 44px; background-color: var(--mg-noir); border-radius: 6px; border-top: 3px solid var(--mg-gold); text-align: center; font-family: var(--mg-sans); } .mg-portal-card__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mg-amber); margin-bottom: 14px; } .mg-portal-card__heading { font-family: var(--mg-serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 38px); color: var(--mg-linen); line-height: 1.15; margin: 0 0 16px; } .mg-portal-card__body { font-size: 15px; line-height: 1.7; color: rgba(240, 230, 208, 0.78); max-width: 420px; margin: 0 auto 28px; } .mg-portal-card__list { list-style: none; padding: 0; margin: 0 0 32px; display: inline-flex; flex-direction: column; gap: 10px; text-align: left; } .mg-portal-card__list li { position: relative; padding-left: 26px; font-size: 14px; color: rgba(240, 230, 208, 0.88); line-height: 1.5; } .mg-portal-card__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--mg-sage); border-bottom: 2px solid var(--mg-sage); transform: rotate(-45deg); } .mg-portal-card__button { display: inline-flex; align-items: center; justify-content: center; background-color: var(--mg-gold); color: var(--mg-noir) !important; font-family: var(--mg-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none !important; padding: 14px 32px; border-radius: 4px; transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .mg-portal-card__button:hover { background-color: var(--mg-amber); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192, 123, 26, 0.3); } .mg-portal-card__button:focus-visible { outline: 2px solid var(--mg-amber); outline-offset: 3px; } .mg-portal-card__note { margin: 22px 0 0; font-size: 12.5px; color: rgba(240, 230, 208, 0.55); } .mg-portal-card__link { color: var(--mg-amber); text-decoration: underline; } .mg-portal-card__link:hover { color: var(--mg-gold); } @media (max-width: 600px) { .mg-portal-card { padding: 36px 26px; } .mg-portal-card__list { display: flex; } }