/* * CormackCoreWeb 2.0 - Custom Stylesheet * Author: Charlie - Cormack Advertising * Component styles built on the design system (assets/css/design-system.css). */ /* ============================================================================= * Sygnet badge — fixed, top layer, always on screen, links to homepage * Liquid-glass pill in the top-right corner; sygnet mark uses mix-blend-mode * so it stays legible over any background it floats above. * ========================================================================== */ .sygnet-badge { position: fixed; top: clamp(1rem, 0.6rem + 1.4vw, 2rem); right: clamp(1rem, 0.6rem + 1.4vw, 2.25rem); z-index: var(--z-toast); display: grid; place-items: center; inline-size: clamp(2.4rem, 2.1rem + 1vw, 2.9rem); block-size: clamp(4.5rem, 3.9rem + 2.4vw, 6rem); padding-block: clamp(0.5rem, 0.35rem + 0.6vw, 0.75rem); border-radius: var(--radius-pill); isolation: isolate; color: var(--c-ink); /* sygnet mark colour (currentColor); inverts on dark */ transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), inline-size var(--dur-base) var(--ease-out), block-size var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out), right var(--dur-base) var(--ease-out); } /* The liquid-glass surface (separate layer so blur/borders don't affect mark). Visuals come from the shared .glass recipe; tuned here via --glass-* tokens. */ .sygnet-badge__glass { position: absolute; inset: 0; border-radius: inherit; --glass-tint-amount: 10%; --glass-blur: 10px; --glass-saturation: 140%; transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .sygnet-badge__mark { position: relative; z-index: 1; block-size: 90%; width: auto; color: inherit; /* paths use fill: currentColor */ } .sygnet-badge:hover { transform: translateY(-2px); } .sygnet-badge:hover .sygnet-badge__glass { --glass-tint-amount: 18%; --glass-reflex-light: 1.3; } /* Compact once the page is scrolled (matches the nav): smaller badge + tucked tighter into the corner so it doesn't obstruct the screen. Reverses at top. */ .sygnet-badge.is-scrolled { top: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); right: clamp(0.75rem, 0.5rem + 0.8vw, 1.5rem); inline-size: clamp(2rem, 1.8rem + 0.7vw, 2.4rem); block-size: clamp(3.5rem, 3rem + 1.8vw, 4.5rem); padding-block: clamp(0.4rem, 0.3rem + 0.4vw, 0.6rem); } /* While the overlay menu is open, hide the badge so it doesn't sit over the close (X), which takes its place in the same corner. */ html.nav-open .sygnet-badge { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out); } /* ============================================================================= * Adaptive nav theme — invert the nav links + sygnet mark over dark sections. * The sygnet (fixed, top) and the pill (scrolls, then sticks) are themed * independently from whatever zone sits under each: design-system.js sets * and ("dark"|"light"). * Default (no dark zone under the element) = ink on light. * ========================================================================== */ [data-sygnet-theme="dark"] .sygnet-badge { color: var(--c-cream); } [data-sygnet-theme="dark"] .sygnet-badge__glass { --glass-reflex-light: 1.6; --glass-reflex-dark: 0.6; } [data-nav-theme="dark"] .site-nav__link { color: var(--c-cream); } [data-nav-theme="dark"] .site-nav__link:hover { color: var(--c-white); } [data-nav-theme="dark"] .site-nav .site-nav__list { --glass-reflex-light: 1.6; --glass-reflex-dark: 0.6; } /* ============================================================================= * Hero — full-viewport background video * ========================================================================== */ .hero { position: relative; min-height: 100svh; /* -1px bottom: the next section tucks under the hero so a sub-pixel seam from the 100svh rounding can't show the page background as a thin light line. */ margin: 0 0 -1px; padding: 0; display: grid; place-items: center; overflow: hidden; background-color: #0a1628; /* solid dark blue behind the video */ isolation: isolate; } /* Background media layer */ .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: #0a1628; /* dark blue shows before the video paints */ } /* Subtle scrim for wordmark legibility (kept light to preserve the imagery) */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(41, 5, 8, 0.28) 0%, rgba(41, 5, 8, 0.05) 32%, rgba(41, 5, 8, 0.12) 70%, rgba(41, 5, 8, 0.42) 100%); pointer-events: none; } /* Centred content */ .hero__inner { position: relative; width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-gutter); display: grid; place-items: center; text-align: center; } .hero__title { margin: 0; line-height: 0; /* SVG has its own metrics */ } /* The inlined wordmark SVG (THE SKY / RESIDENCES + eyebrow) */ .hero__logo { width: clamp(17rem, 46vw, 38rem); height: auto; display: block; filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.35)); } /* Scroll cue pinned to the bottom-centre of the hero */ .hero__scroll { position: absolute; left: 50%; bottom: clamp(1.5rem, 1rem + 2vw, 3rem); transform: translateX(-50%); z-index: 2; display: inline-grid; place-items: center; width: clamp(2.25rem, 2rem + 1vw, 2.75rem); aspect-ratio: 1; color: var(--c-white); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .hero__scroll-icon { width: 100%; height: auto; display: block; } .hero__scroll:hover { transform: translateX(-50%) translateY(4px); } /* Gentle bob to invite scrolling (respects reduced-motion via DS reset) */ @media (prefers-reduced-motion: no-preference) { .hero__scroll { animation: hero-scroll-bob 2.4s var(--ease-in-out) infinite; } .hero__scroll:hover { animation-play-state: paused; } @keyframes hero-scroll-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } } /* ============================================================================= * Site navigation — sticky glass pill (desktop). Sits below the hero, then * pins to the top. Background stays transparent; only the floating pill shows. * Hidden on mobile, where the sygnet badge opens the overlay menu instead. * ========================================================================== */ /* The sentinel + nav structure left a ~3px seam between the hero and
, showing the page background as a thin light line. Collapse it. */ .site-nav__sentinel { height: 0; /* was 1px — the IntersectionObserver still fires at 0 height */ margin: 0; pointer-events: none; } .site-nav { position: sticky; top: 0; z-index: var(--z-header); padding-block: clamp(1rem, 0.7rem + 1.4vw, 1.75rem); transition: padding var(--dur-base) var(--ease-out); /* Overlay the section below the hero rather than occupying its own band: pull the following content up by the nav's full height so it sits on top. Height = pill (link line-height + its vertical padding) + this band's padding-block, top and bottom. */ margin-bottom: calc( -1 * ( clamp(1rem, 0.7rem + 1.4vw, 1.75rem) * 2 /* band padding-block ×2 */ + clamp(1rem, 0.7rem + 0.9vw, 1.35rem) * 2 /* pill padding ×2 */ + 1.25em /* pill link text line */ ) ); } /* Tuck
flush under the hero so no page-background seam (thin light line) shows at the hero → first-section boundary. */ #main { margin-top: -2px; } /* The nav overlays the first section under the hero (negative margin above), so that section's heading would sit too close to the pill. Reserve clearance on the first section of
— applied site-wide for consistency. The value = the nav's own height (matching the negative margin) + breathing room. Scoped to the text-led intro sections (not the image-led splits, whose first column is a full-bleed photo that should stay flush under the nav). */ #main > .intro:first-child, #main > .design-intro:first-child, #main > .amenities-intro:first-child, /* (amenities intro uses .intro too) */ #main > .transit:first-child { padding-top: calc( clamp(1rem, 0.7rem + 1.4vw, 1.75rem) * 2 /* nav band padding ×2 */ + clamp(1rem, 0.7rem + 0.9vw, 1.35rem) * 2 /* nav pill padding ×2 */ + 1.25em /* nav pill text line */ + clamp(2rem, 1.2rem + 3vw, 4rem) /* extra breathing room */ ); } .site-nav .container { position: relative; display: flex; justify-content: center; } /* The pill — selector scoped under .site-nav so its fluid padding always wins over the global ul[role="list"] reset (attribute selectors out-rank a single class). Padding is fluid (clamp) to stay responsive — no hard-coded values. */ .site-nav .site-nav__list { display: inline-flex; align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); margin: 0; padding: clamp(1rem, 0.7rem + 0.9vw, 1.35rem) clamp(2.5rem, 1.4rem + 3vw, 4rem); list-style: none; border-radius: var(--radius-pill); /* Liquid-glass surface from the shared .glass recipe — matched to the sygnet badge: more transparent / glassier */ --glass-tint-amount: 10%; --glass-blur: 10px; --glass-saturation: 140%; transition: gap var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .site-nav__link { transition: color var(--dur-fast) var(--ease-out), font-size var(--dur-base) var(--ease-out); } /* Compact once pinned at the top: tighter padding/gap + smaller text so the bar stays out of the way. Reverses smoothly when scrolled back up. */ .site-nav.is-stuck .site-nav__list { gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); padding: clamp(0.55rem, 0.4rem + 0.5vw, 0.8rem) clamp(1.5rem, 1rem + 1.6vw, 2.5rem); --glass-tint-amount: 16%; } .site-nav.is-stuck .site-nav__link { font-size: var(--step-caption); } /* Tighten the sticky band's own vertical padding too */ .site-nav.is-stuck { padding-block: clamp(0.5rem, 0.35rem + 0.6vw, 0.85rem); } .site-nav__link { font-family: var(--font-body); font-size: var(--step-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-ink); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .site-nav__link:hover { color: var(--c-gold); } /* Hide the pill nav on mobile/tablet — sygnet overlay takes over. Keep the (invisible 1px) sentinel in flow so the sygnet still compacts on scroll via the IntersectionObserver. */ @media (max-width: 63.99em) { .site-nav { display: none; } } /* ============================================================================= * Intro section — "Where the living is exceptional" * ========================================================================== */ .intro { background-color: #f8f5f0; } .intro__inner { display: grid; justify-items: center; text-align: center; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); } .intro__heading { color: var(--c-gold); text-wrap: balance; } /* Explicit 2-line break (design): "Where the living / is exceptional". Collapse the
on very small screens so the headline wraps naturally. */ .intro__br { display: none; } @media (min-width: 30em) { .intro__br { display: inline; } } .intro__lead { max-width: 52ch; color: var(--c-text); font-size: var(--step-body-lg); } /* ============================================================================= * Full-page frosted nav overlay (mobile) — triggered by the sygnet badge * ========================================================================== */ html.nav-open { overflow: hidden; } /* scroll lock while open */ .nav-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; grid-template-rows: 1fr auto; place-items: center; padding: clamp(2rem, 1rem + 6vw, 4rem); background: rgba(248, 245, 240, 0.72); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out); } .nav-overlay.is-open { opacity: 1; visibility: visible; } .nav-overlay[hidden] { display: none; } /* fully removed when closed */ /* Close (X) — sits where the sygnet badge is, top-right */ .nav-overlay__close { position: absolute; top: clamp(1rem, 0.6rem + 1.4vw, 2rem); right: clamp(1rem, 0.6rem + 1.4vw, 2.25rem); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-circle); border: 1px solid var(--c-border); background: rgba(255, 255, 255, 0.4); } .nav-overlay__close span { position: absolute; width: 42%; height: 1.5px; background: var(--c-ink); } .nav-overlay__close span:first-child { transform: rotate(45deg); } .nav-overlay__close span:last-child { transform: rotate(-45deg); } .nav-overlay__list { display: grid; justify-items: center; gap: clamp(1.25rem, 0.8rem + 2.4vw, 2.25rem); margin: 0; padding: 0; list-style: none; } .nav-overlay__link { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 4vw, 3rem); font-weight: var(--fw-medium); text-transform: uppercase; color: var(--c-ink); letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease-out); } .nav-overlay__link:hover { color: var(--c-gold); } .nav-overlay__home { font-family: var(--font-body); font-size: var(--step-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-gold); } /* Staggered entrance for the menu links when opening */ @media (prefers-reduced-motion: no-preference) { .nav-overlay__item { opacity: 0; transform: translateY(1rem); transition: opacity var(--dur-base) var(--ease-emph), transform var(--dur-base) var(--ease-emph); } .nav-overlay.is-open .nav-overlay__item { opacity: 1; transform: none; } .nav-overlay.is-open .nav-overlay__item:nth-child(2) { transition-delay: 60ms; } .nav-overlay.is-open .nav-overlay__item:nth-child(3) { transition-delay: 120ms; } .nav-overlay.is-open .nav-overlay__item:nth-child(4) { transition-delay: 180ms; } .nav-overlay.is-open .nav-overlay__item:nth-child(5) { transition-delay: 240ms; } } /* Overlay is mobile-only; never show on desktop even if toggled */ @media (min-width: 64em) { .nav-overlay { display: none !important; } } /* ============================================================================= * Showcase — editorial two-column spread (One Bishopsgate Plaza) * Left: inset portrait + OBP wordmark on white. * Right: full-bleed image to the section edge. * ========================================================================== */ .showcase { display: grid; grid-template-columns: 1fr; background: #ffffff; } /* Left text column */ .showcase__col--text { display: grid; place-items: center; /* centre the image block in the column */ padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); } .showcase__text-inner { width: 100%; max-width: 28rem; /* larger image (matches residences inset) */ margin-inline: auto; } .showcase__portrait { margin: 0; aspect-ratio: 540 / 739; overflow: hidden; } .showcase__portrait img { width: 100%; height: 100%; object-fit: cover; } /* OBP wordmark sits below the portrait and matches its width */ .showcase__brand { margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); } .showcase__logo { display: block; width: 100%; /* match the portrait width above */ height: auto; } /* Right media column — full-bleed image */ .showcase__col--media { position: relative; min-height: 60vh; overflow: hidden; } .showcase__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 48em) { .showcase { grid-template-columns: 1fr 1fr; align-items: stretch; } .showcase__col--media { min-height: min(100vh, 56rem); } } /* ============================================================================= * Location — full-viewport dusk aerial with centred cream content. * "Above it all and in the heart of it." + DISCOVER THE LOCATION CTA. * ========================================================================== */ .location { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; background-color: var(--c-ink); /* fallback behind the image */ } /* Background media + scrim for text legibility */ .location__media { position: absolute; inset: 0; z-index: -1; } .location__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .location__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(41, 5, 8, 0.55) 0%, rgba(41, 5, 8, 0.25) 45%, rgba(41, 5, 8, 0.55) 100%), linear-gradient(180deg, rgba(41, 5, 8, 0.35) 0%, rgba(41, 5, 8, 0.15) 35%, rgba(41, 5, 8, 0.45) 100%); pointer-events: none; } /* Darker black/navy tint — fades in 0.5s after the section enters view. Sits above the base scrim, below the content. */ .location__tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 10, 24, 0.55) 0%, rgba(6, 10, 24, 0.30) 45%, rgba(6, 10, 24, 0.65) 100%); opacity: 0; transition: opacity 800ms var(--ease-out) 500ms; /* 0.5s delay, then fade */ } [data-location].is-in .location__tint { opacity: 1; } /* Text enters from the bottom and fades in 1.0s after the section enters view (0.5s after the tint begins). Staggered per element for a gentle cascade. */ .location__heading, .location__lead, .location__cta { opacity: 0; transform: translateY(2rem); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } [data-location].is-in .location__heading, [data-location].is-in .location__lead, [data-location].is-in .location__cta { opacity: 1; transform: none; } [data-location].is-in .location__heading { transition-delay: 1000ms; } [data-location].is-in .location__lead { transition-delay: 1120ms; } /* Button lands as its own deliberate final beat, after the copy has settled. */ [data-location].is-in .location__cta { transition-delay: 1600ms; } /* Reduced motion: show everything immediately, no timed sequence. */ @media (prefers-reduced-motion: reduce) { .location__tint { opacity: 1; transition: none; } .location__heading, .location__lead, .location__cta { opacity: 1; transform: none; transition: none; } } /* Centred content */ .location__inner { position: relative; width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-gutter); padding-block: clamp(4rem, 2rem + 8vw, 8rem); display: grid; justify-items: center; text-align: center; } .location__heading { margin: 0; color: var(--c-cream); text-transform: uppercase; text-wrap: balance; } .location__lead { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 46ch; color: var(--c-cream); font-size: var(--step-body); } /* DISCOVER THE LOCATION CTA — cream label + circular cream arrow */ .location__cta { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3rem); display: inline-flex; align-items: center; gap: 1rem; color: var(--c-cream); font-family: var(--font-body); font-size: var(--step-body); font-weight: var(--fw-regular); letter-spacing: var(--ls-wider); text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out); } .location__cta-icon { display: inline-flex; width: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); } .location__cta-icon svg { width: 100%; height: auto; display: block; } /* Recolour the gold arrow asset to cream to match the design */ .location__cta-icon :where(circle, path) { stroke: currentColor; transition: stroke var(--dur-fast) var(--ease-out); } .location__cta:hover { color: var(--c-white); } .location__cta:hover .location__cta-icon { transform: translateX(3px); transition: transform var(--dur-base) var(--ease-out); } /* ============================================================================= * Private hotel — editorial two-column spread (residents' amenities) * Left: full-bleed bar image to the section edge. * Right: cream panel with gold lead, body copy, DISCOVER AMENITIES CTA and the * gold line pattern pinned to the bottom-right corner. * ========================================================================== */ .hotel { display: grid; grid-template-columns: 1fr; background-color: #f8f5f0; /* cream panel (design spec) */ } /* Left media column — full-bleed image */ .hotel__col--media { position: relative; min-height: 60vh; overflow: hidden; } .hotel__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Right text column */ .hotel__col--text { position: relative; /* anchor for the pattern */ display: flex; align-items: flex-start; /* sit higher in the column */ /* Align inner content to the 1600px container's right edge + gutter */ padding-inline: max(var(--space-gutter), calc((100vw - var(--content-max)) / 2 + var(--space-gutter))); padding-block: clamp(2.5rem, 1.2rem + 5vw, 5.5rem); } .hotel__text-inner { position: relative; /* sits above the pattern */ z-index: 1; width: 100%; max-width: 40rem; } .hotel__heading { margin: 0; color: var(--c-gold); text-transform: uppercase; } .hotel__body { margin-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); max-width: 44ch; color: var(--c-text); font-size: var(--step-body); } /* DISCOVER AMENITIES CTA — gold label + circular gold arrow */ .hotel__cta { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3rem); display: inline-flex; align-items: center; gap: 1rem; color: var(--c-gold); font-family: var(--font-body); font-size: var(--step-body); font-weight: var(--fw-regular); letter-spacing: var(--ls-wider); text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out); } .hotel__cta-icon { display: inline-flex; width: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); } .hotel__cta-icon svg { width: 100%; height: auto; display: block; } .hotel__cta-icon :where(circle, path) { stroke: currentColor; transition: stroke var(--dur-fast) var(--ease-out); } .hotel__cta:hover { color: var(--c-ink); } .hotel__cta:hover .hotel__cta-icon { transform: translateX(3px); transition: transform var(--dur-base) var(--ease-out); } /* Gold line motif — spans the full width of the cream column along the bottom. Native SVG is a wide horizontal strip (viewBox 1345×245); runs edge-to-edge at 50% opacity, behind the text content. */ .hotel__pattern { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; opacity: 0.5; pointer-events: none; } .hotel__pattern-svg { display: block; width: 100%; height: auto; } @media (min-width: 48em) { .hotel { grid-template-columns: 1fr 1fr; align-items: stretch; } .hotel__col--media { min-height: min(100vh, 56rem); } } /* ============================================================================= * Tower — 3-screens-tall section (no scroll lock). Main tower is sticky-centred * and full-height; three annotation groups slide in, scrubbed to scroll * progress (--p1/--p2/--p3 set by design-system.js), each from alternating * sides into its native SVG position. * ========================================================================== */ .tower { --p1: 0; --p2: 0; --p3: 0; /* per-stage progress 0→1, set by JS */ position: relative; height: 200vh; /* two screens */ background-color: #122d12; /* section-specific deep green */ } /* Sticky viewport-height stage that stays put while the section scrolls past */ .tower__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; } /* Centred, full-height tower drawing */ .tower__stage { height: 100%; width: 100%; display: grid; place-items: center; padding-block: clamp(1.5rem, 1rem + 3vh, 4rem); } .tower__svg { height: clamp(60vh, 40vh + 20vw, 78vh); /* smaller — doesn't fill the viewport */ width: auto; max-width: 92%; display: block; overflow: visible; /* let groups slide off-canvas without clipping */ } /* The three annotation groups: translate (in SVG user units) from off-canvas to their native position as their stage progresses. viewBox width ~980, so ±1300 is safely off-screen. transition smooths the scrubbing between rAF updates. */ .tower__anno { transition: transform 120ms linear, opacity 120ms linear; } .tower__anno--1 { transform: translateX(calc((1 - var(--p1)) * -1300px)); opacity: var(--p1); } .tower__anno--2 { transform: translateX(calc((1 - var(--p2)) * 1300px)); opacity: var(--p2); } .tower__anno--3 { transform: translateX(calc((1 - var(--p3)) * -1300px)); opacity: var(--p3); } /* DISCOVER RESIDENCES CTA — pinned top-left of the stage */ .tower__cta { position: absolute; top: clamp(1.5rem, 1rem + 3vh, 3.5rem); left: clamp(1.5rem, 0.8rem + 3vw, 4rem); z-index: 2; display: inline-flex; align-items: center; gap: 0.85rem; color: var(--c-cream); font-family: var(--font-body); font-size: var(--step-label); font-weight: var(--fw-regular); letter-spacing: var(--ls-wider); text-transform: uppercase; } .tower__cta-icon { display: inline-flex; width: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); } .tower__cta-icon svg { width: 100%; height: auto; display: block; } /* Recolour the gold arrow asset to cream to match the wireframe */ .tower__cta-icon :where(circle, path) { stroke: currentColor; transition: stroke var(--dur-fast) var(--ease-out); } .tower__cta:hover { color: var(--c-white); } .tower__cta:hover .tower__cta-icon { transform: translateX(3px); transition: transform var(--dur-base) var(--ease-out); } /* Reduced motion: show everything in final position, no scrubbing */ @media (prefers-reduced-motion: reduce) { .tower__anno { transform: none !important; opacity: 1 !important; transition: none; } } /* ============================================================================= * Global footer — deep-maroon band, identical on every page/subpage. * Brand row (TSR + OBP | UOL + Pan Pacific) · 3 info columns + social icons · * hairline rule · small-print disclaimer. Footer SVGs are pre-coloured cream. * ========================================================================== */ .site-footer { background-color: var(--c-ink); color: #fcf0da; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } /* Everything in the footer is one colour (#FCF0DA) — text and every SVG. Only recolour FILLED shapes (don't add a stroke where the asset has none — that mangles the fill-only social icons). Strokes are recoloured only where the asset already strokes (its inline `stroke:` is non-none). */ .site-footer :where(svg) :where(path, circle, rect, polygon, line) { fill: #fcf0da; } /* Recolour existing strokes without introducing new ones */ .site-footer :where(svg) [style*="stroke:"]:not([style*="stroke: none"]) { stroke: #fcf0da; } /* Social icons: keep the transparent bg rect transparent so the glyph reads. */ .site-footer__social-icon rect[style*="fill: none"] { fill: none; } /* The icon assets wrap their art in a whose clip rect can render a hair short, shaving the circle's right edge. Drop the clip (the art already fits the 45×45 box) so the badge circle stays whole. */ .site-footer__social-icon g[style*="clip-path"] { clip-path: none !important; } /* Full-width footer content with consistent outer padding — ~50px on desktop, scaling down responsively on narrower screens. */ .site-footer__inner { display: grid; padding-inline: clamp(1.25rem, 0.5rem + 2.4vw, 50px); } /* Explicit, even spacing between the footer blocks (no uniform grid gap, which made the rule's surroundings uneven). */ .site-footer__cols { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); } /* --- Brand row ---------------------------------------------------------- */ .site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 1rem + 3vw, 3rem); } .site-footer__brand-left, .site-footer__brand-right { display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); } /* UOL + Pan Pacific stack vertically (sit top-right of the row), left-aligned */ .site-footer__brand-right { flex-direction: column; align-items: flex-start; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); } .site-footer__logo-link { display: inline-flex; } .site-footer__logo { display: block; width: auto; height: auto; } .site-footer__logo--tsr { height: clamp(3rem, 2.4rem + 2vw, 4.1rem); } .site-footer__logo--obp { height: clamp(3rem, 2.4rem + 2vw, 4.1rem); } .site-footer__logo--uol { height: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .site-footer__logo--pp { height: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); } /* Vertical divider between TSR and OBP wordmarks */ .site-footer__brand-divider { width: 1px; align-self: stretch; min-height: clamp(3rem, 2.4rem + 2vw, 4.1rem); background: rgba(252, 240, 218, 0.3); } /* --- Info columns ------------------------------------------------------- */ .site-footer__cols { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); } @media (min-width: 48em) { /* 5 columns: cols 1-3 = Viewings / Enquiries / Legal, col 4 empty, col 5 = social icons (logos live in the brand row above). */ .site-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } .site-footer__social { grid-column: 5; } } .site-footer__heading { margin: 0 0 clamp(1rem, 0.7rem + 1vw, 1.5rem); font-family: var(--font-body); font-size: var(--step-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-cream); } .site-footer__address { font-style: normal; font-family: "proxima-nova", var(--font-body); font-size: 16px; font-weight: var(--fw-light); /* 300 */ line-height: 1.42; /* 142% */ letter-spacing: 0; color: #fcf0da; } .site-footer__address-caps { text-transform: uppercase; } .site-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(0.3rem, 0.2rem + 0.3vw, 0.45rem); } .site-footer__link { font-family: "proxima-nova", var(--font-body); font-size: 16px; /* design spec */ font-weight: var(--fw-light); /* 300 */ line-height: 1.42; /* 142% */ letter-spacing: 0; color: #fcf0da; transition: opacity var(--dur-fast) var(--ease-out); } .site-footer__link:hover { opacity: 0.7; } /* Social icons — the SVGs already include their own cream badge, so no extra circle/recolour here (that was double-badging them). */ .site-footer__social { display: flex; gap: clamp(0.75rem, 0.5rem + 0.6vw, 1rem); justify-content: flex-end; /* icons sit to the right */ align-items: flex-end; /* align icons to the bottom of the row */ align-self: end; /* sit at the bottom of the grid cell */ justify-self: end; /* push the block to the right edge of its cell */ width: max-content; overflow: visible; } .site-footer__social-link { display: inline-grid; place-items: center; flex: 0 0 auto; width: clamp(2.75rem, 2.4rem + 1.2vw, 3.4rem); aspect-ratio: 1; transition: transform var(--dur-base) var(--ease-out); } .site-footer__social-icon { width: 100%; height: 100%; display: block; } .site-footer__social-link:hover { transform: translateY(-2px); } /* --- Rule + disclaimer -------------------------------------------------- */ .site-footer__rule { height: 2px; /* Even, modest space above and below the line. */ margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 0; background: #fcf0da; /* line colour per design */ } .site-footer__disclaimer { margin: 0; max-width: 100%; font-family: "proxima-nova", var(--font-body); font-size: 8px; /* design spec */ font-weight: var(--fw-light); /* 300 */ line-height: 1.42; /* 142% */ letter-spacing: 0; color: #fcf0da; } /* ============================================================================= * AMENITIES PAGE * ========================================================================== */ /* --- Bespoke intro: gold-tinted band, cream heading, grey copy ---------- */ .intro--bespoke { background-color: #83755099; } /* gold at 60% */ .intro--bespoke .intro__heading { color: #FCF0DA; } .intro--bespoke .intro__lead { color: #494949; } /* --- Page hero: full-viewport image + centred headline ------------------ */ .page-hero { position: relative; min-height: 100svh; margin-bottom: -1px; /* next section tucks under to hide the sub-pixel seam */ display: grid; place-items: center; overflow: hidden; isolation: isolate; background-color: var(--c-ink); } .page-hero__media { position: absolute; inset: 0; z-index: -1; } .page-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-hero__scrim { position: absolute; inset: 0; background: #00000059; /* flat black tint at 35% (amenities) */ pointer-events: none; } .page-id-26 .page-hero__scrim { background: #00000066; } /* residences */ .page-hero__inner { position: relative; width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-gutter); display: grid; justify-items: center; text-align: center; } .page-hero__title { margin: 0; color: var(--c-cream); text-transform: uppercase; text-wrap: balance; filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.3)); } .page-hero__eyebrow { margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); color: var(--c-cream); font-family: var(--font-body); font-size: var(--step-body); font-weight: var(--fw-regular); letter-spacing: var(--ls-wider); text-transform: uppercase; } /* Reuse the home hero's scroll-cue styling (.hero__scroll); just ensure it's cream */ .page-hero__scroll { color: var(--c-cream); } /* --- Full-bleed feature image ------------------------------------------- */ .amenities-feature { display: block; background-color: var(--c-ink); } .amenities-feature__image { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: cover; } /* --- Facilities carousel — full-bleed, edge-to-edge --------------------- */ .carousel { background-color: var(--c-bg, #faf7f2); padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; /* clip the off-canvas track */ } /* Arrows pinned to the top-right, aligned to the same right inset as the fixed sygnet badge (so they sit inline with it on the edge). */ .carousel__head { display: flex; justify-content: flex-end; padding-inline-end: clamp(1rem, 0.6rem + 1.4vw, 2.25rem); margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); } .carousel__controls { display: inline-flex; gap: 0.5rem; } .carousel__btn { display: inline-grid; place-items: center; width: clamp(2.75rem, 2.4rem + 1.4vw, 3.4rem); aspect-ratio: 1; border: 0; cursor: pointer; background: var(--c-gold); color: var(--c-white); transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .carousel__btn:hover { background: var(--c-gold-ink); } .carousel__btn:disabled { opacity: 0.35; cursor: default; } .carousel__btn-icon { width: clamp(0.6rem, 0.5rem + 0.4vw, 0.8rem); height: auto; display: block; } .carousel__btn-icon path { stroke: currentColor; } /* Scroll-snap track — full-bleed: cards run off both screen edges, no padding */ .carousel__track { display: flex; gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-gutter); scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .carousel__track::-webkit-scrollbar { display: none; } /* First card starts at the gutter; the rest run off the right screen edge */ .carousel__card:first-child { margin-inline-start: var(--space-gutter); } .carousel__card:last-child { margin-inline-end: var(--space-gutter); } .carousel__card { flex: 0 0 auto; /* ~4 cards across on desktop, fewer as the viewport narrows */ width: clamp(16rem, 24vw, 26rem); scroll-snap-align: start; } .carousel__figure { margin: 0; } .carousel__image { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .carousel__rule { height: 1px; margin: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0 clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); border: 0; background: var(--c-border); } .carousel__label { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--step-h6, 1.125rem); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-snug); color: var(--c-ink); } /* --- Concierge split: image left, cream panel + pattern right ----------- */ .concierge { display: grid; grid-template-columns: 1fr; background-color: #edebe7; /* warm light grey panel (design) */ } .concierge__col--media { position: relative; min-height: 60vh; overflow: hidden; background-color: var(--c-ink); } .concierge__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .concierge__col--text { position: relative; display: flex; align-items: center; padding-inline: max(var(--space-gutter), calc((100vw - var(--content-max)) / 2 + var(--space-gutter))); padding-block: clamp(3rem, 1.5rem + 6vw, 7rem); } .concierge__text-inner { position: relative; z-index: 1; width: 100%; max-width: 34rem; } .concierge__heading { margin: 0; color: var(--c-gold-ink); text-transform: uppercase; } .concierge__body { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 46ch; color: var(--c-text); font-size: var(--step-body); } /* Gold line motif — bottom of the panel */ .concierge__pattern { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; opacity: 0.5; pointer-events: none; } .concierge__pattern-svg { display: block; width: 100%; height: auto; } @media (min-width: 48em) { .concierge { grid-template-columns: 1fr 1fr; align-items: stretch; } .concierge__col--media { min-height: min(100vh, 50rem); } } /* ============================================================================= * RESIDENCES PAGE * ========================================================================== */ /* --- Intro split: cream text panel left, image right -------------------- */ .res-intro { display: grid; grid-template-columns: 1fr; background-color: #edebe7; } .res-intro__col--text { display: flex; align-items: center; padding-inline: max(var(--space-gutter), calc((100vw - var(--content-max)) / 2 + var(--space-gutter))); padding-block: clamp(3rem, 1.5rem + 6vw, 7rem); } .res-intro__text-inner { width: 100%; max-width: 34rem; } .res-intro__heading { margin: 0; color: var(--c-gold-ink); text-transform: uppercase; } .res-intro__body { margin-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); max-width: 46ch; color: var(--c-text); font-size: var(--step-body); } .res-intro__col--media { position: relative; min-height: 60vh; overflow: hidden; background-color: var(--c-ink); } .res-intro__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 48em) { .res-intro { grid-template-columns: 1fr 1fr; align-items: stretch; } .res-intro__col--media { min-height: min(100vh, 50rem); } } /* --- Floorplans: fixed tab bar + single frame, content cross-fades ------ */ .floorplans { background-color: var(--c-bg, #faf7f2); padding-block: clamp(3rem, 2rem + 4vw, 6rem); } /* On narrow screens give the tab pill + plan/detail comfortable side padding so they don't sit flush against the edges. */ @media (max-width: 47.99em) { .floorplans__bar.container { padding-inline: clamp(1.25rem, 0.75rem + 3vw, 2rem); } /* The panels are absolutely stacked inside the frame, so the frame's own .container padding doesn't inset them - pad the frame's content instead by padding each panel directly. */ .floorplans__frame.container { padding-inline: 0; } .floorplans__panel { padding-inline: clamp(1.25rem, 0.75rem + 3vw, 2rem); } .floorplans__tabs { width: 100%; max-width: 100%; /* Tight gap so the three tabs + the pill's rounded ends all fit, with the first/last text clear of the curved ends. */ gap: clamp(0.25rem, 0.15rem + 0.7vw, 0.55rem); padding: 0.55rem clamp(0.75rem, 0.45rem + 1.8vw, 1.25rem); } .floorplans__tab { /* Smaller text + tighter tracking so "1 BEDROOM" etc. clear the tab space */ flex: 1 1 0; min-width: 0; text-align: center; font-size: clamp(0.48rem, 0.4rem + 0.45vw, 0.62rem); letter-spacing: 0.05em; } /* Thinner separators take less room too */ .floorplans__tab-sep { flex: 0 0 1px; min-height: 0.9em; } } /* Fixed, centred tab bar — never moves while the frame swaps below it */ .floorplans__bar { display: flex; justify-content: center; margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); } .floorplans__tabs { display: inline-flex; align-items: center; gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); padding: clamp(0.6rem, 0.45rem + 0.6vw, 0.9rem) clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--radius-pill); --glass-tint-amount: 8%; --glass-blur: 8px; } .floorplans__tab { border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-size: var(--step-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); white-space: nowrap; transition: color var(--dur-base) var(--ease-out); } .floorplans__tab:hover { color: var(--c-ink); } .floorplans__tab.is-active { color: var(--c-ink); } .floorplans__tab-sep { width: 1px; align-self: stretch; min-height: 1.1em; background: var(--c-border); } /* The frame holds all panels stacked in one place. Its height is LOCKED by JS to the tallest panel, so switching tabs never changes the section's size or geometry — content only cross-fades inside a fixed box (no jump/jerk/skip). */ .floorplans__frame { position: relative; } /* Every panel fills the full frame; inactive ones fade out behind the active. align-content:center keeps shorter types (1-bed) vertically centred in the fixed-height box rather than pinned to the top. */ .floorplans__panel { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.2rem + 4vw, 5rem); align-items: center; align-content: center; position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); pointer-events: none; } .floorplans__panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out) 80ms, transform var(--dur-base) var(--ease-out) 80ms; } /* No-JS / reduced motion: show every panel in flow, no fade/stack. */ @media (prefers-reduced-motion: reduce) { .floorplans__frame { height: auto !important; } .floorplans__panel { position: relative; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none; } .floorplans__panel + .floorplans__panel { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); } } .floorplans__plan { display: grid; place-items: center; background: var(--c-white); padding: clamp(1.5rem, 1rem + 2vw, 3rem); } .floorplans__image { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .floorplans__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--step-h2); line-height: var(--lh-tight); letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-gold-ink); } .floorplans__type { margin: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) 0 0; font-family: var(--font-body); font-size: var(--step-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink); line-height: 1.8; } .floorplans__dims { margin: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--c-text); font-size: var(--step-body); font-weight: var(--fw-light); } .floorplans__actions { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); margin-top: clamp(2rem, 1.4rem + 2.4vw, 3rem); } .floorplans__btn { border-radius: 0; } /* square buttons per design */ @media (min-width: 48em) { .floorplans__panel { grid-template-columns: 1.1fr 1fr; } } /* --- Gallery: portrait inset on cream + full-bleed image ---------------- */ .res-gallery { display: grid; grid-template-columns: 1fr; background-color: #edebe7; } .res-gallery__col--inset { display: grid; place-items: center; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); } .res-gallery__inset { margin: 0; max-width: 28rem; width: 100%; } .res-gallery__inset img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .res-gallery__col--full { position: relative; min-height: 60vh; overflow: hidden; background-color: var(--c-ink); } .res-gallery__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 48em) { .res-gallery { grid-template-columns: 1fr 1fr; align-items: stretch; } .res-gallery__col--full { min-height: min(100vh, 50rem); } } /* ============================================================================= * LOCATION PAGE * ========================================================================== */ /* Hide the hero scroll cue on the Location page */ .page-id-27 .page-hero__scroll { display: none; } /* --- Split sections (image + text panel) — shared by plaza & dining ------ */ .loc-split { display: grid; grid-template-columns: 1fr; } .loc-plaza { background-color: #aca28a; } /* taupe panel (plaza) */ .loc-dining { background-color: #edebe7; } /* cream panel (dining) */ .loc-split__col--media { position: relative; min-height: 60vh; overflow: hidden; background-color: var(--c-ink); } .loc-split__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .loc-split__col--text { display: flex; align-items: center; padding-inline: max(var(--space-gutter), calc((100vw - var(--content-max)) / 2 + var(--space-gutter))); padding-block: clamp(3rem, 1.5rem + 6vw, 7rem); } .loc-split__text-inner { width: 100%; max-width: 34rem; } .loc-split__heading { margin: 0; text-transform: uppercase; } .loc-plaza .loc-split__heading { color: var(--c-cream); } /* light on taupe */ .loc-dining .loc-split__heading { color: var(--c-gold-ink); } /* gold on cream */ .loc-split__body { margin-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); max-width: 46ch; font-size: var(--step-body); } .loc-plaza .loc-split__body { color: var(--c-ink); } .loc-dining .loc-split__body { color: var(--c-text); } @media (min-width: 48em) { .loc-split { grid-template-columns: 1fr 1fr; align-items: stretch; } .loc-split__col--media { min-height: min(100vh, 50rem); } /* Dining: text left, image right — keep DOM order (text first) */ } /* --- Interactive map mount ---------------------------------------------- */ .loc-map { position: relative; } .loc-map > * { display: block; width: 100%; } /* --- Transit connections ------------------------------------------------ */ .transit { background-color: var(--c-white); } .transit__inner { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); } .transit__intro { max-width: 26ch; color: var(--c-text); font-size: var(--step-body); font-weight: var(--fw-light); } .transit__groups { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); } .transit__group-heading { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--step-body); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-gold); line-height: var(--lh-snug); } .transit__rule { height: 1px; margin: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0 clamp(1.25rem, 0.9rem + 1.4vw, 2rem); border: 0; background: var(--c-border); } .transit__list { margin: 0; } .transit__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; margin-bottom: 0.6rem; } .transit__time, .transit__place { margin: 0; font-size: var(--step-body); font-weight: var(--fw-light); color: var(--c-text); } @media (min-width: 48em) { /* Intro sits left, the three groups span the right (matches the design) */ .transit__inner { grid-template-columns: minmax(14rem, 1fr) 3fr; align-items: start; } .transit__groups { grid-template-columns: repeat(3, 1fr); } } /* --- Gallery: 3 portrait images + scrolling wordmark -------------------- */ .loc-gallery { background-color: var(--c-white); padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .loc-gallery__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); } .loc-gallery__item { margin: 0; } .loc-gallery__item img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } @media (min-width: 48em) { .loc-gallery__grid { grid-template-columns: repeat(3, 1fr); } } /* Looping scroll-bar motif (ui_scroll-bar.svg) under the gallery — hidden. */ .loc-marquee { display: none; overflow: hidden; margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); } .loc-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; animation: loc-marquee-scroll 90s linear infinite; } .loc-marquee__svg { display: block; flex: 0 0 auto; /* native viewBox 2067×21.1 — fix the width so the copies tile seamlessly. 3× larger than before for a bolder scroll-bar motif. */ width: clamp(120rem, 210vw, 192rem); height: auto; } @keyframes loc-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* track holds 4 copies → -50% loops seamlessly */ } @media (prefers-reduced-motion: reduce) { .loc-marquee__track { animation: none; } } /* ============================================================================= * DESIGN PAGE * ========================================================================== */ /* --- Intro: centred lead on cream + two images + pattern ---------------- */ .design-intro { position: relative; background-color: #f8f5f0; padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; } .design-intro__lead { display: grid; justify-items: center; text-align: center; gap: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); margin-bottom: clamp(4rem, 2.5rem + 6vw, 8rem); /* more space before the images */ } .design-intro__heading { margin: 0; color: var(--c-gold); text-transform: uppercase; text-wrap: balance; } .design-intro__body { margin: 0; max-width: 56ch; color: var(--c-text); font-size: var(--step-body-lg); } /* Two images, staggered: portrait left sits lower, samples right sits higher */ .design-intro__images { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; } .design-intro__img { margin: 0; } .design-intro__img img { display: block; width: 100%; height: auto; } .design-intro__img--portrait img { aspect-ratio: 1 / 1; object-fit: cover; } .design-intro__img--samples img { aspect-ratio: 16 / 10; object-fit: cover; } @media (min-width: 48em) { .design-intro__images { grid-template-columns: 0.85fr 1.15fr; } .design-intro__img--portrait { max-width: 30rem; margin-top: clamp(4rem, 2rem + 7vw, 9rem); /* left image lower */ } /* right image sits higher than the left, but still clearly below the text */ } /* Gold line motif — pinned flush to the bottom-right edge, ~48% width */ .design-intro__pattern { position: absolute; right: 0; bottom: 0; z-index: 0; width: 48%; opacity: 0.5; pointer-events: none; } .design-intro__pattern-svg { display: block; width: 100%; height: auto; } /* --- Split: woman-in-sun image + mauve panel with inset ----------------- */ .design-split { display: grid; grid-template-columns: 1fr; background-color: #846d6f; /* mauve panel */ } .design-split__col--media { position: relative; min-height: 60vh; overflow: hidden; background-color: var(--c-ink); } .design-split__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .design-split__col--panel { display: grid; place-items: center; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem); } .design-split__inset { margin: 0; width: 100%; max-width: 24rem; } .design-split__inset img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 48em) { .design-split { grid-template-columns: 1fr 1fr; align-items: stretch; } .design-split__col--media { min-height: min(100vh, 52rem); } } /* --- Quote: deep green band -------------------------------------------- */ .design-quote { background-color: #122d12; padding-block: clamp(4rem, 2.5rem + 7vw, 9rem); } .design-quote__inner { display: grid; justify-items: center; text-align: center; } .design-quote__text { margin: 0; max-width: 1000px; font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--step-h2); line-height: var(--lh-snug); letter-spacing: 0.01em; text-transform: uppercase; color: #b5ac96; /* trailing clause = muted sage-gold */ } .design-quote__lead { color: #fcf0da; } /* opening clause = cream */ .design-quote__cite { margin: clamp(2rem, 1.4rem + 2.4vw, 3rem) 0 0; font-family: var(--font-body); font-size: var(--step-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-cream); } /* --- Feature: green border on the full-bleed image --------------------- */ .design-feature { border-top: 6px solid #122d12; } /* ============================================================================= * LEGAL / PLAIN PAGES (Terms, Privacy, etc.) * ========================================================================== */ .legal-page { background-color: #f8f5f0; /* clear the overlaying nav (matches the other first-sections) */ padding-top: calc( clamp(1rem, 0.7rem + 1.4vw, 1.75rem) * 2 + clamp(1rem, 0.7rem + 0.9vw, 1.35rem) * 2 + 1.25em + clamp(2rem, 1.2rem + 3vw, 4rem) ); padding-bottom: clamp(4rem, 2.5rem + 6vw, 8rem); } .legal-page__article { width: 100%; max-width: 52rem; margin-inline: auto; padding-inline: var(--space-gutter); } .legal-page__head { margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); } .legal-page__title { margin: 0; color: var(--c-gold); text-transform: uppercase; text-wrap: balance; } .legal-page__content { color: var(--c-text); font-size: var(--step-body); line-height: 1.6; } .legal-page__content h2, .legal-page__content h3 { margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--step-body); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink); } .legal-page__content p { margin: 0 0 1.1em; } .legal-page__content a { color: var(--c-gold-ink); text-decoration: underline; } .legal-page__content a:hover { color: var(--c-ink); } .legal-page__content ul, .legal-page__content ol { margin: 0 0 1.1em 1.25em; padding: 0; } .legal-page__content li { margin-bottom: 0.4em; } .legal-page__content strong { font-weight: var(--fw-semibold); color: var(--c-ink); } /* The cormackcore_picture() wrapper must not affect layout — the inner should behave exactly as a bare did (some are absolutely positioned in full-bleed sections). display:contents removes the wrapper box, which also eliminates a stray baseline gap between hero and next section. */ .hero__media picture, .page-hero__media picture, .amenities-feature picture, .concierge__col--media picture, .res-intro__col--media picture, .res-gallery__col--full picture, .loc-split__col--media picture, .design-split__col--media picture, .showcase__col--media picture, .hotel__col--media picture { display: contents; } /* ============================================================================= * COOKIE CONSENT BAR — theme overrides (Cormack Cookie Consent plugin) * Brand-matched to the site and moved to the bottom-right, ~30% page width, so * it clears the hero's centred scroll cue. * ========================================================================== */ .avcc-bar { /* Force the bar above every section stacking context (hero/tower/location use isolation/transform/backdrop-filter, any of which can bury a fixed element with a lower effective order). max z-index + its own isolation guarantees it paints on the top layer. */ position: fixed !important; z-index: 2147483647 !important; isolation: isolate; /* White text + white reject border; Accept = white pill with gold text */ --avcc-text: #ffffff; --avcc-link: #ffffff; --avcc-accept-bg: #ffffff; --avcc-accept-text: var(--c-gold); --avcc-reject-text: #ffffff; --avcc-reject-border: #ffffff; /* Liquid-glass surface — nav-pill recipe, tinted semi-transparent gold. */ --glass-tint: #837550; --glass-tint-amount: 55%; --glass-blur: 10px; --glass-saturation: 140%; background: color-mix(in srgb, #837550 55%, transparent); /* fallback */ /* ---- Scroll-linked morph (ONE element, ONE continuous animation) -------- Driven by --avcc-p (0→1, set by JS from scroll position). Everything is a pure interpolation off that single value, so there's no jerk, no class swap, no hidden element — just a seamless glide. p split into two overlapping phases via clamp(): • --pa (0→1 over p 0→0.55): diagonal glide into the bottom-right corner (the resting inset shrinks to 0). • --pb (0→1 over p 0.45→1): width stretches from card → full viewport. Corners stay rounded throughout. */ --avcc-edge: clamp(1rem, 0.6rem + 1.4vw, 2.25rem); /* resting inset */ --avcc-card-w: min(54rem, calc(100% - 2 * var(--avcc-edge))); --avcc-p: 0; --pa: clamp(0, calc(var(--avcc-p) / 0.55), 1); /* glide phase */ --pb: clamp(0, calc((var(--avcc-p) - 0.45) / 0.55), 1); /* stretch phase */ left: auto; /* glide: inset shrinks edge → 0 as --pa goes 0 → 1 */ right: calc(var(--avcc-edge) * (1 - var(--pa))); bottom: calc(var(--avcc-edge) * (1 - var(--pa))); /* stretch: width grows card → 100vw as --pb goes 0 → 1 */ width: calc(var(--avcc-card-w) + (100vw - var(--avcc-card-w)) * var(--pb)); max-width: none; margin: 0; /* Single row, no stacking: text · Reject · Accept */ flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(0.85rem, 0.6rem + 0.9vw, 1.4rem); padding: clamp(0.7rem, 0.55rem + 0.6vw, 1.1rem) clamp(1rem, 0.8rem + 0.8vw, 1.5rem); border-radius: 18px; /* rounded corners kept throughout */ font-family: var(--font-body); font-size: var(--step-label); line-height: 1.4; /* The scroll-linked props update every frame from JS, so they don't need a transition. A light transition smooths the rare gaps between rAF frames. */ transition: right 90ms linear, bottom 90ms linear, width 90ms linear; } /* Text wraps when needed (nothing is hidden/clipped). The strip is wide enough to keep it on one line anyway. */ .avcc-text { flex: 1 1 auto; margin: 0; color: #ffffff; min-width: 0; } /* Policy links sit on their own row beneath the message */ .avcc-links { display: block; margin-top: 0.25rem; } .avcc-link { color: #ffffff; text-underline-offset: 3px; } .avcc-link:hover { color: rgba(255, 255, 255, 0.75); } /* Buttons sized to content so the row stays stable while the bar stretches — the text column takes all the slack. */ .avcc-actions { flex: 0 0 auto; display: flex; gap: clamp(0.5rem, 0.35rem + 0.4vw, 0.75rem); align-items: center; } .avcc-btn { flex: 0 0 auto; border-radius: 999px; /* pill shape */ padding: 0.5rem 1.15rem; text-align: center; white-space: nowrap; font-family: var(--font-body); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.8125rem); } /* Phones: stack the copy above full-width buttons (no room for a 60/20/20 row). */ @media (max-width: 36em) { .avcc-bar { flex-direction: column; align-items: stretch; gap: 1rem; } .avcc-text { flex: initial; } .avcc-actions { flex: initial; width: 100%; } .avcc-btn { padding: 0.85rem 1rem; } } /* ============================================================================= * MOBILE — gold line pattern clearance * On narrow screens the cream text panels are short, so the bottom-pinned gold * pattern overlaps the body copy. Add bottom padding so the text clears it, and * zoom the pattern in for a bolder look. Covers the home "private hotel" (hotel), * the amenities concierge, and the design intro patterns. * ========================================================================== */ @media (max-width: 47.99em) { /* Clip the panels so the enlarged pattern can't spill out */ .hotel__col--text, .concierge__col--text, .design-intro { overflow: hidden; } /* Reserve generous room at the foot of the text panels so the copy ends well above the pattern band (the zoomed pattern is taller). Extra ~7vh of breathing room so the text never grazes the pattern. */ .hotel__col--text, .concierge__col--text { padding-bottom: calc(clamp(9rem, 5rem + 22vw, 14rem) + 7vh); } /* Design intro's pattern sits below IMAGES, not text — only needs a little room beneath the pattern itself (lifted up a touch so it's not too low). */ .design-intro { padding-bottom: clamp(4rem, 2.5rem + 6vw, 6.5rem); } /* Zoom the pattern in (bigger motif), anchored bottom-right — same scale across home (hotel), amenities (concierge) and design (design-intro). */ .hotel__pattern, .concierge__pattern, .design-intro__pattern { width: 150%; left: auto; right: 0; } }