From c8168564bb4b912f868e129cee5ce394d7f348c6 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Wed, 17 Jun 2026 20:04:00 -0400 Subject: [PATCH] style(about): redesign /about as numbered "Liner Notes" editorial spine Replace Home-cloned section grammar with a numbered left rail (Bodoni numerals, vertical spine, mono marginalia), an asymmetric content column, and SVG waveform dividers. Adds a degrade-safe IntersectionObserver interop. Copy verbatim. --- DeepDrftPublic.Client/Pages/About.razor | 457 +++++++------ DeepDrftPublic.Client/Pages/About.razor.css | 708 +++++++++++--------- DeepDrftPublic/Interop/about/about-rail.ts | 65 ++ 3 files changed, 701 insertions(+), 529 deletions(-) create mode 100644 DeepDrftPublic/Interop/about/about-rail.ts diff --git a/DeepDrftPublic.Client/Pages/About.razor b/DeepDrftPublic.Client/Pages/About.razor index e4d516c..6a22bdc 100644 --- a/DeepDrftPublic.Client/Pages/About.razor +++ b/DeepDrftPublic.Client/Pages/About.razor @@ -1,9 +1,27 @@ @page "/about" @using DeepDrftPublic.Client.Controls +@implements IAsyncDisposable +@inject IJSRuntime JsRuntime The Collective - Deep DRFT -@* ── HERO (split 50/50) — reuses the .hero-* type classes with About's own words. +@* ────────────────────────────────────────────────────────────────────────────── + THE LINER NOTES — a numbered three-movement editorial essay. + + This page deliberately does NOT reuse Home's section grammar (centred dividers, + symmetric 4/8 splits, the medium-card grid). Its backbone is a persistent left + "rail" — a continuous vertical hairline (the narrative spine) carrying oversized + Bodoni movement numerals (01/02/03) and mono marginalia — with the content column + running asymmetrically to its right. Movement boundaries are rendered as a + self-contained SVG waveform stroke (the DeepDrft visualizer motif, hand-authored + here — NOT the live WaveformVisualizer component). + + The numeral active-highlight (green on the movement in view) is progressive + enhancement via IntersectionObserver: without JS the numerals still render + statically in low-opacity navy. See Interop/about/about-rail.ts. + ────────────────────────────────────────────────────────────────────────────── *@ + +@* ── HERO — the page opener. Reuses the .hero-* type scale with About's own words. NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
@@ -18,7 +36,7 @@ - @* IMG SLOT A — hero duo portrait. Reuses the committed duo pair as interim. *@ + @* IMG SLOT A — hero duo portrait, inset within the content column. *@
- - @* IMG SLOT B — full-bleed band under the hero, bw+colour crossfade pair. *@ -
-@* ════════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════════ *@ -
-
-
The People
-
-
- -@* People intro — two-column section: label + serif title left, prose right. *@ -
-
- - -
The Collective
-

Two of Us,
No Fixed
Roles

- - -
-

- We met trading synthesizers and found out we were seeking the same thing. Two of us, no fixed roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the tools when the tools don't exist yet. -

-
- - +@* ════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════ *@ +
+ - @* Member bio pair — two cards side by side; each composes with the body absent - (Khabran ships with an empty body slot, same null-renders-nothing discipline - as ReleaseDescription). *@ - - @foreach (var member in _members) - { - -
+
+ @* Waveform movement divider — a static SVG oscillation stroke carrying the + movement tag. The folded-in D3 signature motif. *@ +
+ + The People +
+ + @* People intro — prose hangs at the rail's left edge; the sharp line breaks + left into the margin at large serif scale. *@ +
+
The Collective
+

Two of Us, No Fixed Roles

+

+ We met trading synthesizers and found out we were seeking the same thing. Two of us, no fixed roles — we both write, arrange, produce, mix, record in the field, build the visuals, and make the tools when the tools don't exist yet. +

+
+ + @* Member bio pair — framed portrait insets with rail-side captions. Each + composes with the body absent (Khabran ships with an empty body slot, the + same null-renders-nothing discipline as ReleaseDescription). *@ +
+ @foreach (var member in _members) + { +
@if (member.PortraitImage1 is not null) { @@ -100,170 +106,150 @@ }
+
@member.Name · @member.Role
@member.Name
-
@member.Role
@if (!string.IsNullOrWhiteSpace(member.Bio)) {

@member.Bio

}
-
- - } - -
- -@* ════════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════════ *@ -
-
-
The Process
-
+ + } +
+ -@* Dark feature band — gear-stage cards. The dark ground carries the analytical register. *@ -
-
How It's Made
-

