trips) tune dashboard map offsets

Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Reviewed-on: #57

e2e/dashboard.test.ts

@@ -32,6 +32,7 @@ test.beforeEach(async ({ context }) => {
 });
 
 test('dashboard surfaces map stops, stats, and trip status', async ({ page }) => {
+	const screenshotPath = test.info().outputPath('dashboard.png');
 	const suffix = uniqueSuffix();
 	const pastStart = formatDate(-18);
 	const pastEnd = formatDate(-15);
@@ -72,4 +73,6 @@ test('dashboard surfaces map stops, stats, and trip status', async ({ page }) =>
 
 	await expect(page.getByTestId('stat-past-trips')).toHaveText('1');
 	await expect(page.getByTestId('stat-countries')).toHaveText('1');
+
+	await page.screenshot({ path: screenshotPath, fullPage: true });
 });

src/routes/(protected)/dashboard/+page.svelte

@@ -5,10 +5,12 @@
 	let { data } = $props();
 	const dashboard = $derived(data.dashboard) as DashboardData;
 
+	const mapLongitudeOffset = 18;
+	const mapLatitudeOffset = 4;
 	const markers = $derived(
 		dashboard.mapStops.map((stop: DashboardMapStop, index: number) => {
-			const x = ((stop.lon + 180) / 360) * 100;
-			const y = ((90 - stop.lat) / 180) * 100;
+			const x = ((stop.lon + 180 - mapLongitudeOffset) / 360) * 100;
+			const y = ((90 - (stop.lat + mapLatitudeOffset)) / 180) * 100;
 			return {
 				...stop,
 				id: `${stop.tripId}-${index}`,
@@ -79,26 +81,16 @@
 
 <svelte:head>
 	<title>Dashboard — Trips</title>
-	<link rel="preconnect" href="https://fonts.googleapis.com" />
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-	<link
-		href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap"
-		rel="stylesheet"
-	/>
 </svelte:head>
 
 <div class="dashboard-shell space-y-8">
-	<header class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-amber-50 via-white to-sky-50 p-6">
-		<div class="absolute -right-10 top-6 h-32 w-32 rounded-full bg-sky-200/40 blur-3xl"></div>
-		<div class="absolute -left-12 bottom-6 h-40 w-40 rounded-full bg-amber-200/40 blur-3xl"></div>
-		<div class="relative">
-			<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
-			<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
-			<p class="mt-2 text-sm text-slate-600">
-				Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on
-				your travel story.
-			</p>
-		</div>
+	<header class="rounded-3xl bg-white p-6 shadow-sm">
+		<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
+		<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
+		<p class="mt-2 text-sm text-slate-600">
+			Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on your
+			travel story.
+		</p>
 	</header>
 
 	<section class="grid gap-6 lg:grid-cols-[1.6fr,1fr]">
@@ -106,23 +98,15 @@
 			class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white"
 			data-testid="trip-map"
 		>
-			<div class="absolute inset-0 map-grid opacity-30"></div>
-			<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/20 blur-3xl"></div>
-			<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/20 blur-3xl"></div>
-			<svg
-				class="absolute inset-0 h-full w-full opacity-70"
-				viewBox="0 0 1000 500"
-				preserveAspectRatio="xMidYMid slice"
+			<div class="absolute inset-0 map-grid opacity-15"></div>
+			<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/15 blur-3xl"></div>
+			<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/15 blur-3xl"></div>
+			<img
+				class="map-base absolute inset-0 h-full w-full object-cover"
+				src="{base}/world-map.svg"
+				alt=""
 				aria-hidden="true"
-			>
-				<rect width="1000" height="500" fill="none" />
-				<polygon class="map-land" points="110,140 220,90 330,120 360,200 290,260 170,240" />
-				<polygon class="map-land" points="260,260 330,260 370,320 340,430 260,400 230,320" />
-				<polygon class="map-land" points="420,120 520,110 560,150 520,190 450,170" />
-				<polygon class="map-land" points="450,200 560,210 610,320 550,420 470,340" />
-				<polygon class="map-land" points="580,120 760,110 880,200 780,270 620,220" />
-				<polygon class="map-land" points="740,320 830,330 860,400 800,440 720,380" />
-			</svg>
+			/>
 			<div class="relative">
 				<div class="flex items-start justify-between gap-4">
 					<div>
@@ -325,24 +309,15 @@
 </div>
 
 <style>
-	.dashboard-shell {
-		font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
-	}
-
-	.display {
-		font-family: 'Fraunces', 'Times New Roman', serif;
-	}
-
 	.map-grid {
 		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
 			linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
 		background-size: 48px 48px;
 	}
 
-	.map-land {
-		fill: rgba(148, 163, 184, 0.25);
-		stroke: rgba(148, 163, 184, 0.35);
-		stroke-width: 2;
+	.map-base {
+		opacity: 0.45;
+		filter: invert(1) grayscale(1);
 	}
 
 	.map-marker {