Apply warmer Kaspa Explained front door

Author: Codex

COPY_IMPROVEMENT_NOTES.md

@@ -61,3 +61,17 @@ This is an internal working note for editorial and UX cleanup. Do not turn it in
 2. Do a mobile-first pass on header, floating Ask AI button, and long app-layer pages.
 3. Review the longest pages for collapsible detail and stronger section hierarchy.
 4. Replace more proof/status text with clearer user journeys and concrete examples.
+
+## Lessons from strong open-source websites
+
+- Homepage should explain the shape quickly; source/status pages prove the details.
+- Use one plain thesis, one primary route, one secondary route, and one technical/source route.
+- Vite-style lesson: a memorable sentence plus a direct start action is stronger than a broad content grid.
+- Astro-style lesson: lead with the product promise, then use visuals and proof points after the reader understands the frame.
+- Docusaurus/Starlight lesson: dense docs can be excellent if navigation, search, headings, and side routes are obvious.
+- docs.page lesson: blunt open-source value props work when they say exactly what is generated, from where, and with how much setup.
+- Kaspa.org lesson: public network pages can sound normal and confident without repeating every caveat on the homepage.
+- For Kaspa Explained, the status page should carry most live/targeted/roadmap/research taxonomy.
+- Other pages should teach first and link to status/source pages when the reader needs proof.
+- Visual system: warm editorial paper in light mode, clean dark mode, one Kaspa green accent, restrained secondary accent.
+- Copy system: fewer defensive loops. Say what works, what is coming, what is missing, then move on.

index.html

@@ -92,8 +92,7 @@ <h1>Kaspa is <span class="hero-title-accent">real-time</span> <span class="mobil
         <div class="actions">
           <a class="button primary" href="/kaspa-in-one-screen.html">Kaspa in one screen</a>
           <a class="button" href="/start-here.html">Start from zero</a>
-          <a class="button" href="/status.html">Check status</a>
-          <a class="button" href="/faq.html#common-misconceptions">Common misconceptions</a>
+          <a class="button" href="/status.html">Check what is live</a>
         </div>
         <nav class="kaspa-org-rail" aria-label="Current Kaspa.org routes">
           <a href="https://kaspa.org/lore">LORE</a>

styles.css

@@ -1,45 +1,45 @@
 :root {
   color-scheme: dark;
-  --bg: #0b0c09;
-  --bg-2: #15140f;
-  --panel: rgba(25, 24, 19, .78);
-  --panel-strong: rgba(28, 27, 22, .94);
+  --bg: #111416;
+  --bg-2: #181d1f;
+  --panel: rgba(27, 32, 34, .8);
+  --panel-strong: rgba(31, 37, 39, .95);
   --line: rgba(255, 255, 255, .11);
-  --line-bright: rgba(177, 160, 110, .38);
-  --text: #f7f0df;
-  --muted: #d6cdb9;
-  --faint: #a99f8b;
-  --cyan: #b7d2c7;
-  --green: #98b6aa;
+  --line-bright: rgba(79, 186, 149, .34);
+  --text: #f0f4ee;
+  --muted: #b8c3bd;
+  --faint: #87938e;
+  --cyan: #8ed8c2;
+  --green: #4fba95;
   --purple: #b8b0a0;
-  --pink: #b99b82;
-  --ink: #14110b;
-  --accent-soft: rgba(152, 182, 170, .09);
-  --surface-soft: rgba(255, 248, 226, .045);
+  --pink: #d99b45;
+  --ink: #101315;
+  --accent-soft: rgba(79, 186, 149, .1);
+  --surface-soft: rgba(240, 244, 238, .045);
   --shadow: 0 22px 54px rgba(0, 0, 0, .28);
   --display-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   --body-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
 }
 
 :root[data-theme="light"] {
   color-scheme: light;
-  --bg: #f7f3ea;
-  --bg-2: #fffcf4;
-  --panel: rgba(255, 253, 246, .86);
-  --panel-strong: rgba(255, 253, 246, .97);
-  --line: rgba(55, 43, 24, .16);
-  --line-bright: rgba(80, 91, 82, .24);
-  --text: #18201d;
-  --muted: #52615a;
-  --faint: #78847d;
-  --cyan: #2c615a;
-  --green: #326e61;
-  --purple: #6b6251;
-  --pink: #7c5d45;
-  --ink: #fffdf6;
-  --accent-soft: rgba(55, 104, 94, .1);
-  --surface-soft: rgba(60, 42, 15, .045);
-  --shadow: 0 22px 48px rgba(98, 71, 34, .16);
+  --bg: #f6efe3;
+  --bg-2: #fffaf0;
+  --panel: rgba(255, 250, 240, .88);
+  --panel-strong: rgba(255, 250, 240, .98);
+  --line: rgba(48, 39, 26, .16);
+  --line-bright: rgba(73, 117, 98, .24);
+  --text: #19221f;
+  --muted: #5d6964;
+  --faint: #7f8984;
+  --cyan: #2f7669;
+  --green: #348565;
+  --purple: #6d6556;
+  --pink: #a56b2d;
+  --ink: #fffaf0;
+  --accent-soft: rgba(52, 133, 101, .1);
+  --surface-soft: rgba(84, 61, 32, .045);
+  --shadow: 0 22px 48px rgba(94, 67, 33, .14);
 }
 
 * {
@@ -69,7 +69,7 @@ body {
   min-height: 100vh;
   background:
     radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--green) 8%, transparent), transparent 30rem),
-    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--pink) 6%, transparent), transparent 26rem),
+    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--pink) 7%, transparent), transparent 26rem),
     linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg) 100%);
   color: var(--text);
   font: 16px/1.62 var(--body-font);