/* Shared page scaffolding for the four centre sites. Layout + web-scale sizing only — every colour, font, radius and shadow comes from the Organic design system stylesheet. Derived from the system's landing template. */ :root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 58ch; --lead-100: var(--color-accent-100); --lead-200: var(--color-accent-200); --lead-300: var(--color-accent-300); --lead-700: var(--color-accent-700); --lead-800: var(--color-accent-800); --second-100: var(--color-accent-2-100); --second-300: var(--color-accent-2-300); --second-700: var(--color-accent-2-700); --second-800: var(--color-accent-2-800); } body.lead-sage { --lead-100: var(--color-accent-2-100); --lead-200: var(--color-accent-2-100); --lead-300: var(--color-accent-2-300); --lead-700: var(--color-accent-2-700); --lead-800: var(--color-accent-2-800); --second-100: var(--color-accent-100); --second-300: var(--color-accent-200); --second-700: var(--color-accent-700); --second-800: var(--color-accent-800); } /* The canvas keeps painting past the end of the document, which is what you see when iOS rubber-bands a scroll at the bottom of the page. Left alone, is transparent and the body's cream propagates there — so a hard flick at the end reveals a slab of light cream under the darker footer, reading as a big empty gap. Giving the footer's colour makes the overscroll continue the footer instead. */ html { scroll-behavior: smooth; background: var(--color-surface); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; text-wrap: pretty; overflow-x: clip; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); } /* — zones: full-bleed colour bands joined by a wave, so the page reads as one continuous surface instead of a stack of boxes. One custom property drives both the band and its wave. Each boundary is drawn by a single wave that belongs to the zone *below* it and reaches up over the zone above — because that zone comes later in the document, it always paints on top, with no z-index juggling. — */ .zone { position: relative; background: var(--zone-bg); } .zone-base { --zone-bg: var(--color-bg); } .zone-sage { --zone-bg: var(--second-100); } /* --lead-200, not --lead-100: the 100 step is brighter than the base cream in every channel, so it reads as washed-out cream rather than its own band. */ .zone-peach { --zone-bg: var(--lead-200); } .zone-surface { --zone-bg: var(--color-surface); } /* Contains the hero's decorative circle, which is deliberately oversized and would otherwise spill up over the nav. Safe here only because the first zone has no wave of its own to clip. */ .zone-hero { overflow: hidden; } .wave { position: absolute; left: 0; top: 0; width: 100%; height: 56px; display: block; pointer-events: none; /* -99% not -100%: leaves a sliver of overlap so no hairline gap shows between the wave and the band at fractional device pixel ratios. */ transform: translateY(-99%); } .wave path { fill: var(--zone-bg); } /* Mirror every other wave so consecutive boundaries don't look stamped. */ .zone:nth-of-type(even) > .wave { transform: translateY(-99%) scaleX(-1); } @media (max-width: 720px) { .wave { height: 30px; } } /* — masthead — */ /* Sticky so the call and enquire buttons stay reachable down the whole page. Translucent + blurred rather than solid, so it sits over whichever colour band happens to be behind it without looking like a detached slab. (position: sticky survives the body's overflow-x: clip — `clip` doesn't create a scroll container the way `hidden` would.) */ .nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); gap: var(--space-3); position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @supports not (backdrop-filter: blur(1px)) { .nav { background: var(--color-bg); } } /* Clears the sticky bar when an in-page link jumps to a section. */ section[id], footer[id] { scroll-margin-top: 84px; } /* — tap-to-call button — */ .nav .btn-call { border-color: var(--color-divider); gap: var(--space-2); } .nav .btn-call:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .nav .btn-call:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .nav .btn-call svg { width: 15px; height: 15px; flex: none; } /* Below 560px it collapses to the icon alone — the number is one tap away anyway, and the row has to fit the brand and Enquire now too. Tightening the gap and logo buys back enough room to keep the wordmark on a 375px phone. */ @media (max-width: 560px) { .nav { gap: var(--space-2); } .nav .btn-call .call-label { display: none; } .nav .btn-call { padding-inline: var(--space-3); } .nav-brand { gap: var(--space-2); } .nav-brand img { width: 34px; height: 34px; } } /* "Enquire now" -> "Enquire" in the nav only, which buys back enough width to keep the wordmark on a 360px phone. The hero and closing-card buttons keep the full label. */ @media (max-width: 400px) { .nav .cta-now { display: none; } } /* Last resort on the narrowest phones: drop the wordmark, keep the logo. */ @media (max-width: 330px) { .nav-brand .brand-name { display: none; } } .nav a { white-space: nowrap; } .nav-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .nav-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 999px; background: #fff; padding: 3px; box-sizing: border-box; flex: none; } .nav-brand .brand-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.1; } .nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary[aria-current='page'] { color: var(--color-bg); } @media (max-width: 900px) { .nav a:not(.btn):not(.nav-brand) { display: none; } } .kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--lead-700); margin: 0 0 calc(var(--leading) - var(--half)); } /* — shared section headings — */ .section-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(28px, 3.2vw, 38px); line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; } .section-note { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; } /* — photography — the site's radius language, one step softer than the cards — */ .hero-figure, .split-figure, .band-figure, .patch-figure, .shot { margin: 0; overflow: hidden; border-radius: calc(2 * var(--radius-lg)); background: var(--color-surface); } .hero-figure img, .split-figure img, .band-figure img, .patch-figure img, .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } figure picture { display: block; height: 100%; } /* — hero — */ .hero { position: relative; display: grid; align-items: center; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--leading) clamp(28px, 5vw, 80px); padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); } /* z-index 0, not -1: the zone now paints its own background, and -1 would put the circle behind it. Hero content is lifted to 1 to stay clear. */ .hero::before { content: ""; position: absolute; right: -180px; top: -220px; width: 420px; height: 420px; border-radius: 50%; background: var(--second-100); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } @media (max-width: 1420px) { .hero::before { right: 0; } } .hero-figure { aspect-ratio: 5 / 4; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: calc(2 * var(--leading)); } .hero-figure { aspect-ratio: 3 / 2; } } .display { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(38px, 5.4vw, 70px); line-height: clamp(41px, 5.83vw, 76px); letter-spacing: 0; margin: 0; margin-left: -0.028em; text-box: trim-both cap alphabetic; } .display .line { display: block; } .hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure); margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; } .hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); align-items: center; } /* margin: 0 matters — align-items centres the margin box, so the inherited bottom margin on

