. It is pulled off-screen * by default and slides into view only when focused (keyboard Tab), so it is * invisible to mouse users but available to keyboard/screen-reader users. * position:fixed is safe here — the link is a direct child of , not inside * the transformed sticky header, so it isn't trapped by a containing block. * Brand tokens: Navy #0A1F3B bg, Soft White #FAFAF7 text, Champagne #C9A875 focus * ring, Inter (UI font). * ------------------------------------------------------------------------- */ .rr-skip-link { position: fixed; top: -80px; /* Anchored top-RIGHT (2026-06-24): at top-left it covered the hard-left * "Brokered by My Realty & Development Inc." attribution in the top strip on * focus. The right half of the strip is empty, so the brokerage line stays * visible. */ right: 8px; z-index: 100000; padding: 10px 18px; background: #0A1F3B; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.15s ease-in-out; } /* * Text colour needs a pseudo-class selector (0-2-0) to beat Houzez's * `.elementor-kit-10 a { color: var(--e-global-color-text) }` (0-1-1), which * would otherwise force the charcoal text token onto the navy chip — re-creating * the exact charcoal-on-navy contrast fail flagged in the a11y audit. No * !important needed; specificity alone wins. */ .rr-skip-link:link, .rr-skip-link:visited, .rr-skip-link:hover, .rr-skip-link:focus, .rr-skip-link:active { color: #FAFAF7; } .rr-skip-link:focus { top: 0; outline: 2px solid #C9A875; outline-offset: 2px; } /* * Note (2026-06-22, re-confirmed 2026-06-24): the Houzez account/login UI was * sunset at the source by deleting the account icon from the Elementor header (so * no CSS-hide is needed here). The Houzez "Compare" feature is a dormant off-screen * slide-in drawer with no user entry point on this IDX-driven site — its residual * markup is left for the post-MVP code-cleanup pass rather than masked with CSS. * (2026-06-24 responsive QA initially suspected it of causing horizontal scroll, * but verified it does NOT: the site's `body { overflow-x: hidden }` clips the * off-screen drawer and the page is not horizontally scrollable — hiding the panel * changed scrollWidth by 0. So no CSS mask is warranted; left for code cleanup.) * See working/audits/2026-06-22-code-inventory.md. */ /* --------------------------------------------------------------------------- * LEGAL PAGES (body.rr-legal-page — 7 pages, ONE shared template) — §3.5 fluid * type + spacing rollout (2026-06-26). SUPERSEDES the 2026-06-24 rem section- * rhythm tweak (which only set

margins); this brings the whole legal layout * onto the design system in one place. * * Pages: Privacy · Terms of Use · Fair Housing · Accessibility · DMCA · Cookie * Preferences · Website Disclaimer. They share one layout: gold "LEGAL" eyebrow + * Cormorant CAPS title + a ~960px readable column holding a single Text-Editor of * sentence-case numbered

sections. The body-class + STRUCTURAL selectors drive * ALL 7 at once (no per-page data-ids): a div-heading = the eyebrow, the h1 = the * title, the text-editor = the body. (Fair Housing is the short-prose + EHO-logo * variant — fewer/zero

; the same rules still apply cleanly.) * * ⚠ COMPLIANCE: type / spacing / column ONLY — never the wording, the Equal Housing * Opportunity logo, or the Cookie "Manage consent" control. Legal copy is broker-locked. * ⚠ SCOPE: everything is under [data-elementor-type="wp-page"] so it touches ONLY the * page content, never the shared header/footer (which also carry text-editors that * are inside body.rr-legal-page). * DECISIONS (Hale 2026-06-26): body → 16-17 token; reading column KEPT at 960 (applied * evenly across all 7); section

