Deploy redesigned landing page (light theme)

index.html

@@ -6,7 +6,7 @@
 <title>Trace Commons · An open dataset for code agent traces</title>
 <meta name="description" content="Donate your coding-agent sessions, anonymized on your own machine, to one open public dataset anyone can train on. The data that trains coding models should belong to everyone.">
 <link rel="canonical" href="https://trace-commons-web.hf.space/">
-<meta name="theme-color" content="#0f201f">
+<meta name="theme-color" content="#ffffff">
 <!-- Open Graph / social preview -->
 <meta property="og:type" content="website">
 <meta property="og:site_name" content="Trace Commons">
@@ -20,23 +20,25 @@
 <meta name="twitter:title" content="Trace Commons · An open commons for code agent traces">
 <meta name="twitter:description" content="The data that trains coding models should belong to everyone. Donate your coding-agent sessions to one open public dataset anyone can train on.">
 <meta name="twitter:image" content="https://trace-commons-web.hf.space/og.png">
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='4' fill='%230f201f' stroke='%23e8743b' stroke-width='1.5'/%3E%3Cline x1='6' y1='9' x2='18' y2='9' stroke='%23e8743b' stroke-width='1.6'/%3E%3Cline x1='6' y1='12.5' x2='14.5' y2='12.5' stroke='%237fb09a' stroke-width='1.6'/%3E%3Cline x1='6' y1='16' x2='16' y2='16' stroke='%23cdbfa8' stroke-width='1.6'/%3E%3C/svg%3E">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='1.5' width='21' height='21' rx='4' fill='%23ffffff' stroke='%232563eb' stroke-width='1.5'/%3E%3Cline x1='6' y1='9' x2='18' y2='9' stroke='%232563eb' stroke-width='1.6'/%3E%3Cline x1='6' y1='12.5' x2='14.5' y2='12.5' stroke='%23f5b50c' stroke-width='1.6'/%3E%3Cline x1='6' y1='16' x2='16' y2='16' stroke='%230b1f3a' stroke-width='1.6'/%3E%3C/svg%3E">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
   :root{
-    --ink:#0e1c1b;        /* deep archival teal-black */
-    --surface:#0f201f;
-    --panel:#13302d;
-    --panel-edge:#1e423d;
-    --paper-pure:#f6f1e7;
-    --paper-dim:#cdbfa8;
-    --signal:#e8743b;     /* restrained ember — the one bold color */
-    --signal-soft:#f0a878;
-    --leaf:#7fb09a;       /* muted verdigris, commons/green nod */
-    --line:rgba(243,236,224,0.14);
-    --line-strong:rgba(243,236,224,0.28);
+    --ink:#0b1f3a;        /* deep navy — text on color + dark code blocks */
+    --surface:#ffffff;    /* white page */
+    --panel:#eef4ff;      /* faint blue panel */
+    --panel-edge:#cfe0fb; /* light blue border */
+    --paper-pure:#0b1f3a; /* primary text (navy) */
+    --paper-dim:#52607d;  /* muted slate-blue secondary text */
+    --signal:#2563eb;     /* the blue — primary actions & accents */
+    --signal-soft:#4b8bf5;/* lighter blue — hovers */
+    --gold:#f5b50c;       /* the yellow — accent */
+    --gold-soft:rgba(245,181,12,.34); /* yellow highlighter wash */
+    --leaf:#2f6fe0;       /* secondary blue — small labels */
+    --line:rgba(11,31,58,0.10);
+    --line-strong:rgba(11,31,58,0.20);
     --mono:'Spline Sans Mono',ui-monospace,monospace;
     --sans:'Spline Sans',system-ui,sans-serif;
     --display:'Fraunces',Georgia,serif;
@@ -52,13 +54,13 @@
     overflow-x:hidden;
   }
   body{background:
-    radial-gradient(900px 500px at 82% -8%, rgba(232,116,59,0.10), transparent 60%),
-    radial-gradient(700px 500px at 5% 8%, rgba(127,176,154,0.07), transparent 55%),
+    radial-gradient(900px 500px at 82% -8%, rgba(37,99,235,0.07), transparent 60%),
+    radial-gradient(700px 500px at 5% 8%, rgba(245,181,12,0.10), transparent 55%),
     var(--surface);
   }
   .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
   a{color:inherit}
