/* ========================================================================== SIGIL THEME KIT — shared light mode for every Sigillite module. Requires the house variable vocabulary (--bg, --panel, --ink, --gold, ...) which all modules already use. Include this AFTER the module's own CSS, together with sigil-theme.js (which applies the choice and injects a floating toggle). Dark stays each module's default; flips to the parchment codex. The choice is shared across *.himalazia.cloud apps via the sigil_theme cookie. Canonical copy: /opt/sigillite/shared-theme/ — copy both files into any new module's static root and add the two tags to its . ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #e7dfcc; --bg2: #f0e9d8; --panel: #f4efe1; --panel2: #faf6ea; --inset: #e7dfc9; --line: #d3c7ab; --line2: #b8aa89; --ink: #221c12; --ink-dim: #443b2c; --muted: #6f6450; --faint: #998c72; --red: #a32e1f; --red-hi: #c0402d; --red-dim: #dfb3a9; --gold: #8a6d17; --gold-hi: #6e5712; --gold-dim: #cdb96e; --ok: #5c7433; --warn: #8f6408; --shadow: 0 14px 40px rgba(70, 55, 25, .18); } /* generic light-mode fixups that hold for any module built on the kit vars */ :root[data-theme="light"] body { background: radial-gradient(1100px 640px at 78% -12%, rgba(163, 46, 31, .05), transparent 60%), radial-gradient(860px 560px at -8% 108%, rgba(138, 109, 23, .06), transparent 55%), linear-gradient(var(--bg2), var(--bg) 380px); background-attachment: fixed; } :root[data-theme="light"] ::selection { background: var(--red); color: #fdf8ec; } :root[data-theme="light"] .grain { opacity: .04; } :root[data-theme="light"] .masthead { background: rgba(240, 233, 216, .92); box-shadow: 0 1px 0 rgba(70, 55, 25, .12); } /* module strip — the second menu sigil-shell.js renders below the masthead on modules without their own module nav (e.g. the scheduler) */ .sigil-strip { position: sticky; top: 58px; z-index: 99; display: flex; align-items: center; gap: 2px; padding: 0 22px; height: 40px; background: var(--panel, #151210); border-bottom: 1px solid var(--line, #292420); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .sigil-strip .strip-spacer { flex: 1; } .sigil-strip a.shell-link { padding: 6px 12px; font-size: 12.5px; border-bottom-width: 2px; } .sigil-strip .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 13px; line-height: 1; color: var(--muted); background: transparent; border: 1px solid var(--line2); border-radius: 50%; cursor: pointer; transition: color .15s, border-color .15s, transform .3s; } .sigil-strip .theme-btn:hover { color: var(--gold); border-color: var(--gold-dim); transform: rotate(40deg); } .sigil-strip .theme-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } :root[data-theme="light"] .sigil-strip { box-shadow: 0 6px 18px rgba(70, 55, 25, .1); } /* module links injected by sigil-shell.js (cross-app nav) */ .shell-sep { width: 1px; height: 18px; background: var(--line2); margin: 0 6px; align-self: center; } a.shell-link { font-family: var(--font-sc, var(--font-label, sans-serif)); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-decoration: none; color: var(--muted); padding: 8px 12px; border-bottom: 2px solid transparent; text-transform: uppercase; transition: color .15s; } a.shell-link:hover { color: var(--ink); } a.shell-link.on { color: var(--gold-hi, var(--gold)); border-bottom-color: var(--gold); } /* floating toggle injected by sigil-theme.js (only when the page doesn't provide its own #themer button, as the reels app does) */ #sigil-theme-btn { position: fixed; top: 12px; right: 14px; z-index: 3000; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 14px; line-height: 1; color: var(--muted); background: var(--panel, #161310); border: 1px solid var(--line2, #3d362c); border-radius: 50%; cursor: pointer; opacity: .75; transition: color .15s, border-color .15s, transform .3s, opacity .15s; } #sigil-theme-btn:hover { color: var(--gold); border-color: var(--gold-dim); transform: rotate(40deg); opacity: 1; } #sigil-theme-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }