diff --git a/index.html b/index.html index c77b953..85fcc0e 100644 --- a/index.html +++ b/index.html @@ -7,39 +7,11 @@ - + - -
@@ -47,141 +19,30 @@ BLINDSPOT
-
-
-
39.9526° N  ·  75.1652° W  ·  03:14
-

- Something is
- running the streets.
- We have the footage. -

- See the Transmissions -
- +
+
39.9526° N  ·  75.1652° W
+

+ Something is running
+ the streets of Philadelphia.
+ We have the footage. +

-
-
-
TRANSMISSIONS — ONGOING
- -
- -
-
- T · 001 - Girard Avenue — 03:12AM -
-
- "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: that's not nothing." -
-
- RPM: 6,800 - DURATION: 0:11 - CAMERA: OFFLINE -
-
- -
-
- T · 002 - I-95 Southbound — Girard Interchange -
-
- "The dashcam captured something in lane three. We've watched the clip forty times. We still don't agree on what it is." -
-
- RPM: 4,100 - SPEED: 71mph - ANOMALY: LOGGED -
-
- -
-
- T · 003 - Kensington & Allegheny — 01:55AM -
-
- "The car refused to turn left. There was no mechanical reason for it. I didn't argue." -
-
- RPM: 900 - SPEED: 0mph - DURATION: 2:34 -
-
- -
-
- T · 004 - Location: [REDACTED] -
-
- ████████████████████████████ ██████ ████ ████████████ ███ ████████ - ████████████████ ████████████ Schuylkill ████████████████████████. -
-
- DATA: CORRUPTED - CAMERA: RECOVERED - STATUS: PENDING REVIEW -
-
- -
-
-
-
-
TUNE IN
-

New transmissions land
when the car runs.

-

We don't know what this is either. That's why you're here.

+

Transmissions drop when the car runs.

