/* ══════════════════════════════════════════════════════════════════
MIUUM site chrome: skip link, the top bar (five dropdown groups:
Services, Fleet, Coverage, For business, Help; language, sign-in and
Book now on the right), the rebrand notice, the mobile menu sheet with
accordions, footer, and the cookie consent banner and preferences
dialog (consent.js).
Source of truth: _chrome/chrome.css (copied to /chrome.css, linked as
/chrome.css?v=N by every page). Every selector is scoped under
.mm-skip / .mm-nav / .mm-menu / .mm-foot / .mm-consent so it drops into
any page next to that page's own styles.
The bar has two looks. Over a dark page top it is transparent with light
text; once the page scrolls, a menu opens, or the page starts light, it
turns solid: frosted cream, ink text, a gold hairline along its foot.
chrome.js decides which (.is-solid); the colours below read the bar's
own --mm-* tokens, so everything inside follows the switch. The mobile
menu is a cream sheet and the footer stays dark; the site is light only.
Contrast (WCAG AA): text 4.5:1, large text and controls 3:1. Text on the
gold buttons is #0B0A08; gold text on a light surface is #735A1C.
Bump ?v=N on every page when you change this file (see CLAUDE.md).
══════════════════════════════════════════════════════════════════ */
@keyframes mmNavIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
.mm-nav, .mm-menu, .mm-foot, .mm-topbar {
--mm-cream: #F5F0E8;
--mm-dark: #1C1917;
--mm-dark-deep: #0D0C0B;
--mm-gold: #9A7B2E;
--mm-gold-light: #C4A45A;
--mm-white: #ffffff;
--mm-easing: cubic-bezier(0.32, 0.72, 0, 1);
--mm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--mm-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
--mm-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
--mm-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
--mm-icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
--mm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
--mm-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Ccircle cx='12' cy='10' r='3.25'/%3E%3Cpath d='M6.2 18.4c1.3-2 3.4-3.1 5.8-3.1s4.5 1.1 5.8 3.1'/%3E%3C/svg%3E");
font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
box-sizing: border-box;
}
.mm-nav *, .mm-menu *, .mm-foot *, .mm-topbar * { box-sizing: border-box; }
/* ── Skip link (first element of the chrome, visible only on focus) ── */
a.mm-skip {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
box-sizing: border-box;
display: inline-flex; align-items: center;
min-height: 44px;
padding: 10px 20px;
border-radius: 50px;
background: #C4A45A;
color: #0B0A08;
font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
transform: translateY(-160%);
transition: transform 0.2s ease;
}
a.mm-skip:focus, a.mm-skip:focus-visible {
transform: none;
outline: 2px solid #F4EFE6;
outline-offset: 2px;
}
a.mm-skip:not(:focus) {
clip-path: inset(50%);
}
/* The skip target (main#main tabindex="-1", or the fallback chrome.js focuses)
takes focus programmatically; no ring around the whole page. */
#main[tabindex="-1"]:focus, [data-mm-skip-target]:focus { outline: none; }
/* ── The bar ──────────────────────────────────────────────────────────
Full width and fixed. Its colours are tokens, so the two looks are two
token sets: transparent (the default, for the dark page tops most pages
open on) and solid (.is-solid, set by chrome.js). Before chrome.js runs,
a page that opens light (.mm-pad-top) is already solid, so its bar never
shows white text on cream. Every colour that reads a token transitions,
which is what animates the switch. */
header.mm-nav {
--mm-h: 84px;
--mm-h-top: 84px; /* the bar's height at the top of the page (chrome.js reads it) */
--mm-logo-h: 26px;
--mm-fg: #FFFFFF;
--mm-hover: rgba(255,255,255,0.12);
--mm-pill: rgba(255,255,255,0.08);
--mm-pill-line: rgba(255,255,255,0.34);
--mm-brand-c: #F5F0E8;
--mm-ring: #C4A45A;
position: fixed;
top: 0; left: 0; right: 0;
transform: none;
width: auto; max-width: none;
z-index: 900;
margin: 0; padding: 0; border: 0;
background: none;
transition: none;
}
/* Pages still carry the old floating-island rules on bare "header"
(top: 10px once scrolled, a narrower width below 900px); this outranks them. */
header.mm-nav.scrolled { top: 0; --mm-h: 68px; }
header.mm-nav.is-solid,
html:has(.mm-pad-top) header.mm-nav:not(.mm-js) {
--mm-fg: #1C1917;
--mm-hover: rgba(28,25,23,0.06);
--mm-pill: rgba(28,25,23,0.035);
--mm-pill-line: rgba(28,25,23,0.16);
--mm-brand-c: #0B0A08;
--mm-ring: #735A1C;
}
/* A soft scrim at the very top keeps the light text readable over a photo. */
header.mm-nav::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: calc(var(--mm-h) + 56px);
background: linear-gradient(180deg, rgba(8,7,6,0.46) 0%, rgba(8,7,6,0.2) 55%, rgba(8,7,6,0) 100%);
pointer-events: none;
transition: opacity 0.5s var(--mm-easing);
}
header.mm-nav.is-solid::before,
html:has(.mm-pad-top) header.mm-nav:not(.mm-js)::before { opacity: 0; }
.mm-nav .mm-bar {
position: relative;
display: flex;
align-items: center;
height: var(--mm-h);
padding: 0 clamp(20px, 3.4vw, 48px);
transition: height 0.45s var(--mm-easing);
}
/* The solid surface: frosted cream, faded in under everything in the bar. */
.mm-nav .mm-bar::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
background: rgba(248,245,238,0.95);
-webkit-backdrop-filter: blur(22px) saturate(170%);
backdrop-filter: blur(22px) saturate(170%);
box-shadow: 0 14px 34px -24px rgba(28,25,23,0.4);
opacity: 0;
transition: opacity 0.5s var(--mm-easing);
}
/* The gold hairline along its foot, drawn outwards from the middle. */
.mm-nav .mm-bar::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(196,164,90,0) 0%, rgba(196,164,90,0.28) 18%, rgba(196,164,90,0.75) 50%, rgba(196,164,90,0.28) 82%, rgba(196,164,90,0) 100%);
transform: scaleX(0);
pointer-events: none;
transition: transform 0.9s var(--mm-easing);
}
header.mm-nav.is-solid .mm-bar::before,
html:has(.mm-pad-top) header.mm-nav:not(.mm-js) .mm-bar::before { opacity: 1; }
header.mm-nav.is-solid .mm-bar::after,
html:has(.mm-pad-top) header.mm-nav:not(.mm-js) .mm-bar::after { transform: scaleX(1); }
/* Brand: the MIUUM wordmark (Hugo, 2026-09-28). Its letters are painted in the bar's brand colour
(cream over a dark top, near-black on the solid bar), so the switch is a
colour change, not a swap; the gold square is its own layer and never
changes colour. Both layers sit on .mm-logo, which the home page moves (see
"Home page: the logo docks" below). The ![]()
stays for the name and as the
fallback; the paint is on pseudo-elements so the focus ring is never masked. */
.mm-nav .mm-brand {
flex: none;
position: relative;
display: block;
width: calc(var(--mm-logo-h) * 1036 / 297); height: var(--mm-logo-h);
margin: 0;
line-height: 0;
text-decoration: none;
border-radius: 4px;
transition: opacity 0.35s var(--mm-easing), transform 0.45s var(--mm-easing), visibility 0s linear 0s;
}
.mm-nav .mm-logo {
position: absolute; inset: 0;
display: block;
transform-origin: 0 0;
}
.mm-nav .mm-logo::before, .mm-nav .mm-logo::after {
content: '';
position: absolute; inset: 0;
}
.mm-nav .mm-logo::before {
background-color: var(--mm-brand-c);
-webkit-mask: url("/images/miuum-wordmark-v2-letters.svg") 0 0 / 100% 100% no-repeat;
mask: url("/images/miuum-wordmark-v2-letters.svg") 0 0 / 100% 100% no-repeat;
transition: background-color 0.5s var(--mm-easing);
}
.mm-nav .mm-logo::after { background: url("/images/miuum-wordmark-v2-gold.svg") 0 0 / 100% 100% no-repeat; }
.mm-nav .mm-logo img {
display: block;
width: 100%; height: 100%;
max-width: none;
opacity: 0;
}
.mm-nav .mm-brand:hover { opacity: 0.78; }
/* Home page with reduced motion (chrome.js adds .mm-brand-auto there and
toggles .mm-brand-off while the hero's own logo is on screen): the brand
lifts away and comes back once the hero logo has scrolled past. The open
mobile menu always shows it (it is the menu's header). */
.mm-nav.mm-brand-off:not(.menu-open) .mm-brand {
opacity: 0;
transform: translateY(-6px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s var(--mm-easing), transform 0.45s var(--mm-easing), visibility 0s linear 0.45s;
}
/* Home page: the logo docks. It starts big in the hero, in the place of the
hero's own copy (which steps aside), and shrinks up into this slot as the
page scrolls, its top edge travelling with the page so it never covers the
headline. chrome.js supplies the geometry: --mm-dock-x / -y (the hero spot
relative to this slot), --mm-dock-s (its scale) and --mm-dock-d (the scroll
it takes). Browsers with scroll-driven animations run it here, on the
compositor, so it never trails the page; elsewhere chrome.js moves it on
scroll (.mm-dock-js). .mm-dock-hold hands it to chrome.js while the mobile
menu glides it into the bar and back. .mm-dock-out: the logo is still below
the bar, over the hero photo, so its letters stay cream whatever the bar
does, and only the logo itself takes clicks there. */
@keyframes mmDock {
from { transform: translate(var(--mm-dock-x, 0px), var(--mm-dock-y, 0px)) scale(var(--mm-dock-s, 1)); }
to { transform: none; }
}
@supports (animation-timeline: scroll()) {
.mm-nav.mm-dock:not(.mm-dock-js):not(.mm-dock-hold) .mm-logo {
animation: mmDock linear both;
animation-timeline: scroll(root block);
animation-range: 0px var(--mm-dock-d, 1px);
}
}
header.mm-nav.mm-dock-out { --mm-brand-c: #F5F0E8; }
.mm-nav.mm-dock-out .mm-brand { pointer-events: none; }
.mm-nav.mm-dock-out .mm-logo { pointer-events: auto; }
.mm-nav.mm-dock-out .mm-brand:hover { opacity: 1; }
.mm-nav.mm-dock-out .mm-logo:hover { opacity: 0.86; }
html.mm-intro header.mm-nav.mm-dock .mm-brand { animation: none; }
/* Primary links: five dropdown groups, right-aligned next to the tools. */
.mm-nav nav.mm-links {
display: flex;
align-items: center;
gap: 2px;
height: 100%;
margin: 0 0 0 auto;
padding: 0;
}
.mm-nav .mm-dd { position: relative; display: flex; align-items: center; height: 100%; }
.mm-nav .mm-dd-btn {
position: relative;
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 14px; margin: 0;
border: 0; border-radius: 999px;
background: transparent;
font-family: inherit;
font-size: 15px; font-weight: 500; letter-spacing: 0.005em; line-height: 1;
text-transform: none; text-decoration: none;
color: var(--mm-fg);
cursor: pointer;
white-space: nowrap;
transition: color 0.5s var(--mm-easing), background-color 0.25s var(--mm-easing);
}
.mm-nav .mm-dd-btn svg {
flex: none;
width: 10px; height: 6px;
opacity: 0.72;
transition: transform 0.4s var(--mm-easing);
}
.mm-nav .mm-dd-btn:hover,
.mm-nav .mm-dd.open .mm-dd-btn { background-color: var(--mm-hover); }
.mm-nav .mm-dd.open .mm-dd-btn svg { transform: rotate(180deg); }
/* The group holding the current page: a small gold point under its label. */
.mm-nav .mm-dd-btn::after {
content: '';
position: absolute; left: 50%; bottom: 1px;
width: 4px; height: 4px; border-radius: 50%;
background: #C4A45A;
transform: translateX(-50%) scale(0);
transition: transform 0.45s var(--mm-spring);
}
.mm-nav .mm-dd-btn.active::after { transform: translateX(-50%) scale(1); }
/* Dropdown panels: a light card that drops from under the bar, its rows
following one after another. Hover opens on pointer devices (CSS);
click and keyboard open .open (chrome.js). */
.mm-nav .mm-dd-menu {
position: absolute;
top: calc(100% + 4px);
left: -4px;
z-index: 10; /* above the rebrand notice under the bar */
min-width: 250px;
padding: 8px;
background: #FFFEFB;
border: 1px solid rgba(28,25,23,0.08);
border-radius: 18px;
box-shadow: 0 30px 60px -26px rgba(28,25,23,0.42), 0 10px 22px -14px rgba(28,25,23,0.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px) scale(0.985);
transform-origin: 36px 0;
transition: opacity 0.22s ease, transform 0.4s var(--mm-easing), visibility 0s linear 0.4s;
}
/* Invisible bridge so the pointer can travel from the label to the panel. */
.mm-nav .mm-dd-menu::before {
content: '';
position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.mm-nav .mm-dd.open .mm-dd-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
.mm-nav .mm-dd:hover .mm-dd-btn { background-color: var(--mm-hover); }
.mm-nav .mm-dd:hover .mm-dd-btn svg { transform: rotate(180deg); }
.mm-nav .mm-dd:hover .mm-dd-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
/* Sliding along the row: the panel being left closes at once, so two
panels never overlap on the way to the next one. */
.mm-nav nav.mm-links:hover .mm-dd:not(:hover):not(.open) .mm-dd-menu { transition-duration: 0s; }
}
.mm-nav .mm-dd-menu a {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 22px;
padding: 10px 12px 10px 14px;
border-radius: 11px;
font-family: inherit;
font-size: 14.5px; font-weight: 400; letter-spacing: 0.005em; line-height: 1.3;
text-transform: none; text-decoration: none;
color: #1C1917;
white-space: nowrap;
opacity: 0;
transform: translateY(5px);
transition: background-color 0.2s var(--mm-easing), color 0.2s var(--mm-easing), opacity 0.3s var(--mm-easing), transform 0.45s var(--mm-easing);
}
/* Each row carries an arrow that slides in on hover (and the pages' own
"nav a::after" underline is replaced by it). */
.mm-nav .mm-dd-menu a::after {
content: '';
position: static;
flex: none;
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: var(--mm-icon-arrow) center / contain no-repeat;
mask: var(--mm-icon-arrow) center / contain no-repeat;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.2s var(--mm-easing), transform 0.3s var(--mm-easing);
}
.mm-nav .mm-dd-menu a:hover,
.mm-nav .mm-dd-menu a:focus-visible,
.mm-nav .mm-dd-menu a.active { background-color: #F5F0E8; color: #735A1C; }
.mm-nav .mm-dd-menu a:hover::after,
.mm-nav .mm-dd-menu a:focus-visible::after,
.mm-nav .mm-dd-menu a.active::after { opacity: 1; transform: none; }
/* The "See all" row closes a panel: a hairline above, gold, arrow always on. */
.mm-nav .mm-dd-menu a.mm-dd-all {
margin-top: 6px;
padding-top: 13px;
border-top: 1px solid rgba(28,25,23,0.08);
border-radius: 0 0 11px 11px;
color: #735A1C;
font-weight: 500;
}
.mm-nav .mm-dd-menu a.mm-dd-all::after { opacity: 0.85; transform: none; }
.mm-nav .mm-dd.open .mm-dd-menu a { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
.mm-nav .mm-dd:hover .mm-dd-menu a { opacity: 1; transform: none; }
}
.mm-nav .mm-dd-menu a:nth-child(2) { --mm-i: 1; }
.mm-nav .mm-dd-menu a:nth-child(3) { --mm-i: 2; }
.mm-nav .mm-dd-menu a:nth-child(4) { --mm-i: 3; }
.mm-nav .mm-dd-menu a:nth-child(5) { --mm-i: 4; }
.mm-nav .mm-dd-menu a:nth-child(6) { --mm-i: 5; }
.mm-nav .mm-dd-menu a:nth-child(7) { --mm-i: 6; }
.mm-nav .mm-dd.open .mm-dd-menu a { transition-delay: 0s, 0s, calc(var(--mm-i, 0) * 28ms + 40ms), calc(var(--mm-i, 0) * 28ms + 40ms); }
@media (hover: hover) and (pointer: fine) {
.mm-nav .mm-dd:hover .mm-dd-menu a { transition-delay: 0s, 0s, calc(var(--mm-i, 0) * 28ms + 40ms), calc(var(--mm-i, 0) * 28ms + 40ms); }
}
/* Right group: tools slot (language, and where a page mounts them, sign-in or
the account chip), Book now, burger. */
.mm-nav .mm-right {
flex: none;
display: flex; align-items: center; gap: 8px;
margin-left: 10px;
}
.mm-nav .nav-tools { display: flex; align-items: center; gap: 6px; }
.mm-nav .nav-tools:empty { display: none; }
.mm-nav .mm-tools-chrome, .mm-menu .mm-tools-chrome { display: contents; }
header.mm-nav .nav-tools .mm-tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
header.mm-nav .nav-tools .mm-tools > * { flex: none; }
/* Language: globe, the two-letter code and a caret, read like a nav link.
Three triggers share the look: the chrome's own (.mm-lang-btn), the home
page engine's (#langTrig) and the corporate / travel agent pages' (.lang-btn). */
.mm-nav .mm-lang, .mm-nav #langDD, .mm-nav .lang-dd,
.mm-menu .mm-lang, .mm-menu #langDD, .mm-menu .lang-dd { position: relative; display: inline-flex; }
header.mm-nav .mm-lang-btn, header.mm-nav #langTrig, header.mm-nav .lang-dd .lang-btn {
display: inline-flex; align-items: center; gap: 7px;
width: auto; height: 38px; padding: 0 12px; margin: 0;
border: 0; border-radius: 999px;
background: transparent;
color: var(--mm-fg);
font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: none;
cursor: pointer; white-space: nowrap;
transition: color 0.5s var(--mm-easing), background-color 0.25s var(--mm-easing);
}
.mm-menu .mm-lang-btn, .mm-menu #langTrig, .mm-menu .lang-dd .lang-btn {
display: inline-flex; align-items: center; gap: 8px;
width: auto; height: 46px; padding: 0 16px 0 14px; margin: 0;
border: 1px solid rgba(28,25,23,0.16); border-radius: 999px;
background: #FFFEFB;
color: #1C1917;
font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: none;
cursor: pointer; white-space: nowrap;
}
header.mm-nav .mm-lang-btn::before, header.mm-nav #langTrig::before, header.mm-nav .lang-dd .lang-btn::before,
.mm-menu .mm-lang-btn::before, .mm-menu #langTrig::before, .mm-menu .lang-dd .lang-btn::before {
content: '';
flex: none;
width: 16px; height: 16px;
background: currentColor;
-webkit-mask: var(--mm-icon-globe) center / contain no-repeat;
mask: var(--mm-icon-globe) center / contain no-repeat;
}
header.mm-nav .mm-lang-btn::after, header.mm-nav #langTrig::after, header.mm-nav .lang-dd .lang-btn::after,
.mm-menu .mm-lang-btn::after, .mm-menu #langTrig::after, .mm-menu .lang-dd .lang-btn::after {
content: '';
flex: none;
width: 10px; height: 6px;
background: currentColor;
opacity: 0.72;
-webkit-mask: var(--mm-icon-chev) center / contain no-repeat;
mask: var(--mm-icon-chev) center / contain no-repeat;
transition: transform 0.4s var(--mm-easing);
}
header.mm-nav .lang-dd .lang-btn svg, .mm-menu .lang-dd .lang-btn svg { display: none; }
header.mm-nav .mm-lang.open .mm-lang-btn::after, header.mm-nav .lang-dd.open .lang-btn::after, header.mm-nav #langDD:has(.pl-dd-panel) #langTrig::after,
.mm-menu .mm-lang.open .mm-lang-btn::after, .mm-menu .lang-dd.open .lang-btn::after, .mm-menu #langDD:has(.pl-dd-panel) #langTrig::after { transform: rotate(180deg); }
header.mm-nav .mm-lang-btn:hover, header.mm-nav #langTrig:hover, header.mm-nav .lang-dd .lang-btn:hover,
header.mm-nav .mm-lang.open .mm-lang-btn, header.mm-nav .lang-dd.open .lang-btn,
header.mm-nav #langDD:has(.pl-dd-panel) #langTrig { background-color: var(--mm-hover); color: var(--mm-fg); border-color: transparent; }
.mm-menu .mm-lang-btn:hover, .mm-menu #langTrig:hover, .mm-menu .lang-dd .lang-btn:hover,
.mm-menu .mm-lang.open .mm-lang-btn, .mm-menu .lang-dd.open .lang-btn { border-color: #C4A45A; color: #1C1917; background: #FFFEFB; }
header.mm-nav .mm-lang-cur, header.mm-nav #langCur, header.mm-nav .lang-dd .lang-cur,
.mm-menu .mm-lang-cur, .mm-menu #langCur, .mm-menu .lang-dd .lang-cur {
font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
display: inline !important;
}
/* The button shows the two-letter code (EN / ES / PT / FR); the panel spells the
names out. chrome.js writes the code into .mm-lang-cur; the engine writes the
full name into #langCur, so that one is drawn from html[lang] instead. */
.mm-nav #langCur, .mm-menu #langCur { font-size: 0 !important; }
.mm-nav #langCur::after, .mm-menu #langCur::after { content: 'EN'; font-size: 15px; }
html[lang="es"] .mm-nav #langCur::after, html[lang="es"] .mm-menu #langCur::after { content: 'ES'; }
html[lang="pt"] .mm-nav #langCur::after, html[lang="pt"] .mm-menu #langCur::after { content: 'PT'; }
html[lang="fr"] .mm-nav #langCur::after, html[lang="fr"] .mm-menu #langCur::after { content: 'FR'; }
/* The engine trigger carries a globe emoji (a bare text node, so the button's
own text is sized to nothing) and a caret span; the icons above replace them. */
header.mm-nav #langTrig, .mm-menu #langTrig { font-size: 0; }
.mm-nav #langTrig > span:not(#langCur), .mm-menu #langTrig > span:not(#langCur) { display: none !important; }
/* Language panels, one light card for all four kinds: the chrome's own
(.mm-lang-menu), the engine's (.pl-dd-panel, built by account.js) and the
corporate / travel agent pages' (.lang-menu, .lang-list). */
.mm-nav .mm-lang-menu, .mm-menu .mm-lang-menu,
header.mm-nav .pl-dd-panel, .mm-menu .pl-dd-panel,
header.mm-nav .lang-dd .lang-menu, header.mm-nav .lang-dd .lang-list,
.mm-menu .lang-dd .lang-menu, .mm-menu .lang-dd .lang-list {
position: absolute;
top: calc(100% + (var(--mm-h, 68px) - 38px) / 2 + 4px);
right: 0; left: auto;
z-index: 5;
min-width: 184px;
margin: 0;
padding: 8px;
background: #FFFEFB;
border: 1px solid rgba(28,25,23,0.08);
border-radius: 16px;
box-shadow: 0 30px 60px -26px rgba(28,25,23,0.42), 0 10px 22px -14px rgba(28,25,23,0.18);
}
.mm-menu .mm-lang-menu, .mm-menu .pl-dd-panel, .mm-menu .lang-dd .lang-menu, .mm-menu .lang-dd .lang-list { top: calc(100% + 8px); left: 0; right: auto; }
.mm-nav .mm-lang-menu, .mm-menu .mm-lang-menu {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px) scale(0.985);
transform-origin: 85% 0;
transition: opacity 0.22s ease, transform 0.4s var(--mm-easing), visibility 0s linear 0.4s;
}
.mm-nav .mm-lang.open .mm-lang-menu, .mm-menu .mm-lang.open .mm-lang-menu {
opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s;
}
.mm-nav .mm-lang-menu button, .mm-menu .mm-lang-menu button,
header.mm-nav .pl-dd-panel .pl-dd-opt, .mm-menu .pl-dd-panel .pl-dd-opt,
header.mm-nav .lang-dd .lang-menu button, header.mm-nav .lang-dd .lang-list button,
.mm-menu .lang-dd .lang-menu button, .mm-menu .lang-dd .lang-list button {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left;
padding: 10px 12px;
border: 0; border-radius: 10px;
background: none;
font-family: inherit; font-size: 14.5px; font-weight: 400; letter-spacing: 0.005em; text-transform: none;
color: #1C1917;
cursor: pointer;
transition: background-color 0.2s var(--mm-easing), color 0.2s var(--mm-easing);
}
.mm-nav .mm-lang-menu button::before, .mm-menu .mm-lang-menu button::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
background: transparent; border: 1px solid rgba(28,25,23,0.28);
transition: background-color 0.2s, border-color 0.2s;
}
.mm-nav .mm-lang-menu button.on::before, .mm-menu .mm-lang-menu button.on::before { background: #C4A45A; border-color: #C4A45A; }
.mm-nav .mm-lang-menu button:hover, .mm-nav .mm-lang-menu button:focus-visible, .mm-nav .mm-lang-menu button.on,
.mm-menu .mm-lang-menu button:hover, .mm-menu .mm-lang-menu button:focus-visible, .mm-menu .mm-lang-menu button.on,
header.mm-nav .pl-dd-panel .pl-dd-opt:hover, header.mm-nav .pl-dd-panel .pl-dd-opt.on,
.mm-menu .pl-dd-panel .pl-dd-opt:hover, .mm-menu .pl-dd-panel .pl-dd-opt.on,
header.mm-nav .lang-dd .lang-menu button:hover, header.mm-nav .lang-dd .lang-list button:hover,
.mm-menu .lang-dd .lang-menu button:hover, .mm-menu .lang-dd .lang-list button:hover {
background-color: #F5F0E8; color: #735A1C;
}
header.mm-nav .pl-dd-panel .pl-dd-opt .ic, .mm-menu .pl-dd-panel .pl-dd-opt .ic { color: #735A1C; }
/* Sign in (the home page engine's .btn-signin, the corporate page's Login
link) and the signed-in account chip: Blacklane's glass pill, person icon first. */
header.mm-nav .nav-tools .mm-tools .btn-signin,
header.mm-nav .nav-tools > a,
.mm-menu .mm-menu-tools .mm-tools .btn-signin,
.mm-menu .mm-menu-tools > a {
display: inline-flex; align-items: center; gap: 8px;
height: 40px; padding: 0 16px 0 12px; margin: 0;
border: 1px solid var(--mm-pill-line); border-radius: 999px;
background: var(--mm-pill);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--mm-fg);
font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.005em; line-height: 1;
text-transform: none; text-decoration: none; white-space: nowrap;
cursor: pointer;
transition: color 0.5s var(--mm-easing), background-color 0.25s var(--mm-easing), border-color 0.5s var(--mm-easing);
}
header.mm-nav .nav-tools .mm-tools .btn-signin::before,
header.mm-nav .nav-tools > a::before,
.mm-menu .mm-menu-tools .mm-tools .btn-signin::before,
.mm-menu .mm-menu-tools > a::before {
content: '';
position: static;
flex: none;
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: var(--mm-icon-user) center / contain no-repeat;
mask: var(--mm-icon-user) center / contain no-repeat;
transform: none;
}
header.mm-nav .nav-tools > a::after, .mm-menu .mm-menu-tools > a::after { content: none; }
header.mm-nav .nav-tools > a, .mm-menu .mm-menu-tools > a { order: 1; }
header.mm-nav .nav-tools .mm-tools .btn-signin:hover,
header.mm-nav .nav-tools > a:hover { background-color: var(--mm-hover); border-color: #C4A45A; color: var(--mm-fg); }
header.mm-nav .nav-tools .mm-tools .head-acct,
.mm-menu .mm-menu-tools .mm-tools .head-acct {
height: 40px; padding: 0 12px 0 4px; gap: 8px;
border: 1px solid var(--mm-pill-line); border-radius: 999px;
background: var(--mm-pill);
color: var(--mm-fg);
font-family: inherit; font-size: 14px; font-weight: 500;
transition: color 0.5s var(--mm-easing), background-color 0.25s var(--mm-easing), border-color 0.5s var(--mm-easing);
}
header.mm-nav .nav-tools .mm-tools .head-acct:hover { background-color: var(--mm-hover); border-color: #C4A45A; }
header.mm-nav .nav-tools .mm-tools .head-acct .ha-name,
.mm-menu .mm-menu-tools .mm-tools .head-acct .ha-name { color: inherit; font-size: 14px; }
header.mm-nav .nav-tools .mm-tools .head-acct .ha-av { width: 30px; height: 30px; font-size: 13px; }
/* The menu is a cream sheet: its pills are ink on white. */
.mm-menu { --mm-fg: #1C1917; --mm-hover: rgba(28,25,23,0.06); --mm-pill: #FFFEFB; --mm-pill-line: rgba(28,25,23,0.16); }
.mm-menu .mm-menu-tools .mm-tools .btn-signin, .mm-menu .mm-menu-tools > a, .mm-menu .mm-menu-tools .mm-tools .head-acct { height: 46px; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Book now: the gold pill. A light sheen crosses it on hover and the arrow
steps forward. On the home page it waits until the hero's reserve form has
scrolled away (.mm-cta-off, chrome.js), the way Blacklane's appears on scroll.
While the mobile menu is open it steps aside too: the menu ends on its own
full-width Book now, and one is enough (Hugo, 2026-09-26). */
.mm-nav .mm-cta {
position: relative;
overflow: hidden;
isolation: isolate;
flex: none;
display: inline-flex; align-items: center; gap: 8px;
height: 40px; max-width: 240px;
padding: 0 17px 0 20px; margin: 0;
border: 0; border-radius: 999px;
background: #C4A45A;
color: #0B0A08 !important;
font-family: inherit;
font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
text-transform: none; text-decoration: none;
white-space: nowrap;
box-shadow: 0 10px 22px -12px rgba(115,90,28,0.75);
transition: background-color 0.3s var(--mm-easing), box-shadow 0.3s var(--mm-easing), transform 0.2s var(--mm-easing),
opacity 0.4s var(--mm-easing), max-width 0.55s var(--mm-easing), padding 0.55s var(--mm-easing), margin 0.55s var(--mm-easing), visibility 0s linear 0s;
}
.mm-nav .mm-cta::before {
content: '';
position: absolute; top: 0; bottom: 0; left: -70%;
width: 45%;
z-index: -1;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-18deg);
transition: left 0.75s var(--mm-easing);
pointer-events: none;
}
.mm-nav .mm-cta::after { content: none; }
.mm-nav .mm-cta:hover { background-color: #CBAE66; box-shadow: 0 14px 28px -12px rgba(115,90,28,0.85); }
.mm-nav .mm-cta:hover::before { left: 130%; }
.mm-nav .mm-cta:active { transform: scale(0.97); }
.mm-nav .mm-cta .mm-cta-arrow, .mm-menu .mm-cta-arrow {
flex: none;
width: 15px; height: 15px;
transition: transform 0.4s var(--mm-spring);
}
.mm-nav .mm-cta:hover .mm-cta-arrow { transform: translateX(3px); }
.mm-nav.mm-cta-off .mm-cta,
.mm-nav.menu-open .mm-cta,
html:has(#reserve) header.mm-nav:not(.mm-js) .mm-cta {
max-width: 0;
padding-left: 0; padding-right: 0;
margin-left: -8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
box-shadow: none;
transition: background-color 0.3s var(--mm-easing), box-shadow 0.3s var(--mm-easing), transform 0.2s var(--mm-easing),
opacity 0.25s var(--mm-easing), max-width 0.5s var(--mm-easing), padding 0.5s var(--mm-easing), margin 0.5s var(--mm-easing), visibility 0s linear 0.5s;
}
/* Focus rings: gold over the dark top, deep gold on the solid bar. The home
page's logo, while it is still big in the hero, carries its own. */
header.mm-nav.mm-dock-out .mm-brand:focus-visible { outline: none; }
header.mm-nav.mm-dock-out .mm-brand:focus-visible .mm-logo { outline: 1px solid var(--mm-ring); outline-offset: 3px; border-radius: 2px; }
.mm-nav .mm-brand:focus-visible, .mm-nav .mm-dd-btn:focus-visible, .mm-nav .mm-cta:focus-visible, .mm-nav .mm-burger:focus-visible,
header.mm-nav .mm-lang-btn:focus-visible, header.mm-nav #langTrig:focus-visible, header.mm-nav .lang-dd .lang-btn:focus-visible,
header.mm-nav .nav-tools .btn-signin:focus-visible, header.mm-nav .nav-tools > a:focus-visible, header.mm-nav .nav-tools .head-acct:focus-visible {
outline: 2px solid var(--mm-ring);
outline-offset: 2px;
}
.mm-nav .mm-dd-menu a:focus-visible, .mm-nav .mm-lang-menu button:focus-visible,
.mm-menu a:focus-visible, .mm-menu button:focus-visible {
outline: 2px solid #735A1C;
outline-offset: -2px;
}
/* Rebrand notice (chrome.js appends it inside the header, under the bar, for
visitors arriving from premiumlane.net): one slim light pill, text + Dismiss.
It rides with the fixed header and hides behind the open mobile menu. */
@keyframes mmBannerIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.mm-nav .mm-rebrand {
display: flex; align-items: center; justify-content: center; gap: 14px;
width: fit-content; max-width: calc(100% - 24px);
margin: 10px auto 0;
padding: 7px 8px 7px 18px;
background: #FFFEFB;
border: 1px solid rgba(28,25,23,0.1);
border-radius: 50px;
box-shadow: 0 16px 36px -18px rgba(28,25,23,0.45);
color: #1C1917;
font-size: 13.5px; font-weight: 400; letter-spacing: 0.005em; line-height: 1.4;
animation: mmBannerIn 0.4s var(--mm-easing) both;
transition: opacity 0.25s var(--mm-easing), transform 0.25s var(--mm-easing);
}
.mm-nav .mm-rebrand.out { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.mm-nav .mm-rebrand p { margin: 0; }
.mm-nav .mm-rebrand-x {
flex: none;
display: inline-flex; align-items: center;
height: 30px; padding: 0 14px; margin: 0;
border-radius: 50px;
border: 1px solid rgba(28,25,23,0.16);
background: transparent;
color: #1C1917;
font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
cursor: pointer;
transition: border-color 0.25s var(--mm-easing), color 0.25s var(--mm-easing), background-color 0.25s;
}
.mm-nav .mm-rebrand-x:hover { border-color: #C4A45A; color: #735A1C; background: #F5F0E8; }
.mm-nav.menu-open .mm-rebrand { display: none; }
@media (max-width: 599px) {
.mm-nav .mm-rebrand { border-radius: 18px; padding: 10px 10px 10px 16px; font-size: 12.5px; gap: 10px; text-align: left; }
}
/* Burger: two lines that fold into an X. */
.mm-nav .mm-burger {
display: none;
position: relative;
flex: none;
width: 44px; height: 44px;
padding: 0; margin: 0 -10px 0 0;
border: 0; border-radius: 50%;
background: none;
color: var(--mm-fg);
cursor: pointer;
z-index: 901;
transition: color 0.5s var(--mm-easing), background-color 0.25s var(--mm-easing);
}
@media (hover: hover) { .mm-nav .mm-burger:hover { background-color: var(--mm-hover); } }
.mm-nav .mm-burger span {
position: absolute; left: 11px;
display: block;
width: 22px; height: 1.6px;
border-radius: 2px;
background: currentColor;
transition: top 0.35s var(--mm-easing), transform 0.45s var(--mm-easing), width 0.35s var(--mm-easing);
}
.mm-nav .mm-burger span:nth-child(1) { top: 17.5px; }
.mm-nav .mm-burger span:nth-child(2) { top: 25px; width: 15px; }
@media (hover: hover) { .mm-nav .mm-burger:hover span:nth-child(2) { width: 22px; } }
.mm-nav .mm-burger span:nth-child(3) { display: none; }
.mm-nav .mm-burger.open span:nth-child(1) { top: 21.2px; transform: rotate(45deg); }
.mm-nav .mm-burger.open span:nth-child(2) { top: 21.2px; width: 22px; transform: rotate(-45deg); }
/* ── Mobile menu: a cream sheet that unrolls down from under the bar ── */
.mm-menu {
position: fixed;
inset: 0;
z-index: 890;
display: flex;
flex-direction: column;
padding: 84px 24px calc(36px + env(safe-area-inset-bottom, 0px));
background: #F7F3EC;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
clip-path: inset(0 0 100% 0);
visibility: hidden;
pointer-events: none;
transition: clip-path 0.6s var(--mm-easing), visibility 0s linear 0.6s;
}
/* Closed, the menu is also inert (chrome.js), so none of its links are Tab stops. */
.mm-menu.open {
clip-path: inset(0 0 0 0);
visibility: visible;
pointer-events: auto;
transition: clip-path 0.6s var(--mm-easing), visibility 0s linear 0s;
}
/* The link row shows from 1200px up; the menu is never used there. */
@media (min-width: 1200px) {
.mm-menu { display: none !important; }
}
.mm-menu nav {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
/* Rows rise into place one after another as the sheet opens. */
.mm-menu nav > * {
opacity: 0;
transform: translateY(14px);
transition: color 0.2s ease, opacity 0.35s var(--mm-easing), transform 0.6s var(--mm-easing);
}
.mm-menu.open nav > * { opacity: 1; transform: none; }
.mm-menu.open nav > :nth-child(2) { transition-delay: 0s, 0.08s, 0.08s; }
.mm-menu.open nav > :nth-child(3) { transition-delay: 0s, 0.12s, 0.12s; }
.mm-menu.open nav > :nth-child(4) { transition-delay: 0s, 0.16s, 0.16s; }
.mm-menu.open nav > :nth-child(5) { transition-delay: 0s, 0.2s, 0.2s; }
.mm-menu.open nav > :nth-child(6) { transition-delay: 0s, 0.24s, 0.24s; }
.mm-menu.open nav > :nth-child(7) { transition-delay: 0s, 0.28s, 0.28s; }
.mm-menu.open nav > .mm-menu-tools { transition-delay: 0s, 0.32s, 0.32s; }
.mm-menu.open nav > .mm-menu-book { transition-delay: 0s, 0.36s, 0.36s; }
.mm-menu nav > a,
.mm-menu .mm-menu-acc {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%;
padding: 17px 2px;
margin: 0;
border: 0; border-bottom: 1px solid rgba(28,25,23,0.09); border-radius: 0;
background: none;
font-family: inherit;
font-size: 22px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.2;
text-transform: none; text-align: left; text-decoration: none;
color: #1C1917;
cursor: pointer;
transition: color 0.2s ease, opacity 0.35s var(--mm-easing), transform 0.6s var(--mm-easing);
}
.mm-menu nav > a:hover, .mm-menu nav > a.active, .mm-menu .mm-menu-acc:hover { color: #735A1C; }
.mm-menu .mm-menu-acc svg { flex: none; width: 12px; height: 8px; opacity: 0.6; transition: transform 0.4s var(--mm-easing); }
.mm-menu .mm-menu-group { width: 100%; }
.mm-menu .mm-menu-group.open .mm-menu-acc { color: #735A1C; border-bottom-color: transparent; }
.mm-menu .mm-menu-group.open .mm-menu-acc svg { transform: rotate(180deg); opacity: 1; }
.mm-menu .mm-menu-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--mm-easing);
border-bottom: 1px solid rgba(28,25,23,0.09);
}
.mm-menu .mm-menu-group.open .mm-menu-panel { grid-template-rows: 1fr; }
.mm-menu .mm-menu-panel > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.4s; }
.mm-menu .mm-menu-group.open .mm-menu-panel > div { padding-bottom: 12px; visibility: visible; transition-delay: 0s; }
/* Pages style bare "nav a" (uppercase, underline pseudo-element); the menu links opt out. */
.mm-menu nav a::after, .mm-menu nav a::before { display: none !important; }
.mm-menu .mm-menu-panel a {
display: block;
font-family: inherit;
font-size: 16.5px; font-weight: 400; letter-spacing: 0.005em; line-height: 1.3; text-transform: none;
color: #57504A;
text-decoration: none;
text-align: left;
padding: 10px 2px 10px 14px;
border-left: 1px solid rgba(196,164,90,0.45);
transition: color 0.2s ease, border-color 0.2s ease, padding 0.3s var(--mm-easing);
}
.mm-menu .mm-menu-panel a:hover, .mm-menu .mm-menu-panel a.active { color: #735A1C; border-left-color: #735A1C; padding-left: 18px; }
.mm-menu .mm-menu-panel a.mm-dd-all { color: #735A1C; font-weight: 500; }
/* Legacy group markup (label + links) from an older paste of nav.html still renders. */
.mm-menu .mm-menu-label {
display: block;
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: #735A1C; font-weight: 600;
padding: 14px 0 4px;
}
.mm-menu .mm-menu-group > a { display: block; font-size: 16.5px; padding: 10px 2px; text-align: left; color: #57504A; text-decoration: none; }
/* Tools row (#navToolsMobile, first child of the mobile nav, shown above Book
now): chrome.js and account.js move the children of #navTools here below 1024px. */
.mm-menu .mm-menu-tools {
width: 100%; order: 5;
display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px;
padding: 24px 0 0;
}
.mm-menu .mm-menu-tools:empty { display: none; }
.mm-menu .mm-menu-tools .mm-tools { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.mm-menu nav a.mm-menu-book {
order: 6;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 54px;
margin-top: 24px;
padding: 0 28px;
border: 0;
border-radius: 999px;
background: #C4A45A;
color: #0B0A08;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
box-shadow: 0 14px 30px -16px rgba(115,90,28,0.8);
}
.mm-menu nav a.mm-menu-book:hover { background: #B8963A; color: #0B0A08; }
/* A leftover close button from an older paste of nav.html stays hidden; the burger X closes the menu. */
.mm-menu .mm-menu-close { display: none; }
/* ── First view of a visit: the bar settles in ────────────────────────
_chrome/head.html adds html.mm-intro before first paint on the first page
of a browser session (sessionStorage "mm.intro"); chrome.js drops it once
the entrance has played. "backwards" fill leaves nothing behind, so the
home page brand and Book now keep their own hidden states. */
html.mm-intro header.mm-nav .mm-brand,
html.mm-intro header.mm-nav .mm-dd,
html.mm-intro header.mm-nav .mm-right > * {
animation: mmNavIn 0.8s var(--mm-easing) backwards;
}
html.mm-intro header.mm-nav .mm-brand { animation-delay: 0.05s; }
html.mm-intro header.mm-nav .mm-dd:nth-child(1) { animation-delay: 0.12s; }
html.mm-intro header.mm-nav .mm-dd:nth-child(2) { animation-delay: 0.17s; }
html.mm-intro header.mm-nav .mm-dd:nth-child(3) { animation-delay: 0.22s; }
html.mm-intro header.mm-nav .mm-dd:nth-child(4) { animation-delay: 0.27s; }
html.mm-intro header.mm-nav .mm-dd:nth-child(5) { animation-delay: 0.32s; }
html.mm-intro header.mm-nav .mm-right > :nth-child(1) { animation-delay: 0.38s; }
html.mm-intro header.mm-nav .mm-right > :nth-child(2) { animation-delay: 0.44s; }
html.mm-intro header.mm-nav .mm-right > :nth-child(3) { animation-delay: 0.44s; }
/* ── Footer ───────────────────────────────────────────────────────── */
footer.mm-foot {
background: var(--mm-dark-deep);
color: rgba(255,255,255,0.38);
padding: 72px 80px 40px;
border-top: 1px solid rgba(196,164,90,0.12);
margin: 0;
position: relative;
text-align: left;
font-size: 13px;
line-height: 1.6;
}
footer.mm-foot::before {
content: '';
position: absolute; top: 0; left: 80px; right: 80px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(196,164,90,0.3), transparent);
}
.mm-foot .mm-foot-inner { max-width: 1180px; margin: 0 auto; }
.mm-foot .mm-fgrid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.05fr 1.25fr;
gap: 40px;
margin-bottom: 56px;
align-items: start;
}
.mm-foot .mm-fbrand { display: flex; flex-direction: column; align-items: flex-start; padding-right: 24px; }
.mm-foot .mm-fbrand a { display: block; line-height: 0; margin-bottom: 22px; transition: opacity 0.3s var(--mm-easing), transform 0.4s var(--mm-easing); }
.mm-foot .mm-fbrand a:hover { opacity: 0.85; transform: translateY(-3px); }
.mm-foot .mm-fbrand img { display: block; height: 26px; width: auto; }
.mm-foot .mm-fbrand p {
font-size: 13px; line-height: 1.85; color: rgba(255,255,255,0.6);
font-weight: 300; max-width: 300px; margin: 0;
}
/* Column titles are h2 and the Portals sub-heading is h3 (the page keeps its own
h1 / h2 outline); the look comes from the class, so any page rule on bare
h2 / h3 is reset here. h4 / h5 stay for pages stamped before chrome v6. */
.mm-foot .mm-fhead, .mm-foot h4 {
display: block;
font-family: inherit;
font-size: 9.5px; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; text-align: left;
color: var(--mm-gold-light); margin: 0 0 22px; padding: 0; font-weight: 600;
text-wrap: wrap; background: none; border: 0;
}
.mm-foot .mm-fsub {
display: block;
font-family: inherit;
font-size: 9px; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; text-align: left;
color: rgba(255,255,255,0.58); margin: 22px 0 12px; padding: 0; font-weight: 600;
text-wrap: wrap; background: none; border: 0;
}
.mm-foot .mm-fhead::before, .mm-foot .mm-fhead::after,
.mm-foot .mm-fsub::before, .mm-foot .mm-fsub::after { content: none; }
.mm-foot .mm-fcol a {
display: block; font-size: 13px; color: rgba(255,255,255,0.64);
text-decoration: none; margin: 0 0 12px; font-weight: 300;
transition: color 0.3s var(--mm-easing), transform 0.3s var(--mm-easing);
}
.mm-foot .mm-fcol a:hover { color: var(--mm-gold-light); transform: translateX(4px); }
.mm-foot .mm-fcol p { margin: 0 0 12px; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.64); }
.mm-foot .mm-ftel { color: rgba(255,255,255,0.82) !important; font-weight: 400 !important; }
.mm-foot .mm-fcities { color: rgba(255,255,255,0.58); letter-spacing: 0.02em; }
.mm-foot .mm-fsocial { display: flex; gap: 10px; margin: 4px 0 22px; }
.mm-foot .mm-ficon {
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid rgba(196,164,90,0.22);
display: grid !important; place-items: center;
color: rgba(255,255,255,0.64); text-decoration: none;
line-height: 0; margin: 0 !important;
transition: border-color 0.3s var(--mm-easing), color 0.3s var(--mm-easing), transform 0.3s var(--mm-spring), background 0.3s;
}
.mm-foot .mm-ficon svg { display: block; width: 15px; height: 15px; }
.mm-foot .mm-ficon:hover { border-color: var(--mm-gold-light); color: var(--mm-gold-light); transform: translateY(-3px) !important; background: rgba(196,164,90,0.08); }
.mm-foot .mm-fapps-label {
display: block;
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255,255,255,0.58); margin: 0 0 10px; font-weight: 600;
}
.mm-foot .mm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-foot .mm-badge {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 12px;
border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
color: rgba(255,255,255,0.64);
font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
white-space: nowrap;
}
.mm-foot .mm-badge svg { width: 14px; height: 14px; }
.mm-foot .mm-fcol a.mm-badge { display: inline-flex; margin: 0; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.64); text-decoration: none; transform: none; transition: border-color 0.3s var(--mm-easing), color 0.3s var(--mm-easing), background 0.3s; }
.mm-foot .mm-fcol a.mm-badge:hover, .mm-foot .mm-fcol a.mm-badge:focus-visible { transform: none; border-color: var(--mm-gold-light); color: var(--mm-gold-light); background: rgba(196,164,90,0.08); }
.mm-foot .mm-badge small { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mm-gold-light); font-weight: 600; }
.mm-foot .mm-fapps-soon {
display: inline-block; margin-top: 10px;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--mm-gold-light); font-weight: 600;
}
.mm-foot .mm-fbottom {
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 28px;
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mm-foot .mm-fbottom p { font-size: 11px; color: rgba(255,255,255,0.58); letter-spacing: 0.06em; margin: 0; }
.mm-foot .mm-flegal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
/* The legal row looks the same on every page (most pages already drew it in
uppercase through their own bare "nav a" rule; the chrome now says so itself). */
.mm-foot .mm-flegal a,
.mm-foot .mm-flegal .mm-fcookie {
font-family: inherit;
font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
text-decoration: none; transition: color 0.3s var(--mm-easing);
}
/* "Cookie settings" is a button (it opens the consent dialog) dressed as a legal link. */
.mm-foot .mm-flegal .mm-fcookie {
display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
text-align: left;
}
.mm-foot .mm-flegal a:hover, .mm-foot .mm-flegal .mm-fcookie:hover { color: var(--mm-gold-light); }
.mm-foot .mm-flegal a:focus-visible, .mm-foot .mm-flegal .mm-fcookie:focus-visible {
color: var(--mm-gold-light); outline: 2px solid var(--mm-gold-light); outline-offset: 3px; border-radius: 2px;
}
/* ── Cookie consent: banner + preferences dialog (consent.js) ──────────
Light by default, dark under html[data-theme="dark"]. Accept all and Reject
all carry the same weight. Measured: light text #1C1917 on #FFFFFF 17.5:1,
muted #5C5650 7.2:1, gold link #735A1C 6.6:1; dark text #F4EFE6 on #15140F
16.1:1, muted #B3AA99 8.0:1, gold #C9A961 8.2:1; #0B0A08 on the gold
button 8.3:1; switch tracks 4.7:1 (light off) and 4.8:1 (dark off). */
.mm-consent {
--mmc-bg: #FFFFFF;
--mmc-text: #1C1917;
--mmc-muted: #5C5650;
--mmc-gold: #735A1C;
--mmc-line: rgba(28,25,23,0.14);
--mmc-ghost: rgba(28,25,23,0.34);
--mmc-ghost-hover: rgba(115,90,28,0.08);
--mmc-fill: #C4A45A;
--mmc-fill-hover: #B8963A;
--mmc-fill-text: #0B0A08;
--mmc-track: #7A736C;
--mmc-track-on: #735A1C;
--mmc-knob: #FFFFFF;
--mmc-focus: #735A1C;
--mmc-shadow: 0 18px 48px rgba(28,25,23,0.18), 0 2px 8px rgba(28,25,23,0.08);
--mmc-backdrop: rgba(12,11,9,0.55);
font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] .mm-consent {
--mmc-bg: #15140F;
--mmc-text: #F4EFE6;
--mmc-muted: #B3AA99;
--mmc-gold: #C9A961;
--mmc-line: rgba(244,239,230,0.14);
--mmc-ghost: rgba(244,239,230,0.36);
--mmc-ghost-hover: rgba(201,169,97,0.1);
--mmc-track: #8A8174;
--mmc-track-on: #C9A961;
--mmc-knob: #0B0A08;
--mmc-focus: #C9A961;
--mmc-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,169,97,0.18);
--mmc-backdrop: rgba(0,0,0,0.7);
}
.mm-consent, .mm-consent * { box-sizing: border-box; }
.mm-consent:focus { outline: none; }
.mm-consent [hidden] { display: none !important; }
.mm-consent .mm-c-sr {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@keyframes mmConsentIn {
from { transform: translateY(12px); }
to { transform: translateY(0); }
}
.mm-consent .mm-cb {
position: fixed;
left: 20px;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
z-index: 880;
width: min(560px, calc(100% - 40px));
max-height: calc(100vh - 120px);
overflow-y: auto;
display: flex; flex-direction: column; gap: 16px;
padding: 22px 22px 20px;
background: var(--mmc-bg);
color: var(--mmc-text);
border: 1px solid var(--mmc-line);
border-radius: 20px;
box-shadow: var(--mmc-shadow);
font-size: 14px; line-height: 1.55; text-align: left;
animation: mmConsentIn 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.mm-consent .mm-cb-body > * { margin: 0; }
.mm-consent .mm-cb-title {
font-size: 16px; font-weight: 600; letter-spacing: 0.01em; color: var(--mmc-text);
margin: 0 0 6px;
}
.mm-consent .mm-cb-text { color: var(--mmc-muted); font-size: 14px; font-weight: 400; }
.mm-consent .mm-cb-text a, .mm-consent .mm-cp a {
color: var(--mmc-gold); font-weight: 500;
text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.mm-consent .mm-c-gpc {
margin: 10px 0 0; padding: 10px 12px;
border-radius: 12px; border: 1px solid var(--mmc-line);
color: var(--mmc-text); font-size: 13px; line-height: 1.5;
}
.mm-consent .mm-cb-actions, .mm-consent .mm-cp-actions {
display: flex; flex-wrap: wrap; gap: 10px;
}
.mm-consent .mm-cbtn {
flex: 1 1 0;
min-width: max-content;
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; margin: 0; padding: 10px 18px;
border-radius: 50px;
font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
text-transform: none; text-decoration: none; white-space: nowrap;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mm-consent .mm-cbtn-fill { background: var(--mmc-fill); color: var(--mmc-fill-text); border: 1px solid var(--mmc-fill); }
.mm-consent .mm-cbtn-fill:hover { background: var(--mmc-fill-hover); border-color: var(--mmc-fill-hover); color: var(--mmc-fill-text); }
.mm-consent .mm-cbtn-ghost { background: transparent; color: var(--mmc-text); border: 1px solid var(--mmc-ghost); }
.mm-consent .mm-cbtn-ghost:hover { background: var(--mmc-ghost-hover); border-color: var(--mmc-gold); color: var(--mmc-text); }
.mm-consent .mm-cbtn:focus-visible,
.mm-consent .mm-cp-x:focus-visible,
.mm-consent a:focus-visible,
.mm-consent .mm-switch:focus-visible {
outline: 2px solid var(--mmc-focus);
outline-offset: 3px;
}
/* Preferences dialog (native