index.html

<!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="#000000" />
<title>Dot Labs</title>
<style>


:root {
  color-scheme: light dark;

  /* Light mode */
  --bg: transparent;
  --card: transparent;
  --border: #dedee2;
  --text: #171719;
  --muted: #606067;
  --label: #68686f;
  --footer: #68686f;
  --disclaimer: #77777e;

  --pill: #f3f3f5;
  --pill-border: #dedee2;
  --icon: #eeeeef;
  --icon-border: #d7d7dc;
  --icon-text: #36363b;

  --partner-bg: rgba(0,0,0,.025);
  --partner-border: rgba(0,0,0,.12);
  --partner-arrow: #77777e;

  --link-border: rgba(0,0,0,.22);
  --focus: #171719;
  --dots: rgba(20,20,24,.32);
}

/* Dark mode according to browser preferences */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: transparent;
    --card: transparent;
    --border: #29292d;
    --text: #f5f5f7;
    --muted: #a0a0a7;
    --label: #8e8e93;
    --footer: #77777d;
    --disclaimer: #77777d;

    --pill: #141416;
    --pill-border: #2a2a2d;
    --icon: #1a1a1c;
    --icon-border: #29292d;
    --icon-text: #c9c9cc;

    --partner-bg: rgba(255,255,255,.026);
    --partner-border: rgba(255,255,255,.14);
    --partner-arrow: #88888e;

    --link-border: rgba(255,255,255,.22);
    --focus: #ffffff;
    --dots: rgba(225,225,228,.35);
  }
}

/* Explicit website theme overrides */
html[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --border: #29292d;
  --text: #f5f5f7;
  --muted: #a0a0a7;
  --label: #8e8e93;
  --footer: #77777d;
  --disclaimer: #77777d;
  --pill: #141416;
  --pill-border: #2a2a2d;
  --icon: #1a1a1c;
  --icon-border: #29292d;
  --icon-text: #c9c9cc;
  --partner-bg: rgba(255,255,255,.026);
  --partner-border: rgba(255,255,255,.14);
  --partner-arrow: #88888e;
  --link-border: rgba(255,255,255,.22);
  --focus: #fff;
  --dots: rgba(225,225,228,.35);
}

html[data-theme="light"],
html.light {
  color-scheme: light;
  --border: #dedee2;
  --text: #171719;
  --muted: #606067;
  --label: #68686f;
  --footer: #68686f;
  --disclaimer: #77777e;
  --pill: #f3f3f5;
  --pill-border: #dedee2;
  --icon: #eeeeef;
  --icon-border: #d7d7dc;
  --icon-text: #36363b;
  --partner-bg: rgba(0,0,0,.025);
  --partner-border: rgba(0,0,0,.12);
  --partner-arrow: #77777e;
  --link-border: rgba(0,0,0,.22);
  --focus: #171719;
  --dots: rgba(20,20,24,.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.page {
  display: grid;
  place-items: center;
  padding: 0;
  width: 100%;
}

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.card > * {
  position: relative;
  z-index: 2;
}

.logo {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
}

main { max-width: 620px; }

h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 9vw, 32px);
  line-height: .92;
  font-weight: 560;
  letter-spacing: -.07em;
}

p.lead,
main a.join-link {
  margin: 14px 0 0;
  max-width: 540px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  letter-spacing: -.02em;
  text-decoration: none;
}

main a.join-link {
  display: inline-block;
  font-size: 14px;
  border-bottom: 1px solid var(--link-border);
  padding-bottom: 3px;
}

main a.join-link:hover {
  color: var(--text);
}

footer {
  color: var(--footer);
  font-size: 11px;
  letter-spacing: .04em;
}

.partners {
  color: var(--text);
  text-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding-top: 0;
  border-top: 0;
}

