From 1584676978e97145104e38fdf6c199c944c38aa0 Mon Sep 17 00:00:00 2001 From: ssmithx Date: Wed, 5 Aug 2026 23:05:04 +0000 Subject: [PATCH] =?UTF-8?q?Sharpen=20the=20cyberpunk=20visuals=20=E2=80=94?= =?UTF-8?q?=20too=20diffused/hard=20to=20read?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed the whole-app animated scanline overlay entirely — biggest single contributor to the hazy look. - text-shadow glow blur cut from 8px to 2px across the board (headers keep a hint of neon, body text is now crisp). - hud-panel: solid 0.97-alpha background (was 0.88 + backdrop-blur(10px), which softened everything behind/inside it), tighter box-shadow. - Map: dropped the saturate/hue-rotate tile filter (just brightness now), halved drop-shadow blur radii on markers/links/fields/clusters. - Bumped low-opacity text (many labels were down at /30-/60 which reads fine on a mockup but is genuinely hard to read against a busy map) up to /75-/95 across Login/TeamPick/MapView. --- frontend/src/style.css | 82 ++++++++++++----------------- frontend/src/views/LoginView.vue | 6 +-- frontend/src/views/MapView.vue | 20 +++---- frontend/src/views/TeamPickView.vue | 2 +- 4 files changed, 48 insertions(+), 62 deletions(-) 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() { >

REGRESS

-

+

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.

- diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue index 550cb4d..66afd37 100644 --- a/frontend/src/views/MapView.vue +++ b/frontend/src/views/MapView.vue @@ -230,20 +230,20 @@ watch(linkSourceId, redraw);
REGRESS - ▲ {{ orangeScore?.claimedPlaces ?? 0 }} nodes · - {{ orangeScore?.links ?? 0 }} links · - {{ orangeScore?.fields ?? 0 }} fields · + ▲ {{ orangeScore?.claimedPlaces ?? 0 }} nodes · + {{ orangeScore?.links ?? 0 }} links · + {{ orangeScore?.fields ?? 0 }} fields · {{ (orangeScore?.areaKm2 ?? 0).toFixed(2) }} km² - ▲ {{ greenScore?.claimedPlaces ?? 0 }} nodes · - {{ greenScore?.links ?? 0 }} links · - {{ greenScore?.fields ?? 0 }} fields · + ▲ {{ greenScore?.claimedPlaces ?? 0 }} nodes · + {{ greenScore?.links ?? 0 }} links · + {{ greenScore?.fields ?? 0 }} fields · {{ (greenScore?.areaKm2 ?? 0).toFixed(2) }} km²
- + {{ auth.displayName ?? auth.pubkey?.slice(0, 8) }}// {{ selectedPlace.name || `Node ${selectedPlace.id}` }} - +
-

{{ selectedPlace.address }}

+

{{ selectedPlace.address }}

STATUS: - UNCLAIMED + UNCLAIMED

CHOOSE YOUR FACTION

-

+

This choice is permanent — you can't switch teams later, so pick the side you're actually playing for.