/* ============================================================================= Terra D'Oro · Antigravity Design System main.css — Non-critical styles loaded async after LCP Botanical Luxury · Porto-Vecchio, Corsica ============================================================================= */ /* 1. GOOGLE FONTS Loaded here (non-blocking) rather than in to protect LCP. font-display: swap is set server-side via the API parameter. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap'); /* 2. DESIGN TOKENS Single source of truth — every component references these. Critical subset is also inlined in base.php for LCP. ============================================================================= */ :root { /* — Palette — */ --color-olive: #556B2F; --color-olive-dark: #3D4E22; --color-olive-light: #6B8A3A; --color-sage: #8A9A5B; --color-sage-light: #A8B87A; --color-off-white: #FAF9F6; --color-cream: #F2EDE4; --color-sand: #E8DFD0; --color-charcoal: #2C2C2C; --color-text: #3A3A3A; --color-text-muted: #7A7A7A; --color-border: #E0DAD0; --color-white: #FFFFFF; /* — Typography — */ --font-heading: 'DM Serif Display', 'Georgia', 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Fluid type scale using clamp() — no breakpoint juggling */ --text-xs: clamp(0.70rem, 1.5vw, 0.75rem); --text-sm: clamp(0.813rem, 2vw, 0.875rem); --text-base: clamp(0.938rem, 2.5vw, 1rem); --text-lg: clamp(1.063rem, 3vw, 1.125rem); --text-xl: clamp(1.25rem, 4vw, 1.5rem); --text-2xl: clamp(1.5rem, 5vw, 2rem); --text-3xl: clamp(2rem, 6vw, 3rem); --text-4xl: clamp(2.75rem, 8vw, 4.5rem); --text-hero: clamp(3rem, 10vw, 6.5rem); /* — Spacing scale — */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* — Layout — */ --container: 1200px; --container-wide: 1440px; --container-narrow: 720px; --gutter: clamp(1.25rem, 5vw, 3rem); /* — Transitions — */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); --t-fast: 150ms var(--ease); --t-base: 400ms var(--ease); --t-slow: 800ms var(--ease-out); --t-crawl: 1200ms var(--ease-out); /* — Borders & Radii — */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --border: 1px solid var(--color-border); /* — Shadows — */ --shadow-xs: 0 2px 4px rgba(44, 44, 44, 0.04); --shadow-sm: 0 4px 12px rgba(44, 44, 44, 0.06); --shadow: 0 8px 30px rgba(44, 44, 44, 0.08); --shadow-lg: 0 16px 50px rgba(44, 44, 44, 0.12); --shadow-hero: 0 32px 100px rgba(0, 0, 0, 0.40); /* — Z-index scale — */ --z-under: -1; --z-base: 0; --z-raised: 10; --z-overlay: 50; --z-nav: 100; --z-modal: 200; } /* 3. RESET & BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.75; color: var(--color-text); background-color: var(--color-off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: transparent; } input, textarea, select { font: inherit; } p { max-width: 65ch; } :focus-visible { outline: 2px solid var(--color-sage); outline-offset: 3px; } ::selection { background: var(--color-sage); color: var(--color-off-white); } /* 4. TYPOGRAPHY ============================================================================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; color: var(--color-charcoal); letter-spacing: -0.02em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 500; } /* Eyebrow label — appears above headings */ .eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--sp-4); } /* Lead paragraph */ .lead { font-size: var(--text-lg); font-weight: 300; line-height: 1.85; color: var(--color-text-muted); max-width: 60ch; } /* Hero title — largest display type */ .hero-title { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; color: var(--color-off-white); } .hero-title em { font-style: italic; font-weight: 400; } /* Decorative serif dropcap for long-form descriptions */ .dropcap::first-letter { font-family: var(--font-heading); font-size: 4em; line-height: 0.8; float: left; margin-right: var(--sp-3); color: var(--color-sage); } /* 5. LAYOUT SYSTEM Mobile-first: base styles = mobile, scale up with media queries. ============================================================================= */ /* Container */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: var(--container-narrow); } /* Section rhythm */ .section { padding-block: clamp(4rem, 10vw, 7rem); } .section--sm { padding-block: clamp(2.5rem, 6vw, 4rem); } .section--lg { padding-block: clamp(6rem, 14vw, 11rem); } .section--flush { padding-block: 0; } /* Grid utilities */ .grid { display: grid; gap: var(--gutter); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Responsive auto-grid — fills row then wraps */ .grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } /* ── Asymmetric editorial layouts — text left / image right ── */ /* * ROOT FIX: display:grid MUST be declared here. * .grid-editorial is NOT combined with .grid, so without this * declaration the browser falls back to display:block and * grid-template-columns is silently ignored → vertical stacking. */ .grid-editorial { display: grid; grid-template-columns: 1fr 1.2fr; /* text ← narrower | image → wider */ align-items: center; gap: clamp(3rem, 8vw, 7rem); } /* Reversed variant: image left / text right */ .grid-editorial--rev { grid-template-columns: 1.2fr 1fr; } /* ── Collapse to single column on mobile ── */ @media (max-width: 767px) { .grid-editorial, .grid-editorial--rev { grid-template-columns: 1fr; gap: var(--sp-10); } } /* ── Editorial text column baseline ────────────────────────────────────────── * Flex-column so CTA buttons always use their natural (fit-content) width * and never stretch to the full column width regardless of viewport. * justify-content / padding overrides are applied in Section 17 (desktop only). */ .editorial__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; /* paragraphs/elements manage their own margin-top via .mt-* utils */ } /* Flex utilities */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .gap-12 { gap: var(--sp-12); } /* 6. NAVIGATION Transparent over hero → opaque on scroll via JS .scrolled class. ============================================================================= */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav); padding-block: var(--sp-6); transition: background var(--t-base), box-shadow var(--t-base), padding var(--t-base); } .site-header.scrolled { /* * background + backdrop-filter intentionally omitted here. * * WHY: backdrop-filter on an element makes it a "containing block" for every * position:fixed descendant (CSS Compositing & Filtering spec). Because * .nav-links uses position:fixed, having backdrop-filter directly on
* confines the mobile overlay to the header's ~80 px height — it never covers * the full viewport. The glass effect is delegated to .site-header__backdrop, * which is a SIBLING of .nav-inner (not an ancestor of .nav-links). */ box-shadow: 0 1px 0 var(--color-border); padding-block: var(--sp-4); } /* * Glass-morphism backdrop — presentational layer only. * * Sits as a sibling BEFORE .nav-inner in the DOM, so it is never an ancestor * of .nav-links. The backdrop-filter on this div does NOT affect position:fixed * descendants of .nav-inner.
itself stays filter-free. */ .site-header__backdrop { position: absolute; inset: 0; z-index: 0; /* below .nav-inner (z-index: 1) in the same stacking ctx */ pointer-events: none; transition: background var(--t-base); /* backdrop-filter is added only in .scrolled state below */ } .site-header.scrolled .site-header__backdrop { background: rgba(250, 249, 246, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); position: relative; /* establishes a stacking context above __backdrop */ z-index: 1; } /* Logo */ .nav-logo { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.06em; color: var(--color-off-white); transition: color var(--t-base); flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-3); } .nav-logo__icon { width: 28px; height: 28px; opacity: 0.9; } .site-header.scrolled .nav-logo { color: var(--color-charcoal); } /* Nav links */ .nav-links { display: flex; align-items: center; gap: var(--sp-8); } .nav-links a { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 249, 246, 0.80); transition: color var(--t-fast); position: relative; padding-block: var(--sp-1); } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--color-sage-light); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base); } .nav-links a:hover { color: var(--color-off-white); } .nav-links a.active { color: var(--color-off-white); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .site-header.scrolled .nav-links a { color: var(--color-text-muted); } .site-header.scrolled .nav-links a:hover, .site-header.scrolled .nav-links a.active { color: var(--color-olive); } /* Dark header variant for pages without hero images (e.g. confirmation) */ .site-header--dark:not(.scrolled) .nav-logo { color: var(--color-charcoal); } .site-header--dark:not(.scrolled) .nav-links a { color: var(--color-text-muted); } .site-header--dark:not(.scrolled) .nav-links a:hover, .site-header--dark:not(.scrolled) .nav-links a.active { color: var(--color-olive); } /* Nav CTA button */ .nav-cta { padding: var(--sp-3) var(--sp-6) !important; border: 1px solid rgba(250, 249, 246, 0.35) !important; border-radius: 0 !important; color: var(--color-off-white) !important; letter-spacing: 0.12em !important; transition: all var(--t-base) !important; white-space: nowrap; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(250, 249, 246, 0.65) !important; } .site-header.scrolled .nav-cta { border-color: var(--color-olive) !important; color: var(--color-olive) !important; } .site-header.scrolled .nav-cta:hover { background: var(--color-olive) !important; color: var(--color-off-white) !important; } .site-header--dark:not(.scrolled) .nav-cta { border-color: var(--color-olive) !important; color: var(--color-olive) !important; } .site-header--dark:not(.scrolled) .nav-cta:hover { background: var(--color-olive) !important; color: var(--color-off-white) !important; } /* Hamburger toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); z-index: var(--z-modal); position: relative; } .nav-toggle__bar { display: block; width: 22px; height: 1.5px; background: var(--color-off-white); transition: transform var(--t-base), opacity var(--t-fast), background var(--t-base); transform-origin: center; } .site-header.scrolled .nav-toggle__bar { background: var(--color-charcoal); } .site-header--dark:not(.scrolled) .nav-toggle__bar { background: var(--color-charcoal); } /* Hamburger → X animation */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* * Critical fix — X visibility on dark-variant pages (restaurant, error, …) * * Problem: site-header--dark:not(.scrolled) forces bars to --color-charcoal so * they read against a white page body through the transparent header. * But when the mobile overlay OPENS, the full-screen dark overlay (z-99) sits * behind the transparent header (z-100), making the charcoal X invisible. * * Fix: when the toggle is expanded on a --dark page (not yet scrolled), * restore bars to off-white — the dark overlay provides the contrast. */ .site-header--dark:not(.scrolled) .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: var(--color-off-white); } /* Universal fix — aria-expanded="true" is the master state. Whenever the menu is OPEN, the full-screen dark overlay is always visible, so bars MUST be off-white regardless of whether the header is .scrolled or not. !important beats both .scrolled and .site-header--dark specificity. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background-color: var(--color-off-white) !important; } /* Mobile "RÉSERVER" CTA inside the burger overlay ── hidden on desktop */ .nav-mobile-cta { display: none; } /* 7. HERO SECTION ============================================================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-charcoal); /* fallback while video loads */ } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: var(--z-under); } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(28, 28, 28, 0.75) 0%, rgba(28, 28, 28, 0.25) 50%, rgba(28, 28, 28, 0.10) 100% ); z-index: var(--z-base); } .hero__content { position: relative; z-index: var(--z-raised); padding-bottom: clamp(3rem, 8vw, 6rem); width: 100%; } .hero__eyebrow { color: var(--color-sage-light); margin-bottom: var(--sp-5); } .hero__title { margin-bottom: var(--sp-8); } .hero__subtitle { font-size: var(--text-lg); font-weight: 300; color: rgba(250, 249, 246, 0.75); max-width: 48ch; line-height: 1.7; margin-bottom: var(--sp-10); } .hero__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } /* Scroll indicator */ .hero__scroll { position: absolute; bottom: var(--sp-8); right: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); color: rgba(250, 249, 246, 0.50); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; z-index: var(--z-raised); } .hero__scroll::after { content: ''; width: 1px; height: 48px; background: rgba(250, 249, 246, 0.30); animation: scrollLine 1.8s ease-in-out infinite; } /* 8. BUTTONS ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-8); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: all var(--t-base); border: 1px solid transparent; position: relative; overflow: hidden; border-radius: var(--radius-sm); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-primary { background: var(--color-olive); color: var(--color-off-white); border-color: var(--color-olive); } .btn-primary:hover { background: var(--color-olive-dark); border-color: var(--color-olive-dark); box-shadow: 0 6px 16px rgba(85, 107, 47, 0.3); } .btn-outline { background: transparent; color: var(--color-olive); border-color: var(--color-olive); } .btn-outline:hover { background: var(--color-olive); color: var(--color-off-white); box-shadow: 0 6px 16px rgba(85, 107, 47, 0.2); } .btn-ghost { background: transparent; color: var(--color-off-white); border-color: rgba(250, 249, 246, 0.45); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(250, 249, 246, 0.75); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .btn-sage { background: var(--color-sage); color: var(--color-off-white); border-color: var(--color-sage); } .btn-sage:hover { background: var(--color-olive); border-color: var(--color-olive); } .btn--lg { padding: var(--sp-5) var(--sp-10); font-size: var(--text-sm); } .btn--sm { padding: var(--sp-3) var(--sp-5); font-size: 0.70rem; } /* ── Tap target: guarantee 44×44px minimum on touch devices ── */ @media (pointer: coarse) { .btn { min-height: 44px; } .btn--sm { min-height: 44px; padding-block: var(--sp-4); } } /* ── Focus-visible override on buttons (more visible than global rule) ── */ .btn:focus-visible { outline: 2px solid var(--color-sage-light); outline-offset: 4px; transform: none; /* prevent layout shift on keyboard focus */ } /* ── Active / pressed feedback ── */ .btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; transition-duration: 50ms; } /* ── Disabled state ── */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; } /* Re-enable pointer-events only for the booking submit (JS manages state) */ #booking-submit[aria-disabled="true"] { pointer-events: auto; } /* 9. CARDS ============================================================================= */ .card { background: var(--color-white); border: 1px solid rgba(224, 218, 208, 0.6); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; } .card__image { aspect-ratio: 4 / 3; overflow: hidden; position: relative; display: block; } .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .card:hover .card__image img { transform: scale(1.05); } .card__badge { position: absolute; top: var(--sp-4); left: var(--sp-4); padding: var(--sp-1) var(--sp-4); background: var(--color-olive); color: var(--color-off-white); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; } .card__body { padding: var(--sp-8); display: flex; flex-direction: column; gap: 0; } /* Header row: title left, price right */ .card__header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-4); } .card__eyebrow { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--sp-2); } .card__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; line-height: 1.15; } .card__title a { text-decoration: none; color: var(--color-charcoal); transition: color var(--t-fast); } .card__title a:hover { color: var(--color-olive); } /* Price block — aligned right */ .card__price-block { text-align: right; flex-shrink: 0; padding-top: var(--sp-1); } .card__price-amount { display: block; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; color: var(--color-olive); line-height: 1.2; } .card__price-unit { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em; } /* Meta: capacity + bedrooms */ .card__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-5); } .card__meta-item { display: inline-flex; align-items: center; gap: 5px; } .card__meta-item svg { color: var(--color-sage); flex-shrink: 0; } .card__meta-sep { color: var(--color-border); font-size: 0.6rem; } .card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--sp-6); } /* CTA: elegant text link with animated arrow */ .card__cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-olive); text-decoration: none; transition: gap var(--t-base), color var(--t-fast); } .card__cta svg { transition: transform var(--t-base); } .card__cta:hover { gap: var(--sp-3); color: var(--color-olive-dark); } .card__cta:hover svg { transform: translateX(4px); } .card__guests { font-size: var(--text-xs); color: var(--color-text-muted); } /* 10. BOTANICAL ACCENT The signature visual identity element. SVG botanical illustrations from /Logo are applied via this class. ============================================================================= */ /* Inline botanical mark (section headers, dividers) */ .botanical-accent { display: inline-flex; align-items: center; justify-content: center; color: var(--color-olive); opacity: 0.30; pointer-events: none; user-select: none; transition: opacity var(--t-base); } .botanical-accent svg { fill: currentColor; width: 100%; height: auto; } /* Size variants */ .botanical-accent--xs { width: 32px; } .botanical-accent--sm { width: 48px; } .botanical-accent--md { width: 72px; opacity: 0.25; } .botanical-accent--lg { width: 110px; opacity: 0.20; } .botanical-accent--xl { width: 160px; opacity: 0.14; } /* Absolute decorative placements */ .botanical-accent--corner-tl { position: absolute; top: -2rem; left: -3rem; width: clamp(100px, 16vw, 200px); opacity: 0.10; transform: rotate(-20deg); z-index: var(--z-under); } .botanical-accent--corner-br { position: absolute; bottom: -2rem; right: -3rem; width: clamp(100px, 16vw, 200px); opacity: 0.10; transform: rotate(160deg); z-index: var(--z-under); } /* Section divider with botanical SVG */ .botanical-divider { display: flex; align-items: center; gap: var(--sp-6); margin-block: var(--sp-12); } .botanical-divider::before, .botanical-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .botanical-divider__mark { width: clamp(40px, 5vw, 64px); flex-shrink: 0; color: var(--color-sage); opacity: 0.60; } .botanical-divider__mark svg { fill: none; stroke: currentColor; stroke-linecap: round; } /* Full-width decorative band */ .botanical-band { position: relative; overflow: hidden; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 80px; /* Adaptez selon la hauteur du motif */ background-image: url('../img/pattern-botanical.png'); background-repeat: repeat-x; background-size: auto 100%; background-position: center; } .botanical-band .botanical-accent { display: none; } /* 11. FORMS & BOOKING WIDGET ============================================================================= */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-muted); } .form-control { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); font-size: var(--text-base); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; border-radius: 0; /* Flat luxury aesthetic */ appearance: none; } .form-control:focus { border-color: var(--color-sage); box-shadow: 0 0 0 3px rgba(138, 154, 91, 0.14); } .form-control::placeholder { color: var(--color-text-muted); opacity: 0.7; } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9A5B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-5) center; padding-right: var(--sp-10); cursor: pointer; } .form-error { font-size: var(--text-xs); color: #B85C5C; margin-top: var(--sp-1); } /* Booking widget container */ .booking-widget { background: var(--color-off-white); border: var(--border); padding: var(--sp-8); } .booking-widget__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: var(--border); } .booking-widget__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); } .booking-widget__total { border-top: var(--border); padding-top: var(--sp-6); margin-top: var(--sp-6); display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); color: var(--color-text-muted); } .booking-widget__total strong { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-olive); font-weight: 400; } /* 12. FOOTER ============================================================================= */ .site-footer { background: var(--color-charcoal); color: rgba(250, 249, 246, 0.65); padding-block: var(--sp-20); } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 8vw, 6rem); padding-bottom: var(--sp-12); margin-bottom: var(--sp-12); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer__brand { display: flex; flex-direction: column; gap: var(--sp-5); } .footer__logo { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; color: var(--color-off-white); letter-spacing: 0.04em; } .footer__tagline { font-size: var(--text-sm); font-weight: 300; color: rgba(250, 249, 246, 0.45); line-height: 1.7; max-width: 34ch; } .footer__heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--sp-5); } .footer__links { display: flex; flex-direction: column; gap: var(--sp-3); } .footer__links a { font-size: var(--text-sm); color: rgba(250, 249, 246, 0.55); transition: color var(--t-fast); } .footer__links a:hover { color: var(--color-off-white); } .footer__contact-item { display: flex; gap: var(--sp-3); font-size: var(--text-sm); color: rgba(250, 249, 246, 0.55); line-height: 1.5; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); } .footer__copy { font-size: var(--text-xs); color: rgba(250, 249, 246, 0.28); letter-spacing: 0.04em; } .footer__legal { display: flex; gap: var(--sp-6); } .footer__legal a { font-size: var(--text-xs); color: rgba(250, 249, 246, 0.30); letter-spacing: 0.04em; transition: color var(--t-fast); } .footer__legal a:hover { color: rgba(250, 249, 246, 0.70); } /* Agency credit — inline with copyright */ .footer__credit { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); letter-spacing: 0.04em; color: rgba(250, 249, 246, 0.28); text-decoration: none; transition: color 0.2s; } .footer__credit-logo { height: 14px; width: auto; opacity: 0.5; transition: opacity 0.2s; } .footer__credit:hover { color: rgba(250, 249, 246, 0.55); } .footer__credit:hover .footer__credit-logo { opacity: 0.8; } /* Social icons row */ /* Instagram link — prominent */ .footer__instagram { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-5); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(250, 249, 246, 0.55); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all var(--t-base); } .footer__instagram:hover { border-color: var(--color-sage); color: var(--color-sage-light); } /* 13. UTILITY CLASSES ============================================================================= */ .text-center { text-align: center; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; letter-spacing: 0.12em; } .italic { font-style: italic; } .font-heading { font-family: var(--font-heading) !important; } .font-light { font-weight: 300; } .text-olive { color: var(--color-olive); } .text-sage { color: var(--color-sage); } .text-muted { color: var(--color-text-muted); } .text-white { color: var(--color-off-white); } .text-charcoal { color: var(--color-charcoal); } .bg-cream { background: var(--color-cream); } .bg-off-white { background: var(--color-off-white); } .bg-olive { background: var(--color-olive); color: var(--color-off-white); } .bg-charcoal { background: var(--color-charcoal); color: var(--color-off-white); } /* Spacing */ .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mb-12 { margin-bottom: var(--sp-12); } .py-8 { padding-block: var(--sp-8); } .py-16 { padding-block: var(--sp-16); } .px-6 { padding-inline: var(--sp-6); } .px-8 { padding-inline: var(--sp-8); } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Overflow */ .overflow-hidden { overflow: hidden; } .relative { position: relative; } /* 14. RESPONSIVE BREAKPOINTS Mobile-first: base = mobile, min-width queries add complexity. Breakpoints: sm=480, md=768, lg=1024, xl=1280 ============================================================================= */ /* Mobile — collapses */ @media (max-width: 767px) { /* Nav: full-screen overlay on mobile */ .nav-toggle { display: flex; } .nav-links { display: none; position: fixed; inset: 0; background: rgba(44, 44, 44, 0.98); flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); z-index: calc(var(--z-nav) - 1); padding: var(--sp-16); } .nav-links.is-open { display: flex; } .nav-links.is-open a { font-size: var(--text-2xl) !important; font-family: var(--font-heading); color: var(--color-off-white) !important; letter-spacing: 0.04em; font-weight: 400; text-transform: none !important; } .nav-links.is-open a::after { display: none; } /* Mobile RÉSERVER CTA — shows above all other links in the overlay */ .nav-mobile-cta { display: list-item; } .nav-links.is-open .nav-mobile-cta__link { /* Override the generic overlay-link styles (all use !important) */ display: inline-block !important; font-size: var(--text-xs) !important; font-family: var(--font-body) !important; font-weight: 600 !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; color: var(--color-off-white) !important; border: 1px solid rgba(250, 249, 246, 0.38) !important; padding: var(--sp-3) var(--sp-10) !important; transition: background var(--t-base), border-color var(--t-base) !important; } .nav-links.is-open .nav-mobile-cta__link:hover { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(250, 249, 246, 0.65) !important; } .nav-cta { display: none !important; } /* Grids collapse to single column */ .grid-2, .grid-3, .grid-4, .grid-editorial, .grid-editorial--rev { grid-template-columns: 1fr; } /* Footer stacks */ .footer__top { grid-template-columns: 1fr; gap: var(--sp-10); } .footer__bottom { flex-direction: column; text-align: center; } /* Booking widget */ .booking-widget__grid { grid-template-columns: 1fr; } /* Hero */ .hero__actions { flex-direction: column; align-items: flex-start; } .hero__scroll { display: none; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } /* Large desktop */ @media (min-width: 1280px) { .grid-editorial { gap: 8rem; } } /* 15. BOOKING WIDGET, CHECKOUT & CONFIRMATION PAGES ============================================================================= */ /* ── Form inputs (alias for .form-control used in booking/checkout forms) ──── */ .form-input { width: 100%; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); font-size: var(--text-base); font-family: var(--font-body); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; border-radius: 0; appearance: none; -webkit-appearance: none; } .form-input:focus { border-color: var(--color-sage); box-shadow: 0 0 0 3px rgba(138, 154, 91, 0.14); } .form-input::placeholder { color: var(--color-text-muted); opacity: 0.7; } .form-input--error { border-color: #B85C5C !important; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9A5B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-5) center; padding-right: var(--sp-10); cursor: pointer; } .form-textarea { resize: vertical; min-height: 96px; } .form-label__required { color: #B85C5C; margin-left: 2px; } .form-label__icon { color: var(--color-sage); margin-right: var(--sp-2); } /* Banner shown on redirect-back errors (invalid email, missing fields) */ .form-error-banner { padding: var(--sp-4) var(--sp-5); background: rgba(184, 92, 92, 0.08); border: 1px solid rgba(184, 92, 92, 0.30); color: #A04040; font-size: var(--text-sm); margin-bottom: var(--sp-6); } /* ── Booking widget (views/partials/booking-form.php) ─────────────────────── */ .booking-widget { padding: clamp(var(--sp-8), 5vw, var(--sp-16)); background: var(--color-off-white); border-top: 3px solid var(--color-olive); } .booking-widget__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: var(--border); } .booking-widget__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; margin: 0; } .booking-widget__price { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .booking-widget__price-amount { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; color: var(--color-olive); } .booking-widget__price-unit { font-size: var(--text-xs); letter-spacing: 0.06em; } .booking-widget__fields { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); align-items: end; } /* Price preview row (shown by JS) */ .booking-widget__preview { padding: var(--sp-5) var(--sp-6); background: rgba(85, 107, 47, 0.06); border: 1px solid rgba(85, 107, 47, 0.18); margin-bottom: var(--sp-6); } .price-preview__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); } .price-preview__label { font-size: var(--text-sm); color: var(--color-text-muted); } .price-preview__total { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; color: var(--color-olive); } .price-preview__note { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--sp-2) 0 0; letter-spacing: 0.04em; } /* Status messages (error / info shown by booking.js) */ .booking-widget__status { padding: var(--sp-4) var(--sp-5); font-size: var(--text-sm); margin-bottom: var(--sp-5); border-radius: 0; } .booking-widget__status--error { background: rgba(184, 92, 92, 0.08); border: 1px solid rgba(184, 92, 92, 0.30); color: #A04040; } .booking-widget__status--info { background: rgba(85, 107, 47, 0.06); border: 1px solid rgba(85, 107, 47, 0.20); color: var(--color-olive-dark); } .booking-widget__status--success { background: rgba(85, 107, 47, 0.08); border: 1px solid rgba(85, 107, 47, 0.25); color: var(--color-olive); } /* Submit button full-width + loading state */ .booking-widget__submit { width: 100%; justify-content: center; position: relative; } .btn-spinner { display: none; animation: spin 0.7s linear infinite; flex-shrink: 0; } .is-loading .btn-spinner { display: flex; } .is-loading .btn-label { opacity: 0.7; } .booking-widget__disclaimer { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em; margin-top: var(--sp-4); margin-bottom: 0; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Checkout page layout ─────────────────────────────────────────────────── */ .checkout-layout { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(var(--sp-8), 6vw, var(--sp-20)); padding-top: clamp(var(--sp-12), 8vw, var(--sp-20)); padding-bottom: clamp(var(--sp-16), 10vw, var(--sp-24)); align-items: start; } /* Booking summary sidebar */ .checkout-summary { position: sticky; top: calc(var(--header-h) + var(--sp-6)); background: var(--color-cream); padding: var(--sp-8); border: var(--border); } .checkout-summary__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--sp-2); } .checkout-summary__unit { font-size: var(--text-sm); color: var(--color-sage); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: var(--border); } .checkout-summary__details { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); } .checkout-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); } .checkout-summary__row dt { color: var(--color-text-muted); font-weight: 400; } .checkout-summary__row dd { font-weight: 500; text-align: right; } .checkout-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-5); border-top: var(--border); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-6); } .checkout-summary__total strong { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; color: var(--color-olive); } .checkout-summary__timer { font-size: var(--text-xs); color: var(--color-sage); letter-spacing: 0.06em; margin-bottom: var(--sp-4); text-align: center; } .checkout-summary__note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.75; margin: 0; padding-top: var(--sp-4); border-top: var(--border); } /* Guest information form */ .checkout-form__title { font-family: var(--font-heading); font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 400; margin-bottom: var(--sp-8); } .checkout-form__form { display: flex; flex-direction: column; gap: var(--sp-6); } .checkout-form__submit { width: 100%; justify-content: center; padding: var(--sp-5) var(--sp-8); margin-top: var(--sp-4); } .checkout-form__legal { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.75; margin: 0; } /* Deposit / balance breakdown rows in the booking summary sidebar */ .checkout-summary__deposit { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-4) 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); } .checkout-summary__deposit strong { font-weight: 600; color: var(--color-olive); } .checkout-summary__balance { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-2) 0 var(--sp-4); font-size: var(--text-xs); color: var(--color-text-muted); } /* Payment option radio cards (checkout form) */ .payment-options { border: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } .payment-options > legend { float: left; width: 100%; margin-bottom: var(--sp-3); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); } .payment-option { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1.5px solid var(--color-border); border-radius: 6px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .payment-option:has(.payment-option__radio:checked) { border-color: var(--color-olive); background: #F5F7F0; } .payment-option__radio { margin-top: 3px; flex-shrink: 0; accent-color: var(--color-olive); } .payment-option__body { display: flex; flex-direction: column; gap: 2px; } .payment-option__title { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); } .payment-option__amount { font-style: normal; color: var(--color-olive); font-weight: 600; } .payment-option__desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; } /* Expired session state */ .checkout-expired { padding-top: clamp(var(--sp-16), 12vw, var(--sp-24)); padding-bottom: clamp(var(--sp-16), 12vw, var(--sp-24)); text-align: center; } .checkout-expired__inner { max-width: 480px; margin-inline: auto; } .checkout-expired__icon { width: 80px; margin-inline: auto; margin-bottom: var(--sp-8); color: var(--color-sage); opacity: 0.5; } .checkout-expired__icon svg { fill: currentColor; width: 100%; height: auto; } .checkout-expired__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 400; margin-bottom: var(--sp-4); } .checkout-expired__body { color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--sp-8); } /* ── Confirmation page ────────────────────────────────────────────────────── */ .confirm-page { padding-top: clamp(var(--sp-12), 8vw, var(--sp-20)); padding-bottom: clamp(var(--sp-16), 10vw, var(--sp-24)); } .confirm-page__inner { max-width: 680px; margin-inline: auto; } .confirm-page__icon { width: 72px; margin-inline: auto; margin-bottom: var(--sp-8); color: var(--color-olive); opacity: 0.4; } .confirm-page__icon svg { fill: currentColor; width: 100%; height: auto; } .confirm-page__header { margin-bottom: var(--sp-12); } .confirm-page__eyebrow { display: block; font-size: var(--text-xs); letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--sp-3); } .confirm-page__title { font-family: var(--font-heading); font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 400; margin-bottom: var(--sp-4); } .confirm-page__subtitle { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.8; margin: 0; } .confirm-summary { background: var(--color-cream); border: var(--border); padding: var(--sp-8); margin-bottom: var(--sp-12); } .confirm-summary__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: var(--border); } .confirm-summary__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-8); } .confirm-summary__item { display: flex; flex-direction: column; gap: var(--sp-1); } .confirm-summary__item--total { grid-column: 1 / -1; border-top: var(--border); padding-top: var(--sp-5); margin-top: var(--sp-2); flex-direction: row; justify-content: space-between; align-items: baseline; } .confirm-summary__label { font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; } .confirm-summary__value { font-size: var(--text-sm); font-weight: 500; } .confirm-summary__value--price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 400; color: var(--color-olive); } .confirm-summary__value--ref { font-family: monospace; font-size: var(--text-base); color: var(--color-sage); letter-spacing: 0.12em; } .confirm-page__next { margin-bottom: var(--sp-10); } .confirm-page__next-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; margin-bottom: var(--sp-5); } .confirm-page__steps { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-8); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.75; } .confirm-page__steps li::marker { color: var(--color-sage); } .confirm-page__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-8); } .confirm-page__contact { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .confirm-page__contact a { color: var(--color-olive); text-decoration: underline; text-underline-offset: 3px; } /* ── Booking error page ───────────────────────────────────────────────────── */ .error-page { padding-top: clamp(var(--sp-16), 12vw, var(--sp-24)); padding-bottom: clamp(var(--sp-16), 12vw, var(--sp-24)); text-align: center; } .error-page__inner { max-width: 520px; margin-inline: auto; } .error-page__icon { width: 80px; margin-inline: auto; margin-bottom: var(--sp-8); color: var(--color-sage); opacity: 0.40; } .error-page__icon svg { fill: currentColor; width: 100%; height: auto; } .error-page__title { font-family: var(--font-heading); font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 400; margin-bottom: var(--sp-4); } .error-page__body { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.8; margin-bottom: var(--sp-8); } .error-page__actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-6); } .error-page__contact { font-size: var(--text-sm); color: var(--color-text-muted); } .error-page__contact a { color: var(--color-olive); text-underline-offset: 3px; } /* ── Responsive overrides (booking/checkout) ──────────────────────────────── */ @media (max-width: 767px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } .confirm-summary__grid { grid-template-columns: 1fr; } .confirm-summary__item--total { flex-direction: column; gap: var(--sp-2); } .confirm-page__actions, .error-page__actions { flex-direction: column; } .confirm-page__actions .btn, .error-page__actions .btn { width: 100%; justify-content: center; } } @media (min-width: 768px) and (max-width: 1023px) { .checkout-layout { grid-template-columns: 1fr 1.6fr; } } /* ============================================================================= 16. UX POLISH — Mobile safety, overflow guards, nav tap targets ============================================================================= */ /* Prevent any element from causing horizontal scroll on mobile */ body { overflow-x: hidden; } * { max-width: 100vw; box-sizing: border-box; } /* Reset max-width for pseudo-elements (avoid clip on decorative SVGs) */ *::before, *::after { max-width: none; } /* Grid children must not be capped at 100vw — it overrides fr-unit distribution */ .grid-editorial > *, .grid-editorial--home > *, .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { max-width: none; } /* ── Mobile nav links — comfortable 48px tap targets ── */ @media (max-width: 767px) { /* Each nav link in the overlay: enforce minimum touch area */ .nav-links.is-open li { min-height: 48px; display: flex; align-items: center; } /* Hero CTAs: full-width on very small screens */ .hero__actions .btn, .unit-hero__actions .btn { min-height: 52px; } /* Footer links: increase line height for easier tapping */ .footer__links li { padding-block: 6px; } .footer__links a { min-height: 44px; display: inline-flex; align-items: center; } } /* ── Smooth image reveal hover — global ── */ a img, button img { transition: transform 0.55s cubic-bezier(0, 0, 0.2, 1); } a:hover img { transform: scale(1.03); } /* ── Form input focus refinement (booking + contact) ── */ .form-control:focus, .form-input:focus, .contact-input:focus, .contact-textarea:focus, .contact-select:focus { /* Consistent olive ring across all form elements */ outline: none; border-color: var(--color-olive); box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.12); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* ── Error state unification ── */ .form-control.is-error, .form-input.is-error { border-color: #B04040; box-shadow: 0 0 0 3px rgba(176, 64, 64, 0.08); } /* ── Select element: native arrow hidden, custom SVG via background ── */ select.form-control, select.contact-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9A5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; padding-right: var(--sp-10); } /* ── Link underline animation (nav + footer) ── */ .footer__links a, .contact-info__value a { text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } /* ── Smooth page scroll anchors ── */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ============================================================================= 17. DESIGN — Intro XL heading · Home 2-col layout · Trust engagements Organic botanical animations ============================================================================= */ /* ── Extra-large editorial heading (home intro) ─────────────────────────────── */ .editorial__heading-xl { font-family: var(--font-heading); font-size: clamp(2.75rem, 5.5vw, 5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--sp-6); color: var(--color-text); } .editorial__heading-xl em { font-style: italic; color: var(--color-olive); } /* ── Home intro: 2-column desktop layout (text 5fr / image 7fr) ─────────────── */ @media (min-width: 1024px) { .grid-editorial--home { grid-template-columns: 5fr 7fr; align-items: stretch; } .grid-editorial--home .editorial__text { /* display:flex + flex-direction:column + align-items:flex-start are now inherited from the global .editorial__text rule */ justify-content: center; /* vertically centre text in stretched column */ padding-right: var(--sp-6); /* breathing room before the image */ } .grid-editorial--home .editorial__media { align-self: stretch; } .grid-editorial--home .editorial__media img { height: 100%; aspect-ratio: auto; min-height: 560px; max-height: 720px; object-fit: cover; } } /* ── Trust engagements block ─────────────────────────────────────────────────── */ .trust-engagements { border-top: var(--border); padding-top: var(--sp-12); margin-top: var(--sp-12); } .trust-engagements__heading { font-family: var(--font-heading); font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); font-weight: 400; text-align: center; letter-spacing: 0.01em; color: var(--color-text); margin-bottom: var(--sp-10); } .trust-engagements__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } @media (max-width: 1023px) { .trust-engagements__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .trust-engagements__grid { grid-template-columns: 1fr; } } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); border: 1px solid transparent; transition: transform 0.30s ease, border-color 0.30s ease; } .trust-item:hover { transform: translateY(-4px); border-color: var(--color-border); } .trust-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-cream); color: var(--color-sage); flex-shrink: 0; transition: background 0.30s ease, color 0.30s ease; } .trust-item:hover .trust-item__icon { background: var(--color-olive); color: var(--color-off-white); } .trust-item__label { font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-muted); line-height: 1.55; } /* ── Organic botanical float (band items) ────────────────────────────────────── */ /* * CSS custom property --leaf-rot is set per nth-child below. * The animation keyframe reads it so each leaf drifts from its own base angle, * producing a truly organic feel without duplicating keyframe blocks. */ @keyframes botanicalFloatOrganic { 0% { transform: translateY(0px) rotate(var(--leaf-rot)); } 33% { transform: translateY(-7px) rotate(calc(var(--leaf-rot) + 3deg)); } 66% { transform: translateY(-3px) rotate(calc(var(--leaf-rot) - 2deg)); } 100% { transform: translateY(0px) rotate(var(--leaf-rot)); } } /* Per-leaf: rotation angle, size, opacity, speed */ .botanical-band .botanical-accent:nth-child(1) { --leaf-rot: -14deg; width: clamp(30px, 4.5vw, 52px); opacity: 0.22; animation: botanicalFloatOrganic 8s ease-in-out infinite; } .botanical-band .botanical-accent:nth-child(2) { --leaf-rot: 9deg; width: clamp(22px, 3.2vw, 38px); opacity: 0.15; animation: botanicalFloatOrganic 11s ease-in-out infinite -1.8s; } .botanical-band .botanical-accent:nth-child(3) { --leaf-rot: -20deg; width: clamp(34px, 5.0vw, 58px); opacity: 0.26; animation: botanicalFloatOrganic 9.5s ease-in-out infinite -4.2s; } .botanical-band .botanical-accent:nth-child(4) { --leaf-rot: 13deg; width: clamp(26px, 3.8vw, 44px); opacity: 0.18; animation: botanicalFloatOrganic 12s ease-in-out infinite -2.6s; } .botanical-band .botanical-accent:nth-child(5) { --leaf-rot: -7deg; width: clamp(20px, 2.8vw, 34px); opacity: 0.14; animation: botanicalFloatOrganic 10.5s ease-in-out infinite -6s; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .botanical-band .botanical-accent { animation: none !important; } } /* ── Symmetric botanical divider — mark perfectly centred ───────────────────── */ .botanical-divider::before { flex: 1; } .botanical-divider::after { flex: 1; } /* Tilt the central mark slightly for an organic, imperfect feel */ .botanical-divider__mark { transform: rotate(-8deg) translateY(-4px); opacity: 0.42; } /* ── Editorial media — rounded corners on all editorial right-side images ──── */ .editorial__media > img { border-radius: var(--radius-lg); } /* ============================================================================= 18. RESTAURANT — Details strip · CTA width guards ============================================================================= */ /* ── Details strip: 4 info blocks in a horizontal row ───────────────────────── */ .rsv-details-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--sp-12); border-top: var(--border); border-bottom: var(--border); } .rsv-detail-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-4); border-right: var(--border); transition: background 0.25s ease; } .rsv-detail-block:last-child { border-right: none; } .rsv-detail-block:hover { background: var(--color-cream); } .rsv-detail-block__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-cream); color: var(--color-sage); flex-shrink: 0; transition: background 0.25s ease, color 0.25s ease; } .rsv-detail-block:hover .rsv-detail-block__icon { background: var(--color-olive); color: var(--color-off-white); } .rsv-detail-block__label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-charcoal); } .rsv-detail-block__value { display: block; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-muted); } @media (max-width: 1023px) { .rsv-details-strip { grid-template-columns: repeat(2, 1fr); } .rsv-detail-block:nth-child(2) { border-right: none; } .rsv-detail-block:nth-child(3) { border-top: var(--border); } .rsv-detail-block:nth-child(4) { border-top: var(--border); border-right: none; } } @media (max-width: 767px) { .rsv-details-strip { grid-template-columns: 1fr 1fr; } } /* ── Global: CTAs never stretch full-width on desktop ───────────────────────── * Buttons inside flex-column editorial text blocks were inheriting the full * parent width. This guard ensures btn always wraps its own content. */ .editorial__text .btn, .rsv-esprit .btn { width: fit-content; align-self: flex-start; }