html { color-scheme: light; }
body {
background: linear-gradient(180deg, #E8E5D9 0%, #F4F1E8 55%, #E8E5D9 100%);
font-family: 'Inter', sans-serif;
}
::selection { background: rgba(143,209,214,.45); }
/* Slim scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #E8E5D9; }
::-webkit-scrollbar-thumb { background: rgba(47,68,135,.25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(47,68,135,.45); }
/* Glass system, reserved for fixed chrome floating over scrolling content
(booking panel / bottom sheet, mobile sticky bar) */
.glass {
background: rgba(255,255,255,.78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(47,68,135,.12);
}
.glass-soft {
background: rgba(255,255,255,.5);
border: 1px solid rgba(47,68,135,.10);
}
/* Solid card, static in-flow surfaces and modals (no transparency, no blur) */
.card {
background: #FCFBF6;
border: 1px solid rgba(47,68,135,.12);
}
/* CTA, solid indigo with a whitish wave lapping along the bottom */
.cta-btn {
position: relative;
overflow: hidden;
background: #2F4487;
}
.cta-btn::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q40 1.5 80 5 T160 5 T240 5 T320 5 V10 H0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") repeat-x left bottom / 320px 10px;
opacity: .28;
animation: ctaWave 8s linear infinite;
pointer-events: none;
}
@keyframes ctaWave {
from { background-position: 0 bottom; }
to { background-position: -320px bottom; }
}
/* Gradient border cards (offers) */
.gradient-border {
position: relative;
background: rgba(255,255,255,.75);
border-radius: 1.25rem;
z-index: 0;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(143,209,214,.9), rgba(107,147,204,.45), rgba(166,154,133,.9));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.gradient-border-warm::before {
background: linear-gradient(135deg, rgba(166,154,133,.9), rgba(47,68,135,.25), rgba(143,209,214,.7));
}
/* Reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.cta-btn::after { animation: none; }
}
/* Chapter dots */
.chapter-dot {
width: 8px; height: 8px; border-radius: 9999px;
background: rgba(47,68,135,.22);
transition: background .3s, box-shadow .3s, transform .3s;
display: block;
}
.chapter-dot.active {
background: #8FD1D6;
box-shadow: 0 0 0 3px rgba(143,209,214,.35);
transform: scale(1.35);
}
/* Calendar, shared by the range picker and the availability view */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow {
text-align: center; font-size: 9px; text-transform: uppercase;
letter-spacing: .14em; color: rgba(46,46,46,.38); padding: 6px 0 4px;
}
.cal-cell { padding: 2px 0; }
.cal-day {
position: relative; width: 100%; height: 38px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 500; color: rgba(46,46,46,.75);
border-radius: 9999px; background: transparent; border: none;
transition: background .15s, color .15s, box-shadow .15s;
}
button.cal-day { cursor: pointer; }
button.cal-day:hover:not(:disabled):not(.cal-selected) { background: rgba(143,209,214,.32); color: #2E2E2E; }
.cal-day:disabled, .cal-day.cal-past { color: rgba(46,46,46,.2); cursor: default; }
.cal-day.cal-today::after {
content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 9999px; background: #8FD1D6;
}
.cal-day.cal-selected {
background: #2F4487; color: #fff; font-weight: 600;
box-shadow: 0 8px 16px -8px rgba(47,68,135,.6);
}
.cal-cell.cal-in-range { background: rgba(143,209,214,.18); }
.cal-cell.cal-range-start { background: linear-gradient(90deg, transparent 50%, rgba(143,209,214,.18) 50%); }
.cal-cell.cal-range-end { background: linear-gradient(90deg, rgba(143,209,214,.18) 50%, transparent 50%); }
.cal-cell.cal-range-start.cal-range-end { background: transparent; }
.cal-day.cal-blocked {
color: rgba(46,46,46,.28); text-decoration: line-through;
background: rgba(166,154,133,.16);
}
.cal-pop {
background: rgba(252,251,246,.94);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(47,68,135,.14);
}
.cal-nav {
width: 30px; height: 30px; border-radius: 9999px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.5); border: 1px solid rgba(47,68,135,.12);
color: #2F4487; transition: background .2s, box-shadow .2s, opacity .2s;
}
.cal-nav:hover:not(:disabled) { background: #fff; box-shadow: 0 4px 14px -6px rgba(47,68,135,.5); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.date-tile.active { border-color: rgba(47,68,135,.5); }
/* Scroll hint bounce */
@keyframes hintFloat {
0%, 100% { transform: translateY(0); opacity: .7; }
50% { transform: translateY(8px); opacity: 1; }
}
.scroll-hint { animation: hintFloat 2.4s ease-in-out infinite; }
/* Bottom sheet transition (mobile) */
#bookingPanel { transition: transform .45s cubic-bezier(.32,.72,.24,1); }
#sheetBackdrop { transition: opacity .4s ease; }
/* While the sheet is open the language toggle yields the top-right corner
to the sheet's close button (app.js toggles this class) */
#langToggle { transition: opacity .25s ease; }
#langToggle.sheet-hidden { opacity: 0; pointer-events: none; }
/* Gallery hover zoom */
.zoom-img img { transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .6s; }
.zoom-img:hover img { transform: scale(1.07); }
/* Room card selected states */
.room-card { transition: border-color .3s, box-shadow .3s, transform .3s, background .3s; cursor: pointer; }
.room-card:hover { transform: translateY(-4px); }
.room-card.selected {
border-color: rgba(47,68,135,.55) !important;
box-shadow: 0 0 0 1px rgba(143,209,214,.55), 0 16px 32px -14px rgba(47,68,135,.35);
}
.room-option { transition: border-color .25s, background .25s, box-shadow .25s; cursor: pointer; }
.room-option.selected {
border-color: rgba(47,68,135,.5) !important;
background: rgba(143,209,214,.18);
box-shadow: 0 8px 18px -10px rgba(47,68,135,.35);
}
.room-option.selected .room-radio { border-color: #2F4487; }
.room-option.selected .room-radio::after {
content: ''; position: absolute; inset: 3px; border-radius: 9999px; background: #2F4487;
box-shadow: none;
}
.room-radio { position: relative; }
/* Unavailability markings, two deliberately different treatments:
'booked' = taupe, solid, muted (echoes the calendar's struck days);
'guest limit' = indigo, dashed (a fit problem, not a calendar problem) */
.status-booked, .status-guests {
align-items: center;
margin-top: 7px; margin-right: 6px;
padding: 3px 9px; border-radius: 9999px;
font-size: 9px; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
white-space: nowrap;
}
.status-booked {
background: rgba(166,154,133,.20);
border: 1px solid rgba(166,154,133,.55);
color: #6E6250;
}
.status-guests {
background: rgba(107,147,204,.12);
border: 1px dashed rgba(47,68,135,.55);
color: #2F4487;
}
/* In the selector the pill sits in the price slot of a centered flex row */
.room-option .status-booked, .room-option .status-guests { margin: 0; }
/* On photo overlays the pills need solid backgrounds to stay legible */
[data-card-status] .status-booked,
[data-card-status] .status-guests { margin: 0; box-shadow: 0 4px 14px -6px rgba(46,46,46,.35); }
[data-card-status] .status-booked { background: #E7E0CF; }
[data-card-status] .status-guests { background: #E9EFF9; }
/* Selector rows while unavailable (defined after .selected so they win).
The chapter room cards deliberately get NO surface treatment, only the
corner badge and the Select-button label communicate their state. */
.room-option.is-booked { opacity: .6; background: rgba(166,154,133,.14); }
.room-option.is-overcap { border-style: dashed; border-color: rgba(47,68,135,.4); }
/* Stay verdict, the summary card is the main communicator of the result;
it speaks plainly (no badge) and carries the reason's color language */
#stayCard.verdict-booked {
background: rgba(166,154,133,.16);
border-color: rgba(166,154,133,.5);
}
#stayCard.verdict-booked #verdictTitle { color: #6E6250; }
#stayCard.verdict-guests {
background: rgba(107,147,204,.10);
border-style: dashed;
border-color: rgba(47,68,135,.45);
}
#stayCard.verdict-guests #verdictTitle { color: #2F4487; }
/* Best value pulse */
@keyframes tagGlow {
0%, 100% { box-shadow: 0 2px 8px rgba(166,154,133,.45); }
50% { box-shadow: 0 4px 14px rgba(166,154,133,.75); }
}
.best-value-tag { animation: tagGlow 3s ease-in-out infinite; }
/* Amenity card hover glow */
.amenity-card { transition: border-color .3s, box-shadow .3s, transform .3s; }
.amenity-card:hover {
border-color: rgba(107,147,204,.5);
box-shadow: 0 12px 26px -12px rgba(47,68,135,.22);
transform: translateY(-3px);
}
/* Hero slideshow */
.hero-slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }
/* Hero ambient video: sits above the slides, invisible until it actually
plays, so the slideshow is both the instant poster and the fallback. */
.hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
pointer-events: none;
}
.hero-video.playing { opacity: 1; }
/* Room card carousels */
.carousel .slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0;
transition: opacity .45s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.carousel .slide.active { opacity: 1; }
.carousel-btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
width: 30px; height: 30px; border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.75); border: 1px solid rgba(47,68,135,.15);
color: #2F4487; backdrop-filter: blur(6px);
transition: background .25s, box-shadow .25s;
}
.carousel-btn:hover { background: #fff; box-shadow: 0 4px 14px -6px rgba(47,68,135,.5); }
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
.carousel-dots {
position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 5;
}
.carousel-dot {
width: 5px; height: 5px; border-radius: 9999px;
background: rgba(255,255,255,.55); transition: background .25s, transform .25s;
}
.carousel-dot.active { background: #fff; transform: scale(1.3); }
.photo-count {
position: absolute; bottom: 8px; right: 10px; z-index: 5;
font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: 9999px;
background: rgba(46,46,46,.45); color: #fff; backdrop-filter: blur(4px);
}
/* Lightbox */
#lightbox { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#lightbox.open { opacity: 1; pointer-events: auto; }
/* Room details modal */
#roomModal { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#roomModal.open { opacity: 1; pointer-events: auto; }
/* Amenity chips on room cards */
.room-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 9999px;
background: rgba(255,255,255,.5); border: 1px solid rgba(47,68,135,.10);
font-size: 11px; color: rgba(46,46,46,.7); white-space: nowrap;
}
.room-chip svg { flex-shrink: 0; }
/* Radio dot in card Select button (mirrors the panel's room options) */
.room-card.selected .room-radio { border-color: #2F4487; }
.room-card.selected .room-radio::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 5px; height: 5px; transform: translate(-50%, -50%);
border-radius: 9999px; background: #2F4487;
}