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 <noreply@anthropic.com>
This commit is contained in:
2ro
@@ -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'`
|
||||
+121
@@ -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 & 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 & 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 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 & 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&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 & 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’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.</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 LABS</span>
|
||||
<span>Houston Labs LLC · A New York Limited Liability Company</span>
|
||||
<span>© 2026 Houston Labs LLC. All rights reserved.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
+191
@@ -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}
|
||||
}
|
||||
Reference in New Issue
Block a user