Use MathWorks navy (#002855), full-width layout, and official styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: robertogl

index.html

@@ -13,32 +13,32 @@
 
         :root {
             --bg: #ffffff;
-            --text: #333333;
-            --text-muted: #6c6c6c;
+            --text: #222222;
+            --text-muted: #555555;
             --card-bg: #ffffff;
-            --card-border: #e0e0e0;
+            --card-border: #dcdcdc;
             --accent: #0076a8;
             --accent-orange: #d35400;
-            --accent-light: #f5f5f5;
-            --header-bg: #0076a8;
-            --toggle-bg: rgba(255, 255, 255, 0.2);
-            --tool-bg: #f5f5f5;
-            --tool-border: #e0e0e0;
+            --accent-light: #f4f4f4;
+            --header-bg: #002855;
+            --toggle-bg: rgba(255, 255, 255, 0.15);
+            --tool-bg: #f4f4f4;
+            --tool-border: #dcdcdc;
         }
 
         [data-theme="dark"] {
-            --bg: #1c1c1c;
-            --text: #e6e6e6;
-            --text-muted: #a0a0a0;
-            --card-bg: #2d2d2d;
-            --card-border: #3d3d3d;
+            --bg: #1a1a2e;
+            --text: #e8e8e8;
+            --text-muted: #a8a8a8;
+            --card-bg: #222244;
+            --card-border: #3a3a5c;
             --accent: #4db8d9;
             --accent-orange: #e87a3a;
-            --accent-light: #2a3a42;
-            --header-bg: #004b6b;
+            --accent-light: #2a2a48;
+            --header-bg: #001a3a;
             --toggle-bg: rgba(255, 255, 255, 0.15);
-            --tool-bg: #252525;
-            --tool-border: #3d3d3d;
+            --tool-bg: #252540;
+            --tool-border: #3a3a5c;
         }
 
         body {
@@ -54,7 +54,7 @@
         header {
             text-align: center;
             margin-bottom: 0;
-            padding: 3rem 1rem;
+            padding: 3.5rem 2rem;
             background: var(--header-bg);
             border-radius: 0;
             color: #fff;
@@ -65,25 +65,25 @@
         header::before {
             content: "";
             position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
             pointer-events: none;
         }
 
         header h1 {
-            font-size: 2rem;
+            font-size: 2.25rem;
             margin-bottom: 0.4rem;
             color: #fff;
             font-weight: 700;
-            letter-spacing: -0.02em;
+            letter-spacing: -0.01em;
         }
 
         header p {
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 1.05rem;
             font-weight: 400;
         }
 
@@ -124,15 +124,16 @@
         }
 
         .intro-box {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem 1.5rem;
+            max-width: 100%;
+            margin: 0;
+            padding: 2rem 4rem;
             background: var(--accent-light);
             border: none;
+            border-bottom: 1px solid var(--card-border);
             border-radius: 0;
             color: var(--text-muted);
-            font-size: 0.93rem;
-            line-height: 1.6;
+            font-size: 0.95rem;
+            line-height: 1.7;
             transition: background 0.3s;
         }
 
@@ -146,11 +147,11 @@
         }
 
         .section-heading {
-            max-width: 1200px;
-            margin: 2.5rem auto 1.25rem;
-            padding: 0 1.5rem 0.5rem;
-            font-size: 1.4rem;
-            font-weight: 600;
+            max-width: 100%;
+            margin: 2.5rem 0 1.25rem;
+            padding: 0 4rem 0.75rem;
+            font-size: 1.5rem;
+            font-weight: 700;
             color: var(--text);
             border-bottom: 1px solid var(--card-border);
         }
@@ -159,9 +160,9 @@
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
             gap: 1.5rem;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 1.5rem;
+            max-width: 100%;
+            margin: 0;
+            padding: 0 4rem;
         }
 
         .card {
@@ -290,22 +291,27 @@
         }
 
         footer {
-            max-width: 1200px;
-            margin: 3rem auto 0;
-            padding: 1.5rem;
+            max-width: 100%;
+            margin: 3rem 0 0;
+            padding: 2rem 4rem;
             text-align: center;
-            color: var(--text-muted);
-            font-size: 0.82rem;
-            border-top: 1px solid var(--card-border);
+            color: #ffffff;
+            background: #002855;
+            font-size: 0.85rem;
+        }
+
+        [data-theme="dark"] footer {
+            background: #001a3a;
         }
 
         footer a {
-            color: var(--accent);
+            color: #8ecae6;
             text-decoration: none;
         }
 
         footer a:hover {
             text-decoration: underline;
+            color: #ffffff;
         }
 
         @media (max-width: 600px) {
@@ -326,6 +332,10 @@
                 padding: 1.5rem 1rem;
             }
 
+            footer {
+                padding: 1.5rem 1rem;
+            }
+
             .card-image {
                 aspect-ratio: 4 / 3;
             }