feat: city guide on city pages (tagline, facts, About, seasons)
Editable per city under Viator tours > Destinations. Shown above the tours on page 1 of an unfiltered listing only; filtering and paging jump to the results. Text recovered from the six old /tour-destination/ pages is imported once into empty guides. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
270
viator-collector/assets/css/vc-city.css
Normal file
270
viator-collector/assets/css/vc-city.css
Normal file
@@ -0,0 +1,270 @@
|
||||
/* City guide on a destination page (VC_City_Guide): tagline in the banner,
|
||||
facts bar, About and Seasons above the tours. */
|
||||
|
||||
.vc-app.vc-app .hero__tagline {
|
||||
order: 2;
|
||||
max-width: 40ch;
|
||||
margin: calc(var(--sp-2) * -1) 0 0;
|
||||
color: var(--c-white);
|
||||
font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.375rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
/* ---------- facts bar ---------- */
|
||||
.vc-app.vc-app .cty-top {
|
||||
margin-block-start: var(--sp-5);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||
margin: 0;
|
||||
padding: var(--sp-3) var(--sp-2);
|
||||
list-style: none;
|
||||
background: var(--c-white);
|
||||
border-radius: var(--r-card);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--c-line);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
margin: 0;
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact + .cfact {
|
||||
border-inline-start: 1px solid var(--c-line);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact__ic {
|
||||
display: grid;
|
||||
flex: none;
|
||||
place-items: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 50%;
|
||||
color: #0f7f90;
|
||||
background: var(--c-teal-20);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact__ic svg {
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact small {
|
||||
display: block;
|
||||
color: var(--c-muted);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact b {
|
||||
display: block;
|
||||
color: var(--c-ink);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- shared headings ---------- */
|
||||
.vc-app.vc-app .cty-eyebrow {
|
||||
margin: 0 0 var(--sp-2);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-h2 {
|
||||
margin: 0 0 var(--sp-3);
|
||||
color: var(--c-ink);
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-tours-h {
|
||||
margin-block-end: var(--sp-4);
|
||||
}
|
||||
|
||||
/* ---------- about ---------- */
|
||||
.vc-app.vc-app .cty-about__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 6fr;
|
||||
gap: var(--sp-6);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__grid--text {
|
||||
grid-template-columns: minmax(0, 48rem);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
border-radius: var(--r-xl);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__text {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.72);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__text p {
|
||||
margin: 0 0 0.8rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__text.is-clamped {
|
||||
max-height: 11.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__text.is-clamped::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 4rem;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0), var(--c-white));
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-block-start: var(--sp-2);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--c-ink);
|
||||
background: none;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-more[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-more[aria-expanded="true"] .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ---------- seasons ---------- */
|
||||
.vc-app.vc-app .cty-seasons {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .seasons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
||||
gap: var(--gap);
|
||||
margin: var(--sp-4) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season {
|
||||
--tint: #e9f7f9;
|
||||
--ink: #0f7f90;
|
||||
margin: 0;
|
||||
padding: var(--sp-4);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--tint);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season--summer { --tint: #fff8db; --ink: #a37b00; }
|
||||
.vc-app.vc-app .season--fall { --tint: #fdeee6; --ink: #c2551b; }
|
||||
.vc-app.vc-app .season--winter { --tint: #eef1fb; --ink: #4a64c9; }
|
||||
|
||||
.vc-app.vc-app .season__ic {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-block-end: var(--sp-3);
|
||||
border-radius: 50%;
|
||||
color: var(--ink);
|
||||
background: var(--c-white);
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season__ic svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season h3 {
|
||||
margin: 0;
|
||||
color: var(--c-ink);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season small {
|
||||
display: block;
|
||||
margin: 0.15rem 0 0.7rem;
|
||||
color: var(--ink);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season p {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* The tours follow the guide directly: no double section gap. */
|
||||
.vc-app.vc-app .cty-seasons + #tour-list,
|
||||
.vc-app.vc-app .cty-about + #tour-list {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.vc-app.vc-app .cty-facts {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: var(--sp-3);
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact {
|
||||
padding-inline: 0.6rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact:nth-child(odd) {
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact__ic {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cfact b {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .cty-about__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
/* Seasons swipe sideways. */
|
||||
.vc-app.vc-app .seasons {
|
||||
display: flex;
|
||||
margin-inline: calc(var(--gutter) * -1);
|
||||
padding-inline: var(--gutter);
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.vc-app.vc-app .season {
|
||||
flex: 0 0 78%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
@@ -86,6 +86,22 @@
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- city guide: long About text folds behind "Read more" ---------- */
|
||||
Array.prototype.forEach.call(app.querySelectorAll("[data-vc-clamp]"), function (text) {
|
||||
var btn = text.nextElementSibling;
|
||||
text.classList.add("is-clamped");
|
||||
if (!btn || text.scrollHeight <= text.clientHeight + 8) {
|
||||
text.classList.remove("is-clamped");
|
||||
return;
|
||||
}
|
||||
btn.hidden = false;
|
||||
btn.addEventListener("click", function () {
|
||||
var open = text.classList.toggle("is-clamped") === false;
|
||||
btn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
btn.querySelector("span").textContent = open ? "Read less" : "Read more";
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- single tour: "view all photos" scrolls the gallery ---------- */
|
||||
var viewAll = app.querySelector(".tg-viewall, .gallery__viewall");
|
||||
if (viewAll) viewAll.addEventListener("click", function () {
|
||||
|
||||
Reference in New Issue
Block a user