diff --git a/index.html b/index.html index e286c5e..8e3e0c1 100644 --- a/index.html +++ b/index.html @@ -5,113 +5,173 @@ 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 → +
+ + +
+ +
+ +
+ + +
+ +
+

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 → +
+
+ SYSTEMS ONLINE + / + NEW YORK · 40.71°N 74.01°W + / + EST. 2025 +
+
+
+ + +
+ / Thesis +

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 deliberate path from the lab to the market.

+
+
+
04
+

Advisory

+

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

+
+
+
+ + +
+
+ / How we work +

From first principles to the real world

+
+
+
+ 01 +

Research

+

First principles to the frontier questions worth asking.

+
+
+ 02 +

Prototype

+

Building what the technology makes newly possible.

+
+
+ 03 +

Ship

+

Systems engineered to reach the real world.

+
+
+
+ + +
+
+
+ / Get in contact +

Let’s build what’s next.

+

Working at the frontier of creative technology, or want to start a conversation? We’d like to hear from you.

+ Email us → +
+
+
+
+ + +
+
+
+ + + + + HOUSTON LABS + + Houston Labs LLC · A New York Limited Liability Company + © 2026 Houston Labs LLC. All rights reserved. +
+ contact@houstonlabs.us
-
+ + -
-

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.

-
-
-
- -
-
- / Get in contact -

Let’s build what’s next.

-
-

Working at the frontier of creative technology, or want to start a - conversation? We’d like to hear from you.

