/* ============================================================ ARCHETYPE PROPERTIES: Design System Brand: Joie Brands "Concept 2: Tessellated Genius" ============================================================ */ /* ---------- Fonts ---------- Brand type is "Commuters Sans" (geometric grotesque, not on Google Fonts). Interim licensed stand-in: Archivo (OFL). Swap to Commuters Sans webfont when the client supplies licensed files: see /assets/fonts + README. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300&family=Archivo:wght@300;400;500;600;700&family=Archivo+Expanded:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- Tokens ---------- */ /* The apostrophe and ampersand are left out of Commuters' range, so in headings they fall back to Archivo (the site's previous heading font) at the same weight. */ @font-face { font-family: 'Commuters Sans'; src: url('../assets/fonts/commuters-sans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-0025, U+0028-007E; } :root { /* Brand palette (exact from brand deck) */ --black: #0d0d0d; --eggshell: #f5efeb; --sand: #e9e5df; --sage: #6f6e6b; --charcoal: #373737; /* Derived / tints */ --eggshell-2: #ece5df; --sage-tint: #a9a8a4; --sage-deep: #3f3f3d; --sand-deep: #cfc9c1; --sand-tint: #ece9e4; /* Monochrome direction: the accent tokens above now hold neutrals. The original brand tints are parked here in case they come back. */ --brand-sand: #e7c28c; --brand-sage: #919888; --brand-sage-deep: #767c6c; --brand-sand-deep: #e7c28c; --line: rgba(55,55,55,.16); --line-light: rgba(245,239,235,.18); /* Semantic (light sections) */ --bg: var(--eggshell); --surface: #fbf8f5; --ink: var(--charcoal); --ink-soft:#5c5c5c; --accent: var(--sage); /* Type */ --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif; --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: 'Commuters Sans', 'Archivo', system-ui, sans-serif; /* every heading, semibold */ /* Shared type sizes: every section heading, and every paragraph of body copy */ --size-heading: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); --size-copy: clamp(1rem, .94rem + .3vw, 1.18rem); --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Scale */ --step--1: clamp(.72rem, .69rem + .16vw, .79rem); --step-0: clamp(.88rem, .85rem + .2vw, .97rem); --step-1: clamp(1rem, .93rem + .4vw, 1.18rem); --step-2: clamp(1.3rem, 1.08rem + 1.1vw, 1.85rem); --step-3: clamp(1.6rem, 1.2rem + 2.3vw, 2.75rem); --step-4: clamp(2.2rem, 1.4rem + 4.4vw, 4.6rem); --step-5: clamp(2.8rem, 1.6rem + 6.8vw, 6.8rem); /* Layout */ --wrap: 1360px; --gutter: clamp(1.25rem, 4vw, 4rem); /* the safe margin: where every page edge lines up, at any screen width. Below the content width it equals the gutter; on wider screens it grows with the centred column, so the header, captions and full-bleed pieces align with the content instead of drifting to the screen edge */ --safe: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter)); /* the vertical safe margin: room above and below content in screen-filling sections */ --safe-y: clamp(1.25rem, 4.5vh, 3.5rem); --radius: 0px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Reduced motion is not no feedback: nothing slides, scales or spins (transforms and clip reveals land instantly), but opacity and colour still change over a short, gentle fade so hovers, reveals and state changes stay readable. Looping animations stop. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color, fill, stroke, filter, visibility !important; transition-duration: .2s !important; transition-delay: 0s !important; transition-timing-function: ease !important; } } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } html { overflow-x: clip; background: var(--black); } /* bottom bounce = the footer, not white */ .os-top { position: absolute; left: 0; right: 0; top: -80vh; height: 80vh; z-index: 0; pointer-events: none; background: #0d0d0d center top / cover no-repeat; transform: scaleY(-1); } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } ::selection { background: var(--sage); color: var(--eggshell); } /* ---------- Typography ---------- */ h1,h2,h3,h4 { font-weight: 500; line-height: 1.04; letter-spacing: -.01em; } /* Section headings: light, sentence case, tight: quiet and contemporary. (The hero's SMART LUXURY keeps its own bold treatment.) */ .display { font-family: var(--font-sans); text-transform: none; font-weight: 300; letter-spacing: -.03em; line-height: 1.02; } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; color: var(--sage-deep); display: inline-flex; align-items: center; gap: .7rem; } /* Location pin (a small geometric diamond) instead of a dash */ .eyebrow::before { content: ""; width: .48rem; height: .48rem; background: currentColor; transform: rotate(45deg); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .theme-dark .eyebrow, .theme-black .eyebrow { color: var(--sand); } .theme-sage .eyebrow { color: #fbfaf8; } h2.display:not(.intent__line) { font-size: var(--size-heading); } .lede, .feat__lede { font-size: var(--size-copy); line-height: 1.55; color: var(--ink-soft); font-weight: 400; } .serif-note { font-style: italic; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(1.75rem, 3.4vw, 3.5rem); } /* Curved section transitions: each section domes gently over the one above */ .curve-top { position: relative; z-index: 1; padding-top: clamp(2rem, 4vw, 4rem); } /* Sections that a curve domes over need extra room below their content */ .curve-below { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section--tight { padding-block: clamp(1.75rem, 3.5vw, 3rem); } .stack > * + * { margin-top: 1.2em; } .grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); } .center { text-align: center; } .measure { max-width: 62ch; } .measure-sm { max-width: 46ch; } /* Theme sections */ .theme-dark { background: var(--charcoal); color: var(--eggshell); --ink: var(--eggshell); --ink-soft: #b9b6b1; --line: var(--line-light); } .theme-black { background: var(--black); color: var(--eggshell); --ink: var(--eggshell); --ink-soft: #a7a4a0; --line: var(--line-light); } .theme-sage { background: var(--sage); color: var(--eggshell); --ink: #fbfaf8; --ink-soft: #eae7e0; --line: rgba(245,239,235,.28); } .theme-surface { background: var(--surface); } .theme-sand { background: var(--sand-tint); } .theme-moss { background: var(--sage-deep); color: var(--eggshell); --ink: var(--eggshell); --ink-soft: rgba(245,239,235,.82); --line: var(--line-light); } /* ============================================================ Logo mark (inline SVG, currentColor) ============================================================ */ /* Official horizontal logo (brand vector, single colour: follows the header's colour) */ .logo { display: inline-flex; align-items: center; color: var(--ink); line-height: 0; } .logo__svg { display: block; height: 2.25rem; width: auto; } .logo__svg path { fill: currentColor; } /* the monogram is stroked centre-lines at the brand line weight; the logo stays 36px everywhere so the wordmark's letters (~1.07px strokes) match it */ .logo__svg .logo__mark path { fill: none; stroke: currentColor; stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ Header / Nav ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem,2.2vw,1.6rem) var(--safe); transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); } .site-header.is-scrolled { background: color-mix(in srgb, var(--eggshell) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding-block: .85rem; } /* Scrolled header is a translucent material over the page, not an opaque strip: content blurs under it, and a soft edge (not a hard 1px rule) marks where it meets the page. */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(55,55,55,.07), transparent); opacity: 0; transition: opacity .4s var(--ease); } .site-header.is-scrolled::after { opacity: 1; } @media (prefers-reduced-transparency: reduce) { .site-header.is-scrolled { background: var(--eggshell); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .site-header.is-scrolled { background: var(--eggshell); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--charcoal); } .site-header::after { display: none; } } /* Light, airy page: header is dark by default. Pages with a dark top-hero add .site-header--light to flip it back to eggshell. */ .site-header, .site-header .logo { color: var(--charcoal); } .site-header--light:not(.is-scrolled), .site-header--light:not(.is-scrolled) .logo { color: var(--eggshell); } .site-header.is-scrolled, .site-header.is-scrolled .logo { color: var(--charcoal); } .nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.5vw, 2.6rem); } .nav a { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; font-weight: 500; position: relative; padding-block: .3rem; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 1.2rem; } .nav-toggle { display: none; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.6rem; border-radius: 0; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; border: 1px solid currentColor; transition: all .35s var(--ease); white-space: nowrap; } .btn--solid { background: var(--charcoal); color: var(--eggshell); border-color: var(--charcoal); } .btn--sand { background: var(--sand); color: var(--charcoal); border-color: var(--sand); } /* Hover: the Archetype signage look: brand Sage with the tessellation cut tone-on-tone into it and white type. The layer fades in behind the label. */ :root { --sign-green: var(--brand-sage); --brand-line: 1.1px; } .btn { position: relative; isolation: isolate; overflow: hidden; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sign-green) url("../assets/brand/tess-tile.svg") center / 170px 170px repeat; opacity: 0; transition: opacity .35s var(--ease); } .btn:hover::before, .btn:focus-visible::before { opacity: 1; } .btn:hover, .btn:focus-visible, #inquire .cform__foot .btn--solid:hover, #inquire .cform__foot .btn--solid:focus-visible { color: #fff; border-color: var(--sign-green); } /* Press: feedback lands the instant a finger or mouse goes down (not on release): a small, quick give, then it eases back. No double-tap-zoom wait on anything tappable. */ a, button, label, select, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn:active, .street__nav:active, .ct-row__go:active, .gl-box__nav:active, .ploc-nav button:active, .gl-filter button:active { transform: scale(.97); transition: transform .1s var(--ease-out), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn .arrow { transition: transform .35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* Text link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; } .link-arrow .arrow { transition: transform .35s var(--ease); } .link-arrow:hover .arrow { transform: translateX(5px); } /* ============================================================ Loading overlay ============================================================ */ .loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--eggshell); transition: opacity .8s var(--ease), visibility .8s var(--ease); } .loader.is-done { opacity: 0; visibility: hidden; } .loader__inner { display: grid; place-items: center; gap: 1.4rem; } .loader__mark { width: min(34vw, 9.75rem); height: auto; display: block; overflow: visible; } .loader__mark path { fill: none; stroke: var(--charcoal); stroke-width: .76; stroke-linejoin: round; stroke-linecap: round; } .no-loader .loader { display: none; } .loader__word { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .42em; font-size: var(--step--1); font-weight: 600; color: var(--charcoal); opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s; padding-left: .42em; white-space: nowrap; } @media (max-width: 380px) { .loader__word { letter-spacing: .3em; padding-left: .3em; } } .loader.is-drawn .loader__word { opacity: 1; transform: none; } /* ============================================================ Hero: contained sage panel, building bleeds out of frame ============================================================ */ .hero { position: sticky; top: 0; z-index: 0; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; background: var(--charcoal); color: var(--eggshell); overflow: hidden; } /* ============================================================ Frosted-glass site: the hero stays pinned and keeps playing behind the WHOLE page. Every section rises over it as a translucent frosted panel, so the hero blurs through each one: even the light sections. ============================================================ */ :root { --frost-blur: 16px; } /* ============================================================ Stacking panels (home page). Each full-viewport section pins at the top of the window and the NEXT section rises up over it as you scroll: the previous panel stays still underneath. Native scroll, so it stays fluid. ============================================================ */ .frosted main > section:not(.hero) { position: sticky; top: var(--hdr, 76px); z-index: 1; padding-block: clamp(1.75rem, 3.2vw, 3rem); } /* The statement panel stays full-screen with its words centred; the rest size to their content (no dead space) and pin just below the nav so a pinned heading is never hidden under it. They still stack: each rises over the one before. */ .frosted main > section.intent { top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* the statement panel holds for an extra screen of scrolling: the statement, the tessellation and the one-liner build with the scroll (--p, 0→1) while it's pinned */ .frosted main > section.intent.is-scrub { min-height: 200svh; justify-content: flex-start; padding: 0 0 200svh; } .intent.is-scrub .intent__pattern { bottom: auto; height: 100svh; } /* both lines sit dead centre of the visible frame (below the header) while the panel is pinned */ .intent.is-scrub .intent__statement { position: absolute; left: 0; right: 0; top: var(--hdr, 76px); height: calc(100svh - var(--hdr, 76px)); display: grid; place-items: center; z-index: 2; } .intent.is-scrub .intent__statement > * { grid-area: 1 / 1; margin: 0; } /* one after the other in the same place: the one-liner rises, holds, lifts away; then the statement builds in where it was */ /* the one statement: it rises in word by word and stays while the pattern draws round it */ .intent.is-scrub .intent__one { font-size: clamp(.8rem, .66rem + .55vw, 1.15rem); letter-spacing: .36em; font-weight: 400; color: var(--eggshell); } .intent.is-scrub .intent__line { --lp: clamp(0, calc((var(--p, 0) - .6) * 9), 1); opacity: var(--lp); transform: translateY(calc((1 - var(--lp)) * 14px)); } /* then each word lights up in turn as you keep scrolling */ .intent.is-scrub .intent__line .lw { display: inline-block; opacity: calc(.16 + .84 * clamp(0, calc((var(--p, 0) - .68 - var(--k) * .07) * 11), 1)); } /* each word comes up on its own as you scroll through the panel: Boutique, then property, then developers (--s = where in the scroll each one starts) */ /* the whole line rises in, word by word, as soon as the panel arrives (not tied to the scroll, so wherever the page settles the full statement is there); the pattern still builds with the scroll around it */ .intent.is-scrub .intent__one .w > span { transform: translateY(110%); opacity: 0; transition: transform 1s var(--ease-out), opacity .8s var(--ease); transition-delay: 0s; } .intent.is-scrub.is-told .intent__one .w > span { transform: none; opacity: 1; } .intent.is-scrub.is-told .intent__one .w:nth-child(1) > span { transition-delay: .1s; } .intent.is-scrub.is-told .intent__one .w:nth-child(2) > span { transition-delay: .32s; } .intent.is-scrub.is-told .intent__one .w:nth-child(3) > span { transition-delay: .54s; } .frosted #map { padding-bottom: 0; } /* The closing Inquire panel fills the screen below the nav (no footer peeking in); no bottom padding, so the billboard runs off the panel's bottom edge */ .frosted main > section#inquire { min-height: calc(100svh - var(--hdr, 76px)); display: flex; flex-direction: column; justify-content: center; padding-bottom: 0; } #inquire .inquire-grid { flex: 1 1 auto; grid-template-columns: 1.1fr .9fr; } #inquire .inquire-form { padding-bottom: clamp(1.75rem, 3.2vw, 3rem); } /* Solid backgrounds so a rising panel cleanly covers the pinned one below it */ .frosted .theme-surface { background: var(--surface); } /* Monochrome rhythm down the home page, texture instead of colour: black statement -> white showcase -> black featured -> white map -> near-black inquire */ .frosted .frost-light { background: var(--black); } .frosted #inquire { background: #151515; --ink-soft: rgba(245,239,235,.72); } .frosted #inquire .inquire-copy .lede { color: rgba(245,239,235,.72); } .frosted .theme-dark { background: var(--charcoal); } .frosted .theme-black { background: var(--black); } /* The one glass moment: the intent panel is translucent over the blurred hero */ /* long, eased fade from clear to near-black so there is no visible edge where the panel starts */ .frosted .intent.frost { background: linear-gradient(180deg, rgba(13,13,13,0) 0, rgba(13,13,13,.06) 5svh, rgba(13,13,13,.2) 11svh, rgba(13,13,13,.42) 18svh, rgba(13,13,13,.66) 25svh, rgba(13,13,13,.85) 32svh, rgba(13,13,13,.96) 38svh, #0d0d0d 43svh); } /* Soften every divide: panels that rise over another cast a soft shadow up onto it, and the glassy intent panel feathers in from transparent (above), so no hard line */ .frosted main > section:not(.hero):not(.intent) { box-shadow: 0 -30px 60px -24px rgba(8, 8, 8, .38); } /* Non-home pages keep normal flow */ main > section:not(.hero) { position: relative; z-index: 1; } /* ============================================================ Hero: slideshow of front-facing building photos, SMART LUXURY fitted edge to edge across the top, caption of the current building. ============================================================ */ .hero__media { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 55%; animation: heroKen 26s ease-in-out infinite alternate; } .hero.is-parked .hero__media { animation-play-state: paused; } .frosted .hero__media { transition: filter .6s var(--ease); } .frosted .hero.is-soft .hero__media { filter: blur(6px); } .frosted .hero.is-blurred .hero__media { filter: blur(14px); } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); } .hero__media img.active { opacity: 1; } @keyframes heroKen { from { transform: scale(1.02); } to { transform: scale(1.1); } } .hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.18) 34%, rgba(13,13,13,.08) 62%, rgba(13,13,13,.6) 100%); } .hero__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity; } /* middle: one line, fitted edge to edge by JS (--fs) */ .hero__head { position: absolute; left: 0; right: 0; z-index: 1; text-align: center; top: clamp(5.4rem, 11.5svh, 7.5rem); } .hero__word { margin: 0; white-space: nowrap; color: var(--eggshell); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs, 11vw); line-height: .8; letter-spacing: -.02em; text-shadow: 0 8px 50px rgba(13,13,13,.22); } /* Hero title: SMART LUXURY in one line across the top, fitted edge to edge, in light geometric caps. Drawn on like the logo (heroWord): each letter's outline traces in turn (.hero__title.is-drawing), then the letters fill (.is-filled). Montserrat stands in for the logo's Proxima Nova (licensed; swap --font-title when files are available). */ :root { --font-title: 'Montserrat', 'Proxima Nova', 'Archivo', sans-serif; } .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hero__title { margin: 0; line-height: 0; font-family: var(--font-title); font-weight: 200; transition: opacity .6s var(--ease); } .hero__svgword { display: block; width: 94%; height: auto; margin-inline: auto; overflow: visible; } /* no filter: a drop-shadow on the svg blanks the text on mobile Chrome */ .hero__svgword text { font-family: var(--font-title); font-weight: 200; font-size: 100px; fill: rgba(245,239,235,0); stroke: var(--eggshell); stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 900; } .hero__title.is-drawing .hero__svgword text { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.7,0,.3,1) calc(.25s + var(--i) * .12s); } .hero__title.is-filled .hero__svgword text { stroke-dashoffset: 0; fill: var(--eggshell); transition: fill .9s var(--ease), stroke-dashoffset 0s; } .hero.is-away .hero__title { opacity: 0; } .hero__word[data-word] { transition: opacity .5s var(--ease); } .hero.is-away .hero__word[data-word] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .hero__pat { transition: none; } } /* entrance: kicker + wordmark rise in once the loader clears */ .hero__head > * { opacity: 0; transform: translateY(26px); } .loaded .hero__head > * { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); } /* bottom band: which building this is + a scroll cue */ .hero__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(1.2rem, 4vh, 2.4rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-inline: var(--safe); color: var(--eggshell); will-change: opacity; } .hero__cap { margin: 0; display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; transition: opacity .35s var(--ease); } .hero__cap.is-swap { opacity: 0; } .hero__idx, .hero__cue { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sand); } .hero__cap-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); letter-spacing: .04em; text-transform: uppercase; } .hero__cap-loc { font-size: var(--step--1); color: rgba(245,239,235,.72); } .hero__cue { color: rgba(245,239,235,.7); display: inline-flex; align-items: center; gap: .7rem; } .hero__cue::after { content: ""; width: 1px; height: 26px; background: rgba(245,239,235,.5); } /* Slim outlined button (hero + project pages) */ .btn--line { background: transparent; color: var(--eggshell); border-color: rgba(245,239,235,.55); padding: .62rem 1.35rem; letter-spacing: .22em; font-weight: 600; backdrop-filter: none; } @media (max-width: 700px) { .hero__bar { flex-direction: column; align-items: flex-start; } .hero__cue { display: none; } } @media (prefers-reduced-motion: reduce) { .hero__media { animation: none; } .hero__head > * { opacity: 1 !important; transform: none !important; } } /* Featured cross-fade slideshow */ .feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease); } .feat__media img.active { opacity: 1; } .feat__media img:only-child { position: static; opacity: 1; } /* Section-transition divider (straight) */ .srule { width: min(78%, 53.75rem); height: 1px; margin: clamp(1.5rem, 5vw, 4rem) auto; background: var(--line); position: relative; opacity: 0; transform: scaleX(.4); transform-origin: center; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); } .srule.is-visible { opacity: 1; transform: scaleX(1); } .srule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--sand); transform: translate(-50%, -50%); } .theme-black .srule, .theme-dark .srule { background: rgba(245,239,235,.16); } /* Property callout tag (Villa Trieze style) */ .callout { position: relative; } .callout__title { font-weight: 600; letter-spacing: .04em; font-size: var(--step-1); color: var(--sand); } .callout__sub { font-size: var(--step--1); opacity: .85; margin-top: .2rem; } /* ============================================================ Intent: editorial statement + stats + interior cards ============================================================ */ .intent { position: relative; padding-block: clamp(3.25rem, 8vw, 6.5rem); overflow: visible; } .intent > .wrap { position: relative; z-index: 2; } /* Actual brand tessellation (Pattern 1): real vector lines that TRACE themselves in, fading at the top so the pattern melts up into the hero and down into the next section */ .intent__pattern { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: .045; -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.55) 24%, #000 36%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 12%, rgba(0,0,0,.55) 24%, #000 36%, #000 80%, transparent 100%); } /* Brand statement */ .intent__statement { max-width: min(94vw, 75rem); margin-inline: auto; text-align: center; } /* one-liner: the words rise into place under the statement */ .intent__one { display: flex; flex-direction: column; align-items: center; margin: clamp(1.6rem, 4vh, 2.6rem) 0 0; font-weight: 400; line-height: 1.2; font-family: var(--font-sans); font-size: clamp(.72rem, .66rem + .3vw, .86rem); letter-spacing: .34em; text-transform: uppercase; color: #cfccc6; } .intent__one .wds { display: flex; gap: .7em; } .intent__one .w { display: inline-block; overflow: hidden; padding-bottom: .1em; } .intent__one .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease-out); } .intent.is-told .intent__one .w > span { transform: none; } .intent.is-told .intent__one .w:nth-child(1) > span { transition-delay: .45s; } .intent.is-told .intent__one .w:nth-child(2) > span { transition-delay: .58s; } .intent.is-told .intent__one .w:nth-child(3) > span { transition-delay: .71s; } @media (prefers-reduced-motion: reduce) { .intent__one .w > span { transform: none; transition: none; } } .intent__eyebrow { color: var(--sand); text-transform: uppercase; letter-spacing: .42em; font-size: var(--step--1); font-weight: 600; margin-bottom: clamp(1.1rem, 2.8vh, 1.8rem); } .intent__line { color: var(--eggshell); font-family: var(--font-sans); font-weight: 300; text-transform: none; font-size: clamp(2.1rem, 4.7vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; } .intent__line .it, .inquire-title .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: inherit; letter-spacing: -.01em; font-size: 1.1em; } .intent__sub { color: #cfccc6; font-size: var(--step-0); max-width: 48ch; margin: clamp(1.3rem, 3.2vh, 2rem) auto 0; line-height: 1.55; } .intent__pattern .itrace-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .intent__pattern .itrace-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(2.5%) scale(1.02); will-change: opacity, transform; transition: opacity 1.6s var(--ease), transform 2.2s var(--ease-out); } .intent__pattern.is-in .itrace-svg { opacity: 1; transform: none; } .intent__pattern .itrace { fill: none; stroke: var(--eggshell); stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; } /* Glass-like sheen: a soft diagonal light and a faint vignette for depth */ .intent::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 140% at 50% 42%, rgba(13,13,13,0) 46%, rgba(13,13,13,.32) 100%); -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 8svh, #000 43svh); mask: linear-gradient(180deg, transparent 0%, transparent 8svh, #000 43svh); } .intent .display { text-shadow: 0 2px 26px rgba(13,13,13,.55); } .intent__top { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .intent__lead h2 { color: var(--eggshell); } .intent__body .lede { color: #d8d4cf; } .intent .hl { color: var(--sand); } .intent__pillars { display: grid; gap: 0; margin: 1.6rem 0 1.4rem; } .intent__pillars li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .85rem 0; border-top: 1px solid rgba(245,239,235,.12); } .intent__pillars li:last-child { border-bottom: 1px solid rgba(245,239,235,.12); } .intent__pillars b { font-size: var(--step-0); color: var(--eggshell); font-weight: 600; letter-spacing: .01em; } .intent__pillars span { font-size: var(--step--1); color: #9b988f; text-align: right; max-width: 24ch; } .intent__stats { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin: 0 0 1.6rem; } .intent__stats .fig b { font-family: var(--font-display); font-weight: 600; } .intent__stats .fig b { font-family: var(--font-display); font-size: var(--step-2); color: var(--eggshell); display: block; line-height: 1; } .intent__stats .fig span { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: #8f8c88; margin-top: .35rem; display: block; } .intent__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .icard__img { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: #201f1b; } .icard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .icard:hover .icard__img img { transform: scale(1.05); } .icard figcaption { margin-top: .9rem; } .icard figcaption b { display: block; font-size: var(--step-0); letter-spacing: .01em; color: var(--eggshell); } .icard figcaption span { display: block; font-size: var(--step--1); color: #9b988f; margin-top: .2rem; } @media (max-width: 820px) { .intent__top { grid-template-columns: 1fr; } } @media (max-width: 640px) { .intent__cards { grid-template-columns: 1fr; } } /* ============================================================ Bento grid (intent + stats) ============================================================ */ .bento-section { background: var(--black); } .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); grid-auto-rows: minmax(148px, auto); } .bento__tile { position: relative; overflow: hidden; border-radius: 0; padding: clamp(1.3rem, 2.4vw, 2.1rem); display: flex; flex-direction: column; background: #201f1b; } .bento__head { grid-column: 1 / 4; grid-row: 1 / 3; background: var(--sage); color: var(--eggshell); justify-content: space-between; gap: 1.5rem; } .bento__head .eyebrow { color: #fbfaf8; } .bento__head h2 { color: var(--eggshell); } .bento__head .lede { color: #f4f1ec; } .bento__wm { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .10; pointer-events: none; z-index: 0; } .bento__head > * { position: relative; z-index: 1; } .bento__map { grid-column: 4 / 7; grid-row: 1 / 2; flex-direction: row; align-items: center; gap: 1.2rem; } .bento__mapart { flex: 1 1 55%; min-width: 0; } .bento__mapart svg { width: 100%; height: auto; max-height: 9.375rem; } .bento__map { min-height: 12.5rem; } .bento__mapart .uae { fill: rgba(111,110,107,.18); stroke: var(--sage-tint); stroke-width: 2.2; stroke-linejoin: round; } .bento__mapart .pin circle { fill: var(--sand); } .bento__mapart .pin text { fill: #e7e3de; font-family: var(--font-sans); font-size: 11px; letter-spacing: .04em; } .bento__meta { flex: 0 0 auto; } .bento__meta b { font-family: var(--font-display); font-size: var(--step-2); color: var(--eggshell); display: block; line-height: 1; } .bento__meta span { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: #9b988f; display: block; margin-top: .4rem; max-width: 16ch; } .bento__stat { grid-row: 2 / 3; justify-content: space-between; } .bento__head + .bento__map + .bento__stat { grid-column: 4 / 5; } .bento__stat:nth-of-type(4) { grid-column: 5 / 6; } .bento__stat:nth-of-type(5) { grid-column: 6 / 7; } .bento__stat .ico { color: var(--sage-tint); } .bento__stat .ico svg { width: 28px; height: 28px; } .bento__stat b { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.5rem); color: var(--sand); line-height: 1; margin-top: auto; } .bento__stat .lbl { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: #9b988f; margin-top: .4rem; } @media (max-width: 880px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(130px, auto); } .bento__head { grid-column: 1 / 3; grid-row: auto; } .bento__map { grid-column: 1 / 3; grid-row: auto; } .bento__stat, .bento__stat:nth-of-type(4), .bento__stat:nth-of-type(5), .bento__head + .bento__map + .bento__stat { grid-column: auto; grid-row: auto; } } @media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .bento__head, .bento__map { grid-column: 1; } .bento__map { flex-direction: column; align-items: flex-start; } } /* ============================================================ Page hero (inner pages) ============================================================ */ .page-hero { position: relative; overflow: hidden; min-height: 56svh; display: flex; align-items: flex-end; padding-top: clamp(6rem, 12vh, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); background: var(--charcoal); color: var(--eggshell); } .page-hero--media .page-hero__bg { position: absolute; inset: 0; z-index: 0; } .page-hero--media .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .page-hero--media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,13,13,.4), rgba(13,13,13,.7)); z-index: 0; } .page-hero__wm { position: absolute; inset: 0; z-index: 0; opacity: .07; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { color: var(--eggshell); font-size: var(--step-4); } .page-hero__eyebrow { color: var(--sand); margin-bottom: 1rem; } .breadcrumb { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 1.2rem; } /* Prose */ .prose { max-width: 68ch; } .prose p + p { margin-top: 1.1em; } .two-col { columns: 2 320px; column-gap: clamp(2rem,4vw,3.5rem); } .two-col p { margin: 0 0 1em; break-inside: avoid; } /* Value cards */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(1.5rem,3vw,2.5rem); } .value { padding-top: 1.5rem; border-top: 1px solid var(--line); } .value .num { font-family: var(--font-display); font-size: var(--step-1); color: var(--sage); } .value h3 { font-size: var(--step-1); margin: .6rem 0 .5rem; text-transform: uppercase; letter-spacing: .02em; } /* ============================================================ Featured / Project cards ============================================================ */ .feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .feature--rev { grid-template-columns: .85fr 1.15fr; } .feature--rev .feature__media { order: 2; } .feature__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; } .feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .feature:hover .feature__media img { transform: scale(1.04); } /* Break-out showcase (building rises out of a brand colour block) */ .showcase { position: relative; padding-top: clamp(2rem, 6vw, 4.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); } .showcase__block { position: absolute; z-index: 0; left: -5%; right: 16%; top: 28%; bottom: -6%; background: var(--sage); border-radius: var(--radius); } .showcase__block--sand { background: var(--sand); } .showcase__img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 70px -34px rgba(13,13,13,.45); } .feature .stack { position: relative; z-index: 1; } /* Featured intro motion */ .showcase__block { opacity: 0; transform: translateY(22px) scale(.96); transform-origin: bottom; transition: opacity 1s var(--ease-out) .1s, transform 1s var(--ease-out) .1s; } .showcase.is-visible .showcase__block { opacity: 1; transform: none; } .showcase__cap { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out) .5s, transform .7s var(--ease-out) .5s; } .showcase.is-visible .showcase__cap { opacity: 1; transform: none; } .feature .stack .spec { opacity: 0; transform: translateY(12px); } .feature .stack.is-visible .spec { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .feature .stack.is-visible .spec:nth-child(1) { transition-delay: .12s; } .feature .stack.is-visible .spec:nth-child(2) { transition-delay: .22s; } .feature .stack.is-visible .spec:nth-child(3) { transition-delay: .32s; } .feature .stack.is-visible .spec:nth-child(4) { transition-delay: .42s; } /* Soft image reveal: visible by default, animates when revealed. Uses transform/opacity only (GPU-composited) to stay smooth on the large featured banner where clip-path caused per-frame repaints. */ /* Hidden by default + transition (an animation here snapped to opacity 0 on reveal = a visible flash). Transition from the hidden state = clean fade. */ .img-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .img-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ Featured banner (Villa Trieze): image + overlaid panel ============================================================ */ .feat { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 80px -46px rgba(13,13,13,.5); } /* Ken Burns drift on the active image + progress bar */ .feat.is-run .feat__media img.active { animation: kenburns var(--dur, 6s) ease-out forwards; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } } .feat__progress { position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; width: 100%; background: rgba(245,239,235,.16); } .feat__progress::after { content: ""; display: block; height: 100%; background: var(--sand); transform-origin: left; transform: scaleX(0); } .feat.is-run .feat__progress::after { animation: featbar var(--dur, 6s) linear both; } .feat__corner { position: absolute; top: clamp(1rem,2.5vw,1.6rem); right: clamp(1rem,2.5vw,1.6rem); width: 26px; height: 26px; z-index: 3; border-top: 1.5px solid var(--sand); border-right: 1.5px solid var(--sand); opacity: .8; } @keyframes featbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .feat__media img.active { animation: none; } .feat__progress::after { animation: none; transform: scaleX(1); } } .feat__media { position: relative; aspect-ratio: 2.15 / 1; min-height: clamp(27.5rem, 46vw, 38.75rem); } /* room for the panel */ .feat__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13,13,13,.78) 0%, rgba(13,13,13,.4) 45%, rgba(13,13,13,0) 78%), linear-gradient(0deg, rgba(13,13,13,.5) 0%, transparent 40%); } .feat__panel { position: absolute; left: 0; bottom: 0; z-index: 2; color: var(--eggshell); padding: clamp(1.5rem, 4vw, 3.2rem); max-width: min(33.75rem, 84%); } .feat.is-visible .feat__panel { animation: panelIn .7s var(--ease-out) 0s both; } @keyframes panelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .feat__panel .eyebrow { color: var(--sand); } .feat__panel h2 { color: var(--eggshell); margin-top: .3rem; } .feat__lede { margin-top: .7rem; color: #e7e3de; max-width: 42ch; } .feat__specs { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 1rem 0 1.4rem; } .feat__specs li { font-size: var(--step--1); letter-spacing: .04em; position: relative; padding-left: 1rem; color: #d7d3ce; } .feat__specs li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 0; background: var(--sand); } @media (max-width: 640px) { .feat__media { aspect-ratio: 3 / 4; } .feat__panel { max-width: 100%; } } .showcase__cap { position: absolute; z-index: 2; right: -4%; bottom: -7%; background: var(--charcoal); color: var(--eggshell); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .6rem 1rem; } @media (max-width: 900px) { .showcase__block { left: 6%; right: -2%; } .showcase__cap { right: 0; } } /* Stat numbers pick up brand sage */ .stat b { color: var(--sage-deep); } .theme-dark .stat b, .theme-sage .stat b { color: inherit; } /* ============================================================ Neighbourhood: continuous line streetscape ============================================================ */ .street { position: relative; display: flex; align-items: center; gap: clamp(.25rem, 1vw, .75rem); } .street__track { display: flex; align-items: flex-start; gap: clamp(1.4rem, 4vw, 4rem); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 1rem .5rem 2.4rem; flex: 1 1 auto; scrollbar-width: none; -ms-overflow-style: none; } .street__track::-webkit-scrollbar { display: none; } /* Street reveal: buildings keep full-strength linework and rise into place. A translate (not scale) avoids the non-scaling-stroke shimmer on the line art. */ .street__track > .hood__item { transform: translateY(30px); transition: transform .6s var(--ease-out), opacity .7s var(--ease); } .street__track.is-inview > .hood__item { transform: none; } .street__track.is-inview > .hood__item:nth-child(2) { transition-delay: .08s; } .street__track.is-inview > .hood__item:nth-child(3) { transition-delay: .16s; } .street__track.is-inview > .hood__item:nth-child(4) { transition-delay: .24s; } .street__track.is-inview > .hood__item:nth-child(5) { transition-delay: .32s; } .street__track.is-inview > .hood__item:nth-child(6) { transition-delay: .40s; } .hood__item { flex: 0 0 auto; width: clamp(9.25rem, 15vw, 12.375rem); display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; scroll-snap-align: center; transition: opacity .7s var(--ease); } .hood__elevwrap { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 340px; } .elev { width: auto; max-width: none; display: block; overflow: visible; } .elev .gline { stroke: var(--line); stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; } .elev .ln { fill: none; stroke: var(--charcoal); stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-linecap: butt; transition: fill .7s var(--ease); } .elev .knock { fill: var(--surface); stroke: none; } .hood__item.on .elev .wall { fill: rgba(55,55,55,.05); } .hood__item.on .elev .roof { fill: rgba(55,55,55,.12); } .hood__item.on .elev .glass { fill: rgba(55,55,55,.14); } .hood__item.on .elev .accent { fill: rgba(55,55,55,.22); } .street.has-active .hood__item:not(.on) { opacity: .3; } .elev .marker { fill: none; stroke: var(--sand); stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .6s var(--ease), transform .6s var(--ease); } .elev .markdot { fill: var(--sand); opacity: 0; transition: opacity .6s var(--ease); } .hood__item.on .elev .marker { opacity: 1; transform: scale(1); } .hood__item.on .elev .markdot { opacity: 1; } .hood__lbl { margin-top: 1.1rem; } .hood__lbl b { display: block; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--charcoal); transition: color .55s var(--ease); } .hood__lbl > span { display: block; font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; } .hood__item.on .hood__lbl b { color: var(--sand-deep); } .street__nav { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--charcoal); background: var(--surface); cursor: pointer; transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .street__nav:hover { background: var(--charcoal); color: var(--eggshell); border-color: var(--charcoal); } .street__nav.is-hidden { opacity: 0; visibility: hidden; } /* Showcase on sage: buildings drawn in eggshell, cut-outs match the sage ground */ .theme-sage .elev .ln, .theme-sage .hood__prop .ln { stroke: var(--eggshell); } .theme-sage .elev .gline { stroke: rgba(245,239,235,.4); } .theme-sage .elev .knock { fill: var(--sage); } .theme-sage .hood__lbl b { color: var(--eggshell); } .theme-sage .hood__item.on .hood__lbl b { color: var(--sand); } .theme-sage .street__nav { background: transparent; color: var(--eggshell); border-color: rgba(245,239,235,.45); } .theme-sage .street__nav:hover { background: var(--eggshell); color: var(--charcoal); border-color: var(--eggshell); } @media (hover: none) { .street__nav { display: none; } } /* ============================================================ Neighbourhood: isometric line houses (legacy) ============================================================ */ .hood { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 3vw, 2.4rem); padding-block: clamp(2.5rem, 5vw, 4rem); } .hood::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: clamp(2.5rem, 5vw, 4rem); height: 1px; background: var(--line); } .hood { align-items: flex-end; } .hood__item { position: relative; width: auto; min-width: clamp(7.25rem, 12vw, 9.375rem); cursor: pointer; } .hood__item:focus-visible { outline: 2px solid var(--sage); outline-offset: 6px; border-radius: 0; } .iso { width: 100%; height: auto; overflow: visible; display: block; transition: transform .5s var(--ease); } .iso .ln { fill: none; stroke: var(--charcoal); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; transition: fill .5s var(--ease); } .hood__item:hover .iso, .hood__item:focus-within .iso { transform: translateY(-10px); } .hood__item:hover .wall, .hood__item:focus-within .wall { fill: var(--sage); } .hood__item:hover .wall-2, .hood__item:focus-within .wall-2 { fill: var(--sage-deep); } .hood__item:hover .roof, .hood__item:focus-within .roof { fill: var(--sand); } .hood__item:hover .accent, .hood__item:focus-within .accent { fill: var(--sand-deep); } .hood__item:hover .glass, .hood__item:focus-within .glass { fill: rgba(55,55,55,.5); } .hood__item:hover .win, .hood__item:focus-within .win { fill: var(--eggshell); } .hood__item:hover .door, .hood__item:focus-within .door { fill: var(--charcoal); } .hood__label { display: block; text-align: center; margin-top: .5rem; font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s var(--ease); } .hood__item:hover .hood__label, .hood__item:focus-within .hood__label { color: var(--charcoal); } /* Neighbourhood: floating hover preview card (shared, JS-positioned) */ /* Hover a building: the section turns into that property's photo, with its details large at the top right; type and line work flip to light over the photo. */ #projects { position: relative; } .frosted main > section#projects { position: sticky; top: var(--hdr, 76px); } /* full screen under the header: title + intro at the top, the street of buildings settled at the bottom with room to breathe beneath the labels */ .frosted main > section#projects { min-height: calc(100vh - var(--hdr, 76px)); display: flex; flex-direction: column; padding-block: clamp(2.5rem, 8vh, 6rem); } #projects > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; } #projects .street { margin-top: auto; } /* the strip softens away at both edges instead of cutting off */ @property --fl { syntax: ''; inherits: false; initial-value: 7%; } @property --fr { syntax: ''; inherits: false; initial-value: 7%; } #projects .street__track { --fl: 7%; --fr: 7%; transition: --fl .45s var(--ease), --fr .45s var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); } /* no fade on an end you've scrolled all the way to */ #projects .street__track.at-start { --fl: 0%; } #projects .street__track.at-end { --fr: 0%; } /* only the drawing (and its label) is hoverable: not the empty space above it */ .hood__item, .hood__elevwrap { pointer-events: none; } .hood__item .elev, .hood__item .hood__lbl { pointer-events: auto; } #projects > .wrap, #projects > .wm-clip { position: relative; z-index: 1; } .hood__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0d0d0d; opacity: 0; transition: opacity .6s var(--ease); } #projects.is-preview .hood__bg { opacity: 1; } .hood__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 5s var(--ease-out); } .hood__bg img.on { opacity: 1; transform: none; } .hood__bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,13,13,.66) 0%, rgba(13,13,13,.4) 38%, rgba(13,13,13,.52) 62%, rgba(13,13,13,.88) 100%); } .hood__info { position: absolute; z-index: 2; right: var(--safe); top: clamp(4.5rem, 12vh, 7rem); max-width: 30rem; text-align: right; color: var(--eggshell); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); } #projects.is-preview .hood__info { opacity: 1; transform: none; transition-delay: .12s; } .hood__info-k, .hood__info-loc { display: block; font-size: 0.6875rem; letter-spacing: .22em; text-transform: uppercase; color: #cfccc6; } .hood__info-name { display: block; font-family: var(--font-sans); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; margin: .5rem 0 .6rem; } .hood__info-go { display: inline-block; margin-top: 1.1rem; font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid rgba(245,239,235,.5); padding-bottom: .3rem; } #projects h2, #projects .lede, #projects .link-arrow, .hood__lbl b, .hood__lbl > span { transition: color .5s var(--ease), opacity .4s var(--ease); } #projects.is-preview h2, #projects.is-preview .lede, #projects.is-preview .hood__lbl b, #projects.is-preview .hood__lbl > span { color: var(--eggshell); } #projects.is-preview .link-arrow { opacity: 0; } #projects.is-preview .wm-clip { opacity: 0; transition: opacity .5s var(--ease); } #projects.is-preview .elev .ln { stroke: var(--eggshell); } #projects.is-preview .elev .gline { stroke: rgba(245,239,235,.35); } #projects.is-preview .hood__item.on .elev .wall { fill: rgba(245,239,235,.07); } #projects.is-preview .hood__item.on .elev .glass { fill: rgba(245,239,235,.14); } #projects.is-preview .hood__item.on .elev .roof, #projects.is-preview .hood__item.on .elev .accent { fill: rgba(245,239,235,.2); } #projects.is-preview .street__nav { background: rgba(13,13,13,.4); color: var(--eggshell); border-color: rgba(245,239,235,.3); } #projects .elev .ln { transition: stroke .5s var(--ease), fill .7s var(--ease); } .hood__card { position: absolute; left: 0; bottom: 0; z-index: 6; width: 208px; max-width: 72vw; background: var(--charcoal); text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s var(--ease); } .hood__card.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .hood__card::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; background: var(--charcoal); transform: translateX(-50%) rotate(45deg); z-index: 1; } .hood__card-img { display: block; height: 116px; background: #2b2b29; overflow: hidden; } .hood__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hood__card-body { display: block; padding: .85rem 1.1rem 1rem; } .hood__card-k { display: block; font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); } .hood__card-name { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--eggshell); line-height: 1.04; margin-top: .4rem; text-transform: none; letter-spacing: 0; } .hood__card-loc { display: block; font-size: 0.6562rem; letter-spacing: .12em; text-transform: uppercase; color: #b3afa8; margin-top: .55rem; } .hood__card-go { display: block; font-size: 0.6562rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eggshell); margin-top: .95rem; } @media (hover: none) { .hood__card { display: none; } } /* Street props: trees, cars, people (ambient) */ .hood__prop { align-self: flex-end; opacity: .42; pointer-events: none; flex: none; } .hood__prop.tree { width: clamp(1.875rem, 4.5vw, 3.375rem); } .hood__prop.car { width: clamp(3rem, 7vw, 5.25rem); } .hood__prop.person { width: clamp(0.875rem, 2vw, 1.375rem); } .hood__prop svg { width: 100%; height: auto; display: block; } .hood__prop .ln { fill: none; stroke: var(--charcoal); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } @media (max-width: 700px) { .hood__prop.person, .hood__prop.car { display: none; } } /* Project index grid */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: clamp(1.25rem, 3vw, 2.4rem); align-items: start; } .projects-grid .project-card:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 4rem); } .projects-grid .project-card:nth-child(3) { margin-top: clamp(3rem, 9vw, 7rem); } @media (max-width: 760px) { .projects-grid .project-card { margin-top: 0 !important; } } .project-card { position: relative; display: block; } .project-card__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3/4; background: var(--eggshell-2); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .project-card:hover .project-card__media img { transform: scale(1.05); } .project-card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(13,13,13,.66)); } .project-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; color: var(--eggshell); z-index: 1; } .project-card__loc { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; opacity: .85; } .project-card__name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-2); line-height: 1; margin-top: .3rem; } .project-card__meta { display: flex; gap: 1.2rem; margin-top: .8rem; font-size: var(--step--1); letter-spacing: .04em; opacity: .9; } .tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: color-mix(in srgb, var(--eggshell) 90%, transparent); color: var(--charcoal); padding: .35rem .8rem; border-radius: 0; } .tag--sage { background: var(--sage); color: var(--eggshell); } /* Property detail spec list (Villa 48 style) */ .specs { display: grid; gap: 1rem; } .spec { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .spec svg { width: 26px; height: 26px; flex: none; color: var(--sage); } .spec span { font-size: var(--step-0); } /* Stat row */ .stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,5vw,4rem); } .stat b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; display: block; line-height: 1; } .stat span { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } /* ============================================================ Pattern band (filled tessellation) + line watermark ============================================================ */ .pattern-band { position: relative; overflow: hidden; background: radial-gradient(135% 95% at 50% -12%, #57534d 0%, #3b3a37 44%, #232320 100%); } .pattern-band__grid { position: absolute; inset: 0; z-index: 0; opacity: 1; } .pattern-band > .wrap { position: relative; z-index: 1; } .watermark { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .watermark svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--charcoal); opacity: .05; } /* ============================================================ Scroll-traced neighbourhood map (signature motion) ============================================================ */ .trace-section { position: relative; min-height: 240vh; background: var(--eggshell); } .trace-sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; } .trace-head-wrap { width: 100%; } .trace-intro { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .trace-map { width: 100%; height: auto; overflow: visible; } .trace-map .route { fill: none; stroke: var(--charcoal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .trace-map .route-ghost { fill: none; stroke: var(--charcoal); stroke-width: 1; opacity: .12; stroke-dasharray: 2 7; } .trace-head { fill: var(--sand); stroke: var(--charcoal); stroke-width: 1.5; } .trace-node { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center bottom; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .trace-node.is-on { opacity: 1; transform: scale(1); } .trace-node .glyph { fill: none; stroke: var(--charcoal); stroke-width: 2.2; } .trace-node .glyph--fill { fill: var(--sage); stroke: none; } .trace-node .pin { fill: var(--charcoal); } .trace-node .label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--charcoal); } .trace-node .sub { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: .06em; fill: var(--ink-soft); text-transform: uppercase; } .trace-progress { font-family: var(--font-display); font-size: var(--step-2); color: var(--sage); } @media (max-width: 700px) { .trace-section { min-height: 180vh; } .trace-node .label { font-size: 1rem; } .trace-node .sub { font-size: 0.8125rem; } } /* ============================================================ Gallery ============================================================ */ .gallery { columns: 3 300px; column-gap: clamp(.8rem, 2vw, 1.4rem); } .gallery figure { break-inside: avoid; margin-bottom: clamp(.8rem, 2vw, 1.4rem); overflow: hidden; border-radius: var(--radius); } .gallery img { width: 100%; transition: transform 1s var(--ease), filter .5s var(--ease); filter: saturate(.95); } .gallery figure:hover img { transform: scale(1.03); filter: saturate(1.05); } /* ============================================================ Contact form ============================================================ */ .form { display: grid; gap: 1.4rem; } .field { display: grid; gap: .5rem; } .field label { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); } .field input, .field textarea { font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; transition: border-color .3s var(--ease); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--sage); } .field textarea { min-height: 8.75rem; resize: vertical; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--black); color: var(--eggshell); } .site-footer a { color: var(--eggshell); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem,5vw,4rem); padding-block: clamp(3.5rem,7vw,6rem) clamp(2.5rem,5vw,4rem); } .footer-lead { max-width: 30ch; color: #b9b6b1; font-size: var(--size-copy); line-height: 1.55; margin: 0; } .footer-col li { color: #b9b6b1; } /* the logo, page-wide, the monogram drawing itself on a loop while in view */ .footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); } .footer-brand { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2rem); } .footer-cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: clamp(1.5rem, 3vw, 3rem); } @media (max-width: 900px) { .footer-main { grid-template-columns: 1fr; } } @media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } } .footer-logo { display: block; color: var(--eggshell); line-height: 0; } .footer-logo__svg { display: block; width: min(100%, 21.25rem); height: auto; } .footer-logo__svg > path { fill: currentColor; } .footer-logo .logo__mark path { fill: none; stroke: currentColor; stroke-width: 3.066; will-change: stroke-dashoffset; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .footer-logo .logo__mark path:first-child { stroke-linecap: square; } .footer-logo .logo__mark { transition: opacity .6s var(--ease); } .footer-logo .logo__mark.is-fade { opacity: 0; } /* the draw itself is the loader's (same order, timing and easing): see footerLogo() */ @media (prefers-reduced-motion: reduce) { .footer-logo .logo__mark path { stroke-dashoffset: 0; animation: none !important; } } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col--lead { grid-column: 1 / -1; } } .footer-col h4 { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: #8f8c88; margin-bottom: 1.2rem; font-weight: 600; } .footer-col li { margin-bottom: .7rem; } .footer-col a:hover { color: var(--sand); } .footer-bottom { border-top: 1px solid rgba(245,239,235,.12); padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--step--1); color: #8f8c88; } /* ============================================================ Tessellated image reveal (MURALTO "Acacia" effect) ============================================================ */ .tessel { position: relative; overflow: hidden; border-radius: var(--radius); } .tessel img { display: block; width: 100%; height: 100%; object-fit: cover; } .tessel__grid { position: absolute; inset: 0; display: grid; pointer-events: none; z-index: 2; } .tessel__tile { position: relative; } .tessel__tile::before, .tessel__tile::after { content: ""; position: absolute; inset: 0; background: var(--eggshell); transform: scale(1.02); transition: opacity .7s var(--ease-out) var(--d, 0s), transform .7s var(--ease-out) var(--d, 0s); } .tessel__tile::before { clip-path: polygon(0 0, 100% 0, 0 100%); } .tessel__tile::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--eggshell-2); } .tessel.is-visible .tessel__tile::before, .tessel.is-visible .tessel__tile::after { opacity: 0; transform: scale(.4); } /* ============================================================ Scrubbed word reveal ============================================================ */ .words .w { color: color-mix(in srgb, currentColor 18%, transparent); transition: color .05s linear; } .words .w.lit { color: currentColor; } /* ============================================================ Custom cursor + magnetic ============================================================ */ .magnetic { will-change: transform; } /* ============================================================ Scroll reveal ============================================================ */ /* ---- Scroll reveal: base + named variants ---- Pick a motion with data-reveal="". Bare data-reveal = fade-up. Options: up (default) · rise · down · left · right · fade · scale · zoom · blur · rotate · mask. Stagger children with data-stagger. */ [data-reveal] { opacity: 0; transform: translateY(52px); transition: opacity .95s var(--ease-out), transform 1s var(--ease-out), filter .95s var(--ease-out), clip-path 1.05s var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } [data-reveal="rise"] { transform: translateY(96px); } [data-reveal="down"] { transform: translateY(-48px); } [data-reveal="left"] { transform: translateX(-80px); } [data-reveal="right"] { transform: translateX(80px); } [data-reveal="fade"] { transform: none; } [data-reveal="scale"] { transform: scale(.82); } [data-reveal="zoom"] { transform: scale(1.12); } [data-reveal="blur"] { filter: blur(22px); transform: scale(1.04); } [data-reveal="rotate"] { transform: translateY(48px) rotate(-3.5deg); transform-origin: left bottom; } [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); } [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } [data-reveal-delay="4"] { transition-delay: .32s; } /* ---- Stagger: direct children reveal in sequence ---- */ [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } [data-stagger].is-visible > * { opacity: 1; transform: none; } [data-stagger].is-visible > *:nth-child(1) { transition-delay: .05s; } [data-stagger].is-visible > *:nth-child(2) { transition-delay: .13s; } [data-stagger].is-visible > *:nth-child(3) { transition-delay: .21s; } [data-stagger].is-visible > *:nth-child(4) { transition-delay: .29s; } [data-stagger].is-visible > *:nth-child(5) { transition-delay: .37s; } [data-stagger].is-visible > *:nth-child(6) { transition-delay: .45s; } [data-stagger].is-visible > *:nth-child(7) { transition-delay: .53s; } [data-stagger].is-visible > *:nth-child(8) { transition-delay: .61s; } [data-parallax] { will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > *, .street__track > .hood__item { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } [data-parallax] { transform: none !important; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .feature, .feature--rev { grid-template-columns: 1fr; } .feature--rev .feature__media { order: 0; } .nav { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .gallery { columns: 1; } .hero__meta { flex-direction: column; align-items: flex-start; gap: 1.5rem; } } /* ---------- Menu (hamburger) ---------- Full-screen near-black panel that wipes down: numbered links with a photo preview, contact details, a real Close button (Esc works too). Built by mobileMenu(). */ .nav-toggle { flex-direction: column; gap: 5px; width: 30px; z-index: 110; position: relative; } .nav-toggle::after { content: ""; position: absolute; inset: -13px -9px; } /* a 48x44 tap area, same look */ .nav-toggle span { width: 26px; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .3s var(--ease); } .mobile-menu { position: fixed; inset: 0; z-index: 130; background: #0d0d0d; color: var(--eggshell); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(2rem, 6vw, 6rem); padding: 0 var(--gutter) clamp(1.4rem, 4vh, 2.6rem); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .75s; } .mobile-menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s; } .mobile-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; display: none; -webkit-mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 70%); mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 70%); } .mm__tess { position: absolute; inset: 0; pointer-events: none; opacity: .085; -webkit-mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 70%); mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 70%); } .mm__bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; height: var(--hdr, 76px); position: relative; } .mm__logo { color: var(--eggshell); } .mm__close { display: inline-flex; align-items: center; gap: .8rem; color: var(--eggshell); font-size: 0.6875rem; letter-spacing: .24em; text-transform: uppercase; } .mm__close i { position: relative; width: 26px; height: 26px; transition: transform .45s var(--ease); } .mm__close i::before, .mm__close i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--brand-line); background: currentColor; transform: rotate(45deg); } .mm__close i::after { transform: rotate(-45deg); } .mm__close:hover i, .mm__close:focus-visible i { transform: rotate(90deg); } .mm__nav { align-self: center; position: relative; } .mm__link { display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.6rem); padding: .28em 0; border-bottom: 1px solid rgba(245, 239, 235, .12); opacity: 0; transform: translateY(40%); transition: opacity .5s var(--ease), transform .7s var(--ease-out); } .mobile-menu.is-open .mm__link { opacity: 1; transform: none; transition-delay: calc(.32s + var(--i) * .07s); } .mm__n { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; color: #9b978f; } .mm__t { font-family: var(--font-sans); font-weight: 300; font-size: clamp(2.3rem, 6.4vw, 4.8rem); line-height: 1.05; letter-spacing: -.035em; transition: transform .5s var(--ease), opacity .35s var(--ease); } .mm__nav:hover .mm__t { opacity: .32; } .mm__nav .mm__link:hover .mm__t, .mm__link:focus-visible .mm__t { opacity: 1; transform: translateX(.18em); } .mm__preview { grid-column: 2; grid-row: 2; align-self: center; margin: 0; aspect-ratio: 4 / 5; max-height: 62vh; overflow: hidden; position: relative; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease) .45s, transform 1.2s var(--ease-out) .45s; } .mobile-menu.is-open .mm__preview { opacity: 1; transform: none; } .mm__preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); } .mm__preview img.is-swap { opacity: 0; } .mm__aside { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2.4rem; font-size: var(--step--1); color: #cfccc6; position: relative; opacity: 0; transition: opacity .6s var(--ease); } .mobile-menu.is-open .mm__aside { opacity: 1; transition-delay: .6s; } .mm__aside a:not(.btn) { display: block; color: var(--eggshell); } .mm__k { font-size: 0.625rem; letter-spacing: .24em; text-transform: uppercase; color: #8d8981; margin-bottom: .4rem; } .btn--ghost-light { color: var(--eggshell); border: 1px solid rgba(245, 239, 235, .45); background: transparent; } @media (max-width: 760px) { .mobile-menu { grid-template-columns: 1fr; } .mm__preview { display: none; } } body.menu-open { overflow: hidden; } /* ============================================================ Inline inquiry form (CTA / theme-sage) ============================================================ */ .cform { max-width: 38.75rem; margin: clamp(1.6rem, 3.5vw, 2.5rem) auto 0; text-align: left; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.7rem); } .cform .field { display: block; margin-bottom: clamp(1rem, 2.2vw, 1.45rem); } .cform .field > span { display: block; font-size: 0.6562rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #f0f1ec; margin-bottom: .5rem; } .cform .field > span em { font-style: normal; font-weight: 400; opacity: .6; letter-spacing: .1em; } .cform input, .cform select, .cform textarea { width: 100%; font: inherit; font-size: var(--step-0); color: var(--eggshell); background: transparent; border: 0; border-bottom: 1px solid rgba(245,239,235,.4); border-radius: 0; padding: .55rem 0; transition: border-color .3s var(--ease); } .cform textarea { resize: vertical; min-height: 3.4em; line-height: 1.5; } .cform input::placeholder, .cform textarea::placeholder { color: rgba(245,239,235,.5); } .cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--sand); } .cform select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.6rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .05rem center; } .cform select option { color: var(--charcoal); } .cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(.6rem, 1.6vw, 1.1rem); } .cform__note { font-size: var(--step--1); letter-spacing: .04em; color: var(--eggshell); } @media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; gap: 0; } } /* ============================================================ Work-in-progress placeholder pages ============================================================ */ .wip-tag { display: inline-block; font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); } .wip-bar { width: min(20rem, 70%); height: 2px; margin: clamp(1.4rem, 3vw, 2rem) auto clamp(1.6rem, 3vw, 2.2rem); background: var(--line); border-radius: 0; position: relative; overflow: hidden; } .wip-bar span { position: absolute; inset: 0; width: 40%; background: var(--sand); border-radius: 0; animation: wipSlide 2.4s var(--ease) infinite; } @keyframes wipSlide { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(320%); } } .wip-meta { font-size: var(--step--1); letter-spacing: .04em; color: var(--ink-soft); } .wip-meta a { color: var(--ink); border-bottom: 1px solid var(--line); } .wip-meta a:hover { color: var(--sand-deep); border-color: var(--sand-deep); } @media (prefers-reduced-motion: reduce) { .wip-bar span { animation: none; transform: none; width: 100%; } } /* ============================================================ Glass + glow (frosted panels + soft sand/sage light) ============================================================ */ /* Frosted-glass inquiry form over the sage CTA */ .cform { padding: clamp(1.4rem, 3.2vw, 2.4rem); background: rgba(245, 239, 235, .12); border: 1px solid rgba(245, 239, 235, .32); border-radius: 0; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 30px 70px -46px rgba(13, 13, 13, .5), inset 0 1px 0 rgba(245, 239, 235, .3); } /* Neighbourhood hover card: solid dark (glass reads muddy over the light section) */ .hood__card { background: #201f1d; } .hood__card::after { background: #201f1d; } /* Warm glow behind the glass form on the sage section */ .theme-sage.curve-top > .wrap { position: relative; z-index: 1; } .theme-sage.curve-top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42% 48% at 50% 92%, rgba(245, 239, 235, .10), transparent 68%); } /* Contain the bigger glow motion so it can't bleed into neighbours */ .intent, .theme-sage.curve-top { overflow: hidden; } /* CTA: keep it fully within one screen on widescreen */ #inquire { padding-block: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; } /* On the dark CTA the solid (charcoal) button would disappear: make it sand */ #inquire .cform__foot .btn--solid { background: var(--sand); color: var(--charcoal); border-color: var(--sand); } /* Two-column CTA: copy (+ building) on the left, form on the right. Copy styled to match the "Archetype ethos" statement (eyebrow + italic accent). */ .inquire-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; text-align: left; } .inquire-form { align-self: center; } .inquire-title { font-family: var(--font-sans); font-weight: 300; text-transform: none; color: var(--eggshell); line-height: 1.04; letter-spacing: -.03em; } .inquire-copy .lede { text-align: left; margin: clamp(1rem, 2vw, 1.5rem) 0 0; max-width: 44ch; color: #b9b6b1; } /* The Archetype billboard (cut-out render) sits under the copy, grounded at the bottom of the column so it lines up with the foot of the form; a soft light behind it keeps the black structure readable on the near-black panel. */ .inquire-copy { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .inquire-copy .lede { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); } /* Billboard fills the space under the copy and runs off the panel's bottom edge (lower pole + base cut). JS (billboardFit) sizes it so its visible part fills that space exactly; when that's wider than the column it bleeds out to the left, keeping the logo and copy on the sign in view. No glow: just a hairline edge so the black frame doesn't vanish into the black panel. */ .inquire-building { position: relative; margin: 0; } .inquire-building img { position: relative; display: block; width: 100%; max-width: none; height: auto; clip-path: inset(-2px -2px 24% -2px); margin-bottom: -20.9%; filter: drop-shadow(0 0 1px rgba(245,239,235,.28)); } /* 3D model (js/billboard3d.js): the canvas is laid over the still at the same scale, with headroom so the turning sign never clips; its bottom edge is the same cut. The still keeps the layout box and is the fallback without WebGL. */ .inquire-building .bb3d { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); } /* the pole sinks into shadow instead of stopping on a hard cut */ /* bottom fade as one static overlay (masking the live WebGL canvas re-composited every frame) */ /* The fade runs across the whole section in the panel's own colour (--panel), so there's no box or seam around the billboard: one soft floor from edge to edge. */ #inquire { --panel: var(--black, #0d0d0d); } .frosted #inquire { --panel: #151515; } .inquire-building::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--panel) 55%, transparent) 45%, var(--panel) 100%); } #inquire .inquire-form { position: relative; z-index: 3; } .inquire-building.is-3d { cursor: grab; touch-action: pan-y; } .inquire-building.is-3d.is-grab { cursor: grabbing; } .inquire-building.is-3d-done img { visibility: hidden; } .inquire-building.is-3d .bb3d { opacity: 1; } #inquire .cform { padding: clamp(1.05rem, 2.2vw, 1.6rem); margin: 0; max-width: none; background: rgba(245, 239, 235, .05); border-color: rgba(245, 239, 235, .16); -webkit-backdrop-filter: none; backdrop-filter: none; } #inquire .cform .field { margin-bottom: clamp(.7rem, 1.6vw, 1rem); } #inquire .cform textarea { min-height: 2.6em; } /* Desktop: the form runs the full height of the copy column, top level with the heading and bottom level with the foot of the column (billboardFit sets the top offset), so the two sides read as one block at every screen size. The message box takes up the extra height. */ @media (min-width: 821px) { #inquire .inquire-form { align-self: stretch; display: flex; flex-direction: column; } #inquire .cform { flex: 1 1 auto; display: flex; flex-direction: column; } #inquire .cform .field--grow { flex: 1 1 auto; display: flex; flex-direction: column; } #inquire .cform .field--grow textarea { flex: 1 1 auto; resize: none; } } @media (max-width: 820px) { .inquire-grid, #inquire .inquire-grid { grid-template-columns: 1fr; } .inquire-copy { text-align: center; } .inquire-copy .intent__eyebrow { margin-inline: auto; } .inquire-copy .lede { text-align: center; margin-inline: auto; } } /* Drift + scale + brightness pulse so the light visibly moves */ @keyframes glowDrift { 0% { transform: translate3d(-3%, 2.5%, 0) scale(1); opacity: .6; } 50% { transform: translate3d(3.5%, -3%, 0) scale(1.25); opacity: 1; } 100% { transform: translate3d(-3%, 2.5%, 0) scale(1); opacity: .6; } } .theme-sage.curve-top::before { transform-origin: 50% 100%; animation: glowDrift 13s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .theme-sage.curve-top::before { animation: none; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cform { background: rgba(139, 146, 130, .5); } } /* ============================================================ Interactive UAE map (Leaflet, bounded stylised image) ============================================================ */ .mapx { position: relative; width: 100%; height: clamp(22.5rem, 52vh, 35rem); background: #eef0ea; border-block: 1px solid var(--line); z-index: 0; font-family: var(--font-sans); } #map { padding-bottom: 0; } /* Frosted-glass map: a slight milky diffusion on the map itself, a soft glass sheen + highlight edge laid over it (above the tiles, below markers and controls), and frosted chips for the controls. */ .mapx .maplibregl-canvas { outline: none; } .mapx::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 36%, rgba(255,255,255,0) 58%, rgba(255,255,255,.12) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.2); } .mapx .maplibregl-marker { z-index: 3; } .mapx .maplibregl-ctrl-group { background: transparent; box-shadow: none; border: none; } .mapx .maplibregl-ctrl-group button { width: 38px; height: 38px; border-radius: 0; background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } .mapx .maplibregl-ctrl-group button + button { border-top: none; } .mapx .maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, .72); } .mapx .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, .45); font-size: .62rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mapx .maplibregl-ctrl-attrib a { color: #6b6760; } #map .maplibregl-ctrl-bottom-right { top: .5rem; bottom: auto; } /* credit sits clear of the blend */ #map .mapx::after { background: linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 36%, rgba(255,255,255,0) 58%); } .mapx .leaflet-bar { border: none; box-shadow: 0 8px 24px -12px rgba(13, 13, 13, .5); } .mapx .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; font-size: 1.25rem; background: var(--charcoal); color: var(--eggshell); border: 1px solid rgba(245, 239, 235, .14); border-radius: 0; } .mapx .leaflet-control-zoom a:first-child { border-bottom: none; } .mapx .leaflet-control-zoom a:hover { background: var(--sand); color: var(--charcoal); } .mapx .leaflet-control-zoom a.leaflet-disabled { background: #55534e; color: #8f8c88; } /* ============================================================ Monogram watermark: a large, faint outline of the Archetype mark, cropped off the panel edge. Sits behind the section content. ============================================================ */ .wm-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .mono-wm { position: absolute; width: min(64vw, 47.5rem); height: auto; right: -10%; top: 50%; transform: translateY(-50%); opacity: .07; color: currentColor; } .mono-wm path { fill: none; stroke: currentColor; stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; } .mono-wm--left { right: auto; left: -12%; } section:has(> .wm-clip) > .wrap { position: relative; z-index: 1; } @media (max-width: 700px) { .mono-wm { width: 120vw; right: -40%; opacity: .1; } } /* ============================================================ Film grain: a very fine static noise over the whole site, so plain black and white surfaces feel tactile rather than flat. ============================================================ */ body::after { content: ""; position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } @media print { body::after { display: none; } } /* ============================================================ Where we build: one full screen. The map runs edge to edge down the left; the right shows the location the tour is on (photo, name, area, a line about it, link), with a slim 01–07 index underneath to jump between them. ============================================================ */ .frosted main > section#map { height: calc(100svh - var(--hdr, 76px)); min-height: 32.5rem; padding: 0; } #map .map-grid { display: grid; grid-template-columns: 1.3fr 1fr; height: 100%; } #map .mapx { height: 100%; border: 0; } /* no hard split: the map dissolves into the cream panel beside it */ #map .map-grid { position: relative; } #map .map-grid::after { content: ""; position: absolute; z-index: 4; pointer-events: none; top: 0; bottom: 0; left: calc(56.52% - clamp(12.5rem, 26vw, 26.25rem)); width: clamp(12.5rem, 26vw, 26.25rem); background: linear-gradient(90deg, rgba(251,248,245,0) 0%, rgba(251,248,245,.06) 18%, rgba(251,248,245,.2) 36%, rgba(251,248,245,.42) 54%, rgba(251,248,245,.68) 72%, rgba(251,248,245,.9) 88%, #fbf8f5 100%); } #map .mapx::after { box-shadow: none; } /* no light edge line where the map meets the panel */ #map .map-side { background: #fbf8f5; } .map-side { display: flex; flex-direction: column; min-height: 0; gap: clamp(.9rem, 2vh, 1.4rem); padding: clamp(1.5rem, 3.2vw, 2.75rem) var(--gutter) clamp(1.25rem, 2.8vw, 2.25rem) clamp(1.5rem, 3.5vw, 3rem); } .map-side .lede { margin: .6rem 0 0; max-width: 42ch; } .ploc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .9rem; } .ploc__img { flex: 1 1 auto; min-height: 6.875rem; margin: 0; overflow: hidden; background: var(--eggshell-2); } .ploc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .5s var(--ease); } .ploc__body { transition: opacity .45s var(--ease); } .ploc.is-swap .ploc__img img, .ploc.is-swap .ploc__body { opacity: 0; } .ploc__n { display: none; } .ploc__meta { display: flex; gap: .9rem; align-items: baseline; justify-content: flex-end; text-align: right; margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .ploc__name { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; line-height: 1.1; margin: .35rem 0 .45rem; color: var(--ink); } .ploc__desc { font-size: var(--size-copy); line-height: 1.55; color: var(--ink-soft); margin: 0 0 .6rem; max-width: 46ch; } .ploc-nav { display: flex; gap: .4rem; } .ploc-nav button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; position: relative; padding: .6rem 0 .2rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--ink-soft); border-top: 1px solid var(--line); transition: color .3s var(--ease); } .ploc-nav button::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--charcoal); } .ploc-nav button:hover, .ploc-nav button.is-active { color: var(--ink); } .ploc-nav button.is-active::after { animation: plbar 6.5s linear forwards; } .ploc-nav button:focus-visible { outline: 1px solid var(--charcoal); outline-offset: 3px; } @keyframes plbar { from { width: 0; } to { width: 100%; } } /* Map pins: just a dot by default; hovering a dot pops its label up on a leader line (like the reference). The selected pin: pressed, or the one the tour is on: turns yellow. Only the children are styled/animated: MapLibre positions the marker root. The root ignores the pointer so only the dot (and a shown label) reacts to hover. */ .mpin--call, .mland { display: flex; flex-direction: column; align-items: center; pointer-events: none; } .mpin__dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: #2d2f28; border: 3px solid #fbf8f5; box-shadow: 0 0 0 1.5px rgba(45,47,40,.6), 0 4px 12px rgba(13,13,13,.38); pointer-events: auto; cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); } /* soft pulse ring around the selected pin */ .mpin--call.is-active .mpin__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--brand-sand); animation: mpulse 2.2s var(--ease-out) infinite; pointer-events: none; } @keyframes mpulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } } .mpin__dot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* bigger hover/tap target */ .mpin__label { display: block; white-space: nowrap; background: #34382f; color: var(--eggshell); font-family: var(--font-sans); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem .8rem; border: 1.5px solid rgba(245,239,235,.85); box-shadow: 0 6px 16px -8px rgba(13,13,13,.45); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 50% 100%; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease-out), background .3s var(--ease), color .3s var(--ease); } .mpin--down .mpin__label { transform-origin: 50% 0; transform: translateY(-8px) scale(.9); } .mpin__stem { display: block; width: 1.5px; height: 34px; background: #34382f; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .3s var(--ease-out); } .mpin--down .mpin__stem { transform-origin: 50% 0; } /* hover: pop the label up (and keep it while the pointer moves onto it) */ .mpin--call:hover .mpin__label, .mland:hover .mpin__label { opacity: 1; transform: none; pointer-events: auto; } .mpin--call:hover .mpin__stem, .mland:hover .mpin__stem { transform: scaleY(1); } .mpin--call:hover .mpin__dot { transform: scale(1.15); } /* selected (pressed / current tour stop): yellow */ .mpin--call.is-active .mpin__dot { background: var(--brand-sand); border-color: #2d2f28; transform: scale(1.25); } .mpin--call.is-active .mpin__label { background: var(--brand-sand); color: #2d2f28; border-color: #2d2f28; } .mapx .mpin--call.is-active, .mapx .mpin--call:hover, .mapx .mland:hover { z-index: 6; } /* landmarks: smaller, quieter dots; label on hover */ .mland .mpin__dot { width: 10px; height: 10px; background: #fbf8f5; border: 2px solid #34382f; box-shadow: 0 1px 4px rgba(13,13,13,.25); cursor: default; } .mland .mpin__label { background: rgba(251,248,245,.94); color: #34382f; border: 1px solid #34382f; box-shadow: none; font-weight: 600; font-size: .62rem; letter-spacing: .1em; padding: .34rem .6rem; } .mland .mpin__stem { width: 1px; height: 20px; } /* our office: the monogram as a small dark tile above The Offices pin; label + directions */ .mhq { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; } .mapx .mhq { z-index: 7; } .mhq__mark { display: block; width: 30px; height: 30px; padding: 4px; background: #16171a; box-shadow: 0 4px 14px rgba(13,13,13,.3); transition: transform .35s var(--ease-out), background .35s var(--ease); } .mhq__mark svg { display: block; width: 100%; height: 100%; } .mhq__mark path { fill: none; stroke: #f5efeb; stroke-width: 7; stroke-linejoin: miter; } .mhq__label { background: #16171a; color: #f5efeb; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .38rem .6rem; white-space: nowrap; text-align: center; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .35s var(--ease-out); pointer-events: none; } .mhq__label small { display: block; font-size: .56rem; font-weight: 400; letter-spacing: .1em; color: #b9b6b1; } .mhq:hover .mhq__label, .mhq:focus-visible .mhq__label { opacity: 1; transform: none; } .mhq:hover .mhq__mark { transform: scale(1.1); background: var(--brand-sage); } @media (prefers-reduced-motion: reduce) { .mpin__label, .mpin__stem, .mpin__dot { transition: none; } .mpin--call.is-active .mpin__dot::after { animation: none; } } @media (max-width: 900px) { .frosted main > section#map { height: auto; } #map .map-grid { grid-template-columns: 1fr; } #map .mapx { height: 55svh; border-bottom: 0; } #map .map-grid::after { left: 0; right: 0; width: auto; top: calc(55svh - 26svh); bottom: auto; height: 26svh; background: linear-gradient(180deg, rgba(251,248,245,0) 0%, rgba(251,248,245,.08) 20%, rgba(251,248,245,.26) 40%, rgba(251,248,245,.5) 60%, rgba(251,248,245,.76) 78%, rgba(251,248,245,.93) 90%, #fbf8f5 100%); } #map .map-side { margin-top: -1px; } .ploc__img { flex: none; aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .ploc-nav button.is-active::after { animation: none; width: 100%; } } /* No scroll snapping anywhere: the page scrolls freely (snap felt disturbing). Panels still stack; scroll-margin keeps in-page links clear of the header. */ .frosted main > section { scroll-margin-top: var(--hdr, 76px); } .frosted main > section.hero, .frosted main > section.intent { scroll-margin-top: 0; } /* Subpage header watermark patterns: constant brand line weight at any size */ .watermark path { vector-effect: non-scaling-stroke; stroke-width: var(--brand-line); } /* Scroll cue: a small down-pointing triangle, bottom centre of the first section */ .scroll-cue { position: absolute; left: 50%; bottom: clamp(1.4rem, 4.5vh, 2.6rem); z-index: 6; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; color: var(--eggshell); cursor: pointer; transition: opacity .5s var(--ease), visibility .5s; } .scroll-cue svg { width: 18px; height: auto; overflow: visible; animation: cueDrift 2.2s cubic-bezier(.45,0,.25,1) infinite; } .scroll-cue path { fill: none; stroke: currentColor; stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; stroke-linejoin: miter; } .scroll-cue.is-gone { opacity: 0; visibility: hidden; } @keyframes cueDrift { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } } /* form: disabled until valid, gentle error line, then a thank-you panel in place of the form */ .cform button[type="submit"]:disabled { opacity: .38; cursor: not-allowed; } .cform button[type="submit"]:disabled::before { opacity: 0 !important; } .cform .field.is-bad input, .cform .field.is-bad textarea { border-bottom-color: #d98a7a; } .cform .field.is-bad > span::after { content: ": required"; font-weight: 400; letter-spacing: .08em; color: #d98a7a; text-transform: none; } .cform.is-sent { display: flex; align-items: center; justify-content: center; } .cform__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding: 2rem 1rem; outline: none; animation: doneIn .8s var(--ease-out) both; } .cform__done svg { width: 54px; height: 54px; overflow: visible; margin-bottom: .6rem; } .cform__done svg path { fill: none; stroke: currentColor; stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; animation: doneDraw 1.4s cubic-bezier(.7,0,.3,1) .15s forwards; } .cform__done-k { font-size: 0.6875rem; letter-spacing: .26em; text-transform: uppercase; color: #a9a59e; margin: 0; } .cform__done-h { font-family: var(--font-sans); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; margin: 0; color: var(--eggshell); } .cform__done-p { margin: 0; color: #cfccc6; max-width: 30ch; } @keyframes doneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes doneDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .cform__done, .cform__done svg path { animation: none; stroke-dashoffset: 0; } } /* the billboard eases in: rises, sharpens and fades up as it comes into view */ .inquire-building { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 1.4s cubic-bezier(.33,0,.2,1) .15s, transform 1.8s cubic-bezier(.2,.7,.2,1) .15s; will-change: opacity, transform; } .inquire-building.is-in { opacity: 1; transform: none; } .inquire-building.is-settled { will-change: auto; } @media (prefers-reduced-motion: reduce) { .inquire-building { opacity: 1; transform: none; transition: none; } } /* Brand Sand (#e7c28c) accents: used sparingly, only on dark grounds where it reads: small kickers, the italic accent word in dark headings, the current-page underline, the scroll cue, footer headings and the inquiry confirmation. */ .ct-kicker, .gl-kicker, .px-kicker, .cform__done-k, .footer-col h4 { color: var(--brand-sand); } #inquire .inquire-title .it, .ct-intro .inquire-title .it, .gl-title .it, .px-title .it, .cs-inq__h em, .intent__line .it { color: var(--brand-sand); } .nav a[aria-current="page"]::after { background: var(--brand-sand); } .scroll-cue { color: var(--brand-sand); } .cform__done svg { color: var(--brand-sand); } /* coming soon: hollow pin, and a placeholder card (the pattern instead of a photo, no link) */ .mpin--soon .mpin__dot { background: transparent !important; border-style: dashed; } .mpin--soon.is-active .mpin__dot { background: var(--brand-sand) !important; border-style: solid; } .ploc.is-soon .ploc__img { background: #16171a url("../assets/brand/tess-tile.svg") center / 140px 140px repeat; position: relative; } .ploc.is-soon .ploc__img::after { content: "Coming soon"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand-sand); font-size: 0.6875rem; letter-spacing: .3em; text-transform: uppercase; background: radial-gradient(closest-side, rgba(22,23,26,.9), rgba(22,23,26,.2)); } .ploc.is-soon .ploc__img img { visibility: hidden; } .ploc.is-soon .ploc__link { visibility: hidden; } /* ============================================================ Skyline: every building, true to scale, on one ground line (projects hero + home showcase). .is-in plays the entrance. ============================================================ */ .px-sky { position: relative; margin-top: auto; padding: clamp(.5rem, 5vh, 4rem) var(--safe) 0; } .px-sky__row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(.6rem, 1.6vw, 1.6rem); border-bottom: 1px solid rgba(245,239,235,.3); } .px-bld { position: relative; display: block; flex: 0 1 auto; color: var(--eggshell); transition: color .45s cubic-bezier(.45,0,.25,1); } .px-bld svg { display: block; height: auto; width: 100%; overflow: visible; } .px-bld .ln { fill: none; stroke: currentColor; stroke-width: var(--brand-line); vector-effect: non-scaling-stroke; transition: stroke .45s cubic-bezier(.45,0,.25,1), fill .5s cubic-bezier(.45,0,.25,1); } .px-bld .knock { fill: #0d0d0d; } .px-bld svg { opacity: 0; transform: translateY(18px); clip-path: inset(100% 0 0 0); transition: opacity .6s var(--ease), transform 1.1s var(--ease-out), clip-path 1.4s cubic-bezier(.7,0,.2,1); } .px-sky.is-in .px-bld svg { opacity: 1; transform: none; clip-path: inset(-10% -5% 0 -5%); } .px-sky.is-in .px-bld:nth-child(2) svg { transition-delay: .08s; } .px-sky.is-in .px-bld:nth-child(3) svg { transition-delay: .16s; } .px-sky.is-in .px-bld:nth-child(4) svg { transition-delay: .24s; } .px-sky.is-in .px-bld:nth-child(5) svg { transition-delay: .32s; } .px-sky.is-in .px-bld:nth-child(6) svg { transition-delay: .40s; } .px-sky.is-in .px-bld:nth-child(7) svg { transition-delay: .48s; } .px-sky.has-on .px-bld { color: rgba(245,239,235,.28); } .px-sky.has-on .px-bld.on { color: var(--eggshell); } .px-bld.on .wall { fill: rgba(245,239,235,.05); } .px-bld.on .glass { fill: rgba(245,239,235,.12); } .px-bld.on .accent, .px-bld.on .roof { fill: rgba(245,239,235,.18); } .px-sky__labels { display: flex; justify-content: space-between; gap: clamp(.6rem, 1.6vw, 1.6rem); padding: clamp(.5rem, 2vh, 1rem) 0 clamp(.6rem, 3vh, 2.6rem); } .px-sky__labels span { flex: 0 1 auto; font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: #8f8b84; text-align: center; transition: color .45s cubic-bezier(.45,0,.25,1); line-height: 1.5; } .px-sky__labels span.on { color: var(--eggshell); } @media (max-width: 760px) { .px-sky__labels { display: none; } } @media (prefers-reduced-motion: reduce) { .px-bld svg { transition: none; opacity: 1; transform: none; clip-path: none; } } /* Home showcase = the Projects skyline, on the light panel: charcoal line elevations. While a building is hovered the panel turns into its photo, and the lines go light. */ #projects .px-sky__row { padding-top: 1rem; border-bottom-color: var(--line); } #projects .px-bld { color: var(--charcoal); } #projects .px-bld .knock { fill: var(--surface); } #projects .px-sky.has-on .px-bld { color: rgba(55,55,55,.28); } #projects .px-sky.has-on .px-bld.on { color: var(--charcoal); } #projects .px-bld.on .wall { fill: rgba(55,55,55,.05); } #projects .px-bld.on .glass { fill: rgba(55,55,55,.12); } #projects .px-bld.on .accent, #projects .px-bld.on .roof { fill: rgba(55,55,55,.18); } #projects .px-sky__labels span { color: var(--ink-soft); } #projects .px-sky__labels span.on { color: var(--charcoal); } #projects.is-preview .px-bld, #projects.is-preview .px-sky.has-on .px-bld.on { color: var(--eggshell); } #projects.is-preview .px-sky.has-on .px-bld { color: rgba(245,239,235,.3); } #projects.is-preview .px-bld .knock { fill: transparent; } #projects.is-preview .px-bld.on .wall { fill: rgba(245,239,235,.06); } #projects.is-preview .px-bld.on .glass { fill: rgba(245,239,235,.14); } #projects.is-preview .px-bld.on .accent, #projects.is-preview .px-bld.on .roof { fill: rgba(245,239,235,.2); } #projects.is-preview .px-sky__row { border-bottom-color: rgba(245,239,235,.35); } #projects.is-preview .px-sky__labels span { color: rgba(245,239,235,.55); } #projects.is-preview .px-sky__labels span.on { color: var(--eggshell); } #projects .px-bld, #projects .px-sky__labels span, #projects .px-sky__row { transition: color .5s var(--ease), border-color .5s var(--ease); } /* Archetype HQ sits inside The Offices: hidden on the wide map, it appears (label and all) once you're zoomed in on the building. Styled on its children: MapLibre owns the marker's own transform and inline opacity. */ .mapx .mhq { pointer-events: none; } .mapx .mhq > * { visibility: hidden; opacity: 0; transition: opacity .5s var(--ease), visibility 0s .5s; } .mapx .mhq.is-shown { pointer-events: auto; } .mapx .mhq.is-shown > * { visibility: visible; opacity: 1; transform: none; transition: opacity .5s var(--ease); } /* inquiry form: failed send */ .cform__note.is-error { color: #e7a58c; } .cform__note.is-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Home showcase: full-screen panel; the heading, intro and skyline sit together as one block, centred with equal space above and below, the buildings close under the title, on the same edges as the heading and "View all projects" (inside .wrap) */ #projects > .wrap { justify-content: center; } #projects .px-sky { margin-top: clamp(1.5rem, 5vh, 3.5rem); padding: 0; } #projects .px-sky__row { padding-top: 0; } #projects .px-sky__labels { padding-bottom: 0; } /* Featured project: the card fits the screen below the nav with the same space above and below it, instead of running down to the bottom edge */ .frosted main > section.frost-light { padding-block: clamp(2rem, 6vh, 4.5rem); } .frost-light .feat__media { aspect-ratio: auto; height: min(calc(100vw / 2.15), calc(100svh - var(--hdr, 76px) - 2 * clamp(2rem, 6vh, 4.5rem))); min-height: min(440px, calc(100svh - var(--hdr, 76px) - 2 * clamp(2rem, 6vh, 4.5rem))); } /* One size for every page's main heading (About, Projects, Gallery, Contact, each project): semibold Commuters Sans, scaled by width and by window height so it always fits */ :root { --size-page-title: clamp(2.2rem, min(7vw, 9.5vh), 7rem); } .page-hero h1, .px-title, .gl-title, .ct-intro .inquire-title, .ct-top .ct-intro .inquire-title, .cs-hero__title, .ph__title { font-family: var(--font-head) !important; font-weight: 600 !important; font-size: var(--size-page-title) !important; line-height: .94 !important; letter-spacing: -.025em !important; text-transform: none !important; } /* ============================================================ Page header (About, Projects, Gallery, Contact): one component. Same spot under the nav, the brand tessellation drawing itself in behind (data-tess), and the same entrance: kicker fades up, the title's words rise one after another (pageHeads splits them), then the intro line. ============================================================ */ .ph { position: relative; background: #0d0d0d; color: var(--eggshell); overflow: hidden; padding-top: calc(var(--hdr, 76px) + clamp(.75rem, 7vh, 5rem)) !important; } .ph > .wrap { position: relative; } .ph__tess { position: absolute; inset: 0; opacity: .05; pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 0%, transparent 72%); mask: linear-gradient(180deg, #000 0%, transparent 72%); } .ph__kicker { font-size: 0.6875rem; letter-spacing: .26em; text-transform: uppercase; color: #a9a59e; margin: 0 0 clamp(.5rem, 2.4vh, 1.2rem) !important; } .ph__title { margin: 0 !important; color: var(--eggshell); max-width: 16ch; text-wrap: balance; } /* semibold runs wider than the old light weight: balanced lines, never one short word alone */ .ph__title .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--brand-sand); } .ph__sub { max-width: 46ch; margin: clamp(.8rem, 2.6vh, 1.4rem) 0 0 !important; color: #b9b6b1; font-size: var(--size-copy); line-height: 1.55; } /* entrance */ .ph__kicker, .ph__sub { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform 1s var(--ease-out); } .ph__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .ph__title .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out) calc(.15s + var(--i, 0) * .09s); } .loaded .ph__kicker, .loaded .ph__sub { opacity: 1; transform: none; } .loaded .ph__sub { transition-delay: .55s; } .loaded .ph__title .w > span { transform: none; } @media (prefers-reduced-motion: reduce) { .ph__kicker, .ph__sub, .ph__title .w > span { transition: none; opacity: 1; transform: none; } } /* ============================================================ Phones ============================================================ */ @media (max-width: 760px) { /* header: logo + menu only (Inquire lives in the menu); SMART LUXURY clear of it */ .header-actions .btn--solid { display: none; } .hero__head { top: calc(var(--hdr, 76px) + clamp(1rem, 4svh, 2rem)); } } @media (max-width: 600px) { /* the one-liner wraps instead of running off the edge */ .intent.is-scrub .intent__one { font-size: 1.02rem; letter-spacing: .26em; line-height: 1.5; } .intent__one .wds { flex-wrap: wrap; justify-content: center; row-gap: .5em; padding-inline: var(--gutter); } } @media (max-width: 760px) { /* skylines: drawn large, swipe sideways through the seven buildings */ .px-sky { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter) !important; } #projects .px-sky { margin-inline: calc(-1 * var(--gutter)); } .px-sky::-webkit-scrollbar { display: none; } .px-sky__row, .px-sky__labels { width: 270vw; max-width: none !important; } .px-sky.is-all .px-sky__row, .px-sky.is-all .px-sky__labels { width: 340vw; } /* all nine buildings in the one strip */ .px-sky__labels { display: flex !important; } .px-bld, .px-sky__labels span { scroll-snap-align: start; } .px-sky::after { content: "Swipe \2192"; position: sticky; left: calc(100% - 5rem); display: block; width: 5rem; margin-top: .6rem; font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: currentColor; opacity: .5; text-align: right; } } /* panels taller than the window (panelFit): normal scrolling, so nothing is hidden */ .frosted main > section.is-unpinned { position: relative !important; top: auto !important; } /* Phones: when the browser toolbar slides away the window grows. The hero (and its photo) is sized to that larger height (lvh), so the image always reaches the bottom edge; the caption and scroll cue stay above the toolbar while it's showing. */ @supports (height: 100lvh) { .hero { min-height: 100lvh; } .hero__bar { bottom: calc(100lvh - 100svh + clamp(1.2rem, 4vh, 2.4rem)); } .hero .scroll-cue { bottom: calc(100lvh - 100svh + clamp(1.4rem, 4.5vh, 2.6rem)); } } /* Accent words (.it) read in the heading's own face, not italic, in the brand yellow */ .it, .cs-inq__h em { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: inherit !important; color: var(--brand-sand) !important; } .ab-statement .it { color: var(--brand-sand) !important; } /* one yellow across the site */ /* Every section fills the screen (sectionFill marks the plain ones to centre their content) */ main > section { min-height: calc(100svh - var(--hdr, 76px)); } main > section:first-child { min-height: 100svh; } main > section.is-fill { display: flex; flex-direction: column; justify-content: center; } main > section.is-fill.ph { justify-content: flex-start; } /* page headers stay where they are on every page */ main > section.is-fill > .wrap { width: 100%; } /* Hero: SMART LUXURY smaller, centred on the screen, with the Inquire button right under it */ .hero__head { top: 50svh !important; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 4svh, 2.4rem); padding-inline: var(--safe); } .hero__svgword { width: min(64vw, 51.25rem); } .hero__cta { pointer-events: auto; color: var(--eggshell); } .hero__cta { transition: background .6s var(--ease), border-color .6s var(--ease), opacity .9s var(--ease-out), transform 1s var(--ease-out); } .hero__cta:hover, .hero__cta:focus-visible { background: rgba(245,239,235,.12); color: var(--eggshell); border-color: var(--eggshell); } /* a soft lift, no white flash */ .loaded .hero__head > .hero__cta { transition-delay: 1.5s; } @media (max-width: 760px) { .hero__svgword { width: 84vw; } } /* Home: the header's Inquire button appears once the hero (and its own button) scrolls away */ .frosted .site-header .header-actions .btn--solid { transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; } .frosted .site-header:not(.show-cta) .header-actions .btn--solid { opacity: 0; visibility: hidden; transform: translateY(-8px); } @media (max-width: 760px) { .frosted .site-header .header-actions .btn--solid { display: inline-flex; padding: .55rem .85rem; font-size: .62rem; letter-spacing: .14em; } .frosted .header-actions { gap: .9rem; } } .loaded .hero.is-away .hero__head > .hero__cta { opacity: 0; pointer-events: none; transition-delay: 0s; } /* ============================================================ Every panel fits one screen (phones and tablets) ============================================================ */ @media (max-width: 900px) { /* Where we build: map on top, a compact card underneath, all in one screen */ .frosted main > section#map, #map { height: calc(100svh - var(--hdr, 76px)); min-height: 0; padding: 0; } #map .map-grid { display: flex; flex-direction: column; height: 100%; } #map .mapx { flex: 1 1 auto; height: auto; min-height: 28svh; } #map .map-grid::after { display: none; } #map .map-side { flex: none; position: relative; z-index: 4; margin-top: 0; gap: .8rem; padding: .2rem var(--gutter) max(.9rem, 2svh); } #map .map-side::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12svh; pointer-events: none; background: linear-gradient(180deg, rgba(251,248,245,0), rgba(251,248,245,.5) 55%, #fbf8f5); } #map .map-side__head .display { font-size: clamp(1.6rem, 7vw, 2.2rem); } #map .map-side .lede { display: none; } #map .ploc { display: grid; grid-template-columns: 38% 1fr; gap: .9rem; align-items: start; flex: none; } #map .ploc__img { aspect-ratio: 4 / 5; min-height: 0; height: auto; } #map .ploc__meta { justify-content: flex-start; text-align: left; font-size: .58rem; letter-spacing: .12em; margin-bottom: .35rem; } #map .ploc__name { font-size: 1.35rem; margin-bottom: .4rem; } #map .ploc__desc { font-size: .86rem; line-height: 1.45; margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* square photo beside the text (not a tall 4:5), so the copy fills the height next to it */ #map .ploc { align-items: center; } #map .ploc__img { aspect-ratio: 1 / 1; } /* Inquiry: heading, a smaller billboard and a two-column form share one screen */ .frosted main > section#inquire { min-height: calc(100svh - var(--hdr, 76px)); padding-block: max(1rem, 2.5svh); } #inquire .inquire-grid { gap: max(.8rem, 2svh); } #inquire .inquire-title { font-size: clamp(1.6rem, 6.4vw, 2.3rem); } #inquire .inquire-copy .lede { display: none; } #inquire .inquire-copy { gap: max(.8rem, 2svh); } #inquire .cform { padding: 1rem; } #inquire .cform .field { margin-bottom: .75rem; } #inquire .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } #inquire .cform textarea { min-height: 2.4em; } } @media (max-width: 760px) { /* Footer: compact, one screen */ .footer-main { gap: 1.6rem; padding-block: 2.2rem 1.4rem !important; } .footer-brand { gap: .9rem; } .footer-logo__svg { width: min(62vw, 15rem) !important; height: auto; } .footer-lead { font-size: .86rem; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; } .footer-col:last-child { grid-column: 1 / -1; } .footer-col h4 { margin-bottom: .7rem; } .footer-col li { margin-bottom: .42rem; font-size: .9rem; } .footer-bottom { padding-block: 1rem; } } /* Hero: the photo sits back a little so SMART LUXURY reads clearly */ .hero__overlay { background: radial-gradient(ellipse 70% 42% at 50% 50svh, rgba(13,13,13,.34), rgba(13,13,13,0) 72%), linear-gradient(180deg, rgba(13,13,13,.6) 0%, rgba(13,13,13,.34) 34%, rgba(13,13,13,.3) 62%, rgba(13,13,13,.66) 100%); } /* page headers that fill the screen: title at the top (same place on every page), intro at the foot */ main > section.is-fill.ph > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; } main > section.is-fill.ph .ph__sub { margin-top: auto !important; padding-bottom: clamp(4.5rem, 12vh, 7rem); } /* Gallery: a compact header, so the images show on the first screen */ main > section.gl-hero { min-height: 0 !important; } main > section.gl-hero.is-fill .ph__sub { margin-top: clamp(.8rem, 2vh, 1.2rem) !important; padding-bottom: 0; } main > section.gl-hero { padding-bottom: clamp(1.6rem, 4vh, 2.6rem) !important; } .gl-hero .scroll-cue { display: none; } /* Every block on every page fills the screen: the About photo band, the next-project panel, the project inquiry on phones */ main > figure.ab-band { height: calc(100svh - var(--hdr, 76px)) !important; } main > figure.ab-band img { height: 116%; } main > a.cs-next { height: calc(100svh - var(--hdr, 76px)) !important; min-height: 0 !important; } main > section.cs-inq { min-height: calc(100svh - var(--hdr, 76px)); } /* ============================================================ PHONES ONLY (nothing below changes the computer layout) ============================================================ */ .px-photo { display: none; } @media (max-width: 760px) { /* --- building skylines: a carousel, one building at a time (skyCarousel) --- */ .px-sky { scroll-snap-type: none !important; padding-inline: 32vw !important; } .px-bld, .px-sky__labels span { scroll-snap-align: none !important; transition: opacity .6s var(--ease), color .6s var(--ease); } .px-sky__row:has(.is-cur) .px-bld:not(.is-cur) { opacity: .28; } .px-sky__labels:has(.is-cur) span:not(.is-cur) { opacity: .35; } .px-sky__labels span.is-cur { opacity: 1; } .px-sky::after { display: none !important; } /* home landing: the photo shows behind, the label under the building names it */ #projects .hood__info { display: none; } #projects.is-preview .px-sky__labels span.is-cur, #projects.is-preview .px-sky__labels span.is-cur * { color: var(--eggshell); } /* Projects page: the project's photo behind the skyline, its details above */ .px-photo { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .px-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); } .px-photo img.on { opacity: .42; } .px-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.75) 0%, rgba(13,13,13,.35) 45%, rgba(13,13,13,.85) 100%); } .px-hero > :not(.px-photo):not(.ph__tess) { position: relative; z-index: 1; } .px-hero.is-photo .ph__tess { opacity: 0; transition: opacity .8s var(--ease); } /* --- inquiry panels: heading, then the form, then the billboard at the foot --- */ #inquire .inquire-copy { display: contents; } #inquire .inquire-grid { display: flex !important; flex-direction: column; align-items: stretch; } #inquire .inquire-copy > * { order: 1; } #inquire .inquire-form { order: 2; width: 100%; } #inquire .inquire-copy > .inquire-building { order: 3; margin-top: max(1.4rem, 3svh); align-self: center; width: 100%; } #inquire .inquire-copy > .lede { display: none; } .frosted main > section#inquire, #inquire { padding-bottom: 0 !important; } /* --- featured project: the photo whole, the details under it --- */ .feat__media, .frost-light .feat__media { aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important; } .feat__media::after { background: linear-gradient(180deg, rgba(13,13,13,.25), rgba(13,13,13,0) 40%) !important; } .feat__panel { position: relative !important; left: auto; bottom: auto; max-width: none !important; background: #151515; padding: 1.3rem 1.2rem 1.5rem !important; } .feat__panel .feat__lede { font-size: .95rem; line-height: 1.5; } .feat__specs { font-size: .78rem; } .feat__panel .btn { display: flex; width: fit-content; margin-inline: auto; } .feat { container-type: inline-size; } .feat__progress { top: calc(75cqw - 3px); bottom: auto; } /* the foot of the 4:3 photo (card width, not screen width) */ } /* the header reads in white while a building's photo fills the landing (laptop hover, phone carousel) */ .site-header, .site-header .logo, .site-header .nav a { transition: color .5s var(--ease), background-color .45s var(--ease); } body:has(#projects.lp.is-preview) .site-header:not(.is-scrolled), body:has(#projects.lp.is-preview) .site-header:not(.is-scrolled) .logo, body:has(#projects.lp.is-preview) .site-header:not(.is-scrolled) .nav a { color: var(--eggshell); } body:has(#projects.lp.is-preview) .site-header:not(.is-scrolled) .nav-toggle span { background: var(--eggshell); } @media (max-width: 760px) { /* page headers (About, Gallery): as tall as their words, no empty screen */ main > section.is-fill.ph { min-height: 0 !important; padding-bottom: 2.8rem !important; } main > section.is-fill.ph .ph__sub { margin-top: 1.1rem !important; padding-bottom: 0; } main > section.is-fill.ph .scroll-cue { display: none; } } @media (max-width: 760px) { /* About photo band: the caption on a soft dark fade, on one line */ .ab-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; background: linear-gradient(0deg, rgba(13,13,13,.6), rgba(13,13,13,0)); } .ab-band figcaption { z-index: 1; letter-spacing: .12em !important; font-size: 0.5938rem !important; white-space: nowrap; } } /* header links centred on the page, whatever the widths of the logo and the buttons either side */ @media (min-width: 901px) { .site-header .nav { position: absolute; left: 50%; transform: translateX(-50%); } } /* ============================================================ Large screens: the whole site scales up in proportion. Below 1600px wide 1rem stays 16px (laptops unchanged). Above it, 1rem grows with the screen (by width, held back by height so ultrawide screens don't over-scale), and because every size is set in rem or viewport units, type, spacing, the content column and the drawings all grow together: 1920x1080 is 1.2x, 2560x1440 is 1.6x. ============================================================ */ @media (min-width: 1601px) { html { font-size: max(100%, min(calc(100vw / 100), calc(100vh * 16 / 900))); } :root { --wrap: 85rem; } } /* Inquiry forms: the spam trap stays out of sight (and out of reach of keyboard and screen readers) */ .cform__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .cform__ts { margin: .4rem 0 1rem; min-height: 65px; } /* Cookie notice (only when analytics is switched on) */ .consent { position: fixed; z-index: 300; left: var(--safe); right: var(--safe); bottom: 1.2rem; margin-inline: auto; max-width: 40rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: rgba(21,21,21,.96); color: var(--eggshell); border: 1px solid rgba(245,239,235,.14); opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .5s var(--ease-out); } .consent.is-in { opacity: 1; transform: none; } .consent p { margin: 0; font-size: .86rem; line-height: 1.5; color: #cfccc6; flex: 1 1 16rem; } .consent__b { display: flex; gap: .6rem; } .consent .btn { padding: .6rem 1rem; } .consent .btn--solid { background: var(--eggshell); color: var(--charcoal); border-color: var(--eggshell); } /* ---------- One screen per swipe (scrollMagnet() places the anchors) ---------- Native mandatory snapping, one stop per gesture, like naqsheditions.com. Tablets get proximity so a long read is never fought. The gallery filter pauses it (data-nosnap). */ html.has-snap { scroll-snap-type: y mandatory; } html.has-snap[data-nosnap] { scroll-snap-type: none; } @media (pointer: coarse) and (min-width: 761px) { html.has-snap { scroll-snap-type: y proximity; } } /* phones: no section snapping at all, the page scrolls freely under the thumb */ @media (max-width: 760px) { html.has-snap { scroll-snap-type: none; } } .snap-anchors { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; opacity: 0; } .snap-anchors i { position: absolute; left: 0; width: 1px; scroll-snap-align: start; scroll-snap-stop: always; } /* ---------- Vertical safe margin ---------- Screen-filling sections always keep breathing room above and below their content, whatever the screen height (short laptops included): content never sits tight under the nav or on the bottom edge. */ main > section.is-fill > .wrap:first-child, main > section.is-fill > .wrap:first-of-type { padding-top: var(--safe-y); } main > section.is-fill > .wrap:last-child, main > section.is-fill > .wrap:last-of-type { padding-bottom: var(--safe-y); } .scroll-cue.is-blocked { opacity: 0 !important; pointer-events: none; } /* Headings: every h1-h4, plus the statement lines that read as headings, set in semibold Commuters Sans. Tracking is eased off the tight -.04/-.05em the light Archivo used, so the heavier letters don't touch; tracked caps labels keep their own spacing. */ html :is(h1, h2, h3, h4, h5, h6, .cs-statement, .ab-statement, .cs-next__name, .nf__h, .cform__done-h) { font-family: var(--font-head) !important; font-weight: 600 !important; } html :is(.ab-h, .ab-statement, .cs-statement, .cs-inq__h, .cs-next__name, .inquire-title, .ploc__name, .nf__h, .cform__done-h, h2.display) { letter-spacing: -.02em; } .hero__svgword text { font-family: var(--font-head); font-weight: 600; } /* Beyond the Address on tablets: a larger square photo and full-size copy beside it, no empty band */ @media (min-width: 601px) and (max-width: 900px) { #map .ploc { grid-template-columns: 42% 1fr; gap: 1.4rem; } #map .ploc__meta { font-size: .66rem; } #map .ploc__name { font-size: clamp(1.6rem, 3.6vw, 2rem); margin-bottom: .6rem; } #map .ploc__desc { font-size: 1rem; line-height: 1.55; -webkit-line-clamp: 6; margin-bottom: .8rem; } } /* Beyond the Address on short laptop screens: the intro line goes and the type tightens, so the photo keeps a real height and nothing runs into the location index */ @media (min-width: 901px) and (max-height: 820px) { #map .map-side .lede { display: none; } #map .map-side__head .display { font-size: clamp(1.8rem, 3.2vw, 2.5rem); } #map .ploc__name { font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); margin: .25rem 0 .35rem; } #map .ploc__desc { font-size: .95rem; line-height: 1.5; margin-bottom: .4rem; } #map .map-side { gap: .8rem; } } /* Chat with us (WhatsApp): a small round charcoal button in the corner; "Chat with us" slides out on hover and the sage signage pattern comes in, like every other button. It steps aside when it would cover something (the map's location index, form buttons, the gallery viewer). */ .chat-fab { position: fixed; z-index: 120; right: clamp(.9rem, 2vw, 1.6rem); bottom: clamp(.9rem, 2.4vh, 1.6rem); display: inline-flex; align-items: center; gap: 0; height: 3rem; min-width: 3rem; padding: 0 .9rem; border-radius: 1.5rem; background: var(--charcoal); color: var(--eggshell); border: 1px solid rgba(245,239,235,.18); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; isolation: isolate; overflow: hidden; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease); } .chat-fab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sign-green) url("../assets/brand/tess-tile.svg") center / 170px 170px repeat; opacity: 0; transition: opacity .35s var(--ease); } .chat-fab span { max-width: 0; overflow: hidden; transition: max-width .45s var(--ease-out); } .chat-fab:hover, .chat-fab:focus-visible { color: #fff; border-color: var(--sign-green); gap: .6rem; } .chat-fab:hover::before, .chat-fab:focus-visible::before { opacity: 1; } .chat-fab:hover span, .chat-fab:focus-visible span { max-width: 12rem; } .chat-fab:active { transform: scale(.97); transition: transform .1s var(--ease-out); } .chat-fab svg { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; } .chat-fab.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; } @media print { .chat-fab { display: none; } } /* Headings in capitals (with the tracking caps need) */ html :is(h1, h2, h3, .cs-statement, .ab-statement, .cs-next__name, .nf__h, .cform__done-h, .ph__title, .cs-hero__title, .gl-title, .px-title) { text-transform: uppercase !important; letter-spacing: .03em !important; } html :is(h1, h2, h3, .cs-statement, .ab-statement, .cs-next__name, .nf__h, .cform__done-h, .ph__title, .cs-hero__title) .it { text-transform: uppercase !important; }