/* ============================================================================ welty.css — The Welty Project shared design system (single source of truth) ---------------------------------------------------------------------------- Linked on EVERY page by scripts/inject_seo.py. Define fonts, colours, the page background, and heading style HERE so the pages can't drift apart. Type system (settled 12 Jul 2026): • Body / running text ....... EB Garamond → var(--font-body) • Headings / page titles .... Cormorant SC (sm-caps) → var(--font-display) • The interactive tree ONLY . Iowan Old Style → var(--font-tree) (scoped to #chart — more legible for the small card details) When a page needs to override something, it can; but the shared defaults below are the canonical values every page should match. ============================================================================ */ :root{ /* fonts */ --font-body:'EB Garamond',Georgia,serif; --font-display:'Cormorant SC',Georgia,serif; --font-tree:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; /* core palette */ --ink:#1c1a17; /* body text */ --muted:#6e6353; /* secondary text */ --crimson:#7a1f1f; /* accent — links, page titles */ --navy:#1e2a4a; /* section headings */ --gold:#b8912f; /* rules / borders */ --gold-bright:#d4af37; --rule:#cbb98d; --line:#c9bfae; --card:#fbf7ec; /* card / panel background */ /* page background */ --parchment:#f5efe2; --parchment-deep:#ede4cf; /* ------------------------------------------------------------------ Box-accent MEANING system (settled 13 Jul 2026) Every panel/card edge should signal WHAT it is, not decorate at random. Use these semantic names on box borders instead of raw colours, so the meaning is defined once, here. --accent-nav .... GOLD → wayfinding: portal cards, "how this works" --accent-thesis . CRIMSON → the argument: thesis panels, the open question, and key ("big") finds --accent-cta .... NAVY → DNA appeal / call-to-action --accent-quiet .. TAN → ordinary journal entries & quiet asides ------------------------------------------------------------------ */ --accent-nav:var(--gold); --accent-thesis:var(--crimson); --accent-cta:var(--navy); --accent-quiet:var(--rule); } /* ---- base typography + background -------------------------------------- */ *{box-sizing:border-box;} body{ font-family:var(--font-body); color:var(--ink); background:var(--parchment); background-image:radial-gradient(ellipse at 50% -10%,#fdf9ee 0%,#f5efe2 55%,#ede4cf 100%); margin:0; font-size:19px; line-height:1.55; } /* Page titles / headings use the Cormorant SC small-caps display face. */ h1,h2,h3{font-family:var(--font-display);} /* Canonical page-title (hero) — crimson Cormorant SC, centred. */ .page-title,h1.hero{ font-family:var(--font-display); font-weight:700; font-size:2.15rem; letter-spacing:.5px; color:var(--crimson); text-align:center; margin:0 0 4px; } /* ---- the interactive tree is the one deliberate exception -------------- */ /* Iowan Old Style only inside the tree canvas; everything else stays body. */ #chart{font-family:var(--font-tree);} /* ============================================================================ SITE-WIDE POLISH (added 13 Jul 2026) Small, purely-additive touches that make every page feel like one site. Nothing here changes page layout — it adds behaviours/states no page had: a brand-tinted text selection, one consistent keyboard-focus ring, and smooth in-page anchor scrolling (disabled for reduced-motion users). ============================================================================ */ html{scroll-behavior:smooth;} ::selection{background:rgba(184,145,47,.30);color:var(--ink);} /* gold-tinted highlight */ /* One accessible focus ring everywhere, in the site's gold — replaces the browser's default blue so keyboard focus looks intentional and on-brand. */ :focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:2px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ============================================================================ CROSS-PAGE MASTHEAD CONSISTENCY (added 13 Jul 2026) Moving between the non-home pages (Family Tree, Timeline, Family Papers, 404) used to feel jumpy: each set a different top gap below the shared 64px header and coloured its title crimson at a slightly different size. Fixed centrally here so it applies everywhere — including the regenerated tree page — instead of drifting per page. Specificity is raised just enough to win over each page's own inline rules; the home page (index) is deliberately untouched. • one consistent gap between the header and the first title • sub-page titles are ink-black — crimson stays reserved for the home page ============================================================================ */ body .wrap { padding-top: 32px; } /* all-families + timeline mastheads */ body main > .intro{ margin-top: 32px; } /* family-papers archive intro */ .wrap > h1, body .intro h1, body > .card > h1 { color: var(--ink); text-align: center; /* black + centred */ font-size: 2.15rem; letter-spacing: .5px; /* ONE title size on every sub-page */ } /* Keep the subtitle line under each masthead title centred too, so all three sub-pages share the same title + subtitle rhythm (not just the title). */ body .intro > .lede { text-align: center; } /* ============================================================================ INDEX / JOURNAL PAGE (theweltyproject.com/index.html) Migrated out of index.html's inline