would lift the text off the button's centre line. */ .hero .row .callnote, .patch .row .callnote { margin: 0; font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); } .hero .row .callnote a, .patch .row .callnote a { font-weight: 600; } /* — the facts bed: soft circles, thrown not sown — */ .bed { display: flex; flex-wrap: wrap; gap: var(--leading) var(--half); align-items: center; justify-content: center; padding: var(--leading) 0 calc(2.5 * var(--leading)); } .seed { border-radius: 50%; aspect-ratio: 1; width: clamp(170px, 21vw, 240px); display: grid; place-content: center; text-align: center; padding: var(--space-4); box-sizing: border-box; } .seed:nth-child(1) { background: var(--lead-100); } .seed:nth-child(2) { background: var(--second-300); transform: translateY(var(--leading)); } .seed:nth-child(3) { background: var(--lead-300); } .seed:nth-child(4) { background: var(--second-100); transform: translateY(var(--leading)); } .seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 2.6vw, 38px); line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; } .seed:nth-child(1) .stat-num, .seed:nth-child(3) .stat-num { color: var(--lead-800); } .seed:nth-child(2) .stat-num, .seed:nth-child(4) .stat-num { color: var(--second-800); } .seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--half) 0 0; max-width: 14ch; text-wrap: balance; } @media (max-width: 720px) { .seed { width: clamp(160px, 42vw, 210px); } } /* — feature rows — */ .features { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); } .feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline; padding: calc(1.25 * var(--leading)) 0; } .f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; } .f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--lead-700); } @media (max-width: 1280px) { .f-title::before { display: none; } } .f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch; text-box: trim-both cap alphabetic; } @media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: var(--half); } .f-copy { max-width: var(--measure); } } /* — imagery split — */ .split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center; padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); } .split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 32px; line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; } .split-copy .note { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; } .split-figure { width: min(420px, 100%); justify-self: end; position: relative; } .split-figure picture { aspect-ratio: 4 / 5; } /* Collapse to one column like every other two-column block. Without this the 7fr/5fr split held all the way down, squeezing the timetable into ~150px and wrapping it every two or three words. */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-figure { justify-self: stretch; width: 100%; } .split-figure picture { aspect-ratio: 3 / 2; } } .day { display: grid; gap: var(--half); margin: calc(1.5 * var(--leading)) 0 0; padding: 0; list-style: none; } .day li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); font-size: 15.5px; line-height: var(--leading); } .day li span { font-weight: 600; color: var(--lead-700); font-feature-settings: "tnum" 1; } /* — captions: a tinted bar inside the rounded card, not floating text — */ .shot figcaption, .split-figure figcaption, .patch-figure figcaption { font-size: 13.5px; line-height: var(--half); margin: 0; padding: var(--space-3) var(--space-4); background: var(--lead-100); color: var(--lead-800); } /* — the room gallery — columns, so portrait and landscape shots each keep their own proportions and nothing gets cropped — */ .rooms { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); } .gallery { columns: 3; column-gap: var(--leading); margin-top: calc(1.75 * var(--leading)); } .shot { break-inside: avoid; margin: 0 0 var(--leading); } .shot img { height: auto; } @media (max-width: 1000px) { .gallery { columns: 2; } } @media (max-width: 640px) { .gallery { columns: 1; } } /* — the outdoor band — */ .band { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); } .band-figure { margin-top: calc(1.75 * var(--leading)); } .band-figure picture { aspect-ratio: 20 / 9; } @media (max-width: 720px) { .band-figure picture { aspect-ratio: 4 / 3; } } /* — the featured reel — preload="none" on the