diff --git a/style.css b/style.css index c2d8f52..eb7efd4 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,9 @@ -/* ============================================================ - Project Blindspot — blindspot.fail - Automotive gothic. Philadelphia streets. Lynch meets Knight Rider. - Color system: near-black bg / dark gray surfaces / red accent - ============================================================ */ +/* Project Blindspot — blindspot.fail */ :root { --black: #0a0a0a; --bg: #111113; --surface: #1a1a1e; - --surface-hi: #222228; --border: #2e2e36; --gray-dim: #555566; --gray-mid: #888899; @@ -21,12 +16,11 @@ --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); color: var(--gray-hi); line-height: 1.6; @@ -34,72 +28,10 @@ body { -webkit-font-smoothing: antialiased; } -/* ---- Layout ---- */ .container { max-width: 1080px; margin: 0 auto; - padding: 0 24px; -} - -/* ---- 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: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--red); - 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; + padding: 0 32px; } /* ---- Header ---- */ @@ -122,8 +54,7 @@ h1, h2, h3 { .wordmark { display: flex; align-items: baseline; - gap: 6px; - text-decoration: none; + gap: 7px; } .wordmark-project { @@ -136,67 +67,39 @@ h1, h2, h3 { .wordmark-name { font-family: 'Rajdhani', sans-serif; font-weight: 700; - font-size: 1.15rem; - letter-spacing: 0.12em; + font-size: 1.1rem; + letter-spacing: 0.14em; color: var(--white); } -.wordmark-sm .wordmark-name { font-size: 0.95rem; } +.wordmark-sm .wordmark-name { font-size: 0.95rem; } .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; - transition: background 0.15s, color 0.15s !important; + border-radius: 2px; + 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: 90px 0 80px; + padding: 120px 0 100px; overflow: hidden; } -.hero-inner { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 64px; - align-items: center; - position: relative; - z-index: 1; -} - -.hero-dash { - display: flex; - justify-content: flex-end; -} - .hero-grid { position: absolute; inset: 0; @@ -204,415 +107,48 @@ h1, h2, h3 { linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; - opacity: 0.3; + opacity: 0.25; pointer-events: none; - mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%); + mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 30%, transparent 100%); } +.hero .container { position: relative; z-index: 1; } + .hero-tag { font-family: var(--mono); - font-size: 0.62rem; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--red); - margin-bottom: 24px; - display: inline-flex; - align-items: center; - gap: 10px; -} - -.hero-tag::before { - content: ''; - display: block; - width: 24px; - height: 1px; - background: var(--red); + font-size: 0.65rem; + letter-spacing: 0.14em; + color: var(--gray-dim); + margin-bottom: 28px; } .hero-title { - font-size: clamp(2.8rem, 6.5vw, 4.8rem); - line-height: 1.08; - max-width: 640px; - margin-bottom: 28px; - color: var(--white); -} - -.hero-text { - display: flex; - flex-direction: column; - align-items: flex-start; -} - -.btn-primary { - display: inline-block; - font-family: var(--mono); - font-size: 0.78rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--white); - background: var(--red); - border: none; - padding: 14px 32px; - border-radius: 2px; - text-decoration: none; - cursor: pointer; - transition: background 0.15s, transform 0.1s; -} - -.btn-primary:hover { - background: var(--red-bright); - transform: translateY(-1px); -} - -.btn-primary:active { transform: translateY(0); } - -/* ---- 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: 2px; - transition: border-color 0.2s, background 0.2s; -} - -.feature-card:hover { - border-top-color: var(--red); - background: var(--surface-hi); -} - -.feature-icon { - color: var(--red-dim); - font-size: 1.1rem; - margin-bottom: 14px; -} - -.feature-card h3 { - font-size: 1.2rem; - letter-spacing: 0.06em; - margin-bottom: 12px; - color: var(--white); -} - -.feature-card p { - font-size: 0.9rem; - color: var(--gray-mid); - line-height: 1.7; -} - -/* ---- 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.8rem, 3.2vw, 2.4rem); - margin-bottom: 20px; -} - -.platform-text p { - font-size: 0.92rem; - color: var(--gray-mid); - line-height: 1.8; - margin-bottom: 16px; -} - -.platform-list { - list-style: none; - margin-top: 24px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.platform-list li { - font-family: var(--mono); - font-size: 0.75rem; - letter-spacing: 0.06em; - color: var(--gray-hi); - display: flex; - align-items: center; - gap: 12px; -} - -.platform-list li::before { - content: ''; - display: block; - width: 5px; - height: 5px; - background: var(--red); - border-radius: 50%; - flex-shrink: 0; -} - -/* ---- Dashboard Mock ---- */ -.dash-mock { - background: var(--black); - border: 1px solid var(--border); - 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: 12px; - margin-bottom: 12px; -} - -.dash-gauge { - background: var(--surface); - border: 1px solid var(--border); - border-radius: 2px; - padding: 12px 14px; -} - -.dash-label { - font-size: 0.58rem; - letter-spacing: 0.18em; - color: var(--gray-dim); - margin-bottom: 5px; - text-transform: uppercase; - display: block; -} - -.dash-value { - font-size: 1.45rem; + font-family: 'Rajdhani', sans-serif; font-weight: 700; - color: var(--gray-hi); - 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: 3px; - background: var(--surface-hi); - border-radius: 2px; - margin-bottom: 14px; - overflow: hidden; -} - -.dash-bar-fill { - height: 100%; - width: 42%; - background: linear-gradient(90deg, var(--red-dim), var(--red-bright)); -} - -.dash-obs { - 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); -} - -.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; - 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 { + font-size: clamp(2.6rem, 6vw, 4.8rem); + line-height: 1.08; color: var(--white); - font-style: normal; + letter-spacing: 0.02em; } -.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; -} +.accent { color: var(--red-bright); } -.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 ---- */ +/* ---- Tune In ---- */ .join-section { - padding: 100px 0; + padding: 80px 0 100px; 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 { - font-size: clamp(1.6rem, 3vw, 2.4rem); - margin-bottom: 16px; -} - -.join-section > .container > p { - font-size: 0.95rem; - color: var(--gray-mid); - max-width: 440px; - margin: 0 auto 32px; - line-height: 1.75; } .join-form { display: flex; gap: 12px; - justify-content: center; flex-wrap: wrap; - margin-bottom: 20px; + margin-bottom: 18px; } .join-form input[type="email"] { font-family: var(--mono); - font-size: 0.78rem; + font-size: 0.75rem; letter-spacing: 0.06em; background: var(--surface); border: 1px solid var(--border); @@ -627,13 +163,28 @@ 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-family: var(--mono); - font-size: 0.62rem !important; + font-size: 0.62rem; letter-spacing: 0.1em; - color: var(--gray-dim) !important; + color: var(--gray-dim); text-transform: uppercase; - margin-bottom: 0 !important; } /* ---- Footer ---- */ @@ -656,31 +207,17 @@ h1, h2, h3 { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--gray-dim); - font-style: italic; } .footer-copy { - font-family: var(--mono); - font-size: 0.6rem; + font-size: 0.58rem; letter-spacing: 0.1em; color: var(--border); text-transform: uppercase; } /* ---- Responsive ---- */ -@media (max-width: 760px) { - .hero-inner { - grid-template-columns: 1fr; - gap: 40px; - } - - .hero-dash { justify-content: flex-start; } - - .nav a:not(.nav-cta) { display: none; } - +@media (max-width: 600px) { .join-form input[type="email"] { width: 100%; } - - .t-meta { flex-direction: column; gap: 4px; align-items: flex-start; } - - .t-data { gap: 14px; } + .hero { padding: 80px 0 70px; } }