/* ========================================================================== Interchange Croydon – main stylesheet -------------------------------------------------------------------------- One stylesheet for the whole site, no build step. Edit and refresh. CONTENTS 1. Fonts & design tokens 10. Location (journeys, stats, maps) 2. Base / reset 11. Closing 3. Utilities & components 12. Contact & agents 4. Header & navigation 13. Footer 5. Hero, intro & welcome 14. Lightbox 6. Building specification 15. Motion (animations) 7. Availability 16. Responsive breakpoints 8. Gallery 17. Reduced motion & print 9. Uses & tabs CONVENTIONS - Class names follow BEM: .block, .block__element, .block--modifier e.g. .floor, .floor__area, .gallery__item--wide - .is-* classes are STATE classes added/removed by js/main.js (e.g. .is-scrolled, .is-open, .is-active, .is-visible). Don't add them in the HTML unless noted. - gets class "js" (set by the inline script in index.html) when JavaScript runs. Rules starting with ".js" only apply then, so the page still works – fully visible – without JavaScript. - Colours, spacing and widths come from the custom properties in :root. Change them there rather than hard-coding values. LAYOUT SYSTEM (two kinds of section) - CAPPED sections keep content inside a 1600px column: they pad with var(--edge) (use the .shell class). - FULL-WIDTH sections run edge to edge and pad with var(--gutter): header, hero, spec tiles, gallery, stats strip and footer. BREAKPOINTS (max-width, desktop-first – see section 16) 1180px small laptop – spec tiles go from 6 to 4 per row 1050px tablet – two-column layouts stack 860px mobile nav – header switches to the "Menu" button 760px phone – single column, smaller type ========================================================================== */ /* 1. Fonts & design tokens ------------------------------------------------ */ /* Brand typeface is Circular Std (per brochure). Until a web licence is supplied, Figtree (SIL OFL) is self-hosted as a close stand-in. To switch: add Circular woff2 files to assets/fonts, add @font-face rules named "Circular Std", and put it first in --font-sans. */ @font-face { font-family: "Figtree"; src: url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* Brand colours (from the Sept 2026 brochure) */ --mint: #86d5bb; --green: #2f7a64; --green-deep: #24634f; --peach: #ffd3c6; --coral: #d58884; --coral-ink: #a9504b; /* coral dark enough for text on peach / paper */ --paper: #fffdf9; --ink: #18342d; --white: #fff; --line: rgba(24, 52, 45, .22); --line-light: rgba(255, 255, 255, .26); /* hairlines on green sections */ /* Type & motion */ --font-sans: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.2, .75, .2, 1); /* used by every animation */ /* Spacing & layout */ --header-h: 76px; /* fixed header height (64px on mobile) */ --gutter: max(4vw, 18px); /* side padding of full-width sections */ /* One content column for the whole site. Capped sections pad to --edge; full-width sections run edge to edge but start their content on --edge */ --content-max: 1600px; --edge: max(var(--gutter), (100vw - var(--content-max)) / 2); --section-y: clamp(80px, 10vw, 160px); /* vertical padding between sections */ } /* 2. Base / reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; background: var(--paper); } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* Stops the page scrolling behind the open mobile menu / lightbox (set by JS) */ body.nav-open { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, p, ul, ol, dl, dd { margin: 0; } p { text-wrap: pretty; } /* avoids a single word alone on the last line */ ul, ol { padding: 0; list-style: none; } address { font-style: normal; } ::selection { background: var(--coral); color: var(--white); } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* 3. Utilities & components ---------------------------------------------- */ /* Capped content column – see "Layout system" at the top of the file */ .shell { width: 100%; padding-inline: var(--edge); } /* Section background colours */ .bg-mint { background: var(--mint); } .bg-green { background: var(--green); color: var(--white); } .bg-peach { background: var(--peach); } .text-coral { color: var(--coral-ink); } .text-green { color: var(--green); } /* Hidden visually but still read by screen readers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* "Skip to content" link – only appears when reached with the Tab key */ .skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 12px 18px; background: var(--ink); color: var(--white); font-size: 14px; transform: translateY(-200%); transition: transform .2s; } .skip-link:focus { transform: none; } /* Small uppercase labels above headlines, e.g. "01 / The destination" */ .section-index, .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .bg-green .section-index { color: rgba(255, 255, 255, .78); } /* Big section headlines. These animate in line by line (see section 15). */ .display { font-size: clamp(46px, 7.5vw, 120px); font-weight: 400; line-height: .9; letter-spacing: -.05em; text-wrap: balance; } .display--md { font-size: clamp(42px, 5.6vw, 88px); } .display em { font-style: normal; color: var(--green-deep); } /* highlighted words */ /* Intro paragraph under/next to a headline */ .lead { font-size: 17px; line-height: 1.6; max-width: 36em; } /* Buttons: .btn plus one of --solid (dark fill), --outline, --outline-light (on green) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 20px; border: 1px solid currentColor; border-radius: 0; background: transparent; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; } .btn--solid { background: var(--ink); border-color: var(--ink); color: var(--white); } .btn--solid:hover { background: var(--green); border-color: var(--green); } .btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); } .btn--outline-light { color: var(--white); } .btn--outline-light:hover { background: var(--white); color: var(--green); } .btn__meta { font-weight: 400; /* small secondary text inside a button, e.g. "PDF · 6 MB" */ opacity: .7; letter-spacing: .06em; } /* Underlined uppercase link, e.g. "Arrange a viewing" */ .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; } .text-link:hover { color: var(--green); } /* Round arrow buttons (gallery prev/next) */ .icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; background: transparent; font-size: 18px; transition: background .25s, color .25s, opacity .25s; } .icon-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); } .icon-btn:disabled { opacity: .3; cursor: default; } /* Small label sitting on top of an image, e.g. "Indicative CGI" */ .media-tag { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; background: rgba(255, 253, 249, .92); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* 4. Header & navigation -------------------------------------------------- */ /* Transparent over the hero; JS adds .is-scrolled after 30px of scroll and .is-open while the mobile menu is open – both give it a solid background. */ .site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-h); display: flex; align-items: center; gap: 24px; padding-inline: var(--gutter); color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .2); background: linear-gradient(rgba(10, 25, 30, .35), rgba(10, 25, 30, 0)); transition: background-color .35s, color .35s, border-color .35s; } .site-header.is-scrolled, .site-header.is-open { background: rgba(255, 253, 249, .95); color: var(--ink); border-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .wordmark { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-self: center; padding-top: 12px; margin-right: auto; white-space: nowrap; } .wordmark span { font-size: 20px; font-weight: 700; letter-spacing: .15em; } .wordmark small { font-size: 15px; letter-spacing: .03em; color: var(--mint); } /* Soft shadow keeps the logo readable over the bright hero photo */ .site-header:not(.is-scrolled):not(.is-open) .wordmark { text-shadow: 0 1px 10px rgba(8, 24, 28, .55); } .is-scrolled .wordmark small, .is-open .wordmark small, .wordmark--small small { color: var(--green); } .site-nav { display: flex; align-items: center; gap: 30px; } .site-nav ul { display: flex; gap: 6px; } .site-nav ul a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* Animated underline on hover / for the section currently in view (JS sets aria-current="true" on the matching link) */ .site-nav ul a::after { content: ""; position: absolute; left: 10px; right: 100%; bottom: 8px; height: 1px; background: currentColor; transition: right .3s var(--ease); } .site-nav ul a:hover::after, .site-nav ul a[aria-current="true"]::after { right: 10px; } .site-nav__cta { min-height: 42px; padding: 10px 16px; } .site-header:not(.is-scrolled) .site-nav__cta:hover { background: var(--white); color: var(--ink); border-color: var(--white); } /* "Menu" button – hidden on desktop, shown under 860px (section 16). The icon is two lines that rotate into an X when aria-expanded="true". */ .nav-toggle { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border: 0; background: none; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .nav-toggle__icon, .nav-toggle__icon::before { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); } .nav-toggle__icon { position: relative; transform: translateY(-3.5px); } .nav-toggle__icon::before { content: ""; position: absolute; top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(-7px) rotate(-90deg); } /* 5. Hero, intro & welcome ------------------------------------------------ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; color: var(--white); background: #1d2a33; } /* Background photo. object-position controls which part of the photo stays in view when it's cropped – adjust if the hero image is changed. JS moves it slightly on scroll (parallax), hence will-change. */ .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; transform: scale(1.06); will-change: transform; } /* Dark gradient over the photo so the white text stays readable */ .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 28, 36, .55), rgba(12, 28, 36, .05) 60%), linear-gradient(0deg, rgba(8, 24, 28, .65), transparent 60%); } .hero__content { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 40px) var(--gutter) clamp(34px, 5vw, 72px); } .hero .eyebrow { margin-bottom: 28px; font-weight: 600; } .hero__title { max-width: 1100px; font-size: clamp(64px, 12.5vw, 190px); font-weight: 400; line-height: .8; letter-spacing: -.055em; } /* Each in the hero headline is one line; the second is indented */ .hero__title > span { display: block; } .hero__title > span + span { margin-left: 8vw; } .hero__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1080px; margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .5); } .hero__offer { display: flex; flex-direction: column; gap: 2px; } .hero__offer strong { font-size: 19px; font-weight: 500; } .hero__offer span { font-size: 15px; } .round-link { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; font-size: 20px; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); } .round-link:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: translateY(4px); } /* Vertical "Interchange / Croydon" text on the right edge (hidden on phones) */ .hero__side-label { position: absolute; z-index: 1; top: 50%; right: 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; transform: translateY(-50%); } /* Section header (used by 01 Intro and 03 Building): eyebrow + headline on the left, supporting text on the right. --top text lines up with the top of the headline --bottom text lines up with the bottom of the headline */ .section-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; } .section-head h2 { margin-top: 24px; } .section-head--top { align-items: start; } .section-head--top > .lead { margin-top: calc(12px * 1.55 + 24px); } /* = eyebrow height + gap */ .section-head--bottom { align-items: end; } /* 01 Intro – the photo below it is deliberately full width */ .intro { padding-top: var(--section-y); } .intro__image { width: 100%; height: min(80vh, 900px); min-height: 380px; margin-top: 7vw; overflow: hidden; } .intro__image img { width: 100%; height: 100%; object-fit: cover; } /* 02 Welcome – photo on the left, peach text panel on the right */ .arrival { padding: var(--section-y) var(--edge); } .arrival__stage { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 760px; } .arrival__image { overflow: hidden; } .arrival__image img { width: 100%; height: 100%; object-fit: cover; } .arrival__copy { display: flex; flex-direction: column; justify-content: center; padding: 6vw 4vw; } .arrival__copy h2 { margin: 24px 0 34px; } .arrival__copy p:last-child { max-width: 34em; } /* 6. Building specification ---------------------------------------------- */ /* 12 tiles in a grid: 6 per row on desktop, 4 on small laptops, 2 on phones. The :nth-child rules remove the right border on the last tile of each row, add a top border from the second row, and give the first/last tile of each row the page gutter so the lines run edge to edge. If you change the number of tiles per row, update these rules in section 16 as well. */ .specs { padding-top: var(--section-y); } .specs .section-head .lead { color: rgba(255, 255, 255, .9); } .spec-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 7vw; border-block: 1px solid var(--line-light); } .spec-grid li { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 170px; padding: 26px 24px 30px; border-right: 1px solid var(--line-light); overflow-wrap: break-word; } .spec-grid li:nth-child(6n) { border-right: 0; } .spec-grid li:nth-child(6n+1) { padding-left: var(--gutter); } .spec-grid li:nth-child(6n) { padding-right: var(--gutter); } .spec-grid li:nth-child(n+7) { border-top: 1px solid var(--line-light); } .spec-grid span { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .7); } .spec-grid strong { font-size: 19px; font-weight: 400; line-height: 1.2; } /* 7. Availability --------------------------------------------------------- */ /* Left: headline + details of the selected floor (sticky on desktop). Right: list of floor buttons. JS adds .is-active to the selected floor. */ .availability { padding-block: var(--section-y); } .availability__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: start; } .availability__copy { position: sticky; top: calc(var(--header-h) + 40px); } .availability__copy h2 { margin: 24px 0 32px; } .floor-detail { margin-top: 44px; padding-top: 14px; border-top: 1px solid rgba(24, 52, 45, .45); } .floor-detail__name { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .floor-detail__area { margin-top: 4px; font-size: clamp(42px, 5vw, 72px); line-height: 1.05; letter-spacing: -.04em; } .floor-detail__sqm { font-size: 14px; } .floor-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; } .availability__total { margin-top: 26px; font-size: 14px; } .floor-list { border-top: 1px solid rgba(24, 52, 45, .4); } .floor { display: grid; grid-template-columns: 90px 1fr auto; align-items: baseline; width: 100%; padding: 20px 0; border: 0; border-bottom: 1px solid rgba(24, 52, 45, .28); background: transparent; text-align: left; transition: padding .25s var(--ease), background-color .25s; } .floor:hover, .floor.is-active { padding-inline: 18px; background: rgba(255, 255, 255, .42); } .floor__code, .floor__unit { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .floor__area { font-size: clamp(30px, 4vw, 58px); line-height: 1.05; letter-spacing: -.04em; } .floor.is-active .floor__area { color: var(--coral-ink); } /* 8. Gallery -------------------------------------------------------------- */ /* Horizontal scrolling strip. Item width modifiers: (none) standard · --wide landscape feature · --tall portrait image. Every other standard item is slightly shorter to create a staggered rhythm. */ .gallery { padding-block: 60px 70px; } .gallery__head { padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .gallery__controls { display: flex; gap: 10px; } .gallery__track { display: flex; align-items: flex-end; gap: 10px; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .gallery__track::-webkit-scrollbar { display: none; } /* scrollbar hidden – arrows/swipe instead */ .gallery__item { position: relative; flex: 0 0 36vw; max-width: 620px; scroll-snap-align: start; } .gallery__item--wide { flex-basis: 44vw; max-width: 760px; } .gallery__item--tall { flex-basis: 26vw; max-width: 440px; } .gallery__item a { display: block; overflow: hidden; height: 56vh; min-height: 420px; max-height: 640px; } .gallery__item:not(.gallery__item--tall):nth-child(even) a { height: 46vh; min-height: 360px; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .gallery__item a:hover img { transform: scale(1.03); } .gallery__caption { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* 9. Uses & tabs ---------------------------------------------------------- */ /* Tabs are shared by "Uses" (--dark) and the transport list (--light). JS sets aria-selected on the active tab and the `hidden` attribute on inactive panels. */ .uses { padding-block: var(--section-y); } .uses h2 { margin-top: 22px; } .tabs { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; flex: none; min-height: 48px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; transition: opacity .2s; } .tab::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: currentColor; transition: right .3s var(--ease); } .tab:hover { opacity: .9; } .tab[aria-selected="true"] { opacity: 1; } .tab[aria-selected="true"]::after { right: 0; } .tab:focus-visible { outline-offset: -2px; } .tabs--dark { margin-top: 56px; border-bottom: 1px solid rgba(24, 52, 45, .38); } .tabs--light { border-bottom: 1px solid var(--line-light); } [role="tabpanel"]:focus-visible { outline-offset: 6px; } .js [role="tabpanel"]:not([hidden]) { animation: panel-in .5s var(--ease); } @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } } .use-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7vw; align-items: center; margin-top: 46px; } .use-panel[hidden] { display: none; } .use-panel__media { position: relative; height: 66vh; min-height: 480px; max-height: 760px; overflow: hidden; } .use-panel__media img { width: 100%; height: 100%; object-fit: cover; } /* Media variants: default = one landscape photo, --portrait = tall image, --split = two stacked/staggered images (Medical tab) */ .use-panel__media--portrait { width: min(100%, 520px); aspect-ratio: 1088 / 1445; height: auto; min-height: 0; max-height: none; } .use-panel__media--split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; min-height: 0; max-height: none; } .use-panel__media--split figure { aspect-ratio: 3 / 4; overflow: hidden; } .use-panel__media--split figure:last-child { margin-top: 18%; } .use-panel__copy h3 { margin-bottom: 28px; font-size: clamp(38px, 5vw, 76px); font-weight: 400; line-height: .96; letter-spacing: -.045em; text-wrap: balance; } .use-panel__copy p { font-size: 17px; line-height: 1.6; max-width: 34em; } /* 10. Location (journeys, stats, maps) ------------------------------------ */ .location { padding-top: var(--section-y); } .location__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; } .location__copy h2 { margin: 24px 0 36px; } .location__copy .lead { color: rgba(255, 255, 255, .92); } .location__copy .lead + .lead { margin-top: 14px; } .journeys { border-top: 1px solid rgba(255, 255, 255, .4); align-self: start; } .journey-list li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-light); } .journey-list__place { display: flex; flex-direction: column; font-size: 19px; line-height: 1.3; } .journey-list__place small { font-size: 14px; color: rgba(255, 255, 255, .78); } .journey-list__time { flex: none; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; white-space: nowrap; } /* Stats strip (full width). In the HTML each
label comes before its
number (correct for screen readers); column-reverse shows the number first. JS animates the numbers counting up. */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8vw; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); } .stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 28px var(--gutter); border-right: 1px solid var(--line-light); } .stats > div:last-child { border-right: 0; } .stats dd { font-size: clamp(42px, 5vw, 76px); line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .stats dt { max-width: 15em; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .82); } /* Maps + station photos. Maps open full size in the lightbox. */ .location__media { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; padding-block: 7vw; } .location__map a { position: relative; display: block; height: 100%; overflow: hidden; background: var(--peach); } .location__map img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .location__map a:hover img { transform: scale(1.02); } .location__map--region a { aspect-ratio: 1764 / 1221; height: auto; background: var(--mint); } .location__side { display: grid; gap: 10px; align-content: start; } .location__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .location__photos figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .location__photos img { width: 100%; height: 100%; object-fit: cover; } .location__photos figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(255, 253, 249, .92); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .location__side > .btn { margin-top: 8px; justify-self: start; } /* 11. Closing ("Time for a change.") -------------------------------------- */ .closing { display: grid; grid-template-columns: 1.15fr .85fr; padding: var(--section-y) var(--edge); } .closing__image { height: 78vh; min-height: 560px; max-height: 900px; overflow: hidden; } .closing__image img { width: 100%; height: 100%; object-fit: cover; } .closing__copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 6vw 4vw; } .closing__copy h2 { margin: 28px 0 40px; font-size: clamp(46px, 6vw, 104px); } /* sized so "a change." fits one line */ /* 12. Contact & agents ---------------------------------------------------- */ .contact { padding-block: var(--section-y); } .contact__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .contact__head h2 { margin-top: 24px; } .agents { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; } .agents li { padding: 24px 24px 24px 0; border-top: 1px solid rgba(24, 52, 45, .34); } .agents li + li { padding-left: 24px; border-left: 1px solid var(--line); } .agents__firm { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; } .agents h3 { margin: 14px 0 12px; font-size: 26px; font-weight: 400; letter-spacing: -.02em; } .agents a { display: flex; align-items: center; min-height: 32px; font-size: 15px; overflow-wrap: anywhere; } .agents a:hover { text-decoration: underline; text-underline-offset: 3px; } /* 13. Footer -------------------------------------------------------------- */ /* Two full-width rows: __main (logo, address, developer logos, links) and __legal (disclaimer + design credit). */ .site-footer { border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; } .site-footer__main { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 24px 40px; align-items: end; padding: 36px var(--gutter); } .wordmark--small { padding-top: 0; } .wordmark--small span { font-size: 15px; } .wordmark--small small { font-size: 12px; } .site-footer__developers { display: flex; align-items: center; gap: 28px; } .site-footer__developers img { width: auto; } .site-footer__developers .logo-tristan { height: 50px; } .site-footer__developers .logo-canmoor { height: 38px; } .site-footer__links { display: flex; gap: 20px; } .site-footer__links a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 3px; } .site-footer__legal { padding: 20px var(--gutter) 24px; border-top: 1px solid var(--line); font-size: 12px; color: rgba(24, 52, 45, .75); } .site-footer__credit { white-space: nowrap; } .site-footer__credit a { text-decoration: underline; text-underline-offset: 3px; } .site-footer__credit a:hover { color: var(--ink); } /* 14. Lightbox ------------------------------------------------------------ */ /* Full-screen image viewer built on the native element. Opened by any link with a data-lightbox attribute (see js/main.js). */ .lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 22, 20, .94); color: var(--white); } .lightbox::backdrop { background: transparent; } .lightbox[open] { animation: fade-in .25s ease; } @keyframes fade-in { from { opacity: 0; } } .lightbox__inner { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 70px 80px 60px; } .lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; } .lightbox__img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; background: var(--white); touch-action: pan-y pinch-zoom; } .lightbox__caption { font-size: 15px; text-align: center; } .lightbox__count { position: absolute; top: 24px; left: 28px; font-size: 13px; letter-spacing: .12em; } .lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(10, 22, 20, .4); color: var(--white); font-size: 20px; transition: background .2s, color .2s; } .lightbox__btn:hover { background: var(--white); color: var(--ink); } .lightbox__close { top: 14px; right: 18px; font-size: 26px; } .lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); } .lightbox__btn[hidden] { display: none; } /* 15. Motion (animations) ------------------------------------------------- */ /* All motion is switched off for visitors with "reduce motion" enabled (section 17) and never hides content when JavaScript is off (.js prefix). */ /* A) Headlines rise line by line. js/main.js splits each .display / hero headline into .split-line wrappers, adds .is-in when it scrolls into view, then restores the original markup and adds .split-done. Headlines stay invisible until split so they don't flash before animating. */ .js :is(.hero__title, .display):not(.is-split):not(.split-done) { visibility: hidden; } .split-line { display: block; /* Mask each line. The clip reaches a little past the line box so accents and descenders aren't cropped at tight line-heights, without changing layout (padding/margins here would shift the text). */ clip-path: inset(-.5em -.3em -.24em -.3em); } .split-line__inner { display: block; transform: translate3d(0, 135%, 0); transition: transform .9s var(--ease); transition-delay: calc(var(--line, 0) * 90ms); } .is-in .split-line__inner { transform: none; } /* B) Page-load sequence: header slides in, hero photo settles, supporting hero copy follows the headline. Pure CSS – runs once on load. */ @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } } @keyframes header-in { from { opacity: 0; transform: translate3d(0, -100%, 0); } } @keyframes hero-settle { from { opacity: .35; transform: scale(1.08); } } .js .site-header { animation: header-in .9s var(--ease) .1s backwards; } .js .hero__media { animation: hero-settle 2.4s var(--ease) backwards; } .js .hero .eyebrow { animation: rise-in .9s var(--ease) .15s backwards; } .js .hero__footer { animation: rise-in .9s var(--ease) .55s backwards; } .js .hero__side-label { animation: fade-in 1.2s ease .9s backwards; } /* C) Scroll-in motion. js/main.js adds data-anim="up" (fade + rise) or data-anim="img" (fade + slight zoom-out) to elements, then .is-visible when they scroll into view. --i is the item's position in a group and creates the stagger (70ms apart). Which elements animate is decided by the lists in js/main.js, not here. */ [data-anim] { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } /* keep buttons' own hover transitions (and don't delay them) */ .btn[data-anim] { transition: opacity .8s var(--ease), transform .8s var(--ease), background .25s, color .25s, border-color .25s; transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s; } .js [data-anim]:not(.is-visible) { opacity: 0; } .js [data-anim="up"]:not(.is-visible) { transform: translate3d(0, 24px, 0); } [data-anim="img"] { overflow: hidden; transition-duration: 1s; } [data-anim="img"] img { transition: transform 1.6s var(--ease); } .js [data-anim="img"]:not(.is-visible) img { transform: scale(1.08); } /* 16. Responsive breakpoints ---------------------------------------------- */ /* Small laptop: tighter nav, spec tiles 4 per row (re-map the edge tiles) */ @media (max-width: 1180px) { .site-nav { gap: 16px; } .site-nav ul { gap: 0; } .spec-grid { grid-template-columns: repeat(4, 1fr); } .spec-grid li:nth-child(6n) { border-right: 1px solid var(--line-light); } .spec-grid li:nth-child(4n) { border-right: 0; } .spec-grid li:nth-child(n+5) { border-top: 1px solid var(--line-light); } .spec-grid li:nth-child(6n+1) { padding-left: 24px; } .spec-grid li:nth-child(6n) { padding-right: 24px; } .spec-grid li:nth-child(4n+1) { padding-left: var(--gutter); } .spec-grid li:nth-child(4n) { padding-right: var(--gutter); } } /* Tablet: two-column layouts stack into one column */ @media (max-width: 1050px) { .arrival__stage, .availability__layout, .use-panel, .location__grid, .closing { grid-template-columns: 1fr; } .arrival__stage { min-height: 0; } .arrival__image { height: 62vh; min-height: 380px; } .availability__copy { position: static; } .availability__layout { gap: 50px; } .use-panel { gap: 40px; } .use-panel__media { height: 56vh; min-height: 380px; } .closing__copy { padding: 60px 0 0; } .closing__image { height: 64vh; min-height: 420px; } .agents { grid-template-columns: 1fr 1fr; } .agents li:nth-child(3) { padding-left: 0; border-left: 0; } .location__media { grid-template-columns: 1fr; } .location__map a { aspect-ratio: 1667 / 1189; } .gallery__item { flex-basis: 52vw; } .gallery__item--wide { flex-basis: 64vw; } .gallery__item--tall { flex-basis: 40vw; } } /* Mobile navigation: nav links move into a drop-down panel under the header, opened by the "Menu" button (.site-header.is-open) */ @media (max-width: 860px) { :root { --header-h: 64px; } .nav-toggle { display: inline-flex; } .wordmark span { font-size: 15px; } .wordmark small { font-size: 12px; } .site-nav { position: fixed; inset: var(--header-h) 0 auto; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 24px; padding: 16px var(--gutter) 32px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(10, 22, 20, .35); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; } .site-header.is-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); } .site-nav ul { flex-direction: column; } .site-nav ul a { width: 100%; min-height: 56px; padding-inline: 0; border-bottom: 1px solid var(--line); font-size: 15px; } .site-nav ul a::after { display: none; } .site-nav__cta { min-height: 52px; } } /* Phone: single column, smaller headlines. The Welcome and Closing photos run edge to edge here (no side padding) so there are no white gaps. */ @media (max-width: 760px) { body { font-size: 16px; } .display { font-size: clamp(44px, 13.5vw, 72px); } .display--md { font-size: clamp(38px, 11vw, 56px); } .hero__title { font-size: clamp(60px, 19vw, 110px); } .hero__title > span + span { margin-left: 0; } .hero__side-label { display: none; } .hero__offer strong { font-size: 17px; } .hero__offer span { font-size: 14px; } .section-head { grid-template-columns: 1fr; gap: 28px; } .section-head--top > .lead { margin-top: 0; } .intro__image { height: 56vh; min-height: 340px; margin-top: 56px; } .arrival { padding: 0; } .arrival__image { height: 52vh; min-height: 300px; } .arrival__copy { padding: 56px var(--edge); } /* spec tiles: 2 per row, every tile padded with the gutter */ .spec-grid { grid-template-columns: 1fr 1fr; margin-top: 50px; } .spec-grid li, .spec-grid li:nth-child(4n), .spec-grid li:nth-child(4n+1), .spec-grid li:nth-child(6n), .spec-grid li:nth-child(6n+1) { min-height: 140px; padding: 20px var(--gutter) 22px; border-right: 1px solid var(--line-light); } .spec-grid li:nth-child(n+3) { border-top: 1px solid var(--line-light); } .spec-grid li:nth-child(2n) { border-right: 0; } .spec-grid strong { font-size: 17px; } .floor { grid-template-columns: 64px 1fr auto; padding-block: 16px; } .floor:hover, .floor.is-active { padding-inline: 12px; } .floor-detail__actions .btn { flex: 1 1 100%; } .gallery { padding-block: 28px 24px; } .gallery__head { margin-bottom: 16px; } .gallery__item, .gallery__item--wide, .gallery__item--tall { flex-basis: 84vw; } .gallery__item a, .gallery__item:not(.gallery__item--tall):nth-child(even) a { height: 58vh; min-height: 320px; max-height: 520px; } .tabs--dark { margin-top: 40px; } .tabs { gap: 22px; } .use-panel { margin-top: 32px; } .use-panel__media { height: 48vh; min-height: 300px; } /* multi-image / portrait media size to their images, not a fixed height */ .use-panel__media--split, .use-panel__media--portrait { height: auto; min-height: 0; } .use-panel__media--split { grid-template-columns: 1fr; gap: 12px; } .use-panel__media--split figure { aspect-ratio: 3 / 2; } .use-panel__media--split figure:last-child { margin-top: 0; } .journeys { margin-top: 8px; } .journey-list__place { font-size: 17px; } .stats { grid-template-columns: 1fr 1fr; } .stats > div { padding: 22px var(--gutter); } .stats > div:nth-child(2) { border-right: 0; } .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-light); } .closing { padding: 0; } .closing__copy { padding: 56px var(--edge); } .closing__image { height: 56vh; min-height: 340px; } .contact__head { flex-direction: column; align-items: flex-start; } .agents { grid-template-columns: 1fr; margin-top: 44px; } .agents li, .agents li + li { padding: 20px 0; border-left: 0; } .site-footer__main { grid-template-columns: 1fr; gap: 16px; padding: 30px var(--gutter); } .lightbox__inner { padding: 64px 12px 90px; } .lightbox__img { max-height: calc(100dvh - 190px); } .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; } .lightbox__prev { left: calc(50% - 64px); } .lightbox__next { right: calc(50% - 64px); } .lightbox__count { top: 28px; left: 16px; } .js [data-anim="up"]:not(.is-visible) { transform: translate3d(0, 16px, 0); } } /* 17. Reduced motion & print --------------------------------------------- */ /* Visitors who ask their device to reduce motion get no animations at all */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js [data-anim] { opacity: 1 !important; transform: none !important; } .hero__media img { transform: none !important; } .js :is(.hero__title, .display) { visibility: visible !important; } } /* Printing: drop interactive parts and make sure everything is visible */ @media print { .site-header, .nav-toggle, .gallery, .lightbox, .hero__media::after { display: none !important; } .hero { min-height: 0; color: var(--ink); background: none; } .js [data-anim], .js [data-anim] img { opacity: 1 !important; transform: none !important; } .js :is(.hero__title, .display) { visibility: visible !important; } .split-line__inner { transform: none !important; } }