/* =========================================================
MANGO MATCH PARTNER SIGNUP
B01 — HERO
========================================================= */
.mgm-partner-hero {
--mgm-bg: #14110e;
--mgm-panel: #211c17;
--mgm-panel-light: #2b241d;
--mgm-cream: #fff5e6;
--mgm-muted: #c9bdaf;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-line: rgba(255, 245, 230, 0.12);
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 12% 18%,
rgba(244, 166, 65, 0.10),
transparent 30%
),
radial-gradient(
circle at 88% 70%,
rgba(216, 121, 22, 0.07),
transparent 28%
),
var(--mgm-bg);
color: var(--mgm-cream);
padding: clamp(76px, 9vw, 130px) 24px;
}
/* subtle background texture */
.mgm-partner-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.018) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.018) 1px,
transparent 1px
);
background-size: 80px 80px;
mask-image:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
transparent 75%
);
}
/* main layout */
.mgm-partner-hero__inner {
position: relative;
z-index: 2;
width: min(1180px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
align-items: center;
gap: clamp(42px, 6vw, 88px);
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mgm-partner-hero__content {
max-width: 720px;
}
.mgm-partner-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--mgm-gold);
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mgm-partner-hero__eyebrow::before {
content: "";
width: 30px;
height: 1px;
background: var(--mgm-gold);
}
.mgm-partner-hero__title {
margin: 0;
color: var(--mgm-cream);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(58px, 7.5vw, 104px);
font-weight: 500;
line-height: 0.88;
letter-spacing: -0.045em;
}
.mgm-partner-hero__title span {
color: var(--mgm-gold);
}
.mgm-partner-hero__intro {
max-width: 670px;
margin: 30px 0 0;
color: var(--mgm-muted);
font-family: "DM Sans", sans-serif;
font-size: clamp(17px, 1.6vw, 21px);
font-weight: 400;
line-height: 1.7;
}
/* buttons */
.mgm-partner-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.mgm-partner-btn {
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 24px;
border-radius: 999px;
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partner-btn:hover {
transform: translateY(-2px);
}
.mgm-partner-btn--primary {
color: #1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold) 62%,
#ffc66f
);
box-shadow:
0 15px 40px rgba(244, 166, 65, 0.18);
}
.mgm-partner-btn--secondary {
color: var(--mgm-cream) !important;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--mgm-line);
}
.mgm-partner-btn--secondary:hover {
background: rgba(255, 255, 255, 0.055);
border-color: rgba(255, 245, 230, 0.20);
}
/* credibility microcopy */
.mgm-partner-hero__micro {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 28px;
}
.mgm-partner-hero__micro-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 245, 230, 0.64);
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 500;
}
.mgm-partner-hero__micro-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--mgm-gold);
}
/* =========================================================
RIGHT OFFER PANEL
========================================================= */
.mgm-partner-hero__offer {
position: relative;
overflow: hidden;
padding: clamp(28px, 4vw, 42px);
border: 1px solid var(--mgm-line);
border-radius: 30px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.012)
),
var(--mgm-panel);
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.34);
}
.mgm-partner-hero__offer::before {
content: "";
position: absolute;
width: 250px;
height: 250px;
top: -120px;
right: -110px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.16),
transparent 68%
);
pointer-events: none;
}
.mgm-partner-hero__offer-label {
position: relative;
color: var(--mgm-gold);
font-family: "DM Sans", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.mgm-partner-hero__offer-price {
position: relative;
display: flex;
align-items: baseline;
gap: 11px;
margin-top: 16px;
}
.mgm-partner-hero__offer-from {
color: var(--mgm-muted);
font-family: "DM Sans", sans-serif;
font-size: 16px;
}
.mgm-partner-hero__offer-price strong {
color: var(--mgm-cream);
font-family: "DM Sans", sans-serif;
font-size: clamp(60px, 7vw, 88px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.065em;
}
.mgm-partner-hero__offer-once {
margin-top: 4px;
color: var(--mgm-gold);
font-family: "DM Sans", sans-serif;
font-size: 13px;
font-weight: 700;
}
.mgm-partner-hero__offer-divider {
width: 100%;
height: 1px;
margin: 28px 0;
background: var(--mgm-line);
}
.mgm-partner-hero__offer-title {
max-width: 420px;
color: var(--mgm-cream);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(30px, 3vw, 42px);
font-weight: 500;
line-height: 1;
}
.mgm-partner-hero__offer-copy {
margin-top: 15px;
color: var(--mgm-muted);
font-family: "DM Sans", sans-serif;
font-size: 14px;
line-height: 1.65;
}
/* price progression */
.mgm-partner-hero__progression {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
align-items: center;
gap: 8px;
margin-top: 27px;
}
.mgm-partner-hero__progression span {
color: var(--mgm-cream);
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 800;
}
.mgm-partner-hero__progression span:first-child {
color: var(--mgm-gold);
}
.mgm-partner-hero__progression i {
height: 1px;
background:
linear-gradient(
90deg,
rgba(244, 166, 65, 0.4),
rgba(255, 245, 230, 0.10)
);
}
/* subtle text CTA */
.mgm-partartner-offer-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 26px;
color: var(--mgm-cream) !important;
font-family: "DM Sans", sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition:
color 0.2s ease,
gap 0.2s ease;
}
.mgm-partartner-offer-link span {
color: var(--mgm-gold);
}
.mgm-partartner-offer-link:hover {
color: var(--mgm-gold) !important;
gap: 14px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 920px) {
.mgm-partner-hero__inner {
grid-template-columns: 1fr;
gap: 50px;
}
.mgm-partner-hero__content {
max-width: 760px;
}
.mgm-partner-hero__offer {
max-width: 680px;
}
}
@media (max-width: 620px) {
.mgm-partner-hero {
padding:
66px
18px
72px;
}
.mgm-partner-hero__title {
font-size: clamp(50px, 16vw, 70px);
}
.mgm-partner-hero__intro {
margin-top: 24px;
font-size: 16px;
}
.mgm-partner-hero__actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.mgm-partner-btn {
width: 100%;
}
.mgm-partner-hero__micro {
display: grid;
gap: 9px;
}
.mgm-partner-hero__offer {
padding: 26px 22px;
border-radius: 24px;
}
.mgm-partner-hero__progression {
gap: 5px;
}
.mgm-partner-hero__progression span {
font-size: 11px;
}
}
Mango Match for Establishments
Get Discovered.Get Matched.
Put your establishment into Mango Match and become part of the places,
stays and experiences couples can discover together while planning
their next getaway.
Early Country Placement
From
$5
once-off
The earlier your establishment joins, the lower the entry price.
The first 10 qualifying establishments in each country receive
Mango Match’s introductory placement price.
$5
$15
$25
$40
$60
Check your country’s current position
→
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B02 — COUNTRY SELECTOR
========================================================= */
.mgm-country-selector {
--mgm-bg: #14110e;
--mgm-panel: #211c17;
--mgm-panel-light: #2b241d;
--mgm-cream: #fff5e6;
--mgm-muted: #c9bdaf;
--mgm-soft: #e7dac9;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-line: rgba(255, 245, 230, 0.12);
--mgm-line-strong: rgba(255, 245, 230, 0.20);
position: relative;
padding:
clamp(78px, 8vw, 118px)
24px;
overflow: hidden;
color: var(--mgm-cream);
background:
linear-gradient(
180deg,
#17130f 0%,
var(--mgm-bg) 100%
);
}
/* subtle upper separation from B01 */
.mgm-country-selector::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(1180px, calc(100% - 48px));
height: 1px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
transparent,
rgba(244, 166, 65, 0.22),
rgba(255, 245, 230, 0.10),
transparent
);
}
.mgm-country-selector__inner {
position: relative;
width: min(1180px, 100%);
margin: 0 auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.mgm-country-selector__heading {
max-width: 760px;
margin-bottom:
clamp(34px, 5vw, 54px);
}
.mgm-country-selector__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: var(--mgm-gold);
font-family: "DM Sans", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mgm-country-selector__eyebrow::before {
content: "";
width: 30px;
height: 1px;
background: var(--mgm-gold);
}
.mgm-country-selector__title {
margin: 0;
color: var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(46px, 6vw, 76px);
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.035em;
}
.mgm-country-selector__intro {
max-width: 680px;
margin: 20px 0 0;
color: var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height: 1.7;
}
/* =========================================================
MAIN SELECTOR PANEL
========================================================= */
.mgm-country-selector__panel {
display: grid;
grid-template-columns:
minmax(0, 0.9fr)
minmax(320px, 1.1fr);
gap:
clamp(30px, 5vw, 70px);
align-items: center;
padding:
clamp(26px, 4vw, 42px);
border:
1px solid
var(--mgm-line);
border-radius: 28px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.035),
rgba(255, 255, 255, 0.012)
),
var(--mgm-panel);
box-shadow:
0 22px 60px
rgba(0, 0, 0, 0.20);
}
/* left panel copy */
.mgm-country-selector__step {
margin-bottom: 13px;
color: var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mgm-country-selector__panel-copy h3 {
margin: 0;
color: var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(30px, 3vw, 42px);
font-weight: 500;
line-height: 1;
}
.mgm-country-selector__panel-copy p {
max-width: 440px;
margin: 14px 0 0;
color: var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
COUNTRY CONTROL
========================================================= */
.mgm-country-selector__control {
width: 100%;
}
.mgm-country-selector__label {
display: block;
margin-bottom: 9px;
color: var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 700;
}
.mgm-country-selector__select-wrap {
position: relative;
}
.mgm-country-selector__select {
width: 100%;
height: 60px;
appearance: none;
-webkit-appearance: none;
padding:
0
54px
0
18px;
border:
1px solid
rgba(255, 245, 230, 0.16);
border-radius: 16px;
outline: none;
color: var(--mgm-cream);
background:
#17130f;
font-family:
"DM Sans",
sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.mgm-country-selector__select:hover {
border-color:
rgba(255, 245, 230, 0.26);
}
.mgm-country-selector__select:focus {
border-color:
rgba(244, 166, 65, 0.72);
box-shadow:
0 0 0 4px
rgba(244, 166, 65, 0.08);
}
.mgm-country-selector__select option {
color: var(--mgm-cream);
background: #17130f;
}
.mgm-country-selector__chevron {
position: absolute;
top: 50%;
right: 19px;
transform: translateY(-50%);
color: var(--mgm-gold);
font-size: 17px;
font-weight: 700;
pointer-events: none;
}
.mgm-country-selector__help {
margin-top: 10px;
color:
rgba(255, 245, 230, 0.52);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
SELECTED COUNTRY CONFIRMATION
========================================================= */
.mgm-country-selector__selection {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin-top: 14px;
padding:
16px
20px;
border:
1px solid
rgba(244, 166, 65, 0.22);
border-radius: 18px;
background:
linear-gradient(
90deg,
rgba(244, 166, 65, 0.08),
rgba(244, 166, 65, 0.025)
);
animation:
mgmCountryReveal
0.28s
ease;
}
.mgm-country-selector__selection[hidden] {
display: none;
}
@keyframes mgmCountryReveal {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mgm-country-selector__selection-main {
display: flex;
align-items: center;
gap: 14px;
}
.mgm-country-selector__flag {
min-width: 46px;
min-height: 46px;
display: grid;
place-items: center;
border:
1px solid
rgba(255, 245, 230, 0.10);
border-radius: 14px;
background:
rgba(255, 255, 255, 0.035);
font-size: 25px;
}
.mgm-country-selector__selection-label {
color:
rgba(255, 245, 230, 0.48);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-country-selector__selection-name {
margin-top: 2px;
color: var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 16px;
font-weight: 700;
}
.mgm-country-selector__selection-next {
display: flex;
align-items: center;
gap: 9px;
color: var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
}
.mgm-country-selector__selection-next strong {
color: var(--mgm-cream);
font-weight: 600;
}
.mgm-country-selector__arrow {
color: var(--mgm-gold);
font-size: 17px;
}
/* =========================================================
FOUNDING PRICE NOTE
========================================================= */
.mgm-country-selector__founding-note {
display: grid;
grid-template-columns:
46px
minmax(0, 1fr);
gap: 18px;
align-items: start;
max-width: 810px;
margin-top: 28px;
}
.mgm-country-selector__founding-line {
width: 46px;
height: 1px;
margin-top: 12px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.12)
);
}
.mgm-country-selector__founding-note p {
margin: 0;
color:
rgba(255, 245, 230, 0.60);
font-family:
"DM Sans",
sans-serif;
font-size: 13px;
line-height: 1.7;
}
.mgm-country-selector__founding-note strong {
color: var(--mgm-cream);
font-weight: 700;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 820px) {
.mgm-country-selector__panel {
grid-template-columns: 1fr;
gap: 28px;
}
}
@media (max-width: 620px) {
.mgm-country-selector {
padding:
66px
18px
72px;
}
.mgm-country-selector__panel {
padding:
24px
20px;
border-radius: 23px;
}
.mgm-country-selector__selection {
align-items: flex-start;
flex-direction: column;
}
.mgm-country-selector__selection-next {
width: 100%;
padding-top: 12px;
border-top:
1px solid
rgba(255, 245, 230, 0.08);
}
.mgm-country-selector__founding-note {
grid-template-columns: 28px 1fr;
gap: 12px;
}
.mgm-country-selector__founding-line {
width: 28px;
}
/* =========================================================
B02 — WORDPRESS / KADENCE SELECT OVERRIDE
========================================================= */
#mgm-country-selector #mgm-country-select,
#mgm-country-selector select.mgm-country-selector__select {
width: 100% !important;
height: 60px !important;
color: #fff5e6 !important;
-webkit-text-fill-color: #fff5e6 !important;
background-color: #17130f !important;
background-image: none !important;
border:
1px solid
rgba(244, 166, 65, 0.62) !important;
border-radius: 16px !important;
padding:
0
54px
0
18px !important;
font-family:
"DM Sans",
Arial,
sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
box-shadow:
none !important;
outline:
none !important;
color-scheme:
dark;
}
#mgm-country-selector #mgm-country-select:hover {
color: #fff5e6 !important;
background-color:
#17130f !important;
border-color:
rgba(244, 166, 65, 0.78) !important;
}
#mgm-country-selector #mgm-country-select:focus {
color: #fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
background-color:
#17130f !important;
border-color:
#f4a641 !important;
box-shadow:
0 0 0 3px
rgba(244, 166, 65, 0.10) !important;
}
#mgm-country-selector #mgm-country-select option {
color:
#fff5e6 !important;
background:
#17130f !important;
font-family:
"DM Sans",
Arial,
sans-serif !important;
}
#mgm-country-selector #mgm-country-select option:checked {
color:
#f4a641 !important;
background:
#2b241d !important;
}
/* keep our custom arrow gold */
#mgm-country-selector
.mgm-country-selector__chevron {
color:
#f4a641 !important;
z-index:
4;
}
}
/* =========================================================
MANGO MATCH
B02 — COUNTRY RUNTIME v0.1.2
========================================================= */
(function () {
function mgmFlagFromCode(code) {
if (
!code ||
code.length !== 2
) {
return "";
}
return code
.toUpperCase()
.replace(
/./g,
function (character) {
return String.fromCodePoint(
127397 +
character.charCodeAt()
);
}
);
}
function initMangoCountryRuntime() {
const select =
document.getElementById(
"mgm-country-select"
);
const selection =
document.getElementById(
"mgm-country-selection"
);
const selectedName =
document.getElementById(
"mgm-selected-country-name"
);
const selectedFlag =
document.getElementById(
"mgm-selected-country-flag"
);
if (!select) {
return;
}
/*
* The HTML options are now our
* authoritative country catalogue.
*/
window.MGM_COUNTRIES =
Array.from(
select.options
)
.filter(
function (option) {
return Boolean(
option.value
);
}
)
.map(
function (option) {
return {
code:
option.value,
name:
option.textContent.trim(),
flag:
mgmFlagFromCode(
option.value
)
};
}
);
function findCountry(code) {
return (
window.MGM_COUNTRIES.find(
function (country) {
return (
country.code ===
code
);
}
) ||
null
);
}
window.mgmGetSelectedCountry =
function () {
if (!select.value) {
return null;
}
return findCountry(
select.value
);
};
window.mgmSetCountry =
function (countryCode) {
const country =
findCountry(
countryCode
);
if (!country) {
if (selection) {
selection.hidden =
true;
}
return;
}
select.value =
country.code;
if (selectedName) {
selectedName.textContent =
country.name;
}
if (selectedFlag) {
selectedFlag.textContent =
country.flag;
}
if (selection) {
selection.hidden =
false;
}
localStorage.setItem(
"mgm_selected_country",
country.code
);
/*
* Every downstream block receives
* the same country object.
*/
window.dispatchEvent(
new CustomEvent(
"mgm:countrychange",
{
detail: {
code:
country.code,
name:
country.name,
flag:
country.flag
}
}
)
);
};
select.addEventListener(
"change",
function () {
if (!select.value) {
localStorage.removeItem(
"mgm_selected_country"
);
if (selection) {
selection.hidden =
true;
}
window.dispatchEvent(
new CustomEvent(
"mgm:countrychange",
{
detail:
null
}
)
);
return;
}
window.mgmSetCountry(
select.value
);
}
);
/*
* Restore previous selection.
*/
const saved =
localStorage.getItem(
"mgm_selected_country"
);
if (
saved &&
findCountry(saved)
) {
window.mgmSetCountry(
saved
);
}
/*
* Tell later blocks that the
* country runtime exists.
*/
window.dispatchEvent(
new CustomEvent(
"mgm:countryruntime"
)
);
}
if (
document.readyState ===
"loading"
) {
document.addEventListener(
"DOMContentLoaded",
initMangoCountryRuntime,
{
once: true
}
);
}
else {
initMangoCountryRuntime();
}
})();
Your Country
Where are you based?
Mango Match grows country by country. Select where your establishment
is physically located to see your country’s current placement level.
Country Collection
Select your country
Each country progresses independently through Mango Match’s
placement levels.
Establishment country
Choose your country
Albania
Argentina
Australia
Austria
Bahamas
Belgium
Brazil
Canada
Chile
Costa Rica
Croatia
Cyprus
Czechia
Denmark
Dominican Republic
Egypt
Finland
France
Georgia
Germany
Greece
Hungary
Iceland
Indonesia
Ireland
Israel
Italy
Japan
Kenya
Maldives
Malta
Mauritius
Mexico
Monaco
Montenegro
Morocco
Netherlands
New Zealand
Norway
Peru
Portugal
Seychelles
Singapore
South Africa
South Korea
Spain
Sweden
Switzerland
Tanzania
Thailand
Türkiye
United Arab Emirates
United Kingdom
United States
Vietnam
↓
Choose the country where customers physically experience
your establishment or service.
Next
View current placement level
→
Every country starts at $5.
The first 10 qualifying establishments receive that country’s
founding placement price before the next pricing level begins.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B03 — LIVE COUNTRY COUNTER
========================================================= */
.mgm-live-counter {
--mgm-bg: #14110e;
--mgm-panel: #211c17;
--mgm-panel-deep: #181410;
--mgm-cream: #fff5e6;
--mgm-soft: #e7dac9;
--mgm-muted: #c9bdaf;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
--mgm-line-strong:
rgba(255, 245, 230, 0.20);
position: relative;
padding:
clamp(78px, 8vw, 118px)
24px;
color:
var(--mgm-cream);
background:
var(--mgm-bg);
}
.mgm-live-counter__inner {
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-live-counter__heading {
max-width:
760px;
margin-bottom:
clamp(34px, 5vw, 52px);
}
.mgm-live-counter__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-live-counter__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-live-counter__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(46px, 6vw, 76px);
font-weight:
500;
line-height:
0.98;
letter-spacing:
-0.035em;
}
.mgm-live-counter__intro {
max-width:
680px;
margin:
20px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height:
1.7;
}
/* =========================================================
EMPTY STATE
========================================================= */
.mgm-live-counter__empty {
display:
flex;
align-items:
center;
gap:
18px;
max-width:
700px;
padding:
22px 24px;
border:
1px solid
var(--mgm-line);
border-radius:
20px;
background:
rgba(255, 255, 255, 0.025);
}
.mgm-live-counter__empty-mark {
width:
48px;
height:
48px;
flex:
0 0 48px;
display:
grid;
place-items:
center;
border:
1px solid
rgba(244, 166, 65, 0.24);
border-radius:
15px;
background:
rgba(244, 166, 65, 0.07);
color:
var(--mgm-gold);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
27px;
font-weight:
600;
}
.mgm-live-counter__empty strong {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
14px;
}
.mgm-live-counter__empty p {
margin:
4px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
}
/* =========================================================
MAIN CARD
========================================================= */
.mgm-live-counter__card {
position:
relative;
overflow:
hidden;
padding:
clamp(26px, 4vw, 42px);
border:
1px solid
var(--mgm-line);
border-radius:
30px;
background:
linear-gradient(
140deg,
rgba(244, 166, 65, 0.055),
transparent 38%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.035),
rgba(255, 255, 255, 0.01)
),
var(--mgm-panel);
box-shadow:
0 28px 80px
rgba(0, 0, 0, 0.26);
}
.mgm-live-counter__card[hidden] {
display:
none;
}
.mgm-live-counter__card::after {
content:
"";
position:
absolute;
width:
310px;
height:
310px;
right:
-150px;
top:
-150px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.12),
transparent 68%
);
pointer-events:
none;
}
/* =========================================================
TOP
========================================================= */
.mgm-live-counter__top {
position:
relative;
z-index:
2;
display:
flex;
align-items:
flex-start;
justify-content:
space-between;
gap:
30px;
}
.mgm-live-counter__country {
display:
flex;
align-items:
center;
gap:
15px;
}
.mgm-live-counter__flag {
width:
54px;
height:
54px;
display:
grid;
place-items:
center;
border:
1px solid
var(--mgm-line);
border-radius:
16px;
background:
rgba(255, 255, 255, 0.035);
font-size:
28px;
}
.mgm-live-counter__country-label,
.mgm-live-counter__price-label {
color:
rgba(255, 245, 230, 0.48);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.15em;
text-transform:
uppercase;
}
.mgm-live-counter__country-name {
margin:
4px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(31px, 4vw, 44px);
font-weight:
500;
}
.mgm-live-counter__price {
text-align:
right;
}
.mgm-live-counter__price-value {
margin-top:
4px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(42px, 5vw, 64px);
font-weight:
800;
line-height:
0.95;
letter-spacing:
-0.055em;
}
.mgm-live-counter__price-type {
margin-top:
4px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
}
/* divider */
.mgm-live-counter__divider {
height:
1px;
margin:
30px 0;
background:
linear-gradient(
90deg,
var(--mgm-line),
rgba(244, 166, 65, 0.20),
var(--mgm-line)
);
}
/* =========================================================
COUNTER STATUS
========================================================= */
.mgm-live-counter__status {
display:
grid;
grid-template-columns:
minmax(170px, 0.32fr)
minmax(0, 1fr);
gap:
clamp(28px, 5vw, 65px);
align-items:
end;
}
.mgm-live-counter__position-label {
color:
rgba(255, 245, 230, 0.48);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-live-counter__position-number {
display:
flex;
align-items:
baseline;
gap:
7px;
margin-top:
7px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
28px;
font-weight:
600;
}
.mgm-live-counter__position-number strong {
color:
var(--mgm-cream);
font-size:
clamp(50px, 6vw, 76px);
font-weight:
800;
line-height:
0.9;
letter-spacing:
-0.06em;
}
.mgm-live-counter__tier-name {
margin-top:
9px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
}
/* progress */
.mgm-live-counter__progress-meta {
display:
flex;
justify-content:
space-between;
gap:
18px;
margin-bottom:
11px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
}
.mgm-live-counter__progress-meta span:last-child {
color:
rgba(255, 245, 230, 0.52);
}
.mgm-live-counter__progress {
width:
100%;
height:
12px;
overflow:
hidden;
border:
1px solid
rgba(255, 255, 255, 0.05);
border-radius:
999px;
background:
#100e0c;
}
.mgm-live-counter__progress-fill {
width:
0%;
height:
100%;
border-radius:
inherit;
background:
linear-gradient(
90deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc468
);
box-shadow:
0 0 18px
rgba(244, 166, 65, 0.18);
transition:
width 0.45s ease;
}
/* =========================================================
NEXT LEVEL
========================================================= */
.mgm-live-counter__next {
margin-top:
30px;
padding:
20px 22px;
border:
1px solid
rgba(244, 166, 65, 0.17);
border-radius:
18px;
background:
rgba(244, 166, 65, 0.055);
}
.mgm-live-counter__next-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-live-counter__next-content {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
28px;
margin-top:
8px;
}
.mgm-live-counter__next-content p {
max-width:
700px;
margin:
0;
color:
var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
line-height:
1.65;
}
.mgm-live-counter__next-price {
flex:
0 0 auto;
text-align:
right;
}
.mgm-live-counter__next-price span {
display:
block;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
text-transform:
uppercase;
letter-spacing:
0.12em;
}
.mgm-live-counter__next-price strong {
display:
block;
margin-top:
2px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
23px;
}
/* =========================================================
FOOTER / CTA
========================================================= */
.mgm-live-counter__footer {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
22px;
margin-top:
24px;
}
.mgm-live-counter__notice {
display:
flex;
align-items:
flex-start;
gap:
9px;
max-width:
620px;
color:
rgba(255, 245, 230, 0.52);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.55;
}
.mgm-live-counter__notice-dot {
width:
6px;
height:
6px;
flex:
0 0 6px;
margin-top:
5px;
border-radius:
50%;
background:
var(--mgm-gold);
}
.mgm-live-counter__cta {
min-height:
50px;
flex:
0 0 auto;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
10px;
padding:
0 21px;
border-radius:
999px;
color:
#1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc46b
);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
font-weight:
800;
text-decoration:
none !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-live-counter__cta:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 760px) {
.mgm-live-counter__top {
align-items:
flex-start;
}
.mgm-live-counter__status {
grid-template-columns:
1fr;
}
.mgm-live-counter__next-content {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-live-counter__next-price {
text-align:
left;
}
.mgm-live-counter__footer {
align-items:
flex-start;
flex-direction:
column;
}
}
@media (max-width: 620px) {
.mgm-live-counter {
padding:
66px
18px
72px;
}
.mgm-live-counter__card {
padding:
24px 20px;
border-radius:
24px;
}
.mgm-live-counter__top {
flex-direction:
column;
}
.mgm-live-counter__price {
width:
100%;
padding-top:
18px;
border-top:
1px solid
var(--mgm-line);
text-align:
left;
}
.mgm-live-counter__progress-meta {
flex-direction:
column;
gap:
3px;
}
.mgm-live-counter__cta {
width:
100%;
}
.mgm-live-counter__empty {
align-items:
flex-start;
}
}
/* =========================================================
MANGO MATCH
B03 — LIVE COUNTRY COUNTER v0.1.2
========================================================= */
(function () {
/* =======================================================
PRICING MODEL
======================================================= */
window.MGM_PRICE_TIERS = [
{
name: "Founding",
start: 1,
end: 10,
price: 5
},
{
name: "Early",
start: 11,
end: 25,
price: 15
},
{
name: "Growing",
start: 26,
end: 50,
price: 25
},
{
name: "Established",
start: 51,
end: 100,
price: 40
},
{
name: "Mature",
start: 101,
end: Infinity,
price: 60
}
];
/*
* TEMPORARY development occupancy.
*
* Later this comes from WordPress/Core.
*/
window.MGM_COUNTRY_OCCUPANCY =
window.MGM_COUNTRY_OCCUPANCY || {
GR: 0,
ZA: 0,
BR: 0,
US: 0,
IT: 0,
FR: 0,
ES: 0,
PT: 0,
HR: 0,
TR: 0,
AE: 0
};
window.mgmGetCountryOccupancy =
function (countryCode) {
return (
window
.MGM_COUNTRY_OCCUPANCY[
countryCode
] || 0
);
};
window.mgmGetPricingState =
function (occupied) {
const nextPosition =
occupied + 1;
const tierIndex =
window
.MGM_PRICE_TIERS
.findIndex(
function (tier) {
return (
nextPosition >=
tier.start &&
nextPosition <=
tier.end
);
}
);
const tier =
window
.MGM_PRICE_TIERS[
tierIndex
];
if (!tier) {
return null;
}
const finite =
Number.isFinite(
tier.end
);
const capacity =
finite
? (
tier.end -
tier.start +
1
)
: null;
const used =
Math.max(
0,
occupied -
tier.start +
1
);
const remaining =
finite
? Math.max(
0,
capacity - used
)
: null;
const progress =
finite
? Math.min(
100,
(
used /
capacity
) * 100
)
: 100;
return {
tierIndex:
tierIndex,
tier:
tier,
nextTier:
window
.MGM_PRICE_TIERS[
tierIndex + 1
] || null,
nextPosition:
nextPosition,
capacity:
capacity,
used:
used,
remaining:
remaining,
progress:
progress
};
};
/* =======================================================
INITIALISE DOM
======================================================= */
function initMangoCountryCounter() {
const empty =
document.getElementById(
"mgm-counter-empty"
);
const card =
document.getElementById(
"mgm-counter-card"
);
const flag =
document.getElementById(
"mgm-counter-flag"
);
const countryName =
document.getElementById(
"mgm-counter-country"
);
const price =
document.getElementById(
"mgm-counter-price"
);
const used =
document.getElementById(
"mgm-counter-used"
);
const capacity =
document.getElementById(
"mgm-counter-capacity"
);
const tierName =
document.getElementById(
"mgm-counter-tier"
);
const remaining =
document.getElementById(
"mgm-counter-remaining"
);
const position =
document.getElementById(
"mgm-counter-position"
);
const progress =
document.getElementById(
"mgm-counter-progress"
);
const progressAccessible =
document.getElementById(
"mgm-counter-progress-accessible"
);
const nextCopy =
document.getElementById(
"mgm-counter-next-copy"
);
const nextPrice =
document.getElementById(
"mgm-counter-next-price"
);
const cta =
document.getElementById(
"mgm-counter-cta"
);
if (
!empty ||
!card
) {
return;
}
function render(country) {
if (
!country ||
!country.code
) {
empty.hidden =
false;
card.hidden =
true;
return;
}
const occupied =
window
.mgmGetCountryOccupancy(
country.code
);
const state =
window
.mgmGetPricingState(
occupied
);
if (!state) {
return;
}
empty.hidden =
true;
card.hidden =
false;
if (flag) {
flag.textContent =
country.flag || "";
}
if (countryName) {
countryName.textContent =
country.name;
}
if (price) {
price.textContent =
"$" +
state.tier.price;
}
if (used) {
used.textContent =
state.used;
}
if (capacity) {
capacity.textContent =
state.capacity === null
? "∞"
: state.capacity;
}
if (tierName) {
tierName.textContent =
state.tier.name +
" Level";
}
if (remaining) {
if (
state.remaining === null
) {
remaining.textContent =
"Current mature pricing level";
}
else {
remaining.textContent =
state.remaining +
(
state.remaining === 1
? " position remaining"
: " positions remaining"
);
}
}
if (position) {
position.textContent =
"Next position #" +
state.nextPosition;
}
if (progress) {
progress.style.width =
state.progress +
"%";
}
if (progressAccessible) {
progressAccessible
.setAttribute(
"aria-valuenow",
state.used
);
progressAccessible
.setAttribute(
"aria-valuemax",
state.capacity === null
? Math.max(
state.used,
1
)
: state.capacity
);
}
if (
state.nextTier
) {
if (nextCopy) {
nextCopy.textContent =
"Once the " +
state.tier.name +
" level is filled, " +
country.name +
"'s new placement price moves to $" +
state.nextTier.price +
".";
}
if (nextPrice) {
nextPrice.textContent =
"$" +
state.nextTier.price;
}
}
else {
if (nextCopy) {
nextCopy.textContent =
country.name +
" is currently at the mature Mango Match placement level.";
}
if (nextPrice) {
nextPrice.textContent =
"$" +
state.tier.price;
}
}
if (cta) {
cta.innerHTML =
"Apply at $" +
state.tier.price +
"
→ ";
}
localStorage.setItem(
"mgm_displayed_country_price",
String(
state.tier.price
)
);
localStorage.setItem(
"mgm_displayed_country_position",
String(
state.nextPosition
)
);
localStorage.setItem(
"mgm_displayed_country_tier",
state.tier.name
);
}
function restore() {
if (
typeof window
.mgmGetSelectedCountry ===
"function"
) {
const selected =
window
.mgmGetSelectedCountry();
if (selected) {
render(
selected
);
return;
}
}
/*
* Fallback directly to B02 DOM.
*/
const countrySelect =
document.getElementById(
"mgm-country-select"
);
if (
countrySelect &&
countrySelect.value
) {
const option =
countrySelect.options[
countrySelect.selectedIndex
];
const code =
countrySelect.value;
const fallback =
window.MGM_COUNTRIES
? window.MGM_COUNTRIES.find(
function (item) {
return (
item.code ===
code
);
}
)
: null;
render(
fallback || {
code:
code,
name:
option.textContent.trim(),
flag:
""
}
);
return;
}
render(
null
);
}
window.addEventListener(
"mgm:countrychange",
function (event) {
render(
event.detail
);
}
);
window.addEventListener(
"mgm:countryruntime",
restore
);
/*
* Initial restoration.
*/
restore();
}
if (
document.readyState ===
"loading"
) {
document.addEventListener(
"DOMContentLoaded",
initMangoCountryCounter,
{
once: true
}
);
}
else {
initMangoCountryCounter();
}
})();
Current Placement Level
See where your country stands.
Placement pricing grows with each country’s Mango Match collection.
Your current price is determined by the next available position.
G
Select your country above
Your current placement price and availability will appear here.
Current Placement
$5
once-off
Current Level
0
/
10
Founding Level
10 positions remaining
Next position #1
What happens next?
Once all 10 positions at this level are taken,
the placement price increases to $15.
Next Level
$15
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B04 — PRICING PROGRESSION
========================================================= */
.mgm-pricing-progression {
--mgm-bg:
#17130f;
--mgm-bg-deep:
#14110e;
--mgm-panel:
#211c17;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-line:
rgba(
255,
245,
230,
0.12
);
position:
relative;
overflow:
hidden;
padding:
clamp(
82px,
9vw,
126px
)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
var(--mgm-bg),
var(--mgm-bg-deep)
);
}
/* subtle warm glow */
.mgm-pricing-progression::after {
content:
"";
position:
absolute;
width:
520px;
height:
520px;
right:
-300px;
top:
80px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(
244,
166,
65,
0.075
),
transparent
70%
);
pointer-events:
none;
}
.mgm-pricing-progression__inner {
position:
relative;
z-index:
2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-pricing-progression__heading {
max-width:
780px;
margin-bottom:
clamp(
34px,
5vw,
54px
);
}
.mgm-pricing-progression__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-pricing-progression__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-pricing-progression__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
48px,
6vw,
78px
);
font-weight:
500;
line-height:
0.95;
letter-spacing:
-0.038em;
}
.mgm-pricing-progression__title span {
color:
var(--mgm-gold);
}
.mgm-pricing-progression__intro {
max-width:
710px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(
16px,
1.5vw,
19px
);
line-height:
1.7;
}
/* =========================================================
CURRENT COUNTRY CONTEXT
========================================================= */
.mgm-pricing-progression__country {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
margin-bottom:
18px;
padding:
16px
20px;
border:
1px solid
rgba(
244,
166,
65,
0.18
);
border-radius:
18px;
background:
rgba(
244,
166,
65,
0.05
);
}
.mgm-pricing-progression__country[hidden] {
display:
none;
}
.mgm-pricing-progression__country-left {
display:
flex;
align-items:
center;
gap:
13px;
}
.mgm-pricing-progression__flag {
width:
44px;
height:
44px;
display:
grid;
place-items:
center;
border:
1px solid
var(--mgm-line);
border-radius:
13px;
background:
rgba(
255,
255,
255,
0.03
);
font-size:
23px;
}
.mgm-pricing-progression__country-label,
.mgm-pricing-progression__country-right span {
display:
block;
color:
rgba(
255,
245,
230,
0.46
);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-pricing-progression__country-name {
display:
block;
margin-top:
2px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
15px;
}
.mgm-pricing-progression__country-right {
text-align:
right;
}
.mgm-pricing-progression__country-right strong {
display:
block;
margin-top:
2px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
20px;
}
/* =========================================================
PROGRESSION GRID
========================================================= */
.mgm-pricing-progression__levels {
display:
grid;
grid-template-columns:
minmax(0, 1fr)
32px
minmax(0, 1fr)
32px
minmax(0, 1fr)
32px
minmax(0, 1fr)
32px
minmax(0, 1fr);
align-items:
stretch;
}
/* =========================================================
LEVEL CARD
========================================================= */
.mgm-pricing-level {
position:
relative;
min-width:
0;
padding:
23px
20px;
border:
1px solid
var(--mgm-line);
border-radius:
22px;
background:
linear-gradient(
180deg,
rgba(
255,
255,
255,
0.028
),
rgba(
255,
255,
255,
0.008
)
),
var(--mgm-panel);
transition:
border-color
0.25s
ease,
transform
0.25s
ease,
background
0.25s
ease,
box-shadow
0.25s
ease;
}
.mgm-pricing-level__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
}
.mgm-pricing-level__number {
color:
rgba(
255,
245,
230,
0.34
);
font-family:
"DM Mono",
monospace;
font-size:
10px;
letter-spacing:
0.14em;
}
.mgm-pricing-level__status {
display:
none;
padding:
5px
7px;
border:
1px solid
rgba(
244,
166,
65,
0.26
);
border-radius:
999px;
color:
var(--mgm-gold);
background:
rgba(
244,
166,
65,
0.07
);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
800;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-pricing-level__label {
margin-top:
28px;
color:
var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
700;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-pricing-level__price {
margin-top:
8px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(
38px,
4vw,
52px
);
font-weight:
800;
line-height:
0.95;
letter-spacing:
-0.055em;
}
.mgm-pricing-level__once {
margin-top:
4px;
color:
rgba(
255,
245,
230,
0.44
);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
}
.mgm-pricing-level__divider {
width:
100%;
height:
1px;
margin:
22px 0
16px;
background:
var(--mgm-line);
}
.mgm-pricing-level__range {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
700;
}
.mgm-pricing-level p {
margin:
9px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.6;
}
/* =========================================================
ACTIVE LEVEL
========================================================= */
.mgm-pricing-level.is-current {
z-index:
2;
transform:
translateY(-5px);
border-color:
rgba(
244,
166,
65,
0.56
);
background:
linear-gradient(
160deg,
rgba(
244,
166,
65,
0.11
),
rgba(
244,
166,
65,
0.025
)
55%
),
var(--mgm-panel);
box-shadow:
0 20px 50px
rgba(
244,
166,
65,
0.07
);
}
.mgm-pricing-level.is-current
.mgm-pricing-level__status {
display:
block;
}
.mgm-pricing-level.is-current
.mgm-pricing-level__number {
color:
var(--mgm-gold);
}
.mgm-pricing-level.is-current
.mgm-pricing-level__price {
color:
var(--mgm-gold);
}
/* already passed */
.mgm-pricing-level.is-passed {
opacity:
0.62;
}
/* =========================================================
CONNECTORS
========================================================= */
.mgm-pricing-progression__connector {
display:
flex;
align-items:
center;
justify-content:
center;
position:
relative;
}
.mgm-pricing-progression__connector span {
position:
absolute;
width:
100%;
height:
1px;
background:
linear-gradient(
90deg,
rgba(
255,
245,
230,
0.06
),
rgba(
244,
166,
65,
0.26
),
rgba(
255,
245,
230,
0.06
)
);
}
.mgm-pricing-progression__connector i {
position:
relative;
z-index:
2;
display:
grid;
place-items:
center;
width:
20px;
height:
20px;
border-radius:
50%;
color:
var(--mgm-gold);
background:
var(--mgm-bg-deep);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-style:
normal;
}
/* =========================================================
PRINCIPLE
========================================================= */
.mgm-pricing-progression__principle {
display:
grid;
grid-template-columns:
34px
minmax(
0,
1fr
);
gap:
16px;
max-width:
850px;
margin-top:
32px;
}
.mgm-pricing-progression__principle-mark {
padding-top:
9px;
}
.mgm-pricing-progression__principle-mark span {
display:
block;
width:
28px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-pricing-progression__principle-label {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
}
.mgm-pricing-progression__principle p {
margin:
7px 0 0;
color:
rgba(
255,
245,
230,
0.56
);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.7;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.mgm-pricing-progression__action {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
margin-top:
42px;
padding-top:
26px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-pricing-progression__action
> div
> span {
display:
block;
color:
rgba(
255,
245,
230,
0.44
);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-pricing-progression__action
> div
> strong {
display:
block;
margin-top:
3px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
14px;
}
.mgm-pricing-progression__cta {
min-height:
50px;
flex:
0 0 auto;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
10px;
padding:
0 22px;
border-radius:
999px;
color:
#1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
font-weight:
800;
text-decoration:
none !important;
transition:
transform
0.2s
ease,
box-shadow
0.2s
ease;
}
.mgm-pricing-progression__cta:hover {
transform:
translateY(-2px);
box-shadow:
0 12px
34px
rgba(
244,
166,
65,
0.16
);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1040px) {
.mgm-pricing-progression__levels {
grid-template-columns:
repeat(
5,
minmax(
180px,
1fr
)
);
gap:
12px;
overflow-x:
auto;
padding:
6px
2px
18px;
scrollbar-width:
thin;
scrollbar-color:
rgba(
244,
166,
65,
0.35
)
rgba(
255,
255,
255,
0.04
);
}
.mgm-pricing-progression__connector {
display:
none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-pricing-progression {
padding:
70px
18px
76px;
}
.mgm-pricing-progression__country {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-pricing-progression__country-right {
width:
100%;
padding-top:
13px;
border-top:
1px solid
var(--mgm-line);
text-align:
left;
}
.mgm-pricing-progression__levels {
display:
grid;
grid-template-columns:
1fr;
overflow:
visible;
padding:
0;
}
.mgm-pricing-level {
min-width:
0;
}
.mgm-pricing-level.is-current {
transform:
none;
}
.mgm-pricing-progression__action {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-pricing-progression__cta {
width:
100%;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B04 — PRICING PROGRESSION
========================================================= */
/*
* B04 uses the pricing structure
* already established by B03:
*
* MGM_PRICE_TIERS
*
* and the occupancy function:
*
* mgmGetCountryOccupancy()
*
* This keeps B03 + B04 synchronized.
*/
/* =========================================================
ELEMENTS
========================================================= */
const mgmPricingCountry =
document.getElementById(
"mgm-pricing-country"
);
const mgmPricingFlag =
document.getElementById(
"mgm-pricing-flag"
);
const mgmPricingCountryName =
document.getElementById(
"mgm-pricing-country-name"
);
const mgmPricingCurrentPrice =
document.getElementById(
"mgm-pricing-current-price"
);
const mgmPricingCTAContext =
document.getElementById(
"mgm-pricing-cta-context"
);
const mgmPricingCTA =
document.getElementById(
"mgm-pricing-cta"
);
const mgmPricingLevels =
Array.from(
document.querySelectorAll(
".mgm-pricing-level"
)
);
/* =========================================================
GET COUNTRY PRICE STATE
========================================================= */
function mgmGetProgressionState(
countryCode
) {
/*
* B03 function.
*/
if (
typeof mgmGetCountryOccupancy !==
"function"
) {
return null;
}
const occupied =
mgmGetCountryOccupancy(
countryCode
);
/*
* B03 pricing function.
*/
if (
typeof mgmGetPricingState !==
"function"
) {
return null;
}
return mgmGetPricingState(
occupied
);
}
/* =========================================================
CLEAR LEVEL STATES
========================================================= */
function mgmResetPricingLevels() {
mgmPricingLevels.forEach(
function(level) {
level.classList.remove(
"is-current",
"is-passed"
);
}
);
}
/* =========================================================
RENDER PROGRESSION
========================================================= */
function mgmRenderPricingProgression(
country
) {
if (!country) {
mgmPricingCountry.hidden =
true;
mgmResetPricingLevels();
mgmPricingCTAContext.textContent =
"Select your country to see your current level.";
return;
}
const state =
mgmGetProgressionState(
country.code
);
if (!state) {
return;
}
/*
* Country summary.
*/
mgmPricingCountry.hidden =
false;
mgmPricingFlag.textContent =
country.flag || "";
mgmPricingCountryName.textContent =
country.name;
mgmPricingCurrentPrice.textContent =
"$" +
state.tier.price;
/*
* Reset first.
*/
mgmResetPricingLevels();
/*
* Current and passed tiers.
*/
mgmPricingLevels.forEach(
function(level) {
const tierIndex =
Number(
level.dataset.mgmTier
);
if (
tierIndex ===
state.tierIndex
) {
level.classList.add(
"is-current"
);
}
else if (
tierIndex <
state.tierIndex
) {
level.classList.add(
"is-passed"
);
}
}
);
/*
* Bottom contextual message.
*/
mgmPricingCTAContext.textContent =
country.name +
" is currently at $" +
state.tier.price +
" once-off.";
/*
* CTA includes current price.
*/
mgmPricingCTA.innerHTML =
"Apply at $" +
state.tier.price +
"
→ ";
}
/* =========================================================
LISTEN TO B02 COUNTRY CHANGE
========================================================= */
window.addEventListener(
"mgm:countrychange",
function(event) {
mgmRenderPricingProgression(
event.detail
);
}
);
/* =========================================================
RESTORE COUNTRY ON LOAD
========================================================= */
function mgmRestorePricingProgression() {
const savedCode =
localStorage.getItem(
"mgm_selected_country"
);
if (!savedCode) {
mgmRenderPricingProgression(
null
);
return;
}
/*
* MGM_COUNTRIES is defined by B02.
*/
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
const country =
MGM_COUNTRIES.find(
function(item) {
return (
item.code ===
savedCode
);
}
);
if (country) {
mgmRenderPricingProgression(
country
);
}
}
mgmRestorePricingProgression();
Placement Progression
Join earlier.Enter at a lower price.
Each country begins with 10 founding placements at $5.
As its Mango Match collection grows, the one-time placement
price progresses through the levels below.
Founding
$5
once-off
Positions 1–10
The first 10 qualifying establishments
in each country.
→
Early
$15
once-off
Positions 11–25
Early establishments joining as
the country collection develops.
→
Growing
$25
once-off
Positions 26–50
The country collection is gaining
depth across destinations and categories.
→
Established
$40
once-off
Positions 51–100
Mango Match has developed a broader
presence within the country.
→
Mature
$60
once-off
Position 101+
The established country placement
price once the collection reaches scale.
Early Partner Advantage
Your original placement price is based on the country
position reserved for you when your application is approved.
Joining later does not retroactively change what earlier
partners paid for their original placement.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B05 — MANGO MATCH CARD PREVIEW
========================================================= */
.mgm-card-preview {
--mgm-bg:
#14110e;
--mgm-bg-soft:
#181410;
--mgm-panel:
#211c17;
--mgm-panel-light:
#2b241d;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-line:
rgba(
255,
245,
230,
0.12
);
position:
relative;
overflow:
hidden;
padding:
clamp(
82px,
9vw,
126px
)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
#14110e,
#181410
);
}
/* ambient background glow */
.mgm-card-preview::before {
content:
"";
position:
absolute;
width:
540px;
height:
540px;
left:
-310px;
top:
260px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(
244,
166,
65,
0.075
),
transparent 70%
);
pointer-events:
none;
}
.mgm-card-preview__inner {
position:
relative;
z-index:
2;
width:
min(
1180px,
100%
);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-card-preview__heading {
max-width:
820px;
margin-bottom:
clamp(
44px,
6vw,
72px
);
}
.mgm-card-preview__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-card-preview__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-card-preview__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
48px,
6vw,
78px
);
font-weight:
500;
line-height:
0.96;
letter-spacing:
-0.038em;
}
.mgm-card-preview__title span {
display:
block;
color:
var(--mgm-gold);
}
.mgm-card-preview__intro {
max-width:
740px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(
16px,
1.5vw,
19px
);
line-height:
1.72;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.mgm-card-preview__layout {
display:
grid;
grid-template-columns:
minmax(
340px,
0.82fr
)
minmax(
0,
1.18fr
);
gap:
clamp(
48px,
7vw,
92px
);
align-items:
center;
}
/* =========================================================
DEVICE
========================================================= */
.mgm-card-preview__device-wrap {
width:
100%;
display:
flex;
justify-content:
center;
}
.mgm-card-preview__device {
width:
min(
100%,
390px
);
padding:
11px;
border:
1px solid
rgba(
255,
255,
255,
0.11
);
border-radius:
40px;
background:
#0d0b09;
box-shadow:
0 34px 90px
rgba(
0,
0,
0,
0.42
);
}
/* =========================================================
APP BAR
========================================================= */
.mgm-card-preview__appbar {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
16px;
padding:
15px 17px;
color:
var(--mgm-cream);
}
.mgm-card-preview__brand {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.16em;
}
.mgm-card-preview__appbar-context {
color:
rgba(
255,
245,
230,
0.48
);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
}
/* =========================================================
DEMO CARD
========================================================= */
.mgm-match-demo-card {
overflow:
hidden;
border-radius:
29px;
background:
#f0e8dd;
color:
#21170f;
}
/* IMAGE */
.mgm-match-demo-card__image {
position:
relative;
height:
300px;
overflow:
hidden;
display:
flex;
align-items:
flex-end;
padding:
20px;
background:
radial-gradient(
circle at 22% 24%,
rgba(
255,
218,
174,
0.56
),
transparent
30%
),
linear-gradient(
135deg,
#5e493c 0%,
#9e7355 34%,
#dab894 64%,
#785442 100%
);
}
/* abstract image depth */
.mgm-match-demo-card__image::before {
content:
"";
position:
absolute;
width:
210px;
height:
210px;
right:
-45px;
top:
40px;
border:
26px solid
rgba(
255,
240,
217,
0.22
);
border-radius:
50%;
transform:
rotate(-12deg);
}
.mgm-match-demo-card__image::after {
content:
"";
position:
absolute;
width:
220px;
height:
90px;
left:
-40px;
bottom:
25px;
border-radius:
50%;
background:
rgba(
57,
34,
21,
0.20
);
transform:
rotate(-14deg);
}
.mgm-match-demo-card__image-overlay {
position:
absolute;
inset:
0;
background:
linear-gradient(
180deg,
rgba(
0,
0,
0,
0.02
),
rgba(
0,
0,
0,
0.34
)
);
}
.mgm-match-demo-card__image-label {
position:
relative;
z-index:
3;
padding:
7px
10px;
border-radius:
999px;
color:
white;
background:
rgba(
0,
0,
0,
0.28
);
backdrop-filter:
blur(8px);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.11em;
text-transform:
uppercase;
}
.mgm-match-demo-card__save-indicator {
position:
absolute;
z-index:
3;
top:
17px;
right:
17px;
padding:
7px
10px;
border:
1px solid
rgba(
255,
255,
255,
0.25
);
border-radius:
999px;
color:
white;
background:
rgba(
0,
0,
0,
0.20
);
backdrop-filter:
blur(8px);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
}
/* =========================================================
CARD BODY
========================================================= */
.mgm-match-demo-card__body {
padding:
22px;
}
.mgm-match-demo-card__location {
display:
flex;
flex-wrap:
wrap;
align-items:
center;
gap:
6px;
color:
#876c57;
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.11em;
text-transform:
uppercase;
}
.mgm-match-demo-card__location-dot {
color:
#d87916;
}
.mgm-match-demo-card__title {
margin:
9px 0 0;
color:
#21170f;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
31px;
font-weight:
600;
line-height:
1;
letter-spacing:
-0.025em;
}
.mgm-match-demo-card__description {
margin:
10px 0 0;
color:
#66584c;
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.6;
}
/* tags */
.mgm-match-demo-card__tags {
display:
flex;
flex-wrap:
wrap;
gap:
6px;
margin-top:
15px;
}
.mgm-match-demo-card__tags span {
padding:
6px 8px;
border-radius:
999px;
color:
#4e3929;
background:
#e3d3c2;
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
}
/* Why section */
.mgm-match-demo-card__why {
margin-top:
17px;
padding:
13px 14px;
border-left:
2px solid
#d87916;
background:
rgba(
216,
121,
22,
0.07
);
}
.mgm-match-demo-card__why-label {
color:
#8b5a2d;
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
800;
letter-spacing:
0.10em;
text-transform:
uppercase;
}
.mgm-match-demo-card__why p {
margin:
5px 0 0;
color:
#5e5044;
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.5;
}
/* actions */
.mgm-match-demo-card__actions {
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
gap:
7px;
margin-top:
17px;
}
.mgm-match-demo-card__action {
min-height:
40px;
padding:
0 8px;
border:
1px solid
#d6c7b8;
border-radius:
12px;
color:
#46382d;
background:
transparent;
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
cursor:
pointer;
transition:
transform
0.18s
ease,
background
0.18s
ease,
color
0.18s
ease;
}
.mgm-match-demo-card__action:hover {
transform:
translateY(-1px);
}
.mgm-match-demo-card__action--primary {
border-color:
#211c17;
color:
#fff5e6;
background:
#211c17;
}
.mgm-match-demo-card__action.is-active {
border-color:
#d87916;
color:
#21170f;
background:
#f4a641;
}
.mgm-match-demo-card__feedback {
min-height:
16px;
margin-top:
10px;
color:
#877568;
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
text-align:
center;
}
/* =========================================================
RIGHT EXPLANATION
========================================================= */
.mgm-card-preview__explanation {
max-width:
650px;
}
.mgm-card-preview__mini-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-card-preview__explanation-header h3 {
max-width:
590px;
margin:
12px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
34px,
4vw,
48px
);
font-weight:
500;
line-height:
1.02;
}
.mgm-card-preview__explanation-header > p {
max-width:
600px;
margin:
17px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
14px;
line-height:
1.7;
}
.mgm-card-preview__explanation-header blockquote {
margin:
21px 0 32px;
padding:
0 0 0 17px;
border-left:
1px solid
var(--mgm-gold);
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(
25px,
3vw,
34px
);
font-style:
italic;
line-height:
1.15;
}
/* =========================================================
FEATURES
========================================================= */
.mgm-card-preview__feature {
display:
grid;
grid-template-columns:
38px
minmax(
0,
1fr
);
gap:
15px;
padding:
18px 0;
border-top:
1px solid
var(--mgm-line);
}
.mgm-card-preview__feature-number {
padding-top:
2px;
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
10px;
letter-spacing:
0.10em;
}
.mgm-card-preview__feature strong {
display:
block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
14px;
font-weight:
700;
}
.mgm-card-preview__feature p {
max-width:
560px;
margin:
6px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.65;
}
/* =========================================================
BOTTOM PRINCIPLE
========================================================= */
.mgm-card-preview__principle {
display:
grid;
grid-template-columns:
44px
minmax(
0,
1fr
);
gap:
17px;
max-width:
850px;
margin-top:
clamp(
46px,
6vw,
70px
);
padding-top:
28px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-card-preview__principle-line {
width:
38px;
height:
1px;
margin-top:
10px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(
244,
166,
65,
0.10
)
);
}
.mgm-card-preview__principle-label {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
800;
letter-spacing:
0.10em;
text-transform:
uppercase;
}
.mgm-card-preview__principle p {
margin:
7px 0 0;
color:
rgba(
255,
245,
230,
0.56
);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.7;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.mgm-card-preview__layout {
grid-template-columns:
1fr;
gap:
58px;
}
.mgm-card-preview__device-wrap {
justify-content:
flex-start;
}
.mgm-card-preview__explanation {
max-width:
760px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-card-preview {
padding:
70px
18px
76px;
}
.mgm-card-preview__heading {
margin-bottom:
40px;
}
.mgm-card-preview__device-wrap {
justify-content:
center;
}
.mgm-card-preview__device {
width:
min(
100%,
350px
);
border-radius:
34px;
}
.mgm-match-demo-card__image {
height:
260px;
}
.mgm-match-demo-card__body {
padding:
19px;
}
.mgm-match-demo-card__title {
font-size:
28px;
}
.mgm-card-preview__principle {
grid-template-columns:
28px
1fr;
}
.mgm-card-preview__principle-line {
width:
26px;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B05 — CARD PREVIEW
========================================================= */
/* =========================================================
ELEMENTS
========================================================= */
const mgmCardCountry =
document.getElementById(
"mgm-card-country"
);
const mgmCardDemoFeedback =
document.getElementById(
"mgm-card-demo-feedback"
);
const mgmCardDemoActions =
Array.from(
document.querySelectorAll(
".mgm-match-demo-card__action"
)
);
/* =========================================================
UPDATE COUNTRY FROM B02
========================================================= */
function mgmUpdateCardCountry(
country
) {
if (
!country ||
!mgmCardCountry
) {
return;
}
mgmCardCountry.textContent =
country.name;
}
/*
* Listen for B02 country changes.
*/
window.addEventListener(
"mgm:countrychange",
function(event) {
mgmUpdateCardCountry(
event.detail
);
}
);
/* =========================================================
RESTORE SAVED COUNTRY
========================================================= */
function mgmRestoreCardCountry() {
const savedCode =
localStorage.getItem(
"mgm_selected_country"
);
if (!savedCode) {
return;
}
/*
* MGM_COUNTRIES is created in B02.
*/
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
const country =
MGM_COUNTRIES.find(
function(item) {
return (
item.code ===
savedCode
);
}
);
if (country) {
mgmUpdateCardCountry(
country
);
}
}
/* =========================================================
CARD INTERACTION DEMO
========================================================= */
const mgmDemoMessages = {
skip:
"Not for this getaway — couples can keep discovering.",
explore:
"Interested — couples can learn more about the experience.",
save:
"Saved — a possibility they may want to experience together."
};
mgmCardDemoActions.forEach(
function(button) {
button.addEventListener(
"click",
function() {
const action =
button.dataset.demoAction;
/*
* Clear previous active state.
*/
mgmCardDemoActions.forEach(
function(item) {
item.classList.remove(
"is-active"
);
}
);
/*
* Highlight selected interaction.
*/
button.classList.add(
"is-active"
);
/*
* Explain the interaction.
*/
if (
mgmDemoMessages[
action
]
) {
mgmCardDemoFeedback.textContent =
mgmDemoMessages[
action
];
}
}
);
}
);
mgmRestoreCardCountry();
Your Mango Match Card
More than a listing.
A reason to choose you.
Mango Match presents your establishment around the experience
two people could have together — helping couples move from
browsing possibilities to discovering something they both
want to explore.
MANGO MATCH
Discover Together
Your Experience Photo
Save
Greece
•
Your Destination
Make Something Together
A hands-on local experience that gives couples
time to slow down, create something together and
leave with a memory connected to the destination.
Creative
Local
Shared Experience
Why couples may love it
You are not only giving them something to do.
You are giving them something to remember doing together.
Skip
Explore
Save
Couples interact with possibilities together.
01
Lead with the experience
We position what makes your establishment meaningful
for two people rather than simply repeating a business
description.
02
Give couples useful context
Destination, experience type, atmosphere and relevant
discovery signals help couples understand whether your
experience suits the getaway they are imagining.
03
Create a direct route back to you
Interested couples can continue to your preferred
website, direct booking page or enquiry route to learn
more and take the next step.
04
Become part of couple discovery
Your card sits inside a system built around discovering,
saving and comparing getaway possibilities together.
The Mango Match Difference
The card is built around traveler interest first.
Your business details support the decision — they do not
replace the experience itself.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B06 — WHAT YOU RECEIVE
========================================================= */
.mgm-placement-includes {
--mgm-bg:
#181410;
--mgm-bg-deep:
#14110e;
--mgm-panel:
#211c17;
--mgm-panel-light:
#2b241d;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
position:
relative;
overflow:
hidden;
padding:
clamp(82px, 9vw, 126px)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
var(--mgm-bg),
var(--mgm-bg-deep)
);
}
/* =========================================================
AMBIENT DETAIL
========================================================= */
.mgm-placement-includes::before {
content:
"";
position:
absolute;
width:
480px;
height:
480px;
right:
-280px;
bottom:
80px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.07),
transparent 70%
);
pointer-events:
none;
}
.mgm-placement-includes__inner {
position:
relative;
z-index:
2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-placement-includes__heading {
max-width:
760px;
margin-bottom:
clamp(38px, 5vw, 58px);
}
.mgm-placement-includes__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-placement-includes__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-placement-includes__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight:
500;
line-height:
0.96;
letter-spacing:
-0.038em;
}
.mgm-placement-includes__intro {
max-width:
700px;
margin:
21px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height:
1.72;
}
/* =========================================================
PRIMARY VALUE PANEL
========================================================= */
.mgm-placement-includes__primary {
display:
grid;
grid-template-columns:
minmax(0, 1.2fr)
minmax(300px, 0.8fr);
gap:
clamp(32px, 6vw, 74px);
align-items:
center;
margin-bottom:
18px;
padding:
clamp(28px, 4vw, 42px);
border:
1px solid
rgba(244, 166, 65, 0.22);
border-radius:
28px;
background:
linear-gradient(
140deg,
rgba(244, 166, 65, 0.075),
transparent 44%
),
var(--mgm-panel);
box-shadow:
0 24px 70px
rgba(0, 0, 0, 0.20);
}
.mgm-placement-includes__primary-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-placement-includes__primary-copy h3 {
max-width:
590px;
margin:
11px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(32px, 4vw, 48px);
font-weight:
500;
line-height:
1.02;
}
.mgm-placement-includes__primary-copy p {
max-width:
620px;
margin:
16px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
line-height:
1.7;
}
/* =========================================================
SUMMARY
========================================================= */
.mgm-placement-includes__primary-summary {
display:
grid;
gap:
10px;
}
.mgm-placement-includes__summary-item {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
padding:
14px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-placement-includes__summary-item:first-child {
border-top:
1px solid
var(--mgm-line);
}
.mgm-placement-includes__summary-item span {
color:
rgba(255, 245, 230, 0.48);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.10em;
text-transform:
uppercase;
}
.mgm-placement-includes__summary-item strong {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
font-weight:
700;
text-align:
right;
}
/* =========================================================
BENEFIT GRID
========================================================= */
.mgm-placement-includes__grid {
display:
grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
14px;
}
/* =========================================================
BENEFIT CARD
========================================================= */
.mgm-placement-benefit {
position:
relative;
min-height:
270px;
padding:
23px;
overflow:
hidden;
border:
1px solid
var(--mgm-line);
border-radius:
22px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.026),
rgba(255, 255, 255, 0.006)
),
var(--mgm-panel);
transition:
border-color 0.2s ease,
transform 0.2s ease,
background 0.2s ease;
}
.mgm-placement-benefit:hover {
transform:
translateY(-3px);
border-color:
rgba(255, 245, 230, 0.20);
}
.mgm-placement-benefit__number {
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
10px;
font-weight:
500;
letter-spacing:
0.14em;
}
.mgm-placement-benefit__content {
margin-top:
40px;
}
.mgm-placement-benefit__label {
color:
rgba(255, 245, 230, 0.46);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-placement-benefit h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(25px, 2.6vw, 32px);
font-weight:
500;
line-height:
1.02;
}
.mgm-placement-benefit p {
margin:
12px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.68;
}
/* =========================================================
FOUNDING CARD
========================================================= */
.mgm-placement-benefit--founding {
border-color:
rgba(244, 166, 65, 0.28);
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.08),
transparent 48%
),
var(--mgm-panel);
}
.mgm-placement-benefit--founding::after {
content:
"";
position:
absolute;
width:
150px;
height:
150px;
top:
-85px;
right:
-80px;
border-radius:
50%;
background:
rgba(244, 166, 65, 0.08);
}
.mgm-placement-benefit__founding-status {
display:
inline-flex;
margin-top:
16px;
padding:
7px 10px;
border:
1px solid
rgba(244, 166, 65, 0.20);
border-radius:
999px;
color:
var(--mgm-gold);
background:
rgba(244, 166, 65, 0.055);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
}
/* =========================================================
CLARITY
========================================================= */
.mgm-placement-includes__clarity {
display:
grid;
grid-template-columns:
42px
minmax(0, 1fr);
gap:
16px;
max-width:
920px;
margin-top:
34px;
padding-top:
27px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-placement-includes__clarity-line {
width:
36px;
height:
1px;
margin-top:
10px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.12)
);
}
.mgm-placement-includes__clarity-label {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-placement-includes__clarity-copy p {
margin:
7px 0 0;
color:
rgba(255, 245, 230, 0.56);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.7;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-placement-includes__primary {
grid-template-columns:
1fr;
}
.mgm-placement-includes__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-placement-includes {
padding:
70px
18px
76px;
}
.mgm-placement-includes__primary {
padding:
24px 20px;
border-radius:
23px;
}
.mgm-placement-includes__summary-item {
align-items:
flex-start;
flex-direction:
column;
gap:
5px;
}
.mgm-placement-includes__summary-item strong {
text-align:
left;
}
.mgm-placement-includes__grid {
grid-template-columns:
1fr;
}
.mgm-placement-benefit {
min-height:
auto;
}
.mgm-placement-benefit__content {
margin-top:
28px;
}
.mgm-placement-includes__clarity {
grid-template-columns:
28px
1fr;
}
.mgm-placement-includes__clarity-line {
width:
25px;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B06 — WHAT YOU RECEIVE
========================================================= */
/* =========================================================
ELEMENTS
========================================================= */
const mgmIncludesCountry =
document.getElementById(
"mgm-includes-country"
);
const mgmIncludesFoundingTitle =
document.getElementById(
"mgm-includes-founding-title"
);
const mgmIncludesFoundingStatus =
document.getElementById(
"mgm-includes-founding-status"
);
/* =========================================================
UPDATE COUNTRY CONTEXT
========================================================= */
function mgmUpdatePlacementIncludes(
country
) {
if (!country) {
return;
}
/*
* Primary summary.
*/
if (mgmIncludesCountry) {
mgmIncludesCountry.textContent =
country.name;
}
/*
* Founding-country benefit.
*/
if (mgmIncludesFoundingTitle) {
mgmIncludesFoundingTitle.textContent =
"First 10 in " +
country.name;
}
if (mgmIncludesFoundingStatus) {
mgmIncludesFoundingStatus.textContent =
"Founding " +
country.name +
" positions 1–10";
}
}
/* =========================================================
LISTEN TO B02
========================================================= */
window.addEventListener(
"mgm:countrychange",
function(event) {
mgmUpdatePlacementIncludes(
event.detail
);
}
);
/* =========================================================
RESTORE SAVED COUNTRY
========================================================= */
function mgmRestorePlacementIncludes() {
const savedCode =
localStorage.getItem(
"mgm_selected_country"
);
if (!savedCode) {
return;
}
/*
* MGM_COUNTRIES is supplied by B02.
*/
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
const country =
MGM_COUNTRIES.find(
function(item) {
return (
item.code ===
savedCode
);
}
);
if (country) {
mgmUpdatePlacementIncludes(
country
);
}
}
mgmRestorePlacementIncludes();
Your Placement
What you receive.
An approved Mango Match placement gives your establishment
a dedicated discovery presence built around what couples
could genuinely experience with you.
Included with your placement
One Mango Match discovery card,
built around your experience.
We combine your approved business information,
destination context and authorized media into a card
designed for couples exploring getaway possibilities
together.
Placement Type
Mango Match Card
Payment Model
One-time
Destination
Your Country
01
Discovery Presence
Your own Mango Match card
A dedicated card introduces your establishment
as something couples can discover while exploring
destination possibilities together.
02
Destination Context
Placed where you belong
Your card is connected to the appropriate country,
destination and discovery category so couples can
encounter it in a relevant context.
03
Couple-Focused Positioning
Your experience, interpreted for two
Mango Match focuses on what two people could
experience, enjoy or remember together rather
than presenting only generic business information.
04
Direct Route
Interest can continue back to you
Your approved card can direct interested couples
to your preferred website, direct booking page
or enquiry route to continue the relationship.
05
Founding Country Recognition
First 10 in your country
Establishments accepted into positions 1–10
are recorded as part of that country’s founding
Mango Match collection.
Select your country above to personalize this benefit.
06
Future Opportunities
A pathway to deeper collaboration
Strong destination and traveler fits may later
be considered separately for Mango Getaway
Featured Partner opportunities.
Clear From the Start
Mango Match placement creates a professional discovery
presence. It does not guarantee a specific number of views,
enquiries, bookings, rankings or inclusion inside a
Mango Getaway itinerary.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B07 — MANGO MATCH VS FEATURED PARTNER
========================================================= */
.mgm-partnership-paths {
--mgm-bg:
#14110e;
--mgm-panel:
#211c17;
--mgm-panel-soft:
#1b1713;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
position:
relative;
overflow:
hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
var(--mgm-bg);
}
/* ambient light */
.mgm-partnership-paths::before {
content:
"";
position:
absolute;
width:
500px;
height:
500px;
top:
180px;
right:
-320px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.075),
transparent 70%
);
pointer-events:
none;
}
.mgm-partnership-paths__inner {
position:
relative;
z-index:
2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-partnership-paths__heading {
max-width:
850px;
margin-bottom:
clamp(44px, 6vw, 70px);
}
.mgm-partnership-paths__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-partnership-paths__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-partnership-paths__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight:
500;
line-height:
0.96;
letter-spacing:
-0.038em;
}
.mgm-partnership-paths__title span {
display:
block;
color:
var(--mgm-gold);
}
.mgm-partnership-paths__intro {
max-width:
740px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height:
1.72;
}
/* =========================================================
COMPARISON LAYOUT
========================================================= */
.mgm-partnership-paths__comparison {
display:
grid;
grid-template-columns:
minmax(0, 1fr)
70px
minmax(0, 1fr);
align-items:
stretch;
}
/* =========================================================
MAIN PATH CARDS
========================================================= */
.mgm-partnership-path {
position:
relative;
overflow:
hidden;
display:
flex;
flex-direction:
column;
padding:
clamp(26px, 3vw, 36px);
border:
1px solid
var(--mgm-line);
border-radius:
28px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.008)
),
var(--mgm-panel);
}
/* Mango Match card */
.mgm-partnership-path--match {
border-color:
rgba(255, 245, 230, 0.14);
}
/* Featured card */
.mgm-partnership-path--featured {
border-color:
rgba(244, 166, 65, 0.30);
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.075),
transparent 42%
),
var(--mgm-panel);
}
.mgm-partnership-path--featured::after {
content:
"";
position:
absolute;
width:
230px;
height:
230px;
top:
-130px;
right:
-120px;
border-radius:
50%;
background:
rgba(244, 166, 65, 0.07);
pointer-events:
none;
}
/* =========================================================
CARD TOP
========================================================= */
.mgm-partnership-path__top {
position:
relative;
z-index:
2;
display:
flex;
align-items:
flex-start;
justify-content:
space-between;
gap:
20px;
}
.mgm-partnership-path__type {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-partnership-path__purpose {
margin-top:
4px;
color:
rgba(255, 245, 230, 0.48);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
}
.mgm-partnership-path__number {
color:
rgba(255, 245, 230, 0.23);
font-family:
"DM Mono",
monospace;
font-size:
11px;
letter-spacing:
0.12em;
}
/* =========================================================
HEADLINE
========================================================= */
.mgm-partnership-path__headline {
margin-top:
40px;
}
.mgm-partnership-path__headline h3 {
max-width:
480px;
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(32px, 3.5vw, 44px);
font-weight:
500;
line-height:
1;
}
.mgm-partnership-path__headline p {
max-width:
500px;
margin:
15px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
line-height:
1.7;
}
/* =========================================================
MANGO MATCH COUNTRY CONTEXT
========================================================= */
.mgm-partnership-path__context {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
10px;
margin-top:
27px;
}
.mgm-partnership-path__context > div {
padding:
15px;
border:
1px solid
var(--mgm-line);
border-radius:
15px;
background:
rgba(255, 255, 255, 0.02);
}
.mgm-partnership-path__context span {
display:
block;
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-partnership-path__context strong {
display:
block;
margin-top:
4px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
}
/* =========================================================
FEATURED CONTEXT
========================================================= */
.mgm-partnership-path__featured-context {
margin-top:
27px;
padding:
17px 18px;
border:
1px solid
rgba(244, 166, 65, 0.22);
border-radius:
16px;
background:
rgba(244, 166, 65, 0.055);
}
.mgm-partnership-path__featured-context > span {
display:
block;
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-partnership-path__featured-context strong {
display:
block;
margin-top:
3px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
14px;
}
.mgm-partnership-path__featured-context p {
margin:
7px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.6;
}
/* =========================================================
DETAIL ROWS
========================================================= */
.mgm-partnership-path__details {
margin-top:
30px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partnership-path__detail {
display:
grid;
grid-template-columns:
32px
minmax(0, 1fr);
gap:
12px;
padding:
17px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-partnership-path__detail > span {
padding-top:
2px;
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
9px;
}
.mgm-partnership-path__detail strong {
display:
block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
}
.mgm-partnership-path__detail p {
margin:
5px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.6;
}
/* =========================================================
CARD FOOTER
========================================================= */
.mgm-partnership-path__footer {
margin-top:
auto;
padding-top:
28px;
}
.mgm-partnership-path__footer > div:first-child > span {
display:
block;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-partnership-path__footer > div:first-child > strong {
display:
block;
margin-top:
5px;
color:
var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.55;
}
/* button */
.mgm-partnership-path__button {
width:
100%;
min-height:
49px;
display:
flex;
align-items:
center;
justify-content:
center;
margin-top:
20px;
padding:
0 20px;
border-radius:
999px;
color:
#1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc56c
);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
800;
text-decoration:
none !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partnership-path__button:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
/* invitation state */
.mgm-partnership-path__invitation {
width:
100%;
min-height:
49px;
display:
flex;
align-items:
center;
justify-content:
center;
margin-top:
20px;
padding:
0 20px;
border:
1px solid
rgba(244, 166, 65, 0.22);
border-radius:
999px;
color:
var(--mgm-gold);
background:
rgba(244, 166, 65, 0.055);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
700;
}
/* =========================================================
CENTER DIVIDER
========================================================= */
.mgm-partnership-paths__divider {
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
13px;
}
.mgm-partnership-paths__divider span {
width:
1px;
flex:
1;
background:
linear-gradient(
transparent,
rgba(244, 166, 65, 0.22)
);
}
.mgm-partnership-paths__divider span:last-child {
background:
linear-gradient(
rgba(244, 166, 65, 0.22),
transparent
);
}
.mgm-partnership-paths__divider div {
writing-mode:
vertical-rl;
transform:
rotate(180deg);
color:
rgba(255, 245, 230, 0.32);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.15em;
text-transform:
uppercase;
}
/* =========================================================
PRINCIPLE
========================================================= */
.mgm-partnership-paths__principle {
display:
grid;
grid-template-columns:
42px
minmax(0, 1fr);
gap:
16px;
max-width:
930px;
margin-top:
38px;
padding-top:
28px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partnership-paths__principle-line {
width:
35px;
height:
1px;
margin-top:
10px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.10)
);
}
.mgm-partnership-paths__principle-label {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-partnership-paths__principle p {
margin:
7px 0 0;
color:
rgba(255, 245, 230, 0.57);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.72;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-partnership-paths__comparison {
grid-template-columns:
1fr;
gap:
18px;
}
.mgm-partnership-paths__divider {
flex-direction:
row;
min-height:
38px;
}
.mgm-partnership-paths__divider span {
width:
auto;
height:
1px;
flex:
1;
background:
linear-gradient(
90deg,
transparent,
rgba(244, 166, 65, 0.22)
);
}
.mgm-partnership-paths__divider span:last-child {
background:
linear-gradient(
90deg,
rgba(244, 166, 65, 0.22),
transparent
);
}
.mgm-partnership-paths__divider div {
writing-mode:
initial;
transform:
none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-partnership-paths {
padding:
70px
18px
76px;
}
.mgm-partnership-path {
padding:
24px 20px;
border-radius:
23px;
}
.mgm-partnership-path__context {
grid-template-columns:
1fr;
}
.mgm-partnership-paths__principle {
grid-template-columns:
27px
1fr;
}
.mgm-partnership-paths__principle-line {
width:
24px;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B07 — MANGO MATCH VS FEATURED PARTNER
========================================================= */
/* =========================================================
ELEMENTS
========================================================= */
const mgmPartnershipCountry =
document.getElementById(
"mgm-partnership-country"
);
const mgmPartnershipPrice =
document.getElementById(
"mgm-partnership-price"
);
/* =========================================================
UPDATE MANGO MATCH CONTEXT
========================================================= */
function mgmUpdatePartnershipPath(
country
) {
if (!country) {
return;
}
/*
* Country.
*/
if (mgmPartnershipCountry) {
mgmPartnershipCountry.textContent =
country.name;
}
/*
* Obtain the current price using
* B03's shared pricing functions.
*/
if (
typeof mgmGetCountryOccupancy ===
"function" &&
typeof mgmGetPricingState ===
"function"
) {
const occupied =
mgmGetCountryOccupancy(
country.code
);
const pricing =
mgmGetPricingState(
occupied
);
if (
pricing &&
mgmPartnershipPrice
) {
mgmPartnershipPrice.textContent =
"$" +
pricing.tier.price +
" once-off";
}
}
}
/* =========================================================
LISTEN TO B02
========================================================= */
window.addEventListener(
"mgm:countrychange",
function(event) {
mgmUpdatePartnershipPath(
event.detail
);
}
);
/* =========================================================
RESTORE SAVED COUNTRY
========================================================= */
function mgmRestorePartnershipPath() {
const savedCode =
localStorage.getItem(
"mgm_selected_country"
);
if (!savedCode) {
return;
}
/*
* Country catalogue supplied
* by B02.
*/
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
const country =
MGM_COUNTRIES.find(
function(item) {
return (
item.code ===
savedCode
);
}
);
if (country) {
mgmUpdatePartnershipPath(
country
);
}
}
mgmRestorePartnershipPath();
Ways to Work With Mango Getaway
Get discovered.
Or become part of the journey.
Mango Match placements and Mango Getaway Featured Partner
positions serve different purposes. One creates discovery.
The other integrates a selected establishment into a specific
traveler journey.
Mango Match
Discovery Placement
01
Be something couples can discover together.
Your establishment receives a Mango Match card inside
the relevant country, destination and discovery category.
Country Collection
Your Country
Current Entry
From $5
01
Dedicated discovery card
Your establishment appears as an experience
couples can explore inside Mango Match.
02
Country and destination placement
Your card is connected to the location and
category where it is most relevant.
03
Direct route to your business
Interested couples can continue to your preferred
booking, enquiry or website destination.
04
One-time placement
Your entry price depends on the current placement
level of your country collection.
Mango Getaway
Featured Partner
02
Become part of a specific getaway.
Selected establishments can occupy a defined position
inside a Mango Getaway itinerary where their experience
genuinely strengthens the journey.
Limited by itinerary
Selected positions only
Featured Partner opportunities depend on destination,
traveler value and the needs of the individual itinerary.
01
Defined itinerary position
The establishment is connected to a specific
part of a Mango Getaway traveler journey.
02
Contextual integration
The experience is presented in the context of
when, why and how it fits that particular getaway.
03
Limited availability
Itinerary positions are intentionally limited
rather than available to every establishment.
04
Separate commercial terms
Featured Partner opportunities have their own
scope, placement terms and commercial agreement.
An Important Distinction
Purchasing a Mango Match placement does not purchase
Featured Partner status. Featured opportunities are
considered separately when Mango Getaway identifies
a genuine fit between an establishment and a specific
traveler journey.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B08 — STAND OUT FROM THE COLLECTION
========================================================= */
.mgm-featured-opportunity {
--mgm-bg:
#181410;
--mgm-bg-deep:
#14110e;
--mgm-panel:
#211c17;
--mgm-panel-soft:
#1b1713;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
position:
relative;
overflow:
hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
var(--mgm-bg),
var(--mgm-bg-deep)
);
}
/* =========================================================
AMBIENT BACKGROUND
========================================================= */
.mgm-featured-opportunity::before {
content:
"";
position:
absolute;
width:
560px;
height:
560px;
top:
170px;
left:
-350px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.075),
transparent 70%
);
pointer-events:
none;
}
.mgm-featured-opportunity__inner {
position:
relative;
z-index:
2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-featured-opportunity__heading {
max-width:
880px;
margin-bottom:
clamp(38px, 5vw, 58px);
}
.mgm-featured-opportunity__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-featured-opportunity__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight:
500;
line-height:
0.96;
letter-spacing:
-0.038em;
}
.mgm-featured-opportunity__title span {
display:
block;
color:
var(--mgm-gold);
}
.mgm-featured-opportunity__intro {
max-width:
760px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height:
1.72;
}
/* =========================================================
COUNTRY CONTEXT
========================================================= */
.mgm-featured-opportunity__country {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
margin-bottom:
18px;
padding:
15px 19px;
border:
1px solid
rgba(244, 166, 65, 0.18);
border-radius:
17px;
background:
rgba(244, 166, 65, 0.045);
}
.mgm-featured-opportunity__country[hidden] {
display:
none;
}
.mgm-featured-opportunity__country-label {
display:
block;
color:
rgba(255, 245, 230, 0.44);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__country strong {
display:
block;
margin-top:
2px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
15px;
}
.mgm-featured-opportunity__country p {
max-width:
550px;
margin:
0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.6;
text-align:
right;
}
/* =========================================================
FEATURED HERO
========================================================= */
.mgm-featured-opportunity__hero {
display:
grid;
grid-template-columns:
minmax(0, 1.2fr)
minmax(290px, 0.8fr);
gap:
clamp(34px, 6vw, 78px);
align-items:
center;
padding:
clamp(29px, 4vw, 44px);
border:
1px solid
rgba(244, 166, 65, 0.26);
border-radius:
30px;
background:
radial-gradient(
circle at 92% 15%,
rgba(244, 166, 65, 0.10),
transparent 30%
),
linear-gradient(
145deg,
rgba(244, 166, 65, 0.07),
transparent 44%
),
var(--mgm-panel);
box-shadow:
0 26px 76px
rgba(0, 0, 0, 0.22);
}
.mgm-featured-opportunity__hero-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.14em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__hero-copy h3 {
max-width:
650px;
margin:
12px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(34px, 4.2vw, 52px);
font-weight:
500;
line-height:
1;
letter-spacing:
-0.025em;
}
.mgm-featured-opportunity__hero-copy p {
max-width:
640px;
margin:
17px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
line-height:
1.72;
}
/* =========================================================
POSITION PANEL
========================================================= */
.mgm-featured-opportunity__position {
padding:
23px;
border:
1px solid
var(--mgm-line);
border-radius:
21px;
background:
rgba(20, 17, 14, 0.54);
}
.mgm-featured-opportunity__position-label {
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__position-title {
margin-top:
8px;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
31px;
font-weight:
500;
line-height:
1;
}
.mgm-featured-opportunity__position p {
margin:
13px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.65;
}
.mgm-featured-opportunity__position-status {
margin-top:
18px;
padding-top:
15px;
border-top:
1px solid
var(--mgm-line);
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
700;
}
/* =========================================================
VALUE GRID
========================================================= */
.mgm-featured-opportunity__grid {
display:
grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
14px;
margin-top:
18px;
}
.mgm-featured-value {
min-height:
265px;
padding:
23px;
border:
1px solid
var(--mgm-line);
border-radius:
22px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.025),
rgba(255, 255, 255, 0.006)
),
var(--mgm-panel);
transition:
transform 0.2s ease,
border-color 0.2s ease;
}
.mgm-featured-value:hover {
transform:
translateY(-3px);
border-color:
rgba(255, 245, 230, 0.20);
}
.mgm-featured-value__number {
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
10px;
letter-spacing:
0.13em;
}
.mgm-featured-value__content {
margin-top:
38px;
}
.mgm-featured-value__label {
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-featured-value h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(25px, 2.7vw, 33px);
font-weight:
500;
line-height:
1.03;
}
.mgm-featured-value p {
margin:
12px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.68;
}
/* =========================================================
PROCESS
========================================================= */
.mgm-featured-opportunity__process {
display:
grid;
grid-template-columns:
minmax(250px, 0.7fr)
minmax(0, 1.3fr);
gap:
clamp(32px, 6vw, 74px);
margin-top:
clamp(46px, 6vw, 70px);
padding:
clamp(28px, 4vw, 38px);
border:
1px solid
var(--mgm-line);
border-radius:
26px;
background:
var(--mgm-panel-soft);
}
.mgm-featured-opportunity__process-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__process-heading h3 {
margin:
10px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(32px, 4vw, 45px);
font-weight:
500;
}
.mgm-featured-opportunity__process-steps {
display:
grid;
}
.mgm-featured-process-step {
display:
grid;
grid-template-columns:
36px
minmax(0, 1fr);
gap:
14px;
padding:
17px 0;
border-top:
1px solid
var(--mgm-line);
}
.mgm-featured-process-step:last-child {
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-featured-process-step > span {
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
9px;
}
.mgm-featured-process-step strong {
display:
block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
}
.mgm-featured-process-step p {
margin:
5px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.62;
}
/* =========================================================
CTA
========================================================= */
.mgm-featured-opportunity__action {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
34px;
margin-top:
24px;
padding:
27px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-featured-opportunity__action-copy > span {
display:
block;
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__action-copy > strong {
display:
block;
margin-top:
4px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
15px;
}
.mgm-featured-opportunity__action-copy p {
max-width:
640px;
margin:
7px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.6;
}
.mgm-featured-opportunity__cta {
min-height:
50px;
flex:
0 0 auto;
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
0 22px;
border-radius:
999px;
color:
#1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
800;
text-decoration:
none !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-featured-opportunity__cta:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
/* =========================================================
PRINCIPLE
========================================================= */
.mgm-featured-opportunity__principle {
display:
grid;
grid-template-columns:
42px
minmax(0, 1fr);
gap:
16px;
max-width:
920px;
margin-top:
28px;
}
.mgm-featured-opportunity__principle-line {
width:
35px;
height:
1px;
margin-top:
10px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.10)
);
}
.mgm-featured-opportunity__principle-label {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-featured-opportunity__principle p {
margin:
7px 0 0;
color:
rgba(255, 245, 230, 0.57);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
line-height:
1.7;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-featured-opportunity__hero {
grid-template-columns:
1fr;
}
.mgm-featured-opportunity__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mgm-featured-opportunity__process {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-featured-opportunity {
padding:
70px
18px
76px;
}
.mgm-featured-opportunity__country {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-featured-opportunity__country p {
text-align:
left;
}
.mgm-featured-opportunity__hero {
padding:
24px 20px;
border-radius:
24px;
}
.mgm-featured-opportunity__grid {
grid-template-columns:
1fr;
}
.mgm-featured-value {
min-height:
auto;
}
.mgm-featured-value__content {
margin-top:
28px;
}
.mgm-featured-opportunity__process {
padding:
24px 20px;
}
.mgm-featured-opportunity__action {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-featured-opportunity__cta {
width:
100%;
}
.mgm-featured-opportunity__principle {
grid-template-columns:
27px
1fr;
}
.mgm-featured-opportunity__principle-line {
width:
24px;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B08 — FEATURED PARTNER OPPORTUNITY
========================================================= */
/* =========================================================
ELEMENTS
========================================================= */
const mgmFeaturedCountryContext =
document.getElementById(
"mgm-featured-country-context"
);
const mgmFeaturedCountryName =
document.getElementById(
"mgm-featured-country-name"
);
/* =========================================================
UPDATE COUNTRY CONTEXT
========================================================= */
function mgmUpdateFeaturedCountry(
country
) {
if (!country) {
if (mgmFeaturedCountryContext) {
mgmFeaturedCountryContext.hidden =
true;
}
return;
}
if (mgmFeaturedCountryName) {
mgmFeaturedCountryName.textContent =
country.name;
}
if (mgmFeaturedCountryContext) {
mgmFeaturedCountryContext.hidden =
false;
}
}
/* =========================================================
LISTEN TO B02
========================================================= */
window.addEventListener(
"mgm:countrychange",
function(event) {
mgmUpdateFeaturedCountry(
event.detail
);
}
);
/* =========================================================
RESTORE SAVED COUNTRY
========================================================= */
function mgmRestoreFeaturedCountry() {
const savedCode =
localStorage.getItem(
"mgm_selected_country"
);
if (!savedCode) {
mgmUpdateFeaturedCountry(
null
);
return;
}
/*
* Country catalogue supplied by B02.
*/
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
const country =
MGM_COUNTRIES.find(
function(item) {
return (
item.code ===
savedCode
);
}
);
if (country) {
mgmUpdateFeaturedCountry(
country
);
}
}
mgmRestoreFeaturedCountry();
Featured Partner Opportunities
Stand out from the collection.
Become part of the getaway.
Mango Getaway creates curated couple itineraries built around
meaningful experiences, practical flow and memorable time together.
Where an establishment genuinely strengthens one of those journeys,
it may be considered for a Featured Partner position.
Selected Country
Greece
Featured Partner opportunities are considered within
individual destinations and itineraries in this country.
A Different Level of Integration
Your experience becomes part of the story we ask couples to live.
A Featured Partner is not simply displayed alongside other
establishments. The partner occupies a defined position inside
a specific Mango Getaway itinerary because the experience fits
what that journey is designed to deliver.
Featured Position
Limited by itinerary
Availability depends on the destination, the type of experience
required and whether the establishment genuinely fits the journey.
Considered individually by Mango Getaway
01
Defined Role
A specific place in the itinerary
Featured placement is connected to a real moment in the
journey rather than appearing as an unrelated recommendation.
02
Traveler Context
We explain why the experience belongs
The establishment can be presented alongside the timing,
destination rhythm and traveler purpose that make the
experience meaningful.
03
Direct Relationship
Couples continue directly to you
Where appropriate, the itinerary can direct travelers to
the partner’s preferred website, booking page or enquiry
route rather than turning Mango Getaway into the booking agent.
04
Limited Inventory
Not every establishment can hold the same position
Featured opportunities remain intentionally limited so an
itinerary does not become a collection of competing paid
placements.
05
Partner Collaboration
We build the placement with you
Mango Getaway works with selected partners to confirm
accurate information, approved media, booking routes and
the way the experience is represented.
06
Separate Partnership
Featured placement has its own terms
Featured Partner positions are separate from Mango Match
placement and are governed by the scope and commercial
terms of the individual itinerary opportunity.
How Featured Partner Consideration Works
Fit comes before placement.
01
We understand your experience
Mango reviews what you offer, where you operate
and what the traveler actually receives.
02
We identify a genuine itinerary fit
There must be a defined role your establishment
can credibly fulfil inside a Mango Getaway journey.
03
We discuss the opportunity
If the fit is strong, Mango Getaway can approach
the establishment with the specific Featured Partner
position and its commercial terms.
Interested in deeper collaboration?
Tell us about your establishment first.
You can indicate Featured Partner interest when completing
the Mango Match partner application. Interest does not
guarantee selection.
Continue to Partner Application
Traveler Value First
Featured Partner selection begins with whether the
establishment strengthens the travel experience.
Commercial participation does not replace that requirement.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B09 — PARTNER APPLICATION
========================================================= */
.mgm-partner-application {
--mgm-bg:
#14110e;
--mgm-panel:
#211c17;
--mgm-panel-soft:
#1b1713;
--mgm-input:
#17130f;
--mgm-cream:
#fff5e6;
--mgm-soft:
#e7dac9;
--mgm-muted:
#c9bdaf;
--mgm-gold:
#f4a641;
--mgm-gold-deep:
#d87916;
--mgm-error:
#e39984;
--mgm-success:
#9ccb9b;
--mgm-line:
rgba(255, 245, 230, 0.12);
position:
relative;
overflow:
hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
var(--mgm-bg);
}
/* =========================================================
AMBIENT BACKGROUND
========================================================= */
.mgm-partner-application::before {
content:
"";
position:
absolute;
width:
620px;
height:
620px;
right:
-380px;
top:
200px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.075),
transparent 70%
);
pointer-events:
none;
}
.mgm-partner-application__inner {
position:
relative;
z-index:
2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-partner-application__heading {
max-width:
820px;
margin-bottom:
38px;
}
.mgm-partner-application__eyebrow {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-bottom:
20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
700;
letter-spacing:
0.18em;
text-transform:
uppercase;
}
.mgm-partner-application__eyebrow::before {
content:
"";
width:
30px;
height:
1px;
background:
var(--mgm-gold);
}
.mgm-partner-application__title {
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight:
500;
line-height:
0.96;
letter-spacing:
-0.038em;
}
.mgm-partner-application__title span {
display:
block;
color:
var(--mgm-gold);
}
.mgm-partner-application__intro {
max-width:
750px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height:
1.72;
}
/* =========================================================
STEP STATUS
========================================================= */
.mgm-partner-application__status {
display:
grid;
grid-template-columns:
auto
minmax(80px, 1fr)
auto;
align-items:
center;
max-width:
720px;
margin-bottom:
28px;
}
.mgm-partner-application__step {
display:
flex;
align-items:
center;
gap:
11px;
opacity:
0.52;
}
.mgm-partner-application__step.is-active {
opacity:
1;
}
.mgm-partner-application__step-number {
width:
38px;
height:
38px;
display:
grid;
place-items:
center;
border:
1px solid
var(--mgm-line);
border-radius:
50%;
color:
var(--mgm-muted);
font-family:
"DM Mono",
monospace;
font-size:
9px;
}
.mgm-partner-application__step.is-active
.mgm-partner-application__step-number {
border-color:
rgba(244, 166, 65, 0.40);
color:
var(--mgm-gold);
background:
rgba(244, 166, 65, 0.07);
}
.mgm-partner-application__step span {
display:
block;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.11em;
text-transform:
uppercase;
}
.mgm-partner-application__step strong {
display:
block;
margin-top:
2px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
}
.mgm-partner-application__step-line {
height:
1px;
margin:
0 18px;
background:
linear-gradient(
90deg,
rgba(244, 166, 65, 0.30),
rgba(255, 245, 230, 0.08)
);
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.mgm-partner-application__layout {
display:
grid;
grid-template-columns:
minmax(270px, 0.72fr)
minmax(0, 1.28fr);
gap:
18px;
align-items:
start;
}
/* =========================================================
SUMMARY PANEL
========================================================= */
.mgm-partner-application__summary {
position:
sticky;
top:
96px;
padding:
28px;
border:
1px solid
rgba(244, 166, 65, 0.20);
border-radius:
25px;
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.06),
transparent 45%
),
var(--mgm-panel);
}
.mgm-partner-application__summary-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-partner-application__summary h3 {
margin:
11px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(31px, 3vw, 40px);
font-weight:
500;
line-height:
1;
}
.mgm-partner-application__summary > p {
margin:
15px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
line-height:
1.65;
}
/* country */
.mgm-partner-application__country-state,
.mgm-partner-application__country-empty {
margin-top:
23px;
padding:
15px;
border:
1px solid
var(--mgm-line);
border-radius:
16px;
background:
rgba(20, 17, 14, 0.38);
}
.mgm-partner-application__country-state[hidden],
.mgm-partner-application__country-empty[hidden] {
display:
none;
}
.mgm-partner-application__country-row {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
15px;
padding:
9px 0;
}
.mgm-partner-application__country-row
+ .mgm-partner-application__country-row {
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-application__country-row span {
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size:
8px;
font-weight:
700;
letter-spacing:
0.10em;
text-transform:
uppercase;
}
.mgm-partner-application__country-row strong {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
}
.mgm-partner-application__country-price {
color:
var(--mgm-gold) !important;
}
.mgm-partner-application__country-empty > span {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
700;
}
.mgm-partner-application__country-empty p {
margin:
5px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.55;
}
.mgm-partner-application__summary-divider {
height:
1px;
margin:
25px 0 10px;
background:
var(--mgm-line);
}
.mgm-partner-application__summary-point {
display:
grid;
grid-template-columns:
28px
minmax(0, 1fr);
gap:
10px;
padding:
12px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-partner-application__summary-point > span {
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size:
8px;
}
.mgm-partner-application__summary-point p {
margin:
0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.55;
}
/* =========================================================
FORM PANEL
========================================================= */
.mgm-partner-application__form-panel {
padding:
clamp(24px, 4vw, 38px);
border:
1px solid
var(--mgm-line);
border-radius:
25px;
background:
var(--mgm-panel);
}
.mgm-partner-application__form {
display:
grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
19px 16px;
}
/* =========================================================
FIELD
========================================================= */
.mgm-partner-field {
min-width:
0;
}
.mgm-partner-field--full {
grid-column:
1 / -1;
}
.mgm-partner-field label {
display:
block;
margin-bottom:
7px;
color:
var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
font-weight:
700;
}
.mgm-partner-field label span {
color:
var(--mgm-gold);
}
.mgm-partner-field input,
.mgm-partner-field textarea {
width:
100%;
padding:
13px 14px;
border:
1px solid
rgba(255, 245, 230, 0.12);
border-radius:
13px;
outline:
none;
color:
var(--mgm-cream);
background:
var(--mgm-input);
font-family:
"DM Sans",
sans-serif;
font-size:
13px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partner-field input {
min-height:
50px;
}
.mgm-partner-field textarea {
min-height:
138px;
resize:
vertical;
line-height:
1.6;
}
.mgm-partner-field input::placeholder,
.mgm-partner-field textarea::placeholder {
color:
rgba(255, 245, 230, 0.30);
}
.mgm-partner-field input:focus,
.mgm-partner-field textarea:focus {
border-color:
rgba(244, 166, 65, 0.65);
box-shadow:
0 0 0 3px
rgba(244, 166, 65, 0.07);
}
.mgm-partner-field input.is-invalid,
.mgm-partner-field textarea.is-invalid {
border-color:
rgba(227, 153, 132, 0.72);
}
.mgm-partner-field__hint {
margin-top:
6px;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
line-height:
1.5;
}
.mgm-partner-field__footer {
display:
flex;
justify-content:
space-between;
gap:
20px;
margin-top:
6px;
color:
rgba(255, 245, 230, 0.40);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
line-height:
1.5;
}
/* =========================================================
EXPERIENCE BREAK
========================================================= */
.mgm-partner-application__form-break {
grid-column:
1 / -1;
margin-top:
13px;
padding-top:
27px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-application__form-break-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.13em;
text-transform:
uppercase;
}
.mgm-partner-application__form-break h3 {
margin:
8px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(28px, 3vw, 38px);
font-weight:
500;
}
.mgm-partner-application__form-break p {
max-width:
650px;
margin:
8px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.55;
}
/* =========================================================
FEATURED INTEREST
========================================================= */
.mgm-partner-interest {
grid-column:
1 / -1;
min-width:
0;
margin:
10px 0 0;
padding:
23px;
border:
1px solid
rgba(244, 166, 65, 0.18);
border-radius:
18px;
background:
rgba(244, 166, 65, 0.035);
}
.mgm-partner-interest legend {
padding:
0 7px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
800;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
.mgm-partner-interest__intro h3 {
max-width:
620px;
margin:
0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(25px, 2.8vw, 34px);
font-weight:
500;
line-height:
1.03;
}
.mgm-partner-interest__intro p {
max-width:
650px;
margin:
9px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.55;
}
.mgm-partner-interest__options {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
10px;
margin-top:
18px;
}
.mgm-partner-interest__option {
position:
relative;
display:
grid;
grid-template-columns:
18px
minmax(0, 1fr);
gap:
11px;
padding:
15px;
border:
1px solid
var(--mgm-line);
border-radius:
14px;
cursor:
pointer;
background:
rgba(20, 17, 14, 0.35);
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.mgm-partner-interest__option:hover {
border-color:
rgba(244, 166, 65, 0.28);
}
.mgm-partner-interest__option input {
position:
absolute;
opacity:
0;
pointer-events:
none;
}
.mgm-partner-interest__control {
width:
17px;
height:
17px;
margin-top:
1px;
border:
1px solid
rgba(255, 245, 230, 0.24);
border-radius:
50%;
background:
transparent;
}
.mgm-partner-interest__option
input:checked
+
.mgm-partner-interest__control {
border:
4px solid
var(--mgm-gold);
}
.mgm-partner-interest__option:has(input:checked) {
border-color:
rgba(244, 166, 65, 0.35);
background:
rgba(244, 166, 65, 0.055);
}
.mgm-partner-interest__option strong {
display:
block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
11px;
}
.mgm-partner-interest__option small {
display:
block;
margin-top:
4px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
line-height:
1.5;
}
/* =========================================================
ERROR / SAVED
========================================================= */
.mgm-partner-application__error,
.mgm-partner-application__saved {
grid-column:
1 / -1;
padding:
12px 14px;
border-radius:
12px;
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
}
.mgm-partner-application__error {
border:
1px solid
rgba(227, 153, 132, 0.28);
color:
#f0c3b7;
background:
rgba(227, 153, 132, 0.07);
}
.mgm-partner-application__saved {
border:
1px solid
rgba(156, 203, 155, 0.25);
color:
#cde5cc;
background:
rgba(156, 203, 155, 0.07);
}
.mgm-partner-application__error[hidden],
.mgm-partner-application__saved[hidden] {
display:
none;
}
/* =========================================================
ACTION
========================================================= */
.mgm-partner-application__actions {
grid-column:
1 / -1;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
margin-top:
9px;
padding-top:
24px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-application__actions
> div
> span {
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
font-weight:
700;
letter-spacing:
0.10em;
text-transform:
uppercase;
}
.mgm-partner-application__actions p {
margin:
3px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
9px;
}
.mgm-partner-application__continue {
min-height:
51px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
10px;
padding:
0 22px;
border:
0;
border-radius:
999px;
color:
#1a1208;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size:
12px;
font-weight:
800;
cursor:
pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partner-application__continue:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
/* =========================================================
PRIVACY NOTE
========================================================= */
.mgm-partner-application__privacy-note {
display:
grid;
grid-template-columns:
36px
minmax(0, 1fr);
gap:
14px;
max-width:
850px;
margin-top:
27px;
}
.mgm-partner-application__privacy-line {
width:
31px;
height:
1px;
margin-top:
9px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.10)
);
}
.mgm-partner-application__privacy-note p {
margin:
0;
color:
rgba(255, 245, 230, 0.46);
font-family:
"DM Sans",
sans-serif;
font-size:
10px;
line-height:
1.6;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-partner-application__layout {
grid-template-columns:
1fr;
}
.mgm-partner-application__summary {
position:
static;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-partner-application {
padding:
70px
18px
76px;
}
.mgm-partner-application__status {
grid-template-columns:
1fr;
gap:
12px;
}
.mgm-partner-application__step-line {
width:
1px;
height:
20px;
margin:
0 0 0 19px;
background:
linear-gradient(
rgba(244, 166, 65, 0.30),
rgba(255, 245, 230, 0.08)
);
}
.mgm-partner-application__summary {
padding:
23px 20px;
}
.mgm-partner-application__form-panel {
padding:
23px 19px;
}
.mgm-partner-application__form {
grid-template-columns:
1fr;
}
.mgm-partner-field--full,
.mgm-partner-application__form-break,
.mgm-partner-interest,
.mgm-partner-application__error,
.mgm-partner-application__saved,
.mgm-partner-application__actions {
grid-column:
auto;
}
.mgm-partner-interest__options {
grid-template-columns:
1fr;
}
.mgm-partner-field__footer {
flex-direction:
column;
gap:
3px;
}
.mgm-partner-application__actions {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-partner-application__continue {
width:
100%;
}
/* =========================================================
FORM TEXT VISIBILITY FIX
========================================================= */
.mgm-partner-application
input[type="text"],
.mgm-partner-application
input[type="email"],
.mgm-partner-application
input[type="tel"],
.mgm-partner-application
input[type="url"],
.mgm-partner-application
textarea {
color: #fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
caret-color:
#f4a641 !important;
opacity: 1 !important;
}
.mgm-partner-application
input[type="text"]:focus,
.mgm-partner-application
input[type="email"]:focus,
.mgm-partner-application
input[type="tel"]:focus,
.mgm-partner-application
input[type="url"]:focus,
.mgm-partner-application
textarea:focus {
color: #fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
}
/* Chrome / Edge autofill */
.mgm-partner-application
input:-webkit-autofill,
.mgm-partner-application
input:-webkit-autofill:hover,
.mgm-partner-application
input:-webkit-autofill:focus {
-webkit-text-fill-color:
#fff5e6 !important;
-webkit-box-shadow:
0 0 0 1000px
#17130f inset !important;
caret-color:
#f4a641 !important;
}
/* =========================================================
B09 — HARD INPUT COLOUR OVERRIDE
========================================================= */
#mgm-partner-application
input:not([type="radio"]):not([type="checkbox"]),
#mgm-partner-application
textarea {
color:
#fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
background-color:
#17130f !important;
caret-color:
#f4a641 !important;
opacity:
1 !important;
}
#mgm-partner-application
input:not([type="radio"]):not([type="checkbox"]):focus,
#mgm-partner-application
input:not([type="radio"]):not([type="checkbox"]):active,
#mgm-partner-application
textarea:focus,
#mgm-partner-application
textarea:active {
color:
#fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
background-color:
#17130f !important;
caret-color:
#f4a641 !important;
}
#mgm-partner-application
input::placeholder,
#mgm-partner-application
textarea::placeholder {
color:
rgba(
255,
245,
230,
0.34
) !important;
-webkit-text-fill-color:
rgba(
255,
245,
230,
0.34
) !important;
opacity:
1 !important;
}
/* Chrome / Edge autofill */
#mgm-partner-application
input:-webkit-autofill,
#mgm-partner-application
input:-webkit-autofill:hover,
#mgm-partner-application
input:-webkit-autofill:focus,
#mgm-partner-application
input:-webkit-autofill:active {
-webkit-text-fill-color:
#fff5e6 !important;
caret-color:
#f4a641 !important;
-webkit-box-shadow:
0 0 0 1000px
#17130f inset !important;
box-shadow:
0 0 0 1000px
#17130f inset !important;
}
/* selected text */
#mgm-partner-application
input::selection,
#mgm-partner-application
textarea::selection {
color:
#14110e !important;
background:
#f4a641 !important;
}
}
/* =========================================================
MANGO MATCH
B09 — PARTNER APPLICATION STEP 1
RUNTIME SAFE v0.1.1A
========================================================= */
(function () {
function initMangoStepOne() {
const form =
document.getElementById(
"mgm-partner-step-one-form"
);
if (!form) {
return;
}
const errorBox =
document.getElementById(
"mgm-step-one-error"
);
const savedBox =
document.getElementById(
"mgm-step-one-saved"
);
const experienceField =
document.getElementById(
"mgm-couple-experience"
);
const differenceField =
document.getElementById(
"mgm-business-difference"
);
const notesField =
document.getElementById(
"mgm-application-notes"
);
/* =====================================================
CHARACTER COUNTERS
===================================================== */
function setupCounter(
field,
counterId,
max
) {
const counter =
document.getElementById(
counterId
);
if (
!field ||
!counter
) {
return;
}
function update() {
counter.textContent =
field.value.length +
" / " +
max;
}
field.addEventListener(
"input",
update
);
update();
}
setupCounter(
experienceField,
"mgm-experience-count",
1000
);
setupCounter(
differenceField,
"mgm-difference-count",
600
);
setupCounter(
notesField,
"mgm-notes-count",
800
);
/* =====================================================
READ FORM
===================================================== */
function getFormData() {
const data =
new FormData(
form
);
return {
businessName:
data.get("businessName") || "",
contactName:
data.get("contactName") || "",
contactRole:
data.get("contactRole") || "",
email:
data.get("email") || "",
phone:
data.get("phone") || "",
website:
data.get("website") || "",
social:
data.get("social") || "",
coupleExperience:
data.get("coupleExperience") || "",
distinctiveValue:
data.get("distinctiveValue") || "",
bookingRoute:
data.get("bookingRoute") || "",
featuredInterest:
data.get("featuredInterest") ||
"match-only",
notes:
data.get("notes") || ""
};
}
/* =====================================================
VALIDATE
===================================================== */
function validate() {
const required =
Array.from(
form.querySelectorAll(
"[required]"
)
);
/*
* Remove previous states.
*/
form
.querySelectorAll(
".is-invalid"
)
.forEach(
function (field) {
field.classList.remove(
"is-invalid"
);
}
);
let firstInvalid =
null;
required.forEach(
function (field) {
if (
!field.checkValidity()
) {
field.classList.add(
"is-invalid"
);
if (!firstInvalid) {
firstInvalid =
field;
}
}
}
);
if (!firstInvalid) {
if (errorBox) {
errorBox.hidden =
true;
}
return true;
}
/*
* Human-readable error.
*/
let message =
"Please complete the required field before continuing.";
if (
firstInvalid.type ===
"email"
) {
message =
"Please enter a valid business email address before continuing.";
}
else {
const fieldWrap =
firstInvalid.closest(
".mgm-partner-field"
);
const label =
fieldWrap
? fieldWrap.querySelector(
"label"
)
: null;
if (label) {
const cleanLabel =
label.textContent
.replace("*", "")
.trim();
message =
"Please complete: " +
cleanLabel +
".";
}
}
if (errorBox) {
errorBox.textContent =
message;
errorBox.hidden =
false;
}
/*
* Move user directly to the
* field requiring attention.
*/
const fieldTop =
firstInvalid
.getBoundingClientRect()
.top +
window.scrollY -
120;
window.scrollTo({
top:
Math.max(
fieldTop,
0
),
behavior:
"smooth"
});
window.setTimeout(
function () {
firstInvalid.focus({
preventScroll:
true
});
},
300
);
return false;
}=====================================================
SAVE
===================================================== */
function saveDraft() {
const data =
getFormData();
data.savedAt =
new Date().toISOString();
localStorage.setItem(
"mgm_partner_application_step_one",
JSON.stringify(
data
)
);
window.dispatchEvent(
new CustomEvent(
"mgm:applicationstepone",
{
detail:
data
}
)
);
}
/* =====================================================
RESTORE
===================================================== */
function restoreDraft() {
const stored =
localStorage.getItem(
"mgm_partner_application_step_one"
);
if (!stored) {
return;
}
let data;
try {
data =
JSON.parse(
stored
);
}
catch (error) {
return;
}
const fields = {
businessName:
"mgm-business-name",
contactName:
"mgm-contact-name",
contactRole:
"mgm-contact-role",
email:
"mgm-business-email",
phone:
"mgm-business-phone",
website:
"mgm-business-website",
social:
"mgm-business-social",
coupleExperience:
"mgm-couple-experience",
distinctiveValue:
"mgm-business-difference",
bookingRoute:
"mgm-booking-route",
notes:
"mgm-application-notes"
};
Object.keys(fields).forEach(
function (key) {
const field =
document.getElementById(
fields[key]
);
if (
field &&
typeof data[key] ===
"string"
) {
field.value =
data[key];
}
}
);
if (
data.featuredInterest
) {
const radio =
form.querySelector(
'input[name="featuredInterest"][value="' +
data.featuredInterest +
'"]'
);
if (radio) {
radio.checked =
true;
}
}
[
experienceField,
differenceField,
notesField
].forEach(
function (field) {
if (field) {
field.dispatchEvent(
new Event("input")
);
}
}
);
}
/* =====================================================
SUBMIT STEP 1
===================================================== */
form.addEventListener(
"submit",
function (event) {
/*
* This prevents the browser from
* reloading the page and jumping
* back to B01.
*/
event.preventDefault();
event.stopPropagation();
if (!validate()) {
return;
}
saveDraft();
if (savedBox) {
savedBox.hidden =
false;
savedBox.textContent =
"Step 1 saved. Continuing to location and category.";
}
const nextBlock =
document.getElementById(
"mgm-partner-location"
);
if (!nextBlock) {
if (errorBox) {
errorBox.textContent =
"Step 2 could not be found on this page. Please contact Mango Getaway.";
errorBox.hidden =
false;
}
return;
}
/*
* Explicit window scroll is more
* reliable inside WordPress/Kadence
* than scrollIntoView alone.
*/
window.setTimeout(
function () {
const targetTop =
nextBlock
.getBoundingClientRect()
.top +
window.scrollY -
90;
window.scrollTo({
top:
Math.max(
targetTop,
0
),
behavior:
"smooth"
});
},
120
);
/* =====================================================
RESTORE EXISTING DRAFT
===================================================== */
restoreDraft();
}
/*
* Runtime-safe initialization.
*/
if (
document.readyState ===
"loading"
) {
document.addEventListener(
"DOMContentLoaded",
initMangoStepOne,
{
once: true
}
);
}
else {
initMangoStepOne();
}
})();
Partner Application
Tell us about
your establishment.
We review each Mango Match application before accepting a
placement. Start by helping us understand who you are,
what you offer and what a couple could genuinely experience
with you.
01
Current Step
Your Establishment
02
Next
Location & Category
Your Mango Match Application
Apply first.
Mango Getaway reviews your information before offering
a Mango Match placement and reserving the applicable
country position.
Selected Country
Greece
Current Displayed Price
$5
Country not selected yet
You can choose your operating country in the
location step next.
01
Submitting this application does not create a charge.
02
Mango Getaway reviews the establishment before
accepting a placement.
03
An approved application receives the applicable
country price when a position is reserved.
Information submitted through the production application
will be used by Mango Getaway to evaluate and administer
the requested partnership opportunity.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B10 — COUNTRY + DESTINATION + CATEGORY
========================================================= */
.mgm-partner-location {
--mgm-bg: #181410;
--mgm-bg-deep: #14110e;
--mgm-panel: #211c17;
--mgm-panel-soft: #1b1713;
--mgm-input: #17130f;
--mgm-cream: #fff5e6;
--mgm-soft: #e7dac9;
--mgm-muted: #c9bdaf;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-error: #e39984;
--mgm-success: #9ccb9b;
--mgm-line:
rgba(255, 245, 230, 0.12);
position: relative;
overflow: hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
var(--mgm-bg),
var(--mgm-bg-deep)
);
}
/* =========================================================
AMBIENT BACKGROUND
========================================================= */
.mgm-partner-location::before {
content: "";
position: absolute;
width: 560px;
height: 560px;
left: -360px;
top: 260px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.07),
transparent 70%
);
pointer-events: none;
}
.mgm-partner-location__inner {
position: relative;
z-index: 2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-partner-location__heading {
max-width: 820px;
margin-bottom: 38px;
}
.mgm-partner-location__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mgm-partner-location__eyebrow::before {
content: "";
width: 30px;
height: 1px;
background:
var(--mgm-gold);
}
.mgm-partner-location__title {
margin: 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.038em;
}
.mgm-partner-location__title span {
display: block;
color:
var(--mgm-gold);
}
.mgm-partner-location__intro {
max-width: 750px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height: 1.72;
}
/* =========================================================
STEP STATUS
========================================================= */
.mgm-partner-location__status {
display: grid;
grid-template-columns:
auto
minmax(80px, 1fr)
auto;
align-items: center;
max-width: 720px;
margin-bottom: 28px;
}
.mgm-partner-location__step {
display: flex;
align-items: center;
gap: 11px;
opacity: 0.52;
}
.mgm-partner-location__step.is-active,
.mgm-partner-location__step.is-complete {
opacity: 1;
}
.mgm-partner-location__step-number {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border:
1px solid
var(--mgm-line);
border-radius: 50%;
color:
var(--mgm-muted);
font-family:
"DM Mono",
monospace;
font-size: 9px;
}
.mgm-partner-location__step.is-active
.mgm-partner-location__step-number,
.mgm-partner-location__step.is-complete
.mgm-partner-location__step-number {
border-color:
rgba(244, 166, 65, 0.4);
color:
var(--mgm-gold);
background:
rgba(244, 166, 65, 0.07);
}
.mgm-partner-location__step span {
display: block;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.mgm-partner-location__step strong {
display: block;
margin-top: 2px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
}
.mgm-partner-location__step-line {
height: 1px;
margin:
0 18px;
background:
linear-gradient(
90deg,
rgba(244, 166, 65, 0.3),
rgba(244, 166, 65, 0.3)
);
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.mgm-partner-location__layout {
display: grid;
grid-template-columns:
minmax(270px, 0.72fr)
minmax(0, 1.28fr);
gap: 18px;
align-items: start;
}
/* =========================================================
SUMMARY
========================================================= */
.mgm-partner-location__summary {
position: sticky;
top: 96px;
padding: 28px;
border:
1px solid
rgba(244, 166, 65, 0.2);
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.06),
transparent 45%
),
var(--mgm-panel);
}
.mgm-partner-location__summary-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-partner-location__summary h3 {
margin:
11px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(31px, 3vw, 40px);
font-weight: 500;
line-height: 1;
}
.mgm-partner-location__summary > p {
margin:
14px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
line-height: 1.65;
}
.mgm-partner-location__summary-list {
margin-top: 24px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-location__summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding:
13px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-partner-location__summary-row span {
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mgm-partner-location__summary-row strong {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
text-align: right;
}
.mgm-partner-location__summary-price {
color:
var(--mgm-gold) !important;
}
.mgm-partner-location__summary-note {
margin-top: 23px;
padding:
15px;
border:
1px solid
var(--mgm-line);
border-radius: 15px;
background:
rgba(20, 17, 14, 0.38);
}
.mgm-partner-location__summary-note strong {
display: block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
}
.mgm-partner-location__summary-note p {
margin:
6px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
line-height: 1.55;
}
/* =========================================================
FORM PANEL
========================================================= */
.mgm-partner-location__form-panel {
padding:
clamp(24px, 4vw, 38px);
border:
1px solid
var(--mgm-line);
border-radius: 25px;
background:
var(--mgm-panel);
}
.mgm-partner-location__form {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
19px 16px;
}
/* =========================================================
FORM SECTION
========================================================= */
.mgm-partner-location__form-section {
grid-column:
1 / -1;
padding-top: 11px;
}
.mgm-partner-location__form-section
+ .mgm-location-field {
margin-top: 2px;
}
.mgm-partner-location__form-section:not(:first-child) {
margin-top: 12px;
padding-top: 27px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-location__form-section-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-partner-location__form-section h3 {
margin:
8px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(28px, 3vw, 38px);
font-weight: 500;
}
.mgm-partner-location__form-section p {
max-width: 650px;
margin:
8px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
line-height: 1.55;
}
/* =========================================================
FIELDS
========================================================= */
.mgm-location-field {
min-width: 0;
}
.mgm-location-field--full {
grid-column:
1 / -1;
}
.mgm-location-field label {
display: block;
margin-bottom: 7px;
color:
var(--mgm-soft);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
font-weight: 700;
}
.mgm-location-field label span {
color:
var(--mgm-gold);
}
.mgm-location-field input,
.mgm-location-field select {
width: 100%;
min-height: 50px;
padding:
0 14px;
border:
1px solid
rgba(255, 245, 230, 0.12);
border-radius: 13px;
outline: none;
color:
var(--mgm-cream);
background:
var(--mgm-input);
font-family:
"DM Sans",
sans-serif;
font-size: 13px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-location-field select {
cursor: pointer;
}
.mgm-location-field select option {
color:
var(--mgm-cream);
background:
var(--mgm-input);
}
.mgm-location-field input::placeholder {
color:
rgba(255, 245, 230, 0.3);
}
.mgm-location-field input:focus,
.mgm-location-field select:focus {
border-color:
rgba(244, 166, 65, 0.65);
box-shadow:
0 0 0 3px
rgba(244, 166, 65, 0.07);
}
.mgm-location-field input.is-invalid,
.mgm-location-field select.is-invalid {
border-color:
rgba(227, 153, 132, 0.72);
}
.mgm-location-field__hint {
margin-top: 6px;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
line-height: 1.5;
}
/* =========================================================
APPLICATION REVIEW
========================================================= */
.mgm-partner-location__review {
grid-column:
1 / -1;
margin-top: 12px;
padding: 20px;
border:
1px solid
rgba(244, 166, 65, 0.18);
border-radius: 18px;
background:
rgba(244, 166, 65, 0.035);
}
.mgm-partner-location__review-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-partner-location__review-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 0 24px;
margin-top: 13px;
}
.mgm-partner-location__review-grid > div {
padding:
11px 0;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-location__review-grid span {
display: block;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.mgm-partner-location__review-grid strong {
display: block;
margin-top: 4px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
}
/* =========================================================
CONFIRMATIONS
========================================================= */
.mgm-partner-location__confirmations {
grid-column:
1 / -1;
display: grid;
gap: 10px;
}
.mgm-partner-confirmation {
position: relative;
display: grid;
grid-template-columns:
18px
minmax(0, 1fr);
gap: 11px;
padding: 15px;
border:
1px solid
var(--mgm-line);
border-radius: 14px;
background:
rgba(20, 17, 14, 0.35);
cursor: pointer;
}
.mgm-partner-confirmation input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mgm-partner-confirmation__control {
width: 17px;
height: 17px;
margin-top: 2px;
border:
1px solid
rgba(255, 245, 230, 0.26);
border-radius: 4px;
}
.mgm-partner-confirmation
input:checked
+
.mgm-partner-confirmation__control {
border:
4px solid
var(--mgm-gold);
background:
var(--mgm-gold);
}
.mgm-partner-confirmation:has(input:checked) {
border-color:
rgba(244, 166, 65, 0.28);
}
.mgm-partner-confirmation strong {
display: block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
}
.mgm-partner-confirmation small {
display: block;
margin-top: 4px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
line-height: 1.5;
}
/* =========================================================
ERROR / SUCCESS
========================================================= */
.mgm-partner-location__error,
.mgm-partner-location__success {
grid-column:
1 / -1;
}
.mgm-partner-location__error {
padding: 12px 14px;
border:
1px solid
rgba(227, 153, 132, 0.28);
border-radius: 12px;
color:
#f0c3b7;
background:
rgba(227, 153, 132, 0.07);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
}
.mgm-partner-location__success {
padding: 22px;
border:
1px solid
rgba(156, 203, 155, 0.25);
border-radius: 18px;
background:
rgba(156, 203, 155, 0.06);
}
.mgm-partner-location__error[hidden],
.mgm-partner-location__success[hidden] {
display: none;
}
.mgm-partner-location__success-label {
color:
var(--mgm-success);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-partner-location__success h3 {
margin:
8px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 31px;
font-weight: 500;
}
.mgm-partner-location__success p {
margin:
8px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
line-height: 1.55;
}
.mgm-partner-location__success-reference {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 18px;
padding-top: 14px;
border-top:
1px solid
rgba(156, 203, 155, 0.16);
}
.mgm-partner-location__success-reference span {
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.mgm-partner-location__success-reference strong {
color:
var(--mgm-success);
font-family:
"DM Mono",
monospace;
font-size: 10px;
}
/* =========================================================
ACTIONS
========================================================= */
.mgm-partner-location__actions {
grid-column:
1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 24px;
border-top:
1px solid
var(--mgm-line);
}
.mgm-partner-location__actions
> div
> span {
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mgm-partner-location__actions p {
margin:
3px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
}
.mgm-partner-location__submit {
min-height: 51px;
display: inline-flex;
align-items: center;
justify-content: center;
padding:
0 23px;
border: 0;
border-radius: 999px;
color: #1a1208;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partner-location__submit:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
.mgm-partner-location__submit:disabled {
opacity: 0.55;
cursor: default;
transform: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-partner-location__layout {
grid-template-columns:
1fr;
}
.mgm-partner-location__summary {
position: static;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-partner-location {
padding:
70px
18px
76px;
}
.mgm-partner-location__status {
grid-template-columns:
1fr;
gap: 12px;
}
.mgm-partner-location__step-line {
width: 1px;
height: 20px;
margin:
0 0 0 19px;
background:
linear-gradient(
rgba(244, 166, 65, 0.3),
rgba(244, 166, 65, 0.3)
);
}
.mgm-partner-location__summary {
padding:
23px 20px;
}
.mgm-partner-location__form-panel {
padding:
23px 19px;
}
.mgm-partner-location__form {
grid-template-columns:
1fr;
}
.mgm-location-field--full,
.mgm-partner-location__form-section,
.mgm-partner-location__review,
.mgm-partner-location__confirmations,
.mgm-partner-location__error,
.mgm-partner-location__success,
.mgm-partner-location__actions {
grid-column: auto;
}
.mgm-partner-location__review-grid {
grid-template-columns:
1fr;
}
.mgm-partner-location__actions {
align-items:
flex-start;
flex-direction:
column;
}
.mgm-partner-location__submit {
width: 100%;
}
.mgm-partner-location input,
.mgm-partner-location select {
color: #fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
caret-color:
#f4a641 !important;
opacity: 1 !important;
}
.mgm-partner-location
input:-webkit-autofill,
.mgm-partner-location
input:-webkit-autofill:hover,
.mgm-partner-location
input:-webkit-autofill:focus {
-webkit-text-fill-color:
#fff5e6 !important;
-webkit-box-shadow:
0 0 0 1000px
#17130f inset !important;
}
/* =========================================================
B10 — HARD INPUT COLOUR OVERRIDE
========================================================= */
#mgm-partner-location
input,
#mgm-partner-location
select {
color:
#fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
background-color:
#17130f !important;
caret-color:
#f4a641 !important;
opacity:
1 !important;
}
#mgm-partner-location
input:focus,
#mgm-partner-location
input:active,
#mgm-partner-location
select:focus,
#mgm-partner-location
select:active {
color:
#fff5e6 !important;
-webkit-text-fill-color:
#fff5e6 !important;
background-color:
#17130f !important;
}
#mgm-partner-location
input::placeholder {
color:
rgba(
255,
245,
230,
0.34
) !important;
-webkit-text-fill-color:
rgba(
255,
245,
230,
0.34
) !important;
}
#mgm-partner-location
select option {
color:
#fff5e6 !important;
background:
#17130f !important;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B10 — COUNTRY + DESTINATION + CATEGORY
STEP 2 OF 2
========================================================= */
(function () {
/* =======================================================
ELEMENTS
======================================================= */
const form =
document.getElementById(
"mgm-partner-step-two-form"
);
const countrySelect =
document.getElementById(
"mgm-location-country"
);
const destinationField =
document.getElementById(
"mgm-location-destination"
);
const areaField =
document.getElementById(
"mgm-location-area"
);
const addressField =
document.getElementById(
"mgm-location-address"
);
const categoryField =
document.getElementById(
"mgm-location-category"
);
const categoryDetailField =
document.getElementById(
"mgm-location-category-detail"
);
const operatingModelField =
document.getElementById(
"mgm-location-operation"
);
const operatingSeasonField =
document.getElementById(
"mgm-location-season"
);
const errorBox =
document.getElementById(
"mgm-step-two-error"
);
const successBox =
document.getElementById(
"mgm-step-two-success"
);
const submitButton =
document.getElementById(
"mgm-partner-submit"
);
if (!form) {
return;
}
/* =======================================================
B09 DATA
======================================================= */
function getStepOneData() {
const stored =
localStorage.getItem(
"mgm_partner_application_step_one"
);
if (!stored) {
return null;
}
try {
return JSON.parse(
stored
);
}
catch (error) {
return null;
}
}
/* =======================================================
COUNTRY CATALOGUE
======================================================= */
function populateCountrySelect() {
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return;
}
MGM_COUNTRIES.forEach(
function (country) {
const option =
document.createElement(
"option"
);
option.value =
country.code;
/*
* Professional public display:
* country name only.
*/
option.textContent =
country.name;
countrySelect.appendChild(
option
);
}
);
}
/* =======================================================
PRICING STATE
======================================================= */
function getCountryPricing(
countryCode
) {
if (
typeof mgmGetCountryOccupancy !==
"function" ||
typeof mgmGetPricingState !==
"function"
) {
return null;
}
const occupied =
mgmGetCountryOccupancy(
countryCode
);
return mgmGetPricingState(
occupied
);
}
/* =======================================================
COUNTRY LOOKUP
======================================================= */
function getCountry(
countryCode
) {
if (
typeof MGM_COUNTRIES ===
"undefined"
) {
return null;
}
return MGM_COUNTRIES.find(
function (country) {
return (
country.code ===
countryCode
);
}
) || null;
}
/* =======================================================
SUMMARY ELEMENTS
======================================================= */
const summaryBusiness =
document.getElementById(
"mgm-location-summary-business"
);
const summaryCountry =
document.getElementById(
"mgm-location-summary-country"
);
const summaryPrice =
document.getElementById(
"mgm-location-summary-price"
);
const summaryTier =
document.getElementById(
"mgm-location-summary-tier"
);
const summaryPosition =
document.getElementById(
"mgm-location-summary-position"
);
const reviewBusiness =
document.getElementById(
"mgm-review-business"
);
const reviewCountry =
document.getElementById(
"mgm-review-country"
);
const reviewDestination =
document.getElementById(
"mgm-review-destination"
);
const reviewCategory =
document.getElementById(
"mgm-review-category"
);
/* =======================================================
RESTORE BUSINESS NAME FROM B09
======================================================= */
function restoreBusinessContext() {
const stepOne =
getStepOneData();
const businessName =
stepOne &&
stepOne.businessName
? stepOne.businessName
: "Your Establishment";
summaryBusiness.textContent =
businessName;
reviewBusiness.textContent =
businessName;
}
/* =======================================================
UPDATE COUNTRY STATE
======================================================= */
function updateCountryState(
countryCode,
broadcast
) {
const country =
getCountry(
countryCode
);
if (!country) {
summaryCountry.textContent =
"Not selected";
summaryPrice.textContent =
"—";
summaryTier.textContent =
"—";
summaryPosition.textContent =
"—";
reviewCountry.textContent =
"—";
return;
}
const pricing =
getCountryPricing(
countryCode
);
summaryCountry.textContent =
country.name;
reviewCountry.textContent =
country.name;
if (pricing) {
summaryPrice.textContent =
"$" +
pricing.tier.price;
summaryTier.textContent =
pricing.tier.name;
summaryPosition.textContent =
"#" +
pricing.nextPosition;
}
/*
* Keep B02, B03, B04 etc.
* synchronized if the country
* is changed here.
*/
localStorage.setItem(
"mgm_selected_country",
country.code
);
if (broadcast !== false) {
window.dispatchEvent(
new CustomEvent(
"mgm:countrychange",
{
detail: {
code:
country.code,
name:
country.name,
flag:
country.flag || ""
}
}
)
);
}
}
/* =======================================================
CATEGORY LABEL
======================================================= */
function getSelectedCategoryLabel() {
if (
!categoryField.value
) {
return "—";
}
const option =
categoryField.options[
categoryField.selectedIndex
];
return option
? option.textContent.trim()
: "—";
}
/* =======================================================
REVIEW PREVIEW
======================================================= */
function updateReviewPreview() {
reviewDestination.textContent =
destinationField.value.trim() ||
"—";
reviewCategory.textContent =
getSelectedCategoryLabel();
}
destinationField.addEventListener(
"input",
updateReviewPreview
);
categoryField.addEventListener(
"change",
updateReviewPreview
);
/* =======================================================
COUNTRY CHANGE
======================================================= */
countrySelect.addEventListener(
"change",
function () {
updateCountryState(
countrySelect.value,
true
);
}
);
/*
* Also react when B02 changes.
*/
window.addEventListener(
"mgm:countrychange",
function (event) {
if (
!event.detail ||
!event.detail.code
) {
return;
}
countrySelect.value =
event.detail.code;
updateCountryState(
event.detail.code,
false
);
}
);
/* =======================================================
STEP 2 DATA
======================================================= */
function getStepTwoData() {
const country =
getCountry(
countrySelect.value
);
const pricing =
getCountryPricing(
countrySelect.value
);
return {
countryCode:
country
? country.code
: "",
country:
country
? country.name
: "",
destination:
destinationField.value.trim(),
area:
areaField.value.trim(),
address:
addressField.value.trim(),
category:
categoryField.value,
categoryLabel:
getSelectedCategoryLabel(),
categoryDetail:
categoryDetailField.value.trim(),
operatingModel:
operatingModelField.value,
operatingSeason:
operatingSeasonField.value,
displayedPrice:
pricing
? pricing.tier.price
: null,
displayedTier:
pricing
? pricing.tier.name
: "",
displayedNextPosition:
pricing
? pricing.nextPosition
: null
};
}
/* =======================================================
VALIDATION
======================================================= */
function validateForm() {
const required =
Array.from(
form.querySelectorAll(
"[required]"
)
);
let firstInvalid =
null;
required.forEach(
function (field) {
field.classList.remove(
"is-invalid"
);
if (
!field.checkValidity()
) {
field.classList.add(
"is-invalid"
);
if (!firstInvalid) {
firstInvalid =
field;
}
}
}
);
if (firstInvalid) {
errorBox.hidden =
false;
successBox.hidden =
true;
firstInvalid.focus();
return false;
}
errorBox.hidden =
true;
return true;
}
/* =======================================================
DEMO APPLICATION REFERENCE
======================================================= */
function createDemoReference() {
const now =
Date.now()
.toString()
.slice(-6);
return (
"MGM-DEMO-" +
now
);
}
/* =======================================================
SUBMIT APPLICATION
======================================================= */
form.addEventListener(
"submit",
function (event) {
event.preventDefault();
if (!validateForm()) {
return;
}
const stepOne =
getStepOneData();
/*
* B09 must be completed first.
*/
if (
!stepOne ||
!stepOne.businessName ||
!stepOne.contactName ||
!stepOne.email ||
!stepOne.coupleExperience
) {
errorBox.textContent =
"Please complete Step 1 — Your Establishment — before submitting the application.";
errorBox.hidden =
false;
const stepOneBlock =
document.getElementById(
"mgm-partner-application"
);
if (stepOneBlock) {
stepOneBlock.scrollIntoView({
behavior:
"smooth",
block:
"start"
});
}
return;
}
errorBox.textContent =
"Please complete the required fields before submitting.";
const stepTwo =
getStepTwoData();
const reference =
createDemoReference();
const application = {
reference:
reference,
status:
"PENDING_REVIEW_DEMO",
submittedAt:
new Date().toISOString(),
establishment:
stepOne,
placement:
stepTwo
};
/*
* FRONT-END DEMO STORAGE ONLY.
*
* Production:
* POST this record to
* Mango Getaway Core.
*/
const existing =
JSON.parse(
localStorage.getItem(
"mgm_partner_applications_demo"
) || "[]"
);
existing.push(
application
);
localStorage.setItem(
"mgm_partner_applications_demo",
JSON.stringify(
existing
)
);
/*
* Success state.
*/
document.getElementById(
"mgm-application-reference"
).textContent =
reference;
successBox.hidden =
false;
submitButton.disabled =
true;
submitButton.textContent =
"Application Submitted";
successBox.scrollIntoView({
behavior:
"smooth",
block:
"nearest"
});
/*
* Broadcast for later
* blocks / Core integration.
*/
window.dispatchEvent(
new CustomEvent(
"mgm:applicationsubmitted",
{
detail:
application
}
)
);
}
);
/* =======================================================
RESTORE B10 DRAFT
======================================================= */
function saveStepTwoDraft() {
const draft =
getStepTwoData();
localStorage.setItem(
"mgm_partner_application_step_two",
JSON.stringify(
draft
)
);
}
[
countrySelect,
destinationField,
areaField,
addressField,
categoryField,
categoryDetailField,
operatingModelField,
operatingSeasonField
].forEach(
function (field) {
field.addEventListener(
"change",
saveStepTwoDraft
);
if (
field.tagName ===
"INPUT"
) {
field.addEventListener(
"input",
saveStepTwoDraft
);
}
}
);
function restoreStepTwoDraft() {
const stored =
localStorage.getItem(
"mgm_partner_application_step_two"
);
if (!stored) {
return;
}
let draft;
try {
draft =
JSON.parse(
stored
);
}
catch (error) {
return;
}
if (draft.destination) {
destinationField.value =
draft.destination;
}
if (draft.area) {
areaField.value =
draft.area;
}
if (draft.address) {
addressField.value =
draft.address;
}
if (draft.category) {
categoryField.value =
draft.category;
}
if (draft.categoryDetail) {
categoryDetailField.value =
draft.categoryDetail;
}
if (draft.operatingModel) {
operatingModelField.value =
draft.operatingModel;
}
if (draft.operatingSeason) {
operatingSeasonField.value =
draft.operatingSeason;
}
}
/* =======================================================
INITIALISE
======================================================= */
populateCountrySelect();
restoreBusinessContext();
restoreStepTwoDraft();
/*
* B02 country takes priority.
*/
const savedCountry =
localStorage.getItem(
"mgm_selected_country"
);
if (savedCountry) {
countrySelect.value =
savedCountry;
updateCountryState(
savedCountry,
false
);
}
updateReviewPreview();
})();
Partner Application
Place your establishment
where it belongs.
Complete your location and category information so Mango Getaway
can review your establishment within the correct country,
destination and Mango Match collection.
01
Completed
Your Establishment
02
Current Step
Location & Category
Application Summary
Your Establishment
Review your current Mango Match placement context
before submitting the application.
Country
Not selected
Current Price
—
Placement Level
—
Next Country Position
—
Application first. Payment after approval.
The displayed price is not reserved until Mango Getaway
approves the application and assigns an available
country position.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B11 — QUALIFICATION & EDITORIAL DISCLOSURE
========================================================= */
.mgm-qualification-disclosure {
--mgm-bg: #14110e;
--mgm-panel: #211c17;
--mgm-panel-soft: #1b1713;
--mgm-cream: #fff5e6;
--mgm-soft: #e7dac9;
--mgm-muted: #c9bdaf;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
position: relative;
overflow: hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
var(--mgm-bg);
}
/* =========================================================
AMBIENT DETAIL
========================================================= */
.mgm-qualification-disclosure::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
right: -330px;
top: 150px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.07),
transparent 70%
);
pointer-events: none;
}
.mgm-qualification-disclosure__inner {
position: relative;
z-index: 2;
width:
min(1180px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-qualification-disclosure__heading {
max-width: 820px;
margin-bottom:
clamp(38px, 5vw, 58px);
}
.mgm-qualification-disclosure__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mgm-qualification-disclosure__eyebrow::before {
content: "";
width: 30px;
height: 1px;
background:
var(--mgm-gold);
}
.mgm-qualification-disclosure__title {
margin: 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.038em;
}
.mgm-qualification-disclosure__title span {
display: block;
color:
var(--mgm-gold);
}
.mgm-qualification-disclosure__intro {
max-width: 750px;
margin:
22px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height: 1.72;
}
/* =========================================================
GOVERNING PRINCIPLE
========================================================= */
.mgm-qualification-disclosure__principle {
max-width: 900px;
margin-bottom: 18px;
padding:
clamp(28px, 4vw, 40px);
border:
1px solid
rgba(244, 166, 65, 0.26);
border-radius: 27px;
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.07),
transparent 46%
),
var(--mgm-panel);
}
.mgm-qualification-disclosure__principle-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-qualification-disclosure__principle h3 {
max-width: 690px;
margin:
10px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(31px, 4vw, 46px);
font-weight: 500;
line-height: 1;
}
.mgm-qualification-disclosure__principle p {
max-width: 750px;
margin:
15px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
line-height: 1.72;
}
/* =========================================================
DISCLOSURE GRID
========================================================= */
.mgm-qualification-disclosure__grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
}
.mgm-disclosure-card {
min-height: 270px;
padding: 23px;
border:
1px solid
var(--mgm-line);
border-radius: 22px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.025),
rgba(255, 255, 255, 0.006)
),
var(--mgm-panel);
}
.mgm-disclosure-card__number {
color:
var(--mgm-gold);
font-family:
"DM Mono",
monospace;
font-size: 10px;
letter-spacing: 0.13em;
}
.mgm-disclosure-card__content {
margin-top: 38px;
}
.mgm-disclosure-card__label {
color:
rgba(255, 245, 230, 0.43);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mgm-disclosure-card h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(25px, 2.7vw, 33px);
font-weight: 500;
line-height: 1.03;
}
.mgm-disclosure-card p {
margin:
12px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
line-height: 1.68;
}
/* =========================================================
NO GUARANTEE
========================================================= */
.mgm-qualification-disclosure__no-guarantee {
margin-top: 18px;
padding:
24px;
border:
1px solid
rgba(255, 245, 230, 0.13);
border-radius: 20px;
background:
var(--mgm-panel-soft);
}
.mgm-qualification-disclosure__no-guarantee-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-qualification-disclosure__no-guarantee h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(27px, 3vw, 37px);
font-weight: 500;
}
.mgm-qualification-disclosure__no-guarantee p {
max-width: 840px;
margin:
10px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
line-height: 1.68;
}
/* =========================================================
CONSENT
========================================================= */
.mgm-qualification-disclosure__consent {
display: grid;
grid-template-columns:
minmax(240px, 0.65fr)
minmax(0, 1.35fr);
gap:
clamp(30px, 6vw, 70px);
margin-top:
clamp(48px, 6vw, 70px);
padding:
clamp(28px, 4vw, 38px);
border:
1px solid
var(--mgm-line);
border-radius: 26px;
background:
var(--mgm-panel);
}
.mgm-qualification-disclosure__consent-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-qualification-disclosure__consent-heading h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(30px, 3.5vw, 42px);
font-weight: 500;
}
.mgm-qualification-disclosure__checks {
display: grid;
gap: 10px;
}
/* =========================================================
CHECKS
========================================================= */
.mgm-disclosure-check {
position: relative;
display: grid;
grid-template-columns:
18px
minmax(0, 1fr);
gap: 11px;
padding: 15px;
border:
1px solid
var(--mgm-line);
border-radius: 14px;
background:
rgba(20, 17, 14, 0.35);
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.mgm-disclosure-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mgm-disclosure-check__control {
width: 17px;
height: 17px;
margin-top: 2px;
border:
1px solid
rgba(255, 245, 230, 0.26);
border-radius: 4px;
}
.mgm-disclosure-check
input:checked
+
.mgm-disclosure-check__control {
border:
4px solid
var(--mgm-gold);
background:
var(--mgm-gold);
}
.mgm-disclosure-check:has(input:checked) {
border-color:
rgba(244, 166, 65, 0.3);
background:
rgba(244, 166, 65, 0.045);
}
.mgm-disclosure-check strong {
display: block;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
}
.mgm-disclosure-check small {
display: block;
margin-top: 4px;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
line-height: 1.5;
}
/* =========================================================
HANDOFF
========================================================= */
.mgm-qualification-disclosure__handoff {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 22px;
padding:
26px 0;
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-qualification-disclosure__handoff
> div
> span {
display: block;
color:
rgba(255, 245, 230, 0.42);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.mgm-qualification-disclosure__handoff
> div
> strong {
display: block;
margin-top: 4px;
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size: 14px;
}
.mgm-qualification-disclosure__handoff p {
max-width: 650px;
margin:
6px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
line-height: 1.55;
}
.mgm-qualification-disclosure__submit {
min-height: 51px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding:
0 23px;
border: 0;
border-radius: 999px;
color:
#1a1208;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.mgm-qualification-disclosure__submit:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* =========================================================
DEVELOPMENT NOTE
========================================================= */
.mgm-qualification-disclosure__development-note {
display: grid;
grid-template-columns:
36px
minmax(0, 1fr);
gap: 14px;
max-width: 920px;
margin-top: 27px;
}
.mgm-qualification-disclosure__development-line {
width: 31px;
height: 1px;
margin-top: 9px;
background:
linear-gradient(
90deg,
var(--mgm-gold),
rgba(244, 166, 65, 0.1)
);
}
.mgm-qualification-disclosure__development-note p {
margin: 0;
color:
rgba(255, 245, 230, 0.46);
font-family:
"DM Sans",
sans-serif;
font-size: 10px;
line-height: 1.6;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 940px) {
.mgm-qualification-disclosure__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.mgm-qualification-disclosure__consent {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-qualification-disclosure {
padding:
70px
18px
76px;
}
.mgm-qualification-disclosure__grid {
grid-template-columns:
1fr;
}
.mgm-disclosure-card {
min-height: auto;
}
.mgm-disclosure-card__content {
margin-top: 28px;
}
.mgm-qualification-disclosure__consent {
padding:
23px 20px;
}
.mgm-qualification-disclosure__handoff {
align-items: flex-start;
flex-direction: column;
}
.mgm-qualification-disclosure__submit {
width: 100%;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B11 — QUALIFICATION & EDITORIAL DISCLOSURE
========================================================= */
(function () {
const submitButton =
document.getElementById(
"mgm-final-application-submit"
);
const status =
document.getElementById(
"mgm-disclosure-status"
);
const checks = [
document.getElementById(
"mgm-disclosure-commercial"
),
document.getElementById(
"mgm-disclosure-price"
),
document.getElementById(
"mgm-disclosure-accuracy"
),
document.getElementById(
"mgm-disclosure-media"
)
].filter(Boolean);
if (
!submitButton ||
!status
) {
return;
}
/* =======================================================
CHECK COMPLETION
======================================================= */
function updateDisclosureState() {
const allChecked =
checks.length === 4 &&
checks.every(
function (checkbox) {
return checkbox.checked;
}
);
/*
* Development state:
*
* Even once confirmations are
* completed, submission remains
* disabled until the WordPress
* integration patch is installed.
*/
submitButton.disabled =
true;
if (allChecked) {
status.textContent =
"Confirmations complete — submission integration pending";
}
else {
const checkedCount =
checks.filter(
function (checkbox) {
return checkbox.checked;
}
).length;
status.textContent =
checkedCount +
" of 4 confirmations complete";
}
/*
* Save B11 consent draft.
*/
localStorage.setItem(
"mgm_partner_application_disclosures",
JSON.stringify({
commercial:
checks[0]
? checks[0].checked
: false,
pricing:
checks[1]
? checks[1].checked
: false,
accuracy:
checks[2]
? checks[2].checked
: false,
media:
checks[3]
? checks[3].checked
: false,
updatedAt:
new Date().toISOString()
})
);
}
/* =======================================================
RESTORE DRAFT
======================================================= */
function restoreDisclosureState() {
const stored =
localStorage.getItem(
"mgm_partner_application_disclosures"
);
if (!stored) {
updateDisclosureState();
return;
}
let data;
try {
data =
JSON.parse(
stored
);
}
catch (error) {
updateDisclosureState();
return;
}
if (checks[0]) {
checks[0].checked =
Boolean(
data.commercial
);
}
if (checks[1]) {
checks[1].checked =
Boolean(
data.pricing
);
}
if (checks[2]) {
checks[2].checked =
Boolean(
data.accuracy
);
}
if (checks[3]) {
checks[3].checked =
Boolean(
data.media
);
}
updateDisclosureState();
}
/* =======================================================
LISTEN
======================================================= */
checks.forEach(
function (checkbox) {
checkbox.addEventListener(
"change",
updateDisclosureState
);
}
);
restoreDisclosureState();
})();
Qualification & Editorial Standards
Clear terms.
Clear expectations.
Before submitting your application, please review how
Mango Getaway handles commercial placements, editorial
independence, partner information and Featured Partner
opportunities.
Our Governing Principle
Commercial participation does not buy an editorial conclusion.
Mango Match is a paid discovery placement product.
Editorial recommendations, itinerary decisions and Featured
Partner selection are governed separately by traveler value,
destination fit and Mango Getaway’s editorial judgment.
01
Application Review
Applications are reviewed before acceptance
Mango Getaway may accept, decline, hold or request
additional information before offering a Mango Match
placement.
02
Commercial Placement
Payment supports the agreed Mango Match card
A paid Mango Match placement gives the accepted
establishment the agreed commercial discovery presence.
It does not purchase an independent editorial endorsement.
03
Featured Partner Selection
Featured opportunities are considered separately
Featured Partner positions are only considered when
Mango Getaway identifies a genuine fit between an
establishment and a specific traveler journey.
04
Pricing
Displayed pricing is not reserved at application
The applicable country placement price is confirmed
only after Mango Getaway approves the application and
reserves an available country position.
05
Information Accuracy
Business information must be accurate
Partners are responsible for providing accurate,
current and non-misleading business information.
Mango Getaway may request verification where necessary.
06
Media Rights
Submitted media must be authorized for use
Any images, video, copy or other media supplied for
a Mango Match card must be owned by the establishment
or provided with appropriate permission for Mango Getaway
to use them for the agreed placement.
No Performance Guarantee
Mango Match creates discovery opportunity — not guaranteed results.
Mango Getaway does not guarantee a specific number of
impressions, saves, clicks, enquiries, bookings, revenue,
ranking position or Featured Partner selection as a result
of a Mango Match placement.
Before You Submit
Please confirm the following.
I understand that Mango Match is a commercial discovery placement.
Payment does not purchase an independent editorial endorsement
or Featured Partner position.
I understand that the displayed country price is not yet reserved.
Final pricing is confirmed only if Mango Getaway approves
the application and reserves an available position.
I confirm that the information submitted is accurate.
I will provide updated information if anything materially changes.
I will only provide media Mango Getaway is authorized to use.
I understand Mango Getaway may request confirmation of
ownership or usage permission before publication.
Application Status
Ready for final review
Once the required confirmations are complete, the production
version will allow the full application to be submitted to
Mango Getaway for review.
Submit Application for Review
The final submission button is intentionally inactive in this
development block. During the Application Integration Patch,
it will send the complete B09 + B10 + B11 application through
the WordPress server to Mango Getaway.
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B12 — FAQ
========================================================= */
.mgm-partner-faq {
--mgm-bg: #181410;
--mgm-bg-deep: #14110e;
--mgm-panel: #211c17;
--mgm-cream: #fff5e6;
--mgm-soft: #e7dac9;
--mgm-muted: #c9bdaf;
--mgm-gold: #f4a641;
--mgm-gold-deep: #d87916;
--mgm-line:
rgba(255, 245, 230, 0.12);
position: relative;
overflow: hidden;
padding:
clamp(82px, 9vw, 128px)
24px;
color:
var(--mgm-cream);
background:
linear-gradient(
180deg,
var(--mgm-bg),
var(--mgm-bg-deep)
);
}
/* =========================================================
BACKGROUND
========================================================= */
.mgm-partner-faq::before {
content: "";
position: absolute;
width: 540px;
height: 540px;
left: -340px;
bottom: 80px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(244, 166, 65, 0.065),
transparent 70%
);
pointer-events: none;
}
.mgm-partner-faq__inner {
position: relative;
z-index: 2;
width:
min(1040px, 100%);
margin:
0 auto;
}
/* =========================================================
HEADING
========================================================= */
.mgm-partner-faq__heading {
max-width: 760px;
margin-bottom:
clamp(38px, 5vw, 58px);
}
.mgm-partner-faq__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.mgm-partner-faq__eyebrow::before {
content: "";
width: 30px;
height: 1px;
background:
var(--mgm-gold);
}
.mgm-partner-faq__title {
margin: 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.038em;
}
.mgm-partner-faq__intro {
max-width: 700px;
margin:
21px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(16px, 1.5vw, 19px);
line-height: 1.72;
}
/* =========================================================
FAQ LIST
========================================================= */
.mgm-partner-faq__list {
border-top:
1px solid
var(--mgm-line);
}
/* =========================================================
ITEM
========================================================= */
.mgm-partner-faq__item {
border-bottom:
1px solid
var(--mgm-line);
}
.mgm-partner-faq__item summary {
display: grid;
grid-template-columns:
44px
minmax(0, 1fr)
32px;
gap: 14px;
align-items: center;
min-height: 82px;
padding:
18px 0;
list-style: none;
cursor: pointer;
transition:
background 0.2s ease;
}
.mgm-partner-faq__item summary::-webkit-details-marker {
display: none;
}
.mgm-partner-faq__item summary:hover
.mgm-partner-faq__question {
color:
var(--mgm-gold);
}
.mgm-partner-faq__number {
color:
rgba(255, 245, 230, 0.32);
font-family:
"DM Mono",
monospace;
font-size: 9px;
letter-spacing: 0.12em;
}
.mgm-partner-faq__question {
color:
var(--mgm-cream);
font-family:
"DM Sans",
sans-serif;
font-size:
clamp(13px, 1.5vw, 15px);
font-weight: 700;
line-height: 1.45;
transition:
color 0.2s ease;
}
/* =========================================================
TOGGLE
========================================================= */
.mgm-partner-faq__toggle {
position: relative;
width: 28px;
height: 28px;
justify-self: end;
border:
1px solid
var(--mgm-line);
border-radius: 50%;
}
.mgm-partner-faq__toggle::before,
.mgm-partner-faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 1px;
background:
var(--mgm-gold);
transform:
translate(-50%, -50%);
transition:
transform 0.2s ease;
}
.mgm-partner-faq__toggle::after {
transform:
translate(-50%, -50%)
rotate(90deg);
}
.mgm-partner-faq__item[open]
.mgm-partner-faq__toggle::after {
transform:
translate(-50%, -50%)
rotate(0deg);
}
/* =========================================================
OPEN STATE
========================================================= */
.mgm-partner-faq__item[open]
.mgm-partner-faq__number {
color:
var(--mgm-gold);
}
.mgm-partner-faq__item[open]
.mgm-partner-faq__question {
color:
var(--mgm-gold);
}
/* =========================================================
ANSWER
========================================================= */
.mgm-partner-faq__answer {
max-width: 820px;
padding:
0
46px
26px
58px;
}
.mgm-partner-faq__answer p {
margin: 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
line-height: 1.72;
}
.mgm-partner-faq__answer p
+ p {
margin-top: 10px;
}
/* =========================================================
CLOSING PANEL
========================================================= */
.mgm-partner-faq__closing {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-top:
clamp(48px, 6vw, 70px);
padding:
clamp(28px, 4vw, 40px);
border:
1px solid
rgba(244, 166, 65, 0.22);
border-radius: 26px;
background:
linear-gradient(
145deg,
rgba(244, 166, 65, 0.07),
transparent 48%
),
var(--mgm-panel);
}
.mgm-partner-faq__closing-copy {
max-width: 650px;
}
.mgm-partner-faq__closing-label {
color:
var(--mgm-gold);
font-family:
"DM Sans",
sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.mgm-partner-faq__closing h3 {
margin:
9px 0 0;
color:
var(--mgm-cream);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(30px, 4vw, 43px);
font-weight: 500;
line-height: 1;
}
.mgm-partner-faq__closing p {
margin:
12px 0 0;
color:
var(--mgm-muted);
font-family:
"DM Sans",
sans-serif;
font-size: 11px;
line-height: 1.65;
}
/* =========================================================
CTA
========================================================= */
.mgm-partner-faq__cta {
min-height: 51px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding:
0 23px;
border-radius: 999px;
color:
#1a1208 !important;
background:
linear-gradient(
135deg,
var(--mgm-gold-deep),
var(--mgm-gold),
#ffc66f
);
font-family:
"DM Sans",
sans-serif;
font-size: 12px;
font-weight: 800;
text-decoration: none !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.mgm-partner-faq__cta:hover {
transform:
translateY(-2px);
box-shadow:
0 12px 34px
rgba(244, 166, 65, 0.16);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 620px) {
.mgm-partner-faq {
padding:
70px
18px
76px;
}
.mgm-partner-faq__item summary {
grid-template-columns:
30px
minmax(0, 1fr)
28px;
gap: 10px;
min-height: 74px;
}
.mgm-partner-faq__answer {
padding:
0
38px
24px
40px;
}
.mgm-partner-faq__closing {
align-items: flex-start;
flex-direction: column;
padding:
24px 20px;
}
.mgm-partner-faq__cta {
width: 100%;
}
}
/* =========================================================
MANGO MATCH PARTNER SIGNUP
B12 — FAQ
========================================================= */
(function () {
const faqItems =
Array.from(
document.querySelectorAll(
".mgm-partner-faq__item"
)
);
/*
* Keep the FAQ tidy:
* opening one question closes
* the previously open question.
*/
faqItems.forEach(
function (item) {
item.addEventListener(
"toggle",
function () {
if (!item.open) {
return;
}
faqItems.forEach(
function (otherItem) {
if (
otherItem !== item
) {
otherItem.open =
false;
}
}
);
}
);
}
);
})();
Frequently Asked Questions
Before you apply.
A few clear answers about Mango Match placements,
pricing, approval, payment and Featured Partner opportunities.
01
What is a Mango Match placement?
A Mango Match placement gives an approved establishment
a discovery card inside the relevant country, destination
and category collection.
The card is designed around what couples could genuinely
experience together and can direct interested travelers
to your preferred website, booking page or enquiry route.
02
Why does the placement price change?
Each country begins at the Founding placement level.
The first 10 qualifying positions are priced at $5 once-off.
As the country collection grows, new placements move
through the published progression of $15, $25, $40
and eventually $60.
03
Is the Mango Match placement fee monthly?
No. The placement model shown on this page is a
one-time fee for the accepted Mango Match card.
Separate future campaigns, services or partnership
opportunities may have their own commercial terms.
04
Do I pay when I submit the application?
No. The application is reviewed first.
If Mango Getaway approves the establishment,
the applicable country position and price can then
be reserved for a limited payment period before
secure checkout is offered.
05
Does applying guarantee that Mango Getaway will accept us?
No. Mango Getaway reviews each application before
offering a placement.
We may accept, decline, hold or request additional
information depending on destination fit, traveler
relevance, information quality and the suitability
of the proposed experience.
06
If we are approved and pay, when does our card go live?
Payment confirms the commercial placement, but publication
can still depend on Mango Getaway receiving the information,
media, links and permissions required to complete the card.
The card should only be published once it has passed
Mango Getaway’s final content and quality review.
07
Does a Mango Match card mean Mango Getaway recommends us?
No. Mango Match is a commercial discovery placement.
Paying for a Mango Match card does not purchase an
independent editorial recommendation, ranking or
inclusion inside a Mango Getaway itinerary.
08
Can we become a Featured Partner?
Potentially.
Featured Partner positions are considered separately
when Mango Getaway identifies a genuine fit between an
establishment and a defined position inside a particular
destination itinerary.
You may indicate your interest during the partner application,
but interest does not guarantee selection.
09
What happens when the first 10 positions in our country are filled?
The next available placement moves to the next published
country price level.
For example, once positions 1–10 are occupied,
position 11 begins the $15 placement level.
10
Will our original placement price increase later?
The country progression determines the entry price for
new placements.
An establishment’s original accepted placement remains
governed by the commercial terms agreed for that placement,
unless both parties later agree to something different.
11
What images or media can we provide?
Only provide images, video, copy or other media that
your establishment owns or is authorized to provide
for Mango Getaway’s agreed use.
Mango Getaway may request additional permission or
rights information before publication.
12
Do you guarantee bookings or traffic?
No.
Mango Match creates an opportunity for discovery,
but Mango Getaway does not guarantee a specific number
of views, saves, clicks, enquiries, bookings, revenue
or other performance result.
13
What happens after we submit?
Mango Getaway reviews the application and may request
clarification or additional information.
If approved, you will receive the applicable placement
offer and payment instructions. After payment, Mango
Getaway will collect or confirm the information and
media required to prepare the Mango Match card.
Ready When You Are
Help couples discover what makes your experience worth sharing.
Complete the partner application and Mango Getaway
will review your establishment for Mango Match.
Start Your Application
