Skip to content

Commit c641b8d

Browse files
RhysSullivanclaude
RhysSullivan
and
claude
authored
Marketing: step spacing fix and mobile layout (#2017)
* marketing: keep spaces around hover words in production; mobile layout Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * marketing: centre the column when the rail is a top bar Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * marketing: centre the intro below the rail breakpoint Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
1 parent 71e55b0 commit c641b8d

5 files changed

Lines changed: 193 additions & 29 deletions

File tree

‎apps/marketing/src/components/variants/doc-body.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const { gh } = Astro.props;
4343
<li>
4444
<span class="doc__num">01</span>
4545
<span>
46-
Connect
46+
Connect{" "}
4747
<span class="doc__pop" tabindex="0">
4848
<span class="doc__pop-word">everything</span>
4949
<span class="doc__pop-panel" aria-hidden="true">
@@ -53,13 +53,13 @@ const { gh } = Astro.props;
5353
<span class="doc__pop-pill" style={`--i:${toolLogos.length}`}>any OpenAPI, GraphQL, or MCP</span>
5454
</span>
5555
</span>
56-
to Executor.
56+
{" "}to Executor.
5757
</span>
5858
</li>
5959
<li>
6060
<span class="doc__num">02</span>
6161
<span>
62-
Give
62+
Give{" "}
6363
<span class="doc__pop" tabindex="0">
6464
<span class="doc__pop-word">your agent</span>
6565
<span class="doc__pop-panel" aria-hidden="true">
@@ -69,12 +69,12 @@ const { gh } = Astro.props;
6969
<span class="doc__pop-pill" style={`--i:${agentLogos.length}`}>any MCP client</span>
7070
</span>
7171
</span>
72-
the Executor tool.
72+
{" "}the Executor tool.
7373
</span>
7474
</li>
7575
<li>
7676
<span class="doc__num">03</span>
77-
<span>That's it. <a href="#install">Get started.</a></span>
77+
<span>That's it.{" "}<a href="#install">Get started.</a></span>
7878
</li>
7979
</ol>
8080
<p class="doc__subhead">One MCP. All your accounts.</p>

‎apps/marketing/src/styles/global.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1742,3 +1742,13 @@ main:has(.page > .page__rail) > .pattern-bg,
17421742
main:has(.page > .page__rail) > .pattern-bg + div {
17431743
display: none;
17441744
}
1745+
1746+
/* Below the desktop breakpoint the rail is a top bar; keep it in view. */
1747+
@media (max-width: 1023.98px) {
1748+
.page__rail {
1749+
position: sticky;
1750+
top: 0;
1751+
z-index: 30;
1752+
background: var(--color-surface);
1753+
}
1754+
}

‎apps/marketing/src/styles/variants/doc.css‎

Lines changed: 132 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
/* Document-style homepage body. Measured prose, hairline sections. */
22
.doc {
33
max-width: 720px;
4+
/* Without the rail there is nothing to align to, so the column centres. */
5+
margin-inline: auto;
46
padding: 4rem 1.5rem 6rem;
7+
overflow-x: clip;
58
}
69
@media (min-width: 640px) {
710
.doc {
@@ -12,6 +15,7 @@
1215
/* Fill the content column; the frame around rail + content is centred. */
1316
.doc {
1417
max-width: none;
18+
margin-inline: 0;
1519
padding-inline: 0;
1620
}
1721
.doc__intro,
@@ -613,16 +617,20 @@ a.doc__term-v:hover {
613617
0 12px 32px -12px rgba(13, 13, 16, 0.18);
614618
opacity: 0;
615619
pointer-events: none;
620+
visibility: hidden;
616621
transform: translateY(-4px);
617622
transition:
618623
opacity 0.15s ease,
619-
transform 0.15s ease;
624+
transform 0.15s ease,
625+
visibility 0s linear 0.15s;
620626
}
621627
.doc__pop:hover .doc__pop-panel,
622628
.doc__pop:focus-within .doc__pop-panel {
623629
opacity: 1;
624630
pointer-events: auto;
631+
visibility: visible;
625632
transform: translateY(0);
633+
transition-delay: 0s;
626634
}
627635
.doc__pop-tile,
628636
.doc__pop-pill {
@@ -818,3 +826,126 @@ a.doc__term-v:hover {
818826
.doc__list--open li:last-child {
819827
border-bottom: 0;
820828
}
829+
830+
/* ── Phones ── */
831+
@media (max-width: 719.98px) {
832+
.doc {
833+
padding: 2.25rem 1.25rem 4rem;
834+
}
835+
.doc__title {
836+
font-size: 1.75rem;
837+
}
838+
.doc__steps {
839+
font-size: 16px;
840+
}
841+
.doc__steps li {
842+
grid-template-columns: 1.75rem 1fr;
843+
}
844+
.doc__subhead {
845+
font-size: 16px;
846+
}
847+
/* Hover reveals become tap reveals. The word can sit anywhere on the line,
848+
so the panel is not anchored to it; it is fixed across the viewport width
849+
just under the top bar. */
850+
.doc__pop {
851+
position: static;
852+
}
853+
.doc__pop-panel {
854+
position: fixed;
855+
left: 1rem;
856+
right: 1rem;
857+
top: 64px;
858+
width: auto;
859+
max-width: none;
860+
}
861+
.doc__tabs {
862+
display: flex;
863+
width: 100%;
864+
}
865+
.doc__tabs button {
866+
flex: 1;
867+
padding: 0.45rem 0.4rem;
868+
font-size: 13px;
869+
white-space: nowrap;
870+
}
871+
.doc__tabpanes p {
872+
min-height: 0;
873+
}
874+
.doc__actions {
875+
flex-direction: column;
876+
align-items: stretch;
877+
}
878+
.doc__actions > .btn-primary,
879+
.doc__actions > .btn-secondary,
880+
.doc__actions > .doc__cmd,
881+
.doc__actions > .doc__dl {
882+
width: 100%;
883+
justify-content: center;
884+
text-align: center;
885+
}
886+
.doc__dl {
887+
display: flex;
888+
flex-direction: column;
889+
align-items: stretch;
890+
}
891+
.doc__dl > a {
892+
width: 100%;
893+
justify-content: center;
894+
}
895+
.doc__dl-other {
896+
align-self: center;
897+
}
898+
.doc__dl .download-other-list {
899+
left: 50%;
900+
transform: translateX(-50%);
901+
}
902+
.doc__section {
903+
margin-top: 2.5rem;
904+
padding-top: 1.75rem;
905+
}
906+
.doc__h {
907+
font-size: 20px;
908+
}
909+
.doc__ways {
910+
grid-template-columns: 1fr;
911+
}
912+
.doc__way-a .btn-primary,
913+
.doc__way-a .btn-secondary {
914+
width: 100%;
915+
justify-content: center;
916+
text-align: center;
917+
}
918+
.doc__way-a .doc__dl {
919+
width: 100%;
920+
}
921+
.doc__fig--hero .surface-card {
922+
padding: 1rem;
923+
}
924+
}
925+
926+
/* Below the rail breakpoint the intro is centred, not left-ragged. */
927+
@media (max-width: 1023.98px) {
928+
.doc__intro {
929+
text-align: center;
930+
}
931+
.doc__steps {
932+
justify-content: center;
933+
}
934+
.doc__steps li {
935+
display: flex;
936+
justify-content: center;
937+
gap: 0.6rem;
938+
}
939+
.doc__tabs {
940+
margin-inline: auto;
941+
}
942+
.doc__tabpanes p {
943+
margin-inline: auto;
944+
}
945+
.doc__actions {
946+
justify-content: center;
947+
}
948+
.doc__pop-panel {
949+
text-align: left;
950+
}
951+
}

‎apps/marketing/src/styles/variants/rail.css‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -290,60 +290,69 @@
290290
color: var(--color-ink-2);
291291
}
292292

293-
/* ═══ Mobile: every rail collapses to one horizontal top bar ═══ */
293+
/* ═══ Mobile: the rail becomes a slim top bar ═══
294+
Brand on the left, three links and the Get started button on the right.
295+
Everything else in the rail (index, star pill, YC badge, contact) is hidden;
296+
the page body carries it. */
294297
@media (max-width: 1023.98px) {
295298
.rail {
296299
flex-direction: row;
297300
align-items: center;
298301
justify-content: space-between;
299-
gap: 16px;
302+
gap: 12px;
300303
height: 56px;
301-
padding: 0 24px;
304+
padding: 0 16px;
302305
border-right: 0;
303306
border-bottom: 1px solid var(--color-rule);
304307
}
308+
.rail .rail__brand {
309+
margin: 0;
310+
}
305311
.rail .rail__toc,
306312
.rail .rail__toc-label,
307313
.rail .rail__divider,
308314
.rail .rail__foot,
309315
.rail .rail__contact,
310-
.rail .rail__secondary {
316+
.rail .rail__secondary,
317+
.rail .gh-star,
318+
.rail .rail__box--yc {
311319
display: none;
312320
}
313-
.rail .rail__nav {
314-
flex-direction: row;
315-
align-items: center;
316-
gap: 20px;
317-
}
318-
.rail .rail__cta {
321+
.rail .rail__stack {
322+
flex: 0 1 auto;
319323
flex-direction: row;
320324
align-items: center;
321-
gap: 12px;
322-
margin-top: 0;
325+
gap: 16px;
323326
}
324-
.rail .rail__stack {
325-
flex: 0 1 auto;
327+
.rail .rail__nav {
326328
flex-direction: row;
327329
align-items: center;
328-
justify-content: flex-end;
329-
gap: 20px;
330+
gap: 14px;
330331
}
331332
.rail .rail__link {
332-
padding: 0 0 0 0;
333+
padding: 0;
333334
font-size: 14px;
335+
white-space: nowrap;
334336
}
335337
.rail .rail__link::before {
336338
display: none;
337339
}
338-
/* The star pill and the mono count are the first things to go when the bar
339-
gets tight; the links themselves survive longest. */
340-
.rail .gh-star {
341-
display: none;
340+
.rail .rail__cta {
341+
display: block;
342+
margin-top: 0;
343+
}
344+
.rail--b .rail__box--primary {
345+
width: auto;
346+
height: 32px;
347+
padding: 0 12px;
348+
font-size: 13px;
342349
}
343350
}
344-
345-
@media (max-width: 719.98px) {
351+
@media (max-width: 479.98px) {
346352
.rail .rail__nav .rail__link:not(.rail__link--keep) {
347353
display: none;
348354
}
355+
.rail .rail__nav {
356+
gap: 12px;
357+
}
349358
}

‎apps/marketing/src/styles/variants/testimonials.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,17 @@
155155
width: calc(50% - 6px);
156156
}
157157
}
158+
159+
@media (max-width: 719.98px) {
160+
.testi {
161+
/* No edge fade on phones: it eats the first card's left edge. */
162+
-webkit-mask-image: none;
163+
mask-image: none;
164+
}
165+
.testi__card {
166+
width: 240px;
167+
}
168+
.testi__text {
169+
-webkit-line-clamp: 5;
170+
}
171+
}

0 commit comments

Comments
 (0)