feat: Enhance gallery functionality with lightbox feature and improve icon sprite accessibility
- Added a lightbox feature for gallery images, allowing users to view photos in a modal with navigation controls. - Updated the SVG sprite to include inline styles for better accessibility. - Increased CSS specificity by doubling the `.vc-app` class to ensure styles override Astra theme defaults. - Introduced new shortcodes for bus tours, about section, and articles in the VC_Sections class. - Improved the handling of featured images in the single tour template for sharper display. - Updated version number to 1.8.15.
This commit is contained in:
@@ -58,7 +58,15 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-family:
|
||||
"Plus Jakarta Sans",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.5;
|
||||
color: var(--c-ink);
|
||||
@@ -173,7 +181,10 @@ dd {
|
||||
border-radius: var(--r-pill);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition: transform 0.2s var(--ease), filter 0.2s var(--ease), background 0.2s var(--ease);
|
||||
transition:
|
||||
transform 0.2s var(--ease),
|
||||
filter 0.2s var(--ease),
|
||||
background 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@@ -378,7 +389,9 @@ dd {
|
||||
|
||||
.rail:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot,
|
||||
.rail:hover .acard.is-active:not(:hover):not(:focus-within) .ring-badge__dot,
|
||||
.bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot {
|
||||
.bus__grid:hover
|
||||
.tcard.is-active:not(:hover):not(:focus-within)
|
||||
.ring-badge__dot {
|
||||
color: var(--c-white);
|
||||
background: var(--c-glass);
|
||||
}
|
||||
@@ -430,7 +443,6 @@ dd {
|
||||
}
|
||||
|
||||
@keyframes nudge {
|
||||
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
@@ -541,11 +553,14 @@ dd {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-0.375rem);
|
||||
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
|
||||
transition:
|
||||
opacity 0.2s var(--ease),
|
||||
transform 0.2s var(--ease),
|
||||
visibility 0.2s;
|
||||
}
|
||||
|
||||
.nav__item--has-menu:hover .nav__submenu,
|
||||
.nav__toggle[aria-expanded="true"]+.nav__submenu {
|
||||
.nav__toggle[aria-expanded="true"] + .nav__submenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
@@ -585,7 +600,9 @@ dd {
|
||||
height: 0.125rem;
|
||||
border-radius: 1px;
|
||||
background: var(--c-white);
|
||||
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
|
||||
transition:
|
||||
transform 0.25s var(--ease),
|
||||
opacity 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.burger[aria-expanded="true"] span:nth-child(1) {
|
||||
@@ -607,9 +624,9 @@ dd {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
min-height: clamp(34rem, 88svh, 56rem);
|
||||
margin: var(--page-inset);
|
||||
padding-block: calc(var(--header-h) + var(--sp-6)) clamp(3rem, 1.5rem + 6vw, 6rem);
|
||||
padding-block: calc(var(--header-h) + var(--sp-6))
|
||||
clamp(3rem, 1.5rem + 6vw, 6rem);
|
||||
border-radius: var(--r-xl);
|
||||
isolation: isolate;
|
||||
}
|
||||
@@ -634,7 +651,11 @@ dd {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(39.91% 77.37% at 60.22% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%),
|
||||
radial-gradient(
|
||||
39.91% 77.37% at 60.22% 50%,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
),
|
||||
linear-gradient(180deg, rgba(44, 175, 194, 0) 51.6%, var(--c-teal) 100%);
|
||||
}
|
||||
|
||||
@@ -814,24 +835,28 @@ dd {
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
/* negative margin + padding keeps the card glow from being clipped by the scroller */
|
||||
margin-inline: calc(var(--gap) * -1);
|
||||
padding: var(--sp-4) var(--gap);
|
||||
/* overflow-x:auto forces overflow-y to auto, so the hover glow (a ~3.75rem
|
||||
blur) would be clipped by the scroller. Don't switch to overflow:visible —
|
||||
that kills the horizontal scroll. Instead give the rail enough padding for
|
||||
the glow to paint INSIDE the scroll box, and pull it back with an equal
|
||||
negative margin so the visible spacing is unchanged. Scrolling stays intact. */
|
||||
margin: calc(var(--sp-5) * -1) calc(var(--gap) * -1);
|
||||
padding: 4.5rem var(--gap);
|
||||
}
|
||||
|
||||
.rail::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rail>* {
|
||||
.rail > * {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.rail--dest>* {
|
||||
.rail--dest > * {
|
||||
flex: 0 0 calc((100% - 4 * var(--gap)) / 5);
|
||||
}
|
||||
|
||||
.rail--art>* {
|
||||
.rail--art > * {
|
||||
flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
|
||||
}
|
||||
|
||||
@@ -870,7 +895,11 @@ dd {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 35%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* highlighted card — gradients copied from Figma */
|
||||
@@ -884,7 +913,11 @@ dd {
|
||||
.dcard:hover::after,
|
||||
.dcard:focus-within::after {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0) 51.6%, rgba(255, 255, 255, 0.4) 100%),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0) 51.6%,
|
||||
rgba(255, 255, 255, 0.4) 100%
|
||||
),
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
linear-gradient(180deg, rgba(44, 175, 194, 0) 37.33%, #2cafc2 84.53%);
|
||||
}
|
||||
@@ -897,7 +930,11 @@ dd {
|
||||
|
||||
.rail:hover .dcard.is-active:not(:hover):not(:focus-within)::after,
|
||||
.rail:focus-within .dcard.is-active:not(:hover):not(:focus-within)::after {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 35%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.dcard__desc {
|
||||
@@ -907,7 +944,9 @@ dd {
|
||||
top: clamp(2.75rem, 2rem + 2vw, 3.5rem);
|
||||
opacity: 0;
|
||||
transform: translateY(-0.375rem);
|
||||
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
|
||||
transition:
|
||||
opacity 0.25s var(--ease),
|
||||
transform 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.dcard.is-active .dcard__desc,
|
||||
@@ -918,7 +957,9 @@ dd {
|
||||
}
|
||||
|
||||
.rail:hover .dcard.is-active:not(:hover):not(:focus-within) .dcard__desc,
|
||||
.rail:focus-within .dcard.is-active:not(:hover):not(:focus-within) .dcard__desc {
|
||||
.rail:focus-within
|
||||
.dcard.is-active:not(:hover):not(:focus-within)
|
||||
.dcard__desc {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.375rem);
|
||||
}
|
||||
@@ -1039,7 +1080,8 @@ dd {
|
||||
object-fit: contain;
|
||||
object-position: left;
|
||||
/* Figma tints the blue coach towards the teal brand colour */
|
||||
filter: hue-rotate(-32deg) saturate(1.15) drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.18));
|
||||
filter: hue-rotate(-32deg) saturate(1.15)
|
||||
drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.18));
|
||||
}
|
||||
|
||||
.promo__note {
|
||||
@@ -1085,7 +1127,12 @@ dd {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.6) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.45) 0%,
|
||||
rgba(0, 0, 0, 0.1) 45%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tcard.is-active,
|
||||
@@ -1098,7 +1145,11 @@ dd {
|
||||
.tcard:hover::after,
|
||||
.tcard:focus-within::after {
|
||||
background:
|
||||
radial-gradient(53.59% 137.34% at 50% 46.41%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%),
|
||||
radial-gradient(
|
||||
53.59% 137.34% at 50% 46.41%,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.4) 100%
|
||||
),
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
linear-gradient(180deg, rgba(44, 175, 194, 0) 37.33%, #2cafc2 84.53%);
|
||||
}
|
||||
@@ -1110,7 +1161,12 @@ dd {
|
||||
|
||||
.bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within)::after,
|
||||
.bus__grid:focus-within .tcard.is-active:not(:hover):not(:focus-within)::after {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.6) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.45) 0%,
|
||||
rgba(0, 0, 0, 0.1) 45%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tcard__k {
|
||||
@@ -1164,11 +1220,13 @@ dd {
|
||||
right: -34%;
|
||||
top: 42%;
|
||||
height: 28%;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(44, 175, 194, 0) 0%,
|
||||
rgba(44, 175, 194, 0.16) 22%,
|
||||
rgba(44, 175, 194, 0.2) 55%,
|
||||
rgba(44, 175, 194, 0) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(44, 175, 194, 0) 0%,
|
||||
rgba(44, 175, 194, 0.16) 22%,
|
||||
rgba(44, 175, 194, 0.2) 55%,
|
||||
rgba(44, 175, 194, 0) 100%
|
||||
);
|
||||
/* small blur only — the band keeps its straight parallel edges */
|
||||
filter: blur(2px);
|
||||
/* 25deg == the roof ridge angle, measured off the artwork itself */
|
||||
@@ -1295,8 +1353,20 @@ dd {
|
||||
.marquee {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#000 8%,
|
||||
#000 92%,
|
||||
transparent
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#000 8%,
|
||||
#000 92%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.marquee__route {
|
||||
@@ -1420,14 +1490,23 @@ dd {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.65) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.35) 0%,
|
||||
rgba(0, 0, 0, 0.05) 40%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.acard.is-active .acard__media::after,
|
||||
.acard:hover .acard__media::after,
|
||||
.acard:focus-within .acard__media::after {
|
||||
background:
|
||||
radial-gradient(53.59% 137.34% at 50% 46.41%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%),
|
||||
radial-gradient(
|
||||
53.59% 137.34% at 50% 46.41%,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.4) 100%
|
||||
),
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
linear-gradient(180deg, rgba(44, 175, 194, 0) 37.33%, #2cafc2 84.53%);
|
||||
}
|
||||
@@ -1446,8 +1525,15 @@ dd {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media::after {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.65) 100%);
|
||||
.rail:hover
|
||||
.acard.is-active:not(:hover):not(:focus-within)
|
||||
.acard__media::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.35) 0%,
|
||||
rgba(0, 0, 0, 0.05) 40%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.acard__time {
|
||||
@@ -1559,7 +1645,7 @@ dd {
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.acc+.acc {
|
||||
.acc + .acc {
|
||||
border-top: 1px solid var(--c-line);
|
||||
padding-top: var(--sp-4);
|
||||
}
|
||||
@@ -1613,11 +1699,14 @@ dd {
|
||||
transition: grid-template-rows 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.acc__q[aria-expanded="true"]+.acc__a {
|
||||
/* The button sits inside an <h3>, so .acc__a is the h3's sibling — not the
|
||||
button's. Match on the .acc wrapper's expanded state instead of an adjacent
|
||||
sibling, which never matched through the heading. */
|
||||
.acc:has(.acc__q[aria-expanded="true"]) .acc__a {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.acc__a>* {
|
||||
.acc__a > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1634,7 +1723,8 @@ dd {
|
||||
========================================================= */
|
||||
.footer {
|
||||
position: relative;
|
||||
margin: calc(var(--sp-6) + var(--page-inset)) var(--page-inset) var(--page-inset);
|
||||
margin: calc(var(--sp-6) + var(--page-inset)) var(--page-inset)
|
||||
var(--page-inset);
|
||||
padding-block: var(--sp-6) 0;
|
||||
border-radius: var(--r-xl);
|
||||
color: var(--c-white);
|
||||
@@ -1770,7 +1860,11 @@ dd {
|
||||
padding: var(--sp-4);
|
||||
padding-bottom: clamp(2rem, 1rem + 3vw, 3rem);
|
||||
border-radius: var(--r-pill) var(--r-pill) 0 0;
|
||||
background: linear-gradient(180deg, rgba(44, 175, 194, 0.99) 0%, var(--c-teal-20) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(44, 175, 194, 0.99) 0%,
|
||||
var(--c-teal-20) 100%
|
||||
);
|
||||
box-shadow: 0 0.75rem 8.25rem var(--c-teal);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
@@ -1785,7 +1879,7 @@ dd {
|
||||
Responsive
|
||||
========================================================= */
|
||||
@media (max-width: 78rem) {
|
||||
.rail--dest>* {
|
||||
.rail--dest > * {
|
||||
flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
|
||||
}
|
||||
}
|
||||
@@ -1813,7 +1907,7 @@ dd {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.rail--dest>* {
|
||||
.rail--dest > * {
|
||||
flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
|
||||
}
|
||||
|
||||
@@ -1861,7 +1955,10 @@ dd {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-0.5rem);
|
||||
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
|
||||
transition:
|
||||
opacity 0.25s var(--ease),
|
||||
transform 0.25s var(--ease),
|
||||
visibility 0.25s;
|
||||
}
|
||||
|
||||
.nav.is-open {
|
||||
@@ -1902,7 +1999,7 @@ dd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav__toggle[aria-expanded="true"]+.nav__submenu {
|
||||
.nav__toggle[aria-expanded="true"] + .nav__submenu {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@@ -1915,7 +2012,7 @@ dd {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rail--art>* {
|
||||
.rail--art > * {
|
||||
flex: 0 0 calc((100% - var(--gap)) / 2);
|
||||
}
|
||||
|
||||
@@ -1925,7 +2022,7 @@ dd {
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.rail--dest>* {
|
||||
.rail--dest > * {
|
||||
flex: 0 0 calc((100% - var(--gap)) / 2);
|
||||
}
|
||||
|
||||
@@ -1953,10 +2050,6 @@ dd {
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
.hero {
|
||||
min-height: clamp(30rem, 84svh, 44rem);
|
||||
}
|
||||
|
||||
.booking {
|
||||
padding: var(--sp-2);
|
||||
}
|
||||
@@ -1988,11 +2081,11 @@ dd {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.rail--dest>* {
|
||||
.rail--dest > * {
|
||||
flex: 0 0 min(72%, 15rem);
|
||||
}
|
||||
|
||||
.rail--art>* {
|
||||
.rail--art > * {
|
||||
flex: 0 0 min(85%, 22rem);
|
||||
}
|
||||
|
||||
@@ -2200,20 +2293,23 @@ dd {
|
||||
border-radius: 0.25rem;
|
||||
color: transparent;
|
||||
background: var(--c-white);
|
||||
transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
|
||||
transition:
|
||||
color 0.2s var(--ease),
|
||||
background-color 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.check:hover .check__box {
|
||||
border-color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.check__input:checked+.check__box {
|
||||
.check__input:checked + .check__box {
|
||||
color: var(--c-white);
|
||||
border-color: var(--c-black);
|
||||
background: var(--c-black);
|
||||
}
|
||||
|
||||
.check__input:focus-visible+.check__box {
|
||||
.check__input:focus-visible + .check__box {
|
||||
outline: 2px solid var(--c-teal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -2225,7 +2321,7 @@ dd {
|
||||
transition: opacity 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.check__input:checked~.check__text {
|
||||
.check__input:checked ~ .check__text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -2345,7 +2441,9 @@ dd {
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
opacity: 0.7;
|
||||
transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
|
||||
transition:
|
||||
color 0.25s var(--ease),
|
||||
opacity 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.titem.is-active .titem__desc,
|
||||
@@ -2357,7 +2455,9 @@ dd {
|
||||
|
||||
/* hovering any card in the grid hands the highlight over to it */
|
||||
.tgrid:hover .titem.is-active:not(:hover):not(:focus-within) .titem__desc,
|
||||
.tgrid:focus-within .titem.is-active:not(:hover):not(:focus-within) .titem__desc {
|
||||
.tgrid:focus-within
|
||||
.titem.is-active:not(:hover):not(:focus-within)
|
||||
.titem__desc {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -2369,11 +2469,17 @@ dd {
|
||||
|
||||
.tgrid:hover .dcard.is-active:not(:hover):not(:focus-within)::after,
|
||||
.tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within)::after {
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 35%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tgrid:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot,
|
||||
.tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot {
|
||||
.tgrid:focus-within
|
||||
.dcard.is-active:not(:hover):not(:focus-within)
|
||||
.ring-badge__dot {
|
||||
color: var(--c-white);
|
||||
background: var(--c-glass);
|
||||
}
|
||||
@@ -2411,7 +2517,10 @@ dd {
|
||||
color: var(--c-black);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
|
||||
transition:
|
||||
color 0.2s var(--ease),
|
||||
background-color 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.pager__num {
|
||||
@@ -2530,7 +2639,8 @@ dd {
|
||||
--word: clamp(3rem, 0.4rem + 9.5vw, 11.25rem);
|
||||
min-height: clamp(26rem, 62svh, 38rem);
|
||||
margin: var(--page-inset);
|
||||
padding-block: calc(var(--header-h) + var(--sp-5)) clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
|
||||
padding-block: calc(var(--header-h) + var(--sp-5))
|
||||
clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
|
||||
border-radius: var(--r-xl);
|
||||
isolation: isolate;
|
||||
overflow: clip;
|
||||
@@ -2547,6 +2657,13 @@ dd {
|
||||
border-radius: inherit;
|
||||
object-fit: cover;
|
||||
object-position: center 26%;
|
||||
/* Viator only ships ~720px images, which look soft blown up to a full-width
|
||||
banner. Rather than fight it, lean in: a gentle blur turns the photo into an
|
||||
intentional backdrop (the crisp image lives in the gallery lightbox). The
|
||||
scale hides the blur's feathered edges, which overflow:clip on .hero-tour
|
||||
then trims to the rounded frame. */
|
||||
filter: blur(10px) saturate(1.12);
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.hero-tour__sky {
|
||||
@@ -2555,8 +2672,17 @@ dd {
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(70% 50% at 50% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%),
|
||||
linear-gradient(180deg, rgba(27, 147, 166, 0.82) 0%, rgba(44, 175, 194, 0.62) 45%, rgba(111, 208, 221, 0.78) 100%);
|
||||
radial-gradient(
|
||||
70% 50% at 50% 100%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(27, 147, 166, 0.55) 0%,
|
||||
rgba(44, 175, 194, 0.42) 45%,
|
||||
rgba(111, 208, 221, 0.72) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-tour__inner {
|
||||
@@ -2590,7 +2716,7 @@ dd {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.crumbs__list li+li::before {
|
||||
.crumbs__list li + li::before {
|
||||
content: "/";
|
||||
margin-inline-end: var(--sp-1);
|
||||
opacity: 0.5;
|
||||
@@ -2681,7 +2807,7 @@ dd {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tour__text+.tour__text {
|
||||
.tour__text + .tour__text {
|
||||
margin-block-start: var(--sp-3);
|
||||
}
|
||||
|
||||
@@ -2808,6 +2934,119 @@ dd {
|
||||
border-radius: var(--r-card);
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
cursor: zoom-in;
|
||||
transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.gallery img:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Gallery lightbox (built by vc-design.js)
|
||||
========================================================= */
|
||||
.vc-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: clamp(1rem, 0.5rem + 3vw, 3.5rem);
|
||||
background: rgba(0, 0, 0, 0.86);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.25s var(--ease),
|
||||
visibility 0s linear 0.25s;
|
||||
}
|
||||
|
||||
.vc-lightbox.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.25s var(--ease);
|
||||
}
|
||||
|
||||
.vc-lightbox__img {
|
||||
max-width: min(100%, 78rem);
|
||||
max-height: 84vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: var(--r-card);
|
||||
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
|
||||
transform: scale(0.96);
|
||||
transition: transform 0.25s var(--ease), opacity 0.15s var(--ease);
|
||||
}
|
||||
|
||||
.vc-lightbox.is-open .vc-lightbox__img {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.vc-lightbox__btn {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--r-pill);
|
||||
color: var(--c-white);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s var(--ease), transform 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.vc-lightbox__btn:hover {
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
.vc-lightbox__close {
|
||||
top: clamp(1rem, 3vw, 2rem);
|
||||
right: clamp(1rem, 3vw, 2rem);
|
||||
}
|
||||
|
||||
.vc-lightbox__prev,
|
||||
.vc-lightbox__next {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.vc-lightbox__prev {
|
||||
left: clamp(0.5rem, 2vw, 2rem);
|
||||
}
|
||||
|
||||
.vc-lightbox__next {
|
||||
right: clamp(0.5rem, 2vw, 2rem);
|
||||
}
|
||||
|
||||
.vc-lightbox__prev:hover,
|
||||
.vc-lightbox__next:hover {
|
||||
transform: translateY(-50%) scale(1.06);
|
||||
}
|
||||
|
||||
.vc-lightbox__count {
|
||||
position: absolute;
|
||||
bottom: clamp(1rem, 3vw, 2rem);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* single image → hide the arrows */
|
||||
.vc-lightbox--single .vc-lightbox__prev,
|
||||
.vc-lightbox--single .vc-lightbox__next,
|
||||
.vc-lightbox--single .vc-lightbox__count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- included / not included --- */
|
||||
.lists {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user