Missing contact page to routes, background adjustment, stub of map background on contact page.

Author: cybercussion

src/app-routes.js

@@ -10,6 +10,7 @@ export const ROUTES = {
     api: () => import('@features/dashboard/dashboard-api.js').then(m => m.fetchDashboardData()),
     dataKey: 'dashboardData'
   },
+  'contact': { path: '@features/contact/contact.js' },
   'navigation': { path: '@features/navigation/navigation.js' },
   'not-found': { path: '@features/not-found/not-found.js' }
 };

src/features/contact/contact.css

@@ -1,15 +1,40 @@
 :host {
   display: block;
-  min-height: 100%;
+  position: relative;
+  isolation: isolate;
   padding: var(--space-m);
 }
 
+/* Background elements removed to prevent view transition conflicts with nav dock */
+/* #map-background {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  opacity: 0.6;
+  background: #0d0d0d;
+  filter: grayscale(100%) contrast(1.2);
+  pointer-events: none;
+}
+
+.map-overlay {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at center, transparent 0%, var(--color-background) 100%);
+  z-index: -1;
+  pointer-events: none;
+} */
+
 .contact-container {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--space-l);
+  padding: var(--space-m);
+
+  /* Ensure content is above map */
+  position: relative;
+  z-index: 1;
 }
 
 h1 {
@@ -20,12 +45,39 @@ h1 {
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
+  /* Pop against map */
+}
+
+:host([data-theme="light"]) h1 {
+  background: linear-gradient(to right, var(--color-foreground), #000);
+  -webkit-background-clip: text;
+  background-clip: text;
+  text-shadow: none;
+  /* Shadow can look muddy in light mode */
 }
 
 .contact-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
+  /* slight boost to card opacity if needed, but glass-card handles it */
+  backdrop-filter: blur(8px);
+
+  /* Opaque backgrounds for readability over map */
+  background: rgba(10, 10, 10, 0.8);
+}
+
+.contact-form:hover {
+  background: rgba(15, 15, 15, 0.85);
+  /* Maintain opacity on hover */
+}
+
+:host([data-theme="light"]) .contact-form {
+  background: rgba(255, 255, 255, 0.85);
+}
+
+:host([data-theme="light"]) .contact-form:hover {
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .actions {

src/features/contact/contact.js

@@ -2,6 +2,7 @@ import { BaseComponent } from '@shared/base-component.js';
 import { state } from '@state';
 import { FormValidator } from '@shared/form-validator.js';
 import '@shared/custom-input.js';
+// import L from 'https://esm.sh/leaflet@1.9.4';
 
 class ContactUI extends BaseComponent {
 
@@ -10,6 +11,12 @@ class ContactUI extends BaseComponent {
     const formsCssPath = new URL('../../shared/styles/forms.css', import.meta.url).href;
     await this.addExternalStyles(cssPath);
     await this.addExternalStyles(formsCssPath);
+    // Load Leaflet CSS from CDN
+    // await this.addExternalStyles('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
   }
 
   async onRendered() {
@@ -26,12 +33,47 @@ class ContactUI extends BaseComponent {
       // Explicitly bind the submit listener to the Shadow form
       this.form.addEventListener('submit', (e) => this.handleSubmit(e));
     }
+
+    // Initialize Leaflet Map - DISABLED due to view transition conflicts with nav dock
+    /*
+    const mapEl = this.shadowRoot.getElementById('map-background');
+    if (mapEl) {
+      // Fix for Leaflet image path in Shadow DOM/Module context if needed
+      // but usually for tiles we specify URL. Markers might need help but we aren't using markers yet.
+
+      this.map = L.map(mapEl, {
+        zoomControl: false,
+        scrollWheelZoom: false,
+        doubleClickZoom: false,
+        boxZoom: false,
+        keyboard: false,
+        dragging: false,
+        attributionControl: false
+      }).setView([47.6062, -122.3321], 12); // Seattle coordinates
+
+      // Dark Matter tiles by CartoDB
+      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 20
+      }).addTo(this.map);
+
+      // Force a redraw to ensure full coverage in fixed container
+      setTimeout(() => this.map?.invalidateSize(), 100);
+    }
+    */
   }
 
   disconnectedCallback() {
     if (this.validator && this.validator._currentController) {
       this.validator._currentController.abort();
     }
+
+    // if (this.map) {
+    //   this.map.remove();
+    //   this.map = null;
+    // }
+
     super.disconnectedCallback();
   }
 
@@ -80,6 +122,9 @@ class ContactUI extends BaseComponent {
 
   render() {
     this.shadowRoot.innerHTML = `
+      <!-- Map disabled due to view transition conflicts with nav dock -->
+      <!-- <div id="map-background"></div> -->
+      <!-- <div class="map-overlay"></div> -->
       <div class="contact-container fade-in">
         <h1>Get in Touch</h1>
         

src/features/navigation/navigation.css

@@ -75,8 +75,8 @@ button.nav-link {
   left: 50%;
   transform: translateX(-50%);
   background: var(--dock-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   padding: var(--space-s);
   border-radius: var(--space-xl);
   border: 1px solid var(--dock-border);

src/shared/styles/theme.css

@@ -167,12 +167,22 @@ body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
 
-  /* Modern Mesh Gradient Background */
+  /* Gritty Modern Background - Dark Mode */
   background-color: var(--color-bg);
   background-image:
-    radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
-    radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 25%);
+    /* Noise texture overlay */
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
+    /* Industrial accent glow */
+    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59, 130, 246, 0.12), transparent 50%),
+    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(139, 92, 246, 0.08), transparent 50%),
+    /* Subtle vignette */
+    radial-gradient(ellipse 150% 100% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%),
+    /* Grid overlay */
+    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
   background-attachment: fixed;
+  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
 
   color: var(--color-foreground);
   font-family: var(--font-sans);
@@ -268,11 +278,20 @@ pre {
   border-radius: 4px;
 }
 
-/* Light Mode Override for Airy Vibe */
+/* Light Mode Override - Gritty but Airy */
 :root[data-theme="light"] body {
   background-image:
-    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.03), transparent 40%),
-    radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.03), transparent 40%);
+    /* Subtle noise texture */
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"),
+    /* Warm industrial accents */
+    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(59, 130, 246, 0.06), transparent 50%),
+    radial-gradient(ellipse 70% 70% at 90% 80%, rgba(236, 72, 153, 0.05), transparent 50%),
+    /* Soft vignette */
+    radial-gradient(ellipse 120% 100% at 50% 100%, transparent 70%, rgba(0, 0, 0, 0.03) 100%),
+    /* Grid overlay */
+    linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
+  background-size: 256px 256px, 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
 }
 
 a:not([class]) {