Rebrand landing page: EdgeFirst palette, Barlow/Crimson Text typography, proper light+dark theme

index.html

@@ -4,95 +4,244 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>EdgeFirst AI — Spatial Perception at the Edge</title>
+    <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=Barlow:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg: #fff;
-            --text: #1a1a2e;
-            --muted: #555;
-            --accent: #e94560;
-            --border: #e0e0e0;
-            --card-bg: #f8f9fa;
-            --card-border: #e94560;
+            /* Brand primary */
+            --navy: #3E3371;
+            --gold: #E8B820;
+            --teal: #1FA0A8;
+            --teal-text: #167A80;
+            --indigo: #4B0082;
+            --blue: #8FA3D4;
+
+            /* Light theme (default) */
+            --bg: #FFFFFF;
+            --bg-subtle: #F8F9FA;
+            --bg-card: #F0EDF8;
+            --text: #343A40;
+            --text-strong: #212529;
+            --text-muted: #6C757D;
+            --border: #E9ECEF;
+            --heading: var(--navy);
+            --link: var(--teal-text);
+            --accent-bg: var(--navy);
+            --accent-text: #FFFFFF;
         }
+
         @media (prefers-color-scheme: dark) {
             :root {
                 --bg: #1a1a2e;
-                --text: #eee;
-                --muted: #aaa;
+                --bg-subtle: #16213e;
+                --bg-card: rgba(75, 0, 130, 0.2);
+                --text: #F1F3F5;
+                --text-strong: #FFFFFF;
+                --text-muted: #aaa;
                 --border: rgba(255,255,255,0.1);
-                --card-bg: #16213e;
+                --heading: #FFFFFF;
+                --link: #1FA0A8;
+                --accent-bg: var(--navy);
+                --accent-text: #FFFFFF;
             }
         }
+
         * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            font-family: 'Crimson Text', Georgia, serif;
             background: var(--bg);
             color: var(--text);
-            line-height: 1.6;
-        }
-        .container { max-width: 900px; margin: 0 auto; padding: 2rem; }
-        h1 { font-size: 2rem; margin-bottom: 0.25rem; }
-        h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--accent); }
-        .tagline { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
-        .description { margin-bottom: 1.5rem; }
-        .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0; }
+            line-height: 1.7;
+            font-size: 16px;
+        }
+
+        .container {
+            max-width: 860px;
+            margin: 0 auto;
+            padding: 2.5rem 2rem;
+        }
+
+        /* Typography */
+        h1, h2, h3 {
+            font-family: 'Barlow', -apple-system, sans-serif;
+            color: var(--heading);
+            line-height: 1.3;
+        }
+
+        h1 {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin-bottom: 0.15rem;
+        }
+
+        h1 .edge { color: var(--heading); }
+        h1 .first { color: var(--gold); }
+
+        h2 {
+            font-size: 1.15rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+            margin-top: 2.5rem;
+            margin-bottom: 0.75rem;
+            padding-bottom: 0.35rem;
+            border-bottom: 2px solid var(--gold);
+        }
+
+        .tagline {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            margin-bottom: 1.5rem;
+        }
+
+        p { margin-bottom: 1rem; }
+
+        a { color: var(--link); text-decoration: none; }
+        a:hover { text-decoration: underline; color: var(--navy); }
+        @media (prefers-color-scheme: dark) {
+            a:hover { color: var(--gold); }
+        }
+
+        /* Badges row */
+        .badges {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.4rem;
+            margin: 1.25rem 0;
+        }
         .badges img { height: 22px; }
-        .links { display: flex; gap: 0.4rem; margin: 1.5rem 0; flex-wrap: wrap; }
-        .links img { height: 28px; }
-        .arch-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
-        .arch-table th, .arch-table td {
+
+        /* Link badges */
+        .link-badges {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.4rem;
+            margin: 1.5rem 0;
+        }
+        .link-badges img { height: 28px; }
+
+        /* Architecture table */
+        .arch-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 0.75rem 0;
+            font-family: 'Barlow', sans-serif;
+            font-size: 0.95rem;
+        }
+        .arch-table th {
             text-align: left;
+            padding: 0.5rem 0.75rem;
+            font-weight: 600;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            border-bottom: 2px solid var(--border);
+        }
+        .arch-table td {
             padding: 0.5rem 0.75rem;
             border-bottom: 1px solid var(--border);
         }
-        .arch-table th { color: var(--accent); font-size: 0.85rem; text-transform: uppercase; }
+        .arch-table td:first-child {
+            font-weight: 600;
+            color: var(--text-strong);
+            white-space: nowrap;
+        }
         .roadmap-tag {
-            font-size: 0.75rem;
-            padding: 0.1rem 0.4rem;
+            font-family: 'Barlow', sans-serif;
+            font-size: 0.7rem;
+            font-weight: 600;
+            padding: 0.1rem 0.45rem;
             border-radius: 3px;
-            background: #7c3aed;
+            background: var(--indigo);
             color: #fff;
             vertical-align: middle;
             margin-left: 0.3rem;
+            letter-spacing: 0.03em;
+            text-transform: uppercase;
+        }
+
+        /* Model grid */
+        .model-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            gap: 0.75rem;
+            margin: 1rem 0;
         }
