back to simple design

index.html

@@ -10,11 +10,14 @@
     @import url('https://fonts.googleapis.com/css2?family=Telegraf:wght@400;500;600;700&display=swap');
     
     :root {
-      --yellow: #ffd200;
-      --black: #000;
-      --white: #fff;
-      --grey-050: #f9f9f9;
-      --grey-200: #e0e0e0;
+      /* palette tuned to match screenshot */
+      --white: #ffffff;
+      --black: #000000;
+      --grey-025: #f5f5f5;
+      --grey-050: #f0f0f0;
+      --grey-100: #e8e8e8;
+      --grey-200: #e0e0e0;  /* button & border base */
+      --grey-300: #d4d4d4;  /* button hover */
       --container-max: 1200px;
       --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
       --spacing-unit: 8px;
@@ -24,12 +27,13 @@
     *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
     body { 
       font-family: 'Telegraf', sans-serif; 
-      background: var(--yellow); 
+      background: var(--white); /* removed yellow */
       color: var(--black); 
       line-height: 1.5;
       font-weight: 400;
     }
 
+    /* general copy */
     .explanation-text {
       font-size: 1.3rem;
       line-height: 1.6;
@@ -59,23 +63,21 @@
       height: 120px;
     }
     .contact-btn { 
-      border: 2px solid var(--black); 
-      background: transparent; 
+      border: none;                                   /* no thick outline */
+      background: var(--grey-200);                    /* light grey like screenshot */
       color: var(--black); 
       padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); 
-      border-radius: 8px; 
+      border-radius: 6px; 
       font-size: 1rem; 
       font-weight: 600;
       font-family: 'Telegraf', sans-serif;
       cursor: pointer; 
-      transition: all .2s ease; 
+      transition: background .2s ease; 
       text-decoration: none;
       display: inline-block;
     }
     .contact-btn:hover { 
-      background: var(--black); 
-      color: var(--yellow); 
-      transform: translateY(-1px);
+      background: var(--grey-300);                    /* subtle hover */
     }
 
     /* hero */
@@ -104,10 +106,10 @@
 
     .hero-diagram { 
       background: var(--white); 
-      border: 2px solid var(--black); 
-      border-radius: 0; 
+      border: 1px solid var(--grey-200);              /* lighter border */
+      border-radius: 4px; 
       padding: calc(var(--spacing-unit) * 4); 
-      box-shadow: 8px 8px 0 var(--black);
+      box-shadow: none;                               /* removed strong shadow */
       width: 100%; 
       min-height: 400px;
       display: flex; 
@@ -143,19 +145,18 @@
 
     .card { 
       background: var(--white); 
-      border: 2px solid var(--black); 
-      border-radius: 0; 
-      box-shadow: 6px 6px 0 var(--black);
+      border: 1px solid var(--grey-200);              /* lighter soft border */
+      border-radius: 6px; 
+      box-shadow: none;                               /* no drop shadow */
       padding: calc(var(--spacing-unit) * 4); 
       min-height: 280px;
       display: flex;
       flex-direction: column;
-      transition: transform 0.2s ease;
+      transition: background 0.2s ease;
     }
     
     .card:hover {
-      transform: translate(-2px, -2px);
-      box-shadow: 8px 8px 0 var(--black);
+      background: var(--grey-025);
     }
     
     .card h2 { 
@@ -183,35 +184,34 @@
     textarea { 
       width: 100%; 
       padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); 
-      border: 2px solid var(--black); 
-      border-radius: 0; 
+      border: 1px solid var(--grey-200); 
+      border-radius: 4px; 
       font-family: 'Telegraf', sans-serif; 
       font-size: 1.2rem; 
       resize: vertical; 
       background: var(--white);
       min-height: 60px;
-      transition: all 0.2s ease;
+      transition: border-color 0.2s ease;
       font-weight: 500;
     }
 
     textarea:focus {
       outline: none;
-      transform: translate(-2px, -2px);
-      box-shadow: 4px 4px 0 var(--black);
+      border-color: var(--grey-300);
     }
 
     .btn {
-      border: 2px solid var(--black);
-      background: var(--yellow);
+      border: none;                                   /* flat buttons */
+      background: var(--grey-200);
       color: var(--black);
       font-weight: 600;
       padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
       min-width: 160px;
       font-size: 1.2rem;
       font-family: 'Telegraf', sans-serif;
-      border-radius: 0;
+      border-radius: 6px;
       cursor: pointer;
-      transition: all .2s ease;
+      transition: background 0.2s ease;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -220,9 +220,7 @@
       letter-spacing: -0.01em;
     }
     .btn:hover:not(:disabled) { 
-      background: var(--black); 
-      color: var(--yellow); 
-      transform: translateY(-2px);
+      background: var(--grey-300); 
     }
     .btn:disabled { 
       opacity: .5; 
@@ -253,8 +251,6 @@
       flex-shrink: 0;
     }
 
-
-
     footer { 
       font-size: 1.2rem; 
       text-align: center; 
@@ -270,8 +266,8 @@
       font-family: 'Telegraf', sans-serif;
       padding: calc(var(--spacing-unit) * 3);
       background: var(--grey-050);
-      border: 2px solid var(--black);
-      border-radius: 8px;
+      border: 1px solid var(--grey-200);
+      border-radius: 6px;
       min-height: 80px;
       display: flex;
       flex-direction: column;
@@ -331,7 +327,6 @@
       
       .card {
         padding: calc(var(--spacing-unit) * 3);
-        box-shadow: 4px 4px 0 var(--black);
       }
       
       .btn {
@@ -446,8 +441,7 @@
 
   <script type="module" src="wasm-demo.js"></script>
   <script>
-    // Since the tokenizer loads automatically and there's no explicit loading status in the JS,
-    // we'll hide the tokenizer status message on page load
+    // Hide tokenizer status on load
     window.addEventListener('DOMContentLoaded', () => {
       const tokenizerStatus = document.getElementById('tokenizerStatus');
       if (tokenizerStatus) {
@@ -456,4 +450,4 @@
     });
   </script>
 </body>
-</html>
+</html>