From a44bbacca055e72fd14fd733a3ac6ea82deb47c2 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Tue, 15 Sep 2026 19:57:46 -0700 Subject: [PATCH 1/3] marketing: keep spaces around hover words in production; mobile layout Co-Authored-By: Claude Fable 5.1 --- .../src/components/variants/doc-body.astro | 10 +- apps/marketing/src/styles/global.css | 10 ++ apps/marketing/src/styles/variants/doc.css | 103 +++++++++++++++++- apps/marketing/src/styles/variants/rail.css | 55 ++++++---- .../src/styles/variants/testimonials.css | 14 +++ 5 files changed, 163 insertions(+), 29 deletions(-) diff --git a/apps/marketing/src/components/variants/doc-body.astro b/apps/marketing/src/components/variants/doc-body.astro index efddbab7e..abcdd0c44 100644 --- a/apps/marketing/src/components/variants/doc-body.astro +++ b/apps/marketing/src/components/variants/doc-body.astro @@ -43,7 +43,7 @@ const { gh } = Astro.props;
  • 01 - Connect + Connect{" "} everything - to Executor. + {" "}to Executor.
  • 02 - Give + Give{" "} your agent - the Executor tool. + {" "}the Executor tool.
  • 03 - That's it. Get started. + That's it.{" "}Get started.

    • One MCP. All your accounts.

    diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css index 8cba66230..6ac83f66c 100644 --- a/apps/marketing/src/styles/global.css +++ b/apps/marketing/src/styles/global.css @@ -1742,3 +1742,13 @@ main:has(.page > .page__rail) > .pattern-bg, main:has(.page > .page__rail) > .pattern-bg + div { display: none; } + +/* Below the desktop breakpoint the rail is a top bar; keep it in view. */ +@media (max-width: 1023.98px) { + .page__rail { + position: sticky; + top: 0; + z-index: 30; + background: var(--color-surface); + } +} diff --git a/apps/marketing/src/styles/variants/doc.css b/apps/marketing/src/styles/variants/doc.css index 41ba4df51..1a745bcbf 100644 --- a/apps/marketing/src/styles/variants/doc.css +++ b/apps/marketing/src/styles/variants/doc.css @@ -2,6 +2,7 @@ .doc { max-width: 720px; padding: 4rem 1.5rem 6rem; + overflow-x: clip; } @media (min-width: 640px) { .doc { @@ -613,16 +614,20 @@ a.doc__term-v:hover { 0 12px 32px -12px rgba(13, 13, 16, 0.18); opacity: 0; pointer-events: none; + visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, - transform 0.15s ease; + transform 0.15s ease, + visibility 0s linear 0.15s; } .doc__pop:hover .doc__pop-panel, .doc__pop:focus-within .doc__pop-panel { opacity: 1; pointer-events: auto; + visibility: visible; transform: translateY(0); + transition-delay: 0s; } .doc__pop-tile, .doc__pop-pill { @@ -818,3 +823,99 @@ a.doc__term-v:hover { .doc__list--open li:last-child { border-bottom: 0; } + +/* ── Phones ── */ +@media (max-width: 719.98px) { + .doc { + padding: 2.25rem 1.25rem 4rem; + } + .doc__title { + font-size: 1.75rem; + } + .doc__steps { + font-size: 16px; + } + .doc__steps li { + grid-template-columns: 1.75rem 1fr; + } + .doc__subhead { + font-size: 16px; + } + /* Hover reveals become tap reveals. The word can sit anywhere on the line, + so the panel is not anchored to it; it is fixed across the viewport width + just under the top bar. */ + .doc__pop { + position: static; + } + .doc__pop-panel { + position: fixed; + left: 1rem; + right: 1rem; + top: 64px; + width: auto; + max-width: none; + } + .doc__tabs { + display: flex; + width: 100%; + } + .doc__tabs button { + flex: 1; + padding: 0.45rem 0.4rem; + font-size: 13px; + white-space: nowrap; + } + .doc__tabpanes p { + min-height: 0; + } + .doc__actions { + flex-direction: column; + align-items: stretch; + } + .doc__actions > .btn-primary, + .doc__actions > .btn-secondary, + .doc__actions > .doc__cmd, + .doc__actions > .doc__dl { + width: 100%; + justify-content: center; + text-align: center; + } + .doc__dl { + display: flex; + flex-direction: column; + align-items: stretch; + } + .doc__dl > a { + width: 100%; + justify-content: center; + } + .doc__dl-other { + align-self: center; + } + .doc__dl .download-other-list { + left: 50%; + transform: translateX(-50%); + } + .doc__section { + margin-top: 2.5rem; + padding-top: 1.75rem; + } + .doc__h { + font-size: 20px; + } + .doc__ways { + grid-template-columns: 1fr; + } + .doc__way-a .btn-primary, + .doc__way-a .btn-secondary { + width: 100%; + justify-content: center; + text-align: center; + } + .doc__way-a .doc__dl { + width: 100%; + } + .doc__fig--hero .surface-card { + padding: 1rem; + } +} diff --git a/apps/marketing/src/styles/variants/rail.css b/apps/marketing/src/styles/variants/rail.css index 7bc9b0dcf..ffb37d13e 100644 --- a/apps/marketing/src/styles/variants/rail.css +++ b/apps/marketing/src/styles/variants/rail.css @@ -290,60 +290,69 @@ color: var(--color-ink-2); } -/* ═══ Mobile: every rail collapses to one horizontal top bar ═══ */ +/* ═══ Mobile: the rail becomes a slim top bar ═══ + Brand on the left, three links and the Get started button on the right. + Everything else in the rail (index, star pill, YC badge, contact) is hidden; + the page body carries it. */ @media (max-width: 1023.98px) { .rail { flex-direction: row; align-items: center; justify-content: space-between; - gap: 16px; + gap: 12px; height: 56px; - padding: 0 24px; + padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--color-rule); } + .rail .rail__brand { + margin: 0; + } .rail .rail__toc, .rail .rail__toc-label, .rail .rail__divider, .rail .rail__foot, .rail .rail__contact, - .rail .rail__secondary { + .rail .rail__secondary, + .rail .gh-star, + .rail .rail__box--yc { display: none; } - .rail .rail__nav { - flex-direction: row; - align-items: center; - gap: 20px; - } - .rail .rail__cta { + .rail .rail__stack { + flex: 0 1 auto; flex-direction: row; align-items: center; - gap: 12px; - margin-top: 0; + gap: 16px; } - .rail .rail__stack { - flex: 0 1 auto; + .rail .rail__nav { flex-direction: row; align-items: center; - justify-content: flex-end; - gap: 20px; + gap: 14px; } .rail .rail__link { - padding: 0 0 0 0; + padding: 0; font-size: 14px; + white-space: nowrap; } .rail .rail__link::before { display: none; } - /* The star pill and the mono count are the first things to go when the bar - gets tight; the links themselves survive longest. */ - .rail .gh-star { - display: none; + .rail .rail__cta { + display: block; + margin-top: 0; + } + .rail--b .rail__box--primary { + width: auto; + height: 32px; + padding: 0 12px; + font-size: 13px; } } - -@media (max-width: 719.98px) { +@media (max-width: 479.98px) { .rail .rail__nav .rail__link:not(.rail__link--keep) { display: none; } + .rail .rail__nav { + gap: 12px; + } } diff --git a/apps/marketing/src/styles/variants/testimonials.css b/apps/marketing/src/styles/variants/testimonials.css index d19afd259..85ec95cbd 100644 --- a/apps/marketing/src/styles/variants/testimonials.css +++ b/apps/marketing/src/styles/variants/testimonials.css @@ -155,3 +155,17 @@ width: calc(50% - 6px); } } + +@media (max-width: 719.98px) { + .testi { + /* No edge fade on phones: it eats the first card's left edge. */ + -webkit-mask-image: none; + mask-image: none; + } + .testi__card { + width: 240px; + } + .testi__text { + -webkit-line-clamp: 5; + } +} From 13dfce13c34afff1f699849d41d6d6956d3601b9 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Tue, 15 Sep 2026 19:59:19 -0700 Subject: [PATCH 2/3] marketing: centre the column when the rail is a top bar Co-Authored-By: Claude Fable 5.1 --- apps/marketing/src/styles/variants/doc.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/marketing/src/styles/variants/doc.css b/apps/marketing/src/styles/variants/doc.css index 1a745bcbf..37a3ddeb5 100644 --- a/apps/marketing/src/styles/variants/doc.css +++ b/apps/marketing/src/styles/variants/doc.css @@ -1,6 +1,8 @@ /* Document-style homepage body. Measured prose, hairline sections. */ .doc { max-width: 720px; + /* Without the rail there is nothing to align to, so the column centres. */ + margin-inline: auto; padding: 4rem 1.5rem 6rem; overflow-x: clip; } @@ -13,6 +15,7 @@ /* Fill the content column; the frame around rail + content is centred. */ .doc { max-width: none; + margin-inline: 0; padding-inline: 0; } .doc__intro, From 4070b8943c1903672d8d0aae9fa860203f4c9183 Mon Sep 17 00:00:00 2001 From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com> Date: Tue, 15 Sep 2026 20:00:50 -0700 Subject: [PATCH 3/3] marketing: centre the intro below the rail breakpoint Co-Authored-By: Claude Fable 5.1 --- apps/marketing/src/styles/variants/doc.css | 27 ++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/apps/marketing/src/styles/variants/doc.css b/apps/marketing/src/styles/variants/doc.css index 37a3ddeb5..25bbe3a63 100644 --- a/apps/marketing/src/styles/variants/doc.css +++ b/apps/marketing/src/styles/variants/doc.css @@ -922,3 +922,30 @@ a.doc__term-v:hover { padding: 1rem; } } + +/* Below the rail breakpoint the intro is centred, not left-ragged. */ +@media (max-width: 1023.98px) { + .doc__intro { + text-align: center; + } + .doc__steps { + justify-content: center; + } + .doc__steps li { + display: flex; + justify-content: center; + gap: 0.6rem; + } + .doc__tabs { + margin-inline: auto; + } + .doc__tabpanes p { + margin-inline: auto; + } + .doc__actions { + justify-content: center; + } + .doc__pop-panel { + text-align: left; + } +}