From ecaf3f0327ca639e8c341f01be47b2be099c1a70 Mon Sep 17 00:00:00 2001 From: 2ro <17595647+2ro@users.noreply.github.com> Date: Wed, 24 Jun 2026 16:20:06 -0400 Subject: [PATCH] Houston Labs landing page Professional/futuristic single-page site for Houston Labs LLC. Static index.html + styles.css; push to main auto-deploys via Forgejo hook. Co-Authored-By: Claude Opus 4.8 --- README.md | 14 ++++ index.html | 121 +++++++++++++++++++++++++++++++++ styles.css | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 326 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..5bc6cdb --- /dev/null +++ b/README.md @@ -0,0 +1,14 @@ +# houstonlabs.us + +Landing page for **Houston Labs LLC** — a New York technological R&D company. + +Static site: plain `index.html` + `styles.css`, no build step. + +## Deploy + +Push to `main` on `git.us-ea.st/butler/houstonlabs.us` **is** the deploy. +A Forgejo webhook hits `deploy-hook.service` on us-east, which runs +`git pull --ff-only` in `/var/www/houstonlabs.us` and re-chowns to `www-data`. +nginx serves it at https://houstonlabs.us. No restart, no rebuild. + +Verify a deploy: `ssh us-east 'journalctl -u deploy-hook -n 20'` diff --git a/index.html b/index.html new file mode 100644 index 0000000..eabacc4 --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ + + + + + +Houston Labs — Technological Research & Development + + + + + + + + + + + + + + + + + + + + +
+ + + HOUSTON LABS + + +
+ +
+
+

Technological Research & Development

+

Engineering the future of
creative technology.

+

Houston Labs is a research and development company building the tools, systems, + and ideas at the frontier where advanced technology meets human creativity.

+
+ Start a conversation + See our focus → +
+
+ +
+

The next era of creative work will be defined by the technology + built to serve it. We research that frontier, prototype what it makes possible, and ship the + systems that bring it into the real world.

+
+ +
+
+ / What we do +

Four ways we work

+
+
+
+ 01 +

Applied Research

+

Exploratory R&D at the edge of emerging technology — taking ideas from first + principles to working prototype.

+
+
+ 02 +

Creative Technology

+

Systems and tooling built for storytellers, studios, and the people shaping the + future of visual media.

+
+
+ 03 +

Product & Ventures

+

Turning research into products and ventures — with a clear, deliberate path from + the lab to the market.

+
+
+ 04 +

Advisory

+

Strategic guidance for organizations navigating the shift to AI-native creative + pipelines and production.

+
+
+
+ +
+
+ / Leadership +

Founded on a rare vantage point

+
+
+

Houston Labs is founded and led by Lambert Houston, Chief Executive Officer. + A career in the film industry gave Lambert a firsthand understanding of how creative work + actually gets made — and an instinct for where technology can take it next.

+

That perspective is the company’s foundation: an R&D firm that understands the future + of creative technologies because it has lived the craft those technologies are built to serve.

+
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a3d9423 --- /dev/null +++ b/styles.css @@ -0,0 +1,191 @@ +:root{ + --bg:#070810; + --bg-2:#0a0c16; + --panel:rgba(255,255,255,.025); + --line:rgba(255,255,255,.09); + --text:#e9ecf5; + --muted:#8b91a7; + --cyan:#38e0ff; + --violet:#7b6cff; + --max:1120px; + --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; +} + +*{box-sizing:border-box} +html{scroll-behavior:smooth} +body{ + margin:0; + background:var(--bg); + color:var(--text); + font:400 17px/1.65 "Inter",system-ui,sans-serif; + -webkit-font-smoothing:antialiased; + overflow-x:hidden; +} +a{color:inherit;text-decoration:none} + +/* ---- ambient background: grid + drifting light fields ---- */ +.field{ + position:fixed; + inset:0; + z-index:-1; + pointer-events:none; + background: + radial-gradient(60vw 60vw at 78% -10%, rgba(123,108,255,.20), transparent 60%), + radial-gradient(50vw 50vw at 8% 8%, rgba(56,224,255,.14), transparent 60%), + radial-gradient(40vw 40vw at 50% 115%, rgba(56,224,255,.10), transparent 60%), + linear-gradient(180deg,var(--bg),var(--bg-2)); + animation:drift 22s ease-in-out infinite alternate; +} +.field::before{ + content:""; + position:absolute; + inset:-2px; + background-image: + linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), + linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); + background-size:64px 64px; + -webkit-mask-image:radial-gradient(120vw 100vh at 50% 0%,#000 30%,transparent 80%); + mask-image:radial-gradient(120vw 100vh at 50% 0%,#000 30%,transparent 80%); +} +@keyframes drift{ + from{transform:translate3d(-1.5%,-1%,0) scale(1.02)} + to{transform:translate3d(1.5%,1%,0) scale(1.06)} +} + +/* ---- layout primitives ---- */ +.nav,main,.foot{max-width:var(--max);margin-inline:auto;padding-inline:28px} +section{padding-block:clamp(72px,11vw,140px)} + +/* ---- nav ---- */ +.nav{ + display:flex;align-items:center;justify-content:space-between; + padding-block:26px; +} +.brand{display:flex;align-items:center;gap:11px} +.brand-mark{display:block} +.brand-name{ + font-family:"Space Grotesk",sans-serif; + font-weight:600;letter-spacing:.18em;font-size:14px; +} +.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;color:var(--muted)} +.nav-links a{transition:color .2s} +.nav-links a:hover{color:var(--text)} +.nav-cta{ + color:var(--text);border:1px solid var(--line);border-radius:999px; + padding:8px 16px; +} +.nav-cta:hover{border-color:rgba(56,224,255,.5)} + +/* ---- hero ---- */ +.hero{padding-top:clamp(56px,9vw,110px);max-width:880px} +.eyebrow{ + font-family:var(--mono); + text-transform:uppercase;letter-spacing:.28em;font-size:12.5px; + color:var(--cyan);margin:0 0 26px; +} +h1{ + font-family:"Space Grotesk",sans-serif; + font-weight:600; + font-size:clamp(2.6rem,7vw,5rem); + line-height:1.02;letter-spacing:-.025em; + margin:0 0 28px; +} +.grad{ + background:linear-gradient(92deg,var(--cyan),var(--violet) 70%); + -webkit-background-clip:text;background-clip:text;color:transparent; +} +.lede{font-size:clamp(1.05rem,1.6vw,1.32rem);color:var(--muted);max-width:60ch;margin:0} + +.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px} +.btn{ + display:inline-flex;align-items:center;gap:8px; + font-weight:500;font-size:15px;border-radius:999px; + padding:13px 24px;transition:transform .15s,box-shadow .25s,border-color .2s,background .2s; +} +.btn-primary{ + color:#05060c; + background:linear-gradient(92deg,var(--cyan),var(--violet)); + box-shadow:0 8px 30px -8px rgba(56,224,255,.5); +} +.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(123,108,255,.6)} +.btn-ghost{border:1px solid var(--line);color:var(--text)} +.btn-ghost:hover{border-color:rgba(56,224,255,.5);transform:translateY(-2px)} + +/* ---- thesis ---- */ +.thesis{padding-block:clamp(40px,7vw,90px)} +.thesis p{ + font-family:"Space Grotesk",sans-serif; + font-weight:400; + font-size:clamp(1.4rem,3.2vw,2.3rem); + line-height:1.34;letter-spacing:-.015em; + max-width:24ch; + color:var(--muted); +} +.thesis-lead{color:var(--text)} + +/* ---- section heads ---- */ +.section-head{margin-bottom:46px} +.label{ + font-family:var(--mono); + text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--cyan); +} +.section-head h2{ + font-family:"Space Grotesk",sans-serif; + font-weight:600;font-size:clamp(1.7rem,3.6vw,2.6rem); + letter-spacing:-.02em;margin:14px 0 0; +} + +/* ---- focus grid ---- */ +.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} +.card{ + position:relative; + border:1px solid var(--line);border-radius:16px; + background:var(--panel); + padding:34px 32px 30px; + overflow:hidden; + transition:border-color .25s,transform .25s,background .25s; +} +.card::after{ + content:"";position:absolute;inset:0;border-radius:inherit; + background:radial-gradient(120% 90% at 100% 0%,rgba(56,224,255,.10),transparent 55%); + opacity:0;transition:opacity .3s; +} +.card:hover{transform:translateY(-3px);border-color:rgba(56,224,255,.35);background:rgba(255,255,255,.04)} +.card:hover::after{opacity:1} +.idx{ + font-family:var(--mono);font-size:13px;color:var(--violet); + letter-spacing:.1em; +} +.card h3{ + font-family:"Space Grotesk",sans-serif;font-weight:600; + font-size:1.32rem;letter-spacing:-.01em;margin:16px 0 10px; +} +.card p{margin:0;color:var(--muted);font-size:15.5px} + +/* ---- founder ---- */ +.founder-body{max-width:64ch;display:grid;gap:22px} +.founder-body p{margin:0;color:var(--muted);font-size:1.12rem} +.founder-body strong{color:var(--text);font-weight:600} + +/* ---- footer ---- */ +.foot{ + border-top:1px solid var(--line); + padding-block:60px 70px;margin-top:40px; +} +.foot-top{margin-bottom:48px} +.foot-meta{ + display:flex;flex-direction:column;gap:8px; + font-size:14px;color:var(--muted); +} +.foot-meta .brand-name{color:var(--text);margin-bottom:6px} + +/* ---- responsive ---- */ +@media (max-width:720px){ + .grid{grid-template-columns:1fr} + .nav-links a:not(.nav-cta){display:none} +} + +/* ---- motion preferences ---- */ +@media (prefers-reduced-motion:reduce){ + *{animation:none!important;scroll-behavior:auto!important;transition:none!important} +}