Widen geography to 'The Corridor'

I-95. Lynch would use it. Doesn't explain itself.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -3,11 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project Blindspot — OBS Cockpit &amp; Crowdsourced Media for Sports Car Enthusiasts</title>
+  <title>Project Blindspot — The Corridor</title>
-  <meta name="description" content="Project Blindspot is an automotive hacker platform — an OBS cockpit and crowdsourced media project built for sports car enthusiasts.">
+  <meta name="description" content="Something is running the corridor. We have the footage.">
   <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=Rajdhani:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -19,117 +19,30 @@
         <span class="wordmark-name">BLINDSPOT</span>
       </div>
       <nav class="nav">
-        <a href="#about">About</a>
+        <a href="#tune-in" class="nav-cta">Tune In</a>
-        <a href="#platform">Platform</a>
-        <a href="#join" class="nav-cta">Get Early Access</a>
       </nav>
     </div>
   </header>
 
   <section class="hero">
     <div class="container">
-      <div class="hero-tag">AUTOMOTIVE HACKER PLATFORM</div>
+      <div class="hero-tag">THE CORRIDOR &nbsp;·&nbsp; ONGOING</div>
       <h1 class="hero-title">
-        Your car.<br>
+        Something is running<br>
-        Your data.<br>
+        the corridor.<br>
-        <span class="accent">Your broadcast.</span>
+        <span class="accent">We have the footage.</span>
       </h1>
-      <p class="hero-sub">
-        Project Blindspot is an OBS cockpit and crowdsourced media platform for sports car
-        enthusiasts. Stream your drives, overlay real-time telemetry, and connect with a
-        community of drivers who build their own experience.
-      </p>
-      <a href="#join" class="btn-primary">Request Early Access</a>
     </div>
     <div class="hero-grid" aria-hidden="true"></div>
   </section>
 
-  <section class="features" id="about">
+  <section class="join-section" id="tune-in">
     <div class="container">
-      <div class="section-label">What it is</div>
-      <div class="feature-grid">
-        <div class="feature-card">
-          <div class="feature-icon">⬡</div>
-          <h3>OBS Cockpit</h3>
-          <p>A purpose-built OBS integration that pulls live vehicle data — speed, RPM, g-force, GPS — directly into your stream as overlays. No external hardware required.</p>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">⬡</div>
-          <h3>Crowdsourced Media</h3>
-          <p>Driver-generated footage, routes, and telemetry shared across the community. Discover canyon runs, track days, and backroads from enthusiasts worldwide.</p>
-        </div>
-        <div class="feature-card">
-          <div class="feature-icon">⬡</div>
-          <h3>Hacker-Friendly</h3>
-          <p>Open architecture. Connect OBD-II adapters, GoPro feeds, external sensors. Build your own overlays with a documented plugin API. The cockpit is yours to configure.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section class="platform-section" id="platform">
-    <div class="container platform-inner">
-      <div class="platform-text">
-        <div class="section-label">The Platform</div>
-        <h2>OBD-II meets the streaming stack.</h2>
-        <p>
-          Blindspot bridges the gap between your car's data bus and a professional
-          broadcast pipeline. OBD-II telemetry feeds into a local cockpit app that
-          talks directly to OBS via WebSocket — overlays update in real time as you drive.
-        </p>
-        <p>
-          Clips, routes, and data get posted to a community feed where drivers can
-          compare telemetry, annotate footage, and build on each other's setups.
-        </p>
-        <ul class="platform-list">
-          <li>OBD-II / ELM327 adapter support</li>
-          <li>OBS WebSocket plugin integration</li>
-          <li>GPS track overlay &amp; route replay</li>
-          <li>Community clip feed with telemetry</li>
-          <li>Open plugin API</li>
-        </ul>
-      </div>
-      <div class="platform-visual" aria-hidden="true">
-        <div class="dash-mock">
-          <div class="dash-row">
-            <div class="dash-gauge">
-              <div class="dash-label">RPM</div>
-              <div class="dash-value accent">4,200</div>
-            </div>
-            <div class="dash-gauge">
-              <div class="dash-label">MPH</div>
-              <div class="dash-value">67</div>
-            </div>
-          </div>
-          <div class="dash-row">
-            <div class="dash-gauge">
-              <div class="dash-label">THROTTLE</div>
-              <div class="dash-value">42%</div>
-            </div>
-            <div class="dash-gauge">
-              <div class="dash-label">LAT G</div>
-              <div class="dash-value accent">0.8g</div>
-            </div>
-          </div>
-          <div class="dash-bar">
-            <div class="dash-bar-fill"></div>
-          </div>
-          <div class="dash-obs">● REC &nbsp; OBS LIVE</div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section class="join-section" id="join">
-    <div class="container">
-      <div class="section-label">Early Access</div>
-      <h2>Built by enthusiasts, for enthusiasts.</h2>
-      <p>Project Blindspot is in active development. Drop your email to get notified when early access opens and to shape what gets built.</p>
       <form class="join-form" action="#" method="post">
