How this page was built.

A retreat that takes your phone away should not greet you with a megabyte of tracking scripts. So the site ships none, and the footer says so where a spa site would put its Instagram. The rest of the brief: Owens Valley high desert, hard light instead of soft wellness, real numbers instead of adjectives, and modern CSS carrying every moment that would normally get a framework: a sun that crosses the sky on scroll, a room chooser, a folding itinerary, a form that argues back politely.

Palette, strict: bone, terracotta, juniper, high-noon gold. Type: Cormorant Garamond over Karla. Everything on this page is built from those six ingredients plus geometry. When the demo browser is Chromium the timelines run; in browsers without scroll-driven animations the page holds a composed mid-morning still and loses nothing it needs.

The hero is a 260vh section with a sticky 100vh sky inside it. The section carries a named view timeline, and its contain range maps exactly to the stretch where the sky is pinned: progress 0 is dawn, progress 1 is high noon. The sun's waypoints live in custom properties so the arc can be re-aimed per breakpoint (on phones it stays left of the masthead). Sky, ridge, valley and sun colors are registered with @property, so the same timeline retints the whole scene while the disc travels.

Scrubbed animations here run linear on purpose: scroll position is the clock, and a progress mapping that eases would lie about where you are. The shaping lives in the keyframe values instead. One private joke rides along: the lodge's one lit window turns off by mid-morning, on the same timeline.

Three radio inputs, visually hidden but fully focusable, sit above the layout. Labels anywhere in the grid select them, and :has() lets the form react at a distance: the matching panel fades up with its rate and specs, the photograph pans to a different crop of the same morning, the caption swaps. Radios were the honest choice because the browser already knows how to arrow-key through them; the CSS only decorates state it gets for free.

The itinerary is three native details elements sharing a name, which gives exclusive-accordion behavior with no listeners. The unfold is two layers: ::details-content interpolates its block size (via interpolate-size: allow-keywords), while the timetable inside tips forward from a slight rotateX, the way a folded map relaxes when you open it. Browsers that cannot animate the height simply open instantly, which is what paper does when you are in a hurry.

Validation is the platform's: :user-invalid waits until you have actually touched a field, each field carries its own error copy in a data-error attribute that attr() prints, and the submit button's label changes when form:valid flips, from "Send the inquiry" to a promise that it is the last screen for a while. Submission is a plain mailto:. No endpoint, no queue, no cookie banner downstream.

Bottom right, a small dial repeats the hero's conceit at the scale of the entire document: a gold dot rides an offset-path arc, driven by scroll(root), so the page itself becomes one day. Dawn at the masthead, sunset at the colophon. It is also the back-to-top link, because the day starts over. Progress meters do not get easing; this one is linear and honest.

The rest of the scenery is procedural too: ridgelines are two four-point-per-mile SVG paths with a long-wavelength second set for phones, the stars are circles with staggered twinkle, the paper grain is one feTurbulence tile in a data URI, and the elevation profile in The Land draws itself on a view timeline when it enters, with survey gridlines that only appear on hover.

Every scroll-driven effect sits behind @supports (animation-timeline: ...) and prefers-reduced-motion: no-preference, and every animated element has a designed resting pose underneath: the sun holds a mid-morning position, reveals are simply visible, the dial excuses itself entirely. Reduced motion is not a degraded page here; it is the same page, photographed instead of filmed.

Layout never depends on the animations. Firefox and Safari get the full composition, the room chooser, the folding days and the form states, all of which are plain selector support. The one thing they wait for is the moving sun, and the still one is set at a good hour.

The retreat is fictional, and so is its photography: the four images below were AI-generated with Nano Banana Pro via Fal for this project, then treated as the lodge's archive. They are the only raster assets on the site. Everything else you saw, ridgelines, sun, stars, grain, the elevation profile, is CSS or inline SVG drawn by hand.