-        .model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 1rem 0; }
         .model-card {
-            background: var(--card-bg);
-            padding: 1rem;
-            border-radius: 6px;
-            border-left: 3px solid var(--card-border);
-        }
-        .model-card h3 { font-size: 1rem; margin-bottom: 0.25rem; }
-        .model-card .meta { color: var(--muted); font-size: 0.85rem; }
-        .model-card a { color: var(--accent); text-decoration: none; }
-        .footer { margin-top: 3rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
-        .footer a { color: var(--muted); }
+            font-family: 'Barlow', sans-serif;
+            background: var(--bg-card);
+            padding: 0.85rem 1rem;
+            border-radius: 5px;
+            border-left: 3px solid var(--gold);
+            transition: border-color 0.15s;
+        }
+        .model-card:hover { border-left-color: var(--teal); }
+        .model-card h3 {
+            font-size: 0.95rem;
+            font-weight: 600;
+            margin-bottom: 0.2rem;
+        }
+        .model-card h3 a { color: var(--text-strong); }
+        .model-card h3 a:hover { color: var(--link); text-decoration: none; }
+        .model-card .meta {
+            color: var(--text-muted);
+            font-size: 0.82rem;
+            font-weight: 400;
+        }
+
+        /* Studio section */
+        .studio-features {
+            margin: 0.75rem 0 0 1.25rem;
+            color: var(--text);
+            font-size: 0.95rem;
+        }
+        .studio-features li { margin-bottom: 0.25rem; }
+
+        /* Footer */
+        .footer {
+            margin-top: 3rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--border);
+            text-align: center;
+            font-family: 'Barlow', sans-serif;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+        .footer a { color: var(--text-muted); }
+        .footer a:hover { color: var(--link); }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>EdgeFirst AI</h1>
-        <p class="tagline">Spatial Perception at the Edge</p>
+        <h1><span class="edge">Edge</span><span class="first">First</span> AI</h1>
+        <p class="tagline">AI for Spatial Perception</p>
 
-        <p class="description">
-            <strong>EdgeFirst Perception</strong> is a comprehensive suite of open-source libraries and microservices for building AI-driven spatial perception systems on edge devices. It supports cameras, LiDAR, radar, and time-of-flight sensors &mdash; enabling real-time object detection, segmentation, sensor fusion, and 3D spatial understanding, all optimized for resource-constrained embedded hardware.
+        <p>
+            <strong>EdgeFirst Perception</strong> is an open-source suite of libraries and microservices for AI-driven spatial perception on edge devices. It supports cameras, LiDAR, radar, and time-of-flight sensors &mdash; enabling real-time object detection, segmentation, sensor fusion, and 3D spatial understanding, optimized for resource-constrained embedded hardware.
         </p>
 
-        <div class="links">
-            <a href="https://edgefirst.studio"><img src="https://img.shields.io/badge/EdgeFirst_Studio-e94560?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAyTDIgN2wxMCA1IDEwLTV6Ii8+PHBhdGggZD0iTTIgMTdsMTAgNSAxMC01Ii8+PHBhdGggZD0iTTIgMTJsMTAgNSAxMC01Ii8+PC9zdmc+" alt="EdgeFirst Studio"></a>
-            <a href="https://github.com/EdgeFirstAI"><img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub"></a>
-            <a href="https://doc.edgefirst.ai"><img src="https://img.shields.io/badge/Docs-0072CE?style=for-the-badge&logo=readthedocs&logoColor=white" alt="Documentation"></a>
-            <a href="https://www.au-zone.com"><img src="https://img.shields.io/badge/Au--Zone_Technologies-333?style=for-the-badge" alt="Au-Zone Technologies"></a>
+        <div class="link-badges">
+            <a href="https://edgefirst.studio"><img src="https://img.shields.io/badge/EdgeFirst_Studio-3E3371?style=for-the-badge&logoColor=white" alt="EdgeFirst Studio"></a>
+            <a href="https://github.com/EdgeFirstAI"><img src="https://img.shields.io/badge/GitHub-212529?style=for-the-badge&logo=github&logoColor=white" alt="GitHub"></a>
+            <a href="https://doc.edgefirst.ai"><img src="https://img.shields.io/badge/Documentation-1FA0A8?style=for-the-badge&logo=readthedocs&logoColor=white" alt="Documentation"></a>
+            <a href="https://www.au-zone.com"><img src="https://img.shields.io/badge/Au--Zone_Technologies-6C757D?style=for-the-badge" alt="Au-Zone Technologies"></a>
         </div>
 
         <h2>Supported Hardware</h2>
         <div class="badges">