- Digital, Analog,
Whatever Moves -

- -

- It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves the room. The soul in this music is designed, not extracted; assembled, not distilled. -

- -
-
-
- -
-
Sketch
-
A loop starts on the Force or the MPC, hands on the pads. The idea has to survive first contact before anything else gets built around it.
-
-
-
- -
-
Arrange
-
Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped wherever it wants to go — we follow the take, not the template.
-
-
-
- -
-
Studio
-
A deep bench of synths, drum machines, and pedals; digital and analog, hard and soft, some of it built by hand. If the sound we need doesn't exist yet, we make the thing that makes it.
-
-
-
- -
-
Live Rig
-
No laptop, no safety net. A full spread of hardware patched together and played 100% live — sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the night that doesn't repeat.
-
+@* ════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════ *@ +
+ -
-@* IMG SLOT D — hands-on-gear band, the literal proof-of-effort image. *@ -
- -
+
+
+ + The Process +
-@* ════════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════════ *@ -
-
-
The Product
-
+ @* Dark band — gear-stage cards. The navy ground carries the analytical register. *@ +
+
How It's Made
+

Digital, Analog, Whatever Moves

+ +

+ It doesn't matter how — digital or analog, hard or soft, bought or built — as long as it moves the room. The soul in this music is designed, not extracted; assembled, not distilled. +

+ +
+
+
+ +
+
Sketch
+
A loop starts on the Force or the MPC, hands on the pads. The idea has to survive first contact before anything else gets built around it.
+
+
+
+ +
+
Arrange
+
Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped wherever it wants to go — we follow the take, not the template.
+
+
+
+ +
+
Studio
+
A deep bench of synths, drum machines, and pedals; digital and analog, hard and soft, some of it built by hand. If the sound we need doesn't exist yet, we make the thing that makes it.
+
+
+
+ +
+
Live Rig
+
No laptop, no safety net. A full spread of hardware patched together and played 100% live — sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the night that doesn't repeat.
+
+
+
+ + @* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image, + captioned in the rail rather than run full-bleed. *@ +
+ +
the live rig
+
+
-@* Product intro — two-column section framing the catalogue as evidence. *@ -
-
- - -
The Output
-

Classics,
with a
Twist

- - -
-

- Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club. -

-
- - +@* ════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════ *@ +
+ - @* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. *@ -
- -
-
-
-
-
Studio
-
Cuts
-
Studio work, composed and finished.
-
- - -
-
-
-
-
Live
-
Sessions
-
Live, caught once, never the same twice.
-
- - -
-
-
-
-
DJ Set
-
Mixes
-
Uninterrupted sets, start to finish.
-
- +
+
+ + The Product +
+ +
+
The Output
+

Classics, with a Twist

+

+ Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club. +

+
+ + @* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. + A stacked editorial list rather than Home's card grid. *@ + + + @* The live turn — "on the street, in the swamp": the identity beyond releases. + A left-breaking pull-quote at large serif scale. *@ +
+ Beyond the Releases +

+ But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a generator, and a bunch of good vibes. +

+
-
- -@* The live turn — "on the street, in the swamp": the identity beyond the releases. *@ -
- - -
-
Beyond the Releases
-

On the Street,
in the Swamp

-

- But that's just the releases. We're also out there — on the street, in the swamp, with a PA, a generator, and a bunch of good vibes. -

