/* Operator handbook styles. Palette mirrors apps/frontend/src/tokens.css ("Polytechnic Precision", rooted in ETH Blue) so the docs read as part of the product. Kept standalone — no build-time import — because this site deploys independently of the frontend service. */ :root { color-scheme: light; --brand: #1f407a; --brand-strong: #002961; --brand-soft: #d8e2ff; --surface: #fcf9f8; --surface-raised: #ffffff; --surface-sunken: #f6f3f2; --surface-code: #f4f2f1; --text: #1b1c1c; --text-muted: #434750; --text-faint: #747781; --border: #dcd9d9; --border-strong: #c4c6d1; --ok: #166534; --ok-bg: #dcfce7; --warn: #92400e; --warn-bg: #fef3c7; --danger: #ba1a1a; --danger-bg: #ffdad6; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace; --sidebar-w: 17rem; --toc-w: 15rem; --topbar-h: 3.75rem; --radius: 0.5rem; --content-max: 48rem; } /* Dark theme is declared twice on purpose: once for the OS preference (unless the reader has explicitly chosen light), once for the explicit data-theme the toggle stamps on . The explicit form comes second so it wins in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --brand: #aec6ff; --brand-strong: #d8e2ff; --brand-soft: #1f2937; --surface: #131314; --surface-raised: #1b1c1e; --surface-sunken: #0e0e0f; --surface-code: #1e1f22; --text: #e5e2e1; --text-muted: #b6b8c0; --text-faint: #8b8e96; --border: #2e2f33; --border-strong: #43454b; --ok: #7ee2a8; --ok-bg: #10281a; --warn: #f0c987; --warn-bg: #2b2110; --danger: #ffb4ab; --danger-bg: #3b1210; } } :root[data-theme='dark'] { color-scheme: dark; --brand: #aec6ff; --brand-strong: #d8e2ff; --brand-soft: #1f2937; --surface: #131314; --surface-raised: #1b1c1e; --surface-sunken: #0e0e0f; --surface-code: #1e1f22; --text: #e5e2e1; --text-muted: #b6b8c0; --text-faint: #8b8e96; --border: #2e2f33; --border-strong: #43454b; --ok: #7ee2a8; --ok-bg: #10281a; --warn: #f0c987; --warn-bg: #2b2110; --danger: #ffb4ab; --danger-bg: #3b1210; } /* --- reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 0.6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } /* --- topbar ------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; background: var(--surface-raised); border-bottom: 1px solid var(--border); } .topbar__menu { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 2.75rem; height: 2.75rem; padding: 0.7rem; background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .topbar__menu span { display: block; height: 2px; background: var(--text); border-radius: 2px; } .topbar__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .topbar__mark { width: 1.35rem; height: 1.35rem; border-radius: 4px; background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface-raised), 0 0 0 1px var(--brand); } .topbar__search { position: relative; margin-left: auto; width: min(24rem, 45vw); } .topbar__search input { width: 100%; height: 2.5rem; padding: 0 0.85rem; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); } .topbar__search input::placeholder { color: var(--text-faint); } .search-results { position: absolute; top: calc(100% + 0.4rem); right: 0; left: 0; max-height: 24rem; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / 18%); padding: 0.35rem; } .search-results a { display: block; padding: 0.5rem 0.65rem; border-radius: 0.35rem; color: var(--text); text-decoration: none; } .search-results a:hover, .search-results a.is-active { background: var(--brand-soft); } .search-results .sr-title { display: block; font-weight: 600; font-size: 0.9rem; } .search-results .sr-section { display: block; font-size: 0.75rem; color: var(--text-faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; } .search-results .sr-empty { padding: 0.75rem; color: var(--text-faint); font-size: 0.9rem; } .topbar__theme { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; flex: none; } .topbar__theme-icon { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--text); box-shadow: inset -0.32rem -0.32rem 0 0 var(--surface-raised); } :root[data-theme='dark'] .topbar__theme-icon { box-shadow: inset 0 0 0 0 var(--surface-raised); } /* --- layout ------------------------------------------------------------ */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); align-items: start; max-width: 92rem; margin: 0 auto; } .sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 1.5rem 1rem 3rem; border-right: 1px solid var(--border); } .nav-section + .nav-section { margin-top: 1.5rem; } .nav-section__title { margin: 0 0 0.5rem; padding-left: 0.7rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar a { display: block; padding: 0.4rem 0.7rem; border-radius: 0.35rem; color: var(--text-muted); text-decoration: none; font-size: 0.92rem; border-left: 2px solid transparent; } .sidebar a:hover { color: var(--text); background: var(--surface-sunken); } .sidebar a.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; border-left-color: var(--brand); } .sidebar-scrim { display: none; } .main { min-width: 0; padding: 2.5rem 2.5rem 4rem; } .toc { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 2.5rem 1.25rem 3rem 0; } .toc__title { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .toc a { display: block; padding: 0.25rem 0 0.25rem 0.85rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; line-height: 1.4; } .toc a:hover { color: var(--text); } .toc a.is-current { color: var(--brand); border-left-color: var(--brand); font-weight: 600; } .toc .toc-depth-3 a { padding-left: 1.6rem; font-size: 0.8rem; } /* --- prose ------------------------------------------------------------- */ .prose { max-width: var(--content-max); } .eyebrow { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); } .prose h1 { margin: 0 0 1.25rem; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; } .prose h2 { margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; } .prose h3 { margin: 2rem 0 0.75rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } .prose h4 { margin: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 700; } .prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; } .prose li { margin-bottom: 0.35rem; } .prose li > ul, .prose li > ol { margin: 0.35rem 0 0.5rem; } .prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border); } .heading-anchor { margin-left: 0.4rem; color: var(--text-faint); text-decoration: none; opacity: 0; font-weight: 400; } .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; } .prose strong { font-weight: 700; color: var(--text); } .prose blockquote { margin: 1.5rem 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--border-strong); background: var(--surface-sunken); border-radius: 0 var(--radius) var(--radius) 0; } .prose blockquote p:last-child { margin-bottom: 0; } .callout--note { border-left-color: var(--brand); background: var(--brand-soft); } .callout--tip { border-left-color: var(--ok); background: var(--ok-bg); } .callout--warning { border-left-color: var(--warn); background: var(--warn-bg); } .callout--danger { border-left-color: var(--danger); background: var(--danger-bg); } /* --- code -------------------------------------------------------------- */ .prose :not(pre) > code { font-family: var(--mono); font-size: 0.86em; padding: 0.15em 0.4em; background: var(--surface-code); border: 1px solid var(--border); border-radius: 4px; overflow-wrap: break-word; } .prose pre { margin: 0 0 1.5rem; padding: 1rem 1.1rem; background: var(--surface-code); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; } .prose pre code { font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; background: none; border: 0; padding: 0; white-space: pre; } /* highlight.js tokens, mapped onto the palette rather than a bundled theme */ .hljs-comment, .hljs-quote { color: var(--text-faint); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag, .hljs-type, .hljs-name, .hljs-strong { color: var(--brand); font-weight: 600; } .hljs-string, .hljs-title, .hljs-attr, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition { color: var(--ok); } .hljs-number, .hljs-variable, .hljs-template-variable, .hljs-built_in, .hljs-meta { color: var(--warn); } .hljs-deletion, .hljs-regexp { color: var(--danger); } /* --- tables ------------------------------------------------------------ */ .prose table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.92rem; } /* Wide tables scroll inside their own container; the page never scrolls sideways. */ .table-scroll { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); } .table-scroll table { margin: 0; border: 0; min-width: 34rem; } .prose th { text-align: left; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-sunken); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .prose td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } .prose td code { white-space: nowrap; } /* --- pager & footer ---------------------------------------------------- */ .pager { display: flex; justify-content: space-between; gap: 1rem; max-width: var(--content-max); margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .pager__link { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; min-width: 0; } .pager__link:hover { border-color: var(--brand); background: var(--surface-sunken); } .pager__link--next { text-align: right; margin-left: auto; } .pager__dir { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .pager__title { font-weight: 600; color: var(--brand); } .footer { max-width: var(--content-max); margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.85rem; } .footer p { margin: 0; } /* --- responsive -------------------------------------------------------- */ @media (max-width: 1180px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .toc { display: none; } } @media (max-width: 860px) { .shell { grid-template-columns: minmax(0, 1fr); } .topbar__menu { display: flex; } .topbar__name { display: none; } .sidebar { position: fixed; top: var(--topbar-h); left: 0; z-index: 30; width: min(var(--sidebar-w), 82vw); background: var(--surface-raised); transform: translateX(-102%); transition: transform 0.18s ease; } .sidebar.is-open { transform: translateX(0); } .sidebar-scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0; z-index: 20; background: rgb(0 0 0 / 40%); } .sidebar-scrim[hidden] { display: none; } .main { padding: 2rem 1.25rem 3.5rem; } .pager { flex-direction: column; } .pager__link--next { margin-left: 0; text-align: left; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }