/* sao.dev design system — tokens + blog surface Warm-dark / cool-light. Theme via data-theme="dark|light" on . Fonts: IBM Plex Mono (headings/labels/code) + IBM Plex Sans (body). */ @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/ibm-plex-sans-italic-latin.woff') format('woff'); } :root { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --radius-sm: 3px; --rule-hair: 1px; --rule-strong: 2px; --track-label: 0.12em; --track-kicker: 0.2em; } /* Dark (default) */ :root, [data-theme="dark"] { --bg: #100d0b; --bg-inset: #0a0807; --surface: #171310; --surface-raised: #201b17; --border: #2a241f; --border-strong: #463c33; --hair: #241f1a; --text: #ece6df; --text-muted: #a39a8d; --text-dim: #6f675b; --accent: #ff6a1f; --accent-2: #52cfe0; --on-accent: #14100c; --ok: #34c98a; --warn: #ffb000; --bad: #ff3b30; --info: #3aa6ff; } [data-theme="light"] { --bg: #ecebe7; --bg-inset: #eeeeea; --surface: #fafaf7; --surface-raised: #ffffff; --border: #d7d5cd; --border-strong: #b6b1a8; --hair: #e0ddd5; --text: #1d1c19; --text-muted: #66635c; --text-dim: #99958d; --accent: #e8540a; --accent-2: #1c8a99; --on-accent: #ffffff; --ok: #159c66; --warn: #cf8e00; --bad: #dc342a; --info: #2a7fd0; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Base ---- */ body { font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--text); text-decoration: none; } /* ---- Header bar ---- */ .site-header { position: sticky; top: 0; z-index: 40; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--border); } .site-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; } .site-mark-dot { width: 9px; height: 9px; background: var(--accent); display: inline-block; } .site-mark-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text); } .site-mark-path { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-dim); } .header-right { display: flex; align-items: center; gap: 18px; } .header-nav { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted); text-decoration: none; } .header-nav:hover { color: var(--text); } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; } .theme-toggle button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; padding: 5px 11px; background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); cursor: pointer; } .theme-toggle button:last-child { border-left: none; } .theme-toggle button.active { background: var(--text); color: var(--bg); border-color: var(--text); } /* ---- Index page ---- */ .index-main { max-width: 860px; margin: 0 auto; padding: 64px 28px 90px; } .index-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .index-kicker-dot { width: 7px; height: 7px; background: var(--accent); display: inline-block; } .index-kicker-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-kicker); color: var(--text-muted); } .index-title { font-family: var(--font-mono); font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--text); } .index-desc { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 560px; margin: 0 0 28px; } .index-desc strong { color: var(--text); font-weight: 600; } .index-counts { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); } .index-counts-sep { color: var(--border-strong); } /* Column header */ .index-colheader { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 16px; padding: 0 14px 9px; margin-top: 34px; border-bottom: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--track-label); color: var(--text-dim); } /* Rows */ .index-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 16px; padding: 15px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: background 0.15s; } .index-row:hover { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); } .index-row-idx { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); } .index-row-title { font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.3; } .index-row-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-dim); text-align: right; white-space: nowrap; } /* ---- Article page ---- */ .article-main { max-width: 760px; margin: 0 auto; padding: 60px 28px 40px; } .article-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 28px; } .article-breadcrumb-sep { color: var(--border-strong); } .article-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .article-kicker-dot { width: 7px; height: 7px; background: var(--accent); display: inline-block; } .article-kicker-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-kicker); color: var(--text-muted); } .article-title { font-family: var(--font-mono); font-size: 42px; line-height: 1.08; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 22px; color: var(--text); } .article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--border-strong); } .article-meta-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); } .article-meta-sep { width: 3px; height: 3px; background: var(--text-dim); border-radius: 50%; } /* Article body */ .article-body { margin-top: 34px; } .article-body p { font-size: 18px; line-height: 1.72; color: var(--text); margin: 0 0 22px; } .article-body strong { font-weight: 600; color: var(--text); } .article-body em { font-style: italic; color: var(--text-muted); } .article-body a { color: var(--text); border-bottom: 1px solid var(--border-strong); text-decoration: none; } .article-body a:hover { color: var(--accent); border-bottom-color: var(--accent); } .article-body h2 { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 46px 0 18px; } .article-body h3 { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--text); margin: 34px 0 14px; } /* Embedded viz demo — breaks out of article column on wide screens */ .viz-embed { width: calc(100% + 200px); margin-left: -100px; max-width: 960px; height: 650px; border: 1px solid var(--border-strong); background: var(--bg); margin-top: 28px; margin-bottom: 28px; } @media (max-width: 960px) { .viz-embed { width: calc(100% + 56px); margin-left: -28px; } } @media (max-width: 600px) { .viz-embed { width: calc(100% + 32px); margin-left: -16px; } } .article-body ul, .article-body ol { margin: 0 0 26px; padding-left: 22px; } .article-body li { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 0 10px; } .article-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface); border: 1px solid var(--border); padding: 1px 5px; color: var(--text); } .article-body pre { background: var(--surface); border: 1px solid var(--border); padding: 1rem; overflow-x: auto; margin: 0 0 22px; } .article-body pre code { padding: 0; border: none; background: none; font-size: 0.85em; } .article-body blockquote { margin: 38px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); font-size: 23px; line-height: 1.45; font-weight: 450; color: var(--text); } .article-body blockquote p { margin: 0; } /* Concept highlight panel */ .figure-highlight { border: 1px solid var(--border-strong); background: var(--surface); margin: 34px 0; padding: 20px 24px; } .figure-highlight-header { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .figure-highlight-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text); } .figure-highlight-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; margin: 0; color: var(--text); } /* Comparison figure (additive/subtractive, etc.) */ .figure-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-strong); background: var(--surface); margin: 34px 0; } .figure-compare-col { padding: 18px 20px; } .figure-compare-col:first-child { border-right: 1px solid var(--border-strong); } .figure-compare-header { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .figure-dot-filled { width: 7px; height: 7px; background: var(--accent); display: inline-block; flex: none; } .figure-dot-hollow { width: 7px; height: 7px; border: 1px solid var(--text-dim); display: inline-block; flex: none; } .figure-compare-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text); } .figure-compare-title--muted { color: var(--text-muted); } .figure-compare-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--text-dim); margin-bottom: 11px; } .figure-compare-body.figure-compare-body { font-size: 16px; line-height: 1.55; margin: 0; color: var(--text); } .figure-compare-body strong { color: var(--text); } .figure-compare-examples.figure-compare-examples { font-family: var(--font-sans); font-size: 12px; font-style: italic; color: var(--text-dim); margin: 2px 0 0; opacity: .5; } @media (max-width: 600px) { .figure-compare { grid-template-columns: 1fr; } .figure-compare-col:first-child { border-right: none; border-bottom: 1px solid var(--border-strong); } } .figure-label { font-family: var(--font-sans); font-size: 14px; color: var(--text-dim); text-align: center; margin: -4px 0 28px; } .figure-label a { color: var(--text-muted); } .article-body table { border-collapse: collapse; margin: 1rem 0; } .article-body th, .article-body td { border: 1px solid var(--border-strong); padding: 0.5rem 0.75rem; font-size: 15px; } .article-body th { border-bottom-width: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; } /* ---- Demo list (viz index) ---- */ .demo-list { margin-top: 28px; } .demo-row { display: block; padding: 15px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: background 0.15s; } .demo-row:hover { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); } .demo-row-title { display: block; font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.3; margin-bottom: 4px; } .demo-row-desc { display: block; font-size: 15px; line-height: 1.5; color: var(--text-muted); } /* ---- Footer ---- */ .site-footer { max-width: 760px; margin: 48px auto 0; padding: 24px 28px 56px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .site-footer a, .site-footer span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); text-decoration: none; } .site-footer a:hover { color: var(--text-muted); } /* ---- Responsive ---- */ @media (max-width: 600px) { .site-header { padding: 0 16px; } .index-main { padding: 40px 16px 60px; } .index-title { font-size: 32px; } .index-colheader, .index-row { grid-template-columns: 28px 1fr auto; gap: 12px; } .index-row-title { font-size: 16px; } .article-main { padding: 40px 16px 30px; } .article-title { font-size: 30px; } .article-body p { font-size: 17px; } .article-body blockquote { font-size: 20px; padding-left: 16px; } .site-footer { padding: 24px 16px 40px; } }