.partners-label {
  margin: 0;
  color: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

.partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.partner-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 144px;
  min-height: 44px;
  padding: 6px 10px 6px 7px;
  margin: 0;
  background: var(--partner-bg);
  border: 1px solid var(--partner-border);
  border-radius: 10px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -.015em;
  line-height: 1;
}

.partner-link:hover {
  border-color: var(--muted);
}

.partner-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  min-width: 29px;
  overflow: hidden;
  background: var(--icon);
  border: 1px solid var(--icon-border);
  border-radius: 6px;
  color: var(--icon-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.partner-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-name {
  color: var(--text);
  white-space: nowrap;
}

.partner-arrow {
  margin-left: 2px;
  color: var(--partner-arrow);
  font-size: 14px;
  line-height: 1;
}

.disclaimer {
  color: var(--disclaimer);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .018em;
}

.art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.dotlayer,
.shape {
  position: absolute;
}

.shape.band {
  width: 72%;
  height: 140%;
  right: -12%;
  top: -14%;
  transform: rotate(-17deg);
  background-image: radial-gradient(
    circle,
    var(--dots) 1px,
    transparent 1.35px
  );
  background-size: 14px 14px;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.35) 16%,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,.82) 80%,
    transparent 100%
  );
  opacity: .9;
}

@media (max-width: 600px) {
  .page { padding: 14px; }

  .card {
    width: min(100%, calc(100vw - 28px));
    min-height: calc(100svh - 28px);
    padding: 28px 24px;
    border-radius: 16px;
  }
}



.card{background:transparent}
.shape.band{
  width:72%; height:140%; right:-12%; top:-14%; transform:rotate(-17deg);
  background-image:radial-gradient(circle, rgba(225,225,228,.35) 1px, transparent 1.35px);
  background-size:14px 14px;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,1) 45%, rgba(0,0,0,.82) 80%, transparent 100%);
  opacity:.9;
}

</style>
</head>
<body>
  <div class="page">
    <section class="card">
      <div class="art" aria-hidden="true"><div class="shape band"></div></div>
      <div class="logo">D●t Labs</div>
      <main>
        <h1>Refined<br>Intelligence.</h1>
        <p class="lead">We believe a synergy of granular foundations and test-time compute can be a powerful factor for deploying compact, general-level AI. We're using bytes and depth to prove it.</p>
        <a class="join-link" href="https://huggingface.co/dotlabs/void.1">➤ Check out our first foundation model</a> <br>
        <a class="join-link" href="https://forms.gle/mcB9pYiMHvHgXFPi7">➤ Learn how to join</a> <br>
        <a class="join-link" href="https://ko-fi.com/dotlabs">➤ Or support our work</a>
      </main>
      <footer>
        <br>
        <div class="partners" aria-label="Partners">
          <div class="partners-label">Partners</div>
          <div class="partner-list">
            <a class="partner-link" href="https://huggingface.co/AxiomicLabs" target="_blank" rel="noopener noreferrer" aria-label="Visit AxiomicLabs on Hugging Face">
              <span class="partner-icon" aria-hidden="true"><span>A</span><img src="https://huggingface.co/api/organizations/AxiomicLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer"></span>
              <span class="partner-name">AxiomicLabs</span>
              <span class="partner-arrow" aria-hidden="true">↗</span>
            </a>
            <a class="partner-link" href="https://huggingface.co/SurjoLabs" target="_blank" rel="noopener noreferrer" aria-label="Visit SurjoLabs on Hugging Face">
              <span class="partner-icon" aria-hidden="true"><span>S</span><img src="https://huggingface.co/api/organizations/SurjoLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer"></span>
              <span class="partner-name">SurjoLabs</span>
              <span class="partner-arrow" aria-hidden="true">↗</span>
            </a>
          </div>
        </div>
        <div class="disclaimer">Dot Labs™ is not related in any way to OpenAI's Dot product nor dot.com or dotlabs.com web domains.</div>
      </footer>
    </section>
  </div>
</body>
</html>