| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Disability Modernization Infographics</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
| color: #1e293b; |
| } |
| .infographic-card { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); |
| border-radius: 20px; |
| padding: 2.5rem; |
| margin-bottom: 2.5rem; |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| border: 1px solid rgba(255, 255, 255, 0.5); |
| } |
| .infographic-card:hover { |
| transform: translateY(-8px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 15px 10px -6px rgba(0, 0, 0, 0.1); |
| } |
| .infographic-title { |
| position: relative; |
| padding-bottom: 1rem; |
| margin-bottom: 2rem; |
| color: #0f172a; |
| } |
| .infographic-title::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 80px; |
| height: 4px; |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| border-radius: 2px; |
| } |
| .chart-container { |
| position: relative; |
| height: 250px; |
| width: 100%; |
| } |
| .bar { |
| background: linear-gradient(180deg, #3b82f6, #1d4ed8); |
| transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); |
| border-radius: 8px 8px 0 0; |
| box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2); |
| } |
| .timeline-item { |
| position: relative; |
| padding: 1.5rem; |
| border-left: 3px solid #93c5fd; |
| margin-left: 1.5rem; |
| transition: all 0.3s ease; |
| } |
| .timeline-item:hover { |
| background: rgba(239, 246, 255, 0.5); |
| border-left-color: #3b82f6; |
| } |
| .timeline-item::before { |
| content: ''; |
| position: absolute; |
| left: -12px; |
| top: 1.75rem; |
| width: 20px; |
| height: 20px; |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
| border-radius: 50%; |
| border: 4px solid #ffffff; |
| box-shadow: 0 0 0 3px #93c5fd; |
| transition: all 0.3s ease; |
| } |
| .timeline-item:hover::before { |
| transform: scale(1.2); |
| box-shadow: 0 0 0 4px #3b82f6; |
| } |
| .chart-label { |
| position: absolute; |
| bottom: -30px; |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: #475569; |
| } |
| .hero-gradient { |
| background: linear-gradient(120deg, #3b82f6, #8b5cf6, #ec4899); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } |
| 70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
| } |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| .feature-card { |
| transition: all 0.3s ease; |
| border: 1px solid rgba(0, 0, 0, 0.05); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); |
| border-color: rgba(59, 130, 246, 0.2); |
| } |
| .progress-bar { |
| position: relative; |
| overflow: hidden; |
| } |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #ef4444, #f97316); |
| border-radius: 9999px; |
| transition: width 2s cubic-bezier(0.22, 0.61, 0.36, 1); |
| } |
| .progress-text { |
| position: absolute; |
| top: 50%; |
| right: 1rem; |
| transform: translateY(-50%); |
| font-weight: 700; |
| color: white; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); |
| } |
| </style> |
| </head> |
| <body class="p-4 sm:p-8"> |
|
|
| <div class="max-w-6xl mx-auto"> |
| <header class="text-center mb-16 mt-8"> |
| <div class="inline-block mb-6"> |
| <div class="w-24 h-24 mx-auto bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center floating"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
| </svg> |
| </div> |
| </div> |
| <h1 class="text-4xl sm:text-6xl font-extrabold text-gray-900 mb-4"> |
| <span class="hero-gradient">Disability Modernization</span> |
| </h1> |
| <p class="text-gray-600 text-lg sm:text-xl max-w-3xl mx-auto leading-relaxed"> |
| Bridging the gap between cutting-edge science and legal frameworks for neurodevelopmental disabilities |
| </p> |
| </header> |
|
|
| |
| <div class="infographic-card"> |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Genetic Foundations of Neurodevelopmental Disabilities</h2> |
| |
| <div class="flex flex-col lg:flex-row items-center lg:items-start space-y-10 lg:space-y-0 lg:space-x-12"> |
| <div class="w-full lg:w-1/2"> |
| <p class="text-gray-600 mb-8 text-lg leading-relaxed"> |
| Neurodevelopmental disabilities, such as ADHD, have a strong genetic basis. The heritability of ADHD is around 74%, making it one of the most heritable psychiatric conditions. |
| </p> |
| <div class="flex items-center justify-center mb-10"> |
| <div class="relative w-56 h-56"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full"></div> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full" style="clip-path: polygon(50% 0%, 50% 50%, 100% 0);"></div> |
| <div class="absolute inset-0 flex flex-col items-center justify-center text-center"> |
| <span class="text-5xl font-extrabold text-white">74%</span> |
| <span class="text-base font-semibold text-white mt-2">Heritability Index</span> |
| <span class="text-xs text-blue-100 mt-1">ADHD</span> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Key Genetic Polymorphisms</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> |
| </svg> |
| </div> |
| <span class="ml-3 text-gray-700"><strong>Val158Met COMT:</strong> 4x enzymatic activity, impairing working memory</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> |
| </svg> |
| </div> |
| <span class="ml-3 text-gray-700"><strong>DRD2 Taq1A:</strong> 30-40% D2 receptor density reduction, reducing cognitive stamina</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> |
| </svg> |
| </div> |
| <span class="ml-3 text-gray-700"><strong>DAT1 10-repeat:</strong> 50% faster dopamine reuptake, affecting attention regulation</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="w-full lg:w-1/2 flex flex-col justify-center items-center"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Disability Incidence Risk</h3> |
| <p class="text-sm text-gray-500 mb-8 text-center max-w-xs">Incidence in first-degree relatives vs. general population</p> |
| <div class="flex items-end justify-center w-full space-x-8 h-64"> |
| <div class="flex flex-col items-center justify-end h-full w-1/2"> |
| <div class="bg-gradient-to-t from-blue-300 to-blue-200 w-full rounded-t-xl relative overflow-hidden" style="height: 10%;"> |
| <div class="absolute inset-0 bg-white opacity-20"></div> |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-blue-800">1x</div> |
| </div> |
| <span class="mt-4 text-sm font-semibold text-gray-600">General Population</span> |
| </div> |
| <div class="flex flex-col items-center justify-end h-full w-1/2"> |
| <div class="bg-gradient-to-t from-blue-600 to-blue-500 w-full rounded-t-xl relative overflow-hidden pulse" style="height: 100%;"> |
| <div class="absolute inset-0 bg-white opacity-10"></div> |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-extrabold text-white">19.7x</div> |
| </div> |
| <span class="mt-4 text-sm font-semibold text-gray-600">First-Degree Relatives</span> |
| </div> |
| </div> |
| <div class="mt-10 bg-gradient-to-r from-amber-50 to-orange-50 p-5 rounded-xl border border-amber-100 w-full"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <svg class="h-8 w-8 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-bold text-amber-800">Scientific Insight</h4> |
| <p class="text-amber-700 mt-1">Neuroimaging shows reduced prefrontal-striatal connectivity in individuals with these genetic variants</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="infographic-card"> |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">The Legal and Scientific Conflict</h2> |
| |
| <div class="flex flex-col lg:flex-row items-center lg:items-start space-y-10 lg:space-y-0 lg:space-x-12"> |
| <div class="w-full lg:w-1/2 flex justify-center items-center"> |
| <div class="w-full max-w-md"> |
| |
| <svg viewBox="0 0 200 200" class="w-full h-auto text-gray-800"> |
| <defs> |
| <linearGradient id="oldGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| <stop offset="0%" stop-color="#ef4444" /> |
| <stop offset="100%" stop-color="#f97316" /> |
| </linearGradient> |
| <linearGradient id="newGradient" x1="0%" y1="0%" x2="100%" y2="0%"> |
| <stop offset="0%" stop-color="#3b82f6" /> |
| <stop offset="100%" stop-color="#8b5cf6" /> |
| </linearGradient> |
| </defs> |
| <g fill="currentColor" stroke="white" stroke-width="2"> |
| |
| <path d="M100 20 L90 50 H110 L100 20 Z" /> |
| <rect x="95" y="50" width="10" height="30" rx="2" /> |
| <rect x="40" y="80" width="120" height="8" rx="4" /> |
| |
| |
| <path d="M50 80 L20 120 L45 120 Q45 140 50 140 L80 140 Q80 120 75 120 L50 120 Z" fill="url(#oldGradient)" /> |
| <rect x="50" y="140" width="30" height="30" rx="4" fill="url(#oldGradient)" /> |
| |
| |
| <path d="M150 80 L180 120 L155 120 Q155 140 150 140 L120 140 Q120 120 125 120 L150 120 Z" fill="url(#newGradient)" /> |
| <rect x="120" y="140" width="30" height="30" rx="4" fill="url(#newGradient)" /> |
| </g> |
| <text x="65" y="100" font-size="14" fill="#ffffff" font-weight="bold" text-anchor="middle">Traditional</text> |
| <text x="135" y="100" font-size="14" fill="#ffffff" font-weight="bold" text-anchor="middle">Modern</text> |
| <text x="65" y="160" font-size="12" fill="#ffffff" text-anchor="middle">SSA Standards</text> |
| <text x="135" y="160" font-size="12" fill="#ffffff" text-anchor="middle">Genetic Evidence</text> |
| |
| |
| <path d="M100 30 L140 40" stroke="#ef4444" stroke-width="3" fill="none" /> |
| <circle cx="140" cy="40" r="8" fill="#ef4444" /> |
| <text x="140" y="44" font-size="10" fill="#ffffff" text-anchor="middle" font-weight="bold">!</text> |
| </svg> |
| </div> |
| </div> |
| <div class="w-full lg:w-1/2"> |
| <p class="text-gray-600 mb-8 text-lg leading-relaxed"> |
| The SSA's traditional standards lead to a high denial rate, particularly for claims based on neurodevelopmental disorders. This creates a significant barrier for individuals with legitimate disabilities. |
| </p> |
| <div class="bg-gradient-to-r from-red-50 to-orange-50 p-6 rounded-xl border border-red-100"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Initial Denial Rate</h3> |
| <p class="text-gray-600 mb-4 text-lg">For Neurodevelopmental Claims</p> |
| <div class="progress-bar w-full bg-red-100 rounded-full h-12 overflow-hidden"> |
| <div class="progress-fill" style="width: 86%;"> |
| <div class="progress-text">86%</div> |
| </div> |
| </div> |
| <div class="mt-6 flex justify-between text-sm text-gray-500"> |
| <span>0%</span> |
| <span>25%</span> |
| <span>50%</span> |
| <span>75%</span> |
| <span>100%</span> |
| </div> |
| </div> |
| <div class="mt-8 grid grid-cols-2 gap-4"> |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> |
| <div class="text-3xl font-bold text-blue-600">3x</div> |
| <div class="text-sm text-gray-600 mt-1">Longer appeals process</div> |
| </div> |
| <div class="bg-amber-50 p-4 rounded-lg border border-amber-100"> |
| <div class="text-3xl font-bold text-amber-600">74%</div> |
| <div class="text-sm text-gray-600 mt-1">Heritability ignored</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="infographic-card"> |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Proposed Legislation: The Modernization Act</h2> |
|
|
| <div class="space-y-8"> |
| <p class="text-gray-600 text-lg leading-relaxed max-w-4xl"> |
| This proposed act aims to address systemic issues by updating the SSA's standards to reflect modern science and technology. It establishes a comprehensive framework for incorporating genetic evidence while ensuring accessibility and security. |
| </p> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="feature-card bg-gradient-to-br from-blue-50 to-indigo-50 p-7 rounded-2xl border border-blue-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-blue-500 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
| </svg> |
| </div> |
| <div class="ml-5"> |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Evidentiary Standards</h4> |
| <p class="text-gray-600">Mandates consideration of certified genetic evidence (e.g., PRS) and requires a written rationale for any denials.</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card bg-gradient-to-br from-green-50 to-emerald-50 p-7 rounded-2xl border border-green-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-green-500 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm0-4c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zM21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" /> |
| </svg> |
| </div> |
| <div class="ml-5"> |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Accessibility (WCAG)</h4> |
| <p class="text-gray-600">Requires all digital documents containing genetic evidence to be compliant with WCAG 2.1 Level AA standards.</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card bg-gradient-to-br from-amber-50 to-yellow-50 p-7 rounded-2xl border border-amber-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-amber-500 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> |
| </svg> |
| </div> |
| <div class="ml-5"> |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Data Security (PQC)</h4> |
| <p class="text-gray-600">Mandates migration of genetic data to Post-Quantum Cryptography (PQC) protocols within 24 months of enactment.</p> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card bg-gradient-to-br from-rose-50 to-red-50 p-7 rounded-2xl border border-rose-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-rose-500 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.047a1.998 1.998 0 010 2.828l-1.414 1.414a1.998 1.998 0 01-2.828 0L9 9.686m4.5-4.5l-4.5 4.5" /> |
| </svg> |
| </div> |
| <div class="ml-5"> |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Enforcement</h4> |
| <p class="text-gray-600">Provides a private right of action for claimants and authorizes the EEOC and OCR for oversight and audits.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gradient-to-r from-purple-50 to-indigo-50 p-6 rounded-2xl border border-purple-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <svg class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
| </svg> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-xl font-bold text-purple-800">Implementation Timeline</h4> |
| <p class="text-purple-700 mt-2">The act proposes a phased implementation over 24 months to ensure smooth transition and compliance across all SSA offices.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="infographic-card"> |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Post-Quantum Cryptography (PQC) Implementation</h2> |
| <p class="text-gray-600 mb-10 text-lg max-w-3xl"> |
| A comprehensive timeline for the mandated PQC migration for genetic data security, ensuring protection against future quantum computing threats. |
| </p> |
| |
| <div class="relative"> |
| <div class="hidden md:block absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-blue-200 via-purple-200 to-rose-200"></div> |
| |
| <div class="flex flex-col md:flex-row justify-between relative"> |
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0 mb-10 md:mb-0"> |
| <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <span class="text-2xl font-bold">1</span> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2025</h3> |
| <p class="text-gray-600 mt-2">Cryptographic inventory (HIPAA §164.308(a)(7)(ii))</p> |
| <div class="mt-4 bg-blue-50 p-3 rounded-lg"> |
| <p class="text-sm text-blue-700">Assessment of current cryptographic systems and identification of vulnerabilities</p> |
| </div> |
| </div> |
|
|
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0 mb-10 md:mb-0"> |
| <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <span class="text-2xl font-bold">2</span> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2026</h3> |
| <p class="text-gray-600 mt-2">FIPS 203/204/205 compliance (NIST Cybersecurity Framework 2.0)</p> |
| <div class="mt-4 bg-purple-50 p-3 rounded-lg"> |
| <p class="text-sm text-purple-700">Implementation of NIST-approved PQC algorithms for key exchange and digital signatures</p> |
| </div> |
| </div> |
|
|
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0"> |
| <div class="bg-gradient-to-br from-rose-500 to-rose-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <span class="text-2xl font-bold">3</span> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2027</h3> |
| <p class="text-gray-600 mt-2">Full CNSA 2.0 migration (NSA Advisory M-24-03)</p> |
| <div class="mt-4 bg-rose-50 p-3 rounded-lg"> |
| <p class="text-sm text-rose-700">Complete transition to NSA Commercial National Security Algorithm Suite 2.0 standards</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-gradient-to-r from-cyan-50 to-blue-50 p-6 rounded-2xl border border-cyan-100"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <svg class="h-8 w-8 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.047a1.998 1.998 0 010 2.828l-1.414 1.414a1.998 1.998 0 01-2.828 0L9 9.686m4.5-4.5l-4.5 4.5" /> |
| </svg> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-xl font-bold text-cyan-800">Security Impact</h4> |
| <p class="text-cyan-700 mt-2">This migration ensures genetic data remains secure against both current and future quantum computing threats, protecting the privacy of millions of Americans.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <footer class="text-center py-10 mt-10 border-t border-gray-200"> |
| <p class="text-gray-500">Advancing disability rights through science and technology</p> |
| <p class="text-gray-400 text-sm mt-2">© 2023 Disability Modernization Initiative</p> |
| </footer> |
| </div> |
|
|
| </body> |
| </html> |
