/* hedgerow-core.css — Slater bundle for hedgerowhouse * Generated 2026-09-14 from the live Site Settings head at * hedgerowhouse.webflow.io. Paste this into a Slater CSS file, then delete the * matching blocks from Webflow Site Settings > Custom Code > Head. * * DROPPED, DO NOT MIGRATE: the "Mobile nav open state" block keyed on * [data-nav-status] and .nav-toggle. Verified dead on 2026-09-14: zero matches * for either selector across 10 pages. It drives the OLD nav, which the two * "Nav Bar - New" components replaced. Delete it from Site Settings; do not * carry it here. Same for its partner footer script (see hedgerow-core.js). * * Everything below is live and load-bearing. Do NOT strip the !important * flags: they are the only reason .journal-cards and .accom-body-grid take * effect at all. Removing them puts /journal back to 561px and the suite pages * to 401px. See website/mobile-fixes.css. * * NOTE ON LOAD ORDER: this must be a STYLESHEET in , not CSS injected by * a deferred script. These rules govern first paint on mobile; injecting them * after paint flashes the unstyled, overflowing layout. */ /* ─── TEMPORARY RESPONSIVE STOPGAP — added 2026-08-25 by Ikigai ───────────── REMOVE THIS BLOCK once the same rules are set in the Designer. Owner: Elliott. Tracked on HED-79. Spec: 2026-08-24-mobile-tablet-pass.md Why it is here and not in the Designer, which is where it belongs: the Webflow MCP cannot write breakpoint-scoped styles. It silently writes every value to the BASE breakpoint whatever breakpoint you ask for, so authoring this through the API would have corrupted desktop styling site-wide. Every selector below was measured in a real browser at 991/767/390, before and after, on the published site. Nothing here is guessed. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* two-column grids that squash below ~160px per track */ .contact-grid, .form-row, .container-large.text-media-grid, .tm-grid, .tm-media, .accom-body-grid, .accom-media-grid, .session-hero-grid, .session-detail-grid, .getting-here-grid, .booking-row { grid-template-columns: 1fr; } /* three-up card grids drop to two before going single */ .more-grid, .extras-grid { grid-template-columns: repeat(2, 1fr); } /* flex rows that never wrapped */ .section-header-grid, .footer-form, .nl-form, .booking-actions, .accom-hero-head { flex-wrap: wrap; } /* 24 Aug sections. These are flex rows, not grids, which is why they were held back from the first pass until they were published and measurable. Unstacked they gave a 70px overflow on the homepage, 98px Flower Farm cards and an 86px values column on About. */ .split-intro, .values-row { flex-direction: column; } .split-intro-left, .split-intro-right, .story-card, .values-left, .values-list { width: 100%; max-width: 100%; } .ff-cards { flex-wrap: wrap; } .ff-card { flex: 1 1 100%; } } @media (max-width: 479px) { .more-grid, .extras-grid, .listing-grid { grid-template-columns: 1fr; } } /* ─── TEMPORARY, same owner and same fate as the block above ──────────────── Responsive rules for the homepage sections built 25 Aug against the Figma frames. Here for the same reason: the API cannot write breakpoint styles. Move into the Designer and delete alongside the block above. HED-79. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .stays-grid { grid-template-columns: 1fr; } .stays-media { aspect-ratio: 16 / 10; } } @media (max-width: 767px) { .things-cards { grid-template-columns: repeat(2, 1fr); } .journal-cards { grid-template-columns: 1fr; } } @media (max-width: 479px) { .stays-cards { grid-template-columns: 1fr; } .stays-card-img { aspect-ratio: 2 / 1; } .things-cards { grid-template-columns: 1fr; } .things-card-img { aspect-ratio: 2 / 1; } } /* ─── TEMPORARY, fourth in the series. Same owner and same fate as the three blocks above: move into the Designer, then delete. Owner: Elliott. HED-79. Added 2026-09-11 by Ikigai. Source of record and full diagnosis: ikigai/clients/hedgerow-house/website/mobile-fixes.css MIGRATE TO SLATER. This belongs in a Slater project for hedgerowhouse, the way tinyseeds.je runs project 17662. No Slater project exists for this site yet, so it is inline here to ship before soft launch. Once Slater is wired up, move all four blocks there and delete them from Site Settings. Every rule below was measured in Playwright at an iPhone 14 viewport on the published site, before and after, with the rest of this head in place. Nothing is guessed. Result: 9 of 13 overflowing pages brought back to 390px, and footer tap targets under 44px went 12 to 0 on all 24 pages. Note on !important: the .journal-cards and .accom-body-grid rules in the blocks above are already present but WITHOUT !important, and they lose to Webflow's generated class rules. They have never taken effect. The versions here carry !important, and removing it puts /journal back to 561px and the suite pages back to 401px. Verified both ways. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* /about-jersey and /things-to-do rendered at 1320px, 3.4x a 390px screen: a four-column grid with fixed 312px tracks and width 1296px. */ .related-pages-list, .feature-cards-4-col { grid-template-columns: 1fr !important; width: auto !important; max-width: 100% !important; } /* /journal at 561px: a three-column grid that never collapses. */ .journal-cards { grid-template-columns: 1fr !important; width: auto !important; max-width: 100% !important; } .w-dyn-list { max-width: 100% !important; } /* Footer links measured 230x20px against a 44px minimum. Padding rather than height so the footer column keeps its visual rhythm. */ .footer-flink, .footer-col a { padding-top: 12px !important; padding-bottom: 12px !important; display: inline-block !important; } /* Accommodation suites, 682px to 715px: .accom-features-row is a flex row whose cards do not wrap, and the body grid keeps its desktop split. */ .accom-features-row { flex-wrap: wrap !important; } .accom-features-card { flex: 1 1 100% !important; min-width: 0 !important; } .accom-body-grid { grid-template-columns: 1fr !important; } .accom-included { max-width: 100% !important; } /* /pick-your-own at 525px. These read as deliberate horizontal runs rather than broken layout, so they are CONTAINED, not restacked. If they are meant to stack on mobile, use flex-wrap: wrap on the wrappers instead. */ .hiw_cards-wrapper, .seasons_flowers-wrapper, .seasons_flowers-panel { max-width: 100% !important; overflow-x: hidden !important; } /* Suite page header: a no-wrap flex row holding the title block (230px) beside the "Sleeps N" badge (113px), from a left offset of 80px. */ .container-wrapper-4 { flex-wrap: wrap !important; } .container-wrapper-4>* { min-width: 0 !important; } } /* ─── STICKY NAV — added 2026-09-11 by Ikigai. HED-79, owner Elliott. ─────── The nav already had position:sticky;top:0;z-index:100 on .nav-section and it has never worked, on any page. Cause: .nav-section's parent wrapper is exactly as tall as the nav itself (84px desktop, 76px mobile), and a sticky element can only travel inside its parent's box. Zero distance to travel. Fix is to move the sticky one level up, onto the [data-nav-instance] wrapper, whose parent is . Sticky keeps the element in flow, so there is no layout shift and no padding compensation anywhere. The homepage is the exception: its wrapper sits inside section.hero-home, which has overflow:hidden, so sticky cannot work there. Fixed is used instead, which costs nothing because that nav already overlays the hero. Verified pinned at 1440 and 390 on /, /about, /journal, /events/halloween and /accommodation/blampied-suite. */ [data-nav-instance] { position: sticky; top: 0; z-index: 100; } .hero-home>[data-nav-instance] { position: fixed; left: 0; right: 0; } [data-nav-instance] .nav-section { transition: background-color .25s ease, box-shadow .25s ease; } /* Scrolled state, LIGHT VARIANT ONLY. The light nav is transparent with white links, a white logo and a white-outlined CTA, all designed against a dark hero photo. Pinned over bone page content they are invisible, so the .nav- is-scrolled class (set by the footer script) restores the same colours the default variant already uses. The default variant needs none of this: it is already opaque bone. */ [data-nav-instance].nav-is-scrolled .nav-section-light { background-color: #E9E4DC; box-shadow: 0 1px 0 rgba(43, 42, 38, .10); } [data-nav-instance].nav-is-scrolled .nav-link-light { color: #3B4A3E; } [data-nav-instance].nav-is-scrolled .nav-cta { color: #3B4A3E !important; border-color: #3B4A3E !important; } /* ═══════════════════════════════════════════════════════════════════════════ APPENDED 2026-09-17. Everything below was shipped between 14 and 17 Sep as REGISTERED WEBFLOW SCRIPTS that inject a