/* * Rentals & Pricing — modernised from the old Wix page. * * Same text, images, links and colours as the replica; the fixed Wix canvases * are replaced by fluid grid/flex layouts inside .wx-container, product cards * with scannable price boxes, and a sticky category bar. Every colour an * element had in the Wix replica is kept exactly (including the off-token * originals: #b2ecff, #ffb730, #ff0006, #084255, #003b4d, #2608fb, #ffdb98, * #000, #fafafa and the button hover shades); new layout parts use existing * site colours. * * Breakpoints: 560 / 640 / 768 (tablet) / 1024 (desktop). Text that the old * site showed only on desktop or only on mobile keeps that split at 981px * (.wxr-lg / .wxr-lgi desktop, .wxr-sm mobile). */ body.page-template-template-rentals { background: #b2ecff url("../img/wix/38b498_e25199bcc4144cfa9c22a6cc4273c660.webp") center top / max(100%, 820px) auto no-repeat; } /* ---------- Base ---------- */ .wxr { --wxr-gold: #ffb730; /* the replica's banner border, rules and badge outline */ /* The replica's shadows were neutral black; keep that tint on the shared depth scale. */ --wx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12); --wx-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.45); --wx-shadow-lg: 0 22px 50px -22px rgba(0, 0, 0, 0.5); --wxr-top: 92px; /* sticky header bottom — measured by wix-rentals.js */ --wxr-bar: 62px; /* category bar height — measured by wix-rentals.js */ display: flex; flex-direction: column; overflow-x: clip; color: #000; font-family: var(--wx-font-body); font-size: var(--wx-fs-body); line-height: var(--wx-lh-body); text-align: left; } .wxr *, .wxr *::before, .wxr *::after { box-sizing: border-box; } .wxr :where(p, h1, h2, h3, h4, figure, hr) { margin: 0; padding: 0; } /* Icon-only controls use the page family instead of the browser's default. */ .wxr :where(button) { font-family: inherit; } .wxr [id] { /* --wxr-sp: any scroll-padding-top already on (it adds to this). */ scroll-margin-top: calc(var(--wxr-top) + var(--wxr-bar) + 12px - var(--wxr-sp, 0px)); } .wxr b, .wxr strong, .wxr .wxr-bold { font-weight: 700; } .wxr .wxr-i { font-style: italic; } .wxr .wxr-u { text-decoration: underline; text-underline-offset: 3px; } .wxr .wxr-sub { font-size: 0.8em; } .wxr .wxr-mag { color: var(--wx-magenta); } .wxr .wxr-blue { color: var(--wx-blue); } .wxr .wxr-red { color: var(--wx-red); } .wxr .wxr-y { color: var(--wx-yellow); } .wxr .wxr-cyan { color: var(--wx-sky); } .wxr .wxr-orange { color: var(--wx-orange); } .wxr .wxr-red2 { color: #ff0006; } .wxr .wxr-dark { color: var(--wx-ink); } .wxr .wxr-teal { color: #084255; } /* Copy the old site showed only on desktop (981+) or only on mobile. */ .wxr .wxr-lg, .wxr .wxr-lgi { display: none; } @media (min-width: 981px) { .wxr .wxr-lg { display: block; } .wxr .wxr-lgi { display: inline; } .wxr .wxr-sm { display: none; } } /* ---------- Hero ---------- */ .wxr-hero { order: -1; /* above the category bar, which comes first in the markup */ } .wxr-hero-in { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2rem); padding-top: clamp(96px, 44.5vw - 300px, 340px); padding-bottom: var(--wx-gap); text-align: center; } .wxr-h1 { color: var(--wx-white); font-family: var(--wx-font-display); font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem); font-weight: 900; line-height: var(--wx-lh-tight); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } .wxr-promo { position: relative; width: 100%; max-width: 780px; padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1rem, 7vw, 5.5rem); background: var(--wx-white); border: 4px solid var(--wxr-gold); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow-lg); } .wxr-promo-txt { color: var(--wx-blue); font-family: var(--wx-font-body); font-size: clamp(1.05rem, 0.85rem + 1vw, 1.625rem); font-style: italic; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; } .wxr-badge { position: absolute; top: -84px; right: -4px; width: 92px; aspect-ratio: 1; pointer-events: none; } .wxr-badge svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(43deg); filter: drop-shadow(0 6px 10px rgba(47, 46, 46, 0.3)); } .wxr-badge path { fill: var(--wx-red); stroke: var(--wxr-gold); stroke-width: 4px; vector-effect: non-scaling-stroke; } .wxr-badge-txt { position: absolute; inset: 0; display: grid; place-content: center; color: var(--wx-yellow); font-family: var(--wx-font-body); font-size: 0.625rem; font-weight: 700; line-height: 1.15; text-align: center; transform: rotate(-18deg); } @media (min-width: 1024px) { .wxr-badge { top: -48px; right: auto; left: -52px; width: 124px; } .wxr-badge-txt { font-size: 0.8125rem; } } @media (min-width: 981px) { .wxr-badge-txt { color: var(--wx-white); } } @media (max-width: 1023px) { .wxr-promo { margin-top: 3.5rem; } } /* ---------- Sticky category bar ---------- */ .wxr-nav { position: sticky; top: var(--wxr-top); z-index: 40; background: rgba(255, 255, 255, 0.92); border-block: 1px solid rgba(0, 47, 166, 0.08); box-shadow: var(--wx-shadow-sm); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .wxr-nav-list { display: flex; gap: 0.5rem; max-width: var(--wx-container); margin: 0 auto; padding: 0.5rem var(--wx-gutter); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--wx-gutter); scroll-snap-type: x proximity; scrollbar-width: none; } .wxr-nav-list::-webkit-scrollbar { display: none; } .wxr-nav li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; } /* Centre the pills when they fit; scroll from the start when they don't. */ .wxr-nav li:first-child { margin-left: auto; } .wxr-nav li:last-child { margin-right: auto; } .wxr-nav a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--wx-tap); padding: 0 1.1rem; background: var(--wx-white); border: 2px solid rgba(0, 47, 166, 0.18); border-radius: var(--wx-radius-pill); color: var(--wx-blue); font-family: var(--wx-font-body); font-size: 1rem; font-style: italic; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--wx-dur) var(--wx-ease), border-color var(--wx-dur) var(--wx-ease), color var(--wx-dur) var(--wx-ease); } .wxr-nav svg { flex: 0 0 10px; width: 10px; height: 10px; fill: transparent; stroke: currentColor; stroke-width: 5; transition: fill var(--wx-dur) var(--wx-ease); } .wxr-nav a:hover { border-color: var(--wx-blue); color: var(--wx-blue); } .wxr-nav a:hover svg { fill: currentColor; } .wxr-nav a.is-active { background: var(--wx-blue); border-color: var(--wx-blue); color: var(--wx-white); } .wxr-nav a.is-active svg { fill: currentColor; } .wxr-nav a:focus-visible { outline-offset: -2px; } /* ---------- Zones and panels ---------- */ .wxr-zone { position: relative; isolation: isolate; padding-block: var(--wx-section); } .wxr-zone--top { padding-top: var(--wx-gap); } /* Deep-blue ground while a band photo is still loading, so white headings stay legible. */ .wxr-zone--band { background-color: var(--wx-blue); } .wxr-zone-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; } /* Section headings use .wx-head / .wx-title (wix-tokens.css); these rules keep each title's colour and the wave beside the band titles. */ .wxr-zone-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; max-width: none; } .wxr-band-h { color: var(--wx-white); text-transform: uppercase; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } .wxr-wave { display: block; width: clamp(56px, 6vw, 84px); height: auto; } .wxr-panel { display: grid; gap: var(--wx-gap); padding: clamp(1rem, 3vw, 2.5rem); background: var(--wx-white); border-radius: var(--wx-radius-lg); box-shadow: var(--wx-shadow-lg); } .wxr-rule { color: inherit; height: 3px; margin: 0; background: var(--wxr-gold); border: 0; border-radius: 3px; } .wxr-cat { display: grid; gap: var(--wx-gap); } .wxr-center { display: flex; justify-content: center; } /* ---------- Type ---------- */ /* Card titles: the title face one step below the band headings. */ .wxr-h2 { color: var(--wx-magenta); font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); } /* The stack's gap is part of the heading's space, so the total matches .wx-head. */ .wxr-stack > .wx-head { margin-bottom: calc(clamp(1.25rem, 3vw, 2.25rem) - 0.9rem); } .wxr-h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 0.6rem; background: var(--wxr-gold); border-radius: 4px; } .wxr-h2-sub { font-size: 0.62em; white-space: nowrap; } .wxr-h3 { font-family: var(--wx-font-body); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; } .wxr-lead, .wxr-copy { color: #000; font-family: var(--wx-font-body); font-size: var(--wx-fs-body); line-height: var(--wx-lh-body); } .wxr-copy p + p { margin-top: 0.6rem; } .wxr-copy .wxr-gap { display: none; } .wxr-incl { color: #000; font-family: var(--wx-font-body); font-size: var(--wx-fs-body); font-weight: 700; line-height: 1.5; } .wxr-incl-h { color: var(--wx-magenta); letter-spacing: 0.03em; } .wxr-incl-h:not(:first-child) { margin-top: 0.5rem; } .wxr-save { color: var(--wx-blue); font-family: var(--wx-font-body); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-style: italic; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; text-align: center; } /* ---------- Buttons ---------- */ .wxr .wxr-btn { min-width: 10.5rem; letter-spacing: 0.04em; white-space: nowrap; } .wxr .wxr-btn, .wxr .wxr-btn:hover, .wxr .wxr-btn:focus-visible { color: var(--wx-white); text-decoration: none; } .wxr .wxr-btn { border-color: var(--wx-white); } .wxr .wxr-btn.wx-btn--magenta:hover, .wxr .wxr-btn.wx-btn--magenta:focus-visible { background: #e600a8; } .wxr .wxr-btn--red { background: #ff0006; } .wxr .wxr-btn--red:hover, .wxr .wxr-btn--red:focus-visible { background: #e00005; } .wxr .wxr-btn.wx-btn--green:hover, .wxr .wxr-btn.wx-btn--green:focus-visible { background: #3c923c; } /* ---------- Photos ---------- */ .wxr-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wx-ice); border-radius: var(--wx-radius); } .wxr-photo .wxr-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--wx-ease); } /* ---------- Feature rows (photo/slideshow beside text) ---------- */ .wxr-feature { display: grid; gap: var(--wx-gap); align-items: start; } .wxr-feature-body { container-type: inline-size; min-width: 0; } .wxr-feature-media { display: grid; gap: 0.75rem; min-width: 0; } .wxr-feature-media .wxr-photo { box-shadow: var(--wx-shadow); } .wxr-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; } .wxr-stack > * { max-width: 100%; } .wxr-stack > .wxr-last { order: 9; margin-top: 0.25rem; } .wxr-photo--tall { aspect-ratio: 4 / 5; } .wxr-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wxr-trio .wxr-photo:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } @media (min-width: 768px) { .wxr-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .wxr-feature--card .wxr-feature-media { position: sticky; top: calc(var(--wxr-top) + var(--wxr-bar) + 16px); } .wxr-feature--video { grid-template-areas: "media body" "video body"; grid-template-rows: auto 1fr; } .wxr-feature--video > .wxr-feature-media { grid-area: media; } .wxr-feature--video > .wxr-feature-body { grid-area: body; } .wxr-feature--video > .wxr-video { grid-area: video; align-self: start; } } @media (min-width: 1024px) { .wxr-feature--games { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } } @media (min-width: 768px) and (max-width: 1023px) { .wxr-feature--games { grid-template-columns: 1fr; } } /* ---------- Product cards ---------- */ .wxr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wx-gap); } .wxr-item { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--wx-white); border: 1px solid rgba(0, 47, 166, 0.1); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease); } .wxr-item:hover { transform: translateY(-3px); box-shadow: var(--wx-shadow-lg); } .wxr-item:hover .wxr-img { transform: scale(1.03); } .wxr-item-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 0; } .wxr-item-media .wxr-photo { height: 100%; aspect-ratio: auto; border-radius: 0; } .wxr-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3px; background: var(--wx-white); } .wxr-item-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: clamp(1rem, 2vw, 1.35rem); } .wxr-item-body > * { max-width: 100%; } .wxr-item-body > .wxr-btn { margin-top: auto; } .wxr-ribbon { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.35rem 0.85rem; background: rgba(47, 46, 46, 0.6); border-radius: var(--wx-radius-pill); color: var(--wx-yellow); font-family: var(--wx-font-body); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .wxr-sticker { position: absolute; right: 0.25rem; bottom: 0.25rem; width: 34%; max-width: 140px; height: auto; filter: drop-shadow(0 6px 10px rgba(47, 46, 46, 0.35)); pointer-events: none; } @media (min-width: 640px) { .wxr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* An odd card out on a two-column row spans the row, photo beside text. */ .wxr-grid--3 > .wxr-item:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wxr-grid--3 > .wxr-item:last-child:nth-child(odd) .wxr-item-media { aspect-ratio: auto; min-height: 100%; } } @media (min-width: 1024px) { .wxr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wxr-grid--3 > .wxr-item:last-child:nth-child(odd) { grid-column: auto; display: flex; } .wxr-grid--3 > .wxr-item:last-child:nth-child(odd) .wxr-item-media { aspect-ratio: 4 / 3; min-height: 0; } } /* ---------- Price boxes ---------- */ .wxr-box { width: 100%; max-width: 30rem; padding: 0.5rem 1.1rem; background: var(--wx-blue); border: 3px solid var(--wx-magenta); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); color: var(--wx-white); font-family: var(--wx-font-body); font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.35; } .wxr .wxr-r { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); break-inside: avoid; } .wxr .wxr-r:last-child { border-bottom: 0; } .wxr-k { min-width: 0; } .wxr-v { flex: 0 0 auto; text-align: right; white-space: nowrap; } .wxr-k:empty { display: none; } .wxr-k:empty + .wxr-v { flex: 1 1 auto; text-align: center; white-space: normal; } .wxr .wxr-rc { display: block; text-align: center; } .wxr-box--inline { width: auto; min-width: 12rem; } @container (min-width: 34rem) { .wxr-box--cols { max-width: none; column-count: 2; column-gap: 2rem; column-rule: 1px solid rgba(255, 255, 255, 0.16); } .wxr-box--cols .wxr-r:nth-child(5), .wxr-box--cols .wxr-r:nth-child(9) { border-bottom: 0; } } /* ---------- Snorkel extras and video ---------- */ .wxr-extra { display: flex; align-items: center; gap: 1rem; width: 100%; } .wxr-vest { flex: 0 0 auto; width: clamp(84px, 24%, 140px); height: auto; border-radius: var(--wx-radius-sm); box-shadow: var(--wx-shadow-sm); } .wxr-video { width: 100%; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 4px solid var(--wx-ink); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); } .wxr-video--blue { justify-self: center; max-width: 860px; border-color: var(--wx-blue); } .wxr-video iframe { display: block; width: 100%; height: 100%; border: 0; } /* ---------- Slideshows ---------- */ .wxr-ss { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wx-ink); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); touch-action: pan-y; } .wxr-ss-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } .wxr-ss-slide.is-on { opacity: 1; } .wxr-ss-slide .wxr-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .wxr-ss-btn { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: var(--wx-tap); height: var(--wx-tap); margin: 0; padding: 0; background: rgba(255, 242, 0, 0.41); border: 0; border-radius: 50%; box-shadow: var(--wx-shadow-sm); cursor: pointer; transform: translateY(-50%); transition: background-color var(--wx-dur) var(--wx-ease), transform var(--wx-dur) var(--wx-ease); } .wxr-ss-btn:hover, .wxr-ss-btn:focus-visible { background: rgba(255, 242, 0, 0.6); transform: translateY(-50%) scale(1.06); } .wxr-ss-prev { left: 0.6rem; } .wxr-ss-next { right: 0.6rem; } .wxr-ss-btn svg { width: 10px; height: 18px; margin-inline: 2px 0; fill: none; stroke: var(--wx-white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(47, 46, 46, 0.5)); } .wxr-ss-prev svg { margin-inline: 0 2px; } .wxr-ss-count { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; padding: 0.2rem 0.6rem; background: rgba(47, 46, 46, 0.55); border-radius: var(--wx-radius-pill); color: var(--wx-white); font: 600 0.8125rem / 1.2 var(--wx-font-body); pointer-events: none; } /* ---------- Floats ---------- */ .wxr-fgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wx-gap); } .wxr-fcard { order: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--wx-white); border: 1px solid rgba(0, 47, 166, 0.1); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease); } .wxr-fcard--new { order: 3; } .wxr-fcard:hover { transform: translateY(-3px); box-shadow: var(--wx-shadow-lg); } .wxr-fcard:hover .wxr-img { transform: scale(1.03); } .wxr-fcard-media { aspect-ratio: 16 / 10; border-radius: 0; } .wxr-fcard-h { padding: 1rem 1.1rem 0.35rem; color: var(--wx-magenta); font-family: var(--wx-font-body); font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .wxr-rates { padding: 0.15rem 1.1rem 1.1rem; color: var(--wx-blue); font-family: var(--wx-font-body); font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.35; } .wxr .wxr-rates p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.75rem; padding: 0.42rem 0; border-bottom: 1px dashed rgba(0, 47, 166, 0.2); } .wxr .wxr-rates p > span { margin-left: auto; } .wxr .wxr-rates p.wxr-note { justify-content: flex-start; padding-block: 0.3rem; border-bottom: 0; font-size: 0.9375rem; font-weight: 600; } .wxr .wxr-rates p:last-child { border-bottom: 0; } .wxr-new { order: 2; grid-column: 1 / -1; padding: 0.25rem 0; background: linear-gradient(var(--wxr-gold), var(--wxr-gold)) left center / calc(50% - 7rem) 3px no-repeat, linear-gradient(var(--wxr-gold), var(--wxr-gold)) right center / calc(50% - 7rem) 3px no-repeat; color: var(--wx-blue); font-family: var(--wx-font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 900; line-height: 1.2; text-align: center; } .wxr .wxr-new .wxr-lgi { display: none; } /* Desktop: photo beside the rates for the four sized floats. */ @media (min-width: 1024px) { .wxr-fcard:not(.wxr-fcard--new) { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: auto 1fr; } .wxr-fcard:not(.wxr-fcard--new) .wxr-fcard-media { grid-row: 1 / 3; height: 100%; min-height: 220px; aspect-ratio: auto; } .wxr-fcard:not(.wxr-fcard--new) .wxr-fcard-media .wxr-img { position: absolute; inset: 0; } } @media (min-width: 560px) { .wxr-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wxr-fcard-media { aspect-ratio: 4 / 3; } } @media (min-width: 1024px) { .wxr-fgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .wxr-fcard { grid-column: span 6; } .wxr-fcard--new { grid-column: span 4; } } /* The replica's mobile colours for the floats block (980px and down). */ @media (max-width: 980px) { .wxr .wxr-float-h { color: var(--wx-sky); } .wxr-fcard .wxr-rates { margin: 0.25rem 0.9rem 0.9rem; padding: 0.35rem 0.8rem; background: var(--wx-blue); border: 3px solid var(--wx-magenta); border-radius: var(--wx-radius-sm); color: var(--wx-white); } .wxr .wxr-fcard .wxr-rates .wxr-red { color: inherit; } .wxr .wxr-fcard .wxr-rates p { border-bottom-color: rgba(255, 255, 255, 0.16); } } /* ---------- "Enhance your time" strip ---------- */ .wxr-strip { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--wx-ink); color: var(--wx-white); text-align: center; } .wxr-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(47, 46, 46, 0.45); } .wxr-strip-bg { z-index: -2; object-position: 50% 80%; } .wxr-strip-in { display: grid; justify-items: center; gap: 0.6rem; } .wxr-strip-h { font-family: var(--wx-font-body); font-size: clamp(1.375rem, 0.9rem + 2.1vw, 2.625rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 3px 10px rgba(47, 46, 46, 0.5); } .wxr-strip-sub { color: var(--wx-yellow); font-family: var(--wx-font-body); font-size: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); font-weight: 600; line-height: 1.4; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); } /* ---------- Beach games ---------- */ .wxr-zone--play { background-color: #fafafa; } .wxr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .wxr-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 200px); gap: 0.75rem; min-width: 0; } .wxr-tile { position: relative; overflow: hidden; margin: 0; background: var(--wx-ice); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); } .wxr-tile .wxr-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--wx-ease); } .wxr-tile:hover .wxr-img { transform: scale(1.05); } .wxr-tile--big { grid-column: span 2; grid-row: span 2; } .wxr-tile:last-child { grid-column: span 2; } .wxr-cap { position: absolute; left: 0.6rem; bottom: 0.6rem; padding: 0.35rem 0.8rem; background: rgba(255, 255, 255, 0.92); border-radius: var(--wx-radius-pill); box-shadow: var(--wx-shadow-sm); color: #2608fb; font-family: var(--wx-font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; } .wxr-cap br { display: none; } @media (min-width: 640px) { .wxr-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 200px); } .wxr-tile:last-child { grid-column: auto; } } /* The 28-photo wall. */ .wxr-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--wx-gap); } .wxr-wall .wxr-img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1; object-fit: cover; border-radius: var(--wx-radius-sm); box-shadow: var(--wx-shadow-sm); transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease); } .wxr-wall .wxr-img:hover { transform: scale(1.04); box-shadow: var(--wx-shadow); } @media (min-width: 768px) { .wxr-wall { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } } /* ---------- Jet skis, Adventura Cayman, location ---------- */ .wxr-zone--more { padding-top: var(--wx-gap); } .wxr-partner { display: grid; gap: 1rem; margin-bottom: var(--wx-section); } .wxr-dots { color: inherit; height: 0; margin: 0 0 0.25rem; border: 0; border-top: 8px dotted #ff0006; } .wxr-dots--dark { border-top-color: #003b4d; } .wxr-partner-h { color: var(--wx-blue); font-family: var(--wx-font-display); font-size: clamp(1rem, 0.8rem + 0.9vw, 1.375rem); font-weight: 900; line-height: 1.55; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .wxr a.wxr-inl { color: inherit; font-style: italic; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .wxr a.wxr-inl:hover { color: var(--wx-magenta); } .wxr-adv { align-items: center; } .wxr-adv-brand { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .wxr .wxr-logo { display: block; color: inherit; text-decoration: none; width: 100%; max-width: 240px; overflow: hidden; border-radius: var(--wx-radius-sm); } .wxr-logo .wxr-img { display: block; width: 100%; height: auto; } .wxr-adv-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .wxr-adv-pics .wxr-img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wx-radius-sm); } .wxr-adv-pics .wxr-img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } @media (min-width: 640px) { .wxr-adv-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wxr-adv-pics .wxr-img:first-child { grid-column: auto; aspect-ratio: 4 / 3; } } @media (min-width: 1024px) { .wxr-adv { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); } } .wxr-loc { display: grid; overflow: hidden; border-radius: var(--wx-radius-lg); box-shadow: var(--wx-shadow-lg); } .wxr-loc-img { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; } .wxr-loc-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--wx-blue); color: var(--wx-white); text-align: center; } .wxr-loc-panel p { font-family: var(--wx-font-body); font-size: var(--wx-fs-body); line-height: 1.55; } /* The panel's gap and rule separate the title from its text. */ .wxr-loc-head { margin-bottom: 0; } .wxr-loc-h { color: var(--wx-white); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); letter-spacing: 0.05em; } .wxr-line { display: block; width: 40px; height: 4px; background: var(--wxr-gold); border-radius: 4px; } .wxr a.wxr-map { display: inline-flex; align-items: center; min-height: var(--wx-tap); padding: 0 1.4rem; border: 2px solid rgba(255, 219, 152, 0.6); border-radius: var(--wx-radius-pill); color: #ffdb98; font-family: var(--wx-font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: background-color var(--wx-dur) var(--wx-ease), border-color var(--wx-dur) var(--wx-ease); } .wxr a.wxr-map:hover { background: rgba(255, 219, 152, 0.14); border-color: #ffdb98; color: #ffdb98; } @media (min-width: 768px) { .wxr-loc { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .wxr-loc-img { align-self: stretch; height: auto; min-height: 300px; aspect-ratio: auto; contain: size; /* the panel sets the row height, the photo fills it */ } } /* ---------- Motion ---------- */ .wxr-js .wxr-rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--wx-ease), transform 0.6s var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease); } .wxr-js .wxr-rv.is-in { opacity: 1; transform: none; } .wxr-js .wxr-item.wxr-rv.is-in:hover, .wxr-js .wxr-fcard.wxr-rv.is-in:hover { transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .wxr-js .wxr-rv { opacity: 1; transform: none; } .wxr-item:hover, .wxr-fcard:hover, .wxr-js .wxr-item.wxr-rv.is-in:hover, .wxr-js .wxr-fcard.wxr-rv.is-in:hover { transform: none; } .wxr-item:hover .wxr-img, .wxr-fcard:hover .wxr-img, .wxr-tile:hover .wxr-img, .wxr-wall .wxr-img:hover { transform: none; } }