/* ESS Advanced shared design system. Source of truth: src/ess-ui/ess-theme.css. See src/README.md for the hosted URL + rebuild recipe. Non-invasive: only styles .ess-* classes and an opt-in .ess-page scope, so it is safe to include on pages that already have their own CSS (Perchance generators, the WordPress plugin, etc.). Put class="ess-page" on (Perchance pages) or on a container such as the plugin wrapper (WordPress) to opt a surface in to the shared dark theme. */ :root { --ess-bg: #0a0a14; --ess-card: #0e0e1c; --ess-surface: #16162a; --ess-surface-2: #1e1e37; --ess-surface-3: #262646; --ess-border: #2b2b48; --ess-border-strong: #3c3c66; --ess-text: #e8e8f0; --ess-text-dim: rgba(232, 232, 240, 0.64); --ess-text-faint: rgba(232, 232, 240, 0.4); --ess-accent: #5b7cfa; --ess-accent-2: #9d6bff; --ess-accent-hover: #6f8cff; --ess-accent-soft: rgba(91, 124, 250, 0.14); --ess-good: #34d399; --ess-warn: #fbbf24; --ess-bad: #f87171; --ess-radius: 16px; --ess-radius-sm: 10px; --ess-radius-xs: 7px; --ess-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --ess-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ess-card-shadow: 0 0 0 6px rgba(43, 43, 72, 0.18), 0 14px 44px rgba(0, 0, 0, 0.55); } .ess-page { margin: 0; background: var(--ess-bg); color: var(--ess-text); font-family: var(--ess-font); text-align: left; -webkit-font-smoothing: antialiased; } .ess-page a { color: var(--ess-accent); text-decoration: none; } .ess-page a:hover { color: var(--ess-accent-hover); text-decoration: underline; } .ess-page ::selection { background: var(--ess-accent-soft); } .ess-card { width: min(1150px, 100%); margin: 0 auto; background: var(--ess-card); border: 1px solid var(--ess-border); border-radius: var(--ess-radius); padding: 6px 14px 22px; box-shadow: var(--ess-card-shadow); } .ess-muted { color: var(--ess-text-dim); } .ess-faint { color: var(--ess-text-faint); } .ess-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ess-text); background: var(--ess-surface-2); border: 1px solid var(--ess-border-strong); border-radius: var(--ess-radius-xs); padding: 8px 13px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease; } .ess-btn:hover { background: var(--ess-surface-3); border-color: #4a4a7a; } .ess-btn:active { transform: translateY(1px); } .ess-btn:disabled { opacity: 0.5; cursor: default; } .ess-btn-primary { color: #fff; background: linear-gradient(180deg, var(--ess-accent), var(--ess-accent-2)); border-color: transparent; box-shadow: 0 2px 12px rgba(91, 124, 250, 0.35); } .ess-btn-primary:hover { background: linear-gradient(180deg, var(--ess-accent-hover), #ab7dff); border-color: transparent; } .ess-btn-ghost { background: transparent; border-color: var(--ess-border); } .ess-input, .ess-select, .ess-textarea { font: inherit; font-size: 13px; color: var(--ess-text); background: var(--ess-surface); border: 1px solid var(--ess-border-strong); border-radius: var(--ess-radius-xs); padding: 7px 10px; width: 100%; box-sizing: border-box; } .ess-input:focus, .ess-select:focus, .ess-textarea:focus { outline: none; border-color: var(--ess-accent); box-shadow: 0 0 0 3px var(--ess-accent-soft); } .ess-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--ess-text-dim); margin-bottom: 4px; } .ess-field { margin-bottom: 12px; } .ess-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 3px 8px; border-radius: 999px; color: var(--ess-text-dim); background: var(--ess-surface-2); border: 1px solid var(--ess-border); } .ess-badge-accent { color: #fff; background: var(--ess-accent-soft); border-color: rgba(91, 124, 250, 0.5); } .ess-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ess-page ::-webkit-scrollbar { width: 11px; height: 11px; } .ess-page ::-webkit-scrollbar-track { background: var(--ess-bg); } .ess-page ::-webkit-scrollbar-thumb { background: var(--ess-border-strong); border-radius: 999px; border: 3px solid var(--ess-bg); } .ess-page ::-webkit-scrollbar-thumb:hover { background: #4a4a7a; }