/* ============================================================ Concordia — Cosmic Night theme :root[data-theme="night"] Tsalel × the God-Machine: a void-black field, cold brass machinery, and violet cosmic depth — plus the chrome for the animated sigil-transmission background (The Calling glyphs). Layer this AFTER colors_and_type.css. Non-destructive: only takes effect when . ============================================================ */ @font-face { font-family: "The Calling"; src: url("/fonts/the-calling/TheCalling.ttf") format("truetype"); font-display: swap; } :root[data-theme="night"] { /* --- the void & its surfaces --- */ --paper: #080a10; /* the void */ --paper-aged: #11151f; /* panel / card */ --paper-deep: #171c28; /* hover wash */ --surface-hi: #1b2230; /* raised surface */ /* --- text (cold parchment / starlight) --- */ --ink: #dce0e8; --ink-strong: #f1f4fa; --ink-faded: #8a93a6; /* --- structure (cool slate hairlines) --- */ --sepia: #2b3340; --sepia-soft: #1c2330; /* --- accents --- */ --rubric: #c8654c; /* ember — danger / errors */ --rubric-deep: #9c4634; --verdigris: #5e9c72; /* oxidized copper — success / machine-green */ --verdigris-deep:#3f6f50; --indigo: #8a6ee0; /* cosmic violet — links / magic */ --indigo-deep: #6a4fc0; /* --- night-only accents --- */ --brass: #c2a04e; /* the God-Machine: cold brass */ --brass-soft: #8a7437; --cosmic: #8a6ee0; /* violet (mirrors --indigo) */ --sigil: #9db6ce; /* the transmission glyph hue */ /* --- semantic remaps --- */ --bg: var(--paper); --surface: var(--paper-aged); --fg: var(--ink); --fg-strong: var(--ink-strong); --fg-muted: var(--ink-faded); --border: var(--sepia); --border-soft:var(--sepia-soft); --link: var(--indigo); --link-hover: var(--brass); --danger: var(--rubric); --success: var(--verdigris); --info: var(--indigo); --selection: rgba(138, 110, 224, 0.22); /* shadows: deep void + cool depth */ --shadow-1: 0 1px 2px rgba(0,0,0,0.55); --shadow-2: 0 4px 16px rgba(0,0,0,0.60); --shadow-3: 0 12px 40px rgba(0,0,0,0.70); color-scheme: dark; } /* faint cosmic depth painted onto the page itself, beneath the stream: a violet rift upper-right, a verdigris glow lower-left, a brass core. */ :root[data-theme="night"] body { background: radial-gradient(1200px 820px at 80% -12%, rgba(138,110,224,0.10), transparent 60%), radial-gradient(1000px 720px at 10% 112%, rgba(94,156,114,0.06), transparent 60%), radial-gradient(900px 640px at 50% 48%, rgba(194,160,78,0.035), transparent 70%), var(--paper); background-attachment: fixed; } /* a faint violet halo under links in night mode (the magic reads as lit) */ :root[data-theme="night"] a { text-shadow: 0 0 10px rgba(138,110,224,0.22); } /* Storyteller headers in the feed: the manuscript sepia/rubric heading inks go near-black on the void, so relight them in on-theme metallics for night. The "~ Storyteller ~" byline reads as the GM voice in cold brass. */ :root[data-theme="night"] .st-story-header { color: var(--brass); text-shadow: 0 0 12px rgba(194,160,78,0.30); } :root[data-theme="night"] .st-story-md h3 { color: var(--rubric); } :root[data-theme="night"] .st-story-md h4 { color: var(--brass); } /* ============================================================ The animated sigil-transmission background ============================================================ */ #cosmic-bg { position: fixed; inset: 0; z-index: 0; /* behind #root (which sets isolation: isolate) */ pointer-events: none; overflow: hidden; display: none; /* shown only in night mode */ font-family: "The Calling", "JetBrains Mono", monospace; /* fade the streams out toward the top & bottom edges */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); contain: strict; } :root[data-theme="night"] #cosmic-bg { display: block; } /* two flanking columns frame the content — God-Machine symmetry, Tsalel hush between. Each is faded toward the centre so they hug the left/right edges. */ .cosmic-stream { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; /* newest line pinned to the bottom; older scroll up */ width: 58%; padding: 2vh 2.5vw; box-sizing: border-box; gap: 0.14em; overflow: hidden; } .cosmic-stream--left { left: 0; text-align: left; -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%); mask-image: linear-gradient(to right, #000 50%, transparent 100%); } .cosmic-stream--right { right: 0; text-align: right; -webkit-mask-image: linear-gradient(to left, #000 50%, transparent 100%); mask-image: linear-gradient(to left, #000 50%, transparent 100%); } .cosmic-line { font-size: 15px; line-height: 1.5; letter-spacing: 0.20em; white-space: nowrap; /* faintness lives in the colour alpha (not element opacity) so individual glyphs can flare brighter than their own line during the glow effect */ color: rgba(157, 182, 206, 0.12); user-select: none; } .cosmic-line.is-brass { color: rgba(194, 160, 78, 0.15); } .cosmic-line.is-violet { color: rgba(138, 110, 224, 0.16); } .cosmic-line.is-verd { color: rgba(94, 156, 114, 0.13); } .cosmic-glyph { display: inline-block; transition: text-shadow 700ms ease; } .cosmic-glyph.is-glow { text-shadow: 0 0 6px currentColor, 0 0 16px currentColor; } /* archive "decode" snippet: a real sentence shown readable (Ubuntu) + glowing, then a cursor rewrites it into the glyph cipher (driven by cosmic-bg.js) */ .cosmic-snippet { font-family: var(--font-body, sans-serif); letter-spacing: 0.06em; color: rgba(220, 236, 255, 0.96); text-shadow: 0 0 8px rgba(190, 220, 255, 0.45), 0 0 18px rgba(138, 110, 224, 0.30); } .cosmic-snip-ch { display: inline-block; } .cosmic-caret { display: inline-block; color: rgba(222, 238, 255, 0.98); text-shadow: 0 0 8px currentColor; animation: cosmic-caret-blink 0.8s steps(1) infinite; } @keyframes cosmic-caret-blink { 50% { opacity: 0; } } /* faint scanlines + a soft vignette — the transmission on a dead screen */ #cosmic-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px), radial-gradient(125% 125% at 50% 45%, transparent 58%, rgba(2,4,8,0.55) 100%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .cosmic-line { transition: none !important; } } /* ---- the theme-toggle control (shared by app + reader pages) ---- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4em; background: transparent; border: 1px solid var(--border-soft); color: var(--fg-muted); border-radius: 999px; padding: 4px 12px; font-family: var(--font-body, sans-serif); font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .theme-toggle:hover { color: var(--fg-strong); border-color: var(--border); } :root[data-theme="night"] .theme-toggle:hover { box-shadow: 0 0 14px rgba(138,110,224,0.30); border-color: var(--cosmic); } /* ---- let the sigil-stream show through the app's full-height shells ---- The main session relies on for its background, so the stream shows there already; these are the screens/containers that otherwise paint an opaque --bg over it. Panels, cards, headers and sidebars keep their solid --surface/--paper fills for legibility. */ :root[data-theme="night"] .login-root, :root[data-theme="night"] .root-loading, :root[data-theme="night"] .cr-app { background: transparent; } /* floating placement for the toggle on the reader pages (the React app renders its own toggle inside the topbar instead) */ /* the toggle group — night/day + Motion/Still, side by side. The React app drops this pair inline in the topbar; the reader pages float it bottom-right. */ .concordia-controls { display: inline-flex; align-items: center; gap: 8px; } .concordia-controls--floating { position: fixed; right: 16px; bottom: 16px; z-index: 60; } .concordia-controls--floating .theme-toggle { background: var(--surface); box-shadow: var(--shadow-2); }