Cyberpunk visual overhaul

Dark CARTO basemap (was default bright OSM tiles), Orbitron/Share Tech
Mono fonts, neon cyan/magenta HUD chrome with glassmorphism panels,
glowing divIcon portal markers (pulsing when claimed) replacing plain
circle dots, neon drop-shadow filters on links/fields, and a subtle
scanline overlay. Login and team-pick screens restyled to match.
This commit is contained in:
2026-08-05 14:14:38 +00:00
parent cd3d82d1c1
commit df9a4ae74b
7 changed files with 237 additions and 84 deletions
+77
View File
@@ -6,3 +6,80 @@ html, body, #app {
height: 100%;
margin: 0;
}
body {
background: #050508;
color: #d8fbff;
font-family: 'Share Tech Mono', monospace;
}
h1, h2, .font-display {
font-family: 'Orbitron', sans-serif;
}
/* Subtle animated scanline field over the whole app — cheap, pure-CSS. */
#app::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2000;
background-image: repeating-linear-gradient(
0deg,
rgba(0, 255, 242, 0.035) 0px,
rgba(0, 255, 242, 0.035) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: screen;
}
.text-glow-cyan { text-shadow: 0 0 8px rgba(0, 255, 242, 0.85); }
.text-glow-orange { text-shadow: 0 0 8px rgba(255, 95, 31, 0.9); }
.text-glow-green { text-shadow: 0 0 8px rgba(57, 255, 20, 0.9); }
.hud-panel {
background: rgba(8, 10, 20, 0.88);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 255, 242, 0.35);
box-shadow: 0 0 20px rgba(0, 255, 242, 0.12), inset 0 0 30px rgba(0, 255, 242, 0.04);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
/* Darken + tint the CARTO dark tiles a bit further and desaturate slightly
so our neon markers/links pop harder against the basemap. */
.leaflet-tile-pane {
filter: brightness(0.75) saturate(1.3) hue-rotate(-6deg);
}
.leaflet-container {
background: #050508 !important;
}
.leaflet-popup-content-wrapper,
.leaflet-tooltip {
background: rgba(8, 10, 20, 0.92) !important;
color: #d8fbff !important;
border: 1px solid rgba(0, 255, 242, 0.4) !important;
font-family: 'Share Tech Mono', monospace !important;
box-shadow: 0 0 12px rgba(0, 255, 242, 0.25) !important;
}
.leaflet-popup-tip {
background: rgba(8, 10, 20, 0.92) !important;
}
.regress-portal-marker {
filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af));
}
.regress-portal-marker.claimed {
animation: portal-pulse 2.4s ease-in-out infinite;
}
@keyframes portal-pulse {
0%, 100% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
50% { filter: drop-shadow(0 0 10px var(--portal-glow, #9ca3af)); }
}
.regress-link-orange { filter: drop-shadow(0 0 4px #ff5f1f); }
.regress-link-green { filter: drop-shadow(0 0 4px #39ff14); }
.regress-field-orange { filter: drop-shadow(0 0 6px #ff5f1f); }
.regress-field-green { filter: drop-shadow(0 0 6px #39ff14); }