/* KartInsightsPro brand stylesheet — skins BOTH the app and the marketing landing. The :root token block below is the palette SOURCE OF TRUTH; keep it in sync with docs/BrandGuidelines.md §3 (Telemetry Blue primary on Midnight Navy, Performance Green for gains). Brand rules: sentence case (never all-caps), Inter typeface. */ /* Self-hosted Inter — the brand primary typeface (BrandGuidelines.md §4), Latin subset. 400 body / 500 labels / 600 headings / 700 UI bold / 800 hero display. System stack stays as fallback until the woff2 files load. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-800.woff2") format("woff2"); } /* Self-hosted monospace for the video overlay's numeric readouts (tabular digits keep the lap clock / RPM / EGT / Speed values from jittering as they tick). Used by canvas drawText in web/views/video.js; no external font request. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2"); } :root { --bg: #171C2F; /* Midnight Navy — primary background */ --panel: #1F2937; /* Graphite — panels/cards */ --panel-2: #263243; /* inset surface (inputs/chips) */ --line: #2E3A4E; /* steel hairline */ --text: #EEF2F8; /* near-white foreground */ --muted: #9CA3AF; /* Steel Gray — secondary text/labels */ --accent: #2D8CFF; /* Telemetry Blue — PRIMARY accent */ --accent-2: #5AA9FF; /* lighter blue — secondary/info */ --good: #9BDD51; /* Performance Green — gains/success */ --bad: #FF5A5F; /* Warning Red */ --warn: #FBBF24; /* amber */ --on-accent: #FFFFFF; /* text on the blue accent (CTAs) */ --radius: 14px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Default content links: the app's accent-blue with no permanent underline (underline only on hover), instead of the browser's dull default blue. Classed anchors — .btn, .run-card, .mini-link — keep their own look via higher specificity, so this only affects bare inline links (stint #ids, etc.). */ a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; } body { padding-bottom: 84px; min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: rgba(23, 28, 47, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .topbar h1 { font-size: 18px; margin: 0; flex: 1; font-weight: 700; } /* Two-tone wordmark (BrandGuidelines.md §4): "Kart" white + "InsightsPro" blue. */ .wm { color: var(--accent); } .wm b { color: #fff; font-weight: inherit; } /* Wordmark wrapped in a link back to `/` (the onboarding/auth screen uses this so the logo returns to the landing when the account menu isn't yet available). */ .wm-link { color: inherit; text-decoration: none; } .wm-link:hover { text-decoration: underline; } .back { background: none; border: none; color: var(--text); font-size: 30px; line-height: 1; padding: 0 6px; cursor: pointer; } main { padding: 16px; max-width: 720px; margin: 0 auto; } .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 10px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: rgba(23,28,47,.95); border-top: 1px solid var(--line); backdrop-filter: blur(8px); } .navbtn { flex: 1; padding: 14px 6px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .navbtn.active { outline: 2px solid var(--accent-2); } /* Contextual form action bar. On the new/edit stint routes (body.form-mode) the global nav is hidden and this sticky Cancel/Save bar takes its place, matching the nav's fixed footprint (body's padding-bottom reserves the space) so the primary Save action is always visible instead of buried at the foot of a long form. */ body.form-mode .bottomnav { display: none; } .form-actions { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 10px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: rgba(23,28,47,.95); border-top: 1px solid var(--line); backdrop-filter: blur(8px); } .form-actions .btn { flex: 1; width: auto; margin: 0; padding: 13px; font-size: 15px; } /* Beat `.btn + .btn { margin-top: 10px }` (higher specificity) so the Save button isn't pushed 10px lower than Cancel, which flex-stretch then mismatches. */ .form-actions .btn + .btn { margin-top: 0; } /* cards & lists */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; } .run-card { display: block; text-decoration: none; color: inherit; } .run-card:active { background: var(--panel-2); } .run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .run-head .track { font-weight: 700; font-size: 17px; } .run-head .when { color: var(--muted); font-size: 12px; white-space: nowrap; } .run-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; color: var(--muted); font-size: 13px; } .run-stats b { color: var(--text); font-weight: 600; } /* Session grouping in the runs list: an event band (optional) over session headers, each with its stint cards tucked tightly beneath. */ .session-header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); } .session-header .session-where { font-weight: 700; font-size: 15px; } .session-header .session-summary { color: var(--muted); font-size: 12px; white-space: nowrap; } /* An event groups its (possibly multi-day) sessions inside one container with a left accent rail, so the per-day session headers clearly read as one event. */ .event-group { margin: 22px 0; padding: 4px 0 12px 14px; border-left: 3px solid var(--accent-2); border-radius: 4px; background: linear-gradient(90deg, rgba(61,165,255,.06), transparent 60%); } .event-band { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 4px; font-size: 12px; letter-spacing: .06em; } .event-band .event-name { color: var(--accent-2); font-weight: 700; } .event-band .event-range { color: var(--muted); font-weight: 600; } /* The band header links into the event-level track view. */ .event-band-link { text-decoration: none; cursor: pointer; border-radius: 6px; padding: 4px 2px; } .event-band-link:hover { background: rgba(61,165,255,.08); } .event-band-link .event-chevron { color: var(--accent-2); font-weight: 700; } /* Session headers nested in an event need no top rule on the first one, and the rest get a lighter divider so they group under the event rather than the page. */ .event-group .session-header { margin: 12px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); } .event-band + .session-header { margin-top: 8px; border-top: none; padding-top: 0; } /* Tighten stint cards so they read as a group under their session header. */ .run-card.stint { margin-bottom: 8px; } .tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: capitalize; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; margin-left: 6px; } .tag.baseline { background: rgba(61,165,255,.15); color: var(--accent-2); } .tag.good { background: rgba(61,220,132,.15); color: var(--good); } .tag.great { background: rgba(61,220,132,.22); color: var(--good); } .tag.race-winning { background: var(--good); color: #06281a; } .tag.bad { background: rgba(255,92,92,.15); color: var(--bad); } .tag.engine-issue { background: rgba(255,92,92,.22); color: var(--bad); } /* Freeform (non-rating) tags: neutral chip. */ .tag.freeform { background: var(--panel-2); color: var(--muted); } /* Chip editor (tagEditor): selected tags as removable chips, the rating presets as one-click toggles, and a free-text input (with autocomplete) below. */ .tag-editor .tag { margin-left: 0; } .tag-editor .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tag-editor .tag-chips:not(:empty) { margin-bottom: 10px; } .tag-editor .tag-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .chip { display: inline-flex; align-items: center; gap: 4px; } .chip .chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; opacity: .7; } .chip .chip-x:hover { opacity: 1; } .tag-editor .preset { font: inherit; border: 1px solid var(--line); cursor: pointer; opacity: .55; } .tag-editor .preset.sel { opacity: 1; outline: 2px solid var(--accent); } /* forms */ label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 600; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field { margin-bottom: 14px; } .field.full { grid-column: 1 / -1; } input, select, textarea { width: 100%; padding: 14px; font-size: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--text); outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent-2); } textarea { min-height: 90px; resize: vertical; } .section-title { font-size: 13px; letter-spacing: .05em; color: var(--muted); margin: 18px 0 10px; font-weight: 700; } /* Custom combobox (track field). Replaces the native so there's no browser chevron and Chrome's autofill popup can't overlay the suggestions. */ .ac { position: relative; } .ac-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.4); } .ac-menu li { padding: 11px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; } .ac-menu li.active, .ac-menu li:hover { background: var(--panel-2); } .btn { width: 100%; padding: 16px; border-radius: var(--radius); border: none; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--accent); color: var(--on-accent); } .btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); } .btn.ghost { background: transparent; color: var(--accent-2); border: 1px solid var(--line); } .btn:disabled { opacity: .5; } .btn + .btn { margin-top: 10px; } .hint { font-size: 12px; color: var(--muted); margin-top: 6px; } .hidden { display: none !important; } /* ---- Billing tab ---- */ .tier-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); } .tier-badge.is-founding { color: var(--good); background: rgba(155,221,81,0.12); border-color: rgba(155,221,81,0.35); } .tier-badge.is-pro { color: var(--accent); background: rgba(45,140,255,0.14); border-color: rgba(45,140,255,0.35); } .billing-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* The Pro offer card. */ .plan-card { background-image: radial-gradient(120% 100% at 0% 0%, rgba(45,140,255,0.10), transparent 60%); } .plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .plan-name { margin: 0; font-size: 20px; letter-spacing: -0.01em; } .plan-price { display: flex; align-items: baseline; gap: 6px; } .plan-amount { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .plan-per { font-size: 13px; color: var(--muted); } .plan-founding-note { margin: 10px 0 0; font-size: 13px; color: var(--good); } .plan-benefits { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .plan-benefits.compact { margin-top: 12px; gap: 6px; } .plan-benefits li { position: relative; padding-left: 26px; color: var(--text); line-height: 1.45; } .plan-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } /* Monthly / Yearly segmented toggle. */ .seg-toggle { display: inline-flex; margin: 18px 0 4px; padding: 3px; gap: 3px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; } .seg { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 0; cursor: pointer; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; border-radius: 9px; transition: background 0.12s, color 0.12s; } .seg:hover { color: var(--text); } .seg.active { background: var(--accent); color: var(--on-accent); } .save-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; background: rgba(34,197,94,0.18); color: #4ade80; } .seg.active .save-badge { background: rgba(0,0,0,0.32); color: #6ee7a0; } .plan-cta { margin-top: 18px; width: 100%; } .plan-cta-sub { text-align: center; margin-top: 8px; } /* Trial status banner. */ .trial-status { margin-bottom: 14px; } .trial-title { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; } .trial-exhausted { margin: 10px 0 0; font-size: 13px; color: var(--good); } /* The 3 self-serve tier cards shown to a trial team. */ .tier-cards { display: grid; gap: 14px; } .tier-cards .seg-toggle { justify-self: center; } .tier-card-row { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .tier-card-row { grid-template-columns: repeat(3, 1fr); } } .tier-card { display: flex; flex-direction: column; } .tier-card .plan-benefits { flex: 1; } .tier-card-drivers { margin: 6px 0 0; font-size: 13px; color: var(--muted); } /* detail */ .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .delta { font-size: 12px; font-variant-numeric: tabular-nums; } .delta.up { color: var(--good); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); } .obs-list, .q-list { list-style: none; padding: 0; margin: 0; } .obs-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .obs-list li:last-child { border-bottom: none; } .hypo { border-left: 3px solid var(--accent-2); padding: 8px 0 8px 12px; margin-bottom: 12px; } .hypo .conf { font-size: 12px; color: var(--warn); font-weight: 700; } .hypo .stmt { font-weight: 600; margin: 2px 0 6px; } .hypo ul { margin: 4px 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .rec { border-left: 3px solid var(--accent); padding: 10px 0 4px 14px; } .rec .big { font-size: 18px; font-weight: 700; margin: 4px 0; } .confbar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 8px 0; } .confbar > span { display: block; height: 100%; background: var(--good); } .ref-run { font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); } .ref-run:last-child { border-bottom: none; } /* --- tabbed detail view --- */ .tabbar { display: flex; gap: 8px; margin-bottom: 14px; } .tab { flex: 1 1 50%; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; } .tab.active { color: var(--text); outline: 2px solid var(--accent); } .tabpanel { display: block; } /* Shared stint-context subheader under the tab bar (visible across all stint tabs): bold track/layout line + a muted meta line (date·time · weather · driver). */ .stint-context { margin: -4px 0 14px; } .stint-context .sc-track { font-size: 15px; font-weight: 700; } .stint-context .sc-meta { margin-top: 2px; color: var(--muted); font-size: 12px; } /* --- settings: reference-entity management --- */ .settings-add { display: flex; gap: 8px; align-items: center; } .settings-add .add-name { flex: 1; } .settings-add .add-track { flex: 0 0 auto; max-width: 40%; } .settings-add .add-go { width: auto; flex: 0 0 auto; } .settings-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 0; flex-wrap: wrap; } .settings-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .settings-name { font-weight: 600; } .settings-count { color: var(--muted); font-size: 12px; } .settings-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* Cancel the global `.btn + .btn` top-margin so the action buttons sit on one row. */ .settings-actions .btn { width: auto; padding: 8px 12px; font-size: 13px; margin-top: 0; } .settings-add .btn { margin-top: 0; } .settings-actions .merge-into { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 13px; max-width: 160px; } .settings-item { display: flex; flex-direction: column; } /* The expanded map sits flush under its row. */ .track-map-card { margin-top: -4px; margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .track-map { height: 280px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--panel-2); } .track-loc-fields { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .track-loc-fields input { flex: 1 1 120px; min-width: 0; } .track-loc-fields .loc-auto { flex: 0 0 auto; width: auto; margin-top: 0; } .track-loc-actions { display: flex; gap: 8px; } .track-loc-actions .btn { width: auto; margin-top: 0; } /* --- per-stint chat --- */ /* Chat thread switcher: a horizontally scrollable chip bar (mirrors .lap-bar), with a "+ New" chip. Threads are never deleted, so this can grow long. */ .chat-chips { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; } .chat-chip { flex: 0 0 auto; cursor: pointer; max-width: 160px; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-chip:hover { border-color: var(--accent); } .chat-chip.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .chat-chip.new { color: var(--accent); } .chatlog { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; } .msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; white-space: normal; word-wrap: break-word; } .msg.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; } .msg.assistant { align-self: flex-start; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .chat-input { display: flex; gap: 8px; align-items: flex-end; } .chat-input textarea { flex: 1; min-height: 44px; } .chat-input .btn { width: auto; flex: 0 0 auto; align-self: stretch; margin-top: 0; } /* --- ask your archive --- */ /* The Stints-list search pill that hands off to #/ask. */ .ask-pill { display: flex; gap: 8px; margin-bottom: 12px; } .ask-pill input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; } .ask-pill input:focus { border-color: var(--accent); outline: none; } .ask-pill .btn { width: auto; flex: 0 0 auto; margin-top: 0; border-radius: 999px; } /* Inline [stint:ID] citation chips inside assistant bubbles. */ .cite-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); color: var(--accent); } /* Tappable cited-stint cards under an assistant bubble. */ .cite-cards { display: flex; gap: 8px; overflow-x: auto; align-self: flex-start; max-width: 85%; padding-bottom: 4px; } .cite-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; min-width: 140px; max-width: 220px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); text-decoration: none; } .cite-card:hover { border-color: var(--accent); } .cite-card-title { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cite-card-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The rotating "searching your archive…" status bubble. */ .msg.thinking { color: var(--muted); font-style: italic; } .empty { text-align: center; color: var(--muted); padding: 48px 16px; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: 90%; } .toast.err { border-color: var(--bad); color: var(--bad); } /* --- upsell modal (Pro gate) --- */ .upsell-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,11,0.62); backdrop-filter: blur(6px); animation: upsellFade 0.15s ease; } .upsell-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background-image: radial-gradient(120% 100% at 0% 0%, rgba(45,140,255,0.12), transparent 60%); box-shadow: 0 24px 60px rgba(0,0,0,0.5); animation: upsellRise 0.16s ease; } .upsell-badge { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); background: rgba(45,140,255,0.14); border: 1px solid rgba(45,140,255,0.3); padding: 3px 10px; border-radius: 999px; } .upsell-title { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; } .upsell-msg { margin: 0 0 18px; color: var(--muted); line-height: 1.5; font-size: 14px; } @keyframes upsellFade { from { opacity: 0; } to { opacity: 1; } } @keyframes upsellRise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* --- account chip (topbar) --- */ .acct { position: relative; } .acct-btn { width: 34px; height: 34px; border-radius: 50%; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; display: grid; place-items: center; } .acct-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.4); } .acct-info { margin-bottom: 10px; } .acct-name { font-weight: 700; font-size: 14px; } .acct-team { color: var(--muted); font-size: 12px; margin-top: 2px; } .acct-nav { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .acct-item { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; } .acct-item.active { outline: 2px solid var(--accent-2); } .acct-menu .btn { margin-top: 0; } /* Plain link back to the marketing landing. A non-.acct-item class so router.js's data-route dispatcher ignores it and the browser just navigates to `/`. */ .acct-home { display: block; padding: 8px 12px; margin-top: 4px; color: var(--muted); font-size: 13px; text-decoration: none; text-align: center; } .acct-home:hover { color: var(--text); } /* --- login / onboarding --- */ .auth-screen { display: flex; justify-content: center; padding-top: 8vh; } .auth-card { width: 100%; max-width: 420px; } .auth-card h2 { margin: 0 0 6px; font-size: 22px; } .auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; text-decoration: none; margin-top: 14px; background: #fff; color: #1a1a1a; font-weight: 700; } .auth-google:hover { text-decoration: none; } .auth-card .auth-google { display: flex; } /* ---- global app footer (signed-in screens) ---- */ /* Sibling of #view, so it persists across route renders. Sits in normal flow above the fixed .bottomnav (body's padding-bottom reserves the nav's space). */ .app-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 720px; margin: 16px auto 0; padding: 18px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } .app-footer a { color: var(--muted); } .app-footer a:hover { color: var(--accent-2); } .app-footer-sep { opacity: .5; } .app-footer-ver { opacity: .7; font-variant-numeric: tabular-nums; } /* The marketing landing is full-bleed with its own .lp-footer — hide the app one. */ body.landing #appFooter { display: none; } /* ---- landing page (signed-out) ---- */ /* Full-bleed marketing page: hide the app chrome and let it scroll on its own. */ body.landing { padding-bottom: 0; } body.landing .topbar, body.landing .bottomnav { display: none; } /* Full-bleed: drop the app's main padding/width cap so the hero reaches every edge (the .lp-wrap handles inner padding + centering). */ body.landing main { padding: 0; max-width: none; } .landing-page { color: var(--text); } /* Signed-in vs anonymous nav CTA toggle. Landing-scoped so the .when-anon / .when-authed classes only affect the marketing page, never the app. The server injects `landing--authed` on the body for a signed-in visitor (routes/pages.ts). */ .landing .when-authed { display: none; } .landing--authed .when-anon { display: none; } .landing--authed .when-authed { display: inline-flex; } /* match .btn display */ .lp-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; } .lp-logo { display: block; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } @media (min-width: 900px) { .lp-hero .lp-logo { margin-left: 0; } } .landing-page h2.lp-h2 { font-size: 26px; margin: 0 0 24px; letter-spacing: -0.02em; } .lp-hero { position: relative; overflow: hidden; padding: clamp(28px, 6vh, 96px) 0 56px; text-align: center; background: radial-gradient(110% 70% at 50% -10%, rgba(45,140,255,0.18), transparent 60%), radial-gradient(90% 60% at 80% 0%, rgba(45,140,255,0.12), transparent 55%); } /* Full-bleed background video (BrandGuidelines.md — real onboard footage), dimmed for legibility. Content sits above via .lp-wrap's z-index. */ .lp-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .lp-hero-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.6); pointer-events: none; } .lp-hero > .lp-wrap { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .lp-hero-video { display: none; } } .lp-title { font-size: clamp(30px, 7vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 auto 18px; max-width: 20ch; font-weight: 800; } .lp-accent { background: linear-gradient(100deg, var(--accent), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-sub { font-size: clamp(16px, 3.6vw, 19px); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 0 auto; } .lp-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .lp-cta .auth-google, .lp-cta .lp-primary { margin-top: 0; padding: 15px 28px; font-size: 16px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); width: auto; min-width: 260px; text-align: center; } .lp-cta-note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); } .lp-cta-note svg { flex: none; opacity: 0.9; } /* small early-access mention pinned under the hero CTA */ .lp-hero-ea { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent); border-bottom: 1px dashed rgba(45,140,255,0.5); line-height: 1.4; } .lp-hero-ea:hover { color: var(--accent-2); } /* secondary action is a text link (not a competing button) with a down chevron */ .lp-cta-link { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--accent-2); } .lp-cta-link svg { transition: transform 0.18s ease; } .lp-cta-link:hover { color: var(--text); } .lp-cta-link:hover svg { transform: translateY(2px); } .lp-steps { padding: 40px 0 16px; } .lp-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .lp-step { display: flex; gap: 16px; align-items: flex-start; } .lp-step-n { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--accent); background: rgba(45,140,255,0.12); border: 1px solid rgba(45,140,255,0.3); } .lp-step h3 { margin: 4px 0 4px; font-size: 17px; } .lp-step p { margin: 0; color: var(--muted); line-height: 1.5; } .lp-features { padding: 48px 0; } .lp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .lp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color 0.18s ease, transform 0.18s ease; } .lp-card:hover { border-color: rgba(61,165,255,0.5); transform: translateY(-2px); } .lp-card-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: var(--accent-2); background: rgba(61,165,255,0.12); border: 1px solid rgba(61,165,255,0.25); } .lp-card h3 { margin: 0 0 8px; font-size: 17px; } .lp-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; } .lp-final { padding: 64px 0; text-align: center; background: radial-gradient(90% 80% at 50% 120%, rgba(45,140,255,0.16), transparent 60%); } .lp-final .lp-h2 { margin-bottom: 14px; } .lp-final .lp-sub { margin-bottom: 28px; } .lp-footer { padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .lp-footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .lp-footer-sep { opacity: 0.5; } .lp-heart { color: var(--accent); } .lp-footer a { color: var(--muted); } .lp-footer a:hover { color: var(--text); } /* hero CTAs: primary (join) + secondary (jump to "how it works") */ .lp-cta-row { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .lp-cta-row .btn { margin-top: 0; } .lp-cta-row .lp-secondary { width: auto; min-width: 240px; padding: 14px 26px; font-size: 16px; border-radius: 12px; text-align: center; } @media (min-width: 560px) { .lp-cta-row { flex-direction: row; flex-wrap: wrap; justify-content: center; } .lp-cta-row .btn, .lp-cta-row .lp-secondary { width: auto; } } @media (min-width: 900px) { .lp-hero .lp-cta-row { justify-content: flex-start; } } /* intro band: "Every session. One place." */ .lp-band { padding: 36px 0 8px; text-align: center; } .lp-band .lp-sub { margin-top: 12px; } /* video + telemetry sync mockup */ .lp-video { display: flex; flex-direction: column; gap: 10px; } .lp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, #1c2740 0%, #2b3656 42%, #3c3122 60%, #1d212b 100%); display: flex; align-items: center; justify-content: center; } .lp-video-frame::after { content: ''; position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: rgba(255,255,255,0.18); } .lp-video-play { position: relative; width: 46px; height: 46px; border-radius: 50%; padding-left: 3px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; } .lp-video-time { position: absolute; top: 8px; left: 10px; z-index: 1; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.45); padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; } .lp-video-badge { position: absolute; bottom: 8px; right: 10px; z-index: 1; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); } .lp-video-scrub { height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; } .lp-video-scrub > span { display: block; height: 100%; width: 62%; background: var(--accent); border-radius: 999px; } .lp-video-strip { display: flex; gap: 8px; } .lp-video-strip span { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; } .lp-video-strip i { font-style: normal; font-weight: 600; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; } .lp-video-strip .lp-chip { font-size: 11px; padding: 2px 5px; align-self: flex-start; } /* ---- Pricing section (§8) --------------------------------------------------- Same product on every tier — the shared feature set shows once in the "Every plan includes" strip; cards differ only by driver count, price, and (Team) priority support. The Monthly/Annual toggle is CSS-only: hidden radios drive `:checked ~` sibling rules over the price grid, so both figures live in the DOM and exactly one shows with NO JavaScript (Annual is the default). */ .lp-pricing { padding: 40px 0 8px; } .lp-pricing .lp-sec-intro { margin-bottom: 22px; } /* hidden radios — kept focusable/accessible, visually removed */ .lp-bill-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* segmented Monthly | Annual control */ .lp-billing-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; } .lp-billing-toggle label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); transition: background 0.15s ease, color 0.15s ease; } /* the checked radio lights its label (general-sibling → descendant) */ .lp-bill-monthly:checked ~ .lp-billing-toggle label[for="lp-bill-monthly"], .lp-bill-annual:checked ~ .lp-billing-toggle label[for="lp-bill-annual"] { background: var(--panel-2); color: var(--text); } /* keyboard focus ring on the active-target label */ .lp-bill-monthly:focus-visible ~ .lp-billing-toggle label[for="lp-bill-monthly"], .lp-bill-annual:focus-visible ~ .lp-billing-toggle label[for="lp-bill-annual"] { outline: 2px solid var(--accent-2); outline-offset: 2px; } .lp-bill-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--good); background: rgba(155,221,81,0.14); border: 1px solid rgba(155,221,81,0.35); padding: 2px 7px; border-radius: 999px; } /* "Every plan includes" strip (rendered once) */ .lp-includes { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; } .lp-includes-title { margin: 0 0 14px; font-size: 15px; letter-spacing: 0.01em; } .lp-includes-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); line-height: 1.5; } .lp-includes-list li { position: relative; padding-left: 26px; } .lp-includes-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } @media (min-width: 640px) { .lp-includes-list { grid-template-columns: 1fr 1fr; gap: 10px 24px; } } /* the three self-serve cards */ .lp-price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 900px) { .lp-price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .lp-price-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color 0.18s ease, transform 0.18s ease; } .lp-price-card:hover { border-color: rgba(61,165,255,0.5); transform: translateY(-2px); } /* Team — the featured card, gold-accented (matches the Founding badge gold) */ .lp-price-card.is-featured { border-color: rgba(155,221,81,0.5); background-image: radial-gradient(120% 100% at 0% 0%, rgba(155,221,81,0.10), transparent 60%); } .lp-price-card.is-featured:hover { border-color: rgba(155,221,81,0.7); } .lp-price-badge { align-self: flex-start; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent); background: rgba(45,140,255,0.14); border: 1px solid rgba(45,140,255,0.3); padding: 4px 10px; border-radius: 999px; } .is-featured .lp-price-badge { color: var(--good); background: rgba(155,221,81,0.14); border-color: rgba(155,221,81,0.35); } .lp-price-name { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; } .lp-price-tagline { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; } .lp-price-figure { margin-bottom: 14px; min-height: 58px; } .lp-price-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .lp-price-per { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 3px; } .lp-price-annual-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); } /* CSS-only toggle: show exactly the checked period's figure, hide the other */ .lp-price-monthly, .lp-price-annual { display: none; } .lp-bill-monthly:checked ~ .lp-price-grid .lp-price-monthly { display: block; } .lp-bill-annual:checked ~ .lp-price-grid .lp-price-annual { display: block; } .lp-price-drivers { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .lp-price-list { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); line-height: 1.45; font-size: 14px; } .lp-price-list li { position: relative; padding-left: 24px; } .lp-price-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } .is-featured .lp-price-list li::before { color: var(--good); } /* CTA pinned to the card bottom; non-featured = secondary, featured = accent */ .lp-price-cta { margin-top: auto; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); text-align: center; } .lp-price-cta:hover { border-color: rgba(255,255,255,0.28); } .lp-price-cta.lp-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; } .lp-price-note { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; } /* reassurance row + FAQ + footnotes */ .lp-pricing-reassure { margin: 26px 0 8px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; } .lp-faq { margin-top: 30px; display: grid; gap: 10px; } .lp-faq-title { margin: 0 0 6px; font-size: 20px; } .lp-faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; } .lp-faq-item summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lp-faq-item summary::-webkit-details-marker { display: none; } .lp-faq-item summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 20px; line-height: 1; } .lp-faq-item[open] summary::after { content: "–"; } .lp-faq-item p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px; } .lp-footnotes { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .lp-footnotes li::before { content: "· "; } /* ---- reposition: nav, debrief hero, question/read grids, depth section ---- */ /* anchor targets clear the sticky nav */ .landing-page section[id] { scroll-margin-top: 72px; } /* smooth-scroll the landing's in-page nav anchors — scoped to the landing (the document is the scroller) so app views are unaffected; CSS-only, no JS. */ html:has(body.landing) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(body.landing) { scroll-behavior: auto; } } /* sticky landing nav: logo left, anchor links + Login right */ .lp-nav { position: sticky; top: 0; z-index: 20; background: rgba(23,28,47,0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .lp-nav-inner { display: flex; align-items: center; gap: 22px; min-height: 56px; } /* logo pushes everything else to the right, so Login stays flush-right whether or not the (mobile-hidden) nav links are present */ .lp-nav-logo { display: flex; align-items: center; gap: 9px; margin-right: auto; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .lp-nav-logo:hover { text-decoration: none; } .lp-nav-logo img { border-radius: 8px; } .lp-nav-links { display: none; gap: 22px; } .lp-nav-links a { color: var(--muted); font-size: 14px; font-weight: 600; } .lp-nav-links a:hover { color: var(--text); } /* Both nav CTAs (the anon Google "Login" and the authed "Open app") share the compact, flush-right nav sizing regardless of their button variant. */ /* Qualified with .lp-nav-inner so `margin: 0` beats `.btn + .btn`'s margin-top (the two nav CTAs are adjacent .btn siblings, one hidden). Deliberately does NOT set `display` — the visible/hidden state is owned by the .when-anon/.when-authed toggle rules; setting display here would override those and un-hide the login. */ .lp-nav-inner .lp-nav-login { margin: 0; width: auto; min-width: 0; padding: 8px 14px; font-size: 14px; line-height: 1; border-radius: 10px; box-shadow: none; align-items: center; justify-content: center; gap: 8px; } @media (min-width: 720px) { .lp-nav-links { display: flex; } } /* hero eyebrow + support line */ .lp-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); background: rgba(45,140,255,0.12); border: 1px solid rgba(45,140,255,0.28); padding: 5px 12px; border-radius: 999px; } .lp-support { margin: 16px auto 0; max-width: 56ch; font-size: 14px; line-height: 1.55; color: var(--muted); } .lp-support-c { text-align: center; margin-top: 26px; } @media (min-width: 900px) { .lp-hero .lp-support { margin-left: 0; } } /* hero visual: a slim device bezel (far thinner than the in-row art phones) so the screenshot stays large but still clearly reads as an app screen. */ /* specificity bumped to .lp-phone.lp-phone-hero so it beats the base .lp-phone rule, which is defined LATER in this file (equal single-class specificity would otherwise let the base's chunky 12px bezel win). */ .lp-phone.lp-phone-hero { position: relative; width: 100%; max-width: 372px; padding: 5px; background: linear-gradient(160deg, #222b3d, #10141d); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); } .lp-phone-hero .lp-phone-screen { border: 1px solid rgba(255,255,255,0.06); padding: 0; border-radius: 19px; } .lp-phone-hero .lp-mock { padding: 16px 14px; } .lp-phone-hero .lp-shotcap.lp-hasshot { max-height: 600px; } /* generic content section spacing + intro copy */ .lp-sec { padding: 44px 0; } .lp-sec-intro { font-size: clamp(15px, 3.4vw, 17px); line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0 0 26px; } /* hero/§4 debrief card contents (reuses .lp-phone / .lp-fh-mock frames) */ .lp-debrief-metrics { display: flex; gap: 8px; margin: 4px 0 12px; } .lp-debrief-metrics span { flex: 1; display: flex; flex-direction: column; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; } .lp-debrief-metrics i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; } .lp-debrief-metrics b { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .lp-debrief-focus { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .lp-debrief-focus-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .lp-debrief-focus p { margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); } .lp-debrief-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--accent-2); background: rgba(61,165,255,0.1); border: 1px solid rgba(61,165,255,0.28); border-radius: 999px; padding: 5px 11px; } /* microcopy callouts on the §4 debrief card */ .lp-callout { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; margin-bottom: 10px; } .lp-callout.accent { color: var(--accent-2); background: rgba(61,165,255,0.1); border-color: rgba(61,165,255,0.28); margin: 8px 0 0; } /* bullet lists inside the feature rows */ .lp-bullets { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .lp-bullets li { position: relative; padding-left: 24px; color: var(--muted); line-height: 1.5; font-size: 14.5px; } .lp-bullets li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } /* question cards use a lighter, left-aligned .lp-card */ .lp-qcard h3 { font-size: 16px; } /* four-up audience grid (specificity beats the later base .lp-grid 3-col rule) */ @media (min-width: 720px) { .lp-grid.lp-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .lp-grid.lp-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* §8 read-mode cards */ .lp-reads { display: grid; grid-template-columns: 1fr; gap: 14px; } .lp-read { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .lp-read-chip { display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent-2); background: rgba(61,165,255,0.1); border: 1px solid rgba(61,165,255,0.28); border-radius: 999px; padding: 4px 10px; } .lp-read h3 { margin: 0 0 8px; font-size: 16px; } .lp-read p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; } @media (min-width: 640px) { .lp-reads { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .lp-reads { grid-template-columns: repeat(4, 1fr); } } /* swap-in screenshot for a mock. Default: mock defines the height, the is a hidden overlay (so a 404 shows nothing but the mock). On load, `lp-hasshot` flips the img into normal flow at its NATURAL height — a long screenshot shows in full, not cropped — and hides the mock. */ .lp-shotwrap { position: relative; } .lp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; pointer-events: none; border-radius: inherit; background: var(--bg); } .lp-shotwrap.lp-hasshot .lp-shot { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; opacity: 1; pointer-events: auto; display: block; } .lp-shotwrap.lp-hasshot .lp-mock { display: none; } /* the event mock's two-row (map + sector table) grid lives on the .lp-mock now */ .lp-fh-track { display: grid; grid-template-columns: 1fr; gap: 12px; } /* cap a tall portrait screenshot to a tidy device-preview height, with a soft bottom fade so it reads as "there's more below" rather than a hard crop. */ .lp-shotcap.lp-hasshot { max-height: 480px; overflow: hidden; } .lp-shotcap.lp-hasshot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(to bottom, rgba(23,28,47,0), var(--bg)); pointer-events: none; } /* screenshots in the alternating rows sit in a phone mockup (matches the hero) so their portrait height reads as a device, not a giant flat card. */ .lp-phone-art { max-width: 288px; margin: 0 auto; } /* ---- standalone legal pages (/privacy, /terms) ---- */ .legal { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; } .legal-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .legal-top .brand { font-weight: 800; font-size: 18px; color: var(--text); } .legal-top a.brand:hover { text-decoration: none; } .legal-top .back { font-size: 14px; color: var(--accent-2); } .legal h1 { font-size: clamp(26px, 6vw, 32px); margin: 8px 0 4px; letter-spacing: -0.02em; } .legal .updated { color: var(--muted); font-size: 13px; margin: 0 0 8px; } .legal .lead { color: var(--muted); line-height: 1.6; } .legal h2 { font-size: 19px; margin: 30px 0 10px; letter-spacing: -0.01em; } .legal p, .legal li { color: var(--text); line-height: 1.65; } .legal a { color: var(--accent-2); } .legal ul { padding-left: 20px; margin: 8px 0; } .legal li { margin: 5px 0; } .legal-footer { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px; color: var(--muted); font-size: 13px; text-align: center; } @media (min-width: 720px) { .landing-page h2.lp-h2 { font-size: 30px; } .lp-grid { grid-template-columns: repeat(3, 1fr); } .lp-steplist { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; } } /* hero: stacked on mobile, two-column copy + phone mockup at >=900px */ .lp-hero-grid { display: flex; flex-direction: column; align-items: center; gap: 40px; } .lp-sub2 { margin: 14px auto 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 52ch; } @media (min-width: 900px) { .lp-hero { text-align: left; } .lp-hero-grid { flex-direction: row; align-items: center; justify-content: space-between; gap: 56px; } .lp-hero-copy { flex: 1; max-width: 30rem; } .lp-hero .lp-title { margin-left: 0; } .lp-hero .lp-sub, .lp-hero .lp-sub2 { margin-left: 0; } .lp-hero .lp-cta { align-items: flex-start; } .lp-phone { flex: none; } } /* phone-frame mockup */ .lp-phone { position: relative; width: 100%; max-width: 300px; border-radius: 34px; padding: 12px; background: linear-gradient(160deg, #232c3e, #11151f); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.5); } /* Soft Telemetry-Blue aura behind the mockup (BrandGuidelines screenshot treatment). */ .lp-phone::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(60% 55% at 50% 45%, rgba(45,140,255,0.12), transparent 70%); filter: blur(26px); pointer-events: none; } .lp-phone-screen { background: var(--bg); border-radius: 24px; padding: 16px 14px; border: 1px solid var(--line); overflow: hidden; } .lp-phone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .lp-phone-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .lp-phone-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .lp-tag-good { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(61,220,132,.22); color: var(--good); } /* animated hero demo: track draws in, cursor clicks turn 4, detail slides up */ .lp-demo-stage { position: relative; } .lp-track { max-width: 100%; } .lp-demo .turn-badge.sel circle:last-of-type { animation: lpRing 12s ease-in-out infinite; } .lp-cursor { position: absolute; margin: -2px 0 0 -3px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); animation: lpCursor 12s ease-in-out infinite; } .lp-demo-detail { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: 10px; padding: 10px 12px; animation: lpDetail 12s ease-in-out infinite; } .lp-demo-detail-head { display: flex; align-items: baseline; gap: 8px; } .lp-demo-detail-head b { font-size: 14px; } .lp-demo-detail-head span { font-size: 11px; color: var(--muted); text-transform: capitalize; } .lp-demo-anchor { font-size: 13px; color: var(--muted); margin: 5px 0 8px; } .lp-demo-anchor b { color: var(--accent-2); font-size: 15px; } .lp-demo-metrics { display: flex; flex-wrap: wrap; gap: 6px; } .lp-demo-metrics span { font-size: 10.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; color: var(--text); font-variant-numeric: tabular-nums; } .lp-demo-metrics i { color: var(--muted); font-style: normal; margin-right: 5px; } @keyframes lpRing { 0%, 22% { stroke-opacity: 0; } 26%, 90% { stroke-opacity: 1; } 100% { stroke-opacity: 0; } } @keyframes lpCursor { 0% { transform: translate(46px, 40px) scale(1); opacity: 0; } 6% { opacity: 1; } 19% { transform: translate(0, 0) scale(1); } 22% { transform: translate(0, 0) scale(0.8); } 25% { transform: translate(0, 0) scale(1); } 90% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(8px, 8px) scale(1); opacity: 0; } } @keyframes lpDetail { 0%, 23% { opacity: 0; transform: translateY(8px); } 30%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .lp-cursor, .lp-demo-detail, .lp-demo .turn-badge.sel circle:last-of-type { animation: none; } .lp-cursor { opacity: 1; } .lp-demo-detail { opacity: 1; transform: none; } .lp-demo .turn-badge.sel circle:last-of-type { stroke-opacity: 1; } } .lp-chip { display: inline-block; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 5px; white-space: nowrap; } .lp-chip.up { color: var(--good); background: rgba(61,220,132,.14); } .lp-chip.down { color: var(--accent); background: rgba(45,140,255,.14); } /* chat bubbles */ .lp-chat { display: flex; flex-direction: column; gap: 8px; } .lp-bubble { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; } .lp-bubble.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; font-weight: 600; } .lp-bubble.ai { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; } .lp-chat.compact .lp-bubble { font-size: 13px; } /* feature-highlight rows: stacked on mobile, alternating two-column at >=720px */ .lp-fh-section { padding: 16px 0 40px; } .lp-fh { display: flex; flex-direction: column; gap: 20px; padding: 28px 0; } .lp-fh + .lp-fh { border-top: 1px solid var(--line); } .lp-fh-copy h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.02em; } .lp-fh-copy p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; } .lp-fh-art { display: flex; justify-content: center; } .lp-fh-mock { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 14px 36px rgba(0,0,0,0.35); } .lp-fh-mock.lp-fh-track { display: grid; grid-template-columns: 1fr; gap: 12px; } .lp-track { max-width: 100%; } @media (min-width: 720px) { .lp-fh { flex-direction: row; align-items: center; gap: 44px; } .lp-fh > * { flex: 1; } .lp-fh.rev { flex-direction: row-reverse; } .lp-fh-copy h3 { font-size: 23px; } /* the phone-mockup rows top-align so the copy doesn't float mid-visual */ .lp-fh:has(.lp-phone-art) { align-items: flex-start; } } /* mini sector table with highlighted ideal lap */ .lp-sectors { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } .lp-sectors th { text-align: right; color: var(--muted); font-weight: 600; padding: 4px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; } .lp-sectors th:first-child, .lp-sectors td:first-child { text-align: left; } .lp-sectors td { text-align: right; padding: 6px; border-top: 1px solid var(--line); } .lp-sectors tr.ideal td { background: rgba(61,165,255,.12); color: var(--accent-2); font-weight: 700; } .lp-sectors tr.ideal td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .lp-sectors tr.ideal td:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* comparison deltas mockup */ .lp-deltas { display: flex; flex-direction: column; gap: 8px; } .lp-delta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .lp-delta-row .lbl { color: var(--muted); flex: 1; } .lp-delta-row b { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ---- layout gate / sector editor ---- */ .layouts-track-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .layouts-track-head .section-title { margin: 18px 0 10px; } .layouts-track-head .edit-track-sf { width: auto; margin-top: 0; padding: 7px 11px; font-size: 12px; } .layout-gate-card { margin-top: -4px; border-top-left-radius: 0; border-top-right-radius: 0; } .gate-toolbar { display: flex; gap: 8px; margin-bottom: 10px; } .gate-toolbar .btn { width: auto; margin-top: 0; padding: 8px 12px; font-size: 13px; } .gate-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .gate-row { display: flex; align-items: center; gap: 8px; } .gate-row .gate-name { flex: 1; margin: 0; } .gate-row .btn { width: auto; margin-top: 0; padding: 6px 10px; } .gate-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(245,158,11,.18); color: #f59e0b; flex: none; } .gate-badge.sf { background: rgba(34,211,238,.18); color: #22d3ee; } .gate-meta { color: var(--muted); font-size: 12px; white-space: nowrap; } /* ---- sector / turn data tables ---- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th, .data-table td { padding: 6px 10px; text-align: right; white-space: nowrap; } .data-table thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 12px; } .data-table tbody th { text-align: left; color: var(--muted); font-weight: 600; } /* Body row-headers are left-aligned, so the first-column header/footer label must match — otherwise a right-aligned header floats off over a wide column. */ .data-table thead th:first-child, .data-table tfoot th:first-child { text-align: left; } .data-table tbody tr + tr td, .data-table tbody tr + tr th { border-top: 1px solid var(--line); } /* ---- raw file actions ---- */ .raw-actions { display: flex; gap: 8px; flex-wrap: wrap; } .raw-actions .btn { width: auto; margin-top: 0; text-decoration: none; text-align: center; } /* ---- track outline (SVG turn map) ---- */ .track-svg { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: 10px; } .track-svg .track-line { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } /* Line tab: a faint reference outline behind the overlaid lap lines, and each lap line (its stroke color is set inline, per selection order). */ .track-svg .track-line-base { fill: none; stroke: var(--muted); stroke-opacity: .35; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .track-svg .lap-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .track-svg .turn-badge circle { fill: var(--accent); stroke: #171C2F; stroke-width: 1.5; } .track-svg .turn-badge text { fill: var(--on-accent); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; } /* Event view: clickable turn badges (larger hit target via the transparent first circle) with a hover/selected ring. */ .track-svg .turn-badge.clickable { cursor: pointer; } .track-svg .turn-badge .hit { fill: transparent; stroke: none; } .track-svg .turn-badge.clickable:hover circle:last-of-type, .track-svg .turn-badge.clickable.sel circle:last-of-type { stroke: var(--accent-2); stroke-width: 3; } /* Debrief turn breakdown: strong/avg/weak fill the badge green/amber/red. Default (no status class) keeps the accent fill above. Text stays dark for contrast. */ .track-svg .turn-badge.strong circle { fill: var(--good); } .track-svg .turn-badge.avg circle { fill: var(--warn); } .track-svg .turn-badge.weak circle { fill: var(--bad); } /* Track map with satellite backdrop (Google) vs tile-less shape (SVG). The inline Satellite/Shape toggle sits above the map; .track-map-host holds whichever mode is active (it gains .track-map — a fixed height — in satellite mode; the SVG sets its own height in shape mode). */ .map-mode-toggle { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 8px; } .map-mode-toggle button { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; } .map-mode-toggle button.active { color: var(--text); outline: 2px solid var(--accent); } /* Numbered turn badge as a Google Maps DOM overlay (mirrors the SVG badge look). Google positions the div at the apex pixel; translate centers it on that point. Non-interactive badges are click-through so the map still pans beneath them. */ .map-badge { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; line-height: 1; border: 1.5px solid #171C2F; box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; user-select: none; } .map-badge.clickable { pointer-events: auto; cursor: pointer; } .map-badge.strong { background: var(--good); } .map-badge.avg { background: var(--warn); } .map-badge.weak { background: var(--bad); } .map-badge.clickable:hover, .map-badge.sel { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* Event view: scope segmented control (This event ↔ All stints at track/layout). */ .scope-toggle { display: flex; gap: 6px; margin-top: 12px; } .scope-toggle button { flex: 1 1 50%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; } .scope-toggle button.active { color: var(--text); outline: 2px solid var(--accent); } .scope-toggle button:disabled { opacity: .5; cursor: default; } /* Small inline drill link inside cards/tables. */ .mini-link { font-size: 12px; color: var(--accent-2); text-decoration: none; } .mini-link:hover { text-decoration: underline; } /* The stint that owns a turn's aggregated best. */ .data-table tbody tr.row-best td, .data-table tbody tr.row-best th { background: rgba(61,220,132,.10); } /* Event turn-detail headline: the best-apex lap's coherent snapshot. */ .turn-anchor { margin-bottom: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; } .turn-anchor b { color: var(--text); font-weight: 600; } /* Footer total row (e.g. the Sectors card's theoretical-best / ideal lap). */ .data-table tfoot th, .data-table tfoot td { border-top: 2px solid var(--line); background: rgba(61,220,132,.10); font-weight: 700; } /* Video tab: stitched-playlist chapter list (per-clip remove). */ .clip-list { display: flex; flex-direction: column; gap: 6px; } .clip-list .clip-hint { color: var(--muted); font-size: 12px; margin-bottom: 2px; } .clip-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); } .clip-row .clip-idx { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel); color: var(--muted); } .clip-row .clip-meta { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; } .clip-row .clip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clip-row .clip-dur { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .clip-row .clip-del { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; line-height: 1; } .clip-row .clip-del:hover { color: var(--bad); border-color: var(--bad); } /* Shared-clips list (public links). Own compact styling — must NOT reuse the full-width .btn, which overlaps the row when dropped into a flex layout. */ .shares-list { display: flex; flex-direction: column; gap: 8px; } .share-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); } .share-row .share-icon { flex: none; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--accent-2); border: 1px solid var(--line); font-size: 13px; text-decoration: none; } .share-row .share-icon:hover { color: var(--accent); border-color: var(--accent-2); } .share-row .share-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .share-row .share-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text); } .share-row .share-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); } .share-row .share-badge.vertical { color: var(--accent-2); border-color: var(--accent-2); } .share-row .share-badge.pending { color: var(--accent); border-color: var(--accent); } .share-row .share-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-row .share-acts { flex: none; display: flex; align-items: center; gap: 6px; } .share-row .share-copy { flex: none; padding: 7px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--accent-2); font-size: 13px; font-weight: 600; line-height: 1; } .share-row .share-copy:hover { border-color: var(--accent-2); } .share-row .share-del { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; line-height: 1; } .share-row .share-del:hover { color: var(--bad); border-color: var(--bad); } /* Just-created share: a one-shot slide-in + accent glow so the fresh link stands out in the list (text stays readable — we animate a ring + offset, not the bg). */ @keyframes shareNew { 0% { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-3px); opacity: .35; } 35% { opacity: 1; transform: translateY(0); } 100% { box-shadow: 0 0 0 0 transparent; transform: translateY(0); } } .share-row.share-new { animation: shareNew 1.8s ease-out 1; } @media (prefers-reduced-motion: reduce) { .share-row.share-new { animation: none; } } @media (max-width: 520px) { .share-row { flex-wrap: wrap; } .share-row .share-acts { width: 100%; justify-content: flex-end; } .share-row .share-copy { flex: 1; text-align: center; } } /* Video tab: unified transport buttons (play/pause + fullscreen). */ .video-transport .vt-play, .video-transport .vt-full { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; line-height: 1; } .video-transport .vt-play:hover, .video-transport .vt-full:hover { border-color: var(--accent); } .video-wrap:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; } /* Pseudo-fullscreen fallback for iOS Safari (iPhone), which has no element Fullscreen API. Pin the wrap over the whole viewport (100dvh follows the dynamic Safari toolbar) so the canvas telemetry overlay survives — native