/* ============================================================================= panel.nimbus-online.net — the Nimbus design language, as a static site. Same language as the control panel (docs/design/design-language.md in the no-infra-control-panel repo): monospace identifiers as first-class identity, a teal "signal" accent, status dots as the signature. The tokens below are a deliberate copy of the panel's — the two are separate deployables and neither can import the other, so they are kept in step by hand. If you change a value here, change it there. ============================================================================= */ :root { /* `light dark` means: follow the device unless an explicit choice overrides it below. It also makes native controls and scrollbars follow the theme. */ color-scheme: light dark; /* Every token carries BOTH values on one line. Left value = light. */ --bg: light-dark(#eef1f4, #0e1418); --surface: light-dark(#ffffff, #151d23); --surface-2: light-dark(#f6f8fa, #1a242b); --ink: light-dark(#141a20, #e8eef2); --muted: light-dark(#5a6773, #93a1ac); --line: light-dark(#dde3e9, #263139); --signal: light-dark(#0e7c86, #35b3bd); --signal-strong:light-dark(#0a5c64, #63cdd6); --signal-tint: light-dark(#e3f2f3, #10312f); /* Text ON a --signal fill: white fails (~2.2:1) against the light teal. */ --on-signal: light-dark(#ffffff, #062a2e); --up: light-dark(#1f9d57, #34c46f); --down: light-dark(#d64545, #ef6b6b); --warn: light-dark(#c17d12, #e0a44a); --starting: light-dark(#2f6fed, #5a8cf5); --idle: #8a94a0; --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --radius: 7px; --radius-sm: 5px; --shadow-near: light-dark(rgba(20,26,32,.06), rgba(0,0,0,.40)); --shadow-far: light-dark(rgba(20,26,32,.05), rgba(0,0,0,.35)); --shadow: 0 1px 2px var(--shadow-near), 0 5px 18px var(--shadow-far); --wire: linear-gradient(90deg, var(--signal), #4bb8bf 60%, transparent); } /* An explicit choice, applied by the script before first paint. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } code, .mono { font-family: var(--font-mono); } a { color: var(--signal-strong); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--radius-sm); } .brand-mark { flex: none; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Theme switch --------------------------------------------------------- Built by site.js, so it is absent rather than broken when scripting is off. The three states are discs, reusing the status-dot vocabulary. */ .theme-switch { display: none; flex: none; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } html.js .theme-switch { display: inline-flex; } .theme-switch[hidden] { display: none; } .theme-switch-option { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .theme-switch-option:hover { color: var(--ink); background: var(--surface); } .theme-switch-option[aria-pressed="true"] { background: var(--surface); color: var(--signal-strong); box-shadow: 0 1px 2px var(--shadow-near); } .theme-switch-option:focus-visible { outline-offset: -2px; } .theme-disc { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; } .theme-disc-system { background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .theme-disc-light { background: transparent; } .theme-disc-dark { background: currentColor; } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 560; font-size: 13.5px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } .btn.primary:hover { background: var(--signal-strong); border-color: var(--signal-strong); } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--signal-strong); font-weight: 600; } .note { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; } /* ---- Status dot and chips (shared with the panel) ------------------------- */ .signal { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; white-space: nowrap; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); position: relative; flex: none; } .signal.up .dot { background: var(--up); } .signal.down .dot { background: var(--down); } .signal.starting .dot { background: var(--starting); } .signal.up { color: var(--up); } .signal.down { color: var(--down); } .signal.starting { color: var(--starting); } .signal.up .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--up); opacity: .5; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .signal.up .dot::after { animation: none; } } .chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); } .chip.public { background: var(--signal-tint); color: var(--signal-strong); border-color: transparent; } .chip.private { background: var(--surface-2); color: var(--muted); } .chip.locked { background: var(--signal-tint); color: var(--signal-strong); border-color: color-mix(in srgb, var(--signal) 45%, transparent); border-style: dashed; } /* ============================================================================= Marketing chrome — top bar and footer ============================================================================= */ .topbar { border-bottom: 1px solid var(--line); background: var(--surface); } .topbar-in, .foot-in, .band-in, .slab-in { max-width: 1000px; margin: 0 auto; padding: 0 32px; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; } .topnav { display: flex; align-items: center; gap: 20px; } .topnav a { color: var(--ink); font-weight: 550; font-size: 14px; } .topnav a:hover { color: var(--signal-strong); text-decoration: none; } .wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 650; font-size: 17px; letter-spacing: .01em; } .wordmark:hover { text-decoration: none; } .wordmark.quiet { color: var(--muted); font-weight: 600; font-size: 14px; } .site-foot { padding: 24px 0 40px; border-top: 1px solid var(--line); } .foot-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; } .site-foot .note { margin: 0; } /* ============================================================================= The landing page ============================================================================= */ .lp { background: var(--surface); } /* The slab is dark in BOTH themes: it is the "before" state the sweep clears, not a theme variant. It re-declares the token names locally so the shared parts inside it follow the surface with no per-component overrides. */ .slab { --ink: #eef5f6; --muted: #93a8ae; --line: rgba(255,255,255,.13); --surface: #16232a; --surface-2: #1d2c34; --signal: #3fbcc4; --signal-strong: #7ad6dc; --signal-tint: rgba(63,188,196,.14); --on-signal: #08181b; background: radial-gradient(120% 95% at 10% 0%, #17272e 0%, #0d1519 60%, #0b1114 100%); color: var(--ink); border-bottom: 1px solid var(--line); } .slab-in { padding-top: 62px; padding-bottom: 60px; } /* The headline is set in the MONO face: this platform's vocabulary is FQDNs and container names, so the identity face carries the biggest type on the site. */ .hero h1 { font-family: var(--font-mono); font-size: clamp(29px, 5.2vw, 50px); line-height: 1.07; letter-spacing: -.035em; font-weight: 600; margin: 12px 0 0; max-width: 21ch; } .hero h1 em { font-style: normal; color: var(--signal-strong); } .hero .lede { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 58ch; margin: 20px 0 0; } .hero .btn-row { margin-top: 28px; } /* ---- The sweep: the one bold moment --------------------------------------- The broom crosses the row on load, striking each term as it passes, and the line that is left fades in under it. Nothing leaves the flow, so the page never jumps. Reduced motion gets the same end state without the travel. */ .sweep { position: relative; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); } .sweep-label { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--muted); font-weight: 600; margin: 0 0 12px; } .sweep-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 26px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .sweep-terms li { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px; animation: swept .5s ease-out forwards; animation-delay: calc(.55s + var(--i) * .2s); } @keyframes swept { to { opacity: .38; text-decoration-color: var(--signal); transform: translateY(4px); } } .sweep-broom { position: absolute; left: -8%; top: 34px; color: var(--ink); opacity: 0; animation: sweeping 2.05s cubic-bezier(.45,.05,.55,.95) forwards; } @keyframes sweeping { 0% { left: -8%; opacity: 0; transform: rotate(-14deg); } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 102%; opacity: 0; transform: rotate(12deg); } } .sweep-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 22px 0 0; font-family: var(--font-mono); font-weight: 600; font-size: clamp(16px, 2.3vw, 21px); letter-spacing: -.015em; color: var(--ink); opacity: 0; animation: settle .6s ease-out 1.7s forwards; } .sweep-out span + span::before { content: "·"; color: var(--signal); padding: 0 12px; } @keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sweep-broom { display: none; } .sweep-terms li { animation: none; opacity: .38; text-decoration-color: var(--signal); } .sweep-out { animation: none; opacity: 1; } } /* ---- Bands ---------------------------------------------------------------- */ .band { padding: 62px 0; } .band-alt { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 640; letter-spacing: -.02em; margin: 7px 0 28px; } .band .eyebrow { margin: 0; } /* Ledger — the panel's own label/value reading, at page scale. The mechanism is named in monospace because on this platform the mechanism is the point. */ .ledger { margin: 0; border-top: 1px solid var(--line); } .ledger-row { display: grid; grid-template-columns: 250px 1fr; gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); } .ledger-row dt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-weight: 640; font-size: 15px; } .ledger-row dt code { font-size: 11.5px; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--signal-tint); color: var(--signal-strong); } .ledger-row dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 64ch; } /* Inventory — the site list's dot-and-monospace treatment applied to what the box runs. The dot is this design's bullet, not a status claim here. */ .inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; } .inventory h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--signal-strong); font-weight: 650; margin: 0 0 6px; } .unit-list { list-style: none; margin: 0; padding: 0; } .unit-list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .unit-list > li > .dot { display: block; background: var(--signal); margin-top: 7px; } .unit-list strong { font-weight: 640; margin-right: 8px; } .unit-list code { font-size: 13px; } .unit-body { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: 3px; } /* ---- The machine-readable band ------------------------------------------- Two panes side by side: what an agent talks to, and what a script talks to. Deliberately shown as real transcript rather than described in prose — the audience for this section reads syntax faster than sentences. */ .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .pane-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .pane-h strong { font-size: 14px; font-weight: 640; } .pane-h code { font-size: 11.5px; color: var(--muted); } .pane-b { padding: 16px 18px; } .pane-b p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; } /* A pane is ~470px at full width and these lines are long; wrapping at the backslash continuations reads better than a clipped horizontal scroller. */ .pane pre { margin: 0; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: break-word; } /* ---- The door ------------------------------------------------------------- */ .door { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; } .door h2 { margin: 0 0 6px; } .door .note { margin: 0; max-width: 56ch; } @media (max-width: 760px) { .topbar-in, .foot-in, .band-in, .slab-in { padding: 0 18px; } .slab-in { padding-top: 40px; padding-bottom: 44px; } .band { padding: 44px 0; } .ledger-row, .inventory, .duo { grid-template-columns: 1fr; } .topnav { gap: 14px; } /* A sweep needs room to read as travel; below that it is just a jitter. */ .sweep-broom { display: none; } } /* ============================================================================= The help pages ============================================================================= */ .help { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; } .rail { background: var(--surface); border-right: 1px solid var(--line); padding: 22px 16px 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .rail .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .02em; font-size: 16px; padding: 4px 8px 2px; color: var(--ink); } .rail .brand:hover { text-decoration: none; } .rail .kicker { padding: 0 8px 16px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } .rail nav { display: flex; flex-direction: column; gap: 2px; } .rail nav a { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.35; } .rail nav a .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); padding-top: 1px; } .rail nav a:hover { background: var(--surface-2); text-decoration: none; } .rail nav a[aria-current="page"] { background: var(--signal-tint); color: var(--signal-strong); font-weight: 600; } .rail nav a[aria-current="page"] .n { color: var(--signal-strong); } .rail .rail-note { color: var(--muted); font-size: 12px; line-height: 1.5; padding: 16px 10px 0; margin: 0; } .rail-foot { margin-top: auto; padding: 16px 8px 0; } .main { padding: 40px 44px 96px; } .wrap { max-width: 760px; } .wrap h1 { font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 0; line-height: 1.18; } .lede { font-size: 17.5px; color: var(--muted); margin: 14px 0 0; max-width: 64ch; line-height: 1.55; } .wrap h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: 40px 0 0; } .wrap h3 { font-size: 15.5px; font-weight: 650; margin: 26px 0 0; } .wrap p { margin: 12px 0 0; max-width: 68ch; } .wrap ul, .wrap ol { margin: 12px 0 0; padding-left: 20px; max-width: 68ch; } .wrap li { margin: 6px 0; } .wrap li::marker { color: var(--muted); } .wrap strong { font-weight: 640; } /* The path strip: the four hops a request makes, with "you are here". */ .path { display: flex; margin: 26px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); position: relative; } .path::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wire); } .path-node { padding: 19px 18px 16px; flex: 1 1 0; min-width: 0; } .path-node + .path-node { border-left: 1px solid var(--line); } .path-k { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 7px; } .path-v { display: block; font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: break-word; line-height: 1.5; } .path-note { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; } .path-node.here { background: var(--signal-tint); } .path-node.here .path-k { color: var(--signal-strong); } /* Notes. Three severities, and the keyword carries the colour rather than a coloured panel — a page of tinted boxes reads as noise. */ .note-box, .wrap .note { margin: 22px 0 0; padding: 15px 17px; border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--ink); } .wrap .note p { margin: 8px 0 0; max-width: none; } .wrap .note p:first-child { margin: 0; } .note .note-k { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: var(--signal-strong); margin-right: 8px; } .wrap .note.trap { border-left-color: var(--warn); } .wrap .note.trap .note-k { color: color-mix(in srgb, var(--warn) 72%, var(--ink)); } .wrap .note.stop { border-left-color: var(--down); } .wrap .note.stop .note-k { color: color-mix(in srgb, var(--down) 72%, var(--ink)); } .wrap .note.later { border-left-color: var(--line); } .wrap .note.later .note-k { color: var(--muted); } pre { margin: 18px 0 0; padding: 15px 17px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; } pre code { font-size: inherit; } p code, li code, td code, .note code, .detail code, dd code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); } .wrap .cmd { color: var(--muted); } .table-scroll { overflow-x: auto; margin: 20px 0 0; } table.grid { width: 100%; border-collapse: collapse; font-size: 14px; } table.grid th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.grid td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } table.grid tr:last-child td { border-bottom: 0; } table.grid td.mono, table.grid td .mono { font-family: var(--font-mono); font-size: 13px; } .detail { display: grid; grid-template-columns: 190px 1fr; gap: 0 20px; margin: 20px 0 0; } .detail dt { color: var(--muted); font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--line); } .detail dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); } .detail dt:last-of-type, .detail dd:last-of-type { border-bottom: 0; } /* Chapter cards on the help index. */ .chapters { display: grid; gap: 10px; margin: 22px 0 0; } .chapter { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color .12s, background .12s; } .chapter:hover { text-decoration: none; border-color: var(--signal); background: var(--surface-2); } .chapter .n { font-family: var(--font-mono); font-size: 12px; color: var(--signal-strong); font-weight: 700; padding-top: 2px; } .chapter .t { font-weight: 620; font-size: 15px; } .chapter .d { color: var(--muted); font-size: 13.5px; margin-top: 3px; line-height: 1.45; } .pager { display: flex; justify-content: space-between; gap: 14px; margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--line); } .pager a { display: block; max-width: 46%; } .pager .dir { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .pager .t { font-weight: 600; font-size: 14.5px; } .pager .next { text-align: right; margin-left: auto; } @media (max-width: 900px) { .help { grid-template-columns: 1fr; } .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .rail .kicker, .rail .rail-note { display: none; } .rail nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .rail-foot { margin-top: 14px; } .main { padding: 26px 20px 72px; } .wrap h1 { font-size: 27px; } .lede { font-size: 16.5px; } .path { flex-direction: column; } .path-node + .path-node { border-left: 0; border-top: 1px solid var(--line); } .detail { grid-template-columns: 1fr; } .detail dt { border-bottom: 0; padding-bottom: 0; } .pager a { max-width: 48%; } }