/* ========================================================================== cire-alignment.css - HOMEPAGE band alignment (ALIGNMENT-SPEC.md V1 / D1) Branch: redesign/featured-islands Created: 2026-08-15 -------------------------------------------------------------------------- Nick, 2026-08-15, with an iPhone screenshot: "Spacing on text like this in mobile should be aligned like the photos. It's much cleaner." THE REFERENCE EDGE IS THE FEATURED ISLANDS TILE EDGE. Every homepage band starts its content on the same vertical line as those tiles: .cire-islands__inner max-width 1400px; margin-inline auto; padding-inline 16 / 24 / 40 / 64 => first content pixel 16px at 375, 84px at 1440 ARCHAEOLOGY - measured, not read. Every number below came from a getBoundingClientRect() probe run inside a TRUE 375px iframe (Chrome clamps a top-level window to 500px on Windows; the viewport was confirmed from inside the document) and at 1440. Left edge of the first content pixel: band 375 before 1440 before after 1 hero headline 15 / 26 319 16 / 84 2 section header ("Newest ...") 116.8 549.7 16 / 84 2 listing card rail 15 65 16 / 84 3 stacked mobile buttons 10 n/a 16 / 84 4 LUXURY HOME SPECIALISTS band 0 203.8 16 / 84 5 FEATURED ISLANDS (REFERENCE) 16 84 unchanged 6 bg-dark text band 0 203.8 16 / 84 7 visual nav 24 100 16 / 84 8 links block 50 100 16 / 84 Six different left edges on one phone screen; six more on the desktop page. WHY THE LUXURY BAND RUNS EDGE TO EDGE (the thing Nick photographed): style.css sets `.text-block { padding: 0 1.875rem }` (30px), but css/cire-luxury.css sets `.home .text-block { padding-left: 0; padding-right: 0 }` at specificity (0,2,0) and beats it. The band is not "nearly" edge-to-edge, it is EXACTLY 0px. Verified by computed style, both on the deployed CSS and on the merge-target CSS. HEAD ORDER ON THIS TEMPLATE (verified, live ): app.css -> cire-luxury.css -> cire-islands.css -> block-library -> email-encoder -> style.css -> magnific-popup-client -> market-watch style.css (hand-written, handle `style`) prints AFTER the redesign layer, so this file declares deps [ cire-islands, style ] and prints after both. A sheet without those dependencies prints first and silently no-ops. Every rule here also wins on SPECIFICITY, not only on order: cire-luxury.css is full of (0,2,0) `.home .thing` rules that outweigh a one-class override (this is what made two earlier fixes fail on this site). SCOPE: every rule is scoped either to `.home` (sections 0-8) or to `.single-mrt_community` (section 9). Nothing here can reach a third template. The sheet is enqueued from front-page.php AND from single-mrt_community.php, each with the dependency list that template needs - the head order is NOT the same on the two: home : app.css -> cire-luxury -> cire-islands -> style.css neighbourhood detail: style.css -> app.css -> cire-luxury ========================================================================== */ /* -------------------------------------------------------------------------- 0 THE CONTAINER TOKENS (ALIGNMENT-SPEC D1, same numbers as cire-islands) -------------------------------------------------------------------------- */ .home { --cire-inset: 16px; --cire-measure: 1400px; } @media (min-width: 729px) { .home { --cire-inset: 24px; } } @media (min-width: 1024px) { .home { --cire-inset: 40px; } } @media (min-width: 1366px) { .home { --cire-inset: 64px; } } /* -------------------------------------------------------------------------- 1 HERO The hero overlay carried its own 16px padding, the Foundation .row inside it carried -15px side margins (that is the 15px overflow at 375), the .columns added 10px and the h1 another 16px. Four spacing mechanisms, one edge. One container now owns the inset; the group's vertical/optical centring (cire-luxury section 36) is deliberately left alone. -------------------------------------------------------------------------- */ .home .home-hero-slider-words { padding-inline: 0; } .home .home-hero-slider-words .row { width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: var(--cire-inset); } .home .home-hero-slider-words .columns { padding-inline: 0; } .home .home-hero-slider-words .hp-hero-header__content { padding-inline: 0; } .home .home-hero-slider-words .hp-hero-header__header { padding-inline: 0; } /* -------------------------------------------------------------------------- 2 FEATURED LISTINGS - SECTION HEADERS .page-section-header is a flex container, so its .row child was shrink-to- fit with `margin: 0 auto` - i.e. the section title was CENTRED on mobile, 116.8px from the edge. style.css also indents .col-title by a bare 200px above 1000px, which is what put the desktop title at 549.7px. -------------------------------------------------------------------------- */ .home #homepage-featured .page-section-header > .row, .home #homepage-featured .front-page-stacked-buttons > .row { flex: 1 1 100%; width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: var(--cire-inset); } .home #homepage-featured .page-section-header .col-title, .home #homepage-featured .page-section-header .col-btn, .home #homepage-featured .front-page-stacked-buttons .columns { padding-inline: 0; } /* -------------------------------------------------------------------------- 2b FEATURED LISTINGS - THE CARD RAIL .listing-grid__wrapper padded 50px at desktop, 0 at mobile; the slick rail adds 10px and each .listing-grid__card another 5px. The 5px is the real inter-card gutter and is KEPT - the container subtracts it so the card's own left edge, not the rail's, lands on the reference line. -------------------------------------------------------------------------- */ .home #homepage-featured .listing-grid__wrapper { padding-inline: 0; } .home #homepage-featured .listing-grid__cards { width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: calc(var(--cire-inset) - 5px); } /* The slick arrows are absolutely positioned OUTSIDE the rail's border box. Once the rail became a 1400px centred container they landed 15px past the right viewport edge and put a horizontal scrollbar on the desktop page (measured: scrollWidth 1455 against a 1440 viewport). They now sit inside the container's own gutter, clear of the cards, which start at 84px. */ .home #homepage-featured .listing-grid__cards > .slick-prev { left: 0; right: auto; } .home #homepage-featured .listing-grid__cards > .slick-next { right: 0; left: auto; } /* -------------------------------------------------------------------------- 2c FEATURED LISTINGS - THE DEAD BAND UNDER THE HERO Nick, 2026-08-15 (iPad screenshot): the empty white region between the hero photograph and "Featured in the Caribbean". Measured at 1024: the hero ends and the section header begins 50px later on the DEPLOYED css, and 146px later on this branch's css. The difference is a margin collapse that stopped collapsing: `.listing-grid` carries `margin: 50px 0`, the header inside it carries `margin-top: 40px`, and those two collapsed into one 50px gap until cire-luxury section 37 added `padding-top: 56px` to the same grid - which blocks the collapse and adds its own 56 on top (50 + 56 + 40). Three mechanisms for one gap. This replaces them with one. -------------------------------------------------------------------------- */ .home #homepage-featured > .listing-grid:first-of-type { margin-top: 0; padding-top: clamp(32px, 4vw, 48px); } .home #homepage-featured > .listing-grid:first-of-type > .page-section-header { margin-top: 0; } /* -------------------------------------------------------------------------- 4 + 6 THE TWO TEXT BANDS (LUXURY HOME SPECIALISTS, and the bg-dark band) This is the band in Nick's screenshot. `.home section .text-block` is (0,2,1) and beats cire-luxury's (0,2,0) `.home .text-block` on specificity as well as on order. -------------------------------------------------------------------------- */ .home section .text-block { width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: var(--cire-inset); } /* Desktop only: the band is a two-column flex row (copy + photograph) and its free space was distributed AROUND the columns, so the heading started 112px inside the container it lives in (measured 196.6 against a container edge of 84). space-between puts the copy on the container's left edge and the photograph on its right edge - the band now has the same two borders as every other band. Scoped to >=1024 because below that the same element is a column stack and justify-content would act on the vertical axis. */ @media (min-width: 1024px) { .home section .text-block { justify-content: space-between; } } /* -------------------------------------------------------------------------- 7 VISUAL NAV (was 24px / 100px) -------------------------------------------------------------------------- */ .home .visual-nav { width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: var(--cire-inset); } /* -------------------------------------------------------------------------- 8 LINKS BLOCK (was 50px / 100px) -------------------------------------------------------------------------- */ .home .links-block { width: 100%; max-width: var(--cire-measure); margin-inline: auto; padding-inline: var(--cire-inset); } /* ========================================================================== 9 NEIGHBOURHOOD DETAIL HERO (single-mrt_community.php) Nick, 2026-08-15, iPad screenshot of /neighborhoods/st-thomas/: "This should be center aligned on the photo vertically. Always. Also - reduce photo height by 12.5%." MEASURED BEFORE (true viewports, iframe harness): 375 photo 400px tall; content block top 186, height 308 768 photo 772px tall; content block top 569, height 262 (photo centre 497, block centre 700 - the block sat 203px BELOW centre) 1440 photo 772px tall; content block top 663, height 202 (photo centre 531, block centre 764 - 233px below centre) ROOT CAUSE: app.css pins the block to the bottom - .community-hero-slider-words { position: absolute; bottom: 3.25rem } There is no vertical centring anywhere in the component; "lower third" is the design as written. Overridden here at (0,2,0), which beats app.css's (0,1,0) and prints later besides. HEIGHT: the photo is sized by .community-hero-slider { height: 400px } (base) .community-hero-slider__slide { height: calc(100vh - 228px) } @media (max-width: 728px) { ...__slide { height: 400px } } @media (min-width: 730px) { ...slider { height: calc(100vh - 228px) } } plus min-height 350 / 450 from style.css. Every one of those is reduced by 12.5% here, min-heights included, or the min-height would silently cancel the reduction on short windows. ========================================================================== */ .single-mrt_community .community-hero-slider-words { top: 50%; bottom: auto; transform: translateY(-50%); } .single-mrt_community .community-hero-slider-wrapper, .single-mrt_community .community-hero-slider, .single-mrt_community .community-hero-slider__slide { height: calc((100vh - 228px) * 0.875); min-height: 394px; /* 450 - 12.5% */ } @media (max-width: 728px) { .single-mrt_community .community-hero-slider-wrapper, .single-mrt_community .community-hero-slider, .single-mrt_community .community-hero-slider__slide { height: 350px; /* 400 - 12.5% */ min-height: 306px; /* 350 - 12.5% */ } } /* The component already carries a scrim, but it is bottom-anchored - `.community-hero-slider__slide::before { background: linear-gradient( rgba(27,46,65,0), #000) }` - which is exactly why the block was parked at the bottom in the first place. Moving the block to the centre without moving the scrim would put white type on bright sky and water, which breaks Nick's contrast law (dark ground, or a real scrim, under white text - always). The SAME pseudo-element is re-pointed here: a centred charcoal scrim, strongest across the middle third where the type now sits, fading out at both ends so the photograph still reads as a photograph. Charcoal (#384249) replaces the inherited navy. */ .single-mrt_community .community-hero-slider__slide::before { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background: linear-gradient( 180deg, rgba(56, 66, 73, 0) 0%, rgba(56, 66, 73, 0.22) 18%, rgba(56, 66, 73, 0.60) 38%, rgba(56, 66, 73, 0.60) 64%, rgba(56, 66, 73, 0.24) 84%, rgba(56, 66, 73, 0) 100% ); } /* ========================================================================== 10 MOBILE HERO - THE GOLD SEARCH BUTTON, NOTHING ELSE -------------------------------------------------------------------------- Nick, 2026-08-15, redlining the LIVE mobile homepage on an iPhone: "This doesn't look good. Let's try just the gold Search Button. No filters." MOBILE ONLY (<=728px). Desktop keeps the full quicksearch bar - the instruction came from a phone screenshot and is implemented exactly that far. One word from Nick extends it to desktop; nothing here would have to change except the breakpoint. WHAT IS BEING REMOVED (measured at 375, live 2.0c22): keyword field 52px Island select2 52px Type | Price 52px (two accordions side by side) gold Search 52px <- the only survivor + 40px form margin. The band was 212px of the 560px hero. HOW, AND WHY NOT DELETE: the