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,215 +158,272 @@
 </div>
 
 <style>
-	.train-service {
+    /* 
-		background-color: var(--color-accent);
+		Main container
-		width: 100%;
+	*/
-		border-radius: 4px;
+    .train-service {
-		box-shadow: var(--shadow-std);
+        background-color: var(--color-accent);
-		overflow: hidden;
+        width: 100%;
-		font-family: 'URW Gothic', sans-serif;
+        max-width: 460px;
-		transition: 0.2s all;
+        border-radius: 12px;
-		filter: brightness(1.1);
+        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;
+    }
 
-	@media (hover: hover) {
+    .train-service:active {
-		.train-service:hover {
+        filter: brightness(1.2);
-			filter: brightness(1.2);
+    }
-		}
-	}
     
-	.summary {
+    @media (hover: hover) {
-		position: relative;
+        .train-service:hover {
-		display: flex;
+            filter: brightness(1.2);
-		align-items: center;
+        }
-		width: 100%;
+    }
-		padding: 0.75rem;
-		min-height: 48px;
-		border: none;
-		background: transparent;
-		cursor: pointer;
-		text-align: left;
-		gap: 0.5rem;
-	}
 
-	.loading-state {
+    /* 
-		position: absolute;
+		Summary Header
-		top: 0;
+	*/
-		left: 0;
+    .summary {
-		z-index: 2;
+        position: relative;
-		display: flex;
+        display: flex;
-		align-items: center;
+        align-items: center;
-		justify-content: center;
+        width: 100%;
-		background-color: rgba(0, 0, 0, 0.2);
+        padding: 0 1rem;
-		backdrop-filter: blur(5px);
+        min-height: 48px;
-		width: 100%;
+        border: none;
-		height: 100%;
+        background: transparent;
-		font-family: 'URW Gothic', sans-serif;
+        cursor: pointer;
-		font-size: 1rem;
+        text-align: left;
-		color: var(--color-title);
+        gap: 0.5rem;
-	}
+    }
 
-	.loading-spinner {
+    .operator-summary {
-		width: 16px;
+        flex-shrink: 0;
-		height: 16px;
+    }
-		border: 2px solid rgba(0, 0, 0, 0.1);
-		border-top-color: #fff;
-		border-radius: 50%;
-		animation: load-spin 0.8s linear infinite;
-		z-index: 3;
-	}
 
-	@keyframes load-spin {
+    .main-text-summary {
-		to {
+        display: flex;
-			transform: rotate(360deg);
+        flex-grow: 1;
-		}
+        align-items: center;
-	}
+        gap: 0.5rem;
+    }
 
-	.operator-summary {
+    .time-summary {
-		flex-shrink: 0;
+        font-size: 0.75rem;
-	}
+        font-weight: 700;
+        color: var(--color-brand);
+    }
 
-	.main-text-summary {
+    .location-summary {
-		display: flex;
+        text-transform: uppercase;
-		flex-grow: 1;
+        font-weight: 500;
-		align-items: center;
+        font-size: 0.75rem;
-		gap: 0.5rem;
+        letter-spacing: 0.02em;
-	}
+        color: var(--color-title);
+    }
 
-	.time-summary {
+    .to-summary {
-		font-size: 1.1rem;
+        font-size: 0.8rem;
-		font-weight: 700;
+        font-style: oblique;
-		color: var(--color-brand);
+        text-transform: lowercase;
-	}
+    }
 
-	.location-summary {
+    .arrow {
-		text-transform: uppercase;
+        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;
-		font-size: 1.1rem;
+    }
-		letter-spacing: 0.02em;
+
-		color: var(--color-title);
+    th,
+    td {
+        text-align: center;
+    }
+
+    .tpl-cell {
+        color: var(--color-title);
+        text-align: left;
+    }
+
+	.tpl-stop {
+		color: var(--location-yellow);
 	}
 
-	.to-summary {
+	.plat-change {
-		font-size: 0.8rem;
+		animation: fast-pulse 2s ease-out infinite;
+	}
+
+    .pass-loc {
+        color: var(--color-title);
 		font-style: oblique;
-		text-transform: lowercase;
+    }
-	}
 
-	.can-all {
-		color: red;
-	}
 
-	.arrow {
+    .can-loc {
-		padding: 0;
+        text-decoration: line-through;
-		margin: 0;
+    }
-		margin-left: auto;
-		height: 25px;
-		transition: all 0.3s;
-	}
 
-	.expanded {
+    .est {
-		transform: rotateX(180deg);
+        color: var(--location-yellow);
-	}
+        opacity: 0.5;
+		font-style: italic;
+    }
 
-	.box-ext {
+    .act {
-		display: flex;
+        color: white;
-		flex-direction: column;
+    }
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-	}
 
-	.detail-head {
+    .delay-late {
-		display: flex;
+        color: var(--delay-orange);
-		flex-direction: column;
+		font-weight: 600;
-		align-items: center;
+		animation: pulse 2s ease-out infinite;
-		gap: 0.5rem;
+    }
-		text-align: center;
-		width: 100%;
-	}
 
-	.cancel-reason,
+    .delay-early {
-	.delay-reason {
+        color: var(--early-blue);
-		display: block;
+		font-weight: 600;
-		padding: 4px 8px;
+		animation: pulse 2s ease-out infinite;
-		width: 95%;
+    }
-	}
 
-	.cancel-reason {
+    /* 
-		color: rgb(255, 0, 0);
+		Loading State
-		font-weight: 500;
+	*/
-		animation: cancel-pulse 2s ease-in-out infinite;
+    .loading-state {
-	}
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(5px);
+        width: 100%;
+        height: 100%;
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1rem;
+        color: var(--color-title);
+    }
 
-	.delay-reason {
+    .loading-spinner {
-		color: rgb(255, 119, 0);
+        width: 16px;
-		font-weight: 500;
+        height: 16px;
-		animation: cancel-pulse 2s ease-in-out infinite;
+        border: 2px solid rgba(0, 0, 0, 0.1);
-	}
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: load-spin 0.8s linear infinite;
+        z-index: 3;
+    }
 
-	@keyframes cancel-pulse {
+    /*
-		0% {
+		Responsivity
-			opacity: 1;
+	*/
-			text-shadow: 0 0 0px rgb(255, 0, 0);
+    @media (min-width: 330px) {
-		}
+        .time-summary,
-		50% {
+        .location-summary {
-			opacity: 0.8;
+            font-size: 0.9rem;
-			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 {
+    @media (min-width: 340px) {
-		display: flex;
+        .schedule-table {
-		justify-content: center;
+            font-size: 0.9rem;
-		align-items: center;
+        }
-		width: 100%;
+    }
-	}
 
-	.schedule-table {
+    @media (min-width: 360px) {
-		width: 95%;
+        .time-summary {
-		max-width: 375px;
+            font-size: 1.1rem;
-		padding-bottom: 1rem;
+        }
-	}
+        .location-summary {
+            font-size: 1rem;
+        }
+        .schedule-table {
+            font-size: 0.99rem;
+        }
+    } 
 
-	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;