/* ========================================================================= LIGHT THEME — overrides only. The site's cards (.paper-card, .scroll-card, etc.) are already a warm cream/parchment color in the default ("dark") theme, sitting on a near-black ink page background. Light mode keeps those same cream cards (they already look like paper) and instead lightens everything AROUND them: the page background, the big dark "content-container" / "detail-main" wrapper panels, and the handful of headings/footer text that were colored to read on a dark backdrop. Toggled by setting data-theme="light" on (see js/theme.js). Loaded last on every page so it always wins the cascade. ========================================================================= */ html[data-theme="light"] { --ink-on-paper-soft: #6b5a42; /* Paper-card surface gradient (light theme). Same top-lit-sheet idea as the dark theme, but the card now sits on a pale page instead of a near-black one, so it needs less contrast to read as "lifted paper" -- brighter at the top, easing down into the same warm tan the dark theme's cards bottom out at, so the two themes share one consistent paper family instead of two unrelated palettes. */ --paper-card-top: #fdf9ee; --paper-card-mid: var(--paper); --paper-card-bottom: #e3d3a8; } /* Plain pages with no themed background image (admin.html) */ html[data-theme="light"] body:not(.themed-page) { background-color: #eee3c7 !important; background-image: radial-gradient(circle at 50% 0%, rgba(156,42,58,0.06) 0%, transparent 45%), radial-gradient(circle at 12% 90%, rgba(63,107,85,0.05) 0%, transparent 40%) !important; color: var(--ink-on-paper); } /* Themed pages — flat base color behind everything (mirrors build-theme.css / library-theme.css dark-mode body color). Applied to all themed pages; the Reaction Scroll page (build.html) relies on .detail-main for its own full painted background, same as in dark mode, so it stops here. */ html[data-theme="light"] body.themed-page { background-color: #1a1008 !important; background-image: none !important; } /* Grand Library / Add a Build pages only — these have no other element painting the mountain artwork (main has no bg-image of its own), so the body itself carries it, exactly mirroring library-theme.css's dark-mode body rule (same image sizing/position/attachment), just swapped to the light artwork, so the mountains sit in the same place in both themes. */ html[data-theme="light"] body.page-painted { background-image: url("../assets/theme/background-first-light.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } html[data-theme="light"] .content-container { background-color: rgb(233 227 211 / 78%) !important; } /* Reaction Scroll / build detail page — same two-layer painted background setup as the dark theme (build-theme.css), just swapped for the light ink-wash versions of the artwork instead of a flat color. NOTE: adjustements.css sets background-position: center -250px for each image independently via pseudo-elements. */ html[data-theme="light"] .detail-main { background: none !important; position: relative !important; } html[data-theme="light"] .detail-main::before { content: "" !important; position: absolute !important; top: 3px !important; left: 0 !important; right: 0 !important; bottom: -9px !important; z-index: 0 !important; background-image: url("../assets/theme/background-first-light.png") !important; background-size: 100% 100% !important; background-position: center center !important; background-repeat: no-repeat !important; } html[data-theme="light"] .detail-main::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background-image: url("../assets/theme/background-first-second-light.png") !important; padding-top: 1.5rem !important; background-size: 100% 2120px, 100% 100% !important; background-position: center -250px, center center !important; background-repeat: no-repeat !important; } html[data-theme="light"] .detail-main > * { position: relative !important; z-index: 2 !important; } /* Headings sitting on those wrappers were tuned for a dark backdrop (light paper-colored text, brass subtitles) -- flip to ink on light. */ html[data-theme="light"] .editor-title, html[data-theme="light"] .library-title { color: var(--ink-on-paper); } html[data-theme="light"] .editor-subtitle, html[data-theme="light"] .library-subtitle { color: var(--seal-deep); } html[data-theme="light"] .skill-group-title, html[data-theme="light"] .editor-subtitle + .header-ornament { color: var(--ink-on-paper); } /* Footer — keep banner image, lift above the ::before/::after pseudo layers */ html[data-theme="light"] .app-footer { background-image: transparent !important; background-color: #1a1008 !important; border-top-color: rgba(122,31,44,0.2) !important; position: relative !important; z-index: 3 !important; } html[data-theme="light"] .footer-content p, html[data-theme="light"] .social-link { color: var(--ink-on-paper-soft); } html[data-theme="light"] .credits-section span:first-child { color: var(--seal-deep); } html[data-theme="light"] .social-link:hover { color: var(--seal); } /* Community / detail "back" + pagination controls read light-on-dark by default; on the lightened wrapper they need ink-colored text instead. */ html[data-theme="light"] .nav-btn, html[data-theme="light"] .back-link { color: var(--ink-on-paper-soft); border-color: rgba(42,31,20,0.25); } html[data-theme="light"] .nav-btn:hover:not(:disabled), html[data-theme="light"] .back-link:hover { color: var(--ink-black); } /* Library filter/sort controls — light theme */ html[data-theme="light"] .library-controls { background: rgba(42, 31, 20, 0.08) !important; border-color: rgba(122,31,44,0.25) !important; } html[data-theme="light"] .library-controls label, html[data-theme="light"] .control-group label { color: var(--ink-on-paper) !important; } html[data-theme="light"] .ink-select, html[data-theme="light"] .ink-select.dark { background: rgba(42, 31, 20, 0.12) !important; color: var(--ink-on-paper) !important; border-color: rgba(42, 31, 20, 0.3) !important; } /* The Reaction Scroll title + ID — need stronger ink color on light bg */ html[data-theme="light"] .detail-main .reaction-scroll-title { color: var(--ink-black) !important; } html[data-theme="light"] .build-id, html[data-theme="light"] .reaction-scroll-id { color: var(--ink-on-paper) !important; opacity: 0.75 !important; } /* ── EDITOR INPUTS — LIGHT THEME ─────────────────────────────────────── */ html[data-theme="light"] .ink-input, html[data-theme="light"] .ink-textarea, html[data-theme="light"] .ink-select, html[data-theme="light"] .skill-input { appearance: none !important; -webkit-appearance: none !important; font-family: "Noto Serif", Georgia, serif !important; font-size: 1.05rem !important; font-style: italic !important; padding: 0.7rem 0.9rem !important; color: #5a3a22 !important; background: linear-gradient(to bottom, #fffdf8 0%, #faf2e3 45%, #f3e5cb 100%) !important; border: 1px solid #d7bc88 !important; border-radius: 10px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 3px rgba(90,60,20,.08), 0 2px 6px rgba(0,0,0,.05) !important; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important; } html[data-theme="light"] .skill-input { font-size: 0.95rem !important; padding: 0.55rem 0.75rem !important; } html[data-theme="light"] .ink-input::placeholder, html[data-theme="light"] .ink-textarea::placeholder, html[data-theme="light"] .skill-input::placeholder { color: #a08060 !important; font-style: italic !important; opacity: 1 !important; } html[data-theme="light"] .ink-input:hover, html[data-theme="light"] .ink-textarea:hover, html[data-theme="light"] .ink-select:hover, html[data-theme="light"] .skill-input:hover { border-color: #c89b5a !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 3px rgba(90,60,20,.08), 0 3px 10px rgba(0,0,0,.08) !important; } html[data-theme="light"] .ink-input:focus, html[data-theme="light"] .ink-textarea:focus, html[data-theme="light"] .ink-select:focus, html[data-theme="light"] .skill-input:focus { outline: none !important; border-color: #b78338 !important; background: linear-gradient(to bottom, #fffefb, #fcf4e5) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 0 0 3px rgba(201,155,90,.18), 0 4px 14px rgba(0,0,0,.08) !important; } /* ── EDITOR INPUTS — DARK THEME ──────────────────────────────────────── */ .ink-input, .ink-textarea, .ink-select, .skill-input { appearance: none !important; -webkit-appearance: none !important; font-family: "Noto Serif", Georgia, serif !important; font-size: 1.05rem !important; font-style: italic !important; padding: 0.7rem 0.9rem !important; color: #e8d5b0 !important; background: linear-gradient(to bottom, #3a2a18 0%, #2e2010 45%, #221808 100%) !important; border: 1px solid #6b4f2a !important; border-radius: 10px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 3px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2) !important; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important; } .skill-input { font-size: 0.95rem !important; padding: 0.55rem 0.75rem !important; } .ink-input::placeholder, .ink-textarea::placeholder, .skill-input::placeholder { color: #8a6a40 !important; font-style: italic !important; opacity: 1 !important; } .ink-input:hover, .ink-textarea:hover, .ink-select:hover, .skill-input:hover { border-color: var(--brass) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 3px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.25) !important; } .ink-input:focus, .ink-textarea:focus, .ink-select:focus, .skill-input:focus { outline: none !important; border-color: var(--brass) !important; background: linear-gradient(to bottom, #3e2e1a, #2a1e0e) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.05), 0 0 0 3px rgba(201,169,97,.2), 0 4px 14px rgba(0,0,0,.25) !important; } /* ── AUTOCOMPLETE DROPDOWN — LIGHT THEME ─────────────────────────────── */ html[data-theme="light"] #suggestions-portal { background: linear-gradient(to bottom, #faf2e3, #f0e4c8) !important; border: 1px solid #d7bc88 !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(42,31,20,.2) !important; scrollbar-width: thin !important; scrollbar-color: #c89b5a #f0e4c8 !important; } html[data-theme="light"] #suggestions-portal::-webkit-scrollbar { width: 6px !important; } html[data-theme="light"] #suggestions-portal::-webkit-scrollbar-track { background: #f0e4c8 !important; border-radius: 10px !important; } html[data-theme="light"] #suggestions-portal::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #d7bc88, #b8894a) !important; border-radius: 10px !important; border: 1px solid #c8a86a !important; } html[data-theme="light"] #suggestions-portal::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #c89b5a, #a07030) !important; } html[data-theme="light"] #suggestions-portal li { color: #5a3a22 !important; border-radius: 6px !important; } html[data-theme="light"] #suggestions-portal li:hover, html[data-theme="light"] #suggestions-portal li.selected { background: var(--seal) !important; color: var(--paper) !important; } html[data-theme="light"] #suggestions-portal li.void-result { color: rgba(90,58,34,.45) !important; } /* ── AUTOCOMPLETE DROPDOWN — DARK THEME ──────────────────────────────── */ #suggestions-portal { background: linear-gradient(to bottom, #3a2a18, #221808) !important; border: 1px solid #6b4f2a !important; border-radius: 10px !important; scrollbar-width: thin !important; scrollbar-color: #6b4f2a #221808 !important; } #suggestions-portal::-webkit-scrollbar { width: 6px !important; } #suggestions-portal::-webkit-scrollbar-track { background: #221808 !important; border-radius: 10px !important; } #suggestions-portal::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #8a6030, #5a3a18) !important; border-radius: 10px !important; border: 1px solid #6b4a22 !important; } #suggestions-portal::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #a07838, #6b4820) !important; } #suggestions-portal li { color: #e8d5b0 !important; border-radius: 6px !important; } #suggestions-portal li:hover, #suggestions-portal li.selected { background: var(--seal) !important; color: var(--paper) !important; } /* ---- THEME TOGGLE BUTTON ---- Base look (circle, colors) now lives in header-footer.css so it always matches the nav-link buttons in both themes. Nothing theme-specific is needed here for it anymore. */ /* ── ADMIN PAGE — LIGHT THEME ───────────────────────────────────────── admin.css's tab strip and Moderation list were styled assuming they sit directly on the dark page background (var(--paper)/--paper-dim text, a near-invisible rgba(247,240,220,0.04) row tint meant to lift *off* black). On the light page background both become near-invisible light-on-light. These rows aren't wrapped in a .paper-card like the Companions/Site Styling tabs are, so they need their own light pass. */ html[data-theme="light"] .admin-tab { color: var(--ink-on-paper-soft) !important; } html[data-theme="light"] .admin-tab:hover { color: var(--ink-on-paper) !important; } html[data-theme="light"] .admin-tab.active { color: var(--seal-deep) !important; border-bottom-color: var(--seal-deep) !important; } html[data-theme="light"] .admin-tabs { border-bottom-color: rgba(42,31,20,0.18) !important; } html[data-theme="light"] .admin-row { background: rgba(42,31,20,0.05) !important; border-color: rgba(42,31,20,0.16) !important; } html[data-theme="light"] .admin-row .title { color: var(--ink-on-paper) !important; } html[data-theme="light"] .admin-row .meta { color: var(--ink-on-paper-soft) !important; }