-        <input type="email" name="email" placeholder="your@email.com" required autocomplete="email">
+        <input type="email" name="email" placeholder="your frequency // email" required autocomplete="email">
-        <button type="submit" class="btn-primary">Notify Me</button>
+        <button type="submit" class="btn-primary">Tune In</button>
       </form>
-      <p class="join-note">No spam. No pitch deck. Just updates when there's something real to show.</p>
+      <p class="join-note">Transmissions drop when the car runs.</p>
     </div>
   </section>
 
@@ -139,7 +52,8 @@
         <span class="wordmark-project">PROJECT</span>
         <span class="wordmark-name">BLINDSPOT</span>
       </div>
-      <p class="footer-copy">&copy; 2026 Gluebox LLC &mdash; blindspot.fail</p>
+      <p class="footer-tagline">Something is in the blind spot. It always has been.</p>
+      <p class="footer-copy">blindspot.fail &mdash; The Corridor &mdash; est. 2024</p>
     </div>
   </footer>
 

style.css

@@ -1,13 +1,9 @@
-/* ============================================================
+/* Project Blindspot — blindspot.fail */
-   Project Blindspot — blindspot.fail
-   Color system: near-black bg / dark gray surfaces / red accent
-   ============================================================ */
 
 :root {
   --black:      #0a0a0a;
   --bg:         #111113;
   --surface:    #1a1a1e;
-  --surface-hi: #222228;
   --border:     #2e2e36;
   --gray-dim:   #555566;
   --gray-mid:   #888899;
@@ -17,47 +13,38 @@
   --red-bright: #e83535;
   --red-dim:    #8a1a1a;
   --red-glow:   rgba(212, 43, 43, 0.18);
+  --mono:       'Space Mono', monospace;
 }
 
-/* ---- Reset ---- */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--mono);
-  background: var(--bg);
+  background-color: #0c0c0e;
+  background-image:
+    repeating-radial-gradient(ellipse 620px 420px at 18% 32%,
+      transparent 0px, transparent 36px,
+      rgba(44, 46, 62, 0.55) 37px, transparent 38px),
+    repeating-radial-gradient(ellipse 520px 360px at 78% 62%,
+      transparent 0px, transparent 46px,
+      rgba(44, 46, 62, 0.45) 47px, transparent 48px),
+    repeating-radial-gradient(ellipse 700px 280px at 52% 88%,
+      transparent 0px, transparent 30px,
+      rgba(44, 46, 62, 0.35) 31px, transparent 32px),
+    repeating-radial-gradient(ellipse 380px 520px at 88% 18%,
+      transparent 0px, transparent 54px,
+      rgba(44, 46, 62, 0.4) 55px, transparent 56px);
   color: var(--gray-hi);
   line-height: 1.6;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
 }
 
-/* ---- Layout ---- */
 .container {
   max-width: 1080px;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 32px;
-}
-
-/* ---- Typography ---- */
-h1, h2, h3 {
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 700;
-  color: var(--white);
-  line-height: 1.15;
-  letter-spacing: 0.02em;
-}
-
-.accent { color: var(--red-bright); }
-
-.section-label {
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
-  font-size: 0.75rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--red);
-  margin-bottom: 12px;
 }
 
 /* ---- Header ---- */
@@ -65,8 +52,8 @@ h1, h2, h3 {
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(10, 10, 10, 0.92);
+  background: rgba(10, 10, 10, 0.95);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
 }
 
@@ -80,347 +67,98 @@ h1, h2, h3 {
 .wordmark {
   display: flex;
   align-items: baseline;
-  gap: 6px;
+  gap: 7px;
-  text-decoration: none;
 }
 
 .wordmark-project {
-  font-family: 'Rajdhani', sans-serif;
+  font-family: var(--mono);
-  font-weight: 400;
+  font-size: 0.6rem;
-  font-size: 0.75rem;
   letter-spacing: 0.2em;
-  color: var(--gray-mid);
+  color: var(--gray-dim);
 }
 
 .wordmark-name {
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.14em;
   color: var(--white);
 }
 
 .wordmark-sm .wordmark-name  { font-size: 0.95rem; }
-.wordmark-sm .wordmark-project { font-size: 0.65rem; }
+.wordmark-sm .wordmark-project { font-size: 0.55rem; }
-
-.nav {
-  display: flex;
-  align-items: center;
-  gap: 28px;
-}
-
-.nav a {
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
-  font-size: 0.85rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--gray-mid);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.nav a:hover { color: var(--white); }
 
 .nav-cta {
-  color: var(--red) !important;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--red);
+  text-decoration: none;
   border: 1px solid var(--red-dim);
   padding: 6px 16px;
-  border-radius: 3px;
+  border-radius: 2px;
-  transition: background 0.15s, color 0.15s !important;
+  transition: background 0.15s, color 0.15s;
 }
 
 .nav-cta:hover {
   background: var(--red-glow);
-  color: var(--red-bright) !important;
+  color: var(--red-bright);
 }
 
 /* ---- Hero ---- */
 .hero {
   position: relative;
-  padding: 100px 0 90px;
+  padding: 120px 0 100px;
   overflow: hidden;
 }
 
-.hero-grid {
+.hero-grid { display: none; }
-  position: absolute;
+
-  inset: 0;
+.hero .container { position: relative; z-index: 1; }
-  background-image:
-    linear-gradient(var(--border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--border) 1px, transparent 1px);
-  background-size: 48px 48px;
-  opacity: 0.35;
-  pointer-events: none;
-  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%);
-}
 
 .hero-tag {
-  font-family: 'Rajdhani', sans-serif;
+  font-family: var(--mono);
-  font-weight: 600;
+  font-size: 0.65rem;
-  font-size: 0.7rem;
+  letter-spacing: 0.14em;
-  letter-spacing: 0.25em;
+  color: var(--gray-dim);
-  text-transform: uppercase;
+  margin-bottom: 28px;
-  color: var(--red);
-  margin-bottom: 20px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.hero-tag::before {
-  content: '';
-  display: block;
-  width: 24px;
-  height: 1px;
-  background: var(--red);
 }
 
 .hero-title {
-  font-size: clamp(2.6rem, 6vw, 4.4rem);
-  line-height: 1.1;
-  max-width: 640px;
-  margin-bottom: 24px;
-  color: var(--white);
-}
-
-.hero-sub {
-  font-size: 1.05rem;
-  color: var(--gray-mid);
-  max-width: 520px;
-  margin-bottom: 36px;
-  line-height: 1.7;
-}
-
-.btn-primary {
-  display: inline-block;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 700;
-  font-size: 0.9rem;
+  font-size: clamp(2.6rem, 6vw, 4.8rem);
-  letter-spacing: 0.14em;
+  line-height: 1.08;
-  text-transform: uppercase;
   color: var(--white);
-  background: var(--red);
+  letter-spacing: 0.02em;
-  border: none;
-  padding: 13px 32px;
-  border-radius: 3px;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.15s, transform 0.1s;
 }
 
-.btn-primary:hover {
+.accent { color: var(--red-bright); }
-  background: var(--red-bright);
-  transform: translateY(-1px);
-}
 
-.btn-primary:active { transform: translateY(0); }
+/* ---- Tune In ---- */
-
-/* ---- Features ---- */
-.features {
-  padding: 90px 0;
-  border-top: 1px solid var(--border);
-}
-
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
-  margin-top: 16px;
-}
-
-.feature-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-top: 2px solid var(--red-dim);
-  padding: 28px 24px;
-  border-radius: 4px;
-  transition: border-color 0.15s, background 0.15s;
-}
-
-.feature-card:hover {
-  border-top-color: var(--red);
-  background: var(--surface-hi);
-}
-
-.feature-icon {
-  color: var(--red);
-  font-size: 1.2rem;
-  margin-bottom: 14px;
-  opacity: 0.8;
-}
-
-.feature-card h3 {
-  font-size: 1.15rem;
-  letter-spacing: 0.06em;
-  margin-bottom: 10px;
-  color: var(--white);
-}
-
-.feature-card p {
-  font-size: 0.9rem;
-  color: var(--gray-mid);
-  line-height: 1.65;
-}
-
-/* ---- Platform Section ---- */
-.platform-section {
-  padding: 90px 0;
-  border-top: 1px solid var(--border);
-  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
-}
-
-.platform-inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 64px;
-  align-items: center;
-}
-
-.platform-text h2 {
-  font-size: clamp(1.6rem, 3vw, 2.2rem);
-  margin-bottom: 20px;
-}
-
-.platform-text p {
-  font-size: 0.95rem;
-  color: var(--gray-mid);
-  line-height: 1.75;
-  margin-bottom: 16px;
-}
-
-.platform-list {
-  list-style: none;
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.platform-list li {
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
-  font-size: 0.9rem;
-  letter-spacing: 0.05em;
-  color: var(--gray-hi);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.platform-list li::before {
-  content: '';
-  display: block;
-  width: 6px;
-  height: 6px;
-  background: var(--red);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-/* ---- Dashboard Mock ---- */
-.dash-mock {
-  background: var(--black);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 28px;
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
-  box-shadow: 0 0 40px rgba(212, 43, 43, 0.08);
-}
-
-.dash-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.dash-gauge {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 14px 16px;
-}
-
-.dash-label {
-  font-size: 0.65rem;
-  letter-spacing: 0.2em;
-  color: var(--gray-dim);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-}
-
-.dash-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--gray-hi);
-  letter-spacing: 0.05em;
-}
-
-.dash-value.accent { color: var(--red-bright); }
-
-.dash-bar {
-  height: 4px;
-  background: var(--surface-hi);
-  border-radius: 2px;
-  margin-bottom: 16px;
-  overflow: hidden;
-}
-
-.dash-bar-fill {
-  height: 100%;
-  width: 42%;
-  background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
-  border-radius: 2px;
-}
-
-.dash-obs {
-  font-size: 0.7rem;
-  letter-spacing: 0.15em;
-  color: var(--red);
-  text-align: right;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-/* ---- Join Section ---- */
 .join-section {
-  padding: 100px 0;
+  padding: 80px 0 100px;
   border-top: 1px solid var(--border);
-  text-align: center;
-}
-
-.join-section h2 {
-  font-size: clamp(1.6rem, 3vw, 2.4rem);
-  margin-bottom: 16px;
-}
-
-.join-section p {
-  font-size: 0.95rem;
-  color: var(--gray-mid);
-  max-width: 500px;
-  margin: 0 auto 32px;
 }
 
 .join-form {
   display: flex;
   gap: 12px;
-  justify-content: center;
   flex-wrap: wrap;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 
 .join-form input[type="email"] {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--mono);
-  font-size: 0.95rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--white);
-  padding: 12px 20px;
+  padding: 13px 20px;
-  border-radius: 3px;
+  border-radius: 2px;
-  width: 300px;
+  width: 320px;
   outline: none;
   transition: border-color 0.15s;
 }
@@ -428,43 +166,61 @@ h1, h2, h3 {
 .join-form input[type="email"]::placeholder { color: var(--gray-dim); }
 .join-form input[type="email"]:focus { border-color: var(--red-dim); }
 
+.btn-primary {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--white);
+  background: var(--red);
+  border: none;
+  padding: 13px 28px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-primary:hover { background: var(--red-bright); }
+
 .join-note {
-  font-size: 0.8rem !important;
+  font-family: var(--mono);
-  color: var(--gray-dim) !important;
+  font-size: 0.62rem;
-  margin-bottom: 0 !important;
+  letter-spacing: 0.1em;
+  color: var(--gray-dim);
+  text-transform: uppercase;
 }
 
 /* ---- Footer ---- */
 .site-footer {
   border-top: 1px solid var(--border);
-  padding: 28px 0;
+  padding: 32px 0;
 }
 
 .footer-inner {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.footer-copy {
-  font-size: 0.78rem;
-  color: var(--gray-dim);
-}
-
-/* ---- Responsive ---- */
-@media (max-width: 760px) {
-  .platform-inner {
-    grid-template-columns: 1fr;
-    gap: 40px;
-  }
-
-  .nav a:not(.nav-cta) { display: none; }
-
-  .footer-inner {
   flex-direction: column;
-    gap: 12px;
+  align-items: center;
+  gap: 10px;
   text-align: center;
 }
 
-  .join-form input[type="email"] { width: 100%; }
+.footer-tagline {
+  font-family: 'Rajdhani', sans-serif;
+  font-weight: 600;
+  font-size: 0.85rem;
+  letter-spacing: 0.1em;
+  color: var(--gray-dim);
+}
+
+.footer-copy {
+  font-size: 0.58rem;
+  letter-spacing: 0.1em;
+  color: var(--border);
+  text-transform: uppercase;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 600px) {
+  .join-form input[type="email"] { width: 100%; }
+  .hero { padding: 80px 0 70px; }
 }