Refactor: reCAPTCHA copy + redesign

benefits/core/templates/core/base.html

@@ -87,8 +87,8 @@
             {% endblock inner-content %}
           </div>
           {% block call-to-action %}
-            <div class="row d-flex justify-content-lg-end pt-8">
-              <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+            <div class="row d-flex justify-content-center pt-8">
+              <div class="col-12 col-lg-6">
                 {% block call-to-action-button %}
                 {% endblock call-to-action-button %}
               </div>

benefits/core/templates/core/help.html

@@ -9,13 +9,8 @@
 {% block main-content %}
   <div class="container">
     <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
+      <div class="col-lg-8">
         <h1 class="text-center">{% translate "Help" %}</h1>
-      </div>
-    </div>
-
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
         <h2 class="h2-sm pt-4 pt-lg-8" id="what-is-cal-itp">{% translate "What is Cal-ITP Benefits?" %}</h2>
         <p class="pt-2 pt-lg-4">
           {% blocktranslate trimmed %}
@@ -137,11 +132,7 @@ <h2 class="h2-sm pt-4 pt-lg-8" id="questions">{% translate "Questions?" %}</h2>
             provider.
           {% endblocktranslate %}
         </p>
-      </div>
-    </div>
 
-    <div class="row justify-content-center">
-      <div class="col-md-8 col-10">
         {% if agency %}
           {% include "core/includes/agency-links.html" %}
         {% else %}
@@ -152,8 +143,8 @@ <h2 class="h2-sm pt-4 pt-lg-8" id="questions">{% translate "Questions?" %}</h2>
       </div>
     </div>
 
-    <div class="row pt-4 pt-lg-8">
-      <div class="col-lg-2 offset-lg-10 col-8 offset-2">
+    <div class="row justify-content-center pt-4 pt-lg-8">
+      <div class="col-12 col-lg-6">
         {% translate "Go Back" as button_text %}
         {% include "core/includes/button--origin.html" with button_text=button_text %}
       </div>

benefits/core/templates/core/includes/eligibility-item.html

@@ -0,0 +1,8 @@
+<li>
+    <h2 class="h3 pb-1">
+        {% block heading %}
+        {% endblock heading %}
+    </h2>
+    {% block body %}
+    {% endblock body %}
+</li>

benefits/core/templates/core/includes/form.html

@@ -28,8 +28,8 @@
     </div>
 
     {% if form.submit_value %}
-      <div class="row d-flex justify-content-lg-end pt-8">
-        <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+      <div class="row d-flex justify-content-center pt-8">
+        <div class="col-lg-6">
           <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
                   data-action="submit"
                   type="submit"

benefits/core/templates/core/logged-out.html

@@ -7,12 +7,10 @@
 
 {% block main-content %}
   <div class="container">
-    <div class="row justify-content-lg-center">
+    <div class="row justify-content-center">
       <div class="col-md-6">
-        <h1 class="h2 text-center">
-          <span class="d-block pb-lg-8 pb-5">{% include "core/includes/icon.html" with name="happybus" %}</span>
-          {% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}
-        </h1>
+        <div class="py-4 mt-5 text-center">{% include "core/includes/icon.html" with name="happybus" %}</div>
+        <h1 class="h2 pt-0">{% translate "You have successfully logged out. Thank you for using Cal-ITP Benefits!" %}</h1>
       </div>
     </div>
   </div>

benefits/core/templates/core/widgets/flow-radio-select.html

@@ -2,9 +2,9 @@
 
 {% with id=widget.attrs.id %}
 
-  <label for="{{ id }}" class="pb-4 h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
+  <label for="{{ id }}" class="h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
 
-  <div {% if id %}id="{{ id }}"{% endif %} class="ps-3 ps-md-0 ps-lg-0 offset-md-1 offset-lg-1 radio-container">
+  <div {% if id %}id="{{ id }}"{% endif %}>
     {% for group, options, index in widget.optgroups %}
       {% if group %}
         <div>
@@ -13,7 +13,7 @@
           {% endif %}
 
           {% for option in options %}
-            <div class="radio-input-group d-flex">{% include option.template_name with widget=option %}</div>
+            <div class="gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
           {% endfor %}
 
           {% if group %}

benefits/eligibility/forms.py

@@ -28,7 +28,7 @@ def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         flows = agency.enrollment_flows.filter(supported_enrollment_methods__contains=models.EnrollmentMethods.DIGITAL)
 
-        self.classes = "col-lg-8"
+        self.classes = "col-lg-6"
         # second element is not used since we render the whole label using selection_label_template,
         # therefore set to None
         flow_field = self.fields["flow"]

benefits/eligibility/templates/eligibility/includes/eligibility-item--contactless-card--start.html

@@ -0,0 +1,16 @@
+{% extends "core/includes/eligibility-item.html" %}
+{% load i18n %}
+
+{% block heading %}
+    {% translate "Your contactless card details" %}
+{% endblock heading %}
+
+{% block body %}
+    <p>
+        {% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
+        {% translate "Learn more about contactless cards" as text %}
+        {% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
+    </p>
+
+    {% include "eligibility/includes/modal--contactless.html" with id="modal--contactless" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--cst-agency-card.html

@@ -0,0 +1,11 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "Your current Agency Card number" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--login-gov.html

@@ -0,0 +1,23 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "A Login.gov account with identity verification" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>
+    {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
+    {% translate "Learn more about identity verification" as text %}
+    {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
+  </p>
+  <p>{% translate "For this process you will need:" %}</p>
+  <ul class="list-disc ms-lg-5 ms-0">
+    <li>{% translate "Your state-issued ID card" %}</li>
+    <li>{% translate "Your Social Security number" %}</li>
+    <li>{% translate "A phone number with a phone plan associated with your name" %}</li>
+  </ul>
+
+  {% include "eligibility/includes/modal--login-gov-start-help.html" with size="modal-lg" id="modal--identity-verification" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--medicare.html

@@ -0,0 +1,13 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "An online account with Medicare.gov" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>
+    {% translate "If you do not have an account you will be able to create one using your red, white, and blue Medicare card. We use your Medicare.gov account to verify you qualify." %}
+  </p>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--mst-agency-card.html

@@ -0,0 +1,11 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+  {% translate "Your current Courtesy Card number" %}
+{% endblock heading %}
+
+{% block body %}
+  <p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
+{% endblock body %}

benefits/eligibility/templates/eligibility/includes/eligibility-item--identification--start--sbmtd-agency-card.html

@@ -0,0 +1,11 @@
+{% extends "core/includes/eligibility-item.html" %}
+
+{% load i18n %}
+
+{% block heading %}
+    {% translate "Your current Reduced Fare Mobility ID number" %}
+{% endblock heading %}
+
+{% block body %}
+    <p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
+{% endblock body %}

benefits/eligibility/templates/eligibility/index--cst.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All CST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}

benefits/eligibility/templates/eligibility/index--mst.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All MST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}

benefits/eligibility/templates/eligibility/index--nevco.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All Nevada County Connects transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}

benefits/eligibility/templates/eligibility/index--sacrt.html

@@ -6,7 +6,7 @@
   <p class="pt-4">
     {% translate "Cal-ITP doesn’t save any of your information. All SacRT transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "With the new Tap2Ride fare system launching in 2025, SacRT riders that are eligible for discount fares can enroll below. The discount benefit will be available on all SacRT buses beginning in early 2025 and will include light rail tap devices later in the year." %}
   </p>
 {% endblock explanatory-text %}

benefits/eligibility/templates/eligibility/index--sbmtd.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-    <p class="pt-4 pb-4 pb-lg-8">
+    <p class="pt-4 pb-4">
         {% translate "Cal-ITP doesn’t save any of your information. All SBMTD transit benefits reduce fares by 50% for bus service on fixed routes." %}
     </p>
 {% endblock explanatory-text %}