/* * sart-theme.css -- the universal design system for pages published on * artifacts.satoriweb.dev. Direction: Deep Ocean (chosen 2026-09-01; see the * "Satoriweb Artifact Design System" canvas). * * Dark by default: bare :root carries the dark palette on every device -- Deep * Ocean is a dark identity, so OS light preference is deliberately ignored. * Light is explicit opt-in only: set data-theme="light" on . * Pages consume the --sart-* tokens (alias local names onto them, or use the * .sart-* component classes directly). No bare element rules on purpose -- * linking this file never restyles markup it does not own. * * Radius: 8px surfaces, 999px chips/pills. Borders: cyan-tinted hairlines, * never gray. Headings Exo 2, body Inter, values JetBrains Mono. */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --sart-font-head: 'Exo 2', Inter, system-ui, sans-serif; --sart-font-body: Inter, system-ui, sans-serif; --sart-font-mono: 'JetBrains Mono', ui-monospace, monospace; --sart-bg: #0a1420; --sart-card: #0f1c2c; --sart-card2: #0c1826; --sart-line: rgba(0, 212, 255, 0.14); --sart-line-soft: rgba(0, 212, 255, 0.07); --sart-line-strong: rgba(0, 212, 255, 0.3); --sart-text: #d9e6f2; --sart-muted: #8ba3b8; --sart-dim: #5f7689; --sart-accent: #00d4ff; --sart-accent-ink: #062633; --sart-accent-bg: rgba(0, 212, 255, 0.12); --sart-done: #2fd98a; --sart-done-bg: rgba(47, 217, 138, 0.12); --sart-wait: #f0a844; --sart-wait-bg: rgba(240, 168, 68, 0.12); --sart-verify: #77b4d6; --sart-verify-bg: rgba(119, 180, 214, 0.14); --sart-move: #8ba3b8; --sart-move-bg: rgba(139, 163, 184, 0.12); --sart-danger: #ff7a7a; --sart-danger-bg: rgba(255, 122, 122, 0.12); --sart-code-bg: rgba(0, 212, 255, 0.08); --sart-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8); color-scheme: dark; } :root[data-theme='light'] { --sart-bg: #f0f5f9; --sart-card: #ffffff; --sart-card2: #f7fafc; --sart-line: rgba(0, 110, 158, 0.22); --sart-line-soft: rgba(0, 110, 158, 0.1); --sart-line-strong: rgba(0, 110, 158, 0.4); --sart-text: #17273a; --sart-muted: #4d6478; --sart-dim: #7b8fa1; --sart-accent: #006e9e; --sart-accent-ink: #ffffff; --sart-accent-bg: rgba(0, 110, 158, 0.1); --sart-done: #0d8f5a; --sart-done-bg: rgba(13, 143, 90, 0.1); --sart-wait: #9d6206; --sart-wait-bg: rgba(157, 98, 6, 0.1); --sart-verify: #2f6b8f; --sart-verify-bg: rgba(47, 107, 143, 0.12); --sart-move: #5b7186; --sart-move-bg: rgba(91, 113, 134, 0.12); --sart-danger: #c23434; --sart-danger-bg: rgba(194, 52, 52, 0.1); --sart-code-bg: rgba(0, 110, 158, 0.08); --sart-shadow: 0 1px 2px rgba(23, 39, 58, 0.06), 0 8px 24px -16px rgba(23, 39, 58, 0.25); color-scheme: light; } /* ------------------------------------------------------------------------ */ /* Component classes -- opt-in vocabulary for new pages. */ /* */ /* CANONICAL PAGE ANATOMY (the Hetzner Migration template, adopted */ /* 2026-09-01 for every artifact page): a single centered column */ /* (.sart-wrap) of section CARDS (.sart-section with a bordered header */ /* row), content as chip-labelled ROWS separated by hairlines */ /* (.sart-items), stats in a .sart-stat strip, key-value pairs in */ /* .sart-facts. No full-bleed mastheads, no per-row floating cards. */ /* ------------------------------------------------------------------------ */ .sart-page { background: var(--sart-bg); color: var(--sart-text); font-family: var(--sart-font-body); font-size: 15px; line-height: 1.55; margin: 0; } .sart-page h1, .sart-page h2, .sart-page h3 { font-family: var(--sart-font-head); text-wrap: balance; } .sart-page a { color: var(--sart-accent); text-decoration: none; } .sart-page a:hover, .sart-page a:focus-visible { text-decoration: underline; } .sart-page code, .sart-mono { font-family: var(--sart-font-mono); font-size: 0.86em; background: var(--sart-code-bg); padding: 0.08em 0.35em; border-radius: 4px; } .sart-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6rem; } .sart-section { background: var(--sart-card); border: 1px solid var(--sart-line-soft); border-radius: 8px; padding: 1.15rem 1.3rem 1.3rem; } .sart-section > header { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.7rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--sart-line-soft); } .sart-section > header .count { color: var(--sart-dim); font-size: 0.82rem; font-variant-numeric: tabular-nums; } .sart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sart-items > li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.85rem; padding: 0.6rem 0; border-bottom: 1px solid var(--sart-line-soft); align-items: start; } .sart-items > li:last-child { border-bottom: none; } .sart-items .t { font-weight: 600; } .sart-items .d { color: var(--sart-muted); font-size: 0.88rem; margin-top: 0.1rem; } .sart-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.1rem; margin-top: 0.6rem; } .sart-facts dt { color: var(--sart-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; } .sart-facts dd { margin: 0; } .sart-incident { border-left: 3px solid var(--sart-danger); background: var(--sart-card2); border-radius: 0 8px 8px 0; padding: 0.85rem 1.1rem; font-size: 0.9rem; color: var(--sart-muted); } .sart-incident strong { color: var(--sart-text); } @media (max-width: 560px) { .sart-items > li { grid-template-columns: 1fr; gap: 0.2rem; } .sart-facts { grid-template-columns: 1fr; gap: 0.1rem; } } .sart-card { background: var(--sart-card); border: 1px solid var(--sart-line-soft); border-radius: 8px; padding: 1.15rem 1.3rem; transition: border-color 0.15s ease; } .sart-card:hover { border-color: var(--sart-line); } .sart-chip { display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.18em 0.6em; border-radius: 999px; white-space: nowrap; } .sart-chip.done { color: var(--sart-done); background: var(--sart-done-bg); } .sart-chip.wait { color: var(--sart-wait); background: var(--sart-wait-bg); } .sart-chip.verify { color: var(--sart-verify); background: var(--sart-verify-bg); } .sart-chip.move { color: var(--sart-move); background: var(--sart-move-bg); } .sart-chip.danger { color: var(--sart-danger); background: var(--sart-danger-bg); } .sart-chip.accent { color: var(--sart-accent); background: var(--sart-accent-bg); } .sart-btn { font: 600 14px var(--sart-font-body); background: var(--sart-accent); color: var(--sart-accent-ink); border: 0; border-radius: 8px; padding: 0.6rem 1.1rem; cursor: pointer; } .sart-btn.ghost { background: var(--sart-card2); color: var(--sart-muted); border: 1px solid var(--sart-line-soft); } .sart-btn.ghost:hover { color: var(--sart-accent); border-color: var(--sart-line); } .sart-input { font: inherit; color: var(--sart-text); background: var(--sart-card); border: 1px solid var(--sart-line); border-radius: 8px; padding: 0.6rem 0.85rem; } .sart-input:focus-visible { outline: 2px solid var(--sart-accent); outline-offset: 1px; } .sart-stat { background: var(--sart-card); border: 1px solid var(--sart-line-soft); border-radius: 8px; padding: 0.8rem 1rem; } .sart-stat .n { font-family: var(--sart-font-head); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; } .sart-stat .l { color: var(--sart-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.1rem; } .sart-bar { height: 6px; border-radius: 999px; background: var(--sart-line-soft); overflow: hidden; } .sart-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sart-done), var(--sart-accent)); } .sart-note { font-size: 0.85rem; color: var(--sart-muted); padding: 0.2rem 0; overflow-wrap: anywhere; } .sart-note .a { font-weight: 600; color: var(--sart-accent); } .sart-note.is-resolved { opacity: 0.55; }