/* ========================================================= RedemptionArc — Brightness levels Loaded by BOTH the public site and the admin panel, always after the page stylesheet. The palette is one very dark theme, which is unreadable on dim screens, in daylight, or with low-contrast displays. Every surface and text colour already goes through a custom property, so lifting the whole UI is a matter of swapping those properties on — no per-component overrides. Selectors are html[data-bright="…"] (0,1,1) so they win over the :root blocks in style.css / admin.css / builder.css no matter which file the browser parses last. ========================================================= */ /* Tokens that had no variable before: translucent bars and the terminal surfaces inside articles. Defaults match the old hard-coded values exactly, so level 0 looks untouched. */ :root { --bg-glass: rgba(7, 11, 18, 0.85); --bg-panel-glass: rgba(13, 19, 30, 0.92); --code-bg: #060a11; --code-bg-deep: #05080e; --code-text: #c8d3e3; --block-hover: rgba(18, 26, 41, 0.4); --block-sel: rgba(18, 26, 41, 0.55); } /* --------------------------------------------------------- Level 1 — a little lighter --------------------------------------------------------- */ html[data-bright="1"] { --bg-void: #0c1420; --bg-panel: #141d2b; --bg-panel-alt: #1b2536; --border-line: #29354a; --text-primary: #e9f0f7; --text-secondary: #a6b4c6; --text-muted: #808fa4; --bg-glass: rgba(12, 20, 32, 0.86); --bg-panel-glass: rgba(20, 29, 43, 0.92); --code-bg: #0b131f; --code-bg-deep: #08101a; --code-text: #d2dcea; --block-hover: rgba(27, 37, 54, 0.45); --block-sel: rgba(27, 37, 54, 0.6); --rb-bg: #0c1420; --rb-panel: #141d2b; --rb-panel-2: #1b2536; --rb-panel-3: #202c40; --rb-line: #29354a; --rb-line-soft: #202a3a; --rb-txt: #e9f0f7; --rb-txt-2: #a6b4c6; --rb-txt-3: #808fa4; } /* --------------------------------------------------------- Level 2 — bright --------------------------------------------------------- */ html[data-bright="2"] { --bg-void: #131d2c; --bg-panel: #1c2637; --bg-panel-alt: #243044; --border-line: #364559; --text-primary: #f2f7fc; --text-secondary: #c0ccdb; --text-muted: #9dabbe; --bg-glass: rgba(19, 29, 44, 0.88); --bg-panel-glass: rgba(28, 38, 55, 0.93); --code-bg: #121c2b; --code-bg-deep: #0e1725; --code-text: #dfe8f3; --block-hover: rgba(36, 48, 68, 0.5); --block-sel: rgba(36, 48, 68, 0.65); --rb-bg: #131d2c; --rb-panel: #1c2637; --rb-panel-2: #243044; --rb-panel-3: #2a374d; --rb-line: #364559; --rb-line-soft: #2b3849; --rb-txt: #f2f7fc; --rb-txt-2: #c0ccdb; --rb-txt-3: #9dabbe; } /* --------------------------------------------------------- Level 3 — maximum contrast --------------------------------------------------------- */ html[data-bright="3"] { --bg-void: #1d2837; --bg-panel: #263245; --bg-panel-alt: #2f3c52; --border-line: #46566d; --text-primary: #ffffff; --text-secondary: #d9e2ed; --text-muted: #bcc8d8; --bg-glass: rgba(29, 40, 55, 0.9); --bg-panel-glass: rgba(38, 50, 69, 0.94); --code-bg: #1b2634; --code-bg-deep: #16202d; --code-text: #eaf1f8; --block-hover: rgba(47, 60, 82, 0.55); --block-sel: rgba(47, 60, 82, 0.7); --rb-bg: #1d2837; --rb-panel: #263245; --rb-panel-2: #2f3c52; --rb-panel-3: #37465e; --rb-line: #46566d; --rb-line-soft: #38465b; --rb-txt: #ffffff; --rb-txt-2: #d9e2ed; --rb-txt-3: #bcc8d8; } /* The ambient glow behind the page is tuned for near-black; on the lighter levels it turns into a muddy haze, so it fades out. */ html[data-bright="2"] body, html[data-bright="3"] body { background-image: none; } /* Surfaces change together instead of snapping, unless the visitor asked for reduced motion (handled globally in style.css). */ body { transition: background-color 0.25s ease, color 0.25s ease; } /* ========================================================= The control itself — same markup in the navbar and in the admin sidebar, so the styles live here with the levels. ========================================================= */ .ra-bright { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; background: none; border: 1px solid var(--border-line); border-radius: 8px; color: var(--text-secondary); font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .ra-bright:hover { color: var(--accent-green); border-color: var(--accent-green); background: var(--bg-panel-alt); } .ra-bright .ico { width: 17px; height: 17px; flex-shrink: 0; } /* Four pips that fill up with the level. Driven straight off the attribute, which the inline head script sets before first paint — so the indicator is never briefly wrong. */ .ra-bright-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .ra-bright-bars i { display: block; width: 3px; border-radius: 1px; background: var(--border-line); transition: background 0.15s, height 0.15s; } .ra-bright-bars i:nth-child(1) { height: 4px; } .ra-bright-bars i:nth-child(2) { height: 7px; } .ra-bright-bars i:nth-child(3) { height: 10px; } .ra-bright-bars i:nth-child(4) { height: 12px; } /* Level N lights N+1 pips. Each rule lights its own range only — the base rule above leaves every pip dim, so no un-setting is needed and the levels can't fight over specificity. */ .ra-bright-bars i:nth-child(1) { background: var(--accent-green); } html[data-bright="1"] .ra-bright-bars i:nth-child(2), html[data-bright="2"] .ra-bright-bars i:nth-child(-n+3), html[data-bright="3"] .ra-bright-bars i { background: var(--accent-green); } .ra-bright-label { display: none; } @media (min-width: 1080px) { .ra-bright-label { display: inline; } } /* The navbar row doesn't wrap, and on a phone it already carries the brand, the menu toggle and two auth buttons. Below 480px the control drops to the bare icon so nothing gets pushed off-screen. */ @media (max-width: 480px) { .navbar .ra-bright { padding: 0.35rem 0.45rem; } .navbar .ra-bright-bars { display: none; } } /* Momentary confirmation of the new level, so cycling makes sense even when the change is subtle. Centred with left/translateX rather than the logical properties: the toast is appended to and must land in the same place regardless of the writing direction around it. */ .ra-bright-toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translate(-50%, 0.6rem); z-index: 9999; background: var(--bg-panel-glass); border: 1px solid var(--accent-green); color: var(--text-primary); border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.82rem; font-family: inherit; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .ra-bright-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* Sidebar placement in the admin panel */ .admin-sidebar .ra-bright { width: 100%; justify-content: center; margin-top: 0.4rem; } @media (prefers-reduced-motion: reduce) { .ra-bright-toast, body, .ra-bright-bars i { transition: none; } }