From fe0aa669bcd4a9bb6fa4e250e13a236c63171d38 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Fri, 19 Jun 2026 21:36:35 +0200
Subject: [PATCH] style: swap Leaflet CSS override for MapLibre design-token
 styles

---
 themes/intotheeast/css/style.css | 63 ++++++++++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 3 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index f251ec1..ff4fe13 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -368,9 +368,6 @@ body::after {
     width: 100%;
 }
 
-/* match CartoDB dark tile background so no grey flash on load/zoom */
-.leaflet-container { background: #282828 !important; }
-
 .map-empty {
     display: flex;
     align-items: center;
@@ -380,6 +377,66 @@ body::after {
     font-style: italic;
 }
 
+/* ── MapLibre GL overrides ───────────────────────────────────────────────── */
+
+/* Navigation controls (zoom +/−) */
+.maplibregl-ctrl-group {
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+}
+.maplibregl-ctrl-group button {
+    color: var(--color-ink-2);
+}
+.maplibregl-ctrl-group button:hover {
+    background: var(--color-surface-raised);
+    color: var(--color-ink);
+}
+.maplibregl-ctrl-group button + button {
+    border-top: 1px solid var(--color-border);
+}
+
+/* Attribution bar */
+.maplibregl-ctrl-attrib {
+    background: rgba(26, 24, 20, 0.75) !important;
+    color: var(--color-ink-muted) !important;
+    font-family: var(--font-ui);
+    font-size: 0.7rem;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+.maplibregl-ctrl-attrib a {
+    color: var(--color-accent) !important;
+}
+
+/* Popup */
+.maplibregl-popup-content {
+    background: var(--color-canvas);
+    color: var(--color-ink);
+    font-family: var(--font-ui);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-4);
+}
+.maplibregl-popup-tip {
+    border-top-color: var(--color-canvas) !important;
+}
+.maplibregl-popup-close-button {
+    color: var(--color-ink-muted);
+    font-size: 1.1rem;
+    padding: var(--space-1) var(--space-2);
+}
+.maplibregl-popup-close-button:hover {
+    color: var(--color-ink);
+    background: transparent;
+}
+
+/* Cursor */
+.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
+.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
+
 /* ── Stats page ──────────────────────────────────────────────────────────────── */
 
 .stats-heading {