/* * zoleb.com canonical design tokens * Copy-paste into any service under zoleb.com for visual consistency. * Ship InterVariable.ttf alongside (e.g. ./InterVariable.ttf) and adjust the * @font-face url() to wherever the font is served. */ @font-face { font-family: "InterVariable"; src: url("./InterVariable.ttf") format("truetype-variations"), url("./InterVariable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; } :root, html[data-theme="dark"] { color-scheme: dark; --bg: #272822; --surface: rgba(62, 61, 50, 0.6); --surface-strong: rgba(73, 72, 62, 0.85); --border: rgba(248, 248, 242, 0.1); --text: #f8f8f2; --muted: #75715e; --accent: #fd971f; --accent-soft: rgba(253, 151, 31, 0.14); --green: #a6e22e; --red: #f92672; --shadow: 0 18px 60px rgba(0, 0, 0, 0.5); } html[data-theme="light"] { color-scheme: light; --bg: #fafafa; --surface: rgba(39, 40, 34, 0.04); --surface-strong: rgba(39, 40, 34, 0.08); --border: rgba(39, 40, 34, 0.12); --text: #272822; --muted: #75715e; --accent: #c24f0d; --accent-soft: rgba(194, 79, 13, 0.12); --green: #4d8500; --red: #c00e5a; --shadow: 0 8px 32px rgba(39, 40, 34, 0.08); } html, body { background: var(--bg); color: var(--text); } body { margin: 0; font-family: "InterVariable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-feature-settings: "cv11", "ss01", "ss03"; line-height: 1.5; } .mono, code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* * Canonical theme-toggle visual (matches zoleb.com). * Text reads "light mode" / "dark mode" (labels the action, not the state). * * Place the button inside `.page-header` (a flex-end bar) at the top of * ``. The toggle stays in document flow — it does NOT use * `position: fixed`, which causes it to overlay/shadow page content and * appear to "hover" as the user scrolls. */ .page-header { display: flex; align-items: baseline; justify-content: flex-end; gap: 1rem; padding: 16px; } .theme-toggle { font: inherit; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 0.2rem 0.6rem; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }