/* Custom CSS generated on Sun Jul 19 2026 04:16:06 GMT+0000 (Coordinated Universal Time) */ .sidx-container .sidx-main-app-body { background-color: rgb(255, 255, 255); color: rgb(85, 88, 99); font-family: 'Helvetica Neue', 'Roboto', 'Helvetica', 'Arial', sans-serif; } .sidx-container a { color: rgb(34, 143, 204); } .sidx-container .sidx-listing-details .sidx-columns .sidx-heading { color: rgb(85, 88, 99); font-family: 'Helvetica Neue', 'Roboto', 'Helvetica', 'Arial', sans-serif; } .sidx-container .sidx-searchform .sidx-basic .sidx-field { background-color: rgb(85, 88, 99); color: rgb(233, 239, 242); } .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button { background-color: rgb(34, 143, 204); color: rgb(249, 250, 251); } .sidx-container .sidx-search-results .sidx-search-result-grid-item:not(.sidx-search-result-grid-list-item) .sidx-actions { background-color: rgb(34, 143, 204); border-color: rgb(34, 143, 204) !important; color: rgb(249, 250, 251); } /* ================================================================== martawalsh.com — Showcase IDX custom overrides Paste into: Showcase dashboard → Design → Custom CSS Served as: search.showcaseidx.com/app/css/{website_uuid}/custom.css ------------------------------------------------------------------ WHY THIS WORKS: this sheet loads AFTER Showcase's app CSS, so equal specificity wins. No !important needed except where noted. THE RISK: sidx-* are Showcase's internal class names, not a public API. A plugin release can rename them and these rules will silently stop applying — you'll get their teal back with no error and no console warning. That is why this sheet is deliberately SHORT. If it breaks, you want to re-diagnose in ten minutes, not untangle 400 lines. Resist growing it. Anything that needs more than a few rules probably belongs on a surface you own instead. FONTS: Outfit + Cormorant Garamond are enqueued by the mw-communities theme, and every Showcase surface renders inside a WordPress page in that theme, so both are available here. PALETTE NOTE: uses the --hub-* values (#002349 / #b0893c) because the listings grid always sits directly beneath hub/community headings using those. site.css uses #0B1F35 / #C8902A. That fork is unresolved and is a brand decision — if it's settled the other way, change the two values below and the theme's --hub-* tokens together. ================================================================== */ /* ---- 1. Accent colour ------------------------------------------ The single loudest off-brand element. Showcase's default blue appears on every CTA across every surface. */ .sidx-container .sidx-primary, .sidx-container button.sidx-primary { background-color: #002349; border-color: #002349; font-family: "Outfit", system-ui, sans-serif; letter-spacing: 0.04em; border-radius: 2px; transition: background-color 0.2s ease; } .sidx-container .sidx-primary:hover, .sidx-container button.sidx-primary:hover { background-color: #b0893c; border-color: #b0893c; } /* Secondary / outline CTA (e.g. "Call Now") */ .sidx-container .sidx-primary-alt { color: #002349; border-color: #002349; } /* Their action icons ship with a literal `.blue` class — Save, Ask, Tour, Share, Hide. Recolour to gold so the icon row reads as an accent rather than a UI toolbar. */ .sidx-container i.blue { color: #b0893c; } /* ---- 2. Price typography ---------------------------------------- Biggest visual win after colour. Puts the number that people actually look at into the site's display face. */ .sidx-container .sidx-price { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: 0.01em; color: #002349; } /* ---- 3. Card address block -------------------------------------- The address is the card's headline; treat it like one. */ .sidx-container .sidx-listing-heading { font-family: "Outfit", system-ui, sans-serif; font-size: 15px; /* web font rule: body >= 14px */ line-height: 1.45; color: #1a1a1a; } .sidx-container .sidx-listing-heading small { font-size: 13px; /* web font rule: secondary >= 13px */ color: #6f6f6f; } /* ---- 4. Beds / baths / sqft -------------------------------------- Small caps-ish label treatment to match the site's eyebrow rhythm. */ .sidx-container .sidx-info-value { font-family: "Outfit", system-ui, sans-serif; font-weight: 500; color: #1a1a1a; } .sidx-container .sidx-info-title { font-family: "Outfit", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.08em; color: #6f6f6f; } /* ---- 5. Status + ribbons ----------------------------------------- Their green "FOR SALE" and red "Price Change" are portal-loud on a luxury page. Mute to the brand palette. If they still shout after this, consider hiding .sidx-ribbons entirely — the "New Listing" flag is genuinely useful information though, so try muting first. */ .sidx-container .sidx-sale-type, .sidx-container .sidx-mls-info { font-family: "Outfit", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.06em; color: #6f6f6f; } .sidx-container .sidx-sale-type.sidx-for-sale { color: #b0893c; } .sidx-container .sidx-ribbon { font-family: "Outfit", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0; } .sidx-container .sidx-ribbon.sidx-new-listing { background-color: #002349; } .sidx-container .sidx-ribbon.sidx-price-drop { background-color: #b0893c; } /* ---- 6. Result cards --------------------------------------------- Match the hub's .hub-card treatment: hairline border, soft radius, lift on hover. Makes the IDX grid feel like the same site as the community directory above it. */ .sidx-container .sidx-search-result-grid-item .sidx-content { border: 1px solid #e4e0d7; border-radius: 4px; overflow: hidden; background: #fff; transition: transform 0.22s ease, box-shadow 0.22s ease; } .sidx-container .sidx-search-result-grid-item .sidx-content:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,20,40,0.12); } /* ---- 7. Detail-page section headings ------------------------------ "Listing Snapshot", "General Features", "Schools" etc. */ .sidx-container .sidx-heading { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.5rem; color: #002349; } /* ---- 8. App nav links --------------------------------------------- Search / Dashboard / Listings / Searches / Sign in. */ .sidx-container .sidx-header-link a, .sidx-container .sidx-header-link .sidx-link { font-family: "Outfit", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #002349; } .sidx-container .sidx-header-link a:hover { color: #b0893c; } /* ---- 9. Vendor credit --------------------------------------------- "Powered by Showcase IDX, a Constellation1 Company". *** CHECK YOUR LICENCE BEFORE ENABLING THIS. *** Vendor attribution is sometimes contractual even on paid plans. The ARMLS compliance block (.sidx-listing-disclaimer) is NOT touched here and must never be — that one is an MLS requirement and hiding it puts Marta's feed at risk, which is a far bigger deal than a credit line. Uncomment only if the licence permits: */ /* .sidx-container .sidx-powered-by { display: none; } */ /* ---- 10. Mortgage calculator -------------------------------------- Showcase-branded, and it sits on every listing page. Bring the form in line; the disclaimer stays. */ .sidx-container .mortgage-calculator h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: #002349; } .sidx-container .monthly-payment__amount { font-family: "Cormorant Garamond", Georgia, serif; color: #002349; } .sidx-container .mortgage-calculator__disclaimer { font-size: 13px; color: #6f6f6f; } /* ================================================================== NOT DONE HERE, ON PURPOSE ------------------------------------------------------------------ - The "Shared Search" / listing-detail H1: that is

from the mw-communities page template, not Showcase markup. Fix it with a the_title filter in functions.php — real text, not a CSS hack. - MLS compliance blocks: never touch. - Map styling: Mapbox is themed via their dashboard, not CSS. ================================================================== */