daniel-c-harvey
a210b2ded7
About reuses Home's section grammar in Home's order. New product note offers three narrative-backbone directions (Liner Notes / Contact Sheet / Offset Ledger) within brand guardrails, with a recommendation. Awaiting Daniel's pick.
389 lines
24 KiB
Markdown
389 lines
24 KiB
Markdown
# About Page — DeepDrft public site — Design Spec
|
||
|
||
Status: **APPROVED for implementation** — structure + copy signed off 2026-06-17 (Phase 12). Author:
|
||
product-designer. Date: 2026-06-17. Implementer: staff-engineer. Surface: **public site only**
|
||
(`DeepDrftPublic` / `DeepDrftPublic.Client`).
|
||
|
||
> **Visual-distinction follow-up (2026-06-17):** the page as built reads too much like Home (it reuses
|
||
> Home's section primitives in Home's order). Structure + copy below are unaffected; the *visual
|
||
> treatment* is being revisited. See `about-page-distinction.md` for 2–3 proposed directions and a
|
||
> recommendation — **awaiting Daniel's pick.**
|
||
|
||
> **Approval (2026-06-17):** Daniel signed off the structure and all copy. The spec is
|
||
> implementation-ready. All COPY blocks (A–H, D-intro) are **APPROVED** — D (Process card bodies) is
|
||
> approved *provisionally*: Daniel's word was "it's fine for now, we can change that wording later,"
|
||
> so the body copy may still be reworded before or after build. The **only remaining open item is the
|
||
> final photo files** (§8, item 2) — Daniel is still sorting them; every image slot stays a
|
||
> graceful-degrade placeholder until files land. Khabran's bio is resolved: build the card now with an
|
||
> empty/placeholder body slot, Daniel drops his text in later.
|
||
|
||
Cross-references: `Pages/Home.razor` + `Pages/Home.razor.css` (the visual language this page mirrors
|
||
— inspected, not invented), `Controls/DeepDrftHero.razor` (hero type treatment),
|
||
`DeepDrftShared.Client/Components/ParallaxImage.razor` (the full-bleed image idiom), `PLAN.md §12`
|
||
(the concise phase entry). Plan only — no code edits made by this doc.
|
||
|
||
---
|
||
|
||
## 0. Goal and shape
|
||
|
||
A real About page with three movements — **the People**, **the Process**, **the Product** — with
|
||
ethos / pathos / logos woven through the prose rather than bolted on as a labelled block. It reads
|
||
as a continuous editorial scroll in the **exact visual language of the Home page**, not a new look.
|
||
|
||
The strategic intent (Daniel's framing, paraphrased): the site is *presentation and proof of effort*
|
||
— evidence that real people in the Charleston scene are pushing classic club sounds forward. The
|
||
About page is where that claim is made explicit. It is the page that earns the catalogue.
|
||
|
||
Route: `/about`. Linked from the main menu (`DeepDrftMenu` / `Pages.cs` nav index) and a natural
|
||
target for the Home page's existing copy about the collective.
|
||
|
||
---
|
||
|
||
## 1. The look — mapped to the Home page (inspected, not invented)
|
||
|
||
The Home page (`Pages/Home.razor`) is built from a small, repeating set of section primitives. The
|
||
About page reuses them verbatim so the two pages are visually continuous. Every class below is one
|
||
the Home page already renders (scoped in `Home.razor.css`, mirrored in the global
|
||
`deepdrft-styles.css`). **No new visual vocabulary is proposed** — the only genuinely new styling
|
||
need is two member-bio cards (§4), and even those should be assembled from existing spacing/type
|
||
tokens before any bespoke class is added.
|
||
|
||
The Home primitives, in the order they appear there, and how each maps onto About:
|
||
|
||
| Home primitive | Classes | Role on Home | Reuse on About |
|
||
|---|---|---|---|
|
||
| **Split hero** (50/50 grid) | `.hero`, `.hero-left`, `DeepDrftHero` | Title + NowPlaying panel | The About hero — left column carries the eyebrow + title + standfirst; right column carries the **duo hero portrait** (see §3) |
|
||
| **Full-bleed parallax band** | `<ParallaxImage FullWidth>` | Duo photo under the hero | The duo shot or a hands-on-gear shot as the hero's full-width anchor |
|
||
| **Section divider** | `.section-divider`, `.divider-line`, `.divider-tag` | "The Sound" rule between movements | One divider per movement boundary — `The People` / `The Process` / `The Product` are the three `.divider-tag`s |
|
||
| **Two-column section** | `.section`, `.section-header-grid`, `.section-label`, `.section-title`, `.section-body` | "Music through Every Medium" (label+title left, prose right) | The default body rhythm for each movement — label + serif title on the left (md=4), prose on the right (md=8) |
|
||
| **Dark feature band** | `.section-dark`, `.section-label-dark`, `.section-title-dark`, `.features-grid`, `.feature-card` | "Built for the Committed Listener" | **The Process** gear/method band — the dark ground suits the warehouse/rig material; the `feature-card` grid becomes the gear-stage cards (§5) |
|
||
| **Split section** | `.section-split`, `.split-left`, `.split-right`, `.split-eyebrow`, `.split-title`, `.split-body` | "Where the Holy City Meets the Future" (prose left, parallax portrait right) | The **People** origin/meeting story (prose + a portrait) and the **Product** "on the street, in the swamp" turn |
|
||
| **CTA banner** | `.cta-banner`, `.cta-headline`, `.cta-sub`, `.cta-actions`, `.btn-white`, `.btn-outline-white` | "Ready to Drift Deeper?" | Closing CTA into the catalogue / archive |
|
||
| **Trailing parallax** | `<ParallaxImage>` (`mixer.jpg`) | Closing image | A closing hands-on-gear band |
|
||
|
||
**Type and palette** are inherited automatically — these classes already encode the Bodoni
|
||
Moda / Cormorant / DM Sans stack and the light/dark palettes. `<em>` inside `.section-title` /
|
||
`.split-title` / `.cta-headline` is the established italic-serif emphasis device (Home uses it on
|
||
*Every*, *Committed Listener*, *Meets the Future*, *Drift*). The About titles should use the same
|
||
device on one word per title, not more.
|
||
|
||
**Hero title treatment.** `DeepDrftHero` hard-codes "Deep / DRFT" — do **not** reuse the component
|
||
verbatim for About (it carries the streaming CTA and the home masthead). Instead reuse its **CSS
|
||
classes** (`.hero-eyebrow`, `.hero-title`, `.hero-subtitle`, `.hero-desc`) directly in the About
|
||
hero markup so the type scale matches, with About's own words. (The `@AnimClass` fade-up-on-prerender
|
||
trick in `DeepDrftHero` is worth copying for the eyebrow/title if Daniel wants the same entrance.)
|
||
|
||
---
|
||
|
||
## 2. Page structure and section order
|
||
|
||
The scroll, top to bottom. Movements are bounded by `.section-divider` tags so the three-movement
|
||
structure is legible without a heading that says "Movement One."
|
||
|
||
```
|
||
┌─ HERO (split 50/50) ──────────────────────────────────────────┐
|
||
│ left: eyebrow "Charleston, South Carolina" │
|
||
│ title "The <em>Collective</em>" │
|
||
│ standfirst (the ethos line, condensed) │
|
||
│ right: DUO HERO PORTRAIT [IMG SLOT A — likely hero] │
|
||
├─ full-bleed parallax band [IMG SLOT B — duo or gear] ─────────┤
|
||
│ │
|
||
│ ── divider: "The People" ── │
|
||
│ SECTION (two-col): label "The Collective" + title; │
|
||
│ prose: how they met / shared synths / shared taste │
|
||
│ MEMBER BIO PAIR (two cards): [IMG SLOT C1 — Khabran] │
|
||
│ [IMG SLOT C2 — Daniel] │
|
||
│ each: portrait + name + role line + bio (drop-in slot) │
|
||
│ SPLIT section (origin/meeting story + portrait) — optional │
|
||
│ │
|
||
│ ── divider: "The Process" ── │
|
||
│ SECTION-DARK: label "How It's Made" + title; │
|
||
│ gear-stage cards (feature-grid): │
|
||
│ Sketch → Arrange → Studio → Live Rig │
|
||
│ full-bleed parallax band [IMG SLOT D — hands on gear] │
|
||
│ │
|
||
│ ── divider: "The Product" ── │
|
||
│ SECTION (two-col): label "The Output" + title; │
|
||
│ prose: the catalogue as evidence │
|
||
│ MEDIUM TRIPTYCH (optional reuse of Home's medium-card grid): │
|
||
│ CUTS / SESSIONS / MIXES — brief frame each │
|
||
│ SPLIT section: "...on the street, in the swamp" — live │
|
||
│ identity beyond the releases │
|
||
│ │
|
||
│ CTA banner: into the archive / catalogue │
|
||
│ trailing parallax [IMG SLOT E — gear/atmosphere] │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Why this order.** Ethos / pathos / logos are not three sections — they are three registers carried
|
||
*through* the three movements:
|
||
|
||
- **The People** carries the **pathos** — heart and soul, the metalhead-at-heart, music for strife
|
||
and celebration, two people who met over synthesizers.
|
||
- **The Process** carries the **logos** — the gear, the method, "science and math is just as
|
||
important as beauty," the soul that is *designed, not extracted*. The dark band's analytical feel
|
||
fits this register.
|
||
- **The Product** carries the **ethos** — the claim and the proof: classics with a twist, the
|
||
catalogue as evidence, the collective's place in the Charleston scene, and the live identity
|
||
("on the street, in the swamp").
|
||
|
||
The triad is woven, not labelled. No section is titled "Our Ethos."
|
||
|
||
---
|
||
|
||
## 3. The hero
|
||
|
||
Mirror Home's `.hero` split.
|
||
|
||
- **Left (`md=6`, `.hero-left`):** eyebrow + title + standfirst, using the `.hero-*` classes.
|
||
- Eyebrow: `Charleston, South Carolina` (matches Home's hero eyebrow — anchors place immediately).
|
||
- Title: **"The <em>Collective</em>"** (RESOLVED 2026-06-17). The `<em>` device falls on
|
||
*Collective*. This is a label, not body copy.
|
||
- Standfirst: the condensed ethos line — see `[COPY A]` below.
|
||
- **Right (`md=6`):** **IMG SLOT A — the duo hero portrait.** This is the **likely hero image**.
|
||
A duo shot reads "two people, a collective" at first paint. Aspect: landscape or square works in
|
||
the split column; if a strong landscape duo file exists, prefer it. (Home uses
|
||
`dd-duo-hero.jpeg` / `dd-duo-hero-bw.jpeg` as a 2048×1365 landscape pair in the full-bleed band —
|
||
About could either reuse that pair in the band and put a *different* duo shot in the hero column,
|
||
or promote it.)
|
||
|
||
Below the hero, a **full-bleed `<ParallaxImage FullWidth>` band** (IMG SLOT B) exactly as Home does
|
||
under its hero. The bw/colour hover-crossfade pair (`Image1` + `Image2`) is the established idiom —
|
||
supply both a bw and a colour file per slot where available (Home pairs `dd-duo-hero-bw` +
|
||
`dd-duo-hero`).
|
||
|
||
> `[COPY A — APPROVED — standfirst]`
|
||
> Two people, many hats. We bring the heart and soul of Midwest deep house to Charleston — informed
|
||
> by the founders of the style, and promising to push it forward.
|
||
|
||
---
|
||
|
||
## 4. The People
|
||
|
||
**Divider tag:** `The People`.
|
||
|
||
**Intro (two-column `.section`):** `.section-label` "The Collective" + `.section-title` with the
|
||
origin/meeting hook; prose in the right column about how they met (exchanging synthesizers, realising
|
||
they made and enjoyed similar music) and that both members wear every hat — music, sound design,
|
||
arranging, producing, mixing, field recording, visual design, custom sound tools.
|
||
|
||
> `[COPY B — APPROVED — People intro]`
|
||
> 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.
|
||
|
||
### 4.1 Member bio pair
|
||
|
||
Two bio cards, side by side (`MudGrid`, `xs=12 md=6`). **Each member's bio text is a drop-in slot** —
|
||
Daniel supplies the prose per member; the spec reserves the slot and the layout.
|
||
|
||
Per card:
|
||
- **Portrait** — IMG SLOT C1 (Khabran), IMG SLOT C2 (Daniel). Portrait orientation (the existing
|
||
`kp-shoulder-bw.jpeg` is 1365×2048 portrait — that aspect is the precedent). Bw or colour;
|
||
recommend bw to match the editorial restraint of the rest of the site, with an optional
|
||
colour-on-hover via the parallax/crossfade idiom if these become `ParallaxImage`s.
|
||
- **Name** — `Khabran Peters`, `Daniel Harvey` (display serif, e.g. `.section-title` scale stepped
|
||
down, or a dedicated `.bio-name` token if needed).
|
||
- **Role line** — both are "everything," so the role line should state that rather than a single
|
||
title. Candidate label: *Production · Sound Design · Live* (proposed UI label, not copy).
|
||
- **Bio body** — `[BIO SLOT — Daniel supplies per member]`.
|
||
|
||
> **Khabran's bio — RESOLVED (2026-06-17):** build the card now with an empty / placeholder body
|
||
> slot; Daniel drops his text in later. This is not a blocker — **the card must compose correctly
|
||
> with the body absent** (portrait + name + role line still render; the body block simply omitted) —
|
||
> the same null-renders-nothing discipline `ReleaseDescription` uses. Daniel's bio (`[COPY C]`) is
|
||
> approved verbatim below.
|
||
|
||
> `[COPY C — APPROVED — Daniel bio, Daniel's words verbatim; Khabran's body slot ships empty until he supplies it]`
|
||
> Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first.
|
||
> A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the
|
||
> nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno.
|
||
> Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the
|
||
> tools behind the tracks are just as important as the finished sound. To him the science and the
|
||
> math matter as much as the beauty — tension and release, built deliberately.
|
||
|
||
> **Typo flags (Daniel has chosen to KEEP these verbatim for now — text preserved above, not
|
||
> auto-corrected; flag retained so it isn't lost):** (1) "embarked **in** electronic music" reads as
|
||
> a likely slip for "embarked **on**"; (2) "A metalhead **at from** a young age" reads as a likely
|
||
> slip for "A metalhead **from** a young age." Both left as Daniel wrote them — his to revisit if he
|
||
> wants.
|
||
|
||
### 4.2 Optional split — the meeting / origin
|
||
|
||
If the bio pair runs short, a `.section-split` (prose left, portrait right — IMG could reuse the duo
|
||
shot or a second portrait) carries the meeting story and the pathos register: *underground art by
|
||
real people, for real people, for strife and celebration.* Mark optional — fold into the intro prose
|
||
if Daniel prefers a tighter People movement.
|
||
|
||
---
|
||
|
||
## 5. The Process
|
||
|
||
**Divider tag:** `The Process`.
|
||
|
||
Reuse Home's **dark band** (`.section-dark`). `.section-label-dark` "How It's Made" +
|
||
`.section-title-dark` (e.g. *Digital, Analog, <em>Whatever Moves</em>*). The dark ground gives the
|
||
gear/method material its own visual chapter and reads as the analytical (logos) register.
|
||
|
||
**Gear-stage cards** — reuse the `.features-grid` / `.feature-card` structure (Home uses four cards;
|
||
About uses the same count). These are not "features we offer" but **stages of the process**, each
|
||
with a hand-rolled SVG icon in the existing `.feature-icon` slot:
|
||
|
||
1. **Sketch** — start on the Akai Force or MPC Live 3.
|
||
2. **Arrange** — into Ableton, or the whole thing in REAPER (heavy REAPER users).
|
||
3. **Studio** — an arsenal of synths and pedals; digital and analog, hard and soft, some custom-made.
|
||
4. **Live Rig** — a big spread of hardware played 100% live, DAWless, sometimes fully improvised.
|
||
Built for the room / the warehouse.
|
||
|
||
> `[COPY D — APPROVED (provisional) — Process card bodies — wording may be revised later per Daniel]`
|
||
> 1. *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.*
|
||
> 2. *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.*
|
||
> 3. *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.*
|
||
> 4. *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.*
|
||
|
||
> `[COPY D-intro — APPROVED — Process standfirst, optional]`
|
||
> 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.
|
||
|
||
(The "designed, not extracted / assembled, not distilled / constructed, not grown" line is the
|
||
sharpest statement of the logos register and the soul-is-engineered thesis. **RESOLVED
|
||
(2026-06-17): it lands here, in the Process movement** — carried by COPY D-intro above — not the
|
||
hero. It is the *why behind the method* and pays off the dark band.)
|
||
|
||
Below the dark band: a **full-bleed parallax** (IMG SLOT D — **hands-on-gear shot**, the literal
|
||
proof-of-effort image). Home's trailing `mixer.jpg` / `mixer-bw.jpg` pair is the precedent.
|
||
|
||
---
|
||
|
||
## 6. The Product
|
||
|
||
**Divider tag:** `The Product`.
|
||
|
||
Two-column `.section`: `.section-label` "The Output" + `.section-title` (e.g. *Classics, with a
|
||
<em>Twist</em>*); prose framing the catalogue as the evidence — what the site is *for*.
|
||
|
||
> `[COPY E — APPROVED — Product intro]`
|
||
> Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound
|
||
> of the club.
|
||
|
||
### 6.1 Medium triptych — CUTS / SESSIONS / MIXES on About — **RESOLVED: yes, cards**
|
||
|
||
**RESOLVED (2026-06-17, per COPY F approval): use the cards.** The medium triptych reuses Home's
|
||
`.medium-grid` / `.medium-card` grid, with a one-line frame of each medium, each linking to `/cuts`,
|
||
`/sessions`, `/mixes`. The About page is where a newcomer reading top-to-bottom learns *what a
|
||
"Session" is* vs. a "Mix," and the medium cards are the established device for it. Copy is one line
|
||
per medium (a frame, not a re-pitch) so it reads as *definition*, not a second sales section.
|
||
|
||
(Alternative considered and rejected: prose-only mention with no cards. Rejected because it loses the
|
||
concrete payoff at the end of the Product movement and pushes the taxonomy explanation off the page.)
|
||
|
||
> `[COPY F — APPROVED — medium one-liners]`
|
||
> - CUTS — studio work, composed and finished.
|
||
> - SESSIONS — live, caught once, never the same twice.
|
||
> - MIXES — uninterrupted sets, start to finish.
|
||
|
||
### 6.2 The live turn — "on the street, in the swamp"
|
||
|
||
Close the Product movement with a `.section-split` (or a second short band) carrying the live/public
|
||
identity — the part of the collective that isn't a release at all.
|
||
|
||
> `[COPY G — APPROVED — live identity]`
|
||
> 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.
|
||
|
||
---
|
||
|
||
## 7. Closing CTA
|
||
|
||
Reuse Home's `.cta-banner`. Headline with the `<em>` device; one primary + one ghost action.
|
||
|
||
- Primary (`.btn-white`): **Explore the Archive** → `/archive`.
|
||
- Secondary (`.btn-outline-white`): **Hear a Cut** / **Start Streaming** — reuse `StreamNowButton`'s
|
||
behaviour if a streaming CTA is wanted, or link to `/cuts`. (Home's CTA pairs "Explore the Archive"
|
||
+ a live-schedule button; About should point inward to the catalogue, the thing it just argued for.)
|
||
|
||
> `[COPY H — APPROVED — CTA]`
|
||
> Headline: "Hear the <em>Proof</em>" / sub: "The catalogue is the evidence. Start listening."
|
||
|
||
Trailing full-bleed parallax (IMG SLOT E) to close, matching Home's structure.
|
||
|
||
---
|
||
|
||
## 8. Image slots — summary table
|
||
|
||
5 slots specced; 4–5 photos expected. **Daniel is still sorting final files — treat every slot as a
|
||
TODO; do not block on them.** Each slot degrades to the existing fallback treatment (or a bw
|
||
placeholder) until a file lands.
|
||
|
||
| Slot | Section | Role | Orientation / aspect | bw+colour pair? | Likely file |
|
||
|---|---|---|---|---|---|
|
||
| **A** | Hero right column | **Likely HERO** — duo shot, "two people" at first paint | Landscape or square (fits `md=6`) | Optional (hover crossfade) | a duo shot; could promote `dd-duo-2.jpeg` |
|
||
| **B** | Full-bleed band under hero | Atmosphere / duo anchor | Landscape ~2048×1365 (Home precedent) | **Yes** (Home pairs bw+colour) | `dd-duo-hero` pair (or a new duo/gear shot) |
|
||
| **C1** | People — bio card | Khabran portrait | Portrait ~1365×2048 | Optional | Khabran portrait (TODO) |
|
||
| **C2** | People — bio card | Daniel portrait | Portrait ~1365×2048 | Optional | Daniel portrait (TODO) |
|
||
| **D** | Process — band under dark section | **Hands-on-gear** (proof of effort) | Landscape | Yes | a gear shot (or reuse `mixer` pair) |
|
||
| **E** | Closing trailing band | Atmosphere close | Landscape | Yes | gear/atmosphere |
|
||
|
||
If only 4 files arrive, the two safe drops are slot B (the hero column A already carries a duo shot)
|
||
and slot E (the closing band is decorative). The two bio portraits (C1/C2) and one gear shot (D) are
|
||
the load-bearing four.
|
||
|
||
### Image hosting — RESOLVED (2026-06-17)
|
||
|
||
**Static serving under `DeepDrftPublic/wwwroot/img/`, same as the existing Home photos.** The About
|
||
page is not dynamic — these are marketing chrome with the exact lifecycle of the Home photos
|
||
(`dd-duo-hero.jpeg`, `mixer.jpg`, etc.), committed static assets referenced as `img/...`. **No image
|
||
vault** — that machinery is for *content* (release covers, session hero images tied to releases), and
|
||
the About portraits are chrome, not content. Files drop into `wwwroot/img/` and are referenced
|
||
directly.
|
||
|
||
---
|
||
|
||
## 9. Open questions — resolved 2026-06-17
|
||
|
||
The structure and all copy are signed off (Phase 12). **The only remaining open item is item 2 —
|
||
final photo files.** Everything else is resolved.
|
||
|
||
1. **Khabran's bio.** **RESOLVED** — build the card now with an empty/placeholder body slot; Daniel
|
||
drops his text in later. The card composes with the body absent (§4.1). Daniel's bio (`[COPY C]`)
|
||
is approved verbatim.
|
||
2. **Final photos. — STILL OPEN (the one remaining TODO).** 4–5 files still being sorted; every image
|
||
slot stays a graceful-degrade placeholder until files land. Spec is laid out so placement is ready
|
||
when files arrive (§8).
|
||
3. **Image hosting path.** **RESOLVED** — static `DeepDrftPublic/wwwroot/img/`, same as Home photos;
|
||
no image vault (§8).
|
||
4. **CUTS / SESSIONS / MIXES — explained on About?** **RESOLVED** — yes, via the one-line-per-medium
|
||
`.medium-card` grid (§6.1), per COPY F approval.
|
||
5. **Where does the "designed, not extracted" thesis land?** **RESOLVED** — the Process movement,
|
||
carried by COPY D-intro (§5).
|
||
6. **Hero title wording.** **RESOLVED** — "The <em>Collective</em>" (§3).
|
||
7. **Copy status.** **RESOLVED** — all COPY blocks (A–H, D-intro) approved; D (Process card bodies)
|
||
approved *provisionally* (wording may be reworded later per Daniel). The two suggested typo-fixes
|
||
in COPY C are flagged inline; Daniel has chosen to keep his text verbatim for now.
|
||
|
||
---
|
||
|
||
## 10. Implementation notes (for staff-engineer, when approved)
|
||
|
||
- **No new visual language.** Assemble from the Home primitives in §1. The only candidate new classes
|
||
are the two bio-card pieces (`.bio-name`, `.bio-role`, `.bio-body` or similar) — and even those
|
||
should first be tried with existing type tokens before adding scoped CSS to a new `About.razor.css`.
|
||
- **Hero:** reuse the `.hero-*` classes directly (About's own words), **not** the `DeepDrftHero`
|
||
component (it hard-codes the masthead + streaming CTA).
|
||
- **Page-scoped CSS:** follow Home's pattern — `About.razor.css` scoped, mirrored into the global
|
||
`deepdrft-styles.css` only for anything that must reach beyond the component (Home does this for the
|
||
section primitives; the About page should *consume* those, not re-declare them).
|
||
- **ParallaxImage:** supply `NaturalWidth`/`NaturalHeight` for every above-the-fold band to avoid the
|
||
documented layout shift (component remarks); pass the bw+colour `Image1`/`Image2` pair where files
|
||
allow.
|
||
- **Nav:** register `/about` in `Pages.cs` (the centralised nav index) so it appears in
|
||
`DeepDrftMenu`.
|
||
- **Null-safe images/bios:** every image slot and Khabran's bio must degrade gracefully (fallback or
|
||
absent block) — the page must compose correctly before any final file or Khabran's text lands.
|
||
- **Out of scope:** no source/Razor written by this spec; this is design only.
|