/* ========================================================================== 110 · 288th — listing site stylesheet Design rules this file obeys: - One accent colour only (brass). Everything else is paper, ink or forest. - Corners are square or barely rounded. No pills, no drop shadows for decoration, no gradients except where they carry text legibility. - Type is the ornament. Two families, a real scale, tight display tracking. - Motion animates transform and opacity only, never layout. Progressive enhancement contract: - The finished state is the DEFAULT. Nothing is hidden by base CSS. - Scroll bindings are added only inside @supports and only when the user has not asked for reduced motion. - A `no-timeline` class on (set by JS when CSS scroll timelines are unavailable, i.e. Safari) swaps in the fallback presentation. - Strip every @supports block and the page must still be complete and readable. That is a test, not an aspiration. ========================================================================== */ :root { /* surfaces */ --paper: #f5f2ea; --paper-2: #ece7db; --paper-3: #e3ddd0; --forest: #131f18; --forest-2: #1d2e23; /* ink */ --ink: #14160f; --ink-soft: #3d4237; --muted: #6d6a5d; --on-dark: #ece7db; --on-dark-soft: #a9b3a6; /* one accent */ --brass: #a8824e; --brass-soft: #c6a273; --line: rgba(20, 22, 15, 0.14); --line-strong: rgba(20, 22, 15, 0.28); --line-dark: rgba(236, 231, 219, 0.16); --f-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --step--1: clamp(0.80rem, 0.76rem + 0.18vw, 0.90rem); --step-0: clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem); --step-1: clamp(1.18rem, 1.06rem + 0.55vw, 1.50rem); --step-2: clamp(1.45rem, 1.20rem + 1.15vw, 2.15rem); --step-3: clamp(1.90rem, 1.40rem + 2.30vw, 3.20rem); --step-4: clamp(2.40rem, 1.50rem + 4.20vw, 5.00rem); --step-5: clamp(2.90rem, 1.40rem + 7.00vw, 7.20rem); --gut: clamp(1.15rem, 0.7rem + 2.1vw, 3rem); --section-y: clamp(4.5rem, 3rem + 8vw, 11rem); --maxw: 1200px; --measure: 62ch; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); font-weight: 400; line-height: 1.62; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.018em; margin: 0; text-wrap: balance; } p { margin: 0 0 1.05em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 0.22em; } a:hover { text-decoration-color: var(--ink); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; } /* ---------- utilities ---------- */ .wrap { width: min(100% - (var(--gut) * 2), var(--maxw)); margin-inline: auto; } .wrap--wide { width: min(100% - (var(--gut) * 2), 1560px); margin-inline: auto; } .prose { max-width: var(--measure); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; top: 0.6rem; left: 0.6rem; z-index: 200; transform: translateY(-160%); background: var(--forest); color: var(--on-dark); padding: 0.6rem 0.9rem; font-size: var(--step--1); text-decoration: none; } .skip:focus { transform: none; } .eyebrow { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; } .on-dark .eyebrow { color: var(--brass-soft); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .aside { font-size: var(--step--1); color: var(--muted); border-left: 2px solid var(--brass); padding-left: 0.9rem; max-width: 46ch; } .on-dark .aside { color: var(--on-dark-soft); } /* ---------- progress rail ---------- */ .rail { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90; background: var(--brass); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; will-change: transform; pointer-events: none; } /* ---------- top bar ---------- */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 80; display: flex; align-items: center; gap: 1.2rem; padding: 0.85rem var(--gut); color: var(--on-dark); background: linear-gradient(to bottom, rgba(10, 16, 12, 0.55), rgba(10, 16, 12, 0)); transition: background-color 0.5s var(--ease), color 0.5s var(--ease), padding 0.4s var(--ease); } .topbar.is-solid { background: rgba(245, 242, 234, 0.93); backdrop-filter: saturate(1.4) blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); padding-block: 0.6rem; } .topbar__mark { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .topbar__nav { display: none; gap: 1.35rem; margin-left: auto; } .topbar__nav a { font-size: var(--step--1); text-decoration: none; letter-spacing: 0.02em; opacity: 0.85; } .topbar__nav a:hover { opacity: 1; text-decoration: underline; } .topbar__cta { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; } .topbar__nav + .topbar__cta { margin-left: 0; } .price-tag { font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--step--1); letter-spacing: 0.02em; } @media (min-width: 900px) { .topbar__nav { display: flex; } } /* ---------- buttons ---------- */ .btn { --bg: transparent; --fg: currentColor; --bd: currentColor; display: inline-flex; align-items: center; gap: 0.55rem; font: inherit; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.03em; padding: 0.72rem 1.15rem; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer; border-radius: 2px; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--brass { --bd: var(--brass); --fg: var(--brass); } .btn--brass:hover { background: var(--brass); border-color: var(--brass); color: #fff; } .btn--solid { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); } .btn--solid:hover { --bg: var(--brass); --bd: var(--brass); color: #fff; } .on-dark .btn:hover { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--forest); color: var(--on-dark); isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* The hero and the full-bleed band carry their own dark treatment, so they need the accent-on-dark eyebrow rather than the muted one. */ .hero .eyebrow, .band .eyebrow { color: var(--brass-soft); } .hero__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* a scrim down the left, where the words sit, so nothing fights the type */ linear-gradient(96deg, rgba(8, 14, 10, 0.72) 0%, rgba(8, 14, 10, 0.40) 44%, rgba(8, 14, 10, 0.10) 74%), /* top scrim for the bar and the eyebrow over a bright sky, bottom scrim under the facts */ linear-gradient(to bottom, rgba(8, 14, 10, 0.60) 0%, rgba(8, 14, 10, 0.08) 24%, rgba(8, 14, 10, 0.14) 60%, rgba(8, 14, 10, 0.76) 100%); } @media (max-width: 859px) { /* On a phone the hero is a tall frame with the copy across its lower half. A left-hand scrim there achieves nothing — every column is the left-hand column — so the darkening has to happen down the frame instead, under the eyebrow and the paragraph. */ .hero__grain { background: linear-gradient( to bottom, rgba(8, 14, 10, 0.52) 0%, rgba(8, 14, 10, 0.10) 20%, rgba(8, 14, 10, 0.58) 46%, rgba(8, 14, 10, 0.88) 100% ); } } .hero__inner { position: relative; padding-block: clamp(3rem, 9vh, 6.5rem) clamp(2.2rem, 7vh, 4.6rem); /* No width here on purpose. This element also carries .wrap, and a `width: 100%` declared at this point in the file has the same specificity as .wrap but comes later, so it silently beat `min(100% - var(--gut) * 2, var(--maxw))` and dropped the hero copy flush against the left edge at every viewport size. .wrap owns the width; the flex parent's auto inline margins centre it. */ } /* The hero copy is a triangle, not a column: a short headline over a wide paragraph, held to about two thirds of the grid so the photograph keeps the right-hand third to itself. The paragraph is deliberately allowed to run close to the full width of this block, which is what keeps it to two lines. */ .hero__copy { max-width: 100%; } @media (min-width: 860px) { .hero__copy { max-width: 66%; } } .hero__h { /* capped against viewport HEIGHT as well as width, so a short laptop screen still gets the price and the buttons above the fold */ font-size: clamp(2.2rem, min(6.1vw, 9.6vh), 5.8rem); max-width: 17ch; margin-bottom: 1rem; text-shadow: 0 1px 34px rgba(0, 0, 0, 0.42); } .hero__stand { font-size: clamp(1rem, 0.94rem + 0.35vw, 1.24rem); /* no cap of its own: .hero__copy sets the measure, and a ch cap here would re-narrow the paragraph and put the wraps back */ max-width: none; color: var(--on-dark); opacity: 0.94; text-shadow: 0 1px 22px rgba(0, 0, 0, 0.5); } .hero__facts { list-style: none; padding: 0; margin: clamp(1rem, 2.4vh, 1.7rem) 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem 1.5rem; font-size: var(--step--1); letter-spacing: 0.03em; color: var(--on-dark); opacity: 0.88; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.62); } .hero__facts li { display: flex; align-items: baseline; gap: 0.5rem; } .hero__facts li::before { content: ""; width: 4px; height: 4px; background: var(--brass); display: block; transform: translateY(-2px); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.1rem, 3vh, 2rem); align-items: center; } .hero__price { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.01em; margin-right: 0.5rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); } /* these buttons sit on a photograph, so they carry their own contrast */ .hero__actions .btn { border-color: rgba(236, 231, 219, 0.5); color: var(--on-dark); } .hero__actions .btn:hover { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); } .hero__actions .btn--brass { border-color: var(--brass); color: var(--brass-soft); } .hero__actions .btn--brass:hover { background: var(--brass); color: #fff; border-color: var(--brass); } .scroll-hint { /* left: 0 aligns it with the copy, because this element already sits inside the .wrap box and a gutter offset here would indent it a second time */ position: absolute; left: 0; bottom: 1.15rem; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-soft); display: flex; align-items: center; gap: 0.55rem; } .scroll-hint__chev { width: 0.85rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: chevBob 2.4s ease-in-out infinite; } @keyframes chevBob { 0%, 100% { transform: translateY(-0.14rem); opacity: 0.5; } 50% { transform: translateY(0.14rem); opacity: 1; } } /* ---------- generic section ---------- */ .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .on-dark { background: var(--forest); color: var(--on-dark); } .on-dark a { text-decoration-color: var(--brass-soft); } .split { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; } @media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .split--flip > :first-child { order: 2; } @media (max-width: 859px) { .split--flip > :first-child { order: 0; } } .figure { margin: 0; } .figure img { width: 100%; background: var(--paper-2); } .figure figcaption { margin-top: 0.8rem; font-size: var(--step--1); color: var(--muted); display: flex; gap: 0.6rem; align-items: baseline; } .figure figcaption::before { content: ""; flex: 0 0 1.4rem; height: 1px; background: var(--brass); transform: translateY(-0.35em); } .head { max-width: 46ch; margin-bottom: clamp(1.6rem, 3vw, 3rem); } .head h2 { font-size: var(--step-3); margin-bottom: 0.7rem; } .head p { color: var(--ink-soft); } .on-dark .head p { color: var(--on-dark-soft); } /* ---------- stat triads ---------- */ .stats { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } } .stat__v { font-family: var(--f-display); font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; display: block; } .stat__k { font-size: var(--step--1); color: var(--muted); margin-top: 0.5rem; letter-spacing: 0.02em; } .on-dark .stat__k { color: var(--on-dark-soft); } .stat { border-top: 1px solid var(--line); padding-top: 1rem; } .on-dark .stat { border-color: var(--line-dark); } /* ---------- pinned parcels scene ---------- */ .pin { position: relative; height: auto; background: var(--paper-2); } .pin__stage { /* Static by default. The pinned, scroll-driven behaviour is an ENHANCEMENT that is added back inside @supports further down. It cannot be the other way round: if the animation never runs, a 280vh section with a sticky child is two viewports of nothing happening. */ padding-block: var(--section-y); overflow: visible; } /* No width here either: this element also carries .wrap, so a `width: 100%` at this point in the file beat .wrap's gutter and max-width and pinned the section's copy to the left edge. See the note on .hero__inner above. */ .pin__grid { display: grid; gap: clamp(1.4rem, 3vw, 3.4rem); align-items: center; } @media (min-width: 900px) { .pin__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); } } .pin__copy h2 { font-size: var(--step-3); margin-bottom: 0.8rem; } .pin__plan { width: 100%; height: auto; overflow: visible; } .pin__plan path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .plan-a { stroke: var(--forest-2); fill: rgba(29, 46, 35, 0.12); } .plan-b { stroke: var(--brass); fill: rgba(168, 130, 78, 0.13); } .pin__plan .plan-label { font-family: var(--f-body); font-size: 15px; letter-spacing: 0.06em; fill: var(--ink-soft); stroke: none; } .pin__plan .plan-label--b { fill: var(--brass); } .pin__ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.95rem; } .pin__ticks li { display: grid; grid-template-columns: 6ch 1fr; gap: 0.9rem; align-items: baseline; font-size: var(--step--1); line-height: 1.4; } .pin__ticks b { font-family: var(--f-display); font-size: var(--step-1); font-weight: 400; font-variant-numeric: tabular-nums; } /* the acreage caveat sits below the ticks, so it needs its own separation */ .pin__copy .aside { margin: 1.6rem 0 0; } @media (max-height: 720px) { /* short viewports: tighten the pinned scene so nothing collides */ .pin__ticks { margin-top: 1.1rem; gap: 0.6rem; } .pin__copy .aside { margin-top: 1rem; } } /* ---------- horizontal gallery rail ---------- */ .railway { position: relative; height: auto; background: var(--forest); color: var(--on-dark); } .railway__stage { padding-block: clamp(3rem, 6vw, 5rem); } .railway__head { padding: 0 var(--gut) 1.4rem; } .railway__head h2 { font-size: var(--step-2); } /* Without the scroll-driven version this must still be reachable, so it is a normal horizontally scrollable strip with snap points. */ .railway__strip { display: flex; gap: clamp(0.8rem, 1.6vw, 1.5rem); padding-inline: var(--gut); padding-bottom: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .railway__item { flex: 0 0 auto; width: min(66vw, 380px); scroll-snap-align: start; } .railway__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .railway__item figcaption { margin-top: 0.6rem; font-size: var(--step--1); color: var(--on-dark-soft); } .railway__hint { display: none; padding: 1.1rem var(--gut) 0; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-soft); } /* ---------- at a glance ---------- */ .glance { display: grid; border-top: 1px solid var(--line); } @media (min-width: 760px) { .glance { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 5rem); } } .glance__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); align-items: baseline; } .glance__k { font-size: var(--step--1); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .glance__v { font-size: var(--step-1); font-family: var(--f-display); } .glance__n { display: block; font-family: var(--f-body); font-size: var(--step--1); color: var(--muted); margin-top: 0.15rem; } /* ---------- two-column record vs seller ---------- */ .ledger { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); } @media (min-width: 820px) { .ledger { grid-template-columns: repeat(2, 1fr); } } .ledger h3 { font-size: var(--step-2); margin-bottom: 1.1rem; } .ledger ul { list-style: none; margin: 0; padding: 0; } .ledger li { padding: 0.62rem 0 0.62rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; font-size: var(--step--1); } .ledger li::before { content: ""; position: absolute; left: 0; top: 1.22em; width: 0.72rem; height: 1px; background: var(--brass); } .ledger__legend { margin-top: 1.4rem; font-size: var(--step--1); color: var(--muted); max-width: 62ch; } /* ---------- disclosure / question lists ---------- */ .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { cursor: pointer; list-style: none; padding: 1.1rem 2.4rem 1.1rem 0; font-size: var(--step-1); font-family: var(--f-display); position: relative; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: ""; position: absolute; right: 0.35rem; top: 1.72em; width: 0.62rem; height: 0.62rem; border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease); } .qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .qa .qa__body { padding: 0 0 1.3rem; max-width: 68ch; color: var(--ink-soft); } /* ---------- contact ---------- */ .contact { display: grid; gap: clamp(2rem, 5vw, 4.5rem); } @media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .contact__methods { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .contact__methods a { display: flex; align-items: baseline; gap: 0.9rem; font-size: var(--step-2); font-family: var(--f-display); text-decoration: none; padding: 0.35rem 0; } .contact__methods a:hover { color: var(--brass); } .contact__methods span { font-family: var(--f-body); font-size: var(--step--1); color: var(--brass-soft); letter-spacing: 0.14em; text-transform: uppercase; min-width: 4.5rem; } .form { display: grid; gap: 0.85rem; } .field { display: grid; gap: 0.35rem; } .field label { font-size: var(--step--1); letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-dark-soft); } .field input, .field textarea { font: inherit; font-size: var(--step-0); background: transparent; color: var(--on-dark); border: 0; border-bottom: 1px solid var(--line-dark); padding: 0.6rem 0; border-radius: 0; } .field textarea { resize: vertical; min-height: 5.6rem; } .field input::placeholder, .field textarea::placeholder { color: rgba(169, 179, 166, 0.55); } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); } .form__row { display: grid; gap: 0.85rem; } @media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } } .form__note { font-size: var(--step--1); color: var(--on-dark-soft); } .form__status { font-size: var(--step--1); min-height: 1.4em; } .form__status[data-state="ok"] { color: var(--brass-soft); } .form__status[data-state="err"] { color: #e2a08c; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .availability { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); letter-spacing: 0.06em; color: var(--on-dark-soft); margin-top: 1.6rem; } .availability::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(168, 130, 78, 0.2); } /* ---------- gallery grid + lightbox ---------- */ .grid-gallery { display: grid; gap: clamp(0.5rem, 1.4vw, 1.1rem); grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .grid-gallery { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .grid-gallery { grid-template-columns: repeat(4, 1fr); } } .grid-gallery button { all: unset; cursor: zoom-in; display: block; width: 100%; } .grid-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); } .grid-gallery button:hover img { opacity: 0.9; } .lightbox { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(9, 14, 11, 0.96); padding: clamp(0.8rem, 3vw, 2.4rem); align-items: center; justify-content: center; } .lightbox[data-open="true"] { display: flex; } .lightbox img { max-width: 100%; max-height: 82svh; object-fit: contain; } .lightbox__cap { position: absolute; bottom: clamp(0.8rem, 3vw, 1.6rem); left: 50%; transform: translateX(-50%); color: var(--on-dark-soft); font-size: var(--step--1); text-align: center; max-width: 70ch; } .lightbox__btn { position: absolute; background: none; border: 1px solid var(--line-dark); color: var(--on-dark); font: inherit; font-size: 1.1rem; width: 2.6rem; height: 2.6rem; cursor: pointer; border-radius: 2px; display: grid; place-items: center; } .lightbox__btn:hover { background: var(--on-dark); color: var(--forest); } .lightbox__btn--prev { left: clamp(0.8rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%); } .lightbox__btn--next { right: clamp(0.8rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%); } .lightbox__btn--close { right: clamp(0.8rem, 3vw, 2.4rem); top: clamp(0.8rem, 3vw, 2.4rem); } /* ---------- full-bleed band ---------- */ .band { position: relative; min-height: 78svh; display: flex; align-items: center; overflow: hidden; background: var(--forest); color: var(--on-dark); isolation: isolate; } .band__media { position: absolute; inset: 0; z-index: -2; } .band__media img { width: 100%; height: 100%; object-fit: cover; } .band__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(8, 14, 10, 0.82), rgba(8, 14, 10, 0.35) 62%, rgba(8, 14, 10, 0.55)); } .band h2 { font-size: var(--step-4); max-width: 20ch; } /* ---------- footer ---------- */ .foot { background: var(--forest); color: var(--on-dark-soft); padding-block: clamp(3rem, 6vw, 5rem); font-size: var(--step--1); } .foot__grid { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); } @media (min-width: 800px) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .foot h2 { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-soft); font-family: var(--f-body); font-weight: 500; margin-bottom: 0.9rem; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .foot li { padding-left: 1rem; position: relative; } .foot li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 1px; background: var(--brass); } .foot__mark { font-family: var(--f-display); font-size: var(--step-2); color: var(--on-dark); margin-bottom: 0.6rem; display: block; } .foot__fine { margin-top: clamp(2rem, 4vw, 3.4rem); padding-top: 1.4rem; border-top: 1px solid var(--line-dark); font-size: 0.78rem; max-width: 80ch; opacity: 0.75; } /* ---------- sticky mobile call bar ---------- */ .callbar { position: fixed; inset: auto 0 0 0; z-index: 85; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(19, 31, 24, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line-dark); transform: translateY(110%); transition: transform 0.45s var(--ease); } .callbar.is-in { transform: none; } .callbar a { padding: 0.9rem 0.4rem; text-align: center; text-decoration: none; color: var(--on-dark); font-size: var(--step--1); letter-spacing: 0.06em; display: flex; flex-direction: column; gap: 0.15rem; align-items: center; } .callbar a + a { border-left: 1px solid var(--line-dark); } .callbar a:hover { background: rgba(168, 130, 78, 0.16); } .callbar b { font-weight: 500; } .callbar small { color: var(--on-dark-soft); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; } @media (min-width: 900px) { .callbar { display: none; } } @media (max-width: 899px) { body { padding-bottom: 4.1rem; } } /* ========================================================================== Motion ========================================================================== */ /* The finished state is the base state. Reveals are visible unless the browser supports scroll timelines AND the user has not asked for less motion. */ .reveal { opacity: 1; } @keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } @keyframes heroDolly { from { transform: scale(1.001) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(0, -3.5%, 0); } } @keyframes heroCopy { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -34px, 0); } } @keyframes drawPath { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } @keyframes rail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100vw - 100% - var(--gut) * 2), 0, 0); } } @keyframes veil { from { opacity: 0; } to { opacity: 1; } } /* JS fallback presentation: opt-in class set only when timelines are missing. */ html.no-timeline .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } html.no-timeline .reveal.is-in { opacity: 1; transform: none; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Promote the pinned scenes and the gallery rail to scroll-driven. These cancel the static base layout, so they belong inside BOTH the support gate and the motion preference gate. */ .pin { height: 280vh; } .pin__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 0; } .railway { height: 340vh; } .railway__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 0; } .railway__strip { overflow: visible; scroll-snap-type: none; padding-bottom: 0; } .railway__hint { display: block; } /* progress rail + top bar, bound to the root scroller */ .rail { animation: railGrow linear both; animation-timeline: scroll(root); } .topbar { animation: barSolid linear both; animation-timeline: scroll(root); animation-range: 0 340px; } /* hero dolly */ .hero__media img { animation: heroDolly linear both; animation-timeline: scroll(root); animation-range: 0 105svh; will-change: transform; } .hero__inner { animation: heroCopy linear both; animation-timeline: scroll(root); animation-range: 0 78svh; } /* generic reveals, per element */ .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 12% cover 34%; } /* pinned parcels scene: bound to its own view timeline */ .pin { view-timeline-name: --pin; view-timeline-axis: block; } .pin__stage .reveal, .pin__copy > *, .pin__ticks li, .pin__plan path { animation-timeline: --pin; animation-range: cover 24% cover 76%; } .pin__ticks li:nth-child(2) { animation-range: cover 36% cover 80%; } .pin__ticks li:nth-child(3) { animation-range: cover 48% cover 84%; } .pin__ticks li:nth-child(4) { animation-range: cover 58% cover 88%; } /* The plan draws itself as the section is pinned. Order matters: `animation` is a shorthand and resets animation-timeline, so the timeline and range must be declared AFTER it. */ .pin__plan path { stroke-dasharray: var(--len); animation: drawPath linear both; animation-timeline: --pin; animation-range: cover 22% cover 72%; } .pin__plan .plan-label, .pin__plan .plan-scale { animation: veil linear both; animation-timeline: --pin; animation-range: cover 48% cover 68%; } /* horizontal gallery rail */ .railway { view-timeline-name: --rail; view-timeline-axis: block; } .railway__strip { animation: rail linear both; animation-timeline: --rail; animation-range: cover 22% cover 78%; will-change: transform; } /* full-bleed band */ .band { view-timeline-name: --band; view-timeline-axis: block; } .band__media img { animation: heroDolly linear both; animation-timeline: --band; animation-range: cover 0% cover 100%; } } } @keyframes railGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes barSolid { from { background-color: rgba(0, 0, 0, 0); } to { background-color: rgba(245, 242, 234, 0.93); } } /* Reduced motion: keep everything visible, remove all travel. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } .scroll-hint__chev { animation: none; opacity: 0.8; } .pin { height: auto; } .pin__stage { position: static; height: auto; padding-block: var(--section-y); } .railway { height: auto; } .railway__stage { position: static; height: auto; padding-block: clamp(3rem, 6vw, 5rem); } .railway__strip { overflow-x: auto; padding-bottom: 1rem; } .railway__hint { display: none; } .band { min-height: 0; padding-block: clamp(3rem, 8vw, 6rem); } .callbar { transition: none; } .rail { transform: scaleX(0); } } @media print { .topbar, .callbar, .rail, .lightbox, .railway, .pin { display: none; } body { background: #fff; color: #000; } .hero { min-height: 0; color: #000; } .hero__media, .hero__grain, .band__media, .band__veil { display: none; } .on-dark, .band, .foot { background: #fff; color: #000; } } /* ========================================================================== Markup helpers These exist so generated HTML never carries an inline style attribute. The Content-Security-Policy has no 'unsafe-inline' in style-src, and that is worth keeping: an inline style is silently DROPPED by the browser, which is the worst kind of failure — it looks correct locally and breaks in production. ========================================================================== */ .split__h { font-size: var(--step-3); margin-bottom: 0.8rem; } .aside--spaced { margin-top: 1.2rem; } .band__body { margin-top: 1.1rem; } .loc__cta { margin-top: 1.6rem; } .contact__h { font-size: var(--step-4); } .contact__lede { margin-top: 1rem; } .contact__rule { margin: 2.2rem 0; border-color: var(--line-dark); } .contact__sub { font-size: var(--step-1); font-family: var(--f-display); } .contact__body { margin-top: 0.6rem; color: var(--on-dark-soft); } /* Blur-up placeholders. The background-image itself is one generated rule per photograph, in generated.css. */ [class^="lq-"], [class*=" lq-"] { background-repeat: no-repeat; background-size: cover; background-position: center; }