Update index.html with new update card for ICSE 2026 NIER acceptance and modify existing link text. Refactor CSS for roadmap display and add image zoom functionality in JavaScript for enhanced user experience.

Author: a-a-k

assets/css/style.css

@@ -366,48 +366,78 @@ ul {
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
 }
 
-.roadmap-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 1.25rem;
+.roadmap-figure {
+    display: flex;
+    justify-content: center;
 }
 
-.roadmap-card {
-    background-color: var(--card-bg-color);
+.roadmap-image {
+    width: 100%;
+    max-width: 960px;
+    border-radius: 0.75rem;
     border: 1px solid var(--border-color);
-    border-radius: 1rem;
-    padding: 1.25rem;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    background-color: var(--card-bg-color);
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
+    cursor: zoom-in;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
-    height: 100%;
 }
 
-.roadmap-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
+.roadmap-image:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
 }
 
-.roadmap-phase {
-    display: inline-flex;
+.image-zoom {
+    position: fixed;
+    inset: 0;
+    display: flex;
     align-items: center;
-    gap: 0.35rem;
-    padding: 0.2rem 0.55rem;
-    border-radius: 999px;
-    background-color: rgba(0, 123, 255, 0.1);
-    color: var(--primary-color);
-    font-weight: 700;
-    font-size: 0.85rem;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 250;
 }
 
-.roadmap-card h3 {
-    margin: 0.75rem 0 0.35rem;
+.image-zoom.is-open {
+    opacity: 1;
+    pointer-events: auto;
 }
 
-.roadmap-card p {
-    color: var(--secondary-color);
-    margin: 0;
+.image-zoom-frame {
+    position: relative;
+    max-width: min(1200px, 90vw);
+    max-height: 90vh;
+    background: var(--bg-color);
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-zoom-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 0.5rem;
+}
+
+.image-zoom-close {
+    position: absolute;
+    top: 0.35rem;
+    right: 0.35rem;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    border: none;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
 }
 
 /* Contact Section */

assets/js/main.js

@@ -69,6 +69,9 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    const zoomOverlay = document.querySelector('[data-zoom-overlay]');
+    const zoomTarget = zoomOverlay?.querySelector('[data-zoom-target]');
+
     const modal = document.getElementById('pilot-modal');
     const applicationForm = document.getElementById('application-form');
     const statusField = document.getElementById('application-status');
@@ -133,7 +136,9 @@ document.addEventListener('DOMContentLoaded', () => {
         const closeModal = () => {
             modal.classList.remove('is-open');
             modal.setAttribute('aria-hidden', 'true');
-            body.classList.remove('no-scroll');
+            if (!zoomOverlay?.classList.contains('is-open')) {
+                body.classList.remove('no-scroll');
+            }
             document.removeEventListener('keydown', handleKeydown);
             if (lastFocusedElement) {
                 lastFocusedElement.focus();
@@ -145,6 +150,44 @@ document.addEventListener('DOMContentLoaded', () => {
         overlay?.addEventListener('click', closeModal);
     }
 
+    const zoomSources = document.querySelectorAll('[data-zoom-source]');
+
+    const closeZoom = () => {
+        if (!zoomOverlay) return;
+        zoomOverlay.classList.remove('is-open');
+        zoomOverlay.setAttribute('aria-hidden', 'true');
+        if (zoomTarget) {
+            zoomTarget.src = '';
+        }
+        if (!modal?.classList.contains('is-open')) {
+            body.classList.remove('no-scroll');
+        }
+    };
+
+    const openZoom = (source) => {
+        if (!zoomOverlay || !zoomTarget) return;
+        zoomTarget.src = source.src;
+        zoomTarget.alt = source.alt || 'Zoomed image';
+        zoomOverlay.classList.add('is-open');
+        zoomOverlay.setAttribute('aria-hidden', 'false');
+        body.classList.add('no-scroll');
+    };
+
+    zoomSources.forEach(img => img.addEventListener('click', () => openZoom(img)));
+    zoomOverlay?.addEventListener('click', (event) => {
+        if (event.target === zoomOverlay) {
+            closeZoom();
+        }
+    });
+    zoomOverlay?.querySelectorAll('[data-zoom-close]').forEach(el =>
+        el.addEventListener('click', closeZoom)
+    );
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && zoomOverlay?.classList.contains('is-open')) {
+            closeZoom();
+        }
+    });
+
     const setStatus = (message, state) => {
         if (!statusField) {
             return;

index.html

@@ -125,7 +125,7 @@ <h2 class="section-title">Publications</h2>
                         <p>This paper introduces the Effective-Information Consistency Score to quantify uncertainty in Transformer Circuits. This white-box, single-pass metric helps attribute uncertainty to specific mechanisms within LLMs.</p>
                     </li>
                     <li>
-                        <a href="https://www.alphaxiv.org/abs/2506.11176" target="_blank" rel="noopener noreferrer">Model Discovery and Graph Simulation: A Lightweight Alternative to Chaos Engineering</a>
+                        <a href="https://www.alphaxiv.org/abs/2506.11176" target="_blank" rel="noopener noreferrer">Model Discovery and Graph Simulation: A Lightweight Gateway to Chaos Engineering</a>
                         <p>Offline resilience estimation from a dependency graph; compares simulations to live failure injection on a microservice benchmark.</p>
                     </li>
                     <li>
@@ -140,6 +140,11 @@ <h2 class="section-title">Publications</h2>
             <div class="container">
                 <h2 class="section-title">Updates</h2>
                 <div class="updates-grid">
+                    <article class="update-card">
+                        <span class="update-date">December 2025</span>
+                        <h3 class="update-title">ICSE 2026 NIER acceptance</h3>
+                        <p class="update-text">Our paper “Model Discovery and Graph Simulation: A Lightweight Gateway to Chaos Engineering” was accepted to the ICSE 2026 NIER track, which recognizes our commitment to safer, simulation-driven resilience.</p>
+                    </article>
                     <article class="update-card">
                         <span class="update-date">September 2025</span>
                         <h3 class="update-title">Causal AI publication</h3>
@@ -170,27 +175,8 @@ <h3 class="update-title">Sheaft framework</h3>
                     <img src="assets/img/roadmap.svg" alt="Roadmap icon" class="section-icon" width="56" height="56">
                     <h2 class="section-title">Roadmap</h2>
                 </div>
-                <div class="roadmap-grid">
-                    <article class="roadmap-card">
-                        <span class="roadmap-phase">Q4 2025</span>
-                        <h3>Design partner pilots</h3>
-                        <p>Guide Bering discovery runs and Sheaft simulations with early adopters to tune the resilience playbook.</p>
-                    </article>
-                    <article class="roadmap-card">
-                        <span class="roadmap-phase">Q1 2026</span>
-                        <h3>Self-serve ingestion</h3>
-                        <p>Ship a secure CLI and UI to import configs, traces, and telemetry, producing live dependency graphs on demand.</p>
-                    </article>
-                    <article class="roadmap-card">
-                        <span class="roadmap-phase">Q2 2026</span>
-                        <h3>Simulation workspace</h3>
-                        <p>Launch a collaborative workspace for Monte-Carlo what-if runs, result sharing, and regression tracking.</p>
-                    </article>
-                    <article class="roadmap-card">
-                        <span class="roadmap-phase">Q3 2026</span>
-                        <h3>Resilience scoring</h3>
-                        <p>Release resilience and causal emergence scores with remediation recommendations for production rollouts.</p>
-                    </article>
+                <div class="roadmap-figure">
+                    <img src="assets/img/roadmap.svg" alt="MB3R Lab roadmap" class="roadmap-image" data-zoom-source>
                 </div>
             </div>
         </section>
@@ -213,6 +199,15 @@ <h2 class="section-title">Contact</h2>
         </div>
     </footer>
 
+    <div class="image-zoom" data-zoom-overlay aria-hidden="true">
+        <div class="image-zoom-frame">
+            <button type="button" class="image-zoom-close" data-zoom-close aria-label="Close zoomed image">
+                &times;
+            </button>
+            <img src="" alt="" data-zoom-target>
+        </div>
+    </div>
+
     <div class="modal" id="pilot-modal" aria-hidden="true">
         <div class="modal-overlay" data-modal-close></div>
         <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="pilot-modal-title">