Update capabilities.html

capabilities.html

@@ -8,9 +8,9 @@
   <!-- Tailwind -->
   <script src="https://cdn.tailwindcss.com"></script>
 
-  <!-- Three.js + Vanta -->
+  <!-- Three.js + Vanta (pinned) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>
 
   <!-- Icons + Font -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -165,7 +165,7 @@
               <!-- MCAP -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="mcap" aria-label="Open dossier: MCAP">
+                data-dossier="mcap" aria-label="Open dossier: MCAP" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">MCAP</div>
@@ -185,7 +185,7 @@
               <!-- CHAI -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="chai" aria-label="Open dossier: CHAI">
+                data-dossier="chai" aria-label="Open dossier: CHAI" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">CHAI</div>
@@ -205,7 +205,7 @@
               <!-- Quantum Lambda -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda">
+                data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">Quantum Lambda</div>
@@ -225,7 +225,7 @@
               <!-- AI Scientist -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
-                data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist">
+                data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">AI Scientist</div>
@@ -245,7 +245,7 @@
               <!-- Agentic Workforce -->
               <button type="button"
                 class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element md:col-span-2"
-                data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce">
+                data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                     <div class="text-lg font-semibold text-gray-100">Agentic Workforce</div>
@@ -550,7 +550,7 @@
     window.addEventListener('resize', () => vantaEffect.resize());
 
     /* -------------------------------------------------------------
-       MODAL HELPERS
+       MODAL HELPERS (focus trap + restore opener focus)
     ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -565,8 +565,6 @@
           } else {
             if (document.activeElement === last) { e.preventDefault(); first.focus(); }
           }
-        } else if (e.key === 'Escape') {
-          toggleModal(modal, false);
         }
       }
       modal.addEventListener('keydown', handler);
@@ -582,6 +580,7 @@
 
     const toggleModal = (modal, show) => {
       if (show) {
+        modal._opener = document.activeElement; // restore target on close
         modal.classList.remove('modal-hidden');
         modal.classList.add('modal-visible');
         document.body.style.overflow = 'hidden';
@@ -591,12 +590,16 @@
         modal.classList.add('modal-hidden');
         document.body.style.overflow = '';
         untrapFocus(modal);
+        if (modal._opener && typeof modal._opener.focus === 'function') {
+          modal._opener.focus();
+        }
+        modal._opener = null;
       }
     };
 
     /* -------------------------------------------------------------
        ACCESS MODAL + INLINE FEEDBACK (replaces alerts)
-    ------------------------------------------------------------- */
+   ------------------------------------------------------------- */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
@@ -622,10 +625,13 @@
     }
 
     function clearAccessFeedback() {
-      accessFeedback.classList.add('hidden');
       accessFeedback.textContent = '';
-      accessFeedback.className = 'hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm';
-      // Restore base classes in case they were overwritten by className (above line sets baseline)
+      accessFeedback.classList.add('hidden');
+      accessFeedback.classList.remove(
+        'border-red-500/30','bg-red-900/10','text-red-200',
+        'border-emerald-500/30','bg-emerald-900/10','text-emerald-200',
+        'border-indigo-500/30','bg-indigo-900/10','text-indigo-200'
+      );
     }
 
     accessBtn.addEventListener('click', () => {
@@ -638,7 +644,6 @@
     accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
 
     function isValidEmail(email) {
-      // Lightweight sanity check (not exhaustive)
       return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
     }
 
@@ -659,11 +664,8 @@
         return;
       }
 
-      // Static-only behavior: confirm receipt, keep it calm and “lab-like”.
       setAccessFeedback('success', 'Request received. You will be contacted after review.');
       accessForm.reset();
-
-      // Optional auto-close after a brief pause (keeps the flow, but not abrupt)
       setTimeout(() => toggleModal(accessModal, false), 900);
     });
 
@@ -695,7 +697,7 @@
     /* -------------------------------------------------------------
        DOSSIERS
        + Hash deep-linking (#mcap, #chai, etc.)
-       + Active-card state
+       + Active-card state (aria-pressed)
     ------------------------------------------------------------- */
     const DOSSIERS = {
       mcap: {
@@ -812,7 +814,8 @@
       programCards.forEach(btn => {
         const isMatch = btn.getAttribute('data-dossier') === key;
         btn.classList.toggle('is-active', isMatch);
-        btn.setAttribute('aria-current', isMatch ? 'true' : 'false');
+        btn.setAttribute('aria-pressed', String(isMatch));
+        btn.removeAttribute('aria-current');
       });
     }
 
@@ -861,18 +864,14 @@
       if (opts.setActive) setActiveCard(key);
       if (opts.setHash) updateHash(key, opts.replaceHash);
 
-      // Keep the dossier panel in view on small screens without changing layout
-      // (only when user selects a card)
       if (!opts.replaceHash) {
         const isSmall = window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
         if (isSmall) {
-          // subtle nudge: bring dossier header into view
           dossierTitle.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }
       }
     }
 
-    // Card click: render dossier + update hash + active state
     programCards.forEach(btn => {
       btn.addEventListener('click', () => {
         const key = btn.getAttribute('data-dossier');
@@ -881,15 +880,12 @@
       });
     });
 
-    // Hash deep-link: initial load
     (function initFromHashOrDefault() {
       const keyFromHash = normalizeHashToKey();
       const key = keyFromHash || 'mcap';
-      // replaceHash avoids adding an extra history entry on first load
       renderDossier(key, { setHash: true, replaceHash: true, setActive: true });
     })();
 
-    // Respond to manual hash changes / back-forward navigation
     window.addEventListener('hashchange', () => {
       const keyFromHash = normalizeHashToKey();
       if (keyFromHash) {
@@ -898,7 +894,7 @@
     });
 
     /* -------------------------------------------------------------
-       GLOBAL ESC BEHAVIOR
+       GLOBAL ESC BEHAVIOR (single source of truth)
     ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {