diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
index 7003fec5a..282014196 100644
--- a/benefits/core/templates/core/base.html
+++ b/benefits/core/templates/core/base.html
@@ -79,10 +79,12 @@
{% block headline %}
{% endblock headline %}
+ {% block explanatory-text-wrapper %}
{% block explanatory-text %}
{% endblock explanatory-text %}
+ {% endblock explanatory-text-wrapper %}
{% block inner-content %}
diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index 56a40ebce..ed4ec3b08 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -20,7 +20,7 @@
{{ field }}
- {% if field.help_text %}{{ field.help_text }}{% endif %}
+ {% if field.help_text %}{{ field.help_text }}{% endif %}
{% endfor %}
diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
index fca3403aa..a7ff58dbe 100644
--- a/benefits/eligibility/forms.py
+++ b/benefits/eligibility/forms.py
@@ -45,7 +45,7 @@ class EligibilityVerificationForm(forms.Form):
id = "form-eligibility-verification"
method = "POST"
- submit_value = _("Check eligibility")
+ submit_value = _("Find my record")
submitting_value = _("Checking")
_error_messages = {
@@ -141,12 +141,16 @@ class MSTCourtesyCard(EligibilityVerificationForm):
def __init__(self, *args, **kwargs):
super().__init__(
title=_("Agency card information"),
- headline=_("Let’s see if we can confirm your eligibility."),
- blurb=_("Please input your Courtesy Card number and last name below to confirm your eligibility."),
- name_label=_("Last name (as it appears on Courtesy Card)"),
+ headline=_("Let’s find the record of your transit benefit."),
+ blurb=_(
+ "We use the information on your MST Courtesy Card to find the record of your transit benefit in our system."
+ ),
+ name_label=_("Last Name"),
name_placeholder="Garcia",
- name_help_text=_("We use this to help confirm your Courtesy Card."),
- sub_label=_("MST Courtesy Card number"),
+ name_help_text=_(
+ "Please enter your last name the same way it is printed on your card, including capital letters and hyphens."
+ ),
+ sub_label=_("Courtesy Card number"),
sub_help_text=_("This is a 5-digit number on the front and back of your card."),
sub_placeholder="12345",
name_max_length=255,
@@ -164,12 +168,17 @@ class SBMTDMobilityPass(EligibilityVerificationForm):
def __init__(self, *args, **kwargs):
super().__init__(
title=_("Agency card information"),
- headline=_("Let’s see if we can confirm your eligibility."),
- blurb=_("Please input your Reduced Fare Mobility ID number and last name below to confirm your eligibility."),
- name_label=_("Last name (as it appears on Reduced Fare Mobility ID card)"),
+ headline=_("Let’s find the record of your transit benefit."),
+ blurb=_(
+ "We use the information on your SBMTD Reduced Fare Mobility ID card to find the record of your transit "
+ + "benefit in our system."
+ ),
+ name_label=_("Last Name"),
name_placeholder="Garcia",
- name_help_text=_("We use this to help confirm your Reduced Fare Mobility ID."),
- sub_label=_("SBMTD Reduced Fare Mobility ID number"),
+ name_help_text=_(
+ "Please enter your last name the same way it is printed on your card, including capital letters and hyphens."
+ ),
+ sub_label=_("Reduced Fare Mobility ID card number"),
sub_help_text=_("This is a 4-digit number on the back of your card."),
sub_placeholder="1234",
name_max_length=255,
diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html
index a36db3113..31f617422 100644
--- a/benefits/eligibility/templates/eligibility/confirm.html
+++ b/benefits/eligibility/templates/eligibility/confirm.html
@@ -10,14 +10,20 @@
{% endblock nav-buttons %}
{% block headline %}
-
+
{{ form.headline }}
{% endblock headline %}
-{% block explanatory-text %}
-
{{ form.blurb }}
-{% endblock explanatory-text %}
+{% block explanatory-text-wrapper %}
+
+
+ {% block explanatory-text %}
+
{{ form.blurb }}
+ {% endblock explanatory-text %}
+
+
+{% endblock explanatory-text-wrapper %}
{% block inner-content %}
diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
index adc82fd81..8217e2c74 100644
--- a/benefits/locale/en/LC_MESSAGES/django.po
+++ b/benefits/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2024-04-18 14:27-0700\n"
+"POT-Creation-Date: 2024-04-19 13:13-0700\n"
"Language: English\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
@@ -303,7 +303,7 @@ msgstr ""
msgid "Choose this benefit"
msgstr ""
-msgid "Check eligibility"
+msgid "Find my record"
msgstr ""
msgid "Checking"
@@ -318,38 +318,34 @@ msgstr ""
msgid "Agency card information"
msgstr ""
-msgid "Let’s see if we can confirm your eligibility."
+msgid "Let’s find the record of your transit benefit."
msgstr ""
msgid ""
-"Please input your Courtesy Card number and last name below to confirm your "
-"eligibility."
+"We use the information on your MST Courtesy Card to find the record of your "
+"transit benefit in our system."
msgstr ""
-msgid "Last name (as it appears on Courtesy Card)"
+msgid "Last Name"
msgstr ""
-msgid "We use this to help confirm your Courtesy Card."
+msgid ""
+"Please enter your last name the same way it is printed on your card, "
+"including capital letters and hyphens."
msgstr ""
-msgid "MST Courtesy Card number"
+msgid "Courtesy Card number"
msgstr ""
msgid "This is a 5-digit number on the front and back of your card."
msgstr ""
msgid ""
-"Please input your Reduced Fare Mobility ID number and last name below to "
-"confirm your eligibility."
-msgstr ""
-
-msgid "Last name (as it appears on Reduced Fare Mobility ID card)"
-msgstr ""
-
-msgid "We use this to help confirm your Reduced Fare Mobility ID."
+"We use the information on your SBMTD Reduced Fare Mobility ID card to find "
+"the record of your transit benefit in our system."
msgstr ""
-msgid "SBMTD Reduced Fare Mobility ID number"
+msgid "Reduced Fare Mobility ID card number"
msgstr ""
msgid "This is a 4-digit number on the back of your card."
diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
index b4e9985ca..376f7c20e 100644
--- a/benefits/locale/es/LC_MESSAGES/django.po
+++ b/benefits/locale/es/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
msgid ""
msgstr ""
"Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2024-04-18 14:27-0700\n"
+"POT-Creation-Date: 2024-04-19 13:13-0700\n"
"Language: Español\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
@@ -390,7 +390,7 @@ msgstr "¿A qué beneficio de tránsito le gustaría inscribirse?"
msgid "Choose this benefit"
msgstr "Elegir este beneficio"
-msgid "Check eligibility"
+msgid "Find my record"
msgstr "Comprobar elegibilidad"
msgid "Checking"
@@ -405,42 +405,34 @@ msgstr "Este campo es requerido."
msgid "Agency card information"
msgstr "Información de la tarjeta de agencia"
-msgid "Let’s see if we can confirm your eligibility."
+msgid "Let’s find the record of your transit benefit."
msgstr "Veamos si podemos confirmar su elegibilidad."
msgid ""
-"Please input your Courtesy Card number and last name below to confirm your "
-"eligibility."
+"We use the information on your MST Courtesy Card to find the record of your "
+"transit benefit in our system."
msgstr ""
-"Ingrese el número de su tarjeta de cortesía y apellido a continuación para "
-"confirmar su elegibilidad."
-msgid "Last name (as it appears on Courtesy Card)"
-msgstr "Apellido (tal como aparece en la tarjeta de cortesía)"
+msgid "Last Name"
+msgstr "Apellido"
-msgid "We use this to help confirm your Courtesy Card."
-msgstr "Usamos esto para ayudar a confirmar su tarjeta de cortesía."
+msgid ""
+"Please enter your last name the same way it is printed on your card, "
+"including capital letters and hyphens."
+msgstr ""
-msgid "MST Courtesy Card number"
+msgid "Courtesy Card number"
msgstr "Número de tarjeta de cortesía de MST"
msgid "This is a 5-digit number on the front and back of your card."
msgstr "Este es un número de 5 dígitos en el anverso y reverso de su tarjeta."
msgid ""
-"Please input your Reduced Fare Mobility ID number and last name below to "
-"confirm your eligibility."
+"We use the information on your SBMTD Reduced Fare Mobility ID card to find "
+"the record of your transit benefit in our system."
msgstr ""
-"Ingrese el número de cuatro dígitos de su Reduced Fare Mobility ID y su "
-"apellido a continuación para confirmar su elegibilidad."
-
-msgid "Last name (as it appears on Reduced Fare Mobility ID card)"
-msgstr "Apellido (tal como aparece en la tarjeta de Reduced Fare Mobility ID)"
-
-msgid "We use this to help confirm your Reduced Fare Mobility ID."
-msgstr "Usamos esto para ayudar a confirmar su Reduced Fare Mobility ID."
-msgid "SBMTD Reduced Fare Mobility ID number"
+msgid "Reduced Fare Mobility ID card number"
msgstr "Número de SBMTD Reduced Fare Mobility ID"
msgid "This is a 4-digit number on the back of your card."
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index aefc64478..6927754d9 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -16,6 +16,7 @@
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
--heading-line-height: 1.3; /* Displayed as 130% on Figma */
+ --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */
--h4-line-height: 1.2; /* Displayed as 120% on Figma */
--letter-spacing-2: 0.02; /* Displayed as 2% on Figma */
--letter-spacing-3: 0.03; /* Displayed as 3% on Figma */
@@ -552,23 +553,19 @@ footer .footer-links li a.footer-link:visited {
/* Form Container: Must use .form-container parent to use these styles */
:root {
- --form-input-gap: calc(22rem / 16);
-}
-
-@media (min-width: 992px) {
- :root {
- --form-input-gap: calc(42rem / 16);
- }
+ --form-input-gap: calc(24rem / 16);
}
.form-container .form-group:not(:first-child) {
padding-top: var(--form-input-gap);
}
-.form-container .form-control-label {
- font-size: var(--bs-body-font-size);
+.form-container .form-control-label,
+.form-container .required-label {
+ font-size: var(--font-size-16px);
font-weight: var(--medium-font-weight);
- letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
+ line-height: var(--form-field-text-line-height);
+ letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5));
padding-bottom: calc(12rem / 16);
}
@@ -591,6 +588,8 @@ footer .footer-links li a.footer-link:visited {
.form-text {
font-size: var(--font-size-14px);
+ line-height: var(--form-field-text-line-height);
+ letter-spacing: var(--letter-spacing-5);
}
/* Forms: Radio Buttons */