/* ========================================================================== Cloud9Stays — theme styles Palette and type follow the current cloud9stays.co.uk (Wix) site: charcoal, white, warm blush/sand and stone grey, set in Wix Madefor. Motion follows Apple's fluid-interface principles (springs, interruptible, origin-aware), and respects reduced-motion settings. ========================================================================== */ @font-face { font-family: "Wix Madefor Display"; src: url("../fonts/WixMadeforDisplay.woff") format("woff"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Wix Madefor Text"; src: url("../fonts/WixMadeforText.woff") format("woff"); font-weight: 400 800; font-display: swap; } :root { /* From the Wix site */ --paper: #ffffff; --ink: #1e1e1e; /* text, buttons */ --blush: #f0e2d9; /* "Property management" tile */ --sand: #e3c7b3; /* "Investment packages" tile */ --stone: #e4e4e4; /* "Bookings" tile, reviews band */ --taupe: #dad2ca; /* About page bands */ --cloud: #f6f4f2; /* light warm section */ --slate: #5f5f5f; /* secondary text */ --line: #e2e0de; /* Derived */ --dusk: var(--ink); /* accent: buttons, links, icons */ --dusk-deep: #3a3a3a; /* button hover */ --dusk-soft: var(--blush); /* soft accent surface */ --night: var(--stone); --success: #2f7a55; --danger: #b03a3a; --font-display: "Wix Madefor Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Wix Madefor Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wrap: 1200px; --gutter: clamp(16px, 4vw, 40px); --header-h: 76px; /* Squarer corners, echoing the Wix site's square buttons and tiles */ --r-xl: 14px; --r-lg: 10px; --r-md: 8px; --r-sm: 6px; --r-btn: 4px; --shadow-float: 0 1px 2px rgba(30, 30, 30, .06), 0 12px 32px -10px rgba(30, 30, 30, .18), 0 30px 60px -28px rgba(30, 30, 30, .22); --shadow-card: 0 1px 2px rgba(30, 30, 30, .05), 0 10px 28px -14px rgba(30, 30, 30, .16); --shadow-lift: 0 2px 4px rgba(30, 30, 30, .06), 0 18px 40px -16px rgba(30, 30, 30, .24); /* Critically damped spring approximations (Apple: damping 1.0, response ~0.4s) */ --spring: cubic-bezier(.2, .9, .25, 1); --spring-soft: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); } /* Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: inherit; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; } h2 { font-size: clamp(1.875rem, 3.6vw, 2.875rem); line-height: 1.1; letter-spacing: -0.022em; font-weight: 500; } h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .c9-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; text-decoration: none; } .c9-skip:focus { top: 12px; } .c9-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .c9-wrap--text { max-width: calc(720px + var(--gutter) * 2); } .c9-muted { color: var(--slate); } .c9-icon { width: 1.25em; height: 1.25em; flex: none; } /* Buttons --------------------------------------------------------------- */ .c9-btn { --h: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: var(--h); padding: 0 1.6em; border: 1px solid transparent; border-radius: var(--r-btn); font: 500 1rem/1 var(--font-body); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .12s ease-out, box-shadow .3s var(--spring-soft); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .c9-btn:active { transform: scale(.97); transition-duration: .08s; } .c9-btn--small { --h: 42px; padding: 0 1.2em; font-size: .9375rem; } .c9-btn--block { width: 100%; } .c9-btn--primary { background: var(--ink); color: #fff; } .c9-btn--primary:hover { background: var(--dusk-deep); box-shadow: 0 10px 22px -12px rgba(30, 30, 30, .6); } .c9-btn--light { background: #fff; color: var(--ink); } .c9-btn--light:hover { background: var(--blush); } .c9-btn--quiet { background: transparent; color: var(--ink); border-color: var(--ink); } .c9-btn--quiet:hover { background: var(--ink); color: #fff; } .c9-btn--glass { background: rgba(255, 255, 255, .82); color: var(--ink); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: rgba(255, 255, 255, .6); } .c9-btn .c9-icon { width: 1.15em; height: 1.15em; } .c9-link { color: var(--ink); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--spring-soft); } .c9-link:hover { background-size: 0 1px; background-position: 100% 100%; } .c9-round { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); transition: background-color .2s ease, color .2s ease, transform .12s ease-out, opacity .2s ease; } .c9-round:hover { background: var(--ink); color: #fff; } .c9-round:active { transform: scale(.92); } .c9-round:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); } .c9-round--dark { border-color: rgba(255, 255, 255, .35); color: #fff; } .c9-round--dark:hover { background: #fff; color: var(--ink); } /* Header ---------------------------------------------------------------- */ .c9-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); transition: box-shadow .35s ease, background-color .35s ease, transform .45s var(--spring); } .c9-header.is-scrolled { box-shadow: 0 1px 0 rgba(30, 30, 30, .07); background: rgba(255, 255, 255, .84); } .has-hero .c9-header:not(.is-scrolled) { background: rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; } .c9-header.is-hidden { transform: translateY(-100%); } .c9-header__inner { display: flex; align-items: center; gap: 32px; height: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .c9-main { padding-top: var(--header-h); } .has-hero .c9-main { padding-top: 0; } .c9-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--ink); } .c9-logo__mark { height: 40px; width: auto; transition: transform .5s var(--spring); } .c9-logo:hover .c9-logo__mark { transform: rotate(-4deg) scale(1.04); } .c9-logo--image img { max-height: 44px; width: auto; } .c9-wordmark { font: 700 1.3125rem/1 var(--font-display); letter-spacing: .005em; text-transform: uppercase; } .c9-nav { margin-left: auto; } .c9-nav__list { display: flex; gap: 6px; } .c9-nav__list a { position: relative; display: block; padding: 10px 14px; font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--ink); } .c9-nav__list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--spring-soft); } .c9-nav__list a:hover::after, .c9-nav__list .current-menu-item > a:not([href*="#"])::after { transform: scaleX(1); transform-origin: left; } .c9-header__actions { display: flex; align-items: center; gap: 8px; } .c9-menu-toggle { display: none; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .c9-menu-toggle:hover { background: rgba(30, 30, 30, .06); } /* Mobile sheet: drops from the header and returns the same way (spatial consistency). */ .c9-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(30, 30, 30, 0); transition: background-color .35s ease; } .c9-sheet.is-open { background: rgba(30, 30, 30, .35); } .c9-sheet__panel { background: var(--paper); padding: 10px var(--gutter) 28px; transform: translateY(-104%); transition: transform .5s var(--spring); box-shadow: var(--shadow-float); } .c9-sheet.is-open .c9-sheet__panel { transform: none; } .c9-sheet__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 10px); margin-bottom: 8px; } .c9-sheet__top .c9-menu-toggle { display: grid; } .c9-sheet__list { margin-bottom: 20px; } .c9-sheet__list li { opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .45s var(--spring); } .c9-sheet.is-open .c9-sheet__list li { opacity: 1; transform: none; } .c9-sheet.is-open .c9-sheet__list li:nth-child(2) { transition-delay: .04s; } .c9-sheet.is-open .c9-sheet__list li:nth-child(3) { transition-delay: .08s; } .c9-sheet.is-open .c9-sheet__list li:nth-child(4) { transition-delay: .12s; } .c9-sheet.is-open .c9-sheet__list li:nth-child(5) { transition-delay: .16s; } .c9-sheet__list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 500 1.5rem/1.2 var(--font-display); letter-spacing: -0.015em; text-decoration: none; } /* Hero: photo with a soft white wash and dark centred type, as on the current site. */ .c9-hero { position: relative; isolation: isolate; color: var(--ink); text-align: center; min-height: min(96svh, 920px); display: flex; align-items: center; padding: calc(var(--header-h) + 40px) 0 72px; overflow: hidden; } .c9-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .c9-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: c9-settle 2.6s var(--spring-soft) .05s forwards; } @keyframes c9-settle { to { transform: scale(1); } } .c9-hero.has-image .c9-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .58); } /* No photo yet: a warm, washed sky in the site's blush and stone. */ .c9-hero.is-sky .c9-hero__media { background: radial-gradient(90% 60% at 15% 20%, rgba(227, 199, 179, .55), transparent 65%), radial-gradient(80% 60% at 90% 75%, rgba(228, 228, 228, .9), transparent 60%), linear-gradient(180deg, #f3e9e2 0%, #f8f3ef 55%, #ffffff 100%); } .c9-sky__cloud { position: absolute; border-radius: 50%; background: #fff; filter: blur(46px); opacity: .85; animation: c9-drift 80s linear infinite alternate; } .c9-sky__cloud--1 { width: 44vw; height: 13vw; left: -6vw; top: 24%; } .c9-sky__cloud--2 { width: 34vw; height: 10vw; right: -4vw; top: 12%; opacity: .7; animation-duration: 110s; } .c9-sky__cloud--3 { width: 58vw; height: 15vw; left: 22vw; bottom: 6%; opacity: .75; animation-duration: 130s; } @keyframes c9-drift { from { transform: translateX(-4vw); } to { transform: translateX(6vw); } } .c9-hero__content { position: relative; display: flex; flex-direction: column; align-items: center; } .c9-hero__title { max-width: 16ch; } .c9-hero__title .c9-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: c9-word .9s var(--spring) forwards; animation-delay: calc(.12s + var(--w, 0) * .07s); } @keyframes c9-word { to { opacity: 1; transform: none; filter: blur(0); } } .c9-hero__text { max-width: 46ch; margin-top: 18px; font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.45; color: #2c2c2c; animation: c9-rise 1s var(--spring-soft) .45s both; } .c9-hero .c9-search { animation: c9-rise 1.1s var(--spring-soft) .6s both; } .c9-hero__more { margin-top: 18px; font-size: .9375rem; color: var(--slate); animation: c9-rise 1s var(--spring-soft) .75s both; } @keyframes c9-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Search bar ------------------------------------------------------------- */ .c9-search { display: grid; grid-template-columns: 1.25fr 1fr 1fr .8fr auto; align-items: stretch; width: 100%; max-width: 980px; margin-top: 36px; padding: 8px; color: var(--ink); text-align: left; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-xl); box-shadow: var(--shadow-float); } .c9-search--page { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 28px; } .c9-search__field { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px 18px; border-radius: var(--r-lg); min-width: 0; transition: background-color .25s ease, box-shadow .35s var(--spring-soft), transform .35s var(--spring); } .c9-search__field:hover { background: rgba(30, 30, 30, .04); } .c9-search__field:focus-within { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(30, 30, 30, .3); transform: translateY(-1px); } .c9-search__field + .c9-search__field::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); transition: opacity .2s ease; } .c9-search__field:hover::before, .c9-search__field:focus-within::before, .c9-search__field:hover + .c9-search__field::before, .c9-search__field:focus-within + .c9-search__field::before { opacity: 0; } .c9-search label { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--slate); cursor: pointer; } .c9-search label .c9-icon { width: 15px; height: 15px; } .c9-search input, .c9-search select { width: 100%; padding: 2px 0 0; border: 0; background: transparent; outline: none; font-size: 1rem; font-weight: 500; color: var(--ink); min-height: 28px; cursor: pointer; -webkit-appearance: none; appearance: none; } .c9-search select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235f5f5f' stroke-width='1.6' stroke-linecap='round' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") right center / 12px no-repeat; padding-right: 18px; } .c9-search input::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; } .c9-search__go { --h: auto; border-radius: var(--r-lg); padding: 0 28px; font-size: 1rem; } .c9-search__go .c9-icon { width: 18px; height: 18px; transition: transform .45s var(--spring); } .c9-search__go:hover .c9-icon { transform: scale(1.12) rotate(-8deg); } .c9-search__msg { grid-column: 1 / -1; font-size: .875rem; color: var(--danger); padding: 0 18px; } .c9-search__msg:empty { display: none; } .c9-search__msg:not(:empty) { padding: 8px 18px 4px; animation: c9-rise .4s var(--spring) both; } .c9-search.is-shake { animation: c9-shake .45s var(--spring); } @keyframes c9-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } /* Sections -------------------------------------------------------------- */ .c9-section { padding: clamp(72px, 9vw, 128px) 0; } .c9-section--flush { padding-top: 0; } .c9-section--tint { background: var(--cloud); } .c9-section--stone { background: var(--stone); } .c9-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); } .c9-section__head:has(.c9-section__sub) { display: block; } .c9-section__head--center { display: block; text-align: center; } .c9-section__head--center .c9-section__sub { margin-inline: auto; } .c9-section__sub { color: var(--slate); max-width: 52ch; margin-top: 14px; font-size: 1.0625rem; } .c9-grid--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 44px 24px; } /* Scroll reveals (only when JavaScript is running, so nothing is ever hidden without it). */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--spring-soft), transform 1.1s var(--spring); transition-delay: calc(var(--i, 0) * 80ms); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="scale"] { transform: scale(.96); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* Placeholders ---------------------------------------------------------- */ .c9-ph { position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 100%; display: grid; place-items: end start; background: linear-gradient(160deg, #efe5de 0%, #f6f2ee 55%, #ebe8e5 100%); color: var(--slate); } .c9-ph__cloud { position: absolute; border-radius: 50%; background: #fff; filter: blur(18px); opacity: .9; } .c9-ph__cloud--a { width: 55%; height: 26%; left: -8%; top: 22%; } .c9-ph__cloud--b { width: 45%; height: 20%; right: -6%; top: 48%; opacity: .75; } .c9-ph__label { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 14px; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); font-size: .75rem; font-weight: 600; } .c9-ph__label:has(> svg:only-child) { display: none; } .c9-ph__label .c9-icon { width: 14px; height: 14px; } /* Cards ----------------------------------------------------------------- */ .c9-card__link { display: block; text-decoration: none; color: inherit; } .c9-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--cloud); transition: transform .55s var(--spring), box-shadow .55s var(--spring-soft); } .c9-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--spring-soft); } .c9-card__link:hover .c9-card__media { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .c9-card__link:hover .c9-card__media img { transform: scale(1.04); } .c9-card__link:active .c9-card__media { transform: translateY(-1px) scale(.99); transition-duration: .1s; } .c9-card__body { padding: 16px 2px 0; } .c9-card__city { font-size: .875rem; color: var(--slate); font-weight: 500; } .c9-card__title { margin-top: 2px; font-size: 1.1875rem; } .c9-card__price { margin-top: 10px; font-size: .9375rem; color: var(--slate); } .c9-card__price strong { color: var(--ink); font-weight: 600; font-size: 1.0625rem; } .c9-card__badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 10px; border-radius: var(--r-sm); background: #e8f3ed; color: var(--success); font-size: .8125rem; font-weight: 600; } .c9-card__badge .c9-icon { width: 14px; height: 14px; } .c9-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--slate); font-size: .9375rem; } .c9-facts li { display: inline-flex; align-items: center; gap: 7px; } .c9-facts .c9-icon { width: 18px; height: 18px; } .c9-facts--compact { gap: 4px 14px; font-size: .875rem; margin-top: 8px; } .c9-facts--compact .c9-icon { width: 16px; height: 16px; } /* Cities ---------------------------------------------------------------- */ .c9-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .c9-city a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; transition: transform .55s var(--spring), box-shadow .55s var(--spring-soft); } .c9-city a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .c9-city img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--spring-soft); } .c9-city a:hover img { transform: scale(1.05); } .c9-city a::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 45%, rgba(20, 20, 20, .55)); } .c9-city__name { position: absolute; left: 20px; bottom: 18px; z-index: 1; font: 600 1.4375rem/1.15 var(--font-display); letter-spacing: -0.02em; } .c9-city .c9-ph__label { display: none; } .c9-city a:has(.c9-ph) { color: var(--ink); } .c9-city a:has(.c9-ph)::after { background: none; } .c9-cities li:nth-child(4n+1) .c9-ph { background: var(--blush); } .c9-cities li:nth-child(4n+2) .c9-ph { background: var(--stone); } .c9-cities li:nth-child(4n+3) .c9-ph { background: var(--sand); } .c9-cities li:nth-child(4n+4) .c9-ph { background: #ece6e1; } /* Split ("why stay") ----------------------------------------------------- */ .c9-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .c9-split__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; } .c9-split__media img, .c9-split__media .c9-ph { width: 100%; height: 115%; object-fit: cover; will-change: transform; } .c9-split__body h2 { max-width: 16ch; } .c9-points { margin: 34px 0 38px; display: grid; gap: 26px; } .c9-points li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: start; } .c9-points li > .c9-icon { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--blush); color: var(--ink); } .c9-points p { color: var(--slate); margin-top: 4px; } /* Owners: tile grid in blush, stone and sand with photos between, as on the current site. */ .c9-owners__head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); } .c9-owners__head p { color: var(--slate); font-size: 1.125rem; margin-top: 16px; } .c9-services { display: grid; grid-template-columns: 1.2fr .85fr 1.2fr; gap: 16px; margin-bottom: 44px; } .c9-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 340px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--stone); } .c9-tile h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.02em; max-width: 12ch; } .c9-tile p { color: #3a3a3a; max-width: 40ch; } .c9-tile--blush { background: var(--blush); } .c9-tile--sand { background: var(--sand); } .c9-tile--photo { padding: 0; overflow: hidden; } .c9-tile--photo img, .c9-tile--photo .c9-ph { width: 100%; height: 100%; object-fit: cover; } .c9-owners__cta { display: flex; justify-content: center; } /* Reviews: white cards on a stone band. --------------------------------- */ .c9-rail-nav { display: flex; gap: 8px; } .c9-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 84vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 4px 0 12px; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; } .c9-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .c9-rail.is-animating { scroll-snap-type: none; } .c9-rail::-webkit-scrollbar { display: none; } .c9-review { scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; min-height: 360px; padding: 28px 24px 22px; border-radius: var(--r-md); background: var(--paper); transition: transform .55s var(--spring), box-shadow .55s var(--spring-soft); } .c9-review:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .c9-review--image { padding: 0; overflow: hidden; } .c9-review__img { width: 100%; height: auto; } .c9-review__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .c9-review__name { font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -0.015em; } .c9-review__source { font-size: .8125rem; color: var(--slate); } .c9-review__stars { letter-spacing: .12em; font-size: .875rem; } .c9-review blockquote { margin: 0; font-size: 1.125rem; line-height: 1.45; flex: 1; } .c9-review__stay { font-size: .8125rem; color: var(--slate); } /* Contact & forms ------------------------------------------------------- */ .c9-contact { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .c9-contact__intro p { color: var(--slate); margin-top: 16px; max-width: 40ch; } .c9-contact__list { margin-top: 28px; display: grid; gap: 14px; } .c9-contact__list li { display: flex; align-items: center; gap: 12px; } .c9-contact__list a { text-decoration: none; font-weight: 500; } .c9-contact__list a:hover { text-decoration: underline; text-underline-offset: 3px; } .c9-contact__form { background: var(--paper); border-radius: var(--r-xl); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow-card); } .c9-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .c9-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; } .c9-field label { font-size: .875rem; font-weight: 600; } .c9-optional { font-weight: 400; color: var(--slate); } .c9-field input, .c9-field select, .c9-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d6d3d0; border-radius: var(--r-sm); background: var(--paper); font-size: 1rem; transition: border-color .2s ease, box-shadow .3s var(--spring-soft); } .c9-field textarea { resize: vertical; min-height: 130px; } .c9-field input:hover, .c9-field select:hover, .c9-field textarea:hover { border-color: #a9a6a3; } .c9-field input:focus, .c9-field select:focus, .c9-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30, 30, 30, .1); } .c9-field [aria-invalid="true"] { border-color: var(--danger); animation: c9-shake .45s var(--spring); } .c9-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .c9-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .c9-form__note { font-size: .875rem; color: var(--slate); } .c9-form__status { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 20px; font-weight: 500; animation: c9-rise .45s var(--spring) both; } .c9-form__status.is-success { background: #e8f3ed; color: var(--success); } .c9-form__status.is-error { background: #f8e9e9; color: var(--danger); } .c9-form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; } /* Page heads ------------------------------------------------------------ */ .c9-page-head { padding: clamp(44px, 6vw, 80px) 0 clamp(36px, 5vw, 56px); } .c9-page-head h1 { animation: c9-rise .9s var(--spring) both; } .c9-page-head__sub { margin-top: 12px; color: var(--slate); font-size: 1.125rem; max-width: 52ch; animation: c9-rise .9s var(--spring) .08s both; } .c9-page-head .c9-search { animation: c9-rise 1s var(--spring-soft) .16s both; } .c9-page-head--center { text-align: center; padding: clamp(80px, 12vw, 160px) 0; } .c9-page-head--center .c9-page-head__sub { margin-inline: auto; } .c9-page-head--center .c9-about__actions { justify-content: center; } .c9-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .c9-chip { padding: 9px 16px; border-radius: var(--r-btn); border: 1px solid var(--line); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .12s ease-out; } .c9-chip:hover { border-color: var(--ink); } .c9-chip:active { transform: scale(.96); } .c9-chip.is-current { background: var(--ink); border-color: var(--ink); color: #fff; } .c9-results:empty { display: none; } .c9-results__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .c9-results__head h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); } .c9-results .c9-card { animation: c9-rise .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms); } .is-searching [data-c9-all] { display: none; } .c9-empty { text-align: center; padding: clamp(40px, 8vw, 96px) 24px; border-radius: var(--r-xl); background: var(--cloud); } .c9-empty h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); } .c9-empty p { color: var(--slate); margin: 12px auto 28px; max-width: 46ch; } .c9-skeleton { border-radius: var(--r-lg); background: linear-gradient(90deg, var(--cloud), var(--stone), var(--cloud)); background-size: 200% 100%; animation: c9-shimmer 1.4s ease-in-out infinite; aspect-ratio: 4 / 3; } @keyframes c9-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* About ----------------------------------------------------------------- */ .c9-about { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .c9-about__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; position: sticky; top: calc(var(--header-h) + 24px); } .c9-about__media img, .c9-about__media .c9-ph { width: 100%; height: 100%; object-fit: cover; } .c9-about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } /* Prose ----------------------------------------------------------------- */ .c9-prose { font-size: 1.0625rem; line-height: 1.7; } .c9-prose > * + * { margin-top: 1.1em; } .c9-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.8em; } .c9-prose h3 { margin-top: 1.6em; } .c9-prose .is-lead, .c9-prose > p:first-child { font-size: 1.3125rem; line-height: 1.5; color: var(--ink); } .c9-prose p, .c9-prose li { color: #3a3a3a; } .c9-prose ul { list-style: disc; padding-left: 1.25em; } .c9-prose a { color: var(--ink); text-underline-offset: 3px; } .c9-list { display: grid; gap: 36px; } .c9-list h2 { font-size: 1.5rem; } .c9-list h2 a { text-decoration: none; } /* Property -------------------------------------------------------------- */ .c9-crumbs { display: flex; gap: 10px; padding-top: 28px; font-size: .9375rem; color: var(--slate); } .c9-crumbs a { text-decoration: none; } .c9-crumbs a:hover { color: var(--ink); } .c9-property__head { padding: 14px 0 28px; } .c9-property__head h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); animation: c9-rise .9s var(--spring) both; } .c9-property__head .c9-facts { margin-top: 14px; font-size: 1rem; animation: c9-rise .9s var(--spring) .08s both; } .c9-gallery { position: relative; display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(300px, 44vw, 560px); border-radius: var(--r-xl); overflow: hidden; animation: c9-rise 1s var(--spring-soft) .12s both; } .c9-gallery__item { all: unset; position: relative; overflow: hidden; cursor: zoom-in; background: var(--cloud); } .c9-gallery__item:disabled { cursor: default; } .c9-gallery__item:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; } .c9-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--spring-soft), filter .3s ease; } .c9-gallery__item:not(:disabled):hover img { transform: scale(1.03); filter: brightness(.94); } .c9-gallery__item--0 { grid-row: 1 / 3; } .c9-gallery__item--2 .c9-ph { background: var(--blush); } .c9-gallery__item--3 .c9-ph { background: var(--stone); } .c9-gallery__item--4 .c9-ph { background: var(--sand); } .c9-gallery--single { grid-template-columns: 1fr; grid-template-rows: 1fr; } .c9-gallery--single .c9-gallery__item:not(.c9-gallery__item--0) { display: none; } .c9-gallery__all { position: absolute; right: 16px; bottom: 16px; } .c9-property__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 6vw, 80px); padding: clamp(36px, 5vw, 56px) 0 clamp(64px, 9vw, 112px); } .c9-block { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); } .c9-block h2 { font-size: 1.625rem; margin-bottom: 8px; } .c9-times { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; color: var(--slate); } .c9-times li { display: inline-flex; align-items: center; gap: 8px; } .c9-times strong { color: var(--ink); } .c9-amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 20px; } .c9-amenities li { display: flex; align-items: center; gap: 10px; } .c9-amenities .c9-icon { width: 18px; height: 18px; } .c9-map { margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--cloud); } .c9-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); } .c9-property__aside { position: relative; } .c9-book { position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-card); animation: c9-rise 1s var(--spring-soft) .2s both; } .c9-book__price { font-size: 1rem; color: var(--slate); margin-bottom: 20px; } .c9-book__price strong { font: 600 1.75rem/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; } .c9-book__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .c9-book .c9-field { margin-bottom: 14px; } .c9-book .c9-field input, .c9-book .c9-field select { min-height: 48px; padding: 10px 12px; font-size: .9375rem; } .c9-book__summary { margin: 4px 0 16px; font-size: .9375rem; } .c9-book__summary:empty { display: none; } .c9-book__summary > * { animation: c9-rise .45s var(--spring) both; } .c9-book__line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .c9-book__line strong { font-size: 1.125rem; } .c9-book__ok { color: var(--success); font-weight: 500; display: flex; gap: 6px; align-items: center; } .c9-book__ok .c9-icon { width: 18px; height: 18px; } .c9-book__warn { color: var(--danger); } .c9-book__note { margin-top: 12px; font-size: .8125rem; color: var(--slate); text-align: center; } /* Calendar -------------------------------------------------------------- */ .c9-cal { margin-top: 20px; } .c9-cal__nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .c9-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .c9-cal__months.is-next { animation: c9-slide-l .45s var(--spring) both; } .c9-cal__months.is-prev { animation: c9-slide-r .45s var(--spring) both; } @keyframes c9-slide-l { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes c9-slide-r { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } .c9-cal__month h3 { font-size: 1.0625rem; text-align: center; margin-bottom: 12px; font-weight: 600; } .c9-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } .c9-cal__dow { text-align: center; font-size: .75rem; font-weight: 600; color: var(--slate); padding-bottom: 6px; } .c9-cal__day { all: unset; box-sizing: border-box; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-md); cursor: pointer; font-size: .9375rem; font-weight: 500; line-height: 1.1; transition: background-color .2s ease, color .2s ease, transform .12s ease-out; } .c9-cal__day small { font-size: .6875rem; font-weight: 500; color: var(--slate); margin-top: 2px; } .c9-cal__day:hover:not(:disabled):not(.is-start):not(.is-end):not(.is-range) { background: var(--cloud); } .c9-cal__day.is-range:hover { background: color-mix(in srgb, var(--blush) 80%, var(--sand)); } .c9-cal__day:active:not(:disabled) { transform: scale(.92); } .c9-cal__day:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .c9-cal__day:disabled { cursor: default; color: #b9b6b3; text-decoration: line-through; text-decoration-color: rgba(185, 182, 179, .8); } .c9-cal__day:disabled small { visibility: hidden; } .c9-cal__day.is-range { background: var(--blush); border-radius: 0; } .c9-cal__day.is-start, .c9-cal__day.is-end { background: var(--ink); color: #fff; animation: c9-pop .4s var(--spring); } .c9-cal__day.is-start small, .c9-cal__day.is-end small { color: rgba(255, 255, 255, .78); } .c9-cal__day.is-start { border-radius: var(--r-md) 0 0 var(--r-md); } .c9-cal__day.is-end { border-radius: 0 var(--r-md) var(--r-md) 0; } .c9-cal__day.is-start.is-end { border-radius: var(--r-md); } .c9-cal__day.is-blank { visibility: hidden; } @keyframes c9-pop { from { transform: scale(.82); } to { transform: none; } } .c9-cal__msg { margin-top: 10px; font-size: .875rem; min-height: 1.3em; } /* Lightbox: photos grow out of the thumbnail you tapped and return to it. */ .c9-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18, 18, 18, 0); color: #fff; transition: background-color .35s ease; } .c9-lightbox[open] { display: flex; flex-direction: column; } .c9-lightbox.is-shown { background: rgba(18, 18, 18, .96); } .c9-lightbox::backdrop { background: transparent; } .c9-lightbox__bar, .c9-lightbox__stage > .c9-round { opacity: 0; transition: opacity .3s ease .1s; } .c9-lightbox.is-shown .c9-lightbox__bar, .c9-lightbox.is-shown .c9-lightbox__stage > .c9-round { opacity: 1; } .c9-lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); font-size: .9375rem; } .c9-lightbox__stage { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 var(--gutter) 24px; min-height: 0; } .c9-lightbox__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; scrollbar-width: none; } .c9-lightbox__track::-webkit-scrollbar { display: none; } .c9-lightbox__track li { scroll-snap-align: center; display: grid; place-items: center; min-height: 0; } .c9-lightbox__track img { max-height: calc(100vh - 120px); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--r-sm); } /* Footer ---------------------------------------------------------------- */ .c9-footer { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: .9688rem; } .c9-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; } .c9-footer__brand p { color: var(--slate); margin-top: 16px; max-width: 34ch; } .c9-footer__member { margin-top: 24px; } .c9-footer__member img { max-height: 52px; width: auto; } .c9-footer__title { font: 600 1rem/1 var(--font-display); margin-bottom: 16px; letter-spacing: 0; } .c9-footer__list { display: grid; gap: 10px; } .c9-footer__list a { text-decoration: none; color: var(--slate); transition: color .2s ease; } .c9-footer__list a:hover { color: var(--ink); } .c9-social { display: flex; gap: 8px; margin-top: 18px; } .c9-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); color: var(--ink); transition: background-color .2s ease, color .2s ease, transform .12s ease-out; } .c9-social a:hover { background: var(--ink); color: #fff; } .c9-social a:active { transform: scale(.92); } .c9-social .c9-icon { width: 18px; height: 18px; } .c9-footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; color: var(--slate); font-size: .875rem; background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - var(--gutter) * 2) 1px no-repeat; } .c9-footer__base a { color: inherit; } /* WordPress bits ---------------------------------------------------------- */ .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line); text-decoration: none; } .nav-links .current { background: var(--ink); color: #fff; border-color: var(--ink); } .wp-block-image img { border-radius: var(--r-md); } /* Responsive ------------------------------------------------------------ */ @media (max-width: 1060px) { .c9-search { grid-template-columns: 1fr 1fr; gap: 4px; } .c9-search__field + .c9-search__field::before { display: none; } .c9-search__field { background: rgba(30, 30, 30, .03); } .c9-search__go { grid-column: 1 / -1; min-height: 54px; } .c9-services { grid-template-columns: 1fr 1fr; } .c9-tile--photo { display: none; } .c9-property__layout { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 900px) { .c9-nav, .c9-header__actions .c9-btn { display: none; } .c9-header__actions { margin-left: auto; } .c9-menu-toggle { display: grid; } .c9-cities { grid-template-columns: 1fr 1fr; } .c9-split, .c9-contact, .c9-about { grid-template-columns: 1fr; } .c9-split__media { aspect-ratio: 4 / 3; } .c9-about__media { position: static; aspect-ratio: 4 / 3; } .c9-property__layout { grid-template-columns: 1fr; } .c9-book { position: static; } .c9-property__aside { order: -1; } .c9-footer__grid { grid-template-columns: 1fr 1fr; } .c9-footer__brand { grid-column: 1 / -1; } } @media (max-width: 640px) { body { font-size: 1rem; } :root { --header-h: 66px; } .c9-logo__mark { height: 34px; } .c9-wordmark { font-size: 1.125rem; } .c9-hero { min-height: 90svh; } .c9-search { padding: 6px; } .c9-search__field { padding: 8px 14px; } .c9-services { grid-template-columns: 1fr; } .c9-tile { min-height: 0; gap: 28px; } .c9-form__row { grid-template-columns: 1fr; } .c9-gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-lg); } .c9-gallery__item:not(.c9-gallery__item--0) { display: none; } .c9-gallery__item--0 { grid-row: auto; } .c9-cal__months { grid-template-columns: 1fr; } .c9-cal__month + .c9-cal__month { display: none; } .c9-amenities { grid-template-columns: 1fr; } .c9-lightbox__stage { grid-template-columns: 1fr; padding: 0 0 24px; } .c9-lightbox__stage > .c9-round { display: none; } } /* Accessibility preferences --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .c9-hero__media img { transform: none; } .c9-hero__title .c9-word { opacity: 1; transform: none; filter: none; } } @media (prefers-reduced-transparency: reduce) { .c9-header, .c9-search, .c9-btn--glass { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (prefers-contrast: more) { .c9-search, .c9-book, .c9-contact__form { border: 2px solid var(--ink); } .c9-muted, .c9-card__city, .c9-facts { color: var(--ink); } } /* Let grid children shrink on small screens (date inputs have a wide intrinsic size). */ .c9-property__layout > *, .c9-book__dates > *, .c9-form__row > * { min-width: 0; } .c9-book__dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .c9-field input[type="date"] { min-width: 0; width: 100%; } /* ========================================================================== Motion v2 ========================================================================== */ /* Cross-page transitions (Chrome/Edge/Safari 18+; other browsers simply load the page). A property card's photo and title glide into the property page and back again: enter and exit along the same path, anchored to where you tapped. */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); } ::view-transition-old(root) { animation: c9-vt-out .22s ease both; } ::view-transition-new(root) { animation: c9-vt-in .42s cubic-bezier(.22, 1, .36, 1) .06s both; } ::view-transition-image-pair(*) { isolation: auto; } ::view-transition-old(*):not(:only-child), ::view-transition-new(*):not(:only-child) { mix-blend-mode: normal; height: 100%; width: 100%; object-fit: cover; } @keyframes c9-vt-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes c9-vt-in { from { opacity: 0; transform: translateY(12px); } } .c9-header { view-transition-name: c9-header; } ::view-transition-group(c9-header) { animation-duration: 0s; } .c9-card__title span, .c9-property__head h1 span { display: inline-block; } /* Headings wipe up from a mask instead of fading. */ .js h2[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: clip-path 1s var(--spring), translate 1s var(--spring); } .js h2[data-reveal].is-in { clip-path: inset(-0.2em -0.1em -0.25em -0.1em); translate: 0 0; } /* Photos ease into focus as they load. */ .js .c9-card__media img, .js .c9-gallery__item img, .js .c9-city img, .js .c9-split__media img, .js .c9-tile--photo img { opacity: 0; scale: 1.04; transition: opacity .7s ease, scale 1.2s var(--spring-soft), transform .9s var(--spring-soft); } .js .c9-card__media img.is-loaded, .js .c9-gallery__item img.is-loaded, .js .c9-city img.is-loaded, .js .c9-split__media img.is-loaded, .js .c9-tile--photo img.is-loaded { opacity: 1; scale: 1; } /* Gallery tiles cascade in. */ .c9-gallery { animation: none; } .c9-gallery__item { animation: c9-tile-in .9s var(--spring) both; animation-delay: calc(.08s + var(--i, 0) * .07s); } @keyframes c9-tile-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } /* The booking total pulses softly when it changes. */ .c9-book__total { display: inline-block; font-variant-numeric: tabular-nums; } .c9-book__total.is-bump { animation: c9-bump .5s var(--spring); } @keyframes c9-bump { 40% { transform: scale(1.06); } } /* Jetpack add-ons that don't belong on property pages. */ .c9-property .jp-relatedposts, .c9-property .sharedaddy, .c9-property .wpl-likebox, .c9-property #jp-post-flair { display: none !important; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .js h2[data-reveal] { clip-path: none; translate: none; } .js .c9-card__media img, .js .c9-gallery__item img, .js .c9-city img, .js .c9-split__media img, .js .c9-tile--photo img { opacity: 1; filter: none; scale: 1; } } /* ========================================================================== Cookie consent ========================================================================== */ .c9-consent { position: fixed; z-index: 90; left: 20px; bottom: 20px; width: min(460px, calc(100vw - 40px)); padding: 22px; background: rgba(255, 255, 255, .94); color: var(--ink); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(24px) scale(.98); transform-origin: bottom left; transition: opacity .35s ease, transform .55s var(--spring); } .c9-consent.is-shown { opacity: 1; transform: none; } .c9-consent__title { font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -0.01em; } .c9-consent__text { margin-top: 8px; font-size: .9375rem; color: #3a3a3a; } .c9-consent__text a { color: var(--ink); text-underline-offset: 3px; } .c9-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; } .c9-consent__actions [data-c9-consent="manage"] { grid-column: 1 / -1; } .c9-prefs { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .45s var(--spring); } .c9-prefs.is-shown { opacity: 1; transform: none; } .c9-prefs::backdrop { background: rgba(30, 30, 30, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .c9-prefs__inner { padding: clamp(20px, 4vw, 32px); } .c9-prefs__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; } .c9-prefs__head h2 { font-size: 1.625rem; } .c9-prefs__list { margin: 20px 0; border-top: 1px solid var(--line); } .c9-pref { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .c9-pref h3 { font-size: 1.0625rem; } .c9-pref p { font-size: .875rem; color: var(--slate); margin-top: 2px; } .c9-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; } .c9-switch { position: relative; width: 50px; height: 30px; border-radius: 999px; background: #d4d1ce; transition: background-color .25s ease; flex: none; } .c9-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .4s var(--spring); } .c9-switch-input:checked + .c9-switch { background: var(--ink); } .c9-switch-input:checked + .c9-switch span, .c9-switch.is-locked span { transform: translateX(20px); } .c9-switch.is-locked { background: #9a9794; } .c9-switch-input:focus-visible + .c9-switch { outline: 2px solid var(--ink); outline-offset: 3px; } .c9-prefs__actions { display: flex; flex-wrap: wrap; gap: 8px; } .c9-prefs__foot { margin-top: 16px; font-size: .8125rem; color: var(--slate); } .c9-prefs__foot a { color: inherit; } @media (max-width: 640px) { .c9-consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; } } @media (prefers-reduced-motion: reduce) { .c9-consent, .c9-prefs { transform: none; } } /* Legal pages */ .c9-legal-updated { font-size: .875rem; color: var(--slate) !important; } .c9-table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--line); border-radius: var(--r-lg); } .c9-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 640px; } .c9-table th, .c9-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .c9-table th { background: var(--cloud); font-weight: 600; } .c9-table tr:last-child td { border-bottom: 0; } .c9-table code { font-size: .8125rem; background: var(--cloud); padding: 2px 6px; border-radius: 4px; } .c9-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .c9-footer__legal a, .c9-footer__legal button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; } .c9-footer__legal a:hover, .c9-footer__legal button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== Guest guides ========================================================================== */ /* Gate */ .c9-gate { position: relative; isolation: isolate; min-height: calc(100svh - var(--header-h)); display: grid; place-items: center; padding: 48px var(--gutter); overflow: hidden; } .c9-gate__sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 60% at 15% 20%, rgba(227, 199, 179, .55), transparent 65%), radial-gradient(80% 60% at 90% 75%, rgba(228, 228, 228, .9), transparent 60%), linear-gradient(180deg, #f3e9e2 0%, #f8f3ef 55%, #fff 100%); } .c9-gate__card { width: min(620px, 100%); text-align: center; padding: clamp(32px, 6vw, 56px); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-xl); box-shadow: var(--shadow-float); animation: c9-rise 1s var(--spring-soft) .1s both; } .c9-gate__mark { width: 72px; height: auto; margin: 0 auto 18px; } .c9-gate__title { font-size: clamp(2.5rem, 7vw, 4rem); } .c9-gate__title .c9-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: c9-word .9s var(--spring) forwards; animation-delay: calc(.2s + var(--w, 0) * .08s); } .c9-gate__sub { color: var(--slate); max-width: 44ch; margin: 14px auto 28px; font-size: 1.0625rem; } .c9-gate__form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; } .c9-gate__form input { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 1px solid #d6d3d0; border-radius: var(--r-md); background: #fff; font: 600 1.0625rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; transition: border-color .2s ease, box-shadow .3s var(--spring-soft); } .c9-gate__form input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 400; color: #8a8784; } .c9-gate__form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(30, 30, 30, .08); } .c9-gate__form input[aria-invalid="true"] { border-color: var(--danger); animation: c9-shake .45s var(--spring); } .c9-gate__form .c9-btn { --h: 54px; } .c9-gate__msg { margin-top: 14px; color: var(--danger); font-weight: 500; animation: c9-rise .4s var(--spring) both; } .c9-gate__help { margin-top: 22px; font-size: .875rem; color: var(--slate); } .c9-gate__help a { color: var(--ink); } .c9-staff-list { display: grid; gap: 8px; } .c9-staff-list li { display: flex; gap: 16px; align-items: baseline; padding: 14px 18px; background: var(--paper); border-radius: var(--r-md); } .c9-staff-list li > a:first-child { font-weight: 600; text-decoration: none; flex: 1; } /* Staff bar and notes */ .c9g-staffbar { background: var(--ink); color: #fff; font-size: .875rem; } .c9g-staffbar .c9-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; } .c9g-staffbar span { display: inline-flex; align-items: center; gap: 8px; } .c9g-staffbar a { color: #fff; font-weight: 600; } .c9g-todo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px dashed #c9b6a6; border-radius: var(--r-md); background: #fbf5f0; color: #6b5442; font-size: .875rem; margin-top: 12px; } .c9g-todo em { opacity: .7; } /* Hero */ .c9g-hero { position: relative; isolation: isolate; min-height: min(78svh, 680px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; } .c9g-hero__media { position: absolute; inset: 0; z-index: -1; } .c9g-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: c9-settle 2.6s var(--spring-soft) forwards; } .c9g-hero.has-image .c9g-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, .1) 30%, rgba(20, 20, 20, .7) 100%); } .c9g-hero.is-sky { color: var(--ink); } .c9g-hero.is-sky .c9g-hero__media { background: radial-gradient(90% 60% at 15% 20%, rgba(227, 199, 179, .55), transparent 65%), radial-gradient(80% 60% at 90% 75%, rgba(228, 228, 228, .9), transparent 60%), linear-gradient(180deg, #f3e9e2 0%, #f8f3ef 55%, #fff 100%); } .c9g-hero__copy { padding-top: 120px; padding-bottom: clamp(56px, 8vw, 88px); } .c9g-hero__eyebrow { font-weight: 600; font-size: .9375rem; opacity: .85; animation: c9-rise .8s var(--spring-soft) both; } .c9g-hero__title { max-width: 18ch; margin-top: 10px; } .c9g-hero__title .c9-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: c9-word .9s var(--spring) forwards; animation-delay: calc(.1s + var(--w, 0) * .07s); } .c9g-hero__intro { max-width: 56ch; margin-top: 16px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); opacity: .92; animation: c9-rise 1s var(--spring-soft) .45s both; } .c9g-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; animation: c9-rise 1s var(--spring-soft) .55s both; } .c9g-pills li { padding: 8px 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .c9g-hero.is-sky .c9g-pills li { background: rgba(255, 255, 255, .7); border-color: var(--line); } /* Quick links */ .c9g-quick { margin-top: -36px; position: relative; z-index: 2; } .c9g-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .c9g-quick li { animation: c9-rise .8s var(--spring) both; animation-delay: calc(.5s + var(--i, 0) * .07s); } .c9g-quick a { display: grid; gap: 2px; height: 100%; padding: 20px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: transform .5s var(--spring), box-shadow .5s var(--spring-soft); } .c9g-quick a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .c9g-quick a:active { transform: translateY(-1px) scale(.98); transition-duration: .1s; } .c9g-quick .c9-icon { width: 28px; height: 28px; margin-bottom: 10px; } .c9g-quick small { color: var(--slate); font-size: .8125rem; } /* Sections */ .c9g-main { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(72px, 9vw, 120px); } .c9g-section { margin-bottom: clamp(56px, 7vw, 88px); scroll-margin-top: calc(var(--header-h) + 20px); } .c9g-head { margin-bottom: 24px; max-width: 760px; } .c9g-head p { color: var(--slate); margin-top: 10px; font-size: 1.0625rem; } .c9g-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .c9g-cards--three { grid-template-columns: repeat(3, 1fr); } .c9g-card { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } .c9g-card > .c9-icon { width: 26px; height: 26px; margin-bottom: 14px; } .c9g-card h3 { margin-bottom: 6px; } .c9g-card p { color: #3a3a3a; } .c9g-big { font: 600 1.5rem/1.2 var(--font-display); color: var(--ink) !important; letter-spacing: -0.01em; margin: 4px 0; word-break: break-word; } .c9g-mono { font-variant-numeric: tabular-nums; } .c9g-wifi .c9-btn { margin-top: 14px; } .c9g-wifi .c9-btn.is-copied { background: var(--ink); color: #fff; } .c9g-card--access { background: var(--blush); border-color: transparent; } .c9g-secrets { display: grid; gap: 12px; margin-top: 10px; } .c9g-secrets li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } .c9g-secrets__label { font-weight: 600; } .c9g-secrets__note { grid-column: 1 / -1; font-size: .875rem; color: #4a4a4a; } .c9g-secret { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(30, 30, 30, .2); border-radius: var(--r-md); background: rgba(255, 255, 255, .7); font: 600 1.125rem/1 var(--font-display); letter-spacing: .12em; cursor: pointer; transition: background-color .2s ease, transform .12s ease-out; } .c9g-secret:active { transform: scale(.96); } .c9g-secret .c9-icon { width: 18px; height: 18px; } .c9g-secret.is-shown { background: #fff; } .c9g-secret__value { animation: c9-pop .4s var(--spring); } .c9g-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; list-style: none; padding: 0; } .c9g-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .c9g-step__media { aspect-ratio: 4 / 3; background: var(--cloud); } .c9g-step__media img, .c9g-step__media .c9-ph { width: 100%; height: 100%; object-fit: cover; } .c9g-step__body { padding: 18px 20px 22px; } .c9g-step__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; font-size: .875rem; margin-bottom: 10px; } .c9g-step__body p { color: #3a3a3a; margin-top: 4px; } .c9g-gallery { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; height: clamp(240px, 32vw, 420px); } .c9g-gallery__item { border-radius: var(--r-lg); overflow: hidden; } .c9g-gallery__item img { width: 100%; height: 100%; object-fit: cover; } .c9g-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } .c9g-split__media { border-radius: var(--r-lg); overflow: hidden; min-height: 240px; } .c9g-split__media img { width: 100%; height: 100%; object-fit: cover; } /* Troubleshooting */ .c9g-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .c9g-rooms a { display: grid; gap: 2px; padding: 20px; text-decoration: none; color: var(--ink); background: var(--cloud); border-radius: var(--r-lg); transition: background-color .25s ease, transform .5s var(--spring); } .c9g-rooms li:nth-child(3n+1) a { background: var(--blush); } .c9g-rooms li:nth-child(3n+2) a { background: var(--stone); } .c9g-rooms li:nth-child(3n+3) a { background: #eee4dc; } .c9g-rooms a:hover { transform: translateY(-3px); } .c9g-rooms a:active { transform: scale(.98); } .c9g-rooms .c9-icon { width: 26px; height: 26px; margin-bottom: 10px; } .c9g-rooms small { color: #4a4a4a; font-size: .8125rem; } .c9g-accordions { display: grid; gap: 10px; } .c9g-acc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); scroll-margin-top: calc(var(--header-h) + 16px); transition: box-shadow .4s var(--spring-soft); } .c9g-acc[open] { box-shadow: var(--shadow-card); } .c9g-acc summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; } .c9g-acc summary::-webkit-details-marker { display: none; } .c9g-acc summary .c9-icon { width: 22px; height: 22px; } .c9g-acc summary span { flex: 1; } .c9g-acc summary i { position: relative; width: 14px; height: 14px; } .c9g-acc summary i::before, .c9g-acc summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .45s var(--spring); } .c9g-acc summary i::after { transform: rotate(90deg); } .c9g-acc[open] summary i::after { transform: rotate(0); } .c9g-acc__body { overflow: hidden; } .c9g-acc__inner { padding: 0 20px 20px; display: grid; gap: 8px; } .c9g-issue { padding: 14px 16px; background: var(--cloud); border-radius: var(--r-md); } .c9g-issue p { margin-top: 4px; color: #3a3a3a; font-size: .9688rem; } .c9g-issue .c9g-todo { margin-top: 8px; } /* Recommendations and events */ .c9g-tag { display: inline-block; padding: 5px 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .7); font-size: .75rem; font-weight: 600; margin-bottom: 16px; } .c9g-rec { border: 0; transition: transform .5s var(--spring); } .c9g-rec:hover { transform: translateY(-3px); } .c9g-tint-0 { background: var(--blush); } .c9g-tint-1 { background: var(--stone); } .c9g-tint-2 { background: var(--sand); } .c9g-rec .c9-link { display: inline-block; margin-top: 14px; } .c9g-events { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 16px; align-items: start; } .c9g-cal { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } .c9g-cal__title { font: 600 1.375rem/1.2 var(--font-display); margin-bottom: 14px; } .c9g-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .c9g-cal__dow { text-align: center; font-size: .75rem; font-weight: 600; color: var(--slate); padding: 4px 0; } .c9g-cal__day { height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); font-size: .875rem; background: var(--cloud); } .c9g-cal__day.is-weekend { background: #efebe7; } .c9g-cal__day.is-today { background: var(--ink); color: #fff; font-weight: 600; } .c9g-cal__day.is-past { color: #b2afac; } .c9g-events__side { padding: 26px; background: var(--ink); color: #fff; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .c9g-events__side p { color: rgba(255, 255, 255, .75); } .c9g-picks { display: grid; gap: 8px; } .c9g-picks li { padding-left: 14px; position: relative; color: rgba(255, 255, 255, .85); } .c9g-picks li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); } /* Rules and check-out */ .c9g-rules { display: flex; flex-wrap: wrap; gap: 10px; } .c9g-rules li { padding: 10px 16px; border-radius: 999px; background: var(--cloud); border: 1px solid var(--line); font-weight: 500; } .c9g-checklist { display: grid; gap: 8px; list-style: none; padding: 0; max-width: 720px; } .c9g-checklist label { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: background-color .25s ease, border-color .25s ease; } .c9g-checklist input { position: absolute; opacity: 0; width: 1px; height: 1px; } .c9g-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1.5px solid #bdb9b5; border-radius: 50%; color: transparent; transition: background-color .25s ease, border-color .25s ease, color .2s ease, transform .4s var(--spring); } .c9g-check .c9-icon { width: 16px; height: 16px; } .c9g-checklist input:checked + .c9g-check { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.08); } .c9g-checklist input:checked ~ span:last-child { color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(95, 95, 95, .5); } .c9g-checklist input:checked + .c9g-check + span { } .c9g-checklist label:has(input:checked) { background: var(--cloud); } .c9g-checklist input:focus-visible + .c9g-check { outline: 2px solid var(--ink); outline-offset: 3px; } /* Help */ .c9g-help { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); background: var(--ink); color: #fff; border-radius: var(--r-xl); } .c9g-help h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } .c9g-help p { color: rgba(255, 255, 255, .75); margin-top: 8px; } .c9g-help__note { font-size: .875rem; } .c9g-help__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .c9-btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, .5); } .c9-btn--on-dark:hover { background: #fff; color: var(--ink); } .c9g-help__num { width: 100%; font-size: .875rem; color: rgba(255, 255, 255, .7); } .c9g-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; box-shadow: var(--shadow-float); transition: transform .5s var(--spring), opacity .3s ease; } .c9g-fab:active { transform: scale(.95); } .c9g-fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; } .c9g-fab .c9-icon { width: 20px; height: 20px; } @media (max-width: 900px) { .c9g-quick__grid { grid-template-columns: repeat(2, 1fr); } .c9g-cards--three, .c9g-rooms, .c9g-steps { grid-template-columns: 1fr 1fr; } .c9g-events { grid-template-columns: 1fr; } .c9g-help { grid-template-columns: 1fr; } } @media (max-width: 640px) { .c9-gate__form { flex-direction: column; } .c9g-cards, .c9g-cards--three, .c9g-rooms, .c9g-steps, .c9g-split { grid-template-columns: 1fr; } .c9g-gallery { grid-template-columns: 1fr 1fr; height: auto; } .c9g-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } .c9g-gallery__item { aspect-ratio: 1; } .c9g-quick { margin-top: -28px; } .c9g-fab { right: 12px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .c9-gate__title .c9-word, .c9g-hero__title .c9-word { opacity: 1; transform: none; filter: none; } } /* ========================================================================== 1.3: listings, work stays, Team hub, Cloud 9 Stays Pro ========================================================================== */ /* Card highlight */ .c9-card__tag { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .75rem; font-weight: 600; color: var(--ink); } /* Holiday / Work stay switch (segmented control with a sliding pill) */ .c9-versions { position: relative; display: inline-flex; margin-top: 18px; padding: 4px; border-radius: 999px; background: var(--cloud); border: 1px solid var(--line); isolation: isolate; } .c9-versions__opt { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--slate); transition: color .3s ease; } .c9-versions__opt.is-current { color: #fff; } .c9-versions__opt:not(.is-current):hover { color: var(--ink); } .c9-versions__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--spring), width .5s var(--spring); } .c9-versions + .c9-property__head { padding-top: 12px; } /* Homepage contractor band */ .c9-work-band { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .c9-work-band::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(227, 199, 179, .28), transparent); } .c9-work-band h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); max-width: 20ch; } .c9-work-band p { color: rgba(255, 255, 255, .75); margin-top: 10px; max-width: 52ch; } .c9-work-band__actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Work stays page */ .c9-work-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; color: var(--slate); } .c9-work-points li { display: inline-flex; align-items: center; gap: 8px; } .c9-work-points .c9-icon { color: var(--ink); width: 20px; height: 20px; } .c9-pro-cta { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 56px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); background: var(--ink); color: #fff; } .c9-pro-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .c9-pro-cta p { color: rgba(255, 255, 255, .75); margin-top: 8px; max-width: 56ch; } /* -------------------------------------------------------------------------- Team hub ----------------------------------------------------------------------- */ .c9-is-team .c9-footer { display: none; } .c9-team__head { background: var(--cloud); padding: clamp(32px, 5vw, 56px) 0 0; border-bottom: 1px solid var(--line); } .c9-team__hello { color: var(--slate); font-weight: 500; } .c9-team__head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-top: 2px; } .c9-team__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 32px; } .c9-team__stats li { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 2px; } .c9-team__stats strong { font: 600 1.875rem/1 var(--font-display); letter-spacing: -0.02em; } .c9-team__stats span { color: var(--slate); font-size: .875rem; } .c9-team__stats .is-attention { background: var(--blush); border-color: transparent; } .c9-team__tabs { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .c9-team__tabs::-webkit-scrollbar { display: none; } .c9-team__tabs button { position: relative; z-index: 1; flex: none; padding: 14px 18px; border: 0; background: none; font: 600 1rem/1 var(--font-body); color: var(--slate); cursor: pointer; transition: color .25s ease; } .c9-team__tabs button[aria-selected="true"] { color: var(--ink); } .c9-team__tabs-pill { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink); transition: transform .5s var(--spring), width .5s var(--spring); } .c9-team__body { padding-top: 28px; padding-bottom: 96px; } .c9-team__panel:not([hidden]) { animation: c9-rise .45s var(--spring) both; } .c9-team__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 18px; } .c9-team__bar .c9-muted { flex: 1; min-width: 220px; font-size: .9375rem; } .c9-team__search { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px; min-width: 260px; border: 1px solid #d6d3d0; border-radius: var(--r-md); background: var(--paper); } .c9-team__search .c9-icon { width: 18px; height: 18px; color: var(--slate); } .c9-team__search input { border: 0; outline: 0; background: none; flex: 1; font-size: 1rem; } .c9-team__search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30, 30, 30, .08); } .c9-team__list { display: grid; gap: 10px; } .c9-team__empty { padding: 32px; text-align: center; color: var(--slate); background: var(--cloud); border-radius: var(--r-lg); } .c9-team__intro { margin-bottom: 20px; max-width: 720px; } .c9-team__intro h2 { font-size: 1.75rem; } .c9-team__intro p { margin-top: 6px; } .c9-trow { position: relative; display: grid; grid-template-columns: 56px minmax(180px, 1.4fr) auto auto minmax(140px, .8fr) minmax(160px, 1fr) 76px auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); transition: opacity .3s ease, box-shadow .3s ease; } .c9-trow:hover { box-shadow: var(--shadow-card); } .c9-trow.is-off { background: var(--cloud); } .c9-trow.is-off .c9-trow__thumb, .c9-trow.is-off .c9-trow__main { opacity: .55; } .c9-trow.is-saving { opacity: .75; } .c9-trow__thumb { width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--cloud); display: grid; place-items: center; color: var(--slate); } .c9-trow__thumb img { width: 100%; height: 100%; object-fit: cover; } .c9-trow__main h3 { font-size: 1rem; } .c9-trow__main p { font-size: .8125rem; margin-top: 2px; } .c9-trow__actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .c9-trow__saved { position: absolute; right: 16px; top: -10px; padding: 3px 8px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 600; opacity: 0; pointer-events: none; } .c9-trow__saved.is-on { animation: c9-saved 1.6s var(--spring) both; } .c9-trow__saved.is-bad { background: var(--danger); } @keyframes c9-saved { 0% { opacity: 0; transform: translateY(4px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } } .c9-tctl { display: grid; gap: 4px; font-size: .8125rem; cursor: pointer; } .c9-tctl__label { color: var(--slate); font-weight: 600; font-size: .75rem; } .c9-tctl select, .c9-tctl input[type="number"] { height: 38px; padding: 0 10px; border: 1px solid #d6d3d0; border-radius: var(--r-sm); background: var(--paper); font-size: .875rem; min-width: 0; width: 100%; } .c9-tctl--switch { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; } .c9-tctl--switch .c9-switch { width: 44px; height: 26px; } .c9-tctl--switch .c9-switch span { width: 20px; height: 20px; } .c9-tctl--switch .c9-switch-input:checked + .c9-switch span { transform: translateX(18px); } .c9-grow { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } .c9-grow__head { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; } .c9-grow [data-guide-status].is-bad { color: var(--danger); } .c9-codeform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; padding: 16px; background: var(--cloud); border-radius: var(--r-md); overflow: hidden; } .c9-codeform label { display: grid; gap: 4px; font-size: .8125rem; font-weight: 600; flex: 1 1 200px; } .c9-codeform input { height: 42px; padding: 0 12px; border: 1px solid #d6d3d0; border-radius: var(--r-sm); background: var(--paper); font-size: .9375rem; } .c9-codeout { margin-top: 14px; padding: 18px; background: var(--blush); border-radius: var(--r-md); display: grid; gap: 12px; overflow: hidden; } .c9-codeout__code { display: flex; align-items: baseline; gap: 12px; } .c9-codeout__code span { font-size: .8125rem; font-weight: 600; color: #4a4a4a; } .c9-codeout__code strong { font: 600 1.75rem/1 var(--font-display); letter-spacing: .14em; animation: c9-pop .5s var(--spring); } .c9-codeout__msg { display: grid; gap: 4px; font-size: .8125rem; font-weight: 600; } .c9-codeout__msg textarea { width: 100%; padding: 12px; border: 1px solid rgba(30, 30, 30, .15); border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); font: 400 .9375rem/1.5 var(--font-body); resize: vertical; } .c9-codeout__actions { display: flex; flex-wrap: wrap; gap: 8px; } .c9-defaults { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 900px; padding: clamp(20px, 3vw, 32px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); } .c9-field--wide { grid-column: 1 / -1; } .c9-defaults__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .c9-enq { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); } .c9-enq summary { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; cursor: pointer; list-style: none; } .c9-enq summary::-webkit-details-marker { display: none; } .c9-enq__topic { padding: 4px 10px; border-radius: var(--r-sm); background: var(--cloud); font-size: .75rem; font-weight: 600; } .c9-enq__body { padding: 0 18px 18px; display: grid; gap: 12px; } .c9-enq__details { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; margin: 0; } .c9-enq__details dt { font-size: .75rem; font-weight: 600; color: var(--slate); } .c9-enq__details dd { margin: 0; } .c9-enq__actions { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 1180px) { .c9-trow { grid-template-columns: 56px 1fr auto auto; } .c9-trow .c9-tctl:not(.c9-tctl--switch) { grid-column: span 2; } .c9-trow .c9-tctl--order { grid-column: span 1; } .c9-trow__actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 760px) { .c9-team__stats { grid-template-columns: 1fr 1fr; } .c9-trow { grid-template-columns: 56px 1fr; } .c9-trow .c9-tctl, .c9-trow .c9-tctl:not(.c9-tctl--switch) { grid-column: span 1; } .c9-trow .c9-tctl--switch { flex-direction: row; justify-content: flex-start; grid-column: 1 / -1; } .c9-grow__head { grid-template-columns: 56px 1fr; } .c9-grow__head .c9-trow__actions { grid-column: 1 / -1; justify-content: flex-start; } .c9-defaults { grid-template-columns: 1fr; } .c9-work-band, .c9-pro-cta { grid-template-columns: 1fr; } .c9-team__search { min-width: 0; width: 100%; } } /* -------------------------------------------------------------------------- Cloud 9 Stays Pro ----------------------------------------------------------------------- */ .c9-pro-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 96px); background: var(--ink); color: #fff; } .c9-pro-hero__sky { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 85% 10%, rgba(227, 199, 179, .32), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(240, 226, 217, .14), transparent 60%); } .c9-pro-hero__sky .c9-sky__cloud { opacity: .08; } .c9-pro-mark { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-weight: 600; animation: c9-rise .8s var(--spring-soft) both; } .c9-pro-mark img { width: 32px; height: auto; filter: brightness(0) invert(1); } .c9-pro-mark strong { color: var(--sand); } .c9-pro-hero__title { max-width: 16ch; margin-top: 22px; font-size: clamp(2.75rem, 7vw, 5rem); } .c9-pro-hero__title .c9-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: c9-word .9s var(--spring) forwards; animation-delay: calc(.15s + var(--w, 0) * .07s); } .c9-pro-hero__text { max-width: 58ch; margin-top: 20px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .78); animation: c9-rise 1s var(--spring-soft) .45s both; } .c9-pro-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; animation: c9-rise 1s var(--spring-soft) .6s both; } .c9-pro-hero .c9-btn--primary { background: #fff; color: var(--ink); } .c9-pro-hero .c9-btn--primary:hover { background: var(--blush); } .c9-pro-hero .c9-btn--quiet { color: #fff; border-color: rgba(255, 255, 255, .45); } .c9-pro-hero .c9-btn--quiet:hover { background: #fff; color: var(--ink); } .c9-pro-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; } .c9-pro-steps li { padding: 28px; border-radius: var(--r-lg); background: var(--cloud); } .c9-pro-steps li:nth-child(1) { background: var(--blush); } .c9-pro-steps li:nth-child(2) { background: var(--stone); } .c9-pro-steps li:nth-child(3) { background: var(--sand); } .c9-pro-steps__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; margin-bottom: 18px; } .c9-pro-steps p { color: #3a3a3a; margin-top: 6px; } .c9-pro-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .c9-pro-card { padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--paper); } .c9-pro-card--provider { background: var(--ink); color: #fff; border-color: transparent; } .c9-pro-card--provider .c9-link { color: #fff; } .c9-pro-card--provider .c9-pro-list .c9-icon { color: var(--sand); } .c9-pro-list { display: grid; gap: 14px; margin: 22px 0 26px; } .c9-pro-list li { display: flex; gap: 12px; align-items: center; } .c9-pro-list .c9-icon { width: 22px; height: 22px; } .c9-pro-forms { position: relative; } .c9-pro-anchor { position: absolute; top: calc(-1 * var(--header-h)); } .c9-pro-switch { position: relative; display: flex; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); isolation: isolate; margin-bottom: 28px; } .c9-pro-switch button { position: relative; z-index: 1; flex: 1; padding: 12px 16px; border: 0; background: none; border-radius: 999px; font: 600 .9688rem/1.2 var(--font-body); color: var(--slate); cursor: pointer; transition: color .3s ease; } .c9-pro-switch button[aria-selected="true"] { color: #fff; } .c9-pro-switch__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--spring), width .5s var(--spring); } .c9-pro-panel { padding: clamp(22px, 3.4vw, 40px); background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .c9-pro-panel.is-in { animation: c9-rise .5s var(--spring) both; } .c9-pro-panel h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .c9-pro-panel > .c9-muted { margin: 6px 0 22px; } .c9-pro-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .c9-pro-form fieldset { border: 0; padding: 0; margin: 0 0 18px; } .c9-pro-form legend { font-size: .875rem; font-weight: 600; margin-bottom: 8px; } .c9-chipcheck { position: relative; cursor: pointer; } .c9-chipcheck input { position: absolute; opacity: 0; } .c9-chipcheck span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: .9375rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .c9-chipcheck input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .c9-chipcheck input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; } .c9-pro-alt { text-align: center; margin-top: 24px; color: var(--slate); } @media (max-width: 900px) { .c9-pro-steps, .c9-pro-split { grid-template-columns: 1fr; } } @media (max-width: 640px) { .c9-pro-form__grid { grid-template-columns: 1fr; } .c9-pro-switch button { font-size: .875rem; padding: 11px 8px; } } @media (prefers-reduced-motion: reduce) { .c9-pro-hero__title .c9-word { opacity: 1; transform: none; filter: none; } } /* Anything marked hidden stays hidden, whatever display a component sets. */ [hidden] { display: none !important; } /* Keep the fixed header below the WordPress toolbar when signed in. */ .admin-bar .c9-header { top: 32px; } @media (max-width: 782px) { .admin-bar .c9-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .c9-header { position: absolute; } } @media (max-width: 760px) { .c9-trow { display: flex; flex-wrap: wrap; gap: 12px; } .c9-trow .c9-trow__main { flex: 1 1 calc(100% - 72px); } .c9-trow .c9-tctl--switch { flex: 0 0 auto; flex-direction: row; gap: 8px; margin-right: 12px; } .c9-trow .c9-tctl:not(.c9-tctl--switch):not(.c9-tctl--order) { flex: 1 1 100%; } .c9-trow .c9-tctl--order { flex: 0 0 96px; } .c9-trow .c9-trow__actions { flex: 1 1 100%; } } /* ----------------------------------------------------------------------- About page: the original site's structure (title band, photo beside "Our Story", four numbered vision cards) in the site's own language: rounded surfaces, soft depth, tight display type, spring motion. ----------------------------------------------------------------------- */ .c9-ab-head { position: relative; padding: clamp(64px, 9vw, 128px) 0 clamp(88px, 11vw, 152px); background: linear-gradient(180deg, var(--taupe) 0%, var(--taupe) 55%, var(--paper) 100%); overflow: hidden; } .c9-ab-head__inner { max-width: 820px; } .c9-ab-head h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: .98; letter-spacing: -0.04em; animation: c9-rise 1s var(--spring) both; } .c9-ab-head__sub { margin-top: 20px; max-width: 34ch; color: #3a3a3a; font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.45; animation: c9-rise 1s var(--spring) .08s both; } .c9-ab-head__sub::first-letter { text-transform: uppercase; } .c9-ab-story { padding: 0 0 clamp(80px, 10vw, 140px); background: var(--paper); } .c9-ab-story__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 112px); align-items: center; } .c9-ab-story__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-xl); box-shadow: var(--shadow-card); margin-top: calc(clamp(56px, 7vw, 104px) * -1); background: var(--cloud); } .c9-ab-story__media > img, .c9-ab-story__media > .c9-ph { position: absolute; left: 0; width: 100%; top: -48px; height: calc(100% + 96px); object-fit: cover; } .c9-ab-story__media > .c9-ph { top: 0; height: 100%; } .c9-ab-story__body h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.04; } .c9-ab-story__text { margin-top: 24px; max-width: 58ch; color: #3a3a3a; font-size: 1.125rem; line-height: 1.7; } .c9-ab-story__text p:first-child { color: var(--ink); font-size: 1.25rem; line-height: 1.6; letter-spacing: -0.005em; } .c9-ab-story__text p + p { margin-top: 1em; } /* The photo opens from a rounded slot and settles out of a slight zoom. */ .js .c9-ab-story__media[data-reveal] { opacity: 1; transform: none; clip-path: inset(18% 12% 18% 12% round var(--r-xl)); transition: clip-path 1.2s var(--spring-soft); } .js .c9-ab-story__media[data-reveal].is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); } .js .c9-ab-story__media[data-reveal] > * { scale: 1.14; transition: scale 1.8s var(--spring-soft); } .js .c9-ab-story__media[data-reveal].is-in > * { scale: 1; } /* "Our Vision": a soft rounded panel set into the page rather than a full-width block. */ .c9-ab-vision { padding: 0 var(--gutter) clamp(72px, 9vw, 128px); } .c9-ab-vision__panel { max-width: 1320px; margin: 0 auto; border-radius: clamp(20px, 3vw, 32px); background: var(--taupe); padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); } .c9-ab-vision__head { text-align: center; } .c9-ab-vision h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.04; } .c9-ab-cards { list-style: none; margin: clamp(36px, 4.5vw, 64px) auto 0; padding: 0; max-width: 1180px; padding: 0 clamp(16px, 4vw, 56px); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); } .c9-ab-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-xl); padding: clamp(28px, 3.6vw, 44px); box-shadow: var(--shadow-card); transition: translate .55s var(--spring), box-shadow .55s var(--spring), scale .2s var(--ease-out); } .c9-ab-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; } .c9-ab-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; max-width: 11ch; } .c9-ab-card__n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; overflow: hidden; border-radius: 999px; background: var(--cloud); font: 500 .875rem/1 var(--font-body); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--slate); } .c9-ab-card__n > span { display: block; } .c9-ab-card__text { margin-top: 22px; color: #3a3a3a; font-size: 1rem; line-height: 1.7; } .c9-ab-card__text p + p { margin-top: 1.1em; } .c9-ab-card:active { scale: .99; } @media (hover: hover) { .c9-ab-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lift); } } .js .c9-ab-card[data-reveal] { transition: opacity .9s var(--spring-soft) calc(var(--i, 0) * 90ms), transform 1.1s var(--spring) calc(var(--i, 0) * 90ms), translate .55s var(--spring), box-shadow .55s var(--spring), scale .2s var(--ease-out); } /* Each number rolls up into its pill just after the card arrives. */ .js .c9-ab-card[data-reveal] .c9-ab-card__n > span { transform: translateY(140%); transition: transform .9s var(--spring); transition-delay: calc(var(--i, 0) * 90ms + 260ms); } .js .c9-ab-card[data-reveal].is-in .c9-ab-card__n > span { transform: none; } @media (max-width: 900px) { .c9-ab-story__grid { grid-template-columns: 1fr; } .c9-ab-story__media { aspect-ratio: 4 / 3; } .c9-ab-cards { grid-template-columns: 1fr; } } @media (max-width: 640px) { .c9-ab-vision { padding-inline: 10px; } } @media (prefers-reduced-motion: reduce) { .c9-ab-head h1, .c9-ab-head__sub { animation: none; } .js .c9-ab-story__media[data-reveal] { clip-path: none; } .js .c9-ab-story__media[data-reveal] > *, .js .c9-ab-card[data-reveal] .c9-ab-card__n > span { scale: 1; transform: none; } .c9-ab-card, .c9-ab-card:hover, .c9-ab-card:active { translate: none; scale: 1; } } /* ----------------------------------------------------------------------- Homepage hero (theme 1.4): a fixed core (headline, intro, search) beside a stage that switches between the town map, the receipts and a home photo. ----------------------------------------------------------------------- */ .c9-hx { padding: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)) 0 clamp(64px, 8vw, 112px); background: linear-gradient(180deg, var(--cloud) 0%, var(--cloud) 62%, var(--paper) 100%); } .c9-hx__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .c9-hx__core { min-width: 0; } .c9-hx__title { font-size: clamp(2.25rem, 3.3vw, 3.125rem); line-height: 1.04; letter-spacing: -0.032em; max-width: 15ch; } .c9-hx__title .c9-word { display: inline-block; opacity: 0; translate: 0 .4em; animation: c9-hx-word .9s var(--spring) forwards; animation-delay: calc(.08s + var(--w, 0) * .05s); } @keyframes c9-hx-word { to { opacity: 1; translate: 0 0; } } .c9-hx__text { margin-top: 18px; max-width: 42ch; color: #3a3a3a; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; animation: c9-rise .9s var(--spring) .2s both; } .c9-hx .c9-search { animation: c9-rise 1s var(--spring-soft) .32s both; } .c9-hx__more { margin-top: 18px; animation: c9-rise 1s var(--spring-soft) .42s both; } .c9-hx__work { margin-top: 12px; font-size: .9375rem; animation: c9-rise 1s var(--spring-soft) .48s both; } .c9-hx__work a { color: var(--slate); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; } .c9-hx__work a:hover { color: var(--ink); text-decoration-color: currentColor; } /* Stacked search for the hero column */ .c9-search--stack { grid-template-columns: 1fr 1fr; max-width: 520px; margin-top: 28px; background: var(--paper); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; gap: 0; } .c9-search--stack .c9-search__field { padding: 12px 16px; border-radius: var(--r-md); } .c9-search--stack .c9-search__field--where, .c9-search--stack .c9-search__field--guests { grid-column: 1 / -1; } .c9-search--stack .c9-search__field::before { display: none; } /* Hairlines between fields, drawn as pseudo-elements so they never box the fields in. */ .c9-search--stack .c9-search__field::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--line); transition: opacity .2s ease; } .c9-search--stack .c9-search__field--guests::after { display: none; } .c9-search--stack .c9-search__field:nth-child(2) { margin-right: 4px; } .c9-search--stack .c9-search__field:hover::after, .c9-search--stack .c9-search__field:focus-within::after { opacity: 0; } .c9-search--stack .c9-search__go { grid-column: 1 / -1; min-height: 54px; margin-top: 8px; } /* Keyboard focus inside a search field is always clearly visible. */ .c9-search__field:has(:focus-visible) { box-shadow: 0 0 0 2px var(--ink) !important; background: var(--paper); } /* Stage */ .c9-hx__stage { position: relative; min-width: 0; aspect-ratio: 7 / 6; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: var(--taupe); box-shadow: var(--shadow-card); animation: c9-rise 1.1s var(--spring-soft) .18s both; transition: background-color .6s ease; } .c9-hx__stage[data-on="fees"] { background: var(--blush); } .c9-hx__stage[data-on="home"] { background: var(--stone); } .c9-hx__bar { position: absolute; z-index: 5; left: 16px; right: 16px; top: 16px; display: flex; align-items: center; gap: 8px; pointer-events: none; } .c9-hx__bar > * { pointer-events: auto; } .c9-hx__tabs { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 1px 2px rgba(30, 30, 30, .06), 0 8px 20px -12px rgba(30, 30, 30, .3); isolation: isolate; max-width: 100%; } .c9-hx__tabs button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 9px 16px 10px; border-radius: 999px; font: 600 .875rem/1 var(--font-body); color: var(--slate); white-space: nowrap; transition: color .3s ease; touch-action: manipulation; } .c9-hx__tabs button[aria-selected="true"] { color: #fff; } .c9-hx__tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .c9-hx__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--spring), width .5s var(--spring); } .c9-hx__timer { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; } .c9-hx__stage.is-playing [aria-selected="true"] .c9-hx__timer { opacity: 1; animation: c9-hx-timer var(--dwell, 7s) linear forwards; } .c9-hx__stage.is-held [aria-selected="true"] .c9-hx__timer { animation-play-state: paused; } @keyframes c9-hx-timer { to { transform: scaleX(1); } } .c9-hx__pause { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 1px 2px rgba(30, 30, 30, .06), 0 8px 20px -12px rgba(30, 30, 30, .3); transition: transform .12s ease-out; touch-action: manipulation; } .c9-hx__pause:active { transform: scale(.92); } .c9-hx__pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .c9-hx__pause .c9-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .c9-hx__pause .i-play { display: none; fill: currentColor; stroke: none; } .c9-hx__pause[aria-pressed="true"] .i-pause { display: none; } .c9-hx__pause[aria-pressed="true"] .i-play { display: block; } /* Scenes cross-fade; the incoming one rises a little, the outgoing one settles back. */ .c9-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .45s ease, transform .9s var(--spring); pointer-events: none; } .c9-scene.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .55s ease .08s, transform .9s var(--spring) .04s; } .c9-scene.is-leaving { transform: scale(.97); } /* Map */ .c9-scene--map { background: radial-gradient(circle, rgba(255, 255, 255, .45) 1.2px, transparent 1.6px) 0 0 / 26px 26px, linear-gradient(180deg, #e4dcd4 0%, var(--taupe) 100%); } .c9-townmap { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .c9-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-9px, -50%); opacity: 0; translate: 0 -10px; transition: opacity .4s ease, translate .7s var(--spring); } .c9-pin.is-left { transform: translate(calc(-100% + 9px), -50%); } .c9-pin.is-up { transform: translate(-50%, calc(-100% + 9px)); } .c9-pin.is-down { transform: translate(-50%, -9px); } .c9-pin.is-up a { flex-direction: column-reverse; gap: 10px; } .c9-pin.is-down a { flex-direction: column; gap: 10px; } .c9-scene--map.is-active .c9-pin { opacity: 1; translate: 0 0; transition-delay: calc(.15s + var(--n) * .09s); } .c9-pin a { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; } .c9-pin.is-left a { flex-direction: row-reverse; } .c9-pin__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 7px rgba(30, 30, 30, .12); transition: box-shadow .35s var(--spring); } .c9-pin__card { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 2px rgba(30, 30, 30, .06), 0 12px 28px -14px rgba(30, 30, 30, .32); white-space: nowrap; transition: translate .4s var(--spring), box-shadow .4s var(--spring); } .c9-pin__img, .c9-pin__card .c9-ph { width: 54px; height: 44px; flex: none; border-radius: var(--r-sm); object-fit: cover; } .c9-pin__card .c9-ph .c9-ph__label { display: none; } .c9-pin__txt { display: flex; flex-direction: column; gap: 2px; } .c9-pin__txt b { font: 600 1.0625rem/1.15 var(--font-display); letter-spacing: -0.01em; } .c9-pin__txt span { font-size: .8125rem; color: var(--slate); } .c9-pin a:hover .c9-pin__card, .c9-pin a:focus-visible .c9-pin__card { translate: 0 -2px; box-shadow: var(--shadow-lift); } .c9-pin a:hover .c9-pin__dot { box-shadow: 0 0 0 10px rgba(30, 30, 30, .14); } .c9-pin a:focus-visible { outline: none; } .c9-pin a:focus-visible .c9-pin__card { outline: 2px solid var(--ink); outline-offset: 2px; } .c9-townmap__note { position: absolute; left: 20px; bottom: 18px; margin: 0; font-size: .875rem; color: #3a3a3a; } /* Receipts */ .c9-rcpts { position: absolute; inset: 0; } .c9-rcpt { position: absolute; top: 17%; width: min(44%, 290px); padding: 22px 20px 24px; background: var(--paper); font-size: .875rem; box-shadow: 0 2px 4px rgba(30, 30, 30, .06), 0 22px 44px -22px rgba(30, 30, 30, .35); opacity: 0; transition: opacity .45s ease, translate .9s var(--spring), rotate .9s var(--spring); } .c9-rcpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 8px 0, var(--paper) 7px, transparent 7.5px) 0 0 / 16px 10px; } .c9-rcpt--platform { left: 5%; rotate: -3deg; translate: -24px 0; z-index: 1; } .c9-rcpt--direct { right: 5%; top: 33%; rotate: 2deg; translate: 24px 0; z-index: 2; } .c9-scene--fees.is-active .c9-rcpt { opacity: 1; translate: 0 0; transition-delay: .12s; } .c9-scene--fees.is-active .c9-rcpt--platform { opacity: .82; rotate: -2deg; } .c9-scene--fees.is-active .c9-rcpt--direct { rotate: 1.5deg; transition-delay: .22s; } .c9-rcpt__title { margin: 0; font-weight: 600; } .c9-rcpt__who { margin: 3px 0 0; font-size: .8125rem; color: var(--slate); } .c9-rcpt dl { margin: 16px 0 0; } .c9-rcpt dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); } .c9-rcpt dt { margin: 0; min-width: 0; } .c9-rcpt dd { margin: 0; color: var(--slate); text-align: right; flex: none; max-width: 52%; } .c9-rcpt .is-fee dd { color: var(--ink); font-weight: 600; } .c9-rcpt--direct .is-fee { background: var(--blush); margin: 0 -10px; padding: 10px; border-radius: var(--r-sm); border-bottom-color: transparent; } .c9-rcpts__stamp { position: absolute; right: 13%; bottom: 13%; padding: 10px 16px; border: 3px solid var(--ink); border-radius: var(--r-md); font: 700 1.125rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; rotate: -8deg; opacity: 0; scale: 1.18; transition: opacity .25s ease, scale .5s var(--spring); } .c9-scene--fees.is-active .c9-rcpts__stamp { opacity: 1; scale: 1; transition-delay: .55s; } /* Home photo */ .c9-scene__photo, .c9-scene__photo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .c9-scene--home .c9-scene__img { scale: 1.05; transition: scale 1.6s var(--spring-soft); } .c9-scene--home.is-active .c9-scene__img { scale: 1; } .c9-scene__tag { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-lg); color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 8px 22px -14px rgba(30, 30, 30, .4); transition: translate .4s var(--spring); } .c9-scene__tag b { font: 600 1rem/1.2 var(--font-display); } .c9-scene__tag span { font-size: .8125rem; color: var(--slate); } .c9-scene__tag:hover { translate: 0 -2px; } @media (max-width: 900px) { .c9-hx__grid { grid-template-columns: 1fr; } .c9-hx__title { max-width: 16ch; } .c9-search--stack { max-width: none; } .c9-hx__stage { aspect-ratio: 4 / 5; } } @media (max-width: 560px) { .c9-hx__stage { aspect-ratio: 5 / 7; margin-inline: calc(var(--gutter) * -0.5); } .c9-hx__tabs button { padding: 9px 12px 10px; font-size: .8125rem; } .c9-pin__img, .c9-pin__card .c9-ph { display: none; } .c9-pin__card { padding: 7px 11px; } .c9-pin__txt b { font-size: .9375rem; } .c9-rcpt { width: 62%; padding: 18px 16px 20px; font-size: .8125rem; } .c9-rcpt--platform { top: 15%; left: 5%; } .c9-rcpt--direct { top: 40%; right: 5%; } .c9-rcpts__stamp { bottom: 7%; right: 8%; font-size: .9375rem; } } @media (prefers-reduced-motion: reduce) { .c9-hx__title .c9-word { opacity: 1; translate: none; } .c9-scene, .c9-scene.is-active { transform: none; } .c9-pin, .c9-rcpt, .c9-rcpts__stamp { translate: none; scale: 1; } } @media (prefers-reduced-transparency: reduce) { .c9-hx__tabs, .c9-hx__pause, .c9-scene__tag { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ----------------------------------------------------------------------- Booking desk (theme 1.4): the search as a sentence you fill in. Homepage: a stay. Work stays page: a request. ----------------------------------------------------------------------- */ .c9-deskhero { padding: calc(var(--header-h) + clamp(40px, 7vw, 104px)) 0 clamp(44px, 5vw, 72px); background: var(--paper); } .c9-deskhero--work { padding-top: clamp(40px, 6vw, 88px); } .c9-desk__kicker { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(1rem, 1.25vw, 1.125rem); color: var(--slate); animation: c9-rise .8s var(--spring) both; } .c9-desk__sentence { margin: 0; max-width: 21em; font: 500 clamp(2rem, 4.6vw, 4.25rem)/1.36 var(--font-display); letter-spacing: -0.03em; text-wrap: pretty; animation: c9-rise 1s var(--spring) .06s both; } .c9-desk__words { white-space: normal; } .c9-desk__chip { position: relative; display: inline-flex; align-items: center; gap: .14em; vertical-align: baseline; padding: 0 .16em; margin: .06em .02em; line-height: 1.14; background: var(--blush); border-bottom: .05em solid var(--ink); border-radius: .1em .1em 0 0; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, transform .12s ease-out; } .c9-desk__chip:hover { background: #ead5c7; } .c9-desk__chip:active { transform: scale(.985); } .c9-desk__chip:focus-within { outline: 2px solid var(--ink); outline-offset: 4px; } .c9-desk__chip.is-empty .c9-desk__val { color: var(--slate); } .c9-desk__val { display: inline-block; } .c9-desk__chev { width: .42em; height: .42em; flex: none; fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: .08em; } .c9-desk__ctl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; } .c9-desk__ctl::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .c9-desk__chip.is-text { cursor: text; gap: 0; } .c9-desk__chip.is-collapsed .c9-desk__val { display: none; } .c9-desk__chip.is-collapsed { padding: 0 .12em; } .c9-desk__type { width: 4.2ch; field-sizing: content; min-width: 2.2ch; max-width: 9em; padding: 0; border: 0; background: none; outline: none; font: inherit; letter-spacing: inherit; color: inherit; } .c9-desk__type::placeholder { color: var(--slate); opacity: 1; } .c9-desk__num::-webkit-inner-spin-button, .c9-desk__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .c9-desk__num { -moz-appearance: textfield; } .c9-desk__pound { color: var(--ink); } .c9-desk__msg { margin: 14px 0 0; font-size: .9375rem; color: var(--danger); } .c9-desk__msg:empty { display: none; } .c9-desk__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(26px, 3vw, 44px); animation: c9-rise 1s var(--spring-soft) .14s both; } .c9-desk__btn { --h: 58px; padding: 0 2em; font-size: 1.0625rem; font-weight: 600; } .c9-desk__alt { color: var(--slate); font-size: .9688rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; } .c9-desk__alt:hover { color: var(--ink); text-decoration-color: currentColor; } .c9-desk__alt-note { color: var(--slate); font-size: .9375rem; max-width: 44ch; } .c9-desk__facts { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; } .c9-desk__facts li { display: flex; flex-direction: column; gap: 4px; animation: c9-rise .9s var(--spring-soft) both; animation-delay: calc(.2s + var(--i, 0) * 60ms); } .c9-desk__facts b { font-weight: 600; font-size: 1rem; } .c9-desk__facts span { color: var(--slate); font-size: .9375rem; line-height: 1.5; } /* A chosen value settles into place. */ .c9-desk__val.is-new { animation: c9-desk-val .45s var(--spring); } @keyframes c9-desk-val { from { opacity: .2; transform: translateY(.18em); } } /* Work request: step two, contact details. */ .c9-desk__step2 { margin: clamp(28px, 3vw, 40px) 0 0; padding: clamp(22px, 3vw, 34px); max-width: 880px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-card); } .js .c9-desk__step2:not(.is-open) { display: none; } .c9-desk__step2.is-open { animation: c9-rise .6s var(--spring) both; } .c9-desk__step2 legend { float: left; width: 100%; margin: 0 0 18px; padding: 0; font: 500 1.5rem/1.2 var(--font-display); letter-spacing: -0.02em; } .c9-desk__fields { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .c9-desk__fields .c9-field--wide { grid-column: 1 / -1; } .c9-desk__fields .c9-field textarea { min-height: 96px; } .c9-desk__step2 .c9-desk__go { margin-top: 6px; animation: none; } .c9-desk.is-step2 [data-c9-step1] .c9-desk__btn { display: none; } .c9-desk__done { margin: 0 0 28px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--blush); font-weight: 600; max-width: 880px; } .c9-desk.is-sent .c9-desk__sentence, .c9-desk.is-sent [data-c9-step1], .c9-desk.is-sent .c9-desk__step2 { display: none; } /* Homes under the desk */ .c9-dhomes { padding: 0 0 clamp(72px, 9vw, 128px); background: var(--paper); } .c9-dhomes__head h2 { transition: opacity .2s ease; } .c9-dhomes__head h2.is-swap { opacity: 0; } .c9-dhomes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; } .c9-dhomes__item[hidden] { display: none; } .c9-dhomes__none { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--cloud); max-width: 760px; } .c9-dhomes__none p { margin: 0 0 18px; font-size: 1.0625rem; } .c9-dhomes__none-actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 900px) { .c9-desk__facts { grid-template-columns: 1fr 1fr; } .c9-dhomes__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .c9-desk__sentence { font-size: clamp(1.75rem, 8.4vw, 2.25rem); line-height: 1.42; } .c9-desk__fields { grid-template-columns: 1fr; } .c9-dhomes__grid { grid-template-columns: 1fr; gap: 36px; } .c9-desk__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .c9-desk__val.is-new { animation: none; } } /* ----------------------------------------------------------------------- Theme 1.4 reskin: the booking-desk language across the site. White ground, large Wix Madefor Display headings, blush choices with an ink underline, hairline rules instead of filled blocks. ----------------------------------------------------------------------- */ /* Native menus stay light, whatever the visitor's system theme (Windows dark mode). */ select, .c9-desk__ctl { color-scheme: light; } select option, .c9-desk__ctl option { background-color: #ffffff; color: #1e1e1e; } .c9-desk__ctl { background-color: #ffffff; color: #1e1e1e; } /* Page heads: the desk's scale and voice. */ .c9-page-head { padding: clamp(48px, 7vw, 104px) 0 clamp(32px, 4vw, 56px); } .c9-page-head h1 { font-size: clamp(2.75rem, 6vw, 5rem); letter-spacing: -0.04em; line-height: 1; } .c9-page-head__sub { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); margin-top: 16px; } .c9-page-head .c9-desk { margin-top: clamp(28px, 3.5vw, 48px); } .c9-desk--compact .c9-desk__sentence { font-size: clamp(1.75rem, 3.4vw, 3rem); max-width: 26em; } .c9-desk--compact .c9-desk__go { margin-top: 24px; } /* Town and filter chips look like the desk's choices. */ .c9-chip { border: 0; border-radius: .35em .35em 0 0; background: var(--cloud); box-shadow: inset 0 -2px 0 var(--line); color: var(--ink); transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease-out; } .c9-chip:hover { background: var(--blush); box-shadow: inset 0 -2px 0 var(--ink); } .c9-chip.is-current { background: var(--blush); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); } /* Section heads sit left, with more room above than below. */ .c9-section__head--center { text-align: left; } .c9-section__head--center .c9-section__sub { margin-inline: 0; } .c9-section h2 { letter-spacing: -0.03em; } /* Where we are: the towns written as a sentence. */ .c9-towns__title { margin-bottom: clamp(18px, 2vw, 28px); } .c9-towns { margin: 0; max-width: 22em; font: 500 clamp(2rem, 4.4vw, 4rem)/1.32 var(--font-display); letter-spacing: -0.03em; } .c9-towns__town { position: relative; display: inline-flex; align-items: baseline; gap: .3em; padding: 0 .16em; margin: .05em 0; color: var(--ink); text-decoration: none; background: var(--blush); border-bottom: .05em solid var(--ink); border-radius: .1em .1em 0 0; transition: background-color .2s ease, transform .12s ease-out; } .c9-towns__town small { font: 500 .3em/1 var(--font-body); letter-spacing: 0; color: var(--slate); transform: translateY(-.9em); } .c9-towns__town:hover { background: #ead5c7; } .c9-towns__town:active { transform: scale(.985); } .c9-towns__town:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } .c9-towns__sep { color: var(--ink); } .c9-towns__more { margin-top: 22px; color: var(--slate); } /* Work stays: a light panel, not a black block. */ .c9-work-band { background: var(--blush); color: var(--ink); } .c9-work-band::before, .c9-work-band::after { display: none; } .c9-work-band p { color: #3a3a3a; } .c9-work-band .c9-btn--quiet { border-color: var(--ink); color: var(--ink); } /* Reviews on white, each card a quiet sheet with a hairline. */ .c9-section--reviews { background: var(--paper); border-top: 1px solid var(--line); } .c9-review { background: var(--paper); border: 1px solid var(--line); box-shadow: none; } .c9-review:hover { box-shadow: var(--shadow-card); } /* For owners: photo beside a ruled list. */ .c9-owners__head { text-align: left; margin: 0 0 clamp(28px, 4vw, 48px); max-width: 640px; } .c9-owners { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-bottom: clamp(32px, 4vw, 48px); } .c9-owners__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--cloud); } .c9-owners__media img, .c9-owners__media .c9-ph { width: 100%; height: 100%; object-fit: cover; } .c9-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; } .c9-services li { padding: 22px 0 26px; border-top: 1px solid var(--line); } .c9-services h3 { font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 10px; } .c9-services p { margin: 0; color: var(--slate); } .c9-owners__cta { justify-content: flex-start; } /* About strip. */ .c9-aboutstrip > * { max-width: 760px; } .c9-aboutstrip .c9-section__sub { margin-inline: 0; color: #3a3a3a; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); } /* Property page: booking card and calendar in the same voice. */ .c9-book { border: 1px solid var(--line); box-shadow: var(--shadow-card); } /* Pro: steps as a ruled sequence rather than coloured tiles. */ .c9-pro-steps li, .c9-pro-steps li:nth-child(n) { background: var(--paper); border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0 8px; } @media (max-width: 900px) { .c9-owners { grid-template-columns: 1fr; } .c9-owners__media { aspect-ratio: 4 / 3; } } @media (max-width: 600px) { .c9-services { grid-template-columns: 1fr; } .c9-towns { font-size: clamp(1.75rem, 8vw, 2.25rem); } }