-  ::selection{background:var(--signal);color:var(--ink)}
+  ::selection{background:var(--gold);color:var(--ink)}
   :focus-visible{outline:2px solid var(--signal-soft);outline-offset:3px;border-radius:5px}
 
   /* ---------- nav ---------- */
@@ -76,7 +78,7 @@
   .brand .mark::before{content:"";position:absolute;inset:5px 4px;
     background:
       linear-gradient(var(--signal),var(--signal)) 0 0/100% 1.5px no-repeat,
-      linear-gradient(var(--leaf),var(--leaf)) 0 4px/70% 1.5px no-repeat,
+      linear-gradient(var(--gold),var(--gold)) 0 4px/70% 1.5px no-repeat,
       linear-gradient(var(--paper-dim),var(--paper-dim)) 0 8px/85% 1.5px no-repeat;
   }
   .nav-right{display:flex;gap:18px;align-items:center}
@@ -99,7 +101,9 @@
     letter-spacing:-0.02em;margin-bottom:26px;
     font-optical-sizing:auto;text-wrap:balance;
   }
-  h1 em{font-style:italic;color:var(--signal-soft)}
+  h1 em{font-style:italic;color:var(--signal);
+    background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);
+    padding:0 .04em;border-radius:2px}
   .lede{
     font-size:clamp(18px,2.1vw,21px);line-height:1.55;
     color:var(--paper-dim);max-width:720px;margin-bottom:38px;
@@ -112,7 +116,7 @@
     display:inline-flex;align-items:center;gap:10px;cursor:pointer;
     border:1px solid transparent;transition:transform .15s, background .2s, border-color .2s;
   }
-  .btn-primary{background:var(--signal);color:var(--ink)}
+  .btn-primary{background:var(--signal);color:#fff}
   .btn-primary:hover{transform:translateY(-2px);background:var(--signal-soft)}
   .btn-ghost{border-color:var(--line-strong);color:var(--paper-pure)}
   .btn-ghost:hover{border-color:var(--paper-dim);transform:translateY(-2px)}
@@ -129,14 +133,14 @@
   .hero-code .copy{font-size:13px;padding:8px 15px}
   .oss-pledge{
     display:flex;gap:11px;align-items:flex-start;margin-top:22px;max-width:520px;
-    border:1px solid rgba(127,176,154,.32);border-radius:10px;padding:13px 15px;
-    background:rgba(127,176,154,.06);font-size:14px;line-height:1.5;color:var(--paper-pure);
+    border:1px solid rgba(245,181,12,.45);border-radius:10px;padding:13px 15px;
+    background:rgba(245,181,12,.10);font-size:14px;line-height:1.5;color:var(--paper-pure);
   }
-  .oss-pledge .oss-ic{color:var(--leaf);flex:none;font-size:12px;margin-top:3px}
+  .oss-pledge .oss-ic{color:#c8920a;flex:none;font-size:12px;margin-top:3px}
 
   .hero-how{margin-top:16px;max-width:560px;font-size:15px;line-height:1.6;color:var(--paper-dim)}
-  .hero-how code{font-family:var(--mono);font-size:13px;color:var(--paper-pure);
-    background:rgba(243,236,224,.06);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
+  .hero-how code{font-family:var(--mono);font-size:13px;color:var(--signal);
+    background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);border-radius:5px;padding:1px 6px}
 
   /* ---------- section scaffold ---------- */
   section{padding:90px 0;position:relative}
@@ -145,7 +149,9 @@
   .sec-label .ix{color:var(--panel-edge)}
   h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);
     line-height:1.08;letter-spacing:-.018em;margin-bottom:18px;max-width:20ch;text-wrap:balance}
-  h2 em{font-style:italic;color:var(--signal-soft)}
+  h2 em{font-style:italic;color:var(--signal);
+    background:linear-gradient(180deg,transparent 62%,var(--gold-soft) 62%);
+    padding:0 .04em;border-radius:2px}
   .sec-intro{color:var(--paper-dim);max-width:560px;font-size:18px;margin-bottom:46px}
 
   /* ---------- why / argument ---------- */
