smoother crossfade with pinned nav, proper footer

src/app.css

@@ -99,18 +99,25 @@
 	box-sizing: border-box;
 }
 
-/* page transitions: quick cross-fade for content; the map morphs separately */
+/* page transitions: gentle simultaneous cross-fade for content;
+   the map morphs separately; topbar and footer are pinned and never fade */
 @media not (prefers-reduced-motion: reduce) {
 	::view-transition-old(root) {
-		animation: 110ms ease both vt-fade-out;
+		animation: 160ms ease both vt-fade-out;
 	}
 	::view-transition-new(root) {
-		animation: 220ms ease 40ms both vt-fade-in;
+		animation: 160ms ease both vt-fade-in;
 	}
 	::view-transition-group(streba-map) {
 		animation-duration: 320ms;
 		animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
 	}
+	::view-transition-old(topbar),
+	::view-transition-new(topbar),
+	::view-transition-old(site-footer),
+	::view-transition-new(site-footer) {
+		animation: none;
+	}
 }
 @keyframes vt-fade-out {
 	to {
@@ -131,6 +138,9 @@ body {
 	font-size: 16px;
 	line-height: 1.5;
 	-webkit-font-smoothing: antialiased;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 
 h1 {

src/routes/+layout.svelte

@@ -158,7 +158,26 @@
 	</div>
 </div>
 
-<footer class="footer">Streba - the GPX analyser</footer>
+<footer class="footer">
+	<div class="footer-inner">
+		<div class="footer-brand">
+			<span class="footer-name">Streba</span>
+			<span class="footer-tag">The GPX analyser</span>
+		</div>
+		{#if data.user}
+			<nav class="footer-links" aria-label="Footer">
+				{#each links as link (link.href)}
+					<a href={link.href}>{link.label}</a>
+				{/each}
+			</nav>
+		{/if}
+	</div>
+	<div class="footer-inner footer-credits">
+		© {new Date().getFullYear()} Streba · Map style self-hosted · Terrain
+		<a href="https://mapterhorn.com">© Mapterhorn</a> · Peak data
+		<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>
+	</div>
+</footer>
 
 <style>
 	.topbar {
@@ -168,6 +187,7 @@
 		background: color-mix(in srgb, var(--surface-1) 82%, transparent);
 		backdrop-filter: blur(12px);
 		border-bottom: 1px solid var(--border);
+		view-transition-name: topbar;
 	}
 	.topbar-inner {
 		max-width: 1080px;
@@ -284,16 +304,59 @@
 	}
 	main {
 		max-width: 1080px;
+		width: 100%;
 		margin: 0 auto;
 		padding: 2rem 1.25rem 4rem;
+		flex: 1;
 	}
 	.footer {
+		border-top: 1px solid var(--border);
+		background: var(--surface-1);
+		view-transition-name: site-footer;
+	}
+	.footer-inner {
 		max-width: 1080px;
 		margin: 0 auto;
-		padding: 1.5rem 1.25rem 2.5rem;
+		padding: 1.5rem 1.25rem 0;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+	.footer-brand {
+		display: flex;
+		align-items: baseline;
+		gap: 0.6rem;
+	}
+	.footer-name {
+		font-weight: 700;
+		letter-spacing: -0.01em;
+	}
+	.footer-tag {
+		color: var(--text-muted);
+		font-size: 0.85rem;
+	}
+	.footer-links {
+		display: flex;
+		gap: 1rem;
+	}
+	.footer-links a {
+		color: var(--text-secondary);
+		font-size: 0.85rem;
+		text-decoration: none;
+	}
+	.footer-links a:hover {
+		color: var(--text-primary);
+	}
+	.footer-credits {
+		padding-bottom: 1.75rem;
+		padding-top: 0.75rem;
+		color: var(--text-muted);
+		font-size: 0.78rem;
+	}
+	.footer-credits a {
 		color: var(--text-muted);
-		font-size: 0.8rem;
-		border-top: 1px solid var(--border);
 	}
 	/* parking spot for the map while no page shows it: kept alive, out of sight */
 	.map-home {