style: unify About + Legal page layouts

Legal page now uses same structure as About — shared .record-card
class, .record-label heading, .record-value body. Same border weight,
padding, card rhythm, and email link treatment.

Kept pages separate for SEO and bookmarkable URLs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/legal/legalContent.tsx

@@ -3,104 +3,81 @@
 import type { ReactNode } from 'react'
 import SubpageShell from '@/components/SubpageShell'
 
-const UI = `var(--font-courier), system-ui, sans-serif`
 const MONO = `var(--font-courier), system-ui, sans-serif`
 
-function SectionTitle({ children, id }: { children: string; id: string }) {
-  return (
-    <div id={id} style={{ scrollMarginTop: '90px' }}>
-      <p
-        style={{
-          fontFamily: MONO,
-          fontSize: '10px',
-          fontWeight: 700,
-          letterSpacing: '0.14em',
-          textTransform: 'uppercase',
-          color: '#8a8278',
-          margin: '0 0 8px 0',
-        }}
-      >
-        {children}
-      </p>
-    </div>
-  )
+type Section = {
+  id: string
+  heading: string
+  body: ReactNode
 }
 
-function Para({ children }: { children: ReactNode }) {
-  return (
-    <p
-      style={{
-        fontFamily: UI,
-        fontSize: 'clamp(14px, 3.8vw, 15px)',
-        color: '#4a4440',
-        lineHeight: 1.75,
-        margin: '0 0 12px 0',
-      }}
-    >
-      {children}
-    </p>
-  )
-}
+const SECTIONS: Section[] = [
+  {
+    id: 'terms',
+    heading: 'Terms of Use',
+    body: 'Commitment Issues is a parody / entertainment tool. Generated "death certificates" are not legally valid documents. "Cause of death" labels are algorithmic and should not be treated as factual statements about a person or organization. By using the service you acknowledge we may display your submitted repo name publicly. Terms may update; continued use means acceptance.',
+  },
+  {
+    id: 'data-sources',
+    heading: 'Data Sources',
+    body: "The tool analyzes public data from GitHub's public API — repository metadata, commit activity, archive status, open issues. We do not access private code, credentials, or anything not already publicly available on GitHub.",
+  },
+  {
+    id: 'privacy',
+    heading: 'Privacy',
+    body: "No accounts. No logins. No passwords collected. When you submit a public GitHub URL or username we use it to fetch public data from GitHub. We store a small recently-buried list on the homepage (repo name, generated cause, score, analyzed timestamp). Nothing sensitive.",
+  },
+  {
+    id: 'analytics',
+    heading: 'Analytics',
+    body: 'Privacy-friendly analytics only — aggregate counts, not personal profiles. You can avoid submitting private or sensitive URLs; this tool is intended for public GitHub data only.',
+  },
+  {
+    id: 'contact',
+    heading: 'Contact',
+    body: 'For questions or requests: ',
+    email: 'dot.systems@proton.me',
+  } as Section & { email: string },
+]
 
 export default function LegalContent() {
   return (
     <SubpageShell
       title="Legal"
       subtitle={
-        <span style={{ fontFamily: MONO, fontSize: '12px', color: '#7a7268', letterSpacing: '0.04em' }}>
+        <span style={{ fontFamily: MONO, fontSize: '12px', color: 'var(--c-muted)', letterSpacing: '0.04em' }}>
           Terms of use and privacy policy.
         </span>
       }
       microcopy={null}
-      headerExtra={null}
     >
-      <div
-        className="ux-live-section"
-        style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '12px',
-          paddingTop: '6px',
-        }}
-      >
-        <div style={{ padding: '20px 18px', border: '2px solid #1a1a1a', background: '#EDE8E1' }}>
-          <SectionTitle id="terms">Terms</SectionTitle>
-          <Para>
-            Commitment Issues is a parody / entertainment tool. Generated “death certificates” are not legally valid documents.
-          </Para>
-          <Para>
-            The tool analyzes public data from GitHub’s public API (for example repository metadata and activity). “Cause of death”
-            labels and text are algorithmic and should not be treated as factual statements about a person or organization.
-          </Para>
-          <Para>
-            By using the service, you acknowledge that we may process the public repo URL or username you submit and display recent
-            public “burials” on the homepage (repo name, generated cause, score, and timestamp). We may update these terms from time to
-            time; continued use means acceptance.
-          </Para>
-        </div>
-
-        <div style={{ padding: '20px 18px', border: '2px solid #1a1a1a', background: '#EDE8E1' }}>
-          <SectionTitle id="privacy">Privacy</SectionTitle>
-          <Para>
-            We don’t run accounts, logins, or collect passwords. When you submit a public GitHub URL or username, we use it to fetch
-            public repository data from GitHub in order to generate results.
-          </Para>
-          <Para>
-            We store a small “recently buried” list shown on the homepage (public repo name/full name plus generated fields like cause,
-            score, and analyzed timestamp). This is not intended to contain private information.
-          </Para>
-          <Para>
-            We also use privacy-friendly analytics to understand overall feature usage (aggregate counts, not personal profiles). You can
-            always avoid submitting private or sensitive URLs—this tool is intended for public GitHub data only.
-          </Para>
-          <Para>
-            Questions or requests: <a className="subpage-inline-mail" href="mailto:dot.systems@proton.me">dot.systems@proton.me</a>.
-          </Para>
-        </div>
-
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {SECTIONS.map((section) => {
+          const email = (section as Section & { email?: string }).email
+          return (
+            <div
+              key={section.id}
+              id={section.id}
+              className="record-card"
+              style={{ border: '2px solid var(--c-border)' }}
+            >
+              <p className="record-label">{section.heading}</p>
+              <p className="record-value" style={{ fontSize: 'clamp(14px, 3.8vw, 15px)', lineHeight: 1.75, color: 'var(--c-ink-2)' }}>
+                {section.body}
+                {email && (
+                  <a
+                    href={`mailto:${email}`}
+                    className="subpage-inline-mail"
+                    style={{ fontFamily: MONO }}
+                  >
+                    {email}
+                  </a>
+                )}
+              </p>
+            </div>
+          )
+        })}
       </div>
     </SubpageShell>
   )
 }
-