From c170aa07f46287895ad777c394df0c23eef8320f Mon Sep 17 00:00:00 2001
From: Francesco <inbox@francescorocca.me>
Date: Mon, 1 Dec 2025 22:28:20 +0100
Subject: [PATCH] refactor(www): use the same style

---
 www/index.html     | 18 ++++-----
 www/pages/404.html |  5 +--
 www/pages/500.html | 97 ++++++++++------------------------------------
 3 files changed, 30 insertions(+), 90 deletions(-)

diff --git a/www/index.html b/www/index.html
index baa040e..caee79a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -51,6 +51,7 @@
                     "Segoe UI",
                     sans-serif;
                 color: var(--text);
+                font-size: 18px; /* increased base text size */
             }
 
             .wrapper {
@@ -76,7 +77,7 @@
                 border-radius: 999px;
                 background: var(--accent-soft);
                 color: var(--accent);
-                font-size: 11px;
+                font-size: 13px; /* slightly larger */
                 text-transform: uppercase;
                 letter-spacing: 0.11em;
                 margin-bottom: 20px;
@@ -92,7 +93,7 @@
             }
 
             h1 {
-                font-size: 32px;
+                font-size: 36px; /* increased */
                 line-height: 1.2;
                 margin-bottom: 8px;
             }
@@ -104,14 +105,14 @@
             }
 
             p {
-                font-size: 15px;
+                font-size: 18px; /* increased */
                 color: var(--muted);
                 margin-bottom: 16px;
                 line-height: 1.7;
             }
 
             .lead {
-                font-size: 16px;
+                font-size: 19px; /* increased */
                 margin-bottom: 10px;
             }
 
@@ -139,7 +140,7 @@
             }
 
             footer.icon-credit {
-                font-size: 11px;
+                font-size: 13px; /* increased */
                 color: var(--muted);
                 text-align: center;
                 opacity: 0.9;
@@ -158,11 +159,11 @@
 
             @media (max-width: 480px) {
                 h1 {
-                    font-size: 26px;
+                    font-size: 30px;
                 }
 
                 .lead {
-                    font-size: 15px;
+                    font-size: 17px;
                 }
             }
         </style>
@@ -181,9 +182,6 @@
                 </div>
 
                 <h1>Hello from <span class="highlight">cws</span>!</h1>
-                <p class="lead">
-                    Your lightweight C web server is up and ready.
-                </p>
                 <p>
                     You’re seeing the default homepage served by
                     <strong>cws</strong>. Replace this file or point your
diff --git a/www/pages/404.html b/www/pages/404.html
index bacaf36..38a1368 100644
--- a/www/pages/404.html
+++ b/www/pages/404.html
@@ -141,10 +141,7 @@
 
             <div class="code">404</div>
             <h1>You’ve reached an empty corner of the internet.</h1>
-            <p>
-                The page you’re looking for doesn’t exist (anymore). It may have
-                been moved, deleted, or the link is just a bit outdated.
-            </p>
+            <p>The page you’re looking for doesn’t exist.</p>
         </div>
     </body>
 </html>
diff --git a/www/pages/500.html b/www/pages/500.html
index 8cd69df..9d25968 100644
--- a/www/pages/500.html
+++ b/www/pages/500.html
@@ -6,11 +6,11 @@
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <style>
             :root {
-                --bg: #020617;
-                --accent: #38bdf8; /* light blue */
-                --accent-soft: rgba(56, 189, 248, 0.16);
-                --text: #e5e7eb;
-                --muted: #9ca3af;
+                --bg: #f9fafb;
+                --accent: #38bdf8;
+                --accent-soft: rgba(56, 189, 248, 0.14);
+                --text: #0f172a;
+                --muted: #6b7280;
             }
 
             * {
@@ -24,11 +24,9 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                background: radial-gradient(
-                    circle at top,
-                    #0f172a 0,
-                    var(--bg) 60%
-                );
+                background:
+                    radial-gradient(circle at top, #ffedd5 0, transparent 55%),
+                    var(--bg);
                 font-family:
                     system-ui,
                     -apple-system,
@@ -43,21 +41,20 @@
                 max-width: 520px;
                 width: 100%;
                 text-align: center;
-                position: relative;
             }
 
             .badge {
                 display: inline-flex;
                 align-items: center;
                 gap: 8px;
-                padding: 6px 13px;
+                padding: 6px 12px;
                 border-radius: 999px;
                 background: var(--accent-soft);
                 color: var(--accent);
                 font-size: 11px;
                 text-transform: uppercase;
-                letter-spacing: 0.14em;
-                margin-bottom: 22px;
+                letter-spacing: 0.12em;
+                margin-bottom: 20px;
             }
 
             .badge-dot {
@@ -69,86 +66,34 @@
             }
 
             .code {
-                font-size: 64px;
+                font-size: 60px;
                 font-weight: 900;
-                letter-spacing: 0.22em;
-                margin-bottom: 14px;
+                letter-spacing: 0.18em;
+                margin-bottom: 10px;
                 text-transform: uppercase;
-                background: linear-gradient(120deg, #e0f2fe, #38bdf8, #818cf8);
+                background: linear-gradient(120deg, #bae6fd, #38bdf8, #818cf8);
                 -webkit-background-clip: text;
                 color: transparent;
             }
 
             h1 {
-                font-size: 32px;
-                margin-bottom: 12px;
+                font-size: 28px;
+                margin-bottom: 10px;
             }
 
             p {
                 font-size: 15px;
                 color: var(--muted);
-                margin-bottom: 26px;
-                line-height: 1.7;
-            }
-
-            .actions {
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-                max-width: 260px;
-                margin: 0 auto;
-            }
-
-            .btn-primary,
-            .btn-ghost {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 999px;
-                padding: 11px 18px;
-                font-size: 13px;
-                font-weight: 600;
-                text-decoration: none;
-                border: none;
-                cursor: pointer;
-                transition:
-                    transform 120ms ease,
-                    box-shadow 120ms ease,
-                    background 120ms ease,
-                    color 120ms ease,
-                    border-color 120ms ease;
-                outline: none;
-            }
-
-            .btn-primary {
-                background: linear-gradient(135deg, #38bdf8, #818cf8);
-                color: #020617;
-                box-shadow: 0 12px 26px rgba(56, 189, 248, 0.5);
-            }
-
-            .btn-primary:hover {
-                transform: translateY(-1px) scale(1.01);
-                box-shadow: 0 16px 34px rgba(56, 189, 248, 0.6);
-            }
-
-            .btn-ghost {
-                background: transparent;
-                color: var(--muted);
-                border: 1px solid rgba(148, 163, 184, 0.5);
-            }
-
-            .btn-ghost:hover {
-                background: rgba(15, 23, 42, 0.9);
-                color: var(--text);
-                border-color: rgba(148, 163, 184, 0.85);
+                margin-bottom: 24px;
+                line-height: 1.6;
             }
 
             @media (max-width: 480px) {
                 .code {
-                    font-size: 52px;
+                    font-size: 50px;
                 }
                 h1 {
-                    font-size: 26px;
+                    font-size: 24px;
                 }
                 p {
                     font-size: 14px;