/* ==========================================================
MANGO GETAWAY
SÃO PAULO STATE V1.1
DISPLAY: Cormorant Garamond
BODY: DM Sans
UTILITY: DM Mono
========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap");
/* ==========================================================
ROOT
========================================================== */
#mgsp {
--black: #14110e;
--black-soft: #181410;
--brown: #211c17;
--brown-light: #2b241d;
--cream: #fff5e6;
--cream-soft: #d8cbbc;
--mango: #f4a641;
--mango-deep: #d87916;
--line: rgba(255, 245, 230, 0.12);
/*
========================================================
IMAGE REGISTRY
Replace "none" with:
url("YOUR-IMAGE.webp")
The page still looks intentional with no images installed.
========================================================
*/
--img-hero: none;
--img-city: none;
--img-coast: none;
--img-mountain: none;
--img-road: none;
--img-ilhabela: none;
--img-close: none;
position: relative;
width: 100%;
overflow: hidden;
background: var(--black);
color: var(--cream);
font-family: "DM Sans", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#mgsp *,
#mgsp *::before,
#mgsp *::after {
box-sizing: border-box;
}
#mgsp a {
color: inherit;
text-decoration: none;
}
#mgsp button {
font: inherit;
}
.mgsp-shell {
width: min(1240px, calc(100% - 48px));
margin-inline: auto;
}
/* ==========================================================
TYPOGRAPHY
========================================================== */
.mgsp-label,
.mgsp-eyebrow {
display: block;
color: var(--mango);
font-family: "DM Mono", monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ==========================================================
BUTTONS
========================================================== */
.mgsp-button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 25px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
transition:
transform 180ms ease,
background 180ms ease;
}
.mgsp-button:hover {
transform: translateY(-2px);
}
.mgsp-button--mango {
background: var(--mango);
color: #17110b !important;
}
.mgsp-button--mango:hover {
background: #ffb453;
}
/* ==========================================================
B01
HERO
========================================================== */
.mgsp-hero {
position: relative;
isolation: isolate;
min-height: min(920px, 96vh);
display: flex;
}
.mgsp-hero__media {
position: absolute;
inset: 0;
z-index: -3;
background-image:
var(--img-hero),
radial-gradient(
circle at 72% 38%,
#4a3726 0%,
#241c15 34%,
#14110e 73%
);
background-size: cover;
background-position: center;
}
.mgsp-hero__shade {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(
90deg,
rgba(12, 9, 7, 0.92) 0%,
rgba(12, 9, 7, 0.58) 46%,
rgba(12, 9, 7, 0.2) 100%
),
linear-gradient(
0deg,
rgba(20,17,14,0.87) 0%,
transparent 48%
);
}
.mgsp-hero__inner {
min-height: inherit;
display: flex;
flex-direction: column;
padding-top: 38px;
padding-bottom: 35px;
}
.mgsp-back {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 9px;
color: rgba(255,245,230,.66);
font-family: "DM Mono", monospace;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
transition: color 160ms ease;
}
.mgsp-back:hover {
color: var(--cream);
}
.mgsp-hero__content {
width: min(760px, 76%);
margin-block: auto;
padding: 90px 0 70px;
}
.mgsp-hero h1 {
margin: 17px 0 22px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(67px, 8.2vw, 116px);
font-weight: 500;
line-height: .84;
letter-spacing: -.05em;
}
.mgsp-hero__content p {
max-width: 580px;
margin: 0 0 31px;
color: rgba(255,245,230,.75);
font-size: 17px;
line-height: 1.7;
}
.mgsp-hero__footer {
display: flex;
align-items: center;
gap: 18px;
padding-top: 23px;
border-top: 1px solid rgba(255,255,255,.16);
}
.mgsp-hero__footer span {
color: var(--mango);
font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: .14em;
}
.mgsp-hero__footer p {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 20px;
}
/* ==========================================================
B02
QUESTION
========================================================== */
.mgsp-question {
padding: 112px 0;
background: var(--black-soft);
border-bottom: 1px solid var(--line);
}
.mgsp-question__grid {
display: grid;
grid-template-columns: .95fr 1.05fr;
align-items: start;
gap: clamp(60px, 10vw, 140px);
}
.mgsp-question h2 {
max-width: 580px;
margin: 16px 0 0;
font-family: "Cormorant Garamond", serif;
font-size: clamp(47px, 5vw, 70px);
font-weight: 500;
line-height: .98;
letter-spacing: -.035em;
}
.mgsp-question__copy {
max-width: 620px;
}
.mgsp-question__copy p {
margin: 0 0 18px;
color: rgba(255,245,230,.67);
font-size: 16px;
line-height: 1.8;
}
.mgsp-question__copy .mgsp-question__accent {
margin-bottom: 0;
color: var(--cream);
font-family: "Cormorant Garamond", serif;
font-size: 27px;
line-height: 1.38;
}
/* ==========================================================
SHARED SECTION HEAD
========================================================== */
.mgsp-section-head {
max-width: 700px;
margin-bottom: 41px;
}
.mgsp-section-head h2 {
margin: 14px 0 0;
font-family: "Cormorant Garamond", serif;
font-size: clamp(48px, 5vw, 72px);
font-weight: 500;
line-height: .98;
letter-spacing: -.04em;
}
.mgsp-section-head--small {
max-width: 760px;
}
/* ==========================================================
B03
CHOOSE
========================================================== */
.mgsp-choose {
padding: 115px 0 125px;
background: var(--black);
}
/* Tabs */
.mgsp-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
}
.mgsp-tab {
min-height: 136px;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 25px;
border: 0;
border-right: 1px solid var(--line);
background: transparent;
color: var(--cream);
text-align: left;
cursor: pointer;
transition:
background 180ms ease,
color 180ms ease;
}
.mgsp-tab:last-child {
border-right: 0;
}
.mgsp-tab:hover,
.mgsp-tab.is-active {
background: var(--mango);
color: #18110b;
}
.mgsp-tab > span {
flex: 0 0 auto;
padding-top: 4px;
font-family: "DM Mono", monospace;
font-size: 9px;
opacity: .8;
}
.mgsp-tab div {
display: flex;
flex-direction: column;
gap: 5px;
}
.mgsp-tab strong {
font-family: "Cormorant Garamond", serif;
font-size: 30px;
font-weight: 600;
line-height: 1;
}
.mgsp-tab small {
font-size: 11px;
line-height: 1.45;
opacity: .65;
}
/* Result */
.mgsp-result {
min-height: 550px;
display: grid;
grid-template-columns: 1.12fr .88fr;
margin-top: 18px;
background: var(--brown);
overflow: hidden;
}
.mgsp-result__media {
min-height: 550px;
background-size: cover;
background-position: center;
transition:
opacity 180ms ease,
transform 350ms ease;
}
/* Result image fallbacks */
.mgsp-result__media[data-scene="coast"] {
background-image:
var(--img-coast),
linear-gradient(
135deg,
#31433b 0%,
#1f312c 37%,
#151812 100%
);
}
.mgsp-result__media[data-scene="city"] {
background-image:
var(--img-city),
linear-gradient(
135deg,
#342f2c 0%,
#191718 48%,
#0f0e10 100%
);
}
.mgsp-result__media[data-scene="mountain"] {
background-image:
var(--img-mountain),
linear-gradient(
135deg,
#313628 0%,
#252b21 44%,
#13150f 100%
);
}
.mgsp-result__media[data-scene="road"] {
background-image:
var(--img-road),
linear-gradient(
135deg,
#483522 0%,
#2c241b 50%,
#15110e 100%
);
}
.mgsp-result__media.is-changing {
opacity: .35;
transform: scale(1.015);
}
.mgsp-result__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(42px, 5vw, 70px);
}
.mgsp-result__kicker {
color: var(--mango);
font-family: "DM Mono", monospace;
font-size: 10px;
letter-spacing: .14em;
}
.mgsp-result h3 {
margin: 13px 0 18px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(41px, 4.5vw, 62px);
font-weight: 500;
line-height: .98;
letter-spacing: -.03em;
}
.mgsp-result__content > p {
margin: 0;
color: rgba(255,245,230,.67);
font-size: 15px;
line-height: 1.75;
}
.mgsp-result__facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin: 31px 0 26px;
padding: 23px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.mgsp-result__facts div {
display: flex;
flex-direction: column;
gap: 7px;
}
.mgsp-result__facts span {
color: rgba(255,245,230,.4);
font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: .13em;
}
.mgsp-result__facts strong {
font-size: 13px;
font-weight: 500;
}
.mgsp-result__link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--mango) !important;
font-size: 13px;
font-weight: 600;
}
.mgsp-result__link span {
transition: transform 160ms ease;
}
.mgsp-result__link:hover span {
transform: translateX(4px);
}
.mgsp-result__link.is-disabled {
color: rgba(255,245,230,.4) !important;
cursor: default;
}
/* ==========================================================
B04
WORLDS
========================================================== */
.mgsp-world {
padding: 115px 0 125px;
background: #181410;
}
.mgsp-world-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.mgsp-world-card {
position: relative;
isolation: isolate;
min-height: 545px;
overflow: hidden;
}
.mgsp-world-card__media,
.mgsp-world-card__shade {
position: absolute;
inset: 0;
}
.mgsp-world-card__media {
z-index: -3;
background-position: center;
background-size: cover;
transition: transform 650ms cubic-bezier(.2,.7,.2,1);
}
.mgsp-world-card:hover .mgsp-world-card__media {
transform: scale(1.035);
}
.mgsp-world-card__media--city {
background-image:
var(--img-city),
linear-gradient(135deg,#35302f,#171617);
}
.mgsp-world-card__media--coast {
background-image:
var(--img-coast),
linear-gradient(135deg,#33463d,#171d18);
}
.mgsp-world-card__media--mountain {
background-image:
var(--img-mountain),
linear-gradient(135deg,#353c2e,#171a14);
}
.mgsp-world-card__media--road {
background-image:
var(--img-road),
linear-gradient(135deg,#493725,#1d1711);
}
.mgsp-world-card__shade {
z-index: -2;
background:
linear-gradient(
0deg,
rgba(10,8,6,.94) 0%,
rgba(10,8,6,.52) 53%,
rgba(10,8,6,.10) 100%
);
}
.mgsp-world-card__content {
position: absolute;
inset: auto 0 0;
padding: 38px;
}
.mgsp-world-card__content > span {
color: var(--mango);
font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: .14em;
}
.mgsp-world-card h3 {
max-width: 470px;
margin: 10px 0 13px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(37px, 4vw, 51px);
font-weight: 500;
line-height: .98;
}
.mgsp-world-card p {
max-width: 470px;
margin: 0;
color: rgba(255,245,230,.67);
font-size: 13px;
line-height: 1.7;
}
.mgsp-world-card a {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 19px;
color: var(--mango) !important;
font-size: 12px;
font-weight: 600;
}
.mgsp-world-card a b {
font-weight: 400;
}
.mgsp-world-card small {
display: inline-block;
margin-top: 19px;
color: rgba(255,245,230,.38);
font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ==========================================================
B05
QUICK MATCH
========================================================== */
.mgsp-match {
padding: 112px 0;
background: var(--brown);
}
.mgsp-match__top {
display: grid;
grid-template-columns: .55fr 1.45fr;
gap: 50px;
align-items: start;
margin-bottom: 47px;
}
.mgsp-match__top h2 {
max-width: 760px;
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: clamp(46px, 5vw, 67px);
font-weight: 500;
line-height: .98;
letter-spacing: -.035em;
}
.mgsp-match__rows {
border-top: 1px solid var(--line);
}
.mgsp-match-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 26px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--cream);
cursor: pointer;
text-align: left;
transition: padding 180ms ease;
}
.mgsp-match-row:hover {
padding-left: 12px;
padding-right: 12px;
}
.mgsp-match-row > span {
color: rgba(255,245,230,.67);
font-size: 14px;
}
.mgsp-match-row strong {
display: flex;
align-items: center;
gap: 13px;
flex: 0 0 auto;
font-family: "Cormorant Garamond", serif;
font-size: 25px;
font-weight: 500;
}
.mgsp-match-row strong b {
color: var(--mango);
font-family: "DM Sans", sans-serif;
font-size: 15px;
font-weight: 400;
}
/* ==========================================================
B06
ILHABELA
========================================================== */
.mgsp-ilhabela {
padding: 110px 0;
background: var(--black);
}
.mgsp-ilhabela-card {
position: relative;
isolation: isolate;
min-height: 590px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.mgsp-ilhabela-card__media,
.mgsp-ilhabela-card__shade {
position: absolute;
inset: 0;
}
.mgsp-ilhabela-card__media {
z-index: -3;
background-image:
var(--img-ilhabela),
linear-gradient(
120deg,
#2f4038 0%,
#23332d 40%,
#171813 100%
);
background-size: cover;
background-position: center;
}
.mgsp-ilhabela-card__shade {
z-index: -2;
background:
linear-gradient(
90deg,
rgba(12,9,7,.91) 0%,
rgba(12,9,7,.67) 43%,
rgba(12,9,7,.19) 100%
),
linear-gradient(
0deg,
rgba(12,9,7,.72),
transparent 65%
);
}
.mgsp-ilhabela-card__content {
max-width: 700px;
padding: clamp(38px, 6vw, 70px);
}
.mgsp-ilhabela-card h2 {
margin: 11px 0 15px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(54px, 6vw, 82px);
font-weight: 500;
line-height: .93;
letter-spacing: -.04em;
}
.mgsp-ilhabela-card p {
max-width: 570px;
margin: 0;
color: rgba(255,245,230,.72);
font-size: 15px;
line-height: 1.7;
}
.mgsp-ilhabela-card__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 28px 0;
}
.mgsp-ilhabela-card__tags span {
padding: 8px 12px;
border: 1px solid rgba(255,245,230,.17);
border-radius: 999px;
background: rgba(20,17,14,.32);
color: rgba(255,245,230,.72);
font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: .07em;
text-transform: uppercase;
backdrop-filter: blur(5px);
}
/* ==========================================================
B07
CLOSE
========================================================== */
.mgsp-close {
position: relative;
isolation: isolate;
min-height: 610px;
display: flex;
align-items: center;
}
.mgsp-close__media,
.mgsp-close__shade {
position: absolute;
inset: 0;
}
.mgsp-close__media {
z-index: -3;
background-image:
var(--img-close),
radial-gradient(
circle at 70% 50%,
#443426 0%,
#211a14 42%,
#14110e 78%
);
background-size: cover;
background-position: center;
}
.mgsp-close__shade {
z-index: -2;
background:
linear-gradient(
90deg,
rgba(12,9,7,.91) 0%,
rgba(12,9,7,.62) 48%,
rgba(12,9,7,.2) 100%
);
}
.mgsp-close__inner {
padding-top: 90px;
padding-bottom: 90px;
}
.mgsp-close h2 {
max-width: 790px;
margin: 14px 0 18px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(52px, 6vw, 82px);
font-weight: 500;
line-height: .95;
letter-spacing: -.04em;
}
.mgsp-close p {
margin: 0;
color: rgba(255,245,230,.68);
font-size: 16px;
}
.mgsp-close__link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 29px;
color: var(--mango) !important;
font-size: 13px;
font-weight: 600;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 980px) {
.mgsp-tabs {
grid-template-columns: repeat(2, 1fr);
}
.mgsp-tab:nth-child(2) {
border-right: 0;
}
.mgsp-tab:nth-child(1),
.mgsp-tab:nth-child(2) {
border-bottom: 1px solid var(--line);
}
.mgsp-result {
grid-template-columns: 1fr;
}
.mgsp-result__media {
min-height: 430px;
}
.mgsp-match__top {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 760px) {
.mgsp-shell {
width: min(100% - 34px, 1240px);
}
/* Hero */
.mgsp-hero {
min-height: 820px;
}
.mgsp-hero__inner {
padding-top: 27px;
padding-bottom: 27px;
}
.mgsp-hero__content {
width: 100%;
padding: 125px 0 55px;
}
.mgsp-hero h1 {
font-size: clamp(58px, 18vw, 82px);
}
.mgsp-hero__content p {
font-size: 15px;
}
.mgsp-button {
width: 100%;
}
.mgsp-hero__footer {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
/* Section spacing */
.mgsp-question,
.mgsp-choose,
.mgsp-world,
.mgsp-match,
.mgsp-ilhabela {
padding-top: 78px;
padding-bottom: 78px;
}
/* Question */
.mgsp-question__grid {
grid-template-columns: 1fr;
gap: 35px;
}
/* Tabs */
.mgsp-tabs {
grid-template-columns: 1fr;
}
.mgsp-tab,
.mgsp-tab:nth-child(1),
.mgsp-tab:nth-child(2),
.mgsp-tab:nth-child(3),
.mgsp-tab:nth-child(4) {
min-height: auto;
padding: 19px 20px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.mgsp-tab:last-child {
border-bottom: 0;
}
.mgsp-tab strong {
font-size: 26px;
}
/* Result */
.mgsp-result {
margin-top: 14px;
}
.mgsp-result__media {
min-height: 320px;
}
.mgsp-result__content {
padding: 34px 23px 39px;
}
.mgsp-result__facts {
grid-template-columns: 1fr;
gap: 18px;
}
/* World cards */
.mgsp-world-grid {
grid-template-columns: 1fr;
}
.mgsp-world-card {
min-height: 465px;
}
.mgsp-world-card__content {
padding: 27px 24px;
}
/* Match */
.mgsp-match-row {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.mgsp-match-row:hover {
padding-left: 0;
padding-right: 0;
}
.mgsp-match-row strong {
font-size: 23px;
}
/* Ilhabela */
.mgsp-ilhabela-card {
min-height: 600px;
align-items: flex-end;
}
.mgsp-ilhabela-card__shade {
background:
linear-gradient(
0deg,
rgba(12,9,7,.94) 0%,
rgba(12,9,7,.72) 55%,
rgba(12,9,7,.15) 100%
);
}
.mgsp-ilhabela-card__content {
padding: 35px 23px;
}
.mgsp-ilhabela-card h2 {
font-size: 55px;
}
/* Close */
.mgsp-close {
min-height: 580px;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 430px) {
.mgsp-hero {
min-height: 780px;
}
.mgsp-section-head h2 {
font-size: 46px;
}
.mgsp-world-card {
min-height: 440px;
}
.mgsp-close h2 {
font-size: 49px;
}
}
/* ==========================================================
ACCESSIBILITY
========================================================== */
#mgsp a:focus-visible,
#mgsp button:focus-visible {
outline: 2px solid var(--mango);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
#mgsp *,
#mgsp *::before,
#mgsp *::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
document.addEventListener("DOMContentLoaded", function () {
const page = document.querySelector("#mgsp");
if (!page) return;
/* ======================================================
STATE DATA
======================================================= */
const moods = {
coast: {
kicker: "THE NORTH COAST",
title:
"Put the Atlantic in the middle of the trip.",
text:
"Beach roads, rainforest and days that can move between swimming, exploring and doing very little.",
feel:
"Bare feet + fewer plans",
place:
"Ilhabela",
linkText:
"Explore Ilhabela",
link:
"/brazil/sao-paulo/ilhabela/",
scene:
"coast",
active:
true
},
city: {
kicker:
"SÃO PAULO CITY",
title:
"Build the weekend around what happens next.",
text:
"Restaurants, neighborhoods, galleries and nights that work best when the two of you leave some room for another stop.",
feel:
"Energy + spontaneity",
place:
"São Paulo City",
linkText:
"Destination development planned",
link:
"#",
scene:
"city",
active:
false
},
mountain: {
kicker:
"THE MANTIQUEIRA",
title:
"Go somewhere everyday life feels further away.",
text:
"Cooler air, mountain stays, long meals and mornings where nobody needs to be anywhere particularly quickly.",
feel:
"Quiet + slower mornings",
place:
"Mantiqueira",
linkText:
"Future Mango Getaway region",
link:
"#",
scene:
"mountain",
active:
false
},
road: {
kicker:
"THE INTERIOR",
title:
"Make getting there part of the memory.",
text:
"Small towns, countryside roads and unexpected stops suit couples who would rather discover the trip than schedule every part of it.",
feel:
"Freedom + discovery",
place:
"São Paulo Interior",
linkText:
"Future Mango Getaway routes",
link:
"#",
scene:
"road",
active:
false
}
};
/* ======================================================
ELEMENTS
======================================================= */
const tabs =
page.querySelectorAll("[data-mgsp]");
const media =
page.querySelector("#mgspResultMedia");
const kicker =
page.querySelector("#mgspResultKicker");
const title =
page.querySelector("#mgspResultTitle");
const text =
page.querySelector("#mgspResultText");
const feel =
page.querySelector("#mgspResultFeel");
const place =
page.querySelector("#mgspResultPlace");
const link =
page.querySelector("#mgspResultLink");
/* ======================================================
SET MOOD
======================================================= */
function setMood(key, shouldScroll = false) {
const data = moods[key];
if (!data) return;
/* Active tab */
tabs.forEach(function (tab) {
const selected =
tab.dataset.mgsp === key;
tab.classList.toggle(
"is-active",
selected
);
tab.setAttribute(
"aria-selected",
selected ? "true" : "false"
);
});
/* Animate image */
media.classList.add(
"is-changing"
);
window.setTimeout(function () {
media.setAttribute(
"data-scene",
data.scene
);
kicker.textContent =
data.kicker;
title.textContent =
data.title;
text.textContent =
data.text;
feel.textContent =
data.feel;
place.textContent =
data.place;
/* Link */
link.innerHTML =
data.linkText +
'
→';
link.setAttribute(
"href",
data.link
);
if (data.active) {
link.classList.remove(
"is-disabled"
);
link.removeAttribute(
"aria-disabled"
);
} else {
link.classList.add(
"is-disabled"
);
link.setAttribute(
"aria-disabled",
"true"
);
}
media.classList.remove(
"is-changing"
);
}, 130);
/* Scroll from quick-decision rows */
if (shouldScroll) {
const choose =
page.querySelector("#mgsp-choose");
if (choose) {
choose.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
}
}
/* ======================================================
TAB EVENTS
======================================================= */
tabs.forEach(function (tab) {
tab.addEventListener(
"click",
function () {
setMood(
tab.dataset.mgsp
);
}
);
});
/* ======================================================
QUICK DECISION
======================================================= */
const matchRows =
page.querySelectorAll(
"[data-target-mood]"
);
matchRows.forEach(function (row) {
row.addEventListener(
"click",
function () {
const target =
row.dataset.targetMood;
setMood(
target,
true
);
}
);
});
/* ======================================================
BLOCK PLACEHOLDER LINKS
======================================================= */
link.addEventListener(
"click",
function (event) {
if (
link.classList.contains(
"is-disabled"
)
) {
event.preventDefault();
}
}
);
/* ======================================================
SMOOTH INTERNAL LINKS
======================================================= */
const internalLinks =
page.querySelectorAll(
'a[href^="#"]:not([href="#"])'
);
internalLinks.forEach(function (anchor) {
anchor.addEventListener(
"click",
function (event) {
const selector =
anchor.getAttribute("href");
const target =
document.querySelector(
selector
);
if (!target) return;
event.preventDefault();
target.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
);
});
/* ======================================================
INITIAL STATE
======================================================= */
setMood("coast");
});
←
Brazil
SÃO PAULO · BRAZIL
São Paulo
changes with you.
City nights, Atlantic islands, mountain mornings
or a road with somewhere new at the other end.
Choose your kind of trip
ONE STATE · FOUR DIRECTIONS
What do the two of you need from this trip?
São Paulo does not need to be one enormous itinerary.
Pick the energy first.
Then go where that version of the state makes sense.
CHOOSE TOGETHER
How should São Paulo feel?
THE NORTH COAST
Put the Atlantic in the middle of the trip.
Beach roads, rainforest and days that can move
between swimming, exploring and doing very little.
THIS FEELS LIKE
Bare feet + fewer plans
START HERE
Ilhabela
Explore Ilhabela
→
A STATE WITH RANGE
Same trip length. Completely different memories.
SÃO PAULO CITY
Stay out a little later.
Neighborhoods, restaurants, galleries and
a weekend that can change after dinner.
City destination development planned
NORTH COAST
Take the road towards the water.
Atlantic beaches, forested mountains and
island days without much reason to rush.
Explore Ilhabela
→
MANTIQUEIRA
Give the trip some quiet.
Cooler mornings, mountain stays and enough
space for doing considerably less.
Future Mango Getaway region
THE INTERIOR
Let the drive become part of it.
Smaller towns, food, farms and the freedom
to stop somewhere neither of you planned.
Future Mango Getaway routes
QUICK DECISION
Which sentence sounds most like you right now?
THE NORTH COAST
Start with Ilhabela.
Island roads, Atlantic mornings, waterfalls
and enough freedom for the plan to change halfway through.
Water
Nature
Road Trips
Slow Days
Explore Ilhabela Together
SÃO PAULO · FOR TWO
You don’t need to experience all of São Paulo.
Just find the version that feels right for this trip.
Choose again
↑
