Improve organization card hierarchy and access labels

index.html

@@ -10,35 +10,35 @@
     <main class="card">
       <div class="heading">
         <div>
-          <h1>Continual Learning Exam</h1>
-          <p class="intro">Five long-horizon tasks set in professional work. Each task unfolds across five stages, with new information and prior work carried forward.</p>
+          <h1 class="text-2xl font-semibold tracking-tight">Continual Learning Exam</h1>
+          <p class="intro mt-2 text-sm text-gray-600 dark:text-gray-300">Five long-horizon tasks set in professional work. Each task unfolds across five stages, with new information and prior work carried forward.</p>
         </div>
         <p><a class="explore underline" href="https://haoyu-zhao.github.io/CLE/tasks/" target="_blank" rel="noopener">Explore the tasks ↗</a></p>
       </div>
 
-      <h2>Data and access</h2>
-      <p class="guide">These four repositories contain different parts of the <strong>same five tasks</strong>.</p>
+      <h2 class="mt-6 text-lg font-semibold">Data and access</h2>
+      <p class="guide mt-1 mb-4 text-sm text-gray-600 dark:text-gray-300">These four repositories contain different parts of the <strong>same five tasks</strong>.</p>
 
       <div class="resources grid grid-cols-1 gap-3 sm:grid-cols-2">
         <div class="resource rounded-lg border border-gray-200 p-4">
-          <h3><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Tasks" target="_blank" rel="noopener">Task Cards</a> <span class="badge public">Public</span></h3>
+          <h3 class="font-semibold"><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Tasks" target="_blank" rel="noopener">Task Cards</a> <span class="badge public text-xs">— Public</span></h3>
           <p class="description">Start here: 25 stage-level assignments with instructions, requested outputs and input-file lists.</p>
         </div>
         <div class="resource rounded-lg border border-gray-200 p-4">
-          <h3><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-Inputs" target="_blank" rel="noopener">Task Inputs</a> <span class="badge public">Public</span></h3>
+          <h3 class="font-semibold"><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-Inputs" target="_blank" rel="noopener">Task Inputs</a> <span class="badge public text-xs">— Public</span></h3>
           <p class="description">The instructions and files available to an agent, including messages, documents and data.</p>
         </div>
         <div class="resource rounded-lg border border-gray-200 p-4">
-          <h3><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-References" target="_blank" rel="noopener">Task References</a> <span class="badge gated">Approval required</span></h3>
+          <h3 class="font-semibold"><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-References" target="_blank" rel="noopener">Task References</a> <span class="badge gated text-xs">— Approval required</span></h3>
           <p class="description">Evaluation rubrics and ground-truth references, kept separate from agent inputs.</p>
         </div>
         <div class="resource rounded-lg border border-gray-200 p-4">
-          <h3><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-Archive" target="_blank" rel="noopener">Task Archive</a> <span class="badge gated">Approval required</span></h3>
+          <h3 class="font-semibold"><a class="underline" href="https://huggingface.co/datasets/Continual-Learning-Exam/CLE-Task-Archive" target="_blank" rel="noopener">Task Archive</a> <span class="badge gated text-xs">— Approval required</span></h3>
           <p class="description">Complete original task packages with inputs, setup and evaluation materials.</p>
         </div>
       </div>
 
-      <p class="note">The two approval-gated pages are visible, but downloading their files requires approval. Public datasets contain no reference answers or evaluation code.</p>
+      <p class="note mt-4 text-xs text-gray-500 dark:text-gray-400">The two approval-gated pages are visible, but downloading their files requires approval. Public datasets contain no reference answers or evaluation code.</p>
     </main>
   </body>
 </html>