html { scroll-behavior: smooth; } body { font-family: ‘DM Sans’, sans-serif; background: #26211A; color: var(–sand); overflow-x: hidden; min-height: 100vh; } /* ── NOISE TEXTURE OVERLAY ─────────────────────────────── */ body::before { content: ‘’; position: fixed; inset: 0; background-image: url(“data:image/svg+xml,%3Csvg viewBox=‘0 0 256 256’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cfilter id=‘noise’%3E%3CfeTurbulence type=‘fractalNoise’ baseFrequency=‘0.9’ numOctaves=‘4’ stitchTiles=‘stitch’/%3E%3C/filter%3E%3Crect width=‘100%25’ height=‘100%25’ filter=‘url(%23noise)’ opacity=‘0.04’/%3E%3C/svg%3E”); pointer-events: none; z-index: 0; opacity: 0.5; } /* ── ANIMATED BACKGROUND ───────────────────────────────── */ .bg-mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; } .bg-mesh::before { content: ‘’; position: absolute; width: 900px; height: 900px; background: radial-gradient(circle, rgba(232,220,200,0.22) 0%, rgba(232,220,200,0.08) 45%, transparent 70%); top: -300px; left: -250px; animation: drift1 18s ease-in-out infinite alternate; } .bg-mesh::after { content: ‘’; position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(193,100,79,0.18) 0%, rgba(232,220,200,0.06) 50%, transparent 70%); bottom: -100px; right: -100px; animation: drift2 22s ease-in-out infinite alternate; } @keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(80px, 60px); } } @keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-60px, -80px); } } /* ── LAYOUT ────────────────────────────────────────────── */ .wrapper { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 32px; } /* Extra sand warmth blob mid-page */ .bg-mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; } .bg-sand-mid { position: fixed; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,220,200,0.1) 0%, transparent 70%); top: 50%; right: -100px; transform: translateY(-50%); pointer-events: none; z-index: 0; animation: drift2 26s ease-in-out infinite alternate; } /* ── NAV ───────────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; background: linear-gradient(to bottom, rgba(38,33,26,0.98) 0%, transparent 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(232,220,200,0.05); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-text { font-size: 22px; font-weight: 700; color: var(–off-white); letter-spacing: -0.5px; } .nav-logo-text span { color: var(–terra); } .nav-cta { background: var(–sand); color: var(–charcoal); border: none; padding: 10px 22px; border-radius: 40px; font-family: ‘DM Sans’, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.15s; display: inline-block; } .nav-cta:hover { background: var(–off-white); transform: translateY(-1px); } /* ── HERO ──────────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 80px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: ‘DM Mono’, monospace; font-size: 12px; letter-spacing: 0.2em; color: rgba(232,220,200,0.5); margin-bottom: 28px; animation: fadeUp 0.8s ease 0.1s both; } .hero-eyebrow::before { content: ‘>’; color: var(–terra); opacity: 0.7; } .hero-headline { font-size: clamp(52px, 8vw, 100px); font-weight: 700; line-height: 1.0; letter-spacing: -3px; margin-bottom: 28px; color: var(–sand); animation: fadeUp 0.8s ease 0.2s both; } .hero-headline em { font-style: italic; font-weight: 300; color: rgba(232,220,200,0.75); } .hero-headline .terra { color: var(–terra); } .hero-sub { font-size: clamp(16px, 2.5vw, 20px); font-weight: 400; color: rgba(232,220,200,0.7); line-height: 1.65; max-width: 520px; margin-bottom: 48px; animation: fadeUp 0.8s ease 0.3s both; } .hero-sub strong { color: var(–sand); font-weight: 500; } /* ── WAITLIST FORM ─────────────────────────────────────── */ .waitlist-form { animation: fadeUp 0.8s ease 0.4s both; max-width: 480px; } .form-row { display: flex; gap: 0; background: rgba(232,220,200,0.06); border: 1.5px solid rgba(232,220,200,0.16); border-radius: 16px; padding: 6px; margin-bottom: 14px; transition: border-color 0.2s; } .form-row:focus-within { border-color: rgba(232,220,200,0.45); background: rgba(232,220,200,0.09); } .form-input { flex: 1; background: transparent; border: none; outline: none; padding: 12px 16px; font-family: ‘DM Sans’, sans-serif; font-size: 15px; color: var(–sand); min-width: 0; } .form-input::placeholder { color: rgba(232,220,200,0.3); } .form-submit { background: var(–terra); color: white; border: none; border-radius: 12px; padding: 12px 22px; font-family: ‘DM Sans’, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.15s; flex-shrink: 0; } .form-submit:hover { background: var(–terra-dim); transform: translateY(-1px); } .form-submit:active { transform: translateY(0); } .form-note { font-size: 12px; color: rgba(232,220,200,0.28); line-height: 1.5; } .form-note a { color: rgba(232,220,200,0.45); text-decoration: none; } /* Success state */ .form-success { display: none; background: rgba(61,90,71,0.3); border: 1.5px solid rgba(107,146,120,0.4); border-radius: 16px; padding: 20px 24px; margin-bottom: 14px; } .form-success.show { display: flex; gap: 14px; align-items: center; animation: fadeUp 0.4s ease both; } .success-icon { width: 40px; height: 40px; background: var(–slate); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .success-text { font-size: 14px; line-height: 1.5; color: var(–sand); } .success-text strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; } /* ── SOCIAL PROOF ──────────────────────────────────────── */ .social-proof { display: flex; align-items: center; gap: 16px; margin-top: 32px; animation: fadeUp 0.8s ease 0.5s both; } .proof-avatars { display: flex; } .proof-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #26211A; margin-right: -10px; font-size: 12px; font-weight: 600; color: white; display: flex; align-items: center; justify-content: center; } .proof-text { font-size: 13px; color: rgba(232,220,200,0.4); line-height: 1.4; } .proof-text strong { color: rgba(232,220,200,0.7); font-weight: 500; } /* ── DIVIDER LINE ──────────────────────────────────────── */ .section-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(232,220,200,0.1), transparent); margin: 0; } /* ── HOW IT WORKS ──────────────────────────────────────── */ .how-section { padding: 100px 0; } .section-tag { font-family: ‘DM Mono’, monospace; font-size: 11px; letter-spacing: 0.2em; color: var(–terra); text-transform: uppercase; margin-bottom: 16px; opacity: 0.8; } .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 60px; max-width: 480px; color: var(–sand); } .section-title em { font-style: italic; font-weight: 300; color: rgba(232,220,200,0.65); } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; } .step-card { background: rgba(232,220,200,0.07); border: 1px solid rgba(232,220,200,0.18); padding: 36px 32px; position: relative; transition: background 0.3s; } .step-card:first-child { border-radius: 20px 0 0 20px; } .step-card:last-child { border-radius: 0 20px 20px 0; } .step-card:hover { background: rgba(232,220,200,0.12); } .step-num { font-family: ‘DM Mono’, monospace; font-size: 11px; color: rgba(232,220,200,0.4); letter-spacing: 0.1em; margin-bottom: 20px; } .step-icon { width: 48px; height: 48px; background: rgba(232,220,200,0.14); border: 1px solid rgba(232,220,200,0.22); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; } .step-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.3px; color: var(–sand); } .step-body { font-size: 14px; color: rgba(232,220,200,0.6); line-height: 1.65; } /* ── DIFFERENTIATION ───────────────────────────────────── */ .diff-section { padding: 80px 0 100px; } .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .diff-left { } .diff-right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .diff-pill { background: rgba(232,220,200,0.08); border: 1px solid rgba(232,220,200,0.18); border-radius: 14px; padding: 20px; } .diff-pill-label { font-size: 11px; font-family: ‘DM Mono’, monospace; letter-spacing: 0.08em; color: rgba(232,220,200,0.5); margin-bottom: 8px; text-transform: uppercase; } .diff-pill-value { font-size: 14px; font-weight: 600; color: var(–sand); line-height: 1.3; } .diff-pill-value.no { color: rgba(232,220,200,0.2); text-decoration: line-through; text-decoration-color: rgba(193,100,79,0.4); } .diff-pill-value.yes { color: var(–sand); } /* ── TRUST SECTION ─────────────────────────────────────── */ .trust-section { padding: 80px 0; background: rgba(232,220,200,0.05); border-top: 1px solid rgba(232,220,200,0.14); border-bottom: 1px solid rgba(232,220,200,0.14); } .trust-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .trust-item { display: flex; gap: 16px; align-items: flex-start; } .trust-icon { width: 44px; height: 44px; background: rgba(232,220,200,0.13); border: 1px solid rgba(232,220,200,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .trust-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(–sand); } .trust-body { font-size: 12px; color: rgba(232,220,200,0.6); line-height: 1.5; } /* ── PHONE MOCKUP ──────────────────────────────────────── */ .phone-section { padding: 100px 0; } .phone-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .phone-copy { } .phone-copy p { font-size: 16px; color: rgba(232,220,200,0.65); line-height: 1.7; margin-bottom: 32px; } .phone-visual { display: flex; justify-content: center; } .phone-frame { width: 260px; background: var(–charcoal); border-radius: 38px; padding: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 40px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3); transform: rotate(-2deg); transition: transform 0.4s ease; } .phone-frame:hover { transform: rotate(0deg) translateY(-8px); } .phone-notch { width: 80px; height: 22px; background: var(–charcoal); border-radius: 0 0 16px 16px; margin: 0 auto 0; position: relative; z-index: 2; } .phone-screen { border-radius: 30px; overflow: hidden; /* 390px iframe scaled to 66.67% = 260px wide, 844px × 0.6667 = 563px tall */ width: 260px; height: 563px; position: relative; } /* Mini home screen inside mockup */ .mini-status { padding: 10px 16px 4px; font-size: 9px; font-weight: 600; color: var(–off-white); display: flex; justify-content: space-between; } .mini-greeting { padding: 4px 16px 12px; } .mini-greeting .g1 { font-size: 9px; color: rgba(247,244,239,0.45); } .mini-greeting .g2 { font-size: 16px; font-weight: 700; color: var(–off-white); letter-spacing: -0.3px; } .mini-weather { margin: 0 12px 12px; background: rgba(232,220,200,0.08); border-radius: 10px; padding: 10px 12px; } .mini-weather-label { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232,220,200,0.5); margin-bottom: 8px; } .mini-weather-days { display: flex; justify-content: space-between; } .mini-day { text-align: center; font-size: 7px; color: rgba(247,244,239,0.4); } .mini-day.today { color: var(–sand); font-weight: 700; } .mini-day .ico { font-size: 12px; margin: 2px 0; } .mini-section-hdr { padding: 0 12px 8px; display: flex; justify-content: space-between; align-items: center; } .mini-section-hdr .lbl { font-size: 10px; font-weight: 700; color: var(–off-white); } .mini-section-hdr .sa { font-size: 8px; color: var(–slate-lite); } .mini-card { margin: 0 12px 8px; background: rgba(247,244,239,0.08); border-radius: 12px; padding: 10px 12px; } .mini-card-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .mini-av { width: 24px; height: 24px; border-radius: 50%; font-size: 9px; font-weight: 700; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mini-card-name { font-size: 10px; font-weight: 600; color: var(–off-white); } .mini-card-sub { font-size: 8px; color: rgba(247,244,239,0.4); } .mini-badge { display: inline-flex; align-items: center; gap: 2px; background: rgba(61,90,71,0.5); border-radius: 6px; padding: 2px 6px; font-size: 7px; font-weight: 600; color: var(–sand); margin-left: auto; } .mini-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .mini-pill { background: rgba(234,240,235,0.15); border-radius: 6px; padding: 2px 6px; font-size: 7px; color: rgba(247,244,239,0.6); } .mini-actions { display: flex; gap: 6px; } .mini-pass { flex: 1; padding: 5px; border-radius: 6px; background: rgba(247,244,239,0.06); font-size: 7px; color: rgba(247,244,239,0.4); text-align: center; } .mini-int { flex: 2; padding: 5px; border-radius: 6px; background: var(–terra); font-size: 7px; color: white; text-align: center; font-weight: 600; } .mini-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 44px; background: rgba(20,18,14,0.97); border-top: 1px solid rgba(232,220,200,0.06); display: flex; justify-content: space-around; align-items: center; padding-bottom: 6px; } .mini-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.35; } .mini-nav-item.active { opacity: 1; } .mini-nav-dot { width: 3px; height: 3px; background: var(–sand); border-radius: 2px; opacity: 0.6; } /* ── FINAL CTA ─────────────────────────────────────────── */ .cta-section { padding: 120px 0; text-align: center; } .cta-inner { max-width: 600px; margin: 0 auto; } .cta-headline { font-size: clamp(36px, 6vw, 64px); font-weight: 700; letter-spacing: -2px; line-height: 1.05; margin-bottom: 20px; color: var(–sand); } .cta-headline em { font-style: italic; font-weight: 300; color: rgba(232,220,200,0.7); } .cta-sub { font-size: 16px; color: rgba(232,220,200,0.62); margin-bottom: 40px; line-height: 1.6; } .cta-form { max-width: 420px; margin: 0 auto; } /* ── FOOTER ────────────────────────────────────────────── */ footer { border-top: 1px solid rgba(232,220,200,0.08); padding: 40px 0; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: rgba(232,220,200,0.35); letter-spacing: -0.3px; } .footer-logo span { color: rgba(193,100,79,0.5); } .footer-copy { font-size: 12px; color: rgba(232,220,200,0.18); } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 12px; color: rgba(232,220,200,0.22); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: rgba(232,220,200,0.5); } /* ── ANIMATIONS ────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE ────────────────────────────────────────── */ @media (max-width: 768px) { .wrapper { padding: 0 20px; } .nav-inner { padding: 0 20px; } .hero { padding: 100px 0 60px; } .hero-headline { letter-spacing: -1.5px; } .form-row { flex-direction: column; gap: 8px; background: transparent; border: none; padding: 0; } .form-row:focus-within { border: none; } .form-input { background: rgba(247,244,239,0.06); border: 1.5px solid rgba(247,244,239,0.12); border-radius: 12px; padding: 14px 16px; } .form-submit { border-radius: 12px; padding: 14px 22px; width: 100%; } .diff-grid { grid-template-columns: 1fr; } .diff-right { grid-template-columns: 1fr 1fr; } .phone-layout { grid-template-columns: 1fr; } .phone-visual { order: -1; } .phone-frame { width: 220px; } .phone-screen { width: 220px; height: 477px; } .phone-screen iframe { width: 390px; height: 844px; transform: scale(0.564); transform-origin: top left; } .steps-grid { grid-template-columns: 1fr; gap: 2px; } .step-card:first-child { border-radius: 20px 20px 0 0; } .step-card:last-child { border-radius: 0 0 20px 20px; } .footer-inner { flex-direction: column; align-items: flex-start; } .social-proof { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 480px) { .diff-right { grid-template-columns: 1fr; } .trust-items { grid-template-columns: 1fr; } }
RUN WITH SOMEONE

Running is
better with
someone.

Find runners who match your pace. Near you.
No feed. No leaderboard. No performance anxiety.
Just people who run like you, nearby.

```
✓
You're on the list. We'll be in touch when Pacer launches near you. Tell a runner friend.
No spam. Unsubscribe any time. Privacy policy.
```
How it works

Three steps to your next run together

01
🏃
Tell us how you run
Set your comfortable pace range, typical distance, and when you're usually free. No exact times, no performance data — just enough to find people who run like you.
02
📍
See who's nearby
We surface compatible runners within a few miles of you. Double opt-in matching means no one can contact you without mutual interest. No exact addresses ever shared.
03
🤝
Go for a run
Coordinate over a simple scoped chat thread. Join or create group runs nearby. Built-in safe return tools so someone always knows your plan.
What makes Pacer different

Built for running.
Not for content.

Most running apps are built for performance tracking and social media. Pacer is built for one thing: getting you out the door with someone who runs like you.

Pace-matched
Privacy-first
Safety built-in
Hyperlocal
Social feed
None
Leaderboards
None
Pace matching
✓ Range-based
Location
✓ Zone only
GPS tracking
We don't
Safe return
✓ Built in
Group runs
✓ Local
Kudos / badges
None
Safety & trust

Built for
everyone.

🔒
Double opt-in matching
No one can contact you without mutual interest. Expressions of interest are private — no awkward pending states.
📍
No exact location
Your home is never shown. Matches see a neighbourhood zone only. Meeting points are public places you choose.
🔵
Pace verification
Connect Strava or Garmin to verify your pace range. Runners can filter by verified status for extra confidence.
⏰
Safe return check-in
Set a return time. If you don't check in, your nominated contact is automatically alerted — without needing the app.
The app

A coordination tool.
Not a platform.

The home screen shows people who run like you, nearby, and group runs this week. That's it. No scrolling required. No content to consume.

Chat threads are scoped and ephemeral — they exist to organise a run, then they close. The app gets out of your way.

Join the waitlist →

Ready to find your
Saturday morning
people?

Launching in Hertfordshire first. Join the waitlist and we'll let you know when Pacer is ready near you.

✓
You're on the list. We'll be in touch when Pacer launches near you.
No spam. Unsubscribe any time.