fix(about): remove dark manifesto band, flow What We Believe on cream paper

The dark #1f1b16 full-bleed section broke the continuous letter feel.
Replaced with a standard letter article on var(--paper):
- tia-subhead 'What we believe' (same as other subheadings)
- tia-pull.accent for the opening line
- Paragraphs in tia-col as usual
- Creed list (01-06) retains mono numbers in marigold + ink body text,
  hairline borders — now reads as part of the letter, not a separate block
Removed all .tia-mani* CSS rules and --mani-bg/fg tokens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-31 10:49:14 +05:30
parent a3d89ee37c
commit 69caff5226

View file

@ -37,8 +37,6 @@ const CSS = `
--rule-soft: #e8ded0; --rule-soft: #e8ded0;
--accent: #c98a2b; --accent: #c98a2b;
--accent-2: #b8503e; --accent-2: #b8503e;
--mani-bg: #1f1b16;
--mani-fg: #f3ead9;
--fd: var(--font-fraunces, Georgia, serif); --fd: var(--font-fraunces, Georgia, serif);
--fb: var(--font-newsreader, Georgia, serif); --fb: var(--font-newsreader, Georgia, serif);
--fl: var(--font-jetbrains, ui-monospace, monospace); --fl: var(--font-jetbrains, ui-monospace, monospace);
@ -190,33 +188,7 @@ const CSS = `
font-family: var(--fh); font-size: 1.3em; font-family: var(--fh); font-size: 1.3em;
} }
/* ── manifesto (dark section) ── */ /* creed list — same cream paper as rest of letter */
.tia-mani {
background: var(--mani-bg); color: var(--mani-fg);
position: relative; z-index: 2;
margin: clamp(56px,9vw,104px) 0 0;
padding: clamp(56px,9vw,104px) clamp(20px,5vw,56px);
}
.tia-mani-inner { max-width: 920px; margin: 0 auto; }
.tia-mani .me {
font-family: var(--fl); font-size: 11px; letter-spacing: .24em;
text-transform: uppercase; color: rgba(201,138,43,.9);
display: block; margin: 0 0 28px;
}
.tia-mani .mi {
font-family: var(--fd); font-weight: var(--dw);
font-size: clamp(1.7rem,4vw,2.6rem); line-height: 1.18;
letter-spacing: var(--ds); margin: 0 0 .6em; font-style: italic;
color: var(--mani-fg); text-wrap: balance;
}
.tia-mani .mi em { color: rgba(201,138,43,.9); }
.tia-mani .ms {
font-size: 1.15rem; color: rgba(243,234,217,.72);
max-width: 38rem; margin: 0 0 44px;
}
.tia-mani .ms strong { color: var(--mani-fg); font-weight: 600; }
/* creed list */
.tia-creed { .tia-creed {
list-style: none; max-width: var(--measure); list-style: none; max-width: var(--measure);
margin: 1.7em auto; padding: 0; margin: 1.7em auto; padding: 0;
@ -233,12 +205,6 @@ const CSS = `
.tia-creed .t { .tia-creed .t {
font-family: var(--fb); font-size: 1.12rem; line-height: 1.5; color: var(--ink); font-family: var(--fb); font-size: 1.12rem; line-height: 1.5; color: var(--ink);
} }
.tia-mani .mf {
margin: 44px 0 0; font-size: 1.18rem;
color: rgba(243,234,217,.86); max-width: 40rem;
}
.tia-mani .mf strong { color: var(--mani-fg); font-weight: 600; }
/* ── closing / signature ── */ /* ── closing / signature ── */
.tia-closing { .tia-closing {
max-width: var(--measure); margin: 2.6em auto 0; text-align: center; max-width: var(--measure); margin: 2.6em auto 0; text-align: center;
@ -499,22 +465,25 @@ export default function AboutPage() {
</div> </div>
</article> </article>
{/* ══ WHAT WE BELIEVE — dark manifesto section ════════════ */} {/* ══ WHAT WE BELIEVE — same cream paper, continuous letter ═ */}
<section className="tia-mani" id="believe"> <article className="tia-body" id="believe">
<div className="tia-mani-inner"> <h2 className="tia-subhead tia-reveal">What we believe</h2>
<span className="me tia-reveal">What we believe</span>
<p className="mi tia-reveal"> <p className="tia-pull accent tia-reveal">
The first years of your child&apos;s life are not{" "} The first years of your child&apos;s life are not a metric to optimise.
<em>a metric to optimise</em>. They are irreplaceable. They are irreplaceable.
</p> </p>
<p className="ms tia-reveal">
<div className="tia-col">
<p className="tia-reveal">
No app can give you back a missed moment. No notification can replace being No app can give you back a missed moment. No notification can replace being
present when your baby discovers their hands, says a first word, or falls asleep present when your baby discovers their hands, says a first word, or falls asleep
on your shoulder. on your shoulder.
</p> </p>
<p className="ms tia-reveal"> <p className="tia-strong tia-reveal">
<strong>Your job is to be present. Ours is to make the rest a little easier.</strong> Your job is to be present. Ours is to make the rest a little easier.
</p> </p>
</div>
<ul className="tia-creed tia-reveal"> <ul className="tia-creed tia-reveal">
{CREED.map((item, i) => ( {CREED.map((item, i) => (
@ -525,12 +494,13 @@ export default function AboutPage() {
))} ))}
</ul> </ul>
<p className="mf tia-reveal"> <div className="tia-col">
Every choice we make is guided by the same principle:{" "} <p className="tia-strong tia-reveal">
<strong>your family&apos;s story belongs to your family.</strong> Every choice we make is guided by the same principle: your family&apos;s story
belongs to your family.
</p> </p>
</div> </div>
</section> </article>
{/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */} {/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
<article className="tia-body"> <article className="tia-body">