Harden org card contrast across Hugging Face themes

index.html

@@ -6,8 +6,11 @@
     <meta name="color-scheme" content="dark" />
     <title>Lernex</title>
     <style>
-      :root {
-        color-scheme: dark;
+      * { box-sizing: border-box; }
+      html, body { min-height: 100%; }
+      body { margin: 0; background: #070b12; }
+
+      .org-card {
         --bg: #070b12;
         --panel: #0d1420;
         --panel-soft: #111b2a;
@@ -18,40 +21,34 @@
         --blue: #65a5ff;
         --teal: #58d5c9;
         --amber: #f6c65b;
-      }
-
-      * { box-sizing: border-box; }
-      html, body { min-height: 100%; }
-      body {
-        margin: 0;
+        position: relative;
+        width: min(100%, 1180px);
+        margin: 0 auto;
+        padding: clamp(22px, 4vw, 44px);
+        overflow: hidden;
         background: var(--bg);
         color: var(--text);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         letter-spacing: 0;
       }
 
-      body::before {
+      .org-card::before {
         content: "";
-        position: fixed;
+        position: absolute;
         inset: 0;
         pointer-events: none;
         background:
           linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
           linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
         background-size: 44px 44px;
-        mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 72%);
-      }
-
-      main {
-        width: min(100%, 1180px);
-        margin: 0 auto;
-        padding: clamp(24px, 5vw, 54px);
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 72%);
       }
 
       .shell {
+        position: relative;
         display: grid;
-        grid-template-columns: minmax(0, 1.04fr) minmax(315px, .96fr);
-        gap: clamp(24px, 4vw, 50px);
+        grid-template-columns: minmax(0, 1.02fr) minmax(310px, .98fr);
+        gap: clamp(22px, 3.8vw, 46px);
         align-items: start;
       }
 
@@ -59,10 +56,10 @@
         display: inline-flex;
         align-items: center;
         gap: 10px;
-        margin: 0 0 20px;
+        margin: 0 0 17px;
         color: var(--teal);
-        font-size: 13px;
-        font-weight: 750;
+        font-size: 12px;
+        font-weight: 760;
         letter-spacing: .12em;
         text-transform: uppercase;
       }
@@ -77,44 +74,45 @@
 
       h1 {
         margin: 0;
-        font-size: clamp(54px, 10vw, 124px);
+        color: var(--text);
+        font-size: clamp(52px, 9vw, 106px);
         line-height: .9;
         font-weight: 780;
         letter-spacing: 0;
       }
 
       .lead {
-        max-width: 710px;
-        margin: 25px 0 0;
+        max-width: 700px;
+        margin: 21px 0 0;
         color: #dbe6f5;
-        font-size: clamp(21px, 2vw, 28px);
-        line-height: 1.25;
+        font-size: clamp(20px, 1.9vw, 25px);
+        line-height: 1.24;
         font-weight: 650;
       }
 
       .body-copy {
-        max-width: 720px;
-        margin: 22px 0 0;
+        max-width: 710px;
+        margin: 16px 0 0;
         color: var(--muted);
-        font-size: 15px;
-        line-height: 1.68;
+        font-size: 14px;
+        line-height: 1.58;
       }
 
       .purpose {
-        margin-top: 26px;
+        margin-top: 20px;
         border-left: 2px solid rgba(88, 213, 201, .65);
-        padding-left: 18px;
+        padding-left: 16px;
         color: #c8d4e6;
-        font-size: 15px;
-        line-height: 1.62;
-        max-width: 720px;
+        font-size: 14px;
+        line-height: 1.55;
+        max-width: 710px;
       }
 
       .panel {
         border: 1px solid var(--line);
-        background: color-mix(in srgb, var(--panel) 88%, black);
+        background: #0b1220;
         border-radius: 8px;
-        padding: clamp(20px, 3vw, 30px);
+        padding: clamp(19px, 2.8vw, 28px);
         box-shadow: 0 20px 60px rgba(0,0,0,.28);
       }
 
@@ -127,24 +125,24 @@
         letter-spacing: 0;
       }
       .panel p {
-        margin: 12px 0 0;
+        margin: 11px 0 0;
         color: var(--muted);
-        line-height: 1.58;
-        font-size: 15px;
+        line-height: 1.5;
+        font-size: 14px;
       }
 
       .model-list {
         display: grid;
-        gap: 10px;
-        margin-top: 22px;
+        gap: 9px;
+        margin-top: 18px;
       }
       .model-link {
         display: grid;
         grid-template-columns: 1fr auto;
         gap: 14px;
         align-items: center;
-        min-height: 58px;
-        padding: 14px 15px;
+        min-height: 54px;
+        padding: 12px 14px;
         border: 1px solid rgba(148, 163, 184, .18);
         background: var(--panel-soft);
         border-radius: 8px;
@@ -158,13 +156,13 @@
       .model-link strong {
         display: block;
         color: #f8fafc;
-        font-size: 15px;
+        font-size: 14px;
       }
       .model-link span {
         display: block;
         margin-top: 3px;
         color: var(--soft);
-        font-size: 13px;
+        font-size: 12px;
       }
       .tag {
         color: #07111f;
@@ -176,8 +174,8 @@
       }
 
       .feedback {
-        margin-top: 24px;
-        padding-top: 20px;
+        margin-top: 20px;
+        padding-top: 18px;
         border-top: 1px solid var(--line);
         color: #dbe7f8;
         font-size: 14px;
@@ -192,13 +190,13 @@
 
       @media (max-width: 900px) {
         .shell { grid-template-columns: 1fr; }
-        main { padding: 28px 18px; }
+        .org-card { padding: 28px 18px; }
         h1 { font-size: clamp(52px, 18vw, 88px); }
       }
     </style>
   </head>
   <body>
-    <main>
+    <main class="org-card">
       <div class="shell">
         <section>
           <div class="eyebrow">Lernex Research</div>
@@ -206,7 +204,7 @@
           <p class="lead">An AI-personalized learning platform built around the learner, the material, and the moment.</p>
           <p class="body-copy">Lernex turns notes, PDFs, slides, classroom material, questions, and learner goals into lessons, quizzes, flashcards, explanations, study paths, feedback, and memory-aware tutoring.</p>
           <p class="body-copy">We use AI as the adaptive layer of the learning experience: reading messy source material, shaping practice, explaining ideas, tracking what is confusing, and helping each learner take the next useful step.</p>
-          <p class="purpose">Metis is our compact model line for ultra-efficient learning AI. The goal is simple: models that punch above their weight, run affordably, and fit the exact jobs Lernex needs instead of forcing every interaction through oversized, slow, or expensive general-purpose systems.</p>
+          <p class="purpose">Metis is our compact model line for ultra-efficient learning AI: models that punch above their weight, run affordably, and fit the exact jobs Lernex needs instead of forcing every interaction through oversized, slow, or expensive general-purpose systems.</p>
         </section>
 
         <aside class="panel" aria-label="Metis model releases">