/* Shared theme flavors for the secondary pages (about, contact, privacy and /docs). Mirrors the soft & aqua palettes defined in /index.html so the whole site follows the visitor's saved choice (the app's `asay:flavor` key); each page sets data-flavor on via a small inline bootstrap in . Only the variables the secondary pages actually use are overridden. */ :root[data-flavor='soft'] { --bg: #f7efe3; --surface: #fffaf3; --surface-soft: #f8f0e5; --ink: #211d17; --ink-soft: #5f574b; --muted: #8b8173; --line: #ece0cf; --line-strong: #ddceb8; --primary: #262019; --primary-press: #3d352b; --primary-tint: #f2e8d9; --indigo: #b5754a; --pos: #196e3e; --pos-bg: #daf0e1; } :root[data-flavor='soft'] body { background-color: #f7efe4; background-image: radial-gradient(120% 50% at 82% -5%, #f8d7b6 0%, rgba(248, 215, 182, 0) 60%); background-repeat: no-repeat; } :root[data-flavor='soft'] .logo { background: linear-gradient(150deg, #f9b17a, #ef6f6c); } :root[data-flavor='aqua'] { --bg: #ececea; --surface: #ffffff; --surface-soft: #f5f5f4; --ink: #2b2b2b; --ink-soft: #5c5c5c; --muted: #9a9a9a; --line: #ececec; --line-strong: #dadada; --primary: #2fb9c6; --primary-press: #279fab; --primary-tint: #e3f5f7; --indigo: #3fa9d0; --pos: #15a06a; --pos-bg: #e4f5ec; } :root[data-flavor='aqua'] body { background-color: #ececea; background-image: radial-gradient(120% 50% at 82% -5%, #d6f2f4 0%, rgba(214, 242, 244, 0) 60%); background-repeat: no-repeat; } :root[data-flavor='aqua'] .logo { background: linear-gradient(150deg, #2fb9c6, #3fa9d0); } /* ---------- shared footer (identical markup on every page — see /index.html) */ footer { padding-block: 44px 60px; } /* The article pages use a narrow reading wrap (720–760px); the footer ignores it and spans the landing page's full 1120px so it looks the same site-wide. */ footer .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; } .foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 30px; } .foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; } .foot-links a { color: var(--ink-soft); text-decoration: none; } .foot-links a:hover { color: var(--ink); } .foot-note { color: var(--muted); font-size: 13px; } .foot-in .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }