diff --git a/web/app/flows/flows.module.css b/web/app/flows/flows.module.css index 9a91aa5b..8947f0dc 100644 --- a/web/app/flows/flows.module.css +++ b/web/app/flows/flows.module.css @@ -1074,15 +1074,31 @@ @media (max-width: 680px) { .main { + --investor-strip-padding-top: 40px; padding-inline: 1rem; } .hero { gap: 2rem; + padding-bottom: 0; + } + + .heroCopy { + gap: 14px; + } + + .heroCopy .ctaRow { + gap: 10px; + margin-top: 14px; } .hero h1 { - font-size: clamp(2.15rem, 7.2vw, 3.1rem); + font-size: clamp(2.75rem, 12vw, 4rem); + } + + .heroLead { + font-size: 0.95rem; + line-height: 1.55; } .headlineLine { diff --git a/web/app/landing.module.css b/web/app/landing.module.css index 8e8f46e9..eeadb395 100644 --- a/web/app/landing.module.css +++ b/web/app/landing.module.css @@ -7822,9 +7822,11 @@ line-height: 1.08; } - /* Phones: the same architecture, one step smaller. The headline is four - words on four lines at this width, so the column tightens and the band - comes up to meet it. */ + .heroSection { + --investor-strip-padding-top: 2.5rem; + } + + /* Give the mobile headline more emphasis while keeping the copy compact. */ .heroCenter { padding: 34px 24px 0; } @@ -7834,12 +7836,14 @@ } .heroCenterColumn .heroCenterHeadline { - font-size: clamp(2.3rem, 10.2vw, 3.5rem); + font-size: clamp(2.75rem, 12vw, 4rem); max-width: none; } .heroCenterColumn .heroCenterSubtitle { max-width: 40ch; + font-size: 0.95rem; + line-height: 1.55; } .heroCenterCtas { @@ -7847,6 +7851,7 @@ flex-direction: column; align-items: stretch; gap: 10px; + margin-top: 10px; } .heroMarquee { diff --git a/web/components/InvestorStrip.tsx b/web/components/InvestorStrip.tsx index ba9f2ff3..6a34d62e 100644 --- a/web/components/InvestorStrip.tsx +++ b/web/components/InvestorStrip.tsx @@ -2,23 +2,38 @@ import Image from 'next/image'; import s from './investor-strip.module.css'; export function InvestorStrip() { + const logos = [ + Hustle Fund, + Active Capital, + + + , + Cortical Ventures, + + + + , + ]; + return (

Backed by

-
- Hustle Fund - Active Capital - - - - Cortical Ventures - - - - +
{logos}
+
+ {[2, 4, 1, 3, 0].map((start, index) => ( + + ))}
); diff --git a/web/components/investor-strip.module.css b/web/components/investor-strip.module.css index 90606f4b..83e51f54 100644 --- a/web/components/investor-strip.module.css +++ b/web/components/investor-strip.module.css @@ -8,7 +8,7 @@ } .backers > p { - margin: 0 0 1.75rem; + margin: 0 0 0.75rem; color: #a8b8c8; font-size: 0.75rem; font-weight: 500; @@ -16,6 +16,8 @@ text-transform: uppercase; } +.mobileInvestors { display: none; } + .investorGroup { display: flex; flex-wrap: wrap; @@ -47,9 +49,28 @@ @media (max-width: 680px) { .backers { padding-bottom: 3rem; } .investorGroup { gap: 1.5rem 1.25rem; } + .desktopInvestors { display: none; } + .mobileInvestors { display: grid; min-height: 32px; } + .investorPair { + grid-area: 1 / 1; + flex-wrap: nowrap; + opacity: 0; + animation: investorFade 25s ease-in-out infinite; + } + .investorPair > * { flex-shrink: 0; } .investorHustle { width: 125px; } .investorActive { width: 122px; } .investorCortical { width: 130px; } .investorYc strong { font-size: 15px; } .investorYonder strong { font-size: 0.9rem; } } + +@keyframes investorFade { + 0%, 16%, 100% { opacity: 1; } + 20%, 96% { opacity: 0; } +} + +@media (max-width: 680px) and (prefers-reduced-motion: reduce) { + .mobileInvestors { display: none; } + .desktopInvestors { display: flex; } +}