Bring staiton info modal into style with rest of site

src/lib/assets/global.css

@@ -16,6 +16,18 @@
 	font-style: normal;
 }
 
-[id] {
+:root {
-	scroll-margin-top: 100px;
+	/* Brand Colours */
+	--color-brand: #4fd1d1;
+	--color-brand-light: #5af5f5;
+	--color-accent: #3c6f79;
+	--color-accent-light: #5094a2;
+	--color-title: #ebebeb;
+	--color-bg-light: #404c55;
+	--color-bg-dark: #2b343c;
+
+	/* Shadows */
+	--color-shadow: hsla(210, 20%, 5%, 0.35);
+	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-up: 0 -4px 12px var(--color-shadow);
 }

src/lib/components/StationInfo.svelte

@@ -103,9 +103,8 @@
 									<span class="platform-direction">({direction})</span>
 								{/if}
 							</div>
-<span class="length-tag">{platform.platformLength}m</span>
+							<span class="length-tag">{platform.platformLength}m</span>
 							<div class="platform-meta">
-								
 								{#if platform.stepFree}
 									<span class="icon-tag" title="Step-free access"
 										><IconDisabled color="#2563eb" /></span
@@ -185,7 +184,7 @@
 	}
 
 	header {
-		background: #f8fafc;
+		background: var(--color-accent);
 		padding: 1rem 1.5rem;
 		margin-bottom: 50px;
 		border-bottom: 1px solid #e2e8f0;
@@ -202,8 +201,8 @@
 	}
 
 	.crs-badge {
-		background: #1e293b;
+		background: var(--color-bg-light);
-		color: white;
+		color: var(--color-title);
 		font-family: monospace;
 		font-weight: bold;
 		padding: 0.2rem 0.5rem;
@@ -214,11 +213,15 @@
 	h2 {
 		margin: 0;
 		font-size: 1.1rem;
-		color: #0f172a;
+		color: var(--color-title);
 	}
 
 	.close-icon {
-		background: #ef4444;
+		background: var(--color-brand);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
 		border-radius: 50%;
 		width: 32px;
 		height: 32px;
@@ -226,14 +229,14 @@
 		border: none;
 		font-size: 1.5rem;
 		cursor: pointer;
-		color: #ebebeb;
+		color: var(--color-bg-light);
 		transition: all 0.2s;
 	}
 
 	.close-icon:hover {
-		background: #dc2626;
+		background: var(--color-brand-light);
 		transform: scale(1.05);
-		transform: rotate(180deg);
+		transform: rotate(90deg);
 	}
 	.content {
 		padding: 1.5rem;
@@ -308,7 +311,8 @@
 	.length-tag {
 		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		font-size: 0.85rem;
-		background: #f1f5f9;
+		background: var(--color-bg-light);
+		color: var(--color-title);
 		padding: 0.25rem 0.6rem;
 		border-radius: 4px;
 		border: 1px solid #e2e8f0;
@@ -362,7 +366,7 @@
 
 	.coach-body {
 		height: 20px;
-        background: #334155;
+		background: var(--color-accent-light);
 		color: #f8fafc;
 		font-size: 0.65rem;
 		font-weight: 700;
@@ -375,7 +379,7 @@
 	.coach-unit:first-child .coach-body {
 		border-top-left-radius: 8px;
 		border-bottom-left-radius: 8px;
-        background: #0f172a;
+		background: var(--color-accent);
 	}
 
 	.door-status {
@@ -394,6 +398,6 @@
 
 	.dot.open {
 		background: #22c55e;
-        box-shadow: 0 0 8px #22c55e;
+		box-shadow: 0 0 5px #22c55e;
 	}
 </style>

static/stations/nby.yaml

@@ -11,11 +11,11 @@ platforms:
     stepFree: true
     doorPattern:
       - kind: IET5
-        doors: [1,10]
+        doors: [1, 10]
       - kind: IET9
-        doors: [1,18]
+        doors: [1, 18]
       - kind: IET10
-        doors: [1,20]
+        doors: [1, 20]
       - kind: DMU
         max-car: 12
   - platformId: 1Up
@@ -26,11 +26,11 @@ platforms:
     stepFree: true
     doorPattern:
       - kind: IET5
-        doors: [1,10]
+        doors: [1, 10]
       - kind: IET9
-        doors: [1,18]
+        doors: [1, 18]
       - kind: IET10
-        doors: [1,20]
+        doors: [1, 20]
       - kind: DMU
         max-car: 12
   - platformId: 2Dn
@@ -41,11 +41,11 @@ platforms:
     stepFree: true
     doorPattern:
       - kind: IET5
-        doors: [1,10]
+        doors: [1, 10]
       - kind: IET9
-        doors: [1,18]
+        doors: [1, 18]
       - kind: IET10
-        doors: [1,20]
+        doors: [1, 20]
       - kind: DMU
         max-car: 14
   - platformId: 2Up
@@ -56,11 +56,11 @@ platforms:
     stepFree: true
     doorPattern:
       - kind: IET5
-        doors: [1,10]
+        doors: [1, 10]
       - kind: IET9
-        doors: [1,18]
+        doors: [1, 18]
       - kind: IET10
-        doors: [1,20]
+        doors: [1, 20]
       - kind: DMU
         max-car: 14
   - platformId: 3
@@ -71,10 +71,10 @@ platforms:
     stepFree: true
     doorPattern:
       - kind: IET5
-        doors: [1,10]
+        doors: [1, 10]
       - kind: IET9
-        doors: [0,0]
+        doors: [0, 0]
       - kind: IET10
-        doors: [0,0]
+        doors: [0, 0]
       - kind: DMU
         max-car: 5