Fix info card styling: match CSS selectors to template class names

The template used .info-label/.info-value but CSS targeted .label/.value,
causing no styling to apply. Fixed selectors and added color classes
(red, green, accent, blue) for visual distinction between the four cards.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: brunoborges

site/styles.css

@@ -960,26 +960,31 @@ nav {
 }
 
 .info-card {
-  padding: 16px;
+  padding: 20px 16px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   text-align: center;
 }
 
-.info-card .label {
+.info-label {
   font-size: 0.72rem;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
-.info-card .value {
-  font-size: 1.1rem;
+.info-value {
+  font-size: 1.15rem;
   font-weight: 700;
 }
 
+.info-value.red { color: #ef4444; }
+.info-value.green { color: #22c55e; }
+.info-value.accent { color: var(--accent); }
+.info-value.blue { color: #3b82f6; }
+
 /* ---------- JDK Support Section ---------- */
 .bs-section {
   margin: 48px 0;