/* Liminal Spaces — landing page Design language: paper + ink + monospace, single green accent, sharp corners. */ :root { --paper: #fcfcfb; --ink: #0b0b0b; --gray: #45453f; --faint: #7a7a74; --line: #e2e2de; --line-strong: #0b0b0b; --accent: #16a34a; --accent-soft: #22c55e; --accent-glow: #16a34a33; --cta: #4ade80; --cta-soft: #65e68a; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display: "Space Mono", var(--mono); --pad: clamp(22px, 5vw, 72px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--mono); letter-spacing: 0; -webkit-font-smoothing: antialiased; margin: 0; font-size: 16px; line-height: 1.7; } a { color: inherit; } .pad { padding-left: var(--pad); padding-right: var(--pad); } section { scroll-margin-top: 80px; } /* ---------- nav ---------- */ .nav { z-index: 30; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: #fcfcfbeb; position: sticky; top: 0; } .row { justify-content: space-between; align-items: center; height: 64px; display: flex; } .brandmini { align-items: center; gap: 11px; font-size: 13px; font-weight: 700; display: flex; text-decoration: none; } .glyph { flex: none; width: auto; height: 34px; display: block; } .navlinks { color: var(--gray); align-items: center; gap: 30px; font-size: 14px; display: flex; } .navlinks a { color: inherit; text-decoration: none; transition: color .12s; } .navlinks a:hover { color: var(--ink); } .fsbtn { font-family: var(--mono); border: 1px solid var(--ink); color: var(--ink); cursor: pointer; background: none; align-items: center; gap: 8px; padding: 8px 15px; font-size: 13px; display: inline-flex; text-decoration: none; transition: background .15s, color .15s; } .fsbtn:hover { background: var(--ink); color: var(--paper); } /* ---------- mobile menu: hamburger + slide-out drawer ---------- */ .navtoggle { display: none; /* desktop hidden; shown < 760px */ flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ink); background: none; cursor: pointer; } .navtoggle-bar { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--ink); } .navscrim { display: none; /* shown < 760px */ position: fixed; inset: 0; z-index: 40; background: #0b0b0b59; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .navdrawer { display: none; /* shown < 760px */ position: fixed; top: 0; right: 0; z-index: 50; flex-direction: column; width: min(84vw, 320px); height: 100%; padding: 18px; background: var(--paper); border-left: 1px solid var(--ink); transform: translateX(100%); transition: transform .25s ease; } .navdrawer-close { align-self: flex-end; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); background: none; color: var(--ink); font-family: var(--mono); font-size: 24px; line-height: 1; cursor: pointer; } .navdrawer-links { display: flex; flex-direction: column; margin-top: 20px; } .navdrawer-link { padding: 15px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; text-decoration: none; } .navdrawer-link.cta { margin-top: 18px; border: 1px solid var(--ink); font-weight: 700; text-align: center; } button.navdrawer-link { border: none; border-bottom: 1px solid var(--line); width: 100%; text-align: left; background: none; font: inherit; font-size: 16px; cursor: pointer; } .navdrawer-me { padding: 4px 4px 14px; color: var(--faint); font-size: 13px; word-break: break-all; } /* open state — `nav-open` is set on by the hamburger */ .nav-open { overflow: hidden; } .nav-open .navscrim { opacity: 1; pointer-events: auto; } .nav-open .navdrawer { transform: translateX(0); } @media (max-width: 760px) { .navlinks { display: none; } .navtoggle { display: flex; } .navscrim { display: block; } .navdrawer { display: flex; } } /* ---------- hero ---------- */ .hero { text-align: left; flex-direction: column; justify-content: center; align-items: flex-start; min-height: calc(100svh - 64px); padding-top: 48px; padding-bottom: 64px; display: flex; position: relative; overflow: hidden; } .heroinner { z-index: 1; width: 100%; max-width: 720px; position: relative; } .net { pointer-events: none; z-index: 0; width: 62%; height: 100%; position: absolute; top: 0; right: 0; object-fit: contain; object-position: center right; -webkit-mask-image: linear-gradient(270deg, #000 46%, #0000 96%); mask-image: linear-gradient(270deg, #000 46%, #0000 96%); } h1 { font-family: var(--display); letter-spacing: -.015em; max-width: 17ch; margin: 0; font-size: clamp(38px, 6.2vw, 78px); font-weight: 700; line-height: 1.06; } .divider { background: var(--accent); width: 64px; height: 4px; box-shadow: 0 0 12px var(--accent-glow); margin: 28px 0 26px; } .subcopy { color: var(--gray); max-width: 52ch; margin: 0 0 38px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.72; } .subcopy strong { color: var(--ink); } /* ---------- declare form (hero) ---------- */ .action { align-items: stretch; gap: 12px; width: min(640px, 100%); margin: 0; display: flex; } .picker { flex: auto; min-width: 0; position: relative; } .pin { pointer-events: none; color: var(--faint); font-size: 15px; position: absolute; top: 50%; left: 18px; transform: translateY(-50%); white-space: nowrap; } .declareinput { border: 1.5px solid var(--ink); min-width: 0; width: 100%; height: 60px; font-family: var(--mono); color: var(--ink); background: #fff; outline: none; padding: 0 16px 0 172px; font-size: 16px; border-radius: 0; } .declareinput:focus { border-color: var(--accent); } .cta { font-family: var(--mono); border: 1.5px solid var(--cta); background: var(--cta); color: #0b0b0b; cursor: pointer; white-space: nowrap; flex: none; align-items: center; justify-content: center; gap: 8px; height: 60px; padding: 0 30px; font-size: 17px; font-weight: 700; transition: box-shadow .15s, background .15s; display: inline-flex; text-decoration: none; } .cta:hover { background: var(--cta-soft); box-shadow: 0 0 18px var(--accent-glow); } .formnote { color: var(--faint); max-width: 52ch; margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; } .formerror { color: #9f1239; margin: 10px 0 0; font-size: 13px; } .donebox { border: 1.5px solid var(--accent); background: #fff; width: min(640px, 100%); padding: 22px 24px; } .donehead { font-family: var(--display); margin: 0 0 10px; font-size: 19px; font-weight: 700; } .donebody { color: var(--gray); margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; } .donebody strong { color: var(--ink); } .backlink { font-family: var(--mono); color: var(--accent); text-underline-offset: 3px; cursor: pointer; background: none; border: none; padding: 0; font-size: 12.5px; text-decoration: underline; } .liveline { color: var(--faint); align-items: center; gap: 9px; margin: 26px 0 0; font-size: 13px; display: flex; } .livedot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } @media (max-width: 640px) { .action { flex-direction: column; } .pin { display: none; } .declareinput { padding-left: 16px; } } /* ---------- stats strip ---------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); gap: 0; display: grid; } .stat { border-left: 1px solid var(--line); padding: 30px 26px; } .stat:first-child { border-left: 0; padding-left: 0; } .statnum { font-family: var(--display); color: var(--accent); font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.1; } .statlabel { color: var(--gray); margin-top: 4px; font-size: 13.5px; line-height: 1.55; } @media (max-width: 720px) { .stats { grid-template-columns: 1fr; } .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .stat:first-child { border-top: 0; } } /* ---------- sections ---------- */ .section { padding-top: 110px; padding-bottom: 110px; } .kicker { color: var(--accent); letter-spacing: .06em; margin: 0 0 18px; font-size: 14px; font-weight: 700; } .big { font-family: var(--display); max-width: 22ch; margin: 0; font-size: clamp(28px, 5vw, 58px); font-weight: 700; line-height: 1.05; } .seclede { color: var(--gray); max-width: 56ch; margin: 26px 0 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.72; } /* ---------- science: three stages ---------- */ .stages { grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 64px; display: grid; } .stage { border-top: 2px solid var(--ink); padding-top: 22px; position: relative; } .stage.lit { border-top-color: var(--accent); } .stageidx { font-family: var(--display); color: var(--faint); font-size: 13px; letter-spacing: .12em; } .stage.lit .stageidx { color: var(--accent); } .stagename { font-family: var(--display); margin: 10px 0 12px; font-size: 22px; font-weight: 700; line-height: 1.2; } .stagebody { color: var(--gray); margin: 0; font-size: 14.5px; line-height: 1.65; } .secnote { border-left: 3px solid var(--accent); color: var(--gray); max-width: 62ch; margin: 64px 0 0; padding: 4px 0 4px 22px; font-size: 14.5px; line-height: 1.72; } .secnote strong { color: var(--ink); } @media (max-width: 860px) { .stages { grid-template-columns: 1fr; gap: 40px; } } /* ---------- the loop ---------- */ .loopgrid { grid-template-columns: repeat(4, 1fr); gap: 44px 34px; margin-top: 64px; display: grid; } .loopidx { font-family: var(--display); color: var(--accent); font-size: 13px; letter-spacing: .12em; font-weight: 700; } .loopname { font-family: var(--display); margin: 8px 0 8px; font-size: 18px; font-weight: 700; } .loopbody { color: var(--gray); margin: 0; font-size: 13.5px; line-height: 1.6; } @media (max-width: 1000px) { .loopgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .loopgrid { grid-template-columns: 1fr; gap: 36px; } } /* ---------- features ---------- */ .featgrid { grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 64px; display: grid; } .feat { border: 1px solid var(--line); background: #fff; padding: 26px 28px; transition: border-color .15s; } .feat:hover { border-color: var(--ink); } .feattag { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 700; } .featname { font-family: var(--display); margin: 10px 0 8px; font-size: 19px; font-weight: 700; } .featbody { color: var(--gray); margin: 0; font-size: 13.5px; line-height: 1.62; } @media (max-width: 760px) { .featgrid { grid-template-columns: 1fr; } } /* ---------- a word from the founder ---------- */ .letter { border-left: 3px solid var(--accent); max-width: 66ch; margin-top: 56px; padding: 6px 0 6px 28px; } .letter p { color: var(--gray); margin: 0 0 26px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; } .letter p strong { color: var(--ink); } .signature { font-family: var(--display); color: var(--ink); margin-top: 34px; font-size: 17px; font-weight: 700; } .sigrole { color: var(--faint); margin-top: 2px; font-size: 13px; } /* ---------- leave a trail ---------- */ .trailsec { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fcfcfb 0%, #f4faf5 100%); } .trailform { width: min(640px, 100%); margin-top: 40px; } .trailrow { align-items: stretch; gap: 10px; display: flex; } .trailinput { border: 1.5px solid var(--ink); min-width: 0; height: 60px; font-family: var(--mono); color: var(--ink); background: #fff; outline: none; flex: auto; padding: 0 16px; font-size: 16px; border-radius: 0; } .trailinput:focus { border-color: var(--accent); } .trailrow + .trailrow { margin-top: 10px; } /* ---------- signup step (shared) ---------- */ .signupbox { border: 1.5px solid var(--ink); background: #fff; width: min(640px, 100%); padding: 22px 24px; } .signuplede { color: var(--gray); margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; } .signuplede strong { color: var(--ink); } .signupbox .trailrow + .trailrow { margin-top: 10px; } .signupbox .backlink { margin-top: 14px; } @media (max-width: 640px) { .trailrow { flex-direction: column; } } /* ---------- become (full-page CTA) ---------- */ .becomesec { background: var(--ink); color: var(--paper); text-align: center; flex-direction: column; justify-content: center; align-items: center; min-height: 100svh; display: flex; } .becomeinner { flex-direction: column; align-items: center; width: min(760px, 100%); display: flex; } .becomesec .kicker { color: var(--cta); } .becomesec .big { max-width: none; } .becomesec .seclede { color: #b9b9b2; } .becomeform { flex-direction: column; align-items: center; width: min(640px, 100%); margin-top: 44px; display: flex; } .becomeform > div { width: 100%; } .becomesec .declareinput { border-color: transparent; } .becomesec .declareinput:focus { border-color: var(--cta); } .becomesec .donebox { color: var(--ink); text-align: left; } .becomesec .donebox .donehead { color: var(--ink); } .becomesec .signupbox { border-color: var(--cta); color: var(--ink); text-align: left; margin: 0 auto; } .becomesec .formnote { color: #8b8b84; } .becomesec .formerror { color: #fda4af; } .becomesec .backlink { color: var(--accent); } /* ---------- auth: the door (signup / signin / forgot / reset) ---------- */ .authpage { min-height: 100svh; flex-direction: column; display: flex; } .authtop { padding-top: 18px; padding-bottom: 18px; } .authmain { flex: auto; justify-content: center; align-items: center; padding-bottom: 96px; display: flex; } .authinner { width: min(480px, 100%); } .authhead { font-family: var(--display); letter-spacing: -.015em; margin: 0; font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; line-height: 1.1; } .authlede { color: var(--gray); max-width: 44ch; margin: 18px 0 0; font-size: 15.5px; line-height: 1.7; } .authform { width: 100%; margin-top: 44px; } .authstep { flex-direction: column; align-items: flex-start; gap: 12px; display: flex; } .authlabel { color: var(--gray); font-size: 14px; } .authwhisper { color: var(--faint); margin: 0; font-size: 13px; } .authinput { border: 1.5px solid var(--ink); width: 100%; height: 60px; font-family: var(--mono); color: var(--ink); background: #fff; outline: none; padding: 0 16px; font-size: 16px; border-radius: 0; } .authinput:focus { border-color: var(--accent); } .authcta { width: 100%; margin-top: 6px; } .authstep .backlink { margin-top: 6px; } .authform .donebox { width: 100%; } .authalt { color: var(--faint); margin: 32px 0 0; font-size: 13px; } .authalt a { color: var(--accent); text-underline-offset: 3px; } .authsep { color: var(--line-strong); } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--line); padding-top: 40px; padding-bottom: 40px; position: relative; } .footrow { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; display: flex; } .footlinks { flex-wrap: wrap; gap: 24px; font-size: 14px; display: flex; } .footlinks a { color: var(--gray); text-decoration: none; } .footlinks a:hover { color: var(--ink); } .fine { color: var(--faint); margin: 18px 0 0; font-size: 12.5px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }