Template:Stakeholder count widget/styles.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* Center the whole widget and lay out cards in a row */
+/* Layout container */
 .stakeholder-count-widget {
      display: flex;
-     justify-content: center;      /* centers the row */
+     justify-content: center;
      align-items: flex-start;
-     gap: 1.5em;                   /* spacing between cards */
+     flex-wrap: wrap;            /* enables wrapping */
-     flex-wrap: wrap;
+     gap: 1.2em;
      margin: 1.5em 0;
+    width: 100%;
 }
-/* Individual cards: equal size, centered content, outline style */
+/* Cards automatically size evenly */
 .stakeholder-card {
-     width: 200px;
+     flex: 1 1 140px;            /* grow, shrink, starting width */
-     height: auto;
+    max-width: 240px;           /* prevents giant stretching on huge screens */
-     padding: 12px 10px;
+     min-width: 120px;           /* below this, wrap instead of squishing */
+     padding: 14px 12px;
      border: 1px solid #000001;
      border-radius: 2px;
@@ Line 21: / Line 23: @@
      display: flex;
      flex-direction: column;
-     justify-content: center;      /* vertically center content */
+     justify-content: center;
-     align-items: center;          /* horizontally center */
+     align-items: center;
      text-align: center;
      font-size: 0.95em;
      font-weight: 500;
-    letter-spacing: 0.01em;
+     gap: 8px;
-     gap: 8px;                     /* spacing between title, count, and link */
      transition:
@@ Line 37: / Line 37: @@
 }
-/* Count styling */
+/* Count */
 .stakeholder-card .count {
      font-size: 1.7em;
@@ Line 43: / Line 43: @@
 }
-/* Link styling ("See startups →")
+/* Links */
 .stakeholder-card a {
      font-size: 0.9em;
      font-weight: 500;
-    color: #b30000;
+/*    color: #b30000; */
      text-decoration: none;
 }
@@ Line 54: / Line 54: @@
      text-decoration: underline;
 }
- */