/* ══════════════════════════════════════════════════════════════════════════════ SANKOFA — CLEAN UI LAYER Dwill: "the UI needs to be a lot cleaner and more organized and easier to follow. its busy. is there a solution?" There is, and the problem is measurable rather than a matter of taste. On the current map, at 1440x900: 20% of the map is permanently covered by three floating panels 1652px of sidebar scroll crammed into a 719px window — 2.3 screens 26 checkboxes visible at once, before you have decided anything 151px of stacked fixed bars above the map 76 city name pills drawn at world zoom, every one of them at once ★ THE DIAGNOSIS IS ONE SENTENCE: nothing on the page ever closes. Every panel is open permanently, so nothing has priority and everything competes. The page is not badly designed — it is showing all of itself at the same time. ★ THE FIX IS ONE RULE: the map is the only thing permanently open. Filters, institutions and the marker key each become a thing you summon and dismiss. They hold exactly the same information; they just stop shouting it all at once. Nothing is deleted — this is a layer, and every panel is one click away. ★ AND THE LABELS ARE FIXED BY ZOOM, WHICH IS HOW MAPS HAVE ALWAYS DONE IT. 76 permanent name pills over a world view is the single ugliest thing on the page. Zoomed out you get the marker; zoom in and the name appears. Standard cartography, and it costs no information. ★ ADDITIVE AND REVERSIBLE. This file does nothing unless carries .ui-clean, which only happens with ?ui=clean or a saved preference. The existing UI is untouched and still the default. ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. THE MAP GETS ITS 20% BACK ─────────────────────────────────────────── The three floating panels are hidden at rest and shown one at a time. */ body.ui-clean .map-float.patterns, body.ui-clean .map-float.legend { display: none; } body.ui-clean .map-float.patterns.open, body.ui-clean .map-float.legend.open { display: block; } /* opened panels sit in one place, so you always know where to look */ body.ui-clean .map-float.patterns.open, body.ui-clean .map-float.legend.open { left: 14px; right: auto; top: auto; bottom: 58px; width: 268px; max-height: calc(100% - 130px); overflow-y: auto; box-shadow: 0 18px 40px rgba(0,0,0,.55); } body.ui-clean .map-float h4 { display: flex; align-items: center; gap: 7px; } /* the count pill is small and genuinely useful — it stays, but quieter */ body.ui-clean .count-pill { top: 12px; left: 14px; font-size: 12px; padding: 6px 12px; background: rgba(15,19,16,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.09); } /* ── 2. ONE CONTROL STACK, BOTTOM LEFT ────────────────────────────────────── */ /* clear of Leaflet's zoom buttons, which sit at bottom-left */ body.ui-clean .ui-controls { position: absolute; left: 62px; bottom: 14px; z-index: 620; display: flex; gap: 6px; flex-wrap: wrap; } body.ui-clean .ui-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .02em; background: rgba(15,19,16,.92); color: #cfd6cd; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 9px 12px; cursor: pointer; backdrop-filter: blur(8px); transition: border-color .15s, color .15s, background .15s; } body.ui-clean .ui-btn:hover { color: #f0cb1a; border-color: rgba(240,203,26,.45); } body.ui-clean .ui-btn.on { color: #0f1310; background: #c9a227; border-color: #c9a227; font-weight: 700; } body.ui-clean .ui-btn .n { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 10px; opacity: .7; } body.ui-clean .ui-btn.on .n { opacity: .85; } /* ── 3. THE SIDEBAR STOPS BEING A WALL ────────────────────────────────────── 1,652px of filters in a 719px window, permanently. Off-canvas now, and the button that opens it says how many filters are actually active — which the 26 checkboxes never did. */ body.ui-clean .sidebar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 640; width: 320px; transform: translateX(-101%); transition: transform .26s cubic-bezier(.16,1,.3,1); box-shadow: 0 0 46px rgba(0,0,0,.6); } body.ui-clean .sidebar.open { transform: translateX(0); } body.ui-clean .ui-scrim { position: absolute; inset: 0; z-index: 630; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .26s; } body.ui-clean .ui-scrim.on { opacity: 1; pointer-events: auto; } body.ui-clean .sidebar-close { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -14px -14px 10px; padding: 12px 14px; background: rgba(22,27,23,.97); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(8px); } body.ui-clean .sidebar-close b { font: 600 13px system-ui, sans-serif; color: #ede8d8; letter-spacing: .01em; } body.ui-clean .sidebar-close button { background: none; border: 0; color: #8b968c; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; } body.ui-clean .sidebar-close button:hover { color: #f0cb1a; background: rgba(240,203,26,.1); } /* ── 4. 76 NAME PILLS AT WORLD ZOOM WAS THE WORST OF IT ───────────────────── Zoomed out, a city is a marker. Zoom in and the name arrives. The pill keeps its click target either way, and the label is still there on hover. */ body.ui-clean .lbl-far .sca-pill { width: 26px !important; padding: 0 !important; margin: 0 auto; font-size: 0 !important; justify-content: center; animation: none; /* 76 pulsing pills is a lot of motion */ } body.ui-clean .lbl-far .sca-pill .sca-star { font-size: 13px; } body.ui-clean .lbl-far .sca-pill:hover { width: auto !important; padding: 0 11px !important; font-size: 12.5px !important; z-index: 5000; position: relative; } /* ── 5. THE BANNER SAYS ITS PIECE ONCE ─────────────────────────────────────── */ body.ui-clean .demo-banner { font-size: 11.5px; padding: 5px 14px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } body.ui-clean .demo-banner.expanded { white-space: normal; } body.ui-clean .demo-banner.hidden { display: none; } /* ── 6. small breathing room ───────────────────────────────────────────────── */ body.ui-clean .topbar { padding-top: 9px; padding-bottom: 9px; } @media (max-width: 760px) { body.ui-clean .ui-controls { bottom: 10px; left: 10px; } body.ui-clean .map-float.patterns.open, body.ui-clean .map-float.legend.open { width: calc(100vw - 28px); } }