UI:improved mobile responsiveness

Author: AbdulSalam416

web/assets/css/main.css

@@ -326,6 +326,29 @@ footer {
     color: #ffffff !important;
 }
 
+.footer-logo-section p {
+    margin-top: 12px;
+    color: var(--color-text-secondary);
+    font-size: 14px;
+}
+
+.footer-links {
+    display: flex;
+    gap: 24px;
+}
+
+.footer-links a {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    font-family: var(--font-heading);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.footer-links a:hover {
+    color: #ffffff;
+}
+
 @media (max-width: 1024px) {
     .grid-3 {
         grid-template-columns: 1fr;
@@ -343,4 +366,75 @@ footer {
     h1 { font-size: 40px; }
     .hero { padding: 100px 0; }
     .definition-block { font-size: 24px; }
+
+    /* Footer Mobile */
+    .footer-inner {
+        flex-direction: column;
+        gap: 40px;
+        text-align: center;
+    }
+
+    .footer-logo-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .footer-links {
+        justify-content: center;
+    }
+
+    /* Mobile Nav */
+    .nav-toggle-label {
+        display: flex;
+        align-items: center;
+        order: 3;
+    }
+
+    .logo {
+        order: 1;
+    }
+
+    nav {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background: #ffffff;
+        border-bottom: 1px solid var(--color-border);
+        display: none;
+        flex-direction: column;
+        padding: 20px 32px;
+        z-index: 1000;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    nav a {
+        margin: 12px 0;
+        margin-left: 0;
+        font-size: 18px;
+    }
+
+    .nav-github {
+        margin-top: 8px;
+    }
+
+    .nav-toggle:checked ~ nav {
+        display: flex;
+    }
+
+    /* Hamburger to X Animation */
+    .nav-toggle:checked ~ .nav-toggle-label span {
+        background: transparent;
+    }
+
+    .nav-toggle:checked ~ .nav-toggle-label span::before {
+        transform: rotate(45deg);
+        bottom: 0;
+    }
+
+    .nav-toggle:checked ~ .nav-toggle-label span::after {
+        transform: rotate(-45deg);
+        top: 0;
+    }
 }

web/layouts/partials/footer.html

@@ -10,10 +10,10 @@
             </a>
             <p>© 2026. Released under CC BY 4.0.</p>
         </div>
-        <div style="display: flex; gap: 24px;">
-            <a href="https://github.com/opensustain/open-traceability" style="color: var(--color-text-secondary); text-decoration: none;">GitHub</a>
-            <a href="https://bsky.app" style="color: var(--color-text-secondary); text-decoration: none;">Bluesky</a>
-            <a href="/privacy" style="color: var(--color-text-secondary); text-decoration: none;">Privacy</a>
+        <div class="footer-links">
+            <a href="https://github.com/protontypes/open-traceability">GitHub</a>
+            <a href="https://bsky.app/profile/opensustaintech.bsky.social">Bluesky</a>
+            <a href="">Privacy</a>
         </div>
     </div>
 </footer>