butler/houstonlabs.us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Houston Labs landing page

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
2ro
2026-06-24 16:20:06 -04:00
commit ecaf3f0327
3 changed files with 326 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14
View File
@@ -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'`
index.html
+121
View File
@@ -0,0 +1,121 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Houston Labs — Technological Research &amp; Development</title>
<meta name="description" content="Houston Labs is a technological research and development company building the tools, systems, and ideas where advanced technology meets human creativity.">
<meta name="theme-color" content="#070810">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Houston Labs">
<meta property="og:description" content="Engineering the future of creative technology. A research &amp; development company by Lambert Houston.">
<meta property="og:url" content="https://houstonlabs.us/">
<!-- Inline SVG favicon — orbital "H" mark, no extra request -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23070810'/%3E%3Cg fill='none' stroke-width='1.6'%3E%3Cpath d='M11 9v14M21 9v14M11 16h10' stroke='%23e9ecf5'/%3E%3Cellipse cx='16' cy='16' rx='12.5' ry='5.4' transform='rotate(-24 16 16)' stroke='%2338e0ff' opacity='.7'/%3E%3C/g%3E%3C/svg%3E">
<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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="field" aria-hidden="true"></div>
<header class="nav">
<a class="brand" href="/">
<svg class="brand-mark" viewBox="0 0 32 32" width="26" height="26" aria-hidden="true">
<g fill="none" stroke-width="1.6">
<path d="M11 9v14M21 9v14M11 16h10" stroke="#e9ecf5"/>
<ellipse cx="16" cy="16" rx="12.5" ry="5.4" transform="rotate(-24 16 16)" stroke="#38e0ff" opacity=".75"/>
</g>
</svg>
<span class="brand-name">HOUSTON&nbsp;LABS</span>
</a>
<nav class="nav-links">
<a href="#focus">Focus</a>
<a href="#founder">Founder</a>
<a class="nav-cta" href="mailto:contact@houstonlabs.us">Contact</a>
</nav>
</header>
<main>
<section class="hero">
<p class="eyebrow">Technological Research &amp; Development</p>
<h1>Engineering the future of<br><span class="grad">creative technology.</span></h1>
<p class="lede">Houston Labs is a research and development company building the tools, systems,
and ideas at the frontier where advanced technology meets human creativity.</p>
<div class="cta-row">
<a class="btn btn-primary" href="mailto:contact@houstonlabs.us">Start a conversation</a>
<a class="btn btn-ghost" href="#focus">See our focus →</a>
</div>
</section>
<section class="thesis">
<p><span class="thesis-lead">The next era of creative work</span> 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.</p>
</section>
<section class="focus" id="focus">
<div class="section-head">
<span class="label">/ What we do</span>
<h2>Four ways we work</h2>
</div>
<div class="grid">
<article class="card">
<span class="idx">01</span>
<h3>Applied Research</h3>
<p>Exploratory R&amp;D at the edge of emerging technology — taking ideas from first
principles to working prototype.</p>
</article>
<article class="card">
<span class="idx">02</span>
<h3>Creative Technology</h3>
<p>Systems and tooling built for storytellers, studios, and the people shaping the
future of visual media.</p>
</article>
<article class="card">
<span class="idx">03</span>
<h3>Product &amp; Ventures</h3>
<p>Turning research into products and ventures — with a clear, deliberate path from
the lab to the market.</p>
</article>
<article class="card">
<span class="idx">04</span>
<h3>Advisory</h3>
<p>Strategic guidance for organizations navigating the shift to AI-native creative
pipelines and production.</p>
</article>
</div>
</section>
<section class="founder" id="founder">
<div class="section-head">
<span class="label">/ Leadership</span>
<h2>Founded on a rare vantage point</h2>
</div>
<div class="founder-body">
<p>Houston Labs is founded and led by <strong>Lambert Houston</strong>, 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.</p>
<p>That perspective is the company&rsquo;s foundation: an R&amp;D firm that understands the future
of creative technologies because it has lived the craft those technologies are built to serve.</p>
</div>
</section>
</main>
<footer class="foot" id="contact">
<div class="foot-top">
<a class="btn btn-primary" href="mailto:contact@houstonlabs.us">contact@houstonlabs.us</a>
</div>
<div class="foot-meta">
<span class="brand-name">HOUSTON&nbsp;LABS</span>
<span>Houston Labs&nbsp;LLC · A New York Limited Liability Company</span>
<span>© 2026 Houston Labs LLC. All rights reserved.</span>
</div>
</footer>
</body>
</html>
styles.css
+191
View File
@@ -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}
}