diff --git a/astra-child-hoponhopoff.zip b/astra-child-hoponhopoff.zip index 0c9bce3..138abfa 100644 Binary files a/astra-child-hoponhopoff.zip and b/astra-child-hoponhopoff.zip differ diff --git a/astra-child-hoponhopoff/README.md b/astra-child-hoponhopoff/README.md index fca0583..4c2009d 100644 --- a/astra-child-hoponhopoff/README.md +++ b/astra-child-hoponhopoff/README.md @@ -50,6 +50,28 @@ styles the page content (listing / single / homepage sections). add_filter( 'hoho_support_url', fn() => 'https://example.com/contact' ); ``` +## Design pages (About, Contact, FAQ, Blog) + +`inc/pages.php` gives these pages the "new front" designs automatically, by +address — no page template to pick: + +| Design | Used on | Template | +|---|---|---| +| About | page `about-us` (or `about`) | `templates/about.php` | +| Contact | page `contact-us` (or `contact`) | `templates/contact.php` | +| FAQ | page `faq` (or `faqs`) | `templates/faq.php` | +| Blog list | the Posts page, or page `blogs` / `blog` | `templates/blog.php` | +| Blog post | every single post | `templates/post.php` | + +- About/FAQ/Contact text is fixed in the templates (edit the files to change it). +- The contact form emails **Settings → Viator Collector → Contact email** + (falls back to the site admin email), with the visitor as Reply-To. +- Blog list search/sort/paging use `?q=`, `?sort=` and `?pg=`; post "Review's" + are WordPress comments. +- Styles: `assets/pages.css` is generated — rebuild after changing the design CSS: + `VC_SCOPE='.hoho-page.hoho-page' node viator-collector/build/scope-css.js "new front/css/style.css" astra-child-hoponhopoff/assets/pages.css`. + WordPress-specific fixes live in `assets/pages-wp.css`. + ## Header behavior The header is **transparent and overlays a full-bleed hero** (homepage, and the diff --git a/astra-child-hoponhopoff/assets/img/about-hero.webp b/astra-child-hoponhopoff/assets/img/about-hero.webp new file mode 100644 index 0000000..c4d2560 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/about-hero.webp differ diff --git a/astra-child-hoponhopoff/assets/img/blog-hero.webp b/astra-child-hoponhopoff/assets/img/blog-hero.webp new file mode 100644 index 0000000..257f43c Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/blog-hero.webp differ diff --git a/astra-child-hoponhopoff/assets/img/blogs-hero.webp b/astra-child-hoponhopoff/assets/img/blogs-hero.webp new file mode 100644 index 0000000..41836ce Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/blogs-hero.webp differ diff --git a/astra-child-hoponhopoff/assets/img/city-san-diego.webp b/astra-child-hoponhopoff/assets/img/city-san-diego.webp new file mode 100644 index 0000000..530a098 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/city-san-diego.webp differ diff --git a/astra-child-hoponhopoff/assets/img/contact-hero.webp b/astra-child-hoponhopoff/assets/img/contact-hero.webp new file mode 100644 index 0000000..fa00ade Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/contact-hero.webp differ diff --git a/astra-child-hoponhopoff/assets/img/ellipse-17-2.webp b/astra-child-hoponhopoff/assets/img/ellipse-17-2.webp new file mode 100644 index 0000000..25b6e28 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/ellipse-17-2.webp differ diff --git a/astra-child-hoponhopoff/assets/img/ellipse-17.webp b/astra-child-hoponhopoff/assets/img/ellipse-17.webp new file mode 100644 index 0000000..25b6e28 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/ellipse-17.webp differ diff --git a/astra-child-hoponhopoff/assets/img/faq-hero.webp b/astra-child-hoponhopoff/assets/img/faq-hero.webp new file mode 100644 index 0000000..fa00ade Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/faq-hero.webp differ diff --git a/astra-child-hoponhopoff/assets/img/tour-london.webp b/astra-child-hoponhopoff/assets/img/tour-london.webp new file mode 100644 index 0000000..592ebaa Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/tour-london.webp differ diff --git a/astra-child-hoponhopoff/assets/img/tour-paris.webp b/astra-child-hoponhopoff/assets/img/tour-paris.webp new file mode 100644 index 0000000..47b68b9 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/tour-paris.webp differ diff --git a/astra-child-hoponhopoff/assets/img/tour-san-diego.webp b/astra-child-hoponhopoff/assets/img/tour-san-diego.webp new file mode 100644 index 0000000..0b19040 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/tour-san-diego.webp differ diff --git a/astra-child-hoponhopoff/assets/img/tour-sydney.webp b/astra-child-hoponhopoff/assets/img/tour-sydney.webp new file mode 100644 index 0000000..d40a8f6 Binary files /dev/null and b/astra-child-hoponhopoff/assets/img/tour-sydney.webp differ diff --git a/astra-child-hoponhopoff/assets/pages-wp.css b/astra-child-hoponhopoff/assets/pages-wp.css new file mode 100644 index 0000000..9f66087 --- /dev/null +++ b/astra-child-hoponhopoff/assets/pages-wp.css @@ -0,0 +1,51 @@ +/* Astra overrides for the theme's design pages — ported from VC_Display::astra_overrides() (scope .hoho-page, body class .hoho-fullwidth). */ +.hoho-fullwidth .site-main>article,.hoho-fullwidth .ast-page-builder-template .site-main>article,.hoho-fullwidth.ast-page-builder-template .site-main>article{padding:0!important;margin:0!important;border:0!important;max-width:none!important;} +.hoho-fullwidth #primary,.hoho-fullwidth #content{margin:0!important;padding:0!important;} +.hoho-fullwidth .site-content .ast-container,.hoho-fullwidth .ast-container{max-width:none!important;padding-left:0!important;padding-right:0!important;display:block!important;} +.hoho-fullwidth .entry-content{margin-block:0!important;} +.hoho-fullwidth .site-content{padding:0!important;} +body.hoho-fullwidth{overflow-x:hidden;} +.hoho-page.hoho-page .hero__media,.hoho-page.hoho-page .hero-tour{background:linear-gradient(120deg,#101317,#2cafc2);} +.hoho-page.hoho-page a{text-decoration:none;box-shadow:none;} +.hoho-page.hoho-page :is(ul,ol){list-style:none!important;margin:0;padding:0;} +.hoho-page.hoho-page li{margin:0;} +.hoho-page.hoho-page .tour__text a{text-decoration:underline;} +.hoho-page.hoho-page .tour__text ul{list-style:disc!important;margin:1em 0!important;padding-inline-start:1.5em!important;} +.hoho-page.hoho-page .tour__text ol{list-style:decimal!important;margin:1em 0!important;padding-inline-start:1.5em!important;} +.hoho-page.hoho-page .tour__text li{margin:.25em 0!important;} +.hoho-page.hoho-page a:not(.btn):not(.ring-badge){color:inherit;} +.hoho-page.hoho-page .tour__text a{color:var(--c-teal);} +.hoho-page.hoho-page .dcard__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} +.hoho-page.hoho-page .titem__desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} +.hoho-page.hoho-page .dcard__desc p{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} +.hoho-page.hoho-page .dcard__meta .meta__v{white-space:nowrap;} +.hoho-page.hoho-page>*{max-width:none!important;margin-inline:0!important;} +.hoho-page.hoho-page>.hero,.hoho-page.hoho-page>.hero-tour{margin:var(--page-inset)!important;} +.hoho-page.hoho-page{overflow-x:clip;overflow-y:visible;} +.hoho-fullwidth .site-main,.hoho-fullwidth #primary,.hoho-fullwidth #content,.hoho-fullwidth .site-content,.hoho-fullwidth .ast-container,.hoho-fullwidth .entry-content,.hoho-fullwidth .site-main>article{overflow:visible!important;} +.hoho-page.hoho-page .acc__q{box-shadow:none!important;} +.hoho-page.hoho-page :is(h1,h2,h3,h4,h5,h6){color:inherit;} +.hoho-page.hoho-page,.hoho-page.hoho-page h1,.hoho-page.hoho-page h2,.hoho-page.hoho-page h3,.hoho-page.hoho-page h4,.hoho-page.hoho-page h5,.hoho-page.hoho-page h6,.hoho-page.hoho-page p,.hoho-page.hoho-page a,.hoho-page.hoho-page span,.hoho-page.hoho-page li,.hoho-page.hoho-page button,.hoho-page.hoho-page input,.hoho-page.hoho-page select,.hoho-page.hoho-page textarea,.hoho-page.hoho-page blockquote{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} + +/* WordPress content inside the design. */ + +/* Spam-trap field on the contact form: off-screen, never seen by people. */ +.hoho-page.hoho-page .hoho-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;} + +/* Post body from the editor, styled like the design's .tour__block text. */ +.hoho-page.hoho-page .hoho-prose{display:flex;flex-direction:column;gap:var(--sp-3);} +.hoho-page.hoho-page .hoho-prose>*{margin:0;} +.hoho-page.hoho-page .hoho-prose :is(h2,h3,h4){margin:var(--sp-3) 0 0;font-size:1rem;font-weight:700;} +.hoho-page.hoho-page .hoho-prose :is(p,li){font-size:1rem;font-weight:500;line-height:1.6;opacity:.7;} +.hoho-page.hoho-page .hoho-prose a{color:var(--c-teal);text-decoration:underline;} +.hoho-page.hoho-page .hoho-prose ul{list-style:disc!important;padding-inline-start:1.5em;} +.hoho-page.hoho-page .hoho-prose ol{list-style:decimal!important;padding-inline-start:1.5em;} +.hoho-page.hoho-page .hoho-prose img{width:100%;height:auto;max-height:22.1875rem;border-radius:var(--r-card);object-fit:cover;} +.hoho-page.hoho-page .hoho-prose figure{margin:0;} +.hoho-page.hoho-page .hoho-prose blockquote{margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-card);background:var(--c-teal-05);} + +/* Review replies need their indent back after the list reset. */ +.hoho-page.hoho-page .rcard__text p{margin:0;} + +/* Server-rendered pager uses links where the mockup used buttons. */ +.hoho-page.hoho-page a.pager__btn,.hoho-page.hoho-page a.pager__num{text-decoration:none;} diff --git a/astra-child-hoponhopoff/assets/pages.css b/astra-child-hoponhopoff/assets/pages.css new file mode 100644 index 0000000..2a08aff --- /dev/null +++ b/astra-child-hoponhopoff/assets/pages.css @@ -0,0 +1,4327 @@ +/* Generated by viator-collector/build/scope-css.js (VC_SCOPE=".hoho-page.hoho-page") from new front/css/style.css — do not edit by hand. */ + +/* ========================================================= + Tokens + ========================================================= */ +:root { + --c-black: #000; + --c-white: #fff; + --c-accent: #fc0; + --c-teal: #2cafc2; + --c-teal-05: rgba(44, 175, 194, 0.05); + --c-green: #34c759; + --c-red: #ff383c; + --c-teal-20: rgba(44, 175, 194, 0.2); + --c-ink: #101317; + --c-muted: rgba(0, 0, 0, 0.5); + --c-line: rgba(0, 0, 0, 0.1); + --c-glass: rgba(0, 0, 0, 0.5); + + --r-pill: 2.5rem; + --r-card: 1.5rem; + --r-xl: 2rem; + + --fs-body: 1rem; + --fs-hero: clamp(2.25rem, 1.25rem + 4.4vw, 4rem); + --fs-h2: clamp(1.75rem, 1.15rem + 2.6vw, 2.5rem); + --fs-card: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem); + + --sp-1: 0.5rem; + --sp-2: 0.6875rem; + --sp-3: 1rem; + --sp-4: 1.5rem; + --sp-5: 2rem; + --sp-6: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); + + --control-h: clamp(2.75rem, 2.4rem + 0.9vw, 3rem); + --container: 81rem; + --gutter: clamp(1rem, 0.4rem + 2.2vw, 3rem); + --page-inset: clamp(0.5rem, 0.2rem + 0.6vw, 0.75rem); + --header-h: calc(var(--control-h) + var(--sp-5)); + --gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem); + + --ease: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* ========================================================= + Base + ========================================================= */ +.hoho-page.hoho-page *, +.hoho-page.hoho-page *::before, +.hoho-page.hoho-page *::after { + box-sizing: border-box; +} + +.hoho-page.hoho-page { + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; + overflow-x: hidden; +} + +.hoho-page.hoho-page { + 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); + background: var(--c-white); + overflow-x: hidden; +} + +.hoho-page.hoho-page img, +.hoho-page.hoho-page svg { + display: block; + max-width: 100%; +} + +.hoho-page.hoho-page a { + color: inherit; + text-decoration: none; +} + +.hoho-page.hoho-page button { + font: inherit; + color: inherit; + border: 0; + background: none; + cursor: pointer; +} + +.hoho-page.hoho-page ul, +.hoho-page.hoho-page ol { + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page blockquote, +.hoho-page.hoho-page figure, +.hoho-page.hoho-page dl, +.hoho-page.hoho-page dd { + margin: 0; +} + +.hoho-page.hoho-page :where(a, +.hoho-page.hoho-page button, +.hoho-page.hoho-page input, +.hoho-page.hoho-page select, +.hoho-page.hoho-page summary):focus-visible { + outline: 2px solid var(--c-teal); + outline-offset: 3px; + border-radius: 0.25rem; +} + +.hoho-page.hoho-page .sprite { + position: absolute; + width: 0; + height: 0; + overflow: hidden; +} + +.hoho-page.hoho-page .skip-link { + position: absolute; + left: -100vmax; + top: var(--sp-1); + z-index: 100; + padding: var(--sp-1) var(--sp-3); + border-radius: var(--r-pill); + background: var(--c-white); + color: var(--c-black); +} + +.hoho-page.hoho-page .skip-link:focus { + left: var(--sp-1); +} + +.hoho-page.hoho-page .container { + width: 100%; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--gutter); +} + +.hoho-page.hoho-page .icon { + width: 1rem; + height: 1rem; + flex: none; +} + +.hoho-page.hoho-page .icon--12 { + width: 0.75rem; + height: 0.75rem; +} + +.hoho-page.hoho-page .icon--14 { + width: 0.875rem; + height: 0.875rem; +} + +.hoho-page.hoho-page .icon--20 { + width: 1.25rem; + height: 1.25rem; +} + +.hoho-page.hoho-page .icon--24 { + width: 1.5rem; + height: 1.5rem; +} + +/* ========================================================= + Buttons, pills, chips + ========================================================= */ +.hoho-page.hoho-page .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--sp-1); + min-height: var(--control-h); + padding-inline: var(--sp-4); + 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); +} + +.hoho-page.hoho-page .btn:hover { + filter: brightness(0.94); + transform: translateY(-1px); +} + +.hoho-page.hoho-page .btn--accent { + background: var(--c-accent); + color: var(--c-black); +} + +.hoho-page.hoho-page .btn--dark { + background: var(--c-black); + color: var(--c-white); +} + +.hoho-page.hoho-page .btn--white { + background: var(--c-white); + color: var(--c-black); + font-weight: 500; +} + +.hoho-page.hoho-page .btn--ghost { + border: 1px solid var(--c-line); + background: var(--c-white); + color: var(--c-black); + font-weight: 500; +} + +.hoho-page.hoho-page .btn--ghost:hover { + filter: none; + background: rgba(0, 0, 0, 0.04); +} + +.hoho-page.hoho-page .btn--wide { + justify-content: space-between; + width: 100%; + padding-inline: var(--sp-3); +} + +.hoho-page.hoho-page .icon-btn { + display: inline-grid; + place-items: center; + aspect-ratio: 1; + width: var(--control-h); + border-radius: var(--r-pill); + color: var(--c-white); + background: var(--c-glass); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + transition: background 0.2s var(--ease); +} + +.hoho-page.hoho-page .icon-btn:hover { + background: rgba(0, 0, 0, 0.7); +} + +.hoho-page.hoho-page .pill { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + margin: 0; + padding: 0.375rem var(--sp-3); + border-radius: var(--r-pill); + color: var(--c-white); + background: var(--c-glass); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} + +.hoho-page.hoho-page .chip { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + padding: 0.125rem var(--sp-1); + border-radius: var(--r-pill); + font-size: 0.75rem; + font-weight: 700; + line-height: 1.6; + white-space: nowrap; +} + +.hoho-page.hoho-page .chip--accent { + background: var(--c-accent); + color: var(--c-black); +} + +.hoho-page.hoho-page .chip--glass { + color: var(--c-white); + background: var(--c-glass); + font-weight: 400; + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} + +.hoho-page.hoho-page .rating { + position: absolute; + left: var(--sp-2); + top: var(--sp-2); + z-index: 2; + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.125rem var(--sp-1); + border-radius: var(--r-pill); + color: var(--c-white); + background: var(--c-glass); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} + +.hoho-page.hoho-page .rating__star { + color: var(--c-accent); +} + +.hoho-page.hoho-page .rating b { + font-size: 0.875rem; + font-weight: 500; +} + +.hoho-page.hoho-page .rating i { + font-size: 0.75rem; + font-style: normal; + font-weight: 500; + opacity: 0.3; +} + +/* key / value pairs used on the cards */ +.hoho-page.hoho-page .meta { + display: flex; + flex-direction: column; + gap: 0.25rem; + min-width: 0; +} + +.hoho-page.hoho-page .meta__k { + font-size: 0.75rem; + font-weight: 500; +} + +.hoho-page.hoho-page .meta__v { + font-size: 1rem; + font-weight: 800; +} + +/* ========================================================= + Circular "ring" badge (scroll cue, book now, back to top) + ========================================================= */ +.hoho-page.hoho-page .ring-badge { + position: relative; + display: grid; + place-items: center; + aspect-ratio: 1; + width: clamp(3.25rem, 2.6rem + 2vw, 4.5rem); + flex: none; +} + +.hoho-page.hoho-page .ring-badge__ring { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0.75; + animation: spin 16s linear infinite; +} + +.hoho-page.hoho-page .ring-badge__text { + fill: currentColor; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.hoho-page.hoho-page .ring-badge__dot { + display: grid; + place-items: center; + padding: var(--sp-1); + border-radius: var(--r-pill); + color: var(--c-white); + background: var(--c-glass); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + transition: transform 0.2s var(--ease); +} + +.hoho-page.hoho-page .ring-badge:hover .ring-badge__dot { + transform: scale(1.08); +} + +.hoho-page.hoho-page .ring-badge--accent .ring-badge__dot, +.hoho-page.hoho-page .dcard:hover .ring-badge--card .ring-badge__dot, +.hoho-page.hoho-page .dcard:focus-within .ring-badge--card .ring-badge__dot, +.hoho-page.hoho-page .tcard:hover .ring-badge--card .ring-badge__dot, +.hoho-page.hoho-page .tcard:focus-within .ring-badge--card .ring-badge__dot, +.hoho-page.hoho-page .acard:hover .ring-badge--card .ring-badge__dot, +.hoho-page.hoho-page .acard:focus-within .ring-badge--card .ring-badge__dot { + color: var(--c-black); + background: var(--c-accent); +} + +.hoho-page.hoho-page .rail:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.hoho-page.hoho-page .rail:hover .acard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.hoho-page.hoho-page .bus__grid:hover + .tcard.is-active:not(:hover):not(:focus-within) + .ring-badge__dot { + color: var(--c-white); + background: var(--c-glass); +} + +.hoho-page.hoho-page .ring-badge--scroll { + position: absolute; + left: 50%; + bottom: 0; + z-index: 5; + /* dark ink stays legible over both the teal hero foot and the white section below */ + color: var(--c-ink); + transform: translate(-50%, 50%); +} + +.hoho-page.hoho-page .ring-badge--card { + width: clamp(2.875rem, 2.4rem + 1.6vw, 3.875rem); + color: var(--c-white); +} + +.hoho-page.hoho-page .ring-badge--card .ring-badge__text { + font-size: 0.875rem; +} + +.hoho-page.hoho-page .ring-badge--card .ring-badge__dot { + padding: 0.4375rem; +} + +.hoho-page.hoho-page .ring-badge--top { + position: absolute; + left: 50%; + top: 0; + color: var(--c-ink); + transform: translate(-50%, -50%); +} + +.hoho-page.hoho-page .ring-badge--top .ring-badge__text { + font-size: 0.625rem; + letter-spacing: 0.02em; +} + +.hoho-page.hoho-page .ring-badge--scroll .ring-badge__dot .icon { + animation: nudge 2s var(--ease) infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes nudge { + 0%, + 60%, + 100% { + transform: translateY(0); + } + + 30% { + transform: translateY(0.1875rem); + } +} + +/* ========================================================= + Header + ========================================================= */ +.hoho-page.hoho-page .site-header { + position: absolute; + inset: var(--page-inset) 0 auto; + z-index: 20; + padding-block: var(--sp-4); + color: var(--c-white); +} + +.hoho-page.hoho-page .site-header.is-stuck { + position: fixed; + inset-block-start: 0; + padding-block: var(--sp-2); + background: rgba(0, 0, 0, 0.55); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + animation: slide-down 0.3s var(--ease); +} + +@keyframes slide-down { + from { + transform: translateY(-100%); + } +} + +.hoho-page.hoho-page .header__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-4); +} + +.hoho-page.hoho-page .header__left { + display: flex; + align-items: center; + gap: clamp(1.5rem, 0.2rem + 4.5vw, 6rem); + min-width: 0; +} + +.hoho-page.hoho-page .header__logo .logo { + width: clamp(4.25rem, 3.6rem + 1.6vw, 5.6875rem); + height: auto; +} + +.hoho-page.hoho-page .header__actions { + display: flex; + align-items: center; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .nav__list { + display: flex; + align-items: center; + gap: clamp(1rem, 0.1rem + 1.8vw, 2.5rem); +} + +.hoho-page.hoho-page .nav__link { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + font-weight: 500; + white-space: nowrap; + transition: opacity 0.2s var(--ease); +} + +.hoho-page.hoho-page .nav__link:hover { + opacity: 0.7; +} + +.hoho-page.hoho-page .nav__item--has-menu { + position: relative; +} + +.hoho-page.hoho-page .nav__toggle .icon--chevron { + transition: transform 0.25s var(--ease); +} + +.hoho-page.hoho-page .nav__toggle[aria-expanded="true"] .icon--chevron { + transform: rotate(180deg); +} + +.hoho-page.hoho-page .nav__submenu { + position: absolute; + top: calc(100% + var(--sp-2)); + left: 0; + z-index: 5; + display: grid; + gap: 0.25rem; + min-width: max-content; + padding: var(--sp-1); + border-radius: 1rem; + color: var(--c-black); + background: var(--c-white); + box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18); + opacity: 0; + visibility: hidden; + transform: translateY(-0.375rem); + transition: + opacity 0.2s var(--ease), + transform 0.2s var(--ease), + visibility 0.2s; +} + +.hoho-page.hoho-page .nav__item--has-menu:hover .nav__submenu, +.hoho-page.hoho-page .nav__toggle[aria-expanded="true"] + .nav__submenu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.hoho-page.hoho-page .nav__submenu a { + display: block; + padding: var(--sp-1) var(--sp-3); + border-radius: var(--r-pill); + font-weight: 500; +} + +.hoho-page.hoho-page .nav__submenu a:hover { + background: rgba(0, 0, 0, 0.06); +} + +.hoho-page.hoho-page .nav__mobile-cta { + display: none; +} + +.hoho-page.hoho-page .burger { + display: none; + place-content: center; + place-items: center; + gap: 0.25rem; + aspect-ratio: 1; + width: var(--control-h); + border-radius: var(--r-pill); + background: var(--c-glass); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} + +.hoho-page.hoho-page .burger span { + display: block; + width: 1.125rem; + height: 0.125rem; + border-radius: 1px; + background: var(--c-white); + transition: + transform 0.25s var(--ease), + opacity 0.25s var(--ease); +} + +.hoho-page.hoho-page .burger[aria-expanded="true"] span:nth-child(1) { + transform: translateY(0.375rem) rotate(45deg); +} + +.hoho-page.hoho-page .burger[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.hoho-page.hoho-page .burger[aria-expanded="true"] span:nth-child(3) { + transform: translateY(-0.375rem) rotate(-45deg); +} + +/* ========================================================= + Hero + ========================================================= */ +.hoho-page.hoho-page .hero { + position: relative; + display: grid; + align-items: end; + margin: var(--page-inset); + padding-block: calc(var(--header-h) + var(--sp-6)) + clamp(3rem, 1.5rem + 6vw, 6rem); + border-radius: var(--r-xl); + isolation: isolate; +} + +.hoho-page.hoho-page .hero__media { + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + overflow: clip; +} + +.hoho-page.hoho-page .hero__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +/* Figma gradients: radial vignette + teal fade into the next section */ +.hoho-page.hoho-page .hero__scrim { + 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% + ), + linear-gradient(180deg, rgba(44, 175, 194, 0) 51.6%, var(--c-teal) 100%); +} + +.hoho-page.hoho-page .hero__content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--sp-4); + text-align: left; +} + +.hoho-page.hoho-page .hero__eyebrow { + order: 1; + font-size: 1rem; +} + +.hoho-page.hoho-page .hero__title { + order: 2; + /* em keeps the two-line break ("Set out on" / "the journey.") at every size */ + max-width: 5.4em; + margin: 0; + font-size: var(--fs-hero); + font-weight: 500; + line-height: 1.05; + letter-spacing: -0.02em; + color: var(--c-white); +} + +.hoho-page.hoho-page .booking { + order: 3; + width: 100%; + max-width: 46.625rem; + padding: var(--sp-3); + border-radius: var(--r-card); + background: var(--c-white); + box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.18); +} + +.hoho-page.hoho-page .booking__row { + display: flex; + align-items: flex-end; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .field { + display: flex; + flex: 1 1 0; + flex-direction: column; + gap: var(--sp-2); + min-width: 0; +} + +.hoho-page.hoho-page .field__label { + display: flex; + align-items: center; + gap: var(--sp-1); + font-size: 1rem; + font-weight: 500; + color: var(--c-black); +} + +.hoho-page.hoho-page .field__label label { + cursor: pointer; +} + +.hoho-page.hoho-page .select { + position: relative; + display: flex; + align-items: center; +} + +.hoho-page.hoho-page .select__input { + width: 100%; + min-width: 0; + min-height: var(--control-h); + padding: 0 calc(var(--sp-3) + 1.5rem) 0 var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-pill); + font: inherit; + font-weight: 500; + color: var(--c-black); + background: var(--c-white); + appearance: none; + -webkit-appearance: none; + text-overflow: ellipsis; + transition: border-color 0.2s var(--ease); +} + +.hoho-page.hoho-page .select__input::placeholder { + color: var(--c-black); + opacity: 1; +} + +.hoho-page.hoho-page .select__input:hover { + border-color: rgba(0, 0, 0, 0.3); +} + +.hoho-page.hoho-page .select__input--date::-webkit-calendar-picker-indicator { + opacity: 0; + cursor: pointer; +} + +.hoho-page.hoho-page .select__chevron { + position: absolute; + right: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.hoho-page.hoho-page .booking__submit { + flex: none; +} + +/* ========================================================= + Section shell + section header + ========================================================= */ +.hoho-page.hoho-page .section { + padding-block: var(--sp-6); +} + +.hoho-page.hoho-page .section--tight { + padding-block-start: 0; +} + +.hoho-page.hoho-page .sec-head { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: clamp(1.5rem, 0.5rem + 3vw, 4rem); + margin-bottom: var(--sp-6); +} + +.hoho-page.hoho-page .sec-head__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; +} + +.hoho-page.hoho-page .sec-head__lead { + max-width: 40ch; + margin: 0; + opacity: 0.7; + font-weight: 500; +} + +.hoho-page.hoho-page .sec-head__actions { + display: flex; + flex-direction: column; + gap: var(--sp-1); + width: clamp(8rem, 6rem + 4vw, 9.125rem); +} + +.hoho-page.hoho-page .rail-nav { + display: flex; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .rail-nav__btn { + flex: 1 1 0; + padding-inline: var(--sp-3); +} + +.hoho-page.hoho-page .rail-nav__btn[disabled] { + opacity: 0.35; + cursor: not-allowed; +} + +/* ========================================================= + Horizontal rails + ========================================================= */ +.hoho-page.hoho-page .rail { + display: flex; + gap: var(--gap); + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + scrollbar-width: none; + /* 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); +} + +.hoho-page.hoho-page .rail::-webkit-scrollbar { + display: none; +} + +.hoho-page.hoho-page .rail > * { + scroll-snap-align: start; +} + +.hoho-page.hoho-page .rail--dest > * { + flex: 0 0 calc((100% - 4 * var(--gap)) / 5); +} + +.hoho-page.hoho-page .rail--art > * { + flex: 0 0 calc((100% - 2 * var(--gap)) / 3); +} + +/* ========================================================= + Destination card + ========================================================= */ +.hoho-page.hoho-page .dcard { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + aspect-ratio: 246 / 346; + padding: clamp(0.75rem, 0.4rem + 1vw, 1.25rem); + border-radius: var(--r-card); + color: var(--c-white); + overflow: hidden; + isolation: isolate; + transition: transform 0.3s var(--ease); +} + +.hoho-page.hoho-page .dcard:hover { + transform: translateY(-0.25rem); +} + +.hoho-page.hoho-page .dcard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.hoho-page.hoho-page .dcard::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 35%, + rgba(0, 0, 0, 0.65) 100% + ); +} + +/* highlighted card — gradients copied from Figma */ +.hoho-page.hoho-page .dcard.is-active, +.hoho-page.hoho-page .dcard:hover, +.hoho-page.hoho-page .dcard:focus-within { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.hoho-page.hoho-page .dcard.is-active::after, +.hoho-page.hoho-page .dcard:hover::after, +.hoho-page.hoho-page .dcard:focus-within::after { + background: + 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%); +} + +/* hovering any card in the rail hands the highlight over to it */ +.hoho-page.hoho-page .rail:hover .dcard.is-active:not(:hover):not(:focus-within), +.hoho-page.hoho-page .rail:focus-within .dcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.hoho-page.hoho-page .rail:hover .dcard.is-active:not(:hover):not(:focus-within)::after, +.hoho-page.hoho-page .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% + ); +} + +.hoho-page.hoho-page .dcard__desc { + position: absolute; + left: clamp(0.75rem, 0.4rem + 1vw, 1.25rem); + right: clamp(0.75rem, 0.4rem + 1vw, 1.25rem); + 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); +} + +.hoho-page.hoho-page .dcard.is-active .dcard__desc, +.hoho-page.hoho-page .dcard:hover .dcard__desc, +.hoho-page.hoho-page .dcard:focus-within .dcard__desc { + opacity: 1; + transform: translateY(0); +} + +.hoho-page.hoho-page .rail:hover .dcard.is-active:not(:hover):not(:focus-within) .dcard__desc, +.hoho-page.hoho-page .rail:focus-within + .dcard.is-active:not(:hover):not(:focus-within) + .dcard__desc { + opacity: 0; + transform: translateY(-0.375rem); +} + +.hoho-page.hoho-page .dcard__desc-k { + display: block; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.5; +} + +.hoho-page.hoho-page .dcard__desc p { + margin: 0.25rem 0 0; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.45; +} + +.hoho-page.hoho-page .dcard__body { + display: grid; + gap: var(--sp-2); +} + +.hoho-page.hoho-page .dcard__title { + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .dcard__meta { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--sp-2); +} + +.hoho-page.hoho-page .dcard__meta .ring-badge { + margin-inline-start: auto; +} + +/* ========================================================= + Open Top Bus Tours (promo + 2x2 grid) + ========================================================= */ +.hoho-page.hoho-page .bus { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + gap: var(--gap); + align-items: start; +} + +.hoho-page.hoho-page .bus__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--gap); +} + +.hoho-page.hoho-page .promo { + position: relative; + display: flex; + flex-direction: column; + aspect-ratio: 416 / 526; + padding: clamp(1.25rem, 0.6rem + 2vw, 2.5rem); + border-radius: var(--r-card); + background: var(--c-teal-05); + overflow: hidden; + isolation: isolate; +} + +.hoho-page.hoho-page .promo__route { + position: absolute; + inset: 0; + z-index: -1; + width: 100%; + height: 100%; + opacity: 0.5; +} + +.hoho-page.hoho-page .promo__head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .promo__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + opacity: 0.8; +} + +.hoho-page.hoho-page .promo__chip { + align-self: flex-start; + margin-top: calc(var(--sp-1) * -1); + transform: rotate(-6deg); +} + +.hoho-page.hoho-page .promo__bus { + position: relative; + /* basis 0 so the coach takes only the space the title and note leave over */ + flex: 1 1 0; + display: grid; + place-items: center; + min-height: 0; + margin-inline: clamp(-2rem, -0.5rem - 3vw, -0.75rem); + /* padding-block: var(--sp-3) var(--sp-4); */ + padding-left: 2.5rem; +} + +.hoho-page.hoho-page .promo__bus img { + width: 100%; + height: 100%; + /* grid items default to min-height:auto, which would keep the intrinsic height */ + min-height: 0; + 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)); +} + +.hoho-page.hoho-page .promo__note { + margin: 0; + margin-inline-start: auto; + max-width: 15rem; + font-weight: 500; + color: var(--c-teal); +} + +/* ========================================================= + Wide tour card + ========================================================= */ +.hoho-page.hoho-page .tcard { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + aspect-ratio: 416 / 251; + padding: clamp(0.875rem, 0.5rem + 1vw, 1.25rem); + border-radius: var(--r-card); + color: var(--c-white); + overflow: hidden; + isolation: isolate; + transition: transform 0.3s var(--ease); +} + +.hoho-page.hoho-page .tcard:hover { + transform: translateY(-0.25rem); +} + +.hoho-page.hoho-page .tcard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.hoho-page.hoho-page .tcard::after { + content: ""; + 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% + ); +} + +.hoho-page.hoho-page .tcard.is-active, +.hoho-page.hoho-page .tcard:hover, +.hoho-page.hoho-page .tcard:focus-within { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.hoho-page.hoho-page .tcard.is-active::after, +.hoho-page.hoho-page .tcard:hover::after, +.hoho-page.hoho-page .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% + ), + 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%); +} + +.hoho-page.hoho-page .bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within), +.hoho-page.hoho-page .bus__grid:focus-within .tcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.hoho-page.hoho-page .bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within)::after, +.hoho-page.hoho-page .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% + ); +} + +.hoho-page.hoho-page .tcard__k { + font-size: 0.75rem; + font-weight: 500; + opacity: 0.9; +} + +.hoho-page.hoho-page .tcard__title { + max-width: 14ch; + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + line-height: 1.15; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .tcard__bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--sp-2); +} + +/* ========================================================= + About + ========================================================= */ +.hoho-page.hoho-page .about { + display: grid; + grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); + align-items: center; + gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); +} + +.hoho-page.hoho-page .about__art { + position: relative; + display: grid; + place-items: center; + aspect-ratio: 4 / 3; + color: var(--c-teal); +} + +.hoho-page.hoho-page .about__glow { + display: none; +} + +/* straight speed-trail band running along the coach's axis */ +.hoho-page.hoho-page .about__trail { + position: absolute; + left: -34%; + 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% + ); + /* small blur only — the band keeps its straight parallel edges */ + filter: blur(2px); + /* 25deg == the roof ridge angle, measured off the artwork itself */ + transform: rotate(32deg); + pointer-events: none; +} + +/* the arcs sit in front of the bus, as in the reference */ +.hoho-page.hoho-page .about__arcs { + position: absolute; + z-index: 2; + inset: -12% 12% 2%; + width: auto; + height: 98%; + pointer-events: none; +} + +.hoho-page.hoho-page .about__bus { + position: relative; + z-index: 1; + display: grid; + place-items: center; + width: 92%; +} + +.hoho-page.hoho-page .about__bus img { + width: 100%; + height: auto; + object-fit: contain; + filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.25)); +} + +.hoho-page.hoho-page .about__body { + display: grid; + gap: clamp(1.25rem, 0.8rem + 1.4vw, 1.8125rem); +} + +.hoho-page.hoho-page .about__head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); + flex-wrap: wrap; +} + +.hoho-page.hoho-page .about__title { + position: relative; + margin: 0; + padding-right: 1.5rem; + font-size: var(--fs-h2); + font-weight: 800; + letter-spacing: -0.03em; + opacity: 0.8; +} + +.hoho-page.hoho-page .about__chip { + position: absolute; + right: 0; + bottom: -0.75rem; + transform: rotate(-6deg); +} + +.hoho-page.hoho-page .about__text { + margin: 0; + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +.hoho-page.hoho-page .stats { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-4); +} + +.hoho-page.hoho-page .stat { + display: flex; + align-items: flex-end; + gap: 0.75rem; +} + +.hoho-page.hoho-page .stat__num { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1; + letter-spacing: -0.03em; +} + +.hoho-page.hoho-page .stat__num span { + color: var(--c-teal); +} + +.hoho-page.hoho-page .stat__label { + opacity: 0.5; + font-weight: 500; +} + +/* ========================================================= + Testimonials marquee + ========================================================= */ +.hoho-page.hoho-page .testimonials__head { + display: grid; + justify-items: center; + gap: var(--sp-3); + margin-bottom: var(--sp-6); + text-align: center; +} + +.hoho-page.hoho-page .testimonials__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + letter-spacing: -0.03em; +} + +.hoho-page.hoho-page .testimonials__lead { + max-width: 42ch; + margin: 0; + opacity: 0.5; + font-weight: 500; +} + +.hoho-page.hoho-page .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 + ); +} + +.hoho-page.hoho-page .marquee__route { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0.6; + pointer-events: none; +} + +.hoho-page.hoho-page .marquee__track { + display: flex; + align-items: center; + gap: var(--gap); + width: max-content; + padding-block: var(--sp-3); + animation: marquee 60s linear infinite; +} + +.hoho-page.hoho-page .marquee:hover .marquee__track, +.hoho-page.hoho-page .marquee:focus-within .marquee__track { + animation-play-state: paused; +} + +@keyframes marquee { + to { + transform: translateX(calc(-50% - var(--gap) / 2)); + } +} + +.hoho-page.hoho-page .quote { + display: grid; + gap: var(--sp-3); + flex: none; + width: clamp(17rem, 14rem + 12vw, 26rem); + padding: var(--sp-4) var(--sp-5); + border-radius: var(--r-card); + background: var(--c-teal-05); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +.hoho-page.hoho-page .quote--lg { + width: clamp(19rem, 15rem + 16vw, 32.875rem); +} + +.hoho-page.hoho-page .quote--sm { + width: clamp(15rem, 12rem + 9vw, 21.375rem); +} + +.hoho-page.hoho-page .quote__head { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.hoho-page.hoho-page .quote__avatar { + aspect-ratio: 1; + width: 3rem; + border-radius: 50%; + object-fit: cover; +} + +.hoho-page.hoho-page .quote__head b { + display: block; + font-weight: 700; +} + +.hoho-page.hoho-page .quote__head i { + font-style: normal; + font-weight: 500; + color: var(--c-teal); +} + +.hoho-page.hoho-page .quote blockquote { + opacity: 0.5; + font-weight: 500; + text-align: justify; +} + +/* ========================================================= + Article card + ========================================================= */ +.hoho-page.hoho-page .acard { + display: flex; + flex-direction: column; + border-radius: var(--r-card); + background: var(--c-white); + transition: transform 0.3s var(--ease); +} + +.hoho-page.hoho-page .acard:hover { + transform: translateY(-0.25rem); +} + +.hoho-page.hoho-page .acard.is-active { + background: var(--c-teal-05); +} + +.hoho-page.hoho-page .acard__media { + position: relative; + aspect-ratio: 416 / 251; + border-radius: var(--r-card); + color: var(--c-white); + overflow: hidden; + isolation: isolate; +} + +.hoho-page.hoho-page .acard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.hoho-page.hoho-page .acard__media::after { + content: ""; + 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% + ); +} + +.hoho-page.hoho-page .acard.is-active .acard__media::after, +.hoho-page.hoho-page .acard:hover .acard__media::after, +.hoho-page.hoho-page .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% + ), + 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%); +} + +.hoho-page.hoho-page .acard.is-active .acard__media, +.hoho-page.hoho-page .acard:hover .acard__media, +.hoho-page.hoho-page .acard:focus-within .acard__media { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.hoho-page.hoho-page .rail:hover .acard.is-active:not(:hover):not(:focus-within) { + background: var(--c-white); +} + +.hoho-page.hoho-page .rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media { + box-shadow: none; +} + +.hoho-page.hoho-page .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% + ); +} + +.hoho-page.hoho-page .acard__time { + position: absolute; + left: var(--sp-2); + top: var(--sp-2); +} + +.hoho-page.hoho-page .acard__overlay { + position: absolute; + inset: auto 0 0; + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--sp-2); + padding: clamp(0.875rem, 0.5rem + 1vw, 1.5rem); +} + +.hoho-page.hoho-page .acard__title { + max-width: 17ch; + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + line-height: 1.15; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .acard__excerpt { + margin: 0; + padding: var(--sp-4) var(--sp-4) var(--sp-5); + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +.hoho-page.hoho-page .acard.is-active .acard__excerpt, +.hoho-page.hoho-page .acard:hover .acard__excerpt, +.hoho-page.hoho-page .acard:focus-within .acard__excerpt { + opacity: 1; + color: var(--c-teal); +} + +.hoho-page.hoho-page .acard.is-active, +.hoho-page.hoho-page .acard:hover, +.hoho-page.hoho-page .acard:focus-within { + background: var(--c-teal-05); +} + +.hoho-page.hoho-page .rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt { + opacity: 0.7; + color: inherit; +} + +/* ========================================================= + FAQ + ========================================================= */ +.hoho-page.hoho-page .faq { + position: relative; + margin: var(--page-inset); + padding-block: var(--sp-6); + border-radius: var(--r-xl); + background: var(--c-teal-05); + overflow: hidden; + isolation: isolate; +} + +.hoho-page.hoho-page .faq__watermark { + position: absolute; + left: clamp(1rem, -1rem + 6vw, 4rem); + bottom: clamp(-2rem, -6vw, -1rem); + z-index: -1; + font-size: clamp(6rem, 2rem + 16vw, 15rem); + font-weight: 800; + letter-spacing: -0.04em; + line-height: 1; + color: transparent; + -webkit-text-stroke: 1px rgba(44, 175, 194, 0.35); + pointer-events: none; + user-select: none; +} + +.hoho-page.hoho-page .faq__inner { + display: grid; + grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); + gap: clamp(2rem, 0.5rem + 6vw, 8.375rem); + align-items: start; +} + +.hoho-page.hoho-page .faq__intro { + display: grid; + gap: var(--sp-4); +} + +.hoho-page.hoho-page .faq__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + letter-spacing: -0.03em; +} + +.hoho-page.hoho-page .faq__lead { + margin: 0; + opacity: 0.7; + font-weight: 500; +} + +.hoho-page.hoho-page .accordion { + display: grid; + gap: var(--sp-4); +} + +.hoho-page.hoho-page .acc + .acc { + border-top: 1px solid var(--c-line); + padding-top: var(--sp-4); +} + +.hoho-page.hoho-page .acc h3 { + margin: 0; + font-size: inherit; + font-weight: inherit; +} + +.hoho-page.hoho-page .acc__q { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); + width: 100%; + padding: 0; + font-weight: 500; + text-align: left; + transition: color 0.2s var(--ease); +} + +.hoho-page.hoho-page .acc__q .icon { + opacity: 0.3; +} + +.hoho-page.hoho-page .acc__minus { + display: none; +} + +.hoho-page.hoho-page .acc__q[aria-expanded="true"] { + color: var(--c-teal); + font-weight: 700; +} + +.hoho-page.hoho-page .acc__q[aria-expanded="true"] .icon { + opacity: 1; +} + +.hoho-page.hoho-page .acc__q[aria-expanded="true"] .acc__plus { + display: none; +} + +.hoho-page.hoho-page .acc__q[aria-expanded="true"] .acc__minus { + display: block; +} + +.hoho-page.hoho-page .acc__a { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.3s var(--ease); +} + +/* The button sits inside an

, 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. */ +.hoho-page.hoho-page .acc:has(.acc__q[aria-expanded="true"]) .acc__a { + grid-template-rows: 1fr; +} + +.hoho-page.hoho-page .acc__a > * { + overflow: hidden; +} + +.hoho-page.hoho-page .acc__a p { + margin: 0; + padding-top: var(--sp-4); + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +/* ========================================================= + Footer + ========================================================= */ +.hoho-page.hoho-page .footer { + position: relative; + 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); + background: var(--c-black); +} + +.hoho-page.hoho-page .footer__inner { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + gap: clamp(2rem, 0.5rem + 5vw, 6rem); + padding-bottom: var(--sp-6); +} + +.hoho-page.hoho-page .footer__logo .logo { + width: clamp(5rem, 4rem + 2.5vw, 7.125rem); + height: auto; +} + +.hoho-page.hoho-page .footer__brand { + display: grid; + gap: var(--sp-4); + align-content: start; +} + +.hoho-page.hoho-page .footer__about { + margin: 0; + opacity: 0.5; + font-weight: 500; + text-align: justify; +} + +.hoho-page.hoho-page .footer__cols { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--sp-4); + justify-items: start; +} + +.hoho-page.hoho-page .footer__cols ul { + display: grid; + gap: 0.75rem; +} + +.hoho-page.hoho-page .footer__ct { + margin: 0 0 var(--sp-3); + font-size: 1rem; + font-weight: 700; + color: var(--c-teal); +} + +.hoho-page.hoho-page .footer__cols a { + opacity: 0.5; + font-weight: 500; + transition: opacity 0.2s var(--ease); +} + +.hoho-page.hoho-page .footer__cols a:hover { + opacity: 1; +} + +.hoho-page.hoho-page .footer__bar { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); + align-items: center; + gap: var(--sp-4); + padding-block: var(--sp-4); + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.hoho-page.hoho-page .footer__copy { + margin: 0; + font-weight: 500; +} + +.hoho-page.hoho-page .socials { + display: flex; + align-items: center; + justify-content: center; + gap: var(--sp-5); +} + +/* dashed rules either side of the social icons, as in the design */ +.hoho-page.hoho-page .socials::before, +.hoho-page.hoho-page .socials::after { + content: ""; + flex: 1 1 clamp(2rem, 8vw, 11rem); + border-top: 1px dashed rgba(255, 255, 255, 0.3); +} + +.hoho-page.hoho-page .socials::before { + margin-inline-end: var(--sp-4); +} + +.hoho-page.hoho-page .socials::after { + margin-inline-start: var(--sp-4); +} + +.hoho-page.hoho-page .socials li { + flex: none; +} + +.hoho-page.hoho-page .socials a { + display: grid; + place-items: center; + transition: opacity 0.2s var(--ease); +} + +.hoho-page.hoho-page .socials a:hover { + opacity: 0.7; +} + +.hoho-page.hoho-page .support { + position: absolute; + right: clamp(1.5rem, 0.5rem + 3vw, 4rem); + bottom: 0; + z-index: 2; + display: grid; + place-items: center; + color: var(--c-white); +} + +.hoho-page.hoho-page .support__ring { + position: absolute; + aspect-ratio: 1; + scale: 140%; + opacity: 0.5; + top: -1.5rem; +} + +.hoho-page.hoho-page .support__tab { + display: grid; + place-items: center; + 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% + ); + box-shadow: 0 0.75rem 8.25rem var(--c-teal); + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); + transition: transform 0.2s var(--ease); +} + +.hoho-page.hoho-page .support:hover .support__tab { + transform: translateY(-0.25rem); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 78rem) { +.hoho-page.hoho-page .rail--dest > * { + flex: 0 0 calc((100% - 3 * var(--gap)) / 4); + } + + +} + +@media (max-width: 68.75rem) { +.hoho-page.hoho-page .booking__row { + flex-wrap: wrap; + } + +.hoho-page.hoho-page .field { + flex: 1 1 14rem; + } + +.hoho-page.hoho-page .booking__submit { + flex: 1 1 100%; + } + +.hoho-page.hoho-page .sec-head { + grid-template-columns: minmax(0, 1fr) auto; + } + +.hoho-page.hoho-page .sec-head__lead { + grid-column: 1 / -1; + grid-row: 2; + max-width: none; + } + +.hoho-page.hoho-page .rail--dest > * { + flex: 0 0 calc((100% - 2 * var(--gap)) / 3); + } + +.hoho-page.hoho-page .bus { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .promo { + aspect-ratio: 16 / 9; + } + +.hoho-page.hoho-page .about { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .about__art { + order: 2; + aspect-ratio: 16 / 9; + } + +.hoho-page.hoho-page .faq__inner { + grid-template-columns: minmax(0, 1fr); + } + + +} + +@media (max-width: 60rem) { +.hoho-page.hoho-page .burger { + display: inline-grid; + } + +.hoho-page.hoho-page .header__cta { + display: none; + } + +.hoho-page.hoho-page .nav { + position: absolute; + top: calc(100% + var(--sp-2)); + right: var(--gutter); + left: var(--gutter); + padding: var(--sp-2); + border-radius: var(--r-card); + color: var(--c-black); + background: var(--c-white); + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22); + opacity: 0; + visibility: hidden; + transform: translateY(-0.5rem); + transition: + opacity 0.25s var(--ease), + transform 0.25s var(--ease), + visibility 0.25s; + } + +.hoho-page.hoho-page .nav.is-open { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + +.hoho-page.hoho-page .nav__list { + flex-direction: column; + align-items: stretch; + gap: 0; + } + +.hoho-page.hoho-page .nav__link { + width: 100%; + justify-content: space-between; + padding: var(--sp-2) var(--sp-3); + border-radius: var(--r-pill); + } + +.hoho-page.hoho-page .nav__link:hover { + opacity: 1; + background: rgba(0, 0, 0, 0.05); + } + +.hoho-page.hoho-page .nav__submenu { + position: static; + display: none; + padding: 0 0 var(--sp-1) var(--sp-3); + box-shadow: none; + opacity: 1; + visibility: visible; + transform: none; + } + +.hoho-page.hoho-page .nav__item--has-menu:hover .nav__submenu { + display: none; + } + +.hoho-page.hoho-page .nav__toggle[aria-expanded="true"] + .nav__submenu { + display: grid; + } + +.hoho-page.hoho-page .nav__mobile-cta { + display: block; + margin-top: var(--sp-1); + } + +.hoho-page.hoho-page .nav__cta { + width: 100%; + } + +.hoho-page.hoho-page .rail--art > * { + flex: 0 0 calc((100% - var(--gap)) / 2); + } + +.hoho-page.hoho-page .footer__inner { + grid-template-columns: minmax(0, 1fr); + } + + +} + +@media (max-width: 48rem) { +.hoho-page.hoho-page .rail--dest > * { + flex: 0 0 calc((100% - var(--gap)) / 2); + } + +.hoho-page.hoho-page .bus__grid { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .stats { + gap: var(--sp-3); + } + +.hoho-page.hoho-page .footer__bar { + grid-template-columns: minmax(0, 1fr); + justify-items: start; + } + +.hoho-page.hoho-page .socials::before, +.hoho-page.hoho-page .socials::after { + display: none; + } + +.hoho-page.hoho-page .support { + right: var(--gutter); + } + + +} + +@media (max-width: 40rem) { +.hoho-page.hoho-page .booking { + padding: var(--sp-2); + } + +.hoho-page.hoho-page .booking__row { + gap: var(--sp-2); + } + +.hoho-page.hoho-page .field { + flex: 1 1 100%; + } + +.hoho-page.hoho-page .sec-head { + grid-template-columns: minmax(0, 1fr); + gap: var(--sp-3); + } + +.hoho-page.hoho-page .sec-head__lead { + grid-row: auto; + } + +.hoho-page.hoho-page .sec-head__actions { + flex-direction: row; + width: 100%; + } + +.hoho-page.hoho-page .sec-head__actions .btn--wide { + width: auto; + flex: 1 1 auto; + } + +.hoho-page.hoho-page .rail--dest > * { + flex: 0 0 min(72%, 15rem); + } + +.hoho-page.hoho-page .rail--art > * { + flex: 0 0 min(85%, 22rem); + } + +.hoho-page.hoho-page .promo { + aspect-ratio: auto; + gap: var(--sp-4); + } + +.hoho-page.hoho-page .promo__note { + max-width: none; + margin-inline-start: 0; + } + +.hoho-page.hoho-page .stats { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .support { + display: none; + } + +.hoho-page.hoho-page .footer__cols { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-5) var(--sp-4); + } + +/* justified text tears open on narrow columns */ +.hoho-page.hoho-page .about__text, +.hoho-page.hoho-page .acard__excerpt, +.hoho-page.hoho-page .quote blockquote, +.hoho-page.hoho-page .acc__a p, +.hoho-page.hoho-page .footer__about { + text-align: left; + } + + +} + +@media (prefers-reduced-motion: reduce) { +.hoho-page.hoho-page { + scroll-behavior: auto; + } + +.hoho-page.hoho-page *, +.hoho-page.hoho-page *::before, +.hoho-page.hoho-page *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + +.hoho-page.hoho-page .rail { + scroll-behavior: auto; + } + + +} + +/* ========================================================= + Tour archive — hero filter bar + ========================================================= */ +.hoho-page.hoho-page .hero--archive { + min-height: clamp(30rem, 78svh, 48rem); +} + +/* "Explore Tours" is short enough to stay on one line at every size */ +.hoho-page.hoho-page .hero--archive .hero__title { + max-width: none; +} + +.hoho-page.hoho-page .filters { + order: 3; + width: 100%; + border-radius: var(--r-card); + background: var(--c-white); + box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.18); +} + +.hoho-page.hoho-page .filters__row { + display: flex; + align-items: center; + gap: var(--sp-3); + padding: var(--sp-3); +} + +.hoho-page.hoho-page .fsearch, +.hoho-page.hoho-page .fsel { + position: relative; + display: flex; + flex: 1 1 0; + align-items: center; + min-width: 0; + min-height: var(--control-h); + border-radius: var(--r-pill); + transition: border-color 0.2s var(--ease); +} + +/* the search field carries the longest placeholder, so it takes a little more room */ +.hoho-page.hoho-page .fsearch { + flex-grow: 1.3; + border: 1px solid var(--c-white); + background: rgba(0, 0, 0, 0.05); +} + +.hoho-page.hoho-page .fsel { + border: 1px solid var(--c-line); + background: var(--c-white); +} + +.hoho-page.hoho-page .fsel:hover { + border-color: rgba(0, 0, 0, 0.3); +} + +.hoho-page.hoho-page .fsearch__icon, +.hoho-page.hoho-page .fsel__icon { + position: absolute; + left: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.hoho-page.hoho-page .fsel__chevron { + position: absolute; + right: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.hoho-page.hoho-page .fsearch__input, +.hoho-page.hoho-page .fsel__input { + width: 100%; + min-width: 0; + min-height: var(--control-h); + padding: 0 calc(var(--sp-3) + 1.5rem); + border: 0; + border-radius: inherit; + font: inherit; + font-weight: 500; + color: var(--c-black); + background: transparent; + appearance: none; + -webkit-appearance: none; + text-overflow: ellipsis; +} + +.hoho-page.hoho-page .fsearch__input { + padding-inline: calc(var(--sp-3) + 1.375rem) var(--sp-2); + font-size: 0.875rem; +} + +.hoho-page.hoho-page .fsearch__input::placeholder { + color: var(--c-black); + opacity: 0.5; +} + +.hoho-page.hoho-page .fsearch__input::-webkit-search-cancel-button, +.hoho-page.hoho-page .fsearch__input::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* the sort dropdown carries its label outside the pill, so it needs no lead icon */ +.hoho-page.hoho-page .fsel--bare .fsel__input { + padding-left: var(--sp-3); +} + +.hoho-page.hoho-page .filters__apply { + flex: none; +} + +.hoho-page.hoho-page .filters__bar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3) var(--sp-4); + padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); + border-top: 1px solid var(--c-line); +} + +.hoho-page.hoho-page .filters__checks { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-2) 2.5rem; +} + +.hoho-page.hoho-page .check { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + cursor: pointer; +} + +.hoho-page.hoho-page .check__input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + pointer-events: none; +} + +.hoho-page.hoho-page .check__box { + display: grid; + flex: none; + place-items: center; + width: 1rem; + height: 1rem; + border: 1px solid rgba(0, 0, 0, 0.2); + 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); +} + +.hoho-page.hoho-page .check:hover .check__box { + border-color: rgba(0, 0, 0, 0.45); +} + +.hoho-page.hoho-page .check__input:checked + .check__box { + color: var(--c-white); + border-color: var(--c-black); + background: var(--c-black); +} + +.hoho-page.hoho-page .check__input:focus-visible + .check__box { + outline: 2px solid var(--c-teal); + outline-offset: 2px; +} + +.hoho-page.hoho-page .check__text { + font-size: 1rem; + font-weight: 500; + opacity: 0.7; + transition: opacity 0.2s var(--ease); +} + +.hoho-page.hoho-page .check__input:checked ~ .check__text { + opacity: 1; +} + +.hoho-page.hoho-page .filters__sort { + display: flex; + align-items: center; + gap: var(--sp-2); +} + +.hoho-page.hoho-page .filters__sort-label { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + font-size: 1rem; + font-weight: 500; + white-space: nowrap; +} + +.hoho-page.hoho-page .filters__sort-label label { + cursor: pointer; +} + +.hoho-page.hoho-page .filters__sort .fsel { + flex: none; + width: 8.8125rem; +} + +/* ========================================================= + Tour archive — result grid + ========================================================= */ +/* the script shows and hides cards, pages and buttons with the hidden + attribute, which the flex and grid display values would otherwise win against */ +.hoho-page.hoho-page [hidden] { + display: none !important; +} + +.hoho-page.hoho-page .results { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-2) var(--sp-3); + margin-block-end: var(--sp-4); +} + +.hoho-page.hoho-page .results__count { + margin: 0; + font-size: 1rem; + font-weight: 500; + opacity: 0.7; +} + +.hoho-page.hoho-page .results__count b { + font-weight: 800; +} + +.hoho-page.hoho-page .results__reset { + flex: none; +} + +.hoho-page.hoho-page .tgrid__empty { + margin: 0; + padding-block: var(--sp-5); + font-size: 1.125rem; + font-weight: 500; + text-align: center; + opacity: 0.7; +} + +/* a button that reads as part of the sentence around it */ +.hoho-page.hoho-page .linkbtn { + padding: 0; + border: 0; + font: inherit; + color: var(--c-teal); + background: none; + text-decoration: underline; + cursor: pointer; +} + +.hoho-page.hoho-page .tgrid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 2.5rem var(--gap); + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page .titem { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--sp-3); +} + +/* landscape variant of the destination card used on the homepage rail */ +.hoho-page.hoho-page .dcard--wide { + width: 100%; + aspect-ratio: 416 / 251; +} + +/* the wider card gives the title and the key/value pairs more room to breathe */ +.hoho-page.hoho-page .dcard--wide .dcard__body { + gap: var(--sp-3); +} + +.hoho-page.hoho-page .dcard--wide .dcard__meta { + gap: var(--sp-4); +} + +.hoho-page.hoho-page .titem__desc { + width: 88.5%; + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.5; + text-align: justify; + opacity: 0.7; + transition: + color 0.25s var(--ease), + opacity 0.25s var(--ease); +} + +.hoho-page.hoho-page .titem.is-active .titem__desc, +.hoho-page.hoho-page .titem:hover .titem__desc, +.hoho-page.hoho-page .titem:focus-within .titem__desc { + color: var(--c-teal); + opacity: 1; +} + +/* hovering any card in the grid hands the highlight over to it */ +.hoho-page.hoho-page .tgrid:hover .titem.is-active:not(:hover):not(:focus-within) .titem__desc, +.hoho-page.hoho-page .tgrid:focus-within + .titem.is-active:not(:hover):not(:focus-within) + .titem__desc { + color: inherit; + opacity: 0.7; +} + +.hoho-page.hoho-page .tgrid:hover .dcard.is-active:not(:hover):not(:focus-within), +.hoho-page.hoho-page .tgrid:focus-within .dcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.hoho-page.hoho-page .tgrid:hover .dcard.is-active:not(:hover):not(:focus-within)::after, +.hoho-page.hoho-page .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% + ); +} + +.hoho-page.hoho-page .tgrid:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.hoho-page.hoho-page .tgrid:focus-within + .dcard.is-active:not(:hover):not(:focus-within) + .ring-badge__dot { + color: var(--c-white); + background: var(--c-glass); +} + +/* ========================================================= + Tour archive — pagination + ========================================================= */ +.hoho-page.hoho-page .pager { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: var(--sp-1); + margin-block-start: var(--sp-6); +} + +.hoho-page.hoho-page .pager__pages { + display: flex; + align-items: center; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .pager__num, +.hoho-page.hoho-page .pager__btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--sp-1); + min-height: var(--control-h); + padding: 0 var(--sp-3); + border: 0; + border-radius: var(--r-pill); + font: inherit; + font-weight: 500; + 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); +} + +.hoho-page.hoho-page .pager__num { + min-width: var(--control-h); + padding: 0 var(--sp-1); +} + +.hoho-page.hoho-page .pager__num:hover { + background: rgba(0, 0, 0, 0.05); +} + +.hoho-page.hoho-page .pager__num.is-current { + color: var(--c-white); + background: var(--c-black); +} + +.hoho-page.hoho-page .pager__btn { + border: 1px solid var(--c-line); + background: var(--c-white); +} + +.hoho-page.hoho-page .pager__btn--icon { + min-width: 4.5rem; +} + +.hoho-page.hoho-page .pager__btn:hover:not([disabled]) { + border-color: var(--c-black); +} + +.hoho-page.hoho-page .pager__btn[disabled] { + opacity: 0.4; + cursor: not-allowed; +} + +.hoho-page.hoho-page .pager__gap { + padding-inline: 0.25rem; + font-weight: 500; + opacity: 0.5; +} + +/* ========================================================= + Tour archive — responsive + ========================================================= */ +@media (max-width: 68.75rem) { +.hoho-page.hoho-page .filters__row { + flex-wrap: wrap; + } + +.hoho-page.hoho-page .fsearch, +.hoho-page.hoho-page .fsel { + flex: 1 1 12rem; + } + +.hoho-page.hoho-page .filters__apply { + flex: 1 1 100%; + } + +.hoho-page.hoho-page .tgrid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + +} + +@media (max-width: 48rem) { +.hoho-page.hoho-page .filters__bar { + justify-content: flex-start; + } + +.hoho-page.hoho-page .filters__checks { + gap: var(--sp-2) var(--sp-5); + } + + +} + +@media (max-width: 40rem) { +.hoho-page.hoho-page .filters__row { + gap: var(--sp-2); + padding: var(--sp-2); + } + +.hoho-page.hoho-page .fsearch, +.hoho-page.hoho-page .fsel { + flex: 1 1 100%; + } + +.hoho-page.hoho-page .filters__bar { + padding: var(--sp-3); + } + +.hoho-page.hoho-page .filters__sort { + width: 100%; + justify-content: space-between; + } + +.hoho-page.hoho-page .tgrid { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .titem__desc { + width: 100%; + text-align: left; + } + +.hoho-page.hoho-page .pager__btn--icon { + min-width: 0; + } + + +} + +/* ========================================================= + Weblog archive + ========================================================= */ +.hoho-page.hoho-page .hero--blog { + min-height: clamp(22rem, 52svh, 30rem); +} + +.hoho-page.hoho-page .filters--blog .filters__row { + padding: var(--sp-3); +} + +.hoho-page.hoho-page .filters--blog .fsearch { + flex-grow: 1; +} + +/* the article cards carry their own tint, so the grid only lays them out */ +.hoho-page.hoho-page .titem .acard { + width: 100%; + height: 100%; +} + +.hoho-page.hoho-page .titem .acard__excerpt { + padding: var(--sp-3) var(--sp-4) var(--sp-4); +} + +/* hovering any card in the grid hands the highlight over to it */ +.hoho-page.hoho-page .tgrid:hover .acard.is-active:not(:hover):not(:focus-within), +.hoho-page.hoho-page .tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) { + background: var(--c-white); +} + +.hoho-page.hoho-page .tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media, +.hoho-page.hoho-page .tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) .acard__media { + box-shadow: none; +} + +.hoho-page.hoho-page .tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media::after, +.hoho-page.hoho-page .tgrid:focus-within + .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% + ); +} + +.hoho-page.hoho-page .tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt, +.hoho-page.hoho-page .tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt { + opacity: 0.7; + color: inherit; +} + +.hoho-page.hoho-page .tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.hoho-page.hoho-page .tgrid:focus-within + .acard.is-active:not(:hover):not(:focus-within) + .ring-badge__dot { + color: var(--c-white); + background: var(--c-glass); +} + +/* ========================================================= + Tour details — hero + ========================================================= */ +.hoho-page.hoho-page .hero-tour { + position: relative; + display: grid; + align-items: end; + /* one scale drives the display word, the kicker and the figure, so the three + keep the proportions they have in the design at every width */ + --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); + border-radius: var(--r-xl); + isolation: isolate; + overflow: clip; +} + +/* the sky photo is framed on its upper third so the grass at its foot stays out + of shot, and the wash over it carries the blue into the brand turquoise */ +.hoho-page.hoho-page .hero-tour__photo { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + 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); +} + +.hoho-page.hoho-page .hero-tour__sky { + position: absolute; + inset: 0; + 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.55) 0%, + rgba(44, 175, 194, 0.42) 45%, + rgba(111, 208, 221, 0.72) 100% + ); +} + +.hoho-page.hoho-page .hero-tour__inner { + display: flex; + flex-direction: column; + align-items: center; +} + +/* the block is exactly as wide as the display word, so it can sit centred in + the hero while the breadcrumb and the kicker line up on the word's left edge */ +.hoho-page.hoho-page .hero-tour__block { + display: flex; + position: absolute; + top: 112px; + flex-direction: column; + align-items: flex-start; + gap: var(--sp-2); + width: max-content; + max-width: 100%; +} + +.hoho-page.hoho-page .crumbs__list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; + font-size: 0.75rem; + font-weight: 500; +} + +.hoho-page.hoho-page .crumbs__list li + li::before { + content: "/"; + margin-inline-end: var(--sp-1); + opacity: 0.5; +} + +.hoho-page.hoho-page .crumbs__list a { + opacity: 0.5; + transition: opacity 0.2s var(--ease); +} + +.hoho-page.hoho-page .crumbs__list a:hover { + opacity: 1; +} + +.hoho-page.hoho-page .hero-tour__kicker { + margin: 0; + font-size: max(1.25rem, calc(var(--word) * 0.222)); + font-weight: 500; + letter-spacing: -0.01em; +} + +/* The figure overlaps the word, so the stage carries the display size and both + children are measured in em against it - the offsets are the Figma ones + (word at x487/y193 at 180px, figure at x756/y58, 263x447) expressed as ratios, + which keeps the composition identical at every width. */ +.hoho-page.hoho-page .hero-tour__stage { + position: relative; + align-self: stretch; + font-size: var(--word); + isolation: isolate; +} + +.hoho-page.hoho-page .hero-tour__word { + margin: 0; + font-size: 1em; + font-weight: 500; + line-height: 0.95; + letter-spacing: -0.02em; + color: var(--c-white); +} + +.hoho-page.hoho-page .hero-tour__figure { + position: absolute; + left: 2em; + top: -0.5em; + z-index: 1; + width: auto; + height: 2.48em; + object-fit: contain; + scale: 1.2; +} + +/* per-city figures: each cut-out has its own aspect, so each gets its own + offset and height (em against the display word, like the London one) */ +.hoho-page.hoho-page .hero-tour__figure--nashville { + left: 2.3em; + top: -0.5em; + height: 2.48em; +} + +.hoho-page.hoho-page .hero-tour__figure--paris { + left: 0.7em; + top: -0.55em; + height: 2.3em; +} + +.hoho-page.hoho-page .hero-tour__figure--sydney { + left: 1.05em; + top: 0; + height: 2.3em; + scale: 1; +} + +.hoho-page.hoho-page .hero-tour__figure--san-diego { + left: 2.1em; + top: -0.26em; + height: 2.3em; +} + +/* ========================================================= + Tour details — layout + ========================================================= */ +.hoho-page.hoho-page .tour__layout { + display: grid; + grid-template-columns: minmax(0, 1fr) 26rem; + align-items: start; + gap: clamp(1.5rem, 1rem + 1vw, 2rem); +} + +.hoho-page.hoho-page .tour__main { + display: flex; + flex-direction: column; + gap: var(--sp-5); + min-width: 0; +} + +.hoho-page.hoho-page .tour__block { + display: flex; + flex-direction: column; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .tour__ct { + margin: 0; + font-size: 1rem; + font-weight: 700; +} + +.hoho-page.hoho-page .tour__text { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.6; + opacity: 0.7; +} + +.hoho-page.hoho-page .tour__text + .tour__text { + margin-block-start: var(--sp-3); +} + +/* --- title row --- */ +.hoho-page.hoho-page .tour-head { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3) var(--sp-4); +} + +.hoho-page.hoho-page .tour-head__title { + margin: 0; + font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .tmeta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-4); + font-size: 1rem; + font-weight: 500; +} + +.hoho-page.hoho-page .tmeta__item { + display: inline-flex; + align-items: center; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .tmeta__item b { + font-weight: 500; +} + +.hoho-page.hoho-page .tmeta__item i { + font-size: 0.75rem; + font-style: normal; + opacity: 0.3; +} + +.hoho-page.hoho-page .tmeta__star { + color: var(--c-accent); +} + +.hoho-page.hoho-page .tmeta__icon { + opacity: 0.5; +} + +.hoho-page.hoho-page .tmeta__rule { + width: 1px; + height: 1.5rem; + background: var(--c-line); +} + +/* --- the four facts under the title --- */ +.hoho-page.hoho-page .facts { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page .fact, +.hoho-page.hoho-page .note { + display: flex; + align-items: center; + gap: var(--sp-2); + min-width: 0; + border-radius: var(--r-card); + background: var(--c-teal-05); +} + +.hoho-page.hoho-page .fact { + padding: var(--sp-4) var(--sp-3); +} + +.hoho-page.hoho-page .fact__icon, +.hoho-page.hoho-page .note__icon { + flex: none; + color: var(--c-teal); +} + +.hoho-page.hoho-page .fact__text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.hoho-page.hoho-page .fact__k { + font-size: 0.75rem; + font-weight: 500; + color: var(--c-teal); +} + +.hoho-page.hoho-page .fact__v { + font-size: 1rem; + font-weight: 500; +} + +/* --- gallery --- */ +.hoho-page.hoho-page .gallery { + display: grid; + grid-template-columns: 350fr 245fr 245fr; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .gallery img { + width: 100%; + height: 100%; + aspect-ratio: 245 / 194; + border-radius: var(--r-xl); + object-fit: cover; +} + +.hoho-page.hoho-page .gallery__hero { + grid-row: span 2; + aspect-ratio: auto; + border-radius: var(--r-card); +} + +.hoho-page.hoho-page .gallery img { + cursor: zoom-in; + transition: transform 0.25s var(--ease), filter 0.25s var(--ease); +} + +.hoho-page.hoho-page .gallery img:hover { + filter: brightness(1.05); +} + +/* ========================================================= + Gallery lightbox (built by vc-design.js) + ========================================================= */ +.hoho-page.hoho-page .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; +} + +.hoho-page.hoho-page .vc-lightbox.is-open { + opacity: 1; + visibility: visible; + transition: opacity 0.25s var(--ease); +} + +.hoho-page.hoho-page .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); +} + +.hoho-page.hoho-page .vc-lightbox.is-open .vc-lightbox__img { + transform: scale(1); +} + +.hoho-page.hoho-page .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); +} + +.hoho-page.hoho-page .vc-lightbox__btn:hover { + background: rgba(255, 255, 255, 0.24); +} + +.hoho-page.hoho-page .vc-lightbox__close { + top: clamp(1rem, 3vw, 2rem); + right: clamp(1rem, 3vw, 2rem); +} + +.hoho-page.hoho-page .vc-lightbox__prev, +.hoho-page.hoho-page .vc-lightbox__next { + top: 50%; + transform: translateY(-50%); +} + +.hoho-page.hoho-page .vc-lightbox__prev { + left: clamp(0.5rem, 2vw, 2rem); +} + +.hoho-page.hoho-page .vc-lightbox__next { + right: clamp(0.5rem, 2vw, 2rem); +} + +.hoho-page.hoho-page .vc-lightbox__prev:hover, +.hoho-page.hoho-page .vc-lightbox__next:hover { + transform: translateY(-50%) scale(1.06); +} + +.hoho-page.hoho-page .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 */ +.hoho-page.hoho-page .vc-lightbox--single .vc-lightbox__prev, +.hoho-page.hoho-page .vc-lightbox--single .vc-lightbox__next, +.hoho-page.hoho-page .vc-lightbox--single .vc-lightbox__count { + display: none; +} + +/* --- included / not included --- */ +.hoho-page.hoho-page .lists { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-4) clamp(1.5rem, 1rem + 1.5vw, 1.6875rem); +} + +.hoho-page.hoho-page .ilist { + display: flex; + flex-direction: column; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .ilist__items { + display: flex; + flex-direction: column; + gap: var(--sp-3); + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page .ilist__items li { + display: flex; + align-items: center; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .ilist__items p { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.5; + text-align: justify; + opacity: 0.7; +} + +.hoho-page.hoho-page .tick { + display: grid; + flex: none; + place-items: center; + width: 1.5rem; + height: 1.5rem; + border-radius: var(--r-pill); +} + +.hoho-page.hoho-page .tick--yes { + color: var(--c-green); + background: rgba(52, 199, 89, 0.1); +} + +.hoho-page.hoho-page .tick--no { + color: var(--c-red); + background: rgba(255, 56, 60, 0.1); +} + +/* --- good to know --- */ +.hoho-page.hoho-page .notes { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page .note { + gap: var(--sp-2); + padding: var(--sp-4) var(--sp-3); +} + +.hoho-page.hoho-page .note p { + margin: 0; + font-size: 1rem; + font-weight: 500; + line-height: 1.4; +} + +/* --- the tinted key/value cards, shared by the policy row and the sidebar --- */ +.hoho-page.hoho-page .statcard { + display: flex; + align-items: center; + gap: var(--sp-2); + padding: var(--sp-4); + border-radius: var(--r-card); +} + +.hoho-page.hoho-page .statcard__icon { + flex: none; +} + +.hoho-page.hoho-page .statcard__text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.hoho-page.hoho-page .statcard__k { + font-size: 0.75rem; + font-weight: 500; +} + +.hoho-page.hoho-page .statcard__v { + font-size: 1rem; + font-weight: 500; +} + +.hoho-page.hoho-page .statcard--yes { + background: rgba(52, 199, 89, 0.05); +} + +.hoho-page.hoho-page .statcard--yes .statcard__icon, +.hoho-page.hoho-page .statcard--yes .statcard__k { + color: var(--c-green); +} + +.hoho-page.hoho-page .statcard--no { + background: rgba(255, 56, 60, 0.05); +} + +.hoho-page.hoho-page .statcard--no .statcard__icon, +.hoho-page.hoho-page .statcard--no .statcard__k { + color: var(--c-red); +} + +.hoho-page.hoho-page .statcard--teal { + background: var(--c-teal-05); +} + +.hoho-page.hoho-page .statcard--teal .statcard__icon, +.hoho-page.hoho-page .statcard--teal .statcard__k { + color: var(--c-teal); +} + +.hoho-page.hoho-page .policy { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-3); + margin-block-start: var(--sp-3); +} + +/* ========================================================= + Tour details — booking sidebar + ========================================================= */ +.hoho-page.hoho-page .tour__aside { + position: sticky; + top: calc(var(--header-h) + var(--sp-3)); +} + +.hoho-page.hoho-page .bookcard { + display: flex; + flex-direction: column; + gap: var(--sp-1); + padding: var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); +} + +.hoho-page.hoho-page .bookcard__title { + display: flex; + align-items: center; + gap: var(--sp-1); + margin: 0 0 var(--sp-1); + padding: var(--sp-1) var(--sp-1) 0; + font-size: 1rem; + font-weight: 500; +} + +.hoho-page.hoho-page .bookcard__price { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3); + padding: var(--sp-3); + border: 1px dashed var(--c-line); + border-radius: var(--r-card); +} + +.hoho-page.hoho-page .price { + display: grid; + grid-template-areas: + "k k" + "v u"; + align-items: baseline; + gap: 0 var(--sp-1); + margin: 0; +} + +.hoho-page.hoho-page .price__k { + grid-area: k; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.3; +} + +.hoho-page.hoho-page .price__v { + grid-area: v; + font-size: 2rem; + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .price__unit { + grid-area: u; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.3; +} + +.hoho-page.hoho-page .bookcard__cta { + flex: none; +} + +/* ========================================================= + Tour details — responsive + ========================================================= */ +@media (max-width: 68.75rem) { +.hoho-page.hoho-page .tour__layout { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .tour__aside { + position: static; + order: -1; + } + +.hoho-page.hoho-page .facts { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + +.hoho-page.hoho-page .notes { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + +} + +@media (max-width: 48rem) { +.hoho-page.hoho-page .gallery { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto; + aspect-ratio: auto; + } + +.hoho-page.hoho-page .gallery img { + aspect-ratio: 4 / 3; + } + +.hoho-page.hoho-page .gallery__hero { + grid-column: span 2; + grid-row: auto; + aspect-ratio: 16 / 9; + } + +.hoho-page.hoho-page .lists { + grid-template-columns: minmax(0, 1fr); + } + + +} + +@media (max-width: 40rem) { +.hoho-page.hoho-page .hero-tour { + min-height: clamp(24rem, 70svh, 34rem); + } + +.hoho-page.hoho-page .facts, +.hoho-page.hoho-page .notes { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .policy { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .tour__text, +.hoho-page.hoho-page .ilist__items p { + text-align: left; + } + +.hoho-page.hoho-page .bookcard__price { + justify-content: center; + } + +.hoho-page.hoho-page .bookcard__cta { + width: 100%; + } + + +} + +/* ========================================================= + Weblog — single article + ========================================================= */ +.hoho-page.hoho-page .hero--post { + min-height: clamp(20rem, 46svh, 31rem); +} + +.hoho-page.hoho-page .post__inner { + display: flex; + flex-direction: column; + gap: clamp(3rem, 2rem + 3vw, 6.25rem); + max-width: 58.5rem; + margin-inline: auto; +} + +.hoho-page.hoho-page .post__head { + align-items: flex-start; + margin-block-end: var(--sp-5); +} + +.hoho-page.hoho-page .post__title { + max-width: 28rem; + margin: 0; + font-size: var(--fs-h2); + font-weight: 500; + line-height: 1.15; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .post__h2 { + margin: 0; + font-size: var(--fs-h2); + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .post__body { + display: flex; + flex-direction: column; + gap: var(--sp-5); +} + +.hoho-page.hoho-page .post__img { + width: 100%; + height: clamp(13rem, 8rem + 16vw, 22.1875rem); + border-radius: var(--r-card); + object-fit: cover; +} + +.hoho-page.hoho-page .post__pair { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-5); +} + +.hoho-page.hoho-page .post__rule { + width: 100%; + height: 1px; + margin: 0; + border: 0; + background: var(--c-line); +} + +/* --- tip callout --- */ +.hoho-page.hoho-page .tip { + display: flex; + align-items: center; + gap: var(--sp-3); + padding: var(--sp-4); + border-radius: var(--r-card); + background: var(--c-teal-05); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +.hoho-page.hoho-page .tip__icon { + color: var(--c-teal); +} + +.hoho-page.hoho-page .tip__k { + display: block; + font-size: 0.75rem; + font-weight: 500; + color: var(--c-teal); +} + +.hoho-page.hoho-page .tip__text p { + margin: 0; + font-weight: 500; +} + +/* --- share --- */ +.hoho-page.hoho-page .share { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-3) var(--sp-4); +} + +.hoho-page.hoho-page .share__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .share__btns { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .share__btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 3rem; + height: 3rem; + padding-inline: var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-pill); + font: inherit; + font-weight: 500; + color: var(--c-black); + background: var(--c-white); + cursor: pointer; + transition: + border-color 0.2s var(--ease), + background-color 0.2s var(--ease); +} + +.hoho-page.hoho-page .share__btn:hover { + border-color: var(--c-black); +} + +/* --- reviews --- */ +.hoho-page.hoho-page .reviews { + display: flex; + flex-direction: column; + gap: var(--sp-4); +} + +.hoho-page.hoho-page .rform { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--sp-3); + padding: var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); +} + +.hoho-page.hoho-page .rform .field { + align-self: stretch; +} + +.hoho-page.hoho-page .rform__title { + display: flex; + align-items: center; + align-self: stretch; + gap: var(--sp-1); + margin: 0; + font-weight: 500; +} + +.hoho-page.hoho-page .rform__row { + display: flex; + align-self: stretch; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .rinput { + width: 100%; + min-height: var(--control-h); + padding: 0 var(--sp-3); + border: 1px solid var(--c-white); + border-radius: var(--r-pill); + font: inherit; + font-size: 0.875rem; + font-weight: 500; + color: var(--c-black); + background: rgba(0, 0, 0, 0.05); + transition: border-color 0.2s var(--ease); +} + +.hoho-page.hoho-page .rinput::placeholder { + color: var(--c-black); + opacity: 0.5; +} + +.hoho-page.hoho-page .rinput:focus-visible { + outline: 0; + border-color: var(--c-teal); +} + +.hoho-page.hoho-page .rinput[aria-invalid="true"] { + border-color: var(--c-red); +} + +.hoho-page.hoho-page .rinput--area { + min-height: 8.25rem; + padding-block: var(--sp-2); + border-radius: var(--r-card); + resize: vertical; +} + +.hoho-page.hoho-page .rform__status { + align-self: stretch; + min-height: 1.25rem; + margin: 0; + font-size: 0.875rem; + font-weight: 500; + color: var(--c-teal); +} + +.hoho-page.hoho-page .rform__status.is-error { + color: var(--c-red); +} + +.hoho-page.hoho-page .rform__submit { + min-width: 10.625rem; +} + +.hoho-page.hoho-page .reviews__list { + position: relative; + display: flex; + flex-direction: column; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .reviews__list.is-collapsed { + max-height: 68rem; + overflow: hidden; +} + +/* fade the cut-off review out so it reads as "more below" */ +.hoho-page.hoho-page .reviews__list.is-collapsed::after { + content: ""; + position: absolute; + inset: auto 0 0; + height: 8rem; + background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--c-white)); + pointer-events: none; +} + +.hoho-page.hoho-page .reviews__more { + align-self: center; + display: inline-flex; + align-items: center; + gap: var(--sp-1); + padding: var(--sp-1); + border: 0; + font: inherit; + font-weight: 500; + color: var(--c-teal); + background: none; + cursor: pointer; +} + +.hoho-page.hoho-page .reviews__more .icon { + transition: transform 0.2s var(--ease); +} + +.hoho-page.hoho-page .reviews__more[aria-expanded="true"] .icon { + transform: rotate(180deg); +} + +.hoho-page.hoho-page .rcard { + display: flex; + flex-direction: column; + gap: var(--sp-3); + padding: var(--sp-4) var(--sp-5); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); +} + +.hoho-page.hoho-page .rcard--tint { + border-color: transparent; + background: var(--c-teal-05); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +.hoho-page.hoho-page .rcard__head { + display: flex; + align-items: center; + gap: var(--sp-2); +} + +.hoho-page.hoho-page .rcard__avatar { + width: 3rem; + aspect-ratio: 1; + border-radius: 50%; + object-fit: cover; +} + +.hoho-page.hoho-page .rcard__who { + display: flex; + flex-direction: column; + margin-inline-end: auto; +} + +.hoho-page.hoho-page .rcard__who b { + font-weight: 700; +} + +.hoho-page.hoho-page .rcard__who span { + font-weight: 500; + color: var(--c-teal); +} + +.hoho-page.hoho-page .rcard__text { + margin: 0; + font-weight: 500; + line-height: 1.5; + text-align: justify; + opacity: 0.5; +} + +.hoho-page.hoho-page .rcard__votes { + display: flex; + align-items: center; +} + +.hoho-page.hoho-page .vote { + display: grid; + place-items: center; + width: 2.5rem; + height: 2.5rem; + border: 0; + border-radius: 50%; + .share__btn--copy { + width: 9.125rem; +} + +col.share__btn--copy { + width: 9.125rem; +} + +or: var(--c-teal); + background: none; + cursor: pointer; + transition: background-color 0.2s var(--ease); +} + +.hoho-page.hoho-page .vote:hover { + background: var(--c-teal-05); +} + +.hoho-page.hoho-page .vote--down .icon { + transform: scaleY(-1); +} + +.hoho-page.hoho-page .vote[aria-pressed="true"] { + color: var(--c-white); + background: var(--c-teal); +} + +/* replies hang off the review above with a rule down the left */ +.hoho-page.hoho-page .replies { + position: relative; + display: flex; + flex-direction: column; + gap: var(--sp-3); + margin-inline-start: 6.875rem; + padding-block-start: 2.5rem; +} + +.hoho-page.hoho-page .replies__k { + position: absolute; + left: -2.5rem; + top: 0; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.3; +} + +.hoho-page.hoho-page .replies::before { + content: ""; + position: absolute; + left: -3.375rem; + top: 0; + width: 1px; + height: 2.5rem; + background: var(--c-line); +} + +.hoho-page.hoho-page .replies__all { + align-self: flex-end; + font-weight: 500; + color: var(--c-teal); +} + +/* --- related --- */ +.hoho-page.hoho-page .related { + display: flex; + flex-direction: column; + gap: 2.5rem; +} + +.hoho-page.hoho-page .related__head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); +} + +.hoho-page.hoho-page .related__all { + width: 9.125rem; +} + +.hoho-page.hoho-page .tgrid--related { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-4); +} + +@media (max-width: 40rem) { +.hoho-page.hoho-page .rform__row { + flex-direction: column; + } + +.hoho-page.hoho-page .rform__submit { + align-self: stretch; + } + +.hoho-page.hoho-page .rcard { + padding: var(--sp-3); + } + +.hoho-page.hoho-page .replies { + margin-inline-start: var(--sp-4); + padding-block-start: 0; + } + +.hoho-page.hoho-page .replies__k, +.hoho-page.hoho-page .replies::before { + display: none; + } + +.hoho-page.hoho-page .post__pair, +.hoho-page.hoho-page .tgrid--related { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .share { + align-items: flex-start; + } + + +} + +/* ========================================================= + Inner pages — About, FAQ, Contact + ========================================================= */ +.hoho-page.hoho-page .hero--page { + align-items: start; + min-height: clamp(20rem, 28vw, 26.25rem); + padding-block: calc(var(--header-h) + var(--sp-5)) 0; +} + +.hoho-page.hoho-page .hero--page .hero__title { + max-width: none; + font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); +} + +.hoho-page.hoho-page .hero--page .crumbs__list { + color: var(--c-black); +} + +.hoho-page.hoho-page .hero--page .hero__content { + gap: var(--sp-2); +} + +.hoho-page.hoho-page .hero--page .hero__img { + object-position: center top; +} + +/* the cards climb up over the foot of the hero */ +.hoho-page.hoho-page .pagebody { + position: relative; + z-index: 2; + padding-block-start: 0; +} + +/* ---------- About ---------- */ +.hoho-page.hoho-page .hero--about { + align-items: center; + min-height: clamp(26rem, 38.5vw, 36rem); + padding-block: calc(var(--header-h) + var(--sp-2)) var(--sp-6); +} + +.hoho-page.hoho-page .about-hero__block { + display: flex; + flex-direction: column; + align-self: center; + align-items: flex-start; + gap: var(--sp-1); + width: max-content; + max-width: 100%; + margin-inline: auto; +} + +.hoho-page.hoho-page .about-hero__title { + margin: 0; + font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); + font-weight: 500; + color: var(--c-black); +} + +.hoho-page.hoho-page .about-hero__mark { + position: relative; + padding-inline-end: 1.5rem; +} + +.hoho-page.hoho-page .about-hero__logo { + display: block; + width: clamp(15rem, 10rem + 20vw, 29.75rem); + height: auto; + filter: drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)); +} + +.hoho-page.hoho-page .about-hero__chip { + position: absolute; + right: 0; + top: 2.75rem; + transform: rotate(-6deg); +} + +.hoho-page.hoho-page .aboutpage__inner { + max-width: 53.5rem; + margin-inline: auto; +} + +.hoho-page.hoho-page .aboutpage { + padding-block-end: 0; +} + +.hoho-page.hoho-page .tour__block--roomy { + gap: var(--sp-4); +} + +.hoho-page.hoho-page .astats { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--sp-4); + margin: 0; + padding: var(--sp-4); + border: 1px dashed var(--c-line); + border-radius: var(--r-card); +} + +.hoho-page.hoho-page .astat { + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: var(--sp-1); +} + +.hoho-page.hoho-page .astat__num { + margin: 0; + font-size: var(--fs-h2); + font-weight: 500; + line-height: 1; +} + +.hoho-page.hoho-page .astat__num span { + color: var(--c-teal); +} + +.hoho-page.hoho-page .astat__label { + margin: 0; + font-weight: 500; + opacity: 0.5; +} + +.hoho-page.hoho-page .agallery { + display: grid; + grid-template-columns: 350fr 245fr 245fr; + grid-template-rows: repeat(2, minmax(0, 1fr)); + gap: var(--sp-3); + height: clamp(16rem, 10rem + 20vw, 24.9375rem); +} + +.hoho-page.hoho-page .agallery img { + width: 100%; + height: 100%; + min-height: 0; + border-radius: var(--r-card); + object-fit: cover; +} + +.hoho-page.hoho-page .agallery__hero { + grid-row: span 2; +} + +.hoho-page.hoho-page .aboutpage + .testimonials { + padding-block-start: var(--sp-6); +} + +/* ---------- FAQ ---------- */ +.hoho-page.hoho-page .faqpage { + margin-block-start: calc(var(--sp-6) * -1.4); +} + +.hoho-page.hoho-page .faqpage__layout { + display: grid; + grid-template-columns: 19.125rem minmax(0, 1fr); + align-items: start; + gap: var(--sp-4); +} + +.hoho-page.hoho-page .catnav { + position: sticky; + top: calc(var(--header-h) + var(--sp-3)); + display: flex; + flex-direction: column; + gap: var(--sp-3); + padding: var(--sp-4); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); +} + +.hoho-page.hoho-page .catnav__title { + display: flex; + align-items: center; + gap: var(--sp-1); + margin: 0; + font-weight: 500; +} + +.hoho-page.hoho-page .catnav__list { + display: flex; + flex-direction: column; + gap: var(--sp-1); + margin: 0; + padding: 0; + list-style: none; +} + +.hoho-page.hoho-page .catnav__link { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 3rem; + padding-inline: var(--sp-3); + border: 1px solid var(--c-line); + border-radius: var(--r-pill); + font-weight: 500; + color: var(--c-black); + background: var(--c-white); + transition: + color 0.2s var(--ease), + background-color 0.2s var(--ease), + border-color 0.2s var(--ease); +} + +.hoho-page.hoho-page .catnav__link:hover { + border-color: var(--c-black); +} + +.hoho-page.hoho-page .catnav__link.is-active { + color: var(--c-white); + border-color: var(--c-black); + background: var(--c-black); +} + +.hoho-page.hoho-page .faqpage__main { + display: flex; + flex-direction: column; + gap: var(--sp-4); + min-width: 0; +} + +.hoho-page.hoho-page .faqcard { + display: flex; + flex-direction: column; + gap: var(--sp-5); + padding: var(--sp-5); + border: 1px solid var(--c-line); + border-radius: var(--r-card); + background: var(--c-white); + scroll-margin-top: calc(var(--header-h) + var(--sp-3)); +} + +.hoho-page.hoho-page .faqcard__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 500; + letter-spacing: -0.01em; +} + +.hoho-page.hoho-page .faqcard .accordion { + gap: var(--sp-4); +} + +/* ---------- Contact ---------- */ +.hoho-page.hoho-page .contactpage { + margin-block-start: calc(var(--sp-6) * -3); +} + +.hoho-page.hoho-page .contactpage__grid { + display: grid; + grid-template-columns: 26rem minmax(0, 1fr); + gap: var(--sp-4); + width: min(60.375rem, 100%); + margin-inline-start: auto; +} + +.hoho-page.hoho-page .contactcard { + align-items: stretch; + align-content: start; +} + +.hoho-page.hoho-page .contactcard__social { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--sp-2); +} + +.hoho-page.hoho-page .facts--col { + grid-template-columns: minmax(0, 1fr); +} + +.hoho-page.hoho-page .ticketform { + min-height: 27rem; +} + +.hoho-page.hoho-page .ticketform__grow { + flex: 1 1 auto; +} + +.hoho-page.hoho-page .ticketform__grow .rinput--area { + flex: 1 1 auto; +} + +@media (max-width: 68.75rem) { +.hoho-page.hoho-page .astats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + +.hoho-page.hoho-page .contactpage { + margin-block-start: calc(var(--sp-6) * -2); + } + +.hoho-page.hoho-page .contactpage__grid { + grid-template-columns: minmax(0, 1fr); + } + + +} + +@media (max-width: 56rem) { +.hoho-page.hoho-page .faqpage__layout { + grid-template-columns: minmax(0, 1fr); + } + +.hoho-page.hoho-page .catnav { + position: static; + } + +.hoho-page.hoho-page .catnav__list { + flex-direction: row; + flex-wrap: wrap; + } + +.hoho-page.hoho-page .catnav__link { + gap: var(--sp-1); + } + + +} + +@media (max-width: 40rem) { +.hoho-page.hoho-page .faqcard { + padding: var(--sp-3); + } + +.hoho-page.hoho-page .agallery { + height: auto; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-rows: none; + } + +.hoho-page.hoho-page .agallery__hero { + grid-column: span 2; + grid-row: auto; + aspect-ratio: 16 / 10; + } + +.hoho-page.hoho-page .agallery img { + aspect-ratio: 1; + } + +.hoho-page.hoho-page .about-hero__chip { + top: 1.75rem; + } + + +} + +/* the FAQ and contact photos are tinted to the brand teal, as in the design */ +.hoho-page.hoho-page .hero--faq .hero__media::after, +.hoho-page.hoho-page .hero--contact .hero__media::after { + content: ""; + position: absolute; + inset: 0; + background: var(--c-teal); + mix-blend-mode: hue; +} + +/* a closed answer must not keep its top padding, or every collapsed row looks taller */ +.hoho-page.hoho-page .acc__q[aria-expanded="false"] + .acc__a p { + padding-top: 0; +} + +/* ========================================================= + Scroll reveal + each top-level section fades and rises into place the first + time it crosses into view; its cards cascade in right after + ========================================================= */ +@media (prefers-reduced-motion: no-preference) { +.hoho-page.hoho-page .reveal { + opacity: 0; + transform: translateY(2.5rem); + transition: + opacity 0.7s var(--ease), + transform 0.7s var(--ease); + } + +.hoho-page.hoho-page .reveal.is-visible { + opacity: 1; + transform: none; + } + +.hoho-page.hoho-page .reveal-item { + opacity: 0; + } + +.hoho-page.hoho-page .reveal-item.is-visible { + animation: card-rise 0.6s var(--ease) both; + } + +@keyframes card-rise { + from { + opacity: 0; + transform: translateY(1.5rem); + } + to { + opacity: 1; + transform: none; + } + } + + +} + + diff --git a/astra-child-hoponhopoff/assets/pages.js b/astra-child-hoponhopoff/assets/pages.js new file mode 100644 index 0000000..87ebcb8 --- /dev/null +++ b/astra-child-hoponhopoff/assets/pages.js @@ -0,0 +1,175 @@ +/** + * Behaviour for the theme's design pages (About, Contact, FAQ, blog list and + * post) — the parts of "new front/js/main.js" these pages use. Header/footer + * behaviour stays in chrome.js. + */ +(function () { + 'use strict'; + + var cfg = window.hohoPages || {}; + var page = document.querySelector('main.hoho-page'); + if (!page) return; + + var each = function (list, fn) { Array.prototype.forEach.call(list, fn); }; + + /* ---------- testimonials marquee: duplicate for a seamless loop ---------- */ + var marquee = page.querySelector('[data-marquee] .marquee__track'); + if (marquee) { + each(Array.prototype.slice.call(marquee.children), function (node) { + var copy = node.cloneNode(true); + copy.setAttribute('aria-hidden', 'true'); + marquee.appendChild(copy); + }); + } + + /* ---------- FAQ accordion ---------- */ + each(page.querySelectorAll('[data-accordion]'), function (accordion) { + accordion.addEventListener('click', function (e) { + var btn = e.target.closest('.acc__q'); + if (!btn) return; + var open = btn.getAttribute('aria-expanded') === 'true'; + each(accordion.querySelectorAll('.acc__q'), function (other) { + other.setAttribute('aria-expanded', 'false'); + }); + btn.setAttribute('aria-expanded', String(!open)); + }); + }); + + /* ---------- FAQ page: category nav follows the scroll ---------- */ + var catLinks = Array.prototype.slice.call(page.querySelectorAll('.catnav__link')); + if (catLinks.length && 'IntersectionObserver' in window) { + var setCat = function (id) { + catLinks.forEach(function (a) { + var on = a.getAttribute('href') === '#' + id; + a.classList.toggle('is-active', on); + if (on) a.setAttribute('aria-current', 'true'); + else a.removeAttribute('aria-current'); + }); + }; + var catObserver = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) setCat(entry.target.id); + }); + }, { rootMargin: '-30% 0px -60% 0px' }); + catLinks.forEach(function (a) { + var target = document.querySelector(a.getAttribute('href')); + if (target) catObserver.observe(target); + }); + } + + /* ---------- blog list: sort applies on change ---------- */ + each(page.querySelectorAll('select[data-autosubmit]'), function (select) { + select.addEventListener('change', function () { select.form.submit(); }); + }); + + /* ---------- single article: share links, copy link, more reviews ---------- */ + var post = document.getElementById('post'); + if (post) { + var pageUrl = encodeURIComponent(window.location.href.split('#')[0]); + var shareTargets = { + telegram: 'https://t.me/share/url?url=', + facebook: 'https://www.facebook.com/sharer/sharer.php?u=', + whatsapp: 'https://wa.me/?text=' + }; + each(post.querySelectorAll('[data-share]'), function (a) { + var base = shareTargets[a.getAttribute('data-share')]; + if (base) a.href = base + pageUrl; + }); + + var copyBtn = post.querySelector('[data-copy-link]'); + if (copyBtn && navigator.clipboard) { + var copyLabel = copyBtn.textContent; + copyBtn.addEventListener('click', function () { + navigator.clipboard.writeText(window.location.href.split('#')[0]).then(function () { + copyBtn.textContent = cfg.copied || 'Link copied'; + copyBtn.classList.add('is-done'); + window.setTimeout(function () { + copyBtn.textContent = copyLabel; + copyBtn.classList.remove('is-done'); + }, 2000); + }, function () {}); + }); + } + + var reviewList = document.getElementById('reviewList'); + var reviewMore = document.getElementById('reviewMore'); + if (reviewList && reviewMore) { + var moreLabel = reviewMore.querySelector('span'); + reviewMore.addEventListener('click', function () { + var open = reviewList.classList.toggle('is-collapsed') === false; + reviewMore.setAttribute('aria-expanded', String(open)); + moreLabel.textContent = open ? cfg.fewer : cfg.more; + }); + } + } + + /* ---------- contact form: validate, then send without leaving the page ---------- */ + var ticketForm = document.getElementById('ticketForm'); + var ticketStatus = document.getElementById('ticketStatus'); + if (ticketForm && ticketStatus && window.fetch && window.FormData) { + var submitBtn = ticketForm.querySelector('[type="submit"]'); + ticketForm.addEventListener('submit', function (e) { + e.preventDefault(); + var bad = null; + each(ticketForm.querySelectorAll('.rinput'), function (field) { + var ok = field.value.trim() !== '' && field.checkValidity(); + field.setAttribute('aria-invalid', String(!ok)); + if (!ok && !bad) bad = field; + }); + ticketStatus.classList.toggle('is-error', !!bad); + if (bad) { + ticketStatus.textContent = cfg.invalid; + bad.focus(); + return; + } + + ticketStatus.textContent = cfg.sending; + submitBtn.disabled = true; + fetch(ticketForm.getAttribute('data-ajax'), { method: 'POST', credentials: 'same-origin', body: new FormData(ticketForm) }) + .then(function (r) { return r.json(); }) + .then(function (res) { + var ok = res && res.success; + ticketStatus.classList.toggle('is-error', !ok); + ticketStatus.textContent = (res && res.data && res.data.message) || cfg.failed; + if (ok) ticketForm.reset(); + }) + .catch(function () { + ticketStatus.classList.add('is-error'); + ticketStatus.textContent = cfg.failed; + }) + .then(function () { submitBtn.disabled = false; }); + }); + } + + /* ---------- scroll reveal: sections fade/rise in, cards cascade after ---------- */ + var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (!reduceMotion && 'IntersectionObserver' in window) { + var sections = Array.prototype.slice.call(page.querySelectorAll(':scope > section, :scope > article, :scope > div.section')); + var cardSelector = '.dcard, .acard, .titem, .rcard, .quote, .statcard'; + var groupCounts = new Map(); + + sections.forEach(function (section) { + section.classList.add('reveal'); + each(section.querySelectorAll(cardSelector), function (card) { + var group = card.parentElement; + var i = groupCounts.get(group) || 0; + groupCounts.set(group, i + 1); + card.classList.add('reveal-item'); + card.style.animationDelay = (Math.min(i, 7) * 0.07) + 's'; + }); + }); + + var revealObserver = new IntersectionObserver(function (entries, obs) { + entries.forEach(function (entry) { + if (!entry.isIntersecting) return; + entry.target.classList.add('is-visible'); + each(entry.target.querySelectorAll('.reveal-item'), function (item) { + item.classList.add('is-visible'); + }); + obs.unobserve(entry.target); + }); + }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }); + + sections.forEach(function (section) { revealObserver.observe(section); }); + } +})(); diff --git a/astra-child-hoponhopoff/assets/sprite-pages.svg b/astra-child-hoponhopoff/assets/sprite-pages.svg new file mode 100644 index 0000000..c21a1e9 --- /dev/null +++ b/astra-child-hoponhopoff/assets/sprite-pages.svg @@ -0,0 +1,29 @@ + diff --git a/astra-child-hoponhopoff/functions.php b/astra-child-hoponhopoff/functions.php index b0170f4..c346f2a 100644 --- a/astra-child-hoponhopoff/functions.php +++ b/astra-child-hoponhopoff/functions.php @@ -23,10 +23,10 @@ add_action( 'wp_enqueue_scripts', function () { if ( wp_style_is( 'astra-theme-css', 'registered' ) ) { $deps[] = 'astra-theme-css'; } - wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.8' ); + wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.10' ); // Header interactions: burger, submenu, sticky, back-to-top, search toggle. - wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.8', true ); + wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.10', true ); wp_add_inline_style( 'hoho-chrome', @@ -131,6 +131,7 @@ function hoho_render_footer() { } require get_stylesheet_directory() . '/inc/nav-walker.php'; +require get_stylesheet_directory() . '/inc/pages.php'; /** * The logo: a linked WordPress Custom Logo if one is set, otherwise the bundled diff --git a/astra-child-hoponhopoff/inc/footer.php b/astra-child-hoponhopoff/inc/footer.php index 1a7c5ee..a5179dd 100644 --- a/astra-child-hoponhopoff/inc/footer.php +++ b/astra-child-hoponhopoff/inc/footer.php @@ -10,15 +10,7 @@ $hoho_about = apply_filters( get_bloginfo( 'description' ) ? get_bloginfo( 'description' ) : __( 'Open-top hop on, hop off bus tours — explore the city at your own pace, with flexible tickets and free cancellation.', 'hoponhopoff' ) ); -$hoho_socials = apply_filters( - 'hoho_socials', - array( - 'whatsapp' => '#', - 'instagram' => '#', - 'telegram' => '#', - 'facebook' => '#', - ) -); +$hoho_socials = hoho_socials(); $hoho_footer_col = function ( $location ) { if ( ! has_nav_menu( $location ) ) { diff --git a/astra-child-hoponhopoff/inc/pages.php b/astra-child-hoponhopoff/inc/pages.php new file mode 100644 index 0000000..a3e318d --- /dev/null +++ b/astra-child-hoponhopoff/inc/pages.php @@ -0,0 +1,301 @@ + array( 'about-us', 'about' ), + 'contact' => array( 'contact-us', 'contact' ), + 'faq' => array( 'faq', 'faqs' ), + 'blog' => array( 'blogs', 'blog' ), + ) + ); +} + +/** + * Which design the current request uses: about|contact|faq|blog|post, or ''. + */ +function hoho_page_kind() { + static $kind = null; + if ( null !== $kind ) { + return $kind; + } + // The query is not resolved yet: answer, but don't cache the answer. + if ( ! did_action( 'wp' ) ) { + return ''; + } + $kind = ''; + if ( is_singular( 'post' ) ) { + $kind = 'post'; + } elseif ( is_home() && ! is_front_page() ) { + // The Posts page — but never a "Your latest posts" homepage. + $kind = 'blog'; + } elseif ( is_page() ) { + foreach ( hoho_page_slugs() as $name => $slugs ) { + if ( is_page( $slugs ) ) { + $kind = $name; + break; + } + } + } + return $kind; +} + +function hoho_asset( $path ) { + return get_stylesheet_directory_uri() . '/assets/' . ltrim( $path, '/' ); +} + +/** + * Social profile links (footer + contact page). Override with the + * `hoho_socials` filter. + */ +function hoho_socials() { + return apply_filters( + 'hoho_socials', + array( + 'whatsapp' => '#', + 'instagram' => '#', + 'telegram' => '#', + 'facebook' => '#', + ) + ); +} + +add_filter( + 'template_include', + function ( $template ) { + $kind = hoho_page_kind(); + if ( '' === $kind ) { + return $template; + } + $path = get_stylesheet_directory() . '/templates/' . $kind . '.php'; + return file_exists( $path ) ? $path : $template; + }, + 99 +); + +// Full-width, no-sidebar canvas under Astra (same treatment as the plugin pages). +add_filter( + 'body_class', + function ( $classes ) { + if ( hoho_page_kind() ) { + $classes[] = 'hoho-fullwidth'; + } + return $classes; + } +); +add_filter( + 'astra_page_layout', + function ( $layout ) { + return hoho_page_kind() ? 'no-sidebar' : $layout; + } +); +add_filter( + 'astra_get_content_layout', + function ( $layout ) { + return hoho_page_kind() ? 'page-builder' : $layout; + } +); + +add_action( + 'wp_enqueue_scripts', + function () { + if ( ! hoho_page_kind() ) { + return; + } + $ver = wp_get_theme()->get( 'Version' ); + // pages.css is the whole design stylesheet scoped to .hoho-page; the + // Astra overrides load after it so they win ties. + wp_enqueue_style( 'hoho-pages', hoho_asset( 'pages.css' ), array( 'hoho-chrome' ), $ver ); + wp_enqueue_style( 'hoho-pages-wp', hoho_asset( 'pages-wp.css' ), array( 'hoho-pages' ), $ver ); + wp_enqueue_script( 'hoho-pages', hoho_asset( 'pages.js' ), array(), $ver, true ); + wp_localize_script( + 'hoho-pages', + 'hohoPages', + array( + 'sending' => __( 'Sending…', 'hoponhopoff' ), + 'invalid' => __( 'Please fill in your name, a valid email and your message.', 'hoponhopoff' ), + 'failed' => hoho_contact_message( 'error' ), + 'copied' => __( 'Link copied', 'hoponhopoff' ), + 'more' => __( 'Show all reviews', 'hoponhopoff' ), + 'fewer' => __( 'Show fewer reviews', 'hoponhopoff' ), + ) + ); + }, + 30 +); + +// Icons the design pages use that the site-wide sprite lacks. +add_action( + 'wp_footer', + function () { + if ( hoho_page_kind() ) { + echo file_get_contents( get_stylesheet_directory() . '/assets/sprite-pages.svg' ); // phpcs:ignore + } + }, + 2 +); + +/* --------------------------------------------------------------------------- + * Blog + * ------------------------------------------------------------------------- */ + +/** + * Blog list state from the query string. `q` (not `s`) so WordPress does not + * switch to its search template; `pg` so paging works the same whether the + * list is the Posts page or an ordinary page. + */ +function hoho_blog_state() { + $q = isset( $_GET['q'] ) ? sanitize_text_field( wp_unslash( $_GET['q'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification + $sort = isset( $_GET['sort'] ) ? sanitize_key( $_GET['sort'] ) : 'newest'; // phpcs:ignore WordPress.Security.NonceVerification + $pg = isset( $_GET['pg'] ) ? max( 1, absint( $_GET['pg'] ) ) : 1; // phpcs:ignore WordPress.Security.NonceVerification + if ( ! in_array( $sort, array( 'newest', 'oldest', 'title' ), true ) ) { + $sort = 'newest'; + } + return compact( 'q', 'sort', 'pg' ); +} + +function hoho_blog_query( array $state ) { + $order = array( + 'newest' => array( 'date', 'DESC' ), + 'oldest' => array( 'date', 'ASC' ), + 'title' => array( 'title', 'ASC' ), + ); + return new WP_Query( + array( + 'post_type' => 'post', + 'post_status' => 'publish', + 'posts_per_page' => 12, + 'paged' => $state['pg'], + 's' => $state['q'], + 'orderby' => $order[ $state['sort'] ][0], + 'order' => $order[ $state['sort'] ][1], + 'ignore_sticky_posts' => true, + ) + ); +} + +/** + * Card date chip, as in the design: relative for the last week, then a date. + */ +function hoho_time_label( $post = null ) { + $time = get_post_time( 'U', true, $post ); + if ( time() - $time < WEEK_IN_SECONDS ) { + /* translators: %s: human time difference, e.g. "3 hours". */ + return sprintf( __( '%s ago', 'hoponhopoff' ), human_time_diff( $time ) ); + } + return get_the_date( 'Y/m/d', $post ); +} + +/** + * Image for a post card/hero: the featured image, else a design photo. + */ +function hoho_post_image_url( $post = null, $size = 'large' ) { + $url = get_the_post_thumbnail_url( $post, $size ); + if ( $url ) { + return $url; + } + $fallbacks = array( 'tour-london', 'tour-paris', 'tour-sydney', 'tour-san-diego' ); + return hoho_asset( 'img/' . $fallbacks[ get_post( $post )->ID % count( $fallbacks ) ] . '.webp' ); +} + +/** + * One article card (.acard). $wrap: 'li' (blog grid, wrapped in .titem) or + * 'related' (the post page's related row, where the card is the
  • ). + */ +function hoho_article_card( $post, $wrap = 'li' ) { + $post = get_post( $post ); + $heading = 'related' === $wrap ? 'h3' : 'h2'; + ob_start(); + ?> +
    + + +
    + < class="acard__title">> + + + + +
    +
    +

    + ' . $inner . '
    • '; + } + return '
  • ' . $inner . '
    • '; +} + +/* --------------------------------------------------------------------------- + * Contact form + * ------------------------------------------------------------------------- */ + +function hoho_contact_message( $status ) { + return 'sent' === $status + ? __( 'Thanks! Your ticket has been sent. We will reply by email.', 'hoponhopoff' ) + : __( 'Sorry, your message could not be sent. Please check the fields and try again.', 'hoponhopoff' ); +} + +/** + * Recipient: "Contact email" on Settings → Viator Collector, else the site + * admin email. + */ +function hoho_contact_recipient() { + $settings = get_option( 'vc_settings', array() ); + $email = is_array( $settings ) && ! empty( $settings['contact_email'] ) ? $settings['contact_email'] : ''; + return is_email( $email ) ? $email : get_option( 'admin_email' ); +} + +function hoho_handle_contact() { + $ajax = wp_doing_ajax(); + $ok = false; + + $valid_nonce = isset( $_POST['hoho_contact_nonce'] ) && wp_verify_nonce( sanitize_key( wp_unslash( $_POST['hoho_contact_nonce'] ) ), 'hoho_contact' ); + $name = isset( $_POST['name'] ) ? sanitize_text_field( wp_unslash( $_POST['name'] ) ) : ''; + $email = isset( $_POST['email'] ) ? sanitize_email( wp_unslash( $_POST['email'] ) ) : ''; + $message = isset( $_POST['message'] ) ? sanitize_textarea_field( wp_unslash( $_POST['message'] ) ) : ''; + $trap = isset( $_POST['website'] ) ? trim( (string) wp_unslash( $_POST['website'] ) ) : ''; + + if ( '' !== $trap ) { + // A bot filled the hidden field: pretend it worked, send nothing. + $ok = true; + } elseif ( $valid_nonce && '' !== $name && is_email( $email ) && '' !== $message ) { + $subject = sprintf( + /* translators: 1: site name, 2: sender name. */ + __( '[%1$s] Contact form: %2$s', 'hoponhopoff' ), + wp_specialchars_decode( get_bloginfo( 'name' ), ENT_QUOTES ), + $name + ); + $body = sprintf( "Name: %s\nEmail: %s\n\n%s\n", $name, $email, $message ); + $headers = array( 'Reply-To: ' . str_replace( array( "\r", "\n" ), '', $name ) . ' <' . $email . '>' ); + $ok = wp_mail( hoho_contact_recipient(), $subject, $body, $headers ); + } + + if ( $ajax ) { + if ( $ok ) { + wp_send_json_success( array( 'message' => hoho_contact_message( 'sent' ) ) ); + } + wp_send_json_error( array( 'message' => hoho_contact_message( 'error' ) ) ); + } + + $back = wp_get_referer() ? wp_get_referer() : home_url( '/contact-us/' ); + wp_safe_redirect( add_query_arg( 'contact', $ok ? 'sent' : 'error', remove_query_arg( 'contact', $back ) ) . '#ticketForm' ); + exit; +} +foreach ( array( 'admin_post_hoho_contact', 'admin_post_nopriv_hoho_contact', 'wp_ajax_hoho_contact', 'wp_ajax_nopriv_hoho_contact' ) as $hoho_hook ) { + add_action( $hoho_hook, 'hoho_handle_contact' ); +} +unset( $hoho_hook ); diff --git a/astra-child-hoponhopoff/style.css b/astra-child-hoponhopoff/style.css index e1db709..f52d4d4 100644 --- a/astra-child-hoponhopoff/style.css +++ b/astra-child-hoponhopoff/style.css @@ -4,7 +4,7 @@ Theme URI: https://git.kaamyab.dev/vargha/TourWebsite Description: Astra child theme that replaces the Astra header and footer with the "Hop On Hop Off" design. Pairs with the Viator Collector plugin. Author: Amir Bagheri Template: astra -Version: 1.0.9 +Version: 1.0.10 Text Domain: hoponhopoff */ diff --git a/astra-child-hoponhopoff/templates/about.php b/astra-child-hoponhopoff/templates/about.php new file mode 100644 index 0000000..e6e8c28 --- /dev/null +++ b/astra-child-hoponhopoff/templates/about.php @@ -0,0 +1,272 @@ + +
    +
    +
    + +
    + +
    +
    + +

    Know more about

    + +
    +
    + + + + + + + +
    + +
    +
    +
    +
    +
    +

    Hop On Hop Off

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    +
    + +
    +
    +
    25+
    +
    Years Experience
    +
    +
    +
    500+
    +
    Tours Conducted
    +
    +
    +
    430+
    +
    Tours this Year
    +
    +
    +
    15+
    +
    Different Tours
    +
    +
    + +
    +

    Gallery

    +
    + + + + + +
    +
    + +
    +

    Why Choose us?

    +
      +
    • + +
      + Duration + 1h 30m +
      +
      • +
    • + +
      + Max Travelers + 15 people +
      +
      • +
    • + +
      + Free Cancellation + Up to 24 hrs +
      +
      • +
    • + +
      + Category + Best Conversion +
      +
      • +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +

    Your Comment’s

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    +
    +
    + +
    + +
    +
    +
    + + + Malika Favre + Paris Tour + +
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua
    +
    +
    +
    + + + Malika Favre + Paris Tour + +
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit
    +
    +
    +
    + + + Malika Favre + Paris Tour + +
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore
    +
    +
    +
    + + + Malika Favre + Paris Tour + +
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua
    +
    +
    +
    +
    +
    +max_num_pages; +$hoho_pg = min( $hoho_state['pg'], max( 1, $hoho_max ) ); + +$hoho_url = function ( $pg ) use ( $hoho_base, $hoho_state ) { + $args = array(); + if ( '' !== $hoho_state['q'] ) { + $args['q'] = $hoho_state['q']; + } + if ( 'newest' !== $hoho_state['sort'] ) { + $args['sort'] = $hoho_state['sort']; + } + if ( $pg > 1 ) { + $args['pg'] = $pg; + } + return add_query_arg( $args, $hoho_base ) . '#blog-list'; +}; + +// Page numbers with gaps: 1 … 4 5 6 … 12. +$hoho_range = array(); +for ( $n = 1; $n <= $hoho_max; $n++ ) { + if ( $n <= 1 || $n >= $hoho_max || abs( $n - $hoho_pg ) <= 1 ) { + $hoho_range[] = $n; + } elseif ( null !== end( $hoho_range ) ) { + $hoho_range[] = null; + } +} +?> +
    +
    +
    + + +
    + +
    +

    +

    + + +
    +
    + +
    +
    +
    +

    + found_posts, 'hoponhopoff' ), number_format_i18n( (int) $hoho_query->found_posts ) ) ); + ?> +

    + + + +
    + + have_posts() ) : ?> +
      + posts as $hoho_post ) { + echo hoho_article_card( $hoho_post ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + } + ?> +
    + +

    + .

    + + + 1 ) : ?> + + +
    +
    +
    + +
    +
    +
    + +
    + +
    + +

    Contact us

    +
    +
    + +
    +
    +
    +
    +

    Contact Information

    +
      +
    • + +
      + Address + Up to 24 hrs +
      +
      • +
    • + +
      + CEO unit + +1 1234 5678 +
      +
      • +
    • + +
      + Support + +1 1234 5678 +
      +
      • +
    • + +
      + Mail + info@hoho.com +
      +
      • +
    + +
    + + +
    + + + + +

    Send Ticket

    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +

    + +
    +
    +
    +
    +
    + +
    +
    +
    + +
    + +
    + +

    FAQ’s

    +
    +
    + +
    +
    + + +
    +
    +

    General

    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +
    +
    +

    Tours

    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +
    +
    +

    Accounts

    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +
    +
    +

    Other

    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +

    + +

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboreLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

    +
    +
    +
    +
    +
    +
    +
    +
    + $hoho_post_id, + 'status' => 'approve', + 'parent' => 0, + 'order' => 'ASC', + ) +); +$hoho_related = get_posts( + array( + 'post_type' => 'post', + 'posts_per_page' => 4, + 'post__not_in' => array( $hoho_post_id ), + 'category__in' => wp_list_pluck( $hoho_cats, 'term_id' ), + 'ignore_sticky_posts' => true, + ) +); +if ( count( $hoho_related ) < 4 ) { + $hoho_related = array_merge( + $hoho_related, + get_posts( + array( + 'post_type' => 'post', + 'posts_per_page' => 4 - count( $hoho_related ), + 'post__not_in' => array_merge( array( $hoho_post_id ), wp_list_pluck( $hoho_related, 'ID' ) ), + ) + ) + ); +} +$hoho_blog_url = get_option( 'page_for_posts' ) ? get_permalink( get_option( 'page_for_posts' ) ) : home_url( '/blogs/' ); + +/** + * One review card in the design's markup. + */ +$hoho_review = function ( $comment, $classes ) use ( $hoho_post_id ) { + $by_author = (int) $comment->user_id && (int) $comment->user_id === (int) get_post_field( 'post_author', $hoho_post_id ); + ?> +
    +
    + 'rcard__avatar' ) ); ?> +
    + + +
    +
    +
    +
    + +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +

    +
    + + name ); ?> + + + + + +
    +
    + +
    +
    + +
    +
    + + +
    + + +
    +

    + + +
    +

    + +
    +
    + + +
    +
    + + +
    +
    + +
    + + +
    + + +

    + +
    + + + +
    + $hoho_post_id, + 'status' => 'approve', + 'parent' => $hoho_comment->comment_ID, + 'order' => 'ASC', + ) + ); + if ( $hoho_replies ) { + echo '
    ' . esc_html__( 'Replies', 'hoponhopoff' ) . ''; + foreach ( $hoho_replies as $i => $hoho_reply ) { + $hoho_review( $hoho_reply, $i % 2 ? 'rcard--tint rcard--reply' : 'rcard--reply' ); + } + echo '
    '; + } + } + ?> +
    + 3 ) : ?> + + + +
    + + + +
    +
    +

    + + + + +
    +
      + +
    +
    + +
    +
    +
    +
    + 'USD', 'timeout' => 20, 'default_post_status' => 'publish', + 'contact_email' => '', 'hero_image' => '', 'hero_image_id' => 0, 'single_hero_figure_id' => 0, @@ -150,6 +151,7 @@ class VC_Settings { 'currency' => strtoupper( sanitize_text_field( $input['currency'] ?? 'USD' ) ), 'timeout' => max( 5, absint( $input['timeout'] ?? 20 ) ), 'default_post_status' => sanitize_key( $input['default_post_status'] ?? 'publish' ), + 'contact_email' => sanitize_email( $input['contact_email'] ?? '' ), 'hero_image' => esc_url_raw( $input['hero_image'] ?? '' ), 'hero_image_id' => absint( $input['hero_image_id'] ?? 0 ), 'single_hero_figure_id' => absint( $input['single_hero_figure_id'] ?? 0 ), @@ -225,6 +227,13 @@ class VC_Settings {

    + + + + +

    + + diff --git a/viator-collector/viator-collector.php b/viator-collector/viator-collector.php index 5da5d19..72fff85 100644 --- a/viator-collector/viator-collector.php +++ b/viator-collector/viator-collector.php @@ -4,13 +4,13 @@ defined('ABSPATH') || exit; /** * Plugin Name: Viator Collector * Description: Import Viator tours using the Viator Partner API and display them with native WordPress post types, templates, and shortcodes. - * Version: 1.9.0 + * Version: 1.9.1 * Author: Amir Bagheri * License: GPL-2.0-or-later * Text Domain: viator-collector */ -define('VC_VERSION', '1.9.0'); +define('VC_VERSION', '1.9.1'); define('VC_PLUGIN_FILE', __FILE__); define('VC_PLUGIN_DIR', plugin_dir_path(__FILE__)); define('VC_PLUGIN_URL', plugin_dir_url(__FILE__));