/* ========================================================================= CrimeWave — Apple-Maps-inspired chrome, UV/blacklight heat legend. Theme tokens are set on :root and swapped via [data-theme] on . ========================================================================= */ :root{ --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; /* Light theme (default) — Apple Maps light */ --chrome-bg: rgba(255,255,255,0.78); --chrome-bg-solid: #ffffff; --chrome-border: rgba(0,0,0,0.08); --chrome-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06); --text-primary: #1c1c1e; --text-secondary: #6e6e73; --text-tertiary: #8e8e93; --accent: #007aff; --accent-contrast: #ffffff; --divider: rgba(60,60,67,0.13); --input-bg: rgba(118,118,128,0.12); --chip-bg: rgba(118,118,128,0.12); --chip-active-bg: #1c1c1e; --chip-active-text: #ffffff; --switch-off: rgba(120,120,128,0.32); --page-bg: #eef1f4; --sheet-bg: rgba(248,248,250,0.92); --scrim: rgba(0,0,0,0.15); } :root[data-theme="dark"]{ --chrome-bg: rgba(30,30,32,0.72); --chrome-bg-solid: #1c1c1e; --chrome-border: rgba(255,255,255,0.09); --chrome-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4); --text-primary: #f2f2f7; --text-secondary: #a1a1a6; --text-tertiary: #8e8e93; --accent: #0a84ff; --accent-contrast: #ffffff; --divider: rgba(84,84,88,0.48); --input-bg: rgba(118,118,128,0.24); --chip-bg: rgba(118,118,128,0.24); --chip-active-bg: #f2f2f7; --chip-active-text: #1c1c1e; --switch-off: rgba(120,120,128,0.48); --page-bg: #000000; --sheet-bg: rgba(28,28,30,0.92); --scrim: rgba(0,0,0,0.45); } *{ box-sizing: border-box; } html,body{ height:100%; margin:0; } body{ font-family: var(--font); background: var(--page-bg); color: var(--text-primary); overflow: hidden; -webkit-font-smoothing: antialiased; } #app{ position: relative; width: 100vw; height: 100vh; height: 100dvh; } #map{ position:absolute; inset:0; background: var(--page-bg); z-index: 1; } #map:focus{ outline:none; } /* Fallback "fake dark mode" for raw OpenStreetMap tiles (no MapTiler key configured) — a standard invert + hue-rotate trick. Not used when a real MapTiler dark style is active, since that already renders true dark tiles. */ #map.fake-dark-tiles .leaflet-tile-pane{ filter: invert(1) hue-rotate(180deg) brightness(0.94) contrast(0.9) saturate(0.6); } /* Kill default Leaflet chrome so we can supply Apple-styled controls */ .leaflet-control-container .leaflet-top, .leaflet-control-container .leaflet-bottom{ display:none; } .leaflet-popup-content-wrapper, .leaflet-popup-tip{ display:none; } /* we use custom sheet, not popups */ /* --------------------------------------------------------------------- Toolbar --------------------------------------------------------------------- */ .toolbar{ position:absolute; top:16px; left:16px; right:16px; z-index: 500; display:flex; align-items:center; gap:10px; } .brand{ display:flex; align-items:center; gap:8px; background: var(--chrome-bg); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); border-radius: 14px; padding: 10px 14px; white-space: nowrap; flex-shrink: 0; } .brand-glow-dot{ width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #d6ffb3, #7CFC00 45%, #39ff14 70%, #1f8c0c 100%); box-shadow: 0 0 8px 2px #39ff1499, 0 0 2px #fff; } .brand-name{ font-weight:800; font-size:15px; letter-spacing:-0.01em; } .search-pill{ position:relative; flex: 1 1 auto; min-width: 0; display:flex; align-items:center; gap:8px; background: var(--chrome-bg); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); border-radius: 14px; padding: 10px 14px; max-width: 420px; } .search-pill .icon{ width:18px; height:18px; color: var(--text-tertiary); flex-shrink:0; } .search-pill input{ border:none; outline:none; background:transparent; color:var(--text-primary); font-family: var(--font); font-size:15px; width:100%; } .search-pill input::placeholder{ color: var(--text-tertiary); } .search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; background: var(--chrome-bg-solid); border:1px solid var(--chrome-border); border-radius:14px; box-shadow: var(--chrome-shadow); max-height: 320px; overflow-y:auto; padding:6px; } .search-result-item{ padding:10px 12px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; } .search-result-item:hover{ background: var(--input-bg); } .search-result-item .name{ font-size:14px; font-weight:600; } .search-result-item .tier{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; } .toolbar-actions{ display:flex; gap:8px; flex-shrink:0; } .icon-btn{ border:none; cursor:pointer; color: var(--text-primary); display:flex; align-items:center; justify-content:center; background:transparent; padding:0; } .icon-btn svg{ width:20px; height:20px; } .pill-btn{ width:42px; height:42px; border-radius:14px; background: var(--chrome-bg); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); transition: transform .15s ease; } .pill-btn:active{ transform: scale(0.92); } .pill-btn.is-active{ background: var(--accent); color:#fff; } .hidden{ display:none !important; } /* --------------------------------------------------------------------- Floating panels (layers / info) --------------------------------------------------------------------- */ .floating-panel{ position:absolute; top:70px; right:16px; z-index:490; width: 280px; background: var(--chrome-bg-solid); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); border-radius: 16px; padding: 16px; animation: pop-in .16s ease; } @keyframes pop-in{ from{ opacity:0; transform: translateY(-6px) scale(.98);} to{opacity:1; transform:none;} } .panel-title{ font-size:15px; font-weight:700; margin-bottom:10px; } .panel-subtitle{ font-size:12px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; } .panel-divider{ height:1px; background:var(--divider); margin:14px 0; } .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:14px; cursor:pointer; } .toggle-row input{ display:none; } .switch{ position:relative; width:44px; height:26px; border-radius:14px; background: var(--switch-off); flex-shrink:0; transition: background .2s; } .switch::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .2s; } .toggle-row input:checked + .switch{ background:#34c759; } .toggle-row input:checked + .switch::after{ transform: translateX(18px); } .chip-row{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ border:none; cursor:pointer; font-family:var(--font); padding:7px 13px; border-radius:20px; font-size:13px; font-weight:600; background: var(--chip-bg); color: var(--text-primary); transition: background .15s, color .15s; } .chip.active{ background: var(--chip-active-bg); color: var(--chip-active-text); } .info-text{ font-size:13px; line-height:1.5; color: var(--text-secondary); margin: 0 0 10px; } .info-text strong{ color:var(--text-primary); } .info-text.small{ font-size:12px; } .info-text a{ color: var(--accent); text-decoration:none; } .info-text a:hover{ text-decoration:underline; } .mono{ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:12px; } .data-status{ font-size:12px; font-weight:600; color: var(--text-tertiary); border-top:1px solid var(--divider); padding-top:10px; margin-top:4px; display:flex; align-items:center; gap:6px; } .data-status .dot{ width:7px; height:7px; border-radius:50%; background:#8e8e93; flex-shrink:0; } .data-status.live .dot{ background:#39ff14; box-shadow:0 0 6px 1px #39ff1499; } .data-status.fallback .dot{ background:#ffb800; } /* --------------------------------------------------------------------- UV Legend — "blacklight poster" styling --------------------------------------------------------------------- */ .uv-legend{ position:absolute; left:16px; bottom:24px; z-index:480; width: 220px; background: linear-gradient(180deg, #0b0014 0%, #150022 100%); border: 1px solid rgba(180,100,255,0.35); border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 0 0 1px rgba(180,100,255,0.08), 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(140,0,255,0.25); } .uv-legend-title{ font-size:11px; font-weight:800; letter-spacing:.08em; color:#e6d3ff; margin-bottom:10px; display:flex; align-items:center; gap:7px; text-shadow: 0 0 8px rgba(180,100,255,0.6); } .uv-legend-dot{ width:8px; height:8px; border-radius:50%; background:#c774ff; box-shadow:0 0 8px 3px #c774ffaa; } .uv-gradient-bar{ height:12px; border-radius:8px; background: linear-gradient(90deg, #1a0033 0%, #4b0082 18%, #7b2ff7 38%, #00e5ff 56%, #39ff14 72%, #ffff00 87%, #ff2d55 100%); box-shadow: 0 0 12px rgba(157,78,255,0.55), inset 0 0 6px rgba(0,0,0,0.4); } .uv-legend-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:9.5px; font-weight:700; letter-spacing:.03em; color:#b494d6; } /* --------------------------------------------------------------------- Zoom control + locate button (Apple Maps bottom-right rocker) --------------------------------------------------------------------- */ .zoom-control{ position:absolute; right:16px; bottom:96px; z-index:480; background: var(--chrome-bg-solid); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); border-radius: 14px; overflow:hidden; display:flex; flex-direction:column; width:42px; } .zoom-control button{ width:42px; height:42px; border:none; background:transparent; cursor:pointer; font-size:20px; font-weight:500; color: var(--text-primary); display:flex; align-items:center; justify-content:center; } .zoom-control button:active{ background: var(--input-bg); } .zoom-divider{ height:1px; background: var(--divider); } .locate-btn{ position:absolute; right:16px; bottom:24px; z-index:480; width:42px; height:42px; border-radius:14px; border:none; cursor:pointer; background: var(--chrome-bg-solid); border: 1px solid var(--chrome-border); box-shadow: var(--chrome-shadow); color: var(--accent); display:flex; align-items:center; justify-content:center; } .locate-btn svg{ width:20px; height:20px; } .locate-btn:active{ transform: scale(0.92); } /* --------------------------------------------------------------------- Stats bottom sheet ("place card") --------------------------------------------------------------------- */ .stats-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:600; max-width: 420px; margin: 0 16px 16px; background: var(--sheet-bg); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 1px solid var(--chrome-border); border-radius: 20px; box-shadow: var(--chrome-shadow); padding: 10px 20px 20px; transform: translateY(calc(100% + 32px)); transition: transform .32s cubic-bezier(.32,.72,0,1); max-height: 72vh; overflow-y:auto; } .stats-sheet.open{ transform: translateY(0); } .sheet-grabber{ width:36px; height:5px; border-radius:3px; background: var(--divider); margin: 4px auto 10px; } .sheet-close{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background: var(--input-bg); } .sheet-close svg{ width:14px; height:14px; } .sheet-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; padding-right:26px;} .sheet-title{ font-size:20px; font-weight:800; letter-spacing:-0.01em; line-height:1.2; } .sheet-subtitle{ font-size:13px; color:var(--text-secondary); margin-top:2px; } .tier-badge{ flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:.03em; padding:5px 10px; border-radius:20px; color:#fff; white-space:nowrap; text-shadow: 0 0 6px rgba(0,0,0,0.25); } .sheet-stat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin: 16px 0; } .stat-box{ background: var(--input-bg); border-radius:12px; padding:10px 12px; } .stat-box .num{ font-size:20px; font-weight:800; } .stat-box .lbl{ font-size:11px; color:var(--text-secondary); font-weight:600; margin-top:2px;} .breakdown-row{ margin: 4px 0 14px; } .breakdown-label{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:5px; } .breakdown-track{ height:8px; border-radius:6px; background:var(--input-bg); overflow:hidden; display:flex; } .breakdown-seg{ height:100%; } .compare-line{ font-size:13px; font-weight:600; padding:10px 12px; border-radius:12px; background: var(--input-bg); margin-bottom:14px; display:flex; align-items:center; gap:8px; } .sheet-section-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin: 16px 0 8px; } .offense-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--divider); font-size:13.5px; } .offense-row:last-child{ border-bottom:none; } .offense-count{ font-weight:700; color:var(--text-secondary); font-size:12.5px; } .updated-note{ font-size:11px; color:var(--text-tertiary); margin-top:14px; text-align:center; } /* Neighborhood hotspot markers (glowing UV orbs) */ .uv-marker{ border-radius:50%; } .uv-marker-inner{ width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; cursor:pointer; } /* Scrollbar tidy-up for dark sheet */ .stats-sheet::-webkit-scrollbar, .search-results::-webkit-scrollbar{ width:6px; } .stats-sheet::-webkit-scrollbar-thumb, .search-results::-webkit-scrollbar-thumb{ background: var(--divider); border-radius:3px; } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width: 640px){ .brand-name{ display:none; } .brand{ padding:10px; } .floating-panel{ width: calc(100vw - 32px); right:16px; } .uv-legend{ width: 168px; padding:12px 12px 10px; } .uv-legend-labels{ font-size:8.5px; } .stats-sheet{ margin: 0; border-radius: 20px 20px 0 0; max-width:none; max-height:78vh; } .zoom-control{ bottom:96px; } }