visuals

index.html

@@ -74,7 +74,7 @@
     </a>
 
     <!-- Top Navigation -->
-    <header role="banner" aria-label="Main navigation" class="bg-white/60 shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-50" style="height: var(--header-height);" x-data="{ 
+    <header role="banner" aria-label="Main navigation" class="bg-white/80 shadow-md border-b border-gray-300 fixed top-0 left-0 right-0 z-50" style="height: var(--header-height);" x-data="{ 
         mobileMenuOpen: false, 
         areas: window.navigationAreas || [],
         currentArea: null,
@@ -164,7 +164,7 @@
             <div class="px-4 py-3 space-y-2 max-h-[70vh] overflow-y-auto">
                 <!-- Areas with Topics -->
                 <div>
-                    <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Research Areas</p>
+                    <p class="px-3 text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Research Areas</p>
                     
                     <template x-for="area in areas" :key="area.id">
                         <div class="mb-2">

js/components/Card.js

@@ -67,7 +67,7 @@ function renderArtifactCard(artifact, options = {}) {
     const cardId = `artifact-card-${index}`;
     
     return `
-        <div class="flex-none w-80 h-60 border border-gray-200 rounded-lg overflow-hidden bg-white relative group hover:shadow-lg transition-shadow duration-200">
+        <div class="flex-none w-80 h-60 border border-gray-300 rounded-lg overflow-hidden bg-white/95 shadow-sm relative group hover:shadow-lg transition-shadow duration-200">
             <!-- Background image -->
             ${backgroundImage ? `
             <div class="absolute inset-0 opacity-10">
@@ -95,9 +95,9 @@ function renderArtifactCard(artifact, options = {}) {
                     <div class="flex justify-between items-start mb-3 pr-8">
                         <div class="flex items-center space-x-2">
                             <span class="text-lg">${style.icon}</span>
-                            <span class="text-xs font-bold uppercase tracking-wide">${type}</span>
+                            <span class="text-sm font-bold uppercase tracking-wide">${type}</span>
                         </div>
-                        <span class="text-xs text-gray-500">${date}</span>
+                        <span class="text-sm text-gray-500">${date}</span>
                     </div>
                     
                     <!-- Title -->
@@ -196,7 +196,7 @@ function renderAreaCard(area, options = {}) {
     
     return `
         <a href="/${area.id}" 
-           class="group relative block border border-gray-200 rounded-lg overflow-hidden bg-white hover:shadow-lg transition-all duration-200 h-64">
+           class="group relative block border border-gray-300 rounded-lg overflow-hidden bg-white/95 shadow-sm hover:shadow-lg transition-all duration-200 h-64">
             
             <!-- Background image with low opacity -->
             ${area.image ? `
@@ -222,10 +222,10 @@ function renderAreaCard(area, options = {}) {
                 
                 <!-- Topics with colors from subAreas -->
                 <div class="flex-shrink-0">
-                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Topics:</p>
+                    <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Topics:</p>
                     <div class="flex flex-wrap gap-2">
                         ${topics.map(topic => `
-                            <span class="inline-block px-2.5 py-1 text-sm ${topic.bgColor} ${topic.textColor} rounded">
+                            <span class="inline-block px-3 py-1.5 text-sm ${topic.bgColor} ${topic.textColor} rounded">
                                 ${topic.name}
                             </span>
                         `).join('')}

js/components/ContentSection.js

@@ -11,14 +11,14 @@
 export function renderContentSection(id, content, options = {}) {
     const {
         className = 'mb-16',
-        opacity = '40', // Default 40% opacity like About section
+        opacity = '90', // Increased from 40% to 90% for better readability
         blur = 'sm',    // sm, md, lg
         padding = 'p-6 md:p-10'
     } = options;
 
     return `
         <section id="${id}" class="${className} relative z-20 px-4 sm:px-6 lg:px-8">
-            <div class="bg-white/${opacity} backdrop-blur-${blur} shadow-sm rounded-lg ${padding} w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+            <div class="bg-white/${opacity} backdrop-blur-${blur} shadow-md rounded-lg ${padding} w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
                 ${content}
             </div>
         </section>

js/components/PageNavigation.js

@@ -14,9 +14,9 @@ export function renderPageNavigation(label, items) {
 
     return `
         <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
-            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+            <div class="bg-white/85 backdrop-blur-sm shadow-md rounded-lg px-6 py-4 w-full border border-gray-200" style="max-width: min(90%, 1400px); margin: 0 auto;">
                 <div class="flex items-center gap-3 overflow-x-auto">
-                    <span class="text-gray-600 font-semibold whitespace-nowrap">${label}</span>
+                    <span class="text-gray-600 font-semibold whitespace-nowrap text-base">${label}</span>
                     ${items.map((item, index) => {
                         const activeClasses = item.active 
                             ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2' 
@@ -24,7 +24,7 @@ export function renderPageNavigation(label, items) {
                         
                         return `
                             ${index > 0 ? '<span class="text-gray-300">•</span>' : ''}
-                            <a href="${item.href}" class="px-3 py-1.5 text-sm font-medium ${activeClasses} hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${item.text}</a>
+                            <a href="${item.href}" class="px-4 py-2 text-base font-medium ${activeClasses} hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${item.text}</a>
                         `;
                     }).join('')}
                 </div>

js/main.js

@@ -32,7 +32,7 @@ export function createTeamMember(name, role, hfUsername, tags) {
     
     const tagElements = tags.map(tag => {
         const tagInfo = teamTagData[tag];
-        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="window.scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
+        return `<span class="inline-block px-2.5 py-1 text-sm bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="window.scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
     }).join('');
 
     return `

js/pages/AreaPage.js

@@ -55,24 +55,36 @@ function renderAreaOverview(area, areaId) {
             <!-- Area Description -->
             <div class="mb-8">
                 ${area.description.paragraphs ? 
-                    area.description.paragraphs.map(p => `<p class="text-gray-700 leading-relaxed mb-4">${p}</p>`).join('') 
-                    : `<p class="text-gray-700 leading-relaxed">${area.description.short || area.description}</p>`
+                    area.description.paragraphs.map(p => `<p class="text-gray-900 leading-relaxed mb-4">${p}</p>`).join('') 
+                    : `<p class="text-gray-900 leading-relaxed">${area.description.short || area.description}</p>`
                 }
             </div>
 
             <!-- Topics within this area -->
             <div class="mb-8">
-                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">Topics in this area:</p>
+                <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide mb-3">Topics in this area:</p>
                 <div class="flex flex-wrap gap-2">
                     ${topics.map(topic => {
-                        // Extract colors from topic.color
+                        // Extract colors from topic.color and enhance them
                         let bgColor = 'bg-gray-200';
-                        let textColor = 'text-gray-700';
+                        let textColor = 'text-gray-800';
+                        let borderColor = 'border-gray-300';
+                        
                         if (topic.color) {
                             const bgMatch = topic.color.match(/bg-(\w+)-(\d+)/);
                             const textMatch = topic.color.match(/text-(\w+)-(\d+)/);
-                            if (bgMatch) bgColor = `bg-${bgMatch[1]}-${bgMatch[2]}`;
-                            if (textMatch) textColor = `text-${textMatch[1]}-700`;
+                            if (bgMatch) {
+                                const colorName = bgMatch[1];
+                                const shade = parseInt(bgMatch[2]);
+                                // Increase saturation: 100 → 200, 200 → 300, etc.
+                                const newShade = Math.min(shade + 100, 300);
+                                bgColor = `bg-${colorName}-${newShade}`;
+                                borderColor = `border-${colorName}-${Math.min(newShade + 100, 400)}`;
+                            }
+                            if (textMatch) {
+                                const colorName = textMatch[1];
+                                textColor = `text-${colorName}-900`;
+                            }
                         }
                         
                         // Get short description for tooltip
@@ -80,7 +92,7 @@ function renderAreaOverview(area, areaId) {
                         const titleAttr = shortDesc ? ` title="${shortDesc}"` : '';
                         
                         return `
-                            <a href="/${areaId}/${topic.id}" class="inline-block px-3 py-1.5 text-sm ${bgColor} ${textColor} rounded hover:opacity-80 transition-opacity"${titleAttr}>
+                            <a href="/${areaId}/${topic.id}" class="inline-block px-3 py-1.5 text-sm font-semibold ${bgColor} ${textColor} ${borderColor} border rounded hover:opacity-90 transition-opacity"${titleAttr}>
                                 ${topic.navName}
                             </a>
                         `;
@@ -90,7 +102,7 @@ function renderAreaOverview(area, areaId) {
             
             <!-- Research and Resources -->
             <div>
-                <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">Research and Resources:</p>
+                <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide mb-3">Research and Resources:</p>
                 <div id="area-artifacts-carousel-${areaId}" class="overflow-x-auto -mx-2">
                     <!-- Carousel will be inserted here -->
                 </div>
@@ -109,7 +121,7 @@ function renderAreaOverview(area, areaId) {
 function renderTopicView(area, areaId, topic, topicId) {
     const topicName = topic.navName || topic.name;
     const topicDescription = topic.description?.paragraphs 
-        ? topic.description.paragraphs.map(p => `<p class="text-gray-700 leading-relaxed mb-4">${p}</p>`).join('')
+        ? topic.description.paragraphs.map(p => `<p class="text-gray-900 leading-relaxed mb-4">${p}</p>`).join('')
         : (topic.description?.short || topic.description || '');
     
     // Get all topics for navigation
@@ -136,7 +148,7 @@ function renderTopicView(area, areaId, topic, topicId) {
             
             <!-- Topic Description -->
             ${topicDescription ? `
-            <div class="mb-8">
+            <div class="mb-8 text-gray-900">
                 ${topicDescription}
             </div>
             ` : ''}

js/pages/HomePage.js

@@ -13,9 +13,23 @@ const homeBackgroundImage = window.homeBackgroundImage;
 
 // Helper function to create inline styled links
 function createInlineLink(text, href, colorClass = '', tooltip = '') {
-    const baseClass = 'inline-block px-2 py-0.5 mx-0.5 text-sm font-medium rounded hover:opacity-80 transition-opacity no-underline';
+    const baseClass = 'inline-block px-2.5 py-1 mx-0.5 text-sm font-semibold rounded hover:opacity-90 transition-opacity no-underline border';
     const titleAttr = tooltip ? ` title="${tooltip}"` : '';
-    return `<a href="${href}" class="${baseClass} ${colorClass}"${titleAttr}>${text}</a>`;
+    
+    // Map color classes to darker variants and add border colors
+    const enhancedColorClass = colorClass
+        .replace('bg-yellow-100', 'bg-yellow-200 border-yellow-300')
+        .replace('bg-blue-100', 'bg-blue-200 border-blue-300')
+        .replace('bg-green-100', 'bg-green-200 border-green-300')
+        .replace('bg-purple-100', 'bg-purple-200 border-purple-300')
+        .replace('bg-orange-100', 'bg-orange-200 border-orange-300')
+        .replace('text-yellow-800', 'text-yellow-900')
+        .replace('text-blue-800', 'text-blue-900')
+        .replace('text-green-800', 'text-green-900')
+        .replace('text-purple-800', 'text-purple-900')
+        .replace('text-orange-800', 'text-orange-900');
+    
+    return `<a href="${href}" class="${baseClass} ${enhancedColorClass}"${titleAttr}>${text}</a>`;
 }
 
 export function renderHomePage() {
@@ -28,7 +42,7 @@ export function renderHomePage() {
         ${renderContentSection('about-and-works', `
             <h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">About</h3>
             
-            <div class="space-y-2 text-gray-700 leading-relaxed mb-8">
+            <div class="space-y-2 text-gray-900 leading-relaxed mb-8">
                 <p>
                     With the rapid evolution of Artificial Intelligence over the last five years – and particularly its shift from Machine Learning as a behind-the-scenes organizing principle of our digital infrastructure to the more visible "generative AI" systems sold as consumer products – the interaction modes between the technology and its social contexts have expanded drastically.
                 </p>

js/utils/router.js

@@ -160,7 +160,7 @@ class Router {
         // Create background element at document level
         const backgroundDiv = document.createElement('div');
         backgroundDiv.id = 'page-background';
-        backgroundDiv.className = 'fixed opacity-40 z-0';
+        backgroundDiv.className = 'fixed opacity-25 z-0';
         
         // The positioning logic is now in updatePageBackgroundPosition, call it after adding to DOM
         document.body.insertAdjacentElement('afterbegin', backgroundDiv);

js/utils/search.js

@@ -127,7 +127,7 @@ export function displaySearchResults(results, query) {
         return;
     }
     
-    let html = `<div class="text-sm text-gray-600 mb-4">
+    let html = `<div class="text-base text-gray-600 mb-4 font-medium">
         Found ${totalResults} result${totalResults === 1 ? '' : 's'}
     </div>`;
     
@@ -144,23 +144,23 @@ export function displaySearchResults(results, query) {
             const { areaLinksHtml: areaLinks, topicLinksHtml: subAreaLinks } = renderSearchTags(areas, topics);
             
             html += `
-                <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div class="p-4 bg-white/95 rounded-lg border border-gray-300 shadow-sm hover:shadow-md transition-shadow">
                     <div class="flex items-center justify-between mb-2">
-                        <h5 class="font-medium text-sm text-gray-900 leading-snug">${result.title}</h5>
+                        <h5 class="font-medium text-base text-gray-900 leading-snug">${result.title}</h5>
                         <div class="flex items-center gap-2 flex-shrink-0 ml-2">
-                            <span class="text-xs text-gray-500">${score}%</span>
+                            <span class="text-sm text-gray-500">${score}%</span>
                             <a href="${result.url}" target="_blank" class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Open ${result.title}">
-                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                 </svg>
                             </a>
                         </div>
                     </div>
-                    <div class="flex items-center gap-2 mb-2 text-xs text-gray-600">
-                        <span class="px-2 py-0.5 bg-gray-200 text-gray-700 rounded font-medium">${result.type}</span>
+                    <div class="flex items-center gap-2 mb-2 text-sm text-gray-600">
+                        <span class="px-2.5 py-1 bg-gray-200 text-gray-700 rounded font-medium">${result.type}</span>
                         <span class="text-gray-500">${result.date}</span>
                     </div>
-                    <div class="flex flex-wrap gap-1.5">
+                    <div class="flex flex-wrap gap-2">
                         ${areaLinks}
                         ${subAreaLinks}
                     </div>

js/utils/tags.js

@@ -10,7 +10,7 @@ export function renderAreaTag(areaId) {
     const area = areasData[areaId];
     if (!area) return '';
     
-    return `<span class="inline-block px-2 py-1 text-xs rounded-full ${area.color}">${area.title}</span>`;
+    return `<span class="inline-block px-2.5 py-1 text-sm rounded-full ${area.color}">${area.title}</span>`;
 }
 
 /**
@@ -50,7 +50,7 @@ export function renderTopicTag(areaId, topicId) {
         }
     }
     
-    return `<span class="inline-block px-2 py-0.5 text-xs ${bgColor} ${textColor} rounded">${topicName}</span>`;
+    return `<span class="inline-block px-2.5 py-1 text-sm ${bgColor} ${textColor} rounded">${topicName}</span>`;
 }
 
 /**
@@ -100,7 +100,7 @@ export function renderSearchTags(areas = [], topics = []) {
         if (!area) return '';
         
         const colorClass = area.color || 'bg-blue-100 text-blue-800';
-        return `<a href="/${areaId}#overview" class="text-xs px-2 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${area.title}</a>`;
+        return `<a href="/${areaId}#overview" class="text-sm px-2.5 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${area.title}</a>`;
     }).filter(link => link).join('');
     
     const topicLinksHtml = topics.map(topicId => {
@@ -117,7 +117,7 @@ export function renderSearchTags(areas = [], topics = []) {
         const topicName = typeof topic === 'string' ? topic : topic.name;
         const colorClass = typeof topic === 'object' && topic.color ? topic.color : 'bg-gray-100 text-gray-800';
         
-        return `<a href="/${primaryArea}#${topicId}" class="text-xs px-2 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${topicName}</a>`;
+        return `<a href="/${primaryArea}#${topicId}" class="text-sm px-2.5 py-1 ${colorClass} rounded hover:opacity-80 transition-opacity">${topicName}</a>`;
     }).filter(link => link).join('');
     
     return {

styles.css

@@ -46,6 +46,7 @@ body {
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Montserrat', sans-serif;
     line-height: var(--leading-tight);
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
 }
 
 /* Body text readability */
@@ -152,13 +153,13 @@ p {
 
 /* Frosted glass effect */
 .backdrop-blur-md {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
 }
 
 .backdrop-blur-sm {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
 }
 
 .drop-shadow-lg {
@@ -329,7 +330,7 @@ p {
 
 /* Semi-transparent overlays for header and search sidebar */
 header, #search-sidebar {
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.8);
 }
 
 /* Ensure content is readable over background */