/* ===================================================================== STRAWBERRY KING RESORT — Design System Brand-matched to the live site: - Primary green #117630 · Mint #e2f1e6 · Strawberry #c10201 · Ink #272727 - Headings: Cormorant Garamond (≈ Londinia) · Body: Jost (≈ Glacial Indifference) ===================================================================== */ /* ---------- Tokens ---------- */ :root { --green: #117630; --green-dark: #0e6027; --green-deep: #0b491e; --green-forest: #0c5222; --mint: #e2f1e6; --mint-soft: #eff7f1; --berry: #c10201; --berry-dark: #9a0201; --berry-bright: #e41518; /* the berry red as it appears in the logo mark */ --navy: #2c2387; /* the filigree scrollwork flanking the logo berry */ --navy-soft: #6b64bd; --gold: #c9a24b; --gold-soft: #e0c684; --ink: #272727; --ink-soft: #4a4a4a; --muted: #6b7169; --cream: #f8f5ee; --cream-2: #f3efe4; --line: #e6e3d8; --line-soft: #efece2; --white: #ffffff; /* shared hover background for the small controls (steppers, chips, arrows) */ --btn-hover: var(--green-deep); /* CTA hover is the strawberry skin — edge & shadow are tinted to match the fruit */ --btn-hover-edge: #7d0d09; --btn-hover-shadow: 0 12px 26px rgba(122,10,7,.32); /* gradients & accents */ --grad-green: linear-gradient(135deg, #14833a 0%, #0b491e 100%); --grad-gold: linear-gradient(90deg, transparent, var(--gold), transparent); --scrim: linear-gradient(180deg, rgba(9,30,18,.42) 0%, rgba(9,30,18,.12) 38%, rgba(9,30,18,.78) 100%); --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Jost", "Trebuchet MS", system-ui, -apple-system, sans-serif; --maxw: 1240px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 8px; --radius-lg: 18px; --radius-xl: 26px; /* layered, softer shadows for depth */ --shadow-sm: 0 2px 6px rgba(12,40,22,.05), 0 8px 24px rgba(12,40,22,.07); --shadow-md: 0 6px 16px rgba(12,40,22,.08), 0 22px 50px rgba(12,40,22,.13); --shadow-lg: 0 12px 30px rgba(12,40,22,.12), 0 40px 80px rgba(12,40,22,.20); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --header-h: 84px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.7; font-size: 16px; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* height:auto is load-bearing: the width/height attributes on every land as presentational hints (height:1600px etc). Without this, max-width shrinks the width while the height stays pinned to the attribute — images render metres tall and any aspect-ratio below is ignored (aspect-ratio only applies when one axis is auto). Class-scoped height rules still win on specificity. */ img, picture, video { max-width: 100%; height: auto; display: block; } a { color: var(--green); text-decoration: none; transition: color .3s var(--ease); } a:hover { color: var(--berry); } ul { list-style: none; padding: 0; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ---------- One-screen image guarantee ---------- Every content image on every inner page must be fully visible within a single viewport — no scrolling to see the bottom of a photograph. The frames below are all ratio-driven, so on a short viewport (landscape phone, small laptop, split-screen window) the ratio alone can still run taller than the screen. This caps them to the small viewport height and lets object-fit crop instead of overflow. vh first as the fallback for browsers without svh (pre-Chrome 108 / Safari 15.4 / Firefox 101). */ .split__media img, .split__media .media-carousel, .room-gallery img, .masonry img, .card__media, .carecard__media, .roomslide__link { max-height: 76vh; max-height: 76svh; } /* the masonry image is the only one of those without object-fit, so give it one — otherwise a capped height would squash the photo instead of cropping */ .masonry img { object-fit: cover; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; } /* heading scale, eased down ~8% across the board — min, fluid and max all move together so the ratio between the three sizes is preserved at every width */ .h-xl { font-size: clamp(2.15rem, 4.5vw, 3.8rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.06; } .h-lg { font-size: clamp(2rem, 4.25vw, 3.3rem); letter-spacing: -.012em; } .h-md { font-size: clamp(1.58rem, 2.75vw, 2.25rem); } .lead { font-size: clamp(1.06rem, 1.4vw, 1.22rem); color: var(--ink-soft); font-weight: 300; line-height: 1.75; } .eyebrow { font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: .7rem; } .eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); } @media (max-width: 480px) { .eyebrow { font-size: .62rem; letter-spacing: .13em; gap: .5rem; } .eyebrow::before, .eyebrow.center::after { width: 20px; } } @media (max-width: 380px) { .eyebrow { font-size: .58rem; letter-spacing: .1em; } .eyebrow::before { display: none; } } .script { font-family: var(--font-display); font-style: italic; color: var(--green); } /* ---------- Layout ---------- */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(4rem, 9vw, 8rem); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .bg-cream { background: var(--cream); } .bg-mint { background: var(--mint-soft); } .bg-green { background: var(--green-forest); color: #eef3ee; } .bg-green h1, .bg-green h2, .bg-green h3 { color: #fff; } .center { text-align: center; } .section-head { max-width: 730px; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; } .section-head .lead { margin-top: 1.1rem; } .section-head h2 { margin-top: 1rem; } .section-head .eyebrow { margin-bottom: .2rem; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--green); --btn-fg: #fff; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 2.1rem; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: 50px; border: 1px solid var(--btn-bg); transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); cursor: pointer; white-space: nowrap; /* own stacking context, so the texture below can sit behind the label */ isolation: isolate; } /* Strawberry skin, revealed on hover. z-index:-1 keeps it above the button's own background but beneath the label, so the text stays crisp. Layers, top to bottom: wet gloss, the curvature of the fruit, the seeded skin tile, then a flat flesh colour as the fallback while the tile loads. */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); background: linear-gradient(158deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 26%, transparent 52%), radial-gradient(135% 150% at 34% -12%, transparent 42%, rgba(74,4,2,.44) 100%), url("assets/textures/strawberry-skin.svg") 0 0 / 68px 68px repeat, linear-gradient(168deg, #cf1a12 0%, #a90f08 100%); } .btn:hover::before, .btn:focus-visible::before { opacity: 1; } /* sheen sweep */ .btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; } .btn:hover::after { left: 140%; } .btn > * { position: relative; z-index: 1; } /* the fill is the texture above; this only handles edge, lift and label */ .btn:hover { border-color: var(--btn-hover-edge); color: #fff; transform: translateY(-3px); box-shadow: var(--btn-hover-shadow); text-shadow: 0 1px 2px rgba(66,3,2,.5); } .btn--berry { --btn-bg: var(--berry); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { color: #fff; border-color: var(--btn-hover-edge); } .btn--light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.6); backdrop-filter: blur(2px); } /* keeps the white hairline so the CTA still reads against dark hero imagery */ .btn--light:hover { color: #fff; border-color: rgba(255,255,255,.9); } .btn--sm { padding: .72rem 1.5rem; font-size: .72rem; } .link-arrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .link-arrow::after { content: ""; } .link-arrow i { transition: transform .35s var(--ease); } .link-arrow:hover { color: var(--green-deep); } .link-arrow:hover i { transform: translateX(6px); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; height: var(--header-h); transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease); } .site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1.5rem; } .site-header.solid, .site-header.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(12,40,22,.06), 0 10px 30px rgba(12,40,22,.07); height: 72px; } .brand { display: flex; align-items: center; gap: .7rem; z-index: 2; flex: 0 0 auto; } .brand img { height: 48px; width: auto; transition: height .4s var(--ease); } .scrolled .brand img { height: 42px; } .brand-name { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ink); letter-spacing: .4px; white-space: nowrap; } .brand-name small { font-family: var(--font-body); font-size: .54rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .site-header:not(.solid):not(.scrolled) .brand-name { color: #fff; } .site-header:not(.solid):not(.scrolled) .brand-name small { color: rgba(255,255,255,.82); } @media (max-width: 400px){ .brand-name { font-size: 1.15rem; } .h-xl { font-size: 1.95rem; } } .nav { display: flex; align-items: center; gap: clamp(.7rem, 1.15vw, 1.35rem); } .nav a { font-size: .78rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); position: relative; padding-block: .4rem; white-space: nowrap; } .site-header:not(.solid):not(.scrolled) .nav > a { color: #fff; } .site-header:not(.solid):not(.scrolled) .nav-toggle span { background: #fff; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .35s var(--ease); } .nav a:hover::after, .nav a.active::after { width: 100%; } .nav a:hover { color: var(--green); } /* child combinator, to match the base rule above: the white-on-transparent-header hover must NOT reach into the "More" dropdown, whose panel is white. */ .site-header:not(.solid):not(.scrolled) .nav > a:hover { color: #fff; } .header-actions { display: flex; align-items: center; gap: 1rem; } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; height: 22px; justify-content: center; z-index: 2; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s var(--ease); } /* keep the white toggle legible over light hero imagery */ .site-header:not(.solid):not(.scrolled) .nav-toggle span { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } /* mobile nav */ @media (max-width: 1280px) { .nav-toggle { display: flex; } .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.5rem; background: linear-gradient(160deg, #0c5222 0%, #072e14 100%); transform: translateX(100%); transition: transform .5s var(--ease-out); padding: 2rem; /* a drawer taller than a short/landscape viewport must still reach its last link, and must not chain its scroll to the locked page behind it */ overflow-y: auto; overscroll-behavior: contain; } .nav.open { transform: translateX(0); } /* The scrolled header carries backdrop-filter, which per spec makes it the containing block for its fixed-position descendants — that collapsed this drawer's inset:0 into the 72px header box instead of the viewport. The blur is invisible behind a full-screen drawer anyway, so drop it while open. */ body.nav-open .site-header.solid, body.nav-open .site-header.scrolled { backdrop-filter: none; } /* the brand sits above the drawer (z-index 2), so it needs the drawer's white regardless of scroll state — the scrolled header's dark ink is unreadable there */ body.nav-open .brand-name { color: #fff; } body.nav-open .brand-name small { color: rgba(255,255,255,.82); } .nav a { color: #fff !important; font-size: 1.15rem; letter-spacing: .12em; } .nav a::after { background: var(--gold); } .nav .btn { margin-top: .5rem; } body.nav-open { overflow: hidden; } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-toggle.active span { background: #fff !important; } } .header-actions .btn { display: inline-flex; } @media (max-width: 1280px){ .header-actions .btn.book-desktop { display: none; } } /* avoid duplicate Book Now on desktop — the in-nav one is only for the mobile drawer */ @media (min-width: 1281px){ .nav > .btn { display: none; } } /* ---------- Hero ---------- */ /* hero + booking bar share the first viewport so the booking form is always above the fold */ .hero-wrap { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: clamp(10px, 2vh, 24px); } .hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; } /* inside the wrap, the hero flexes so the booking bar stays within the first viewport */ .hero-wrap > .hero { min-height: 0; flex: 1 1 auto; } .hero-wrap > #booking { flex: 0 0 auto; } .hero__media { position: absolute; top: -16%; left: 0; right: 0; height: 132%; z-index: -2; will-change: transform; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.5s var(--ease-out), visibility 1.5s var(--ease-out); } .hero__slide.is-active { opacity: 1; visibility: visible; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__slide.is-active img { animation: kenburns 8s ease-out both; } /* carousel controls */ .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: rgba(9,30,18,.28); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(3px); transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .hero__arrow:hover { background: var(--btn-hover); border-color: var(--btn-hover); } .hero__arrow--prev { left: clamp(.9rem, 2.5vw, 2rem); } .hero__arrow--next { right: clamp(.9rem, 2.5vw, 2rem); } .hero__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); } .hero__arrow--next:hover { transform: translateY(-50%) translateX(3px); } .hero__dots { position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 2.6rem); transform: translateX(-50%); z-index: 3; display: flex; gap: .6rem; } .hero__dots button { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7); transition: background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease); } .hero__dots button:hover { background: rgba(255,255,255,.8); } .hero__dots button.is-active { background: var(--gold); border-color: var(--gold); width: 26px; border-radius: 6px; } /* on phones the arrows overlap the hero copy — use swipe + dots instead */ @media (max-width: 640px) { .hero__arrow { display: none; } .hero__dots { bottom: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: opacity .4s linear, visibility .4s linear; } .hero__slide.is-active img { animation: none; } } /* The hero carries no copy of its own, so the full-frame scrim and corner vignette were dimming the photography for nothing. All that is still needed is a short band behind the transparent header — without it the white nav falls to ~3.2:1 over bright sky. Clear by 24%, so the image runs untouched. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,24,14,.42) 0%, rgba(6,24,14,.26) 9%, rgba(6,24,14,.08) 16%, transparent 24%); } @keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } } .hero__inner { max-width: 880px; padding-top: var(--header-h); } .hero .eyebrow { color: #fff; } .hero .eyebrow::before, .hero .eyebrow::after { background: var(--gold); } .hero h1 { color: #fff; margin: 1.3rem 0 1.5rem; text-shadow: 0 2px 40px rgba(0,0,0,.35); } .hero p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 300; max-width: 630px; color: #f1f4ee; text-shadow: 0 1px 20px rgba(0,0,0,.3); } .hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; } /* hero content entrance (independent of reveal observer for above-the-fold) */ .hero__inner > * { opacity: 0; transform: translateY(26px); animation: heroIn 1s var(--ease-out) forwards; } .hero__inner > *:nth-child(1) { animation-delay: .25s; } .hero__inner > *:nth-child(2) { animation-delay: .4s; } .hero__inner > *:nth-child(3) { animation-delay: .55s; } .hero__inner > *:nth-child(4) { animation-delay: .7s; } @keyframes heroIn { to { opacity: 1; transform: none; } } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .6rem; opacity: .85; } .scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(#fff, transparent); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* page hero (inner pages) */ .page-hero { position: relative; min-height: 60svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-out both; } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,30,18,.3) 0%, rgba(9,30,18,.35) 45%, rgba(9,30,18,.78) 100%); } .page-hero .container { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); padding-top: var(--header-h); } .page-hero h1 { color: #fff; } /* the hero eyebrow was removed by request; only the title and breadcrumb remain */ /* Breadcrumb sits in its own strip below the hero, not over the photograph. Cream against the white section that follows every page hero. */ .breadcrumb-bar { background: var(--cream); border-bottom: 1px solid var(--line-soft); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .breadcrumb-bar .container { padding-block: .95rem; } .breadcrumb-bar a { color: var(--green); } .breadcrumb-bar a:hover { color: var(--berry); } @media (max-width: 480px) { .breadcrumb-bar { font-size: .64rem; letter-spacing: .1em; } } /* ---------- Booking bar ---------- */ .bookbar { position: relative; z-index: 20; margin-top: -52px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-lg); border-radius: var(--radius-xl); border: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; align-items: end; padding: 1.4rem .9rem; } .bookbar .field { display: flex; flex-direction: column; gap: .4rem; padding-inline: 1.1rem; position: relative; min-width: 0; } .bookbar .field + .field::before { content: ""; position: absolute; left: 0; top: 8%; height: 84%; width: 1px; background: var(--line); } .bookbar label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); font-weight: 600; } .bookbar input, .bookbar select { font-family: var(--font-body); font-size: .98rem; color: var(--ink); font-weight: 400; border: none; border-bottom: 1.5px solid transparent; padding: .45rem 0; background: transparent; transition: border-color .3s var(--ease); width: 100%; min-width: 0; max-width: 100%; } .bookbar input:focus, .bookbar select:focus { outline: none; border-color: var(--green); } /* whole date field is clickable (JS calls showPicker), so hint it */ .bookbar input[type="date"] { cursor: pointer; } .bookbar input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } .bookbar .btn { height: fit-content; margin-left: 1.1rem; align-self: end; } @media (max-width: 860px) { .bookbar { grid-template-columns: 1fr 1fr; gap: 1.1rem .3rem; margin-top: -34px; padding: 1.3rem 1.1rem; } .bookbar .field { padding-inline: .6rem; } .bookbar .field + .field::before { display: none; } .bookbar .btn { grid-column: 1 / -1; margin-left: .6rem; margin-right: .6rem; margin-top: .3rem; } } /* smallest phones: native date inputs can't shrink into two columns — stack to one */ @media (max-width: 420px) { .bookbar { grid-template-columns: 1fr; gap: 1rem; } .bookbar .btn { grid-column: 1; } } /* ---------- Booking form: inline on desktop, sheet on mobile ---------- Desktop keeps the exact previous markup geometry: the sheet wrapper is display:contents so it creates no box, and the trigger/backdrop/close are off. */ .bookbar-open, .bookbar-sheet__backdrop, .bookbar-close { display: none; } .bookbar-sheet { display: contents; } @media (max-width: 860px) { /* #booking is a column-flex item of .hero-wrap and .container gives it margin-inline:auto — auto cross-axis margins make a flex item shrink-to-fit, so without a definite width the trigger would collapse to its label. */ .hero-wrap > #booking { width: 100%; } /* the inline bar is replaced by a single full-width trigger */ .bookbar-open { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; margin-top: -26px; position: relative; z-index: 20; padding: 1.05rem 1.4rem; background: var(--white); color: var(--green); border: 1px solid var(--line-soft); border-radius: 50px; box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } .bookbar-open i { font-size: 1rem; } .bookbar-sheet { display: none; position: fixed; inset: 0; z-index: 300; } .bookbar-sheet.is-open { display: block; } .bookbar-sheet__backdrop { display: block; position: absolute; inset: 0; background: rgba(9,30,18,.62); backdrop-filter: blur(2px); animation: bookbarFade .3s var(--ease) both; } /* the form becomes a bottom sheet; overrides the inline bar's negative pull-up */ .bookbar-sheet .bookbar { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 2.4rem 1.1rem 1.6rem; animation: bookbarUp .34s var(--ease-out) both; /* the form carries [data-reveal]; force it visible inside the sheet */ opacity: 1 !important; transform: none !important; } .bookbar-close { display: grid; place-items: center; position: absolute; top: .7rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%; z-index: 2; background: var(--mint-soft); color: var(--green-deep); font-size: 1rem; cursor: pointer; } .bookbar-close:hover { background: var(--green-deep); color: #fff; } @keyframes bookbarUp { from { transform: translateY(100%); } to { transform: none; } } @keyframes bookbarFade { from { opacity: 0; } to { opacity: 1; } } } @media (max-width: 860px) and (prefers-reduced-motion: reduce) { .bookbar-sheet .bookbar, .bookbar-sheet__backdrop { animation: none; } } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: clamp(1.4rem, 2.5vw, 2rem); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); display: flex; flex-direction: column; height: 100%; } .card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; } .card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9,30,18,.35)); opacity: 0; transition: opacity .5s var(--ease); } .card:hover .card__media img { transform: scale(1.08); } .card:hover .card__media::after { opacity: 1; } .card__tag { position: absolute; top: 1rem; left: 1rem; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); color: var(--green-deep); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .45rem .9rem; border-radius: 40px; box-shadow: 0 4px 14px rgba(12,40,22,.14); z-index: 1; } /* crowned tag for the signature room — the "King" in the name, made visible */ .card__tag--crown { display: inline-flex; align-items: center; gap: .45rem; } .card__tag--crown::before { content: ""; width: 16px; height: 12px; flex: none; background: url("assets/logo/crown.svg") center / contain no-repeat; } .card__body { padding: 1.7rem 1.6rem 1.9rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; } .card__body h3 { font-size: 1.65rem; transition: color .3s var(--ease); } .card:hover .card__body h3 { color: var(--green); } .card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .card__meta span { display: inline-flex; align-items: center; gap: .4rem; } .card__meta i { color: var(--green); } .card__body p { color: var(--ink-soft); font-size: .95rem; } .card__foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* feature (icon) items */ .feature { text-align: center; padding: 2rem 1.1rem; border-radius: var(--radius-lg); transition: background .4s var(--ease), transform .4s var(--ease); } .feature:hover { background: #fff; box-shadow: var(--shadow-sm); transform: translateY(-4px); } .feature__icon { width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--green-deep); font-size: 1.55rem; position: relative; transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); } .feature__icon::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--line); opacity: 0; transition: opacity .45s var(--ease), inset .45s var(--ease); } .feature:hover .feature__icon { background: var(--grad-green); color: #fff; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(11,73,30,.28); } .feature:hover .feature__icon::before { opacity: 1; inset: -9px; border-color: var(--gold-soft); } .feature h3 { font-size: 1.35rem; margin-bottom: .3rem; } .feature p { font-size: .9rem; color: var(--muted); } /* split (image + text) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--reverse .split__text { order: 2; } .split__media { position: relative; isolation: isolate; } .split__media img { position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; } .split__media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold-soft); border-radius: var(--radius-lg); z-index: 0; opacity: .55; } .split--reverse .split__media::before { inset: 14px 14px -14px -14px; } .split__text > * + * { margin-top: 1.2rem; } /* the white stat badge that overlapped the split image was removed by request */ @media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--reverse .split__text { order: 0; } /* full-width media on mobile: keep the decorative frame inside the viewport */ .split__media::before { inset: 10px 0 -10px 0; } .split--reverse .split__media::before { inset: 10px 0 -10px 0; } } /* stat row */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } .stats .n { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--green); line-height: 1; } .stats .t { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; } @media (max-width: 620px) { .stats { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* list check */ .checklist { display: grid; gap: .85rem; } .checklist li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-soft); } .checklist i { color: var(--green); margin-top: .35rem; } /* amenity chips */ .amenities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .amenities-grid .item { background: #fff; padding: 1.9rem 1rem; text-align: center; display: flex; flex-direction: column; gap: .8rem; align-items: center; transition: background .4s var(--ease), transform .4s var(--ease); } .amenities-grid .item:hover { background: var(--mint-soft); } .amenities-grid .item i { font-size: 1.55rem; color: var(--green); transition: transform .4s var(--ease); } .amenities-grid .item:hover i { transform: translateY(-4px) scale(1.08); color: var(--green-deep); } .amenities-grid .item span { font-size: .85rem; color: var(--ink-soft); letter-spacing: .01em; } @media (max-width: 820px) { .amenities-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 520px) { .amenities-grid { grid-template-columns: repeat(2,1fr); } } /* ---------- Gallery ---------- */ .masonry { columns: 3; column-gap: 16px; } .masonry img { width: 100%; margin-bottom: 16px; border-radius: var(--radius-lg); cursor: pointer; transition: filter .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); break-inside: avoid; box-shadow: var(--shadow-sm); } .masonry img:hover { filter: brightness(1.04) saturate(1.05); transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); } /* Gallery: masonry columns on desktop, a horizontal slider on phones/tablets. A single-column masonry ran ~9500px on a phone — an unusable scroll. */ @media (min-width: 861px) { /* the shared .cardrail__track is display:flex — the masonry must be restored explicitly here, or the desktop grid collapses into one huge flex row */ .cardrail--gallery .cardrail__track { display: block; columns: 3; column-gap: 16px; overflow: visible; padding: 0; scroll-snap-type: none; } .cardrail--gallery .cardrail__arrow { display: none; } } @media (max-width: 860px) { /* let it bleed past the container gutter like the site's other rails */ .cardrail--gallery { margin-inline: calc(var(--gutter) * -1); } .cardrail--gallery .cardrail__track { columns: auto; /* drop the masonry column flow */ display: flex; gap: clamp(.8rem, 2.5vw, 1.2rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem var(--gutter) 1rem; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; } .cardrail--gallery .cardrail__track::-webkit-scrollbar { display: none; } .cardrail--gallery .masonry img { flex: 0 0 min(80vw, 340px); margin-bottom: 0; scroll-snap-align: start; aspect-ratio: 4/3; object-fit: cover; } .cardrail--gallery .masonry img:hover { transform: none; } } @media (max-width: 860px) and (prefers-reduced-motion: reduce) { .cardrail--gallery .cardrail__track { scroll-behavior: auto; } } /* lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(8,20,12,.94); z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vw; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; box-shadow: var(--shadow-lg); } .lightbox__close, .lightbox__nav { position: absolute; color: #fff; font-size: 1.6rem; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; transition: background .3s; } .lightbox__close:hover, .lightbox__nav:hover { background: var(--btn-hover); } .lightbox__close { top: 20px; right: 20px; } .lightbox__nav.prev { left: 20px; top: 50%; transform: translateY(-50%); } .lightbox__nav.next { right: 20px; top: 50%; transform: translateY(-50%); } /* ---------- Offers ---------- */ .offer { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem 1.9rem; background: #fff; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); display: flex; flex-direction: column; gap: .7rem; } .offer:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: transparent; } .offer::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--grad-green); transition: width .4s var(--ease); } .offer:hover::before { width: 8px; } .offer .pct { font-family: var(--font-display); font-size: 3.2rem; font-weight: 600; color: var(--green); line-height: 1; } .offer h3 { font-size: 1.4rem; } .offer .terms { font-size: .8rem; color: var(--muted); margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--line-soft); } /* ---------- Testimonials ---------- */ .quote { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 2.4rem 2.2rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); height: 100%; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } /* the oversized watermark quotation mark was removed by request — it sat above the card's top edge and read as a clipped artefact rather than an ornament */ .quote .stars { color: var(--gold); letter-spacing: 2px; position: relative; z-index: 1; } .quote p { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--ink); line-height: 1.5; position: relative; z-index: 1; } .quote .who { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-top: auto; position: relative; z-index: 1; } /* ---------- Accordion (FAQ) ---------- */ .accordion { max-width: 860px; margin-inline: auto; } .acc-item { border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: .8rem; padding-inline: 1.4rem; background: #fff; transition: box-shadow .35s var(--ease), border-color .35s var(--ease); } .acc-item.open { box-shadow: var(--shadow-sm); border-color: var(--line); } .acc-q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); transition: color .3s var(--ease); } .acc-q:hover { color: var(--green); } .acc-q i { color: var(--green); transition: transform .35s var(--ease); flex-shrink: 0; } .acc-item.open .acc-q i { transform: rotate(45deg); } .acc-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .acc-a p { padding: 0 0 1.4rem; color: var(--ink-soft); } /* ---------- CTA band ---------- */ .cta-band { position: relative; color: #fff; text-align: center; overflow: hidden; } .cta-band__media { position: absolute; inset: 0; z-index: -2; } .cta-band__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); } .cta-band:hover .cta-band__media img { transform: scale(1.08); } .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(11,45,30,.74), rgba(7,32,20,.86)); } .cta-band .container > div { max-width: 640px; margin-inline: auto; } .cta-band h2 { color: #fff; } .cta-band p { max-width: 560px; margin: 1rem auto 2rem; color: #eaf0ea; } .cta-band .eyebrow { margin-bottom: 1rem; } /* ---------- Footer ---------- */ .site-footer { position: relative; background: linear-gradient(165deg, #0c5222 0%, #072e14 100%); color: #cdd8ce; font-size: .92rem; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-gold); opacity: .7; } .site-footer .container { padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; } .site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.3rem; font-weight: 500; } .site-footer a { color: #cdd8ce; } .site-footer a:hover { color: #fff; } .footer-brand img { height: 66px; width: auto; margin-bottom: .8rem; } .footer-wordmark { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: #fff; margin-bottom: 1rem; } .footer-wordmark small { font-family: var(--font-body); font-size: .58rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #9fb0a2; margin-top: 4px; } .footer-links li { margin-bottom: .7rem; } .footer-contact li { display: flex; gap: .7rem; margin-bottom: .9rem; align-items: flex-start; } .footer-contact i { color: var(--gold); margin-top: .3rem; } .socials { display: flex; gap: .7rem; margin-top: 1.2rem; } .socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); } .socials a:hover { background: var(--green); border-color: var(--green); transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.25); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: #9fb0a2; } .footer-bottom a { color: #9fb0a2; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Floating actions ---------- */ /* ---------- Floating "Book Now" (phones/tablets) ---------- Replaces the inline "Check Availability" trigger below 860px. Full-bleed bar pinned to the bottom edge; --fab-h keeps the WhatsApp stack and the page's bottom padding in step with it so nothing ends up underneath. */ .fab-book { display: none; } @media (max-width: 860px) { :root { --fab-h: 54px; } .bookbar-open { display: none; } /* superseded by the floating bar */ .fab-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; border-radius: 0; border: none; /* pinned height so --fab-h is exact — the offsets below depend on it */ min-height: var(--fab-h); padding: 1.05rem 1.4rem; /* clears the iOS home indicator without shrinking the tap target */ padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px)); background: var(--green); color: #fff; box-shadow: 0 -6px 22px rgba(9,30,18,.2); font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease); } .fab-book:hover, .fab-book:focus-visible, .fab-book:active { background: var(--green-deep); color: #fff; } .fab-book i { font-size: 1rem; } } @media (max-width: 380px) { .fab-book { font-size: .7rem; letter-spacing: .14em; } } .float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: .7rem; } .float-actions a { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-md); transition: transform .3s var(--ease); } .float-actions a:hover { transform: scale(1.1); color:#fff; } .fa-wa { background: #25d366; } /* the floating call button was removed by request */ /* subtle attention pulse on WhatsApp */ .float-actions .fa-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: waPulse 2.4s var(--ease) infinite; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } @media (prefers-reduced-motion: reduce) { .float-actions .fa-wa::after { animation: none; } } /* back-to-top button — same 54px disc as the WhatsApp button, kept quiet by its near-transparent fill rather than by a smaller size */ .fa-top { order: -1; align-self: flex-end; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--green); font-size: 1.15rem; background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .fa-top.show { opacity: .6; visibility: visible; transform: none; } .fa-top:hover { opacity: 1; color: var(--green-deep); background: #fff; } @media (prefers-reduced-motion: reduce) { .fa-top { transition: opacity .3s var(--ease), visibility .3s var(--ease); transform: none; } .fa-top:hover { transform: none; } } /* Clearance for the full-width Book Now bar. Must come after the .float-actions base rule above — a media query adds no specificity, so source order decides. */ @media (max-width: 860px) { body { padding-bottom: calc(var(--fab-h) + env(safe-area-inset-bottom, 0px)); } .float-actions { bottom: calc(var(--fab-h) + env(safe-area-inset-bottom, 0px) + 14px); } } /* ---------- Reveal animation ---------- */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .1s; } [data-reveal][data-delay="2"] { transition-delay: .2s; } [data-reveal][data-delay="3"] { transition-delay: .3s; } [data-reveal][data-delay="4"] { transition-delay: .4s; } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal="zoom"].in { transform: none; } [data-reveal="left"] { transform: translateX(-48px); } [data-reveal="right"] { transform: translateX(48px); } [data-reveal="left"].in, [data-reveal="right"].in { transform: none; } /* ---------- Curtain-wipe image reveal ---------- */ [data-reveal="clip"] { opacity: 0; transform: none; transition: opacity .6s var(--ease-out); } [data-reveal="clip"].in { opacity: 1; } [data-reveal="clip"] img { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.15s var(--ease-out), transform 1.6s var(--ease-out); will-change: clip-path, transform; } [data-reveal="clip"].in img { clip-path: inset(0 0 0 0); transform: scale(1); } /* when an inner image also drifts (data-parallax), let JS own its transform */ [data-reveal="clip"] img[data-parallax] { transform: none; transition: clip-path 1.15s var(--ease-out); } /* ---------- Word-by-word text rise ---------- */ [data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; } [data-split] .word__i { display: inline-block; transform: translateY(115%); transition: transform .85s var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms); } [data-split].in .word__i { transform: translateY(0); } /* ---------- Scroll-linked parallax drift ---------- */ [data-parallax] { will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-reveal]{opacity:1 !important;transform:none !important;transition:none} [data-reveal="clip"] img { clip-path: none; transform: none; transition: none; } [data-split] .word__i { transform: none !important; transition: none; } [data-parallax] { transform: none !important; } .hero__media img, .page-hero__media img { animation: none; } .hero__inner > * { opacity: 1; transform: none; animation: none; } } /* gallery filter chips */ .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: clamp(2rem,4vw,3rem); } .filter-bar button { padding: .55rem 1.3rem; border: 1px solid var(--line); border-radius: 40px; font-family: var(--font-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: #fff; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .filter-bar button:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; } .filter-bar button.active { background: var(--grad-green); color: #fff; border-color: var(--green); box-shadow: 0 6px 16px rgba(11,73,30,.22); } /* contact map iframe reset */ .split__media iframe { display: block; } /* utilities */ /* visually hidden, still read by screen readers & crawlers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .mt-0{margin-top:0}.mb-0{margin-bottom:0} .text-berry{color:var(--berry)} /* Section divider — carries the logo's crown between two gold hairlines. UNUSED: the
under every heading was removed by request. Kept so the rule is here if the crown rule is ever brought back. url() resolves against this stylesheet, so the same path works from subfolders. */ .divider { width: 138px; height: 22px; border: none; border-radius: 0; margin: 1.5rem 0; background: url("assets/logo/crown.svg") center center / auto 17px no-repeat, linear-gradient(90deg, transparent, var(--gold)) left center / 46px 1.5px no-repeat, linear-gradient(90deg, var(--gold), transparent) right center / 46px 1.5px no-repeat; } .center .divider { margin-inline: auto; } @media (max-width: 480px) { .divider { width: 118px; background-size: auto 13px, 38px 1.5px, 38px 1.5px; } } .prose > * + * { margin-top: 1.1rem; } .prose p { color: var(--ink-soft); } .prose h2, .prose h3 { margin-top: 2rem; } .prose h2 { font-size: 1.17em; } /* legal-page section headings: H2 for outline, kept at the old H3 size */ .prose ul.bullets { list-style: disc; padding-left: 1.3rem; } .prose ul.bullets li { color: var(--ink-soft); margin-bottom: .5rem; } .prose .updated { font-size: .82rem; letter-spacing: .04em; color: var(--muted); } /* ---------- Enquiry / contact form (reusable) ---------- */ .form { display: grid; gap: 1.1rem; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form .field { display: flex; flex-direction: column; gap: .45rem; } .form label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); font-weight: 600; } .form input, .form select, .form textarea { font-family: var(--font-body); font-size: .98rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .form textarea { resize: vertical; min-height: 120px; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(17,118,48,.12); } .form .btn { justify-self: start; } .form-note { font-size: .82rem; color: var(--muted); } /* Enquiry form: validation, status messages and the bot honeypot. .hp-field is off-canvas rather than display:none so bots that skip hidden inputs still fill it in - anything submitted with it non-empty is dropped. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-legal { font-size: .74rem; color: var(--muted); line-height: 1.6; } .form-legal a { color: var(--green); text-decoration: underline; } .form input.is-invalid, .form select.is-invalid, .form textarea.is-invalid { border-color: var(--berry); background: #fff; } .form input.is-invalid:focus, .form textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(193,2,1,.12); } .form .field-error { font-size: .76rem; color: var(--berry-dark); letter-spacing: 0; text-transform: none; font-weight: 500; } .form-status { font-size: .9rem; border-radius: var(--radius); padding: .8rem 1rem; margin: 0; } .form-status--ok { background: var(--mint-soft); border: 1px solid var(--green); color: var(--green-deep); } .form-status--err { background: #fdeceb; border: 1px solid var(--berry); color: var(--berry-dark); } .form-status--busy { background: var(--cream-2); border: 1px solid var(--line); color: var(--ink-soft); } .form .btn[disabled] { opacity: .6; pointer-events: none; } @media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } } /* ---------- Card rail (full-bleed, auto-scrolling, reusable) ---------- Sits OUTSIDE .container so it spans the section edge to edge. The track is a native scroller with snap points, so touch/trackpad swiping works for free and the JS only has to nudge scrollLeft. */ .cardrail { position: relative; } .cardrail__track { display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* first/last card line up with the container gutter, but still scroll edge to edge */ padding: .5rem var(--gutter) 1.5rem; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; list-style: none; margin: 0; } .cardrail__track::-webkit-scrollbar { display: none; } .cardrail__track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: var(--radius); } @media (prefers-reduced-motion: reduce) { .cardrail__track { scroll-behavior: auto; } } .carecard { flex: 0 0 clamp(255px, 25vw, 335px); scroll-snap-align: start; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .carecard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .carecard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; } .carecard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .carecard:hover .carecard__media img { transform: scale(1.07); } .carecard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9,30,18,.42)); } /* Icon badge straddles the image edge. It lives in the body, not the media box — the media clips its own overflow for the hover zoom, which would slice it in half. */ .carecard__icon { margin-top: -22px; margin-bottom: .85rem; position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--green); font-size: 1rem; box-shadow: 0 6px 16px rgba(12,40,22,.18); transition: background .45s var(--ease), color .45s var(--ease); } .carecard:hover .carecard__icon { background: var(--grad-green); color: #fff; } .carecard__body { padding: 0 1.35rem 1.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; } .carecard__body h3 { font-size: 1.28rem; } .carecard__body p { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; } .cardrail__arrow { position: absolute; top: calc(50% - 1.5rem); transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--green-deep); font-size: .85rem; border: 1px solid var(--line); box-shadow: var(--shadow-md); transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); } .cardrail__arrow:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); } .cardrail__arrow--prev { left: clamp(.5rem, 1.5vw, 1.4rem); } .cardrail__arrow--next { right: clamp(.5rem, 1.5vw, 1.4rem); } .cardrail__arrow[disabled] { opacity: 0; pointer-events: none; } @media (max-width: 560px) { .cardrail__arrow { width: 38px; height: 38px; } .carecard { flex-basis: 78vw; } } /* ---------- "Why Strawberry King" highlights ---------- One markup, two behaviours. Above 620px the track is re-declared as the 4-up grid this section has always been — same columns, same gap, same container width — so nothing changes on desktop. At 620px and below, where grid-4 used to collapse to four tall stacked cards, the base .cardrail__track rules take over and it becomes a swipeable rail. The shared [data-cardrail] JS idles itself whenever nothing overflows, so the grid state needs no opt-out. */ @media (min-width: 621px) { .cardrail--why .cardrail__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.5vw, 2rem); max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); /* the grid must not clip .feature's hover lift and shadow */ overflow: visible; scroll-snap-type: none; } .cardrail--why .cardrail__arrow { display: none; } } @media (min-width: 621px) and (max-width: 980px) { .cardrail--why .cardrail__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { /* as slides they need the card treatment .feature only gets on hover */ .cardrail--why .feature { flex: 0 0 78vw; scroll-snap-align: start; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); } } /* ---------- Rail that is a plain grid on desktop ---------- Used by Experiences: identical markup, 3-up grid above 860px and a swipeable rail below. The rail script needs no special casing — with overflow visible there is nothing to scroll, so it idles and disables its own arrows. */ .cardrail__cell { display: flex; } .cardrail__cell > .card { width: 100%; } @media (min-width: 861px) { .cardrail--grid .cardrail__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2rem); overflow: visible; padding: 0; } .cardrail--grid .cardrail__arrow { display: none; } } @media (max-width: 860px) { /* this rail lives inside .container, so pull it back out to bleed edge to edge */ .cardrail--grid { margin-inline: calc(var(--gutter) * -1); } .cardrail--grid .cardrail__cell { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; } } /* Offers & Guest Love use the same rail, but keep the column counts they had before: offers were 4-up and quotes 3-up above 980px, both 2-up down to 861px. */ .cardrail__cell > .offer, .cardrail__cell > .quote { width: 100%; } @media (min-width: 861px) { .cardrail--offers .cardrail__track { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 861px) and (max-width: 980px) { .cardrail--offers .cardrail__track, .cardrail--quotes .cardrail__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { /* .quote sets height:100%; in the rail the cell is the flex parent, so let it fill */ .cardrail--quotes .cardrail__cell > .quote, .cardrail--offers .cardrail__cell > .offer { height: auto; } } /* ---------- Room slides (big imagery, details reveal on hover/focus) ---------- */ .cardrail--rooms .cardrail__track { padding-block: .5rem 2rem; } .roomslide { flex: 0 0 clamp(280px, 27vw, 380px); scroll-snap-align: start; } .roomslide__link { position: relative; display: block; overflow: hidden; aspect-ratio: 3/4.1; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .roomslide__link:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); color: #fff; } .roomslide__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .roomslide__link:hover img, .roomslide__link:focus-visible img { transform: scale(1.07); } /* Scrim exists only to carry the text, so it must not touch the photo above it. Rest: nothing at all until 50% height. Hover: nothing until 30%, since the revealed block is taller. Extra stops keep the ramp from banding, and the base is darker at the very bottom than before, so text contrast still rises. */ .roomslide__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(5,20,11,.16) 65%, rgba(5,20,11,.52) 79%, rgba(4,17,9,.92) 100%); } /* second layer cross-fades in — a gradient itself cannot be transitioned */ .roomslide__veil::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, transparent 30%, rgba(5,20,11,.22) 50%, rgba(5,20,11,.64) 72%, rgba(4,17,9,.96) 100%); transition: opacity .5s var(--ease); } .roomslide__link:hover .roomslide__veil::after, .roomslide__link:focus-visible .roomslide__veil::after { opacity: 1; } /* Details are permanently open on touch, so the deeper scrim must be too. The card is also shorter there, pushing the title up into the lighter part of the ramp — so start it higher. Costs nothing on desktop, which keeps its clean 50%. */ @media (hover: none) { .roomslide__veil::after { opacity: 1; background: linear-gradient(180deg, transparent 16%, rgba(5,20,11,.32) 40%, rgba(5,20,11,.72) 66%, rgba(4,17,9,.96) 100%); } } .roomslide__tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); color: var(--green-deep); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .42rem .85rem; border-radius: 40px; box-shadow: 0 4px 14px rgba(12,40,22,.16); } .roomslide__tag--crown::before { content: ""; width: 15px; height: 11px; flex: none; background: url("assets/logo/crown.svg") center / contain no-repeat; } .roomslide__content { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.5rem 1.4rem 1.6rem; } .roomslide__content h3 { color: #fff; font-size: 1.55rem; line-height: 1.14; text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); } .roomslide__content h3 small { display: block; margin-top: .3rem; font-family: var(--font-body); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); } /* the reveal: collapsed by default, opened by hover or keyboard focus */ .roomslide__reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s var(--ease), margin-top .6s var(--ease); } .roomslide__link:hover .roomslide__reveal, .roomslide__link:focus-visible .roomslide__reveal { max-height: 260px; opacity: 1; margin-top: .9rem; } /* text carries its own contrast so the scrim can stay off the photograph */ .roomslide__meta, .roomslide__inner > p, .roomslide__cta { text-shadow: 0 1px 12px rgba(0,0,0,.55); } .roomslide__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .76rem; color: rgba(255,255,255,.92); } .roomslide__meta span { display: inline-flex; align-items: center; gap: .35rem; } .roomslide__meta i { color: var(--gold-soft); } .roomslide__inner > p { margin-top: .7rem; font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .roomslide__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--gold); padding-bottom: .3rem; } .roomslide__link:hover .roomslide__cta i { transform: translateX(5px); } .roomslide__cta i { transition: transform .35s var(--ease); } /* touch devices have no hover — show the details rather than hiding them forever */ @media (hover: none) { .roomslide__reveal { max-height: 300px; opacity: 1; margin-top: .9rem; } } /* On phones/tablets those details are permanently visible, which crowds the photograph. Below 860px the card stops being an overlay and reads top-to- bottom instead: image first, then the content on a white panel beneath it. */ @media (max-width: 860px) { .roomslide__link { aspect-ratio: auto; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); color: var(--ink); } .roomslide__link:hover { transform: none; color: var(--ink); } .roomslide__link img { position: static; aspect-ratio: 4/3; height: auto; } .roomslide__link:hover img, .roomslide__link:focus-visible img { transform: none; } .roomslide__veil { display: none; } .roomslide__content { position: static; padding: 1.2rem 1.25rem 1.45rem; } .roomslide__content h3 { color: var(--ink); font-size: 1.32rem; text-shadow: none; } .roomslide__content h3 small { color: var(--green); } /* nothing left to reveal — the panel is simply part of the card now */ .roomslide__reveal { max-height: none; opacity: 1; margin-top: .7rem; overflow: visible; } .roomslide__meta, .roomslide__inner > p, .roomslide__cta { text-shadow: none; } .roomslide__meta { color: var(--muted); } .roomslide__meta i { color: var(--green); } .roomslide__inner > p { color: var(--ink-soft); display: block; overflow: visible; -webkit-line-clamp: unset; -webkit-box-orient: unset; } .roomslide__cta { color: var(--green); border-bottom-color: var(--gold); } } @media (prefers-reduced-motion: reduce) { .roomslide__link, .roomslide__link img, .roomslide__reveal { transition-duration: .01ms; } } /* ---------- Media carousel (reusable inside .split__media) ---------- Takes over the frame treatment that the bare used to carry, so the gold offset frame and shadow look identical to a single static image. */ .media-carousel { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/3.4; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .split__media .media-carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; box-shadow: none; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-out), visibility 1.1s var(--ease-out); } .split__media .media-carousel img.is-active { opacity: 1; visibility: visible; } .media-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; background: rgba(9,30,18,.34); border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(3px); opacity: .75; transition: background .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); } .media-carousel:hover .media-carousel__arrow { opacity: 1; } .media-carousel__arrow:hover { background: var(--green-deep); border-color: var(--green-deep); } .media-carousel__arrow--prev { left: .8rem; } .media-carousel__arrow--next { right: .8rem; } .media-carousel__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); } .media-carousel__arrow--next:hover { transform: translateY(-50%) translateX(3px); } .media-carousel__dots { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 3; display: flex; gap: .45rem; } .media-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.75); transition: background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease); } .media-carousel__dots button:hover { background: rgba(255,255,255,.85); } .media-carousel__dots button.is-active { background: var(--gold); border-color: var(--gold); width: 20px; border-radius: 5px; } @media (max-width: 560px) { .media-carousel__arrow { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .split__media .media-carousel img { transition: opacity .3s linear, visibility .3s linear; } } /* ===================================================================== DISTINCTION & HOSPITALITY Two ideas the rest of the system didn't yet carry: 1. the strawberry farm (the one thing no other hill resort has) — finally uses the --berry token the palette reserved for it 2. the human care behind the amenity list ===================================================================== */ /* the hero shares its viewport with the booking bar, so cap the headline a touch below .h-xl to guarantee the bookbar stays above the fold */ .hero-wrap .hero h1 { font-size: clamp(2.45rem, 5.3vw, 4.55rem); } @media (max-height: 720px) and (min-width: 861px) { .hero-wrap .hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 1rem 0 1.1rem; } .hero-wrap .hero p { font-size: 1.02rem; } } /* ---------- Farm band (strawberry identity) ---------- */ /* berry band, textured with the strawberry's white seeds in a staggered scatter */ .bg-berry { background: radial-gradient(circle, rgba(255,255,255,.95) 2px, transparent 2.4px) 0 0 / 38px 38px, radial-gradient(circle, rgba(255,255,255,.95) 2px, transparent 2.4px) 19px 19px / 38px 38px, linear-gradient(170deg, #fdf4f3 0%, #fbeceb 100%); } /* the band keeps its soft berry backdrop, but its eyebrow and checklist icons now use the site-wide green + gold like every other section */ /* same crown, berry-red hairlines — the logo's own green-on-red pairing. UNUSED, see .divider */ .divider--berry { background: url("assets/logo/crown.svg") center center / auto 17px no-repeat, linear-gradient(90deg, transparent, var(--berry)) left center / 46px 1.5px no-repeat, linear-gradient(90deg, var(--berry), transparent) right center / 46px 1.5px no-repeat; } /* ---------- Care grid ("How We Look After You") ---------- deliberately unlike .feature (centred circles) so the two never read as the same block twice: left-aligned, rule-led, quieter */ .care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.8rem, 3.5vw, 3.4rem); } @media (max-width: 900px) { .care-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .care-grid { grid-template-columns: 1fr; } } .care-item { position: relative; padding-top: 1.5rem; } .care-item::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .55s var(--ease); } .care-item:hover::before { width: 78px; } .care-item__icon { color: var(--green); font-size: 1.6rem; margin-bottom: .9rem; display: inline-flex; transition: transform .45s var(--ease), color .45s var(--ease); } .care-item:hover .care-item__icon { transform: translateY(-3px); color: var(--berry); } .care-item h3 { font-size: 1.32rem; margin-bottom: .45rem; } .care-item p { font-size: .93rem; color: var(--ink-soft); line-height: 1.72; } /* a closing courtesy line — signed, so it reads as a person not a policy. UNUSED: the

under the care cards was removed by request. Kept so the rule is here if the line is ever brought back. */ .care-note { margin-top: clamp(2.6rem, 5vw, 4rem); text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.55; color: var(--green-deep); max-width: 720px; margin-inline: auto; } /* the logo's navy filigree ornament above the signature was removed by request */ .care-note span { display: block; margin-top: 1rem; font-family: var(--font-body); font-style: normal; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* ---------- Room-detail specs table ---------- */ .specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .specs .spec { background: #fff; padding: 1.6rem 1rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center; } .specs .spec i { font-size: 1.4rem; color: var(--green); } .specs .spec .k { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .specs .spec .v { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); line-height: 1; } @media (max-width: 620px) { .specs { grid-template-columns: 1fr 1fr; } } /* room amenity two-column check list */ .amenity-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem 1.6rem; } .amenity-cols li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; } .amenity-cols i { color: var(--green); margin-top: .35rem; } @media (max-width: 720px) { .amenity-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .amenity-cols { grid-template-columns: 1fr; } } /* room detail gallery grid */ .room-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .room-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s var(--ease); } .room-gallery img:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-md); filter: brightness(1.04); } @media (max-width: 720px) { .room-gallery { grid-template-columns: 1fr 1fr; } } /* ---------- Attraction cards (reuse offer look, no image) ---------- */ .place { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.7rem; background: #fff; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); display: flex; flex-direction: column; gap: .55rem; height: 100%; } .place:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: transparent; } .place::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--grad-green); } .place .dist { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); } .place h3 { font-size: 1.5rem; } .place p { font-size: .92rem; color: var(--ink-soft); } .place .cat { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--muted); letter-spacing: .04em; } /* ---------- Rooms & Guests popover (booking bar) ---------- */ .bookbar .field--guests { justify-content: flex-end; } .guests-toggle { font-family: var(--font-body); font-size: .98rem; color: var(--ink); font-weight: 400; text-align: left; border: none; border-bottom: 1.5px solid transparent; padding: .45rem 0; background: transparent; cursor: pointer; width: 100%; transition: border-color .3s var(--ease); } .guests-toggle:focus-visible { outline: none; border-color: var(--green); } .guests-pop { position: absolute; top: calc(100% + 12px); left: 1.1rem; z-index: 40; width: 268px; max-width: calc(100vw - 2.4rem); background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1rem 1.1rem 1.1rem; } .guests-pop[hidden] { display: none; } .guests-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; } .guests-row + .guests-row { border-top: 1px solid var(--line); } .guests-row__label { font-size: .95rem; color: var(--ink); font-weight: 500; } .guests-row__label small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: .1rem; } .stepper { display: inline-flex; align-items: center; gap: .2rem; } .stepper__btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--green); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .stepper__btn:hover:not(:disabled) { border-color: var(--btn-hover); background: var(--btn-hover); color: #fff; } .stepper__btn:disabled { opacity: .35; cursor: not-allowed; } .stepper__val { min-width: 1.6rem; text-align: center; font-size: .98rem; font-weight: 500; color: var(--ink); } .guests-done { margin-top: .8rem; width: 100%; border: none; border-radius: var(--radius); background: var(--green); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: .9rem; letter-spacing: .04em; padding: .6rem; cursor: pointer; transition: background .2s var(--ease); } .guests-done:hover { background: var(--btn-hover); } @media (max-width: 860px) { .guests-pop { left: .6rem; } } /* ---------- Desktop navbar "More" dropdown (hamburger only) ---------- */ .nav__more { position: relative; display: inline-flex; align-items: center; } .nav__more-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .78rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: none; border: 0; cursor: pointer; padding-block: .4rem; padding-inline: .2rem; white-space: nowrap; transition: color .25s var(--ease); } /* icon carries the control on its own now that the "More" label is gone */ .nav__more-btn i { font-size: 1.1rem; line-height: 1; } /* no underline on the hamburger — the open/active state is carried by colour alone */ .nav__more.open .nav__more-btn { color: var(--green); } .site-header:not(.solid):not(.scrolled) .nav__more-btn { color: #fff; } .nav__more-menu { position: absolute; top: calc(100% + 16px); right: 0; z-index: 60; display: none; flex-direction: column; min-width: 200px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .5rem; } .nav__more.open .nav__more-menu { display: flex; } .nav__more-menu a { padding: .6rem .75rem; border-radius: var(--radius); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); } .nav__more-menu a::after { display: none; } .nav__more-menu a:hover, .nav__more-menu a.active { background: var(--mint); color: var(--green-deep); } /* On the mobile drawer (<=1280px) flatten the More group into the full list. Must sit after the dropdown rules above — a media query adds no specificity, so only source order lets these win. */ @media (max-width: 1280px) { .nav__more { display: contents; } .nav__more-btn { display: none; } .nav__more-menu { display: contents; } /* the flattened items sit on the dark green drawer, where the desktop dropdown's mint hover would trap white text against a pale background */ .nav__more-menu a:hover, .nav__more-menu a.active { background: transparent; } /* ...and the dropdown's compact type outspecifies `.nav a`, which left these five reading a size smaller than the rest of the drawer list */ .nav__more-menu a { font-size: 1.15rem; letter-spacing: .12em; padding: .4rem 0; border-radius: 0; } } /* ---------- Mobile 16px text floor ---------- Below 860px every piece of running copy and every form control renders at a minimum of 16px. 16px on inputs additionally stops iOS Safari auto-zooming the page when a field takes focus. Deliberately excluded: uppercase, letterspaced micro-labels (eyebrows, buttons, nav, breadcrumbs, card/room tags, footer column headings, stat and spec keys) — those are UI chrome rather than reading text, and at 16px with .12–.34em tracking they would wrap and break their rows. */ @media (max-width: 860px) { /* running copy */ .feature p, .card__body p, .carecard__body p, .care-item p, .place p, .place .cat, .roomslide__inner > p, .roomslide__meta, .amenity-cols li, .amenities-grid .item span, .care-note span, .offer .terms, .form-note, .prose .updated, .site-footer, .footer-bottom { font-size: 1rem; } /* two .card__meta instances carry an inline style="font-size:.9rem" (homepage and dining). Inline styles outrank a media query, so this one needs !important — scoped to mobile only, leaving the desktop inline size untouched. */ .card__meta { font-size: 1rem !important; } /* form controls — also the iOS no-zoom threshold */ .bookbar input, .bookbar select, .form input, .form select, .form textarea, .guests-toggle, .guests-row__label, .stepper__val, .guests-done { font-size: 1rem; } } /* Body copy that follows an intro (.lead) in a text column reads as one block: same size, weight and leading */ .split__text .lead ~ p:not([class]) { font-size: clamp(1.06rem, 1.4vw, 1.22rem); color: var(--ink-soft); font-weight: 300; line-height: 1.75; } /* FAQ section headings (faqs/) */ .faq-group { margin: 2.6rem 0 1.1rem; } .accordion > .faq-group:first-child { margin-top: 0; } /* ---------- Cookie consent bar (script.js) ---------- */ .cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1200; max-width: 680px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: .88rem; color: var(--ink-soft); } .cookie-bar p { flex: 1 1 260px; margin: 0; } .cookie-bar a { color: var(--green); text-decoration: underline; } .cookie-bar__actions { display: flex; gap: .6rem; } /* Enquiry form consent line (js/forms.js validates it) */ .form label.form-consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-soft); line-height: 1.5; cursor: pointer; } .form label.form-consent input { margin-top: .25rem; accent-color: var(--green); } /* ---------- QC round 2026-10-06 ---------- */ /* Page-hero titles: one alignment at every width. Short titles were centred (fit-content width + auto margins) while titles that wrapped fell back to left alignment. */ .page-hero .container > div, .page-hero h1 { text-align: center; } .page-hero h1 { margin-inline: auto; } /* Spec tiles: the text values ("King Bed", "Garden View") are set smaller than the numbers, so their line box was shorter and the tile content sat higher. Give every value the numeric line height so icons, values and labels line up across the row. */ .specs .spec .v { min-height: 1.5rem; display: flex; align-items: center; } /* Mobile: grid tracks of `1fr` take their content's min width, so the enquiry form's controls pushed the contact page 13px past the viewport. */ @media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } } .form .field { min-width: 0; } .form input, .form select, .form textarea { width: 100%; min-width: 0; } /* Mobile drawer */ @media (max-width: 1280px) { /* items start below the header instead of centring, so the first links never run under the logo; the drawer still scrolls if the list is taller than the screen */ .nav { justify-content: flex-start; gap: .85rem; padding: calc(var(--header-h) + 1.25rem) 2rem 2.5rem; } /* current page: gold label + underline, for top-level and flattened "More" links alike */ .nav a.active, .nav__more-menu a.active { color: var(--gold-soft) !important; } .nav__more-menu a::after { display: block; } .nav a.active::after { width: 100%; } /* Book Now: a full, legible button rather than the compact header pill */ .nav > a.btn { margin-top: 1.2rem; padding: 1.05rem 2.8rem; min-width: 230px; font-size: .86rem; letter-spacing: .16em; background: #fff; border-color: #fff; color: var(--green-deep) !important; } .nav > a.btn::after { left: -120%; bottom: auto; height: 100%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); } } /* Compact icon grid (celebrations "Perfect For"): two across on phones with smaller icons, instead of four full-height stacked tiles. */ @media (max-width: 620px) { .grid-4.grid--compact { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .grid--compact .feature { padding: 1.1rem .6rem; } .grid--compact .feature__icon { width: 52px; height: 52px; font-size: 1.15rem; margin-bottom: .7rem; } .grid--compact .feature h3 { font-size: 1.1rem; } } .form label.form-consent input { width: auto; flex: 0 0 auto; }