@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 500; font-display: swap; src: url(/assets/fonts/Newsreader-200-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 500; font-display: swap; src: url(/assets/fonts/Newsreader-200-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/WorkSans-300-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/WorkSans-300-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/WorkSans-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/WorkSans-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/WorkSans-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/WorkSans-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The West End -- the layer the design export could not provide. * * The design is already fluid (clamp() typography, auto-fit grids), so almost nothing * here is layout. What it does supply: the base reset the design kept in its canvas * , the media query that swaps the desktop nav for the mobile drawer (the design * used a manual Desktop/Mobile toggle instead), the one grid the export left unable to * collapse (amenities, at the bottom), and states for the interactive bits -- drawer, * gallery filter, enquiry form. */ html, body { margin: 0; padding: 0; background: #FBF7EF; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } body { font-family: 'Work Sans', system-ui, -apple-system, sans-serif; color: #17191A; } a { color: #0E5A72; text-decoration: none; } a:hover { color: #084150; } img { max-width: 100%; } input, select, textarea, button { font-family: 'Work Sans', system-ui, sans-serif; } /* ---- header: the design's two device branches, as a real breakpoint ---- */ .hdr-mobile { display: none; } @media (max-width: 900px) { .hdr-desktop { display: none; } .hdr-mobile { display: block; } } [data-drawer-panel][hidden] { display: none; } [data-drawer-toggle] { -webkit-tap-highlight-color: transparent; } /* ---- gallery filter ---- */ [data-filter] { transition: background-color .15s ease, color .15s ease; } [data-filter][aria-pressed="true"] { background: #0E5A72 !important; color: #FBF7EF !important; border-color: #0E5A72 !important; } figure[hidden] { display: none !important; } /* ---- enquiry form ---- */ [data-enquiry-status][hidden] { display: none; } [data-enquiry] button[disabled] { opacity: .55; cursor: progress; } [data-enquiry] :invalid:not(:placeholder-shown) { border-color: #B4442B; } /* ---- accessibility ---- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #0E5A72; color: #FBF7EF; padding: 14px 20px; font-size: 13px; } .skip-link:focus { left: 0; color: #FBF7EF; } :focus-visible { outline: 2px solid #0E5A72; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Long words and the wide booking table should never force the page sideways. */ main { overflow-wrap: break-word; } /* ---- live availability -------------------------------------------------------- */ /* The design works in inline styles, so [hidden] needs saying explicitly here. */ [data-avail-status][hidden], [data-unit-rate][hidden], [data-unit-note][hidden] { display: none; } [data-avail-results] { transition: opacity .15s ease; } [data-avail-results][aria-busy="true"] { opacity: .55; } [data-book-search][disabled] { opacity: .55; cursor: progress; } /* The apartment the guest arrived for, or picked in the dropdown. */ [data-unit-row][data-unit-focus] { outline: 2px solid rgb(14, 90, 114); outline-offset: 3px; border-radius: 2px; } [data-unit-book][aria-disabled="true"] { opacity: .45; pointer-events: none; } /* Shown only when NightsBridge frees the whole house; site.js unhides it. */ [data-avail-whole][hidden] { display: none; } /* The design's panel was five grid cells (four controls + Search). Splitting Guests into Adults and Children makes six, so Search wraps onto its own row -- where a single 170px-wide button looks like a mistake. Let it own that row instead. */ [data-book-search] { grid-column: 1 / -1; } /* ---- amenities: the one grid the design left un-collapsible --------------------- */ /* Every other section on the site is repeat(auto-fit, ...) and folds on its own. This one hard-codes minmax(240px, 0.8fr) for the intro column, so below ~620px the tile column is crushed to a few dozen pixels and the CTA's `grid-column: span 2` pushes half the amenities outside the viewport -- 02, 04, 06, 08 and 10 render off-screen. Stack it, and pin the tiles to two equal columns so `span 2` can never overflow again. 640px is where the spill measures zero, so nothing at or above that width is touched. */ @media (max-width: 639px) { main section:has(> div > div > .scp5) > div { grid-template-columns: 1fr !important; } main section:has(> div > div > .scp5) > div > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ---- /apartments compare table: keep the row labels with the values ------------- */ /* The design wraps this 4-column grid in overflow-x:auto with min-width:620px, so unlike the amenities grid it scrolls instead of escaping the page -- that part is deliberate and stays. But at 375px it hides 46% of itself, and once swiped right the label column is gone, leaving bare "No / No / Yes" with nothing to say which row they belong to. Pin the labels. Sticky is inert when the table already fits, so the rule needs no breakpoint and desktop is untouched; only the separator and the swipe hint are gated, at 690px -- the measured width below which the table actually scrolls. */ div[style*="overflow-x: auto"] > div > :nth-child(4n + 1) { position: sticky; left: 0; z-index: 1; background: #FBF7EF; } @media (max-width: 690px) { main section:has(> div[style*="overflow-x: auto"])::before { content: "Swipe the table to compare all three \2192"; display: block; margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(156, 142, 119); } div[style*="overflow-x: auto"] > div > :nth-child(4n + 1) { padding-right: 12px; box-shadow: 1px 0 0 rgba(23, 25, 26, 0.14); } } /* ---- apartment pages: the sleeping-arrangement rows ----------------------------- */ /* Each row is a flex pair (label, value) and both sides shrink by default, so a long value steals width from the label. On /apartments/family-garden "Single bed, configuration to be confirmed" squeezed its label from 83px to 69px and broke it across two lines -- "BEDROOM / 2" against a right-aligned two-line value, while Bedroom 1 above it sat neatly on one. The label is the short, fixed half of the pair and should never be the thing that gives. Inert wherever nothing is shrinking, which is every width on desktop and every other row on the three apartment pages. */ span[style^="font-size: 11.5px"][style*="letter-spacing: 0.14em"] { flex-shrink: 0; } /* ---- guest assistant launcher ---- * * The panel's own styles live in site/assets/chat.css and are loaded only when a * visitor opens it; this is just the button, which is on the page from the start. * * Square, hairline, teal -- the same vocabulary as every other control here, so it * reads as part of the site rather than as a widget bolted onto it. It sits above the * sticky header (z-index 40) and below the panel (60), and collapses to its icon on * small screens so it never covers a Book button or the drawer. */ .we-launcher { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 18px; font-family: 'Work Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #FBF7EF; background: #0E5A72; border: 1px solid #0E5A72; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .we-launcher:hover { background: #084150; border-color: #084150; } .we-launcher[data-loading] { opacity: .7; cursor: progress; } .we-launcher-icon { width: 17px; height: 17px; display: block; flex: 0 0 auto; } @media (max-width: 599px) { .we-launcher { gap: 0; width: 52px; height: 52px; min-height: 52px; padding: 0; justify-content: center; } .we-launcher-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } @media (prefers-reduced-motion: reduce) { .we-launcher { transition: none; } } /* Printed pages have no assistant. */ @media print { .we-launcher, .we-panel { display: none !important; } }