Update index.html

index.html

@@ -1,26 +1,48 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#090909"><title>Dot Labs — Split Signal Dark</title>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#0a0a0a">
+<title>Dot Labs — Minimal 01</title>
 <style>
-:root{--bg:#090909;--panel:#111214;--soft:#18191b;--ink:#f1f1ee;--muted:#949490;--line:#2b2d31}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}
-.page{min-height:100svh;padding:24px;display:flex}.frame{width:min(100%,calc(100vw - 48px));min-height:calc(100svh - 48px);margin:0 auto;border:1px solid var(--line);display:grid;grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);background:var(--panel)}
-.left{padding:22px;display:flex;flex-direction:column;border-right:1px solid var(--line)}.right{display:grid;grid-template-rows:1fr auto;min-width:0}.brand{text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-.07em}.brand span{display:inline-block;width:.68em;height:.68em;border-radius:50%;background:#fff;margin:0 1px}.micro{font:10px 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
-.title{margin:auto 0}.title h1{font-size:clamp(78px,8vw,148px);line-height:.9;letter-spacing:-.1em;margin:16px 0}.title p{font-size:24px;max-width:360px;line-height:1.2;color:#cbcbc7;margin:0 0 24px}.stack{display:grid;gap:12px}.stack a{text-decoration:none;border:1px solid #35383e;padding:12px 14px;font:11px 'Courier New',monospace;letter-spacing:.08em;text-transform:uppercase}
-.field{position:relative;overflow:hidden;min-height:420px;background:var(--soft)}.field canvas{position:absolute;inset:0;width:100%;height:100%}.tag{position:absolute;z-index:2;top:18px;left:18px}.count{position:absolute;z-index:2;bottom:18px;right:18px}
-.info{padding:20px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:flex-end;flex-wrap:wrap}.partners{display:flex;gap:18px;flex-wrap:wrap}.partners a{text-decoration:none;border-bottom:1px solid #3a3d42;padding-bottom:3px}
-@media(max-width:950px){.frame{grid-template-columns:1fr}.left{border-right:0;border-bottom:1px solid var(--line)}.field{min-height:320px}}
-@media(max-width:560px){.page{padding:14px}.frame{width:min(100%,calc(100vw - 28px));min-height:calc(100svh - 28px)}.left,.info{padding:18px}.title h1{font-size:clamp(72px,16vw,116px)}.title p{font-size:21px}}
+:root{--bg:#0a0a0a;--panel:#111214;--panel2:#16171a;--line:#2a2c31;--text:#f2f2ef;--muted:#9a9a97;--soft:#cbcbc7}
+*{box-sizing:border-box}
+html,body{margin:0}
+body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
+a{color:inherit}
+a:focus-visible{outline:2px solid #fff;outline-offset:4px}
+.page{min-height:100svh;padding:24px;display:flex}
+.frame{width:min(100%,calc(100vw - 48px));min-height:calc(100svh - 48px);margin:0 auto;background:var(--panel);border:1px solid var(--line)}
+.brand{font-size:20px;font-weight:800;letter-spacing:-.07em;text-decoration:none;white-space:nowrap}
+.brand .dot{display:inline-block;width:.68em;height:.68em;border-radius:50%;background:var(--text);margin:0 1px}
+.micro{font:10px 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
+.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid #393c42;padding:13px 16px;font:11px 'Courier New',monospace;letter-spacing:.08em;text-transform:uppercase}
+.btn:hover{background:#18191d}
+.partners{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
+.partner{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid #363940;border-radius:999px;padding:7px 12px 7px 7px;background:#141518}
+.partner img{width:26px;height:26px;border-radius:50%;display:block;background:#202227;border:1px solid #30333a;object-fit:cover}
+.partner span{font:11px 'Courier New',monospace;letter-spacing:.04em;color:var(--soft)}
+.legal{color:var(--muted);font:10px/1.5 'Courier New',monospace;letter-spacing:.04em}
+.dotfield{background-image:radial-gradient(circle, rgba(242,242,239,.14) 1.2px, transparent 1.2px);background-size:16px 16px}
+.dotfield-fine{background-image:radial-gradient(circle, rgba(242,242,239,.1) 1px, transparent 1px);background-size:12px 12px}
+.dot-band{background:radial-gradient(circle at center, rgba(242,242,239,.14) 0, rgba(242,242,239,.14) 1px, transparent 1.5px) center/16px 16px, linear-gradient(180deg, transparent, rgba(242,242,239,.03), transparent)}
+@media(max-width:560px){.page{padding:14px}.frame{width:min(100%,calc(100vw - 28px));min-height:calc(100svh - 28px)}}
 
-/* Partner identities: real HF avatars when available; visible marks even offline. */
-.partner-link{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:9px;min-height:36px;text-decoration:none;white-space:nowrap;padding:2px 0 4px}
-.partner-avatar{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;overflow:hidden;background:#25272b;border:1px solid #555960;border-radius:7px;color:#f3f3f0;font:800 16px/1 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}
-.partner-avatar img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#25272b;border-radius:6px}
-.partner-fallback{position:relative;z-index:0;display:grid;place-items:center;width:100%;height:100%;text-transform:uppercase;font:800 15px/1 Arial,Helvetica,sans-serif;letter-spacing:0}
-.partner-name{color:#dededb;font:600 11px/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.01em;text-transform:none}
-.partner-arrow{color:#a4a5a1;font:14px/1 Arial,Helvetica,sans-serif;letter-spacing:0;margin-left:1px}
-.partner-link:hover .partner-avatar{border-color:#b2b4b6}
-.partner-link:hover .partner-name,.partner-link:focus-visible .partner-name{color:#fff}
-.partner-link:focus-visible{outline:2px solid #bbb;outline-offset:4px}
+.layout{display:grid;grid-template-rows:auto 1fr auto;min-height:inherit}
+.top,.bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 22px}
+.bottom{border-top:1px solid var(--line);flex-wrap:wrap}
+.hero{display:grid;place-items:center;padding:28px}
+.card{width:min(100%,860px);min-height:540px;border:1px solid var(--line);background:linear-gradient(180deg,#121316,#0f1012);display:grid;place-items:center;padding:48px;position:relative;text-align:center}
+.ring{width:min(62vw,360px);aspect-ratio:1;border-radius:50%;border:1px solid #31343a;display:grid;place-items:center;background:radial-gradient(circle, transparent 38%, rgba(242,242,239,.08) 38.2%, rgba(242,242,239,.08) 39%, transparent 39.2%), radial-gradient(circle, rgba(242,242,239,.12) 1.2px, transparent 1.3px) center/14px 14px}
+h1{margin:0;font-size:clamp(44px,10vw,80px);line-height:.9;letter-spacing:-.11em}
+p{max-width:430px;margin:20px auto 0;font-size:18px;line-height:1.55;color:#c7c7c3}
+.actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
+.kicker{margin-bottom:18px}
 
-</style></head><body><div class="page"><div class="frame"><section class="left"><div style="display:flex;justify-content:space-between;gap:12px;align-items:center"><a class="brand" href="#top">D<span></span>t Labs</a><div class="micro">Study / 001</div></div><div class="title" id="top"><div class="micro">A narrower language, a wider ambition</div><h1>void.1</h1><p>Bytes dots become signal. The interface remains simple.</p><div class="stack"><a href="https://huggingface.co/dotlabs/void.1">Explore the model ↗</a><a href="https://huggingface.co/spaces/dotlabs/README/discussions/1">Join the research ↗</a></div></div><div class="micro">Dark gray and black only. No white surfaces.</div></section><section class="right"><div class="field"><canvas id="signal"></canvas><div class="micro tag">Dot wave / intentional rhythm</div><div class="micro count">BYTE FIELD / 01</div></div><div class="info"><div><div class="micro" style="margin-bottom:8px">Partners</div><div class="partners micro"><a class="partner-link" href="https://huggingface.co/SurjoLabs" target="_blank" rel="noopener noreferrer" aria-label="SurjoLabs on Hugging Face"><span class="partner-avatar" aria-hidden="true"><span class="partner-fallback">S</span><img src="https://huggingface.co/api/organizations/SurjoLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer" onerror="this.hidden=true;this.style.display='none'"></span><span class="partner-name">SurjoLabs</span><span class="partner-arrow" aria-hidden="true">↗</span></a><a class="partner-link" href="https://huggingface.co/AxiomicLabs" target="_blank" rel="noopener noreferrer" aria-label="AxiomicLabs on Hugging Face"><span class="partner-avatar" aria-hidden="true"><span class="partner-fallback">A</span><img src="https://huggingface.co/api/organizations/AxiomicLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer" onerror="this.hidden=true;this.style.display='none'"></span><span class="partner-name">AxiomicLabs</span><span class="partner-arrow" aria-hidden="true">↗</span></a></div></div><div class="micro">Dot Labs is unaffiliated with OpenAI's Dot product or SpaceXAI.</div></div></section></div></div>
-<script>
-(()=>{const c=document.getElementById('signal'),x=c.getContext('2d');if(!x)return;const reduce=matchMedia('(prefers-reduced-motion: reduce)');let W=0,H=0,dpr=1,raf=0,t0=0;function size(){const r=c.parentElement.getBoundingClientRect();W=r.width;H=r.height;dpr=Math.min(devicePixelRatio||1,2);c.width=Math.round(W*dpr);c.height=Math.round(H*dpr);x.setTransform(dpr,0,0,dpr,0,0);draw(0)}function draw(t){x.clearRect(0,0,W,H);const space=W<500?20:24;for(let yy=space/2;yy<H;yy+=space)for(let xx=space/2;xx<W;xx+=space){const nx=xx/W,ny=yy/H;const center=.68-.36*nx+.055*Math.sin(nx*8+t*.9);const dist=Math.abs(ny-center);const band=Math.exp(-Math.pow(dist/.18,2));const r=.7+band*(space*.27);x.beginPath();x.fillStyle=`rgba(240,240,236,${.08+.7*band})`;x.arc(xx,yy,r,0,Math.PI*2);x.fill();}}function tick(now){draw((now-t0)/1000);raf=requestAnimationFrame(tick)}function update(){cancelAnimationFrame(raf);if(!reduce.matches&&!document.hidden){t0=performance.now();raf=requestAnimationFrame(tick)}else draw(0)}new ResizeObserver(size).observe(c.parentElement);document.addEventListener('visibilitychange',update);reduce.addEventListener('change',update);size();update();})();
-</script></body></html>
+</style>
+</head>
+<body>
+<div class="page"><div class="frame layout"><header class="top"><a class="brand" href="#top">D<span class="dot"></span>t Labs</a><div class="micro">01</div></header><main class="hero" id="top"><section class="card"><div><div class="micro kicker">Byte-level research</div><div class="ring"><div><h1>void.1</h1><div class="micro" style="margin-top:8px">Featured model</div></div></div><p>Minimal, dark, and intentional. Polka dots stay as structure. Nothing extra.</p><div class="actions"><a class="btn" href="https://huggingface.co/dotlabs/void.1">View model ↗</a><a class="btn" href="https://huggingface.co/spaces/dotlabs/README/discussions/1">Join Dot Labs ↗</a></div></div></section></main><footer class="bottom"><div class="partners"><a class="partner" href="https://huggingface.co/SurjoLabs"><img src="https://huggingface.co/api/organizations/SurjoLabs/avatar?redirect=true" alt="SurjoLabs logo"><span>SurjoLabs ↗</span></a><a class="partner" href="https://huggingface.co/AxiomicLabs"><img src="https://huggingface.co/api/organizations/AxiomicLabs/avatar?redirect=true" alt="AxiomicLabs logo"><span>AxiomicLabs ↗</span></a></div><div class="legal">Dot Labs is unaffiliated with OpenAI's Dot product or SpaceXAI.</div></footer></div></div>
+</body>
+</html>