/* ============================================================================ Body Alchemy - site theme tokens for the factory section library. This is a TRANSLATION of the hand-written brand palette, not a redesign: every value below is lifted from the pre-CMS stylesheet so CMS-rendered sections reproduce the existing look. Load order (see the chrome:head seam): architecture.css, then styles.css, then this file, which loads last so its :root token values are the ones that resolve. REWRITTEN 2026-08-17. Two claims here were true when written and are not now. styles.css no longer "stays because the static pages depend on it" - there are no static pages left, and that file has been cut from 174 selectors to a short list of this site's own chrome and type decisions; the old copy sits at styles.css.pre-cms-backup outside src/, unlinked and undeployed. And the fonts are no longer on the Google CDN: the FONTS section below is populated and both families are self-hosted from /assets/fonts/. Lines between THEME:END and FONTS:START stay site-owned across refreshes. ========================================================================== */ /* THEME:START (body-alchemy) */ :root { --bg: #f4ede2; /* styles.css --bg-cream: body and light bands */ --bg-alt: #ebe2d2; /* styles.css --bg-cream-2: alternate band */ --bg-dark: #0E0F12; /* styles.css --bg-deep: the dark she actually uses. styles.css declares its own --bg-dark (#181a1f) but references it nowhere, so this override changes nothing on the static pages. */ --ink: #1a1a1d; /* styles.css --ink */ --ink-inverse: #eae3d8; /* styles.css --cream: text on dark surfaces */ --muted: #6c6760; /* styles.css --muted-dark: the muted text a reader is meant to read on light bands. styles.css --muted (#8a847c) has exactly one consumer, .footer__credit - pinned below so the static footer keeps its color. */ --line: rgba(156, 165, 113, 0.25); /* styles.css --line, olive-tinted */ --accent: #9CA571; /* styles.css --olive */ --accent-deep: #7a8159; /* styles.css --olive-deep: link tone on light */ --accent-2: #c6a7c5; /* styles.css --mauve-soft: accent text on dark (her dark-section eyebrows) */ --accent-2-deep: #7d6182; /* styles.css --mauve-deep: eyebrows on light */ /* The lighter olive, for hover states and the accent word in the hero H1. Carried over from the pre-CMS palette, where it was --olive-soft. */ --accent-soft: #b8c28a; --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 2.7rem; --space-6: 4rem; --space-7: 5.75rem; --max-w: 1140px; --radius: 4px; --shadow: 0 20px 50px rgba(0, 0, 0, 0.25); /* softened from the hero logo's 0 30px 70px rgba(0, 0, 0, 0.5), the only shadow in styles.css - her cards are otherwise flat */ /* Olive is a midtone: button labels need dark ink, never cream on olive. */ --btn-ink: #1a1a1d; } /* THEME:END */ /* Site-owned overrides - keep between THEME:END and FONTS:START. */ /* Type scale: match the hand-written heading clamps in styles.css so sections rendered from architecture.css size type identically. --text-sub matches .hero__lead (1.2rem). Static pages are unaffected: styles.css sizes h1-h3 directly and never reads these tokens. */ :root { --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: clamp(1.85rem, 3.5vw, 2.75rem); --text-h3: clamp(1.4rem, 2.5vw, 1.75rem); --text-sub: 1.2rem; } /* styles.css colors .footer__credit with its own --muted (#8a847c). This file maps the --muted token to the reading gray (#6c6760) instead, so pin the one consumer to its original color - the static footer must not shift. */ .footer__credit { color: #8a847c; } /* FONTS:START (generated) */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* FONTS:END */ /* --------------------------------------------------------------------------- Brand details, site-owned. This file is never overwritten by sync-admin (theme.css is a site's own tokens), which is why these live here and not in architecture.css - they are Body Alchemy's, not the factory's. The short rule under a section heading was in the hand-built site as `.two-col > div > h2::after` and was lost when the CMS took over the markup. It is decorative, so it stays in CSS rather than becoming content, and it is hidden from assistive tech by being generated content with an empty string. var(--accent) is the sage-olive #9CA571 the old stylesheet called --olive. --------------------------------------------------------------------------- */ .prose-band .container > h2::after, .pricing .band__head > h2::after, .card-grid ~ * .band__head > h2::after { content: ""; display: block; width: 32px; height: 2px; background: var(--accent); border-radius: 1px; margin: 0.75rem 0 1rem; } /* On the dark band the olive is too close to the ground to read, so the rule switches to the inverted ink at reduced strength. */ .band--dark .container > h2::after { background: color-mix(in srgb, var(--ink-inverse) 55%, transparent); }