/* * ========================================================================== * HTML Template Pattern * ========================================================================== * * All pages in this site should follow this structure: * * * * * * * Page Title — Zoto Agents * * * * * * * * * * * * * * * * *

* * * * *

Page Title

* *

* * * * Notes: * - Adjust relative paths based on page depth (e.g., ../css/style.css) * - Pages without a sidebar should omit

and add class "no-sidebar" * to .page-layout * - Add class "active" to the current page's sidebar link * ========================================================================== */ /* ========================================================================== 1. CSS Custom Properties ========================================================================== */ :root { /* Charcoal palette tokens — site-wide source of truth. Body copy uses --matrix-text on --matrix-bg (#d4d4d4 on #0d0d0d) which measures > 10:1 contrast (well above WCAG AAA). Landing-page-specific overrides live inline in site/index.html under body.landing-matrix and resolve directly from --matrix-* / --color-* tokens. */ --matrix-bg: #0d0d0d; --matrix-surface: #141414; --matrix-card: #1c1c1c; --matrix-border: #2d2d2d; --matrix-text: #d4d4d4; --matrix-text-dim: #737373; --matrix-accent: #e8c07a; --matrix-accent-hover: #f0d898; --matrix-grid: #2d2d2d; /* Semantic --color-* tokens are reassigned to the Matrix palette so every existing consumer (sidebar, top-nav, cards, code blocks, …) picks up the new look without a per-rule rename. */ --color-bg-primary: var(--matrix-bg); --color-bg-secondary: var(--matrix-surface); --color-bg-tertiary: var(--matrix-card); --color-text-primary: var(--matrix-text); --color-text-secondary: var(--matrix-text-dim); --color-text-heading: var(--matrix-text); --color-accent: var(--matrix-accent); --color-accent-hover: var(--matrix-accent-hover); --color-success: #3fb950; --color-warning: #d29922; --color-danger: #f85149; --color-border: var(--matrix-border); --color-border-light: var(--matrix-grid); --color-card-bg: var(--matrix-card); --color-code-bg: var(--matrix-surface); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Layout */ --sidebar-width: 280px; --top-nav-height: 56px; --content-max-width: 960px; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Borders */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /* ========================================================================== 2. Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-nav-height) + var(--spacing-lg)); } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; min-height: 100vh; } /* ========================================================================== 3. Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-heading); font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing-md); } h1 { font-size: var(--font-size-3xl); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-lg); } h2 { font-size: var(--font-size-2xl); margin-top: var(--spacing-2xl); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-xs); } h3 { font-size: var(--font-size-xl); margin-top: var(--spacing-xl); } h4 { font-size: var(--font-size-lg); margin-top: var(--spacing-lg); } h5, h6 { font-size: var(--font-size-base); margin-top: var(--spacing-lg); } p { margin-bottom: var(--spacing-md); } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); text-decoration: underline; } strong, b { font-weight: 600; color: var(--color-text-heading); } em, i { font-style: italic; } small { font-size: var(--font-size-sm); color: var(--color-text-secondary); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--spacing-xl) 0; } /* ========================================================================== 4. Lists ========================================================================== */ ul, ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-xl); } li { margin-bottom: var(--spacing-xs); } li > ul, li > ol { margin-top: var(--spacing-xs); margin-bottom: 0; } /* ========================================================================== 5. Code & Pre ========================================================================== */ code { font-family: var(--font-mono); font-size: 0.9em; background-color: var(--color-code-bg); padding: 0.15em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } pre { position: relative; background-color: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); overflow-x: auto; margin-bottom: var(--spacing-lg); line-height: 1.5; } pre code { background: none; padding: 0; border: none; border-radius: 0; font-size: var(--font-size-sm); } /* Override Prism.js background to match our theme */ pre[class*="language-"], code[class*="language-"] { background-color: var(--color-code-bg); } /* ========================================================================== 6. Top Navigation ========================================================================== */ .top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--top-nav-height); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); z-index: 100; } .top-nav-inner { display: flex; align-items: center; height: 100%; padding: 0 var(--spacing-lg); max-width: 1400px; margin: 0 auto; } .top-nav-brand { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text-heading); margin-right: auto; } .top-nav-brand:hover { color: var(--color-accent); text-decoration: none; } .top-nav-links { list-style: none; display: flex; gap: var(--spacing-lg); margin: 0; padding: 0; } .top-nav-links a { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 500; padding: var(--spacing-sm) 0; transition: color var(--transition-fast); } .top-nav-links a:hover, .top-nav-links a.active { color: var(--color-text-primary); text-decoration: none; } .sidebar-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--spacing-sm); margin-left: var(--spacing-sm); } .sidebar-toggle-icon { display: block; width: 20px; height: 2px; background-color: var(--color-text-secondary); position: relative; } .sidebar-toggle-icon::before, .sidebar-toggle-icon::after { content: ""; display: block; width: 20px; height: 2px; background-color: var(--color-text-secondary); position: absolute; left: 0; } .sidebar-toggle-icon::before { top: -6px; } .sidebar-toggle-icon::after { top: 6px; } /* ========================================================================== 7. Page Layout ========================================================================== */ .page-layout { display: flex; min-height: 100vh; padding-top: var(--top-nav-height); } /* ========================================================================== 8. Sidebar ========================================================================== */ .sidebar { position: fixed; top: var(--top-nav-height); left: 0; bottom: 0; width: var(--sidebar-width); background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-border); overflow-y: auto; padding: var(--spacing-lg) 0; z-index: 50; transition: transform var(--transition-normal); } .sidebar-nav { padding: 0 var(--spacing-md); } .sidebar-heading { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); padding: 0 var(--spacing-sm); } .sidebar-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-lg) 0; } .sidebar-link { display: block; padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-text-secondary); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .sidebar-link:hover { color: var(--color-text-primary); background-color: var(--color-bg-tertiary); text-decoration: none; } .sidebar-link.active { color: var(--color-text-primary); background-color: var(--color-bg-tertiary); font-weight: 500; } /* ========================================================================== 9. Main Content ========================================================================== */ .main-content { flex: 1; margin-left: var(--sidebar-width); padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl); min-width: 0; } .page-layout.no-sidebar .main-content { margin-left: 0; } .container { max-width: var(--content-max-width); margin: 0 auto; } /* ========================================================================== 10. Tables ========================================================================== */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); } th, td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); } th { background-color: var(--color-bg-secondary); color: var(--color-text-heading); font-weight: 600; } tr:nth-child(even) td { background-color: var(--color-bg-secondary); } tr:hover td { background-color: var(--color-bg-tertiary); } /* ========================================================================== 11. Blockquotes & Callouts ========================================================================== */ blockquote { border-left: 3px solid var(--color-accent); margin: 0 0 var(--spacing-lg) 0; padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } blockquote p:last-child { margin-bottom: 0; } .callout { border-left: 3px solid var(--color-accent); background-color: var(--color-bg-secondary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); } .callout-warning { border-left-color: var(--color-warning); } .callout-success { border-left-color: var(--color-success); } .callout-danger { border-left-color: var(--color-danger); } .callout-title { font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-text-heading); } /* ========================================================================== 12. Cards ========================================================================== */ .card { background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { border-color: var(--color-border-light); box-shadow: var(--shadow-sm); } .card-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--color-text-heading); } .card-description { color: var(--color-text-secondary); font-size: var(--font-size-sm); } /* ========================================================================== 13. Grid ========================================================================== */ .grid { display: grid; gap: var(--spacing-lg); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ========================================================================== 14. Badges & Labels ========================================================================== */ .badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; padding: 0.15em 0.5em; border-radius: 999px; background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .badge-accent { background-color: rgba(88, 166, 255, 0.15); color: var(--color-accent); border-color: rgba(88, 166, 255, 0.3); } .badge-success { background-color: rgba(63, 185, 80, 0.15); color: var(--color-success); border-color: rgba(63, 185, 80, 0.3); } .badge-warning { background-color: rgba(210, 153, 34, 0.15); color: var(--color-warning); border-color: rgba(210, 153, 34, 0.3); } .badge-danger { background-color: rgba(248, 81, 73, 0.15); color: var(--color-danger); border-color: rgba(248, 81, 73, 0.3); } /* ========================================================================== 15. Breadcrumbs ========================================================================== */ .breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding: 0; margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .breadcrumbs li + li::before { content: "/"; margin-right: var(--spacing-xs); color: var(--color-border); } /* ========================================================================== 16. Images & Figures ========================================================================== */ img { max-width: 100%; height: auto; border-radius: var(--radius-md); } figure { margin: 0 0 var(--spacing-lg) 0; } figcaption { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-sm); text-align: center; } /* ========================================================================== 17. Utility Classes ========================================================================== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .text-sm { font-size: var(--font-size-sm); } .text-lg { font-size: var(--font-size-lg); } .text-mono { font-family: var(--font-mono); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-sm); } .mt-2 { margin-top: var(--spacing-md); } .mt-3 { margin-top: var(--spacing-lg); } .mt-4 { margin-top: var(--spacing-xl); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-sm); } .mb-2 { margin-bottom: var(--spacing-md); } .mb-3 { margin-bottom: var(--spacing-lg); } .mb-4 { margin-bottom: var(--spacing-xl); } .p-0 { padding: 0; } .p-1 { padding: var(--spacing-sm); } .p-2 { padding: var(--spacing-md); } .p-3 { padding: var(--spacing-lg); } .p-4 { padding: var(--spacing-xl); } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--spacing-sm); } .gap-2 { gap: var(--spacing-md); } .gap-3 { gap: var(--spacing-lg); } .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 18. Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--color-border); padding: var(--spacing-xl) var(--spacing-lg); margin-top: var(--spacing-2xl); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* ========================================================================== 19. Responsive Breakpoints ========================================================================== */ /* Tablet: sidebar narrower */ @media (max-width: 1024px) { :root { --sidebar-width: 240px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Mobile: sidebar collapses */ @media (max-width: 768px) { .sidebar-toggle { display: block; } .sidebar { transform: translateX(-100%); width: 280px; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; padding: var(--spacing-md); } .page-layout.no-sidebar .main-content { margin-left: 0; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .top-nav-links { gap: var(--spacing-md); } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Small mobile */ @media (max-width: 480px) { .top-nav-inner { padding: 0 var(--spacing-md); } .top-nav-links a { font-size: var(--font-size-xs); } } /* ========================================================================== 20. Print Styles ========================================================================== */ @media print { .top-nav, .sidebar, .sidebar-toggle { display: none; } .main-content { margin-left: 0; } body { color: #000; background: #fff; } a { color: #000; text-decoration: underline; } pre, code { border: 1px solid #ccc; background: #f5f5f5; } } /* ========================================================================== 21. Skip to Content ========================================================================== */ .skip-to-content { position: absolute; top: -100%; left: var(--spacing-md); z-index: 200; background-color: var(--color-accent); color: #000; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-size-sm); text-decoration: none; transition: top var(--transition-fast); } .skip-to-content:focus { top: var(--spacing-sm); color: #000; } /* ========================================================================== 22. Copy Button ========================================================================== */ .copy-btn { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.2em 0.6em; font-size: var(--font-size-xs); font-family: var(--font-family); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), background-color var(--transition-fast); } pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; } .copy-btn:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); } .copy-btn.copied { opacity: 1; background-color: rgba(63, 185, 80, 0.15); color: var(--color-success); border-color: rgba(63, 185, 80, 0.3); } /* ========================================================================== 23. Page Navigation (Previous / Next) ========================================================================== */ .page-nav { display: flex; justify-content: space-between; gap: var(--spacing-lg); margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); } .page-nav-link { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .page-nav-link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); text-decoration: none; } .page-nav-next { margin-left: auto; text-align: right; } .page-nav-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } .page-nav-title { font-weight: 600; color: var(--color-accent); } /* ========================================================================== 24. Focus Indicators ========================================================================== */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .sidebar-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Responsive overrides for new components */ @media (max-width: 768px) { .page-nav { flex-direction: column; } .page-nav-next { text-align: left; margin-left: 0; } } /* ========================================================================== 24a. Top-Nav Dropdowns (peer-aware nav) ========================================================================== Dropdown markup pattern (used on landing + every plugin docs subtree): */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { cursor: pointer; } .nav-dropdown-toggle::after { content: " \25BE"; font-size: 0.7em; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background-color: var(--matrix-surface); border: 1px solid var(--matrix-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); padding: var(--spacing-xs) 0; list-style: none; margin: 0; z-index: 200; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); color: var(--matrix-text); white-space: nowrap; } .nav-dropdown-menu a:hover { color: var(--matrix-accent); background-color: var(--matrix-card); text-decoration: none; } @media (max-width: 768px) { .nav-dropdown-menu { left: auto; right: 0; } } /* ========================================================================== 25. Horizontal Stream Canvas (background) ========================================================================== The