/* ============================================================ SKYAIR — Luxury Real Estate Landing (visual reconstruction) ============================================================ */ /* Self-hosted, previously loaded from fonts.googleapis.com. That stylesheet sat render-blocking in on a third-party connection, and every visitor's IP went to Google before the first paint. Inter ships as a variable face, so one file covers both 400 and 500. The latin-ext split is worth keeping: it is 85KB and this copy is English, so it only downloads if a glyph actually needs it. */ @font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Italiana"; src: url("fonts/italiana-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --navy: #273b5f; --navy-2: #2c4269; --navy-deep: #1f2f4d; --cyan: #1ecfdf; --cyan-bright: #45dcea; --ink: #273b5f; /* Navy-tinted, not neutral grey: secondary text is tinted from the brand foreground. #727786 measured 4.47:1 on white (AA needs 4.5) and 3.48:1 on the masterplan band. This clears both at 6.17:1 and 4.81:1. */ --muted: #5b6070; --muted-navy: #9fb0cc; --paper: #ffffff; --paper-blue: #dbe4f0; /* the masterplan band */ --line-navy: rgba(255,255,255,.16); --err: #a4303f; /* Channel tokens so alpha variants stop being hand-written hex twins. --navy-rgb had five literal duplicates before this. */ --navy-rgb: 39, 59, 95; --shadow-navy: 20, 45, 85; --serif: "Italiana", "Didot", Georgia, serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --wrap: 1240px; --pad: clamp(1.25rem, 5vw, 5rem); --r: 4px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* The nav is fixed and ~99px tall; without this every in-page anchor lands with its heading tucked underneath the pill. */ scroll-padding-top: 7rem; } body { margin: 0; font-family: var(--sans); font-weight: 400; color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } /* is a format-negotiation wrapper only — keep it out of the layout so every `figure img` sizing rule below still resolves against the figure. */ picture { display: contents; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); } .display { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: 0; color: var(--ink); margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 100; background: var(--navy); color: #fff; padding: .85rem 1.6rem; border-radius: 0 0 14px 14px; font-size: .85rem; letter-spacing: .02em; transition: transform .2s ease; } .skip:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--cyan); outline-offset: 2px; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: center; padding: 1.35rem var(--pad); transition: padding .3s ease; } .nav__pill { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); /* White nav text over a 20%-white pill measured 1.62:1 against the palest band of the hero sky. Tinting the resting pill navy at 62% holds ~4.8:1 across the whole gradient while still reading as glass, and makes the scrolled state a deepening of the same material rather than an inversion. */ background: rgba(var(--navy-rgb), .70); border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; padding: .45rem .5rem .45rem 1.5rem; box-shadow: 0 8px 30px rgba(var(--shadow-navy), .1); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; } .nav.is-scrolled .nav__pill { background: rgba(var(--navy-rgb), .92); border-color: rgba(255,255,255,.1); box-shadow: 0 10px 34px rgba(17,42,77,.35); } .brand { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: .18em; color: #fff; padding-right: .2rem; text-shadow: 0 1px 14px rgba(18, 42, 82, .45); } .nav__links { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.6rem); list-style: none; margin: 0; padding: 0; } .nav__links a { color: #fff; font-size: .8rem; font-weight: 400; letter-spacing: .01em; position: relative; padding-block: .3rem; text-shadow: 0 1px 12px rgba(18, 42, 82, .4); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--cyan-bright); transition: width .28s ease; } .nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; } /* Burger: hidden until the inline links are dropped at 560px. */ .nav__burger { display: none; } .nav__menu { /* display:none is the guarantee: above 560px the inline links are the nav, so the panel must not render even if it was left open across a resize. The JS matchMedia listener resets aria-expanded; this makes the visual state safe without depending on it. */ display: none; position: absolute; top: calc(100% + .5rem); left: var(--pad); right: var(--pad); background: rgba(var(--navy-rgb), .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: .5rem; box-shadow: 0 18px 50px rgba(17, 42, 77, .4); flex-direction: column; } .nav__menu[hidden] { display: none; } .nav__menu a { display: flex; align-items: center; min-height: 48px; padding: 0 1.1rem; border-radius: 12px; color: #fff; font-size: .95rem; letter-spacing: .02em; } /* Must out-specify `.nav__menu a` above, or the label inherits #fff on #fff. */ .nav__menu a.nav__menu-cta { justify-content: center; background: #fff; color: var(--navy); margin-top: .35rem; font-weight: 500; } .btn { font-family: var(--sans); cursor: pointer; border: none; font-weight: 400; } .btn--pill { background: #fff; color: var(--navy); /* min-height keeps the pill a 44px touch target on phones */ display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.5rem; border-radius: 999px; font-size: .8rem; letter-spacing: .01em; transition: transform .2s ease, box-shadow .2s ease; } .btn--pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.18); } /* ============================================================ HERO ============================================================ */ @property --introY { syntax: ''; inherits: false; initial-value: 0px; } .hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: linear-gradient(180deg, #2f74c8 0%, #61a0e2 38%, #a9d0f2 72%, #dcecf9 100%); } .hero .pl { position: absolute; inset: 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); backface-visibility: hidden; } /* Compositor layers are requested only while the hero is actually on screen (script.js toggles .is-live), not for the whole session. */ .hero.is-live .pl, .hero.is-live .drift { will-change: transform; } /* L1 — back sky (oversized so parallax never reveals an edge) */ .pl--sky { inset: -9% -7%; background: url('assets/opt/sky2-1920.webp') center center / cover no-repeat; background-image: image-set( url('assets/opt/sky2-1920.avif') type('image/avif'), url('assets/opt/sky2-1920.webp') type('image/webp') ); z-index: 1; filter: saturate(1.4) brightness(1.05) contrast(1.06); animation: skyIn 1.1s ease both; } @media (min-width: 1441px) { .pl--sky { background-image: image-set( url('assets/opt/sky2-2752.avif') type('image/avif'), url('assets/opt/sky2-2752.webp') type('image/webp') ); } } /* richer blue toward the top, blended over the sky photo */ .pl--sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,96,178,.45) 0%, rgba(80,150,220,.14) 34%, rgba(255,255,255,0) 60%); } /* L2 — far drifting clouds (behind the city) */ .pl--cloudfar { z-index: 2; animation: atmoIn 1.4s ease .18s both; } /* L3 — hero title, BEHIND the tower */ .hero__title { position: absolute; z-index: 3; top: 26%; left: 50%; transform: translate3d(calc(-50% + var(--tx, 0px)), var(--ty, 0px), 0); display: flex; align-items: baseline; justify-content: center; width: 100%; gap: clamp(1.25rem, 2.8vw, 2.4rem); font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 12vw, 11rem); line-height: .9; color: #fff; letter-spacing: .01em; margin: 0; text-shadow: 0 6px 40px rgba(var(--shadow-navy), .22); pointer-events: none; white-space: nowrap; animation: titleIn 1s ease .45s both; } .hero__word { display: block; } /* L4 — the floating city (fades + rises out of the atmosphere on load). --introY is a registered (see @property above) so cityReveal can interpolate it; the transform below is what actually consumes it. */ /* `.hero .pl` is (0,2,0) and would outrank a bare `.pl--city` (0,1,0), so this selector must stay two-class or the --introY lift is silently dropped. */ .hero .pl--city { z-index: 4; transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--introY, 0px)), 0); animation: cityReveal 1.7s cubic-bezier(.16, 1, .3, 1) .3s both; } .pl--city img { position: absolute; left: 50%; bottom: -24%; /* NOTE: this plate is non-uniformly scaled here, and deliberately left that way for now. The global `img { max-width: 100% }` reset clamps the computed width, min-width then overrides it, and because `height` is also fixed there is no uniform scale left: the city renders 10% narrow at 1440 and 58% narrow at 768x1024. Adding `max-width: none` corrects the aspect, but it also makes the tower wide enough to swallow the H of HOME in the flanking layout that runs from 561px up, so it needs a composition decision rather than a one-line fix. The phone block below is corrected, because there the words stack and the tower has the centre to itself. */ height: 116vh; width: auto; min-width: 118%; transform: translateX(calc(-50% + 42px)); filter: saturate(1.18) brightness(1.06) contrast(1.06) drop-shadow(0 24px 50px rgba(30, 60, 110, .16)); } /* L5 — near drifting clouds, subtle, in front of the city base */ .pl--cloudnear { z-index: 5; pointer-events: none; animation: atmoIn 1.5s ease .55s both; } /* Continuous horizontal cloud drift (right → left), two copies for a seamless loop. Vertical mask on the band feathers its top/bottom edges (no hard band seam). The second copy is mirrored on X so its left edge is the first copy's right edge: that makes both the mid-band join and the wrap-around join continuous. A horizontal mask cannot do this — it would feather the join into a gap. */ .drift { position: absolute; left: 0; display: flex; width: 200%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); } .drift span { flex: 0 0 50%; background: url('assets/opt/clouds-tile-1280.webp') center center / cover no-repeat; } .drift span:nth-child(2) { transform: scaleX(-1); } @media (min-width: 1441px) { .drift span { background-image: url('assets/opt/clouds-tile-1920.webp'); } } .drift--far { top: 12%; height: 44%; opacity: .68; animation: drift 66s linear infinite; } .drift--near { top: 62%; height: 36%; opacity: .48; animation: driftNear 42s linear infinite; } @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes driftNear { from { transform: translate3d(0, 0, 0) scale(1.18); } to { transform: translate3d(-50%, 0, 0) scale(1.18); } } /* capture-only: settle the hero instantly for screenshots */ html.settled .pl--sky, html.settled .pl--cloudfar, html.settled .hero__title, html.settled .pl--cloudnear { animation: none !important; opacity: 1 !important; } html.settled .pl--city { animation: none !important; opacity: 1 !important; --introY: 0px !important; } html.settled .drift { animation-delay: -16s !important; } @keyframes skyIn { from { opacity: 0; } to { opacity: 1; } } @keyframes atmoIn { from { opacity: 0; } to { opacity: 1; } } @keyframes titleIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cityReveal { 0% { opacity: 0; --introY: 84px; } 60% { opacity: 1; } 100% { opacity: 1; --introY: 0px; } } /* ============================================================ STEP INTO ============================================================ */ .step { padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); } .step__title { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; } .step__figure { margin: clamp(2.5rem, 5vw, 4rem) 0 0; height: clamp(320px, 46vw, 640px); border-radius: var(--r); overflow: hidden; } .step__figure img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; } /* scroll-reveal (JS only): starts as a small centred window, opens to full on scroll */ .js .step__figure { clip-path: inset(34% 40% round 10px); } .js .step__figure img { transform: scale(1.18); } .js .step__figure.is-live { will-change: clip-path; } .js .step__figure.is-live img { will-change: transform; } /* ============================================================ STATS (NAVY) ============================================================ */ .stats { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(4.5rem, 9vw, 8rem); } .stats__inner { display: grid; grid-template-columns: 0.8fr 1.55fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .stats__head { padding-top: clamp(1.6rem, 3vw, 3rem); } .stats__eyebrow { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.08; margin: 0; color: #fff; } .stats__grid { display: grid; gap: 0; } .stat { display: grid; grid-template-columns: clamp(150px, 14vw, 200px) minmax(0, 1fr); gap: clamp(1.25rem, 2.6vw, 2.5rem); align-items: start; padding: clamp(1.5rem, 2.6vw, 2.1rem) 0; border-bottom: 1px solid var(--line-navy); } .stat:first-child { border-top: 1px solid var(--line-navy); } .stat__num { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 1; color: var(--cyan); letter-spacing: .01em; } .stat__label { font-family: var(--sans); font-weight: 500; font-size: 1.05rem; margin: 0 0 .55rem; color: #fff; letter-spacing: .01em; } .stat__body p { margin: 0; color: var(--muted-navy); font-size: .86rem; max-width: 42ch; font-weight: 400; line-height: 1.55; } /* ============================================================ BEYOND FOUR WALLS ============================================================ */ .beyond { padding: clamp(4rem, 8vw, 7rem) 0 0; } .beyond__intro { display: grid; gap: 1.4rem; text-align: center; place-items: center; padding-bottom: clamp(1rem, 3vw, 2.5rem); } .beyond__title { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; } .beyond__lede { max-width: 46ch; color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 0; } /* Scroll-driven 3D image gallery: grid tilts up from the floor and settles flat */ .gallery { position: relative; height: 240vh; /* scroll runway for the tilt/scale/parallax */ perspective: 1000px; perspective-origin: center top; } .gallery__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; perspective: 1000px; perspective-origin: center top; } .gallery__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; padding-inline: 12px; /* full-bleed, edge to edge */ transform-style: preserve-3d; transform: rotateX(75deg) scale(1.2); /* JS drives this on scroll */ } .gallery__col { display: flex; flex-direction: column; gap: 12px; } .gallery.is-live .gallery__grid, .gallery.is-live .gallery__col { will-change: transform; } .gallery__col--up { margin-top: -8vw; } .gallery__col img { display: block; width: 100%; /* height:auto is load-bearing — the width/height attributes are presentational hints, and without this the tile keeps its intrinsic height and aspect-ratio is ignored (both dimensions definite). */ height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 26px rgba(var(--shadow-navy), .1); } /* No-JS fallback. The base .gallery__grid transform is unconditional, so without these the whole montage renders face-down at 75deg across 240vh of scroll. */ .no-js .gallery__grid { transform: none; } .no-js .gallery { height: auto; } .no-js .gallery__sticky { position: static; height: auto; overflow: visible; } .no-js .gallery__col--up { margin-top: 0; } /* ============================================================ WORLD PERFECTLY PLACED ============================================================ */ /* cool blue canvas; the map bleeds in and its edges feather into the background, heading + list sit on the faded-left, and labelled pins mark the districts. */ /* the render is a full-cover banner whose own blue-grey background bleeds edge to edge; its empty left third carries the heading + list, and hairline pins mark each district. The section colour matches the artwork so the seam disappears. */ .placed { /* section fades white → artwork blue → white so it melts into the sections above and below, while the render itself bleeds the full width */ background: linear-gradient(180deg, #fff 0%, #e3ecf5 9%, var(--paper-blue) 92%, #fff 100%); } .placed__map { position: relative; margin: 0; } .placed__mapviz { position: relative; margin: 0; } .placed__mapviz img { width: 100%; height: auto; display: block; /* soften only the top/bottom so the artwork dissolves into the section */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%); } .placed__head { position: absolute; z-index: 4; top: 50%; left: clamp(1.5rem, 5vw, 5.5rem); transform: translateY(-50%); width: min(34%, 430px); } .placed__title { font-size: clamp(1.6rem, 3.2vw, 3.2rem); line-height: 1.04; margin-bottom: clamp(1.2rem, 2.6vw, 2.4rem); white-space: nowrap; } .placed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.6rem, 1.3vw, 1rem); max-width: 330px; } .placed__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; font-family: var(--sans); font-size: clamp(.82rem, 1.1vw, .92rem); font-weight: 500; color: var(--ink); padding-bottom: clamp(.6rem, 1.3vw, 1rem); border-bottom: 1px solid rgba(var(--shadow-navy), .18); text-transform: uppercase; letter-spacing: .1em; } .placed__time { font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--muted); letter-spacing: .04em; text-transform: none; } .ic { width: clamp(32px, 3.2vw, 40px); height: clamp(32px, 3.2vw, 40px); border-radius: 50%; border: 1px solid rgba(var(--shadow-navy), .22); background: rgba(255, 255, 255, .4); display: inline-block; position: relative; } .ic::before { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--navy); opacity: .5; } .ic::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); } /* hairline district pins: dot on the place + thin leader line + elegant label */ .pin { position: absolute; z-index: 6; transform: translateY(-50%); font-family: var(--sans); font-weight: 500; text-transform: uppercase; font-size: clamp(.6rem, .8vw, .7rem); letter-spacing: .1em; color: var(--navy); white-space: nowrap; padding-left: 30px; text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 11px rgba(255, 255, 255, .85), 0 1px 2px rgba(255, 255, 255, .9); } .pin::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: var(--navy); opacity: .5; } .pin::after { content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(30, 207, 223, .25), 0 0 8px rgba(30, 207, 223, .5); } .pin em { font-style: normal; font-family: var(--sans); font-weight: 400; font-size: .6rem; display: block; color: var(--muted); letter-spacing: .05em; } .pin--left { padding-left: 0; padding-right: 30px; text-align: right; } .pin--left::before { left: auto; right: 0; } .pin--left::after { left: auto; right: -3px; } /* ============================================================ BETTER WAY ============================================================ */ .better { padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3.5rem); } .better__title { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; } .better__figure { margin: clamp(2.5rem, 5vw, 4rem) 0 0; height: clamp(300px, 42vw, 560px); border-radius: var(--r); overflow: hidden; } .better__figure img { width: 100%; height: 100%; object-fit: cover; } /* Ken Burns drift — slow zoom + pan. At the old 20s/1.06 this travelled 1.7px per second on a 560px figure, below the perceptual threshold; 14s/1.085 reads as drift without ever calling attention to itself. */ .js .better__figure img { transform-origin: 55% 45%; animation: betterKen 14s ease-in-out infinite alternate; animation-play-state: paused; /* costs nothing while off screen */ } .js .better__figure.is-live img { animation-play-state: running; will-change: transform; } @keyframes betterKen { from { transform: scale(1); } to { transform: scale(1.085) translate3d(-2%, -1.4%, 0); } } /* ============================================================ DREAM ADDRESS ============================================================ */ .address { padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem); } /* image | centered text | image — the two images sit at different, staggered heights */ .address__inner { max-width: 1600px; /* wider than the default --wrap so images breathe */ display: grid; grid-template-columns: auto auto 1fr auto auto; justify-content: stretch; /* push the flanking images out toward the edges */ align-items: center; gap: clamp(.8rem, 2.2vw, 2rem); } .address__copy { text-align: center; justify-self: center; /* centre the copy inside the flexible middle track */ display: grid; justify-items: center; align-content: center; width: clamp(300px, 26vw, 400px); padding-inline: clamp(1.2rem, 3vw, 3rem); /* breathing room around the text */ } .address__title { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.08; white-space: nowrap; } /* The page's primary action. It sits at the moment of intent, so it is the heaviest control here — the newsletter's Subscribe is the ghost now. */ .btn--primary { display: inline-flex; align-items: center; justify-content: center; margin-top: 2.2rem; min-height: 56px; background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px; padding: 1rem 2.6rem; font-size: 1rem; letter-spacing: .02em; box-shadow: 0 14px 30px rgba(var(--shadow-navy), .22); transition: background .25s ease, transform .2s ease, box-shadow .25s ease; } .btn--primary:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--shadow-navy), .3); } .btn--ghost { display: inline-block; margin-top: 2.2rem; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: .9rem 2.1rem; font-size: .82rem; letter-spacing: .03em; transition: background .25s ease, color .25s ease, transform .2s ease; } .btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); } /* Compact ghost for the demoted newsletter submit. */ .btn--ghost-sm { margin-top: 0; padding: .9rem 1.6rem; font-size: .85rem; display: inline-flex; align-items: center; min-height: 48px; } .address__img { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 44px rgba(var(--shadow-navy), .15); } .address__img img { display: block; width: 100%; height: 100%; object-fit: cover; } /* four flanking images at asymmetric, alternating heights */ .address__img--l1 { width: clamp(160px, 14.5vw, 220px); height: clamp(340px, 34vw, 480px); align-self: start; } .address__img--l2 { width: clamp(140px, 12.5vw, 185px); height: clamp(240px, 26vw, 360px); align-self: end; } .address__img--r1 { width: clamp(140px, 12.5vw, 185px); height: clamp(260px, 28vw, 380px); align-self: start; } .address__img--r2 { width: clamp(160px, 14.5vw, 220px); height: clamp(320px, 33vw, 460px); align-self: end; } /* Scroll-in: each side starts as a stacked two-card deck, then fans out to place. Left card of a pair sits shifted right, right card shifted left → they overlap in the middle like a deck; on reveal both settle to transform:none. */ .js .address__img { position: relative; transition: transform 1s cubic-bezier(.2, .72, .25, 1), opacity .7s ease; transition-delay: .05s; } .js .address:not(.is-in) .address__img { opacity: 0; } .js .address:not(.is-in) .address__img--l1 { transform: translateX(110px) rotate(-6deg); z-index: 2; } .js .address:not(.is-in) .address__img--l2 { transform: translateX(-110px) rotate(6deg); z-index: 1; } .js .address:not(.is-in) .address__img--r1 { transform: translateX(110px) rotate(-6deg); z-index: 1; } .js .address:not(.is-in) .address__img--r2 { transform: translateX(-110px) rotate(6deg); z-index: 2; } /* Inner cards of each pair fan out a real beat after the outer ones — 0 vs 240ms against a 1s move, so the deck reads as dealing rather than landing at once. */ .js .address__img--l1, .js .address__img--r2 { transition-delay: 0s; } .js .address__img--l2, .js .address__img--r1 { transition-delay: .24s; } /* ============================================================ FINALE — newsletter + footer over a full-width frosted-glass image ============================================================ */ .finale { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(620px, 86vh, 900px); display: flex; align-items: center; padding: clamp(3rem, 6vw, 6rem) var(--pad); } .finale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; } /* frosted glass CARD floating over the image (not a full-width band) */ .finale__glass { width: min(1200px, 100%); margin: 0 auto; border-radius: 26px; background: linear-gradient(125deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.46) 60%, rgba(230,239,248,.4) 100%); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 40px 90px rgba(var(--shadow-navy), .22); padding: clamp(2.5rem, 5vw, 4rem); } .finale__inner { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); width: 100%; } .finale__book { max-width: 720px; } .finale__title { font-size: clamp(2.8rem, 5vw, 4.4rem); color: var(--ink); margin-bottom: 1.4rem; } /* Booking form — the primary action on the page. */ .bookform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(.8rem, 2vw, 1.4rem); } .field { display: grid; gap: .4rem; margin: 0; min-width: 0; } .field--wide { grid-column: 1 / -1; } .field label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); font-weight: 500; } .field input, .field select { font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: .8rem 1.1rem; border-radius: 12px; min-height: 48px; border: 1px solid rgba(var(--navy-rgb), .22); background: rgba(255, 255, 255, .94); width: 100%; min-width: 0; transition: border-color .2s ease, box-shadow .2s ease; } .field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; } .field input:focus-visible, .field select:focus-visible { /* navy, not cyan: cyan is 1.9:1 on this glass and fails WCAG 1.4.11's 3:1 for a focus indicator. Cyan stays the accent on dark ground only. */ outline: 2px solid var(--navy); outline-offset: 2px; border-color: transparent; } .field__err { font-size: .78rem; color: var(--err); font-weight: 500; } .field__err[hidden] { display: none; } .field.is-invalid input, .field.is-invalid select { border-color: var(--err); } .bookform__submit { margin-top: 1.4rem; } .btn[aria-busy="true"] { opacity: .72; cursor: progress; } .formstatus { margin: 1rem 0 0; font-size: .9rem; color: var(--ink); min-height: 1.2em; } .formstatus:empty { margin: 0; min-height: 0; } .formstatus.is-error { color: var(--err); } /* Newsletter, demoted beneath the booking form. */ .finale__news { max-width: 560px; } .finale__newstitle { font-family: var(--sans); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin: 0 0 .3rem; letter-spacing: .01em; } .finale__sub { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; } .finale__form { display: flex; gap: .6rem; flex-wrap: wrap; } .finale__form input { font-family: var(--sans); font-size: .95rem; padding: .95rem 1.4rem; border-radius: 999px; border: 1px solid rgba(var(--navy-rgb), .18); background: rgba(255,255,255,.92); min-width: 260px; color: var(--ink); } .finale__form input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .btn--solid { background: var(--navy); color: #fff; padding: .95rem 2.2rem; border-radius: 999px; font-size: .9rem; transition: background .25s ease, transform .2s ease; } .btn--solid:hover { background: var(--navy-2); transform: translateY(-2px); } .finale__footer { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; align-items: start; padding-top: clamp(2.2rem, 4vw, 3rem); border-top: 1px solid rgba(var(--navy-rgb), .16); } .finale__brand { font-size: 1.7rem; color: var(--ink); letter-spacing: .16em; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer__col { display: grid; gap: .7rem; align-content: start; } .footer__head { font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; /* opacity .5 on navy measured 2.73:1 over the glass. The hierarchy comes from size, tracking and case here — it does not need to be faint as well. */ color: var(--muted); margin-bottom: .3rem; } .footer__col a { font-size: .88rem; color: var(--ink); opacity: .82; transition: opacity .2s ease; /* 23px tall failed WCAG 2.5.8's 24px floor for a fine pointer; the coarse query below takes these to 44 for touch. */ display: flex; align-items: center; min-height: 26px; } .footer__col a:hover { opacity: 1; } .footer__social { display: flex; gap: .6rem; } .footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(var(--navy-rgb), .3); display: grid; place-items: center; font-size: .68rem; letter-spacing: .02em; color: var(--ink); transition: background .2s ease, border-color .2s ease, color .2s ease; } .footer__social a:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .finale__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: 1.3rem; border-top: 1px solid rgba(var(--navy-rgb), .12); font-size: .76rem; color: var(--muted); } /* ============================================================ REVEAL ANIMATION ============================================================ */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } .js .reveal.is-in { opacity: 1; transform: none; } /* The stat band is the one place .reveal is used on siblings that read as a list, so it is the one place a stagger belongs. Capped at 300ms total. */ .js .stats__grid .stat:nth-child(2) { transition-delay: .10s; } .js .stats__grid .stat:nth-child(3) { transition-delay: .20s; } .js .stats__grid .stat:nth-child(4) { transition-delay: .30s; } /* ============================================================ INTERACTION STATES ============================================================ */ /* One focus system. Cyan reads at 1.9:1 on white so it cannot be the ring on light ground — navy carries there (8.6:1), cyan on the navy band (5.5:1). */ :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; } .stats :focus-visible, .nav :focus-visible, .nav__menu :focus-visible { outline-color: var(--cyan-bright); } /* Every control acknowledges the press, not just the hover. */ .btn--pill:active, .btn--primary:active, .btn--solid:active, .btn--ghost:active, .nav__burger:active, .footer__social a:active { transform: translateY(0) scale(.985); } .brand { transition: opacity .2s ease, letter-spacing .3s ease; } .brand:hover { opacity: .82; letter-spacing: .21em; } /* Gallery tiles: the montage responds without breaking the 3D grid. */ .gallery__col img { transition: transform .5s cubic-bezier(.2, .72, .25, 1), box-shadow .5s ease; } @media (hover: hover) { .gallery__col img:hover { transform: scale(1.04); box-shadow: 0 20px 44px rgba(var(--shadow-navy), .26); } } .address__img img { transition: transform .7s cubic-bezier(.2, .72, .25, 1); } @media (hover: hover) { .address__img:hover img { transform: scale(1.05); } } /* Legend <-> map cross-highlight. The list and the pins are two views of the same five districts sitting unconnected on one screen; this ties them. */ .placed__list li { transition: color .25s ease, border-color .25s ease; } .placed__list li .ic { transition: border-color .25s ease, background .25s ease, transform .25s ease; } .placed__list li.is-linked { border-color: var(--cyan); } .placed__list li.is-linked .ic { border-color: var(--cyan); background: rgba(30, 207, 223, .16); transform: scale(1.08); } .placed__list li.is-linked .placed__time { color: var(--ink); } .pin { transition: transform .3s cubic-bezier(.2, .72, .25, 1), opacity .3s ease; } .pin::after { transition: box-shadow .3s ease, transform .3s ease; } .pin.is-linked::after { box-shadow: 0 0 0 5px rgba(30, 207, 223, .3), 0 0 16px rgba(30, 207, 223, .75); transform: translateY(-50%) scale(1.25); } .pin.is-linked { transform: translateY(-50%) scale(1.06); } .placed.is-dimmed .pin:not(.is-linked) { opacity: .38; } /* Pins draw in along their leader lines when the map arrives, in map order. */ .js .placed__mapviz .pin { opacity: 0; transform: translateY(-50%) translateX(-6px); } .js .pin--left { transform: translateY(-50%) translateX(6px); } .js .placed__map.is-in .pin { opacity: 1; transform: translateY(-50%); } .js .placed__map.is-in .pin:nth-of-type(1) { transition-delay: .12s; } .js .placed__map.is-in .pin:nth-of-type(2) { transition-delay: .22s; } .js .placed__map.is-in .pin:nth-of-type(3) { transition-delay: .32s; } .js .placed__map.is-in .pin:nth-of-type(4) { transition-delay: .42s; } .js .placed__map.is-in .pin:nth-of-type(5) { transition-delay: .52s; } /* Hero scroll cue: a hairline that fills downward. No copy, no chevron. */ .scrollcue { position: absolute; z-index: 6; bottom: 2.2rem; left: 50%; transform: translateX(-50%); width: 1px; height: 54px; background: rgba(255, 255, 255, .3); overflow: hidden; } .scrollcue span { position: absolute; inset: 0; display: block; background: #fff; animation: cueFill 2.6s cubic-bezier(.6, 0, .4, 1) infinite; } @keyframes cueFill { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } .nav.is-scrolled ~ main .scrollcue { opacity: 0; transition: opacity .4s ease; } /* ============================================================ RESPONSIVE (desktop-first; mobile refined after desktop) ============================================================ */ /* ---- Tablet ---- */ @media (max-width: 1024px) { .gallery { height: 220vh; } .gallery__grid { grid-template-columns: repeat(4, 1fr); } /* The grid has 5 columns of children. Fewer tracks than children wraps the surplus onto a second row that sits below the sticky 100vh window, where it can never be seen at any scroll position — so drop them instead of hiding them off-screen. Track count and visible column count must always match. */ .gallery__col:nth-child(n + 5) { display: none; } } /* ---- Small tablet / large phone ---- */ @media (max-width: 820px) { .stats__inner { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.6rem); } .stats__head { padding-top: 0; } .stat { grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem 0; } .stat__num { font-size: clamp(2.6rem, 12vw, 3.6rem); } /* stack: heading + list above the map instead of overlaying it */ .placed__map { display: flex; flex-direction: column; overflow: visible; } .placed__head { position: static; order: -1; max-width: none; margin: 0 0 clamp(1.2rem, 4vw, 2rem); } .placed__title { white-space: normal; text-shadow: none; } .placed__list { max-width: none; } .placed__list li { text-shadow: none; } /* stack: heading + list above the render, and crop the artwork's empty left third away so only the city itself shows */ .placed { padding: clamp(2.5rem, 8vw, 4rem) var(--pad); } .placed__map { display: flex; flex-direction: column; gap: clamp(1.2rem, 4vw, 2rem); } .placed__head { position: static; order: -1; transform: none; width: auto; } .placed__mapviz { order: 1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); } .placed__mapviz img { width: 100%; height: 100%; object-fit: cover; object-position: 97% 50%; /* drop the empty left gradient */ -webkit-mask-image: none; mask-image: none; } .pin { display: none; } .address__inner { grid-template-columns: 1fr 1fr; justify-items: stretch; gap: 1rem; } .address__copy { grid-column: 1 / -1; order: -1; padding-bottom: .5rem; } /* The deck metaphor depends on the desktop 5-column order. In the 2x2 grid the ±110px slide is ~71% of a card's own width and the pairs cross over each other, so the cards rise into place instead. */ .js .address:not(.is-in) .address__img--l1, .js .address:not(.is-in) .address__img--l2, .js .address:not(.is-in) .address__img--r1, .js .address:not(.is-in) .address__img--r2 { transform: translateY(28px); } .js .address__img--l1 { transition-delay: 0s; } .js .address__img--r1 { transition-delay: .08s; } .js .address__img--l2 { transition-delay: .16s; } .js .address__img--r2 { transition-delay: .24s; } .address__img--l1, .address__img--l2, .address__img--r1, .address__img--r2 { width: 100%; height: clamp(200px, 46vw, 320px); align-self: stretch; } /* Gallery: shorter runway + fewer columns on small screens */ .gallery { height: 200vh; } .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-inline: 8px; } .gallery__col { gap: 8px; } .gallery__col--up { margin-top: -3vw; } .gallery__col:nth-child(n + 4) { display: none; } /* 3 tracks, 3 columns */ } /* ---- Phone ---- */ @media (max-width: 560px) { :root { --pad: 1.25rem; } .nav { padding: .9rem 1rem; } /* The 44px burger is a circle inside a 59px pill, so its corners sit right where the pill's own end-cap curves. 6.4px of right padding let the two radii graze each other and read as one dented shape; 9.6px separates them. */ .nav__pill { gap: .85rem; padding: .4rem .6rem .4rem 1.1rem; } /* Inline links and the Contact pill move into the burger menu, so nothing is simply dropped: every destination stays reachable on a phone. */ .nav__links { display: none; } .nav__pill > .btn--pill { display: none; } .brand { font-size: 1rem; } .nav__burger { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; cursor: pointer; } .nav.is-scrolled .nav__burger { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); } .nav__burger-bars, .nav__burger-bars::before, .nav__burger-bars::after { content: ""; display: block; width: 17px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .28s cubic-bezier(.2, .72, .25, 1), opacity .18s ease; } .nav__burger-bars::before { transform: translateY(-5.5px); } .nav__burger-bars::after { transform: translateY(4px); } .nav__burger[aria-expanded="true"] .nav__burger-bars { background: transparent; } .nav__burger[aria-expanded="true"] .nav__burger-bars::before { transform: translateY(0) rotate(45deg); } .nav__burger[aria-expanded="true"] .nav__burger-bars::after { transform: translateY(-1.5px) rotate(-45deg); } .nav__menu:not([hidden]) { display: flex; } .hero { height: 90vh; min-height: 560px; } /* Geometry of the cut-out, measured from the file: the tower's mast is the topmost opaque pixel at 2.3% down and dead centre, and the opaque city ends at 83.5% of the height — the bottom sixth is empty. The image is anchored from its bottom, so mast = heroH + |bottom| - 0.977 x imgH base = heroH + |bottom| - 0.165 x imgH Holding the cloud base exactly at the fold forces |bottom| = 0.165 x imgH, which caps the image at ~72vh before the mast reaches the headline. Going bigger therefore has to spend the base: at 78vh with -21% the city is ~14% larger and crops roughly 50px further below the fold, while the mast still clears the headline by 30-45px at every phone size. translateX loses the desktop's +42px nudge, which aligns the tower to the gap between DREAM and HOME. Stacked and centred, it needs no offset. */ .pl--city img { height: 75vh; bottom: -17%; /* Undo the reset's clamp so height can drive width uniformly. Without this the plate came out 630x658 against a natural 1.79 ratio — 46% narrow, which is what made the towers look stretched rather than simply cropped. At 75vh the plate is ~300% of the viewport, so the sides crop hard and the tower reads at its true proportions. */ width: auto; max-width: none; min-width: 0; /* Centred, not nudged: the +42px above aligns the tower to the gap between DREAM and HOME, which only exists while the words flank it. */ transform: translateX(-50%); } .drift--far { top: 20%; height: 34%; } .drift--near { top: 52%; height: 34%; } /* 19vw alone lets the headline dominate a short, wide viewport — the type grows with width while the image band is sized in vh, so at ~424x694 the mast came back within a few pixels of HOME. min(19vw, 9vh) keys the type to whichever axis is scarcer; on ordinary tall phones 19vw still wins and nothing changes. */ .hero__title { top: 12%; flex-direction: column; align-items: center; gap: .1rem; font-size: clamp(3.6rem, min(19vw, 9vh), 5.6rem); line-height: .96; } .step__figure { height: 300px; } .better__figure { height: 280px; } .address__img--l1, .address__img--l2, .address__img--r1, .address__img--r2 { height: clamp(170px, 44vw, 260px); } .pin { display: none; } /* Two 150px columns is not a form. Single column below 560px. */ .bookform__grid { grid-template-columns: 1fr; } .bookform__submit { width: 100%; justify-content: center; } .finale__form { flex-direction: column; align-items: stretch; } .finale__form input { min-width: 0; width: 100%; } .btn--solid { width: 100%; } .btn--ghost-sm { width: 100%; justify-content: center; } .finale__footer { grid-template-columns: 1fr; gap: 1.6rem; } .footer__cols { grid-template-columns: 1fr 1fr; } .finale__base { flex-direction: column; gap: .4rem; } } @media (max-width: 380px) { .footer__cols { grid-template-columns: 1fr; } } /* ---- Touch targets ---- Keyed to the input method, not the viewport: a touchscreen laptop needs these and a narrow desktop window does not. 38px circles and 22px text links clear WCAG 2.5.8 but are well under the 44px platform guideline for a finger. */ @media (pointer: coarse) { .footer__col a { min-height: 44px; display: flex; align-items: center; } .footer__social a { width: 44px; height: 44px; } .brand { display: inline-flex; align-items: center; min-height: 44px; } .nav__links a { padding-block: .85rem; } .placed__list li { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } /* `*` is (0,0,0) and loses to `html` (0,0,1) above, so an unqualified scroll-behavior here silently never applied — every anchor kept animating across an 8,600px page for users who asked for less motion. */ html { scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .js .address:not(.is-in) .address__img { opacity: 1; transform: none; } .js .better__figure img { animation: none; transform: none; } .pl--city { opacity: 1; } .drift--far, .drift--near { animation: none !important; } .hero .pl, .hero__title { transform: none !important; } }