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;
|
||||
--accent: #c98a2b;
|
||||
--accent-2: #b8503e;
|
||||
--mani-bg: #1f1b16;
|
||||
--mani-fg: #f3ead9;
|
||||
--fd: var(--font-fraunces, Georgia, serif);
|
||||
--fb: var(--font-newsreader, Georgia, serif);
|
||||
--fl: var(--font-jetbrains, ui-monospace, monospace);
|
||||
|
|
@ -190,33 +188,7 @@ const CSS = `
|
|||
font-family: var(--fh); font-size: 1.3em;
|
||||
}
|
||||
|
||||
/* ── manifesto (dark section) ── */
|
||||
.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 */
|
||||
/* creed list — same cream paper as rest of letter */
|
||||
.tia-creed {
|
||||
list-style: none; max-width: var(--measure);
|
||||
margin: 1.7em auto; padding: 0;
|
||||
|
|
@ -233,12 +205,6 @@ const CSS = `
|
|||
.tia-creed .t {
|
||||
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 ── */
|
||||
.tia-closing {
|
||||
max-width: var(--measure); margin: 2.6em auto 0; text-align: center;
|
||||
|
|
@ -499,22 +465,25 @@ export default function AboutPage() {
|
|||
</div>
|
||||
</article>
|
||||
|
||||
{/* ══ WHAT WE BELIEVE — dark manifesto section ════════════ */}
|
||||
<section className="tia-mani" id="believe">
|
||||
<div className="tia-mani-inner">
|
||||
<span className="me tia-reveal">What we believe</span>
|
||||
<p className="mi tia-reveal">
|
||||
The first years of your child's life are not{" "}
|
||||
<em>a metric to optimise</em>. They are irreplaceable.
|
||||
{/* ══ WHAT WE BELIEVE — same cream paper, continuous letter ═ */}
|
||||
<article className="tia-body" id="believe">
|
||||
<h2 className="tia-subhead tia-reveal">What we believe</h2>
|
||||
|
||||
<p className="tia-pull accent tia-reveal">
|
||||
The first years of your child's life are not a metric to optimise.
|
||||
They are irreplaceable.
|
||||
</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
|
||||
present when your baby discovers their hands, says a first word, or falls asleep
|
||||
on your shoulder.
|
||||
</p>
|
||||
<p className="ms tia-reveal">
|
||||
<strong>Your job is to be present. Ours is to make the rest a little easier.</strong>
|
||||
<p className="tia-strong tia-reveal">
|
||||
Your job is to be present. Ours is to make the rest a little easier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="tia-creed tia-reveal">
|
||||
{CREED.map((item, i) => (
|
||||
|
|
@ -525,12 +494,13 @@ export default function AboutPage() {
|
|||
))}
|
||||
</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>
|
||||
<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>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
|
||||
<article className="tia-body">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue