💄 Restyle home page with blueprint background

- Simpler background with fewer layers, feels like a blueprint as a nod to the AJ file format
- Solid colors read better than translucent ones

Author: SnaveSutit

src/lib/components/footer.svelte

@@ -2,7 +2,7 @@
 	import MinecraftIcon from './minecraftIcon.svelte'
 </script>
 
-<section class="footer">
+<section class="footer minecraft-box">
 	<p>© 2026 Titus Evans. All rights reserved.</p>
 	<p>Animated Java is not affiliated with Mojang Studios.</p>
 	<p>
@@ -14,26 +14,32 @@
 
 <style>
 	.footer {
+		display: grid;
+		gap: 4px;
+		width: fit-content;
+		max-width: calc(100% - 32px);
+		box-sizing: border-box;
+		margin: 48px auto 16px;
+		padding: 12px 24px 14px;
+		align-self: end;
 		text-align: center;
 		font-size: 14px;
-		color: #ffffff55;
-		margin-top: 48px;
-		align-self: end;
-		margin-bottom: 16px;
+		color: var(--minecraft-text-subtle-color);
 	}
 
 	.footer p {
 		margin: 0;
 	}
 
 	.footer a {
-		color: #00acedaa;
+		color: #6ed8ff;
 		text-decoration: underline;
 		display: inline-flex;
 		align-items: center;
 	}
 
-	.footer a :global(div) {
-		margin-right: 2px;
+	.footer a :global(i) {
+		width: 20px;
+		margin-right: 4px;
 	}
 </style>

src/lib/components/introSection.svelte

@@ -16,7 +16,7 @@
 		max-width: 980px;
 		margin: 0 auto 28px;
 		padding: 28px;
-		background: linear-gradient(160deg, #00acedaa 0%, #00aced55 100%);
+		background: linear-gradient(160deg, #0a8cc4 0%, #076e9b 100%);
 	}
 
 	h2 {

src/routes/[[lang=lang]]/+page.svelte

@@ -40,11 +40,6 @@
 </svelte:head>
 
 <div class="home-page-shell">
-	<div class="bg-layer bg-base" aria-hidden="true"></div>
-	<div class="bg-layer bg-aurora bg-aurora-a" aria-hidden="true"></div>
-	<div class="bg-layer bg-aurora bg-aurora-b" aria-hidden="true"></div>
-	<div class="bg-layer bg-grid" aria-hidden="true"></div>
-
 	<div class="home-page-content">
 		{#if startTransition}
 			<div class="header" in:fade={{ duration: 1000 }}>
@@ -129,58 +124,21 @@
 		margin: 48px 0px;
 	}
 
+	/* Blueprint paper: minor lines every 32px, major lines every 128px */
 	.home-page-shell {
-		position: relative;
-		isolation: isolate;
 		padding: 24px 0 48px;
 		min-height: 100vh;
-		overflow: clip;
-	}
-
-	.home-page-content {
-		position: relative;
-		z-index: 1;
-	}
-
-	.bg-layer {
-		position: absolute;
-		inset: -8% -10%;
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	.bg-base {
-		background:
-			radial-gradient(circle at 15% 12%, #5fd8ff22 0%, #5fd8ff00 40%),
-			radial-gradient(circle at 85% 10%, #87f2d522 0%, #87f2d500 34%),
-			linear-gradient(160deg, #05111d 0%, #072338 45%, #123d5a 100%);
-	}
-
-	.bg-aurora {
-		mix-blend-mode: screen;
-		filter: blur(36px);
-		opacity: 0.55;
-	}
-
-	.bg-aurora-a {
-		background:
-			radial-gradient(46% 32% at 24% 30%, #2bc2ff88 0%, #2bc2ff00 72%),
-			radial-gradient(30% 28% at 74% 56%, #69ffd388 0%, #69ffd300 74%);
-	}
-
-	.bg-aurora-b {
-		background:
-			radial-gradient(38% 30% at 74% 24%, #74b8ff66 0%, #74b8ff00 72%),
-			radial-gradient(36% 26% at 20% 76%, #00ffe466 0%, #00ffe400 74%);
-	}
-
-	.bg-grid {
-		opacity: 0.2;
+		background-color: #0d3150;
 		background-image:
-			linear-gradient(#b8f5ff33 1px, transparent 1px),
-			linear-gradient(90deg, #b8f5ff33 1px, transparent 1px);
-		background-size: 32px 32px;
-		mask-image: radial-gradient(circle at center, #000 40%, transparent 92%);
+			linear-gradient(#7fd3ff33 2px, transparent 2px),
+			linear-gradient(90deg, #7fd3ff33 2px, transparent 2px),
+			linear-gradient(#7fd3ff17 1px, transparent 1px),
+			linear-gradient(90deg, #7fd3ff17 1px, transparent 1px);
+		background-size:
+			128px 128px,
+			128px 128px,
+			32px 32px,
+			32px 32px;
 	}
 
 	.title {