manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(about): align accent colors with rose/pink brand theme

Browse source 
- --accent: #c98a2b (marigold) → #f43f5e (rose-500) — cascades to
  pull-quote borders, creed numbers, eyebrow lines, ✦ divider,
  callout quote mark, place name highlights
- --accent-2: #b8503e (dusty rose) → #e11d48 (rose-600) — cascades to
  drop cap, display highlight line, closing display text, .tia-pull.accent
- .tia-hero: add rose-50→amber-50→rose-50 gradient (matches homepage hero)
- .tia-cta .big: rose-500 bg + white text + rose shadow; hover → rose-600
- .tia-ps: background tint changed from marigold to faint rose
- Cream paper body, fonts, layout, grain overlay — all unchanged

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-31 11:01:53 +05:30
parent 69caff5226
commit 2a450c7644
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/(marketing)/about/page.tsx
View file

@ -35,8 +35,8 @@ const CSS = `
--ink-faint: #8a7e6f; --ink-faint: #8a7e6f;
--rule: #ddd2bc; --rule: #ddd2bc;
--rule-soft: #e8ded0; --rule-soft: #e8ded0;
--accent: #c98a2b; --accent: #f43f5e; /* rose-500 — site primary */
--accent-2: #b8503e; --accent-2: #e11d48; /* rose-600 — emphasis */
--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);
@ -66,6 +66,7 @@ const CSS = `
padding: clamp(52px,10vw,104px) clamp(20px,5vw,56px) clamp(8px,2vw,24px); padding: clamp(52px,10vw,104px) clamp(20px,5vw,56px) clamp(8px,2vw,24px);
text-align: center; text-align: center;
position: relative; z-index: 2; position: relative; z-index: 2;
background: linear-gradient(135deg, #fff1f2 0%, #fffbeb 50%, #fff1f2 100%);
} }
.tia-eyebrow { .tia-eyebrow {
display: inline-flex; align-items: center; gap: 10px; display: inline-flex; align-items: center; gap: 10px;
@ -236,7 +237,7 @@ const CSS = `
/* P.S. box */ /* P.S. box */
.tia-ps { .tia-ps {
max-width: var(--measure); margin: 2.6em auto 0; display: flow-root; max-width: var(--measure); margin: 2.6em auto 0; display: flow-root;
background: rgba(201,138,43,.09); border: 1px solid var(--rule); background: rgba(244,63,94,.05); border: 1px solid var(--rule);
border-radius: var(--r); padding: 24px 26px; border-radius: var(--r); padding: 24px 26px;
font-style: italic; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.62; font-style: italic; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.62;
} }
@ -271,13 +272,13 @@ const CSS = `
} }
.tia-cta .big { .tia-cta .big {
display: inline-flex; align-items: center; gap: 12px; display: inline-flex; align-items: center; gap: 12px;
background: var(--accent); color: #2a1c06; border: 0; background: #f43f5e; color: #ffffff; border: 0;
font-family: var(--fb); font-weight: 500; font-size: 1.05rem; font-family: var(--fb); font-weight: 500; font-size: 1.05rem;
padding: 16px 32px; border-radius: var(--r); text-decoration: none; padding: 16px 32px; border-radius: var(--r); text-decoration: none;
box-shadow: 0 12px 30px -12px rgba(201,138,43,.7); box-shadow: 0 12px 30px -12px rgba(244,63,94,.4);
transition: transform .2s, filter .2s; transition: transform .2s, background .2s;
} }
.tia-cta .big:hover { transform: translateY(-2px); filter: brightness(.96); } .tia-cta .big:hover { transform: translateY(-2px); background: #e11d48; }
.tia-cta .fine { font-size: .85rem; color: var(--ink-faint); margin: 16px 0 0; } .tia-cta .fine { font-size: .85rem; color: var(--ink-faint); margin: 16px 0 0; }
/* text helpers */ /* text helpers */