-            <img src="https://img.shields.io/badge/NXP-i.MX_8M_Plus-0072CE?style=flat-square" alt="NXP i.MX 8M Plus">
-            <img src="https://img.shields.io/badge/NXP-i.MX_93-0072CE?style=flat-square" alt="NXP i.MX 93">
-            <img src="https://img.shields.io/badge/NXP-i.MX_95-0072CE?style=flat-square" alt="NXP i.MX 95">
-            <img src="https://img.shields.io/badge/NXP-Ara240-0072CE?style=flat-square" alt="NXP Ara240">
-            <img src="https://img.shields.io/badge/RPi5-Hailo--8%2F8L-C51A4A?style=flat-square" alt="RPi5 + Hailo-8/8L">
-            <img src="https://img.shields.io/badge/NVIDIA-Jetson-76B900?style=flat-square" alt="NVIDIA Jetson">
+            <img src="https://img.shields.io/badge/NXP-i.MX_8M_Plus-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 8M Plus">
+            <img src="https://img.shields.io/badge/NXP-i.MX_93-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 93">
+            <img src="https://img.shields.io/badge/NXP-i.MX_95-3E3371?style=flat-square&logoColor=white" alt="NXP i.MX 95">
+            <img src="https://img.shields.io/badge/NXP-Ara240-3E3371?style=flat-square&logoColor=white" alt="NXP Ara240">
+            <img src="https://img.shields.io/badge/RPi5-Hailo--8%2F8L-1FA0A8?style=flat-square&logoColor=white" alt="RPi5 + Hailo-8/8L">
+            <img src="https://img.shields.io/badge/NVIDIA-Jetson-76B900?style=flat-square&logoColor=white" alt="NVIDIA Jetson">
         </div>
 
         <h2>Architecture</h2>
@@ -102,34 +251,34 @@
                 <th>Description</th>
             </tr>
             <tr>
-                <td><strong>Foundation</strong></td>
+                <td>Foundation</td>
                 <td>Hardware abstraction, video I/O, accelerated inference delegates</td>
             </tr>
             <tr>
-                <td><strong>Zenoh</strong></td>
+                <td>Zenoh</td>
                 <td>Modular perception pipeline over Zenoh pub/sub</td>
             </tr>
             <tr>
-                <td><strong>GStreamer</strong></td>
+                <td>GStreamer</td>
                 <td>Spatial perception elements for GStreamer / NNStreamer</td>
             </tr>
             <tr>
-                <td><strong>ROS 2</strong></td>
+                <td>ROS 2</td>
                 <td>Native ROS 2 nodes extending Zenoh microservices <span class="roadmap-tag">Roadmap</span></td>
             </tr>
         </table>
 
         <h2>Model Zoo</h2>
-        <p>Pre-trained YOLO models optimized for edge deployment &mdash; ONNX FP32 and TFLite INT8 with platform-specific compiled variants.</p>
+        <p>Pre-trained YOLO models for edge deployment &mdash; ONNX FP32 and TFLite INT8 with platform-specific compiled variants.</p>
 
         <div class="model-grid">
             <div class="model-card">
-                <h3><a href="https://huggingface.co/EdgeFirst/yolov8-det">YOLOv8 Detection</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 50.2%</p>
+                <h3><a href="https://huggingface.co/EdgeFirst/yolo26-det">YOLO26 Detection</a></h3>
+                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 54.9%</p>
             </div>
             <div class="model-card">
-                <h3><a href="https://huggingface.co/EdgeFirst/yolov8-seg">YOLOv8 Segmentation</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 34.1%</p>
+                <h3><a href="https://huggingface.co/EdgeFirst/yolo26-seg">YOLO26 Segmentation</a></h3>
+                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 37.0%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolo11-det">YOLO11 Detection</a></h3>
@@ -140,12 +289,12 @@
                 <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 35.5%</p>
             </div>
             <div class="model-card">
-                <h3><a href="https://huggingface.co/EdgeFirst/yolo26-det">YOLO26 Detection</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 54.9%</p>
+                <h3><a href="https://huggingface.co/EdgeFirst/yolov8-det">YOLOv8 Detection</a></h3>
+                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano mAP@0.5: 50.2%</p>
             </div>
             <div class="model-card">
-                <h3><a href="https://huggingface.co/EdgeFirst/yolo26-seg">YOLO26 Segmentation</a></h3>
-                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 37.0%</p>
+                <h3><a href="https://huggingface.co/EdgeFirst/yolov8-seg">YOLOv8 Segmentation</a></h3>
+                <p class="meta">5 sizes &middot; COCO 80 classes &middot; Nano Mask mAP: 34.1%</p>
             </div>
             <div class="model-card">
                 <h3><a href="https://huggingface.co/EdgeFirst/yolov5-det">YOLOv5 Detection</a></h3>
@@ -157,7 +306,7 @@
         <p>
             <a href="https://edgefirst.studio"><strong>EdgeFirst Studio</strong></a> is the companion SaaS platform for the complete perception development lifecycle. <strong>Free tier available.</strong>
         </p>
-        <ul style="margin: 0.75rem 0 0 1.5rem; color: var(--muted);">
+        <ul class="studio-features">
             <li>Dataset management &amp; AI-assisted annotation</li>
             <li>YOLO model training with automatic INT8 quantization</li>
             <li>CameraAdaptor integration for native sensor format training</li>