diff --git a/frontend/src/style.css b/frontend/src/style.css index d64d97d..8485147 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -17,39 +17,25 @@ 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); } +/* Tight, crisp glow — a hint of neon without blurring the text itself. + These were 8px before, which read as diffused/hard to read; kept short + enough here to add color without softening edges. */ +.text-glow-cyan { text-shadow: 0 0 2px rgba(0, 255, 242, 0.9); } +.text-glow-orange { text-shadow: 0 0 2px rgba(255, 95, 31, 0.9); } +.text-glow-green { text-shadow: 0 0 2px 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); + background: rgba(6, 8, 16, 0.97); + border: 1px solid rgba(0, 255, 242, 0.5); + box-shadow: 0 0 6px rgba(0, 255, 242, 0.15); 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. */ +/* Darken the CARTO dark tiles a bit further so our neon markers/links pop + harder against the basemap. Dropped the earlier saturate/hue-rotate — + it was adding a slight haze over the whole map. */ .leaflet-tile-pane { - filter: brightness(0.75) saturate(1.3) hue-rotate(-6deg); + filter: brightness(0.7); } .leaflet-container { @@ -58,31 +44,31 @@ h1, h2, .font-display { .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; + background: rgba(6, 8, 16, 0.97) !important; + color: #f0feff !important; + border: 1px solid rgba(0, 255, 242, 0.5) !important; font-family: 'Share Tech Mono', monospace !important; - box-shadow: 0 0 12px rgba(0, 255, 242, 0.25) !important; + box-shadow: 0 0 4px rgba(0, 255, 242, 0.2) !important; } .leaflet-popup-tip { - background: rgba(8, 10, 20, 0.92) !important; + background: rgba(6, 8, 16, 0.97) !important; } .regress-portal-marker { - filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); + filter: drop-shadow(0 0 2px 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)); } + 0%, 100% { filter: drop-shadow(0 0 2px var(--portal-glow, #9ca3af)); } + 50% { filter: drop-shadow(0 0 4px 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); } +.regress-link-orange { filter: drop-shadow(0 0 1.5px #ff5f1f); } +.regress-link-green { filter: drop-shadow(0 0 1.5px #39ff14); } +.regress-field-orange { filter: drop-shadow(0 0 2px #ff5f1f); } +.regress-field-green { filter: drop-shadow(0 0 2px #39ff14); } /* Reskin leaflet.markercluster's default light-green bubble look to match the HUD theme — overrides MarkerCluster.Default.css. Color reflects what's @@ -97,32 +83,32 @@ h1, h2, .font-display { display: flex; align-items: center; justify-content: center; - color: #d8fbff; + color: #f0feff; font-family: 'Share Tech Mono', monospace; font-weight: bold; font-size: 12px; } .regress-cluster--neutral div { - background: radial-gradient(circle at 35% 35%, rgba(0, 255, 242, 0.35), rgba(0, 255, 242, 0.12) 70%); + background: rgba(0, 255, 242, 0.22); border: 2px solid #00fff2; - box-shadow: 0 0 10px rgba(0, 255, 242, 0.5); + box-shadow: 0 0 4px rgba(0, 255, 242, 0.4); } .regress-cluster--orange div { - background: radial-gradient(circle at 35% 35%, rgba(255, 95, 31, 0.45), rgba(255, 95, 31, 0.15) 70%); + background: rgba(255, 95, 31, 0.3); border: 2px solid #ff5f1f; - box-shadow: 0 0 12px rgba(255, 95, 31, 0.65); + box-shadow: 0 0 5px rgba(255, 95, 31, 0.5); } .regress-cluster--green div { - background: radial-gradient(circle at 35% 35%, rgba(57, 255, 20, 0.45), rgba(57, 255, 20, 0.15) 70%); + background: rgba(57, 255, 20, 0.3); border: 2px solid #39ff14; - box-shadow: 0 0 12px rgba(57, 255, 20, 0.65); + box-shadow: 0 0 5px rgba(57, 255, 20, 0.5); } .regress-cluster--contested div { - background: linear-gradient(135deg, rgba(255, 95, 31, 0.45) 50%, rgba(57, 255, 20, 0.45) 50%); + background: linear-gradient(135deg, rgba(255, 95, 31, 0.35) 50%, rgba(57, 255, 20, 0.35) 50%); border: 2px solid #ffffff; - box-shadow: 0 0 12px rgba(255, 0, 229, 0.55); + box-shadow: 0 0 5px rgba(255, 0, 229, 0.4); } diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue index 6d177c1..e6e9edb 100644 --- a/frontend/src/views/LoginView.vue +++ b/frontend/src/views/LoginView.vue @@ -43,7 +43,7 @@ async function handleNsecLogin() { >
+
Real-world nodes. Two factions. Claim them for orange or green — sign in with Nostr to jack in.
-+
No NIP-07 extension detected — install Alby or nos2x, or open this app from the Archipelago dashboard.
-