/* ========================================================================== Jumeirah Residences Al Maryah Island Design system + page styles -------------------------------------------------------------------------- Palette is drawn from the tower itself: warm amber stone, bone limestone, and the near-black of the canal at night. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Ink — warm blacks, never pure #000 */ --ink: #0A0908; --ink-2: #14110D; --ink-3: #1E1A14; --ink-4: #2A241B; /* Bone — the light side */ --bone: #F7F3EB; --bone-2: #EFE8DB; --bone-3: #E2D8C6; /* Amber / gold */ --gold: #C2A15D; --gold-lt: #E4CFA0; --gold-dk: #8A6E39; --gold-grad: linear-gradient(135deg, #8A6E39 0%, #C2A15D 38%, #E4CFA0 62%, #B08D4F 100%); /* Type colours */ --tx-dark: #17150F; --tx-mid: #58513F; --tx-soft: #8A8271; --tx-light: rgba(247, 243, 235, 0.92); --tx-light-2: rgba(247, 243, 235, 0.62); /* Hairlines */ --line-dk: rgba(247, 243, 235, 0.14); --line-lt: rgba(23, 21, 15, 0.13); /* Type */ --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --f-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Rhythm */ --gut: clamp(1.25rem, 4.5vw, 3.75rem); --sec-y: clamp(4.5rem, 11vw, 10.5rem); --maxw: 1320px; --maxw-text: 68ch; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --hdr-h: 84px; } @media (max-width: 860px) { :root { --hdr-h: 66px; } } /* -------------------------------------------------------------------------- 2. Reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr-h); /* `clip` does not create a scroll container, so stray overflow cannot be panned to on touch. `hidden` (kept as a fallback for Safari < 16) only hides the scrollbar — the page can still be dragged sideways. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--bone); color: var(--tx-dark); font-family: var(--f-sans); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); font-weight: 300; line-height: 1.78; letter-spacing: 0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } /* The JS pins the body with position:fixed; this belts-and-braces the scrollport itself, which lives on , not . */ html:has(body.is-locked) { overflow: hidden; } body.is-locked { overflow: hidden; overscroll-behavior: none; } main { overflow-x: hidden; overflow-x: clip; position: relative; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 300; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; /* no orphaned last word on display type */ } p { margin: 0 0 1.25em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--gold); color: var(--ink); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.9rem 1.5rem; background: var(--ink); color: var(--bone); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; } .skip-link:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .shell--wide { max-width: 1560px; } .shell--tight { max-width: 980px; } .sec { padding-block: var(--sec-y); position: relative; } .sec--dark { background: var(--ink); color: var(--tx-light); } .sec--ink2 { background: var(--ink-2); color: var(--tx-light); } .sec--bone2 { background: var(--bone-2); } .sec--flush { padding-block: 0; } /* -------------------------------------------------------------------------- 4. Type components -------------------------------------------------------------------------- */ .eyebrow { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.6rem; font-family: var(--f-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-dk); line-height: 1; } .sec--dark .eyebrow, .sec--ink2 .eyebrow { color: var(--gold-lt); } .eyebrow::before { content: ""; width: clamp(28px, 4vw, 54px); height: 1px; background: currentColor; opacity: 0.55; flex: none; } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: clamp(28px, 4vw, 54px); height: 1px; background: currentColor; opacity: 0.55; flex: none; } .h-xl { font-size: clamp(2.6rem, 1.1rem + 6.2vw, 6.5rem); } .h-lg { font-size: clamp(2.1rem, 1.1rem + 4.1vw, 4.35rem); } .h-md { font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.85rem); } .h-sm { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); } .h-em { font-style: italic; } .lede { font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.28rem); line-height: 1.72; color: var(--tx-mid); max-width: var(--maxw-text); } .sec--dark .lede, .sec--ink2 .lede { color: var(--tx-light-2); } .body-copy { max-width: var(--maxw-text); color: var(--tx-mid); } .sec--dark .body-copy, .sec--ink2 .body-copy { color: var(--tx-light-2); } .rule { width: 100%; height: 1px; background: var(--line-lt); border: 0; margin: 0; } .sec--dark .rule, .sec--ink2 .rule { background: var(--line-dk); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-fg: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1.6rem, 4vw, 2.6rem); min-height: 44px; /* guaranteed tap target on every breakpoint */ font-family: var(--f-sans); font-size: clamp(0.65rem, 1.5vw, 0.72rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--btn-fg); background: var(--gold-grad); background-size: 200% 200%; background-position: 0% 50%; border-radius: 999px; overflow: hidden; transition: background-position 0.7s var(--ease), transform 0.35s var(--ease), box-shadow 0.45s var(--ease); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 8px 26px -12px rgba(138,110,57,0.75); will-change: transform; } .btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 16px 34px -14px rgba(138,110,57,0.9); } .btn:active { transform: translateY(0); } .btn--ghost { background: none; box-shadow: none; color: var(--tx-light); border: 1px solid rgba(226, 207, 160, 0.42); } .btn--ghost:hover { background: rgba(226, 207, 160, 0.1); border-color: var(--gold-lt); box-shadow: none; } .btn--sm { padding: 0.85rem 1.7rem; font-size: 0.66rem; letter-spacing: 0.18em; } .btn--block { display: flex; width: 100%; } /* On very narrow phones a full-width button cannot grow to fit its label, so "Register Your Interest" wrapped to two lines inside the form. Tighten the tracking and side padding rather than let the label break. */ @media (max-width: 400px) { .btn { padding-inline: 1rem; font-size: 0.6rem; letter-spacing: 0.1em; } } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr-h); display: flex; align-items: center; transition: background 0.5s var(--ease), height 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); border-bottom: 1px solid transparent; } .hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,9,8,0.62) 0%, rgba(10,9,8,0) 100%); opacity: 1; transition: opacity 0.5s var(--ease); pointer-events: none; } .hdr.is-stuck { height: calc(var(--hdr-h) - 14px); background: rgba(10, 9, 8, 0.9); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line-dk); } .hdr.is-stuck::before { opacity: 0; } .hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 1; } .brand { display: block; flex: none; } .brand img { width: auto; height: clamp(38px, 4.4vw, 52px); transition: height 0.5s var(--ease); } .hdr.is-stuck .brand img { height: clamp(32px, 3.6vw, 42px); } .nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); } .nav__link { position: relative; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-light); padding-block: 0.4rem; transition: color 0.3s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold-lt); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .nav__link:hover { color: var(--gold-lt); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-active { color: var(--gold-lt); } .hdr__cta { display: flex; align-items: center; gap: 1rem; flex: none; } .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; } .burger span { display: block; width: 26px; height: 1px; background: var(--bone); transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), width 0.45s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1080px) { .nav { display: none; } .burger { display: flex; } .hdr__cta .btn { display: none; } } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 0; padding: var(--hdr-h) var(--gut) 3rem; opacity: 0; visibility: hidden; transform: translateY(-1.5%); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0.55s; } .drawer.is-open { opacity: 1; visibility: visible; transform: none; } .drawer__link { display: block; padding: 0.7rem 0; font-family: var(--f-display); font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 300; color: var(--tx-light); border-bottom: 1px solid var(--line-dk); transition: color 0.35s var(--ease), padding-left 0.45s var(--ease); opacity: 0; transform: translateY(14px); } .drawer.is-open .drawer__link { opacity: 1; transform: none; transition: opacity 0.55s var(--ease) calc(var(--i, 0) * 0.06s + 0.12s), transform 0.55s var(--ease) calc(var(--i, 0) * 0.06s + 0.12s), color 0.35s var(--ease), padding-left 0.45s var(--ease); } .drawer__link:hover { color: var(--gold-lt); padding-left: 0.6rem; } .drawer .btn { margin-top: 2.2rem; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--hdr-h) + 1.5rem) var(--gut) 0; overflow: hidden; background: var(--ink); isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* Poster sits under the video so there is never a black frame while it buffers. */ .hero__fallback { position: absolute; inset: 0; z-index: -1; } .hero__media video { position: relative; z-index: 1; opacity: 0; transition: opacity 1.1s var(--ease); } .hero__media video.is-ready { opacity: 1; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: /* keeps the centred copy legible over the brightest frames of the film */ radial-gradient(76% 52% at 50% 48%, rgba(10,9,8,0.52) 0%, rgba(10,9,8,0.28) 55%, rgba(10,9,8,0) 100%), radial-gradient(120% 78% at 50% 46%, rgba(10,9,8,0) 24%, rgba(10,9,8,0.62) 100%), linear-gradient(to bottom, rgba(10,9,8,0.68) 0%, rgba(10,9,8,0.22) 28%, rgba(10,9,8,0.58) 68%, rgba(10,9,8,0.94) 100%); } /* On a tall, narrow screen the copy block fills most of the frame, so a centred radial can't cover it — the film sits behind text almost edge to edge. Darken the whole band instead. */ @media (max-width: 820px) { .hero__scrim { background: linear-gradient(to bottom, rgba(10,9,8,0.82) 0%, rgba(10,9,8,0.58) 16%, rgba(10,9,8,0.62) 40%, rgba(10,9,8,0.70) 68%, rgba(10,9,8,0.93) 100%); } .hero h1 { text-shadow: 0 2px 26px rgba(10,9,8,0.85); } .hero__sub { color: #fff; text-shadow: 0 1px 20px rgba(10,9,8,0.9); } } .hero__inner { width: 100%; max-width: 1080px; margin-inline: auto; align-self: center; text-align: center; color: var(--tx-light); padding-block: clamp(1.5rem, 4vh, 3rem); } .hero h1 { font-size: clamp(1.95rem, 0.95rem + 3.5vw, 4.15rem); line-height: 1.1; letter-spacing: 0.005em; color: #fff; text-wrap: balance; text-shadow: 0 2px 40px rgba(10,9,8,0.5); } .hero__sub { margin: 1.9rem auto 0; max-width: 60ch; font-size: clamp(0.95rem, 0.9rem + 0.32vw, 1.14rem); line-height: 1.78; color: rgba(255,255,255,0.93); text-wrap: pretty; text-shadow: 0 1px 18px rgba(10,9,8,0.6); } .hero__actions { margin-top: 2.9rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; } /* On a phone the hero button was 63% of the viewport — the padding is already at its clamp minimum there, so the width comes from the tracking and the width is read as bulk from the glow. Tighten both, and keep the vertical padding high enough to hold a 44px tap target. */ @media (max-width: 560px) { .hero .btn { padding: 0.88rem 1.4rem; /* ~46px tall — above the 44px tap minimum */ font-size: 0.62rem; letter-spacing: 0.15em; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 6px 18px -12px rgba(138,110,57,0.55); } .hero__actions { margin-top: 2.4rem; } } /* Spec rail — full-bleed glass bar sitting on the bottom edge of the film. */ .hero__rail { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); background: rgba(10, 9, 8, 0.34); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-top: 1px solid rgba(226, 207, 160, 0.28); } .hero__facts { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.15rem, 2.4vh, 1.75rem) 0; display: grid; grid-template-columns: repeat(3, 1fr); } .hero__fact { position: relative; display: flex; flex-direction: column-reverse; /* value reads above its label */ align-items: center; gap: 0.5rem; padding-inline: 1rem; } .hero__fact + .hero__fact::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 58%; background: rgba(255, 255, 255, 0.16); } .hero__fact dt { font-size: 0.58rem; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); line-height: 1; } .hero__fact dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1; color: var(--gold-lt); letter-spacing: 0.015em; } @media (max-width: 560px) { .hero__fact { padding-inline: 0.4rem; gap: 0.4rem; } .hero__fact dt { font-size: 0.5rem; letter-spacing: 0.22em; } } /* Compact variant used in the Register section */ .mini-facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0; } .mini-facts dt { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tx-light-2); margin-bottom: 0.5rem; } .mini-facts dd { margin: 0; font-family: var(--f-display); font-size: 1.4rem; color: var(--gold-lt); line-height: 1; } /* -------------------------------------------------------------------------- 8. Intro / statement -------------------------------------------------------------------------- */ .about { position: relative; } /* Warm limestone wash so the field is not a flat colour. */ .about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 46% at 14% 8%, rgba(194,161,93,0.10) 0%, rgba(194,161,93,0) 100%), radial-gradient(52% 50% at 92% 96%, rgba(194,161,93,0.08) 0%, rgba(194,161,93,0) 100%); pointer-events: none; } .about > .shell { position: relative; z-index: 1; } /* Rotated margin label */ .about__spine { position: absolute; /* sits inside the shell's own gutter, left of the content column */ left: 0; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.44em; text-transform: uppercase; color: var(--tx-soft); opacity: 0.55; } .about__spine::after { content: ""; display: block; width: 1px; height: clamp(48px, 7vw, 92px); margin: 0.9rem auto 0; background: linear-gradient(to bottom, var(--gold) 0%, rgba(194,161,93,0) 100%); } @media (max-width: 1180px) { .about__spine { display: none; } } .statement { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2.4rem, 6vw, 5.5rem); align-items: center; } @media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: 2.6rem; } } /* --- layered media stack --- */ .statement__media { position: relative; } .statement__tall { position: relative; overflow: hidden; border-radius: 2px; box-shadow: 0 34px 70px -40px rgba(23, 21, 15, 0.55); } .statement__tall img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; /* centres the portrait crop on the skyline's tallest cluster and its reflection */ object-position: 48% center; transition: transform 1.4s var(--ease); } .statement__media:hover .statement__tall img { transform: scale(1.035); } .statement__inset { position: absolute; right: clamp(-4.5rem, -4vw, -2rem); bottom: clamp(-2.4rem, -3vw, -1.6rem); width: clamp(150px, 21vw, 260px); overflow: hidden; border-radius: 2px; border: clamp(5px, 0.7vw, 9px) solid var(--bone); box-shadow: 0 26px 54px -26px rgba(23, 21, 15, 0.6); } .statement__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 900px) { .statement__tall img { aspect-ratio: 4 / 3.6; } .statement__inset { right: 0; bottom: clamp(-1.6rem, -4vw, -1rem); width: clamp(128px, 34vw, 190px); } } /* --- copy --- */ .statement__rule { width: clamp(56px, 8vw, 104px); height: 1px; background: var(--gold); border: 0; margin: clamp(1.5rem, 3vw, 2.2rem) 0; } .drop > p:first-of-type::first-letter { float: left; font-family: var(--f-display); font-size: 4.1em; line-height: 0.8; padding: 0.06em 0.14em 0 0; color: var(--gold-dk); font-weight: 400; } .drop > p + p { margin-top: 1.25em; } /* -------------------------------------------------------------------------- 9. Location -------------------------------------------------------------------------- */ /* Lets a full-bleed image lead a section with no gap above it. */ .sec--flush-top { padding-top: 0; } /* The map is a designed plate — never cropped, only scaled. It leads the section full-bleed and dissolves into the dark field beneath it. */ .locmap { position: relative; background: #DDE4E7; /* the map's own sea colour, so edges never flash */ } .locmap__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .locmap img { width: 100%; height: auto; display: block; } .locmap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(90px, 16%, 260px); background: linear-gradient(to bottom, rgba(10,9,8,0) 0%, rgba(10,9,8,0.72) 62%, var(--ink) 100%); pointer-events: none; } .locmap__hint { display: none; } /* Below ~760px the labels stop being legible, so let the plate keep its width and allow the reader to pan it rather than shrink it to mush. */ @media (max-width: 760px) { .locmap img { width: 880px; max-width: none; } .locmap__hint { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tx-light-2); } .locmap__hint::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; } } .loc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2.4rem, 6vw, 6rem); padding-top: clamp(2.4rem, 5vw, 4rem); align-items: start; } @media (max-width: 940px) { .loc__body { grid-template-columns: 1fr; gap: 2.6rem; } } .dist { border-top: 1px solid var(--line-dk); } /* Stacked rows: small-caps place above a large serif travel time. */ .dist__row { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.05rem, 2vw, 1.6rem) 0; border-bottom: 1px solid var(--line-dk); transition: padding-left 0.55s var(--ease), border-color 0.45s var(--ease); } .dist__row:hover { padding-left: 0.7rem; border-bottom-color: rgba(226, 207, 160, 0.45); } .dist__place { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4; color: var(--tx-light-2); } .dist__time { font-family: var(--f-display); font-size: clamp(1.6rem, 1.25rem + 1vw, 2.2rem); line-height: 1; color: var(--tx-light); letter-spacing: 0.02em; } .dist__time span { font-family: var(--f-display); color: var(--gold-lt); margin-left: 0.22rem; } /* -------------------------------------------------------------------------- 10. Specs / configurations -------------------------------------------------------------------------- */ .res__head { max-width: 72ch; margin-inline: auto; text-align: center; } .res__head .eyebrow { justify-content: center; } .res__head .eyebrow::after { content: ""; width: clamp(28px, 4vw, 54px); height: 1px; background: currentColor; opacity: 0.55; flex: none; } .res__head .lede { margin-inline: auto; } /* The heading carries the full keyword phrase; the trailing clause is set as a small-caps line so it reads as a subtitle rather than a fourth line of display type. */ .h-tail { display: block; margin-top: 1.1rem; font-family: var(--f-sans); font-size: clamp(0.66rem, 0.6rem + 0.22vw, 0.78rem); font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.7; color: var(--tx-soft); } /* Configuration cards. Flex rather than grid so a trailing short row centres itself — with five cards across three columns the last two would otherwise hang left. */ .types { --cardgap: clamp(1rem, 2vw, 1.75rem); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cardgap); margin-top: clamp(3rem, 6vw, 5rem); } .type { flex: 0 1 calc((100% - 2 * var(--cardgap)) / 3); } @media (max-width: 900px) { .type { flex-basis: calc((100% - var(--cardgap)) / 2); } } @media (max-width: 560px) { .type { flex-basis: 100%; } } .type { display: flex; flex-direction: column; background: #FFFDF9; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 44px -30px rgba(23, 21, 15, 0.42); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } .type:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -32px rgba(23, 21, 15, 0.5); } .type__fig { position: relative; margin: 0; overflow: hidden; } .type__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.5s var(--ease); } .type:hover .type__fig img { transform: scale(1.055); } .type__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.1rem, 2vw, 1.6rem); text-align: center; } .type__n { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.15; color: var(--gold-dk); letter-spacing: 0; } .type__size { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); } .type__l { font-size: 0.82rem; line-height: 1.6; color: var(--tx-soft); letter-spacing: 0.01em; } /* Gold hairline separating the description from the commercial line. */ .type__body hr { width: 40px; height: 1px; border: 0; margin: 0.35rem 0; background: var(--gold); opacity: 0.7; transition: width 0.7s var(--ease); } .type:hover .type__body hr { width: 78px; } /* Per-card action — the underline sweeps in from the left on hover. */ .type__cta { position: relative; margin-top: 0.2rem; padding-bottom: 0.4rem; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dk); text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; } .type__cta::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .type:hover .type__cta::before, .type__cta:focus-visible::before { transform: scaleX(1); } .type__cta::after { content: "\2192"; font-size: 0.82rem; transition: transform 0.6s var(--ease); } .type:hover .type__cta::after { transform: translateX(4px); } /* Badge for the halo product. */ .type__tag { position: absolute; top: clamp(0.8rem, 1.6vw, 1.1rem); left: clamp(0.8rem, 1.6vw, 1.1rem); z-index: 1; padding: 0.45rem 0.8rem; font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-lt); background: rgba(10, 9, 8, 0.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(226, 207, 160, 0.42); border-radius: 2px; } /* -------------------------------------------------------------------------- 11. Architecture — full-bleed split -------------------------------------------------------------------------- */ .arch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 88vh; align-items: stretch; } @media (max-width: 980px) { .arch { grid-template-columns: 1fr; min-height: 0; } } .arch__media { position: relative; overflow: hidden; } .arch__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 980px) { .arch__media { position: relative; aspect-ratio: 16 / 11; } .arch__media img { position: absolute; } } .arch__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5.5rem); background: var(--ink-2); } /* -------------------------------------------------------------------------- 12. Video -------------------------------------------------------------------------- */ .film { position: relative; background: var(--ink); } .film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); } @media (max-width: 720px) { .film__frame { aspect-ratio: 4 / 3; } } .film__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .film__veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(10,9,8,0.45), rgba(10,9,8,0.12) 45%, rgba(10,9,8,0.72)); } .film__ui { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; gap: 0; text-align: center; padding: var(--gut); } .film__label { position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 5vh, 3.4rem); font-family: var(--f-display); font-size: clamp(1.4rem, 0.9rem + 2vw, 2.6rem); color: #fff; font-style: italic; text-shadow: 0 2px 30px rgba(0,0,0,0.5); } .play { position: relative; width: clamp(74px, 9vw, 112px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(226,207,160,0.6); background: rgba(10,9,8,0.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.45s var(--ease); } .play:hover { background: rgba(194,161,93,0.28); border-color: var(--gold-lt); transform: scale(1.06); } .play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(226,207,160,0.34); animation: halo 3.2s var(--ease-io) infinite; } @keyframes halo { 0% { transform: scale(0.94); opacity: 0.9; } 70% { transform: scale(1.16); opacity: 0; } 100% { transform: scale(1.16); opacity: 0; } } .play svg { width: 24%; margin-left: 12%; fill: var(--gold-lt); } /* -------------------------------------------------------------------------- 13. Amenities -------------------------------------------------------------------------- */ /* Image-led: each group is a render with its list beneath, no card chrome. */ .amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.6vw, 3.4rem) clamp(1.4rem, 2.6vw, 2.4rem); margin-top: clamp(2.6rem, 5vw, 4.2rem); } @media (max-width: 940px) { .amen { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .amen { grid-template-columns: 1fr; } } .amen__fig { position: relative; margin: 0 0 clamp(1.1rem, 2vw, 1.5rem); overflow: hidden; border-radius: 2px; } .amen__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.5s var(--ease); } .amen__card:hover .amen__fig img { transform: scale(1.055); } .amen__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.08) 46%, rgba(10,9,8,0) 100%); } .amen__idx { position: absolute; left: clamp(0.85rem, 1.6vw, 1.15rem); bottom: clamp(0.7rem, 1.4vw, 1rem); z-index: 1; font-family: var(--f-display); font-size: 0.9rem; letter-spacing: 0.14em; color: var(--gold-lt); } .amen__card h3 { font-size: clamp(1.28rem, 1.05rem + 0.7vw, 1.62rem); color: var(--bone); margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem); } .amen__list li { position: relative; padding: 0.5rem 0 0.5rem 1.4rem; font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.65; color: var(--tx-light-2); border-top: 1px solid rgba(247,243,235,0.07); transition: color 0.4s var(--ease); } .amen__list li:first-child { border-top: 0; } .amen__list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 7px; height: 1px; background: var(--gold); transition: width 0.45s var(--ease); } .amen__card:hover .amen__list li { color: rgba(247,243,235,0.86); } .amen__card:hover .amen__list li::before { width: 13px; } /* -------------------------------------------------------------------------- 14. Gallery -------------------------------------------------------------------------- */ /* Full-bleed drag carousel */ .car { margin-top: clamp(2.6rem, 5vw, 4rem); } .car__track { display: flex; gap: clamp(0.6rem, 1.2vw, 1rem); padding-inline: var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .car__track::-webkit-scrollbar { display: none; } .car__track.is-drag { scroll-snap-type: none; scroll-behavior: auto; } /* Grab cursors only where there is a real pointer — dragging is mouse-only. */ @media (hover: hover) and (pointer: fine) { .car__track { cursor: grab; } .car__track.is-drag { cursor: grabbing; } } .gal__item { position: relative; flex: 0 0 clamp(260px, 58vw, 880px); aspect-ratio: 3 / 2; scroll-snap-align: center; overflow: hidden; background: var(--ink-3); cursor: zoom-in; border-radius: 2px; } .car__track.is-drag .gal__item { cursor: grabbing; } .gal__item img { pointer-events: none; -webkit-user-drag: none; user-select: none; } /* Caption lives in the bar below, but stays in the DOM for the lightbox. */ .car .gal__cap { display: none; } /* Enlarge affordance */ .gal__zoom { position: absolute; top: clamp(0.7rem, 1.4vw, 1rem); right: clamp(0.7rem, 1.4vw, 1rem); z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--bone); background: rgba(10, 9, 8, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(247, 243, 235, 0.26); /* Always visible — it is the affordance that tells you the image opens. */ opacity: 0.85; transition: opacity 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none; } .gal__zoom svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; } .gal__item:hover .gal__zoom, .gal__item:focus-visible .gal__zoom { opacity: 1; transform: scale(1.08); background: rgba(194, 161, 93, 0.85); border-color: var(--gold); } .car__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(1.1rem, 2vw, 1.6rem); padding-bottom: clamp(1.4rem, 2.6vw, 2rem); border-bottom: 1px solid var(--line-lt); } .car__note { max-width: 78ch; margin-top: clamp(1.4rem, 2.6vw, 2rem); font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); line-height: 1.8; color: var(--tx-soft); } .car__cap { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tx-soft); } .car__ctrl { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.2rem); } .car__btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-lt); border-radius: 50%; color: var(--ink); background: transparent; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease); } .car__btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: #fff; } .car__btn:disabled { opacity: 0.28; cursor: default; } .car__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; } .car__count { font-family: var(--f-display); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--tx-soft); min-width: 5.5ch; text-align: right; } .car__count b { color: var(--gold-dk); font-weight: 400; } @media (max-width: 700px) { .gal__item { flex-basis: 84vw; aspect-ratio: 4 / 3; } } .gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.7s var(--ease); } .gal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.5), rgba(10,9,8,0) 55%); opacity: 0; transition: opacity 0.55s var(--ease); } .gal__item:hover img { transform: scale(1.055); } .gal__item:hover::after { opacity: 1; } .gal__cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.3rem; font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .gal__item:hover .gal__cap { opacity: 1; transform: none; } /* Lightbox */ .lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(6, 5, 4, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; } .lb.is-open { opacity: 1; visibility: visible; } .lb__img { max-width: min(100%, 1500px); max-height: 84vh; object-fit: contain; transform: scale(0.97); transition: transform 0.5s var(--ease); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9); } .lb.is-open .lb__img { transform: none; } .lb__cap { margin-top: 1.2rem; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-light-2); text-align: center; } .lb__btn { position: absolute; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line-dk); border-radius: 50%; color: var(--bone); background: rgba(10,9,8,0.5); transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } .lb__btn:hover { background: rgba(194,161,93,0.3); border-color: var(--gold); } .lb__btn--close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); } .lb__btn--prev { left: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } .lb__btn--next { right: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } .lb__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; } /* -------------------------------------------------------------------------- 15. Highlights -------------------------------------------------------------------------- */ .hl__grid--bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); } @media (max-width: 1100px) { .hl__grid--bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hl__grid--bento { grid-template-columns: 1fr; } } .hl__card { position: relative; padding: 2.2rem 1.8rem; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; gap: 1.2rem; overflow: hidden; } .hl__card--media { padding: 0; border: none; background: transparent; } .hl__card--media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hl__card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); } .hl__card--media:hover { transform: translateY(-6px) scale(1.02); } .hl__icon { width: 2.8rem; height: 2.8rem; color: var(--gold-dk); display: block; } .hl__icon svg { width: 100%; height: 100%; stroke-width: 1.2; } .hl__text { font-size: 0.94rem; line-height: 1.6; color: var(--tx-mid); margin: 0; } .hl__text strong { color: var(--ink-2); font-size: 1.1rem; font-weight: 500; display: block; margin-bottom: 0.2rem; } /* -------------------------------------------------------------------------- 15b. Floor Plans -------------------------------------------------------------------------- */ .fp-tabs { margin-top: clamp(2.4rem, 5vw, 3.6rem); } .fp-tabs__nav { display: flex; gap: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 2.5rem; overflow-x: auto; } .fp-tabs__btn { background: none; border: none; padding: 1rem 0; font-family: var(--f-display); font-size: 1.4rem; color: var(--tx-mid); cursor: pointer; position: relative; transition: color 0.3s ease; white-space: nowrap; } .fp-tabs__btn::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--gold-dk); transition: width 0.3s ease; } .fp-tabs__btn:hover { color: var(--bone-2); } .fp-tabs__btn.is-active { color: var(--gold-dk); } .fp-tabs__btn.is-active::after { width: 100%; } .fp-tabs__panel { display: none; animation: fade-in 0.5s ease; } .fp-tabs__panel.is-active { display: block; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fp-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 4rem); align-items: stretch; background: #ffffff; padding: 3rem; max-width: 1300px; margin: 0 auto; } @media (max-width: 920px) { .fp-layout { grid-template-columns: 1fr; padding: 0; background: transparent; gap: 3rem; } } .fp-layout__visual { background: #fdfdfd; display: flex; align-items: center; justify-content: center; position: relative; padding: 2rem; } .fp-layout__visual img { width: 100%; max-height: 550px; object-fit: contain; } .fp-layout__specs { display: flex; flex-direction: column; padding: 1rem 0; } @media (min-width: 921px) { .fp-layout { background: transparent; padding: 0; } .fp-layout__visual { background: #ffffff; padding: 3rem; } .fp-layout__specs { padding-left: 2rem; } } .fp-list { list-style: none; padding: 0; margin: 0 0 3rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .fp-list li { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.95rem; } .fp-list li span { color: var(--tx-mid); } .fp-list li strong { color: var(--bone-2); font-weight: 400; font-family: var(--f-display); letter-spacing: 0.05em; } /* -------------------------------------------------------------------------- 15c. Payment Plan -------------------------------------------------------------------------- */ .payment-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; } @media (max-width: 920px) { .payment-plan { grid-template-columns: 1fr; gap: 2rem; } } .pp-step { background: #ffffff; padding: 2.5rem 1.5rem; text-align: center; border: 1px solid var(--gold-lt); position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.02); } .pp-step::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--gold-dk); transition: width 0.4s ease; } .pp-step:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.06); } .pp-step:hover::before { width: 120px; } .pp-val { font-family: var(--f-display); font-size: 3.5rem; line-height: 1; color: var(--gold-dk); font-weight: 300; margin-bottom: 1.5rem; } .pp-val small { font-size: 2.5rem; opacity: 0.8; } .pp-title { font-size: 1.1rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .pp-sub { font-size: 0.95rem; color: var(--tx-mid); } /* -------------------------------------------------------------------------- 16. Developer -------------------------------------------------------------------------- */ .dev--poster { position: relative; display: block; width: 100%; } .dev__figure { width: 85%; margin: 0; } .dev__figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 4px; } .dev__card { position: absolute; bottom: -3rem; right: 0; width: 90%; max-width: 660px; background: #111111; /* deeper dark for contrast */ padding: 4rem; border: 1px solid rgba(255,255,255,0.1); box-shadow: -10px 30px 60px rgba(0,0,0,0.5); z-index: 2; } @media (max-width: 920px) { .dev__figure { width: 100%; } .dev__figure img { aspect-ratio: 4 / 3; } .dev__card { position: relative; bottom: auto; right: auto; width: 92%; max-width: 100%; margin: -4rem auto 0; padding: 2.5rem; } } /* -------------------------------------------------------------------------- 17. FAQ -------------------------------------------------------------------------- */ .faq { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); border-top: 1px solid var(--line-lt); } .faq__item { border-bottom: 1px solid var(--line-lt); } .faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.55rem 0; text-align: left; font-family: var(--f-display); font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.42rem); font-weight: 400; line-height: 1.36; color: var(--tx-dark); transition: color 0.35s var(--ease); } .faq__q:hover { color: var(--gold-dk); } .faq__ico { flex: none; position: relative; width: 17px; height: 17px; margin-top: 0.4em; } .faq__ico::before, .faq__ico::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--gold-dk); transition: transform 0.5s var(--ease); } .faq__ico::after { transform: rotate(90deg); } .faq__item.is-open .faq__ico::after { transform: rotate(0deg); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .faq__item.is-open .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 0 1.7rem; max-width: 62ch; color: var(--tx-mid); font-size: 0.96rem; } .faq__a ul { padding: 0 0 1.7rem 1.1rem; margin: 0; color: var(--tx-mid); font-size: 0.96rem; } .faq__a li { position: relative; padding-left: 0.9rem; margin-bottom: 0.35rem; } .faq__a li::before { content: ""; position: absolute; left: 0; top: 0.82em; width: 6px; height: 1px; background: var(--gold); } /* -------------------------------------------------------------------------- 18. Register / form -------------------------------------------------------------------------- */ .reg { position: relative; overflow: hidden; background: var(--ink); } .reg__bg { position: absolute; inset: 0; z-index: 0; } .reg__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; } .reg__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.72) 48%, rgba(10,9,8,0.9) 100%); } .reg .shell { position: relative; z-index: 1; } .reg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } @media (max-width: 920px) { .reg__grid { grid-template-columns: 1fr; } } .form { background: rgba(20, 17, 13, 0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-dk); padding: clamp(1.75rem, 3.6vw, 3rem); border-radius: 2px; } .field { margin-bottom: 1.35rem; } .field label { display: block; margin-bottom: 0.6rem; font-size: 0.63rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-light-2); } .field label .req { color: var(--gold); } .field input, .field select { width: 100%; padding: 0.95rem 1.1rem; font-family: var(--f-sans); font-size: 16px; /* Must be at least 16px to prevent iOS zoom bug */ font-weight: 300; color: var(--bone); background: rgba(247, 243, 235, 0.045); border: 1px solid var(--line-dk); border-radius: 2px; transition: border-color 0.35s var(--ease), background 0.35s var(--ease); -webkit-appearance: none; appearance: none; } .field input::placeholder { color: rgba(247,243,235,0.32); } .field input:focus, .field select:focus { outline: none; border-color: var(--gold); background: rgba(247, 243, 235, 0.075); } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23C2A15D' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 15px; padding-right: 2.8rem; cursor: pointer; } .field select option { background: var(--ink-2); color: var(--bone); } .iti { width: 100%; } .iti__dropdown-content { background: rgba(20, 17, 13, 0.95) !important; backdrop-filter: blur(10px) !important; border: 1px solid var(--line-dk) !important; border-radius: 2px !important; } .iti__country-list { background: transparent !important; color: var(--bone); border: none !important; font-family: var(--f-sans); font-size: 0.9rem; } .iti__search-input, .iti__search-input-wrapper, .custom-iti-search, .iti__country-list input[type="text"] { background: transparent !important; color: var(--bone) !important; border: none !important; border-bottom: 1px solid var(--line-dk) !important; border-radius: 0 !important; padding: 0.8rem 1rem !important; width: 100% !important; box-sizing: border-box !important; } .custom-iti-search::placeholder, .iti__country-list input[type="text"]::placeholder { color: rgba(247,243,235,0.32) !important; } .custom-iti-search:focus, .iti__country-list input[type="text"]:focus { outline: none !important; background: transparent !important; border-bottom: 1px solid var(--gold) !important; box-shadow: none !important; } .iti__country.iti__highlight { background: rgba(255,255,255,0.05); } .iti__selected-dial-code { color: var(--bone); } .iti__selected-country { background-color: transparent !important; } .iti__selected-country:hover { background-color: rgba(255,255,255,0.02) !important; } .iti--allow-dropdown .iti__selected-flag { padding: 0 12px 0 12px; } .field--phone input { border-radius: 0 2px 2px 0; } .field.has-error input, .field.has-error select { border-color: #C4614B; } .field__err { display: none; margin-top: 0.45rem; font-size: 0.68rem; letter-spacing: 0.06em; color: #E0907C; } .field.has-error .field__err { display: block; } .form__note { margin-top: 1.2rem; font-size: 0.68rem; line-height: 1.7; color: rgba(247,243,235,0.42); letter-spacing: 0.04em; } .form__status { margin-top: 1.1rem; padding: 0.9rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.06em; border-radius: 2px; display: none; } .form__status.is-ok { display: block; background: rgba(194,161,93,0.14); border: 1px solid rgba(194,161,93,0.45); color: var(--gold-lt); } .form__status.is-err { display: block; background: rgba(196,97,75,0.12); border: 1px solid rgba(196,97,75,0.45); color: #E0907C; } .btn[data-busy="1"] { pointer-events: none; opacity: 0.65; } /* -------------------------------------------------------------------------- /* Overview custom layout */ .ovw__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } @media (max-width: 960px) { .ovw__grid { grid-template-columns: 1fr; gap: 3rem; } } .ovw__fig { position: relative; height: 500px; overflow: hidden; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .ovw__img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .ovw__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1); display: block; } .ovw__img-wrap:hover img { transform: scale(1.04); } .ovw__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%); pointer-events: none; transition: opacity 0.8s ease; } .ovw__img-wrap:hover .ovw__img-overlay { opacity: 0.2; } /* -------------------------------------------------------------------------- 19. Footer -------------------------------------------------------------------------- */ .ftr { background: var(--ink-2); color: var(--tx-light-2); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; } .ftr__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: start; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dk); } @media (max-width: 760px) { .ftr__top { grid-template-columns: 1fr; } } .ftr__brand img { width: clamp(130px, 15vw, 170px); } .ftr__nav { display: flex; flex-wrap: wrap; gap: 0.9rem 2rem; } .ftr__nav a { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.35s var(--ease); } .ftr__nav a:hover { color: var(--gold-lt); } .ftr__disc { margin-top: 2.2rem; font-size: 0.71rem; line-height: 1.85; color: rgba(247,243,235,0.4); max-width: 92ch; } .ftr__base { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dk); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,243,235,0.38); } /* -------------------------------------------------------------------------- 20. Sticky mobile CTA -------------------------------------------------------------------------- */ .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(10, 9, 8, 0.93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line-dk); transform: translateY(110%); transition: transform 0.5s var(--ease); } .mcta.is-on { transform: none; } @media (max-width: 780px) { .mcta { display: block; } } /* -------------------------------------------------------------------------- 21. Scroll reveal -------------------------------------------------------------------------- */ [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); transition-delay: var(--d, 0s); } [data-rv].is-in { opacity: 1; transform: none; } [data-rv="fade"] { transform: none; } [data-rv="left"] { transform: translateX(-28px); } [data-rv="right"] { transform: translateX(28px); } [data-rv="left"].is-in, [data-rv="right"].is-in { transform: none; } /* The horizontal reveal offset must never exceed the page gutter, or every not-yet-revealed element sits past the viewport edge and the page pans sideways. Below 700px the gutter bottoms out at its 1.25rem minimum (20px) while the offset is 28px — an 8px overflow. Reveal vertically. */ @media (max-width: 700px) { [data-rv="left"], [data-rv="right"] { transform: translateY(26px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-rv] { opacity: 1 !important; transform: none !important; } .hero__media img { animation: none; } } /* Print */ @media print { .hdr, .mcta, .drawer, .lb, .film, .modal { display: none !important; } body { background: #fff; color: #000; } .sec--dark, .sec--ink2, .reg { background: #fff !important; color: #000 !important; } } /* -------------------------------------------------------------------------- 22. Modal -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 9999; display: flex; /* The panel is centred with `margin: auto` rather than `align-items`, because a flex-centred child taller than its container overflows equally in both directions and the top becomes unreachable. With auto margins it centres when there is room and scrolls cleanly when there is not — which is what happens on a phone once the keyboard is open. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: clamp(1rem, 4vh, 2.5rem) 1rem; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .modal.is-open { opacity: 1; pointer-events: auto; } .modal__overlay { position: fixed; /* stays covering the viewport now that .modal scrolls */ inset: 0; background: rgba(10, 8, 6, 0.8); backdrop-filter: blur(8px); } .modal__content { position: relative; z-index: 2; margin: auto; width: 100%; max-width: 500px; background: var(--ink-1); border: 1px solid var(--line-dk); border-radius: 4px; transform: scale(0.95); transition: transform 0.4s var(--ease); box-shadow: 0 30px 60px rgba(0,0,0,0.5); } .modal.is-open .modal__content { transform: scale(1); } .modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; background: transparent; border: none; color: var(--tx-mid); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; } .modal__close:hover { color: var(--bone); } .modal__close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; } .modal__body { padding: 2.5rem; } .modal__body .form { background: transparent; border: none; padding: 0; backdrop-filter: none; }