- Email us → -
-
- - + + diff --git a/styles.css b/styles.css index bcde2fd..e7d9259 100644 --- a/styles.css +++ b/styles.css @@ -1,190 +1,132 @@ +/* Houston Labs — imported from "Houston Labs.dc.html" (Claude Design) + Variant: Obsidian theme, Light frost (--hl-blur:14px), chrome headline + grain on. */ :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; + --hl-bg:#06070d; --hl-bg2:#0a0c16; + --hl-bloom-a:rgba(123,108,255,.22); --hl-bloom-b:rgba(70,227,255,.16); --hl-bloom-c:rgba(70,227,255,.10); + --hl-grid:rgba(255,255,255,.04); --hl-grain:.05; + --hl-text:#eef0f7; --hl-muted:#8d93a8; --hl-faint:#5c6276; + --hl-accent-a:#46e3ff; --hl-accent-b:#8b7bff; --hl-accent-glow:rgba(70,227,255,.28); + --hl-accent-grad:linear-gradient(96deg,#46e3ff,#8b7bff 78%); + --hl-chrome-grad:linear-gradient(180deg,#fff,#dfe4ec 16%,#9aa1b0 34%,#f6f8fb 50%,#aeb4c2 64%,#7e8593 82%,#eef0f5); + --hl-btn-grad:linear-gradient(180deg,#f8fafc,#e3e7ee 46%,#c5cbd5 56%,#eef1f6); + --hl-btn-text:#0a0c14; --hl-btn-edge:rgba(255,255,255,.65); + --hl-glass-hi:rgba(255,255,255,.10); --hl-glass-lo:rgba(255,255,255,.02); --hl-glass-edge:rgba(255,255,255,.12); + --hl-spec:rgba(255,255,255,.5); --hl-sheen:rgba(255,255,255,.16); --hl-glass-inner:rgba(255,255,255,.06); + --hl-shadow:rgba(0,0,0,.6); --hl-line:rgba(255,255,255,.09); --hl-sat:150%; + --hl-mark-bg:linear-gradient(160deg,#1a1e2b,#0a0c14); + --hl-blur:14px; /* Light frost */ + --hl-accent-fill:var(--hl-chrome-grad); /* chrome headline */ --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} +body{margin:0;background:var(--hl-bg);color:var(--hl-text);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} +a{color:inherit} -/* ---- 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)} -} +@keyframes hlDrift{from{transform:translate3d(-1.4%,-1%,0) scale(1.03)}to{transform:translate3d(1.6%,1.3%,0) scale(1.07)}} +@keyframes hlRise{from{transform:translateY(20px)}to{transform:none}} +@keyframes hlShimmer{from{background-position:50% 0%}to{background-position:50% 100%}} +@keyframes hlOrbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}} +@keyframes hlPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} -/* ---- layout primitives ---- */ -.nav,main,.foot{max-width:var(--max);margin-inline:auto;padding-inline:28px} -section{padding-block:clamp(72px,11vw,140px)} +/* ambient field */ +.field{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--hl-bg),var(--hl-bg2))} +.field .bloom{position:absolute;inset:0;background:radial-gradient(58vw 58vw at 80% -12%,var(--hl-bloom-a),transparent 60%),radial-gradient(48vw 48vw at 6% 10%,var(--hl-bloom-b),transparent 60%),radial-gradient(46vw 46vw at 52% 116%,var(--hl-bloom-c),transparent 60%);animation:hlDrift 30s ease-in-out infinite alternate} +.field .grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--hl-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hl-grid) 1px,transparent 1px);background-size:66px 66px;-webkit-mask-image:radial-gradient(125vw 105vh at 50% -4%,#000 26%,transparent 78%);mask-image:radial-gradient(125vw 105vh at 50% -4%,#000 26%,transparent 78%)} -/* ---- 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)} +.content{position:relative;z-index:2} -/* ---- 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} +/* nav */ +.nav-wrap{position:sticky;top:14px;z-index:30;padding-inline:clamp(12px,3vw,24px);margin-top:18px} +.nav{max-width:var(--max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-radius:999px;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(calc(var(--hl-blur) * .8)) saturate(var(--hl-sat));-webkit-backdrop-filter:blur(calc(var(--hl-blur) * .8)) saturate(var(--hl-sat));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec),0 18px 44px -28px var(--hl-shadow)} +.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit} +.brand-badge{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--hl-mark-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.05),0 6px 16px -8px rgba(0,0,0,.7)} +.brand-name{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.2em;font-size:13.5px} +.nav-links{display:flex;align-items:center;gap:clamp(8px,2vw,24px);flex-wrap:wrap;font-size:14px;color:var(--hl-muted)} +.nav-links a{text-decoration:none;color:inherit;transition:color .2s} +.nav-links a:hover{color:var(--hl-text)} +.nav-pill{color:var(--hl-text)!important;padding:9px 17px;border-radius:999px;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec);transition:border-color .2s,transform .2s} +.nav-pill:hover{border-color:var(--hl-accent-a);transform:translateY(-1px)} +.main{max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,4vw,28px)} + +/* hero */ +.hero{position:relative;padding-block:clamp(72px,12vw,150px) clamp(60px,9vw,120px)} +.hero-orbit{position:absolute;left:50%;top:48%;width:min(1080px,150vw);height:auto;opacity:.55;pointer-events:none;z-index:0;animation:hlOrbit 140s linear infinite} +.hero-inner{position:relative;z-index:1;max-width:880px} +.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.26em;font-size:12px;color:var(--hl-accent-a);margin:0 0 26px} +.dot{width:6px;height:6px;border-radius:50%;background:var(--hl-accent-a);box-shadow:0 0 12px var(--hl-accent-a);animation:hlPulse 3.4s ease-in-out infinite} +h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(2.7rem,7.4vw,5.5rem);line-height:1;letter-spacing:-.03em;margin:0 0 30px} +.chrome{background:var(--hl-accent-fill);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 10px 34px var(--hl-accent-glow));animation:hlShimmer 7s ease-in-out infinite alternate} +.lede{font-size:clamp(1.06rem,1.7vw,1.34rem);line-height:1.6;color:var(--hl-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)} +.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:15px;border-radius:999px;transition:transform .18s,box-shadow .25s,border-color .2s} +.btn-metal{color:var(--hl-btn-text);padding:14px 26px;background:var(--hl-btn-grad);box-shadow:inset 0 1px 0 var(--hl-btn-edge),inset 0 -2px 4px rgba(0,0,0,.18),0 14px 36px -12px var(--hl-accent-glow),0 1px 0 rgba(255,255,255,.3)} +.btn-metal:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--hl-btn-edge),inset 0 -2px 4px rgba(0,0,0,.18),0 20px 48px -12px var(--hl-accent-glow),0 1px 0 rgba(255,255,255,.3)} +.btn-glass{font-weight:500;color:var(--hl-text);padding:14px 24px;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(calc(var(--hl-blur) * .7));-webkit-backdrop-filter:blur(calc(var(--hl-blur) * .7));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec)} +.btn-glass:hover{transform:translateY(-2px);border-color:var(--hl-accent-a)} +.btn-lg{font-size:16px;padding:16px 30px} +.status{display:inline-flex;align-items:center;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap;margin-top:46px;padding:12px 20px;border-radius:14px;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(calc(var(--hl-blur) * .7));-webkit-backdrop-filter:blur(calc(var(--hl-blur) * .7));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;color:var(--hl-muted)} +.status b{color:var(--hl-text);font-weight:400} +.status .sep{opacity:.4} -/* ---- 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{padding-block:clamp(48px,8vw,110px);border-top:1px solid var(--hl-line)} +.label{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:var(--hl-accent-a)} +.section-head{margin-bottom:clamp(34px,5vw,52px)} +h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.8rem,3.8vw,2.7rem);letter-spacing:-.022em;margin:14px 0 0} -/* ---- 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; +/* thesis */ +.thesis-p{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:clamp(1.5rem,3.5vw,2.6rem);line-height:1.32;letter-spacing:-.018em;max-width:22ch;margin:22px 0 0;color:var(--hl-muted)} +.thesis-p b{color:var(--hl-text);font-weight:400} + +/* focus */ +.focus{padding-block:clamp(56px,9vw,130px)} +.focus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(418px,100%),1fr));gap:18px} +.card{position:relative;border-radius:22px;padding:clamp(28px,3vw,40px);overflow:hidden;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));-webkit-backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec),inset 0 0 30px -10px var(--hl-glass-inner),inset 0 -26px 50px -34px rgba(0,0,0,.5),0 30px 70px -34px var(--hl-shadow);transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s,box-shadow .35s} +.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 82% at 16% -10%,var(--hl-sheen),transparent 48%)} +.card>*{position:relative;z-index:1} +.card:hover{transform:translateY(-5px);border-color:var(--hl-accent-a);box-shadow:inset 0 1px 0 var(--hl-spec),inset 0 0 30px -8px var(--hl-glass-inner),0 40px 84px -34px var(--hl-shadow)} +.card-top{display:flex;align-items:center;justify-content:space-between} +.card-idx{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.16em;color:var(--hl-faint)} +.card-rule{width:28px;height:1px;background:var(--hl-chrome-grad);opacity:.7} +.card h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.34rem;letter-spacing:-.012em;margin:18px 0 10px;color:var(--hl-text)} +.card p{margin:0;color:var(--hl-muted);font-size:15.5px;line-height:1.58} + +/* approach */ +.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr));gap:16px} +.step{position:relative;border-radius:18px;padding:26px 24px 28px;overflow:hidden;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));-webkit-backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec),0 24px 56px -34px var(--hl-shadow)} +.step::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--hl-chrome-grad);opacity:.55} +.step-idx{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--hl-accent-a)} +.step h4{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.18rem;letter-spacing:-.01em;margin:12px 0 8px;color:var(--hl-text)} +.step p{margin:0;color:var(--hl-muted);font-size:14.5px;line-height:1.55} + +/* contact */ +.contact{padding-block:clamp(56px,9vw,120px)} +.contact-card{position:relative;overflow:hidden;border-radius:30px;padding:clamp(40px,6vw,80px);background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));-webkit-backdrop-filter:blur(var(--hl-blur)) saturate(var(--hl-sat));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec),inset 0 0 60px -20px var(--hl-glass-inner),0 40px 90px -40px var(--hl-shadow)} +.contact-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 120% at 92% -20%,var(--hl-accent-glow),transparent 52%),radial-gradient(120% 90% at 12% -10%,var(--hl-sheen),transparent 48%)} +.contact-inner{position:relative;z-index:1;max-width:640px} +.h2-big{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.025em;line-height:1.05;margin:16px 0 18px} +.contact-p{color:var(--hl-muted);font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.58;max-width:52ch;margin:0 0 34px} + +/* footer */ +.foot{max-width:var(--max);margin:40px auto 0;padding:clamp(40px,5vw,60px) clamp(20px,4vw,28px) 70px;border-top:1px solid var(--hl-line)} +.foot-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px} +.foot-brand{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--hl-muted)} +.foot-mark{display:flex;align-items:center;gap:11px;margin-bottom:6px} +.foot-badge{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--hl-mark-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 5px 14px -8px rgba(0,0,0,.7)} +.foot-name{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.2em;font-size:13.5px;color:var(--hl-text)} +.foot-copy{color:var(--hl-faint)} +.foot-pill{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.08em;color:var(--hl-text);padding:11px 20px;border-radius:999px;background:linear-gradient(150deg,var(--hl-glass-hi),var(--hl-glass-lo) 72%);backdrop-filter:blur(calc(var(--hl-blur) * .7));-webkit-backdrop-filter:blur(calc(var(--hl-blur) * .7));border:1px solid var(--hl-glass-edge);box-shadow:inset 0 1px 0 var(--hl-spec);transition:border-color .2s,transform .2s} +.foot-pill:hover{border-color:var(--hl-accent-a);transform:translateY(-1px)} + +/* film grain */ +.grain{position:fixed;inset:0;z-index:60;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--hl-grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} + +/* reveals */ +.rise{animation:hlRise .8s cubic-bezier(.22,.61,.36,1) both} +@supports (animation-timeline:view()){ + .reveal{animation:hlRise .9s cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 2% cover 26%} } -/* ---- 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} - -/* ---- contact ---- */ -.contact-lede{max-width:52ch;color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);margin:0 0 34px} -.btn-lg{padding:16px 30px;font-size:16px} - -/* ---- 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} -} +@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}