/* ============================================================================
The Terminal — Landing Page
----------------------------------------------------------------------------
A standalone marketing page, built to the AAH-Website Figma
(node 783-162). It is deliberately NOT part of the Angular storefront, but
it reuses that project's brand system verbatim — the same three typefaces and
the same palette tokens lifted from projects/terminal/src/styles.scss — so
the two read as one brand.
Art-deco line-work (the fan behind the story, the radiating pattern behind
the lounges, the footer border) is drawn inline as SVG rather than shipped as
images, so it stays crisp at any size and recolours with the theme.
============================================================================ */
/* ── Fonts ───────────────────────────────────────────────────────────────
Confirmed from the Figma (node 783:162): body copy is Inter, and every
heading/eyebrow display line is "Parking" (a condensed Art-Deco face).
------------------------------------------------------------------------- */
/* Inter — the design's body face (self-hosted, from Google Fonts). */
@font-face {
font-family: 'Inter';
src: url('assets/fonts/inter-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('assets/fonts/inter-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('assets/fonts/inter-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
/* Parking — the display face for every heading. A COMMERCIAL font (Latinotype),
licensed for this site and shipped as parking.woff2. */
@font-face {
font-family: 'Parking';
src: url('assets/fonts/parking.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
/* The design uses only Parking (display) + Inter (everything else). The old
storefront faces (GR-Milesons, Pride, Futura) aren't in this design and have
been dropped. */
/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
--ink: #16110b; /* primary dark ground */
--ink-2: #1b140d; /* input / raised dark */
--cream: #fff2e0; /* the story / contact card (sampled from design) */
--stone: #e9e5df; /* the multiverse band (a chosen neutral, warm) */
--white: #ffffff;
--red: #ef4623; /* the accent — used once, loudly */
--maroon: #580903; /* footer */
--gold: #f6b968; /* button / highlight gold */
--gold-nav: #f8ba6e; /* nav gold */
--nav-text: #f5debd; /* nav links + underline + button (from Figma) */
--eyebrow: #bb834c; /* eyebrow bronze (sampled from design) */
--gold-line: #926834; /* deco line-work / borders */
--bg-line: #352919; /* hairline on dark */
/* Headings AND body on the cream bands are the same near-black ink in the
design — not a separate brown. Sampled at #16110b. */
--text-dark: #16110b; /* text on cream / stone */
--text-muted: #16110b;
--maxw: 1440px; /* matches the Figma artboard width */
--gutter: clamp(20px, 5vw, 80px);
--f-display: 'Parking', 'Playfair Display', Georgia, serif;
--f-body: 'Inter', system-ui, -apple-system, sans-serif;
/* Type scale — pinned to the Figma's exact px (design is 1440px wide),
kept fluid below that so it reads on mobile.
eyebrow/body 16px · hero subcopy 20px · lounge title 32px
section heading 42px · hero h1 72px */
--step--1: clamp(0.8rem, 0.72rem + 0.3vw, 0.875rem); /* ~14px small caps */
--step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1rem); /* 16px body */
--step-1: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); /* 20px hero sub */
--step-2: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); /* 32px lounge title*/
--step-hd: clamp(1.9rem, 1.3rem + 2.4vw, 2.625rem); /* 42px heading */
--step-3: clamp(2.4rem, 1.4rem + 4vw, 4.5rem); /* 72px hero h1 */
}
/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scroll-padding-top offsets anchor jumps by the sticky nav's height, so a
section lands just below the nav instead of behind it. */
html { scroll-behavior: smooth; scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
font-family: var(--f-body);
font-size: var(--step-0);
line-height: 1.6;
color: var(--white);
background: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ── Shared building blocks ──────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }
.eyebrow {
font-family: var(--f-body);
font-weight: 400; /* Figma: Inter Regular */
font-size: var(--step-0); /* 16px, same as body */
letter-spacing: .18em;
text-transform: uppercase;
color: var(--eyebrow); /* bronze on cream — the common case */
}
h1, h2, h3 { font-weight: 400; line-height: 1.02; text-wrap: balance; }
.display {
font-family: var(--f-display); /* Parking, per the Figma */
letter-spacing: -0.02em; /* the design's tracking */
}
h2.display { font-size: var(--step-hd); } /* 42px section headings */
h3.display { font-size: var(--step-2); } /* 32px lounge titles */
/* Section rhythm — the Figma bands are generous (the story band alone is ~684px
for a short block of copy), so the vertical padding is roomy. */
.section { padding-block: clamp(72px, 12vw, 190px); }
/* Outlined pill button (hero, nav).
On hover a gold fill sweeps in from the left (a pseudo-element behind the
label) and the button lifts slightly — more crafted than a flat colour swap. */
.btn-ghost {
position: relative;
display: inline-block;
padding: .85em 2em;
border: 1.5px solid currentColor;
font-size: var(--step-0);
letter-spacing: .02em;
background: transparent;
overflow: hidden;
isolation: isolate;
transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-ghost::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--gold);
transform: scaleX(0); transform-origin: left center;
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
color: var(--text-dark);
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(246, 185, 104, .22);
}
.btn-ghost:hover::before, .btn-ghost:focus-visible::before { transform: scaleX(1); }
.btn-ghost:active { transform: translateY(0); }
/* Solid red button (contact). Lifts with a warm glow on hover, and a soft gold
sheen sweeps diagonally across it. */
.btn-solid {
position: relative;
display: inline-block;
padding: .8em 2.4em;
background: var(--red);
color: var(--white);
border: none;
letter-spacing: .02em;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-solid::after {
content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(246, 185, 104, .45), transparent);
transform: skewX(-18deg);
transition: left .55s ease;
}
.btn-solid:hover {
filter: brightness(1.06);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(239, 70, 35, .32);
}
.btn-solid:hover::after { left: 120%; }
.btn-solid:active { transform: translateY(0); }
/* Round carousel arrow */
/* Solid white circle with a thin bronze arrow, per the Figma. flex-shrink:0 and
aspect-ratio:1 guarantee it stays a perfect circle inside any flex/grid parent. */
.c-arrow {
flex: 0 0 auto;
width: 54px; height: 54px; aspect-ratio: 1;
display: grid; place-items: center;
border-radius: 999px;
border: none;
background: #fff;
color: var(--eyebrow); /* bronze arrow */
box-shadow: 0 2px 10px rgba(0,0,0,.18);
transition: background-color .2s, color .2s, transform .15s;
}
.c-arrow:hover { background: var(--gold); color: var(--text-dark); transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.c-arrow:active { transform: scale(.96); }
.c-arrow svg { width: 20px; height: 20px; display: block; transition: transform .2s ease; }
/* The arrow icon nudges in its travel direction on hover. */
.c-prev:hover svg { transform: translateX(-3px); }
.c-next:hover svg { transform: translateX(3px); }
/* ══ 1. NAV ═══════════════════════════════════════════════════════════════
Proportions taken from the Figma: a 140px-tall black bar, the wordmark as
vector artwork (~202px), the links in Inter with wide 68px gaps, and the
"Enquire Now" button hairline-outlined. */
.nav {
position: sticky; top: 0; z-index: 50;
background: #000;
}
.nav__inner {
/* Nav items bottom-align with the baseline of the big TERMINAL wordmark, so the
active-item underline sits low in the bar, level with the wordmark's base. */
display: flex; align-items: flex-end; gap: clamp(1.5rem, 4vw, 3.5rem);
min-height: 140px;
padding-bottom: 22px;
}
/* Wordmark and the right (EN|AR + Enquire) cluster take equal flex space so the
nav links center exactly between them. */
.wordmark { display: inline-flex; align-items: flex-end; flex: 1 1 0; }
/* Shift ONLY the visible logo left toward the page edge (over the left carousel
button), into and past the .wrap gutter. The wordmark keeps its slot in the
flex row (transform doesn't affect layout), so the links, EN|AR, and button
stay exactly where they were. */
.wordmark img {
transform: translateX(calc(-1 * var(--gutter) + 20px));
}
.wordmark img {
width: clamp(150px, 14vw, 202px); height: auto; display: block;
}
.nav__links {
display: flex; align-items: flex-end; gap: clamp(1.4rem, 3.5vw, 3.75rem);
list-style: none; margin-inline: auto; padding: 0;
}
.nav__links a {
font-family: var(--f-body);
font-size: 1rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--nav-text);
padding-bottom: 1.2em; /* underline low in the panel, but clear of the edge */
border-bottom: 3px solid transparent; /* thicker so it reads clearly */
transition: color .2s, border-color .2s;
}
.nav__links a:hover { color: var(--gold-nav); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--nav-text); }
/* The EN|AR + Enquire cluster stays vertically centred, not bottom-aligned. */
/* Bottom-aligned with the wordmark + menu items (not centred). */
.nav__right { display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(1rem, 2vw, 1.75rem); flex: 1 1 0; }
/* EN|AR stacks ON TOP of the Enquire button, both right-aligned. */
.nav__cta { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.nav .btn-ghost {
padding: .8em 1.6em;
border-width: 1px;
border-color: var(--nav-text);
color: var(--nav-text);
font-size: .95rem;
letter-spacing: 0;
white-space: nowrap;
}
/* On hover the gold fill sweeps in, so the label must flip to dark for contrast
— same as "Explore the venue". The .nav override above would otherwise keep it
cream (cream-on-gold reads as broken). */
.nav .btn-ghost:hover, .nav .btn-ghost:focus-visible { color: var(--text-dark); }
.nav__burger { display: none; background: none; border: 0; padding: .3rem; }
.nav__burger span { display: block; width: 26px; height: 2px; background: var(--gold-nav); margin: 5px 0; }
/* ══ 2. HERO ══════════════════════════════════════════════════════════════ */
.hero {
position: relative;
width: 100%;
/* Fill width, grow height: the facade ![]()
below is a flow element at 100%
width, so its natural aspect (Figma node 1:25, 1440×808) drives the hero's
height. The whole building always shows edge-to-edge, nothing cropped; the
section simply gets taller on wider screens. */
text-align: center;
color: #fff;
overflow: hidden;
background: #0a0f1c;
}
.hero__bg {
display: block;
width: 100%; height: auto; /* full width; height follows the image aspect */
}
/* Text sits in the lower-middle of the hero, over the facade — matching Figma,
where the H1 baseline is ~55% down and the button ~68% down. Anchored to the
vertical centre with a nudge down so it stays put as the hero grows taller. */
.hero__content {
position: absolute; left: 50%; top: 70%;
transform: translate(-50%, -50%);
width: 100%;
}
/* Ambient dust-mote canvas — over the image, under the text. `screen` makes the
gold specks glow against the dark hero. */
.hero__motes {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
mix-blend-mode: screen;
opacity: .9;
}
.hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
/* Figma (node 1:26): bottom-up dark gradient — 0.8 black near the bottom,
fading to transparent at the top. */
background: linear-gradient(2deg, rgba(0,0,0,.8) 17%, rgba(0,0,0,0) 100%);
}
/* Wide enough that the longer headline "ENTERTAINMENT REIMAGINED" stays on one
line at the design width (Figma H2 is 847px), matching the design. */
.hero__content { z-index: 2; padding: var(--gutter); max-width: 980px; }
/* Figma hero button (node 1:27): 1px border + text in warm cream #F5DEBD. */
.hero .btn-ghost { color: #f5debd; border-width: 1px; }
.hero h1 {
font-family: var(--f-display);
font-size: var(--step-3);
letter-spacing: -0.02em; /* Parking's own tracking */
color: #fcefdd; /* Figma: warm cream, not pure white */
margin-bottom: .55em;
text-shadow: 0 2px 30px rgba(0,0,0,.5);
white-space: nowrap; /* one line on desktop, as in Figma */
}
.hero p {
font-size: var(--step-1);
font-weight: 400;
color: #fff; /* Figma: pure white subcopy */
/* Two lines, as the design renders it. */
max-width: 58ch; margin: 0 auto 2.4em;
text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
/* ══ 3. STORY ═════════════════════════════════════════════════════════════ */
.story {
background: var(--cream);
color: var(--text-dark);
text-align: center;
}
.story .eyebrow { color: var(--eyebrow); }
/* Heading is two lines — the
sets the break, so the box must be wide
enough that "Extraordinary Experiences" does NOT wrap again. */
.story h2 { color: var(--ink); margin: 1.1rem auto .9rem; max-width: none; }
.story p { max-width: 76ch; margin: 0 auto; color: var(--text-dark); }
/* The fan is the real Figma vector (fan.svg); its stroke colour is baked in. */
.deco-fan { width: clamp(96px, 11vw, 150px); height: auto; margin: clamp(28px,5vw,56px) auto 0; display: block; }
/* ══ 4. HIGHLIGHTS ════════════════════════════════════════════════════════ */
.highlights { background: var(--ink); }
.highlights__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.highlights .eyebrow { color: var(--gold-nav); }
.highlights h2 { color: var(--cream); margin-top: .8rem; max-width: none; } /* Figma: #FFF2E0, not pure white */
.tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.6vw, 22px);
}
.tile {
/* Figma tile: soft cream-to-tan gradient, 16px padding all round. */
background: linear-gradient(155deg, #fcefdd 0%, #f0dcbb 55%, #e6cda2 100%);
color: var(--text-dark);
padding: 24px 16px;
min-height: 230px;
display: flex; flex-direction: column; align-items: center;
text-align: center;
gap: 1.1rem;
transition: transform .3s ease, box-shadow .3s ease;
}
/* Hover: the tile lifts with a soft gold glow and its icon nudges up. */
.tile:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(246, 185, 104, .35);
}
.tile__icon { transition: transform .3s ease; }
.tile:hover .tile__icon { transform: translateY(-3px) scale(1.06); }
/* Scroll-reveal: tiles start faded + lowered, then rise into place when the grid
enters the viewport. JS adds .is-in; the per-tile stagger is set inline. */
.tiles .tile {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1),
box-shadow .3s ease;
}
.tiles.is-in .tile {
opacity: 1;
transform: translateY(0);
}
/* Hover still works once revealed (the .is-in transform is 0, so hover's -6px
applies cleanly). */
.tiles.is-in .tile:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
.tiles .tile { opacity: 1; transform: none; }
}
/* Real Figma icons (assets/img/icons/*.svg) — varying aspect ratios, so fix the
HEIGHT and let width scale, keeping their true proportions. */
.tile__icon { height: 58px; display: flex; align-items: center; justify-content: center; margin-top: .4rem; }
.tile__icon img { height: 100%; width: auto; display: block; }
/* Captions sit directly under the icon (top-aligned), so they start at the same
height across all tiles regardless of text length. */
.tile p { font-size: var(--step--1); line-height: 1.5; color: var(--text-dark); }
/* ══ 5. SIGNATURE (carousel over full-bleed photo) ════════════════════════ */
.signature { position: relative; color: #fff; }
.sig-slide {
position: relative;
height: 760px; /* Figma: 760px flat, not viewport-based */
min-height: 0;
display: flex;
overflow: hidden; /* clip the sliding track */
}
/* Sliding track: a horizontal row of full-width image layers, translated by JS. */
.sig-track {
position: absolute; inset: 0;
display: flex;
will-change: transform;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.sig-track.is-jumping { transition: none; }
.sig-track__slide {
flex: 0 0 100%;
height: 100%;
background-size: cover; background-position: center;
}
/* The Figma has NO overlay on this image (full brightness). A very light
bottom-only gradient keeps the white title legible where it sits, without
dimming the image the way the previous full overlay did. */
.sig-slide::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
/* The design SPLITS the two: eyebrow pinned near the top, the title near the
bottom — not grouped. A full-height column with space-between does that. */
.sig-slide__body {
position: relative; z-index: 2;
padding: clamp(40px,7vw,90px) var(--gutter);
max-width: var(--maxw); margin-inline: auto; width: 100%;
display: flex; flex-direction: column; justify-content: space-between;
}
.sig-slide .eyebrow { color: #efe6d6; }
.sig-slide h2 { color: #fff; max-width: 20ch; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.signature .c-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.signature .c-prev { left: clamp(20px, 4vw, 72px); }
.signature .c-next { right: clamp(20px, 4vw, 72px); }
/* ══ 6. GLIMPSE (center-focused image carousel) ═══════════════════════════ */
.glimpse { background: var(--white); color: var(--text-dark); }
.glimpse__head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.glimpse .eyebrow { color: var(--eyebrow); }
.glimpse h2 { color: var(--ink); margin-top: .7rem; }
/* The carousel is wider than the text column so the centre image can dominate
with slivers of the neighbours showing, as in the Figma. It's a transform-
driven conveyor (no scroll-snap): the track is a flex row translated by JS,
with cloned slides on both ends for a seamless continuous loop. */
.glimpse__stage { position: relative; max-width: none; padding-inline: 0; }
/* The viewport clips the conveyor; arrows sit in .glimpse__stage, outside it. */
.glimpse__viewport { overflow: hidden; }
.glimpse__track {
display: flex; gap: clamp(14px, 2vw, 26px);
align-items: flex-start;
padding-block: 6px;
will-change: transform;
transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
/* Figma: centre image 997x624 at the top; side images 933x584, nudged down 20px.
The centred one fills the track height; the others are shorter and offset —
the featured-centre effect. */
/* EVERY slide occupies the SAME layout slot (the featured size). This keeps
offsetLeft uniform across all slides, so the clone→original re-anchor shifts by
an exactly constant set-width and the seam never flickers. The "side vs centre"
look is done purely with transform: scale()/translateY — which do NOT affect
layout — so a de-emphasised neighbour never changes any geometry. */
.glimpse__track figure {
flex: 0 0 min(69vw, 997px);
aspect-ratio: 997 / 624;
overflow: hidden;
transform-origin: center bottom;
transform: scale(.9376) translateY(3%); /* side: 933/997 ≈ shorter, sits lower */
transition: transform .4s ease;
}
.glimpse__track figure.is-center {
transform: scale(1) translateY(0); /* centre: full size, top-aligned */
}
.glimpse__track img { width: 100%; height: 100%; object-fit: cover;
transform: scale(1); transition: transform .5s ease; }
/* The centred image zooms in a touch once it arrives in the middle. */
.glimpse__track figure.is-center img { transform: scale(1.06); }
/* During the seamless clone→original hand-off, freeze ALL slide/image transitions
so nothing (the featured-zoom or the scale) replays on the swapped element —
that replay was the visible flicker on the seam. Cleared one frame later. */
.glimpse__track.is-jumping,
.glimpse__track.is-jumping figure,
.glimpse__track.is-jumping img { transition: none !important; }
.glimpse .c-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; color: var(--ink); border-color: rgba(20,16,11,.4); background: rgba(255,255,255,.75); }
.glimpse .c-arrow:hover { color: var(--text-dark); }
.glimpse .c-prev { left: clamp(20px, 4vw, 72px); }
.glimpse .c-next { right: clamp(20px, 4vw, 72px); }
/* ══ 7. LOUNGES (light band, deco line-work behind) ═══════════════════════ */
.lounges { position: relative; background: var(--white); color: var(--text-dark); overflow: hidden; }
/* Real Figma deco vector (its bronze stroke is baked in). Sits faint behind the
lounge content, centred and covering the band. */
.lounges__deco {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: .55; pointer-events: none;
}
.lounges .wrap { position: relative; z-index: 1; }
.lounges__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.lounges .eyebrow { color: var(--eyebrow); }
.lounges h2 { color: var(--ink); margin-top: .6rem; }
.lounge-row {
display: grid; grid-template-columns: 1.15fr .85fr;
align-items: center; gap: clamp(28px, 5vw, 80px);
margin-block: clamp(28px, 5vw, 64px);
}
.lounge-row.reverse { grid-template-columns: .85fr 1.15fr; }
.lounge-row.reverse .lounge-row__media { order: 2; }
/* Both lounges are LEFT-aligned in the Figma — the reverse row only swaps the
image to the right, it does NOT right-align the text. */
.lounge-row.reverse .lounge-row__text { order: 1; text-align: left; }
.lounge-row__media { aspect-ratio: 1.78 / 1; overflow: hidden; } /* Figma: ~795 x 445 */
.lounge-row__media img { width: 100%; height: 100%; object-fit: cover; }
.lounge-row__text h3 { color: var(--ink); }
/* Figma divider: 142px wide, 1px, bronze #BB834C — left-aligned. */
.lounge-row__text .rule { width: 142px; height: 1px; background: var(--eyebrow); margin: .9rem 0 1.1rem; }
.lounge-row__text p { max-width: 42ch; color: var(--text-dark); }
/* ══ 8. MULTIVERSE (masterplan) ═══════════════════════════════════════════ */
.multiverse { background: var(--stone); color: var(--text-dark); }
.multiverse .eyebrow { color: var(--eyebrow); }
.multiverse h2 { color: var(--ink); margin-top: .7rem; max-width: 14ch; }
/* Figma lays the heading (left) and the ecosystem paragraph (right) side by side,
top-aligned, above the full-width masterplan. */
.multiverse__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(2rem, 8vw, 8rem);
align-items: start;
}
/* Ecosystem intro paragraph (Figma node 74:1309). */
/* Match Figma node 74:1309 exactly: Inter 400, 16px, tight 1.12 leading, near-
black, -0.02em tracking, wrapping at ~509px (≈6 lines). */
.multiverse__body {
color: #16110b;
max-width: 509px;
font-family: var(--f-body);
font-size: 16px;
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.02em;
/* Drop the paragraph down so its first line sits under the eyebrow, level with
the heading, rather than aligned to the eyebrow row. */
margin-top: 2.4rem;
}
.multiverse__figure { margin-top: clamp(2rem, 5vw, 3.5rem); position: relative; }
.multiverse__figure img { width: 100%; display: block; }
/* ══ 9. ACCESSIBILITY & CONNECTIVITY (Figma node 1:564) ═══════════════════
Two columns: a light-grey legend panel on the left, the Dubai map on the
right (an SVG with routes + address card baked in). */
/* The section is FULL WIDTH so its white background fills the page edge-to-edge;
the panel + map grid is centred within it at the content width. */
.access {
width: 100%; background: #fff;
padding: clamp(40px, 6vw, 80px) var(--gutter);
}
.access__inner {
display: grid; grid-template-columns: 386fr 843fr; gap: 0; /* columns flush */
align-items: stretch;
max-width: var(--maxw); margin-inline: auto;
}
/* Both columns take the height of the taller one (the map). The panel content
sits at the top; the map fills the column and shows fully via the aspect box. */
.access__panel {
background: #f3f3f3; color: #16110b;
padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
display: flex; flex-direction: column;
}
.access__title { color: #16110b; font-size: var(--step-hd); text-transform: uppercase; }
.access__body { color: #16110b; font-size: .95rem; line-height: 1.32; margin-top: 1.2rem; max-width: 30ch; }
.access__legend { list-style: none; padding: 0; margin: clamp(2rem,4vw,3rem) 0 0; display: flex; flex-direction: column; gap: 1.2rem; }
.access__legend--rail { margin-top: 2rem; }
.access__legend li { display: flex; align-items: center; gap: 1rem; font-size: .95rem; color: #16110b; }
/* Legend swatches are the real Figma line/rail graphics (assets/img/legend/*). */
.lg { flex: 0 0 auto; width: 56px; height: auto; display: block; object-fit: contain; }
.lg--rail { width: 56px; }
/* The map fills the column (stretches to the panel's height) so there's no
leftover white below it. It's the SVG at natural width, top-anchored, so the
whole coastline + both airports + routes stay visible; only a little of the
lower margin is trimmed. */
.access__map { position: relative; align-self: stretch; overflow: hidden; background: #eef1f3; }
.access__map img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Address card overlaid bottom-right of the map (Figma node 1:792). */
.access__card {
position: absolute; right: 4%; bottom: 8%;
background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.16);
padding: 16px 18px; max-width: 300px;
display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
}
.access__card h4 { font-family: var(--f-body); font-weight: 400; font-size: 1rem; color: #000; margin-bottom: .5rem; }
.access__card address { font-style: normal; font-size: .72rem; color: #000; line-height: 1.35; }
.access__card-larger { display: inline-block; margin-top: .55rem; font-size: .72rem; color: #4794f9; }
.access__card-larger:hover { text-decoration: underline; }
/* Directions: fork icon above the blue label, per the Figma. */
.access__card-dir { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; font-size: .72rem; color: #4794f9; }
.access__card-dir img { width: 30px; height: 30px; display: block; }
.access__card-dir:hover { text-decoration: underline; }
@media (max-width: 860px) {
.access__inner { grid-template-columns: 1fr; }
.access__map { aspect-ratio: 1229 / 646; }
}
/* ══ 10. CONTACT ══════════════════════════════════════════════════════════ */
.contact { position: relative; color: #fff; padding-block: clamp(60px, 9vw, 120px); }
/* The Figma shows this auditorium image at full brightness (no overlay). */
.contact__bg { position: absolute; inset: 0; background: url('assets/img/contact-auditorium.jpg') center / cover no-repeat; }
/* Figma card (#1:806): 1056px, #FCEFDD, column, gap 62px, padding 42/61/60/62.
(Design bottom pad is 155px because its form is short; ours flows, so a normal
bottom pad reads the same.) */
.contact__card {
position: relative;
background: var(--cream); color: var(--text-dark);
max-width: 1056px; margin-inline: auto;
padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 62px);
display: flex; flex-direction: column; gap: clamp(36px, 5vw, 62px);
}
/* Top block (#1:807): heading (left) + intro (right), bottom-aligned. */
.contact__head {
display: flex; align-items: flex-end; gap: clamp(40px, 8vw, 120px);
flex-wrap: wrap;
}
.contact__title { flex: 0 0 auto; max-width: 260px; }
.contact__title .eyebrow { color: var(--eyebrow); }
.contact__title h2 { color: var(--ink); margin-top: .5rem; }
.contact__intro { color: var(--ink); max-width: 467px; flex: 1 1 360px; }
/* Fields (#1:814): 2x2 grid — Name | Email, Phone | Company. */
.contact__fields {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 26px; /* Figma gap between fields and Submit */
}
.contact__form input, .contact__form select {
width: 100%; height: 49px; padding: 8px 14px; /* Figma field: 49px tall */
border: none; background: #fff; color: #333;
font: inherit; font-size: var(--step-0);
}
/* Placeholder colour #DDB780 (Figma). */
.contact__form input::placeholder { color: #ddb780; }
.phone { display: flex; }
/* +971 selector, per the Figma: bronze text + a bronze down-chevron, in a compact
box with a #DDB780 divider before the number field. */
.phone select {
flex: 0 0 auto; width: auto;
padding: 8px 30px 8px 14px; /* room for the chevron on the right */
color: var(--eyebrow); font: inherit; font-size: var(--step-0);
border: none; border-right: 1px solid #ddb780; /* Figma divider stroke */
background: #fff url('assets/img/phone-chevron.svg') no-repeat right 12px center / 12px auto;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
cursor: pointer;
}
.phone input { flex: 1; }
/* Submit (#1:827): 178x49, red #E72424, white centred text. */
.contact__submit { display: flex; align-items: center; }
.contact__form .btn-solid {
width: 178px; height: 49px;
display: inline-flex; align-items: center; justify-content: center;
background: #e72424; padding: 0;
}
/* ══ 11. FOOTER ═══════════════════════════════════════════════════════════ */
.footer { position: relative; background: var(--maroon); color: #fff; overflow: hidden; }
.footer__inner {
/* Figma footer (node 1:106) is a 3-column, top-aligned row within the 1440
artboard: logo x=116, "Contact us" x=580, copyright x=1018. Reproduce those
column starts proportionally so the blocks land where the design places them
rather than spreading edge-to-edge. */
display: grid;
grid-template-columns: 464fr 438fr 422fr;
align-items: start;
column-gap: 2rem;
/* Figma footer band ~425px tall; the deco strip sits along the bottom edge.
Keep the .wrap horizontal gutter (don't zero padding-inline) so the logo sits
at Figma x=116, level with the nav logo. */
padding-block: clamp(56px, 8vw, 84px) clamp(90px, 10vw, 120px);
min-height: 360px;
position: relative; z-index: 1;
}
.footer__wordmark { align-self: start; }
/* Logo pulled toward the left edge (level with the nav wordmark at x≈20). */
.footer__wordmark img {
transform: translateX(calc(-1 * var(--gutter) + 20px));
width: clamp(190px, 18vw, 244px); height: auto;
}
/* Middle column — Contact us (Figma). Left-aligned, label above the two lines. */
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer__label { font-size: var(--step-0); color: #fff; margin-bottom: .4rem; }
.footer__line {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--step-0); color: #fff;
transition: color .2s;
}
.footer__line svg { flex: 0 0 auto; opacity: .9; }
.footer__line:hover { color: var(--nav-text); }
/* Right column — copyright + policy links. Figma aligns its first line with the
contact LINES (y≈130), i.e. one row below the "Contact us" header. Nudge it
down by the header height + its gap so the two blocks read level. */
.footer__meta {
align-self: start;
/* First line lands on the same row as the phone number (label + gap offset),
with a small extra nudge down. */
margin-top: 48px;
text-align: left; font-size: var(--step-0); color: #fff; line-height: 1.45; max-width: 320px;
}
.footer__meta a:hover { color: var(--nav-text); }
/* Real Figma deco strip (gold fan on maroon), pinned to the bottom edge. */
.footer__deco {
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: auto; display: block;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
.tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
/* Switch to the burger before the full desktop nav (wordmark + 5 links + EN|AR
+ Enquire) runs out of room and overflows — which caused a horizontal
scrollbar around 861–900px. */
.nav__inner { min-height: 88px; }
.nav__links, .nav .btn-ghost { display: none; }
.nav__burger { display: block; }
.nav__links.open {
display: flex; position: absolute; top: 88px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0; margin: 0;
background: var(--ink); border-bottom: 1px solid var(--bg-line);
padding: .5rem var(--gutter) 1.2rem;
z-index: 60; /* above the hero, so it's not hidden behind it */
}
.nav__links.open li { display: block; width: 100%; }
.nav__links.open a {
display: block; width: 100%;
text-align: left; /* left-aligned rows, not pushed right */
padding-block: .9em; /* full-width tap targets */
border-bottom: 1px solid var(--bg-line);
border-top: 0; /* clear the desktop bottom-border underline logic */
}
/* Active item: a left accent bar instead of the desktop bottom underline. */
.nav__links.open a[aria-current="page"] {
border-bottom-color: var(--bg-line);
box-shadow: inset 3px 0 0 var(--nav-text);
padding-left: .8em;
}
.nav__burger { position: relative; z-index: 61; } /* always tappable */
/* On mobile the logo transform (desktop far-left offset) isn't wanted — keep
it in place so it doesn't collide with the burger. */
.wordmark img { transform: none; }
/* Anchor offset follows the smaller nav. */
html { scroll-padding-top: 88px; }
/* Photo sections shed their fixed desktop heights so they size to content. */
.hero { height: auto; min-height: 78vh; }
.sig-slide { height: auto; min-height: 70vh; }
/* On narrower screens the long headline must be allowed to wrap. */
.hero h1 { white-space: normal; }
}
/* Footer collapses to a single stacked column below the nav's mobile breakpoint,
so the three columns never overflow / overlap on tablet & phone widths. */
@media (max-width: 960px) {
.footer__inner { grid-template-columns: 1fr; row-gap: 1.75rem; }
.footer__wordmark img { width: clamp(160px, 42vw, 220px); }
/* Multiverse heading + body stack on narrower screens. */
.multiverse__head { grid-template-columns: 1fr; gap: 1.1rem; }
.multiverse__body { max-width: 62ch; margin-top: 0; }
}
@media (max-width: 680px) {
.lounge-row, .lounge-row.reverse { grid-template-columns: 1fr; }
.lounge-row.reverse .lounge-row__media { order: 0; }
.lounge-row.reverse .lounge-row__text { order: 0; }
.contact__fields { grid-template-columns: 1fr; }
.footer__meta { text-align: left; }
/* Uniform slide width on mobile too (keeps the loop seam-flicker-free); the
featured effect stays as a transform scale. */
.glimpse__track figure { flex-basis: 86vw; }
}
@media (max-width: 460px) {
.tiles { grid-template-columns: 1fr; }
}
/* ── Desktop pixel-match ──────────────────────────────────────────────────
At >=1000px the layout follows the Figma's exact band heights (the design is
a single 1440px artboard). Sections centre their content, so the fixed height
distributes as balanced padding and the page tracks the design section-for-
section. Below 1000px the fluid rules above take over for mobile. */
@media (min-width: 1000px) {
/* Sections keep the Figma's band heights, but content is TOP-aligned with
balanced padding rather than vertically centred. Centring floated the
heading into the middle of the band, so jumping to an anchor (#lounges,
#venue…) landed on empty whitespace. Top-alignment puts the heading right
below the nav where the anchor expects it, while the min-height still makes
the band track the design. */
.story,
.highlights,
.glimpse,
.lounges,
.multiverse {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-block: clamp(48px, 5vw, 72px);
}
.story { min-height: 684px; text-align: center; justify-content: center; }
.highlights { min-height: 973px; }
.glimpse { min-height: 620px; }
.lounges { min-height: 1080px; } /* trimmed: was 1490px, left ~420px empty above Multiverse */
.multiverse { min-height: 863px; }
/* The wrap inside a flex section shouldn't stretch oddly. */
.story > .wrap,
.highlights > .wrap,
.glimpse > .wrap,
.lounges > .wrap,
.multiverse > .wrap { width: 100%; }
.hero { height: 720px; min-height: 720px; }
.map { min-height: 632px; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.contact { min-height: 900px; display: flex; align-items: center; }
}