/* ============================================================
style.css
Component-specific styles — built section by section.
Current components:
1. Button system (.btn)
2. Header (.header)
3. Language selector (.lang-selector)
4. Hamburger button (.hamburger)
5. Menu overlay (.menu-overlay)
Naming convention: BEM — .block__element--modifier
Media queries: mobile-first (min-width)
Breakpoints: 640px | 768px | 1024px | 1280px
============================================================ */
/* ============================================================
1. BUTTON SYSTEM
Base .btn class + modifiers.
Used across header, overlay, and future sections.
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-family-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
white-space: nowrap;
text-decoration: none;
user-select: none;
}
/* Primary — filled magenta */
.btn--primary {
background-color: var(--color-primary);
color: #ffffff;
border-color: var(--color-primary);
}
.btn--primary:hover {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #ffffff; /* explicit override — prevents global a:hover from darkening the text */
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--primary:active {
background-color: var(--color-primary-dark);
color: #ffffff;
transform: translateY(0);
box-shadow: none;
}
.btn--primary:focus-visible {
color: #ffffff;
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
.btn--primary:visited {
color: #ffffff; /* keep white after the link has been visited */
}
/* ============================================================
2. HEADER
Fixed at top. 3-zone layout: logo | spacer | actions.
Transitions to translucent glass effect on scroll.
============================================================ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* Default state — solid white with subtle bottom border */
background-color: var(--color-background);
border-bottom: 1px solid var(--color-border);
/* Smooth all visual transitions on scroll */
transition:
background-color var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base),
backdrop-filter var(--transition-base);
}
/* Scrolled state — subtle glass / blur effect */
.header--scrolled {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: transparent;
box-shadow: var(--shadow-sm);
}
/* Inner container — flex row, vertically centered */
.header__inner {
display: flex;
align-items: center;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-4);
height: 64px; /* Fixed header height on mobile */
}
@media (min-width: 640px) {
.header__inner {
padding-inline: var(--space-6);
}
}
@media (min-width: 1024px) {
.header__inner {
height: 72px;
padding-inline: var(--space-8);
}
}
/* === RESPONSIVE LOGO BEHAVIOR (mobile shows header logo, hides hero logo) === */
/* The header logo is hidden on desktop and tablet; it appears only on mobile
(< 768px). The big hero logo does the opposite: visible on tablet and
desktop, hidden on mobile. This gives each breakpoint the layout that fits.
To revert: remove this block and the added logo HTML in index.html. */
/* Logo link — default state: hidden on desktop/tablet (hero logo handles branding) */
.header__logo-link {
display: none; /* shown only on mobile via media query below */
align-items: center;
flex-shrink: 0;
text-decoration: none;
transition: opacity var(--transition-fast);
}
.header__logo-link:hover {
opacity: 0.85;
}
.header__logo-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
/* Logo image — mobile: 36px, desktop: 48px */
.header__logo {
height: 36px;
width: auto;
display: block;
}
@media (min-width: 1024px) {
.header__logo {
height: 48px;
}
}
/* === MOBILE LAYOUT REFINEMENT (header reception status + hero logo) === */
/* Mobile (< 768px): hide header logo, show reception indicator; hero logo visible */
@media (max-width: 767.98px) {
/* Header: hide small logo — reception status takes the left slot */
.header__logo-link {
display: none;
}
/* Show header-info on mobile, but only the reception status item.
!important needed: the global .header-info { display: none } rule
appears later in the file and would otherwise win the cascade. */
.header-info {
display: flex !important;
align-items: center;
}
/* !important needed: base .header-info__item { display: flex } appears
later in the file and wins the cascade at equal specificity. */
.header-info__time,
.header-info__weather,
.header-info__separator {
display: none !important;
}
.header-info__status {
display: flex;
align-items: center;
gap: var(--space-2);
}
}
/* === HEADER INFO GROUP (time, weather, reception status) === */
/* Horizontal info strip on the LEFT of the header.
Hidden on mobile (small logo takes the left slot there).
Visible on tablet (768px+) and desktop (1024px+).
Weather item additionally hidden at narrow desktop / tablet widths
(<= 1100px) where space is limited.
To revert: remove this block and the .header-info HTML in index.html. */
/* Hidden by default (mobile) */
.header-info {
display: none;
}
/* Visible on tablet and desktop */
@media (min-width: 768px) {
.header-info {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
}
/* Individual item — flex row, centred, nowrap */
.header-info__item {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
white-space: nowrap;
}
/* "Riga" label — slightly stronger colour than the time value */
.header-info__city {
color: var(--color-text);
}
/* Vertical separator between items */
.header-info__separator {
display: block;
width: 1px;
height: 14px;
background: var(--color-border);
flex-shrink: 0;
}
/* Weather emoji wrapper */
.header-info__weather-icon {
display: inline-block;
line-height: 1;
font-size: 14px;
}
/* Reception open: breathing dot (muted sage green) */
.header-info__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #6B8E5A;
display: inline-block;
flex-shrink: 0;
animation: breathe 2.5s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.header-info__status-dot {
animation: none;
}
}
/* Narrow desktop / tablet: hide weather to free up space */
@media (max-width: 1100px) {
.header-info__weather { display: none; }
.header-info__separator--weather { display: none; }
}
/* Middle spacer pushes actions to the right */
.header__spacer {
flex: 1;
}
/* Right-side actions group */
.header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
@media (min-width: 1024px) {
.header__actions {
gap: var(--space-4);
}
}
/* Book Now CTA — show/hide text variants */
.header__cta-short {
display: inline; /* mobile: compact "Book" */
}
.header__cta-full {
display: none; /* hidden on mobile */
}
@media (min-width: 640px) {
.header__cta-short { display: none; }
.header__cta-full { display: inline; }
}
/* Tighter padding on mobile CTA */
.header__cta {
padding: var(--space-2) var(--space-3);
font-size: var(--fs-xs);
}
@media (min-width: 640px) {
.header__cta {
padding: var(--space-2) var(--space-4);
font-size: var(--fs-sm);
}
}
/* ============================================================
3. LANGUAGE SELECTOR
Globe icon + "EN" code + chevron.
Reveals a dropdown on click.
============================================================ */
.lang-selector {
position: relative;
}
/* Trigger button */
.lang-selector__trigger {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-2);
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
.lang-selector__trigger:hover {
background-color: var(--color-background-soft);
border-color: var(--color-secondary);
}
.lang-selector__trigger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Globe icon */
.lang-selector__globe {
color: var(--color-text-muted);
flex-shrink: 0;
}
/* Language code text — hidden on mobile to save space */
.lang-selector__code {
display: none;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.05em;
}
@media (min-width: 640px) {
.lang-selector__code {
display: inline;
}
}
/* Chevron — rotates when open */
.lang-selector__chevron {
color: var(--color-text-muted);
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.lang-selector--open .lang-selector__chevron {
transform: rotate(180deg);
}
/* Dropdown panel */
.lang-selector__dropdown {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
min-width: 190px;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
overflow: hidden;
z-index: 200;
/* Hidden by default — shown via JS class toggle */
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.97);
transform-origin: top right;
transition:
opacity var(--transition-fast),
transform var(--transition-fast),
visibility var(--transition-fast);
}
.lang-selector--open .lang-selector__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* List reset */
.lang-selector__list {
list-style: none;
padding: var(--space-2) 0;
margin: 0;
}
/* Individual language option */
.lang-selector__item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--fs-sm);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.lang-selector__item:hover:not(.lang-selector__item--disabled) {
background-color: var(--color-background-soft);
}
/* Active / selected language */
.lang-selector__item--active {
color: var(--color-primary);
font-weight: var(--fw-semibold);
}
/* Disabled / coming soon languages */
.lang-selector__item--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.lang-selector__flag {
font-size: var(--fs-base);
flex-shrink: 0;
}
.lang-selector__name {
flex: 1;
}
/* Active badge */
.lang-selector__badge--active {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--color-primary);
letter-spacing: 0.05em;
}
/* Coming soon label */
.lang-selector__soon {
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-style: italic;
}
/* ============================================================
4. HAMBURGER BUTTON
Three bars that animate to an X when active.
Uses CSS transforms only (no JS class swaps for animation).
============================================================ */
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: var(--space-2);
border-radius: var(--radius-sm);
flex-shrink: 0;
transition: background-color var(--transition-fast);
}
.hamburger:hover {
background-color: var(--color-background-soft);
}
.hamburger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Each bar */
.hamburger__bar {
display: block;
width: 22px;
height: 2px;
background-color: var(--color-text);
border-radius: 2px;
transform-origin: center;
transition:
transform var(--transition-base),
opacity var(--transition-base),
width var(--transition-base);
}
/* Active (X) state — toggled by JS adding .hamburger--active */
/* Top bar: rotates +45° and shifts down */
.hamburger--active .hamburger__bar--top {
transform: translateY(7px) rotate(45deg);
}
/* Middle bar: fades and collapses */
.hamburger--active .hamburger__bar--middle {
opacity: 0;
width: 0;
}
/* Bottom bar: rotates -45° and shifts up */
.hamburger--active .hamburger__bar--bottom {
transform: translateY(-7px) rotate(-45deg);
}
/* ============================================================
5. MENU OVERLAY
Full-screen navigation panel. Fades in with a subtle scale.
z-index above header (200 vs 100).
============================================================ */
.menu-overlay {
position: fixed;
inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
z-index: 200;
display: flex;
flex-direction: column;
/* Generous padding inside the overlay */
padding:
var(--space-4) /* top — sits flush with header height */
var(--space-6) /* sides on mobile */
var(--space-8); /* bottom */
/* Subtle gradient from pure white to soft background */
background: linear-gradient(
160deg,
var(--color-background) 0%,
var(--color-background-soft) 100%
);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Hidden state — opacity + scale */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.98);
transform-origin: top right;
transition:
opacity var(--transition-slow),
visibility var(--transition-slow),
transform var(--transition-slow);
}
@media (min-width: 640px) {
.menu-overlay {
padding-inline: var(--space-8);
}
}
@media (min-width: 1024px) {
.menu-overlay {
padding-inline: var(--space-16);
}
}
/* Open state — revealed by JS adding .menu-overlay--open */
.menu-overlay--open {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: scale(1);
}
/* -----------------------------------------------------------
Top bar inside overlay (mirrors the header)
----------------------------------------------------------- */
.menu-overlay__topbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
flex-shrink: 0;
margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
.menu-overlay__topbar {
height: 72px;
margin-bottom: var(--space-12);
}
}
.menu-overlay__logo-link {
display: flex;
align-items: center;
text-decoration: none;
transition: opacity var(--transition-fast);
}
.menu-overlay__logo-link:hover {
opacity: 0.8;
}
.menu-overlay__logo {
height: 40px;
width: auto;
}
/* Close (X) button */
.menu-overlay__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
color: var(--color-text);
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
}
.menu-overlay__close:hover {
background-color: rgba(168, 50, 125, 0.07);
color: var(--color-primary);
transform: rotate(90deg);
}
.menu-overlay__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* -----------------------------------------------------------
Navigation links — big, left-aligned, staggered
----------------------------------------------------------- */
.menu-overlay__nav {
flex: 1;
}
.menu-overlay__list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-overlay__item {
overflow: hidden; /* clips the slide-in animation */
}
/* Staggered entrance — items animate in one by one */
.menu-overlay--open .menu-overlay__item:nth-child(1) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.menu-overlay--open .menu-overlay__item:nth-child(2) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.menu-overlay--open .menu-overlay__item:nth-child(3) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.menu-overlay--open .menu-overlay__item:nth-child(4) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both; }
.menu-overlay--open .menu-overlay__item:nth-child(5) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.menu-overlay--open .menu-overlay__item:nth-child(6) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.menu-overlay--open .menu-overlay__item:nth-child(7) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.33s both; }
.menu-overlay--open .menu-overlay__item:nth-child(8) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }
.menu-overlay--open .menu-overlay__item:nth-child(9) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.39s both; }
.menu-overlay--open .menu-overlay__item:nth-child(10) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both; }
.menu-overlay--open .menu-overlay__item:nth-child(11) { animation: linkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
@keyframes linkIn {
from {
opacity: 0;
transform: translateX(-16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* The link itself */
.menu-overlay__link {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-2xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--color-text);
text-decoration: none;
padding: var(--space-2) 0;
/* Hover slide-right + color change */
transition:
color var(--transition-fast),
transform var(--transition-fast);
/* Arrow pseudo-element hidden at rest */
position: relative;
}
.menu-overlay__link::before {
content: '→';
display: inline-block;
font-size: var(--fs-xl);
color: var(--color-primary);
opacity: 0;
transform: translateX(-8px);
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
/* Prevents arrow from affecting layout */
position: absolute;
left: -2rem;
}
.menu-overlay__link:hover {
color: var(--color-primary);
transform: translateX(8px);
}
.menu-overlay__link:hover::before {
opacity: 1;
transform: translateX(0);
}
.menu-overlay__link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
/* Larger text on bigger screens */
@media (min-width: 768px) {
.menu-overlay__link {
font-size: var(--fs-3xl);
}
}
@media (min-width: 1024px) {
.menu-overlay__link {
font-size: var(--fs-4xl);
padding: var(--space-2) 0;
}
.menu-overlay__link::before {
font-size: var(--fs-2xl);
}
}
/* -----------------------------------------------------------
Overlay footer — social icons (left) + Book Now (right)
----------------------------------------------------------- */
.menu-overlay__footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: var(--space-8);
margin-top: var(--space-8);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
/* Fade in slightly after the links */
opacity: 0;
transition: opacity var(--transition-slow) 0.4s;
}
.menu-overlay--open .menu-overlay__footer {
opacity: 1;
}
/* Book Now in overlay */
.menu-overlay__book {
font-size: var(--fs-sm);
padding: var(--space-2) var(--space-6);
}
/* ============================================================
BODY — scroll lock when menu is open
Applied via JS: document.body.classList.add('body--menu-open')
============================================================ */
.body--menu-open {
overflow: hidden;
}
/* ============================================================
BUTTON ADDITIONS
Secondary style + large size modifier.
Extends the base .btn rules already defined above.
============================================================ */
/* Secondary — outlined, fills on hover */
.btn--secondary {
background-color: transparent;
color: var(--color-text);
border-color: var(--color-text);
}
.btn--secondary:hover {
background-color: var(--color-text);
color: #ffffff;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--secondary:active {
transform: translateY(0);
box-shadow: none;
}
.btn--secondary:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 3px;
}
/* Large size modifier — used in hero section */
.btn--lg {
padding: var(--space-3) var(--space-6);
font-size: var(--fs-base);
}
/* ============================================================
6. HERO SECTION
Two-part section: main hero block + three feature cards.
Mobile-first: single column → two-column at 1024px.
============================================================ */
/* === HERO TOP PADDING REDUCTION (visual adjustment) === */
/* Was: calc(--space-16 + 64px) mobile / calc(--space-24 + 72px) desktop.
Reduced the variable part by half to tighten space between header and hero.
Fixed header-height offset (64px / 72px) is unchanged. */
.hero {
/* Push content below the fixed header */
padding-top: calc(var(--space-8) + 64px); /* was --space-16 */
padding-bottom: var(--space-24);
}
@media (min-width: 1024px) {
.hero {
padding-top: calc(var(--space-12) + 72px); /* was --space-24 */
padding-bottom: var(--space-32);
}
}
/* Two-column grid: 60 / 40 split on desktop */
.hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
}
@media (min-width: 1024px) {
.hero__grid {
grid-template-columns: 3fr 2fr; /* 60 / 40 */
gap: var(--space-16);
}
}
/* --- Left column — text content --- */
.hero__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Kicker / eyebrow line */
.hero__kicker {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-secondary);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Horizontal dash before the kicker text */
.hero__kicker-line {
display: inline-block;
width: 28px;
height: 1.5px;
background-color: var(--color-secondary);
flex-shrink: 0;
border-radius: 2px;
}
/* Main headline */
.hero__title {
font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--color-text);
letter-spacing: -0.02em;
max-width: 14ch;
}
/* "DODO." emphasis in brand pink */
.hero__title-accent {
color: var(--color-primary);
}
/* Subheadline */
.hero__subtitle {
font-size: var(--fs-lg);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
max-width: 52ch;
}
/* CTA button row */
.hero__cta-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
/* Trust indicator */
.hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: var(--fw-medium);
}
.hero__trust-dot {
color: var(--color-border);
font-size: var(--fs-lg);
line-height: 1;
}
/* --- Right column — visual block --- */
/*
* .hero__visual is the positioning parent for both the image and the badges.
* It owns the aspect-ratio and the max-width, so badge coordinates are
* always relative to the visible image area — never to the wider column.
*/
.hero__visual {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 4 / 5;
margin-inline: auto;
}
@media (min-width: 1024px) {
.hero__visual {
max-width: 100%;
margin-inline: 0;
}
}
/*
* .hero__image-wrapper fills the visual container exactly.
* overflow:hidden here clips the parallax image, not the badges
* (badges are siblings of this element, not children).
*/
.hero__image-wrapper {
position: absolute;
inset: 0;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/*
* .hero__image-frame is the inner clip layer.
* Redundant with the wrapper's overflow:hidden, but kept for
* explicit separation of concerns and future ease of modification.
*/
.hero__image-frame {
position: relative;
width: 100%;
height: 100%;
}
/* Hotel image — 110% tall so parallax has ~10% room to drift */
.hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 110%;
object-fit: cover;
object-position: center top;
transform: translateY(0);
will-change: transform;
}
/* --- Floating badges ---
All badges are positioned relative to .hero__visual,
so they always appear at the correct spot on the image.
*/
.hero__badge {
position: absolute;
z-index: 2;
animation: badgeFadeIn 0.5s ease both;
}
/* Card-style badge — tram stop info (anchored top-right, inside image) */
.hero__badge--card {
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-2);
background-color: #ffffff;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
box-shadow: var(--shadow-md);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--color-text);
white-space: nowrap;
animation-delay: 0.3s;
}
.hero__badge-icon {
display: flex;
align-items: center;
color: var(--color-primary);
flex-shrink: 0;
}
/* Circle badge — 24/7 (bottom-left, slightly outside edge) */
.hero__badge--circle {
bottom: var(--space-6);
left: calc(-1 * var(--space-6));
width: 80px;
height: 80px;
background-color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
animation-delay: 0.5s;
}
@media (max-width: 639px) {
.hero__badge--circle {
left: var(--space-3);
bottom: var(--space-3);
width: 68px;
height: 68px;
}
}
.hero__badge-circle-text {
font-size: var(--fs-base);
font-weight: var(--fw-extrabold);
color: #ffffff;
letter-spacing: 0.04em;
}
/* Badge entrance animation */
@keyframes badgeFadeIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ============================================================
=== HERO LAYOUT RESTRUCTURE (logo beside title, description below) ===
Left column is now 3 rows:
Row 1 — kicker (full width)
Row 2 — logo (left) + h1 title (right), side by side
Row 3 — subtitle, CTAs, trust line (full width)
No vertical divider in this layout.
To revert: remove this block and restore the previous hero HTML
structure (hero__brand + hero__text wrappers).
============================================================ */
/* ---- Brand container (logo wrapper inside row 2) ---- */
.hero__brand {
display: flex;
align-items: flex-start;
flex-shrink: 0;
}
/* ---- Hero logo — mobile first (120px) ---- */
.hero__logo {
display: block;
width: 120px;
height: auto;
}
/* ---- Row 2: logo + title side by side ---- */
/* Mobile default: stacked (logo above title) */
.hero__row-brand-title {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* ---- Row 3: subtitle, CTAs, trust — always a vertical stack ---- */
.hero__row-details {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* ---- Tablet (768px): logo and title side by side if space permits ---- */
@media (min-width: 768px) {
.hero__logo {
width: 150px;
}
/* Side-by-side: logo auto width, title takes remaining space */
.hero__row-brand-title {
flex-direction: row;
gap: var(--space-8);
align-items: flex-start;
}
}
/* ---- Desktop (1024px+): same side-by-side, logo at 200px ---- */
@media (min-width: 1024px) {
.hero__logo {
width: 200px;
}
}
/* === MOBILE LAYOUT REFINEMENT: hero logo + horizontal title layout === */
/* Placed here (after base hero rules) so these rules win the cascade
without needing !important. Replaces the old display:none on .hero__brand. */
@media (max-width: 767.98px) {
/* Show the big logo beside the title on mobile */
.hero__brand {
display: flex;
}
.hero__logo {
width: 100px;
}
/* Horizontal: logo left, title right — same pattern as desktop */
.hero__row-brand-title {
flex-direction: row;
gap: var(--space-4);
align-items: flex-start;
}
}
/* Very small screens (< 380px): shrink logo and title further */
@media (max-width: 379.98px) {
.hero__logo {
width: 80px;
}
.hero__row-brand-title {
grid-template-columns: 80px 1fr;
gap: var(--space-3);
}
}
/* ============================================================
7. KEY POINTS — Three feature cards
Horizontal row on desktop, stacked on mobile.
Cards animate in on scroll (IntersectionObserver in JS).
============================================================ */
/* === KEY-POINTS BOTTOM PADDING REDUCTION (visual adjustment) === */
/* Was: --space-24 mobile / --space-32 desktop. Halved to tighten gap
between key-points cards and the gallery section title. */
.key-points {
padding-top: 0; /* connects visually to hero bottom */
padding-bottom: var(--space-12); /* was --space-24 */
}
@media (min-width: 1024px) {
.key-points {
padding-bottom: var(--space-16); /* was --space-32 */
}
}
/* 3-column grid on tablet+, single column on mobile */
.key-points__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.key-points__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
}
/* Individual feature card */
.feature-card {
background-color: var(--color-background-soft);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
/* Icon — brand pink, line-style SVG */
.feature-card__icon {
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--color-primary);
flex-shrink: 0;
}
/* Card title */
.feature-card__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-tight);
}
/* Card description */
.feature-card__desc {
font-size: var(--fs-base);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
max-width: none; /* override base.css p restriction */
}
/* ============================================================
8. SCROLL REVEAL
Elements with .reveal class start hidden and slide up.
JS adds .reveal--visible when they enter the viewport.
Uses transform + opacity — GPU-accelerated, no layout thrash.
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Stagger siblings with CSS nth-child delays */
.reveal:nth-child(2) { transition-delay: 0.10s; }
.reveal:nth-child(3) { transition-delay: 0.20s; }
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================================
9. SECTION HEADER — reusable kicker + title + desc component
Used in Gallery, Rooms, and future sections.
============================================================ */
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.section-header__main {
flex: 1;
}
.section-header__kicker {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: var(--space-3);
}
.section-header__kicker::before {
content: '';
display: inline-block;
width: 24px;
height: 2px;
background-color: var(--color-primary);
flex-shrink: 0;
border-radius: 2px;
}
.section-header__title {
font-size: clamp(1.75rem, 4vw, var(--fs-4xl));
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-tight);
margin-bottom: var(--space-4);
}
.section-header__desc {
font-size: var(--fs-lg);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
max-width: 600px;
}
/* "View all →" link sits flush right on desktop */
.section-header__aside-link {
flex-shrink: 0;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
padding-bottom: 2px; /* optical alignment with desc baseline */
transition: color var(--transition-base);
}
.section-header__aside-link:hover {
color: var(--color-primary);
}
/* On mobile the link stacks below and loses its aside alignment */
@media (max-width: 639px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
}
/* ============================================================
10. GALLERY SECTION
=== GALLERY REBUILD WITH 14 REAL PHOTOS ===
Desktop: 4-col × 7-row explicit span layout.
Tablet: 2-col equal.
Mobile: 1-col stacked.
============================================================ */
/* === HOME TO GALLERY TRANSITION (added during visual adjustments) === */
/* Subtle gradient from pure white to off-white at the very top of the
gallery section. The #FFFFFF → #F7F7F7 shift is barely perceptible
but provides visual rhythm and marks the section boundary. */
/* === GALLERY TOP PADDING REDUCTION (visual adjustment) === */
/* Top padding halved (--space-16→--space-8 mobile, --space-24→--space-12 desktop).
Bottom padding is unchanged to preserve spacing below the grid.
Gradient height reduced from 100px to 60px to stay proportional. */
/* NAVIGATION scroll-margin-top fix attempt 3, matching Sustainability exactly.
Reference: .sustainability has scroll-margin-top: 0 (none set), padding-top 64px mobile / 96px desktop.
.gallery padding-top is 32px mobile / 48px desktop, so offset = reference_padding - own_padding:
mobile: 64 - 32 = 32px | desktop: 96 - 48 = 48px */
.gallery {
position: relative; /* needed for ::before gradient overlay */
padding-top: var(--space-8); /* was --space-16 */
padding-bottom: var(--space-16); /* unchanged */
background-color: var(--color-background-soft); /* off-white instead of pure white */
scroll-margin-top: 32px;
}
@media (min-width: 1024px) {
.gallery {
padding-top: var(--space-12); /* was --space-24 */
padding-bottom: var(--space-24); /* unchanged */
scroll-margin-top: 48px;
}
}
/* Gradient fade from the key-points white into the gallery off-white */
.gallery::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px; /* was 100px — reduced proportionally with the top padding */
background: linear-gradient(to bottom, #FFFFFF 0%, var(--color-background-soft) 100%);
pointer-events: none;
z-index: 0;
}
/* Lift gallery content above the pseudo-element */
.gallery .container {
position: relative;
z-index: 1;
}
/* ---- Grid ---- */
/* === GALLERY: BALANCED COLUMNS WITH PRIORITY ORDER === */
/* Desktop: 3 explicit flex columns — precise AA/BB/CC priority per column */
.gallery__grid {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.gallery__column {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
/* Tablet: 2-col CSS columns; column wrappers become transparent */
@media (max-width: 1023.98px) and (min-width: 640px) {
.gallery__grid {
display: block;
column-count: 2;
column-gap: var(--space-4);
}
.gallery__column {
display: contents;
}
.gallery__item {
break-inside: avoid;
display: block;
width: 100%;
margin-bottom: var(--space-4);
}
}
/* Mobile: single flex column, all items stack in DOM order */
@media (max-width: 639.98px) {
.gallery__grid {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.gallery__column {
display: contents;
}
}
/* ---- Item & Image ---- */
.gallery__item {
display: block;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
}
.gallery__image {
display: block;
width: 100%;
height: auto;
/* Natural aspect ratio — no cropping, no stretching */
transition: transform 300ms ease, filter 300ms ease;
}
.gallery__item:hover .gallery__image,
.gallery__item:focus-within .gallery__image {
transform: scale(1.03);
filter: brightness(1.05);
}
/* ---- Gallery stagger (per-item nth-child delays) — 14 items ---- */
.gallery__grid .gallery__item:nth-child(1) { transition-delay: 0.00s; }
.gallery__grid .gallery__item:nth-child(2) { transition-delay: 0.05s; }
.gallery__grid .gallery__item:nth-child(3) { transition-delay: 0.10s; }
.gallery__grid .gallery__item:nth-child(4) { transition-delay: 0.15s; }
.gallery__grid .gallery__item:nth-child(5) { transition-delay: 0.20s; }
.gallery__grid .gallery__item:nth-child(6) { transition-delay: 0.25s; }
.gallery__grid .gallery__item:nth-child(7) { transition-delay: 0.30s; }
.gallery__grid .gallery__item:nth-child(8) { transition-delay: 0.35s; }
.gallery__grid .gallery__item:nth-child(9) { transition-delay: 0.40s; }
.gallery__grid .gallery__item:nth-child(10) { transition-delay: 0.45s; }
.gallery__grid .gallery__item:nth-child(11) { transition-delay: 0.50s; }
.gallery__grid .gallery__item:nth-child(12) { transition-delay: 0.55s; }
.gallery__grid .gallery__item:nth-child(13) { transition-delay: 0.60s; }
.gallery__grid .gallery__item:nth-child(14) { transition-delay: 0.65s; }
/* These delays apply to the .reveal transition — but .reveal also defines
its own transition shorthand, so we need to use a specificity override
that targets the gallery items' reveal state before they're visible */
.gallery__grid .gallery__item.reveal { transition-delay: inherit; }
.gallery__grid .gallery__item.reveal:nth-child(1) { transition-delay: 0.00s; }
.gallery__grid .gallery__item.reveal:nth-child(2) { transition-delay: 0.05s; }
.gallery__grid .gallery__item.reveal:nth-child(3) { transition-delay: 0.10s; }
.gallery__grid .gallery__item.reveal:nth-child(4) { transition-delay: 0.15s; }
.gallery__grid .gallery__item.reveal:nth-child(5) { transition-delay: 0.20s; }
.gallery__grid .gallery__item.reveal:nth-child(6) { transition-delay: 0.25s; }
.gallery__grid .gallery__item.reveal:nth-child(7) { transition-delay: 0.30s; }
.gallery__grid .gallery__item.reveal:nth-child(8) { transition-delay: 0.35s; }
.gallery__grid .gallery__item.reveal:nth-child(9) { transition-delay: 0.40s; }
.gallery__grid .gallery__item.reveal:nth-child(10) { transition-delay: 0.45s; }
.gallery__grid .gallery__item.reveal:nth-child(11) { transition-delay: 0.50s; }
.gallery__grid .gallery__item.reveal:nth-child(12) { transition-delay: 0.55s; }
.gallery__grid .gallery__item.reveal:nth-child(13) { transition-delay: 0.60s; }
.gallery__grid .gallery__item.reveal:nth-child(14) { transition-delay: 0.65s; }
/* ---- Lightbox overlay ---- */
.lightbox-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
animation: lightbox-fade-in 0.2s ease;
}
@keyframes lightbox-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.lightbox-overlay__img-wrap {
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-overlay__img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: var(--radius-md);
display: block;
}
.lightbox-overlay__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff;
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.lightbox-overlay__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-overlay__arrow {
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.lightbox-overlay__arrow:hover { background: rgba(255, 255, 255, 0.24); }
/* ============================================================
11. ROOMS SECTION
3 room category cards in a responsive grid.
Desktop: 3 columns equal.
Tablet: 2 columns; third card spans full width.
Mobile: 1 column stacked.
============================================================ */
.rooms {
padding-block: var(--space-16);
background-color: var(--color-bg-alt, #f8f8f8);
}
@media (min-width: 1024px) {
.rooms {
padding-block: var(--space-24);
}
}
/* ---- Room grid ---- */
.rooms__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
/* Tablet: 2-col, third card spans both */
@media (min-width: 640px) and (max-width: 1023px) {
.rooms__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.room-card:nth-child(3) {
grid-column: 1 / -1;
max-width: 55%;
margin-inline: auto;
width: 100%;
}
}
/* Desktop: 3 equal columns */
@media (min-width: 1024px) {
.rooms__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
align-items: stretch;
}
}
/* ---- Room card ---- */
.room-card {
background-color: #ffffff;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border, #e8e8e8);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.room-card:hover,
.room-card:focus-within {
box-shadow: var(--shadow-md);
}
/* ---- Card image ---- */
.room-card__image-wrapper {
position: relative; /* carousel arrows + dots position relative to this */
aspect-ratio: 4 / 3;
overflow: hidden;
/* Top corners match card radius; image clips cleanly */
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
flex-shrink: 0;
}
.room-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.room-card:hover .room-card__image,
.room-card:focus-within .room-card__image {
transform: scale(1.04);
}
/* ---- Card body ---- */
.room-card__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-3);
}
.room-card__title {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-tight);
}
/* Quick info row: icon + label chips */
.room-card__info {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.room-card__info-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: var(--fw-medium);
}
.room-card__info-item svg {
flex-shrink: 0;
color: var(--color-primary);
}
/* === ROOMS: EQUIPMENT LIST === */
.room-card__equipment {
list-style: none;
padding: 0;
margin: 0;
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
}
.room-card__equipment li {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: 400;
line-height: 1.5;
}
.room-card__equipment li svg {
flex-shrink: 0;
color: #22C55E;
}
/* Footer: price (left) + link (right) */
.room-card__footer {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border, #e8e8e8);
}
.room-card__price {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--color-primary);
line-height: 1;
}
.room-card__price small {
font-size: var(--fs-sm);
font-weight: var(--fw-regular, 400);
color: var(--color-text-muted);
}
.room-card__link {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-base);
white-space: nowrap;
}
.room-card__link:hover,
.room-card__link:focus-visible {
color: var(--color-primary);
}
/* ---- Room cards stagger ---- */
/* === ROOM CARD CAROUSEL (added during visual adjustments) === */
/* Vanilla JS carousel replacing the single photo in each room card.
Touch-friendly swipe, pagination dots, wrap-around arrows.
To revert: remove this block and restore the single ![]()
in HTML. */
/* The carousel fills the image-wrapper completely */
.room-carousel {
position: relative;
width: 100%;
height: 100%;
}
/* Inner clip: overflow hidden here so arrows (outside) stay visible */
.room-carousel__track-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
/* Horizontal strip of slides — transform drives the animation */
.room-carousel__track {
display: flex;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: transform 300ms ease;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.room-carousel__track {
transition: none;
}
}
/* Individual slide — full-width of wrapper */
.room-carousel__slide {
flex: 0 0 100%;
height: 100%;
}
/* Photo inside each slide */
.room-carousel__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Arrow buttons */
.room-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-sm);
color: var(--color-text);
cursor: pointer;
transition:
background var(--transition-fast),
transform var(--transition-fast);
}
.room-carousel__arrow:hover,
.room-carousel__arrow:focus-visible {
background: #ffffff;
transform: translateY(-50%) scale(1.05);
}
.room-carousel__arrow:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.room-carousel__arrow--prev { left: 12px; }
.room-carousel__arrow--next { right: 12px; }
/* Pagination dots row */
.room-carousel__dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--space-2);
z-index: 2;
list-style: none;
margin: 0;
padding: 0;
}
/* Individual dot */
.room-carousel__dot {
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
border: none;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 0;
transition:
width var(--transition-fast),
background var(--transition-fast);
}
/* Active dot becomes a short pill in brand colour */
.room-carousel__dot--active {
width: 12px;
background: var(--color-primary);
}
.rooms__grid .room-card:nth-child(1) { transition-delay: 0.00s; }
.rooms__grid .room-card:nth-child(2) { transition-delay: 0.10s; }
.rooms__grid .room-card:nth-child(3) { transition-delay: 0.20s; }
/* ---- Amenities footnote ---- */
.rooms__note {
text-align: center;
font-style: italic;
font-size: var(--fs-sm);
color: var(--color-text-muted);
max-width: 640px;
margin-inline: auto;
line-height: var(--lh-relaxed);
}
/* ============================================================
12. SERVICES SECTION
12 amenity cards — 4-col desktop, 2-col tablet + mobile.
============================================================ */
.services {
padding-block: var(--space-16);
background-color: var(--color-bg);
}
@media (min-width: 1024px) {
.services {
padding-block: var(--space-24);
}
}
/* ---- Services grid ---- */
.services__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
@media (min-width: 640px) {
.services__grid {
gap: var(--space-5);
}
}
@media (min-width: 1024px) {
.services__grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
}
/* ---- Service card ---- */
.service-card {
background-color: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.service-card:hover,
.service-card:focus-within {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.service-card__icon {
color: var(--color-primary);
flex-shrink: 0;
line-height: 1;
}
.service-card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: var(--lh-tight);
}
.service-card__desc {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
/* ---- Services stagger (12 items, 50ms apart) ---- */
.services__grid .service-card:nth-child(1) { transition-delay: 0.00s; }
.services__grid .service-card:nth-child(2) { transition-delay: 0.05s; }
.services__grid .service-card:nth-child(3) { transition-delay: 0.10s; }
.services__grid .service-card:nth-child(4) { transition-delay: 0.15s; }
.services__grid .service-card:nth-child(5) { transition-delay: 0.20s; }
.services__grid .service-card:nth-child(6) { transition-delay: 0.25s; }
.services__grid .service-card:nth-child(7) { transition-delay: 0.30s; }
.services__grid .service-card:nth-child(8) { transition-delay: 0.35s; }
.services__grid .service-card:nth-child(9) { transition-delay: 0.40s; }
.services__grid .service-card:nth-child(10) { transition-delay: 0.45s; }
.services__grid .service-card:nth-child(11) { transition-delay: 0.50s; }
.services__grid .service-card:nth-child(12) { transition-delay: 0.55s; }
/* Override generic .reveal nth-child delays for service cards */
.services__grid .service-card.reveal:nth-child(1) { transition-delay: 0.00s; }
.services__grid .service-card.reveal:nth-child(2) { transition-delay: 0.05s; }
.services__grid .service-card.reveal:nth-child(3) { transition-delay: 0.10s; }
.services__grid .service-card.reveal:nth-child(4) { transition-delay: 0.15s; }
.services__grid .service-card.reveal:nth-child(5) { transition-delay: 0.20s; }
.services__grid .service-card.reveal:nth-child(6) { transition-delay: 0.25s; }
.services__grid .service-card.reveal:nth-child(7) { transition-delay: 0.30s; }
.services__grid .service-card.reveal:nth-child(8) { transition-delay: 0.35s; }
.services__grid .service-card.reveal:nth-child(9) { transition-delay: 0.40s; }
.services__grid .service-card.reveal:nth-child(10) { transition-delay: 0.45s; }
.services__grid .service-card.reveal:nth-child(11) { transition-delay: 0.50s; }
.services__grid .service-card.reveal:nth-child(12) { transition-delay: 0.55s; }
/* ============================================================
13. LOCATION SECTION
60/40 map + info card layout.
Mobile: stacked, map on top.
============================================================ */
.location {
padding-block: var(--space-16);
background-color: var(--color-bg-alt);
}
@media (min-width: 1024px) {
.location {
padding-block: var(--space-24);
}
}
/* ---- Layout ---- */
.location__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 1024px) {
.location__layout {
grid-template-columns: 3fr 2fr;
gap: var(--space-8);
align-items: stretch;
}
}
/* ---- Map container ---- */
.location__map {
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 340px;
box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.08));
border: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
.location__map {
min-height: 500px;
}
}
.location__map iframe {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
border: 0;
}
/* ---- Info card ---- */
.location__info {
display: flex;
flex-direction: column;
}
.location-card {
background-color: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-8);
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-6);
height: 100%;
}
.location-card__name {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-tight);
}
.location-card__address {
font-style: normal;
font-size: var(--fs-base);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
.location-card__contacts {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.location-card__contacts li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.location-card__contacts svg {
flex-shrink: 0;
color: var(--color-primary);
}
.location-card__contacts a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-base);
}
.location-card__contacts a:hover {
color: var(--color-primary);
}
/* WhatsApp contact row */
.location-card__whatsapp-link {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
transition: color var(--transition-base);
}
.location-card__whatsapp-link:hover {
color: #25D366;
}
.location-card__whatsapp-link svg {
flex-shrink: 0;
}
.location-card__whatsapp-number {
font-size: var(--fs-base);
font-weight: 500;
color: var(--color-text);
}
.location-card__whatsapp-label {
font-size: var(--fs-xs);
color: var(--color-text-muted);
margin-left: var(--space-1);
}
.location-card__divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 0;
}
/* ---- Getting here group (heading + list together) ---- */
.location-card__transport-group {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.location-card__transport-title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.location-card__transport {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.location-card__transport li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
.location-card__transport-icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--color-primary);
}
/* ---- Get Directions button ---- */
.location-card .btn--secondary {
align-self: flex-start;
margin-top: auto;
}
/* ============================================================
14. HISTORICAL DISTRICT SECTION
Photo cards with gradient overlay text.
Desktop: 4-col Bento (1 large 2×2, 1 wide 2×1, 2 small 1×1).
Tablet: 2-col · Mobile: 1-col (fixed height)
============================================================ */
/* HISTORICAL DISTRICT scroll anchor fix attempt 4 desktop and tablet only with precise measurement.
Mobile: both sections use padding-top=64px, no scroll-margin-top needed (already correct).
Desktop (1024px+): .sustainability overrides to padding-top=96px; .historical-district stays at 64px.
Kicker offset gap = 96 - 64 = 32px → add scroll-margin-top: 32px at 1024px+ only. */
.historical-district {
padding-block: var(--space-16);
background-color: var(--color-bg);
}
@media (min-width: 1024px) {
.historical-district {
scroll-margin-top: 32px;
}
}
/* === HISTORICAL DISTRICT: ORGANIC ARTICLE WITH MIXED-SIZE PHOTOS === */
.historical-article {
width: 100%;
margin-top: var(--space-8);
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.7;
}
.historical-article p {
max-width: none; /* override base.css p { max-width: 70ch } */
margin-bottom: var(--space-4);
}
.historical-article h3 {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
/* Clearfix so floated images never break out of the article */
.historical-article::after {
content: "";
display: table;
clear: both;
}
/* ---- Base image rule ---- */
.historical-article__image {
display: block;
height: auto;
border-radius: var(--radius-md);
object-fit: cover;
}
/* H1: 480px, float right, mid-paragraph A */
.historical-article__image--h1 {
width: 480px;
max-width: 100%;
float: right;
margin-left: 24px;
margin-bottom: 16px;
margin-top: 4px;
}
/* H2: 480px, float left, mid-paragraph B */
.historical-article__image--h2 {
width: 480px;
max-width: 100%;
float: left;
margin-right: 28px;
margin-bottom: 20px;
margin-top: 4px;
}
/* H3: 460px, float right */
.historical-article__image--h3 {
width: 460px;
max-width: 100%;
float: right;
margin-left: 24px;
margin-bottom: 16px;
margin-top: 4px;
}
/* H4: 440px, float left */
.historical-article__image--h4 {
width: 440px;
max-width: 100%;
float: left;
margin-right: 28px;
margin-bottom: 16px;
margin-top: 8px;
}
/* H5: 600px, float right */
.historical-article__image--h5 {
width: 600px;
max-width: 100%;
float: right;
margin-left: 24px;
margin-bottom: 16px;
margin-top: 4px;
}
/* Tablet: scale photos down ~20% */
@media (max-width: 1023.98px) and (min-width: 640px) {
.historical-article__image--h1 { width: 210px; }
.historical-article__image--h2 { width: 210px; }
.historical-article__image--h3 { width: 300px; }
.historical-article__image--h4 { width: 176px; }
.historical-article__image--h5 { width: 192px; }
}
/* Mobile: disable all floats, photos become full-width blocks */
@media (max-width: 639.98px) {
.historical-article__image,
.historical-article__image--h1,
.historical-article__image--h2,
.historical-article__image--h3,
.historical-article__image--h4,
.historical-article__image--h5 {
float: none;
display: block;
width: 100%;
max-width: 100%;
margin: var(--space-3) 0;
}
}
/* ============================================================
15. GROUP BOOKING SECTION
2-col layout (visual left + form right) on desktop.
Mobile: single column, image first.
============================================================ */
.group-booking {
padding-block: var(--space-16);
background-color: var(--color-bg);
}
@media (min-width: 1024px) {
.group-booking {
padding-block: var(--space-24);
}
}
/* === GROUP BOOKING: RESTRUCTURE OPTION H === */
/* ---- Block 1: Image + Benefits (50/50 grid) ---- */
.group-booking__block1 {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 768px) {
.group-booking__block1 {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
}
/* ---- Block 2: Full-width form ---- */
.group-booking__block2 {
margin-top: var(--space-12);
}
/* ---- Benefits column (right side of Block 1) ---- */
.group-booking__benefits-col {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.group-booking__benefits-kicker {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
/* ---- Visual block ---- */
.group-booking__visual {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.group-booking__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---- Floating badges ---- */
.group-booking__badge {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-2);
background-color: #ffffff;
box-shadow: var(--shadow-md);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
white-space: nowrap;
z-index: 2;
}
.group-booking__badge svg {
color: var(--color-primary);
flex-shrink: 0;
}
.group-booking__badge--tl {
top: var(--space-5);
left: var(--space-5);
}
.group-booking__badge--br {
bottom: var(--space-5);
right: var(--space-5);
}
/* ---- Benefits 2x2 grid ---- */
.group-booking__benefits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.benefit-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.benefit-item__icon {
color: var(--color-primary);
margin-bottom: var(--space-1);
}
.benefit-item__title {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
line-height: var(--lh-tight);
}
.benefit-item__desc {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
/* ---- Benefits stagger ---- */
.group-booking__benefits .benefit-item:nth-child(1) { transition-delay: 0.00s; }
.group-booking__benefits .benefit-item:nth-child(2) { transition-delay: 0.08s; }
.group-booking__benefits .benefit-item:nth-child(3) { transition-delay: 0.16s; }
.group-booking__benefits .benefit-item:nth-child(4) { transition-delay: 0.24s; }
/* ---- Group form card ---- */
/* GROUP BOOKING form adjustments: spacing, button, email line */
.group-form {
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: 0;
}
.group-form__heading {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-base);
margin-bottom: var(--space-3);
}
.group-form__intro {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-6);
}
/* ---- Form 2-col grid ---- */
.group-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 540px) {
.group-form__grid {
grid-template-columns: repeat(2, 1fr);
}
.form-field--span {
grid-column: span 2;
}
}
/* ---- Form field ---- */
.form-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-field__label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-text);
}
.form-field__required {
color: var(--color-primary);
}
.form-field__optional {
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: var(--color-text-muted);
}
.form-field__input {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-family: inherit;
color: var(--color-text);
background-color: var(--color-bg);
transition:
border-color var(--transition-base),
box-shadow var(--transition-base);
outline: none;
appearance: none;
-webkit-appearance: none;
}
.form-field__input::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
}
.form-field__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(168, 50, 125, 0.12);
}
.form-field__input--error {
border-color: #e53e3e;
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.10);
}
.form-field__input--textarea {
resize: vertical;
min-height: 84px;
}
/* ---- Form footer (submit button row) ---- */
.group-form__footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-6);
}
@media (max-width: 539px) {
.group-form__footer {
flex-direction: column-reverse; /* button on top, email below */
align-items: stretch;
gap: var(--space-4);
}
.group-form__footer .btn {
width: 100%;
justify-content: center;
text-align: center;
}
.group-form__footer .group-form__direct {
text-align: center;
}
}
/* ---- Form success message ---- */
.form-success {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background-color: #f0faf4;
border: 1px solid #4A7C59;
border-radius: var(--radius-md);
animation: fadeInUp 0.45s ease forwards;
}
.form-success[hidden] {
display: none;
}
.form-success svg {
color: #4A7C59;
flex-shrink: 0;
}
.form-success p {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: #4A7C59;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---- Form error message ---- */
.form-error {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background-color: #fff5f5;
border: 1px solid #e53e3e;
border-radius: var(--radius-md);
animation: fadeInUp 0.45s ease forwards;
}
.form-error[hidden] {
display: none;
}
.form-error svg {
color: #e53e3e;
flex-shrink: 0;
margin-top: 1px;
}
.form-error p {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: #c53030;
line-height: var(--lh-base);
}
.form-error p a {
color: #c53030;
font-weight: var(--fw-semibold);
text-decoration: underline;
}
/* ---- Direct email note ---- */
.group-form__direct {
font-size: var(--fs-base);
color: var(--color-text-muted);
text-align: left;
}
.group-form__direct a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--fw-medium);
transition: color var(--transition-fast);
}
.group-form__direct a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* ============================================================
16. SUSTAINABILITY SECTION
6 commitment cards, 3-col desktop, 2-col tablet, 1-col mobile.
Icon color: #4A7C59 (soft green — used only in this section).
============================================================ */
.sustainability {
padding-block: var(--space-16);
background-color: var(--color-bg-alt);
}
@media (min-width: 1024px) {
.sustainability {
padding-block: var(--space-24);
}
}
/* ---- Grid ---- */
.sustainability__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6); /* === SUSTAINABILITY mobile card spacing fix attempt 2: --space-5 did not exist; using valid token --space-6 (24px) === */
margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
.sustainability__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.sustainability__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
}
/* ---- Commitment card ---- */
.commitment-card {
background-color: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.commitment-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.commitment-card__icon {
color: #4A7C59;
flex-shrink: 0;
margin-bottom: var(--space-2);
}
.commitment-card__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--color-text);
line-height: var(--lh-tight);
}
.commitment-card__desc {
font-size: var(--fs-base);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
/* ---- Card stagger ---- */
.sustainability__grid .commitment-card:nth-child(1) { transition-delay: 0.00s; }
.sustainability__grid .commitment-card:nth-child(2) { transition-delay: 0.08s; }
.sustainability__grid .commitment-card:nth-child(3) { transition-delay: 0.16s; }
.sustainability__grid .commitment-card:nth-child(4) { transition-delay: 0.24s; }
.sustainability__grid .commitment-card:nth-child(5) { transition-delay: 0.32s; }
.sustainability__grid .commitment-card:nth-child(6) { transition-delay: 0.40s; }
/* ---- Honest note ---- */
/* === SUSTAINABILITY: increased space between cards and note === */
/* Was: no margin-top (felt cramped). Now: --space-8 mobile, --space-12 desktop. */
.sustainability__note {
text-align: center;
font-style: italic;
font-size: var(--fs-sm);
color: var(--color-text-muted);
max-width: 600px;
margin-inline: auto;
margin-top: var(--space-8); /* mobile: 32px */
line-height: var(--lh-relaxed);
}
@media (min-width: 1024px) {
.sustainability__note {
margin-top: var(--space-12); /* desktop: 48px */
}
}
.sustainability__note a,
.sustainability__note-link {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.sustainability__note a:hover,
.sustainability__note-link:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* ============================================================
17. REVIEWS SECTION
Rating summary bar + horizontal scroll-snap carousel.
Desktop: 3 cards visible · Tablet: 2 · Mobile: 1 (snap)
============================================================ */
/* === REVIEWS TO FAQ SPACING REDUCTION (visual adjustment) === */
/* NAVIGATION scroll-margin-top fix attempt 3, matching Sustainability exactly.
padding-top is 32px mobile / 48px desktop; offset = 64-32=32px mobile, 96-48=48px desktop. */
.reviews {
padding-block: var(--space-8);
background-color: var(--color-bg);
scroll-margin-top: 32px;
}
@media (min-width: 1024px) {
.reviews {
padding-block: var(--space-12);
scroll-margin-top: 48px;
}
}
/* ---- Rating summary bar ---- */
.reviews__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-12);
padding: var(--space-6) var(--space-8);
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.reviews__rating {
display: flex;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.reviews__score-block {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.reviews__score {
font-size: var(--fs-5xl);
font-weight: var(--fw-bold);
color: var(--color-primary);
line-height: 1;
}
.reviews__score-label {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.reviews__stars-block {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.reviews__stars {
display: flex;
gap: 3px;
color: var(--color-primary);
}
.reviews__count {
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
/* ---- Platform pills ---- */
.reviews__platforms {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.reviews__platform {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-text-muted);
white-space: nowrap;
}
/* ---- Carousel wrapper ---- */
.reviews__carousel-wrapper {
position: relative;
padding-inline: var(--space-1);
}
/* ---- Prev / Next arrows ---- */
.reviews__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid var(--color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
color: var(--color-text);
cursor: pointer;
transition:
background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base);
}
.reviews__arrow:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.reviews__arrow--prev {
left: -22px;
}
.reviews__arrow--next {
right: -22px;
}
@media (max-width: 767px) {
.reviews__arrow {
display: none;
}
}
/* ---- Carousel track ---- */
.reviews__carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: var(--space-5);
padding-bottom: var(--space-4);
padding-inline: var(--space-1);
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
-webkit-overflow-scrolling: touch;
}
.reviews__carousel::-webkit-scrollbar {
height: 4px;
}
.reviews__carousel::-webkit-scrollbar-track {
background: transparent;
}
.reviews__carousel::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 2px;
}
/* ---- Review card ---- */
.review-card {
flex: 0 0 calc(33.333% - 14px);
min-width: 280px;
scroll-snap-align: start;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (max-width: 1023px) {
.review-card {
flex: 0 0 calc(50% - 10px);
}
}
@media (max-width: 639px) {
.review-card {
flex: 0 0 85vw;
}
}
/* ---- Stars row in card ---- */
.review-card__stars {
display: flex;
gap: 3px;
color: var(--color-primary);
}
/* ---- Blockquote ---- */
.review-card__quote {
margin: 0;
flex: 1;
}
.review-card__quote p {
font-size: var(--fs-base);
color: var(--color-text);
line-height: var(--lh-relaxed);
}
/* ---- Author footer ---- */
.review-card__author {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
/* ---- Avatar circle with initials ---- */
.review-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--avatar-bg, var(--color-secondary));
color: #ffffff;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-style: normal;
}
.review-card__name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
.review-card__stay {
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-style: normal;
margin-top: 2px;
display: block;
}
/* ---- Card stagger ---- */
.reviews__carousel .review-card:nth-child(1) { transition-delay: 0.00s; }
.reviews__carousel .review-card:nth-child(2) { transition-delay: 0.08s; }
.reviews__carousel .review-card:nth-child(3) { transition-delay: 0.16s; }
.reviews__carousel .review-card:nth-child(4) { transition-delay: 0.24s; }
.reviews__carousel .review-card:nth-child(5) { transition-delay: 0.32s; }
.reviews__carousel .review-card:nth-child(6) { transition-delay: 0.40s; }
/* ---- CTA link ---- */
.reviews__cta {
text-align: center;
margin-top: var(--space-10);
}
.reviews__cta-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: opacity var(--transition-base);
}
.reviews__cta-link:hover {
opacity: 0.72;
}
/* ============================================================
18. FAQ SECTION
Bento-style cards. 2-col CSS masonry on desktop (1024px+),
1-col on tablet/mobile. Plus icon rotates 45deg when open.
Active card: white bg, soft shadow, 3px magenta left bar.
============================================================ */
/* === REVIEWS TO FAQ SPACING REDUCTION (visual adjustment) === */
/* NAVIGATION scroll-margin-top fix attempt 3, matching Sustainability exactly.
padding-top is 32px mobile / 48px desktop; offset = 64-32=32px mobile, 96-48=48px desktop. */
.faq {
padding-block: var(--space-8);
background-color: var(--color-bg);
scroll-margin-top: 32px;
}
@media (min-width: 1024px) {
.faq {
padding-block: var(--space-12);
scroll-margin-top: 48px;
}
}
/* ---- CSS columns masonry ---- */
.faq__list {
column-count: 1;
column-gap: var(--space-4);
margin-bottom: var(--space-10);
}
@media (min-width: 1024px) {
.faq__list {
column-count: 2;
}
}
/* ---- Individual Bento card ---- */
.faq-item {
position: relative;
background-color: #FAFAFA;
border-radius: var(--radius-lg);
padding: var(--space-6);
break-inside: avoid;
display: inline-block;
width: 100%;
margin-bottom: var(--space-4);
box-sizing: border-box;
transition:
background-color var(--transition-base),
box-shadow var(--transition-base),
transform var(--transition-base);
}
/* Magenta left bar via ::before — invisible at rest */
.faq-item::before {
content: '';
position: absolute;
inset-block: 0;
left: 0;
width: 3px;
background-color: var(--color-primary);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
opacity: 0;
transition: opacity var(--transition-base);
}
/* Hover: gentle lift */
.faq-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* Open (active) state: white card + shadow + left bar */
.faq-item[open] {
background-color: #ffffff;
box-shadow: var(--shadow-sm);
transform: none;
}
.faq-item[open]::before {
opacity: 1;
}
/* ---- Summary / Question row ---- */
.faq-item__question {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
cursor: pointer;
list-style: none;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
user-select: none;
}
/* Hide native browser marker */
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { display: none; }
/* ---- Plus icon (rotates 45deg → X on open) ---- */
.faq-item__icon {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 1px;
transition: transform var(--transition-base);
}
.faq-item[open] .faq-item__icon {
transform: rotate(45deg);
}
/* ---- Answer body (max-height animation) ---- */
.faq-item__answer {
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 0.38s ease,
opacity 0.28s ease,
margin-top 0.38s ease;
}
.faq-item[open] .faq-item__answer {
max-height: 600px;
opacity: 1;
margin-top: var(--space-4);
}
/* Separator line + answer text */
.faq-item__answer p {
border-top: 1px solid var(--color-border);
padding-top: var(--space-4);
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.7;
font-weight: 400;
margin: 0;
}
/* ---- Contact note below list ---- */
.faq__contact-note {
text-align: center;
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
}
.faq__contact-note a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--fw-medium);
}
.faq__contact-note a:hover {
text-decoration: underline;
}
/* ============================================================
19. FOOTER
Dark (#1F1F1F) background. 4-col desktop, 2-col tablet,
1-col mobile. White/light-gray text.
============================================================ */
/* === FOOTER REBUILD: 3 COLUMNS === */
.site-footer {
background-color: #1A1A1A;
color: #C5C5C5;
padding-top: var(--space-16);
}
@media (min-width: 1024px) {
.site-footer {
padding-top: var(--space-24);
}
}
/* ---- 3-col grid ---- */
/* FOOTER 3 LINK COLUMNS RESTRUCTURE — 4 columns total (Brand + 3 link cols) */
.footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
padding-bottom: var(--space-12);
}
/* Tablet: 2x2 wrap — Brand + Hotel on top, Stay + About below */
@media (min-width: 640px) {
.footer__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
}
/* Desktop: 4 columns side by side */
@media (min-width: 1024px) {
.footer__grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-8);
align-items: start;
}
}
/* ---- Brand column ---- */
/* FOOTER LOGO REPLACED WITH PNG AT DOUBLE SIZE — transparent PNG, no filter */
.footer__logo-link {
display: inline-block;
margin-bottom: var(--space-6);
}
.footer__logo-img {
display: block;
height: 160px; /* doubled from previous 80px */
width: auto;
}
@media (max-width: 640px) {
.footer__logo-img {
height: 90px;
}
}
.footer__tagline {
font-size: var(--fs-sm);
color: #C5C5C5;
line-height: var(--lh-relaxed);
margin-bottom: var(--space-4);
}
/* ---- Contact block ---- */
.footer__contact {
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--fs-sm);
color: #C5C5C5;
font-style: normal;
}
.footer__contact-row {
display: flex;
align-items: flex-start;
gap: var(--space-2);
line-height: var(--lh-relaxed);
}
.footer__contact-row svg {
flex-shrink: 0;
margin-top: 3px;
color: #C5C5C5;
}
.footer__contact a {
color: #C5C5C5;
text-decoration: none;
transition: color var(--transition-fast);
}
.footer__contact a:hover {
color: #ffffff;
}
.footer__contact-label {
font-size: var(--fs-xs);
color: rgba(255, 255, 255, 0.4);
margin-left: var(--space-1);
}
/* ---- Column heading ---- */
.footer__heading {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-bottom: var(--space-4);
}
/* ---- Link lists ---- */
.footer__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer__links a {
font-size: var(--fs-sm);
color: #C5C5C5;
text-decoration: none;
transition: color var(--transition-fast);
}
.footer__links a:hover {
color: #ffffff;
}
/* ---- Bottom bar ---- */
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-block: var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
@media (min-width: 1024px) {
.footer__bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
gap: var(--space-4);
}
}
.footer__copyright {
font-size: var(--fs-sm);
color: #C5C5C5;
white-space: nowrap;
}
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 1024px) {
.footer__legal {
justify-content: flex-end;
}
}
.footer__legal a {
font-size: var(--fs-sm);
color: #C5C5C5;
text-decoration: none;
transition: color var(--transition-fast);
white-space: nowrap;
}
.footer__legal a:hover {
color: #ffffff;
}
.footer__legal-sep {
font-size: var(--fs-sm);
color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
}
/* === LEGAL MENTIONS MODAL === */
.legal-modal {
position: fixed;
inset: 0;
z-index: 500;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
opacity: 0;
transition: opacity 200ms ease;
}
.legal-modal--visible {
opacity: 1;
}
.legal-modal[hidden] {
display: none;
}
.legal-modal__container {
position: relative;
background-color: #ffffff;
border-radius: var(--radius-lg);
padding: var(--space-8);
max-width: 700px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.legal-modal__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.legal-modal__close:hover {
color: var(--color-text);
background-color: var(--color-background-soft);
}
.legal-modal__heading {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--color-text);
margin-bottom: var(--space-6);
padding-right: var(--space-8);
}
.legal-modal__subheading {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--color-text);
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.legal-modal__text {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-2);
}
.legal-modal__address {
font-style: normal;
}
.legal-modal__text a {
color: var(--color-primary);
text-decoration: none;
}
.legal-modal__text a:hover {
text-decoration: underline;
}
body.body--modal-open {
overflow: hidden;
}
/* ============================================================
PRIVACY POLICY MODAL — ADDED
Extends .legal-modal base styles; adds wider container,
list styles, updated note, subheading spacing, back-to-top.
============================================================ */
.privacy-modal__container {
max-width: 750px;
max-height: 85vh;
}
.privacy-modal__updated {
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.privacy-modal__subheading {
font-size: var(--fs-lg);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.privacy-modal__list {
list-style: disc;
padding-left: var(--space-6);
margin-bottom: var(--space-3);
}
.privacy-modal__list li {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-2);
}
.privacy-modal__list li strong {
color: var(--color-text);
}
.privacy-modal__back-to-top {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
text-align: center;
}
.privacy-modal__back-to-top a {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-sm);
color: var(--color-primary);
text-decoration: none;
transition: opacity var(--transition-fast);
}
.privacy-modal__back-to-top a:hover {
opacity: 0.75;
text-decoration: underline;
}
@media (max-width: 640px) {
.privacy-modal__container {
padding: var(--space-6);
}
}
/* ============================================================
CAREERS MODAL — ADDED
Reuses .legal-modal overlay and container base styles.
Extra rules for paragraph text, CTA emphasis, and email link.
============================================================ */
.careers-modal__text {
font-size: var(--fs-base);
color: var(--color-text);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.careers-modal__text--cta {
font-weight: var(--fw-semibold);
}
.careers-modal__contact {
margin-top: var(--space-8);
font-size: var(--fs-base);
color: var(--color-text);
line-height: 1.7;
border-top: 1px solid var(--color-border);
padding-top: var(--space-6);
}
.careers-modal__email {
display: inline-block;
color: var(--color-primary);
font-weight: var(--fw-semibold);
text-decoration: none;
margin-left: var(--space-1);
transition: opacity var(--transition-fast);
}
.careers-modal__email:hover {
opacity: 0.8;
text-decoration: underline;
}
/* ============================================================
20. BACK-TO-TOP BUTTON
Fixed bottom-right. Fades in after scrolling 400px.
============================================================ */
.back-to-top {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: 200;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--color-primary);
border: none;
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(168, 50, 125, 0.35);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease,
background-color var(--transition-base);
}
.back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background-color: #8f2368;
}
/* ============================================================
21. ACTIVE NAV STATE
Highlights the menu overlay link for the section in view.
============================================================ */
.menu-overlay__link--active {
color: var(--color-primary) !important;
}
.menu-overlay__link--active::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-primary);
margin-right: var(--space-2);
vertical-align: middle;
flex-shrink: 0;
}
/* ============================================================
22. COOKIE BANNER (GDPR)
Magazine-quality, calm and professional design.
Fixed bottom, centered on desktop, full-width on mobile.
Generous interior padding — text never touches the edges.
z-index 90 — below menu overlay (200).
============================================================ */
/* --- Outer shell --- */
.cookie-banner {
position: fixed;
bottom: var(--space-4);
left: var(--space-4);
right: var(--space-4);
z-index: 90;
background: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-6);
transition: opacity 0.15s ease;
}
.cookie-banner[hidden] {
display: none;
}
@media (min-width: 768px) {
.cookie-banner {
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100% - var(--space-12));
max-width: 720px;
bottom: var(--space-6);
padding: var(--space-8);
}
}
/* --- Inner flex layout: text left | buttons right --- */
.cookie-banner__inner {
display: flex;
flex-direction: column;
gap: 20px; /* --space-5 equivalent */
}
@media (min-width: 768px) {
.cookie-banner__inner {
flex-direction: row;
align-items: center;
gap: var(--space-8);
}
}
/* --- Left column: text content --- */
.cookie-banner__content {
flex: 1;
min-width: 0;
}
/* Heading row: icon + title */
.cookie-banner__heading-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.cookie-banner__icon {
color: var(--color-primary);
flex-shrink: 0;
}
.cookie-banner__heading {
font-size: var(--fs-base);
font-weight: var(--fw-bold);
color: var(--color-text);
margin: 0;
max-width: none;
}
/* Description */
.cookie-banner__description {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: var(--space-3);
max-width: 540px;
}
/* Customize text link */
.cookie-banner__customize-link {
display: inline;
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: var(--fs-sm);
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.cookie-banner__customize-link:hover,
.cookie-banner__customize-link:focus-visible {
opacity: 0.7;
}
/* --- Expandable customize panel (smooth max-height transition) --- */
.cookie-banner__customize-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.cookie-banner__customize-panel--open {
max-height: 700px;
}
/* Inner body carries the visible background + padding */
.cookie-banner__customize-body {
background: var(--color-background-soft);
border-radius: var(--radius-md);
padding: 20px; /* --space-5 equivalent */
margin-top: var(--space-4);
}
/* Category list */
.cookie-banner__categories {
display: flex;
flex-direction: column;
}
/* Each category row */
.cookie-banner__category {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}
.cookie-banner__category:last-child {
border-bottom: none;
}
.cookie-banner__category-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.cookie-banner__category-name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text);
cursor: default;
}
label.cookie-banner__category-name {
cursor: pointer;
}
.cookie-banner__category-desc {
font-size: var(--fs-xs);
color: var(--color-text-muted);
line-height: 1.4;
max-width: none;
}
/* Save button inside the panel */
.cookie-banner__save-btn {
width: 100%;
margin-top: var(--space-4);
}
/* --- Right column: action buttons --- */
.cookie-banner__actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex-shrink: 0;
}
.cookie-banner__btn {
min-width: 160px;
width: 100%; /* full-width on mobile */
}
@media (min-width: 768px) {
.cookie-banner__btn {
width: auto; /* fit content on desktop */
}
}
/* ============================================================
CSS TOGGLE SWITCH
Wraps a hidden with a custom pill.
Keyboard-accessible: the real input receives focus/Tab.
============================================================ */
.cookie-toggle {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
width: 44px;
height: 24px;
cursor: pointer;
}
/* The "always on" (essential) span variant */
.cookie-toggle--on {
cursor: default;
}
/* Hidden real checkbox — keyboard-accessible, no visual */
.cookie-toggle__input {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
margin: 0;
z-index: 1;
}
/* Pill-shaped track */
.cookie-toggle__track {
display: block;
width: 44px;
height: 24px;
border-radius: 12px;
background: var(--color-border);
position: relative;
transition: background 0.2s ease;
flex-shrink: 0;
}
/* Sliding thumb */
.cookie-toggle__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
/* Checked state — track turns primary, thumb slides right */
.cookie-toggle__input:checked + .cookie-toggle__track {
background: var(--color-primary);
}
.cookie-toggle__input:checked + .cookie-toggle__track .cookie-toggle__thumb {
transform: translateX(20px);
}
/* Focus ring on the hidden input surfaces on the track */
.cookie-toggle__input:focus-visible + .cookie-toggle__track {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Always-on (essential) toggle — active state, locked */
.cookie-toggle--on .cookie-toggle__track {
background: var(--color-primary);
opacity: 0.55;
}
.cookie-toggle--on .cookie-toggle__thumb {
transform: translateX(20px);
}
/* ============================================================
21. BOOK NOW MODAL — ADDED
Opened by .js-open-book-modal buttons (header CTA + hero).
Shares overlay/container pattern with Legal Mentions modal.
============================================================ */
.book-modal {
position: fixed;
inset: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
opacity: 0;
transition: opacity 200ms ease;
}
.book-modal--visible {
opacity: 1;
}
.book-modal[hidden] {
display: none;
}
.book-modal__container {
position: relative;
background-color: #ffffff;
border-radius: var(--radius-lg);
padding: var(--space-8);
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
/* --- Close button --- */
.book-modal__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background-color var(--transition-fast);
flex-shrink: 0;
}
.book-modal__close:hover {
color: var(--color-text);
background-color: var(--color-background-soft);
}
/* --- Best Price banner --- */
.book-modal__banner {
display: flex;
align-items: center;
gap: var(--space-3);
background-color: rgba(168, 50, 125, 0.09);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-6);
}
.book-modal__banner-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
}
.book-modal__banner-title {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
margin-bottom: 2px;
}
.book-modal__banner-sub {
font-size: var(--fs-base);
color: var(--color-text);
line-height: 1.4;
}
/* --- Title and subtitle --- */
.book-modal__title {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
padding-right: var(--space-8);
}
.book-modal__subtitle {
font-size: var(--fs-base);
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: var(--space-6);
}
/* --- Form grids --- */
.book-modal__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
/* --- Select field --- */
.form-field__input--select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: var(--space-8);
cursor: pointer;
}
/* --- Submit button --- */
.book-modal__submit {
margin-top: var(--space-6);
width: 100%;
}
/* --- Error message --- */
.book-modal__error {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background-color: #fff5f5;
border: 1px solid #e53e3e;
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
.book-modal__error[hidden] {
display: none;
}
.book-modal__error svg {
color: #e53e3e;
flex-shrink: 0;
margin-top: 1px;
}
.book-modal__error p {
font-size: var(--fs-sm);
color: #c53030;
line-height: var(--lh-base);
}
.book-modal__error p a {
color: #c53030;
font-weight: var(--fw-semibold);
text-decoration: underline;
}
/* --- Mid-form note (between booking details and contact info) --- */
.book-modal__midform-note {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-6);
margin-bottom: var(--space-6);
}
/* --- Reassurance line below submit --- */
.book-modal__reassurance {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--space-3);
}
/* --- Disclaimer --- */
.book-modal__disclaimer {
font-size: var(--fs-xs);
font-style: italic;
color: var(--color-text-muted);
line-height: 1.6;
margin-top: var(--space-6);
text-align: center;
}
/* --- Success state --- */
.book-modal__success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8) var(--space-4);
}
.book-modal__success[hidden] {
display: none;
}
.book-modal__success-icon {
color: #38a169;
margin-bottom: var(--space-4);
}
.book-modal__success-title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.book-modal__success-text {
font-size: var(--fs-base);
color: var(--color-text-muted);
line-height: 1.6;
max-width: 400px;
margin-bottom: var(--space-6);
}
.book-modal__success-close {
min-width: 140px;
}
/* --- Responsive --- */
@media (max-width: 639px) {
.book-modal {
padding: var(--space-3);
}
.book-modal__container {
padding: var(--space-6) var(--space-4);
max-height: 90vh;
width: 95vw;
}
.book-modal__grid {
grid-template-columns: 1fr;
}
.book-modal__submit {
width: 100%;
}
.book-modal__title {
font-size: var(--fs-xl);
}
}