Add durable formatting to org card preview

index.html

@@ -9,60 +9,66 @@
     <link rel="stylesheet" href="https://culureyes-stack-readme.static.hf.space/style.css" />
   </head>
   <body>
-    <main class="shell">
-      <header class="hero">
-        <div class="brand-lockup">
-          <img src="https://culureyes-stack-readme.static.hf.space/cultureyes-logo.png" alt="CULTUREYES Sovereign AI Studio" />
+    <main class="shell" style="max-width:1020px;margin:24px auto;padding:0 20px;color:#142b2a;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6">
+      <header class="hero" style="padding:28px;border-radius:18px;background:#08090e;color:#fff">
+        <div class="brand-lockup" style="overflow:hidden;margin-bottom:22px;border-radius:12px;background:#08090e">
+          <img src="https://culureyes-stack-readme.static.hf.space/cultureyes-logo.png" alt="CULTUREYES Sovereign AI Studio" style="display:block;width:100%;height:auto" />
         </div>
         <h1 class="sr-only">CULTUREYES Ai</h1>
-        <p class="eyebrow">INDEPENDENT AI WORK · UNITED ARAB EMIRATES</p>
-        <p class="lead">An independent AI studio building Arabic-English models, an agentic AI operating system, an inference engine, and evaluation work.</p>
-        <p class="languages">Arabic <span aria-hidden="true">·</span> English</p>
+        <p class="eyebrow" style="margin:0 0 10px;color:#a9a1ff;font-size:12px;font-weight:700;letter-spacing:.12em">INDEPENDENT AI WORK · UNITED ARAB EMIRATES</p>
+        <p class="lead" style="max-width:700px;margin:0 0 12px;color:#f4f2ff;font-size:20px;line-height:1.5">An independent AI studio building Arabic-English models, an agentic AI operating system, an inference engine, and evaluation work.</p>
+        <p class="languages" style="margin:0;color:#bebbd0;font-size:14px">Arabic <span aria-hidden="true">·</span> English</p>
       </header>
 
-      <section class="releases" aria-labelledby="releases-title">
-        <div class="section-heading">
-          <p class="eyebrow">MODEL RELEASES</p>
-          <h2 id="releases-title">Operator</h2>
+      <section class="releases" aria-labelledby="releases-title" style="padding:36px 0">
+        <div class="section-heading" style="margin:0 0 16px">
+          <p class="eyebrow" style="margin:0 0 6px;color:#176d56;font-size:11px;font-weight:750;letter-spacing:.14em">MODEL RELEASES</p>
+          <h2 id="releases-title" style="margin:0;font-size:30px;line-height:1.2">Operator</h2>
         </div>
-        <div class="cards">
-          <a class="release-card" href="https://huggingface.co/CULUREYES-stack/Operator-1B">
-            <span class="size">1B FAMILY</span>
-            <h3>Operator 1B</h3>
-            <p>Arabic-English model with base and supervised fine-tuning checkpoints for continued training or fine-tuning.</p>
+        <div class="cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px">
+          <a class="release-card" href="https://huggingface.co/CULUREYES-stack/Operator-1B" style="display:block;padding:20px;border:1px solid #ddd9ce;border-radius:14px;background:#fffdf8;color:#142b2a;text-decoration:none">
+            <span class="size" style="color:#176d56;font-size:11px;font-weight:750;letter-spacing:.13em">1B FAMILY</span>
+            <h3 style="margin:8px 0;font-size:24px;line-height:1.2">Operator 1B</h3>
+            <p style="margin:0 0 16px;color:#65716b">Arabic-English model with base and supervised fine-tuning checkpoints for continued training or fine-tuning.</p>
             <span class="link-label">Explore the model <span aria-hidden="true">↗</span></span>
           </a>
-          <a class="release-card" href="https://huggingface.co/CULUREYES-stack/Operator-4B">
-            <span class="size">4B FAMILY</span>
-            <h3>Operator 4B</h3>
-            <p>Arabic-English model from the HajeriLM family, released for developers to inspect and build on.</p>
+          <a class="release-card" href="https://huggingface.co/CULUREYES-stack/Operator-4B" style="display:block;padding:20px;border:1px solid #ddd9ce;border-radius:14px;background:#fffdf8;color:#142b2a;text-decoration:none">
+            <span class="size" style="color:#176d56;font-size:11px;font-weight:750;letter-spacing:.13em">4B FAMILY</span>
+            <h3 style="margin:8px 0;font-size:24px;line-height:1.2">Operator 4B</h3>
+            <p style="margin:0 0 16px;color:#65716b">Arabic-English model from the HajeriLM family, released for developers to inspect and build on.</p>
             <span class="link-label">Explore the model <span aria-hidden="true">↗</span></span>
           </a>
         </div>
       </section>
 
