/* Conselyea theme tokens — shared across every portal page. * * Two distinct moods, not light-as-inverted-dark: * * DARK — atmospheric, moody, with ambient color blooms and glow halos * on interactive moments. Background is deep #0a0a0a, panels lift * slightly with gradient. The page feels like Apple Music's now- * playing screen — there are light sources. * * LIGHT — stark, clean, austere. Pure white, no warmth, no decoration, * near-invisible borders, whispered shadows. The page feels like * a freshly printed magazine page — content-led, no chrome. * * Loaded once per page. Default palette is DARK (no attribute needed). * Light mode is opt-in via `html[data-theme="light"]` — set synchronously * in before page CSS runs to avoid a flash of incorrect theme. * * Manual-toggle only (no prefers-color-scheme watcher) — chosen 2026-05-19. */ /* ===================================================================== * DARK (default) — moody + glows * ===================================================================== */ :root { color-scheme: dark; /* Surfaces — deeper than before, more atmospheric */ --bg: #0a0a0a; --panel: #161616; --panel-2: #1c1c1c; --input-bg: #141414; --input-bg-hover: #181818; --kbd-bg: #1f1f1f; --popover-bg: #1a1a1a; --popover-bg-2: #131313; --file-icon-bg: #161616; /* Panel gradient — keeps the lift in dark mode */ --panel-gradient: linear-gradient(180deg, var(--panel-2), var(--panel)); /* Translucent overlays */ --header-glass: rgba(10, 10, 10, 0.78); --scrim: rgba(0, 0, 0, 0.70); --row-hover: rgba(255, 255, 255, 0.025); --row-hover-cool: rgba(78, 168, 222, 0.045); --row-hover-warm: rgba(224, 108, 117, 0.045); /* Text */ --text: #ededed; --text-2: #a8a8a8; --muted: #6e6e6e; /* Borders — soft on the deeper background */ --border: #303030; --border-soft: #242424; /* Brand — constant across themes */ --cyan: #4EA8DE; --salmon: #E06C75; --warn: #ffd43b; --good: #4EA8DE; /* Semantic accent aliases */ --accent: var(--cyan); --accent-warm: var(--salmon); /* Accent tints */ --accent-tint: rgba(78, 168, 222, 0.12); --accent-tint-warm: rgba(224, 108, 117, 0.12); --accent-tint-warm-soft: rgba(224, 108, 117, 0.07); --button-fill: rgba(78, 168, 222, 0.06); --button-fill-hover: rgba(78, 168, 222, 0.13); /* ----- THE MOOD: ambient background blooms + glow halos ----- */ /* Background radial blooms — more present than v1, the atmosphere */ --bloom-1: rgba(78, 168, 222, 0.11); /* cool, top-left */ --bloom-2: rgba(224, 108, 117, 0.09); /* warm, top-right */ --bloom-3: rgba(168, 124, 224, 0.06); /* violet, bottom — adds depth */ /* Glow halos for interactive moments. Used as box-shadow or filter. These resolve to `none` in light mode so the same selectors stay clean. */ --glow-warm: 0 0 32px rgba(224, 108, 117, 0.22); --glow-warm-tight: 0 0 14px rgba(224, 108, 117, 0.28); --glow-cool: 0 0 28px rgba(78, 168, 222, 0.20); --glow-cool-tight: 0 0 12px rgba(78, 168, 222, 0.32); --glow-warn: 0 0 18px rgba(255, 212, 59, 0.30); /* Subtle salmon halo for the active brand element (e.g. avatar) */ --halo-brand: 0 0 0 1px rgba(224, 108, 117, 0.18), 0 0 22px rgba(224, 108, 117, 0.18); /* Shadows — heavier on dark, gives objects real weight */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65); /* Geometry + typography */ --radius: 14px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* ===================================================================== * LIGHT (opt-in) — stark + clean * --------------------------------------------------------------------- * Deliberately not warm cream. Pure white, hard contrast, near-invisible * borders, whispered shadows. No ambient blooms. No glows. The page is * supposed to read like printed paper — content-led, undecorated. * Salmon is the single chromatic moment. * ===================================================================== */ html[data-theme="light"] { color-scheme: light; /* Surfaces — austere, no warmth */ --bg: #ffffff; --panel: #ffffff; --panel-2: #ffffff; --input-bg: #f4f4f4; --input-bg-hover: #ededed; --kbd-bg: #e8e8e8; --popover-bg: #ffffff; --popover-bg-2: #ffffff; --file-icon-bg: #f4f4f4; /* Panel "gradient" — collapsed to flat in light mode so panels read as paper, not as a lifted surface */ --panel-gradient: var(--panel); /* Translucent overlays */ --header-glass: rgba(255, 255, 255, 0.86); --scrim: rgba(20, 20, 20, 0.36); --row-hover: rgba(0, 0, 0, 0.025); --row-hover-cool: rgba(78, 168, 222, 0.06); --row-hover-warm: rgba(224, 108, 117, 0.05); /* Text — hard contrast, near-black */ --text: #0a0a0a; --text-2: #525252; --muted: #989898; /* Borders — close to invisible. Light mode trusts whitespace over rules. */ --border: #ececec; --border-soft: #f4f4f4; /* Tints — single chromatic moments rather than ambient washes */ --accent-tint: rgba(78, 168, 222, 0.10); --accent-tint-warm: rgba(224, 108, 117, 0.11); --accent-tint-warm-soft: rgba(224, 108, 117, 0.05); --button-fill: rgba(78, 168, 222, 0.07); --button-fill-hover: rgba(78, 168, 222, 0.13); /* ----- THE MOOD: no atmosphere, no glow ----- */ /* Blooms collapsed — light mode is unornamented */ --bloom-1: transparent; --bloom-2: transparent; --bloom-3: transparent; /* Glows resolve to nothing in light mode */ --glow-warm: none; --glow-warm-tight: none; --glow-cool: none; --glow-cool-tight: none; --glow-warn: none; --halo-brand: none; /* Shadows — whispered, almost imperceptible */ --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.03); --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.06); } /* ===================================================================== * Base rules * ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 500; background: radial-gradient(circle at 24% 0%, var(--bloom-1) 0, transparent 34rem), radial-gradient(circle at 82% 14%, var(--bloom-2) 0, transparent 38rem), radial-gradient(circle at 50% 92%, var(--bloom-3, transparent) 0, transparent 40rem), var(--bg); background-attachment: fixed; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: background-color 180ms ease, color 180ms ease; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } /* ===================================================================== * Theme toggle button — shared, drops into any page's header actions * ===================================================================== */ .theme-toggle { width: 34px; height: 34px; border-radius: 8px; background: transparent; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); position: relative; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .theme-toggle:hover { background: var(--panel); border-color: var(--border); color: var(--text); box-shadow: var(--glow-warm-tight); /* glows in dark, nothing in light */ } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: inline; } .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: inline; } @media (max-width: 720px) { .theme-toggle { width: 44px; height: 44px; border-radius: 10px; } .theme-toggle svg { width: 19px; height: 19px; } } /* ===================================================================== * Asset fix — the bundled `conselyea-logo - White.svg` is hard-coded * white. In light mode, invert it via filter for a near-black silhouette * (rather than ship a second asset). Drop this rule when a real dark * logo asset exists. * ===================================================================== */ html[data-theme="light"] .brand-logo { filter: brightness(0); }