style: convert to high contrast white aesthetic

- Convert core CSS variables to white background and dark text
- Update Three.js scene materials to black wireframes and particles
- Fix transparent hover states and contrast issues across all sections
- Adjust z-indices and opacity levels for legibility on white
- Incorporate ProductHero inside 404 page

Author: ccross2

src/app.css

@@ -1,51 +1,46 @@
 @font-face {
-  font-family: 'Geist Mono';
+  font-family: 'Geist Mono Variable';
   src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
   font-weight: 100 900;
-  font-style: normal;
   font-display: swap;
   font-style: normal;
 }
 
-/* ═══════════════════════════════════════════
-   DESIGN TOKENS
-   ═══════════════════════════════════════════ */
-
 :root {
-  /* Colors - Pure Monochrome */
-  --bg: #000000;
-  --surface: rgba(25, 25, 25, 0.4);
-  --surface-2: rgba(40, 40, 40, 0.5);
-  --border: rgba(255, 255, 255, 0.15);
-  --border-glow: rgba(255, 255, 255, 0.8);
-
-  --text-primary: #ffffff;
-  --text-secondary: rgba(255, 255, 255, 0.65);
-  --text-muted: rgba(255, 255, 255, 0.35);
-  --text-ghost: rgba(255, 255, 255, 0.15);
+  /* Colors - Pure Monochrome Light Theme */
+  --bg: #ffffff;
+  --surface: rgba(230, 230, 230, 0.4);
+  --surface-2: rgba(210, 210, 210, 0.5);
+  --border: rgba(0, 0, 0, 0.15);
+  --border-glow: rgba(0, 0, 0, 0.8);
+  
+  --text-primary: #000000;
+  --text-secondary: rgba(0, 0, 0, 0.65);
+  --text-muted: rgba(0, 0, 0, 0.35);
+  --text-ghost: rgba(0, 0, 0, 0.15);
 
   /* Typography Scale */
   --fs-hero: clamp(4rem, 12vw, 10rem);
   --fs-hero-product: clamp(4rem, 12vw, 9rem);
   --fs-hero-large: clamp(5rem, 18vw, 12rem);
-
+  
   --fs-h2: clamp(2rem, 5vw, 4rem);
   --fs-h2-large: clamp(2.5rem, 6vw, 5rem);
   --fs-thesis: clamp(2rem, 4vw, 4rem);
-
+  
   --fs-lead: clamp(1.3rem, 2.5vw, 1.7rem);
   --fs-tagline: clamp(0.95rem, 2vw, 1.1rem);
   --fs-pillar-title: clamp(0.95rem, 1.5vw, 1.15rem);
-
+  
   --fs-body: 0.95rem;
   --fs-body-sm: 0.875rem;
   --fs-body-xs: 0.85rem;
-
+  
   --fs-spec: 0.75rem;
   --fs-label: 0.7rem;
   --fs-label-sm: 0.65rem;
   --fs-label-xs: 0.6rem;
-
+  
   --fs-btn: 0.75rem;
   --fs-nav: 0.7rem;
   --fs-wordmark: 0.9rem;
@@ -193,7 +188,7 @@ a {
 
 .btn-primary:hover {
   color: var(--bg);
-  box-shadow: 0 0 20px rgba(255,255,255,0.2);
+  box-shadow: 0 0 20px rgba(0,0,0,0.1);
 }
 
 .btn-primary:hover::before {
@@ -218,7 +213,7 @@ a {
 .btn-secondary:hover {
   border-color: var(--text-primary);
   color: var(--text-primary);
-  background: rgba(255,255,255,0.05);
+  background: rgba(0,0,0,0.05);
 }
 
 /* 3D Utility Classes */
@@ -239,32 +234,3 @@ a {
 .glitch-subtle {
   animation: textGlitch 8s infinite var(--ease-cinematic);
 }
-
-/* ═══════════════════════════════════════════
-   RESET
-   ═══════════════════════════════════════════ */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-}
-
-body {
-  background-color: var(--bg);
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  line-height: var(--lh-default);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}

src/lib/three/ProductMonoliths.svelte

@@ -45,7 +45,7 @@
       
       // Wireframe
       const material = new THREE.LineBasicMaterial({ 
-        color: 0x555555,
+        color: 0xcccccc, // Lighter grey for white background
         transparent: true,
         opacity: 0.8
       });
@@ -151,7 +151,7 @@
         });
         
         // Color transition
-        const targetColor = isHovered ? new THREE.Color(0xffffff) : new THREE.Color(0x555555);
+        const targetColor = isHovered ? new THREE.Color(0x000000) : new THREE.Color(0xcccccc);
         gsap.to(m.material.color, {
           r: targetColor.r,
           g: targetColor.g,
@@ -172,7 +172,7 @@
       m.isHovered = false;
       gsap.to(m.group.rotation, { x: 0, y: 0, duration: 0.8 });
       gsap.to(m.group.position, { z: 0, duration: 0.8 });
-      gsap.to(m.material.color, { r: 0.33, g: 0.33, b: 0.33, duration: 0.5 });
+      gsap.to(m.material.color, { r: 0.8, g: 0.8, b: 0.8, duration: 0.5 });
     });
   }
 

src/lib/three/Scene.svelte

@@ -30,6 +30,6 @@
     height: 100vh;
     z-index: -1;
     pointer-events: none;
-    background: #000000;
+    background: var(--bg);
   }
 </style>

