fix: fix styling issues from QA feedback

Author: julhoang

static/css/v3/card.css

@@ -77,7 +77,7 @@
   font-style: normal;
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-display-regular);
+  letter-spacing: var(--letter-spacing-tight);
   margin: 0;
 }
 

static/css/v3/help-card.css

@@ -18,15 +18,9 @@
 }
 
 .help-card-section__heading {
-  font-family: var(--font-display);
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  margin: 0;
   width: 100%;
   align-self: flex-start;
   padding: var(--space-large);
-  line-height: var(--line-height-tight);
 }
 
 .help-card-section__grid {
@@ -53,7 +47,7 @@
 .help-card__bubble {
   display: flex;
   height: fit-content;
-  background: var(--color-surface-mid);
+  background: var(--color-surface-strong);
   border-radius: var(--space-large);
   padding: var(--space-large);
 }
@@ -67,7 +61,7 @@
 }
 
 .help-card__tail {
-  fill: var(--color-surface-mid);
+  fill: var(--color-surface-strong);
 }
 
 .help-card__quote {
@@ -80,12 +74,11 @@
 }
 
 .help-card__description {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-base);
   line-height: var(--line-height-default);
   color: var(--color-text-secondary);
   margin: var(--space-xl) 0 var(--space-large) 0;
   padding: 0;
-  flex: 1;
 }
 
 .help-card__cta {

static/css/v3/library-discovery-card.css

@@ -23,6 +23,8 @@
 .library-discovery-card__description {
   margin: 0;
   font-size: var(--font-size-small);
+  letter-spacing: var(--letter-spacing-tight);
+  line-height: var(--line-height-relaxed);
   color: var(--color-text-secondary);
   padding: 0;
   margin-bottom: var(--space-large);

templates/v3/includes/_help_card.html

@@ -18,7 +18,7 @@
 {% endcomment %}
 <section class="help-card-section {% if extra_classes %}{{ extra_classes }}{% endif %}"
          aria-label="{{ aria_label|default:heading }}">
-  <h2 class="help-card-section__heading">{{ heading }}</h2>
+  <h2 class="card__title help-card-section__heading">{{ heading }}</h2>
   <hr class="card__hr" aria-hidden="true" />
   <div class="help-card-section__grid">
     {% for option in items %}