:root { color-scheme: light; --ink:#23233A; --muted:#4B4F5C; --faint:#6B6F7B; --bg:#FFFFFF; --line:#E4DED2; --ground:#EAE4D7; --cream:#F2EDE2; --accent:#3B63F3; --accent-tint:#EEF2FE; } * { box-sizing: border-box; } body { margin:0; background:var(--bg); color:var(--ink); font: 16px/1.55 var(--font-sans), system-ui, sans-serif; } main { max-width: 720px; margin: 0 auto; padding: 48px 24px 96px; } h1, h2 { font-family: var(--font-display), system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } a { color: var(--ink); } .muted { color: var(--muted); } .cta { display:inline-block; background:var(--accent); color:#fff; padding:14px 20px; border-radius:14px; text-decoration:none; font-weight:700; } footer { margin-top:64px; font-size:14px; } footer a { margin-right:16px; } .hero { width:100%; max-height:420px; object-fit:cover; border-radius:16px; margin:12px 0; } .verdict { font-family: var(--font-display), system-ui, sans-serif; font-weight: 700; font-size:20px; margin:8px 0; } .pill { display:inline-block; font-size:13px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid #C9CBD3; margin-right:6px; } .pill.good { color:#17803D; border-color:#17803D; } .pill.warn { color:#8A4B14; border-color:#F5A524; } .pill.bad { color:#B42318; border-color:#B42318; } .minimap { display:block; width:100%; height:220px; border-radius:16px; overflow:hidden; background:var(--accent-tint); margin:16px 0; } /* The whole static image, scaled, never cropped: Mapbox's logo and attribution sit in its corners. */ img.minimap { height:auto; aspect-ratio:640 / 220; } .minimap-plain { position:relative; } .minipin { position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); } .actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .banner { background:var(--accent-tint); padding:16px; border-radius:14px; } .board { padding-left:20px; } .board li { margin:10px 0; display:grid; gap:4px; } .bar { display:block; height:4px; background:var(--line); border-radius:2px; } .bar span { display:block; height:4px; background:var(--accent); border-radius:2px; } .quest { border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:24px; } /* full-screen map */ .mapwrap { position:fixed; inset:0; z-index:1; } .mapcanvas { position:absolute; inset:0; background:#fff; } /* Guests: a white strip across the top saying so. */ .guestbanner { position:absolute; top:0; left:0; right:0; z-index:3; margin:0; padding:8px 16px; text-align:center; background:#fff; color:var(--ink); font: 600 14px var(--font-sans), system-ui, sans-serif; border-bottom:1px solid var(--accent-tint); box-shadow:0 2px 8px rgba(35,35,58,.06); } /* Top bar: search (with its icon) on the left; step-free, Log in / Get started and Menu on the right, level with it. Notices span the row underneath. Narrow screens: the buttons wrap under the search. */ .mapbar { position:absolute; z-index:3; top:16px; left:calc(16px + env(safe-area-inset-left)); right:calc(16px + env(safe-area-inset-right)); display:grid; grid-template-columns:minmax(0, 440px) 1fr; align-items:start; gap:8px 12px; } .mapbar.below-banner { top:54px; } .mapbar .notice { grid-column:1 / -1; justify-self:start; max-width:440px; } .searchcol { display:grid; gap:0; min-width:0; } .search { position:relative; display:block; } .searchcol { position:relative; } .searchclear { position:absolute; right:10px; top:13px; width:28px; height:28px; border:0; border-radius:14px; background:var(--cream); color:var(--ink); display:grid; place-items:center; cursor:pointer; } .searchclear:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .searchicon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--accent); pointer-events:none; } .mapbar input { width:100%; box-sizing:border-box; font: 16px var(--font-sans), system-ui, sans-serif; color:var(--ink); padding:14px 44px 14px 42px; border-radius:14px; border:1px solid var(--accent-tint); background:#fff; box-shadow:0 4px 16px rgba(35,35,58,.10); } .mapbar input:focus { outline:2px solid var(--accent); outline-offset:1px; } @media (max-width: 640px) { .mapbar { grid-template-columns:1fr; } .mapbar .chips { justify-content:flex-start; } } .results { list-style:none; margin:0; padding:4px 0; background:#fff; border-radius:0 0 14px 14px; border-top:1px solid var(--line); box-shadow:0 8px 16px rgba(35,35,58,.10); max-height:min(420px, 60dvh); overflow:auto; } .searchcol:has(.results) .search input { border-radius:14px 14px 0 0; } .results button { all:unset; display:block; width:100%; box-sizing:border-box; padding:10px 16px; cursor:pointer; } .results button:hover, .results button:focus-visible { background:var(--accent-tint); } /* A search result's entrance: the verdict in its colour, or "Not checked yet". */ .entrancetab { display:inline-block; justify-self:start; margin-top:4px; padding:2px 10px; border-radius:999px; font: 600 12px var(--font-sans), system-ui, sans-serif; border:1px solid; } .entrancetags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .entrancetags .entrancetab { margin-top:0; } .entrancetab.good { color:#17803D; background:#EAF6EE; border-color:#BFE3CB; } .entrancetab.warn { color:#8A4B14; background:#FEF2DC; border-color:#F5D9A0; } /* "Not step-free": orange, the same as its pin's ring (lib/wave-icons.ts ENTRANCE_RING.bad) and the Map key. */ .entrancetab.bad { color:#9A4A06; background:#FDEBDD; border-color:#F5C9A3; } .entrancetab.none, .entrancetab.neutral { color:var(--muted); background:#F5F6F8; border-color:#E2E4EA; } /* The map's top bar, in the phone's colours (apps/mobile/src/theme.ts): white, navy ink, Wave blue. */ .chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; min-height:50px; } .chip { font: 600 14px var(--font-sans), system-ui, sans-serif; padding:8px 14px; border-radius:999px; border:1px solid var(--accent-tint); background:#fff; color:var(--ink); cursor:pointer; box-shadow:0 2px 8px rgba(35,35,58,.08); } .chip:hover { border-color:var(--accent); } .chip.on { background:var(--accent); color:#fff; border-color:var(--accent); } .chip:focus-visible, .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .accountcta { display:inline-flex; gap:8px; } .btn { display:inline-flex; align-items:center; justify-content:center; font: 700 15px var(--font-sans), system-ui, sans-serif; padding:12px 18px; border-radius:14px; border:1px solid transparent; cursor:pointer; text-decoration:none; } .btn.small { font-size:14px; padding:8px 14px; border-radius:999px; box-shadow:0 2px 8px rgba(35,35,58,.08); } .btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); } .btn.secondary { background:#fff; color:var(--accent); border-color:var(--accent); } /* Mapbox's controls (bottom right: Show my location over + / −) in the phone's colours: white, navy icon, Wave blue while it's finding you or pressed. The disabled state is location refused in the browser settings. */ .mapwrap .mapboxgl-ctrl-group { border-radius:12px; box-shadow:0 2px 8px rgba(35,35,58,.15); } .mapwrap .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image:url("data:image/svg+xml;charset=utf-8,"); animation:none; } .mapwrap .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:active .mapboxgl-ctrl-icon, .mapwrap .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon, .mapwrap .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon { background-image:url("data:image/svg+xml;charset=utf-8,"); } .mapwrap .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { opacity:.35; } .mapwrap .mapboxgl-ctrl button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .mapwrap .mapboxgl-user-location-dot, .mapwrap .mapboxgl-user-location-dot::before { background-color:var(--accent); } /* "Neighborhoods mapped": a small box beside the map's buttons, bottom right. */ .changemakers { position:absolute; z-index:2; right:10px; bottom:30px; width:220px; background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 4px 16px rgba(35,35,58,.14); } .changemakers h2 { margin:0; font-size:15px; } .changemakers .muted.small { margin:0 0 6px; } .changemakers ol { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:4px; } .changemakers { width:240px; } .changemakers li { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; font-size:13px; } .changemakers .who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .changemakers .pts { color:var(--accent); font-weight:700; } .changemakers .bar { grid-column:1 / -1; margin:0; } .changemakers .count { grid-column:1 / -1; color:var(--faint); font-size:11px; } .changemakers a { color:var(--accent); font-weight:600; text-decoration:none; } /* The card takes the corner; the map's buttons (pen, Show my location, + / −) sit just left of it. */ /* The map's buttons sit --ctrl-right from the edge (beside the box on wide screens); the bigger "+" is centred over them. */ .mapwrap { --ctrl-right:10px; } .mapwrap .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-group { margin-right:var(--ctrl-right); } @media (min-width: 641px) { .mapwrap:has(.changemakers) { --ctrl-right:260px; } } /* Phones and short screens: no room for the box, so it's a "Neighborhoods" pill beside the Map key that opens it. */ .hoodsbtn { display:none; } @media (max-width: 640px), (max-height: 560px) { .hoodsbtn { display:inline-flex; position:absolute; z-index:2; left:122px; bottom:40px; align-items:center; padding:8px 12px; border:0; border-radius:999px; background:#fff; color:var(--ink); font: 700 13px var(--font-sans), system-ui, sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(35,35,58,.18); } .hoodsbtn[aria-expanded="true"] { background:var(--accent); color:#fff; } .hoodsbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .changemakers { display:none; } .hoods.open .changemakers { display:block; z-index:4; left:12px; right:auto; bottom:84px; width:min(300px, calc(100vw - 24px)); max-height:calc(100dvh - 140px); overflow:auto; } .hoods.compacthidden { display:none; } .mapwrap:has(.changemakers) { --ctrl-right:10px; } } /* Map key: bottom left, above the Mapbox logo; its card opens upward. */ .legend { position:absolute; z-index:2; left:12px; bottom:40px; } .legend:has(.legendcard) { z-index:4; } .legendbtn { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:0; border-radius:999px; background:#fff; color:var(--ink); font: 700 13px var(--font-sans), system-ui, sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(35,35,58,.18); } .legendbtn[aria-expanded="true"] { background:var(--accent); color:#fff; } .legendbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .legendcard { position:absolute; left:0; bottom:calc(100% + 8px); width:min(380px, calc(100vw - 24px)); background:#fff; border-radius:18px; padding:12px 14px; box-shadow:0 8px 30px rgba(35,35,58,.2); animation:wave-pop 160ms cubic-bezier(.2,.8,.2,1); transform-origin:bottom left; } .legendcard h2 { margin:0; font-size:17px; } .legendcard h3 { margin:8px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .legendcard ul { list-style:none; margin:0; padding:0; display:grid; gap:5px 10px; } .legendcard li { display:flex; align-items:center; gap:8px; font-size:12.5px; line-height:1.25; } .legendcard li > span:last-child { display:grid; } .legendcard li .muted { font-size:12px; } .legendgrid { grid-template-columns:1fr 1fr; } .legendpin { flex:none; width:26px; height:26px; border-radius:999px 999px 999px 5px; border:2.5px solid; background:#fff; display:grid; place-items:center; } .legendpin img { width:17px; height:17px; } .legendrings { grid-template-columns:1fr 1fr; } .legendring { flex:none; width:14px; height:14px; border-radius:50%; border:3px solid; } .legendcard p { margin:8px 0 0; } /* Short screens (a phone on its side): two columns instead of a scrollbar, so the key still fits. */ @media (max-height: 560px) { .legendcard { width:min(640px, calc(100vw - 24px)); columns:2; column-gap:20px; padding:10px 12px; } .legendcard h2 { column-span:all; } .legendcard ul, .legendcard h3, .legendcard p { break-inside:avoid; } .legendcard h3 { margin-top:6px; } } .legendrings { grid-template-columns:repeat(4, auto) !important; justify-content:start; } /* The pen (post a report), on top of the control stack: Wave blue, the app's Snap button colour. */ /* New post: a big blue "+" above the map's buttons. */ .mapwrap .mapboxgl-ctrl button.wave-post { display:flex; align-items:center; justify-content:center; width:auto; min-width:48px; height:48px; padding:0 11px; background:var(--accent); color:#fff; border-radius:999px; } /* "Post" opens out beside the + on hover or keyboard focus (map and profile). */ .postlabel { display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; font: 700 16px var(--font-sans), system-ui, sans-serif; transition:max-width 180ms ease, opacity 140ms ease, margin 180ms ease; } .wave-post:hover .postlabel, .wave-post:focus-visible .postlabel, .newpost:hover .postlabel, .newpost:focus-visible .postlabel { max-width:60px; opacity:1; margin:0 4px 0 6px; } .mapwrap .mapboxgl-ctrl button.wave-post:hover { background:#2F51D6; } .mapwrap .mapboxgl-ctrl button.wave-post .mapboxgl-ctrl-icon, .mapwrap .mapboxgl-ctrl button.wave-post svg { pointer-events:none; } .mapwrap .mapboxgl-ctrl-group:has(.wave-post) { background:var(--accent); border-radius:999px; box-shadow:0 6px 16px rgba(59,99,243,.35); } /* A posting flow or sheet is open (map-client.tsx): the + steps aside, so it never peeks out from behind a sheet. */ .mapwrap.posting .mapboxgl-ctrl-group:has(.wave-post) { display:none; } /* Phones: an open place card is the bottom sheet, and the + would peek out from behind it. */ @media (max-width: 640px) { .mapwrap:has(.panel.card) .mapboxgl-ctrl-group:has(.wave-post) { display:none; } } .mapwrap .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-group:has(.wave-post) { margin-right:calc(var(--ctrl-right) - 8px); } /* Placing a report: a pin fixed at the map's centre (the map moves under it) and a card with the next step. */ /* The location pointer: its tip on the map's centre (the spot), so the box sits above it. */ .pickpin { position:absolute; left:50%; top:50%; z-index:2; width:34px; height:44px; margin:-44px 0 0 -17px; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(35,35,58,.35)); } .pickpin svg { display:block; } .pickbar { position:absolute; z-index:3; left:50%; bottom:24px; transform:translateX(-50%); width:min(420px, calc(100vw - 32px)); max-height:50dvh; overflow:auto; background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 8px 30px rgba(35,35,58,.2); } .pickbar h2 { margin:0 0 4px; font-size:20px; } .pickbar p { margin:4px 0 10px; } .streetbar { max-height:70dvh; } .streetbar .postreport { display:grid; gap:10px; } .streetbar .postreport > p { margin:0; } /* The photo preview never widens the sheet (a real photo is 1200–4000 px wide): grid children and fieldsets may shrink (a fieldset's default min-inline-size is its content), and the image fits the sheet's width. */ .streetbar .postreport > *, .postreport fieldset { min-width:0; } .streetbar img { display:block; width:100%; max-height:28dvh; object-fit:cover; border-radius:12px; } .postreport img { display:block; max-width:100%; } /* "What are you reporting?" (components/post-chooser.tsx): two big rows, an icon tile, a title and one line. */ .postkinds { display:grid; gap:10px; } .postkind { display:flex; align-items:center; gap:14px; width:100%; min-height:76px; padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); text-align:left; font: inherit; cursor:pointer; transition:background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } .postkind:hover { background:var(--accent-tint); border-color:var(--accent-tint); } .postkind:active { transform:scale(.98); } .postkind:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .postkindicon { flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:16px; } .postkind.street .postkindicon { background:#FFF1E6; color:#C2410C; } .postkind.place .postkindicon { background:var(--accent-tint); color:var(--accent); } .postkindtext { display:grid; gap:2px; } .postkindtext b { font-size:17px; } .postkindtext span { font-size:14px; color:var(--muted); } .postkinds .postkind { animation:wave-slide-up 260ms cubic-bezier(.2,.8,.2,1) both; } .postkinds .postkind + .postkind { animation-delay:50ms; } /* Take photo / Choose from library, side by side (stacked on narrow screens). */ .photochoice { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; } .photochoice .rbtn.dark.withicon svg { color:#fff; } .streetbar .rbtn.dark.withicon svg { color:#fff; } /* "Which place?" (components/place-finder.tsx). */ .finder { max-height:60dvh; } .findersearch { display:flex; align-items:center; gap:8px; margin:8px 0 10px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:var(--muted); } .findersearch:focus-within { border-color:var(--accent); } .findersearch input { flex:1; min-width:0; border:0; outline:0; background:none; padding:12px 0; font: 16px var(--font-sans), system-ui, sans-serif; color:var(--ink); } .pinbar { position:absolute; z-index:4; left:50%; top:84px; transform:translateX(-50%); width:min(420px, calc(100vw - 32px)); background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 8px 30px rgba(35,35,58,.2); } .pinbar p { margin:0 0 8px; font-size:14px; } .dragpin { cursor:grab; filter:drop-shadow(0 3px 6px rgba(35,35,58,.35)); } .dragpin svg { display:block; } .pickbtns { display:flex; gap:8px; justify-content:flex-end; } .picklist { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:4px; } .picklist button { all:unset; box-sizing:border-box; width:100%; display:grid; gap:2px; padding:10px 12px; border-radius:12px; cursor:pointer; } .picklist button:hover, .picklist button:focus-visible { background:var(--accent-tint); } .picklist .muted { font-size:13px; } /* The step-free question (signed in, once). */ /* The account, like Google Maps: a round avatar beside the Menu; its card opens under it. */ .profile { position:relative; } .avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:20px; border:2px solid #fff; background:var(--accent-tint); color:var(--accent); font: 800 17px var(--font-display), system-ui, sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(35,35,58,.15); padding:0; } .avatar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .avatar.big { width:72px; height:72px; border-radius:36px; font-size:30px; box-shadow:none; cursor:default; margin:0 auto 8px; } .profilecard { position:absolute; left:0; top:calc(100% + 8px); z-index:5; width:280px; max-width:var(--pop-max); box-sizing:border-box; background:#fff; border-radius:24px; padding:20px; text-align:center; box-shadow:0 8px 30px rgba(35,35,58,.2); display:grid; gap:4px; } .profilecard .profilename { margin:0; font: 700 18px var(--font-display), system-ui, sans-serif; } .profilecard .muted.small { margin:0 0 12px; } .profilecard .btn { justify-self:center; } .profilecard .signout { justify-self:center; margin-top:8px; color:var(--muted); } /* The Menu and the account card drop from their button, left edges lined up; lib/use-popover.ts slides them left only as far as needed to stay inside the top bar, and --pop-max keeps them narrower than it on a small phone. */ .mapbar { --pop-max:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); } .menu { position:relative; } .menu summary { list-style:none; } .menu summary::-webkit-details-marker { display:none; } .menu[open] summary { background:var(--accent); color:#fff; border-color:var(--accent); } .menu nav { position:absolute; left:0; top:calc(100% + 6px); z-index:4; width:260px; max-width:var(--pop-max); box-sizing:border-box; display:grid; background:#fff; border-radius:14px; padding:6px; box-shadow:0 8px 30px rgba(35,35,58,.18); } .menu nav a { padding:10px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:14px; } .menu nav a:hover, .menu nav a:focus-visible { background:var(--accent-tint); outline:none; } /* Motion (plain CSS, no animation library): panels grow down from the search bar like Google Maps, menus and cards pop from where they open, sheets slide up, the location pointer drops in. All off with "Reduce motion". */ @keyframes wave-reveal-down { from { clip-path:inset(0 0 100% 0 round 20px); opacity:.6; } to { clip-path:inset(0 0 0 0 round 20px); opacity:1; } } @keyframes wave-pop { from { opacity:0; transform:scale(.94) translateY(-6px); } to { opacity:1; transform:none; } } @keyframes wave-slide-up { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } @keyframes wave-fade { from { opacity:0; } to { opacity:1; } } @keyframes wave-pin-drop { 0% { opacity:0; transform:translateY(-18px); } 60% { opacity:1; transform:translateY(2px); } 100% { transform:none; } } .results { animation:wave-reveal-down 200ms cubic-bezier(.2,.8,.2,1); } @media (min-width: 641px) { .panel.card.placepanel { animation:wave-reveal-down 260ms cubic-bezier(.2,.8,.2,1); } } @media (max-width: 640px) { .panel.card { animation:wave-slide-up 240ms cubic-bezier(.2,.8,.2,1); } } .profilecard { transform-origin:top left; animation:wave-pop 160ms cubic-bezier(.2,.8,.2,1); } .menu[open] nav { transform-origin:top left; animation:wave-pop 160ms cubic-bezier(.2,.8,.2,1); } .sheet[open] { animation:wave-slide-up 240ms cubic-bezier(.2,.8,.2,1); } .sheet[open]::backdrop, .askdialog[open]::backdrop { animation:wave-fade 200ms ease-out; } .askdialog[open] { animation:wave-pop 200ms cubic-bezier(.2,.8,.2,1); } .pickbar { animation:wave-slide-up 220ms cubic-bezier(.2,.8,.2,1); } .changemakers { animation:wave-fade 300ms ease-out; } /* Mapbox positions the marker element with transform, so the pointer's own drop animates its picture. */ .pickpin svg { animation:wave-pin-drop 320ms cubic-bezier(.2,.8,.2,1); transform-origin:bottom center; } .notice { animation:wave-fade 200ms ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after, *::backdrop { animation:none !important; transition:none !important; } } /* The map fills the window: the page footer would sit on top of it. The profile doesn't need it either. Its links are all in the map's Menu. */ body:has(.mapwrap) main > footer, body:has(.profilepage) main > footer { display:none; } .askdialog { border:0; padding:0; border-radius:20px; width:min(400px, calc(100vw - 32px)); color:var(--ink); background:#fff; box-shadow:0 12px 40px rgba(35,35,58,.25); } .askdialog::backdrop { background:rgba(35,35,58,.5); } .askbody { padding:24px; } .askbody h2 { margin:0 0 8px; font-size:22px; } .askbody p { margin:0 0 20px; } .askbtns { display:grid; gap:10px; } /* Sign in over the map, the phone's sheet (apps/mobile/src/components/sign-in-sheet.tsx): a bottom sheet on a phone, a centred card on a wider screen. */ .sheet { border:0; padding:0; color:var(--ink); background:#fff; width:min(440px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); border-radius:28px; box-shadow:0 12px 40px rgba(35,35,58,.25); } .sheet::backdrop { background:rgba(35,35,58,.5); } @media (max-width: 640px) { .sheet { left:0; right:0; width:auto; max-width:none; margin:auto 0 0; border-radius:28px 28px 0 0; } } .sheetbody { padding:24px 24px calc(16px + env(safe-area-inset-bottom)); display:grid; gap:16px; } .sheethead { display:flex; align-items:center; justify-content:space-between; gap:12px; } .sheethead h2 { margin:0; font-size:26px; } .sheetclose { flex:none; width:40px; height:40px; border-radius:20px; border:0; background:var(--cream); color:var(--ink); display:grid; place-items:center; cursor:pointer; } .sheettext { margin:0; font-size:15px; line-height:22px; } .sheetbtns { display:grid; gap:10px; } .provider { display:flex; align-items:center; justify-content:center; gap:8px; height:52px; width:100%; border-radius:14px; font: 600 17px var(--font-sans), system-ui, sans-serif; cursor:pointer; } .provider.apple { background:#000; color:#fff; border:1px solid #000; } .provider.google, .provider.phone { background:#fff; color:var(--ink); border:1px solid var(--line); } /* The phone step (docs/phone-signin-plan.md §3.3): the sheet is non-modal so reCAPTCHA's challenge (z-index 2e9, on the page body) stays clickable; our own scrim stands in for ::backdrop. */ .sheetscrim { position:fixed; inset:0; z-index:1000; background:rgba(35,35,58,.5); } .sheet.nonmodal { position:fixed; inset:0; margin:auto; height:fit-content; z-index:1001; overflow:auto; } @media (max-width: 640px) { .sheet.nonmodal { margin:auto 0 0; } } .phoneform { display:grid; gap:10px; } .phonefield { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:0 14px; background:#fff; } .phonefield:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .phonefield span { font: 600 17px var(--font-sans), system-ui, sans-serif; color:var(--muted); } .phonefield input { flex:1; min-width:0; border:0; outline:0; background:none; padding:14px 0; font: 600 17px var(--font-sans), system-ui, sans-serif; color:var(--ink); letter-spacing:.02em; } .phonelinks { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; } .provider:focus-visible, .sheetclose:focus-visible, .sheetnotnow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn.block { width:100%; height:52px; font-size:17px; } .sheetnotnow { min-height:48px; border:0; background:none; color:var(--ink); font: 600 16px var(--font-sans), system-ui, sans-serif; cursor:pointer; } .sheetnotnow:disabled, .sheetclose:disabled { opacity:.5; cursor:default; } .sheetbusy { justify-content:center; min-height:52px; margin:0; } .sheeterror { margin:0; font-size:14px; color:#B42318; } .sheetmore { font-size:14px; color:var(--muted); } .sheetmore summary { cursor:pointer; font-weight:600; color:var(--ink); } .sheetmore p { margin:8px 0 0; } .sheetfine { margin:0; font-size:13px; color:var(--faint); } .notice { background:#fff; padding:8px 12px; border-radius:10px; font-size:14px; margin:0; } .pin { cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); padding:0; } /* Character pins (design: "Map icons"): a white teardrop pointing down-left, its ring coloured by meaning. */ .pin.place, .pin.street { width:38px; height:38px; padding:0; border-radius:999px 999px 999px 7px; border:3px solid var(--ring, #8A919C); background:#fff; display:grid; place-items:center; box-shadow:0 3px 8px rgba(31,35,48,.22); } .pin.street { width:32px; height:32px; } .pin.place img { width:26px; height:26px; } .pin.street img { width:22px; height:22px; } .pin img { display:block; pointer-events:none; } /* The open place's pin, zeroed in on: bigger and on top (size, not transform: Mapbox positions markers with it). */ .pin.place, .pin.street, .pin img { transition:width 220ms cubic-bezier(.2,.8,.2,1), height 220ms cubic-bezier(.2,.8,.2,1), border-width 220ms; } .pin.place.selected { width:58px; height:58px; border-width:4px; } .pin.place.selected img { width:40px; height:40px; } .pin.street.selected { width:50px; height:50px; border-width:4px; } .pin.street.selected img { width:34px; height:34px; } .pin.selected { box-shadow:0 6px 16px rgba(31,35,48,.3); } /* Zoomed out (like Lime): pins become dots of their ring colour, then disappear. The open place's pin stays. */ .mapwrap.zoom-dots .pin.place:not(.selected), .mapwrap.zoom-dots .pin.street:not(.selected) { width:13px; height:13px; border-radius:50%; border:2px solid #fff; background:var(--ring, #8A919C); box-shadow:0 1px 3px rgba(31,35,48,.35); } .mapwrap.zoom-dots .pin:not(.selected) img { display:none; } .mapwrap.zoom-hidden .pin.place:not(.selected), .mapwrap.zoom-hidden .pin.street:not(.selected), .mapwrap.zoom-hidden .cluster, .mapwrap.zoom-hidden .pin.hint { visibility:hidden; pointer-events:none; } /* City hints (§4.11 D): the neutral "unchecked" pin. White, dashed grey border, grey icon, no colour. */ .pin.hint { width:24px; height:24px; border-radius:12px; background:#fff; border:2px dashed var(--faint); display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.18); } .cluster.hint { background:#fff; color:var(--faint); border:2px dashed var(--faint); } .hintcard .unchecked { font-weight:800; margin:0 0 4px; } .hintcard h2 { margin-top:0; } .hintcard .linked { padding-left:18px; margin:4px 0 12px; } /* OpenStreetMap place hints (§4.11 A): same neutral pin, a grey "?" instead of a category icon. */ .pin.hint.osm { font: 700 13px var(--font-sans), system-ui, sans-serif; color:var(--faint); } .osmattr { position:absolute; left:8px; bottom:8px; z-index:2; background:rgba(255,255,255,.85); padding:2px 6px; border-radius:6px; font-size:12px; } .hintcard .attr { font-size:13px; } .swatch { display:inline-block; width:20px; height:12px; border-radius:6px; border:2px solid; vertical-align:-1px; margin-right:6px; } .cluster { width:36px; height:36px; border-radius:18px; background:var(--ink); color:#fff; font-weight:700; border:2px solid #fff; cursor:pointer; } .panel { position:absolute; z-index:3; right:16px; top:16px; bottom:16px; width:min(360px, calc(100vw - 32px)); background:#fff; border-radius:16px; padding:20px; overflow:auto; box-shadow:0 8px 30px rgba(0,0,0,.12); } .panel img { width:100%; border-radius:12px; } .panel .close { position:absolute; right:12px; top:8px; border:0; background:none; font-size:24px; cursor:pointer; } @media (max-width: 640px) { .panel { top:auto; left:16px; right:16px; width:auto; max-height:55vh; } } /* A place or report: a compact card under the top bar (height fits its content), not a full-height sidebar. */ .panel.card { top:84px; bottom:auto; max-height:calc(100dvh - 84px - 160px); padding:16px 16px 12px; } body:has(.guestbanner) .panel.card { top:122px; max-height:calc(100dvh - 122px - 160px); } .panel.card h2 { margin:0 32px 6px 0; font-size:22px; } .panel.card p { margin:6px 0; } .panel.card img { max-height:200px; object-fit:cover; } /* A place or report, like Google Maps: a full-height panel on the left with the search bar on top of it, the photo across its top, then the name, what it is, the entrance tags, a row of round actions. Phones: the bottom sheet. */ .placepanel.switching > :not(.close) { opacity:.55; transition:opacity 120ms; } .placepanel .placename { font-size:26px; margin:0 32px 2px 0; } .placepanel .placesub { color:var(--muted); font-size:15px; margin:0 0 10px; } .placepanel .placetags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 6px; } .placepanel .placetags .entrancetags { margin-top:0; } .placepanel .placetags .pill { margin:0; } .placepanel .placeseen { color:var(--faint); font-size:13px; margin:2px 0 0; } .trustrow { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin:10px 0 0; padding:10px 12px; border-radius:12px; background:#F5F6F8; font-size:14px; } .trustrow.strong { background:#EAF6EE; } .trustcount { display:inline-flex; align-items:center; gap:5px; } .trustcount svg { color:var(--muted); } .trustrow.strong .trustcount svg { color:#17803D; } .trustnote { flex-basis:100%; font-size:12px; color:var(--muted); } .actionrow { display:flex; gap:20px; margin:16px 0 12px; padding:0 0 16px; border-bottom:1px solid var(--line); } .actionbtn { all:unset; display:grid; justify-items:center; gap:6px; cursor:pointer; color:var(--accent); font: 600 13px var(--font-sans), system-ui, sans-serif; min-width:56px; } .actionicon { width:44px; height:44px; border-radius:22px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); } .actionbtn.primary .actionicon { background:var(--accent); color:#fff; } .actionbtn:hover .actionicon { filter:brightness(.96); } .actionbtn:focus-visible .actionicon { outline:2px solid var(--accent); outline-offset:2px; } .placepanel .hero { display:block; width:100%; height:200px; object-fit:cover; border-radius:12px; margin:0 0 14px; max-height:none; } @media (min-width: 641px) { /* Like Google Maps: one card that grows down from the search bar (same width), not a full-height side panel. */ .panel.card.placepanel { left:16px; right:auto; top:16px; bottom:auto; width:440px; max-height:calc(100dvh - 32px - 40px); border-radius:20px; padding:66px 20px 16px; box-shadow:0 4px 16px rgba(35,35,58,.14); z-index:2; } body:has(.guestbanner) .panel.card.placepanel { top:54px; max-height:calc(100dvh - 54px - 56px); padding-top:66px; } /* The search bar sits over the card's top 66 px: scrolling (or tabbing) to a control stops below it, not under it. */ .panel.card.placepanel { scroll-padding-top:66px; } /* The search bar becomes the card's top row: no shadow of its own, a line underneath. */ .mapwrap:has(.placepanel) .mapbar input { box-shadow:none; border-color:transparent; border-bottom:1px solid var(--line); border-radius:20px 20px 0 0; } .placepanel .hero { width:calc(100% + 40px); height:200px; margin:0 -20px 14px; border-radius:0; } /* The search bar's × closes it, as on Google Maps. */ .placepanel > .close { display:none; } } @media (max-width: 640px) { .panel.card, body:has(.guestbanner) .panel.card { top:auto; bottom:12px; max-height:50dvh; } } button.cta { border:0; cursor:pointer; font: 700 16px var(--font-sans), system-ui, sans-serif; } /* Step-free directions (docs/web-parity-plan.md §A): the phone's route sheet as a side panel. */ .routepanel h2 { margin:0 32px 8px 0; } .routepanel h3 { margin:12px 0 6px; font-size:16px; } .routepanel h3.big { font-size:20px; } .routeblock { display:grid; gap:10px; } .routeblock section { display:grid; gap:4px; } .rbtn { display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:10px 14px; border-radius:14px; border:0; background:var(--accent-tint); color:var(--ink); font: 600 15px var(--font-sans), system-ui, sans-serif; cursor:pointer; text-decoration:none; box-sizing:border-box; } .rbtn.dark { background:var(--ink); color:#fff; } .rbtn.withicon { gap:8px; } .rbtn.withicon svg { flex:none; color:var(--accent); } .rbtn:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .routebtns { display:grid; gap:8px; grid-auto-flow:row; } .rcard { display:grid; gap:6px; padding:12px; border-radius:12px; background:var(--accent-tint); } .rcard.warn { background:#FFF4DE; } .rcard.danger { background:#FDECEA; color:#B42318; } .betabanner { background:#FFF4DE; color:#8A5A00; font-weight:700; text-align:center; padding:8px; border-radius:10px; margin:0 0 8px; } .routenotice { background:var(--accent-tint); padding:10px; border-radius:10px; font-weight:600; margin:0 0 8px; } .routestatus { display:flex; gap:10px; align-items:center; } .spinner { width:16px; height:16px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--ink); animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation:none; } } /* Text-style buttons ("Move pin", "Change them"): a ≥24 px tap target (WCAG 2.5.8) without moving the text. */ .linkbtn { border:0; background:none; padding:6px 3px; margin:-6px -3px; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; } .linkbtn.plainbtn { color:var(--ink); text-decoration:none; text-align:left; } .flagrow { border:0; background:none; padding:4px 0; text-align:left; cursor:pointer; font:inherit; color:var(--ink); } .routestats { display:grid; gap:2px; } .routestats .big { font-size:22px; font-family: var(--font-display), system-ui, sans-serif; } .steps { margin:0; padding-left:22px; display:grid; gap:6px; } .plain { margin:0; padding-left:18px; } .routepanel .row { display:flex; gap:12px; align-items:center; justify-content:space-between; } .routepanel select { font:inherit; padding:6px 8px; border-radius:8px; } .whopick { border:0; padding:0; margin:0; display:grid; gap:8px; } .profilechip { justify-self:start; } .small { font-size:13px; } .center { text-align:center; } a.chip { text-decoration:none; } .rbtn.danger { color:#B42318; } .rbtn:disabled { opacity:.6; cursor:default; } .reportactions { margin:12px 0; } .reportactions legend { margin-bottom:6px; } /* Your profile (/me), design "Profile with your bao": a band in the look's colour with the bao and its pen, the @handle and neighborhood pill, three stat cards, the looks you've unlocked, then your needs and your posts. */ .profilepage { max-width:620px; margin:-24px auto 0; } .profiletop { display:flex; align-items:center; margin:0 0 12px; } .profiletop .backlink { display:inline-flex; align-items:center; gap:2px; color:var(--accent); font-weight:600; text-decoration:none; } .profileband { border-radius:36px; padding:20px 20px 24px; display:grid; justify-items:center; gap:8px; color:#1F2330; } .profilebandrow { width:100%; display:flex; align-items:center; justify-content:space-between; } .profilebandrow h1 { margin:0; font-size:28px; font-weight:600; } .profileband.dark .profilebandrow h1 { color:#fff; } .bandbtn { width:44px; height:44px; border-radius:999px; border:0; background:#fff; display:grid; place-items:center; cursor:pointer; } .bandbtn:focus-visible, .bigbao:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .profileband.dark .bandbtn:focus-visible, .profileband.dark .bigbao:focus-visible { outline-color:#fff; } .bigbao { position:relative; width:150px; height:150px; padding:0; border:0; background:none; cursor:pointer; border-radius:24px; } .bigbao .bao { display:block; } .baoedit { position:absolute; right:-48px; bottom:6px; width:42px; height:42px; border-radius:999px; background:#3B63F3; border:3px solid #fff; display:grid; place-items:center; box-shadow:0 4px 10px rgba(31,35,48,0.2); } .profilewho { display:grid; justify-items:center; gap:6px; margin:18px 0; text-align:center; } .profilewho p { margin:0; } .profilehandle { font: 600 26px var(--font-display), system-ui, sans-serif; color:#1F2330; } .scoutpill { padding:5px 12px; border-radius:999px; background:#DDF5E6; color:#146C3A; font-weight:800; font-size:13px; } .statcards { list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; } .statcards li { border-radius:22px; padding:12px 14px; display:flex; flex-direction:column; } .statcards b { font: 700 26px var(--font-display), system-ui, sans-serif; line-height:1.2; } .statcards span { font-weight:800; font-size:13px; } .statcards .lilac { background:#E8E4FF; color:#3A2FC0; } .statcards .blue { background:#D9F2FF; color:#0B5C85; } .statcards .yellow { background:#FFF4B8; color:#6E5600; } .unlocks { display:grid; gap:12px; } .unlockshead { display:flex; align-items:baseline; justify-content:space-between; } .unlockshead h2 { margin:0; font-size:20px; font-weight:600; } .unlockshead span { font-weight:800; font-size:14px; color:#3B63F3; } .unlockrow { list-style:none; margin:0; padding:2px 0; display:flex; gap:12px; overflow-x:auto; } .unlockrow li { flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:800; font-size:12px; text-align:center; color:#1F2330; } .unlockrow li.locked { color:#5B616E; } .unlocklock { width:64px; height:64px; border-radius:999px; background:#F1F3F5; border:2px dashed #C9CED6; box-sizing:border-box; display:grid; place-items:center; } .unlockhint { margin:0; font-weight:700; font-size:13px; color:#5B616E; } /* The bao on its colour disc (components/bao.tsx), and in the top-right account button. */ .baodisc { flex:none; display:grid; place-items:center; border-radius:999px; } .avatar .bao { display:block; } /* "Your look" (design: AvPicker): a .sheet dialog. */ .lookdialog { background:#fff; color:#1F2330; } .looktop { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; padding:20px 20px 0; } .looktop h2 { margin:0; text-align:center; font-size:22px; font-weight:600; } .lookclose { width:44px; height:44px; border-radius:999px; border:0; background:#F1F3F5; display:grid; place-items:center; cursor:pointer; } .lookpreview { width:200px; height:200px; border-radius:999px; margin:16px auto 28px; display:grid; place-items:center; } .looksheet { background:#fff; border-radius:30px 30px 0 0; box-shadow:0 -6px 24px rgba(31,35,48,0.10); padding:18px 20px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; } .looktabs { display:flex; gap:8px; overflow-x:auto; } .looktabs button { flex:none; padding:9px 16px; border-radius:999px; border:0; background:#F1F3F5; color:#1F2330; font-weight:800; font-size:14px; cursor:pointer; white-space:nowrap; } .looktabs button.on { background:#1F2330; color:#fff; } .lookgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; } .looktile { width:100%; aspect-ratio:1; border-radius:22px; background:#F5F6F8; border:3px solid transparent; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0; cursor:pointer; color:#5B616E; } .looktile.on { background:#ECEAFE; border-color:#5B4FE8; } .looktile.locked { cursor:default; } .looktile.locked span { font-weight:800; font-size:11px; color:#5B616E; } .looktile:not(.on):not(.locked):hover { background:#ECEEF2; } .looknone { font-weight:800; font-size:13px; color:#5B616E; } .lockhint { margin:0; font-weight:700; font-size:13px; color:#3C4250; } .lockhint:empty { margin-top:-16px; } .lookclose:focus-visible, .looktabs button:focus-visible, .looktile:focus-visible, .looksave:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .looknote { margin:0; border-radius:20px; background:#F5F6F8; padding:12px 14px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; color:#3C4250; line-height:1.35; } .looknote svg { flex:none; } .looksave { height:54px; border-radius:999px; border:0; background:#3B63F3; color:#fff; font-weight:800; font-size:17px; cursor:pointer; } /* "Your bao on the map" (components/you-marker.tsx): signed in, the bao in a soft blue circle with "You" stands in for the locate control's dot. */ .mapwrap .you-bao-on .mapboxgl-user-location-dot { display:none; } .youbao { pointer-events:none; } .youdisc { display:grid; place-items:center; width:64px; height:64px; border-radius:999px; background:rgba(59,99,243,0.16); } .youlabel { position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); padding:4px 10px; border-radius:999px; background:#1F2330; color:#fff; font-weight:800; font-size:12px; line-height:1.2; white-space:nowrap; } .needs { margin:18px 0 6px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; } .needs summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none; border-radius:10px; } .needs summary::-webkit-details-marker { display:none; } .needs summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .needshead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .needs h2 { margin:0; font-size:16px; } .needschosen { display:flex; gap:6px; flex-wrap:wrap; } .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; } .needchip { display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--accent-tint); color:var(--accent); } .needschev { flex:none; color:var(--muted); transition:transform 160ms ease; } .needs[open] .needschev { transform:rotate(180deg); } .needs[open] summary { margin-bottom:8px; } .needs > p { margin:0 0 8px; } .needsgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px; } .needopt { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; border:1px solid var(--line); cursor:pointer; font-size:13px; font-weight:600; line-height:1.2; } .needopt .needicon { flex:none; color:var(--muted); } .needopt.on .needicon { color:var(--accent); } .needopt.on { border-color:var(--accent); background:var(--accent-tint); } .needopt input { flex:none; width:18px; height:18px; accent-color:var(--accent); margin:0; } .needopt:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .needsnote { margin:10px 0 0 !important; } .settingswrap { position:relative; } .profilesettings { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:min(380px, calc(100vw - 32px)); max-height:calc(100dvh - 120px); overflow:auto; box-sizing:border-box; display:grid; gap:16px; padding:16px; background:#fff; color:var(--ink); text-align:left; border-radius:18px; box-shadow:0 12px 36px rgba(31,35,48,.22); animation:wave-pop 160ms cubic-bezier(.2,.8,.2,1); transform-origin:top right; } .profilesettings h2 { margin:0 0 8px; font-size:16px; } .profilesettings .needs { margin:0; } .settingsgroup { display:grid; gap:10px; } .settingsrow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--accent-tint); } .settingslabel { font-size:13px; font-weight:700; color:var(--muted); } .settingsvalue { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .handleform { display:grid; gap:6px; } .handleform p { margin:0; } .handlerow { display:flex; align-items:center; gap:8px; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:12px; } .handlerow:focus-within { outline:2px solid var(--accent); outline-offset:2px; } .handleat { color:var(--muted); font-weight:700; } .handlerow input { flex:1; min-width:0; border:0; outline:0; background:none; font: 600 15px var(--font-sans), system-ui, sans-serif; color:var(--ink); padding:8px 0; } .handlebad { color:#B42318; } .settingsactions { display:grid; gap:8px; max-width:360px; } .profiletabs { display:flex; justify-content:center; border-top:1px solid var(--line); margin-top:18px; } .profiletabs span { display:inline-flex; align-items:center; gap:6px; padding:12px 4px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .profiletabs .on { color:var(--ink); border-top:2px solid var(--ink); margin-top:-1px; } .postgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; } .posttile { all:unset; position:relative; display:block; width:100%; aspect-ratio:1; cursor:pointer; background:var(--cream); overflow:hidden; } .posttile .thumb { width:100%; height:100%; border-radius:0; } .posttile:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; } .tilebadge { position:absolute; left:6px; bottom:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:rgba(255,255,255,.92); color:var(--ink); } .tilebadge.resolved { color:#17803D; } .tilebadge.hidden, .tilebadge.held { color:#8A4B14; } .profileempty { text-align:center; padding:40px 16px; display:grid; gap:4px; justify-items:center; } .profileempty p { margin:0; } .newpost { display:flex; align-items:center; justify-content:center; min-width:64px; height:64px; padding:0 17px; box-sizing:border-box; text-decoration:none; margin-top:12px; border-radius:999px; background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(59,99,243,.35); transition:transform 120ms ease, background 120ms ease; } .newpost:hover { background:#2F51D6; } .newpost:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .postphoto { display:block; width:100%; max-height:60dvh; object-fit:contain; border-radius:14px; background:var(--cream); min-height:200px; } .sheetnotnow.danger { color:#B42318; } /* My posts (docs/web-parity-plan.md §B) */ .myposts { list-style:none; padding:0; margin:16px 0; display:grid; gap:12px; } .myposts li { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:start; } .myposts p { margin:2px 0; } .thumb { display:block; width:72px; height:72px; border-radius:12px; object-fit:cover; background:var(--cream); } /* Place history: "Earlier photos (N)" under a place's current post (components/place-history.tsx). */ .ph { margin:16px 0; } .ph-title { font-size:16px; margin:0; } .ph-note { margin:2px 0 8px; font-size:13px; color:var(--muted); } .ph-strip { list-style:none; margin:0; padding:0 0 6px; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; } .ph-item { flex:0 0 auto; width:84px; scroll-snap-align:start; text-align:center; } .ph-thumb { display:block; width:84px; height:84px; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--cream); cursor:pointer; } .ph-thumb img, .ph-nophoto { display:block; width:100%; height:100%; object-fit:cover; } .ph-thumb:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .ph-date { display:block; margin-top:4px; font-size:12px; color:var(--muted); } .ph-dialog { max-width:min(440px, calc(100vw - 32px)); border:0; border-radius:16px; padding:16px; } .ph-dialog::backdrop { background:rgba(0,0,0,.5); } .ph-big { display:block; max-width:100%; width:auto; height:auto; max-height:70vh; margin:0 auto; border-radius:12px; } /* the 400 px thumbnail, never upscaled */ .ph-when, .ph-tags { margin:8px 0 0; } .ph-close { margin-top:12px; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }