/* ============================================================================ _band-mobile.css — THE PHONE BAND ---------------------------------------------------------------------------- Lane: fluid:mobile. Owns: this file only. Widths this lane is accountable for: 640 · 480 · 430 · 390 · 375. All five sit inside Salient's phone tier (<= 690), so one media block covers them; a second, narrower block carries the two rules whose own arithmetic puts their edge at 480. LOAD ORDER: this file must be linked LAST, after css/reduced-motion.css, so it outranks every section sheet. It is a REPAIR layer, not a system layer — the system is review/fluid/grid-fluid.css and nothing here restates it. WHAT THIS FILE MAY NOT DO - It may not touch any width >= 1000. Every rule is inside a max-width query whose edge is 768 or below, so the 1280 and 1440 artboards cannot move. Verified: the fidelity harness is unchanged at both artboards (band-mobile.md §6). - It may not invent a number. Every value below is either a token, a value inherited from the element that already owned it, or an accessibility minimum with a citation. HOW THE WIDTHS WERE MEASURED Headless Chrome refuses a window narrower than 500px, which is why FLUID-SYSTEM.md §8.1 records 375/390/430/480 as "computed, not measured" and asks for a real-device pass. This lane closed that gap without a device: review/fluid/cdp_mobile.py drives Chrome over the DevTools Protocol and sets the viewport with Emulation.setDeviceMetricsOverride, which has no floor. Every number in the comments below is a real browser layout at that width. ========================================================================== */ /* ========================================================================== 1. 14-amenities — THE BLANK BAND -------------------------------------------------------------------------- SYMPTOM: at every width <= 768 the section paints as an empty 900px cream band. Nothing in it renders — not the photograph, not the headline, not the spec pill. Measured section height 900, measured CONTENT height 0. ROOT CAUSE, measured: 14-amenities.css:183 sets `.mk-amenities{height:900px}` and :220 hangs the slider stack off it with `height:100%`: .mk-amenities > .nectar-carousel, .mk-amenities .nectar-flickity.nectar-simple-slider { height: 100%; } Its own comment says "the height chain has to reach the cells or the cold render collapses". At 768 the section releases the fixed height on purpose (14-amenities.css:701-705, so the headline can reflow past 900): @media (max-width: 768px) { .mk-amenities { height: auto; min-height: 900px } } A percentage height against an `auto` containing block has no base, so the whole chain resolves to zero and the collapse the :220 comment warns about is exactly what happens. Bisected: 999/1024/1280 -> 900. 768/691/690/640 -> 0. FIX: `min-height: inherit`. It carries the section's OWN min-height down the chain, so this file states no height of its own — change the 900 in 14-amenities.css and this follows it. `min-height` also leaves the release intact: the band can still grow past 900 when the headline reflows, which is the thing the section's 768 rule was written to allow. Scoped to 768 — the defect's own edge — not to 690, so the tablet lane does not inherit a hole. If review/fluid/band-xs.md ships the same rule the two are identical and idempotent; see BAND-REQUESTS.md B4. ========================================================================== */ @media (max-width: 768px) { .mk-page .mk-amenities > .nectar-carousel, .mk-page .mk-amenities .nectar-flickity.nectar-simple-slider, .mk-page .mk-amenities .nectar-flickity .flickity-viewport, .mk-page .mk-amenities .nectar-flickity .flickity-slider, .mk-page .mk-amenities .nectar-flickity .flickity-slider > .cell { min-height: inherit; } } /* ========================================================================== 2. THE PHONE TIER — Salient's own <= 690 edge ========================================================================== */ @media (max-width: 690px) { /* ------------------------------------------------------------------------ 2.1 THE HEADER CTA ------------------------------------------------------------------------ FLUID-SYSTEM.md §5.2: Salient never hides the header CTA when the menu collapses — it is laid out at every width on both demos that have one (architect 187.91 -> 154.23, resort 160.52 -> 160.28). V1 nests it as the fifth
  • of .mk-nav__list, so the 1050 collapse takes it to 0 x 0. Measured here at 640 / 480 / 430 / 390 / 375: 0 x 0 at all five. The real fix is structural (move the CTA out of