ux: full ui/ux audit — consistent back buttons, clean about page, css cleanup

- SubpageShell: replace absolute-positioned box back button with inline text link (matches certificate style)
- SubpageShell: hide floating emoji on subpages (cleaner hero for About/Privacy/Terms)
- About: update card borders to 2px solid #1a1a1a matching home card style
- ErrorDisplay: remove mixed Tailwind classes, use inline styles only
- globals.css: remove orphaned certificate action button CSS (old top-bar buttons)
- globals.css: remove unused modal-fadein animation
- globals.css: clean up orphaned mobile overrides for removed elements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/about/page.tsx

@@ -39,15 +39,14 @@ export default function AboutPage() {
       microcopy="Last updated March 2026"
     >
       <div className="about-cards" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        {SECTIONS.map(({ title, body, email, coffee }, i) => (
+        {SECTIONS.map(({ title, body, email, coffee }) => (
           <div
             key={title}
             style={{
-              padding: '18px 16px',
-              border: '1px solid #c9c9c9',
+              padding: '20px 18px',
+              border: '2px solid #1a1a1a',
               borderRadius: '0',
-              background: '#f3f3f3',
-              boxShadow: i === 0 ? '0 1px 6px rgba(0,0,0,0.04)' : 'none',
+              background: '#f2f2f2',
             }}
           >
             <p style={{ fontFamily: UI, fontSize: 'clamp(16px, 4.2vw, 17px)', fontWeight: 700, color: '#160A06', margin: '0 0 10px 0' }}>

src/app/globals.css

@@ -210,40 +210,20 @@
 }
 
 /* Subpage ← back link */
-.subpage-back-link,
-.certificate-action-back-link,
-.certificate-action-a4,
-.certificate-action-share {
+.subpage-back-link {
   font-family: var(--font-dm), -apple-system, sans-serif;
-  font-size: 20px;
+  font-size: 13px;
+  font-weight: 600;
   color: #0a0a0a;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border: 1px solid #0a0a0a;
-  border-radius: 0;
-  background: #f6f6f6;
-  transition: color 0.15s, background 0.15s;
-  font-weight: 500;
-  line-height: 1;
-}
-
-.subpage-back-link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-}
-.subpage-back-link:hover,
-.certificate-action-back-link:hover,
-.certificate-action-a4:hover,
-.certificate-action-share:hover {
-  color: #0a0a0a;
-  background: #e9e9e9;
+  gap: 6px;
+  padding: 4px 0;
+  background: none;
+  border: none;
+  -webkit-tap-highlight-color: transparent;
+  letter-spacing: 0.02em;
 }
 
 /* ── Base interaction defaults ── */
@@ -283,11 +263,6 @@ button {
   flex-shrink: 0;
 }
 
-/* ── Share modal fade-in ── */
-@keyframes modal-fadein {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
 
 /* ── Stamp: rubber-stamp impact animation ── */
 @keyframes stamp-in {
@@ -489,15 +464,6 @@ a.subpage-inline-mail {
   width: min(100%, 480px);
 }
 
-.certificate-top-actions {
-  width: 100%;
-}
-
-.certificate-actions-right {
-  min-width: 0;
-  justify-content: flex-end;
-}
-
 .site-footer-source-link {
   opacity: 0.9;
 }
@@ -508,12 +474,6 @@ a.subpage-inline-mail {
   100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10,10,10,0); }
 }
 
-.certificate-action-a4:hover,
-.certificate-action-share:hover,
-.certificate-action-back-link:hover {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
-}
-
 .input-submit-button:hover {
   box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
 }
@@ -522,9 +482,6 @@ a.subpage-inline-mail {
   opacity: 0.9;
 }
 
-.certificate-action-a4:active,
-.certificate-action-share:active,
-.certificate-action-back-link:active,
 .site-footer-nav a:active,
 .site-footer-source-link:active {
   opacity: 0.82;
@@ -579,10 +536,6 @@ a.subpage-inline-mail {
   animation: section-fade-up 420ms ease-out both;
 }
 
-.certificate-top-actions {
-  animation: section-fade-up 280ms ease-out both;
-}
-
 .certificate-card-shell {
   animation: section-fade-up 380ms ease-out both;
 }
@@ -609,7 +562,6 @@ a.subpage-inline-mail {
   .page-hero,
   .input-block,
   .chips-section,
-  .certificate-top-actions,
   .certificate-card-shell,
   .site-footer,
   .about-cards > div,
@@ -673,44 +625,6 @@ a.subpage-inline-mail {
     margin: 0 auto !important;
   }
 
-  .certificate-top-actions {
-    gap: 8px !important;
-    align-items: center !important;
-    justify-content: space-between !important;
-  }
-
-  .certificate-actions-right {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
-    flex-wrap: nowrap !important;
-    gap: 8px !important;
-    min-width: 0 !important;
-    flex: 1 1 auto !important;
-  }
-
-  .certificate-action-a4,
-  .certificate-action-share {
-    min-height: 44px !important;
-    height: 44px !important;
-  }
-
-  .certificate-action-share {
-    width: 44px !important;
-    min-width: 44px !important;
-  }
-
-  .certificate-action-a4 {
-    min-width: 92px !important;
-    padding: 0 10px !important;
-    flex: 0 0 auto !important;
-  }
-
-
-  /* Certificate action buttons: outside zoom wrapper, full width */
-  .cert-actions { flex-direction: column !important; width: 100% !important; }
-  .cert-buy-btn, .cert-share-btn { width: 100% !important; }
-
   /* Hero: keep CTA above the fold on small screens */
   .page-hero { padding-bottom: 10px; }
   .page-hero-emoji { margin-bottom: 8px; }

src/components/ErrorDisplay.tsx

@@ -2,7 +2,7 @@
 
 import { AnalysisError } from '@/hooks/useRepoAnalysis'
 
-const GH_FONT = `var(--font-dm), -apple-system, sans-serif`
+const FONT = `var(--font-dm), -apple-system, sans-serif`
 
 interface Props {
   error: AnalysisError
@@ -11,20 +11,28 @@ interface Props {
 
 export default function ErrorDisplay({ error, onRetry }: Props) {
   return (
-    <div className="w-full max-w-2xl mx-auto mt-6" style={{ fontFamily: GH_FONT }}>
-      <div style={{
-        borderLeft: '3px solid #8B1A1A',
-        paddingLeft: '16px',
-      }}>
-        <p style={{ fontSize: '14px', fontWeight: 600, color: '#8B1A1A', marginBottom: '4px' }}>
+    <div style={{ width: '100%', marginTop: '24px', fontFamily: FONT }}>
+      <div style={{ borderLeft: '3px solid #8B1A1A', paddingLeft: '16px' }}>
+        <p style={{ fontSize: '14px', fontWeight: 600, color: '#8B1A1A', margin: '0 0 4px 0' }}>
           {error.message}
         </p>
         {error.retryAfter ? (
-          <p style={{ fontSize: '13px', color: '#7A5C38' }}>retry in {error.retryAfter}s</p>
+          <p style={{ fontSize: '13px', color: '#7A5C38', margin: 0 }}>retry in {error.retryAfter}s</p>
         ) : (
           <button
             onClick={onRetry}
-            style={{ fontSize: '13px', color: '#7A5C38', background: 'none', border: 'none', cursor: 'pointer', padding: 0, transition: 'color 0.15s' }}
+            style={{
+              fontFamily: FONT,
+              fontSize: '13px',
+              color: '#7A5C38',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              textDecoration: 'underline',
+              textUnderlineOffset: '3px',
+              transition: 'color 0.15s',
+            }}
             onMouseEnter={e => (e.currentTarget.style.color = '#2A1A0E')}
             onMouseLeave={e => (e.currentTarget.style.color = '#7A5C38')}
           >

src/components/SubpageShell.tsx

@@ -3,11 +3,12 @@ import Link from 'next/link'
 import SiteFooter from '@/components/SiteFooter'
 import PageHero from '@/components/PageHero'
 
+const UI = `var(--font-dm), -apple-system, sans-serif`
+
 type Props = {
   subtitle: ReactNode
   title?: string
   microcopy?: ReactNode | null
-  /** Primary CTA under the two-line hero (e.g. FAQ) */
   headerExtra?: ReactNode
   children: ReactNode
 }
@@ -16,13 +17,32 @@ export default function SubpageShell({ subtitle, title, microcopy, headerExtra,
   return (
     <main className="page-shell-main">
       <div className="page-shell-inner">
-        <Link href="/" className="subpage-back-link" aria-label="Back">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-            <path d="M15 18l-6-6 6-6"></path>
-            <path d="M9 12h12"></path>
-          </svg>
-        </Link>
-        <PageHero subtitle={subtitle} title={title} microcopy={microcopy} brandHref="/" />
+        <div style={{ paddingBottom: '4px', marginBottom: '2px' }}>
+          <Link
+            href="/"
+            aria-label="Back to home"
+            style={{
+              fontFamily: UI,
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              color: '#0a0a0a',
+              textDecoration: 'none',
+              fontSize: '13px',
+              fontWeight: 600,
+              letterSpacing: '0.02em',
+              padding: '4px 0',
+              WebkitTapHighlightColor: 'transparent',
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="M15 18l-6-6 6-6"></path>
+            </svg>
+            back
+          </Link>
+        </div>
+
+        <PageHero subtitle={subtitle} title={title} microcopy={microcopy} brandHref="/" hideEmoji />
         {headerExtra ? <div className="page-hero-extra">{headerExtra}</div> : null}
 
         <div className="page-shell-body page-shell-body--subpage">{children}</div>