/* * Nabla user manual - the whole shell in one stylesheet. * * Hand-written and edited in place (build_manual.py generates the pages and the search index, not * this file). One rule survives every phase: no @import, no web font, no remote asset of any kind. * These pages are opened over file:// with no network, and a stylesheet that reached for a CDN * would render as unstyled text on exactly the machines that matter - a customer's, offline. * * Layout: a sticky header, a two-column grid (sidebar + article) that collapses to one column and * a hamburger below 900px, and a print block that drops everything but the article so Ctrl-P * yields a clean chapter. */ /* ---------------------------------------------------------------- palette */ :root { color-scheme: light dark; --bg: #ffffff; --bg-soft: #f4f6f9; --panel: #eef1f6; --fg: #1a1d22; --muted: #4c5563; --accent: #0f56b3; --accent-soft: #e4edfb; --rule: #d5dae2; --shadow: rgba(20, 26, 36, 0.14); --mark-bg: #ffe9a8; --mark-fg: #3a2c00; --badge-pro-bg: #dbe8fd; --badge-pro-fg: #0d4796; --badge-machines-bg: #e6e0fb; --badge-machines-fg: #4a2e9c; --badge-thermal-bg: #fbe4d4; --badge-thermal-fg: #8a3d0b; --badge-perf-bg: #dcf3e4; --badge-perf-fg: #146332; --badge-automation-bg: #fde3ee; --badge-automation-fg: #9c1d5c; --badge-materials-bg: #eef0d6; --badge-materials-fg: #5c5a12; --header-height: 3.25rem; --measure: 72ch; } /* * Dark palette: applied automatically by prefers-color-scheme, or unconditionally when the * reader's own choice (the header's Theme button, persisted to localStorage and stamped onto * before first paint - see _template.html) overrides the system setting. A * `[data-theme]` attribute always wins over the media query, in either direction, which is what * lets "Light" mode work for a reader whose OS is set to dark and vice versa. */ @media (prefers-color-scheme: dark) { :root { --bg: #14171c; --bg-soft: #1a1e25; --panel: #1f242c; --fg: #e7eaef; --muted: #a7b0bd; --accent: #8ab6ff; --accent-soft: #1d2a3d; --rule: #2d333d; --shadow: rgba(0, 0, 0, 0.5); --mark-bg: #6a5312; --mark-fg: #ffeec2; --badge-pro-bg: #16304f; --badge-pro-fg: #a8c9ff; --badge-machines-bg: #2a2350; --badge-machines-fg: #c4b6ff; --badge-thermal-bg: #46281a; --badge-thermal-fg: #f3bb92; --badge-perf-bg: #143a25; --badge-perf-fg: #92e0af; --badge-automation-bg: #3d1730; --badge-automation-fg: #f5a9d1; --badge-materials-bg: #35330f; --badge-materials-fg: #dad76a; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #14171c; --bg-soft: #1a1e25; --panel: #1f242c; --fg: #e7eaef; --muted: #a7b0bd; --accent: #8ab6ff; --accent-soft: #1d2a3d; --rule: #2d333d; --shadow: rgba(0, 0, 0, 0.5); --mark-bg: #6a5312; --mark-fg: #ffeec2; --badge-pro-bg: #16304f; --badge-pro-fg: #a8c9ff; --badge-machines-bg: #2a2350; --badge-machines-fg: #c4b6ff; --badge-thermal-bg: #46281a; --badge-thermal-fg: #f3bb92; --badge-perf-bg: #143a25; --badge-perf-fg: #92e0af; --badge-automation-bg: #3d1730; --badge-automation-fg: #f5a9d1; --badge-materials-bg: #35330f; --badge-materials-fg: #dad76a; } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-soft: #f4f6f9; --panel: #eef1f6; --fg: #1a1d22; --muted: #4c5563; --accent: #0f56b3; --accent-soft: #e4edfb; --rule: #d5dae2; --shadow: rgba(20, 26, 36, 0.14); --mark-bg: #ffe9a8; --mark-fg: #3a2c00; --badge-pro-bg: #dbe8fd; --badge-pro-fg: #0d4796; --badge-machines-bg: #e6e0fb; --badge-machines-fg: #4a2e9c; --badge-thermal-bg: #fbe4d4; --badge-thermal-fg: #8a3d0b; --badge-perf-bg: #dcf3e4; --badge-perf-fg: #146332; --badge-automation-bg: #fde3ee; --badge-automation-fg: #9c1d5c; --badge-materials-bg: #eef0d6; --badge-materials-fg: #5c5a12; } /* ---------------------------------------------------------------- base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.62; } a { color: var(--accent); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; z-index: 20; } .skip-link:focus { left: 0.5rem; top: 0.5rem; padding: 0.5rem 0.9rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; } /* ---------------------------------------------------------------- header */ .manual-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 0.6rem; height: var(--header-height); padding: 0 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--rule); } .manual-header .product { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--fg); text-decoration: none; } .manual-header .product:hover { color: var(--accent); } .manual-header .header-sub { color: var(--muted); font-size: 0.95rem; } .manual-header .header-version { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* Hamburger: hidden on wide screens, where the sidebar is always visible. */ .nav-toggle { display: none; width: 2.1rem; height: 2.1rem; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 4px; color: inherit; cursor: pointer; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.05rem; height: 2px; margin: 0 auto; background: currentColor; content: ""; } .nav-toggle-bars::before { transform: translateY(-5px); } .nav-toggle-bars::after { transform: translateY(3px); } .theme-toggle { padding: 0.3rem 0.6rem; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); font: inherit; font-size: 0.78rem; cursor: pointer; white-space: nowrap; } .theme-toggle:hover { color: var(--fg); border-color: var(--accent); } /* ---------------------------------------------------------------- layout */ .layout { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2.5rem; max-width: 78rem; margin: 0 auto; padding: 0 1.25rem; } main { max-width: var(--measure); padding: 1.75rem 0 4rem; } /* ---------------------------------------------------------------- sidebar */ .sidebar { position: sticky; top: var(--header-height); align-self: start; max-height: calc(100vh - var(--header-height)); overflow-y: auto; padding: 1.5rem 0.75rem 2rem 0; border-right: 1px solid var(--rule); font-size: 0.93rem; } .search { margin: 0 0 1rem; } .search input { width: 100%; padding: 0.45rem 0.6rem; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 5px; font: inherit; font-size: 0.93rem; } .search input::placeholder { color: var(--muted); } .nav-part { margin: 1.4rem 0 0.35rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .nav-pages, .nav-sections { margin: 0; padding: 0; list-style: none; } .nav-pages > li > a { display: block; padding: 0.25rem 0.5rem; border-radius: 4px; color: var(--fg); text-decoration: none; } .nav-pages > li > a:hover { background: var(--panel); } .nav-page.current > a { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-sections { margin: 0.15rem 0 0.4rem 0.75rem; border-left: 1px solid var(--rule); } .nav-sections a { display: block; padding: 0.15rem 0.6rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; } .nav-sections a:hover { color: var(--fg); } .nav-sections a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } /* ---------------------------------------------------------------- search results */ .search-results { margin-bottom: 1rem; } .search-summary { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.82rem; } .search-hits { margin: 0; padding: 0; list-style: none; } .search-hits li { margin-bottom: 0.55rem; } .search-hits a { display: block; padding: 0.35rem 0.5rem; border-radius: 4px; text-decoration: none; color: var(--fg); } .search-hits a:hover { background: var(--panel); } .search-hits .hit-title { display: block; font-weight: 600; color: var(--accent); } .search-hits .hit-page { display: block; font-size: 0.78rem; color: var(--muted); } .search-hits .hit-snippet { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.45; } mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; } /* ---------------------------------------------------------------- article */ .breadcrumb { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.88rem; } h1 { margin: 0 0 0.6rem; font-size: 2rem; line-height: 1.2; letter-spacing: -0.01em; } h2 { margin: 2.5rem 0 0.7rem; padding-top: 0.4rem; font-size: 1.35rem; line-height: 1.3; scroll-margin-top: calc(var(--header-height) + 1rem); } h3 { margin: 1.8rem 0 0.5rem; font-size: 1.08rem; } /* "Copy link to this section": revealed on hover or keyboard focus, invisible when printed. */ .heading-link { margin-left: 0.4rem; font-size: 0.75em; font-weight: 400; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 0.12s ease-in-out; } h2:hover .heading-link, .heading-link:focus { opacity: 1; } .heading-link:hover { color: var(--accent); } p { margin: 0 0 1rem; } .lead { color: var(--muted); font-size: 1.08rem; } ul, ol { padding-left: 1.35rem; } li { margin: 0.3rem 0; } .toc-part { margin: 1.6rem 0 0.4rem; font-size: 1rem; color: var(--muted); } ul.toc { padding-left: 1.2rem; } /* ---------------------------------------------------------------- callouts */ .note, .warning, .tip { margin: 1.5rem 0; padding: 0.85rem 1rem; background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; } .warning { border-left-color: #c2410c; } .tip { border-left-color: #197a4b; } .note > :first-child, .warning > :first-child, .tip > :first-child { margin-top: 0; } .note > :last-child, .warning > :last-child, .tip > :last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- badges */ .badge { display: inline-block; padding: 0.05em 0.5em; border-radius: 999px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.12em; white-space: nowrap; } .badge-pro { background: var(--badge-pro-bg); color: var(--badge-pro-fg); } .badge-machines { background: var(--badge-machines-bg); color: var(--badge-machines-fg); } .badge-thermal { background: var(--badge-thermal-bg); color: var(--badge-thermal-fg); } .badge-perf { background: var(--badge-perf-bg); color: var(--badge-perf-fg); } .badge-automation { background: var(--badge-automation-bg); color: var(--badge-automation-fg); } .badge-materials { background: var(--badge-materials-bg); color: var(--badge-materials-fg); } /* ---------------------------------------------------------------- code, keys, tables, figures */ code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; } code { font-size: 0.9em; } pre { padding: 0.85rem 1rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 5px; overflow-x: auto; font-size: 0.86rem; line-height: 1.5; } pre code { font-size: inherit; } kbd { padding: 0.05em 0.4em; background: var(--panel); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; font-size: 0.85em; white-space: nowrap; } caption { margin-bottom: 0.45rem; color: var(--muted); font-size: 0.88rem; text-align: left; } table { width: 100%; margin: 1.4rem 0; border-collapse: collapse; font-size: 0.94rem; } th, td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } th { background: var(--bg-soft); font-weight: 600; } figure { margin: 1.5rem 0; } figure img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; } figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.86rem; } /* ---------------------------------------------------------------- footer */ .manual-footer { max-width: 78rem; margin: 0 auto; padding: 1rem 1.25rem 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.82rem; } .manual-footer p { margin: 0.15rem 0; } .stamp { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- narrow screens */ @media (max-width: 900px) { .nav-toggle { display: block; } .layout { display: block; padding: 0 1.1rem; } .sidebar { display: none; position: static; max-height: none; padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--rule); } .sidebar.open { display: block; } main { padding-top: 1.25rem; } } /* ---------------------------------------------------------------- print */ @media print { /* !important: a `:root[data-theme]` override (higher specificity than plain :root) must not survive into print - a page read in dark mode still prints on white paper. */ :root { --bg: #ffffff !important; --fg: #000000 !important; --muted: #333333 !important; --rule: #999999 !important; --panel: #f2f2f2 !important; --bg-soft: #f7f7f7 !important; --accent: #000000 !important; } .manual-header, .sidebar, .skip-link, .breadcrumb, .heading-link, .nav-toggle, .theme-toggle { display: none !important; } body { font-size: 11pt; background: #fff; color: #000; } .layout { display: block; max-width: none; padding: 0; } main { max-width: none; padding: 0; } a { color: #000; text-decoration: underline; } h1, h2, h3 { page-break-after: avoid; } pre, figure, table { page-break-inside: avoid; } .manual-footer { border-top: 1px solid #999; } }