/* ═══════════════════════════════════════════════════════════════════ Syntopi.com — Peacock Palette Canonical color-token reference for the full site. Single source of truth. All hex values defined here flow into: • root index.html (landing) • tools/phase2_prototype/index.html (Galaxy) • tools/editor/_template.html + _index_template.html + _about_template.html + _author_template.html + _review_template.html • tools/propaidia/*.html • scripts/build_viz_data.py FAMILY_STYLES (Galaxy star colors) Palette identity: peacock-feather jewel tones — deep cobalt body, teal-turquoise neck, emerald feathers, warm gold eye-spot centers, bronze/copper mid-tones, cream grounding. Considered rather than defaulted. Mirrors the intellectual seriousness of the material. WCAG AA audit (4.5:1 for normal text, 3:1 for large/bold): --color-cobalt-text on --color-cream: 7.5:1 ✓ AAA --color-teal-text on --color-cream: 5.2:1 ✓ AA --color-emerald-text on --color-cream: 5.1:1 ✓ AA --color-gold-text on --color-cream: 4.6:1 ✓ AA --color-bronze-text on --color-cream: 5.1:1 ✓ AA --color-indigo-text on --color-cream: 6.8:1 ✓ AAA --color-cobalt-display on dark bg: 7.1:1 ✓ AAA --color-teal-display on dark bg: 6.2:1 ✓ AA --color-gold-display on dark bg: 6.8:1 ✓ AAA See docs/handoffs/PALETTE_A11Y.md for full audit. Non-goals: body text is NOT peacock-colored. Near-black on cream (light) and near-white on deep-navy (dark) carry all body copy. Peacock tokens appear on: stars, borders, links, focus rings, category indicators, sort-tab accents, CTA highlights. ═══════════════════════════════════════════════════════════════════ */ :root { /* ────────────────────────────────────────────── Base peacock hues (pure spec values) Design-identity anchors; one per Adler family. ────────────────────────────────────────────── */ --color-cobalt: #1438A8; /* Logic & Language */ --color-teal: #17A8A8; /* Mathematics & Nat. Sci. */ --color-emerald: #2E7D3A; /* Life, Mind & Man */ --color-gold: #D4A03A; /* Ethics & Virtue */ --color-bronze: #9B6A3D; /* Society, Politics & History */ --color-indigo-black: #0A1530; /* Metaphysics & Theology */ --color-cream: #F5EFE2; /* Light-mode ground */ /* ────────────────────────────────────────────── Display variants (dark-mode / Galaxy) Brightened / lightened for visibility on the deep-navy nebula background. Stars, borders, link underlines, category indicators on dark. ────────────────────────────────────────────── */ --color-cobalt-display: #5888E8; /* bright cobalt */ --color-teal-display: #28C8C8; /* bright teal */ --color-emerald-display: #48C860; /* bright emerald */ --color-gold-display: #E8B840; /* bright gold/amber */ --color-bronze-display: #C88050; /* bright copper/bronze */ --color-indigo-display: #9090E0; /* medium indigo/lavender */ /* ────────────────────────────────────────────── Galaxy star variants (slightly more saturated than display — used in build_viz_data.py FAMILY_STYLES before the 0.65× desaturation the Galaxy applies for ambient stars). ────────────────────────────────────────────── */ --color-cobalt-star: #4878FF; --color-teal-star: #20D0D0; --color-emerald-star: #40C868; --color-gold-star: #F0C040; --color-bronze-star: #D09050; --color-indigo-star: #A0A0F8; /* ────────────────────────────────────────────── Text-safe variants (light-mode / cream bg) Dark enough for WCAG AA 4.5:1 on --color-cream. Cobalt passes at its pure value; others darkened. ────────────────────────────────────────────── */ --color-cobalt-text: #1438A8; /* 7.5:1 on cream ✓ pure */ --color-teal-text: #0C6868; /* 5.2:1 on cream ✓ */ --color-emerald-text: #1E5824; /* 5.1:1 on cream ✓ */ --color-gold-text: #8A5E18; /* 4.6:1 on cream ✓ */ --color-bronze-text: #6A4218; /* 5.0:1 on cream ✓ */ --color-indigo-text: #2838A8; /* 6.8:1 on cream ✓ */ /* ────────────────────────────────────────────── Family canonical map Reference these in component CSS instead of hardcoding hex. Galaxy reads from data.js (build_viz_data.py FAMILY_STYLES — keep in sync). ────────────────────────────────────────────── */ --family-logic: var(--color-cobalt-display); --family-math: var(--color-teal-display); --family-life: var(--color-emerald-display); --family-ethics: var(--color-gold-display); --family-society: var(--color-bronze-display); --family-metaphysics: var(--color-indigo-display); /* ────────────────────────────────────────────── Semantic aliases (dark mode) Inherit these in components rather than repeating a specific family color. ────────────────────────────────────────────── */ --color-link: var(--color-cobalt-display); --color-link-hover: var(--color-gold-display); --color-accent: var(--color-teal-display); --color-focus-ring: var(--color-cobalt-display); /* ────────────────────────────────────────────── Neutral grey scale Body text + surface colors. Peacock is accent; these neutrals do the structural work. ────────────────────────────────────────────── */ --neutral-950: #060810; --neutral-900: #0a0c14; --neutral-800: #12141e; --neutral-700: #1e2030; --neutral-600: #2e3040; --neutral-500: #5a5e72; --neutral-400: #888ca0; --neutral-300: #b8bcc8; --neutral-200: #dde0e8; --neutral-100: #f0f2f5; --neutral-50: #f9fafb; /* ────────────────────────────────────────────── Border-radius scale (P2-6, 2026-04-26 audit) Editor templates have always used 8 / 12. The homepage previously used 10 / 14; aligned to these tokens for cross-surface consistency. ────────────────────────────────────────────── */ --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ────────────────────────────────────────────── Type scale — documentation reference (P2-7) CSS custom properties cannot interpolate inside `font-size: clamp()`, so these values are hand-mirrored across templates. Keep in sync. Hierarchy: hero h1: clamp(36px, 7vw, 56px) — homepage page h1: 32-36px — editor pages h2: clamp(22px, 3.2vw, 28px) — homepage / about h3: 20px — about body: 16-17px — body copy meta: 11.5-13px — labels, metadata Migration target (P2-7): unify hero h1 fluid scale across landing + editor surfaces. Not yet shipped. ────────────────────────────────────────────── */ /* ────────────────────────────────────────────── Mobile breakpoints — documentation reference (P2-8) CSS does not allow custom properties inside `@media (max-width: …)`, so these values are hand-mirrored across stylesheets. Keep in sync when introducing new breakpoints. --bp-sm: 600px — phone landscape ↑ small tablet --bp-md: 768px — tablet portrait --bp-lg: 980px — small laptop --bp-xl: 1200px — large laptop ↑ desktop Migration target (P2-8): collapse the existing ad-hoc breakpoints (480/560/640/720/760/767/880/920) onto these four canonical values. ────────────────────────────────────────────── */ } /* ────────────────────────────────────────────────── Light-mode overrides On cream backgrounds, text-safe variants replace display variants for any accented text. ─────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { --color-link: var(--color-cobalt-text); --color-link-hover: var(--color-gold-text); --color-accent: var(--color-teal-text); --color-focus-ring: var(--color-cobalt-text); --family-logic: var(--color-cobalt-text); --family-math: var(--color-teal-text); --family-life: var(--color-emerald-text); --family-ethics: var(--color-gold-text); --family-society: var(--color-bronze-text); --family-metaphysics: var(--color-indigo-text); } } /* ────────────────────────────────────────────────── Status tokens — quote-audit grading badges (audit-correct / audit-incomplete / audit-wrong / audit-uncertain + grade-correct / grade-wrong / grade-incomplete / grade-uncertain). Previously hardcoded hexes in _template.html + _author_template.html (DESIGN_AUDIT I-10). Light/dark variants below. ─────────────────────────────────────────────────── */ :root { --status-ok-bg: #d4edda; /* correct */ --status-ok-fg: #1a5e2a; --status-warn-bg: #fff3cd; /* incomplete */ --status-warn-fg: #6a4100; /* 4.6:1 on #fff3cd ✓ AA (was #7d4e00 / 3.2:1, A11Y-3) */ --status-err-bg: #f8d7da; /* wrong */ --status-err-fg: #842029; --status-neutral-bg: #f1efe8; /* uncertain — matches --surface-alt */ --status-neutral-fg: #5f5e5a; } @media (prefers-color-scheme: dark) { :root { --status-ok-bg: #27500a; --status-ok-fg: #c0dd97; --status-warn-bg: #633806; --status-warn-fg: #fac775; --status-err-bg: #5c1a1a; --status-err-fg: #f7a0a0; --status-neutral-bg: #333330; --status-neutral-fg: #888780; } } /* ────────────────────────────────────────────────── Explicit dark-theme class For components that force dark regardless of system preference (e.g. Galaxy, full-page dark panels). ─────────────────────────────────────────────────── */ [data-theme="dark"] { --color-link: var(--color-cobalt-display); --color-link-hover: var(--color-gold-display); --color-accent: var(--color-teal-display); --color-focus-ring: var(--color-cobalt-display); --family-logic: var(--color-cobalt-display); --family-math: var(--color-teal-display); --family-life: var(--color-emerald-display); --family-ethics: var(--color-gold-display); --family-society: var(--color-bronze-display); --family-metaphysics: var(--color-indigo-display); } /* ────────────────────────────────────────────────── Text selection — brand colors. Browser-default blue leaked through every surface; cobalt-tinted fill + peacock cobalt-text flips to the same family on light/dark via prefers-color-scheme below. 2026-04-26 (Tom: "match selection highlight to color scheme"). ─────────────────────────────────────────────────── */ ::selection { background: color-mix(in srgb, var(--color-cobalt-display) 35%, transparent); color: var(--color-cobalt-display); } ::-moz-selection { background: color-mix(in srgb, var(--color-cobalt-display) 35%, transparent); color: var(--color-cobalt-display); } @media (prefers-color-scheme: light) { ::selection { background: color-mix(in srgb, var(--color-cobalt-text) 22%, transparent); color: var(--color-cobalt-text); } ::-moz-selection { background: color-mix(in srgb, var(--color-cobalt-text) 22%, transparent); color: var(--color-cobalt-text); } } /* ────────────────────────────────────────────────── High-contrast fallback At the user's request, collapse to near-black on cream (light) or near-white on dark (dark) so color is never the sole differentiator. ─────────────────────────────────────────────────── */ @media (prefers-contrast: more) { :root { --color-link: #000000; --color-link-hover: #000000; --color-accent: #000000; --color-focus-ring: #000000; } @media (prefers-color-scheme: dark) { :root { --color-link: #ffffff; --color-link-hover: #ffffff; --color-accent: #ffffff; --color-focus-ring: #ffffff; } } }