/* Jungle Bay Dominica — originally authored for Deep Field. Tokens from 03_Design/junglebay-design-system.md, which is the brand contract. Nothing here derives from Tambourine's stylesheet. */ /* ---------- fonts ---------- */ @font-face{font-family:Poppins;src:url(/assets/fonts/poppins-light.woff2)format("woff2"); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:Poppins;src:url(/assets/fonts/poppins-regular.woff2)format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Poppins;src:url(/assets/fonts/poppins-medium.woff2)format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Poppins;src:url(/assets/fonts/poppins-bold.woff2)format("woff2"); font-weight:700;font-style:normal;font-display:swap} /* The display face. Regular only — the client has said twice that titles are not to be set in the bold, so the bold weight is deliberately not shipped and headings never synthesise one. */ @font-face{font-family:"Aviano Sans"; src:url(/assets/fonts/aviano-sans-regular.woff2)format("woff2"); font-weight:400;font-style:normal;font-display:swap} :root{ /* Deep green sampled from the client's reference, 27 Aug 2026. Replaces Dominica Green as the primary. White on it is 13.86:1 (was 6.28:1) and it reads AAA as link text on white. The original is kept as --jb-green-mid for the step between sections. */ --jb-green:#06332A; --jb-green-dark:#04241C; --jb-green-mid:#396B3E; --jb-gold:#A19D4E; --jb-gold-ui:#928E47; --jb-gold-text:#737038; --jb-sage:#AAC66B; --jb-charcoal:#262626; --jb-ivory:#F5F1E6; --jb-white:#fff; --color-primary:var(--jb-green); --color-accent:var(--jb-gold); --color-text:var(--jb-charcoal); --color-bg:var(--jb-white); --color-bg-warm:var(--jb-ivory); --color-link:var(--jb-green); --color-link-hover:var(--jb-gold-text); --rule:#e2ded0; --muted:#5d5f58; /* Aviano Sans on headings and the small caps labels, Poppins for body. See FONTS.md for the licence position. Reverting is this one line. */ --font-display:"Aviano Sans",Poppins,"Helvetica Neue",Arial,sans-serif; --font-body:Poppins,"Helvetica Neue",Arial,sans-serif; --wrap:1180px; --gut:clamp(1rem,4vw,2.5rem); --shadow:0 1px 2px rgba(38,38,38,.06),0 8px 24px rgba(38,38,38,.07); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.65; color:var(--color-text);background:transparent;font-weight:400} /* ---- page ground ----------------------------------------------------- The Lesser Antilles behind every page, faint enough to read as texture rather than an image. Our own drawing — 2KB of ellipses plotted from real latitude and longitude — not a stock map. The ground colour moves to and the layer is a fixed pseudo-element, so it stays put while the page scrolls over it. A z-index:-1 child of body would paint behind body's own background and never be seen; this is why body is transparent above. Sections with their own background — ivory, deep green, the footer — cover it deliberately. The texture reads on the neutral ground between them, which gives the page a rhythm rather than one flat wash. */ html{background:var(--color-bg)} body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; /* cover, not a fixed height: at auto 165vh the image was narrower than a wide viewport and its own edge showed as a rule down the side of the page. cover always overflows on both axes. The neat line is off in the wallpaper build as well, so nothing can draw an edge. */ background:url(/assets/brand/antilles-chart-ink.svg) no-repeat center/cover; opacity:.075} /* The botanical plate on the pages about what grows here. Nine engravings, so it carries far more ink per square inch than the chart's line work and needs a lower number for the same weight on the page. Cover, like the chart: sized to its own height it sat centred with page either side of it, which read as a panel rather than a ground. Cropping into it costs the top and bottom of the sheet, which is the cheap edge to lose. */ body.ground-botanical::before{ background:url(/assets/brand/botanical-plate.webp) no-repeat center/cover; opacity:.07} @media (max-width:820px){ body::before{background-size:cover;opacity:.06} body.ground-botanical::before{background-size:cover;opacity:.055} } .hdr-sentinel{position:absolute;top:0;height:1px;width:100%;pointer-events:none} img,video{max-width:100%;height:auto;display:block} .hero picture img,.hero video,.band-media img,.band-media video, .card-img img,.gal img{filter:saturate(1.12) contrast(1.05)} a{color:var(--color-link);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{color:var(--color-link-hover)} :focus-visible{outline:3px solid var(--jb-gold-ui);outline-offset:2px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--jb-green); color:#fff;padding:.75rem 1.25rem} .skip:focus{left:0} h1,h2,h3,h4{font-family:var(--font-display);color:var(--jb-charcoal); text-wrap:balance;margin:0 0 .6em;line-height:1.15;font-weight:400; /* Only the regular weight is shipped. Without this a browser asked for a heavier heading anywhere would smear an artificial bold over it. */ font-synthesis-weight:none} h1{font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;letter-spacing:.06em} h2{font-size:clamp(1.5rem,3.4vw,2rem);text-transform:uppercase;letter-spacing:.055em} h3{font-size:1.375rem} h4{font-size:1.0625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} p{margin:0 0 1.1em;max-width:68ch;font-weight:400} /* Extracted copy can carry stray emphasis; running text stays regular. */ .prose b,.prose strong,.acc-b b,.acc-b strong{font-weight:500} .eyebrow{font-family:var(--font-display);font-size:.75rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--jb-gold-text);margin:0 0 .75rem} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:760px} section{padding-block:clamp(2.5rem,7vw,5rem)} .warm{background:var(--color-bg-warm)} .dark{background:var(--jb-green);color:#fff} .dark h1,.dark h2,.dark h3{color:#fff} .dark a{color:#fff} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; white-space:nowrap; font-family:var(--font-display);font-size:.9375rem;font-weight:500; text-transform:uppercase;letter-spacing:.08em;text-decoration:none; padding:.85rem 1.6rem;border:2px solid transparent;border-radius:2px;cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease;min-height:48px} .btn-primary{background:var(--jb-gold);color:var(--jb-charcoal); box-shadow:0 2px 0 rgba(38,38,38,.2),0 10px 26px rgba(20,26,20,.28)} .hero .btn-primary{box-shadow:0 2px 0 rgba(38,38,38,.25),0 14px 34px rgba(16,22,16,.45)} .btn-primary:hover{background:var(--jb-green);color:#fff;box-shadow:none;transform:translateY(1px)} .btn-book{font-size:1rem;padding:1rem 2rem;letter-spacing:.1em} .btn-outline{background:transparent;color:var(--jb-green);border-color:var(--jb-green)} .btn-outline:hover{background:var(--jb-green);color:#fff} /* Header ghost button: legible on photography while the bar is transparent, and on white once it is solid. */ .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75); text-shadow:0 1px 10px rgba(16,22,16,.5)} .btn-ghost:hover{background:#fff;color:var(--jb-green);border-color:#fff;text-shadow:none} .hdr.is-solid .btn-ghost{color:var(--jb-green);border-color:var(--jb-green);text-shadow:none} .hdr.is-solid .btn-ghost:hover{background:var(--jb-green);color:#fff} .dark .btn-outline,.hero .btn-outline,.story-band .btn-outline{color:#fff;border-color:#fff} .dark .btn-outline:hover,.hero .btn-outline:hover, .story-band .btn-outline:hover{background:#fff;color:var(--jb-green)} /* ---------- header ---------- Sits over the hero, transparent, so the video runs full height behind it. A sentinel at the top of the document flips .is-solid once the page scrolls, at which point the bar takes a background and the type goes dark. */ .hdr{position:fixed;top:0;left:0;right:0;z-index:100; background:transparent;border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease, padding .35s ease} .hdr.is-solid{background:rgba(255,255,255,.98);border-bottom-color:var(--rule); box-shadow:0 1px 18px rgba(38,38,38,.08)} .hdr-in{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.5rem);position:relative; max-width:1560px;margin-inline:auto; padding:1rem var(--gut);transition:padding .35s ease} .hdr.is-solid .hdr-in{padding:.6rem var(--gut)} .brand{display:flex;align-items:center;flex:none;text-decoration:none} .brand img{width:clamp(140px,11.5vw,186px);height:auto;transition:width .35s ease} .hdr.is-solid .brand img{width:clamp(130px,11vw,170px)} .brand .leaf{display:none;width:50px} .hdr.is-solid .brand .leaf{width:40px} /* white lockup while the bar is transparent, full colour once it is solid */ .brand .on-dark{display:block} .brand .on-light{display:none} .hdr.is-solid .brand .on-dark{display:none} .hdr.is-solid .brand .on-light{display:block} @media (max-width:640px){ /* below the logo's 120px minimum — leaf mark alone, per kit */ .brand img.full{display:none} .brand .leaf{display:block} } /* Sized to fit from ~1180px up. It previously overflowed at every width below 1600px, which put the booking button off-screen on most laptops. */ /* Logo sits left; the menu centres in the space beside it and the calls to action hold the right edge. */ .nav{display:flex;align-items:center;flex:1;min-width:0; gap:clamp(.6rem,1.05vw,1.2rem)} .nav-list{margin-inline:auto} .nav-list{display:flex;align-items:center;gap:clamp(.5rem,.9vw,.95rem); list-style:none;margin:0;padding:0} .nav-list > li{position:relative} .nav a{font-family:var(--font-display);font-size:clamp(.7rem,.78vw,.775rem);font-weight:500; letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap; color:#fff;text-shadow:0 1px 10px rgba(16,22,16,.5);transition:color .25s ease; display:inline-flex;align-items:center;gap:.35rem;padding:.45rem 0} .nav a:hover{color:var(--jb-sage)} .hdr.is-solid .nav a{color:var(--jb-charcoal);text-shadow:none} .hdr.is-solid .nav a:hover,.hdr.is-solid .nav a[aria-current=page]{color:var(--jb-gold-text)} .chev{width:6px;height:6px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px); transition:transform .2s ease} .has-sub:hover > a .chev,.has-sub.open > a .chev{transform:rotate(-135deg) translateY(-2px)} .sub-toggle{display:none} /* dropdown */ .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px); min-width:230px;border-radius:3px;padding:.5rem 0;margin:0;list-style:none; opacity:0;visibility:hidden;z-index:5; /* transparent over the hero, matching the bar; solid white once it is */ background:rgba(18,24,18,.42);border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 44px rgba(12,18,12,.32); backdrop-filter:saturate(1.2) blur(10px); transition:opacity .18s ease,transform .18s ease,background .35s ease, border-color .35s ease,box-shadow .35s ease} .hdr.is-solid .sub{background:#fff;border-color:var(--rule); box-shadow:0 12px 38px rgba(24,30,24,.18)} .has-sub:hover > .sub,.has-sub:focus-within > .sub,.has-sub.open > .sub{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sub li{margin:0} .sub a{display:block;padding:.6rem 1.1rem;color:#fff;font-size:.75rem; letter-spacing:.07em;white-space:nowrap;text-shadow:0 1px 8px rgba(12,18,12,.5)} .sub a:hover{background:rgba(255,255,255,.14);color:var(--jb-sage)} .hdr.is-solid .sub a{color:var(--jb-charcoal);text-shadow:none} .hdr.is-solid .sub a:hover{background:var(--jb-ivory);color:var(--jb-green)} /* a hover-bridge, so the pointer can cross the gap without the menu closing */ .has-sub > .sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .nav-cta{display:flex;align-items:center;gap:clamp(.55rem,.85vw,.9rem)} /* Contact is a link, not a button: two buttons plus seven dropdowns overflowed the bar and pushed it off screen even at 1456px. */ .nav-contact{white-space:nowrap} /* Contact popover — the details on hover, same visual language as .sub. Guests phone roughly 7x more often than they use the form, so the numbers are real tel:/wa.me links rather than text. */ .nav-contact-wrap{position:relative;display:flex;align-items:center} .contact-pop{position:absolute;top:100%;right:0;transform:translateY(6px); min-width:270px;border-radius:3px;padding:.7rem 0 .5rem; opacity:0;visibility:hidden;z-index:6;text-align:center; background:rgba(18,24,18,.42);border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 44px rgba(12,18,12,.32); backdrop-filter:saturate(1.2) blur(10px); transition:opacity .18s ease,transform .18s ease,background .35s ease, border-color .35s ease,box-shadow .35s ease} .hdr.is-solid .contact-pop{background:#fff;border-color:var(--rule); box-shadow:0 12px 38px rgba(24,30,24,.18)} .nav-contact-wrap:hover > .contact-pop, .nav-contact-wrap:focus-within > .contact-pop{ opacity:1;visibility:visible;transform:translateY(0)} /* hover-bridge, so the pointer can cross the gap without it closing */ .contact-pop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .cp-place{margin:0 0 .45rem;padding:0 1.1rem;color:#fff;font-family:var(--font-display); font-size:.82rem;letter-spacing:.09em;text-transform:uppercase; text-shadow:0 1px 8px rgba(12,18,12,.5)} .hdr.is-solid .cp-place{color:var(--jb-green);text-shadow:none} .contact-pop .cp-row{display:block;padding:.42rem 1.1rem;color:#fff;font-size:.82rem; line-height:1.35;white-space:nowrap;text-shadow:0 1px 8px rgba(12,18,12,.5)} .contact-pop .cp-row:hover{background:rgba(255,255,255,.14);color:var(--jb-sage)} .hdr.is-solid .contact-pop .cp-row{color:var(--jb-charcoal);text-shadow:none} .hdr.is-solid .contact-pop .cp-row:hover{background:var(--jb-ivory);color:var(--jb-green)} .cp-num{font-variant-numeric:tabular-nums} .cp-note{display:inline-block;margin-left:.4rem;font-size:.72rem;opacity:.78} .cp-mail{font-size:.78rem} .nav .btn{padding:.62rem clamp(.75rem,.95vw,1.1rem);min-height:44px; font-size:clamp(.66rem,.76vw,.775rem);text-shadow:none;letter-spacing:.07em} .langs{display:flex;gap:.3rem;align-items:center;font-size:.75rem; font-family:var(--font-display);letter-spacing:.06em;list-style:none} .langs a{color:rgba(255,255,255,.82);padding:.2rem .25rem} .langs a[aria-current]{color:#fff;font-weight:700} .hdr.is-solid .langs a{color:var(--muted)} .hdr.is-solid .langs a[aria-current]{color:var(--jb-green)} .menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.6); border-radius:2px;padding:.6rem .9rem;font:inherit;cursor:pointer;min-height:48px; color:#fff;font-family:var(--font-display);font-size:.8125rem;letter-spacing:.1em; text-transform:uppercase} .hdr.is-solid .menu-btn{border-color:var(--rule);color:var(--jb-charcoal)} @media (max-width:1200px){ .menu-btn{display:block;margin-left:auto} .nav a{color:var(--jb-charcoal);text-shadow:none} .nav{position:fixed;inset:0;background:#fff;flex-direction:column; align-items:stretch;gap:0;padding:5.5rem var(--gut) 3rem;overflow-y:auto; transform:translateY(-100%);transition:transform .28s ease;z-index:110} .nav[data-open=true]{transform:none} .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%} .nav-list > li{border-bottom:1px solid var(--rule)} .nav-list > li > a{font-size:1rem;padding:.95rem 0;width:100%} /* the parent link stays tappable; the caret opens the submenu */ .sub-toggle{display:block;position:absolute;right:0;top:0;width:52px;height:52px; background:none;border:0;cursor:pointer} .sub-toggle::after{content:"";position:absolute;top:50%;right:14px;width:8px;height:8px; margin-top:-6px;border-right:2px solid var(--jb-green); border-bottom:2px solid var(--jb-green);transform:rotate(45deg);transition:transform .2s} .has-sub.open .sub-toggle::after{transform:rotate(-135deg);margin-top:-2px} .sub{position:static;transform:none;opacity:1;visibility:hidden;height:0;overflow:hidden; min-width:0;border:0;box-shadow:none;padding:0;background:var(--jb-ivory); border-radius:0;transition:none} .has-sub.open > .sub{visibility:visible;height:auto;padding:.35rem 0 .75rem} .has-sub:hover > .sub,.has-sub:focus-within > .sub{ visibility:hidden;height:0;padding:0} .has-sub.open:hover > .sub,.has-sub.open:focus-within > .sub{ visibility:visible;height:auto;padding:.35rem 0 .75rem} .sub a{padding:.6rem 1rem;font-size:.9rem} .nav-cta{margin-top:1.5rem;flex-direction:column;align-items:stretch} /* no hover on touch — show the details inline, always open */ .nav-contact-wrap{display:block} .contact-pop{position:static;transform:none;opacity:1;visibility:visible; min-width:0;border:0;box-shadow:none;backdrop-filter:none; background:var(--jb-ivory);border-radius:0;padding:.5rem 0 .9rem; transition:none;text-align:left} .contact-pop::before{display:none} .cp-place{padding:0;color:var(--jb-green);text-shadow:none;font-size:.78rem} .contact-pop .cp-row{padding:.55rem 0;color:var(--jb-charcoal); text-shadow:none;font-size:.95rem;white-space:normal} .cp-mail{font-size:.9rem} .nav .btn{width:100%;font-size:.875rem} .langs{padding:1rem 0} } /* ---------- booking bar — withdrawn 25 Aug 2026 at the client's request. Styles kept so it can come back without being rewritten. ---------- */ .book{background:var(--jb-ivory);border-bottom:1px solid var(--rule)} .book form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end; max-width:var(--wrap);margin-inline:auto;padding:.9rem var(--gut)} .book .f{display:flex;flex-direction:column;gap:.25rem;flex:1 1 130px;min-width:0} .book label{font-family:var(--font-display);font-size:.6875rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .book input,.book select{font:inherit;font-size:.9375rem;padding:.6rem .7rem; border:1px solid #cfc9b6;border-radius:2px;background:#fff;color:var(--jb-charcoal); min-height:46px;width:100%} .book .btn{flex:0 0 auto} @media (max-width:700px){.book .f{flex:1 1 45%}.book .btn{width:100%}} /* ---------- hero ---------- */ .hero{position:relative;display:grid;align-items:end;min-height:clamp(420px,72vh,760px); background:var(--jb-charcoal);overflow:hidden} .hero>picture,.hero>picture img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,26,20,.42) 0%,transparent 22%, rgba(24,30,24,.58) 100%), linear-gradient(96deg,rgba(24,30,24,.62) 0%,rgba(24,30,24,.22) 42%,transparent 68%)} .hero h1,.hero p,.hero .eyebrow{text-shadow:0 2px 18px rgba(16,22,16,.55)} .hero-in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;width:100%; padding:clamp(2rem,6vw,4rem) var(--gut)} .hero h1{color:#fff;margin-bottom:.4em;max-width:20ch} .hero p{color:#f2efe6;font-size:clamp(1rem,2vw,1.15rem);max-width:52ch} .hero .eyebrow{color:var(--jb-sage)} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem} /* ---------- cards ---------- */ .grid{display:grid;gap:clamp(1rem,2.4vw,1.75rem); grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))} .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule); border-radius:3px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease} .card:hover{box-shadow:0 2px 4px rgba(38,38,38,.07),0 16px 40px rgba(38,38,38,.13); transform:translateY(-4px)} .card-img img{transition:transform .8s cubic-bezier(.2,.6,.2,1)} .card:hover .card-img img{transform:scale(1.05)} .card-img{aspect-ratio:4/3;background:var(--jb-ivory);overflow:hidden} .card-img img{width:100%;height:100%;object-fit:cover} .card-b{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1;gap:.3rem} .card h3{font-size:1.1rem;margin:0 0 .35rem} .card p{font-size:.9375rem;color:var(--muted);margin:0 0 .9rem} .card .from{font-family:var(--font-display);font-size:.75rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--jb-gold-text)} .card .btn{margin-top:auto;align-self:flex-start} /* ---------- prose ---------- */ .prose h2{margin-top:2.2em} .prose h2:first-child{margin-top:0} .prose ul{padding-left:1.15rem;margin:0 0 1.2em;max-width:68ch} .prose li{margin-bottom:.4em} .prose figure{margin:2rem 0} .prose blockquote{margin:2rem 0;padding:1rem 0 1rem 1.5rem; border-left:3px solid var(--jb-sage);font-size:1.125rem;color:var(--muted)} .media{margin:2.5rem 0;border-radius:3px;overflow:hidden} /* ---------- footer ---------- */ .ftr{background:var(--jb-green);color:#dfe8dc;font-size:.9375rem; position:relative;overflow:hidden} /* No map panel in here. It was a corner accent from before the chart became the ground of every page; once the chart squared up from 560x803 to 900x991 it stopped bleeding past the panel and sat in the footer as a rectangle with its own neat line visible on all four sides — a picture of a map rather than a ground. The page-wide layer already carries it. */ .ftr a{color:#e9efe6;text-decoration:none} .ftr a:hover{color:var(--jb-sage)} .ftr-top{border-bottom:1px solid rgba(255,255,255,.16);position:relative;z-index:1} .ftr-top a{display:block;text-align:center;padding:1.15rem 1rem; font-family:var(--font-display);font-size:.8125rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase} .ftr-main{position:relative;z-index:1;display:grid;gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr;padding-block:clamp(2.5rem,5vw,4rem)} @media (min-width:820px){ .ftr-main{grid-template-columns:minmax(200px,1fr) auto minmax(320px,1.5fr); align-items:start} } .ftr-brand{text-align:center} @media (min-width:820px){.ftr-brand{text-align:center}} .ftr-brand img{width:190px;margin:0 auto 1.4rem;display:block} .ftr-brand p{margin:0;line-height:2;color:#cfdccb} .ftr-brand a{display:inline-block} .ftr-social{display:flex;flex-direction:row;justify-content:center;gap:1.1rem; list-style:none;margin:0;padding:0} @media (min-width:820px){.ftr-social{flex-direction:column;gap:1.35rem;padding-top:.5rem}} .ftr-social a{display:flex;align-items:center;justify-content:center; width:34px;height:34px;color:#e9efe6;transition:color .2s ease,transform .2s ease} .ftr-social a:hover{color:var(--jb-sage);transform:translateY(-2px)} .ftr-social svg{width:20px;height:20px;fill:currentColor} .ftr-signup h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.09em; margin:0 0 1.5rem} .signup-grid{display:grid;gap:1.1rem 1.5rem;grid-template-columns:1fr} @media (min-width:600px){.signup-grid{grid-template-columns:1fr 1fr}} .fld{position:relative} .fld input{width:100%;background:transparent;border:0; border-bottom:1px solid rgba(255,255,255,.45);color:#fff; font:inherit;font-size:.9375rem;padding:.6rem 0;min-height:44px} .fld input::placeholder{color:rgba(255,255,255,.72); font-family:var(--font-display);font-size:.8125rem;letter-spacing:.12em; text-transform:uppercase} .fld input:focus{outline:none;border-bottom-color:var(--jb-sage)} .signup-grid .btn{align-self:end;justify-self:stretch} .ftr .btn-primary{background:var(--jb-gold);color:var(--jb-charcoal);border-color:transparent} .ftr .btn-primary:hover{background:#fff;color:var(--jb-green)} .consent{margin-top:1.5rem;display:grid;gap:.6rem;font-size:.8125rem;color:#cfdccb} .consent label{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45;cursor:pointer} .consent input{margin-top:.15rem;width:16px;height:16px;flex:none;accent-color:var(--jb-sage)} .consent a{text-decoration:underline} .signup-note{margin-top:1rem;font-size:.75rem;color:#b9c9b4;font-style:italic} .ftr-btm{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.16); padding-block:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem; justify-content:space-between;font-size:.8125rem;color:#bccdb8} .ftr-btm ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0;padding:0} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ===================== richer surfaces ===================== */ /* ---- centred landing lockup ---- */ .hero-centred{align-items:center;text-align:center} /* The logo sits at 50% of the frame in Jungle Bay's own film, so the lockup is pushed down until the mark lands on the same line rather than sitting high. */ .hero-centred{align-items:start} .hero-centred .hero-in{display:flex;flex-direction:column;align-items:center; padding-top:max(7rem,36vh);padding-bottom:clamp(2rem,7vh,4.5rem)} .hero-centred .hero-cta{justify-content:center} .hero-mark{margin:0 0 1.4rem;line-height:1} .hero-mark img{width:clamp(240px,34vw,460px);height:auto; filter:drop-shadow(0 4px 26px rgba(14,20,14,.55))} .hero-centred p{margin-inline:auto;max-width:44ch;font-size:clamp(1rem,1.5vw,1.15rem)} @media (max-width:700px){ .hero-centred .hero-cta{flex-direction:column;width:100%;max-width:340px} .hero-centred .hero-cta .btn{width:100%} } /* ---- video hero ---- The poster is the LCP element and the video arrives afterwards, so motion never costs first paint. Held back on slow connections, on data-saver, and when the visitor prefers reduced motion. */ .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s ease} .hero video[data-ready]{opacity:1} .hero.tall{min-height:max(560px,100vh)} .hero-in{padding-bottom:clamp(2.5rem,8vw,5.5rem)} .hero .eyebrow{color:var(--jb-sage)} .scroll-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%); z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.55); border-radius:14px} .scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px; margin-left:-1.5px;background:#fff;border-radius:2px;animation:cue 1.9s ease-in-out infinite} @keyframes cue{0%,100%{opacity:0;transform:translateY(0)} 35%{opacity:1}70%{opacity:0;transform:translateY(12px)}} @media (max-width:700px){.scroll-cue{display:none}} /* ---- scroll reveals ---- */ .rv{opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .rv.in{opacity:1;transform:none} .rv-2{transition-delay:.09s}.rv-3{transition-delay:.18s}.rv-4{transition-delay:.27s} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* ---- alternating feature bands ---- */ .band{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center; grid-template-columns:1fr} @media (min-width:860px){ .band{grid-template-columns:1.05fr 1fr} .band.flip .band-media{order:2} } .band + .band{margin-top:clamp(2.5rem,6vw,5rem)} .band-media{position:relative;border-radius:3px;overflow:hidden;background:var(--jb-ivory)} .band-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;display:block; transition:transform 1.1s cubic-bezier(.2,.6,.2,1)} /* The video overlays its poster rather than stacking above it — otherwise the band opens as an empty box until the clip loads. */ .band-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s ease;z-index:1} .band-media video[data-ready]{opacity:1} .band-media:hover img{transform:scale(1.035)} .band-body h2{margin-bottom:.5em} .band-body .btn{margin-top:.6rem} .band-media .tagline{position:absolute;left:0;bottom:0;right:0; padding:2.2rem 1.4rem 1rem;color:#fff;font-family:var(--font-display); font-size:.75rem;letter-spacing:.16em;text-transform:uppercase; background:linear-gradient(transparent,rgba(38,38,38,.75))} /* ---- filter tabs ---- */ .tabs{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center; margin:0 0 2rem;padding:0;list-style:none} .tab{font-family:var(--font-display);font-size:.75rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase;background:transparent; border:1px solid var(--rule);border-radius:2px;padding:.65rem 1.1rem; color:var(--muted);cursor:pointer;min-height:44px;transition:all .18s ease} .tab:hover{border-color:var(--jb-green);color:var(--jb-green)} .tab[aria-selected=true]{background:var(--jb-green);border-color:var(--jb-green);color:#fff} .panel[hidden]{display:none} /* ---- accordion ---- */ .acc{border-top:1px solid var(--rule);max-width:820px;margin-inline:auto} .acc details{border-bottom:1px solid var(--rule)} .acc summary{list-style:none;cursor:pointer;padding:1.15rem .5rem 1.15rem 0; font-family:var(--font-display);font-weight:400;font-size:1.02rem; display:flex;align-items:flex-start;gap:1rem;min-height:48px} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"";flex:none;width:11px;height:11px;margin-top:.45rem; margin-left:auto;border-right:2px solid var(--jb-green); border-bottom:2px solid var(--jb-green);transform:rotate(45deg); transition:transform .22s ease} .acc details[open] summary::after{transform:rotate(-135deg)} .acc .acc-b{padding:0 0 1.3rem;color:var(--muted);max-width:68ch} .acc .acc-b p:last-child{margin-bottom:0} /* ---- gallery ---- */ .gal{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))} .gal button{padding:0;border:0;background:var(--jb-ivory);cursor:pointer;overflow:hidden; border-radius:2px;aspect-ratio:1;display:block} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .gal button:hover img{transform:scale(1.06)} dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px); max-height:92vh;overflow:visible} dialog.lb::backdrop{background:rgba(20,24,20,.92)} dialog.lb img{max-width:96vw;max-height:88vh;width:auto;height:auto;border-radius:2px} dialog.lb .x{position:absolute;top:-2.6rem;right:0;background:none;border:0;color:#fff; font-size:1.6rem;cursor:pointer;line-height:1;padding:.4rem .6rem;min-height:44px} /* ---- showcase: the first thing below the hero ---- Dark green, so the adventure and wellness experience is what a visitor meets first rather than a room list. */ .showcase{background:var(--jb-green);color:#fff;position:relative;overflow:hidden; padding-block:clamp(2.75rem,7vw,5rem)} /* Same as the footer: the corner map is gone, the page-wide chart covers it. */ .showcase > *{position:relative;z-index:1} .showcase h2{color:#fff;margin-bottom:.45em} .showcase .eyebrow{color:var(--jb-sage)} .showcase p{color:#e8efe6;max-width:60ch} .showcase-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center; grid-template-columns:1fr} @media (min-width:900px){.showcase-grid{grid-template-columns:1fr 1.1fr}} .showcase .btn-outline{color:#fff;border-color:rgba(255,255,255,.8)} .showcase .btn-outline:hover{background:#fff;color:var(--jb-green)} /* ---- slideshow ---- */ .slider{position:relative} /* No scroll-behavior:smooth here. Combined with scroll-snap-type:mandatory it cancels programmatic scrolling outright — setting scrollLeft read straight back as 0 and the arrows did nothing. Snap handles the settle. */ .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0; border-radius:3px;scrollbar-width:none;-ms-overflow-style:none} .slides::-webkit-scrollbar{display:none} /*
keeps its UA margin of 1em 40px, which put an 80px gap between slides and made index-based scrolling drift out by a whole slide. */ .slide{flex:0 0 100%;scroll-snap-align:center;position:relative;margin:0} .slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .9rem; color:#fff;font-family:var(--font-display);font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;background:linear-gradient(transparent,rgba(20,26,20,.8))} .slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:46px;height:46px;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.92);color:var(--jb-charcoal);font-size:1.1rem; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(20,26,20,.28);transition:background .18s ease} .slider-btn:hover{background:#fff} .slider-prev{left:.7rem} .slider-next{right:.7rem} .slider-dots{display:flex;gap:.4rem;justify-content:center;margin-top:.9rem} .slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.4);cursor:pointer} .slider-dots button[aria-current=true]{background:#fff;width:22px;border-radius:4px} /* ---- package carousel ---- Centre mode: the active package holds the middle of the screen with its neighbours peeking in either side. Shares the slider behaviour used by the showcase; only the presentation differs. */ .pkg-section{padding-block:clamp(2.5rem,6vw,4.5rem);overflow:hidden} .pkg-head{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut); margin-bottom:clamp(1.5rem,3vw,2.5rem)} .pkg-slider{position:relative} .pkg-slider .slides{padding-inline:19%;gap:clamp(.6rem,1.6vw,1.4rem)} .pkg-slide{flex:0 0 100%;scroll-snap-align:center;position:relative; min-height:clamp(400px,60vh,640px);display:flex;align-items:flex-end; overflow:hidden;border-radius:2px; opacity:.4;transform:scale(.955); transition:opacity .45s ease,transform .45s ease} .pkg-slide.is-active{opacity:1;transform:none} .pkg-slide picture,.pkg-slide picture img{position:absolute;inset:0;width:100%; height:100%;object-fit:cover} .pkg-slide::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,26,20,.10) 30%,rgba(14,20,14,.80) 100%)} .pkg-title{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;z-index:2;padding:2rem;pointer-events:none} .pkg-title h3{color:#fff;margin:0;text-align:center;max-width:14ch; font-size:clamp(1.8rem,4.2vw,3.4rem);text-transform:uppercase; letter-spacing:.07em;line-height:1.1;text-shadow:0 2px 26px rgba(12,18,12,.55)} .pkg-body{position:relative;z-index:3;width:100%;display:flex; justify-content:center;padding:clamp(1.25rem,2.5vw,2.5rem)} .pkg-body p{color:#eef2ec;max-width:44ch;margin-bottom:1.1rem; font-size:clamp(.9rem,1.05vw,1rem);text-shadow:0 1px 12px rgba(14,20,14,.55)} .pkg-body .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .pkg-body .btn:hover{background:#fff;color:var(--jb-green)} /* Arrows sit on the active slide's edges, as circles. */ .pkg-slider .slider-btn{width:56px;height:56px;font-size:1.4rem; background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65); box-shadow:none;text-shadow:0 1px 10px rgba(12,18,12,.6)} .pkg-slider .slider-btn:hover{background:rgba(255,255,255,.16)} .pkg-slider .slider-prev{left:calc(19% - 28px)} .pkg-slider .slider-next{right:calc(19% - 28px)} .pkg-slider .slider-dots{margin-top:1.2rem} .pkg-slider .slider-dots button{background:rgba(38,38,38,.25)} .pkg-slider .slider-dots button[aria-current=true]{background:var(--jb-green)} @media (max-width:900px){ .pkg-slider .slides{padding-inline:6%} .pkg-slide{flex:0 0 100%;min-height:clamp(380px,64vh,540px);opacity:.55} .pkg-slider .slider-prev{left:.5rem} .pkg-slider .slider-next{right:.5rem} .pkg-body .btn{width:100%} } /* ---- press badges ---- */ .press-row{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2.5rem); margin-top:clamp(1.75rem,4vw,2.75rem)} .press-item{display:flex;flex-direction:column;align-items:center;gap:.65rem; text-decoration:none;max-width:170px} .press-badge{width:96px;height:96px;border-radius:50%;background:var(--jb-green); border:2px solid rgba(255,255,255,.85);display:flex;align-items:center; justify-content:center;text-align:center;padding:.5rem; font-family:var(--font-display);font-weight:500;color:#fff;line-height:1.05; transition:transform .2s ease,background .2s ease} .press-item:hover .press-badge{transform:translateY(-3px);background:var(--jb-green-dark)} .press-badge span{font-size:.82rem;letter-spacing:.02em} .press-badge.small span{font-size:.6rem;letter-spacing:.06em} .press-cap{font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:#dfe8dc;text-align:center} .showcase .press-badge{background:#fff;color:var(--jb-green);border-color:transparent} .showcase .press-item:hover .press-badge{background:var(--jb-ivory)} /* ---- statement band ---- */ .statement{background:var(--jb-green-mid);color:#fff;text-align:center} .statement .wrap{max-width:820px} .statement h2{color:#fff;margin-bottom:.5em} .statement p{color:#e7efe6;margin-inline:auto;font-size:1.08rem} .statement .btn{margin-top:1.4rem} /* ---- sticky mobile booking ---- */ .cta-fixed{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none; gap:.5rem;padding:.6rem;background:rgba(255,255,255,.97); border-top:1px solid var(--rule);box-shadow:0 -2px 14px rgba(38,38,38,.09)} .cta-fixed .btn{flex:1;min-height:50px} @media (max-width:760px){ .cta-fixed{display:flex} body{padding-bottom:68px} } /* ---- price marker ---- */ .price{font-family:var(--font-display);font-weight:500;color:var(--jb-green); font-size:1.05rem;letter-spacing:.01em} .price small{display:block;font-size:.68rem;letter-spacing:.14em;font-weight:600; text-transform:uppercase;color:var(--muted)} /* ===================== room guide ===================== Recreated from the client's room guide document: a carousel per room with a numbered badge and view pill, then title, sleeps, description and a spec row. Two per row rather than three, so each card carries more of its photograph. */ .rooms-section{padding-block:clamp(2.5rem,6vw,4.5rem)} .rooms-head{max-width:820px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center} .rooms-head p{margin-inline:auto} .room-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr} @media (min-width:860px){.room-grid{grid-template-columns:1fr 1fr}} .room-card{background:#fff;border:1px solid var(--rule);border-radius:3px; overflow:hidden;display:flex;flex-direction:column} .room-card .slider{position:relative} .room-card .slides{border-radius:0} .room-card .slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative} .room-card .slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .room-card .slider-btn{width:40px;height:40px;font-size:1.1rem; background:rgba(255,255,255,.92);color:var(--jb-charcoal);border:0} .room-card .slider-prev{left:.6rem} .room-card .slider-next{right:.6rem} .room-card .slider-dots{position:absolute;left:0;right:0;bottom:.7rem;margin:0;z-index:3} .room-card .slider-dots button{background:rgba(255,255,255,.55)} .room-card .slider-dots button[aria-current=true]{background:#fff;width:20px} .room-badge{position:absolute;top:.75rem;left:.75rem;z-index:3; width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.94); color:var(--jb-charcoal);display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:.8125rem;font-weight:500} .room-tag{position:absolute;top:.75rem;right:.75rem;z-index:3; font-family:var(--font-display);font-size:.65rem;letter-spacing:.12em; text-transform:uppercase;padding:.4rem .7rem;border-radius:2px;color:#fff} .room-tag.garden{background:rgba(6,51,42,.88)} .room-tag.ocean{background:rgba(35,78,96,.88)} .room-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1} .room-body h3{font-size:1.15rem;margin:0 0 .35rem;letter-spacing:.04em} .room-sleeps{font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--jb-gold-text);margin-bottom:.8rem} .room-body p{font-size:.9375rem;color:var(--muted);margin-bottom:1.2rem} .room-spec{display:flex;gap:2.5rem;margin-top:auto;padding-top:1rem; border-top:1px solid var(--rule)} .room-spec .l{font-family:var(--font-display);font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .room-spec .v{font-size:.9375rem;color:var(--jb-charcoal)} /* the family suite runs the full width */ .room-card.is-feature{grid-column:1/-1} @media (min-width:860px){ .room-card.is-feature{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch} .room-card.is-feature .slide img{aspect-ratio:auto;height:100%;min-height:340px} .room-card.is-feature .room-body{padding:clamp(1.5rem,3vw,2.5rem)} } .room-pill{display:inline-block;font-family:var(--font-display);font-size:.65rem; letter-spacing:.13em;text-transform:uppercase;background:var(--jb-gold); color:var(--jb-charcoal);padding:.35rem .7rem;border-radius:2px;margin-bottom:.8rem} .room-notes{max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0; border-top:1px solid var(--rule);padding-top:1.5rem; font-size:.875rem;color:var(--muted);display:grid;gap:.8rem} .room-notes b{color:var(--jb-charcoal);font-weight:500} /* ===================== villa story ===================== Deliberately uneven: a full-bleed photograph, then an overlapping pair, then one that runs off the edge. Rows of image-then-text read as a list; this is meant to read as a walk through the place. */ .villa-story{padding-block:clamp(3rem,7vw,5.5rem) 0;overflow:hidden} .story-lede{max-width:720px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center} .story-lede p{margin-inline:auto;font-size:clamp(1rem,1.3vw,1.1rem)} /* full-bleed */ .vs-full{position:relative;width:100vw;margin-inline:calc(50% - 50vw); min-height:clamp(380px,72vh,760px);display:grid;align-items:end;overflow:hidden} .vs-full picture,.vs-full picture img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover} .vs-full::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 42%,rgba(14,20,14,.72))} .vs-full .vs-line{position:relative;z-index:2;max-width:var(--wrap);width:100%; margin-inline:auto;padding:clamp(2rem,5vw,4rem) var(--gut)} .vs-full .vs-line h3{color:#fff;margin:0 0 .35em;max-width:16ch; font-size:clamp(1.6rem,3.6vw,2.9rem);text-transform:uppercase;letter-spacing:.05em; text-shadow:0 2px 22px rgba(12,18,12,.5)} .vs-full .vs-line p{color:#eef2ec;max-width:46ch;margin:0; font-size:clamp(.95rem,1.25vw,1.1rem);text-shadow:0 1px 14px rgba(12,18,12,.55)} /* overlapping pair */ /* Two photographs of equal size, side by side, with the copy beneath them. They overlapped at first — the smaller one sat over the corner of the larger with a page-coloured border — and the client's reading was that it did not look clean. Nothing overlaps now; the block still reads differently from the full-bleed and edge-bleed blocks either side of it because it is the only one that pairs. */ .vs-pair{position:relative;max-width:var(--wrap);margin:clamp(3rem,7vw,6rem) auto; padding-inline:var(--gut);display:grid;gap:clamp(1rem,2.2vw,1.5rem); grid-template-columns:1fr} @media (min-width:900px){ .vs-pair{grid-template-columns:1fr 1fr} .vs-pair .vs-copy{grid-column:1 / -1;max-width:52ch; margin-top:clamp(.5rem,1.5vw,1rem)} } .vs-pair .vs-big img,.vs-pair .vs-small img{width:100%;aspect-ratio:4/3; object-fit:cover;border-radius:3px} .vs-pair .vs-copy h3{font-size:clamp(1.3rem,2.4vw,1.9rem);text-transform:uppercase; letter-spacing:.055em;margin-bottom:.5em} .vs-pair .vs-copy p{max-width:40ch} /* runs off the edge */ .vs-bleed{position:relative;max-width:var(--wrap);margin:clamp(3rem,7vw,6rem) auto; padding-inline:var(--gut);display:grid;gap:clamp(1.5rem,3vw,3rem); grid-template-columns:1fr;align-items:center} @media (min-width:900px){ .vs-bleed{grid-template-columns:.85fr 1.3fr} .vs-bleed .vs-img{margin-right:calc(50% - 50vw + var(--gut));border-radius:3px 0 0 3px} .vs-bleed.left .vs-img{order:-1;margin-right:0; margin-left:calc(50% - 50vw + var(--gut));border-radius:0 3px 3px 0} } .vs-bleed .vs-img{overflow:hidden;border-radius:3px} /* The source is a portrait photograph, 1400x2082, with the carved stone basin in its lower third. A centred cover crop at 16:10 takes a band from the middle and cuts the basin off just below its rim — the one thing the copy beside it names. Biased down the frame so the bowl is in shot. */ .vs-bleed .vs-img img{width:100%;aspect-ratio:16/10;object-fit:cover; object-position:50% 75%;display:block} .vs-bleed h3{font-size:clamp(1.3rem,2.4vw,1.9rem);text-transform:uppercase; letter-spacing:.055em;margin-bottom:.5em} .vs-bleed p{max-width:38ch} .story-features{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr; max-width:860px;margin:clamp(3.5rem,7vw,6rem) auto 0; border-top:1px solid var(--rule);padding:clamp(2rem,4vw,3rem) var(--gut) 0} @media (min-width:760px){.story-features{grid-template-columns:1fr 1fr}} .story-features h3{text-align:center;font-size:1rem;letter-spacing:.11em; margin-bottom:1.1rem} .story-features ul{list-style:none;margin:0;padding:0;text-align:center} .story-features li{padding:.55rem 0;color:var(--muted);font-size:.9375rem; border-bottom:1px solid var(--rule)} .story-features li:last-child{border-bottom:0} /* ---- press quotes --------------------------------------------------------- Client-supplied, 28 Aug 2026. One quote per page, set as a quiet full-width band rather than a card, so it reads as a pause between sections instead of another tile. Quotations are never translated. */ .pq{padding:clamp(3.5rem,9vw,7rem) 0;text-align:center} .pq .wrap{max-width:52rem} .pq .eyebrow{margin-bottom:clamp(1.25rem,3vw,2rem)} .pq figure{margin:0} .pq-mark{display:block;font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.75rem,6vw,4.25rem);line-height:.6;color:var(--jb-gold); margin-bottom:.5em} .pq blockquote{margin:0} .pq blockquote p{margin:0;font-family:var(--font-display);font-weight:300; font-size:clamp(1.35rem,3.4vw,2.25rem);line-height:1.3;text-wrap:balance; color:var(--jb-charcoal)} .pq figcaption{margin-top:clamp(1.25rem,3vw,2rem)} .pq-src{font-family:var(--font-display);font-size:.78rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--jb-gold-text);margin:0} .pq-by{display:block;font-size:.8rem;color:var(--muted);margin-top:.45em} .pq-award{font-family:var(--font-display);font-weight:300;margin:.6em 0 0; font-size:clamp(1.35rem,3.4vw,2.25rem);line-height:1.3;text-wrap:balance} /* On deep green: the homepage closer and the yoga page's award. Sage rather than gold for the accents — gold on this green is 2.6:1 and fails. */ .pq.on-dark{background:var(--jb-green)} .pq.on-dark blockquote p,.pq.on-dark .pq-award{color:#fff} .pq.on-dark .pq-mark,.pq.on-dark .pq-src,.pq.on-dark .eyebrow{color:var(--jb-sage)} .pq.on-dark .pq-by{color:#cfd8cb} /* ---- press page: the whole set ---- */ .acc-head{max-width:44rem;margin:0 auto clamp(2rem,5vw,3rem);text-align:center} .acc-head p:last-child{color:var(--muted)} .acc{display:grid;gap:clamp(.9rem,2vw,1.4rem);grid-template-columns:1fr} @media (min-width:760px){.acc{grid-template-columns:1fr 1fr}} .acc-card{background:var(--color-bg);border-top:3px solid var(--jb-gold); padding:clamp(1.4rem,3vw,2.1rem);margin:0;display:flex;flex-direction:column} .acc-card.award{background:var(--jb-green);border-top-color:var(--jb-sage)} .acc-mark{display:block;font-family:Georgia,"Times New Roman",serif;font-size:2.25rem; line-height:.5;color:var(--jb-gold);margin-bottom:.75rem} .acc-q{margin:0} .acc-q p{margin:0} .acc-q,.acc-q p{font-family:var(--font-display);font-weight:300; font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.35;color:var(--jb-green); text-wrap:balance} .acc-card.award .acc-q{color:#fff;margin-top:.5rem} .acc-card figcaption{margin-top:auto;padding-top:1.1rem} .acc-src{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--jb-gold-text)} .acc-card.award .acc-src{color:var(--jb-sage)} .acc-by{display:block;margin-top:.4em;font-size:.78rem;color:var(--muted)} /* The award band carries no quotation, so it wants less vertical air than a pull quote and no gap where the eyebrow would sit. */ .pq.award-band{padding:clamp(2.75rem,6vw,4.5rem) 0} .pq.award-band .pq-award{margin-top:.75rem} /* ---- intro copy over a photograph ---------------------------------------- Same full-bleed mechanic as .vs-full, but centred and typeset for a paragraph rather than a heading. The scrim is heavier than the villa story's because this carries body-length copy, not three words. */ /* Sits directly under a full-bleed hero, so it needs air above it — two photographs meeting edge to edge read as one long picture with a seam. */ .prose-band{position:relative;width:100vw;margin-inline:calc(50% - 50vw); margin-top:clamp(2.5rem,6vw,5rem); display:grid;place-items:center;text-align:center; min-height:clamp(340px,58vh,620px);padding:clamp(3rem,8vw,6rem) var(--gut); overflow:hidden} /* Stacked with positive indices rather than negative ones. A z-index of -2 puts the photograph behind the section's own background box, which paints nothing here but is one repaint away from swallowing it. */ .prose-band picture,.prose-band picture img{position:absolute;inset:0; width:100%;height:100%;object-fit:cover;z-index:0} .prose-band::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(4,36,28,.48),rgba(4,36,28,.68))} .prose-band .wrap{position:relative;z-index:2;max-width:46rem;padding:0} .prose-band p{margin:0 0 .8em;font-family:var(--font-display);font-weight:300; font-size:clamp(1.1rem,2.3vw,1.6rem);line-height:1.5;color:#fff; text-wrap:balance;text-shadow:0 2px 18px rgba(16,22,16,.45)} .prose-band p:last-child{margin-bottom:0} /* ---- packages hub: the three signature packages at length ---------------- These replaced truncated cards. The client's point was that this is where the resort makes its money and a 90-character blurb ending in an ellipsis was not selling them: big photograph, the whole description, the inclusions listed out, and a Book now that goes straight to the booking engine. */ .pkg-details .pkg-detail{display:grid;gap:clamp(1.75rem,4vw,3.5rem); align-items:center;padding:clamp(2.5rem,7vw,5.5rem) 0; border-top:1px solid var(--rule)} .pkg-details .pkg-detail:first-child{border-top:0} @media (min-width:900px){ .pkg-details .pkg-detail{grid-template-columns:1.15fr .85fr} /* Flipping has to swap the column widths as well as the order, or the photograph lands in the narrow column and the middle package renders a third smaller than the two either side of it. */ .pkg-details .pkg-detail.flip{grid-template-columns:.85fr 1.15fr} .pkg-details .pkg-detail.flip .pkg-media{order:2} } .pkg-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.14)} .pkg-detail h3{font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase; letter-spacing:.05em;margin-bottom:.45em} .pkg-price{font-family:var(--font-display);font-size:.74rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--jb-gold-text); margin:0 0 1.1rem} .pkg-price b{display:block;margin-top:.3em;font-weight:400;letter-spacing:.01em; text-transform:none;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--jb-green)} .pkg-inc{margin-top:clamp(1.25rem,2.5vw,1.75rem)} .pkg-inc h4{font-family:var(--font-display);font-size:.74rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--jb-gold-text); margin:0 0 .8rem} .pkg-inc ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem} .pkg-inc li{position:relative;padding-left:1.4rem;line-height:1.5} .pkg-inc li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem; height:.45rem;border-radius:50%;background:var(--jb-sage)} .pkg-note{margin:1rem 0 0;font-size:.85rem;color:var(--muted)} .pkg-actions{display:flex;flex-wrap:wrap;gap:.75rem; margin-top:clamp(1.5rem,3vw,2.25rem)} /* The same button pair at the foot of a single package page. Sits in the prose column, ruled off above so it reads as the close of the offer and not as another paragraph. */ .pkg-page-cta{padding:0 0 clamp(1.25rem,3vw,2rem)} .pkg-page-cta > .wrap{border-top:1px solid var(--rule); padding-top:clamp(1.25rem,2.6vw,1.85rem)} .pkg-cta-label{margin:0;font-family:var(--font-display); font-size:clamp(.98rem,1.5vw,1.2rem);letter-spacing:.02em; color:var(--jb-green)} .pkg-page-cta .pkg-actions{margin-top:clamp(.9rem,1.8vw,1.25rem)} @media (max-width:560px){ .pkg-page-cta .pkg-actions .btn{flex:1 1 100%;text-align:center} } /* A second photograph, stacked under the first at the same width. It was an overlapping inset first; the client asked for them one above the other. The second shot is a portrait split-level, cropped to the same 4:3 as the first with the crop biased upwards so the rock stays in frame. */ .pkg-media.duo{display:grid;gap:clamp(.75rem,1.6vw,1.15rem)} .pkg-inset img{width:100%;aspect-ratio:4/3;object-fit:cover; object-position:50% 40%;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.14)} /* The client's package pages all close with a concierge line and a WhatsApp route as well as Book now — that is how their guests actually reach them. */ .pkg-concierge{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;font-size:.9rem; color:var(--muted);max-width:44ch} /* ---- special offers ------------------------------------------------------ Below the packages. Two cards, each led by the client's own creative — the artwork carries its own typography, so the card frames it rather than overlaying anything on it. */ .offers{padding:clamp(3rem,7vw,5.5rem) 0} .offers-head{margin-bottom:clamp(1.5rem,3.5vw,2.5rem)} .offers-head h2{margin:0;font-size:clamp(1.5rem,3vw,2.2rem); text-transform:uppercase;letter-spacing:.05em} .offer-grid{display:grid;gap:clamp(1.25rem,3vw,2.25rem);grid-template-columns:1fr} @media (min-width:820px){.offer-grid{grid-template-columns:1fr 1fr}} .offer{display:grid;gap:clamp(1rem,2vw,1.5rem);margin:0; grid-template-columns:1fr;align-content:start} .offer-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.14)} .offer-copy .eyebrow{color:var(--jb-gold-text);margin-bottom:.6rem} .offer-copy h3{font-size:clamp(1.25rem,2.4vw,1.7rem);text-transform:uppercase; letter-spacing:.05em;margin-bottom:.5em} .offer-terms{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem} .offer-terms li{position:relative;padding-left:1.4rem;line-height:1.5; font-size:.95rem} .offer-terms li::before{content:"";position:absolute;left:0;top:.6em; width:.45rem;height:.45rem;border-radius:50%;background:var(--jb-sage)} /* ---- experiences: the board, the intro beside it, the PDF beneath ------- One block, the client's arrangement. The intro is left-aligned rather than centred: it was centred while it sat alone in a narrow frame, and at a hundred words in a column beside a photograph, centred lines are hard to come back to. */ .xintro{padding:clamp(2.5rem,6vw,4.5rem) 0} .xi-top{display:grid;gap:clamp(1.5rem,3.5vw,3rem);grid-template-columns:1fr; align-items:center} @media (min-width:900px){.xi-top{grid-template-columns:1.05fr .95fr}} .xi-shot{margin:0} .xi-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.16)} /* No frame. It was a white card with a rule round it while it sat alone; beside a photograph the rule read as a box drawn round the words. The copy sits straight on the page now, in the display face. */ .xi-copy{padding:0} .xi-copy p{font-family:var(--font-display);font-weight:400; font-size:clamp(1rem,1.55vw,1.12rem);line-height:1.62; letter-spacing:.005em} .xi-copy p:last-child{margin-bottom:0} /* The download row runs the full width under both, split so the title holds one side and the copy and button the other. */ .xi-pdf{display:grid;gap:clamp(1rem,2.5vw,2.5rem);grid-template-columns:1fr; margin-top:clamp(2rem,4.5vw,3.25rem); padding-top:clamp(1.75rem,4vw,2.75rem);border-top:1px solid var(--rule)} @media (min-width:900px){.xi-pdf{grid-template-columns:1fr 1fr;align-items:center}} .xi-pdf h2{font-size:clamp(1.4rem,2.8vw,2.05rem);text-transform:uppercase; letter-spacing:.05em;margin:0} .xi-pdf .eyebrow{color:var(--jb-gold-text);margin-bottom:.6rem} .xi-pdf p{max-width:42ch;margin-bottom:clamp(1rem,2.5vw,1.5rem)} .xbands{display:grid;gap:clamp(.5rem,1.2vw,1rem); margin:clamp(2.5rem,6vw,4.5rem) 0} .xb{position:relative;display:block;overflow:hidden;isolation:isolate; width:100vw;margin-inline:calc(50% - 50vw); min-height:clamp(260px,46vh,520px);text-decoration:none} .xb picture,.xb img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0} .xb::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(4,36,28,.30),rgba(4,36,28,.55))} .xb-label{position:relative;z-index:2;display:grid;place-items:center; min-height:inherit;height:clamp(260px,46vh,520px); font-family:var(--font-display);color:#fff;text-transform:uppercase; font-size:clamp(1.6rem,4.5vw,3.25rem);letter-spacing:.09em; text-shadow:0 2px 22px rgba(16,22,16,.5)} a.xb:hover img{transform:scale(1.03)} .xb img{transition:transform .8s cubic-bezier(.2,.6,.2,1)} @media (prefers-reduced-motion:reduce){.xb img{transition:none}} /* ---- experiences: what you can actually do ------------------------------ Under each category band: its photography, then the excursions named. The list is the point of the page, so it is set in the display face at reading size rather than as small print under the pictures. */ .xg{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4.5rem)} .xg-photos{display:grid;gap:clamp(.6rem,1.4vw,1.1rem);grid-template-columns:1fr; margin-bottom:clamp(1.75rem,4vw,2.75rem)} @media (min-width:820px){.xg-photos{grid-template-columns:repeat(3,1fr)}} .xg-photos figure{margin:0} .xg-photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px} .xg-list{max-width:44rem;margin:0 auto;text-align:center} .xg-list .eyebrow{color:var(--jb-gold-text);margin-bottom:clamp(1rem,2.5vw,1.5rem)} .xg-list ul{list-style:none;margin:0;padding:0} .xg-list li{font-family:var(--font-display);font-weight:400; font-size:clamp(1.02rem,2vw,1.3rem);line-height:1.35; padding:clamp(.7rem,1.6vw,1rem) 0;border-top:1px solid var(--rule); text-wrap:balance} .xg-list li:last-child{border-bottom:1px solid var(--rule)} /* Body copy in the display face, where the client has asked for it. */ .prose-display p,.prose-display li{font-family:var(--font-display); font-weight:400;font-size:clamp(1rem,1.55vw,1.12rem);line-height:1.62; letter-spacing:.005em} /* ---- enquiry form ------------------------------------------------------- Underlined fields rather than boxes, which is the reference and also the quieter of the two on an ivory ground. Green on ivory throughout: the brand's own pairing, and it clears AA at every size used here. */ .enquiry{padding:clamp(3rem,8vw,6rem) 0} .enq-head{max-width:46rem;margin:0 auto clamp(2rem,5vw,3.25rem);text-align:center} .enq-head h2{color:var(--jb-green);margin-bottom:.6em} .enq-head p{color:var(--color-text);margin:0} .enq-grid{display:grid;gap:clamp(1.5rem,3.5vw,2.25rem) clamp(1.5rem,4vw,3rem); grid-template-columns:1fr;max-width:var(--wrap);margin:0 auto} @media (min-width:700px){.enq-grid{grid-template-columns:1fr 1fr}} .enq-grid .fld.wide,.enq-grid .consent,.enq-grid .enq-send{grid-column:1/-1} .enq-grid input[type=text],.enq-grid input[type=email],.enq-grid input[type=tel]{ width:100%;background:transparent;border:0;border-bottom:1px solid #c9c3ad; border-radius:0;padding:.55rem 0 .7rem;font:inherit;color:var(--color-text); font-family:var(--font-display);letter-spacing:.06em} .enq-grid input::placeholder{color:var(--jb-green);opacity:.75; letter-spacing:.1em} .enq-grid input:focus{outline:0;border-bottom-color:var(--jb-green)} .enq-grid input:focus-visible{outline:3px solid var(--jb-gold-ui); outline-offset:3px} /* .consent is written for the footer, where it sits on deep green and is set in #cfdccb. On the ivory ground that is very nearly invisible, so the colour has to be restated here rather than inherited. */ .enquiry .consent{display:flex;flex-wrap:wrap;justify-content:center; gap:.75rem clamp(1.5rem,4vw,3rem);margin-top:clamp(.5rem,1.5vw,1rem); color:var(--color-text)} .enquiry .consent a{color:var(--jb-green)} .enquiry .consent label{display:flex;align-items:flex-start;gap:.55rem; font-size:.9rem;max-width:34ch;line-height:1.45} .enquiry .consent input{margin-top:.15rem;accent-color:var(--jb-green)} .enq-send{display:flex;justify-content:center} .enq-send .btn{min-width:12rem} /* text-align:center only centres the text inside the box. Every p on the site is capped at 68ch, so the box itself was sitting at the left of the column and the note read as misaligned rather than centred. */ .enq-note{text-align:center;color:var(--muted);margin-top:1.25rem; max-width:none} /* ---- the spa intro and its collage -------------------------------------- Copy centred and narrow above; photography in mixed shapes below. A plain even grid of ten squares reads as a contact sheet, so the tiles come in three sizes and the lead runs two rows tall. */ .spa-intro{padding:clamp(3rem,8vw,6rem) 0} .spa-head{max-width:52rem;margin:0 auto clamp(2.5rem,6vw,4rem);text-align:center} .spa-head .eyebrow{color:var(--jb-green);opacity:.85} .spa-head h2{color:var(--jb-green);margin-bottom:.55em} .spa-head p{margin-left:auto;margin-right:auto} .spa-hours{margin-top:clamp(1.5rem,3.5vw,2.25rem);line-height:1.7} .spa-hours b{font-family:var(--font-display);letter-spacing:.06em} .spa-menu{display:inline-block;margin-top:clamp(1rem,2.5vw,1.5rem); font-family:var(--font-display);font-size:.82rem;letter-spacing:.12em; text-transform:uppercase;color:var(--jb-green); text-decoration:underline;text-underline-offset:.3em} .spa-menu:hover{color:var(--jb-gold-text)} /* A fixed row height with spans, not per-tile aspect ratios. Letting each image set its own height left the rows ragged — 331px of yoga studio beside 197px of flowers — because the grid sized every row to its tallest content. One row unit, and the shapes come from how many units a tile spans. */ .spa-collage{display:grid;gap:clamp(.5rem,1.2vw,1rem); grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(9rem,15vw,13.5rem)} @media (min-width:820px){.spa-collage{grid-template-columns:repeat(4,1fr)}} .spa-collage figure{margin:0;overflow:hidden;border-radius:3px} .spa-collage img{width:100%;height:100%;object-fit:cover;display:block} .sc-lead{grid-column:span 2;grid-row:span 2} .sc-tall{grid-row:span 2} .sc-wide2{grid-column:span 2} /* ---- the About page ----------------------------------------------------- The client's mockup of 29 Aug 2026: a hero, a contents list that jumps to each of five parts, then the parts. Set wider and quieter than the rest of the site — it is the one page people read rather than scan. */ /* Bottom-left, like every other page header on the site. It was centred and the strapline italic; the client wants this page's header to sit with the rest rather than be its own thing. */ .ab-hero{min-height:clamp(460px,78vh,820px)} .ab-hero h1{color:#fff;max-width:18ch} .ab-hero .eyebrow{color:var(--jb-sage)} .ab-strap{color:#eef2ec;max-width:52ch;margin:1.25rem 0 0; text-shadow:0 2px 18px rgba(16,22,16,.55)} .ab-toc{padding:clamp(2.5rem,6vw,4.5rem) 0} .ab-toc .wrap{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr; align-items:center} @media (min-width:820px){.ab-toc .wrap{grid-template-columns:.85fr 1.15fr}} .ab-toc-shot{margin:0} .ab-toc-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.16)} .ab-toc ol{list-style:none;margin:0;padding:0} .ab-toc li{display:flex;align-items:baseline;gap:clamp(.75rem,2vw,1.5rem); padding:clamp(.7rem,1.8vw,1.05rem) 0;border-bottom:1px solid var(--rule)} .ab-toc li:first-child{border-top:1px solid var(--rule)} .ab-n{font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em; color:var(--jb-gold-text);flex:none} .ab-toc a{font-family:var(--font-display);font-size:clamp(.86rem,1.6vw,1rem); letter-spacing:.09em;text-transform:uppercase;text-decoration:none; color:var(--jb-green)} .ab-toc a:hover{color:var(--jb-gold-text)} .ab-s{padding:clamp(3rem,8vw,6rem) 0} .ab-mid{max-width:54rem;margin:0 auto;text-align:center} .ab-mid p{margin-left:auto;margin-right:auto} .ab-pull{margin:clamp(2rem,5vw,3rem) 0;padding:0;border:0;text-align:center} .ab-pull p{font-family:var(--font-display);font-weight:400; font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.35;color:var(--jb-green); max-width:30ch;margin:0 auto;text-wrap:balance} .ab-pull.light p{color:#fff} .ab-pull footer{margin-top:1rem;font-family:var(--font-display);font-size:.72rem; letter-spacing:.16em;text-transform:uppercase;color:var(--jb-sage)} .ab-founder{padding:clamp(3rem,8vw,6rem) 0} .ab-founder .wrap{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr; align-items:center} @media (min-width:900px){.ab-founder .wrap{grid-template-columns:1fr .9fr}} .ab-fo-shot{margin:0} .ab-fo-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px} .ab-fo-shot figcaption,.ab-cap,.ab-wide figcaption{margin-top:.75rem; font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .ab-role{font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--jb-gold-text);margin-bottom:1.25rem} .ab-note{margin-top:clamp(1.25rem,3vw,2rem);padding-top:1.1rem; border-top:1px solid var(--rule)} .ab-note.centre{text-align:center;max-width:34rem;margin-inline:auto} .ab-note b{display:block;font-family:var(--font-display);font-weight:400; font-size:.94rem;letter-spacing:.05em;color:var(--jb-green)} .ab-note span{display:block;margin-top:.3rem;font-size:.85rem;color:var(--muted)} .ab-wide{margin:clamp(2rem,5vw,3.25rem) 0;text-align:center} .ab-wide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px} .ab-press{background:var(--jb-green);color:#e8efe6; padding:clamp(3rem,8vw,6rem) 0} .ab-press h2,.ab-press .ab-mid p{color:#fff} .ab-press .eyebrow{color:var(--jb-sage)} .ab-outlets{list-style:none;display:grid;gap:clamp(1rem,2.5vw,1.75rem); grid-template-columns:repeat(2,1fr);margin:clamp(2rem,5vw,3rem) auto 0; padding:0;max-width:56rem} @media (min-width:760px){.ab-outlets{grid-template-columns:repeat(4,1fr)}} .ab-outlets li{font-family:var(--font-display);font-size:clamp(.72rem,1.3vw,.82rem); letter-spacing:.1em;text-transform:uppercase;color:#dbe6d7;text-align:center; line-height:1.4} .ab-awards{display:grid;gap:.6rem;grid-template-columns:1fr; margin:clamp(2rem,4.5vw,2.75rem) auto 0;max-width:62rem} @media (min-width:700px){.ab-awards{grid-template-columns:repeat(3,1fr)}} @media (min-width:1000px){.ab-awards{grid-template-columns:repeat(5,1fr)}} .ab-award{border:1px solid rgba(255,255,255,.22);border-radius:3px; padding:.75rem .8rem;text-align:center} .ab-award b{display:block;font-family:var(--font-display);font-weight:400; font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#fff} .ab-award span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--jb-sage)} .ab-fund{margin-top:1.25rem;font-size:.92rem} .ab-fund b{font-family:var(--font-display);letter-spacing:.04em;color:var(--jb-green)} .ab-pair{display:grid;gap:clamp(.6rem,1.4vw,1rem);grid-template-columns:1fr; margin-top:clamp(2rem,5vw,3rem)} @media (min-width:760px){.ab-pair{grid-template-columns:1fr 1fr}} .ab-pair figure{margin:0} .ab-pair img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px} .ab-cap{text-align:center;max-width:none} .ab-stats{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:1fr; margin-top:clamp(2.5rem,6vw,4rem)} @media (min-width:640px){.ab-stats{grid-template-columns:1fr 1fr}} @media (min-width:1000px){.ab-stats{grid-template-columns:repeat(3,1fr)}} .ab-stat{border-top:2px solid var(--jb-sage);padding-top:1rem} .ab-stat b{display:block;font-family:var(--font-display);font-weight:400; font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--jb-green);line-height:1.1} .ab-stat-h{display:block;margin:.5rem 0 .55rem;font-family:var(--font-display); font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--jb-gold-text)} .ab-stat p{margin:0;font-size:.9rem} .ab-close{padding:clamp(3rem,8vw,5.5rem) 0;text-align:center} .ab-close h2{color:var(--jb-green);max-width:18ch;margin-inline:auto} .ab-close p{margin:0 auto clamp(1.5rem,3vw,2rem);max-width:44ch} /* ---- a photograph beside one section's copy ----------------------------- Used where a section is about a person or a place and the picture belongs next to the words rather than above them. */ .ph-sec{padding:clamp(2.5rem,6vw,4.5rem) 0} .ph-sec .wrap{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr; align-items:center} @media (min-width:900px){ .ph-sec .wrap{grid-template-columns:.95fr 1.05fr} /* Photograph on the other side: swap the order and the column widths, so the copy keeps the wider of the two whichever way round it sits. */ .ph-sec.right .wrap{grid-template-columns:1.05fr .95fr} .ph-sec.right .ph-shot{order:2} } .ph-shot{margin:0} .ph-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px; box-shadow:0 18px 50px rgba(16,22,16,.16)} .ph-copy h2{margin-bottom:.6em} .ph-copy p:last-child{margin-bottom:0} /* ---- the culinary reel -------------------------------------------------- The site's own slider, run the full width of the page with the neighbouring photographs bleeding off both edges. Slide width is in vw, not per cent. A percentage flex-basis resolves against the track's content box, which excludes its padding — the homepage carousel was built that way once and 62% inside a track padded 19% each side came out at 37% of the viewport. Height is set directly rather than by aspect ratio: most of these are portrait originals, and a fixed ratio at this width would be taller than the screen on a laptop. */ .cuisine-reel{padding:clamp(2rem,5vw,3.5rem) 0} .slider-bleed{width:100vw;margin-inline:calc(50% - 50vw)} .slider-bleed .slides{padding-inline:13vw;gap:clamp(.5rem,1.2vw,1rem); border-radius:0} .slider-bleed .slide{flex:0 0 74vw} .slider-bleed .slide img{width:100%;height:clamp(320px,62vh,720px); aspect-ratio:auto;object-fit:cover;border-radius:3px} .slider-bleed .slider-prev{left:clamp(.75rem,4vw,3rem)} .slider-bleed .slider-next{right:clamp(.75rem,4vw,3rem)} .slider-bleed .slider-dots button{background:rgba(38,38,38,.25)} .slider-bleed .slider-dots button[aria-current=true]{background:var(--jb-green)} @media (max-width:900px){ .slider-bleed .slides{padding-inline:4vw} .slider-bleed .slide{flex:0 0 92vw} } /* The menu link, between the culinary page's opening paragraph and its own "menu rotates daily" line. */ .menu-cta{padding:0 0 clamp(1.5rem,3.5vw,2.25rem)} .menu-cta .wrap{text-align:center} /* The pool, full width, where the contents list used to be. Height is capped rather than set by the photograph's own ratio: the only copy of this shot is a portrait one lifted from the client's PDF, and at full page width a portrait aspect would run past the fold on its own. */ .ab-band{margin:0;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden} .ab-band img{width:100%;height:clamp(260px,46vh,520px);object-fit:cover; display:block} /* The story's pull quote, set over the bay rather than on the page. Same full-bleed mechanic as the villa story's photograph bands. */ .ab-quote{position:relative;width:100vw;margin-inline:calc(50% - 50vw); display:grid;place-items:center;overflow:hidden;isolation:isolate; min-height:clamp(340px,58vh,620px);padding:clamp(3rem,8vw,6rem) var(--gut)} .ab-quote picture,.ab-quote picture img{position:absolute;inset:0;width:100%; height:100%;object-fit:cover;z-index:0} .ab-quote::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(4,36,28,.34),rgba(4,36,28,.56))} .ab-quote .wrap{position:relative;z-index:2;max-width:46rem;padding:0; text-align:center} /* A sentence rather than a three-word quotation now, so it is set a little smaller and given a wider measure — at 2.15rem it ran to five lines across the photograph. Still the display face. */ .ab-quote .wrap{max-width:54rem} .ab-quote p{margin:0;font-family:var(--font-display);font-weight:400; font-size:clamp(1.05rem,2.2vw,1.55rem);line-height:1.45;color:#fff; text-wrap:balance;text-shadow:0 2px 22px rgba(16,22,16,.5)} .ab-s.tight{padding-top:clamp(2rem,5vw,3.5rem)} .ab-s .centre{text-align:center;margin-left:auto;margin-right:auto} /* The team and the entrance sign, side by side. The team shot ran the full width on its own; at that size a hundred faces are the size of a full stop and the picture reads as a texture rather than as people. */ .ab-duo{display:grid;gap:clamp(.75rem,2vw,1.5rem);grid-template-columns:1fr; margin:clamp(2rem,5vw,3.25rem) 0} @media (min-width:820px){.ab-duo{grid-template-columns:1.35fr .65fr; align-items:start}} .ab-duo figure{margin:0} .ab-duo img{width:100%;height:clamp(240px,42vh,420px);object-fit:cover; border-radius:3px;display:block} .ab-duo figcaption{margin-top:.75rem;font-family:var(--font-display); font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted)} /* ---------- cookie consent ---------------------------------------------- Bottom sheet rather than a centre-screen modal: it does not block the page, which matters on a site whose first impression is a full-bleed photograph. Accept and Decline are the same size and sit together — a Decline that is harder to reach than Accept is not freely given consent. */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:200; background:rgba(18,24,18,.94);backdrop-filter:saturate(1.2) blur(10px); border-top:1px solid rgba(255,255,255,.16); box-shadow:0 -12px 40px rgba(12,18,12,.28); animation:ck-up .28s ease both} @keyframes ck-up{from{transform:translateY(100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){.ck{animation:none}} .ck-in{max-width:var(--wrap);margin-inline:auto;padding:1rem var(--gut); display:flex;gap:clamp(1rem,3vw,2.5rem);align-items:center; justify-content:space-between;flex-wrap:wrap} .ck-txt{flex:1 1 22rem;min-width:0} .ck-h{margin:0 0 .2rem;font-family:var(--font-display);color:#fff; font-size:.95rem;letter-spacing:.01em} .ck-b{margin:0;color:rgba(255,255,255,.82);font-size:.83rem;line-height:1.5} .ck-b a{color:var(--jb-sage);text-decoration:underline;text-underline-offset:2px} .ck-b a:hover{color:#fff} .ck-btns{display:flex;gap:.6rem;flex:0 0 auto} .ck-btns .btn{min-width:8.5rem;justify-content:center;text-align:center} .ck .btn-outline{color:#fff;border-color:rgba(255,255,255,.5)} .ck .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff} @media (max-width:640px){ .ck-in{padding:.9rem var(--gut);gap:.85rem} .ck-btns{width:100%} .ck-btns .btn{flex:1 1 0;min-width:0} } /* Honeypot. Off-screen rather than display:none — some bots skip hidden fields but fill everything they can reach, and screen readers get aria-hidden plus tabindex="-1" so a real visitor never lands on it. */ .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px; overflow:hidden} /* ---------- Tripadvisor accolade ----------------------------------------- Bottom-left so it never sits under the header's Book Now, and z-index below the cookie banner: the banner is a decision, this is an ornament, and the two must not fight. site.js holds it back until consent has been answered. */ .ta{position:fixed;left:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem); z-index:120;max-width:min(23rem,calc(100vw - 1.5rem))} .ta-pill{display:flex;align-items:center;gap:.7rem;width:100%; background:rgba(18,24,18,.9);backdrop-filter:saturate(1.2) blur(10px); border:1px solid rgba(255,255,255,.18);border-radius:3px;cursor:pointer; padding:.6rem .85rem;text-align:left;color:#fff; box-shadow:0 10px 30px rgba(12,18,12,.3); transition:background .2s ease,border-color .2s ease} .ta-pill:hover{background:rgba(18,24,18,.97);border-color:rgba(255,255,255,.34)} .ta-score{font-family:var(--font-display);font-size:1.5rem;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .ta-score i{font-style:normal;font-size:.72rem;opacity:.7;margin-left:1px} .ta-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0} .ta-txt b{font-size:.86rem;letter-spacing:.01em} .ta-txt em{font-style:normal;font-size:.72rem;opacity:.72} .ta-chev{margin-left:auto;width:7px;height:7px;flex:0 0 auto; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(-135deg) translate(-2px,-2px);transition:transform .2s ease} .ta-pill[aria-expanded=true] .ta-chev{transform:rotate(45deg) translate(-1px,-1px)} .ta-panel{position:relative;margin-bottom:.5rem;padding:1.1rem 1.15rem 1rem; background:rgba(18,24,18,.94);backdrop-filter:saturate(1.2) blur(10px); border:1px solid rgba(255,255,255,.18);border-radius:3px;color:#fff; box-shadow:0 18px 44px rgba(12,18,12,.34); animation:ta-in .22s ease both} @keyframes ta-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.ta-panel{animation:none}} .ta-panel img{display:block;width:110px;height:auto;margin:0 auto .8rem; background:#fff;border-radius:2px;padding:6px} .ta-panel p{margin:0 0 .7rem;font-size:.83rem;line-height:1.55; color:rgba(255,255,255,.88)} .ta-panel a{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:var(--jb-sage);border-bottom:1px solid currentColor;padding-bottom:1px} .ta-panel a:hover{color:#fff} .ta-x{position:absolute;top:.4rem;right:.45rem;width:30px;height:30px; background:none;border:0;color:rgba(255,255,255,.7);font-size:1.25rem; line-height:1;cursor:pointer;border-radius:2px} .ta-x:hover{color:#fff;background:rgba(255,255,255,.12)} @media (max-width:640px){ .ta{right:clamp(.75rem,2vw,1.5rem);max-width:none} .ta-score{font-size:1.25rem} } /* ---------- About: the story, with the aerial beside it ------------------- Photograph first in the source as well as on screen, so it reads in the same order to a screen reader as it does to the eye. Stacks on narrow screens with the photograph still leading — it is the establishing shot and it earns its place above the copy. */ .ab-story .wrap{display:grid;gap:clamp(1.5rem,4vw,3.25rem); grid-template-columns:1fr;align-items:center} @media (min-width:900px){ .ab-story .wrap{grid-template-columns:.85fr 1fr} } .ab-story-shot{margin:0} .ab-story-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px; box-shadow:0 18px 44px rgba(12,18,12,.14)} .ab-story-copy{max-width:34rem} /* The opening paragraph of a page, centred — an introduction rather than the first of several paragraphs. Body face, at the page's normal size. */ .prose-lead-centre > p:first-of-type{text-align:center;max-width:46rem; margin-inline:auto;margin-bottom:clamp(1.5rem,3vw,2.25rem)} @media (max-width:560px){ .prose-lead-centre > p:first-of-type{text-align:left} } /* Two or more photographs stacked in the section-photo column. The stack is sticky on tall screens so the images stay with the reader down a long list — the retreats page runs to twenty-six dated events and the photographs would otherwise scroll away in the first third of it. */ .ph-stack{display:grid;gap:clamp(.75rem,1.6vw,1.15rem);align-content:start} @media (min-width:900px){ .ph-stack{position:sticky;top:calc(var(--hdr-h,5rem) + 1.5rem)} } .ph-stack .ph-shot img{aspect-ratio:4/5} .ph-stack .ph-shot:last-child img{aspect-ratio:3/2} /* Visible label, for fields where a placeholder cannot do the job — a date input shows the browser's own format hint, so a placeholder never appears and the field would otherwise be unlabelled on screen. */ .fld-lbl{display:block;font-size:.78rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin-bottom:.35rem} .enq-grid textarea{width:100%;background:none;border:0; border-bottom:1px solid var(--rule);padding:.55rem 0;font:inherit; color:inherit;resize:vertical;min-height:5.5rem} .enq-grid textarea:focus{outline:none;border-bottom-color:var(--jb-green)} .enq-grid input[type=date]{width:100%;background:none;border:0; border-bottom:1px solid var(--rule);padding:.5rem 0;font:inherit;color:inherit} /* A section rendered centred — heading and copy together. Left-aligns on narrow screens, where centred body copy in a single column reads ragged on both edges. */ .prose-centre{text-align:center} .prose-centre p{max-width:44rem;margin-inline:auto} @media (max-width:560px){ .prose-centre{text-align:left} .prose-centre p{margin-inline:0} } /* A full-bleed photograph used as a band between sections. 3:2 rather than a wider crop: the source is 4:3 and the ceiling lanterns live in the top third, which a cinematic crop throws away. */ .wide-shot{display:block;margin:clamp(1rem,3vw,2.5rem) 0} .wide-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 45%; display:block} @media (max-width:700px){ .wide-shot img{aspect-ratio:4/3} } /* The badge as the pill's own mark, used when no score has been supplied. White ground because the Tripadvisor artwork is supplied on white and must not be recoloured — it is their trademark, not ours. */ .ta-mark{flex:0 0 auto;width:34px;height:auto;background:#fff;border-radius:2px; padding:3px}