Cam hack splash page design

package.json

@@ -26,7 +26,8 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.14",
-    "@tailwindcss/vite": "^4.1.11"
+    "@tailwindcss/vite": "^4.1.11",
+    "three": "^0.182.0"
   },
   "prettier": {
     "plugins": [

src/app.css

@@ -1,7 +1,8 @@
 @import "tailwindcss";
 
 @theme {
-  --font-playpen: Ubuntu Mono, monospace;
+  --font-playpen: "Space Grotesk", Ubuntu Mono, monospace;
+  --font-mono: Ubuntu Mono, monospace;
 }
 
 html {
@@ -17,6 +18,18 @@ body {
   background-image: linear-gradient(120deg, #86e293 0%, #86e6c6 100%);
 }
 
+.splash-root {
+  --splash-bg0: #05080a;
+  --splash-bg1: #061412;
+  --splash-ink: #eafff6;
+  --splash-ink-dim: rgba(234, 255, 246, 0.78);
+  --splash-green: #46f48a;
+  --splash-mint: #86e6c6;
+  --splash-panel: rgba(7, 18, 16, 0.62);
+  --splash-panel-border: rgba(134, 230, 198, 0.18);
+  --splash-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+}
+
 a.theme-hyperlink {
   @apply text-emerald-600 hover:text-emerald-700;
 }

src/app.html

@@ -6,7 +6,7 @@
     <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=Ubuntu+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;700&display=swap"
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

src/lib/components/Hero.svelte

@@ -1,11 +1,36 @@
-<div class="mx-auto max-w-7xl max-sm:text-center">
+<script>
+  import { onMount } from "svelte";
+
+  let daysSince = $state(null);
+
+  const calcDaysSince = () => {
+    const start = new Date(2025, 10, 1, 0, 0, 0, 0);
+    const now = new Date();
+    return Math.floor((now.getTime() - start.getTime()) / 86400000);
+  };
+
+  onMount(() => {
+    daysSince = calcDaysSince();
+    const id = window.setInterval(() => {
+      daysSince = calcDaysSince();
+    }, 60 * 60 * 1000);
+    return () => window.clearInterval(id);
+  });
+</script>
+
+<div class="hero-shell mx-auto max-w-7xl max-sm:text-center">
   <img
     src="/cam-hack-logo-text.png"
     alt="Cam Hack Logo"
     class="mx-auto size-60 max-md:mb-4 sm:float-left sm:mr-8 sm:size-72 md:size-80"
   />
   <h1 class="sm:pt-12 sm:text-5xl">Cam&nbsp;Hack&nbsp;2025</h1>
   <h3 class="sm:text-3xl">1st&nbsp;&ndash;&nbsp;2nd&nbsp;November</h3>
+  {#if daysSince !== null}
+    <div class="days-since">
+      <span class="days-since-number">{daysSince}d</span>
+    </div>
+  {/if}
   <div class="mb-4 flex flex-wrap gap-4 max-sm:justify-center">
     <a
       target="_blank"
@@ -25,3 +50,47 @@
   <p class="text-xl">What can you make in 2 days?</p>
   <p class="clear-left"></p>
 </div>
+
+<style>
+  .hero-shell {
+    position: relative;
+  }
+
+  .days-since {
+    margin: 10px 0 18px;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+  }
+
+  .days-since-number {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1, "ss01" 1;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    padding: 10px 14px;
+    border-radius: 16px;
+    background: rgba(70, 244, 138, 0.14);
+    border: 1px solid rgba(134, 230, 198, 0.22);
+    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
+    color: rgba(234, 255, 246, 0.92);
+    text-shadow: 0 0 24px rgba(70, 244, 138, 0.35);
+    transform: translateZ(0);
+    animation: shimmer 3.2s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      filter: saturate(1) brightness(1);
+      transform: translateZ(0) scale(1);
+    }
+    50% {
+      filter: saturate(1.2) brightness(1.08);
+      transform: translateZ(0) scale(1.03);
+    }
+    100% {
+      filter: saturate(1) brightness(1);
+      transform: translateZ(0) scale(1);
+    }
+  }
+</style>