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;
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..25bbe3a63 100644 --- a/apps/marketing/src/styles/variants/doc.css +++ b/apps/marketing/src/styles/variants/doc.css @@ -1,7 +1,10 @@ /* 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; } @media (min-width: 640px) { .doc { @@ -12,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, @@ -613,16 +617,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 +826,126 @@ 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; + } +} + +/* 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; + } +} 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; + } +}