-      <section class="work" aria-labelledby="work-title">
-        <p class="eyebrow">THE WIDER STUDIO</p>
-        <h2 id="work-title">Systems and evaluation</h2>
-        <div class="work-grid">
-          <p><strong>HajeriLM</strong><br />Model architecture and training work.</p>
-          <p><strong>OpSoul</strong><br />An agentic AI operating system for creating Operators and connecting them to apps. Current apps are proof-of-concept projects.</p>
-          <p><strong>HIM</strong><br />An inference engine designed to run any model on any machine without per-model tuning or setup.</p>
-          <p><strong>MIZAN</strong><br />Evaluation work examining model responses across tasks and situations.</p>
+      <section class="work" aria-labelledby="work-title" style="padding:30px 0;border-top:1px solid #ddd9ce">
+        <p class="eyebrow" style="margin:0 0 6px;color:#176d56;font-size:11px;font-weight:750;letter-spacing:.14em">THE WIDER STUDIO</p>
+        <h2 id="work-title" style="margin:0 0 16px;font-size:30px;line-height:1.2">Systems and evaluation</h2>
+        <div class="work-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px">
+          <p style="margin:0;padding:16px;border:1px solid #ddd9ce;border-radius:12px;background:#fffdf8;color:#65716b"><strong style="color:#142b2a;font-size:17px">HajeriLM</strong><br />Model architecture and training work.</p>
+          <p style="margin:0;padding:16px;border:1px solid #ddd9ce;border-radius:12px;background:#fffdf8;color:#65716b"><strong style="color:#142b2a;font-size:17px">OpSoul</strong><br />An agentic AI operating system for creating Operators and connecting them to apps. Current apps are proof-of-concept projects.</p>
+          <p style="margin:0;padding:16px;border:1px solid #ddd9ce;border-radius:12px;background:#fffdf8;color:#65716b"><strong style="color:#142b2a;font-size:17px">HIM</strong><br />An inference engine designed to run any model on any machine without per-model tuning or setup.</p>
+          <p style="margin:0;padding:16px;border:1px solid #ddd9ce;border-radius:12px;background:#fffdf8;color:#65716b"><strong style="color:#142b2a;font-size:17px">MIZAN</strong><br />Evaluation work examining model responses across tasks and situations.</p>
         </div>
       </section>
 
-      <section class="arabic" lang="ar" dir="rtl" aria-labelledby="arabic-title">
-        <p class="eyebrow">عمل مستقل من دولة الإمارات العربية المتحدة</p>
-        <h2 id="arabic-title">كالتشر آيز</h2>
-        <p>استوديو مستقل للذكاء الاصطناعي من الإمارات، يجمع بين النماذج العربية والإنجليزية ونظام OpSoul الوكيلي ومحرك HIM للاستدلال وأعمال التقييم.</p>
-        <div class="arabic-links">
+      <section aria-label="A line I carry with me" style="margin:8px 0 30px;padding:20px 24px;border-left:4px solid #817aff;border-radius:10px;background:#f0efff">
+        <p style="margin:0 0 8px;color:#292743;font-size:20px;font-weight:700">“But we punch above our weight.”</p>
+        <p style="margin:0 0 10px;color:#65716b;font-size:13px">— Sheikh Khaled bin Mohamed bin Zayed, during an exchange with President Trump in Abu Dhabi</p>
+        <p style="margin:0;color:#40514b">That confidence speaks to me. We can build from our own perspective, share what we learn, and give others room to take the work further.</p>
+      </section>
+
+      <section class="arabic" lang="ar" dir="rtl" aria-labelledby="arabic-title" style="margin:8px 0 30px;padding:24px;border-radius:14px;background:#e8eee6">
+        <p class="eyebrow" style="margin:0 0 6px;color:#176d56;font-size:11px;font-weight:750">عمل مستقل من دولة الإمارات العربية المتحدة</p>
+        <h2 id="arabic-title" style="margin:0 0 12px;font-size:28px">كالتشر آيز</h2>
+        <p style="margin:0 0 16px;color:#40514b">استوديو مستقل للذكاء الاصطناعي من الإمارات، يجمع بين النماذج العربية والإنجليزية ونظام OpSoul الوكيلي ومحرك HIM للاستدلال وأعمال التقييم.</p>
+        <div class="arabic-links" style="display:flex;flex-wrap:wrap;gap:10px">
           <a href="https://huggingface.co/CULUREYES-stack/Operator-1B">Operator 1B</a>
           <a href="https://huggingface.co/CULUREYES-stack/Operator-4B">Operator 4B</a>
         </div>
       </section>
 
-      <footer>
+      <footer style="display:flex;justify-content:space-between;gap:16px;padding:16px 0 24px;border-top:1px solid #ddd9ce;color:#65716b;font-size:12px">
         <span>Built independently in the UAE.</span>
         <span>Check each repository for its license and technical details.</span>
       </footer>