Travel Moods
/* =========================================================
MANGO GETAWAY — TRAVEL MOODS V1.2
========================================================= */
#mg-travel-moods {
--mg-bg: #14110e;
--mg-bg-soft: #1b1713;
--mg-card: #211c17;
--mg-cream: #fff5e6;
--mg-muted: rgba(255, 245, 230, 0.68);
--mg-mango: #f4a641;
--mg-border: rgba(255, 245, 230, 0.13);
--mg-display: "Cormorant Garamond", Georgia, serif;
--mg-body: "DM Sans", Arial, sans-serif;
--mg-mono: "DM Mono", monospace;
width: 100%;
margin: 0;
overflow: hidden;
background: var(--mg-bg);
color: var(--mg-cream);
font-family: var(--mg-body);
}
/* =========================================================
INTRO
========================================================= */
#mg-travel-moods .mg-moods__intro {
width: min(1280px, calc(100% - 48px));
margin: 0 auto;
padding: 76px 0 40px;
}
#mg-travel-moods .mg-moods__eyebrow,
#mg-travel-moods .mg-mood-section__eyebrow,
#mg-travel-moods .mg-mood-hero__eyebrow,
#mg-travel-moods .mg-mood-footer__eyebrow {
margin: 0 0 13px;
color: var(--mg-mango);
font-family: var(--mg-mono);
font-size: 11px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.17em;
text-transform: uppercase;
}
#mg-travel-moods .mg-moods__title {
max-width: 900px;
margin: 0;
color: var(--mg-cream);
font-family: var(--mg-display);
font-size: clamp(48px, 6vw, 82px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.035em;
}
#mg-travel-moods .mg-moods__lead {
max-width: 610px;
margin: 22px 0 0;
color: var(--mg-muted);
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
MOOD SELECTOR
========================================================= */
#mg-travel-moods .mg-moods__selector {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 7px;
margin-top: 42px;
}
#mg-travel-moods .mg-mood-button {
display: flex;
min-height: 100px;
padding: 16px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border: 1px solid var(--mg-border);
border-radius: 2px;
background: transparent;
color: var(--mg-cream);
cursor: pointer;
text-align: left;
transition:
background 220ms ease,
border-color 220ms ease,
transform 220ms ease,
color 220ms ease;
}
#mg-travel-moods .mg-mood-button:hover {
border-color: rgba(244, 166, 65, 0.48);
background: var(--mg-card);
transform: translateY(-2px);
}
#mg-travel-moods .mg-mood-button.is-active {
border-color: var(--mg-mango);
background: var(--mg-mango);
color: #14110e;
}
#mg-travel-moods .mg-mood-button:focus-visible {
outline: 2px solid var(--mg-mango);
outline-offset: 4px;
}
#mg-travel-moods .mg-mood-button__number {
font-family: var(--mg-mono);
font-size: 10px;
letter-spacing: 0.08em;
opacity: 0.65;
}
#mg-travel-moods .mg-mood-button__label {
font-family: var(--mg-display);
font-size: 20px;
font-weight: 600;
line-height: 1.05;
}
/* =========================================================
CONTENT TRANSITION
========================================================= */
#mg-travel-moods .mg-mood-experience {
opacity: 1;
transform: translateY(0);
transition:
opacity 180ms ease,
transform 180ms ease;
}
#mg-travel-moods .mg-mood-experience.is-changing {
opacity: 0;
transform: translateY(6px);
}
/* =========================================================
HERO
========================================================= */
#mg-travel-moods .mg-mood-hero {
position: relative;
width: 100%;
min-height: clamp(500px, 61vw, 710px);
overflow: hidden;
background: var(--mg-bg-soft);
}
#mg-travel-moods .mg-mood-hero__image {
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.01);
transition: transform 900ms ease;
}
#mg-travel-moods .mg-mood-hero:hover
.mg-mood-hero__image {
transform: scale(1.035);
}
#mg-travel-moods .mg-mood-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(20, 17, 14, 0.06) 0%,
rgba(20, 17, 14, 0.16) 40%,
rgba(20, 17, 14, 0.92) 100%
),
linear-gradient(
90deg,
rgba(20, 17, 14, 0.4),
transparent 60%
);
}
#mg-travel-moods .mg-mood-hero__content {
position: absolute;
z-index: 2;
left: max(32px, calc((100% - 1220px) / 2));
right: 32px;
bottom: 58px;
max-width: 820px;
}
#mg-travel-moods .mg-mood-hero__title {
margin: 0;
color: var(--mg-cream);
font-family: var(--mg-display);
font-size: clamp(58px, 8vw, 108px);
font-weight: 500;
line-height: 0.89;
letter-spacing: -0.04em;
}
#mg-travel-moods .mg-mood-hero__statement {
max-width: 620px;
margin: 22px 0 0;
color: rgba(255, 245, 230, 0.88);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.55;
}
/* =========================================================
SECTIONS
========================================================= */
#mg-travel-moods .mg-mood-section {
width: min(1220px, calc(100% - 48px));
margin: 0 auto;
padding: 72px 0;
border-bottom: 1px solid var(--mg-border);
}
#mg-travel-moods .mg-mood-section__header {
max-width: 780px;
}
#mg-travel-moods .mg-mood-section__title {
margin: 0;
color: var(--mg-cream);
font-family: var(--mg-display);
font-size: clamp(38px, 5vw, 60px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
}
#mg-travel-moods .mg-mood-copy {
max-width: 720px;
margin: 28px 0 0;
color: var(--mg-muted);
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
MOOD TAGS
========================================================= */
#mg-travel-moods .mg-mood-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 30px;
}
#mg-travel-moods .mg-mood-tag {
display: inline-flex;
min-height: 34px;
padding: 7px 12px;
align-items: center;
border: 1px solid var(--mg-border);
border-radius: 99px;
color: rgba(255, 245, 230, 0.76);
font-family: var(--mg-mono);
font-size: 10px;
line-height: 1;
letter-spacing: 0.07em;
text-transform: uppercase;
}
/* =========================================================
DESTINATIONS
========================================================= */
#mg-travel-moods .mg-destination-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 38px;
}
#mg-travel-moods .mg-destination-grid[data-count="1"] {
grid-template-columns: minmax(0, 760px);
}
#mg-travel-moods .mg-destination-grid[data-count="2"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#mg-travel-moods .mg-destination-card {
position: relative;
display: flex;
min-height: 350px;
overflow: hidden;
border: 1px solid var(--mg-border);
background: var(--mg-card);
color: var(--mg-cream);
text-decoration: none;
}
#mg-travel-moods
.mg-destination-grid[data-count="1"]
.mg-destination-card {
min-height: 430px;
}
#mg-travel-moods .mg-destination-card__image {
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.01);
transition: transform 650ms ease;
}
#mg-travel-moods
.mg-destination-card:hover
.mg-destination-card__image {
transform: scale(1.055);
}
#mg-travel-moods .mg-destination-card__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(20, 17, 14, 0.03),
rgba(20, 17, 14, 0.92)
);
}
#mg-travel-moods .mg-destination-card__content {
position: relative;
z-index: 2;
align-self: flex-end;
width: 100%;
padding: 26px;
}
#mg-travel-moods .mg-destination-card__location {
margin: 0 0 7px;
color: var(--mg-mango);
font-family: var(--mg-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#mg-travel-moods .mg-destination-card__title {
margin: 0;
font-family: var(--mg-display);
font-size: clamp(32px, 4vw, 44px);
font-weight: 500;
line-height: 1;
}
#mg-travel-moods .mg-destination-card__copy {
max-width: 470px;
margin: 11px 0 0;
color: rgba(255, 245, 230, 0.72);
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
EXPERIENCES
========================================================= */
#mg-travel-moods .mg-experience-list {
margin-top: 38px;
border-top: 1px solid var(--mg-border);
}
#mg-travel-moods .mg-experience-card {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 22px;
align-items: center;
padding: 27px 0;
border-bottom: 1px solid var(--mg-border);
color: var(--mg-cream);
text-decoration: none;
transition:
padding 220ms ease,
background 220ms ease;
}
#mg-travel-moods .mg-experience-card:hover {
padding-left: 12px;
padding-right: 12px;
background: rgba(255, 245, 230, 0.025);
}
#mg-travel-moods .mg-experience-card__number {
color: var(--mg-mango);
font-family: var(--mg-mono);
font-size: 11px;
}
#mg-travel-moods .mg-experience-card__title {
margin: 0;
font-family: var(--mg-display);
font-size: clamp(27px, 3vw, 36px);
font-weight: 500;
line-height: 1.05;
}
#mg-travel-moods .mg-experience-card__copy {
max-width: 680px;
margin: 7px 0 0;
color: var(--mg-muted);
font-size: 14px;
line-height: 1.6;
}
#mg-travel-moods .mg-experience-card__arrow {
font-size: 24px;
transition: transform 220ms ease;
}
#mg-travel-moods
.mg-experience-card:hover
.mg-experience-card__arrow {
transform: translateX(5px);
}
/* =========================================================
FINAL CTA
========================================================= */
#mg-travel-moods .mg-mood-footer {
display: flex;
width: min(1220px, calc(100% - 48px));
margin: 0 auto;
padding: 72px 0 86px;
gap: 40px;
align-items: flex-end;
justify-content: space-between;
}
#mg-travel-moods .mg-mood-footer__title {
max-width: 700px;
margin: 0;
color: var(--mg-cream);
font-family: var(--mg-display);
font-size: clamp(38px, 5vw, 60px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
}
#mg-travel-moods .mg-mood-footer__cta {
display: inline-flex;
min-height: 52px;
padding: 0 21px;
align-items: center;
justify-content: center;
gap: 15px;
border: 1px solid var(--mg-mango);
background: var(--mg-mango);
color: #14110e;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition:
background 220ms ease,
color 220ms ease,
transform 220ms ease;
}
#mg-travel-moods .mg-mood-footer__cta:hover {
background: transparent;
color: var(--mg-mango);
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
#mg-travel-moods .mg-moods__selector {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
#mg-travel-moods .mg-moods__intro {
width: calc(100% - 32px);
padding: 52px 0 26px;
}
#mg-travel-moods .mg-moods__title {
font-size: clamp(44px, 14vw, 62px);
line-height: 0.95;
}
#mg-travel-moods .mg-moods__lead {
margin-top: 17px;
font-size: 15px;
}
/* Mood selector becomes horizontal */
#mg-travel-moods .mg-moods__selector {
display: flex;
width: calc(100vw - 16px);
margin-top: 30px;
margin-right: -16px;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
#mg-travel-moods
.mg-moods__selector::-webkit-scrollbar {
display: none;
}
#mg-travel-moods .mg-mood-button {
flex: 0 0 142px;
min-height: 87px;
padding: 13px;
scroll-snap-align: start;
}
#mg-travel-moods .mg-mood-button__label {
font-size: 18px;
}
/* Hero */
#mg-travel-moods .mg-mood-hero {
min-height: 555px;
}
#mg-travel-moods .mg-mood-hero__content {
left: 20px;
right: 20px;
bottom: 36px;
}
#mg-travel-moods .mg-mood-hero__title {
font-size: clamp(56px, 18vw, 80px);
}
#mg-travel-moods .mg-mood-hero__statement {
margin-top: 17px;
font-size: 17px;
}
/* Sections */
#mg-travel-moods .mg-mood-section {
width: calc(100% - 32px);
padding: 52px 0;
}
#mg-travel-moods .mg-mood-section__title {
font-size: 38px;
}
#mg-travel-moods .mg-mood-copy {
margin-top: 22px;
font-size: 15px;
}
/* Destinations */
#mg-travel-moods .mg-destination-grid,
#mg-travel-moods .mg-destination-grid[data-count="1"],
#mg-travel-moods .mg-destination-grid[data-count="2"],
#mg-travel-moods .mg-destination-grid[data-count="3"] {
grid-template-columns: 1fr;
margin-top: 28px;
}
#mg-travel-moods .mg-destination-card,
#mg-travel-moods
.mg-destination-grid[data-count="1"]
.mg-destination-card {
min-height: 335px;
}
#mg-travel-moods .mg-destination-card__content {
padding: 22px;
}
/* Experiences */
#mg-travel-moods .mg-experience-list {
margin-top: 28px;
}
#mg-travel-moods .mg-experience-card {
grid-template-columns:
27px minmax(0, 1fr) 18px;
gap: 10px;
padding: 22px 0;
}
#mg-travel-moods .mg-experience-card:hover {
padding-left: 0;
padding-right: 0;
background: transparent;
}
#mg-travel-moods .mg-experience-card__title {
font-size: 27px;
}
#mg-travel-moods .mg-experience-card__copy {
font-size: 13px;
}
/* Footer */
#mg-travel-moods .mg-mood-footer {
width: calc(100% - 32px);
padding: 52px 0 64px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
#mg-travel-moods .mg-mood-footer__title {
font-size: 39px;
}
#mg-travel-moods .mg-mood-footer__cta {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-travel-moods *,
#mg-travel-moods *::before,
#mg-travel-moods *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
MANGO GETAWAY — TRAVEL MOODS V1.2
IMPORTANT:
Image URLs are no longer stored here.
JS reads them from the HTML data attributes.
HTML = editable assets
CSS = design
JS = mood behaviour + content
========================================================= */
document.addEventListener("DOMContentLoaded", function () {
const root =
document.getElementById("mg-travel-moods");
if (!root) return;
/* =====================================================
IMAGE ASSETS FROM HTML
===================================================== */
const images = {
moods: {
slow:
root.dataset.imgSlow,
road:
root.dataset.imgRoad,
night:
root.dataset.imgNight,
local:
root.dataset.imgLocal,
wild:
root.dataset.imgWild,
escape:
root.dataset.imgEscape
},
destinations: {
mykonos:
root.dataset.imgMykonos,
athens:
root.dataset.imgAthens,
cyclades:
root.dataset.imgCyclades
}
};
/* =====================================================
MOOD CONTENT
Only current Mango Getaway ecosystem content appears here.
===================================================== */
const moods = {
/* ===================================================
01 — SLOW TOGETHER
=================================================== */
slow: {
title:
"Slow Together",
statement:
"For the days when you both need somewhere to exhale.",
feelingTitle:
"Less itinerary. More time.",
tags: [
"Slow mornings",
"Long lunches",
"Quiet beaches",
"No rush",
"Sunsets",
"Time together"
],
copy:
"Wake up without rushing. Leave space between plans. Stay a little longer over lunch, spend more time by the water and let the day feel like something the two of you are sharing rather than completing.",
heroImage:
"slow",
destinations: [
{
region:
"CYCLADES · GREECE",
title:
"Mykonos",
copy:
"There is another side to the island — quieter roads, slower mornings, beaches with room to stay and evenings that do not need much planning.",
image:
"mykonos",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
experiences: [
{
title:
"The Slow Side of Mykonos",
copy:
"Five days shaped around beaches, meals, quieter roads and enough room to actually spend time together.",
url:
"#"
},
{
title:
"Find the Quieter Side",
copy:
"Move away from the busiest parts of the island and give yourselves somewhere to slow down.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Make Sunset the Plan",
copy:
"Leave enough room in the day that arriving somewhere beautiful together can be the main event.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
footer:
"Find the slower side of Mykonos together.",
ctaLabel:
"Explore Mykonos",
cta:
"/destinations/europe/greece/cyclades/mykonos/"
},
/* ===================================================
02 — OPEN ROAD
=================================================== */
road: {
title:
"Open Road",
statement:
"For the days when getting there is part of the story.",
feelingTitle:
"Pick a direction. Leave room for the detour.",
tags: [
"Open roads",
"Detours",
"Hidden beaches",
"Landscapes",
"Freedom",
"Sunset stops"
],
copy:
"Take the road that looks interesting. Stop when something catches your eye. The goal is not to cover the most ground — it is to give the two of you enough freedom to find something you were not planning to find.",
heroImage:
"road",
destinations: [
{
region:
"CYCLADES · GREECE",
title:
"Mykonos",
copy:
"Small island roads, changing landscapes, beaches and stops where the journey becomes part of what you remember.",
image:
"mykonos",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
experiences: [
{
title:
"The Open Road — Mykonos",
copy:
"Five days designed around roads, beaches, landscapes, detours and sunsets.",
url:
"/destinations/europe/greece/cyclades/mykonos/open-road/"
},
{
title:
"Take the Long Way",
copy:
"Let the island unfold between stops instead of treating every road as something to get through.",
url:
"/destinations/europe/greece/cyclades/mykonos/open-road/"
},
{
title:
"Drive Somewhere for Sunset",
copy:
"Choose a road, give yourselves time and make getting there part of the evening.",
url:
"/destinations/europe/greece/cyclades/mykonos/open-road/"
}
],
footer:
"See where the Mykonos roads take you.",
ctaLabel:
"Explore The Open Road",
cta:
"/destinations/europe/greece/cyclades/mykonos/open-road/"
},
/* ===================================================
03 — AFTER GOLDEN HOUR
=================================================== */
night: {
title:
"After Golden Hour",
statement:
"For couples who aren't ready for the day to end when the sun goes down.",
feelingTitle:
"Start at sunset. See where the night goes.",
tags: [
"Golden hour",
"Long dinners",
"Cocktails",
"Music",
"Nightlife",
"Slow mornings"
],
copy:
"Take the morning slowly. Give yourselves time to reset before sunset, then let the evening build naturally — drinks, dinner, music and whatever the two of you decide should happen next.",
heroImage:
"night",
destinations: [
{
region:
"CYCLADES · GREECE",
title:
"Mykonos",
copy:
"Golden hour, late dinners, music and nights that naturally stretch well beyond sunset.",
image:
"mykonos",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
region:
"ATTICA · GREECE",
title:
"Athens",
copy:
"Rooftops, neighbourhood evenings, late dinners and a city that changes character after dark.",
image:
"athens",
url:
"/destinations/europe/greece/attica/athens/"
}
],
experiences: [
{
title:
"After Golden Hour — Mykonos",
copy:
"Five days designed around nightlife energy without sacrificing the mornings that come after it.",
url:
"#"
},
{
title:
"Start With Sunset",
copy:
"Give the night a proper beginning before deciding where dinner, drinks or music should take you.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Let Dinner Become the Night",
copy:
"Choose evenings where there is no pressure to rush from one reservation into another.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
footer:
"Find somewhere worth staying up for.",
ctaLabel:
"Explore After Golden Hour",
cta:
"/destinations/europe/greece/cyclades/mykonos/"
},
/* ===================================================
04 — LOCAL RHYTHM
=================================================== */
local: {
title:
"Local Rhythm",
statement:
"For couples who want to feel like they belong there for a while.",
feelingTitle:
"Live there instead of trying to see everything.",
tags: [
"Coffee",
"Bakeries",
"Neighbourhoods",
"Markets",
"Local tables",
"Everyday life"
],
copy:
"Find your morning coffee. Walk some streets more than once. Learn which neighbourhood feels like yours and let ordinary moments become part of why the trip mattered.",
heroImage:
"local",
destinations: [
{
region:
"ATTICA · GREECE",
title:
"Athens",
copy:
"Neighbourhoods, bakeries, cafés, markets and everyday city rhythms that reward couples who stop treating Athens as a checklist.",
image:
"athens",
url:
"/destinations/europe/greece/attica/athens/"
}
],
experiences: [
{
title:
"Athens As If You Lived Here",
copy:
"Coffee, bakery, neighbourhood, lunch, local moments, sunset and dinner — built around living Athens rather than touring it.",
url:
"/destinations/europe/greece/attica/athens/"
},
{
title:
"Find Your Morning Place",
copy:
"Return somewhere instead of starting from zero every morning.",
url:
"/destinations/europe/greece/attica/athens/"
},
{
title:
"Choose a Neighbourhood",
copy:
"Spend enough time in one part of Athens for it to start becoming familiar.",
url:
"/destinations/europe/greece/attica/athens/"
}
],
footer:
"Experience Athens like it belongs in your everyday life.",
ctaLabel:
"Explore Athens",
cta:
"/destinations/europe/greece/attica/athens/"
},
/* ===================================================
05 — WILD TOGETHER
=================================================== */
wild: {
title:
"Wild Together",
statement:
"For the days when you want to do something you'll still talk about afterwards.",
feelingTitle:
"Try something together.",
tags: [
"Sailing",
"Diving",
"Kayaking",
"Horse riding",
"Exploration",
"Challenge"
],
copy:
"Do something neither of you does every day. Learn, struggle, laugh, get wet, get tired or get it wrong together — then come away with a story that belongs to both of you.",
heroImage:
"wild",
destinations: [
{
region:
"CYCLADES · GREECE",
title:
"Mykonos",
copy:
"Beyond the beaches and nightlife, Mykonos gives couples ways to sail, dive, paddle, ride and explore the island differently.",
image:
"mykonos",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
experiences: [
{
title:
"Take to the Water",
copy:
"Sailing and kayaking offer a different way to experience Mykonos together.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Go Below the Surface",
copy:
"Discover the diving side of Mykonos and experience something completely different together.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Explore the Island Differently",
copy:
"Choose an experience that gives the two of you a story rather than just another stop.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
footer:
"Find something new to experience together in Mykonos.",
ctaLabel:
"Explore Mykonos Activities",
cta:
"/destinations/europe/greece/cyclades/mykonos/"
},
/* ===================================================
06 — ESCAPE TOGETHER
=================================================== */
escape: {
title:
"Escape Together",
statement:
"For the days when you want the rest of the world to feel further away.",
feelingTitle:
"Go somewhere that gives you back your time.",
tags: [
"Privacy",
"Quiet corners",
"Open water",
"No rush",
"Space",
"Just us"
],
copy:
"Choose somewhere with enough quiet, space and distance from ordinary life that being together becomes the main event.",
heroImage:
"escape",
destinations: [
{
region:
"GREECE",
title:
"Cyclades",
copy:
"A group of islands surrounded by open water, each offering a different way for two people to step away from ordinary life.",
image:
"cyclades",
url:
"/destinations/europe/greece/cyclades/"
},
{
region:
"CYCLADES · GREECE",
title:
"Mykonos",
copy:
"Move beyond the island's busiest image and find quieter roads, beaches and places where the two of you can disappear for a while.",
image:
"mykonos",
url:
"/destinations/europe/greece/cyclades/mykonos/"
}
],
experiences: [
{
title:
"Find the Quieter Mykonos",
copy:
"Choose the side of the island where space and time matter more than being seen.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Stay Somewhere Worth Staying In",
copy:
"Treat the accommodation as part of the experience rather than somewhere you only return to sleep.",
url:
"/destinations/europe/greece/cyclades/mykonos/"
},
{
title:
"Make Nothing the Plan",
copy:
"Some of the best couple time starts when there is nowhere else you need to be.",
url:
"/destinations/europe/greece/cyclades/"
}
],
footer:
"Find your quieter corner of the Cyclades.",
ctaLabel:
"Explore the Cyclades",
cta:
"/destinations/europe/greece/cyclades/"
}
};
/* =====================================================
ELEMENTS
===================================================== */
const buttons =
Array.from(
root.querySelectorAll(".mg-mood-button")
);
const panel =
root.querySelector("#mg-mood-experience");
const heroImage =
root.querySelector("#mg-mood-image");
const title =
root.querySelector("#mg-mood-title");
const statement =
root.querySelector("#mg-mood-statement");
const feelingTitle =
root.querySelector("#mg-feeling-title");
const tags =
root.querySelector("#mg-mood-tags");
const copy =
root.querySelector("#mg-mood-copy");
const destinationHeading =
root.querySelector("#mg-destination-heading");
const destinationGrid =
root.querySelector("#mg-destination-grid");
const experienceList =
root.querySelector("#mg-experience-list");
const footerTitle =
root.querySelector("#mg-footer-title");
const footerCTA =
root.querySelector("#mg-footer-cta");
const footerCTALabel =
root.querySelector("#mg-footer-cta-label");
/* =====================================================
IMAGE LOOKUP
===================================================== */
function getMoodImage(key) {
return (
images.moods[key] || ""
);
}
function getDestinationImage(key) {
return (
images.destinations[key] || ""
);
}
/* =====================================================
ESCAPE HTML
===================================================== */
function escapeHTML(value) {
return String(value)
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/* =====================================================
RENDER MOOD
===================================================== */
function renderMood(
moodKey,
animate = true
) {
const mood =
moods[moodKey];
if (!mood) return;
if (animate) {
panel.classList.add(
"is-changing"
);
}
window.setTimeout(function () {
/* HERO */
title.textContent =
mood.title;
statement.textContent =
mood.statement;
feelingTitle.textContent =
mood.feelingTitle;
copy.textContent =
mood.copy;
const heroURL =
getMoodImage(
mood.heroImage
);
heroImage.style.backgroundImage =
heroURL
? 'url("' + heroURL + '")'
: "none";
/* TAGS */
tags.innerHTML =
mood.tags
.map(function (tag) {
return `
${escapeHTML(tag)}
`;
})
.join("");
/* DESTINATION COUNT */
const destinationCount =
mood.destinations.length;
destinationGrid.setAttribute(
"data-count",
String(destinationCount)
);
destinationHeading.textContent =
destinationCount === 1
? "A place that suits this kind of trip."
: "Places that suit this kind of trip.";
/* DESTINATIONS */
destinationGrid.innerHTML =
mood.destinations
.map(function (destination) {
const destinationImage =
getDestinationImage(
destination.image
);
const imageStyle =
destinationImage
? `background-image:url('${escapeHTML(destinationImage)}');`
: "";
return `
`;
})
.join("");
/* EXPERIENCES */
experienceList.innerHTML =
mood.experiences
.map(function (
experience,
index
) {
const number =
String(index + 1)
.padStart(2, "0");
return `
${number}
`;
})
.join("");
/* FOOTER */
footerTitle.textContent =
mood.footer;
footerCTA.href =
mood.cta;
footerCTALabel.textContent =
mood.ctaLabel;
/* SAVE CURRENT MOOD */
root.dataset.activeMood =
moodKey;
try {
localStorage.setItem(
"mgTravelMood",
moodKey
);
} catch (error) {
/* Storage optional */
}
panel.classList.remove(
"is-changing"
);
}, animate ? 160 : 0);
}
/* =====================================================
SELECT MOOD
===================================================== */
function selectMood(button) {
if (!button) return;
const moodKey =
button.dataset.mood;
buttons.forEach(function (item) {
const active =
item === button;
item.classList.toggle(
"is-active",
active
);
item.setAttribute(
"aria-selected",
active
? "true"
: "false"
);
});
renderMood(
moodKey,
true
);
/* Keep selected mobile tab visible */
try {
button.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
} catch (error) {
/* No action needed */
}
}
/* =====================================================
CLICK EVENTS
===================================================== */
buttons.forEach(function (button) {
button.addEventListener(
"click",
function () {
selectMood(button);
}
);
});
/* =====================================================
KEYBOARD NAVIGATION
===================================================== */
buttons.forEach(function (
button,
index
) {
button.addEventListener(
"keydown",
function (event) {
let nextIndex =
null;
if (
event.key === "ArrowRight" ||
event.key === "ArrowDown"
) {
nextIndex =
(index + 1) %
buttons.length;
}
if (
event.key === "ArrowLeft" ||
event.key === "ArrowUp"
) {
nextIndex =
(
index - 1 +
buttons.length
) %
buttons.length;
}
if (nextIndex !== null) {
event.preventDefault();
buttons[nextIndex]
.focus();
selectMood(
buttons[nextIndex]
);
}
}
);
});
/* =====================================================
RESTORE LAST MOOD
===================================================== */
let savedMood =
null;
try {
savedMood =
localStorage.getItem(
"mgTravelMood"
);
} catch (error) {
savedMood =
null;
}
const initialButton =
buttons.find(function (button) {
return (
button.dataset.mood ===
savedMood
);
}) || buttons[0];
buttons.forEach(function (button) {
const active =
button === initialButton;
button.classList.toggle(
"is-active",
active
);
button.setAttribute(
"aria-selected",
active
? "true"
: "false"
);
});
renderMood(
initialButton.dataset.mood,
false
);
});
${escapeHTML(destination.region)}
${escapeHTML(destination.title)}
${escapeHTML(destination.copy)}
${escapeHTML(experience.title)}
${escapeHTML(experience.copy)}
TRAVEL DESIGNED FOR TWO
How do you want this trip to feel?
Choose a mood. We’ll show you the places and experiences that fit.
YOUR TRAVEL MOOD
Slow Together
THIS MOOD FEELS LIKE
WHERE TO FEEL IT
A place that suits this kind of trip.
DO IT TOGETHER