Implement Houston Labs.dc.html — Obsidian theme, Light frost
Import the Claude Design concept: glassmorphic obsidian palette, 14px light frost, chrome shimmer headline, film grain. Adds hero orbit + status readout, Thesis and Approach sections. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2ro
+153
-93
@@ -5,113 +5,173 @@
|
||||
<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">
|
||||
<meta name="theme-color" content="#06070d">
|
||||
|
||||
<!-- 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:description" content="Engineering the future of creative technology. A research & development company.">
|
||||
<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="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='%2306070d'/%3E%3Cg fill='none' stroke-width='1.7'%3E%3Cpath d='M11 9v14M21 9v14M11 16h10' stroke='%23eef0f7'/%3E%3Cellipse cx='16' cy='16' rx='12.5' ry='5.4' transform='rotate(-24 16 16)' stroke='%2346e3ff' opacity='.85'/%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 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&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="#contact">Contact</a>
|
||||
<a class="nav-cta" href="mailto:contact@houstonlabs.us">Email us</a>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- ambient field: theme gradient + drifting blooms + masked grid -->
|
||||
<div class="field" aria-hidden="true"><div class="bloom"></div><div class="grid"></div></div>
|
||||
|
||||
<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 class="content">
|
||||
|
||||
<!-- NAV -->
|
||||
<header class="nav-wrap">
|
||||
<nav class="nav">
|
||||
<a class="brand" href="#top">
|
||||
<span class="brand-badge">
|
||||
<svg viewBox="0 0 32 32" width="20" height="20" aria-hidden="true">
|
||||
<defs><linearGradient id="m1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff"/><stop offset=".5" stop-color="#9aa1b0"/><stop offset="1" stop-color="#eef1f6"/></linearGradient></defs>
|
||||
<g fill="none" stroke-width="1.7"><path d="M11 9v14M21 9v14M11 16h10" stroke="url(#m1)"/><ellipse cx="16" cy="16" rx="12.5" ry="5.4" transform="rotate(-24 16 16)" stroke="var(--hl-accent-a)" opacity=".85"/></g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="brand-name">HOUSTON LABS</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#focus">Focus</a>
|
||||
<a href="#approach">Approach</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a class="nav-pill" href="mailto:contact@houstonlabs.us">Email us</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="top" class="main">
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<svg class="hero-orbit" viewBox="0 0 600 600" aria-hidden="true">
|
||||
<g fill="none" stroke="var(--hl-line)" stroke-width="1">
|
||||
<ellipse cx="300" cy="300" rx="288" ry="120" transform="rotate(-22 300 300)"/>
|
||||
<ellipse cx="300" cy="300" rx="230" ry="230"/>
|
||||
<ellipse cx="300" cy="300" rx="288" ry="120" transform="rotate(46 300 300)" stroke="var(--hl-accent-a)" opacity=".22"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="hero-inner">
|
||||
<p class="eyebrow rise"><span class="dot"></span>Technological Research & Development</p>
|
||||
<h1 class="rise" style="animation-delay:.08s">Engineering the future of<br><span class="chrome">creative technology.</span></h1>
|
||||
<p class="lede rise" style="animation-delay:.16s">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 rise" style="animation-delay:.24s">
|
||||
<a class="btn btn-metal" href="mailto:contact@houstonlabs.us">Start a conversation</a>
|
||||
<a class="btn btn-glass" href="#focus">See our focus →</a>
|
||||
</div>
|
||||
<div class="status rise" style="animation-delay:.32s">
|
||||
<span><span class="dot"></span> <b>SYSTEMS ONLINE</b></span>
|
||||
<span class="sep">/</span>
|
||||
<span>NEW YORK · 40.71°N 74.01°W</span>
|
||||
<span class="sep">/</span>
|
||||
<span>EST. 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- THESIS -->
|
||||
<section class="section reveal">
|
||||
<span class="label">/ Thesis</span>
|
||||
<p class="thesis-p"><b>The next era of creative work</b> 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>
|
||||
|
||||
<!-- FOCUS -->
|
||||
<section class="focus" id="focus">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">/ What we do</span>
|
||||
<h2>Four ways we work</h2>
|
||||
</div>
|
||||
<div class="focus-grid">
|
||||
<article class="card reveal">
|
||||
<div class="card-top"><span class="card-idx">01</span><span class="card-rule"></span></div>
|
||||
<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 reveal">
|
||||
<div class="card-top"><span class="card-idx">02</span><span class="card-rule"></span></div>
|
||||
<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 reveal">
|
||||
<div class="card-top"><span class="card-idx">03</span><span class="card-rule"></span></div>
|
||||
<h3>Product & Ventures</h3>
|
||||
<p>Turning research into products and ventures, with a deliberate path from the lab to the market.</p>
|
||||
</article>
|
||||
<article class="card reveal">
|
||||
<div class="card-top"><span class="card-idx">04</span><span class="card-rule"></span></div>
|
||||
<h3>Advisory</h3>
|
||||
<p>Strategic guidance for organizations navigating the shift to AI-native creative pipelines and production.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- APPROACH -->
|
||||
<section class="section" id="approach">
|
||||
<div class="section-head reveal">
|
||||
<span class="label">/ How we work</span>
|
||||
<h2>From first principles to the real world</h2>
|
||||
</div>
|
||||
<div class="steps-grid">
|
||||
<div class="step reveal">
|
||||
<span class="step-idx">01</span>
|
||||
<h4>Research</h4>
|
||||
<p>First principles to the frontier questions worth asking.</p>
|
||||
</div>
|
||||
<div class="step reveal">
|
||||
<span class="step-idx">02</span>
|
||||
<h4>Prototype</h4>
|
||||
<p>Building what the technology makes newly possible.</p>
|
||||
</div>
|
||||
<div class="step reveal">
|
||||
<span class="step-idx">03</span>
|
||||
<h4>Ship</h4>
|
||||
<p>Systems engineered to reach the real world.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT -->
|
||||
<section class="contact" id="contact">
|
||||
<div class="contact-card reveal">
|
||||
<div class="contact-inner">
|
||||
<span class="label">/ Get in contact</span>
|
||||
<h2 class="h2-big">Let’s build what’s next.</h2>
|
||||
<p class="contact-p">Working at the frontier of creative technology, or want to start a conversation? We’d like to hear from you.</p>
|
||||
<a class="btn btn-metal btn-lg" href="mailto:contact@houstonlabs.us">Email us →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="foot">
|
||||
<div class="foot-row">
|
||||
<div class="foot-brand">
|
||||
<span class="foot-mark">
|
||||
<span class="foot-badge">
|
||||
<svg viewBox="0 0 32 32" width="18" height="18" aria-hidden="true">
|
||||
<defs><linearGradient id="m2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff"/><stop offset=".5" stop-color="#9aa1b0"/><stop offset="1" stop-color="#eef1f6"/></linearGradient></defs>
|
||||
<g fill="none" stroke-width="1.7"><path d="M11 9v14M21 9v14M11 16h10" stroke="url(#m2)"/><ellipse cx="16" cy="16" rx="12.5" ry="5.4" transform="rotate(-24 16 16)" stroke="var(--hl-accent-a)" opacity=".85"/></g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="foot-name">HOUSTON LABS</span>
|
||||
</span>
|
||||
<span>Houston Labs LLC · A New York Limited Liability Company</span>
|
||||
<span class="foot-copy">© 2026 Houston Labs LLC. All rights reserved.</span>
|
||||
</div>
|
||||
<a class="foot-pill" href="mailto:contact@houstonlabs.us">contact@houstonlabs.us</a>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<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="contact-cta" id="contact">
|
||||
<div class="section-head">
|
||||
<span class="label">/ Get in contact</span>
|
||||
<h2>Let’s build what’s next.</h2>
|
||||
</div>
|
||||
<p class="contact-lede">Working at the frontier of creative technology, or want to start a
|
||||
conversation? We’d like to hear from you.</p>
|
||||
<a class="btn btn-primary btn-lg" href="mailto:contact@houstonlabs.us">Email us →</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="foot">
|
||||
<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>
|
||||
<!-- film grain -->
|
||||
<div class="grain" aria-hidden="true"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user