Viren Baraiya
3183 lines
89 KiB
CSS
3183 lines
89 KiB
CSS
/* ==========================================================================
|
||
Conductor Docs — Zinc + Orange Theme (Light + Dark)
|
||
Inter × IBM Plex Mono
|
||
========================================================================== */
|
||
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||
|
||
/* ---------- Tokens — Light (default) ---------- */
|
||
:root {
|
||
--c-bg: #ffffff;
|
||
--c-bg-secondary: #f4f4f5;
|
||
--c-bg-tertiary: #e4e4e7;
|
||
--c-border: #d4d4d8;
|
||
--c-border-dim: #e4e4e7;
|
||
--c-text: #09090b;
|
||
--c-text-muted: #52525b;
|
||
--c-text-dim: #71717a;
|
||
--c-accent: #f97316;
|
||
--c-accent-hover: #ea580c;
|
||
--c-blue: #3b82f6;
|
||
--c-green: #22c55e;
|
||
--c-header-bg: rgba(255, 255, 255, 0.85);
|
||
|
||
--font-body: "Inter", -apple-system, "system-ui", sans-serif;
|
||
--font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
|
||
|
||
--r-sm: 6px;
|
||
--r-md: 8px;
|
||
--r-lg: 12px;
|
||
--r-xl: 16px;
|
||
|
||
--shadow-card: 0 4px 16px rgba(0,0,0,0.06);
|
||
--shadow-elevated: 0 12px 40px rgba(0,0,0,0.1);
|
||
|
||
/* MkDocs Material overrides */
|
||
--md-primary-fg-color: var(--c-bg);
|
||
--md-primary-fg-color--light: var(--c-bg-tertiary);
|
||
--md-primary-fg-color--dark: var(--c-bg);
|
||
--md-accent-fg-color: var(--c-accent);
|
||
--md-typeset-font-size: 0.85rem;
|
||
--md-default-bg-color: var(--c-bg);
|
||
--md-default-fg-color: var(--c-text);
|
||
--md-default-fg-color--light: var(--c-text-muted);
|
||
--md-default-fg-color--lighter: var(--c-text-dim);
|
||
--md-default-fg-color--lightest: var(--c-border);
|
||
}
|
||
|
||
/* ---------- Tokens — Dark (slate) ---------- */
|
||
[data-md-color-scheme="slate"] {
|
||
--c-bg: #09090b;
|
||
--c-bg-secondary: #18181b;
|
||
--c-bg-tertiary: #27272a;
|
||
--c-border: #3f3f46;
|
||
--c-border-dim: #27272a;
|
||
--c-text: #fafafa;
|
||
--c-text-muted: #a1a1aa;
|
||
--c-text-dim: #71717a;
|
||
--c-header-bg: rgba(9, 9, 11, 0.85);
|
||
|
||
--shadow-card: 0 4px 16px rgba(0,0,0,0.3);
|
||
--shadow-elevated: 0 12px 40px rgba(0,0,0,0.4);
|
||
|
||
--md-default-bg-color: var(--c-bg);
|
||
--md-default-fg-color: var(--c-text);
|
||
--md-default-fg-color--light: var(--c-text-muted);
|
||
--md-default-fg-color--lighter: var(--c-text-dim);
|
||
--md-default-fg-color--lightest: var(--c-border);
|
||
--md-typeset-color: var(--c-text-muted);
|
||
--md-code-bg-color: var(--c-bg-secondary);
|
||
--md-code-fg-color: var(--c-text);
|
||
--md-typeset-a-color: var(--c-blue);
|
||
}
|
||
|
||
/* ---------- Base ---------- */
|
||
body {
|
||
font-family: var(--font-body) !important;
|
||
color: var(--c-text);
|
||
-webkit-font-smoothing: antialiased;
|
||
background: var(--c-bg) !important;
|
||
}
|
||
|
||
/* ---------- Header ---------- */
|
||
.md-header {
|
||
background: var(--c-header-bg) !important;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
color: var(--c-text) !important;
|
||
border-bottom: 1px solid var(--c-border);
|
||
box-shadow: none !important;
|
||
}
|
||
.md-header[data-md-state="shadow"] {
|
||
box-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
|
||
}
|
||
.md-header__title {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--c-text) !important;
|
||
}
|
||
.md-logo img { height: 30px !important; }
|
||
[data-md-color-scheme="slate"] .md-logo img {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* Tabs */
|
||
.md-tabs {
|
||
background: var(--c-header-bg) !important;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--c-border);
|
||
}
|
||
/* Material hides the tab bar below 76.25em and falls back to the drawer, but
|
||
the home page hides drawer navigation (hide: navigation), leaving that page
|
||
with no navigation at all on narrow screens. The tab list is natively a
|
||
scrollable nowrap flex row, so keep the bar visible as a swipeable strip. */
|
||
@media screen and (max-width: 76.234375em) {
|
||
.md-tabs {
|
||
display: block;
|
||
}
|
||
}
|
||
.md-tabs__link {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--c-text-dim) !important;
|
||
letter-spacing: 0;
|
||
opacity: 1 !important;
|
||
}
|
||
.md-tabs__item--active > .md-tabs__link,
|
||
.md-tabs__link--active,
|
||
.md-tabs__link:hover {
|
||
color: var(--c-text) !important;
|
||
}
|
||
.md-tabs__item--active > .md-tabs__link {
|
||
border-bottom: 2px solid var(--c-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ---------- Quickstart language pickers ---------- */
|
||
.agent-language-picker,
|
||
.worker-language-picker {
|
||
margin: 18px 0;
|
||
padding: 18px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
}
|
||
.agent-language-picker > label,
|
||
.worker-language-picker > label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: var(--c-text);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
.agent-language-picker > select,
|
||
.worker-language-picker > select {
|
||
min-width: 220px;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-bg);
|
||
color: var(--c-text);
|
||
font: inherit;
|
||
}
|
||
.agent-language-picker > p,
|
||
.worker-language-picker > p {
|
||
margin: 6px 0 16px !important;
|
||
color: var(--c-text-muted);
|
||
font-size: 13px;
|
||
}
|
||
.agent-language-guide > :last-child,
|
||
.worker-language-guide > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.agent-language-guide__heading,
|
||
.worker-language-guide__heading {
|
||
margin: 20px 0 12px !important;
|
||
color: var(--c-text);
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
/* ---------- Typography (docs pages) ---------- */
|
||
.md-typeset h1 {
|
||
font-family: var(--font-body) !important;
|
||
font-weight: 700 !important;
|
||
font-size: 28px !important;
|
||
color: var(--c-text) !important;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 10px !important;
|
||
}
|
||
.md-typeset h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-weight: 600 !important;
|
||
font-size: 22px !important;
|
||
color: var(--c-text) !important;
|
||
line-height: 1.3;
|
||
margin-top: 28px;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
.md-typeset h3 {
|
||
font-family: var(--font-body) !important;
|
||
font-weight: 600 !important;
|
||
font-size: 18px !important;
|
||
color: var(--c-text) !important;
|
||
margin-top: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.md-typeset h4 {
|
||
font-family: var(--font-body) !important;
|
||
font-weight: 600 !important;
|
||
font-size: 15px !important;
|
||
letter-spacing: 0.02em;
|
||
color: var(--c-text-muted) !important;
|
||
margin-top: 18px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.md-typeset {
|
||
line-height: 1.6;
|
||
color: var(--c-text-muted);
|
||
font-size: 15px;
|
||
}
|
||
.md-typeset p {
|
||
margin-top: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
.md-typeset ul,
|
||
.md-typeset ol {
|
||
margin-top: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
.md-typeset li + li {
|
||
margin-top: 3px;
|
||
}
|
||
.md-typeset a {
|
||
color: var(--c-blue);
|
||
text-decoration-color: rgba(59, 130, 246, 0.3);
|
||
text-underline-offset: 2px;
|
||
}
|
||
.md-typeset a:hover {
|
||
color: #60a5fa;
|
||
text-decoration-color: rgba(59, 130, 246, 0.6);
|
||
}
|
||
|
||
/*
|
||
* Inline code inside a link. Material colours it with --md-typeset-a-color,
|
||
* which in the default (light) scheme resolves to --md-primary-fg-color —
|
||
* white here — making linked inline code invisible on its light pill. The
|
||
* slate block already redefines --md-typeset-a-color; light mode does not,
|
||
* so colour it with the link blue explicitly.
|
||
*/
|
||
.md-typeset a code {
|
||
color: var(--c-blue) !important;
|
||
}
|
||
.md-typeset a:hover code,
|
||
.md-typeset a:focus code {
|
||
color: #60a5fa !important;
|
||
}
|
||
|
||
/* ---------- Compact page summaries ---------- */
|
||
.page-summary {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin: 0 0 22px;
|
||
padding: 16px 18px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: linear-gradient(115deg, rgba(59, 130, 246, 0.1), transparent 55%), var(--c-bg-secondary);
|
||
}
|
||
.page-summary__text {
|
||
margin: 0 !important;
|
||
color: var(--c-text-muted);
|
||
font-size: 14px;
|
||
line-height: 1.45;
|
||
}
|
||
.page-summary__source {
|
||
margin: 8px 0 0 !important;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ---------- Concept heroes ---------- */
|
||
.concept-hero {
|
||
--concept-accent: var(--c-blue);
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
|
||
align-items: center;
|
||
gap: 28px;
|
||
margin: 24px 0 30px;
|
||
padding: 26px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background: linear-gradient(135deg, color-mix(in srgb, var(--concept-accent) 15%, transparent), transparent 62%), var(--c-bg-secondary);
|
||
}
|
||
.concept-hero--workflows { --concept-accent: #2563eb; }
|
||
.concept-hero--tasks { --concept-accent: #7c3aed; }
|
||
.concept-hero--workers { --concept-accent: #0f766e; }
|
||
.concept-hero--event-bus { --concept-accent: #ea580c; }
|
||
.concept-hero--cookbook { --concept-accent: #0f766e; }
|
||
.concept-hero__content > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.concept-hero__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--concept-accent);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.concept-hero h2 {
|
||
margin: 0 0 10px;
|
||
font-size: clamp(22px, 2.4vw, 30px);
|
||
line-height: 1.2;
|
||
}
|
||
.concept-hero__graphic {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
color: var(--concept-accent);
|
||
}
|
||
/* Graphic-only hero (no __content column): span the grid and center. */
|
||
.concept-hero__graphic:only-child {
|
||
grid-column: 1 / -1;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
.concept-hero:has(> .concept-hero__graphic:only-child) {
|
||
padding: 13px;
|
||
}
|
||
/* Diagram-only agent hero: span the grid, center, and tighten. */
|
||
.agent-runtime-hero > .agent-runtime-hero__diagram:only-child {
|
||
grid-column: 1 / -1;
|
||
max-width: 620px;
|
||
margin: 0 auto;
|
||
}
|
||
.agent-runtime-hero:has(> .agent-runtime-hero__diagram:only-child) {
|
||
padding: 13px;
|
||
}
|
||
.agent-concepts-hero > .agent-concepts-hero__diagram:only-child {
|
||
grid-column: 1 / -1;
|
||
max-width: 660px;
|
||
margin: 0 auto;
|
||
}
|
||
.agent-concepts-hero:has(> .agent-concepts-hero__diagram:only-child) {
|
||
padding: 12px;
|
||
}
|
||
.concept-hero__node,
|
||
.concept-hero__outcome-box {
|
||
fill: var(--c-bg);
|
||
stroke: var(--c-text-muted);
|
||
stroke-width: 2;
|
||
}
|
||
.concept-hero__node--accent {
|
||
fill: color-mix(in srgb, var(--concept-accent) 14%, var(--c-bg));
|
||
stroke: var(--concept-accent);
|
||
}
|
||
.concept-hero__outcome {
|
||
fill: color-mix(in srgb, var(--concept-accent) 14%, var(--c-bg));
|
||
stroke: var(--concept-accent);
|
||
stroke-width: 2;
|
||
}
|
||
.concept-hero__line {
|
||
fill: none;
|
||
stroke: var(--c-text-muted);
|
||
stroke-width: 2;
|
||
}
|
||
.concept-hero__line--inside {
|
||
stroke: var(--concept-accent);
|
||
stroke-width: 3;
|
||
}
|
||
.concept-hero__check {
|
||
fill: none;
|
||
stroke: var(--concept-accent);
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
stroke-width: 4;
|
||
}
|
||
.concept-hero__label {
|
||
fill: var(--c-text);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
.concept-hero__detail {
|
||
fill: var(--c-text-muted);
|
||
font-size: 11px;
|
||
}
|
||
.concept-hero--event-bus .event-hero__node--broker {
|
||
fill: color-mix(in srgb, #2563eb 11%, var(--c-bg));
|
||
stroke: #2563eb;
|
||
}
|
||
.concept-hero--event-bus .event-hero__node--action {
|
||
fill: color-mix(in srgb, #0f766e 11%, var(--c-bg));
|
||
stroke: #0f766e;
|
||
}
|
||
.concept-hero--event-bus .event-hero__line--dashed {
|
||
stroke-dasharray: 5 4;
|
||
}
|
||
.event-bus-hero__visual {
|
||
display: grid;
|
||
min-width: 0;
|
||
gap: 14px;
|
||
}
|
||
.event-bus-hero__brokers {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 8px;
|
||
}
|
||
.event-bus-hero__broker {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 9px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-sm);
|
||
background: #fff;
|
||
color: #1f2937;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.event-bus-hero__broker img {
|
||
display: block;
|
||
width: 25px;
|
||
height: 25px;
|
||
flex: 0 0 auto;
|
||
object-fit: contain;
|
||
}
|
||
.event-bus-hero__broker span {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.event-bus-hero__flow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
padding: 10px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-muted);
|
||
font-size: 11px;
|
||
text-align: center;
|
||
}
|
||
.event-bus-hero__flow b {
|
||
color: var(--concept-accent);
|
||
font-size: 16px;
|
||
}
|
||
.event-bus-hero__flow strong {
|
||
padding: 6px 8px;
|
||
border-radius: 7px;
|
||
background: color-mix(in srgb, var(--concept-accent) 15%, var(--c-bg));
|
||
color: var(--c-text);
|
||
font-size: 12px;
|
||
line-height: 1.25;
|
||
}
|
||
.event-bus-hero__flow small {
|
||
color: var(--c-text-muted);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
}
|
||
.event-bus-recipes {
|
||
margin: 18px 0 0;
|
||
}
|
||
.event-bus-recipes__link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 11px 15px;
|
||
border: 1px solid var(--c-accent);
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-accent);
|
||
color: #fff !important;
|
||
font-weight: 700;
|
||
text-decoration: none !important;
|
||
}
|
||
.event-bus-recipes__link:hover {
|
||
background: #ea580c;
|
||
border-color: #ea580c;
|
||
}
|
||
|
||
/* ---------- Cookbook landing ---------- */
|
||
.cookbook-hero__sources rect {
|
||
fill: var(--c-bg);
|
||
stroke: var(--c-text-muted);
|
||
stroke-width: 2;
|
||
}
|
||
.cookbook-hero__sources text {
|
||
fill: var(--c-text);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.cookbook-grid {
|
||
--cookbook-accent: #0f766e;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
margin: 22px 0;
|
||
}
|
||
.cookbook-card {
|
||
display: grid;
|
||
grid-template-columns: 42px minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 14px;
|
||
min-width: 0;
|
||
padding: 17px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
color: var(--c-text) !important;
|
||
text-decoration: none !important;
|
||
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
|
||
}
|
||
.cookbook-card:hover {
|
||
border-color: var(--cookbook-accent);
|
||
box-shadow: var(--shadow-card);
|
||
transform: translateY(-2px);
|
||
}
|
||
.cookbook-card:focus-visible {
|
||
outline: 3px solid color-mix(in srgb, var(--cookbook-accent) 35%, transparent);
|
||
outline-offset: 3px;
|
||
}
|
||
.cookbook-card__icon {
|
||
display: grid;
|
||
width: 42px;
|
||
height: 42px;
|
||
place-items: center;
|
||
border-radius: 11px;
|
||
background: color-mix(in srgb, var(--cookbook-accent) 14%, var(--c-bg));
|
||
color: var(--cookbook-accent);
|
||
}
|
||
.cookbook-card__icon svg {
|
||
width: 25px;
|
||
height: 25px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
stroke-width: 1.8;
|
||
}
|
||
.cookbook-card__body {
|
||
display: grid;
|
||
min-width: 0;
|
||
gap: 4px;
|
||
}
|
||
.cookbook-card__body strong {
|
||
color: var(--c-text);
|
||
font-size: 16px;
|
||
line-height: 1.25;
|
||
}
|
||
.cookbook-card__body span {
|
||
color: var(--c-text-muted);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
}
|
||
.cookbook-card__arrow {
|
||
color: var(--cookbook-accent);
|
||
font-size: 21px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ---------- Agent discovery ---------- */
|
||
.agent-concepts-callout,
|
||
.framework-hero {
|
||
margin: 24px 0 30px;
|
||
padding: 24px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), transparent 58%), var(--c-bg-secondary);
|
||
}
|
||
.agent-concepts-callout h2,
|
||
.framework-hero h2 {
|
||
margin: 0 0 8px;
|
||
}
|
||
.agent-concepts-callout p:last-child,
|
||
.framework-hero p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.agent-concepts-kicker,
|
||
.framework-hero__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--c-accent);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.framework-logo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
.framework-logo-grid--quickstart {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
.framework-logo-card {
|
||
display: flex;
|
||
min-height: 118px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
padding: 16px 12px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg);
|
||
color: var(--c-text) !important;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
text-align: center;
|
||
text-decoration: none !important;
|
||
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||
}
|
||
.framework-logo-card:hover {
|
||
border-color: var(--c-accent);
|
||
box-shadow: var(--shadow-card);
|
||
color: var(--c-text) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
.framework-logo-card:focus-visible {
|
||
outline: 3px solid var(--c-accent);
|
||
outline-offset: 3px;
|
||
}
|
||
.framework-logo {
|
||
width: 42px;
|
||
height: 42px;
|
||
object-fit: contain;
|
||
}
|
||
.framework-logo--wide {
|
||
width: 104px;
|
||
}
|
||
.framework-heading-logo {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 7px;
|
||
vertical-align: -5px;
|
||
}
|
||
.framework-heading-logo--wide {
|
||
width: 74px;
|
||
}
|
||
[data-md-color-scheme="slate"] .framework-logo,
|
||
[data-md-color-scheme="slate"] .framework-heading-logo {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
.integration-hero {
|
||
--integration-accent: var(--c-accent);
|
||
margin: 24px 0 30px;
|
||
padding: 24px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background: linear-gradient(135deg, color-mix(in srgb, var(--integration-accent) 16%, transparent), transparent 58%), var(--c-bg-secondary);
|
||
}
|
||
.integration-hero--a2a { --integration-accent: #2563eb; }
|
||
.integration-hero--mcp { --integration-accent: #7c3aed; }
|
||
.integration-hero--hitl { --integration-accent: #00a6a6; }
|
||
.integration-hero--durable { --integration-accent: #f97316; }
|
||
.integration-hero--workflow { --integration-accent: #2563eb; }
|
||
.integration-hero--first-agent { --integration-accent: #7c3aed; }
|
||
.integration-hero--agents { --integration-accent: var(--c-accent); }
|
||
.integration-hero--guardrails { --integration-accent: #0f766e; }
|
||
.integration-hero--evals { --integration-accent: #7e22ce; }
|
||
.integration-hero h2 {
|
||
margin: 0 0 8px;
|
||
}
|
||
.integration-hero__identity {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
min-height: 46px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.integration-hero__identity--conductor {
|
||
justify-content: flex-start;
|
||
}
|
||
.integration-hero__logo {
|
||
width: 46px;
|
||
height: 46px;
|
||
object-fit: contain;
|
||
}
|
||
.integration-hero__logo--conductor {
|
||
width: 132px;
|
||
}
|
||
.integration-hero__connector {
|
||
color: var(--integration-accent);
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
}
|
||
.integration-hero__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--integration-accent);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.integration-hero__diagram {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 22px 0 0;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg);
|
||
}
|
||
|
||
/* ---------- Agents & AI runtime hero ---------- */
|
||
.agent-runtime-hero {
|
||
--agent-authoring: #c2410c;
|
||
--agent-brain: #7c3aed;
|
||
--agent-runtime: #2563eb;
|
||
--agent-hands: #0f766e;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
|
||
align-items: center;
|
||
gap: 28px;
|
||
margin: 24px 0 34px;
|
||
padding: 26px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background:
|
||
linear-gradient(135deg, color-mix(in srgb, var(--agent-brain) 12%, transparent), transparent 44%),
|
||
linear-gradient(315deg, color-mix(in srgb, var(--agent-hands) 12%, transparent), transparent 44%),
|
||
var(--c-bg-secondary);
|
||
}
|
||
.agent-runtime-hero__content > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.agent-runtime-hero__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--agent-runtime);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.agent-runtime-hero h2 {
|
||
margin: 0 0 12px;
|
||
font-size: clamp(24px, 2.7vw, 34px);
|
||
line-height: 1.16;
|
||
}
|
||
.agent-runtime-hero__paths {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 7px;
|
||
margin-top: 16px;
|
||
}
|
||
.agent-runtime-hero__paths a {
|
||
padding: 5px 8px;
|
||
border: 1px solid color-mix(in srgb, var(--agent-runtime) 42%, var(--c-border));
|
||
border-radius: 999px;
|
||
background: var(--c-bg);
|
||
color: var(--agent-runtime);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
text-decoration: none;
|
||
}
|
||
.agent-runtime-hero__paths a:hover {
|
||
border-color: var(--agent-runtime);
|
||
color: var(--agent-runtime);
|
||
}
|
||
.agent-runtime-hero__legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
margin-top: 16px;
|
||
color: var(--c-text-muted);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.agent-runtime-hero__legend span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.agent-runtime-hero__swatch {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
}
|
||
.agent-runtime-hero__swatch--authoring { background: var(--agent-authoring); }
|
||
.agent-runtime-hero__swatch--brain { background: var(--agent-brain); }
|
||
.agent-runtime-hero__swatch--runtime { background: var(--agent-runtime); }
|
||
.agent-runtime-hero__swatch--hands { background: var(--agent-hands); }
|
||
.agent-runtime-hero__diagram {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
overflow: visible;
|
||
}
|
||
.agent-runtime-hero__lane-label,
|
||
.agent-runtime-hero__compile {
|
||
fill: var(--c-text-muted);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.agent-runtime-hero__compile {
|
||
fill: var(--agent-runtime);
|
||
font-size: 10px;
|
||
}
|
||
.agent-runtime-hero__brain-box {
|
||
fill: color-mix(in srgb, var(--agent-brain) 10%, var(--c-bg));
|
||
stroke: color-mix(in srgb, var(--agent-brain) 55%, var(--c-border));
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-runtime-hero__authoring-box {
|
||
fill: color-mix(in srgb, var(--agent-authoring) 9%, var(--c-bg));
|
||
stroke: color-mix(in srgb, var(--agent-authoring) 55%, var(--c-border));
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-runtime-hero__authoring-card {
|
||
fill: var(--c-bg);
|
||
stroke: var(--agent-authoring);
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-runtime-hero__brain-card {
|
||
fill: var(--c-bg);
|
||
stroke: var(--agent-brain);
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-runtime-hero__runtime-box {
|
||
fill: color-mix(in srgb, var(--agent-runtime) 13%, var(--c-bg));
|
||
stroke: var(--agent-runtime);
|
||
stroke-width: 2;
|
||
}
|
||
.agent-runtime-hero__hands-card {
|
||
fill: color-mix(in srgb, var(--agent-hands) 10%, var(--c-bg));
|
||
stroke: color-mix(in srgb, var(--agent-hands) 72%, var(--c-border));
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-runtime-hero__label,
|
||
.agent-runtime-hero__runtime-title {
|
||
fill: var(--c-text);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
.agent-runtime-hero__runtime-title {
|
||
fill: var(--agent-runtime);
|
||
font-size: 15px;
|
||
}
|
||
.agent-runtime-hero__runtime-title--brain { fill: var(--agent-brain); }
|
||
.agent-runtime-hero__detail,
|
||
.agent-runtime-hero__runtime-detail {
|
||
fill: var(--c-text-muted);
|
||
font-size: 10px;
|
||
}
|
||
.agent-runtime-hero__runtime-detail { font-size: 11px; }
|
||
.agent-runtime-hero__arrow,
|
||
.agent-runtime-hero__runtime-rule {
|
||
fill: none;
|
||
stroke: var(--c-text-muted);
|
||
stroke-width: 1.75;
|
||
}
|
||
.agent-runtime-hero__arrow--runtime,
|
||
.agent-runtime-hero__runtime-rule {
|
||
stroke: var(--agent-runtime);
|
||
}
|
||
.agent-runtime-hero__arrowhead { fill: var(--c-text-muted); }
|
||
.agent-runtime-hero__arrowhead--runtime { fill: var(--agent-runtime); }
|
||
.agent-runtime-hero__turn-loop {
|
||
fill: none;
|
||
stroke: var(--agent-runtime);
|
||
stroke-dasharray: 5 4;
|
||
stroke-width: 1.75;
|
||
}
|
||
|
||
/* ---------- AI Cookbook hero ---------- */
|
||
.ai-cookbook-hero {
|
||
--ai-cookbook-input: #0f766e;
|
||
--ai-cookbook-ai: #7c3aed;
|
||
--ai-cookbook-control: #2563eb;
|
||
--ai-cookbook-outcome: #c2410c;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.9fr) minmax(350px, 1.1fr);
|
||
align-items: center;
|
||
gap: 28px;
|
||
margin: 24px 0 34px;
|
||
padding: 13px 26px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background:
|
||
linear-gradient(135deg, color-mix(in srgb, var(--ai-cookbook-ai) 12%, transparent), transparent 45%),
|
||
linear-gradient(315deg, color-mix(in srgb, var(--ai-cookbook-input) 12%, transparent), transparent 45%),
|
||
var(--c-bg-secondary);
|
||
}
|
||
.ai-cookbook-hero__content > :last-child { margin-bottom: 0; }
|
||
.ai-cookbook-hero__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--ai-cookbook-control);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ai-cookbook-hero h2 {
|
||
margin: 0 0 12px;
|
||
font-size: clamp(24px, 2.7vw, 34px);
|
||
line-height: 1.16;
|
||
}
|
||
.ai-cookbook-hero__legend {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
margin-top: 16px;
|
||
color: var(--c-text-muted);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.ai-cookbook-hero__legend span { display: inline-flex; align-items: center; gap: 6px; }
|
||
.ai-cookbook-hero__swatch { width: 9px; height: 9px; border-radius: 50%; }
|
||
.ai-cookbook-hero__swatch--input { background: var(--ai-cookbook-input); }
|
||
.ai-cookbook-hero__swatch--ai { background: var(--ai-cookbook-ai); }
|
||
.ai-cookbook-hero__swatch--control { background: var(--ai-cookbook-control); }
|
||
.ai-cookbook-hero__swatch--outcome { background: var(--ai-cookbook-outcome); }
|
||
.ai-cookbook-hero__diagram { display: block; width: 100%; min-width: 0; overflow: visible; }
|
||
.ai-cookbook-hero__lane,
|
||
.ai-cookbook-hero__caption {
|
||
fill: var(--c-text-muted);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.07em;
|
||
}
|
||
.ai-cookbook-hero__caption { fill: var(--ai-cookbook-control); letter-spacing: 0.02em; }
|
||
.ai-cookbook-hero__family { fill: var(--c-bg); stroke-width: 1.5; }
|
||
.ai-cookbook-hero__family--workflows { stroke: var(--ai-cookbook-ai); }
|
||
.ai-cookbook-hero__family--agents { stroke: var(--ai-cookbook-control); }
|
||
.ai-cookbook-hero__starter { fill: color-mix(in srgb, var(--ai-cookbook-control) 12%, var(--c-bg)); stroke: var(--ai-cookbook-control); stroke-width: 2; }
|
||
.ai-cookbook-hero__model { fill: color-mix(in srgb, var(--ai-cookbook-ai) 11%, var(--c-bg)); stroke: var(--ai-cookbook-ai); stroke-width: 1.25; }
|
||
.ai-cookbook-hero__policy { fill: color-mix(in srgb, var(--ai-cookbook-control) 13%, var(--c-bg)); stroke: var(--ai-cookbook-control); stroke-width: 1.25; }
|
||
.ai-cookbook-hero__outcome { fill: color-mix(in srgb, var(--ai-cookbook-outcome) 11%, var(--c-bg)); stroke: var(--ai-cookbook-outcome); stroke-width: 1.5; }
|
||
.ai-cookbook-hero__label,
|
||
.ai-cookbook-hero__starter-title { fill: var(--c-text); font-size: 12px; font-weight: 700; }
|
||
.ai-cookbook-hero__starter-title { fill: var(--ai-cookbook-control); font-size: 16px; }
|
||
.ai-cookbook-hero__detail { fill: var(--c-text-muted); font-size: 10px; }
|
||
.ai-cookbook-hero__policy-text { fill: var(--ai-cookbook-control); font-size: 10px; font-weight: 700; }
|
||
.ai-cookbook-hero__arrow { fill: none; stroke: var(--c-text-muted); stroke-width: 1.75; }
|
||
.ai-cookbook-hero__arrow--control { stroke: var(--ai-cookbook-control); }
|
||
.ai-cookbook-hero__arrowhead { fill: var(--c-text-muted); }
|
||
.ai-cookbook-hero__arrowhead--control { fill: var(--ai-cookbook-control); }
|
||
.ai-cookbook-hero__check { fill: none; stroke: var(--ai-cookbook-outcome); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
|
||
|
||
/* ---------- Workflow diagrams ---------- */
|
||
.md-typeset .workflow-diagram {
|
||
display: grid;
|
||
place-items: center;
|
||
margin: 22px 0 28px;
|
||
padding: 18px 20px;
|
||
overflow-x: auto;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background:
|
||
linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 7%, transparent), transparent 52%),
|
||
var(--c-bg-secondary);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.md-typeset .workflow-diagram .mermaid {
|
||
width: 100%;
|
||
margin: 0;
|
||
background: transparent;
|
||
}
|
||
/* Material's mermaid themeCSS forces label text to --md-mermaid-font-family.
|
||
Custom properties inherit into the closed shadow root Material renders the
|
||
SVG into, so overriding the variable here is the only way to restyle
|
||
diagram type. Deliberately the system stack, not the Inter webfont: Mermaid
|
||
measures labels at render time, and a late-loading webfont swaps in with
|
||
wider metrics and clips the last characters (e.g. "Conductor serve|r").
|
||
Must match fontFamily in main.py's MERMAID_WORKFLOW_INIT. */
|
||
.md-typeset .workflow-diagram {
|
||
--md-mermaid-font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
.md-typeset .workflow-diagram .mermaid svg {
|
||
display: block;
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
max-width: 1180px;
|
||
min-width: 520px;
|
||
margin: 0 auto;
|
||
}
|
||
@media screen and (max-width: 600px) {
|
||
.md-typeset .workflow-diagram { padding: 14px; }
|
||
.md-typeset .workflow-diagram .mermaid svg { min-width: 440px; }
|
||
}
|
||
/* Subgraph fill/border are set via clusterBkg and clusterBorder in
|
||
MERMAID_WORKFLOW_INIT (main.py), not here. */
|
||
|
||
/* ---------- Agent concepts decision guide ---------- */
|
||
.agent-concepts-hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
|
||
align-items: center;
|
||
gap: 26px;
|
||
margin: 22px 0 30px;
|
||
padding: 24px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
background:
|
||
linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 10%, transparent), transparent 48%),
|
||
linear-gradient(315deg, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 48%),
|
||
var(--c-bg-secondary);
|
||
}
|
||
.agent-concepts-hero__content > :last-child { margin-bottom: 0; }
|
||
.agent-concepts-hero__eyebrow,
|
||
.agent-concepts-path__eyebrow {
|
||
margin: 0 0 6px !important;
|
||
color: var(--c-blue);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.agent-concepts-hero h2 {
|
||
margin: 0 0 12px;
|
||
font-size: clamp(24px, 2.6vw, 34px);
|
||
line-height: 1.16;
|
||
}
|
||
.agent-concepts-hero__diagram {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
height: auto;
|
||
}
|
||
.agent-concepts-hero__lane {
|
||
fill: var(--c-text-muted);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.agent-concepts-hero__source { fill: var(--c-bg); stroke-width: 1.5; }
|
||
.agent-concepts-hero__source--workflow { stroke: var(--c-blue); }
|
||
.agent-concepts-hero__source--sdk { stroke: var(--c-accent); }
|
||
.agent-concepts-hero__source--a2a { stroke: #0f766e; }
|
||
.agent-concepts-hero__conductor {
|
||
fill: color-mix(in srgb, var(--c-blue) 11%, var(--c-bg));
|
||
stroke: var(--c-blue);
|
||
stroke-width: 2;
|
||
}
|
||
.agent-concepts-hero__outcome {
|
||
fill: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg));
|
||
stroke: var(--c-accent);
|
||
stroke-width: 1.5;
|
||
}
|
||
.agent-concepts-hero__title,
|
||
.agent-concepts-hero__conductor-title {
|
||
fill: var(--c-text);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
.agent-concepts-hero__conductor-title { fill: var(--c-blue); font-size: 18px; }
|
||
.agent-concepts-hero__detail,
|
||
.agent-concepts-hero__conductor-detail {
|
||
fill: var(--c-text-muted);
|
||
font-size: 10px;
|
||
}
|
||
.agent-concepts-hero__conductor-detail { font-size: 11px; }
|
||
.agent-concepts-hero__arrow,
|
||
.agent-concepts-hero__rule {
|
||
fill: none;
|
||
stroke: var(--c-text-muted);
|
||
stroke-width: 1.75;
|
||
}
|
||
.agent-concepts-hero__arrow--out,
|
||
.agent-concepts-hero__rule { stroke: var(--c-blue); }
|
||
.agent-concepts-hero__arrowhead { fill: var(--c-text-muted); }
|
||
.agent-concepts-paths,
|
||
.agent-concepts-next-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin: 16px 0 28px;
|
||
}
|
||
.agent-concepts-path,
|
||
.agent-concepts-next-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
padding: 17px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.agent-concepts-path h3 {
|
||
margin: 0 0 12px;
|
||
color: var(--c-text);
|
||
font-size: 17px;
|
||
}
|
||
.agent-concepts-path dl {
|
||
display: grid;
|
||
gap: 5px;
|
||
margin: 0 0 14px;
|
||
padding: 0;
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
}
|
||
.agent-concepts-path dt { color: var(--c-text); font-weight: 700; }
|
||
.agent-concepts-path dd {
|
||
margin: 0 0 7px;
|
||
margin-left: 0 !important;
|
||
margin-inline-start: 0;
|
||
padding-left: 0 !important;
|
||
padding-inline-start: 0;
|
||
color: var(--c-text-muted);
|
||
}
|
||
.agent-concepts-path a {
|
||
display: inline-block;
|
||
margin-top: auto;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.agent-concepts-next-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
color: var(--c-text-muted) !important;
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
text-decoration: none !important;
|
||
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||
}
|
||
.agent-concepts-next-step strong { color: var(--c-text); font-size: 15px; }
|
||
.agent-concepts-next-step:hover {
|
||
border-color: var(--c-blue);
|
||
box-shadow: var(--shadow-card);
|
||
color: var(--c-text-muted) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
.agent-concepts-next-step:focus-visible {
|
||
outline: 3px solid color-mix(in srgb, var(--c-blue) 40%, transparent);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
/* ---------- Agents & AI overview cards ---------- */
|
||
.agent-overview-grid {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin: 18px 0 28px;
|
||
}
|
||
.agent-overview-grid--three,
|
||
.agent-overview-grid--outcomes {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
.agent-overview-grid--principles {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.agent-overview-card {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
padding: 17px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
color: var(--c-text-muted) !important;
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.agent-overview-card > strong {
|
||
color: var(--c-text);
|
||
font-size: 15px;
|
||
line-height: 1.3;
|
||
}
|
||
.agent-overview-card--link {
|
||
text-decoration: none !important;
|
||
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||
}
|
||
.agent-overview-card--link:hover {
|
||
border-color: var(--c-blue);
|
||
box-shadow: var(--shadow-card);
|
||
color: var(--c-text-muted) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
.agent-overview-card--link:focus-visible {
|
||
outline: 3px solid color-mix(in srgb, var(--c-blue) 40%, transparent);
|
||
outline-offset: 3px;
|
||
}
|
||
.agent-overview-card__kicker,
|
||
.agent-overview-card__number {
|
||
color: var(--c-blue);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.07em;
|
||
text-transform: uppercase;
|
||
}
|
||
.agent-overview-card__links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 7px 14px;
|
||
margin-top: auto;
|
||
padding-top: 5px;
|
||
}
|
||
.agent-overview-card__links a {
|
||
font-weight: 700;
|
||
}
|
||
.integration-action-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
.integration-hero > .integration-action-grid:first-child {
|
||
margin-top: 0;
|
||
}
|
||
/* Home tab — OSS page design (Figma 6748:486). Palette sampled from the frame:
|
||
navy #1e2941, slate #475678, blue #1976d2, section bg #f8f9fa, card border #e8ebf0 */
|
||
.home-wrapper {
|
||
--home-navy: #1e2941;
|
||
--home-slate: #475678;
|
||
--home-blue: #1976d2;
|
||
--home-section-bg: #f8f9fa;
|
||
--home-card-bg: #ffffff;
|
||
--home-card-border: #e8ebf0;
|
||
--home-chip-bg: #e8f1fb;
|
||
}
|
||
[data-md-color-scheme="slate"] .home-wrapper {
|
||
--home-navy: #e6eaf2;
|
||
--home-slate: #a6b0c3;
|
||
--home-blue: #5ca3e6;
|
||
--home-section-bg: #1a2130;
|
||
--home-card-bg: #151b28;
|
||
--home-card-border: #2b3446;
|
||
--home-chip-bg: rgba(25, 118, 210, 0.18);
|
||
}
|
||
.home-wrapper .hero {
|
||
text-align: center;
|
||
padding: 56px 0 48px;
|
||
}
|
||
.home-wrapper .hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 16px;
|
||
border: 1px solid var(--home-card-border);
|
||
border-radius: 999px;
|
||
background: var(--home-card-bg);
|
||
color: var(--home-navy);
|
||
font-size: 0.82rem;
|
||
}
|
||
.home-wrapper .hero-badge::before {
|
||
content: "";
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--home-blue);
|
||
}
|
||
.home-wrapper .hero-title {
|
||
color: var(--home-navy);
|
||
font-size: 3rem;
|
||
line-height: 1.12;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
margin: 20px 0 18px;
|
||
}
|
||
.home-wrapper .hero-subtitle {
|
||
color: var(--home-slate);
|
||
max-width: 720px;
|
||
margin: 0 auto 14px;
|
||
font-size: 1.02rem;
|
||
line-height: 1.6;
|
||
}
|
||
.home-wrapper .hero-subtitle strong { color: var(--home-navy); }
|
||
.home-wrapper .hero-subtitle + .hero-subtitle { margin-top: 22px; }
|
||
.home-wrapper .hero-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
}
|
||
.home-wrapper .btn-primary {
|
||
background: var(--home-blue);
|
||
color: #fff !important;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.home-wrapper .btn-primary:hover { background: #1565c0; }
|
||
.home-wrapper .repo-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 18px;
|
||
border: 1px solid var(--home-card-border);
|
||
border-radius: 8px;
|
||
background: var(--home-card-bg);
|
||
color: var(--home-navy) !important;
|
||
font-weight: 600;
|
||
}
|
||
.home-wrapper .home-skills-line {
|
||
text-align: center;
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
color: var(--home-slate);
|
||
}
|
||
.home-skills-line a { color: var(--home-blue); font-weight: 600; }
|
||
.home-section {
|
||
margin: 0 0 8px;
|
||
padding: 48px 32px;
|
||
}
|
||
.home-section--alt {
|
||
background: var(--home-section-bg);
|
||
border-radius: 16px;
|
||
}
|
||
.home-section .section-header-inline {
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.home-section .section-header-inline h2 {
|
||
color: var(--home-navy);
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
margin: 0;
|
||
}
|
||
.home-section-sub {
|
||
text-align: center;
|
||
color: var(--home-slate);
|
||
max-width: 640px;
|
||
margin: 10px auto 26px;
|
||
}
|
||
.home-sdk-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
.home-sdk-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 18px;
|
||
border: 1px solid var(--home-card-border);
|
||
border-radius: 12px;
|
||
background: var(--home-card-bg);
|
||
box-shadow: 0 1px 2px rgba(30, 41, 65, 0.05);
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
.home-sdk-card:hover { border-color: var(--home-blue); }
|
||
.home-sdk-card img {
|
||
width: 28px;
|
||
height: 28px;
|
||
object-fit: contain;
|
||
flex: 0 0 auto;
|
||
}
|
||
.home-sdk-card__meta { display: flex; flex-direction: column; min-width: 0; }
|
||
.home-sdk-card__meta strong { font-size: 0.95rem; color: var(--home-navy); }
|
||
.home-sdk-card__meta span {
|
||
font-size: 0.78rem;
|
||
color: var(--home-slate);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.home-sdk-card__arrow { margin-left: auto; color: var(--home-blue); }
|
||
/* Card look scoped to Home so other pages keep their own style */
|
||
.home-wrapper .integration-action-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 22px;
|
||
background: var(--home-card-bg);
|
||
border: 1px solid var(--home-card-border);
|
||
border-radius: 12px;
|
||
box-shadow: 0 1px 2px rgba(30, 41, 65, 0.05);
|
||
color: var(--home-slate);
|
||
text-decoration: none;
|
||
}
|
||
.home-wrapper .integration-action-card:hover { border-color: var(--home-blue); }
|
||
.home-wrapper .integration-action-card__title {
|
||
color: var(--home-navy);
|
||
font-weight: 700;
|
||
font-size: 1.02rem;
|
||
}
|
||
.home-card-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: var(--home-chip-bg);
|
||
color: var(--home-blue);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.home-card-cta {
|
||
margin-top: auto;
|
||
padding-top: 12px;
|
||
color: var(--home-blue);
|
||
font-weight: 600;
|
||
font-size: 0.88rem;
|
||
}
|
||
.home-wrapper .faq-section .section-header-inline h2 { color: var(--home-navy); }
|
||
@media (max-width: 900px) {
|
||
.home-sdk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.home-wrapper .hero-title { font-size: 2.2rem; }
|
||
.home-section { padding: 36px 18px; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.home-sdk-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.integration-action-grid--three {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
.integration-action-grid--four {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
.integration-action-card {
|
||
display: flex;
|
||
min-height: 102px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 16px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg);
|
||
color: var(--c-text-muted) !important;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
text-decoration: none !important;
|
||
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
||
}
|
||
.integration-action-card:hover {
|
||
border-color: var(--integration-accent);
|
||
box-shadow: var(--shadow-card);
|
||
color: var(--c-text-muted) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
.integration-action-card:focus-visible {
|
||
outline: 3px solid var(--integration-accent);
|
||
outline-offset: 3px;
|
||
}
|
||
.integration-action-card__title {
|
||
color: var(--c-text);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
.agent-framework-strip {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 18px;
|
||
}
|
||
.agent-framework-strip__item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 6px 9px;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 999px;
|
||
background: var(--c-bg);
|
||
color: var(--c-text);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
.agent-framework-strip__item img {
|
||
width: 16px;
|
||
height: 16px;
|
||
object-fit: contain;
|
||
}
|
||
[data-md-color-scheme="slate"] .integration-hero__logo,
|
||
[data-md-color-scheme="slate"] .agent-framework-strip__item img {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
@media screen and (max-width: 44.9375em) {
|
||
.framework-logo-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.integration-action-grid,
|
||
.integration-action-grid--three,
|
||
.integration-action-grid--four,
|
||
.cookbook-grid,
|
||
.agent-concepts-paths,
|
||
.agent-concepts-next-steps,
|
||
.agent-overview-grid--three,
|
||
.agent-overview-grid--principles,
|
||
.agent-overview-grid--outcomes {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.agent-concepts-callout,
|
||
.framework-hero,
|
||
.integration-hero,
|
||
.concept-hero,
|
||
.agent-concepts-hero,
|
||
.agent-runtime-hero {
|
||
padding: 20px;
|
||
}
|
||
.agent-runtime-hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
.ai-cookbook-hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
.agent-concepts-hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
.concept-hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
/* Code */
|
||
.md-typeset code {
|
||
font-family: var(--font-mono) !important;
|
||
background: var(--c-bg-secondary);
|
||
color: var(--c-text);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-sm);
|
||
padding: 0.08em 0.25em;
|
||
}
|
||
.md-typeset pre {
|
||
border-radius: var(--r-sm) !important;
|
||
border: 1px solid var(--c-border-dim);
|
||
box-shadow: none;
|
||
margin-top: 0.4rem !important;
|
||
margin-bottom: 0.65rem !important;
|
||
}
|
||
.md-typeset pre > code {
|
||
font-size: 14px !important;
|
||
line-height: 1.5 !important;
|
||
background: var(--c-bg-secondary) !important;
|
||
color: var(--c-text-muted) !important;
|
||
padding: 12px 16px !important;
|
||
border-radius: var(--r-sm) !important;
|
||
border: none;
|
||
letter-spacing: 0 !important;
|
||
}
|
||
/* Syntax highlighting colors are scoped to [data-md-color-scheme="slate"] at bottom of file.
|
||
Light mode uses Material's default syntax theme. */
|
||
|
||
/* Tables */
|
||
.md-typeset table:not([class]) {
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-sm);
|
||
overflow: hidden;
|
||
box-shadow: none;
|
||
font-size: 14px;
|
||
margin-top: 8px !important;
|
||
margin-bottom: 12px !important;
|
||
}
|
||
.md-typeset table:not([class]) th {
|
||
background: var(--c-bg-secondary);
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--c-text-muted);
|
||
border-bottom: 1px solid var(--c-border-dim);
|
||
padding: 8px 12px;
|
||
}
|
||
.md-typeset table:not([class]) td {
|
||
border-color: var(--c-border-dim);
|
||
padding: 7px 12px;
|
||
}
|
||
.md-typeset table:not([class]) code {
|
||
white-space: nowrap;
|
||
overflow-wrap: normal;
|
||
word-break: keep-all;
|
||
}
|
||
.md-typeset table:not([class]) tbody tr:hover {
|
||
background: rgba(255,255,255,0.03);
|
||
}
|
||
|
||
/* Keep a short identifier in the first column on one line so it does not break
|
||
mid-word when the second column holds a long description.
|
||
Opt in with `## Heading { .wide-first-col }` on the heading above the table.
|
||
`.schema-table-heading` is the original, narrower opt-in and behaves the same.
|
||
|
||
Both `+ table` and `+ * table` are needed: the built HTML has the table as a
|
||
direct sibling of the heading, but Material's JS then wraps it in
|
||
div.md-typeset__scrollwrap, so a `+ table` selector alone matches the static
|
||
page and silently stops matching in the browser. */
|
||
.md-typeset h2.schema-table-heading + table,
|
||
.md-typeset h2.schema-table-heading + * table,
|
||
.md-typeset h2.wide-first-col + table,
|
||
.md-typeset h3.wide-first-col + table,
|
||
.md-typeset h2.wide-first-col + * table,
|
||
.md-typeset h3.wide-first-col + * table {
|
||
table-layout: auto;
|
||
width: 100%;
|
||
}
|
||
.md-typeset h2.schema-table-heading + table th:first-child,
|
||
.md-typeset h2.schema-table-heading + table td:first-child,
|
||
.md-typeset h2.schema-table-heading + * table th:first-child,
|
||
.md-typeset h2.schema-table-heading + * table td:first-child,
|
||
.md-typeset h2.wide-first-col + table th:first-child,
|
||
.md-typeset h2.wide-first-col + table td:first-child,
|
||
.md-typeset h3.wide-first-col + table th:first-child,
|
||
.md-typeset h3.wide-first-col + table td:first-child,
|
||
.md-typeset h2.wide-first-col + * table th:first-child,
|
||
.md-typeset h2.wide-first-col + * table td:first-child,
|
||
.md-typeset h3.wide-first-col + * table th:first-child,
|
||
.md-typeset h3.wide-first-col + * table td:first-child {
|
||
min-width: 15rem;
|
||
white-space: nowrap;
|
||
}
|
||
.md-typeset h2.schema-table-heading + table td:first-child a,
|
||
.md-typeset h2.schema-table-heading + table td:first-child a code,
|
||
.md-typeset h2.schema-table-heading + * table td:first-child a,
|
||
.md-typeset h2.schema-table-heading + * table td:first-child a code,
|
||
.md-typeset h2.wide-first-col + table td:first-child a,
|
||
.md-typeset h3.wide-first-col + table td:first-child a,
|
||
.md-typeset h2.wide-first-col + * table td:first-child a,
|
||
.md-typeset h3.wide-first-col + * table td:first-child a {
|
||
display: inline-block;
|
||
overflow-wrap: normal !important;
|
||
white-space: nowrap !important;
|
||
word-break: normal !important;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.md-sidebar {
|
||
background: var(--c-bg) !important;
|
||
}
|
||
.md-nav__link {
|
||
font-size: 13px;
|
||
font-family: var(--font-body) !important;
|
||
padding: 5px 9px;
|
||
line-height: 1.4;
|
||
color: var(--c-text-dim) !important;
|
||
}
|
||
.md-nav__link--active {
|
||
color: var(--c-text) !important;
|
||
font-weight: 600;
|
||
}
|
||
.md-nav__item--active > .md-nav__link,
|
||
.md-nav__item--active > .md-nav__link:is([for]),
|
||
.md-nav__item--nested > .md-nav__link,
|
||
label.md-nav__link[for] {
|
||
background: transparent !important;
|
||
color: var(--c-text-muted) !important;
|
||
}
|
||
.md-nav__link--active {
|
||
background: var(--c-bg-secondary) !important;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
.md-nav__item--section > .md-nav__link {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--c-text-dim) !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* Material only marks nav groups as --section inside the *active* tab's
|
||
subtree. Pages linked by absolute URL (quickstart/first-agent.html?nav=...)
|
||
match no nav entry, so no tab is active and every group falls back to a
|
||
collapsible toggle — a chevron and an indent that appear on no other page.
|
||
navigation.expand keeps these groups open anyway, so render nested groups
|
||
the same way as sections and drop the decorative toggle. */
|
||
.md-sidebar--primary .md-nav__item--nested > .md-nav__link,
|
||
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--c-text-dim) !important;
|
||
cursor: default;
|
||
}
|
||
.md-sidebar--primary .md-nav__item--nested > .md-nav__link .md-nav__icon {
|
||
display: none !important;
|
||
}
|
||
.md-sidebar--primary .md-nav__item--nested > .md-nav,
|
||
.md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list {
|
||
margin-left: 0 !important;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
/* Material pins the section container (.md-nav__container) to the top of the
|
||
nav while its children scroll past. The rule above makes section links
|
||
transparent, which let those children render straight through the pinned
|
||
label. Restore an opaque background on the sticky element only. */
|
||
.md-nav__item--section > .md-nav__link.md-nav__container,
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link.md-nav__container {
|
||
background: var(--c-bg) !important;
|
||
}
|
||
label.md-nav__link {
|
||
font-size: 13px;
|
||
background: transparent !important;
|
||
}
|
||
.md-nav__title,
|
||
.md-nav__title[for],
|
||
.md-nav--primary .md-nav__title,
|
||
.md-nav--primary .md-nav__title[for],
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
|
||
.md-nav--lifted .md-nav__title,
|
||
.md-nav--lifted .md-nav[data-md-level="1"] > .md-nav__title,
|
||
[data-md-level] > .md-nav__title {
|
||
/* These titles are position:sticky in Material. A transparent background lets
|
||
nav items scroll *through* the label, so the background must stay opaque. */
|
||
background: var(--c-bg) !important;
|
||
box-shadow: none !important;
|
||
color: var(--c-text-dim) !important;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding-left: 10px !important;
|
||
}
|
||
.md-nav__item .md-nav,
|
||
.md-nav--lifted .md-nav,
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav,
|
||
.md-nav[data-md-level="1"],
|
||
.md-nav[data-md-level="2"] {
|
||
background: transparent !important;
|
||
}
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link--index,
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link {
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link.md-nav__container,
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--nested > .md-nav__link.md-nav__container,
|
||
.md-nav .md-nav__item--section > div.md-nav__link.md-nav__container {
|
||
padding: 0 !important;
|
||
}
|
||
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link--index {
|
||
padding-left: 8px !important;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--c-text-dim) !important;
|
||
}
|
||
|
||
/* Search */
|
||
.md-search__form {
|
||
border-radius: var(--r-md) !important;
|
||
background: var(--c-bg-secondary) !important;
|
||
border: 1px solid var(--c-border) !important;
|
||
}
|
||
.md-search__input {
|
||
font-family: var(--font-body) !important;
|
||
color: var(--c-text) !important;
|
||
}
|
||
.md-search__input::placeholder {
|
||
color: var(--c-text-dim) !important;
|
||
}
|
||
.md-search__icon {
|
||
color: var(--c-text-dim) !important;
|
||
}
|
||
|
||
/* Admonitions */
|
||
.md-typeset .admonition,
|
||
.md-typeset details {
|
||
border-radius: var(--r-sm) !important;
|
||
border-left: 3px solid;
|
||
box-shadow: none;
|
||
margin-top: 10px !important;
|
||
margin-bottom: 12px !important;
|
||
font-size: 14px !important;
|
||
background: var(--c-bg-secondary);
|
||
}
|
||
.md-typeset .admonition .admonition-title,
|
||
.md-typeset details summary {
|
||
font-size: 14px !important;
|
||
padding: 8px 12px 8px 44px !important;
|
||
}
|
||
.md-typeset .admonition p,
|
||
.md-typeset details p {
|
||
font-size: 14px !important;
|
||
margin-bottom: 8px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
/* Footer */
|
||
.md-footer {
|
||
background: var(--c-bg) !important;
|
||
border-top: 1px solid var(--c-border-dim);
|
||
}
|
||
.md-footer-meta {
|
||
background: var(--c-bg) !important;
|
||
}
|
||
.md-footer-nav__link {
|
||
color: var(--c-text) !important;
|
||
}
|
||
.md-footer-nav__title {
|
||
color: var(--c-text) !important;
|
||
}
|
||
.md-footer-nav__direction {
|
||
color: var(--c-text-muted) !important;
|
||
}
|
||
.md-copyright {
|
||
color: var(--c-text-dim) !important;
|
||
}
|
||
.md-copyright a {
|
||
color: var(--c-text-muted) !important;
|
||
}
|
||
.md-social__link svg {
|
||
fill: var(--c-text-muted) !important;
|
||
}
|
||
.md-social__link:hover svg {
|
||
fill: var(--c-accent) !important;
|
||
}
|
||
.md-footer-nav__link:hover .md-footer-nav__title {
|
||
color: var(--c-accent) !important;
|
||
}
|
||
|
||
/* Main content area */
|
||
.md-main {
|
||
background: var(--c-bg) !important;
|
||
}
|
||
.md-content {
|
||
background: var(--c-bg) !important;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
HOME PAGE — full custom layout
|
||
========================================================================== */
|
||
|
||
.home-wrapper {
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: -1.2rem;
|
||
}
|
||
|
||
.md-content article:has(> .home-wrapper) > h1 { display: none; }
|
||
|
||
.md-content:has(.home-wrapper) .md-content__inner {
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
max-width: none;
|
||
}
|
||
.md-content:has(.home-wrapper) article {
|
||
padding-top: 0;
|
||
}
|
||
.md-main:has(.home-wrapper) .md-main__inner {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* ---------- Section Header Inline (pill + headline on same line) ---------- */
|
||
.section-header-inline {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.section-header-inline .section-label {
|
||
position: relative;
|
||
top: -0.1em;
|
||
}
|
||
.home-wrapper .section-header-inline h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 48px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
color: var(--c-text) !important;
|
||
letter-spacing: -0.02em;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* ---------- Section Label ---------- */
|
||
.section-label {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--c-accent);
|
||
background: rgba(249, 115, 22, 0.1);
|
||
border: 1px solid rgba(249, 115, 22, 0.2);
|
||
padding: 4px 14px;
|
||
border-radius: 100px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero {
|
||
padding: 32px 0 40px;
|
||
position: relative;
|
||
text-align: center;
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
}
|
||
.hero-badge {
|
||
display: inline-block;
|
||
font-family: var(--font-body);
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
letter-spacing: normal;
|
||
color: var(--c-text-muted);
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
margin-bottom: 24px;
|
||
}
|
||
.home-wrapper .hero-title {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 64px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.1 !important;
|
||
letter-spacing: -0.03em;
|
||
margin: 0 0 24px !important;
|
||
padding: 0;
|
||
text-align: center;
|
||
color: var(--c-text) !important;
|
||
}
|
||
.hero-highlight {
|
||
color: var(--c-accent) !important;
|
||
}
|
||
.hero-subtitle {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
line-height: 1.6;
|
||
color: var(--c-text-muted);
|
||
margin: 0 auto 16px;
|
||
max-width: 640px;
|
||
text-align: center;
|
||
}
|
||
.hero-differentiators {
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
color: var(--c-text-dim);
|
||
margin: 0 auto 28px;
|
||
text-align: center;
|
||
}
|
||
.hero-install {
|
||
margin: 20px auto 0;
|
||
text-align: center;
|
||
}
|
||
.hero-install code {
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
color: var(--c-text-muted);
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-md);
|
||
padding: 10px 20px;
|
||
display: inline-block;
|
||
user-select: all;
|
||
cursor: text;
|
||
}
|
||
|
||
/* Buttons */
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 10px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.hero > .home-journey-grid {
|
||
max-width: 700px;
|
||
margin: 20px auto 0;
|
||
text-align: left;
|
||
}
|
||
.btn-primary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 28px;
|
||
font-family: var(--font-body);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #fff !important;
|
||
background: var(--c-accent);
|
||
border-radius: var(--r-md);
|
||
text-decoration: none !important;
|
||
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--c-accent-hover);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
|
||
}
|
||
.btn-arrow {
|
||
transition: transform 0.2s;
|
||
}
|
||
.btn-primary:hover .btn-arrow {
|
||
transform: translateX(3px);
|
||
}
|
||
.btn-ghost {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 14px 28px;
|
||
font-family: var(--font-body);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--c-text-muted) !important;
|
||
background: transparent;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
text-decoration: none !important;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-ghost:hover {
|
||
color: var(--c-text) !important;
|
||
border-color: var(--c-text-dim);
|
||
background: var(--c-bg-secondary);
|
||
}
|
||
|
||
/* Repo link */
|
||
a.repo-link,
|
||
a.repo-link:hover,
|
||
a.repo-link:focus,
|
||
.md-typeset a.repo-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 14px 20px;
|
||
border-radius: var(--r-md) !important;
|
||
border: 1px solid var(--c-border) !important;
|
||
background: var(--c-bg-secondary) !important;
|
||
color: var(--c-text-muted) !important;
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 14px !important;
|
||
font-weight: 500 !important;
|
||
text-decoration: none !important;
|
||
box-shadow: none !important;
|
||
transition: all 0.2s ease;
|
||
}
|
||
a.repo-link:hover {
|
||
border-color: var(--c-accent) !important;
|
||
box-shadow: var(--shadow-elevated), 0 0 20px rgba(249, 115, 22, 0.15) !important;
|
||
transform: translateY(-2px);
|
||
color: var(--c-text) !important;
|
||
}
|
||
a.repo-link svg {
|
||
flex-shrink: 0;
|
||
color: var(--c-text-muted) !important;
|
||
}
|
||
.repo-stats {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-left: 6px;
|
||
padding-left: 10px;
|
||
border-left: 1px solid var(--c-border);
|
||
}
|
||
.repo-stat {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--c-text-muted);
|
||
}
|
||
.repo-stat svg {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* ---------- Hero Quickstart ---------- */
|
||
.hero-quickstart {
|
||
margin-top: 32px;
|
||
}
|
||
.hero-code-block {
|
||
display: inline-block;
|
||
text-align: left;
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
padding: 16px 24px;
|
||
max-width: 480px;
|
||
width: 100%;
|
||
}
|
||
.hero-code-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--c-text-dim);
|
||
margin-bottom: 10px;
|
||
}
|
||
code.hero-terminal {
|
||
display: block;
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 14px !important;
|
||
line-height: 1.6 !important;
|
||
color: var(--c-text-muted) !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
letter-spacing: 0;
|
||
}
|
||
.hero-highlight-code {
|
||
color: var(--c-accent) !important;
|
||
}
|
||
.install-comment {
|
||
color: var(--c-text-dim);
|
||
}
|
||
.hero-quickstart-alt {
|
||
margin-top: 10px;
|
||
font-family: var(--font-body);
|
||
font-size: 13px;
|
||
color: var(--c-text-dim);
|
||
}
|
||
.hero-quickstart-alt code {
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 12px !important;
|
||
background: var(--c-bg-secondary) !important;
|
||
border: 1px solid var(--c-border-dim) !important;
|
||
border-radius: var(--r-sm);
|
||
padding: 2px 6px !important;
|
||
color: var(--c-text-muted) !important;
|
||
}
|
||
|
||
/* ---------- Hero Conductor Skills install card ---------- */
|
||
.hero > .hero-skills-card {
|
||
margin-top: 32px;
|
||
width: min(840px, calc(100vw - 64px));
|
||
max-width: none;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.hero-skills-card {
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-lg);
|
||
padding: 16px 24px;
|
||
text-align: center;
|
||
}
|
||
.hero-skills-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.hero-skills-icon {
|
||
color: var(--c-accent);
|
||
flex-shrink: 0;
|
||
line-height: 0;
|
||
}
|
||
.hero-skills-card h3 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 16px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--c-text) !important;
|
||
margin: 0 !important;
|
||
}
|
||
.hero-skills-description {
|
||
max-width: 540px;
|
||
margin: 0 auto 14px !important;
|
||
color: var(--c-text-muted);
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
}
|
||
.hero-skills-card .highlight {
|
||
margin: 0 0 14px;
|
||
text-align: left;
|
||
}
|
||
.hero-skills-card .highlight pre {
|
||
margin: 0;
|
||
}
|
||
.hero-skills-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
.hero-skills-link {
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--c-accent);
|
||
text-decoration: none;
|
||
}
|
||
.hero-skills-link:hover {
|
||
color: var(--c-accent-hover);
|
||
}
|
||
@media (max-width: 700px) {
|
||
.hero > .hero-skills-card {
|
||
width: calc(100vw - 32px);
|
||
}
|
||
.hero-skills-card {
|
||
padding: 16px;
|
||
}
|
||
.hero-skills-actions {
|
||
align-items: center;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
/* ---------- Value Strip ---------- */
|
||
.value-strip {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 0;
|
||
padding: 20px 0;
|
||
border-top: 1px solid var(--c-border-dim);
|
||
border-bottom: 1px solid var(--c-border-dim);
|
||
}
|
||
.value-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 40px;
|
||
}
|
||
.value-metric {
|
||
font-family: var(--font-body);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
}
|
||
.value-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--c-text-dim);
|
||
margin-top: 4px;
|
||
}
|
||
.value-divider {
|
||
width: 1px;
|
||
height: 40px;
|
||
background: var(--c-border-dim);
|
||
}
|
||
@media (max-width: 900px) {
|
||
.value-strip { flex-wrap: wrap; gap: 24px; }
|
||
.value-divider { display: none; }
|
||
}
|
||
.hero-logos {
|
||
padding-top: 32px;
|
||
}
|
||
|
||
/* ---------- Logo Wall ---------- */
|
||
.logo-wall {
|
||
padding: 48px 0 24px;
|
||
text-align: center;
|
||
}
|
||
.logo-wall-label {
|
||
font-family: var(--font-body);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--c-text-dim);
|
||
margin: 0 0 16px;
|
||
}
|
||
.logo-marquee {
|
||
overflow: hidden;
|
||
position: relative;
|
||
width: 100%;
|
||
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
|
||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
|
||
}
|
||
.logo-track {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
width: max-content;
|
||
animation: marquee-scroll 30s linear infinite;
|
||
}
|
||
.logo-track:hover {
|
||
animation-play-state: paused;
|
||
}
|
||
@keyframes marquee-scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.logo-name {
|
||
font-family: var(--font-body);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--c-text-muted);
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
opacity: 0.35;
|
||
transition: opacity 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
.logo-name:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ---------- Features ---------- */
|
||
.features-section {
|
||
padding: 32px 0 28px;
|
||
}
|
||
.features-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
.home-wrapper .features-header h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 48px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
color: var(--c-text) !important;
|
||
letter-spacing: -0.02em;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.feature-card {
|
||
padding: 20px;
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-lg);
|
||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||
position: relative;
|
||
}
|
||
.feature-card:hover {
|
||
border-color: var(--c-border);
|
||
box-shadow: var(--shadow-card);
|
||
transform: translateY(-2px);
|
||
}
|
||
.feature-card.feature-accent {
|
||
border-color: var(--c-accent);
|
||
background: linear-gradient(135deg, rgba(249,115,22,0.06) 0%, var(--c-bg-secondary) 100%);
|
||
}
|
||
.feature-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--c-text-dim);
|
||
margin-bottom: 14px;
|
||
}
|
||
.home-wrapper .feature-card h3 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 20px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--c-text) !important;
|
||
margin: 0 0 10px !important;
|
||
line-height: 1.4;
|
||
}
|
||
.feature-card p {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--c-text-muted);
|
||
margin: 0;
|
||
}
|
||
.feature-link {
|
||
display: inline-block;
|
||
margin-top: 14px;
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--c-accent) !important;
|
||
text-decoration: none !important;
|
||
transition: color 0.15s;
|
||
}
|
||
.feature-link:hover {
|
||
color: var(--c-accent-hover) !important;
|
||
}
|
||
|
||
/* ---------- Language Logos ---------- */
|
||
.lang-logos {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.lang-logos a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-bg-tertiary);
|
||
border: 1px solid var(--c-border-dim);
|
||
padding: 5px;
|
||
transition: all 0.2s;
|
||
text-decoration: none !important;
|
||
}
|
||
.lang-logos a:hover {
|
||
border-color: var(--c-accent);
|
||
background: rgba(249, 115, 22, 0.1);
|
||
transform: translateY(-1px);
|
||
}
|
||
.lang-logos img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
filter: brightness(0.9) contrast(1.1);
|
||
}
|
||
|
||
/* ---------- Quickstart ---------- */
|
||
.quickstart-preview {
|
||
padding: 32px 0;
|
||
background: var(--c-bg-secondary);
|
||
margin: 0 -1000px;
|
||
padding-left: 1000px;
|
||
padding-right: 1000px;
|
||
border-top: 1px solid var(--c-border-dim);
|
||
border-bottom: 1px solid var(--c-border-dim);
|
||
}
|
||
.qs-header {
|
||
margin-bottom: 16px;
|
||
}
|
||
.home-wrapper .qs-header h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 40px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
color: var(--c-text) !important;
|
||
letter-spacing: -0.02em;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 0 8px !important;
|
||
}
|
||
.qs-header p {
|
||
color: var(--c-text-muted);
|
||
font-size: 18px;
|
||
margin: 0;
|
||
}
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.step {
|
||
background: var(--c-bg);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-lg);
|
||
overflow: hidden;
|
||
}
|
||
.step-marker {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 18px 22px 0;
|
||
}
|
||
.step-number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
background: var(--c-bg-secondary);
|
||
color: var(--c-accent);
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
border: 1px solid var(--c-border-dim);
|
||
}
|
||
.step-label {
|
||
font-family: var(--font-body);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
}
|
||
.step-content {
|
||
padding: 0 22px;
|
||
}
|
||
.step-content pre {
|
||
margin: 12px -22px 0 !important;
|
||
border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
|
||
border: none !important;
|
||
border-top: 1px solid var(--c-border-dim) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.step-content pre > code {
|
||
padding: 12px 16px !important;
|
||
}
|
||
.qs-terminal {
|
||
max-width: 640px;
|
||
border-radius: var(--r-lg);
|
||
overflow: hidden;
|
||
background: var(--c-bg);
|
||
box-shadow: var(--shadow-card);
|
||
border: 1px solid var(--c-border-dim);
|
||
}
|
||
.qs-cta {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
}
|
||
.steps-cta {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* ---------- Architecture cards ---------- */
|
||
.arch-section {
|
||
padding: 32px 0;
|
||
}
|
||
.arch-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
.home-wrapper .arch-header h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 40px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
color: var(--c-text) !important;
|
||
letter-spacing: -0.02em;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
.arch-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.arch-card {
|
||
display: block;
|
||
padding: 20px 18px;
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-lg);
|
||
text-decoration: none !important;
|
||
color: var(--c-text) !important;
|
||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.arch-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--c-accent);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.arch-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
.arch-card:hover {
|
||
border-color: var(--c-border);
|
||
box-shadow: var(--shadow-card);
|
||
transform: translateY(-2px);
|
||
}
|
||
.arch-number {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--c-accent);
|
||
letter-spacing: 0.02em;
|
||
margin-bottom: 14px;
|
||
}
|
||
.home-wrapper .arch-card h3 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 18px !important;
|
||
font-weight: 600 !important;
|
||
margin: 0 0 8px !important;
|
||
color: var(--c-text) !important;
|
||
}
|
||
.arch-card p {
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
color: var(--c-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---------- Install ---------- */
|
||
.install-section {
|
||
padding: 32px 0;
|
||
}
|
||
.install-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.install-option {
|
||
background: var(--c-bg-secondary);
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-lg);
|
||
padding: 20px 18px;
|
||
}
|
||
.home-wrapper .install-option h3 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 18px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--c-text) !important;
|
||
padding: 0;
|
||
margin: 0 0 4px !important;
|
||
}
|
||
.install-cmd {
|
||
margin-top: 8px;
|
||
}
|
||
.install-cmd code {
|
||
display: block;
|
||
font-family: var(--font-mono) !important;
|
||
background: transparent !important;
|
||
color: var(--c-text-muted) !important;
|
||
border: none !important;
|
||
border-radius: var(--r-sm);
|
||
padding: 0.5rem 0.75rem !important;
|
||
white-space: pre-wrap;
|
||
overflow-x: auto;
|
||
}
|
||
.install-comment {
|
||
color: var(--c-text-dim);
|
||
}
|
||
.install-rec {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--c-accent);
|
||
background: rgba(249, 115, 22, 0.1);
|
||
padding: 2px 8px;
|
||
border-radius: 100px;
|
||
margin-left: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* ---------- FAQ ---------- */
|
||
.faq-section {
|
||
padding: 32px 0;
|
||
}
|
||
.faq-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0 40px;
|
||
}
|
||
.faq-item.faq-item {
|
||
background: none !important;
|
||
border: none !important;
|
||
border-bottom: 1px solid var(--c-border-dim) !important;
|
||
border-radius: 0 !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
box-shadow: none !important;
|
||
font-size: inherit !important;
|
||
}
|
||
.faq-item.faq-item[open] {
|
||
border-bottom-color: var(--c-accent) !important;
|
||
}
|
||
.faq-item.faq-item > summary {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 15px !important;
|
||
font-weight: 500 !important;
|
||
color: var(--c-text) !important;
|
||
padding: 14px 0 !important;
|
||
margin: 0 !important;
|
||
min-height: 0 !important;
|
||
cursor: pointer;
|
||
list-style: none !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
background: none !important;
|
||
border: none !important;
|
||
}
|
||
.faq-item.faq-item > summary:hover {
|
||
color: var(--c-accent) !important;
|
||
}
|
||
.faq-item.faq-item > summary::-webkit-details-marker {
|
||
display: none !important;
|
||
}
|
||
.faq-item.faq-item > summary::before {
|
||
display: none !important;
|
||
}
|
||
.faq-item.faq-item > summary::after {
|
||
content: "+" !important;
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 14px !important;
|
||
font-weight: 400 !important;
|
||
color: var(--c-text-dim) !important;
|
||
flex-shrink: 0;
|
||
position: static !important;
|
||
transform: none !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
background: none !important;
|
||
mask: none !important;
|
||
-webkit-mask: none !important;
|
||
}
|
||
.faq-item.faq-item[open] > summary::after {
|
||
content: "\2212" !important;
|
||
color: var(--c-accent) !important;
|
||
transform: none !important;
|
||
}
|
||
.faq-item.faq-item > p {
|
||
font-size: 14px !important;
|
||
line-height: 1.6 !important;
|
||
color: var(--c-text-muted) !important;
|
||
padding: 0 0 14px !important;
|
||
margin: 0 !important;
|
||
}
|
||
.faq-item.faq-item > p a {
|
||
color: var(--c-accent) !important;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.faq-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ---------- CTA ---------- */
|
||
.cta-section {
|
||
padding: 36px 0 32px;
|
||
text-align: center;
|
||
}
|
||
.cta-content {
|
||
max-width: 520px;
|
||
margin: 0 auto;
|
||
}
|
||
.home-wrapper .cta-content h2 {
|
||
font-family: var(--font-body) !important;
|
||
font-size: 36px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
letter-spacing: -0.02em;
|
||
color: var(--c-text) !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 0 16px !important;
|
||
}
|
||
.cta-content p {
|
||
font-size: 18px;
|
||
line-height: 1.6;
|
||
color: var(--c-text-muted);
|
||
margin-bottom: 24px;
|
||
}
|
||
.cta-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ---------- Responsive ---------- */
|
||
@media (max-width: 1100px) {
|
||
.arch-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 900px) {
|
||
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.steps-grid { grid-template-columns: 1fr; }
|
||
.install-options { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.hero { padding: 48px 0 24px; }
|
||
.home-wrapper .hero-title { font-size: 36px !important; }
|
||
.hero-subtitle { font-size: 16px; }
|
||
.hero-actions { flex-direction: column; align-items: center; }
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.arch-grid { grid-template-columns: 1fr; }
|
||
.home-wrapper .section-header-inline h2,
|
||
.home-wrapper .features-header h2,
|
||
.home-wrapper .qs-header h2,
|
||
.home-wrapper .arch-header h2,
|
||
.home-wrapper .cta-content h2 { font-size: 28px !important; }
|
||
}
|
||
|
||
/* ---------- Entrance Animations ---------- */
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes slideInRight {
|
||
from { opacity: 0; transform: translateX(30px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
.hero-badge {
|
||
animation: fadeIn 0.5s ease-out both;
|
||
}
|
||
.hero-title {
|
||
animation: fadeUp 0.6s ease-out 0.1s both;
|
||
}
|
||
.hero-subtitle {
|
||
animation: fadeUp 0.5s ease-out 0.2s both;
|
||
}
|
||
.hero-actions {
|
||
animation: fadeUp 0.5s ease-out 0.3s both;
|
||
}
|
||
.hero-quickstart {
|
||
animation: fadeUp 0.5s ease-out 0.4s both;
|
||
}
|
||
.feature-card {
|
||
animation: fadeUp 0.5s ease-out both;
|
||
}
|
||
.feature-card:nth-child(1) { animation-delay: 0.1s; }
|
||
.feature-card:nth-child(2) { animation-delay: 0.15s; }
|
||
.feature-card:nth-child(3) { animation-delay: 0.2s; }
|
||
.feature-card:nth-child(4) { animation-delay: 0.25s; }
|
||
.feature-card:nth-child(5) { animation-delay: 0.3s; }
|
||
.feature-card:nth-child(6) { animation-delay: 0.35s; }
|
||
.section-label {
|
||
animation: fadeUp 0.5s ease-out both;
|
||
}
|
||
.arch-card {
|
||
animation: fadeUp 0.5s ease-out both;
|
||
}
|
||
.arch-card:nth-child(1) { animation-delay: 0.05s; }
|
||
.arch-card:nth-child(2) { animation-delay: 0.1s; }
|
||
.arch-card:nth-child(3) { animation-delay: 0.15s; }
|
||
.arch-card:nth-child(4) { animation-delay: 0.2s; }
|
||
|
||
/* ---------- Micro-interactions & Polish ---------- */
|
||
:focus-visible {
|
||
outline: 2px solid var(--c-accent);
|
||
outline-offset: 2px;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
.feature-link {
|
||
transition: color 0.15s, letter-spacing 0.2s;
|
||
}
|
||
.feature-link:hover {
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.md-typeset .tabbed-labels > label {
|
||
font-family: var(--font-body) !important;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
padding: 0.4rem 0.8rem;
|
||
transition: color 0.2s, border-color 0.2s;
|
||
}
|
||
.md-typeset .tabbed-labels > label:hover {
|
||
color: var(--c-text);
|
||
}
|
||
.md-clipboard {
|
||
color: var(--c-text-dim) !important;
|
||
transition: color 0.15s, transform 0.15s;
|
||
}
|
||
.md-clipboard:hover {
|
||
color: var(--c-accent) !important;
|
||
transform: scale(1.1);
|
||
}
|
||
.md-typeset pre {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--c-border) transparent;
|
||
}
|
||
.md-typeset pre::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
.md-typeset pre::-webkit-scrollbar-thumb {
|
||
background: var(--c-border);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* TOC polish */
|
||
.md-nav--secondary .md-nav__link {
|
||
font-size: 12px;
|
||
transition: color 0.15s;
|
||
padding: 3px 6px;
|
||
line-height: 1.4;
|
||
}
|
||
.md-nav--secondary > .md-nav__title {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--c-text-dim) !important;
|
||
background: var(--c-bg) !important;
|
||
box-shadow: none !important;
|
||
border-bottom: 1px solid var(--c-border-dim);
|
||
padding: 0.3rem 0.6rem;
|
||
}
|
||
.md-nav--secondary .md-nav__link--active {
|
||
color: var(--c-text) !important;
|
||
font-weight: 600;
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* Content area max-width for readability */
|
||
.md-content__inner {
|
||
max-width: 48rem;
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
.md-typeset code {
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.md-typeset a {
|
||
transition: color 0.15s, text-decoration-color 0.15s;
|
||
}
|
||
.md-typeset h1 {
|
||
animation: none;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
SDK Grid — Language card layout
|
||
========================================================================== */
|
||
|
||
.sdk-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 16px;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.sdk-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 20px 24px;
|
||
border: 1px solid var(--c-border-dim);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
text-decoration: none !important;
|
||
color: inherit !important;
|
||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||
}
|
||
|
||
.sdk-card:hover {
|
||
border-color: var(--c-accent);
|
||
box-shadow: var(--shadow-card);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.sdk-card h3 {
|
||
margin: 0 0 4px 0;
|
||
font-family: var(--font-body);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--c-text);
|
||
}
|
||
|
||
.sdk-card p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: var(--c-text-dim);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.sdk-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sdk-arrow {
|
||
font-size: 1.3rem;
|
||
color: var(--c-text-dim);
|
||
transition: color 0.2s, transform 0.2s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sdk-card:hover .sdk-arrow {
|
||
color: var(--c-accent);
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
/* SDK Language Icons */
|
||
.sdk-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
flex-shrink: 0;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
filter: brightness(1.1);
|
||
}
|
||
|
||
.sdk-java {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23EA2D2E' d='M47.6 98.6s-4.1 2.4 2.9 3.2c8.5 1 12.8.9 22.1-.9 0 0 2.5 1.5 5.9 2.9-20.9 8.9-47.3-.5-30.9-5.2zm-2.6-11.9s-4.6 3.4 2.4 4.1c9.1.9 16.2 1 28.6-1.3 0 0 1.7 1.7 4.4 2.7-25.3 7.4-53.5.6-35.4-5.5z'/%3E%3Cpath fill='%23EA2D2E' d='M69.1 61.5c5.2 6 -1.4 11.4-1.4 11.4s13.2-6.8 7.1-15.4c-5.7-8-10-12 13.5-25.7 0 0-36.9 9.2-19.2 29.7z'/%3E%3Cpath fill='%23EA2D2E' d='M102.4 108.3s3 2.5-3.3 4.4c-12.1 3.7-50.3 4.8-60.9.1-3.8-1.7 3.4-4 5.6-4.5 2.4-.5 3.7-.4 3.7-.4-4.3-3-27.7 5.9-11.9 8.5 43.2 7.1 78.7-3.2 66.8-8.1zM49.7 70.8s-19.6 4.7-6.9 6.4c5.4.7 16.1.5 26.1-.3 8.2-.6 16.4-2 16.4-2s-2.9 1.2-5 2.7c-20.1 5.3-58.9 2.8-47.7-2.6 9.5-4.5 17.1-4.2 17.1-4.2zm35.5 19.8c20.4-10.6 11-20.8 4.4-19.4-1.6.3-2.3.6-2.3.6s.6-.9 1.7-1.4c12.7-4.5 22.5 13.2-4.2 20.2 0 0 .3-.3.4-1z'/%3E%3Cpath fill='%23EA2D2E' d='M76.5 19.7s11.3 11.3-10.7 28.7c-17.7 14-4 22 0 31.1-10.3-9.3-17.8-17.5-12.8-25.1C60.5 43.7 80.3 38.5 76.5 19.7z'/%3E%3Cpath fill='%23EA2D2E' d='M51.4 117.4c19.6 1.3 49.7-.7 50.4-10.1 0 0-1.4 3.5-16.2 6.2-16.7 3.1-37.4 2.7-49.6.7 0 .1 2.5 2.1 15.4 3.2z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-python {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3ClinearGradient id='a' x1='70.3' x2='18.9' y1='1266.5' y2='1228.1' gradientTransform='translate(0 -1197)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23387EB8'/%3E%3Cstop offset='1' stop-color='%23366994'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M63.4 11c-7.2 0-14 .7-19.9 1.9-17.3 3.7-20.4 11.4-20.4 25.6v18.8h40.8v6.3H25.9C15 63.6 5.7 71.2 3 84.5c-3.1 15.2-3.2 24.7 0 40.6 2.4 11.8 8 20.6 18.9 20.6h12.2V127c0-13.5 11.7-25.4 24.4-25.4h40.8c10.5 0 18.9-8.6 18.9-19.2V44.5c0-10.2-8.6-17.9-18.9-19.7-6.5-1.2-13.3-1.8-20.5-1.9H63.4zM42 25c3.9 0 7.1 3.3 7.1 7.3 0 4-3.2 7.2-7.1 7.2-3.9 0-7.1-3.2-7.1-7.2 0-4 3.2-7.3 7.1-7.3z'/%3E%3ClinearGradient id='b' x1='88.1' x2='136' y1='1310.4' y2='1278.5' gradientTransform='translate(0 -1197)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFE052'/%3E%3Cstop offset='1' stop-color='%23FFC331'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23b)' d='M98.2 63.6v18.1c0 14.1-12 25.9-24.4 25.9H33c-10.3 0-18.9 8.9-18.9 19.2v36c0 10.2 8.9 16.2 18.9 19.2 12 3.6 23.5 4.2 40.8 0 11.5-2.8 18.9-8.4 18.9-19.2v-14.4H53v-6.3h59.7c11 0 15-7.7 18.9-19.2 4-11.8 3.8-23.2 0-40.6-2.7-12.5-7.9-19.2-18.9-19.2H98.2zM86.7 126c3.9 0 7.1 3.2 7.1 7.2 0 4-3.2 7.3-7.1 7.3-3.9 0-7.1-3.3-7.1-7.3 0-4 3.2-7.2 7.1-7.2z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-go {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%2300ADD8'/%3E%3Ctext x='60' y='76' text-anchor='middle' font-family='Arial,sans-serif' font-weight='bold' font-size='52' fill='white'%3EGo%3C/text%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-js {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23F0DB4F' d='M2 2h124v124H2z'/%3E%3Cpath fill='%23323330' d='M34.5 103.7c2.8 4.5 5.3 8.3 11.8 8.3 6 0 10-2.3 10-11.5V59.7h12.7v41c0 18.9-11.1 27.5-27.2 27.5-14.6 0-23-7.5-27.3-16.6l11-6.9zm47.4-1.5c3.2 5.3 7.5 9.2 14.9 9.2 6.3 0 10.3-3.1 10.3-7.5 0-5.2-4.1-7-11-10l-3.8-1.6c-10.9-4.6-18.1-10.4-18.1-22.7 0-11.3 8.6-19.9 22-19.9 9.6 0 16.4 3.3 21.4 12l-11.7 7.5c-2.6-4.6-5.4-6.4-9.7-6.4-4.4 0-7.2 2.8-7.2 6.4 0 4.5 2.8 6.3 9.3 9.1l3.8 1.6C114 84 121.2 89.6 121.2 102.2c0 14.4-11.3 22.3-26.5 22.3-14.8 0-24.4-7.1-29.1-16.3l12.3-7z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-csharp {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%239B4F96' d='M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7z'/%3E%3Cpath fill='%23068488' d='M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8l-106.6 62z'/%3E%3Cpath fill='%23fff' d='M85.3 76.5c-2.4 9.6-11.8 17.3-24.2 17.3-14.3 0-26.1-10.2-26.1-27.3s11.5-27.3 26.1-27.3c11.9 0 21.1 6.9 24 16.6l14.8-5.4c-5.2-15.3-18.8-25.8-38.5-25.8-22.5 0-41.1 16.6-41.1 41.9 0 25.4 18.2 41.9 41.1 41.9 19.5 0 33.8-11.3 38.7-27l-14.8-4.9z'/%3E%3Cpath fill='%23fff' d='M97 66.2h5.6v-6h5.9v6h5.6v5.9h-5.6v6.1h-5.9v-6.1H97z'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-ruby {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%23CC342D'/%3E%3Cpolygon fill='white' points='60,20 95,50 80,100 40,100 25,50'/%3E%3Cpolygon fill='%23CC342D' opacity='0.3' points='60,20 95,50 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.2' points='95,50 80,100 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.15' points='25,50 60,20 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.1' points='25,50 40,100 60,55'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.sdk-rust {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%23000'/%3E%3Ccircle cx='60' cy='60' r='34' fill='none' stroke='white' stroke-width='6'/%3E%3Ccircle cx='60' cy='24' r='5' fill='white'/%3E%3Crect x='46' y='48' width='28' height='6' rx='2' fill='white'/%3E%3Crect x='46' y='58' width='20' height='6' rx='2' fill='white'/%3E%3Crect x='46' y='68' width='10' height='6' rx='2' fill='white'/%3E%3Cline x1='58' y1='68' x2='74' y2='74' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.event-next-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||
gap: .75rem;
|
||
margin: 1.25rem 0;
|
||
}
|
||
|
||
.event-next-steps a {
|
||
display: block;
|
||
padding: .85rem 1rem;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: var(--r-md);
|
||
background: var(--c-bg-secondary);
|
||
color: var(--c-text) !important;
|
||
font-weight: 650;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
.event-next-steps a:hover { border-color: var(--c-accent); }
|
||
|
||
.event-badge {
|
||
display: inline-block;
|
||
margin-left: .35rem;
|
||
padding: .08rem .38rem;
|
||
border: 1px solid var(--c-border);
|
||
border-radius: 999px;
|
||
color: var(--c-text-muted);
|
||
font-size: .7rem;
|
||
font-weight: 700;
|
||
letter-spacing: .03em;
|
||
text-transform: uppercase;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 600px) {
|
||
.sdk-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ==========================================================================
|
||
Dark mode component overrides (slate scheme)
|
||
Syntax highlighting only applied in dark mode
|
||
========================================================================== */
|
||
|
||
/* Slate: syntax highlighting — dark scheme */
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .k,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .kd,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .kn,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .kp,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .kr,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .kt,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .keyword { color: #c084fc !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .s,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .s1,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .s2,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .sb,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .sc,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .sd,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .se,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .sh,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .si,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .sx,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .string { color: #22c55e !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .m,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .mi,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .mf,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .mh,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .mo,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .number { color: #f97316 !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .c,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .c1,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .cm,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .cs,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .comment { color: #71717a !important; font-style: italic; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .na,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nb,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nc,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nd,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .ne,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nf,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .name { color: #60a5fa !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nn,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .no,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nv,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .nt { color: #f97316 !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .p,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .o,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .punctuation,
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .operator { color: #a1a1aa !important; }
|
||
[data-md-color-scheme="slate"] .md-typeset pre > code .ow { color: #fb923c !important; }
|
||
/* Durable Adaptive Graphs launch card */
|
||
.dag-proof-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 2rem;
|
||
max-width: 1180px;
|
||
margin: 2rem auto;
|
||
padding: 2rem;
|
||
border: 1px solid rgba(6, 214, 160, 0.42);
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, rgba(6, 214, 160, 0.12), rgba(59, 130, 246, 0.08));
|
||
}
|
||
.dag-proof-card__eyebrow { margin: 0; color: #0f766e; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
||
.dag-proof-card h2 { margin: .3rem 0 .6rem; }
|
||
.dag-proof-card p { max-width: 700px; margin: 0; }
|
||
.dag-proof-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 290px; }
|
||
@media (max-width: 760px) { .dag-proof-card { align-items: flex-start; flex-direction: column; margin: 1rem; } .dag-proof-card__actions { min-width: 0; } }
|
||
|
||
/* ---------- Dark-mode image cards ---------- */
|
||
/* Many diagrams are transparent-background PNGs with dark linework; in dark
|
||
mode the page shows through and the labels disappear. Back content images
|
||
with a light card. Logo/icon elements that already have their own dark-mode
|
||
treatment (inversion filters, white chips) are reset below. */
|
||
[data-md-color-scheme="slate"] .md-typeset img {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 6px;
|
||
}
|
||
[data-md-color-scheme="slate"] .md-typeset img.twemoji,
|
||
[data-md-color-scheme="slate"] .md-typeset .home-sdk-card img,
|
||
[data-md-color-scheme="slate"] .md-typeset .lang-logos img,
|
||
[data-md-color-scheme="slate"] .md-typeset .agent-framework-strip__item img,
|
||
[data-md-color-scheme="slate"] .md-typeset img.integration-hero__logo,
|
||
[data-md-color-scheme="slate"] .md-typeset img.framework-logo,
|
||
[data-md-color-scheme="slate"] .md-typeset img.framework-heading-logo,
|
||
[data-md-color-scheme="slate"] .md-typeset .event-bus-hero__broker img {
|
||
background: transparent;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ---------- Durable Adaptive Graphs hero (dynamic-workflows.md inline SVG) ---------- */
|
||
.dag-hero {
|
||
--dag-teal: #0f766e;
|
||
--dag-teal-deep: #134e4a;
|
||
--dag-orange: #fb923c;
|
||
--dag-orange-deep: #9a3412;
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
margin: 22px 0 28px;
|
||
}
|
||
[data-md-color-scheme="slate"] .dag-hero {
|
||
--dag-teal: #2dd4bf;
|
||
--dag-teal-deep: #99f6e4;
|
||
--dag-orange-deep: #fdba74;
|
||
}
|
||
.dag-hero__canvas { fill: var(--c-bg-secondary); }
|
||
.dag-hero__title { fill: var(--c-text); }
|
||
.dag-hero__subtitle,
|
||
.dag-hero__detail { fill: var(--c-text-muted); }
|
||
.dag-hero__arrow { fill: none; stroke: var(--c-text-muted); }
|
||
.dag-hero__arrowhead { fill: var(--c-text-muted); }
|
||
.dag-hero__arrowhead--teal { fill: var(--dag-teal); }
|
||
.dag-hero__zone--graph {
|
||
fill: color-mix(in srgb, var(--dag-teal) 8%, var(--c-bg));
|
||
stroke: color-mix(in srgb, var(--dag-teal) 40%, var(--c-bg));
|
||
}
|
||
.dag-hero__zone--control {
|
||
fill: color-mix(in srgb, var(--dag-orange) 10%, var(--c-bg));
|
||
stroke: color-mix(in srgb, var(--dag-orange) 45%, var(--c-bg));
|
||
}
|
||
.dag-hero__zone-label--graph { fill: var(--dag-teal); }
|
||
.dag-hero__zone-label--control,
|
||
.dag-hero__control-labels,
|
||
.dag-hero__control-note { fill: var(--dag-orange-deep); }
|
||
.dag-hero__node { fill: var(--c-bg); stroke: var(--dag-teal); }
|
||
.dag-hero__node-label { fill: var(--dag-teal-deep); }
|
||
.dag-hero__loop { fill: none; stroke: var(--dag-teal); }
|
||
.dag-hero__loop-note { fill: var(--dag-teal); }
|
||
.dag-hero__control-chips { fill: var(--c-bg); stroke: var(--dag-orange); }
|
||
.dag-hero__control-arrow { fill: none; stroke: var(--dag-orange); }
|