hypercerts-org · s-adamantine · May 3, 2026 · May 3, 2026 · May 3, 2026 · May 5, 2026
diff --git a/.env.local.example b/.env.local.example
@@ -1,8 +1,20 @@
 # Required: The PDS / handle resolver URL
 NEXT_PUBLIC_PDS_URL=https://certified.one
 
-# Required in production: The public URL of this app (used for OAuth client_id and redirect_uris)
-PUBLIC_URL=http://localhost:3000
+# Public URL of this app — used for OAuth client_id, redirect_uris, and the
+# CSRF Origin allowlist.
+#
+# Production:  set to the deployed origin, e.g. https://certified.app
+# Local dev:   use http://127.0.0.1:3000 (NOT http://localhost:3000).
+#              The atproto OAuth client rejects http:// URLs unless they're
+#              the spec's `http://localhost` (literal, no port) loopback
+#              exception — and cookies don't cross localhost ↔ 127.0.0.1,
+#              so pick the IP form and stick to it for the whole flow.
+#              When PUBLIC_URL is missing or http://, src/lib/auth/oauth-client.ts
+#              auto-switches to the loopback dev metadata
+#              (buildAtprotoLoopbackClientMetadata) so sign-in works without
+#              a public HTTPS host.
+PUBLIC_URL=http://127.0.0.1:3000
 
 # Required in production: Secret for signing session cookies (generate with: openssl rand -hex 32)
 COOKIE_SECRET=dev-secret-change-in-production
@@ -13,6 +25,8 @@ UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
 
 # Optional: Set to enable confidential client (private_key_jwt) authentication
+# in production. Ignored in loopback dev mode (the spec mandates
+# token_endpoint_auth_method: none for loopback clients).
 # Generate with: openssl ecparam -name prime256v1 -genkey -noout | openssl pkcs8 -topk8 -nocrypt
 # ATPROTO_PRIVATE_KEY=
 

diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.pi/
diff --git a/AGENTS.md b/AGENTS.md
diff --git a/public/assets/partners/bluesky_logo.svg b/public/assets/partners/bluesky_logo.svg
diff --git a/public/assets/watercolor-blue-circle.png b/public/assets/watercolor-blue-circle.png
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -18,88 +18,85 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <div className="app-page">
-      <div className="app-page__inner max-w-3xl">
-        <h1 className="font-mono text-h1 text-navy tracking-tight mb-8">
-          About Certified
-        </h1>
+    <div className="prose-page">
+      <div className="prose-page__inner">
+        <header className="prose-page__header">
+          <span className="landing-label">About</span>
+          <h1 className="prose-page__title">
+            Identity, <span className="prose-page__title-italic">portable</span>.
+          </h1>
+          <p className="prose-page__lede">
+            Certified is a passwordless identity platform built on AT Protocol — one
+            account that travels across every partner app, with full data portability
+            and no vendor lock-in.
+          </p>
+        </header>
 
-        <div className="prose prose-navy max-w-none space-y-8">
+        <article className="prose-page__body">
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">What is Certified?</h2>
+            <h2>What is Certified?</h2>
             <p>
               Certified is a passwordless identity platform built on{" "}
-              <a
-                href="https://atproto.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://atproto.com" target="_blank" rel="noopener noreferrer">
                 AT Protocol
               </a>
               , the open standard behind Bluesky and a growing ecosystem of decentralized
               applications. It lets you create a single account that works across every partner
               app — no passwords, no vendor lock-in, and full control over your data.
             </p>
-            <p className="mt-4">
+            <p>
               When you sign up for Certified, you get an AT Protocol identity and a Personal Data
               Server (PDS) hosted at <strong>certified.one</strong>. Your profile, preferences,
-              and activity travel with you to every app that supports AT Protocol — and
-              if the app supports Certified directly, you can sign in with just your email,
-              no password needed.
+              and activity travel with you to every app that supports AT Protocol — and if the
+              app supports Certified directly, you can sign in with just your email, no password
+              needed.
             </p>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">How does it work?</h2>
+            <h2>How does it work?</h2>
             <p>
               Sign-in is passwordless: you enter your email, receive a one-time code, and
               you&apos;re in. Behind the scenes, Certified issues an AT Protocol identity tied to
               your account. That identity is cryptographically verifiable and portable — it works
               the same whether you&apos;re on certified.app, a partner application, or any future
               service that speaks AT Protocol.
             </p>
-            <p className="mt-4">
-              Your data lives on your Personal Data Server. If you ever want to leave, you can export everything or migrate your
-              identity to a different PDS provider — no data is locked inside Certified.
+            <p>
+              Your data lives on your Personal Data Server. If you ever want to leave, you can
+              export everything or migrate your identity to a different PDS provider — no data is
+              locked inside Certified.
             </p>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">What is AT Protocol?</h2>
+            <h2>What is AT Protocol?</h2>
             <p>
               AT Protocol (Authenticated Transfer Protocol) is an open, federated protocol for
               building social and identity applications. Unlike centralized platforms where one
               company controls your account, AT Protocol separates identity from the application
               layer. Your identity is yours — verifiable, portable, and independent of any single
               service.
             </p>
