/* ══════════════════════════════════════════════════════════════════════ VAYANTA — Premium Destination V2 (Himachal redesign) Port of the approved prototype (LANDING-PAGE/prototype-v2/Main.dc.html). Section styles are inline in the Blade view, exactly as in the prototype; this file carries the prototype's CSS (scoped under .vv2), the 760px media query, and the interactive states the prototype drew via JS. ══════════════════════════════════════════════════════════════════════ */ body:has(.vv2) { background: #F5F4EF; margin: 0; } /* ONE scrollbar: the shared layout sets overflow-x:hidden on BOTH html and body, which turns into a second scroll container (double scrollbar, jerky wheel, broken sticky header). On v2 pages only, release both and clip horizontal overflow on the page wrapper instead. */ html:has(.vv2), body:has(.vv2) { overflow: visible !important; } .vv2 { overflow-x: clip; line-height: 1.5; -webkit-font-smoothing: antialiased; } .vv2 *, .vv2 *::before, .vv2 *::after { box-sizing: border-box; } .vv2 img { max-width: none; display: block; } .vv2 a { color: #0E3B2E; } .vv2 a:hover { color: #08261D; } .vv2 h1, .vv2 h2, .vv2 h3 { color: inherit; } .vv2 [hidden] { display: none !important; } .vv2 :focus-visible { outline: 3px solid #F2A93B; outline-offset: 2px; } /* ── Prototype helmet CSS ─────────────────────────────────────────────── */ @keyframes vpulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 70% { box-shadow: 0 0 0 10px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } } @keyframes vfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes vsnow { 0% { transform: translate3d(0, -12px, 0); opacity: 0; } 12% { opacity: var(--o, .9); } 50% { transform: translate3d(16px, 480px, 0); } 85% { opacity: var(--o, .9); } 100% { transform: translate3d(-8px, 980px, 0); opacity: 0; } } @keyframes vslide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .vv2 .vdot { width: 9px; height: 9px; border-radius: 50%; background: #34C759; animation: vpulse 1.8s infinite; flex: none; display: inline-block; } .vv2 .vflake { position: absolute; top: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); animation: vsnow linear infinite; will-change: transform; } .vv2 .vcard { transition: transform .25s ease, box-shadow .25s ease; } .vv2 .vcard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14,59,46,.18); } .vv2 .vtile { transition: transform .25s ease; } .vv2 .vtile:hover { transform: scale(1.03); color: #fff; } .vv2 .vbubble { animation: vfloat 3.2s ease-in-out infinite; } .vv2 .vchips { display: flex; gap: 10px; flex-wrap: wrap; } .vv2 .vchips button { white-space: nowrap; flex: none; } .vv2 .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; } /* 6 cards per page → 3 columns on wide screens so every "page" fills whole rows. */ @media (min-width: 1100px) { .vv2 .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vv2 .vdest { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .vv2 .vgal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 14px; } .vv2 .vgal-big { grid-column: span 2; grid-row: span 2; } .vv2 .vswipe { display: none; } .vv2 .vbar { display: none; } .vv2 .vdrawer { animation: vslide .28s ease; } .vv2 details summary { list-style: none; cursor: pointer; } .vv2 details summary::-webkit-details-marker { display: none; } .vv2 details[open] .vplus { transform: rotate(45deg); } .vv2 .vplus { transition: transform .2s ease; } .vv2 .vhero-h1 { text-shadow: 0 2px 24px rgba(0,0,0,.45); } /* Planner chips (prototype chip(on) styles). */ .vv2 .vchip { min-height: 44px; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; background: #fff; color: #13201B; border: 1.5px solid #D9DDD6; } .vv2 .vchip.is-on { background: #0E3B2E; color: #fff; border-color: #0E3B2E; } /* Packages: 6 first, "Show more" adds 6; filters search all (JS sets the classes). */ .vv2.vv2-js .vv2-card--more:not(.is-paged-in) { display: none; } .vv2 .vcard.is-paged-out { display: none !important; } .vv2 .vcard.is-filtered-out { display: none !important; } /* Utility bar + header logo */ .vv2 .vv2-util__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Transparent logo on the light header; padding trimmed via inline crop. */ .vv2 .vv2-logo-link { display: inline-flex; align-items: center; min-height: 44px; flex: none; } .vv2 .vv2-logo { position: relative; display: block; height: 42px; overflow: hidden; flex: none; } .vv2 .vv2-logo--plain { display: inline-flex; align-items: center; overflow: visible; } .vv2 .vv2-logo img { image-rendering: auto; } .vv2 .vv2-header nav a { transition: color .2s ease; } .vv2 .vv2-header nav a:hover { color: #1F7A4D !important; } /* Google reviews + video stories (prototype .vvids / .vplay) */ .vv2 .vplay { transition: transform .2s ease; } .vv2 .vvid:hover .vplay { transform: scale(1.08); } .vv2 .vvids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .vv2 .vvid-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Masonry gallery: natural aspect ratio, no crop (prototype .vmasonry) */ .vv2 .vmasonry { column-count: 3; column-gap: 14px; } .vv2 .vmasonry > div { break-inside: avoid; margin: 0 0 14px; border-radius: 16px; overflow: hidden; position: relative; background: #E6E8E2; } .vv2 .vv2-galbtn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .vv2 .vv2-galbtn img { width: 100%; height: auto; display: block; } .vv2 .vv2-cap { position: absolute; left: 10px; bottom: 10px; background: rgba(5,18,14,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; pointer-events: none; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vv2 .vv2-dgal button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; } /* Lightbox (only it and the drawer may scroll internally) */ .vv2-lb { position: fixed; inset: 0; z-index: 90; background: rgba(5,18,14,.94); display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; } .vv2-lb__fig { margin: 0; max-width: min(1200px, 100vw - 120px); max-height: calc(100vh - 110px); display: flex; flex-direction: column; align-items: center; gap: 10px; } .vv2-lb__fig img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 10px; display: block; } .vv2-lb__fig figcaption { color: #fff; font-size: 14px; font-weight: 700; text-align: center; min-height: 20px; } .vv2-lb__x, .vv2-lb__nav { position: absolute; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); color: #0E3B2E; font-weight: 800; cursor: pointer; width: 48px; height: 48px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; } .vv2-lb__x { top: 16px; right: 16px; } .vv2-lb__prev { left: 16px; top: 50%; transform: translateY(-50%); } .vv2-lb__next { right: 16px; top: 50%; transform: translateY(-50%); } .vv2-lb__count { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; } [data-v2-drawer] [data-v2-dr-body] { overscroll-behavior: contain; } .vv2 [data-v2-tabs] { overflow-y: hidden !important; overscroll-behavior-x: contain; } .vv2-sheet__panel { overscroll-behavior: contain; } /* ── Hero: photo crossfade + Ken Burns under the snow and overlays ─────── */ .vv2-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .vv2-hero__slide.is-active { opacity: 1; } .vv2-hero__slide picture { display: contents; } /*