feat: redesign and update site logo assets and navigation branding

loko/common/static/common/loko_logo.svg

@@ -1,8 +1,37 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" style="vertical-align: middle;">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5 100 100" width="100%" height="100%" fill="none">
-    <!-- Filled brand color circle -->
+    <defs>
-    <circle cx="12" cy="12" r="11" fill="currentColor" stroke="none" />
+        <linearGradient id="loko-teal-t" x1="50" y1="14" x2="86" y2="55" gradientUnits="userSpaceOnUse">
-    <!-- White road outline (open bottom, SSW entry, both sides touching the circle) -->
+            <stop offset="0%" stop-color="#4db6ac" />
-    <path d="M5.7 21 C15 18, 2 11, 9.2 7.85 L6.5 6.7 L14.7 2.5 L17.5 11.3 L14.8 10.15 C7 11, 20 18, 9.2 22.6" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+            <stop offset="100%" stop-color="#00897b" />
-    <!-- White S-curved centerline (SSW entry) -->
+        </linearGradient>
-    <path d="M7.45 21.8 C17.5 18, 4.5 11, 12 9" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2.5,2.5" stroke-linecap="round" />
+        <linearGradient id="loko-teal-l" x1="14" y1="35" x2="50" y2="96" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stop-color="#26a69c" />
+            <stop offset="100%" stop-color="#004d40" />
+        </linearGradient>
+        <linearGradient id="loko-teal-r" x1="50" y1="55" x2="86" y2="96" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stop-color="#00796b" />
+            <stop offset="100%" stop-color="#00332c" />
+        </linearGradient>
+    </defs>
+    <!-- Prisme Hexagonal Isométrique 3D -->
+    <polygon points="50,14 86,35 50,55 14,35" fill="url(#loko-teal-t)" />
+    <polygon points="14,35 50,55 50,96 14,75" fill="url(#loko-teal-l)" />
+    <polygon points="50,55 86,35 86,75 50,96" fill="url(#loko-teal-r)" />
+
+    <!-- Lignes Vectorielles Blanches Pleines -->
+    <path d="M50 20 L50 55 L20 72" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M50 55 L80 72" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" />
+
+    <!-- 4 Nœuds Concentriques : Anneau Blanc + Vert Foncé + Anneau Blanc + Cœur Vert Clair -->
+    <circle cx="50" cy="55" r="9" fill="#004d40" stroke="#ffffff" stroke-width="2" />
+    <circle cx="50" cy="55" r="4.5" fill="#00bfa5" stroke="#ffffff" stroke-width="1.5" />
+
+    <circle cx="50" cy="20" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+    <circle cx="50" cy="20" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
+
+    <circle cx="20" cy="72" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+    <circle cx="20" cy="72" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
+
+    <circle cx="80" cy="72" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+    <circle cx="80" cy="72" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
 </svg>

loko/templates/base.html

@@ -140,16 +140,37 @@
     <nav class="navbar navbar-expand-lg gradient-custom">
         <div class="container-fluid d-flex justify-content-between align-items-center">
             <!-- Logo -->
-            <a class="navbar-brand" href="/">
+            <a class="navbar-brand d-inline-flex align-items-center" href="/">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" class="me-2" style="vertical-align: middle; color: var(--brand-color);">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5 100 100" width="34" height="34" class="me-2" style="margin-top: -2px;" fill="none">
-                    <!-- Filled brand color circle -->
+                    <defs>
-                    <circle cx="12" cy="12" r="11" fill="currentColor" stroke="none" />
+                        <linearGradient id="loko-navbar-teal-t" x1="50" y1="14" x2="86" y2="55" gradientUnits="userSpaceOnUse">
-                    <!-- White road outline (open bottom, SSW entry, both sides touching the circle) -->
+                            <stop offset="0%" stop-color="#4db6ac" />
-                    <path d="M5.7 21 C15 18, 2 11, 9.2 7.85 L6.5 6.7 L14.7 2.5 L17.5 11.3 L14.8 10.15 C7 11, 20 18, 9.2 22.6" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+                            <stop offset="100%" stop-color="#00897b" />
-                    <!-- White S-curved centerline (SSW entry) -->
+                        </linearGradient>
-                    <path d="M7.45 21.8 C17.5 18, 4.5 11, 12 9" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="2.5,2.5" stroke-linecap="round" />
+                        <linearGradient id="loko-navbar-teal-l" x1="14" y1="35" x2="50" y2="96" gradientUnits="userSpaceOnUse">
+                            <stop offset="0%" stop-color="#26a69c" />
+                            <stop offset="100%" stop-color="#004d40" />
+                        </linearGradient>
+                        <linearGradient id="loko-navbar-teal-r" x1="50" y1="55" x2="86" y2="96" gradientUnits="userSpaceOnUse">
+                            <stop offset="0%" stop-color="#00796b" />
+                            <stop offset="100%" stop-color="#00332c" />
+                        </linearGradient>
+                    </defs>
+                    <polygon points="50,14 86,35 50,55 14,35" fill="url(#loko-navbar-teal-t)" />
+                    <polygon points="14,35 50,55 50,96 14,75" fill="url(#loko-navbar-teal-l)" />
+                    <polygon points="50,55 86,35 86,75 50,96" fill="url(#loko-navbar-teal-r)" />
+                    <path d="M50 20 L50 55 L20 72" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M50 55 L80 72" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round" />
+                    <circle cx="50" cy="55" r="9" fill="#004d40" stroke="#ffffff" stroke-width="2" />
+                    <circle cx="50" cy="55" r="4.5" fill="#00bfa5" stroke="#ffffff" stroke-width="1.5" />
+                    <circle cx="50" cy="20" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+                    <circle cx="50" cy="20" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
+                    <circle cx="20" cy="72" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+                    <circle cx="20" cy="72" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
+                    <circle cx="80" cy="72" r="7.5" fill="#004d40" stroke="#ffffff" stroke-width="1.8" />
+                    <circle cx="80" cy="72" r="3.6" fill="#00bfa5" stroke="#ffffff" stroke-width="1.3" />
                 </svg>
-                <span style="color: var(--brand-color); font-weight: bold; font-size: 20px;">
+                <span style="color: var(--brand-color); font-weight: bold; font-size: 20px; line-height: 1;">
                     {{ product_name }} - {{ organization_name }}
                 </span>
                 {% if environment_name %}