/* ============================================================ Personality Mosaic — the ONE design theme (project override) The single master palette for the whole product: the dark deep-violet/blue aesthetic of the public marketing site (public/assets/public.css --pm-*), expressed through the shared --loom-* token vocabulary so EVERY surface and package inherits it — admin-core, The Round Table, The Stacks, plus the public and signed-in app shells. Loaded LAST in , after design-system/loom-tokens.css, on every surface (via ADMIN_CORE_PROJECT_CSS_URL, ROUND_TABLE_CSS_URLS, THE_STACKS_CSS_URLS, and the s in web/layout.php). Later same-or-higher-specificity :root wins the cascade, so this re-themes without editing the vendored token file — it survives `loom upgrade` / package reinstall. ONE SKIN, NO TOGGLE. The values are declared under BOTH :root and :root[data-theme="light"] (identical) so that even a stale localStorage preference or a pre-paint stub setting data-theme="light" still renders the PM dark aesthetic. The auto/light/dark toggle is removed product-wide (the theme JS is un-wired in each surface's config; the buttons are hidden below). Supersedes the retired grayscale public/admin-theme.css. Palette source: public/assets/public.css (--pm-bg-0 #070612, --pm-ink #e9eaf2, --pm-violet #b9a3ff, --pm-blue #7dd3fc, --pm-silver #c3c7d4). ============================================================ */ :root, :root[data-theme="light"] { /* ── Surfaces ────────────────────────────────────────────────────── Page is the near-black violet #070612; panels are lifted to violet- tinted darks (not translucent) so dense admin tables/forms/cards keep clear separation and legible borders. */ --loom-bg: #070612; /* page background (furthest back) */ --loom-surface: #120e2e; /* raised panels, cards, inputs */ --loom-surface-2: #191340; /* nested panels, popovers, menus */ --loom-surface-hover: #211a4f; /* hover/active row background */ --loom-line: #383072; /* borders, dividers, hairlines */ /* ── Text ──────────────────────────────────────────────────────────── */ --loom-text: #e9eaf2; /* primary text (--pm-ink) */ --loom-muted: #b0b4c6; /* secondary / de-emphasized */ --loom-faint: #8387a0; /* tertiary / faint (timestamps, hints) */ /* ── Brand / accent ──────────────────────────────────────────────── --loom-accent = the violet brand accent (nav underline, hover border). --loom-info = the chromatic accent for LINKS/focus — PM light blue, high-contrast on the near-black page. --loom-info-fill = a deeper violet for FILLS that carry white text (primary buttons, active nav) — white-on-it must be AA. */ --loom-accent: #b9a3ff; /* PM violet */ --loom-accent-text: #0b0a1a; /* dark text ON the light violet fill */ --loom-info: #7dd3fc; /* links / focus (PM blue) */ --loom-info-text: #9ad9fc; /* lighter, for info text on dark */ --loom-info-fill: #6a4bd4; /* deeper violet fill, white text (AA) */ --loom-info-rgb: 125, 211, 252; /* PM blue, for rgba() glows */ --loom-text-inverse: #ffffff; /* text on saturated fills */ /* ── Status (real hues, brightened for the darker page) ─────────────── */ --loom-ok: #5cc08a; --loom-ok-text: #86e0ac; --loom-ok-rgb: 92, 192, 138; --loom-warn: #d3b06a; --loom-warn-text: #e6c98c; --loom-warn-rgb: 211, 176, 106; --loom-err: #e5787f; --loom-err-text: #f2a3a8; --loom-err-rgb: 229, 120, 127; /* ── Feature accents (rooms, type badges, references) ─────────────── Pulled into the PM violet/blue family. */ --loom-purple: #b9a3ff; --loom-purple-text: #cdbcff; --loom-purple-rgb: 185, 163, 255; --loom-teal: #7dd3fc; --loom-teal-text: #a6e2fd; --loom-teal-rgb: 125, 211, 252; --loom-indigo: #8f9bff; --loom-indigo-text: #b3bcff; --loom-indigo-rgb: 143, 155, 255; --loom-gold: #d3b06a; --loom-gold-text: #e6c98c; --loom-gold-rgb: 211, 176, 106; /* ── Overlays / elevation ────────────────────────────────────────── Black scrims for modals; violet-tinted hover so hovers read on the violet darks rather than a flat white wash. */ --loom-scrim: rgba(7, 6, 18, 0.72); --loom-overlay-1: rgba(0, 0, 0, 0.30); --loom-overlay-2: rgba(0, 0, 0, 0.55); --loom-overlay-3: rgba(0, 0, 0, 0.80); --loom-hover: rgba(185, 163, 255, 0.06); --loom-hover-strong: rgba(185, 163, 255, 0.11); --loom-hover-rgb: 185, 163, 255; --loom-shadow-rgb: 0, 0, 0; --loom-muted-rgb: 176, 180, 198; /* ── Shape ────────────────────────────────────────────────────────── Slightly softer than the 8px default (the marketing aesthetic is round), but tighter than the 16px hero panels so admin density stays compact. */ --loom-radius: 10px; /* ── admin-core --ac-* alias layer (keep the shell chrome on-palette) ── */ --ac-accent: #b9a3ff; --ac-accent-fill: #6a4bd4; /* Fonts + the light/dark toggle machinery are inherited/removed elsewhere; --loom-font* cascade from loom-tokens.css unchanged (Inter / Manrope). */ } /* ── Base canvas ─────────────────────────────────────────────────────── Paint the page canvas dark and declare a dark color-scheme. Some surfaces (e.g. The Round Table) never set body{background} themselves — they relied on a host page to do it — so without this the viewport falls through to the browser default (white). Setting it on `html` (not `body`) means a surface that DOES paint its own body background still wins; this is only the fallback canvas. color-scheme:dark also makes native controls/scrollbars dark. */ :root { color-scheme: dark; } html { background: var(--loom-bg); } /* ── No theme toggle anywhere ────────────────────────────────────────── The auto/light/dark control is retired product-wide. The runtime JS is un-wired per surface (config), and any button that still renders (admin bar, Round Table minimal header, The Stacks viewer) is hidden here so the removal is robust regardless of which header path a surface takes. */ .ac-strip-theme, .ac-theme-toggle, .rt-theme-toggle, .ts-theme-toggle { display: none !important; } /* ── Scrollbars ──────────────────────────────────────────────────────── Themed to the dark violet palette across every surface (page + inner scroll panels like The Stacks doc tree / reader and The Round Table). A violet-tinted translucent thumb on a transparent track reads on any surface; the padding-box border insets it for a slimmer look. */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(185, 163, 255, 0.30) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(185, 163, 255, 0.28); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(185, 163, 255, 0.45); } ::-webkit-scrollbar-corner { background: transparent; } /* ── Site status notice ──────────────────────────────────────────────── Succinct, high-level "where the product is" NOTICE CARD rendered in the content of every page (pm_status_banner() in web/layout.php, all three shells). Colors + card treatment are Zoe Kimura's spec (2026-07-18): the "traditional yellow notice" convention rendered in the theme's tuned amber (--loom-warn) rather than a bright yellow, which vibrates on the dark violet canvas. Semantic = "in progress", not an error. All values are design-system tokens (AA-clean on #070612: body text ~11:1, pill ~9.5:1). Update the COPY in layout.php, not here. */ .pm-status-banner { display: flex; align-items: flex-start; /* pill anchors top-left on wrap */ gap: 0.65rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; /* own card in the content flow */ padding: 1rem 1.25rem; border: 1px solid rgba(var(--loom-warn-rgb), 0.42); border-left: 4px solid var(--loom-warn); /* the notice spine */ border-radius: var(--loom-radius); background: rgba(var(--loom-warn-rgb), 0.10); font-size: 0.9rem; line-height: 1.5; } .pm-status-pill { flex: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; font-weight: 700; color: var(--loom-accent-text); background: var(--loom-warn); padding: 0.18rem 0.55rem; border-radius: 999px; margin-top: 0.05rem; /* optical align to first text line */ } .pm-status-text { color: var(--loom-warn-text); flex: 1; min-width: 12rem; }