commit 85dfe6b43312c827a66c503e5f14c485198ca540 Author: vargha1 Date: Tue Sep 8 00:01:11 2026 +0330 homepage diff --git a/assets/bus-iso.png b/assets/bus-iso.png new file mode 100644 index 0000000..ec779d7 Binary files /dev/null and b/assets/bus-iso.png differ diff --git a/assets/bus-open-top.png b/assets/bus-open-top.png new file mode 100644 index 0000000..193ad06 Binary files /dev/null and b/assets/bus-open-top.png differ diff --git a/assets/city-london.png b/assets/city-london.png new file mode 100644 index 0000000..9e7f532 Binary files /dev/null and b/assets/city-london.png differ diff --git a/assets/city-nashville.png b/assets/city-nashville.png new file mode 100644 index 0000000..d87b7bb Binary files /dev/null and b/assets/city-nashville.png differ diff --git a/assets/city-paris.png b/assets/city-paris.png new file mode 100644 index 0000000..39ae892 Binary files /dev/null and b/assets/city-paris.png differ diff --git a/assets/city-san-diego.png b/assets/city-san-diego.png new file mode 100644 index 0000000..1212899 Binary files /dev/null and b/assets/city-san-diego.png differ diff --git a/assets/city-sydney.png b/assets/city-sydney.png new file mode 100644 index 0000000..a1ce1e3 Binary files /dev/null and b/assets/city-sydney.png differ diff --git a/assets/ellipse-17-2.png b/assets/ellipse-17-2.png new file mode 100644 index 0000000..6a0ccf5 Binary files /dev/null and b/assets/ellipse-17-2.png differ diff --git a/assets/ellipse-17.png b/assets/ellipse-17.png new file mode 100644 index 0000000..6a0ccf5 Binary files /dev/null and b/assets/ellipse-17.png differ diff --git a/assets/hero.png b/assets/hero.png new file mode 100644 index 0000000..888a70f Binary files /dev/null and b/assets/hero.png differ diff --git a/assets/liked-london.png b/assets/liked-london.png new file mode 100644 index 0000000..84354b1 Binary files /dev/null and b/assets/liked-london.png differ diff --git a/assets/liked-nashville.png b/assets/liked-nashville.png new file mode 100644 index 0000000..a552402 Binary files /dev/null and b/assets/liked-nashville.png differ diff --git a/assets/liked-paris.png b/assets/liked-paris.png new file mode 100644 index 0000000..4304ff1 Binary files /dev/null and b/assets/liked-paris.png differ diff --git a/assets/liked-san-diego.png b/assets/liked-san-diego.png new file mode 100644 index 0000000..b64132e Binary files /dev/null and b/assets/liked-san-diego.png differ diff --git a/assets/liked-sydney.png b/assets/liked-sydney.png new file mode 100644 index 0000000..d72087f Binary files /dev/null and b/assets/liked-sydney.png differ diff --git a/assets/tour-london.png b/assets/tour-london.png new file mode 100644 index 0000000..828f7d2 Binary files /dev/null and b/assets/tour-london.png differ diff --git a/assets/tour-paris.png b/assets/tour-paris.png new file mode 100644 index 0000000..9a0b4af Binary files /dev/null and b/assets/tour-paris.png differ diff --git a/assets/tour-san-diego.png b/assets/tour-san-diego.png new file mode 100644 index 0000000..f305ce7 Binary files /dev/null and b/assets/tour-san-diego.png differ diff --git a/assets/tour-sydney.png b/assets/tour-sydney.png new file mode 100644 index 0000000..d3b01a0 Binary files /dev/null and b/assets/tour-sydney.png differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..36592e7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,2046 @@ +/* ========================================================= + Tokens + ========================================================= */ +:root { + --c-black: #000; + --c-white: #fff; + --c-accent: #fc0; + --c-teal: #2cafc2; + --c-teal-05: rgba(44, 175, 194, 0.05); + --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 + ========================================================= */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; + overflow-x: hidden; +} + +body { + margin: 0; + 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; +} + +img, +svg { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button { + font: inherit; + color: inherit; + border: 0; + background: none; + cursor: pointer; +} + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +blockquote, +figure, +dl, +dd { + margin: 0; +} + +:where(a, button, input, select, summary):focus-visible { + outline: 2px solid var(--c-teal); + outline-offset: 3px; + border-radius: 0.25rem; +} + +.sprite { + position: absolute; + width: 0; + height: 0; + overflow: hidden; +} + +.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); +} + +.skip-link:focus { + left: var(--sp-1); +} + +.container { + width: 100%; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--gutter); +} + +.icon { + width: 1rem; + height: 1rem; + flex: none; +} + +.icon--12 { + width: 0.75rem; + height: 0.75rem; +} + +.icon--14 { + width: 0.875rem; + height: 0.875rem; +} + +.icon--20 { + width: 1.25rem; + height: 1.25rem; +} + +.icon--24 { + width: 1.5rem; + height: 1.5rem; +} + +/* ========================================================= + Buttons, pills, chips + ========================================================= */ +.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); +} + +.btn:hover { + filter: brightness(0.94); + transform: translateY(-1px); +} + +.btn--accent { + background: var(--c-accent); + color: var(--c-black); +} + +.btn--dark { + background: var(--c-black); + color: var(--c-white); +} + +.btn--white { + background: var(--c-white); + color: var(--c-black); + font-weight: 500; +} + +.btn--ghost { + border: 1px solid var(--c-line); + background: var(--c-white); + color: var(--c-black); + font-weight: 500; +} + +.btn--ghost:hover { + filter: none; + background: rgba(0, 0, 0, 0.04); +} + +.btn--wide { + justify-content: space-between; + width: 100%; + padding-inline: var(--sp-3); +} + +.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); +} + +.icon-btn:hover { + background: rgba(0, 0, 0, 0.7); +} + +.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); +} + +.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; +} + +.chip--accent { + background: var(--c-accent); + color: var(--c-black); +} + +.chip--glass { + color: var(--c-white); + background: var(--c-glass); + font-weight: 400; + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} + +.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); +} + +.rating__star { + color: var(--c-accent); +} + +.rating b { + font-size: 0.875rem; + font-weight: 500; +} + +.rating i { + font-size: 0.75rem; + font-style: normal; + font-weight: 500; + opacity: 0.3; +} + +/* key / value pairs used on the cards */ +.meta { + display: flex; + flex-direction: column; + gap: 0.25rem; + min-width: 0; +} + +.meta__k { + font-size: 0.75rem; + font-weight: 500; +} + +.meta__v { + font-size: 1rem; + font-weight: 800; +} + +/* ========================================================= + Circular "ring" badge (scroll cue, book now, back to top) + ========================================================= */ +.ring-badge { + position: relative; + display: grid; + place-items: center; + aspect-ratio: 1; + width: clamp(3.25rem, 2.6rem + 2vw, 4.5rem); + flex: none; +} + +.ring-badge__ring { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0.75; + animation: spin 16s linear infinite; +} + +.ring-badge__text { + fill: currentColor; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.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); +} + +.ring-badge:hover .ring-badge__dot { + transform: scale(1.08); +} + +.ring-badge--accent .ring-badge__dot, +.dcard:hover .ring-badge--card .ring-badge__dot, +.dcard:focus-within .ring-badge--card .ring-badge__dot, +.tcard:hover .ring-badge--card .ring-badge__dot, +.tcard:focus-within .ring-badge--card .ring-badge__dot, +.acard:hover .ring-badge--card .ring-badge__dot, +.acard:focus-within .ring-badge--card .ring-badge__dot { + color: var(--c-black); + background: var(--c-accent); +} + +.rail:hover .dcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.rail:hover .acard.is-active:not(:hover):not(:focus-within) .ring-badge__dot, +.bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within) .ring-badge__dot { + color: var(--c-white); + background: var(--c-glass); +} + +.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%); +} + +.ring-badge--card { + width: clamp(2.875rem, 2.4rem + 1.6vw, 3.875rem); + color: var(--c-white); +} + +.ring-badge--card .ring-badge__text { + font-size: 0.875rem; +} + +.ring-badge--card .ring-badge__dot { + padding: 0.4375rem; +} + +.ring-badge--top { + position: absolute; + left: 50%; + top: 0; + color: var(--c-ink); + transform: translate(-50%, -50%); +} + +.ring-badge--top .ring-badge__text { + font-size: 0.625rem; + letter-spacing: 0.02em; +} + +.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 + ========================================================= */ +.site-header { + position: absolute; + inset: var(--page-inset) 0 auto; + z-index: 20; + padding-block: var(--sp-4); + color: var(--c-white); +} + +.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%); + } +} + +.header__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-4); +} + +.header__left { + display: flex; + align-items: center; + gap: clamp(1.5rem, 0.2rem + 4.5vw, 6rem); + min-width: 0; +} + +.header__logo .logo { + width: clamp(4.25rem, 3.6rem + 1.6vw, 5.6875rem); + height: auto; +} + +.header__actions { + display: flex; + align-items: center; + gap: var(--sp-1); +} + +.nav__list { + display: flex; + align-items: center; + gap: clamp(1rem, 0.1rem + 1.8vw, 2.5rem); +} + +.nav__link { + display: inline-flex; + align-items: center; + gap: var(--sp-1); + font-weight: 500; + white-space: nowrap; + transition: opacity 0.2s var(--ease); +} + +.nav__link:hover { + opacity: 0.7; +} + +.nav__item--has-menu { + position: relative; +} + +.nav__toggle .icon--chevron { + transition: transform 0.25s var(--ease); +} + +.nav__toggle[aria-expanded="true"] .icon--chevron { + transform: rotate(180deg); +} + +.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; +} + +.nav__item--has-menu:hover .nav__submenu, +.nav__toggle[aria-expanded="true"]+.nav__submenu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.nav__submenu a { + display: block; + padding: var(--sp-1) var(--sp-3); + border-radius: var(--r-pill); + font-weight: 500; +} + +.nav__submenu a:hover { + background: rgba(0, 0, 0, 0.06); +} + +.nav__mobile-cta { + display: none; +} + +.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); +} + +.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); +} + +.burger[aria-expanded="true"] span:nth-child(1) { + transform: translateY(0.375rem) rotate(45deg); +} + +.burger[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.burger[aria-expanded="true"] span:nth-child(3) { + transform: translateY(-0.375rem) rotate(-45deg); +} + +/* ========================================================= + Hero + ========================================================= */ +.hero { + position: relative; + display: grid; + align-items: end; + min-height: clamp(34rem, 88svh, 56rem); + margin: var(--page-inset); + padding-block: calc(var(--header-h) + var(--sp-6)) clamp(3rem, 1.5rem + 6vw, 6rem); + border-radius: var(--r-xl); + isolation: isolate; +} + +.hero__media { + position: absolute; + inset: 0; + z-index: -1; + border-radius: inherit; + overflow: clip; +} + +.hero__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +/* Figma gradients: radial vignette + teal fade into the next section */ +.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%); +} + +.hero__content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--sp-4); + text-align: left; +} + +.hero__eyebrow { + order: 1; + font-size: 1rem; +} + +.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); +} + +.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); +} + +.booking__row { + display: flex; + align-items: flex-end; + gap: var(--sp-3); +} + +.field { + display: flex; + flex: 1 1 0; + flex-direction: column; + gap: var(--sp-2); + min-width: 0; +} + +.field__label { + display: flex; + align-items: center; + gap: var(--sp-1); + font-size: 1rem; + font-weight: 500; + color: var(--c-black); +} + +.field__label label { + cursor: pointer; +} + +.select { + position: relative; + display: flex; + align-items: center; +} + +.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); +} + +.select__input::placeholder { + color: var(--c-black); + opacity: 1; +} + +.select__input:hover { + border-color: rgba(0, 0, 0, 0.3); +} + +.select__input--date::-webkit-calendar-picker-indicator { + opacity: 0; + cursor: pointer; +} + +.select__chevron { + position: absolute; + right: var(--sp-3); + pointer-events: none; + color: var(--c-black); +} + +.booking__submit { + flex: none; +} + +/* ========================================================= + Section shell + section header + ========================================================= */ +.section { + padding-block: var(--sp-6); +} + +.section--tight { + padding-block-start: 0; +} + +.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); +} + +.sec-head__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; +} + +.sec-head__lead { + max-width: 40ch; + margin: 0; + opacity: 0.7; + font-weight: 500; +} + +.sec-head__actions { + display: flex; + flex-direction: column; + gap: var(--sp-1); + width: clamp(8rem, 6rem + 4vw, 9.125rem); +} + +.rail-nav { + display: flex; + gap: var(--sp-1); +} + +.rail-nav__btn { + flex: 1 1 0; + padding-inline: var(--sp-3); +} + +.rail-nav__btn[disabled] { + opacity: 0.35; + cursor: not-allowed; +} + +/* ========================================================= + Horizontal rails + ========================================================= */ +.rail { + display: flex; + gap: var(--gap); + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + scrollbar-width: none; + /* negative margin + padding keeps the card glow from being clipped by the scroller */ + margin-inline: calc(var(--gap) * -1); + padding: var(--sp-4) var(--gap); +} + +.rail::-webkit-scrollbar { + display: none; +} + +.rail>* { + scroll-snap-align: start; +} + +.rail--dest>* { + flex: 0 0 calc((100% - 4 * var(--gap)) / 5); +} + +.rail--art>* { + flex: 0 0 calc((100% - 2 * var(--gap)) / 3); +} + +/* ========================================================= + Destination card + ========================================================= */ +.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); +} + +.dcard:hover { + transform: translateY(-0.25rem); +} + +.dcard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.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 */ +.dcard.is-active, +.dcard:hover, +.dcard:focus-within { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.dcard.is-active::after, +.dcard:hover::after, +.dcard:focus-within::after { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0) 51.6%, rgba(255, 255, 255, 0.4) 100%), + linear-gradient(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 */ +.rail:hover .dcard.is-active:not(:hover):not(:focus-within), +.rail:focus-within .dcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.rail:hover .dcard.is-active:not(:hover):not(:focus-within)::after, +.rail:focus-within .dcard.is-active:not(:hover):not(:focus-within)::after { + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%); +} + +.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); +} + +.dcard.is-active .dcard__desc, +.dcard:hover .dcard__desc, +.dcard:focus-within .dcard__desc { + opacity: 1; + transform: translateY(0); +} + +.rail:hover .dcard.is-active:not(:hover):not(:focus-within) .dcard__desc, +.rail:focus-within .dcard.is-active:not(:hover):not(:focus-within) .dcard__desc { + opacity: 0; + transform: translateY(-0.375rem); +} + +.dcard__desc-k { + display: block; + font-size: 0.75rem; + font-weight: 500; + opacity: 0.5; +} + +.dcard__desc p { + margin: 0.25rem 0 0; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.45; +} + +.dcard__body { + display: grid; + gap: var(--sp-2); +} + +.dcard__title { + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + letter-spacing: -0.01em; +} + +.dcard__meta { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--sp-2); +} + +.dcard__meta .ring-badge { + margin-inline-start: auto; +} + +/* ========================================================= + Open Top Bus Tours (promo + 2x2 grid) + ========================================================= */ +.bus { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + gap: var(--gap); + align-items: start; +} + +.bus__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--gap); +} + +.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; +} + +.promo__route { + position: absolute; + inset: 0; + z-index: -1; + width: 100%; + height: 100%; + opacity: 0.5; +} + +.promo__head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--sp-3); +} + +.promo__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.03em; + opacity: 0.8; +} + +.promo__chip { + align-self: flex-start; + margin-top: calc(var(--sp-1) * -1); + transform: rotate(-6deg); +} + +.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; +} + +.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)); +} + +.promo__note { + margin: 0; + margin-inline-start: auto; + max-width: 15rem; + font-weight: 500; + color: var(--c-teal); +} + +/* ========================================================= + Wide tour card + ========================================================= */ +.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); +} + +.tcard:hover { + transform: translateY(-0.25rem); +} + +.tcard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.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%); +} + +.tcard.is-active, +.tcard:hover, +.tcard:focus-within { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.tcard.is-active::after, +.tcard:hover::after, +.tcard:focus-within::after { + background: + radial-gradient(53.59% 137.34% at 50% 46.41%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%), + 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%); +} + +.bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within), +.bus__grid:focus-within .tcard.is-active:not(:hover):not(:focus-within) { + box-shadow: none; +} + +.bus__grid:hover .tcard.is-active:not(:hover):not(:focus-within)::after, +.bus__grid:focus-within .tcard.is-active:not(:hover):not(:focus-within)::after { + background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.6) 100%); +} + +.tcard__k { + font-size: 0.75rem; + font-weight: 500; + opacity: 0.9; +} + +.tcard__title { + max-width: 14ch; + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + line-height: 1.15; + letter-spacing: -0.01em; +} + +.tcard__bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--sp-2); +} + +/* ========================================================= + About + ========================================================= */ +.about { + display: grid; + grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); + align-items: center; + gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); +} + +.about__art { + position: relative; + display: grid; + place-items: center; + aspect-ratio: 4 / 3; + color: var(--c-teal); +} + +.about__glow { + display: none; +} + +/* straight speed-trail band running along the coach's axis */ +.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 */ +.about__arcs { + position: absolute; + z-index: 2; + inset: -12% 12% 2%; + width: auto; + height: 98%; + pointer-events: none; +} + +.about__bus { + position: relative; + z-index: 1; + display: grid; + place-items: center; + width: 92%; +} + +.about__bus img { + width: 100%; + height: auto; + object-fit: contain; + filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.25)); +} + +.about__body { + display: grid; + gap: clamp(1.25rem, 0.8rem + 1.4vw, 1.8125rem); +} + +.about__head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-3); + flex-wrap: wrap; +} + +.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; +} + +.about__chip { + position: absolute; + right: 0; + bottom: -0.75rem; + transform: rotate(-6deg); +} + +.about__text { + margin: 0; + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +.stats { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-4); +} + +.stat { + display: flex; + align-items: flex-end; + gap: 0.75rem; +} + +.stat__num { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1; + letter-spacing: -0.03em; +} + +.stat__num span { + color: var(--c-teal); +} + +.stat__label { + opacity: 0.5; + font-weight: 500; +} + +/* ========================================================= + Testimonials marquee + ========================================================= */ +.testimonials__head { + display: grid; + justify-items: center; + gap: var(--sp-3); + margin-bottom: var(--sp-6); + text-align: center; +} + +.testimonials__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + letter-spacing: -0.03em; +} + +.testimonials__lead { + max-width: 42ch; + margin: 0; + opacity: 0.5; + font-weight: 500; +} + +.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); +} + +.marquee__route { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0.6; + pointer-events: none; +} + +.marquee__track { + display: flex; + align-items: center; + gap: var(--gap); + width: max-content; + padding-block: var(--sp-3); + animation: marquee 60s linear infinite; +} + +.marquee:hover .marquee__track, +.marquee:focus-within .marquee__track { + animation-play-state: paused; +} + +@keyframes marquee { + to { + transform: translateX(calc(-50% - var(--gap) / 2)); + } +} + +.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); +} + +.quote--lg { + width: clamp(19rem, 15rem + 16vw, 32.875rem); +} + +.quote--sm { + width: clamp(15rem, 12rem + 9vw, 21.375rem); +} + +.quote__head { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.quote__avatar { + aspect-ratio: 1; + width: 3rem; + border-radius: 50%; + object-fit: cover; +} + +.quote__head b { + display: block; + font-weight: 700; +} + +.quote__head i { + font-style: normal; + font-weight: 500; + color: var(--c-teal); +} + +.quote blockquote { + opacity: 0.5; + font-weight: 500; + text-align: justify; +} + +/* ========================================================= + Article card + ========================================================= */ +.acard { + display: flex; + flex-direction: column; + border-radius: var(--r-card); + background: var(--c-white); + transition: transform 0.3s var(--ease); +} + +.acard:hover { + transform: translateY(-0.25rem); +} + +.acard.is-active { + background: var(--c-teal-05); +} + +.acard__media { + position: relative; + aspect-ratio: 416 / 251; + border-radius: var(--r-card); + color: var(--c-white); + overflow: hidden; + isolation: isolate; +} + +.acard__img { + position: absolute; + inset: 0; + z-index: -2; + width: 100%; + height: 100%; + object-fit: cover; +} + +.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%); +} + +.acard.is-active .acard__media::after, +.acard:hover .acard__media::after, +.acard:focus-within .acard__media::after { + background: + radial-gradient(53.59% 137.34% at 50% 46.41%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%), + 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%); +} + +.acard.is-active .acard__media, +.acard:hover .acard__media, +.acard:focus-within .acard__media { + box-shadow: 0 0.75rem 3.75rem 0 rgba(44, 175, 194, 0.5); +} + +.rail:hover .acard.is-active:not(:hover):not(:focus-within) { + background: var(--c-white); +} + +.rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media { + box-shadow: none; +} + +.rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media::after { + background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.65) 100%); +} + +.acard__time { + position: absolute; + left: var(--sp-2); + top: var(--sp-2); +} + +.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); +} + +.acard__title { + max-width: 17ch; + margin: 0; + font-size: var(--fs-card); + font-weight: 500; + line-height: 1.15; + letter-spacing: -0.01em; +} + +.acard__excerpt { + margin: 0; + padding: var(--sp-4) var(--sp-4) var(--sp-5); + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +.acard.is-active .acard__excerpt, +.acard:hover .acard__excerpt, +.acard:focus-within .acard__excerpt { + opacity: 1; + color: var(--c-teal); +} + +.acard.is-active, +.acard:hover, +.acard:focus-within { + background: var(--c-teal-05); +} + +.rail:hover .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt { + opacity: 0.7; + color: inherit; +} + +/* ========================================================= + FAQ + ========================================================= */ +.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; +} + +.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; +} + +.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; +} + +.faq__intro { + display: grid; + gap: var(--sp-4); +} + +.faq__title { + margin: 0; + font-size: var(--fs-h2); + font-weight: 800; + letter-spacing: -0.03em; +} + +.faq__lead { + margin: 0; + opacity: 0.7; + font-weight: 500; +} + +.accordion { + display: grid; + gap: var(--sp-4); +} + +.acc+.acc { + border-top: 1px solid var(--c-line); + padding-top: var(--sp-4); +} + +.acc h3 { + margin: 0; + font-size: inherit; + font-weight: inherit; +} + +.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); +} + +.acc__q .icon { + opacity: 0.3; +} + +.acc__minus { + display: none; +} + +.acc__q[aria-expanded="true"] { + color: var(--c-teal); + font-weight: 700; +} + +.acc__q[aria-expanded="true"] .icon { + opacity: 1; +} + +.acc__q[aria-expanded="true"] .acc__plus { + display: none; +} + +.acc__q[aria-expanded="true"] .acc__minus { + display: block; +} + +.acc__a { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.3s var(--ease); +} + +.acc__q[aria-expanded="true"]+.acc__a { + grid-template-rows: 1fr; +} + +.acc__a>* { + overflow: hidden; +} + +.acc__a p { + margin: 0; + padding-top: var(--sp-4); + opacity: 0.7; + font-weight: 500; + text-align: justify; +} + +/* ========================================================= + Footer + ========================================================= */ +.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); +} + +.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); +} + +.footer__logo .logo { + width: clamp(5rem, 4rem + 2.5vw, 7.125rem); + height: auto; +} + +.footer__brand { + display: grid; + gap: var(--sp-4); + align-content: start; +} + +.footer__about { + margin: 0; + opacity: 0.5; + font-weight: 500; + text-align: justify; +} + +.footer__cols { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--sp-4); + justify-items: start; +} + +.footer__cols ul { + display: grid; + gap: 0.75rem; +} + +.footer__ct { + margin: 0 0 var(--sp-3); + font-size: 1rem; + font-weight: 700; + color: var(--c-teal); +} + +.footer__cols a { + opacity: 0.5; + font-weight: 500; + transition: opacity 0.2s var(--ease); +} + +.footer__cols a:hover { + opacity: 1; +} + +.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); +} + +.footer__copy { + margin: 0; + font-weight: 500; +} + +.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 */ +.socials::before, +.socials::after { + content: ""; + flex: 1 1 clamp(2rem, 8vw, 11rem); + border-top: 1px dashed rgba(255, 255, 255, 0.3); +} + +.socials::before { + margin-inline-end: var(--sp-4); +} + +.socials::after { + margin-inline-start: var(--sp-4); +} + +.socials li { + flex: none; +} + +.socials a { + display: grid; + place-items: center; + transition: opacity 0.2s var(--ease); +} + +.socials a:hover { + opacity: 0.7; +} + +.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); +} + +.support__ring { + position: absolute; + aspect-ratio: 1; + scale: 140%; + opacity: 0.5; + top: -1.5rem; +} + +.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); +} + +.support:hover .support__tab { + transform: translateY(-0.25rem); +} + +/* ========================================================= + Responsive + ========================================================= */ +@media (max-width: 78rem) { + .rail--dest>* { + flex: 0 0 calc((100% - 3 * var(--gap)) / 4); + } +} + +@media (max-width: 68.75rem) { + .booking__row { + flex-wrap: wrap; + } + + .field { + flex: 1 1 14rem; + } + + .booking__submit { + flex: 1 1 100%; + } + + .sec-head { + grid-template-columns: minmax(0, 1fr) auto; + } + + .sec-head__lead { + grid-column: 1 / -1; + grid-row: 2; + max-width: none; + } + + .rail--dest>* { + flex: 0 0 calc((100% - 2 * var(--gap)) / 3); + } + + .bus { + grid-template-columns: minmax(0, 1fr); + } + + .promo { + aspect-ratio: 16 / 9; + } + + .about { + grid-template-columns: minmax(0, 1fr); + } + + .about__art { + order: 2; + aspect-ratio: 16 / 9; + } + + .faq__inner { + grid-template-columns: minmax(0, 1fr); + } +} + +@media (max-width: 60rem) { + .burger { + display: inline-grid; + } + + .header__cta { + display: none; + } + + .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; + } + + .nav.is-open { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + .nav__list { + flex-direction: column; + align-items: stretch; + gap: 0; + } + + .nav__link { + width: 100%; + justify-content: space-between; + padding: var(--sp-2) var(--sp-3); + border-radius: var(--r-pill); + } + + .nav__link:hover { + opacity: 1; + background: rgba(0, 0, 0, 0.05); + } + + .nav__submenu { + position: static; + display: none; + padding: 0 0 var(--sp-1) var(--sp-3); + box-shadow: none; + opacity: 1; + visibility: visible; + transform: none; + } + + .nav__item--has-menu:hover .nav__submenu { + display: none; + } + + .nav__toggle[aria-expanded="true"]+.nav__submenu { + display: grid; + } + + .nav__mobile-cta { + display: block; + margin-top: var(--sp-1); + } + + .nav__cta { + width: 100%; + } + + .rail--art>* { + flex: 0 0 calc((100% - var(--gap)) / 2); + } + + .footer__inner { + grid-template-columns: minmax(0, 1fr); + } +} + +@media (max-width: 48rem) { + .rail--dest>* { + flex: 0 0 calc((100% - var(--gap)) / 2); + } + + .bus__grid { + grid-template-columns: minmax(0, 1fr); + } + + .stats { + gap: var(--sp-3); + } + + .footer__bar { + grid-template-columns: minmax(0, 1fr); + justify-items: start; + } + + .socials::before, + .socials::after { + display: none; + } + + .support { + right: var(--gutter); + } +} + +@media (max-width: 40rem) { + .hero { + min-height: clamp(30rem, 84svh, 44rem); + } + + .booking { + padding: var(--sp-2); + } + + .booking__row { + gap: var(--sp-2); + } + + .field { + flex: 1 1 100%; + } + + .sec-head { + grid-template-columns: minmax(0, 1fr); + gap: var(--sp-3); + } + + .sec-head__lead { + grid-row: auto; + } + + .sec-head__actions { + flex-direction: row; + width: 100%; + } + + .sec-head__actions .btn--wide { + width: auto; + flex: 1 1 auto; + } + + .rail--dest>* { + flex: 0 0 min(72%, 15rem); + } + + .rail--art>* { + flex: 0 0 min(85%, 22rem); + } + + .promo { + aspect-ratio: auto; + gap: var(--sp-4); + } + + .promo__note { + max-width: none; + margin-inline-start: 0; + } + + .stats { + grid-template-columns: minmax(0, 1fr); + } + + .support { + display: none; + } + + .footer__cols { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--sp-5) var(--sp-4); + } + + /* justified text tears open on narrow columns */ + .about__text, + .acard__excerpt, + .quote blockquote, + .acc__a p, + .footer__about { + text-align: left; + } +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .rail { + scroll-behavior: auto; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a10dd5 --- /dev/null +++ b/index.html @@ -0,0 +1,1498 @@ + + + + + + + Hop On Hop Off — Set out on the journey + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+

Tour & Travel

+ +

Set out on the journey.

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

Where you
wanna go?

+

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

+
+ + See all + + +
+ + +
+
+
+ +
    +
  • + London + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    London

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Nashville + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Nashville

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Sydney + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Sydney

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + San Diego + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    San Diego

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Paris + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Paris

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • +
+
+
+ + +
+
+
+ +
+

Open Top
Bus Tours…

+ + See all + + +
+ Very Fun! + +

An open-top hop on hop off bus is the best way to discover the historic and cultural + sights of any city.

+
+ + +
+
+ + +
+
+
+

Most Liked
Tours

+

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

+
+ + See all + + +
+ + +
+
+
+ +
    +
  • + London + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    London

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Nashville + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Nashville

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Sydney + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Sydney

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + San Diego + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    San Diego

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • + +
  • + Paris + + + 4.8/5 + +
    + Tour Description +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …

    +
    +
    +

    Paris

    +
    +
    + Start at + $150 +
    +
    + Duration + 3 Days +
    + + + + + + +
    +
    +
    • +
+
+
+ + +
+
+ + +
+
+

Hop On Hop OffMemorable

+ + About us + + +
+ +

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 aliqua

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

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
+
+
+
+
+ + +
+
+
+

Latest
Articles

+

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

+
+ + See all + + +
+ + +
+
+
+ +
    +
  • +
    + + 3 hours ago +
    +

    Finding the best tour might be a little challange!

    + + + + + + +
    +
    +

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

    +
    • + +
  • +
    + + 3 Days ago +
    +

    Finding the best tour might be a little challange!

    + + + + + + +
    +
    +

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

    +
    • + +
  • +
    + + 2026/12/04 +
    +

    Finding the best tour might be a little challange!

    + + + + + + +
    +
    +

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

    +
    • +
+
+
+ + +
+ +
+
+

FAQ’s

+

Lorem 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

+
+
+ +
+

+ +

+
+

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

+
+
+
+
+
+
+ + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..2ae4356 --- /dev/null +++ b/js/main.js @@ -0,0 +1,161 @@ +(function () { + 'use strict'; + + var header = document.getElementById('siteHeader'); + var nav = document.getElementById('primaryNav'); + var burger = document.getElementById('burger'); + var navToggle = nav && nav.querySelector('.nav__toggle'); + var mqDesktop = window.matchMedia('(min-width: 60.0625rem)'); + + /* ---------- mobile menu ---------- */ + function closeMenu() { + if (!nav || !burger) return; + nav.classList.remove('is-open'); + burger.setAttribute('aria-expanded', 'false'); + burger.setAttribute('aria-label', 'Open menu'); + } + + if (burger && nav) { + burger.addEventListener('click', function () { + var open = nav.classList.toggle('is-open'); + burger.setAttribute('aria-expanded', String(open)); + burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu'); + }); + + document.addEventListener('click', function (e) { + if (mqDesktop.matches) return; + if (!nav.contains(e.target) && !burger.contains(e.target)) closeMenu(); + }); + + nav.addEventListener('click', function (e) { + if (!mqDesktop.matches && e.target.closest('a')) closeMenu(); + }); + } + + document.addEventListener('keydown', function (e) { + if (e.key !== 'Escape') return; + closeMenu(); + if (navToggle) navToggle.setAttribute('aria-expanded', 'false'); + }); + + mqDesktop.addEventListener('change', function (e) { + if (e.matches) closeMenu(); + }); + + /* ---------- Tours submenu ---------- */ + if (navToggle) { + navToggle.addEventListener('click', function () { + var open = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', String(!open)); + }); + } + + /* ---------- mobile "Book now" inside the menu ---------- */ + var desktopCta = document.querySelector('.header__cta'); + var navList = nav && nav.querySelector('.nav__list'); + if (desktopCta && navList) { + var li = document.createElement('li'); + li.className = 'nav__mobile-cta'; + var clone = desktopCta.cloneNode(true); + clone.classList.remove('header__cta'); + clone.classList.add('nav__cta'); + li.appendChild(clone); + navList.appendChild(li); + } + + /* ---------- sticky header past the hero ---------- */ + var hero = document.querySelector('.hero'); + if (header && hero && 'IntersectionObserver' in window) { + var sentinel = document.createElement('div'); + sentinel.setAttribute('aria-hidden', 'true'); + sentinel.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:60vh;pointer-events:none'; + hero.appendChild(sentinel); + + new IntersectionObserver(function (entries) { + header.classList.toggle('is-stuck', !entries[0].isIntersecting); + }, { threshold: 0 }).observe(sentinel); + } + + /* ---------- card rails (prev / next) ---------- */ + function railStep(rail) { + var card = rail.firstElementChild; + if (!card) return rail.clientWidth; + var gap = parseFloat(getComputedStyle(rail).columnGap) || 0; + return card.getBoundingClientRect().width + gap; + } + + function syncRailButtons(rail, prev, next) { + var max = rail.scrollWidth - rail.clientWidth - 1; + if (prev) prev.disabled = rail.scrollLeft <= 0; + if (next) next.disabled = rail.scrollLeft >= max; + } + + Array.prototype.forEach.call(document.querySelectorAll('.rail'), function (rail) { + var prev = document.querySelector('[data-rail-prev="' + rail.id + '"]'); + var next = document.querySelector('[data-rail-next="' + rail.id + '"]'); + + if (prev) prev.addEventListener('click', function () { + rail.scrollBy({ left: -railStep(rail), behavior: 'smooth' }); + }); + if (next) next.addEventListener('click', function () { + rail.scrollBy({ left: railStep(rail), behavior: 'smooth' }); + }); + + rail.addEventListener('scroll', function () { + syncRailButtons(rail, prev, next); + }, { passive: true }); + window.addEventListener('resize', function () { + syncRailButtons(rail, prev, next); + }); + syncRailButtons(rail, prev, next); + }); + + /* ---------- testimonials marquee: duplicate for a seamless loop ---------- */ + var marquee = document.querySelector('[data-marquee] .marquee__track'); + if (marquee) { + var originals = Array.prototype.slice.call(marquee.children); + originals.forEach(function (node) { + var copy = node.cloneNode(true); + copy.setAttribute('aria-hidden', 'true'); + marquee.appendChild(copy); + }); + } + + /* ---------- FAQ accordion ---------- */ + var accordion = document.querySelector('[data-accordion]'); + if (accordion) { + accordion.addEventListener('click', function (e) { + var btn = e.target.closest('.acc__q'); + if (!btn) return; + var open = btn.getAttribute('aria-expanded') === 'true'; + Array.prototype.forEach.call(accordion.querySelectorAll('.acc__q'), function (other) { + other.setAttribute('aria-expanded', 'false'); + }); + btn.setAttribute('aria-expanded', String(!open)); + }); + } + + /* ---------- date field: text placeholder, native picker on focus ---------- */ + var dateField = document.querySelector('[data-datefield]'); + if (dateField) { + dateField.addEventListener('focus', function () { + dateField.type = 'date'; + if (typeof dateField.showPicker === 'function') { + try { dateField.showPicker(); } catch (err) { /* not user-activated */ } + } + }); + dateField.addEventListener('blur', function () { + if (!dateField.value) dateField.type = 'text'; + }); + } + + /* ---------- booking form ---------- */ + var form = document.getElementById('booking'); + if (form) { + form.addEventListener('submit', function (e) { + e.preventDefault(); + var data = Object.fromEntries(new FormData(form).entries()); + console.log('Booking request', data); + }); + } +})();