html, body { margin: 0 !important; padding: 0 !important; max-width: none !important; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #f9f6f1;
--dark: #1c1c1c;
--warm-gray: #8a7f74;
--gold: #C8A898;
--light-border: #e0d9d0;
}
body { font-family: 'Montserrat', sans-serif; color: var(--dark); background: #fff; font-weight: 300; }
/* ─── TOP BAR ─── */
.top-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 101;
background: var(--dark); color: rgba(255,255,255,0.75);
height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 48px;
font-size: 11px; letter-spacing: 1.5px;
}
.top-bar a { color: rgba(255,255,255,0.75); text-decoration: none; }
.top-bar a:hover { color: var(--gold); }
.top-bar strong { color: #fff; font-weight: 500; }
/* ─── NAV ─── */
.dv-nav {
position: fixed; top: 34px; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 18px 48px;
background: #fff; isolation: isolate;
border-bottom: 1px solid var(--light-border);
}
.dv-nav-logo img { height: 72px; width: auto; mix-blend-mode: multiply; }
.dv-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.dv-nav-links a { text-decoration: none; color: var(--dark); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.dv-nav-links a:hover { color: var(--gold); }
.dv-nav-cta { background: var(--dark) !important; color: #fff !important; padding: 10px 22px; }
.dv-nav-cta:hover { background: var(--gold) !important; color: #fff !important; }
.dv-nav-hamburger {
display: none; position: relative;
width: 28px; height: 20px;
background: none; border: none; cursor: pointer; padding: 0;
flex-direction: column; justify-content: space-between;
}
.dv-nav-hamburger span {
display: block; width: 100%; height: 2px; background: var(--dark);
transform-origin: center; transition: transform 0.3s ease, opacity 0.2s ease;
}
.dv-nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.dv-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.dv-nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* ─── HERO IMAGE ─── */
.dv-villa-hero {
margin-top: 142px;
position: relative;
z-index: 1;
position: relative;
height: 580px;
overflow: hidden;
cursor: pointer;
}
.dv-villa-hero img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.dv-villa-hero:hover img { transform: scale(1.03); }
.dv-villa-hero::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px;
background: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent);
z-index: 2; pointer-events: none;
}
/* Hero prev / next arrows — cycle through all gallery photos in place,
without opening the lightbox. */
.dv-hero-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 56px; height: 56px;
background: rgba(255,255,255,0.92); color: var(--dark);
border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; cursor: pointer; z-index: 4;
transition: background 0.15s, color 0.15s, transform 0.15s;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.dv-hero-arrow:hover { background: var(--dark); color: #fff; transform: translateY(-50%) scale(1.06); }
.dv-hero-arrow-prev { left: 24px; }
.dv-hero-arrow-next { right: 24px; }
.dv-hero-counter {
position: absolute; bottom: 24px; right: 24px; z-index: 4;
background: rgba(0,0,0,0.45); color: #fff;
padding: 6px 14px; border-radius: 999px;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 1.5px; font-weight: 500;
pointer-events: none;
}
@media (max-width: 768px) {
.dv-hero-arrow { width: 44px; height: 44px; font-size: 20px; }
.dv-hero-arrow-prev { left: 14px; }
.dv-hero-arrow-next { right: 14px; }
.dv-hero-counter { bottom: 14px; right: 14px; font-size: 10px; padding: 5px 12px; }
}
.dv-gallery-btn {
position: absolute; bottom: 20px; right: 24px;
background: rgba(255,255,255,0.92); color: var(--dark);
border: none; padding: 10px 18px;
font-family: 'Montserrat', sans-serif; font-size: 11px;
letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.dv-gallery-btn:hover { background: #fff; }
/* ─── SHORTLIST (heart) ─── */
.dv-shortlist-btn {
position: absolute; top: 18px; right: 24px; z-index: 4;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.9); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s, transform 0.15s;
}
.dv-shortlist-btn:hover { background: #fff; transform: scale(1.06); }
.dv-shortlist-btn svg {
width: 21px; height: 21px; fill: none; stroke: var(--dark);
stroke-width: 1.6; transition: fill 0.2s, stroke 0.2s;
}
.dv-shortlist-btn.saved svg { fill: var(--gold); stroke: var(--gold); }
/* ─── SECTION NAV (in-page anchor links) ─── */
html { scroll-behavior: smooth; }
.dv-section-nav {
position: sticky; top: 142px; z-index: 50;
display: flex; gap: 4px; justify-content: center;
background: rgba(255,255,255,0.97);
border-bottom: 1px solid var(--light-border);
padding: 0 24px; overflow-x: auto; scrollbar-width: none;
}
.dv-section-nav::-webkit-scrollbar { display: none; }
.dv-section-nav a {
flex: 0 0 auto; padding: 15px 18px;
font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
color: var(--warm-gray-text, #635a51); text-decoration: none; white-space: nowrap;
border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.dv-section-nav a:hover { color: var(--dark); border-bottom-color: var(--gold); }
:is(#overview,#amenities,#gallery,#experiences,#reviews,#location,#availability,#inquire) { scroll-margin-top: 193px; }
.admin-bar .dv-section-nav { top: 174px; }
.admin-bar :is(#overview,#amenities,#gallery,#experiences,#reviews,#location,#availability,#inquire) { scroll-margin-top: 225px; }
/* ─── VILLA CONTENT LAYOUT ─── */
.dv-villa-wrap {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 380px; gap: 64px;
padding: 56px 48px;
}
/* ─── LEFT COLUMN ─── */
.dv-villa-header { margin-bottom: 32px; border-bottom: 1px solid var(--light-border); padding-bottom: 32px; }
.dv-villa-location {
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--gold); margin-bottom: 10px;
}
.dv-villa-name {
font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 52px);
font-weight: 400; line-height: 1.1; margin-bottom: 16px;
}
.dv-villa-tagline { font-size: 15px; line-height: 1.7; color: var(--warm-gray-text, #635a51); }
/* Quick stats row */
.dv-villa-stats {
display: flex; gap: 32px; margin-bottom: 40px;
padding-bottom: 40px; border-bottom: 1px solid var(--light-border);
}
.dv-stat { display: flex; flex-direction: column; gap: 4px; }
.dv-stat-ico-wrap { color: var(--gold); display: inline-flex; align-items: center; margin-bottom: 4px; }
.dv-stat-value { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; display: flex; align-items: flex-end; min-height: 34px; line-height: 1; }
.dv-stat-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm-gray-text, #635a51); }
/* Description */
.dv-villa-desc { margin-bottom: 48px; }
.dv-villa-desc h2 {
font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400;
margin-bottom: 16px;
}
.dv-villa-desc p { font-size: 14px; line-height: 1.9; color: #444; margin-bottom: 16px; }
/* Video */
.dv-villa-video { margin-bottom: 48px; }
.dv-villa-video h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; margin-bottom: 20px; }
/* Stylized poster shown before the visitor clicks play */
.dv-video-poster {
position: relative; display: block;
width: 100%; padding: 0; border: 0;
aspect-ratio: 16 / 9;
background: #111 center/cover no-repeat;
cursor: pointer; overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.dv-video-poster::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%);
transition: opacity 0.3s ease;
}
.dv-video-poster:hover::after { opacity: 0.7; }
.dv-video-poster:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.dv-video-play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 84px; height: 84px;
background: var(--gold);
color: #fff;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
box-shadow: 0 10px 36px rgba(0,0,0,0.45);
transition: transform 0.25s ease, background 0.25s;
z-index: 2;
}
.dv-video-poster:hover .dv-video-play {
transform: translate(-50%, -50%) scale(1.08);
background: var(--dark);
}
.dv-video-play svg { width: 32px; height: 32px; margin-left: 4px; }
.dv-video-eyebrow {
position: absolute; bottom: 24px; left: 28px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
color: #fff; font-weight: 500;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
/* Live iframe wrapper after click */
.dv-video-wrap {
position: relative; width: 100%; padding-top: 56.25%;
overflow: hidden; background: #111;
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.dv-video-wrap iframe {
position: absolute; inset: 0; width: 100%; height: 100%;
border: none;
}
@media (max-width: 720px) {
.dv-video-play { width: 64px; height: 64px; }
.dv-video-play svg { width: 24px; height: 24px; }
.dv-video-eyebrow { bottom: 16px; left: 18px; font-size: 9px; }
}
/* Experiences */
.dv-experiences { margin-bottom: 48px; }
.dv-experiences h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.dv-experiences-intro { font-size: 13px; color: var(--warm-gray-text, #635a51); line-height: 1.7; margin-bottom: 28px; }
.dv-experiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dv-experience-card { background: var(--cream); padding: 24px 20px; border-bottom: 2px solid transparent; transition: border-color 0.25s; }
.dv-experience-card:hover { border-bottom-color: var(--gold); }
.dv-experience-type { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.dv-experience-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 400; margin-bottom: 10px; line-height: 1.3; }
.dv-experience-desc { font-size: 12px; color: var(--warm-gray-text, #635a51); line-height: 1.7; }
/* Apartment-unit grid (used on multi-unit estate listings like La Poggiolaia) */
.dv-units-slider { margin: 32px 0 16px; }
.dv-villa-desc h3.dv-units-heading,
.dv-villa-desc .dv-units-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 22px; font-weight: 400;
color: var(--dark); margin: 0 0 18px;
}
.dv-units-track {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.dv-unit-card {
background: var(--cream);
border-bottom: 2px solid transparent;
text-decoration: none;
color: inherit;
display: block;
transition: border-color 0.25s, transform 0.2s;
}
.dv-unit-card:hover {
border-bottom-color: var(--gold);
transform: translateY(-1px);
}
.dv-unit-card-img {
width: 100%; aspect-ratio: 4 / 3;
object-fit: cover; display: block;
}
.dv-unit-card-body { padding: 18px 22px 22px; }
.dv-unit-card-name {
font-family: 'Cormorant Garamond', serif;
font-size: 20px; font-weight: 400;
margin: 0 0 8px; color: var(--dark);
}
.dv-unit-card-blurb {
font-size: 12.5px; line-height: 1.6;
color: var(--warm-gray-text, #635a51); margin: 0 0 14px;
}
.dv-unit-card-cta {
font-family: 'Montserrat', sans-serif;
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: var(--gold); font-weight: 500;
}
@media (max-width: 720px) {
.dv-units-track { grid-template-columns: 1fr; gap: 16px; }
}
/* "What we love about it" insider call-out — powder blue, under CIN */
.dv-insider {
margin-top: 28px;
background: #d4dde2;
padding: 24px 28px;
border-radius: 2px;
}
.dv-insider-eyebrow {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: 18px; letter-spacing: 0; text-transform: none;
color: var(--dark, #2b2421); opacity: 0.7;
margin: 0 0 4px;
}
.dv-insider-title {
font-family: 'Cormorant Garamond', serif;
font-size: 20px; font-weight: 400;
color: var(--dark, #2b2421); line-height: 1.3;
margin: 0 0 12px;
}
.dv-insider-body {
font-size: 14px;
color: var(--dark, #2b2421);
opacity: 0.85;
line-height: 1.7;
margin: 0;
}
/* Experiences on-demand call-out — powder blue */
.dv-exp-cta {
margin-top: 28px;
background: #d4dde2;
padding: 28px 32px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
border-radius: 2px;
}
.dv-exp-cta-text { flex: 1 1 auto; min-width: 0; }
.dv-exp-cta-eyebrow {
font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--dark, #2b2421); opacity: 0.65; margin-bottom: 6px;
}
.dv-exp-cta-title {
font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400;
color: var(--dark, #2b2421); line-height: 1.3; margin: 0 0 6px;
}
.dv-exp-cta-desc {
font-size: 13px; color: var(--dark, #2b2421); opacity: 0.8; line-height: 1.6; margin: 0;
}
.dv-exp-cta-btn {
flex: 0 0 auto;
display: inline-block; padding: 12px 22px;
background: var(--dark, #2b2421); color: #fff;
font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
text-decoration: none; border: 1px solid var(--dark, #2b2421);
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.dv-exp-cta-btn:hover { background: transparent; color: var(--dark, #2b2421); }
@media (max-width: 720px) {
.dv-exp-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
.dv-exp-cta-btn { width: 100%; text-align: center; }
}
/* Collections this villa belongs to (internal links) */
.dv-villa-collections { margin: 0 0 48px; padding: 20px 0; border-top: 1px solid var(--light-border); border-bottom: 1px solid var(--light-border); }
.dv-villa-collections-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm-gray-text, #635a51); margin: 0 0 8px; }
.dv-villa-collections-links { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.7; margin: 0; }
.dv-villa-collections-links a { color: var(--dark, #1c1c1c); text-decoration: none; border-bottom: 1px solid var(--gold, #C8A898); }
.dv-villa-collections-links a:hover { color: var(--gold-text, #8a6f5f); }
.dv-villa-collections-links span { color: var(--gold, #C8A898); }
/* Reviews: stylized pull-quotes */
.dv-reviews { margin-bottom: 56px; }
.dv-reviews h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; margin-bottom: 10px; }
.dv-reviews-summary { font-size: 13px; line-height: 1.7; color: var(--warm-gray-text, #635a51); margin: 0 0 28px; }
.dv-review { position: relative; margin: 0 0 24px; padding: 40px 36px 28px 64px; background: var(--cream, #f9f6f1); border-left: 2px solid var(--gold, #C8A898); }
.dv-review::before { content: "\201C"; position: absolute; left: 18px; top: 4px; font-family: 'Cormorant Garamond', serif; font-size: 88px; line-height: 1; color: var(--gold, #C8A898); opacity: .7; }
.dv-review-stars { color: var(--gold, #C8A898); font-size: 12px; letter-spacing: 4px; margin-bottom: 12px; }
.dv-review-text { margin: 0 0 18px; padding: 0; border: 0; }
.dv-review-text p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; line-height: 1.7; color: var(--dark, #1c1c1c); margin: 0; }
.dv-review-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--warm-gray-text, #635a51); }
.dv-review-author cite { font-style: normal; color: var(--dark, #1c1c1c); }
.dv-review-author span { color: var(--gold-text, #8a6f5f); }
.dv-review-source { margin-left: auto; color: var(--warm-gray-text, #635a51); text-decoration: none; border-bottom: 1px solid var(--light-border, #e0d9d0); }
.dv-review-source:hover { color: var(--dark, #1c1c1c); border-color: currentColor; }
@media (max-width: 720px) {
.dv-review { padding: 36px 20px 22px 44px; }
.dv-review::before { left: 10px; font-size: 64px; }
.dv-review-text p { font-size: 17px; }
.dv-review-source { margin-left: 0; }
}
/* Map — full viewport width. Rendered OUTSIDE the 2-col villa wrap so it
spans edge-to-edge with the location card floating on top of it. */
.dv-villa-map {
position: relative;
width: 100%;
height: 560px;
overflow: hidden;
margin: 0 0 56px;
}
.dv-map-bg { position: absolute; inset: 0; }
.dv-map-bg img,
.dv-map-bg iframe {
width: 100%; height: 100%; object-fit: cover;
border: none; display: block;
}
.dv-map-card {
/* Floating box overlaid on the top-left corner of the (full-bleed) map. */
position: absolute; top: 48px; left: 48px;
width: 380px; max-width: calc(100% - 96px);
background: #fff;
padding: 32px 32px 28px;
box-shadow: 0 12px 30px rgba(0,0,0,0.10);
z-index: 2;
}
.dv-map-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 32px; font-weight: 400; line-height: 1.1;
color: var(--dark); margin: 0 0 14px;
}
.dv-map-card-desc {
font-size: 13px; line-height: 1.7; color: var(--dark);
margin: 0 0 22px;
}
.dv-map-card-note {
font-size: 11px; line-height: 1.6; color: var(--warm-gray-text, #635a51);
margin: -12px 0 20px;
}
.dv-map-card-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dv-map-card-btn {
width: 100%; height: 50px; padding: 0 18px;
background: var(--dark); color: #fff; border: none;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
cursor: pointer; transition: background 0.15s ease;
}
.dv-map-card-btn:hover { background: var(--gold); }
/* Nearby & Surroundings slide-in modal */
.dv-nearby-modal {
position: fixed; inset: 0; z-index: 999;
background: rgba(0,0,0,0);
pointer-events: none;
transition: background 0.3s ease;
}
.dv-nearby-modal[aria-hidden="false"] {
background: rgba(0,0,0,0.30);
pointer-events: auto;
}
.dv-nearby-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: 72%; max-width: 980px;
background: #fff;
padding: 52px 60px 48px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.35s ease;
}
.dv-nearby-modal[aria-hidden="false"] .dv-nearby-panel { transform: translateX(0); }
.dv-nearby-close {
position: absolute; top: 28px; right: 40px;
background: none; border: none; cursor: pointer;
width: 32px; height: 32px;
font-size: 28px; line-height: 1; color: var(--dark);
display: flex; align-items: center; justify-content: center;
}
.dv-nearby-title {
font-family: 'Cormorant Garamond', serif;
font-size: 38px; font-weight: 400; line-height: 1.1;
color: var(--dark); margin: 0 0 30px;
}
.dv-nearby-group { margin-bottom: 22px; }
.dv-nearby-group:last-child { margin-bottom: 0; }
.dv-nearby-cat {
font-size: 14px; color: var(--dark); font-weight: 400;
margin-bottom: 6px;
}
.dv-nearby-item {
font-size: 14px; line-height: 1.7; color: var(--dark);
font-weight: 300;
}
@media (max-width: 768px) {
.dv-villa-map { height: 420px; }
.dv-map-card {
top: 24px; left: 16px; right: 16px;
width: auto; max-width: none; padding: 22px 20px 20px;
}
.dv-map-card-title { font-size: 26px; }
.dv-nearby-panel { width: 100%; max-width: none; padding: 40px 24px 32px; }
.dv-nearby-close { top: 18px; right: 18px; }
.dv-nearby-title { font-size: 28px; margin-bottom: 22px; }
}
/* Amenities */
.dv-amenities { margin-bottom: 48px; }
.dv-amenities h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; margin-bottom: 24px; }
.dv-amenities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dv-amenity {
padding: 12px 16px; border: 1px solid var(--light-border);
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--warm-gray-text, #635a51); text-align: center;
padding: 14px 16px; border: 1px solid var(--light-border);
font-size: 12px; letter-spacing: 0.5px;
}
.dv-amenity-icon { font-size: 18px; }
/* Photo grid */
.dv-photo-grid { margin-bottom: 48px; }
.dv-photo-grid h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; margin-bottom: 24px; }
.dv-photo-grid-inner {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dv-photo-grid-item { aspect-ratio: 4/3; overflow: hidden; cursor: pointer; }
.dv-photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; }
.dv-photo-grid-item:hover img { transform: scale(1.06); }
.dv-photo-grid-item.is-hidden { display: none; }
.dv-photo-grid.is-expanded .dv-photo-grid-item.is-hidden { display: block; }
.dv-photo-more-wrap { text-align: center; margin-top: 32px; }
.dv-photo-more {
display: inline-block;
padding: 14px 30px;
background: transparent; color: var(--dark);
border: 1px solid var(--dark);
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
font-weight: 600; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.dv-photo-more:hover { background: var(--dark); color: #fff; }
/* Villa Information Accordion */
.dv-acc {
margin: 8px 0 48px;
background: var(--cream);
padding: 4px 32px;
}
.dv-acc-item { border-top: 1px solid var(--light-border); }
.dv-acc-item:first-child { border-top: none; }
.dv-acc-trigger {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 26px 0;
background: none; border: none; cursor: pointer;
text-align: left; font-family: 'Montserrat', sans-serif;
}
.dv-acc-title {
font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
color: var(--dark); font-weight: 500;
}
.dv-acc-chev {
width: 16px; height: 16px; color: var(--dark);
transition: transform 0.3s ease; flex-shrink: 0;
}
.dv-acc-item.open .dv-acc-chev { transform: rotate(180deg); }
.dv-acc-content {
display: none; padding: 2px 0 28px;
}
.dv-acc-item.open .dv-acc-content { display: block; }
.dv-acc-content p {
font-size: 14px; line-height: 1.85; color: var(--dark);
margin: 0 0 6px;
}
.dv-acc-content p:last-child { margin-bottom: 0; }
.dv-villa-acc-sub {
font-family: 'Montserrat', sans-serif;
font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
color: var(--gold); margin: 24px 0 10px;
}
.dv-villa-acc-sub:first-child { margin-top: 0; }
@media (max-width: 768px) {
.dv-acc { padding: 4px 20px; margin: 8px 0 36px; }
.dv-acc-trigger { padding: 22px 0; }
.dv-acc-title { font-size: 11px; letter-spacing: 2.5px; }
.dv-acc-content p { font-size: 13px; }
}
/* Availability */
.dv-availability { margin-bottom: 48px; }
.dv-availability h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.dv-availability-note { font-size: 12px; color: var(--warm-gray-text, #635a51); margin-bottom: 24px; }
/* Multi-month visual availability grid (read-only) */
.dv-avail-legend {
display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px;
font-size: 11px; color: var(--dark);
}
.dv-avail-legend span {
display: inline-flex; align-items: center; gap: 6px;
}
.dv-avail-legend i {
width: 14px; height: 14px; display: inline-block; border: 1px solid rgba(0,0,0,0.08);
}
.dv-avail-legend i.lg-avail { background: rgba(150,172,140,0.30); }
.dv-avail-legend i.lg-booked { background: rgba(201,142,132,0.32); }
.dv-avail-legend i.lg-change { background: linear-gradient(135deg, rgba(201,142,132,0.32) 0 50%, rgba(150,172,140,0.30) 50% 100%); }
.dv-avail-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dv-avail-month { border: 1px solid var(--light-border); padding: 10px 10px 12px; background: #fff; }
.dv-avail-month h3 {
font-family: 'Montserrat', sans-serif;
font-size: 13px; font-weight: 500; color: var(--dark);
text-align: center; margin: 4px 0 10px;
}
.dv-avail-wk {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.dv-avail-wk div {
font-size: 9px; color: var(--warm-gray-text, #635a51); text-align: center; padding: 2px 0;
}
.dv-avail-days {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.dv-avail-days > div {
aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
font-size: 10.5px; color: var(--dark);
background: transparent;
}
.dv-avail-days > div.past { color: rgba(0,0,0,0.20); }
.dv-avail-days > div.avail { background: rgba(150,172,140,0.30); }
.dv-avail-days > div.booked { background: rgba(201,142,132,0.32); color: rgba(0,0,0,0.55); }
.dv-avail-days > div.change-out {
background: linear-gradient(135deg, rgba(201,142,132,0.32) 0 50%, rgba(150,172,140,0.30) 50% 100%);
}
.dv-avail-days > div.change-in {
background: linear-gradient(135deg, rgba(150,172,140,0.30) 0 50%, rgba(201,142,132,0.32) 50% 100%);
}
@media (max-width: 768px) {
.dv-avail-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* Single-month carousel nav (mobile only). On desktop the full 12-month
grid is shown and the nav is hidden. */
.dv-avail-nav {
display: none;
align-items: center; justify-content: space-between;
margin-bottom: 14px;
padding: 4px 6px;
}
.dv-avail-nav-label {
font-family: 'Montserrat', sans-serif;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: var(--dark); font-weight: 500;
}
.dv-avail-nav-btn {
width: 44px; height: 44px;
background: transparent; border: 1px solid var(--light-border);
color: var(--dark); font-size: 18px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dv-avail-nav-btn:active { background: var(--dark); color: #fff; border-color: var(--dark); }
.dv-avail-nav-btn:disabled { opacity: 0.30; cursor: not-allowed; }
@media (hover: hover) {
.dv-avail-nav-btn:hover:not(:disabled) { background: var(--dark); color: #fff; border-color: var(--dark); }
}
@media (max-width: 480px) {
.dv-avail-grid { grid-template-columns: 1fr; }
/* Show ONE month at a time on phones; user steps through with arrows. */
.dv-avail-grid .dv-avail-month { display: none; }
.dv-avail-grid .dv-avail-month.is-current { display: block; }
/* Hide the per-card month title since the nav label shows it. */
.dv-avail-grid .dv-avail-month h3 { display: none; }
.dv-avail-nav { display: flex; }
}
.dv-calendar-placeholder {
border: 1px solid var(--light-border);
padding: 40px; text-align: center; background: var(--cream);
}
.dv-calendar-placeholder p { font-size: 13px; color: var(--warm-gray-text, #635a51); margin-bottom: 16px; }
.dv-calendar-placeholder a {
display: inline-block; background: var(--dark); color: #fff;
padding: 12px 28px; font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; text-decoration: none;
}
.dv-calendar-placeholder a:hover { background: var(--gold); }
/* ─── RIGHT COLUMN — STICKY INQUIRY (minimal card) ─── */
.dv-inquiry-sidebar { position: sticky; top: 162px; height: fit-content; }
.dv-inquiry-card {
background: var(--cream);
border: 1px solid var(--light-border);
padding: 28px 28px 24px;
}
.dv-inq-eyebrow {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 18px;
}
.dv-inq-heading {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: 22px; line-height: 1.15;
color: var(--dark); margin: 0;
}
.dv-inq-heart {
background: none; border: none; cursor: pointer; padding: 2px;
color: var(--dark); flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.dv-inq-heart svg {
width: 22px; height: 22px;
fill: none; stroke: currentColor; stroke-width: 1.5;
}
.dv-inq-heart.saved svg { fill: var(--gold); stroke: var(--gold); }
.dv-field { display: flex; flex-direction: column; gap: 6px; }
.dv-field label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark); }
/* Price + deposit — refined, in line with site typography */
.dv-inq-price { margin-top: 24px; }
.dv-inq-price-eyebrow {
display: block;
font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--warm-gray-text, #635a51); font-weight: 500; margin-bottom: 4px;
}
.dv-inq-price-line {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.dv-inq-price-amount {
font-family: 'Cormorant Garamond', serif;
font-size: 26px; font-weight: 400; color: var(--dark);
line-height: 1;
}
.dv-inq-price-label {
font-size: 12px; color: var(--warm-gray-text, #635a51); font-weight: 300;
}
.dv-inq-price-rates {
margin-top: 20px;
font-family: 'Cormorant Garamond', serif;
font-size: 20px; color: var(--dark); font-weight: 400;
}
.dv-inq-deposit {
margin: 12px 0 0;
font-size: 11px; color: var(--warm-gray-text, #635a51); font-weight: 300;
letter-spacing: 0.3px;
}
.dv-inq-deposit strong {
font-family: 'Cormorant Garamond', serif;
font-size: 14px; font-weight: 400; color: var(--dark);
letter-spacing: 0; margin-left: 4px;
}
.dv-inquiry-submit {
margin-top: 14px;
background: var(--dark); color: #fff; border: none;
padding: 18px; font-family: 'Montserrat', sans-serif;
font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
cursor: pointer; width: 100%; transition: background 0.2s;
}
.dv-inquiry-submit:hover { background: var(--gold); }
/* quiet, truthful interest line above Inquire (inc/villa-signals.php) */
.dv-signal {
display: flex; align-items: center; gap: 8px;
margin: 18px 0 0;
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 15px; line-height: 1.35; color: var(--warm-gray-text, #635a51);
animation: dvSignalIn .6s ease both;
}
.dv-signal[hidden] { display: none; }
/* phones: same line inside the bottom Inquire bar, under the price */
.dv-signal-bar { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-signal-bar[hidden] { display: none; }
.dv-signal svg { flex: none; width: 13px; height: 13px; fill: var(--gold, #b08d57); opacity: .85; }
@keyframes dvSignalIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* ─── MOBILE FLOATING INQUIRE BAR ───────────────────────────────────────
* Hidden on desktop. On screens ≤ 960px it pins to the bottom of the
* viewport so the Inquire CTA is always visible while the visitor scrolls.
* Tapping the button opens the existing #dvEnqModal.
*/
.dv-mobile-inquire-bar {
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
background: #fff;
border-top: 1px solid var(--light-border);
box-shadow: 0 -10px 24px rgba(0,0,0,0.10);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 16px;
font-family: 'Montserrat', sans-serif;
}
@media (min-width: 961px) {
.dv-mobile-inquire-bar { display: none !important; }
}
@media (max-width: 960px) {
.dv-mobile-inquire-bar { display: flex; }
/* Add bottom padding to the page so the bar doesn't overlap content */
body.dv-has-mobile-inquire { padding-bottom: 100px; }
}
.dv-mobile-inquire-from { flex: 1; min-width: 0; }
.dv-mobile-inquire-from-eyebrow {
display: block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
color: var(--warm-gray-text, #635a51); font-weight: 600; margin-bottom: 2px;
}
.dv-mobile-inquire-from-amount {
font-family: 'Cormorant Garamond', serif; font-weight: 500;
font-size: 18px; color: var(--dark);
}
.dv-mobile-inquire-from-amount small {
font-size: 11px; font-weight: 400; color: var(--warm-gray-text, #635a51);
letter-spacing: 0.5px; margin-left: 2px;
}
.dv-mobile-inquire-btn {
background: var(--dark); color: #fff; border: none;
padding: 14px 24px; font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
cursor: pointer; flex-shrink: 0; min-height: 44px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background 0.15s ease;
}
.dv-mobile-inquire-btn:active { background: #000; }
@media (hover: hover) {
.dv-mobile-inquire-btn:hover { background: var(--gold); }
}
/* Inquiry-form Dates field (Saturday-only weekly calendar, mirrors home widget) */
.dv-inq-dates { position: relative; }
.dv-inq-no-ical {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 300;
font-size: 14px; line-height: 1.55;
color: var(--warm-gray-text, #635a51);
margin: 0; padding: 12px 14px;
background: rgba(200,168,152,0.08);
border-left: 2px solid var(--gold);
}
.dv-inq-dates-trigger {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 12px 14px;
border: 1px solid var(--light-border);
background: #faf9f7; cursor: pointer; text-align: left;
font-family: 'Montserrat', sans-serif; font-size: 12px;
color: var(--warm-gray-text, #635a51);
transition: border-color 0.15s ease;
}
.dv-inq-dates-trigger.has-value { color: var(--dark); }
.dv-inq-dates.open .dv-inq-dates-trigger { border-color: var(--gold); }
.dv-inq-dates-trigger svg.chev {
width: 11px; height: 11px; color: var(--dark);
flex-shrink: 0; margin-left: 10px;
transition: transform 0.25s ease;
}
.dv-inq-dates.open .dv-inq-dates-trigger svg.chev { transform: rotate(180deg); }
.dv-inq-cal-panel {
display: none;
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff;
border: 1px solid var(--light-border);
box-shadow: 0 22px 40px rgba(0,0,0,0.15);
z-index: 60;
}
.dv-inq-dates.open .dv-inq-cal-panel { display: block; }
/* Calendar (day view) */
.dv-inq-cal { padding: 12px 14px 4px; }
.dv-inq-cal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.dv-inq-cal-title {
background: none; border: none; padding: 0; cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--dark); font-weight: 500;
transition: color 0.15s ease;
}
.dv-inq-cal-title:hover { color: var(--gold); }
.dv-inq-cal-nav {
background: none; border: none; cursor: pointer;
width: 26px; height: 26px; font-size: 16px; color: var(--dark);
display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1;
}
.dv-inq-cal-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dv-inq-cal-weekdays div {
text-align: center; font-size: 9px; letter-spacing: 1px;
color: var(--warm-gray-text, #635a51); padding: 4px 0;
}
.dv-inq-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dv-inq-cal-grid button {
background: transparent; border: none;
height: 30px; font-size: 11px; color: var(--dark);
cursor: default;
display: flex; align-items: center; justify-content: center;
padding: 0;
}
.dv-inq-cal-grid button.muted { color: rgba(0,0,0,0.15); }
/* availability fills */
.dv-inq-cal-grid button.avail { background: rgba(150,172,140,0.30); }
.dv-inq-cal-grid button.booked { background: rgba(201,142,132,0.32); color: rgba(0,0,0,0.45); }
/* Saturday changeover days: split AM / PM */
.dv-inq-cal-grid button.change-out { /* AM booked (pink) → PM free (green): a valid check-in */
background: linear-gradient(135deg, rgba(201,142,132,0.32) 0 50%, rgba(150,172,140,0.30) 50% 100%);
}
.dv-inq-cal-grid button.change-in { /* AM free (green) → PM booked (pink): not a check-in */
background: linear-gradient(135deg, rgba(150,172,140,0.30) 0 50%, rgba(201,142,132,0.32) 50% 100%);
color: rgba(0,0,0,0.45);
}
/* clickable Saturdays */
.dv-inq-cal-grid button.pick { cursor: pointer; }
.dv-inq-cal-grid button.pick:hover { box-shadow: inset 0 0 0 2px var(--dark); }
/* selected stay overrides availability colour */
.dv-inq-cal-grid button.range { background: rgba(200,168,152,0.55); color: var(--dark); }
.dv-inq-cal-grid button.selected { background: var(--dark); color: #fff; }
.dv-inq-cal-help {
font-size: 10px; letter-spacing: 0.3px;
color: var(--warm-gray-text, #635a51); text-align: center;
padding: 8px 12px 4px; font-weight: 400;
}
.dv-inq-cal-help.has-range { color: var(--dark); font-weight: 500; }
/* Year picker */
.dv-inq-cal-yearview { display: none; padding: 12px 14px 6px; }
.dv-inq-cal-panel.year-view .dv-inq-cal { display: none; }
.dv-inq-cal-panel.year-view .dv-inq-cal-help { display: none; }
.dv-inq-cal-panel.year-view .dv-inq-cal-yearview { display: block; }
.dv-inq-cal-year-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.dv-inq-cal-year-label {
background: none; border: none; cursor: pointer; padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 12px; letter-spacing: 1.5px; font-weight: 500; color: var(--dark);
}
.dv-inq-cal-year-nav {
background: none; border: none; cursor: pointer;
width: 26px; height: 26px; font-size: 16px; color: var(--dark);
display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1;
}
.dv-inq-cal-year-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.dv-inq-cal-month-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
padding-bottom: 4px;
}
.dv-inq-cal-month-grid button {
background: transparent; border: none;
padding: 10px 0; font-size: 12px; color: var(--dark);
cursor: pointer; font-family: 'Montserrat', sans-serif;
border-radius: 4px;
}
.dv-inq-cal-month-grid button:hover:not(:disabled) { background: rgba(200,168,152,0.14); }
.dv-inq-cal-month-grid button.muted { color: rgba(0,0,0,0.22); cursor: not-allowed; }
.dv-inq-cal-month-grid button.current { color: var(--gold); font-weight: 500; }
/* Panel footer */
.dv-inq-cal-footer {
display: flex; gap: 8px; padding: 10px 14px 12px;
border-top: 1px solid var(--light-border);
}
.dv-inq-cal-footer button {
flex: 1; height: 36px; padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
}
.dv-inq-cal-clear {
background: transparent; border: 1px solid var(--light-border);
color: var(--dark);
}
.dv-inq-cal-apply {
background: var(--dark); border: none; color: #fff;
transition: background 0.15s ease;
}
.dv-inq-cal-apply:hover { background: var(--gold); }
/* ─── ENQUIRE-TO-BOOK MODAL ─── */
.dv-enq-modal {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0); pointer-events: none;
transition: background 0.3s ease;
display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto;
padding: 5vh 24px;
}
.dv-enq-modal[aria-hidden="false"] {
background: rgba(0,0,0,0.40);
pointer-events: auto;
}
.dv-enq-modal-inner {
background: var(--cream);
width: 100%; max-width: 1100px;
padding: 36px 44px 44px;
opacity: 0; transform: translateY(-16px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dv-enq-modal[aria-hidden="false"] .dv-enq-modal-inner {
opacity: 1; transform: translateY(0);
}
.dv-enq-top {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 28px;
}
.dv-enq-title {
font-family: 'Cormorant Garamond', serif;
font-size: 34px; font-weight: 400; color: var(--dark);
margin: 0; line-height: 1.1;
}
.dv-enq-close {
background: none; border: none; cursor: pointer; padding: 0 0 2px;
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--dark); font-weight: 500;
border-bottom: 1px solid var(--dark);
}
.dv-enq-close::before { content: '×'; font-size: 20px; line-height: 0.7; font-weight: 300; }
.dv-enq-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.dv-enq-pref h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-weight: 400; color: var(--dark);
margin: 0 0 18px;
}
.dv-enq-villa {
font-family: 'Cormorant Garamond', serif;
font-size: 20px; font-weight: 500; color: var(--dark);
margin: 0 0 16px;
}
/* Simple mode: hide check-in / check-out / Saturday-Saturday note. Used by
the mobile floating Inquire button — visitor inquires without picking
dates first; the advisor handles dates over email. */
.dv-enq-modal--simple #dvEnqCheckin,
.dv-enq-modal--simple #dvEnqCheckout,
.dv-enq-modal--simple .dv-enq-row:has(#dvEnqCheckin),
.dv-enq-modal--simple .dv-enq-row:has(#dvEnqCheckout),
.dv-enq-modal--simple .dv-enq-note {
display: none !important;
}
.dv-enq-row {
font-size: 14px; line-height: 1.7; color: var(--dark);
margin: 0 0 8px;
}
.dv-enq-row strong { font-weight: 600; }
.dv-enq-note {
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 15px; color: var(--dark); line-height: 1.55;
margin: 24px 0 0; padding-top: 22px;
border-top: 1px solid var(--light-border);
}
.dv-enq-form { display: flex; flex-direction: column; gap: 22px; }
.dv-enq-field { display: flex; flex-direction: column; gap: 6px; }
.dv-enq-field > label {
font-family: 'Cormorant Garamond', serif;
font-size: 18px; font-weight: 400; color: var(--dark);
}
.dv-enq-field input,
.dv-enq-field textarea {
border: none;
border-bottom: 1px solid var(--light-border);
background: transparent;
padding: 6px 0 8px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; color: var(--dark);
outline: none; width: 100%;
}
.dv-enq-field input:focus,
.dv-enq-field textarea:focus { border-bottom-color: var(--gold); }
.dv-enq-field textarea {
resize: vertical; min-height: 80px; line-height: 1.5;
}
.dv-enq-field textarea::placeholder,
.dv-enq-field input::placeholder { color: var(--warm-gray-text, #635a51); }
.dv-enq-name-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.dv-enq-name-row > div { display: flex; flex-direction: column; }
.dv-enq-sub {
font-size: 12px; color: var(--warm-gray-text, #635a51); margin-top: 4px;
}
.dv-enq-newsletter {
display: flex; align-items: flex-start; gap: 10px;
font-size: 12px; color: var(--dark); line-height: 1.5;
cursor: pointer;
}
.dv-enq-newsletter input[type="checkbox"] {
flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0;
accent-color: var(--dark);
}
.dv-enq-actions {
display: flex; justify-content: center; margin-top: 6px;
}
.dv-enq-submit {
background: var(--dark); color: #fff; border: none;
padding: 12px 42px;
font-family: 'Montserrat', sans-serif;
font-size: 14px; cursor: pointer;
transition: background 0.15s ease;
}
.dv-enq-submit:hover { background: var(--gold); }
.dv-enq-error {
display: none; text-align: center; margin: 14px 0 0;
font-family: 'Montserrat', sans-serif;
font-size: 13px; color: #a3402f; line-height: 1.5;
}
.dv-enq-error.show { display: block; }
.dv-enq-submit[disabled] { opacity: 0.6; cursor: default; }
.dv-enq-success {
display: none; padding: 52px 24px 44px; text-align: center;
max-width: 520px; margin: 0 auto;
}
.dv-enq-success.show { display: block; }
.dv-enq-success-mark {
width: 66px; height: 66px; margin: 0 auto 26px;
border-radius: 50%; background: var(--gold);
display: flex; align-items: center; justify-content: center;
transform: scale(0.6); opacity: 0;
}
.dv-enq-success.show .dv-enq-success-mark {
animation: dvEnqPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}
@keyframes dvEnqPop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.dv-enq-success-mark svg { width: 32px; height: 32px; display: block; }
.dv-enq-success-mark svg path {
fill: none; stroke: #fff; stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 30; stroke-dashoffset: 30;
}
.dv-enq-success.show .dv-enq-success-mark svg path {
animation: dvEnqCheck 0.4s ease 0.35s forwards;
}
@keyframes dvEnqCheck { to { stroke-dashoffset: 0; } }
.dv-enq-success h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 32px; font-weight: 400; color: var(--dark);
margin: 0 0 12px; line-height: 1.15;
}
.dv-enq-success-lead {
font-family: 'Montserrat', sans-serif;
font-size: 15px; color: var(--dark); line-height: 1.6; margin: 0 0 20px;
}
.dv-enq-success-detail {
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 19px; color: var(--dark); line-height: 1.4;
margin: 0 auto 20px; padding: 16px 0; max-width: 380px;
border-top: 1px solid var(--light-border);
border-bottom: 1px solid var(--light-border);
}
.dv-enq-success-detail:empty { display: none; }
.dv-enq-success-reply {
font-family: 'Montserrat', sans-serif;
font-size: 13px; color: var(--warm-gray-text, #635a51); line-height: 1.6; margin: 0 0 30px;
}
.dv-enq-success-close {
background: none; border: 1px solid var(--dark); color: var(--dark);
padding: 12px 36px;
font-family: 'Montserrat', sans-serif;
font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.dv-enq-success-close:hover { background: var(--dark); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.dv-enq-success.show .dv-enq-success-mark,
.dv-enq-success.show .dv-enq-success-mark svg path {
animation: none;
}
.dv-enq-success.show .dv-enq-success-mark { transform: scale(1); opacity: 1; }
.dv-enq-success.show .dv-enq-success-mark svg path { stroke-dashoffset: 0; }
}
@media (max-width: 768px) {
.dv-enq-modal { padding: 3vh 14px; }
.dv-enq-modal-inner { padding: 24px 20px 30px; }
.dv-enq-title { font-size: 26px; }
.dv-enq-body { grid-template-columns: 1fr; gap: 28px; }
.dv-enq-name-row { grid-template-columns: 1fr; gap: 16px; }
}
/* SIMPLE MODE on mobile: collapse the modal so it fits in the viewport
without scrolling. Smaller heading, tighter spacing, side-by-side first +
last name (so the form is 4 visible fields instead of 5), checkbox text
trimmed to one line. */
@media (max-width: 768px) {
.dv-enq-modal--simple { padding: 2vh 12px; align-items: flex-start; }
.dv-enq-modal--simple .dv-enq-modal-inner { padding: 18px 18px 22px; max-height: 96vh; overflow-y: auto; }
.dv-enq-modal--simple .dv-enq-top { margin-bottom: 14px; }
.dv-enq-modal--simple .dv-enq-title { font-size: 22px; }
.dv-enq-modal--simple .dv-enq-body { gap: 14px; }
.dv-enq-modal--simple .dv-enq-pref h3 { font-size: 16px; margin: 0 0 6px; letter-spacing: 1px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 500; color: var(--warm-gray-text, #635a51); }
.dv-enq-modal--simple .dv-enq-villa { font-size: 18px; margin: 0 0 4px; }
.dv-enq-modal--simple .dv-enq-row { font-size: 12px; margin: 0; color: var(--warm-gray-text, #635a51); }
/* Compact the form */
.dv-enq-modal--simple .dv-enq-field { margin-bottom: 10px; }
.dv-enq-modal--simple .dv-enq-field label { font-size: 11px; margin-bottom: 4px; }
.dv-enq-modal--simple .dv-enq-field input,
.dv-enq-modal--simple .dv-enq-field textarea { padding: 10px 12px; font-size: 14px; }
.dv-enq-modal--simple .dv-enq-field textarea { rows: 3; min-height: 70px; }
.dv-enq-modal--simple .dv-enq-name-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.dv-enq-modal--simple .dv-enq-sub { display: none; } /* hide "First Name" / "Last Name" sub-labels — main label covers it */
.dv-enq-modal--simple .dv-enq-newsletter { margin: 8px 0; font-size: 11px; line-height: 1.35; gap: 8px; }
.dv-enq-modal--simple .dv-enq-newsletter span { font-size: 11px; line-height: 1.35; }
.dv-enq-modal--simple .dv-enq-actions { margin-top: 12px; }
.dv-enq-modal--simple .dv-enq-submit { padding: 14px; font-size: 12px; }
}
/* ─── FOOTER ─── */
.dv-footer { background: #111; color: rgba(255,255,255,0.7); padding: 64px 48px 32px; }
.dv-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto 48px; }
.dv-footer-col h4 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.dv-footer-col p { font-size: 12px; line-height: 1.8; margin-bottom: 12px; }
.dv-footer-col ul { list-style: none; padding: 0; margin: 0; }
.dv-footer-col ul li { margin-bottom: 10px; }
.dv-footer-col ul li a { text-decoration: none; color: rgba(255,255,255,0.6); font-size: 12px; }
.dv-footer-col ul li a:hover { color: var(--gold); }
.dv-footer-bottom {
max-width: 1100px; margin: 0 auto; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: rgba(255,255,255,0.35);
}
.dv-social-links { display: flex; gap: 16px; }
.dv-social-links a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.dv-social-links a:hover { color: var(--gold); }
/* ─── SHORTLIST nav heart + dropdown panel ─── */
.dv-nav-right {
display: flex; align-items: center; gap: 18px;
}
.dv-shortlist-wrap { position: relative; display: flex; align-items: center; }
.dv-shortlist-trigger {
position: relative; background: none; border: none; cursor: pointer;
padding: 4px; color: var(--dark);
display: inline-flex; align-items: center; justify-content: center;
}
.dv-shortlist-trigger svg {
width: 22px; height: 22px;
fill: none; stroke: currentColor; stroke-width: 1.5;
}
.dv-shortlist-trigger.has-items svg { fill: var(--gold); stroke: var(--gold); }
.dv-shortlist-count {
position: absolute; top: -2px; right: -4px;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: var(--gold); color: #fff;
font-size: 10px; line-height: 16px; font-weight: 600;
text-align: center; letter-spacing: 0;
display: none;
}
.dv-shortlist-trigger.has-items .dv-shortlist-count { display: block; }
.dv-shortlist-panel {
position: absolute; top: calc(100% + 14px); right: 0;
width: 380px; max-width: 92vw;
background: #fff;
border: 1px solid var(--light-border);
border-bottom: 3px solid var(--gold);
box-shadow: 0 22px 50px rgba(0,0,0,0.18);
z-index: 99;
}
.dv-shortlist-panel[hidden] { display: none; }
.dv-shortlist-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px; border-bottom: 1px solid var(--light-border);
}
.dv-shortlist-title {
font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--dark); font-weight: 500;
}
.dv-shortlist-close {
background: none; border: none; cursor: pointer; padding: 0;
width: 24px; height: 24px; color: var(--dark);
display: flex; align-items: center; justify-content: center;
font-size: 22px; line-height: 1;
}
.dv-shortlist-list { max-height: 60vh; overflow-y: auto; }
.dv-shortlist-empty {
padding: 36px 28px; text-align: center;
color: var(--warm-gray-text, #635a51); font-size: 13px; line-height: 1.6;
}
.dv-shortlist-empty p + p { margin-top: 6px; font-size: 12px; }
.dv-shortlist-card {
display: grid; grid-template-columns: 88px 1fr 24px;
gap: 14px; align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--light-border);
}
.dv-shortlist-card:last-child { border-bottom: none; }
.dv-shortlist-card-image { display: block; width: 88px; height: 68px; overflow: hidden; }
.dv-shortlist-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-shortlist-card-body { min-width: 0; }
.dv-shortlist-card-location {
font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
color: var(--warm-gray-text, #635a51); font-weight: 500; margin-bottom: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-shortlist-card-title {
display: block; font-family: 'Cormorant Garamond', serif;
font-size: 19px; line-height: 1.15; font-weight: 400;
color: var(--dark); text-decoration: none; margin-bottom: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-shortlist-card-title:hover { color: var(--gold); }
.dv-shortlist-card-specs {
font-size: 10px; letter-spacing: 0.5px;
color: var(--warm-gray-text, #635a51); font-weight: 400;
display: flex; flex-wrap: wrap; gap: 6px;
}
.dv-shortlist-card-specs span.sep { color: var(--light-border); }
.dv-shortlist-card-remove {
background: none; border: none; cursor: pointer; padding: 4px;
color: var(--warm-gray-text, #635a51); transition: color 0.15s ease;
display: flex; align-items: center; justify-content: center;
}
.dv-shortlist-card-remove:hover { color: var(--dark); }
.dv-shortlist-card-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dv-shortlist-footer {
display: flex; gap: 10px; padding: 14px 18px 16px;
border-top: 1px solid var(--light-border);
}
.dv-shortlist-footer button {
flex: 1; height: 44px; padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
cursor: pointer;
}
.dv-shortlist-add { background: #fff; border: 1px solid var(--dark); color: var(--dark); }
.dv-shortlist-add:hover { background: var(--cream); }
.dv-shortlist-send { background: var(--dark); border: none; color: #fff; transition: background 0.15s ease; }
.dv-shortlist-send:hover { background: var(--gold); }
.dv-shortlist-send:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 480px) {
.dv-shortlist-panel { width: 94vw; right: -8px; }
.dv-shortlist-card { grid-template-columns: 72px 1fr 22px; gap: 12px; padding: 12px 16px; }
.dv-shortlist-card-image { width: 72px; height: 56px; }
.dv-shortlist-card-title { font-size: 17px; }
}
/* WordPress admin bar offset (logged-in only) */
.admin-bar .top-bar { top: 32px; }
.admin-bar .dv-nav { top: 66px; }
.admin-bar .dv-villa-hero { margin-top: 174px; }
.admin-bar .dv-inquiry-sidebar { top: 194px; }
/* ─── BREADCRUMB (overlaid on hero, white) ─── */
.dv-breadcrumb {
position: absolute; top: 20px; left: 24px; right: 24px; z-index: 3;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 11px; letter-spacing: 1px;
color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.dv-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color 0.2s; }
.dv-breadcrumb a:hover { color: #fff; }
.dv-breadcrumb span.sep { opacity: 0.6; }
.dv-breadcrumb span.current { color: #fff; font-weight: 500; }
/* ─── IMPROVED LIGHTBOX ─── */
.dv-lightbox {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.95); z-index: 9998;
flex-direction: column; align-items: center; justify-content: center;
}
.dv-lightbox.active { display: flex; }
.dv-lightbox-top {
position: absolute; top: 0; left: 0; right: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 32px;
}
.dv-lightbox-counter {
color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 2px;
}
.dv-lightbox-close {
background: rgba(255,255,255,0.10); border: none; color: #fff;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; line-height: 1; cursor: pointer;
transition: background 0.2s ease;
}
.dv-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.dv-lightbox-main {
position: relative; display: flex; align-items: center; justify-content: center;
width: 100%; flex: 1; padding: 60px 80px 20px;
}
/* Stage holds up to 3 photos side-by-side. Each takes 1/3 of the stage on
desktop; on tablet it falls back to 2-up; on phone to 1-up. */
.dv-lightbox-stage {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
width: 100%; max-height: 65vh;
}
.dv-lightbox-stage img {
width: 100%; height: 65vh; object-fit: contain; display: block;
transition: opacity 0.2s;
}
.dv-lightbox-stage img[src=""],
.dv-lightbox-stage img:not([src]) { display: none; }
@media (max-width: 960px) {
.dv-lightbox-stage { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.dv-lightbox-stage { grid-template-columns: 1fr; }
}
.dv-lightbox-prev, .dv-lightbox-next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.92); border: none; color: var(--dark);
width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; font-size: 26px; cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.dv-lightbox-prev:hover, .dv-lightbox-next:hover { background: var(--dark); color: #fff; transform: translateY(-50%) scale(1.06); }
.dv-lightbox-prev { left: 20px; }
.dv-lightbox-next { right: 20px; }
.dv-lightbox-thumbs {
display: flex; gap: 6px; padding: 16px 32px 28px;
overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.dv-lightbox-thumbs::-webkit-scrollbar { display: none; }
.dv-lightbox-thumb {
flex: 0 0 72px; height: 54px; overflow: hidden; cursor: pointer;
opacity: 0.45; transition: opacity 0.2s; border: 2px solid transparent;
}
.dv-lightbox-thumb.active { opacity: 1; border-color: var(--gold); }
.dv-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ─── TABLET / MOBILE: collapse nav into hamburger ─── */
@media (max-width: 960px) {
.dv-nav-hamburger { display: flex; }
.dv-nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--cream);
border-top: 1px solid var(--light-border);
border-bottom: 3px solid var(--gold);
box-shadow: 0 14px 30px rgba(0,0,0,0.08);
padding: 0; margin: 0; z-index: 99;
max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
}
.dv-nav-links.open {
max-height: 80vh; opacity: 1; padding: 4px 0 18px; pointer-events: auto;
}
.dv-nav-links li { width: 100%; list-style: none; }
.dv-nav-links li + li { border-top: 1px solid var(--light-border); }
.dv-nav-links li:last-child { border-top: none; margin-top: 12px; padding: 0 24px; }
.dv-nav-links a {
display: block; padding: 18px 32px;
font-size: 12px; letter-spacing: 2px; color: var(--dark);
}
.dv-nav-links a:hover { background: rgba(200, 168, 152, 0.10); color: var(--gold); }
.dv-nav-links .dv-nav-cta {
text-align: center; padding: 16px 22px; letter-spacing: 2px;
background: var(--dark) !important; color: #fff !important;
}
.dv-nav-links .dv-nav-cta:hover { background: var(--gold) !important; color: #fff !important; }
}
/* ─── MOBILE ─── */
@media (max-width: 768px) {
.top-bar { font-size: 10px; padding: 0 16px; }
.dv-nav { padding: 12px 20px; }
.dv-nav-logo img { height: 60px; }
.dv-villa-hero { height: 280px; margin-top: var(--dv-nav-clear, 155px); }
.dv-section-nav { top: 120px; justify-content: flex-start; gap: 0; }
.dv-section-nav a { padding: 13px 14px; font-size: 10px; letter-spacing: 1px; }
:is(#overview,#amenities,#gallery,#experiences,#reviews,#location,#availability,#inquire) { scroll-margin-top: 164px; }
.dv-breadcrumb { top: 12px; left: 16px; right: 16px; font-size: 10px; gap: 6px; }
.dv-lightbox-thumbs { padding: 12px 16px 20px; }
.dv-lightbox-thumb { flex: 0 0 56px; height: 42px; }
.dv-lightbox-prev { left: 8px; }
.dv-lightbox-next { right: 8px; }
.dv-villa-wrap {
grid-template-columns: 1fr; gap: 0; padding: 32px 20px;
}
.dv-villa-name { font-size: clamp(28px, 7vw, 42px); }
.dv-villa-stats { flex-wrap: wrap; gap: 20px; }
.dv-stat { min-width: 80px; }
.dv-experiences-grid { grid-template-columns: 1fr; }
.dv-amenities-grid { grid-template-columns: repeat(2, 1fr); }
.dv-photo-grid-inner { grid-template-columns: repeat(2, 1fr); }
.dv-inquiry-sidebar { position: static; margin-top: 48px; }
.dv-footer { padding: 48px 24px 28px; }
.dv-footer-grid { grid-template-columns: 1fr; gap: 32px; }
.dv-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.dv-also-like { padding: 56px 20px; }
.dv-also-like-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ─── ACCESSIBILITY: AA contrast on light backgrounds ─── */
.dv-villa-location,
.dv-experience-type { color: var(--gold-text, #85614f); }
.dv-avail-days > div.booked { color: rgba(0,0,0,0.7); }