Clean, clickable cards that expand/collapse on click

Independent operation of each card
Smooth animations for better user experience
Mobile-friendly design with appropriate spacing and touch targets
Keyboard accessibility (Escape key support)
Click-outside behavior to close cards
Removed complex checkbox-based implementation in favor of simple JavaScript toggling

public/css/components.css

@@ -8,10 +8,6 @@
                 border-color var(--transition-speed) ease;
 }
 
-.card-base:hover {
-    border-color: var(--primary);
-}
-
 /* Mission Vision Cards */
 .mission-vision {
     display: grid;
@@ -20,69 +16,56 @@
     margin: var(--spacing-xl) 0;
 }
 
-.mission-vision .tooltip-container {
+.tooltip-container {
     background: var(--bg-card);
     padding: var(--spacing-xl);
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
-    text-align: center;
-    position: relative;
     cursor: pointer;
-    transition: transform var(--transition-speed) ease, 
-                border-color var(--transition-speed) ease;
+    transition: border-color 0.3s ease;
 }
 
-.mission-vision .tooltip-container:hover {
-    transform: translateY(-5px);
+.tooltip-container:hover {
     border-color: var(--primary);
 }
 
-.mission-vision h3 {
+.tooltip-container h3 {
     color: var(--primary);
     margin-bottom: var(--spacing-md);
 }
 
-/* Tooltip Styles */
-.tooltip-container {
+.tooltip-header {
     position: relative;
+    padding-right: 30px;
 }
 
-.tooltip {
-    visibility: hidden;
+.tooltip-header::after {
+    content: '▼';
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--primary);
+    transition: transform 0.3s ease;
+}
+
+.tooltip-container.active .tooltip-header::after {
+    transform: rotate(180deg);
+}
+
+.tooltip-content {
+    max-height: 0;
+    overflow: hidden;
     opacity: 0;
-    position: absolute;
-    bottom: 120%;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--bg-card);
-    color: var(--text);
-    padding: var(--spacing-lg);
-    border-radius: var(--border-radius);
-    width: 300px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--border-color);
-    font-size: 0.9rem;
-    line-height: 1.5;
-    text-align: left;
-    z-index: 100;
-    transition: opacity var(--transition-speed) ease,
-                visibility var(--transition-speed) ease;
+    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
+    margin-top: 0;
 }
 
-.tooltip::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 10px 10px 0;
-    border-style: solid;
-    border-color: var(--bg-card) transparent transparent transparent;
-}
-
-.tooltip-container:hover .tooltip {
-    visibility: visible;
+.tooltip-container.active .tooltip-content {
+    max-height: 500px;
     opacity: 1;
+    margin-top: var(--spacing-lg);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--border-color);
 }
 
 /* Service Cards */
@@ -92,14 +75,11 @@
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     margin: var(--spacing-lg) 0;
-    transition: transform var(--transition-speed) ease, 
-                border-color var(--transition-speed) ease;
+    transition: border-color 0.3s ease;
 }
 
 .service-card:hover {
     border-color: var(--primary);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
 }
 
 .service-card h3 {
@@ -107,6 +87,20 @@
     margin-bottom: var(--spacing-md);
 }
 
+.service-card li {
+    list-style: none;
+    margin-bottom: var(--spacing-sm);
+    position: relative;
+    padding-left: 1.5em;
+}
+
+.service-card li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--primary);
+}
+
 /* Contact Info Card */
 .contact-info {
     background: var(--bg-card);
@@ -115,11 +109,11 @@
     border: 1px solid var(--border-color);
     margin: var(--spacing-xl) 0;
     text-align: center;
+    transition: border-color 0.3s ease;
 }
 
 .contact-info:hover {
     border-color: var(--primary);
-    transition: all 0.3s ease;
 }
 
 .contact-info p {
@@ -149,7 +143,6 @@
 .contact-link:hover {
     color: var(--primary) !important;
     border-color: var(--primary);
-    opacity: 1;
 }
 
 .contact-link i {
@@ -164,62 +157,13 @@
     height: 1.2em;
 }
 
-.contact-link:hover .signal-icon {
-    color: var(--primary);
-}
-
 /* Quote Styles */
-.quote {
-    font-size: 1.2rem;
-    line-height: 1.6;
-    padding: var(--spacing-xl);
-    margin: var(--spacing-xl) 0;
-    background: var(--bg-card);
-    border-left: 4px solid var(--primary);
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    color: var(--text);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.hero-quote {
-    font-size: 1.3rem;
-    line-height: 1.7;
-    color: var(--text);
-    max-width: 900px;
-    margin: var(--spacing-xl) auto;
-    padding: var(--spacing-md) 0;
-    position: relative;
-    font-weight: 300;
-    opacity: 0.9;
-}
-
-.hero-quote::before {
-    content: '"';
-    position: absolute;
-    top: -30px;
-    left: -10px;
-    font-size: 3rem;
-    color: var(--primary);
-    opacity: 0.3;
-}
-
 .welcome-quote {
     font-size: 1.1rem;
     text-align: center;
     padding: var(--spacing-xl);
 }
 
-.welcome-quote:before {
-    content: '°';
-    position: absolute;
-    top: -10px;
-    left: 0;
-    font-size: 1rem;
-    color: var(--primary);
-    opacity: 0.2;
-}
-
-/* Logo Sub Text */
 .logo-sub {
     display: block;
     text-align: center;
@@ -230,3 +174,19 @@
     line-height: 1.4;
     font-style: italic;
 }
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+    .tooltip-container {
+        padding: var(--spacing-lg);
+    }
+
+    .tooltip-content {
+        font-size: 1rem;
+        line-height: 1.6;
+    }
+
+    .service-card {
+        padding: var(--spacing-lg);
+    }
+}