Brazil
Start here
Brazil
One country. Two very different ways to begin.
São Paulo when you want energy. Ilhabela when you want to slow down.
Explore Brazil TogetherSouth America
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap");
.mg-sa {
/* ==========================================================
IMAGE REGISTRY
========================================================== */
--img-sa-hero:
url("YOUR-SOUTH-AMERICA-HERO-IMAGE-URL");
--img-sa-brazil:
url("YOUR-BRAZIL-IMAGE-URL");
--img-sa-sp:
url("YOUR-SAO-PAULO-IMAGE-URL");
--img-sa-ilhabela:
url("YOUR-ILHABELA-IMAGE-URL");
/* ==========================================================
BRAND
========================================================== */
--mg-black: #14110e;
--mg-charcoal: #191511;
--mg-brown: #211c17;
--mg-panel: #2b241d;
--mg-mango: #f4a641;
--mg-mango-dark: #d87916;
--mg-cream: #fff5e6;
--mg-cream-soft: #e6d8c3;
--mg-muted: #b6a68e;
--mg-border: rgba(255, 245, 230, 0.12);
--mg-border-active: rgba(244, 166, 65, 0.55);
--mg-display: "Cormorant Garamond", Georgia, serif;
--mg-body: "DM Sans", Arial, sans-serif;
--mg-mono: "DM Mono", monospace;
width: 100%;
overflow: hidden;
background: var(--mg-black);
color: var(--mg-cream);
font-family: var(--mg-body);
}
.mg-sa *,
.mg-sa *::before,
.mg-sa *::after {
box-sizing: border-box;
}
.mg-sa button,
.mg-sa a {
font: inherit;
}
.mg-sa-shell {
width: min(1180px, calc(100% - 48px));
margin-inline: auto;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.mg-sa h1,
.mg-sa h2,
.mg-sa h3,
.mg-sa p {
margin-top: 0;
}
.mg-sa h1,
.mg-sa h2,
.mg-sa h3 {
color: var(--mg-cream);
font-family: var(--mg-display);
font-weight: 500;
}
.mg-sa h1 {
max-width: 880px;
margin-bottom: 28px;
font-size: clamp(64px, 9vw, 124px);
letter-spacing: -0.045em;
line-height: 0.88;
}
.mg-sa h1 span {
display: block;
color: var(--mg-mango);
font-style: italic;
}
.mg-sa h2 {
margin-bottom: 20px;
font-size: clamp(46px, 5.8vw, 78px);
letter-spacing: -0.035em;
line-height: 0.95;
}
.mg-sa h3 {
margin-bottom: 15px;
font-size: clamp(42px, 4vw, 56px);
line-height: 1;
}
.mg-sa p {
color: var(--mg-cream-soft);
font-size: 17px;
line-height: 1.7;
}
.mg-sa-kicker,
.mg-sa-eyebrow {
margin-bottom: 16px !important;
color: var(--mg-mango) !important;
font-family: var(--mg-mono);
font-size: 10px !important;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1.4 !important;
text-transform: uppercase;
}
/* ============================================================
BUTTONS
============================================================ */
.mg-sa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 26px;
border: 1px solid transparent;
border-radius: 999px;
text-decoration: none !important;
transition:
background 200ms ease,
transform 200ms ease;
}
.mg-sa-btn--primary {
background: var(--mg-mango);
color: #21160a !important;
font-weight: 600;
}
.mg-sa-btn--primary:hover {
background: #ffc064;
transform: translateY(-2px);
}
/* ============================================================
B01 — HERO
============================================================ */
.mg-sa-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(900px, 92vh);
isolation: isolate;
background:
var(--img-sa-hero),
linear-gradient(135deg, #342614, #14110e);
background-position: center;
background-size: cover;
}
.mg-sa-hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
90deg,
rgba(15, 11, 8, 0.9) 0%,
rgba(15, 11, 8, 0.6) 48%,
rgba(15, 11, 8, 0.2) 100%
),
linear-gradient(
0deg,
rgba(20, 17, 14, 0.96) 0%,
rgba(20, 17, 14, 0) 50%
);
}
.mg-sa-hero__inner {
padding-top: 150px;
padding-bottom: 92px;
}
.mg-sa-hero__copy {
max-width: 650px;
margin-bottom: 34px;
font-size: clamp(17px, 1.7vw, 20px) !important;
}
/* ============================================================
SECTIONS
============================================================ */
.mg-sa-section {
padding: 105px 0;
}
.mg-sa-heading {
max-width: 760px;
margin-bottom: 50px;
}
.mg-sa-heading--center {
margin-right: auto;
margin-left: auto;
text-align: center;
}
.mg-sa-heading--center > p:last-child {
margin-bottom: 0;
}
/* ============================================================
B02 — MOODS
============================================================ */
.mg-sa-section--moods {
background: var(--mg-charcoal);
}
.mg-sa-moods {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--mg-border);
border-left: 1px solid var(--mg-border);
}
.mg-sa-mood {
position: relative;
min-height: 245px;
padding: 28px 24px;
border: 0;
border-right: 1px solid var(--mg-border);
border-bottom: 1px solid var(--mg-border);
background: transparent;
color: var(--mg-cream);
text-align: left;
cursor: pointer;
transition:
background 200ms ease,
border-color 200ms ease;
}
.mg-sa-mood:hover,
.mg-sa-mood.is-active {
background: rgba(244, 166, 65, 0.07);
}
.mg-sa-mood.is-active::after {
content: "";
position: absolute;
right: 20px;
bottom: 0;
left: 20px;
height: 2px;
background: var(--mg-mango);
}
.mg-sa-mood__number {
display: block;
margin-bottom: 66px;
color: var(--mg-mango);
font-family: var(--mg-mono);
font-size: 10px;
}
.mg-sa-mood strong {
display: block;
margin-bottom: 10px;
font-family: var(--mg-display);
font-size: 28px;
font-weight: 500;
line-height: 1;
}
.mg-sa-mood small {
display: block;
max-width: 200px;
color: var(--mg-muted);
font-size: 13px;
line-height: 1.55;
}
.mg-sa-mood-result {
min-height: 50px;
padding-top: 32px;
text-align: center;
}
.mg-sa-mood-result p {
margin-bottom: 0;
color: var(--mg-mango);
font-family: var(--mg-display);
font-size: 25px;
font-style: italic;
}
/* ============================================================
B03 — BRAZIL
============================================================ */
.mg-sa-section--brazil {
background: var(--mg-black);
}
.mg-sa-brazil-card {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
min-height: 650px;
overflow: hidden;
border: 1px solid var(--mg-border);
border-radius: 24px;
background: var(--mg-brown);
}
.mg-sa-brazil-card__image {
position: relative;
min-height: 580px;
background:
linear-gradient(
0deg,
rgba(20,17,14,0.55),
rgba(20,17,14,0.04)
),
var(--img-sa-brazil),
linear-gradient(135deg, #72581d, #1b371e);
background-position: center;
background-size: cover;
}
.mg-sa-brazil-card__image span {
position: absolute;
bottom: 28px;
left: 30px;
color: var(--mg-cream);
font-family: var(--mg-display);
font-size: clamp(56px, 7vw, 90px);
font-weight: 500;
}
.mg-sa-brazil-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(40px, 6vw, 72px);
}
.mg-sa-brazil-card__content h2 {
margin-bottom: 12px;
}
.mg-sa-brazil-card__lead {
margin-bottom: 20px !important;
color: var(--mg-cream) !important;
font-family: var(--mg-display);
font-size: 27px !important;
line-height: 1.25 !important;
}
.mg-sa-brazil-card__content .mg-sa-btn {
margin-top: 15px;
}
/* ============================================================
B04 — DESTINATIONS
============================================================ */
.mg-sa-section--choice {
background: #181411;
}
.mg-sa-destination-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.mg-sa-destination {
overflow: hidden;
border: 1px solid var(--mg-border);
border-radius: 22px;
background: var(--mg-brown);
transition:
border-color 220ms ease,
transform 220ms ease;
}
.mg-sa-destination:hover,
.mg-sa-destination.is-selected {
border-color: var(--mg-border-active);
transform: translateY(-4px);
}
.mg-sa-destination__image {
display: flex;
align-items: flex-end;
min-height: 430px;
padding: 24px;
background-position: center;
background-size: cover;
}
.mg-sa-destination__image--sp {
background:
linear-gradient(
0deg,
rgba(20,17,14,0.7),
rgba(20,17,14,0.05)
),
var(--img-sa-sp),
linear-gradient(135deg, #3a3029, #14110e);
background-position: center;
background-size: cover;
}
.mg-sa-destination__image--ilhabela {
background:
linear-gradient(
0deg,
rgba(20,17,14,0.7),
rgba(20,17,14,0.03)
),
var(--img-sa-ilhabela),
linear-gradient(135deg, #174541, #162b19);
background-position: center;
background-size: cover;
}
.mg-sa-destination__image span {
padding: 9px 13px;
border-radius: 999px;
background: rgba(20,17,14,0.76);
color: var(--mg-cream);
font-family: var(--mg-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mg-sa-destination__content {
padding: 34px 32px 38px;
}
.mg-sa-question {
margin-bottom: 16px !important;
color: var(--mg-mango) !important;
font-family: var(--mg-display);
font-size: 23px !important;
font-style: italic;
line-height: 1.25 !important;
}
.mg-sa-select {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin-top: 14px;
padding: 0 18px;
border: 1px solid var(--mg-border);
border-radius: 999px;
background: transparent;
color: var(--mg-cream);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
border-color 200ms ease,
background 200ms ease,
color 200ms ease;
}
.mg-sa-select:hover,
.mg-sa-destination.is-selected .mg-sa-select {
border-color: var(--mg-mango);
background: var(--mg-mango);
color: #21160a;
}
.mg-sa-link {
display: flex;
align-items: center;
gap: 9px;
width: fit-content;
margin-top: 24px;
color: var(--mg-cream) !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
}
.mg-sa-link span {
color: var(--mg-mango);
transition: transform 180ms ease;
}
.mg-sa-link:hover span {
transform: translateX(4px);
}
.mg-sa-selection-result {
min-height: 48px;
padding-top: 35px;
text-align: center;
}
.mg-sa-selection-result p {
margin-bottom: 0;
color: var(--mg-mango);
font-family: var(--mg-display);
font-size: 25px;
font-style: italic;
}
/* ============================================================
B05 — FINAL
============================================================ */
.mg-sa-final {
position: relative;
display: flex;
align-items: center;
min-height: 580px;
isolation: isolate;
background:
var(--img-sa-brazil),
linear-gradient(135deg, #392613, #14110e);
background-position: center;
background-size: cover;
}
.mg-sa-final__overlay {
position: absolute;
inset: 0;
z-index: -1;
background: rgba(20,17,14,0.76);
}
.mg-sa-final__inner {
max-width: 760px;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
}
.mg-sa-final__inner p:not(.mg-sa-kicker) {
max-width: 560px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
/* ============================================================
FOCUS
============================================================ */
.mg-sa button:focus-visible,
.mg-sa a:focus-visible {
outline: 2px solid var(--mg-mango);
outline-offset: 4px;
}
/* ============================================================
TABLET
============================================================ */
@media (max-width: 960px) {
.mg-sa-shell {
width: min(100% - 36px, 1180px);
}
.mg-sa-moods {
grid-template-columns: repeat(2, 1fr);
}
.mg-sa-brazil-card {
grid-template-columns: 1fr;
}
.mg-sa-brazil-card__image {
min-height: 500px;
}
.mg-sa-destination-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 640px) {
.mg-sa-shell {
width: min(100% - 28px, 1180px);
}
.mg-sa-section {
padding: 72px 0;
}
.mg-sa h1 {
font-size: clamp(56px, 17vw, 78px);
}
.mg-sa h2 {
font-size: clamp(42px, 12vw, 58px);
}
.mg-sa p {
font-size: 15.5px;
}
.mg-sa-hero {
min-height: 780px;
background-position: 58% center;
}
.mg-sa-hero__overlay {
background:
linear-gradient(
0deg,
rgba(15,11,8,0.96) 0%,
rgba(15,11,8,0.58) 62%,
rgba(15,11,8,0.25) 100%
);
}
.mg-sa-hero__inner {
padding-top: 130px;
padding-bottom: 55px;
}
.mg-sa-hero__copy {
font-size: 16px !important;
}
.mg-sa-btn {
width: 100%;
}
.mg-sa-moods {
grid-template-columns: 1fr;
border-left: 0;
}
.mg-sa-mood {
min-height: auto;
padding: 25px 4px 30px;
border-right: 0;
}
.mg-sa-mood__number {
margin-bottom: 20px;
}
.mg-sa-mood.is-active::after {
right: 0;
left: 0;
}
.mg-sa-mood-result p,
.mg-sa-selection-result p {
font-size: 22px;
}
.mg-sa-brazil-card {
border-radius: 18px;
}
.mg-sa-brazil-card__image {
min-height: 380px;
}
.mg-sa-brazil-card__image span {
bottom: 22px;
left: 22px;
font-size: 60px;
}
.mg-sa-brazil-card__content {
padding: 36px 24px 42px;
}
.mg-sa-destination {
border-radius: 18px;
}
.mg-sa-destination__image {
min-height: 350px;
}
.mg-sa-destination__content {
padding: 29px 23px 34px;
}
.mg-sa-select {
width: 100%;
}
.mg-sa-final {
min-height: 560px;
}
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.mg-sa *,
.mg-sa *::before,
.mg-sa *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
(() => {
"use strict";
const root = document.querySelector(".mg-sa");
if (!root) {
return;
}
/* ==========================================================
TRAVEL FEELING
========================================================== */
const moodMessages = {
slow:
"Sounds like you should leave some space in the itinerary.",
city:
"Sounds like you want somewhere that gives you another reason to stay out.",
road:
"Sounds like the drive should be part of the trip.",
wild:
"Sounds like you need at least one story you'll still talk about afterwards."
};
const moodButtons = root.querySelectorAll(".mg-sa-mood");
const moodResult = root.querySelector("#mg-sa-mood-result");
moodButtons.forEach((button) => {
button.addEventListener("click", () => {
const mood = button.dataset.mood;
moodButtons.forEach((item) => {
item.classList.remove("is-active");
item.setAttribute("aria-pressed", "false");
});
button.classList.add("is-active");
button.setAttribute("aria-pressed", "true");
if (moodResult && moodMessages[mood]) {
moodResult.textContent = moodMessages[mood];
}
});
});
/* ==========================================================
DESTINATION CHOICE
========================================================== */
const destinationCards = root.querySelectorAll(".mg-sa-destination");
const destinationButtons = root.querySelectorAll(".mg-sa-select");
const destinationResult = root.querySelector("#mg-sa-selection-text");
const destinationMessages = {
"sao-paulo":
"São Paulo looks like your kind of start.",
ilhabela:
"Ilhabela looks like your kind of start."
};
destinationButtons.forEach((button) => {
button.addEventListener("click", () => {
const destination = button.dataset.destination;
const card = button.closest(".mg-sa-destination");
destinationCards.forEach((item) => {
item.classList.remove("is-selected");
});
if (card) {
card.classList.add("is-selected");
}
if (
destinationResult &&
destinationMessages[destination]
) {
destinationResult.textContent =
destinationMessages[destination];
}
});
});
/* ==========================================================
SMOOTH INTERNAL SCROLL
========================================================== */
const internalLinks = root.querySelectorAll('a[href^="#"]');
internalLinks.forEach((link) => {
link.addEventListener("click", (event) => {
const id = link.getAttribute("href");
if (!id || id === "#") {
return;
}
const target = document.querySelector(id);
if (!target) {
return;
}
event.preventDefault();
const reducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
target.scrollIntoView({
behavior: reducedMotion ? "auto" : "smooth",
block: "start"
});
});
});
})();
South America · Travel Designed for Two
South America, for two.
City nights, island roads, long lunches or somewhere completely new. What kind of trip feels like the two of you?
Choose the FeelingChoose together
How should this trip feel?
Pick the one you’d both say yes to.
Sounds like you should leave some space in the itinerary.
Which one feels more like you?
City energy or island time?
City Energy
“Where should we go after this?”
São Paulo
For food, neighborhoods, culture and the kind of night that keeps extending itself.
Explore São Paulo
Slow & Sunlit
“Do we really need a plan today?”
Ilhabela
For water, road trips, quieter mornings and days that don’t need much structure.
Explore IlhabelaWhich would you choose together?
Create More Shared Memories
Where do you want to start?
Choose the place you’d both be excited to wake up in.
Start With Brazil