/* =========================================== BRAINOUTSIDE HUB — Main Styles Ported from brainoutside.com (brainoutside-site repo). The original was Tailwind v4 + a component layer (btn/card/badge/notice/prose) built on the same paper/ink/indigo tokens the LWH studio theme uses, so this bridges straight onto the site-wide tokens the same way simplerllm_hub/hub.css does. Everything is scoped to .bo-page — nothing here leaks into the site chrome, and the site's global .card/.prose/.table styles never match these class names. =========================================== */ .bo-page { /* Tokens — bridged onto the studio theme (tokens live on ), with the original paper palette as fallback. */ --bo-surface: var(--surface, #fffef7); --bo-surface-2: var(--surface-2, #faf8f5); --bo-ink: var(--ink, #1a1a2e); --bo-muted: var(--muted, #6b6b7b); --bo-line: var(--line, rgba(26, 26, 46, 0.12)); --bo-accent: var(--accent, #6366f1); --bo-accent-strong: var(--accent-strong, #4f46e5); --bo-accent-contrast: #ffffff; --bo-signal: var(--signal, #4db8a8); --bo-warn: var(--warn, #f5d76e); --bo-danger: var(--danger, #ff6b6b); /* Readable-as-TEXT variants of the status colours: the fills above sit behind things; as text on paper they fail 4.5:1. */ --bo-signal-ink: #2c8577; --bo-warn-ink: #8a6d1a; --bo-danger-ink: #c0392b; /* Terminal scale — deliberately FIXED: a code pane is dark in any theme by design, so these never re-point. */ --bo-term-900: #0d1117; --bo-term-700: #21262d; --bo-term-600: #30363d; --bo-term-400: #8b949e; --bo-term-300: #c9d1d9; --bo-radius-card: 14px; --bo-radius-control: 10px; --bo-radius-pill: 999px; --bo-shadow-card: 0 1px 2px rgba(26, 26, 46, .06), 0 8px 24px rgba(26, 26, 46, .08); --bo-shadow-soft: 0 1px 2px rgba(26, 26, 46, .06), 0 2px 8px rgba(26, 26, 46, .06); /* All three families are already self-hosted site-wide (fonts.css). */ --bo-font-display: 'Space Grotesk', system-ui, sans-serif; --bo-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --bo-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-family: var(--bo-font-body); color: var(--bo-ink); background: var(--bo-surface); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* =========================================== SECTION HEADER (brand + subnav tabs) =========================================== */ .bo-header { border-bottom: 1px solid var(--bo-line); background: var(--bo-surface); } .bo-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; row-gap: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; } .bo-brand-group { display: flex; align-items: center; gap: 0.5rem; } .bo-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .bo-brand img { height: 1.5rem; width: 1.5rem; } .bo-brand-name { font-family: var(--bo-font-display); font-size: 1.125rem; font-weight: 600; color: var(--bo-ink); } .bo-subnav { display: flex; align-items: center; gap: 1.25rem; } .bo-subnav-item { font-size: 0.875rem; color: var(--bo-muted); text-decoration: none; transition: color 0.15s ease; } .bo-subnav-item:hover { color: var(--bo-ink); } .bo-subnav-item--active { color: var(--bo-accent); font-weight: 500; } /* =========================================== LAYOUT =========================================== */ /* Contained width — matches the site header (max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 in components/navbar.html). */ .bo-container { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .bo-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .bo-container { padding-left: 2rem; padding-right: 2rem; } } .bo-section { padding-top: 4rem; padding-bottom: 4rem; } /* Alternating band: the cream stripe between paper sections. */ .bo-section--alt { border-top: 1px solid var(--bo-line); border-bottom: 1px solid var(--bo-line); background: var(--bo-surface-2); } .bo-section--center { text-align: center; } .bo-grid { display: grid; gap: 1.5rem; } .bo-grid--tight { gap: 1rem; } @media (min-width: 768px) { .bo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 1 → 2 (sm) → 3 (lg), for the six-card "what the server adds" wall. */ @media (min-width: 640px) { .bo-grid--3wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .bo-grid--3wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* =========================================== HERO =========================================== */ .bo-hero { display: grid; align-items: center; gap: 3rem; } @media (min-width: 768px) { .bo-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bo-section--hero { padding-top: 6rem; padding-bottom: 6rem; } } .bo-hero-title { margin-top: 1rem; font-family: var(--bo-font-display); font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--bo-ink); } @media (min-width: 768px) { .bo-hero-title { font-size: 3rem; letter-spacing: -0.02em; line-height: 1.1; } } .bo-hero-tagline { margin-top: 0.5rem; font-family: var(--bo-font-display); font-size: 1.25rem; color: var(--bo-accent); } .bo-hero-lead { margin-top: 1.25rem; max-width: 65ch; font-size: 1.125rem; line-height: 1.75rem; color: var(--bo-muted); } .bo-hero-img { width: 100%; max-width: 28rem; margin-left: auto; margin-right: auto; display: block; } .bo-cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } /* =========================================== TYPE =========================================== */ .bo-h2 { font-family: var(--bo-font-display); font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--bo-ink); } @media (min-width: 768px) { .bo-h2 { font-size: 1.875rem; line-height: 2.25rem; } } .bo-lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--bo-muted); } .bo-muted { color: var(--bo-muted); } .bo-small { font-size: 0.875rem; line-height: 1.25rem; } .bo-ink { color: var(--bo-ink); } .bo-max-prose { max-width: 65ch; } .bo-max-2xl { max-width: 42rem; } .bo-max-3xl { max-width: 48rem; } .bo-center { margin-left: auto; margin-right: auto; } .bo-page-title { font-family: var(--bo-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--bo-ink); } .bo-page-subtitle { margin-top: 0.25rem; font-size: 0.875rem; color: var(--bo-muted); } /* The quiet grey label that opens each docs section. */ .bo-section-title { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--bo-muted); } .bo-link { color: var(--bo-accent); text-decoration: underline; } .bo-link:hover { color: var(--bo-accent-strong); } /* Spacing rhythm — the port keeps the source's explicit stacking. */ .bo-mt-2 { margin-top: 0.5rem; } .bo-mt-3 { margin-top: 0.75rem; } .bo-mt-4 { margin-top: 1rem; } .bo-mt-5 { margin-top: 1.25rem; } .bo-mt-6 { margin-top: 1.5rem; } .bo-mt-8 { margin-top: 2rem; } .bo-mt-10 { margin-top: 2.5rem; } .bo-mt-12 { margin-top: 3rem; } /* =========================================== BADGES =========================================== */ .bo-badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--bo-radius-pill); padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; border: 1px solid transparent; } .bo-badge--info { background: color-mix(in srgb, var(--bo-accent) 14%, transparent); border-color: color-mix(in srgb, var(--bo-accent) 40%, transparent); color: color-mix(in srgb, var(--bo-accent) 72%, var(--bo-ink)); } .bo-badge--ok { background: color-mix(in srgb, var(--bo-signal) 16%, transparent); border-color: color-mix(in srgb, var(--bo-signal) 40%, transparent); color: var(--bo-signal-ink); } .bo-badge--muted { background: color-mix(in srgb, var(--bo-ink) 6%, transparent); border-color: var(--bo-line); color: var(--bo-muted); } /* =========================================== BUTTONS =========================================== */ .bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; user-select: none; border: 1px solid transparent; border-radius: var(--bo-radius-control); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; cursor: pointer; } .bo-btn--primary { background: var(--bo-accent); color: var(--bo-accent-contrast); } .bo-btn--primary:hover { background: var(--bo-accent-strong); color: var(--bo-accent-contrast); } .bo-btn--secondary { border-color: var(--bo-line); color: var(--bo-ink); background: transparent; } .bo-btn--secondary:hover { border-color: color-mix(in srgb, var(--bo-ink) 28%, transparent); background: color-mix(in srgb, var(--bo-ink) 4%, transparent); color: var(--bo-ink); } .bo-btn--lg { padding: 0.625rem 1.5rem; } .bo-btn--sm { gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; } /* =========================================== CARDS =========================================== */ .bo-card { background: var(--bo-surface); border: 1px solid var(--bo-line); border-radius: var(--bo-radius-card); box-shadow: var(--bo-shadow-soft); } /* A whole card as a link (docs index). */ .bo-card--link { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bo-card--link:hover { border-color: color-mix(in srgb, var(--bo-ink) 28%, transparent); box-shadow: var(--bo-shadow-card); } .bo-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--bo-line); } .bo-card-title { font-family: var(--bo-font-display); font-size: 0.875rem; font-weight: 600; color: var(--bo-ink); } .bo-card-body { padding: 1rem; } .bo-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--bo-line); } /* Body copy inside cards: the small muted paragraph under a title. Carries no margin of its own — the port keeps the source's explicit bo-mt-* stacking, and some card paragraphs sit flush. */ .bo-card-text { font-size: 0.875rem; line-height: 1.45; color: var(--bo-muted); } /* Stacked list inside a card body. */ .bo-list { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.45; color: var(--bo-muted); } .bo-list > li + li { margin-top: 0.75rem; } .bo-list strong { color: var(--bo-ink); } /* =========================================== NOTICES (inline callouts) =========================================== */ .bo-notice { border: 1px solid var(--bo-line); border-radius: var(--bo-radius-control); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.45; background: var(--bo-surface); } .bo-notice--ok { border-color: color-mix(in srgb, var(--bo-signal) 45%, transparent); background: color-mix(in srgb, var(--bo-signal) 10%, transparent); } .bo-notice--warn { border-color: color-mix(in srgb, var(--bo-warn) 55%, transparent); background: color-mix(in srgb, var(--bo-warn) 14%, transparent); } .bo-notice--danger { border-color: color-mix(in srgb, var(--bo-danger) 45%, transparent); background: color-mix(in srgb, var(--bo-danger) 9%, transparent); } .bo-notice-title { font-family: var(--bo-font-display); font-size: 1.125rem; font-weight: 600; color: var(--bo-ink); } /* =========================================== TABLES =========================================== */ .bo-table-wrap { width: 100%; overflow-x: auto; } .bo-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; } .bo-table th { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; color: var(--bo-muted); border-bottom: 1px solid var(--bo-line); white-space: nowrap; } .bo-table td { padding: 0.5rem 0.75rem; vertical-align: top; border-bottom: 1px solid var(--bo-line); } .bo-table tbody tr:last-child td { border-bottom: 0; } /* =========================================== DOCS LAYOUT — sidebar + content, mirroring the SimplerLLM docs shell (simplerllm_hub/docs.css). =========================================== */ .bo-docs-layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 100px); position: relative; /* Same container as .bo-container, so the sidebar lines up with the subnav brand above it. Gutter bumps live at the end of this block. */ max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* ----- Sidebar ----- */ .bo-docs-sidebar { background: var(--bo-surface); border-right: 1px solid var(--bo-line); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .bo-docs-sidebar-inner { padding: 20px 0; } .bo-docs-sidebar::-webkit-scrollbar { width: 4px; } .bo-docs-sidebar::-webkit-scrollbar-track { background: transparent; } .bo-docs-sidebar::-webkit-scrollbar-thumb { background: var(--bo-line); border-radius: 4px; } .bo-docs-nav { padding: 0 8px; } .bo-docs-nav-section { margin-bottom: 20px; } .bo-docs-nav-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bo-muted); padding: 0 8px; margin-bottom: 6px; } .bo-docs-nav-list { list-style: none; padding: 0; margin: 0; } .bo-docs-nav-link { display: block; padding: 7px 12px; font-size: 13px; color: var(--bo-muted); text-decoration: none; border-radius: 6px; border-left: 2px solid transparent; margin-left: 2px; transition: all 0.15s; } .bo-docs-nav-link:hover { color: var(--bo-ink); background: var(--bo-surface-2); } .bo-docs-nav-link--active { color: var(--bo-accent); background: color-mix(in srgb, var(--bo-accent) 8%, var(--bo-surface)); border-left-color: var(--bo-accent); font-weight: 500; } /* ----- Main content ----- */ .bo-docs-main { padding: 32px 48px; /* The 80rem container bounds the reading width; an extra cap here would leave dead space against the container's right edge. */ min-width: 0; } .bo-docs-article { line-height: 1.7; } .bo-docs-breadcrumb { font-size: 13px; color: var(--bo-muted); margin-bottom: 16px; } .bo-docs-breadcrumb a { color: var(--bo-muted); text-decoration: none; transition: color 0.15s; } .bo-docs-breadcrumb a:hover { color: var(--bo-accent); } .bo-docs-breadcrumb-sep { margin: 0 8px; opacity: 0.5; } .bo-docs-title { font-family: var(--bo-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--bo-ink); } /* ----- Prev/next footer ----- */ .bo-docs-nav-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--bo-line); } .bo-docs-nav-prev, .bo-docs-nav-next { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; background: var(--bo-surface-2); border: 1px solid var(--bo-line); border-radius: var(--bo-radius-control); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; min-width: 0; flex: 1; max-width: 280px; } .bo-docs-nav-prev:hover, .bo-docs-nav-next:hover { border-color: var(--bo-accent); background: var(--bo-surface); } .bo-docs-nav-next { text-align: right; margin-left: auto; } .bo-docs-nav-label { font-size: 12px; color: var(--bo-muted); text-transform: uppercase; letter-spacing: 0.5px; } .bo-docs-nav-name { font-size: 15px; font-weight: 500; color: var(--bo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ----- Mobile sidebar toggle ----- */ .bo-docs-sidebar-toggle { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 100; background: var(--bo-accent); color: var(--bo-accent-contrast); border: none; border-radius: 12px; padding: 12px 16px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--bo-accent) 30%, transparent); align-items: center; gap: 8px; } .bo-docs-sidebar-toggle:hover { background: var(--bo-accent-strong); } .bo-docs-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 199; } .bo-docs-overlay.active { display: block; } @media (max-width: 900px) { .bo-docs-layout { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; } .bo-docs-sidebar { position: fixed; left: 0; top: 0; width: 280px; height: 100vh; z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease; border-right: 1px solid var(--bo-line); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); } .bo-docs-sidebar.open { transform: translateX(0); } .bo-docs-sidebar-toggle { display: flex; } .bo-docs-main { padding: 24px 20px; } .bo-docs-title { font-size: 1.625rem; } } @media (max-width: 640px) { .bo-docs-main { padding: 20px 16px; } .bo-docs-nav-footer { flex-direction: column; gap: 12px; } .bo-docs-nav-prev, .bo-docs-nav-next { max-width: none; } .bo-docs-nav-next { text-align: left; } } /* Container gutter bumps — mirror .bo-container. Must stay after the max-width blocks above so the mobile zero-gutter override wins. */ @media (min-width: 901px) { .bo-docs-layout { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .bo-docs-layout { padding-left: 2rem; padding-right: 2rem; } } /* =========================================== PROSE — docs body typography =========================================== */ .bo-prose { color: var(--bo-ink); line-height: 1.75; } .bo-prose > :first-child { margin-top: 0; } .bo-prose > :last-child { margin-bottom: 0; } .bo-prose p, .bo-prose ul, .bo-prose ol, .bo-prose blockquote, .bo-prose pre, .bo-prose figure { margin-top: 1.25em; margin-bottom: 1.25em; } .bo-prose ul { list-style: disc; padding-left: 1.625em; } .bo-prose ol { list-style: decimal; padding-left: 1.625em; } .bo-prose li { margin-top: 0.5em; margin-bottom: 0.5em; } .bo-prose li::marker { color: var(--bo-muted); } .bo-prose a { color: var(--bo-accent); text-decoration: underline; } .bo-prose a:hover { color: var(--bo-accent-strong); } .bo-prose strong { color: var(--bo-ink); font-weight: 600; } .bo-prose code { font-family: var(--bo-font-mono); font-size: 0.875em; font-weight: 600; color: var(--bo-ink); } /* Fenced blocks: the dark terminal pane, fixed across themes. Scoped to the whole page, not just .bo-prose — a couple of docs blocks sit inside notices with no prose wrapper. */ .bo-page pre { background: var(--bo-term-900); color: var(--bo-term-300); border: 1px solid var(--bo-term-700); border-radius: var(--bo-radius-control); padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--bo-font-mono); font-size: 0.875rem; line-height: 1.6; } .bo-page pre code { font-family: inherit; font-size: inherit; font-weight: 400; color: inherit; background: transparent; padding: 0; } .bo-prose blockquote { border-left: 3px solid var(--bo-line); padding-left: 1em; font-style: italic; color: var(--bo-ink); } .bo-prose blockquote code { font-style: normal; } /* A wide markdown-ish table with nothing to scroll inside becomes the page's horizontal scrollbar on a phone — make it its own scroll box. */ .bo-prose table { display: block; max-width: 100%; overflow-x: auto; } .bo-prose img { max-width: 100%; height: auto; } .bo-prose hr { border: 0; border-top: 1px solid var(--bo-line); margin: 2rem 0; } .bo-figure-img { width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid var(--bo-line); } .bo-figcaption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--bo-muted); }