@@ -153,16 +159,16 @@
   @media(max-width:860px){.why-grid{grid-template-columns:1fr}}
   .card{
     border:1px solid var(--line);border-radius:13px;padding:28px 26px;
-    background:linear-gradient(180deg,rgba(19,48,45,.4),transparent);
+    background:linear-gradient(180deg,rgba(37,99,235,.05),transparent);
     transition:border-color .25s,transform .25s;
   }
   .card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
   .card .ic{width:38px;height:38px;border-radius:9px;border:1px solid var(--panel-edge);
-    display:grid;place-items:center;margin-bottom:20px;color:var(--signal-soft);font-family:var(--mono)}
+    display:grid;place-items:center;margin-bottom:20px;color:var(--signal);font-family:var(--mono)}
   .card h3{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
   .card p{font-size:15.5px;color:var(--paper-dim);line-height:1.55}
-  .inline-link{color:var(--signal-soft);text-decoration:none;border-bottom:1px solid rgba(232,116,59,.4);transition:border-color .2s}
-  .inline-link:hover{border-color:var(--signal-soft)}
+  .inline-link{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(37,99,235,.4);transition:border-color .2s}
+  .inline-link:hover{border-color:var(--signal)}
 
   /* ---------- install ---------- */
   .install-shell{
@@ -172,26 +178,28 @@
   .panel-body{padding:30px 30px 34px}
   .step{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
   .step:last-child{border-bottom:none}
-  .step .num{font-family:var(--mono);color:var(--signal-soft);font-size:14px;flex:none;width:26px;
+  .step .num{font-family:var(--mono);color:var(--signal);font-size:14px;flex:none;width:26px;
     border:1px solid var(--panel-edge);height:26px;border-radius:6px;display:grid;place-items:center}
   .step .body{flex:1}
   .step .body h4{font-size:16px;font-weight:600;margin-bottom:9px}
   .step .body p{font-size:14.5px;color:var(--paper-dim);margin-bottom:12px}
   .code{
     display:flex;align-items:center;gap:14px;background:var(--ink);
-    border:1px solid var(--line);border-radius:9px;padding:13px 15px;
-    font-family:var(--mono);font-size:13.5px;color:var(--paper-pure);
+    border:1px solid var(--ink);border-radius:9px;padding:13px 15px;
+    font-family:var(--mono);font-size:13.5px;color:#e9f1ff;
     overflow-x:auto;white-space:nowrap;
+    box-shadow:0 14px 34px -22px rgba(11,31,58,.55);
   }
-  .code .pmt{color:var(--leaf);flex:none}
+  .code .pmt{color:var(--gold);flex:none}
   .code code{flex:1}
   .copy{
     flex:none;font-family:var(--mono);font-size:12px;color:var(--paper-dim);
     border:1px solid var(--line-strong);background:none;border-radius:6px;
     padding:6px 11px;cursor:pointer;transition:all .2s
   }
-  .copy:hover{color:var(--ink);background:var(--signal);border-color:var(--signal)}
-  .copy.done{color:var(--ink);background:var(--leaf);border-color:var(--leaf)}
+  .code .copy{color:#9fb2d6;border-color:rgba(255,255,255,.22)}
+  .copy:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
+  .copy.done{color:#fff;background:var(--signal);border-color:var(--signal)}
   .install-note{font-size:13.5px;color:var(--paper-dim);margin-top:22px;font-family:var(--mono);
     display:flex;gap:10px;align-items:flex-start}
   .install-note .b{color:var(--leaf);flex:none}
@@ -205,7 +213,7 @@
     padding:7px 13px;cursor:pointer;transition:all .18s;
   }
   .agent-btn:hover{color:var(--paper-pure);border-color:var(--paper-dim)}
-  .agent-btn.active{background:var(--leaf);color:var(--ink);border-color:var(--leaf)}
+  .agent-btn.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
 
   /* ---------- explorer ---------- */
   .explore-actions{margin-top:28px;text-align:center}
@@ -215,22 +223,22 @@
     background:linear-gradient(180deg,var(--panel),var(--surface));margin-bottom:28px;padding:24px 26px 20px}
   .growth-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
   .growth-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
-  .growth-total{font-family:var(--display);font-size:38px;font-weight:500;letter-spacing:-.02em;color:var(--signal-soft);line-height:1.1;margin-top:6px}
+  .growth-total{font-family:var(--display);font-size:38px;font-weight:500;letter-spacing:-.02em;color:var(--signal);line-height:1.1;margin-top:6px}
   .growth-unit{font-family:var(--mono);font-size:14px;color:var(--paper-dim);margin-left:8px;letter-spacing:0}
   .growth-range{display:flex;gap:6px}
   .rbtn{font-family:var(--mono);font-size:12.5px;color:var(--paper-dim);border:1px solid var(--line-strong);
     background:none;border-radius:7px;padding:6px 13px;cursor:pointer;transition:all .18s}
   .rbtn:hover{color:var(--paper-pure);border-color:var(--paper-dim)}
-  .rbtn.active{background:var(--paper-pure);color:var(--ink);border-color:var(--paper-pure)}
+  .rbtn.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
   .growth-chart{position:relative;width:100%;height:300px}
   .growth-chart svg{width:100%;height:100%;display:block;overflow:visible}
   .growth-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
-    background:var(--ink);border:1px solid var(--panel-edge);border-radius:8px;padding:8px 11px;
-    font-family:var(--mono);font-size:12px;white-space:nowrap;transition:opacity .15s;color:var(--paper-pure);z-index:3}
-  .growth-tip .tipn{color:var(--signal-soft);font-weight:500}
-  .growth-tip .tipd{color:var(--paper-dim);font-size:11px;margin-top:2px}
+    background:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 11px;
+    font-family:var(--mono);font-size:12px;white-space:nowrap;transition:opacity .15s;color:#e9f1ff;z-index:3}
+  .growth-tip .tipn{color:var(--gold);font-weight:500}
+  .growth-tip .tipd{color:#9fb2d6;font-size:11px;margin-top:2px}
   .growth-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
-    color:var(--panel-edge);margin-top:10px;letter-spacing:.03em}
+    color:var(--paper-dim);margin-top:10px;letter-spacing:.03em}
   .final{text-align:center;padding:100px 0 90px}
   .final h2{margin:0 auto 22px;max-width:18ch}
   .final .cta-row{justify-content:center}
@@ -523,8 +531,8 @@
     // gradient + defs
     const defs=document.createElementNS(NS,'defs');
     defs.innerHTML=`<linearGradient id="gfill" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="rgba(232,116,59,0.34)"/>
-      <stop offset="100%" stop-color="rgba(232,116,59,0)"/></linearGradient>`;
+      <stop offset="0%" stop-color="rgba(245,181,12,0.34)"/>
+      <stop offset="100%" stop-color="rgba(245,181,12,0)"/></linearGradient>`;
     svg.appendChild(defs);
     // gridlines
     for(let g=0;g<=3;g++){
@@ -532,7 +540,7 @@
       const ln=document.createElementNS(NS,'line');
       ln.setAttribute('x1',PAD);ln.setAttribute('x2',VW-PAD);
       ln.setAttribute('y1',y);ln.setAttribute('y2',y);
-      ln.setAttribute('stroke','rgba(243,236,224,0.07)');ln.setAttribute('stroke-width','1');
+      ln.setAttribute('stroke','rgba(11,31,58,0.08)');ln.setAttribute('stroke-width','1');
       svg.appendChild(ln);
     }
     // build path
@@ -555,8 +563,8 @@
     area.style.opacity=0;area.style.transition='opacity 1s ease-out .3s';requestAnimationFrame(()=>area.style.opacity=1);
     // endpoint dot — sits exactly on the final line point
     const dot=document.createElementNS(NS,'circle');
-    dot.setAttribute('cx',X(xs)-1.5);dot.setAttribute('cy',Y(maxN));dot.setAttribute('r','4');
-    dot.setAttribute('fill','var(--signal)');dot.setAttribute('stroke','var(--surface)');dot.setAttribute('stroke-width','2');
+    dot.setAttribute('cx',X(xs)-1.5);dot.setAttribute('cy',Y(maxN));dot.setAttribute('r','4.5');
+    dot.setAttribute('fill','var(--gold)');dot.setAttribute('stroke','var(--surface)');dot.setAttribute('stroke-width','2');
     dot.setAttribute('vector-effect','non-scaling-stroke');
     svg.appendChild(dot);
     // axis labels