Mango Match
/* =========================================================
MANGO MATCH — B01
COMING SOON HERO
========================================================= */
#mg-match-b01 {
--mg-black: #14110E;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-cream: #FFF5E6;
--mg-muted: #B9AC9A;
--mg-line: rgba(255, 245, 230, .12);
position: relative;
overflow: hidden;
padding:
clamp(70px, 8vw, 118px)
22px;
color: var(--mg-cream);
background:
radial-gradient(
circle at 82% 15%,
rgba(244, 166, 65, .13),
transparent 30rem
),
radial-gradient(
circle at 10% 90%,
rgba(216, 121, 22, .06),
transparent 32rem
),
var(--mg-black);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b01 * {
box-sizing: border-box;
}
/* =========================================================
LAYOUT
========================================================= */
#mg-match-b01 .mg-b01-wrap {
width: min(
1180px,
100%
);
margin: 0 auto;
display: grid;
grid-template-columns:
1.03fr
.97fr;
gap:
clamp(
40px,
6vw,
80px
);
align-items: center;
}
/* =========================================================
STATUS
========================================================= */
#mg-match-b01 .mg-b01-status {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 20px;
padding:
7px
12px;
border-radius: 999px;
background:
rgba(
244,
166,
65,
.08
);
border:
1px
solid
rgba(
244,
166,
65,
.22
);
color:
#F5CE98;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .14em;
}
#mg-match-b01 .mg-b01-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background:
var(--mg-mango);
box-shadow:
0 0 0 5px
rgba(
244,
166,
65,
.09
);
}
/* =========================================================
EYEBROW
========================================================= */
#mg-match-b01 .mg-b01-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b01 .mg-b01-eyebrow::before {
content: "";
width: 29px;
height: 1px;
background:
currentColor;
}
/* =========================================================
HEADLINE
========================================================= */
#mg-match-b01 h1 {
max-width: 720px;
margin:
0
0
25px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
54px,
7vw,
96px
);
font-weight: 500;
line-height: .91;
letter-spacing: -.045em;
color:
var(--mg-cream);
}
#mg-match-b01 h1 span {
color:
var(--mg-mango);
}
/* =========================================================
INTRO
========================================================= */
#mg-match-b01 .mg-b01-intro {
max-width: 660px;
margin:
0
0
30px;
color:
#D7C8B4;
font-size:
clamp(
16px,
1.5vw,
18px
);
line-height: 1.72;
}
/* =========================================================
BUTTONS
========================================================= */
#mg-match-b01 .mg-b01-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
#mg-match-b01 .mg-b01-btn {
min-height: 52px;
padding:
0
22px;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
text-decoration: none !important;
font-family: inherit;
font-size: 14px;
font-weight: 800;
transition:
transform .2s ease,
background .2s ease,
box-shadow .2s ease;
}
#mg-match-b01 .mg-b01-btn:hover {
transform:
translateY(-2px);
}
#mg-match-b01 .mg-b01-btn-primary {
color:
#241508 !important;
background:
linear-gradient(
135deg,
var(--mg-mango),
#FFC16C
);
box-shadow:
0
14px
35px
rgba(
244,
166,
65,
.20
);
}
#mg-match-b01 .mg-b01-btn-primary:hover {
box-shadow:
0
18px
42px
rgba(
244,
166,
65,
.28
);
}
#mg-match-b01 .mg-b01-btn-secondary {
color:
var(--mg-cream) !important;
border:
1px
solid
rgba(
255,
245,
230,
.15
);
background:
rgba(
255,
255,
255,
.035
);
}
#mg-match-b01 .mg-b01-btn-secondary:hover {
background:
rgba(
255,
255,
255,
.07
);
}
/* =========================================================
PROOF
========================================================= */
#mg-match-b01 .mg-b01-proof {
display: flex;
flex-wrap: wrap;
gap:
10px
20px;
color:
var(--mg-muted);
font-size: 12px;
}
#mg-match-b01 .mg-b01-proof span {
display: flex;
align-items: center;
gap: 7px;
}
#mg-match-b01 .mg-b01-proof i {
color:
var(--mg-mango);
font-style: normal;
}
/* =========================================================
PRE-LAUNCH NOTE
========================================================= */
#mg-match-b01 .mg-b01-prelaunch {
max-width: 630px;
margin-top: 30px;
padding-top: 23px;
border-top:
1px solid
rgba(
255,
245,
230,
.09
);
display: flex;
align-items: flex-start;
gap: 13px;
}
#mg-match-b01 .mg-b01-prelaunch-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
background:
rgba(
244,
166,
65,
.10
);
}
#mg-match-b01 .mg-b01-prelaunch strong {
display: block;
margin-bottom: 4px;
color:
#F6E9D6;
font-size: 12px;
}
#mg-match-b01 .mg-b01-prelaunch span {
display: block;
color:
#9F9180;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
PRODUCT STAGE
========================================================= */
#mg-match-b01 .mg-b01-stage {
position: relative;
min-height: 650px;
display: grid;
place-items: center;
}
#mg-match-b01 .mg-b01-glow {
position: absolute;
width: 455px;
height: 455px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(
244,
166,
65,
.18
),
rgba(
244,
166,
65,
.045
)
48%,
transparent
72%
);
}
/* =========================================================
FLOATING CARDS
========================================================= */
#mg-match-b01 .mg-b01-float {
position: absolute;
z-index: 5;
min-width: 155px;
padding:
14px
17px;
border-radius: 17px;
color:
#CEBFAA;
background:
rgba(
33,
28,
23,
.94
);
border:
1px
solid
rgba(
255,
245,
230,
.12
);
box-shadow:
0
20px
50px
rgba(
0,
0,
0,
.28
);
backdrop-filter:
blur(14px);
}
#mg-match-b01 .mg-b01-float-label {
display: block;
margin-bottom: 5px;
color:
#8E806F;
font-size: 8px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b01 .mg-b01-float strong {
display: block;
margin-bottom: 2px;
color:
var(--mg-mango);
font-size: 15px;
}
#mg-match-b01 .mg-b01-float small {
font-size: 10px;
}
#mg-match-b01 .mg-b01-float-top {
top: 115px;
left: 0;
}
#mg-match-b01 .mg-b01-float-bottom {
right: 0;
bottom: 105px;
}
/* =========================================================
PHONE
========================================================= */
#mg-match-b01 .mg-b01-phone {
position: relative;
z-index: 3;
width:
min(
365px,
90vw
);
padding: 12px;
border-radius: 42px;
background:
#080705;
border:
1px solid
rgba(
255,
255,
255,
.11
);
box-shadow:
0
35px
90px
rgba(
0,
0,
0,
.43
);
transform:
rotate(2deg);
}
#mg-match-b01 .mg-b01-phone-inner {
position: relative;
min-height: 605px;
overflow: hidden;
border-radius: 32px;
background:
linear-gradient(
180deg,
#35443C,
#1E2D28 44%,
#14110E
);
}
/* =========================================================
PHONE HEADER
========================================================= */
#mg-match-b01 .mg-b01-phone-header {
display: flex;
align-items: center;
justify-content: space-between;
padding:
20px
19px
11px;
color:
#F7EAD7;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
}
#mg-match-b01 .mg-b01-mini-mango {
margin-right: 4px;
}
/* =========================================================
DESTINATION CARD
========================================================= */
#mg-match-b01 .mg-b01-card {
position: relative;
overflow: hidden;
min-height: 435px;
margin:
8px
15px
0;
border-radius: 26px;
display: flex;
align-items: flex-end;
background:
linear-gradient(
145deg,
#23483F,
#7E9A6A 54%,
#C5AA71
);
box-shadow:
0
18px
38px
rgba(
0,
0,
0,
.28
);
}
#mg-match-b01 .mg-b01-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 18%,
rgba(
10,
9,
7,
.04
)
45%,
rgba(
10,
9,
7,
.93
)
100%
);
}
/* SUN */
#mg-match-b01 .mg-b01-sun {
position: absolute;
top: 55px;
right: 45px;
width: 92px;
height: 92px;
border-radius: 50%;
background:
rgba(
255,
233,
170,
.76
);
box-shadow:
0
0
65px
rgba(
255,
226,
141,
.22
);
}
/* LAND */
#mg-match-b01 .mg-b01-land {
position: absolute;
left: -12%;
right: -12%;
}
#mg-match-b01 .mg-b01-land-back {
bottom: 135px;
height: 130px;
opacity: .50;
background:
#607B68;
clip-path:
polygon(
0 70%,
15% 48%,
29% 63%,
44% 37%,
62% 57%,
76% 42%,
100% 65%,
100% 100%,
0 100%
);
}
#mg-match-b01 .mg-b01-land-front {
bottom: 94px;
height: 180px;
background:
#1D342E;
clip-path:
polygon(
0 66%,
8% 51%,
17% 58%,
24% 40%,
32% 55%,
43% 29%,
52% 46%,
63% 27%,
76% 47%,
84% 39%,
100% 59%,
100% 100%,
0 100%
);
}
/* CARD TEXT */
#mg-match-b01 .mg-b01-card-content {
position: relative;
z-index: 3;
width: 100%;
padding: 24px;
}
#mg-match-b01 .mg-b01-card-label {
margin-bottom: 7px;
color:
#F8D7A1;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
#mg-match-b01 .mg-b01-card-country {
color:
white;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 44px;
line-height: 1;
}
#mg-match-b01 .mg-b01-card-tags {
margin-top: 7px;
color:
#E7D7C1;
font-size: 12px;
}
/* =========================================================
CARD ACTIONS
========================================================= */
#mg-match-b01 .mg-b01-card-actions {
padding:
19px
18px
22px;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 21px;
}
#mg-match-b01 .mg-b01-card-action-wrap {
display: grid;
justify-items: center;
gap: 6px;
}
#mg-match-b01 .mg-b01-card-action-wrap small {
color:
#8D8070;
font-size: 8px;
text-transform: uppercase;
letter-spacing: .08em;
}
#mg-match-b01 .mg-b01-circle {
width: 54px;
height: 54px;
border-radius: 50%;
display: grid;
place-items: center;
color:
#DDCFBD;
background:
#181512;
border:
1px solid
rgba(
255,
255,
255,
.10
);
font-size: 20px;
}
#mg-match-b01 .mg-b01-circle-primary {
width: 64px;
height: 64px;
color:
#251607;
background:
var(--mg-mango);
box-shadow:
0
12px
32px
rgba(
244,
166,
65,
.22
);
}
/* =========================================================
DEVELOPMENT STATUS
========================================================= */
#mg-match-b01 .mg-b01-device-status {
position: absolute;
left: 50%;
bottom: 8px;
transform:
translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
color:
#75695C;
white-space: nowrap;
font-size: 8px;
text-transform: uppercase;
letter-spacing: .10em;
}
#mg-match-b01 .mg-b01-device-status span {
width: 5px;
height: 5px;
border-radius: 50%;
background:
var(--mg-mango);
}
/* =========================================================
MODAL
========================================================= */
.mg-journey-modal {
--mg-black: #14110E;
--mg-brown: #211C17;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-cream: #FFF5E6;
--mg-muted: #B9AC9A;
position: fixed;
inset: 0;
z-index: 999999;
display: none;
place-items: center;
padding: 20px;
background:
rgba(
7,
6,
5,
.80
);
backdrop-filter:
blur(13px);
}
.mg-journey-modal.is-open {
display: grid;
}
.mg-journey-dialog {
position: relative;
width:
min(
520px,
100%
);
max-height:
calc(
100vh - 40px
);
overflow: auto;
padding:
33px;
border-radius: 30px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 90% 0,
rgba(
244,
166,
65,
.11
),
transparent
17rem
),
var(--mg-brown);
border:
1px solid
rgba(
255,
245,
230,
.12
);
box-shadow:
0
40px
100px
rgba(
0,
0,
0,
.45
);
font-family:
"DM Sans",
Arial,
sans-serif;
}
.mg-journey-close {
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
cursor: pointer;
color:
var(--mg-cream);
background:
rgba(
255,
255,
255,
.06
);
font-size: 22px;
}
.mg-journey-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
margin-bottom: 20px;
border-radius: 14px;
background:
rgba(
244,
166,
65,
.11
);
}
.mg-journey-label {
margin-bottom: 8px;
color:
var(--mg-mango);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.mg-journey-top h2 {
margin:
0
45px
12px
0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
40px,
6vw,
55px
);
font-weight: 500;
line-height: .95;
}
.mg-journey-top p {
margin:
0
0
26px;
color:
#CDBDA9;
line-height: 1.65;
font-size: 13px;
}
/* FORM */
.mg-journey-form {
display: grid;
gap: 16px;
}
.mg-field {
display: grid;
gap: 7px;
}
.mg-field label {
color:
#E4D6C3;
font-size: 11px;
font-weight: 700;
}
.mg-field input {
width: 100%;
height: 50px;
padding:
0
15px;
outline: none;
border-radius: 13px;
color:
var(--mg-cream);
background:
rgba(
255,
255,
255,
.045
);
border:
1px solid
rgba(
255,
245,
230,
.12
);
font-size: 14px;
}
.mg-field input:focus {
border-color:
rgba(
244,
166,
65,
.7
);
box-shadow:
0
0
0
3px
rgba(
244,
166,
65,
.08
);
}
.mg-field input::placeholder {
color:
#75695C;
}
/* CHECKBOX */
.mg-check {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
color:
#AFA08D;
font-size: 11px;
line-height: 1.5;
}
.mg-check input {
margin-top: 2px;
accent-color:
var(--mg-mango);
}
/* SUBMIT */
.mg-journey-submit {
min-height: 52px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color:
#251607;
background:
linear-gradient(
135deg,
var(--mg-mango),
#FFC16C
);
font-size: 13px;
font-weight: 800;
}
.mg-journey-privacy {
margin: 0;
text-align: center;
color:
#796D60;
font-size: 9px;
line-height: 1.5;
}
/* SUCCESS */
.mg-journey-success {
padding:
20px
0
3px;
text-align: center;
}
.mg-journey-success-icon {
width: 65px;
height: 65px;
margin:
0 auto
18px;
display: grid;
place-items: center;
border-radius: 50%;
color:
#261706;
background:
var(--mg-mango);
font-size: 22px;
}
.mg-journey-success h3 {
margin:
0
0
8px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 38px;
font-weight: 500;
}
.mg-journey-success p {
max-width: 360px;
margin:
0 auto
22px;
color:
#CDBDA9;
font-size: 13px;
line-height: 1.65;
}
.mg-journey-done {
min-height: 46px;
padding:
0
25px;
border: 0;
border-radius: 999px;
cursor: pointer;
background:
var(--mg-mango);
color:
#261706;
font-weight: 800;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 980px) {
#mg-match-b01 .mg-b01-wrap {
grid-template-columns:
1fr;
}
#mg-match-b01 .mg-b01-stage {
min-height:
625px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b01 {
padding:
58px
18px
60px;
}
#mg-match-b01 h1 {
font-size:
clamp(
49px,
15vw,
66px
);
}
#mg-match-b01 .mg-b01-actions {
display: grid;
grid-template-columns:
1fr;
}
#mg-match-b01 .mg-b01-btn {
width: 100%;
}
#mg-match-b01 .mg-b01-proof {
display: grid;
grid-template-columns:
1fr;
gap: 7px;
}
#mg-match-b01 .mg-b01-stage {
min-height:
590px;
}
#mg-match-b01 .mg-b01-phone {
transform: none;
}
#mg-match-b01 .mg-b01-float {
display: none;
}
#mg-match-b01 .mg-b01-prelaunch {
margin-top: 25px;
}
.mg-journey-dialog {
padding:
27px
22px;
}
}
document.addEventListener("DOMContentLoaded", function () {
const modal =
document.getElementById("mgJourneyModal");
if (!modal) return;
const openButtons =
document.querySelectorAll(
"[data-mg-journey-open]"
);
const closeButtons =
document.querySelectorAll(
"[data-mg-journey-close]"
);
const form =
document.getElementById(
"mgJourneyForm"
);
const success =
document.getElementById(
"mgJourneySuccess"
);
let previousFocus = null;
/* =========================
OPEN MODAL
========================== */
function openJourneyModal() {
previousFocus =
document.activeElement;
modal.classList.add(
"is-open"
);
modal.setAttribute(
"aria-hidden",
"false"
);
document.body.style.overflow =
"hidden";
const firstInput =
modal.querySelector(
"input"
);
setTimeout(function () {
if (firstInput) {
firstInput.focus();
}
}, 100);
}
/* =========================
CLOSE MODAL
========================== */
function closeJourneyModal() {
modal.classList.remove(
"is-open"
);
modal.setAttribute(
"aria-hidden",
"true"
);
document.body.style.overflow =
"";
if (previousFocus) {
previousFocus.focus();
}
}
/* =========================
OPEN BUTTONS
========================== */
openButtons.forEach(
function (button) {
button.addEventListener(
"click",
openJourneyModal
);
}
);
/* =========================
CLOSE BUTTONS
========================== */
closeButtons.forEach(
function (button) {
button.addEventListener(
"click",
closeJourneyModal
);
}
);
/* =========================
CLICK BACKDROP TO CLOSE
========================== */
modal.addEventListener(
"click",
function (event) {
if (event.target === modal) {
closeJourneyModal();
}
}
);
/* =========================
ESCAPE KEY
========================== */
document.addEventListener(
"keydown",
function (event) {
if (
event.key === "Escape" &&
modal.classList.contains(
"is-open"
)
) {
closeJourneyModal();
}
}
);
/* =========================
DEMO FORM SUBMIT
IMPORTANT:
Currently this does NOT
send data to WordPress.
Connect this later to:
- Fluent Forms
- Kadence Forms
- MailerLite
- Brevo
- ConvertKit
- Mango API
========================== */
if (form) {
form.addEventListener(
"submit",
function (event) {
event.preventDefault();
const name =
document.getElementById(
"mgJourneyName"
);
const email =
document.getElementById(
"mgJourneyEmail"
);
if (
!name.value.trim() ||
!email.value.trim()
) {
return;
}
/* Hide form */
form.hidden =
true;
/* Show success */
success.hidden =
false;
/*
Future analytics event example:
window.dataLayer =
window.dataLayer || [];
window.dataLayer.push({
event:
"mango_match_early_access",
tester:
document.getElementById(
"mgJourneyTester"
).checked
});
*/
}
);
}
});
/* =========================================================
B02 — ROOT
========================================================= */
#mg-match-b02 {
--mg-black: #14110E;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-cream: #FFF5E6;
--mg-cream-soft: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-2: #8F8172;
--mg-line: rgba(255, 245, 230, .11);
position: relative;
overflow: hidden;
padding:
clamp(78px, 9vw, 125px)
22px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 50% 0%,
rgba(244, 166, 65, .075),
transparent 32rem
),
var(--mg-black);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b02 * {
box-sizing:
border-box;
}
/* =========================================================
WRAPPER
========================================================= */
#mg-match-b02 .mg-b02-wrap {
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
TOP INTRO
========================================================= */
#mg-match-b02 .mg-b02-intro {
max-width:
800px;
margin:
0 auto
clamp(
45px,
6vw,
72px
);
text-align:
center;
}
#mg-match-b02 .mg-b02-eyebrow {
display:
inline-flex;
align-items:
center;
gap:
9px;
margin-bottom:
18px;
color:
var(--mg-mango);
font-size:
11px;
font-weight:
800;
letter-spacing:
.17em;
text-transform:
uppercase;
}
#mg-match-b02 .mg-b02-eyebrow::before,
#mg-match-b02 .mg-b02-eyebrow::after {
content:
"";
width:
28px;
height:
1px;
background:
currentColor;
}
#mg-match-b02 h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
44px,
6vw,
72px
);
font-weight:
500;
line-height:
.98;
letter-spacing:
-.035em;
}
#mg-match-b02 h2 span {
color:
var(--mg-mango);
}
#mg-match-b02 .mg-b02-intro p {
max-width:
680px;
margin:
0 auto;
color:
#CDBEAB;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height:
1.75;
}
/* =========================================================
EXPERIENCE PANEL
========================================================= */
#mg-match-b02 .mg-b02-experience {
display:
grid;
grid-template-columns:
minmax(
0,
.8fr
)
minmax(
0,
1.2fr
);
border:
1px
solid
var(--mg-line);
border-radius:
30px;
overflow:
hidden;
background:
rgba(
255,
255,
255,
.025
);
box-shadow:
0
30px
80px
rgba(
0,
0,
0,
.20
);
}
/* =========================================================
LEFT TAB PANEL
========================================================= */
#mg-match-b02 .mg-b02-tabs {
padding:
clamp(
28px,
4vw,
44px
);
background:
linear-gradient(
180deg,
rgba(
255,
255,
255,
.035
),
rgba(
255,
255,
255,
.015
)
);
border-right:
1px
solid
var(--mg-line);
}
#mg-match-b02 .mg-b02-tabs-label {
display:
block;
margin-bottom:
22px;
color:
var(--mg-muted-2);
font-size:
9px;
font-weight:
800;
letter-spacing:
.16em;
text-transform:
uppercase;
}
#mg-match-b02 .mg-b02-tab {
position:
relative;
width:
100%;
min-height:
76px;
margin:
0
0
10px;
padding:
0
18px;
border:
1px
solid
rgba(
255,
245,
230,
.08
);
border-radius:
17px;
cursor:
pointer;
display:
flex;
align-items:
center;
gap:
14px;
color:
#A99A89;
background:
rgba(
255,
255,
255,
.025
);
text-align:
left;
font-family:
inherit;
transition:
background .22s ease,
border-color .22s ease,
color .22s ease,
transform .22s ease;
}
#mg-match-b02 .mg-b02-tab:hover {
transform:
translateX(
3px
);
color:
var(--mg-cream);
border-color:
rgba(
244,
166,
65,
.20
);
}
#mg-match-b02 .mg-b02-tab.is-active {
color:
var(--mg-cream);
background:
rgba(
244,
166,
65,
.075
);
border-color:
rgba(
244,
166,
65,
.30
);
}
#mg-match-b02 .mg-b02-tab-icon {
flex:
0 0 auto;
width:
42px;
height:
42px;
border-radius:
13px;
display:
grid;
place-items:
center;
color:
var(--mg-mango);
background:
rgba(
244,
166,
65,
.09
);
font-size:
17px;
}
#mg-match-b02 .mg-b02-tab strong {
display:
block;
margin-bottom:
2px;
font-size:
13px;
}
#mg-match-b02 .mg-b02-tab small {
display:
block;
color:
#817466;
font-size:
10px;
line-height:
1.4;
}
#mg-match-b02 .mg-b02-tab.is-active small {
color:
#A99987;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
#mg-match-b02 .mg-b02-panel {
min-height:
470px;
padding:
clamp(
35px,
5vw,
65px
);
position:
relative;
overflow:
hidden;
display:
flex;
align-items:
center;
}
/* subtle background circles */
#mg-match-b02 .mg-b02-panel::before {
content:
"";
position:
absolute;
width:
330px;
height:
330px;
top:
-120px;
right:
-100px;
border-radius:
50%;
border:
1px solid
rgba(
244,
166,
65,
.10
);
}
#mg-match-b02 .mg-b02-panel::after {
content:
"";
position:
absolute;
width:
220px;
height:
220px;
bottom:
-130px;
left:
20%;
border-radius:
50%;
background:
rgba(
244,
166,
65,
.025
);
}
#mg-match-b02 .mg-b02-panel-content {
position:
relative;
z-index:
2;
width:
100%;
max-width:
680px;
transition:
opacity .18s ease,
transform .18s ease;
}
#mg-match-b02 .mg-b02-panel-content.is-changing {
opacity:
0;
transform:
translateY(
8px
);
}
#mg-match-b02 .mg-b02-panel-kicker {
margin-bottom:
12px;
color:
var(--mg-mango);
font-size:
10px;
font-weight:
800;
text-transform:
uppercase;
letter-spacing:
.15em;
}
#mg-match-b02 .mg-b02-panel h3 {
max-width:
620px;
margin:
0
0
16px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
37px,
4.5vw,
56px
);
font-weight:
500;
line-height:
.98;
}
#mg-match-b02 .mg-b02-panel-copy {
max-width:
610px;
margin:
0
0
30px;
color:
#BCAE9C;
font-size:
14px;
line-height:
1.72;
}
/* =========================================================
DESTINATION SIGNAL CARDS
========================================================= */
#mg-match-b02 .mg-b02-mini-cards {
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
gap:
10px;
}
#mg-match-b02 .mg-b02-mini-card {
min-height:
114px;
padding:
15px;
border-radius:
17px;
border:
1px
solid
rgba(
255,
245,
230,
.08
);
background:
rgba(
255,
255,
255,
.03
);
transition:
transform .2s ease,
border-color .2s ease;
}
#mg-match-b02 .mg-b02-mini-card:hover {
transform:
translateY(
-3px
);
border-color:
rgba(
244,
166,
65,
.20
);
}
#mg-match-b02 .mg-b02-mini-card span {
display:
block;
margin-bottom:
16px;
font-size:
22px;
}
#mg-match-b02 .mg-b02-mini-card strong {
display:
block;
margin-bottom:
3px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
21px;
font-weight:
500;
}
#mg-match-b02 .mg-b02-mini-card small {
display:
block;
color:
#817466;
font-size:
9px;
line-height:
1.4;
}
/* =========================================================
PRINCIPLE STRIP
========================================================= */
#mg-match-b02 .mg-b02-principle {
margin-top:
24px;
padding-top:
22px;
border-top:
1px solid
rgba(
255,
245,
230,
.08
);
display:
flex;
align-items:
flex-start;
gap:
12px;
}
#mg-match-b02 .mg-b02-principle-icon {
flex:
0 0 auto;
width:
32px;
height:
32px;
border-radius:
10px;
display:
grid;
place-items:
center;
background:
rgba(
244,
166,
65,
.08
);
color:
var(--mg-mango);
font-size:
13px;
}
#mg-match-b02 .mg-b02-principle strong {
display:
block;
margin-bottom:
3px;
color:
#E8DAC7;
font-size:
11px;
}
#mg-match-b02 .mg-b02-principle span {
display:
block;
color:
#7F7365;
font-size:
10px;
line-height:
1.5;
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
#mg-match-b02 .mg-b02-bottom {
max-width:
860px;
margin:
clamp(
45px,
6vw,
68px
)
auto
0;
text-align:
center;
}
#mg-match-b02 .mg-b02-bottom p {
margin:
0;
color:
#897C6D;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
24px,
3vw,
36px
);
font-weight:
500;
line-height:
1.25;
}
#mg-match-b02 .mg-b02-bottom span {
color:
var(--mg-cream);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
#mg-match-b02 .mg-b02-experience {
grid-template-columns:
1fr;
}
#mg-match-b02 .mg-b02-tabs {
border-right:
0;
border-bottom:
1px
solid
var(--mg-line);
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
gap:
8px;
}
#mg-match-b02 .mg-b02-tabs-label {
grid-column:
1 / -1;
}
#mg-match-b02 .mg-b02-tab {
margin:
0;
min-height:
105px;
padding:
14px;
display:
grid;
align-content:
center;
justify-items:
center;
text-align:
center;
}
#mg-match-b02 .mg-b02-tab:hover {
transform:
translateY(
-2px
);
}
#mg-match-b02 .mg-b02-panel {
min-height:
430px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b02 {
padding:
72px
18px;
}
#mg-match-b02 .mg-b02-eyebrow::before,
#mg-match-b02 .mg-b02-eyebrow::after {
width:
18px;
}
#mg-match-b02 .mg-b02-tabs {
padding:
18px;
}
#mg-match-b02 .mg-b02-tab {
min-height:
92px;
padding:
11px
7px;
}
#mg-match-b02 .mg-b02-tab-icon {
width:
35px;
height:
35px;
border-radius:
11px;
}
#mg-match-b02 .mg-b02-tab small {
display:
none;
}
#mg-match-b02 .mg-b02-panel {
min-height:
auto;
padding:
34px
22px;
}
#mg-match-b02 .mg-b02-mini-cards {
grid-template-columns:
1fr;
}
#mg-match-b02 .mg-b02-mini-card {
min-height:
auto;
display:
grid;
grid-template-columns:
auto
1fr;
column-gap:
12px;
align-items:
center;
}
#mg-match-b02 .mg-b02-mini-card span {
grid-row:
1 / 3;
margin:
0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b02 * {
transition:
none !important;
}
}
(function () {
"use strict";
/* =========================================================
BLOCK
========================================================= */
const block =
document.getElementById(
"mg-match-b02"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const tabs =
block.querySelectorAll(
"[data-mg-b02-tab]"
);
const panel =
block.querySelector(
"#mgB02Panel"
);
const kicker =
block.querySelector(
"#mgB02Kicker"
);
const title =
block.querySelector(
"#mgB02Title"
);
const copy =
block.querySelector(
"#mgB02Copy"
);
const cards =
block.querySelector(
"#mgB02Cards"
);
const principleTitle =
block.querySelector(
"#mgB02PrincipleTitle"
);
const principleCopy =
block.querySelector(
"#mgB02PrincipleCopy"
);
/* =========================================================
CONTENT
========================================================= */
const states = {
/* YOU */
you: {
kicker:
"STEP ONE · YOUR DISCOVERY",
title:
"What catches your attention when nobody else is choosing?",
copy:
"Swipe through destinations by instinct. Interested or Not For Us. Your partner doesn't need to see your decisions yet, and you don't need to justify them.",
cards: [
{
flag: "🇬🇷",
country: "Greece",
status: "Interested"
},
{
flag: "🇯🇵",
country: "Japan",
status: "Interested"
},
{
flag: "🇮🇸",
country: "Iceland",
status: "Not for us"
}
],
principleTitle:
"Your choices stay yours.",
principleCopy:
"Mango doesn't use your partner's decisions to influence what appears as your own preference."
},
/* PARTNER */
partner: {
kicker:
"STEP TWO · THEIR DISCOVERY",
title:
"Now give your person the same space.",
copy:
"They move through their own Mango Match round independently. They don't need to know which destinations you liked, skipped or saved first.",
cards: [
{
flag: "🇵🇹",
country: "Portugal",
status: "Interested"
},
{
flag: "🇬🇷",
country: "Greece",
status: "Interested"
},
{
flag: "🇧🇷",
country: "Brazil",
status: "Interested"
}
],
principleTitle:
"No negotiating yet.",
principleCopy:
"The point is to capture genuine interest before compromise starts shaping the destination conversation."
},
/* TOGETHER */
together: {
kicker:
"STEP THREE · THE REVEAL",
title:
"Then Mango looks for the places where your curiosity overlaps.",
copy:
"Instead of asking one of you to win the destination debate, Mango surfaces the countries you independently chose and begins explaining why they may fit you both.",
cards: [
{
flag: "🇬🇷",
country: "Greece",
status: "94% Match"
},
{
flag: "🇵🇹",
country: "Portugal",
status: "87% Match"
},
{
flag: "🇿🇦",
country: "South Africa",
status: "82% Match"
}
],
principleTitle:
"The overlap becomes the conversation.",
principleCopy:
"A mutual match doesn't book the trip for you. It gives you a much better place to start building one together."
}
};
/* =========================================================
RENDER MINI CARDS
========================================================= */
function renderCards(items) {
cards.innerHTML =
items
.map(
function (item) {
return `
(function () {
"use strict";
/* =========================================================
BLOCK
========================================================= */
const block =
document.getElementById(
"mm-how"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const buttons =
block.querySelectorAll(
"[data-mg-b03-step]"
);
const content =
block.querySelector(
"#mgB03Content"
);
const visual =
block.querySelector(
"#mgB03Visual"
);
const kicker =
block.querySelector(
"#mgB03Kicker"
);
const title =
block.querySelector(
"#mgB03Title"
);
const copy =
block.querySelector(
"#mgB03Copy"
);
const points =
block.querySelector(
"#mgB03Points"
);
const progressFill =
block.querySelector(
"#mgB03ProgressFill"
);
const joinButton =
block.querySelector(
"#mgB03Join"
);
/* =========================================================
CONTENT
========================================================= */
const stages = [
/* =======================================================
01 DISCOVER
======================================================= */
{
kicker:
"STEP 01 · DISCOVER",
title:
"Start with ten destinations. No account required.",
copy:
"Your first Discovery Round gives you a deliberately varied set of destinations. Don't overthink it. Simply notice which places make you want to know more.",
points: [
"Interested or Not For Us",
"No signup before you experience Mango Match",
"Your decisions stay final until you reset"
],
visual: `
`
},
/* =======================================================
02 UNLOCK
======================================================= */
{
kicker:
"STEP 02 · YOUR FIRST SIGNALS",
title:
"Finish the round before Mango asks you to join.",
copy:
"Once you've experienced the product, Mango can show the first patterns forming in your choices. That's when creating a free profile becomes useful—not before.",
points: [
"See your first destination shortlist",
"Reveal emerging travel signals",
"Create a free profile to discover 40+ more"
],
visual: `
`
},
/* =======================================================
03 MATCH
======================================================= */
{
kicker:
"STEP 03 · COUPLE MATCH",
title:
"Invite your person. Let them choose for themselves.",
copy:
"Your partner gets their own private Mango Match. Once both of you have explored independently, Mango can reveal the destinations where your choices overlap.",
points: [
"Private discovery before comparison",
"Mutual destinations rise to the top",
"Understand why a destination may suit you both"
],
visual: `
`
},
/* =======================================================
04 BUILD
======================================================= */
{
kicker:
"STEP 04 · CREATE THE JOURNEY",
title:
"A match is the beginning, not the finished itinerary.",
copy:
"When a destination feels right, send it into Mango's separate Build Your Getaway experience. Match handles discovery. The Builder handles deliberate trip construction.",
points: [
"Choose trip length and travel mood",
"Add stays, experiences, food and places",
"Turn the shortlist into real days together"
],
visual: `
`
}
];
/* =========================================================
RENDER POINTS
========================================================= */
function renderPoints(items) {
points.innerHTML =
items
.map(
function (item) {
return `
${item.flag}
${item.country}
${item.tags}
`;
}
)
.join("");
}
/* =========================================================
CONTENT STATES
========================================================= */
const states = {
first: {
label:
"YOUR FREE DISCOVERY ROUND",
title:
"Ten different possibilities.",
count:
"10",
countLabel:
"DESTINATIONS",
footer:
"The opening round is deliberately varied so Mango can begin noticing what kinds of places consistently catch your attention.",
cards:
firstRound,
extra:
false,
value: `
No account.
`
},
full: {
label:
"AFTER YOUR FREE MANGO PROFILE",
title:
"The world gets much bigger.",
count:
"40+",
countLabel:
"MORE TO DISCOVER",
footer:
"The full Match continues from where you stopped. Your first ten choices remain decided; Mango does not throw them back into the stack.",
cards:
fullRoundPreview,
extra:
true,
value: `
`
}
};
/* =========================================================
SET MODE
========================================================= */
function setMode(
mode
) {
const state =
states[mode];
if (!state) {
return;
}
/* button state */
modeButtons.forEach(
function (button) {
const active =
button.dataset.mgB04Mode ===
mode;
button.classList.toggle(
"is-active",
active
);
button.setAttribute(
"aria-selected",
active
? "true"
: "false"
);
}
);
/* animation out */
grid.classList.add(
"is-changing"
);
value.classList.add(
"is-changing"
);
setTimeout(
function () {
deckLabel.textContent =
state.label;
deckTitle.textContent =
state.title;
counter.innerHTML =
state.count +
`${state.countLabel}`;
deckFooter.textContent =
state.footer;
renderCards(
state.cards,
state.extra
);
value.innerHTML =
state.value;
grid.classList.remove(
"is-changing"
);
value.classList.remove(
"is-changing"
);
},
170
);
}
/* =========================================================
MODE BUTTON EVENTS
========================================================= */
modeButtons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
setMode(
button.dataset.mgB04Mode
);
}
);
}
);
/* =========================================================
EARLY ACCESS CTA
Reuses B01's existing modal.
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
function () {
/* Find B01's modal trigger */
const b01JourneyButton =
document.querySelector(
"[data-mg-journey-open]"
);
if (b01JourneyButton) {
b01JourneyButton.click();
return;
}
/* Fallback to B01 */
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
}
);
}
})();
🇬🇷
Greece
Coast · Food · Culture
🇯🇵
Japan
Food · Culture · Cities
🇿🇦
South Africa
Nature · Road Trips · Wildlife
🇵🇹
Portugal
Coast · Slow Travel · Food
🇮🇸
Iceland
Nature · Adventure · Road Trips
🇹🇭
Thailand
Food · Islands · Discovery
🇮🇹
Italy
Food · Romance · History
🇧🇷
Brazil
Culture · Coast · Energy
🇨🇦
Canada
Nature · Scenic · Outdoors
🇦🇪
UAE
City · Luxury · Experiences
No account.
/* =========================================================
MANGO MATCH — B05
COUPLE MATCH / THE REVEAL
CSS TAB
========================================================= */
/* =========================================================
ROOT
========================================================= */
#mg-match-b05 {
--mg-black: #14110E;
--mg-black-2: #18140F;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-brown-3: #34291F;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-mango-light: #FFC979;
--mg-cream: #FFF5E6;
--mg-cream-2: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-dark: #827567;
--mg-line: rgba(255,245,230,.10);
position: relative;
overflow: hidden;
padding:
clamp(82px,9vw,130px)
22px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 50% 14%,
rgba(244,166,65,.075),
transparent 34rem
),
linear-gradient(
180deg,
#17130F 0%,
var(--mg-black) 72%
);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b05 * {
box-sizing: border-box;
}
/* =========================================================
WRAPPER
========================================================= */
#mg-match-b05 .mg-b05-wrap {
position: relative;
z-index: 2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
INTRO
========================================================= */
#mg-match-b05 .mg-b05-intro {
max-width: 830px;
margin:
0 auto
clamp(45px,6vw,72px);
text-align: center;
}
#mg-match-b05 .mg-b05-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b05 .mg-b05-eyebrow::before,
#mg-match-b05 .mg-b05-eyebrow::after {
content: "";
width: 27px;
height: 1px;
background:
currentColor;
}
#mg-match-b05 .mg-b05-intro h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
45px,
6vw,
74px
);
font-weight: 500;
line-height: .96;
letter-spacing: -.035em;
}
#mg-match-b05 .mg-b05-intro h2 span {
color:
var(--mg-mango);
}
#mg-match-b05 .mg-b05-intro p {
max-width: 700px;
margin: 0 auto;
color:
#C2B3A0;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height: 1.75;
}
/* =========================================================
DEMO SHELL
========================================================= */
#mg-match-b05 .mg-b05-demo {
overflow: hidden;
border-radius: 31px;
border:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.02);
box-shadow:
0
34px
90px
rgba(0,0,0,.25);
}
/* =========================================================
DEMO HEADER
========================================================= */
#mg-match-b05 .mg-b05-demo-header {
min-height: 78px;
padding:
18px
25px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.018);
}
#mg-match-b05 .mg-b05-demo-kicker {
display: block;
margin-bottom: 4px;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .16em;
}
#mg-match-b05 .mg-b05-demo-header strong {
color:
#EADCC9;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 22px;
font-weight: 500;
}
#mg-match-b05 .mg-b05-status {
flex: 0 0 auto;
padding:
7px
10px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 7px;
color:
#9C8E7D;
background:
rgba(255,255,255,.035);
border:
1px solid
rgba(255,245,230,.08);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b05 .mg-b05-status > span {
width: 6px;
height: 6px;
border-radius: 50%;
background:
#827568;
}
#mg-match-b05 .mg-b05-status.is-matched {
color:
var(--mg-mango);
border-color:
rgba(244,166,65,.19);
background:
rgba(244,166,65,.06);
}
#mg-match-b05 .mg-b05-status.is-matched > span {
background:
var(--mg-mango);
box-shadow:
0
0
0
5px
rgba(244,166,65,.06);
}
/* =========================================================
PRIVATE AREA
========================================================= */
#mg-match-b05 .mg-b05-private {
display: grid;
grid-template-columns:
minmax(0,1fr)
100px
minmax(0,1fr);
gap: 18px;
align-items: center;
padding:
clamp(26px,4vw,46px);
transition:
opacity .28s ease,
transform .28s ease;
}
#mg-match-b05 .mg-b05-private.is-hiding {
opacity: 0;
transform:
scale(.985);
}
/* =========================================================
PERSON PANELS
========================================================= */
#mg-match-b05 .mg-b05-person {
padding: 20px;
border-radius: 22px;
border:
1px solid
rgba(255,245,230,.08);
background:
linear-gradient(
180deg,
rgba(255,255,255,.034),
rgba(255,255,255,.015)
);
}
#mg-match-b05 .mg-b05-person-head {
display: grid;
grid-template-columns:
auto
1fr
auto;
gap: 11px;
align-items: center;
margin-bottom: 18px;
}
#mg-match-b05 .mg-b05-avatar {
width: 43px;
height: 43px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
background:
linear-gradient(
145deg,
#725643,
#C19871
);
border:
2px solid
rgba(255,255,255,.08);
font-size: 11px;
font-weight: 800;
}
#mg-match-b05 .mg-b05-avatar-two {
background:
linear-gradient(
145deg,
#6F5261,
#C898AC
);
}
#mg-match-b05 .mg-b05-person-head > div:nth-child(2) > span {
display: block;
margin-bottom: 2px;
color:
#74685B;
font-size: 7px;
font-weight: 800;
letter-spacing: .13em;
}
#mg-match-b05 .mg-b05-person-head h3 {
margin: 0;
color:
#E8DAC7;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 22px;
font-weight: 500;
}
#mg-match-b05 .mg-b05-lock {
color:
#75695C;
font-size: 8px;
}
/* =========================================================
CHOICES
========================================================= */
#mg-match-b05 .mg-b05-choice-list {
display: grid;
gap: 8px;
}
#mg-match-b05 .mg-b05-choice {
min-height: 62px;
padding:
10px
11px;
border-radius: 13px;
display: grid;
grid-template-columns:
auto
1fr
auto;
gap: 10px;
align-items: center;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,245,230,.055);
}
#mg-match-b05 .mg-b05-choice-muted {
opacity: .48;
}
#mg-match-b05 .mg-b05-flag {
font-size: 22px;
}
#mg-match-b05 .mg-b05-choice strong {
display: block;
color:
#DCCDBA;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 17px;
font-weight: 500;
}
#mg-match-b05 .mg-b05-choice small {
display: block;
margin-top: 1px;
color:
#75695C;
font-size: 7px;
}
#mg-match-b05 .mg-b05-choice i {
color:
var(--mg-mango);
font-style: normal;
font-size: 11px;
}
/* =========================================================
CONNECTION
========================================================= */
#mg-match-b05 .mg-b05-connection {
position: relative;
display: grid;
justify-items: center;
gap: 8px;
}
#mg-match-b05 .mg-b05-connection-line {
position: absolute;
top: 31px;
left: -18px;
right: -18px;
height: 1px;
background:
linear-gradient(
90deg,
rgba(255,245,230,.05),
rgba(244,166,65,.20),
rgba(255,245,230,.05)
);
}
#mg-match-b05 .mg-b05-heart {
position: relative;
z-index: 2;
width: 62px;
height: 62px;
border-radius: 50%;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
var(--mg-brown);
border:
1px solid
rgba(244,166,65,.18);
box-shadow:
0
14px
35px
rgba(0,0,0,.18);
font-size: 17px;
}
#mg-match-b05 .mg-b05-connection > span {
position: relative;
z-index: 2;
color:
#75695C;
font-size: 7px;
text-transform: uppercase;
letter-spacing: .10em;
}
/* =========================================================
REVEAL CONTROL
========================================================= */
#mg-match-b05 .mg-b05-reveal-control {
padding:
22px
25px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
border-top:
1px solid
var(--mg-line);
background:
var(--mg-brown);
transition:
opacity .25s ease;
}
#mg-match-b05 .mg-b05-reveal-control strong {
display: block;
margin-bottom: 3px;
color:
#E7D9C6;
font-size: 11px;
}
#mg-match-b05 .mg-b05-reveal-control > div > span {
display: block;
max-width: 590px;
color:
#817466;
font-size: 9px;
line-height: 1.45;
}
#mg-match-b05 .mg-b05-reveal-btn {
flex: 0 0 auto;
min-height: 48px;
padding:
0
18px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color:
#271707;
background:
linear-gradient(
135deg,
var(--mg-mango),
var(--mg-mango-light)
);
font-family: inherit;
font-size: 10px;
font-weight: 800;
box-shadow:
0
12px
28px
rgba(244,166,65,.15);
transition:
transform .2s ease,
box-shadow .2s ease;
}
#mg-match-b05 .mg-b05-reveal-btn:hover {
transform:
translateY(-2px);
box-shadow:
0
17px
35px
rgba(244,166,65,.23);
}
/* =========================================================
RESULTS
========================================================= */
#mg-match-b05 .mg-b05-results {
padding:
clamp(30px,5vw,55px);
animation:
mgB05Reveal
.55s
ease
both;
}
@keyframes mgB05Reveal {
from {
opacity: 0;
transform:
translateY(14px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
RESULT HEAD
========================================================= */
#mg-match-b05 .mg-b05-results-head {
max-width: 650px;
margin:
0 auto
35px;
text-align: center;
}
#mg-match-b05 .mg-b05-result-celebrate {
width: 54px;
height: 54px;
margin:
0 auto
14px;
border-radius: 50%;
display: grid;
place-items: center;
color:
#281707;
background:
var(--mg-mango);
box-shadow:
0
14px
35px
rgba(244,166,65,.18);
}
#mg-match-b05 .mg-b05-results-head > span {
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .16em;
}
#mg-match-b05 .mg-b05-results-head h3 {
margin:
8px
0
7px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
34px,
4.5vw,
49px
);
font-weight: 500;
line-height: .96;
}
#mg-match-b05 .mg-b05-results-head p {
max-width: 500px;
margin: 0 auto;
color:
#8C7E6E;
font-size: 10px;
line-height: 1.55;
}
/* =========================================================
TOP MATCH
========================================================= */
#mg-match-b05 .mg-b05-top-match {
display: grid;
grid-template-columns:
1.1fr
.9fr;
overflow: hidden;
border-radius: 23px;
border:
1px solid
rgba(255,245,230,.09);
background:
var(--mg-brown);
}
/* VISUAL */
#mg-match-b05 .mg-b05-top-visual {
position: relative;
min-height: 310px;
overflow: hidden;
padding: 26px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background:
linear-gradient(
180deg,
transparent 22%,
rgba(12,10,8,.10) 50%,
rgba(12,10,8,.88) 100%
),
linear-gradient(
145deg,
#315246,
#8B9F6B 55%,
#D1AD71
);
}
#mg-match-b05 .mg-b05-sun {
position: absolute;
top: 45px;
right: 60px;
width: 93px;
height: 93px;
border-radius: 50%;
background:
rgba(255,233,172,.72);
box-shadow:
0
0
60px
rgba(255,224,139,.20);
}
#mg-match-b05 .mg-b05-coast {
position: absolute;
left: -10%;
right: -10%;
bottom: 65px;
height: 150px;
background:
#1E372F;
clip-path:
polygon(
0 71%,
12% 49%,
24% 58%,
37% 35%,
52% 51%,
67% 31%,
81% 48%,
100% 63%,
100% 100%,
0 100%
);
}
#mg-match-b05 .mg-b05-top-label,
#mg-match-b05 .mg-b05-top-country {
position: relative;
z-index: 3;
}
#mg-match-b05 .mg-b05-top-label {
color:
#F5C982;
font-size: 8px;
font-weight: 800;
letter-spacing: .15em;
}
#mg-match-b05 .mg-b05-top-country {
margin-top: 6px;
color: white;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
38px,
5vw,
54px
);
line-height: .95;
}
/* COPY */
#mg-match-b05 .mg-b05-top-copy {
padding:
clamp(25px,4vw,39px);
display: flex;
flex-direction: column;
justify-content: center;
}
#mg-match-b05 .mg-b05-score {
margin-bottom: 18px;
}
#mg-match-b05 .mg-b05-score strong {
display: block;
color:
var(--mg-mango);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 57px;
font-weight: 500;
line-height: .8;
}
#mg-match-b05 .mg-b05-score span {
display: block;
margin-top: 8px;
color:
#716557;
font-size: 7px;
font-weight: 800;
letter-spacing: .15em;
}
#mg-match-b05 .mg-b05-signals {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 17px;
}
#mg-match-b05 .mg-b05-signals span {
padding:
6px
8px;
border-radius: 999px;
color:
#C49A65;
background:
rgba(244,166,65,.065);
border:
1px solid
rgba(244,166,65,.12);
font-size: 7px;
}
#mg-match-b05 .mg-b05-top-copy p {
margin:
0
0
20px;
color:
#948574;
font-size: 9px;
line-height: 1.6;
}
#mg-match-b05 .mg-b05-build-btn {
width: 100%;
min-height: 45px;
padding:
0
15px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color:
#251607;
background:
var(--mg-mango);
font-family: inherit;
font-size: 9px;
font-weight: 800;
}
/* =========================================================
OTHER MATCH
========================================================= */
#mg-match-b05 .mg-b05-other-match {
margin-top: 10px;
padding:
17px
19px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background:
rgba(255,255,255,.026);
border:
1px solid
rgba(255,245,230,.07);
}
#mg-match-b05 .mg-b05-other-rank {
display: block;
margin-bottom: 3px;
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .12em;
}
#mg-match-b05 .mg-b05-other-match strong {
display: block;
color:
#E3D5C2;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 20px;
font-weight: 500;
}
#mg-match-b05 .mg-b05-other-match small {
display: block;
margin-top: 2px;
color:
#74685A;
font-size: 7px;
}
#mg-match-b05 .mg-b05-other-score {
color:
var(--mg-mango);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 29px;
}
/* =========================================================
RESET
========================================================= */
#mg-match-b05 .mg-b05-reset {
display: block;
margin:
20px auto
0;
padding: 7px;
border: 0;
cursor: pointer;
color:
#776A5C;
background: transparent;
font-family: inherit;
font-size: 8px;
}
#mg-match-b05 .mg-b05-reset:hover {
color:
var(--mg-mango);
}
/* =========================================================
WHY IT MATTERS
========================================================= */
#mg-match-b05 .mg-b05-why {
margin-top:
clamp(
50px,
7vw,
80px
);
display: grid;
grid-template-columns:
.9fr
1.1fr;
gap:
clamp(
35px,
6vw,
75px
);
align-items: center;
}
#mg-match-b05 .mg-b05-eyebrow-left::after {
display: none;
}
#mg-match-b05 .mg-b05-why-copy h3 {
margin:
0
0
17px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
36px,
4.5vw,
52px
);
font-weight: 500;
line-height: .98;
}
#mg-match-b05 .mg-b05-why-copy p {
margin: 0;
color:
#9A8B79;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
PRINCIPLES
========================================================= */
#mg-match-b05 .mg-b05-principles {
display: grid;
gap: 9px;
}
#mg-match-b05 .mg-b05-principles article {
padding:
17px;
border-radius: 16px;
display: grid;
grid-template-columns:
auto
1fr;
gap: 13px;
background:
rgba(255,255,255,.024);
border:
1px solid
rgba(255,245,230,.065);
}
#mg-match-b05 .mg-b05-principles article > span {
width: 33px;
height: 33px;
border-radius: 10px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-size: 8px;
font-weight: 800;
}
#mg-match-b05 .mg-b05-principles strong {
display: block;
margin-bottom: 4px;
color:
#E2D4C1;
font-size: 11px;
}
#mg-match-b05 .mg-b05-principles p {
margin: 0;
color:
#776A5C;
font-size: 9px;
line-height: 1.5;
}
/* =========================================================
EARLY ACCESS
========================================================= */
#mg-match-b05 .mg-b05-early {
margin-top:
clamp(
45px,
6vw,
65px
);
padding:
23px
25px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
background:
rgba(244,166,65,.055);
border:
1px solid
rgba(244,166,65,.15);
}
#mg-match-b05 .mg-b05-early > div > span {
display: block;
margin-bottom: 4px;
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b05 .mg-b05-early strong {
color:
#E8DAC7;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
20px,
2.5vw,
28px
);
font-weight: 500;
}
#mg-match-b05 .mg-b05-early button {
flex: 0 0 auto;
min-height: 46px;
padding:
0
17px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
color:
#251607;
background:
var(--mg-mango);
font-family: inherit;
font-size: 9px;
font-weight: 800;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
#mg-match-b05 .mg-b05-private {
grid-template-columns:
1fr;
}
#mg-match-b05 .mg-b05-connection {
min-height: 70px;
}
#mg-match-b05 .mg-b05-connection-line {
width: 1px;
height: 70px;
top: 0;
left: 50%;
right: auto;
}
#mg-match-b05 .mg-b05-top-match {
grid-template-columns:
1fr;
}
#mg-match-b05 .mg-b05-top-visual {
min-height: 280px;
}
#mg-match-b05 .mg-b05-why {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b05 {
padding:
72px
18px;
}
#mg-match-b05 .mg-b05-demo-header {
align-items:
flex-start;
}
#mg-match-b05 .mg-b05-demo-header strong {
font-size: 18px;
}
#mg-match-b05 .mg-b05-private {
padding:
20px
15px;
}
#mg-match-b05 .mg-b05-person {
padding: 15px;
}
#mg-match-b05 .mg-b05-person-head {
grid-template-columns:
auto
1fr;
}
#mg-match-b05 .mg-b05-lock {
grid-column:
2;
}
#mg-match-b05 .mg-b05-reveal-control {
display: grid;
grid-template-columns:
1fr;
}
#mg-match-b05 .mg-b05-reveal-btn {
width: 100%;
}
#mg-match-b05 .mg-b05-results {
padding:
30px
16px;
}
#mg-match-b05 .mg-b05-early {
display: grid;
grid-template-columns:
1fr;
}
#mg-match-b05 .mg-b05-early button {
width: 100%;
justify-content: center;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b05 * {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
MANGO MATCH — B05
COUPLE MATCH / THE REVEAL
JAVASCRIPT TAB
========================================================= */
(function () {
"use strict";
const block =
document.getElementById(
"mg-match-b05"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const privateArea =
block.querySelector(
"#mgB05Private"
);
const revealControl =
block.querySelector(
"#mgB05RevealControl"
);
const revealButton =
block.querySelector(
"#mgB05Reveal"
);
const results =
block.querySelector(
"#mgB05Results"
);
const resetButton =
block.querySelector(
"#mgB05Reset"
);
const status =
block.querySelector(
"#mgB05Status"
);
const demoTitle =
block.querySelector(
"#mgB05DemoTitle"
);
const score =
block.querySelector(
".mg-b05-score-number"
);
const joinButton =
block.querySelector(
"#mgB05Join"
);
const buildButton =
block.querySelector(
"#mgB05Build"
);
/* =========================================================
SCORE ANIMATION
========================================================= */
let scoreTimer = null;
function animateScore() {
if (!score) {
return;
}
const target =
Number(
score.dataset.score
) || 94;
let current = 0;
clearInterval(
scoreTimer
);
score.textContent =
"0%";
scoreTimer =
setInterval(
function () {
current += 2;
if (
current >= target
) {
current =
target;
clearInterval(
scoreTimer
);
}
score.textContent =
current + "%";
},
20
);
}
/* =========================================================
REVEAL MATCH
========================================================= */
function revealMatch() {
if (!privateArea) {
return;
}
privateArea.classList.add(
"is-hiding"
);
if (revealControl) {
revealControl.style.opacity =
"0";
}
setTimeout(
function () {
privateArea.hidden =
true;
if (revealControl) {
revealControl.hidden =
true;
}
results.hidden =
false;
status.classList.add(
"is-matched"
);
status.innerHTML =
"MATCH FOUND";
demoTitle.textContent =
"The overlap is where the next conversation begins.";
animateScore();
},
280
);
}
/* =========================================================
RESET PREVIEW
========================================================= */
function resetPreview() {
clearInterval(
scoreTimer
);
results.hidden =
true;
privateArea.hidden =
false;
privateArea.classList.remove(
"is-hiding"
);
if (revealControl) {
revealControl.hidden =
false;
revealControl.style.opacity =
"1";
}
status.classList.remove(
"is-matched"
);
status.innerHTML =
"PRIVATE";
demoTitle.textContent =
"Two private rounds. One shared reveal.";
if (score) {
score.textContent =
"0%";
}
privateArea.scrollIntoView({
behavior:
"smooth",
block:
"nearest"
});
}
/* =========================================================
EVENTS
========================================================= */
if (revealButton) {
revealButton.addEventListener(
"click",
revealMatch
);
}
if (resetButton) {
resetButton.addEventListener(
"click",
resetPreview
);
}
/* =========================================================
BUILD BUTTON
Mango Builder is not live yet.
For now, move the visitor to the pre-launch journey CTA.
========================================================= */
if (buildButton) {
buildButton.addEventListener(
"click",
function () {
const builderSection =
document.getElementById(
"mm-builder"
);
if (builderSection) {
builderSection.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
return;
}
const journeyTrigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (journeyTrigger) {
journeyTrigger.click();
}
}
);
}
/* =========================================================
EARLY ACCESS CTA
Reuse B01 modal when available.
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
function () {
const journeyTrigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (journeyTrigger) {
journeyTrigger.click();
return;
}
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
}
);
}
})();
01
02
03
/* =========================================================
MANGO MATCH — B06
FROM MATCH TO GETAWAY
CSS TAB
========================================================= */
/* =========================================================
ROOT
========================================================= */
#mg-match-b06 {
--mg-black: #14110E;
--mg-black-2: #18140F;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-brown-3: #34291F;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-mango-light: #FFC775;
--mg-cream: #FFF5E6;
--mg-cream-2: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-dark: #817365;
--mg-line: rgba(255,245,230,.10);
position: relative;
overflow: hidden;
padding:
clamp(82px,9vw,130px)
22px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 88% 15%,
rgba(244,166,65,.065),
transparent 31rem
),
var(--mg-black);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b06 * {
box-sizing: border-box;
}
/* =========================================================
WRAPPER
========================================================= */
#mg-match-b06 .mg-b06-wrap {
position: relative;
z-index: 2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
INTRO
========================================================= */
#mg-match-b06 .mg-b06-intro {
max-width: 850px;
margin:
0 auto
clamp(44px,6vw,70px);
text-align: center;
}
#mg-match-b06 .mg-b06-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b06 .mg-b06-eyebrow::before,
#mg-match-b06 .mg-b06-eyebrow::after {
content: "";
width: 27px;
height: 1px;
background: currentColor;
}
#mg-match-b06 .mg-b06-intro h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
44px,
6vw,
72px
);
font-weight: 500;
line-height: .97;
letter-spacing: -.035em;
}
#mg-match-b06 .mg-b06-intro h2 span {
color:
var(--mg-mango);
}
#mg-match-b06 .mg-b06-intro p {
max-width: 710px;
margin: 0 auto;
color:
#C1B19D;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height: 1.75;
}
/* =========================================================
PRODUCT RELATIONSHIP
========================================================= */
#mg-match-b06 .mg-b06-product-map {
display: grid;
grid-template-columns:
1fr
110px
1fr;
gap: 16px;
align-items: center;
margin-bottom: 22px;
}
#mg-match-b06 .mg-b06-product {
min-height: 125px;
padding: 20px;
border-radius: 20px;
display: grid;
grid-template-columns:
auto
1fr;
gap: 14px;
align-items: center;
border:
1px solid
rgba(255,245,230,.08);
}
#mg-match-b06 .mg-b06-product-match {
background:
linear-gradient(
135deg,
rgba(244,166,65,.075),
rgba(255,255,255,.018)
);
}
#mg-match-b06 .mg-b06-product-builder {
background:
linear-gradient(
135deg,
rgba(255,255,255,.025),
rgba(244,166,65,.045)
);
}
#mg-match-b06 .mg-b06-product-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.08);
border:
1px solid
rgba(244,166,65,.15);
font-size: 17px;
}
#mg-match-b06 .mg-b06-product span {
display: block;
margin-bottom: 4px;
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b06 .mg-b06-product strong {
display: block;
margin-bottom: 4px;
color:
#E9DAC7;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 22px;
font-weight: 500;
}
#mg-match-b06 .mg-b06-product small {
display: block;
color:
#827466;
font-size: 8px;
line-height: 1.45;
}
#mg-match-b06 .mg-b06-product-arrow {
display: grid;
justify-items: center;
gap: 5px;
color:
var(--mg-mango);
}
#mg-match-b06 .mg-b06-product-arrow > span {
font-size: 27px;
}
#mg-match-b06 .mg-b06-product-arrow small {
color:
#776A5C;
font-size: 6px;
font-weight: 800;
letter-spacing: .14em;
}
/* =========================================================
BUILDER
========================================================= */
#mg-match-b06 .mg-b06-builder {
overflow: hidden;
border-radius: 30px;
border:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.02);
box-shadow:
0
32px
90px
rgba(0,0,0,.24);
}
/* =========================================================
BUILDER HEAD
========================================================= */
#mg-match-b06 .mg-b06-builder-head {
min-height: 76px;
padding:
17px
24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.018);
}
#mg-match-b06 .mg-b06-builder-kicker {
display: block;
margin-bottom: 3px;
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .15em;
}
#mg-match-b06 .mg-b06-builder-head strong {
color:
#EADCC9;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 23px;
font-weight: 500;
}
#mg-match-b06 .mg-b06-builder-status {
display: flex;
align-items: center;
gap: 7px;
padding:
7px
10px;
border-radius: 999px;
color:
#927F69;
background:
rgba(244,166,65,.05);
border:
1px solid
rgba(244,166,65,.13);
font-size: 6px;
font-weight: 800;
letter-spacing: .12em;
}
#mg-match-b06 .mg-b06-builder-status span {
width: 6px;
height: 6px;
border-radius: 50%;
background:
var(--mg-mango);
}
/* =========================================================
PROGRESS
========================================================= */
#mg-match-b06 .mg-b06-progress {
display: grid;
grid-template-columns:
repeat(5,1fr);
padding:
14px
19px;
border-bottom:
1px solid
var(--mg-line);
background:
#17130F;
}
#mg-match-b06 .mg-b06-progress-step {
min-width: 0;
padding:
7px
5px;
border: 0;
cursor: pointer;
display: grid;
justify-items: center;
gap: 4px;
color:
#6F6356;
background: transparent;
font-family: inherit;
transition:
color .2s ease;
}
#mg-match-b06 .mg-b06-progress-step i {
width: 27px;
height: 27px;
border-radius: 8px;
display: grid;
place-items: center;
color:
#796B5C;
background:
rgba(255,255,255,.03);
border:
1px solid
rgba(255,245,230,.06);
font-style: normal;
font-size: 7px;
font-weight: 800;
transition:
all .2s ease;
}
#mg-match-b06 .mg-b06-progress-step span {
font-size: 7px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
#mg-match-b06 .mg-b06-progress-step.is-active {
color:
#DECDB8;
}
#mg-match-b06 .mg-b06-progress-step.is-active i {
color:
#251607;
background:
var(--mg-mango);
border-color:
var(--mg-mango);
}
#mg-match-b06 .mg-b06-progress-step.is-complete i {
color:
var(--mg-mango);
border-color:
rgba(244,166,65,.25);
}
/* =========================================================
WORKSPACE
========================================================= */
#mg-match-b06 .mg-b06-workspace {
display: grid;
grid-template-columns:
.82fr
1.18fr;
min-height: 540px;
}
/* =========================================================
CONTROL PANEL
========================================================= */
#mg-match-b06 .mg-b06-control-panel {
padding:
clamp(27px,4vw,43px);
border-right:
1px solid
var(--mg-line);
display: flex;
align-items: center;
background:
radial-gradient(
circle at 5% 0,
rgba(244,166,65,.055),
transparent 22rem
),
var(--mg-brown);
}
#mg-match-b06 .mg-b06-control-inner {
width: 100%;
transition:
opacity .17s ease,
transform .17s ease;
}
#mg-match-b06 .mg-b06-control-inner.is-changing {
opacity: 0;
transform:
translateY(6px);
}
#mg-match-b06 .mg-b06-control-kicker {
margin-bottom: 10px;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b06 .mg-b06-control-inner h3 {
margin:
0
0
13px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
34px,
4vw,
47px
);
font-weight: 500;
line-height: .97;
}
#mg-match-b06 .mg-b06-control-inner > p {
margin:
0
0
24px;
color:
#9D8D7B;
font-size: 10px;
line-height: 1.6;
}
/* =========================================================
OPTION BUTTONS
========================================================= */
#mg-match-b06 .mg-b06-options {
display: grid;
gap: 8px;
}
#mg-match-b06 .mg-b06-option {
min-height: 50px;
padding:
0
13px;
border-radius: 13px;
border:
1px solid
rgba(255,245,230,.07);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color:
#B8A994;
background:
rgba(255,255,255,.025);
font-family: inherit;
font-size: 9px;
text-align: left;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease;
}
#mg-match-b06 .mg-b06-option:hover {
color:
var(--mg-cream);
border-color:
rgba(244,166,65,.20);
}
#mg-match-b06 .mg-b06-option.is-selected {
color:
#F1DFC8;
background:
rgba(244,166,65,.075);
border-color:
rgba(244,166,65,.27);
}
#mg-match-b06 .mg-b06-option span {
color:
#746759;
font-size: 8px;
}
#mg-match-b06 .mg-b06-option.is-selected span {
color:
var(--mg-mango);
}
/* =========================================================
CONTINUE BUTTON
========================================================= */
#mg-match-b06 .mg-b06-next {
width: 100%;
min-height: 47px;
margin-top: 18px;
border: 0;
border-radius: 999px;
cursor: pointer;
color:
#251607;
background:
var(--mg-mango);
font-family: inherit;
font-size: 9px;
font-weight: 800;
transition:
transform .2s ease,
box-shadow .2s ease;
}
#mg-match-b06 .mg-b06-next:hover {
transform:
translateY(-2px);
box-shadow:
0
13px
29px
rgba(244,166,65,.18);
}
/* =========================================================
MATCH CONFIRMATION
========================================================= */
#mg-match-b06 .mg-b06-match-card {
padding: 20px;
border-radius: 18px;
background:
rgba(244,166,65,.065);
border:
1px solid
rgba(244,166,65,.16);
}
#mg-match-b06 .mg-b06-match-card span {
display: block;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .12em;
}
#mg-match-b06 .mg-b06-match-card strong {
display: block;
margin:
8px
0
5px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 31px;
font-weight: 500;
}
#mg-match-b06 .mg-b06-match-card p {
margin: 0;
color:
#988775;
font-size: 9px;
line-height: 1.5;
}
/* =========================================================
PLACE CARDS
========================================================= */
#mg-match-b06 .mg-b06-place-list {
display: grid;
gap: 8px;
}
#mg-match-b06 .mg-b06-place {
padding: 12px;
border-radius: 13px;
display: grid;
grid-template-columns:
auto
1fr
auto;
gap: 10px;
align-items: center;
color:
#A99A87;
background:
rgba(255,255,255,.024);
border:
1px solid
rgba(255,245,230,.06);
}
#mg-match-b06 .mg-b06-place > span {
width: 32px;
height: 32px;
border-radius: 9px;
display: grid;
place-items: center;
background:
rgba(244,166,65,.07);
}
#mg-match-b06 .mg-b06-place strong {
display: block;
color:
#E4D5C2;
font-size: 9px;
}
#mg-match-b06 .mg-b06-place small {
color:
#776A5B;
font-size: 7px;
}
#mg-match-b06 .mg-b06-place i {
color:
var(--mg-mango);
font-style: normal;
}
/* =========================================================
PREVIEW PANEL
========================================================= */
#mg-match-b06 .mg-b06-preview-panel {
padding:
clamp(27px,4vw,42px);
background:
radial-gradient(
circle at 90% 10%,
rgba(244,166,65,.07),
transparent 24rem
),
#F9EEDC;
color:
var(--mg-black);
}
#mg-match-b06 .mg-b06-preview-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
}
#mg-match-b06 .mg-b06-preview-top > div:first-child > span {
display: block;
margin-bottom: 4px;
color:
#A48C71;
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b06 .mg-b06-preview-top strong {
color:
var(--mg-black);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 27px;
font-weight: 600;
}
#mg-match-b06 .mg-b06-match-chip {
padding:
7px
10px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 5px;
color:
#7A4B17;
background:
rgba(216,121,22,.10);
font-size: 7px;
font-weight: 800;
}
#mg-match-b06 .mg-b06-match-chip span {
color:
var(--mg-mango-dark);
}
/* =========================================================
SUMMARY
========================================================= */
#mg-match-b06 .mg-b06-summary {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 8px;
margin-bottom: 15px;
}
#mg-match-b06 .mg-b06-summary > div {
padding:
12px;
border-radius: 12px;
background:
rgba(33,28,23,.055);
}
#mg-match-b06 .mg-b06-summary span {
display: block;
margin-bottom: 4px;
color:
#9B856C;
font-size: 6px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .09em;
}
#mg-match-b06 .mg-b06-summary strong {
color:
#33271D;
font-size: 9px;
}
/* =========================================================
ITINERARY AREA
========================================================= */
#mg-match-b06 .mg-b06-itinerary {
min-height: 350px;
padding: 18px;
border-radius: 18px;
background:
rgba(255,255,255,.49);
border:
1px solid
rgba(33,28,23,.07);
transition:
opacity .18s ease;
}
#mg-match-b06 .mg-b06-empty {
min-height: 310px;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
}
#mg-match-b06 .mg-b06-empty-icon {
width: 50px;
height: 50px;
margin-bottom: 13px;
border-radius: 15px;
display: grid;
place-items: center;
color:
var(--mg-mango-dark);
background:
rgba(216,121,22,.09);
}
#mg-match-b06 .mg-b06-empty strong {
color:
#392B20;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 24px;
font-weight: 600;
}
#mg-match-b06 .mg-b06-empty p {
max-width: 310px;
margin:
7px
0
0;
color:
#967F67;
font-size: 8px;
line-height: 1.5;
}
/* =========================================================
ITINERARY DAYS
========================================================= */
#mg-match-b06 .mg-b06-days {
display: grid;
gap: 8px;
}
#mg-match-b06 .mg-b06-day {
padding:
13px;
border-radius: 12px;
display: grid;
grid-template-columns:
45px
1fr;
gap: 11px;
align-items: center;
background:
rgba(33,28,23,.045);
border:
1px solid
rgba(33,28,23,.05);
}
#mg-match-b06 .mg-b06-day-number {
color:
var(--mg-mango-dark);
font-size: 7px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
#mg-match-b06 .mg-b06-day strong {
display: block;
color:
#33271D;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 17px;
font-weight: 600;
}
#mg-match-b06 .mg-b06-day small {
display: block;
margin-top: 2px;
color:
#967F67;
font-size: 7px;
}
/* =========================================================
DIFFERENCE
========================================================= */
#mg-match-b06 .mg-b06-difference {
margin-top:
clamp(55px,7vw,85px);
display: grid;
grid-template-columns:
.8fr
1.2fr;
gap:
clamp(35px,6vw,75px);
align-items: center;
}
#mg-match-b06 .mg-b06-eyebrow-left::after {
display: none;
}
#mg-match-b06 .mg-b06-difference-copy h3 {
margin:
0
0
16px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
35px,
4.5vw,
51px
);
font-weight: 500;
line-height: .98;
}
#mg-match-b06 .mg-b06-difference-copy p {
margin: 0;
color:
#968775;
font-size: 11px;
line-height: 1.7;
}
/* =========================================================
DIFFERENCE GRID
========================================================= */
#mg-match-b06 .mg-b06-difference-grid {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 9px;
}
#mg-match-b06 .mg-b06-difference-grid article {
min-height: 135px;
padding: 17px;
border-radius: 16px;
background:
rgba(255,255,255,.023);
border:
1px solid
rgba(255,245,230,.065);
}
#mg-match-b06 .mg-b06-mini-label {
display: block;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 6px;
font-weight: 800;
letter-spacing: .13em;
}
#mg-match-b06 .mg-b06-difference-grid strong {
display: block;
margin-bottom: 5px;
color:
#E4D6C2;
font-size: 11px;
}
#mg-match-b06 .mg-b06-difference-grid p {
margin: 0;
color:
#776A5C;
font-size: 8px;
line-height: 1.5;
}
/* =========================================================
CLOSING BAND
========================================================= */
#mg-match-b06 .mg-b06-close {
margin-top:
clamp(48px,6vw,70px);
padding:
clamp(27px,4vw,39px);
border-radius: 26px;
display: grid;
grid-template-columns:
1fr
auto;
gap: 30px;
align-items: center;
color:
#261707;
background:
radial-gradient(
circle at 86% 14%,
rgba(255,255,255,.19),
transparent 15rem
),
linear-gradient(
135deg,
var(--mg-mango-dark),
var(--mg-mango)
);
}
#mg-match-b06 .mg-b06-close > div > span {
color:
rgba(38,23,7,.62);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b06 .mg-b06-close h3 {
max-width: 650px;
margin:
6px
0
7px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
30px,
4vw,
44px
);
font-weight: 600;
line-height: .97;
}
#mg-match-b06 .mg-b06-close p {
max-width: 590px;
margin: 0;
color:
rgba(38,23,7,.68);
font-size: 9px;
line-height: 1.5;
}
#mg-match-b06 .mg-b06-close-btn {
min-height: 49px;
padding:
0
19px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color:
var(--mg-cream);
background:
var(--mg-black);
font-family: inherit;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
transition:
transform .2s ease;
}
#mg-match-b06 .mg-b06-close-btn:hover {
transform:
translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
#mg-match-b06 .mg-b06-product-map {
grid-template-columns:
1fr;
}
#mg-match-b06 .mg-b06-product-arrow {
transform:
rotate(90deg);
min-height: 45px;
align-content: center;
}
#mg-match-b06 .mg-b06-product-arrow small {
display: none;
}
#mg-match-b06 .mg-b06-workspace {
grid-template-columns:
1fr;
}
#mg-match-b06 .mg-b06-control-panel {
border-right: 0;
border-bottom:
1px solid
var(--mg-line);
}
#mg-match-b06 .mg-b06-difference {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b06 {
padding:
72px
18px;
}
#mg-match-b06 .mg-b06-builder-head {
align-items:
flex-start;
}
#mg-match-b06 .mg-b06-progress {
padding:
12px
5px;
}
#mg-match-b06 .mg-b06-progress-step span {
font-size: 6px;
}
#mg-match-b06 .mg-b06-control-panel {
padding:
28px
20px;
}
#mg-match-b06 .mg-b06-preview-panel {
padding:
25px
16px;
}
#mg-match-b06 .mg-b06-summary {
grid-template-columns:
1fr;
}
#mg-match-b06 .mg-b06-difference-grid {
grid-template-columns:
1fr;
}
#mg-match-b06 .mg-b06-close {
grid-template-columns:
1fr;
}
#mg-match-b06 .mg-b06-close-btn {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b06 * {
transition: none !important;
}
}
/* =========================================================
MANGO MATCH — B06
FROM MATCH TO GETAWAY
JAVASCRIPT TAB
========================================================= */
(function () {
"use strict";
const block =
document.getElementById(
"mg-match-b06"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const progressButtons =
block.querySelectorAll(
"[data-mg-b06-step]"
);
const control =
block.querySelector(
"#mgB06Control"
);
const previewTitle =
block.querySelector(
"#mgB06PreviewTitle"
);
const lengthOutput =
block.querySelector(
"#mgB06Length"
);
const moodOutput =
block.querySelector(
"#mgB06Mood"
);
const itinerary =
block.querySelector(
"#mgB06Itinerary"
);
const joinButton =
block.querySelector(
"#mgB06Join"
);
/* =========================================================
STATE
========================================================= */
const state = {
step: 0,
length: null,
mood: null,
stay: null,
experiences: []
};
/* =========================================================
HELPERS
========================================================= */
function setProgress(index) {
state.step =
index;
progressButtons.forEach(
function (
button,
buttonIndex
) {
button.classList.toggle(
"is-active",
buttonIndex === index
);
button.classList.toggle(
"is-complete",
buttonIndex < index
);
}
);
}
function transitionControl(
html
) {
control.classList.add(
"is-changing"
);
setTimeout(
function () {
control.innerHTML =
html;
control.classList.remove(
"is-changing"
);
attachControlEvents();
},
160
);
}
function updateSummary() {
lengthOutput.textContent =
state.length
? state.length
: "—";
moodOutput.textContent =
state.mood
? state.mood
: "—";
}
/* =========================================================
STEP 0 — MATCH
========================================================= */
function renderMatchStep() {
setProgress(0);
transitionControl(`
`);
}
/* =========================================================
STEP 4 — DAYS
========================================================= */
function renderDaysStep() {
setProgress(4);
transitionControl(`
`;
}
/* =========================================================
CONTROL EVENTS
========================================================= */
function attachControlEvents() {
/* NEXT */
control
.querySelectorAll(
"[data-b06-next]"
)
.forEach(
function (button) {
button.addEventListener(
"click",
function () {
const next =
button.dataset.b06Next;
if (
next === "trip"
) {
renderTripStep();
}
if (
next === "mood"
) {
if (!state.length) {
state.length =
"5 Days";
updateSummary();
}
renderMoodStep();
}
if (
next === "places"
) {
if (!state.mood) {
state.mood =
"Slow + Local";
updateSummary();
}
renderPlacesStep();
}
if (
next === "days"
) {
renderDaysStep();
}
if (
next === "restart"
) {
state.length =
null;
state.mood =
null;
state.stay =
null;
state.experiences =
[];
updateSummary();
itinerary.innerHTML = `
MANGO MATCH
Fast decisions
BUILDER
Deliberate choices
MANGO MATCH
Destination signals
BUILDER
Real trip structure
/* =========================================================
MANGO MATCH — B07
TRUST / EXPLAINABLE DISCOVERY
CSS TAB
========================================================= */
/* =========================================================
ROOT
========================================================= */
#mg-match-b07 {
--mg-black: #14110E;
--mg-black-2: #18140F;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-brown-3: #362A21;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-mango-light: #FFC777;
--mg-cream: #FFF5E6;
--mg-cream-2: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-dark: #817467;
--mg-line: rgba(255,245,230,.10);
position: relative;
overflow: hidden;
padding:
clamp(82px,9vw,130px)
22px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 13% 22%,
rgba(244,166,65,.06),
transparent 31rem
),
linear-gradient(
180deg,
#17130F,
var(--mg-black)
);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b07 * {
box-sizing: border-box;
}
/* =========================================================
WRAP
========================================================= */
#mg-match-b07 .mg-b07-wrap {
position: relative;
z-index: 2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
INTRO
========================================================= */
#mg-match-b07 .mg-b07-intro {
max-width: 830px;
margin:
0 auto
clamp(45px,6vw,70px);
text-align: center;
}
#mg-match-b07 .mg-b07-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b07 .mg-b07-eyebrow::before,
#mg-match-b07 .mg-b07-eyebrow::after {
content: "";
width: 27px;
height: 1px;
background:
currentColor;
}
#mg-match-b07 .mg-b07-intro h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
45px,
6vw,
73px
);
font-weight: 500;
line-height: .96;
letter-spacing: -.035em;
}
#mg-match-b07 .mg-b07-intro h2 span {
color:
var(--mg-mango);
}
#mg-match-b07 .mg-b07-intro p {
max-width: 720px;
margin: 0 auto;
color:
#C0B19D;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height: 1.75;
}
/* =========================================================
PRINCIPLES
========================================================= */
#mg-match-b07 .mg-b07-principles {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 9px;
margin-bottom: 20px;
}
#mg-match-b07 .mg-b07-principle {
min-height: 137px;
padding: 16px;
border-radius: 17px;
border:
1px solid
rgba(255,245,230,.07);
cursor: pointer;
display: grid;
grid-template-columns:
auto
1fr
auto;
gap: 11px;
align-items: start;
color:
#A99A88;
background:
rgba(255,255,255,.022);
font-family: inherit;
text-align: left;
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease;
}
#mg-match-b07 .mg-b07-principle:hover {
transform:
translateY(-2px);
border-color:
rgba(244,166,65,.17);
}
#mg-match-b07 .mg-b07-principle.is-active {
background:
rgba(244,166,65,.065);
border-color:
rgba(244,166,65,.25);
}
#mg-match-b07 .mg-b07-number {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-size: 7px;
font-weight: 800;
}
#mg-match-b07 .mg-b07-principle strong {
display: block;
margin:
4px
0
5px;
color:
#E1D2BF;
font-size: 10px;
}
#mg-match-b07 .mg-b07-principle small {
display: block;
color:
#75695B;
font-size: 8px;
line-height: 1.45;
}
#mg-match-b07 .mg-b07-principle i {
margin-top: 8px;
color:
#655A4E;
font-style: normal;
font-size: 10px;
}
#mg-match-b07 .mg-b07-principle.is-active i {
color:
var(--mg-mango);
}
/* =========================================================
DEMO
========================================================= */
#mg-match-b07 .mg-b07-demo {
display: grid;
grid-template-columns:
.82fr
1.18fr;
overflow: hidden;
border-radius: 30px;
border:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.02);
box-shadow:
0
32px
90px
rgba(0,0,0,.24);
}
/* =========================================================
CARD COLUMN
========================================================= */
#mg-match-b07 .mg-b07-card-column {
padding:
clamp(25px,4vw,40px);
border-right:
1px solid
var(--mg-line);
background:
var(--mg-brown);
}
#mg-match-b07 .mg-b07-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
#mg-match-b07 .mg-b07-card-head span {
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b07 .mg-b07-card-head small {
color:
#6F6357;
font-size: 7px;
}
/* =========================================================
COUNTRY CARD
========================================================= */
#mg-match-b07 .mg-b07-country-card {
position: relative;
min-height: 380px;
overflow: hidden;
border-radius: 23px;
background:
linear-gradient(
145deg,
#315346,
#819B69 55%,
#C8A46B
);
box-shadow:
0
24px
55px
rgba(0,0,0,.25);
}
#mg-match-b07 .mg-b07-country-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 24%,
rgba(10,9,7,.05) 47%,
rgba(10,9,7,.91) 100%
);
}
#mg-match-b07 .mg-b07-sun {
position: absolute;
top: 50px;
right: 50px;
width: 90px;
height: 90px;
border-radius: 50%;
background:
rgba(255,231,165,.73);
box-shadow:
0
0
60px
rgba(255,225,142,.20);
}
#mg-match-b07 .mg-b07-land {
position: absolute;
left: -10%;
right: -10%;
}
#mg-match-b07 .mg-b07-land-back {
bottom: 120px;
height: 135px;
opacity: .45;
background:
#668071;
clip-path:
polygon(
0 68%,
15% 45%,
31% 60%,
46% 35%,
62% 54%,
77% 39%,
100% 61%,
100% 100%,
0 100%
);
}
#mg-match-b07 .mg-b07-land-front {
bottom: 70px;
height: 170px;
background:
#1E372F;
clip-path:
polygon(
0 67%,
9% 50%,
20% 60%,
33% 38%,
46% 53%,
62% 29%,
79% 48%,
100% 63%,
100% 100%,
0 100%
);
}
#mg-match-b07 .mg-b07-card-overlay {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
padding: 23px;
}
#mg-match-b07 .mg-b07-card-tags {
margin-bottom: 5px;
color:
#F5CA87;
font-size: 7px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
}
#mg-match-b07 .mg-b07-card-overlay h3 {
margin:
0
0
5px;
color: white;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
37px,
4vw,
48px
);
font-weight: 500;
line-height: 1;
}
#mg-match-b07 .mg-b07-card-overlay p {
margin: 0;
color:
#DCCBB6;
font-size: 8px;
}
#mg-match-b07 .mg-b07-editorial-badge {
position: absolute;
z-index: 4;
top: 14px;
left: 14px;
padding:
6px
8px;
border-radius: 999px;
color:
#F2D3A4;
background:
rgba(20,17,14,.63);
border:
1px solid
rgba(255,245,230,.11);
backdrop-filter:
blur(10px);
font-size: 6px;
font-weight: 800;
letter-spacing: .08em;
}
/* =========================================================
WHY BUTTON
========================================================= */
#mg-match-b07 .mg-b07-why-btn {
width: 100%;
min-height: 48px;
margin-top: 12px;
padding:
0
15px;
border-radius: 999px;
border:
1px solid
rgba(244,166,65,.18);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color:
#E9D9C5;
background:
rgba(244,166,65,.055);
font-family: inherit;
font-size: 9px;
font-weight: 800;
transition:
background .2s ease,
transform .2s ease;
}
#mg-match-b07 .mg-b07-why-btn:hover {
transform:
translateY(-2px);
background:
rgba(244,166,65,.09);
}
#mg-match-b07 .mg-b07-why-btn span {
color:
var(--mg-mango);
}
/* =========================================================
EXPLANATION
========================================================= */
#mg-match-b07 .mg-b07-explanation {
padding:
clamp(32px,5vw,58px);
display: flex;
align-items: center;
background:
radial-gradient(
circle at 90% 5%,
rgba(244,166,65,.07),
transparent 24rem
),
#191511;
}
#mg-match-b07 .mg-b07-explanation-inner {
width: 100%;
transition:
opacity .18s ease,
transform .18s ease;
}
#mg-match-b07 .mg-b07-explanation-inner.is-changing {
opacity: 0;
transform:
translateY(6px);
}
#mg-match-b07 .mg-b07-explain-kicker {
display: block;
margin-bottom: 10px;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .15em;
}
#mg-match-b07 .mg-b07-explanation h3 {
max-width: 570px;
margin:
0
0
15px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
35px,
4vw,
49px
);
font-weight: 500;
line-height: .98;
}
#mg-match-b07 .mg-b07-explanation-inner > p {
max-width: 570px;
margin:
0
0
27px;
color:
#988978;
font-size: 10px;
line-height: 1.65;
}
/* =========================================================
SIGNALS
========================================================= */
#mg-match-b07 .mg-b07-signal-list {
display: grid;
gap: 13px;
}
#mg-match-b07 .mg-b07-signal-top {
display: flex;
justify-content: space-between;
gap: 15px;
margin-bottom: 6px;
color:
#A89987;
font-size: 8px;
}
#mg-match-b07 .mg-b07-signal-top strong {
color:
#C69760;
font-size: 7px;
}
#mg-match-b07 .mg-b07-bar {
height: 6px;
overflow: hidden;
border-radius: 999px;
background:
rgba(255,255,255,.05);
}
#mg-match-b07 .mg-b07-bar i {
display: block;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
var(--mg-mango-dark),
var(--mg-mango)
);
}
/* =========================================================
REASON
========================================================= */
#mg-match-b07 .mg-b07-reason {
margin-top: 24px;
padding-top: 19px;
border-top:
1px solid
rgba(255,245,230,.07);
display: flex;
align-items: flex-start;
gap: 11px;
}
#mg-match-b07 .mg-b07-reason > span {
flex: 0 0 auto;
width: 31px;
height: 31px;
border-radius: 9px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-size: 9px;
}
#mg-match-b07 .mg-b07-reason strong {
display: block;
margin-bottom: 3px;
color:
#E1D2BE;
font-size: 9px;
}
#mg-match-b07 .mg-b07-reason p {
margin: 0;
color:
#786B5D;
font-size: 8px;
line-height: 1.5;
}
/* =========================================================
COMMERCIAL SECTION
========================================================= */
#mg-match-b07 .mg-b07-commercial {
margin-top:
clamp(
55px,
7vw,
85px
);
display: grid;
grid-template-columns:
.9fr
1.1fr;
gap:
clamp(
35px,
6vw,
75px
);
align-items: center;
}
#mg-match-b07 .mg-b07-eyebrow-left::after {
display: none;
}
#mg-match-b07 .mg-b07-commercial-copy h3 {
margin:
0
0
16px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
35px,
4.5vw,
52px
);
font-weight: 500;
line-height: .98;
}
#mg-match-b07 .mg-b07-commercial-copy p {
margin: 0;
color:
#938474;
font-size: 11px;
line-height: 1.7;
}
/* =========================================================
DISCLOSURE DEMO
========================================================= */
#mg-match-b07 .mg-b07-disclosure-demo {
display: grid;
gap: 9px;
}
#mg-match-b07 .mg-b07-feature-card {
padding: 19px;
border-radius: 18px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,245,230,.07);
}
#mg-match-b07 .mg-b07-feature-top {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 17px;
border-bottom:
1px solid
rgba(255,245,230,.06);
}
#mg-match-b07 .mg-b07-feature-top > span {
font-size: 31px;
}
#mg-match-b07 .mg-b07-feature-top strong {
display: block;
color:
#E5D6C2;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 23px;
font-weight: 500;
}
#mg-match-b07 .mg-b07-feature-top small {
color:
#76695C;
font-size: 7px;
}
#mg-match-b07 .mg-b07-feature-footer {
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
#mg-match-b07 .mg-b07-feature-label {
padding:
6px
8px;
border-radius: 999px;
color:
#C49054;
background:
rgba(244,166,65,.06);
border:
1px solid
rgba(244,166,65,.13);
font-size: 6px;
font-weight: 800;
}
#mg-match-b07 .mg-b07-feature-footer button {
border: 0;
padding: 4px;
cursor: pointer;
color:
#8C7C6B;
background: transparent;
font-family: inherit;
font-size: 7px;
text-decoration: underline;
text-underline-offset: 3px;
}
#mg-match-b07 .mg-b07-feature-footer button:hover {
color:
var(--mg-mango);
}
/* =========================================================
DISCLOSURE BOX
========================================================= */
#mg-match-b07 .mg-b07-disclosure-box {
padding: 17px;
border-radius: 15px;
background:
rgba(244,166,65,.055);
border:
1px solid
rgba(244,166,65,.14);
}
#mg-match-b07 .mg-b07-disclosure-box strong {
display: block;
margin-bottom: 5px;
color:
#E6D5BF;
font-size: 9px;
}
#mg-match-b07 .mg-b07-disclosure-box p {
margin: 0;
color:
#8A7967;
font-size: 8px;
line-height: 1.55;
}
/* =========================================================
CONTROL GRID
========================================================= */
#mg-match-b07 .mg-b07-control-grid {
margin-top:
clamp(
50px,
6vw,
72px
);
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 9px;
}
#mg-match-b07 .mg-b07-control-grid article {
min-height: 175px;
padding: 18px;
border-radius: 17px;
background:
rgba(255,255,255,.023);
border:
1px solid
rgba(255,245,230,.065);
}
#mg-match-b07 .mg-b07-control-grid article > span {
width: 36px;
height: 36px;
margin-bottom: 29px;
border-radius: 10px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
}
#mg-match-b07 .mg-b07-control-grid strong {
display: block;
margin-bottom: 6px;
color:
#E2D3BF;
font-size: 10px;
}
#mg-match-b07 .mg-b07-control-grid p {
margin: 0;
color:
#75685B;
font-size: 8px;
line-height: 1.5;
}
/* =========================================================
CLOSE
========================================================= */
#mg-match-b07 .mg-b07-close {
margin-top:
clamp(
45px,
6vw,
65px
);
padding:
clamp(
28px,
4vw,
39px
);
border-radius: 26px;
display: grid;
grid-template-columns:
1fr
auto;
gap: 30px;
align-items: center;
color:
#261707;
background:
radial-gradient(
circle at 84% 10%,
rgba(255,255,255,.20),
transparent 15rem
),
linear-gradient(
135deg,
var(--mg-mango-dark),
var(--mg-mango)
);
}
#mg-match-b07 .mg-b07-close-label {
color:
rgba(38,23,7,.61);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b07 .mg-b07-close h3 {
max-width: 700px;
margin:
6px
0
0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
30px,
4vw,
45px
);
font-weight: 600;
line-height: .97;
}
#mg-match-b07 .mg-b07-close button {
min-height: 48px;
padding:
0
18px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color:
var(--mg-cream);
background:
var(--mg-black);
font-family: inherit;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
transition:
transform .2s ease;
}
#mg-match-b07 .mg-b07-close button:hover {
transform:
translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
#mg-match-b07 .mg-b07-principles {
grid-template-columns:
repeat(2,1fr);
}
#mg-match-b07 .mg-b07-demo {
grid-template-columns:
1fr;
}
#mg-match-b07 .mg-b07-card-column {
border-right: 0;
border-bottom:
1px solid
var(--mg-line);
}
#mg-match-b07 .mg-b07-country-card {
max-width: 480px;
margin: 0 auto;
}
#mg-match-b07 .mg-b07-why-btn {
max-width: 480px;
margin:
12px
auto
0;
}
#mg-match-b07 .mg-b07-commercial {
grid-template-columns:
1fr;
}
#mg-match-b07 .mg-b07-control-grid {
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b07 {
padding:
72px
18px;
}
#mg-match-b07 .mg-b07-principles {
grid-template-columns:
1fr;
}
#mg-match-b07 .mg-b07-principle {
min-height: auto;
}
#mg-match-b07 .mg-b07-card-column {
padding:
24px
16px;
}
#mg-match-b07 .mg-b07-explanation {
padding:
31px
21px;
}
#mg-match-b07 .mg-b07-feature-footer {
align-items:
flex-start;
flex-direction:
column;
}
#mg-match-b07 .mg-b07-control-grid {
grid-template-columns:
1fr;
}
#mg-match-b07 .mg-b07-control-grid article {
min-height: auto;
}
#mg-match-b07 .mg-b07-control-grid article > span {
margin-bottom: 18px;
}
#mg-match-b07 .mg-b07-close {
grid-template-columns:
1fr;
}
#mg-match-b07 .mg-b07-close button {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b07 * {
transition: none !important;
}
}
/* =========================================================
MANGO MATCH — B07
TRUST / EXPLAINABLE DISCOVERY
JAVASCRIPT TAB
========================================================= */
(function () {
"use strict";
const block =
document.getElementById(
"mg-match-b07"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const principleButtons =
block.querySelectorAll(
"[data-mg-b07-principle]"
);
const explanation =
block.querySelector(
"#mgB07Explanation"
);
const whyButton =
block.querySelector(
"#mgB07Why"
);
const disclosureButton =
block.querySelector(
"#mgB07Disclosure"
);
const disclosureBox =
block.querySelector(
"#mgB07DisclosureBox"
);
const joinButton =
block.querySelector(
"#mgB07Join"
);
/* =========================================================
PRINCIPLE CONTENT
========================================================= */
const principles = {
fit: {
kicker:
"SUITABILITY FIRST",
title:
"Greece fits signals already emerging from your choices.",
copy:
"Mango should be able to show the reasoning behind a recommendation without pretending that a percentage is magic.",
reasonTitle:
"Recommendation reason",
reasonCopy:
"Greece overlaps with several themes you repeatedly showed interest in during discovery."
},
explain: {
kicker:
"EXPLAINABLE DISCOVERY",
title:
"A recommendation should be understandable.",
copy:
"If Mango believes a destination deserves your attention, you should be able to inspect the signals contributing to that recommendation.",
reasonTitle:
"Why am I seeing this?",
reasonCopy:
"Because your previous choices showed repeated interest in food, coast, culture and slower travel."
},
disclose: {
kicker:
"COMMERCIAL CLARITY",
title:
"Featured relationships should never need to hide.",
copy:
"A destination, stay or experience may participate commercially in Mango Getaway. That relationship should be disclosed rather than disguised as purely organic discovery.",
reasonTitle:
"Commercial status is separate information.",
reasonCopy:
"A partnership can affect visibility while still remaining subject to Mango's relevance and suitability controls."
},
control: {
kicker:
"TRAVELER CONTROL",
title:
"The stack belongs to the traveler.",
copy:
"Interested, Not For Us, Save, Shuffle and Reset should each have predictable behavior. Mango should not quietly undo decisions to increase exposure.",
reasonTitle:
"Your decisions remain meaningful.",
reasonCopy:
"Previously judged cards stay decided until you explicitly restart or reset the current Match."
}
};
/* =========================================================
EXPLANATION RENDERER
========================================================= */
function renderPrinciple(
key
) {
const principle =
principles[key];
if (!principle) {
return;
}
principleButtons.forEach(
function (button) {
const active =
button.dataset.mgB07Principle ===
key;
button.classList.toggle(
"is-active",
active
);
}
);
explanation.classList.add(
"is-changing"
);
setTimeout(
function () {
explanation.innerHTML = `
${principle.kicker}
♥
Interested stays Interested
×
Not For Us stays decided
↻
Shuffle means unseen
◎
Ask why
/* =========================================================
MANGO MATCH — B08
BE PART OF THE JOURNEY
CSS TAB
========================================================= */
/* =========================================================
ROOT
========================================================= */
#mg-match-b08 {
--mg-black: #14110E;
--mg-black-2: #18140F;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-mango-light: #FFC878;
--mg-cream: #FFF5E6;
--mg-cream-2: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-dark: #817466;
--mg-line: rgba(255,245,230,.10);
position: relative;
overflow: hidden;
padding:
clamp(85px,10vw,140px)
22px
45px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 50% 20%,
rgba(244,166,65,.085),
transparent 36rem
),
linear-gradient(
180deg,
#17130F 0%,
#110E0B 100%
);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b08 * {
box-sizing: border-box;
}
/* =========================================================
WRAP
========================================================= */
#mg-match-b08 .mg-b08-wrap {
position: relative;
z-index: 2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
STORY
========================================================= */
#mg-match-b08 .mg-b08-story {
max-width: 900px;
margin:
0 auto
clamp(45px,6vw,72px);
text-align: center;
}
#mg-match-b08 .mg-b08-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b08 .mg-b08-eyebrow::before,
#mg-match-b08 .mg-b08-eyebrow::after {
content: "";
width: 27px;
height: 1px;
background:
currentColor;
}
#mg-match-b08 .mg-b08-story h2 {
margin:
0
0
21px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
45px,
6.3vw,
76px
);
font-weight: 500;
line-height: .95;
letter-spacing: -.035em;
}
#mg-match-b08 .mg-b08-story h2 span {
color:
var(--mg-mango);
}
#mg-match-b08 .mg-b08-story p {
max-width: 750px;
margin: 0 auto;
color:
#BEAF9C;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height: 1.75;
}
/* =========================================================
PATHS
========================================================= */
#mg-match-b08 .mg-b08-paths {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 10px;
margin-bottom: 18px;
}
#mg-match-b08 .mg-b08-path {
min-height: 245px;
padding: 21px;
border-radius: 21px;
border:
1px solid
rgba(255,245,230,.075);
cursor: pointer;
color:
var(--mg-cream);
background:
rgba(255,255,255,.022);
font-family: inherit;
text-align: left;
transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;
}
#mg-match-b08 .mg-b08-path:hover {
transform:
translateY(-3px);
border-color:
rgba(244,166,65,.20);
}
#mg-match-b08 .mg-b08-path.is-active {
border-color:
rgba(244,166,65,.34);
background:
linear-gradient(
145deg,
rgba(244,166,65,.09),
rgba(255,255,255,.02)
);
}
/* PATH TOP */
#mg-match-b08 .mg-b08-path-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 38px;
}
#mg-match-b08 .mg-b08-path-icon {
width: 44px;
height: 44px;
border-radius: 13px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.08);
border:
1px solid
rgba(244,166,65,.13);
}
#mg-match-b08 .mg-b08-path-check {
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
opacity: 0;
color:
#251607;
background:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
transform:
scale(.75);
transition:
opacity .2s ease,
transform .2s ease;
}
#mg-match-b08 .mg-b08-path.is-active
.mg-b08-path-check {
opacity: 1;
transform:
scale(1);
}
/* PATH COPY */
#mg-match-b08 .mg-b08-path-label {
display: block;
margin-bottom: 7px;
color:
var(--mg-mango);
font-size: 7px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b08 .mg-b08-path > strong {
display: block;
margin-bottom: 8px;
color:
#E8D9C6;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 27px;
font-weight: 500;
line-height: 1;
}
#mg-match-b08 .mg-b08-path p {
margin: 0;
color:
#817466;
font-size: 9px;
line-height: 1.55;
}
/* =========================================================
JOIN PANEL
========================================================= */
#mg-match-b08 .mg-b08-join-panel {
display: grid;
grid-template-columns:
1fr
.82fr;
min-height: 500px;
overflow: hidden;
border-radius: 30px;
border:
1px solid
var(--mg-line);
background:
var(--mg-brown);
box-shadow:
0
34px
90px
rgba(0,0,0,.25);
}
/* =========================================================
SELECTED SIDE
========================================================= */
#mg-match-b08 .mg-b08-selected {
padding:
clamp(
34px,
5vw,
60px
);
display: flex;
flex-direction: column;
justify-content: center;
border-right:
1px solid
var(--mg-line);
transition:
opacity .16s ease,
transform .16s ease;
}
#mg-match-b08 .mg-b08-selected.is-changing {
opacity: .25;
transform:
translateY(5px);
}
#mg-match-b08 .mg-b08-selected-label {
display: block;
margin-bottom: 12px;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .15em;
}
#mg-match-b08 .mg-b08-selected h3 {
max-width: 580px;
margin:
0
0
15px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
38px,
4.8vw,
56px
);
font-weight: 500;
line-height: .96;
}
#mg-match-b08 .mg-b08-selected > p {
max-width: 570px;
margin:
0
0
26px;
color:
#9C8D7B;
font-size: 11px;
line-height: 1.7;
}
/* =========================================================
POINTS
========================================================= */
#mg-match-b08 .mg-b08-selected-points {
display: grid;
gap: 9px;
margin-bottom: 28px;
}
#mg-match-b08 .mg-b08-selected-points > span {
display: flex;
align-items: center;
gap: 9px;
color:
#C6B7A4;
font-size: 9px;
}
#mg-match-b08 .mg-b08-selected-points i {
width: 23px;
height: 23px;
border-radius: 7px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-style: normal;
font-size: 7px;
}
/* =========================================================
PRIMARY CTA
========================================================= */
#mg-match-b08 .mg-b08-primary {
width: fit-content;
min-height: 51px;
padding:
0
21px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
color:
#251607;
background:
linear-gradient(
135deg,
var(--mg-mango),
var(--mg-mango-light)
);
font-family: inherit;
font-size: 10px;
font-weight: 800;
box-shadow:
0
14px
33px
rgba(244,166,65,.17);
transition:
transform .2s ease,
box-shadow .2s ease;
}
#mg-match-b08 .mg-b08-primary:hover {
transform:
translateY(-2px);
box-shadow:
0
18px
40px
rgba(244,166,65,.25);
}
#mg-match-b08 .mg-b08-note {
display: block;
margin-top: 13px;
color:
#6D6256;
font-size: 7px;
}
/* =========================================================
VISUAL
========================================================= */
#mg-match-b08 .mg-b08-visual {
position: relative;
overflow: hidden;
min-height: 500px;
display: grid;
place-items: center;
background:
radial-gradient(
circle,
rgba(244,166,65,.13),
rgba(244,166,65,.025) 38%,
transparent 69%
),
#18140F;
}
/* ORBITS */
#mg-match-b08 .mg-b08-orbit {
position: absolute;
border-radius: 50%;
border:
1px solid
rgba(244,166,65,.10);
}
#mg-match-b08 .mg-b08-orbit-one {
width: 330px;
height: 330px;
}
#mg-match-b08 .mg-b08-orbit-two {
width: 460px;
height: 460px;
border-color:
rgba(255,245,230,.045);
}
/* CENTER */
#mg-match-b08 .mg-b08-center {
position: relative;
z-index: 2;
width: 205px;
height: 205px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background:
linear-gradient(
145deg,
var(--mg-mango-dark),
var(--mg-mango)
);
color:
#251607;
box-shadow:
0
25px
65px
rgba(244,166,65,.20);
}
#mg-match-b08 .mg-b08-mango {
margin-bottom: 6px;
font-size: 25px;
}
#mg-match-b08 .mg-b08-center > span {
margin-bottom: 7px;
font-size: 7px;
font-weight: 900;
letter-spacing: .15em;
}
#mg-match-b08 .mg-b08-center > strong {
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 32px;
line-height: .84;
}
/* FLOAT CARDS */
#mg-match-b08 .mg-b08-float {
position: absolute;
z-index: 3;
min-width: 122px;
padding:
11px
13px;
border-radius: 14px;
display: flex;
align-items: center;
gap: 9px;
background:
rgba(33,28,23,.94);
border:
1px solid
rgba(255,245,230,.10);
box-shadow:
0
18px
40px
rgba(0,0,0,.22);
backdrop-filter:
blur(12px);
}
#mg-match-b08 .mg-b08-float > span {
color:
var(--mg-mango);
font-size: 14px;
}
#mg-match-b08 .mg-b08-float strong {
display: block;
color:
#E4D5C2;
font-size: 9px;
}
#mg-match-b08 .mg-b08-float small {
display: block;
margin-top: 1px;
color:
#776A5C;
font-size: 7px;
}
#mg-match-b08 .mg-b08-float-one {
top: 72px;
left: 33px;
}
#mg-match-b08 .mg-b08-float-two {
top: 145px;
right: 24px;
}
#mg-match-b08 .mg-b08-float-three {
bottom: 73px;
left: 54px;
}
/* =========================================================
MANIFESTO
========================================================= */
#mg-match-b08 .mg-b08-manifesto {
max-width: 850px;
margin:
clamp(65px,8vw,105px)
auto;
text-align: center;
}
#mg-match-b08 .mg-b08-manifesto > span {
display: block;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 8px;
font-weight: 800;
letter-spacing: .18em;
}
#mg-match-b08 .mg-b08-manifesto blockquote {
margin:
0
0
22px;
padding: 0;
border: 0;
color:
#E3D3BF;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
29px,
4vw,
45px
);
font-weight: 500;
line-height: 1.17;
}
#mg-match-b08 .mg-b08-manifesto blockquote em {
color:
var(--mg-mango);
font-style: normal;
}
#mg-match-b08 .mg-b08-brandline {
color:
#837667;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .14em;
}
/* =========================================================
FOOTER
========================================================= */
#mg-match-b08 .mg-b08-footer {
padding-top: 26px;
border-top:
1px solid
rgba(255,245,230,.07);
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
color:
#6D6256;
font-size: 8px;
}
#mg-match-b08 .mg-b08-footer nav {
display: flex;
align-items: center;
gap: 17px;
}
#mg-match-b08 .mg-b08-footer a,
#mg-match-b08 .mg-b08-footer button {
border: 0;
padding: 3px;
cursor: pointer;
color:
#817365;
background: transparent;
font-family: inherit;
font-size: 8px;
text-decoration: none;
}
#mg-match-b08 .mg-b08-footer a:hover,
#mg-match-b08 .mg-b08-footer button:hover {
color:
var(--mg-mango);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 920px) {
#mg-match-b08 .mg-b08-paths {
grid-template-columns: 1fr;
}
#mg-match-b08 .mg-b08-path {
min-height: auto;
}
#mg-match-b08 .mg-b08-path-top {
margin-bottom: 22px;
}
#mg-match-b08 .mg-b08-join-panel {
grid-template-columns: 1fr;
}
#mg-match-b08 .mg-b08-selected {
border-right: 0;
border-bottom:
1px solid
var(--mg-line);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b08 {
padding:
72px
18px
35px;
}
#mg-match-b08 .mg-b08-selected {
padding:
31px
22px;
}
#mg-match-b08 .mg-b08-primary {
width: 100%;
justify-content: center;
}
#mg-match-b08 .mg-b08-visual {
min-height: 430px;
}
#mg-match-b08 .mg-b08-center {
width: 175px;
height: 175px;
}
#mg-match-b08 .mg-b08-orbit-one {
width: 270px;
height: 270px;
}
#mg-match-b08 .mg-b08-orbit-two {
width: 370px;
height: 370px;
}
#mg-match-b08 .mg-b08-float {
min-width: 105px;
padding:
9px
10px;
}
#mg-match-b08 .mg-b08-float-one {
left: 12px;
}
#mg-match-b08 .mg-b08-float-two {
right: 8px;
}
#mg-match-b08 .mg-b08-float-three {
left: 18px;
}
#mg-match-b08 .mg-b08-footer {
align-items: flex-start;
flex-direction: column;
}
#mg-match-b08 .mg-b08-footer nav {
flex-wrap: wrap;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b08 * {
transition: none !important;
}
}
/* =========================================================
MANGO MATCH — B08
BE PART OF THE JOURNEY
JAVASCRIPT TAB
========================================================= */
(function () {
"use strict";
const block =
document.getElementById(
"mg-match-b08"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const pathButtons =
block.querySelectorAll(
"[data-mg-b08-path]"
);
const selected =
block.querySelector(
".mg-b08-selected"
);
const selectedLabel =
block.querySelector(
"#mgB08SelectedLabel"
);
const selectedTitle =
block.querySelector(
"#mgB08SelectedTitle"
);
const selectedCopy =
block.querySelector(
"#mgB08SelectedCopy"
);
const selectedPoints =
block.querySelector(
"#mgB08SelectedPoints"
);
const joinButton =
block.querySelector(
"#mgB08Join"
);
const footerJoin =
block.querySelector(
"#mgB08FooterJoin"
);
/* =========================================================
SELECTED INTEREST
========================================================= */
let selectedPath =
"follow";
/* =========================================================
PATH CONTENT
========================================================= */
const paths = {
follow: {
label:
"FOLLOW THE JOURNEY",
title:
"Be there when Mango Match begins.",
copy:
"Join the early Mango Match list and we'll keep you close as the Discovery Round, Couple Match and Build Your Getaway experiences take shape.",
points: [
"Launch updates",
"Early-access opportunities",
"Mango Match development"
],
tester:
false
},
test: {
label:
"EARLY TESTER",
title:
"Help us find what still needs work.",
copy:
"Early testers may be invited into unfinished Mango Match builds to test destination cards, navigation, decision rules, mobile behavior and the overall discovery experience.",
points: [
"Preview early Match builds",
"Test new discovery features",
"Tell us what needs fixing"
],
tester:
true
},
couple: {
label:
"COUPLE MATCH TESTER",
title:
"Try Mango Match the way it was meant to be used.",
copy:
"Couple testers may be invited to complete private discovery rounds separately, reveal their mutual destinations and help us understand whether Couple Match genuinely creates a better travel conversation.",
points: [
"Two private discovery rounds",
"Test the Couple Match reveal",
"Help shape the shared experience"
],
tester:
true
}
};
/* =========================================================
RENDER POINTS
========================================================= */
function renderPoints(
items
) {
selectedPoints.innerHTML =
items
.map(
function (item) {
return `
✓
${item}
`;
}
)
.join("");
}
/* =========================================================
SET PATH
========================================================= */
function setPath(
pathName
) {
const path =
paths[pathName];
if (!path) {
return;
}
selectedPath =
pathName;
pathButtons.forEach(
function (button) {
const active =
button.dataset.mgB08Path ===
pathName;
button.classList.toggle(
"is-active",
active
);
}
);
selected.classList.add(
"is-changing"
);
setTimeout(
function () {
selectedLabel.textContent =
path.label;
selectedTitle.textContent =
path.title;
selectedCopy.textContent =
path.copy;
renderPoints(
path.points
);
selected.classList.remove(
"is-changing"
);
},
160
);
}
/* =========================================================
PATH EVENTS
========================================================= */
pathButtons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
setPath(
button.dataset.mgB08Path
);
}
);
}
);
/* =========================================================
OPEN B01 JOURNEY MODAL
========================================================= */
function openJourney() {
const journeyTrigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (journeyTrigger) {
journeyTrigger.click();
/*
If the visitor selected one of the testing paths,
automatically check B01's tester-interest checkbox.
*/
const testerCheckbox =
document.getElementById(
"mgJourneyTester"
);
if (
testerCheckbox &&
(
selectedPath === "test" ||
selectedPath === "couple"
)
) {
testerCheckbox.checked =
true;
}
return;
}
/* =====================================================
FALLBACK:
Scroll back to B01 if modal trigger cannot be found.
====================================================== */
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
}
/* =========================================================
MAIN CTA
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
openJourney
);
}
/* =========================================================
FOOTER CTA
========================================================= */
if (footerJoin) {
footerJoin.addEventListener(
"click",
openJourney
);
}
/* =========================================================
INITIALIZE
========================================================= */
setPath(
"follow"
);
})();
SOON
Mango Match · Coming Soon
Destination discovery for couples
Find somewhere you both want to go.
Discover separately. Match together. Create the journey. Mango Match is a new way for couples to explore destinations privately, reveal the places they both love, and turn a match into a real getaway.
✓
Join early access
✓
Help shape Mango Match
✓
Built for couples
We’re building this with couples, not just for them.
Early members may be invited to test new Match features,
destination rounds and Couple Match before public launch.
YOUR FIRST ROUND
10 destinations
No signup to start
🥭
MANGO MATCH
4 / 10
Culture · Coast · Food
Greece 🇬🇷
×
Not for us
♥
Interested
☆
Save
Currently in development
COUPLE MATCH
94% Match
You both chose Greece
The idea behind Mango Match
You don’t have to agree before you begin.
Choosing a getaway together can quickly become compromise, comparison and “I don’t mind, you choose.” Mango Match gives each of you room to notice what genuinely excites you first.
The Mango Match rhythm
STEP ONE · YOUR DISCOVERY
What catches your attention when nobody else is choosing?
Swipe through destinations by instinct. Interested or Not For Us. Your partner doesn’t need to see your decisions yet, and you don’t need to justify them.
🇬🇷
Greece
Interested
🇯🇵
Japan
Interested
🇮🇸
Iceland
Not for us
Your choices stay yours.
Mango doesn’t use your partner’s decisions to influence
what appears as your own preference.
First comes curiosity. Then comes the moment you discover: “You picked that too?”
${item.flag}
${item.country}
${item.status}
`;
}
)
.join("");
}
/* =========================================================
CHANGE STATE
========================================================= */
function setState(stateName) {
const state =
states[stateName];
if (!state) {
return;
}
/* active buttons */
tabs.forEach(
function (tab) {
const active =
tab.dataset.mgB02Tab ===
stateName;
tab.classList.toggle(
"is-active",
active
);
tab.setAttribute(
"aria-pressed",
active
? "true"
: "false"
);
}
);
/* fade old content */
panel.classList.add(
"is-changing"
);
setTimeout(
function () {
kicker.textContent =
state.kicker;
title.textContent =
state.title;
copy.textContent =
state.copy;
principleTitle.textContent =
state.principleTitle;
principleCopy.textContent =
state.principleCopy;
renderCards(
state.cards
);
panel.classList.remove(
"is-changing"
);
},
170
);
}
/* =========================================================
EVENTS
========================================================= */
tabs.forEach(
function (tab) {
tab.addEventListener(
"click",
function () {
setState(
tab.dataset.mgB02Tab
);
}
);
}
);
/* =========================================================
OPTIONAL AUTO-CYCLE
It will softly demonstrate the three states once the section
reaches the visitor's screen. Any manual click stops cycling.
========================================================= */
let autoIndex =
0;
const autoStates =
[
"you",
"partner",
"together"
];
let autoTimer =
null;
let userInteracted =
false;
tabs.forEach(
function (tab) {
tab.addEventListener(
"click",
function () {
userInteracted =
true;
if (autoTimer) {
clearInterval(
autoTimer
);
}
},
{
once: true
}
);
}
);
/* =========================================================
START AUTO-CYCLE WHEN VISIBLE
========================================================= */
if (
"IntersectionObserver"
in window
) {
const observer =
new IntersectionObserver(
function (entries) {
entries.forEach(
function (entry) {
if (
entry.isIntersecting &&
!autoTimer &&
!userInteracted
) {
autoTimer =
setInterval(
function () {
autoIndex =
(
autoIndex + 1
)
%
autoStates.length;
setState(
autoStates[
autoIndex
]
);
},
5000
);
observer.disconnect();
}
}
);
},
{
threshold:
.35
}
);
observer.observe(
block
);
}
})();
/* =========================================================
ROOT
========================================================= */
#mm-how {
--mg-black: #14110E;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-brown-3: #342A21;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-cream: #FFF5E6;
--mg-cream-soft: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-2: #88796A;
--mg-line: rgba(255,245,230,.11);
position: relative;
overflow: hidden;
padding:
clamp(80px, 9vw, 128px)
22px;
color:
var(--mg-cream);
background:
linear-gradient(
180deg,
#17130F 0%,
var(--mg-black) 100%
);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mm-how * {
box-sizing: border-box;
}
/* =========================================================
BACKGROUND
========================================================= */
#mm-how::before {
content: "";
position: absolute;
width: 700px;
height: 700px;
top: -360px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(244,166,65,.08),
transparent 68%
);
pointer-events: none;
}
/* =========================================================
WRAPPER
========================================================= */
#mm-how .mg-b03-wrap {
position: relative;
z-index: 2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
INTRO
========================================================= */
#mm-how .mg-b03-intro {
max-width: 800px;
margin:
0 auto
clamp(46px,6vw,74px);
text-align: center;
}
#mm-how .mg-b03-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mm-how .mg-b03-eyebrow::before,
#mm-how .mg-b03-eyebrow::after {
content: "";
width: 26px;
height: 1px;
background:
currentColor;
}
#mm-how .mg-b03-coming {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 15px;
padding:
6px 10px;
border-radius: 999px;
color:
#EBC48F;
background:
rgba(244,166,65,.07);
border:
1px solid
rgba(244,166,65,.18);
font-size: 9px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
#mm-how .mg-b03-coming i {
width: 6px;
height: 6px;
border-radius: 50%;
background:
var(--mg-mango);
font-style: normal;
}
#mm-how h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
46px,
6vw,
74px
);
font-weight: 500;
line-height: .96;
letter-spacing: -.035em;
}
#mm-how h2 span {
color:
var(--mg-mango);
}
#mm-how .mg-b03-intro p {
max-width: 690px;
margin:
0 auto;
color:
#C2B3A0;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height:
1.75;
}
/* =========================================================
PROGRESS NAV
========================================================= */
#mm-how .mg-b03-progress {
position: relative;
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 8px;
margin-bottom: 18px;
}
#mm-how .mg-b03-progress::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: 23px;
height: 1px;
background:
rgba(255,245,230,.08);
z-index: 0;
}
#mm-how .mg-b03-progress-fill {
position: absolute;
left: 8%;
top: 23px;
height: 1px;
width: 0;
background:
linear-gradient(
90deg,
var(--mg-mango-dark),
var(--mg-mango)
);
z-index: 1;
transition:
width .35s ease;
}
#mm-how .mg-b03-step-btn {
position: relative;
z-index: 2;
border: 0;
background: transparent;
cursor: pointer;
padding: 0 8px;
color:
var(--mg-muted-2);
font-family: inherit;
text-align: center;
}
#mm-how .mg-b03-step-circle {
width: 46px;
height: 46px;
margin:
0 auto
11px;
border-radius: 50%;
display: grid;
place-items: center;
color:
#958676;
background:
var(--mg-brown);
border:
1px solid
rgba(255,245,230,.10);
font-size: 11px;
font-weight: 800;
transition:
all .22s ease;
}
#mm-how .mg-b03-step-btn:hover
.mg-b03-step-circle {
color:
var(--mg-cream);
border-color:
rgba(244,166,65,.30);
}
#mm-how .mg-b03-step-btn.is-active
.mg-b03-step-circle {
color:
#261607;
background:
var(--mg-mango);
border-color:
var(--mg-mango);
box-shadow:
0 9px 26px
rgba(244,166,65,.20);
}
#mm-how .mg-b03-step-btn.is-complete
.mg-b03-step-circle {
color:
var(--mg-mango);
border-color:
rgba(244,166,65,.35);
}
#mm-how .mg-b03-step-name {
display: block;
color:
#877969;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .10em;
}
#mm-how .mg-b03-step-btn.is-active
.mg-b03-step-name {
color:
var(--mg-cream);
}
/* =========================================================
MAIN EXPERIENCE
========================================================= */
#mm-how .mg-b03-experience {
display: grid;
grid-template-columns:
.92fr
1.08fr;
min-height: 525px;
overflow: hidden;
border-radius: 30px;
border:
1px solid
var(--mg-line);
background:
rgba(255,255,255,.022);
box-shadow:
0 32px 85px
rgba(0,0,0,.22);
}
/* =========================================================
LEFT COPY
========================================================= */
#mm-how .mg-b03-copy-panel {
padding:
clamp(
34px,
5vw,
62px
);
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(
circle at 10% 10%,
rgba(244,166,65,.06),
transparent 20rem
),
rgba(255,255,255,.018);
border-right:
1px solid
var(--mg-line);
}
#mm-how .mg-b03-content {
transition:
opacity .18s ease,
transform .18s ease;
}
#mm-how .mg-b03-content.is-changing {
opacity: 0;
transform:
translateY(8px);
}
#mm-how .mg-b03-step-kicker {
margin-bottom: 12px;
color:
var(--mg-mango);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
#mm-how .mg-b03-copy-panel h3 {
margin:
0
0
16px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
38px,
4.4vw,
55px
);
font-weight: 500;
line-height: .98;
}
#mm-how .mg-b03-step-copy {
max-width: 510px;
margin:
0
0
25px;
color:
#B6A896;
font-size: 14px;
line-height: 1.72;
}
/* =========================================================
KEY POINTS
========================================================= */
#mm-how .mg-b03-points {
display: grid;
gap: 9px;
}
#mm-how .mg-b03-point {
display: flex;
align-items: center;
gap: 10px;
color:
#CDBEAB;
font-size: 11px;
}
#mm-how .mg-b03-point i {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 7px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-style: normal;
font-size: 9px;
}
/* =========================================================
RIGHT VISUAL PANEL
========================================================= */
#mm-how .mg-b03-visual {
position: relative;
overflow: hidden;
min-height: 525px;
padding:
clamp(
28px,
4vw,
48px
);
display: grid;
place-items: center;
background:
radial-gradient(
circle at 72% 22%,
rgba(244,166,65,.10),
transparent 24rem
),
#1B1713;
}
#mm-how .mg-b03-visual-inner {
width: 100%;
max-width: 520px;
transition:
opacity .18s ease,
transform .18s ease;
}
#mm-how .mg-b03-visual-inner.is-changing {
opacity: 0;
transform:
scale(.985);
}
/* =========================================================
MOCK APP WINDOW
========================================================= */
#mm-how .mg-b03-window {
overflow: hidden;
border-radius: 24px;
background:
#100E0B;
border:
1px solid
rgba(255,245,230,.10);
box-shadow:
0 24px 65px
rgba(0,0,0,.30);
}
#mm-how .mg-b03-window-top {
height: 46px;
padding:
0 16px;
display: flex;
align-items: center;
justify-content: space-between;
color:
#817465;
background:
#171410;
border-bottom:
1px solid
rgba(255,245,230,.06);
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
#mm-how .mg-b03-window-brand {
display: flex;
align-items: center;
gap: 7px;
}
#mm-how .mg-b03-window-brand b {
color:
var(--mg-mango);
}
/* =========================================================
VISUAL BODY
========================================================= */
#mm-how .mg-b03-window-body {
min-height: 350px;
padding: 22px;
}
/* =========================================================
ROUND CARDS
========================================================= */
#mm-how .mg-b03-card-stack {
position: relative;
width: 220px;
height: 285px;
margin: 5px auto 15px;
}
#mm-how .mg-b03-stack-card {
position: absolute;
inset: 0;
border-radius: 20px;
border:
1px solid
rgba(255,255,255,.10);
}
#mm-how .mg-b03-stack-card:nth-child(1) {
transform:
rotate(-6deg)
translate(-16px,8px);
background:
linear-gradient(
145deg,
#39485F,
#C3A178
);
opacity: .36;
}
#mm-how .mg-b03-stack-card:nth-child(2) {
transform:
rotate(5deg)
translate(15px,8px);
background:
linear-gradient(
145deg,
#60413C,
#D7AC6E
);
opacity: .55;
}
#mm-how .mg-b03-stack-card-main {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
z-index: 3;
background:
linear-gradient(
180deg,
transparent 24%,
rgba(10,9,7,.88)
),
linear-gradient(
145deg,
#355748,
#A1A86E
);
}
#mm-how .mg-b03-stack-card-main small {
color:
#E8C691;
font-size: 8px;
text-transform: uppercase;
letter-spacing: .12em;
}
#mm-how .mg-b03-stack-card-main strong {
margin-top: 5px;
color: white;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 30px;
font-weight: 500;
}
#mm-how .mg-b03-decision-row {
display: flex;
justify-content: center;
gap: 20px;
}
#mm-how .mg-b03-decision {
width: 47px;
height: 47px;
border-radius: 50%;
display: grid;
place-items: center;
color:
#D9CBB9;
background:
#1B1713;
border:
1px solid
rgba(255,255,255,.09);
}
#mm-how .mg-b03-decision-yes {
width: 55px;
height: 55px;
color:
#251607;
background:
var(--mg-mango);
}
/* =========================================================
SIGNALS
========================================================= */
#mm-how .mg-b03-signal-title {
margin-bottom: 22px;
text-align: center;
}
#mm-how .mg-b03-signal-title strong {
display: block;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 31px;
font-weight: 500;
}
#mm-how .mg-b03-signal-title span {
color:
#827565;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .12em;
}
#mm-how .mg-b03-meter {
margin-bottom: 16px;
}
#mm-how .mg-b03-meter-label {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color:
#B5A592;
font-size: 10px;
}
#mm-how .mg-b03-meter-track {
height: 7px;
overflow: hidden;
border-radius: 999px;
background:
rgba(255,255,255,.06);
}
#mm-how .mg-b03-meter-fill {
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
var(--mg-mango-dark),
var(--mg-mango)
);
}
/* =========================================================
SIGNUP GATE
========================================================= */
#mm-how .mg-b03-gate {
margin-top: 23px;
padding: 17px;
border-radius: 16px;
text-align: center;
background:
rgba(244,166,65,.07);
border:
1px solid
rgba(244,166,65,.18);
}
#mm-how .mg-b03-gate strong {
display: block;
margin-bottom: 4px;
color:
var(--mg-cream);
font-size: 12px;
}
#mm-how .mg-b03-gate span {
color:
#978774;
font-size: 9px;
}
/* =========================================================
COUPLE MATCH VISUAL
========================================================= */
#mm-how .mg-b03-couple {
min-height: 300px;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
}
#mm-how .mg-b03-couple-avatars {
display: flex;
margin-bottom: 18px;
}
#mm-how .mg-b03-couple-avatars span {
width: 62px;
height: 62px;
margin-right: -9px;
border-radius: 50%;
display: grid;
place-items: center;
border:
4px solid
#100E0B;
background:
linear-gradient(
145deg,
#785B47,
#C8A076
);
color: white;
font-weight: 800;
}
#mm-how .mg-b03-couple-avatars span:last-child {
background:
linear-gradient(
145deg,
#755665,
#C99AAF
);
}
#mm-how .mg-b03-match-label {
color:
var(--mg-mango);
font-size: 9px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
#mm-how .mg-b03-match-country {
margin:
6px
0
7px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 45px;
}
#mm-how .mg-b03-score {
width: 95px;
height: 95px;
border-radius: 50%;
display: grid;
place-items: center;
color:
#271707;
background:
var(--mg-mango);
box-shadow:
0 16px 40px
rgba(244,166,65,.18);
}
#mm-how .mg-b03-score strong {
display: block;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 34px;
line-height: .8;
}
#mm-how .mg-b03-score small {
display: block;
margin-top: 5px;
font-size: 7px;
font-weight: 800;
text-transform: uppercase;
}
/* =========================================================
BUILDER VISUAL
========================================================= */
#mm-how .mg-b03-builder {
display: grid;
gap: 9px;
}
#mm-how .mg-b03-builder-title {
margin-bottom: 8px;
text-align: center;
}
#mm-how .mg-b03-builder-title strong {
display: block;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 31px;
font-weight: 500;
}
#mm-how .mg-b03-builder-title span {
color:
#857868;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .12em;
}
#mm-how .mg-b03-builder-row {
padding:
13px
14px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
color:
#897C6D;
background:
rgba(255,255,255,.035);
border:
1px solid
rgba(255,255,255,.045);
font-size: 9px;
}
#mm-how .mg-b03-builder-row strong {
color:
#EBDCC8;
font-size: 10px;
}
#mm-how .mg-b03-builder-row:last-child {
color:
#B47528;
background:
rgba(244,166,65,.10);
border-color:
rgba(244,166,65,.18);
}
#mm-how .mg-b03-builder-row:last-child strong {
color:
var(--mg-mango);
}
/* =========================================================
BOTTOM MESSAGE
========================================================= */
#mm-how .mg-b03-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 32px;
padding:
24px
27px;
border-radius: 20px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,245,230,.08);
}
#mm-how .mg-b03-footer-copy {
display: flex;
align-items: center;
gap: 13px;
}
#mm-how .mg-b03-footer-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
background:
rgba(244,166,65,.09);
font-size: 18px;
}
#mm-how .mg-b03-footer strong {
display: block;
margin-bottom: 3px;
color:
#E7D8C5;
font-size: 12px;
}
#mm-how .mg-b03-footer p {
margin: 0;
color:
#817465;
font-size: 10px;
line-height: 1.5;
}
/* =========================================================
JOIN CTA
========================================================= */
#mm-how .mg-b03-join {
flex: 0 0 auto;
min-height: 44px;
padding:
0
17px;
border: 0;
border-radius: 999px;
cursor: pointer;
color:
#251607;
background:
var(--mg-mango);
font-family: inherit;
font-size: 11px;
font-weight: 800;
transition:
transform .2s ease,
box-shadow .2s ease;
}
#mm-how .mg-b03-join:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 28px
rgba(244,166,65,.18);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
#mm-how .mg-b03-experience {
grid-template-columns:
1fr;
}
#mm-how .mg-b03-copy-panel {
border-right: 0;
border-bottom:
1px solid
var(--mg-line);
}
#mm-how .mg-b03-visual {
min-height: 475px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mm-how {
padding:
72px
18px;
}
#mm-how .mg-b03-progress {
gap: 3px;
}
#mm-how .mg-b03-progress::before,
#mm-how .mg-b03-progress-fill {
top: 19px;
}
#mm-how .mg-b03-step-circle {
width: 38px;
height: 38px;
font-size: 9px;
}
#mm-how .mg-b03-step-name {
font-size: 7px;
letter-spacing: .05em;
}
#mm-how .mg-b03-copy-panel {
padding:
32px
22px;
}
#mm-how .mg-b03-visual {
min-height: auto;
padding:
25px
17px;
}
#mm-how .mg-b03-window-body {
padding:
19px
14px;
}
#mm-how .mg-b03-footer {
display: grid;
grid-template-columns:
1fr;
}
#mm-how .mg-b03-join {
width: 100%;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mm-how * {
transition:
none !important;
}
}
Coming Soon
How Mango Match Works
From first instinct to shared possibility.
Mango Match isn’t trying to choose your holiday for you. It creates a better starting point—first discovering what catches each person’s attention, then finding the places where those choices naturally meet.
STEP 01 · DISCOVER
Start with ten destinations. No account required.
Your first Discovery Round gives you a deliberately varied set of destinations. Don’t overthink it. Simply notice which places make you want to know more.
✓
Interested or Not For Us
✓
No signup before you experience Mango Match
✓
Your decisions stay final until you reset
🥭
Mango Match
4 / 10
Culture · Coast · Food
Greece 🇬🇷
×
♥
☆
🥭
Your First Signals
Round Complete
We're seeing a pattern.
Based on your first 10
Food & local flavor
92%
Coast
86%
Slow travel
78%
Your Match is just getting started.
Create your free Mango profile to discover 40+ more destinations.
♥
Couple Match
Match Found
R
O
You both chose
Greece 🇬🇷
94%
Couple Match
→
Build Your Getaway
Greece
Greece for Two
From match to getaway
01 · Destination
Greece 🇬🇷
02 · Trip Length
5 Days
03 · Mood
Slow + Local
04 · Places
7 Saved
05 · Your Getaway
Start Building →
✓
${item}
`;
}
)
.join("");
}
/* =========================================================
CURRENT STEP
========================================================= */
let currentStep = 0;
/* =========================================================
SET STEP
========================================================= */
function setStep(index) {
const stage =
stages[index];
if (!stage) {
return;
}
currentStep =
index;
/* buttons */
buttons.forEach(
function (button, buttonIndex) {
const active =
buttonIndex === index;
button.classList.toggle(
"is-active",
active
);
button.classList.toggle(
"is-complete",
buttonIndex < index
);
button.setAttribute(
"aria-pressed",
active
? "true"
: "false"
);
}
);
/* progress bar */
const progressValues =
[
"0%",
"28%",
"56%",
"84%"
];
progressFill.style.width =
progressValues[index];
/* animate out */
content.classList.add(
"is-changing"
);
visual.classList.add(
"is-changing"
);
/* swap */
setTimeout(
function () {
kicker.textContent =
stage.kicker;
title.textContent =
stage.title;
copy.textContent =
stage.copy;
renderPoints(
stage.points
);
visual.innerHTML =
stage.visual;
content.classList.remove(
"is-changing"
);
visual.classList.remove(
"is-changing"
);
},
170
);
}
/* =========================================================
STEP CLICKS
========================================================= */
buttons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
const index =
Number(
button.dataset.mgB03Step
);
stopAutoCycle();
setStep(
index
);
}
);
}
);
/* =========================================================
INITIAL VISUAL
========================================================= */
visual.innerHTML =
stages[0].visual;
/* =========================================================
OPTIONAL AUTOMATIC DEMONSTRATION
========================================================= */
let autoTimer = null;
function startAutoCycle() {
if (autoTimer) {
return;
}
autoTimer =
setInterval(
function () {
currentStep =
(
currentStep + 1
)
%
stages.length;
setStep(
currentStep
);
},
6500
);
}
function stopAutoCycle() {
if (autoTimer) {
clearInterval(
autoTimer
);
autoTimer = null;
}
}
/* =========================================================
START WHEN BLOCK ENTERS VIEW
========================================================= */
if (
"IntersectionObserver"
in window
) {
const observer =
new IntersectionObserver(
function (entries) {
entries.forEach(
function (entry) {
if (
entry.isIntersecting
) {
startAutoCycle();
observer.disconnect();
}
}
);
},
{
threshold: .30
}
);
observer.observe(
block
);
}
/* =========================================================
EARLY ACCESS BUTTON
If B01 is on the same page:
open the existing B01 Journey modal.
Fallback:
scroll back to B01.
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
function () {
const b01Trigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (b01Trigger) {
b01Trigger.click();
return;
}
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
}
);
}
})();
/* =========================================================
MANGO MATCH — B04
TRY FIRST / UNLOCK FULL MATCH
CSS TAB
========================================================= */
/* =========================================================
ROOT
========================================================= */
#mg-match-b04 {
--mg-black: #14110E;
--mg-black-soft: #18140F;
--mg-brown: #211C17;
--mg-brown-2: #2B241D;
--mg-brown-3: #352B22;
--mg-mango: #F4A641;
--mg-mango-dark: #D87916;
--mg-mango-light: #FFC976;
--mg-cream: #FFF5E6;
--mg-cream-2: #F5E8D5;
--mg-muted: #B9AC9A;
--mg-muted-2: #887A6A;
--mg-line: rgba(255,245,230,.10);
position: relative;
overflow: hidden;
padding:
clamp(80px,9vw,128px)
22px;
color:
var(--mg-cream);
background:
radial-gradient(
circle at 12% 35%,
rgba(244,166,65,.055),
transparent 28rem
),
radial-gradient(
circle at 90% 80%,
rgba(216,121,22,.035),
transparent 30rem
),
var(--mg-black);
font-family:
"DM Sans",
Arial,
sans-serif;
}
#mg-match-b04 * {
box-sizing: border-box;
}
/* =========================================================
WRAPPER
========================================================= */
#mg-match-b04 .mg-b04-wrap {
position: relative;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
INTRO
========================================================= */
#mg-match-b04 .mg-b04-intro {
max-width: 820px;
margin:
0 auto
38px;
text-align: center;
}
#mg-match-b04 .mg-b04-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color:
var(--mg-mango);
font-size: 11px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#mg-match-b04 .mg-b04-eyebrow::before,
#mg-match-b04 .mg-b04-eyebrow::after {
content: "";
width: 27px;
height: 1px;
background:
currentColor;
}
#mg-match-b04 .mg-b04-intro h2 {
margin:
0
0
20px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
45px,
6vw,
72px
);
font-weight: 500;
line-height: .97;
letter-spacing: -.035em;
}
#mg-match-b04 .mg-b04-intro h2 span {
color:
var(--mg-mango);
}
#mg-match-b04 .mg-b04-intro p {
max-width: 700px;
margin: 0 auto;
color:
#C1B29E;
font-size:
clamp(
15px,
1.4vw,
17px
);
line-height: 1.75;
}
/* =========================================================
SWITCH
========================================================= */
#mg-match-b04 .mg-b04-switch {
width: fit-content;
max-width: 100%;
margin:
0 auto
22px;
padding: 5px;
display: flex;
gap: 5px;
border-radius: 999px;
background:
rgba(255,255,255,.035);
border:
1px solid
var(--mg-line);
}
#mg-match-b04 .mg-b04-switch-btn {
min-height: 43px;
padding:
0
16px;
border: 0;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
color:
#8D8070;
background:
transparent;
font-family: inherit;
font-size: 10px;
font-weight: 800;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
#mg-match-b04 .mg-b04-switch-btn:hover {
color:
var(--mg-cream);
}
#mg-match-b04 .mg-b04-switch-btn.is-active {
color:
#271707;
background:
var(--mg-mango);
}
#mg-match-b04 .mg-b04-switch-btn span {
opacity: .65;
font-size: 8px;
}
/* =========================================================
MAIN EXPERIENCE
========================================================= */
#mg-match-b04 .mg-b04-experience {
display: grid;
grid-template-columns:
1.15fr
.85fr;
overflow: hidden;
border:
1px solid
var(--mg-line);
border-radius: 30px;
background:
rgba(255,255,255,.02);
box-shadow:
0
32px
85px
rgba(0,0,0,.22);
}
/* =========================================================
DECK PANEL
========================================================= */
#mg-match-b04 .mg-b04-deck-panel {
min-width: 0;
padding:
clamp(
28px,
4vw,
43px
);
border-right:
1px solid
var(--mg-line);
background:
linear-gradient(
180deg,
rgba(255,255,255,.025),
rgba(255,255,255,.012)
);
}
#mg-match-b04 .mg-b04-deck-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 25px;
margin-bottom: 26px;
}
#mg-match-b04 .mg-b04-small-label {
display: block;
margin-bottom: 7px;
color:
var(--mg-mango);
font-size: 9px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
#mg-match-b04 .mg-b04-deck-head h3 {
margin: 0;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
30px,
3.2vw,
42px
);
font-weight: 500;
line-height: 1;
}
#mg-match-b04 .mg-b04-counter {
flex: 0 0 auto;
min-width: 82px;
padding:
11px
12px;
border-radius: 15px;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
border:
1px solid
rgba(244,166,65,.15);
text-align: center;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 29px;
line-height: .9;
}
#mg-match-b04 .mg-b04-counter small {
display: block;
margin-top: 7px;
color:
#8D7D6B;
font-family:
"DM Sans",
Arial,
sans-serif;
font-size: 6px;
font-weight: 800;
letter-spacing: .13em;
}
/* =========================================================
DESTINATION GRID
========================================================= */
#mg-match-b04 .mg-b04-destination-grid {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 9px;
transition:
opacity .18s ease,
transform .18s ease;
}
#mg-match-b04 .mg-b04-destination-grid.is-changing {
opacity: 0;
transform:
translateY(5px);
}
#mg-match-b04 .mg-b04-destination-card {
min-height: 89px;
padding:
14px;
border-radius: 15px;
display: grid;
grid-template-columns:
auto
1fr;
grid-template-rows:
auto
auto;
column-gap: 11px;
align-items: center;
background:
rgba(255,255,255,.028);
border:
1px solid
rgba(255,245,230,.07);
transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;
}
#mg-match-b04 .mg-b04-destination-card:hover {
transform:
translateY(-2px);
border-color:
rgba(244,166,65,.20);
background:
rgba(244,166,65,.035);
}
#mg-match-b04 .mg-b04-destination-card > span {
grid-row:
1 / 3;
font-size: 25px;
}
#mg-match-b04 .mg-b04-destination-card strong {
color:
#EEDFCC;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 19px;
font-weight: 500;
line-height: 1;
}
#mg-match-b04 .mg-b04-destination-card small {
color:
#7E7162;
font-size: 8px;
line-height: 1.35;
}
/* =========================================================
LOCKED / FULL DECK MODE
========================================================= */
#mg-match-b04 .mg-b04-destination-card.mg-b04-extra {
position: relative;
overflow: hidden;
}
#mg-match-b04 .mg-b04-destination-card.mg-b04-extra::after {
content: "FULL MATCH";
position: absolute;
right: 9px;
top: 8px;
padding:
3px
5px;
border-radius: 5px;
color:
#C28D4C;
background:
rgba(244,166,65,.07);
font-size: 5px;
font-weight: 800;
letter-spacing: .1em;
}
/* =========================================================
DECK FOOTER
========================================================= */
#mg-match-b04 .mg-b04-deck-footer {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 22px;
padding-top: 19px;
border-top:
1px solid
rgba(255,245,230,.07);
}
#mg-match-b04 .mg-b04-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-top: 5px;
border-radius: 50%;
background:
var(--mg-mango);
box-shadow:
0
0
0
5px
rgba(244,166,65,.05);
}
#mg-match-b04 .mg-b04-deck-footer p {
margin: 0;
color:
#7F7263;
font-size: 9px;
line-height: 1.55;
}
/* =========================================================
VALUE PANEL
========================================================= */
#mg-match-b04 .mg-b04-value-panel {
position: relative;
overflow: hidden;
padding:
clamp(
31px,
4vw,
48px
);
display: flex;
align-items: center;
background:
radial-gradient(
circle at 90% 0,
rgba(244,166,65,.085),
transparent 20rem
),
var(--mg-brown);
}
#mg-match-b04 .mg-b04-value-panel::after {
content: "";
position: absolute;
width: 270px;
height: 270px;
right: -150px;
bottom: -130px;
border-radius: 50%;
border:
1px solid
rgba(244,166,65,.08);
}
#mg-match-b04 .mg-b04-value-inner {
position: relative;
z-index: 2;
width: 100%;
transition:
opacity .18s ease,
transform .18s ease;
}
#mg-match-b04 .mg-b04-value-inner.is-changing {
opacity: 0;
transform:
translateY(5px);
}
#mg-match-b04 .mg-b04-value-kicker {
margin-bottom: 11px;
color:
var(--mg-mango);
font-size: 9px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
#mg-match-b04 .mg-b04-value-panel h3 {
margin:
0
0
14px;
color:
var(--mg-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
37px,
4vw,
51px
);
font-weight: 500;
line-height: .95;
}
#mg-match-b04 .mg-b04-value-panel > div > p,
#mg-match-b04 .mg-b04-value-inner > p {
margin:
0
0
26px;
color:
#AB9B88;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
BENEFITS
========================================================= */
#mg-match-b04 .mg-b04-benefits {
display: grid;
gap: 9px;
}
#mg-match-b04 .mg-b04-benefit {
padding:
11px
12px;
border-radius: 13px;
display: flex;
align-items: center;
gap: 11px;
border:
1px solid
rgba(255,245,230,.065);
background:
rgba(255,255,255,.025);
}
#mg-match-b04 .mg-b04-benefit > span {
flex: 0 0 auto;
width: 31px;
height: 31px;
border-radius: 9px;
display: grid;
place-items: center;
color:
var(--mg-mango);
background:
rgba(244,166,65,.07);
font-size: 8px;
font-weight: 800;
}
#mg-match-b04 .mg-b04-benefit strong {
display: block;
margin-bottom: 2px;
color:
#E6D7C3;
font-size: 10px;
}
#mg-match-b04 .mg-b04-benefit small {
display: block;
color:
#76695C;
font-size: 8px;
line-height: 1.4;
}
/* =========================================================
MESSAGE
========================================================= */
#mg-match-b04 .mg-b04-message {
margin-top: 20px;
padding-top: 19px;
border-top:
1px solid
rgba(255,245,230,.07);
display: flex;
align-items: flex-start;
gap: 11px;
}
#mg-match-b04 .mg-b04-message > span {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 11px;
display: grid;
place-items: center;
background:
rgba(244,166,65,.08);
}
#mg-match-b04 .mg-b04-message strong {
display: block;
margin-bottom: 3px;
color:
#E9DAC7;
font-size: 10px;
}
#mg-match-b04 .mg-b04-message p {
margin: 0;
color:
#8F8070;
font-size: 9px;
line-height: 1.4;
}
/* =========================================================
UNLOCK BAND
========================================================= */
#mg-match-b04 .mg-b04-unlock {
margin-top: 18px;
padding:
clamp(
27px,
4vw,
37px
);
border-radius: 25px;
display: grid;
grid-template-columns:
1fr
1.05fr
auto;
gap:
30px;
align-items: center;
color:
#261707;
background:
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.18),
transparent 15rem
),
linear-gradient(
135deg,
var(--mg-mango-dark),
var(--mg-mango)
);
}
#mg-match-b04 .mg-b04-unlock-label {
display: block;
margin-bottom: 6px;
color:
rgba(38,23,7,.65);
font-size: 8px;
font-weight: 800;
letter-spacing: .14em;
}
#mg-match-b04 .mg-b04-unlock h3 {
margin:
0
0
7px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
27px,
3vw,
37px
);
font-weight: 600;
line-height: .95;
}
#mg-match-b04 .mg-b04-unlock-copy p {
max-width: 440px;
margin: 0;
color:
rgba(38,23,7,.70);
font-size: 9px;
line-height: 1.55;
}
/* =========================================================
UNLOCK ITEMS
========================================================= */
#mg-match-b04 .mg-b04-unlock-items {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap:
10px
16px;
}
#mg-match-b04 .mg-b04-unlock-items span {
display: flex;
align-items: center;
gap: 8px;
color:
rgba(38,23,7,.76);
font-size: 9px;
font-weight: 700;
}
#mg-match-b04 .mg-b04-unlock-items i {
width: 28px;
height: 28px;
border-radius: 9px;
display: grid;
place-items: center;
color:
var(--mg-cream);
background:
rgba(33,20,8,.82);
font-style: normal;
font-size: 8px;
}
/* =========================================================
CTA
========================================================= */
#mg-match-b04 .mg-b04-cta {
min-height: 48px;
padding:
0
18px;
border: 0;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
color:
var(--mg-cream);
background:
var(--mg-black);
font-family: inherit;
font-size: 10px;
font-weight: 800;
box-shadow:
0
13px
28px
rgba(33,20,8,.16);
transition:
transform .2s ease,
box-shadow .2s ease;
}
#mg-match-b04 .mg-b04-cta:hover {
transform:
translateY(-2px);
box-shadow:
0
16px
34px
rgba(33,20,8,.24);
}
/* =========================================================
PHILOSOPHY
========================================================= */
#mg-match-b04 .mg-b04-philosophy {
margin-top: 35px;
text-align: center;
}
#mg-match-b04 .mg-b04-philosophy span {
color:
#72675A;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .10em;
}
#mg-match-b04 .mg-b04-philosophy strong {
display: block;
margin-top: 6px;
color:
#D9CAB6;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
24px,
3vw,
35px
);
font-weight: 500;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 960px) {
#mg-match-b04 .mg-b04-experience {
grid-template-columns: 1fr;
}
#mg-match-b04 .mg-b04-deck-panel {
border-right: 0;
border-bottom:
1px solid
var(--mg-line);
}
#mg-match-b04 .mg-b04-unlock {
grid-template-columns:
1fr
1fr;
}
#mg-match-b04 .mg-b04-cta {
grid-column:
1 / -1;
width: 100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
#mg-match-b04 {
padding:
72px
18px;
}
#mg-match-b04 .mg-b04-switch {
width: 100%;
}
#mg-match-b04 .mg-b04-switch-btn {
flex: 1;
padding:
0
10px;
font-size: 8px;
}
#mg-match-b04 .mg-b04-deck-panel {
padding:
24px
18px;
}
#mg-match-b04 .mg-b04-counter {
min-width: 66px;
}
#mg-match-b04 .mg-b04-destination-grid {
grid-template-columns: 1fr;
}
#mg-match-b04 .mg-b04-value-panel {
padding:
31px
22px;
}
#mg-match-b04 .mg-b04-unlock {
grid-template-columns: 1fr;
gap: 22px;
}
#mg-match-b04 .mg-b04-unlock-items {
grid-template-columns:
1fr
1fr;
}
#mg-match-b04 .mg-b04-cta {
grid-column: auto;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#mg-match-b04 * {
transition:
none !important;
}
}
/* =========================================================
MANGO MATCH — B04
JAVASCRIPT TAB
========================================================= */
(function () {
"use strict";
const block =
document.getElementById(
"mg-match-b04"
);
if (!block) {
return;
}
/* =========================================================
ELEMENTS
========================================================= */
const modeButtons =
block.querySelectorAll(
"[data-mg-b04-mode]"
);
const grid =
block.querySelector(
"#mgB04Grid"
);
const deckLabel =
block.querySelector(
"#mgB04DeckLabel"
);
const deckTitle =
block.querySelector(
"#mgB04DeckTitle"
);
const counter =
block.querySelector(
"#mgB04Counter"
);
const deckFooter =
block.querySelector(
"#mgB04DeckFooter"
);
const value =
block.querySelector(
"#mgB04Value"
);
const joinButton =
block.querySelector(
"#mgB04Join"
);
/* =========================================================
DESTINATION DATA
========================================================= */
const firstRound = [
{
flag: "🇬🇷",
country: "Greece",
tags: "Coast · Food · Culture"
},
{
flag: "🇯🇵",
country: "Japan",
tags: "Food · Culture · Cities"
},
{
flag: "🇿🇦",
country: "South Africa",
tags: "Nature · Road Trips · Wildlife"
},
{
flag: "🇵🇹",
country: "Portugal",
tags: "Coast · Slow Travel · Food"
},
{
flag: "🇮🇸",
country: "Iceland",
tags: "Nature · Adventure · Road Trips"
},
{
flag: "🇹🇭",
country: "Thailand",
tags: "Food · Islands · Discovery"
},
{
flag: "🇮🇹",
country: "Italy",
tags: "Food · Romance · History"
},
{
flag: "🇧🇷",
country: "Brazil",
tags: "Culture · Coast · Energy"
},
{
flag: "🇨🇦",
country: "Canada",
tags: "Nature · Scenic · Outdoors"
},
{
flag: "🇦🇪",
country: "UAE",
tags: "City · Luxury · Experiences"
}
];
const fullRoundPreview = [
{
flag: "🇪🇸",
country: "Spain",
tags: "Food · Culture · Coast"
},
{
flag: "🇲🇦",
country: "Morocco",
tags: "Culture · Food · Discovery"
},
{
flag: "🇳🇴",
country: "Norway",
tags: "Nature · Scenic · Road Trips"
},
{
flag: "🇻🇳",
country: "Vietnam",
tags: "Food · Culture · Adventure"
},
{
flag: "🇫🇷",
country: "France",
tags: "Food · Romance · Culture"
},
{
flag: "🇨🇷",
country: "Costa Rica",
tags: "Nature · Coast · Adventure"
},
{
flag: "🇭🇷",
country: "Croatia",
tags: "Coast · Islands · Slow Travel"
},
{
flag: "🇹🇷",
country: "Türkiye",
tags: "Food · History · Coast"
},
{
flag: "🇲🇽",
country: "Mexico",
tags: "Food · Culture · Coast"
},
{
flag: "🇳🇿",
country: "New Zealand",
tags: "Nature · Road Trips · Adventure"
}
];
/* =========================================================
RENDER CARDS
========================================================= */
function renderCards(
items,
extra
) {
grid.innerHTML =
items
.map(
function (item) {
return `
VALUE BEFORE REGISTRATION
No account.
No commitment.
Play the complete opening round first. Mango shouldn't ask for your email before you've had a chance to understand why the experience might be worth keeping.
01
Make real choices
Interested or Not For Us.
02
Finish the full round
No interruption halfway through.
03
See your first results
Discover what your decisions are starting to say.
YOUR FREE MANGO PROFILE
Now there's something worth saving.
Creating a profile unlocks more than additional cards. It gives Mango somewhere to preserve your decisions, connect your partner and carry a winning destination into the next stage.
♥
Keep your decisions
Pick up where you stopped.
◐
Invite your person
Unlock private Couple Match.
→
Build the winner
Take a matched destination into Build Your Getaway.
A different kind of signup
Experience Mango Match before we ask you to join.
Your first ten destinations are yours to explore without creating an account. Finish the round, see what your choices are beginning to reveal, then decide whether you want to keep going.
YOUR FREE DISCOVERY ROUND
Ten different possibilities.
10
DESTINATIONS
VALUE BEFORE REGISTRATION
No account.
No commitment.
Play the complete opening round first. Mango shouldn't ask for your email before you've had a chance to understand why the experience might be worth keeping.
01
Make real choices
Interested or Not For Us.
02
Finish the full round
No interruption halfway through.
03
See your first results
Discover what your decisions are starting to say.
AFTER YOUR FIRST ROUND
Your Match is just getting started.
A free Mango profile opens the full destination experience and gives your decisions somewhere useful to live.
40+
More destinations
♥
Saved decisions
◐
Couple Match
→
Builder handoff
The principle is simple:
earn the signup before asking for it.
Couple Match
Then comes the best part: “You picked that too?”
You explore on your side. Your person explores on theirs. Neither of you needs to know what the other chose until you're both ready to reveal the destinations that caught your attention.
COUPLE MATCH PREVIEW
Two private rounds. One shared reveal.
PRIVATE
Y
YOUR MATCH
Your choices
◐ Private
🇬🇷
Greece
Interested
♥
🇯🇵
Japan
Interested
♥
🇵🇹
Portugal
Interested
♥
🇮🇸
Iceland
Not for us
×
♥
Answers hidden
P
THEIR MATCH
Their choices
◑ Private
🇬🇷
Greece
Interested
♥
🇧🇷
Brazil
Interested
♥
🇵🇹
Portugal
Interested
♥
🇿🇦
South Africa
Interested
♥
Ready to compare?
Neither person's individual decisions need to be exposed.
Mango can simply reveal the overlap.
♥
YOU HAVE A MATCH
Two destinations caught you both.
You chose them separately. Now you get to decide what happens next together.
#1 MUTUAL DESTINATION
Greece 🇬🇷
0%
COUPLE MATCH
Food
Coast
Culture
Slow Travel
Greece sits inside several signals that appeared across both of your destination choices.
#2 MATCH
Portugal 🇵🇹
Coast · Food · Slow Travel
87%
Why private first matters
The destination conversation starts somewhere completely different.
Instead of beginning with persuasion, budget debates or one person saying “you choose,” Mango Match begins with genuine curiosity from both sides.
Less influence
You don't need to like a destination because your partner already said they did.
Less compromise too early
The first goal is discovering possibilities, not negotiating the final holiday.
A better starting point
Mutual destinations give you something both people already showed interest in.
MANGO MATCH · COMING SOON
Want to be one of the couples who tries it first?
STEP 01 · YOUR MATCH
Start with somewhere you both chose.
Mango Match has already done its job. Greece emerged as a destination you both independently wanted to explore.
COUPLE MATCH
Greece 🇬🇷 · 94%
`);
}
/* =========================================================
STEP 1 — LENGTH
========================================================= */
function renderTripStep() {
setProgress(1);
transitionControl(`
Food, coast, culture and slower travel appeared strongly across your combined destination choices.
STEP 02 · THE TRIP
How much time do you have?
The builder should understand the shape of the trip before suggesting how much to fit into it.
`); } /* ========================================================= STEP 2 — MOOD ========================================================= */ function renderMoodStep() { setProgress(2); transitionControl(`
STEP 03 · THE FEELING
What should this getaway feel like?
This isn't a personality test. The mood simply helps Mango understand what kind of Greece belongs in this particular trip.
`); } /* ========================================================= STEP 3 — PLACES ========================================================= */ function renderPlacesStep() { setProgress(3); transitionControl(`
STEP 04 · PLACES
Add things worth remembering.
Now the builder starts curating from the destination itself: where to stay, what to experience and what belongs together.
⌂
Boutique Athens Stay
Quiet base · Local neighborhood
+
🏛
Ancient Athens Morning
History · Early start
+
☕
Slow Neighborhood Morning
Coffee · Walking · Local rhythm
+
✦
Make Something Together
Hands-on couple experience
+
STEP 05 · YOUR GETAWAY
Now the pieces become days.
The goal isn't to squeeze every saved place into the schedule. Mango should consider rhythm, location and how the trip feels as a whole.
BUILDER PREVIEW COMPLETE
Greece for Two
`);
renderItinerary();
}
/* =========================================================
ITINERARY PREVIEW
========================================================= */
function renderItinerary() {
previewTitle.textContent =
"Greece for Two";
itinerary.innerHTML = `
${ state.length || "5 Days" } · ${ state.mood || "Slow + Local" } · Athens
Day 01
Arrive Slowly
Settle in · Neighborhood walk · First table together
Day 02
Ancient Athens
Early archaeology · Long lunch · Unhurried evening
Day 03
Live Like You Belong Here
Coffee · Neighborhoods · Local food · Wandering
Day 04
Make a Memory
Couple experience · Pause · Dinner worth lingering over
Day 05
One Last Morning
Slow breakfast · Final walk · Take something home
Your match is ready.
`;
renderMatchStep();
}
}
);
}
);
/* LENGTH */
control
.querySelectorAll(
"[data-b06-length]"
)
.forEach(
function (button) {
button.addEventListener(
"click",
function () {
state.length =
button.dataset.b06Length;
control
.querySelectorAll(
"[data-b06-length]"
)
.forEach(
function (item) {
item.classList.remove(
"is-selected"
);
}
);
button.classList.add(
"is-selected"
);
updateSummary();
}
);
}
);
/* MOOD */
control
.querySelectorAll(
"[data-b06-mood]"
)
.forEach(
function (button) {
button.addEventListener(
"click",
function () {
state.mood =
button.dataset.b06Mood;
control
.querySelectorAll(
"[data-b06-mood]"
)
.forEach(
function (item) {
item.classList.remove(
"is-selected"
);
}
);
button.classList.add(
"is-selected"
);
updateSummary();
}
);
}
);
}
/* =========================================================
PROGRESS BUTTON EVENTS
========================================================= */
progressButtons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
const step =
Number(
button.dataset.mgB06Step
);
if (
step === 0
) {
renderMatchStep();
}
if (
step === 1
) {
renderTripStep();
}
if (
step === 2
) {
renderMoodStep();
}
if (
step === 3
) {
renderPlacesStep();
}
if (
step === 4
) {
renderDaysStep();
}
}
);
}
);
/* =========================================================
EARLY ACCESS CTA
Reuse B01 Journey modal.
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
function () {
const journeyTrigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (journeyTrigger) {
journeyTrigger.click();
return;
}
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
}
);
}
/* =========================================================
INITIALIZE
========================================================= */
renderMatchStep();
updateSummary();
})();
Start shaping the trip on the left and watch the getaway begin to take form.
After the Match
Finding Greece is one thing. Turning it into your getaway is another.
Mango Match handles discovery. Once you've found somewhere you both want to explore, a separate Mango experience helps turn that shared possibility into an actual journey.
MANGO MATCH
Where should we go?
Discover destinations separately and reveal the overlap.
→
HANDOFF
BUILD YOUR GETAWAY
What should the trip become?
Shape the stay, mood, experiences, rhythm and days.
BUILDER PREVIEW
Greece for Two
CONCEPT PREVIEW
YOUR GETAWAY
Greece for Two
♥
94% Match
Destination
Greece 🇬🇷
Length
—
Mood
—
Your match is ready.
Start shaping the trip on the left and watch the getaway begin to take form.
Two different jobs
Mango shouldn't turn discovery into a planning form.
Matching should stay quick, emotional and playful. Planning should become deliberate only after a destination has earned your attention.
Do we want to explore this possibility?
What kind of experience should we create there?
Coast, food, culture, nature, adventure and more.
Stay, experiences, route, rhythm and individual days.
DISCOVER → MATCH → BUILD
One shared decision can become days worth remembering.
Mango Match and Build Your Getaway are both coming together as part of the wider Mango Getaway experience.
${principle.title}
${principle.copy}
Food & local flavor
Strong signal
Coast
Strong signal
Culture
High interest
Slow travel
High interest
✓
`;
explanation.classList.remove(
"is-changing"
);
},
170
);
}
/* =========================================================
PRINCIPLE BUTTON EVENTS
========================================================= */
principleButtons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
renderPrinciple(
button.dataset.mgB07Principle
);
}
);
}
);
/* =========================================================
WHY AM I SEEING THIS?
========================================================= */
if (whyButton) {
whyButton.addEventListener(
"click",
function () {
renderPrinciple(
"explain"
);
explanation.scrollIntoView({
behavior:
"smooth",
block:
"center"
});
}
);
}
/* =========================================================
DISCLOSURE TOGGLE
========================================================= */
if (
disclosureButton &&
disclosureBox
) {
disclosureButton.addEventListener(
"click",
function () {
const open =
!disclosureBox.hidden;
disclosureBox.hidden =
open;
disclosureButton.textContent =
open
? "What does this mean?"
: "Hide explanation";
}
);
}
/* =========================================================
EARLY ACCESS CTA
Reuse B01 modal.
========================================================= */
if (joinButton) {
joinButton.addEventListener(
"click",
function () {
const journeyTrigger =
document.querySelector(
"[data-mg-journey-open]"
);
if (journeyTrigger) {
journeyTrigger.click();
return;
}
const b01 =
document.getElementById(
"mg-match-b01"
);
if (b01) {
b01.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
}
);
}
})();
${principle.reasonTitle}
${principle.reasonCopy}
Built Around Your Choices
Your Match should still be your Match.
Mango Match may eventually introduce you to featured destinations, stays and experiences. But commercial participation should never quietly become the reason something is presented as your perfect fit.
DISCOVERY CARD
Example
Mango Discovery
WHY THIS APPEARED
Greece fits signals already emerging from your choices.
Mango should be able to show the reasoning behind a recommendation without pretending that a percentage is magic.
Food & local flavor
Strong signal
Coast
Strong signal
Culture
High interest
Slow travel
High interest
✓
Recommendation reason
Greece overlaps with several themes you repeatedly showed interest in during discovery.
And when something is featured?
Commercial should be visible. Suitability should still matter.
A participating destination or establishment can receive additional visibility without Mango pretending the commercial relationship does not exist.
🇬🇷
Greece
Recommended from your signals
Featured ≠ guaranteed Match.
This destination has a commercial relationship with Mango Getaway. Commercial status may affect visibility, but it should not override the suitability rules used to understand your destination preferences.
Once you've made a decision, Mango shouldn't quietly recycle the card into the current stack.
A rejected destination stays out until you deliberately restart or reset the stack.
Shuffle should reorder destinations you haven't decided on, not erase choices already made.
Recommendations should become more understandable as Mango learns more about what you enjoy.
THE MANGO MATCH STANDARD
Help couples discover more. Never make the result feel bought.
Mango Match · Coming Soon
We're not launching Mango Match without taking couples with us.
Mango Match is still being shaped. Before it becomes a finished product, we want real couples to play with the idea, challenge it, tell us what feels useful and help us make destination discovery more fun to do together.
FOLLOW THE JOURNEY
Be there when Mango Match begins.
Join the early Mango Match list and we'll keep you close as the Discovery Round, Couple Match and Build Your Getaway experiences take shape.
✓
Launch updates
✓
Early-access opportunities
✓
Mango Match development
Free to join · Leave anytime · No endless inbox clutter
🥭
MANGO MATCH
COMING
SOON
◐
Discover
separately
♥
Match
together
→
Create
the journey
MANGO GETAWAY
“The point isn't to find the destination everyone says you should visit. It's to discover the places that make both of you want to create a memory there.”
Create More Shared Memories.