@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* ===== Theme engine ===== :root holds the dark theme (the default). The light theme overrides the same variables under html[data-theme="light"], and seasonal variants override accents under html[data-seasonal="..."]. Both attributes are set on by the inline theme-boot snippet in each page's (before first paint) from device-local localStorage prefs — never from the server. Pages that define their own palette variables should add matching html[data-theme="light"] / html[data-seasonal="spooky"] blocks next to their own styles. */ :root{ --border: rgba(255, 255, 255, 0.1); --background: rgba(255, 255, 255, 0.06); --dark-background: #101010; --hover-background: #131313; --text: #e5e5e5; --link-text: #9c9c9c; --input-focus: #1a1a1a; --bright: #8b7cff; --bright-text: #a99fff; /* Solid component colors (translucent overlays go on top of these). */ --page-bg: #0a0a0a; --component-bg: #141414; --component-bg-hover: #1a1a1a; --component-text: #e5e5e5; --sidebar-bg: rgba(10, 10, 10, 0.95); --danger-border: #3a1f1f; --danger-bg-hover: #221111; --danger-text: #d08080; --accent-border: rgba(139, 124, 255, 0.35); --accent-dim: rgba(139, 124, 255, 0.12); } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; --border: rgba(0, 0, 0, 0.12); --background: rgba(0, 0, 0, 0.05); --dark-background: #ffffff; --hover-background: #ececf1; --text: #1a1a1a; --link-text: #5f5f6b; --input-focus: #e2e2e8; --bright: #7a6bff; --bright-text: #6353d9; --page-bg: #f7f7f9; --component-bg: #ffffff; --component-bg-hover: #f0f0f4; --component-text: #1a1a1a; --sidebar-bg: rgba(255, 255, 255, 0.92); --danger-border: rgba(176, 69, 69, 0.35); --danger-bg-hover: #f8eaea; --danger-text: #a84545; --accent-border: rgba(122, 107, 255, 0.4); --accent-dim: rgba(122, 107, 255, 0.1); } /* Seasonal variants. Accent swap only — layout and base palette stay as-is, so each composes with either overall theme. */ html[data-seasonal="spooky"] { --bright: #ff7a1a; --bright-text: #ff9d4d; --accent-border: rgba(255, 122, 26, 0.4); --accent-dim: rgba(255, 122, 26, 0.14); } html[data-theme="light"][data-seasonal="spooky"] { --bright: #f56f00; --bright-text: #d95f00; --accent-border: rgba(245, 111, 0, 0.45); --accent-dim: rgba(245, 111, 0, 0.1); } html[data-seasonal="festive"] { --bright: #e5484d; --bright-text: #f97066; --accent-border: rgba(229, 72, 77, 0.4); --accent-dim: rgba(229, 72, 77, 0.14); } html[data-theme="light"][data-seasonal="festive"] { --bright: #d63638; --bright-text: #c02c2c; --accent-border: rgba(214, 54, 56, 0.45); --accent-dim: rgba(214, 54, 56, 0.1); } .selected-page { color: var(--bright-text); } .width-auto{ width: auto; } body { background: var(--page-bg); color: var(--text); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; } input:focus { outline: none !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--page-bg); } ::-webkit-scrollbar-thumb { background: var(--border); } ::-webkit-scrollbar-thumb:hover { background: var(--bright); } #toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 10000; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; } #toast-container>div { background: var(--component-bg); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; max-width: 300px; word-wrap: break-word; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; pointer-events: auto; } .btn { padding: 12px; margin: auto; text-align: center; border: 1px solid var(--border); border-radius: 12px; background: var(--component-bg); width: 50px; color: var(--text); text-decoration: none; transition: 0.3s ease; } .btn:hover{ background: var(--component-bg-hover); cursor: pointer; } .btn-red { padding: 12px; margin: auto; text-align: center; border: 1px solid var(--danger-border); border-radius: 12px; background: var(--component-bg); width: 50px; color: var(--danger-text); text-decoration: none; transition: 0.3s ease; } .btn-red:hover{ background: var(--danger-bg-hover); cursor: pointer; } .btn-purple, .btn-purple-grey { padding: 12px; margin: auto; text-align: center; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--component-bg); width: 50px; color: var(--bright-text); text-decoration: none; transition: 0.3s ease; } .btn-purple:hover, .btn-purple-grey:hover{ background: var(--accent-dim); cursor: pointer; } .btn-white { padding: 12px; margin: auto; text-align: center; border: 1px solid var(--text); border-radius: 12px; background: var(--text); width: 50px; color: var(--page-bg); text-decoration: none; transition: 0.3s ease; } .btn-white:hover{ background: var(--page-bg); border-color: var(--border); color: var(--text); cursor: pointer; } .input { padding: 10px; font-size: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--page-bg); width: auto; color: var(--text); transition: 0.3s ease; } .input:focus { outline: none; border-color: var(--border-focus); } .hamburger { position: fixed; top: 24px; left: 24px; z-index: 1000; cursor: pointer; padding: 8px; border-radius: 8px; background: var(--background); backdrop-filter: blur(10px); border: 1px solid var(--border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hamburger:hover { background: var(--border); } /* Seasonal flourish: a tiny emblem rides the menu button while a seasonal theme is active. Purely decorative. */ html[data-seasonal="spooky"] .hamburger::after, html[data-seasonal="festive"] .hamburger::after { position: absolute; top: -9px; right: -7px; font-size: 13px; line-height: 1; filter: saturate(1.2); } html[data-seasonal="spooky"] .hamburger::after { content: "\1F383"; } html[data-seasonal="festive"] .hamburger::after { content: "\1F384"; } .hamburger div { width: 20px; height: 2px; background-color: var(--component-text); margin: 4px 0; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1px; } .hamburger.active div:nth-child(1) { transform: rotate(-45deg) translate(-4px, 4px); } .hamburger.active div:nth-child(2) { opacity: 0; } .hamburger.active div:nth-child(3) { transform: rotate(45deg) translate(-4px, -4px); } .sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: var(--sidebar-bg); backdrop-filter: blur(20px); border-right: 1px solid var(--border); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; padding-top: 80px; overflow-y: scroll; } .sidebar.active { left: 0; } .sidebar ul { list-style-type: none; margin: 0; padding: 0; } .sidebar ul li { padding: 0; border-bottom: 1px solid var(--background); transition: ease 0.3s; } .sidebar ul li:hover { background: var(--background); } .sidebar ul li a { display: flex; color: var(--component-text); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.7; padding: 20px 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar svg { width: 100%; height: auto; display: block; } .sidebar div { height: 20px; width: 20px; margin-right: 4px; display: flex; flex-direction: column; justify-content: flex-end; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; z-index: 998; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .overlay.active { z-index: 100; opacity: 1; visibility: visible; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } @media screen and (max-width: 768px) { .hamburger { top: 16px; left: 16px; } .sidebar { width: min(280px, 80vw); left: -80vw; } .sidebar.active { left: 0; } } @media screen and (max-width: 480px) { .hamburger { top: 12px; left: 12px; padding: 6px; } .hamburger div { width: 18px; } } /* ===== Theme preference controls (settings) ===== Segmented option picker used by the Appearance panel. Fully theme-aware: colors come from the engine variables above. */ .theme-section { margin-top: 14px; } .theme-options { display: flex; gap: 8px; flex-wrap: wrap; } .theme-option { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--component-bg); color: var(--text); font-family: inherit; font-size: 0.92rem; cursor: pointer; transition: all 0.2s ease; } /* The active/hover state is ALWAYS purple, even under a seasonal theme — the control should reflect the user's selection, not the season. */ .theme-option:hover { border-color: #a99fff; } .theme-option.active { border-color: rgba(139, 124, 255, 0.55); background: rgba(139, 124, 255, 0.14); color: #a99fff; } html[data-theme="light"] .theme-option:hover { border-color: #6353d9; } html[data-theme="light"] .theme-option.active { border-color: rgba(122, 107, 255, 0.5); background: rgba(122, 107, 255, 0.12); color: #6353d9; } .theme-option svg { width: 15px; height: 15px; }