HOW THIS SITE WAS BUILT · DESERT MOUNTAIN

HIGH SONORAN

Altitude, strata, silence. A page that breathes slower than its siblings — then lands the brand's edge on a gold pin.

01 THE DESIGN DIRECTION

Elevation,
then choice.

The school of design is topographic modernism — the graphic language of a surveyor's sheet (contour rings, strata columns, mono annotations, leader lines) set with Swiss typographic discipline. Desert Mountain is a club literally stacked up a mountain: six Nicklaus Signature courses plus a seventh, climbing the high Sonoran desert to roughly 4,500 feet. So the site is organized vertically, like the land — a procedural ridgeline hero, a geological "stack" of the seven courses with the oldest stratum at the base, and one survey drawing where the whole concept lands.

Two ideas carry everything. ELEVATION: the hero is six stacked silhouette bands in graduated neutrals, drawn deterministically on a 2D canvas, with gentle scroll parallax; the nearest band is charcoal and hands the page straight into the dark player panel — the mountain becomes the bench you sit on to listen. CHOICE: Renegade's verified dual-pin concept — a white flag set forward, a gold flag set harder, on every hole — is the product metaphor. White is the 24 (prepare); gold is the 8 (commit). Hover or tap a pin and the caption reframes.

Palette holds the 70/20/8/2 law: warm bone field, graphite ink, charcoal panels, lime strictly as the system signal (the 8-cluster, active states, playback). The two course-derived support tints — high-desert dawn rose and agave gray-green — appear only as thin bands: two crest lines in the strata, thin sky bands, the geological edge of the stack, a 2px dawn line over the player. Never a wash. Accent Orange appears with one meaning only: it is the gold pin — the flag, its eight commit ticks, and its swatch in the toggle. Type is the brand system trio (Barlow Condensed 500/600/700, Inter Variable, IBM Plex Mono 400/500) — no extra voice; the altitude comes from spacing, not from a new face.

Motion is "thin air": the page breathes slower than any sibling — reveals settle over 1.15 s on a long ease, the hero fades in over nearly two seconds, sections sit up to 12vh apart. The ascent ribbon draws one swing as a climb at true system tempo (0.80 s up, 0.27 s down). While the anthem plays, glints of dawn light travel the ridge crests — one spawned per 112 BPM beat, each crossing in four beats, amplitude driven by the live RMS level. In silence the crests only breathe faintly on the brand tempo. Under prefers-reduced-motion everything is a composed static page: bands drawn once, ribbon fully lit, no parallax, no glints.

02 HOW IT WAS BUILT

By hand,
deterministically.

  • Hand-written static HTML/CSS/JS — no framework, no authoring build step. One stylesheet, three small ES modules (main, strata, pins) plus the shared player core.
  • The strata are pure 2D canvas — no WebGL, no vendor code. Each ridgeline is a deterministic sum of sines with one "ridged" octave (no randomness, so every visitor sees the same mountain), filled far-to-near with parallax offsets computed from scroll position. The beat glints are one gradient-stroked crest pass per band per pulse — cheap enough to run at 60fps, and the loop stops entirely when the hero is offscreen.
  • The TWO PINS sheet is generated as SVG in JavaScript: a polar blob for the green, four contour rings shrinking toward a focus (the high shelf), hatched sand, quadratic approach curves with ticks placed along them — 24 for the white line, 8 for the gold. The SVG is decorative (aria-hidden) inside a figure with a full text alternative; the interaction is duplicated in two real HTML toggle buttons, and the caption region is aria-live.
  • Fonts are self-hosted woff2 latin subsets via @fontsource: Barlow Condensed 500/600/700, Inter Variable, IBM Plex Mono 400/500.
  • Every internal href/src/import/fetch is relative, so the site works served from its own domain root (248-anthems-desert-mountain.vercel.app) or from a hub subpath unchanged. External URLs (audio host, sibling sites) stay absolute.
  • Reveals are transform-only settles — content is never opacity-hidden, so the page reads without JS, mid-scroll, or in a capture — with a post-load safety pass that composes anything an IntersectionObserver missed.
  • Accessibility: skip link, semantic landmarks, one h1, labeled sections, focus-visible outlines everywhere, WCAG AA contrast (rose, agave and orange are never body text on bone — they are lines, swatches and shapes), and the drawings carry their captions in text.
03 THE AUDIO PIPELINE

One track,
at altitude.

