chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(landing): redesign hero + editorial layout with Atkinson Hyperlegible
All checks were successful
Mirror to GitHub / mirror (push) Successful in 7s
Details
CI / frontend (pull_request) Successful in 7m6s
Details
CI / e2e (pull_request) Successful in 10m32s
Details
CI / backend (pull_request) Successful in 11m54s
Details

Browse Source 
Recover and commit the landing-page redesign that had been sitting
uncommitted in the working tree: refreshed dark palette (adjusted
--lp-bg-alt, electric-blue accent), Atkinson Hyperlegible Next display
+ body type, and editorial hero/section layout in LandingPage.tsx, with
the matching font preload in index.html.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-05-28 14:48:18 -04:00
parent b1ee46656e
commit 60b1e654f8
3 changed files with 434 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -10,7 +10,7 @@
<!-- Google Fonts --> <!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Atkinson+Hyperlegible+Mono:wght@400;500&family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- PWA Icons --> <!-- PWA Icons -->
<link rel="apple-touch-icon" href="/icons/app-icon-gradient.svg" /> <link rel="apple-touch-icon" href="/icons/app-icon-gradient.svg" />

170
frontend/src/pages/LandingPage.tsx
View File

@@ -164,46 +164,74 @@ export default function LandingPage() {
</div> </div>
</section> </section>
{/* Problem — asymmetric: headline left, cards right */} {/* Problem — editorial list, no cards */}
<section id="problem" className="landing-section landing-section-alt landing-reveal"> <section id="problem" className="landing-section landing-section-alt landing-reveal landing-section-tight">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-problem-layout"> <div className="landing-problem-layout">
<div className="landing-problem-headline"> <div className="landing-problem-headline">
<div className="landing-section-label">The Problem</div> <div className="landing-section-label">The Problem</div>
<h2>Documentation is broken.<br />Everyone knows it.</h2> <h2>Documentation is broken.<br />Everyone knows it.</h2>
<p>Engineers don&apos;t want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch &mdash; every time.</p> <p>Engineers don&apos;t want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch, every time.</p>
</div>
<div className="landing-problem-grid">
<ProblemCard icon="&#9201;" color="red" title="15&ndash;25 min lost per ticket" description="More time documenting than resolving. After a complex issue, writing notes is the last thing anyone does." />
<ProblemCard icon="&#128203;" color="amber" title="Vague, useless notes" description={`"Fixed Outlook" tells no one anything. Notes under pressure are always too vague to help next time.`} />
<ProblemCard icon="&#128260;" color="slate" title="Knowledge walks out the door" description="When a senior engineer leaves, years of tribal knowledge vanish overnight." />
<ProblemCard icon="&#129504;" color="violet" title="Context switching kills speed" description="Jumping between the issue, docs, PSA tickets, and knowledge bases fragments focus." />
</div> </div>
<ol className="landing-problem-list">
<li className="landing-problem-item">
<span className="landing-problem-num">01</span>
<div className="landing-problem-body">
<h3>15&ndash;25 min lost per ticket</h3>
<p>More time documenting than resolving. After a complex issue, writing notes is the last thing anyone does.</p>
</div>
</li>
<li className="landing-problem-item">
<span className="landing-problem-num">02</span>
<div className="landing-problem-body">
<h3>Vague, useless notes</h3>
<p>&ldquo;Fixed Outlook&rdquo; tells no one anything. Notes under pressure are always too vague to help next time.</p>
</div>
</li>
<li className="landing-problem-item">
<span className="landing-problem-num">03</span>
<div className="landing-problem-body">
<h3>Knowledge walks out the door</h3>
<p>When a senior engineer leaves, years of tribal knowledge vanish overnight.</p>
</div>
</li>
<li className="landing-problem-item">
<span className="landing-problem-num">04</span>
<div className="landing-problem-body">
<h3>Context switching kills speed</h3>
<p>Jumping between the issue, docs, PSA tickets, and knowledge bases fragments focus.</p>
</div>
</li>
</ol>
</div> </div>
</div> </div>
</section> </section>
{/* Equation */} {/* Equation — typographic moment */}
<div className="landing-equation-section landing-reveal"> <div className="landing-equation-section landing-reveal">
<div className="landing-equation-inner"> <div className="landing-equation-inner">
<div className="landing-section-label">The Answer</div> <div className="landing-section-label">The Answer</div>
<div className="landing-brand-equation"> <div className="landing-brand-equation" aria-label="Resolution plus documentation minus time equals ResolutionFlow">
<span className="landing-eq-item">Resolution</span> <div className="landing-eq-lhs">
<span className="landing-eq-operator">+</span> <span className="landing-eq-item">Resolution</span>
<span className="landing-eq-item">Documentation</span> <span className="landing-eq-operator">+</span>
<span className="landing-eq-operator">&minus;</span> <span className="landing-eq-item">Documentation</span>
<span className="landing-eq-item">Time</span> <span className="landing-eq-operator">&minus;</span>
<span className="landing-eq-operator">=</span> <span className="landing-eq-item">Time</span>
<span className="landing-eq-result">ResolutionFlow</span> </div>
<div className="landing-eq-equals">
<span className="landing-eq-operator-equals">=</span>
</div>
<div className="landing-eq-result">ResolutionFlow</div>
</div> </div>
<p className="landing-equation-desc"> <p className="landing-equation-desc">
What if documentation was a <em>byproduct</em> of solving the issue &mdash; not a separate task? What if documentation was a <em>byproduct</em> of solving the issue, not a separate task?
</p> </p>
</div> </div>
</div> </div>
{/* How It Works — zigzag */} {/* How It Works — zigzag */}
<section id="how-it-works" className="landing-section landing-reveal"> <section id="how-it-works" className="landing-section landing-reveal landing-section-tight">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-section-label">How It Works</div> <div className="landing-section-label">How It Works</div>
<h2 className="landing-section-title">Three steps. Zero note-writing.</h2> <h2 className="landing-section-title">Three steps. Zero note-writing.</h2>
@@ -268,54 +296,47 @@ export default function LandingPage() {
</div> </div>
</section> </section>
{/* Features */} {/* Features — editorial spec list */}
<section id="features" className="landing-section landing-section-alt landing-reveal"> <section id="features" className="landing-section landing-section-alt landing-reveal landing-section-generous">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-section-label">Features</div> <div className="landing-section-label">Features</div>
<h2 className="landing-section-title">Everything you need to troubleshoot faster.</h2> <h2 className="landing-section-title">Everything you need to troubleshoot faster.</h2>
<div className="landing-feature-highlight"> <div className="landing-feature-highlight">
<div className="landing-feature-highlight-icon"> <div className="landing-feature-highlight-marker" aria-hidden="true">FP</div>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /></svg>
</div>
<div className="landing-feature-highlight-content"> <div className="landing-feature-highlight-content">
<h3>FlowPilot &mdash; Your AI Copilot</h3> <h3>FlowPilot, your AI copilot</h3>
<p>Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself &mdash; as a byproduct of solving the problem.</p> <p>Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself, as a byproduct of solving the problem.</p>
</div> </div>
</div> </div>
<div className="landing-features-grid"> <dl className="landing-feature-spec">
<FeatureCard <div className="landing-feature-row">
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="9" y1="3" x2="9" y2="21" /></svg>} <dt>Guided Flows</dt>
title="Guided Flows" <dd>Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency.</dd>
description="Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency." </div>
/> <div className="landing-feature-row">
<FeatureCard <dt>Zero Empty Tickets</dt>
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /></svg>} <dd>Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures.</dd>
title="Zero Empty Tickets" </div>
description="Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures." <div className="landing-feature-row">
/> <dt>Team Knowledge</dt>
<FeatureCard <dd>Solutions are saved and surfaced when the next engineer hits a similar issue.</dd>
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>} </div>
title="Team Knowledge" <div className="landing-feature-row">
description="Solutions are saved and surfaced when the next engineer hits a similar issue." <dt>Session Analytics</dt>
/> <dd>Track resolution times, identify recurring issues, and measure team performance.</dd>
<FeatureCard </div>
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>} <div className="landing-feature-row">
title="Session Analytics" <dt>PSA Integration</dt>
description="Track resolution times, identify recurring issues, and measure team performance." <dd>Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets.</dd>
/> </div>
<FeatureCard </dl>
icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>}
title="PSA Integration"
description="Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets."
/>
</div>
</div> </div>
</section> </section>
{/* Pricing */} {/* Pricing */}
<section id="pricing" className="landing-section landing-reveal"> <section id="pricing" className="landing-section landing-reveal landing-section-generous">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-section-label">Pricing</div> <div className="landing-section-label">Pricing</div>
<h2 className="landing-section-title">Simple pricing. No surprises.</h2> <h2 className="landing-section-title">Simple pricing. No surprises.</h2>
@@ -364,7 +385,7 @@ export default function LandingPage() {
</section> </section>
{/* FAQ */} {/* FAQ */}
<section id="faq" className="landing-section landing-section-alt landing-reveal"> <section id="faq" className="landing-section landing-section-alt landing-reveal landing-section-tight">
<div className="landing-section-inner"> <div className="landing-section-inner">
<div className="landing-section-label">FAQ</div> <div className="landing-section-label">FAQ</div>
<h2 className="landing-section-title">Common questions</h2> <h2 className="landing-section-title">Common questions</h2>
@@ -399,15 +420,16 @@ export default function LandingPage() {
</div> </div>
</div> </div>
{/* CTA */} {/* CTA — drenched */}
<section className="landing-cta-section landing-reveal"> <section className="landing-cta-section landing-cta-drench landing-reveal">
<div className="landing-cta-inner"> <div className="landing-cta-inner">
<h2>Ready to stop writing ticket notes?</h2> <div className="landing-cta-eyebrow">Stop writing ticket notes</div>
<p>Get early access. Troubleshoot your next ticket with FlowPilot.</p> <h2>Troubleshoot your next ticket with FlowPilot.</h2>
<p>Get early access. Free to start, no credit card.</p>
<div className="landing-cta-actions"> <div className="landing-cta-actions">
<Link to="/register?from=beta" className="landing-btn-hero-primary">Get started</Link> <Link to="/register?from=beta" className="landing-btn-cta-invert">Get started</Link>
<a href="#how-it-works" className="landing-btn-cta-ghost">See how it works</a>
</div> </div>
<p className="landing-cta-fine-print">Free to start. No credit card required.</p>
</div> </div>
</section> </section>
@@ -421,30 +443,6 @@ export default function LandingPage() {
/* ---- Sub-components ---- */ /* ---- Sub-components ---- */
function ProblemCard({ icon, color, title, description }: {
icon: string; color: string; title: string; description: string
}) {
return (
<div className="landing-problem-card">
<div className={`landing-problem-icon ${color}`}>{icon}</div>
<h3>{title}</h3>
<p>{description}</p>
</div>
)
}
function FeatureCard({ icon, title, description }: {
icon: React.ReactNode; title: string; description: string
}) {
return (
<div className="landing-feature-card">
<div className="landing-feature-icon">{icon}</div>
<h3>{title}</h3>
<p>{description}</p>
</div>
)
}
function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured, plan }: { function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured, plan }: {
name: string; target: string; amount: string; period?: string; note: string name: string; target: string; amount: string; period?: string; note: string
features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean; plan: string features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean; plan: string

561
frontend/src/styles/landing.css
View File

@@ -7,7 +7,7 @@
/* ---- LANDING COLOR PALETTE ---- */ /* ---- LANDING COLOR PALETTE ---- */
.landing-page { .landing-page {
--lp-bg: #14161d; --lp-bg: #14161d;
--lp-bg-alt: #181a22; --lp-bg-alt: #1c1f2a;
--lp-card: #1e2028; --lp-card: #1e2028;
--lp-elevated: #262830; --lp-elevated: #262830;
--lp-border: #2a2e3a; --lp-border: #2a2e3a;
@@ -23,14 +23,24 @@
--lp-success: #34d399; --lp-success: #34d399;
--lp-danger: #f87171; --lp-danger: #f87171;
--lp-warning: #fbbf24; --lp-warning: #fbbf24;
/* Typeset: a single hyperlegibility-engineered family across the page.
Atkinson Hyperlegible Next (Braille Institute, 2024) — designed for
low-vision readers. Picked here because MSP engineers read this page
mid-ticket, under pressure, often glancing. Hyperlegibility IS the
brand value, not decoration. Mono sibling pairs naturally for
timestamps and ticket IDs. */
--lp-font-display: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
--lp-font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
--lp-font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
} }
/* ---- BASE ---- */ /* ---- BASE ---- */
.landing-page { .landing-page {
font-family: 'IBM Plex Sans', sans-serif; font-family: var(--lp-font-body);
background: var(--lp-bg); background: var(--lp-bg);
color: var(--lp-text-body); color: var(--lp-text-body);
line-height: 1.6; line-height: 1.55;
overflow-x: hidden; overflow-x: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100vh; min-height: 100vh;
@@ -110,7 +120,7 @@
} }
.landing-nav-wordmark { .landing-nav-wordmark {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
@@ -189,6 +199,14 @@
padding: 5rem 2rem; padding: 5rem 2rem;
} }
.landing-section-tight {
padding: 4rem 2rem 5rem;
}
.landing-section-generous {
padding: 7rem 2rem 6rem;
}
.landing-section-alt { .landing-section-alt {
background: var(--lp-bg-alt); background: var(--lp-bg-alt);
} }
@@ -199,24 +217,36 @@
} }
.landing-section-label { .landing-section-label {
font-family: 'IBM Plex Sans', sans-serif; display: flex;
font-size: 0.7rem; align-items: center;
font-weight: 600; gap: 0.9rem;
color: var(--lp-accent-text); font-family: var(--lp-font-display);
letter-spacing: 0.14em; font-size: 0.9rem;
font-weight: 700;
color: var(--lp-accent);
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.75rem; margin-bottom: 1.25rem;
}
.landing-section-label::before {
content: '';
width: 40px;
height: 2px;
background: var(--lp-accent);
flex-shrink: 0;
} }
.landing-section-title { .landing-section-title {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: clamp(2rem, 4vw, 2.75rem); font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 800; font-weight: 800;
color: var(--lp-text-heading); color: var(--lp-text-heading);
letter-spacing: -0.03em; letter-spacing: -0.035em;
line-height: 1.15; line-height: 1.05;
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
max-width: 22ch;
} }
.landing-section-desc { .landing-section-desc {
@@ -251,8 +281,8 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
background: background:
linear-gradient(to right, #14161d 22%, rgba(20, 22, 29, 0.80) 38%, rgba(20, 22, 29, 0.20) 58%, transparent 78%), linear-gradient(to right, #14161d 0%, #14161d 38%, rgba(20, 22, 29, 0.92) 52%, rgba(20, 22, 29, 0.35) 72%, transparent 92%),
linear-gradient(to top, #14161d 0%, rgba(20, 22, 29, 0) 16%); linear-gradient(to top, #14161d 0%, rgba(20, 22, 29, 0.4) 24%, rgba(20, 22, 29, 0) 48%);
z-index: 1; z-index: 1;
} }
@@ -300,7 +330,7 @@
} }
.landing-hero h1 { .landing-hero h1 {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: clamp(2.5rem, 5vw, 3.75rem); font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 800; font-weight: 800;
line-height: 1.08; line-height: 1.08;
@@ -447,7 +477,7 @@
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
font-family: 'IBM Plex Sans', sans-serif; font-family: var(--lp-font-body);
} }
.tc-status { .tc-status {
@@ -531,7 +561,7 @@
.tc-time { .tc-time {
font-size: 0.55rem; font-size: 0.55rem;
color: var(--lp-text-dim); color: var(--lp-text-dim);
font-family: 'JetBrains Mono', monospace; font-family: var(--lp-font-mono);
flex-shrink: 0; flex-shrink: 0;
min-width: 28px; min-width: 28px;
} }
@@ -601,7 +631,7 @@
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
font-size: 0.65rem; font-size: 0.65rem;
font-family: 'IBM Plex Sans', sans-serif; font-family: var(--lp-font-body);
padding: 6px 10px; padding: 6px 10px;
border-radius: 6px; border-radius: 6px;
} }
@@ -641,7 +671,7 @@
} }
.landing-mock-chat-line code { .landing-mock-chat-line code {
font-family: 'JetBrains Mono', monospace; font-family: var(--lp-font-mono);
font-size: 0.6rem; font-size: 0.6rem;
padding: 1px 5px; padding: 1px 5px;
border-radius: 3px; border-radius: 3px;
@@ -708,142 +738,172 @@
color: var(--lp-success); color: var(--lp-success);
} }
/* ---- PROBLEM SECTION (asymmetric) ---- */ /* ---- PROBLEM SECTION (editorial, no cards) ---- */
.landing-problem-layout { .landing-problem-layout {
display: grid; display: grid;
grid-template-columns: 2fr 3fr; grid-template-columns: 5fr 7fr;
gap: 3rem; gap: clamp(2.5rem, 6vw, 6rem);
align-items: start; align-items: start;
} }
.landing-problem-headline {
position: sticky;
top: 6rem;
}
.landing-problem-headline h2 { .landing-problem-headline h2 {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800; font-weight: 800;
color: var(--lp-text-heading); color: var(--lp-text-heading);
letter-spacing: -0.03em; letter-spacing: -0.035em;
line-height: 1.15; line-height: 1.05;
margin: 0 0 1rem; margin: 0 0 1.25rem;
} }
.landing-problem-headline > p { .landing-problem-headline > p {
font-size: 1rem; font-size: 1.05rem;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
line-height: 1.7; line-height: 1.65;
max-width: 36ch;
} }
.landing-problem-grid { .landing-problem-list {
list-style: none;
margin: 0;
padding: 0;
}
.landing-problem-item {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 4.5rem 1fr;
gap: 1rem; column-gap: 1.25rem;
padding: 2rem 0;
border-top: 1px solid var(--lp-border);
} }
.landing-problem-card { .landing-problem-item:last-child {
padding: 1.25rem; border-bottom: 1px solid var(--lp-border);
border-radius: 8px;
background: var(--lp-card);
border: 1px solid var(--lp-border);
transition: border-color 0.3s;
} }
.landing-problem-card:hover { .landing-problem-num {
border-color: var(--lp-border-hover); font-family: var(--lp-font-display);
font-size: 0.85rem;
font-weight: 700;
color: var(--lp-accent);
letter-spacing: 0.08em;
padding-top: 0.65rem;
} }
.landing-problem-icon { .landing-problem-body h3 {
width: 36px; font-family: var(--lp-font-display);
height: 36px; font-size: clamp(1.35rem, 2.5vw, 1.85rem);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.landing-problem-icon.red {
background: rgba(248, 113, 113, 0.1);
color: var(--lp-danger);
}
.landing-problem-icon.amber {
background: rgba(251, 191, 36, 0.1);
color: var(--lp-warning);
}
.landing-problem-icon.slate {
background: rgba(145, 152, 168, 0.1);
color: var(--lp-text-secondary);
}
.landing-problem-icon.violet {
background: rgba(139, 92, 246, 0.1);
color: #a78bfa;
}
.landing-problem-card h3 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.95rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
margin-bottom: 0.4rem; letter-spacing: -0.025em;
letter-spacing: -0.01em; line-height: 1.15;
margin: 0 0 0.6rem;
} }
.landing-problem-card p { .landing-problem-body p {
font-size: 0.8rem; font-size: 0.95rem;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
line-height: 1.6; line-height: 1.65;
margin: 0; margin: 0;
max-width: 52ch;
} }
/* ---- EQUATION ---- */ /* ---- EQUATION (hero-scale typographic moment) ---- */
.landing-equation-section { .landing-equation-section {
text-align: center; text-align: left;
padding: 4rem 2rem; padding: 9rem 2rem 8rem;
position: relative;
overflow: hidden;
}
.landing-equation-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 80% at 78% 30%, rgba(96, 165, 250, 0.10), transparent 70%);
pointer-events: none;
z-index: 0;
} }
.landing-equation-inner { .landing-equation-inner {
max-width: 900px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
position: relative;
z-index: 1;
} }
.landing-brand-equation { .landing-brand-equation {
font-family: var(--lp-font-display);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.95;
margin: 1.5rem 0 2rem;
}
.landing-eq-lhs {
display: flex; display: flex;
align-items: center; align-items: baseline;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'Bricolage Grotesque', sans-serif; gap: 0.5em;
font-size: clamp(1.25rem, 3vw, 2.25rem); font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 700; color: var(--lp-text-secondary);
letter-spacing: -0.02em; margin-bottom: 0.4rem;
margin-bottom: 1.5rem;
} }
.landing-eq-item { .landing-eq-item {
padding: 0.4rem 1rem;
border-radius: 8px;
background: var(--lp-card);
border: 1px solid var(--lp-border);
color: var(--lp-text-heading); color: var(--lp-text-heading);
} }
.landing-eq-operator { .landing-eq-operator {
color: var(--lp-accent); color: var(--lp-accent);
font-size: 1.5em; font-weight: 600;
}
.landing-eq-equals {
font-size: clamp(2rem, 5vw, 4rem);
color: var(--lp-accent);
line-height: 1;
margin: 0.1em 0 0.05em;
}
.landing-eq-operator-equals {
display: inline-block;
} }
.landing-eq-result { .landing-eq-result {
color: var(--lp-accent-text); font-size: clamp(2.25rem, 11vw, 9.5rem);
font-weight: 800;
color: var(--lp-text-heading);
letter-spacing: -0.055em;
line-height: 0.92;
display: inline-block;
position: relative;
padding-bottom: 0.05em;
max-width: 100%;
}
.landing-eq-result::after {
content: '';
position: absolute;
left: 0;
right: 14%;
bottom: 0.02em;
height: 0.12em;
background: linear-gradient(to right, var(--lp-accent), rgba(96, 165, 250, 0));
} }
.landing-equation-desc { .landing-equation-desc {
font-size: 1.05rem; font-size: 1.1rem;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
max-width: 480px; max-width: 520px;
margin: 0 auto; margin: 2rem 0 0;
line-height: 1.7; line-height: 1.6;
} }
/* ---- HOW IT WORKS (zigzag) ---- */ /* ---- HOW IT WORKS (zigzag) ---- */
@@ -872,7 +932,7 @@
} }
.landing-zigzag-number { .landing-zigzag-number {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
color: var(--lp-accent); color: var(--lp-accent);
@@ -881,7 +941,7 @@
} }
.landing-zigzag-text h3 { .landing-zigzag-text h3 {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
@@ -907,100 +967,79 @@
background: var(--lp-bg-alt); background: var(--lp-bg-alt);
} }
/* ---- FEATURES ---- */ /* ---- FEATURES (editorial spec list) ---- */
.landing-feature-highlight { .landing-feature-highlight {
display: flex; display: grid;
align-items: flex-start; grid-template-columns: auto 1fr;
gap: 1.5rem; align-items: center;
padding: 2rem; gap: 1.75rem;
border-radius: 8px; padding: 2.25rem 2rem;
background: var(--lp-accent-soft); border-radius: 0;
border: 1px solid rgba(96, 165, 250, 0.15); background: transparent;
border: none;
border-top: 1px solid var(--lp-accent);
border-bottom: 1px solid var(--lp-border);
margin-top: 2.5rem; margin-top: 2.5rem;
margin-bottom: 1.5rem; margin-bottom: 0;
} }
.landing-feature-highlight-icon { .landing-feature-highlight-marker {
width: 52px; font-family: var(--lp-font-display);
height: 52px; font-size: 2.25rem;
border-radius: 8px; font-weight: 800;
background: rgba(96, 165, 250, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--lp-accent); color: var(--lp-accent);
flex-shrink: 0; letter-spacing: -0.04em;
line-height: 1;
padding-right: 1.75rem;
border-right: 1px solid var(--lp-border);
} }
.landing-feature-highlight-content h3 { .landing-feature-highlight-content h3 {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 1.35rem; font-size: clamp(1.35rem, 2.4vw, 1.65rem);
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
letter-spacing: -0.01em; letter-spacing: -0.02em;
margin-bottom: 0.5rem; margin: 0 0 0.4rem;
} }
.landing-feature-highlight-content p { .landing-feature-highlight-content p {
font-size: 0.95rem; font-size: 1rem;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
line-height: 1.65; line-height: 1.65;
margin: 0; margin: 0;
max-width: 68ch;
} }
.landing-features-grid { .landing-feature-spec {
margin: 0;
padding: 0;
}
.landing-feature-row {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: minmax(180px, 24%) 1fr;
gap: 1rem; column-gap: 3rem;
align-items: baseline;
padding: 1.75rem 0;
border-bottom: 1px solid var(--lp-border);
} }
.landing-feature-card { .landing-feature-row dt {
padding: 1.5rem; font-family: var(--lp-font-display);
border-radius: 8px; font-size: clamp(1.15rem, 2vw, 1.5rem);
background: var(--lp-card);
border: 1px solid var(--lp-border);
transition: border-color 0.3s;
}
.landing-feature-card:hover {
border-color: var(--lp-border-hover);
}
.landing-feature-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--lp-accent-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--lp-accent-text);
}
.landing-feature-card h3 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
margin-bottom: 0.4rem; letter-spacing: -0.02em;
letter-spacing: -0.01em; line-height: 1.15;
} }
.landing-feature-card p { .landing-feature-row dd {
font-size: 0.85rem; font-size: 1rem;
color: var(--lp-text-secondary); color: var(--lp-text-secondary);
line-height: 1.6; line-height: 1.65;
margin: 0; margin: 0;
} max-width: 62ch;
/* 5 cards: 3 + 2 bottom row centered */
.landing-features-grid .landing-feature-card:nth-child(4) {
grid-column: 1 / 2;
}
.landing-features-grid .landing-feature-card:nth-child(5) {
grid-column: 2 / 3;
} }
/* ---- PRICING ---- */ /* ---- PRICING ---- */
@@ -1048,7 +1087,7 @@
} }
.landing-pricing-plan-name { .landing-pricing-plan-name {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
color: var(--lp-text-heading); color: var(--lp-text-heading);
@@ -1069,7 +1108,7 @@
} }
.landing-pricing-price .amount { .landing-pricing-price .amount {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 800; font-weight: 800;
color: var(--lp-text-heading); color: var(--lp-text-heading);
@@ -1199,7 +1238,7 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
font-family: 'IBM Plex Sans', sans-serif; font-family: var(--lp-font-body);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--lp-text-heading); color: var(--lp-text-heading);
@@ -1255,7 +1294,7 @@
} }
.landing-founder-section blockquote { .landing-founder-section blockquote {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 500; font-weight: 500;
line-height: 1.6; line-height: 1.6;
@@ -1271,32 +1310,125 @@
padding-left: 1.25rem; padding-left: 1.25rem;
} }
/* ---- CTA ---- */ /* ---- CTA (drenched) ---- */
.landing-cta-section { .landing-cta-section {
text-align: center; padding: 6rem 2rem;
padding: 5rem 2rem;
background: var(--lp-bg-alt); background: var(--lp-bg-alt);
} }
.landing-cta-section.landing-cta-drench {
background: var(--lp-accent);
color: #0a1430;
padding: 7rem 2rem;
position: relative;
overflow: hidden;
}
.landing-cta-section.landing-cta-drench::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
radial-gradient(60% 80% at 0% 100%, rgba(13, 15, 21, 0.18), transparent 60%);
pointer-events: none;
}
.landing-cta-inner { .landing-cta-inner {
max-width: 520px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
position: relative;
z-index: 1;
}
.landing-cta-eyebrow {
display: flex;
align-items: center;
gap: 0.9rem;
font-family: var(--lp-font-display);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0a1430;
margin-bottom: 1.5rem;
}
.landing-cta-eyebrow::before {
content: '';
width: 40px;
height: 2px;
background: #0a1430;
flex-shrink: 0;
opacity: 0.55;
} }
.landing-cta-section h2 { .landing-cta-section h2 {
font-family: 'Bricolage Grotesque', sans-serif; font-family: var(--lp-font-display);
font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 800; font-weight: 800;
color: var(--lp-text-heading); color: #0a1430;
letter-spacing: -0.03em; letter-spacing: -0.04em;
margin-bottom: 0.75rem; line-height: 1.02;
margin: 0 0 1.25rem;
max-width: 22ch;
} }
.landing-cta-section h2 + p { .landing-cta-section h2 + p {
font-size: 1.15rem;
color: #0a1430;
opacity: 0.78;
margin-bottom: 2.5rem;
line-height: 1.55;
max-width: 44ch;
}
.landing-cta-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.landing-btn-cta-invert {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem; font-size: 1rem;
color: var(--lp-text-secondary); font-weight: 600;
margin-bottom: 2rem; color: var(--lp-accent);
line-height: 1.7; text-decoration: none;
padding: 0.95rem 2rem;
border-radius: 8px;
background: #ffffff;
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
letter-spacing: -0.01em;
box-shadow: 0 1px 0 rgba(13, 15, 21, 0.08);
}
.landing-btn-cta-invert:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 20, 48, 0.25);
}
.landing-btn-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
color: #0a1430;
text-decoration: none;
padding: 0.95rem 1.5rem;
border-radius: 8px;
border: 1px solid rgba(10, 20, 48, 0.35);
background: transparent;
transition: background 0.25s, border-color 0.25s;
}
.landing-btn-cta-ghost:hover {
background: rgba(10, 20, 48, 0.06);
border-color: rgba(10, 20, 48, 0.55);
} }
.landing-cta-email-form { .landing-cta-email-form {
@@ -1317,7 +1449,7 @@
border: 1px solid var(--lp-border); border: 1px solid var(--lp-border);
background: var(--lp-card); background: var(--lp-card);
color: var(--lp-text-heading); color: var(--lp-text-heading);
font-family: 'IBM Plex Sans', sans-serif; font-family: var(--lp-font-body);
font-size: 0.9rem; font-size: 0.9rem;
outline: none; outline: none;
transition: border-color 0.3s, box-shadow 0.3s; transition: border-color 0.3s, box-shadow 0.3s;
@@ -1605,8 +1737,18 @@
gap: 2rem; gap: 2rem;
} }
.landing-problem-grid { .landing-problem-headline {
grid-template-columns: 1fr; position: static;
}
.landing-problem-item {
grid-template-columns: 3rem 1fr;
column-gap: 1rem;
padding: 1.5rem 0;
}
.landing-problem-num {
padding-top: 0.5rem;
} }
.landing-zigzag { .landing-zigzag {
@@ -1628,19 +1770,22 @@
order: 2; order: 2;
} }
.landing-features-grid {
grid-template-columns: 1fr;
}
.landing-features-grid .landing-feature-card:nth-child(4),
.landing-features-grid .landing-feature-card:nth-child(5) {
grid-column: auto;
}
.landing-feature-highlight { .landing-feature-highlight {
flex-direction: column; grid-template-columns: 1fr;
gap: 1rem; gap: 1rem;
padding: 1.5rem; padding: 1.5rem 0;
}
.landing-feature-highlight-marker {
padding-right: 0;
border-right: none;
font-size: 1.75rem;
}
.landing-feature-row {
grid-template-columns: 1fr;
row-gap: 0.6rem;
padding: 1.5rem 0;
} }
.landing-pricing-grid { .landing-pricing-grid {
@@ -1669,16 +1814,8 @@
} }
.landing-equation-section { .landing-equation-section {
padding: 3rem 1.25rem; padding: 5rem 1.25rem 4.5rem;
} text-align: left;
.landing-brand-equation {
font-size: 1.1rem;
gap: 0.4rem;
}
.landing-eq-item {
padding: 0.3rem 0.6rem;
} }
.landing-founder-section { .landing-founder-section {