diff --git a/mkdocs/assets/images/arch-logos/deepseek.svg b/mkdocs/assets/images/arch-logos/deepseek.svg
new file mode 100644
index 000000000..3c9d00e9b
--- /dev/null
+++ b/mkdocs/assets/images/arch-logos/deepseek.svg
@@ -0,0 +1 @@
+
diff --git a/mkdocs/assets/images/arch-logos/docker.svg b/mkdocs/assets/images/arch-logos/docker.svg
new file mode 100644
index 000000000..dfbafd12b
--- /dev/null
+++ b/mkdocs/assets/images/arch-logos/docker.svg
@@ -0,0 +1 @@
+
diff --git a/mkdocs/assets/images/arch-logos/glm.svg b/mkdocs/assets/images/arch-logos/glm.svg
new file mode 100644
index 000000000..0638057db
--- /dev/null
+++ b/mkdocs/assets/images/arch-logos/glm.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/mkdocs/assets/images/arch-logos/kimi.svg b/mkdocs/assets/images/arch-logos/kimi.svg
new file mode 100644
index 000000000..8f95bd7fc
--- /dev/null
+++ b/mkdocs/assets/images/arch-logos/kimi.svg
@@ -0,0 +1 @@
+Kimi
diff --git a/mkdocs/assets/images/arch-logos/qwen.svg b/mkdocs/assets/images/arch-logos/qwen.svg
new file mode 100644
index 000000000..3b4f0ee9d
--- /dev/null
+++ b/mkdocs/assets/images/arch-logos/qwen.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/mkdocs/assets/stylesheets/cloudscape-docs.css b/mkdocs/assets/stylesheets/cloudscape-docs.css
index 8f1c5c6c0..d7b0fb39f 100644
--- a/mkdocs/assets/stylesheets/cloudscape-docs.css
+++ b/mkdocs/assets/stylesheets/cloudscape-docs.css
@@ -204,8 +204,22 @@
white-space: nowrap;
}
-/* GitHub → outlined (normal) "GitHub" with a trailing external-link glyph. Weight 700 so it matches
- the filled "Get started" trigger beside it (the two now read as one type, different fills). */
+/* "Get started" trigger uses the landing's primary-button weight (500) — lighter than the GitHub
+ pill (700), mirroring the landing where the primary and normal button variants differ in weight. */
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-gs-menu__trigger {
+ font-weight: 500 !important;
+ /* Inverts with the theme (like the landing's primary button): dark fill + white text in light
+ mode, light fill + dark text in dark mode. The global rgba(0,0,0,.87) stayed dark in both. */
+ background: var(--cs-text) !important;
+ color: var(--cs-bg) !important;
+}
+[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-gs-menu__trigger:hover {
+ background: color-mix(in srgb, var(--cs-text) 88%, var(--cs-bg)) !important;
+ color: var(--cs-bg) !important;
+}
+
+/* GitHub → outlined (normal) "GitHub" with a trailing external-link glyph, mirroring the landing's
+ normal-variant GitHub button (weight 700). */
[data-md-color-primary=white] .md-header__buttons .md-button--primary.github {
background: transparent;
color: var(--cs-text);
@@ -272,14 +286,14 @@
display: inline-flex !important;
align-items: center;
gap: 5px;
+ cursor: pointer;
/* the caret is lighter than a full glyph, so trim the trailing padding (was 18px). */
padding-right: 12px !important;
}
.cs-gs-menu__caret {
transition: transform 0.15s ease;
}
-.cs-gs-menu:hover .cs-gs-menu__caret,
-.cs-gs-menu:focus-within .cs-gs-menu__caret {
+.cs-gs-menu--open .cs-gs-menu__caret {
transform: rotate(180deg);
}
.cs-gs-menu__popup {
@@ -288,9 +302,9 @@
right: 0;
z-index: 1000;
width: 360px;
- padding: 6px;
+ padding: 0;
background: var(--cs-bg);
- border: 0.5px solid var(--cs-text);
+ border: 1px solid var(--cs-text);
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
opacity: 0;
@@ -298,15 +312,7 @@
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
-/* Invisible bridge over the 8px gap so the pointer can travel from trigger to popup. */
-.cs-gs-menu__popup::before {
- content: "";
- position: absolute;
- inset: -8px 0 auto 0;
- height: 8px;
-}
-.cs-gs-menu:hover .cs-gs-menu__popup,
-.cs-gs-menu:focus-within .cs-gs-menu__popup {
+.cs-gs-menu--open .cs-gs-menu__popup {
opacity: 1;
visibility: visible;
transform: translateY(0);
@@ -324,10 +330,10 @@
display: flex;
align-items: flex-start;
gap: 12px;
- padding: 14px;
+ padding: 11px 10px;
border-radius: 10px;
- background: linear-gradient(135deg, #002aff, #002aff, #e165fe);
- color: #fff;
+ background: var(--cs-text);
+ color: var(--cs-bg);
text-decoration: none;
}
.cs-gs-menu__feat-body {
@@ -343,9 +349,9 @@
flex: 0 0 auto;
}
.cs-gs-menu__gh {
- color: rgba(255, 255, 255, 0.88);
+ color: color-mix(in srgb, var(--cs-bg) 88%, transparent);
font-size: 12px;
- font-weight: 600;
+ font-weight: 300;
font-variant-numeric: tabular-nums;
}
.cs-gs-menu__feat-ic {
@@ -356,8 +362,8 @@
width: 34px;
height: 34px;
border-radius: 9px;
- border: 0.5px solid rgba(255, 255, 255, 0.5);
- color: #fff;
+ border: 0.5px solid color-mix(in srgb, var(--cs-bg) 50%, transparent);
+ color: var(--cs-bg);
}
.cs-gs-menu__feat-ic svg {
width: 18px;
@@ -365,21 +371,20 @@
}
.cs-gs-menu__feat-name {
display: block;
- color: #fff;
+ color: var(--cs-bg);
font-size: 16px;
font-weight: 600;
}
.cs-gs-menu__feat-desc {
display: block;
margin-top: 8px;
- color: rgba(255, 255, 255, 0.88);
+ color: color-mix(in srgb, var(--cs-bg) 88%, transparent);
font-size: 13px;
line-height: 1.5;
}
.cs-gs-menu__list {
display: flex;
flex-direction: column;
- margin-top: 6px;
}
.cs-gs-menu__row {
display: flex;
@@ -413,11 +418,22 @@
min-width: 0;
}
.cs-gs-menu__name {
- display: block;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
color: var(--cs-text);
font-size: 15px;
font-weight: 600;
}
+.cs-gs-menu__ext {
+ flex: 0 0 auto;
+ /* Shared Cloudscape external-link icon (same as footer / GitHub / dstack Sky buttons). */
+ width: 0.9em;
+ height: 0.9em;
+ background-color: currentColor;
+ -webkit-mask: var(--cs-ext-icon) center / contain no-repeat;
+ mask: var(--cs-ext-icon) center / contain no-repeat;
+}
.cs-gs-menu__desc {
display: block;
margin-top: 3px;
@@ -2067,7 +2083,7 @@
width: 100%;
color: var(--cs-text);
--arch-border-width: max(1px, 0.22cqw);
- --arch-gradient: linear-gradient(45deg, #002aff, #002aff, #e165fe);
+ --arch-gradient: var(--cs-text);
}
.arch-dash {
position: absolute;
@@ -2078,15 +2094,15 @@
pointer-events: none;
}
.arch-dash rect {
- x: 0.75px;
- y: 0.75px;
- width: calc(100% - 1.5px);
- height: calc(100% - 1.5px);
+ x: 0.25px;
+ y: 0.25px;
+ width: calc(100% - 0.5px);
+ height: calc(100% - 0.5px);
rx: 12px;
fill: none;
stroke: var(--arch-dash-stroke, var(--cs-text));
- stroke-width: 1.5px;
- stroke-dasharray: 2 6;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1 0;
stroke-linecap: butt;
}
.arch-row {
@@ -2107,6 +2123,7 @@
.arch-cell--center .arch-cell__label { white-space: normal; text-align: center; }
.arch-cell--full { min-height: 9.83cqw; }
.arch-cell--gpu { justify-content: space-between; }
+.arch-cell--model { grid-column: span 2; justify-content: space-between; }
.arch-cell--hw { justify-content: center; }
.arch-cell--hw > .arch-cell__label { position: absolute; left: 2cqw; }
.arch-cell__label {
@@ -2120,12 +2137,12 @@
flex-direction: column;
align-items: center;
gap: 3cqw;
- padding: 3.2cqw 5.07cqw 3.48cqw;
+ padding: 3.2cqw 3.2cqw 3.48cqw;
border-radius: 1.6cqw;
background: var(--arch-gradient);
- color: #fff;
+ color: var(--cs-bg);
}
-.arch-orchestration__title { font-size: 16px; font-weight: 500; text-align: center; }
+.arch-orchestration__title { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; width: 100%; font-size: 16px; font-weight: 500; }
.arch-orchestration__cells {
display: grid;
grid-template-columns: 1fr 1.34fr 1fr 1fr 1fr;
@@ -2144,7 +2161,7 @@
font-size: 2.25cqw;
font-weight: 500;
line-height: 1.2;
- --arch-dash-stroke: #fff;
+ --arch-dash-stroke: var(--cs-bg);
}
.arch-logos {
display: inline-flex;
@@ -2179,6 +2196,11 @@
.arch-logo--amd { height: 4.6cqw; aspect-ratio: 1600 / 1408; -webkit-mask-image: url(../images/arch-logos/amd.webp); mask-image: url(../images/arch-logos/amd.webp); }
.arch-logo--tenstorrent { height: 4.8cqw; aspect-ratio: 170 / 169; -webkit-mask-image: url(../images/arch-logos/tenstorrent.svg); mask-image: url(../images/arch-logos/tenstorrent.svg); }
.arch-logo--tpu { height: 4.2cqw; aspect-ratio: 256 / 206; -webkit-mask-image: url(../images/arch-logos/gcp.svg); mask-image: url(../images/arch-logos/gcp.svg); }
+.arch-logo--glm { height: 3.4cqw; aspect-ratio: 19 / 16; -webkit-mask-image: url(../images/arch-logos/glm.svg); mask-image: url(../images/arch-logos/glm.svg); }
+.arch-logo--deepseek { height: 4.8cqw; aspect-ratio: 1; transform: translateY(-1px); -webkit-mask-image: url(../images/arch-logos/deepseek.svg); mask-image: url(../images/arch-logos/deepseek.svg); }
+.arch-logo--qwen { height: 4.9cqw; aspect-ratio: 1; transform: translateY(1px); -webkit-mask-image: url(../images/arch-logos/qwen.svg); mask-image: url(../images/arch-logos/qwen.svg); }
+.arch-logo--kimi { height: 4.3cqw; aspect-ratio: 1; -webkit-mask-image: url(../images/arch-logos/kimi.svg); mask-image: url(../images/arch-logos/kimi.svg); }
+.arch-logo--docker { height: 2.8cqw; aspect-ratio: 122.88 / 88.17; -webkit-mask-image: url(../images/arch-logos/docker.svg); mask-image: url(../images/arch-logos/docker.svg); }
/* Reflow to 2-up below ~480px (was 360px): the cell labels are a fixed 16px, so on a narrow
phone the 3-up grid can't shrink them and they overflow — switch to 2-up sooner. */
@container (max-width: 480px) {
diff --git a/mkdocs/docs/index.md b/mkdocs/docs/index.md
index ff425ebb6..e64a0f264 100644
--- a/mkdocs/docs/index.md
+++ b/mkdocs/docs/index.md
@@ -17,7 +17,7 @@ It streamlines development, training, and inference, and is compatible with any
-
Any framework
Your data
Any models
The AI-native orchestration stack
Fleets
Dev environments
Tasks
Services
Volumes
Any cloud
Kubernetes
On-prem clusters
Any hardware
+dstack orchestration
Fleets
Dev environments
Tasks
Services
Volumes
Any cloud
Kubernetes
On-prem clusters
Any hardware
### Set up the server
diff --git a/mkdocs/overrides/header-2.html b/mkdocs/overrides/header-2.html
index fc6eb3e39..f1e6bbd5f 100644
--- a/mkdocs/overrides/header-2.html
+++ b/mkdocs/overrides/header-2.html
@@ -123,22 +123,22 @@
@@ -155,6 +155,27 @@
}
});
+ // "Get started" popup: click the trigger to toggle it; click anywhere outside (or the
+ // trigger again, or Escape) to close it.
+ var gsMenu = document.querySelector('.cs-gs-menu');
+ var gsTrigger = gsMenu && gsMenu.querySelector('.cs-gs-menu__trigger');
+ if (gsMenu && gsTrigger) {
+ var gsSetOpen = function (open) {
+ gsMenu.classList.toggle('cs-gs-menu--open', open);
+ gsTrigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+ };
+ gsTrigger.addEventListener('click', function (e) {
+ e.stopPropagation();
+ gsSetOpen(!gsMenu.classList.contains('cs-gs-menu--open'));
+ });
+ document.addEventListener('click', function (e) {
+ if (!gsMenu.contains(e.target)) gsSetOpen(false);
+ });
+ document.addEventListener('keydown', function (e) {
+ if (e.key === 'Escape') gsSetOpen(false);
+ });
+ }
+
// Live GitHub star count under the "Get started" popup's open-source icon (mirrors the
// landing). Best-effort: if the API is rate-limited or errors, the badge stays hidden.
var el = document.querySelector('[data-cs-gh-stars]');
diff --git a/website/public/static/logos/deepseek.svg b/website/public/static/logos/deepseek.svg
new file mode 100644
index 000000000..3c9d00e9b
--- /dev/null
+++ b/website/public/static/logos/deepseek.svg
@@ -0,0 +1 @@
+
diff --git a/website/public/static/logos/docker.svg b/website/public/static/logos/docker.svg
new file mode 100644
index 000000000..dfbafd12b
--- /dev/null
+++ b/website/public/static/logos/docker.svg
@@ -0,0 +1 @@
+
diff --git a/website/public/static/logos/glm.svg b/website/public/static/logos/glm.svg
new file mode 100644
index 000000000..0638057db
--- /dev/null
+++ b/website/public/static/logos/glm.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/website/public/static/logos/kimi.svg b/website/public/static/logos/kimi.svg
new file mode 100644
index 000000000..8f95bd7fc
--- /dev/null
+++ b/website/public/static/logos/kimi.svg
@@ -0,0 +1 @@
+Kimi
diff --git a/website/public/static/logos/qwen.svg b/website/public/static/logos/qwen.svg
new file mode 100644
index 000000000..3b4f0ee9d
--- /dev/null
+++ b/website/public/static/logos/qwen.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/website/src/components/ArchitectureDiagram.tsx b/website/src/components/ArchitectureDiagram.tsx
index 9040a6517..a0abca02c 100644
--- a/website/src/components/ArchitectureDiagram.tsx
+++ b/website/src/components/ArchitectureDiagram.tsx
@@ -24,6 +24,15 @@ const FRAMEWORKS: Logo[] = [
{ key: 'huggingface', label: 'Hugging Face', src: logoSrc('huggingface.svg') },
];
+const MODELS: Logo[] = [
+ { key: 'glm', label: 'GLM', src: logoSrc('glm.svg') },
+ { key: 'deepseek', label: 'DeepSeek', src: logoSrc('deepseek.svg') },
+ { key: 'qwen', label: 'Qwen', src: logoSrc('qwen.svg') },
+ { key: 'kimi', label: 'Kimi', src: logoSrc('kimi.svg') },
+];
+
+const DOCKER: Logo = { key: 'docker', label: 'Docker', src: logoSrc('docker.svg') };
+
const GPU_CLOUDS: Logo[] = [
{ key: 'aws', label: 'AWS', src: logoSrc('aws.svg') },
{ key: 'gcp', label: 'Google Cloud', src: logoSrc('gcp.svg') },
@@ -72,27 +81,28 @@ function LogoRow({ logos }: { logos: Logo[] }) {
export function ArchitectureDiagram() {
return (
-
- {/* Top: what plugs in on top of the orchestration layer */}
+
+ {/* Top: what plugs in on top of the orchestration layer. "Any model" spans the last two
+ columns so it lines up with Kubernetes + on-prem below. */}
Any framework
-
-
- Your data
-
-
+
- Any models
+ Any model
+
{/* Middle: the orchestration layer itself */}
-
The AI-native orchestration stack
+
+ dstack orchestration
+
+
{['Fleets', 'Dev environments', 'Tasks', 'Services', 'Volumes'].map(name => (
diff --git a/website/src/components/SiteNavigation.tsx b/website/src/components/SiteNavigation.tsx
index 4eac7b1bc..2779644bb 100644
--- a/website/src/components/SiteNavigation.tsx
+++ b/website/src/components/SiteNavigation.tsx
@@ -68,8 +68,8 @@ type ProductLink = {
// section.
const products: ProductLink[] = [
{ id: 'open-source', text: 'dstack', secondaryText: 'The open-source control plane that works across clouds, Kubernetes, and on-prem.', href: DOCS_URL, icon: },
- { id: 'sky-product', text: 'dstack Sky', secondaryText: 'Access GPU marketplace, or bring your own clouds. Hosted and managed by us.', href: 'https://sky.dstack.ai', external: true, icon: },
{ id: 'enterprise', text: 'Enterprise', secondaryText: 'Self-hosted with SSO, air-gapped setup, dedicated support, and more.', href: 'https://calendly.com/dstackai/discovery-call', external: true, icon: },
+ { id: 'sky-product', text: 'dstack Sky', secondaryText: 'Access GPU marketplace, or bring your own clouds. Hosted and managed by us.', href: 'https://sky.dstack.ai', external: true, icon: },
];
// Items for the mobile slide-out navigation. The blog categories are top-level links (mirroring
diff --git a/website/src/pages/Home/GetStartedSection.tsx b/website/src/pages/Home/GetStartedSection.tsx
index d388cf362..6324ab4e8 100644
--- a/website/src/pages/Home/GetStartedSection.tsx
+++ b/website/src/pages/Home/GetStartedSection.tsx
@@ -129,6 +129,7 @@ export function GetStartedSection() {
'aria-selected': tab === id,
tabIndex: 0,
onClick: () => setTab(id),
+ onMouseEnter: () => setTab(id),
onKeyDown: (event: KeyboardEvent) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
@@ -159,14 +160,6 @@ export function GetStartedSection() {
-
-
-
- dstack Sky
- Access GPU marketplace, or bring your own clouds. Hosted and managed by us.
-
-
-
@@ -174,6 +167,14 @@ export function GetStartedSection() {
Self-hosted with SSO, air-gapped setup, dedicated support, and more.
+
+
+
+
+ dstack Sky
+ Access GPU marketplace, or bring your own clouds. Hosted and managed by us.
+
+
{/* Open-source: install-method tabs + read-only code + footer CTA bar. */}
diff --git a/website/src/styles.css b/website/src/styles.css
index e5335dc98..1df2c415a 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -325,9 +325,9 @@ p {
left: 0;
z-index: 1000;
width: 360px;
- padding: 6px;
+ padding: 0;
background: var(--cs-bg);
- border: 0.5px solid var(--cs-text);
+ border: 1px solid var(--cs-text);
border-radius: 12px;
}
@@ -338,10 +338,10 @@ p {
display: flex;
align-items: flex-start;
gap: 12px;
- padding: 14px;
+ padding: 11px 10px;
border-radius: 10px;
- background: linear-gradient(135deg, #002aff, #002aff, #e165fe);
- color: #fff;
+ background: var(--cs-text);
+ color: var(--cs-bg);
text-decoration: none;
}
/* Left column: the icon tile (same as the Sky/Enterprise rows) with the star count beneath it. */
@@ -363,8 +363,8 @@ p {
width: 34px;
height: 34px;
border-radius: 9px;
- border: 0.5px solid rgba(255, 255, 255, 0.5);
- color: #fff;
+ border: 0.5px solid color-mix(in srgb, var(--cs-bg) 50%, transparent);
+ color: var(--cs-bg);
}
.site-products-menu__feat-ic svg {
width: 20px;
@@ -372,14 +372,14 @@ p {
}
.site-products-menu__feat-name {
display: block;
- color: #fff;
+ color: var(--cs-bg);
font-size: 16px;
font-weight: 600;
}
.site-products-menu__feat-desc {
display: block;
- margin: 8px 0 13px;
- color: rgba(255, 255, 255, 0.88);
+ margin: 8px 0 0;
+ color: color-mix(in srgb, var(--cs-bg) 88%, transparent);
font-size: 13px;
line-height: 1.5;
}
@@ -391,21 +391,21 @@ p {
gap: 5px;
padding: 7px 14px;
border-radius: 8px;
- background: #fff;
- color: #16191f;
+ background: var(--cs-bg);
+ color: var(--cs-text);
font-size: 12.5px;
font-weight: 600;
transition: background-color 0.15s ease;
}
.site-products-menu__feat:hover .site-products-menu__feat-cta {
- background: #e9ebef;
+ background: var(--cs-panel);
}
/* Live GitHub star count, centered beneath the icon tile (only shown once the API responds). */
.site-products-menu__gh {
- color: rgba(255, 255, 255, 0.88);
+ color: color-mix(in srgb, var(--cs-bg) 88%, transparent);
font-size: 12px;
- font-weight: 600;
+ font-weight: 300;
font-variant-numeric: tabular-nums;
}
@@ -413,7 +413,6 @@ p {
.site-products-menu__list {
display: flex;
flex-direction: column;
- margin-top: 6px;
}
.site-products-menu__row {
display: flex;
@@ -465,7 +464,6 @@ p {
.home-hero {
position: relative;
overflow: visible;
- background: var(--cs-bg);
}
.home-hero__content {
@@ -992,13 +990,13 @@ p {
width: 100%;
color: var(--cs-text);
--arch-border-width: max(1px, 0.22cqw); /* placeholder badge stroke */
- --arch-gradient: linear-gradient(45deg, #002aff, #002aff, #e165fe);
+ --arch-gradient: var(--cs-text);
}
-/* Dotted outline: an inline
with one rounded rect, stroked with the exact 2-on / 6-off
- dash. Geometry is set in CSS (modern browsers allow x/y/width/height/rx as CSS so we can inset
- by the half stroke with calc — no edge clipping, crisp dots) and the stroke takes the text
- color so it matches the labels and flips with the theme. */
+/* Thin hairline outline: an inline with one rounded rect, stroked with a solid 0.5px line
+ (dasharray 1 0). Geometry is set in CSS (modern browsers allow x/y/width/height/rx as CSS so we
+ can inset by the half stroke with calc — no edge clipping) and the stroke takes the text color
+ so it matches the labels and flips with the theme. */
.arch-dash {
position: absolute;
inset: 0;
@@ -1008,15 +1006,15 @@ p {
pointer-events: none;
}
.arch-dash rect {
- x: 0.75px;
- y: 0.75px;
- width: calc(100% - 1.5px);
- height: calc(100% - 1.5px);
+ x: 0.25px;
+ y: 0.25px;
+ width: calc(100% - 0.5px);
+ height: calc(100% - 0.5px);
rx: 12px;
fill: none;
stroke: var(--arch-dash-stroke, var(--cs-text));
- stroke-width: 1.5px;
- stroke-dasharray: 2 6;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1 0;
stroke-linecap: butt;
}
@@ -1056,6 +1054,13 @@ p {
justify-content: space-between;
}
+/* "Any model": spans the last two columns so it lines up with Kubernetes + on-prem below;
+ label pinned left, model logos pushed to the right edge. */
+.arch-cell--model {
+ grid-column: span 2;
+ justify-content: space-between;
+}
+
/* "Any hardware": label pinned left, logos centered across the full row. */
.arch-cell--hw {
justify-content: center;
@@ -1079,17 +1084,21 @@ p {
flex-direction: column;
align-items: center;
gap: 3cqw;
- padding: 3.2cqw 5.07cqw 3.48cqw;
+ padding: 3.2cqw 3.2cqw 3.48cqw;
border-radius: 1.6cqw;
background: var(--arch-gradient);
- color: #fff;
+ color: var(--cs-bg);
}
/* Same size/weight as the cell labels (e.g. "Any framework"). */
.arch-orchestration__title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2cqw;
+ width: 100%; /* stretch full width so the title pins left and the Docker marker pins right */
font-size: 2.55cqw;
font-weight: 500;
- text-align: center;
}
/* Five primitives — NOT equal width: "Dev environments" (2nd) is wider so its label fits. */
@@ -1112,7 +1121,7 @@ p {
font-size: 2.25cqw;
font-weight: 500;
line-height: 1.2;
- --arch-dash-stroke: #fff; /* white dotted outline on the gradient */
+ --arch-dash-stroke: var(--cs-bg); /* dotted outline on the fill */
}
.arch-logos {
@@ -1153,6 +1162,14 @@ p {
.arch-logo--amd { height: 4.6cqw; aspect-ratio: 1600 / 1408; }
.arch-logo--tenstorrent { height: 4.8cqw; aspect-ratio: 170 / 169; }
.arch-logo--tpu { height: 4.2cqw; aspect-ratio: 256 / 206; } /* shares the GCP mark, sized down a touch */
+/* "Any model" marks (top row) — square icons; plus the Docker marker on the orchestration band. */
+/* Heights tuned per-logo so the visible marks read equal, compensating for differing padding
+ inside each source viewBox (GLM's glyph is tight; DeepSeek/Qwen/Kimi sit inset in their boxes). */
+.arch-logo--glm { height: 3.4cqw; aspect-ratio: 19 / 16; }
+.arch-logo--deepseek { height: 4.8cqw; aspect-ratio: 1; transform: translateY(-1px); }
+.arch-logo--qwen { height: 4.9cqw; aspect-ratio: 1; transform: translateY(1px); }
+.arch-logo--kimi { height: 4.3cqw; aspect-ratio: 1; }
+.arch-logo--docker { height: 2.8cqw; aspect-ratio: 122.88 / 88.17; }
/* Placeholder badge (fallback if a logo ever lacks a source). Overrides the mask fill. */
.arch-logo--placeholder {
@@ -1383,7 +1400,9 @@ p {
.gs-rail {
display: flex;
flex-direction: column;
- gap: 10px;
+ padding: 0;
+ border: 1px solid var(--cs-text);
+ border-radius: 12px;
}
.gs-opt {
position: relative;
@@ -1403,8 +1422,8 @@ p {
}
.gs-opt--on,
.gs-opt--on:hover {
- background: linear-gradient(135deg, #002aff, #002aff, #e165fe);
- color: #fff;
+ background: var(--cs-text);
+ color: var(--cs-bg);
}
.gs-opt__name {
display: block;
@@ -1419,13 +1438,13 @@ p {
color: color-mix(in srgb, var(--cs-text) 68%, var(--cs-muted));
}
.gs-opt--on .gs-opt__desc {
- color: rgba(255, 255, 255, 0.88);
+ color: color-mix(in srgb, var(--cs-bg) 88%, transparent);
}
/* Open-source: the featured card — bigger, but now with an icon tile (like the Sky/Enterprise rows)
and the star count moved beneath the name, so all three controls read consistently. */
.gs-opt--feat {
- padding: 20px;
+ padding: 13px 14px;
display: flex;
align-items: flex-start;
gap: 14px;
@@ -1441,7 +1460,7 @@ p {
}
.gs-opt__stars {
font-size: 12px;
- font-weight: 600;
+ font-weight: 300;
font-variant-numeric: tabular-nums;
color: inherit;
}
@@ -1469,7 +1488,7 @@ p {
height: 20px;
}
.gs-opt--on .gs-opt__ic {
- border-color: rgba(255, 255, 255, 0.5);
+ border-color: color-mix(in srgb, var(--cs-bg) 50%, transparent);
}
.gs-opt__body {
flex: 1 1 auto;