→ Subheading (H3) scale (sentence-case Cormorant * kept, NOT CAPS); title → H2 token. Structural — re-verify if the template is rebuilt. * ------------------------------------------------------------------------- / / eyebrow "LEGAL" (renders as a div-heading) → eyebrow token; gold kept / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-heading div.elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; } / page title (the single h1) → H2 token (~36); CAPS + Cormorant kept / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-heading h1.elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; } / long-form body + lists → body token (16-17), comfortable line-height (was a flat 15) / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor, body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor p, body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor li { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } / numbered section headings (

, sentence-case Cormorant) → Subheading scale + * tokenised rhythm (major gap above each section, tight below) — was 32px / 2.75rem / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor h2 { font-size: var(--rr-text-h3) !important; line-height: 1.25 !important; margin-top: var(--rr-space-major) !important; margin-bottom: var(--rr-space-tight) !important; } body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor h2:first-child { margin-top: 0 !important; } / keep lists tucked under their intro paragraph / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-text-editor ul { margin-top: 0.4rem; } / side gutter → the site --rr-gutter token (was Elementor's default 16px; standardised * 2026-06-28). Structural: the single top-level con on each legal page (data-ids differ * per page). Desktop is moot (the reading column is centred well inside this), so this * only visibly affects the mobile/tablet edge spacing — now consistent with every other page. / body.rr-legal-page [data-elementor-type="wp-page"] > .e-con { padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } / --------------------------------------------------------------------------- * Header (mobile + tablet) — logo flush-left, menu toggle flush-right (2026-06-24) * * MVP header pass put the logo LEFT and the hamburger RIGHT, but the theme's CSS * forces the logo column to justify-content:center (logo drifts inward) and the * toggle column to flex-start (toggle doesn't reach the edge) — Elementor's * container settings don't stick. Force them here so the logo sits 16px from the * left ≈ the toggle 16px from the right (balanced). ID-targeted like the * smart-header CSS below — re-verify if the header is rebuilt. Desktop is * untouched (it has its own left/right nav columns). Logo column ids: mobile * ba47ffb / tablet 4142b3bc; menu column ids: mobile 7b9480e / tablet 676721d3. * ------------------------------------------------------------------------- / .rr-site-header--mobile .elementor-element-ba47ffb, .rr-site-header--tablet .elementor-element-4142b3bc { justify-content: flex-start; } .rr-site-header--mobile .elementor-element-7b9480e, .rr-site-header--tablet .elementor-element-676721d3 { justify-content: flex-end; } / --------------------------------------------------------------------------- * Buttons — squared (2026-06-25 design audit; de-template move #1) * * Our luxury benchmarks both ship sharp, squared CTAs: Drumelia + Elliman use * border-radius: 0 across the board (see design-extracts/). 6px-rounded buttons * read "friendly web app"; squared reads "luxury print" — the single highest- * leverage global lift toward the references. * * The Elementor global button token (kit 10) is the source of truth and is ALSO * set to 0px (button_border_radius + hover). This rule ENFORCES that on render * because Local can't headlessly regenerate the kit's cached post-10.css (no * Elementor editor save — three API regen paths failed; NOT a LiteSpeed/cache * issue, that plugin isn't used). On the staging/prod deploy the kit CSS * regenerates to 0px (deploy-runbook "regenerate Elementor CSS" step) and this * becomes belt-and-suspenders. Values agree, so no conflict. * !important is intentional: it must beat the stale `.elementor-kit-10 * .elementor-button{border-radius:6px}` (0-2-0) until that file rebuilds. * ------------------------------------------------------------------------- / .elementor-button { border-radius: 0 !important; } / =========================================================================== * FLUID TYPE + SPACING SYSTEM (DESIGN_SYSTEM §3.5, Elliman-airy) — rollout * * The `--rr-` custom properties below are the ENGINE (Elementor can't enter clamp() natively, so the vars are the source of truth). They apply site-wide; * each section is brought onto the system via per-section data-id overrides that * map its widgets/spacers to the tokens. Rolling out page-by-page after the * "Meet Riccardo" reference was approved by Hale (2026-06-25). * * ⚠ The per-section blocks are DATA-ID-COUPLED — re-verify (and re-map the ids) * if a section is rebuilt in Elementor. Each block lists its variants' data-ids. * Home sections done so far: Hero (6y075zwf8), Meet Riccardo (256a465e / 9093c44), * Contact (391c8d2c). * =========================================================================== / :root { / Type scale — fluid clamp() roles (DESIGN_SYSTEM §3.5). Elementor can't enter * clamp() natively, so these vars are the source of truth, applied per-section. / --rr-text-display: clamp(36px, 2.2rem + 1.1vw, 50px); / hero H1 (CAPS) / --rr-text-h2: clamp(27px, 1.4rem + 1.1vw, 36px); / section heading (CAPS) / --rr-text-h3: clamp(22px, 1.2rem + 0.6vw, 26px); / subheading / --rr-text-lead: clamp(17px, 1rem + 0.4vw, 19px); / lead / hero subhead / --rr-text-body: clamp(16px, 0.9rem + 0.4vw, 17px); / body / --rr-text-eyebrow: clamp(13px, 0.8rem + 0.1vw, 14px); / eyebrow / label / --rr-text-button: clamp(14px, 0.85rem + 0.2vw, 15px); / button / / Spacing scale — one vertical-rhythm + gutter scale, everywhere. / --rr-space-section: clamp(56px, 8vw, 128px); --rr-space-block: clamp(36px, 5vw, 72px); --rr-space-group: clamp(20px, 2.6vw, 36px); --rr-space-tight: clamp(12px, 1.2vw, 18px); --rr-gutter: clamp(20px, 5vw, 72px); / The STANDARD heading-group major gap (eyebrow→heading, heading→body) used across * every section. Most sections render it emergently as [20px flex gap] + tight spacer * + [20px flex gap] = 40px + tight → ~57 desktop / 52 tablet+mobile. This token is the * SAME value, for sections that set the gap directly (no spacer widget) — so the major * rhythm is one reusable, consistent number sitewide. / --rr-space-major: calc(40px + var(--rr-space-tight)); / Hero white-text halo — ONE shadow for ALL hero text (eyebrow/H1/subhead/body) * on the photo heroes (Home/Buy/Invest) so legibility + look are consistent * (Hale 2026-06-27; was graduated per element — unified to the strongest, the * Invest/Buy eyebrow value). / --rr-hero-text-shadow: 0 0 3px rgba(10, 20, 30, 0.95), 0 1px 8px rgba(10, 20, 30, 0.8); } / --- Meet Riccardo — the DESKTOP 2-col (256a465e) is MIGRATED to the global .rr-band * class pattern (GLOBAL SECTION PATTERN #3, end of file), 2026-07-02. navy · text-left/ * img-right (base side) · SECTION=ROW (co-located). Tagged: 256a465e=rr-band rr-band--navy * rr-band-row · 88c6fcd=rr-band-text · 4b27f5b7=rr-band-media · 6ad92487=rr-band-eyebrow * · 50d3bd20=rr-band-title · 3cbd2b82=rr-band-body · 7cca147=rr-band-img · 783cc4d7= * rr-band-cta ("Connect with us"). The "Read More" secondary bio link (594461a → the * About page) is KEPT, not tagged (Hale Q, 2026-07-02). The square 780² photo now * cover-fills the text column (was a fixed clamp height). * * The bespoke single-column MOBILE/TABLET variant (9093c44 — eyebrow→title→image→body, * shown ≤1024) is NOT a 2-col band, so it STAYS per-ID below (unchanged). --------- / / mobile/tablet variant 9093c44: section breathing + gutter / [data-id="9093c44"] { padding-top: var(--rr-space-section) !important; padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } / mobile H2 + body type / [data-id="70c00f0"] .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; } [data-id="263b578"], [data-id="263b578"] p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } / single-col image→body rhythm (block-token top margin so image→body matches title→image) / [data-id="263b578"] { margin-top: var(--rr-space-block) !important; } / "Read More" link size — mobile 6ba5899 AND the kept desktop secondary link 594461a * (the class doesn't style icon-lists, so this keeps both at body size). / [data-id="594461a"] .elementor-icon-list-text, [data-id="6ba5899"] .elementor-icon-list-text { font-size: var(--rr-text-body) !important; } / the desktop "Read More" link is an UNTAGGED in-flow element in a .rr-band-text col * whose flex gap is now 0 — give it a group-token top margin so it doesn't hug the * bio (body→ReadMore, matching ReadMore→button = group). Desktop-only variant. / [data-id="594461a"] { margin-top: var(--rr-space-group) !important; } / mobile eyebrow→title tight + unhide-on-tablet (the site-wide hide-on-tablet spacer bug) / [data-id="e7779a6"] .elementor-spacer-inner { height: var(--rr-space-tight) !important; } [data-id="e7779a6"].elementor-element { display: block !important; } / mobile top/bottom spacers → 0 (section padding handles breathing) / [data-id="bcd6f3d"] .elementor-spacer-inner, [data-id="616638f"] .elementor-spacer-inner { height: 0 !important; } / mobile image cover + tablet full-width banner (landscape crop of the square, face kept) / [data-id="cd2ad3c"] img { object-fit: cover !important; } @media (min-width: 768px) and (max-width: 1024px) { [data-id="cd2ad3c"], [data-id="cd2ad3c"] .elementor-widget-container { width: 100% !important; max-width: 100% !important; } [data-id="cd2ad3c"] img { width: 100% !important; height: clamp(300px, 42vw, 440px) !important; object-fit: cover !important; object-position: center 25% !important; } } / Hero — MIGRATED to the global .rr-hero class pattern (GLOBAL SECTION PATTERN #2, end of file), 2026-07-02. * Home = `rr-hero rr-hero--center` (centred variant). Was section 6y075zwf8 + eyebrow f439168 / H1 lkyvjx521 / * subhead 76691ab / BUY 8e46a98 / SELL 8d10791 / inner iun8cmocl. Canonical values now live in the class. / / Contact CTA — MIGRATED to the global .rr-contact-cta class pattern (GLOBAL SECTION PATTERN #1, end of file), 2026-07-02. / / =========================================================================== * BUY PAGE — fluid type + spacing system rollout (2026-06-25) * * Same engine + tokens as Home (the :root --rr-* block above); per-section * data-id overrides bring each Buy section onto the scale. Audit + evidence: * working/audits/2026-06-25-design-audit/buy/. Locked (same as Home): CAPS * Cormorant headings, gold eyebrows, bright hero — do NOT de-template. * ⚠ data-id-coupled — re-verify the per-section blocks if a section is rebuilt. * Buy sections: Hero 54027f81 · Our Approach ea86b09 · Off Market 50327784 · * Contact 3ba223 (mirrors Home's Contact). * =========================================================================== / / Hero — MIGRATED to the global .rr-hero class pattern (GLOBAL SECTION PATTERN #2, end of file), 2026-07-02. * Buy = base `rr-hero` (LEFT variant). Was section 54027f81 + eyebrow 70d36cc3 / H1 26e8a20c / subhead * 4e182c88 (lead) / inner 63c65955 / CTA row 0732357. Canonical values now live in the class. * ⏪ RETAINED below: the IDX-gated hide of the "START YOUR SEARCH" CTA (39622bf) — this is a * page-specific, non-design rule that outlives the hero migration; restore when IDX returns. / [data-id="39622bf"] { display: none !important; } / --- Our Approach (ea86b09) — MIGRATED to the global .rr-cards class pattern * (GLOBAL SECTION PATTERN #5, end of file), 2026-07-05. Numbered STEPS: navy cards * (gold 01–04 CSS counter) · eyebrow→H2→intro header · grid 4→2×2→1. The per-ID * padding/eyebrow/H2/intro/grid-ladder/card-title/card-body rules are now owned by * the class; the "N. " title prefixes were stripped (the counter supplies the number). * eyebrow b8f986e → .rr-cards-eyebrow · H2 82d735b → .rr-cards-heading · intro 79f15aa * → .rr-cards-intro · grid d649921 → .rr-cards-grid · cards 4d127b1f/18baabc/591e5c4/ * 25f540f6 → .rr-card · titles → .rr-card-title · bodies → .rr-card-body. / / --- Off Market & Private Access (50327784) — MIGRATED to the global .rr-band class * pattern (GLOBAL SECTION PATTERN #3, end of file), 2026-07-02. navy · image-LEFT · * has a CTA button. Tagged: 50327784=rr-band rr-band--navy rr-band--img-left · * 303c280=rr-band-row · 54fc716=rr-band-text · a1324f1=rr-band-media · * 6f43b08=rr-band-eyebrow · 090e41c=rr-band-title · 6b5705f=rr-band-body · * 3afa590=rr-band-img · a93c783=rr-band-cta. / / Contact CTA — MIGRATED to the global .rr-contact-cta class pattern (GLOBAL SECTION PATTERN #1, end of file), 2026-07-02. / / =========================================================================== * SELL PAGE — fluid type + spacing system rollout (2026-06-25) * * Same engine + tokens as Home/Buy (the :root --rr-* block above); per-section * data-id overrides bring each Sell section onto the scale. Audit + evidence: * working/audits/2026-06-25-design-audit/sell/. Locked (same as Home/Buy): CAPS * Cormorant headings, gold eyebrows — do NOT de-template. Everything shipped on * the OLD ad-hoc scale (H1 40 / H2 32 / H3 28 / body 15 / eyebrow 15) + images * object-fit:FILL. ⚠ data-id-coupled — re-verify the per-section blocks if rebuilt. * Sell sections: Hero 5915bb1 · A Personal Approach f850e8b · Why Sellers Choose * Us 1801ad2 · How We Make Selling Simple b128f58 · Our Approach bhqc2ruqt · * Home Valuation 0a16790 (widget — restyle heading only) · Sell With Us 89fb854. * =========================================================================== / / --- Hero (5915bb1) — heading group FULL-WIDTH on top, then image+text 2-col band --- * (Hale 2026-06-26 restructure — "it's not really a hero"): the eyebrow + H1 span the * full width above; below them an image+text band exactly like §3/§4 (image fills its * column as a panel on desktop, stacks to a full-width banner ≤1024). LEFT-aligned (the * page-wide alignment decision). Mechanism: the section is a CSS GRID and the text col * b175a5a is `display:contents` so its children (eyebrow 5c97e04 · H1 5c11b33 · body * 7daeefc · button d60e44e) become grid items and can be placed independently of the * image col f0f29a9 (img 34bf1d1). The old composition/heading spacers are dissolved * (display:none) — grid gaps + margins carry the rhythm now. / [data-id="5915bb1"] { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: clamp(32px, 4vw, 64px) !important; row-gap: 0 !important; align-items: start !important; padding-top: clamp(36px, 4.5vw, 72px) !important; / reduced from section (~128) — was too much top space (Hale 2026-06-26) / padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } [data-id="b175a5a"] { display: contents !important; } / lift the text col's children into the grid / / heading group, full-width, rows 1–2 / [data-id="5c97e04"] { grid-column: 1 / -1 !important; grid-row: 1 !important; } / eyebrow / [data-id="5c11b33"] { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-top: clamp(28px, 3vw, 44px) !important; } / eyebrow→H1: was tight(18) — too cramped; open it toward the page rhythm / / content row: image col (spans the body+button rows) | body+button / [data-id="f0f29a9"] { grid-column: 1 !important; grid-row: 3 / span 2 !important; margin-top: var(--rr-space-block) !important; align-self: stretch !important; gap: 0 !important; padding: 0 !important; } / zero the image COL's 10px padding so the image fills the column (top-aligns with body) / [data-id="7daeefc"] { grid-column: 2 !important; grid-row: 3 !important; margin-top: var(--rr-space-block) !important; } / body / [data-id="d60e44e"] { grid-column: 2 !important; grid-row: 4 !important; margin-top: var(--rr-space-group) !important; align-self: start !important; } / button / / dissolve the redundant spacers (grid gaps/margins carry the rhythm) / [data-id="63491b9"], [data-id="1b8cf32"], [data-id="7707b38"], [data-id="1b33e45"], [data-id="e0b9b27"], [data-id="4e8a537"], [data-id="3be6e54"] { display: none !important; } / type roles (eyebrow / H1 / body / button) — unchanged from the §3.5 scale / [data-id="5c97e04"] .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; text-align: left !important; / LEFT-align to match About §1 (Hale 2026-06-28) — heading lines up with the image+text band below / } [data-id="5c11b33"] .elementor-heading-title { font-size: var(--rr-text-display) !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-align: left !important; } [data-id="7daeefc"], [data-id="7daeefc"] p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } [data-id="d60e44e"] .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } / image fills its column as a full-height panel (cover), exactly like §3/§4 / [data-id="34bf1d1"] { padding: 0 !important; } / drop the widget's ~10px inset (ALL sides) so the image fills the column AND top-aligns with the body (Hale 2026-06-26) / [data-id="34bf1d1"], [data-id="34bf1d1"] .elementor-widget-container { height: 100% !important; } [data-id="34bf1d1"] img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; } / ≤1024 STACK: single column, image as a full-width banner between the H1 and the body / @media (max-width: 1024px) { [data-id="5915bb1"] { grid-template-columns: 1fr !important; } [data-id="5c97e04"] { grid-column: 1 !important; grid-row: auto !important; order: 1 !important; } [data-id="5c11b33"] { grid-column: 1 !important; grid-row: auto !important; order: 2 !important; } [data-id="f0f29a9"] { grid-column: 1 !important; grid-row: auto !important; order: 3 !important; } [data-id="7daeefc"] { grid-column: 1 !important; grid-row: auto !important; order: 4 !important; } [data-id="d60e44e"] { grid-column: 1 !important; grid-row: auto !important; order: 5 !important; } [data-id="34bf1d1"], [data-id="34bf1d1"] .elementor-widget-container { height: auto !important; } [data-id="34bf1d1"] img { width: 100% !important; height: clamp(200px, 40vw, 360px) !important; } } / --- A Personal Approach (f850e8b) — MIGRATED to the global .rr-statement class * pattern (GLOBAL SECTION PATTERN #4, end of file), 2026-07-05. navy · centred · * body cap 820. Tagged: f850e8b=rr-statement rr-statement--navy · 7fba418= * rr-statement-inner · 9259285=rr-statement-eyebrow · 9cc055b=rr-statement-title * · f195d94=rr-statement-body. The old fixed-width/cap/centre rules now live in * the class (width:90% scaling replaces the col-fill; 820 body cap is default). / / --- Why Sellers Choose Us? (1801ad2) + How We Make Selling Simple? (b128f58) — * both MIGRATED to the global .rr-band class pattern (GLOBAL SECTION PATTERN #3, * end of file), 2026-07-02. These two ALTERNATE (light / navy), NO eyebrow. * 1801ad2 (LIGHT, text-left/img-right, base side): 1801ad2=rr-band · deef7c2=rr-band-row * · a1354dc=rr-band-text · 3f9fe14=rr-band-media · 95169f8=rr-band-title * · 2895c85=rr-band-body · 3f51091=rr-band-img. The old 3-layer navy→light recolor + * text-colour flip are now the class's light bg-hygiene + light text roles. * b128f58 (NAVY, img-left, SECTION=ROW): b128f58=rr-band rr-band--navy rr-band--img-left * rr-band-row (co-located) · 4b6502f=rr-band-text · 6e443a8=rr-band-media * · 30eda63=rr-band-title · 7fec8c3=rr-band-body · 7d5e17a=rr-band-img. The old * light→navy recolor + hand-rolled 100vw ::before full-bleed + text-col bg-clear are * now the class's .rr-band--navy ::before + navy bg-hygiene + soft-white text roles. * (Mobile banner unified 200-360 → 300-440, the D2 standardization.) / / --- Our Approach to Selling — MIGRATED to the global .rr-cards class pattern * (GLOBAL SECTION PATTERN #5, end of file), 2026-07-05. The old section `bhqc2ruqt` * (a bespoke CSS-grid of FLAT title/body widgets + a welded banner image) was * REBUILT from the canonical rr-cards template (Elementor library 1260) into the * same navy-card grid as Buy — so the two "Our Approach" sections are now identical * (Hale: navy cards + gold number; banner DROPPED). New section id 6a36bae, tagged * `.rr-cards` (steps). All the old per-ID grid/placement/type rules are gone with * the old section. See BUILD_LOG 2026-07-05 + DESIGN_SYSTEM §3.6 Pattern #5. / / --- What Is Your Home Worth? (0a16790) — MIGRATED to the global .rr-statement class * pattern (GLOBAL SECTION PATTERN #4, end of file), 2026-07-05. navy · centred · CTA * button · full section padding + body cap 820 — IDENTICAL spacing to the Invest mid-CTA * (Hale 2026-07-05: the two CTA strips must match; the earlier --slim/full-width-body * treatment was dropped). Tagged: 0a16790=rr-statement rr-statement--navy · * 1137226=rr-statement-inner · a50f9f5=rr-statement-eyebrow · 4263702=rr-statement-title * · a383f4e=rr-statement-body · c582211=rr-statement-cta ("Request Your Complimentary * Valuation"). ⚠ The hidden valuation TOOL (html widget a3c9fdb, opened by the button) * is UNTOUCHED by the class — it styles only eyebrow/title/body/CTA around it. / / Contact CTA — MIGRATED to the global .rr-contact-cta class pattern (GLOBAL SECTION PATTERN #1, end of file), 2026-07-02. / / =========================================================================== * INVEST PAGE — fluid type + spacing system rollout (2026-06-25) * * Same engine + tokens as Home/Buy/Sell (the :root --rr-* block above); per- * section data-id overrides bring each Invest section onto the scale. Audit + * evidence: working/audits/2026-06-25-design-audit/invest/. Locked (same as the * rest): CAPS Cormorant headings, gold eyebrows, bright hero — do NOT de-template. * The page shipped on the OLD ad-hoc scale (H1 40 / H2 32 / H3 28 / body 15 / * eyebrow 15) + images object-fit:FILL, like Buy/Sell. ZERO IDX widgets on this * page. Built with Elementor flex CONTAINERS (e-con-full = direct children, no * .e-con-inner). ⚠ data-id-coupled — re-verify the per-section blocks if rebuilt. * Invest sections: Hero dc9ba38 · A Personal Approach 28efa40 · Slideshow band * 814adcf · 4 image+text bands ce1db36/fb7c9cf/d2f8517/f363fc4 · mid CTA 6413b4b0 * · Why Palm Beach (3-up) fa29a06 · Contact a05f823 (mirrors Home's Contact). * =========================================================================== / / Hero — MIGRATED to the global .rr-hero class pattern (GLOBAL SECTION PATTERN #2, end of file), 2026-07-02. * Invest = base `rr-hero` (LEFT variant), the serif-subhead + body variant: eyebrow 8103f7c / H1 1668437 / * subhead b623182 (rr-hero-subhead, Cormorant) / body a46973a (rr-hero-body) / button 36929f3 / inner * c3a8243. Canonical values + the mobile long-word H1 overflow guard now live in the class. / / --- A Personal Approach to Investment (28efa40) — MIGRATED to the global .rr-statement * class pattern (GLOBAL SECTION PATTERN #4, end of file), 2026-07-05. LIGHT · centred · * NO eyebrow · body cap 820. Tagged: 28efa40=rr-statement · db967d7=rr-statement-inner * (boxed; its .e-con-inner is auto-filled to 90%) · c80f877=rr-statement-title · * 21e7a43=rr-statement-body. ⚑ DRIFT FIXED: was a FIXED 1139px (didn't scale past 1440) * with an UNCAPPED ~150-char body — the class puts it on width:90% (1153/1297) and the * 820 readable cap, matching Sell §2. / / ≤767 H1 long-word overflow guard — MIGRATED into .rr-hero-title (GLOBAL SECTION PATTERN #2, * end of file): the guard is now baked into the class for every hero, not just Invest's H1. / / --- Image+text bands ×4 (ce1db36 · fb7c9cf · d2f8517 · f363fc4) — Off Market pattern. * All four are identical structure (a row con, gap 50, with a text column + an image * column; images shipped object-fit:FILL). They alternate navy/light AND image side: * §4 ce1db36 navy — TEXT left / IMG right (img col 2nd in DOM → order:-1 when stacked) * §5 fb7c9cf light — IMG left / TEXT right (img col 1st → natural stack) * §6 d2f8517 navy — TEXT left / IMG right (img col 2nd → order:-1) * §7 f363fc4 light — IMG left / TEXT right (img col 1st; NO eyebrow) * Treatment (same as Sell §3/§4): * • Row narrowed to the 1139 content box (centred) → all four align to left ~143, matching * the hero/§2 (they shipped at 1283/left71 — wider than the rest). * • Section vertical padding = --rr-space-section; the 50px column corner spacers hidden * (section padding carries it); eyebrow→H2 + H2→body → tight token (+20px col gap = ~57). * • The eyebrow→H2 spacer carried the site-wide HIDE-ON-TABLET flag on the 3 eyebrow'd * bands (5826ce0 / 01528e7 / 7f12a9f) — unhidden so the rhythm holds on tablet. * • Image fill→cover; fills its column as a full-height panel ≥1025; stacks to a full- * width banner ON TOP ≤1024 (image leads). Navy bands are already full-bleed (1425px). * ⚠ data-id-coupled — re-verify if rebuilt. / / shared: type roles + the fill/stack mechanics, written per band below / / §4 — ce1db36 — MIGRATED to the global .rr-band class pattern (GLOBAL SECTION * PATTERN #3, end of file), 2026-07-02. navy · text-left/img-right (base side). * Tagged: ce1db36=rr-band rr-band--navy · c956acb=rr-band-row · e4bf125=rr-band-text * · 1d68551=rr-band-media · 71cac38=rr-band-eyebrow · 2b4cab9=rr-band-title * · 91faacd=rr-band-body · 4a3306b=rr-band-img. / / §5 · §6 · §7 — MIGRATED to the global .rr-band class pattern (GLOBAL SECTION * PATTERN #3, end of file), 2026-07-02. Tagged (section · row · text · media · * [eyebrow] · title · body · img): * §5 fb7c9cf (light, img-left) : fb7c9cf=rr-band rr-band--img-left · 7e087f9=row * · 1eefbb8=text · e2fd3f3=media · 3b092cb=eyebrow · a14dfc5=title · 41f7a06=body · 238b12f=img * §6 d2f8517 (navy) : d2f8517=rr-band rr-band--navy · 726af21=row * · 318d12a=text · 5f240a7=media · be4e839=eyebrow · 256be13=title · 982a5ad=body · c0347fa=img * §7 f363fc4 (light, img-left, NO eyebrow): f363fc4=rr-band rr-band--img-left · 44c28bd=row * · e416dba=text · 408c5c2=media · 29f3373=title · f00289b=body · f2a4cdf=img * The old shared ≤1024 con-padding-zero block is folded into .rr-band-text/-media padding:0. / / --- Lifestyle slideshow band (814adcf) — decorative full-bleed background-slideshow * (no text). It shipped min-height 900px (desktop)/~1024px (tablet). My first pass * over-cropped it (48vh ≈ a thin strip on a 17" laptop — the people's bodies were cut * off). Give it a GENEROUS editorial height so the subjects read fully, without going * full-screen. object-position keeps the subjects framed (slides are background images * → tune via background-position on the slideshow). / [data-id="814adcf"] { min-height: clamp(560px, 82vh, 900px) !important; height: clamp(560px, 82vh, 900px) !important; } / --- Mid CTA band (6413b4b0) — MIGRATED to the global .rr-statement class pattern * (GLOBAL SECTION PATTERN #4, end of file), 2026-07-05. NAVY · centred · NO eyebrow · * CTA button · full-height (--rr-space-section, NOT --slim) · body cap 820. Tagged: * 6413b4b0=rr-statement rr-statement--navy · 7db404ad=rr-statement-inner (the outer * column; nested heading+body con 53959c16 is auto-filled/gap-zeroed) · 3656418e= * rr-statement-title · 1bb362c=rr-statement-body · 5b15e06a=rr-statement-cta. * ⚑ STANDARDISED: body→button was 57 (major); the class uses group (36) to match * .rr-band-cta, and the body now caps at the 820 readable measure. / / --- Why Palm Beach Continues to Attract Capital (fa29a06) — light; centred eyebrow/ * H2/intro + a 3-up image row. Boxed cons 4538daf > c10c076 (content) > d94e0b1 (3 imgs). * Eyebrow bd15600 (gold caps) → H2 58304a8 → intro 93e4934 → 3 images 9fc3d3e/bb59060/ * 5e71662 (were object-fit:FILL). Roll type, narrow to 1139, drop the 100px corner * spacers; eyebrow→H2 spacer d7cd26d was HIDE-ON-TABLET (unhidden); 3-across ≥768 → * 1-col ≤767. / / Hale 2026-06-26: widen the section (was capped 1139 — too narrow to showcase the * image row) and stack the images 1-col on TABLET too (≤1024), same as mobile. / [data-id="fa29a06"] { padding: var(--rr-space-section) var(--rr-gutter) !important; max-width: 100% !important; width: 100% !important; } / full-width so the image row can be showcased wide / / SAME-COLOR BOUNDARY rule (Hale 2026-06-26): §9 and §10 are BOTH soft-white, so there's * no colour flip to "absorb" the gap — the two full section paddings (≈115+115) merge into * one oversized void that reads as too much space (whereas a navy↔light flip makes the same * gap read as intentional). At a same-colour adjacency, drop both boundary paddings from * `section` → `block` so the combined gap (~144) reads like a single clean section break. * (§9 bottom here; §10 top below.) / [data-id="fa29a06"] { padding-bottom: var(--rr-space-block) !important; } [data-id="4538daf"] { padding-left: 0 !important; padding-right: 0 !important; } / outer con had 10px side padding the hero doesn't → shrank the 90% base (1279 vs hero 1297); zero it so §9 matches the hero exactly / [data-id="c10c076"] { width: 90% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } / match the hero %-width (90%, scales) — same as the bands / [data-id="74e5c79"], [data-id="51cf6f9"] { display: none !important; } / top/bottom 100 spacers → section padding / [data-id="bd15600"] .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; } [data-id="d7cd26d"].elementor-element { display: block !important; } / unhide tablet / [data-id="d7cd26d"] .elementor-spacer-inner, [data-id="902351d"] .elementor-spacer-inner { height: var(--rr-space-tight) !important; } / eyebrow→H2, H2→intro ~57 / [data-id="58304a8"] .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; } / intro capped for readable line-length + centred (the con is now wide for the images) / [data-id="93e4934"] { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; } [data-id="93e4934"], [data-id="93e4934"] p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; text-align: center !important; } [data-id="cdb62a5"] .elementor-spacer-inner { height: var(--rr-space-group) !important; } / intro → image row ~76 / / Images: take them OUT of the rigid CSS grid into a FLEX row so they resize fluidly * with the available space (like the image+text band images), Hale 2026-06-26. The grid * pinned them to a fixed 205px height (squat); now each is an equal, fluid third * (flex:1) with a fixed aspect-ratio so width AND height scale together as the viewport * changes. Stack 1-col ≤1024 (each full-width, same aspect — a big showcase). / [data-id="d94e0b1"].elementor-element { display: flex !important; flex-direction: row !important; gap: 25px !important; align-items: stretch !important; } [data-id="9fc3d3e"], [data-id="bb59060"], [data-id="5e71662"] { flex: 1 1 0 !important; min-width: 0 !important; } / FIXED height + cover (Hale 2026-06-26) — exactly the image+text band behaviour: the * height stays constant and the image just CROPS/FILLS to the fluid width (cover), instead * of `aspect-ratio` which shrank the height on a smaller desktop ("smaller versions of the * images"). Width is fluid (flex:1); height is fixed on desktop, a taller clamp when stacked. / [data-id="9fc3d3e"] img, [data-id="bb59060"] img, [data-id="5e71662"] img { width: 100% !important; height: 320px !important; object-fit: cover !important; object-position: center !important; } @media (max-width: 1024px) { [data-id="d94e0b1"].elementor-element { flex-direction: column !important; } [data-id="9fc3d3e"], [data-id="bb59060"], [data-id="5e71662"] { width: 100% !important; } [data-id="9fc3d3e"] img, [data-id="bb59060"] img, [data-id="5e71662"] img { height: clamp(300px, 50vw, 420px) !important; } / full-width stacked showcase / } / Contact CTA — MIGRATED to the global .rr-contact-cta class pattern (GLOBAL SECTION PATTERN #1, end of file), 2026-07-02. / / =========================================================================== * ABOUT PAGE ("Work with Riccardo", /work-with-riccardo/) — fluid type + spacing * system rollout (2026-06-26) * * Same engine + tokens as Home/Buy/Sell/Invest (the :root --rr-* block above); * per-section data-id overrides bring each About section onto the scale. Audit + * baselines: working/audits/2026-06-25-design-audit/about/. Locked (same as the * rest): CAPS Cormorant headings, gold eyebrows — do NOT de-template. Page shipped * on the OLD ad-hoc scale (H1 30 / H2 26&23 / eyebrow 14-15 / body 15) + images * object-fit:FILL. ZERO IDX widgets. Built with Elementor flex CONTAINERS * (e-con-full = direct children, no .e-con-inner). One parent con e498cf6 (soft- * white, gap:20) wraps the sections. * * WIDTH: About was already built at width:90% on most sections (Meet/Approach-row/ * Social/Dual all 1283@1440 = 90%) — PRESERVE 90% (scales to 1297@1600), never a * fixed px. Only Contact shipped thin (50%/713) → standard Contact pattern. * ⚠ data-id-coupled — re-verify the per-section blocks if a section is rebuilt. * About sections: Meet f1c2e7c(desk+tab)/1f6de33(mob) · Approach 4fd55d4a(navy * band) · [Meet My Team e3f0a06 HIDDEN — MVP, left untouched] · Contact 4686a113 * (form 6217f6d6) · Social-follow d7cd674 · Dual CTA 3ad0d7d. * =========================================================================== / / --- §1 MEET RICCARDO — SELL §1 PATTERN (Hale 2026-06-26): unified with the Sell hero. * The eyebrow + H1 span FULL-WIDTH on top; below, a 50/50 image+text band — image-LEFT * fills its column as a cover PANEL, body-RIGHT, the contact-caption UNDER the body. * LEFT-aligned (About's page alignment; Sell §1 centres its title — noted for a future * Sell tweak, not done here). Stacks to a full-width face-held banner ≤1024. * Mechanism = CSS GRID on the section + display:contents on BOTH columns so their children * become grid items placed independently (the Sell §1 technique). * Two responsive variants: * f1c2e7c = desktop + TABLET variant (hidden-mobile) * img col f534c3c (image 449fcf8 + caption icon-list 0f0369c + spacer 2bcad3e) * txt col a148ffc (spacer d59e66a · eyebrow 9f88fca · spacer 12de052 · H1 99a61d3 · body a3ae69b) * 1f6de33 = mobile variant (hidden-desktop+tablet, ≤767) — handled in its own block below. / / desktop+tablet variant — the grid + the lift ------------------------------- / [data-id="f1c2e7c"] { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 50px !important; / match the Approach band's column gap / row-gap: 0 !important; align-items: start !important; padding-top: clamp(36px, 4.5vw, 72px) !important; / FIRST section → reduced top (matches Sell §1; full section padding read as too much space above the eyebrow, Hale 2026-06-26) / padding-bottom: var(--rr-space-section) !important; padding-left: 0 !important; padding-right: 0 !important; / the 90% width insets it (aligns left edge with Approach) / } / Page-level top spacer before Meet (699dd52, ~75px) — removed so Meet sits ~72px below * the header like Sell §1 (header → spacer 75 → gap 20 → 128 padding = 223 above the * eyebrow was too much; now just the reduced section top). / [data-id="699dd52"] { display: none !important; } [data-id="f534c3c"], [data-id="a148ffc"] { display: contents !important; } / lift both cols' children into the grid / / type → scale (eyebrow + H1 LEFT-aligned) / [data-id="9f88fca"] .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; text-align: left !important; } [data-id="99a61d3"] .elementor-heading-title { font-size: var(--rr-text-display) !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-align: left !important; } [data-id="a3ae69b"], [data-id="a3ae69b"] p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } [data-id="0f0369c"] .elementor-icon-list-text { font-size: var(--rr-text-body) !important; } [data-id="9f88fca"], [data-id="99a61d3"] { margin-bottom: 0 !important; } / kill the per-widget 15/16px margins (they inflated the gaps) / [data-id="d59e66a"], [data-id="12de052"], [data-id="2bcad3e"] { display: none !important; } / dissolve the now-loose column spacers / / image: cover, face-held (his face sits in the upper third) / [data-id="449fcf8"] img { object-fit: cover !important; object-position: center 22% !important; } @media (min-width: 1025px) { / heading group FULL-WIDTH (rows 1–2); then image PANEL (col 1, spans the body+caption * rows) | body (col 2) + caption under it (col 2). The image fills its column as a tall * cover panel (align-self:stretch + height:100% on the widget — Buy/Invest mechanism). / [data-id="9f88fca"] { grid-column: 1 / -1 !important; grid-row: 1 !important; } / eyebrow→H1 matches Sell §1 (was the major 57 — too much, Hale 2026-06-26); H1→content * gap lives on the H1's margin-BOTTOM so the image + body both start at the row-3 top * (top-aligned) without per-item margin-top. / [data-id="99a61d3"] { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-top: clamp(28px, 3vw, 44px) !important; margin-bottom: var(--rr-space-block) !important; } / ⚠ image PANEL — col 1, spans the body+caption rows. This is a PORTRAIT whose intrinsic * height (taller than the body+caption) was INFLATING the spanning grid rows (image hung * ~122px below the caption + ate the section's bottom padding). Fix: ABSOLUTELY POSITION * the img inside the cell so it contributes ZERO intrinsic height — the RIGHT column * (body+caption) then drives the row height and the image just cover-crops to fill it → * image bottom = content bottom (Hale 2026-06-26). / [data-id="449fcf8"] { grid-column: 1 !important; grid-row: 3 / span 2 !important; align-self: stretch !important; padding: 0 !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; } [data-id="449fcf8"] .elementor-widget-container { height: 100% !important; } [data-id="449fcf8"] img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 22% !important; } [data-id="a3ae69b"] { grid-column: 2 !important; grid-row: 3 !important; } / body top-aligns with the image (H1 margin-bottom carries the gap) / [data-id="0f0369c"] { grid-column: 2 !important; grid-row: 4 !important; margin-top: var(--rr-space-tight) !important; } / caption just under the bio (the gap read weird/large, Hale 2026-06-26) / } @media (max-width: 1024px) { / TABLET stack (768–1024; hidden ≤767 → mobile variant 1f6de33): single col, LEFT- * aligned, order eyebrow → H1 → photo banner → caption → body (caption after the photo, * matching the mobile variant — keeps the contact visible above the long bio). / [data-id="f1c2e7c"] { grid-template-columns: 1fr !important; } [data-id="9f88fca"] { grid-column: 1 !important; grid-row: auto !important; order: 1 !important; } [data-id="99a61d3"] { grid-column: 1 !important; grid-row: auto !important; order: 2 !important; margin-top: clamp(28px, 3vw, 44px) !important; } / eyebrow→H1 = Sell §1 (consistent w/ desktop) / [data-id="449fcf8"] { grid-column: 1 !important; grid-row: auto !important; order: 3 !important; margin-top: var(--rr-space-major) !important; align-self: stretch !important; padding: 0 !important; } [data-id="449fcf8"] .elementor-widget-container { height: auto !important; } [data-id="449fcf8"] img { width: 100% !important; height: clamp(440px, 56vw, 560px) !important; } [data-id="0f0369c"] { grid-column: 1 !important; grid-row: auto !important; order: 4 !important; margin-top: var(--rr-space-tight) !important; } [data-id="a3ae69b"] { grid-column: 1 !important; grid-row: auto !important; order: 5 !important; margin-top: var(--rr-space-major) !important; } } @media (max-width: 767px) { / ⚠ re-hide the desktop+tablet variant on mobile. The base `display:grid !important` * above (needed for the ≥768 grid) OVERRODE Elementor's `elementor-hidden-mobile` — so * without this, BOTH Meet variants would render at ≤767 (duplicate). The mobile variant * 1f6de33 takes over here. / [data-id="f1c2e7c"] { display: none !important; } } / mobile variant (≤767) ------------------------------------------------------ / [data-id="1f6de33"] { padding-top: clamp(36px, 4.5vw, 72px) !important; / FIRST section → reduced top (matches Sell §1 / the desktop variant) / padding-bottom: var(--rr-space-section) !important; } [data-id="67a69f6"] .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; } [data-id="ab6a6bd"] .elementor-heading-title { font-size: var(--rr-text-display) !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; } [data-id="c758950"], [data-id="c758950"] p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } [data-id="59cb699"] .elementor-icon-list-text { font-size: var(--rr-text-body) !important; } / mobile rhythm: this variant has NO spacers (just the 20px col gap) + the same 15/16px * widget margins → eyebrow→H1 read a tight 35. Zero the widget margins + add the major * (52 mobile) via margin-top so name→portrait→body breathe consistently with the rest. / [data-id="67a69f6"], [data-id="ab6a6bd"] { margin-bottom: 0 !important; } [data-id="ab6a6bd"] { margin-top: calc(clamp(28px, 3vw, 44px) - 20px) !important; } / eyebrow→H1 = Sell §1 (consistent across breakpoints; +20px col gap) / [data-id="5ad597d"] { margin-top: calc(var(--rr-space-major) - 20px) !important; } / H1→portrait ~52 / [data-id="c758950"] { margin-top: calc(var(--rr-space-major) - 20px) !important; } / caption→body ~52 / [data-id="5ad597d"] img { object-fit: cover !important; object-position: center 22% !important; width: 100% !important; height: clamp(440px, 110vw, 520px) !important; } / mobile header LEFT-aligned (Hale 2026-06-26) — match the tablet view (the eyebrow + H1 * shipped per-widget text-align:center; the body was already left). / [data-id="67a69f6"] .elementor-heading-title, [data-id="ab6a6bd"] .elementor-heading-title { text-align: left !important; } / --- §2 APPROACH (4fd55d4a / row 1d307441) — MIGRATED to the global .rr-band class * pattern (GLOBAL SECTION PATTERN #3, end of file), 2026-07-02. NAVY · text-left/ * img-right (base side). Tagged: 4fd55d4a=rr-band rr-band--navy · 1d307441=rr-band-row * · 5d9f00f0=rr-band-text · 45e4192d=rr-band-media · 3677011=rr-band-eyebrow * · c7c81cc=rr-band-title · 1bb1f316=rr-band-body · 7a6d807=rr-band-img. The stray 25px * left pad + the 50/50 forcing + the full-bleed navy are now the class's col padding:0 + * flex:1 1 0 + .rr-band--navy ::before. (Row width standardized 1265 → 1153 with the rest.) / / Contact CTA — MIGRATED to the global .rr-contact-cta class pattern (GLOBAL SECTION PATTERN #1, end of file), 2026-07-02. / / --- §5 SOCIAL-FOLLOW BAND (d7cd674) — "A Look at Life in Palm Beach": HIDDEN for MVP * (Hale, 2026-06-26). Its 5 social-icons (1429011) are already hidden on every breakpoint * (Elementor `elementor-hidden`) with PLACEHOLDER hrefs ("http://link") — no social * accounts exist yet, so a "Follow along…" band with no follow targets is hollow. Hide * the whole section, consistent with the hidden Team section (e3f0a06). * ⏪ WHEN SOCIAL ACCOUNTS EXIST: remove this hide, un-hide the icons (1429011), wire the * real URLs, then roll the band onto the §3.5 scale (centred divider→H2→body→icons, * H2→`--rr-text-h2`, body capped ~620, icons sized + centred). / [data-id="d7cd674"] { display: none !important; } / --- §6 DUAL CTA (3ad0d7d) — MIGRATED to the global .rr-cards class pattern * (GLOBAL SECTION PATTERN #5, end of file), 2026-07-05. The two "For Sellers / For * Buyers" audience doors are now the CTA-DOORS variant of the cards pattern: * section 3ad0d7d → `.rr-cards .rr-cards--doors .rr-cards-grid .rr-cards--flush-top` * (co-located — the section IS the 2-up grid) · cards c628e23/9c3844f → .rr-card · * eyebrows 1d4313e/25cb898 → .rr-card-label · H2s 9b4ff68/3e5d186 → .rr-card-title · * buttons aea6b65/8fec9c0 → .rr-card-cta (class locks the full button typography). * The class owns padding/gap/2-up ladder/mobile-gutter; the per-ID rules are gone. / / =========================================================================== * CONTACT / PRIVATE CONSULTATION PAGE (/private-consultation/) — fluid type + * spacing system rollout (2026-06-26) * * This is a standalone 2-COLUMN contact PAGE (photo-left desktop-only + form-right), * NOT the appended single-column Contact section on Home/Buy/Sell/Invest — so the * "con 1080 / intro+form 880" width rule does NOT apply: the form lives in its own * 50% column (tablet/mobile 100%), which is already a comfortable measure. * Form = 7392f33 ("Contact Inquiry Form", single compliant form). Engine + tokens = * the shared :root --rr-* block above. Baselines/audit: working/audits/2026-06-25- * design-audit/contact/. ALL cons here are e-con-full (no .e-con-inner) → target the * [data-id] directly. DECISIONS (Hale 2026-06-26): H1 "Let's Connect" → Heading/H2 * token (not Display); tablet/mobile stay LEAN (form only, photo kept hidden ≤1024). * ⚠ COMPLIANCE: form/consent typography is font-SIZE only — consent WORDING UNTOUCHED. * data-id-coupled — re-verify if the page is rebuilt in Elementor. * ----------------------------------------------------------------------------- / / page wrapper 2621810: top/bottom on the section token (were ~50px default spacers); * keep the side gutter / [data-id="2621810"] { padding-top: var(--rr-space-block) !important; / was section — too much air above the lone eyebrow on tablet/mobile (no photo to balance it); block is tighter (Hale 2026-06-26) / padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } / Dead/redundant spacers → display:none (NOT height:0). A zero-height spacer is still a flex * child and keeps eating a 20px gap on each side (Sell §6 lesson) — that wasted ~40-90px above * the eyebrow. Hide them entirely; the wrapper padding + heading-group tokens carry the rhythm. * 110f3db = the eyebrow's own top spacer (redundant with the wrapper top padding). / [data-id="4263f00"], [data-id="110f3db"], [data-id="68d0f9d"], [data-id="34a1e27"] { display: none !important; } / PHOTO PANEL (desktop only) — fill the form-column height + cover-crop (was a fixed * 750px → ~186px void below it; bg was size:185% + repeat). 26cd0ce/634797b are * hidden-tablet/mobile — DO NOT set `display` on them (would un-hide ≤1024; About §1 * lesson). align-self:stretch on the COLUMN + height:100% on the inner PANEL (a height * on the column would cancel the stretch). / [data-id="26cd0ce"] { align-self: stretch !important; } [data-id="634797b"] { min-height: 0 !important; height: 100% !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } / EYEBROW "Contact" c154c40 → eyebrow token (was 15px / ls 0.5em hardcoded); keep gold / [data-id="c154c40"] .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; } / eyebrow→H1 spacer eabe422 was hide-on-tablet (site-wide pattern) → unhide + tight * (emergent ~57 = --rr-space-major with the 20px flex gaps) / [data-id="eabe422"].elementor-element { display: block !important; } [data-id="eabe422"] .elementor-spacer-inner { height: var(--rr-space-tight) !important; } / H1 "Let's Connect" 88984bc → Heading/H2 token (Hale: H2 scale, not Display); CAPS kept / [data-id="88984bc"] .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; } / H1→form spacer 92ca3e4 → group (emergent ~76, the Contact "intro→form" rhythm) / [data-id="92ca3e4"] .elementor-spacer-inner { height: var(--rr-space-group) !important; } / FORM 7392f33 — verbatim Contact-form treatment (mirrors 538bcd3 / 2be6a1e8). * font-SIZE only; CONSENT WORDING UNTOUCHED. submit → button role. / [data-id="7392f33"] .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } [data-id="7392f33"] .elementor-field-textual, [data-id="7392f33"] .elementor-field-label { font-size: 14px !important; } [data-id="7392f33"] .elementor-field-type-acceptance, [data-id="7392f33"] .elementor-field-type-acceptance label, [data-id="7392f33"] .elementor-field-type-html { font-size: 13px !important; line-height: 1.55 !important; } [data-id="7392f33"] .elementor-field-group { margin-bottom: var(--rr-space-tight) !important; } [data-id="7392f33"] .elementor-field-group.elementor-field-type-textarea { margin-bottom: var(--rr-space-group) !important; } [data-id="7392f33"] .elementor-field-group.elementor-field-type-html { margin-bottom: 0 !important; } [data-id="7392f33"] .elementor-field-group.elementor-field-type-submit { margin-top: var(--rr-space-group) !important; margin-bottom: 0 !important; } / =========================================================================== * EYEBROW CONTRAST TREATMENT — Hale-approved 2026-06-26 (replaces the preview). * The champagne gold eyebrow fails WCAG AA on cream (2.15:1); this fixes it by * context while KEEPING the gold accent. Three contexts (classified by each * eyebrow's section background — see the inventory in working/audits/2026-06-25- * design-audit/eyebrow-preview/): * • LIGHT / cream sections → NAVY text (#0A1F3B ≈ 13:1) + a 2px GOLD UNDERLINE * spanning the FULL eyebrow phrase, ~10px beneath (decorative gold = NO contrast * requirement). Riccardo 2026-07-01: the old 28px hairline read as "very tiny" — * widened to the whole word. Mechanism: the title is shrink-wrapped to its text * (width:fit-content, kept as a block so its placement follows the eyebrow's OWN * text-align — centred ids get margin:auto below; left ids stay left) and the * ::after is width:100%. (inline-block was tried first but re-centred a left * eyebrow off its H1, since inline-block follows the WRAPPER's text-align.) * • PHOTO heroes → SOFT-WHITE text (#FAFAF7 — legible over the photo, matches the H1). * • NAVY sections → UNCHANGED (gold already passes at 7.34:1; not listed here). * data-id-coupled (incl. per-breakpoint + hidden variants) — re-scan if a section * is rebuilt. Adds color + width + ::after (+ margin:auto on centred ids) only; per-section * font-size/tracking rules above are untouched. ⚠ NOTE: the gold "tell" now lives on * navy-section eyebrows + the underlines + buttons; on light sections it is the underline, * not the text. ======= / / --- LIGHT sections → navy eyebrow text --- / / Buy · Our Approach (b8f986e) + Sell · Our Approach (e26a5bf) MIGRATED → .rr-cards-eyebrow (Pattern #5) / [data-id="715085e2"] .elementor-heading-title, / Buy · Featured Neighbourhoods (IDX-hidden) / [data-id="5c97e04"] .elementor-heading-title, / Sell · hero (light) / / Invest · Hospitality (3b092cb) MIGRATED → .rr-band eyebrow treatment / [data-id="bd15600"] .elementor-heading-title, / Invest · Why Palm Beach / [data-id="9f88fca"] .elementor-heading-title, / About · Meet (desktop) / [data-id="67a69f6"] .elementor-heading-title, / About · Meet (mobile var) / [data-id="af0f096"] .elementor-heading-title, / About · My Team (hidden) / [data-id="c154c40"] .elementor-heading-title / Contact page · Contact / { color: #0A1F3B !important; / fit-content → the box shrink-wraps to its text so the underline below spans the * PHRASE, not the whole column. Kept display:block (NOT inline-block) so the box's * horizontal placement still follows the eyebrow's OWN text-align, not the widget * wrapper's — inline-block re-centred the left-aligned About eyebrow off its H1. / width: -moz-fit-content !important; width: fit-content !important; } / the gold underline under every light-section eyebrow — full phrase width (decorative — no AA requirement) / / b8f986e (Buy) + e26a5bf (Sell) Our Approach MIGRATED → .rr-cards-eyebrow (Pattern #5) / [data-id="715085e2"] .elementor-heading-title::after, [data-id="5c97e04"] .elementor-heading-title::after, [data-id="bd15600"] .elementor-heading-title::after, [data-id="9f88fca"] .elementor-heading-title::after, [data-id="67a69f6"] .elementor-heading-title::after, [data-id="af0f096"] .elementor-heading-title::after, [data-id="c154c40"] .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / centred eyebrows → centre the shrink-wrapped box (the ::after fills it at 100%). * Left-aligned eyebrows keep the default left placement — so this list encodes which * eyebrows are visually centred (matches each eyebrow's own text-align). / / b8f986e (Buy) + e26a5bf (Sell) Our Approach MIGRATED → .rr-cards-eyebrow (Pattern #5, centred there) / [data-id="bd15600"] .elementor-heading-title, / Invest · Why Palm Beach (centred eyebrow) / [data-id="af0f096"] .elementor-heading-title, [data-id="c154c40"] .elementor-heading-title { margin-left: auto !important; margin-right: auto !important; } / legal "LEGAL" eyebrow (left-aligned, structural selector → all 7 legal pages) / body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-heading div.elementor-heading-title { color: #0A1F3B !important; / shrink-wrap so the underline spans the phrase; block (not inline-block) keeps it * left-aligned under the title, following the eyebrow's own alignment. / width: -moz-fit-content !important; width: fit-content !important; } body.rr-legal-page [data-elementor-type="wp-page"] .elementor-widget-heading div.elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / PHOTO-hero soft-white eyebrow — MIGRATED into .rr-hero-eyebrow (GLOBAL SECTION PATTERN #2). / / =========================================================================== * IMAGE+TEXT SECTION WIDTH CONSISTENCY (Hale 2026-06-26) — every image+text band * to the SAME width as the Off-Market bands + the Home Meet (≈1153 @1440 / 1297 @1600, * = 90% of the section's gutter-content). About's sections + the Contact page were * built WIDER (≈1283 @1440 / left 71 = 90% of the FULL viewport — they lack the * gutter layer the bands have). Two cases by parent: * • Parent has NO gutter (About cons sit directly in a full-width section) → * bake the gutter in: width = 90% − (2×gutter×0.9) = calc(90% - var(--rr-gutter)1.8). • Parent already has the gutter (Contact row sits inside the page wrapper's * --rr-gutter padding) → a plain width:90% already lands on 1153. * Centred (margin auto); they were already centred at the wide width. =========== / / About · the Meet intro band grid (f1c2e7c) — parent section has no gutter, so use the * gutter-baking calc. DESKTOP ONLY (≥1025): at ≤1024 it stacks and the calc over-narrows, * so leave the stacked width as built. NOTE: the §2 Approach band (1d307441) was here too — * now MIGRATED to .rr-band (owns its width); the dual CTA-cards row (3ad0d7d) MIGRATED to * .rr-cards, which owns its width via `width:90%` (Pattern #5) — removed from this calc so * the class's real gutter isn't double-counted. / @media (min-width: 1025px) { [data-id="f1c2e7c"] { width: calc(90% - var(--rr-gutter) 1.8) !important; max-width: calc(90% - var(--rr-gutter) * 1.8) !important; margin-left: auto !important; margin-right: auto !important; } } /* Contact page · the photo+form 2-col row (d92aae9) sits inside the wrapper's * --rr-gutter padding already → plain 90% = 1153. Desktop only: ≤1024 the photo is * hidden and the form column must stay full gutter-content width. / @media (min-width: 1025px) { [data-id="d92aae9"] { width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; } } / =========================================================================== * FORM SUCCESS / ERROR MESSAGE — all lead forms, site-wide (2026-06-26) * * Problem (Hale): Elementor injects the submit-result message as the last child * of
, default-styled as plain ~15px charcoal text on a TRANSPARENT bg * with only 10px margin — so "Your submission was successful." renders colliding * with / right under the Send-Message button and is easy to miss. Verified on * Local: the message box overlapped the submit by ~15px. * * Fix: ONE rule (every .elementor-form on the site is a lead form) turns the * message into a clear on-brand banner BELOW the button. All 15 form sections * are LIGHT (white / soft-white), so a cream Neutral surface (#E7E2D9) stands * out everywhere with no per-form variant. Separated from the submit by * --rr-space-group so it can't be missed. * · SUCCESS = brand tokens: cream surface · navy text · gold accent bar. * · ERROR = muted editorial brick (#8A2A2A text / #A33A3A bar / #F7EDEC tint). * Red is a FUNCTIONAL-STATE exception (no red token exists) — kept quiet, * not a loud alert red; documented in DESIGN_SYSTEM like the AA exceptions. * Scoped :not(.elementor-help-inline) so per-FIELD inline validation stays small * (only the form-level banner is restyled). Consent/legal copy UNTOUCHED — this * styles form chrome only. * =========================================================================== / / Elementor's form "Rows Gap" puts a NEGATIVE margin-bottom on the fields * wrapper (e.g. -25px in post-N.css) which collapses against the banner's * margin-top → 0 visible gap (the panel touches the button). Zero it ONLY when * a banner message immediately follows (so form spacing is untouched otherwise); * value-independent across forms/breakpoints. :has() is supported site-wide. / .elementor-form .elementor-form-fields-wrapper:has(+ .elementor-message:not(.elementor-help-inline)) { margin-bottom: 0 !important; } .elementor-form .elementor-message:not(.elementor-help-inline) { display: block; clear: both; width: 100%; box-sizing: border-box; margin: var(--rr-space-group) 0 0 !important; padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px); background-color: #E7E2D9; / Neutral cream surface / border-left: 4px solid #C9A875; / champagne-gold accent (success default) / color: #0A1F3B; / Navy text / font-family: inherit; / Inter, from the form / font-size: var(--rr-text-body) !important; line-height: 1.55; font-weight: 500 !important; text-align: left !important; } / Elementor's default ::before is an eicons checkmark glyph that isn't loaded on * the front-end → renders as a tofu box. Drop it; the gold/red bar is the signal. / .elementor-form .elementor-message:not(.elementor-help-inline)::before { content: none !important; } .elementor-form .elementor-message.elementor-message-success:not(.elementor-help-inline) { background-color: #E7E2D9 !important; border-left-color: #C9A875 !important; color: #0A1F3B !important; } .elementor-form .elementor-message.elementor-message-danger:not(.elementor-help-inline) { background-color: #F7EDEC !important; / faint warm tint — functional-state exception / border-left-color: #A33A3A !important; color: #8A2A2A !important; } / =========================================================================== * A11Y heading-order — footer column-heading tag lock (2026-06-26) * * The footer "Explore"/"Contact" column headings were
sitting after the * page's content
— a 2→6 skip Lighthouse flagged (a11y 99). Changed to *
in the shared footer template (post 360, all 6 desktop+responsive * variants) so the heading outline descends cleanly (…H2, H2, H3, H3). *
would otherwise inherit the kit's Cormorant H3 typography and balloon, * so re-assert the ORIGINAL Accent/label look here (Inter 600 · 16px · 0.04em · * UPPERCASE · lh 24). ZERO visual change is the goal — pure a11y/semantics. * Scoped to footer heading widgets (the only headings in the footer are these * columns). Pairs with the Elementor `header_size` edit; see BUILD_LOG/lessons * 2026-06-26. Colour stays the widget's own (soft-white) — tag-independent. / [data-elementor-type="footer"] .elementor-widget-heading .elementor-heading-title, .elementor-location-footer .elementor-widget-heading .elementor-heading-title { font-family: "Inter", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; letter-spacing: 0.64px !important; / 0.04em @16px — the H6/Accent role / text-transform: uppercase !important; } / =========================================================================== * Footer BeachesMLS (BMLS) logo (2026-06-28) — inverted/white version on the navy * footer, grouped above the REALTOR®/EHO marks (added as an image widget to all 3 * footer responsive variants). Sized modest + centred so it isn't more prominent * than the RR brand logo (per BeachesMLS logo-usage guidelines: horizontal only, * clear space, not more prominent than your own mark). Targeted BY SRC so one rule * covers all 3 variants. ⚠ MLS-compliance asset (R&R 2025 §20.3.6) — see COMPLIANCE.md. / / Placed INLINE in the affiliation row with the REALTOR®/EHO marks (moved into the row * in all 3 variants 2026-06-28), evenly spaced + centred. ROOT CAUSE of the earlier * uneven gaps: the badge imgs were tied to `max-width:32%` of their widget (post-360.css) * → circular sizing, so the widgets never hugged (stuck ~150px with the badges floating). * Fix: untie the imgs (max-width:none) + give each a definite size, hug each widget to its * graphic, then one even flex gap + justify-center spaces them. / / untie every logo img from the %-of-widget width + let it define its widget box / [data-id="9f1b680"] .elementor-widget-image img, [data-id="7ad05d25"] .elementor-widget-image img, [data-id="27b1e292"] .elementor-widget-image img { max-width: none !important; display: block !important; margin-left: auto !important; / centre the block img (matters on mobile when BeachesMLS takes a full line) / margin-right: auto !important; } / the two square badges → fixed 48px / [data-id="9f1b680"] .elementor-widget-image:not(:has(img[src="beachesmls"])) img, [data-id="7ad05d25"] .elementor-widget-image:not(:has(img[src="beachesmls"])) img, [data-id="27b1e292"] .elementor-widget-image:not(:has(img[src="beachesmls"])) img { width: 48px !important; height: 48px !important; } /* the BeachesMLS wordmark → height-matched ~44px (aspect intact; vw cap = mobile safety, * non-circular unlike a %-of-widget cap) / [data-elementor-type="footer"] img[src="beachesmls-logo-inverted"], .elementor-location-footer img[src="beachesmls-logo-inverted"] { max-height: 44px !important; width: auto !important; height: auto !important; max-width: 86vw !important; } / hug each widget to its graphic so the flex gap is the ONLY space between logos / [data-id="9f1b680"] .elementor-widget-image, [data-id="7ad05d25"] .elementor-widget-image, [data-id="27b1e292"] .elementor-widget-image { width: fit-content !important; flex: 0 0 auto !important; } / the row: centred, even 28px gaps, wraps on narrow screens / [data-id="9f1b680"], [data-id="7ad05d25"], [data-id="27b1e292"] { flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 28px !important; } / Mobile: the wide wordmark + two badges can't share one line → give BeachesMLS its own * centred line so the two badges pair together below it (no orphaned EHO). / @media (max-width: 767px) { [data-id="9f1b680"] .elementor-widget-image:has(img[src="beachesmls-logo-inverted"]), [data-id="7ad05d25"] .elementor-widget-image:has(img[src="beachesmls-logo-inverted"]), [data-id="27b1e292"] .elementor-widget-image:has(img[src="beachesmls-logo-inverted"]) { flex-basis: 100% !important; } } /* Footer Contact column — office blocks need consistent paragraph spacing across * breakpoints. The desktop variant had p{margin-bottom:16px}; the tablet + mobile * variants (7af585ed / 247dd01f) rendered 0 → the Ocala & Palm Beach office blocks * touched with no gap (Hale 2026-06-28). Lock 16px on all 3 contact-text variants. / [data-id="547e6b34"] p, [data-id="7af585ed"] p, [data-id="247dd01f"] p { margin-bottom: 16px !important; } / =========================================================================== * GLOBAL SECTION PATTERN #1 — CONTACT CTA (.rr-contact-cta) 2026-07-02 * * THE design-system standardization move (Hale): each section pattern becomes * ONE class-based ruleset + ONE saved Elementor template, replacing the * per-page data-id blocks that let pages drift (and left new template inserts * unstyled — fresh IDs never matched the ID-keyed CSS; see lessons.md). * * Canonical values = Home's Contact (391c8d2c), the audited 2026-06-25 design * (1080 section · 880 intro/form · section-token padding · eyebrow/H2/body * roles · navy eyebrow + full-phrase gold underline on light). * * CONTRACT (set in Elementor → Advanced → CSS Classes): * container : rr-contact-cta * + rr-contact-cta--flush-top (same-colour boundary above) * + rr-contact-cta--flush-bottom (same-colour boundary below) * widgets : rr-cta-eyebrow · rr-cta-title · rr-cta-intro · rr-cta-form * spacers : rr-cta-sp-0 (top/bottom) · rr-cta-sp-tight (eyebrow→title, * title→intro) · rr-cta-sp-group (intro→form) * Eyebrow/title/intro TEXT stays per-page (editable in Elementor); everything * visual comes from here. Instances: Home · Buy · Sell · Invest · About · * Ocala · Insights templates. (Private Consultation = distinct pattern, NOT * on this class — Hale 2026-07-02.) * * ⚠ COMPLIANCE: form field/label/consent rules below resize TYPE ONLY (14px * fields / 13px consent fine-print, legible = TCPA-conspicuous); consent * WORDING is never touched here. * =========================================================================== / / --- the section container ------------------------------------------------ / .rr-contact-cta { width: min(1080px, 100%) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; / keep the container's native 20px flex gap: small token spacers compound * with it (20 + spacer + 20) to land the ~57px About-family major gaps / padding-top: var(--rr-space-section) !important; padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } / same-colour-boundary modifiers (2026-06-26 rule): where the adjacent section * shares the background, compress this edge section→block so the seam doesn't * double up (Invest = flush-top, About = flush-bottom today). / .rr-contact-cta.rr-contact-cta--flush-top { padding-top: var(--rr-space-block) !important; } .rr-contact-cta.rr-contact-cta--flush-bottom { padding-bottom: var(--rr-space-block) !important; } / --- spacers (rhythm) -------------------------------------------------------- * Standalone (no .rr-contact-cta ancestor required) so an out-of-container * spacer — e.g. Sell's wrapper-level 2e4e6af — can use them too. / .rr-cta-sp-0 .elementor-spacer-inner { height: 0 !important; } .rr-cta-sp-tight .elementor-spacer-inner { height: var(--rr-space-tight) !important; } .rr-cta-sp-group .elementor-spacer-inner { height: var(--rr-space-group) !important; } / site-wide "hide on tablet" spacer flag protection (recurring build bug): * a hidden rhythm spacer silently collapses the heading gaps on ONE breakpoint / .rr-cta-sp-0.elementor-element, .rr-cta-sp-tight.elementor-element, .rr-cta-sp-group.elementor-element { display: block !important; } / --- heading group: centred, full-width, no stray widget margins ------------- * (width + text-align forced so the group can't fall left on mobile — the * About-page lesson, 2026-06-26) / .rr-contact-cta .rr-cta-eyebrow, .rr-contact-cta .rr-cta-title, .rr-contact-cta .rr-cta-intro { width: 100% !important; } .rr-contact-cta .rr-cta-eyebrow, .rr-contact-cta .rr-cta-title { margin-bottom: 0 !important; } .rr-contact-cta .rr-cta-title .elementor-heading-title, .rr-contact-cta .rr-cta-intro, .rr-contact-cta .rr-cta-intro p { text-align: center !important; } / --- eyebrow role (light section → navy text + full-phrase gold underline) - / .rr-contact-cta .rr-cta-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; color: #0A1F3B !important; / shrink-wrap so the underline spans the phrase; block (not inline-block) * + margin:auto = centred, following the pattern's centred layout / width: -moz-fit-content !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } .rr-contact-cta .rr-cta-eyebrow .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / --- title role (H2) -------------------------------------------------------- / .rr-contact-cta .rr-cta-title .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; } / --- intro role (optional) -------------------------------------------------- / .rr-contact-cta .rr-cta-intro { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; } .rr-contact-cta .rr-cta-intro, .rr-contact-cta .rr-cta-intro p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } / --- form role -------------------------------------------------------------- * intro + form share the 880 measure (fields ~430, usable) / .rr-contact-cta .rr-cta-form { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; } .rr-contact-cta .rr-cta-form .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } / form text sizing — type only, wording untouched (see compliance note above) / .rr-contact-cta .rr-cta-form .elementor-field-textual, .rr-contact-cta .rr-cta-form .elementor-field-label { font-size: 14px !important; } .rr-contact-cta .rr-cta-form .elementor-field-type-acceptance, .rr-contact-cta .rr-cta-form .elementor-field-type-acceptance label, .rr-contact-cta .rr-cta-form .elementor-field-type-html { font-size: 13px !important; line-height: 1.55 !important; } / form internal rhythm on the token scale / .rr-contact-cta .rr-cta-form .elementor-field-group { margin-bottom: var(--rr-space-tight) !important; } .rr-contact-cta .rr-cta-form .elementor-field-group.elementor-field-type-textarea { margin-bottom: var(--rr-space-group) !important; } .rr-contact-cta .rr-cta-form .elementor-field-group.elementor-field-type-html { margin-bottom: 0 !important; } .rr-contact-cta .rr-cta-form .elementor-field-group.elementor-field-type-submit { margin-top: var(--rr-space-group) !important; margin-bottom: 0 !important; } / =========================================================================== * GLOBAL SECTION PATTERN #2 — PHOTO HERO (.rr-hero) 2026-07-02 * * The standardization move (Hale): one class-based ruleset + one saved * Elementor template, replacing the 3 near-identical per-page data-id hero * blocks (Home/Buy/Invest) that had drifted apart AND left the Insights-hub * template insert unstyled (fresh IDs never matched the ID-keyed CSS — the * exact ID-coupling bug, see lessons.md 2026-07-02). * * SCOPE = photo heroes only (Archetype A): Home · Buy · Invest · Insights hub. * (Sell/About intro band, Contact form-hero, Ocala community hero, Insights * article header are each their own pattern — deliberately NOT on this class. * Audit: working/audits/2026-07-02-hero-audit.md.) * * DECISIONS LOCKED WITH HALE (2026-07-02): * • Alignment : base = LEFT + bottom-anchored (Buy/Invest); .rr-hero--center * for Home's grand centred/vertically-centred brand statement. * • Min-height : FIXED editorial 720 / 600 / 540 (d/t/m) — NOT 100vh. * • Overlay : ONE flat black 0.18 at every size (photo stays bright; the * text-shadow halo carries legibility). Class OWNS the overlay. * • Subhead : two role classes — rr-hero-lead (Inter 19, Home/Buy) AND * rr-hero-subhead (Cormorant 22-26) + optional rr-hero-body * (Invest). Each page uses what its copy needs. * • CTA row : button-role sizing · 50px gap → 16px stacked ≤767. * * CONTRACT (set in Elementor → Advanced → CSS Classes): * section : rr-hero (+ rr-hero--center for Home) * inner con : rr-hero-inner (kills any inner scrim/panel + gap) * widgets : rr-hero-eyebrow · rr-hero-title · rr-hero-lead | * rr-hero-subhead (+ rr-hero-body) · rr-hero-cta * spacers : rr-hero-sp-0 (neutralise the old composition spacers; * rhythm is carried by role-class margins, * so there are NO rhythm spacers to hide-on- * tablet — the recurring build bug can't bite) * Eyebrow/title/subhead TEXT stays per-page editable; all visual comes here. * =========================================================================== / / --- the section: full-bleed photo stage, fixed editorial height ----------- / .rr-hero { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; / base = bottom-anchored (Buy/Invest) / align-items: flex-start !important; / base = left / text-align: left !important; min-height: 720px !important; padding-top: var(--rr-space-block) !important; padding-bottom: var(--rr-space-block) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; / the background PHOTO stays per-page (Elementor container bg). / } / class OWNS the overlay: one flat 0.18 black over the photo, every size. * Heroes render Elementor's overlay as a container ::before — set its colour + * opacity here so a fresh template insert gets 0.18 regardless of its stored * overlay value (Insights hub shipped a raw 0.30 that never got overridden). / .rr-hero::before { background-color: #000 !important; opacity: 0.18 !important; } @media (max-width: 1024px) { .rr-hero { min-height: 600px !important; } } @media (max-width: 767px) { .rr-hero { min-height: 540px !important; } } / centre variant (Home): grand centred brand statement, vertically centred / .rr-hero.rr-hero--center { justify-content: center !important; align-items: center !important; text-align: center !important; } / inner content wrapper: no gap (role margins carry rhythm) + nuke any inner * scrim/dark panel (Home's radial gradient con + Buy/Invest's rgba(0,0,0,.3) * panel behind the text — all removed so the photo reads uniform). / .rr-hero-inner, .rr-hero-inner > .e-con-inner { / boxed inner (Home): the flex gap lives on .e-con-inner / gap: 0 !important; } .rr-hero-inner { background-color: transparent !important; background-image: none !important; } / keep the centred variant's inner column centred + its text centred / .rr-hero--center .rr-hero-inner, .rr-hero--center .rr-hero-inner > .e-con-inner { align-items: center !important; } / --- composition spacer neutraliser (see contract note) -------------------- / .rr-hero-sp-0 .elementor-spacer-inner { height: 0 !important; } .rr-hero-sp-0.elementor-element { display: block !important; } / hide-on-tablet guard / / --- shared: all hero text is soft-white with the halo, follows alignment -- / .rr-hero-eyebrow .elementor-heading-title, .rr-hero-title .elementor-heading-title, .rr-hero-lead, .rr-hero-lead p, .rr-hero-subhead .elementor-heading-title, .rr-hero-body, .rr-hero-body p { color: #FAFAF7 !important; text-shadow: var(--rr-hero-text-shadow) !important; } / alignment follows the variant (base left; centre variant centres text) / .rr-hero .rr-hero-eyebrow .elementor-heading-title, .rr-hero .rr-hero-title .elementor-heading-title, .rr-hero .rr-hero-subhead .elementor-heading-title, .rr-hero .rr-hero-lead, .rr-hero .rr-hero-lead p, .rr-hero .rr-hero-body, .rr-hero .rr-hero-body p { text-align: left !important; } .rr-hero--center .rr-hero-eyebrow .elementor-heading-title, .rr-hero--center .rr-hero-title .elementor-heading-title, .rr-hero--center .rr-hero-subhead .elementor-heading-title, .rr-hero--center .rr-hero-lead, .rr-hero--center .rr-hero-lead p, .rr-hero--center .rr-hero-body, .rr-hero--center .rr-hero-body p { text-align: center !important; } / zero each role widget's OWN Elementor per-widget margins so the rhythm is * defined PURELY by the role margin-tops below (else a stray widget margin- * bottom compounds the gap — the About-§1 lesson; Home's eyebrow shipped +20). / .rr-hero-eyebrow, .rr-hero-title, .rr-hero-lead, .rr-hero-subhead, .rr-hero-body { margin-bottom: 0 !important; } / --- eyebrow role (soft-white on photo — NO gold underline here) ----------- / .rr-hero-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; margin: 0 !important; } / --- title role (display H1) ----------------------------------------------- / .rr-hero-title { margin-top: 40px !important; } / eyebrow → title / .rr-hero-title .elementor-heading-title { font-size: var(--rr-text-display) !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; margin: 0 !important; } / mobile long-unbreakable-word guard (Invest's "OPPORTUNITIES" — baked in for * every hero so a long H1 word can never clip the mobile column). / @media (max-width: 767px) { .rr-hero-title .elementor-heading-title { font-size: clamp(30px, 8.2vw, 40px) !important; letter-spacing: 0.04em !important; } } / --- lead subhead role (Inter, Home/Buy) ----------------------------------- / .rr-hero-lead { margin-top: 60px !important; } / title → lead / .rr-hero-lead, .rr-hero-lead p { font-family: "Inter", sans-serif !important; font-size: var(--rr-text-lead) !important; line-height: 1.55 !important; font-weight: 400 !important; } / --- serif subhead role (Cormorant, Invest) -------------------------------- / .rr-hero-subhead { margin-top: 60px !important; } / title → subhead / .rr-hero-subhead .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), "Cormorant Garamond", serif !important; font-size: var(--rr-text-h3) !important; line-height: 1.25 !important; margin: 0 !important; } / --- body role (optional, Invest) ------------------------------------------ / .rr-hero-body { margin-top: 40px !important; } / subhead → body / .rr-hero-body, .rr-hero-body p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } / --- CTA row (1-2 buttons; button-role sizing; stacks on mobile) ----------- / .rr-hero-cta { margin-top: 60px !important; gap: 50px !important; } @media (max-width: 767px) { .rr-hero-cta { gap: 16px !important; } } .rr-hero-cta .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } / =========================================================================== * GLOBAL SECTION PATTERN #3 — IMAGE + TEXT BAND (.rr-band) 2026-07-02 * * The standardization move (Hale): one class-based ruleset + one saved * Elementor template, replacing the NINE near-identical per-page data-id band * blocks (Home Meet · Buy Off-Market · Sell ×2 · Invest ×4 · About Approach) * that had drifted apart (banner heights, column splits, 4 different width * formulas) and would have left a template insert unstyled (fresh IDs never * match ID-keyed CSS — the ID-coupling bug, lessons.md 2026-07-02). * * SCOPE = the simple 2-col image+text row only (9 bands). The "intro bands" * (Sell §1 / About §1 — full-width eyebrow+H1 header ABOVE a 2-col row, a CSS * grid + display:contents superset) are a SEPARATE future pattern (Hale Q1, * 2026-07-02). Audit: working/audits/2026-07-02-image-text-band-audit.md. * * DECISIONS LOCKED WITH HALE (2026-07-02): * • Background : base = LIGHT (page bg shows through); .rr-band--navy flips to * a 100vw full-bleed navy + soft-white text + gold eyebrow. * • Image side : base = image-RIGHT (text-left); .rr-band--img-left flips it. * Done via flex `order` on the columns, so DOM order is free. * • Mobile stack: image banner FIRST always (uniform ≤1024, both sides). * • Banner ht : clamp(300px, 42vw, 440px) when stacked. * • CTA : one optional button-role slot (rr-band-cta). * • Width : inner row width:90% of the gutter-content → 1153 @1440 / * 1297 @1600 (pure %, scales; matches the hero). Folds in the * old IMAGE+TEXT WIDTH CONSISTENCY block's two-case math. * • Columns : exact 50/50 (flex:1 1 0), 50px gap. * * CONTRACT (set in Elementor → Advanced → CSS Classes): * section : rr-band (+ rr-band--navy, + rr-band--img-left, * + rr-band--flush-top / --flush-bottom) * inner row : rr-band-row (the 2-col flex row; on section=row bands * put BOTH rr-band AND rr-band-row on the * section — the co-located rule auto-adjusts * the width math + drops the self-gutter) * columns : rr-band-text · rr-band-media * image wgt : rr-band-img * widgets : rr-band-eyebrow (opt) · rr-band-title (H2) · rr-band-body * · rr-band-cta (opt, button) * Eyebrow/title/body/CTA TEXT stays per-page editable; all visual comes here. * Rhythm = pure role-margins (no rhythm spacers → the hide-on-tablet bug can't * bite); any composition spacers inside the columns are auto-zeroed below. * * ⚠ COMPLIANCE: none here (bands carry no forms/consent). Type/colour only. * =========================================================================== / / --- the section: vertical rhythm + the gutter layer + light base ---------- / .rr-band { position: relative !important; width: 100% !important; / full-width section → the gutter + row:90% land the max-width: 100% !important; row at 1153@1440 (some light sections shipped a narrower stored width; the co-located section=row rule below overrides this for Home/Sell-b128f58). / padding-top: var(--rr-space-section) !important; padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; / base = LIGHT: no bg → the page soft-white shows through (safe failure). / } / same-colour-boundary modifiers (mirror the CTA pattern): compress a seam where * a band meets a same-colour neighbour so the padding doesn't double up. / .rr-band.rr-band--flush-top { padding-top: var(--rr-space-block) !important; } .rr-band.rr-band--flush-bottom { padding-bottom: var(--rr-space-block) !important; } / force the section full-width — some (light) sections shipped a stored Elementor * max-width:90%/boxed content (1283 not 1425), which made the row's 90% land at 1025 * instead of 1153. Double class (0,2,0) beats .elementor-element-{id}. Placed BEFORE * the co-located section=row rule so that (also 0,2,0, later) still wins for the * Home / Sell-"How Simple" bands. / .rr-band.rr-band { width: 100% !important; max-width: 100% !important; } / navy variant — a 100vw full-bleed navy behind the content, edge-to-edge at * every section width (body{overflow-x:hidden} clips the bleed → no h-scroll, * the proven Sell §4 mechanism). Content is lifted above the ::before. / .rr-band--navy::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; margin-left: -50vw !important; background-color: #0A1F3B !important; z-index: 0 !important; } .rr-band--navy > { position: relative !important; z-index: 1 !important; } /* background hygiene (folds in the D5 "recolor touches 3 layers" mess): * light bands → force the section + row + cols transparent so the page bg * shows (Sell "Why Sellers" had stray navy on the section + 2 inner cons); * navy bands → clear any stray light panel on the row/cols so the ::before * navy reads uniform (Sell "How Simple" text col shipped a soft-white block). * The image is an inside .rr-band-media, never a col background, so this is * safe for the photo. / .rr-band:not(.rr-band--navy), .rr-band:not(.rr-band--navy) .rr-band-row, .rr-band:not(.rr-band--navy) .rr-band-text, .rr-band:not(.rr-band--navy) .rr-band-media, .rr-band--navy .rr-band-row, .rr-band--navy .rr-band-text, .rr-band--navy .rr-band-media { background-color: transparent !important; background-image: none !important; } / --- the inner row: 90% width, centred, 50/50 flex, image-side via order ---- / .rr-band-row { display: flex !important; flex-direction: row !important; align-items: stretch !important; / equal-height columns → image fills / gap: 50px !important; width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; / drop the inner con's default ~10px so the / padding-right: 0 !important; / columns span the full 90% content (1153@1440) / } / section=row bands (Home Meet, Sell b128f58 — the 2 columns are DIRECT children * of the section, no inner row con). Both classes land on one element → it can't * be full-width-with-gutter AND 90%-centred, so use the single-layer width math * (0.9 × (100% − 2·gutter) = calc(90% − gutter·1.8)) and drop the self-gutter. * This is exactly the old width-consistency two-case formula, now folded in. / .rr-band.rr-band-row { width: calc(90% - var(--rr-gutter) 1.8) !important; max-width: calc(90% - var(--rr-gutter) * 1.8) !important; padding-left: 0 !important; padding-right: 0 !important; } /* columns: exact 50/50 (gap splits the remainder); min-width:0 prevents overflow. * padding-inline:0 is LOAD-BEARING — a border-box flex item with flex-basis:0 can't * shrink below its own padding, so a col with 10px side-padding renders 20px wider * than a zero-padded sibling (the 531/551 drift). Zeroing both → true 50/50, and the * image/text fill their columns edge-to-edge. / .rr-band-text, .rr-band-media { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; / all sides: side-pad → 50/50 (above); top/bottom pad → image fills the FULL column height / } / text vertically centred against the image panel (the Buy Off-Market balance); * the text col is a flex column, so this is its main-axis alignment. / .rr-band-text { justify-content: center !important; } / ZERO the text column's flex gap — the rhythm is carried purely by the role * margin-tops below (eyebrow→title & title→body = --rr-space-major ≈ 57). Without * this, the col's native 20px flex gap COMPOUNDS with the role margin across the * zeroed composition spacers (57 + 20 + 20 = 97 — too airy; Hale 2026-07-05). Any * untagged in-flow element (e.g. Home's kept "Read More" link) then needs its own * margin — set per-instance. / .rr-band-text { gap: 0 !important; } / image side (desktop): base = text left / image right; --img-left flips. Order * overrides DOM, so an instance's real column order doesn't matter. / .rr-band-text { order: 1 !important; } .rr-band-media { order: 2 !important; } .rr-band--img-left .rr-band-text { order: 2 !important; } .rr-band--img-left .rr-band-media { order: 1 !important; } / media column → the image fills it as a full-height cover panel (Buy/Invest * mechanism EXACTLY: align-self:stretch on the COLUMN — NOT height:100%, which * cancels stretch — then height:100% only on the image widget + img). / .rr-band-media { align-self: stretch !important; gap: 0 !important; } .rr-band-img { padding: 0 !important; } / kill any widget inset (Sell §5 lesson) / .rr-band-img, .rr-band-img .elementor-widget-container { height: 100% !important; } .rr-band-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } / auto-zero any composition spacers living inside the band columns — rhythm is * pure role-margin, so no band spacer is ever load-bearing (kills the recurring * hide-on-tablet spacer bug by construction; no per-spacer class needed). / .rr-band-text .elementor-widget-spacer .elementor-spacer-inner, .rr-band-media .elementor-widget-spacer .elementor-spacer-inner { height: 0 !important; } / re-assert Elementor's responsive hiding — the class's `display:flex !important` on * .rr-band-row OVERRIDES `elementor-hidden-{mobile,tablet}` (equal 0,1,0 specificity), * which made Home's desktop band render alongside its mobile variant = duplicate (the * About §1 lesson). Double-class (0,2,0) + !important re-wins the hide at each breakpoint. / @media (max-width: 767px) { .rr-band.elementor-hidden-mobile, .rr-band-row.elementor-hidden-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .rr-band.elementor-hidden-tablet, .rr-band-row.elementor-hidden-tablet { display: none !important; } } @media (min-width: 1025px) { .rr-band.elementor-hidden-desktop, .rr-band-row.elementor-hidden-desktop { display: none !important; } } / --- mobile / tablet stack (≤1024): single column, image banner FIRST ------- / @media (max-width: 1024px) { .rr-band-row { flex-direction: column !important; } .rr-band-text, .rr-band-media { width: 100% !important; max-width: 100% !important; } .rr-band-text { order: 2 !important; } / text below … / .rr-band-media { order: 1 !important; } / … image banner on top, every band / .rr-band-img, .rr-band-img .elementor-widget-container { height: auto !important; } .rr-band-img img { width: 100% !important; height: clamp(300px, 42vw, 440px) !important; } } / --- type roles ------------------------------------------------------------- / / everything left-aligned (bands are editorial left; overrides stray per-widget centre) / .rr-band-text .rr-band-eyebrow .elementor-heading-title, .rr-band-text .rr-band-title .elementor-heading-title, .rr-band-text .rr-band-body, .rr-band-text .rr-band-body p { text-align: left !important; } / eyebrow (optional) / .rr-band-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; margin: 0 !important; } / light section → navy eyebrow text + full-phrase gold underline (the light-bg * contrast treatment; block+fit-content keeps it left under the H2). / .rr-band:not(.rr-band--navy) .rr-band-eyebrow .elementor-heading-title { color: #0A1F3B !important; width: -moz-fit-content !important; width: fit-content !important; } .rr-band:not(.rr-band--navy) .rr-band-eyebrow .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / navy section → gold eyebrow text (already passes AA at 7.34:1; no underline). / .rr-band--navy .rr-band-eyebrow .elementor-heading-title { color: #C9A875 !important; } / title (H2) / .rr-band-title .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; margin: 0 !important; } .rr-band .rr-band-title .elementor-heading-title { color: #0A1F3B !important; } / light base / .rr-band--navy .rr-band-title .elementor-heading-title { color: #FAFAF7 !important; } / navy / / body / .rr-band-body, .rr-band-body p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } .rr-band .rr-band-body, .rr-band .rr-band-body p { color: #1F2428 !important; } / charcoal on light / .rr-band--navy .rr-band-body, .rr-band--navy .rr-band-body p { color: #FAFAF7 !important; } / soft-white on navy / / --- rhythm: pure role-margins (zero all first, then add the tokenised gaps) - * margin lives on the FOLLOWING element so a missing eyebrow/CTA leaves no gap: * eyebrow →(mb major)→ title →(body mt major)→ body →(cta mt group)→ cta / .rr-band-eyebrow, .rr-band-title, .rr-band-body, .rr-band-cta { margin-top: 0 !important; margin-bottom: 0 !important; } .rr-band-eyebrow { margin-bottom: var(--rr-space-major) !important; } / only present if eyebrow exists / .rr-band-body { margin-top: var(--rr-space-major) !important; } / title → body / .rr-band-cta { margin-top: var(--rr-space-group) !important; } / body → CTA / / --- CTA (optional, button role) ------------------------------------------- / .rr-band-cta .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } / =========================================================================== * GLOBAL SECTION PATTERN — INSIGHTS MAGAZINE (.rr-ins-) 2026-07-05 * Brings the Market Intelligence hub (Archive 853) + category archives * (Archive 1151) onto the design system — the July-2/05 build styled the loop * widgets per-widget (the §3.5 --rr-* tokens are keyed to main-page data-ids * and DON'T attach to loop items, so cards rendered flat 16px on a 20px flex * gap). This class layer replaces that ad-hoc styling with role tokens, the * navy + full-phrase gold-underline eyebrow (light bg, same mechanism as * .rr-cta-eyebrow), and the --rr-space token rhythm. * * CONTRACT (Elementor → Advanced → CSS Classes): * containers : rr-ins-band · rr-ins-nav-wrap · rr-ins-featured · rr-ins-card * · rr-ins-explore * widgets : rr-ins-nav · rr-ins-eyebrow (+ rr-ins-section-eyebrow for the * LATEST/MORE labels) · rr-ins-title-h2 · rr-ins-card-title * · rr-ins-meta (+ rr-ins-card-cat / rr-ins-card-date) * · rr-ins-body (+ rr-ins-featured-excerpt) · rr-ins-links * · rr-ins-featured-grid · rr-ins-card-grid (+ rr-ins-cat-grid) * Hero + Contact CTA stay on .rr-hero / .rr-contact-cta. Text stays per-page. * ⚠ Coupled to loop-item templates 866 (card) + 1112 (featured); re-verify if * a template is rebuilt. Instances measured 1440/820/390 on hub + a category. * =========================================================================== / / --- content band: kill the 20px flex gap, drive rhythm with role margins -- / .rr-ins-band > .e-con-inner { gap: 0 !important; } .rr-ins-band { padding-top: var(--rr-space-block) !important; / hero → first content / padding-bottom: 0 !important; / SEO block → CTA owns the seam / } / band-child vertical rhythm (margin on the FOLLOWING element) / .rr-ins-nav-wrap { margin-top: 0 !important; } .rr-ins-section-eyebrow { margin-top: var(--rr-space-block) !important; } / nav→LATEST, featured→MORE / .rr-ins-featured-grid, .rr-ins-card-grid { margin-top: var(--rr-space-major) !important; } / eyebrow → its content / .rr-ins-cat-grid { margin-top: var(--rr-space-block) !important; } / category page: nav → grid (no eyebrow) / .rr-ins-explore { margin-top: var(--rr-space-section) !important; padding-top: 0 !important; } / --- eyebrow role (light bg → navy + full-phrase gold underline) ----------- * same mechanism as .rr-cta-eyebrow; all Insights eyebrows are centred. / .rr-ins-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; font-weight: 600 !important; text-transform: uppercase !important; line-height: 1 !important; color: #0A1F3B !important; width: -moz-fit-content !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } .rr-ins-eyebrow .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / --- featured story (caption-bar, centred) --------------------------------- / .rr-ins-featured, .rr-ins-featured > .e-con-inner { gap: 0 !important; } .rr-ins-featured .rr-ins-eyebrow { margin-top: var(--rr-space-group) !important; } / image → FEATURED / .rr-ins-featured .rr-ins-title-h2 { margin-top: var(--rr-space-group) !important; } / FEATURED → title / .rr-ins-featured .rr-ins-featured-excerpt { margin-top: var(--rr-space-group) !important; } / title → excerpt / .rr-ins-featured .rr-ins-meta { margin-top: var(--rr-space-tight) !important; } / excerpt → date / .rr-ins-featured-excerpt, .rr-ins-featured-excerpt p { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } / --- title role (H2, navy on light) ---------------------------------------- / .rr-ins-title-h2 .elementor-heading-title { font-size: var(--rr-text-h2) !important; letter-spacing: 0.16em !important; line-height: 1.15 !important; text-transform: uppercase !important; color: #0A1F3B !important; } / --- body role ------------------------------------------------------------- / .rr-ins-body, .rr-ins-body p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; color: #1F2428 !important; } / --- meta role (card category/date + featured date) ------------------------ / .rr-ins-meta .elementor-heading-title { font-size: 13px !important; letter-spacing: 0.16em !important; font-weight: 600 !important; text-transform: uppercase !important; line-height: 1.2 !important; } .rr-ins-card-cat .elementor-heading-title { color: #0A1F3B !important; } / category = navy / .rr-ins-card-date .elementor-heading-title, .rr-ins-featured .rr-ins-meta .elementor-heading-title { color: #1F2428 !important; } / dates = charcoal / / --- card (left-aligned, compact rhythm) ----------------------------------- / .rr-ins-card, .rr-ins-card > .e-con-inner { gap: 0 !important; } .rr-ins-card .rr-ins-card-cat { margin-top: var(--rr-space-group) !important; } / image → category / .rr-ins-card .rr-ins-card-title { margin-top: 8px !important; } / category → title / .rr-ins-card .rr-ins-card-date { margin-top: var(--rr-space-tight) !important; } / title → date / .rr-ins-card-title .elementor-heading-title { font-size: clamp(20px, 1.1rem + 0.4vw, 22px) !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #0A1F3B !important; } / --- category nav (refined caps text tabs) --------------------------------- / .rr-ins-nav .elementor-item { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 500 !important; } / --- SEO / explore block --------------------------------------------------- / .rr-ins-explore .rr-ins-body { margin-top: var(--rr-space-major) !important; / EXPLORE → paragraph / max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; } .rr-ins-links { margin-top: var(--rr-space-group) !important; } / paragraph → links / .rr-ins-links a { color: #0A1F3B !important; transition: color .2s ease; } .rr-ins-links a:hover { color: #C9A875 !important; } / =========================================================================== * GLOBAL SECTION PATTERN #4 — CENTERED STATEMENT BAND (.rr-statement) 2026-07-05 * * The standardization move (Hale): one class-based ruleset + one saved * Elementor template, replacing the FOUR near-identical per-page data-id * blocks (Sell §2 · Invest §2 · Invest mid-CTA · Sell valuation strip) that * had drifted apart AND would leave a template insert unstyled (fresh IDs * never match ID-keyed CSS — the ID-coupling bug, lessons.md 2026-07-02). * * The image-less sibling of .rr-band (§3.8): a centred eyebrow → heading → * body (+ optional CTA button) block, no 2-col row / media / image machinery. * Reuses .rr-band's eyebrow-contrast treatment + the --rr-space-major rhythm. * * SCOPE = every centred statement band (4 instances). The centred heading * GROUPS that open a card/image section (Buy/Sell "Our Approach", Invest "Why * Palm Beach") are welded to their grid → they stay part of those sections, * NOT on this class. Audit: working/audits/2026-07-05-statement-band-audit.md. * * DRIFT this fixes (from the audit): * • width: Sell used 90%/1153 (scales to 1297@1600); Invest used a FIXED * 1139px (won't scale — the Invest-v3 lesson, unfixed for statements). * The class puts every instance on width:90%. * • body line-length: Sell §2 capped the body at 820 (readable); Invest §2 * ran the full 1139 (~150-char lines). The class caps at 820 by default. * • Sell valuation shipped hardcoded pure-white text (255,255,255) instead * of the #FAFAF7 soft-white token → unified here. * • Invest mid-CTA body→button was 57 (major); standardised to group (36), * matching .rr-band-cta. * * DECISIONS LOCKED WITH HALE (2026-07-05): * • Architecture : dedicated .rr-statement (not a .rr-band variant). * • Background : base = LIGHT (page bg shows); .rr-statement--navy flips to * navy bg + soft-white text + gold eyebrow. Sections are * already full-viewport-width → plain bg, NO 100vw ::before * (unlike the narrower bands). * • Body width : cap 820 centred (readable) — UNIFORM across all 4 instances, * incl. the two CTA strips (Hale 2026-07-05: they must match). * • Height : --rr-space-section (115@1440) for ALL — one spacing profile. * (A --slim variant was tried on the valuation strip, then * dropped: it made the two CTA strips inconsistent — Hale.) * • CTA : one optional button slot (rr-statement-cta); on navy it is * a solid soft-white button (stands out on the navy). * • Rhythm : pure role-margins, gap:0 on the inner (the 2026-07-05 * band lesson — margins + a nonzero gap double-count). * * CONTRACT (set in Elementor → Advanced → CSS Classes): * section : rr-statement (+ rr-statement--navy, * + rr-statement--flush-top / --flush-bottom) * inner : rr-statement-inner (the 90% width-carrier + centred gap:0 col; * put on the con that holds the widgets — * nested content cols + boxed .e-con-inner * are auto-filled/zeroed below) * widgets : rr-statement-eyebrow (opt) · rr-statement-title (H2) * · rr-statement-body · rr-statement-cta (opt, button) * Eyebrow/title/body/CTA TEXT stays per-page editable; all visual comes here. * * ⚠ COMPLIANCE: none (statement bands carry no forms/consent). Type/colour only. * =========================================================================== / / --- the section: full-width stage, centred content, section-token padding -- / .rr-statement { position: relative !important; width: 100% !important; max-width: 100% !important; padding-top: var(--rr-space-section) !important; padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; / base = LIGHT: no bg → the page soft-white shows through (safe failure). / } / defeat any stored Elementor max-width:90%/boxed content so the section is truly * full-width (the navy bg then reaches both edges without a ::before). Double * class (0,2,0) beats .elementor-element-{id}. Mirrors the .rr-band guard. / .rr-statement.rr-statement { width: 100% !important; max-width: 100% !important; } / boxed statement SECTION (Sell valuation 0a16790): uncap its .e-con-inner so the * gutter padding + inner 90% land the content at 1153 (not the boxed ~1140). / .rr-statement > .e-con-inner { max-width: none !important; width: 100% !important; } / navy variant — full-width navy bg + text/eyebrow flip (below). / .rr-statement--navy { background-color: #0A1F3B !important; } / same-colour-boundary modifiers (parity with .rr-contact-cta / .rr-band). / .rr-statement.rr-statement--flush-top { padding-top: var(--rr-space-block) !important; } .rr-statement.rr-statement--flush-bottom { padding-bottom: var(--rr-space-block) !important; } / --- the inner: 90% width-carrier, centred, gap:0 (role-margins are the rhythm) * width:90% of the gutter-content → 1153 @1440 / 1297 @1600 (scales; matches the * hero + bands). gap:0 is LOAD-BEARING — the rhythm is on the role margins below, * so a nonzero flex gap would double-count across the zeroed spacers (the * 2026-07-05 band lesson: 57 + 20 + 20 = 97). Any nested content col / boxed * .e-con-inner fills the 90% and is zeroed+centred too, so the widgets can live * one layer deeper (Sell §2's 4ceda38, mid-CTA's 53959c16). / .rr-statement-inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; / kill any stray con inset so content fills the 90% / min-height: 0 !important; / valuation strip shipped a tall min-height → empty navy / } / nested content col (Sell §2 4ceda38, mid-CTA 53959c16) + boxed inner (Invest §2 * db967d7 > .e-con-inner): fill the 90% carrier, stay a centred gap:0 column. / .rr-statement-inner .e-con, .rr-statement-inner > .e-con-inner { width: 100% !important; max-width: 100% !important; gap: 0 !important; align-items: center !important; } / auto-zero any composition spacers inside the band — rhythm is pure role-margin, * so no statement spacer is ever load-bearing (kills the recurring hide-on-tablet * spacer bug by construction; no per-spacer class needed). / .rr-statement-inner .elementor-widget-spacer .elementor-spacer-inner { height: 0 !important; } / --- centring guard: force the role widgets full-width + centred so the band * can't fall left on mobile (Elementor makes widgets full-width there — the * Sell §2 gotcha). The eyebrow is the exception: it shrink-wraps for the gold * underline, so it centres via margin:auto instead (below). --------------- / .rr-statement-title, .rr-statement-body { width: 100% !important; } .rr-statement-eyebrow { width: 100% !important; } .rr-statement-title .elementor-heading-title, .rr-statement-body, .rr-statement-body p { text-align: center !important; } / --- eyebrow role (optional) ----------------------------------------------- / .rr-statement-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; margin: 0 !important; text-align: center !important; } / light section → navy eyebrow text + full-phrase gold underline (the light-bg * contrast treatment, shrink-wrapped + centred via margin auto — same as the * .rr-band / .rr-contact-cta eyebrow). / .rr-statement:not(.rr-statement--navy) .rr-statement-eyebrow .elementor-heading-title { color: #0A1F3B !important; width: -moz-fit-content !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } .rr-statement:not(.rr-statement--navy) .rr-statement-eyebrow .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } / navy section → gold eyebrow text (already passes AA at 7.34:1; no underline). / .rr-statement--navy .rr-statement-eyebrow .elementor-heading-title { color: #C9A875 !important; } / --- title role (H2) -------------------------------------------------------- / .rr-statement-title .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; margin: 0 !important; } .rr-statement .rr-statement-title .elementor-heading-title { color: #0A1F3B !important; } / light base / .rr-statement--navy .rr-statement-title .elementor-heading-title { color: #FAFAF7 !important; } / navy / / --- body role ------------------------------------------------------------- * capped at a readable 820 measure, centred (uniform across all instances — * the button strips read consistent with the pure statements; Hale 2026-07-05). / .rr-statement-body { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; } .rr-statement-body, .rr-statement-body p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; } .rr-statement .rr-statement-body, .rr-statement .rr-statement-body p { color: #1F2428 !important; } / charcoal on light / .rr-statement--navy .rr-statement-body, .rr-statement--navy .rr-statement-body p { color: #FAFAF7 !important; } / soft-white on navy / / --- rhythm: pure role-margins (zero all first, then add the tokenised gaps) - * margin lives on the following element so a missing eyebrow/CTA leaves no gap: * eyebrow →(mb major)→ title →(body mt major)→ body →(cta mt group)→ cta / .rr-statement-eyebrow, .rr-statement-title, .rr-statement-body, .rr-statement-cta { margin-top: 0 !important; margin-bottom: 0 !important; } .rr-statement-eyebrow { margin-bottom: var(--rr-space-major) !important; } / eyebrow → title (only if eyebrow exists) / .rr-statement-body { margin-top: var(--rr-space-major) !important; } / title → body / .rr-statement-cta { margin-top: var(--rr-space-group) !important; } / body → CTA / / --- CTA role (optional, button) ------------------------------------------- * The class OWNS the full button typography so every statement CTA is identical * regardless of per-button stored overrides (the two strips had disagreed on * text-transform — one uppercase, one title-case; Hale 2026-07-05). Matches the * site button spec (DESIGN_SYSTEM §4 Accent: Inter · 600 · uppercase · 0.03em). / .rr-statement-cta .elementor-button { font-family: "Inter", sans-serif !important; font-size: var(--rr-text-button) !important; font-weight: 600 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } / on navy → a solid soft-white button (navy text) so the CTA stands out on the * navy band (both current strips use this; class makes a fresh insert correct). / .rr-statement--navy .rr-statement-cta .elementor-button { background-color: #FAFAF7 !important; color: #0A1F3B !important; border-color: #FAFAF7 !important; } / =========================================================================== * SINGLE POST / ARTICLE (.rr-art-) 2026-07-05 The Insights Single Post template (855) — an editorial article layout * adapted from Elliman/Drumelia into our tokens (Hale, 2026-07-05). Header = * category eyebrow (linked, reuses .rr-ins-eyebrow) → CAPS Cormorant title * (fixes the old ~16px H1 — the title now sits on a display-scale token) → * byline ([rr_post_meta] shortcode: person-icon · author · date · reading * time) → wide featured image. Article-body typography lives in .rr-article * (below). ⚠ Coupled to template 855; re-verify if it is rebuilt. * =========================================================================== / / --- header (centred; Elliman title-above-image) -------------------------- / .rr-art-header { width: min(1000px, 100%) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; padding-top: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; text-align: center !important; } .rr-art-header > .e-con-inner { gap: 0 !important; align-items: center !important; } .rr-art-header .rr-ins-eyebrow, .rr-art-header .rr-art-title, .rr-art-header .rr-art-byline, .rr-art-header .rr-art-image { width: 100% !important; } / rhythm (margin on the following element) / .rr-art-title { margin-top: var(--rr-space-major) !important; } / eyebrow → title / .rr-art-byline { margin-top: var(--rr-space-group) !important; } / title → byline / .rr-art-image { margin-top: var(--rr-space-group) !important; } / byline → image / / linked category eyebrow stays navy + no default underline (the gold ::after is the rule) / .rr-art-header .rr-ins-eyebrow a { color: inherit !important; text-decoration: none !important; } / --- title (display-scale CAPS Cormorant navy, centred) ------------------- / .rr-art-title .elementor-heading-title { font-size: clamp(30px, 1.9rem + 1.6vw, 46px) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; line-height: 1.12 !important; color: #0A1F3B !important; text-align: center !important; } / --- byline (person-icon · author · date · reading time; understated meta) - / .rr-art-byline .elementor-shortcode { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; font-size: 13px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #1F2428 !important; line-height: 1 !important; } .rr-byline-icon { flex: 0 0 auto; margin-right: 2px; opacity: 0.85; } / inherits charcoal; stand-in for an avatar / .rr-byline-sep { color: #C9A875; } / gold accent separators / / --- featured image (wide banner, controlled height) ---------------------- / .rr-art-image img { display: block !important; width: 100% !important; height: clamp(300px, 40vw, 540px) !important; object-fit: cover !important; } / --- article body: readable 720 column (theme-post-content in .rr-article) - * Editorial reading experience on our tokens: sentence-case Cormorant subheads * (Hale 2026-07-05), gold-rule blockquote, gold-marker lists, editorial table, * cover-crop inline images. Body container 05481e9 tagged .rr-article. / .rr-article { width: min(720px, 100%) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; margin-top: var(--rr-space-section) !important; / header image → body / } @media (max-width: 767px) { .rr-article { padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } } .rr-article p { font-size: var(--rr-text-body) !important; line-height: 1.8 !important; color: #1F2428 !important; margin: 0 0 1.4em !important; } .rr-article .elementor-widget-container > p:first-child em { opacity: 0.7 !important; } / the placeholder note; harmless on real posts / / in-article subheads: SENTENCE-CASE Cormorant navy / .rr-article h2 { font-family: "Cormorant Garamond", serif !important; font-size: clamp(25px, 1.4rem + 0.7vw, 30px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #0A1F3B !important; margin: var(--rr-space-major) 0 var(--rr-space-tight) !important; } .rr-article h3 { font-family: "Cormorant Garamond", serif !important; font-size: clamp(20px, 1.2rem + 0.4vw, 23px) !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: none !important; color: #0A1F3B !important; margin: var(--rr-space-block) 0 var(--rr-space-tight) !important; } / blockquote: gold-rule pull quote (Cormorant italic) / .rr-article blockquote { margin: var(--rr-space-block) 0 !important; padding: 4px 0 4px 26px !important; border-left: 3px solid #C9A875 !important; } .rr-article blockquote, .rr-article blockquote p { font-family: "Cormorant Garamond", serif !important; font-size: clamp(22px, 1.3rem + 0.6vw, 27px) !important; font-style: italic !important; line-height: 1.4 !important; color: #0A1F3B !important; margin: 0 !important; } / lists (gold markers) / .rr-article ul, .rr-article ol { margin: 0 0 1.4em !important; padding-left: 1.4em !important; font-size: var(--rr-text-body) !important; line-height: 1.8 !important; color: #1F2428 !important; } .rr-article li { margin: 0 0 0.5em !important; } .rr-article ul li::marker { color: #C9A875 !important; } / body links (gold underline) / .rr-article a { color: #0A1F3B !important; text-decoration: underline !important; text-decoration-color: #C9A875 !important; text-underline-offset: 3px !important; } .rr-article a:hover { color: #C9A875 !important; } / inline images (controlled-height banner, cover-crop) / .rr-article figure { margin: var(--rr-space-block) 0 !important; } .rr-article img { display: block !important; width: 100% !important; height: clamp(280px, 40vw, 460px) !important; object-fit: cover !important; } .rr-article figcaption { font-size: 13px !important; color: #1F2428 !important; opacity: 0.65 !important; text-align: center !important; margin-top: 8px !important; } / tables (editorial: navy header rule, cream row borders; scrolls if narrow) / .rr-article figure.wp-block-table { margin: var(--rr-space-block) 0 !important; overflow-x: auto !important; } .rr-article table { width: 100% !important; border-collapse: collapse !important; } .rr-article th, .rr-article td { text-align: left !important; padding: 12px 14px !important; border-bottom: 1px solid #E7E2D9 !important; line-height: 1.5 !important; color: #1F2428 !important; font-size: var(--rr-text-body) !important; } .rr-article th { font-family: Inter, sans-serif !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; color: #0A1F3B !important; border-bottom: 2px solid #0A1F3B !important; } / --- author bio card (horizontal photo | text-block; stacks < 768) --------- / .rr-art-bio { width: min(720px, 100%) !important; max-width: 100% !important; margin: var(--rr-space-block) auto 0 !important; align-self: center !important; padding-top: var(--rr-space-block) !important; border-top: 1px solid #E7E2D9 !important; / divider from the article / } @media (max-width: 767px) { .rr-art-bio { padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } } .rr-art-bio > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 28px !important; width: 100% !important; } .rr-art-bio-photo { flex: 0 0 auto !important; } .rr-art-bio-photo img { width: 96px !important; height: 96px !important; border-radius: 50% !important; object-fit: cover !important; object-position: center 20% !important; display: block !important; } .rr-art-bio-body { flex: 1 1 auto !important; align-items: flex-start !important; text-align: left !important; } .rr-art-bio-body > { width: 100% !important; } .rr-art-bio-name .elementor-heading-title { font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; font-weight: 600 !important; color: #0A1F3B !important; text-align: left !important; margin-bottom: 6px !important; } .rr-art-bio-text, .rr-art-bio-text p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; color: #1F2428 !important; text-align: left !important; margin: 0 !important; } .rr-art-bio-link { margin-top: 14px !important; text-align: left !important; } .rr-art-bio-link .elementor-button { font-size: var(--rr-text-button) !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; } @media (max-width: 767px) { .rr-art-bio > .e-con-inner { flex-direction: column !important; align-items: center !important; text-align: center !important; } .rr-art-bio-body { align-items: center !important; text-align: center !important; } .rr-art-bio-name .elementor-heading-title, .rr-art-bio-text, .rr-art-bio-text p, .rr-art-bio-link { text-align: center !important; } } /* =========================================================================== * GLOBAL SECTION PATTERN #5 — CARD / STEP GRID (.rr-cards) 2026-07-05 * The 5th global template (CTA #1 · Hero #2 · Band #3 · Statement #4 · Cards #5). * One class + optional slots covers TWO content models that share a card grid: * • numbered STEPS (Buy + Sell "Our Approach") — navy cards, gold 01–04 number, * CAPS title, body. 4-up → 2×2 (≤1199) → 1-col (≤767). * • CTA DOORS (About dual "For Sellers / For Buyers") — .rr-cards--doors: * navy cards, eyebrow label, big CAPS title, button. 2-up → 1-col (≤767). * Replaces the per-ID blocks for Buy ea86b09, Sell bhqc2ruqt, About 3ad0d7d and * reconciles their drift (3 ladders → 1, 3 title scales → 2 tokens, 3 gaps → 1, * navy 30/20/72 pad → one profile per model, banner dropped, button type locked). * * NESTING (inspect-first lesson): Buy is section → GRID widget → 4 card cons → * (num::before) title + body. About is a section that IS the flex row (co-locate * rr-cards + rr-cards--doors + rr-cards-grid on the one element) → 2 card cons → * label + title + button. Sell is REBUILT from the saved template (it had flat * widgets, no card wrappers) so it inherits Buy's structure exactly. * * Slots (Elementor → Advanced → CSS Classes; all text stays per-page editable): * section : rr-cards (+ --doors · --flush-top/--flush-bottom seam parity) * header : rr-cards-eyebrow · rr-cards-heading · rr-cards-intro (optional, * centred; reuses the #3/#4 eyebrow-contrast + H2 treatment) * grid : rr-cards-grid (on the grid widget, or co-located for doors) * card : rr-card * rr-card-label (doors eyebrow) · rr-card-title · rr-card-body (steps) * · rr-card-cta (doors button). Step numbers are a CSS counter — no * number widget (auto 01–04, renumbers on reorder; steps only). * =========================================================================== / / --- section --------------------------------------------------------------- / .rr-cards { width: 90% !important; / house width — matches Buy's stored 90%; the * single source so Buy/Sell/doors are identical * (the doors' old calc(90%−gutter·1.8) double- * counted the gutter this class adds → too narrow). / max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; padding-top: var(--rr-space-section) !important; padding-bottom: var(--rr-space-section) !important; padding-left: var(--rr-gutter) !important; padding-right: var(--rr-gutter) !important; } / same-colour seam compression (parity with #1/#3/#4) / .rr-cards.rr-cards--flush-top { padding-top: var(--rr-space-block) !important; } .rr-cards.rr-cards--flush-bottom { padding-bottom: var(--rr-space-block) !important; } / zero the section's own flex gap ONLY when it's the header+grid column (Buy/Sell); * the doors section IS the grid (co-located rr-cards-grid) and keeps the grid gap. / .rr-cards:not(.rr-cards-grid) { gap: 0 !important; } .rr-cards:not(.rr-cards-grid) > .e-con-inner { gap: 0 !important; } / --- optional centred header (eyebrow → heading → intro) -------------------- / .rr-cards-eyebrow, .rr-cards-heading, .rr-cards-intro { width: 100% !important; text-align: center !important; } .rr-cards-eyebrow .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; color: #0A1F3B !important; / light section → navy + gold underline / width: -moz-fit-content !important; width: fit-content !important; margin: 0 auto !important; text-align: center !important; } .rr-cards-eyebrow .elementor-heading-title::after { content: ""; display: block; width: 100%; height: 2px; background: #C9A875; margin-top: 10px; } .rr-cards-heading .elementor-heading-title { font-size: var(--rr-text-h2) !important; line-height: 1.15 !important; letter-spacing: 0.16em !important; color: #0A1F3B !important; margin: 0 !important; text-align: center !important; } .rr-cards-intro, .rr-cards-intro p { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; color: #1F2428 !important; } .rr-cards-intro { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } / header rhythm: pure role-margins (spacers auto-zeroed below). eyebrow→heading→ * intro = major (= #3/#4); intro/header → grid = block. / .rr-cards-eyebrow, .rr-cards-heading, .rr-cards-intro { margin-top: 0 !important; margin-bottom: 0 !important; } .rr-cards-heading { margin-top: var(--rr-space-major) !important; } .rr-cards-intro { margin-top: var(--rr-space-major) !important; } / auto-zero any composition spacers living directly in the section (Buy's header * spacers) — rhythm is pure role-margin, so none is load-bearing (kills the * recurring hide-on-tablet spacer bug by construction). / .rr-cards > .elementor-widget-spacer .elementor-spacer-inner, .rr-cards > .e-con-inner > .elementor-widget-spacer .elementor-spacer-inner { height: 0 !important; } / --- grid ------------------------------------------------------------------ / .rr-cards-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; / steps: 4-up desktop / gap: var(--rr-space-group) !important; width: 100% !important; align-items: stretch !important; / equal-height cards / } .rr-cards:not(.rr-cards--doors) .rr-cards-grid { counter-reset: rr-card; } / step-number source (steps only) / .rr-cards:not(.rr-cards--doors) .rr-cards-grid { margin-top: var(--rr-space-block) !important; } / header → grid / @media (max-width: 1199px) { .rr-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } } / 2×2 (Hale: 4-across cramped <1200) / @media (max-width: 767px) { .rr-cards-grid { grid-template-columns: 1fr !important; } } / 1-col / / doors: 2-up at every size ≥768 (wins over the 4-up base via compound specificity) / .rr-cards--doors.rr-cards-grid, .rr-cards--doors .rr-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } @media (max-width: 767px) { .rr-cards--doors.rr-cards-grid, .rr-cards--doors .rr-cards-grid { grid-template-columns: 1fr !important; } } / re-assert Elementor responsive hiding — display:grid !important would override * elementor-hidden-* (the About-§1 duplicate-content lesson); none is hidden today * but bake the guard so a future hidden card grid can't leak. / @media (max-width: 767px) { .rr-cards.elementor-hidden-mobile, .rr-cards-grid.elementor-hidden-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .rr-cards.elementor-hidden-tablet, .rr-cards-grid.elementor-hidden-tablet { display: none !important; } } @media (min-width: 1025px) { .rr-cards.elementor-hidden-desktop, .rr-cards-grid.elementor-hidden-desktop { display: none !important; } } / --- card ------------------------------------------------------------------ / .rr-card { background-color: #0A1F3B !important; / navy filled (both models) / padding: clamp(24px, 2.6vw, 32px) !important; / steps: compact / text-align: left !important; gap: 0 !important; / rhythm via role-margins / justify-content: flex-start !important; } .rr-cards--doors .rr-card { padding: clamp(28px, 5vw, 72px) !important; } / doors: roomy audience-door inset / / auto-zero any composition spacers inside a card / .rr-card .elementor-widget-spacer .elementor-spacer-inner { height: 0 !important; } / step number — CSS counter (01–04), navy STEPS only (doors excluded). Rendered * on the TITLE heading's ::before (a heading widget's pseudo — avoids Elementor's * own .e-con::before, which collapsed a card-level ::before to zero height). / .rr-cards:not(.rr-cards--doors) .rr-card-title .elementor-heading-title { counter-increment: rr-card; } .rr-cards:not(.rr-cards--doors) .rr-card-title .elementor-heading-title::before { content: counter(rr-card, decimal-leading-zero); display: block; font-family: "Cormorant Garamond", serif; font-size: clamp(28px, 2.4vw, 34px); line-height: 1; letter-spacing: 0.04em; color: #C9A875; margin-bottom: var(--rr-space-tight); } / label (doors eyebrow, soft-white on navy) / .rr-card-label .elementor-heading-title { font-size: var(--rr-text-eyebrow) !important; letter-spacing: 0.28em !important; color: #FAFAF7 !important; margin: 0 !important; text-align: left !important; } / title (heading; inherits the global Cormorant heading font like #3/#4) / .rr-card-title .elementor-heading-title { font-size: var(--rr-text-h3) !important; / steps: 22→26 / line-height: 1.25 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #FAFAF7 !important; margin: 0 !important; text-align: left !important; } .rr-cards--doors .rr-card-title .elementor-heading-title { font-size: var(--rr-text-h2) !important; / doors: 27→36 (wide cards) / letter-spacing: 0.16em !important; } / body (steps) — Buy uses HEADING widgets for the body, Sell (rebuilt) inherits * that; target both heading +
so either widget type renders identically. / .rr-card-body, .rr-card-body p, .rr-card-body .elementor-heading-title { font-size: var(--rr-text-body) !important; line-height: 1.7 !important; color: #FAFAF7 !important; margin: 0 !important; text-align: left !important; font-family: "Inter", sans-serif !important; / de-track: readable sentence-case body / text-transform: none !important; letter-spacing: normal !important; } / CTA (doors button) — class OWNS the full button typography so every door is * byte-identical regardless of per-button stored overrides (migration-completeness * lesson); soft-white button on the navy card (matches the #4 statement CTA). / .rr-card-cta .elementor-button { font-family: "Inter", sans-serif !important; font-size: var(--rr-text-button) !important; font-weight: 600 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; padding: clamp(14px, 1.4vw, 16px) clamp(32px, 3.2vw, 40px) !important; background-color: #FAFAF7 !important; color: #0A1F3B !important; border-color: #FAFAF7 !important; } / --- intra-card rhythm (role-margins; gap:0 above) ------------------------- * * steps: [num::before] →(tight)→ title →(tight)→ body * doors: label →(tight)→ title →(group)→ cta / .rr-card-label, .rr-card-title, .rr-card-body, .rr-card-cta { margin-top: 0 !important; margin-bottom: 0 !important; } .rr-cards--doors .rr-card-title { margin-top: var(--rr-space-tight) !important; } / label → title / .rr-card-body { margin-top: var(--rr-space-tight) !important; } / title → body / .rr-card-cta { margin-top: var(--rr-space-group) !important; } / title → cta / / mobile: keep card content left-aligned + full-width (Elementor makes widgets * full-width there — the Sell §2 gotcha); nothing centres. */ .rr-card-label, .rr-card-title, .rr-card-body, .rr-card-cta { width: 100% !important; }