/* ═══════════════════════════════════════════════════════════════════ TrailForge — site.css Dark-only. One accent. Tokens ported from the app (Colors.swift, DESIGN_SYSTEM.md); tints keep the app's meaning: teal = distance, lime = climb, indigo = time, amber = energy, magenta = heart rate. ═══════════════════════════════════════════════════════════════════ */ @font-face { font-family:"Bricolage Grotesque"; src:url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; } @font-face { font-family:"Geist"; src:url("/assets/fonts/geist.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:"Geist Mono"; src:url("/assets/fonts/geist-mono.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face { font-family:"Instrument Serif"; src:url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } /* Metric-matched fallbacks so the swap does not reflow the fold. */ @font-face { font-family:"Bricolage Fallback"; src:local("Helvetica Neue"), local("Arial"); size-adjust:97%; } @font-face { font-family:"Serif Fallback"; src:local("Georgia"); font-style:italic; size-adjust:94%; } :root { color-scheme:dark; --orange:#FF7A00; --orange-light:#FF9A33; --orange-dark:#CC5F00; --orange-rgb:255 122 0; --t-distance:43 220 180; --t-vert:201 255 96; --t-time:106 123 255; --t-energy:255 177 71; --t-hr:255 79 148; --t-fluid:64 181 200; --t-done:52 199 89; --t-rest:43 220 180; /* the app draws Rest steps in this teal (sampled from the workout screenshot) */ --garmin:#007CC3; --strava:#FC4C02; --bg:#0A0A0A; --card:#1C1C1E; --inset:rgba(255,255,255,.04); --stroke:rgba(255,255,255,.06); --stroke-strong:rgba(255,255,255,.10); --text:#FFFFFF; --text-2:#B3B3B3; --text-3:rgba(255,255,255,.55); --text-4:rgba(255,255,255,.50); --display:"Bricolage Grotesque","Bricolage Fallback",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --serif:"Instrument Serif","Serif Fallback",Georgia,serif; --sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.16,1,.3,1); --press:130ms; --target:44px; --nav-h:56px; --gutter:clamp(16px,5vw,32px); --section-y:clamp(72px,10vw,136px); --measure:34rem; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:18px; --r-3xl:24px; --shadow-btn:0 2px 4px rgba(255,122,0,.20); } @media (min-width:900px) { :root { --nav-h:64px; } } /* ── Reset ─────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; padding:0; } html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); } body { background:var(--bg); color:var(--text); font:400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-wrap:break-word; overflow-x:clip; } img,svg,video,canvas { display:block; max-width:100%; } img { height:auto; } a { color:inherit; } ul,ol { list-style:none; } button { font:inherit; color:inherit; background:none; border:0; } :focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; } :focus:not(:focus-visible) { outline:none; } main:focus, section:focus, .summit:focus, .hero:focus { outline:none; } .vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (prefers-contrast:more) { :root { --text-2:#D6D6D6; --text-3:rgba(255,255,255,.78); --text-4:rgba(255,255,255,.68); } } /* Launch switch — one attribute on , nothing branches on the date. */ html[data-launch="before"] [data-when="after"] { display:none !important; } html[data-launch="after"] [data-when="before"] { display:none !important; } /* ── Layout ────────────────────────────────────────────────────── */ .wrap { width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); } .wrap--wide { max-width:1280px; } .section { padding-block:var(--section-y); position:relative; } .section__head { max-width:62ch; margin-bottom:clamp(36px,5vw,64px); } .grid > *, .cluster > *, .feature > *, .facts > *, .loop__cards > *, .integrations > *, .ledger__row > * { min-width:0; } .skip-link { position:absolute; left:16px; top:-100px; z-index:300; padding:12px 16px; background:var(--orange); color:#fff; border-radius:var(--r-lg); font-weight:600; text-decoration:none; } .skip-link:focus { top:12px; } #top-sentinel { position:absolute; top:0; left:0; width:1px; height:1px; } /* ── Type ──────────────────────────────────────────────────────── */ h1,h2,h3 { font-family:var(--display); font-optical-sizing:auto; text-wrap:balance; } .h-hero { font-size:clamp(2.75rem,1.6rem + 4.6vw,4.75rem); font-weight:680; letter-spacing:-.035em; line-height:.98; } .h-section { font-size:clamp(2rem,1.35rem + 2.4vw,3.5rem); font-weight:640; letter-spacing:-.03em; line-height:1.04; } h3 { font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); font-weight:600; letter-spacing:-.01em; line-height:1.25; } .serif { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--orange); font-size:1.08em; } .lede { color:var(--text-2); font-size:1.1875rem; line-height:1.5; margin-top:18px; } .eyebrow { font:500 .6875rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:14px; } .micro { font:500 .6875rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .num { font-family:var(--display); font-weight:720; font-variant-numeric:tabular-nums; letter-spacing:-.04em; line-height:.9; font-feature-settings:"tnum"; } .num--hero { font-size:clamp(4rem,2.5rem + 6vw,8rem); } .num--mid { font-size:clamp(2.5rem,1.6rem + 3.4vw,4.5rem); } p b, li b { color:var(--text); font-weight:600; } /* Line masks for the hero reveal. */ .line { display:block; overflow:clip; } .line > span { display:block; } /* ── Buttons ───────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--target); padding:0 24px; border:0; border-radius:var(--r-lg); font:600 1.0625rem/1 var(--sans); letter-spacing:-.01em; text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative; transition:transform var(--press) var(--ease), opacity var(--press) var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease); } .btn svg { flex:none; } .btn > span { display:inline-flex; align-items:center; gap:8px; transition:transform 300ms var(--ease); } /* White on #FF7A00 is 2.6:1 — kept for brand fidelity with the app's PrimaryButtonStyle. */ .btn--primary { background:var(--orange); color:#fff; box-shadow:var(--shadow-btn); } .btn--primary:hover { opacity:.94; } .btn--primary:active { transform:scale(.97); opacity:.88; } .btn--ghost { background:var(--inset); color:var(--text); border:1px solid var(--stroke); } .btn--ghost:hover { border-color:var(--stroke-strong); background:rgba(255,255,255,.07); } .btn--sm { min-height:40px; padding:0 16px; font-size:.9375rem; } .btn--block { width:100%; } .btn[disabled] { opacity:.55; pointer-events:none; } /* ── Surfaces ──────────────────────────────────────────────────── */ .glow-card { --glow:.12; padding:22px; border-radius:var(--r-xl); border:1px solid var(--stroke); background:linear-gradient(to bottom right,rgb(var(--orange-rgb) / var(--glow)) 0%,transparent 50%) border-box no-repeat,var(--card); transition:translate 300ms var(--ease), border-color 300ms var(--ease); } /* `translate`, not `transform`: GSAP leaves an inline transform on revealed cards. */ .glow-card:hover, .glow-card:focus-within { border-color:var(--stroke-strong); translate:0 -2px; } .section-card { padding:22px; background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-3xl); } .chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:var(--inset); border:1px solid var(--stroke); font:500 .75rem/1.2 var(--mono); color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; } .chip i { width:6px; height:6px; border-radius:50%; background:rgb(var(--tint,var(--orange-rgb))); } .note { font-size:.8125rem; line-height:1.5; color:var(--text-3); padding:12px 14px; background:var(--inset); border-radius:var(--r-xl); } .note b { color:var(--text); font-weight:600; } /* ── Nav ───────────────────────────────────────────────────────── */ .nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; gap:16px; height:var(--nav-h); padding-inline:var(--gutter); background:rgba(10,10,10,.92); border-bottom:1px solid var(--stroke); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:background 240ms var(--ease), border-color 240ms var(--ease); } .nav.is-top { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } .nav__logo { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; } .nav__logo svg { width:30px; height:30px; } .nav__logo span { font-family:var(--display); font-size:1.0625rem; font-weight:640; letter-spacing:-.02em; } .nav__links { display:none; } .nav__links a { font-size:.9375rem; color:var(--text-2); text-decoration:none; padding-block:11px; margin-block:-11px; transition:color 200ms var(--ease); } .nav__links a:hover { color:var(--text); } @media (min-width:900px) { .nav__links { display:flex; gap:32px; align-items:center; } } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { position:relative; overflow:clip; isolation:isolate; min-height:100svh; display:grid; align-items:center; padding-block:calc(var(--nav-h) + 40px) 48px; } .hero__scene, .hero__canvas, .hero__fallback, .hero__fog, .hero__grain, .hero__horizon { position:absolute; inset:0; pointer-events:none; } .hero__scene { z-index:0; } .hero__canvas { z-index:0; width:100%; height:100%; opacity:0; transition:opacity 900ms linear; } .hero__canvas.is-ready { opacity:1; } .hero__canvas.is-lost { opacity:0; } .hero__fallback { z-index:0; background:url("/assets/topo.jpg") center/384px repeat; background-image:image-set(url("/assets/topo.avif") type("image/avif"), url("/assets/topo.jpg") type("image/jpeg")); opacity:.09; -webkit-mask-image:radial-gradient(120% 90% at 30% 70%,#000 0%,rgba(0,0,0,.4) 50%,transparent 78%); mask-image:radial-gradient(120% 90% at 30% 70%,#000 0%,rgba(0,0,0,.4) 50%,transparent 78%); transition:opacity 900ms linear; } .hero.has-gl .hero__fallback { opacity:0; } .hero.is-lost .hero__fallback { opacity:.09; } .hero__horizon { z-index:1; background:radial-gradient(60% 34% at 55% 64%,rgba(255,122,0,.16),transparent 70%); } .hero__fog { z-index:2; background: radial-gradient(120% 90% at 50% 45%,transparent 55%,#0A0A0A 100%), linear-gradient(90deg,rgba(10,10,10,.82) 0 26%,transparent 56%), linear-gradient(180deg,#0A0A0A 0%,transparent 26%,transparent 88%,#0A0A0A 100%); } @media (max-width:899px) { .hero__fog { background: radial-gradient(120% 90% at 50% 45%,transparent 55%,#0A0A0A 100%), linear-gradient(180deg,#0A0A0A 0%,rgba(10,10,10,.55) 22%,transparent 44%,transparent 88%,#0A0A0A 100%); } } .hero__grain { z-index:3; background:url("/assets/grain.png") 0 0/96px 96px repeat; opacity:.035; mix-blend-mode:overlay; } @media (hover:hover) and (pointer:fine) { .js-anim .hero__grain { animation:grain 1.2s steps(6) infinite; } } @keyframes grain { to { background-position:96px 96px; } } .hero__inner { position:relative; z-index:4; display:grid; gap:40px; } .hero__copy { max-width:40rem; } .hero__title { color:var(--text); } .hero__title .serif { display:block; } .hero__link { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding-bottom:3px; font:500 .8125rem/1 var(--sans); color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--stroke-strong); transition:color 200ms var(--ease), border-color 200ms var(--ease); } .hero__link:hover { color:var(--text); border-color:var(--text); } .hero__meta { margin-top:16px; font:400 .8125rem/1.6 var(--sans); color:var(--text-3); } .hero__meta .mono { font-size:.75rem; } .hero__device { position:relative; display:flex; justify-content:center; } .hero__cue { position:absolute; right:var(--gutter); bottom:26px; z-index:5; display:none; flex-direction:column; align-items:center; gap:10px; font:500 .6875rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); writing-mode:vertical-rl; } .hero__cue i { width:1px; height:36px; background:linear-gradient(180deg,var(--orange),transparent); display:block; transform-origin:top; } .js-anim .hero__cue i { animation:cue 2.2s var(--ease) infinite; } @keyframes cue { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} } @media (min-width:900px) { .hero__inner { grid-template-columns:7fr 5fr; align-items:center; gap:clamp(32px,5vw,72px); } .hero__device { align-self:end; justify-content:flex-end; padding-right:2vw; } .hero__cue { display:flex; } .hero { padding-bottom:6vh; } } /* Short viewports: keep the whole fold on screen. */ @media (min-width:900px) and (max-height:820px) { .h-hero { font-size:clamp(2.5rem,1.4rem + 3.6vw,4.25rem); } .lede { font-size:1.0625rem; margin-top:14px; } .cta-slot { margin-top:22px; min-height:150px; } .hero__meta { margin-top:12px; } .signup__check { margin-top:10px; } .signup__consent { display:none; } .hero { padding-top:calc(var(--nav-h) + 24px); } } /* CTA slot — the pre-launch form and the launched buttons share one reserved height, so the composition does not jump when the switch flips. */ .cta-slot { min-height:180px; margin-top:26px; } @media (max-width:479px) { .cta-slot { min-height:236px; } } .hero__actions { display:flex; flex-wrap:wrap; gap:12px; } .hero__actions .btn { flex:1 1 220px; } @media (min-width:600px) { .hero__actions .btn { flex:0 0 auto; } } /* Hero intro — pure CSS, runs before any script parses. */ .js-anim .hero__title .line > span { transform:translateY(112%); animation:rise 900ms var(--ease) forwards; animation-delay:calc(60ms + var(--i,0) * 85ms); } .js-anim .hero__fade { opacity:0; animation:fadeUp 800ms var(--ease) forwards; animation-delay:var(--d,380ms); } @keyframes rise { to { transform:none; } } @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } /* ── CSS-3D device ─────────────────────────────────────────────── */ .device { --w:320px; --rx:4deg; --ry:-14deg; --prx:0deg; --pry:0deg; --dim:0; --yaw:0; --radius:calc(var(--w) * .1625); --inner:calc(var(--w) * .1375); position:relative; width:var(--w); max-width:100%; transform-style:preserve-3d; transform:perspective(1400px) rotateX(calc(var(--rx) + var(--prx))) rotateY(calc(var(--ry) + var(--pry))) translate3d(var(--tx,0px),var(--ty,0px),0); will-change:transform; } .device__slab { position:absolute; inset:0; border-radius:var(--radius); background:#141416; } .device__slab--1 { transform:translateZ(-2px); background:#131315; } .device__slab--2 { transform:translateZ(-4px); background:#101012; } .device__slab--3 { transform:translateZ(-6px); background:#0C0C0E; box-shadow:0 40px 80px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.4); } .device__body { position:relative; padding:10px; border-radius:var(--radius); background:linear-gradient(160deg,#2C2C30,#151517); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 2px rgba(0,0,0,.6); transform:translateZ(0); } .device__screen { position:relative; display:block; border-radius:var(--inner); overflow:hidden; background:#000; transform:translateZ(1px); aspect-ratio:1320/2868; } .device__screen img { width:100%; height:100%; object-fit:cover; display:block; } .device__island { position:absolute; top:calc(10px + var(--w) * .038); left:50%; width:calc(var(--w) * .30); height:calc(var(--w) * .078); translate:-50% 0; background:#000; border-radius:999px; transform:translateZ(2px); pointer-events:none; } .device__dim { position:absolute; inset:10px; border-radius:var(--inner); background:#000; opacity:var(--dim); transform:translateZ(2px); pointer-events:none; } .device__glass { position:absolute; inset:10px; border-radius:var(--inner); pointer-events:none; transform:translateZ(3px); background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%); background-size:260% 100%; background-position:calc(50% + var(--yaw) * 2.2%) 0; mix-blend-mode:screen; opacity:.9; } .device__shadow, .device__glow { position:absolute; left:8%; right:8%; bottom:-30px; height:64px; border-radius:50%; pointer-events:none; transform:translateZ(-10px); } .device__shadow { background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%); } .device__glow { background:radial-gradient(ellipse at center,rgba(255,122,0,.18),transparent 70%); bottom:-40px; height:90px; } .device--sm { --w:300px; } @media (max-width:899px) { .device { --w:min(78vw,300px); } } @media (min-width:900px) { .hero .device { --w:clamp(240px,calc((100svh - 230px) * .46),320px); } } /* Hero device intro: arrives from the dark, screen wakes, one glare sweep. */ .js-anim .hero .device { animation:deviceIn 1100ms var(--ease) both; } @keyframes deviceIn { from { opacity:0; transform:perspective(1400px) rotateX(var(--rx)) rotateY(-40deg) translate3d(0,40px,-140px); } to { opacity:1; transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,0,0); } } .js-anim .hero .device.is-settled { animation:none; } .js-anim .hero .device__dim { opacity:1; animation:wake 520ms linear 420ms forwards; } @keyframes wake { to { opacity:0; } } .js-anim .hero .device__glass { animation:sweep 900ms var(--ease) 620ms 1; } @keyframes sweep { from { background-position:-70% 0; } to { background-position:170% 0; } } /* ── Fact band (slate) ─────────────────────────────────────────── */ .facts { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; padding-top:22px; } .facts__line { position:absolute; top:0; left:0; right:0; height:1px; background:var(--stroke-strong); transform-origin:left; } .facts > div { padding:8px 0 22px; } .facts .micro { margin-bottom:8px; } .facts .value { font:600 1rem/1.3 var(--sans); font-variant-numeric:tabular-nums; } @media (min-width:600px) { .facts { grid-template-columns:repeat(4,1fr); } } .mask { display:block; overflow:clip; } .mask > span { display:block; } /* ── The loop ──────────────────────────────────────────────────── */ .loop { position:relative; } .loop__trail { display:none; width:100%; height:auto; margin:8px 0 -34px; overflow:visible; } .loop__trail path { fill:none; stroke-linecap:round; stroke-linejoin:round; } .loop__trail .glow { stroke:rgb(var(--orange-rgb) / .2); stroke-width:8; } .loop__trail .core { stroke:var(--orange); stroke-width:2; } .loop__trail .base { stroke:rgba(255,255,255,.08); stroke-width:1; } .loop__marker circle { fill:#0A0A0A; stroke:rgba(255,255,255,.25); stroke-width:1.5; transition:fill 400ms var(--ease), stroke 400ms var(--ease); } .loop__marker.is-lit circle { fill:var(--orange); stroke:var(--orange); } .loop__marker path { fill:none; stroke:#0A0A0A; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .loop__cards { display:grid; gap:12px; grid-template-columns:1fr; } .loop__n { font:500 .75rem/1 var(--mono); letter-spacing:.1em; color:var(--orange); } .loop__cards h3 { margin:12px 0 6px; } .loop__cards p { font-size:.9375rem; color:var(--text-2); line-height:1.5; } .loop__vline { position:absolute; left:11px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.08); } .loop__vline i { position:absolute; inset:0; background:var(--orange); transform-origin:top; transform:scaleY(0); } .loop__stack { position:relative; padding-left:36px; } .loop__dot { position:absolute; left:-31px; top:22px; width:12px; height:12px; border-radius:50%; background:#0A0A0A; border:1.5px solid rgba(255,255,255,.25); transition:background 400ms var(--ease), border-color 400ms var(--ease); } .loop__dot.is-lit { background:var(--orange); border-color:var(--orange); } @media (min-width:900px) { .loop { min-height:100svh; display:grid; align-content:center; } .loop__trail { display:block; } .loop__cards { grid-template-columns:repeat(4,1fr); gap:16px; } .loop__vline, .loop__dot { display:none; } .loop__stack { padding-left:0; } } /* ── Feature rows ──────────────────────────────────────────────── */ .feature { display:grid; gap:40px; align-items:center; padding-block:var(--section-y); border-top:1px solid var(--stroke); } .feature h2 { font-size:clamp(1.75rem,1.3rem + 2vw,3rem); font-weight:640; letter-spacing:-.03em; line-height:1.06; } .feature__copy > p { color:var(--text-2); margin-top:18px; line-height:1.6; } .feature__points { margin-top:22px; display:grid; gap:12px; } .feature__points li { display:flex; gap:11px; font-size:.9375rem; color:var(--text-2); line-height:1.5; } .feature__points svg { flex:none; margin-top:3px; color:var(--orange); } .feature__media { position:relative; display:flex; justify-content:center; } @media (min-width:900px) { .feature { grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); } .feature--flip > .feature__media { order:-1; } } @media (min-width:1100px) { } /* ── Fuel data ─────────────────────────────────────────────────── */ .fuel { --glow:.16; width:100%; } .fuel__finish { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .fuel__finish .num { color:var(--text); font-size:clamp(3rem,1.5rem + 4vw,5.25rem); } .fuel__finish .unit { font:500 1.25rem/1 var(--mono); color:var(--text-2); } .fuel__finish .micro { flex-basis:100%; margin-top:10px; } .fuel__rows { margin-top:22px; display:grid; gap:16px; } .fuel__row { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; } .fuel__name { display:flex; align-items:center; gap:8px; font-weight:500; font-size:.9375rem; } .fuel__name i { width:8px; height:8px; border-radius:50%; background:rgb(var(--tint)); } .fuel__val { font:500 .9375rem/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--text-2); white-space:nowrap; } .fuel__val b { font-size:1.0625rem; color:var(--text); font-weight:600; } .fuel__track { grid-column:1 / -1; position:relative; height:4px; border-radius:2px; background:rgba(255,255,255,.1); } .fuel__track::before { content:""; position:absolute; inset:0; border-radius:2px; background:rgb(var(--tint)); transform-origin:left; transform:scaleX(var(--p,0)); } .fuel__thumb { position:absolute; top:50%; left:calc(var(--p,0) * 100%); width:18px; height:18px; border-radius:50%; background:#fff; translate:-50% -50%; box-shadow:0 1px 4px rgba(0,0,0,.5); } .fuel__foot { margin-top:22px; padding-top:14px; border-top:1px solid var(--stroke); font:400 .8125rem/1.4 var(--sans); color:var(--text-3); display:flex; justify-content:space-between; gap:12px; } .fuel__foot b { font-family:var(--mono); font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; } /* ── Ledger (Week 5) ───────────────────────────────────────────── */ .ledger { --glow:.1; width:100%; padding:18px 20px; } .ledger__head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .ledger__head b { font-family:var(--display); font-weight:640; font-size:1.125rem; letter-spacing:-.02em; white-space:nowrap; } .ledger__head span { font:500 .75rem/1 var(--mono); color:var(--text-3); } .ledger__totals { display:flex; gap:16px; margin-top:8px; font:500 .875rem/1.3 var(--mono); font-variant-numeric:tabular-nums; color:var(--text-3); flex-wrap:wrap; } .ledger__totals b { font-weight:600; color:rgb(var(--tint)); } .ledger__rows { margin-top:14px; border-top:1px solid var(--stroke); } .ledger__row { display:grid; grid-template-columns:22px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:2px; align-items:center; padding:11px 0; border-bottom:1px solid var(--stroke); } .ledger__row .check { grid-row:1 / span 2; width:22px; height:22px; } .ledger__name { font-weight:500; font-size:.875rem; white-space:nowrap; } .ledger__when { grid-column:2; font:400 .6875rem/1.2 var(--mono); color:var(--text-3); white-space:nowrap; } .ledger__val { font:500 .8125rem/1.2 var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums; color:rgb(var(--t-done)); text-align:right; } .ledger__val b { font-weight:600; } .ledger__plan { grid-column:3; font:400 .6875rem/1.2 var(--mono); color:var(--text-3); text-align:right; white-space:nowrap; } .check circle { fill:rgb(var(--t-done) / .16); } .check path { fill:none; stroke:rgb(var(--t-done)); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* ── Profile (race day) ────────────────────────────────────────── */ .profile-wrap { padding-bottom:clamp(40px,6vw,72px); } .profile { position:relative; } .profile__head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px; } .profile__head .micro { margin-bottom:6px; } .profile__time { font-family:var(--display); font-weight:640; font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .profile__sub { font:400 .8125rem/1.3 var(--mono); color:var(--text-3); margin-top:6px; } .profile__scroller { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .profile svg { width:100%; min-width:640px; height:auto; display:block; overflow:visible; } .profile .grid-line { stroke:rgba(255,255,255,.08); stroke-width:1; } .profile .axis-label { font:500 11px var(--mono); fill:rgba(255,255,255,.5); } .profile__line { fill:none; stroke:var(--orange); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .profile__area { fill:rgb(var(--orange-rgb) / .22); } .profile__dot circle { fill:var(--orange); } .profile__dot .ring { fill:none; stroke:rgb(var(--orange-rgb) / .35); stroke-width:6; } .profile__readout { font:500 12px var(--mono); fill:#fff; } .profile__caption { margin-top:12px; font:400 .75rem/1.4 var(--mono); color:var(--text-4); } /* ── Intervals + weeks ─────────────────────────────────────────── */ .intervals { --glow:.1; width:100%; } .intervals__strip { display:flex; gap:4px; height:10px; margin-top:14px; } .intervals__strip i { display:block; border-radius:3px; background:rgb(var(--tint)); transform-origin:left; } .intervals__legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .intervals__legend .chip { white-space:normal; } .intervals__foot { margin-top:14px; font:400 .75rem/1.4 var(--mono); color:var(--text-3); } .weeks { margin-top:18px; padding-top:16px; border-top:1px solid var(--stroke); display:grid; gap:12px; } .weeks__row { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:baseline; } .weeks__row .micro { grid-column:1 / -1; } .weeks__bar { grid-column:1 / -1; position:relative; height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; } .weeks__bar i { position:absolute; inset:0; border-radius:3px; background:rgb(var(--tint)); transform-origin:left; transform:scaleX(var(--p)); } .weeks__val { font:500 .875rem/1.2 var(--mono); font-variant-numeric:tabular-nums; color:var(--text-3); } .weeks__val b { color:rgb(var(--tint)); font-weight:600; } /* ── Analysis stats ────────────────────────────────────────────── */ .stats { --glow:.12; width:100%; } .stats__pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .stats__pair .num { font-size:clamp(2.75rem,1.6rem + 4.2vw,5rem); } .stats__pair .unit { font:500 1rem/1 var(--mono); color:var(--text-2); margin-left:6px; } .stats__pair .micro { margin-top:10px; } .stats__row { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--stroke); } .zones { display:flex; gap:3px; margin-top:18px; } .zones span { flex:1; display:grid; gap:6px; font:500 .625rem/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); } .zones i { display:block; height:6px; border-radius:2px; background:var(--z); } /* ── Integrations ──────────────────────────────────────────────── */ .integrations { display:grid; gap:16px; align-items:stretch; } .provider__head { display:flex; align-items:center; gap:12px; } .provider__dot { width:10px; height:10px; border-radius:50%; background:var(--brand); flex:none; } .provider__head h3 { font-size:1.125rem; } .provider__tag { margin-left:auto; font:500 .6875rem/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--brand); color:color-mix(in srgb,var(--brand) 62%,#fff); } .provider p { font-size:.9375rem; color:var(--text-2); margin-top:12px; line-height:1.55; } .provider ul { margin-top:12px; display:grid; gap:9px; } .provider li { display:flex; gap:10px; font-size:.875rem; color:var(--text-2); } .provider li svg { flex:none; margin-top:2px; color:var(--brand); } .link-lines { display:none; align-self:center; } .link-lines svg { width:100%; height:auto; overflow:visible; } .link-lines path { fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; } .link-lines .mark { width:44px; height:44px; } @media (min-width:900px) { .integrations { grid-template-columns:1fr 160px 1fr; } .link-lines { display:grid; place-items:center; } } .callout { margin-top:16px; padding:20px; border-radius:var(--r-xl); background:var(--inset); border:1px solid var(--stroke); } .callout p { font-size:.9375rem; color:var(--text-2); line-height:1.6; } /* ── Capability grid ───────────────────────────────────────────── */ .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); } .grid__item h3 { margin:12px 0 7px; } .grid__item p { font-size:.9375rem; color:var(--text-2); line-height:1.5; } .grid__icon { --tint:var(--orange-rgb); width:38px; height:38px; border-radius:var(--r-lg); display:grid; place-items:center; background:rgb(var(--tint) / .14); color:rgb(var(--tint)); } /* ── FAQ ───────────────────────────────────────────────────────── */ .faq { max-width:760px; } .faq__item { border-bottom:1px solid var(--stroke); } .faq__q { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--target); padding:18px 0; font-family:var(--display); font-weight:500; font-size:1.25rem; letter-spacing:-.015em; line-height:1.3; cursor:pointer; list-style:none; } .faq__q::-webkit-details-marker { display:none; } .faq__chevron { flex:none; color:var(--text-3); transition:transform 180ms var(--ease); } .faq__item[open] .faq__chevron { transform:rotate(180deg); } .faq__a { padding-bottom:18px; color:var(--text-2); font-size:.9375rem; line-height:1.6; } .faq__a a { color:var(--orange); } /* ── Summit (final CTA) ────────────────────────────────────────── */ .summit { position:relative; overflow:clip; isolation:isolate; min-height:100svh; display:grid; align-items:center; text-align:center; padding-block:var(--section-y); } .summit__canvas, .summit__fog, .summit__fallback { position:absolute; inset:0; pointer-events:none; } .summit__canvas { z-index:0; width:100%; height:100%; opacity:0; transition:opacity 900ms linear; } .summit__canvas.is-ready { opacity:1; } .summit__fallback { z-index:0; background:url("/assets/topo.jpg") center/384px repeat; background-image:image-set(url("/assets/topo.avif") type("image/avif"), url("/assets/topo.jpg") type("image/jpeg")); opacity:.12; -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 72%); mask-image:radial-gradient(ellipse at center,#000,transparent 72%); transition:opacity 900ms linear; } .summit.has-gl .summit__fallback { opacity:0; } .summit.is-lost .summit__fallback { opacity:.12; } .summit__fog { z-index:1; background:radial-gradient(80% 60% at 50% 46%,rgba(10,10,10,.5) 0%,rgba(10,10,10,.3) 45%,rgba(10,10,10,.85) 100%), linear-gradient(180deg,#0A0A0A 0%,transparent 22%,transparent 80%,#0A0A0A 100%); } .summit .wrap { position:relative; z-index:2; } .summit h2 { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--orange); font-size:clamp(3rem,2rem + 5vw,6.5rem); letter-spacing:-.02em; line-height:1; } .summit__lede { color:var(--text-2); margin:18px auto 0; max-width:46ch; } .summit .cta-slot { margin-top:28px; } .summit .signup { margin-inline:auto; text-align:left; } .summit .hero__meta { margin-top:18px; } .summit .signup__input { background:rgba(10,10,10,.85); } /* ── Signup form ───────────────────────────────────────────────── */ .signup { max-width:30rem; } .signup__row { display:flex; flex-wrap:wrap; gap:10px; } .signup__row > * { min-width:0; } .signup__input { flex:1 1 220px; min-height:var(--target); padding:0 18px; border-radius:999px; border:1px solid var(--stroke-strong); background:rgba(255,255,255,.05); color:var(--text); font:400 1.0625rem/1 var(--sans); -webkit-appearance:none; appearance:none; transition:border-color 200ms var(--ease), background-color 200ms var(--ease); } .signup__input::placeholder { color:var(--text-4); } .signup__input:focus-visible { outline:2px solid var(--orange); outline-offset:1px; border-color:transparent; } .signup .btn { flex:0 0 auto; border-radius:999px; } @media (max-width:479px) { .signup .btn { width:100%; } } .signup__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .signup__check { display:flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:.8125rem; line-height:1.5; color:var(--text-2); cursor:pointer; } .signup__check input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--orange); } .signup__consent { margin-top:10px; font-size:.8125rem; line-height:1.5; color:var(--text-3); } .signup__consent a { color:var(--orange); } .signup__status { margin-top:8px; min-height:24px; font-size:.875rem; line-height:1.5; } .signup__status[data-state="ok"] { color:rgb(var(--t-distance)); } .signup__status[data-state="err"] { color:#FF9A9A; } .signup[data-busy] .signup__input, .signup[data-busy] .btn { opacity:.55; pointer-events:none; } /* ── Footer ────────────────────────────────────────────────────── */ .footer { border-top:1px solid var(--stroke); padding-block:40px 56px; } .footer .nav__logo { display:inline-flex; margin-right:0; } .footer__nav { display:flex; flex-wrap:wrap; gap:0 24px; margin-block:12px; } .footer__nav a { display:inline-block; padding:11px 0; font-size:.875rem; color:var(--text-3); text-decoration:none; transition:color 200ms var(--ease); } .footer__nav a:hover { color:var(--text); } .footer__legal { font-size:.75rem; color:var(--text-4); line-height:1.6; max-width:70ch; } /* ── Motion safety ─────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .btn--primary:active { transform:none; } .check--draw path { stroke-dashoffset:0; } .fuel__track::before { transform:scaleX(var(--p)); } } @media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } } html.lenis, html.lenis body { height:auto; } .lenis.lenis-smooth { scroll-behavior:auto !important; } .lenis.lenis-stopped { overflow:hidden; }