:root { color: #172033; background: #eef3f0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; } * { box-sizing: border-box; } body { min-width: 320px; min-height: 100vh; margin: 0; } /* Map pages (rider, track, demo): lock only to --app-h so there is no blank space below the map shell. is intentionally left un-locked so the browser's native pull-to-refresh gesture still works (it requires the root element to be scrollable). */ html.map-page body { height: var(--app-h, 100svh); max-height: var(--app-h, 100svh); overflow: hidden; background: #e7f0eb; } button, input, textarea { font: inherit; } a { color: inherit; text-decoration: none; } h1, p { margin-top: 0; } .page { width: min(920px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px; } .narrow { display: grid; align-content: center; } .hero { padding: 48px 4px; } .hero h1 { max-width: 760px; margin-bottom: 12px; font-size: clamp(2.1rem, 8vw, 4.25rem); line-height: 1.02; letter-spacing: 0; } .hero p { max-width: 660px; color: #4b5a52; font-size: 1.08rem; } .panel { border: 1px solid rgba(203, 216, 208, 0.9); border-radius: 8px; padding: 24px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 36px rgba(23, 32, 51, 0.12); } .center { text-align: center; } .eyebrow { margin-bottom: 6px; color: #15803d; font-size: 0.72rem; font-weight: 850; letter-spacing: 0; text-transform: uppercase; } .actions, .sheet-actions, .search-row, .status-line, .tracking-card { display: flex; gap: 10px; } .map-fab, .search-fab { position: absolute; z-index: 520; display: grid; place-items: center; width: 46px; height: 46px; min-height: 46px; border: 1px solid rgba(203, 216, 208, 0.9); border-radius: 999px; padding: 0; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 28px rgba(23, 32, 51, 0.14); color: #172033; cursor: pointer; font-size: 1.35rem; font-weight: 850; line-height: 1; } .search-fab { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); } .recenter-fab { top: max(170px, calc(env(safe-area-inset-top) + 160px)); right: max(10px, env(safe-area-inset-right)); } .drawer-refresh-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; flex-shrink: 0; } .drawer-refresh-btn:hover, .drawer-refresh-btn:active { background: rgba(100, 116, 139, 0.12); color: #172033; } .drawer-refresh-btn.spinning svg, .refresh-fab.spinning svg { animation: refresh-spin 0.6s linear; } @keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .topbar-right { display: flex; align-items: center; gap: 6px; } .actions, .sheet-actions { flex-wrap: wrap; } .button, .icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid transparent; border-radius: 8px; padding: 0 16px; cursor: pointer; font-weight: 800; } .button.primary { background: #15803d; color: #fff; } .button.secondary, .icon-button { border-color: #ccd9d0; background: #fff; color: #172033; } .button.danger { background: #dc2626; color: #fff; } /* ── Slide-to-end control ───────────────────────────────────────────────── */ .slide-end { position: relative; display: flex; align-items: center; width: 100%; height: 46px; border-radius: 8px; overflow: hidden; background: #fee2e2; user-select: none; touch-action: none; cursor: grab; } .slide-end-track-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #991b1b; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.01em; pointer-events: none; } .slide-end-thumb { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 38px; margin: 0 4px; border-radius: 6px; background: #dc2626; color: #fff; font-size: 1.1rem; pointer-events: none; transition: transform 200ms ease, background 150ms ease; will-change: transform; } .slide-end.confirming .slide-end-thumb { background: #166534; } .slide-end.confirming .slide-end-track-label { color: #166534; } /* ───────────────────────────────────────────────────────────────────────── */ .button:disabled { cursor: not-allowed; opacity: 0.55; } input, textarea { width: 100%; min-height: 46px; border: 1px solid #cbd8d0; border-radius: 8px; padding: 0 12px; background: #fff; color: #172033; } textarea { min-height: 62px; padding-top: 10px; resize: none; } input:focus, textarea:focus { border-color: #15803d; outline: 3px solid rgba(21, 128, 61, 0.15); } .map-shell { position: relative; width: 100%; height: var(--app-h, 100svh); max-height: var(--app-h, 100svh); min-height: 0; overflow: hidden; background: #e7f0eb; } @supports (height: 100dvh) { .map-shell { height: var(--app-h, 100dvh); max-height: var(--app-h, 100dvh); } } .map-view.full { width: 100%; height: 100%; } /* Toast notification */ .rider-toast { position: absolute; z-index: 600; bottom: max(100px, calc(env(safe-area-inset-bottom) + 90px)); left: 50%; transform: translateX(-50%) translateY(12px); padding: 10px 18px; border-radius: 999px; background: #1e293b; color: #f1f5f9; font-size: 0.88rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .rider-toast.error { background: #7f1d1d; color: #fecaca; } .rider-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Scope blend modes to within the map so they don't composite against the page */ .leaflet-map-pane { isolation: isolate; } /* Base tiles: strip almost all color → near-white paper, slightly cool-gray */ .map-base-tile { filter: saturate(0.04) contrast(0.78) brightness(1.18) hue-rotate(180deg) saturate(0.06); } /* OSM label tiles: grayscale + multiply blend makes white background invisible; only roads, POI icons, and place names composite onto the base */ .map-label-tile { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08) brightness(0.88); opacity: 0.9; } .leaflet-control-zoom a { filter: saturate(0.55); } .leaflet-top.leaflet-right { top: max(74px, calc(env(safe-area-inset-top) + 68px)); right: max(10px, env(safe-area-inset-right)); } .leaflet-control-zoom { border: 1px solid rgba(17, 24, 39, 0.12) !important; border-radius: 10px !important; overflow: hidden; box-shadow: 0 10px 26px rgba(17, 24, 39, 0.12); } .leaflet-control-zoom a { border-color: rgba(17, 24, 39, 0.08) !important; color: #111827 !important; } .leaflet-control-attribution { opacity: 0.72; } .rider-search, .customer-topbar, .bottom-sheet, .customer-bottom { position: absolute; z-index: 500; border: 1px solid rgba(203, 216, 208, 0.9); border-radius: 8px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 34px rgba(23, 32, 51, 0.14); } .route-chip { position: absolute; z-index: 510; left: 14px; bottom: 14px; border: 1px solid rgba(203, 216, 208, 0.9); border-radius: 999px; padding: 9px 14px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 28px rgba(23, 32, 51, 0.14); color: #172033; font-weight: 850; } .rider-search { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); max-width: 620px; padding: 10px; } .search-row { flex-wrap: nowrap; } .search-input-wrap { position: relative; flex: 1; min-width: 0; } .search-input-wrap input { width: 100%; padding-right: 36px; } .search-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 999px; padding: 0; background: #cbd8d0; color: #172033; cursor: pointer; font-size: 1rem; font-weight: 700; line-height: 1; } .search-clear:hover { background: #a8bdb5; } .search-submit { flex-shrink: 0; width: 44px; min-width: 44px; padding: 0; font-size: 1.2rem; } .search-row input { flex: 1; } .search-results { display: grid; gap: 4px; max-height: 240px; margin-top: 8px; overflow: auto; } .search-results button { display: flex; flex-direction: column; gap: 1px; border: 0; border-radius: 6px; padding: 10px; background: #f7faf8; color: #172033; cursor: pointer; text-align: left; } .search-results button:hover, .search-results button:active { background: #eaf2ed; } .result-primary { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: #172033; } .result-secondary { font-size: 0.78rem; color: #64748b; line-height: 1.3; } .search-empty { padding: 12px 10px; color: #64748b; font-size: 0.88rem; text-align: center; } /* GPS dot — used inside .drawer-gps-indicator */ .gps-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .drawer-gps-indicator.locating .gps-dot { animation: gps-pulse 1.4s ease-in-out infinite; } @keyframes gps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* GPS info button — tiny (ℹ) button shown only when help text exists */ .gps-info-btn { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 999px; padding: 0; background: transparent; color: currentColor; cursor: pointer; opacity: 0.7; flex-shrink: 0; } .gps-info-btn:hover { opacity: 1; } /* Tooltip shown below the drawer topbar when info button is tapped */ .gps-tooltip { position: absolute; z-index: 520; top: calc(100% + 6px); left: 0; right: 0; padding: 10px 12px; border-radius: 8px; background: #1e293b; color: #f1f5f9; font-size: 0.8rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); pointer-events: auto; } .bottom-sheet { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)); display: grid; gap: 12px; max-width: 760px; padding: 14px; /* Cap height so the sheet never overflows above the search panel */ max-height: calc(var(--app-h, 100svh) - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; transition: transform 180ms ease; } .bottom-sheet.collapsed { gap: 8px; } .bottom-sheet.collapsed .drawer-content { display: none; } .drawer-handle { width: 56px; height: 22px; margin: -8px auto -4px; border: 0; background: transparent; cursor: pointer; } .drawer-handle span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 999px; background: #cbd5e1; } .drawer-content { display: grid; gap: 10px; } .drawer-summary { min-width: 0; } .bottom-sheet h1, .customer-topbar h1 { margin-bottom: 4px; font-size: 1.45rem; line-height: 1.1; letter-spacing: 0; } .bottom-sheet h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottom-sheet p, .customer-topbar p { margin-bottom: 0; color: #475569; } .tracking-card input { flex: 1; } .tracking-card label { display: grid; flex: 1; gap: 5px; color: #475569; font-size: 0.8rem; font-weight: 800; } .detail-block { display: grid; gap: 3px; } .detail-label { color: #15803d !important; font-size: 0.72rem; font-weight: 850; text-transform: uppercase; } .tracking-card input { font-size: 0.92rem; } .muted { margin: 0; border-radius: 8px; padding: 9px 10px; background: #f1f5f9; color: #475569; font-size: 0.9rem; } .status-line { align-items: center; justify-content: space-between; color: #475569; font-size: 0.92rem; } /* Drawer top bar: GPS indicator left, copy button right */ .drawer-topbar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 28px; } .drawer-gps-indicator { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; line-height: 1; transition: background 0.2s, color 0.2s; } .drawer-gps-indicator.locating { background: #fef9c3; color: #713f12; } .drawer-gps-indicator.active { background: #dcfce7; color: #166534; } .drawer-gps-indicator.error { background: #fee2e2; color: #991b1b; } .drawer-copy-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(203, 216, 208, 0.9); border-radius: 8px; padding: 0; background: #f1f5f9; color: #172033; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .drawer-copy-btn:hover { background: #e2e8f0; } .drawer-copy-btn.copied { background: #dcfce7; color: #166534; border-color: #86efac; } .customer-topbar { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; max-width: 720px; padding: 12px 14px; } .customer-bottom { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); max-width: 520px; padding: 12px 14px; color: #475569; } .status-badge { display: inline-flex; align-items: center; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; border-radius: 999px; padding: 4px 10px; background: #eef2f7; color: #334155; font-size: 0.84rem; font-weight: 850; white-space: nowrap; } .status-badge.good { background: #dcfce7; color: #166534; } .status-badge.warn { background: #ffedd5; color: #9a3412; } .status-badge.ended { background: #fee2e2; color: #991b1b; } .alert { margin: 8px 0 0; border-radius: 8px; padding: 10px 12px; background: #fee2e2; color: #991b1b; } .demo-meta { margin: 6px 0 0; color: #475569; font-size: 0.84rem; } .demo-location-label { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 0.88rem; font-weight: 700; color: #172033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .demo-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; } .demo-dot.to { background: #15803d; } .hidden { display: none !important; } .map-pin { display: grid; place-items: center; border-radius: 50%; } .rider-triangle { display: block; width: 30px; height: 30px; background: #15803d; clip-path: polygon(50% 0, 90% 100%, 50% 76%, 10% 100%); filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 8px 16px rgba(15, 23, 42, 0.32)); transform: rotate(var(--rider-heading, 0deg)); transform-origin: center; transition: transform 240ms ease; } .customer-pin { background: #ffffff; border: 2px solid #111827; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24); } .customer-person { position: relative; display: block; width: 22px; height: 24px; } .customer-head, .customer-body { position: absolute; left: 50%; display: block; background: #111827; transform: translateX(-50%); } .customer-head { top: 2px; width: 9px; height: 9px; border-radius: 50%; } .customer-body { bottom: 3px; width: 17px; height: 10px; border-radius: 999px 999px 5px 5px; } @media (max-width: 700px) { .map-shell { min-height: var(--app-h, 100svh); } .rider-search, .customer-topbar { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); } .search-fab { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); } .recenter-fab { top: max(164px, calc(env(safe-area-inset-top) + 154px)); right: max(10px, env(safe-area-inset-right)); } .bottom-sheet, .customer-bottom, .route-chip { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)); } .tracking-card { display: grid; } .bottom-sheet { max-height: calc(var(--app-h, 100svh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; } @supports (height: 100dvh) { .bottom-sheet { max-height: calc(var(--app-h, 100dvh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } } .sheet-actions .button { flex: 1 1 140px; } .bottom-sheet.collapsed .sheet-actions .button { flex-basis: 100%; } .bottom-sheet h1, .customer-topbar h1 { font-size: 1.2rem; } } /* Compact-height devices (short phones, landscape mode) — tighten drawer spacing */ @media (max-height: 680px) { .bottom-sheet { gap: 8px; padding: 10px; } .drawer-handle { height: 16px; margin: -4px auto -2px; } .bottom-sheet h1 { font-size: 1.1rem; } .bottom-sheet p { font-size: 0.85rem; } .drawer-content { gap: 6px; } } /* ── Landing page ─────────────────────────────────────────────────────────── */ [data-page="home"] body, .home-wrap { background: #fff; } .home-wrap { display: flex; flex-direction: column; min-height: 100vh; color: #172033; } /* Header */ .home-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef2f0; } .home-logo { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: #172033; letter-spacing: -0.01em; } .home-cta-top { flex-shrink: 0; min-height: 38px; padding: 0 14px; font-size: 0.9rem; } /* Hero */ .home-hero { padding: 56px 20px 48px; max-width: 680px; margin: 0 auto; text-align: center; } .home-hero h1 { margin: 8px 0 16px; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; color: #0f1a12; } .home-sub { margin: 0 auto 28px; max-width: 480px; color: #4b5a52; font-size: 1.05rem; line-height: 1.6; } .home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Features */ .home-features { display: grid; gap: 1px; background: #eef2f0; border-top: 1px solid #eef2f0; border-bottom: 1px solid #eef2f0; } .home-feature { padding: 28px 24px; background: #fff; } .home-feature-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; background: #dcfce7; color: #15803d; } .home-feature-icon svg { width: 20px; height: 20px; } .home-feature h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: #0f1a12; } .home-feature p { margin: 0; color: #4b5a52; font-size: 0.95rem; line-height: 1.55; } /* How it works */ .home-how { padding: 48px 20px; max-width: 560px; margin: 0 auto; } .home-how h2 { margin: 0 0 20px; font-size: 1.25rem; font-weight: 800; color: #0f1a12; } .home-steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; display: grid; gap: 16px; } .home-steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: steps; color: #4b5a52; font-size: 0.98rem; line-height: 1.5; } .home-steps li::before { content: counter(steps); flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.78rem; font-weight: 800; margin-top: 1px; } .home-steps strong { color: #172033; } /* Footer */ .home-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-top: 1px solid #eef2f0; color: #94a3b8; font-size: 0.85rem; } .home-footer a { color: #4b5a52; } /* Tablet+ */ @media (min-width: 640px) { .home-features { grid-template-columns: repeat(3, 1fr); } .home-feature { padding: 32px 28px; } } /* ───────────────────────────────────────────────────────────────────────── */