/** * City Line Capital Property Map — frontend styles. * * Text domain: city-line-map * No external fonts or CDNs. All colors/spacing are self-contained. */ /* ------------------------------------------------------------------------- * Map container sizing * ---------------------------------------------------------------------- */ .cl-map { width: 100%; position: relative; box-sizing: border-box; /* min-height is supplied inline (e.g. style="min-height:600px") so the Leaflet root has something to inherit; map.js may also set an explicit height on this element from the computed min-height before L.map(). */ } .cl-map *, .cl-map *::before, .cl-map *::after { box-sizing: border-box; } .cl-map--contained { /* Flows within the theme content column. No extra rules needed. */ } /* Full-bleed: break out of a constrained content column to the viewport edges. */ .cl-map--full { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* Ensure the Leaflet root fills the .cl-map min-height. */ .cl-map .leaflet-container { height: 100%; min-height: inherit; font: inherit; /* Neutral, system font stack — no external fonts. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; background: #e8eef3; } /* Hidden SVG holder injected into by map.js. */ .cl-map__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ------------------------------------------------------------------------- * Pin markers (L.divIcon className "cl-pin") * ---------------------------------------------------------------------- */ .cl-pin { background: transparent; border: 0; } .cl-pin svg { display: block; filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.35)); } /* ------------------------------------------------------------------------- * Search control (.cl-map__search) * ---------------------------------------------------------------------- */ .cl-map__search { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06); padding: 6px; width: 240px; max-width: calc(100vw - 40px); color: #1f2937; font-size: 13px; line-height: 1.35; } .cl-map__search-box { display: flex; align-items: center; gap: 6px; } .cl-map__search-input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #ffffff; color: #1f2937; font-size: 13px; line-height: 1.35; font-family: inherit; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .cl-map__search-input::placeholder { color: #9ca3af; } .cl-map__search-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } /* Magnifying-glass submit button (floats to the right of the input). */ .cl-map__search-submit { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: #2563eb; color: #ffffff; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.12s ease; } .cl-map__search-submit:hover, .cl-map__search-submit:focus { background: #1d4ed8; outline: none; } .cl-map__search-submit svg { display: block; } .cl-map__search-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; } .cl-map__search-results:empty { display: none; margin: 0; } .cl-map__search-result { margin: 0; padding: 7px 9px; border-radius: 6px; cursor: pointer; color: #1f2937; transition: background-color 0.12s ease; } .cl-map__search-result:hover, .cl-map__search-result:focus, .cl-map__search-result.is-active { background: #eff6ff; color: #1d4ed8; } .cl-map__search-result-title { display: block; font-weight: 600; font-size: 13px; } .cl-map__search-result-meta { display: block; margin-top: 1px; font-size: 11px; color: #6b7280; } .cl-map__search-empty { margin: 0; padding: 8px 9px; font-size: 12px; color: #6b7280; } /* ------------------------------------------------------------------------- * Legend control (.cl-map__legend) * ---------------------------------------------------------------------- */ .cl-map__legend { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06); padding: 8px 10px; color: #1f2937; font-size: 12px; line-height: 1.3; max-width: 220px; } .cl-map__legend-title { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; } .cl-map__legend-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 4px 4px; border: 0; border-radius: 6px; background: none; -webkit-appearance: none; appearance: none; font: inherit; text-align: left; cursor: pointer; user-select: none; color: #1f2937; transition: background-color 0.12s ease, opacity 0.12s ease; } .cl-map__legend-row:hover, .cl-map__legend-row:focus, .cl-map__legend-row:focus-visible { background: #f3f4f6; } /* No hard focus box around legend rows — use the subtle hover background. */ .cl-map__legend-row:focus, .cl-map__legend-row:focus-visible { outline: none; box-shadow: none; } /* Toggled-off types are dimmed (map.js toggles the --off modifier). */ .cl-map__legend-row--off { opacity: 0.45; } .cl-map__legend-row--off .cl-map__legend-label { text-decoration: line-through; } .cl-map__legend-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); } .cl-map__legend-swatch svg { display: block; width: 14px; height: 14px; border-radius: 4px; } .cl-map__legend-label { flex: 1 1 auto; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------------------- * Popups (.cl-map__popup) * ---------------------------------------------------------------------- */ /* Tighten Leaflet's default popup chrome for a cleaner card. */ .cl-map .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.22); padding: 0; } .cl-map .leaflet-popup-content { margin: 0; /* Let Leaflet size the popup to its content (clamped by the min/max width options set in map.js). Overriding this with a fixed/auto width breaks Leaflet's fit-to-content measurement. */ line-height: 1.4; } .cl-map__popup { /* Fill the Leaflet-sized content wrapper; Leaflet fits it to the content (see the min/max width options in map.js). */ width: auto; padding: 12px 14px 13px; color: #1f2937; font-size: 13px; line-height: 1.45; } .cl-map__popup-thumb { display: block; width: 100%; height: 120px; margin: 0 0 10px; object-fit: cover; border-radius: 8px; background: #f3f4f6; } .cl-map__popup-title { display: block; /* Right gutter so the title never runs under Leaflet's close (X) button. */ padding-right: 16px; margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.25; color: #111827; } .cl-map__popup-title a { color: #111827; text-decoration: none; } .cl-map__popup-title a:hover, .cl-map__popup-title a:focus { color: #1d4ed8; text-decoration: underline; } .cl-map__badge { display: inline-block; margin: 0px 0 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; color: #ffffff; /* A solid fallback; map.js sets an inline gradient background from term colors. */ background: #2563eb; white-space: nowrap; } /* Generic popup meta row (map.js emits cl-map__popup-row on address/size/cta). */ .cl-map__popup-row { display: block; margin: 0 0 3px; font-size: 12px; color: #4b5563; } .cl-map__popup-row:last-child { margin-bottom: 0; } .cl-map__popup-address { color: #374151; } .cl-map__popup-size { margin: 8px 0 0; font-size: 12px; color: #4b5563; } /* Contact CTA links (phone / email / website). */ .cl-map__popup-cta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 9px 0 0; } .cl-map__cta { display: inline-block; font-size: 12px; font-weight: 600; color: #1d4ed8; text-decoration: none; } .cl-map__cta:hover, .cl-map__cta:focus { text-decoration: underline; } .cl-map__popup-excerpt { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #4b5563; } /* ------------------------------------------------------------------------- * Cluster bubbles — neutral styling consistent with the rest of the UI. * ---------------------------------------------------------------------- */ .cl-map .marker-cluster { background-clip: padding-box; border-radius: 50%; } .cl-map .marker-cluster div { font-family: inherit; font-weight: 700; color: #ffffff; } /* ------------------------------------------------------------------------- * Attribution — minimal: no white box, small muted text (the Leaflet flag/ * prefix is removed in JS via setPrefix(false)). * ---------------------------------------------------------------------- */ .cl-map .leaflet-control-attribution { background: transparent; box-shadow: none; margin: 0 2px 1px 0; padding: 0 4px; font-size: 10px; line-height: 1.4; color: #9aa3af; } .cl-map .leaflet-control-attribution a { color: #7b8494; text-decoration: none; } .cl-map .leaflet-control-attribution a:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- * Below-map property list (.cl-map-list) * ---------------------------------------------------------------------- */ .cl-map-list { margin: 18px 0 0; color: #1f2937; font-size: 14px; } .cl-map-list__search { width: 100%; max-width: 340px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1f2937; font-size: 14px; font-family: inherit; -webkit-appearance: none; appearance: none; } .cl-map-list__search:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } .cl-map-list__table { width: 100%; border-collapse: collapse; font-size: 14px; } .cl-map-list__table th, .cl-map-list__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: top; } .cl-map-list__table thead th { font-weight: 700; color: #374151; border-bottom: 2px solid #d1d5db; white-space: nowrap; } .cl-map-list__row { cursor: pointer; transition: background-color 0.12s ease; } .cl-map-list__row:hover, .cl-map-list__row:focus { background: #eff6ff; outline: none; } .cl-map-list__row td:first-child { font-weight: 600; } /* Category pill inside the list table (reuses .cl-map__badge, no margin). */ .cl-map-list__badge { margin: 0; white-space: nowrap; } .cl-map-list__empty { margin: 10px 0 0; color: #6b7280; font-style: italic; } /* ------------------------------------------------------------------------- * Responsive tweaks * ---------------------------------------------------------------------- */ @media (max-width: 600px) { .cl-map__search { width: 220px; } .cl-map-list__table { font-size: 13px; } .cl-map-list__table th, .cl-map-list__table td { padding: 8px 8px; } }