/* ========================================================================== Pufflings — "Moonlit Grove" dark mode Activated by [data-theme="dark"] on (set by theme-toggle.js). Layer this AFTER site.css: ========================================================================== */ /* ---- 1. Re-skin the token set already used throughout site.css ---- Because almost every component in site.css reads var(--token) rather than hardcoded hex, redefining these under [data-theme="dark"] re-themes the nav, panels, cards, forms, buttons, chips, modals, etc. automatically. Verified against the homepage (banner/nav/welcome/pgrid/sidebar/footer); other pages should fall in line but weren't individually re-checked. */ :root[data-theme="dark"]{ --bg: #1c1732; --card: #1c1732; --ink: #ece6f7; --ink-soft: #a89bc4; --accent: #d98fd0; --accent-dark: #b06bb0; --line: #453a70; --gift-open: #7fd3a3; --sage: #14101f; --sage-icon: rgba(180,160,255,.35); --wood: #4d3f77; --wood-2: #2c2246; --wood-dark: #191430; --wood-edge: #05060d; --wood-shadow: #150f22; --parch-2: #241f3d; --rose: #b06bb0; --rose-deep: #b06bb0; --rose-ink: #d98fd0; --sky-1: #1a2550; --sky-2: #170f28; --sky-3: #1d173f; --mint: #6ec4a0; --butter: #f0c869; --lilac: #8f6fe6; --ink-faint: #7a6f96; --tab: #2c2446; --tab-line: #4d3f77; --castle: #100a30; --card-overlay: rgba(255,255,255,.06); --card-stripe: rgba(255,255,255,.04); /* Quest dialogue / character-showcase "night parchment" palette (tokens defined in quests/story.css, consumed by quests/story.css and quests/cyoa.css). Reuses existing dark tokens rather than new hex so it stays in step with the rest of the theme. */ --dialogue-bg: var(--parch-2); --dialogue-border: var(--wood); --dialogue-border-hover: var(--wood-dark); --dialogue-text: var(--ink); --dialogue-text-rgb: 236, 230, 247; --dialogue-showcase-bg: var(--wood-2); --dialogue-illustration-bg: var(--wood-dark); --dialogue-line: var(--line); } /* ---- 2. Page background: same 90px star-field shape as the light-mode leaf-dot pattern, recolored onto a night base. ---- */ :root[data-theme="dark"] body{ background-color:#0a0e1f; background-image: radial-gradient(circle at 12px 12px, rgba(200,210,255,.4) 1.2px, transparent 2px), radial-gradient(circle at 42px 42px, rgba(200,210,255,.3) 1.2px, transparent 2px), radial-gradient(circle at 72px 20px, rgba(200,210,255,.35) 1px, transparent 2px), radial-gradient(circle at 30px 64px, rgba(200,210,255,.25) 1px, transparent 2px); } /* ---- 3. Frame: same corkboard shape, swapped for a starlight-grain texture instead of the wood photo. ---- */ :root[data-theme="dark"] .frame{ background-color:#12172c; background-image: linear-gradient(160deg,#1c2440,#0c0f1e), radial-gradient(circle at 1px 1px, rgba(180,160,255,.07) 1px, transparent 0); background-size:auto, 13px 13px; border-color:#05060d; box-shadow: inset 0 0 0 6px rgba(155,140,255,.10), inset 0 0 30px rgba(20,10,40,.5), 0 18px 40px rgba(0,0,0,.5); } /* ---- 4. Clouds: identical shapes to light mode (.cloud/::before/::after in site.css), just tinted for a night sky. ---- */ :root[data-theme="dark"] .cloud{ background:rgba(94,104,148,.55); box-shadow:inset 0 -3px 6px rgba(20,15,40,.25); } :root[data-theme="dark"] .cloud::before, :root[data-theme="dark"] .cloud::after{ background:inherit; } /* ---- 5. stars: new elements, only visible in dark mode. ---- */ .star{ display:none; } :root[data-theme="dark"] .star{ display:block; } .star{ position:absolute; width:3px; height:3px; border-radius:50%; background:#e8def7; box-shadow:0 0 5px #e8def7; } .star.s1{ top:34px; left:110px; width:4px; height:4px; } .star.s2{ top:70px; left:160px; } .star.s3{ top:50px; left:220px; } .star.s4{ top:118px; right:200px; width:2px; height:2px; } .star.s5{ top:20px; left:250px; width:2px; height:2px; } /* ---- 6. Castle silhouette — same image both themes, recolored via filter. Positioned ~80% across the banner, flush to the floor. ---- */ .castle-silhouette{ position:absolute; left:750px; bottom:0; width:158px; height:130px; object-fit:contain; pointer-events:none; } :root[data-theme="dark"] .castle-silhouette { filter: none; /* Clear previous filters */ /* 1. Set your exact dark blue hex color */ background-color: var(--castle); /* 2. Mask the background using your castle image */ -webkit-mask: url("../images/castle-silhouette.5152ccaaaba5.png") center/contain no-repeat; mask: url("../images/castle-silhouette.5152ccaaaba5.png") center/contain no-repeat; /* 3. Hide the original light cyan image src so it doesn't bleed through */ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); } @media (max-width: 900px){ .castle-silhouette{ left:auto; right:16px; width:110px; height:90px; } } /* ---- 7. Forms & filter dropdowns: site.css hardcodes a white/cream background (#fff) on inputs, textareas, selects and the autocomplete widgets while the text color follows var(--ink), which this theme makes very light — near-white text on a white field. Give these a dark surface here instead. ---- */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ background:#241f3d; color:var(--ink); } :root[data-theme="dark"] select option{ background:#241f3d; color:var(--ink); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{ color:var(--ink-soft); opacity:1; } :root[data-theme="dark"] .ta-list, :root[data-theme="dark"] .ms-wrapper, :root[data-theme="dark"] .ms-dropdown, :root[data-theme="dark"] .qb-char-card, :root[data-theme="dark"] .qb-char-dropdown{ background:#241f3d; } :root[data-theme="dark"] .ta-opt:hover, :root[data-theme="dark"] .ms-option:hover{ background:var(--wood); } /* ---- 8. Banner title & clock: site.css hardcodes these for the light parchment banner. The title's white text-shadow (meant as a subtle embossed highlight on cream card behind dark ink text) becomes a bright halo behind the light dark-mode text and hurts legibility; give it a dark shadow instead. The clock pill's rgba(255,255,255,.7) background stays paper-white regardless of theme — match it to the already-dark .theme-toggle pill below. ---- */ :root[data-theme="dark"] .title-plaque .plaque-title{ text-shadow:0 2px 6px rgba(0,0,0,.65); } :root[data-theme="dark"] .server-clock{ background:rgba(20,15,35,.6); border-color:var(--wood-edge); color:var(--ink); } /* ---- 9. Notifications: the unread-row highlight uses --butter, which this theme keeps as a saturated gold so it still reads as "unread" — but full-strength gold is jarring against the dark panel and the light --ink text on it loses contrast. Dial it down to a translucent wash. ---- */ :root[data-theme="dark"] .notif-item--unread{ background:rgba(240,200,105,.16); } :root[data-theme="dark"] .notif-item--unread:hover{ background:rgba(240,200,105,.26); } /* ---- 10. Status pills, alerts & badges: these use pastel light backgrounds with dark text hardcoded for the parchment theme. The backgrounds don't reskin (not tokens) so they stay paper-bright in dark mode, and several also hardcode dark text that then reads too low contrast against them once darkened. Swap both to translucent-on-dark equivalents that keep each color's meaning (amber=pending, red=rejected/ soulbound, green=approved/tradeable, grey=retired). ---- */ :root[data-theme="dark"] .status-pending{ background:rgba(232,193,74,.16); border-color:#8a6a2c; } :root[data-theme="dark"] .status-rejected{ background:rgba(224,110,110,.16); border-color:#8a3f3f; } :root[data-theme="dark"] .status-retired{ background:rgba(160,160,170,.14); border-color:#55525f; } :root[data-theme="dark"] .status-approved{ background:rgba(110,196,140,.16); border-color:#2f6e46; } :root[data-theme="dark"] .message.success{ background:rgba(110,196,140,.14); border-color:#2f6e46; } :root[data-theme="dark"] .message.error{ background:rgba(224,110,110,.14); border-color:#8a3f3f; } :root[data-theme="dark"] .message.warning, :root[data-theme="dark"] .alert-warning{ background:rgba(232,193,74,.14); border-color:#8a6a2c; color:#e8c869; } :root[data-theme="dark"] .badge-soulbound{ background:rgba(224,110,110,.14); border-color:#8a3f3f; color:#e8a0a0; } :root[data-theme="dark"] .badge-tradeable{ background:rgba(110,196,140,.14); border-color:#2f6e46; color:#8fd6a8; } :root[data-theme="dark"] .queue-item, :root[data-theme="dark"] .submission-item, :root[data-theme="dark"] .grant-line, :root[data-theme="dark"] .log-entry{ background:var(--parch-2); } :root[data-theme="dark"] .queue-kind{ background:rgba(150,160,255,.16); border-color:#4a4a8a; } :root[data-theme="dark"] .submission-feedback{ background:rgba(224,110,110,.14); border-color:#8a3f3f; } /* Gain/loss/error accent text: the light-mode hex values are tuned for contrast against a cream background and read too dim on the dark one. */ :root[data-theme="dark"] .log-positive, :root[data-theme="dark"] .log-gain{ color:#6fce8a; } :root[data-theme="dark"] .log-loss{ color:#e08a8a; } :root[data-theme="dark"] .errorlist{ color:#e08a8a; } :root[data-theme="dark"] .quest-reward-group--requirements .quest-reward-heading{ color:#e0b050; } /* Faint black-tint chips (reward pills, code-style dividers) invert to near-invisible on a dark background; use a light tint instead. */ :root[data-theme="dark"] .quest-reward-list li, :root[data-theme="dark"] .reward-formula{ background:rgba(255,255,255,.08); } :root[data-theme="dark"] .qb-reward-row{ border-bottom-color:rgba(255,255,255,.12); } /* ---- 11. Light/dark toggle pill — mirrors the .server-clock pill, opposite corner of the banner. ---- */ .theme-toggle{ position:absolute; z-index:2; right:14px; bottom:12px; display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.7); border:2px solid var(--wood-dark); border-radius:999px; padding:4px 5px; cursor:pointer; } :root[data-theme="dark"] .theme-toggle{ background:rgba(20,15,35,.6); border-color:var(--wood-edge); } .theme-toggle .knob{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; } .theme-toggle .sun{ opacity:1; } .theme-toggle .moon-icon{ opacity:.35; } :root[data-theme="dark"] .theme-toggle .sun{ opacity:.35; } :root[data-theme="dark"] .theme-toggle .moon-icon{ opacity:1; background:var(--wood); box-shadow:0 0 8px rgba(106,90,153,.7); }