Refine Fide AI organization card design

README.md

@@ -8,20 +8,20 @@ short_description: Open research and benchmarks for faith-aware AI evaluation.
 
 # Fide AI
 
-**Open research and benchmarks for faith-aware AI evaluation.**
+**Public standards for faith-aware AI evaluation.**
 
-Fide AI develops public benchmarks, evaluation methods, and responsible-use
-standards for AI systems used around faith, moral guidance, and pastoral-care
-adjacent questions.
+Fide AI develops benchmarks, evaluation methods, and responsible-use standards
+for AI systems used around faith, moral guidance, and pastoral-care-adjacent
+questions.
 
-## Research Focus
+## Focus
 
 - Theological triage and tradition-aware evaluation
 - Faith and moral guidance benchmarks
 - Structured harness design for safer model behavior
 - Responsible-use standards for spiritually sensitive AI contexts
 
-## Featured Work
+## Featured
 
 | Project | Description |
 |---|---|

index.html

@@ -6,66 +6,193 @@
   <title>Fide AI</title>
   <style>
     :root { color-scheme: light dark; }
+    * { box-sizing: border-box; }
     body {
       margin: 0;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       background: transparent;
       color: inherit;
     }
-    .wrap {
-      max-width: 880px;
-      padding: 28px 32px;
+    .card {
+      max-width: 1120px;
+      padding: 22px 28px 24px;
+    }
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      font-weight: 750;
+      letter-spacing: .08em;
+      text-transform: uppercase;
+      color: #60a5fa;
+    }
+    .mark {
+      width: 10px;
+      height: 10px;
+      border-radius: 3px;
+      background: linear-gradient(135deg, #22c55e, #3b82f6 52%, #a855f7);
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, .10);
+    }
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
+      gap: 26px;
+      align-items: start;
     }
     h1 {
-      margin: 0 0 8px;
-      font-size: 32px;
-      line-height: 1.1;
+      margin: 0;
+      font-size: clamp(34px, 4vw, 54px);
+      line-height: .98;
       letter-spacing: 0;
+      font-weight: 820;
     }
     .lede {
-      margin: 0 0 18px;
-      font-size: 18px;
-      font-weight: 650;
+      margin: 12px 0 0;
+      max-width: 780px;
+      font-size: clamp(17px, 2vw, 23px);
+      line-height: 1.35;
+      font-weight: 720;
     }
