/* Scute — landing site Brand system derived from the Scute logo: sky blue, coral orange, white runner. */ :root { --ink: #0D0221; /* near-black, purple cast — text, borders, base */ --primary: #55ACEE; /* sky blue — from logo background */ --paper: #ffffff; --accent: #F96332; /* coral orange — from logo runner accent */ --orange: #F96332; /* coral orange — energy, active markers */ --warn: #AF0000; --strava: #fc4c02; /* reserved: Strava only */ --surface-blue: #e0f0fc; --surface-amber: #fef0e8; --surface-orange: #fde8e0; --bg: #f0f6fa; --muted: #555; --faint: #888; --hairline: #e5e5e5; --radius: 8px; --maxw: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Clip horizontal overflow on the ROOT only. Putting overflow-x:hidden on turns body into a scroll container, which breaks position:sticky for every descendant (the phone in #flow, and the header). Root-level overflow propagates to the viewport, so horizontal scroll is still clipped while the viewport stays the scroll container that sticky anchors to. The marquee clips itself, so nothing else depends on body-level clipping. */ html { overflow-x: hidden; } a { color: var(--primary); } /* anchored sections clear the sticky header */ :target { scroll-margin-top: 84px; } /* visible keyboard focus everywhere */ *:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- utility type ---------- */ .tag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--ink); padding: 4px 9px; display: inline-block; background: var(--paper); border-radius: var(--radius); } .kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .muted { color: var(--muted); } /* ---------- header / nav ---------- */ .site-header { border-bottom: 2px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 50; } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 900; letter-spacing: -0.04em; font-size: 26px; color: var(--ink); text-decoration: none; } .nav-logo { height: 30px; width: auto; display: inline-block; border-radius: 6px; } .nav-logo-sm { height: 25px; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 8px 12px; border: 2px solid transparent; border-radius: var(--radius); } .nav-links a:hover { border-color: var(--hairline); } .nav-links a.active { border-color: var(--ink); } .nav-links a.cta { background: var(--primary); color: #fff; border-color: var(--primary); } .nav-links a.cta:hover { background: var(--ink); border-color: var(--ink); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 14px 22px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); transition: transform 0.04s ease; border-radius: var(--radius); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--ink); border-color: var(--ink); } .btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; } .btn-lg { padding: 16px 26px; font-size: 14px; } /* ---------- hero ---------- */ .hero { padding: 72px 0 56px; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 0.98; margin: 16px 0 0; font-weight: 800; letter-spacing: -0.03em; } .hero h1 .blue { color: var(--primary); } .hero h1 .orange { color: var(--orange); } .hero .lede { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 22px 0 0; } /* phone mock in hero */ .phone { background: var(--ink); padding: 10px; border-radius: 38px; box-shadow: 0 22px 44px rgba(13,2,33,0.22); max-width: 320px; margin: 0 auto; } .phone .screen { background: var(--paper); border-radius: 30px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 560px; } .screen .topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; } .screen .crumb { font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .match-card { border: 2px solid var(--ink); padding: 14px; border-radius: var(--radius); } .match-card .who { font-size: 18px; font-weight: 800; } .match-card .stat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); margin-top: 4px; } .chip { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px; border: 1.5px solid var(--ink); border-radius: var(--radius); } .chip-blue { background: var(--primary); color: #fff; border-color: var(--primary); } .chip-amber { background: var(--accent); color: var(--ink); border-color: var(--accent); } .chip-orange { background: var(--orange); color: #fff; border-color: var(--orange); } .route-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; border: 1.5px solid var(--hairline); padding: 8px 10px; border-radius: var(--radius); } .route-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } /* ---------- generic section ---------- */ section { padding: 56px 0; } .section-head { margin-bottom: 32px; } .section-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 0; } .section-head p { color: var(--muted); max-width: 60ch; margin: 12px 0 0; font-size: 16px; line-height: 1.5; } /* steps / cards */ .cards { display: grid; gap: 18px; } .cards-3 { grid-template-columns: repeat(3, 1fr); } .cards-2 { grid-template-columns: repeat(2, 1fr); } .card { border: 2px solid var(--ink); background: var(--paper); padding: 22px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--radius); } .card .step-no { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .card h3 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; } .card.tint-blue { background: var(--surface-blue); } .card.tint-amber { background: var(--surface-amber); } .card.tint-orange { background: var(--surface-orange); } /* spec-style card body: a label/value readout like a Strava activity summary */ .spec { margin: 14px 0 0; padding-top: 2px; border-top: 1.5px dashed var(--ink); display: flex; flex-direction: column; } .spec > div { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(13, 2, 33, 0.12); } .spec > div:last-child { border-bottom: none; } .spec dt { margin: 0; flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .spec dd { margin: 0; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* ---------- pillars (better with friends) ---------- */ .pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pillar { border: 2px solid var(--ink); background: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 14px; border-radius: var(--radius); } .pillar.lead-blue { border-top-width: 8px; border-top-color: var(--primary); } .pillar.lead-orange { border-top-width: 8px; border-top-color: var(--orange); } .pillar .pill-no { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .pillar h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .pillar .pill-lede { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; } .pillar ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 11px; } .pillar li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.4; font-weight: 600; } .pillar li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 4px; background: var(--ink); } .pillar.lead-blue li::before { background: var(--primary); } .pillar.lead-orange li::before { background: var(--orange); } /* ---------- waitlist ---------- */ .waitlist { border: 2px solid var(--ink); background: var(--ink); color: #fff; padding: 48px 40px; border-radius: var(--radius); } .waitlist h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 0; } .waitlist .lede { color: #c9c6d4; font-size: 17px; line-height: 1.5; margin: 14px 0 28px; max-width: 50ch; } .waitlist-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; } .waitlist-form input[type="email"] { flex: 1 1 260px; padding: 16px 16px; font-size: 16px; border: 2px solid #fff; background: #fff; color: var(--ink); font-family: inherit; border-radius: var(--radius); } .waitlist-form input[type="email"]:focus { outline: 3px solid var(--accent); outline-offset: 0; } .waitlist-form button { flex: none; } .waitlist .fine { font-size: 12px; color: #9b97a8; margin-top: 16px; letter-spacing: 0.04em; } .form-msg { margin-top: 18px; font-size: 14px; font-weight: 700; min-height: 1.2em; } .form-msg.ok { color: var(--accent); } .form-msg.err { color: #ff8a6e; } .city-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--ink); } .faq-item { border-bottom: 2px solid var(--ink); background: var(--paper); } .faq-item summary { cursor: pointer; list-style: none; padding: 22px 16px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 24px; font-weight: 800; color: var(--orange); } .faq-item[open] summary::after { content: "\2013"; } .faq-item .answer { padding: 0 16px 22px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 70ch; } /* ---------- prose (about) ---------- */ .prose { max-width: 70ch; } .prose h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 12px; } .prose p { font-size: 17px; line-height: 1.65; color: #2a2436; margin: 0 0 18px; } .prose ul { padding-left: 20px; } .prose li { font-size: 17px; line-height: 1.6; margin-bottom: 10px; } .prose strong { color: var(--ink); } /* ---------- page hero (about/faq) ---------- */ .page-hero { padding: 64px 0 8px; } .page-hero h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 0; } .page-hero p { color: var(--muted); font-size: 18px; line-height: 1.5; max-width: 56ch; margin: 18px 0 0; } /* ---------- footer ---------- */ .site-footer { border-top: 2px solid var(--ink); background: var(--paper); margin-top: 24px; padding: 40px 0; } .footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-grid .small { font-size: 12px; color: var(--faint); letter-spacing: 0.04em; } .footer-links { display: flex; gap: 18px; } .footer-links a { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .footer-links a:hover { color: var(--orange); } /* ---------- hero phone route map (real basemap + cycling routes) ---------- */ .routemap { position: relative; border: 1.5px solid var(--ink); background: #e9ecf2; margin-top: 2px; line-height: 0; border-radius: var(--radius); overflow: hidden; } .routemap img { display: block; width: 100%; height: auto; } .routemap svg { position: absolute; inset: 0; width: 100%; height: 100%; } .meet-pin { filter: drop-shadow(0 2px 3px rgba(13,2,33,0.4)); } /* three routes: each base line cycles as the "active" one, while a white dashed overlay (flow) marches along whichever route is currently active */ .rt { fill: none; stroke-linecap: round; stroke-linejoin: round; animation: routeHi 7.5s ease-in-out infinite; } .rt-a { stroke: var(--primary); } .rt-b { stroke: var(--orange); } .rt-c { stroke: var(--accent); } .rtflow { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 3 12; animation: routeFlow 1s linear infinite, flowVis 7.5s ease-in-out infinite; } /* stagger: A active, then B, then C (7.5s ÷ 3) */ .rt-b, .flow-b { animation-delay: -2.5s; } .rt-c, .flow-c { animation-delay: -5s; } @keyframes routeHi { 0%, 27% { opacity: 1; stroke-width: 5; } 33%, 100% { opacity: 0.18; stroke-width: 3; } } @keyframes flowVis { 0%, 27% { opacity: 0.95; } 33%, 100% { opacity: 0; } } @keyframes routeFlow { to { stroke-dashoffset: -15; } } @media (prefers-reduced-motion: reduce) { .rt, .rtflow { animation: none; } .rt { opacity: 1; stroke-width: 4; } /* show all three routes at rest */ .rtflow { opacity: 0; } } /* ---------- matching flow (scroll-animated) ---------- */ .flow-stage { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; } /* left column: tall step blocks give scroll travel for the sticky phone */ .flow-steps { list-style: none; margin: 0; padding: 0; } .flow-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.32; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .flow-step.is-active { opacity: 1; transform: none; } .flow-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--orange); } .flow-step h3 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; } .flow-step p { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; max-width: 42ch; } .flow-step strong { color: var(--ink); } /* right column: a full-height grid item (stretches to the steps' height) that holds an inner sticky element. Sticky-on-a-nested-block is far more reliable than sticky directly on a grid item. */ .flow-visual { position: relative; } .flow-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; gap: 20px; } /* progress rail */ .flow-progress { display: flex; flex-direction: column; gap: 12px; } .fp-dot { width: 9px; height: 9px; border: 2px solid var(--ink); background: var(--paper); transition: background 0.4s ease, transform 0.4s ease; border-radius: 50%; } .fp-dot.is-active { background: var(--orange); border-color: var(--orange); transform: scale(1.35); } /* crossfading frames inside the phone screen. frames are absolutely positioned, so the screen needs explicit size or it collapses. */ .flow-visual .phone { width: 320px; flex: none; } .flow-screen { position: relative; width: 100%; min-height: 564px; } .flow-frame { position: absolute; inset: 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px) scale(0.99); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; } .flow-frame.is-active { opacity: 1; transform: none; pointer-events: auto; } /* frame 1 · connect strava */ .connect-block { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .connect-copy { display: flex; flex-direction: column; gap: 6px; } .connect-copy strong { font-size: 19px; font-weight: 800; } .connect-copy span { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 26ch; } /* the connect button, tapped by an animated pointer on a loop */ .connect-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; } .strava-btn { position: relative; z-index: 1; background: var(--strava); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; padding: 13px 20px; border: 2px solid var(--strava); border-radius: var(--radius); animation: ctaPress 2.8s cubic-bezier(0.6, 0.2, 0.2, 1) infinite; } .cta-ripple { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 0; border-radius: 50%; background: var(--strava); opacity: 0; pointer-events: none; animation: ctaRipple 2.8s cubic-bezier(0.6, 0.2, 0.2, 1) infinite; } /* fingertip touch indicator (like screen-recording "show touches") */ .tap-dot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(13, 2, 33, 0.26); border: 2px solid rgba(13, 2, 33, 0.5); pointer-events: none; animation: tapMove 2.8s cubic-bezier(0.6, 0.2, 0.2, 1) infinite; } @keyframes tapMove { 0% { transform: translate(40px, 34px) scale(1); opacity: 0; } 14% { opacity: 1; } 36% { transform: translate(0, 0) scale(1); } /* fingertip lands on the button */ 44% { transform: translate(0, 0) scale(0.7); } /* press */ 54% { transform: translate(0, 0) scale(1); } /* release */ 82% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(40px, 34px) scale(1); opacity: 0; } } @keyframes ctaPress { 0%, 40% { transform: none; filter: none; } 46% { transform: scale(0.97); filter: brightness(0.9); } 56% { transform: none; filter: none; } 100% { transform: none; } } @keyframes ctaRipple { 0%, 43% { opacity: 0; transform: scale(0.4); } 47% { opacity: 0.45; transform: scale(0.5); } 72% { opacity: 0; transform: scale(6); } 100% { opacity: 0; transform: scale(6); } } /* frame 2 · weekly match banner */ .flow-banner { background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; padding: 11px 14px; text-align: center; border: 2px solid var(--primary); border-radius: var(--radius); } /* frame 4 · chat */ .chat-thread { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 auto; } .bubble { max-width: 80%; font-size: 13px; line-height: 1.4; padding: 10px 13px; font-weight: 600; border-radius: 12px; } .bubble.in { align-self: flex-start; background: var(--surface-blue); border: 1.5px solid var(--hairline); } .bubble.out { align-self: flex-end; background: var(--primary); color: #fff; border: 1.5px solid var(--primary); } .chat-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--ink); padding: 11px 13px; font-size: 13px; color: var(--faint); border-radius: var(--radius); } .chat-send { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .flow-step { opacity: 1; transform: none; } .tap-dot, .cta-ripple, .strava-btn { animation: none; } .tap-dot { transform: translate(0, 0); opacity: 1; } /* show fingertip resting on the button */ .cta-ripple { opacity: 0; } } /* ---------- responsive ---------- */ @media (max-width: 860px) { /* stack: phone pins at top (sticky), step copy scrolls up beneath it. flex column (not grid) so the sticky item's track spans the whole stage. */ .flow-stage { display: flex; flex-direction: column; gap: 0; } .flow-visual { order: -1; position: sticky; top: 56px; z-index: 2; background: var(--bg); } .flow-sticky { position: static; height: auto; flex-direction: column; gap: 10px; padding: 10px 0 16px; } .flow-visual .phone { width: 232px; } .flow-screen { min-height: 430px; } .flow-progress { flex-direction: row; justify-content: center; } .flow-step { min-height: 58vh; } .flow-step:first-child { min-height: 22vh; justify-content: flex-end; } .flow-step:last-child { min-height: 42vh; justify-content: flex-start; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero .phone-col { order: -1; } .cards-3, .cards-2, .pillars { grid-template-columns: 1fr; } } @media (max-width: 600px) { .nav { height: 58px; } .wordmark { font-size: 22px; } .nav-links { gap: 0; } .nav-links a:first-child { display: none; } /* logo already links home */ .nav-links a { padding: 7px 9px; letter-spacing: 0.1em; } .nav-links a.cta { padding: 9px 12px; } .hero { padding: 44px 0 36px; } .hero h1 { font-size: clamp(34px, 12vw, 52px); } .waitlist { padding: 30px 22px; } .footer-grid { flex-direction: column; align-items: flex-start; gap: 18px; } } /* ---------- type marquee ---------- */ .marquee { overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); } .marquee + .marquee { border-top: none; } .mq-track { display: flex; width: max-content; padding: 16px 0; animation: mqScroll 30s linear infinite; } .marquee.mq-rev .mq-track { animation-direction: reverse; animation-duration: 38s; } .mq-item { flex: none; font-size: clamp(28px, 5.5vw, 66px); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; padding: 0 26px; color: var(--ink); white-space: nowrap; } .marquee.mq-rev .mq-item { font-weight: 800; -webkit-text-stroke: 1.5px var(--ink); color: transparent; } .mq-sep { flex: none; padding: 0 26px; color: var(--orange); font-size: clamp(24px, 5vw, 60px); } .marquee:hover .mq-track { animation-play-state: paused; } @keyframes mqScroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }