/* ============================================================ Angel's Financial Consulting — web token layer Single source of truth for the HTML comps AND the Figma variables/text styles. If a value changes, change it here first, then mirror it into Figma. Locked brand colors are exactly as published in the brand guidelines (p.11 Color). Everything else is derived. ============================================================ */ :root{ /* ---- 1. Locked palette — do not alter ------------------- */ --porcelain:#FFFEFA; --ink:#000000; --teal:#0071A5; --gold:#D9A404; --copper:#C65A3A; /* ---- 2. Derived shades ---------------------------------- */ /* Darker steps for hover states and for type that must pass contrast where the locked color cannot. */ --teal-deep:#005A80; --teal-ground:#00648F; /* large ground fills */ --copper-deep:#9E4227; /* copper as TYPE — the locked copper fails AA on porcelain */ /* ---- 3. Surface tints ----------------------------------- */ /* Washes of locked colors over porcelain, for alternating section grounds and chips. NOT new brand colors — see DESIGN-SYSTEM.md, these need adding to the book as surface tokens. */ /* ⛔ RETIRED 20 Aug 2026 — Ali: "i dont want anything with the light yellow". --porcelain-warm (gold @ 8%) and --gold-tint (gold @ 12%) are gone. They are NOT redefined here on purpose: anything still referencing them fails loudly instead of silently falling back to a colour she has rejected. The system needs three light grounds so no two adjacent sections match, so the warm step is replaced by a COOL one — teal-tint at half strength. */ --porcelain-cool:#EFF4F6; /* the third light ground. Was #F5F9F9, which measured 1.03:1 against porcelain and read as plain white; the eye saw two grounds, not three. */ --teal-tint:#EBF3F8; /* teal @ 8% */ --copper-tint:#FAF1EB; /* copper @ 8% */ /* ---- 4. Type + line colors ------------------------------ */ --body:#0B0B0B; --mut:#575757; --mut2:#6E6E6E; --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.2); --w:#FFFEFA; --w-dim:rgba(255,254,250,.82); --w-dim2:rgba(255,254,250,.62); --w-line:rgba(255,255,255,.16); /* ---- 5. Semantic aliases -------------------------------- */ /* Sections and components reference THESE, never the raw palette. Swapping a section's mood becomes a one-line change, and the Figma variables map 1:1. */ --surface-default:var(--porcelain); --surface-warm:var(--porcelain-cool); /* name kept, value is now cool */ --surface-inverse:var(--ink); --surface-accent:var(--teal); --surface-accent-warm:var(--copper); --text-default:var(--body); --text-strong:var(--ink); --text-muted:var(--mut); --text-accent:var(--teal); --text-on-dark:var(--w); --text-on-dark-muted:var(--w-dim); --accent-primary:var(--teal); --accent-gold:var(--gold); /* RULES + GROUNDS ONLY — never type */ --accent-copper:var(--copper); --rule:var(--line); --rule-strong:var(--line-2); /* ---- 6. Space scale ------------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px; --s12:200px; /* ---- 7. Radius ------------------------------------------ */ --r-sm:2px; --r-md:8px; --r-lg:12px; --r-pill:999px; /* ---- 8. Type families ----------------------------------- */ --sans:'Plus Jakarta Sans',system-ui,sans-serif; --serif:'Crete Round',Georgia,serif; /* ---- 9. Type scale -------------------------------------- */ /* DERIVED FROM FIGMA V3, which is the approved design and the source of truth. Each clamp resolves to the Figma desktop value at 1440 and the Figma mobile value at 390, so the two sides cannot drift apart again. Near-duplicate sizes in V3 (14/14.5 and 11.5/12) were merged. */ --t-display:clamp(2.375rem,5.14vw,4.625rem); /* @1440 74 · @390 38 */ --t-h1:clamp(2.25rem,4.30vw,3.875rem); /* @1440 62 · @390 36 */ --t-statement:clamp(1.875rem,3.89vw,3.5rem); /* @1440 56 · @390 30 */ --t-h2:clamp(1.875rem,3.33vw,3rem); /* @1440 48 · @390 30 */ --t-h3:clamp(1.5rem,2.36vw,2.125rem); /* @1440 34 · @390 24 */ --t-subhead:clamp(1.25rem,1.875vw,1.6875rem); /* @1440 27 · @390 20 */ --t-card-title:clamp(1.25rem,1.67vw,1.5rem); /* @1440 24 · @390 20 */ --t-lead:clamp(1.0625rem,1.25vw,1.125rem); /* @1440 18 · @390 17 */ --t-body:1.0625rem; /* 17 */ --t-body-sm:.9375rem; /* 15 */ --t-caption:.75rem; /* 12 */ --t-label:1.375rem; /* 22 — was 11.5 in V3. Set vertically, so it can carry this without competing with the headline. */ --t-micro:.625rem; /* 10 — cred keys, footer heads, placeholder caps */ /* SYSTEM LOCK, 12 Aug: the sizes below were loose rem values scattered through comp.css (.62 / .66 / .76 / .85 / .9 / .92rem) that predated this ramp and matched no text style in Figma. They are now named. Only --t-ui moves anything on screen, and never by more than 0.8px. */ --t-ui:.9rem; /* 14.4 — inline links, cred values, footer body */ --t-photo-cap:.66rem; /* 10.56 — captions set ON photography */ --t-lockup:1rem; /* 16 — header lockup (14 when the nav goes solid) */ --t-wordmark:1.875rem; /* 30 — footer wordmark */ /* Crete Round Regular, for full-width statements like the teal band. Deliberately NOT italic — the italic Crete is the inline accent. */ --t-statement-serif:clamp(1.75rem,3.33vw,3rem);/* @1440 48 · @390 28 */ /* Inner-page hierarchy, from Ali's Advisory V1 (12 Aug). The page title is the old promoted-label size; sections drop to H3 so the title dominates, and the closing headline pops back to H2. This ladder is what stops the inner pages reading flat — previously every heading was H2. */ --t-page-title:clamp(3rem,7.64vw,6.875rem); /* @1440 110 */ --t-page-sub:clamp(1.75rem,2.85vw,2.5625rem); /* @1440 41 */ --t-nav:.875rem; /* 14 — also the solid-header lockup */ --t-nav-mobile:1.05rem; /* 16.8 — tap targets in the mobile panel */ --t-btn:.875rem; /* 14 */ /* line heights, as px ratios of the sizes above */ --lh-display:1.0; --lh-h1:1.0; --lh-statement:1.14; --lh-h2:1.04; --lh-h3:1.2; --lh-subhead:1.26; --lh-card:1.08; --lh-lead:1.55; --lh-body:1.6; --lh-tight:1.2; --lh-statement-serif:1.28; --lh-page-title:.9; --lh-page-sub:1.0; --lh-sec:1.2; /* tracking */ --tr-display:-.04em; --tr-h1:-.035em; --tr-statement:-.03em; --tr-h2:-.03em; --tr-h3:-.025em; --tr-subhead:-.02em; --tr-card:-.03em; --tr-body:-.01em; --tr-label:.2em; --tr-micro:.10em; --tr-lead:-.015em; /* matches .t-lead — inner-page body copy */ --tr-page-title:-.045em; /* the 110px page title is tighter than Display */ /* weights */ --fw-body:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-x:800; /* ---- 10. Layout + motion -------------------------------- */ /* Container is capped at 1280 of content, which is the widest the page can go and still have all six How I Help cards FILL three lines — the brief. Past 1280 the copy stops reaching the third line and leaves a dead gap under it: 1300-1360 breaks one card, 1380+ breaks two. Cards land at 408. The gutter and the Who It's For panel inset are the same token, so every right edge on the page lines up without the container having to grow. */ --gut:clamp(20px,2vw,27px); /* Measure. Audited 25 Aug: body paragraphs were running 86-97 characters per line at 768 on ALL SIX pages, and up to 112 at 1440. Nothing capped them — the two-column desktop layouts were doing the job by accident, so the moment a row stacked, the measure went with it. 66ch is the cap; the ideal band is 45-75. */ --measure:33em; --measure-lede:32em; /* ONE vertical rhythm for every content section, on every page. Lives here, not in a page-specific layer: it was briefly defined in poster.css and the homepage (which does not load poster.css) silently computed every section to ZERO padding. */ --sec-y:clamp(56px,6.2vw,88px); /* ---- THE TYPE RAMP (25 Aug) ------------------------------ Audited across all six pages at 1440/768/390 and found: H1 at three sizes, 34px at two weights, 27px at two weights, item titles at two tiers for identical content, and H2/H3 IDENTICAL at 768 and 390 because a plain `Xvw` clamp hits its floor by tablet and then stops moving. Every tier below is `min + base + Xvw`, which gives a real three-point ramp instead of a two-point one. Values are the measured render at 1440 / 768 / 390. */ --ramp-title: clamp(42px, 11.4px + 6.85vw, 110px); /* 110 · 64 · 42 */ --ramp-display:clamp(44px, 26.9px + 3.27vw, 74px); /* 74 · 52 · 44 */ --ramp-h2-xl: clamp(32px, 21.7px + 2.38vw, 56px); /* 56 · 40 · 32 */ --ramp-h2-cta: clamp(28px, 18.0px + 2.08vw, 48px); /* 48 · 34 · 28 */ --ramp-h2: clamp(24px, 21.1px + 0.89vw, 34px); /* 34 · 28 · 24 */ --ramp-h2-sm: clamp(22px, 20.6px + 0.45vw, 27px); /* 27 · 24 · 22 */ --ramp-h3: clamp(18px, 17.7px + 0.30vw, 22px); /* 22 · 20 · 18 */ --ramp-lead: clamp(16px, 15.0px + 0.21vw, 18px); /* 18 · 17 · 16 */ --ramp-body: clamp(15px, 14.6px + 0.17vw, 17px); /* 17 · 16 · 15 */ /* ---- ELEMENT SCALE (25 Aug) ------------------------------ The audit found SIX distinct grid gaps (43, 42, 70, 68, 36, 24), three card paddings (45/46, 52, 34) and three button heights (50, 52, 54). Near-duplicates like 42-vs-43 and 68-vs-70 are drift, not decisions. Three steps each, nothing in between. */ --gap-sm: clamp(16px, 1.7vw, 24px); --gap-md: clamp(24px, 2.9vw, 42px); --gap-lg: clamp(32px, 4.4vw, 64px); --pad-chip: clamp(22px, 2.4vw, 32px); --pad-card: clamp(26px, 3.1vw, 44px); --pad-panel: clamp(32px, 3.6vw, 52px); --btn-h: 50px; /* One corner for every button on the site. There were three values for one component that appears on all six pages: .hp-btn at 8px, .hp-btn-white at 20/0/20/0, and the poster pages at 40/0/40/0. The 40 0 40 0 diagonal was tried on 26 Aug and pulled back — 40 is --hp-corner, the CARD radius, and on a 50px-tall button it rounded four fifths of the height. Back to 8, now as one token rather than three hardcoded values. */ --btn-radius:8px; /* The diagonal corner. Was a hard 40px, which reads enormous on a 350px-wide phone card. Scales with the viewport instead. */ --corner-fluid:clamp(22px,2.9vw,40px); /* Copy that carries a hard
for desktop line-breaking needs to flow freely once the column is narrow. */ --maxw:1334px; /* 1280 content + 2 x 27 gutter */ --ease:cubic-bezier(.16,1,.3,1); --dur:.45s; } /* ============================================================ Type classes — every piece of text on the site uses one of these. Nothing sets a font-size inline. ============================================================ */ .t-display{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);color:var(--text-strong)} .t-statement{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-statement);line-height:var(--lh-statement);letter-spacing:var(--tr-statement);color:var(--text-strong)} .t-card-title{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-card-title);line-height:var(--lh-card);letter-spacing:var(--tr-card);color:var(--text-strong)} .t-micro{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-micro);line-height:1.3;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-muted)} .t-h1{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);color:var(--text-strong)} .t-h2{font-family:var(--sans);font-weight:var(--fw-bold);font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);color:var(--text-strong)} .t-h3{font-family:var(--sans);font-weight:var(--fw-semi);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);color:var(--text-strong)} .t-subhead{font-family:var(--sans);font-weight:var(--fw-semi);font-size:var(--t-subhead);line-height:var(--lh-subhead);letter-spacing:-.02em;color:var(--text-strong)} .t-lead{font-family:var(--sans);font-weight:var(--fw-med);font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:-.015em;color:var(--text-muted)} .t-body{font-family:var(--sans);font-weight:var(--fw-med);font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-muted)} .t-body-sm{font-family:var(--sans);font-weight:var(--fw-med);font-size:var(--t-body-sm);line-height:1.55;color:var(--text-muted)} .t-statement-serif{font-family:var(--serif);font-weight:400;font-size:var(--t-statement-serif);line-height:var(--lh-statement-serif);letter-spacing:-.01em;color:var(--text-strong)} .t-caption{font-family:var(--sans);font-weight:var(--fw-med);font-size:var(--t-caption);line-height:1.5;color:var(--text-muted)} /* the Crete Round italic accent phrase — the one editorial moment */ /* the Crete Round italic accent — SAME size and tracking as the host line, as in Figma. Mismatched tracking changes where lines break. */ .accent-phrase{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--text-accent);font-size:1em;letter-spacing:inherit} /* ---------- tablet gutter ---------------------------------- Lived in poster.css until 26 Aug, which meant it never reached index.html or privacy.html — they do not load that stylesheet. Result: at 768 the homepage had 20px gutters while every poster page had 40. Exactly the same failure as --sec-y, which was also defined in poster.css and computed to zero on the homepage. Shared scale belongs here. Bounded at 1023 on purpose: from 1334 up the container is capped so the content column can stay at exactly 1280, which fixes --gut at 27. */ @media (min-width:621px) and (max-width:1023px){ :root{--gut:clamp(28px,5.2vw,44px)} } /* PHONE PASS · 28 Aug — section rhythm. 112 to 148px between neighbouring sections is a desktop measure applied to a 375 screen; it reads as the page having stopped rather than as breathing room. 36 top and bottom gives 72 between two sections, which is what Who It's For already used and what Ali asked for site-wide. This lives in tokens.css because index.html loads home.css and NOT poster.css — putting it in poster.css would have fixed every page except the homepage, silently. */ @media (max-width:560px){ :root{ --sec-y:clamp(36px,9.6vw,56px); /* Card padding is the other half of "the cards don't use the full width". A 20px gutter plus 26px of card padding put the card's text 46px from the screen edge while the hero text sat at 20. Setting the TOKEN rather than chasing each card rule: the per-component override lost to a more specific selector and silently did nothing. */ /* Ali, 28 Aug: cards keep their inset from the screen edge, but the text runs closer to the card edges. 12px is the floor before the copy starts to feel like it is touching the card. */ /* 28 Aug, second look. 12px made the copy hug the card edge, and the real problem was never the padding — it was the TYPE. 17 reads as deliberate; 12 reads as a mistake. */ --pad-card:clamp(16px,4.1vw,19px); --pad-chip:clamp(16px,4.1vw,19px); /* Card microcopy was 13px on a phone. That size was chosen for a 1440 card sitting under a 22px label; on a phone the label is 19px and the copy has no reason to be fine print. 15.5 is the site's small body step and it is the floor of comfortable. */ --t-body-sm:.96875rem; /* The page gutter comes down too. On a phone the content column is the whole design; 20px each side plus card padding was putting body copy 45px from the glass. 14 + 18 puts it at 32. */ --gut:clamp(12px,3vw,15px); --pad-panel:clamp(18px,4.6vw,22px); } }