-
- - - -
- -
- -
@* ── Closing CTA into the catalogue ── *@ @@ -278,23 +264,78 @@ -@* IMG SLOT E — closing atmosphere band. *@ -
- -
- @code { private string AnimClass => RendererInfo.IsInteractive ? string.Empty : "fade-up"; + // A static sine path for the movement-divider waveform stroke. Authored as plain + // SVG markup — independent of the live WaveformVisualizer component. The viewBox is + // 1200×40; the curve oscillates around the vertical midline (y=20). + private static readonly string WavePath = BuildWavePath(); + + private ElementReference _movementOne; + private ElementReference _movementTwo; + private ElementReference _movementThree; + private IJSObjectReference? _railModule; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (!firstRender || !RendererInfo.IsInteractive) + { + return; + } + + try + { + // Progressive enhancement only: lights the active movement's numeral green + // as it scrolls into view. Numerals render statically without this. + _railModule = await JsRuntime.InvokeAsync( + "import", "./js/about/about-rail.js"); + await _railModule.InvokeVoidAsync("observe", _movementOne, _movementTwo, _movementThree); + } + catch (JSException) + { + // Module failed to load — numerals stay statically navy. Nothing actionable. + _railModule = null; + } + } + + public async ValueTask DisposeAsync() + { + if (_railModule is not null) + { + try + { + await _railModule.InvokeVoidAsync("unobserve"); + await _railModule.DisposeAsync(); + } + catch (JSException) + { + // Runtime already gone (navigation/teardown) — nothing to clean up. + } + _railModule = null; + } + } + + // Builds an evaluated-at-compile-time sine path string for the divider stroke. + private static string BuildWavePath() + { + // 8 full cycles across the 1200-wide viewBox, amplitude 14 around midline 20. + const int width = 1200; + const int steps = 96; + const double midline = 20; + const double amplitude = 14; + const double cycles = 8; + + var sb = new System.Text.StringBuilder("M 0 20"); + for (var i = 1; i <= steps; i++) + { + var x = width * (double)i / steps; + var y = midline - amplitude * System.Math.Sin(cycles * 2 * System.Math.PI * i / steps); + sb.Append(System.Globalization.CultureInfo.InvariantCulture, $" L {x:0.##} {y:0.##}"); + } + return sb.ToString(); + } + // Member bios. Khabran's body is an intentional empty slot — the card composes // without it (graceful degrade). Daniel's copy is verbatim per spec COPY C, // including the two typos he chose to keep ("embarked in", "metalhead at from"). diff --git a/DeepDrftPublic.Client/Pages/About.razor.css b/DeepDrftPublic.Client/Pages/About.razor.css index 5415e80..cebd013 100644 --- a/DeepDrftPublic.Client/Pages/About.razor.css +++ b/DeepDrftPublic.Client/Pages/About.razor.css @@ -1,12 +1,16 @@ -/* About.razor scoped styles. +/* About.razor scoped styles — "The Liner Notes". - The About page is built entirely in the Home page's visual language. Those section - primitives (.hero-*, .section, .section-divider, .section-dark, .section-split, - .medium-*, .cta-*, .feature-*) live SCOPED in Home.razor.css and DeepDrftHero.razor.css - — they are not in the global stylesheet, so Blazor CSS isolation will not share them - with this component. The primitives are therefore re-declared here, verbatim from those - sources, so About renders identically without touching Home's rendering surface. The only - genuinely new styling is the two bio-card pieces (.bio-*) at the end. */ + This page diverges from Home by composition, not vocabulary. The backbone is a + persistent left RAIL (a continuous vertical hairline carrying oversized Bodoni + movement numerals + mono marginalia) with the content column offset asymmetrically + to its right. Movement boundaries are rendered as a hand-authored SVG waveform + stroke (the D3 motif folded in). Palette tokens, type stack, the dark Process band, + the feature-card grid, the CTA, and the bw↔colour ParallaxImage crossfade are all + reused from the site's existing vocabulary — only the structure is new. + + Home's borrowed primitives that this redesign supersedes (.section-divider / + .divider-line centred rules, the symmetric .section-header-grid 4/8 split, the + .medium-card grid, .section-split) are intentionally NOT re-declared here. */ /* ── Animations (from DeepDrftHero.razor.css) ── */ @keyframes fade-up { @@ -19,7 +23,7 @@ animation: fade-up 0.8s ease forwards; } -/* ── HERO (from Home.razor.css + DeepDrftHero.razor.css) ── */ +/* ── HERO — the page opener (type scale from Home's .hero-*) ── */ .hero { min-height: 100vh; overflow: hidden; @@ -96,43 +100,252 @@ animation-delay: 0.44s; } -/* ── DIVIDER (from Home.razor.css) ── */ -.section-divider { - display: flex; - align-items: center; - gap: 2rem; - padding: 2rem 3rem; +/* ══════════════════ THE RAIL + SPINE — the signature device ══════════════════ + + Each movement is a two-column grid: a narrow rail column on the left carrying the + continuous vertical hairline (the narrative spine), the oversized Bodoni numeral, + and the mono marginalia; the content column to its right. The rail column is + ~14% of the page on desktop and collapses to an inline header on mobile. */ +.movement { + display: grid; + grid-template-columns: minmax(140px, 14%) minmax(0, 1fr); background: var(--deepdrft-white); + align-items: start; } -.divider-line { - flex: 1; - height: 1px; +.rail { + position: relative; + align-self: stretch; + padding: 4rem 0 4rem 3rem; +} + +/* The continuous vertical hairline — Home's horizontal .divider-line reoriented, + the same --deepdrft-border token, running the length of the movement. */ +.rail-line { + position: absolute; + top: 0; + bottom: 0; + left: 3rem; + width: 1px; background: var(--deepdrft-border); } -.divider-tag { +/* Oversized Bodoni movement numeral. Sticks near the top of the viewport as the + movement scrolls, low-opacity navy by default; the active movement lights green + (toggled by the IntersectionObserver — see Interop/about/about-rail.ts). */ +.rail-numeral { + position: sticky; + top: 6rem; + font-family: var(--deepdrft-font-display); + font-size: clamp(5rem, 10vw, 9rem); + font-weight: 300; + line-height: 1; + letter-spacing: -0.04em; + color: var(--deepdrft-navy); + opacity: 0.14; + padding-left: 1.4rem; + transition: color 0.5s ease, opacity 0.5s ease; +} + +.movement.is-active .rail-numeral { + color: var(--deepdrft-green-accent); + opacity: 0.95; +} + +/* Mono marginalia — a rotated caption set against the spine, the way a magazine + annotates a photo. Reuses the mono eyebrow idiom. */ +.rail-margin { + position: sticky; + top: 16rem; + margin-top: 2rem; + padding-left: 1.4rem; font-family: var(--deepdrft-font-mono); - font-size: 0.6rem; - letter-spacing: 0.25em; - color: var(--deepdrft-muted); + font-size: 0.58rem; + letter-spacing: 0.24em; text-transform: uppercase; + color: var(--deepdrft-muted); + writing-mode: vertical-rl; + transform: rotate(180deg); + transform-origin: center; + height: 12rem; +} + +/* ── The content column — asymmetric, left-anchored prose ── */ +.movement-content { + padding: 4rem 3rem 5rem 1rem; + min-width: 0; +} + +/* ══════════════════ WAVEFORM MOVEMENT DIVIDER (D3 motif) ══════════════════ + A self-contained SVG oscillation stroke with the mono movement tag sitting on it. + Replaces Home's flat .divider-line rule between movements. */ +.wave-divider { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 4rem; +} + +.wave-stroke { + flex: 1; + height: 28px; + min-width: 0; + overflow: visible; +} + +.wave-stroke path { + fill: none; + stroke: var(--deepdrft-green-accent); + stroke-width: 1.4; + opacity: 0.7; + vector-effect: non-scaling-stroke; +} + +.wave-tag { + flex-shrink: 0; + font-family: var(--deepdrft-font-mono); + font-size: 0.62rem; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--deepdrft-navy); white-space: nowrap; } -/* ── SECTION (from Home.razor.css) ── */ -.section { - padding: 7rem 3rem; - background: var(--deepdrft-white); +/* ── Movement intro — prose hanging at a consistent left edge ── */ +.movement-intro { + max-width: 60ch; + margin-bottom: 5rem; } -@media (min-width: 960px) { - .section-header-grid { - align-items: end; - } +.movement-label { + font-family: var(--deepdrft-font-mono); + font-size: 0.62rem; + letter-spacing: 0.28em; + color: var(--deepdrft-green-accent); + text-transform: uppercase; + margin-bottom: 1.4rem; } -.section-label { +.movement-title { + font-family: var(--deepdrft-font-display); + font-size: clamp(2.6rem, 5vw, 4.2rem); + font-weight: 300; + line-height: 1.02; + color: var(--deepdrft-navy); + margin-bottom: 2rem; +} + +.movement-title em { + font-style: italic; + color: var(--deepdrft-green); +} + +.movement-prose { + font-family: var(--deepdrft-font-body); + font-size: 0.95rem; + line-height: 1.85; + color: var(--deepdrft-navy); + opacity: 0.72; + max-width: 56ch; +} + +/* ── Member bio pair — framed portrait insets with rail-side captions ── + Assembled from the existing type tokens (display serif name, mono caption/role, + body prose). The cards are offset/staggered rather than an even grid. */ +.bio-pair { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3rem; + align-items: start; +} + +/* Stagger the second card downward so the pair reads as editorial layout, not a + symmetric grid. */ +.bio-card:nth-child(2) { + margin-top: 4rem; +} + +.bio-card { + display: flex; + flex-direction: column; +} + +.bio-portrait { + width: 100%; + overflow: hidden; + border: 1px solid var(--deepdrft-border); +} + +/* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in + the navy family with the site's portrait aspect precedent (1365×2048). */ +.bio-portrait-placeholder { + width: 100%; + aspect-ratio: 1365 / 2048; + max-height: 56vh; + background: + linear-gradient(160deg, + color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%, + color-mix(in srgb, var(--deepdrft-navy) 16%, var(--deepdrft-white)) 100%); +} + +/* The marginalia caption — mono, sits directly under the framed portrait. */ +.bio-caption { + font-family: var(--deepdrft-font-mono); + font-size: 0.56rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-muted); + margin-top: 0.9rem; + padding-left: 0.1rem; +} + +.bio-meta { + padding-top: 1.4rem; +} + +.bio-name { + font-family: var(--deepdrft-font-display); + font-size: 2rem; + font-weight: 300; + line-height: 1.1; + color: var(--deepdrft-navy); + margin-bottom: 1rem; +} + +.bio-body { + font-family: var(--deepdrft-font-body); + font-size: 0.85rem; + line-height: 1.8; + color: var(--deepdrft-navy); + opacity: 0.7; +} + +/* ── Inset framed figure (gear shot) with rail-side caption ── */ +.movement-figure { + margin: 5rem 0 0; +} + +.movement-figure ::deep .parallax-window { + border: 1px solid var(--deepdrft-border); +} + +.figure-caption { + font-family: var(--deepdrft-font-mono); + font-size: 0.56rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-muted); + margin-top: 0.9rem; +} + +/* ══════════════════ THE PROCESS — dark band (reused vocabulary) ══════════════════ */ +.process-band { + background: var(--deepdrft-navy); + padding: 4.5rem 3rem; + color: var(--deepdrft-white); +} + +.process-label { font-family: var(--deepdrft-font-mono); font-size: 0.62rem; letter-spacing: 0.28em; @@ -141,167 +354,20 @@ margin-bottom: 1.2rem; } -.section-title { +.process-title { font-family: var(--deepdrft-font-display); - font-size: clamp(2.8rem, 5vw, 4.5rem); + font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 300; - line-height: 1; - color: var(--deepdrft-navy); -} - -.section-title em { - font-style: italic; - color: var(--deepdrft-green); -} - -/* ::deep required: the class is on the MudItem-rendered div, which does not carry - this component's scope attribute. */ -.section-header-grid ::deep .section-body-item { - display: flex; - align-items: center; -} - -.section-body { - display: flex; - max-width: 560px; - margin: auto; - align-content: center; - justify-content: center; -} - -.section-body p { - display: flex; - font-family: var(--deepdrft-font-body); - font-size: 0.9rem; - line-height: 1.8; - color: var(--deepdrft-navy); - opacity: 0.65; - max-width: 52ch; -} - -/* ── MEDIUM GRID (from Home.razor.css) ── */ -.medium-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 56px; - margin-bottom: 4rem; -} - -@media (max-width: 959px) { - .medium-grid { grid-template-columns: repeat(2, 1fr); } - .medium-card:last-child { grid-column: 1 / -1; } -} - -@media (max-width: 599px) { - .medium-grid { grid-template-columns: 1fr; } - .medium-card:last-child { grid-column: auto; } -} - -.medium-card { - background: var(--deepdrft-white); - border: 1px solid var(--deepdrft-border); - cursor: pointer; - overflow: hidden; - text-decoration: none; - display: block; - position: relative; - max-width: 380px; - margin: 0 auto; -} - -.medium-card::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--deepdrft-green-accent); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s; - z-index: 1; -} - -.medium-card:hover::after { transform: scaleX(1); } - -.medium-image { - position: relative; - width: 100%; - aspect-ratio: 4 / 3; - background-size: cover; - background-position: center; - transition: transform 0.5s ease; -} - -.medium-card:hover .medium-image { transform: scale(1.05); } - -.medium-scrim { - position: absolute; - inset: 0; - background: linear-gradient(to bottom, - rgba(17, 35, 56, 0.0) 40%, - rgba(17, 35, 56, 0.35) 100%); - transition: opacity 0.3s; - opacity: 0.7; -} - -.medium-card:hover .medium-scrim { opacity: 1; } - -.medium-body { - padding: 2rem 1.5rem; - position: relative; -} - -.medium-type { - font-family: var(--deepdrft-font-mono); - font-size: 0.58rem; - letter-spacing: 0.2em; - color: var(--deepdrft-muted); - text-transform: uppercase; - margin-bottom: 0.6rem; -} - -.medium-name { - font-family: var(--deepdrft-font-display); - font-size: 1.6rem; - font-weight: 400; - color: var(--deepdrft-navy); - margin-bottom: 0.75rem; - line-height: 1.1; -} - -.medium-desc { - font-family: var(--deepdrft-font-body); - font-size: 0.82rem; - line-height: 1.65; - color: var(--deepdrft-navy); - opacity: 0.6; -} - -/* ── DARK FEATURE SECTION (from Home.razor.css) ── */ -.section-dark { - background: var(--deepdrft-navy); - padding: 7rem 3rem; + line-height: 1.02; color: var(--deepdrft-white); } -.section-label-dark { - color: var(--deepdrft-green-accent); -} - -.section-title-dark { - color: var(--deepdrft-white); - margin-top: 0.5rem; -} - -.section-title-dark em { +.process-title em { font-style: italic; color: var(--deepdrft-green-accent); } -/* Process standfirst (COPY D-intro) — sits between the dark title and the gear cards. */ -.section-dark-standfirst { +.process-standfirst { font-family: var(--deepdrft-font-body); font-size: 0.92rem; line-height: 1.8; @@ -312,35 +378,26 @@ .features-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid rgba(250, 250, 248, 0.08); - margin-top: 4rem; + margin-top: 3.5rem; } .feature-card { padding: 2.5rem; border-right: 1px solid rgba(250, 250, 248, 0.08); + border-bottom: 1px solid rgba(250, 250, 248, 0.08); transition: background 0.3s; } -.feature-card:last-child { border-right: none; } +/* 2×2 grid: kill the right border on the right column and the bottom border on the + last row so the outer frame stays clean. */ +.feature-card:nth-child(2n) { border-right: none; } +.feature-card:nth-child(n + 3) { border-bottom: none; } .feature-card:hover { background: rgba(250, 250, 248, 0.04); } -@media (max-width: 960px) { - .features-grid { grid-template-columns: repeat(2, 1fr); } - .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); } - .feature-card:last-child { border-bottom: none; } - .section-dark-standfirst { font-size: 0.88rem; } -} - -@media (max-width: 599px) { - .features-grid { grid-template-columns: 1fr; } - .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); } - .feature-card:last-child { border-bottom: none; } -} - .feature-icon { width: 2.5rem; height: 2.5rem; @@ -375,83 +432,76 @@ color: rgba(250, 250, 248, 0.45); } -/* ── SPLIT (from Home.razor.css) ── */ -.section-split { - min-height: 60vh; +/* ══════════════════ THE PRODUCT — medium list + pull-quote ══════════════════ + A stacked editorial definition list, not Home's card grid. */ +.medium-list { + list-style: none; + margin: 0 0 5rem; + padding: 0; + border-top: 1px solid var(--deepdrft-border); + max-width: 60ch; } -@media (max-width: 960px) { - .section-split { min-height: auto; } +.medium-row { + border-bottom: 1px solid var(--deepdrft-border); } -.split-left { - background: var(--deepdrft-green); - padding: 6rem 4rem; +.medium-row a { display: flex; - flex-direction: column; - justify-content: center; - position: relative; - overflow: hidden; - height: 100%; + align-items: baseline; + gap: 1.5rem; + padding: 1.6rem 0.4rem; + text-decoration: none; + transition: padding-left 0.25s ease; } -.split-left::before { - content: ''; - position: absolute; - top: -100px; - right: -100px; - width: 400px; - height: 400px; - border-radius: 50%; - background: rgba(61, 122, 104, 0.3); -} +.medium-row a:hover { padding-left: 1.2rem; } -.split-right { - display: flex; - flex-direction: column; - justify-content: center; - background: var(--deepdrft-white); - height: 100%; -} - -.split-eyebrow { - font-family: var(--deepdrft-font-mono); - font-size: 0.62rem; - letter-spacing: 0.28em; - color: rgba(250, 250, 248, 0.6); - text-transform: uppercase; - margin-bottom: 1.5rem; - position: relative; - z-index: 1; -} - -.split-title { +.medium-row-name { + flex-shrink: 0; font-family: var(--deepdrft-font-display); - font-size: clamp(2.5rem, 4vw, 3.8rem); - font-weight: 300; - color: var(--deepdrft-white); - line-height: 1.05; - margin-bottom: 1.5rem; - position: relative; - z-index: 1; + font-size: 1.5rem; + font-weight: 400; + color: var(--deepdrft-navy); + min-width: 7rem; } -.split-title em { - font-style: italic; - opacity: 0.65; -} +.medium-row a:hover .medium-row-name { color: var(--deepdrft-green-accent); } -.split-body { +.medium-row-desc { font-family: var(--deepdrft-font-body); - font-size: 0.88rem; - line-height: 1.8; - color: rgba(250, 250, 248, 0.6); - max-width: 42ch; - position: relative; - z-index: 1; + font-size: 0.85rem; + line-height: 1.6; + color: var(--deepdrft-navy); + opacity: 0.6; } -/* ── CTA BANNER (from Home.razor.css) ── */ +/* The sharp pull-quote — breaks LEFT into the rail margin at large serif scale. */ +.pull-quote { + margin: 0; + margin-left: -7rem; + max-width: 22ch; +} + +.pull-eyebrow { + display: block; + font-family: var(--deepdrft-font-mono); + font-size: 0.6rem; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--deepdrft-green-accent); + margin-bottom: 1.4rem; +} + +.pull-quote p { + font-family: var(--deepdrft-font-display); + font-size: clamp(1.8rem, 3.4vw, 2.9rem); + font-weight: 300; + line-height: 1.15; + color: var(--deepdrft-navy); +} + +/* ══════════════════ CLOSING CTA (reused vocabulary) ══════════════════ */ .cta-banner { background: var(--deepdrft-navy); padding: 6rem 3rem; @@ -552,7 +602,83 @@ .btn-outline-white:hover { border-color: var(--deepdrft-white); } +/* ══════════════════ RESPONSIVE COLLAPSE ══════════════════ + + Below 960px the rail collapses: the spine + vertical numeral can't survive a + narrow viewport, so the numeral goes inline above each movement (horizontal, + left-aligned) and the marginalia folds away. Content goes single-column. */ +@media (max-width: 960px) { + .movement { + display: block; + } + + .rail { + padding: 2.5rem 1.5rem 0; + } + + /* Spine becomes a short horizontal accent under the inline numeral. */ + .rail-line { + position: static; + width: 3rem; + height: 2px; + margin-top: 1rem; + background: var(--deepdrft-border); + } + + .rail-numeral { + position: static; + opacity: 0.18; + padding-left: 0; + font-size: clamp(3.5rem, 16vw, 5.5rem); + } + + .movement.is-active .rail-numeral { + opacity: 0.95; + } + + /* Marginalia is editorial chrome the narrow column can't host — drop it. */ + .rail-margin { + display: none; + } + + .movement-content { + padding: 2.5rem 1.5rem 3.5rem; + } + + .process-band { padding: 3.5rem 1.5rem; } + + /* Pull-quote can't break into a rail that no longer exists. */ + .pull-quote { + margin-left: 0; + max-width: 100%; + } +} + +@media (max-width: 720px) { + /* Bio pair stacks; drop the stagger so cards align cleanly. */ + .bio-pair { + grid-template-columns: 1fr; + gap: 3.5rem; + } + + .bio-card:nth-child(2) { + margin-top: 0; + } +} + @media (max-width: 599px) { + .features-grid { grid-template-columns: 1fr; } + .feature-card { + border-right: none; + border-bottom: 1px solid rgba(250, 250, 248, 0.08); + } + .feature-card:last-child { border-bottom: none; } + + .medium-row a { + flex-direction: column; + gap: 0.4rem; + } + .cta-banner { flex-direction: column; align-items: flex-start; @@ -576,63 +702,3 @@ right: -0.5rem; } } - -/* ── BIO CARDS (new — the only bespoke styling on About) ── - Assembled from the existing type tokens (display serif for the name, mono for - the role line, body for the bio), so they sit inside the established vocabulary - rather than inventing a new one. */ -.bio-card { - height: 100%; - background: var(--deepdrft-white); - border: 1px solid var(--deepdrft-border); - display: flex; - flex-direction: column; -} - -.bio-portrait { - width: 100%; - overflow: hidden; -} - -/* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in - the navy family with the site's aspect precedent (1365×2048 portrait). */ -.bio-portrait-placeholder { - width: 100%; - aspect-ratio: 1365 / 2048; - max-height: 60vh; - background: - linear-gradient(160deg, - color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%, - color-mix(in srgb, var(--deepdrft-navy) 16%, var(--deepdrft-white)) 100%); - border-bottom: 1px solid var(--deepdrft-border); -} - -.bio-meta { - padding: 2.25rem 2rem 2.5rem; -} - -.bio-name { - font-family: var(--deepdrft-font-display); - font-size: 2rem; - font-weight: 300; - line-height: 1.1; - color: var(--deepdrft-navy); - margin-bottom: 0.6rem; -} - -.bio-role { - font-family: var(--deepdrft-font-mono); - font-size: 0.6rem; - letter-spacing: 0.22em; - text-transform: uppercase; - color: var(--deepdrft-green-accent); - margin-bottom: 1.4rem; -} - -.bio-body { - font-family: var(--deepdrft-font-body); - font-size: 0.85rem; - line-height: 1.8; - color: var(--deepdrft-navy); - opacity: 0.7; -} diff --git a/DeepDrftPublic/Interop/about/about-rail.ts b/DeepDrftPublic/Interop/about/about-rail.ts new file mode 100644 index 0000000..ca5782a --- /dev/null +++ b/DeepDrftPublic/Interop/about/about-rail.ts @@ -0,0 +1,65 @@ +/** + * About-page rail active-numeral highlight. + * + * The Liner Notes layout carries one oversized Bodoni numeral per movement in a + * persistent left rail. This module lights the numeral of whichever movement is + * currently in view by toggling `.is-active` on the movement element; the CSS does + * the colour transition. Pure progressive enhancement — the numerals render + * statically in low-opacity navy without this, so a load failure or a no-JS client + * degrades to a still-legible page. + * + * One observer at a time, re-pointed on each `observe` call. The active movement is + * the one nearest the top of the viewport among those currently intersecting, which + * keeps a single numeral lit during the scroll rather than flickering between + * adjacent movements at the boundary. + */ + +let observer: IntersectionObserver | null = null; +let observed: Element[] = []; + +function refreshActive(): void { + let best: Element | null = null; + let bestTop = Number.POSITIVE_INFINITY; + + for (const el of observed) { + const rect = el.getBoundingClientRect(); + const viewportH = window.innerHeight || document.documentElement.clientHeight; + // In view at all (any overlap with the viewport). + const inView = rect.bottom > 0 && rect.top < viewportH; + if (!inView) continue; + // Prefer the movement whose top is closest to (but not far below) the fold. + const distance = Math.abs(rect.top); + if (distance < bestTop) { + bestTop = distance; + best = el; + } + } + + for (const el of observed) { + el.classList.toggle('is-active', el === best); + } +} + +export function observe(...elements: Element[]): void { + unobserve(); + observed = elements.filter(Boolean); + if (observed.length === 0) return; + + // IntersectionObserver only tells us *that* visibility changed; the actual + // "which is nearest the fold" decision is recomputed from live rects so the + // choice stays correct mid-scroll. + observer = new IntersectionObserver(() => refreshActive(), { + threshold: [0, 0.25, 0.5, 0.75, 1], + }); + for (const el of observed) observer.observe(el); + + // Seed once so the first movement lights before any scroll. + refreshActive(); +} + +export function unobserve(): void { + observer?.disconnect(); + observer = null; + for (const el of observed) el.classList.remove('is-active'); + observed = []; +}