@font-face { font-family: "DCG Mark"; src: url("assets/dcg-logo.ttf") format("truetype"); font-weight: 700; font-display: swap } @font-face { font-family: "Iowan DCG"; src: url("assets/iowan-roman.ttf") format("truetype"); font-weight: 400; font-display: swap } @font-face { font-family: "Iowan Titling DCG"; src: url("assets/iowan-titling.ttf") format("truetype"); font-weight: 400; font-display: swap } @font-face { font-family: "Suisse DCG"; src: url("assets/suisse-regular.ttf") format("truetype"); font-style: normal; font-display: swap } @font-face { font-family: "Suisse DCG"; src: url("assets/suisse-italic.ttf") format("truetype"); font-style: italic; font-display: swap } :root { --color-bg-cream: #fdf9f6; --color-text-dark: #000000; --color-text-muted: #6b6860; --color-olive: #3a4034; --color-cream-text: #f2efe9; --color-olive-gold: #a6a392; --color-border-light: #c9c2b4; --color-border-dark: #8b8f7e; --font-heading: "Iowan DCG", Georgia, serif; --font-ui: "Suisse DCG", Arial, sans-serif; --font-mark: "DCG Mark", "Arial Narrow", sans-serif; --font-partner: "Iowan Titling DCG", Georgia, serif; --header-height: 72px; --container: 1280px; --side-padding: 80px; --section-space: 112px; --transition: 320ms ease-out } * { box-sizing: border-box } html { scroll-behavior: smooth } body { margin: 0; background: var(--color-bg-cream); color: var(--color-text-dark); font-family: var(--font-ui); font-size: 14px; line-height: 1.6; letter-spacing: 0; overflow-x: hidden } body, button, input { font-family: var(--font-ui) } a { color: inherit } button { color: inherit } .site-shell { min-width: 0 } .container { width: min(100%, var(--container)); margin-inline: auto; /* padding-inline: var(--side-padding) */ } /* ---------- Preloader ---------- */ /* Covers everything until window load. The header, the highest thing on the page, sits at z-index 50; script.js removes this node once it has faded, so it never intercepts a click or a scroll afterwards. */ .preloader { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: var(--side-padding); background: var(--color-bg-cream); transition: opacity 640ms ease-out } .preloader--hidden { opacity: 0; pointer-events: none } .preloader__inner { display: flex; flex-direction: column; align-items: center } /* The header's own .brand-lockup, at a size that carries a blank screen. The descendant selector is needed to outrank `.brand-lockup img`'s fixed 125px, which is declared later in this file. */ .preloader .brand-lockup img { width: clamp(130px, 38vw, 190px); animation: preloader-breathe 2400ms ease-in-out infinite } /* A hairline under the mark, echoing the underline on the header links. */ .preloader__line { position: relative; overflow: hidden; width: clamp(130px, 38vw, 190px); height: 1px; margin-top: 28px; background: color-mix(in srgb, var(--color-border-light) 50%, transparent) } .preloader__line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; background: var(--color-text-dark); animation: preloader-sweep 1700ms cubic-bezier(.45, .05, .55, .95) infinite } @keyframes preloader-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .5 } } @keyframes preloader-sweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(363%) } } /* Set on in the markup and removed by script.js once the overlay is gone. The lock goes on the root rather than on so it governs the viewport directly, without relying on body's overflow propagating to it. */ html.is-preloading, html.is-preloading body { overflow: hidden } /* Hiding the overflow also takes away a classic scrollbar, which would let the page reflow ~15px wider and then snap back as the overlay leaves. This stands in for that missing scrollbar; script.js measures the real width, which is 0 wherever scrollbars are drawn as an overlay (macOS, iOS, Android), so nothing is padded on those platforms. `scrollbar-gutter: stable` is not usable here — it would reserve the gutter on the overlay-scrollbar platforms too, narrowing the whole site by 15px on a phone. */ html.is-preloading { padding-right: var(--scroll-lock-gutter, 0px) } .site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 90px; background: var(--color-bg-cream); border-bottom: 1px solid transparent; transition: border-color var(--transition), box-shadow var(--transition) } .site-header--scrolled { border-color: color-mix(in srgb, var(--color-border-light) 65%, transparent); box-shadow: 0 4px 18px color-mix(in srgb, var(--color-text-dark) 8%, transparent) } .header-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--side-padding) } .menu-trigger, .header-register { background: none; border: 0; padding: 0; width: max-content; text-transform: uppercase; font-size: 12px; letter-spacing: .17em; text-decoration: none; text-underline-offset: 5px; cursor: pointer; padding-bottom: 7px; border-bottom: 1.5px solid #000000; } .header-register { justify-self: end } .brand-lockup { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1 } .brand-lockup img { width: 125px; height: auto; object-fit: contain; } .brand-lockup strong, .footer-dcg strong { font-family: var(--font-mark); font-size: 24px; line-height: .9; letter-spacing: 0 } .brand-lockup span, .footer-dcg span { margin-top: 7px; font-size: 8px; text-transform: uppercase; letter-spacing: .19em } .hamburger { display: none } .site-nav { position: absolute; top: 100%; left: 0; display: none; width: 100%; padding: 30px var(--side-padding); background: var(--color-bg-cream); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light) } .site-nav--open { display: grid; gap: 16px } .site-nav a { text-decoration: none; text-transform: uppercase; font-size: 11px; letter-spacing: .15em } .photo-section { position: relative; isolation: isolate; overflow: hidden; background: var(--color-olive-gold) } .asset-image { display: block; width: 100%; height: 100%; object-fit: cover } .photo-section>.asset-image { position: absolute; inset: 0; z-index: -2 } .photo-shade { position: absolute; z-index: -1; inset: 0; pointer-events: none } .photo-shade--bottom { background: linear-gradient(to top, color-mix(in srgb, var(--color-text-dark) 70%, transparent), transparent 65%) } .photo-shade--left { background: linear-gradient(to right, color-mix(in srgb, var(--color-text-dark) 62%, transparent), transparent 65%) } .photo-overlay { position: relative; color: var(--color-cream-text) } .photo-overlay--bottom { display: flex; min-height: calc(90vh - var(--header-height)); padding-top: 200px; padding-bottom: 76px; flex-direction: column; justify-content: flex-end; align-items: flex-start } .photo-overlay--top { min-height: 760px; padding-top: 110px } .photo-overlay--dark { color: var(--color-text-dark) } h1, h2 { margin: 24px 0 18px; font-family: var(--font-heading); font-weight: 400; line-height: 1.16; letter-spacing: 0 } h1 { max-width: 760px; font-size: clamp(44px, 5vw, 64px) } h2 { font-size: clamp(30px, 3.15vw, 40px) } p { margin: 0; max-width: 390px } .eyebrow-badge { display: inline-flex; padding: 6px 14px; border: 2px solid var(--color-text-dark); font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: .30em; text-transform: uppercase; margin-bottom: 5px; } .eyebrow-badge--light { border-color: var(--color-border-dark); color: var(--color-cream-text) } .text-link { display: inline-block; padding-bottom: 10px; border-bottom: 2px solid currentColor; text-decoration: none; text-transform: uppercase; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: .17em } .text-link--light { color: var(--color-cream-text) } .cream-section { background: var(--color-bg-cream) } .dark-section { background: var(--color-olive); color: var(--color-cream-text) } .masterplan-section { padding: var(--section-space) 0 } .section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 64px } .section-copy h2 { max-width: 640px } .section-heading-row>.text-link { margin-top: 9px; flex: none } .masterplan-image { height: clamp(440px, 58vw, 760px) } .masterplan-image .asset-image { background: color-mix(in srgb, var(--color-olive-gold) 35%, var(--color-bg-cream)) } .setting-section { min-height: 760px } .setting-section .photo-overlay p { line-height: 1.9; margin-bottom: 50px; } .setting-section h2#setting-title { margin-top: 0; } section#setting { margin-bottom: 10px; } .map-section { min-height: 760px } .map-section .photo-overlay { color: var(--color-cream-text) } .map-section h2 { margin-top: 0 } .proportion-section { padding: 130px 0; text-align: center } .centered-copy { display: flex; flex-direction: column; align-items: center } .proportion-section h2 { font-size: clamp(36px, 5vw, 58px); white-space: nowrap } .proportion-section h2 em { color: var(--color-olive-gold); font-style: normal } .proportion-section p { color: #FFFFFF; margin-bottom: 0 } .walk-section { min-height: 820px } .walk-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 820px; padding-top: 105px; padding-bottom: 80px; color: #FFFFFF; } .walk-copy { align-self: start } .walk-copy h2 { /* max-width: 420px */ } .walk-copy p { max-width: 450px; margin-bottom: 50px; } .walk-stats { /* display: grid; */ display: flex; /* grid-template-columns: auto auto; */ align-items: center; align-self: start; gap: 40px 64px } .walk-stats__item-right { margin-right: 64px; } .walk-stats__item strong { border-bottom: 1px solid #FFFFFF; padding-bottom: 5px; } .walk-stats div { display: flex; flex-direction: column; align-items: center; } .walk-stats strong { font-size: 32px; line-height: 1.1 } .walk-stats span { text-transform: uppercase; font-size: 14px; letter-spacing: .17em; /* margin-top: 10px; */ margin-top: 5px; font-weight: 800; } .walk-stats .text-link { grid-column: 1/-1; justify-self: end } .gallery-section { background: var(--color-bg-cream); padding: 16px 0 } .carousel { position: relative; overflow: hidden; touch-action: pan-y; background: #FFFFFF; } /* Owl Carousel: render exactly like the previous custom track */ .carousel .owl-carousel { position: relative; z-index: 0; width: 100% } .carousel .owl-carousel.owl-grab { cursor: auto } .carousel .owl-stage-outer { overflow: hidden } .carousel .owl-item .carousel-slide { width: 100% } /* Owl writes `transition` inline as a shorthand (property: all), which would animate the sub-pixel alignment nudge script.js applies to the stage. Only the transform should ever transition. */ .carousel .owl-stage { transition-property: transform !important } .carousel .owl-item img.asset-image { width: 100%; height: 100%; object-fit: cover } .carousel .carousel-controls { z-index: 2 } /* Before Owl initialises (or if it never loads), fall back to the old flex row */ .carousel .owl-carousel:not(.owl-loaded) { display: flex; gap: 16px } .carousel-slide { flex: 0 0 calc((100% - 32px)/3); height: 520px; margin: 0; overflow: hidden } .carousel-slide .asset-image { background: color-mix(in srgb, var(--color-olive-gold) 55%, var(--color-bg-cream)) } .carousel-controls { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: var(--color-text-dark) } .carousel-arrow { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; /* box-shadow: 0 2px 10px rgb(0 0 0 / 18%); */ /* backdrop-filter: blur(2px); */ color: #FFFFFF; cursor: pointer; pointer-events: auto; opacity: 1; transition: opacity var(--transition), transform var(--transition), background var(--transition), border-color var(--transition) } /* .carousel-arrow-icon { width: auto; height: 14px; display: block } */ .carousel-arrow:hover, .carousel-arrow:focus-visible { /* border-color: color-mix(in srgb, var(--color-cream-text) 72%, transparent); background: color-mix(in srgb, var(--color-olive) 44%, transparent); */ opacity: 1; transform: scale(1.06) } .carousel-arrow:focus-visible { outline: 2px solid var(--color-cream-text); outline-offset: 2px } .carousel-arrow:active { transform: scale(.98) } @media (prefers-reduced-motion: reduce) { .carousel-arrow:hover, .carousel-arrow:focus-visible, .carousel-arrow:active { transform: none } } .carousel-count { padding: 0 12px; background: var(--color-bg-cream); font-size: 9px; letter-spacing: .13em; pointer-events: auto } .panoramic-section { height: 760px; background: var(--color-olive-gold) } .panoramic-section .asset-image { background: color-mix(in srgb, var(--color-olive) 25%, var(--color-bg-cream)) } .residences-intro { min-height: 790px; } .residences-intro .photo-overlay { min-height: 790px; } .westin-lockup { display: flex; flex-direction: column; width: 100%; max-width: 174px; height: auto; margin: 34px 0 30px; text-align: center; text-transform: uppercase; line-height: 1.05 } .westin-lockup strong { font-size: 28px } .westin-lockup span { font-size: 15px; letter-spacing: .16em; margin-top: 5px; } .westin-lockup small { margin-top: 8px; font-size: 10px; letter-spacing: .18em } .residences-intro h2 { /* max-width: 480px */ } .residences-intro p { max-width: 100%; margin-bottom: 50px; } .carousel--residences .carousel-slide { flex-basis: 100%; height: 760px } .residences-download { padding: 36px 0; background: var(--color-olive) } .developer-section { padding: var(--section-space) 0 } .developer-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(60px, 9vw, 130px); align-items: start; } .developer-image { margin: 0 } .developer-image .asset-image { aspect-ratio: 1.18; object-fit: cover; background: color-mix(in srgb, var(--color-olive-gold) 45%, var(--color-bg-cream)) } .developer-image figcaption { margin-top: 12px; color: var(--color-text-muted); font-size: 9px; letter-spacing: .17em; text-transform: uppercase } .developer-copy h2 { max-width: 470px } .developer-copy p { font-size: 14px; max-width: 310px; margin-bottom: 60px; line-height: 2; } .site-footer { padding: 120px 0 36px } .site-footer span.eyebrow-badge.eyebrow-badge--light { border: none; padding: 0; } .enquiries-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(70px, 10vw, 150px) } .footer-intro h2 { max-width: 312px; } .footer-intro p { color: #FFFFFF; max-width: 265px; } .success-message p { color: var(--color-olive-gold) } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 36px } .form-field { display: flex; position: relative; flex-direction: column } .form-field span { color: #FFFFFF; font-size: 9px; letter-spacing: .17em; text-transform: uppercase } .form-field input { height: 38px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--color-border-dark); border-radius: 0; outline: none; background: transparent; color: var(--color-cream-text); font-size: 15px } .form-field input:focus { border-bottom-color: var(--color-cream-text) } .form-field input[aria-invalid="true"] { border-bottom-color: var(--color-cream-text) } .form-field small { position: absolute; top: 100%; font-size: 9px; color: var(--color-cream-text) } .primary-button { width: 100%; margin-top: 48px; padding: 17px 24px; border: 1px solid var(--color-bg-cream); border-radius: 0; background: var(--color-bg-cream); color: var(--color-text-dark); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer } .primary-button:hover, .primary-button:focus-visible { background: transparent; color: var(--color-cream-text) } .success-message { padding-top: 6px } .success-message>span { text-transform: uppercase; font-size: 10px; letter-spacing: .18em } .success-message h2 { max-width: 520px } .footer-divider { height: 1px; margin: 88px 0 42px; background: var(--color-border-dark) } .footer-main-row { /* display: grid; */ display: flex; justify-content: space-between; grid-template-columns: 1.2fr 1fr auto; gap: 45px; align-items: start; } .footer-brands { display: flex; gap: 34px; align-items: center } .footer-dcg { display: flex; flex-direction: column } .footer-dcg strong { color: var(--color-cream-text) } .footer-gp { display: flex; align-items: center; gap: 13px } .footer-gp img, .footer-dcg img { width: 135px; height: auto; object-fit: contain; } .footer-gp b { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--color-border-dark); font-size: 13px; letter-spacing: .08em } .footer-gp span { font-family: var(--font-partner); font-size: 12px; line-height: 1.15 } .footer-main-row address { color: #FFFFFF; font-style: normal; font-size: 9px; line-height: 1.8; /* letter-spacing: .11em; */ text-transform: uppercase } .footer-main-row address a { text-decoration: none } .footer-links { font-size: 9px; letter-spacing: .14em; text-transform: uppercase } .footer-links a { text-decoration: none } .legal-copy { margin-top: 55px; color: var(--color-olive-gold); font-size: 9px; line-height: 1.55 } .legal-copy p { max-width: none; margin-bottom: 12px; font-size: 9px; color: #FFFFFF; max-width: 725px; } .footer-final { display: flex; justify-content: space-between; color: var(--color-olive-gold); font-size: 8px; letter-spacing: .14em; text-transform: uppercase } .footer-final+.x { display: none } .footer-final~* { display: none } .site-footer .footer-divider:last-of-type { margin: 42px 0 26px } /* AOS now drives the section-level reveals. Where an element carries both a .reveal class and a data-aos attribute, AOS owns it and the IntersectionObserver in script.js skips it, so the two never fight over opacity/transform. */ .reveal:not([data-aos]) { opacity: 0; transform: translateY(18px); transition: opacity 360ms ease-out, transform 360ms ease-out } .reveal:not([data-aos]).is-visible { opacity: 1; transform: none } .system-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; background: var(--color-bg-cream) } .system-page-content { max-width: 440px; text-align: center } .system-page-code { font-size: 72px } .system-page-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px } .system-page-button { display: inline-flex; padding: 10px 16px; border: 1px solid var(--color-border-light); background: transparent; text-decoration: none; cursor: pointer } .system-page-button--primary { background: var(--color-olive); color: var(--color-cream-text) } :focus-visible { outline: 2px solid currentColor; outline-offset: 4px } @media(max-width:1024px) { :root { --side-padding: 48px; --section-space: 88px } .photo-overlay--bottom { min-height: 78vh } .photo-overlay--top, .setting-section, .map-section { min-height: 650px } .walk-layout, .walk-section { min-height: 720px } .walk-stats { grid-template-columns: 1fr; gap: 26px } .walk-stats .text-link { grid-column: auto; justify-self: start } .carousel-slide { height: 430px } .panoramic-section { height: 620px } .residences-intro, .residences-intro .photo-overlay { min-height: 680px } .carousel--residences .carousel-slide { height: 650px } .footer-main-row { grid-template-columns: 1fr 1fr } .footer-links { grid-column: 1/-1 } } @media(max-width:639px) { :root { --header-height: 66px; --side-padding: 22px; --section-space: 64px } body { font-size: 13px } .menu-label { display: none } .hamburger { display: flex; width: 22px; flex-direction: column; gap: 5px } .hamburger i { display: block; width: 100%; height: 1px; background: var(--color-text-dark) } .header-register { font-size: 12px; letter-spacing: .12em } .brand-lockup strong { font-size: 21px } .brand-lockup span { font-size: 7px } .site-nav { padding: 24px var(--side-padding) } h1 { font-size: 32px } h2 { font-size: 27px } .eyebrow-badge { padding: 5px 11px; font-size: 10px } .photo-overlay--bottom { min-height: 70vh; padding-top: 130px; padding-bottom: 44px } .hero-section p { max-width: 280px } .section-heading-row { display: block; margin-bottom: 36px } .section-heading-row>.text-link { margin-top: 8px } .masterplan-image { height: 360px; padding-inline: 0 } .photo-overlay--top, .setting-section, .map-section { min-height: 580px } .photo-overlay--top { padding-top: 72px } .setting-section .photo-overlay p { max-width: 270px } .map-section .photo-overlay { max-width: 290px; margin: 0 } .proportion-section { padding: 76px 0 } .proportion-section h2 { font-size: 28px } .walk-layout, .walk-section { min-height: 760px } .walk-layout { display: flex; flex-direction: column; padding-top: 68px; padding-bottom: 50px } .walk-copy p { max-width: 330px } .walk-stats { margin-top: 45px; gap: 22px } .walk-stats strong { font-size: 38px; } .gallery-section { padding: 8px 0 } .carousel .owl-carousel:not(.owl-loaded) { gap: 0 } .carousel-slide { flex-basis: 100%; height: 490px } .carousel-controls { left: 12px; right: 12px } .carousel-arrow { width: 42px; height: 42px } /* .carousel-arrow-icon { height: 13px } */ .panoramic-section { height: 500px } .residences-intro, .residences-intro .photo-overlay { min-height: 690px } .westin-lockup { margin: 28px 0 24px } .residences-intro p { max-width: 300px } .carousel--residences .carousel-slide { height: 520px } .residences-download { padding: 28px 0 } .developer-layout { display: flex; flex-direction: column; gap: 46px; align-items: stretch } .developer-image { order: 0 } .developer-copy { order: 1 } .developer-image .asset-image { aspect-ratio: 1 } .enquiries-grid { grid-template-columns: 1fr; gap: 50px } .form-grid { grid-template-columns: 1fr; gap: 30px } .site-footer { padding-top: 72px } .footer-divider { margin: 64px 0 34px } .footer-main-row { grid-template-columns: 1fr; gap: 32px } .footer-brands { flex-wrap: wrap } .footer-links { grid-column: auto } .legal-copy { margin-top: 42px } .footer-final { flex-direction: column; gap: 12px } .footer-final span:last-child { align-self: flex-end } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto } /* The preloader still fades — a cross-fade is not the kind of motion this query is about — but the mark stops pulsing and the hairline stops sweeping. The first selector has to match the one that sets the pulse, which is itself specific enough to outrank `.brand-lockup img`. */ .preloader .brand-lockup img, .preloader__line::after { animation: none } /* script.js never starts AOS under reduced motion, but its stylesheet is still loaded and ships the opacity:0 start state, so neutralise that here. */ [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important } /* The second selector mirrors the `:not([data-aos])` scoping further up, so this rule cannot lose to it on specificity and leave a section hidden. */ .reveal, .reveal:not([data-aos]) { opacity: 1; transform: none; transition: none } .carousel .owl-carousel .owl-stage { transition-duration: 0s !important } } /* Reference-matched editorial proportions */ @media(min-width:640px) { :root { --header-height: 64px; --side-padding: clamp(46px, 5.5vw, 80px); --section-space: clamp(72px, 6.5vw, 94px) } body { font-size: 12px; line-height: 1.55 } .site-header { /* height: var(--header-height) */ } .brand-lockup strong { font-size: 19px } .brand-lockup span { margin-top: 5px; font-size: 6px } .menu-trigger, .header-register { font-size: 10px } .photo-overlay--bottom { min-height: 70vw; padding-top: clamp(108px, 10vw, 144px); padding-bottom: clamp(54px, 6vw, 86px); justify-content: flex-start } .hero-section .photo-shade--bottom { background: linear-gradient(to top, color-mix(in srgb, var(--color-text-dark) 56%, transparent), transparent 52%) } .hero-section .photo-overlay { justify-content: flex-start; color: var(--color-text-dark) } .hero-section .eyebrow-badge { border-color: var(--color-text-muted); color: var(--color-text-dark) } .hero-section .text-link { color: var(--color-text-dark) } .hero-section h1 { margin-top: 16px; max-width: 850px; font-size: clamp(35px, 3.05vw, 44px); line-height: 1.08 } .hero-section p { margin-bottom: 20px } .eyebrow-badge { padding: 5px 12px; font-size: 10px } .text-link { font-size: 10px } .masterplan-section { padding: clamp(66px, 6vw, 86px) 0 clamp(70px, 6.5vw, 94px) } .section-heading-row { margin-bottom: 34px } .section-copy h2 { margin: 9px 0 9px; max-width: 760px; font-size: clamp(29px, 2.55vw, 37px) } .masterplan-image { height: auto; aspect-ratio: 3/2 } .masterplan-image .asset-image { object-position: left; } .setting-section { min-height: 78vw } .setting-section .photo-overlay--top { min-height: 78vw; padding-top: clamp(72px, 6vw, 88px) } .setting-section .asset-image { object-position: center center } .map-section { min-height: 40.625vw } .map-section .photo-overlay--top { min-height: 40.625vw; padding-top: clamp(58px, 5vw, 72px) } .map-section .asset-image { object-position: center center } .proportion-section { padding: 75px 0; } .proportion-section h2 { margin: 16px 0 10px; font-size: clamp(32px, 3.25vw, 47px) } .walk-section, .walk-layout { min-height: 82vw } .walk-layout { padding-top: 72px; padding-bottom: 60px } .walk-copy { max-width: 100%; } .walk-copy h2 { margin-top: 18px } .walk-stats { gap: 30px 52px } .walk-stats strong { font-size: 38px } .walk-section .asset-image { object-position: center center } .gallery-section { padding: 4px 0 } .carousel .owl-carousel:not(.owl-loaded) { gap: 4px } .carousel-slide { flex-basis: calc((100% - 8px)/3); height: 20.7vw } .gallery-section .carousel-slide .asset-image { object-position: center center } .carousel-controls { left: 16px; right: 16px } .carousel-arrow { width: 38px; height: 38px } /* .carousel-arrow-icon { height: 12px } */ .panoramic-section { height: 64vw } .panoramic-section .asset-image { object-position: center center } .residences-intro, .residences-intro .photo-overlay { min-height: 80vw } .residences-intro .asset-image { object-position: center center } .residences-intro .photo-overlay--top { padding-top: clamp(72px, 7vw, 100px) } .residences-intro h2 { margin: 17px 0 12px } .westin-lockup { margin: 24px 0 23px } .carousel--residences .carousel-slide { height: 62.5vw } .carousel--residences .carousel-slide .asset-image { object-position: center center } .residences-download { padding: 36px 0 } .developer-section { padding: clamp(82px, 8vw, 116px) 0 } .developer-layout { grid-template-columns: minmax(0, 1.3fr) minmax(310px, .75fr); gap: clamp(65px, 9vw, 130px) } .developer-image .asset-image { aspect-ratio: 1.28 } .developer-copy h2 { margin: 17px 0 14px } .site-footer { padding: clamp(86px, 8vw, 116px) 0 28px } .footer-divider { margin: 66px 0 34px } .legal-copy { margin-top: 40px } } @media(max-width:639px) { .header-inner { padding-inline: 22px } .photo-overlay--bottom { min-height: clamp(680px, 180vw, 820px); padding-top: 0; padding-bottom: 48px; justify-content: flex-end } .hero-section .asset-image { object-position: 52% center } .hero-section h1 { margin-top: 20px; font-size: 34px; line-height: 1.08 } .hero-section p { line-height: 1.55 } .masterplan-section { padding: 64px 0 0 } .masterplan-section .section-heading-row { padding-bottom: 54px } .masterplan-image { width: 100%; height: auto; aspect-ratio: 3/2; padding: 0 } .masterplan-image .asset-image { object-position: left; } .setting-section, .setting-section .photo-overlay--top { min-height: 78vw } .setting-section .asset-image { object-position: center center } .map-section, .map-section .photo-overlay--top { min-height: 390px } .map-section .asset-image { object-position: center } .proportion-section { padding: 64px 0 } .proportion-section h2 { font-size: 26px } .walk-section, .walk-layout { min-height: 115vw } .walk-layout { padding-top: 56px } .walk-section .asset-image { object-position: center center } .gallery-section { padding: 4px 0 } .carousel-slide { height: 64vw } .gallery-section .carousel-slide .asset-image { object-position: center center } .panoramic-section { height: 64vw } .panoramic-section .asset-image { object-position: center center } .residences-intro, .residences-intro .photo-overlay { min-height: 112vw } .residences-intro .asset-image { object-position: center center } .carousel--residences .carousel-slide { height: 72vw } .carousel--residences .carousel-slide .asset-image { object-position: center center } .developer-section { padding: 68px 0 } .developer-layout { gap: 38px } .developer-image .asset-image { aspect-ratio: 1.18 } .site-footer { padding-top: 68px } } /* Exact supplied 955 × 658 hero composition */ .hero-section { aspect-ratio: 955/658; min-height: 0; background: var(--color-bg-cream) } .hero-section>.asset-image { position: static; width: 100%; height: auto; aspect-ratio: 955/658; object-fit: contain } .hero-copy { position: absolute; z-index: 1; top: 17%; left: 4.71%; color: var(--color-text-dark) } .hero-eyebrow { display: inline-flex; padding: 6px 14px; border: 1px solid currentColor; font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .15em; text-transform: uppercase } .hero-copy h1 { max-width: none; margin: 11px 0 16px; font-family: var(--font-heading); font-size: 36.5px; font-weight: 400; line-height: 1.1; white-space: nowrap; color: var(--color-text-dark) } .hero-copy p { max-width: none; margin: 8px 0 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--color-text-dark) } .hero-link { display: inline-block; margin-top: 15px; padding-bottom: 10px; border-bottom: 2px solid currentColor; font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; color: var(--color-text-dark) } @media(max-width:760px) { .hero-copy { top: 8.5%; left: 4.71% } .hero-eyebrow { padding: clamp(3px, 1vw, 6px) clamp(7px, 1.47vw, 14px); font-size: clamp(6px, 1.15vw, 11px) } .hero-copy h1 { margin-top: clamp(5px, 1.15vw, 11px); font-size: clamp(18px, 4.5vw, 34px) } .hero-copy p { margin-top: clamp(4px, .84vw, 8px); font-size: clamp(8px, 1.47vw, 11px) } .hero-link { margin-top: clamp(7px, 1.57vw, 15px); padding-bottom: 2px; font-size: clamp(6px, 1.15vw, 9px) } } @media(max-width:420px) { .hero-copy h1 { font-size: clamp(14px, 4.35vw, 18px) } .hero-copy p { font-size: clamp(7px, 2.1vw, 9px) } } /* ============================================================ RESPONSIVE FIXES Everything below applies under the 1280px container cap only. At >=1280px `.container` is capped and centred, which is the authored desktop layout, so none of these rules reach it. ============================================================ */ @media(max-width:1279.98px) { /* .container's gutters came only from `width: min(100%, var(--container))`, so below the cap it ran edge to edge and every section's text sat flush against the screen. Restore the intended --side-padding gutter. */ .container { padding-inline: var(--side-padding) } /* The header is fixed and 90px tall, but nothing reserved space for it when a nav anchor scrolls a section to the top, so section eyebrows and headings landed underneath it (all four in-page links did this at 768px). */ html { scroll-padding-top: 90px } } @media(max-width:1024.98px) { /* The Walk is a two-column grid whose second column is sized to its content (the stat figures, ~626px). Below the cap that squeezed the copy column to nothing — 0px wide at 640-700px. Stack the two, and let the stat row wrap once it is wider than the space between the gutters. */ .walk-layout { display: flex; flex-direction: column; padding-top: 76px } .walk-stats { flex-wrap: wrap; margin-top: 48px } } @media(max-width:899.98px) { /* The hero locks the artwork to `aspect-ratio: 955/658` and letterboxes it (`object-fit: contain`), with a `nowrap` headline. Below ~900px that headline stops fitting, the vw-scaled copy drops to 6-8px, and the whole hero collapses to a 258px band on a phone. Give small screens a real hero instead: full-bleed cropped image, copy that wraps. */ .hero-section { aspect-ratio: auto; min-height: clamp(520px, 68vw, 620px) } .hero-section>.asset-image { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 52% center } /* Only the top third of that crop is sky, so the dark copy would otherwise run onto the buildings. Wash the top the way .photo-shade does elsewhere, keeping the light-background / dark-text relationship desktop has. */ .hero-section::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 68%; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg-cream) 90%, transparent), color-mix(in srgb, var(--color-bg-cream) 62%, transparent) 46%, transparent) } .hero-copy { top: clamp(112px, 14vw, 150px); left: var(--side-padding); right: var(--side-padding) } .hero-eyebrow { padding: 5px 11px; font-size: 10px } .hero-copy h1 { margin: 14px 0 12px; white-space: normal; font-size: clamp(26px, 6.2vw, 38px); line-height: 1.12 } .hero-copy p { margin: 8px 0 0; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.5 } .hero-link { margin-top: 20px; padding-bottom: 6px; font-size: 10px } } @media(max-width:767.98px) { /* The form column has a ~396px min-content floor (two 180px inputs plus their gap), so the 1fr/1.2fr split blew past the footer at 640-665px — silently clipped rather than scrollable, because body sets overflow-x:hidden. Below 768px the intro column was down to ~140px anyway, so stack the two. */ .enquiries-grid { grid-template-columns: 1fr; gap: 50px } } @media(max-width:639.98px) { /* 78vw is only ~292px on a phone, too short for the overlay copy, which spilled out of the bottom of the section. */ .setting-section, .setting-section .photo-overlay--top { min-height: max(78vw, 470px) } /* Clear the 90px fixed header: this reserved only ~72px on small screens. */ .photo-overlay--top { padding-top: 104px } /* The stat figures and the 360° link cannot share one row at phone widths; the link was landing completely off-screen. */ .walk-stats { gap: 26px 32px } .walk-stats__item-right { margin-right: 0 } }