/* Light mode is the default. The category colours --partner ... --open are deliberately NOT defined here: app.js writes them from the active scheme in js/categories.js, so markers and sidebar share a single source. */ :root { --text: #1f2933; --muted: #667085; --line: #012f68; --bg: #f6f7f5; --card: #ffffff; --surface: #ffffff; /* buttons, search field, map overlays */ --surface-hover: #f3f5f7; --border-strong: #1f2933; /* active filter button */ --badge-bg: #eef2f6; --shadow: 0 8px 28px rgba(15, 23, 42, 0.08); --link: #1f5a99; /* the browser default blue fails on dark */ /* The four below are read from JavaScript through themeColor() in js/app.js. No CSS rule references them, so they look unused -- they are not. */ --marker-ring: #ffffff; /* marker outline */ --shadow-marker: 0 2px 6px rgba(0, 0, 0, 0.18); --relation-line: #94A3B8; /* dashed relation lines */ --related-dot: #808B9A; /* connected but unselected points */ } /* Dark mode. js/theme.js sets data-theme while still in the , either from the stored choice or from prefers-color-scheme. */ :root[data-theme="dark"] { --text: #E7EDF4; --muted: #9AA7B4; --line: #2B3745; --bg: #0F141B; --card: #161D26; --surface: #1C2530; --surface-hover: #263140; --border-strong: #8FA3B8; --badge-bg: #222C38; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --link: #7FB2E8; /* see the note in :root above */ --marker-ring: #0F141B; --shadow-marker: 0 2px 6px rgba(0, 0, 0, 0.55); --relation-line: #6B7C90; --related-dot: #7C8A99; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--text); background: var(--bg); } .app { display: grid; grid-template-columns: 260px 1fr 340px; height: 100vh; } aside, .detail-panel { background: var(--card); border-right: 1px solid var(--line); padding: 24px; overflow: auto; } .detail-panel { border-right: none; border-left: 1px solid var(--line); } .brand { display: block; margin-bottom: 22px; } .brand img { display: block; width: 100%; max-width: 190px; height: auto; aspect-ratio: 2655 / 433; } /* Two logo versions, CSS shows whichever fits. The original dark green only reaches 3.3:1 on a dark background, the brightened one reaches 6.6:1. */ /* Nested under .brand because '.brand img' above otherwise wins on specificity and both versions stay visible. */ .brand .logo-dark { display: none; } :root[data-theme="dark"] .brand .logo-light { display: none; } :root[data-theme="dark"] .brand .logo-dark { display: block; } h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.1; } h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin: 26px 0 12px; color: var(--muted); } h3 { margin: 0 0 8px; font-size: 26px; } p { line-height: 1.45; } a:not(.brand) { color: var(--link); } .subtitle { color: var(--muted); margin-bottom: 24px; } .category-intro { color: var(--text); line-height: 1.45; margin-bottom: 18px; } .map-wrap { position: relative; min-width: 0; } #map { width: 100%; height: 100%; } .filter-item { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; } .dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; } .dot.partner { background: var(--partner); } .dot.collaborator { background: var(--collaborator); } .dot.community { background: var(--community); } .dot.flagship { background: var(--flagship); } .dot.open { background: var(--open); } button.filter-item { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left; transition: 0.15s ease; } button.filter-item:hover, button.filter-item.active { border-color: var(--border-strong); background: var(--surface-hover); } .topbar { position: absolute; z-index: 999; left: 50px; right: 24px; top: 24px; display: flex; justify-content: space-between; gap: 16px; pointer-events: none; } .search { pointer-events: auto; width: 320px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; font-size: 12px; background: var(--badge-bg); color: var(--muted); margin: 4px 4px 12px 0; } .footer-note { position: absolute; bottom: 20px; left: 24px; z-index: 999; background: var(--surface); padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--muted); box-shadow: var(--shadow); } .get-involved { margin-top: 50px; } /* Toggle in the topbar, visually matched to the search field. It lives there rather than in the sidebar because the sidebar already overflows the window height without it -- it would only be reachable by scrolling. */ .theme-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 12px 16px; font: inherit; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); cursor: pointer; transition: 0.15s ease; } .theme-toggle:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); } .theme-toggle .icon { font-size: 14px; line-height: 1; } /* Leaflet's own controls ship hardcoded white and have to be overridden one by one for dark mode. */ :root[data-theme="dark"] .leaflet-bar { border: 2px solid rgba(255, 255, 255, 0.16); } :root[data-theme="dark"] .leaflet-bar a, :root[data-theme="dark"] .leaflet-bar a:hover { background: var(--surface); color: var(--text); border-bottom-color: var(--line); } :root[data-theme="dark"] .leaflet-bar a:hover { background: var(--surface-hover); } :root[data-theme="dark"] .leaflet-container .leaflet-control-attribution { background: rgba(15, 20, 27, 0.75); color: var(--muted); } :root[data-theme="dark"] .leaflet-control-attribution a { color: var(--muted); } :root[data-theme="dark"] .leaflet-tooltip { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); } /* The tooltip arrow does not inherit the background colour, each direction needs its own edge. */ :root[data-theme="dark"] .leaflet-tooltip-top::before { border-top-color: var(--surface); } :root[data-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); } :root[data-theme="dark"] .leaflet-tooltip-left::before { border-left-color: var(--surface); } :root[data-theme="dark"] .leaflet-tooltip-right::before { border-right-color: var(--surface); } @media (max-width: 1100px) { .app { display: flex; flex-direction: column; height: auto; } .map-wrap { order: 1; height: 60vh; } aside { order: 2; border: none; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .detail-panel { order: 3; border: none; } aside h1, aside .subtitle, aside h2, aside p { display: none; } .filter-item { width: auto !important; margin: 0 !important; padding: 6px 10px !important; font-size: 12px; border-radius: 999px; } .topbar { left: 70px; right: 16px; top: 16px; } .search { width: 400px; } /* No room for the label -- the name stays in the aria-label. */ .theme-toggle .label { display: none; } }