daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Merge p12-w1-about-page into dev (About page in Home visual language)

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-17 18:17:12 -04:00
parent 02cc83ed31 a97cdcf395
commit 6303b4f62c
3 changed files with 960 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Layout/Pages.cs
+1
View File
@@ -36,6 +36,7 @@ public static class Pages
new() { Name = "Mixes", Route = "/mixes", Icon = Icons.Material.Filled.GraphicEq },
],
},
new() { Name = "About", Route = "/about", Icon = Icons.Material.Filled.Groups },
];
public static readonly List<PageRoute> AllPages =
DeepDrftPublic.Client/Pages/About.razor
+321
View File
@@ -0,0 +1,321 @@
@page "/about"
@using DeepDrftPublic.Client.Controls
<PageTitle>The Collective - Deep DRFT</PageTitle>
@* ── HERO (split 50/50) — reuses the .hero-* type classes with About's own words.
NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
<section class="hero">
<MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="hero-left">
<div class="hero-eyebrow @AnimClass">Charleston, South Carolina</div>
<h1 class="hero-title @AnimClass">The<br /><em>Collective</em></h1>
<p class="hero-desc @AnimClass">
Two people, many hats. We bring the heart and soul of Midwest deep house to Charleston &mdash; informed by the founders of the style, and promising to push it forward.
</p>
</div>
</MudItem>
<MudItem xs="12" md="6">
@* IMG SLOT A — hero duo portrait. Reuses the committed duo pair as interim. *@
<div class="hero-image-pane">
<ParallaxImage Image1="img/dd-duo-2-bw.jpg"
Image2="img/dd-duo-2.jpeg"
Alt1="Deep DRFT — two-person electronic music collective"
NaturalWidth="2048"
NaturalHeight="1365"
WindowHeightFraction="0.9"
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.25" />
</div>
</MudItem>
</MudGrid>
@* IMG SLOT B — full-bleed band under the hero, bw+colour crossfade pair. *@
<ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
Image2="img/dd-duo-hero.jpeg"
Alt1="Deep DRFT Electronic Music Duo"
FullWidth
InvertDirection
NaturalWidth="2048"
NaturalHeight="1365"
WindowHeightFraction="0.45"
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.35"
Class="my-12" />
</section>
@* ════════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════════ *@
<div class="section-divider">
<div class="divider-line"></div>
<div class="divider-tag">The People</div>
<div class="divider-line"></div>
</div>
@* People intro — two-column section: label + serif title left, prose right. *@
<section class="section">
<div class="section-header-grid">
<MudGrid Style="margin-bottom: 5rem;">
<MudItem xs="12" md="4">
<div class="section-label">The Collective</div>
<h2 class="section-title">Two of Us,<br />No Fixed<br /><em>Roles</em></h2>
</MudItem>
<MudItem xs="12" md="8" Class="section-body-item">
<div class="section-body">
<p>
We met trading synthesizers and found out we were seeking the same thing. Two of us, no fixed roles &mdash; we both write, arrange, produce, mix, record in the field, build the visuals, and make the tools when the tools don't exist yet.
</p>
</div>
</MudItem>
</MudGrid>
</div>
@* 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). *@
<MudGrid>
@foreach (var member in _members)
{
<MudItem xs="12" md="6">
<div class="bio-card">
<div class="bio-portrait">
@if (member.PortraitImage1 is not null)
{
<ParallaxImage Image1="@member.PortraitImage1"
Image2="@member.PortraitImage2"
Alt1="@($"{member.Name} — portrait")"
NaturalWidth="1365"
NaturalHeight="2048"
WindowHeightFraction="0.62"
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.5" />
}
else
{
@* Graceful-degrade placeholder until a portrait file lands. *@
<div class="bio-portrait-placeholder" aria-hidden="true"></div>
}
</div>
<div class="bio-meta">
<div class="bio-name">@member.Name</div>
<div class="bio-role">@member.Role</div>
@if (!string.IsNullOrWhiteSpace(member.Bio))
{
<p class="bio-body">@member.Bio</p>
}
</div>
</div>
</MudItem>
}
</MudGrid>
</section>
@* ════════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════════ *@
<div class="section-divider">
<div class="divider-line"></div>
<div class="divider-tag">The Process</div>
<div class="divider-line"></div>
</div>
@* Dark feature band — gear-stage cards. The dark ground carries the analytical register. *@
<section class="section-dark">
<div class="section-label section-label-dark">How It's Made</div>
<h2 class="section-title section-title-dark">
Digital, Analog,<br /><em>Whatever Moves</em>
</h2>
<p class="section-dark-standfirst">
It doesn't matter how &mdash; digital or analog, hard or soft, bought or built &mdash; as long as it moves the room. The soul in this music is designed, not extracted; assembled, not distilled.
</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" /><line x1="9" y1="9" x2="9" y2="21" /></svg>
</div>
<div class="feature-title">Sketch</div>
<div class="feature-desc">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.</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" /><line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" /><line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" /><line x1="1" y1="14" x2="7" y2="14" /><line x1="9" y1="8" x2="15" y2="8" /><line x1="17" y1="16" x2="23" y2="16" /></svg>
</div>
<div class="feature-title">Arrange</div>
<div class="feature-desc">Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped wherever it wants to go &mdash; we follow the take, not the template.</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /><line x1="12" y1="3" x2="12" y2="6" /><line x1="12" y1="18" x2="12" y2="21" /></svg>
</div>
<div class="feature-title">Studio</div>
<div class="feature-desc">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.</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><path d="M3 12h3l2-7 4 14 2-7h3" /><circle cx="20" cy="12" r="1.5" /></svg>
</div>
<div class="feature-title">Live Rig</div>
<div class="feature-desc">No laptop, no safety net. A full spread of hardware patched together and played 100% live &mdash; sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the night that doesn't repeat.</div>
</div>
</div>
</section>
@* IMG SLOT D — hands-on-gear band, the literal proof-of-effort image. *@
<section>
<ParallaxImage Image1="img/mixer-bw.jpg"
Image2="img/mixer.jpg"
Alt1="Deep DRFT — hands on the gear"
NaturalWidth="2048"
NaturalHeight="1365"
WindowHeightFraction="0.45"
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.35" />
</section>
@* ════════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════════ *@
<div class="section-divider">
<div class="divider-line"></div>
<div class="divider-tag">The Product</div>
<div class="divider-line"></div>
</div>
@* Product intro — two-column section framing the catalogue as evidence. *@
<section class="section">
<div class="section-header-grid">
<MudGrid Style="margin-bottom: 5rem;">
<MudItem xs="12" md="4">
<div class="section-label">The Output</div>
<h2 class="section-title">Classics,<br />with a<br /><em>Twist</em></h2>
</MudItem>
<MudItem xs="12" md="8" Class="section-body-item">
<div class="section-body">
<p>
Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club.
</p>
</div>
</MudItem>
</MudGrid>
</div>
@* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. *@
<div class="medium-grid">
<a class="medium-card" href="/cuts">
<div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
<div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">Studio</div>
<div class="medium-name">Cuts</div>
<div class="medium-desc">Studio work, composed and finished.</div>
</div>
</a>
<a class="medium-card" href="/sessions">
<div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
<div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">Live</div>
<div class="medium-name">Sessions</div>
<div class="medium-desc">Live, caught once, never the same twice.</div>
</div>
</a>
<a class="medium-card" href="/mixes">
<div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
<div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">DJ Set</div>
<div class="medium-name">Mixes</div>
<div class="medium-desc">Uninterrupted sets, start to finish.</div>
</div>
</a>
</div>
</section>
@* The live turn — "on the street, in the swamp": the identity beyond the releases. *@
<div class="section-split">
<MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="split-left">
<div class="split-eyebrow">Beyond the Releases</div>
<h2 class="split-title">On the Street,<br /><em>in the Swamp</em></h2>
<p class="split-body">
But that's just the releases. We're also out there &mdash; on the street, in the swamp, with a PA, a generator, and a bunch of good vibes.
</p>
</div>
</MudItem>
<MudItem xs="12" md="6">
<div class="split-right">
<ParallaxImage Image1="img/dd-live.jpeg"
Alt1="Deep DRFT — live, out in the world"
InvertDirection
NaturalWidth="2048"
NaturalHeight="1365"
WindowHeightFraction="0.7"
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.6" />
</div>
</MudItem>
</MudGrid>
</div>
@* ── Closing CTA into the catalogue ── *@
<section class="cta-banner">
<div class="cta-text">
<h2 class="cta-headline">Hear the<br /><em>Proof</em></h2>
<p class="cta-sub">The catalogue is the evidence. Start listening.</p>
</div>
<div class="cta-actions">
<a class="btn-white" href="/archive">Explore the Archive</a>
<a class="btn-outline-white" href="/cuts">Hear a Cut</a>
</div>
</section>
@* IMG SLOT E — closing atmosphere band. *@
<section>
<ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
Image2="img/dd-duo-hero.jpeg"
Alt1="Deep DRFT"
NaturalWidth="2048"
NaturalHeight="1365"
WindowHeightFraction="0.45"
InvertDirection
ImageHeight="auto"
ImageWidth="100%"
ParallaxSpeed="0.35" />
</section>
@code {
private string AnimClass => RendererInfo.IsInteractive ? string.Empty : "fade-up";
// 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").
// PortraitImage* are null until final portrait files land — the card renders a
// placeholder treatment in their absence.
private record Member(
string Name,
string Role,
string? Bio,
string? PortraitImage1 = null,
string? PortraitImage2 = null);
private readonly Member[] _members =
[
new(
Name: "Khabran Peters",
Role: "Production · Sound Design · Live",
Bio: null),
new(
Name: "Daniel Harvey",
Role: "Production · Sound Design · Live",
Bio: "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."),
];
}
DeepDrftPublic.Client/Pages/About.razor.css
+638
View File
@@ -0,0 +1,638 @@
/* About.razor scoped styles.
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. */
/* ── Animations (from DeepDrftHero.razor.css) ── */
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
.fade-up {
opacity: 0;
animation: fade-up 0.8s ease forwards;
}
/* ── HERO (from Home.razor.css + DeepDrftHero.razor.css) ── */
.hero {
min-height: 100vh;
overflow: hidden;
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem 3rem;
position: relative;
background: var(--deepdrft-white);
height: 100%;
}
.hero-image-pane {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--deepdrft-white);
height: 100%;
}
@media (max-width: 960px) {
.hero { min-height: auto; }
.hero-left { padding: 4rem 1.5rem 3rem; }
}
.hero-eyebrow {
font-family: var(--deepdrft-font-mono);
font-size: 0.65rem;
letter-spacing: 0.28em;
color: var(--deepdrft-green-accent);
text-transform: uppercase;
margin-bottom: 1.8rem;
display: flex;
align-items: center;
gap: 1rem;
animation-delay: 0.1s;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 2.5rem;
height: 1px;
background: var(--deepdrft-green-accent);
}
.hero-title {
font-family: var(--deepdrft-font-display);
font-size: clamp(4.5rem, 8vw, 8.5rem);
font-weight: 300;
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--deepdrft-navy);
margin-bottom: 0.5rem;
animation-delay: 0.22s;
}
.hero-title em {
font-style: italic;
color: var(--deepdrft-green);
}
.hero-desc {
font-family: var(--deepdrft-font-body);
font-size: 0.92rem;
line-height: 1.75;
color: var(--deepdrft-navy);
opacity: 0.7;
max-width: 36ch;
margin-bottom: 3rem;
animation-delay: 0.44s;
}
/* ── DIVIDER (from Home.razor.css) ── */
.section-divider {
display: flex;
align-items: center;
gap: 2rem;
padding: 2rem 3rem;
background: var(--deepdrft-white);
}
.divider-line {
flex: 1;
height: 1px;
background: var(--deepdrft-border);
}
.divider-tag {
font-family: var(--deepdrft-font-mono);
font-size: 0.6rem;
letter-spacing: 0.25em;
color: var(--deepdrft-muted);
text-transform: uppercase;
white-space: nowrap;
}
/* ── SECTION (from Home.razor.css) ── */
.section {
padding: 7rem 3rem;
background: var(--deepdrft-white);
}
@media (min-width: 960px) {
.section-header-grid {
align-items: end;
}
}
.section-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.2rem;
}
.section-title {
font-family: var(--deepdrft-font-display);
font-size: clamp(2.8rem, 5vw, 4.5rem);
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;
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 {
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 {
font-family: var(--deepdrft-font-body);
font-size: 0.92rem;
line-height: 1.8;
color: rgba(250, 250, 248, 0.55);
max-width: 56ch;
margin-top: 2rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid rgba(250, 250, 248, 0.08);
margin-top: 4rem;
}
.feature-card {
padding: 2.5rem;
border-right: 1px solid rgba(250, 250, 248, 0.08);
transition: background 0.3s;
}
.feature-card:last-child { border-right: 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;
border: 1px solid rgba(250, 250, 248, 0.15);
margin-bottom: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon svg {
width: 1rem;
height: 1rem;
stroke: var(--deepdrft-green-accent);
fill: none;
stroke-width: 1.5;
}
.feature-title {
font-family: var(--deepdrft-font-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--deepdrft-white);
margin-bottom: 0.8rem;
line-height: 1.2;
}
.feature-desc {
font-family: var(--deepdrft-font-body);
font-size: 0.8rem;
line-height: 1.7;
color: rgba(250, 250, 248, 0.45);
}
/* ── SPLIT (from Home.razor.css) ── */
.section-split {
min-height: 60vh;
}
@media (max-width: 960px) {
.section-split { min-height: auto; }
}
.split-left {
background: var(--deepdrft-green);
padding: 6rem 4rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
height: 100%;
}
.split-left::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(61, 122, 104, 0.3);
}
.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 {
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;
}
.split-title em {
font-style: italic;
opacity: 0.65;
}
.split-body {
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;
}
/* ── CTA BANNER (from Home.razor.css) ── */
.cta-banner {
background: var(--deepdrft-navy);
padding: 6rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: 'DRFT';
position: absolute;
right: -2rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--deepdrft-font-display);
font-size: 22rem;
font-weight: 300;
color: rgba(250, 250, 248, 0.03);
line-height: 1;
pointer-events: none;
user-select: none;
letter-spacing: -0.05em;
}
.cta-text {
position: relative;
z-index: 1;
}
.cta-headline {
font-family: var(--deepdrft-font-display);
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: 300;
color: var(--deepdrft-white);
line-height: 1;
margin-bottom: 1rem;
}
.cta-headline em {
font-style: italic;
color: var(--deepdrft-green-accent);
}
.cta-sub {
font-family: var(--deepdrft-font-body);
font-size: 0.88rem;
color: rgba(250, 250, 248, 0.4);
letter-spacing: 0.05em;
}
.cta-actions {
display: flex;
gap: 1rem;
align-items: center;
position: relative;
z-index: 1;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-white {
font-family: var(--deepdrft-font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--deepdrft-navy);
background: var(--deepdrft-white);
border: none;
padding: 1rem 2.2rem;
cursor: pointer;
text-decoration: none;
transition: background 0.25s, color 0.25s;
display: inline-block;
}
.btn-white:hover {
background: var(--deepdrft-green-accent);
color: var(--deepdrft-white);
}
.btn-outline-white {
font-family: var(--deepdrft-font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--deepdrft-white);
background: transparent;
border: 1px solid rgba(250, 250, 248, 0.3);
padding: 1rem 2.2rem;
cursor: pointer;
text-decoration: none;
transition: border-color 0.25s;
display: inline-block;
}
.btn-outline-white:hover { border-color: var(--deepdrft-white); }
@media (max-width: 599px) {
.cta-banner {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding: 4rem 1.5rem;
}
.cta-actions {
width: 100%;
}
.btn-white,
.btn-outline-white {
flex: 1;
text-align: center;
min-width: 140px;
}
.cta-banner::before {
font-size: 8rem;
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;
}