/* RideMatch — Main Stylesheet */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } :root { --amber:#f5a623; --green:#16a34a; --red:#dc2626; --navy:#07111e; --soft:#8fa4c8; --border:#1a2d47; --font:'Archivo',system-ui,sans-serif; --font-hd:'Archivo Black',system-ui,sans-serif; } html,body { width:100%; height:100%; overflow:hidden; font-family:var(--font); background:#e8e4dc; } #map { position:absolute; inset:0; } .maplibregl-ctrl-attrib,.maplibregl-ctrl-logo { display:none !important; } /* SVG overlay for curved text */ #circle-labels { position:absolute; inset:0; pointer-events:none; z-index:150; width:100%; height:100%; overflow:visible; } .radius-curved-text { font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.5px; } /* Live radius badge next to edge handle */ .radius-badge { position:absolute; z-index:201; pointer-events:none; background:white; border:1.5px solid currentColor; border-radius:20px; padding:2px 8px; font-size:11px; font-weight:700; font-family:'Archivo',sans-serif; white-space:nowrap; transform:translate(-50%, -140%); box-shadow:0 1px 4px rgba(0,0,0,0.15); } /* Navbar */ #nav { position:absolute; top:0; left:0; right:0; height:52px; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:rgba(7,17,30,0.93); border-bottom:1px solid rgba(255,255,255,0.06); backdrop-filter:blur(20px); } .logo { font-family:var(--font-hd); font-size:22px; color:#fff; letter-spacing:-.5px; } .logo span { color:var(--amber); } .logo em { font-style:normal; font-family:var(--font); font-size:11px; color:#3d5573; margin-left:8px; font-weight:400; } .filter-pills { display:flex; gap:3px; background:rgba(20,36,61,0.7); border-radius:100px; padding:3px; } .pill { padding:5px 14px; border-radius:100px; border:1px solid transparent; background:transparent; color:var(--soft); font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font); transition:all .2s; } .pill.active { background:rgba(245,166,35,0.18); color:var(--amber); border-color:rgba(245,166,35,0.35); font-weight:600; } .nav-right { display:flex; gap:10px; align-items:center; } .user-loc { font-size:12px; color:var(--soft); display:flex; align-items:center; gap:6px; } .loc-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:pulse 2s ease infinite; } .btn-outline { padding:6px 14px; border-radius:7px; background:transparent; border:1px solid var(--border); color:var(--soft); font-size:12px; cursor:pointer; font-family:var(--font); transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; } .btn-outline:hover { border-color:var(--amber); color:var(--amber); } .btn-primary { padding:6px 14px; border-radius:7px; background:var(--amber); border:none; color:var(--navy); font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; } .btn-primary:hover { background:#fbb740; } /* Hamburger */ .hamburger { width:36px;height:36px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.15);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;transition:all .2s; } .hamburger:hover { border-color:var(--amber); } .hamburger span { display:block;width:16px;height:1.5px;background:white;border-radius:2px;transition:all .2s; } .hamburger:hover span { background:var(--amber); } /* Slide-out menu */ .slide-menu { position:fixed;top:0;right:-280px;width:280px;height:100vh;background:rgba(8,16,31,0.98);border-left:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(20px);z-index:2000;transition:right .3s cubic-bezier(.4,0,.2,1);padding:24px 0;display:flex;flex-direction:column; } .slide-menu.open { right:0; } .slide-menu-header { display:flex;align-items:center;justify-content:space-between;padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,0.07); } .slide-menu-logo { font-family:'Archivo Black',sans-serif;font-size:16px;color:white; } .slide-menu-logo em { font-style:normal;color:#f5a623; } .slide-menu-close { width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,0.06);border:none;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center; } .slide-menu-close:hover { background:rgba(255,255,255,0.12); } .menu-items { padding:16px 0;flex:1; } .menu-item { display:flex;align-items:center;gap:14px;padding:14px 20px;color:white;text-decoration:none;font-size:14px;font-weight:600;transition:all .15s;cursor:pointer;border:none;background:none;width:100%;font-family:'Archivo',sans-serif; } .menu-item:hover { background:rgba(255,255,255,0.05);color:#f5a623; } .menu-item-icon { font-size:18px;width:24px;text-align:center; } .menu-item-soon { font-size:10px;font-weight:700;color:#3d5573;border:1px solid #1e3050;border-radius:4px;padding:2px 6px;margin-left:auto; } .menu-divider { height:1px;background:rgba(255,255,255,0.07);margin:8px 20px; } .menu-footer { padding:16px 20px;border-top:1px solid rgba(255,255,255,0.07); } .menu-footer-text { font-size:11px;color:#3d5573; } .menu-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1999;display:none; } .menu-overlay.open { display:block; } /* ── Results Panel (left side) ── */ #results-panel { position:fixed; left:12px; top:218px; bottom:48px; width:420px; z-index:800; background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,0.13); display:flex; flex-direction:column; transition:width .25s cubic-bezier(.4,0,.2,1), opacity .2s; overflow:hidden; user-select:none; pointer-events:all; } .drawer-table-wrap { overflow-y:auto;flex:1;overflow-x:hidden; } .rp-header { flex-shrink:0; display:flex; flex-direction:column; border-bottom:1px solid #f1f5f9; background:#f8fafc; border-radius:14px 14px 0 0; } .rp-header-row { display:flex; align-items:center; padding:9px 10px 9px 14px; gap:8px; min-height:40px; } .rp-collapse-btn { width:28px; height:28px; border-radius:7px; border:1px solid #e2e8f0; background:#fff; color:#64748b; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; } .rp-collapse-btn:hover { background:#f1f5f9; color:#0f172a; } .rp-title-area { flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; } .rp-filter-area { display:flex; align-items:center; gap:6px; flex-shrink:0; } .drawer-title { font-size:13px;font-weight:800;color:#0f172a; white-space:nowrap; } .drawer-title span { color:#c97d00; } .drawer-meta { font-size:11px;color:#64748b; white-space:nowrap; } .drawer-meta strong { color:#16a34a; } .fp-chip { padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit; } .fp-chip:hover { color:#0f172a;border-color:#cbd5e1; } .fp-chip.active { background:#f5a623;border-color:#f5a623;color:#08101f; } .drawer-close { padding:3px 10px;border-radius:6px;border:1px solid #e2e8f0;background:transparent;color:#64748b;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap; } .drawer-close:hover { color:#0f172a; } .rp-body { flex:1; overflow:hidden; display:flex; flex-direction:column; } .drawer-table-wrap { overflow-y:auto;flex:1; } .drawer-table { width:100%;border-collapse:collapse;font-size:12px; } .drawer-table thead th { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; padding:6px 4px 5px; border-bottom:1px solid #f1f5f9; cursor:pointer; user-select:none; white-space:nowrap; } .drawer-table thead th:hover { color:#0f172a; } .drawer-table thead th { cursor:pointer; user-select:none; white-space:nowrap; } .drawer-table thead th:hover { color:#64748b; } .drawer-table thead th.dt-sorted { color:#0f172a; } .drawer-table thead th.dt-sorted::after { content:' ▾'; font-size:8px; color:#0f172a; } .drawer-table thead th.dt-sorted.asc::after { content:' ▴'; font-size:8px; color:#0f172a; } .drawer-table tbody tr { border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .1s; height:34px; } .drawer-table tbody tr:hover { background:#f8fafc; } .drawer-table tbody tr.dt-active { background:rgba(245,166,35,0.08); border-left:3px solid var(--amber); } .drawer-table tbody td { padding:4px 8px;vertical-align:middle;white-space:nowrap; } .dt-match { font-weight:800; } .dt-match.hi { color:#16a34a; } .dt-match.mi { color:#c97d00; } .dt-match.lo { color:#94a3b8; } .dt-avatar { width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;margin-right:5px;vertical-align:middle;flex-shrink:0; } .dt-name { font-weight:700;color:#0f172a;vertical-align:middle; } .dt-route { color:#64748b;font-size:11px; } .dt-role { font-size:10px;padding:1px 6px;border-radius:3px;font-weight:700; } .dt-role.dr { background:rgba(34,197,94,0.15);color:var(--green); } .dt-role.ri { background:rgba(245,166,35,0.15);color:var(--amber); } .dt-role.bo { background:rgba(0,212,180,0.15);color:var(--teal); } .dt-days { color:var(--soft);font-size:11px;letter-spacing:1px; } .dt-days .on { color:white;font-weight:700; } .dt-dist { color:var(--soft);font-size:11px; } .dt-connect { padding:3px 8px;border-radius:5px;background:var(--amber);border:none;color:#08101f;font-size:10px;font-weight:800;cursor:pointer;font-family:var(--font);transition:all .15s; } .dt-connect:hover { background:#f7b84a; } .dm-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px); } .dm-overlay.open { display:flex; } .dm-modal { background:#0d1a2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;width:400px;max-width:90vw;animation:fadeUp .25s ease both; } .dm-modal h3 { font-size:16px;font-weight:900;margin-bottom:4px; } .dm-modal p { font-size:12px;color:var(--soft);margin-bottom:16px; } .dm-modal textarea { width:100%;min-height:90px;padding:10px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:white;font-family:var(--font);font-size:13px;resize:vertical;outline:none;margin-bottom:12px; } .dm-modal textarea:focus { border-color:var(--amber); } .dm-btns { display:flex;gap:8px;justify-content:flex-end; } .dm-cancel { padding:8px 16px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:white;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer; } .dm-send { padding:8px 16px;border-radius:7px;border:none;background:var(--amber);color:#08101f;font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer; } /* Row hover detail card */ #rp-hover-card { position:fixed; z-index:1500; pointer-events:all; left:444px; background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; width:240px; box-shadow:0 8px 32px rgba(0,0,0,0.18); display:none; transition:opacity .15s; } #rp-hover-card.visible { display:block; pointer-events:all; } .rhc-name { font-size:14px; font-weight:800; color:#0f172a; margin-bottom:2px; } .rhc-score { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-bottom:10px; } .rhc-score.hi { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.25); } .rhc-score.mi { background:rgba(245,166,35,0.12); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rhc-score.lo { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; } .rhc-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:5px; font-size:12px; color:#475569; } .rhc-icon { width:14px; flex-shrink:0; text-align:center; margin-top:1px; } .rhc-val { line-height:1.4; color:#1e293b; } .rhc-more-btn { width:100%; margin-top:10px; padding:7px; border-radius:7px; border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; font-family:var(--font); font-size:11px; font-weight:700; cursor:pointer; transition:background .15s; letter-spacing:.03em; } .rhc-more-btn:hover { background:#f1f5f9; border-color:#cbd5e1; } /* ── Detail Card ── */ #rp-detail-card { position:fixed; z-index:1600; left:444px; top:72px; width:300px; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.15); display:none; overflow:hidden; animation:fadeUp .2s ease both; } #rp-detail-card.open { display:block; } .rdc-header { background:#f8fafc; padding:20px 20px 16px; border-bottom:1px solid #f1f5f9; position:relative; } .rdc-close { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#94a3b8; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } .rdc-close:hover { background:#f1f5f9; color:#0f172a; } .rdc-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .rdc-avatar { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; flex-shrink:0; border:2px solid #e2e8f0; } .rdc-name { font-size:17px; font-weight:900; color:#0f172a; line-height:1.2; } .rdc-score-row { display:flex; align-items:center; gap:8px; margin-top:4px; } .rdc-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; } .rdc-badge.hi { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.25); } .rdc-badge.mi { background:rgba(245,166,35,0.12); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rdc-badge.lo { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; } .rdc-role-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; background:rgba(0,180,160,0.1); color:#0d9488; border:1px solid rgba(0,180,160,0.2); } .rdc-body { padding:16px 20px; } .rdc-section { margin-bottom:16px; } .rdc-section-label { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; margin-bottom:8px; } .rdc-route-row { display:flex; align-items:center; gap:0; } .rdc-route-dots { display:flex; flex-direction:column; align-items:center; gap:0; flex-shrink:0; margin-right:10px; } .rdc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .rdc-line { width:2px; height:16px; background:#e2e8f0; margin:2px 0; } .rdc-route-labels { flex:1; min-width:0; } .rdc-route-from { font-size:12px; font-weight:600; color:#0f172a; margin-bottom:14px; } .rdc-route-to { font-size:12px; font-weight:600; color:#0f172a; } .rdc-days-grid { display:flex; gap:5px; } .rdc-day { width:30px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; transition:all .1s; } .rdc-day.on { background:rgba(245,166,35,0.15); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rdc-day.off { background:#f8fafc; color:#cbd5e1; border:1px solid #f1f5f9; } .rdc-stat-row { display:flex; gap:8px; } .rdc-stat { flex:1; background:#f8fafc; border:1px solid #f1f5f9; border-radius:8px; padding:8px 10px; text-align:center; } .rdc-stat-val { font-size:15px; font-weight:800; color:#0f172a; } .rdc-stat-lbl { font-size:9px; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; } .rdc-pscore-bar { height:4px; border-radius:2px; background:#f1f5f9; margin-bottom:8px; overflow:hidden; } .rdc-pscore-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--amber)); transition:width .6s ease; } .rdc-pscore-labels { display:flex; justify-content:space-between; font-size:10px; color:#94a3b8; margin-bottom:12px; } .rdc-connect-btn { width:100%; padding:11px; border-radius:9px; border:none; background:var(--amber); color:#08101f; font-family:var(--font); font-size:13px; font-weight:900; cursor:pointer; letter-spacing:.02em; transition:opacity .15s; } .rdc-connect-btn:hover { opacity:.88; } .rdc-footer { padding:0 20px 16px; } /* ── Rider pill markers ── */ .rm-marker { background: white; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 3px 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); white-space: nowrap; max-width: 90px; text-align: center; } .rm-marker:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.28); border-color:#f5a623; } .rm-marker.rm-active { border-color: #f5a623; background:#fff8ee; } .rm-marker-name { display:block; font-size:10px; font-weight:800; color:#0f172a; font-family:var(--font); line-height:1.4; overflow:hidden; text-overflow:ellipsis; } .rm-marker-sub { display:block; font-size:9px; color:#64748b; font-family:var(--font); line-height:1.3; } /* Card */ #card { position:absolute; top:64px; left:12px; z-index:200; width:420px; background:rgba(255,255,255,0.97); border-radius:14px; box-shadow:0 4px 32px rgba(0,0,0,0.18); overflow:visible; animation:slidedown .35s ease both; } .card-inputs { padding:14px 16px 10px 10px; } .input-row { display:flex; align-items:center; gap:6px; padding:9px 0; } .input-row + .input-row { border-top:1px solid #f0f0f0; } .row-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .row-dot.from { background:var(--green); } .row-dot.to { background:var(--red); } .row-label { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; width:40px; flex-shrink:0; } .row-label.from { color:var(--green); } .row-label.to { color:var(--red); } .row-input { width:100%; border:none; outline:none; font-size:16px; font-family:var(--font); color:#111; background:transparent; caret-color:var(--amber); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; box-sizing:border-box; padding-left:8px; } .row-input::placeholder { color:#bbb; font-size:14px; } /* TO input cycling tip styles */ #to-input-wrap { flex:1; min-width:0; position:relative; } #to-input.tip-mode::placeholder { color: #f5a623; font-size: 16px; opacity: 0.85; } .btn-clear { width:18px; height:18px; border-radius:50%; border:none; background:#e5e7eb; color:#666; font-size:13px; cursor:pointer; display:none; align-items:center; justify-content:center; flex-shrink:0; line-height:1; transition:background .15s; } .btn-clear:hover { background:var(--red); color:white; } .dot-connector { width:1px; height:8px; background:#e0e0e0; margin-left:21px; } /* CTA */ .card-cta { margin:0 16px 14px; display:block; width:calc(100% - 32px); padding:12px; border-radius:10px; border:none; background:#e5e7eb; color:#aaa; font-size:14px; font-weight:700; font-family:var(--font-hd); cursor:not-allowed; transition:all .25s; } .card-cta.ready { background:var(--amber); color:var(--navy); cursor:pointer; box-shadow:0 4px 20px rgba(245,166,35,0.35); } .card-cta.ready:hover { background:#fbb740; transform:translateY(-1px); } /* Suggestions panel - compact one-line style */ #suggestions-panel { position:fixed; z-index:1000; display:none; max-height:360px; overflow-y:auto; border-radius:0 0 14px 14px; background:white; box-shadow:0 8px 24px rgba(0,0,0,0.15); border:1px solid #e5e7eb; border-top:none; } .dd-item { display:flex; flex-direction:row; align-items:center; gap:0; padding:8px 14px; cursor:pointer; border-bottom:1px solid #f0f0f0; background:white; } .dd-item:last-child { border-bottom:none; } .dd-item:hover { background:#fff8ee; } .dd-text { flex:1; min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:6px; overflow:hidden; } .dd-label { font-size:13px; color:#202124; font-weight:600; white-space:nowrap; flex-shrink:0; } .dd-sub { font-size:12px; color:#70757a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dd-dist { font-size:12px; color:#f5a623; font-weight:600; white-space:nowrap; flex-shrink:0; margin-left:auto; padding-left:8px; } .dd-loading { display:flex; align-items:center; gap:12px; padding:12px 14px; color:#70757a; font-size:13px; background:white; } .dd-show-more { padding: 10px 16px; text-align: center; font-size: 13px; font-weight: 600; color: #f5a623; cursor: pointer; border-top: 1px solid #eee; background: #fafafa; transition: background .15s; } .dd-show-more:hover { background: #fff8ed; } .dd-empty { padding:12px 14px; color:#70757a; font-size:13px; background:white; } /* Tooltip */ #tooltip { position:fixed; z-index:999; pointer-events:none; background:rgba(7,17,30,0.96); border:1px solid #1a2d47; border-radius:12px; padding:12px 16px; min-width:210px; box-shadow:0 12px 40px rgba(0,0,0,0.6); font-size:12px; color:#eef2ff; display:none; } .tt-title { font-weight:700; font-size:13px; margin-bottom:7px; color:white; } .tt-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; color:#8fa4c8; } .tt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .tt-footer { margin-top:8px; padding-top:8px; border-top:1px solid #1a2d47; font-size:11px; color:#00d4b4; } /* Loading */ #loading { position:absolute; inset:0; z-index:500; background:#e8e4dc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity .4s; } #loading.hidden { opacity:0; pointer-events:none; display:none; } .ld-logo { font-family:var(--font-hd); font-size:28px; color:#222; } .ld-logo span { color:var(--amber); } .spinner { width:28px; height:28px; border-radius:50%; border:3px solid #ddd; border-top-color:var(--amber); animation:spin .7s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes slidedown{ @keyframes slideInLeft { from { transform: translateX(calc(-100% - 444px)); } to { transform: translateX(0); } } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 444px)); } } from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } /* ── Dashboard slide-out panel ─────────────────────────────── */ :root { --db-navy: #1a2744; --db-amber: #d4830a; --db-gray: #6b7280; --db-gray-l:#9ca3af; --db-border:#e5e7eb; --db-bg: #f9fafb; --db-red: #c0392b; --db-font-serif: 'Lora', Georgia, serif; } #dashboard-overlay { display: none; position: fixed; inset: 0; z-index: 900; /* No background dim — panel doesn't cover the left panels */ pointer-events: none; } #dashboard-overlay.open { display: block; pointer-events: auto; } #dashboard-panel { display: none; position: fixed; top: 64px; left: 444px; right: 20px; height: 840px; max-height: calc(100vh - 104px); background: #fff; z-index: 901; box-shadow: 0 4px 32px rgba(0,0,0,0.18); border-radius: 14px; flex-direction: column; overflow: hidden; font-family: 'Source Sans 3','Segoe UI',sans-serif; } #dashboard-panel.open { display: flex; transform: translateX(0); } .db-header { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--db-border); background: #22c55e; color: white; flex-shrink: 0; gap: 12px; } .db-logo { font-family: var(--db-font-serif); font-size: 18px; font-weight: 700; color: white; } .db-logo em { font-style:normal; color: #f5a623; } .db-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); } .db-spacer { flex: 1; } .db-close-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .db-close-btn:hover { background: rgba(255,255,255,0.1); } .db-tabs { display: flex; border-bottom: 2px solid var(--db-border); background: white; flex-shrink: 0; } .db-tab-btn { padding: 12px 28px; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--db-gray); background: transparent; border: none; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .15s; display: flex; align-items: center; gap: 8px; } .db-tab-btn:hover { color: var(--db-navy); } .db-tab-btn.active { color: var(--db-navy); border-bottom-color: #d4830a; } .db-tab-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--db-border); color: var(--db-gray); } .db-tab-btn.active .db-tab-badge { background: #d4830a; color: white; } .db-body { flex: 1; overflow-y: auto; padding: 24px 28px 40px; background: var(--db-bg); } .db-tab-panel { display: none; } .db-tab-panel.active { display: block; } /* Ride cards in panel */ .db-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .db-filter { display: flex; gap: 6px; } .db-chip { padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--db-border); background: white; color: var(--db-gray); cursor: pointer; transition: all .15s; font-family: inherit; } .db-chip.active { background: var(--db-navy); color: white; border-color: var(--db-navy); } .db-chip:hover:not(.active) { border-color: var(--db-navy); color: var(--db-navy); } .db-add-btn { padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 700; border: none; background: #d4830a; color: white; cursor: pointer; font-family: inherit; transition: all .15s; } .db-add-btn:hover { background: #f5a623; } .db-limit-notice { display: none; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 16px; font-size: 13px; color: #92400e; margin-bottom: 16px; } .db-loading { text-align: center; padding: 48px; color: var(--db-gray-l); font-size: 14px; } .db-spin { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--db-border); border-top-color: #d4830a; border-radius: 50%; animation: spin .7s linear infinite; margin-bottom: 12px; } .db-empty { text-align: center; padding: 64px 24px; background: white; border: 1px solid var(--db-border); border-radius: 10px; } .db-empty-icon { font-size: 48px; margin-bottom: 16px; } .db-empty-title { font-family: var(--db-font-serif); font-size: 20px; font-weight: 600; color: var(--db-navy); margin-bottom: 8px; } .db-empty-sub { font-size: 14px; color: var(--db-gray); margin-bottom: 24px; line-height: 1.5; } /* Ride card */ .db-ride-card { background: white; border: 1px solid var(--db-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 14px; transition: box-shadow .15s; } .db-ride-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .db-ride-card.inactive { opacity: 0.55; } .db-ride-icon { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .db-ride-icon.commute { background: rgba(26,39,68,0.08); } .db-ride-icon.trip { background: rgba(212,131,10,0.1); } .db-ride-info { flex: 1; min-width: 0; } .db-ride-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .db-ride-name { font-size: 14px; font-weight: 600; color: var(--db-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-ride-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; } .db-ride-tag.commute { background: rgba(26,39,68,0.08); color: var(--db-navy); } .db-ride-tag.trip { background: rgba(212,131,10,0.12); color: #d4830a; } .db-ride-status { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .db-ride-status.active { background: #22c55e; } .db-ride-status.inactive { background: #d1d5db; } .db-ride-route { font-size: 12px; color: var(--db-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .db-ride-meta { display: flex; gap: 12px; flex-wrap: wrap; } .db-ride-meta-item { font-size: 11px; color: var(--db-gray-l); display: flex; align-items: center; gap: 3px; } .db-ride-actions { display: flex; gap: 3px; flex-shrink: 0; } .db-action-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--db-border); background: white; color: var(--db-gray); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; position: relative; } .db-action-btn:hover { background: var(--db-bg); color: var(--db-navy); } .db-action-btn.danger:hover { background: #fef2f2; color: var(--db-red); border-color: #fca5a5; } /* Profile tab */ .db-profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; } @media (max-width: 700px) { .db-profile-grid { grid-template-columns: 1fr; } } .db-profile-card { background: white; border: 1px solid var(--db-border); border-radius: 10px; padding: 24px 18px; text-align: center; } .db-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--db-navy); color: white; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-family: var(--db-font-serif); border: 3px solid var(--db-border); } .db-profile-name { font-family: var(--db-font-serif); font-size: 17px; font-weight: 700; color: var(--db-navy); margin-bottom: 3px; } .db-profile-email { font-size: 12px; color: var(--db-gray); margin-bottom: 14px; } .db-stat-row { display: flex; border-top: 1px solid var(--db-border); padding-top: 14px; } .db-stat { flex: 1; text-align: center; } .db-stat + .db-stat { border-left: 1px solid var(--db-border); } .db-stat-val { font-size: 20px; font-weight: 700; color: var(--db-navy); font-family: var(--db-font-serif); } .db-stat-label { font-size: 10px; color: var(--db-gray-l); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .db-form-card { background: white; border: 1px solid var(--db-border); border-radius: 10px; padding: 22px; } .db-section-title { font-family: var(--db-font-serif); font-size: 14px; font-weight: 600; color: var(--db-navy); margin-bottom: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--db-border); } .db-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .db-form-row.full { grid-template-columns: 1fr; } .db-field label { display: block; font-size: 11px; font-weight: 600; color: var(--db-gray); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; } .db-field input, .db-field select, .db-field textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--db-border); border-radius: 7px; font-size: 13px; font-family: inherit; color: var(--db-navy); background: white; outline: none; transition: border-color .15s; } .db-field input:focus, .db-field select:focus, .db-field textarea:focus { border-color: #d4830a; box-shadow: 0 0 0 3px rgba(212,131,10,0.1); } .db-field textarea { resize: vertical; min-height: 72px; } .db-role-sel { display: flex; gap: 6px; } .db-role-btn { flex: 1; padding: 8px 6px; border: 1px solid var(--db-border); border-radius: 6px; font-size: 11px; font-weight: 600; font-family: inherit; color: var(--db-gray); background: white; cursor: pointer; text-align: center; transition: all .15s; } .db-role-btn:hover { border-color: var(--db-navy); color: var(--db-navy); } .db-role-btn.active { background: var(--db-navy); color: white; border-color: var(--db-navy); } .db-seats-btn { flex: 1; padding: 7px 4px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 1px solid #e5e7eb; background: white; color: #6b7280; cursor: pointer; font-family: inherit; transition: all .15s; } .db-seats-btn.active, .db-seats-btn:hover { background: #1a2744; color: white; border-color: #1a2744; } .db-save-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--db-border); } .db-btn { padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .15s; } .db-btn-primary { background: var(--db-navy); color: white; } .db-btn-primary:hover { background: #243158; } .db-btn-outline { background: white; color: var(--db-gray); border: 1px solid var(--db-border); } .db-btn-outline:hover { background: var(--db-bg); color: var(--db-navy); } .db-btn-danger { background: white; color: var(--db-red); border: 1px solid #fca5a5; } .db-btn-danger:hover { background: #fef2f2; } /* Confirm in panel */ .db-confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9500; align-items: center; justify-content: center; } .db-confirm-overlay.open { display: flex; } .db-confirm-box { background: white; border-radius: 12px; padding: 26px 26px 18px; max-width: 360px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .db-confirm-title { font-family: var(--db-font-serif); font-size: 16px; font-weight: 700; color: var(--db-navy); margin-bottom: 8px; } .db-confirm-msg { font-size: 13px; color: var(--db-gray); margin-bottom: 18px; line-height: 1.5; } .db-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Dashboard tab on card */ #dashboard-tab:hover { background: #16a34a !important; } /* ── Onboarding slide-out panel ──────────────────────────────── */ #onboarding-panel { display: none; position: fixed; top: 64px; left: 444px; width: 360px; height: 840px; max-height: calc(100vh - 84px); background: #fff; z-index: 902; box-shadow: 0 4px 32px rgba(0,0,0,0.18); border-radius: 14px; flex-direction: column; overflow: hidden; font-family: 'Source Sans 3','Segoe UI',sans-serif; } #onboarding-panel.open { display: flex; transform: translateX(0); } .ob-header { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #e5e7eb; background: #1a2744; color: white; flex-shrink: 0; gap: 12px; } .ob-logo { font-family: 'Lora',Georgia,serif; font-size: 18px; font-weight: 700; color: white; } .ob-logo em { font-style:normal; color: #f5a623; } .ob-header-title { font-size: 14px; color: rgba(255,255,255,0.7); } .ob-spacer { flex: 1; } .ob-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .ob-close:hover { background: rgba(255,255,255,0.1); } /* Progress */ .ob-progress { height: 4px; background: #e5e7eb; flex-shrink: 0; } .ob-progress-fill { height: 100%; background: #d4830a; transition: width .4s ease; } /* Body */ .ob-body { flex: 1; overflow-y: auto; padding: 32px 36px; background: #f9fafb; } .ob-step { display: none; } .ob-step.active { display: block; } .ob-step-label { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; } .ob-step-title { font-family: 'Lora',Georgia,serif; font-size: 22px; font-weight: 700; color: #1a2744; letter-spacing: -0.4px; margin-bottom: 6px; } .ob-step-sub { font-size: 14px; color: #6b7280; line-height: 1.5; margin-bottom: 28px; } /* Role cards */ .ob-role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 8px; } .ob-role-card { border: 2px solid #e5e7eb; border-radius: 10px; padding: 20px 12px; text-align: center; cursor: pointer; transition: all .15s; background: white; } .ob-role-card:hover { border-color: #d4830a; background: #fffbf2; } .ob-role-card.selected { border-color: #d4830a; background: #fffbf2; box-shadow: 0 0 0 3px rgba(212,131,10,0.12); } .ob-role-icon { font-size: 28px; margin-bottom: 8px; } .ob-role-label { font-size: 13px; font-weight: 600; color: #1a2744; } .ob-role-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; } /* Step 2 */ .ob-map-card { border: 2px dashed #e5e7eb; border-radius: 10px; padding: 36px 24px; text-align: center; } .ob-map-icon { font-size: 42px; margin-bottom: 14px; } .ob-map-title { font-family: 'Lora',Georgia,serif; font-size: 16px; font-weight: 600; color: #1a2744; margin-bottom: 8px; } .ob-map-sub { font-size: 13px; color: #6b7280; line-height: 1.6; } /* Footer */ .ob-footer { padding: 16px 28px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5e7eb; background: white; flex-shrink: 0; } .ob-dots { display: flex; gap: 6px; } .ob-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5e7eb; transition: background .2s; } .ob-dot.active { background: #d4830a; } .ob-dot.done { background: #1a2744; } .ob-btn { padding: 10px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .15s; } .ob-btn-primary { background: #1a2744; color: white; } .ob-btn-primary:hover { background: #243158; } .ob-btn-amber { background: #d4830a; color: white; } .ob-btn-amber:hover { background: #f5a623; } .ob-btn-ghost { background: transparent; color: #6b7280; border: 1px solid #e5e7eb; } .ob-btn-ghost:hover { color: #1a2744; } .ob-skip { font-size: 12px; color: #9ca3af; cursor: pointer; text-decoration: none; background:none; border:none; font-family:inherit; } .ob-skip:hover { color: #6b7280; } #site-footer { position:fixed; bottom:0; left:0; right:0; z-index:900; height:32px; background:#0a0a0a; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-top:1px solid #222; } .footer-legal { font-size:10px; color:#aaa; font-family:var(--font); letter-spacing:.03em; } .footer-bug-btn { font-size:12px; font-weight:600; color:#aaa; background:none; border:none; cursor:pointer; font-family:var(--font); padding:4px 8px; border-radius:4px; transition:color .15s; } .footer-bug-btn:hover { color:#f5a623; } /* Bug modal */ .bug-overlay { display:none; position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); align-items:center; justify-content:center; } .bug-overlay.open { display:flex; } .bug-modal { background:#fff; border-radius:16px; width:460px; max-width:95vw; box-shadow:0 24px 60px rgba(0,0,0,0.2); animation:fadeUp .2s ease both; overflow:hidden; } .bug-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 14px; border-bottom:1px solid #f1f5f9; } .bug-modal-title { font-size:15px; font-weight:800; color:#0f172a; } .bug-close { width:28px; height:28px; border-radius:50%; border:1px solid #e2e8f0; background:#f8fafc; color:#94a3b8; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } .bug-close:hover { background:#f1f5f9; color:#0f172a; } .bug-modal-body { padding:18px 22px; display:flex; flex-direction:column; gap:14px; } .bug-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748b; margin-bottom:6px; } .bug-type-row { display:flex; gap:8px; } .bug-type-btn { flex:1; padding:8px; border-radius:8px; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .15s; } .bug-type-btn.active { background:#0f172a; border-color:#0f172a; color:#fff; } .bug-field input, .bug-field textarea { width:100%; padding:9px 12px; border-radius:8px; border:1px solid #e2e8f0; font-family:var(--font); font-size:13px; color:#0f172a; outline:none; resize:vertical; box-sizing:border-box; transition:border-color .15s; } .bug-field input:focus, .bug-field textarea:focus { border-color:var(--amber); } .bug-field textarea { min-height:80px; } .bug-modal-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 22px 18px; border-top:1px solid #f1f5f9; } #bug-status { font-size:12px; color:#64748b; } .bug-cancel-btn { padding:8px 16px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#64748b; font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer; } .bug-submit-btn { padding:8px 18px; border-radius:8px; border:none; background:var(--amber); color:#08101f; font-family:var(--font); font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s; } .bug-submit-btn:hover { opacity:.88; } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } :root { --amber:#f5a623; --green:#16a34a; --red:#dc2626; --navy:#07111e; --soft:#8fa4c8; --border:#1a2d47; --font:'Archivo',system-ui,sans-serif; --font-hd:'Archivo Black',system-ui,sans-serif; } html,body { width:100%; height:100%; overflow:hidden; font-family:var(--font); background:#e8e4dc; } #map { position:absolute; inset:0; } .maplibregl-ctrl-attrib,.maplibregl-ctrl-logo { display:none !important; } /* SVG overlay for curved text */ #circle-labels { position:absolute; inset:0; pointer-events:none; z-index:150; width:100%; height:100%; overflow:visible; } .radius-curved-text { font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.5px; } /* Live radius badge next to edge handle */ .radius-badge { position:absolute; z-index:201; pointer-events:none; background:white; border:1.5px solid currentColor; border-radius:20px; padding:2px 8px; font-size:11px; font-weight:700; font-family:'Archivo',sans-serif; white-space:nowrap; transform:translate(-50%, -140%); box-shadow:0 1px 4px rgba(0,0,0,0.15); } /* Navbar */ #nav { position:absolute; top:0; left:0; right:0; height:52px; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:rgba(7,17,30,0.93); border-bottom:1px solid rgba(255,255,255,0.06); backdrop-filter:blur(20px); } .logo { font-family:var(--font-hd); font-size:22px; color:#fff; letter-spacing:-.5px; } .logo span { color:var(--amber); } .logo em { font-style:normal; font-family:var(--font); font-size:11px; color:#3d5573; margin-left:8px; font-weight:400; } .filter-pills { display:flex; gap:3px; background:rgba(20,36,61,0.7); border-radius:100px; padding:3px; } .pill { padding:5px 14px; border-radius:100px; border:1px solid transparent; background:transparent; color:var(--soft); font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font); transition:all .2s; } .pill.active { background:rgba(245,166,35,0.18); color:var(--amber); border-color:rgba(245,166,35,0.35); font-weight:600; } .nav-right { display:flex; gap:10px; align-items:center; } .user-loc { font-size:12px; color:var(--soft); display:flex; align-items:center; gap:6px; } .loc-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:pulse 2s ease infinite; } .btn-outline { padding:6px 14px; border-radius:7px; background:transparent; border:1px solid var(--border); color:var(--soft); font-size:12px; cursor:pointer; font-family:var(--font); transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; } .btn-outline:hover { border-color:var(--amber); color:var(--amber); } .btn-primary { padding:6px 14px; border-radius:7px; background:var(--amber); border:none; color:var(--navy); font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); text-decoration:none; display:inline-flex; align-items:center; } .btn-primary:hover { background:#fbb740; } /* Hamburger */ .hamburger { width:36px;height:36px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.15);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;transition:all .2s; } .hamburger:hover { border-color:var(--amber); } .hamburger span { display:block;width:16px;height:1.5px;background:white;border-radius:2px;transition:all .2s; } .hamburger:hover span { background:var(--amber); } /* Slide-out menu */ .slide-menu { position:fixed;top:0;right:-280px;width:280px;height:100vh;background:rgba(8,16,31,0.98);border-left:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(20px);z-index:2000;transition:right .3s cubic-bezier(.4,0,.2,1);padding:24px 0;display:flex;flex-direction:column; } .slide-menu.open { right:0; } .slide-menu-header { display:flex;align-items:center;justify-content:space-between;padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,0.07); } .slide-menu-logo { font-family:'Archivo Black',sans-serif;font-size:16px;color:white; } .slide-menu-logo em { font-style:normal;color:#f5a623; } .slide-menu-close { width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,0.06);border:none;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center; } .slide-menu-close:hover { background:rgba(255,255,255,0.12); } .menu-items { padding:16px 0;flex:1; } .menu-item { display:flex;align-items:center;gap:14px;padding:14px 20px;color:white;text-decoration:none;font-size:14px;font-weight:600;transition:all .15s;cursor:pointer;border:none;background:none;width:100%;font-family:'Archivo',sans-serif; } .menu-item:hover { background:rgba(255,255,255,0.05);color:#f5a623; } .menu-item-icon { font-size:18px;width:24px;text-align:center; } .menu-item-soon { font-size:10px;font-weight:700;color:#3d5573;border:1px solid #1e3050;border-radius:4px;padding:2px 6px;margin-left:auto; } .menu-divider { height:1px;background:rgba(255,255,255,0.07);margin:8px 20px; } .menu-footer { padding:16px 20px;border-top:1px solid rgba(255,255,255,0.07); } .menu-footer-text { font-size:11px;color:#3d5573; } .menu-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1999;display:none; } .menu-overlay.open { display:block; } /* ── Results Panel (left side) ── */ #results-panel { position:fixed; left:12px; top:218px; bottom:48px; width:420px; z-index:800; background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,0.13); display:flex; flex-direction:column; transition:width .25s cubic-bezier(.4,0,.2,1), opacity .2s; overflow:hidden; user-select:none; pointer-events:all; } .drawer-table-wrap { overflow-y:auto;flex:1;overflow-x:hidden; } .rp-header { flex-shrink:0; display:flex; flex-direction:column; border-bottom:1px solid #f1f5f9; background:#f8fafc; border-radius:14px 14px 0 0; } .rp-header-row { display:flex; align-items:center; padding:9px 10px 9px 14px; gap:8px; min-height:40px; } .rp-collapse-btn { width:28px; height:28px; border-radius:7px; border:1px solid #e2e8f0; background:#fff; color:#64748b; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; } .rp-collapse-btn:hover { background:#f1f5f9; color:#0f172a; } .rp-title-area { flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; } .rp-filter-area { display:flex; align-items:center; gap:6px; flex-shrink:0; } .drawer-title { font-size:13px;font-weight:800;color:#0f172a; white-space:nowrap; } .drawer-title span { color:#c97d00; } .drawer-meta { font-size:11px;color:#64748b; white-space:nowrap; } .drawer-meta strong { color:#16a34a; } .fp-chip { padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;cursor:pointer;transition:all .15s;font-family:inherit; } .fp-chip:hover { color:#0f172a;border-color:#cbd5e1; } .fp-chip.active { background:#f5a623;border-color:#f5a623;color:#08101f; } .drawer-close { padding:3px 10px;border-radius:6px;border:1px solid #e2e8f0;background:transparent;color:#64748b;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap; } .drawer-close:hover { color:#0f172a; } .rp-body { flex:1; overflow:hidden; display:flex; flex-direction:column; } .drawer-table-wrap { overflow-y:auto;flex:1; } .drawer-table { width:100%;border-collapse:collapse;font-size:12px; } .drawer-table thead th { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; padding:6px 4px 5px; border-bottom:1px solid #f1f5f9; cursor:pointer; user-select:none; white-space:nowrap; } .drawer-table thead th:hover { color:#0f172a; } .drawer-table thead th { cursor:pointer; user-select:none; white-space:nowrap; } .drawer-table thead th:hover { color:#64748b; } .drawer-table thead th.dt-sorted { color:#0f172a; } .drawer-table thead th.dt-sorted::after { content:' ▾'; font-size:8px; color:#0f172a; } .drawer-table thead th.dt-sorted.asc::after { content:' ▴'; font-size:8px; color:#0f172a; } .drawer-table tbody tr { border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .1s; height:34px; } .drawer-table tbody tr:hover { background:#f8fafc; } .drawer-table tbody tr.dt-active { background:rgba(245,166,35,0.08); border-left:3px solid var(--amber); } .drawer-table tbody td { padding:4px 8px;vertical-align:middle;white-space:nowrap; } .dt-match { font-weight:800; } .dt-match.hi { color:#16a34a; } .dt-match.mi { color:#c97d00; } .dt-match.lo { color:#94a3b8; } .dt-avatar { width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;margin-right:5px;vertical-align:middle;flex-shrink:0; } .dt-name { font-weight:700;color:#0f172a;vertical-align:middle; } .dt-route { color:#64748b;font-size:11px; } .dt-role { font-size:10px;padding:1px 6px;border-radius:3px;font-weight:700; } .dt-role.dr { background:rgba(34,197,94,0.15);color:var(--green); } .dt-role.ri { background:rgba(245,166,35,0.15);color:var(--amber); } .dt-role.bo { background:rgba(0,212,180,0.15);color:var(--teal); } .dt-days { color:var(--soft);font-size:11px;letter-spacing:1px; } .dt-days .on { color:white;font-weight:700; } .dt-dist { color:var(--soft);font-size:11px; } .dt-connect { padding:3px 8px;border-radius:5px;background:var(--amber);border:none;color:#08101f;font-size:10px;font-weight:800;cursor:pointer;font-family:var(--font);transition:all .15s; } .dt-connect:hover { background:#f7b84a; } .dm-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px); } .dm-overlay.open { display:flex; } .dm-modal { background:#0d1a2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;width:400px;max-width:90vw;animation:fadeUp .25s ease both; } .dm-modal h3 { font-size:16px;font-weight:900;margin-bottom:4px; } .dm-modal p { font-size:12px;color:var(--soft);margin-bottom:16px; } .dm-modal textarea { width:100%;min-height:90px;padding:10px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:white;font-family:var(--font);font-size:13px;resize:vertical;outline:none;margin-bottom:12px; } .dm-modal textarea:focus { border-color:var(--amber); } .dm-btns { display:flex;gap:8px;justify-content:flex-end; } .dm-cancel { padding:8px 16px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:white;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer; } .dm-send { padding:8px 16px;border-radius:7px;border:none;background:var(--amber);color:#08101f;font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer; } /* Row hover detail card */ #rp-hover-card { position:fixed; z-index:1500; pointer-events:all; left:444px; background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; width:240px; box-shadow:0 8px 32px rgba(0,0,0,0.18); display:none; transition:opacity .15s; } #rp-hover-card.visible { display:block; pointer-events:all; } .rhc-name { font-size:14px; font-weight:800; color:#0f172a; margin-bottom:2px; } .rhc-score { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-bottom:10px; } .rhc-score.hi { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.25); } .rhc-score.mi { background:rgba(245,166,35,0.12); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rhc-score.lo { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; } .rhc-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:5px; font-size:12px; color:#475569; } .rhc-icon { width:14px; flex-shrink:0; text-align:center; margin-top:1px; } .rhc-val { line-height:1.4; color:#1e293b; } .rhc-more-btn { width:100%; margin-top:10px; padding:7px; border-radius:7px; border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; font-family:var(--font); font-size:11px; font-weight:700; cursor:pointer; transition:background .15s; letter-spacing:.03em; } .rhc-more-btn:hover { background:#f1f5f9; border-color:#cbd5e1; } /* ── Detail Card ── */ #rp-detail-card { position:fixed; z-index:1600; left:444px; top:72px; width:300px; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.15); display:none; overflow:hidden; animation:fadeUp .2s ease both; } #rp-detail-card.open { display:block; } .rdc-header { background:#f8fafc; padding:20px 20px 16px; border-bottom:1px solid #f1f5f9; position:relative; } .rdc-close { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#94a3b8; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } .rdc-close:hover { background:#f1f5f9; color:#0f172a; } .rdc-avatar-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .rdc-avatar { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; flex-shrink:0; border:2px solid #e2e8f0; } .rdc-name { font-size:17px; font-weight:900; color:#0f172a; line-height:1.2; } .rdc-score-row { display:flex; align-items:center; gap:8px; margin-top:4px; } .rdc-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; } .rdc-badge.hi { background:rgba(34,197,94,0.12); color:#16a34a; border:1px solid rgba(34,197,94,0.25); } .rdc-badge.mi { background:rgba(245,166,35,0.12); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rdc-badge.lo { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; } .rdc-role-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; background:rgba(0,180,160,0.1); color:#0d9488; border:1px solid rgba(0,180,160,0.2); } .rdc-body { padding:16px 20px; } .rdc-section { margin-bottom:16px; } .rdc-section-label { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; margin-bottom:8px; } .rdc-route-row { display:flex; align-items:center; gap:0; } .rdc-route-dots { display:flex; flex-direction:column; align-items:center; gap:0; flex-shrink:0; margin-right:10px; } .rdc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .rdc-line { width:2px; height:16px; background:#e2e8f0; margin:2px 0; } .rdc-route-labels { flex:1; min-width:0; } .rdc-route-from { font-size:12px; font-weight:600; color:#0f172a; margin-bottom:14px; } .rdc-route-to { font-size:12px; font-weight:600; color:#0f172a; } .rdc-days-grid { display:flex; gap:5px; } .rdc-day { width:30px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; transition:all .1s; } .rdc-day.on { background:rgba(245,166,35,0.15); color:#c97d00; border:1px solid rgba(245,166,35,0.3); } .rdc-day.off { background:#f8fafc; color:#cbd5e1; border:1px solid #f1f5f9; } .rdc-stat-row { display:flex; gap:8px; } .rdc-stat { flex:1; background:#f8fafc; border:1px solid #f1f5f9; border-radius:8px; padding:8px 10px; text-align:center; } .rdc-stat-val { font-size:15px; font-weight:800; color:#0f172a; } .rdc-stat-lbl { font-size:9px; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; } .rdc-pscore-bar { height:4px; border-radius:2px; background:#f1f5f9; margin-bottom:8px; overflow:hidden; } .rdc-pscore-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--amber)); transition:width .6s ease; } .rdc-pscore-labels { display:flex; justify-content:space-between; font-size:10px; color:#94a3b8; margin-bottom:12px; } .rdc-connect-btn { width:100%; padding:11px; border-radius:9px; border:none; background:var(--amber); color:#08101f; font-family:var(--font); font-size:13px; font-weight:900; cursor:pointer; letter-spacing:.02em; transition:opacity .15s; } .rdc-connect-btn:hover { opacity:.88; } .rdc-footer { padding:0 20px 16px; } /* ── Rider pill markers ── */ .rm-marker { background: white; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 3px 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); white-space: nowrap; max-width: 90px; text-align: center; } .rm-marker:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.28); border-color:#f5a623; } .rm-marker.rm-active { border-color: #f5a623; background:#fff8ee; } .rm-marker-name { display:block; font-size:10px; font-weight:800; color:#0f172a; font-family:var(--font); line-height:1.4; overflow:hidden; text-overflow:ellipsis; } .rm-marker-sub { display:block; font-size:9px; color:#64748b; font-family:var(--font); line-height:1.3; } /* Card */ #card { position:absolute; top:64px; left:12px; z-index:200; width:420px; background:rgba(255,255,255,0.97); border-radius:14px; box-shadow:0 4px 32px rgba(0,0,0,0.18); overflow:visible; animation:slidedown .35s ease both; } .card-inputs { padding:14px 16px 10px 10px; } .input-row { display:flex; align-items:center; gap:6px; padding:9px 0; } .input-row + .input-row { border-top:1px solid #f0f0f0; } .row-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .row-dot.from { background:var(--green); } .row-dot.to { background:var(--red); } .row-label { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; width:40px; flex-shrink:0; } .row-label.from { color:var(--green); } .row-label.to { color:var(--red); } .row-input { width:100%; border:none; outline:none; font-size:16px; font-family:var(--font); color:#111; background:transparent; caret-color:var(--amber); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; box-sizing:border-box; padding-left:8px; } .row-input::placeholder { color:#bbb; font-size:14px; } /* TO input cycling tip styles */ #to-input-wrap { flex:1; min-width:0; position:relative; } #to-input.tip-mode::placeholder { color: #f5a623; font-size: 16px; opacity: 0.85; } .btn-clear { width:18px; height:18px; border-radius:50%; border:none; background:#e5e7eb; color:#666; font-size:13px; cursor:pointer; display:none; align-items:center; justify-content:center; flex-shrink:0; line-height:1; transition:background .15s; } .btn-clear:hover { background:var(--red); color:white; } .dot-connector { width:1px; height:8px; background:#e0e0e0; margin-left:21px; } /* CTA */ .card-cta { margin:0 16px 14px; display:block; width:calc(100% - 32px); padding:12px; border-radius:10px; border:none; background:#e5e7eb; color:#aaa; font-size:14px; font-weight:700; font-family:var(--font-hd); cursor:not-allowed; transition:all .25s; } .card-cta.ready { background:var(--amber); color:var(--navy); cursor:pointer; box-shadow:0 4px 20px rgba(245,166,35,0.35); } .card-cta.ready:hover { background:#fbb740; transform:translateY(-1px); } /* Suggestions panel - compact one-line style */ #suggestions-panel { position:fixed; z-index:1000; display:none; max-height:360px; overflow-y:auto; border-radius:0 0 14px 14px; background:white; box-shadow:0 8px 24px rgba(0,0,0,0.15); border:1px solid #e5e7eb; border-top:none; } .dd-item { display:flex; flex-direction:row; align-items:center; gap:0; padding:8px 14px; cursor:pointer; border-bottom:1px solid #f0f0f0; background:white; } .dd-item:last-child { border-bottom:none; } .dd-item:hover { background:#fff8ee; } .dd-text { flex:1; min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:6px; overflow:hidden; } .dd-label { font-size:13px; color:#202124; font-weight:600; white-space:nowrap; flex-shrink:0; } .dd-sub { font-size:12px; color:#70757a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dd-dist { font-size:12px; color:#f5a623; font-weight:600; white-space:nowrap; flex-shrink:0; margin-left:auto; padding-left:8px; } .dd-loading { display:flex; align-items:center; gap:12px; padding:12px 14px; color:#70757a; font-size:13px; background:white; } .dd-show-more { padding: 10px 16px; text-align: center; font-size: 13px; font-weight: 600; color: #f5a623; cursor: pointer; border-top: 1px solid #eee; background: #fafafa; transition: background .15s; } .dd-show-more:hover { background: #fff8ed; } .dd-empty { padding:12px 14px; color:#70757a; font-size:13px; background:white; } /* Tooltip */ #tooltip { position:fixed; z-index:999; pointer-events:none; background:rgba(7,17,30,0.96); border:1px solid #1a2d47; border-radius:12px; padding:12px 16px; min-width:210px; box-shadow:0 12px 40px rgba(0,0,0,0.6); font-size:12px; color:#eef2ff; display:none; } .tt-title { font-weight:700; font-size:13px; margin-bottom:7px; color:white; } .tt-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; color:#8fa4c8; } .tt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .tt-footer { margin-top:8px; padding-top:8px; border-top:1px solid #1a2d47; font-size:11px; color:#00d4b4; } /* Loading */ #loading { position:absolute; inset:0; z-index:500; background:#e8e4dc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity .4s; } #loading.hidden { opacity:0; pointer-events:none; display:none; } .ld-logo { font-family:var(--font-hd); font-size:28px; color:#222; } .ld-logo span { color:var(--amber); } .spinner { width:28px; height:28px; border-radius:50%; border:3px solid #ddd; border-top-color:var(--amber); animation:spin .7s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes slidedown{ @keyframes slideInLeft { from { transform: translateX(calc(-100% - 444px)); } to { transform: translateX(0); } } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 444px)); } } from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } .db-toggle-btn { padding: 5px 12px; border-radius: 20px; border: 1px solid #e5e7eb; background: white; color: #6b7280; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; } .db-toggle-btn.active { background: #1a2744; color: white; border-color: #1a2744; } .db-toggle-btn:hover:not(.active) { border-color: #1a2744; color: #1a2744; } .db-hobby-btn { padding: 5px 12px; border-radius: 20px; border: 1px solid #e5e7eb; background: white; color: #6b7280; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; } .db-hobby-btn.active { background: #f0fdf4; color: #16a34a; border-color: #86efac; } .db-hobby-btn:hover:not(.active) { border-color: #86efac; color: #16a34a; }