/* ============================================================ RoadDrive — design tokens (light + dark) ============================================================ */ :root { --primary: #e98d00; --primary-hover: #c97800; --secondary: #1900e9; --secondary-hover: #1400c2; --accent: #026270; --accent-hover: #014952; --success: #1e9e5a; --danger: #dc3545; --danger-hover: #c82333; --warning: #fd7e14; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-sm: 0 2px 8px rgba(20, 20, 30, 0.06); --shadow-md: 0 10px 30px rgba(20, 20, 30, 0.10); --shadow-lg: 0 20px 48px rgba(20, 20, 30, 0.16); --container: 1180px; --bg: #ffffff; --bg-soft: #f7f8fa; --bg-mute: #eef0f3; --text: #1c1f24; --text-muted: #667085; --border: #e5e7eb; --card-bg: #ffffff; --nav-bg: rgba(255, 255, 255, 0.92); --overlay: rgba(15, 17, 20, 0.55); --input-bg: #ffffff; } [data-theme="dark"] { color-scheme: dark; --bg: #16181d; --bg-soft: #1c1f26; --bg-mute: #23262e; --text: #eef0f3; --text-muted: #9aa1ad; --border: #2c303a; --card-bg: #1c1f26; --nav-bg: rgba(22, 24, 29, 0.9); --overlay: rgba(0, 0, 0, 0.7); --input-bg: #23262e; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #16181d; --bg-soft: #1c1f26; --bg-mute: #23262e; --text: #eef0f3; --text-muted: #9aa1ad; --border: #2c303a; --card-bg: #1c1f26; --nav-bg: rgba(22, 24, 29, 0.9); --overlay: rgba(0, 0, 0, 0.7); --input-bg: #23262e; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } } /* ============================================================ Reset & base ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; transition: background-color .2s ease, color .2s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; } p { margin: 0 0 1em; color: var(--text-muted); } ul, ol { padding-left: 1.2em; } button { font-family: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } main { display: block; min-height: 60vh; } /* ============================================================ Buttons ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } /* ============================================================ Road loader — RoadDrive's default loading indicator: a small road seen from above, its dashed center line scrolling past like it's being driven. Reusable anywhere a spinner would normally go — drop the markup: and toggle it with the .is-visible class, or the fill variant (.road-loader.road-loader-fill) inside a .btn — see .is-loading below and data-loading-submit in app.js. The dashed line is a repeating-linear-gradient background on an oversized track (100% + one tile wider than its box), slid left by exactly one tile with transform: translateX — not discrete dash elements, and not an animated background-position. Both of those alternatives were tried and dropped: a fixed number of dashes runs out partway across a wide button, leaving the rest of the track blank; animating background-position instead of transform makes the browser re-rasterize the gradient every frame, which visibly stutters on a wide element (a dash looks like it grows then suddenly snaps shorter). transform is GPU-composited — smooth at any width. Every visual knob is a custom property on .road-loader itself, so a size variant (.road-loader-lg) or a one-off tweak is just overriding these — see /dev/road-loader for a live tuning sandbox. ============================================================ */ .road-loader { --road-bg: #24262b; --road-dash-color: var(--primary); --road-dash-width: 12px; --road-dash-height: 3px; --road-gap: 10px; --road-speed: .6s; display: none; position: relative; width: 52px; height: 16px; background: var(--road-bg); border-radius: 4px; overflow: hidden; } .road-loader-track { position: absolute; left: 0; top: calc(50% - var(--road-dash-height) / 2); height: var(--road-dash-height); width: calc(100% + var(--road-dash-width) + var(--road-gap)); background-image: repeating-linear-gradient(to right, var(--road-dash-color) 0, var(--road-dash-color) var(--road-dash-width), transparent var(--road-dash-width), transparent calc(var(--road-dash-width) + var(--road-gap))); animation: road-loader-scroll var(--road-speed) linear infinite; } @keyframes road-loader-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * (var(--road-dash-width) + var(--road-gap)))); } } /* --road-display lets .road-loader-split switch the shown display type to flex without fighting .road-loader.is-visible's specificity (both target the same element when combined: class="road-loader road-loader-split") — reading a custom property has no specificity war, unlike the display property itself would. */ .road-loader.is-visible { display: var(--road-display, block); } /* Optional label, split the dashed line around instead of running it underneath — text with a moving line right through it read as illegible. Structure (replaces the plain .road-loader-track with two half-tracks): Each .road-loader-line is its own independently-scrolling half (same oversized-track-plus-transform technique as .road-loader-track), so the line visibly runs right up to the label on both sides without ever passing behind it. */ .road-loader-split { --road-display: flex; align-items: center; } .road-loader-line { position: relative; align-self: stretch; flex: 1 1 0%; min-width: 10px; overflow: hidden; } .road-loader-line::before { content: ''; position: absolute; left: 0; top: calc(50% - var(--road-dash-height) / 2); height: var(--road-dash-height); width: calc(100% + var(--road-dash-width) + var(--road-gap)); background-image: repeating-linear-gradient(to right, var(--road-dash-color) 0, var(--road-dash-color) var(--road-dash-width), transparent var(--road-dash-width), transparent calc(var(--road-dash-width) + var(--road-gap))); animation: road-loader-scroll var(--road-speed) linear infinite; } .road-loader-text { flex: 0 0 auto; padding: 0 10px; color: #fff; font-weight: 800; letter-spacing: .12em; font-size: .82rem; pointer-events: none; } /* Larger standalone size — same look, for reuse outside a button (a full section/page loading state) — add both classes: road-loader road-loader-lg */ .road-loader-lg { --road-dash-width: 20px; --road-dash-height: 4px; --road-gap: 16px; width: 96px; height: 28px; border-radius: 6px; } .road-loader-lg .road-loader-text { font-size: 1rem; } /* Fill variant — the whole button becomes the road while loading, instead of a small pill floating on top of it (add alongside .road-loader). Keeps the button's own color showing through (no dark asphalt box) — just a white line moving across it, per the golden Log In/Register buttons. */ .road-loader-fill { --road-bg: transparent; --road-dash-color: #fff; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; } .btn.is-loading .btn-label { visibility: hidden; } .btn.is-loading .road-loader-fill { display: var(--road-display, block); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(233,141,0,.28); } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: var(--secondary); color: #fff; box-shadow: 0 4px 14px rgba(25,0,233,.22); } .btn-secondary:hover { background: var(--secondary-hover); } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(2,98,112,.28); } .btn-accent:hover { background: var(--accent-hover); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-ghost-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; } .btn-ghost-white:hover { background: rgba(255,255,255,.15); border-color: #fff; } .btn-white { background: #fff; color: var(--accent); } .btn-white:hover { background: #f0fafa; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-hover); } .btn-block { width: 100%; } .btn-sm { padding: 8px 14px; font-size: 0.85rem; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn:disabled.is-loading { opacity: 1; } /* the road loader is the point — don't wash it out */ .btn-icon { padding: 10px; border-radius: 999px; } /* ============================================================ Top navigation ============================================================ */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .navbar-inner { padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .navbar-left { display: flex; align-items: center; gap: 6px; position: relative; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--text); } .nav-logo img { height: 32px; width: auto; } /* Logo swap: dark-text logo on a light background, light-text logo on a dark one — same [data-theme] + prefers-color-scheme pairing as the design tokens above, so it follows the theme toggle instantly (no flash, since the inline head script sets [data-theme] before first paint). */ .logo-for-dark-theme { display: none; } [data-theme="dark"] .logo-for-light-theme { display: none; } [data-theme="dark"] .logo-for-dark-theme { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-for-light-theme { display: none; } :root:not([data-theme="light"]) .logo-for-dark-theme { display: inline-block; } } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: var(--radius-sm); align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--bg-mute); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: .2s; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* Hamburger dropdown (About/Terms/Privacy/Contact) — mobile Map view only, where the sidebar's link strip is hidden and there is no footer. */ .nav-menu { display: none; position: absolute; left: 0; top: calc(100% + 10px); min-width: 200px; z-index: 200; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; } .nav-menu.open { display: block; } .nav-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: .95rem; font-weight: 500; } .nav-menu a:hover { background: var(--bg-mute); } .nav-menu a.is-active { color: var(--primary); font-weight: 600; } .theme-toggle { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } /* Navbar drive search: fullscreen overlay with a live results list (same idea as the Vue app's modal) */ .search-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; padding: 60px 16px; } .search-overlay[hidden] { display: none; } html.search-open { overflow: hidden; } .search-modal { width: 100%; max-width: 640px; max-height: 80vh; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .search-modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .search-input-icon { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; } .search-modal-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 16px; font-family: inherit; } .search-modal-input::placeholder { color: var(--text-muted); } .search-clear-btn, .search-close-btn { display: flex; align-items: center; justify-content: center; border: none; background: var(--bg-mute); color: var(--text); border-radius: 6px; cursor: pointer; flex-shrink: 0; height: 28px; font-family: inherit; } .search-clear-btn { width: 28px; font-size: 13px; } .search-clear-btn[hidden] { display: none; } .search-close-btn { padding: 0 12px; font-size: 13px; font-weight: 600; } .search-clear-btn:hover, .search-close-btn:hover { background: var(--border); } .search-modal-body { overflow-y: auto; flex: 1; } .search-status { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 14px; } .search-status[hidden], .search-results[hidden] { display: none; } .search-results { list-style: none; margin: 0; padding: 8px; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; color: var(--text); } .search-result-item:hover, .search-result-item.is-active { background: var(--bg-mute); } .search-result-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-mute); } .search-result-info { flex: 1; min-width: 0; } .search-result-info strong { display: block; font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-info p { margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-place { flex-shrink: 0; background: rgba(2,98,112,.12); color: var(--accent); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } @media (max-width: 620px) { .search-overlay { padding: 16px 10px; } .search-result-place { display: none; } } .user-menu { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer; color: var(--text); font-weight: 600; font-size: 0.9rem; } .user-avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; overflow: hidden; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 200; } .user-dropdown.open { display: block; } .user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; color: var(--text); font-size: 0.9rem; font-weight: 500; } .user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg-mute); } .user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; } /* ============================================================ App shell: persistent left sidebar + main content area ============================================================ */ .app-shell { display: flex; align-items: flex-start; max-width: 1400px; margin: 0 auto; } .app-sidebar { flex-shrink: 0; width: 232px; position: sticky; top: 65px; align-self: flex-start; height: calc(100vh - 65px); border-right: 1px solid var(--border); padding: 22px 14px; overflow-y: auto; } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } .sidebar-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--radius-md); font-weight: 600; font-size: .8rem; color: var(--text-muted); text-align: center; } .sidebar-link svg { width: 19px; height: 19px; flex-shrink: 0; } .sidebar-link:hover { background: var(--bg-mute); color: var(--text); } .sidebar-link.active { background: rgba(233,141,0,.1); color: var(--primary); } .app-main { flex: 1; min-width: 0; } .sidebar-scrim { display: none; } /* Mobile: sidebar becomes an off-canvas drawer */ @media (max-width: 860px) { .nav-toggle { display: flex; } .app-sidebar { position: fixed; inset: 0 auto 0 0; top: 0; width: min(280px, 82vw); height: 100vh; z-index: 110; background: var(--bg); box-shadow: var(--shadow-lg); padding: 90px 16px 24px; transform: translateX(-100%); transition: transform .25s ease; border-right: 1px solid var(--border); } .app-sidebar.open { transform: translateX(0); } .sidebar-nav { flex-direction: column; } .sidebar-link { flex-direction: row; justify-content: flex-start; padding: 14px; font-size: .95rem; } .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 105; } .sidebar-scrim.open { opacity: 1; pointer-events: auto; } } /* ============================================================ Hero ============================================================ */ .hero { background: var(--primary); color: #fff; padding: 88px 0 64px; text-align: center; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.02em; color: #fff; margin-bottom: 16px; } .hero p.lead { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,.92); max-width: 680px; margin: 0 auto 32px; } .hero .muted { color: rgba(255,255,255,.85); } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .search-bar { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; background: #fff; padding: 8px; border-radius: 999px; box-shadow: var(--shadow-lg); } .search-bar input { flex: 1; border: none; outline: none; padding: 12px 18px; font-size: 1rem; border-radius: 999px; color: #1c1f24; } .search-bar button { border-radius: 999px; } /* ============================================================ Sections / generic ============================================================ */ section { padding: 72px 0; } .section-soft { background: var(--bg-soft); } .section-mute { background: var(--bg-mute); } .section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } .section-head p { font-size: 1.05rem; } .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-pad { padding: 28px; } /* Discover: place text box + "use my location" + radius slider */ .discover-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; } .discover-input { position: relative; display: flex; align-items: center; width: 380px; max-width: 100%; } .discover-input input[type="text"] { width: 100%; padding: 11px 46px 11px 38px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text); font-size: .95rem; outline: none; transition: border-color .15s; } .discover-input input[type="text"]:focus { border-color: var(--primary); } .discover-icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; } .discover-locate { position: absolute; right: 4px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; } .discover-locate svg { width: 19px; height: 19px; } .discover-locate:hover, .discover-locate.is-busy { background: var(--bg-mute); color: var(--primary); } .discover-radius { position: relative; } .discover-radius-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text-muted); font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .15s; } .discover-radius-btn svg { width: 17px; height: 17px; flex-shrink: 0; } .discover-radius-btn strong { color: var(--text); font-variant-numeric: tabular-nums; } .discover-radius-btn .chevron { width: 14px; height: 14px; transition: transform .15s ease; } .discover-radius-btn:hover, .discover-radius-btn[aria-expanded="true"] { border-color: var(--primary); } .discover-radius-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); } .discover-radius-pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60; width: 270px; padding: 14px 16px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .discover-radius-pop[hidden] { display: none; } .discover-radius-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .discover-radius-head label { font-weight: 700; font-size: .88rem; color: var(--text); } .discover-radius-pop input[type="range"] { width: 100%; accent-color: var(--primary); cursor: pointer; } .discover-radius-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: 2px; } .unit-toggle { display: inline-flex; background: var(--bg-mute); border-radius: 999px; padding: 2px; } .unit-toggle button { border: none; background: none; color: var(--text-muted); font-weight: 700; font-size: .78rem; padding: 4px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; } .unit-toggle button:hover { color: var(--text); } .unit-toggle button.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); } /* Room for the road loader's "LOADING" text inside the Discover button. */ .discover-form .btn { min-width: 116px; } .discover-msg { flex-basis: 100%; text-align: center; font-size: .85rem; color: var(--danger); } .discover-msg:empty { display: none; } /* Discover in the Map view's Explore sidebar: same form, stacked to the column width. */ .map-discover { padding: 12px 14px 14px; margin: 8px 0 6px; background: var(--bg-mute); border-block: 1px solid var(--border); } .discover-form--stack { justify-content: stretch; gap: 8px; } .discover-form--stack .discover-input { flex: 1 1 100%; width: auto; } .discover-form--stack .discover-radius { flex: 1 1 0; min-width: 0; } .discover-form--stack .discover-radius-btn { width: 100%; justify-content: center; } .discover-form--stack .btn { flex: 1 1 0; min-width: 0; } .discover-form--stack .discover-radius-pop { left: 0; transform: none; } .map-drive-row-near { color: var(--primary); font-weight: 700; } /* Drive badge (status pill over a thumbnail) and route line */ .drive-card-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; letter-spacing: .02em; } /* Feature / stat / value cards */ .icon-badge { width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(2,98,112,.1); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .feature-card, .value-card { text-align: center; padding: 34px 26px; } .example-card { text-align: center; padding: 30px 20px; } .example-card p { font-size: .95rem; } /* About: Drives / distance (KM | Miles) / Waypoints / Hours. The grid follows its own wrapper's width (not the viewport's) since it also renders inside the Map view's overlay, next to the sidebar. */ .stats-wrap { container-type: inline-size; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-icon { width: 60px; height: 60px; margin: 0 auto 22px; color: var(--accent); display: flex; align-items: center; justify-content: center; } .stat-icon svg { width: 100%; height: 100%; } @container (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @container (max-width: 340px) { .stats-grid { grid-template-columns: 1fr; } } .stat-card { text-align: center; padding: 40px 24px; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary); } .stat-number { font-size: 2.6rem; font-weight: 800; } .stat-label { color: var(--text-muted); } /* ============================================================ Forms ============================================================ */ .auth-shell { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--bg-soft); } .auth-card { width: 100%; max-width: 620px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 44px 56px; } .auth-card h1 { font-size: 1.6rem; text-align: center; } .auth-card > [data-auth-panel] > p.sub { text-align: center; margin-bottom: 28px; } /* Log In / Sign Up tab switcher (a pill toggle, so switching never costs a page load). */ .auth-tabs { display: flex; background: var(--bg-mute); border-radius: 999px; padding: 3px; margin-bottom: 28px; } .auth-tab { flex: 1; border: none; background: none; padding: 11px 16px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--text-muted); cursor: pointer; } .auth-tab:hover { color: var(--text); } .auth-tab.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text); font-size: .95rem; outline: none; transition: border-color .15s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); } .field textarea { font-family: inherit; resize: vertical; } .field-hint { font-size: .8rem; color: var(--text-muted); margin-top: 4px; } /* Password show/hide toggle (see data-password-toggle in app.js) */ .password-field { position: relative; } .field .password-field input { padding-right: 44px; } .password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-sm); } .password-toggle:hover { color: var(--text); background: var(--bg-mute); } .password-toggle svg { width: 18px; height: 18px; } .password-toggle .icon-eye-off { display: none; } .password-toggle.is-visible .icon-eye { display: none; } .password-toggle.is-visible .icon-eye-off { display: block; } .field-check { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--text-muted); } /* A checkbox inside .field (e.g.
) would otherwise inherit the text-input's width:100%/padding/border above and lay out as a huge invisible box, shoving its label far to the right. */ .field-check input[type="checkbox"], .field-check input[type="radio"] { width: 17px; height: 17px; padding: 0; border: 1.5px solid var(--border); flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); } .field-row { display: flex; gap: 14px; } .field-row > .field { flex: 1; } .alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 18px; } .alert-error { background: #fdecec; color: #8a1f2b; border: 1px solid #f3c3c8; } .alert-success { background: #e7f7ee; color: #14532d; border: 1px solid #bfe8d1; } .alert-warning { background: #fff6e5; color: #7a4b00; border: 1px solid #ffe1a3; } [data-theme="dark"] .alert-error { background: #3a1418; color: #ff9aa5; border-color: #5c1f26; } [data-theme="dark"] .alert-success { background: #123222; color: #7be3a6; border-color: #1e5638; } [data-theme="dark"] .alert-warning { background: #3a2a05; color: #ffcf7a; border-color: #5c4310; } .auth-foot { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--text-muted); } .auth-foot a { color: var(--secondary); font-weight: 600; } /* Radio cards (units, map style, plans) */ .choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .choice-card { position: relative; } .choice-card input { position: absolute; opacity: 0; } .choice-card label { display: block; text-align: center; padding: 16px 10px; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; color: var(--text-muted); } .choice-card input:checked + label { border-color: var(--primary); color: var(--primary); background: rgba(233,141,0,.06); } /* ============================================================ App shell content (dashboard / my drives / settings) ============================================================ */ .page-head { padding: 44px 0 8px; } .page-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 6px; } .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 24px 0 30px; flex-wrap: wrap; } .tab { padding: 12px 18px; font-weight: 600; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .95rem; } .tab.active { color: var(--primary); border-color: var(--primary); } .tab:disabled { opacity: .4; cursor: not-allowed; } /* Icon-only tabs (Tracked/Completed/Favorites) — keeps a 5-tab row compact; the full label/count lives in the title tooltip. The count sits inline next to the icon rather than as an overlapping badge, which read as an illegible smudge at this size. */ .tab-icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 14px; } .tab-icon svg { width: 19px; height: 19px; flex-shrink: 0; } .tab-count { font-size: .78rem; font-weight: 700; line-height: 1; } .empty-state { text-align: center; padding: 70px 20px; color: var(--text-muted); } .empty-state .icon-badge { margin-bottom: 22px; } .stack { display: flex; flex-direction: column; gap: 14px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* CTA band */ .cta-band { background: var(--primary); color: #fff; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.85); } /* Contact form (contact.php): one narrow card centered in the wider overlay column. */ .contact-card { margin: 0 auto; } .contact-card .field-row { flex-wrap: wrap; } .contact-card .field-row > .field { min-width: 220px; } .field-error { color: var(--danger); } .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cta-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } .cta-links a { color: #fff; font-weight: 600; opacity: .9; } .cta-links a:hover { opacity: 1; text-decoration: underline; } /* Footer */ .site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 40px 0 26px; } .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 30px; margin-bottom: 30px; } .footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 14px; } .footer-grid a { display: block; padding: 5px 0; color: var(--text-muted); font-size: .9rem; } .footer-grid a:hover { color: var(--primary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* Legal pages */ .prose { max-width: 780px; margin: 0 auto; } .prose h2 { margin-top: 2em; font-size: 1.3rem; } .prose p, .prose li { color: var(--text-muted); line-height: 1.75; } .prose .updated { color: var(--text-muted); font-size: .9rem; margin-bottom: 40px; } /* Utility */ .text-center { text-align: center; } .muted { color: var(--text-muted); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; } .badge-success { background: #e7f7ee; color: #14532d; } .badge-warning { background: #fff6e5; color: #7a4b00; } .badge-danger { background: #fdecec; color: #8a1f2b; } .badge-muted { background: var(--bg-mute); color: var(--text-muted); } .spinner { width: 42px; height: 42px; border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 999px; animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--bg-mute) 25%, var(--border) 37%, var(--bg-mute) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; font-size: .9rem; } /* ============================================================ Map view: its own shell — Explore/My Drives/Profile tabs scoped to a slim sidebar column, a region drill-down list, and a full-bleed map. Replaces the persistent icon rail. ============================================================ */ /* The navbar's real height varies (it can wrap to two lines on narrow screens), so Map view pins itself to the navbar's actual rendered box via flex instead of a hardcoded "100vh - Npx" guess. Scoped to this page only — every other page keeps the normal scrolling body. */ body.map-view-active { --map-footer-h: 46px; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Above the Guide / About / Terms / Privacy overlays (z-index 500, see .map-guide-backdrop): the navbar is its own stacking context, so its user-menu dropdown can only show over an overlay if the whole navbar outranks it. Map pages only — elsewhere the mobile nav drawer (z-index 110) has to stay above the navbar. */ body.map-view-active .navbar { flex-shrink: 0; z-index: 600; } /* max-width + margin:auto here would set auto cross-axis margins on a flex item, which suppresses stretch and shrinks app-shell to content width instead of filling the body — drop both so the map goes full-bleed. */ body.map-view-active .app-shell { flex: 1; min-height: 0; align-items: stretch; max-width: none; margin: 0; } body.map-view-active .app-main { flex: 1; min-height: 0; display: flex; flex-direction: column; } body.map-view-active main { flex: 1; min-height: 0; } /* Profile drops the map on mobile (see .map-view-list rules below), so there's nothing to fill a fixed viewport with there — let the page scroll normally instead. Explore and My Drives (both .map-view-explore) keep the fixed/full-height shell at every width: the map staying edge-to-edge behind a floating sheet is the whole point. */ @media (max-width: 860px) { body.map-view-list { height: auto; overflow: visible; display: block; } body.map-view-list .app-shell { display: block; } body.map-view-list .app-main { display: block; } body.map-view-list main { display: block; } } .map-shell { display: flex; height: 100%; } .map-shell-sidebar { width: 380px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; } /* The scrollable middle, between the tabs (top) and the About/Terms/Privacy links (bottom) — those two stay pinned in view while only this scrolls, same idea as a page header/footer around a scrolling body. */ #map-sidebar-content { flex: 1 1 auto; overflow-y: auto; min-height: 0; } /* Mobile-only drag handle for the bottom-sheet sidebar; inserted by explore-map.js and hidden here so it never shows above the breakpoint. */ .map-sheet-handle { display: none; width: 100%; } .map-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; } .map-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; font-weight: 600; font-size: .8rem; color: var(--text-muted); } .map-tab svg { width: 19px; height: 19px; } .map-tab .user-avatar { width: 22px; height: 22px; font-size: .7rem; } .map-tab.active .user-avatar { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary); } .map-tab:hover { background: var(--bg-mute); color: var(--text); } .map-tab.active { background: rgba(233,141,0,.1); color: var(--primary); } /* The Log In tab also carries data-map-page (see map-tabs.php) — opening it as an AJAX overlay (explore-map_24796.js) toggles .is-active on it rather than re-rendering this partial's own PHP-computed .active class. */ .map-tab.is-active { background: rgba(233,141,0,.1); color: var(--primary); } .map-sidebar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex-shrink: 0; min-height: var(--map-footer-h); box-sizing: border-box; padding: 0 18px; border-top: 1px solid var(--border); background: var(--card-bg); } .map-sidebar-links a { font-size: .88rem; font-weight: 600; color: var(--text-muted); } .map-sidebar-links a:hover, .map-sidebar-links a.is-active { color: var(--primary); } .map-sidebar-head { position: relative; padding: 20px 18px 6px; } .map-sidebar-head h2 { font-size: 1.15rem; margin: 0 0 4px; } .map-sidebar-head p { margin: 0; font-size: .85rem; } .map-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; } .map-back-link svg { width: 15px; height: 15px; } .map-back-link:hover { color: var(--primary); } .map-region-list { display: flex; flex-direction: column; padding: 4px 10px 16px; overflow-y: auto; } .map-region-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 10px; border-radius: var(--radius-sm); color: var(--text); } /* The region name lives in a , whose UA-stylesheet font-weight:bolder would otherwise win over the row's own font-weight — set explicitly here so it matches .map-drive-row-body strong (the drive title) exactly. */ .map-region-row strong { font-size: 16px; font-weight: 600; } .map-region-row:hover { background: var(--bg-mute); } /* Set by explore-map.js when the visitor hovers this region's countries on the map itself — same treatment as a direct :hover so the two feel like one linked control, plus gold text so it's obvious which row lit up. */ .map-region-row.is-map-hover { background: var(--bg-mute); color: var(--primary); } .map-region-row-right { display: flex; align-items: center; gap: 10px; color: var(--text-muted); } .map-region-row-right svg { width: 16px; height: 16px; } .count-pill { background: var(--bg-mute); color: var(--text-muted); font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; min-width: 26px; text-align: center; } .map-drive-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 16px; overflow-y: auto; } .map-drive-row { display: flex; padding: 0; border-radius: var(--radius-md); border: 2px solid transparent; overflow: hidden; background: var(--card-bg); box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .map-drive-row:hover, .map-drive-row.is-map-hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 2px 8px rgba(233,141,0,.15); } .map-drive-row.is-active { border-color: var(--primary); } /* Fills the row's full height (not a small square icon), same as the original Vue app's region view (MapView.css .drive-accordion-thumb). */ .map-drive-row-thumb { position: relative; width: 96px; flex-shrink: 0; align-self: stretch; background: var(--bg-mute); } /* Waypoint count, top-left over the thumbnail (same look as .drive-card-badge). */ .map-drive-row-stops { position: absolute; top: 6px; left: 6px; min-width: 22px; text-align: center; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 999px; } .map-drive-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .map-drive-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 10px 12px; } /* Based on the Vue app's .drive-accordion-name (14px/600), sized up a touch; also shared by .map-region-row so region and drive names read consistently. Wraps to 2 lines instead of a single ellipsis line so the full drive name is readable. */ .map-drive-row-body strong { font-size: 16px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Wraps to a second line instead of truncating — start/end place names are often too long together to fit on one line (e.g. "Mammoth Hot Springs → Mammoth Hot Springs"), and a mid-word ellipsis there reads as broken. */ .map-drive-row-route { font-size: .78rem; color: var(--text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .map-drive-row-loop svg { display: inline-block; vertical-align: -2px; margin-left: 4px; } .map-drive-row-stats { display: flex; align-items: center; gap: 10px; row-gap: 4px; font-size: .76rem; color: var(--text-muted); flex-wrap: wrap; white-space: nowrap; } /* My Drives: triangular corner flag in the card's extreme top-right — yellow with a floppy disk for a drive saved from RoadDrive, teal with a pencil for one the user created. The card's own rounded overflow:hidden clips it flush. */ .map-drive-row { position: relative; } .map-drive-row.has-corner-badge .map-drive-row-body { padding-right: 40px; } .map-drive-row-corner { position: absolute; top: 0; right: 0; width: 46px; height: 46px; color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); } .map-drive-row-corner.is-saved { background: var(--primary); } .map-drive-row-corner.is-created { background: var(--accent); } .map-drive-row-corner svg { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; } /* Tracked tab: a completed GPS-tracking session, not a saved/created drive — no corner badge, just a small pin/check icon by the name so it still reads as distinct from a plain drive card. */ .map-drive-row-tracked-title { display: flex; align-items: flex-start; gap: 6px; } .map-drive-row-tracked-title svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); } /* Tracked session detail panel (map-tracked-panel.php) */ .map-tracked-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .map-tracked-missing { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-mute); color: var(--text-muted); font-size: .82rem; font-weight: 600; font-style: italic; } /* Whether the route/GPS trail actually got recorded for this session — muted until it did (is-ok), since "tracking wasn't fully active" is the common case worth naming rather than hiding. */ .map-tracked-recordings { display: flex; flex-direction: column; gap: 8px; } .map-tracked-recording { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--bg-mute); color: var(--text-muted); font-size: .8rem; font-weight: 600; } .map-tracked-recording svg { flex-shrink: 0; margin-top: 1px; } .map-tracked-recording.is-ok { background: rgba(30,158,90,.12); color: var(--success); } .map-tracked-empty { margin: 0; padding: 14px 12px; text-align: center; border-radius: var(--radius-md); background: var(--bg-mute); color: var(--text-muted); font-size: .82rem; font-weight: 600; font-style: italic; } /* Reuses .map-waypoint-item's own slot (where a regular drive panel shows elevation) for how a tracked stop was actually resolved, instead of elevation, which this data doesn't carry. */ .map-waypoint-tracked-status { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--text-muted); } .map-waypoint-tracked-status svg { width: 13px; height: 13px; flex-shrink: 0; } .map-waypoint-tracked-status.is-done { color: var(--success); } .map-waypoint-tracked-status.is-skipped { color: var(--text-muted); } .map-waypoint-tracked-status.is-pending { color: var(--primary); } /* Collapsible Saved / Created sections in My Drives */ .map-accordion { display: flex; flex-direction: column; } .map-accordion + .map-accordion { margin-top: 6px; } .map-accordion > summary { display: flex; align-items: center; gap: 8px; padding: 8px 4px 10px; cursor: pointer; list-style: none; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); user-select: none; } .map-accordion > summary::-webkit-details-marker { display: none; } .map-accordion > summary:hover { color: var(--text); } .map-accordion-title { flex: 0 1 auto; } .map-accordion-chevron { width: 16px; height: 16px; margin-left: auto; transition: transform .15s ease; } .map-accordion:not([open]) .map-accordion-chevron { transform: rotate(-90deg); } .map-accordion-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; } /* Favorite / completed icons on a drive row (signed-in only). Clicking one opens .drive-flag-pop (app.js) instead of following the row's link. */ .drive-flags { display: inline-flex; gap: 2px; margin-left: auto; margin-right: -6px; } .drive-flag { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } /* On/off state is keyed to [data-drive-flag] (not .drive-flag) so the drive panel's own bigger icon buttons share it. */ .drive-flag:hover, .drive-flag[aria-expanded="true"] { background: var(--bg-mute); color: var(--text); } [data-drive-flag] svg { fill: none; transition: fill .15s ease; pointer-events: none; } [data-drive-flag="favor"].is-on { color: var(--danger); } [data-drive-flag="favor"].is-on svg { fill: currentColor; } [data-drive-flag="completed"].is-on { color: var(--success); } [data-drive-flag="completed"].is-on svg circle { fill: currentColor; } [data-drive-flag="completed"].is-on svg polyline { stroke: #fff; } [data-drive-flag].is-pop { animation: drive-flag-pop .35s ease; } @keyframes drive-flag-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .drive-flag-pop { position: fixed; z-index: 2000; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; animation: drive-flag-pop-in .14s ease-out; } .drive-flag-pop::before { content: ''; position: absolute; top: -6px; left: var(--arrow-x, 50%); width: 10px; height: 10px; margin-left: -5px; background: var(--card-bg); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .drive-flag-pop.is-above::before { top: auto; bottom: -6px; transform: rotate(225deg); } .drive-flag-pop button, .drive-flag-pop-msg { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap; } .drive-flag-pop button { cursor: pointer; } .drive-flag-pop button:hover:not(:disabled), .drive-flag-pop button:focus-visible { background: var(--bg-mute); outline: none; } .drive-flag-pop button:disabled { opacity: .6; cursor: default; } .drive-flag-pop svg { flex-shrink: 0; fill: none; } .drive-flag-pop [data-kind="favor"] svg { color: var(--danger); } .drive-flag-pop [data-kind="favor"].is-remove svg, .drive-flag-pop-msg[data-kind="favor"] svg { fill: currentColor; } .drive-flag-pop [data-kind="completed"] svg, .drive-flag-pop-msg[data-kind="completed"] svg { color: var(--success); } .drive-flag-pop-msg.is-error { color: var(--danger); } @keyframes drive-flag-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [data-drive-flag].is-pop, .drive-flag-pop { animation: none; } } /* Save to My Drives: quota/confirm popup extras and the in-panel progress card (app.js) */ .drive-flag-pop-wide { max-width: min(300px, calc(100vw - 16px)); } .drive-flag-pop-wide .drive-flag-pop-msg { white-space: normal; align-items: flex-start; line-height: 1.4; font-weight: 500; } .drive-flag-pop-hint { padding: 0 14px 8px; font-size: .78rem; color: var(--text-muted); } .drive-flag-pop-link { display: block; padding: 4px 14px 10px; font-size: .85rem; font-weight: 700; color: var(--accent); } .map-copy-progress { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .map-copy-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .95rem; } .map-copy-progress-head span { font-size: .8rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .map-copy-bar { height: 8px; border-radius: 999px; background: var(--bg-mute); overflow: hidden; } .map-copy-bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 250ms ease-out; } .map-copy-progress.is-done .map-copy-bar-fill { background: var(--success); } .map-copy-progress.is-error .map-copy-bar-fill { background: var(--danger); } .map-copy-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--text-muted); } .map-copy-steps li { display: flex; align-items: center; gap: 8px; } .map-copy-steps li::before { content: ''; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; } .map-copy-steps li.is-active { color: var(--text); font-weight: 600; } .map-copy-steps li.is-active::before { border-color: var(--accent); border-top-color: transparent; animation: map-copy-spin .8s linear infinite; } .map-copy-steps li.is-done { color: var(--text); } .map-copy-steps li.is-done::before { border-color: var(--success); background: var(--success); } .map-copy-steps li.is-error { color: var(--danger); font-weight: 600; } .map-copy-steps li.is-error::before { border-color: var(--danger); background: var(--danger); } .map-copy-result { display: flex; flex-direction: column; gap: 8px; } .map-copy-result[hidden] { display: none; } .map-copy-result p { margin: 0; font-size: .85rem; line-height: 1.4; } .map-copy-result p a { color: var(--accent); font-weight: 700; text-decoration: underline; } .map-drive-panel.is-copying > :not(.map-copy-progress) { opacity: .45; pointer-events: none; } @keyframes map-copy-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .map-copy-steps li.is-active::before { animation: none; } .map-copy-bar-fill { transition: none !important; } } .country-pill { align-self: flex-start; background: rgba(2,98,112,.12); color: var(--accent); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } /* Drive panel (a drive selected from the list/a marker) */ .map-drive-panel { padding: 4px 18px 24px; display: flex; flex-direction: column; gap: 14px; } .map-drive-panel-thumb { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-mute); } .map-drive-panel-thumb img { width: 100%; height: 100%; object-fit: cover; } .map-drive-panel h2 { margin: 0; font-size: 1.25rem; } .map-drive-panel-route { margin: 0; font-size: .88rem; color: var(--text-muted); } .map-drive-panel-stats { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .map-drive-panel-stats div { display: flex; flex-direction: column; gap: 2px; text-align: center; flex: 1; } .map-drive-panel-stats strong { font-size: 1rem; } .map-drive-panel-stats span { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .map-drive-panel-actions { display: flex; align-items: center; gap: 10px; } .map-drive-panel-actions form { flex: 1; } .map-drive-panel-actions form.map-drive-panel-icon-form { flex: 0 0 auto; } .map-drive-panel-actions .btn-icon[data-drive-flag="favor"].is-on { border-color: var(--danger); } .map-drive-panel-actions .btn-icon[data-drive-flag="completed"].is-on { border-color: var(--success); } .map-drive-panel-actions .btn-icon[aria-expanded="true"] { border-color: var(--primary); } .map-drive-panel-subhead { margin: 6px 0 0; font-size: 1rem; } /* Preview button's Google/Apple Maps choice — same open/close mechanics as .user-dropdown (nav.php + app.js's [data-user-menu-btn] wiring), just triggered by explore-map.js's own delegated click handler instead, since this markup gets replaced wholesale on every AJAX drive-panel swap. */ .map-preview-menu { position: relative; } .map-preview-dropdown { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow-y: auto; max-height: 50vh; z-index: 5; } .map-preview-dropdown.open { display: block; } .map-preview-dropdown a { display: block; padding: 10px 14px; font-size: .88rem; font-weight: 600; color: var(--text); } .map-preview-dropdown a:hover { background: var(--bg-mute); color: var(--primary); } /* Apple Maps only takes 12 points a route, so a long drive is one link per leg: the heading reads exactly like the Google Maps row, the legs sit under it smaller. */ .map-preview-dropdown-label { padding: 10px 14px 4px; font-size: .88rem; font-weight: 600; color: var(--text); } .map-preview-dropdown a.map-preview-leg { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 14px 6px 22px; font-size: .78rem; font-weight: 500; } .map-preview-leg span { font-size: .7rem; color: var(--text-muted); } .map-waypoint-list { display: flex; flex-direction: column; } .map-waypoint-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--bg-mute); transition: background-color .15s ease, box-shadow .15s ease; cursor: pointer; } /* Synced both ways with the matching numbered stop marker on the map — see setWaypointHighlighted() in explore-map.js (mirrors .map-drive-row's own is-map-hover for the region-level drive list/marker pairing). Outline only — the background stays put so the card doesn't also change color. */ /* Two cards with no connector between them (a drive with no stored leg data) still get breathing room. */ .map-waypoint-item + .map-waypoint-item { margin-top: 10px; } .map-waypoint-item.is-map-hover { box-shadow: 0 0 0 2px var(--primary); } .map-waypoint-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: #ffd60a; color: #1c1f24; border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px var(--border); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; } /* flex-start, not center: the badge lines up with the name (.map-waypoint- main's first line), not the vertical center of the whole card — which would drift once the location text wraps to more than one line. */ .map-waypoint-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .map-waypoint-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .map-waypoint-main strong { font-size: .86rem; } .map-waypoint-main span { font-size: .76rem; color: var(--text-muted); } /* The "X min/hours/days later" note between two recorded stops (see map-tracked-panel.php) — sits in the same gutter as the numbered dots, like a timeline connector. */ .map-waypoint-gap { display: flex; align-items: center; gap: 5px; margin: 2px 0 2px 52px; font-size: .72rem; font-weight: 600; color: var(--text-muted); } .map-waypoint-gap svg { flex-shrink: 0; opacity: .8; } .map-waypoint-elevation { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--text-muted); } .map-waypoint-elevation svg { width: 13px; height: 13px; flex-shrink: 0; } /* The connecting line between two stops — a dashed border stands in for the iOS app's stacked-rectangle trick (SwiftUI has no native dashed-line primitive), lined up under the 28px badge's center (14px = half its width plus the item's own 12px padding). */ .map-waypoint-connector { display: flex; align-items: center; gap: 16px; margin-left: 26px; padding: 10px 0 10px 20px; border-left: 2px dashed var(--border); font-size: .78rem; font-weight: 600; color: var(--text-muted); } .map-waypoint-connector span { display: flex; align-items: center; gap: 5px; } .map-waypoint-connector svg { width: 13px; height: 13px; flex-shrink: 0; } /* Guide: fills the map area completely (Map view only — this markup/JS never renders anywhere else), absolutely positioned within .map-shell-map (which is position: relative) rather than fixed to the viewport, so the sidebar's own drive panel (distance/ duration/stops, already covered there) stays visible alongside it. Flush with the map area's edges on every side — no padding/max-width leaving a visible margin of map around it. */ .map-guide-backdrop { position: absolute; inset: 0; z-index: 500; animation: map-guide-fade .15s ease; } @keyframes map-guide-fade { from { opacity: 0; } to { opacity: 1; } } .map-guide-modal { background: var(--card-bg); width: 100%; height: 100%; overflow-y: auto; display: flex; flex-direction: column; } /* Sticky so the drive's name stays in view while .map-guide-prose scrolls underneath it — needs its own opaque background (the modal's own scroll container has none set directly) so scrolled-past content doesn't show through, and a border to separate it now that it no longer just floats in the modal's top gap. */ .map-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; position: sticky; top: 0; z-index: 1; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 20px 38px; } .map-guide-kicker { font-size: 1rem; font-weight: 700; letter-spacing: .06em; color: var(--primary); text-transform: uppercase; } .map-guide-close { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--text-muted); } .map-guide-close:hover { color: var(--text); border-color: var(--primary); } .map-guide-title { margin: 0 0 6px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); } .map-guide-body { flex: 1; padding: 28px 38px 40px; } /* Centered, not just left-aligned in the now full-width modal — a single column with even margins either side reads as a deliberate layout, unlike leaving all the leftover width as a lopsided blank strip. Same 1600px column (and 38px gutters) as the About / Terms / Privacy overlay (.map-page-body), so every overlay's content lines up on the same left and right edges. */ .map-guide-main { max-width: 1600px; margin: 0 auto; } /* .prose (global) centers itself at 780px; here it must fill the column so it lines up with the title. */ .map-guide-prose { font-size: .95rem; line-height: 1.7; max-width: none; margin: 0; } .map-guide-prose :is(h1, h2, h3) { font-size: 1.05rem; margin-top: 1.3em; } /* Guide write-ups link out to park pages, official road-condition sites, etc. — the global a{color:inherit} (style.css:90) leaves those looking like plain text, so call them out explicitly here. */ .map-guide-prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .map-guide-prose a:hover { color: var(--primary-hover); } @media (max-width: 620px) { .map-guide-head { padding: 16px 18px; } .map-guide-body { padding: 20px 18px 32px; } } /* About / Terms / Privacy overlay (map-page-panel.php): the Guide's shell around a standalone page's own markup, so that page's full-page section spacing and hero are tightened to fit a map-area panel. */ .map-page-body { flex: 1; } .map-page-body section { padding: 36px 38px; } .map-page-body .container { max-width: 1600px; padding: 0; } .map-page-body .hero { padding: 44px 38px 36px; } .map-page-body .hero p.lead { margin-bottom: 8px; } /* Terms / Privacy fill the same column as the rest; About's centered Mission text keeps its narrow measure. */ .map-page-body .container:not(.text-center) > .prose { max-width: none; } .map-page-body .section-head { margin-bottom: 28px; } .map-page-body :is(.grid-3, .grid-4) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .map-page-body .prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Log In / Register overlay: the standalone auth page's own .auth-shell assumes a full viewport row below the navbar (min-height, its own var(--bg-soft) backdrop) — here it's already boxed by the modal, so drop both and let the card sit in the panel's normal padding instead. */ .map-page-body .auth-shell { min-height: auto; padding: 36px 38px 44px; background: none; } @media (max-width: 620px) { .map-page-body section { padding: 28px 18px; } .map-page-body .hero { padding: 32px 18px 28px; } .map-page-body .auth-shell { padding: 24px 18px 32px; } } /* The footer's bottom bar closing both overlays. Sits at the very bottom of the map area, level with the sidebar's About/Terms/Privacy strip (.map-sidebar-links) and styled the same — one shared height — so the two read as a single bar. */ .map-overlay-footer { flex-shrink: 0; min-height: var(--map-footer-h); box-sizing: border-box; padding: 0 18px; border-top: 1px solid var(--border); background: var(--card-bg); font-size: .88rem; font-weight: 600; color: var(--text-muted); } /* My Drives sections (Drives / Tracked / Completed / Favorites): full-text tabs with an underline on the active one. Shares the row evenly; scrolls sideways rather than wrapping if a narrow screen and long counts ever run out of room. */ .map-subtabs { display: flex; margin: 16px 18px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .map-subtabs::-webkit-scrollbar { display: none; } .map-subtab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 4px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .84rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .map-subtab:hover { color: var(--text); } .map-subtab.active { color: var(--primary); border-bottom-color: var(--primary); } /* The current tab's count on the page: e.g. "4/5 drives used · 1 remaining" on Drives, with the create button on the right. */ .map-drives-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 12px; } .map-drives-summary { font-size: .84rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .map-drives-summary strong { font-weight: inherit; color: inherit; } .map-drives-summary.is-full { color: var(--danger); } .map-drives-bar .btn { margin-left: auto; } .map-drives-bar .btn.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } /* Profile cards inside the Map view sidebar */ .map-settings-cards { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 24px; } .map-settings-card h3 { margin-top: 0; font-size: 1rem; } .map-settings-label { font-weight: 600; font-size: .82rem; display: block; margin-bottom: 8px; } .map-profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .map-profile-stats .muted { font-size: .8rem; } .map-settings-choices { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 18px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .btn-link { background: none; border: none; padding: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary); cursor: pointer; } .btn-link:hover { text-decoration: underline; } /* Profile tab cards */ .profile-card { padding: 18px; } .profile-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .profile-card-head h3 { margin: 0; font-size: 1rem; } .profile-hero { display: flex; align-items: center; gap: 16px; } .profile-avatar { position: relative; display: block; flex-shrink: 0; cursor: pointer; border-radius: 999px; } .profile-avatar .user-avatar { width: 76px; height: 76px; font-size: 1.7rem; } .profile-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--text); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); transition: background .15s, color .15s; } .profile-avatar-edit svg { width: 14px; height: 14px; } .profile-avatar:hover .profile-avatar-edit { background: var(--primary); color: #fff; border-color: var(--primary); } .profile-avatar:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; } .profile-hero-body { min-width: 0; } .profile-hero-name { font-weight: 700; font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere; } .profile-hero-email { font-size: .84rem; color: var(--text-muted); overflow-wrap: anywhere; margin-bottom: 8px; } .profile-badges { display: flex; flex-wrap: wrap; gap: 6px; } .profile-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--bg-mute); color: var(--text-muted); border: none; font-family: inherit; } .profile-badge.is-ok { background: #e7f7ee; color: #14532d; } .profile-badge.is-warn { background: #fff6e5; color: #7a4b00; cursor: pointer; } .profile-badge.is-warn:hover { background: #ffe9c2; } [data-theme="dark"] .profile-badge.is-ok { background: #123222; color: #7be3a6; } [data-theme="dark"] .profile-badge.is-warn { background: #3a2a05; color: #ffcf7a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .profile-badge.is-ok { background: #123222; color: #7be3a6; } :root:not([data-theme="light"]) .profile-badge.is-warn { background: #3a2a05; color: #ffcf7a; } } .profile-remove-photo { margin-top: 10px; } .profile-name-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .profile-name-form .field { margin-bottom: 0; } .profile-name-row { display: flex; gap: 8px; } .profile-name-row input { flex: 1; min-width: 0; } .profile-name-row .btn { flex-shrink: 0; padding-left: 18px; padding-right: 18px; } /* Preferences: label + toggle rows that save on click */ .pref-status { font-size: .78rem; font-weight: 600; color: var(--success); opacity: 0; transition: opacity .2s; margin-left: auto; } .pref-status.is-shown { opacity: 1; } .pref-status.is-error { color: var(--danger); } .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-weight: 600; font-size: .9rem; } .pref-row:first-of-type { margin-top: 8px; } .pref-row.is-stacked { flex-wrap: wrap; } .pref-row.is-stacked small { flex-basis: 100%; font-weight: 400; font-size: .78rem; color: var(--text-muted); } .pref-row .unit-toggle button { padding: 6px 14px; font-size: .82rem; } .unit-toggle.is-wide { display: flex; flex-basis: 100%; } .unit-toggle.is-wide button { flex: 1; padding-left: 4px; padding-right: 4px; } /* Activity tiles */ .profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; } .profile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); text-align: center; } .profile-stat strong { font-size: 1.35rem; line-height: 1.1; color: var(--primary); } .profile-stat span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } a.profile-stat:hover { border-color: var(--primary); } /* Route credits card */ .credits-plan { margin-left: auto; } .credits-balance { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; } .credits-balance strong { font-size: 2rem; line-height: 1; color: var(--primary); } .credits-balance span { font-size: .88rem; color: var(--text-muted); } .credits-balance.is-out strong { color: var(--danger); } .credits-out { margin: 0 0 14px; padding: 10px 12px; font-size: .84rem; } .credits-facts { margin: 0 0 12px; padding: 0; } .credits-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .88rem; } .credits-facts dt { font-weight: 600; } .credits-facts dt small { font-weight: 400; color: var(--text-muted); } .credits-facts dd { margin: 0; text-align: right; white-space: nowrap; } /* Collapsible sections (password, delete account) */ .profile-fold { padding: 0; } .profile-fold > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; } .profile-fold > summary::-webkit-details-marker { display: none; } .profile-fold > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; flex-shrink: 0; } .profile-fold[open] > summary::after { transform: rotate(-135deg); } .profile-fold > summary > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); } .profile-fold > summary span { display: flex; flex-direction: column; min-width: 0; } .profile-fold > summary strong { font-size: .92rem; } .profile-fold > summary small { font-size: .78rem; color: var(--text-muted); } .profile-fold > :not(summary) { margin-left: 18px; margin-right: 18px; } .profile-fold[open] > summary { padding-bottom: 8px; } .profile-fold[open] > :last-child { margin-bottom: 18px; } .profile-fold .muted { font-size: .84rem; margin-top: 0; margin-bottom: 14px; } .map-shell-map { flex: 1; min-width: 0; position: relative; } .map-shell-canvas { position: absolute; inset: 0; } .map-canvas-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-mute); } .map-infowindow { display: flex; gap: 10px; align-items: center; max-width: 220px; } .map-infowindow img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .map-infowindow-body { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; } .map-infowindow-body a { color: var(--primary); font-weight: 600; font-size: .8rem; } /* ------------------------------------------------------------------ Mobile Map view: the map stays full-bleed edge-to-edge (Explore) or disappears in favor of a full-width list (My Drives/Profile) — either way the old 50/50 split-screen is gone. The persistent tab row becomes a bottom tab bar (matches the redesign's mobile nav); on Explore the region/ drive/detail content becomes a floating bottom sheet over the map instead of pushing it down, so the map keeps almost the whole screen. The sheet has three explicit heights — data-sheet="min|half|full" (see setupMobileSheet in explore-map_24796.js), which also measures the navbar/tab bar's real heights into --map-navbar-h/--map-tabbar-h below (the values here are just the fallback for the instant before that JS runs) — never toggled by what's currently inside it, only by the visitor dragging or tapping the handle. Harmless on desktop since this whole block is mobile-only. */ @media (max-width: 860px) { .map-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; border-bottom: none; border-top: 1px solid var(--border); /* Solid, not the translucent + backdrop-filter treatment the desktop navbar uses: a blurred backdrop compositing live over the Google Map's own canvas is a known trigger for a solid-black render (and, worse, a block on touch input reaching the map under it) on some Android/ WebView browsers — not worth it for a bar that's opaque-looking anyway. */ background: var(--nav-bg); padding-bottom: env(safe-area-inset-bottom); } .map-tab { padding: 10px 6px 8px; } /* About/Terms/Privacy/Contact live in the navbar hamburger on mobile. */ .map-sidebar-links { display: none; } .map-tab span { font-size: .72rem; } .map-sheet-handle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0; background: var(--card-bg); border: none; cursor: grab; position: sticky; top: 0; z-index: 1; touch-action: none; } .map-sheet-handle:active { cursor: grabbing; } /* One element for both the drag grip and the state cue — a plain line at half (.is-line), an up/down chevron (see explore-map_24796.js) at min/full — instead of a grip bar plus a separate icon row under it. */ .map-sheet-handle-indicator { display: flex; align-items: center; justify-content: center; color: var(--border); } .map-sheet-handle-indicator.is-line { width: 36px; height: 4px; border-radius: 999px; background: var(--border); } .map-sheet-handle-indicator svg { display: block; } /* Explore: map fills the whole shell; the sidebar becomes a rounded sheet floating over it, pinned above the bottom tab bar. */ .map-view-explore .map-shell { position: relative; height: 100%; display: block; } .map-view-explore .map-shell-map { position: absolute; inset: 0; height: auto; } .map-view-explore .map-shell-sidebar { position: fixed; left: 0; right: 0; bottom: var(--map-tabbar-h, 64px); z-index: 80; width: auto; max-height: 45vh; overflow-y: auto; border-right: none; border-top: none; background: var(--card-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); transition: max-height .2s ease; } .map-view-explore .map-shell-sidebar[data-sheet="min"] { max-height: 64px; } .map-view-explore .map-shell-sidebar[data-sheet="half"] { max-height: 45vh; } /* Stops right below the navbar (measured, see --map-sheet-full-h above) with a small gap — never creeps under it the way a fixed pixel guess, or plain 100vh (too tall on iOS Safari whenever its address bar is showing — the classic 100vh-vs-visible-viewport mismatch), both could. The dvh fallback only matters for the instant before that JS runs. */ .map-view-explore .map-shell-sidebar[data-sheet="full"] { max-height: var(--map-sheet-full-h, calc(100dvh - var(--map-navbar-h, 60px) - var(--map-tabbar-h, 64px) - 10px)); } /* The canvas's own box shrinks to stop exactly where the sheet begins, rather than running the full screen height behind it — Google draws its logo/attribution/zoom controls against this box's own corners, so this is what actually keeps them visible above the sheet instead of hidden underneath it (a plain overlay never moves where Google renders them; see syncMapToSheetSize() in explore-map_24796.js, which re-triggers Maps after this changes). Sibling selector: .map-shell-sidebar comes right before .map-shell-map in the markup (see home-map.php). Min/half only — full leaves barely a sliver of map showing anyway, not worth resizing/re-centering it for (see applyState() skipping that there too). */ .map-view-explore .map-shell-canvas { transition: bottom .2s ease; } .map-view-explore .map-shell-sidebar[data-sheet="min"] ~ .map-shell-map .map-shell-canvas { bottom: calc(64px + var(--map-tabbar-h, 64px)); } .map-view-explore .map-shell-sidebar[data-sheet="half"] ~ .map-shell-map .map-shell-canvas { bottom: calc(45vh + var(--map-tabbar-h, 64px)); } /* Profile: no map — the cards get the full screen, the shell just scrolls like a normal page, with the tab bar pinned below. */ .map-view-list .map-shell { display: block; height: auto; } .map-view-list .map-shell-map { display: none; } .map-view-list .map-shell-sidebar { position: static; width: 100%; max-height: none; height: auto; border-right: none; overflow: visible; padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } /* ============================================================ My Drives edit mode (drive-edit.js) — help overlay steps use the Guide's modal ============================================================ */ .map-drive-panel [data-edit-banner]:empty { display: none; } .map-edit-banner { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; font-size: .85rem; font-weight: 600; border: 1px solid var(--primary); border-radius: var(--radius-md); background: rgba(233,141,0,.1); } .map-edit-banner-actions { display: flex; gap: 8px; } .map-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; } .map-edit-pill { padding: 4px 11px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .map-edit-help-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; } .map-edit-help-btn:hover { color: var(--accent); border-color: var(--accent); } /* Photo / name / start / end */ .map-edit-details { display: flex; flex-direction: column; gap: 12px; } .map-edit-photo { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-mute); } .map-edit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .map-edit-photo-btn { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; } .map-edit-photo-btn:hover { background: rgba(0,0,0,.8); } .map-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .map-edit-field > span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); } .map-edit-field input { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font: inherit; font-size: .9rem; } .map-edit-field input:focus { outline: none; border-color: var(--accent); } .map-edit-field-row { display: flex; gap: 10px; } .map-edit-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .map-edit-subhead .btn { padding: 6px 11px; gap: 6px; } .map-edit-toolbar { display: flex; gap: 8px; flex-wrap: wrap; } .map-edit-toolbar .btn { padding: 7px 12px; gap: 6px; } .map-edit-status { padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bg-mute); color: var(--text-muted); font-size: .82rem; font-weight: 600; } .map-edit-status.is-ok { background: rgba(30,158,90,.12); color: var(--success); } .map-edit-status.is-warn { background: rgba(233,141,0,.14); color: var(--primary-hover); } .map-edit-status.is-error { background: rgba(220,53,69,.12); color: var(--danger); } .map-edit-status.is-busy { color: var(--accent); } .map-edit-empty { margin: 0; padding: 18px 12px; text-align: center; font-size: .85rem; color: var(--text-muted); background: var(--bg-mute); border-radius: var(--radius-md); } .map-edit-item { align-items: center; gap: 8px; padding: 10px 8px; cursor: default; position: relative; } .map-edit-item.is-dragging { opacity: .45; } .map-edit-item.is-drop-before::before, .map-edit-item.is-drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--accent); } .map-edit-item.is-drop-before::before { top: -7px; } .map-edit-item.is-drop-after::after { bottom: -7px; } .map-edit-grip { flex-shrink: 0; display: flex; align-items: center; color: var(--text-muted); cursor: grab; touch-action: none; } .map-edit-grip:active { cursor: grabbing; } .map-edit-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .map-edit-name { width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: .86rem; font-weight: 600; } .map-edit-name:hover { border-color: var(--border); } .map-edit-name:focus { outline: none; border-color: var(--accent); background: var(--card-bg); } .map-edit-loc { padding: 0 8px; font-size: .74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-edit-item-actions { display: flex; flex-shrink: 0; } .map-edit-icon-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; } .map-edit-icon-btn:hover:not(:disabled) { background: var(--card-bg); color: var(--text); } .map-edit-icon-btn.is-danger:hover:not(:disabled) { color: var(--danger); } .map-edit-icon-btn:disabled { opacity: .3; cursor: not-allowed; } /* Save / Discard stay reachable however long the waypoint list gets. */ .map-edit-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 12px 0; background: var(--card-bg); border-top: 1px solid var(--border); } .map-edit-savebar .btn-primary { flex: 1; } .map-edit-delete { width: 100%; } .map-edit-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; max-width: min(92vw, 480px); padding: 11px 18px; border-radius: var(--radius-sm); background: var(--accent-hover); color: #fff; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-md); } .map-edit-toast.is-error { background: var(--danger); } @media (max-width: 860px) { .map-edit-toast { bottom: calc(var(--map-tabbar-h, 64px) + 16px); } } /* above the bottom tab bar */ /* Help overlay */ .map-help-lead { margin: 0 0 24px; font-size: 1rem; } .map-help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .map-help-step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); } .map-help-step h3 { margin: 0 0 6px; font-size: 1.02rem; } .map-help-step p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-muted); } .map-help-step p strong { color: var(--text); } .map-help-step-icon { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .map-help-step-icon svg { width: 22px; height: 22px; } .map-help-step-num { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border: 2px solid var(--card-bg); font-size: .72rem; font-weight: 700; } .map-help-tips { margin-top: 28px; padding: 18px 22px; border-radius: var(--radius-md); background: rgba(233,141,0,.1); border: 1px solid rgba(233,141,0,.35); } .map-help-tips h3 { margin: 0 0 8px; font-size: 1rem; } .map-help-tips ul { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.7; } /* Place search (Google Places autocomplete) */ .map-edit-search { position: relative; } .map-edit-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .map-edit-search-input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font: inherit; font-size: .9rem; } .map-edit-search-input:focus { outline: none; border-color: var(--accent); } /* Google's suggestion dropdown lives on ; keep it above the sheet, tab bar and help overlay. */ .pac-container { z-index: 3000; } /* On the map itself while editing (only ever visible where the map is). */ .map-edit-maphint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 400; pointer-events: none; max-width: calc(100% - 120px); padding: 9px 16px; border-radius: 999px; text-align: center; background: rgba(1,73,82,.94); color: #fff; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-md); } @media (max-width: 860px) { .map-edit-maphint { display: none; } } /* phones: the tip would cover too much of the small map */ /* iOS Safari zooms the whole page when a field under 16px gets focus, which leaves the fixed bottom sheet half off screen — so on phones every edit-mode field is 16px. */ @media (max-width: 860px) { .map-edit-name, .map-edit-field input, .map-edit-search-input { font-size: 16px; } }