Add JetBrains Mono font and adjust styling of the schedule.

src/lib/components/ui/TrainService.svelte

@@ -6,7 +6,7 @@
 	import { formatUkTime, calculateDelay } from '$lib/utils/time';
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
-	import { IconCircleArrowDownFilled } from '@tabler/icons-svelte';
+	import { IconChevronDownFilled } from '@tabler/icons-svelte';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);
 	let loadingDetails = $state(false);
@@ -68,7 +68,7 @@
 				{service.dt}
 			</div>
 			<div class="arrow" class:expanded={isExpanded}>
-				<IconCircleArrowDownFilled color={"var(--color-title)"} size={25} />
+				<IconChevronDownFilled color={"var(--color-title)"} size={25} />
 			</div>
 		</div>
 	</button>
@@ -117,17 +117,17 @@
 							<th>Location</th>
 							<th>Plat</th>
 							<th>Sch</th>
-							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th><span class="est">Est</span>/Act</th>
 							<th>Sch</th>
-							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th><span class="est">Est</span>/Act</th>
 							<th></th>
 						</tr>
 					</thead>
 					<tbody>
 						{#each details.locations as loc}
 							<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
-								<td class="tpl-cell">{loc.t}</td>
+								<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>{loc.t}</td>
-								<td class="plat-cell">{loc.p}</td>
+								<td class="plat-cell" class:plat-change={loc.pc}>{loc.p}</td>
 								{#if loc.r == 'PASS'}
 									<td class="time-cell" colspan="2">Pass</td>
 									<td class="time-cell">{formatUkTime(loc.wtp)}</td>
@@ -158,15 +158,24 @@
 </div>
 
 <style>
+    /* 
+		Main container
+	*/
     .train-service {
         background-color: var(--color-accent);
         width: 100%;
-		border-radius: 4px;
+        max-width: 460px;
+        border-radius: 12px;
         box-shadow: var(--shadow-std);
         overflow: hidden;
         font-family: 'URW Gothic', sans-serif;
         transition: 0.2s all;
         filter: brightness(1.1);
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .train-service:active {
+        filter: brightness(1.2);
     }
     
     @media (hover: hover) {
@@ -175,12 +184,15 @@
         }
     }
 
+    /* 
+		Summary Header
+	*/
     .summary {
         position: relative;
         display: flex;
         align-items: center;
         width: 100%;
-		padding: 0.75rem;
+        padding: 0 1rem;
         min-height: 48px;
         border: none;
         background: transparent;
@@ -189,6 +201,164 @@
         gap: 0.5rem;
     }
 
+    .operator-summary {
+        flex-shrink: 0;
+    }
+
+    .main-text-summary {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .time-summary {
+        font-size: 0.75rem;
+        font-weight: 700;
+        color: var(--color-brand);
+    }
+
+    .location-summary {
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 0.75rem;
+        letter-spacing: 0.02em;
+        color: var(--color-title);
+    }
+
+    .to-summary {
+        font-size: 0.8rem;
+        font-style: oblique;
+        text-transform: lowercase;
+    }
+
+    .arrow {
+        padding: 0;
+        margin: 0 0 0 auto;
+        height: 25px;
+        transition: all 0.9s;
+    }
+
+    .expanded {
+        transform: rotateX(180deg);
+    }
+
+    .can-all {
+        color: red;
+    }
+
+    /*
+		Box Extention
+	*/
+    .box-ext {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .detail-head {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        text-align: center;
+        width: 100%;
+    }
+
+    .cancel-reason,
+    .delay-reason {
+        display: block;
+        padding: 4px 8px;
+        width: 95%;
+        font-size: 1rem;
+        font-weight: 500;
+        animation: cancel-pulse 2s ease-in-out infinite;
+    }
+
+    .cancel-reason {
+        color: var(--cancel-red);
+    }
+
+    .delay-reason {
+        color: rgb(255, 119, 0);
+    }
+
+    /*
+		Schedule Table
+	*/
+    .schedule-table-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .schedule-table {
+        width: 95%;
+		font-family: 'URW Gothic', 'Inter', sans-serif;
+		font-variant-numeric: tabular-nums;
+        padding-bottom: 1rem;
+        font-size: 0.8rem;
+		letter-spacing: -0.02ch;
+        transition: all 0.5s;
+		font-weight: 500;
+    }
+
+    th,
+    td {
+        text-align: center;
+    }
+
+    .tpl-cell {
+        color: var(--color-title);
+        text-align: left;
+    }
+
+	.tpl-stop {
+		color: var(--location-yellow);
+	}
+
+	.plat-change {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+
+    .pass-loc {
+        color: var(--color-title);
+		font-style: oblique;
+    }
+
+
+    .can-loc {
+        text-decoration: line-through;
+    }
+
+    .est {
+        color: var(--location-yellow);
+        opacity: 0.5;
+		font-style: italic;
+    }
+
+    .act {
+        color: white;
+    }
+
+    .delay-late {
+        color: var(--delay-orange);
+		font-weight: 600;
+		animation: pulse 2s ease-out infinite;
+    }
+
+    .delay-early {
+        color: var(--early-blue);
+		font-weight: 600;
+		animation: pulse 2s ease-out infinite;
+    }
+
+    /* 
+		Loading State
+	*/
     .loading-state {
         position: absolute;
         top: 0;
@@ -216,157 +386,44 @@
         z-index: 3;
     }
 
-	@keyframes load-spin {
+    /*
-		to {
+		Responsivity
-			transform: rotate(360deg);
+	*/
+    @media (min-width: 330px) {
+        .time-summary,
+        .location-summary {
+            font-size: 0.9rem;
         }
     }
 
-	.operator-summary {
+    @media (min-width: 340px) {
-		flex-shrink: 0;
+        .schedule-table {
-	}
+            font-size: 0.9rem;
-
+        }
-	.main-text-summary {
-		display: flex;
-		flex-grow: 1;
-		align-items: center;
-		gap: 0.5rem;
     }
 
+    @media (min-width: 360px) {
         .time-summary {
             font-size: 1.1rem;
-		font-weight: 700;
-		color: var(--color-brand);
         }
-
         .location-summary {
-		text-transform: uppercase;
+            font-size: 1rem;
-		font-weight: 500;
-		font-size: 1.1rem;
-		letter-spacing: 0.02em;
-		color: var(--color-title);
         }
-
-	.to-summary {
-		font-size: 0.8rem;
-		font-style: oblique;
-		text-transform: lowercase;
-	}
-
-	.can-all {
-		color: red;
-	}
-
-	.arrow {
-		padding: 0;
-		margin: 0;
-		margin-left: auto;
-		height: 25px;
-		transition: all 0.3s;
-	}
-
-	.expanded {
-		transform: rotateX(180deg);
-	}
-
-	.box-ext {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-	}
-
-	.detail-head {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
-		text-align: center;
-		width: 100%;
-	}
-
-	.cancel-reason,
-	.delay-reason {
-		display: block;
-		padding: 4px 8px;
-		width: 95%;
-	}
-
-	.cancel-reason {
-		color: rgb(255, 0, 0);
-		font-weight: 500;
-		animation: cancel-pulse 2s ease-in-out infinite;
-	}
-
-	.delay-reason {
-		color: rgb(255, 119, 0);
-		font-weight: 500;
-		animation: cancel-pulse 2s ease-in-out infinite;
-	}
-
-	@keyframes cancel-pulse {
-		0% {
-			opacity: 1;
-			text-shadow: 0 0 0px rgb(255, 0, 0);
-		}
-		50% {
-			opacity: 0.8;
-			text-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
-		}
-		100% {
-			opacity: 1;
-			text-shadow: 0 0 0px rgb(255, 0, 0);
-		}
-	}
-
-	.schedule-table-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-	}
-
         .schedule-table {
-		width: 95%;
+            font-size: 0.99rem;
-		max-width: 375px;
+        }
-		padding-bottom: 1rem;
     } 
 
-	th,
+    @media (min-width: 420px) {
-	td {
+        .schedule-table {
-		text-align: center;
+            font-size: 1.1rem;
+        }
     } 
 
-	.tpl-cell {
+    /*
-		color: yellow;
+		KEYFRAMES
-		text-align: left;
+	*/
-	}
+    @keyframes load-spin {
-
+        to { transform: rotate(360deg); }
-	.pass-loc {
-		color: var(--color-title);
-		opacity: 0.75;
-		font-style: oblique;
-	}
-
-	.can-loc {
-		text-decoration: line-through;
-	}
-
-	.est {
-		color: yellow;
-		opacity: 0.5;
-	}
-
-	.act {
-		color: white;
-	}
-
-	.delay-late {
-		color: red;
-	}
-
-	.delay-early {
-		color: blue;
     }
 </style>

src/lib/components/ui/cards/BaseCard.svelte

@@ -52,7 +52,7 @@
 	.card {
 		background: var(--color-accent);
 		position: relative;
-		border-radius: 20px;
+		border-radius: 12px;
 		overflow: visible;
 		width: 95%;
 		max-width: 600px;

src/lib/global.css

@@ -44,6 +44,91 @@
 	font-display: swap;
 }
 
+/* 100: Thin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2');
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 200: ExtraLight */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 300: Light */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 400: Regular / Italic */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 500: Medium */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 600: SemiBold */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 700: Bold */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 800: ExtraBold */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
 	/* Brand Colours */
 	--color-brand: #4fd1d1;
@@ -58,8 +143,34 @@
 	--shadow-small: 0 4px 6px var(--color-shadow);
 	--shadow-up: 0 -4px 12px var(--color-shadow);
 	--shadow-right: 4px 0 12px var(--color-shadow);
+
+	/* Functional Colours */
+	--location-yellow: #edff22;
+	--delay-orange: #ff914d;
+	--cancel-red: #c60000;
+	--early-blue: #5ec1ff;
 }
 
+/* Pulse Animations */
+@keyframes pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.3;
+	}
+}
+
+@keyframes fast-pulse {
+	0%, 50%, 100% {
+		opacity: 1;
+	}
+	25%, 75% {
+		opacity: 0;
+	}
+}
+
+
 body {
 	margin: 0;
 	padding: 0;