/* ==========================================================================
MASTER TRAVEL — design system (navbar + footer)
--------------------------------------------------------------------------
Values transcribed VERBATIM from the approved design (master/home.html).
Only two things were changed on purpose:
1) Tokens are namespaced --mt-* so they cannot clash with the tokens still
used by the legacy theme CSS while the site is converted page by page.
2) The generic design selectors (header, footer, nav, .container, .btn)
are scoped under .mt-header / .mt-footer. Bootstrap and the legacy
style.home.purged.min.css are still loaded globally and define those
same names, so an unscoped copy would be overridden. The INNER class
names (.desktop-nav, .dropdown, .footer-grid, .newsletter-box, ...)
are untouched, so the rendered result is identical to the design.
The standalone mobile pieces (.mobile-tab-bar, .mobile-menu-overlay,
.mobile-menu-trigger, .menu-close, .mobile-nav-links) keep their exact
design names — those class names appear nowhere in the legacy CSS.
========================================================================== */
:root {
/* Official brand palette */
--mt-primary: #41abdd; /* bright cyan highlight */
--mt-primary-hover: #298bb9;
--mt-secondary: #0c5987; /* deep cerulean */
--mt-accent-orange: #f39c12;
--mt-gradient-accent: linear-gradient(135deg, #41abdd 0%, #0c5987 100%);
--mt-bg-body: #ffffff;
--mt-bg-mute: #f7f8fa;
--mt-text-dark: #111827;
--mt-text-mute: #4b5563;
--mt-text-light: #9ca3af;
--mt-border-soft: rgba(0, 0, 0, 0.06);
--mt-shadow-elegant: 0 10px 30px rgba(0, 0, 0, 0.03);
--mt-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
--mt-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.06);
--mt-transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}
/* ==========================================================================
1. HEADER (floating / transparent, sits over the page cover)
========================================================================== */
.mt-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 35px 0;
z-index: 1000;
background: transparent;
font-family: 'Poppins', sans-serif;
/* The design's is 16px / 1.7. The legacy critical CSS in the layout
sets html,body { font-size:18px; line-height:30px }, which would otherwise
be inherited here — so both are restated to the design's values. */
font-size: 16px;
line-height: 1.7;
}
/* Design reset (`* { margin:0; padding:0; box-sizing:border-box }`), scoped.
Every rule below that needs padding is a class selector, so it still wins. */
.mt-header *,
.mt-header *::before,
.mt-header *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ---------------------------------------------------------------------------
INHERITANCE GUARD — restores the design's cascade.
In the design, font-family and line-height are set once on and every
heading, link and button simply inherits them. Here they do not, because the
legacy stylesheets set those same properties on BARE ELEMENT selectors that
the design never touches, and inheritance always loses to a matching rule:
h4 { line-height: 130% } style.home.purged.min.css
h1..h6 { line-height: 1.2 } bootstrap.home.purged.min.css
h1..h5 { font-family: "Plus Jakarta Sans"; ... } inner-critical.min.css
.btn { line-height: 1.5 } bootstrap
So the footer's EXPLORE/HERITAGE headings and "Join The Elite" were rendering
at 1.2-1.3 line-height instead of 1.7 (and in the wrong face on inner pages),
which shifted every row beneath them. Forcing `inherit` re-establishes the
design's chain and neutralises any similar leak we have not found.
Form controls are excluded on purpose — see the newsletter input/button rule,
where the design keeps the browser's own metrics.
--------------------------------------------------------------------------- */
.mt-header *:not(input):not(button):not(select):not(textarea),
.mt-footer *:not(input):not(button):not(select):not(textarea),
.mobile-menu-overlay *,
.mobile-tab-bar * {
font-family: inherit;
line-height: inherit;
}
.mt-header .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mt-header a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
/* Design markup keeps a flex wrapper inside .container */
.mt-header .header-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* NOT part of the design — an escape hatch only. The design header is always
the transparent one above, floating over a dark cover. A page that has no
cover at all can fall back to a solid bar with
$this->set('headerSolid', true) so its nav stays legible. */
.mt-header.is-solid {
position: relative;
background: var(--mt-secondary);
padding: 22px 0;
}
/* --- logo --- */
.mt-header .logo img {
max-height: 58px;
/* The design's ![]()
carries no width/height attributes, so max-height
alone scales it. Ours does carry them (for CLS), and those attributes map
to CSS width/height — so without these two the logo is drawn at the
attribute ratio instead of its own and comes out squashed. */
width: auto;
height: auto;
/* the CMS logo is a dark PNG; the design shows it knocked out to white
over the cover image */
filter: brightness(0) invert(1);
transition: transform 0.3s ease;
}
.mt-header .logo:hover img {
transform: scale(1.05);
}
/* --- desktop nav --- */
.mt-header nav.desktop-nav {
display: flex;
gap: 45px;
align-items: center;
}
.mt-header nav a {
font-size: 12.8px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
font-weight: 500;
opacity: 0.9;
position: relative;
white-space: nowrap;
}
.mt-header nav a::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: var(--mt-primary);
transition: var(--mt-transition);
}
.mt-header nav a:hover {
opacity: 1;
}
/* Current page marker. The design has no active state; this reuses its own
hover underline so the current section is identifiable, nothing new added. */
.mt-header nav a:hover::after,
.mt-header nav a.is-current::after,
.mt-header nav .dropdown.is-current > a::after {
width: 80%;
}
.mt-header nav a.is-current,
.mt-header nav .dropdown.is-current > a {
opacity: 1;
}
/* --- dropdown --- */
.mt-header .dropdown {
position: relative;
display: inline-block;
}
/* invisible bridge so the pointer can travel into the panel */
.mt-header .dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 25px;
z-index: 999;
}
.mt-header .dropbtn {
display: flex !important;
align-items: center;
}
.mt-header .dropdown-content {
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%) translateY(15px);
background: rgba(12, 89, 135, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
min-width: 180px;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transition: var(--mt-transition);
display: flex;
flex-direction: column;
pointer-events: none;
z-index: 1000;
}
.mt-header .dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.mt-header .dropdown-content a {
padding: 14px 24px;
font-size: 12px;
margin: 0;
text-align: center;
}
.mt-header .dropdown-content a::after {
display: none !important;
}
.mt-header .dropdown-content a:hover {
background: rgba(65, 171, 221, 0.15);
color: var(--mt-primary) !important;
}
/* --- CTA button (scoped hard: bootstrap also owns .btn / .btn-primary) --- */
.mt-header .btn,
.mt-footer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 46px;
font-size: 12.8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 4px;
border: none;
transition: var(--mt-transition);
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
}
.mt-header .btn::after,
.mt-footer .btn::after {
content: '\2192';
font-size: 1.2em;
font-weight: 400;
transition: transform 0.4s ease;
position: static;
background: none;
width: auto;
height: auto;
transform: none;
}
.mt-header .btn:hover::after,
.mt-footer .btn:hover::after {
transform: translateX(6px);
width: auto;
}
.mt-header .btn-primary,
.mt-footer .btn-primary {
background-color: var(--mt-primary);
color: #fff;
box-shadow: 0 10px 20px rgba(65, 171, 221, 0.15);
}
.mt-header .btn-primary:hover,
.mt-footer .btn-primary:hover {
background-color: var(--mt-primary-hover);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 15px 25px rgba(65, 171, 221, 0.25);
}
.mt-header .btn-outline {
background-color: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mt-header .btn-outline:hover {
background-color: #fff;
color: var(--mt-text-dark);
transform: translateY(-2px);
}
/* the CTA is a nav element too — it must hide with the desktop nav */
.mt-header a.desktop-nav {
padding: 12px 28px;
font-size: 12px;
}
/* --- burger --- */
.mt-header .mobile-menu-trigger {
display: none;
color: #fff;
cursor: pointer;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: background 0.2s ease, transform 0.15s ease;
}
.mt-header .mobile-menu-trigger:active {
transform: scale(0.96);
background: rgba(255, 255, 255, 0.15);
}
/* ==========================================================================
2. FULL-SCREEN MOBILE MENU OVERLAY
========================================================================== */
.mobile-menu-overlay {
position: fixed;
inset: 0;
background: rgba(10, 52, 82, 0.97);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
z-index: 3000;
display: flex;
flex-direction: column;
padding: calc(88px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
transform: translateY(-100%);
transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
}
.mobile-menu-overlay.active {
transform: translateY(0);
}
.mobile-menu-overlay a {
text-decoration: none;
}
.menu-close {
position: fixed;
top: calc(14px + env(safe-area-inset-top, 0px));
right: max(16px, env(safe-area-inset-right, 0px));
color: #fff;
cursor: pointer;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
z-index: 3001;
transition: background 0.2s ease, transform 0.15s ease;
}
.menu-close:active {
transform: scale(0.94);
background: rgba(255, 255, 255, 0.18);
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 22px;
}
.mobile-nav-links a {
color: #fff;
font-size: 26.4px;
font-weight: 600;
letter-spacing: -0.02em;
}
.mobile-nav-links a span {
display: block;
font-size: 12.8px;
color: var(--mt-primary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 5px;
}
.mobile-nav-group {
display: flex;
flex-direction: column;
gap: 14px;
}
.mobile-nav-sub {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 12px;
margin-top: -6px;
margin-left: 6px;
border-left: 2px solid rgba(65, 171, 221, 0.4);
}
.mobile-nav-sub a {
font-size: 16.8px !important;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mobile-nav-sub a::after {
display: none;
}
/* ==========================================================================
3. MOBILE BOTTOM TAB BAR
========================================================================== */
.mobile-tab-bar {
position: fixed;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
height: 64px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 22px;
display: none;
justify-content: center;
gap: 8px;
align-items: center;
z-index: 2000;
box-shadow:
0 4px 24px rgba(12, 89, 135, 0.12),
0 12px 40px rgba(0, 0, 0, 0.1);
padding: 0 12px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
}
.mobile-tab-bar .tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
flex: 1;
max-width: 160px;
min-height: 48px;
color: var(--mt-secondary);
font-size: 9.92px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.55;
transition: color 0.25s ease, opacity 0.25s ease, background 0.25s ease, transform 0.15s ease;
border-radius: 16px;
padding: 6px 10px;
text-decoration: none;
text-align: center;
}
.mobile-tab-bar .tab-item.active {
opacity: 1;
color: var(--mt-secondary);
background: rgba(65, 171, 221, 0.14);
}
.mobile-tab-bar .tab-item.active svg {
color: var(--mt-primary);
}
.mobile-tab-bar .tab-item svg {
width: 24px;
height: 24px;
}
/* ==========================================================================
4. FOOTER
========================================================================== */
.mt-footer {
background: #ffffff;
color: var(--mt-text-mute);
padding: 120px 0 50px;
font-size: 15.2px;
position: relative;
border-top: 1px solid #edf2f7;
font-family: 'Poppins', sans-serif;
line-height: 1.7;
}
.mt-footer *,
.mt-footer *::before,
.mt-footer *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mt-footer .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
}
.mt-footer a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
.mt-footer .footer-grid {
display: grid;
grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr) 2fr;
gap: 80px;
margin-bottom: 100px;
}
/* NOTE: deliberately no `min-width: 0` here. The design has no .footer-col rule
at all, so the columns keep grid's default `min-width: auto` — which lets the
newsletter column push past its 2fr share (its box padding + the input/button
row are wider than 2fr) and squeeze the brand column. That is what makes the
brand paragraph wrap where the design wraps it. Adding min-width:0 clamps the
newsletter column and widens the brand column, changing every wrap point. */
.mt-footer .footer-logo img {
max-height: 75px;
/* see the header logo: our ![]()
has width/height attributes, so both must
be reset to auto or the attribute ratio wins and the logo is squashed */
width: auto;
height: auto;
margin-bottom: 30px;
}
.mt-footer .footer-col p {
line-height: 1.8;
max-width: 350px;
font-weight: 300;
margin-bottom: 35px;
color: var(--mt-text-mute);
}
.mt-footer .footer-col h4 {
font-size: 13.6px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--mt-secondary);
margin: 0 0 30px;
font-weight: 700;
}
.mt-footer .footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.mt-footer .footer-col ul li {
margin-bottom: 15px;
}
.mt-footer .footer-col ul li a {
color: var(--mt-text-mute);
font-weight: 400;
transition: var(--mt-transition);
text-decoration: none;
position: relative;
}
.mt-footer .footer-col ul li a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--mt-primary);
transition: width 0.3s ease;
}
.mt-footer .footer-col ul li a:hover {
color: var(--mt-secondary);
}
.mt-footer .footer-col ul li a:hover::after {
width: 100%;
}
/* --- socials --- */
.mt-footer .social-icons-row {
display: flex;
gap: 15px;
}
.mt-footer .social-icon {
width: 44px;
height: 44px;
background: #fff;
border: 1px solid #edf2f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--mt-secondary);
transition: var(--mt-transition);
box-shadow: var(--mt-shadow-small);
}
.mt-footer .social-icon:hover {
background: var(--mt-primary);
border-color: var(--mt-primary);
color: #fff;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(65, 171, 221, 0.3);
}
/* --- newsletter --- */
.mt-footer .newsletter-box {
background: rgba(65, 171, 221, 0.05);
border-radius: 20px;
padding: 35px;
margin-top: -10px;
border: 1px solid rgba(65, 171, 221, 0.1);
}
.mt-footer .newsletter-box h5 {
color: var(--mt-secondary);
margin: 0 0 10px;
font-size: 19.2px;
font-weight: 700;
}
.mt-footer .newsletter-box p {
font-size: 14.4px;
margin-bottom: 25px;
color: var(--mt-text-mute);
}
.mt-footer .newsletter-form {
display: flex;
gap: 10px;
}
.mt-footer .newsletter-form input {
flex: 1;
background: #fff;
border: 1px solid #edf2f7;
color: var(--mt-secondary);
padding: 14px 20px;
border-radius: 12px;
font-size: 15.2px;
outline: none;
transition: var(--mt-transition);
box-shadow: var(--mt-shadow-small);
}
.mt-footer .newsletter-form input:focus {
border-color: var(--mt-primary);
box-shadow: 0 0 0 4px rgba(65, 171, 221, 0.1);
}
.mt-footer .newsletter-form button {
background: var(--mt-secondary);
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: var(--mt-transition);
}
.mt-footer .newsletter-form button:hover {
background: var(--mt-primary);
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(65, 171, 221, 0.4);
}
/* ---------------------------------------------------------------------------
The design page ships no Bootstrap, so its newsletter input and button keep
the BROWSER's own font metrics — the design sets no font-family or
line-height on either, and no font-size on the button.
Bootstrap's reboot is loaded here and overrides all three:
button,input,select,textarea { font-family:inherit; font-size:inherit; line-height:inherit }
which pulled Poppins and line-height 1.7 into them. That is why the
placeholder rendered wider than the design's and the field sat ~8px taller.
`revert` rolls each property back to the browser stylesheet — exactly what
the design renders. font-size is reverted on the BUTTON only; the design sets
the input's font-size explicitly (0.95rem), which we already match.
--------------------------------------------------------------------------- */
.mt-footer .newsletter-form input {
font-family: revert;
line-height: revert;
}
.mt-footer .newsletter-form button {
font-family: revert;
font-size: revert;
line-height: revert;
}
/* --- bottom bar --- */
.mt-footer .footer-bottom {
border-top: 1px solid #edf2f7;
padding-top: 40px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--mt-text-light);
font-size: 14.4px;
font-weight: 400;
gap: 20px;
}
/* ==========================================================================
5. RESPONSIVE (breakpoints exactly as the design)
========================================================================== */
@media (pointer: coarse) {
.mt-header .btn,
.mt-footer .social-icon,
.mobile-tab-bar .tab-item,
.mt-header .mobile-menu-trigger,
.menu-close {
transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}
.mt-header .btn:active,
.mt-footer .social-icon:active,
.mobile-tab-bar .tab-item:active {
transform: scale(0.96) !important;
opacity: 0.85;
}
}
@media (max-width: 1200px) {
.mt-footer .footer-grid {
gap: 40px;
}
}
@media (max-width: 1024px) {
.mobile-tab-bar {
display: flex;
}
.mt-header .mobile-menu-trigger {
display: flex;
}
.mt-header .desktop-nav {
display: none !important;
}
/* clear the floating tab bar */
body {
padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.mt-header,
.mt-header.is-solid {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
padding-bottom: 10px;
background: rgba(12, 89, 135, 0.92) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.mt-header .container {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mt-header .logo img {
max-height: 44px;
}
.mt-footer .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 900px) {
.mt-footer .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mt-footer {
padding: 70px 0 40px;
}
.mt-footer .footer-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 50px;
text-align: center;
margin-bottom: 60px;
}
.mt-footer .footer-col p {
margin: 0 auto 30px;
max-width: 300px;
text-align: center;
}
.mt-footer .footer-col h4 {
margin-bottom: 20px;
}
.mt-footer .footer-col ul li {
text-align: center;
}
.mt-footer .footer-col ul li a::after {
left: 50%;
transform: translateX(-50%);
}
.mt-footer .footer-logo img {
max-height: 60px;
}
.mt-footer .social-icons-row {
justify-content: center;
}
.mt-footer .newsletter-box {
padding: 28px 20px;
}
.mt-footer .newsletter-form {
flex-direction: column;
gap: 12px;
}
.mt-footer .newsletter-form input {
width: 100%;
}
.mt-footer .newsletter-form button {
width: 100%;
padding: 14px;
}
.mt-footer .footer-bottom {
flex-direction: column;
gap: 15px;
text-align: center;
padding-top: 28px;
}
}
@media (max-width: 600px) {
.mt-footer .footer-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
6. HOME HERO (cinematic video cover + search pill)
--------------------------------------------------------------------------
Transcribed from the design's .hero / .search-pill block. Scoped under
.mt-hero for the same reason as the header and footer: the design styles a
bare `section { padding: 140px 0 }` and generic names (.hero, .search-group)
that the legacy theme also owns. Inner class names are the design's.
The header sits transparently ON TOP of this section, as designed.
========================================================================== */
.mt-hero {
position: relative;
height: 100vh;
min-height: 750px;
/* the design's bare `section { padding: 140px 0 }` applies to .hero too */
padding: 140px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--mt-text-dark);
}
.mt-hero *,
.mt-hero *::before,
.mt-hero *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-hero *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-hero .hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.mt-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* dark gradient for text legibility without washing out the video */
background: linear-gradient(180deg, rgba(14, 16, 23, 0.4) 0%, rgba(14, 16, 23, 0.1) 40%, rgba(14, 16, 23, 0.85) 100%);
z-index: 1;
}
.mt-hero .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.mt-hero .hero-content {
max-width: 900px;
margin-bottom: 70px;
padding-top: 40px;
}
.mt-hero .overline {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--mt-primary);
font-weight: 600;
margin-bottom: 16px;
}
.mt-hero h1 {
font-size: 57.6px;
line-height: 1.2;
color: #fff;
margin-bottom: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.mt-hero p {
font-size: 20px;
color: rgba(255, 255, 255, 0.85);
font-weight: 300;
max-width: 650px;
margin: 0 auto;
}
/* --- search pill --- */
.mt-hero .search-pill {
background: rgba(26, 32, 44, 0.65);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
padding: 10px;
display: flex;
align-items: center;
max-width: 1000px;
width: 100%;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
position: relative;
z-index: 10;
}
.mt-hero .search-group {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px 32px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
text-align: left;
}
.mt-hero .search-group:last-of-type {
border-right: none;
}
.mt-hero .search-group label {
font-size: 10.4px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 6px;
font-weight: 500;
}
.mt-hero .search-group select {
background: transparent;
border: none;
color: #fff;
font-size: 16.8px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.mt-hero .search-group select option {
background: #ffffff;
color: var(--mt-text-dark);
font-weight: 500;
}
.mt-hero .btn-search {
background: var(--mt-primary);
color: #fff;
border: none;
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--mt-transition);
margin-left: 10px;
flex-shrink: 0;
box-shadow: 0 10px 20px rgba(65, 171, 221, 0.2);
}
.mt-hero .btn-search:hover {
background: #fff;
color: var(--mt-text-dark);
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}
/* --- hero responsive (breakpoints exactly as the design) --- */
@media (max-width: 1200px) {
.mt-hero h1 { font-size: 48px; }
}
@media (max-width: 1024px) {
.mt-hero {
padding-top: calc(100px + env(safe-area-inset-top, 0px));
}
.mt-hero .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 900px) {
.mt-hero .search-pill {
flex-direction: column;
border-radius: 12px;
}
.mt-hero .search-group {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
padding: 15px;
}
.mt-hero .btn-search {
width: 100%;
border-radius: 8px;
margin: 15px 0 0 0;
}
}
@media (max-width: 768px) {
.mt-hero {
height: auto;
padding: calc(110px + env(safe-area-inset-top, 0px)) 0 100px;
min-height: unset;
}
.mt-hero h1 {
font-size: 41.6px;
margin-bottom: 25px;
line-height: 1.1;
}
.mt-hero p {
font-size: 16px;
margin-bottom: 40px;
}
.mt-hero .search-pill {
flex-direction: column;
gap: 12px;
background: transparent;
box-shadow: none;
border: none;
padding: 0;
}
.mt-hero .search-pill .search-group {
background: rgba(255, 255, 255, 0.95);
width: 100%;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 12px 20px;
margin-bottom: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.mt-hero .search-pill .search-group label { color: var(--mt-text-mute); }
.mt-hero .search-pill .search-group select { color: var(--mt-text-dark); background: transparent; }
.mt-hero .search-pill .search-group select option { background: #fff; }
.mt-hero .search-pill .btn-search {
width: 100%;
height: 56px;
border-radius: 16px;
margin-left: 0;
margin-top: 5px;
}
}
@media (max-width: 600px) {
.mt-hero h1 { font-size: 38.4px; }
}
/* ==========================================================================
7. EXQUISITE JOURNEYS (the design's "deals" grid)
--------------------------------------------------------------------------
Cards come from the CMS: packages flagged "view in home". Scoped under
.mt-journeys for the same reason as every other section — .deals, .deal-card,
.section-header and the bare `section { padding: 140px 0 }` are all names the
legacy theme also owns. Inner class names are the design's.
========================================================================== */
.mt-journeys {
/* the design's bare `section { padding: 140px 0 }` */
padding: 140px 0;
background-color: var(--mt-bg-body);
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--mt-text-dark);
}
.mt-journeys *,
.mt-journeys *::before,
.mt-journeys *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-journeys *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-journeys a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
.mt-journeys .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
}
/* --- section header --- */
.mt-journeys .section-header {
text-align: center;
margin-bottom: 70px;
}
.mt-journeys .overline {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--mt-primary);
font-weight: 600;
margin-bottom: 16px;
}
.mt-journeys .section-header h2 {
font-size: 48px;
color: var(--mt-text-dark);
margin-bottom: 18px;
letter-spacing: -0.02em;
font-weight: 600;
}
.mt-journeys .section-header p {
color: var(--mt-text-mute);
font-size: 17.6px;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
/* --- grid --- */
.mt-journeys .deals-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
}
.mt-journeys .deal-card {
background: transparent;
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
}
.mt-journeys .deal-img {
height: 480px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: var(--mt-shadow-elegant);
transition: var(--mt-transition);
}
.mt-journeys .deal-card:hover .deal-img {
box-shadow: var(--mt-shadow-hover);
}
.mt-journeys .deal-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mt-journeys .deal-card:hover .deal-img img {
transform: scale(1.05);
}
.mt-journeys .deal-badge {
position: absolute;
top: 24px;
left: 24px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--mt-text-dark);
text-transform: uppercase;
z-index: 2;
}
/* partner lockup, bottom-right of the image (inline styles in the design) */
.mt-journeys .deal-partner {
position: absolute;
bottom: 24px;
right: 24px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 6px 12px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mt-journeys .deal-partner span {
font-size: 10.4px;
font-weight: 700;
color: #111827;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.mt-journeys .deal-partner img {
height: 14px;
width: auto;
object-fit: contain;
}
/* --- card content --- */
.mt-journeys .deal-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.mt-journeys .deal-location {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--mt-text-light);
margin-bottom: 10px;
font-weight: 500;
}
.mt-journeys .deal-content h3 {
font-size: 24px;
line-height: 1.3;
margin-bottom: 12px;
transition: color 0.3s ease;
color: var(--mt-text-dark);
font-weight: 600;
}
.mt-journeys .deal-card:hover .deal-content h3 {
color: var(--mt-primary);
}
.mt-journeys .deal-footer {
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mt-journeys .price-block {
display: flex;
flex-direction: column;
}
.mt-journeys .price-label {
font-size: 10.4px;
text-transform: uppercase;
color: var(--mt-text-light);
letter-spacing: 0.1em;
margin-bottom: 2px;
font-weight: 600;
}
.mt-journeys .price-value {
font-size: 20.8px;
font-weight: 600;
color: var(--mt-text-dark);
}
.mt-journeys .arrow-link {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--mt-border-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--mt-text-dark);
transition: var(--mt-transition);
flex-shrink: 0;
}
.mt-journeys .deal-card:hover .arrow-link {
background-color: var(--mt-primary);
border-color: var(--mt-primary);
color: #fff;
transform: rotate(-45deg);
}
/* --- footer CTA --- */
.mt-journeys .journeys-cta {
text-align: center;
margin-top: 80px;
}
.mt-journeys .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 46px;
font-size: 12.8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 4px;
border: none;
transition: var(--mt-transition);
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
}
.mt-journeys .btn::after {
content: '\2192';
font-size: 1.2em;
font-weight: 400;
transition: transform 0.4s ease;
position: static;
background: none;
width: auto;
height: auto;
transform: none;
}
.mt-journeys .btn:hover::after {
transform: translateX(6px);
width: auto;
}
/* the design sets the dark colour inline on this button */
.mt-journeys .btn-outline {
background-color: transparent;
color: var(--mt-text-dark);
border: 1px solid var(--mt-text-dark);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mt-journeys .btn-outline:hover {
background-color: #fff;
color: var(--mt-text-dark);
transform: translateY(-2px);
}
/* --- responsive (breakpoints exactly as the design) --- */
@media (max-width: 900px) {
.mt-journeys .deals-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mt-journeys {
padding: 80px 0;
}
.mt-journeys .section-header h2 {
font-size: 35.2px;
}
.mt-journeys .deals-grid {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
.mt-journeys .deal-img {
height: 300px;
}
.mt-journeys .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 600px) {
.mt-journeys .deals-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Whole card is clickable, as in the design (which used an inline onclick).
A stretched overlay on the title link keeps it a real link for keyboard and
screen-reader users instead of a JS-only click target. */
.mt-journeys .deal-content h3 a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.mt-journeys .arrow-link {
position: relative;
z-index: 2;
}
/* ==========================================================================
8. WHY CHOOSE US (split layout, deep cerulean, floating organic images)
--------------------------------------------------------------------------
Scoped under .mt-why for the same reason as every other section. The four
design images were JPEGs shipped with a .png extension at 1024x1024 (3.7MB
total); they are re-encoded as WebP at the size they actually render (324KB).
========================================================================== */
.mt-why {
background: linear-gradient(rgba(12, 89, 135, 0.94), rgba(12, 89, 135, 0.94)), url('/mastertravelegy/img/travel-pattern.webp');
background-size: 800px;
background-repeat: repeat;
background-attachment: fixed;
padding: 130px 0;
overflow: hidden;
position: relative;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
}
.mt-why *,
.mt-why *::before,
.mt-why *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-why *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-why a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
.mt-why .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
/* ambient cyan glow */
.mt-why::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(65, 171, 221, 0.12) 0%, transparent 75%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.mt-why .choose-layout {
display: flex;
align-items: center;
gap: 80px;
}
.mt-why .choose-content {
flex: 1;
max-width: 500px;
}
/* --- left: title + benefits --- */
.mt-why .section-title-left {
margin-bottom: 50px;
}
.mt-why .section-title-left .sub-title {
font-family: 'Great Vibes', 'Dancing Script', cursive;
font-size: 38.4px;
color: var(--mt-primary);
display: inline-block;
margin-bottom: 2px;
font-weight: 400;
}
.mt-why .section-title-left h2 {
font-size: 44.8px;
line-height: 1.15;
color: #ffffff;
letter-spacing: -0.02em;
position: relative;
padding-bottom: 24px;
font-weight: 600;
}
.mt-why .section-title-left h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 160px;
height: 4px;
background: var(--mt-primary);
border-radius: 4px;
}
.mt-why .benefits-list {
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 50px;
}
.mt-why .benefit-item {
display: flex;
align-items: flex-start;
gap: 24px;
}
.mt-why .benefit-icon {
width: 75px;
height: 75px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease;
position: relative;
z-index: 2;
}
.mt-why .benefit-icon:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--mt-primary);
}
.mt-why .benefit-icon svg {
width: 28px;
height: 28px;
stroke: var(--mt-primary);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
}
.mt-why .benefit-text h4 {
font-size: 18.4px;
color: #ffffff;
margin-bottom: 6px;
font-weight: 600;
}
.mt-why .benefit-text p {
font-size: 15.2px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
/* --- CTA (bootstrap owns .btn/.btn-primary, so scope hard) --- */
.mt-why .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 46px;
font-size: 12.8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 4px;
border: none;
transition: var(--mt-transition);
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
margin-top: 10px;
}
.mt-why .btn::after {
content: '\2192';
font-size: 1.2em;
font-weight: 400;
transition: transform 0.4s ease;
position: static;
background: none;
width: auto;
height: auto;
transform: none;
}
.mt-why .btn:hover::after {
transform: translateX(6px);
width: auto;
}
.mt-why .btn-primary {
background-color: var(--mt-primary);
color: #fff;
box-shadow: 0 10px 20px rgba(65, 171, 221, 0.15);
}
.mt-why .btn-primary:hover {
background-color: var(--mt-primary-hover);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 15px 25px rgba(65, 171, 221, 0.25);
}
/* --- right: floating imagery --- */
.mt-why .choose-graphics {
flex: 1;
position: relative;
height: 600px;
z-index: 5;
}
/* glassmorphic aura behind the images */
.mt-why .choose-graphics::after {
content: '';
position: absolute;
top: 15%;
right: -10%;
width: 120%;
height: 70%;
background: radial-gradient(circle at center, rgba(65, 171, 221, 0.1) 0%, transparent 70%);
filter: blur(40px);
z-index: -1;
pointer-events: none;
}
.mt-why .circle-img {
position: absolute;
background-size: cover;
background-position: center;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3), 0 0 40px rgba(65, 171, 221, 0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
animation: mt-float-shape 6s ease-in-out infinite;
filter: brightness(1.2) contrast(1.1);
z-index: 2;
}
.mt-why .img-large {
width: 320px;
height: 320px;
top: 20px;
right: 0;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation-delay: 0s;
}
.mt-why .img-medium {
width: 240px;
height: 240px;
bottom: 40px;
left: 20px;
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
animation-delay: -2s;
z-index: 3;
}
.mt-why .img-small {
width: 160px;
height: 160px;
bottom: -20px;
right: 80px;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation-delay: -4s;
z-index: 4;
}
@keyframes mt-float-shape {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(3deg); }
}
.mt-why .circle-img:hover {
transform: scale(1.08) rotate(-3deg);
border-color: var(--mt-primary);
filter: brightness(1.3) contrast(1.1);
z-index: 10;
border-radius: 50%;
}
.mt-why .flight-path {
position: absolute;
top: 150px;
left: -40px;
width: 450px;
height: 350px;
z-index: -1;
}
/* the float is purely decorative — respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.mt-why .circle-img {
animation: none;
}
}
/* --- responsive (breakpoints exactly as the design) --- */
@media (max-width: 1024px) {
.mt-why .choose-layout {
flex-direction: column;
}
.mt-why .choose-graphics {
width: 100%;
height: 500px;
margin-top: 40px;
}
.mt-why .section-title-left {
text-align: center;
}
.mt-why .section-title-left h2::after {
left: 50%;
transform: translateX(-50%);
}
.mt-why .benefit-item {
text-align: left;
}
.mt-why .img-large { right: 20px; width: 250px; height: 250px; }
.mt-why .img-medium { left: 0; width: 180px; height: 180px; }
.mt-why .img-small { right: 40px; width: 120px; height: 120px; }
.mt-why .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
/* fixed attachment is janky and expensive on touch devices */
.mt-why {
background-attachment: scroll;
}
}
@media (max-width: 768px) {
.mt-why {
padding: 80px 0;
}
.mt-why .choose-layout {
gap: 60px;
}
.mt-why .choose-graphics {
display: none;
}
.mt-why .section-title-left h2 {
font-size: 35.2px;
}
}
/* ==========================================================================
9. ICONIC DESTINATIONS
--------------------------------------------------------------------------
Cards are the CMS destinations flagged "view in home". Scoped under
.mt-destinations for the same reason as every other section.
========================================================================== */
.mt-destinations {
/* the design's bare `section { padding: 140px 0 }` */
padding: 140px 0;
background: var(--mt-bg-mute);
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--mt-text-dark);
}
.mt-destinations *,
.mt-destinations *::before,
.mt-destinations *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-destinations *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-destinations a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
.mt-destinations .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
}
/* --- section header --- */
.mt-destinations .section-header {
text-align: center;
margin-bottom: 70px;
}
.mt-destinations .overline {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--mt-primary);
font-weight: 600;
margin-bottom: 16px;
}
.mt-destinations .section-header h2 {
font-size: 48px;
color: var(--mt-text-dark);
margin-bottom: 18px;
letter-spacing: -0.02em;
font-weight: 600;
}
/* --- grid --- */
.mt-destinations .dest-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}
.mt-destinations .dest-box {
position: relative;
height: 400px;
border-radius: 8px;
overflow: hidden;
display: block;
/* shows through when a destination has no image in the CMS yet */
background: var(--mt-secondary);
}
.mt-destinations .dest-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mt-destinations .dest-box::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
transition: var(--mt-transition);
}
.mt-destinations .dest-box:hover img {
transform: scale(1.05);
}
.mt-destinations .dest-title-wrapper {
position: absolute;
bottom: 40px;
left: 40px;
z-index: 2;
transition: transform 0.4s ease;
}
.mt-destinations .dest-title {
color: #fff;
font-size: 44.8px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 5px;
}
/* the hover-only CTA must still be reachable by keyboard */
/* --- responsive (breakpoints exactly as the design) --- */
@media (max-width: 1200px) {
.mt-destinations .dest-box {
height: 340px;
}
}
@media (max-width: 900px) {
.mt-destinations .dest-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.mt-destinations {
padding: 80px 0;
}
.mt-destinations .section-header h2 {
font-size: 35.2px;
}
.mt-destinations .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 600px) {
.mt-destinations .dest-grid {
grid-template-columns: minmax(0, 1fr);
}
.mt-destinations .dest-title-wrapper {
bottom: 28px;
left: 28px;
}
.mt-destinations .dest-title {
font-size: 35.2px;
}
}
/* ==========================================================================
10. VIP AIRPORT EXPERIENCE
--------------------------------------------------------------------------
Editorial block — heading, copy and imagery are the design's, with no CMS
fields behind them. Scoped under .mt-vip like every other section.
========================================================================== */
.mt-vip {
background: linear-gradient(135deg, #051622 0%, #0c5987 100%);
padding: 160px 0;
color: #fff;
position: relative;
overflow: hidden;
z-index: 10;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
}
.mt-vip *,
.mt-vip *::before,
.mt-vip *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-vip *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-vip a {
text-decoration: none;
color: inherit;
transition: var(--mt-transition);
}
.mt-vip::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('/mastertravelegy/img/travel-pattern.webp');
background-size: 800px;
opacity: 0.04;
pointer-events: none;
}
.mt-vip .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
/* --- heading --- */
.mt-vip .vip-heading {
text-align: center;
margin-bottom: 70px;
}
.mt-vip .vip-signature {
font-family: 'Great Vibes', cursive;
font-size: 56px;
color: var(--mt-primary);
display: block;
margin-bottom: -15px;
font-weight: 400;
text-shadow: 0 0 20px rgba(65, 171, 221, 0.3);
}
.mt-vip .vip-heading h2 {
font-size: 51.2px;
color: #fff;
letter-spacing: -0.01em;
font-weight: 600;
}
/* --- split layout --- */
.mt-vip .vip-airport-layout {
display: flex;
align-items: center;
gap: 80px;
max-width: 1200px;
margin: 0 auto;
}
.mt-vip .vip-visual-side {
flex: 1;
position: relative;
}
.mt-vip .vip-visual-side img {
width: 100%;
height: auto;
border-radius: 40px;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--mt-transition);
display: block;
}
.mt-vip .vip-visual-side::after {
content: '';
position: absolute;
inset: -20px;
border: 2px solid rgba(65, 171, 221, 0.2);
border-radius: 60px;
z-index: -1;
transition: var(--mt-transition);
}
.mt-vip .vip-visual-side:hover img {
transform: scale(1.02);
border-color: var(--mt-primary);
}
.mt-vip .vip-visual-side:hover::after {
inset: -10px;
border-color: var(--mt-primary);
}
.mt-vip .vip-content-side {
flex: 1;
text-align: left;
}
.mt-vip .vip-description-block {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
padding: 60px;
position: relative;
}
.mt-vip .vip-text-en {
font-size: 17.6px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
margin-bottom: 40px;
}
/* --- CTA (bootstrap owns .btn/.btn-primary, so scope hard) --- */
.mt-vip .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 46px;
font-size: 12.8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 4px;
border: none;
transition: var(--mt-transition);
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
}
.mt-vip .btn::after {
content: '\2192';
font-size: 1.2em;
font-weight: 400;
transition: transform 0.4s ease;
position: static;
background: none;
width: auto;
height: auto;
transform: none;
}
.mt-vip .btn:hover::after {
transform: translateX(6px);
width: auto;
}
.mt-vip .btn-vip {
background: transparent;
color: #fff;
border: 1px solid var(--mt-primary);
box-shadow: 0 0 20px rgba(65, 171, 221, 0.2);
width: fit-content;
}
.mt-vip .btn-vip:hover {
background: var(--mt-primary);
color: #fff;
box-shadow: 0 0 40px rgba(65, 171, 221, 0.4);
}
/* --- responsive (breakpoints exactly as the design) --- */
@media (max-width: 1024px) {
.mt-vip .vip-airport-layout {
flex-direction: column;
gap: 60px;
}
.mt-vip .vip-visual-side {
width: 100%;
max-width: 600px;
}
.mt-vip .vip-content-side {
width: 100%;
}
.mt-vip .vip-description-block {
padding: 40px;
}
.mt-vip .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 768px) {
.mt-vip {
padding: 100px 0;
}
.mt-vip .vip-signature {
font-size: 40px;
}
.mt-vip .vip-heading h2 {
font-size: 35.2px;
}
.mt-vip .vip-text-en {
font-size: 16px;
}
}
/* ==========================================================================
11. TRAVELERS TESTIMONIALS
--------------------------------------------------------------------------
Slides come from the CMS reviews. Scoped under .mt-reviews like every other
section. The blob image reuses the float keyframe defined in section 8.
========================================================================== */
.mt-reviews {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 120px 0;
text-align: center;
overflow: hidden;
position: relative;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--mt-text-dark);
}
.mt-reviews *,
.mt-reviews *::before,
.mt-reviews *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-reviews *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-reviews .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
/* subtle background decoration */
.mt-reviews::before {
content: '';
position: absolute;
top: -10%;
right: -5%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(65, 171, 221, 0.05) 0%, transparent 70%);
z-index: 0;
}
.mt-reviews .section-header h2 {
font-size: 44.8px;
color: var(--mt-secondary);
margin-bottom: 20px;
letter-spacing: -0.02em;
font-weight: 600;
}
.mt-reviews .section-header p {
color: var(--mt-text-mute);
font-size: 17.6px;
max-width: 600px;
margin: 0 auto 80px;
font-weight: 300;
}
/* --- split layout --- */
.mt-reviews .reviews-split-wrapper {
display: flex;
align-items: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
position: relative;
z-index: 1;
}
.mt-reviews .reviews-visual-side {
flex: 1;
height: 550px;
position: relative;
}
.mt-reviews .reviews-visual-side img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
box-shadow: 0 30px 60px rgba(12, 89, 135, 0.15);
animation: mt-float-shape 8s ease-in-out infinite;
}
.mt-reviews .reviews-content-side {
flex: 1.4;
/* The slider track is `slides x 100%` wide (22 reviews = 2200%). Without this,
the flex item is sized by that overflowing content instead of its 1.4
share: the card blows past the container and squeezes the blob image to
zero width. min-width:0 lets the item take its share, which gives the
card a definite width so .slider-container can actually clip the track. */
min-width: 0;
display: flex;
flex-direction: column;
}
.mt-reviews .reviews-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14.4px;
color: var(--mt-secondary);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.mt-reviews .meta-stars {
color: var(--mt-primary);
display: flex;
align-items: center;
gap: 8px;
}
/* --- card --- */
.mt-reviews .testimonial-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
padding: 60px;
position: relative;
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 40px 100px rgba(12, 89, 135, 0.05);
}
.mt-reviews .quote-icon-large {
color: var(--mt-primary);
font-size: 80px;
line-height: 1;
margin-bottom: 10px;
opacity: 0.3;
font-family: serif;
}
.mt-reviews .slider-container {
overflow: hidden;
width: 100%;
}
.mt-reviews .slider-track {
display: flex;
/* slides must not stretch to the tallest one */
align-items: flex-start;
transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.mt-reviews .slide {
min-width: 100%;
}
.mt-reviews .testimonial-body {
font-size: 22.4px;
/* CMS reviews run 33-1187 characters, while the design was drawn around
~200-character quotes. Unclamped, the single longest review sets the height
of the flex row and the card grows to ~3x the designed size, leaving a huge
void on every short slide. Clamping to five lines keeps each slide the
designed height and adds its own ellipsis. */
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--mt-secondary);
margin-bottom: 50px;
line-height: 1.6;
font-weight: 300;
font-style: italic;
}
.mt-reviews .reviewer-info-box h4 {
color: var(--mt-secondary);
margin-bottom: 4px;
font-size: 17.6px;
font-weight: 600;
}
.mt-reviews .reviewer-info-box p {
color: var(--mt-primary);
font-size: 13.6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* --- controls --- */
.mt-reviews .slider-controls {
position: absolute;
bottom: 60px;
right: 60px;
display: flex;
gap: 12px;
}
.mt-reviews .control-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--mt-transition);
padding: 0;
}
.mt-reviews .btn-prev {
border: 1px solid rgba(12, 89, 135, 0.1);
color: var(--mt-secondary);
background: rgba(255, 255, 255, 0.5);
}
.mt-reviews .btn-next {
background: var(--mt-secondary);
color: #fff;
border: none;
box-shadow: 0 10px 20px rgba(12, 89, 135, 0.2);
}
.mt-reviews .control-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(12, 89, 135, 0.1);
}
/* a single review has nothing to page through */
.mt-reviews .slider-controls[hidden] {
display: none;
}
/* --- responsive (breakpoints exactly as the design) --- */
@media (max-width: 1024px) {
.mt-reviews .reviews-split-wrapper {
flex-direction: column;
}
.mt-reviews .reviews-visual-side {
width: 100%;
height: 400px;
}
.mt-reviews .testimonial-card {
padding: 40px;
}
.mt-reviews .slider-controls {
right: 40px;
bottom: 40px;
}
.mt-reviews .container {
padding-left: max(18px, env(safe-area-inset-left, 0px));
padding-right: max(18px, env(safe-area-inset-right, 0px));
}
}
@media (max-width: 768px) {
.mt-reviews {
padding: 80px 0;
}
.mt-reviews .section-header h2 {
font-size: 35.2px;
}
.mt-reviews .reviews-split-wrapper {
flex-direction: column;
gap: 50px;
text-align: center;
}
.mt-reviews .reviews-visual-side {
width: 100%;
height: 320px;
max-width: 320px;
margin: 0 auto;
order: -1;
}
.mt-reviews .reviews-visual-side img {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.mt-reviews .testimonial-card {
padding: 40px 20px 90px;
min-height: auto;
text-align: center;
}
.mt-reviews .testimonial-body {
font-size: 18.4px;
margin-bottom: 40px;
line-height: 1.5;
}
.mt-reviews .slider-controls {
right: 50%;
transform: translateX(50%);
bottom: 30px;
gap: 20px;
}
.mt-reviews .control-btn {
width: 48px;
height: 48px;
}
.mt-reviews .reviews-meta-row {
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
align-items: center;
}
.mt-reviews .quote-icon-large {
font-size: 64px;
margin-bottom: 0;
}
}
/* ==========================================================================
12. EXQUISITE CLARIFICATIONS (FAQ accordion)
--------------------------------------------------------------------------
Items come from the CMS FAQs. Scoped under .mt-faq like every other section.
The blob image reuses the float keyframe defined in section 8.
========================================================================== */
.mt-faq {
padding: 120px 0;
background: #ffffff;
position: relative;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--mt-text-dark);
}
.mt-faq *,
.mt-faq *::before,
.mt-faq *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* same inheritance guard as the header/footer — see section 1 */
.mt-faq *:not(input):not(button):not(select):not(textarea) {
font-family: inherit;
line-height: inherit;
}
.mt-faq .container {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
}
/* --- section header --- */
.mt-faq .section-header {
text-align: center;
margin-bottom: 70px;
}
.mt-faq .overline {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--mt-primary);
font-weight: 600;
margin-bottom: 16px;
}
.mt-faq .section-header h2 {
font-size: 48px;
color: var(--mt-text-dark);
margin-bottom: 18px;
letter-spacing: -0.02em;
font-weight: 600;
}
.mt-faq .section-header p {
color: var(--mt-text-mute);
font-size: 17.6px;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
/* --- split layout --- */
.mt-faq .faq-split-wrapper {
display: flex;
align-items: flex-start;
gap: 80px;
max-width: 1200px;
margin: 0 auto;
}
.mt-faq .faq-content-side {
flex: 1.2;
/* the accordion is the only thing that may size this column */
min-width: 0;
}
.mt-faq .faq-visual-side {
flex: 0.8;
position: sticky;
top: 120px;
}
.mt-faq .faq-visual-side img {
width: 100%;
height: auto;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
box-shadow: 0 40px 80px rgba(12, 89, 135, 0.1);
animation: mt-float-shape 10s ease-in-out infinite alternate;
display: block;
}
/* --- accordion --- */
.mt-faq .faq-accordion {
display: flex;
flex-direction: column;
gap: 15px;
}
.mt-faq .faq-item {
background: var(--mt-bg-mute);
border: 1px solid var(--mt-border-soft);
border-radius: 12px;
overflow: hidden;
transition: var(--mt-transition);
}
.mt-faq .faq-item.active {
background: #ffffff;
border-color: var(--mt-primary);
box-shadow: 0 20px 40px rgba(65, 171, 221, 0.08);
}
.mt-faq .faq-header {
padding: 24px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
gap: 20px;
/* it is a