-    p {
-      margin: 0 0 16px;
-      max-width: 760px;
+    .copy {
+      margin: 14px 0 0;
+      max-width: 820px;
+      font-size: 15px;
       line-height: 1.55;
+      color: color-mix(in srgb, currentColor 78%, transparent);
+    }
+    .panel {
+      border: 1px solid rgba(127,127,127,.22);
+      border-radius: 10px;
+      padding: 16px;
+      background: color-mix(in srgb, currentColor 4%, transparent);
     }
-    .grid {
+    .panel h2 {
+      margin: 0 0 10px;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: .075em;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+    .metric {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      grid-template-columns: 72px 1fr;
       gap: 10px;
-      margin: 20px 0;
-    }
-    .item {
-      border: 1px solid rgba(127, 127, 127, 0.25);
-      border-radius: 8px;
-      padding: 12px 14px;
-    }
-    .item strong { display: block; margin-bottom: 3px; }
-    .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
-    a { color: #2563eb; text-decoration: none; font-weight: 650; }
-    a:hover { text-decoration: underline; }
-    .note { margin-top: 18px; font-size: 14px; opacity: 0.8; }
+      padding: 8px 0;
+      border-top: 1px solid rgba(127,127,127,.16);
+      font-size: 14px;
+    }
+    .metric:first-of-type { border-top: 0; padding-top: 0; }
+    .num { font-weight: 820; color: #60a5fa; }
+    .label { color: color-mix(in srgb, currentColor 80%, transparent); }
+    .project {
+      margin-top: 20px;
+      display: grid;
+      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
+      gap: 14px;
+    }
+    .tile {
+      border: 1px solid rgba(127,127,127,.22);
+      border-radius: 10px;
+      padding: 16px;
+      background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(168,85,247,.08) 58%, transparent);
+    }
+    .tile h2 {
+      margin: 0 0 8px;
+      font-size: 20px;
+      line-height: 1.15;
+    }
+    .tile p, .focus li, .note {
+      font-size: 14px;
+      line-height: 1.5;
+      color: color-mix(in srgb, currentColor 78%, transparent);
+    }
+    .tile p { margin: 0 0 13px; }
+    .links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 12px;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      min-height: 32px;
+      padding: 6px 10px;
+      border-radius: 7px;
+      border: 1px solid rgba(96,165,250,.36);
+      color: #93c5fd;
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 720;
+      background: rgba(37,99,235,.10);
+    }
+    .btn:hover { text-decoration: underline; }
+    .focus {
+      border: 1px solid rgba(127,127,127,.18);
+      border-radius: 10px;
+      padding: 16px 18px;
+    }
+    .focus h2 {
+      margin: 0 0 8px;
+      font-size: 15px;
+    }
+    .focus ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+    .focus li { margin: 5px 0; }
+    .note {
+      margin: 16px 0 0;
+      max-width: 960px;
+      font-size: 13px;
+      color: color-mix(in srgb, currentColor 64%, transparent);
+    }
+    @media (max-width: 760px) {
+      .card { padding: 20px 18px; }
+      .hero, .project { grid-template-columns: 1fr; }
+    }
   </style>
 </head>
 <body>
-  <main class="wrap">
-    <h1>Fide AI</h1>
-    <p class="lede">Open research and benchmarks for faith-aware AI evaluation.</p>
-    <p>Fide AI develops public benchmarks, evaluation methods, and responsible-use standards for AI systems used around faith, moral guidance, and pastoral-care adjacent questions.</p>
-    <section class="grid" aria-label="Research focus">
-      <div class="item"><strong>Theological triage</strong><span>Evaluating whether systems answer the right kind of faith question in the right way.</span></div>
-      <div class="item"><strong>FMG-Bench</strong><span>A benchmark for theological triage and pastoral guidance behavior in large language models.</span></div>
-      <div class="item"><strong>Structured harnesses</strong><span>Instruction-layer design for safer grounding, preference handling, and escalation boundaries.</span></div>
+  <main class="card">
+    <div class="eyebrow"><span class="mark" aria-hidden="true"></span>Fide AI Research</div>
+    <section class="hero">
+      <div>
+        <h1>Faith-aware AI evaluation.</h1>
+        <p class="lede">Benchmarks and public standards for models used around faith, moral guidance, and pastoral-care-adjacent questions.</p>
+        <p class="copy">Fide AI studies whether AI systems preserve theological triage, represent traditions fairly, avoid fabricated grounding, and recognize when human care matters more than a fluent answer.</p>
+      </div>
+      <aside class="panel" aria-label="FMG-Bench summary">
+        <h2>FMG-Bench v1</h2>
+        <div class="metric"><span class="num">120</span><span class="label">open benchmark scenarios</span></div>
+        <div class="metric"><span class="num">4</span><span class="label">instruction conditions</span></div>
+        <div class="metric"><span class="num">14</span><span class="label">advanced models evaluated</span></div>
+        <div class="metric"><span class="num">+3.96</span><span class="label">structured-harness gain over raw behavior</span></div>
+      </aside>
+    </section>
+    <section class="project">
+      <div class="tile">
+        <h2>FMG-Bench</h2>
+        <p>The Faith & Moral Guidance Benchmark evaluates large language models in theological triage and pastoral guidance contexts.</p>
+        <div class="links">
+          <a class="btn" href="https://huggingface.co/datasets/FideAI/fmg-bench">Dataset</a>
+          <a class="btn" href="https://github.com/FideAI/fmg-bench">GitHub</a>
+          <a class="btn" href="https://fideai.org">Website</a>
+        </div>
+      </div>
+      <div class="focus">
+        <h2>Research focus</h2>
+        <ul>
+          <li>Theological triage and tradition-aware evaluation</li>
+          <li>Structured harness design for safer model behavior</li>
+          <li>Grounding, preference fidelity, comparison, and escalation boundaries</li>
+          <li>Responsible-use standards for spiritually sensitive AI contexts</li>
+        </ul>
+      </div>
     </section>
-    <div class="links">
-      <a href="https://huggingface.co/datasets/FideAI/fmg-bench">FMG-Bench Dataset</a>
-      <a href="https://github.com/FideAI/fmg-bench">GitHub Repo</a>
-      <a href="https://fideai.org">Website</a>
-    </div>
-    <p class="note">Benchmarks make behavior visible and reviewable. They do not certify pastoral authority, clinical safety, legal adequacy, or deployment readiness.</p>
+    <p class="note">Benchmarks make behavior visible, comparable, and reviewable. They do not certify pastoral authority, clinical safety, legal adequacy, denominational standing, or deployment readiness.</p>
   </main>
 </body>
 </html>