/* ============================================================ THE KAHZA EXPERIENCE — Design System ============================================================ */ /* Google Fonts imported in each HTML */ :root { --navy: #0D1B2A; --navy-light: #162436; --cream: #F8F4EF; --cream-dark: #EDE8E1; --gold: #C9A84C; --gold-light: #D4AF6A; --gold-dark: #A8872E; --white: #FFFFFF; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-400: #9CA3AF; --gray-600: #6B7280; --gray-900: #1A1A1A; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; --font-label: 'Montserrat', sans-serif; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 10px 40px rgba(0,0,0,.15); --radius: 8px; --radius-lg: 16px; --transition: 0.3s ease; --max-w: 1200px; --nav-h: 72px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--gold-light) var(--cream); } body { font-family: var(--font-sans); color: var(--gray-900); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; } /* Custom scrollbar (WebKit) — matches the carousel's palette for visual consistency. */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 8px; border: 2px solid var(--cream); } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.2; font-weight: 700; } h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); } h4 { font-size: 1.1rem; } p { line-height: 1.75; color: var(--gray-600); } .label { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } /* ── Layout ── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .section { padding: 96px 0; position: relative; } .section-sm { padding: 64px 0; position: relative; } .section--dark { background: var(--navy); color: var(--white); } .section--dark p { color: rgba(255,255,255,0.7); } .section--cream { background: var(--cream); } /* Decorative divider between two consecutive sections, in place of plain whitespace — a thin gold rule with a small centered diamond mark. */ .section + .section::before, .section + .section-sm::before, .section-sm + .section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); } .section + .section::after, .section + .section-sm::after, .section-sm + .section::after { content: ''; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; background: var(--gold); transform: translateX(-50%) rotate(45deg); } .section-header { text-align: center; max-width: 680px; margin: 0 auto 64px; } .section-header .label { margin-bottom: 12px; } .section-header h2 { margin-bottom: 16px; } .section-header p { font-size: 1.05rem; } .section-header__note { font-size: 0.82rem; color: var(--gray-400); font-style: italic; margin-top: -4px; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: all var(--transition); max-width: 100%; } .btn-primary { background: var(--gold); color: var(--navy); } .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,.4); } .btn-outline { border: 1.5px solid rgba(255,255,255,0.6); color: var(--white); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); } .btn-outline-dark { border: 1.5px solid var(--navy); color: var(--navy); } .btn-outline-dark:hover { border-color: var(--gold); color: var(--gold); } .btn-lg { padding: 17px 36px; font-size: 0.8rem; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; transition: background var(--transition), box-shadow var(--transition); } .nav.scrolled { background: var(--navy); box-shadow: 0 2px 20px rgba(0,0,0,.3); } .nav.nav--light { background: var(--white); border-bottom: 1px solid var(--gray-200); } .nav.nav--light.scrolled { background: var(--white); box-shadow: var(--shadow-md); } /* Frosted-glass effect where supported; falls back to the solid backgrounds above. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .nav.scrolled { background: rgba(13, 27, 42, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .nav.nav--light.scrolled { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .nav__logo { display: flex; align-items: center; gap: 10px; } /* Background + padding here so the icon keeps contrast on ANY surface behind it — the nav is transparent-over-photo or solid navy, and the footer is near-black, so the mark's own dark strokes were disappearing without a light plate of its own. Harmless on the light nav variant, where the plate just blends into the already-light background. */ .nav__logo-mark { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: block; } /* Full readable logo lockup — only used on light/cream sections, since its own canvas is white and would show as a hard rectangle on any dark or photo background. Flex + justify-content, not text-align, so centering doesn't depend on the img's inline layout behavior. */ .brand-logo-showcase { display: flex; justify-content: center; margin-bottom: 48px; } /* max-width is wider than you'd guess on purpose: this logo is a wide horizontal lockup (not the old square mark), so matching the same ~220px rendered HEIGHT as before means a taller max-width here. */ .brand-logo-showcase img { max-width: 400px; width: 100%; height: auto; } .nav__logo-text { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1.1; } .nav--light .nav__logo-text { color: var(--navy); } .nav__logo-sub { font-family: var(--font-label); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .nav__links { display: flex; align-items: center; gap: 36px; } .nav__links a { font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); transition: color var(--transition); position: relative; } .nav--light .nav__links a { color: var(--gray-600); } .nav__links a:hover, .nav__links a.active { color: var(--gold); } .nav__links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px; background: var(--gold); border-radius: 2px; } .nav__cta { margin-left: 12px; } /* Mobile nav */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; } .nav__hamburger span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition); } .nav--light .nav__hamburger span { background: var(--navy); } .nav__mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--navy); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 36px; } .nav__mobile.open { display: flex; } .nav__mobile a { font-family: var(--font-label); font-size: 1rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.85); transition: color var(--transition); } .nav__mobile a:hover { color: var(--gold); } /* ── Hero ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-h); } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Crossfading photo layers injected by main.js on top of the hero's base image (which stays in place underneath as the first paint / no-JS fallback). The gold vignette below still paints over these since it's a pseudo-element, always last in stacking order among a parent's content. */ .hero__bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.8s ease; } .hero__bg-layer.is-visible { opacity: 1; } .hero__bg-layer--instant { transition: none !important; } .hero__bg::after { content: ''; position: absolute; inset: 0; /* Soft gold glow anchored bottom-left carries the brand's gold accent through regardless of the underlying photo, layered under the navy readability tint. */ background: radial-gradient(120% 60% at 12% 105%, rgba(201,168,76,0.28) 0%, rgba(201,168,76,0) 62%), linear-gradient(135deg, rgba(13,27,42,0.85) 0%, rgba(13,27,42,0.5) 100%); } .hero__content { position: relative; z-index: 1; max-width: 760px; } .hero__label { margin-bottom: 20px; } .hero h1 { color: var(--white); margin-bottom: 20px; } .hero__sub { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,0.85); max-width: 580px; margin-bottom: 40px; line-height: 1.7; } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Bouncing cue at the bottom of every hero, hinting there's more below — otherwise fade-in-on-scroll content stays invisible until scrolled to, which on first load can look like the page just ends after the hero. */ .hero__scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; animation: hero-scroll-bounce 2s ease-in-out infinite; transition: background 0.2s ease, border-color 0.2s ease; } .hero__scroll-cue:hover { background: rgba(255,255,255,.22); border-color: var(--gold); } .hero__scroll-cue svg { width: 18px; height: 18px; stroke: var(--white); } @keyframes hero-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } @media (prefers-reduced-motion: reduce) { .hero__scroll-cue { animation: none; } } /* Inner page hero (shorter) */ .hero--inner { min-height: 52vh; align-items: flex-end; padding-bottom: 72px; } .hero--inner h1 { font-size: clamp(2rem, 4vw, 3.2rem); } /* ── Trust Bar ── */ .trust-bar { background: var(--navy); padding: 36px 0; } .trust-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .trust-bar__item {} .trust-bar__number { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 6px; } .trust-bar__label { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.6); } /* ── Cards ── */ .card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1); height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 20px 48px rgba(13,27,42,.16); } .card__img-wrap { position: relative; flex-shrink: 0; } .card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; flex-shrink: 0; display: block; } .card--has-gallery { cursor: pointer; } .card--has-gallery .booking-options { cursor: default; } .card__gallery-badge { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border: none; border-radius: 999px; background: rgba(13,27,42,.72); color: var(--white); font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s ease; } .card__gallery-badge:hover { background: rgba(13,27,42,.88); } .card__gallery-badge svg { width: 14px; height: 14px; stroke: var(--white); flex-shrink: 0; } .card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .card__body p { flex: 1; } .card__body .property-specs, .card__body .booking-options { margin-top: auto; } .card__body .property-specs + .booking-options { margin-top: 16px; } .card__tag { font-family: var(--font-label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .card__body h3 { margin-bottom: 10px; color: var(--navy); } .card__body p { font-size: 0.9rem; } .property-specs { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 16px; padding-top: 14px; border-top: 1px solid var(--gray-200); } .property-specs span { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--gray-600); } .property-specs svg { width: 15px; height: 15px; stroke: var(--gold); flex-shrink: 0; } .booking-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .booking-options__row { display: flex; gap: 8px; } .booking-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 11px 8px; border-radius: var(--radius); border: 1.5px solid var(--gray-200); font-family: var(--font-label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy); white-space: nowrap; transition: all var(--transition); } .booking-btn:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,27,42,.12); } .booking-btn--primary { background: var(--navy); color: var(--white); border-color: var(--navy); } .booking-btn--primary:hover { background: var(--navy-light); border-color: var(--navy-light); color: var(--white); box-shadow: 0 6px 16px rgba(13,27,42,.25); } .booking-btn__logo { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 8px; font-weight: 700; letter-spacing: 0; color: #fff; text-transform: none; } .booking-btn__logo--airbnb { background: #FF5A5F; } .booking-btn__logo--vrbo { background: #003B5C; } .nav__book-stay { color: var(--gold) !important; } /* ── Property Carousel ── Add more homes later by copying one .carousel__item block in the markup — the track and arrows work with any number of items automatically. */ /* Side padding reserves dedicated gutter space for the arrow buttons below, so they sit beside the cards instead of overlapping them, regardless of how wide an individual card is (property cards vs. wider testimonial cards). Absolutely-positioned children ignore a parent's padding, so the arrows (left:0/right:0) land in that gutter while the track's own content, as a normal-flow child, gets pushed inward by it. */ .carousel { position: relative; padding: 0 56px; } .carousel__track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; /* No CSS scroll-behavior here on purpose: per spec, behavior:'auto' passed to scrollTo()/scrollBy() in JS defers to this property rather than meaning "instant" — so a CSS smooth default was silently animating the loop's snap-back correction (meant to be an invisible instant jump) across the whole clone buffer, which read as a big visible rewind. Smooth scrolling is opted into explicitly per call in main.js instead. */ padding: 4px 4px 4px; -webkit-overflow-scrolling: touch; /* Scrollbar hidden on purpose: the track is 3x the visible content width (real items plus clones on both ends for the infinite loop), so a native scrollbar's position/size would never correctly reflect "start" or "end" of the real set. Arrow buttons + swipe are the intended navigation. */ scrollbar-width: none; -ms-overflow-style: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .carousel__item { flex: 0 0 320px; scroll-snap-align: start; } /* Ghost by default: no circle, no background, no shadow — just the icon, invisible until the carousel is hovered or a card inside it receives keyboard focus. The soft glass circle (idea 3) only appears as a hover affordance on the arrow itself, once someone's about to click it. */ .carousel__arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; opacity: 0; transition: opacity 0.3s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .carousel:hover .carousel__arrow, .carousel__arrow:focus-visible { opacity: 1; } .carousel__arrow:hover { background: rgba(255,255,255,.65); box-shadow: 0 4px 18px rgba(13,27,42,.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(-50%) scale(1.06); } .carousel__arrow svg { width: 18px; height: 18px; stroke: var(--navy); stroke-width: 1.6; transition: stroke 0.2s ease; } .carousel__arrow:hover svg { stroke: var(--gold); } .carousel__arrow--prev { left: 4px; } .carousel__arrow--next { right: 4px; } /* A gradient overlay here (an earlier version of this "more to see" hint) sat right on top of the first/last card's edge to imply the track continues — but on cards this narrow it read as the photo itself fading out, not as a scroll cue. The arrows plus the explicit hint text below now carry that job on their own, with nothing drawn over real content. */ .carousel__more-hint { text-align: center; margin-top: 18px; font-size: 0.8rem; color: var(--gray-400); } @media (max-width: 860px) { .carousel { padding: 0; } .carousel__arrow { display: none; } .carousel__item { flex-basis: 280px; } .carousel__item--testimonial { flex-basis: 300px; } } /* Testimonial cards are text-only (no image), so they run wider and don't need the fixed height property cards get from their image block. */ .carousel__item--testimonial { flex: 0 0 400px; } /* ── Before & After Reveal Slider ── Wide slides in the same carousel shell (arrows/swipe) used everywhere else. Each slide is its own drag-to-compare widget: the after photo sits on top of the before photo, clipped with clip-path so only the left var(--pos)% shows — dragging just changes that one custom property, no layout/reflow, so it stays smooth on touch. touch-action:none on the slider claims horizontal AND vertical touch gestures on the photo itself (standard for this widget — twentytwenty/BeerSlider do the same), so a finger-drag on the image always compares instead of scrolling the page or the carousel track; swipe/arrows still work everywhere else on the slide. */ .carousel__item--reveal { flex: 0 0 480px; } .reveal-slider { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); cursor: ew-resize; -webkit-user-select: none; user-select: none; touch-action: none; --pos: 50%; } .reveal-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .reveal-slider__img--after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .reveal-slider__badge { position: absolute; top: 14px; z-index: 1; font-family: var(--font-label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: rgba(13, 27, 42, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 5px 12px; border-radius: 20px; pointer-events: none; } /* Anchored to the drag handle's own position (var(--pos)), not a fixed corner — a corner badge can end up sitting on top of the WRONG photo once someone drags past halfway, since which side is "before" vs "after" swaps with it. Tying both labels to the handle means each one always sits just inside the region it's actually labeling, no matter where the line is. */ .reveal-slider__badge--after { left: var(--pos); transform: translateX(calc(-100% - 14px)); } .reveal-slider__badge--before { left: var(--pos); transform: translateX(14px); } .reveal-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--white); box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.15); transform: translateX(-50%); pointer-events: none; } .reveal-slider__handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; } .reveal-slider__handle-grip svg { width: 18px; height: 18px; stroke: var(--navy); } .reveal-slider__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1; font-size: 0.72rem; color: var(--white); background: rgba(13, 27, 42, 0.55); padding: 5px 14px; border-radius: 20px; pointer-events: none; transition: opacity 0.3s ease; white-space: nowrap; } .reveal-slider--interacted .reveal-slider__hint { opacity: 0; } .reveal-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .reveal-slider__caption { padding: 16px 2px 0; } @media (max-width: 860px) { .carousel__item--reveal { flex-basis: 300px; } } /* Service icon card */ .service-card { padding: 36px 32px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--gray-200); transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1), border-color var(--transition); } .service-card:hover { border-color: var(--gold-light); box-shadow: 0 16px 44px rgba(201,168,76,.18); transform: translateY(-5px) scale(1.02); } .service-card__icon { width: 52px; height: 52px; background: rgba(201,168,76,.1); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .service-card__icon svg { width: 26px; height: 26px; stroke: var(--gold); } .service-card h3 { color: var(--navy); margin-bottom: 10px; } .service-card p { font-size: 0.92rem; } /* ── Grid layouts ── */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ── Split (image + text) ── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .split--reverse { direction: rtl; } .split--reverse > * { direction: ltr; } .split__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; } .split__img img { width: 100%; height: 100%; object-fit: cover; } /* Slow independent crossfade for a split section's image half — reuses the hero's own layer classes/technique (see .hero__bg-layer) since a bounded, position:relative box works identically to the full-bleed hero, just at a gentler pace so it doesn't fight for attention with the copy beside it. */ .split__img--rotate { position: relative; background: var(--navy-light); } .split__content .label { margin-bottom: 14px; } .split__content h2 { margin-bottom: 20px; } .split__content p { margin-bottom: 16px; } /* USP list */ .usp-list { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; } .usp-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--gray-600); } .usp-list li::before { content: ''; display: block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; margin-top: 3px; } /* ── Testimonials ── */ .testimonial { background: var(--cream); border-radius: var(--radius-lg); padding: 36px; border-left: 3px solid var(--gold); height: 100%; } .testimonial__quote-mark { font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; color: var(--gold-light); margin-bottom: -6px; } .testimonial__quote { font-family: var(--font-serif); font-size: 1.1rem; font-style: italic; color: var(--navy); line-height: 1.7; margin-bottom: 20px; } .testimonial__author { display: flex; align-items: center; gap: 12px; } .testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 1.1rem; } .testimonial__name { font-weight: 600; font-size: 0.9rem; color: var(--navy); } .testimonial__role { font-size: 0.8rem; color: var(--gray-400); font-family: var(--font-label); letter-spacing: 0.05em; } /* ── Portfolio "coming soon" placeholder ── */ .portfolio-coming-soon { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 44px 32px; border: 1.5px dashed var(--gray-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.5); } .portfolio-coming-soon__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(201,168,76,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .portfolio-coming-soon__icon svg { width: 26px; height: 26px; stroke: var(--gold); } .portfolio-coming-soon h3 { color: var(--navy); font-size: 1.1rem; } .portfolio-coming-soon p { font-size: 0.88rem; color: var(--gray-400); max-width: 420px; } /* ── Video Embed (YouTube walkthrough) ── */ .video-embed { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ── CTA Banner ── */ .cta-banner { background: var(--navy); padding: 96px 0; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: 'K'; position: absolute; font-family: var(--font-serif); font-size: 40vw; font-weight: 700; color: rgba(255,255,255,0.02); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; line-height: 1; } .cta-banner .label { margin-bottom: 16px; } .cta-banner h2 { color: var(--white); margin-bottom: 16px; } .cta-banner p { color: rgba(255,255,255,0.65); max-width: 480px; margin: 0 auto 40px; } .cta-banner__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ── Footer ── */ .footer { background: #080F17; padding: 80px 0 0; color: rgba(255,255,255,0.7); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__brand p { font-size: 0.9rem; margin: 16px 0 24px; max-width: 260px; } .footer__socials { display: flex; gap: 12px; } .footer__social-link { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .footer__social-link:hover { border-color: var(--gold); background: rgba(201,168,76,.1); } .footer__social-link svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.7); } .footer__social-link:hover svg { stroke: var(--gold); } .footer__col h4 { font-family: var(--font-label); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer__col ul { display: flex; flex-direction: column; gap: 10px; } .footer__col ul li a { font-size: 0.88rem; color: rgba(255,255,255,0.6); transition: color var(--transition); } .footer__col ul li a:hover { color: var(--gold); } .footer__contact p { font-size: 0.88rem; margin-bottom: 10px; } .footer__contact a { color: rgba(255,255,255,0.6); transition: color var(--transition); } .footer__contact a:hover { color: var(--gold); } .footer__bottom { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: rgba(255,255,255,0.3); flex-wrap: wrap; gap: 12px; } .footer__bottom-links { display: flex; gap: 24px; } .footer__bottom-links a { color: rgba(255,255,255,0.3); transition: color var(--transition); } .footer__bottom-links a:hover { color: var(--gold); } /* ── Pricing Table ── */ .table-scroll { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); -webkit-overflow-scrolling: touch; } .table-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .pricing-table { width: 100%; min-width: 640px; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .pricing-table thead { background: var(--navy); color: var(--white); } .pricing-table thead th { padding: 16px 24px; text-align: left; font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; } .pricing-table thead th:first-child { color: var(--gold); } .pricing-table tbody tr { border-bottom: 1px solid var(--gray-200); } .pricing-table tbody tr:last-child { border-bottom: none; } .pricing-table tbody tr:nth-child(even) { background: var(--cream); } .pricing-table tbody td { padding: 18px 24px; font-size: 0.93rem; color: var(--gray-900); vertical-align: top; } .pricing-table tbody td:first-child { font-weight: 600; color: var(--navy); } .pricing-table tbody td:nth-child(2) { color: var(--gold-dark); font-weight: 700; font-family: var(--font-serif); font-size: 1rem; } /* ── Management Plan Tables ── */ .pricing-plan { display: flex; gap: 32px; max-width: 980px; margin: 0 auto; align-items: flex-start; } .pricing-plan__col { flex: 1; min-width: 0; } .pricing-plan__table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .pricing-plan__table thead th { background: var(--navy); color: var(--white); padding: 16px 24px; text-align: left; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; } .pricing-plan__table--alt thead th { background: var(--gold-dark); } .pricing-plan__table tbody tr { border-bottom: 1px solid var(--gray-200); } .pricing-plan__table tbody tr:last-child { border-bottom: none; } .pricing-plan__table tbody tr:nth-child(even) { background: var(--cream); } .pricing-plan__table tbody td { padding: 14px 24px; font-size: 0.92rem; color: var(--gray-900); font-weight: 500; } /* More specific than ".pricing-plan__table tbody td" on purpose — that rule's 24px side padding was otherwise winning over this column's own width, rendering it wider than intended and stealing space from the label column. */ .pricing-plan__table tbody td.pricing-plan__check { width: 20px; padding-left: 0; text-align: right; } .pricing-plan__check svg { width: 17px; height: 17px; stroke: var(--gold); flex-shrink: 0; } .pricing-plan__table--alt .pricing-plan__check svg { stroke: var(--gold-dark); } @media (max-width: 768px) { .pricing-plan { flex-direction: column; gap: 24px; } } @media (max-width: 480px) { .pricing-plan__table thead th { padding: 12px 14px; font-size: 0.62rem; } .pricing-plan__table tbody td { padding: 10px 14px; font-size: 0.84rem; } .pricing-plan__table tbody td.pricing-plan__check { width: 16px; padding-left: 0; padding-right: 14px; } } /* ── Steps ── */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; position: relative; padding-bottom: 40px; } .step:last-child { padding-bottom: 0; } .step__number-col { display: flex; flex-direction: column; align-items: center; } .step__number { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; } .step__line { flex: 1; width: 1.5px; background: var(--gray-200); margin-top: 8px; } .step:last-child .step__line { display: none; } .step__content { padding-top: 12px; padding-bottom: 16px; } .step__content h3 { color: var(--navy); margin-bottom: 8px; } .step__content p { font-size: 0.93rem; } /* ── FAQ Accordion ── */ .faq { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; } .faq__item { border-bottom: 1px solid var(--gray-200); } .faq__item:last-child { border-bottom: none; } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; text-align: left; font-family: var(--font-sans); font-size: 0.97rem; font-weight: 600; color: var(--navy); background: var(--white); transition: background var(--transition); gap: 16px; } .faq__question:hover { background: var(--cream); } .faq__question.open { background: var(--cream); color: var(--gold-dark); } .faq__chevron { width: 20px; height: 20px; stroke: var(--gray-400); flex-shrink: 0; transition: transform var(--transition); } .faq__question.open .faq__chevron { transform: rotate(180deg); stroke: var(--gold); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .faq__answer.open { max-height: 400px; } .faq__answer-inner { padding: 0 28px 24px; font-size: 0.93rem; color: var(--gray-600); line-height: 1.75; } /* ── Checklist two-col ── */ .checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .checklist h4 { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .checklist ul { display: flex; flex-direction: column; gap: 10px; } .checklist ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--gray-600); } .checklist ul li::before { content: ''; display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; margin-top: 2px; } /* ── Revenue Potential (For Owners) ── Two-panel layout: a dark-headed factor list on the left, a cream "custom analysis" card with its own 4-item icon row on the right, plus a horizontal CTA bar below. Replaces what used to be a static ROI benchmark table — recreated here as real HTML/CSS from a design mockup the owner supplied, rather than embedding that mockup as an image. */ .revenue-potential { display: flex; gap: 28px; align-items: stretch; } .revenue-potential__factors { flex: 1; min-width: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; background: var(--white); } .revenue-potential__factors-head { display: flex; align-items: center; gap: 14px; background: var(--navy); padding: 20px 24px; } .revenue-potential__factors-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(201,168,76,.18); display: flex; align-items: center; justify-content: center; } .revenue-potential__factors-icon svg { width: 18px; height: 18px; stroke: var(--gold); } .revenue-potential__factors-head h3 { color: var(--white); font-size: 1rem; margin: 0; } .revenue-potential__list { list-style: none; padding: 8px 0; margin: 0; } .revenue-potential__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 24px; border-bottom: 1px solid var(--gray-200); } .revenue-potential__list li:last-child { border-bottom: none; } .revenue-potential__list-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .revenue-potential__list-icon svg { width: 16px; height: 16px; stroke: var(--gold-dark); } .revenue-potential__list h4 { font-size: 0.92rem; margin: 0 0 3px; color: var(--navy); } .revenue-potential__list p { font-size: 0.82rem; color: var(--gray-600); margin: 0; line-height: 1.5; } .revenue-potential__custom { flex: 1; min-width: 0; background: var(--cream); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; } .revenue-potential__custom-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .revenue-potential__custom-icon svg { width: 24px; height: 24px; stroke: var(--gold-dark); } .revenue-potential__custom h3 { font-size: 1.2rem; line-height: 1.3; margin: 0; } .revenue-potential__divider { width: 40px; height: 2px; background: var(--gold); margin: 18px 0; } .revenue-potential__custom > p { font-size: 0.88rem; color: var(--gray-600); max-width: 400px; margin: 0 0 28px; } .revenue-potential__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; padding-top: 24px; border-top: 1px solid var(--cream-dark); } .revenue-potential__step-icon { width: 30px; height: 30px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .revenue-potential__step-icon svg { width: 22px; height: 22px; stroke: var(--gold-dark); } .revenue-potential__step h5 { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--gold-dark); margin: 0 0 4px; } .revenue-potential__step p { font-size: 0.76rem; color: var(--gray-600); margin: 0; line-height: 1.4; } .revenue-potential__cta { margin-top: 28px; display: flex; align-items: center; gap: 20px; background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.25); border-radius: var(--radius-lg); padding: 22px 28px; } .revenue-potential__cta-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; } .revenue-potential__cta-icon svg { width: 22px; height: 22px; stroke: var(--gold); } .revenue-potential__cta-text { flex: 1; min-width: 0; } .revenue-potential__cta-text h4 { margin: 0 0 4px; font-size: 1.02rem; } .revenue-potential__cta-text p { margin: 0; font-size: 0.85rem; color: var(--gray-600); } .revenue-potential__cta-btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 900px) { .revenue-potential { flex-direction: column; } .revenue-potential__steps { grid-template-columns: repeat(2, 1fr); } .revenue-potential__cta { flex-direction: column; text-align: center; } } /* ── Values cards ── */ .value-card { text-align: center; padding: 40px 28px; border-radius: var(--radius-lg); background: var(--navy); position: relative; overflow: hidden; } .value-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gold); } .value-card__icon { width: 56px; height: 56px; background: rgba(201,168,76,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .value-card__icon svg { width: 26px; height: 26px; stroke: var(--gold); } .value-card h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 10px; } .value-card p { color: rgba(255,255,255,0.6); font-size: 0.88rem; } /* ── Team card ── */ .team-card { text-align: center; padding: 36px 24px; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); background: var(--white); transition: box-shadow var(--transition); } .team-card:hover { box-shadow: var(--shadow-lg); } .team-card__avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 20px; overflow: hidden; border: 3px solid var(--gold-light); } .team-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .team-card__avatar--initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-light); } .team-card__avatar--icon { display: flex; align-items: center; justify-content: center; background: var(--cream); } .team-card__avatar--icon svg { width: 38px; height: 38px; stroke: var(--gold-dark); } .team-card__name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--navy); margin-bottom: 4px; } .team-card__role { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .team-card p { font-size: 0.88rem; } /* ── Contact form ── */ .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 7px; } /* Follow-up field revealed when a vague/"Other" answer is picked in a select above it — offset with a gold rule so it visibly reads as tied to that answer, with a light entrance instead of just popping into place. */ .form-group__conditional .form-group { margin-top: 4px; margin-bottom: 20px; padding-left: 16px; border-left: 2px solid var(--gold-light); animation: conditional-field-in 0.25s ease; } @keyframes conditional-field-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .form-group label { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); font-weight: 600; } .form-group input, .form-group textarea, .form-group select { padding: 13px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font-sans); font-size: 0.93rem; color: var(--gray-900); background: var(--white); transition: border-color var(--transition); outline: none; appearance: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.25); } .form-group input:focus-visible, .form-group textarea:focus-visible, .form-group select:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 1px; } .form-group textarea { resize: vertical; min-height: 130px; } .form-group input.is-invalid, .form-group textarea.is-invalid { border-color: #C83C3C; } .form-group input.is-invalid:focus, .form-group textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(200,60,60,.18); } .form-group__counter { text-align: right; font-size: 0.72rem; color: var(--gray-400); } .form-group__counter.is-near-limit { color: #C8873C; font-weight: 600; } /* ── Address field loading state ── */ .address-field__loading { display: flex; align-items: center; gap: 8px; color: var(--gray-400) !important; cursor: default !important; } .address-field__loading:hover { background: none !important; } .address-field__spinner { width: 13px; height: 13px; border: 2px solid var(--gray-200); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Contact CTA cards ── */ .contact-cta-card { padding: 36px; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); text-align: center; transition: all var(--transition); } .contact-cta-card:hover { border-color: var(--gold); box-shadow: 0 8px 32px rgba(201,168,76,.12); transform: translateY(-3px); } .contact-cta-card__icon { width: 52px; height: 52px; background: rgba(201,168,76,.1); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .contact-cta-card__icon svg { width: 24px; height: 24px; stroke: var(--gold); } .contact-cta-card h3 { color: var(--navy); margin-bottom: 8px; font-size: 1.05rem; } .contact-cta-card p { font-size: 0.88rem; margin-bottom: 20px; } /* ── Themed grid ── */ .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .theme-badge { padding: 20px; border-radius: var(--radius); background: var(--navy); display: flex; align-items: center; gap: 14px; transition: all var(--transition); } .theme-badge:hover { background: var(--navy-light); transform: translateY(-2px); } .theme-badge__icon { flex-shrink: 0; } .theme-badge__icon svg { width: 24px; height: 24px; stroke: var(--gold-light); } .theme-badge__name { font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); } /* ── Stats grid ── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .stat__number { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; } .stat__label { font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-400); } /* Superhost "stat" is a status, not a count, so its number slot holds a small medal icon instead of a digit — sized to roughly match the visual weight of the numerals it sits beside. */ .stat__number--medal svg { display: block; width: 78px; height: 42px; margin: 0 auto; } .trust-bar__number--medal svg { display: block; width: 63px; height: 34px; margin: 0 auto; } /* ── Fade-in animation ── */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-delay-1 { transition-delay: 0.1s; } .fade-in-delay-2 { transition-delay: 0.2s; } .fade-in-delay-3 { transition-delay: 0.3s; } .fade-in-delay-4 { transition-delay: 0.4s; } /* ── Carousel skeleton loading state ── Server-rendered placeholder cards shown until main.js swaps in the real ones from the data files, so first paint never shows an empty track. */ .skeleton-shimmer { background: linear-gradient(90deg, var(--gray-200) 25%, #eef0f2 37%, var(--gray-200) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: 4px; } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton-line { display: block; height: 12px; } .skeleton-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%; } .skeleton-card__img { aspect-ratio: 16/9; border-radius: 0; } .skeleton-card__body { padding: 24px; } .skeleton-card--testimonial { padding: 36px; border-left: 3px solid var(--gray-200); } .skeleton-card__author { display: flex; align-items: center; gap: 12px; margin-top: 24px; } /* ── Property Photo Lightbox ── */ .lightbox-open { overflow: hidden; } .photo-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; } .photo-lightbox.is-open { display: flex; } .photo-lightbox__backdrop { position: absolute; inset: 0; background: rgba(13,27,42,.92); } .photo-lightbox__dialog { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .photo-lightbox__stage { position: relative; /* Fixed, not shrink-to-fit: portrait and landscape photos render at very different widths inside here, and if the stage sized itself to each photo the arrows (anchored to its edges) would jump to a different spot on screen every time you paged. Keeping the box itself constant means the arrows sit in exactly the same place for every photo, just outside whichever one happens to be widest, no mouse movement needed between clicks. */ width: min(1100px, 90vw); height: 74vh; display: flex; align-items: center; justify-content: center; } .photo-lightbox__img { max-width: 100%; max-height: 74vh; border-radius: var(--radius); object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .photo-lightbox__footer { margin-top: 18px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.85); font-family: var(--font-label); } .photo-lightbox__caption { font-size: 0.85rem; letter-spacing: 0.05em; } .photo-lightbox__counter { font-size: 0.75rem; color: rgba(255,255,255,.5); } .photo-lightbox__close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .photo-lightbox__close:hover { background: rgba(255,255,255,.18); } .photo-lightbox__close svg { width: 18px; height: 18px; stroke: var(--white); } .photo-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; transition: background 0.2s ease; } .photo-lightbox__nav:hover { background: rgba(255,255,255,.18); } .photo-lightbox__nav svg { width: 22px; height: 22px; stroke: var(--white); } .photo-lightbox__nav--prev { left: 16px; } .photo-lightbox__nav--next { right: 16px; } @media (max-width: 640px) { .photo-lightbox__nav { width: 40px; height: 40px; } .photo-lightbox__nav--prev { left: 6px; } .photo-lightbox__nav--next { right: 6px; } .photo-lightbox__close { top: 12px; right: 12px; } } /* ── Blur-up image loading ── */ .img-blur-up { background: var(--gray-200); filter: blur(16px); transition: filter 0.5s ease; } .img-blur-up.img-loaded { filter: blur(0); } /* ── Back to Top ── */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); border: none; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--navy-light); } .back-to-top svg { width: 20px; height: 20px; stroke: var(--gold); } /* ── Verified Rating Badge ── */ .rating-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: var(--white); font-size: 0.82rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: all var(--transition); } .rating-badge:hover { background: rgba(255,255,255,.18); border-color: var(--gold-light); } .rating-badge strong { color: var(--gold-light); } .rating-badge__star { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; } .rating-badge--light { background: var(--cream); border-color: var(--gray-200); color: var(--navy); } .rating-badge--light:hover { background: var(--white); border-color: var(--gold); } .rating-badge--light strong { color: var(--gold-dark); } /* ── Sticky Mobile CTA Bar ── */ .mobile-cta-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(13, 27, 42, .96); border-top: 1px solid rgba(201,168,76,.25); box-shadow: 0 -6px 24px rgba(0,0,0,.18); } .mobile-cta-bar .btn { width: 100%; } @media (max-width: 640px) { .mobile-cta-bar { display: block; } .has-mobile-cta-bar .back-to-top { bottom: 88px; } .has-mobile-cta-bar { padding-bottom: 76px; } } /* ── Responsive ── */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* Nav switches to the hamburger menu earlier than the general 768px content breakpoint — with 7 links (Home/Services/Design/For Owners/About/Contact/Book a Stay) plus the logo and CTA button, the full desktop nav needs roughly 1100px+ to lay out without crowding. */ @media (max-width: 1100px) { .nav__links, .nav__cta { display: none; } .nav__hamburger { display: flex; } } @media (max-width: 768px) { .section { padding: 64px 0; } .section-sm { padding: 48px 0; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; gap: 24px; } .split { grid-template-columns: 1fr; gap: 40px; direction: ltr; } .split--reverse { direction: ltr; } .split__img { aspect-ratio: 16/9; } .checklist-grid { grid-template-columns: 1fr; gap: 32px; } .form-row { grid-template-columns: 1fr; } .theme-grid { grid-template-columns: repeat(2, 1fr); } .trust-bar__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr; gap: 36px; } .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { width: 100%; } .cta-banner__actions { flex-direction: column; align-items: stretch; } .cta-banner__actions .btn { width: 100%; } } @media (max-width: 480px) { .trust-bar__grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .theme-grid { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } } /* ── Contact Wizard ── */ .wizard { max-width: 720px; margin: 0 auto; } .wizard__progress { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 44px; } .wizard__progress-step { display: flex; align-items: center; gap: 10px; } .wizard__progress-dot { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 0.78rem; font-weight: 600; color: var(--gray-400); transition: all var(--transition); flex-shrink: 0; } .wizard__progress-label { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); display: none; } .wizard__progress-line { width: 40px; height: 1.5px; background: var(--gray-200); flex-shrink: 0; } .wizard__progress-step.is-active .wizard__progress-dot, .wizard__progress-step.is-done .wizard__progress-dot { border-color: var(--gold); background: var(--gold); color: var(--navy); } .wizard__progress-step.is-active .wizard__progress-label, .wizard__progress-step.is-done .wizard__progress-label { color: var(--navy); } .wizard__panel { display: none; } .wizard__panel.is-active { display: block; } .wizard__heading { text-align: center; margin-bottom: 32px; } .wizard__heading h2 { margin-bottom: 8px; } .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .service-option { display: block; width: 100%; text-align: left; padding: 22px 22px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); cursor: pointer; transition: all var(--transition); font-family: inherit; } .service-option:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(201,168,76,.1); transform: translateY(-2px); } .service-option.is-selected { border-color: var(--gold); background: rgba(201,168,76,.06); box-shadow: 0 8px 24px rgba(201,168,76,.14); } .service-option__title { font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem; color: var(--navy); margin-bottom: 4px; } .service-option__sub { font-size: 0.85rem; color: var(--gray-600); } .wizard__intro { padding: 24px 28px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); margin-bottom: 28px; } .wizard__intro-label { margin-bottom: 6px; } .wizard__intro h3 { color: var(--navy); margin-bottom: 8px; font-size: 1.15rem; } .wizard__intro p { margin-bottom: 0; font-size: 0.94rem; } .wizard__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; gap: 16px; } .wizard__nav-spacer { flex: 1; } .wizard__back { background: none; border: none; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--gray-600); cursor: pointer; padding: 12px 4px; transition: color var(--transition); } .wizard__back:hover { color: var(--navy); } .wizard__continue { border: none; cursor: pointer; } .wizard__continue:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; } /* Honeypot: kept in the tab/DOM flow-adjacent but hidden from sighted users and off-canvas, never display:none — some bots skip fields that are display:none. */ .wizard__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .wizard__result { text-align: center; padding: 56px 24px; } .wizard__result-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .wizard__result--success .wizard__result-icon { background: rgba(201,168,76,.12); } .wizard__result--success .wizard__result-icon svg { stroke: var(--gold); width: 30px; height: 30px; } .wizard__result--error .wizard__result-icon { background: rgba(200,60,60,.1); } .wizard__result--error .wizard__result-icon svg { stroke: #C83C3C; width: 30px; height: 30px; } .wizard__result h2 { margin-bottom: 10px; } .wizard__result p { max-width: 46ch; margin: 0 auto 28px; } .wizard__error-msg { font-size: 0.85rem; color: #C83C3C; margin-top: 6px; } @media (min-width: 640px) { .wizard__progress-label { display: block; } } @media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } .wizard__progress { gap: 6px; } .wizard__progress-line { width: 22px; } } /* ── Slider field (e.g. Desired Timeline) ── */ .slider-field__readout { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; color: var(--gold-dark); text-align: center; margin: 4px 0 18px; } .slider-field__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--gray-200); outline: none; cursor: pointer; margin: 0 0 16px; } .slider-field__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(13,27,42,.3); cursor: pointer; transition: transform var(--transition); } .slider-field__input::-webkit-slider-thumb:hover { transform: scale(1.12); } .slider-field__input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gray-200); } .slider-field__input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(13,27,42,.3); cursor: pointer; } .slider-field__input:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 4px; border-radius: 999px; } .slider-field__ticks { display: flex; justify-content: space-between; gap: 6px; } .slider-field__ticks span { flex: 1 1 0; font-family: var(--font-label); font-size: 0.64rem; letter-spacing: 0.01em; line-height: 1.3; color: var(--gray-400); text-align: center; transition: color var(--transition); } .slider-field__ticks span:first-child { text-align: left; } .slider-field__ticks span:last-child { text-align: right; } .slider-field__ticks span.is-active { color: var(--gold-dark); font-weight: 600; } /* ── Chip-select field (e.g. Budget Range) ── */ .chips-field { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--gray-200); background: var(--white); font-family: var(--font-label); font-size: 0.76rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: all var(--transition); } .chip:hover { border-color: var(--gold); color: var(--gold-dark); } .chip.is-selected { background: var(--gold); border-color: var(--gold); color: var(--navy); } .chip:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; } /* ── Address field with suggestions ── */ .address-field { position: relative; width: 100%; } .address-field input { width: 100%; } /* ── Phone field with country/dial-code selector ── Custom dropdown rather than a native