Restore Regional Observations map

server/styles/scss/_radar.scss

@@ -157,6 +157,52 @@
 			border: 2px solid #000;
 			border-radius: 50%;
 		}
+
+		.nearby-weather-marker {
+			background: transparent;
+			border: 0;
+
+			.nearby-weather-marker-inner {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				min-width: 72px;
+				padding: 2px 4px;
+				background: rgba(18, 34, 61, 0.88);
+				border: 1px solid #000;
+				box-shadow: 1px 1px 0 #000;
+				color: #fff;
+				text-align: center;
+			}
+
+			.city {
+				font-family: 'Star4000 Small';
+				font-size: 11pt;
+				line-height: 1;
+				white-space: nowrap;
+				margin-bottom: 1px;
+				text-shadow: 1px 1px 0 #000;
+			}
+
+			.details {
+				display: flex;
+				align-items: center;
+				gap: 2px;
+			}
+
+			.temp {
+				font-family: 'Star4000';
+				font-size: 18pt;
+				line-height: 1;
+				color: #ff0;
+				text-shadow: 1px 1px 0 #000;
+			}
+
+			img {
+				width: auto;
+				height: 20px;
+			}
+		}
 	}
 }
 

server/styles/scss/_regional-forecast.scss

@@ -6,48 +6,91 @@
 }
 
 .weather-display .main.regional-forecast {
-
-
 	position: relative;
+	overflow: hidden;
+	z-index: 0;
 
 	.map {
 		position: absolute;
-		transform-origin: 0 0;
+		inset: 0;
 	}
 
-	.location {
-		position: absolute;
-		width: 140px;
-		margin-left: -40px;
-		margin-top: -35px;
+	.leaflet-map {
+		height: 100%;
+		width: 100%;
+		background: #061f3e;
+	}
 
-		>div {
-			position: absolute;
-			@include u.text-shadow();
-		}
+	.leaflet-container {
+		background: #061f3e;
+		font-family: inherit;
+	}
 
-		.icon {
-			top: 26px;
-			left: 44px;
+	.radar-base-layer,
+	.radar-base-layer .leaflet-tile {
+		filter: grayscale(0.35) brightness(0.58) contrast(1.1) saturate(0.2);
+	}
 
-			img {
-				max-height: 32px;
-			}
-		}
+	.radar-boundary-layer,
+	.radar-boundary-layer .leaflet-tile {
+		filter: grayscale(0.8) brightness(0.7) contrast(1.3) saturate(0.1);
+	}
 
-		.temp {
-			font-family: 'Star4000 Large';
-			font-size: 28px;
-			padding-top: 2px;
-			color: c.$title-color;
-			top: 28px;
-			text-align: right;
-			width: 40px;
+	.leaflet-control-container,
+	.leaflet-control-attribution,
+	.leaflet-control-zoom {
+		display: none;
+	}
+
+	.location-marker {
+		background: #ff0;
+		border: 2px solid #000;
+		border-radius: 50%;
+	}
+
+	.nearby-weather-marker {
+		background: transparent;
+		border: 0;
+
+		.nearby-weather-marker-inner {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			min-width: 72px;
+			padding: 2px 4px;
+			background: rgba(18, 34, 61, 0.88);
+			border: 1px solid #000;
+			box-shadow: 1px 1px 0 #000;
+			color: #fff;
+			text-align: center;
 		}
 
 		.city {
-			font-family: Star4000;
-			font-size: 20px;
+			font-family: 'Star4000 Small';
+			font-size: 11pt;
+			line-height: 1;
+			white-space: nowrap;
+			margin-bottom: 1px;
+			@include u.text-shadow();
+		}
+
+		.details {
+			display: flex;
+			align-items: center;
+			gap: 2px;
+		}
+
+		.temp {
+			font-family: 'Star4000';
+			font-size: 18pt;
+			line-height: 1;
+			color: c.$title-color;
+			@include u.text-shadow();
+		}
+
+		img {
+			width: auto;
+			height: 20px;
 		}
 	}
-}
+}

server/styles/scss/_weather-display.scss

@@ -23,6 +23,8 @@
 		width: 640px;
 		height: 60px;
 		padding-top: 30px;
+		position: relative;
+		z-index: 20;
 
 		.title {
 			color: c.$title-color;
@@ -172,4 +174,4 @@
 	.scroll-container {
 		margin-left: 107px;
 	}
-}
+}