/* ===================================================================== The Grove — Living Map (map.php) Loaded in the AFTER vendor/ol/ol.css (map.php prints the two s in that order, per data_sources/map_stack.md) so these overrides always win over OpenLayers' vendored control defaults. Every colour below is a style.css :root custom property — no new hex values — and the marker/popup look reuses the board's index-card ("--card") + emoji register. See MAP_SPEC.md §2 + the MARKER / POPUP section. ===================================================================== */ /* ---------- Intro / hero copy ---------- */ .grove-map-intro{margin-bottom:.6rem;} .grove-map-note{ margin:.5rem 0 0;font-size:.9rem;line-height:1.5;color:#4a544c; max-width:62ch; } /* ---------- Toolbar bar above the map: legend + admin view toggles ---------- */ .grove-map-bar{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.6rem;margin:1rem 0 .5rem; } .grove-map-legend{ display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem; } /* Legend entries are now real toggle buttons (feature: layer toggles) — clicking one hides/shows its kind-group on the map (map.js: hiddenKinds + styleForFeature() returning null). aria-pressed IS the on/off state. */ .grove-legend-toggle{ display:inline-flex;align-items:center;gap:.35rem; font:inherit;font-size:.82rem;font-weight:600;color:#3c473e; background:transparent;border:0;padding:.1rem .15rem;margin:0; min-height:32px;cursor:pointer;border-radius:6px; } .grove-legend-toggle:hover{color:var(--green-deep);} .grove-legend-toggle:focus-visible{outline:2px solid var(--green-soft);outline-offset:1px;} /* is-off state: reduced opacity + a faded dot, no strikethrough (clean, per spec) */ .grove-legend-toggle[aria-pressed="false"]{opacity:.5;} .grove-legend-toggle[aria-pressed="false"] .grove-legend-dot{ background:#eee;box-shadow:none;filter:grayscale(40%); } .grove-legend-dot{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:50%; background:#fff;border:3px solid var(--green); font-size:12px;line-height:1; box-shadow:0 1px 3px rgba(90,70,30,.25); } .grove-legend-dot--planting{border-color:var(--green);} .grove-legend-dot--issue{border-color:var(--pin-red);} .grove-legend-dot--note{border-color:var(--pin-blue);} .grove-legend-dot--area{border-color:var(--wood);} .grove-legend-dot--utility-power{border-color:var(--pin-red);} .grove-legend-dot--utility-water{border-color:var(--pin-blue);} .grove-legend-dot--utility-easement{border-color:var(--cork-base);} .grove-legend-dot--art{border-color:var(--wood-dark);} .grove-map-admin{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;} .grove-map-admin-tag{ font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em; color:#8a5e2e;background:var(--paper);border:1px solid var(--wood-light); border-radius:999px;padding:.05rem .5rem; font-family:var(--font-mono); } .grove-map-toggle{ font-size:.8rem;font-weight:600;text-decoration:none;color:var(--green-deep); background:#fff;border:1px solid #d4c5a3;border-radius:999px; padding:.2rem .6rem;min-height:32px;display:inline-flex;align-items:center; } .grove-map-toggle:hover,.grove-map-toggle:focus-visible{background:#eef6ef;border-color:var(--green-soft);} .grove-map-toggle.is-active{background:var(--green-deep);color:var(--cream);border-color:var(--green-deep);} /* ---------- Map container ---------- An explicit height is the #1 fix for the "blank map" bug (map_stack.md GOTCHAS). isolation:isolate contains OpenLayers' internal z-index stack so its controls/overlays never punch above the site header or the add-feature modal. */ .grove-map-wrap{position:relative;margin:0 0 1.2rem;} #grove-map{ height:70vh;min-height:420px;width:100%; border:1px solid #d4c5a3;border-radius:10px; box-shadow:0 2px 6px rgba(90,70,30,.15); background:#dfe6d8; /* calm tone while tiles load */ position:relative;z-index:0;isolation:isolate; } .grove-map-loading{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); margin:0;font-size:.9rem;color:#5a6359;font-style:italic; pointer-events:none; } /* ---------- OpenLayers controls (ol-*) ---------- Attribution: keep it legible over the imagery. Zoom + our custom basemap / draw toolbars: retune from OL's default blue to the Grove palette. */ #grove-map .ol-attribution{background:rgba(255,255,255,.82);border-radius:6px 0 0;} #grove-map .ol-attribution ul{color:#3c473e;font-size:.68rem;text-shadow:none;} #grove-map .ol-attribution a{color:var(--green-deep);} #grove-map .ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.9);} #grove-map .ol-control{background:rgba(255,255,255,.72);} #grove-map .ol-control:hover{background:rgba(255,255,255,.9);} #grove-map .ol-zoom{top:.5em;left:.5em;} #grove-map .ol-control button{ background:var(--green-deep);color:var(--cream);font-weight:700; } #grove-map .ol-control button:hover, #grove-map .ol-control button:focus{background:var(--green);} /* ---------- Custom basemap switch (top-right) + draw toolbar (top-left) ---------- Two small ol.control DOM widgets — a basemap switch and the draw toolbar — styled as the Grove's own pill buttons. */ #grove-map .grove-basemap-switch{ top:.5em;right:.5em;display:flex;gap:2px;padding:2px;border-radius:8px; } #grove-map .grove-basemap-switch button{ font:inherit;font-size:.76rem;font-weight:600;line-height:1;cursor:pointer; height:auto;width:auto;padding:.3rem .55rem;border-radius:6px; background:#fff;color:var(--green-deep);border:1px solid #d4c5a3; } #grove-map .grove-basemap-switch button:hover{background:#eef6ef;border-color:var(--green-soft);} #grove-map .grove-basemap-switch button.is-active{ background:var(--green-deep);color:var(--cream);border-color:var(--green-deep); } #grove-map .grove-map-tools{ top:.5em;left:3.4em;display:flex;gap:3px;padding:3px;border-radius:8px; } #grove-map .grove-map-tools .grove-tool{ font:inherit;font-size:16px;line-height:1;cursor:pointer; height:auto;width:auto;padding:.32rem .42rem;border-radius:6px; background:#fff;color:var(--ink);border:1px solid #d4c5a3; } #grove-map .grove-map-tools .grove-tool:hover, #grove-map .grove-map-tools .grove-tool:focus{background:#eef6ef;border-color:var(--green-soft);} #grove-map .grove-map-tools .grove-tool.is-active{ background:#e3f3e7;border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft) inset; } /* ---------- Community-art floating bar (colour swatches + undo/done/cancel) ---------- An ol.control shown only while the 🎨 art tool is active (map.js toggles the `hidden` attribute on wrap; the [hidden] rule here re-asserts display:none against the .grove-art-bar{display:flex} below at equal specificity — same pitfall/fix as .grove-ta-chosen[hidden] further down this file). Positioned just under the draw toolbar, same left edge. */ #grove-map .grove-art-bar{ top:3.6em;left:.5em;display:flex;flex-direction:column;gap:.35rem; padding:.4rem;border-radius:8px; } #grove-map .grove-art-bar[hidden]{display:none;} .grove-art-swatches{display:flex;gap:4px;} .grove-art-swatch{ width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer; border:2px solid #fff;box-shadow:0 0 0 1px #d4c5a3; } .grove-art-swatch:hover{box-shadow:0 0 0 1px var(--green-soft);} .grove-art-swatch.is-selected{box-shadow:0 0 0 2px var(--green-deep);} .grove-art-actions{display:flex;flex-wrap:wrap;gap:4px;} .grove-art-btn{ font:inherit;font-size:.72rem;font-weight:600;cursor:pointer; height:auto;width:auto;border-radius:6px;padding:.28rem .5rem; border:1px solid #d4c5a3;background:#fff;color:var(--ink); } .grove-art-btn:hover{background:#eef6ef;border-color:var(--green-soft);} .grove-art-btn--primary{background:var(--green-deep);color:var(--cream);border-color:var(--green-deep);} .grove-art-btn--primary:hover{background:var(--green);} .grove-art-btn[disabled]{opacity:.5;cursor:default;} /* ---------- Emoji dot markers ---------- Points render on the OpenLayers canvas (ol.style.Circle + emoji Text), so these HTML rules drive only the legend/draft register + the emoji palette the JS reads from the custom properties. A white dot with a kind-coloured ring. */ .grove-marker{background:transparent;border:0;} .grove-dot{ width:30px;height:30px;border-radius:50%; background:#fff;border:3px solid var(--green); display:flex;align-items:center;justify-content:center; box-shadow:0 2px 5px rgba(40,22,4,.4); transition:transform .15s ease, box-shadow .15s ease; transform-origin:center center; } .grove-emoji{font-size:15px;line-height:1;} .grove-marker--planting .grove-dot{border-color:var(--green);} .grove-marker--issue .grove-dot{border-color:var(--pin-red);} .grove-marker--note .grove-dot{border-color:var(--pin-blue);} .grove-marker--area .grove-dot{border-color:var(--wood);} .grove-marker--draft .grove-dot{border-color:var(--green-deep);border-style:dashed;} .grove-marker:hover .grove-dot, .grove-marker:focus .grove-dot, .grove-marker:focus-visible .grove-dot{ transform:scale(1.4);box-shadow:0 6px 13px rgba(40,22,4,.45); } /* centroid label sitting on a drawn area — a touch smaller */ .grove-arealabel .grove-dot{width:26px;height:26px;border-width:2px;} .grove-arealabel .grove-emoji{font-size:13px;} /* resolved features (admin ?show=) read as faded + dashed */ .grove-marker.is-resolved .grove-dot{opacity:.5;border-style:dashed;} /* ---------- Index-card popup (board .note--card register) ---------- An ol.Overlay whose element is .grove-pop-overlay, anchored bottom-center above the clicked feature (map.js sets an [0,-18] offset). The card stock + red rule line reuse the board's index-card look. */ .grove-pop-overlay{ position:relative;min-width:190px;max-width:280px; background: repeating-linear-gradient(180deg,transparent 0 25px,var(--card-line) 25px 26px), linear-gradient(180deg,#f6faff,var(--card)); border:1px solid var(--card-edge);border-radius:3px; box-shadow:inset 3px 0 0 var(--card-rule), var(--shadow-note); color:var(--ink); } .grove-pop-content{margin:.85rem 1rem .8rem 1.1rem;min-width:180px;} .grove-pop-overlay.grove-pop--resolved{opacity:.92;} /* little downward tip so the card visibly points at its marker */ .grove-pop-tip{ position:absolute;left:50%;bottom:-9px;transform:translateX(-50%); width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent; border-top:9px solid var(--card); filter:drop-shadow(0 1px 1px rgba(40,22,4,.25)); } .grove-pop-close{ position:absolute;top:.15rem;right:.3rem; font:inherit;font-size:1.25rem;line-height:1;cursor:pointer; background:transparent;border:0;color:#5a6359;padding:.05rem .28rem; min-height:auto;width:auto;z-index:2; } .grove-pop-close:hover,.grove-pop-close:focus-visible{color:var(--clay-text);} .grove-pop-kind{ display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.03em; text-transform:uppercase;margin:0 0 .3rem;color:#3a5a86; font-family:var(--font-mono); } .grove-pop-kind--planting{color:var(--green-deep);} .grove-pop-kind--issue{color:var(--clay-text);} .grove-pop-kind--note{color:var(--creek-text);} .grove-pop-kind--area{color:var(--wood-dark);} .grove-pop-resolved-tag{ font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:#5a6359;background:var(--paper);border:1px solid var(--wood-light); border-radius:999px;padding:.02rem .45rem;margin-left:.35rem; font-family:var(--font-mono); } .grove-pop-title{ font-family:var(--font-display);color:#23446e; font-size:1.15rem;line-height:1.2;margin:0 0 .35rem; } .grove-pop-body{margin:0 0 .5rem;font-size:.9rem;line-height:1.5;color:#3c473e;white-space:pre-wrap;} .grove-pop-photo{ display:block;max-width:100%;height:auto;border-radius:6px; margin:.2rem 0 .5rem;border:1px solid var(--card-edge); } .grove-pop-foot{ display:flex;flex-wrap:wrap;gap:.3rem;justify-content:space-between; font-size:.76rem;color:#5a6359;margin:.3rem 0 0;align-items:baseline; } .grove-pop-author{font-style:italic;} .grove-pop-link{ display:inline-block;margin:.5rem 0 0;font-size:.85rem;font-weight:600; color:var(--green-deep);text-decoration:none; } .grove-pop-link:hover,.grove-pop-link:focus-visible{text-decoration:underline;} .grove-pop-members{ margin:.3rem 0 .5rem;padding:.5rem .6rem;border-radius:6px; background:rgba(122,79,40,.07);border:1px dashed var(--card-edge); } .grove-pop-members-h{margin:0 0 .3rem;font-size:.78rem;font-weight:700;color:#3c473e;} .grove-pop-members-list{margin:0;padding:0 0 0 1.1rem;font-size:.83rem;line-height:1.6;max-height:9rem;overflow-y:auto;} .grove-pop-members-list a{color:var(--green-deep);} .grove-pop-actions{ display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0; border-top:1px dashed var(--card-edge);padding-top:.5rem; } .grove-pop-btn{ font:inherit;font-size:.78rem;font-weight:600;cursor:pointer; border-radius:999px;padding:.2rem .7rem;min-height:32px; border:1px solid var(--green-soft);background:#e3f3e7;color:var(--green-deep); } .grove-pop-btn:hover,.grove-pop-btn:focus-visible{background:#d4ecda;border-color:var(--green);} .grove-pop-btn--del{border-color:var(--pin-red);background:#fbe6e4;color:#8a201b;} .grove-pop-btn--del:hover,.grove-pop-btn--del:focus-visible{background:#f6d3d0;border-color:var(--pin-red-hi);} .grove-pop-btn[disabled]{opacity:.55;cursor:default;} /* ---------- Add-feature modal: an index-card form shown after a draw ---------- Hidden until map.js opens it (JS-off users never see it — drawing needs JS). */ .grove-map-modal{ position:fixed;inset:0;z-index:1200;display:none; align-items:flex-start;justify-content:center; padding:max(1rem,env(safe-area-inset-top)) 1rem 1rem; overflow-y:auto; } .grove-map-modal.is-open{display:flex;} .grove-map-modal-backdrop{ position:fixed;inset:0;background:rgba(40,22,4,.55); } .grove-map-card{ position:relative;z-index:1; width:100%;max-width:440px;margin:auto; background: repeating-linear-gradient(180deg,transparent 0 27px,var(--card-line) 27px 28px), linear-gradient(180deg,#f6faff,var(--card)); border:1px solid var(--card-edge);border-radius:4px; box-shadow:inset 4px 0 0 var(--card-rule), var(--shadow-note); padding:1.4rem 1.3rem 1.2rem 1.5rem; } .grove-map-close{ position:absolute;top:.4rem;right:.55rem; font:inherit;font-size:1.5rem;line-height:1;cursor:pointer; background:transparent;border:0;color:#5a6359;padding:.1rem .3rem; min-height:auto;width:auto; } .grove-map-close:hover,.grove-map-close:focus-visible{color:var(--clay-text);} .grove-map-form-h{ font-family:var(--font-display);color:#23446e;font-size:1.4rem; margin:.1rem 0 .1rem; } .grove-map-form-sub{margin:0 0 .8rem;font-size:.84rem;color:#5a6359;} .grove-map-kinds{ border:0;margin:0 0 .6rem;padding:0; display:flex;flex-wrap:wrap;gap:.4rem; } .grove-map-kinds legend{ font-weight:600;color:var(--green-deep);font-size:.9rem;margin:0 0 .35rem; padding:0;float:left;width:100%; } .gm-kind{ display:inline-flex;align-items:center;gap:.35rem;cursor:pointer; font-size:.85rem;font-weight:600;color:#3c473e; background:#fff;border:1px solid #d4c5a3;border-radius:999px; padding:.3rem .7rem;min-height:38px; } .gm-kind input{width:16px;height:16px;flex:0 0 auto;margin:0;} .gm-kind:hover{border-color:var(--green-soft);background:#eef6ef;} .gm-kind.is-checked{border-color:var(--green);background:#e3f3e7;color:var(--green-deep);} .gm-kind[hidden]{display:none;} .grove-map-card .field{margin:0 0 .7rem;} .grove-map-card label{display:block;font-weight:600;color:var(--green-deep);margin-bottom:.3rem;font-size:.9rem;} .grove-map-card .opt{font-weight:400;font-size:.76rem;color:#8a8168;} .grove-map-card input[type=text], .grove-map-card input[type=file], .grove-map-card textarea{ width:100%;font:inherit;color:var(--ink); border:1px solid #cdbf9c;border-radius:8px;padding:.5rem .7rem; background:#fff; } .grove-map-card input[type=text]:focus, .grove-map-card textarea:focus{outline:2px solid var(--green-soft);border-color:var(--green-soft);} .grove-map-card textarea{resize:vertical;min-height:3.4rem;} .grove-map-form-err{ margin:.2rem 0 .6rem;font-size:.86rem;line-height:1.4;color:#8a201b; background:#fbe6e4;border:1px solid var(--pin-red-hi);border-left:4px solid var(--pin-red); border-radius:6px;padding:.5rem .7rem; } .grove-map-form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.3rem;} /* The typeahead dropdown must clear the modal card's stacking */ .grove-map-card .grove-ta-list{z-index:40;} /* grove.css's .grove-ta-chosen{display:flex} (author) overrides the UA [hidden] rule at equal specificity, so an un-picked chosen box would show as an empty green pill. Re-honour the hidden attribute (this scoped rule keeps the fix on map.php; the same latent issue on add/plant/wishlist is flagged for the shared grove.css). */ .grove-ta-chosen[hidden]{display:none !important;} /* ---------- Responsive ---------- */ @media(max-width:600px){ #grove-map{height:62vh;min-height:340px;} .grove-map-bar{gap:.5rem;} } @media(max-width:480px){ .grove-map-card{padding:1.2rem 1rem 1rem 1.2rem;} .grove-legend-toggle{font-size:.78rem;} } /* Users who prefer reduced motion: no marker grow animation */ @media(prefers-reduced-motion:reduce){ .grove-dot{transition:none;} .grove-marker:hover .grove-dot, .grove-marker:focus .grove-dot, .grove-marker:focus-visible .grove-dot{transform:none;} }