/* ========================================================================== Hotel Vijaya Comfort — main stylesheet 1. Tokens 2. Base + utilities 3. Buttons, links, section heads 4. Header + navigation 5. Hero 6. Property cards 7. Amenity strip / stats / why / amenities grid 8. CTA banner / sliders / reviews 9. Masonry, nearby, instagram, FAQ, map 10. Inner page hero, detail layouts, forms, blog, 404 11. Footer + floating WhatsApp + lightbox 12. Responsive + motion preferences ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --hvc-gold: #c8973f; --hvc-gold-soft: #e3bd75; --hvc-gold-deep: #a97a2b; --hvc-ink: #12100c; --hvc-ink-2: #1c1913; --hvc-ink-3: #2a251c; --hvc-cream: #faf8f4; --hvc-cream-2: #f2ede4; --hvc-line: rgba(18, 16, 12, .10); --hvc-line-invert: rgba(255, 255, 255, .12); --hvc-text: #2b2721; --hvc-muted: #7a736a; --hvc-muted-invert: rgba(255, 255, 255, .62); --hvc-radius-sm: 10px; --hvc-radius: 16px; --hvc-radius-lg: 24px; --hvc-radius-pill: 999px; --hvc-shadow-sm: 0 2px 10px rgba(18, 16, 12, .06); --hvc-shadow: 0 14px 40px -18px rgba(18, 16, 12, .28); --hvc-shadow-lg: 0 30px 70px -30px rgba(18, 16, 12, .38); --hvc-serif: "Cormorant Garamond", "Times New Roman", serif; --hvc-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --hvc-ease: cubic-bezier(.22, .61, .36, 1); --hvc-shell: 1240px; --hvc-gutter: clamp(18px, 4vw, 40px); --hvc-header-h: 84px; } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* scroll-behavior intentionally NOT set to smooth here — main.js already performs a custom smooth-scroll (with header-height offset) for in-page anchors. Having both native CSS smooth-scroll and the JS scrollTo running at the same time made the page fight itself on scroll, which showed up as visible stutter on Windows/Chromium (macOS's compositor hid it better). */ html { scroll-behavior: auto; } body.hvc { margin: 0; background: var(--hvc-cream); color: var(--hvc-text); font-family: var(--hvc-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* `hidden` turns into a scroll container, which on Windows/Chromium disables scroll-anchoring and pushes the whole page through an extra compositor layer. `clip` suppresses the same horizontal overflow without that cost — a large part of the "heavy on Windows, fine on Mac" gap. */ overflow-x: hidden; overscroll-behavior-y: none; } @supports (overflow: clip) { body.hvc { overflow-x: clip; } } body.hvc.is-locked { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--hvc-serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .4em; color: var(--hvc-ink); } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--hvc-gold); outline-offset: 3px; border-radius: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .hvc-skip { position: absolute; left: -9999px; z-index: 999; background: var(--hvc-ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--hvc-radius-sm) 0; } .hvc-skip:focus { left: 0; top: 0; } .hvc-container { width: 100%; max-width: var(--hvc-shell); margin-inline: auto; padding-inline: var(--hvc-gutter); } .hvc-section { padding: clamp(56px, 7vw, 96px) 0; } /* Off-screen sections are skipped by layout + paint until they approach the viewport. This is the biggest single scrolling win on long pages: Chromium on Windows was re-rasterising every off-screen blurred/shadowed layer on each frame. `contain-intrinsic-size` reserves plausible height so the scrollbar stays stable and nothing jumps as you scroll. */ @supports (content-visibility: auto) { .hvc-section { content-visibility: auto; contain-intrinsic-size: auto 720px; } .hvc-hero, .hvc-header, .hvc-footer { content-visibility: visible; } } .hvc-section--tight { padding: clamp(32px, 4vw, 52px) 0; } .hvc-section--flush { padding-top: 0; } .hvc-section--light { background: var(--hvc-cream); } .hvc-section--dark { background: var(--hvc-ink); color: rgba(255, 255, 255, .8); } .hvc-section--dark h1, .hvc-section--dark h2, .hvc-section--dark h3 { color: #fff; } .hvc-grid { display: grid; gap: clamp(20px, 2.4vw, 30px); } .hvc-grid--3 { grid-template-columns: repeat(3, 1fr); } .hvc-empty { padding: 48px 0; text-align: center; color: var(--hvc-muted); } .hvc-h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 1.6em; } /* Reveal on scroll */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--hvc-ease), transform .7s var(--hvc-ease); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } /* 3. Buttons, links, heads -------------------------------------------------- */ .hvc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--hvc-radius-sm); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: transform .35s var(--hvc-ease), background-color .3s var(--hvc-ease), color .3s var(--hvc-ease), border-color .3s var(--hvc-ease), box-shadow .35s var(--hvc-ease); } .hvc-btn:hover { transform: translateY(-2px); } .hvc-btn:active { transform: translateY(0); } .hvc-btn--lg { padding: 15px 26px; } .hvc-btn--sm { padding: 9px 14px; font-size: 11px; } .hvc-btn--block { width: 100%; } .hvc-btn--gold { background: linear-gradient(135deg, var(--hvc-gold-soft), var(--hvc-gold)); color: #1a1509; box-shadow: 0 10px 26px -12px rgba(200, 151, 63, .8); } .hvc-btn--gold:hover { box-shadow: 0 16px 34px -12px rgba(200, 151, 63, .9); } .hvc-btn--dark { background: var(--hvc-ink); color: #fff; } .hvc-btn--dark:hover { background: var(--hvc-ink-3); } .hvc-btn--soft { background: #fff; color: var(--hvc-ink); border-color: var(--hvc-line); box-shadow: var(--hvc-shadow-sm); text-transform: none; letter-spacing: 0; font-size: 13px; } .hvc-btn--soft:hover { border-color: var(--hvc-gold); color: var(--hvc-gold-deep); } .hvc-btn--outline { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .5); color: #fff; backdrop-filter: blur(8px); } .hvc-btn--outline:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } .hvc-btn--outline-dark { border-color: var(--hvc-line); color: var(--hvc-ink); text-transform: none; letter-spacing: 0; font-size: 13px; } .hvc-btn--outline-dark:hover { border-color: var(--hvc-ink); } .hvc-btn--glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(10px); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; } .hvc-btn--glass:hover { background: rgba(255, 255, 255, .16); } .hvc-btn--ghost { background: #fff; border-color: var(--hvc-line); color: var(--hvc-ink); box-shadow: var(--hvc-shadow-sm); } .hvc-btn--ghost:hover { border-color: var(--hvc-gold); } .hvc-btn__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hvc-gold); color: #fff; transition: transform .35s var(--hvc-ease); } .hvc-btn:hover .hvc-btn__dot { transform: translateX(3px); } .hvc-btn--dark .hvc-btn__dot { background: var(--hvc-gold); } /* Ripple (JS-driven) */ .hvc-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .38); animation: hvc-ripple .6s var(--hvc-ease) forwards; pointer-events: none; } @keyframes hvc-ripple { to { transform: scale(2.6); opacity: 0; } } .hvc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hvc-gold-deep); letter-spacing: .02em; } .hvc-link svg { transition: transform .3s var(--hvc-ease); } .hvc-link:hover svg { transform: translateX(4px); } .hvc-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hvc-gold-deep); margin-bottom: 10px; } .hvc-eyebrow--script { font-family: var(--hvc-serif); font-style: italic; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--hvc-gold-soft); } .hvc-eyebrow--gold { color: var(--hvc-gold-soft); } .hvc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 44px); } .hvc-head--center { flex-direction: column; align-items: center; text-align: center; } .hvc-head__title { font-size: clamp(30px, 3.6vw, 46px); margin: 0; } .hvc-head__sub { margin: 12px 0 0; color: var(--hvc-muted); max-width: 56ch; } .hvc-head--invert .hvc-head__sub { color: var(--hvc-muted-invert); } .hvc-head--invert .hvc-eyebrow { color: var(--hvc-gold-soft); } /* 4. Header ---------------------------------------------------------------- */ .hvc-header { position: sticky; top: 0; z-index: 60; background: linear-gradient(180deg, rgba(20, 18, 13, .96) 0%, rgba(14, 12, 9, .90) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(200, 151, 63, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 18px 40px -28px rgba(0, 0, 0, .85); transition: background .4s var(--hvc-ease), box-shadow .4s var(--hvc-ease), border-color .4s var(--hvc-ease); /* `will-change: background` was actively harmful: background is not a compositable property, so the hint bought nothing while permanently promoting a full-width blurred layer. Promoting on the transform axis gives the header its own cheap compositor layer instead. */ transform: translateZ(0); } /* Glossy top sheen — a thin light streak across the header for a premium glass feel. */ .hvc-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); pointer-events: none; } body.has-transparent-header .hvc-header { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg, rgba(12, 11, 8, .62) 0%, rgba(12, 11, 8, .30) 65%, transparent 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: transparent; box-shadow: none; } body.has-transparent-header .hvc-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 6, .45), transparent); pointer-events: none; transition: opacity .4s var(--hvc-ease); } .hvc-header.is-stuck, body.has-transparent-header .hvc-header.is-stuck { background: linear-gradient(180deg, rgba(20, 18, 13, .96) 0%, rgba(14, 12, 9, .92) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(200, 151, 63, .28); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 45px -28px rgba(0, 0, 0, .9); } .hvc-header.is-stuck::after { opacity: 0; } .hvc-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--hvc-header-h); } .hvc-brand { display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; z-index: 2; } .hvc-brand__img { width: auto; max-height: var(--hvc-logo-h, 72px); object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); } .hvc-brand__img--dark { display: none; } .hvc-brand__text { font-family: var(--hvc-serif); font-size: clamp(24px, calc(var(--hvc-logo-h, 72px) * .4), 34px); color: #fff; letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } .hvc-nav { margin-left: auto; } .hvc-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .hvc-nav__list li { position: relative; } .hvc-nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; font-family: var(--hvc-nav-font, var(--hvc-sans)); font-size: var(--hvc-nav-size, 13px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .82); transition: color .3s var(--hvc-ease); } .hvc-nav__link::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--hvc-gold); transition: width .35s var(--hvc-ease); } .hvc-nav__list > li:hover > .hvc-nav__link, .hvc-nav__list > li.current-menu-item > .hvc-nav__link { color: #fff; } .hvc-nav__list > li:hover > .hvc-nav__link::after, .hvc-nav__list > li.current-menu-item > .hvc-nav__link::after { width: 100%; } .hvc-nav__toggle { display: none; } .hvc-submenu { position: absolute; top: 100%; left: -14px; min-width: 230px; list-style: none; margin: 0; padding: 10px; background: rgba(22, 20, 15, .92); backdrop-filter: blur(18px); border: 1px solid var(--hvc-line-invert); border-radius: var(--hvc-radius); box-shadow: var(--hvc-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--hvc-ease), transform .3s var(--hvc-ease), visibility .3s; } .hvc-has-children:hover > .hvc-submenu, .hvc-has-children:focus-within > .hvc-submenu { opacity: 1; visibility: visible; transform: none; } .hvc-submenu .hvc-nav__link { display: block; padding: 9px 12px; border-radius: var(--hvc-radius-sm); letter-spacing: .04em; text-transform: none; font-size: 13px; font-weight: 600; } .hvc-submenu .hvc-nav__link::after { display: none; } .hvc-submenu .hvc-nav__link:hover { background: rgba(255, 255, 255, .07); color: var(--hvc-gold-soft); } /* Mega menu: any top-level item with the CSS class "mega" */ .hvc-mega > .hvc-submenu { left: 50%; transform: translate(-50%, 10px); width: min(860px, 92vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 20px; padding: 22px; } .hvc-mega:hover > .hvc-submenu, .hvc-mega:focus-within > .hvc-submenu { transform: translate(-50%, 0); } .hvc-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .hvc-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--hvc-line-invert); border-radius: var(--hvc-radius-sm); background: rgba(255, 255, 255, .06); cursor: pointer; padding: 0; position: relative; } .hvc-burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: #fff; transition: transform .35s var(--hvc-ease), opacity .2s var(--hvc-ease); } .hvc-burger span:nth-child(1) { top: 15px; } .hvc-burger span:nth-child(2) { top: 21px; } .hvc-burger span:nth-child(3) { top: 27px; } .hvc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hvc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hvc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .hvc-nav__mobile-actions { display: none; } /* 5. Hero ------------------------------------------------------------------ */ .hvc-hero { position: relative; min-height: min(100svh, 880px); display: flex; align-items: stretch; padding: calc(var(--hvc-header-h) + 60px) 0 0; background: var(--hvc-ink); overflow: hidden; } /* `will-change` is now set by main.js only while the parallax actually runs (fine pointer, wide viewport, motion allowed). Declaring it here kept a 1920px-wide layer permanently promoted on phones for no benefit. */ .hvc-hero__media { position: absolute; inset: -8% 0 0; transform: translateZ(0); } .hvc-hero__img, .hvc-hero__video { width: 100%; height: 112%; object-fit: cover; } .hvc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 9, 6, .94) 0%, rgba(10, 9, 6, .78) 34%, rgba(10, 9, 6, .18) 68%, rgba(10, 9, 6, .55) 100%), linear-gradient(0deg, rgba(10, 9, 6, .85), transparent 45%); } .hvc-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; padding-bottom: 0; } .hvc-hero__copy { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-width: 640px; min-height: 0; margin-bottom: clamp(28px, 4vw, 48px); } .hvc-hero__badge { font-family: var(--hvc-serif); font-style: italic; font-size: clamp(19px, 2vw, 24px); color: var(--hvc-gold-soft); margin: 0 0 6px; } .hvc-hero__title { color: #fff; font-size: clamp(42px, 6vw, 76px); line-height: 1.02; margin: 0 0 18px; } .hvc-hero__line { display: block; } .hvc-hero__line--gold { background: linear-gradient(100deg, var(--hvc-gold-soft), var(--hvc-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hvc-hero__text { color: rgba(255, 255, 255, .78); font-size: 17px; max-width: 44ch; margin-bottom: 30px; } .hvc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hvc-hero__strip { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 20px 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; border-radius: var(--hvc-radius-lg) var(--hvc-radius-lg) 0 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hvc-hero__strip-item { display: flex; align-items: center; gap: 12px; padding: 4px 20px; border-right: 1px solid rgba(255, 255, 255, .10); } .hvc-hero__strip-item:last-child { border-right: 0; } .hvc-hero__strip-icon { color: var(--hvc-gold-soft); flex: 0 0 auto; } .hvc-hero__strip-text { display: flex; flex-direction: column; line-height: 1.35; } .hvc-hero__strip-text strong { color: #fff; font-size: 14px; } .hvc-hero__strip-text small { color: rgba(255, 255, 255, .58); font-size: 12px; } .hvc-hero__scroll { position: absolute; left: 50%; bottom: 132px; z-index: 3; width: 26px; height: 44px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--hvc-radius-pill); } .hvc-hero__scroll-line { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--hvc-gold-soft); border-radius: 2px; animation: hvc-scroll 1.8s var(--hvc-ease) infinite; } @keyframes hvc-scroll { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } /* 6. Property cards -------------------------------------------------------- */ .hvc-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 28px); } .hvc-prop { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); overflow: hidden; box-shadow: var(--hvc-shadow-sm); transition: transform .45s var(--hvc-ease), box-shadow .45s var(--hvc-ease), border-color .45s var(--hvc-ease); } .hvc-prop:hover { transform: translateY(-8px); box-shadow: var(--hvc-shadow-lg); border-color: rgba(200, 151, 63, .55); } .hvc-prop__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--hvc-ink-2); } .hvc-prop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--hvc-ease); } .hvc-prop:hover .hvc-prop__media img { transform: scale(1.06); } .hvc-prop__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 6, .35) 0%, transparent 42%, rgba(10, 9, 6, .55) 100%); } .hvc-prop__index { position: absolute; top: 0; left: 16px; padding: 7px 13px 8px; background: linear-gradient(135deg, var(--hvc-gold-soft), var(--hvc-gold)); color: #1a1509; font-size: 13px; font-weight: 800; border-radius: 0 0 var(--hvc-radius-sm) var(--hvc-radius-sm); } .hvc-prop--soon .hvc-prop__index { background: var(--hvc-ink); color: #fff; } .hvc-prop__badge { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: var(--hvc-radius-pill); background: rgba(200, 151, 63, .92); color: #1a1509; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); } .hvc-prop--soon .hvc-prop__badge { left: 50%; transform: translateX(-50%); background: rgba(18, 16, 12, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .18); } .hvc-prop__body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; } .hvc-prop--soon .hvc-prop__body { text-align: center; align-items: center; } .hvc-prop__title { font-size: 22px; margin: 0; line-height: 1.2; } .hvc-prop__title a { transition: color .3s var(--hvc-ease); } .hvc-prop__title a:hover { color: var(--hvc-gold-deep); } .hvc-prop__addr, .hvc-prop__desc { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--hvc-muted); } .hvc-prop__addr svg { flex: 0 0 auto; color: var(--hvc-gold); margin-top: 2px; } .hvc-prop__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1px solid var(--hvc-line); border-bottom: 1px solid var(--hvc-line); } .hvc-prop__stats li { display: flex; align-items: center; gap: 10px; } .hvc-prop__stats li + li { border-left: 1px solid var(--hvc-line); padding-left: 10px; } .hvc-prop__stat-icon { color: var(--hvc-ink); opacity: .8; } .hvc-prop__stat-text { display: flex; flex-direction: column; line-height: 1.25; } .hvc-prop__stat-text strong { font-size: 17px; color: var(--hvc-ink); } .hvc-prop__stat-text small { font-size: 11px; color: var(--hvc-muted); } .hvc-prop__actions { display: flex; gap: 8px; } .hvc-prop__actions .hvc-btn { flex: 1; min-width: 0; } .hvc-prop__actions .hvc-btn span:not(.hvc-btn__dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hvc-prop__link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--hvc-muted); transition: color .3s var(--hvc-ease); } .hvc-prop__link:hover { color: var(--hvc-gold-deep); } .hvc-prop__link svg { transition: transform .3s var(--hvc-ease); } .hvc-prop__link:hover svg { transform: translateX(4px); } .hvc-prop--soon .hvc-prop__media { background: radial-gradient(120% 100% at 50% 0%, #2b251a, #12100c); } .hvc-prop__img--empty { width: 100%; height: 100%; } /* 7. Strip / stats / why / amenities ---------------------------------------- */ .hvc-strip { display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 0; padding: 22px 10px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow-sm); } .hvc-strip__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 12px; border-right: 1px solid var(--hvc-line); text-align: center; } .hvc-strip__item:last-child { border-right: 0; } .hvc-strip__icon { color: var(--hvc-gold-deep); transition: transform .4s var(--hvc-ease); } .hvc-strip__item:hover .hvc-strip__icon { transform: translateY(-3px); } .hvc-strip__label { font-size: 13px; font-weight: 600; color: var(--hvc-ink); } .hvc-stats { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; gap: 20px; } .hvc-stats__item { text-align: center; } .hvc-stats__value { display: block; font-family: var(--hvc-serif); font-size: clamp(38px, 4.4vw, 56px); line-height: 1; color: var(--hvc-ink); } .hvc-stats__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hvc-muted); } .hvc-why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hvc-why__media { position: relative; } .hvc-why__media img { width: 100%; border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow); } .hvc-why__frame { position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--hvc-gold); border-radius: var(--hvc-radius-lg); z-index: -1; } .hvc-why__points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; } .hvc-why__points li { display: flex; gap: 14px; } .hvc-why__tick { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(200, 151, 63, .12); color: var(--hvc-gold-deep); } .hvc-why__points strong { display: block; color: var(--hvc-ink); font-size: 16px; } .hvc-why__points small { color: var(--hvc-muted); font-size: 14px; line-height: 1.6; } .hvc-amen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .hvc-amen__card { padding: 26px 22px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hvc-line-invert); border-radius: var(--hvc-radius); backdrop-filter: blur(10px); transition: transform .4s var(--hvc-ease), border-color .4s var(--hvc-ease), background-color .4s var(--hvc-ease); } .hvc-amen__card:hover { transform: translateY(-6px); border-color: rgba(200, 151, 63, .6); background: rgba(200, 151, 63, .06); } .hvc-amen__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: rgba(200, 151, 63, .14); color: var(--hvc-gold-soft); } .hvc-amen__title { font-size: 20px; margin: 0 0 6px; } .hvc-amen__text { margin: 0; font-size: 14px; color: var(--hvc-muted-invert); } .hvc-amen--light .hvc-amen__card { background: #fff; border-color: var(--hvc-line); box-shadow: var(--hvc-shadow-sm); } .hvc-amen--light .hvc-amen__icon { color: var(--hvc-gold-deep); } .hvc-amen--light .hvc-amen__title { color: var(--hvc-ink); } .hvc-amen--light .hvc-amen__text { color: var(--hvc-muted); } /* 8. CTA / sliders / reviews ------------------------------------------------ */ .hvc-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(28px, 4vw, 44px); border-radius: var(--hvc-radius-lg); overflow: hidden; background: var(--hvc-ink); box-shadow: var(--hvc-shadow); } .hvc-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hvc-cta__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(12, 10, 7, .95) 30%, rgba(12, 10, 7, .55) 100%); } .hvc-cta__copy { position: relative; z-index: 2; } .hvc-cta__title { color: #fff; font-size: clamp(28px, 3.2vw, 40px); margin: 4px 0 14px; } .hvc-cta__points { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; } .hvc-cta__points li { display: flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255, 255, 255, .82); } .hvc-cta__points svg { color: var(--hvc-gold-soft); } .hvc-cta .hvc-btn { position: relative; z-index: 2; } .hvc-rooms__inner { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .hvc-rooms__title { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 12px; } .hvc-rooms__text { color: var(--hvc-muted); margin-bottom: 22px; } .hvc-slider { position: relative; overflow: hidden; } .hvc-slider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; } .hvc-slider__track::-webkit-scrollbar { display: none; } .hvc-slide { flex: 0 0 clamp(240px, 30%, 300px); scroll-snap-align: start; } .hvc-slide__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--hvc-radius); overflow: hidden; box-shadow: var(--hvc-shadow-sm); } .hvc-slide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hvc-ease); } .hvc-slide:hover .hvc-slide__media img { transform: scale(1.07); } .hvc-slide__body { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 4px 0; } .hvc-slide__title { font-size: 19px; margin: 0; } .hvc-slide__price { font-size: 14px; font-weight: 700; color: var(--hvc-gold-deep); } .hvc-slider__nav { display: flex; gap: 10px; margin-bottom: 22px; } .hvc-slider__nav--center { justify-content: center; margin: 30px 0 0; } .hvc-slider__btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hvc-line); background: #fff; color: var(--hvc-ink); cursor: pointer; transition: background-color .3s var(--hvc-ease), color .3s var(--hvc-ease), transform .3s var(--hvc-ease); } .hvc-slider__btn:hover { background: var(--hvc-gold); color: #fff; border-color: var(--hvc-gold); } .hvc-slider__btn[data-slide-prev] svg { transform: rotate(180deg); } .hvc-slider__btn--invert { background: rgba(255, 255, 255, .06); border-color: var(--hvc-line-invert); color: #fff; } .hvc-slider--reviews .hvc-slider__track { gap: 22px; } .hvc-review { flex: 0 0 clamp(280px, 32%, 380px); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hvc-line-invert); border-radius: var(--hvc-radius-lg); backdrop-filter: blur(12px); transition: border-color .4s var(--hvc-ease), transform .4s var(--hvc-ease); } .hvc-review:hover { border-color: rgba(200, 151, 63, .5); transform: translateY(-4px); } .hvc-review__quote { position: absolute; top: 22px; right: 22px; color: rgba(200, 151, 63, .3); } .hvc-review__text { color: var(--hvc-muted-invert); font-size: 15px; } .hvc-review__text p:last-child { margin-bottom: 0; } .hvc-review__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hvc-line-invert); } .hvc-review__by span { display: flex; flex-direction: column; line-height: 1.3; } .hvc-review__by strong { color: #fff; font-size: 15px; } .hvc-review__by small { color: rgba(255, 255, 255, .5); font-size: 12px; } .hvc-review__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .hvc-review__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: rgba(200, 151, 63, .18); color: var(--hvc-gold-soft); font-family: var(--hvc-serif); font-size: 20px; } .hvc-stars { display: flex; gap: 3px; color: rgba(255, 255, 255, .22); } .hvc-star.is-on { color: var(--hvc-gold); } .hvc-star svg { fill: currentColor; } /* 9. Masonry / nearby / instagram / FAQ / map -------------------------------- */ .hvc-masonry { columns: 4; column-gap: 16px; } .hvc-masonry__item { margin: 0 0 16px; break-inside: avoid; border-radius: var(--hvc-radius); overflow: hidden; position: relative; } .hvc-masonry__item a { display: block; position: relative; } .hvc-masonry__item img { width: 100%; transition: transform .8s var(--hvc-ease), filter .5s var(--hvc-ease); } .hvc-masonry__item.is-tall img { aspect-ratio: 3 / 4; object-fit: cover; } .hvc-masonry__item:hover img { transform: scale(1.05); } .hvc-masonry__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 10, 7, .42); color: #fff; opacity: 0; transition: opacity .4s var(--hvc-ease); } .hvc-masonry__item:hover .hvc-masonry__zoom { opacity: 1; } .hvc-masonry__item.is-hidden { display: none; } /* v3.3.9 — 6 small cards per row instead of 3 large ones, at the client's request; the description line is dropped at this size (title + distance/ time + Directions is what the card needs to do its job at this width). */ .hvc-near { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .hvc-near__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-sm); overflow: hidden; transition: transform .4s var(--hvc-ease), box-shadow .4s var(--hvc-ease), border-color .4s var(--hvc-ease); } .hvc-near__card:hover { transform: translateY(-6px); box-shadow: var(--hvc-shadow); border-color: rgba(200, 151, 63, .5); } .hvc-near__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hvc-cream-2); } .hvc-near__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hvc-ease); } .hvc-near__card:hover .hvc-near__media img { transform: scale(1.06); } .hvc-near__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .hvc-near__title { font-size: 14px; margin: 0; line-height: 1.25; } .hvc-near__text { display: none; } .hvc-near__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 11px; color: var(--hvc-muted); } .hvc-near__meta span { display: inline-flex; align-items: center; gap: 4px; } .hvc-near__meta svg { color: var(--hvc-gold); width: 12px; height: 12px; } .hvc-near__card .hvc-link { font-size: 11px; } .hvc-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .hvc-insta__item { position: relative; aspect-ratio: 1; border-radius: var(--hvc-radius-sm); overflow: hidden; } .hvc-insta__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hvc-ease); } .hvc-insta__item:hover img { transform: scale(1.08); } .hvc-insta__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 10, 7, .45); color: #fff; opacity: 0; transition: opacity .35s var(--hvc-ease); } .hvc-insta__item:hover .hvc-insta__icon { opacity: 1; } .hvc-faq { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; } .hvc-faq--page { grid-template-columns: 1fr; max-width: 860px; } .hvc-faq__head .hvc-head { flex-direction: column; align-items: flex-start; } .hvc-acc { display: grid; gap: 12px; } .hvc-acc__item { background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius); overflow: hidden; transition: border-color .35s var(--hvc-ease), box-shadow .35s var(--hvc-ease); } .hvc-acc__item.is-open { border-color: rgba(200, 151, 63, .55); box-shadow: var(--hvc-shadow-sm); } .hvc-acc__item h3 { margin: 0; } .hvc-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 20px; background: none; border: 0; cursor: pointer; font-family: var(--hvc-serif); font-size: 20px; color: var(--hvc-ink); text-align: left; } .hvc-acc__plus { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(200, 151, 63, .12); color: var(--hvc-gold-deep); transition: transform .35s var(--hvc-ease), background-color .35s var(--hvc-ease); } .hvc-acc__item.is-open .hvc-acc__plus { transform: rotate(45deg); background: var(--hvc-gold); color: #fff; } .hvc-acc__a { padding: 0 20px 18px; color: var(--hvc-muted); font-size: 15px; } .hvc-acc__a p:last-child { margin-bottom: 0; } .hvc-map { position: relative; line-height: 0; } .hvc-map iframe { filter: grayscale(.25) contrast(1.05); display: block; } .hvc-map__cta { position: absolute; right: clamp(18px, 4vw, 48px); bottom: 28px; line-height: 1; } /* 10. Inner hero, detail, forms, blog, 404 ---------------------------------- */ .hvc-phero { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 46vh, 480px); padding: calc(var(--hvc-header-h) + 40px) 0 44px; background: var(--hvc-ink); overflow: hidden; } .hvc-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hvc-phero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 6, .82), rgba(10, 9, 6, .6) 45%, rgba(10, 9, 6, .88)); } .hvc-phero__inner { position: relative; z-index: 2; } .hvc-phero__title { color: #fff; font-size: clamp(34px, 4.6vw, 58px); margin: 0; } .hvc-phero__sub { color: rgba(255, 255, 255, .74); max-width: 58ch; margin: 12px 0 0; } .hvc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .55); } .hvc-crumbs a:hover { color: var(--hvc-gold-soft); } .hvc-crumbs [aria-current] { color: var(--hvc-gold-soft); } .hvc-detail { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: clamp(28px, 4vw, 56px); align-items: start; } .hvc-detail__side { position: sticky; top: calc(var(--hvc-header-h) + 20px); } .hvc-bookcard { display: grid; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow); } .hvc-bookcard__title { font-size: 22px; margin: 0 0 4px; } .hvc-bookcard__price { display: flex; flex-direction: column; font-family: var(--hvc-serif); font-size: 34px; color: var(--hvc-ink); line-height: 1.1; margin-bottom: 6px; } .hvc-bookcard__price small { font-family: var(--hvc-sans); font-size: 12px; color: var(--hvc-muted); } .hvc-bookcard__addr { display: flex; gap: 8px; font-size: 13px; color: var(--hvc-muted); margin: 0 0 8px; } .hvc-bookcard__addr svg { flex: 0 0 auto; color: var(--hvc-gold); margin-top: 2px; } .hvc-bookcard__note { margin: 6px 0 0; font-size: 13px; color: var(--hvc-muted); text-align: center; } .hvc-bookcard__note a { color: var(--hvc-gold-deep); font-weight: 700; } .hvc-statbar { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 20px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow-sm); } .hvc-statbar li { display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--hvc-line); } .hvc-statbar li:last-child { border-right: 0; } .hvc-statbar__icon { color: var(--hvc-gold-deep); } .hvc-statbar span span, .hvc-statbar li > span:last-child { display: flex; flex-direction: column; line-height: 1.25; } .hvc-statbar strong { font-size: 20px; color: var(--hvc-ink); } .hvc-statbar small { font-size: 12px; color: var(--hvc-muted); } .hvc-featurelist, .hvc-amenlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; list-style: none; margin: 18px 0; padding: 0; } .hvc-featurelist li, .hvc-amenlist li { display: flex; align-items: center; gap: 10px; font-size: 15px; } .hvc-featurelist svg, .hvc-amenlist svg { color: var(--hvc-gold-deep); flex: 0 0 auto; } .hvc-roomgal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; } .hvc-roomgal__item:first-child { grid-column: span 4; } .hvc-roomgal__item { border-radius: var(--hvc-radius); overflow: hidden; } .hvc-roomgal__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .7s var(--hvc-ease); } .hvc-roomgal__item:first-child img { aspect-ratio: 16 / 9; } .hvc-roomgal__item:hover img { transform: scale(1.05); } .hvc-room__specs { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0 0 26px; padding: 18px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius); } .hvc-room__specs li { display: flex; align-items: center; gap: 10px; justify-content: center; } .hvc-room__specs svg { color: var(--hvc-gold-deep); } .hvc-room__specs span { display: flex; flex-direction: column; line-height: 1.25; } .hvc-room__specs strong { color: var(--hvc-ink); } .hvc-room__specs small { font-size: 12px; color: var(--hvc-muted); } /* Room card */ .hvc-room { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); overflow: hidden; height: 100%; transition: transform .45s var(--hvc-ease), box-shadow .45s var(--hvc-ease), border-color .45s var(--hvc-ease); } .hvc-room:hover { transform: translateY(-7px); box-shadow: var(--hvc-shadow-lg); border-color: rgba(200, 151, 63, .55); } .hvc-room__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; } .hvc-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hvc-ease); } .hvc-room:hover .hvc-room__media img { transform: scale(1.06); } .hvc-room__tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: var(--hvc-radius-pill); background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hvc-ink); } .hvc-room__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; } .hvc-room__title { font-size: 22px; margin: 0; } .hvc-room__title a:hover { color: var(--hvc-gold-deep); } .hvc-room__meta { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--hvc-muted); } .hvc-room__meta li { display: flex; align-items: center; gap: 6px; } .hvc-room__meta svg { color: var(--hvc-gold); } .hvc-room__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hvc-line); } .hvc-room__price { display: flex; flex-direction: column; font-family: var(--hvc-serif); font-size: 24px; color: var(--hvc-ink); line-height: 1.15; } .hvc-room__price small { font-family: var(--hvc-sans); font-size: 11px; color: var(--hvc-muted); } /* Filters */ .hvc-filters { display: flex; flex-wrap: wrap; gap: 22px 36px; align-items: center; margin-bottom: 34px; padding: 18px 22px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius); box-shadow: var(--hvc-shadow-sm); } .hvc-filters--center { justify-content: center; } .hvc-filters__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hvc-filters__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hvc-muted); } .hvc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .hvc-chip { padding: 8px 15px; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-pill); background: transparent; font-size: 13px; font-weight: 600; color: var(--hvc-text); cursor: pointer; transition: background-color .3s var(--hvc-ease), color .3s var(--hvc-ease), border-color .3s var(--hvc-ease); } .hvc-chip:hover { border-color: var(--hvc-gold); color: var(--hvc-gold-deep); } .hvc-chip.is-active { background: var(--hvc-ink); border-color: var(--hvc-ink); color: #fff; } .hvc-grid__cell.is-hidden { display: none; } /* Timeline / mission / founder */ .hvc-mv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .hvc-mv__card { padding: 32px 28px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hvc-line-invert); border-radius: var(--hvc-radius-lg); backdrop-filter: blur(10px); } .hvc-mv__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%; background: rgba(200, 151, 63, .14); color: var(--hvc-gold-soft); } .hvc-mv__card h2 { font-size: 26px; } .hvc-mv__card p { margin: 0; color: var(--hvc-muted-invert); } .hvc-timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; margin-inline: auto; } .hvc-timeline::before { content: ""; position: absolute; left: 86px; top: 6px; bottom: 6px; width: 1px; background: var(--hvc-line); } .hvc-timeline__item { display: grid; grid-template-columns: 86px 1fr; gap: 28px; padding-bottom: 30px; position: relative; } .hvc-timeline__year { font-family: var(--hvc-serif); font-size: 22px; color: var(--hvc-gold-deep); text-align: right; } .hvc-timeline__item::before { content: ""; position: absolute; left: 82px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--hvc-gold); box-shadow: 0 0 0 4px rgba(200, 151, 63, .16); } .hvc-timeline__body h3 { font-size: 21px; margin: 0 0 4px; } .hvc-timeline__body p { margin: 0; color: var(--hvc-muted); } .hvc-founder { display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: center; margin: 0; padding: clamp(26px, 3.4vw, 42px); background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow-sm); } .hvc-founder img { width: 100%; border-radius: var(--hvc-radius); aspect-ratio: 1; object-fit: cover; } .hvc-founder blockquote { margin: 0; } .hvc-founder blockquote svg { color: var(--hvc-gold); margin-bottom: 8px; } .hvc-founder blockquote p { font-family: var(--hvc-serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; color: var(--hvc-ink); } .hvc-founder figcaption { display: flex; flex-direction: column; } .hvc-founder figcaption strong { color: var(--hvc-ink); } .hvc-founder figcaption small { color: var(--hvc-muted); } /* Contact */ .hvc-contact { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .hvc-contact__card { padding: 28px; background: var(--hvc-ink); color: rgba(255, 255, 255, .78); border-radius: var(--hvc-radius-lg); box-shadow: var(--hvc-shadow); } .hvc-contact__card h2 { color: #fff; margin-top: 0; } .hvc-contact__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; } .hvc-contact__list li { display: flex; gap: 14px; } .hvc-contact__list li > span:last-child { display: flex; flex-direction: column; } .hvc-contact__list small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } .hvc-contact__list a:hover { color: var(--hvc-gold-soft); } .hvc-contact__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(200, 151, 63, .16); color: var(--hvc-gold-soft); } .hvc-contact__actions { display: grid; gap: 8px; } .hvc-contact__note { margin-top: 14px; font-size: 13px; color: var(--hvc-muted); } /* Forms */ .hvc-contact__form input[type="text"], .hvc-contact__form input[type="email"], .hvc-contact__form input[type="tel"], .hvc-contact__form input[type="date"], .hvc-contact__form select, .hvc-contact__form textarea, .hvc-search input[type="search"], .hvc-prose input[type="text"], .hvc-prose textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-sm); background: #fff; font-family: inherit; font-size: 15px; color: var(--hvc-text); transition: border-color .3s var(--hvc-ease), box-shadow .3s var(--hvc-ease); } .hvc-contact__form input:focus, .hvc-contact__form textarea:focus, .hvc-search input:focus { border-color: var(--hvc-gold); box-shadow: 0 0 0 4px rgba(200, 151, 63, .12); outline: none; } .hvc-contact__form p { margin-bottom: 14px; } .hvc-contact__form input[type="submit"] { padding: 14px 26px; border: 0; border-radius: var(--hvc-radius-sm); background: linear-gradient(135deg, var(--hvc-gold-soft), var(--hvc-gold)); color: #1a1509; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: 12px; cursor: pointer; } .hvc-search { display: flex; align-items: center; gap: 10px; max-width: 620px; padding: 8px 8px 8px 16px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-pill); box-shadow: var(--hvc-shadow-sm); } .hvc-search svg { color: var(--hvc-muted); flex: 0 0 auto; } .hvc-search input[type="search"] { border: 0; background: none; box-shadow: none; padding: 6px 0; flex: 1; } .hvc-search input[type="search"]:focus { box-shadow: none; } .hvc-search .hvc-btn { border-radius: var(--hvc-radius-pill); flex: 0 0 auto; } .hvc-searchbar { margin-bottom: 34px; } /* Blog + prose */ .hvc-blog { display: grid; grid-template-columns: 1fr; gap: 40px; } .hvc-blog:has(.hvc-blog__side) { grid-template-columns: 1fr minmax(240px, 300px); } .hvc-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-lg); overflow: hidden; transition: transform .4s var(--hvc-ease), box-shadow .4s var(--hvc-ease); } .hvc-post:hover { transform: translateY(-6px); box-shadow: var(--hvc-shadow); } .hvc-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hvc-cream-2); } .hvc-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hvc-ease); } .hvc-post:hover .hvc-post__media img { transform: scale(1.05); } .hvc-post__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .hvc-post__date { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hvc-muted); } .hvc-post__title { font-size: 22px; margin: 0; } .hvc-post__excerpt { margin: 0; font-size: 14px; color: var(--hvc-muted); } .hvc-post .hvc-link { margin-top: auto; } .hvc-prose { max-width: 76ch; font-size: 17px; } .hvc-prose--center { margin-inline: auto; text-align: center; } .hvc-prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 1.4em; } .hvc-prose h3 { font-size: 24px; margin-top: 1.4em; } .hvc-prose img { border-radius: var(--hvc-radius); margin: 1.6em 0; } .hvc-prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 3px solid var(--hvc-gold); background: #fff; border-radius: 0 var(--hvc-radius) var(--hvc-radius) 0; font-family: var(--hvc-serif); font-size: 21px; } .hvc-prose ul, .hvc-prose ol { padding-left: 1.2em; } .hvc-prose li { margin-bottom: .4em; } .hvc-results { display: grid; gap: 16px; } .hvc-result { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 16px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius); transition: border-color .3s var(--hvc-ease), transform .3s var(--hvc-ease); } .hvc-result:hover { border-color: var(--hvc-gold); transform: translateX(4px); } .hvc-result__media img { border-radius: var(--hvc-radius-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .hvc-result__type { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hvc-gold-deep); } .hvc-result h3 { font-size: 22px; margin: 4px 0 6px; } .hvc-result p { margin: 0; color: var(--hvc-muted); font-size: 14px; } .hvc-pagination { margin-top: 44px; } .hvc-pagination .nav-links { display: flex; justify-content: center; gap: 8px; } .hvc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-sm); background: #fff; font-size: 14px; font-weight: 600; transition: background-color .3s var(--hvc-ease), color .3s var(--hvc-ease); } .hvc-pagination .page-numbers:hover, .hvc-pagination .page-numbers.current { background: var(--hvc-ink); border-color: var(--hvc-ink); color: #fff; } .hvc-404 { display: flex; align-items: center; min-height: 88vh; padding: calc(var(--hvc-header-h) + 60px) 0 80px; text-align: center; background: var(--hvc-ink); color: rgba(255, 255, 255, .72); } .hvc-404__code { display: block; font-family: var(--hvc-serif); font-size: clamp(90px, 16vw, 190px); line-height: 1; background: linear-gradient(120deg, var(--hvc-gold-soft), var(--hvc-gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hvc-404__title { color: #fff; font-size: clamp(28px, 3.6vw, 44px); } .hvc-404__text { max-width: 52ch; margin-inline: auto; } .hvc-404__search { display: flex; justify-content: center; margin: 26px 0; } .hvc-404__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* 11. Footer, WhatsApp, lightbox -------------------------------------------- */ .hvc-footer { background: var(--hvc-ink); color: rgba(255, 255, 255, .62); padding-top: clamp(52px, 6vw, 80px); position: relative; } .hvc-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 151, 63, .5), transparent); } .hvc-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; } .hvc-footer__logo { max-height: var(--hvc-footer-logo-h, 88px); width: auto; margin-bottom: 16px; } .hvc-footer__desc { font-size: 14px; line-height: 1.75; max-width: 34ch; } .hvc-footer__title { color: #fff; font-family: var(--hvc-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; } .hvc-footer__menu, .hvc-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .hvc-footer__menu a, .hvc-footer__contact a, .hvc-footer__addr { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; transition: color .3s var(--hvc-ease); } .hvc-footer__menu a { flex-direction: column; gap: 1px; } .hvc-footer__menu small { color: rgba(255, 255, 255, .38); font-size: 12px; } .hvc-footer__menu a:hover, .hvc-footer__contact a:hover { color: var(--hvc-gold-soft); } .hvc-footer__contact svg, .hvc-footer__addr svg { color: var(--hvc-gold); flex: 0 0 auto; margin-top: 3px; } .hvc-footer .hvc-btn { margin-top: 18px; } .hvc-footer__newsletter { margin-top: 18px; } .hvc-socials { display: flex; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; } .hvc-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hvc-line-invert); border-radius: 50%; color: rgba(255, 255, 255, .78); transition: background-color .3s var(--hvc-ease), color .3s var(--hvc-ease), border-color .3s var(--hvc-ease), transform .3s var(--hvc-ease); } .hvc-socials a svg { width: 16px; height: 16px; } .hvc-socials a:hover { background: var(--hvc-gold); border-color: var(--hvc-gold); color: #1a1509; transform: translateY(-3px); } /* WhatsApp-branded pill, used for the footer "Chat on WhatsApp" link in place of the old generic Book Now button. */ .hvc-footer__whatsapp { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 22px; background: #25D366; color: #06210f; font-family: var(--hvc-sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; border-radius: var(--hvc-radius-pill); transition: transform .3s var(--hvc-ease), box-shadow .3s var(--hvc-ease), background-color .3s var(--hvc-ease); box-shadow: 0 10px 26px -14px rgba(37, 211, 102, .7); } .hvc-footer__whatsapp svg { width: 18px; height: 18px; color: #06210f; } .hvc-footer__whatsapp:hover { background: #1fb85a; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .85); } .hvc-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hvc-line-invert); } .hvc-footer__copy { margin: 0; font-size: 13px; } .hvc-footer__legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 13px; } .hvc-footer__legal a:hover { color: var(--hvc-gold-soft); } .hvc-wa { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 14px 30px -12px rgba(31, 168, 85, .8); transition: transform .35s var(--hvc-ease); /* A fixed element repainting against a scrolling page is a classic Windows jank source — give it its own layer. */ transform: translateZ(0); } .hvc-wa svg { width: 100%; height: 100%; } .hvc-wa:hover { transform: translate3d(0, -4px, 0) scale(1.04); } .hvc-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(8, 7, 5, .94); backdrop-filter: blur(8px); } .hvc-lightbox[hidden] { display: none; } .hvc-lightbox__figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; } .hvc-lightbox__figure img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: var(--hvc-radius); } .hvc-lightbox__figure figcaption { margin-top: 14px; color: rgba(255, 255, 255, .68); font-size: 14px; } .hvc-lightbox__close, .hvc-lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background-color .3s var(--hvc-ease); } .hvc-lightbox__close:hover, .hvc-lightbox__nav:hover { background: rgba(255, 255, 255, .18); } .hvc-lightbox__close { top: 24px; right: 24px; } .hvc-lightbox__nav--prev { left: 24px; } .hvc-lightbox__nav--prev svg { transform: rotate(180deg); } .hvc-lightbox__nav--next { right: 24px; } /* 12. Responsive ------------------------------------------------------------ */ @media (max-width: 1100px) { .hvc-props { grid-template-columns: repeat(2, 1fr); } .hvc-grid--3 { grid-template-columns: repeat(2, 1fr); } .hvc-amen { grid-template-columns: repeat(2, 1fr); } .hvc-near { grid-template-columns: repeat(3, 1fr); } .hvc-masonry { columns: 3; } .hvc-strip { grid-template-columns: repeat(3, 1fr); gap: 18px 0; } .hvc-strip__item:nth-child(3n) { border-right: 0; } .hvc-rooms__inner { grid-template-columns: 1fr; } .hvc-detail, .hvc-contact, .hvc-faq { grid-template-columns: 1fr; } .hvc-detail__side { position: static; } .hvc-blog:has(.hvc-blog__side) { grid-template-columns: 1fr; } .hvc-insta { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 980px) { .hvc-header { position: sticky; } body.has-transparent-header .hvc-header { position: fixed; } .hvc-nav { position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); padding: calc(var(--hvc-header-h) + 24px) 26px 32px; background: rgba(16, 14, 10, .97); backdrop-filter: blur(20px); border-left: 1px solid var(--hvc-line-invert); transform: translateX(100%); transition: transform .45s var(--hvc-ease); overflow-y: auto; z-index: 55; } .hvc-nav.is-open { transform: none; } .hvc-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .hvc-nav__link { padding: 13px 0; font-size: 14px; letter-spacing: .06em; border-bottom: 1px solid var(--hvc-line-invert); } .hvc-nav__link::after { display: none; } .hvc-nav__list > li { position: relative; } .hvc-nav__toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 8px; width: 32px; height: 32px; border: 1px solid var(--hvc-line-invert); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; } .hvc-nav__toggle[aria-expanded="true"] svg { transform: rotate(45deg); } .hvc-nav__link svg { display: none; } .hvc-submenu, .hvc-mega > .hvc-submenu { position: static; display: none; width: auto; transform: none; opacity: 1; visibility: visible; grid-template-columns: 1fr; background: rgba(255, 255, 255, .04); box-shadow: none; margin: 6px 0 10px; } .hvc-has-children.is-open > .hvc-submenu { display: block; } .hvc-mega.is-open > .hvc-submenu { display: grid; } .hvc-nav__mobile-actions { display: grid; gap: 10px; margin-top: 24px; } .hvc-header__phone, .hvc-header__actions .hvc-btn--gold { display: none; } .hvc-burger { display: block; } .hvc-hero__strip { grid-template-columns: repeat(2, 1fr); gap: 14px 0; } .hvc-hero__strip-item:nth-child(2n) { border-right: 0; } .hvc-hero__scroll { display: none; } .hvc-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; } .hvc-why { grid-template-columns: 1fr; } .hvc-why__frame { display: none; } .hvc-mv { grid-template-columns: 1fr; } .hvc-statbar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; } .hvc-statbar li:nth-child(2n) { border-right: 0; } .hvc-founder { grid-template-columns: 1fr; text-align: center; } .hvc-founder img { max-width: 180px; margin-inline: auto; } .hvc-roomgal { grid-template-columns: repeat(2, 1fr); } .hvc-roomgal__item:first-child { grid-column: span 2; } .hvc-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 720px) { :root { --hvc-header-h: 72px; } .hvc-props, .hvc-grid--3, .hvc-amen { grid-template-columns: 1fr; } .hvc-near { grid-template-columns: repeat(2, 1fr); } .hvc-masonry { columns: 2; column-gap: 12px; } .hvc-masonry__item { margin-bottom: 12px; } .hvc-insta { grid-template-columns: repeat(3, 1fr); } .hvc-strip { grid-template-columns: repeat(2, 1fr); } .hvc-strip__item { border-right: 0; } .hvc-strip__item:nth-child(2n+1) { border-right: 1px solid var(--hvc-line); } .hvc-head { flex-direction: column; align-items: flex-start; } .hvc-hero { min-height: 92svh; } .hvc-hero__strip { grid-template-columns: 1fr; } .hvc-hero__strip-item { border-right: 0; } .hvc-hero__actions .hvc-btn { flex: 1; } .hvc-featurelist, .hvc-amenlist, .hvc-room__specs { grid-template-columns: 1fr; } .hvc-room__specs li { justify-content: flex-start; } .hvc-result { grid-template-columns: 1fr; } .hvc-footer__grid { grid-template-columns: 1fr; } .hvc-footer__bar { flex-direction: column; align-items: flex-start; } .hvc-search { flex-wrap: wrap; border-radius: var(--hvc-radius); } .hvc-search .hvc-btn { width: 100%; } .hvc-lightbox { padding: 16px; } .hvc-lightbox__nav { display: none; } .hvc-map__cta { position: static; margin: 16px auto 0; display: flex; width: max-content; } .hvc-wa { width: 46px; height: 46px; right: 14px; bottom: 14px; } } /* --- Large desktops: stop the shell from looking cramped on 1600px+ ------- */ @media (min-width: 1600px) { :root { --hvc-shell: 1340px; } } /* --- Small tablets / large phones ----------------------------------------- */ @media (max-width: 600px) { .hvc-section { padding: clamp(44px, 9vw, 64px) 0; } .hvc-head__title { font-size: clamp(26px, 7vw, 34px); } .hvc-hero__title { font-size: clamp(34px, 9vw, 46px); } .hvc-hero__text { font-size: 16px; } .hvc-hero__actions { flex-direction: column; align-items: stretch; } .hvc-hero__actions .hvc-btn { width: 100%; justify-content: center; } .hvc-insta { grid-template-columns: repeat(2, 1fr); } .hvc-masonry { columns: 1; } .hvc-footer__legal { flex-wrap: wrap; gap: 10px 18px; } .hvc-socials { flex-wrap: wrap; } .hvc-brand__text { font-size: 22px; } .hvc-brand__img { max-height: min(var(--hvc-logo-h, 72px), 58px); } } /* --- Very small phones (≤380px: iPhone SE, Galaxy A0x) -------------------- */ @media (max-width: 380px) { :root { --hvc-gutter: 16px; } .hvc-hero__title { font-size: 32px; } /* The text-logo fallback overflowed the header on 360px devices. */ .hvc-brand__text { font-size: 20px; letter-spacing: .02em; } .hvc-brand__img { max-height: min(var(--hvc-logo-h, 72px), 52px); } .hvc-stats { grid-template-columns: 1fr; } .hvc-strip { grid-template-columns: 1fr; } .hvc-strip__item:nth-child(2n+1) { border-right: 0; } .hvc-roomgal { grid-template-columns: 1fr; } .hvc-roomgal__item:first-child { grid-column: auto; } } /* --- Touch devices --------------------------------------------------------- */ @media (hover: none), (pointer: coarse) { /* Comfortable, accessible tap targets everywhere (WCAG 2.5.8). */ .hvc-btn, .hvc-nav__link, .hvc-chip, .hvc-slider__btn, .hvc-footer__menu a, .hvc-footer__legal a { min-height: 44px; } .hvc-btn, .hvc-chip { display: inline-flex; align-items: center; } /* Backdrop blur is disproportionately expensive on mobile GPUs. The panels below already sit on near-opaque backgrounds, so dropping the blur is visually indistinguishable but removes a per-frame pass. */ .hvc-nav, .hvc-hero__strip, .hvc-lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Hover-only lifts never fire on touch and just cost a transition. */ .hvc-review:hover, .hvc-post:hover, .hvc-wa:hover { transform: none; } /* Momentum scrolling inside the horizontal sliders. */ [data-slide-track] { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } [data-slide-track] > * { scroll-snap-align: start; } } /* --- Editor / client content: never let pasted media break the layout ------ */ .hvc-prose img, .hvc-prose video, .hvc-prose iframe, .hvc-prose embed, .hvc-prose object { max-width: 100%; height: auto; } .hvc-prose iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; border: 0; } .hvc-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; } .hvc-prose pre { overflow-x: auto; max-width: 100%; } .hvc-prose > * { overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .hvc-hero__media { transform: none !important; will-change: auto !important; } } /* ========================================================================= 13. v3.0.0 — property plates, card actions, founder, timeline, contact form, and the mobile header / menu fixes. Appended (not woven in) so every v2.2.0 rule above is untouched and the diff for this release is reviewable in one place. ====================================================================== */ /* --- Property card: gold locality plate, top-right ------------------------ */ .hvc-prop__place { position: absolute; top: 0; right: 16px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 96px); padding: 7px 13px 8px; background: linear-gradient(135deg, #f0d79a 0%, var(--hvc-gold-soft) 38%, var(--hvc-gold) 100%); color: #1a1509; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1; border-radius: 0 0 var(--hvc-radius-sm) var(--hvc-radius-sm); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .45); overflow: hidden; z-index: 2; } .hvc-prop__place svg { flex: 0 0 auto; opacity: .85; } .hvc-prop__place-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Slow shine sweep — the same gesture as a polished brass name plate. */ .hvc-prop__place::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg); animation: hvc-plate-shine 5.5s var(--hvc-ease) infinite; pointer-events: none; } @keyframes hvc-plate-shine { 0%, 62% { left: -60%; } 88%, 100% { left: 130%; } } .hvc-prop:hover .hvc-prop__place::after { animation-duration: 2.4s; } .hvc-prop--soon .hvc-prop__place { background: linear-gradient(135deg, #2a2419, var(--hvc-ink)); color: var(--hvc-gold-soft); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(255, 255, 255, .1); } /* --- Property card: show the whole phone number --------------------------- */ /* The two buttons used to share one row, which forced the number to ellipsis. Stacking them gives the number the full card width — no truncation at any viewport, and the Location button reads as the primary action. */ .hvc-prop__actions { flex-direction: column; gap: 10px; } .hvc-prop__actions .hvc-btn { flex: none; width: 100%; justify-content: center; } .hvc-prop__actions .hvc-prop__tel span:not(.hvc-btn__dot) { overflow: visible; text-overflow: clip; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .hvc-prop__map { position: relative; } /* --- About: founder card, photo on the right ------------------------------ */ .hvc-founder--right { grid-template-columns: 1fr 220px; } .hvc-founder--right .hvc-founder__media { order: 2; } .hvc-founder--right blockquote { order: 1; } .hvc-founder__media { position: relative; } .hvc-founder__media img { width: 100%; border-radius: var(--hvc-radius); aspect-ratio: 1; object-fit: cover; } .hvc-founder__media::after { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid rgba(200, 151, 63, .45); border-radius: var(--hvc-radius); z-index: -1; } /* No photo set: let the quote use the full card instead of hugging the left. */ .hvc-founder--solo { grid-template-columns: 1fr; } .hvc-founder--solo blockquote { max-width: 62ch; } /* --- About: timeline never overflows its container ------------------------ */ .hvc-timeline { width: 100%; max-width: min(760px, 100%); } .hvc-timeline__item { min-width: 0; } .hvc-timeline__body { min-width: 0; } .hvc-timeline__body h3, .hvc-timeline__body p { overflow-wrap: anywhere; } @media (max-width: 720px) { .hvc-timeline::before { left: 7px; } .hvc-timeline__item { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; padding-bottom: 26px; } .hvc-timeline__item::before { left: 3px; top: 8px; } .hvc-timeline__year { text-align: left; font-size: 20px; } .hvc-timeline__body h3 { font-size: 19px; } } /* --- Contact: built-in form ----------------------------------------------- */ .hvc-form { display: grid; gap: 16px; } .hvc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hvc-form__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .hvc-form__field label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hvc-muted); } .hvc-form__field label .req { color: var(--hvc-gold-deep); } .hvc-form input[type="text"], .hvc-form input[type="email"], .hvc-form input[type="tel"], .hvc-form input[type="date"], .hvc-form select, .hvc-form textarea { width: 100%; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--hvc-ink); background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius-sm); transition: border-color .3s var(--hvc-ease), box-shadow .3s var(--hvc-ease); } .hvc-form textarea { min-height: 140px; resize: vertical; } .hvc-form input:focus, .hvc-form select:focus, .hvc-form textarea:focus { outline: none; border-color: var(--hvc-gold); box-shadow: 0 0 0 3px rgba(200, 151, 63, .16); } .hvc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hvc-form__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hvc-form__consent { font-size: 12px; color: var(--hvc-muted); } .hvc-notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--hvc-radius-sm); font-size: 14px; line-height: 1.5; } .hvc-notice--ok { background: rgba(46, 125, 70, .1); border: 1px solid rgba(46, 125, 70, .3); color: #1f5c33; } .hvc-notice--err { background: rgba(178, 52, 42, .09); border: 1px solid rgba(178, 52, 42, .28); color: #8d2b23; } /* --- Contact: the info card comes first on small screens ------------------ */ @media (max-width: 1100px) { .hvc-contact { grid-template-columns: 1fr; } .hvc-contact__card { order: 1; } .hvc-contact__form { order: 2; } } @media (max-width: 720px) { .hvc-form__row { grid-template-columns: 1fr; } .hvc-form__actions .hvc-btn { width: 100%; justify-content: center; } } /* ========================================================================= Mobile header + off-canvas menu ------------------------------------------------------------------------- The drawer never opened correctly because `.hvc-header` carried `transform: translateZ(0)` (and a backdrop-filter). Both make the header a CONTAINING BLOCK for `position: fixed` descendants — so the drawer, which is `inset: 0 0 0 auto`, was being sized to the 84px-tall header instead of the viewport and scrolled inside it. Belt and braces here: the transform hint is dropped below 980px (it only ever mattered for desktop scroll compositing), AND the drawer is given an explicit viewport height + right edge so it lands correctly even if a browser still treats backdrop-filter as a containing block. ====================================================================== */ @media (max-width: 980px) { /* `filter`/`backdrop-filter` ALSO establish a containing block for fixed descendants, so both hints go on mobile. The solid header is already 96% opaque, and the transparent one keeps its gradient scrim — the visual difference is imperceptible, and mobile GPUs get a free win. */ .hvc-header, body.has-transparent-header .hvc-header { transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.has-transparent-header .hvc-header { background: linear-gradient(180deg, rgba(12, 11, 8, .78) 0%, rgba(12, 11, 8, .42) 65%, transparent 100%); } body.has-transparent-header .hvc-header.is-stuck { background: linear-gradient(180deg, rgba(20, 18, 13, .97) 0%, rgba(14, 12, 9, .95) 100%); } .hvc-nav { top: 0; right: 0; left: auto; bottom: auto; height: 100vh; height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; display: flex; flex-direction: column; } .hvc-nav__list { flex: 0 0 auto; } /* Dim the page behind the open drawer so the menu reads clearly. This hangs off , not off .hvc-nav — a negative-z pseudo INSIDE the drawer paints above the drawer's own background, which would have dimmed the menu itself. body has no transform, so `fixed` behaves here. */ body.is-nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(8, 7, 5, .55); z-index: 54; animation: hvc-fade-in .3s var(--hvc-ease) both; } @keyframes hvc-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Sub-menu items were nearly invisible against the drawer. */ .hvc-submenu .hvc-nav__link { color: rgba(255, 255, 255, .78); padding: 11px 14px; } .hvc-submenu .hvc-nav__link:hover, .hvc-submenu .hvc-nav__link:focus-visible { color: var(--hvc-gold-soft); } /* The burger must sit above the drawer so it can also close it. */ .hvc-burger { position: relative; z-index: 60; } /* Logo: cap it against the header height instead of letting the Theme Settings desktop value (up to 130px) blow the header open. */ .hvc-brand__img { max-height: min(var(--hvc-logo-h, 72px), 56px); } .hvc-header__inner { gap: 14px; } } @media (max-width: 720px) { .hvc-brand { min-width: 0; flex-shrink: 1; } .hvc-brand__img { max-height: min(var(--hvc-logo-h, 72px), 48px); } .hvc-header__actions { gap: 8px; } .hvc-nav { width: min(340px, 90vw); padding-inline: 22px; } } @media (max-width: 380px) { .hvc-brand__img { max-height: min(var(--hvc-logo-h, 72px), 42px); } .hvc-prop__place { right: 10px; padding: 6px 10px 7px; font-size: 10px; letter-spacing: .06em; } .hvc-prop__index { left: 10px; } } /* Lock the page behind any open overlay. The v2 rule was scoped `body.hvc`, which only matches when the body carries that class — this makes the lock unconditional so the page never scrolls behind the open drawer. No `touch-action` here: it would also block panning INSIDE the drawer. */ body.is-locked { overflow: hidden; } /* Nothing anywhere should be able to push a horizontal scrollbar on mobile. */ @media (max-width: 980px) { html, body { overflow-x: hidden; } } /* ========================================================================= 14. v3.1.0 — shorter page headers, one-line card titles, the property showcase page, and the mobile drawer width fix. ====================================================================== */ /* --- Inner page title band: shorter, and settable from Theme Settings ----- */ /* Was clamp(320px, 46vh, 480px), which dwarfed short pages like About and Contact. Now driven by --hvc-phero-h (Theme Settings -> Header & Menu -> Inner Page Header Height), defaulting to 300px. */ /* v3.5.2 — this band (About, Contact, Amenities, single Room/Property, the blog — every inner page except the Properties archive, which uses .hvc-phero--compact above) still read as too tall site-wide even at the saved 300px. --hvc-phero-h is a value already saved in this site's database (Theme Settings -> Header & Menu -> Inner Page Header Height), so a smaller code default cannot change it — but scaling it down here, the same way .hvc-phero--compact already does for the archive, applies immediately regardless of what that slider is set to. The slider still works exactly as before for further manual adjustment; this just changes what "100%" on it renders as. */ /* ========================================================================= v3.5.3 — THE ACTUAL CAUSE of the "huge gap under the header" reported repeatedly on the Properties pages, and of the too-tall title bands. Every title band carried `padding-top: calc(var(--hvc-header-h) + Npx)` and `min-height: calc(... + var(--hvc-header-h))`. That allowance exists for ONE situation: a transparent header that FLOATS OVER the content, so the band has to reserve its own height underneath it. But per inc/setup.php, `has-transparent-header` is only added on the front page and single Room pages. On every other page — the Properties archive, single Property, About, Contact, Amenities, FAQ, Gallery, the blog — the header is `position: sticky`, i.e. IN NORMAL FLOW: it already occupies its own 85px at the top of the document and the band starts below it. Reserving another 85px inside the band is therefore pure dead space, measured live at exactly 92px of empty band above the eyebrow text. This is why 3.3.7 (+32 -> +12), 3.5.1 (+12 -> +6) and 3.5.2 never fixed it: each one trimmed only the small `+Npx` term and left the 85px `var(--hvc-header-h)` sitting in front of it. The header allowance is now scoped to the pages that actually float the header, and removed everywhere else. ====================================================================== */ .hvc-phero { min-height: calc(var(--hvc-phero-h, 300px) * .55); padding: 36px 0 32px; } .hvc-phero__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; } .hvc-phero__sub { margin-top: 8px; font-size: 15px; } .hvc-phero .hvc-crumbs { margin-top: 12px; } /* The one case the header allowance is real: the header floats over the band (front page, single Room). Restored only here. */ body.has-transparent-header .hvc-phero { min-height: calc(var(--hvc-phero-h, 300px) * .55 + var(--hvc-header-h)); padding-top: calc(var(--hvc-header-h) + 36px); } @media (max-width: 720px) { .hvc-phero { min-height: calc(var(--hvc-phero-h, 300px) * .42); padding: 26px 0 24px; } .hvc-phero__title { font-size: clamp(24px, 7vw, 32px); } body.has-transparent-header .hvc-phero { min-height: calc(var(--hvc-phero-h, 300px) * .42 + var(--hvc-header-h)); padding-top: calc(var(--hvc-header-h) + 26px); } } /* The Properties archive's listing band — same vertical rhythm as every other page's band (that is the "consistency" asked for), just a slightly smaller minimum since a listing title carries no sub-heading. */ .hvc-phero--compact { min-height: calc(var(--hvc-phero-h, 300px) * .42); padding: 30px 0 26px; } .hvc-phero--compact .hvc-phero__title { font-size: clamp(24px, 2.9vw, 34px); } body.has-transparent-header .hvc-phero--compact { min-height: calc(var(--hvc-phero-h, 300px) * .42 + var(--hvc-header-h)); padding-top: calc(var(--hvc-header-h) + 30px); } @media (max-width: 720px) { .hvc-phero--compact { min-height: calc(var(--hvc-phero-h, 300px) * .34); padding: 24px 0 20px; } .hvc-phero--compact .hvc-phero__title { font-size: clamp(22px, 6.2vw, 28px); } } /* --- Property card: bold, one line ---------------------------------------- */ .hvc-prop__title { font-weight: 700; font-size: clamp(17px, 1.45vw, 21px); letter-spacing: -.005em; /* One line, always. If a name genuinely cannot fit, set a "Short Name for Cards" on the property — ellipsis is the safety net, not the plan. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hvc-prop__title a { display: block; overflow: hidden; text-overflow: ellipsis; } /* Two cards per row = wider cards, so the name can breathe. */ @media (max-width: 1100px) and (min-width: 721px) { .hvc-prop__title { font-size: 20px; } } @media (max-width: 720px) { .hvc-prop__title { font-size: 19px; } } /* --- Property page: booking rail ------------------------------------------ */ .hvc-detail__subhead { font-size: 20px; margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--hvc-line); } .hvc-bookcard__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--hvc-muted); } .hvc-btn--wa { background: #25D366; color: #08301a; font-weight: 700; border: 1px solid rgba(0, 0, 0, .08); } .hvc-btn--wa:hover { background: #1fbb59; color: #062615; } /* --- Property page: grouped photo tour ------------------------------------ */ .hvc-tour__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; } .hvc-tour__tabs .hvc-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .hvc-tour__tabs .hvc-chip small { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(200, 151, 63, .16); color: var(--hvc-gold-deep); font-size: 11px; font-weight: 700; } .hvc-tour__tabs .hvc-chip.is-active small { background: rgba(255, 255, 255, .22); color: inherit; } .hvc-tour__panel { display: none; } .hvc-tour__panel.is-active { display: block; } .hvc-tour__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 34%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--hvc-gold) transparent; } .hvc-tour__strip::-webkit-scrollbar { height: 6px; } .hvc-tour__strip::-webkit-scrollbar-thumb { background: var(--hvc-gold); border-radius: 999px; } .hvc-tour__strip::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 999px; } .hvc-tour__item { margin: 0; scroll-snap-align: start; } .hvc-tour__item a { position: relative; display: block; overflow: hidden; border-radius: var(--hvc-radius-lg); background: var(--hvc-ink-2); box-shadow: var(--hvc-shadow-sm); } .hvc-tour__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .8s var(--hvc-ease); } .hvc-tour__item a:hover img { transform: scale(1.05); } .hvc-tour__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--hvc-ink); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--hvc-ease), transform .3s var(--hvc-ease); } .hvc-tour__item a:hover .hvc-tour__zoom { opacity: 1; transform: none; } .hvc-tour__item figcaption { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hvc-muted); } @media (max-width: 980px) { .hvc-tour__strip { grid-auto-columns: minmax(260px, 62%); gap: 14px; } } @media (max-width: 600px) { .hvc-tour__strip { grid-auto-columns: 82%; gap: 12px; } .hvc-tour__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .hvc-tour__tabs .hvc-chip { flex: 0 0 auto; } } /* --- Property page: fixed call / WhatsApp bar on phones -------------------- */ .hvc-propbar { display: none; } @media (max-width: 980px) { .hvc-propbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--hvc-line); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5); } .hvc-propbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--hvc-radius-pill); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .hvc-propbar__btn--call { background: linear-gradient(135deg, var(--hvc-gold-soft), var(--hvc-gold)); color: #1a1509; } .hvc-propbar__btn--wa { background: #25D366; color: #08301a; } /* Keep the bar off the footer, and off the floating WhatsApp bubble. */ body.single-hvc_property .hvc-footer { padding-bottom: 84px; } body.single-hvc_property .hvc-wa { bottom: 82px; } } /* --- Mobile drawer: "Our Hotels" was stretching it ------------------------ */ /* The submenu items are long property names. Without min-width:0 on the flex children, the drawer's intrinsic width grew to the longest name and pushed past the viewport. Everything below simply lets that text wrap. */ @media (max-width: 980px) { .hvc-nav { width: min(330px, 86vw); max-width: 86vw; box-sizing: border-box; } .hvc-nav__list, .hvc-nav__list > li, .hvc-submenu, .hvc-submenu > li { min-width: 0; max-width: 100%; } .hvc-nav__link { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-right: 42px; } .hvc-submenu .hvc-nav__link { padding-right: 14px; } /* Logo hard left, burger hard right, nothing between them on mobile. */ .hvc-header__inner { justify-content: space-between; } .hvc-brand { margin-right: auto; } .hvc-header__actions { margin-left: auto; } } /* ========================================================================= 15. v3.2.0 — centred header menu, room mix, timeline spacing. ====================================================================== */ /* --- Header menu centred between the logo and the actions ----------------- */ /* Was `margin-left: auto`, which shoved the whole menu against the phone button. Centring it needs the two flanking groups to be equal-weight flex items, so they get `flex: 1` and the nav is centred in what is left. */ /* v3.2.2 — third attempt, and this one cannot overlap by construction. Flex with `flex: 1 1 0` made the two flanking groups EQUAL width, which crushed the buttons. Absolute-centring stopped crushing them but let the menu sit UNDER the phone pill, because the right-hand group is far wider than the logo and absolute positioning ignores its neighbours entirely. A three-column grid fixes both: `1fr auto 1fr` gives the menu its natural width in a centre track, and grid tracks cannot overlap. When the right group needs more than its 1fr share the menu slides left rather than being covered — visually centred whenever there is room, never on top of a button. */ @media (min-width: 981px) { .hvc-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .hvc-brand { justify-self: start; } .hvc-nav { margin: 0; justify-self: center; min-width: 0; } .hvc-nav__list { justify-content: center; flex-wrap: nowrap; } .hvc-header__actions { justify-self: end; flex-wrap: nowrap; } } /* --- Property page: room mix --------------------------------------------- */ .hvc-mix { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 20px; list-style: none; margin: 0 0 6px; padding: 0; } .hvc-mix__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--hvc-line); border-radius: var(--hvc-radius); box-shadow: var(--hvc-shadow-sm); } .hvc-mix__icon { color: var(--hvc-gold-deep); flex: 0 0 auto; } /* v3.3.9 — optional per-room-type photo, same slot the icon otherwise fills. */ .hvc-mix__photo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--hvc-radius-sm); overflow: hidden; } .hvc-mix__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hvc-mix__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .hvc-mix__text strong { font-size: 20px; color: var(--hvc-ink); } .hvc-mix__text small { font-size: 12px; color: var(--hvc-muted); } /* Stat bar sits inside the main column now, not in its own band. */ .hvc-statbar--inline { margin-top: 30px; } /* --- About timeline: the year was touching the rail ----------------------- */ /* The dot sat at left:82px with the year column ending at 86px, so at the theme's serif the digits ran straight into the rail and the dot. Widening the column and pulling the year in by its own padding separates them. */ .hvc-timeline::before { left: 104px; } .hvc-timeline__item { grid-template-columns: 104px 1fr; gap: 34px; } .hvc-timeline__item::before { left: 100px; } .hvc-timeline__year { padding-right: 16px; line-height: 1.1; } @media (max-width: 720px) { .hvc-timeline::before { left: 7px; } .hvc-timeline__item { grid-template-columns: 1fr; gap: 6px; } .hvc-timeline__item::before { left: 3px; } .hvc-timeline__year { padding-right: 0; } } /* --- Property page: the standalone intro block (v3.3.1) ------------------- */ .hvc-prose--intro { max-width: 74ch; } /* v3.5.5 — the brass name-plate, lifted out of the property card so the property PAGE can use the same component for its locality eyebrow. The card's own .hvc-prop__place keeps its absolute positioning and its bottom-only corners (it hangs off the top of the photo); this is the same plate as a normal inline element, with all four corners rounded. */ .hvc-plate { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 8px 14px 9px; background: linear-gradient(135deg, #f0d79a 0%, var(--hvc-gold-soft) 38%, var(--hvc-gold) 100%); color: #1a1509; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1; border-radius: var(--hvc-radius-pill); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .45); overflow: hidden; } .hvc-plate svg { flex: 0 0 auto; opacity: .85; } .hvc-plate__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Same slow brass shine as the card plate. */ .hvc-plate::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg); animation: hvc-plate-shine 5.5s var(--hvc-ease) infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hvc-plate::after { animation: none; } } .hvc-pgallery__place { margin-bottom: 12px; } /* v3.5.5 — the Share button, now the LAST element in the content column. */ /* v3.5.5 — now the last element in the content column (after the stat bar), so it gets a rule ABOVE it to close the column off. */ .hvc-share-row { max-width: 74ch; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--hvc-line); } @media (max-width: 720px) { .hvc-share-row { margin: 24px 0 0; padding-top: 18px; } } /* v3.5.4 — room cards with prices hidden (Theme Settings -> Booking) have only the button left in the footer row; without this it stays stuck to the left where the price used to start the row. */ .hvc-room__foot--noprice { justify-content: flex-end; } /* v3.3.3 — "What you get here" moved up to sit under the description, in the space the removed photo tour section used to occupy. Matches the intro's measure instead of the narrower two-column detail layout it used to live in. */ .hvc-featurelist--intro { max-width: 74ch; } /* --- Property page: photo-grid header + Share button (v3.3.3) ------------- Replaces the plain dark hero band on single-hvc_property.php with a one-large + four-small photo grid (the "cover photo" pattern most travel/rental listings use), because a hotel is sold by what the rooms actually look like. Markup: template-parts/property-gallery-hero.php. */ .hvc-pgallery { position: relative; background: var(--hvc-cream); /* v3.5.3 — the header allowance is GONE, not trimmed again. 3.3.7 (+32 -> +12) and 3.5.1 (+12 -> +6) both wrote in their own comments that "the header is solid/in-flow on this page, so this is just a small breathing gap" — and then both left `var(--hvc-header-h) +` in front of that gap, so the page kept reserving a second header's worth of empty cream (85px, measured live) above the property name. That 85px was the reported gap. The 36px below matches .hvc-phero's top padding exactly, so this page's title sits at the same height from the header as every other page's title band. */ padding: 36px 0 0; } .hvc-pgallery__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .hvc-pgallery__text { min-width: 0; } .hvc-pgallery__title { font-size: clamp(28px, 3.6vw, 42px); margin: 6px 0 0; } .hvc-pgallery__sub { color: var(--hvc-muted); max-width: 62ch; margin: 10px 0 0; } /* The shared .hvc-crumbs component is styled for the old dark hero band — this header is light, so its breadcrumb needs its own colours. */ .hvc-pgallery .hvc-crumbs { color: var(--hvc-muted); } .hvc-pgallery .hvc-crumbs a:hover, .hvc-pgallery .hvc-crumbs [aria-current] { color: var(--hvc-gold-deep); } .hvc-pgallery__share { flex: 0 0 auto; white-space: nowrap; margin-top: 4px; } .hvc-pgallery__share.is-copied { border-color: var(--hvc-gold); color: var(--hvc-gold-deep); } .hvc-pgallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; aspect-ratio: 16 / 7.5; border-radius: var(--hvc-radius-lg); overflow: hidden; } .hvc-pgallery__tile { position: relative; display: block; overflow: hidden; background: var(--hvc-ink-2); } .hvc-pgallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--hvc-ease); } .hvc-pgallery__tile:hover img { transform: scale(1.04); } /* v3.5.5 — photos 6..N, shown as a thumbnail row under the cover grid instead of the old `display: none` overflow. auto-fill means the row grows to however many photos exist, wrapping onto further rows, so the page genuinely reflects what has been uploaded. */ /* --- Lightbox: swipeable on touch (v3.5.5) -------------------------------- */ /* The figure is the swipe surface. `touch-action: none` hands BOTH axes to the script: the browser would otherwise claim the pan and fire pointercancel mid-gesture, so neither the horizontal swipe nor the swipe-down-to-dismiss would land reliably. Nothing is lost by taking the vertical axis too — the lightbox only opens with `body.is-locked`, so there is no page scrolling underneath to preserve. */ .hvc-lightbox__figure { touch-action: none; } .hvc-lightbox__figure img { user-select: none; -webkit-user-drag: none; } /* Photo counter — "3 / 12". Without it, a swipeable gallery gives no clue how many photos there are or where you are in them. */ .hvc-lightbox__count { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: var(--hvc-radius-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; pointer-events: none; } @media (max-width: 720px) { /* Phones: the swipe is the primary gesture, so the padding that was reserving room for the desktop side arrows comes back as picture. The arrows move to the bottom, where a thumb reaches, instead of hugging the screen edges at mid-height. */ .hvc-lightbox { padding: 16px; } .hvc-lightbox__figure { max-width: 100%; } .hvc-lightbox__figure img { max-height: 66vh; } .hvc-lightbox__nav { top: auto; bottom: 22px; width: 52px; height: 52px; background: rgba(255, 255, 255, .12); } .hvc-lightbox__nav--prev { left: 50%; margin-left: -64px; } .hvc-lightbox__nav--next { right: 50%; margin-right: -64px; } .hvc-lightbox__close { top: 14px; right: 14px; } .hvc-lightbox__count { top: 22px; } .hvc-lightbox__figure figcaption { margin-top: 10px; font-size: 13px; padding-bottom: 76px; /* clear the bottom arrows */ } } /* v3.5.6 — photos past the fifth are in the DOM but not drawn: they exist so the lightbox can walk the whole set, however many there are. The 3.5.5 thumbnail row that displayed them all is reverted at the client's request — it competed with the cover grid and made the page header very long. */ .hvc-pgallery__tile--overflow { display: none; } /* Five tiles: one large (2×2) + four single cells, left to right. */ .hvc-pgallery__grid--5 .hvc-pgallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .hvc-pgallery__grid--5 .hvc-pgallery__tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; } .hvc-pgallery__grid--5 .hvc-pgallery__tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; } .hvc-pgallery__grid--5 .hvc-pgallery__tile:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; } .hvc-pgallery__grid--5 .hvc-pgallery__tile:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; } /* Fewer photos: even splits rather than leaving holes in a grid built for five. */ .hvc-pgallery__grid--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .hvc-pgallery__grid--1 .hvc-pgallery__tile:nth-child(1) { grid-column: 1; grid-row: 1; } .hvc-pgallery__grid--2 { grid-template-rows: 1fr; } .hvc-pgallery__grid--2 .hvc-pgallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .hvc-pgallery__grid--2 .hvc-pgallery__tile:nth-child(2) { grid-column: 3 / 5; grid-row: 1; } .hvc-pgallery__grid--3 { grid-template-rows: 1fr; } .hvc-pgallery__grid--3 .hvc-pgallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } .hvc-pgallery__grid--3 .hvc-pgallery__tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1; } .hvc-pgallery__grid--3 .hvc-pgallery__tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1; } .hvc-pgallery__grid--4 .hvc-pgallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; } .hvc-pgallery__grid--4 .hvc-pgallery__tile:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; } .hvc-pgallery__grid--4 .hvc-pgallery__tile:nth-child(3) { grid-column: 1 / 3; grid-row: 2 / 3; } .hvc-pgallery__grid--4 .hvc-pgallery__tile:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; } /* The "View all N photos" badge on the fifth tile (restored in v3.5.6). */ .hvc-pgallery__more { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: #fff; color: var(--hvc-ink); border-radius: var(--hvc-radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .01em; box-shadow: var(--hvc-shadow-sm); } @media (max-width: 720px) { /* v3.5.3 — header allowance removed here too; 26px matches .hvc-phero's mobile top padding so the property page lines up with every other page's title band on phones as well. */ .hvc-pgallery { padding-top: 26px; } .hvc-pgallery__head { flex-direction: column; align-items: flex-start; } /* A cramped 5-cell grid does not survive a phone screen — swap it for the same scroll-snapping strip pattern already used by the photo tour further down this page. Higher specificity needed to beat the grid--N nth-child placement rules above at equal media-query weight. */ .hvc-pgallery__grid { grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: column; grid-auto-columns: 84%; aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--hvc-radius); scrollbar-width: thin; scrollbar-color: var(--hvc-gold) transparent; } .hvc-pgallery__grid .hvc-pgallery__tile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: var(--hvc-radius); } }