/* ═══════════════════════════════════════════════════════════════════════════ Sports Team Organizer — site stylesheet PORTED FROM THE APPROVED REFERENCE, NOT REDESIGNED. Everything under the "REFERENCE" headings is app/globals.css from the approved package, reproduced rule-for-rule: the same hex values, the same clamp() display scale, the same radii, shadows and transitions. Where the reference expressed layout as Tailwind utility classes inside .tsx markup, those are written out as real CSS here under "LAYOUT", because this site is generated as static HTML and does not ship Tailwind. The rendered result is the same; only the delivery mechanism differs, which is what the handoff asks for ("recreate the design and behavior natively in that stack"). Deliberate differences from the reference, all of them listed: · The wordmark is the club's own logo-white-full.svg instead of the reference's Google Drive hotlink (handoff §44 — do not reuse hosting identity from the original environment). · A third call to action, "Join Existing Club", sits alongside Log in and Start free trial. It is the code-entry door built for the app; the reference predates it. · Dropdowns and the mobile menu are CSS plus a few lines of vanilla JS rather than Radix, since there is no React on these pages. Roles, aria-expanded, focus order and Escape-to-close behave the same. · A visible :focus-visible ring is added. The reference inherited Radix's and would otherwise be keyboard-invisible here, which fails the handoff's own accessibility check. ═══════════════════════════════════════════════════════════════════════════ */ /* ── REFERENCE: tokens ──────────────────────────────────────────────────── */ :root { --background: #05070b; --foreground: #f7f9ff; --primary: #2372ff; --primary-foreground: #fff; --border: #ffffff18; --radius: .8rem; /* Named for readability; the values are the reference's own literals. */ --cyan: #61caef; --body: #8793a6; --body-2: #9da9bc; --shell: 1440px; } * { box-sizing: border-box; } /* Anchor jumps glide instead of teleporting. Per spec this affects navigation and the CSSOM scrolling APIs ONLY, never a wheel or trackpad gesture — so it is not a scrolling bug, but it IS a debugging trap: window.scrollTo() becomes asynchronous here, and reading scrollY straight afterwards returns the OLD value. Measure with {behavior:'instant'} or the page will look frozen when it is not. (It cost hours once. It is not going to cost them twice.) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ── WHY THIS IS `clip` AND NOT `hidden` — THE TRACKPAD BUG ──────────────── `overflow-x: hidden` here made a scroll container. The browser reported `hidden auto`, because a hidden axis forces the visible one to `auto`. Body has no scrollable overflow of its own, so a wheel or trackpad gesture landed on a scroller that could not move and should have CHAINED up to the viewport. It did not, because the app's stylesheet (src/index.css, which loads on "/" since the homepage is injected into the SPA shell) sets `html, body { overscroll-behavior: none }` to stop the iOS WebView rubber-banding — and `none` blocks exactly that chain. Result: the page scrolled when JavaScript moved it and when the scrollbar was dragged — both bypass event chaining — but the wheel and trackpad did nothing at all. Neither rule is wrong on its own; together, on this one page, they cancelled scrolling. `clip` does the same visual job WITHOUT creating a scroll container, so there is nothing for the gesture to get trapped in. `hidden` is declared first as the fallback for Safari below 16, which has no `clip`; the overscroll-behavior reset below is the belt to that brace. --------------------------------------------------------------------------- */ body { margin: 0; background: #05070b; color: #f7f9ff; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } /* The marketing pages are an ordinary long document in a desktop browser, not a fixed-viewport app screen inside a WebView. Nothing here needs the scroll chain blocked, and blocking it is what broke the trackpad. Scoped to site.css, so the app keeps `none` everywhere it actually matters — main.tsx strips this stylesheet the instant React takes the page over. */ html, body { overscroll-behavior: auto; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { text-wrap: balance; } :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cyan); color: #05070b; padding: 12px 18px; font-weight: 800; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } /* ── REFERENCE: atmosphere ─────────────────────────────────────────────── */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-glow { position: absolute; width: 900px; height: 900px; right: -250px; top: 20px; border-radius: 50%; background: radial-gradient(circle, #2372ff24 0, transparent 65%); } .club-glow { position: absolute; width: 700px; height: 700px; left: -350px; top: 0; border-radius: 50%; background: #2372ff12; filter: blur(90px); } .field-lines { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%); mask-image: linear-gradient(to bottom, black, transparent 90%); } /* ── REFERENCE: type + accents ─────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #61caef2e; background: #61caef0c; border-radius: 999px; padding: 8px 12px; color: #8bdcff; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px #61caef1a; flex: none; } .blue-gradient { background: linear-gradient(90deg, #2d79ff, #61caef); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-label { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; margin: 0; } .section-title { margin: 16px 0 0; font-size: clamp(2.8rem, 5vw, 5.4rem); font-weight: 900; line-height: .95; letter-spacing: -.055em; text-transform: uppercase; } .section-pad { padding: 130px 0; } .section-body { margin: 24px 0 0; max-width: 42rem; font-size: 18px; line-height: 1.78; color: var(--body); } /* ── REFERENCE: buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: #fff; font: 700 14px/1 Arial, Helvetica, sans-serif; cursor: pointer; transition: .2s; white-space: nowrap; } .btn-lg { height: 56px; padding: 0 28px; font-size: 16px; } .blue-button { border: 1px solid #62c9ef5c; background: linear-gradient(135deg, #276cff, #159fd1); color: #fff; box-shadow: 0 12px 45px #176fff36; } .blue-button:hover { filter: brightness(1.12); } .glass-button { border-color: #ffffff20; background: #ffffff08; color: #fff; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .glass-button:hover { background: #ffffff12; } .ghost-button { color: #ffffffa6; } .ghost-button:hover { background: #ffffff0d; color: #fff; } /* The third door. Cyan-outlined so it reads as its own path rather than a weaker version of "Start free trial" — a parent arriving with a club code is not a trial signup and must not have to work out which button is theirs. */ .join-button { border-color: #61caef4d; background: #61caef14; color: var(--cyan); } .join-button:hover { background: #61caef26; color: #d6f2fb; } /* ── REFERENCE: navigation ─────────────────────────────────────────────── */ .nav-top-link, .nav-top-trigger { display: inline-flex; height: 40px; align-items: center; border-radius: 9px; background: transparent; padding: 0 14px; color: #ffffffa8; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; gap: 5px; font-family: inherit; } .nav-top-link:hover, .nav-top-trigger:hover, .nav-top-trigger[aria-expanded="true"] { background: #ffffff08; color: #fff; } .nav-top-trigger svg { transition: transform .2s; } .nav-top-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-dropdown { margin-top: 8px; border: 1px solid #ffffff17; border-radius: 16px; background: #0a0e16f5; color: #fff; box-shadow: 0 30px 80px #000c; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); position: absolute; top: 100%; left: 0; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; } .nav-item { position: relative; } .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dd-pad { padding: 8px; display: grid; gap: 8px; } .nav-dd-sports { padding: 16px; } .nav-dd-sports .grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .nav-card { display: block; border: 1px solid transparent; border-radius: 10px; padding: 13px 14px; } .nav-card:hover { border-color: #61caef20; background: #2372ff0d; } .nav-card b, .nav-card span { display: block; } .nav-card b { font-size: 13px; } .nav-card span { margin-top: 4px; color: #ffffff5c; font-size: 11px; line-height: 1.5; } .nav-featured { position: relative; display: block; border: 1px solid #61caef24; border-radius: 12px; background: linear-gradient(110deg, #2372ff17, #61caef08); padding: 15px 45px 15px 16px; } .nav-featured b, .nav-featured span { display: block; } .nav-featured b { font-size: 14px; } .nav-featured span { margin-top: 4px; color: #ffffff65; font-size: 11px; } .nav-featured svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--cyan); } .nav-sport-link { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 8px; padding: 10px 12px; color: #ffffffb3; font-size: 12px; font-weight: 650; } .nav-sport-link:hover { background: #ffffff08; color: #fff; } .nav-sport-link svg { color: var(--cyan); } .mobile-menu-button { display: grid; height: 42px; width: 42px; place-items: center; border: 1px solid #ffffff18; border-radius: 10px; background: #ffffff05; color: #fff; cursor: pointer; } .mobile-nav { max-height: calc(100vh - 80px); overflow-y: auto; border-top: 1px solid #ffffff0d; background: #070a10f8; padding: 15px 20px 22px; box-shadow: 0 30px 60px #0009; } .mobile-nav[hidden] { display: none; } .mobile-direct, .mobile-section-button { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #ffffff0c; padding: 15px 4px; color: #fff; font-size: 14px; font-weight: 750; background: none; cursor: pointer; font-family: inherit; text-align: left; } .mobile-section-button svg { transition: transform .2s; } .mobile-section-button[aria-expanded="true"] svg { transform: rotate(180deg); } .mobile-submenu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-bottom: 1px solid #ffffff0c; padding: 10px 0 14px; } .mobile-submenu[hidden] { display: none; } .mobile-submenu a { border-radius: 8px; padding: 10px; color: #ffffff8c; font-size: 12px; } .mobile-submenu a:hover { background: #ffffff06; color: #fff; } .mobile-submenu a.all { color: var(--cyan); } .mobile-cta { margin-top: 16px; display: grid; gap: 12px; } /* ── REFERENCE: inner pages ────────────────────────────────────────────── */ .inner-hero { position: relative; min-height: 700px; overflow: hidden; } .inner-title { margin-top: 18px; font-size: clamp(3.4rem, 7vw, 7.3rem); font-weight: 950; line-height: .88; letter-spacing: -.065em; text-transform: uppercase; } .footer-head { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--cyan); } .footer-links { margin-top: 17px; display: flex; min-width: 140px; flex-direction: column; gap: 11px; font-size: 13px; color: #ffffff73; } .footer-links a:hover { color: #fff; } .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 35px; border: 1px solid #61caef28; border-radius: 24px; background: radial-gradient(circle at 80% 10%, #2372ff2b, transparent 40%), #0c111bd9; padding: 45px; } .cta-band h2 { margin: 12px 0 0; font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; } .inner-feature { border: 1px solid #ffffff10; border-radius: 20px; background: #ffffff05; padding: 32px; } .inner-feature h2 { margin: 25px 0 0; font-size: 26px; font-weight: 800; } .inner-feature p { margin: 13px 0 0; color: var(--body); line-height: 1.8; } .inner-feature ul { margin: 24px 0 0; display: grid; gap: 10px; padding: 0; } .inner-feature li { list-style: none; position: relative; padding-left: 20px; font-size: 13px; color: #cbd2de; } .inner-feature li:before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); } .sport-need { display: flex; align-items: center; gap: 13px; border: 1px solid #ffffff10; border-radius: 14px; background: #ffffff05; padding: 20px; color: var(--cyan); } .sport-need svg { flex: none; } .sport-need b { color: #fff; font-size: 14px; } .sport-card { position: relative; min-height: 310px; border: 1px solid #ffffff10; border-radius: 18px; background: linear-gradient(145deg, #101725, #080b11); padding: 26px; transition: .3s; display: block; } .sport-card:hover { transform: translateY(-5px); border-color: #61caef38; } .sport-card > span { color: var(--cyan); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; } .sport-card h2 { margin: 26px 0 0; font-size: 27px; font-weight: 900; } .sport-card p { margin: 12px 0 0; color: var(--body); font-size: 13px; line-height: 1.7; } .sport-card > svg { position: absolute; bottom: 24px; right: 24px; color: var(--cyan); } .sport-detail, .crm-card { border: 1px solid #ffffff10; border-radius: 18px; background: #ffffff04; padding: 30px; } .sport-detail > span { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--cyan); } .sport-detail h2, .crm-card h2 { margin: 14px 0 0; font-size: 25px; font-weight: 800; } .sport-detail p, .crm-card p { margin: 14px 0 20px; color: var(--body); line-height: 1.75; } .sport-detail div { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; color: #cbd2de; } .sport-detail div svg, .crm-card > svg { color: var(--cyan); } .photo-split { display: grid; gap: 55px; align-items: center; grid-template-columns: 1fr 1fr; } .photo-split img { width: 100%; height: 520px; object-fit: cover; border-radius: 22px; filter: saturate(.78) contrast(1.08); box-shadow: 0 30px 80px #0009; } .story-card { border-top: 1px solid #ffffff15; padding: 30px 0; } .story-card > span { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .2em; } .story-card h2 { margin: 16px 0 0; font-size: 25px; font-weight: 800; } .story-card p { margin: 12px 0 0; color: var(--body); line-height: 1.8; } .legal-copy { display: grid; gap: 42px; } .legal-copy h2 { font-size: 23px; font-weight: 800; } .legal-copy h3 { font-size: 17px; font-weight: 800; margin: 22px 0 0; } .legal-copy p, .legal-copy li { margin-top: 12px; color: #9aa5b6; line-height: 1.8; } .legal-copy ul, .legal-copy ol { margin-top: 15px; padding-left: 24px; } .legal-copy a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; } .legal-copy strong { color: #dbe2ec; } .legal-copy table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; } .legal-copy th, .legal-copy td { border: 1px solid #ffffff12; padding: 11px 13px; text-align: left; color: #9aa5b6; vertical-align: top; } .legal-copy th { color: #fff; font-weight: 800; background: #ffffff05; } .legal-scroll { overflow-x: auto; } /* ── REFERENCE: glass surfaces + the dashboard mock ────────────────────── */ .dashboard-shell, .map-shell, .pricing-card { position: relative; border: 1px solid #ffffff17; border-radius: 22px; background: linear-gradient(145deg, #121824d9, #090c13e8); box-shadow: 0 35px 100px #0009, inset 0 1px #ffffff0c; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); } .dashboard-shell { padding: 22px; transform: perspective(1400px) rotateY(-3deg); margin: 0 auto; width: 100%; max-width: 620px; } .dash-head { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; } .dash-head p { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; color: var(--cyan); } .dash-head h3 { margin: 4px 0 0; font-size: 20px; font-weight: 700; } .dash-avatar { height: 36px; width: 36px; border-radius: 50%; border: 1px solid #61caef4d; background: #2372ff26; } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .dash-panels { margin-top: 12px; display: grid; gap: 12px; } .mini-card, .panel { border: 1px solid #ffffff0e; background: #ffffff05; border-radius: 13px; } .mini-card { padding: 15px; } .mini-card strong { display: block; font-size: 21px; } .mini-card span { display: block; font-size: 9px; color: #ffffff62; text-transform: uppercase; letter-spacing: .1em; } .panel { padding: 16px; } .panel-head { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #ffffff69; } .panel-head .link { color: var(--cyan); } .event { display: flex; align-items: center; gap: 11px; border-top: 1px solid #ffffff0b; padding: 11px 0; } .event-time { width: 43px; border-radius: 8px; padding: 8px 4px; text-align: center; background: #ffffff07; font-size: 10px; font-weight: 800; flex: none; } .event-time.active { background: #2372ff25; color: var(--cyan); } .event b, .event small { display: block; } .event b { font-size: 11px; } .event small { margin-top: 3px; color: #ffffff48; font-size: 9px; } .event .going { margin-left: auto; border-radius: 999px; background: #34d3991a; padding: 4px 8px; font-size: 9px; font-weight: 800; color: #6ee7b7; white-space: nowrap; } .donut { width: 106px; height: 106px; margin: 12px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#36a8e0 87%, #ffffff0a 0); position: relative; } .donut:after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #10151f; } .donut > div { position: relative; z-index: 1; text-align: center; } .donut b, .donut small { display: block; } .donut b { font-size: 22px; } .donut small { color: #ffffff45; font-size: 9px; } .avail-rows { margin-top: 20px; display: grid; gap: 8px; font-size: 10px; } .avail-rows div { display: flex; justify-content: space-between; } .avail-rows span { color: #ffffff73; } .float-card { position: absolute; display: flex; align-items: center; gap: 10px; border: 1px solid #61caef30; background: #101a29e8; border-radius: 12px; padding: 12px 15px; box-shadow: 0 20px 50px #0008; color: var(--cyan); right: -20px; top: -36px; } .float-card svg { flex: none; } .float-card b, .float-card small { display: block; } .float-card b { font-size: 10px; color: #fff; } .float-card small { margin-top: 3px; font-size: 8px; color: #ffffff56; } .feature-card { border: 1px solid #ffffff10; border-radius: 18px; background: linear-gradient(145deg, #ffffff08, #ffffff025); padding: 28px; transition: .35s; min-height: 360px; } .feature-card:hover { transform: translateY(-6px); border-color: #61caef35; background: linear-gradient(145deg, #2372ff14, #ffffff035); } .feature-card h3 { margin: 32px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .feature-card p { margin: 16px 0 0; font-size: 14px; line-height: 1.85; color: var(--body); } .feature-card .tag { margin-top: 32px; border-top: 1px solid #ffffff14; padding-top: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; } .card-top .num { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: #ffffff2e; } .icon-box { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #61caef2b; border-radius: 10px; background: #2372ff13; color: var(--cyan); flex: none; } .map-shell { min-height: 515px; padding: 24px; } .map-head { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff14; padding: 20px; } .map-head b { font-size: 14px; font-weight: 800; } .map-head span { border-radius: 999px; background: #2372ff1f; padding: 5px 12px; font-size: 10px; font-weight: 800; color: var(--cyan); } .map-body { padding-top: 96px; } .org-node { display: flex; align-items: center; gap: 12px; border: 1px solid #ffffff12; background: #ffffff06; } .main-node { width: 78%; margin: auto; border-color: #61caef32; border-radius: 13px; padding: 17px; color: var(--cyan); } .org-node b, .org-node small { display: block; } .org-node b { color: #fff; font-size: 12px; } .org-node small { margin-top: 4px; color: #ffffff4f; font-size: 9px; } .connector-line { height: 50px; width: 1px; margin: auto; background: linear-gradient(#61caef66, #ffffff18); } .team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .team-node { position: relative; flex-direction: column; align-items: flex-start; border-radius: 12px; padding: 16px; } .team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .perm-row { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .permission { display: flex; align-items: center; gap: 11px; border: 1px solid #ffffff0d; border-radius: 11px; padding: 14px; color: var(--cyan); background: #05070b80; } .permission svg { flex: none; } .permission b, .permission small { display: block; } .permission b { font-size: 10px; color: #fff; } .permission small { margin-top: 3px; font-size: 8px; color: #ffffff48; } .pricing-card { overflow: hidden; background: linear-gradient(135deg, #101725, #070a10); } /* ═══ LAYOUT — the reference's Tailwind utilities, written out ═══════════ */ .wrap { margin: 0 auto; max-width: var(--shell); padding-inline: 20px; } .wrap-1200 { margin: 0 auto; max-width: 1200px; padding-inline: 20px; } .wrap-1100 { margin: 0 auto; max-width: 1100px; padding-inline: 20px; } .wrap-1000 { margin: 0 auto; max-width: 1000px; padding-inline: 20px; } .site-head { position: fixed; inset-inline: 0; top: 0; z-index: 50; border-bottom: 1px solid #ffffff14; background: #05070bd1; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); } .head-bar { margin: 0 auto; display: flex; height: 80px; max-width: var(--shell); align-items: center; justify-content: space-between; padding-inline: 20px; gap: 16px; } .brand { display: inline-flex; align-items: center; } .brand img { height: 44px; width: auto; display: block; } .desk-nav { display: none; align-items: center; gap: 4px; } .desk-cta { display: none; align-items: center; gap: 8px; } .hero { position: relative; display: flex; min-height: 940px; align-items: center; padding-top: 112px; } .hero-grid { position: relative; z-index: 10; margin: 0 auto; display: grid; width: 100%; max-width: var(--shell); align-items: center; gap: 64px; padding: 80px 20px; } .hero h1 { margin: 28px 0 0; max-width: 56rem; font-size: clamp(3.5rem, 7.5vw, 7.2rem); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.065em; } .hero h1 .blue-gradient { display: block; } .hero-sub { margin: 32px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.78; color: var(--body-2); } .hero-cta { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; } .hero-trust { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #ffffff7a; } .hero-trust span { display: inline-flex; align-items: center; gap: 6px; } .hero-trust svg { color: var(--cyan); } .stat-band { border-block: 1px solid #ffffff14; background: #ffffff05; } .stat-grid { margin: 0 auto; display: grid; max-width: var(--shell); grid-template-columns: repeat(2, 1fr); padding-inline: 20px; } .stat-grid > div { padding: 32px 8px; text-align: center; border-left: 1px solid #ffffff14; } .stat-grid > div:nth-child(2n+1) { border-left: 0; } .stat-grid .n { font-size: 30px; font-weight: 900; } .stat-grid .l { margin-top: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #ffffff61; } .head-split { display: grid; gap: 32px; } .head-split > p { max-width: 32rem; font-size: 18px; line-height: 1.78; color: var(--body); margin: 0; } .cards-3 { margin-top: 64px; display: grid; gap: 16px; } .cards-2 { margin-top: 64px; display: grid; gap: 20px; } .grid-3 { display: grid; gap: 16px; } .grid-4 { display: grid; gap: 16px; } .club-grid { margin: 0 auto; display: grid; max-width: var(--shell); gap: 56px; padding-inline: 20px; } .club-list { margin-top: 32px; display: grid; gap: 16px; } .club-list div { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; } .club-list .tick { display: grid; height: 24px; width: 24px; flex: none; place-items: center; border-radius: 50%; background: #2372ff26; color: var(--cyan); } .price-wrap { margin: 0 auto; max-width: 64rem; padding-inline: 20px; text-align: center; } .price-inner { display: grid; gap: 40px; padding: 28px; } .price-inner h3 { margin: 20px 0 0; font-size: 30px; font-weight: 900; } .price-inner > div > p { margin: 16px 0 0; max-width: 32rem; line-height: 1.7; color: var(--body); } .price-feats { margin-top: 28px; display: grid; gap: 12px; } .price-feats span { display: flex; gap: 8px; font-size: 14px; align-items: center; } .price-feats svg { color: var(--cyan); flex: none; } .price-side { display: flex; min-width: 12rem; flex-direction: column; justify-content: center; border-top: 1px solid #ffffff14; padding-top: 32px; } .price-side .from { font-size: 14px; color: #ffffff73; } .price-side .amt { margin: 4px 0; font-size: 48px; font-weight: 900; } .price-side .amt small { font-size: 16px; font-weight: 500; color: #ffffff66; } .price-note { margin-top: 16px; font-size: 12px; color: #ffffff5c; } .faq-grid { margin: 0 auto; display: grid; max-width: 1200px; gap: 56px; padding-inline: 20px; } .faq-grid > div:first-child > p { margin-top: 24px; color: var(--body); line-height: 1.7; } .faq details { border-bottom: 1px solid #ffffff1a; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary:after { content: ""; flex: none; width: 11px; height: 11px; margin-right: 4px; border-right: 2px solid #ffffff7a; border-bottom: 2px solid #ffffff7a; transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .faq details[open] summary:after { transform: rotate(225deg) translateY(-3px); } .faq details > div { padding: 0 32px 24px 0; font-size: 16px; line-height: 1.75; color: var(--body); } .inner-hero-bg { position: absolute; inset: 0; } .inner-hero-bg img { height: 100%; width: 100%; object-fit: cover; } .inner-hero-bg .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #05070b 8%, #05070be8 46%, #05070b55), linear-gradient(0deg, #05070b 0%, transparent 55%); } .inner-hero-inner { position: relative; margin: 0 auto; max-width: var(--shell); padding: 192px 20px 96px; } .inner-hero-inner .lede { margin: 28px 0 0; max-width: 42rem; font-size: 18px; line-height: 1.78; color: #aab4c4; } .site-foot { border-top: 1px solid #ffffff14; background: #030407; } .foot-grid { display: grid; gap: 40px; padding: 48px 0; } .foot-brand p { margin: 20px 0 0; max-width: 24rem; font-size: 14px; line-height: 1.7; color: #ffffff66; } .foot-legal { margin-top: 40px; border-top: 1px solid #ffffff14; padding-top: 24px; font-size: 12px; color: #ffffff4d; display: grid; gap: 8px; } .foot-legal p { margin: 0; } .legal-head { margin: 0 auto; max-width: 1000px; padding: 176px 20px 96px; } .legal-head .lede { margin: 24px 0 0; font-size: 18px; line-height: 1.78; color: var(--body); } .legal-updated { margin-top: 14px; font-size: 13px; color: #ffffff5c; } .not-seeing { margin-top: 20px; border-radius: 16px; border: 1px solid #ffffff1a; background: #ffffff09; padding: 28px; } .not-seeing h3 { margin: 12px 0 0; font-size: 24px; font-weight: 900; } .not-seeing p { margin: 12px 0 0; color: var(--body); line-height: 1.7; } /* All 163 sports, grouped by category — the tab strip and its panels. */ .sport-tabs { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; } .sport-tab { border: 1px solid #ffffff14; background: #ffffff05; color: #ffffffa8; border-radius: 999px; padding: 9px 15px; font: 700 12px/1 inherit; cursor: pointer; transition: .2s; } .sport-tab:hover { background: #ffffff0d; color: #fff; } .sport-tab[aria-selected="true"] { background: #2372ff1f; border-color: #61caef4d; color: var(--cyan); } .sport-panel { margin-top: 22px; } .sport-panel[hidden] { display: none; } .sport-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sport-chips span, .sport-chips a { border: 1px solid #ffffff10; background: #ffffff04; border-radius: 9px; padding: 9px 13px; font-size: 13px; color: #cbd2de; } .sport-chips a { color: var(--cyan); border-color: #61caef2e; background: #2372ff0d; font-weight: 700; } .sport-chips a:hover { background: #2372ff1f; } .sport-count { margin-top: 14px; font-size: 12px; color: #ffffff5c; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (min-width: 641px) { .hero-cta { flex-direction: row; flex-wrap: wrap; } .cards-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(2, 1fr); } .price-inner { padding: 48px; grid-template-columns: 1fr auto; } .price-side { border-top: 0; border-left: 1px solid #ffffff14; padding-top: 0; padding-left: 40px; } .mobile-cta { grid-template-columns: 1fr 1fr; } .mobile-cta .join { grid-column: 1 / -1; } } @media (min-width: 768px) { .head-split { grid-template-columns: repeat(2, 1fr); align-items: end; } .head-split > p { justify-self: end; } .foot-grid { grid-template-columns: 1fr auto auto; } .foot-legal { display: flex; justify-content: space-between; gap: 24px; } } @media (min-width: 1024px) { .wrap, .head-bar, .hero-grid, .club-grid, .stat-grid, .wrap-1200, .wrap-1100, .wrap-1000, .faq-grid, .price-wrap, .legal-head, .inner-hero-inner { padding-inline: 40px; } .desk-nav, .desk-cta { display: flex; } .mobile-menu-button { display: none; } .mobile-nav { display: none !important; } .hero-grid { grid-template-columns: 1.05fr .95fr; } .stat-grid { grid-template-columns: repeat(4, 1fr); } .stat-grid > div:nth-child(2n+1) { border-left: 1px solid #ffffff14; } .stat-grid > div:first-child { border-left: 0; } .cards-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .club-grid { grid-template-columns: repeat(2, 1fr); align-items: center; } .faq-grid { grid-template-columns: .7fr 1.3fr; } .inner-hero-inner { padding-block: 192px 128px; } } @media (max-width: 1023px) { .dashboard-shell { transform: none; } .section-pad { padding: 90px 0; } .photo-split { grid-template-columns: 1fr; } .cta-band { align-items: flex-start; flex-direction: column; } .float-card { display: none; } } @media (max-width: 640px) { .section-pad { padding: 75px 0; } .dashboard-shell { padding: 14px; } .map-shell { min-height: 450px; padding: 15px; } .feature-card { min-height: auto; } .section-title { font-size: 2.8rem; } .inner-title { font-size: 3.4rem; } .inner-hero { min-height: 620px; } .cta-band { padding: 28px; } .cta-band h2 { font-size: 28px; } .photo-split img { height: 380px; } .hero { min-height: 0; padding-top: 88px; } .hero-grid { gap: 48px; padding-block: 48px; } .inner-hero-inner { padding-block: 150px 72px; } .legal-head { padding-block: 140px 64px; } .team-row { grid-template-columns: 1fr; } .perm-row { grid-template-columns: 1fr; } .hero-cta .btn, .cta-actions .btn { width: 100%; } } /* ═══ PRICING PAGE ═══════════════════════════════════════════════════════ The pricing page predates the design port. Its markup is untouched — the figures in it are parsed straight out of src/lib/pricing.ts and verified by the build, and rewriting the page to change its paint would have risked the numbers. Instead its classes are restyled here in the reference's language: the same #05070b ground, the same cyan, the same glass cards and radii. ═══════════════════════════════════════════════════════════════════════ */ /* The page was written against an earlier token set. Aliasing rather than find-and-replacing keeps that diff at zero. */ :root { --ink: #f7f9ff; --ink-soft: #8793a6; --ink-mute: #ffffff5c; --ok: #3dd68c; --glass: #ffffff05; --line: #ffffff14; } .page-head { margin: 0 auto; max-width: var(--shell); padding: 176px 20px 40px; } .center { text-align: center; } .center .hero-cta { justify-content: center; } .page-head h1 { margin: 20px 0 0; font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.055em; } .page-head .lede { margin: 20px auto 0; max-width: 46rem; font-size: 18px; line-height: 1.75; color: var(--ink-soft); } .page-head .lede strong { color: #fff; } .note-line { margin-top: 16px; font-size: 13px; color: var(--ink-mute); } .tight { padding-top: 0; } section > .wrap > h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; margin: 0; } section > .wrap > h3 { font-size: 1.4rem; font-weight: 800; } .lede { font-size: 17px; line-height: 1.75; color: var(--ink-soft); } .grid { display: grid; gap: 16px; } .grid.g3 { grid-template-columns: 1fr; } .card { border: 1px solid #ffffff10; border-radius: 18px; padding: 26px; background: linear-gradient(145deg, #ffffff08, #ffffff025); } .card h3 { margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; } .card p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 8px; } .card.band { border-color: #61caef4d; background: linear-gradient(145deg, #2372ff1a, #ffffff05); box-shadow: 0 24px 70px #0007; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #cbd2de; } .ticks li svg, .ticks li .t { color: var(--cyan); flex: none; } .scroll-x { overflow-x: auto; border: 1px solid #ffffff10; border-radius: 14px; } .scroll-x table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } .scroll-x th, .scroll-x td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #ffffff0d; color: #cbd2de; } .scroll-x th { background: #ffffff07; color: #fff; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .scroll-x tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; } th.num, td.num { text-align: right; } .calc { margin-top: 20px; } .calc-card, .calc-cards > * { border: 1px solid #ffffff10; border-radius: 16px; background: #ffffff05; padding: 22px; } .calc-grid { display: grid; gap: 14px; } .calc-cards { display: grid; gap: 14px; margin-top: 16px; } .calc label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin-bottom: 7px; } .calc input, .calc select { width: 100%; border: 1px solid #ffffff1a; border-radius: 10px; background: #05070b; color: #fff; padding: 11px 13px; font: 500 15px inherit; } .calc input:focus, .calc select:focus { outline: 2px solid var(--cyan); outline-offset: 1px; } .calc-out { font-size: 30px; font-weight: 900; } .calc-verdict { margin-top: 14px; border-radius: 12px; border: 1px solid #ffffff14; padding: 15px; font-size: 14px; color: #cbd2de; } .calc-verdict.win { border-color: #3dd68c4d; background: #3dd68c12; color: #a7f3d0; } .calc-note { margin-top: 12px; font-size: 12px; color: var(--ink-mute); line-height: 1.65; } .toc { border: 1px solid #ffffff10; border-radius: 14px; background: #ffffff04; padding: 20px 24px; } .toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; } .toc a { color: #9aa5b6; } .toc a:hover { color: var(--cyan); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .calc-grid { grid-template-columns: repeat(2, 1fr); } .calc-cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .page-head { padding-inline: 40px; } } @media (max-width: 640px) { .page-head { padding-block: 140px 32px; } } /* ── Real product screenshots (19 Sep 2026) ─────────────────────────────── */ .shot-frame { position: relative; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 16px; background: #0b0f17; box-shadow: 0 35px 100px #000a, inset 0 1px #ffffff12; } .shot-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #ffffff12; background: #0f141d; } .shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #ffffff22; } .shot-frame img { display: block; width: 100%; height: auto; } .shot-hero { position: relative; margin: 0 auto; width: 100%; max-width: 660px; padding-bottom: 56px; } .shot-hero .shot-frame { transform: perspective(1600px) rotateY(-4deg); transform-origin: left center; } .shot-phone { position: absolute; right: -8px; bottom: 0; width: 30%; max-width: 210px; height: auto; filter: drop-shadow(0 30px 60px #000c); } .shot-club { margin: 0 auto; width: 100%; max-width: 640px; } .shot-tilt { transform: perspective(1600px) rotateY(4deg); transform-origin: right center; } .apps-band { position: relative; border-top: 1px solid #ffffff14; background: linear-gradient(180deg, #ffffff04, transparent); } .apps-grid { margin: 0 auto; display: grid; max-width: var(--shell); gap: 56px; padding-inline: 20px; align-items: center; } .apps-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; } .apps-steps li { display: flex; gap: 14px; align-items: flex-start; } .apps-steps li > b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2372ff26; color: var(--cyan); font-size: 13px; font-weight: 900; } .apps-steps strong { display: block; font-size: 15px; font-weight: 800; } .apps-steps span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--body); } .apps-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .apps-note { margin: 18px 0 0; font-size: 13px; color: #ffffff7a; } .store-badges { display: flex; flex-wrap: wrap; gap: 10px; } .store-badges a { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .15s ease, box-shadow .15s ease; } .store-badges a:hover { transform: translateY(-1px); box-shadow: 0 8px 24px #0008; } .store-badges img { display: block; height: 54px; width: auto; } .store-badges.stack { flex-direction: column; align-items: flex-start; } .store-badges.stack img { height: 45px; } .apps-phones { display: flex; justify-content: center; gap: 4%; align-items: flex-end; } .apps-phones img { width: 46%; max-width: 250px; height: auto; filter: drop-shadow(0 30px 60px #000b); } .apps-phones img:last-child { margin-bottom: 40px; } .foot-apps p { margin: 14px 0 16px; max-width: 16rem; font-size: 13px; line-height: 1.6; color: #ffffff66; } @media (min-width: 768px) { .foot-grid { grid-template-columns: 1fr auto auto auto; } } @media (min-width: 1024px) { .apps-grid { grid-template-columns: 1.1fr .9fr; } } @media (max-width: 1023px) { .shot-hero .shot-frame, .shot-tilt { transform: none; } } @media (max-width: 640px) { .shot-hero { padding-bottom: 40px; } .shot-phone { width: 34%; right: 0; } .apps-phones img { max-width: 46%; } } /* ── Owner, 20 Sep 2026: glass, motion, backlight ───────────────────────── */ /* The whole page sits on a slow blue backlight. z-index -1 paints it above the canvas (body's background) and below every in-flow element. */ .page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .page-glow::before, .page-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; } .page-glow::before { width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax; background: radial-gradient(circle, #2372ff45 0, #2372ff16 40%, transparent 68%); animation: glowDriftA 26s ease-in-out infinite alternate; } .page-glow::after { width: 60vmax; height: 60vmax; right: -25vmax; bottom: -30vmax; background: radial-gradient(circle, #61caef2e 0, #2372ff14 45%, transparent 70%); animation: glowDriftB 32s ease-in-out infinite alternate; } @keyframes glowDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 18vmax, 0) scale(1.15); } } @keyframes glowDriftB { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-16vmax, -14vmax, 0) scale(.95); } } /* The two section glows drift too. */ .hero-glow { animation: glowDriftHero 22s ease-in-out infinite alternate; } .club-glow { animation: glowDriftClub 28s ease-in-out infinite alternate; } @keyframes glowDriftHero { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-120px, 90px, 0) scale(1.12); } } @keyframes glowDriftClub { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(140px, -60px, 0) scale(1.1); } } /* Blue-gradient headlines: the gradient slides softly across the letters. */ .blue-gradient { background: linear-gradient(90deg, #2d79ff 0%, #61caef 35%, #8bdcff 50%, #61caef 65%, #2d79ff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientDrift 9s ease-in-out infinite alternate; } @keyframes gradientDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Carbon-black glass — one recipe, applied across the page. */ .feature-card, .pricing-card, .faq details, .apps-steps li, .cta-band, .stat-band, .shot-frame, .not-seeing, .eyebrow { background: linear-gradient(145deg, #0e1117b8, #05070bcc); border: 1px solid #ffffff14; box-shadow: 0 24px 70px #00000080, inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff05; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } .feature-card { border-radius: 20px; } .feature-card:hover { transform: translateY(-6px); border-color: #61caef40; background: linear-gradient(145deg, #16203ab8, #070a12d0); box-shadow: 0 30px 80px #00000099, 0 0 0 1px #61caef22, inset 0 1px 0 #ffffff1c; } .card-label { margin: 26px 0 0; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); line-height: 1.6; } .feature-card h3 { margin-top: 10px; } .stat-band { border-inline: 0; border-radius: 0; box-shadow: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #ffffff14; } .pricing-card { border-radius: 24px; } .price-side .from { font-size: 14px; line-height: 1.5; color: #ffffffa6; margin-bottom: 18px; } .faq { display: grid; gap: 12px; } .faq details { border-radius: 16px; padding: 0 22px; border-bottom: 1px solid #ffffff14; } .faq details[open] { border-color: #61caef33; } .faq summary { padding: 20px 0; } .faq details > div { padding: 0 32px 22px 0; } .apps-steps li { border-radius: 14px; padding: 14px 16px; } .eyebrow { background: linear-gradient(145deg, #0e1117b8, #05070bcc); border-color: #61caef2e; } .shot-frame { background: #0b0f17; } @media (prefers-reduced-motion: reduce) { .page-glow::before, .page-glow::after, .hero-glow, .club-glow, .blue-gradient { animation: none; } }