/* ============================================================ RANTHAMBHORE BHAG PALACE — responsive rebuild of Figma 1:41 ------------------------------------------------------------ • All illustrations (crest, ornaments, birds, stars, icons, review frames, booking icons, button flourishes) are inline SVG — no external files needed for the artwork. • PHOTOGRAPHS are wired through CSS variables in :root below. Drop files into /assets with the listed names (or edit the var) and they appear instantly. Until then each slot shows a colour matched to that photo so the layout still reads right. ============================================================ */ /* ---------- PHOTO SLOTS — fill these in ---------- */ :root{ /* the hero bleeds the full viewport, so it asks for a wider derivative than the w_1600 cap the cards and bands use */ --img-hero: url('https://assets.simplotel.com/simplotel/image/upload/c_crop,x_0,y_1290,w_2048,h_1413/f_auto,q_auto,w_2048/ranthambore-bagh-palace/arched-facade-palm-trees-sky'); /* background-free cut-out of the Figma mossy arch */ /* the forest — restored from _unused-assets, where the CDN swap had moved it */ --img-rooms-bg: url('assets/rooms-bg.jpg'); /* --img-room-1..5 are gone. Four of them pointed at assets/room-1..4.jpg, which are stock pictures of somewhere else — a pine forest under "Dhyana Spa", a safari jeep under "24-hour Gym", birdwatchers under "Indoor & Outdoor Games", and a watermarked woodland path under "Bonfire". The two facilities the library does have a photograph of now carry it inline in index.html, the way every other photo slot on the site is written, and the three it does not carry the missing-picture tile. */ --img-band-left: url('https://assets.simplotel.com/simplotel/image/upload/f_auto,q_auto,w_1600/ranthambore-bagh-palace/spice-court-dining-hall-chevron-floor'); --img-band-right: url('https://assets.simplotel.com/simplotel/image/upload/f_auto,q_auto,w_1600/ranthambore-bagh-palace/spice-court-tables-beside-garden-arches'); /* the footer scenery is assets/footer.png, applied directly on .footer-scene */ /* real illustrations extracted from the Figma */ --ill-leaf-bg: url('assets/illustrations/leaf-pattern-bg.svg'); /* 1898x1027 watercolour leaf wash for the About Us band. Already drawn at ~8% alpha (#596640, max A=20), so it is used at full opacity — fading it any further erases it. */ --ill-about-leaf: url('assets/illustrations/about us leaf background.png'); --ill-branch-1: url('assets/illustrations/leaf-branch-1.svg'); --ill-branch-2: url('assets/illustrations/leaf-branch-2.svg'); --ill-orn-left: url('assets/illustrations/ornament-strip-left.png'); --ill-orn-right: url('assets/illustrations/ornament-strip-right.png'); --ill-wordmark: url('assets/illustrations/wordmark-lockup.svg'); /* twin doves, background removed + trimmed to the artwork (822x533) so it can be used as a mask and pick up whatever colour the heading is */ --ill-birds: url("data:image/png;base64,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"); --sage:#53735e; /* ---- REAL FIGMA VECTORS (assets/figma-svg, exported from frame 1:41) ---- */ --fx-btn-outline: url('assets/figma-svg/btn-outline-152.svg'); /* 153x69.5 stroke #53735E */ --fx-btn-dome: url('assets/figma-svg/btn-dome-125.svg'); /* 126x70 fill #53735E */ --fx-btn-dome-o: url('assets/figma-svg/btn-dome-125-outline.svg'); /* same path, stroked */ --fx-btn-outline-w:url('assets/figma-svg/btn-outline-152-white.svg'); /* 153x69.5 stroke white */ --fx-btn-dome-w: url('assets/figma-svg/btn-dome-125-white.svg'); /* 126x70 fill white */ --fx-btn-sprig: url('assets/figma-svg/btn-sprig-152.svg'); /* 47.587x27.033 */ --fx-sprig-top: url('assets/figma-svg/hero-bn-sprig-top.svg'); /* 47.168x27.152 */ --fx-sprig-bottom: url('assets/figma-svg/hero-bn-sprig-bottom.svg'); /* 47.469x26.043 */ --fx-crest: url('assets/figma-svg/footer-logo-mask.png'); /* 262x252 crest lockup */ /* palette pulled from the Figma (measured on the 1536x8523 render) */ --page:#f5f4f2; /* the page ground behind every section */ --green:#1c3826; /* footer card tint rgba(28,56,38,.8) */ --green-2:#2f4f3a; --green-deep:#0a1a0f; /* the cream SURFACE, a shade warmer than the page ground: offer cards, band fills and image placeholders (DESIGN-SYSTEM --color-surface) */ /* a pale tint of --sage (roughly 22% sage, 78% white), so it is literally the same hue as the site's greens rather than a new colour sitting beside them */ --sage-pale:#dce5de; /* one step deeper — the tile shown where the library has no photograph, so it still reads as a deliberate fill rather than an empty surface */ --sage-tile:#c8d4ca; /* the expand mark in the middle of a gallery tile on hover — four arrows to the corners, drawn inline so 36 tiles cost no extra request */ --fx-expand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M15 3h6v6M9 21H3v-6M15 21h6v-6'/%3E%3C/svg%3E"); /* the menu overlay's panel — a step LIGHTER than the surface tint, the way its old #f6f1e6 sat above the beige, so the panel still lifts off the photograph beside it */ --sage-panel:#edf2ee; /* THE surface tint, behind every widget: band fills, card grounds and the placeholder under each photograph. It was a warm beige (#ece3da), which put a second, warmer colour family next to the site's greens. It is the pale sage above now — the BOOK NOW medallion's own face — so every widget ground belongs to one family. The old name stays as an alias so all fifteen call sites keep working and there is still one place to change it. */ --cream:var(--sage-pale); --footer-green:#284d3d; /* sampled off assets/footer.png below the grass */ --ink:#4e4e4e; --ink-2:#414141; --brown:#422e2e; --gold:#e0a92e; /* The solid bar's own height, DERIVED rather than guessed: the nav's 4px top and bottom padding plus the crest, which is clamp(60,5.208vw,80) wide on a 106:102 aspect. A hand-tuned figure drifted ~8px taller than the bar once the scrolled nav got shorter, leaving a strip of page ground showing between the bar and the first element on every inner page. */ --header-solid-h:calc(8px + clamp(60px,5.208vw,80px) * 102 / 106); /* The sibling rail (room types, dining outlets, offers) is position:fixed, so it takes NO space in flow. Its height is pinned here — 18px padding top and bottom, a 21px line box, and the 1px bottom border — so the breadcrumb below it can offset by exactly the rail and nothing drifts. */ --rail-h:calc(18px + 21px + 18px + 1px); /* The standard space above a breadcrumb, the same on every page. 48 left the trail floating well clear of the chrome above it; --sp-md sits it close under the bar (or under the rail, which adds --rail-h on top). */ --crumb-pad:var(--sp-md); --maxw:1536px; /* the site's left/right gutter. Was being referenced as a token by .crumb, .page-head, .rm-nav-inner and .rm-switch but never actually defined, so they were all silently falling through to their 24px fallback. It is now fluid instead of a flat 24px. The comp is drawn at 1536, where the 1216 track centred in the frame leaves 184px from the viewport edge to the first pixel of copy. Below that the track stopped shrinking and the gutter fell off a cliff to 24px, so anything between roughly 1100 and 1500 read as edge-to-edge and unresponsive. The line below interpolates the gutter from its full 184px at 1536 down to the original 24px at 768, smoothly and with no breakpoint step, and clamps flat outside that range — so wide screens and phones render byte-identical to before and only the broken middle changes. */ --padding-inline:clamp(24px,calc(20.83vw - 136px),184px); /* the content track itself is unchanged at 1168px; --content is the track plus its two gutters, which is what every block caps its width at. */ --content-track:1168px; --content:calc(var(--content-track) + 2 * var(--padding-inline)); /* ========================================================= SPACING SYSTEM --------------------------------------------------------- One 8px-based scale, then a role token for every vertical relationship on the page. Sections must use the ROLE token, never a raw number, so the same relationship measures the same everywhere — heading to copy in the intro is the same as heading to copy in a card, in the footer, on a slide. ========================================================= */ --sp-xs:8px; --sp-sm:16px; --sp-md:24px; --sp-lg:32px; --sp-xl:56px; /* section-to-section rhythm — the design-system standard. Equal top and bottom on every standalone band. Full-bleed bands (hero, forest, offers) are compositions with their own internal spacing and are exempt. NB: this is the HALF value — one band's bottom plus the next band's top, so the gap BETWEEN two sections comes to 100px in total. */ --spacing-section:50px; --spacing-section-full:calc(var(--spacing-section) * 2); /* 100 — one whole gap */ --spacing-section-mobile:30px; /* Body copy: 16px on the 1536 canvas (16 / 1536 * 100 = 1.0417vw), scaling down to a 14px floor on small screens. Line-height 1.75 keeps the 28px line box the page already runs on. Every section paragraph uses this — the page previously had two competing paragraph sizes (17.4 and 13.8). */ --font-size-body:clamp(14px,1.0417vw,16px); --line-height-body:1.75; /* how far every floating control sits in from the window edge — the BOOK NOW medallion and the back-to-top button share it, so they stack on one line */ --edge-rail:clamp(16px,1.8vw,28px); --gap-head-para:var(--sp-lg); /* any heading -> its paragraph */ --gap-para-para:var(--sp-md); /* paragraph -> paragraph */ --gap-para-cta:40px; /* copy -> button or link */ --gap-cta-block:var(--sp-xl); /* button -> the next widget */ --gap-block:48px; /* a copy block -> the widget below it */ --gap-card:30px; /* card <-> card, in every track/grid */ --gap-card-in:var(--sp-sm); /* the steps inside a card */ /* the inset from a BOOK NOW dome seam down to the heading of the band that follows it — used by .roomcards and .rooms so the two match exactly */ --gap-seam:80px; } /* one switch drops every band to the mobile rhythm — sections read the token, so nothing needs a per-section media rule. NB this block must sit AFTER :root closes. It was previously opened midway through :root, which stranded every --gap-* token inside the media query and left them undefined at all widths — so every `margin-top:var(--gap-*)` collapsed to 0 and all the vertical rhythm on the page disappeared. */ @media (max-width:768px){ :root{ --spacing-section:var(--spacing-section-mobile); --gap-head-para:var(--sp-md); --gap-para-para:var(--sp-sm); --gap-para-cta:28px; --gap-block:32px; --gap-card:20px; } } *{margin:0;padding:0;box-sizing:border-box;} /* overflow-x on HTML as well as body: the full-bleed tracks and the cream bleed calcs push a few px past the viewport, and without this the document ends up wider than the window — which is what leaves a strip of ground down the right-hand edge of every band. */ /* scroll-padding-top clears the fixed .header: without it every in-page anchor (index.html#dining and the rest of the nav) lands with its heading tucked behind the bar */ html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:clamp(84px,7vw,112px);} body{ font-family:'Jost',sans-serif; color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} /* Skip to main content — the first focusable thing in the body, so a keyboard or screen-reader user can jump the nav and the breadcrumb on every page. It is off-canvas rather than display:none, because a hidden element cannot take focus and the link would never be reachable. It lands on
. */ .skip-link{position:absolute;top:0;left:0;z-index:1000; transform:translateY(-140%); background:var(--green,#164130);color:#fff; padding:12px 20px;border-radius:0 0 4px 0; font-family:'Jost',sans-serif;font-size:15px;line-height:1; text-decoration:underline;text-underline-offset:3px; transition:transform .18s ease;} .skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:-6px;} @media (prefers-reduced-motion:reduce){.skip-link{transition:none;}} /*
is a plain wrapper: it must not introduce a box of its own, or every full-bleed band inside it would be boxed in. */ main{display:block;} /* the jump target should not sit under the fixed bar once focus moves to it */ #main{scroll-margin-top:var(--bar-h,96px);} /* Headings inherit the UA's font-weight:bold, and the loaded Roboto Serif only carries 300/400/500 — so the browser was SYNTHESISING a 700, which is what made every header look thick and smeared. Figma draws them all as Roboto_Serif:Regular, so pin the weight and let the variable font run at a display optical size (opsz 144) for the fine, high-contrast serifs the design has. GRAD/wdth are declared in the Figma nodes too. */ h1,h2,h3,h4,h5,h6{font-weight:400;} .serif,.eyebrow-h,h1,h2,h3,h4,h5,h6{ font-family:'Roboto Serif',serif; font-optical-sizing:auto; font-variation-settings:'opsz' 144,'GRAD' 0,'wdth' 100;} .wrap{max-width:var(--maxw);margin:0 auto;} .container{max-width:var(--content);margin:0 auto;padding:0 var(--padding-inline);} /* photo helper: fill + cover; fallback colour supplied per slot */ .photo{background-position:center;background-size:cover;background-repeat:no-repeat;} /* ---------- heading + twin-dove ornament ---------- Measured on the 1536 Figma canvas, at three different heading sizes: intro (48px) ornament x920..957, y1089..1113 · cap line y1115 rooms (42px) ornament x897..934, y1559..1583 · cap line y1584 arch (32px) ornament x847..884, y2855..2879 · cap line y2883 i.e. the doves are a FIXED 38x25 graphic (they do not scale with the type), they sit on the cap line, and the big dove's tail laps ~6px over the last letter. Riding the baseline + `bottom:.71em` (Roboto Serif's cap height) lands the ornament's foot on the cap line at any font size, and because the offset is `position:relative` it never disturbs the line box. */ /* 1.05 was tuned for single-line headings and leaves no leading at all: on a heading that wraps ("Meetings & / Events") the second line crowds the first and the lifted birds ornament has nowhere to sit. 1.2 gives both room. */ .eyebrow-h{font-family:'Roboto Serif',serif;text-transform:none;line-height:1.2;} /* The GIF carries ~94px of empty canvas down its left edge — 9.6% of the 978px frame — and the birds drift further right still as the loop plays, so the ornament read as floating away from the word. The negative margin pulls the frame back over the gap it was leaving; the lap over the last letter the note above describes is the intended look, so a little overlap is right. The colour: brightness(0) flattens every opaque pixel to black and keeps the alpha, then invert(.306) lifts it to exactly rgb(78,78,78) — #4e4e4e, the same ink the headings are set in. */ /* The ornament is a flourish beside the heading, not part of the word. It was 1.6em wide on a NEGATIVE left margin, which pulled it into the last letter — on "Gallery" it landed on the y's descender and read as a smudge. Smaller, with real space before it, and lifted less so it clears the cap height without climbing into the line above on a heading that wraps. */ /* keeps a heading’s last word and its bird ornament on one line, so the birds never drop to a line of their own when the column is narrow */ .nb{white-space:nowrap;} .birds{display:inline-block;vertical-align:baseline;position:relative;bottom:.30em; width:1.1em;aspect-ratio:978/489;margin-left:.2em; background:url('assets/Untitleddesign-ezgif.com-crop(2).gif') no-repeat center/contain; filter:brightness(0) invert(.306);} /* On the two bands whose heading is set in white over a photograph — the forest band and the offers slides — the ornament goes white with it. Same recipe, inverted the whole way instead of stopping at #4e4e4e. */ .rooms-head .birds,.offer-inner .birds{filter:brightness(0) invert(1);} /* ---------- exact bell button (Explore / Book NOW) — SVGs from Figma ---------- */ .flourish-btn{ /* Exact Figma paths (node 1:4713/1:4714): outline 153x69.5 stroked #53735E, filled dome 126x70 in #53735E, label white with a 37px rule under it. 126/153 = 82.35% and the dome is flush with the outline's base. */ position:relative;display:inline-flex;align-items:center;justify-content:center; /* Centring the label in the 153x70 BOX is not the same as centring it in the dome: a dome carries its mass low, so a box-centred label reads high and crowds the crown and the sprig. Measured off the reference, the label's centre sits at 63% of the dome's height. Box centre is 50%, so the label needs +9px: align-items:center with an 18px top-over-bottom padding bias moves the content centre by half that difference, landing it at 22 + (70-26)/2 = 44px = 63%. Seating it off the BASE instead (flex-end + 10px) put a one-line label at 73% — too close to the ground — and pushed a two-line label UP into the sprig. The bias fixes both: one line lands at 63%, two lines now start 2px lower than before, further clear of the crown. */ min-width:153px;min-height:70px;padding:22px 26px 4px; /* 16px on .06em tracking: the reference sets the label at roughly 60% of the dome's width, and 14px on .02em left it reading small and tight inside the green. Both the one-word EXPLORE and the two-line CONTACT / US still clear the 153x70 box at this size. */ /* 300, and deliberately NOT the 400 the medallion carries. Measured: at matched scale both specs paint an identical 14px stem, so on paper 400 here "matches" BOOK NOW. It does not look like it. This label is white on dark green; BOOK NOW is dark green on pale sage. Reversed-out type always reads heavier than the same weight set dark-on-light, so at 400 the domes came out visibly chunkier than the medallion they were supposed to match. Dropping the reversed labels one step is the standard correction: they measure lighter and therefore LOOK the same. The rule across the site: dark-on-light CTA labels sit at 400 (.link-leaf, .rc-explore, the medallion); reversed-out ones sit at 300. */ /* Size and weight are taken from the BOOK NOW artwork, which is the site's reference button. That SVG is 135px wide and draws its label with a cap height of 10.178px. Roboto Serif's cap height is .71 of the font size, so 10.178 / .71 = 14.34px reproduces it exactly; the dome was at 16px, a 12px cap, which is why every dome label read a size larger than BOOK NOW. Weight is 300 here and 400 on .light below, and that difference is what makes them MATCH rather than what breaks the match. This label is white on dark green; BOOK NOW is dark green on white. Reversed-out type always reads heavier than the same weight set dark on light, so setting both to a flat 400 leaves the green domes looking visibly bolder than the artwork they are supposed to copy — which is exactly what happens if you try it. Dropping the reversed labels one step is the standard correction: they measure lighter and therefore look the same. Every dark-on-light label on the site (.light, both medallions) sits at 400 with the artwork. */ font-family:'Roboto Serif',serif;font-weight:300;font-size:14.34px;letter-spacing:.06em;line-height:1.14; text-transform:uppercase;text-align:center;cursor:pointer;border:0;background:transparent; color:#fff!important; /* THE BASE LINE, as a third layer. The outline SVG's own path closes with an H segment along y=69.5, but the button paints that artwork at `100% 99.3%` from `center bottom`, which lands the half-pixel of stroke below the box and clips it away — every dome on the site was an open arc with nothing joining its two feet. A 1px gradient strip pinned to the bottom draws it reliably at any size, costs no layout (a border-bottom would eat 1px of the dome's own height), and takes --btn-line so each variant can set it to its own stroke colour. */ --btn-line:#53735e; background-image:var(--fx-btn-dome),var(--fx-btn-outline), linear-gradient(var(--btn-line),var(--btn-line)); background-repeat:no-repeat,no-repeat,no-repeat; background-position:center bottom,center bottom,center bottom; background-size:82.35% 100%,100% 99.3%,100% 1px; /* --btn-tx keeps a variant's centring translate (.arch-explore) out of the way of the hover, so every dome shares ONE transform and no variant has to re-declare it — re-declaring is what used to drop the hover on the arch. */ --btn-tx:0px;--btn-ty:0px;--btn-scale:1; transform:translate(var(--btn-tx),var(--btn-ty)) scale(var(--btn-scale)); /* grows up off its own base, exactly as the white .btn-book / .btn-svg do */ transform-origin:bottom center; transition:transform .34s cubic-bezier(.2,.7,.3,1); } /* The leaf sprig is NOT dropped in upright — Figma rotates and flips it so it straddles the dome's right shoulder (node 1:4717 / 1:4801): leaf 47.587 x 27.033, transform rotate(50.08deg) skewX(8.26deg) scaleY(-.99) The node gives the ROTATED bounding box (48.581 x 56.668) with the leaf centred inside it, so the untransformed leaf's top-left lands at 89.69,9.63 on the 153x70 button. Expressed as % so it holds at both button sizes (the 134x61 booking dome works out to the same figures within 0.3%). */ .flourish-btn::after{content:"";position:absolute; left:58.7%;top:13.7%;width:31.1%;height:38.7%; background:var(--fx-btn-sprig) no-repeat center/100% 100%; transform-origin:50% 50%; transform:rotate(50.08deg) skewX(8.26deg) scaleY(-.99); pointer-events:none;} .flourish-btn .leaf-spray,.flourish-btn .arrow{display:none;} /* the label carries no rule beneath it — the dome is the button, the underline only made it read as a link sitting inside one */ .flourish-btn.explore,.flourish-btn{text-decoration:none;} /* white dome — booking bar, offers slider: same two paths flipped to a white fill with the Figma's #2F4F3A label. The fill is pulled in from the outline so the photograph shows between the two and the arc reads as its own line, the way the cream ground separates them on the green button. */ /* Geometry is the SAME as the green dome — only the artwork and the label colour change. It used to pull the fill in to 72% x 88%, which on a short two-line label looked fine but left a long one like KNOW MORE with 5px of slack inside a 121px fill, so the words ran out over the curve at both ends. At 82.35% the fill is 138px against a 116px label, the same 22px of air the green dome gives that word. The outline still sits at 100%, so the photograph shows between fill and arc exactly as the cream ground does on the green button. */ .flourish-btn.light{ /* the base line goes white with the rest of the artwork */ --btn-line:#fff; background-image:var(--fx-btn-dome-w),var(--fx-btn-outline-w), linear-gradient(var(--btn-line),var(--btn-line)); background-size:82.35% 100%,100% 99.3%,100% 1px; color:#2f4f3a!important; /* dark-on-light, exactly like the BOOK NOW artwork, so it takes the artwork's 400 rather than the reversed-out 300 the green domes need */ font-weight:400;} /* --- hollow dome: the same button, drawn as its own outline --- For a pairing where one CTA leads and the other follows (the Spa Menu beside Contact Us): identical geometry, label spec, sprig and hover growth to the filled dome — only the green fill is held back until the pointer arrives, so the secondary action reads as a line drawing of the primary rather than as a second button competing with it. The fill is a ::before rather than the second background layer the filled dome uses, because a background-image cannot be faded — swapping the layer in on :hover would snap. z-index:-1 puts it above this element's own background (the outline) and below the label; that ordering only holds if the button forms a stacking context, hence isolation:isolate. Without it the fill would drop behind the outline and, on a tinted band, behind the band itself. ::after is already the sprig, so ::before is the free one. */ .flourish-btn.hollow{ isolation:isolate; /* TWO contours at rest, not one. The filled dome shows two edges — its fill boundary at 82.35% and the outline at 100% — so a hollow version drawn with only the outer arc read as a different shape rather than the same button unfilled. Four layers: the inner dome stroked, the outer outline, and a base line for each (the SVG paths' own base strokes are clipped by the bottom-pinned scaling, exactly as on the filled dome). */ background-image:var(--fx-btn-dome-o),var(--fx-btn-outline), linear-gradient(var(--btn-line),var(--btn-line)), linear-gradient(var(--btn-line),var(--btn-line)); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position:center bottom,center bottom,center bottom,center bottom; background-size:82.35% 100%,100% 99.3%,82.35% 1px,100% 1px; /* the outline's own stroke colour: unhovered, the label and the arc are one drawing in a single green rather than two weights of it */ color:var(--sage)!important; /* dark-on-light until it fills, so it takes the artwork's 400 exactly as .light does; the reversed-out correction only applies once it is white */ font-weight:400; transition:transform .34s cubic-bezier(.2,.7,.3,1),color .3s ease;} .flourish-btn.hollow::before{ content:"";position:absolute;z-index:-1; /* same 82.35% x 100%, seated on the same base, as the filled dome's layer */ left:50%;bottom:0;transform:translateX(-50%);width:82.35%;height:100%; background:var(--fx-btn-dome) no-repeat center bottom/100% 100%; opacity:0;transition:opacity .3s ease;pointer-events:none;} .flourish-btn.hollow:hover::before, .flourish-btn.hollow:focus-visible::before{opacity:1;} /* .flourish-btn sets colour with !important, so the filled state has to answer in kind — and at a higher specificity than the resting rule above */ .flourish-btn.hollow:hover, .flourish-btn.hollow:focus-visible{color:#fff!important;} /* --- hover: ONE effect for every dome, green and white alike — the whole medallion grows off its base, the same scale(1.07) the white .btn-book and .btn-svg use, so no button on the site behaves differently from another. The dome, its outline and the sprig scale together as one object rather than each animating separately. Keyboard focus gets the same treatment. --- */ .flourish-btn:hover,.flourish-btn:focus-visible{--btn-scale:1.07;} .flourish-btn:active{--btn-scale:1.02;} .flourish-btn:focus-visible{outline:1px solid currentColor;outline-offset:6px;} /* ========================================================= HEADER + HERO ========================================================= */ /* Figma Rectangle 3948 is 1536x765 (49.8vw) and carries the hero photo — the node exports with no fill, so Figma renders it as a flat black plate; the extracted hero.jpg is layered back in here over that same black ground. */ /* full screen at every resolution. svh is the "small viewport height" — on mobile it excludes the collapsing browser toolbar, so the booking row is not pushed under the address bar. Browsers without svh fall back to the vh line. */ /* The background-image is kept deliberately: it is the ground the video sits on, so it covers the moment before the first frame decodes and stands in whenever the film cannot play at all. */ .hero{position:relative;min-height:100vh;min-height:100svh; background-color:#000;background-image:var(--img-hero); background-position:center;background-size:cover; color:#fff;display:flex;flex-direction:column;} /* Behind everything in the hero — the booking bar sits at z-index 4 and the header is fixed at 40, so both keep clear of it. object-fit:cover makes the film behave exactly like the background-image it replaces at every ratio. */ .hero-video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center; z-index:0;border:0;pointer-events:none;} @media (prefers-reduced-motion:reduce){ /* the poster frame is not enough — a visitor who asks for no motion gets the still hero, which the .hero background above is already painting */ .hero-video{display:none;} } /* The crest is a white line-drawing, not solid type, so it is the first thing to vanish when the film pans onto the bright sky — the nav links survive there, it does not. A soft wash anchored to the corner sits under it and falls away in every direction, so it reads as the video darkening into the corner rather than as a panel behind the logo. Above the video (0), below the booking bar (4) and the fixed header (40), so it never touches the nav's own layer. */ .hero::before{content:"";position:absolute;left:0;right:0;top:0; height:clamp(190px,22vh,300px);z-index:1;pointer-events:none; background: /* extra weight in the corner — the crest is line-art and goes first */ radial-gradient(120% 130% at 0 0,rgba(0,0,0,.46),rgba(0,0,0,0) 62%), /* and a light fall across the strip the nav links sit in */ linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,.16) 50%,rgba(0,0,0,0));} /* A scrim alone cannot carry this. To lift white 13px caps clear of that sky would take about 80% black across the top — a solid bar, which is not the design. So the wash stays light and the marks carry their own shadow: it costs nothing on the dark frames and holds the letterforms on the bright ones. Scoped to the hero's own header, and dropped the moment the bar goes solid. */ .hero .header:not(.is-stuck) .nav-logo:not(.gold){ filter:brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0,0,0,.62));} .hero .header:not(.is-stuck) .nav-links a{ text-shadow:0 1px 3px rgba(0,0,0,.58),0 0 14px rgba(0,0,0,.34);} .hero .header:not(.is-stuck) .hamburger span{ box-shadow:0 1px 3px rgba(0,0,0,.55);} /* FIXED, not sticky-in-flow: the bar is lifted out of the document so turning it on cannot add height to the hero or shift a single section below it. */ .header{position:fixed;top:0;left:0;right:0;z-index:40; background:transparent; transition:background .34s ease,box-shadow .34s ease;} /* design: crest x85..190 y6..107, links 770..1370 on ~50px gaps, burger x1428 */ .nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:6px clamp(20px,5.469vw,84px) 6px clamp(20px,5.534vw,85px); transition:padding .34s cubic-bezier(.2,.7,.3,1);} .nav-logo{width:clamp(74px,6.901vw,106px);aspect-ratio:106/102;height:auto;flex:none;display:block; filter:brightness(0) invert(1); transition:width .34s cubic-bezier(.2,.7,.3,1);} /* the gold crest only shows in the scrolled state */ .nav-logo.gold{filter:none;} /* ---------- inner pages with NO banner ---------- There is no photograph for the bar to sit over, so it wears its solid state from the first pixel — same green, same gold crest, same reduced height as the scrolled bar — and the page starts below it rather than behind it. (site.js leaves .is-stuck alone on these pages.) */ .no-banner{padding-top:var(--header-solid-h);} /* ONE definition of the solid bar, shared by the scrolled homepage header and the always-solid inner-page header. These were two identical blocks that had to be kept in lockstep by hand. */ .no-banner .header, .header.is-stuck{background:var(--footer-green); box-shadow:0 2px 18px rgba(20,40,28,.22);} .no-banner .nav, .header.is-stuck .nav{padding-top:4px;padding-bottom:4px;} .no-banner .nav-logo, .header.is-stuck .nav-logo{width:clamp(60px,5.208vw,80px);} .no-banner .nav-logo:not(.gold), .header.is-stuck .nav-logo:not(.gold){opacity:0;} .no-banner .nav-logo.gold, .header.is-stuck .nav-logo.gold{opacity:1;} .nav-links{margin-left:auto;margin-right:clamp(22px,3.776vw,58px); display:flex;align-items:center;gap:clamp(16px,3.255vw,50px);flex-wrap:wrap;} .nav-links a{position:relative;font-size:clamp(12px,.911vw,14px);letter-spacing:.05em; text-transform:uppercase;white-space:nowrap;} /* a hairline wipes in from the left rather than the link just dimming */ .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left center; transition:transform .34s cubic-bezier(.2,.7,.3,1);} .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);} /* the page you are on keeps that hairline drawn */ .nav-links a.is-current::after{transform:scaleX(1);} .nav-right{display:flex;align-items:center;gap:18px;} .hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;} .hamburger span{width:26px;height:2px;background:#fff;display:block; transition:transform .3s cubic-bezier(.2,.7,.3,1),width .3s cubic-bezier(.2,.7,.3,1);} .hamburger:hover span:nth-child(1),.hamburger:focus-visible span:nth-child(1){transform:translateY(-2px);} .hamburger:hover span:nth-child(2),.hamburger:focus-visible span:nth-child(2){width:17px;} .hamburger:hover span:nth-child(3),.hamburger:focus-visible span:nth-child(3){transform:translateY(2px);} /* ========================================================= FULL-SCREEN MENU — opens right to left ========================================================= The photograph holds the left half, the cream panel the right. The panel travels in from beyond the right edge and the photo eases in behind it, so the whole overlay reads as opening from the right. */ .nav-overlay{position:fixed;inset:0;z-index:70;display:grid; grid-template-columns:1fr 1fr; visibility:hidden;pointer-events:none;} .nav-overlay.is-open{visibility:visible;pointer-events:auto;} /* The photo half is a STACK of layers, one per menu item. Hovering a link raises its layer: the incoming picture crossfades up while drifting in from a slight offset and settling out of a small zoom, so the change reads as a move rather than a blink. Only one layer is ever at opacity 1. */ .nav-overlay-photo{position:relative;overflow:hidden;background:#2a2c22; opacity:0;transform:scale(1.06); transition:opacity .7s ease .1s,transform 1.1s cubic-bezier(.16,1,.3,1) .1s;} .nav-overlay.is-open .nav-overlay-photo{opacity:1;transform:none;} .nav-photo-layer{position:absolute;inset:0; background-position:center;background-size:cover;background-repeat:no-repeat; opacity:0;transform:scale(1.14) translateX(2.5%); transition:opacity .62s ease,transform 1.25s cubic-bezier(.16,1,.3,1); will-change:opacity,transform;} /* the layer RESTS at 1.06, not 1: several of the library JPGs carry a thin white frame baked into the file, and at plain cover that frame shows as a band across the top and bottom of the photo half. Six per cent crops it off. The incoming layer still drifts down from a further 8% (1.14), so the settle is the same move it always was. */ .nav-photo-layer.is-active{opacity:1;transform:scale(1.06);} /* Spa is the one item with no photograph in the CDN library, so its layer takes the site's missing-picture tile (declared with .fac-media.is-solid) rather than a borrowed room. It used to be a flat green panel with nothing on it, which was the one place a missing picture did not carry the leaf. */ /* The panel SCROLLS: the list runs to eleven items and at a short viewport the last of them used to be cut off by the panel's own edge with no way to reach it. justify-content is flex-start with the list taking margin-block:auto — that still centres a list which fits, but a list which does not now starts at the top and scrolls, where centring would have clipped both ends. */ .nav-overlay-panel{position:relative;background:var(--sage-panel); display:flex;flex-direction:column;align-items:center;justify-content:flex-start; padding:clamp(40px,5vw,72px) clamp(24px,3vw,48px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:rgba(47,79,58,.34) transparent; transform:translateX(100%); transition:transform .66s cubic-bezier(.16,1,.3,1);} /* a slim rail in the panel's own green rather than the browser's grey slab */ .nav-overlay-panel::-webkit-scrollbar{width:6px;} .nav-overlay-panel::-webkit-scrollbar-track{background:transparent;} .nav-overlay-panel::-webkit-scrollbar-thumb{background:rgba(47,79,58,.3);border-radius:3px;} .nav-overlay-panel::-webkit-scrollbar-thumb:hover{background:rgba(47,79,58,.5);} /* the close button scrolls with the panel unless it is pinned to the panel itself — it sits at the top right of the FIRST screenful either way */ .nav-overlay-panel > .nav-close{position:sticky;align-self:flex-end; top:0;margin-right:calc(clamp(20px,2.3vw,36px) - clamp(24px,3vw,48px));z-index:2;} .nav-overlay.is-open .nav-overlay-panel{transform:none;} .nav-close{position:absolute;top:clamp(20px,2.3vw,36px);right:clamp(20px,2.3vw,36px); width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:0;background:none;cursor:pointer;color:var(--green-2); transition:transform .34s cubic-bezier(.2,.7,.3,1);} .nav-close svg{width:22px;height:22px;display:block;} .nav-close:hover,.nav-close:focus-visible{transform:rotate(90deg);} /* margin-block:auto is what keeps a short list optically centred now that the panel is a scroller (see .nav-overlay-panel above) */ .nav-overlay-links{display:flex;flex-direction:column;align-items:center; gap:clamp(12px,1.5vw,22px);margin-block:auto;} /* The list carries eleven items now that the top bar's own links live here too, so the type is a step down from the 32px it was set at when there were five — at that size the menu ran past the fold on a laptop. */ .nav-overlay-links a{position:relative;font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(17px,1.56vw,24px);letter-spacing:.06em;text-transform:uppercase; color:var(--green-2); /* each link arrives just after the panel, one after the next */ opacity:0;transform:translateX(26px); transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),color .3s ease;} .nav-overlay.is-open .nav-overlay-links a{opacity:1;transform:none; transition-delay:calc(.3s + var(--i) * .055s);} .nav-overlay-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right center; transition:transform .38s cubic-bezier(.2,.7,.3,1);} .nav-overlay-links a:hover::after,.nav-overlay-links a:focus-visible::after{ transform:scaleX(1);transform-origin:left center;} /* the page you are on keeps that hairline drawn, the same way the top bar's .nav-links a.is-current does. Drawn from the left, not the right the resting state collapses to — a permanent mark should read as a rule under the word, not as the tail of a wipe that never finished. */ .nav-overlay-links a.is-current::after{transform:scaleX(1);transform-origin:left center;} /* the hovered item steps forward; the rest of the list recedes, so the eye follows whichever picture is showing */ /* The list used to dim EVERY item while the cursor was anywhere over it, so hovering one link faded the other ten. It read as the menu greying out rather than as one item being picked. The hovered item now changes on its own and the rest are left alone. */ .nav-overlay-links a:hover,.nav-overlay-links a:focus-visible{color:var(--green-2);} .nav-overlay.is-open .nav-overlay-links a:hover, .nav-overlay.is-open .nav-overlay-links a:focus-visible{transform:translateX(-6px);} /* the page behind must not scroll while the menu is open */ body.nav-open{overflow:hidden;} /* floating circular BOOK NOW on the hero — rebuilt from Figma node 1:5237: Ellipse 3 = 104px white-stroked ring at x1350.43 Group 1000003357 = 100px disc filled #1E3626, offset +6px Ellipse 2 = 98px disc filled #fff, same offset (so 2px of green shows through on the lower-right and the white ring stands 6px clear on the left) label = Roboto Serif Light 16/16 in #2F4F3A, two leaf sprigs top-R / bottom-L */ /* fixed, not absolute: the medallion floats with the viewport so it stays reachable the whole way down the page. z-index sits under the menu overlay (70) but over every band. */ /* Right edge matches the back-to-top button's, so the two floating controls line up on one rail. The medallion's disc ends 106px into a 110px box, so the offset backs off by that 4px — it is the CIRCLE that has to align, not the box around it. The upper sprig still overhangs, as it does on the hero. */ /* 10px off the width, and everything else follows. The medallion is fifteen hard-coded measurements deep — ring, disc, face, label, two rotated sprigs — so it is scaled as a whole rather than by editing each one, which keeps the 110:104 proportions exact. 100/110 = .909. The origin is the box's right edge, so it shrinks inward and stays on the rail set above. */ .hero-booknow{--bn-s:.909; position:fixed;z-index:55; right:calc(var(--edge-rail) - 4px);top:clamp(96px,21.55vw,331px); width:110px;height:104px;display:block; transform:scale(var(--bn-s));transform-origin:100% 50%;} /* the outer circle was white, which vanished on every page but the hero — it carries the label's own green now, so the ring reads on any ground */ .hero-booknow .ring{position:absolute;left:0;top:0;width:104px;height:104px; border:1px solid var(--green-2);border-radius:50%;box-sizing:border-box;} .hero-booknow .disc{position:absolute;left:6px;top:0;width:100px;height:100px; border-radius:50%;background:#1e3626;} /* the face is a pale sage rather than the warm beige it used to be — a tint of the site's own green, so the medallion sits in the palette instead of introducing a second, warmer family alongside it */ .hero-booknow .disc::after{content:"";position:absolute;left:0;top:0;width:98px;height:98px; border-radius:50%;background:var(--sage-pale);} .hero-booknow{transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s ease; /* kept on its own compositor layer at all times. Promoted only for the length of the hover transition, the label swapped antialiasing modes as the layer was created and dropped, and BOOK NOW visibly flickered at both ends. */ will-change:transform,filter;-webkit-backface-visibility:hidden;backface-visibility:hidden;} .hero-booknow .ring,.hero-booknow .disc{transition:transform .4s cubic-bezier(.2,.7,.3,1);} /* the whole medallion swells, and the two sprigs open outward from the ring */ /* the swell composes with the base scale above — a bare scale(1.05) here would undo the resize and make the medallion bigger than it started */ /* 1.07, not 1.05: every other button on the site grows by 1.07 (.flourish-btn through --btn-scale, .btn-book and .btn-svg directly). The medallion was the one CTA swelling by a different amount, which is exactly what the note above the dome hover says must not happen. The sprigs and the drop-shadow stay — those are this button's own character, not the shared effect. */ .hero-booknow:hover,.hero-booknow:focus-visible{ transform:scale(calc(var(--bn-s) * 1.07)); filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));} .hero-booknow:hover .ring,.hero-booknow:focus-visible .ring{transform:translateX(3px);} .hero-booknow:hover::before,.hero-booknow:focus-visible::before{ transform:rotate(62deg) skewX(6.65deg) scaleY(-.99) scale(1.1);} .hero-booknow:hover::after,.hero-booknow:focus-visible::after{ transform:rotate(-121deg) skewX(8.27deg) scaleY(-.99) scale(1.1);} .hero-booknow:active{transform:scale(calc(var(--bn-s) * 1.02));} /* 1.02, matching every other button's press */ /* The label is set to the SAME spec as the .flourish-btn dome's — same family, weight, letter-spacing and line-height — so BOOK NOW and CONTACT US read at one thickness. 15.4px is 14px once the .909 scale above is applied, which is what the dome uses; declaring a flat 14px here would render at 12.7. */ .hero-booknow span{position:absolute;left:6px;top:0;width:98px;height:98px;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center; /* Identical to the .flourish-btn dome label in RENDERED terms: same family, same 400 weight, same .06em tracking, and 15.78px here because the medallion is transform-scaled by .909 above — 15.78 x .909 = 14.34px, the dome's size now that it matches the BOOK NOW artwork. Declaring a flat 14.34px here would render at 13 and read lighter again. */ font-family:'Roboto Serif',serif;font-weight:400; font-size:15.78px;letter-spacing:.06em;line-height:1.14; /* Roboto Serif is a variable font with an OPTICAL SIZE axis, and browsers map it to the USED font-size — which the .909 transform does not affect. So this label was laid out at its own declared size while the dome sits at a smaller one, and larger optical sizes are drawn with thinner strokes. Same weight, same rendered size, still visibly lighter. Pinning opsz to the dome's 14.34 removes the last difference between them. */ font-optical-sizing:none;font-variation-settings:"opsz" 14.34; text-transform:uppercase;color:var(--green-2);text-align:center;} /* The two sprigs hug the OUTSIDE of the ring — upper-right and lower-left — each its own artwork, rotated and flipped (Figma 1:5245 / 1:5254). Same method as the dome sprig: position the untransformed leaf, then transform. top leaf 47.168 x 27.152 rotate(73.58deg) skewX(6.65deg) scaleY(-.99) bottom leaf 47.469 x 26.043 rotate(-109.68deg) skewX(8.27deg) scaleY(-.99) NB order matters: Tailwind composes rotate -> skew -> scale, so the flip is applied LAST, not first. */ .hero-booknow::before,.hero-booknow::after{content:"";position:absolute; background-repeat:no-repeat;background-size:100% 100%; transform-origin:50% 50%;pointer-events:none;z-index:3;} .hero-booknow::before{left:70.88px;top:15.49px;width:47.168px;height:27.152px; background-image:var(--fx-sprig-top); transform:rotate(73.58deg) skewX(6.65deg) scaleY(-.99);} .hero-booknow::after{left:-6.92px;top:56.02px;width:47.469px;height:26.043px; background-image:var(--fx-sprig-bottom); transform:rotate(-109.68deg) skewX(8.27deg) scaleY(-.99);} /* ---------- the paired CTA medallion ---------- Where a page closes on TWO calls to action side by side, the one that leads is drawn whole and the one that follows stays a dome, so the pair reads as primary and secondary instead of as two buttons of equal weight. Four places on the site do this: 404 (Home | Rooms), Spa (Spa Menu | Contact Us) and the two dining outlets (View Menu | Contact Us) — the leading label in each case. Same recipe as the floating .hero-booknow directly above — ring, disc set 6px off it, pale sage face, a sprig opening off each shoulder — but laid out in the flow rather than pinned to the viewport, and at scale 1, so the label can be the dome's flat 16px instead of the .909-compensated 17.6. A BOOK NOW dome is never redrawn this way. The floating medallion is the page's one BOOK NOW, and a second circle carrying the same words would read as a duplicate of it rather than as a hierarchy. The three Book Now domes on the offer pages stand alone anyway, so no pair rule reaches them. */ /* --md-base is the size step (1 on desktop, .82 on a phone, matching the dome's own step); --md-s is the hover swell. They multiply, so the phone rule sets the base without having to restate the hover, the way .hero-booknow composes its --bn-s with 1.07. */ .medallion-btn{--md-ty:0px;--md-s:1;--md-base:1; position:relative;display:inline-block;flex:0 0 auto; width:110px;height:104px;text-decoration:none;cursor:pointer; transform:translateY(var(--md-ty)) scale(calc(var(--md-base) * var(--md-s))); /* grows up off its own base, the same as every dome on the site */ transform-origin:bottom center; transition:transform .34s cubic-bezier(.2,.7,.3,1),filter .4s ease;} .medallion-btn .ring{position:absolute;left:0;top:0;width:104px;height:104px; border:1px solid var(--green-2);border-radius:50%;box-sizing:border-box; transition:transform .4s cubic-bezier(.2,.7,.3,1);} .medallion-btn .disc{position:absolute;left:6px;top:0;width:100px;height:100px; border-radius:50%;background:#1e3626;} .medallion-btn .disc::after{content:"";position:absolute;left:0;top:0; width:98px;height:98px;border-radius:50%;background:var(--sage-pale);} .medallion-btn span{position:absolute;left:6px;top:0;width:98px;height:98px;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center; /* the dome's label spec exactly — see the note on .hero-booknow span for why the optical size has to be pinned as well as the point size. A flat 14.34 here, not the medallion's 15.78, because this variant is not pre-scaled: --md-base is 1, so the declared size is the rendered size. */ font-family:'Roboto Serif',serif;font-weight:400; font-size:14.34px;letter-spacing:.06em;line-height:1.14; font-optical-sizing:none;font-variation-settings:"opsz" 14.34; text-transform:uppercase;color:var(--green-2);text-align:center;} .medallion-btn::before,.medallion-btn::after{content:"";position:absolute; background-repeat:no-repeat;background-size:100% 100%; transform-origin:50% 50%;pointer-events:none;z-index:3;} .medallion-btn::before{left:70.88px;top:15.49px;width:47.168px;height:27.152px; background-image:var(--fx-sprig-top); transform:rotate(73.58deg) skewX(6.65deg) scaleY(-.99);} .medallion-btn::after{left:-6.92px;top:56.02px;width:47.469px;height:26.043px; background-image:var(--fx-sprig-bottom); transform:rotate(-109.68deg) skewX(8.27deg) scaleY(-.99);} /* the 1.07 swell every other button on the site uses, and the sprigs open outward off the ring exactly as the floating medallion's do. The shadow is the cards' own, not the floating medallion's heavy one — that is pitched to carry over a photograph, and these sit on flat cream. */ .medallion-btn:hover,.medallion-btn:focus-visible{--md-s:1.07; filter:drop-shadow(0 12px 22px rgba(70,60,45,.18));} .medallion-btn:hover .ring,.medallion-btn:focus-visible .ring{transform:translateX(3px);} .medallion-btn:hover::before,.medallion-btn:focus-visible::before{ transform:rotate(62deg) skewX(6.65deg) scaleY(-.99) scale(1.1);} .medallion-btn:hover::after,.medallion-btn:focus-visible::after{ transform:rotate(-121deg) skewX(8.27deg) scaleY(-.99) scale(1.1);} .medallion-btn:active{--md-s:1.02;} .medallion-btn:focus-visible{outline:1px solid var(--green-2);outline-offset:6px;} /* booking row — the Figma has NO green panel here: the fields sit straight on the hero. A black sheen rises behind the form, darkest at the bottom edge and fading out to nothing above it, so the white labels stay legible over the photograph. It starts 110px above the row itself for a soft ramp rather than a visible top edge. (This replaces the faint white ramp measured off the Figma render — that was sampled on Figma's black hero placeholder.) */ .booking{position:relative;z-index:4;margin-top:auto;} .booking::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-110px; z-index:0;pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.74) 22%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.22) 74%, rgba(0,0,0,0) 100%);} /* design: fields start x222 / 453 / 681 / 931 with their rules ending at 417 / 647 / 892 / 1142, then the dome column at x1175..1314. "Why Book Direct?" hangs under the promo rule, the "From ... INR/Night" line sits above the dome and "Manage Booking" below it — the row is bottom-aligned on y745. (The comp's figure was 2,677; the live one comes from the engine now, so no number is written into the markup. See .bk-from below.) */ .booking-inner{position:relative;z-index:1; width:71.1vw;max-width:1092px;margin:0 auto;padding:40px 0 20px; display:grid;grid-template-columns:repeat(4,1fr) 9.049vw; gap:0 2.344vw;align-items:end;} /* the 33px margin is the room the sub-link needs under the rule, so the field still bottom-aligns with the dome column's "Manage Booking" */ .bk-field{position:relative;padding-bottom:11px;margin-bottom:33px;} .bk-field::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(255,255,255,.55);} .bk-field .lbl{font-size:clamp(13px,1.042vw,16px);letter-spacing:.08em;text-transform:uppercase;color:#fff;} .bk-field .val{display:flex;align-items:center;gap:10px;margin-top:12px;color:#fff; font-size:clamp(12px,.911vw,14px);white-space:nowrap;} /* the booking-bar icons are the Figma exports themselves (calender_svgrepo.com is drawn at 76% opacity in the design, person + promo at full) */ .bk-field .val img{width:18px;height:18px;flex:none;display:block;} .bk-sub{position:absolute;left:0;top:100%;margin-top:9px;white-space:nowrap; font-size:clamp(11px,.846vw,13px);color:#fff;text-transform:capitalize;} .bk-sub:hover{text-decoration:underline;text-underline-offset:3px;} /* ---------- booking bar: the live controls ---------- The bar was static text in the build. The date, guest and promo controls below are real inputs that inherit the bar's own white type, so the composition (4 underlined fields bottom-aligned with the dome column) is unchanged — only the fields now respond. */ .bk-plain{border:0;background:none;padding:0;margin:0;color:inherit; font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;} .bk-plain:focus-visible{outline:1px solid #fff;outline-offset:3px;} .bk-promo-input{cursor:text;width:100%;min-width:0;} .bk-promo-input::placeholder{color:rgba(255,255,255,.7);opacity:1;} #bk-field-checkin,#bk-field-checkout{cursor:pointer;} /* the native date input supplies only the picker: it sits over the field at zero opacity so the design keeps its own "20 Nov ‘26, Fri" typography */ .bk-date{position:absolute;inset:auto 0 0 0;width:100%;height:100%;top:0; opacity:0;border:0;padding:0;margin:0;cursor:pointer; font:inherit;color:transparent;background:none;} .bk-field .val{position:relative;} .bk-manage{color:inherit;text-decoration:none;} .bk-manage:hover{text-decoration:underline;text-underline-offset:3px;} /* Rooms & Guests popover — cream card on the cream/sage palette, opening upward off its field so it never runs past the bottom of the hero */ .bk-rg-pop{position:absolute;left:0;bottom:calc(100% + 14px);z-index:20; display:none;width:310px;max-width:86vw;padding:18px 18px 14px; background:#fff;border-radius:2px;box-shadow:0 18px 48px rgba(0,0,0,.34); color:var(--ink);font-family:'Jost',sans-serif;white-space:normal; text-align:left;text-transform:none;letter-spacing:0;} .bk-rg-pop.is-open{display:block;} .rg-room + .rg-room{margin-top:14px;padding-top:14px; border-top:1px solid rgba(66,46,46,.18);} .rg-room-head{display:flex;align-items:baseline;justify-content:space-between; font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);} .rg-remove{border:0;background:none;padding:0;cursor:pointer; font-family:inherit;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:rgba(78,78,78,.7);} .rg-remove:hover{color:var(--sage);text-decoration:underline;} .rg-row{display:flex;align-items:center;justify-content:space-between; margin-top:11px;font-size:14px;font-weight:300;} .rg-ctr{display:flex;align-items:center;gap:12px;} .rg-btn{width:26px;height:26px;flex:none;cursor:pointer; border:1px solid var(--sage);background:none;color:var(--sage); font-family:inherit;font-size:15px;line-height:1;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:background-color .24s ease,color .24s ease;} .rg-btn:hover:not(:disabled){background:var(--sage);color:#fff;} .rg-btn:disabled{opacity:.32;cursor:not-allowed;} .rg-num{min-width:16px;text-align:center;font-size:14px;} /* A child's age is a row like any other in this panel: label on the left, control on the right. It used to be a stacked block — one "Age of children" caption over a wrapping row of bare selects — which sat apart from the Adults and Children rows and never said which select belonged to which child. The label stacks its own range hint underneath, the way the steppers' labels do in the reference. */ .rg-row-lbl{display:flex;flex-direction:column;gap:2px;} .rg-row-hint{font-style:normal;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:rgba(78,78,78,.7);} .rg-age{padding:5px 7px;border:1px solid rgba(66,46,46,.3);border-radius:0; background:#fff;color:var(--ink);font-family:inherit;font-size:13px; font-weight:300;cursor:pointer;} /* 92px is the stepper column's own width (26 + 12 + 16 + 12 + 26), so the select and the steppers above it share one right edge and one left edge. */ .rg-agerow .rg-age{width:92px;flex:none;} .rg-age:focus{outline:none;border-color:var(--sage);} .rg-foot{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-top:16px;padding-top:13px; border-top:1px solid rgba(66,46,46,.18);} .rg-addroom{border:0;background:none;padding:0;cursor:pointer; font-family:inherit;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--sage);} .rg-addroom:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px;} .rg-addroom:disabled{opacity:.4;cursor:not-allowed;} .rg-done{cursor:pointer;padding:8px 18px;border:1px solid var(--sage); background:var(--sage);color:#fff;font-family:inherit;font-size:12px; letter-spacing:.1em;text-transform:uppercase; transition:background-color .24s ease,color .24s ease;} .rg-done:hover{background:none;color:var(--sage);} .bk-btncol{display:flex;flex-direction:column;align-items:center;gap:6px; font-size:clamp(11px,.846vw,13px);color:#fff;text-transform:capitalize;text-align:center; white-space:nowrap;} /* The rate is fetched from the booking engine, so this line starts empty and fills a moment later. It is a flex item, therefore blockified, so min-height holds its row from first paint — without it the dome and "Manage Booking" sit high and then drop by a line as the figure lands. */ .bk-from{min-height:1.25em;} /* booking-bar Book Now = the 135x62 white outline + 110.4x61.4 white dome (Figma 1:4798 / 1:4799) with the #2F4F3A label */ /* the white dome sat almost flush inside its white outline, so the arc read as one edge instead of the nested pair the green button shows. Pulling the fill in lets the photograph show between the two, which is what draws the line. */ /* ---------- the supplied button artwork ---------- Each SVG is the whole button: outline, fill, label and leaf. Nothing is composed in CSS any more, and no underline is drawn under the label. */ .btn-book,.btn-svg{display:inline-block;border:0;background:none;padding:0;line-height:0; cursor:pointer;text-decoration:none; transition:transform .34s cubic-bezier(.2,.7,.3,1),filter .34s ease;} .btn-book img,.btn-svg img{width:135px;height:auto;display:block;} /* Centring for the OLD image buttons only. .flourish-btn must keep its inline-flex display — display:block kills the flex box that centres the label inside the dome, and the word drops to the top of the button. The intro dome centres on .intro's own text-align:center, and .arch-explore centres itself with left:50% + translateX(-50%). */ .intro .btn-svg{display:block;margin-left:auto;margin-right:auto;} .btn-book,.btn-svg{transform-origin:bottom center;} .btn-book:hover,.btn-book:focus-visible, .btn-svg:hover,.btn-svg:focus-visible{transform:scale(1.07);} .btn-book:active,.btn-svg:active{transform:scale(1.02);} .btn-book:focus-visible,.btn-svg:focus-visible{outline:1px solid currentColor;outline-offset:6px;} /* Every CTA that follows body copy sits the SAME distance below it. The old .flourish-btn margin rules stopped matching when the buttons became the supplied SVGs, which is why the domes were landing on the last line — .flourish-btn and .link-leaf are back in the list for exactly that reason, so a dome can never sit on top of the paragraph above it again. */ p + .btn-svg,p + .btn-book,p + .cta-link,p + .flourish-btn,p + .link-leaf, p + [data-reveal].btn-svg,p + [data-reveal].btn-book, p + [data-reveal].flourish-btn,p + [data-reveal].link-leaf{margin-top:var(--gap-para-cta);} /* ---------- CTA link: the EXPLORE mark ---------- Hover: the word slides out from under its own leaf. The mark shifts right while a hairline draws in beneath the word only (the leaf overhangs it), so the leaf appears to stay put and the label steps forward out of it. The rule is HALF width at rest, sitting level with the leaf, and runs out to the full width of the word on hover. It stops short of the leaf so the sprig always overhangs the end of the line. */ .cta-link{position:relative;display:inline-block;border:0;background:none;padding:0 0 3px; line-height:0;cursor:pointer; transition:transform .42s cubic-bezier(.2,.7,.3,1);} .cta-link img{width:84px;height:auto;display:block;} .cta-link::after{content:"";position:absolute;left:0;right:26px;bottom:0;height:1px; background:var(--sage);transform:scaleX(.5);transform-origin:left center; transition:transform .42s cubic-bezier(.2,.7,.3,1);} .cta-link:hover,.cta-link:focus-visible{transform:translateX(7px);} .cta-link:hover::after,.cta-link:focus-visible::after{transform:scaleX(1);} /* ---------- .link-leaf: the same mark, with its own word ---------- Identical to .cta-link in weight, colour and motion — the slide plus the hairline sweeping in under the word — but set as text so a card can say "Discover" instead of the artwork's "Explore". The leaf is the button sprig, sized to the cap height and sitting off the last letter. */ .link-leaf{position:relative;display:inline-flex;align-items:center;gap:.42em; padding:0 0 3px;text-decoration:none;cursor:pointer; font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(12px,.977vw,15px);letter-spacing:.02em; text-transform:uppercase;color:var(--sage); transition:transform .42s cubic-bezier(.2,.7,.3,1);} .link-leaf::before{content:"";order:2;flex:none; width:1.55em;aspect-ratio:47.587/27.033; background:var(--fx-btn-sprig) no-repeat center/100% 100%; transform:translateY(-.2em) rotate(-6deg); transition:transform .42s cubic-bezier(.2,.7,.3,1);} /* the rule stops short of the leaf, as it does on the artwork */ .link-leaf::after{content:"";position:absolute;left:0;right:1.9em;bottom:0;height:1px; background:var(--sage);transform:scaleX(.5);transform-origin:left center; transition:transform .42s cubic-bezier(.2,.7,.3,1);} .link-leaf:hover,.link-leaf:focus-visible{transform:translateX(7px);} .link-leaf:hover::after,.link-leaf:focus-visible::after{transform:scaleX(1);} .link-leaf:hover::before{transform:translateY(-.2em) rotate(6deg) scale(1.08);} /* ========================================================= INTRO ========================================================= */ /* design: BOOK NOW ends y1478 and the next heading's cap line is y1584, so the intro's bottom padding + the room band's top padding total ~100px */ /* measured: the intro band is the page ground #F4EEE5 (NOT the cream block) — the cream #ECE4DA only starts at y1478, i.e. at the room-card heading */ /* padding-bottom is 0 on purpose: in the Figma the BOOK NOW dome ends at y1479 and the cream band starts at y1478, so the dome's base sits ON the seam rather than floating above it. */ .intro{position:relative;overflow:hidden;text-align:center;background:var(--page); /* no bottom padding: the design cuts the BOOK NOW dome flush against the cream band below (dome foot y1478, cream starts y1479). The hero above is flush too — its booking bar sits on its own bottom edge — so the intro carries the whole 100 on top. */ padding:var(--spacing-section-full) 0 0;} /* ornate Ranthambhore Bagh Palace wordmark (extracted SVG) */ .wordmark{width:min(500px,72%);max-width:500px;height:auto;margin:0 auto clamp(22px,3vw,36px);display:block;} /* ---- the lockup, rebuilt: drawn crown + live text ---- The crown is the original artwork cropped above the letterforms; the name under it is a real h1, set in the site's display serif at the ink sampled off that artwork. */ /* the crown is a trimmed 780x233 bitmap, so it is shown at well under its own resolution and stays crisp on a 2x screen */ .wm-crown{width:min(300px,46%);max-width:300px;height:auto;display:block; margin:0 auto clamp(4px,.6vw,10px);} .wm-name{margin:0 auto clamp(22px,3vw,36px);text-align:center;color:#304e3c; font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(30px,5.4vw,58px);line-height:1;letter-spacing:.015em; text-transform:uppercase;} /* --- the lockup's own ornaments, matched to the artwork --- BAGH PALACE sits straight under the name with nothing flanking it, and the rule that closes the lockup — a SOLID diamond with a small dot either side — now runs beneath that line rather than above it. */ .wm-sub{display:flex;align-items:center;justify-content:center; margin:clamp(8px,1.2vw,10px) auto 0; font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(12px,1.7vw,19px);letter-spacing:.42em;text-indent:.42em; text-transform:uppercase;} .wm-rule{display:flex;align-items:center;justify-content:center;gap:5px; width:min(74%,380px);margin:clamp(8px,1vw,12px) auto 0;} .wm-rule::before,.wm-rule::after{content:"";flex:1;height:1px;background:rgba(48,78,60,.55);} .wm-dia{flex:none;width:6px;height:6px;background:#304e3c;transform:rotate(45deg);} .wm-dot{flex:none;width:2.5px;height:2.5px;border-radius:50%;background:#304e3c;} @media (max-width:640px){ .wm-crown{width:76%;} .wm-name{font-size:clamp(24px,7.4vw,34px);} } /* leaf wash across the whole band: full-width and anchored top, so the leaves that sit along the left and right edges stay in frame — `cover` would scale up to fill the height and crop them off. */ .intro::before{content:"";position:absolute;inset:0; background-image:var(--ill-about-leaf); background-size:100% 100%;background-position:center;background-repeat:no-repeat; pointer-events:none;z-index:0;} .intro .container{position:relative;z-index:1;} /* decorative watercolor branch accents */ .leaf-accent{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;z-index:0;opacity:.95;} .leaf-accent.b1{top:10px;left:6%;width:clamp(90px,12vw,180px);height:clamp(90px,12vw,180px); background-image:var(--ill-branch-1);transform:scaleX(-1);} .leaf-accent.b2{bottom:24px;right:6%;width:clamp(90px,12vw,180px);height:clamp(90px,12vw,180px); background-image:var(--ill-branch-2);} .intro h2{font-size:clamp(32px,3.125vw,48px);color:var(--ink);} /* the centred leads measure a 12px cap in Jost => 16px on a 28px line, and the block is 832 wide (design line 2 runs 824) */ .intro p{max-width:min(832px,54.2vw);margin:var(--gap-para-para) auto 0; font-size:var(--font-size-body);line-height:var(--line-height-body); /* sentence case, not title case: the lead is a sentence, not a label */ text-transform:none;color:var(--ink);} /* ---- INLINE LINKS IN BODY COPY ---- One rule for every link that sits inside prose. They were inked the same grey as the text with no underline, so they read as plain words: on Contact, the 404 and the sitemap's child links they were effectively invisible. */ .intro p a, .faq-a a, .mvv-card p a, .info-list a, .sitemap a{color:#088d35;text-decoration:underline; text-decoration-color:rgba(83,115,94,.4);text-underline-offset:3px; text-decoration-thickness:1px;transition:text-decoration-color .3s ease,color .3s ease;} .intro p a:hover,.intro p a:focus-visible, .faq-a a:hover,.faq-a a:focus-visible, .mvv-card p a:hover,.mvv-card p a:focus-visible, .info-list a:hover,.info-list a:focus-visible, .sitemap a:hover,.sitemap a:focus-visible{text-decoration-color:var(--sage);color:#1fa34c;} .intro h2+p{margin-top:var(--gap-head-para);} /* the 39px the bottom padding used to carry now rides above the button, so the band keeps its measured height and the dome still lands on the edge */ .intro .flourish-btn{margin-top:var(--gap-para-cta);color:var(--green-2);} /* ========================================================= ROOM CARDS — cream section, heading + 4 room photos ========================================================= */ /* Pixel-scanned off the 1536x8283 design render (Homepage Final deisgn.jpg): cream #ECE3DA band y1479..2087 (608 = 39.583vw) behind the heading, then the page ground · heading cap y1604 · lead 3 lines y1679..1754 · TWO white cards per view, 616 wide with a 63 gutter, x120 and x798, y1799..2472 (673 tall) — the third and fourth are off-canvas, so it is a 2-up carousel driven by the progress rail below · photo 582x380 inset 16 from the card sides and 18 from its top · caption text inset 38 from the card edge (photo inset + 22) · name cap y2230 (26px) · desc y2284 (14/30) · meta row y2371 in THREE columns at 36/218/390 from the card edge · EXPLORE link y2420 · rail line y2525 with a 100px thumb, nav flush to x1412 */ .roomcards{position:relative;overflow:hidden;background:var(--page); /* the seam inset. The intro above ends with padding-bottom:0 so its BOOK NOW dome sits ON this edge; --gap-seam is the single place that distance is set, and the h2 carries no padding of its own (the two used to stack). */ padding:var(--gap-seam) 0 var(--spacing-section);text-align:center;} .roomcards::after{content:"";position:absolute;left:0;right:0;top:0;height:39.583vw; background:var(--cream);pointer-events:none;z-index:0;} .roomcards>*{position:relative;z-index:1;} .roomcards h2{font-size:clamp(28px,2.734vw,42px);color:var(--ink);font-family:'Roboto Serif',serif; text-transform:none; /* no padding-top — .roomcards' own section padding already provides the gap under the dome; carrying it here too stacked 100px + 53px = 153px */ padding-top:0;} .roomcards .lead{max-width:min(832px,54.2vw);margin:var(--gap-head-para) auto 0; font-size:var(--font-size-body);line-height:var(--line-height-body); /* sentence case, not title case: the lead is a sentence, not a label */ text-transform:none;color:var(--ink);} /* the track: 1296 of content (x120..1416) = 84.375vw, 63px gutter. THREE cards to a row — (1296 - 2x63)/3 = 390 — so the band reads in one screen instead of running past the fold. */ .rc-row{display:flex;gap:var(--gap-card);margin:var(--gap-block) auto 0; width:84.375vw;max-width:1296px;} /* the photo sits on an equal 16px inset top / left / right */ .rc-card{flex:0 0 26.823vw;width:26.823vw;max-width:412px;text-align:left; background:#fff;padding:1.042vw 1.042vw 0; display:flex;flex-direction:column;} .rc-card .rc-img{position:relative;aspect-ratio:582/380;background-repeat:no-repeat;} /* the four card photos ship pre-cropped from the Figma fills */ .rc-body{padding:0 1.042vw 1.953vw;flex:1;display:flex;flex-direction:column;} /* The card CTA is the .link-leaf "Discover" mark inside .rm-cta, exactly as the rooms summary page builds it, so it keeps .rm-cta's own padding-top and is NOT given a margin here — overriding it would space the same mark differently on the two pages. .rc-meta above already carries margin-top:auto to pin the block to the card's foot, so the auto on .rm-cta is cancelled to avoid two auto margins splitting the free space between them. */ .rc-body .cta-link{margin-top:var(--sp-md);} .rc-body .rm-cta{margin-top:0;} .rc-card .rc-name{font-family:'Roboto Serif',serif;font-size:clamp(15px,1.367vw,21px);color:var(--ink); text-transform:none;margin-top:var(--gap-card-in); line-height:1.25;min-height:2.5em;} .rc-card .rc-desc{font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink); text-transform:none;margin-top:var(--sp-xs);} /* three even columns inside the narrower card. No text-transform: the unit stays lower-case ("60 m") */ .rc-meta{display:grid;grid-template-columns:repeat(3,1fr);column-gap:.4em;margin-top:auto;padding-top:var(--gap-card-in); /* 14px, up from the old 10-12px scale, with the marks sized to match */ font-size:14px;line-height:2;color:var(--ink);} .rc-meta span{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;} /* the marks are the room pages' own SVGs now, inked through currentColor */ .rc-meta img{width:1.042vw;min-width:13px;max-width:16px;height:auto;aspect-ratio:1;flex:none;display:block;} .rc-ico{width:16px;height:16px;flex:none;display:block;color:var(--sage);} /* EXPLORE is a plain underlined link in this design, not a dome */ .rc-explore{display:inline-block;margin-top:var(--gap-card-in);border:0;background:none;cursor:pointer; font-family:'Roboto Serif',serif;font-weight:400;font-size:clamp(11px,.846vw,13px); letter-spacing:.02em;text-transform:uppercase;color:var(--ink); text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:.5px; transition:color .3s ease,text-decoration-thickness .2s ease;} .rc-explore:hover,.rc-explore:focus-visible{color:var(--green-2);text-decoration-thickness:1px;} /* the rail lines up with the card track, x120..1416 on the design canvas */ .roomcards .slider-rail{width:84.375vw;max-width:1296px;margin-left:auto;margin-right:auto;} /* ========================================================= EXPLORE ACTIVITIES — arch image + floating glass pills ========================================================= */ /* ========================================================= EXPLORE ACTIVITIES — the arch is a fixed-proportion STAGE. Solved by fitting arch-cutout.png (1698x926) to the design: the moss crown pins the vertical (asset 797,221 → design 698,2595) and the leg width at three clean rows (design y2700 w544 · y2760 w682 · y3100 w961) pins the scale at 0.79 → displayed 1341 x 732 at x71, y2420. The dark forest band begins at y3149, so the stage is 1536 x 729 and the arch's feet are cut by its bottom edge, exactly as in the Figma band. Every pill and copy coordinate below is a % of that 1536 x 729 stage. ========================================================= */ /* no top padding: the arch stage already carries open space above the pills, so the section's own 50px stacked on top of it as an empty strip. The gap above still comes from .roomcards' bottom padding. */ .activities{position:relative;padding:0;background:var(--page);} .arch-stage,.activities .container{position:relative;z-index:1;} .arch-stage{width:100%;aspect-ratio:1536/729;overflow:hidden;} .arch-img{position:absolute;left:4.62%;top:0;width:87.3%;height:auto; pointer-events:none;user-select:none;} /* copy centred in the arch opening (design: cap top y2883, para 435px wide) */ .arch-copy{position:absolute;left:50%;top:62.81%;transform:translateX(-50%); width:29%;text-align:center;} .arch-copy h2{font-size:clamp(20px,2.083vw,32px);color:var(--ink);text-transform:none;} .arch-copy p{margin-top:var(--gap-head-para);font-size:var(--font-size-body);line-height:var(--line-height-body); /* sentence case, not title case: the lead is a sentence, not a label */ text-transform:none;color:var(--ink);} /* EXPLORE dome sits flush with the band's bottom edge (design x692..843, y3080..y3149 — outline 152x70, sage fill 125 wide, base cut by the band) */ /* centres through --btn-tx, NOT its own transform: re-declaring transform here replaced the shared one and killed the hover scale on this dome alone */ .arch-explore{position:absolute;left:50%;bottom:0;--btn-tx:-50%;} /* Below the 1536 comp the copy hangs off the dome, not off top:62.81%. The stage shrinks with the width but the heading and lead wrap onto more lines, so from 1025 to ~1440 the lead ran down behind the Know More dome. 79px is the dome's 70px plus the 9px the comp leaves between them at 1536, so the two layouts meet there without a jump. */ @media (min-width:1025px) and (max-width:1535px){ .arch-copy{top:auto;bottom:79px;} } /* floating glass pills — design box 228x57, font 30px, radius 10 */ .pill{position:absolute;display:flex;align-items:center;justify-content:center; min-width:min(9.77vw,150px);padding:min(.52vw,8px) min(.85vw,13px);border-radius:min(.52vw,8px); /* --sage-pale at .72; written as rgba because the chip is translucent over the arch photograph and needs the alpha */ background:rgba(220,229,222,.72);border:1px solid rgba(255,255,255,.81); -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px); box-shadow:0 .26vw .91vw rgba(60,50,35,.10); font-family:'Inter',sans-serif;font-size:clamp(12px,1.172vw,18px);line-height:1.15; color:var(--ink);text-transform:capitalize;white-space:nowrap;} /* measured pill top-left corners on the 1536x729 stage (design y minus 2420): 493,61 · 1161,90 · 803,202 · 139,182 · 1135,309 · 264,388 · 1092,528 · 139,593 */ .p1{left:32.10%;top:8.37%;} .p2{left:75.59%;top:12.35%;} .p3{left:52.28%;top:27.71%;} .p4{left:9.05%; top:24.97%;} .p5{left:73.89%;top:42.39%;} .p6{left:17.19%;top:53.22%;} .p7{left:71.09%;top:72.43%;} .p8{left:9.05%; top:81.34%;} /* mobile fallback list (hidden on desktop) */ .pill-list{display:none;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px;} .pill-list .pill{position:static;font-size:16px;padding:12px 18px;box-shadow:none;} /* ========================================================= ROOMS / GALLERY BAND — dark forest, 5 cards + quote ========================================================= */ /* Design band y3333..4425: centred heading (cap y3444) + a 3-line lead (y3523..3593), then ONE row of five bordered cards bleeding past both viewport edges — card 299x450, gap 46, track x-71..1607 — staggered symmetrically: card 3 highest, 2 and 4 down 29, 1 and 5 down 84. Quote y4225..4320. */ .rooms{position:relative;overflow:hidden;color:#fff; /* 50 on top: the arch above is cut by this band's edge, so this is the band's own inset to its heading, not a gap between two sections */ padding:var(--gap-seam) 0 var(--spacing-section); background-color:var(--green-deep);background-image:var(--img-rooms-bg); background-position:center;background-size:cover;} .rooms::before{content:"";position:absolute;inset:0;background:rgba(6,35,16,.6);} .rooms .container,.room-row,.rooms .slider{position:relative;z-index:1;} .rooms-head{text-align:center;} .rooms-head h2{font-size:clamp(28px,2.734vw,42px);color:#fff;text-transform:none;} .rooms-head p{max-width:min(832px,54.2vw);margin:var(--gap-head-para) auto 0; /* sentence case, not title case: the lead is a sentence, not a label */ font-size:var(--font-size-body);line-height:var(--line-height-body);text-transform:none;color:#fff;} /* the Facilities CTA sits below the slider rail, centred on the band */ .rooms-cta{text-align:center;margin-top:var(--gap-para-cta);} .rooms-cta .flourish-btn{color:#fff;} .room-row{display:flex;align-items:flex-start;gap:var(--gap-card); margin:var(--gap-block) 0 0 -4.6875vw;} .room-card{position:relative;flex:0 0 min(19.466vw,299px);width:min(19.466vw,299px);aspect-ratio:299/320; border:1px solid #fff;overflow:hidden;background-color:#2c3b2a; background-size:cover;background-position:center;} /* 5n+k, not a flat 1..5: the loop clones the five cards once, and the stagger has to repeat across the copy or cards 6..10 would sit flat and the wrap would be visible. Every card is five places from its own clone, so at the wrap the copy stands in exactly the original's position. */ .room-card:nth-child(5n+1){margin-top:min(5.469vw,84px);} .room-card:nth-child(5n+2){margin-top:min(1.888vw,29px);} .room-card:nth-child(5n+3){margin-top:0;} .room-card:nth-child(5n+4){margin-top:min(1.888vw,29px);} .room-card:nth-child(5n+5){margin-top:min(5.469vw,84px);} .room-card::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 18%,rgba(0,0,0,.3) 39%,rgba(0,0,0,0) 57%);} /* the label is boxed in on both sides so a two-word title wraps inside the card instead of running into its edge */ .room-card .rlabel{position:absolute;left:min(1.302vw,20px);right:min(1.302vw,20px); bottom:min(1.823vw,28px);z-index:2; font-family:'Roboto Serif',serif;font-weight:400;font-size:clamp(14px,1.302vw,20px); line-height:1.3;letter-spacing:.02em;text-transform:none;} /* the experiences rail sits on the dark band, so it inverts */ .rooms .slider-rail{width:84.375vw;max-width:1296px;margin-left:auto;margin-right:auto;} .rooms .rail{background:rgba(255,255,255,.3);} .rooms .rail-thumb{background:#fff;} .rooms .rail-count,.rooms .rail-arrow{color:#fff;} .rooms-quote{max-width:850px;margin:clamp(20px,1.758vw,27px) auto 0;text-align:center; font-style:italic;font-size:clamp(22px,2.213vw,34px);line-height:1.47;text-transform:capitalize;} /* ========================================================= LOCATION MAP + WHAT CLOSE? ========================================================= Design y4425..5347 on the 1536 canvas: · heading cap y4611, x133 · illustrated map x132..997, y4698..5185 · a 1px #A4A4A2 rule at x1059 running y4545..5226 · right column x1091..1403 — "WHAT CLOSE?" on the same cap line, a 3-line lead, then seven rows 60.5 apart: 30x30 icon at x1091, label at x1145, distance right-aligned to x1403 */ .nearby{position:relative;background:var(--page); padding:var(--spacing-section-full) 0 var(--spacing-section);} /* the two columns are middle-aligned against each other: the list block sits on the map's centre line, so the space above WHAT CLOSE? and below the last row is equal, and the rule's overhang reads the same at both ends */ .nearby-inner{position:relative;width:82.747vw;max-width:1271px;margin:0 auto; display:grid;grid-template-columns:68.13% 24.55%;justify-content:space-between; align-items:center;} /* the rule lives in the gutter, 32px left of the list column */ /* The rule now lives INSIDE .nearby-list and overhangs it by the same amount top and bottom. Anchored to .nearby-inner it stretched to the map column's height, so it ran a long way past the last list row while barely clearing the heading — the overhang was wildly unequal. -10.27% of the list width puts it back on its original x (72.93% of the inner). */ .nearby-list{position:relative;} .nearby-rule{position:absolute;left:-10.27%; top:calc(-1 * var(--rule-overhang));bottom:calc(-1 * var(--rule-overhang)); --rule-overhang:clamp(20px,2.604vw,40px); width:1px;background:#a4a4a2;pointer-events:none;} /* no padding-top here — the band's own padding sets the space above the headings; an extra inset on the h2 only pushed the columns out of alignment */ .nearby h2{font-size:clamp(28px,2.734vw,42px);color:var(--ink);text-transform:none;} /* the design sets WHAT CLOSE? two steps down from the map heading, at 32 */ .nearby-list h2{font-size:clamp(22px,2.083vw,32px);} /* The illustrated map keeps its own sepia. Hue-rotating it into the greens made the whole band read as one flat green wash and lost the warmth the artwork was drawn with — the surfaces around it carry the green instead. */ .nearby-map{display:block;width:100%;height:auto;margin-top:var(--gap-block);} /* This is a section-intro paragraph sitting under a section heading, so it uses the LEAD token — the same 17.6px/1.591 as .intro p, .roomcards .lead and .rooms-head p. It was on the small 14px body token, which is why it read as a different size from the rest of the homepage. */ .nearby-list p{margin-top:var(--gap-head-para); font-size:var(--font-size-body); /* sentence case, not title case: the lead is a sentence, not a label */ line-height:var(--line-height-body);text-transform:none;color:var(--ink);} .near-rows{margin-top:var(--sp-lg);} /* the icon column is a FIXED 30px, not 1.953vw: the vw column kept growing past the image's 30px cap above the 1536 canvas, leaving a drifting dead gap before the label. Row text uses the standard body token so the whole column reads in one voice instead of the list outsizing its own intro paragraph. */ .near-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center; gap:clamp(14px,1.563vw,24px);min-height:clamp(46px,3.939vw,60px); /* same body token as every paragraph on the site — the rows were on the old 14px scale while the paragraph above them ran at 16px */ font-size:var(--font-size-body);color:var(--ink);} /* no tint — the icons keep the sepia the map beside them is drawn in, so the two read as one piece of artwork */ .near-row img{width:30px;height:30px;object-fit:contain;object-position:center; display:block;} /* sized to the same 30px column and inked in the site's sage, as every other icon on the site is — they were the map's sepia and read as a different set */ .near-row svg{width:26px;height:26px;display:block;color:var(--sage);} .near-row .near-km{white-space:nowrap;letter-spacing:.01em;} /* the list closes on the same leaf link the room cards use */ .nearby-cta{margin-top:var(--gap-para-cta);padding-top:0;} /* light copy-left + two staggered image cards right (Figma dining / feature) */ /* Figma node 1:5107 / 1:5108 — the cream here is NOT a full-bleed band but a two-step staircase of rgb(242,239,233) + rgba(227,213,196,.4) blocks: 818 x 608 pinned to the section's top-LEFT (53.26% x 68.62%) 718 x 278 pinned to the section's bottom-RIGHT (46.74% x 31.38%) everything else is the page ground. */ /* ---- DINING: a 1536x620 stage ---- The design's stage was 879 tall with a 433x591 portrait photo, which left a lot of empty cream and pushed the band past one screen. Same composition, compressed: the photo is squarer (433x430), the copy starts higher so it sits against the photo's top half, and the video still tucks up under it. */ /* NO section padding here. The dining and safari bands are full-bleed compositions: the cream staircase blocks are painted on .dining-stage / .safari-stage and are designed to run edge to edge and meet the neighbouring bands. Adding padding insets those blocks and opens page-ground gaps where the staircase should join. Same exemption as the hero, forest and offers bands — their spacing lives inside the composition. */ /* MARGIN, not padding: these two bands carry the cream staircase / leaf band as their own background, so padding would let the cream fill the 100px and the bands would still touch. Margin keeps the gap on the page ground, so they genuinely separate. Sibling margins collapse, so midband->midband is 100px, not 200. Background percentages are the stage's original values because the section box is once again exactly the stage height. */ .midband{position:relative;color:var(--ink);background:var(--page); margin:var(--spacing-section-full) 0;padding:0;} .midband.imgleft{ background: linear-gradient(var(--cream),var(--cream)) 0 0/53.45% 66.02% no-repeat, linear-gradient(var(--cream),var(--cream)) 100% 100%/46.55% 33.98% no-repeat, var(--page);} /* A pale cream WASH, not a dark tint: the film should read as soft leaf shadows drifting behind the copy, the way the reference does — barely there. .92 leaves roughly 8% of the footage showing through. */ .midband.alt::before{content:"";position:absolute;inset:0; /* the veil that tints the whole Meetings band — it was a hard-coded beige, which is why the band stayed warm after the surface token changed. --sage-pale at .96. */ background:rgba(220,229,222,.96);z-index:1;pointer-events:none;} .safari-stage{z-index:1;} /* no padding-bottom override here — it made the dining band 100px top against 62px bottom. Every standalone band is symmetric on --spacing-section. */ /* 640 not 620: the air above the photo was 9.7% (60.1px on the canvas) but below the video only 40.3px. Growing the stage by 19.8px and re-deriving every child against 640 puts 60.1px top AND bottom while leaving the photo, copy and video in exactly the same absolute positions. */ .dining-stage{position:relative;width:100%;aspect-ratio:1536/640;} .dining-photo{position:absolute;left:16.016%;top:9.4%;width:28.19%;height:67.23%; background-color:var(--sage-tile);background-size:cover;background-position:center;} /* the copy sits a little higher than the photograph's own top edge (9.4%), so the heading leads the band rather than starting level with the picture */ .dining-copy{position:absolute;left:58.72%;top:6.5%;width:29.5%;} /* the branch sits above and right of the copy, behind it in z-order so the heading always wins. 440x383 artwork, held at its own aspect. */ .dining-video{position:absolute;left:62.565%;top:58.13%;width:22.2%;height:32.45%; background-color:var(--sage-tile);background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center;border:0;padding:0;} .dining-play{width:10.26%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center; transition:transform .32s cubic-bezier(.2,.7,.3,1),background .32s ease;} .dining-play::before{content:"";border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff;margin-left:2px;} .dining-video:hover .dining-play,.dining-video:focus-visible .dining-play{ transform:scale(1.12);background:rgba(255,255,255,.18);} /* Same composition, laid out on a grid instead of absolute percentages. Pinned at top:58.13%, the lower photo didn't know how tall the copy above it was: from 1025 to ~1300px the heading and lead wrap onto more lines while the stage shrinks, and the Know More dome slid under the photo. Here the photo sits in the row after the copy, so it can only ever be pushed down. The copy's min-height (51.63% of the 640 stage = 21.51cqw) holds it at the comp position whenever the copy is short enough, so wide screens are unchanged. Figures are the absolute values above re-expressed against the stage width (x 640/1536). */ @media (min-width:1025px){ .dining-stage{aspect-ratio:auto;container-type:inline-size;display:grid; grid-template-columns:16.016% 28.19% 14.514% 29.5% 1fr; align-content:start;padding:2.708% 0 3.925%;} .dining-photo,.dining-copy,.dining-video{position:relative;left:auto;top:auto;} .dining-photo{grid-column:2;grid-row:1 / span 2;align-self:start; width:auto;height:auto;aspect-ratio:433/430;margin-top:1.208cqw;} .dining-copy{grid-column:4;grid-row:1;width:auto;box-sizing:border-box; min-height:21.51cqw;padding-bottom:24px;} .dining-video{grid-column:4;grid-row:2;width:75.25%;margin-left:13.03%; height:auto;aspect-ratio:341/208;} } /* ---- MEETINGS & EVENTS (this band was the ruins/safari feature) ---- Copy holds the left column; the four venues run as a slider on the right, two in view, on the same track + rail control the rooms band uses. The cream sits behind the top of the band exactly as it did before. */ .midband.alt{position:relative;overflow:hidden; background:var(--cream); /* holds the band while the film loads */ padding:var(--spacing-section) 0;} /* greyscaled and lifted so the footage reads as neutral shadow rather than green foliage — the reference shadows are warm grey, not coloured */ .events-video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;z-index:0;pointer-events:none; filter:grayscale(1) brightness(1.16) contrast(.82);} /* full height: the copy is centred in the row, so a full-height band gives identical space above the heading and below the CTA */ .events-inner{position:relative;z-index:2;width:84.375vw;max-width:1296px;margin:0 auto; display:grid;grid-template-columns:29.5% 1fr;gap:4.3%;align-items:center;} .events-copy .flourish-btn{margin-top:var(--gap-para-cta);} /* two cards in view, the gutter from the spacing system */ .ev-row{display:flex;gap:var(--gap-card);} .ev-card{position:relative;flex:0 0 calc((100% - var(--gap-card))/2); aspect-ratio:401/430;overflow:hidden;scroll-snap-align:start; background-color:var(--sage-tile);background-size:cover;background-position:center;} .ev-card::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.4) 26%,rgba(0,0,0,0) 58%);} .ev-card.is-solid::before{content:"";position:absolute;left:50%;top:42%; transform:translate(-50%,-50%);width:28%;aspect-ratio:47.587/27.033; background:var(--fx-btn-sprig) no-repeat center/contain;opacity:.5;} .ev-label{position:absolute;left:8%;right:8%;bottom:7%;z-index:2;color:#fff;} .ev-name{display:block;font-family:'Roboto Serif',serif;font-weight:500; font-size:clamp(14px,1.302vw,20px);line-height:1.25;text-transform:none;} .ev-meta{display:block;margin-top:var(--sp-xs); font-family:'Jost',sans-serif;font-weight:300; font-size:clamp(11px,.846vw,13px);color:rgba(255,255,255,.88);} /* the rail belongs to the right column, so it lines up with the cards */ .midband.alt .slider-rail{margin-top:var(--gap-block);} /* The dining and events bands ran two steps below every other section heading (32px against 42px), which is why they read as small — and the dove ornament with them, since it is sized in em and shrinks with its heading. Matching the rooms / location / reviews scale fixes both at once and puts every band heading on the site on one size. */ .midband h2{font-size:clamp(28px,2.734vw,42px);text-transform:none;color:var(--ink); font-family:'Roboto Serif',serif;} .midband p{margin-top:var(--gap-head-para);max-width:432px; font-size:var(--font-size-body);line-height:var(--line-height-body); text-transform:capitalize;color:var(--ink);} /* the dining and events bands read in sentence case, so their leads are not title-cased by CSS */ .midband.alt p, .midband.imgleft p{text-transform:none;} .midband .flourish-btn{margin-top:var(--gap-para-cta);} /* ========================================================= REVIEWS ========================================================= */ /* design y6798..7847: heading cap y7144, cards y7217..7520 (592x303) at x94 / x716 / x1338 — 30 gutter — and the rail at y7574 */ /* Half spacing at the foot, not the full gap: the footer scene below is 160px of open sky that already separates this band from the footer, so the usual 100px on top of it left a dead strip between the rail and the birds. */ .reviews{padding:0 0 var(--spacing-section); background:var(--page);text-align:center;} /* This band runs on its own, tighter gutter: 100px at the 1536 comp instead of the site's 184px, so the quote cards start closer to the edge and more of the next card shows. 100/1536 = 6.51vw, which keeps that proportion at every width and caps at 125px so it stops growing on very wide screens. The gutter was previously an inline max-width:1396px on the div, which fought the stylesheet and left the first card 254px in at 1536. Padding must stay SYMMETRIC: .reviews .slider-track bleeds to the right edge with margin-right:calc((100% - 100vw)/2), and that only lands flush while the content box is centred. Below 769 the band falls back to the shared mobile gutter, where 6.51vw would waste half a phone screen. */ @media (min-width:769px){ .reviews > .container{max-width:none;padding-inline:clamp(40px,6.51vw,125px);} } .reviews h2{font-size:clamp(28px,2.734vw,42px);color:var(--ink);text-transform:none;} .review-row{margin-top:var(--gap-block);text-align:left;} /* Figma 1:5142 — Rectangle 34624445: 592x304, NO fill, NO radius, NO shadow, just a 1px #422E2E stroke drawn at 50% opacity. */ .review-card{position:relative;background:transparent;border:1px solid rgba(66,46,46,.5); border-radius:0;padding:36px 40px;box-shadow:none;overflow:hidden;} .review-card .qmark{display:none;} /* the 5 stars are ONE Figma vector, 118.555x18, filled #4E4E4E (not gold) */ .stars{display:block;width:118.555px;max-width:100%;} .stars img{width:118.555px;height:18px;display:block;} .review-card .rname{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:34px; color:var(--brown);text-transform:none;margin-top:var(--gap-card-in);} .review-card .rquote{font-family:'Jost',sans-serif;font-weight:300; font-size:var(--font-size-body);line-height:var(--line-height-body); color:var(--ink);text-transform:none;margin-top:var(--sp-md);position:relative;} /* ========================================================= FOOTER ========================================================= */ /* assets/footer.png (1561x595) is TRANSPARENT above the grass line and solid #284D3D below it. The scene strip shows only the top 240 of its 595 rows, so the tiger/birds/grass silhouette reads against the page ground; .footer-body then carries the identical green on down, and the two meet with no seam. Type is the site's own scale: Jost 500 for the eyebrows, Jost 300 for copy. */ .footer{position:relative;background:transparent;color:#fff; /* The band's height is DERIVED from the artwork, not chosen: the foliage in footer-foliage.png occupies the top 196 rows of a 1871-wide canvas, so at any page width it needs 196/1871 = 10.476% of that width to render at its true proportion. A fixed px slot would crush it vertically. Declared on .footer so the scene band and the animals size off the same number. */ --grass-h:10.476vw;} /* The scene is three layers: page ground on top, the grass silhouette along the bottom, and the two looping GIFs in between — birds in the open air, the tiger walking the grass line. */ /* no colour on the footer itself: the grass SVG is the background, and the gaps between its blades have to show the page ground behind them */ .footer{background:transparent;} /* tall enough to hold the grass band AND leave open sky above it for the tiger and the birds — the grass now eats the bottom --grass-h of this band */ .footer-scene{--walk:calc(100vw + clamp(130px,13.5vw,208px));position:relative;width:100%; /* the open sky above the grass: enough for the birds to cross and the tiger to clear the tuft line, no more — it was 124px and the whole footer would not fit a laptop viewport */ height:calc(var(--grass-h) + clamp(56px,4.6vw,72px)); background:var(--page); /* clip-path, not overflow:hidden — the tiger has to hang BELOW the band so its paws reach the grass, and overflow:hidden would cut them off. The negative bottom inset lets it spill downward while still clipping the walk cleanly at the left and right edges. */ clip-path:inset(0 0 -400px 0);} /* Both GIFs carry transparent padding baked into the frame, so `bottom:0` sits the CANVAS on the line, not the animal — which is where the gap came from. Tiger: 182 of 717 rows are empty (25.4%). At width W the frame is W x 0.68678, so the padding measures W x 0.17444 — offset by exactly that to land the paws on the grass, then 4px more to sink them into the blades. The grass strip belongs to .footer-body, which paints after this band, so it overlaps the paws and the tiger reads as walking THROUGH the grass. The band is --grass-h tall but almost all of it is transparent — trees at the sides, open sky in the middle — and only the bottom sliver is the dense tuft row. So the paws are lifted a small fraction of the band off its base, which lands them INSIDE those tufts: the grass paints after this layer and hides the lower legs, so the tiger reads as walking through it. At .34 it stood a third of the way up the band, clear of the tufts, and looked airborne; .07 sat it a touch low in the grass, so it is .11 now — still inside the tuft row, just standing a little higher in it. */ .footer-tiger{--tiger-w:clamp(130px,13.5vw,208px); position:absolute;z-index:2; bottom:calc(var(--grass-h) * .145 - 0.17444 * var(--tiger-w)); left:calc(-1 * var(--tiger-w)); width:var(--tiger-w);height:auto; animation:tiger-walk 30s linear infinite; /* leads the procession — see the delay note on .footer-deer */ animation-delay:-10.16s; /* Own compositing layer. Without it the browser repaints an ANIMATED GIF in place while it is also being translated, and the two updates desync — the frame it painted last stays behind as a grey smear in the sky. Same reason .gal-strip carries it. backface-visibility pins the layer to whole pixels so the sprite does not shimmer as it crosses. */ will-change:transform;backface-visibility:hidden;} @keyframes tiger-walk{ from{transform:translateX(0);} to{transform:translateX(var(--walk));} } /* The birds cross on the SAME cycle as the tiger — same keyframes, same 30s — with a fixed head start. Running them at different speeds (44s vs 30s) meant the two slid past each other and periodically overlapped; sharing the cycle keeps the horizontal gap between them constant for the whole loop. */ .footer-birds{--birds-w:clamp(96px,10.4vw,160px); position:absolute;z-index:2;top:4%; /* Start off the LEFT edge exactly like the tiger. The head start is a negative animation-delay, not a positive left — a positive left made the flock restart 200px onto the screen every loop instead of flying in from off-stage. Same keyframes, same 30s and the same inherited --walk span, so the distance between tiger and birds stays fixed for the whole cycle. -5.08s of 30s = 16.9% of the 2127px span = the same 408px lead the positive-left version had, so the spacing is unchanged from the design. */ left:calc(-1 * var(--birds-w)); width:var(--birds-w);height:auto; animation:tiger-walk 30s linear infinite; animation-delay:-5.08s; /* same layer promotion as the tiger — see the note there */ will-change:transform;backface-visibility:hidden;} /* The deer brings up the rear: tiger, then birds, then deer. All three share the one 30s cycle and the one --walk span, so the gaps between them stay fixed for the whole loop; only the head start differs. A NEGATIVE delay advances a sprite along the track, so the further ahead it should be, the more negative it is — tiger -10.16s, birds -5.08s, deer 0. deer-walk.gif is 800x450 with only 2 transparent rows under the hooves (0.0025 of its width, against the tiger's 0.17444), so it needs almost no offset to stand on the same line. */ .footer-deer{--deer-w:clamp(112px,11.6vw,178px); position:absolute;z-index:2; bottom:calc(var(--grass-h) * .145 - 0.0025 * var(--deer-w)); left:calc(-1 * var(--deer-w)); width:var(--deer-w);height:auto; animation:tiger-walk 30s linear infinite; will-change:transform;backface-visibility:hidden;} /* the body picks up the grass silhouette's own green so the join is seamless */ /* The grass is lifted OFF the body and sits on its top edge as its own strip. Stretching the grass artwork over the whole body (100% 100%) meant its transparent sky + tufts always occupied the top 11.05% of the body, eating into the top padding — so the copy sat low and top/bottom could never be equal. Now the body is flat green with symmetric padding, and the strip carries the tufts. The body green is #164130 to match the SVG's own fill (--footer-green #284d3d is a different green and would have shown as a seam). */ .footer-body{position:relative;background:#244F3D; --footer-pad:clamp(26px,2vw,32px); /* a real side gutter, not the page's flat 24px: below ~1340 the track can no longer hold the columns off the edge on its own, and this takes over */ padding:var(--footer-pad) clamp(24px,4vw,64px);} /* bottom sits 1px INTO the body rather than flush against it. Flush, the two edges land on the same fractional device pixel and a hairline of page ground shows between them — that is the straight line across the grass. The overlap is inside the artwork's own solid base, so nothing of the design is hidden. */ .footer-body::before{content:"";position:absolute;left:0;right:0; bottom:calc(100% - 1px); height:var(--grass-h);pointer-events:none; /* `auto` height, NOT a calculated one: auto takes the file's own 1871x751 ratio, so the artwork can only ever scale uniformly — it cannot be stretched whatever the page width. The image lays out at width x 0.40139 and the strip clips it to the top 26.1%, which is exactly the foliage band (196 of 751 rows, measured off the file). Everything below that row is solid and sits behind .footer-body. No crop and no offset here, unlike the outline it replaces: this artwork already carries ink to both edges (x 0..1869 of 1871) and its foliage starts at row 0, so there is no empty margin to trim and no crown to lift. It is recoloured to #164130 in assets/, matching .footer-body exactly, so the two meet with no seam. Its soft alpha edges are untouched. */ background:url('assets/footer-foliage.svg') top center/100% auto no-repeat;} /* the footer block runs x140..1396 on the design canvas */ /* the footer runs on the SAME 1216 track as every other section. It was the one block on a wider 1304, which both cost it ~44px of gutter each side and left its columns starting inboard of the content above it. */ .footer .container{max-width:var(--content);} /* --- three columns: address / contact / follow --- */ /* Percentage tracks (36.46 / 49.92 / 13.62, off the comp) only hold their proportions at the comp's own width. On a wide screen each column's text is far narrower than its track, so the dead space piled up unevenly — ~240px after the address, ~410px after the contact block. Sizing the outer columns to their content and letting the middle one centre in what's left pins the address to the left edge and the badges to the right, exactly as before, while splitting the leftover space equally either side of the contact block — so the two gaps are always the same, at any width. */ .footer-cols{display:grid;grid-template-columns:auto minmax(0,1fr) auto; gap:0;align-items:start;} .footer-col:nth-child(2){justify-self:center;} .footer-col:nth-child(3){justify-self:end;} /* the whole footer runs at one weight (300); the column headings are set apart by size alone — 2px over the body — not by going heavier */ /* the column heads sit closer to their copy, and the copy runs on a tighter leading — 30px on a 15px face was nearly double-spaced */ .ftitle{font-family:'Jost',sans-serif;font-weight:300;font-size:17px;line-height:1.2; letter-spacing:.04em;text-transform:none;color:#fff;margin:0 0 var(--sp-md);} .ftext{font-family:'Jost',sans-serif;font-weight:300;font-size:15px;line-height:26px; color:#fff;margin:0;max-width:34ch;} .ftext a{color:#fff;transition:color .25s ease;} .ftext a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;} .flabel{color:#fff;} .footer-col:nth-child(2) .ftext{max-width:none;} /* five 40px rings (1px white at 40%) with the design's own glyphs inside, capped so they still wrap 3-then-2 exactly: 3x40 + 2x10 = 140. The ring and the glyph step down together — shrinking the ring alone would leave the icons crowding their edges. */ .socials{display:flex;flex-wrap:wrap;gap:10px;max-width:158px;} .socials a{width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.4); display:flex;align-items:center;justify-content:center; transition:transform .32s cubic-bezier(.2,.7,.3,1),background .32s ease;} .socials a:hover,.socials a:focus-visible{transform:translateY(-3px); background:rgba(255,255,255,.1);} /* All five glyphs are SVG now, drawn on one 24-unit grid with the mark filling 20 of it, so a single size fits them all — the Instagram exception existed only because the four PNGs it sat beside were cropped differently. The PNGs were 34x34 bitmaps with no resolution left to grow into, which is why they read soft; vector holds its edges at any size and on any display. */ .socials img{width:24px;height:24px;display:block;} /* --- rule, then the link row and the sitemap line --- */ .footer-nav{display:flex;column-gap:clamp(18px,2.4vw,38px);row-gap:clamp(8px,.781vw,12px);flex-wrap:wrap;justify-content:center; margin-top:clamp(22px,2.2vw,32px);padding:clamp(16px,1.5vw,22px) 0 0; border-top:1px solid rgba(255,255,255,.16); font-family:'Jost',sans-serif;font-weight:300;font-size:15px;} .footer-nav a{position:relative;white-space:nowrap;color:#fff;} .footer-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left center; transition:transform .34s cubic-bezier(.2,.7,.3,1);} .footer-nav a:hover::after,.footer-nav a:focus-visible::after{transform:scaleX(1);} .footer-sitemap{display:flex;--fs-gap:clamp(14px,1.6vw,26px);gap:var(--fs-gap); flex-wrap:wrap;justify-content:center; margin-top:clamp(20px,2vw,30px); font-family:'Jost',sans-serif;font-weight:300;font-size:15px;color:#fff;} /* no underline at rest; it arrives on hover as the emphasis */ .footer-sitemap a{text-decoration:none;text-underline-offset:4px; text-decoration-thickness:.5px;transition:text-decoration-color .25s ease;} .footer-sitemap a:hover,.footer-sitemap a:focus-visible{text-decoration:underline;} /* The three closing items sit on one line above 860px, so they are divided by a pipe drawn in the flex gap: half the gap of margin puts it midway between the two items rather than tight against the left one. inline-block keeps the Sitemap link's hover underline from running through its own divider. */ @media (min-width:860px){ .footer-sitemap>*:not(:last-child)::after{content:"|";display:inline-block; margin-left:calc(var(--fs-gap) / 2);opacity:.42;} } /* Below 860px the row wraps and each item takes its own line, where a divider would read as a stray character. The pipes go, and the wrapped lines are centred: the row is a centred flex box but its text still ran left, which left the longer items looking ragged. */ @media (max-width:859px){ .footer-sitemap{text-align:center;} } /* ========================================================= OFFERS — full-bleed photo band, three slides ========================================================= */ /* One full-width image per offer with the copy laid over it, crossfading between three slides. Costs a single band instead of three tall cards, so the whole section reads inside one screen. */ .offers{position:relative;overflow:hidden;background:var(--green-deep); margin:var(--spacing-section) 0; width:100%; aspect-ratio:1920/620;min-height:400px;max-height:74vh;} .offer-slides{position:absolute;inset:0;} .offer-slide{position:absolute;inset:0;opacity:0;visibility:hidden; background-size:cover;background-position:center; transition:opacity .9s cubic-bezier(.22,.7,.25,1),visibility 0s linear .9s;} .offer-slide.is-on{opacity:1;visibility:visible;transition-delay:0s;} /* the scrim: heaviest on the left, where the copy sits */ .offer-slide::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,20,14,.82) 0%,rgba(10,20,14,.66) 38%,rgba(10,20,14,.28) 72%,rgba(10,20,14,.18) 100%);} /* the copy leaves at once and arrives after the photograph has crossfaded, so two headings are never legible on top of each other mid-transition */ .offer-inner{position:absolute;z-index:2;left:7.03%;right:7.03%;top:50%; transform:translateY(-50%);max-width:min(760px,54vw);color:#fff; opacity:0;transition:opacity .3s ease;} .offer-slide.is-on .offer-inner{opacity:1;transition:opacity .5s ease .4s;} .offers h2{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(24px,2.604vw,40px);line-height:1.2;color:#fff;} .offer-copy{margin-top:var(--gap-head-para); font-size:clamp(13px,1.042vw,16px);line-height:1.95;color:rgba(255,255,255,.9);} /* the site's own white dome, as on the booking bar — the block rectangle was the only button on the page that didn't belong to the family */ .offer-cta{margin-top:0;} /* Know More sits to the left of the Book Now dome on each offer slide; the pair is bottom-aligned so the text link rides on the dome's baseline. The leaf link is inked white here, since it lies over a photograph rather than the page. */ .offer-ctas{display:flex;align-items:flex-end;gap:clamp(20px,2.4vw,38px); flex-wrap:wrap;margin-top:var(--gap-para-cta);} .offer-know{color:#fff;padding-bottom:6px;} .offer-know::after{background:#fff;} .offer-know::before{filter:brightness(0) invert(1);} @media (max-width:640px){ .offer-ctas{gap:16px;} } /* the site's progress rail instead of dashes — same control as the rooms and testimonial tracks, laid over the photograph on the copy's own left inset */ .offer-rail{position:absolute;z-index:3;left:7.03%;right:7.03%; bottom:clamp(20px,2.604vw,40px);margin-top:0;} .offer-rail .rail{background:rgba(255,255,255,.34);} .offer-rail .rail-thumb{background:#fff;} .offer-rail .rail-count,.offer-rail .rail-arrow{color:#fff;} .offer-rail .rail-arrow:focus-visible{outline-color:#fff;} /* ========================================================= SLIDERS — drag / swipe / arrow-driven tracks ========================================================= */ .slider{position:relative;display:flow-root;} .slider-track{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth; scroll-snap-type:x proximity;overscroll-behavior-x:contain; scrollbar-width:none;-ms-overflow-style:none; cursor:grab;-webkit-overflow-scrolling:touch;} .slider-track::-webkit-scrollbar{display:none;} .slider-track:focus-visible{outline:1px solid currentColor;outline-offset:6px;} .slider-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;} .slider-track.is-dragging *{pointer-events:none;} .rc-card,.room-card,.review-card{scroll-snap-align:start;} /* --- LOOPING TRACK (opt-in via data-slider-loop) --- A track whose cards nearly fill it has no scrollable distance to speak of, so the arrows sit permanently disabled and nothing moves — the Facilities band overflowed by 14px at 1440. This track is therefore not scrolled at all: site.js translates it one card per press and wraps through a cloned second set. The scroller is turned off here or the two would fight over the same pixels. OVERFLOW:VISIBLE, and that is not a detail. An element's overflow clip is carried by its own transform — so hiding the overflow HERE, on the element being translated, drags the clipping box left with the cards and blanks a strip of the band exactly as wide as the travel (measured: 620px of bare green at the third card, which is 2 x the 310px pitch). The strip has to be clipped by something that does not move, and .rooms already is: it carries overflow:hidden at the section, so the cards are cut at the window edges while the track slides freely underneath. Both axes must be named. overflow-x:visible beside an overflow-y that is not visible computes back to auto, which would restore the scroller. DESKTOP ONLY. Below 1025 the cards are smaller and the track has ~370px of real travel, where native swipe is worth more than a loop — so the clones stay hidden and the ordinary scroller stays on. */ .slider-track > .is-clone{display:none;} @media (min-width:1025px){ .slider[data-slider-loop] .slider-track{ overflow:visible;scroll-snap-type:none;cursor:default; will-change:transform;} .slider[data-slider-loop] .slider-track > .is-clone{display:block;} } /* round arrow buttons, vertically centred on the imagery and sat just inside the viewport edges (same pattern as the reference site: one icon, the prev button is simply the next icon rotated 180deg) */ .slider-nav{position:absolute;z-index:6;top:var(--nav-y,42%);transform:translateY(-50%); width:clamp(40px,3.2vw,52px);aspect-ratio:1;border-radius:50%; display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer; color:var(--green-2);background:rgba(255,255,255,.82);border:1px solid rgba(47,79,58,.35); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(40,50,40,.16); transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease, background .3s ease,box-shadow .3s ease;} .slider-nav svg{width:44%;height:44%;display:block;} .slider-nav.prev{left:clamp(10px,1.8vw,30px);} .slider-nav.prev svg{transform:rotate(180deg);} .slider-nav.next{right:clamp(10px,1.8vw,30px);} .slider-nav:hover{transform:translateY(-50%) scale(1.09);background:#fff; box-shadow:0 10px 24px rgba(40,50,40,.24);} .slider-nav:active{transform:translateY(-50%) scale(1.02);} .slider-nav:disabled{opacity:0;pointer-events:none;} /* the forest band is dark, so its arrows invert */ .rooms .slider-nav{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55); box-shadow:none;} .rooms .slider-nav:hover{background:rgba(255,255,255,.26);} /* the forest band auto-advances and the design carries no arrows there — swipe, drag and the arrow keys still drive it */ .rooms .slider-nav{display:none;} .reviews .slider-nav{--nav-y:50%;} /* --- testimonials: progress rail + counter + line arrows instead of the round overlay buttons, so nothing sits on top of the quotes --- */ /* measured: 1px #ACABA9 track, a solid 100px #786B5B thumb sitting on it, a 42px gap to the nav, then 86px arrows either side of the counter at 16px */ .slider[data-slider-rail] > .slider-nav{display:none;} .slider-rail{display:flex;align-items:center;gap:clamp(20px,2.734vw,42px); margin-top:var(--gap-block);} .rail{position:relative;flex:1 1 auto;height:1px;background:rgba(83,115,94,.34);} .rail-thumb{position:absolute;top:-1px;left:0;height:2px;width:100px; background:var(--sage); transition:transform .45s cubic-bezier(.22,.7,.25,1);} .rail-nav{flex:none;display:flex;align-items:center;gap:16px;} .rail-count{font-family:'Roboto Serif',serif;font-weight:300;font-size:14px; letter-spacing:.06em;color:var(--sage);font-variant-numeric:tabular-nums; min-width:38px;text-align:center;} .rail-arrow{display:flex;align-items:center;padding:6px 0;border:0;background:none; cursor:pointer;color:var(--sage); transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease;} .rail-arrow svg{width:clamp(46px,5.6vw,86px);height:10px;display:block;} .rail-arrow:disabled{opacity:.28;cursor:default;} .rail-arrow:not(:disabled):hover.prev{transform:translateX(-5px);} .rail-arrow:not(:disabled):hover.next{transform:translateX(5px);} .rail-arrow:focus-visible{outline:1px solid currentColor;outline-offset:4px;} /* reviews become a real track so they can swipe once they stop fitting */ /* Figma 1:5142/5157/5172 — 592-wide cards, 30 gap, first card at x120 and the third running off the canvas: a genuine carousel, not a 3-up grid */ .review-row{display:flex;gap:var(--gap-card);} .review-card{flex:0 0 min(592px,38.542vw);} /* Bleed the TRACK — not the whole slider — out to the viewport's right edge so the last visible card is cut by the screen rather than stopping short inside the container. 100% resolves against the container's content width, so (100% - 100vw)/2 is exactly the negative right gutter. The rail is a sibling and keeps its inset, which is what holds the arrows off the edge. */ .reviews .slider-track{margin-right:calc((100% - 100vw)/2);} /* ========================================================= SCROLL REVEAL + IMAGE ZOOM ========================================================= */ /* gated on .js so the page still reads with scripting off */ .js [data-reveal]{opacity:0;transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,.7,.25,1) var(--rd,0s), transform .9s cubic-bezier(.22,.7,.25,1) var(--rd,0s);} .js [data-reveal].is-in{opacity:1;transform:none;} .js [data-reveal="fade"]{transform:none;} .js [data-reveal="right"]{transform:translateX(-34px);} .js [data-reveal="zoom"]{transform:scale(.94);} /* --- a dome that also reveals keeps its hover --- .flourish-btn animates through its own --btn-tx/--btn-ty/--btn-scale chain, which is how one hover rule serves every dome. The two rules above set `transform` outright and outrank .flourish-btn, so on any dome carrying data-reveal the button's chain never applied: --btn-scale still flipped to 1.07 on hover, but nothing read it, and the dome sat dead still. That was every Know More on the homepage; the only dome that still grew was the intro's, which happens to carry no data-reveal. Routing the reveal through --btn-ty instead lets the two compose: the dome rises into place, and it still grows off its base on hover. Must stay AFTER the .is-in rule above, which it ties with on specificity. */ .js .flourish-btn[data-reveal]{ --btn-ty:28px; transform:translate(var(--btn-tx),var(--btn-ty)) scale(var(--btn-scale));} .js .flourish-btn[data-reveal].is-in{--btn-ty:0px;transform:translate(var(--btn-tx),var(--btn-ty)) scale(var(--btn-scale));} .js .flourish-btn[data-reveal="zoom"]{--btn-ty:0px;--btn-scale:.94;} .js .flourish-btn[data-reveal="zoom"].is-in{--btn-scale:1;} /* the reveal's own easing for the slide, the button's snappier curve for hover */ .js .flourish-btn[data-reveal]{ transition:opacity .9s cubic-bezier(.22,.7,.25,1) var(--rd,0s), transform .34s cubic-bezier(.2,.7,.3,1);} /* the paired medallion has the same problem and takes the same fix: it carries its own translate/scale chain, so the reveal rides --md-ty rather than setting transform outright and cancelling the hover. Must stay AFTER the [data-reveal].is-in rule above, which it ties with on specificity. */ .js .medallion-btn[data-reveal]{ --md-ty:28px; transform:translateY(var(--md-ty)) scale(calc(var(--md-base) * var(--md-s))); transition:opacity .9s cubic-bezier(.22,.7,.25,1) var(--rd,0s), transform .34s cubic-bezier(.2,.7,.3,1);} .js .medallion-btn[data-reveal].is-in{--md-ty:0px; transform:translateY(var(--md-ty)) scale(calc(var(--md-base) * var(--md-s)));} /* badges pop rather than slide, and land with a touch of overshoot */ /* the arch pills sail in from off-screen, left ones from the left and right ones from the right, on an ease-out-expo so they arrive without a bounce */ .js [data-reveal="in-left"]{transform:translateX(calc(-52vw - 100%));} .js [data-reveal="in-right"]{transform:translateX(calc(52vw + 100%));} .js [data-reveal="in-left"],.js [data-reveal="in-right"]{ transition-duration:.95s,.95s; transition-timing-function:cubic-bezier(.16,1,.3,1),cubic-bezier(.16,1,.3,1);} .js [data-reveal="pop"]{transform:translateY(16px) scale(.86); transition-duration:.62s,.62s; transition-timing-function:cubic-bezier(.2,1.5,.4,1),cubic-bezier(.2,1.5,.4,1);} /* slow push-in on photographic cards, like the reference's transition-transform. the zoom rides on a scaled image LAYER, not background-size — a width-only background-size makes the height go auto, which shrinks + tiles the photo. */ /* NB: no `position` here — .safari-photo / .dining-photo are absolutely placed on their stages and this rule would knock them back into flow */ .room-card{position:relative;} .room-card,.safari-photo,.dining-photo{ overflow:hidden;background-size:cover;background-repeat:no-repeat;} /* the experiences band is an auto-slider — its cards stay still on hover */ .safari-photo::before,.dining-photo::before{ content:"";position:absolute;inset:0;background-image:inherit; background-size:cover;background-position:center;background-repeat:no-repeat; transition:transform .75s cubic-bezier(.22,.7,.25,1);} .safari-photo:hover::before,.dining-photo:hover::before{transform:scale(1.08);} /* the room-card photos are CROPPED, not stretched: the design zooms ~1.18x past the frame and holds the right of the room, so the width drives the size and the height stays auto (100% 100% squashed them) */ .rc-card .rc-img{--bg-zoom:1;background-size:calc(118% * var(--bg-zoom)) auto; background-position:72% 50%; transition:background-size .75s cubic-bezier(.22,.7,.25,1);} .rc-card:hover .rc-img{--bg-zoom:1.07;} .rc-card .rc-name{transition:color .3s ease;} .rc-card:hover .rc-name{color:var(--green-2);} /* honour the OS "reduce motion" setting — states still change, they just snap */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;} /* the domes cancel the grow, matching .btn-book / .btn-svg below */ .flourish-btn:hover,.flourish-btn:focus-visible{--btn-scale:1;} /* the paired medallion cancels its swell and its sprigs hold still, the same way the floating one does on the line below */ .medallion-btn:hover,.medallion-btn:focus-visible{--md-s:1;filter:none;} .medallion-btn:hover .ring,.medallion-btn:focus-visible .ring{transform:none;} .medallion-btn:hover::before,.medallion-btn:focus-visible::before{ transform:rotate(73.58deg) skewX(6.65deg) scaleY(-.99);} .medallion-btn:hover::after,.medallion-btn:focus-visible::after{ transform:rotate(-109.68deg) skewX(8.27deg) scaleY(-.99);} .btn-book:hover,.btn-book:focus-visible, .btn-svg:hover,.btn-svg:focus-visible{transform:none;} .hero-booknow:hover,.hero-booknow:focus-visible{transform:none;} .socials a:hover,.socials a:focus-visible{transform:none;} .slider-track{scroll-behavior:auto;} /* the tiger stands still rather than crossing the band */ /* both animals hold still rather than crossing the band */ .footer-tiger{animation:none;left:5%;} .footer-birds{animation:none;left:auto;right:20%;} .footer-deer{animation:none;left:auto;right:8%;} /* the background film holds on its first frame */ .events-video{display:none;} .js [data-reveal]{opacity:1;transform:none;} .safari-photo:hover::before,.dining-photo:hover::before{transform:none;} .rc-card:hover .rc-img{--bg-zoom:1;} /* the global transition-duration override only removes the easing — the scale would still snap, so cancel the transform itself */ .ag-cell:hover,.fac-card:hover,.rm-card:hover{transform:none;} } /* ========================================================= RESPONSIVE ========================================================= */ /* Everything above is expressed in vw off the 1536 design canvas, so the whole page scales as one composition down to ~1180. Below that the fixed stages (dining, safari, map, the 2-up room track) have to unpack, which is what the tiers below do — laptop → tablet → phone → small phone. */ /* --- laptops: keep the composition, just stop the type from shrinking --- */ @media (max-width:1280px){ .nav-links{gap:clamp(14px,2.4vw,34px);margin-right:clamp(18px,2.6vw,40px);} .booking-inner{width:82vw;} .rc-row{width:88vw;} .roomcards .slider-rail{width:88vw;} .nearby-inner{width:88vw;} } /* --- tablets: the stages unpack into stacked flow --- */ @media (max-width:1024px){ .booking-inner{width:auto;max-width:none;padding:32px 24px 28px; grid-template-columns:repeat(2,1fr);gap:22px 30px;} .bk-field{margin-bottom:26px;} /* the bar is a 2-col grid here, so the popover centres on the viewport rather than hanging off a half-width field */ .bk-rg-pop{left:50%;transform:translateX(-50%);width:300px;} .bk-btncol{grid-column:1 / -1;flex-direction:row;justify-content:center; align-items:center;gap:24px;flex-wrap:wrap;} .intro p,.roomcards .lead,.rooms-head p{max-width:none;} /* room cards → one per view on a snap track */ /* no h2 padding — .roomcards owns the seam inset via --gap-seam */ .roomcards::after{height:auto;top:0;bottom:auto;height:clamp(300px,46vw,470px);} .rc-row{width:auto;max-width:none;margin:28px 0 0;gap:20px;padding:0 24px 8px;} .rc-card{flex:0 0 min(78vw,520px);width:min(78vw,520px);max-width:none; scroll-snap-align:start;padding:14px 14px 0;} .rc-body{padding:0 8px 26px;} .rc-card .rc-name{font-size:22px;margin-top:18px;} .rc-card .rc-desc{font-size:15px;margin-top:10px;} .rc-meta{grid-template-columns:repeat(3,auto);justify-content:start;gap:26px; margin-top:16px;font-size:13px;} .rc-meta img{width:18px;} .rc-explore{margin-top:18px;font-size:14px;} .roomcards .slider-rail{width:auto;max-width:none;margin:24px 24px 0;} /* forest band → scrollable track, stagger flattened */ .room-row{margin-left:0;gap:16px;padding:0 16px 8px;} .room-card{flex:0 0 min(56vw,260px);width:min(56vw,260px);scroll-snap-align:start;} .room-card:nth-child(n){margin-top:0;} .room-card .rlabel{left:16px;right:16px;bottom:14px;font-size:15px;} .rooms-quote{margin-top:30px;} /* Activities, stacked: the copy and its dome read FIRST, then the pill list, and the arch closes the band flush against the Facilities section below — the same way the arch is cut by that band's edge on desktop. The copy and the arch are children of .arch-stage while the pill list is a sibling .container, so `order` alone cannot interleave the three. Giving .arch-stage `display:contents` drops it out of the box tree and promotes its children into .activities' flex, where all four can be ordered together. It carries no background or border of its own, so nothing is lost by removing its box. */ .activities{display:flex;flex-direction:column;} .arch-stage{display:contents;} .activities > .container{order:3;} /* CHILD combinator, not descendant: the eight desktop chips are direct children of .arch-stage, but the five stacked-layout chips live deeper, inside .arch-figure > .pill-list. A descendant selector here hid those too, and they only won their display back in the 768px block below — so between 769 and 1024 the band lost every activity name. */ .arch-stage > .pill{display:none;} /* display:block + no bottom margin so the arch meets the next band with no seam and no inline-image descender gap under it */ .arch-img{order:4;position:static;left:auto;top:auto;width:100%; display:block;margin-bottom:0;} .arch-copy{order:1;position:static;transform:none;width:auto; padding:28px 20px 0;text-align:center;} /* stacked, it no longer needs the centring translate — but the shared transform stays in place so the hover scale still runs. align-self keeps it centred now that it is a flex child of .activities. */ .arch-explore{order:2;position:static;--btn-tx:0px; align-self:center;margin:20px 0 0;} .pill-list{display:flex;} /* map → map over list, no rule */ .nearby{padding:clamp(40px,6vw,72px) 0;} .nearby-inner{width:auto;max-width:none;padding:0 24px;grid-template-columns:1fr;gap:40px;} .nearby-rule{display:none;} .nearby h2{padding-top:0;} .nearby-map{margin-top:24px;} .nearby-list{max-width:560px;} .near-row{grid-template-columns:30px 1fr auto;gap:16px;min-height:52px;} /* dining → photo, copy, video stacked; the cream steps become one block */ /* Asymmetric, not the symmetric clamp it carried: stacked, the band opened on a wide empty strip above the heading and then closed up tight under the CTA. Less on top, more underneath — the heading starts near the band's edge and the button gets room before whatever follows it. */ .dining-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center; gap:32px; padding:clamp(18px,3vw,32px) 24px clamp(52px,8vw,88px); background:linear-gradient(var(--cream),var(--cream)) 0 0/100% 55% no-repeat;} /* relative, NOT static: these carry an inset:0 ::before image layer, which would otherwise anchor to .dining-stage and cover the whole band */ .dining-photo,.dining-copy,.dining-video{position:relative;left:auto;top:auto;} /* 433/430, not 433/591. On the comp this photo is 28.19% of a 1536 stage (433px) by 67.23% of its 640 height (430px) — square to within a pixel. The stacked rule was carrying a portrait 433x591, which stood the picture 37% taller than it is ever drawn and let it eat most of a laptop screen once the band went one-column. The video below it was derived correctly (341/208 matches its own 22.2% x 32.45%), so only this one was off. */ .dining-photo{width:min(78vw,433px);height:auto;aspect-ratio:433/430;} .dining-copy{width:min(100%,520px);text-align:center;} .dining-copy p{margin-left:auto;margin-right:auto;} .dining-video{width:min(80vw,420px);height:auto;aspect-ratio:341/208;} .dining-play{width:44px;} /* safari → copy, then the two photos side by side under it */ .safari-stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center; gap:32px;padding:clamp(36px,6vw,64px) 24px;} .safari-stage::before{height:60%;} .safari-copy,.safari-photo{position:relative;left:auto;top:auto;} .safari-copy{width:min(100%,560px);text-align:center;} .safari-copy p{margin-left:auto;margin-right:auto;} .safari-photo{width:min(46%,401px);height:auto;aspect-ratio:401/526;} .safari-row{display:flex;gap:20px;justify-content:center;width:100%;} /* meetings & events: copy above, cards below */ /* minmax(0,1fr), NOT 1fr. The card row is a scrolling .slider-track, and a grid item defaults to min-width:auto — so the track's min-content width (three ~335px cards) pushed this single column out to 1401px inside a 390px band. .midband.alt clips with overflow:hidden, so nothing appeared to overflow; the copy simply laid itself out across 1402px and all but the first 20px of it sat outside the visible band. That was the empty box. minmax(0,…) plus min-width:0 lets the column shrink and the track scroll. */ .events-inner{grid-template-columns:minmax(0,1fr);gap:32px;width:auto;max-width:none;padding:0 24px;} .events-inner > *{min-width:0;} .events-copy{text-align:center;} .events-copy p{margin-left:auto;margin-right:auto;} .ev-card{flex:0 0 min(62vw,360px);} .midband.alt::before{inset:0;} /* offers → two across, the third wrapping under */ .offer-row{grid-template-columns:repeat(2,1fr);gap:24px;} /* reviews */ .review-card{flex:0 0 min(78vw,560px);} .review-row{gap:20px;} /* footer drops to two columns before it drops to one at 640 (the track is already --content site-wide, so nothing to reset here) */ .footer-cols{grid-template-columns:1fr 1fr;gap:34px clamp(24px,4vw,48px);} /* once the columns stack they all start on the same left edge again — the centring and right-pinning above are a wide-screen arrangement only */ .footer-col:nth-child(2),.footer-col:nth-child(3){justify-self:start;} } /* --- phones --- */ @media (max-width:768px){ .nav{padding:10px 20px;} .booking-inner{grid-template-columns:1fr;gap:16px;padding:26px 20px 24px;} .bk-field{margin-bottom:24px;} .bk-btncol{flex-direction:column;gap:10px;} .intro h2,.roomcards h2,.rooms-head h2,.reviews h2,.nearby h2{font-size:clamp(24px,6.4vw,34px);} .rooms-quote{font-size:clamp(19px,4.6vw,26px);} .rc-card{flex:0 0 min(86vw,460px);width:min(86vw,460px);} .rc-meta{grid-template-columns:repeat(2,auto);gap:14px 24px;} .room-card{flex:0 0 min(70vw,240px);width:min(70vw,240px);} .safari-photo{width:min(86vw,401px);} .safari-row{flex-direction:column;align-items:center;} .dining-stage{background-size:100% 46%;} .ev-card{flex:0 0 min(86vw,420px);} .review-card{flex:0 0 min(86vw,460px);} /* one card per row */ .offer-row{grid-template-columns:1fr;gap:20px;max-width:460px;margin-inline:auto;} .offers .lead{max-width:none;} .footer-cols{grid-template-columns:1fr;gap:34px;} .ftext{max-width:none;} /* The rail row stacks so the counter never crowds the arrows — and the nav sits in the MIDDLE. It was being pushed right by two rules working against each other: `align-items:stretch` made .rail-nav span the full width, then `justify-content:flex-end` shoved the arrows to its right edge. The `justify-content:center` written further down could not undo it, because on a column flexbox justify-content controls the VERTICAL axis. Centring the cross axis here is what actually moves it. Applies to every rail on the site — rooms, testimonials, offers, dining, events, gallery. */ .slider-rail{flex-direction:column;align-items:center;gap:18px;} .rail-nav{justify-content:center;} .rail-arrow svg{width:56px;} /* except over the offers photograph, where stacking would push the rail into the copy — it stays a row and simply narrows */ .offer-rail{flex-direction:row;align-items:center;gap:14px;} .offer-rail .rail-arrow svg{width:34px;} } @media (max-width:640px){ /* on phones the inline bar is retired entirely — the hamburger overlay IS the menu at this width, on every page. (The old .nav-links.open dropdown went with it; site.js has driven #navOverlay since.) */ .nav-links{display:none;} .hamburger{display:flex;} .wordmark{width:86%;} .nearby-list h2{font-size:clamp(20px,5.6vw,28px);} .near-row{gap:12px;min-height:48px;} .near-row img{max-width:26px;} /* FOOTER — one column, everything on one centre line. There was no single-column rule at all below 1024: the grid stayed `1fr 1fr`, .ftext kept its 34ch cap and .socials kept packing to the left edge of a full-width flex row, so the contact block and the icons both sat off the axis the nav below them centres on. */ .footer-cols{grid-template-columns:1fr;justify-items:center;text-align:center; gap:34px;} .footer-col{width:100%;} .footer-col:nth-child(2),.footer-col:nth-child(3){justify-self:center;} .ftext,.footer-col:nth-child(2) .ftext{max-width:none;} .socials{max-width:none;justify-content:center;} /* the dome steps down with the rest of the page — 153x70 is a desktop figure and reads oversized on a phone. Scaled as a unit (~0.82) so the artwork keeps its proportions, and the label's padding bias scales with it: 18 + (58-18-4)/2 = 36px of 58 = 62%, the same seat as on desktop. */ .flourish-btn{min-width:126px;min-height:58px;padding:18px 20px 4px; font-size:14px;} /* the paired medallion steps down with it, on the same ~0.82. The whole object is scaled rather than re-measured — ring, disc, face and both sprigs are absolutely placed at fixed pixel offsets, so resizing the box would leave them sitting where they were. Negative margins take back the 20x19px the transform no longer paints, so the flex row does not carry a band of empty space beside it. */ .medallion-btn{--md-base:.82;margin:-19px -10px 0;} } @media (max-width:420px){ .container{padding:0 16px;} .rc-card{flex:0 0 88vw;width:88vw;} .room-card{flex:0 0 76vw;width:76vw;} .review-card{flex:0 0 88vw;} .rc-meta{grid-template-columns:1fr;gap:10px;} .near-row{grid-template-columns:24px 1fr auto;} /* .socials is already uncapped and centred from the 640 tier */ } /* ========================================================= INNER PAGES — shared chrome for every non-home page --------------------------------------------------------- Breadcrumb and page head. Everything else (tokens, type, header, footer, buttons) comes from the rules above, so an inner page cannot drift from the homepage. There is no banner component any more: every inner page opens on the solid bar (body.no-banner) and its breadcrumb. Only the homepage carries a photographic hero. ========================================================= */ /* THE breadcrumb — one definition, used by every inner page. The links back up the tree are dark green, the current page stays ink so it reads as text rather than another link. */ /* Sized to read as a real trail, as the reference sets it: 15px, ink, sitting directly under the pill strip with its own space above and below. It was 13px/300 on the page ground, which all but vanished once the banner went and left it floating in the gap under the bar. */ .crumb{max-width:var(--content);margin:0 auto; padding:var(--crumb-pad) var(--padding-inline) clamp(6px,.8vw,12px); font-family:'Jost',sans-serif;font-weight:400; font-size:clamp(14px,1.042vw,15px);color:var(--ink);} /* On a page carrying the rail, the rail is fixed and occupies no flow space, so the crumb would slide under it. It clears the rail and THEN takes the same --crumb-pad every other page uses, so the trail sits at an identical distance below the chrome site-wide. */ .rm-nav + .crumb{padding-top:calc(var(--rail-h) + var(--crumb-pad));} /* The two links have to look like links and the current page must not. They were on --green (#1c3826), which sits so close to the crumb's own --ink (#4e4e4e) at 14px that all three items read as one flat line of text. --sage (#53735e) is plainly greener and lighter than the ink beside it, and the underline is carried at rest rather than saved for hover, so what is clickable is obvious before you touch it. */ .crumb a{color:var(--sage); text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px; transition:color .25s ease;} .crumb a:hover,.crumb a:focus-visible{color:var(--green-2);} /* the separator was at 45% and all but disappeared against the page ground — it carries the same ink as the crumb text now, so the trail reads cleanly */ .crumb span{margin:0 .5em;color:var(--ink);} /* No width or gutter of its own: .page-head always sits inside .page-section > .container, which already supplies both. Adding them here inset the page title 24px further than the grid beneath it, so a heading never lined up with the content it introduced. */ .page-head{text-align:center;} .page-head h1,.page-head h2{font-size:clamp(30px,3.125vw,48px);color:var(--ink); text-transform:none;letter-spacing:.01em;} .page-head p{margin:var(--gap-head-para) auto 0;max-width:74ch; font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} .page-section{padding:var(--spacing-section-full) 0 var(--spacing-section);background:var(--page);} /* A section led by the breadcrumb takes the HALF value on top: the crumb has already opened the page, and the full 100 on top of it left the trail stranded in whitespace between the bar and the heading. This is the header -> pill strip -> breadcrumb -> heading stack, tight. The last two selectors matter because the page content is now wrapped in
for the skip link, which put a boundary between .crumb and the section and silently returned every inner page to the full 100. */ .crumb + .page-section, .crumb + section, .crumb + main > .page-section:first-child, .crumb + main > section:first-child{padding-top:var(--spacing-section);} .page-section > .container{max-width:var(--content);} /* gap + align-items matter only where a page puts two CTAs side by side (the dining outlet pages: the dome plus a View Menu link); a single dome is unaffected by either */ .page-cta{display:flex;justify-content:center;align-items:center; flex-wrap:wrap;gap:clamp(20px,2.6vw,40px);margin-top:clamp(40px,4.6vw,70px);} /* A link closing the PAGE HEAD is a lead-in under the intro, not the section's closing dome: it takes the copy-to-link distance instead of the 70px meant for a dome at the foot of a band, and the .rm-cta wrapper inside adds no padding of its own on top. Together those were opening an 86px hole. */ .page-head .page-cta{margin-top:var(--gap-para-cta);} .page-head .page-cta .rm-cta{margin-top:0;padding-top:0;} /* On the room and dining detail pages the dome follows the FACT ROW, not a block of copy — one short line of 13px caps. The clamp above reaches 70px on a wide screen, which left the button stranded below it, so this relationship takes the system's own copy-to-button distance instead. */ .rm-detail .rm-facts + .page-cta{margin-top:var(--gap-para-cta);} /* A page built from two bands rather than one. The first still opens on the full 100, but the seam between them is shared 50/50 the way every band gap on the site is, so two sections read as one 100px gap and not 150. */ .page-section + .page-section{padding-top:var(--spacing-section);} .page-section.tint{background:var(--cream);} /* the closing-section padding is set once, near the foot of this file, so it cannot be re-declared out from under itself — see ":has(+ .footer)" there */ /* A tinted band that closes a page carries its colour on through the footer's ground strip, so the tiger walks across the same field the band sits on instead of a stripe of page colour wedged between the two. */ .page-section.tint:has(+ .footer) + .footer .footer-scene{background:var(--cream);} /* ---------- FACILITIES grid ---------- */ .fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card); margin-top:var(--gap-block);} .fac-card{position:relative;display:flex;flex-direction:column; border:1px solid var(--color-hairline,rgba(66,46,46,.3));background:var(--page); transition:border-color .42s ease,box-shadow .42s ease,transform .42s var(--ease,ease);} .fac-card:hover{border-color:rgba(66,46,46,.55);transform:translateY(-4px); box-shadow:0 20px 40px rgba(70,60,45,.13);} .fac-media{aspect-ratio:404/268;background-size:cover;background-position:center; background-color:var(--cream);overflow:hidden;} /* ---------- THE MISSING-PICTURE TILE ---------- One treatment for every slot the CDN library has no photograph for: the solid sage tile carrying the leaf sprig the buttons use, so a gap still reads as ours rather than as a broken image. Declared once here and shared by the facility cards, the venue bands on Meetings & Events, the experience cards, the offer figures and the homepage hover chips — before this, three of those drew the tile without the leaf and a fourth drew it a shade lighter, so the same "no photo" state looked like four different things. Add .is-solid to the media element and leave its background-image off. */ .fac-media.is-solid, .venue-media.is-solid, .rm-media.is-solid, .post-figure.is-solid, .pill-shot.is-solid, .nav-photo-layer.is-solid, .ag-cell.is-solid, .room-card.is-solid, .loc-media:not(.has-photo){ background-image:none;background-color:var(--sage-tile);} /* The sprig is centred by absolute positioning rather than by making the tile a flex box. Two of these elements have their display set by a LATER rule of equal weight — .rm-card .rm-media goes display:block for the card link, and .pill-shot goes display:none under 768px — so a display the tile set here was being overruled and the sprig collapsed to nothing. Offers and Experiences were drawing an empty green box because of it. Nothing below touches position on these, so this holds. */ .fac-media.is-solid, .venue-media.is-solid, .rm-media.is-solid, .post-figure.is-solid, .loc-media:not(.has-photo){position:relative;} /* .pill-shot and .nav-photo-layer are already positioned, and re-declaring position on them would drop them out of their own layout */ .fac-media.is-solid::after, .venue-media.is-solid::after, .rm-media.is-solid::after, .post-figure.is-solid::after, .pill-shot.is-solid::after, .nav-photo-layer.is-solid::after, .ag-cell.is-solid::after, .loc-media:not(.has-photo)::after{ content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:28%;aspect-ratio:47.587/27.033; background:var(--fx-btn-sprig) no-repeat center/contain;opacity:.5;} /* The sprig is sized as a share of its tile, so on the wider tiles a flat 28% drew a mark two and a half times the one on a facility card. These hold it to roughly the same drawn size across every tile instead. */ .venue-media.is-solid::after{width:22%;} .post-figure.is-solid::after{width:12%;} .nav-photo-layer.is-solid::after{width:12%;} /* A gallery plate the library has no photograph for. Its ::after normally draws the green hover wash and its ::before the expand mark — both say "there is a bigger version of this", and there is not, so the wash becomes the sprig and the mark is removed. The tile is a div rather than a button in the markup, but :hover still reaches a div, so the wash's hover state has to be answered here or the sprig would flash to full opacity. */ .ag-cell.is-solid{cursor:default;} .ag-cell.is-solid::before{content:none;} .ag-cell.is-solid:hover::after, .ag-cell.is-solid:focus-visible::after{opacity:.5;} /* The forest band's cards keep their ::after for the label scrim, so this one tile carries the sprig on ::before instead. It sits above the middle: the scrim is opaque across the bottom two-fifths and would bury a centred mark. The scrim itself is re-tinted from black to the band's own deep green: over a photograph black reads as shadow, but over the pale sage tile it turned the bottom half of the card a dead grey. */ .room-card.is-solid::after{ background:linear-gradient(0deg,rgba(10,26,15,.96) 0%,rgba(10,26,15,.74) 18%, rgba(10,26,15,.32) 39%,rgba(10,26,15,0) 57%);} .room-card.is-solid::before{content:"";position:absolute;left:50%;top:36%; z-index:1;transform:translate(-50%,-50%); width:34%;aspect-ratio:47.587/27.033; background:var(--fx-btn-sprig) no-repeat center/contain;opacity:.5;} .fac-name{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(16px,1.302vw,20px);line-height:1.35;color:var(--ink); text-align:center;padding:clamp(18px,1.8vw,26px) clamp(14px,1.4vw,20px);} .fac-name .fac-note{display:block;margin-top:.4em; font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:rgba(78,78,78,.62);} /* ---------- long-form pages (privacy policy, terms, career copy) ---------- One measure-limited column on the page-section track. Headings are the same brown serif the cards use, body copy is the site's body scale — no new type, and no eyebrow above the heading. */ /* one section-heading treatment, shared by the long-form pages and the About Us cards, so there is a single sub-heading style on the site */ .legal h2,.mvv-card h2{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(18px,1.563vw,24px);letter-spacing:.04em; text-transform:none;color:var(--ink);} .legal{max-width:74ch;margin:var(--gap-block) auto 0;} .legal h2{margin-top:var(--spacing-section);} .legal > h2:first-child{margin-top:0;} .legal p{margin-top:var(--gap-head-para); font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} .legal ul{margin-top:var(--gap-head-para);padding-left:1.25em;list-style:disc;} .legal li{margin-top:.5em; font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} .legal a{color:var(--sage);text-decoration:underline;text-underline-offset:3px;} .legal a:hover{color:var(--green-2);} /* the "last updated" line that closes a policy */ .legal .legal-stamp{margin-top:var(--spacing-section); font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.06em; text-transform:uppercase;color:rgba(78,78,78,.62);} /* ---------- ABOUT US: mission / vision / values cards ---------- About Us runs on the same single stylesheet as every other page. Card padding, hairline and body scale are the .fac-card / .legal values, not a second set. */ .mvv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card); align-items:stretch;margin-top:var(--gap-block);} .mvv-card{padding:clamp(28px,2.604vw,40px) clamp(22px,2.344vw,36px) clamp(26px,2.474vw,38px); background:var(--page);border:1px solid var(--color-hairline,rgba(66,46,46,.3));} /* no hover state at all on these cards: they are read-only statements, not links, so nothing about them should react to the pointer */ .mvv-card p{margin-top:var(--gap-head-para); font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} /* ---------- ABOUT US: gallery mosaic ---------- One tall plate, a stacked pair, a tall plate — all CDN library images. */ /* dense: a `tall` tile spans two rows, so once the gallery filter removes some tiles the remaining ones would leave a hole mid-mosaic. Dense packing backfills it. */ .ag-grid{display:grid;grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(150px,15.6vw,240px);gap:var(--gap-card); grid-auto-flow:dense;margin-top:var(--gap-block);} /* ---------- ROOMS: summary grid ---------- Declared here, with the other inner-page grids and BEFORE the shared responsive tiers below, so it collapses on the same breakpoints they do. */ .rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card); margin-top:var(--gap-block);} .ag-cell{display:block;background-color:var(--sage-tile); background-size:cover;background-position:center;overflow:hidden; transition:transform .75s cubic-bezier(.22,.7,.25,1);} .ag-cell.tall{grid-row:span 2;} /* the scale-on-hover is gone — the tiles hold still and the wash + expand mark below carry the hover instead */ /* ---------- FAQ accordion ---------- */ .faq-list{margin-top:var(--gap-block);display:flex;flex-direction:column;gap:16px;} .faq-item{border:1px solid rgba(66,46,46,.16);background:#fff;} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:clamp(18px,1.9vw,26px) clamp(18px,2vw,30px); border:0;background:none;cursor:pointer;text-align:left; font-family:'Jost',sans-serif;font-weight:400; font-size:var(--font-size-body);line-height:1.5;color:var(--sage); transition:color .28s ease;} .faq-q:hover{color:var(--green-2);} .faq-q:focus-visible{outline:1px solid currentColor;outline-offset:-4px;} .faq-q .chev{flex:none;width:18px;height:18px;color:var(--sage); transition:transform .38s var(--ease,ease);} .faq-item.is-open .chev{transform:rotate(180deg);} /* height animates via max-height so it works without JS measuring */ .faq-a{max-height:0;overflow:hidden; transition:max-height .42s var(--ease,ease),opacity .3s ease;opacity:0;} .faq-item.is-open .faq-a{max-height:520px;opacity:1;} .faq-a p{padding:0 clamp(18px,2vw,30px) clamp(20px,2vw,28px); font-size:var(--font-size-body);line-height:var(--line-height-body); color:var(--ink);margin:0;} .faq-a ul{margin:0;padding:0 clamp(18px,2vw,30px) clamp(20px,2vw,28px) clamp(34px,3.4vw,50px); font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} /* ---------- inner-page responsive ---------- Every inner-page grid steps down on the SAME tiers, so a tablet or phone sees one rhythm across Facilities, About Us, Rooms, FAQ and Terms. */ /* 3-up becomes 2-up on tablet. Every inner-page grid turns here together — Facilities, Rooms, the About Us cards and the About Us mosaic — so no page is showing a different column count at the same width. */ @media (max-width:1024px){ .fac-grid,.mvv-row,.rm-grid,.ag-grid{grid-template-columns:repeat(2,1fr);} /* the mosaic drops to equal tiles: a tall plate beside a single short one reads as a mistake once the row is only two wide */ .ag-grid{grid-auto-rows:auto;} .ag-cell.tall{grid-row:span 1;} .ag-cell{aspect-ratio:4/3;} } /* no override needed at 768 for section padding: --spacing-section-full already resolves to 2 x 30 = 60px there, the mobile section rhythm */ /* 2-up becomes a single column on phones — again, all four together */ @media (max-width:640px){ .fac-grid,.mvv-row,.rm-grid,.ag-grid{grid-template-columns:1fr;} .fac-grid,.mvv-row,.rm-grid{max-width:460px;margin-inline:auto;} /* .crumb is top-level, so it carries its own gutter; .page-head is inside .container and follows whatever that does */ .crumb{padding-left:16px;padding-right:16px;} } /* ========================================================= ROOMS — summary grid + room detail ========================================================= */ /* the rule-flanked eyebrow label that used to sit above a page heading is retired site-wide — the heading leads on every page */ /* NB: .rm-grid's own declaration lives with the other inner-page grids further up. It must stay ABOVE the shared responsive tiers — media queries add no specificity, so a base rule written after them wins at every width and the grid never collapses. */ .rm-card{display:flex;flex-direction:column;background:#fff; border:1px solid rgba(66,46,46,.18); transition:border-color .42s ease,box-shadow .42s ease,transform .42s var(--ease,ease);} .rm-card:hover{border-color:rgba(66,46,46,.45);transform:translateY(-4px); box-shadow:0 22px 44px rgba(70,60,45,.14);} .rm-media{aspect-ratio:404/268;background-size:cover;background-position:center; background-color:var(--cream);} .rm-body{display:flex;flex-direction:column;flex:1; padding:clamp(20px,2vw,30px) clamp(18px,1.9vw,28px) clamp(20px,2vw,28px);} /* an icon in place of the photograph, for cards the library has no picture for (Careers) — the same sage line weight as the .amen-ico marks */ .rm-icon{display:flex;align-items:center;justify-content:center;flex:none; width:clamp(56px,4.4vw,68px);height:clamp(56px,4.4vw,68px);border-radius:50%; margin-bottom:var(--sp-md);background:var(--sage-pale);color:var(--sage);} .rm-icon svg{width:52%;height:52%;} /* these titles are one short line, so the two-line well the room names need only left a gap under them */ .rm-icon + .rm-name{min-height:0;} .rm-name{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(19px,1.563vw,24px);line-height:1.3;color:var(--ink); /* a two-line well, so a name that wraps ("Super Deluxe With Plunge Pool") does not push its description a line below its neighbours' */ min-height:calc(2 * 1.3em);} .rm-desc{margin-top:var(--sp-sm);font-size:var(--font-size-body); line-height:var(--line-height-body);color:var(--ink);} /* size / sleeps / view, on one hairline-separated row */ .rm-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto; padding-top:clamp(16px,1.6vw,22px);border-top:1px solid rgba(66,46,46,.14); font-family:'Jost',sans-serif;font-weight:300;font-size:13px;color:var(--ink);} .rm-meta span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;} .rm-meta svg{width:15px;height:15px;flex:none;color:var(--sage);} .rm-cta{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap; margin-top:auto;padding-top:var(--sp-sm);} /* ---------- room detail ---------- */ /* The sibling rail — room types, dining outlets — parks under the bar as you scroll, so you can move between them from anywhere on the page. top is the bar's real height less 1px: the rail tucking a pixel under it is invisible, whereas a pixel short lets the page ground show through as a seam. --header-solid-h is now derived from the nav's own padding and crest, so this tracks the bar exactly instead of guessing at it. z-index 30 sits under the fixed header (40) and over page content, and the opaque background is what lets the page scroll cleanly beneath it. */ .rm-nav{position:fixed;top:calc(var(--header-solid-h) - 1px);left:0;width:100%; z-index:30; border-bottom:1px solid rgba(66,46,46,.14);background:var(--page);} .rm-nav-inner{max-width:var(--content);margin:0 auto; padding:0 var(--padding-inline); display:flex;gap:clamp(16px,2.2vw,34px);overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none;} .rm-nav-inner::-webkit-scrollbar{display:none;} /* line-height is explicit, not `normal`: --rail-h is computed from these three numbers, so the font's default leading must not be allowed to change it */ .rm-nav a{position:relative;white-space:nowrap;padding:18px 0;line-height:21px; font-family:'Jost',sans-serif;font-weight:300;font-size:15px;color:var(--ink); transition:color .28s ease;} .rm-nav a:hover{color:var(--sage);} .rm-nav a.is-current{color:var(--sage);} .rm-nav a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:2px;background:var(--sage);} .rm-facts{display:flex;flex-wrap:wrap;justify-content:center; gap:10px clamp(18px,2.2vw,34px);margin-top:clamp(20px,2vw,30px); font-family:'Jost',sans-serif;font-weight:400;font-size:14px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink);} .rm-facts span{display:inline-flex;align-items:center;gap:10px;} /* icons at 200% of the old 15px — the drawn marks carry far more detail than the line glyphs they replace and were unreadable at the smaller size */ .rm-facts svg{width:30px;height:30px;flex:none;color:var(--sage);} /* .rm-gallery / .rm-shot are defined once, in the ROOM DETAIL block below */ /* previous / next room */ .rm-switch{display:flex;justify-content:space-between;gap:24px; max-width:var(--content);margin:0 auto; padding:var(--spacing-section) var(--padding-inline) var(--spacing-section-full);} .rm-switch a{display:block;} .rm-switch .rs-label{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:rgba(78,78,78,.6);} .rm-switch .rs-name{display:block;margin-top:10px;font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(20px,1.823vw,28px);color:var(--ink);transition:color .28s ease;} .rm-switch a:hover .rs-name{color:var(--green-2);} .rm-switch .next{text-align:right;margin-left:auto;} /* .rm-grid steps down with the other inner-page grids in the shared tiers above; .amen-grid steps down in the ROOM DETAIL tiers below */ @media (max-width:640px){ .rm-switch{padding-left:16px;padding-right:16px;} .rm-switch .rs-name{font-size:19px;} } /* ========================================================= NAV + BREADCRUMB corrections ========================================================= */ /* the crest is a link home on every page; a plain flex item so the transparent -> stuck crest swap is unchanged */ .nav-brand{display:flex;align-items:center;flex:none;line-height:0;text-decoration:none;} /* Menu items are white. Every page now opens on a dark banner and the scrolled bar is solid green, so white is legible in both states — before this they inherited --ink and went nearly invisible on green. */ .header .nav-links a{color:#fff;} .header.is-stuck .nav-links a{color:#fff;} .hamburger span{background:#fff;} /* breadcrumb colours are set once, with the rest of .crumb above */ /* ========================================================= ROOM DETAIL — copy, gallery, amenities (redesign) ========================================================= */ /* the detail head runs several paragraphs now, so it reads as a column rather than a single centred line */ .rm-detail .page-head{max-width:820px;margin-inline:auto;} .rm-detail .page-head p{margin-top:var(--gap-para-para);} .rm-tagline{font-family:'Roboto Serif',serif; font-size:clamp(17px,1.432vw,22px);line-height:1.55;color:var(--sage); margin-top:var(--gap-head-para) !important;} /* ---------- dining gallery: the site's 3-up track ---------- Same .slider / .slider-track / .slider-nav components the homepage bands use, just with the round arrows left visible instead of the rail. Three photographs in view, and `flex-grow` so an outlet with only two spreads them across the track instead of leaving a third of it empty. */ .dine-gallery{margin-top:clamp(40px,4.4vw,68px);} .dine-gallery .slider-track{display:flex;gap:var(--gap-card); scroll-snap-type:x proximity;} .dine-shot{flex:0 0 calc((100% - var(--gap-card)) / 2); aspect-ratio:4/3;scroll-snap-align:start; background-size:cover;background-position:center;background-color:var(--cream);} @media (max-width:640px){ .dine-shot{flex:0 0 100%;} } /* ---------- gallery ---------- */ .rm-gallery{margin-top:clamp(40px,4.4vw,68px);} .rm-stage{position:relative;} /* the stage is the photograph alone, nothing under it, so the arrows centre on it rather than on the card sliders' 42% (which allows for a label below) */ .rm-stage .slider-nav{--nav-y:50%;} .rm-gallery .slider-track{display:flex;gap:0;scroll-snap-type:x mandatory; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;} .rm-gallery .slider-track::-webkit-scrollbar{display:none;} .rm-shot{flex:0 0 100%;aspect-ratio:1120/500;scroll-snap-align:start; background-size:cover;background-position:center;background-color:var(--cream); /* each frame opens in the image viewer, the same one the Gallery mosaic uses */ cursor:zoom-in;} .rm-shot:focus-visible{outline:2px solid var(--sage);outline-offset:-4px;} /* the dining strip opens in the same viewer */ .dine-shot{cursor:zoom-in;} .dine-shot:focus-visible{outline:2px solid var(--sage);outline-offset:-4px;} /* counter sits on the frame, bottom-right */ .rm-count{position:absolute;right:0;bottom:0;z-index:3; display:flex;align-items:baseline;gap:2px; padding:10px 18px;background:var(--green);color:#fff; font-family:'Jost',sans-serif;font-weight:300;font-size:13px;letter-spacing:.08em;} .rm-count b{font-weight:500;} .rm-count i{font-style:normal;opacity:.5;margin:0 1px;} /* thumbnail strip drives the stage — replaces the old dot bars */ .rm-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr; gap:10px;margin-top:10px;} .rm-thumbs::-webkit-scrollbar{display:none;} .rm-thumbs button{width:100%;height:clamp(64px,7.4vw,112px); border:0;padding:0;cursor:pointer;background-size:cover;background-position:center; opacity:.45;transition:opacity .38s ease,outline-color .38s ease; outline:2px solid transparent;outline-offset:-2px;} .rm-thumbs button:hover{opacity:.8;} .rm-thumbs button.is-on{opacity:1;outline-color:var(--sage);} /* ---------- amenities: big icon over label, on the page ground ---------- */ .amen{background:var(--page);padding:var(--spacing-section) 0;} .amen h2{text-align:center;font-size:clamp(26px,2.5vw,38px);color:var(--ink); text-transform:none;} .amen-lead{max-width:60ch;margin:var(--gap-head-para) auto 0;text-align:center; font-size:var(--font-size-body);line-height:var(--line-height-body); color:rgba(78,78,78,.78);} .amen-grid{display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,20px);margin-top:var(--gap-block);} .amen-item{display:flex;flex-direction:column;align-items:center;text-align:center; gap:14px;padding:clamp(22px,2.2vw,32px) 10px; background:#fff;border:1px solid rgba(66,46,46,.14);} .amen-ico{width:clamp(34px,2.8vw,42px);height:clamp(34px,2.8vw,42px); color:var(--sage);flex:none;} .amen-txt{font-family:'Jost',sans-serif;font-weight:400; font-size:clamp(13px,.977vw,15px);line-height:1.4;color:var(--ink);} .amen-txt em{display:block;margin-top:4px;font-style:normal; font-size:12px;letter-spacing:.04em;color:rgba(78,78,78,.55);} /* four items, not the room pages' fifteen — a 6-up track would leave two empty columns hanging off the end of the row (Careers) */ .amen-grid.four{grid-template-columns:repeat(4,1fr);max-width:900px; margin-inline:auto;} /* three, for the transport tiles under the map on Location */ .amen-grid.three{grid-template-columns:repeat(3,1fr);max-width:820px; margin-inline:auto;} /* the heading that introduces them sits closer than a section head would */ .loc-getting{margin-top:var(--spacing-section);} @media (max-width:1024px){ .amen-grid{grid-template-columns:repeat(4,1fr);} } @media (max-width:640px){ .amen-grid{grid-template-columns:repeat(2,1fr);} /* .four and .three carry two classes, so they outrank the plain .amen-grid rule above at every width — a media query adds no specificity. They have to be stepped down by name or they stay 4- and 3-across on a phone. */ .amen-grid.four{grid-template-columns:repeat(2,1fr);} .amen-grid.three{grid-template-columns:1fr;max-width:360px;} .rm-shot{aspect-ratio:4/3;} .rm-count{padding:8px 14px;font-size:12px;} } /* ========================================================= SINGLE PULL-QUOTE + second dining branch ========================================================= */ /* ========================================================= BODY COPY WEIGHT Paragraphs were rendering at Jost 400, which reads heavy against the light serif headings. 300 is loaded for Jost, so body copy drops to it in one place rather than per-component. Headings, nav, buttons and labels are unaffected — they set their own weight. ========================================================= */ /* NB .legal li sits here beside .legal p on purpose. A list item is not a

, so it was not caught by the bare `p` selector and fell through to Jost's default 400 — which is why the bulleted clauses on Terms & Conditions read visibly darker than the lead paragraph above them. .faq-a li was already in this list for the same reason. */ p, .rc-desc, .rm-desc, .rquote, .ftext, .amen-txt, .page-lead, .offer-copy, .faq-a, .faq-a li, .near-row span, .mvv-card p, .legal p, .legal li, .rc-meta, .ev-meta, .amen-lead, .rm-tagline{ font-weight:300; } /* ========================================================= MISSION / VISION / VALUES band No band ground behind the row: the cards sit straight on the page, each keeping its own colour at rest AND on hover. Hover is carried entirely by the hairline and the heading (see .mvv-card above). ========================================================= */ /* A section directly above the footer carries the HALF value, not the full 100. The footer opens with its own tall scene band — the open sky the birds cross before the grass line — so a full 100 on top of that reads as a hole between the last content and the footer. Applies to every page. */ .page-section:has(+ .footer), .amen:has(+ .footer){ padding-bottom:var(--spacing-section); } /* ========================================================= SITE MAP --------------------------------------------------------- Three columns of top-level pages, each with its children indented under a hairline. No new type: section links take the .legal h2 serif, children take body copy. ========================================================= */ .sitemap{margin-top:var(--gap-block);} .sitemap ul{list-style:none;margin:0;padding:0;} /* A GRID, not `columns:3`. Multi-column flowed the list top-to-bottom and then across, so the reading order fought the page, and column balancing pushed the entries around until the gaps between them were all different sizes. A grid reads left-to-right in source order and holds one gap everywhere. `align-items:start` keeps a short entry short instead of stretching it to the height of whatever sits beside it. */ .sitemap > ul{display:grid;align-items:start; gap:clamp(26px,2.8vw,38px) var(--gap-card);} /* the four sections that own sub-pages: four across, longest first, so the ragged bottoms step down instead of jumping about */ .sitemap .sm-sections{grid-template-columns:repeat(4,1fr);} /* the standalone pages: every cell is one line, so every row is the same height and the block reads as an even index */ /* `.sitemap ul{margin:0}` above outranks a lone class, so the separating gap has to be written at the same weight to land */ .sitemap .sm-pages{grid-template-columns:repeat(4,1fr); margin-top:var(--spacing-section);} /* No rules. A hairline over every entry drew a ladder of lines across the page and read as clutter; the grid's own even gaps and the serif caps of each heading carry the structure on their own. */ .sitemap > ul > li > a{display:inline-block; font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(16px,1.302vw,20px);letter-spacing:.03em; text-transform:uppercase;color:var(--sage); transition:color .25s ease;} .sitemap > ul > li > a:hover{color:var(--green-2);} /* children hang off the parent, no second rule — the block already has one */ .sitemap ul ul{margin-top:var(--sp-sm);padding-left:var(--sp-md);} .sitemap ul ul li + li{margin-top:var(--sp-xs);} .sitemap ul ul a{display:inline-block; font-family:'Jost',sans-serif;font-weight:300; font-size:var(--font-size-body);line-height:1.5; /* the children were inked the body grey with no underline, so they were indistinguishable from plain text */ color:var(--sage);text-decoration:underline; text-decoration-color:rgba(83,115,94,.4);text-underline-offset:3px; text-decoration-thickness:1px;transition:color .25s ease,text-decoration-color .25s ease;} .sitemap ul ul a:hover,.sitemap ul ul a:focus-visible{color:var(--green); text-decoration-color:var(--sage);} /* both selectors carry the .sitemap prefix so they outrank the base rules, which need it themselves to beat `.sitemap ul` */ @media (max-width:1024px){ .sitemap .sm-sections{grid-template-columns:repeat(2,1fr);} .sitemap .sm-pages{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ .sitemap .sm-sections{grid-template-columns:1fr;} /* the page list stays two-up on a phone — one column of single lines would run the block far longer than it needs to be */ .sitemap .sm-pages{grid-template-columns:repeat(2,1fr);} } /* ---------- spa page ---------- */ .spa-quote{max-width:64ch;margin:var(--gap-block) auto 0;text-align:center;} .spa-quote p{font-family:'Roboto Serif',serif;font-weight:300; font-size:clamp(19px,1.823vw,28px);line-height:1.5;color:var(--sage);} .spa-quote cite{display:block;margin-top:var(--sp-md);font-style:normal; font-family:'Jost',sans-serif;font-weight:400;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:rgba(78,78,78,.6);} /* ---------- dining: the outlet's timings panel ---------- The one place a cream SURFACE is wanted against the page ground: a short table of times reads as a plate to be scanned, not as more body copy. Label type is the same small uppercase Jost as .sp-label so it belongs to the same family as the specs rows on the summary page. */ .dine-hours{max-width:460px;margin:var(--gap-block) auto 0; padding:clamp(22px,2.2vw,32px) clamp(20px,2.4vw,36px); background:var(--cream);} .dine-hours h2{font-family:'Jost',sans-serif;font-weight:400;font-size:11px; letter-spacing:.12em;text-transform:uppercase;text-align:center; color:rgba(78,78,78,.62);} .dine-hours dl{margin-top:var(--sp-md);display:grid;gap:10px;} .dine-hours dl > div{display:flex;justify-content:space-between; align-items:baseline;gap:16px;} .dine-hours dt{font-size:var(--font-size-body);color:var(--ink);} .dine-hours dd{margin:0;font-family:'Roboto Serif',serif;font-weight:400; font-size:var(--font-size-body);color:var(--sage);white-space:nowrap;} /* a single line of hours (the bar) rather than a three-meal table */ .dine-hours p{text-align:center;margin-top:var(--sp-sm);} /* ========================================================= BLOG POST — the article body on a single post ========================================================= */ /* Centred measure, as the reference sets it. The summary page reuses .rm-grid / .rm-card from Rooms and the post nav reuses .rm-switch, so this is the only new type on either page. */ .post{max-width:900px;margin:0 auto;text-align:center;} .post p{margin-top:var(--gap-para-para); font-size:var(--font-size-body);line-height:var(--line-height-body); color:var(--ink);} .post > p:first-child{margin-top:0;} .post-figure{margin-top:var(--gap-block);width:100%;aspect-ratio:16/9; background-size:cover;background-position:center;background-color:var(--cream);} .post-figure + p{margin-top:var(--gap-block);} /* ========================================================= GALLERY — category filter + the shared mosaic ========================================================= */ /* The filter row sits under the page-head, centred, in the site's small uppercase Jost — the same type as .rm-switch's label and .fac-note, not a new scale. The current category keeps the hairline drawn, exactly as the main nav marks the page you are on. */ .gal-filter{display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(16px,2.6vw,40px);margin-top:var(--gap-block);} .gal-filter button{position:relative;border:0;background:none;padding:0 0 7px; cursor:pointer;font-family:'Jost',sans-serif;font-weight:400; font-size:clamp(12px,.911vw,13px);letter-spacing:.12em; text-transform:uppercase;color:rgba(78,78,78,.62); transition:color .28s ease;} .gal-filter button::after{content:"";position:absolute;left:0;right:0;bottom:0; height:1px;background:currentColor;transform:scaleX(0); transform-origin:left center; transition:transform .34s cubic-bezier(.2,.7,.3,1);} .gal-filter button:hover{color:var(--sage);} .gal-filter button:hover::after{transform:scaleX(1);} .gal-filter button[aria-pressed="true"]{color:var(--sage);} .gal-filter button[aria-pressed="true"]::after{transform:scaleX(1);} .gal-filter button:focus-visible{outline:1px solid var(--sage);outline-offset:5px;} /* filtered-out tiles leave the grid entirely so the mosaic re-flows with no holes; [hidden] alone loses to .ag-cell's display:block */ .ag-cell[hidden]{display:none;} /* ========================================================= MEETINGS & EVENTS — alternating venue bands ========================================================= */ /* Photo one side, copy the other, flipping band by band, on the same 1216 track and the same section rhythm as every other inner page. */ /* The band carries NO background of its own: the venues read as one run of copy on the page ground, so an alternating cream fill would only chop it up. A hairline between bands is what actually separates one venue from the next. It also takes no width or padding — it sits inside .page-section > .container like every other inner-page block, so adding them would double the site gutter. */ .venue{padding:var(--spacing-section) 0;} .venue + .venue{border-top:1px solid var(--color-hairline,rgba(66,46,46,.3));} /* stretch, not center: the copy column is taller than a 4:3 tile once it carries a paragraph, a capacity table and the mark, and centring left the tile floating in the middle of it — heading and figures spilling past the picture top and bottom. Stretched, the two columns start and finish on the same lines. */ .venue-inner{display:grid;grid-template-columns:1fr 1fr; gap:clamp(28px,4.3vw,66px);align-items:stretch;} /* .flip puts the photograph on the right. An explicit class, not :nth-child(even) — the bands are not the only children of .container, so a positional selector picks the wrong ones and flips a lone band on a page that has just one. */ .venue.flip .venue-media{order:2;} .venue.flip .venue-copy{order:1;} /* height:100% takes the row's height so the tile matches the copy exactly; min-height keeps it a picture rather than a sliver if a venue's copy is ever short. Both dimensions being definite, aspect-ratio steps aside. */ .venue-media{width:100%;height:100%;min-height:clamp(240px,26vw,400px); aspect-ratio:4/3;overflow:hidden; background-size:cover;background-position:center;background-color:var(--cream);} /* no photograph in the library for this venue — the shared missing-picture tile declared with .fac-media.is-solid above */ .venue-copy h2{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(24px,2.083vw,32px);letter-spacing:.02em; text-transform:none;color:var(--ink);} .venue-copy > p{margin-top:var(--gap-head-para); font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--ink);} /* the capacity table: label above figure, four to a row, hairline ruled */ /* The capacity table: label above figure, four to a row. No rule above it — the block is the paragraph's own detail, not a new section, and the hairline read as a divider that was not separating anything. */ .venue-specs{display:grid;grid-template-columns:repeat(4,1fr); gap:var(--sp-md) clamp(14px,1.6vw,24px); margin-top:var(--sp-lg);} .venue-specs div{display:flex;flex-direction:column;gap:4px;} /* The label reserves two lines whether it needs them or not. "U-shape & Cluster" wraps while "Boardroom" does not, and without a shared height the figures in that row sat at three different baselines — the numbers appeared to collide with the labels beside them. */ .venue-specs dt,.venue-specs .sp-label{font-family:'Jost',sans-serif;font-weight:400; font-size:12px;line-height:1.35;min-height:2.7em; letter-spacing:.1em;text-transform:uppercase; color:rgba(78,78,78,.78);} /* the figure is the thing being read, so it carries the weight and the ink: at .62 opacity on a 11px label the two were competing and both were faint */ .venue-specs dd,.venue-specs .sp-value{margin:0;font-family:'Roboto Serif',serif; font-weight:400;font-size:clamp(20px,1.693vw,26px);line-height:1.1; color:var(--sage);} /* the mark follows the capacity table closely — --gap-para-cta is the distance from body COPY to a button, and left a hole under the figures */ .venue-copy .rm-cta{margin-top:var(--sp-md);padding-top:0;} .venue-copy .link-leaf{margin-top:0;} /* ---------- CONTACT: label / value list ---------- Same small uppercase Jost label as .venue-specs, stacked instead of gridded because an address wants a full line. */ /* --sp-lg, not --gap-block: the list is the heading's own detail, so it sits closer to it than a separate block would */ .info-list{margin-top:var(--sp-lg);} /* the rule sits BETWEEN rows only — `div + div`, not every div with a first-child reset, which left a stray hairline hanging under the heading. --sp-sm each side keeps the hairline centred in a 32px gap, half of what --sp-md was spending on three short rows */ .info-list > div + div{margin-top:var(--sp-sm);padding-top:var(--sp-sm); border-top:1px solid var(--color-hairline,rgba(66,46,46,.3));} .info-list .sp-label{display:block;margin-bottom:var(--sp-xs); font-family:'Jost',sans-serif;font-weight:400;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:rgba(78,78,78,.62);} /* the value is body copy in ink; only a real link takes the sage, so a phone number reads as tappable and an address does not pretend to be */ .info-list p{font-size:var(--font-size-body);line-height:var(--line-height-body); color:var(--ink);} .info-list p + p{margin-top:6px;} .info-list a{color:var(--sage);text-decoration:underline; text-decoration-thickness:.5px;text-underline-offset:3px; transition:color .25s ease;} .info-list a:hover{color:var(--green-2);text-decoration-thickness:1px;} .info-list .sep{margin:0 .55em;color:rgba(78,78,78,.4);} /* "Reservations" / "Reception" after a number: a caption, not more body copy */ .info-list .qual{margin-left:.5em; font-family:'Jost',sans-serif;font-weight:400;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:rgba(78,78,78,.62);} /* ---------- enquiry form ---------- */ /* the form's own heading — same serif as .page-head h1 one step down, so the section reads as a sibling of the page title rather than a new style */ /* --spacing-section, not the full 100: the .venue block above already ends on 50px of its own padding, so the two halves meet as one 100px seam. Both pages that carry this heading (Contact Us, Meetings & Events) sit under a .venue, so the sum is the same on each. */ .enquiry-head{margin-top:var(--spacing-section);text-align:center; font-family:'Roboto Serif',serif;font-weight:400; /* #37 — matched to the section h2 scale so 'Join the Team' no longer reads a size smaller than every other heading on the page */ font-size:clamp(26px,2.5vw,38px);letter-spacing:.01em;color:var(--ink);} .enquiry{max-width:640px;margin:var(--gap-block) auto 0;} .enquiry label{display:block;margin-top:var(--sp-md); font-family:'Jost',sans-serif;font-weight:400;font-size:13px; letter-spacing:.06em;color:var(--ink);} .enquiry .req{color:var(--sage);} .enquiry input,.enquiry select,.enquiry textarea{ width:100%;margin-top:8px;padding:13px 15px; border:1px solid var(--color-hairline,rgba(66,46,46,.3)); border-radius:0;background:#fff;color:var(--ink); font-family:'Jost',sans-serif;font-weight:300; font-size:var(--font-size-body);line-height:1.4; transition:border-color .28s ease;} .enquiry textarea{min-height:120px;resize:vertical;} .enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{ outline:none;border-color:var(--sage);} .enquiry .page-cta{margin-top:var(--gap-block);} /* ct-consent-block: the consent tick and the submit status the webform integration adds. The checkbox has to opt out of the full-width field styling above, and the row reads as one line of Jost body copy. */ .enquiry .consent{display:flex;align-items:flex-start;gap:10px; margin-top:var(--sp-md);cursor:pointer; font-family:'Jost',sans-serif;font-weight:300;font-size:13px; line-height:1.5;letter-spacing:0;color:var(--ink);text-transform:none;} .enquiry .consent input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px; margin-top:2px;padding:0;accent-color:var(--sage);cursor:pointer;} /* the CV field's accepted-types note, sized under the input it describes */ .enquiry .field-hint{display:block;margin-top:7px; font-family:'Jost',sans-serif;font-weight:300;font-size:12px; line-height:1.5;letter-spacing:0;color:rgba(78,78,78,.72);} .enquiry [id^="g-recaptcha-"]:empty{display:none;} .enquiry [id$="-status"]{margin-top:var(--sp-sm);padding:12px 15px; font-family:'Jost',sans-serif;font-weight:400;font-size:13px;line-height:1.5;} /* the CV field (Careers): the browser's own file button is a grey system control, so it takes the site's sage-on-cream small caps instead */ .enquiry input[type="file"]{padding:10px 12px;cursor:pointer; font-size:13px;color:rgba(78,78,78,.72);} .enquiry input[type="file"]::file-selector-button{ margin-right:14px;padding:9px 16px;cursor:pointer; border:1px solid var(--sage);background:none;color:var(--sage); font-family:'Jost',sans-serif;font-weight:400;font-size:12px; letter-spacing:.1em;text-transform:uppercase; transition:background-color .28s ease,color .28s ease;} .enquiry input[type="file"]:hover::file-selector-button{ background:var(--sage);color:#fff;} @media (max-width:1024px){ /* the bands stack; the photograph always leads, whichever side it sat on */ .venue-inner{grid-template-columns:1fr;gap:32px;} .venue .venue-media,.venue.flip .venue-media{order:1;} .venue .venue-copy,.venue.flip .venue-copy{order:2;} .venue-specs{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ .venue-specs{grid-template-columns:repeat(2,1fr);} .gal-filter{gap:14px 20px;} } /* ========================================================= LOCATION — the map band and the nearby-attractions list Everything here is the Information Sheet's own data: the GMB link and postal address from section 1, the attractions and their drive times from section 12. No distances are inferred. ========================================================= */ /* The map sits on the content track, framed by the same hairline the cards use so it reads as one of the site's boxes rather than a pasted-in widget. */ .loc-map{margin-top:var(--gap-block);aspect-ratio:1216/520; border:1px solid var(--color-hairline,rgba(66,46,46,.3)); background:var(--cream);overflow:hidden;} .loc-map iframe{display:block;width:100%;height:100%;border:0; /* Google's tile ground is a cold grey; a whisper of warmth settles it into the cream page without making the map hard to read */ filter:sepia(.14) saturate(.94);} /* kept for any page still captioning a map with its postal address; the Location page now closes the map on the Getting Here tiles instead */ .loc-address{margin-top:var(--gap-para-para);text-align:center; font-family:'Jost',sans-serif;font-weight:300; font-size:var(--font-size-body);line-height:var(--line-height-body); color:var(--ink);} /* Nearby attractions as a card track rather than two columns of rows: image, name, note, drive time. Built on the site's own .slider / .slider-track / .slider-rail, so it drags, swipes and takes the same progress rail as the testimonials — no new slider. Three cards in view, `flex-grow` so a short set spreads across the track instead of leaving it half empty. */ .loc-slider{margin-top:var(--gap-block);} .loc-slider .slider-track{display:flex;gap:var(--gap-card); scroll-snap-type:x proximity;} .loc-card{flex:1 0 calc((100% - 2 * var(--gap-card)) / 3); display:flex;flex-direction:column;scroll-snap-align:start; background:#fff;border:1px solid var(--color-hairline,rgba(66,46,46,.18)); transition:border-color .42s ease,box-shadow .42s ease,transform .42s var(--ease,ease);} .loc-card:hover{border-color:rgba(66,46,46,.45);transform:translateY(-4px); box-shadow:0 20px 40px rgba(70,60,45,.13);} /* a card without a picture of its place takes the shared missing-picture tile declared with .fac-media.is-solid above */ .loc-media{aspect-ratio:16/10;} /* where a real photograph of the place exists it replaces the tile — and the leaf goes with it, since the sprig is the stand-in for a missing picture */ .loc-media.has-photo{background-size:cover;background-position:center;} .loc-media.has-photo::after{display:none;} .loc-body{display:flex;flex-direction:column;flex:1; padding:clamp(18px,1.8vw,26px) clamp(16px,1.7vw,24px) clamp(16px,1.6vw,22px);} .loc-name{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(16px,1.302vw,20px);line-height:1.3;color:var(--ink);} .loc-desc{margin-top:var(--sp-sm);font-size:var(--font-size-body); line-height:var(--line-height-body);color:var(--ink);} /* The distance follows the copy directly instead of being pushed to the card's foot by margin-top:auto. Pinning it there aligned the figures across the row, but the cards stretch to a common height, so a card with little or no copy left the marker stranded under a band of empty white — the gap that was flagged. Sitting it under the text keeps the two related. And it reads as a marker now rather than a caption: a filled chip in the pale sage with the deeper green on it, so the figure is the thing the eye lands on. */ .loc-time{align-self:flex-start;margin-top:var(--sp-sm); padding:6px 11px;border-radius:3px; background:var(--sage-pale);color:var(--green-2); font-family:'Jost',sans-serif;font-weight:500; font-size:clamp(11px,.9vw,13px);letter-spacing:.1em; text-transform:uppercase;white-space:nowrap;} .loc-time:empty{display:none;} @media (max-width:1024px){ .loc-map{aspect-ratio:16/9;} /* two cards in view on tablet */ .loc-card{flex-basis:calc((100% - var(--gap-card)) / 2);} } @media (max-width:640px){ .loc-map{aspect-ratio:4/3;} /* one card, with the next one just showing so the track reads as swipeable */ .loc-card{flex-basis:min(78vw,340px);} } /* ---------- experiences ---------- Cards carry a heading and a paragraph only: there are no inner pages for experiences, so there is no CTA and nothing is clickable. .is-static therefore drops the hover lift, which would otherwise promise a link. */ /* .rm-media.is-solid takes the shared missing-picture tile (see .fac-media) */ .rm-card.is-static:hover{transform:none;box-shadow:none; border-color:rgba(66,46,46,.18);} /* ---------- offers ---------- The terms sit under the post copy as a hairline-separated list: three short label/value pairs read better as a table than as a sentence. */ /* .post-figure.is-solid takes the shared missing-picture tile (see .fac-media) */ .offer-terms{max-width:520px;margin:var(--gap-block) auto 0;text-align:left;} .offer-terms > div{display:flex;justify-content:space-between;gap:24px; padding:14px 2px;border-bottom:1px solid rgba(66,46,46,.16);} .offer-terms dt{font-family:'Jost',sans-serif;font-weight:400;font-size:13px; letter-spacing:.1em;text-transform:uppercase;color:rgba(78,78,78,.62);} .offer-terms dd{margin:0;font-size:var(--font-size-body);font-weight:300; color:var(--ink);text-align:right;} /* ========================================================= BACK TO TOP Injected by site.js, so it never renders as a dead control when scripting is off. Sits clear of the footer's corner. ========================================================= */ .to-top{position:fixed;right:var(--edge-rail);bottom:var(--edge-rail); z-index:60;width:clamp(42px,3.4vw,52px);aspect-ratio:1;border-radius:50%; border:0;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; background:var(--footer-green);color:#fff; box-shadow:0 8px 22px rgba(20,40,28,.28); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1), visibility .32s,background .32s ease;} .to-top.is-on{opacity:1;visibility:visible;transform:none;} .to-top:hover,.to-top:focus-visible{background:var(--green);transform:translateY(-3px);} /* Over the footer the button was footer-green on footer-green and disappeared. There it flips to the medallion's pale sage face with the green arrow — the same light treatment the BOOK NOW dome carries. */ .to-top.on-footer{background:var(--sage-pale);color:var(--footer-green); box-shadow:0 8px 22px rgba(0,0,0,.28);} .to-top.on-footer:hover,.to-top.on-footer:focus-visible{background:#fff;color:var(--green);} .to-top svg{width:42%;height:42%;display:block;} @media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .32s ease,visibility .32s;} .to-top:hover,.to-top:focus-visible{transform:none;} } /* ========================================================= GALLERY STRIP — continuous marquee, homepage ========================================================= */ /* No padding on top: the Meetings band above already carries 100px of bottom margin, so the section's own inset was stacking on it. Underneath, the full 100px sits here rather than being shared — .reviews below deliberately has no top padding of its own, so this band owns the whole gap to the heading. */ .galstrip{padding:0 0 var(--spacing-section-full);background:var(--page);overflow:hidden;} .galstrip h2{text-align:center;font-size:clamp(28px,2.734vw,42px); color:var(--ink);text-transform:none;font-family:'Roboto Serif',serif;} .galstrip-viewport{margin-top:var(--gap-block);overflow:hidden;} /* The gap is carried as margin ON each photograph rather than as `gap` on the track. That matters: it makes every item occupy exactly width+margin, so the eight-item set has a width that is exactly half the sixteen-item track — and translating -50% lands the second pass precisely where the first began. With `gap` the track would be 15 gaps wide, not 16, and the loop would jump. */ .galstrip-track{display:flex;align-items:center;width:max-content; animation:galstrip-run 52s linear infinite;will-change:transform;} @keyframes galstrip-run{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* let a visitor stop it to look at something */ .galstrip:hover .galstrip-track, .galstrip:focus-within .galstrip-track{animation-play-state:paused;} /* Measured off the reference: every photograph is the SAME width (331px on its 1919 canvas, with a 32px gutter) and only the HEIGHT alternates — 370px then 248px — with the short ones sitting centred against the tall ones and nudged a touch low. Two heights, not four, and one width throughout: that even column rhythm is what makes the strip read as a deliberate row rather than a scatter, which is where my first pass went wrong. */ .galshot{flex:none;width:clamp(210px,20.7vw,331px);margin-right:clamp(16px,2vw,32px); background-size:cover;background-position:center;background-color:var(--cream);} .galshot:nth-child(odd){height:clamp(235px,23.1vw,370px);} .galshot:nth-child(even){height:clamp(158px,15.5vw,248px); /* the short frames sit ~16px below the tall ones' centre line, not on it */ transform:translateY(clamp(6px,1vw,16px));} @media (max-width:768px){ .galstrip-track{animation-duration:38s;} .galshot{width:200px;margin-right:14px;} .galshot:nth-child(odd){height:224px;} .galshot:nth-child(even){height:150px;transform:translateY(6px);} } @media (prefers-reduced-motion:reduce){ /* no travel at all — the strip becomes a still row the visitor can scroll */ .galstrip-track{animation:none;} .galstrip-viewport{overflow-x:auto;} } /* ========================================================= MOBILE-ONLY ADJUSTMENTS (desktop is untouched) ========================================================= */ @media (max-width:768px){ /* 1. the booking form is a five-column desktop control; on a phone it stacked into a tall column that pushed the hero off screen, so it comes out entirely. Guests book from the BOOK NOW dome instead. */ .hero .booking{display:none;} /* 2. the hero covers 70% of the phone screen rather than the full height. svh tracks the visible viewport, so the browser chrome collapsing does not change the banner's height mid-scroll. */ .hero{min-height:70vh;min-height:70svh;} /* 3. slider rail: the progress bar goes, leaving the arrows and the counter, centred. The bar is a fine desktop affordance but at phone width it is a hairline with nowhere to travel. */ .slider-rail .rail{display:none;} .slider-rail{justify-content:center;} .rail-nav{gap:22px;} /* 4. the BOOK NOW medallion is fixed near the top on desktop, which lands it on the page heading at phone width. It moves to the bottom-left corner and shrinks. Bottom-LEFT, because the back-to-top button already holds the bottom-right; the two must not stack on each other. transform-origin moves to the bottom-left so the shrink pulls it into the corner rather than leaving a gap. */ .hero-booknow{--bn-s:.62; top:auto;left:auto; right:16px;bottom:70px; transform-origin:100% 100%;} /* the back-to-top button sits directly below the medallion, so their centres share one vertical line: the medallion's face centre is 54px in from its 110px box's right edge, scaled by .62, from 16px; the button is 42px wide */ .to-top{right:calc(16px + 54px * .62 - 21px);} } /* ========================================================= MOBILE ONLY (<=768px) — gutters and the menu overlay Nothing in here touches desktop or tablet: every rule is inside the query. ========================================================= */ @media (max-width:768px){ /* ---- ONE gutter, 20px, on every section of every page ---- The inline padding had drifted: 24px on .container and most bands, 20px on the nav and booking bar, 16px on the breadcrumb and the room switcher, so content on consecutive sections started at three different left edges as you scrolled. The token drives everything that owns a gutter, and the hard-coded ones below are pulled onto it. */ :root{--padding-inline:20px;} .container, .crumb, .rm-switch, .rm-nav-inner, .nav, .booking-inner, .rc-row, .room-row, .arch-copy, .nearby-inner, .events-inner, .dining-stage, .safari-stage, .footer-body{ padding-left:var(--padding-inline); padding-right:var(--padding-inline); } /* ---- the menu covers the whole screen ---- The overlay is a 50/50 split of photograph and panel. That works on a wide screen; on a phone it left the menu itself in half a viewport — a narrow column of links beside a sliver of picture. On mobile the photograph goes and the panel takes the full width. */ .nav-overlay{grid-template-columns:1fr;} .nav-overlay-photo{display:none;} /* the rest of the phone menu (spacing, type, centring) lives at the very end of this file — the tablet block below sets the same properties, and being later it would otherwise win on a phone */ } /* ========================================================= NAV: full menu in the overlay from tablet down The top bar only fits its seven links on a wide desktop. From 1024px down it collapses to the hamburger, so the overlay has to carry the whole menu rather than just the five extras. The .is-primary seven used to be hidden above 1024 so the desktop overlay kept only the five extras — but that made the menu a partial list of the site, which is not what a menu is for. Every page now shows in it at every width, whether or not it also sits in the top bar. */ /* the eight top-bar links fit down to ~940px, so the bar stays up at 1024 — where a 1536px laptop at 150% scaling lands */ @media (max-width:939px){ .nav-links{display:none;} } @media (max-width:1024px){ /* twelve items instead of five: tighten the rhythm and let the panel scroll on short screens rather than clipping the last link */ .nav-overlay-links{gap:clamp(8px,1.6vw,14px);} .nav-overlay-links a{font-size:clamp(19px,3.4vw,26px);} .nav-overlay-panel{justify-content:flex-start;overflow-y:auto; padding-top:clamp(28px,5vw,48px);padding-bottom:clamp(28px,5vw,48px);} .nav-overlay-crest{width:clamp(70px,12vw,96px); margin-bottom:clamp(14px,2.4vw,24px);} } /* ---------- footer: centred once the columns stack ---------- At 768 and below .footer-cols collapses to a single column, so the three blocks read better centred than ragged-left. The nav and sitemap rows already centre themselves. Desktop keeps its three-column alignment. */ @media (max-width:768px){ .footer-col{text-align:center;} .ftext{max-width:none;margin-inline:auto;} .socials{max-width:none;justify-content:center;} } /* ---------- mobile corrections ---------- */ @media (max-width:768px){ /* footer-col was justify-self:start from the 1024 rule, which makes a grid item shrink to its content — the column measured 240px inside a 342px container, so centring the text inside it still looked left-hung. Stretching the column is what actually centres the block. */ .footer-col{justify-self:stretch;} /* the rooms track is a scroll container; padding-left is the resting offset of the first card, so it reads as a 20px gutter on the left edge */ .roomcards .rc-row{padding-left:20px;} /* the rail's progress bar is hidden here, leaving only the arrows and the counter — centre them under the track */ .slider-rail{justify-content:center;} .roomcards .slider-rail{margin-left:0;margin-right:0;} } /* ---------- mobile corrections, round two ---------- */ @media (max-width:768px){ /* .footer-col:nth-child(2),(3) set justify-self:start at 1024 — a two-class selector, so a bare .footer-col could not override it and the column kept shrinking to its content. Matching that specificity is what fixes it. */ .footer-col:nth-child(2), .footer-col:nth-child(3){justify-self:stretch;} /* 20px resting gutter on the left of both horizontal card tracks. These are scroll containers, so padding-left is where the first card comes to rest. */ .roomcards .rc-row, .rooms .room-row{padding-left:20px;} /* the offers rail is absolutely positioned at left/right 7.03%, which put its arrows well right of centre once the progress bar was hidden */ .offer-rail{left:0;right:0;justify-content:center;} } /* ---------- mobile corrections, round three ---------- */ @media (max-width:768px){ /* The 20px padding was applied, but scroll-snap parks the first card's start edge on the container's snapport start, which ignores padding — the track came to rest at scrollLeft:20 and ate the gutter. scroll-padding moves the snapport in by the same amount so the gutter survives the snap. */ .roomcards .rc-row, .rooms .room-row{scroll-padding-left:20px;} /* the overlay carries twelve items now; the crest needs room under it so the first link does not sit on the wordmark */ .nav-overlay-crest{margin-bottom:clamp(26px,6vw,40px);} .nav-overlay-links{padding-top:4px;} } /* ---- EXPERIENCES arch: the chips scatter around it below 1024 ---- .arch-figure is display:contents above that, so the desktop p1..p8 pills keep positioning against .arch-stage exactly as before. */ .arch-figure{display:contents;} /* Runs from 1024 down, not 768 down. The eight desktop chips switch off at 1024, so every width under it needs the five-chip scatter — cut off at 768 this left a 769..1024 band with no activity names on the arch at all. */ @media (max-width:1024px){ /* a real box here, and taller than the arch itself: the chips sit above its shoulders as well as beside them, so the box needs headroom. The headroom tracks the width so the chips hold the same positions on the arch at every size — 78px is what 11vw resolves to on a phone, where it was measured. */ .arch-figure{display:block;position:relative;padding-top:clamp(78px,11vw,132px);} .arch-stage > .pill{display:none;} /* the eight desktop chips stay off */ .pill-list{display:block;position:static;margin:0;} .pill-list .pill{position:absolute;display:inline-flex; min-width:0;white-space:nowrap;font-size:clamp(13px,1.6vw,16px); padding:clamp(9px,1vw,11px) clamp(14px,1.55vw,17px);border-radius:8px; background:rgba(220,229,222,.82);border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 4px 14px rgba(60,50,35,.10);} /* placed off the arch's shoulders, alternating side to side down the shape */ .pill-list .pill:nth-child(1){left:4%;top:26%;} .pill-list .pill:nth-child(2){right:4%;top:6%;} .pill-list .pill:nth-child(3){right:3%;top:50%;} .pill-list .pill:nth-child(4){left:3%;top:66%;} .pill-list .pill:nth-child(5){left:50%;top:88%;transform:translateX(-50%);} } /* Turning .arch-figure into a real box makes it the flex item, not .arch-img, so the order:4 the 1024 block puts on the image no longer places anything. On a phone the figure's default order:0 leads the stack and that is how the band already reads, so it is left alone; on a tablet the stack reads copy → dome → arch, and the figure has to carry that 4 itself to keep it. */ @media (min-width:769px) and (max-width:1024px){ .arch-figure{order:4;} } /* ---- OFFERS slide on mobile: room to breathe ---- The copy is absolutely centred in the band and the rail is pinned to its bottom. On a phone that left the heading hard against the left inset with the dome and the rail crowding it from below, all inside one cramped column. */ @media (max-width:768px){ .offers{min-height:clamp(430px,86vw,540px);} .offer-inner{ /* the same 20px gutter every other section uses, not a 7% of 390 = 27px */ left:var(--padding-inline);right:var(--padding-inline); max-width:none;text-align:center; /* sit above centre so the CTA and the rail below are never crowded */ top:46%;} .offers h2{font-size:clamp(22px,6.4vw,28px);line-height:1.25;} .offer-copy{margin-top:var(--sp-md);font-size:14px;line-height:1.75;} .offer-cta{margin-top:var(--sp-lg);} /* the CTA pair is a flex row, which text-align above doesn't reach — without this the dome and Know More sat on the left under centred copy */ .offer-ctas{justify-content:center;} /* clear of the copy above it, and on the page's own gutter */ .offer-rail{left:var(--padding-inline);right:var(--padding-inline); bottom:clamp(14px,3.4vw,22px);} } /* ========================================================= CARD LINKS — the photograph and the heading go to the page The Discover / View offer / Know More mark was the only way into a detail page; the picture and the title are the two things people actually click, so they carry the same href now. They are anchors rather than a wrapper around the whole card, because the card already contains its own link and nesting one inside another is invalid. ========================================================= */ .rc-card .rc-img, .rm-card .rm-media, .venue-media{display:block;} /* the heading keeps its own colour and weight — it should read as a heading that happens to be clickable, not as a link */ .rc-name a, .rm-name a, .venue-copy h2 a{color:inherit;text-decoration:none; text-underline-offset:5px;text-decoration-thickness:1px; transition:text-decoration-color .25s ease;} /* Hover draws an underline and NOTHING else — the colour does not move. The card-level rule below also has to be neutralised: hovering anywhere on the card was tinting the heading green, which is the colour shift being removed here. */ .rc-card:hover .rc-name, .rm-card:hover .rm-name{color:var(--ink);} .rc-name a:hover,.rc-name a:focus-visible, .rm-name a:hover,.rm-name a:focus-visible, .venue-copy h2 a:hover,.venue-copy h2 a:focus-visible{ color:inherit;text-decoration:underline;} /* a visible focus ring for keyboard users on the photograph, which has no text */ .rc-card .rc-img:focus-visible, .rm-card .rm-media:focus-visible, .venue-media:focus-visible{outline:2px solid var(--sage);outline-offset:3px;} /* ========================================================= ARCH PILLS — photograph on hover Each chip carries its own shot. It is hidden until hover, then fades and lifts in slightly rotated, like a print dropped on the page. Placement is per chip so nothing is clipped by .arch-stage's overflow:hidden — the two lowest chips open UPWARD, the rest downward, and each anchors to the side of the arch it already sits on. ========================================================= */ .pill{overflow:visible;} .pill-shot{ position:absolute;z-index:6;pointer-events:none; width:clamp(150px,13.6vw,208px);aspect-ratio:4/3; background-size:cover;background-position:center; background-color:var(--cream); border:5px solid #fff; box-shadow:0 14px 30px rgba(40,60,45,.26); opacity:0;visibility:hidden; transform:rotate(var(--tilt,-7deg)) scale(.9) translateY(6px); transform-origin:50% 0; transition:opacity .38s ease,transform .46s cubic-bezier(.2,.7,.3,1),visibility .38s; } .pill:hover .pill-shot, .pill:focus-visible .pill-shot{ opacity:1;visibility:visible; transform:rotate(var(--tilt,-7deg)) scale(1) translateY(0); } /* the chip itself lifts a touch so the pair reads as one gesture */ .pill{transition:transform .38s cubic-bezier(.2,.7,.3,1),background .38s ease;} .pill:hover{transform:translateY(-2px);} /* chips on the left of the arch hang their shot from their left edge, chips on the right from their right edge */ .p1 .pill-shot,.p4 .pill-shot,.p6 .pill-shot{left:0;top:calc(100% + 12px);} .p2 .pill-shot,.p3 .pill-shot,.p5 .pill-shot{right:0;top:calc(100% + 12px);} /* p7 and p8 sit low on the arch — theirs open upward or they would be clipped */ .p7 .pill-shot{right:0;bottom:calc(100% + 12px);transform-origin:50% 100%;} .p8 .pill-shot{left:0;bottom:calc(100% + 12px);transform-origin:50% 100%;} /* a different lean for each, so no two look stamped from the same die */ .p1 .pill-shot{--tilt:-7deg;} .p2 .pill-shot{--tilt:6deg;} .p3 .pill-shot{--tilt:-5deg;} .p4 .pill-shot{--tilt:8deg;} .p5 .pill-shot{--tilt:-6deg;} .p6 .pill-shot{--tilt:7deg;} .p7 .pill-shot{--tilt:-8deg;} .p8 .pill-shot{--tilt:5deg;} @media (prefers-reduced-motion:reduce){ .pill-shot{transition:opacity .38s ease,visibility .38s; transform:rotate(var(--tilt,-7deg));} .pill:hover .pill-shot{transform:rotate(var(--tilt,-7deg));} .pill:hover{transform:none;} } /* touch has no hover: the mobile chip list never shows these */ @media (max-width:768px){ .pill-shot{display:none;} } /* ...so on phones each chip carries its photo as a small round thumbnail, always visible. Chips with no photograph yet show a plain sage dot. */ .pill-thumb{display:none;} @media (max-width:768px){ .pill-list .pill{gap:7px;padding-top:6px;padding-bottom:6px;padding-left:6px;} .pill-thumb{display:block;flex:0 0 auto;width:24px;height:24px;border-radius:50%; background-size:cover;background-position:center;background-color:var(--sage-tile); border:2px solid #fff;box-shadow:0 1px 4px rgba(40,60,45,.18);} } /* ---------- nav links centred on the page ---------- margin-left:auto pushed the links to the right. Centring them between the logo and the burger would NOT be page-centre, because those two differ in width (~106px vs ~38px). Absolute centring against .nav — which spans the full width and is already position:relative — puts them on the true centre. Only applies where the links are visible; they collapse into the overlay at 939 and below. */ @media (min-width:940px){ .nav-links{position:absolute;left:50%;transform:translateX(-50%); margin-left:0;margin-right:0; /* absolute + left:50% caps the shrink-to-fit width at half the bar, which wrapped the eight links onto two rows; size to the row instead */ width:max-content;flex-wrap:nowrap;} } /* ---------- sub-nav rail centred ---------- Shared by the room, dining and offer detail pages. NOT justify-content:center — this rail is overflow-x:auto, and centring a scroll container's content makes the overflowing start unreachable (scrollLeft cannot go below 0, so the first item is cut off for good). Auto margins on the end items absorb the free space when the row fits and collapse to 0 when it does not, so it centres when it can and stays fully scrollable when it cannot. */ .rm-nav-inner > :first-child{margin-left:auto;} .rm-nav-inner > :last-child{margin-right:auto;} /* ========================================================= GALLERY — tile hover + the image viewer ========================================================= */ /* The tiles are buttons now, so the browser default chrome has to go */ .ag-cell{position:relative;border:0;padding:0;cursor:pointer; display:block;background-color:var(--sage-tile); background-size:cover;background-position:center;overflow:hidden; transition:transform .5s cubic-bezier(.22,.7,.25,1);} /* the green wash — the site's own sage rather than a neutral black scrim, so the hover belongs to the palette */ .ag-cell::after{content:"";position:absolute;inset:0; background:rgba(47,79,58,.62); opacity:0;transition:opacity .35s ease;pointer-events:none;} /* an expand mark in the middle: this opens a viewer, so it says "bigger" rather than "link". Drawn in CSS — two corner brackets and the arrows — so there is no icon file to load for 36 tiles. */ .ag-cell::before{content:"";position:absolute;left:50%;top:50%;z-index:1; width:46px;height:46px;margin:-23px 0 0 -23px; border:1px solid rgba(255,255,255,.9);border-radius:50%; background:var(--fx-expand) no-repeat center/18px 18px; opacity:0;transform:scale(.82); transition:opacity .35s ease,transform .45s cubic-bezier(.22,.7,.25,1); pointer-events:none;} .ag-cell:hover::after,.ag-cell:focus-visible::after{opacity:1;} .ag-cell:hover::before,.ag-cell:focus-visible::before{opacity:1;transform:scale(1);} .ag-cell:focus-visible{outline:2px solid var(--sage);outline-offset:3px;} /* ---------- the viewer ---------- */ .lb[hidden]{display:none;} .lb{position:fixed;inset:0;z-index:90;display:flex; align-items:center;justify-content:center;padding:clamp(14px,3vw,40px);} .lb-backdrop{position:absolute;inset:0;background:rgba(12,26,18,.88); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);} .lb-panel{position:relative;z-index:1;width:min(1100px,100%); display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);} /* title centred over the picture; the close button is taken out of the flow and pinned right, with matching side padding on the title so a long caption never runs under it */ .lb-bar{position:relative;display:flex;align-items:center;justify-content:center;min-height:42px;} .lb-title{font-family:'Roboto Serif',serif;font-weight:400; font-size:clamp(15px,1.4vw,20px);color:#fff;margin:0; text-align:center;padding:0 56px;} .lb-close{position:absolute;right:0;top:50%;margin-top:-21px;flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.38); border-radius:50%;background:none;color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .25s ease,transform .25s ease;} .lb-close:hover,.lb-close:focus-visible{background:rgba(255,255,255,.14);transform:rotate(90deg);} .lb-close svg{width:18px;height:18px;} /* the picture is never cropped and never taller than the screen */ .lb-stage{position:relative;display:flex;align-items:center;justify-content:center;} .lb-img{display:block;max-width:100%;max-height:calc(100vh - clamp(150px,18vh,230px)); object-fit:contain;background:var(--sage-tile);} .lb-arrow{position:absolute;top:50%;transform:translateY(-50%); width:clamp(40px,3.6vw,52px);aspect-ratio:1;border-radius:50%; border:1px solid rgba(255,255,255,.38);background:rgba(12,26,18,.42); color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .25s ease;} .lb-arrow:hover,.lb-arrow:focus-visible{background:rgba(12,26,18,.8);} .lb-arrow svg{width:22px;height:22px;} .lb-arrow.prev{left:clamp(-6px,-1vw,10px);} .lb-arrow.next{right:clamp(-6px,-1vw,10px);} .lb-count{margin:0;text-align:center;color:rgba(255,255,255,.75); font-family:'Jost',sans-serif;font-weight:300;font-size:13px;letter-spacing:.12em;} body.lb-open{overflow:hidden;} @media (max-width:768px){ .lb-arrow.prev{left:4px;} .lb-arrow.next{right:4px;} .lb-title{font-size:14px;} } @media (prefers-reduced-motion:reduce){ .ag-cell,.ag-cell::before,.ag-cell::after,.lb-close{transition-duration:.01ms;} } /* ---------- header crest: cross-fade instead of a display swap ---------- The two crests used to toggle with display:none/block. display cannot be transitioned, so the white crest vanished and the gold one appeared already at its smaller size — the "sudden" jump. Now both are stacked and always rendered, the gold one riding on top, and the pair cross-fades while the shared width transition runs. The width easing was already there; it simply had nothing continuous to animate. */ .nav-brand{position:relative;} .nav-logo{transition:width .34s cubic-bezier(.2,.7,.3,1), opacity .34s ease;} /* the gold crest sits exactly over the white one and starts hidden */ .nav-logo.gold{position:absolute;left:0;top:0;opacity:0; width:inherit;pointer-events:none;} /* .nav-brand is the flex item, so its box must not collapse when the gold crest leaves the flow */ .nav-brand{flex:none;} /* Inner pages are permanently in the solid state — there is no transition to play, and leaving one on made the crest fade in on every page load. */ .no-banner .nav-logo{transition:none;} /* ---------- stacked page sections ---------- .page-section carries 100px on top so the FIRST one clears the breadcrumb. When two of them stack (career, location, gallery) that 100 meets the previous section's 50 and the seam comes to 150. Any .page-section that follows another section only needs its half, bringing the seam back to the 100 every other pair on the site uses. */ section + .page-section{padding-top:var(--spacing-section);} /* ========================================================= CONTACT — detail block, redesigned Was: a stacked label over each value, groups divided by hairlines, and every email/phone underlined at rest. The rules chopped a short block into three, and the underlines made it read as raw markup rather than type. Now: one aligned label/value table, no rules, links plain until hover. Only contact-us uses .info-list, so the dining and events venues are untouched. ========================================================= */ /* the copy column matches the photograph's height and centres within it, instead of the two columns floating at different heights */ .venue-inner:has(.info-list){align-items:stretch;} .venue-copy:has(.info-list){display:flex;flex-direction:column;justify-content:center;} .info-list{margin-top:var(--gap-head-para);} /* label in a fixed first column, values in the second — the label spans every row of its group, so multiple emails or numbers align under one heading */ .info-list > div{display:grid; grid-template-columns:clamp(78px,6.6vw,96px) 1fr; column-gap:clamp(14px,1.4vw,22px);} .info-list > div + div{margin-top:var(--sp-lg);padding-top:0;border-top:0;} .info-list .sp-label{grid-column:1;grid-row:1 / -1; display:block;margin-bottom:0;padding-top:.28em; font-family:'Jost',sans-serif;font-weight:400;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:rgba(78,78,78,.55);} .info-list p{grid-column:2; font-size:var(--font-size-body);line-height:1.65;color:var(--ink);} .info-list p + p{margin-top:4px;} /* plain until hover — an underline at rest on six lines in a row was the single biggest source of visual noise here */ .info-list a{color:var(--sage);text-decoration:underline;text-decoration-color:rgba(83,115,94,.4);text-underline-offset:3px;text-decoration-thickness:1px; text-underline-offset:4px;text-decoration-thickness:1px; transition:color .25s ease;} .info-list a:hover,.info-list a:focus-visible{color:var(--sage);text-decoration:underline;} /* Map sits after the address as a quiet secondary link */ .info-list .sep{display:none;} .info-list p > a[target="_blank"]{margin-left:.7em;font-size:13px;color:var(--sage);} /* the qualifier trails its number, clearly subordinate to it */ .info-list .qual{margin-left:.7em; font-family:'Jost',sans-serif;font-weight:400;font-size:10.5px; letter-spacing:.11em;text-transform:uppercase;color:rgba(78,78,78,.5);} @media (max-width:640px){ /* stacked again on a phone: a 78px label column eats the value's width */ .info-list > div{grid-template-columns:1fr;} .info-list .sp-label{grid-row:auto;margin-bottom:var(--sp-xs);padding-top:0;} .info-list p{grid-column:1;} .info-list > div + div{margin-top:var(--sp-md);} } /* ---------- the form's action row ---------- The submit was a .page-cta, which is spaced for a section-ending CTA: ~70px of air below the last field and nothing tying it to the form. It read as a button that had drifted in. Seated on its own row with a hairline above — the same hairline the fields use — it closes the form instead. Scoped to .enquiry so section CTAs elsewhere keep their generous spacing. */ /* ---------- contact detail: legibility pass ---------- The labels, the Map link and the phone qualifiers were set at 10.5–13px on 0.5–0.55 alpha. Small AND faint at once is what made them unreadable — either alone is fine, both together is not. They come up in size and in contrast here, and the qualifier drops to its own line so it stops colliding with the end of the number. */ .info-list .sp-label{ font-size:13px;font-weight:500;letter-spacing:.09em; color:rgba(78,78,78,.85);padding-top:.15em;} .info-list p{font-size:clamp(15px,1.09vw,17px);line-height:1.7;} /* the qualifier is a line of its own under its number, not a tail on it */ .info-list .qual{display:block;margin:2px 0 0; font-size:12px;letter-spacing:.09em; color:rgba(78,78,78,.72);} .info-list p + p{margin-top:14px;} /* Map reads as a link now: same size as the address, underlined, with real space after the postcode instead of butting against it */ .info-list p > a[target="_blank"]{ display:inline-block;margin-left:0;margin-top:6px; font-size:14px;color:var(--sage); text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px;} /* the block's own heading was 32px against a 48px H1 with 13px labels under it — the middle step of the hierarchy was doing no work. */ .venue-copy:has(.info-list) h2{font-size:clamp(26px,2.7vw,40px);} .venue-copy:has(.info-list) .info-list{margin-top:var(--gap-block);} /* ---------- contact detail: stacked card (supersedes the two-column table) ---------- The label/value table put ~150px of dead air between a label and its value and spread three short groups down 300px, so the block read as scattered fragments rather than one card. Labels go back above their values, each group a tight unit, groups separated by one clear step. Qualifiers and Map return inline after a middot — they are asides, not rows of their own. ========================================================= */ .info-list > div{display:block;} .info-list > div + div{margin-top:26px;} .info-list .sp-label{ display:block;grid-column:auto;grid-row:auto; margin:0 0 7px;padding-top:0; font-family:'Jost',sans-serif;font-weight:500;font-size:12px; letter-spacing:.11em;text-transform:uppercase; color:rgba(78,78,78,.7);} .info-list p{grid-column:auto; margin:0;font-size:16px;line-height:1.62;color:var(--ink);} .info-list p + p{margin-top:5px;} /* asides sit on the same line as what they qualify */ .info-list .qual{display:inline;margin:0; font-family:'Jost',sans-serif;font-weight:400;font-size:13px; letter-spacing:.04em;text-transform:none;color:rgba(78,78,78,.62);} .info-list .qual::before{content:"·";margin:0 .5em;color:rgba(78,78,78,.38);} .info-list .sep{display:inline;margin:0 .5em;color:rgba(78,78,78,.38);} /* Map already carried the breadcrumb's --sage and its underline; what made it read as a footnote rather than a link was the 15px against the 16px address beside it. It sits on the body size now, so it has the same presence as the breadcrumb links do. */ .info-list p > a[target="_blank"]{ display:inline;margin:0;font-size:16px;color:var(--sage); text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;} .info-list p > a[target="_blank"]:hover, .info-list p > a[target="_blank"]:focus-visible{color:var(--green-2);} .info-list a{color:var(--sage);text-decoration:underline;text-decoration-color:rgba(83,115,94,.4);text-underline-offset:3px;text-decoration-thickness:1px;} .info-list a:hover,.info-list a:focus-visible{color:var(--sage);text-decoration:underline; text-underline-offset:3px;} @media (max-width:640px){ .info-list > div + div{margin-top:22px;} } /* ---------- contact detail: balanced across the column ---------- Stacked in one narrow column, three short groups left ~430px of the copy column empty to their right while the H2 spanned the full width — the block read as hugging the left edge of a half-page column. Address takes the full width (it is the widest line anyway), then Email and Phone sit side by side beneath it, so the block fills the column and balances against the photograph. */ .info-list{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,2.8vw,44px); row-gap:28px;} .info-list > div{display:block;} .info-list > div:first-child{grid-column:1 / -1;} .info-list > div + div{margin-top:0;} @media (max-width:900px){ /* one column again before the pair gets too narrow to hold an email address */ .info-list{grid-template-columns:1fr;row-gap:22px;} .info-list > div:first-child{grid-column:auto;} } /* ---------- contact detail: a panel, not loose text ---------- Three passes of spacing and type could not fix the real problem: the block was unbounded text sitting next to a bounded photograph, so it read as floating no matter how it was set. It becomes a card of its own — white on the cream ground, the same card/ground relationship the room and amenity tiles use — matched to the photograph's height, with the name as its header above a rule. ========================================================= */ .venue-copy:has(.info-list){ background:#fff; border:1px solid rgba(66,46,46,.16); padding:clamp(26px,2.8vw,42px); justify-content:center;} /* the name is the card's header, separated from the detail by the same hairline as the border */ .venue-copy:has(.info-list) h2{ font-size:clamp(23px,2.05vw,31px); padding-bottom:clamp(18px,1.8vw,26px); border-bottom:1px solid rgba(66,46,46,.16);} .venue-copy:has(.info-list) .info-list{ margin-top:clamp(20px,2.1vw,30px);} @media (max-width:900px){ .venue-copy:has(.info-list){padding:clamp(22px,4vw,30px);} } /* the form's submit sits close to the last field — .page-cta's default ~70px is spacing for a section-ending CTA, not for a form's own button. No rule above it; just less air. */ .enquiry .page-cta{margin-top:var(--sp-lg);} /* ---------- contact card: single column ---------- The Email|Phone pair only had ~210px per column inside the card, and "+91 92694 44888 · Reservations" needs ~230 — so every phone number broke mid-digit. Two columns do not fit here, and a wrapped phone number is worse than a taller block. The card already gives the block its edges, which is what the side-by-side layout was compensating for. ========================================================= */ .info-list{grid-template-columns:1fr;row-gap:0;} .info-list > div:first-child{grid-column:auto;} .info-list > div + div{margin-top:24px;} /* a telephone number must never break across lines */ .info-list a[href^="tel:"]{white-space:nowrap;} /* ---------- footer nav: tighter ---------- */ .footer-nav{margin-top:clamp(22px,2.4vw,34px); padding-top:clamp(16px,1.6vw,22px); row-gap:clamp(6px,.5vw,8px);} .footer-sitemap{margin-top:clamp(22px,2.4vw,34px); /* the same hairline that sits above the quick links, so the closing row (copyright, sitemap, credit) reads as its own band on every device */ padding-top:clamp(16px,1.6vw,22px);border-top:1px solid rgba(255,255,255,.16);} /* ========================================================= PHONE MENU — last in the file on purpose The tablet block (max-width:1024px) sets the same properties and also matches at 390px. Equal specificity means the later rule wins, so these have to sit after it or a phone silently gets the tablet's 8px gap and flex-start — which is exactly what it was doing. ========================================================= */ @media (max-width:768px){ /* Centred rather than pinned to the top. The tablet values were written for twelve items on a short landscape screen; with eleven on a phone they left the list bunched under the crest above a third of an empty panel. `safe center` centres while the list fits and falls back to the top when it does not, so a short screen scrolls to the last link instead of clipping the first. */ .nav-overlay-panel{justify-content:safe center; padding:40px var(--padding-inline);} /* the gap keys off screen HEIGHT — what actually decides whether eleven links have room — rather than width */ .nav-overlay-links{gap:clamp(13px,2.3vh,22px);} .nav-overlay-links a{font-size:clamp(20px,5.4vw,25px);} .nav-overlay-crest{width:clamp(76px,21vw,100px); margin-bottom:clamp(20px,3.4vh,32px);} } /* ---------- venue specs: legibility ---------- Two faults. The labels were 12px/400 at 0.78 alpha — small and low contrast at once, the same combination that made the contact labels unreadable. And min-height:2.7em reserved two lines for EVERY label so the values would line up across the four columns, which left one-word labels like "Capacity" floating with a gap under them, detached from their number. The reserved height stays (it is what keeps the row aligned) but the label now sits at the BOTTOM of it, directly above its value. */ .venue-specs dt,.venue-specs .sp-label{ display:flex;align-items:flex-end; min-height:2.4em; font-size:13px;font-weight:500;letter-spacing:.07em; color:rgba(78,78,78,.92);} .venue-specs div{gap:7px;} /* ========================================================= HERO VIDEO CONTROLS (Content QC #176) A small pause/play + sound pair over the banner rather than the browser's own control bar, which would lay a full-width strip across the composition. ========================================================= */ .hero-vid-ctrl{position:absolute;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px); z-index:6;display:flex;gap:10px;} .hv-btn{width:40px;height:40px;display:grid;place-items:center;cursor:pointer; border:1px solid rgba(255,255,255,.55);border-radius:50%; background:rgba(28,56,38,.42);color:#fff;padding:0; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); transition:background .3s ease,border-color .3s ease;} .hv-btn:hover{background:rgba(28,56,38,.72);border-color:#fff;} .hv-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;} .hv-btn svg{width:18px;height:18px;display:block;} .hv-btn svg[hidden]{display:none;} @media (max-width:640px){ .hero-vid-ctrl{right:14px;bottom:14px;gap:8px;} .hv-btn{width:36px;height:36px;} .hv-btn svg{width:16px;height:16px;} } /* FAQ section headings (Content QC #152) — the list is grouped by topic, so each group gets a quiet rule-and-label above it rather than another card. */ .faq-sec{margin:clamp(30px,3vw,46px) 0 clamp(12px,1.2vw,18px); font-family:'Jost',sans-serif;font-weight:500;font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--sage); padding-bottom:10px;border-bottom:1px solid rgba(83,115,94,.28);} .faq-sec:first-child{margin-top:0;} /* the gallery strip closes on the same dome CTA as the other bands */ .galstrip-cta{text-align:center;margin-top:var(--gap-para-cta);} /* ========================================================= MOBILE-ONLY SLIDERS The About Us / Spa mosaics and the room amenity grids turn into sliders at phone width, on the site's own slider controller. Above 640 the wrapper is inert: the grid keeps its layout, the track does not scroll and the rail is hidden, so nothing about the desktop page changes. ========================================================= */ .ag-slider .slider-rail, .amen-slider .slider-rail{display:none;} .ag-grid.slider-track, .amen-grid.slider-track{overflow:visible;cursor:default;scroll-snap-type:none;} @media (max-width:640px){ .ag-slider .slider-rail, .amen-slider .slider-rail{display:flex;margin-top:24px;} .ag-grid.slider-track, .amen-grid.slider-track{display:flex;flex-wrap:nowrap; overflow-x:auto;cursor:grab;scroll-snap-type:x mandatory; grid-template-columns:none;max-width:none;margin-inline:0;gap:14px;} /* one photograph at a time, the next just peeking in */ .ag-grid.slider-track .ag-cell{flex:0 0 82%;width:82%;aspect-ratio:4/3; grid-row:auto;scroll-snap-align:start;} /* two amenity cards at a time, as briefed */ .amen-grid.slider-track .amen-item{flex:0 0 calc(50% - 7px);width:calc(50% - 7px); scroll-snap-align:start;} } /* ========================================================= CONTINUE-BOOKING NUDGE --------------------------------------------------------- Structural CSS from the continue-booking-nudge skill template. Only the token block below is site-specific; the structure is the proven implementation and is left as written. Tokens are taken from this site's own palette, not invented: surface / border -> .rm-card (white card, rgba(66,46,46,.18)) ink -> --green #1c3826 (header bar) accent -> --sage #53735e (5.27:1 on white, AA pass) accent-2 -> --gold #e0a92e (crest gold, top strip only) muted -> --ink #4e4e4e (8.32:1 on white, AA pass) fonts -> 'Roboto Serif' display, 'Jost' body radius -> 0, because every card on this site is square CTA (2026-10-09, skill STEP 2.2a) copies the site's own booking button, the green "BOOK NOW" dome (.flourish-btn): filled --sage #53735e, white label, Roboto Serif 300, 14.34px, uppercase, .06em tracking. Its hover grows the button (scale 1.07) and keeps the same solid fill, so the nudge does too. Always filled - it goes to the booking engine. Square corners, like every card here; the padding is the dome's 26px sides with the vertical evened out, since the dome's 22px/4px split only suits its shape. CTA label is #fff on #53735e = 5.27:1 (AA), the same in hover. PLACEMENT is upper-LEFT, not the template's default upper-right, and not the bottom either. Three fixed things already own the edges: - the floating BOOK NOW dome, right rail, top clamp(96px,21.55vw,331px) - the back-to-top button, bottom-right corner - the homepage booking bar, which is the full width of the bottom of the hero and is on screen at exactly the moment the nudge appears That rules out the whole right rail and the whole bottom band, so the nudge sits on the left under the header. Verified by measuring bounding-box overlap against all three at 1440/1280/900/600/390. ========================================================= */ .booking-nudge { /* ---- design tokens ---- */ --cbn-surface: #ffffff; --cbn-border: rgba(66,46,46,.18); --cbn-ink: #1c3826; --cbn-muted: #4e4e4e; --cbn-accent: #53735e; --cbn-accent-2: #e0a92e; --cbn-cta-bg: #53735e; /* --sage, the dome's fill */ --cbn-cta-ink: #ffffff; --cbn-cta-border: #53735e; --cbn-cta-hover: #53735e; /* the dome keeps its fill on hover and scales */ --cbn-cta-hover-ink: #ffffff; --cbn-cta-hover-border: #53735e; --cbn-cta-font: 'Roboto Serif', serif; --cbn-cta-size: 14.34px; --cbn-cta-weight: 300; --cbn-cta-padding: 13px 26px; --cbn-font-display: 'Roboto Serif', serif; --cbn-font-body: 'Jost', sans-serif; --cbn-radius: 0px; --cbn-cta-radius: 0px; --cbn-cta-transform: uppercase; --cbn-cta-tracking: .06em; --cbn-ease: cubic-bezier(.22, .7, .25, 1); /* ---- end tokens ---- */ /* no overflow:hidden — the card is square-cornered so there is nothing to clip, and hiding overflow cropped the CTA as it grew on hover */ background: var(--cbn-surface); border: 1px solid var(--cbn-border); border-radius: var(--cbn-radius); box-shadow: 0 20px 60px -16px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .06); display: none; opacity: 0; position: fixed; left: var(--edge-rail); top: clamp(96px, 11vw, 150px); right: auto; bottom: auto; transform: translateY(-20px); transition: transform .45s var(--cbn-ease), opacity .45s var(--cbn-ease); width: min(380px, calc(100vw - 48px)); z-index: 2900; } .booking-nudge.show { display: block; } .booking-nudge.in { opacity: 1; transform: translateY(0); } .bn-accent { background: linear-gradient(90deg, var(--cbn-accent), var(--cbn-accent-2)); height: 3px; left: 0; position: absolute; right: 0; top: 0; } .bn-header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 20px 24px 0; } .bn-name { color: var(--cbn-ink); font-family: var(--cbn-font-display); font-size: 22px; font-weight: 400; letter-spacing: .01em; line-height: 1.25; } .bn-close { align-items: center; background: transparent; border: 1px solid var(--cbn-border); border-radius: 50%; color: var(--cbn-muted); cursor: pointer; display: flex; flex-shrink: 0; height: 32px; justify-content: center; transition: all .3s var(--cbn-ease); width: 32px; } .bn-close:hover { background: var(--cbn-ink); border-color: var(--cbn-ink); color: #fff; transform: rotate(90deg); } .bn-close svg { height: 12px; width: 12px; } .bn-body { padding: 12px 24px 20px; } .bn-subtitle { color: var(--cbn-muted); font-family: var(--cbn-font-body); font-size: 14px; font-weight: 300; line-height: 1.6; margin-bottom: 4px; } .bn-property { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 18px; font-weight: 400; letter-spacing: .01em; } /* stay summary: dates, nights and occupancy, read off the same beData that builds the CTA. Empty -> hidden, so a cookie without dates degrades to the property name alone rather than leaving an empty row. */ .bn-meta { color: var(--cbn-ink); font-family: var(--cbn-font-body); font-size: 13px; font-weight: 400; line-height: 1.5; margin-top: 7px; } .bn-meta:empty { display: none; } .bn-price { color: var(--cbn-muted); display: none; font-family: var(--cbn-font-body); font-size: 12px; font-weight: 300; line-height: 1.5; margin-top: 4px; } .bn-price.loaded { display: block; } .bn-price .price-msg { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 20px; font-weight: 500; } .bn-price .general-msg { color: var(--cbn-muted); font-size: 12px; } .bn-actions { align-items: center; display: flex; gap: 12px; padding: 0 24px 20px; } .bn-cta { align-items: center; background: var(--cbn-cta-bg); border: 1px solid var(--cbn-cta-border); border-radius: var(--cbn-cta-radius); color: var(--cbn-cta-ink); display: inline-flex; font-family: var(--cbn-cta-font); font-size: var(--cbn-cta-size); font-weight: var(--cbn-cta-weight); letter-spacing: var(--cbn-cta-tracking); padding: var(--cbn-cta-padding); text-decoration: none; text-transform: var(--cbn-cta-transform); transition: all .35s var(--cbn-ease); } /* same growth as every other button on the site: scale(1.07) off the base, 1.02 on press. The colour shift stays on top of it. */ .bn-cta { transform-origin: bottom center; } .bn-cta:hover, .bn-cta:focus-visible { background: var(--cbn-cta-hover); border-color: var(--cbn-cta-hover-border); color: var(--cbn-cta-hover-ink); transform: scale(1.07); } .bn-cta:active { transform: scale(1.02); } .bn-cta:focus-visible { outline: 1px solid var(--cbn-cta-ink); outline-offset: 4px; } @media (max-width: 600px) { /* still top-anchored on phones: the hero's booking bar stacks to one column and fills the bottom of the viewport, so a bottom sheet would bury it */ /* 104px, not 84: the phone header measures 91px tall, so 84 clipped it by 7px */ .booking-nudge { border-radius: 0; left: 12px; right: 12px; top: 104px; bottom: auto; width: auto; } .bn-header { padding: 16px 18px 0; } .bn-body { padding: 10px 18px 16px; } .bn-actions { padding: 0 18px 16px; } .bn-name { font-size: 19px; } .bn-property { font-size: 16px; } } /* --- site-specific addenda (not part of the template structure) --- */ /* The full-screen menu overlay is z-index 70; the nudge is 2900, so without this it would float on top of an open menu. */ .nav-overlay.is-open ~ .booking-nudge, body.menu-open .booking-nudge { opacity: 0; pointer-events: none; } /* The site honours reduced motion everywhere else; the nudge follows. */ @media (prefers-reduced-motion: reduce) { .booking-nudge { transition: none; transform: none; } .bn-close, .bn-cta { transition: none; } .bn-close:hover { transform: none; } .bn-cta:hover, .bn-cta:focus-visible, .bn-cta:active { transform: none; } } /* == remarketing-nudge == "Get these prices emailed to you!" (namespaced .pi-) THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value from the target site's own CSS (SKILL.md STEP 3); the structure below is proven on The Hans Hotels (Sep 2026) and stays as-is. Scoped to .pi-modal — no :root pollution. This is the only true modal on most sites: it takes the whole screen and locks body scroll, so nothing else may paint above it except a skip link. Set --rmn-z above the site's drawer/cookie notice and below its skip link. */ .pi-modal { /* ---- design tokens: Ranthambhore Bagh Palace (site.css), 2026-10-09 ---- Light card, like the continue-booking card and every .rm-card on the site. CTA = the site's green "BOOK NOW" dome (.flourish-btn): filled --sage, white Roboto Serif 300, uppercase, .06em; its hover keeps the fill and grows the button (see the site addendum at the end of this block). */ --rmn-z: 950; /* above header/menu (<=90), below .skip-link (1000) */ --rmn-backdrop: rgba(10, 26, 15, .62); /* --green-deep #0a1a0f */ --rmn-surface: #ffffff; --rmn-shadow: 0 24px 60px rgba(10, 26, 15, .22); --rmn-ink: #1c3826; /* --green, 12.8:1 on white */ --rmn-muted: #4e4e4e; /* --ink, 8.3:1 on white */ --rmn-accent: #53735e; /* --sage, 5.27:1 on white */ --rmn-field-bg: #f5f4f2; /* --page */ --rmn-field-ink: #1c3826; --rmn-field-placeholder: #5f5f5f; --rmn-cta-bg: #53735e; /* the dome's fill */ --rmn-cta-ink: #ffffff; /* 5.27:1 */ --rmn-cta-hover: #53735e; /* the dome keeps its fill on hover */ --rmn-close-bg: rgba(28, 56, 38, .06); --rmn-close-hover: rgba(28, 56, 38, .14); --rmn-font-display: 'Roboto Serif', serif; --rmn-font-body: 'Jost', sans-serif; --rmn-font-cta: 'Roboto Serif', serif; --rmn-display-weight: 400; /* h1-h6 are 400 site-wide */ --rmn-cta-transform: uppercase; --rmn-cta-tracking: .06em; --rmn-radius: 0; /* every card on the site is square */ --rmn-field-radius: 0; --rmn-t: .35s cubic-bezier(.22, .7, .25, 1); /* the nudge's own --cbn-ease */ /* ---- end tokens ---- */ position: fixed; inset: 0; z-index: var(--rmn-z); display: none; align-items: center; justify-content: center; padding: 24px; } .pi-modal.show { display: flex; } .pi-backdrop { position: absolute; inset: 0; background: var(--rmn-backdrop); opacity: 0; transition: opacity var(--rmn-t); } .pi-modal.in .pi-backdrop { opacity: 1; } /* A dark card reads as an offer rather than an error, and the CTA carries all the contrast it needs against it. */ .pi-panel { position: relative; z-index: 1; width: min(460px, 100%); background: var(--rmn-surface); box-shadow: var(--rmn-shadow); border-radius: var(--rmn-radius); padding: 44px 44px 34px; text-align: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity var(--rmn-t), transform var(--rmn-t); } .pi-modal.in .pi-panel { opacity: 1; transform: none; } .pi-view { display: flex; flex-direction: column; align-items: stretch; } .pi-title { font-family: var(--rmn-font-display); font-size: 1.95rem; font-weight: var(--rmn-display-weight); line-height: 1.18; color: var(--rmn-ink); margin: 0 0 26px; } .pi-form { display: flex; flex-direction: column; gap: 14px; margin: 0; } /* 17px keeps iOS from zooming the viewport when the field takes focus. */ .pi-field { width: 100%; min-height: 52px; padding: 14px 18px; box-sizing: border-box; background: var(--rmn-field-bg); color: var(--rmn-field-ink); border: 1px solid transparent; border-radius: var(--rmn-field-radius); font-family: var(--rmn-font-body); font-size: 17px; line-height: 1.4; } .pi-field::placeholder { color: var(--rmn-field-placeholder); } .pi-field:focus-visible { outline: 2px solid var(--rmn-accent); outline-offset: 2px; } .pi-error[hidden] { display: none; } /* Muted accent, not red: it has to clear 4.5:1 on the dark surface, which a warning red does not. The role="alert" is what carries the urgency. */ .pi-error { font-family: var(--rmn-font-body); font-size: .78rem; line-height: 1.4; color: var(--rmn-muted); text-align: left; margin: -4px 0 0; } .pi-submit { width: 100%; min-height: 52px; padding: 14px 22px; background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); border: none; cursor: pointer; border-radius: var(--rmn-field-radius); font-family: var(--rmn-font-cta); font-weight: 600; font-size: .95rem; text-transform: var(--rmn-cta-transform); letter-spacing: var(--rmn-cta-tracking); transition: background var(--rmn-t); } .pi-submit:hover, .pi-submit:focus-visible { background: var(--rmn-cta-hover); } .pi-note { font-family: var(--rmn-font-body); font-size: .8rem; line-height: 1.4; color: var(--rmn-muted); margin: 16px 0 0; } /* 44px hit area, small glyph. */ .pi-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--rmn-close-bg); border: none; border-radius: 50%; color: var(--rmn-ink); cursor: pointer; transition: background var(--rmn-t); } .pi-close:hover, .pi-close:focus-visible { background: var(--rmn-close-hover); } .pi-close svg { width: 14px; height: 14px; } /* ---- success view ---- */ .pi-success { align-items: center; gap: 0; } .pi-success-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 0 18px; border-radius: 50%; background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); } .pi-success-icon svg { width: 22px; height: 22px; } .pi-success-title { font-family: var(--rmn-font-display); font-size: 1.7rem; font-weight: var(--rmn-display-weight); line-height: 1.2; color: var(--rmn-ink); margin: 0 0 10px; } .pi-success-sub { font-family: var(--rmn-font-body); font-size: .82rem; line-height: 1.5; color: var(--rmn-muted); margin: 0 0 6px; } .pi-success-prop { font-family: var(--rmn-font-display); font-size: 1.22rem; font-weight: var(--rmn-display-weight); line-height: 1.25; color: var(--rmn-accent); margin: 0 0 24px; } .pi-success-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 22px; box-sizing: border-box; background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); text-decoration: none; border-radius: var(--rmn-field-radius); font-family: var(--rmn-font-cta); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; transition: background var(--rmn-t); } .pi-success-cta:hover, .pi-success-cta:focus-visible { background: var(--rmn-cta-hover); color: var(--rmn-cta-ink); } .pi-success-cta svg { width: 14px; height: 14px; transition: transform var(--rmn-t); } .pi-success-cta:hover svg { transform: translateX(4px); } @media (max-width: 600px) { .pi-modal { padding: 16px; } .pi-panel { padding: 38px 24px 28px; } .pi-title { font-size: 1.6rem; } .pi-success-title { font-size: 1.45rem; } } @media (prefers-reduced-motion: reduce) { .pi-panel { transform: none; transition: opacity .3s; } .pi-backdrop { transition: opacity .3s; } .pi-submit, .pi-close, .pi-success-cta, .pi-success-cta svg { transition: none; } .pi-success-cta:hover svg { transform: none; } } /* --- site addendum (Ranthambhore): CTAs match the green dome booking button. The template fixes weight 600 and its own sizes, and puts an arrow on the success CTA; the site's buttons are Roboto Serif 300 at 14.34px, never carry an arrow, and grow scale(1.07) off the base on hover with the fill unchanged. */ .pi-field { border-color: rgba(66, 46, 46, .18); } .pi-submit, .pi-success-cta { font-weight: 300; font-size: 14.34px; letter-spacing: .06em; text-transform: uppercase; transform-origin: bottom center; transition: background var(--rmn-t), transform var(--rmn-t); } .pi-submit:hover, .pi-submit:focus-visible, .pi-success-cta:hover, .pi-success-cta:focus-visible { transform: scale(1.07); } .pi-submit:active, .pi-success-cta:active { transform: scale(1.02); } .pi-submit:focus-visible, .pi-success-cta:focus-visible { outline: 1px solid var(--rmn-cta-bg); outline-offset: 4px; } .pi-success-cta svg { display: none; } /* the 44px close sits in the panel's top-right; keep the title well clear of it at every width, and on phones drop the title below the button entirely */ .pi-title { padding: 0 40px; } @media (max-width: 600px) { .pi-panel { padding-top: 68px; } .pi-title { padding: 0 8px; } .pi-success-icon { margin-top: -14px; } } @media (prefers-reduced-motion: reduce) { .pi-submit:hover, .pi-submit:focus-visible, .pi-submit:active, .pi-success-cta:hover, .pi-success-cta:focus-visible, .pi-success-cta:active { transform: none; } } /* == /remarketing-nudge == */ /* ---------- EXPERIENCES chips: tap for the photograph ---------- The stacked chip list (phones and tablets) has no hover, so a chip with a photo opens it in this pop-up; chips with no photo yet link to Experiences. Built by site.js; sits above the nudges and the remarketing modal. */ .pill-list .pill[data-shot-src],.pill-list a.pill{cursor:pointer;} .pill-list a.pill{color:inherit;text-decoration:none;} .pill-list .pill[data-shot-src]:focus-visible,.pill-list a.pill:focus-visible{outline:1px solid var(--green);outline-offset:3px;} .shot-pop{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;transition:opacity .3s ease;} .shot-pop[hidden]{display:none;} .shot-pop.is-open{opacity:1;} .shot-pop-back{position:absolute;inset:0;background:rgba(10,26,15,.86);} .shot-pop-fig{position:relative;margin:0;width:min(560px,100%);} .shot-pop-fig img{display:block;width:100%;height:auto;max-height:68vh;object-fit:cover; border:5px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.35);background:var(--sage-tile);} .shot-pop-fig figcaption{margin-top:14px;text-align:center;color:#fff; font-family:'Roboto Serif',serif;font-weight:400;font-size:18px;line-height:1.3;} .shot-pop-x{position:absolute;right:0;top:-54px;width:42px;height:42px;border-radius:50%; border:1px solid rgba(255,255,255,.75);background:transparent;color:#fff;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center;} .shot-pop-x svg{width:16px;height:16px;} .shot-pop-x:focus-visible{outline:1px solid #fff;outline-offset:3px;} html.shot-pop-lock,html.shot-pop-lock body{overflow:hidden;} @media (prefers-reduced-motion:reduce){.shot-pop{transition:none;}}