Page styling

index.html

@@ -12,28 +12,20 @@
 <meta property="og:url" content="https://huggingface.co/OptiTransferData" />
 <title>Optitransfer</title>
 <style>
-  :root {
-    --bg: #0a0a0a;
-    --surface: #111113;
-    --border: #1e1e22;
-    --text: #e4e4e7;
-    --muted: #71717a;
-    --accent: #a1a1aa;
+  .container, .container * { margin: 0; padding: 0; box-sizing: border-box; }
+  /* Hugging Face scopes this stylesheet to the card's wrapper, so :root and body never match: every variable and
+     base style lives on .container. Colours inherit from the page so the card reads in the light and dark themes. */
+  .container {
+    --surface: rgba(127, 127, 127, 0.08);
+    --border: rgba(127, 127, 127, 0.28);
     --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
     --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
     font-family: var(--sans);
-    background: var(--bg);
-    color: var(--text);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
-  }
-  .container {
-    max-width: 720px;
+    max-width: 760px;
     margin: 0 auto;
-    padding: 4rem 2rem;
+    padding: 3rem 1.5rem;
   }
   .header {
     text-align: center;
@@ -44,12 +36,13 @@
     font-weight: 500;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--accent);
+    color: inherit;
     margin-bottom: 1rem;
   }
   .header .tagline {
     font-size: 1.05rem;
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     font-weight: 400;
     max-width: 480px;
     margin: 0 auto;
@@ -59,7 +52,7 @@
     display: inline-block;
     font-family: var(--mono);
     font-size: 0.875rem;
-    color: var(--text);
+    color: inherit;
     background: var(--surface);
     border: 1px solid var(--border);
     padding: 0.6rem 1.5rem;
@@ -80,7 +73,8 @@
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     margin-bottom: 1.25rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--border);
@@ -91,18 +85,20 @@
     gap: 1rem;
     text-align: center;
   }
+  .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 0.5rem; }
   .stat .number {
     font-family: var(--mono);
     font-size: 1.5rem;
     font-weight: 600;
-    color: var(--text);
+    color: inherit;
   }
   .stat .label {
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     margin-top: 0.25rem;
   }
   .links {
@@ -116,12 +112,12 @@
     border-radius: 8px;
     padding: 1.25rem;
     text-decoration: none;
-    color: var(--text);
+    color: inherit;
     transition: border-color 0.2s, transform 0.15s;
     display: block;
   }
   .link-card:hover {
-    border-color: var(--accent);
+    border-color: inherit;
     transform: translateY(-1px);
   }
   .link-card .label {
@@ -129,7 +125,8 @@
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     margin-bottom: 0.35rem;
   }
   .link-card .value { font-size: 0.95rem; }
@@ -143,17 +140,20 @@
     border-radius: 8px;
     padding: 1rem 1.25rem;
     text-decoration: none;
-    color: var(--text);
+    color: inherit;
     transition: border-color 0.2s;
   }
-  a.space:hover { border-color: var(--accent); }
+  a.space:hover { border-color: inherit; }
   .space .desc { max-width: 560px; }
   .space .name { font-weight: 500; font-size: 0.95rem; }
-  .space .desc { font-size: 0.8rem; color: var(--muted); }
-  .space .arrow { color: var(--muted); font-size: 1.1rem; }
+  .space .desc { font-size: 0.8rem; color: inherit;
+    opacity: 0.68; }
+  .space .arrow { color: inherit;
+    opacity: 0.68; font-size: 1.1rem; }
   .research-list { list-style: none; padding: 0; }
   .research-list li {
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     font-size: 0.9rem;
     padding: 0.4rem 0;
     border-bottom: 1px solid var(--border);
@@ -165,29 +165,30 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: var(--accent);
+    background: currentColor;
     margin-right: 0.75rem;
     vertical-align: middle;
   }
   .footer {
     text-align: center;
-    color: var(--muted);
+    color: inherit;
+    opacity: 0.68;
     font-size: 0.8rem;
     margin-top: 2rem;
     padding-top: 2rem;
     border-top: 1px solid var(--border);
   }
-  .footer a { color: var(--accent); text-decoration: none; }
+  .footer a { color: inherit; text-decoration: underline; }
   .footer a:hover { text-decoration: underline; }
   @media (max-width: 600px) {
     .container { padding: 2rem 1rem; }
     .stats { grid-template-columns: repeat(2, 1fr); }
     .links { grid-template-columns: 1fr; }
   }
-  .section p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.75rem; }
-  .section p strong { color: var(--text); font-weight: 500; }
+  .section p { font-size: 0.98rem; margin-bottom: 0.75rem; opacity: 0.9; }
+  .section p strong { font-weight: 600; }
   .stats.three { grid-template-columns: repeat(3, 1fr); }
-  .research-list li strong { color: var(--text); font-weight: 500; }
+  .research-list li strong { font-weight: 600; }
 </style>
 </head>
 <body>
@@ -293,7 +294,7 @@
 
   <div class="section">
     <h2>Research</h2>
-    <p>The research behind the releases is on the founder's page, <a href="https://huggingface.co/Optitransfer" style="color:var(--accent)">@Optitransfer</a>.</p>
+    <p>The research behind the releases is on the founder's page, <a href="https://huggingface.co/Optitransfer" style="text-decoration:underline">@Optitransfer</a>.</p>
     <div class="spaces">
       <a href="https://huggingface.co/Optitransfer/Qwen2.5-7B-Instruct-converge-collective-v1" class="space">
         <div>