feat(frontend): add dedicated /cli page, nav links, and CTA buttons; remove CLI modals for leaner UX

- New CLI page at /cli with detailed usage and improved Quick Start card header
- Add CLI link to navbars and small ‘Try the CLI’ CTAs on Home & Templates
- Remove CLI modals and unused showCliModal() handler (keep_small_simple)
- Self-host Bootstrap and Font Awesome; add OSI logo and GPL notice in footers
- Dockerfile: verify vendor assets exist at build time
- Minor a11y/contrast and heading-order cleanups (100 a11y)

frontend/static/css/style.css

@@ -15,6 +15,17 @@
 }
 
 /* General Styles */
+
+/* Navbar link contrast fix on primary bg */
+.navbar-dark.bg-primary .navbar-nav .nav-link {
+    color: #ffffff;
+    font-weight: 600;
+}
+.navbar-dark.bg-primary .navbar-nav .nav-link:hover,
+.navbar-dark.bg-primary .navbar-nav .nav-link:focus,
+.navbar-dark.bg-primary .navbar-nav .nav-link.active {
+    color: #ffffff;
+}
 body {
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
@@ -250,7 +261,7 @@ footer.bg-dark .text-muted {
 
 .template-tag {
     background: var(--light-color);
-    color: var(--secondary-color);
+    color: #495057;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
     font-size: 0.75rem;
@@ -508,16 +519,87 @@ footer.bg-dark .text-muted {
     }
 
     .form-control {
-        background-color: var(--bg-secondary);
+        background-color: #1f2937;
         border-color: #4a5568;
-        color: #333;
+        color: #f7fafc;
+    }
+    .form-control::placeholder {
+        color: #cbd5e0;
+        opacity: 1;
     }
 
     .form-control:focus {
-        background-color: var(--bg-secondary);
+        background-color: #1f2937;
         border-color: var(--primary-color);
-        color: #333;
+        color: #f7fafc;
     }
+
+    /* Improve outline-secondary contrast on dark backgrounds */
+    .card.bg-dark .btn-outline-secondary,
+    .bg-dark .btn-outline-secondary,
+    .card .btn-outline-secondary {
+        color: #e2e8f0;
+        border-color: #e2e8f0;
+    }
+    .card.bg-dark .btn-outline-secondary:hover,
+    .bg-dark .btn-outline-secondary:hover,
+    .card .btn-outline-secondary:hover {
+        color: #1a202c;
+        background-color: #e2e8f0;
+        border-color: #e2e8f0;
+    }
+}
+
+/* Increase link and outline-primary contrast on dark backgrounds */
+@media (prefers-color-scheme: dark) {
+    .card.bg-dark a,
+    .bg-dark a {
+        color: #93c5fd;
+    }
+    .card.bg-dark a:hover,
+    .bg-dark a:hover {
+        color: #bfdbfe;
+    }
+
+    .card.bg-dark .btn-outline-primary,
+    .bg-dark .btn-outline-primary,
+    .card .btn-outline-primary {
+        color: #e2e8f0;
+        border-color: #93c5fd;
+    }
+    .card.bg-dark .btn-outline-primary:hover,
+    .bg-dark .btn-outline-primary:hover,
+    .card .btn-outline-primary:hover {
+        color: #1a202c;
+        background-color: #93c5fd;
+        border-color: #93c5fd;
+    }
+
+    /* High-contrast link utility */
+    .link-contrast {
+        color: #93c5fd !important;
+    }
+    .link-contrast:hover,
+    .link-contrast:focus {
+        color: #bfdbfe !important;
+        text-decoration: underline;
+    }
+}
+
+/* Footer OSI logo */
+footer .badge.bg-success {
+    position: relative;
+    padding-left: 1.5rem;
+}
+footer .badge.bg-success::before {
+    content: "";
+    position: absolute;
+    left: 0.35rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    background: url('/static/img/osi-logo.svg') no-repeat center / contain;
 }
 
 /* Print Styles */

frontend/static/img/osi-logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="128"
+  height="128"
+  viewBox="0 0 128 128"
+  role="img"
+  aria-labelledby="title desc">
+  <title id="title">Open Source Initiative (OSI) Logo</title>
+  <desc id="desc">Green circular mark with a keyhole-shaped cutout representing the Open Source Initiative.</desc>
+  <!--
+    This is a simplified vector rendition of the OSI "Open Source" mark.
+    The OSI logo is a trademark of the Open Source Initiative.
+    See https://opensource.org/trademark for usage guidelines.
+  -->
+  <defs>
+    <mask id="osi-cutout" maskUnits="userSpaceOnUse">
+      <!-- Start fully transparent -->
+      <rect x="0" y="0" width="128" height="128" fill="black"/>
+      <!-- Keep the outer circle area -->
+      <circle cx="64" cy="64" r="60" fill="white"/>
+      <!-- Cut out inner circle (keyhole top) -->
+      <circle cx="64" cy="64" r="26" fill="black"/>
+      <!-- Cut out the keyhole stem; rounded for a smooth shape -->
+      <rect x="53" y="86" width="22" height="30" rx="6" ry="6" fill="black"/>
+    </mask>
+  </defs>
+
+  <!-- Apply the mask to a solid green rectangle -->
+  <rect x="0" y="0" width="128" height="128" fill="#3DA639" mask="url(#osi-cutout)"/>
+
+  <!-- Optional subtle outline for crisp edges on various backgrounds -->
+  <circle cx="64" cy="64" r="60" fill="none" stroke="#2a7a2a" stroke-width="1" opacity="0.5"/>
+</svg>

frontend/static/js/main.js

@@ -337,10 +337,7 @@ function showUploadModal() {
     modal.show();
 }
 
-function showCliModal() {
-    const modal = new bootstrap.Modal(document.getElementById('cliModal'));
-    modal.show();
-}
+
 
 async function validateFile() {
     const fileInput = document.getElementById('fileInput');

frontend/static/js/templates.js

@@ -107,7 +107,7 @@ class TemplatesBrowser {
                     <div class="card-header">
                         <div class="d-flex justify-content-between align-items-start">
                             <div>
-                                <h6 class="card-title mb-1">${this.escapeHtml(template.name)}</h6>
+                                <p class="card-title h6 mb-1">${this.escapeHtml(template.name)}</p>
                                 <small class="opacity-75">
                                     <i class="fas fa-${this.getUnitTypeIcon(template.unit_type)} me-1"></i>
                                     ${template.unit_type}