Masters are large WAVs; delivery uses the library's compressed MP3/MP4-AAC versions, streamed from a shared CORS-enabled audio host (248-anthems-audio.vercel.app) whose manifest.json is the single source of truth. This site ships a fallback copy of that manifest and passes its playlist explicitly (playlistIds: ['desert-mountain-renegade']), because the deployed host's manifest predates the wave-two playlist keys. The player is the shared 248 core (player.js), skinned into a dark bench under a 2px dawn-rose line: square corners, hairline borders, mono readouts, lime reserved for active states. The 32-unit stripe beneath it encodes real playback position. No placeholder audio, no fake waveforms: the strata glints exist only while audio actually plays, scaled by the analyser's live RMS level.

04 THE FACTS RULE

Verified,
or absent.

Everything factual comes from the project's verified facts file for Desert Mountain, the tempo-science file, or the track manifest. Verified and used: established 1986 (Lyle Anderson, Taliesin Associated Architects, 8,300 acres, the former Carefree Ranch); member-owned since 2010; the official phrasing "the only private club in the world to feature six Jack Nicklaus Signature Championship golf courses, complemented by a seventh championship short course"; the six with opening years (Renegade '87, Cochise '88, Geronimo '89, Apache '96, Chiricahua '99, Outlaw '03) and No. 7 (2019, par-54, 3,114 yards, Brownlee & Pickett); Cochise hosting The Tradition 1989–2001 (Nicklaus ×4, Trevino '92) and the Schwab Cup Championship 2012, 2014–16; the 2026 USGA U.S. Amateur Four-Ball; elevation roughly 2,400–4,500 feet adjacent to Tonto National Forest; and for Renegade — dual pins on every hole (white forward/easier, gold harder, some holes a separate green), seven tees × two flags = 14 combinations, par 72, stretchable past 8,000 yards from the Gold Bear tees to the gold flags, and the Nicklaus/Chris Cochran renovation (bermuda to bentgrass) reopened spring 2019.

Omitted because unverified or disallowed: the exact count of double greens, any single definitive tips yardage (conflicting figures circulate), Renegade-specific course/slope ratings and elevation numbers, per-hole details, the "most versatile course in the world" quote (inconsistent attribution), the renovation's dollar figure, membership counts, and every superlative the facts file flags. The TWO PINS drawing states in its own title block: no hole claimed, no yardages, not to scale. The 112 BPM grid is presented as engineering arithmetic, never as a lab result.

05 ITERATION PASSES

Three passes,
honestly.

PASS 1 — DESKTOP + MOBILE, HOME + ZOOMED CLIPS

Findings: the strata read as soft dunes, not high-desert mountains — the plain-sine ridge function had no creases — and the thin "dawn band" rectangles drawn in the sky crossed the whole canvas and ran under the hero intro like stray rules; the agave crest also vanished against its own band. On the TWO PINS sheet, 2× clips showed the top-right corner tangled (the gold label sat on top of the ghost "separate green" outline), the third title-block row overflowing its frame, the gold approach reading as faint scraps, a second bunker crowding the corner, and the gold flag standing on the green's outline rather than on the green. Fixes: ridge function rebuilt with two folded-sine octaves for alpine creases and more amplitude; sky rectangles removed; rose and agave crest strokes widened to 2px; the sheet re-annotated — one bunker, the gold label moved beside its pin with a clean leader, the ghost-green note right-aligned clear of the drawing, a shorter title-block row, bolder gold ticks, and the flag tucked inside the back shelf.

PASS 2 — RE-SHOOT, GOLD STATE, REDUCED MOTION, GUIDE

Findings: scripted a click on GOLD PIN to verify the interaction (white side dims, caption reframes, button states flip) — and the capture showed the gold line's early ticks passing through the title block, so the block was given an opaque bone fill to mask linework like a real sheet. At 390px the pins figure forced its grid column wider than the viewport, clipping the toggle and caption off the right edge — fixed with min-width: 0 on the stage's children, and the sheet's initial centring (which had run before layout settled) now re-centres after load. A reduced-motion capture confirmed the static composed strata. Re-shot both routes at both sizes clean; the only console noise is the expected blocked-egress error for the audio host inside this container — the fallback manifest takes over, by design.

PASS 3 — SERIES EDITOR REVIEW

A series-level editorial review after all eight course sites and the flagship were complete: full-page desktop and mobile captures re-read, every on-page number cross-checked against the project's verified facts files, and cross-links audited across the whole family. This site's cross-links were already correct, and the fact check — including the Tradition/Schwab Cup hosting record and the elevation range — found no corrections needed. Mobile composition passed review with no further layout changes.

BACK TO THE MOUNTAIN: DESERT MOUNTAIN — HIGH SONORAN