/* * Pins, clusters, and popup chrome for the office map at /map — the one * surface running on Google rather than MapLibre. * * Plain CSS rather than Tailwind classes, for the same reason maplibre-theme.css * is: this markup is built in JavaScript and in Ruby (Maps::PayloadService * ships the popup HTML), so Tailwind never scans it and any utility class in * here would be purged. The .lo-popup rules those popups need live in * maplibre-theme.css and are shared by both engines. */ /* * An AdvancedMarkerElement's content is anchored by its BOTTOM CENTRE, so a * plain circle sits half a pin above the coordinate it marks. Translating it * down half its height is what puts the dot on the dock. */ .lo-gpin { width: 18px; height: 18px; border-radius: 9999px; border-width: 3px; border-style: solid; box-shadow: 0 1px 4px rgb(15 23 42 / 45%); transform: translateY(50%); cursor: pointer; } /* Item points — the docks and lifts — sit under the property pin they belong to and read as secondary. */ .lo-gpin--item { width: 13px; height: 13px; border-width: 2px; } .lo-gcluster { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9999px; border: 2px solid #ffffff; background: #0b4f6c; color: #ffffff; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; box-shadow: 0 2px 6px rgb(15 23 42 / 45%); transform: translateY(50%); cursor: pointer; } /* Bigger clusters read as bigger, matching the step scale the MapLibre build used on circle-radius. */ .lo-gcluster--md { min-width: 40px; height: 40px; font-size: 13px; } .lo-gcluster--lg { min-width: 52px; height: 52px; font-size: 15px; } /* * Google's InfoWindow ships a fixed white card. On a dark page that arrives as * a bright rectangle over dark imagery, so it follows the app's theme instead — * the `.dark` class the theme controller puts on . */ .gm-style .gm-style-iw-c { border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); } .gm-style .gm-style-iw-d { overflow: auto !important; } .dark .gm-style .gm-style-iw-c { background: #0f172a; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); } /* The little arrow under the card is a separate element and has to be recoloured too, or it stays white and floats under a dark card. */ .dark .gm-style .gm-style-iw-t::after { background: linear-gradient(45deg, #0f172a 50%, rgb(15 23 42 / 0%) 51%, rgb(15 23 42 / 0%) 100%); } .dark .gm-style .gm-style-iw-d { background: #0f172a; } /* Google renders its close button as an inline SVG with a hard-coded fill. */ .dark .gm-style .gm-style-iw-c button[aria-label="Close"] span, .dark .gm-style .gm-ui-hover-effect > span { background-color: #94a3b8; }