@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-300-normal.woff2) format('woff2');} @font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format('woff2');} @font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-latin-500-normal.woff2) format('woff2');} @font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-300-italic.woff2) format('woff2');} @font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format('woff2');} @font-face{font-family:'Karla';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/karla-latin-300-normal.woff2) format('woff2');} @font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/karla-latin-400-normal.woff2) format('woff2');} @font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/karla-latin-500-normal.woff2) format('woff2');} @font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/karla-latin-600-normal.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');} /* ========================================================================== RV Grand -------------------------------------------------------------------------- Pearl and ink, with each hotel carrying its own accent: navy for Hyderabad, wine for Varanasi. The accent is set once on and every component reads var(--accent), so a page belongs to a hotel by one attribute rather than by a hundred overrides. Three typefaces, all self-hosted: Newsreader display — headlines, the italic phrase inside them Karla body IBM Plex Mono the small letter-spaced labels that hold the layout together ========================================================================== */ :root{ /* Warm boutique palette, 19 Aug 2026. The site was pearl-grey with a blue-black ink -- correct, and cold. Cream, warm charcoal, gold and a deep teal read as hospitality rather than as a spreadsheet. Only the values changed; every variable name is the one the other 600 lines already use, so all fourteen pages warmed up at once with no markup churn. */ --pearl:#FAF5EC; --pearl-hi:#FFFCF6; --mist:#EFE4D2; /* 5.5:1 on the cream, so the mono micro-labels clear the 4.5:1 small-text floor with room to spare. */ --granite:#6E6253; --granite-dk:#4A4136; --ink:#201C16; --ink-2:#171410; --line:rgba(32,28,22,.13); --line-lt:rgba(250,245,236,.20); /* Gold is the crest's own metal. It is 2.9:1 on cream, so it is for rules, stars and icons -- never for text. --gold-dk is the one that may carry words (4.8:1). */ --gold:#B8891C; --gold-lt:#DCB45F; --gold-dk:#8F6410; --sand:#F3E9D8; --shadow:0 14px 38px rgba(60,44,20,.10); --shadow-lg:0 26px 64px rgba(60,44,20,.16); --r:14px; /* Teal is the house colour now. Hyderabad keeps it, Varanasi takes the wine. */ --accent:#0E5049; --accent-lt:#17706A; --f-display:'Newsreader',Georgia,'Times New Roman',serif; --f-body:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --pad:clamp(20px,5vw,80px); --maxw:1320px; --ease:cubic-bezier(.22,.61,.36,1); --hdr-h:74px; } /* data-h on ANY element, not only on . Setting it on the page themes the whole page; setting it on a card, a band or the booking bar themes just that piece. */ [data-h="hyderabad"]{ --accent:#0E5049; --accent-lt:#17706A; } [data-h="varanasi"]{ --accent:#8A3350; --accent-lt:#A9506D; } [data-h="group"]{ --accent:#0E5049; --accent-lt:#17706A; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} } body{margin:0;background:var(--pearl);color:var(--ink); font:400 16.5px/1.65 var(--f-body);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-family:var(--f-display);font-weight:300;letter-spacing:-.012em;margin:0} h1{font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:1.02} h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1} h3{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.2;font-weight:400} .it{font-style:italic} p{margin:0 0 1.05em} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .lede{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.6;color:var(--granite-dk);max-width:56ch} .eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase; color:var(--granite);display:block;margin-bottom:14px} .sec{padding-block:clamp(56px,8vw,116px)} .sec-tint{background:var(--pearl-hi)} .sec-dark{background:var(--ink);color:var(--pearl)} /* Doubled class on purpose. A component rule like `.pillar p` has the same specificity as `.sec-dark p` and, being later in the file, was winning — which painted dark-granite body text onto the ink band. `.sec-dark.sec-dark` outranks any single-class rule, so anything dropped into a dark band stays legible. */ .sec-dark.sec-dark .lede,.sec-dark.sec-dark p,.sec-dark.sec-dark li{color:rgba(250,245,236,.74)} .sec-dark.sec-dark .eyebrow{color:rgba(250,245,236,.58)} .rule{border:0;border-top:1px solid var(--line);margin:0} .tyref{border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 26px; margin-bottom:clamp(34px,4vw,54px);max-width:44ch;background:var(--pearl-hi)} .tyref b{display:block;font-family:var(--f-mono);font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:.06em;margin:2px 0 10px} .tyref .note{margin:0} /* the live quote on the booking form */ #bquote:empty{display:none} #bquote{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--pearl-hi); padding:16px 20px} #bquote b{display:block;font-family:var(--f-mono);font-size:1.35rem;letter-spacing:.02em} #bquote span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--granite);margin-top:6px;line-height:1.7} .fnote{font-size:12.5px;margin:7px 0 0;color:var(--accent)} /* ---------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase; padding:14px 26px;border:1px solid var(--ink);color:var(--ink);text-decoration:none; background:none;cursor:pointer;transition:background .22s var(--ease),color .22s var(--ease)} .btn:hover{background:var(--ink);color:var(--pearl)} .btn-fill{background:var(--accent);border-color:var(--accent);color:#fff} .btn-fill:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn-lt{border-color:rgba(250,245,236,.4);color:var(--pearl)} .btn-lt:hover{background:var(--pearl);color:var(--ink);border-color:var(--pearl)} /* Not yet — the visitor has a question to answer first. */ .btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed} .btn[aria-disabled="true"]:hover{background:none;color:inherit} .ledger .btn[aria-disabled="true"]:hover{background:none;color:var(--pearl)} /* ---------------------------------------------------------------- header */ .hdr{position:sticky;top:0;z-index:60;background:var(--pearl-hi);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:22px;height:var(--hdr-h); max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .mark{text-decoration:none;line-height:1;flex:none;display:flex;align-items:center;gap:11px} /* The crest carries a laurel wreath, a crown and the monogram inside a 200-unit box. At 42px none of that survived — it read as a small gold smudge beside a large wordmark. The header is 74px tall, so 52 leaves it room to breathe. */ .mark > svg{flex:none;width:52px;height:52px} /* Gold on pearl was the weak pairing: the lightest stop, #f0d68a, is a whisker from the background, so the top of every leaf disappeared. Deepened here, and lifted again on the dark footer where the original gold was right all along. It has to be done with a filter rather than by restyling the gradient stops, because all three crests on a page share one gradient id and the first one in the document wins. */ .mark stop{stop-color:#a97b18} .mark stop:first-child{stop-color:#dcb45f} .mark stop:last-child{stop-color:#8f6410} .foot .mark > svg{filter:brightness(1.3) saturate(1.05)} .mark .wm{display:block} .mark b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.44rem;letter-spacing:-.015em} .mark .wm > span{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.34em; text-transform:uppercase;color:var(--granite);margin-top:3px} .switch{display:flex;border:1px solid var(--line);margin-right:auto} .switch a{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; padding:9px 15px;text-decoration:none;color:var(--granite-dk);transition:background .2s,color .2s} .switch a+a{border-left:1px solid var(--line)} .switch a.on{background:var(--accent);color:#fff} .switch a:not(.on):hover{background:var(--mist);color:var(--ink)} .nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)} .nav a{font-size:14.5px;text-decoration:none;color:var(--granite-dk);transition:color .2s} .nav a:hover,.nav a[aria-current]{color:var(--ink)} .nav .btn{padding:12px 22px} /* .nav a wins on specificity over .btn/.btn-fill, so the button's own colours have to be restated here or the Reserve label is drawn in the link grey. */ .nav a.btn{color:var(--ink)} .nav a.btn-fill,.nav a.btn-fill:hover{color:#fff} .nav a.btn:hover{color:var(--pearl)} .drawer nav a.btn,.drawer a.btn-fill{color:#fff} .burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)} .burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none} .drawer{position:fixed;inset:0;background:var(--pearl-hi);z-index:70;padding:24px var(--pad); display:none;flex-direction:column;overflow-y:auto} .drawer.open{display:flex} .drawer .dr-top{display:flex;justify-content:space-between;align-items:center;height:var(--hdr-h);margin-bottom:14px} .drawer nav{display:flex;flex-direction:column} .drawer nav a{font-family:var(--f-display);font-size:1.7rem;font-weight:300;text-decoration:none; padding:13px 0;border-bottom:1px solid var(--line)} .drawer .switch{margin:0 0 22px} .drawer .switch a{flex:1;text-align:center;padding:13px;font-size:11px} /* ---------------------------------------------------- the stay ledger */ /* The one-line version, for phones. Hidden at desktop width where the whole bar fits across the screen anyway. */ .l-peek{display:none;width:100%;align-items:center;justify-content:space-between;gap:14px; background:none;border:0;padding:13px var(--pad);cursor:pointer;color:var(--pearl); font:inherit;text-align:left;min-height:60px} .pk-l{display:grid;gap:3px;min-width:0} .pk-l b{font:400 15px/1.25 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pk-l span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:rgba(250,245,236,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pk-r{display:flex;align-items:center;gap:10px;flex:none} .pk-r b{font-family:var(--f-mono);font-size:15px} .pk-r svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none; transition:transform .25s var(--ease);opacity:.7} .ledger.open .pk-r svg{transform:rotate(180deg)} .l-peek:focus-visible{outline:2px solid var(--accent-lt);outline-offset:-3px} .ledger{position:sticky;top:var(--hdr-h);z-index:55;background:var(--ink);color:var(--pearl); border-bottom:1px solid rgba(255,255,255,.09)} .ledger-in{display:flex;align-items:stretch;min-height:74px; max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .fld{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px; padding:12px 18px;border-right:1px solid var(--line-lt);min-width:0} .fld:first-child{padding-left:0} .fld label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:rgba(250,245,236,.6)} .fld input,.fld select{background:none;border:0;font:400 14.5px var(--f-body);color:var(--pearl); width:100%;cursor:pointer;padding:0} .fld select{appearance:none} .fld option{background:var(--ink);color:var(--pearl)} .fld input:focus,.fld select:focus{outline:2px solid var(--accent-lt);outline-offset:3px} .fld input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45;cursor:pointer} .guests{display:flex;align-items:center;gap:12px} .guests button{width:26px;height:26px;border:1px solid var(--line-lt);background:none;color:var(--pearl); font-size:15px;line-height:1;cursor:pointer;border-radius:50%;flex:none} .guests button:hover{background:rgba(255,255,255,.12)} .guests b{font:500 15px var(--f-body);min-width:1.2em;text-align:center} .quoted{background:var(--accent);flex:0 0 auto;display:flex;flex-direction:column;justify-content:center; gap:3px;padding:12px 22px;border-right:0} .quoted .q-meta{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.72)} .quoted .q-amt{font-family:var(--f-mono);font-size:21px;font-weight:500;display:flex;align-items:baseline;gap:9px} .quoted .q-amt small{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.72)} /* When online booking cannot answer, the quote cell offers the desk instead of an em-dash. Underlined because it is a telephone number and a guest should be in no doubt it can be tapped. */ .quoted .q-call{color:inherit;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .quoted .q-call:hover,.quoted .q-call:focus-visible{text-decoration-thickness:2px} .ledger .btn{margin:12px 0 12px 20px;align-self:center;white-space:nowrap; border-color:rgba(250,245,236,.4);color:var(--pearl)} .ledger .btn:hover{background:var(--pearl);color:var(--ink)} /* ---------------------------------------------------------------- hero */ .hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;overflow:hidden} .hero .media{position:absolute;inset:0} .hero .media img,.hero .media picture{width:100%;height:100%;object-fit:cover} .hero .media img{opacity:.74} /* .62 was tuned against the old cold ink; on the warm charcoal it read as haze rather than as a photograph behind glass. */ /* Two scrims, not one. The vertical gradient alone left the lede sitting over a bright window in the Hyderabad photograph; the horizontal one darkens the side the words are actually on without flattening the whole picture. */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(24,20,15,.55),rgba(24,20,15,.14) 42%,rgba(24,20,15,.82)), linear-gradient(90deg,rgba(24,20,15,.5),rgba(24,20,15,.12) 56%,rgba(24,20,15,0))} .hero-in{position:relative;z-index:2;color:var(--pearl);width:100%; padding-block:clamp(48px,9vw,96px);max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .hero h1{max-width:15ch} .hero .lede{color:rgba(250,245,236,.8);margin-top:22px;max-width:46ch} .hero .eyebrow{color:rgba(250,245,236,.68)} .hero-meta{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3.4vw,44px);margin-top:38px;padding-top:22px; border-top:1px solid var(--line-lt)} .hero-meta div{display:flex;flex-direction:column;gap:4px;padding-block:8px} .hero-meta b{font-family:var(--f-mono);font-size:14px;font-weight:500} .hero-meta span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:rgba(250,245,236,.68)} /* a hero with no photograph yet: the accent carries it rather than a grey box */ .hero.noimg{background:linear-gradient(160deg,var(--ink) 0%,color-mix(in srgb,var(--accent) 55%,var(--ink)) 100%)} .hero.noimg::after{background:linear-gradient(180deg,rgba(24,20,15,.3),rgba(24,20,15,.62))} /* ---------------------------------------------------------------- layout bits */ .split{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr 1fr;align-items:center} .split.narrow{grid-template-columns:.85fr 1.15fr} .cols{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .head{max-width:60ch;margin-bottom:clamp(30px,4vw,54px)} .pillar h3{margin-bottom:9px} .cap-tag{display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:4px 9px; margin:0 0 11px} .sec-dark .cap-tag{color:var(--pearl);border-color:var(--line-lt)} .pillar p{color:var(--granite-dk);font-size:15.5px;margin:0} .pillar > svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1.3;fill:none; margin-bottom:15px;display:block} .sec-dark .pillar > svg{stroke:var(--pearl)} /* .pillar p and .sec-dark p have equal specificity, and .pillar p comes later, so on the dark band the body text was being drawn in the dark granite — about 1.9:1 against the ink. Restate it here. */ .sec-dark .pillar p{color:rgba(250,245,236,.74)} /* ------------------------------------------------------- hotel cards */ .hcards{align-items:stretch} .hcard{display:flex;flex-direction:column;text-decoration:none;color:inherit; background:var(--pearl-hi);border:1px solid var(--line);transition:border-color .25s var(--ease)} .hcard:hover{border-color:var(--accent)} .hcard .media{overflow:hidden} .hcard .media img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .7s var(--ease)} .hcard:hover .media img{transform:scale(1.035)} .hcard-b{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1} .hcard-b p{color:var(--granite-dk);font-size:15px;margin:0;flex:1} .hcard-b .btn{margin-top:14px;pointer-events:none} /* each card carries its own hotel's accent, so the pair reads as two places */ /* ---------------------------------------------------------------- rooms */ .room{border-top:1px solid var(--line);padding-top:clamp(22px,3vw,38px); display:grid;gap:clamp(20px,3.4vw,52px);grid-template-columns:1.05fr .95fr;align-items:start} .room + .room{margin-top:clamp(34px,5vw,68px)} .room .media img{aspect-ratio:4/3;object-fit:cover;width:100%} .room-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:6px} .room-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--granite)} .rate{text-align:right;flex-shrink:0} .rate b{font-family:var(--f-mono);font-size:19px;font-weight:500;display:block} .rate span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--granite)} .room-body p{color:var(--granite-dk);font-size:15.5px} .specs{display:flex;flex-wrap:wrap;gap:7px 9px;margin:16px 0 20px;padding:0;list-style:none} .specs li{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase; border:1px solid var(--line);padding:6px 11px;color:var(--granite-dk)} .quote{margin:0;max-width:62ch} .quote p{font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,2rem);font-weight:300; line-height:1.35;font-style:italic;margin-bottom:18px} .quote cite{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--granite);font-style:normal} /* ---------------------------------------------------------------- amenities */ .amen{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border:1px solid var(--line)} .amen > div{background:var(--pearl);padding:clamp(20px,2.4vw,30px)} .amen h3{font-size:1.05rem;margin-bottom:7px} .amen p{font-size:14.5px;color:var(--granite-dk);margin:0} .amen svg{width:24px;height:24px;stroke:var(--accent);stroke-width:1.3;fill:none; margin-bottom:13px;display:block} /* ---------------------------------------------------------------- gallery */ .grid-g{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .gcell{position:relative;overflow:hidden;cursor:zoom-in;background:var(--mist);border:0;padding:0} .gcell img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .6s var(--ease)} .gcell:hover img{transform:scale(1.045)} .lb{position:fixed;inset:0;background:rgba(13,16,20,.94);z-index:90;display:none; align-items:center;justify-content:center;padding:clamp(14px,4vw,50px)} .lb.open{display:flex} .lb img{max-width:100%;max-height:82vh;object-fit:contain} .lb .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(250,245,236,.8); font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .lb button{position:absolute;top:20px;right:24px;background:none;border:0;color:var(--pearl); font-size:26px;cursor:pointer;line-height:1} /* ---------------------------------------------------------------- forms */ .form{display:grid;gap:18px 20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .f{display:flex;flex-direction:column;gap:7px} .f.wide{grid-column:1/-1} .f label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--granite)} .f label i.req,.f label i.opt{font-style:normal;margin-left:.5em;letter-spacing:.1em} .f label i.req{color:var(--accent)} .f label i.opt{color:var(--granite)} .f input,.f select,.f textarea{font:400 15.5px var(--f-body);color:var(--ink);background:var(--pearl-hi); border:1px solid var(--line);padding:12px 14px;width:100%} .f textarea{min-height:120px;resize:vertical} .f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px} .sec-dark .f input,.sec-dark .f select,.sec-dark .f textarea{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2);color:var(--pearl)} .sec-dark .f label{color:rgba(250,245,236,.6)} .note{font-size:13.5px;color:var(--granite);margin-top:14px} /* ---------------------------------------------------------------- results */ .results{display:grid;gap:14px;margin-top:26px} .res{border:1px solid var(--line);background:var(--pearl-hi);padding:clamp(16px,2vw,24px); display:grid;gap:16px;grid-template-columns:1fr auto;align-items:center} .res h3{margin-bottom:4px} .res .free{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--granite)} .res .brk{margin:0;font-family:var(--f-mono);font-size:12.5px;text-align:right;min-width:210px} .res .brk div{display:flex;justify-content:space-between;gap:18px;padding:2px 0} .res .brk .t{border-top:1px solid var(--line);margin-top:6px;padding-top:7px;font-size:15px;font-weight:500} /* ---------------------------------------------------------------- footer */ .foot{background:var(--ink);color:rgba(250,245,236,.72);padding-block:clamp(46px,6vw,84px);font-size:14.5px} .foot a{color:rgba(250,245,236,.72);text-decoration:none} .foot a:hover{color:var(--pearl)} .foot .fh{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase; color:rgba(250,245,236,.58);margin:0 0 14px;font-weight:400;line-height:1.6} /* .mark span is granite, which is tuned for the pale background and comes out at about 2.7:1 down here on the ink. */ .foot .mark .wm > span{color:rgba(250,245,236,.58)} /* Five columns, not four and an orphan. The shared .cols minimum of 250px fits only four across at desktop and wrapped Reservations onto a line of its own, leaving a hole beside it. */ .foot .cols{gap:clamp(26px,3vw,50px);grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0} /* A 17px-tall link is a poor target on a phone: WCAG asks for 24px, and a thumb wants more. The padding grows the tap area without changing the spacing you see, because the gap came off in exchange. */ .foot li{padding-block:7px} .foot li a{display:inline-block;padding-block:2px} .legal{border-top:1px solid var(--line-lt);margin-top:clamp(34px,4vw,58px);padding-top:22px; display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:rgba(250,245,236,.58);align-items:center} .legal a{display:inline-block;padding-block:8px} /* ---------------------------------------------------------------- misc */ .flash{padding:14px 18px;border-left:3px solid var(--accent);background:var(--pearl-hi);margin-bottom:22px} .wa{position:fixed;right:18px;bottom:18px;z-index:50;display:grid;gap:10px} .wa a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ink); color:var(--pearl);text-decoration:none;box-shadow:0 6px 20px rgba(24,20,15,.26)} .wa a:hover{background:var(--accent)} .wa svg{width:20px;height:20px;fill:currentColor} @media (max-width:980px){ .split,.split.narrow,.room{grid-template-columns:1fr} .room .media{order:-1} } @media (max-width:860px){ .nav{display:none} .burger{display:block;margin-left:auto} .switch{margin-right:0} /* The stay bar is sticky, and stacked on a phone it stood 409px tall — half the screen, permanently, on every page. Collapsed to one line it is about 64px, and it opens on a tap. The fields themselves are unchanged underneath. */ .l-peek{display:flex} .ledger:not(.open) .ledger-in{display:none} .ledger-in{flex-wrap:wrap;min-height:0;padding-inline:0} .fld{flex:1 1 46%;border-bottom:1px solid var(--line-lt);padding-left:18px} .quoted{flex:1 1 100%;border-bottom:1px solid var(--line-lt)} .ledger .btn{margin:14px 18px;width:calc(100% - 36px)} .hero{min-height:auto;padding-top:40px} } /* On a 390px phone the wordmark, the hotel switch and the burger came to 421px and pushed the burger off the right edge. Tighten the row rather than dropping the switch — it is how you change hotel, and it has to stay reachable. */ @media (max-width:620px){ .hdr-in{gap:12px} .switch a{padding:8px 10px;font-size:9.5px;letter-spacing:.1em} .mark b{font-size:1.24rem} .mark .wm > span{letter-spacing:.26em} .mark{gap:8px} .mark > svg{width:44px;height:44px} .burger{padding:8px 0 8px 8px} } /* ========================================================================== THE BOOKING FLOW Four steps on one page. Everything below is only ever seen on book.html and manage.html, so it is kept together rather than threaded through the file. ========================================================================== */ .steps{display:flex;list-style:none;margin:0 0 clamp(32px,4vw,56px);padding:0; gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line)} .steps li{display:flex;align-items:center;gap:10px;padding:0 22px 16px 0;color:var(--granite); font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase; position:relative} .steps li b{width:24px;height:24px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;font-weight:400;font-size:11px;letter-spacing:0;flex:none} .steps li.on{color:var(--ink)} .steps li.on b{background:var(--accent);border-color:var(--accent);color:#fff} .steps li.on::after{content:"";position:absolute;left:0;right:22px;bottom:-1px;height:2px; background:var(--accent)} .steps li.done{color:var(--granite-dk)} .steps li.done b{background:var(--mist);border-color:var(--mist)} @media (max-width:640px){ .steps li span{display:none} .steps li{padding-right:14px;flex:1} .steps li.on span{display:inline} .steps li.on{flex:3} } .stayform{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .stayform .f{display:flex;flex-direction:column;gap:6px} .narrowform{max-width:32rem} /* ------------------------------------------------------------ room cards */ .rcard{display:grid;grid-template-columns:.9fr 1.4fr;gap:clamp(18px,2.6vw,36px); border:1px solid var(--line);background:var(--pearl-hi);padding:clamp(16px,2vw,22px); margin-bottom:18px;align-items:start} .rcard .media img{aspect-ratio:4/3;object-fit:cover;width:100%} .rcard.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .rcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px; margin-bottom:8px} .rcard-b > .muted{margin-bottom:14px} @media (max-width:900px){ .rcard{grid-template-columns:1fr} } .tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase; padding:5px 9px;border:1px solid var(--line);white-space:nowrap;flex:none} .tag.last{border-color:#B4761E;color:#8A5A14;background:#FBF3E4} .tag.out{border-color:#9A3B37;color:#8A2F2B;background:#FBECEB} .tag.warn{border-color:#B4761E;color:#8A5A14;background:#FBF3E4} .tag.ok{border-color:#3E7A57;color:#2E6042;background:#E9F3ED} .tag.muted{color:var(--granite)} /* ------------------------------------------------------------ rate plans */ .plans{display:grid;gap:10px} .plan{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center; border:1px solid var(--line);background:#fff;padding:15px 18px} .plan-adv{border-left:3px solid var(--accent)} .plan-l b{font-family:var(--f-display);font-weight:400;font-size:1.12rem;display:inline-block} .plan-l p{margin:5px 0 0;font-size:13.5px;color:var(--granite-dk);max-width:42ch} .plan-l .inc{color:var(--granite);font-size:12.5px} .plan .save{display:inline-block;margin-left:10px;font-family:var(--f-mono);font-size:9px; letter-spacing:.14em;text-transform:uppercase;color:#2E6042;background:#E9F3ED; border:1px solid #BCD9C7;padding:3px 8px;vertical-align:2px} .plan-r{text-align:right;display:grid;gap:3px;justify-items:end;min-width:160px} .plan-r .amt{font-family:var(--f-mono);font-size:1.32rem;letter-spacing:.01em} .plan-r span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--granite)} .plan-r .btn{margin-top:9px;padding:11px 20px} .plan-r .btn[disabled]{opacity:.45;cursor:not-allowed;background:none;border-color:var(--line); color:var(--granite)} @media (max-width:620px){ .plan{grid-template-columns:1fr;gap:12px} .plan-r{text-align:left;justify-items:start} .plan-r .btn{width:100%} } /* -------------------------------------------------------- the summary rail */ .sumbox{border:1px solid var(--line);background:var(--pearl-hi);padding:22px 24px; position:sticky;top:calc(var(--hdr-h) + 90px)} .sumbox h3{margin-bottom:14px} .sumbox:empty{display:none} .sum{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0} .sum dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--granite);padding-top:3px} .sum dd{margin:0;font-size:15px} .sum.wide{grid-template-columns:auto 1fr;gap:11px 26px;margin-top:26px} .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px; border-top:1px solid var(--line);margin:16px 0 12px;padding-top:14px} .sum-total span{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--granite)} .sum-total b{font-family:var(--f-mono);font-size:1.44rem} @media (max-width:980px){ .sumbox{position:static} } .cancelbox{border:1px solid var(--line);border-left:3px solid #9A3B37;background:var(--pearl-hi); padding:20px 24px;margin-top:32px;max-width:46rem} .cancelbox h3{margin-bottom:8px} .btn-danger,.btn-danger:hover{background:#8A2F2B;border-color:#8A2F2B;color:#fff} .fnote.bad{color:#8A2F2B} .flash.ok{border-left-color:#3E7A57} /* ========================================================================== ROOMS AND GUESTS One block per room with adults and children stepped inside it, rather than three flat dropdowns that cannot say who is sleeping where. ========================================================================== */ .occ{position:relative} .occbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left; font:400 14.5px var(--f-body);color:inherit} .occbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none; flex:none;opacity:.6;transition:transform .2s var(--ease)} .occbtn[aria-expanded="true"] svg{transform:rotate(180deg)} .occbtn:focus-visible{outline:2px solid var(--accent-lt);outline-offset:4px} .occpanel{position:absolute;z-index:80;top:calc(100% + 14px);left:-18px;min-width:290px; background:var(--pearl-hi);color:var(--ink);border:1px solid var(--line); box-shadow:0 18px 44px rgba(24,20,15,.22);padding:6px 18px 16px} .occrow{padding:14px 0;border-bottom:1px solid var(--line)} .occrow:last-child{border-bottom:0} .occrow-t{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px} .occrow-t b{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase; color:var(--granite);font-weight:400} .occdel{background:none;border:0;padding:4px 0;cursor:pointer;font:400 12.5px var(--f-body); color:var(--granite-dk);text-decoration:underline;text-underline-offset:3px} .occdel:hover{color:#8A2F2B} .occline{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px 0} .occline > span{font-size:14.5px} .occstep{display:flex;align-items:center;gap:12px} .occstep button{width:30px;height:30px;border:1px solid var(--line);background:none; color:var(--ink);cursor:pointer;font:400 15px var(--f-body);line-height:1; display:grid;place-items:center;transition:border-color .18s,background .18s} .occstep button:hover:not([disabled]){border-color:var(--accent);background:#fff} .occstep button[disabled]{opacity:.32;cursor:not-allowed} .occstep .n{font-family:var(--f-mono);font-size:14.5px;min-width:1.4ch;text-align:center} .occfoot{display:flex;align-items:center;justify-content:space-between;gap:14px; border-top:1px solid var(--line);margin-top:2px;padding-top:14px} .occadd{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--accent); font:400 13.5px var(--f-body);text-decoration:underline;text-underline-offset:3px} .occadd[disabled]{color:var(--granite);cursor:not-allowed;text-decoration:none} .occdone{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase; padding:9px 17px;border:1px solid var(--ink);background:var(--ink);color:var(--pearl);cursor:pointer} .occdone:hover{background:var(--accent);border-color:var(--accent)} /* inside the dark ledger the trigger is pearl, but the panel stays a light card */ .occfld .occbtn{color:var(--pearl)} .occfld .occpanel{left:-18px} /* the booking form gives it two columns of the grid so the summary has room */ .stayform .wide2{grid-column:span 2} .stayform .occ .occbtn{border:1px solid var(--line);background:#fff;padding:11px 13px; min-height:44px} .stayform .occpanel{left:0} /* A 290px panel hanging off a half-width field runs straight off a phone screen and the steppers land outside the viewport. Below this width the field it belongs to takes the full row, and the panel is pinned to both edges of it. */ @media (max-width:700px){ .stayform .wide2{grid-column:1/-1} .occfld{flex:1 1 100% !important} .occpanel{left:0;right:0;min-width:0} .occfld .occpanel{left:0} } /* ========================================================================== THE GROUP FRONT PAGE ========================================================================== */ /* --- a hero that is more than one hotel ------------------------------------ */ .hero-group{min-height:min(90vh,860px)} .hero-group .media{position:absolute;inset:0} .gframe{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)} .gframe.on{opacity:1} .gframe picture,.gframe img{width:100%;height:100%;object-fit:cover} /* Without JavaScript only the first frame ever has .on, and it simply stays — a still hero rather than an empty box. */ .hero-group .hero-in{padding-block:clamp(56px,10vw,120px)} .hero-group h1{max-width:17ch} .hero-group .hero-meta b{font-size:1.05rem} /* --- the sentence that says what the company is ---------------------------- */ .statement{padding-block:clamp(52px,7vw,96px)} .statement .big{font-family:var(--f-display);font-weight:300; font-size:clamp(1.35rem,2.9vw,2.15rem);line-height:1.34;letter-spacing:-.01em; max-width:38ch;margin:0;color:var(--ink)} /* --- each hotel gets a band, not a card ----------------------------------- */ .props .head{margin-bottom:clamp(34px,4vw,56px)} .prop{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.4vw,68px); align-items:center;padding-block:clamp(30px,4vw,52px)} .prop + .prop{border-top:1px solid var(--line)} .prop.flip .prop-media{order:2} .prop-media img{aspect-ratio:4/3;object-fit:cover;width:100%} .prop-body h2{margin:2px 0 14px} .prop-body .lede{margin-bottom:22px} .prop-hi{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px; border-top:1px solid var(--line);padding-top:19px} .prop-hi li{display:grid;gap:2px} .prop-hi b{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:400} .prop-hi span{font-size:14.5px;color:var(--granite-dk);max-width:52ch} .prop-go{display:flex;flex-wrap:wrap;gap:10px;margin:0} @media (max-width:980px){ .prop{grid-template-columns:1fr;gap:22px} .prop.flip .prop-media{order:0} } /* --- the dining / events pair --------------------------------------------- */ .xtras{align-items:start;gap:clamp(30px,5vw,72px)} .xtras h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:12px} .xtras .lede{margin-bottom:20px} /* ========================================================================== THE FRONT PAGE — warm boutique, 19 Aug 2026 Everything below is only ever loaded by index.html (all of it is under .home or prefixed .hs-/.hx-), so it cannot reach the other thirteen pages. The page before this one was a tariff board: correct, dense, and cold. This one leads with the photographs the hotels already have, puts the live booking widget on top of them, and only then gets to the numbers. ========================================================================== */ .home{background:var(--pearl)} .home .btn{border-radius:999px} .home .btn-fill{box-shadow:0 8px 20px rgba(14,80,73,.22)} .home .btn-fill:hover{transform:translateY(-1px)} .home .btn{transition:background .25s,color .25s,border-color .25s,transform .25s} /* Sections fade up as they arrive. The hidden state is gated on html.reveal, which only home.js sets, and which home.js also removes after three seconds no matter what. A decorative animation must never be able to leave real content invisible -- an earlier version hid the last two bands of the page when the observer did not fire, and the page simply ended in a blank gap above the footer. */ .reveal .rise{opacity:0;transform:translateY(22px)} .rise{transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal .rise.seen{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal .rise{opacity:1;transform:none;transition:none} } /* --- the hero ------------------------------------------------------------- */ .hs{position:relative;overflow:hidden;background:var(--ink); min-height:min(94vh,880px);display:flex;flex-direction:column;justify-content:flex-end} .hs-media{position:absolute;inset:0} .hs-media .gframe{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)} .hs-media .gframe.on{opacity:1} .hs-media img,.hs-media picture{width:100%;height:100%;object-fit:cover;display:block} /* A slow drift on the frame that is showing. Seven seconds a frame, so the movement is felt rather than watched. */ .hs-media .gframe.on img{animation:hsdrift 11s linear both} @keyframes hsdrift{from{transform:scale(1.005)}to{transform:scale(1.075)}} @media (prefers-reduced-motion:reduce){ .hs-media .gframe.on img{animation:none} } .hs::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(24,20,15,.62) 0%,rgba(24,20,15,.18) 34%,rgba(24,20,15,.88) 100%), linear-gradient(92deg,rgba(24,20,15,.58),rgba(24,20,15,.10) 62%,rgba(24,20,15,0))} .hs-in{position:relative;z-index:2;color:var(--pearl);width:100%;max-width:var(--maxw); margin:0 auto;padding:clamp(90px,13vw,150px) var(--pad) 0} .hs-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px; border:1px solid rgba(250,245,236,.34);border-radius:999px;backdrop-filter:blur(6px); background:rgba(24,20,15,.28);font-family:var(--f-mono);font-size:10px; letter-spacing:.15em;text-transform:uppercase;color:rgba(250,245,236,.92)} .hs-badge svg{width:14px;height:14px;fill:var(--gold-lt)} .hs h1{font-size:clamp(2.5rem,6vw,4.6rem);margin:22px 0 0;max-width:16ch; text-shadow:0 2px 30px rgba(24,20,15,.4)} .hs h1 .it{color:var(--gold-lt)} .hs-lede{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.62;margin:20px 0 0; max-width:48ch;color:rgba(250,245,236,.86)} .hs-facts{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none} .hs-facts li{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px; background:rgba(250,245,236,.1);border:1px solid rgba(250,245,236,.18); font-size:13px;color:rgba(250,245,236,.94);backdrop-filter:blur(4px)} .hs-facts svg{width:14px;height:14px;stroke:var(--gold-lt);stroke-width:1.9;fill:none;flex:none} /* --- the booking widget, floating on the photograph ----------------------- */ /* This is the site-wide sticky ledger, moved inside the hero and repainted. Not a copy: the same ids, so site.js keeps quoting live prices into it. */ .hs-book{position:relative;z-index:3;width:100%;max-width:var(--maxw); margin:clamp(34px,5vw,58px) auto 0;padding:0 var(--pad) clamp(30px,4vw,48px)} .home .ledger{position:static;background:var(--pearl-hi);color:var(--ink); border:0;border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:visible} .home .ledger-in{padding:6px 6px 6px 10px;min-height:78px;max-width:none; border-radius:var(--r);align-items:stretch} .home .fld{border-right:1px solid var(--line);padding:12px 18px} .home .fld:first-child{padding-left:12px} .home .fld label{color:var(--granite)} .home .fld input,.home .fld select{color:var(--ink);font-size:15px} .home .fld option{background:#fff;color:var(--ink)} .home .fld input::-webkit-calendar-picker-indicator{filter:none;opacity:.5} .home .occfld .occbtn{color:var(--ink)} .home .quoted{background:var(--accent);border-radius:10px;margin:6px 0;padding:12px 22px; color:#fff} .home .ledger .btn{margin:6px 6px 6px 14px;border:0;border-radius:10px; background:var(--gold);color:#231a08;font-weight:600;padding:0 26px;align-self:stretch; box-shadow:0 8px 18px rgba(184,137,28,.3)} .home .ledger .btn:hover{background:var(--gold-dk);color:#fff} .home .ledger .btn[aria-disabled="true"]{background:var(--mist);color:var(--granite);box-shadow:none} .home .ledger .btn[aria-disabled="true"]:hover{background:var(--mist);color:var(--granite)} .hs-note{margin:14px 0 0;font-size:13px;color:rgba(250,245,236,.8);display:flex; align-items:center;gap:9px} .hs-note svg{width:15px;height:15px;stroke:var(--gold-lt);stroke-width:1.9;fill:none;flex:none} /* --- the reassurance strip ------------------------------------------------ */ .hx-trust{background:var(--sand);border-bottom:1px solid var(--line)} .hx-trust .wrap{display:grid;gap:clamp(18px,2.4vw,34px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-block:clamp(26px,3vw,40px)} .hx-t{display:flex;gap:14px;align-items:flex-start} .hx-t svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1.45;fill:none;flex:none; stroke-linecap:round;stroke-linejoin:round;margin-top:2px} .hx-t b{display:block;font-size:15px;margin-bottom:4px} .hx-t span{font-size:13.5px;line-height:1.5;color:var(--granite-dk)} /* --- section furniture ---------------------------------------------------- */ .hx-head{text-align:center;max-width:56ch;margin:0 auto clamp(34px,4.4vw,58px)} .hx-head .eyebrow{color:var(--gold-dk)} .hx-head h2{margin-top:12px} .hx-head .lede{margin:16px auto 0;color:var(--granite-dk)} .hx-rule{display:block;width:52px;height:2px;margin:16px auto 0; background:linear-gradient(90deg,var(--gold-lt),var(--gold))} .hx-more{text-align:center;margin-top:clamp(30px,4vw,48px)} /* --- the two hotels ------------------------------------------------------- */ .hx-props{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr 1fr} .hx-prop{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(380px,42vw,520px); display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow); background:var(--ink);isolation:isolate} .hx-prop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1s var(--ease)} .hx-prop:hover img{transform:scale(1.06)} .hx-prop::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(24,20,15,0) 0%,rgba(24,20,15,.20) 28%,rgba(24,20,15,.72) 56%,rgba(24,20,15,.95) 100%)} .hx-prop-b{position:relative;padding:clamp(24px,2.8vw,38px);color:var(--pearl)} .hx-prop .eyebrow{color:var(--gold-lt)} .hx-prop h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:8px 0 10px;color:#fff} .hx-prop p{font-size:15px;line-height:1.6;color:rgba(250,245,236,.88);margin:0;max-width:42ch} .hx-prop-r{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:22px} .hx-prop-r .hx-price{flex:1 1 100%} .hx-price{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em; color:rgba(250,245,236,.86);display:flex;align-items:baseline;gap:8px} .hx-price .amt{font-size:22px;font-weight:500;color:var(--gold-lt)} .hx-prop .btn{border-radius:999px} .hx-prop .btn-lt{background:rgba(250,245,236,.1);backdrop-filter:blur(4px)} .hx-tagpill{position:absolute;top:18px;left:18px;z-index:1;padding:7px 14px;border-radius:999px; background:rgba(255,255,255,.92);color:var(--accent);font-family:var(--f-mono);font-size:9.5px; letter-spacing:.15em;text-transform:uppercase} /* --- the rooms ------------------------------------------------------------ */ /* Five room types, so five columns at full width rather than four and a lonely fifth on its own row. */ .hx-rooms{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:repeat(5,1fr)} @media (max-width:1240px){ .hx-rooms{grid-template-columns:repeat(3,1fr)} } @media (max-width:820px){ .hx-rooms{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .hx-rooms{grid-template-columns:1fr} } .hx-room{background:var(--pearl-hi);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow);display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .hx-room:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .hx-room-img{position:relative;overflow:hidden} .hx-room-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)} .hx-room:hover .hx-room-img img{transform:scale(1.06)} .hx-city{position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:999px; background:rgba(255,255,255,.93);font-family:var(--f-mono);font-size:9px;letter-spacing:.15em; text-transform:uppercase;color:var(--accent)} .hx-room-b{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1} .hx-room-b h3{font-size:1.28rem;margin-bottom:8px} .hx-room-b > p{font-size:14px;line-height:1.55;color:var(--granite-dk);margin:0 0 16px} .hx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 auto;padding:0;list-style:none} .hx-chips li{font-size:11.5px;padding:5px 11px;border-radius:999px;background:var(--sand); color:var(--granite-dk)} .hx-room-f{display:flex;align-items:flex-end;justify-content:space-between;gap:14px; margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .hx-room-f .rate{text-align:left} .hx-room-f .rate .amt{font-family:var(--f-mono);font-size:1.4rem;font-weight:500; color:var(--accent);display:block;line-height:1.1} .hx-room-f .rate span{font-family:var(--f-mono);font-size:9px;letter-spacing:.11em; text-transform:uppercase;color:var(--granite);display:block;margin-top:3px} /* --- book direct ---------------------------------------------------------- */ .hx-direct{background:var(--accent);color:var(--pearl);position:relative;overflow:hidden} .hx-direct::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none; background:radial-gradient(900px 420px at 82% 8%,var(--gold-lt),transparent 62%)} .hx-direct .wrap{position:relative} .hx-direct h2{color:#fff} .hx-direct .eyebrow{color:var(--gold-lt)} .hx-direct .lede{color:rgba(250,245,236,.86)} .hx-save{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:.85fr 1.15fr;align-items:center} .hx-savebox{background:rgba(250,245,236,.08);border:1px solid rgba(250,245,236,.2); border-radius:var(--r);padding:clamp(24px,3vw,36px);backdrop-filter:blur(4px)} .hx-savebox b{display:block;font-family:var(--f-display);font-weight:300; font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--gold-lt)} .hx-savebox span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:rgba(250,245,236,.76)} .hx-savebox p{margin:18px 0 0;font-size:14.5px;line-height:1.6;color:rgba(250,245,236,.88)} .hx-ticks{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none} .hx-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55; color:rgba(250,245,236,.9)} .hx-ticks svg{width:19px;height:19px;stroke:var(--gold-lt);stroke-width:2.1;fill:none;flex:none; margin-top:2px;stroke-linecap:round;stroke-linejoin:round} .hx-ticks b{color:#fff;font-weight:500} /* --- made for ------------------------------------------------------------- */ .hx-for{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(3,1fr)} .hx-forcard{border-radius:var(--r);overflow:hidden;background:var(--pearl-hi); box-shadow:var(--shadow);display:flex;flex-direction:column} .hx-forcard img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease)} .hx-forcard:hover img{transform:scale(1.05)} .hx-forcard .im{overflow:hidden} .hx-forcard .bd{padding:clamp(18px,2vw,26px);flex:1;display:flex;flex-direction:column; align-items:flex-start} .hx-forcard h3{font-size:1.22rem;margin:6px 0 9px} .hx-forcard p{font-size:14px;line-height:1.6;color:var(--granite-dk);margin:0 0 16px;flex:1} /* --- amenities ------------------------------------------------------------ */ .hx-amen{display:grid;gap:clamp(14px,1.8vw,22px); grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .hx-a{background:var(--pearl-hi);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2vw,24px) 16px;text-align:center;transition:border-color .3s,transform .3s} .hx-a:hover{border-color:var(--gold);transform:translateY(-3px)} .hx-a svg{width:28px;height:28px;stroke:var(--accent);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px;display:block} .hx-a b{display:block;font-size:13.5px;font-weight:500} /* --- the gallery mosaic --------------------------------------------------- */ .hx-mosaic{display:grid;gap:10px;grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(120px,13vw,180px)} .hx-mosaic .gcell{border:0;padding:0;background:var(--mist);cursor:zoom-in;overflow:hidden; border-radius:10px;position:relative} .hx-mosaic .gcell img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .hx-mosaic .gcell:hover img{transform:scale(1.07)} .hx-mosaic .tall{grid-row:span 2} .hx-mosaic .wide{grid-column:span 2} /* --- what a guest said ---------------------------------------------------- */ .hx-say{background:var(--sand)} .hx-say .wrap{max-width:900px;text-align:center} .hx-stars{display:flex;justify-content:center;gap:5px;margin-bottom:22px} .hx-stars svg{width:20px;height:20px;fill:var(--gold)} .hx-say blockquote{margin:0} .hx-say blockquote p{font-family:var(--f-display);font-weight:300;font-style:italic; font-size:clamp(1.4rem,2.7vw,2.15rem);line-height:1.35;color:var(--ink)} .hx-say cite{display:block;margin-top:20px;font-family:var(--f-mono);font-size:10px; letter-spacing:.17em;text-transform:uppercase;font-style:normal;color:var(--granite)} /* --- the last word -------------------------------------------------------- */ .hx-cta{background:var(--ink);color:var(--pearl);text-align:center} .hx-cta h2{color:#fff} .hx-cta .lede{margin:16px auto 0;color:rgba(250,245,236,.8);text-align:center} .hx-cta .eyebrow{color:var(--gold-lt)} .hx-nums{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin-top:clamp(30px,4vw,46px)} .hx-num{background:rgba(250,245,236,.07);border:1px solid rgba(250,245,236,.16); border-radius:var(--r);padding:22px 18px;text-decoration:none;display:grid;gap:9px; justify-items:center;transition:background .3s,border-color .3s,transform .3s} .hx-num:hover{background:rgba(250,245,236,.13);border-color:var(--gold);transform:translateY(-3px)} .hx-num svg{width:22px;height:22px;stroke:var(--gold-lt);stroke-width:1.6;fill:none; stroke-linecap:round;stroke-linejoin:round} .hx-num span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:rgba(250,245,236,.66)} .hx-num b{font-family:var(--f-mono);font-size:15px;font-weight:500;color:#fff;word-break:break-word} /* --- narrower -------------------------------------------------------------- The booking widget is the piece that has to survive a phone. It stops being a row of cells and becomes a stack of full-width fields, with the price and the button last. */ @media (max-width:1080px){ .hx-for{grid-template-columns:1fr 1fr} .hx-save{grid-template-columns:1fr} } @media (max-width:900px){ .hs{min-height:auto} .hs-in{padding-top:clamp(56px,14vw,90px)} .hx-props{grid-template-columns:1fr} .hx-mosaic{grid-template-columns:repeat(3,1fr)} } @media (max-width:860px){ /* The sitewide rule collapses the ledger behind a tap. In the hero it is the whole point of the screen, so it stays open and simply stacks. */ .home .l-peek{display:none} .home .ledger:not(.open) .ledger-in{display:flex} .home .ledger-in{flex-wrap:wrap;padding:8px} .home .fld{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px} .home .quoted{flex:1 1 100%;margin:8px 0 0;border-radius:10px} .home .ledger .btn{margin:10px 0 4px;width:100%} } @media (max-width:720px){ .hx-for{grid-template-columns:1fr} .hx-ticks{grid-template-columns:1fr} .hx-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,150px)} .hs-facts li{font-size:12px;padding:7px 12px} } @media (max-width:900px){ /* The card is shorter on a phone, so the same gradient leaves the copy sitting on the brightest part of a daytime photograph. Darken it sooner. */ .hx-prop::after{background:linear-gradient(180deg,rgba(24,20,15,.16) 0%, rgba(24,20,15,.58) 38%,rgba(24,20,15,.96) 100%)} } /* -------------------------------------------------------------------------- THE BOOKING BAR WITH NOTHING IN IT YET Before a hotel is chosen the quote cell holds an em-dash. Painted in the solid accent it read as a fault light on an otherwise finished bar — a coloured block, a question mark and a dead button. Neutral until there is actually a price to show. -------------------------------------------------------------------------- */ .quoted.bare{background:transparent;border-left:1px solid var(--line-lt); border-right:1px solid var(--line-lt);flex:0 1 auto;max-width:190px} .quoted.bare .q-meta{color:rgba(250,245,236,.55)} .quoted.bare .q-amt{font-size:15px;color:rgba(250,245,236,.42)} .home .quoted.bare{border-color:var(--line);background:transparent} .home .quoted.bare .q-meta{color:var(--granite)} .home .quoted.bare .q-amt{color:var(--granite)} /* A select showing a disabled placeholder should look like a hint, not a value. */ .fld select:has(option:checked:disabled){color:rgba(250,245,236,.5)} .home .fld select:has(option:checked:disabled){color:var(--granite)} /* book.html and manage.html each led with an

and had no

at all — the step heading IS the page heading on a one-job page. Promoted, but kept at h2 size: hero type on a form is shouting. */ h1.h1-sm{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1} /* ========================================================================== RATES ARE FOR DATES Until somebody searches, no page quotes a figure. The words that belong to a number ("per night", "from") are hidden along with it, because "per night" sitting under "Check dates" reads as nonsense. ========================================================================== */ .rate.unpriced > span{display:none} .rate.unpriced .amt{font-family:var(--f-body);font-weight:500;font-size:14px; letter-spacing:0;color:var(--accent);white-space:nowrap} .hx-price.unpriced{color:rgba(250,245,236,.9)} .hx-price.unpriced .amt{font-size:15px;color:var(--gold-lt)} .hx-room-f .rate.unpriced .amt{font-size:14.5px} /* ========================================================================== THE GUESTS PANEL WAS BEING CLIPPED BY THE HERO .hs needs overflow:hidden so the slow zoom on the photographs does not spill past the section — but the booking card lives inside it too, and the rooms and guests panel drops out of the bottom of that card. It was being cut off at the hero's edge. The clipping belongs on the media layer, which is the only thing that actually moves. ========================================================================== */ .hs{overflow:visible} .hs-media{overflow:hidden} /* The panel has to clear the bands below it, and on the home page it also has to clear the hero scrim, which is a positioned sibling. */ .occpanel{z-index:90} .hs-book{z-index:6} /* Opened upwards when there is not room below it. See occupancy.js. */ .occpanel.up{top:auto;bottom:calc(100% + 14px)} /* It behaves like a control now, so it should look like one. */ .rate.unpriced{cursor:pointer} .rate.unpriced .amt{text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)} .rate.unpriced:hover .amt{text-decoration-color:currentColor} /* ========================================================================== THE ABOUT PAGE Reuses the front page's section furniture (.hx-head, .hx-rule, .hx-direct, .hx-ticks, .hx-say, .hx-cta) so the two pages read as one site. Only the pieces that are genuinely different are below. ========================================================================== */ .ab-story{display:grid;gap:clamp(28px,4.5vw,64px);grid-template-columns:1fr 1.12fr; align-items:center} .ab-story-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg); position:relative} .ab-story-img::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);border-radius:var(--r)} .ab-story-img img{width:100%;object-fit:cover;display:block} .ab-story-b h2{margin:12px 0 20px} .ab-story-b .eyebrow{color:var(--gold-dk)} .ab-story-b p{color:var(--granite-dk);font-size:15.5px;line-height:1.72;max-width:58ch} /* The opening line is the argument; the rest is the evidence. */ .ab-lead{font-family:var(--f-display);font-weight:300;font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.4;color:var(--ink)!important;margin-bottom:20px} .ab-close{border-left:3px solid var(--gold);padding-left:18px;margin-top:26px; font-style:italic} .ab-vals{display:grid;gap:clamp(16px,2vw,26px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .ab-val{background:var(--pearl);border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.4vw,30px);transition:border-color .3s,transform .3s} .ab-val:hover{border-color:var(--gold);transform:translateY(-3px)} .ab-val svg{width:28px;height:28px;stroke:var(--accent);stroke-width:1.4;fill:none; margin-bottom:16px;display:block} .ab-val b{display:block;font-family:var(--f-display);font-weight:400; font-size:1.16rem;margin-bottom:9px} .ab-val p{margin:0;font-size:14.5px;line-height:1.62;color:var(--granite-dk)} .ab-houses{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr 1fr} .ab-house{background:var(--pearl-hi);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow);border-top:4px solid var(--accent);display:flex; flex-direction:column} .ab-house-img{overflow:hidden} .ab-house-img img{width:100%;object-fit:cover;transition:transform .9s var(--ease)} .ab-house:hover .ab-house-img img{transform:scale(1.04)} .ab-house-b{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;flex:1} .ab-house-b .eyebrow{color:var(--accent)} .ab-house-b h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:8px 0 10px} .ab-house-line{font-size:15.5px;line-height:1.6;color:var(--granite-dk);margin:0 0 6px; max-width:44ch} .ab-facts{margin:14px 0 auto} .ab-facts > div{display:grid;grid-template-columns:120px 1fr;gap:16px; border-top:1px solid var(--line);padding:12px 0} .ab-facts dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--granite);padding-top:3px} .ab-facts dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--granite-dk)} .ab-go{display:flex;flex-wrap:wrap;gap:10px;margin:0} .ab-house .ab-go{margin-top:24px} .ab-biz{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:.9fr 1.1fr; align-items:center} .ab-biz .hx-ticks{grid-template-columns:1fr} @media (max-width:980px){ .ab-story,.ab-biz{grid-template-columns:1fr} .ab-houses{grid-template-columns:1fr} } @media (max-width:620px){ .ab-facts > div{grid-template-columns:1fr;gap:5px} } /* ------------------------------------------------------- finding the hotel The map is a button until somebody presses it. An always-on Google iframe is about a megabyte of third-party script and a cookie set on every visitor who never looked at it — which would undo the loading work and make a cookie notice genuinely owed. */ .findus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:start} .findus address{font-style:normal;font-size:1.06rem;line-height:1.75} .findus-do{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0} .findus .fnote{margin-top:16px;max-width:34em} .findus-m{position:relative;border-radius:6px;overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.05),0 12px 30px rgba(40,30,20,.10)} .maploader{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer; position:relative;line-height:0;border-radius:6px;overflow:hidden} .maploader img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; filter:saturate(.55) brightness(.62)} .maploader-in{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:7px;text-align:center;padding:24px; color:#faf6ef;line-height:1.5} .maploader-in svg{width:34px;height:34px;opacity:.95} .maploader-in b{font-size:1.02rem;letter-spacing:.02em} .maploader-in small{font-size:.76rem;opacity:.82;max-width:24em} .maploader:hover .maploader-in b,.maploader:focus-visible .maploader-in b{text-decoration:underline} .findus-m iframe{display:block;width:100%;aspect-ratio:4/3;border:0} @media (max-width:800px){ .findus{grid-template-columns:1fr;gap:22px} .maploader img{aspect-ratio:3/2} } /* ------------------------------------------------------------ pay choice Appears only when the gateway is switched on in the panel; until then the booking page never mentions payment at all. */ .paychoice{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;padding:14px 16px; border:1px solid rgba(60,45,35,.18);border-radius:6px} .paychoice label{display:flex;gap:9px;align-items:baseline;cursor:pointer;font-size:.95rem} .paychoice input{width:auto} /* ------------------------------------------------------------- FAQ + reviews Plain
so the questions work with no JavaScript at all; the marker is restyled but never removed. The Google-reviews block sends trust-checking OFF the site on purpose — reviews we could edit persuade nobody. */ .faq{max-width:46em} .faq details{border-bottom:1px solid rgba(60,45,35,.14);padding:2px 0} .faq summary{cursor:pointer;padding:13px 4px;font-weight:600;font-size:1.02rem; list-style:none;position:relative;padding-right:2em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); font-weight:400;font-size:1.25em;opacity:.55;transition:transform .18s} .faq details[open] summary::after{content:"\2212"} .faq details p{margin:0 0 14px;padding:0 4px;max-width:42em;line-height:1.7} .faq summary:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px} .gorev{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0} /* Reassurance at the moment of hesitation: the confirm step's quiet chips. */ .assure{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none} .assure li{font-size:.78rem;letter-spacing:.02em;padding:.35em .8em;border-radius:999px; border:1px solid rgba(60,45,35,.22)}