/* =========================================================== VILLAS MALAKI — shared stylesheet Editorial Mexican Pacific coastal aesthetic =========================================================== */ :root { /* Warm coastal palette */ --bg: #F4ECDE; --bg-cream: #FBF6EC; --bg-sand: #ECE0CB; --bg-deep: #DDCEB4; --ink: #2A1F15; --ink-soft: #5C4A38; --muted: #8A7560; --line: rgba(42, 31, 21, 0.14); --line-soft: rgba(42, 31, 21, 0.07); --line-strong: rgba(42, 31, 21, 0.32); /* Accent — switchable via [data-accent] on */ --accent: #B8553A; --accent-deep: #8C3E29; --accent-tint: rgba(184, 85, 58, 0.10); /* Surface */ --surface: #FBF6EC; --surface-2: #F1E7D2; /* Type */ --f-display: 'Cormorant Garamond', 'Tenor Sans', Georgia, serif; --f-body: 'Outfit', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* Layout */ --maxw: 1440px; --gutter: clamp(20px, 4vw, 56px); /* Motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); } html[data-accent="ocean"] { --accent: #2D5A52; --accent-deep: #1E3F39; --accent-tint: rgba(45, 90, 82, 0.10); } html[data-accent="sand"] { --accent: #A47742; --accent-deep: #7A5530; --accent-tint: rgba(164, 119, 66, 0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } /* ---------- Type primitives ---------- */ .eyebrow { font-family: var(--f-body); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); } .eyebrow.muted { color: var(--muted); } .h-display { font-family: var(--f-display); font-weight: 300; letter-spacing: -0.012em; line-height: 0.98; } .h-display em { font-style: italic; font-weight: 300; color: var(--accent); } .h-section { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.012em; } .h-section em { font-style: italic; color: var(--accent); } .lead { font-family: var(--f-display); font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--ink-soft); letter-spacing: 0.005em; } .body { color: var(--ink-soft); font-size: 16px; } .body strong { color: var(--ink); font-weight: 500; } .cap-num { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ink); background: var(--ink); color: var(--bg-cream); transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out), transform 0.28s var(--ease-out); } .btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--bg-cream); } .btn--light { background: var(--bg-cream); color: var(--ink); border-color: var(--bg-cream); } .btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-cream); } .btn--arrow::after { content: "→"; font-family: var(--f-display); font-size: 18px; letter-spacing: 0; line-height: 1; } .link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--line); transition: color 0.24s var(--ease-out), border-color 0.24s var(--ease-out); } .link-arrow:hover { color: var(--accent); border-color: var(--accent); } .link-arrow::after { content: "→"; font-family: var(--f-display); font-size: 18px; letter-spacing: 0; transition: transform 0.24s var(--ease-out); } .link-arrow:hover::after { transform: translateX(4px); } /* ---------- Navbar ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), padding 0.3s var(--ease-out); color: var(--bg-cream); border-bottom: 1px solid transparent; } .nav.is-solid { background: var(--bg-cream); color: var(--ink); border-bottom-color: var(--line); padding-top: 16px; padding-bottom: 16px; } .nav__brand { display: flex; align-items: center; gap: 12px; } .nav__brand-mark { width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: 18px; font-weight: 400; } .nav__brand-name { font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: 0.01em; line-height: 1; } .nav__brand-tag { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; margin-top: 2px; } .nav__links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav__links a, .nav__links button.nav__link { position: relative; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; padding: 8px 0; transition: opacity 0.24s var(--ease-out); } .nav__links a:hover, .nav__links button.nav__link:hover { opacity: 0.65; } .nav__links a.is-active::after, .nav__links button.nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; } .nav__util { display: flex; align-items: center; gap: 22px; } .lang-toggle { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .lang-toggle button { padding: 6px 14px; transition: background 0.24s var(--ease-out), color 0.24s var(--ease-out); color: currentColor; } .lang-toggle button.is-active { background: currentColor; } /* When the nav is transparent (over the hero), nav color is --bg-cream, so the active button's background becomes cream — the inner text needs --ink to be readable. When the nav scrolls into its solid state below, the nav color flips to --ink, the active background turns dark, and the text needs to flip back to --bg-cream — handled by the next rule. */ .lang-toggle button.is-active span { color: var(--ink); } .nav.is-solid .lang-toggle button.is-active span { color: var(--bg-cream); } .nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; transition: background 0.24s var(--ease-out), color 0.24s var(--ease-out); } .nav__cta:hover { background: currentColor; } .nav__cta:hover span { color: var(--bg-cream); } .nav.is-solid .nav__cta:hover span { color: var(--bg-cream); } /* Mobile nav button */ .nav__burger { display: none; } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: #D9CBB6; padding: 80px var(--gutter) 32px; margin-top: 120px; position: relative; } .footer__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .footer__brand h3 { font-family: var(--f-display); font-weight: 300; font-size: 38px; line-height: 1; letter-spacing: -0.01em; color: var(--bg-cream); } .footer__brand em { font-style: italic; color: var(--accent); } .footer__brand p { margin-top: 18px; max-width: 340px; color: rgba(217, 203, 182, 0.75); font-size: 15px; } .footer h4 { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bg-cream); font-weight: 500; margin-bottom: 22px; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer li a { font-size: 14px; color: rgba(217, 203, 182, 0.7); transition: color 0.24s var(--ease-out); } .footer li a:hover { color: var(--accent); } .footer__bottom { max-width: var(--maxw); margin: 28px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(217, 203, 182, 0.55); } .footer__bottom a { color: rgba(217, 203, 182, 0.75); } .footer__bottom a:hover { color: var(--accent); } .socials { display: flex; gap: 14px; align-items: center; } .socials a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: grid; place-items: center; color: rgba(217, 203, 182, 0.7); transition: color 0.24s var(--ease-out), border-color 0.24s var(--ease-out); } .socials a:hover { color: var(--accent); border-color: var(--accent); } .socials svg { width: 16px; height: 16px; } /* ---------- Lodgify booking widget host ---------- */ .vm-booking-host { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 36px; max-width: var(--maxw); margin: 0 auto; z-index: 2; } .vm-booking-host #lodgify-search-bar { --ldg-psb-background: #FBF6EC; --ldg-psb-border-radius: 0; --ldg-psb-padding: 14px; --ldg-psb-input-background: #FBF6EC; --ldg-psb-button-border-radius: 0; --ldg-psb-box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45); --ldg-psb-color-primary: #2A1F15; --ldg-psb-color-primary-lighter: #5C4A38; --ldg-psb-color-primary-darker: #B8553A; --ldg-psb-color-primary-contrast: #FBF6EC; --ldg-semantic-color-primary: #2A1F15; --ldg-semantic-color-primary-lighter: #5C4A38; --ldg-semantic-color-primary-darker: #B8553A; --ldg-semantic-color-primary-contrast: #FBF6EC; --ldg-component-modal-z-index: 999; width: 100%; border: 1px solid var(--line); } @media (max-width: 760px) { .vm-booking-host { bottom: 20px; } } .hero { position: relative; height: 100vh; min-height: 720px; color: var(--bg-cream); overflow: hidden; } .hero__media { position: absolute; inset: 0; background-color: #1a1410; background-size: cover; background-position: center; z-index: 0; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.55) 100%); } .hero__inner { position: relative; z-index: 1; height: 100%; padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 200px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bg-cream); opacity: 0.85; margin-bottom: 28px; } .hero__eyebrow::before, .hero__eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } .hero h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(48px, 8vw, 124px); line-height: 0.92; letter-spacing: -0.018em; max-width: 14ch; } .hero h1 em { font-style: italic; color: var(--bg-cream); opacity: 0.95; } .hero__sub { margin-top: 22px; font-family: var(--f-display); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; max-width: 38ch; color: rgba(251, 246, 236, 0.92); } /* Hero booking widget */ .booking-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 36px; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; background: var(--bg-cream); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45); z-index: 2; } .booking-bar__field { padding: 18px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; transition: background 0.24s var(--ease-out); } .booking-bar__field:hover { background: var(--bg-cream); } .booking-bar__field:last-of-type { border-right: 0; } .booking-bar__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .booking-bar__value { font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--ink); line-height: 1.2; } .booking-bar__value.is-placeholder { color: var(--muted); } /* Date fields are buttons that open the calendar popover (reset native button chrome). */ .booking-bar__field--btn { background: transparent; border: 0; border-right: 1px solid var(--line); font: inherit; width: 100%; } /* Date-only calendar popover anchored to the search bar. */ .cal-pop { position: absolute; left: 0; bottom: calc(100% + 10px); /* default: open UPWARD — the hero bar sits near the bottom */ z-index: 60; width: min(560px, 92vw); max-height: 80vh; overflow: auto; } .cal-pop[hidden] { display: none; } .cal-pop .rate-cal { width: 100%; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45); } .listing-search .cal-pop { top: calc(100% + 10px); bottom: auto; } /* listing bar sits high → open DOWNWARD */ .cal-pop--form { top: calc(100% + 8px); bottom: auto; left: 0; } /* in-form date pickers open downward */ /* On phones, drop the anchored dropdown (it overflows the viewport / gets clipped by section overflow) for a centered, viewport-bounded panel. Using `fixed` escapes any ancestor `overflow:hidden`. Covers all three contexts. */ @media (max-width: 560px) { .cal-pop, .listing-search .cal-pop, .cal-pop--form { position: fixed; left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 92vw; max-width: 420px; max-height: 85vh; overflow: auto; } } input[data-cal-trigger] { cursor: pointer; } .booking-bar__submit { background: var(--ink); color: var(--bg-cream); padding: 0 36px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: background 0.24s var(--ease-out); } .booking-bar__submit:hover { background: var(--accent); } /* Hero side meta */ .hero__meta { position: absolute; right: var(--gutter); bottom: calc(36px + 110px + 28px); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bg-cream); opacity: 0.85; text-align: right; } .hero__meta strong { font-weight: 500; opacity: 1; } /* ---------- Section ---------- */ .section { padding: clamp(80px, 9vw, 140px) 0; } .section--tight { padding: clamp(60px, 6vw, 100px) 0; } .section--cream { background: var(--bg-cream); } .section--sand { background: var(--bg-sand); } .section__head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; margin-bottom: 64px; align-items: end; } .section__head-left { display: flex; flex-direction: column; gap: 18px; } .section__head-right p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 56ch; } @media (max-width: 880px) { .section__head { grid-template-columns: 1fr; gap: 24px; } } /* ---------- Property categories ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .cat-card { background: var(--bg-cream); padding: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; color: inherit; } .cat-card__media { aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--bg-deep); } .cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .cat-card:hover .cat-card__media img { transform: scale(1.04); } .cat-card__body { padding: 32px 32px 40px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .cat-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .cat-card__num { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--muted); } .cat-card__title { font-family: var(--f-display); font-weight: 300; font-size: 34px; line-height: 1.04; letter-spacing: -0.005em; } .cat-card__meta { display: flex; gap: 18px; font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; } .cat-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); padding-top: 18px; border-top: 1px solid var(--line); font-weight: 500; } .cat-card__cta::after { content: "→"; font-family: var(--f-display); font-size: 18px; transition: transform 0.24s var(--ease-out); } .cat-card:hover .cat-card__cta::after { transform: translateX(5px); } @media (max-width: 880px) { .cat-grid { grid-template-columns: 1fr; } } /* ---------- Stat strip ---------- */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-row__cell { padding: 36px 32px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .stat-row__cell:last-child { border-right: 0; } .stat-row__icon { display: block; width: 36px; height: 36px; margin-bottom: 14px; color: var(--ink-soft); } .stat-row__icon svg { width: 100%; height: 100%; } .stat-row__icon img { width: auto; height: 100%; object-fit: contain; object-position: left center; } .stat-row__icon--airbnb { height: 28px; } .stat-row__icon--gmaps { height: 36px; } .stat-row__num { font-family: var(--f-display); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.012em; } .stat-row__num sup { font-size: 0.4em; vertical-align: super; color: var(--accent); margin-left: 4px; } .stat-row__label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } @media (max-width: 880px) { .stat-row { grid-template-columns: repeat(2, 1fr); } .stat-row__cell:nth-child(2) { border-right: 0; } .stat-row__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } /* ---------- Editorial split (intro) ---------- */ .split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .split--reverse > *:first-child { order: 2; } .split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__media--collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.2fr 0.8fr; gap: 18px; aspect-ratio: 1 / 1; } .split__media--collage > div { overflow: hidden; } .split__media--collage > div:first-child { grid-row: span 2; } .split__media--collage img { width: 100%; height: 100%; object-fit: cover; } .split__text { display: flex; flex-direction: column; gap: 22px; } .split__text h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.012em; } .split__text h2 em { font-style: italic; color: var(--accent); } .split__text p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); } .split__text ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 6px; } .split__text ul li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-soft); } .split__text ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 1px; background: var(--accent); } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split--reverse > *:first-child { order: 0; } } /* ---------- Reviews ---------- */ .review-strip { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; border: 1px solid var(--line); background: var(--bg-cream); } .review-strip__quote { padding: 56px 56px 48px; display: flex; flex-direction: column; gap: 28px; justify-content: center; border-right: 1px solid var(--line); } .review-strip__stars { font-size: 14px; letter-spacing: 0.5em; color: var(--accent); } .review-strip__text { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; } .review-strip__attr { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .review-strip__stats { display: grid; grid-template-rows: 1fr 1fr; } .review-strip__stat { padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .review-strip__stat:first-child { border-bottom: 1px solid var(--line); } .review-strip__stat-num { font-family: var(--f-display); font-weight: 300; font-size: 56px; line-height: 1; color: var(--ink); } .review-strip__stat-num em { font-style: italic; color: var(--accent); } .review-strip__stat-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* Review slider (real Airbnb reviews) */ .review-slider { display: flex; flex-direction: column; gap: 28px; width: 100%; } .review-slider__viewport { position: relative; min-height: clamp(190px, 22vw, 250px); } .review-slide { display: none; flex-direction: column; gap: 22px; } .review-slide.is-active { display: flex; animation: reviewFade 0.5s ease; } @keyframes reviewFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .review-slide__by { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .review-slide__name { color: var(--ink); font-weight: 600; } .review-slider__controls { display: flex; align-items: center; gap: 16px; } .review-slider__arrow { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s; } .review-slider__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .review-slider__dots { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; } .review-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.2s, transform 0.2s; } .review-slider__dot:hover { background: var(--muted); } .review-slider__dot.is-active { background: var(--accent); transform: scale(1.3); } /* Inline variant (villa detail page) — smaller quote to fit the column. */ .review-slider--inline .review-slider__viewport { min-height: 0; } .review-slider--inline .review-strip__text { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4; } .review-slider--inline .review-slide { gap: 16px; } @media (max-width: 880px) { .review-strip { grid-template-columns: 1fr; } .review-strip__quote { border-right: 0; border-bottom: 1px solid var(--line); padding: 36px; } .review-strip__stat { padding: 24px 36px; } .review-slider__viewport { min-height: 240px; } } /* ---------- Page hero (smaller, for non-home pages) ---------- */ .page-hero { padding: 200px var(--gutter) 80px; background-color: var(--bg-cream); background-size: cover; background-position: center 60%; border-bottom: 1px solid var(--line); position: relative; color: var(--bg-cream); isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 8, 0.78) 0%, rgba(20, 14, 8, 0.55) 50%, rgba(20, 14, 8, 0.85) 100%), linear-gradient(90deg, rgba(20, 14, 8, 0.7) 0%, rgba(20, 14, 8, 0.3) 70%, transparent 100%); z-index: -1; } .page-hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; } @media (max-width: 880px) { .page-hero__inner { grid-template-columns: 1fr; gap: 24px; } } .page-hero h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(54px, 7vw, 96px); line-height: 0.96; letter-spacing: -0.014em; text-shadow: 0 2px 30px rgba(0,0,0,0.55); } .page-hero h1 em { font-style: italic; color: var(--bg-cream); opacity: 0.94; } .page-hero__crumbs { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 246, 236, 0.82); margin-bottom: 24px; display: flex; gap: 10px; align-items: center; } .page-hero__crumbs a { color: rgba(251, 246, 236, 0.82); } .page-hero__crumbs a:hover { color: var(--accent); } /* Variant for breadcrumbs on a light background (e.g. villa detail page). */ .page-hero__crumbs--ink { color: var(--muted); } .page-hero__crumbs--ink a { color: var(--ink); } .page-hero__crumbs--ink a:hover { color: var(--accent); } .page-hero__intro p { font-size: 17px; line-height: 1.7; color: rgba(251, 246, 236, 0.96); max-width: 50ch; text-shadow: 0 1px 22px rgba(0,0,0,0.5); } /* ---------- Tweaks toggle host pill ---------- */ .vm-tweaks { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--bg-cream); color: var(--ink); border: 1px solid var(--line); width: 320px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.25); font-size: 13px; display: none; } .vm-tweaks.is-open { display: block; } .vm-tweaks__head { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } .vm-tweaks__head h4 { font-family: var(--f-display); font-weight: 400; font-size: 18px; } .vm-tweaks__head button { font-size: 18px; color: var(--muted); width: 24px; height: 24px; } .vm-tweaks__body { padding: 18px; display: flex; flex-direction: column; gap: 18px; } .vm-tweaks__row { display: flex; flex-direction: column; gap: 8px; } .vm-tweaks__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .vm-tweaks__seg { display: flex; border: 1px solid var(--line); } .vm-tweaks__seg button { flex: 1; padding: 10px 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); } .vm-tweaks__seg button + button { border-left: 1px solid var(--line); } .vm-tweaks__seg button.is-active { background: var(--ink); color: var(--bg-cream); } .vm-tweaks__swatches { display: flex; gap: 10px; } .vm-tweaks__swatches button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); position: relative; } .vm-tweaks__swatches button.is-active::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--ink); border-radius: 50%; } /* ---------- Property listing ---------- */ .filter-bar { display: grid; grid-template-columns: 110px 1fr; gap: 14px 24px; padding: 28px 0 14px; border-bottom: 1px solid var(--line); align-items: center; } .filter-bar__label { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .filter-bar__group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filter-bar__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 0; margin-top: 6px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; gap: 12px; } .filter-bar__count { font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; } .filter-bar__count strong { color: var(--ink); font-weight: 500; } .filter-bar__clear { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; cursor: pointer; background: transparent; display: inline-flex; align-items: center; gap: 8px; } .filter-bar__clear:hover { color: var(--accent-deep); } .filter-bar__clear::before { content: "×"; font-family: var(--f-display); font-size: 18px; line-height: 1; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--line); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; transition: all 0.24s var(--ease-out); border-radius: 999px; background: transparent; font-weight: 400; } .filter-chip:hover { border-color: var(--ink); color: var(--ink); } .filter-chip.is-active { background: var(--ink); color: var(--bg-cream); border-color: var(--ink); } @media (max-width: 760px) { .filter-bar { grid-template-columns: 1fr; gap: 6px; } .filter-bar__label { padding-top: 8px; } } .prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; margin-top: 56px; } @media (max-width: 1080px) { .prop-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .prop-grid { grid-template-columns: 1fr; } } .prop-card { display: flex; flex-direction: column; gap: 18px; } .prop-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); } .prop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .prop-card:hover .prop-card__media img { transform: scale(1.04); } .prop-card__tag { position: absolute; top: 16px; left: 16px; background: var(--bg-cream); color: var(--ink); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; font-weight: 500; } /* Feature tag (e.g. "Frente al mar"). Stacks below the bedrooms tag with the accent clay color so it reads as a property highlight, not a category. */ .prop-card__tag--feature { top: 48px; background: var(--accent); color: var(--bg-cream); } .prop-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .prop-card__name { font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: -0.005em; line-height: 1.05; } .prop-card__rating { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } .prop-card__rating::before { content: "★ "; color: var(--accent); } .prop-card__loc { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } .prop-card__meta { display: flex; gap: 16px; font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; } .prop-card__meta span { display: inline-flex; align-items: center; gap: 6px; } .prop-card__foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 4px; } .prop-card__price { font-family: var(--f-display); font-size: 22px; font-weight: 400; } .prop-card__price small { font-size: 12px; color: var(--muted); font-family: var(--f-body); letter-spacing: 0.06em; } /* Second line under the nightly price, shown only when the listing has live dates ("$31,500 total · 7 noches"). Lives inside .prop-card__price so alignment + price-area baseline match the existing cards. */ .prop-card__total { display: block; margin-top: 2px; } .prop-card__total small { font-size: 11px; color: var(--accent-deep); letter-spacing: 0.08em; text-transform: uppercase; } .prop-card__see { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .prop-card__see::after { content: "→"; font-family: var(--f-display); font-size: 18px; transition: transform 0.24s var(--ease-out); } .prop-card:hover .prop-card__see::after { transform: translateX(4px); } /* ---------- Property detail ---------- */ /* Single-image hero at the top of villa.html. Same maxw + gutter as the legacy .detail-gallery 5-cell strip below (kept for back-compat) so the nav clearance and side rails line up. */ .villa-hero { position: relative; margin: 120px auto 60px; padding: 0 var(--gutter); max-width: var(--maxw); aspect-ratio: 2.4 / 1; cursor: zoom-in; overflow: visible; } /* Clickable-gallery hint on the villa hero. pointer-events:none so the click falls through to the figure (opens the lightbox of all photos). */ .villa-hero__hint { position: absolute; right: calc(var(--gutter) + 16px); bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(20, 20, 20, 0.6); color: #fff; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; transition: background 0.25s; } .villa-hero:hover .villa-hero__hint { background: rgba(20, 20, 20, 0.8); } .villa-hero__hint svg { width: 15px; height: 15px; } @media (max-width: 640px) { .villa-hero__hint { font-size: 10px; padding: 7px 11px; right: calc(var(--gutter) + 10px); bottom: 10px; } } .villa-hero img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-deep); transition: transform 0.6s var(--ease-out); } .villa-hero:hover img { transform: scale(1.02); } /* Per-space sections rendered under the description on villa.html. .villa-space reuses .detail-sec's spacing/border; .villa-space__grid is 2-up by default and 3-up for bedrooms. Stacks on narrow screens. */ .villa-space__title { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -0.005em; margin-bottom: 18px; } .villa-space__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; } .villa-space__grid--bedrooms { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .villa-space__grid, .villa-space__grid--bedrooms { grid-template-columns: 1fr; } } .villa-space__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; background: var(--bg-deep); } .villa-space__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); } .villa-space__item:hover img { transform: scale(1.04); } .villa-space__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 12px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--f-mono); } .detail-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; margin-top: 120px; margin-bottom: 60px; aspect-ratio: 2.4 / 1; max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); } .detail-gallery > div { overflow: hidden; background: var(--bg-deep); position: relative; } .detail-gallery > div { cursor: zoom-in; } .detail-gallery > div:first-child { grid-row: span 2; } .detail-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .detail-gallery > div:hover img { transform: scale(1.03); } .detail-gallery__all { position: absolute; bottom: 16px; right: 16px; background: var(--bg-cream); color: var(--ink); padding: 10px 18px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--ink); cursor: pointer; } .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: start; } @media (max-width: 1080px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } } .detail-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 24px; gap: 24px; } .detail-head h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.012em; } .detail-head em { font-style: italic; color: var(--accent); } .detail-rating { font-size: 14px; font-weight: 500; } .detail-rating::before { content: "★ "; color: var(--accent); } .detail-sec { padding: 36px 0; border-bottom: 1px solid var(--line); } .detail-sec h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -0.005em; margin-bottom: 18px; } .detail-sec p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 60ch; } .amen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; margin-top: 8px; } .amen-grid li { list-style: none; display: flex; gap: 14px; align-items: center; font-size: 15px; color: var(--ink-soft); padding: 8px 0; } .amen-grid li::before { content: ""; width: 10px; height: 1px; background: var(--accent); flex-shrink: 0; } .booking-card { position: sticky; top: 100px; background: var(--bg-cream); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 18px; } .booking-card__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .booking-card__price { font-family: var(--f-display); font-weight: 400; font-size: 32px; } .booking-card__price small { font-size: 13px; color: var(--muted); font-family: var(--f-body); } .booking-card__row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); } .booking-card__field { padding: 12px 14px; cursor: pointer; text-align: left; background: transparent; } .booking-card__field + .booking-card__field { border-left: 1px solid var(--line); } .booking-card__field .booking-bar__label { font-size: 9px; } .booking-card__field .booking-bar__value { font-size: 16px; } .booking-card__single { padding: 12px 14px; border: 1px solid var(--line); margin-top: -1px; } .booking-card__break { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; color: var(--ink-soft); } .booking-card__break:last-child { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-weight: 500; color: var(--ink); font-size: 16px; } .booking-card__break b { font-weight: 500; } .booking-card__cta { background: var(--accent); color: var(--bg-cream); padding: 16px; border: 0; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; transition: background 0.24s var(--ease-out); } .booking-card__cta:hover { background: var(--accent-deep); } .booking-card__note { font-size: 12px; color: var(--muted); text-align: center; } /* ---------- Villa page right column ---------- No sticky positioning — the booking-frame (with Stripe Elements + guest fields) plus the OTA card below it can exceed the viewport height when sticky, leaving the "Direct booking gets you the best rate" note hidden below the fold. Both scroll naturally with the page now. */ .booking-frame { background: var(--bg-cream); border: 1px solid var(--line); display: flex; flex-direction: column; } .booking-frame__head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); } .booking-frame__title { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.005em; } .booking-frame__cancel { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--line); /* Positive benefit, not a warning — calm green (matches .status-pill.is-ok). */ background: rgba(45, 90, 82, 0.08); color: #2D5A52; font-size: 10px; letter-spacing: 0.16em; } .booking-frame__cancel svg { flex: 0 0 auto; } .booking-frame__sub { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .booking-frame__foot { padding: 14px 24px; border-top: 1px solid var(--line); text-align: center; } .booking-frame [data-bnb-host] { padding: 0; } .booking-frame #lodgify-book-now-box { --ldg-bnb-background: #FBF6EC; --ldg-bnb-border-radius: 0; --ldg-bnb-box-shadow: none; --ldg-bnb-padding: 22px 24px; --ldg-bnb-input-background: #FBF6EC; --ldg-bnb-button-border-radius: 0; --ldg-bnb-color-primary: #B8553A; --ldg-bnb-color-primary-lighter: #D97758; --ldg-bnb-color-primary-darker: #8C3E29; --ldg-bnb-color-primary-contrast: #FBF6EC; --ldg-component-calendar-cell-selection-bg-color: #2A1F15; --ldg-component-calendar-cell-selection-color: #FBF6EC; --ldg-component-calendar-cell-selected-bg-color: #B8553A; --ldg-component-calendar-cell-selected-color: #FBF6EC; --ldg-bnb-font-family: 'Outfit', system-ui, sans-serif; --ldg-semantic-color-primary: #B8553A; --ldg-semantic-color-primary-lighter: #D97758; --ldg-semantic-color-primary-darker: #8C3E29; --ldg-semantic-color-primary-contrast: #FBF6EC; width: 100%; } /* ---------- FAQ ---------- */ .faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item__btn { width: 100%; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 24px; } .faq-item__q { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; } .faq-item__icon { font-family: var(--f-display); font-size: 28px; color: var(--accent); width: 28px; flex-shrink: 0; transition: transform 0.3s var(--ease-out); } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); } .faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .faq-item.is-open .faq-item__a { max-height: 400px; } .faq-item__a-inner { padding: 0 0 32px; font-size: 16px; color: var(--ink-soft); line-height: 1.7; max-width: 60ch; } /* ---------- Experiences ---------- */ .exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 48px; } @media (max-width: 880px) { .exp-grid { grid-template-columns: 1fr; } } .exp-card { display: flex; flex-direction: column; gap: 20px; } .exp-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .exp-card__media--video { position: relative; overflow: hidden; background: #000; } .exp-card__media--video iframe { position: absolute; top: 50%; left: 50%; /* Make a 16:9 video cover a 4:3 box without black bars */ width: 178%; height: 100%; transform: translate(-50%, -50%); border: 0; } .exp-card:hover .exp-card__media img { transform: scale(1.04); } .exp-card__num { position: absolute; bottom: 16px; left: 16px; color: var(--bg-cream); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; } .exp-card__head { display: flex; justify-content: space-between; align-items: baseline; } .exp-card__title { font-family: var(--f-display); font-weight: 400; font-size: 30px; letter-spacing: -0.005em; line-height: 1.05; } .exp-card__tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .exp-card p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 50ch; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } } .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; } .form-row label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .form-row input, .form-row select, .form-row textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 16px; font-family: var(--f-body); color: var(--ink); width: 100%; transition: border-color 0.24s var(--ease-out); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 0; border-bottom-color: var(--accent); } .form-row textarea { resize: vertical; min-height: 110px; padding-top: 14px; } .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-info { background: var(--bg-cream); border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; gap: 28px; } .contact-info h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; } .contact-info dl { display: flex; flex-direction: column; gap: 18px; } .contact-info dt { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .contact-info dd { font-size: 15px; color: var(--ink); } /* ---------- Tiny helpers ---------- */ .map-block { display: grid; grid-template-columns: 1.6fr 1fr; border: 1px solid var(--line); background: var(--bg-cream); overflow: hidden; } .map-block__embed { position: relative; min-height: 480px; aspect-ratio: 4 / 3; background: var(--bg-deep); } .map-block__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.15) saturate(0.92); } .map-block__aside { padding: 36px 36px 36px 40px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; justify-content: center; } .map-block__row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); } .map-block__row:last-of-type { border-bottom: 0; padding-bottom: 0; } .map-block__label { font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .map-block__value { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.4; color: var(--ink); } .map-block__value div { font-size: 15px; font-family: var(--f-body); font-weight: 300; color: var(--ink-soft); } .map-block__value div strong { font-family: var(--f-display); font-weight: 400; color: var(--ink); } .map-block__actions { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); } @media (max-width: 880px) { .map-block { grid-template-columns: 1fr; } .map-block__aside { border-left: 0; border-top: 1px solid var(--line); padding: 28px; } .map-block__embed { min-height: 320px; aspect-ratio: 4 / 3; } } .divider { height: 1px; background: var(--line); margin: 48px 0; } .tag { display: inline-flex; padding: 4px 10px; border: 1px solid var(--line); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- Responsive nav ---------- */ @media (max-width: 1080px) { .nav__links { display: none; } .nav__burger { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; } .nav__burger span { width: 14px; height: 1px; background: currentColor; position: relative; } .nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 14px; height: 1px; background: currentColor; } .nav__burger span::before { top: -5px; } .nav__burger span::after { top: 5px; } /* Open state: slide-down panel with stacked links + spacing for the lang toggle + WhatsApp CTA below. The whole thing sits on the bg-cream surface so contrast is consistent regardless of nav scroll state. */ .nav.is-open { background: var(--bg-cream); color: var(--ink); border-bottom-color: var(--line); } .nav.is-open .nav__links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-cream); padding: 18px var(--gutter) 28px; gap: 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 28px 48px -28px rgba(42, 31, 21, 0.35); } .nav.is-open .nav__links a { display: block; font-size: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); letter-spacing: 0.16em; } .nav.is-open .nav__links li:last-child a { border-bottom: 0; } /* Burger morph: middle line fades, top/bottom rotate into an X. */ .nav__burger { transition: border-color 0.2s var(--ease-out); } .nav__burger span, .nav__burger span::before, .nav__burger span::after { transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), top 0.25s var(--ease-out); } .nav__burger.is-active span { background: transparent; } .nav__burger.is-active span::before { top: 0; transform: rotate(45deg); } .nav__burger.is-active span::after { top: 0; transform: rotate(-45deg); } } /* On phones the nav has no room for the full "WhatsApp" pill alongside the lang toggle + burger (Pixel 9 Pro at 412px was cutting the burger off). Collapse the CTA into a 36×36 icon-only circle and tighten the util gap. */ @media (max-width: 760px) { .nav__util { gap: 10px; } .nav__cta { padding: 0; width: 36px; height: 36px; border-radius: 50%; justify-content: center; gap: 0; } .nav__cta > span { display: none; } .nav__cta svg { width: 16px; height: 16px; } /* Trim the brand subline ("Costa del Pacífico, México") below 480px — its letter-spacing alone eats half the screen otherwise. */ } @media (max-width: 480px) { .nav__brand-tag { display: none; } } @media (max-width: 760px) { .booking-bar { grid-template-columns: 1fr 1fr; bottom: 20px; } .booking-bar__field { border-right: 0; } .booking-bar__field:nth-child(odd) { border-right: 1px solid var(--line); } .booking-bar__field { border-bottom: 1px solid var(--line); } .booking-bar__submit { grid-column: span 2; padding: 18px; justify-content: center; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .hero__inner { padding-bottom: 280px; } } /* ---------- Lightbox (villa gallery) ---------- */ .detail-gallery > div { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 14, 8, 0.94); display: none; align-items: center; justify-content: center; padding: 60px clamp(20px, 6vw, 80px); animation: lightbox-in 0.22s var(--ease-out); } .lightbox.is-open { display: flex; } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } .lightbox__close, .lightbox__nav { border: 1px solid rgba(251, 246, 236, 0.4); border-radius: 50%; display: grid; place-items: center; color: var(--bg-cream); cursor: pointer; background: rgba(20, 14, 8, 0.4); transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); position: absolute; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(251, 246, 236, 0.12); border-color: var(--bg-cream); } .lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; } .lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; width: 16px; height: 1px; background: currentColor; } .lightbox__close::before { transform: rotate(45deg); } .lightbox__close::after { transform: rotate(-45deg); } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-family: var(--f-display); font-size: 26px; line-height: 1; } .lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; } .lightbox__stage { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; display: block; } .lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: rgba(251, 246, 236, 0.7); } /* ---------- Lodgify Portable Search Bar — editorial override ---------- */ .vm-booking-host #portable-search-bar { background: var(--bg-cream) !important; border-radius: 0 !important; padding: 0 !important; min-height: 86px; font-family: var(--f-body); } /* Hide the empty leading div (location placeholder when not used) */ .vm-booking-host #portable-search-bar > div:first-child:empty { display: none; } /* Each top-level field button / link */ .vm-booking-host #portable-search-bar > button { flex: 1; background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; min-height: 86px; padding: 0 !important; display: flex; align-items: stretch; text-align: left; box-shadow: none !important; } .vm-booking-host #portable-search-bar > button:hover { background: rgba(42, 31, 21, 0.03) !important; } /* Inside the dates button, two halves (check-in / check-out) get their own divider */ .vm-booking-host #portable-search-bar > button:first-of-type > div { flex: 1; padding: 16px 26px 14px !important; display: flex !important; flex-direction: column !important; justify-content: center; gap: 4px; } .vm-booking-host #portable-search-bar > button:first-of-type > div.left { border-right: 1px solid var(--line); } .vm-booking-host #portable-search-bar > button:first-of-type { flex: 2; } .vm-booking-host #portable-search-bar > button:nth-of-type(2) { padding: 16px 26px 14px !important; flex-direction: column; justify-content: center; gap: 4px; } /* Label */ .vm-booking-host #portable-search-bar label { font-family: var(--f-body) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--muted) !important; cursor: pointer; } /* Value text */ .vm-booking-host #portable-search-bar p.date, .vm-booking-host #portable-search-bar [data-testid="guests-breakdown-trigger-value"] { font-family: var(--f-display) !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.2 !important; color: var(--ink) !important; } .vm-booking-host #portable-search-bar p.date:empty::before { content: attr(data-placeholder, '—'); } /* Empty date shows muted dash */ .vm-booking-host #portable-search-bar p.date:empty::after { content: "—"; color: var(--muted); font-family: var(--f-display); } /* Caret on guests */ .vm-booking-host #portable-search-bar > button:nth-of-type(2) .value-wrapper { display: flex; align-items: center; gap: 6px; } .vm-booking-host #portable-search-bar > button:nth-of-type(2) svg { color: var(--muted); } /* Search button (last anchor) */ .vm-booking-host #portable-search-bar > a { background: var(--ink) !important; color: var(--bg-cream) !important; border-radius: 0 !important; padding: 0 36px !important; font-family: var(--f-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; min-height: 86px; display: flex !important; align-items: center; gap: 10px; transition: background 0.24s var(--ease-out) !important; } .vm-booking-host #portable-search-bar > a:hover { background: var(--accent) !important; } .vm-booking-host #portable-search-bar > a svg { width: 14px; height: 14px; } /* Mobile collapse */ @media (max-width: 760px) { .vm-booking-host #portable-search-bar { flex-wrap: wrap; } .vm-booking-host #portable-search-bar > button { flex: 1 1 100%; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .vm-booking-host #portable-search-bar > a { flex: 1 1 100%; justify-content: center; min-height: 64px; } } /* Date values — keep on one line, never wrap */ .vm-booking-host #portable-search-bar p.date { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } /* The little (×) clear date button — make it discreet & top-right of the dates button */ .vm-booking-host #portable-search-bar [data-testid="date-picker-clear-cta"] { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; background: transparent !important; color: var(--muted) !important; border-radius: 50%; opacity: 0.6; transition: opacity 0.2s, color 0.2s; } .vm-booking-host #portable-search-bar [data-testid="date-picker-clear-cta"]:hover { opacity: 1; color: var(--accent) !important; } .vm-booking-host #portable-search-bar [data-testid="date-picker-clear-cta"] svg { width: 14px; height: 14px; } /* Make sure the dates button has positioning context for the absolute close */ .vm-booking-host #portable-search-bar > button:first-of-type { position: relative; } /* Hide the empty-state visual cross spacing if no date */ .vm-booking-host #portable-search-bar [data-testid="date-picker-clear-cta"].hidden { display: none !important; } /* Calendar / guests dropdown panels — match brand */ [role="dialog"][data-state="open"] { font-family: var(--f-body); } [role="dialog"][data-state="open"] button[data-testid*="calendar"], [role="dialog"][data-state="open"] [class*="calendar"] { border-radius: 0 !important; } /* ============================================================ BOOKING FLOW — custom UI (Cloudbeds API + Stripe Elements) The .booking-bar / .booking-frame shells were already defined above; the rules below cover the new form controls and the villa-page booking widget, listing-page live-price decorations, and the confirmation page. ============================================================ */ /* Form controls inside .booking-bar — reset native styling so dates + selects sit flush with the editorial typography. */ .booking-bar__input { font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--ink); line-height: 1.2; background: transparent; border: 0; padding: 0; outline: 0; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; } .booking-bar__input:focus { color: var(--accent); } .booking-bar__input::-webkit-calendar-picker-indicator { filter: invert(0.4) sepia(0.3); cursor: pointer; } @media (max-width: 760px) { .booking-bar { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .booking-bar__submit { grid-column: 1 / -1; padding: 18px; justify-content: center; } } /* Booking bar rendered inline above the filter bar on propiedades.html. Drops the fixed/sticky positioning the hero version uses — sits in the document flow with a flat panel look. */ .listing-search { margin-bottom: 22px; } .listing-search .booking-bar { position: relative; /* positioning context for the calendar popover */ inset: auto; /* clear the hero version's left/right/bottom offsets — otherwise `left: var(--gutter)` shifts the whole bar right and it bleeds off the right edge */ margin: 0; border: 1px solid var(--line); box-shadow: none; background: var(--bg-cream); } /* ---------- Listing date banner above the filter bar ---------- */ .listing-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; padding: 16px 22px; background: var(--bg-cream); border: 1px solid var(--line); margin-bottom: 18px; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); } .listing-dates strong { font-family: var(--f-display); font-size: 20px; font-weight: 400; color: var(--ink); } .listing-dates .eyebrow { margin-right: 4px; } .listing-dates .link-arrow { margin-left: auto; } /* ---------- Price loading + unavailable ---------- */ .booking-loading { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; animation: vmPulse 1.4s ease-in-out infinite; } @keyframes vmPulse { 0%,100%{opacity:0.4} 50%{opacity:1} } .prop-card.is-unavailable { opacity: 0.55; } .prop-card.is-unavailable .prop-card__see { color: var(--muted); } /* ---------- Villa page booking form ---------- Editorial pass — drops boxed fieldsets in favor of hairline-divided sections with accent-colored eyebrows; inputs sit on the page-bg color so they're visible against the cream booking-frame backdrop. */ .booking-form { display: flex; flex-direction: column; gap: 24px; padding: 22px 24px; } /* ---- price-on-each-day booking calendar ---- */ .booking-form__cal { display: block; } .rate-cal { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-cream); padding: 14px 14px 12px; box-shadow: 0 1px 0 rgba(42, 31, 21, 0.03); } .rate-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .rate-cal__sel { font-family: var(--f-display); font-size: 17px; color: var(--ink); text-align: center; flex: 1; line-height: 1.2; } .rate-cal__nav { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-cream); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s; } .rate-cal__nav:hover { background: var(--accent-tint); border-color: var(--accent); } .rate-cal__nav:disabled { opacity: 0.3; cursor: default; } .rate-cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; } .rate-cal__loading { position: absolute; inset: -4px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgba(251, 246, 236, 0.72); background: color-mix(in srgb, var(--bg-cream) 72%, transparent); backdrop-filter: blur(1.5px); font-family: var(--f-body); font-size: 13px; letter-spacing: 0.02em; color: var(--ink-soft); border-radius: 10px; } .rate-cal__spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rate-cal-spin 0.7s linear infinite; } @keyframes rate-cal-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rate-cal__spinner { animation-duration: 1.6s; } } .rate-cal__mname { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.02em; color: var(--ink); text-align: center; text-transform: capitalize; margin-bottom: 8px; } .rate-cal__wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .rate-cal__wk span { text-align: center; font-family: var(--f-body); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } .rate-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .rate-cal__cell { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 4px 0 3px; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: var(--f-body); cursor: default; transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out), color 0.12s; } .rate-cal__cell--pad { visibility: hidden; } .rate-cal__d { font-size: 13px; color: var(--ink); line-height: 1; } .rate-cal__p { font-size: 9.5px; color: var(--accent-deep); line-height: 1; letter-spacing: 0.01em; } .rate-cal__cell.is-past, .rate-cal__cell.is-off { color: var(--muted); } .rate-cal__cell.is-past .rate-cal__d, .rate-cal__cell.is-off .rate-cal__d { color: var(--muted); opacity: 0.55; } .rate-cal__cell.is-off .rate-cal__d { text-decoration: line-through; } .rate-cal__cell.is-loading { color: var(--muted); } .rate-cal__cell.is-loading .rate-cal__d { opacity: 0.4; } button.rate-cal__cell.is-open, button.rate-cal__cell.is-checkout { cursor: pointer; } button.rate-cal__cell.is-open:hover, button.rate-cal__cell.is-checkout:hover { background: var(--accent-tint); border-color: var(--accent); } .rate-cal__cell.is-checkout .rate-cal__d { color: var(--ink); opacity: 1; text-decoration: none; } .rate-cal__cell.is-range { background: var(--accent-tint); border-radius: 0; } .rate-cal__cell.is-ci, .rate-cal__cell.is-co { background: var(--accent); border-color: var(--accent); } .rate-cal__cell.is-ci .rate-cal__d, .rate-cal__cell.is-co .rate-cal__d, .rate-cal__cell.is-ci .rate-cal__p, .rate-cal__cell.is-co .rate-cal__p { color: var(--bg-cream); opacity: 1; text-decoration: none; } .rate-cal__cell.is-ci { border-radius: 9px 0 0 9px; } .rate-cal__cell.is-co { border-radius: 0 9px 9px 0; } .rate-cal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--f-body); font-size: 11px; color: var(--muted); } .rate-cal__key { display: inline-flex; align-items: center; gap: 6px; } .rate-cal__key--note { margin-left: auto; font-style: italic; } .rate-cal__sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .rate-cal__sw--open { background: var(--accent-tint); border: 1px solid var(--accent); } .rate-cal__sw--off { background: transparent; border: 1px solid var(--line); position: relative; } @media (max-width: 560px) { .rate-cal__months { grid-template-columns: 1fr; gap: 14px; } .rate-cal__cell { min-height: 46px; } .rate-cal__key--note { margin-left: 0; flex-basis: 100%; } } .booking-form__dates, .booking-form__guests { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .booking-form label { display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .booking-form label > .booking-bar__label { color: var(--muted); letter-spacing: 0.2em; } .booking-form input[type="date"], .booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form select { font-family: var(--f-body); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; appearance: none; -webkit-appearance: none; outline: 0; transition: border-color 0.2s var(--ease-out); width: 100%; } .booking-form input:focus, .booking-form select:focus { border-color: var(--accent); } .booking-form input::placeholder { color: var(--muted); } .booking-form select { cursor: pointer; } /* Fieldsets become editorial sections divided by a hairline above. No border-box; the legend doubles as a section eyebrow in the accent color. */ .booking-form fieldset { border: 0; padding: 18px 0 0; margin: 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); } .booking-form legend { display: block; width: 100%; padding: 0; margin: 0 0 4px; float: left; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .booking-form legend + * { clear: both; } .booking-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Stripe Elements iframe mount. Stripe handles the inner styling via its `style` option in booking.js — we just give it a container that matches the other inputs. */ .booking-form__card { background: var(--bg); border: 1px solid var(--line); padding: 14px; min-height: 44px; transition: border-color 0.2s var(--ease-out); } .booking-form__card.StripeElement--focus, .booking-form__card:focus-within { border-color: var(--accent); } .booking-form__card-error { font-family: var(--f-body); font-size: 13px; color: var(--accent-deep); margin: 0; min-height: 1em; } /* Rate summary — sits prominently between the date pickers and the guest section. Slightly darker bg + hairline border to stand out as the "what you'll pay" focal point. */ .booking-form__rate { border: 1px solid var(--line); background: var(--bg); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); } .booking-rate__row { display: flex; justify-content: space-between; align-items: baseline; } .booking-rate__row small { color: var(--muted); } .booking-rate__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--f-display); font-size: 22px; font-weight: 500; color: var(--ink); } .booking-rate__note { font-size: 10px; color: var(--muted); margin: 0; letter-spacing: 0.18em; } .booking-form__submit { width: 100%; justify-content: center; padding: 16px 24px; } .booking-form__submit[disabled] { opacity: 0.5; cursor: not-allowed; } .booking-form__legal { text-align: center; color: var(--muted); margin: 6px 0 0; font-size: 10px; } .booking-form__note { color: var(--muted); margin: 8px 0 0; font-size: 10px; letter-spacing: 0.16em; } /* Card-brand trust badges under the Stripe card field. The brand SVGs are inline in booking.js's form template so the "Aceptamos" row renders before network paint and never flickers a missing logo on slow connections. */ .booking-form__cards { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .booking-form__cards-label { color: var(--muted); margin-right: 2px; } .card-brand { display: inline-flex; width: 36px; height: 22px; flex: 0 0 auto; } .card-brand svg { width: 100%; height: 100%; display: block; border: 1px solid var(--line-soft); border-radius: 3px; } /* ---------- Confirmation page ---------- */ .confirmation { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); padding: 40px 36px; background: var(--bg-cream); text-align: center; } .confirmation__mark { width: 56px; height: 56px; border: 1px solid var(--accent); color: var(--accent); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 30px; } /* Spinner on reserva-procesando.html while /api/finalize-booking runs. */ .confirmation__spinner { width: 56px; height: 56px; margin: 0 auto 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: vm-spin 0.9s linear infinite; } @keyframes vm-spin { to { transform: rotate(360deg); } } .confirmation__error { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .confirmation__error h2 { font-family: var(--f-display); font-weight: 400; color: var(--accent-deep); font-size: 24px; margin-bottom: 10px; } .confirmation h1 { font-family: var(--f-display); font-weight: 300; font-size: 38px; line-height: 1.1; color: var(--ink); margin-bottom: 8px; } .confirmation h1 em { color: var(--accent); font-style: italic; } .confirmation__summary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; text-align: left; margin: 28px auto 28px; max-width: 380px; font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); } .confirmation__summary dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .confirmation__summary dd { font-family: var(--f-display); font-size: 18px; color: var(--ink); } /* ============================================================ MANAGE BOOKING — reserva.html Lookup form → reservation summary → cancel / change-dates actions. ============================================================ */ .wrap--narrow { max-width: 620px; } .manage__form { background: var(--bg-cream); border: 1px solid var(--line); border-radius: 14px; padding: 32px; } .manage__hint { font-size: 13px; margin-top: 14px; } .manage__result { margin-top: 32px; background: var(--bg-cream); border: 1px solid var(--line); border-radius: 14px; padding: 32px; text-align: center; } .manage__result .confirmation__summary { margin-top: 4px; } .manage__action { margin-top: 8px; } .manage__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .manage__note { font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); margin: 18px auto 0; max-width: 46ch; line-height: 1.55; } /* Status pill in the summary */ .status-pill { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); } .status-pill.is-ok { color: #2D5A52; border-color: rgba(45,90,82,0.4); background: rgba(45,90,82,0.08); } .status-pill.is-warn { color: var(--accent-deep); border-color: rgba(184,85,58,0.4); background: var(--accent-tint); } .status-pill.is-cancel { color: var(--muted); border-color: var(--line); background: var(--line-soft); text-decoration: line-through; } .status-pill.is-neutral { color: var(--ink-soft); } /* Change-dates sub-form */ .manage__change { margin-top: 8px; text-align: left; } .manage__change .form-2col { margin-top: 18px; } .manage__change .manage__buttons { margin-top: 22px; justify-content: flex-start; } .manage__quote { margin-top: 18px; padding: 16px 18px; background: var(--bg-sand); border-radius: 10px; font-family: var(--f-body); font-size: 15px; color: var(--ink); } .manage__quote-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .manage__quote-row + .manage__quote-row { margin-top: 8px; } .manage__quote-diff { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 500; } .manage__quote-diff strong { color: var(--accent-deep); } .manage__quote-bad { color: var(--accent-deep); } /* Post-action success (canceled / change requested) */ .manage__done { text-align: center; } .manage__done h3 { font-family: var(--f-display); font-size: 26px; color: var(--ink); margin: 14px 0 10px; } .manage__done .body { max-width: 46ch; margin: 0 auto 22px; } .manage__done .btn { margin-top: 4px; } /* ============================================================ GROUP INQUIRY FORM — grupos.html Editorial multi-section form: no fieldset boxes, generous spacing, underline-only inputs, accent-colored section eyebrows, wider chips. ============================================================ */ .section__head--center { text-align: center; display: block; max-width: 720px; margin: 0 auto; } .section__head--center .h-section em { margin-left: 8px; } .inquiry-form { display: flex; flex-direction: column; margin: 56px auto 0; } /* Each
is a section divided by a hairline rule. No boxes. */ .inquiry-form__fs { border: 0; background: transparent; margin: 0; padding: 36px 0; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--line); } .inquiry-form__fs:first-of-type { padding-top: 0; } .inquiry-form__fs:last-of-type { border-bottom: 0; padding-bottom: 0; } /* Legends double as editorial section eyebrows. */ .inquiry-form__fs > legend { display: block; width: 100%; float: left; /* fieldset legends are weird; this lets the row below sit cleanly */ padding: 0; margin: 0 0 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); } .inquiry-form__fs > legend + * { clear: both; } .inquiry-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 640px) { .inquiry-form__row { grid-template-columns: 1fr; gap: 18px; } } .inquiry-form label { display: flex; flex-direction: column; gap: 8px; cursor: pointer; } .inquiry-form label > .booking-bar__label { letter-spacing: 0.2em; color: var(--muted); } /* Text-y inputs: underline only, transparent background — feels like writing on the page rather than filling a form. */ .inquiry-form input[type="date"], .inquiry-form input[type="text"], .inquiry-form input[type="email"], .inquiry-form input[type="tel"], .inquiry-form input[type="number"] { font-family: var(--f-body); font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; appearance: none; -webkit-appearance: none; outline: 0; width: 100%; transition: border-color 0.2s var(--ease-out); } .inquiry-form input::placeholder { color: var(--muted); } .inquiry-form input:focus { border-bottom-color: var(--accent); } /* Side-by-side standalone inputs in the Contact section don't have a label wrapper, so make sure they line up with the labeled ones. */ .inquiry-form > .inquiry-form__fs > input[type="text"], .inquiry-form > .inquiry-form__fs > input[type="email"], .inquiry-form > .inquiry-form__fs > input[type="tel"] { margin-top: 4px; } /* Select + textarea keep a quiet bordered box — text fields would feel awkward against the native dropdown arrow / multi-line area. */ .inquiry-form select, .inquiry-form textarea { font-family: var(--f-body); font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; outline: 0; width: 100%; transition: border-color 0.2s var(--ease-out); } .inquiry-form select { cursor: pointer; line-height: 1.3; } .inquiry-form select:focus, .inquiry-form textarea:focus { border-color: var(--accent); } .inquiry-form textarea { resize: vertical; line-height: 1.6; min-height: 140px; } .inquiry-form textarea::placeholder { color: var(--muted); } /* Service chips — wider, premium feel, 3-col on desktop. */ .inquiry-form__checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; } @media (max-width: 900px) { .inquiry-form__checks { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .inquiry-form__checks { grid-template-columns: 1fr; } } .inquiry-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .inquiry-check:hover { border-color: var(--accent); transform: translateY(-1px); } .inquiry-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--line-strong); background: var(--bg-cream); cursor: pointer; position: relative; flex-shrink: 0; transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .inquiry-check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .inquiry-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--bg-cream); border-width: 0 2px 2px 0; transform: rotate(45deg); } .inquiry-check span { font-family: var(--f-body); font-size: 14px; color: var(--ink); line-height: 1.3; } .inquiry-check:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); } .inquiry-form__note { color: var(--muted); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin: -4px 0 0; } .inquiry-form__submit { align-self: center; padding: 18px 56px; margin-top: 56px; } .inquiry-form__submit[disabled] { opacity: 0.55; cursor: not-allowed; } .inquiry-form__error { font-family: var(--f-body); font-size: 13px; color: var(--accent-deep); margin: 16px 0 0; min-height: 1em; text-align: center; } .inquiry-form__legal { text-align: center; color: var(--muted); font-size: 10px; margin: 14px 0 0; } .inquiry-success { max-width: 640px; margin: 56px auto 0; border: 1px solid var(--line); padding: 56px 36px; background: var(--bg); text-align: center; } .inquiry-success .h-section { margin-top: 14px; } /* Contact form inline error (contacto.html) — matches inquiry-form__error. */ .form-error { font-family: var(--f-body); font-size: 13px; color: var(--accent-deep); margin: 12px 0 0; min-height: 1em; } /* ============================================================ GALLERY PAGE — galeria.html First photo is a full-width hero spanning all 3 cols × 2 rows. Rest fill in as 1×1 cells. Auto-flow dense so any orphans tuck in. ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; grid-auto-flow: dense; gap: 10px; } .gallery-grid > a { position: relative; overflow: hidden; display: block; background: var(--bg-sand); cursor: zoom-in; } .gallery-grid > a:first-child { grid-column: span 3; grid-row: span 2; } .gallery-grid > a > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); display: block; } .gallery-grid > a:hover > img { transform: scale(1.04); } @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .gallery-grid > a:first-child { grid-column: span 2; grid-row: span 2; } } @media (max-width: 540px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } .gallery-grid > a:first-child { grid-column: span 1; grid-row: span 1; } } /* ============================================================ VILLA PAGE — Other booking options (OTA links) Sits under the .booking-frame in the right-column aside on villa.html. ============================================================ */ /* Sits directly under the .booking-frame in the aside. No own box — just a hairline divider + accent-colored eyebrow, so it reads as a continuation of the direct-booking widget rather than a competing card. */ .other-platforms { margin-top: 14px; padding: 18px 24px 4px; } .other-platforms .eyebrow { display: block; margin-bottom: 12px; color: var(--accent); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; } .other-platforms ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .other-platforms li + li { border-top: 1px solid var(--line-soft); } .other-platforms__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-family: var(--f-display); font-size: 18px; color: var(--ink); border-bottom: 0; transition: color 0.2s var(--ease-out); } .other-platforms__link:hover { color: var(--accent); } .other-platforms__arrow { font-family: var(--f-body); font-size: 14px; color: var(--muted); transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .other-platforms__link:hover .other-platforms__arrow { color: var(--accent); transform: translate(2px, -2px); } .other-platforms__note { margin: 16px 0 0; color: var(--muted); font-size: 10px; letter-spacing: 0.18em; line-height: 1.5; text-align: left; } /* Anchor-version of the stat cell (index.html hero stat-row + review strip) so the existing flex layout still works, hover gives an editorial hint. */ .stat-row__cell--link, .review-strip__stat--link { text-decoration: none; color: inherit; transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .stat-row__cell--link:hover, .review-strip__stat--link:hover { color: var(--accent); transform: translateY(-1px); } /* ============================================================ INSTAGRAM GRID — galeria.html "Más en Instagram" 3×2 square grid. Each tile links to a specific Instagram post (configured via window.vmInstagramPosts) or, as a placeholder, to the profile. ============================================================ */ .ig-section__head { text-align: center; } .ig-section__head .eyebrow { color: var(--accent); } .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 40px 0; } @media (max-width: 720px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } } .ig-grid > a { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-deep); display: block; } .ig-grid > a > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-out); filter: saturate(0.95); display: block; } .ig-grid > a:hover > img { transform: scale(1.06); filter: saturate(1.1); } .ig-section__foot { text-align: center; margin-top: 8px; } /* ============================================================ VILLA DETAIL — Stats row + iconified amenities grid ============================================================ */ .detail-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 28px; border: 1px solid var(--line); background: var(--bg-cream); } .detail-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; text-align: center; border-right: 1px solid var(--line-soft); } .detail-stat:last-child { border-right: 0; } .detail-stat__icon { display: inline-flex; width: 28px; height: 28px; color: var(--accent); } .detail-stat__icon svg { width: 100%; height: 100%; } .detail-stat__num { font-family: var(--f-display); font-size: 28px; font-weight: 400; line-height: 1; color: var(--ink); } .detail-stat__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } @media (max-width: 900px) { .detail-stats { grid-template-columns: repeat(5, 1fr); } .detail-stat__num { font-size: 22px; } .detail-stat__label { font-size: 9px; letter-spacing: 0.14em; } } @media (max-width: 560px) { .detail-stats { grid-template-columns: repeat(3, 1fr); } .detail-stat:nth-child(n) { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .detail-stat:nth-child(3n) { border-right: 0; } .detail-stat:nth-last-child(-n+2) { border-bottom: 0; } } /* Amenities grid — replaces the old .amen-grid