-            <p className="mt-4">
+            <p>
               Certified builds on AT Protocol to provide a managed, user-friendly entry point: you
               get the benefits of decentralized identity without needing to understand the
               underlying protocol or run your own infrastructure.
             </p>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">
-              Who operates Certified?
-            </h2>
+            <h2>Who operates Certified?</h2>
             <p>
               Certified is operated by the{" "}
-              <a
-                href="https://hypercerts.org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://hypercerts.org" target="_blank" rel="noopener noreferrer">
                 Hypercerts Foundation
               </a>
               , a Delaware nonstock corporation founded in February 2023. The Foundation develops
               open infrastructure for the hypercerts ecosystem — tools and protocols that help
               track, fund, and reward positive impact.
             </p>
-            <p className="mt-4">
+            <p>
               Certified was created because the hypercerts ecosystem needed a portable identity
               layer: a way for users to move between applications while keeping their profile,
               contributions, and reputation intact. Rather than build a proprietary login system,
@@ -109,71 +106,57 @@ export default function AboutPage() {
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">
-              How is Certified different from &quot;Sign in with Google&quot;?
-            </h2>
+            <h2>How is Certified different from &ldquo;Sign in with Google&rdquo;?</h2>
             <p>
-              Both Certified and &quot;Sign in with Google&quot; let you use one account across
+              Both Certified and &ldquo;Sign in with Google&rdquo; let you use one account across
               multiple apps. The key difference is ownership and portability:
             </p>
-            <ul className="list-disc pl-6 mt-4 space-y-2">
+            <ul>
               <li>
                 <strong>With Google:</strong> Google controls your identity. If Google suspends
                 your account or changes their terms, you lose access to every app you signed into.
                 Your data stays with each individual app.
               </li>
               <li>
-                <strong>With Certified:</strong> Your identity is an AT Protocol identity — it&apos;s
-                cryptographically yours. You can export your data, migrate to another provider, or
-                even self-host. No single company can revoke your identity.
+                <strong>With Certified:</strong> Your identity is an AT Protocol identity —
+                it&apos;s cryptographically yours. You can export your data, migrate to another
+                provider, or even self-host. No single company can revoke your identity.
               </li>
             </ul>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">Open source</h2>
+            <h2>Open source</h2>
             <p>
               Every component of Certified is open source. The application code, the PDS
               infrastructure, and the protocol it builds on are all publicly auditable. You can
               review the source on{" "}
-              <a
-                href="https://github.com/hypercerts-org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://github.com/hypercerts-org" target="_blank" rel="noopener noreferrer">
                 GitHub
               </a>
               .
             </p>
-            <p className="mt-4">
+            <p>
               Security through transparency, not obscurity. If you find an issue, you can report
               it directly or submit a fix.
             </p>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">Infrastructure</h2>
+            <h2>Infrastructure</h2>
             <p>
               The Personal Data Servers operated by Certified are hosted on cloud infrastructure
               located within the European Union. The service is designed to comply with GDPR and
               the Digital Services Act.
             </p>
-            <p className="mt-4">
-              For more details, see our{" "}
-              <Link href="/privacy" className="text-blue-600 underline hover:text-blue-800">
-                Privacy Policy
-              </Link>{" "}
-              and{" "}
-              <Link href="/dsa" className="text-blue-600 underline hover:text-blue-800">
-                DSA Compliance
-              </Link>{" "}
-              page.
+            <p>
+              For more details, see our <Link href="/privacy">Privacy Policy</Link> and{" "}
+              <Link href="/dsa">DSA Compliance</Link> page.
             </p>
           </section>
 
           <section>
-            <h2 className="font-mono text-xl text-navy mb-4">Contact</h2>
+            <h2>Contact</h2>
             <p>
               <strong>Hypercerts Foundation</strong>
               <br />
@@ -183,54 +166,29 @@ export default function AboutPage() {
               <br />
               United States
             </p>
-            <p className="mt-4">
+            <p>
               Email:{" "}
-              <a
-                href="mailto:support@hypercerts.org"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
-                support@hypercerts.org
-              </a>
+              <a href="mailto:support@hypercerts.org">support@hypercerts.org</a>
             </p>
-            <p className="mt-4">
-              <a
-                href="https://bsky.app/profile/hypercerts.org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+            <p>
+              <a href="https://bsky.app/profile/hypercerts.org" target="_blank" rel="noopener noreferrer">
                 Bluesky
               </a>
               {" · "}
-              <a
-                href="https://x.com/hypercerts"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://x.com/hypercerts" target="_blank" rel="noopener noreferrer">
                 Twitter/X
               </a>
               {" · "}
-              <a
-                href="https://www.linkedin.com/company/hypercerts"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://www.linkedin.com/company/hypercerts" target="_blank" rel="noopener noreferrer">
                 LinkedIn
               </a>
               {" · "}
-              <a
-                href="https://github.com/hypercerts-org"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 underline hover:text-blue-800"
-              >
+              <a href="https://github.com/hypercerts-org" target="_blank" rel="noopener noreferrer">
                 GitHub
               </a>
             </p>
           </section>
-        </div>
+        </article>
       </div>
     </div>
   );