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:
parent
a3d89ee37c
commit
69caff5226
1 changed files with 31 additions and 61 deletions
|
|
@ -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,38 +465,42 @@ 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's life are not{" "}
|
The first years of your child'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>
|
|
||||||
|
|
||||||
<ul className="tia-creed tia-reveal">
|
|
||||||
{CREED.map((item, i) => (
|
|
||||||
<li key={i}>
|
|
||||||
<span className="n">0{i + 1}</span>
|
|
||||||
<span className="t">{item}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p className="mf tia-reveal">
|
|
||||||
Every choice we make is guided by the same principle:{" "}
|
|
||||||
<strong>your family's story belongs to your family.</strong>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
<ul className="tia-creed tia-reveal">
|
||||||
|
{CREED.map((item, i) => (
|
||||||
|
<li key={i}>
|
||||||
|
<span className="n">0{i + 1}</span>
|
||||||
|
<span className="t">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="tia-col">
|
||||||
|
<p className="tia-strong tia-reveal">
|
||||||
|
Every choice we make is guided by the same principle: your family's story
|
||||||
|
belongs to your family.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
{/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
|
{/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
|
||||||
<article className="tia-body">
|
<article className="tia-body">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue