Compare commits
2 Commits
a45b33a87a
...
da222ce0d8
| Author | SHA1 | Date | |
|---|---|---|---|
| da222ce0d8 | |||
| 72baecfd7e |
218
index.html
218
index.html
@ -3,15 +3,43 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project Blindspot — OBS Cockpit & Crowdsourced Media for Sports Car Enthusiasts</title>
|
||||
<meta name="description" content="Project Blindspot is an automotive hacker platform — an OBS cockpit and crowdsourced media project built for sports car enthusiasts.">
|
||||
<title>Project Blindspot — Something is running the streets of Philadelphia</title>
|
||||
<meta name="description" content="An unregistered vehicle has been documented across Philadelphia since early 2024. It broadcasts live telemetry from inside the car. The footage doesn't explain itself.">
|
||||
<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=Inter:wght@300;400;500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ticker" aria-hidden="true">
|
||||
<div class="ticker-track">
|
||||
<span class="ticker-item">SYSTEM ACTIVE</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">SIGNAL: <span class="accent">STRONG</span></span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">LAST TRANSMISSION: KENSINGTON AVE / 02:47</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">VEHICLE: UNREGISTERED</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">SIGHTINGS LOGGED: 14</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">IDENTITY: UNKNOWN</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">SYSTEM ACTIVE</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">SIGNAL: <span class="accent">STRONG</span></span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">LAST TRANSMISSION: KENSINGTON AVE / 02:47</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">VEHICLE: UNREGISTERED</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">SIGHTINGS LOGGED: 14</span>
|
||||
<span class="ticker-sep">·</span>
|
||||
<span class="ticker-item">IDENTITY: UNKNOWN</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="wordmark">
|
||||
@ -19,117 +47,200 @@
|
||||
<span class="wordmark-name">BLINDSPOT</span>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a href="#about">About</a>
|
||||
<a href="#platform">Platform</a>
|
||||
<a href="#join" class="nav-cta">Get Early Access</a>
|
||||
<a href="#about">Sightings</a>
|
||||
<a href="#archive">The Broadcasts</a>
|
||||
<a href="#transmissions">Transmissions</a>
|
||||
<a href="#tune-in" class="nav-cta">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-tag">AUTOMOTIVE HACKER PLATFORM</div>
|
||||
<div class="hero-tag">PHILADELPHIA · ONGOING · UNVERIFIED</div>
|
||||
<h1 class="hero-title">
|
||||
Your car.<br>
|
||||
Your data.<br>
|
||||
<span class="accent">Your broadcast.</span>
|
||||
Something is<br>
|
||||
running the streets.<br>
|
||||
<span class="accent">The footage doesn't lie.</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.
|
||||
An unregistered vehicle has been documented across Philadelphia since early 2024.
|
||||
It appears without warning. It disappears the same way. Whoever is inside that
|
||||
car built a broadcast rig — live telemetry, four cameras, signal going out in
|
||||
real time. We don't know who. We don't know why.
|
||||
</p>
|
||||
<a href="#join" class="btn-primary">Request Early Access</a>
|
||||
<a href="#transmissions" class="btn-primary">See the Evidence</a>
|
||||
</div>
|
||||
<div class="hero-grid" aria-hidden="true"></div>
|
||||
</section>
|
||||
|
||||
<section class="features" id="about">
|
||||
<div class="container">
|
||||
<div class="section-label">What it is</div>
|
||||
<div class="section-label">DOCUMENTED SIGHTINGS — WHAT WE KNOW</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>
|
||||
<h3>The Vehicle</h3>
|
||||
<p>A modified sports car. No consistent registration. No plates that check out. First picked up on a dashcam on Girard Avenue, February 2024, at 3am. It's been seen from Kensington to the Navy Yard. Surveillance cameras lose it within four seconds. We don't know why.</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>
|
||||
<h3>The Signal</h3>
|
||||
<p>Whoever is in that car built something sophisticated. An OBS broadcast rig reading live OBD-II telemetry — speed, RPM, lateral g-force, heading — overlaid on four dashcam angles. The streams go out without notice. They end without explanation. We've been archiving them.</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>
|
||||
<h3>The Community</h3>
|
||||
<p>There are people in this archive. Some have seen it in person. Some have footage they can't explain. Some found us through the transmissions. None of us fully agree on what we're looking at. We post everything anyway.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="platform-section" id="platform">
|
||||
<section class="platform-section" id="archive">
|
||||
<div class="container platform-inner">
|
||||
<div class="platform-text">
|
||||
<div class="section-label">The Platform</div>
|
||||
<h2>OBD-II meets the streaming stack.</h2>
|
||||
<div class="section-label">THE BROADCASTS — TECHNICAL NOTES</div>
|
||||
<h2>It's broadcasting.<br>From inside the car.</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.
|
||||
We've reverse-engineered enough of the setup to understand what we're seeing.
|
||||
The rig runs OBS with a live WebSocket connection to the car's OBD-II data bus.
|
||||
Speed, RPM, lateral g-force, heading — rendered in real time over four dashcam
|
||||
feeds. The broadcast goes out whenever the car moves.
|
||||
</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.
|
||||
Whoever built this knew what they were doing. The overlay system is clean,
|
||||
the telemetry is accurate, and the camera composite is deliberate. This is
|
||||
not a dashcam. This is a cockpit. Someone designed it to be watched.
|
||||
</p>
|
||||
<ul class="platform-list">
|
||||
<li>OBD-II / ELM327 adapter support</li>
|
||||
<li>OBS WebSocket plugin integration</li>
|
||||
<li>GPS track overlay & route replay</li>
|
||||
<li>Community clip feed with telemetry</li>
|
||||
<li>Open plugin API</li>
|
||||
<li>OBD-II / ELM327 live telemetry confirmed</li>
|
||||
<li>OBS WebSocket overlay — custom build</li>
|
||||
<li>Four-angle dashcam composite</li>
|
||||
<li>Streams archived on first detection</li>
|
||||
<li>Plugin architecture — unknown purpose</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="platform-visual" aria-hidden="true">
|
||||
<div class="dash-mock">
|
||||
<div class="dash-header">
|
||||
<span class="dash-title">BLINDSPOT / COCKPIT v0.9</span>
|
||||
<span class="dash-live accent">● LIVE</span>
|
||||
</div>
|
||||
<div class="dash-row">
|
||||
<div class="dash-gauge">
|
||||
<div class="dash-label">VELOCITY</div>
|
||||
<div class="dash-value">67 <span class="dash-unit">mph</span></div>
|
||||
</div>
|
||||
<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 class="dash-value accent">3,847</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-row">
|
||||
<div class="dash-gauge">
|
||||
<div class="dash-label">THROTTLE</div>
|
||||
<div class="dash-value">42%</div>
|
||||
<div class="dash-label">HEADING</div>
|
||||
<div class="dash-value">N · NE</div>
|
||||
</div>
|
||||
<div class="dash-gauge">
|
||||
<div class="dash-label">LAT G</div>
|
||||
<div class="dash-value accent">0.8g</div>
|
||||
<div class="dash-value accent">0.8 <span class="dash-unit">g</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-bar">
|
||||
<div class="dash-bar-fill"></div>
|
||||
<div class="dash-location">
|
||||
<span class="dash-label">POSITION</span>
|
||||
<span class="dash-loc-val">KENSINGTON AVE / 02:47:13</span>
|
||||
</div>
|
||||
<div class="dash-obs">● REC OBS LIVE</div>
|
||||
<div class="dash-bar"><div class="dash-bar-fill"></div></div>
|
||||
<div class="dash-obs">● REC OBS · 4-CAM COMPOSITE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="join-section" id="join">
|
||||
<section class="transmissions-section" id="transmissions">
|
||||
<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>
|
||||
<div class="section-label">TRANSMISSIONS — ONGOING</div>
|
||||
<h2>The archive is open.</h2>
|
||||
<p class="transmissions-intro">The car runs. The signal goes out. These are the excerpts we've been able to document. Timestamps are approximate. We can't verify all of them. We're posting them anyway.</p>
|
||||
|
||||
<div class="transmission-log">
|
||||
|
||||
<div class="transmission-entry">
|
||||
<div class="t-meta">
|
||||
<span class="t-id">T · 001</span>
|
||||
<span class="t-loc">Girard Avenue — 03:12AM</span>
|
||||
</div>
|
||||
<blockquote class="t-quote">
|
||||
"It asked me what I was afraid of. I said I didn't know. The RPMs climbed to 6,800 and held there for eleven seconds. Then it said: <em>that's not nothing.</em>"
|
||||
</blockquote>
|
||||
<div class="t-data">
|
||||
<span>RPM: 6,800</span>
|
||||
<span>DURATION: 0:11</span>
|
||||
<span>CAMERA: OFFLINE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transmission-entry">
|
||||
<div class="t-meta">
|
||||
<span class="t-id">T · 002</span>
|
||||
<span class="t-loc">I-95 Southbound — Girard Interchange</span>
|
||||
</div>
|
||||
<blockquote class="t-quote">
|
||||
"The dashcam captured something in lane three. We've watched the clip forty times. We still don't agree on what it is."
|
||||
</blockquote>
|
||||
<div class="t-data">
|
||||
<span>RPM: 4,100</span>
|
||||
<span>SPEED: 71mph</span>
|
||||
<span>ANOMALY: LOGGED</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transmission-entry">
|
||||
<div class="t-meta">
|
||||
<span class="t-id">T · 003</span>
|
||||
<span class="t-loc">Kensington & Allegheny — 01:55AM</span>
|
||||
</div>
|
||||
<blockquote class="t-quote">
|
||||
"The car refused to turn left. There was no mechanical reason for it. I didn't argue."
|
||||
</blockquote>
|
||||
<div class="t-data">
|
||||
<span>RPM: 900</span>
|
||||
<span>SPEED: 0mph</span>
|
||||
<span>DURATION: 2:34</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transmission-entry transmission-entry--locked">
|
||||
<div class="t-meta">
|
||||
<span class="t-id">T · 004</span>
|
||||
<span class="t-loc">Location: [REDACTED]</span>
|
||||
</div>
|
||||
<blockquote class="t-quote t-quote--redacted">
|
||||
████████████████████████████ ██████ ████ ████████████ ███ ████████
|
||||
████████████████ ████████████ Schuylkill ████████████████████████.
|
||||
</blockquote>
|
||||
<div class="t-data">
|
||||
<span>DATA: CORRUPTED</span>
|
||||
<span>CAMERA: RECOVERED</span>
|
||||
<span>STATUS: PENDING REVIEW</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="join-section" id="tune-in">
|
||||
<div class="container">
|
||||
<div class="section-label">TUNE IN — FIND THE FREQUENCY</div>
|
||||
<h2>New transmissions land<br>when the car runs.</h2>
|
||||
<p>If you've seen it — footage, a sighting, an encounter you can't explain — post it to the archive. Or drop your frequency and we'll reach you when the signal goes out.</p>
|
||||
<form class="join-form" action="#" method="post">
|
||||
<input type="email" name="email" placeholder="your@email.com" required autocomplete="email">
|
||||
<button type="submit" class="btn-primary">Notify Me</button>
|
||||
<input type="email" name="email" placeholder="your frequency // email" required autocomplete="email">
|
||||
<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">We don't know what this is either. That's why you're here.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -139,7 +250,8 @@
|
||||
<span class="wordmark-project">PROJECT</span>
|
||||
<span class="wordmark-name">BLINDSPOT</span>
|
||||
</div>
|
||||
<p class="footer-copy">© 2026 Gluebox LLC — blindspot.fail</p>
|
||||
<p class="footer-tagline">Something is in the blind spot. It always has been.</p>
|
||||
<p class="footer-copy">blindspot.fail — Philadelphia — est. 2024</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
388
style.css
388
style.css
@ -1,5 +1,6 @@
|
||||
/* ============================================================
|
||||
Project Blindspot — blindspot.fail
|
||||
Automotive gothic. Philadelphia streets. Lynch meets Knight Rider.
|
||||
Color system: near-black bg / dark gray surfaces / red accent
|
||||
============================================================ */
|
||||
|
||||
@ -17,6 +18,7 @@
|
||||
--red-bright: #e83535;
|
||||
--red-dim: #8a1a1a;
|
||||
--red-glow: rgba(212, 43, 43, 0.18);
|
||||
--mono: 'Space Mono', monospace;
|
||||
}
|
||||
|
||||
/* ---- Reset ---- */
|
||||
@ -51,13 +53,53 @@ h1, h2, h3 {
|
||||
.accent { color: var(--red-bright); }
|
||||
|
||||
.section-label {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* ---- Ticker ---- */
|
||||
.ticker {
|
||||
background: var(--black);
|
||||
border-bottom: 1px solid var(--red-dim);
|
||||
height: 26px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticker-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
white-space: nowrap;
|
||||
animation: ticker-scroll 40s linear infinite;
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.ticker-item {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ticker-item .accent { color: var(--red); }
|
||||
|
||||
.ticker-sep {
|
||||
color: var(--border);
|
||||
flex-shrink: 0;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* ---- Header ---- */
|
||||
@ -65,8 +107,8 @@ h1, h2, h3 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(10, 10, 10, 0.92);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@ -85,11 +127,10 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.wordmark-project {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--gray-mid);
|
||||
color: var(--gray-dim);
|
||||
}
|
||||
|
||||
.wordmark-name {
|
||||
@ -101,7 +142,7 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -149,22 +190,21 @@ h1, h2, h3 {
|
||||
linear-gradient(var(--border) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity: 0.35;
|
||||
opacity: 0.3;
|
||||
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-weight: 600;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.25em;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-tag::before {
|
||||
@ -176,10 +216,10 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.6rem, 6vw, 4.4rem);
|
||||
line-height: 1.1;
|
||||
font-size: clamp(2.8rem, 6.5vw, 4.8rem);
|
||||
line-height: 1.08;
|
||||
max-width: 640px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 28px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@ -188,21 +228,20 @@ h1, h2, h3 {
|
||||
color: var(--gray-mid);
|
||||
max-width: 520px;
|
||||
margin-bottom: 36px;
|
||||
line-height: 1.7;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.14em;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--white);
|
||||
background: var(--red);
|
||||
border: none;
|
||||
padding: 13px 32px;
|
||||
border-radius: 3px;
|
||||
padding: 14px 32px;
|
||||
border-radius: 2px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
@ -233,8 +272,8 @@ h1, h2, h3 {
|
||||
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;
|
||||
border-radius: 2px;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
@ -243,23 +282,22 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: var(--red);
|
||||
font-size: 1.2rem;
|
||||
color: var(--red-dim);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.15rem;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-mid);
|
||||
line-height: 1.65;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ---- Platform Section ---- */
|
||||
@ -277,14 +315,14 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.platform-text h2 {
|
||||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.platform-text p {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--gray-mid);
|
||||
line-height: 1.75;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@ -297,21 +335,20 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.platform-list li {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--gray-hi);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.platform-list li::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: var(--red);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
@ -321,49 +358,97 @@ h1, h2, h3 {
|
||||
.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);
|
||||
border-radius: 4px;
|
||||
padding: 22px 24px;
|
||||
font-family: var(--mono);
|
||||
box-shadow: 0 0 48px rgba(212, 43, 43, 0.1), inset 0 1px 0 rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
.dash-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--gray-dim);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dash-live {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--red-bright);
|
||||
}
|
||||
|
||||
.dash-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dash-gauge {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 2px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.dash-label {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--gray-dim);
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dash-value {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray-hi);
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.dash-unit {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
color: var(--gray-dim);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.dash-value.accent { color: var(--red-bright); }
|
||||
|
||||
.dash-location {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dash-loc-val {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--gray-hi);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dash-bar {
|
||||
height: 4px;
|
||||
height: 3px;
|
||||
background: var(--surface-hi);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -371,18 +456,131 @@ h1, h2, h3 {
|
||||
height: 100%;
|
||||
width: 42%;
|
||||
background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.dash-obs {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--red);
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---- Transmissions Section ---- */
|
||||
.transmissions-section {
|
||||
padding: 90px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.transmissions-section h2 {
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.transmissions-intro {
|
||||
font-size: 0.92rem;
|
||||
color: var(--gray-mid);
|
||||
max-width: 540px;
|
||||
line-height: 1.75;
|
||||
margin-bottom: 48px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.transmission-log {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.transmission-entry {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--red-dim);
|
||||
padding: 24px 28px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
transition: border-left-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.transmission-entry:hover {
|
||||
border-left-color: var(--red);
|
||||
background: var(--surface-hi);
|
||||
}
|
||||
|
||||
.transmission-entry--locked {
|
||||
border-left-color: var(--border);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.transmission-entry--locked:hover {
|
||||
border-left-color: var(--gray-dim);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.t-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
gap: 18px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.t-id {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--red);
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.transmission-entry--locked .t-id {
|
||||
color: var(--gray-dim);
|
||||
}
|
||||
|
||||
.t-loc {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--gray-dim);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.t-quote {
|
||||
font-size: 0.97rem;
|
||||
color: var(--gray-hi);
|
||||
line-height: 1.75;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
font-style: italic;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.t-quote em {
|
||||
color: var(--white);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.t-quote--redacted {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray-dim);
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.9;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.t-data {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.t-data span {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--gray-dim);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---- Join Section ---- */
|
||||
@ -390,6 +588,7 @@ h1, h2, h3 {
|
||||
padding: 100px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, var(--bg) 0%, rgba(139, 0, 0, 0.04) 100%);
|
||||
}
|
||||
|
||||
.join-section h2 {
|
||||
@ -397,11 +596,12 @@ h1, h2, h3 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.join-section p {
|
||||
.join-section > .container > p {
|
||||
font-size: 0.95rem;
|
||||
color: var(--gray-mid);
|
||||
max-width: 500px;
|
||||
max-width: 440px;
|
||||
margin: 0 auto 32px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.join-form {
|
||||
@ -409,18 +609,19 @@ h1, h2, h3 {
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.join-form input[type="email"] {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.06em;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--white);
|
||||
padding: 12px 20px;
|
||||
border-radius: 3px;
|
||||
width: 300px;
|
||||
padding: 13px 20px;
|
||||
border-radius: 2px;
|
||||
width: 320px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
@ -429,26 +630,43 @@ h1, h2, h3 {
|
||||
.join-form input[type="email"]:focus { border-color: var(--red-dim); }
|
||||
|
||||
.join-note {
|
||||
font-size: 0.8rem !important;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.62rem !important;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--gray-dim) !important;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 28px 0;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--gray-dim);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 0.78rem;
|
||||
color: var(--gray-dim);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--border);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---- Responsive ---- */
|
||||
@ -460,11 +678,9 @@ h1, h2, h3 {
|
||||
|
||||
.nav a:not(.nav-cta) { display: none; }
|
||||
|
||||
.footer-inner {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.join-form input[type="email"] { width: 100%; }
|
||||
|
||||
.t-meta { flex-direction: column; gap: 4px; align-items: flex-start; }
|
||||
|
||||
.t-data { gap: 14px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user