src/lib/three/SceneManager.js

@@ -16,7 +16,7 @@ export class SceneManager {
     this.height = window.innerHeight;
 
     this.scene = new THREE.Scene();
-    this.scene.fog = new THREE.FogExp2(0x000000, 0.02);
+    this.scene.fog = new THREE.FogExp2(0xffffff, 0.02); // White fog for light theme
 
     this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 1000);
     // Camera starts pulled back a bit
@@ -59,7 +59,7 @@ export class SceneManager {
 
     // Custom shader material for the bloom/glow effect on wireframe
     this.cubeMaterial = new THREE.LineBasicMaterial({
-      color: 0xffffff,
+      color: 0x000000, // Black lines for light theme
       transparent: true,
       opacity: 0.6,
       depthWrite: false,
@@ -73,15 +73,15 @@ export class SceneManager {
     const innerGeo = new THREE.OctahedronGeometry(2);
     const innerEdges = new THREE.EdgesGeometry(innerGeo);
     this.innerShape = new THREE.LineSegments(innerEdges, new THREE.LineBasicMaterial({
-      color: 0xffffff,
+      color: 0x000000, // Black lines for light theme
       transparent: true,
       opacity: 0.2,
       depthWrite: false
     }));
     this.cube.add(this.innerShape);
 
     // 2. Background 3D grid plane extending into infinity
-    const gridHelper = new THREE.GridHelper(100, 100, 0x333333, 0x111111);
+    const gridHelper = new THREE.GridHelper(100, 100, 0xcccccc, 0xeeeeee); // Light grid
     gridHelper.position.y = -5;
     gridHelper.position.z = -10;
     this.scene.add(gridHelper);
@@ -97,10 +97,10 @@ export class SceneManager {
     particleGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
     const particleMat = new THREE.PointsMaterial({
       size: 0.05,
-      color: 0xffffff,
+      color: 0x000000, // Black particles for light theme
       transparent: true,
-      opacity: 0.4,
-      blending: THREE.AdditiveBlending
+      opacity: 0.2,
+      blending: THREE.NormalBlending
     });
     this.particles = new THREE.Points(particleGeo, particleMat);
     this.scene.add(this.particles);

src/routes/+error.svelte

@@ -2,62 +2,60 @@
   <title>404 — Page Not Found | Sovren Software</title>
 </svelte:head>
 
+<script>
+  import ProductHero from '$lib/ProductHero.svelte';
+</script>
+
 <main class="error-page">
-  <div class="error-inner">
-    <span class="error-code">404</span>
-    <h1>NOT FOUND.</h1>
-    <p>This page doesn't exist.</p>
-    <a href="/" class="btn-back">← BACK TO HOME</a>
+  <ProductHero
+    category="404"
+    title="NOT<br />FOUND."
+    tagline="This page doesn't exist."
+    size="large"
+  />
+  <div class="actions">
+    <a href="/" class="btn-primary">← BACK TO HOME</a>
   </div>
 </main>
 
 <style>
   .error-page {
     min-height: calc(100vh - var(--nav-h));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .error-inner {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: var(--space-xl);
-    text-align: center;
-    padding: var(--space-5xl) var(--space-2xl);
-  }
-
-  .error-code {
-    font-size: var(--fs-label);
-    letter-spacing: var(--ls-widest);
-    color: var(--text-muted);
-  }
-
-  h1 {
-    font-size: clamp(3rem, 10vw, 7rem);
-    font-weight: var(--fw-bold);
-    letter-spacing: 0.08em;
-    line-height: 1.0;
+    justify-content: center;
   }
-
-  p {
-    font-size: var(--fs-body-xs);
-    color: var(--text-secondary);
-    letter-spacing: var(--ls-moderate);
+  
+  .actions {
+    max-width: var(--max-w);
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 var(--space-3xl);
+    padding-bottom: var(--space-7xl);
   }
 
-  .btn-back {
+  .btn-primary {
     display: inline-block;
-    font-size: var(--fs-label);
+    font-family: var(--font-mono);
+    font-size: var(--fs-btn);
     letter-spacing: var(--ls-wider);
-    color: var(--text-muted);
+    padding: var(--btn-pad);
+    background: transparent;
+    color: var(--text-primary);
+    border: 1px solid var(--text-primary);
     text-decoration: none;
-    margin-top: var(--space-sm);
-    transition: color var(--transition-fast);
+    transition: all var(--transition-slow);
   }
 
-  .btn-back:hover {
-    color: var(--text-primary);
+  .btn-primary:hover {
+    background: var(--text-primary);
+    color: var(--bg);
+  }
+
+  @media (max-width: 768px) {
+    .actions {
+      padding: 0 var(--space-xl);
+      padding-bottom: var(--space-5xl);
+    }
   }
 </style>