Update visual component styling for presentation mode

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ofriw

website/src/components/VisualElements/AbstractShapesVisualization.module.css

@@ -24,7 +24,7 @@
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 1.5rem;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--ifm-color-emphasis-800);
 }
 
 .shapes {
@@ -59,14 +59,14 @@
 
 .arrow {
   font-size: 2rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--ifm-color-emphasis-600);
   margin: 1rem 0;
   line-height: 1;
 }
 
 .outcome {
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--ifm-color-emphasis-700);
   font-style: italic;
   min-height: 2.5rem;
   display: flex;
@@ -78,52 +78,58 @@
 .description {
   text-align: center;
   font-size: 1rem;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--ifm-color-emphasis-800);
   font-weight: 500;
   padding-top: 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--ifm-color-emphasis-300);
   margin-top: 0.5rem;
 }
 
 /* Responsive design for mobile */
 @media (max-width: 768px) {
   .container {
-    padding: 1.5rem 1rem;
+    padding: 1.5rem 0.75rem;
   }
 
   .comparison {
-    flex-direction: column;
-    gap: 2.5rem;
+    gap: 1.5rem;
   }
 
   .side {
-    max-width: 100%;
+    max-width: 45%;
+  }
+
+  .label {
+    font-size: 0.85rem;
+    margin-bottom: 1rem;
   }
 
   .shapes {
-    min-height: 140px;
+    min-height: 120px;
   }
 
   .row {
-    font-size: 2rem;
-    letter-spacing: 0.2rem;
+    font-size: 1.5rem;
+    letter-spacing: 0.15rem;
   }
 
   .cleanShape {
-    font-size: 3rem;
+    font-size: 2.5rem;
   }
 
   .arrow {
-    font-size: 1.5rem;
-    margin: 0.75rem 0;
+    font-size: 1.2rem;
+    margin: 0.5rem 0;
   }
 
   .outcome {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     min-height: 2rem;
+    padding: 0 0.25rem;
   }
 
   .description {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
+    padding-top: 1rem;
   }
 }

website/src/components/VisualElements/PlanningStrategyComparison.module.css

@@ -1,5 +1,5 @@
 .container {
-  margin: 2rem auto;
+  margin: 3rem auto;
   padding: 1.5rem;
   border-radius: 8px;
   background: var(--visual-bg-decision);
@@ -8,12 +8,6 @@
   animation: fadeIn 0.6s ease-in-out;
 }
 
-.container.compact {
-  margin: 6rem auto;
-  padding: 1rem;
-  max-width: 700px;
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -36,39 +30,23 @@
 /* Titles */
 .title {
   fill: var(--ifm-font-color-base);
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 700;
   font-family: var(--ifm-font-family-base);
-  letter-spacing: 1px;
+  letter-spacing: 1.5px;
   text-transform: uppercase;
 }
 
 /* Labels (Start/Goal) */
 .label {
   fill: var(--ifm-color-emphasis-700);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   font-family: var(--ifm-font-family-base);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
-/* Context labels */
-.contextLabel {
-  fill: var(--ifm-font-color-base);
-  font-size: 14px;
-  font-weight: 600;
-  font-family: var(--ifm-font-family-base);
-}
-
-/* Trade-off labels */
-.tradeoffLabel {
-  fill: var(--ifm-color-emphasis-600);
-  font-size: 11px;
-  font-family: var(--ifm-font-family-base);
-  font-style: italic;
-}
-
 /* ===== EXPLORATION SIDE (LEFT) ===== */
 
 .explorationGroup {
@@ -86,29 +64,25 @@
   }
 }
 
-.explorationNode {
-  fill: var(--ifm-background-surface-color);
+.explorationStart {
+  fill: var(--visual-workflow);
   stroke: var(--visual-workflow);
-  stroke-width: 2;
+  stroke-width: 2.5;
 }
 
-.explorationNodeEnd {
-  fill: var(--visual-workflow);
+.explorationNode {
+  fill: var(--ifm-background-surface-color);
   stroke: var(--visual-workflow);
   stroke-width: 2;
+  opacity: 0.85;
 }
 
-.explorationPath {
+.explorationPathLight {
   stroke: var(--visual-workflow);
-  stroke-width: 2;
+  stroke-width: 1.5;
   fill: none;
   stroke-linecap: round;
-  opacity: 0.8;
-}
-
-.arrowMarkerExploration polygon {
-  fill: var(--visual-workflow);
-  opacity: 0.8;
+  opacity: 0.4;
 }
 
 /* ===== EXACT SIDE (RIGHT) ===== */
@@ -128,30 +102,25 @@
   }
 }
 
-.exactNode {
-  fill: var(--ifm-background-surface-color);
+.exactStart {
+  fill: var(--visual-capability);
   stroke: var(--visual-capability);
   stroke-width: 2.5;
 }
 
-.exactNodeEnd {
+.exactGoal {
   fill: var(--visual-capability);
   stroke: var(--visual-capability);
   stroke-width: 2.5;
 }
 
 .exactPath {
   stroke: var(--visual-capability);
-  stroke-width: 3;
+  stroke-width: 4;
   fill: none;
   stroke-linecap: round;
 }
 
-.exactPathMarker {
-  fill: var(--visual-capability);
-  opacity: 0.4;
-}
-
 .arrowMarkerExact polygon {
   fill: var(--visual-capability);
 }
@@ -165,55 +134,49 @@
   opacity: 0.5;
 }
 
-.dividerText {
-  fill: var(--ifm-color-emphasis-600);
-  font-size: 11px;
-  font-weight: 500;
-  font-family: var(--ifm-font-family-base);
-  font-style: italic;
-  letter-spacing: 0.3px;
-}
-
 /* Description text */
 .description {
   margin: 1.5rem 0 0 0;
   font-size: 0.95rem;
-  line-height: 1.6;
+  line-height: 1.8;
   color: var(--ifm-color-emphasis-700);
   text-align: center;
   padding: 0 1rem;
   border-top: 1px solid var(--ifm-color-emphasis-300);
   padding-top: 1rem;
 }
 
+.description strong {
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+}
+
+.description em {
+  display: block;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .container {
     padding: 1rem;
+    margin: 2rem auto;
   }
 
   .title {
     font-size: 18px;
+    letter-spacing: 1px;
   }
 
   .label {
-    font-size: 13px;
-  }
-
-  .contextLabel {
-    font-size: 13px;
-  }
-
-  .tradeoffLabel {
-    font-size: 10px;
-  }
-
-  .dividerText {
-    font-size: 10px;
+    font-size: 12px;
   }
 
   .description {
     font-size: 0.85rem;
+    line-height: 1.6;
     padding: 0 0.5rem;
     padding-top: 0.75rem;
   }
@@ -226,25 +189,26 @@
   }
 
   .label {
-    font-size: 12px;
+    font-size: 11px;
   }
 
-  .contextLabel {
-    font-size: 12px;
-  }
-
-  .tradeoffLabel {
-    font-size: 9px;
+  .explorationPathLight {
+    stroke-width: 1;
   }
 
-  .explorationPath,
   .exactPath {
-    stroke-width: 1.5;
+    stroke-width: 3;
   }
 
   .explorationNode,
-  .exactNode {
-    stroke-width: 1.5;
+  .explorationStart,
+  .exactStart,
+  .exactGoal {
+    stroke-width: 2;
+  }
+
+  .description {
+    font-size: 0.8rem;
   }
 }