reCAPTCHA: Eligibility Start (#2573)

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

@@ -1,12 +1,8 @@
-<li class="media d-flex align-items-stretch w-auto">
-    <div class="media-body">
-        {% block heading_wrapper %}
-            <{{ heading_tag|default:"h3" }} class="media-body--heading h3">
-            {% block heading %}
-            {% endblock heading %}
-            </{{ heading_tag|default:"h3" }}>
-        {% endblock heading_wrapper %}
-        {% block body %}
-        {% endblock body %}
-    </div>
+<li>
+    <h2 class="h3 pb-1">
+        {% block heading %}
+        {% endblock heading %}
+    </h2>
+    {% block body %}
+    {% endblock body %}
 </li>

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

@@ -6,13 +6,11 @@
 {% endblock heading %}
 
 {% block body %}
-    <div class="media-body--details">
-        <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>
-    </div>
+    <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/media-item--identification--start--cst-agency-card.html

@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <p>{% translate "You do not need to have your physical CST Agency Card, but you will need to know the number." %}</p>
-  </div>
+  <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/media-item--identification--start--login-gov.html

@@ -7,21 +7,17 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <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>
-    <div class="media-body--items">
-      <p>{% translate "For this process you will need:" %}</p>
-      <ul>
-        <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>
-    </div>
-  </div>
+  <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/media-item--identification--start--medicare.html

@@ -7,9 +7,7 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <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>
-  </div>
+  <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/media-item--identification--start--mst-agency-card.html

@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
-    <p>{% translate "You do not need to have your physical MST Courtesy Card, but you will need to know the number." %}</p>
-  </div>
+  <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/media-item--identification--start--sbmtd-agency-card.html

@@ -7,7 +7,5 @@
 {% endblock heading %}
 
 {% block body %}
-    <div class="media-body--details">
-        <p>{% translate "You do not need to have your physical card, but you will need to know the number." %}</p>
-    </div>
+    <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/start--calfresh.html

@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a CalFresh Cardholder transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       {% translate "Get started with" as button_text %}
       <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
         {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>

benefits/eligibility/templates/eligibility/start--cst-agency-card.html

@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected an Agency Card transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       <a href="{% url routes.ELIGIBILITY_CONFIRM %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue" %}</a>
     </div>
   </div>

benefits/eligibility/templates/eligibility/start--medicare.html

@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-    <div class="col-lg-8">
+    <div class="col-lg-6">
         <h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
     </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a Medicare Cardholder transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-    <div class="row d-flex justify-content-lg-end">
-        <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+    <div class="row justify-content-center">
+        <div class="col-12 col-lg-6">
             <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary" role="button">{% translate "Continue to Medicare.gov" %}</a>
         </div>
     </div>

benefits/eligibility/templates/eligibility/start--senior.html

@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected an Older Adult transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       {% translate "Get started with" as button_text %}
       <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
         {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>

benefits/eligibility/templates/eligibility/start--veteran.html

@@ -6,7 +6,7 @@
 {% endblock page-title %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "You selected a Veteran transit benefit." %}</h1>
   </div>
 {% endblock headline %}
@@ -16,8 +16,8 @@ <h1>{% translate "You selected a Veteran transit benefit." %}</h1>
 {% endblock media-item %}
 
 {% block call-to-action %}
-  <div class="row d-flex justify-content-lg-end">
-    <div class="col-lg-4 offset-2 offset-lg-0 col-sm-8 col-8 d-flex justify-content-lg-end justify-content-center">
+  <div class="row justify-content-center">
+    <div class="col-12 col-lg-6">
       {% translate "Get started with" as button_text %}
       <a href="{% url routes.OAUTH_LOGIN %}" class="btn btn-lg btn-primary login">
         {{ button_text }} <span class="fallback-text white-logo">Login.gov</span>

benefits/eligibility/templates/eligibility/start.html

@@ -11,9 +11,9 @@
 {% endblock nav-buttons %}
 
 {% block inner-content %}
-  <div class="col-12 col-sm-12 col-lg-8">
-    <h2 class="media-title h2-sm-p">{% translate "You will need a few items to continue:" %}</h2>
-    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+  <div class="col-lg-6">
+    <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
+    <ul class="d-flex flex-column gap-4 list-unstyled ps-0 pb-5 mb-3">
       {% block media-item %}
       {% endblock media-item %}
       {% include "eligibility/includes/media-item--contactless-card--start.html" %}

benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html

@@ -1,10 +1,6 @@
 {% extends "core/includes/media-item.html" %}
 {% load i18n %}
 
-{% block heading_wrapper %}
-    {% with heading_tag="h2" %}{{ block.super }}{% endwith %}
-{% endblock heading_wrapper %}
-
 {% block heading %}
     {% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
 {% endblock heading %}

benefits/enrollment/templates/enrollment/index--calfresh.html

@@ -3,7 +3,7 @@
 
 {% block media-items %}
   <div class="col-12 col-sm-12 col-lg-8">
-    <ul class="media-list mb-5 mx-0 px-0 d-flex justify-content-center flex-column">
+    <ul class="mb-5 mx-0 px-0 d-flex list-unstyled justify-content-center flex-column">
       {% include "enrollment/includes/media-item--contactless-card--index--calfresh.html" %}
     </ul>
   </div>

benefits/enrollment/templates/enrollment/index.html

@@ -22,7 +22,7 @@ <h1 class="pb-lg-8 pb-4">
 {% block inner-content %}
   {% block media-items %}
     <div class="col-12 col-sm-12 col-lg-8">
-      <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+      <ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
         {% include "enrollment/includes/media-item--contactless-card--index.html" %}
       </ul>
     </div>

benefits/static/css/styles.css

@@ -77,6 +77,10 @@ li {
   letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 /* Links */
 /* Same sizes for all screen widths: 18px */
 a:not(.btn):not(.card) {
@@ -178,7 +182,7 @@ h2,
   }
 
   /* H2: 18px, up to Small width */
-  /* Only used on Landing Page, Eligibility Start */
+  /* Only used on Landing Page */
   .h2-sm-p {
     font-size: var(--bs-body-font-size);
     font-weight: var(--bs-body-font-weight);
@@ -383,24 +387,24 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --login-gov-button-font-size: var(--font-size-20px);
-  --login-gov-button-max-width: 310px;
+  --login-gov-button-padding: 0.5rem;
+  --login-gov-button-line-height: 1;
 }
 
 @media (min-width: 992px) {
   :root {
     --login-gov-button-font-size: var(--font-size-16px);
-    --login-gov-button-max-width: 289px;
+    --login-gov-button-padding: 1rem;
+    --login-gov-button-line-height: 1.5;
   }
 }
 
 .login {
   cursor: pointer;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: 0;
   font-size: var(--login-gov-button-font-size) !important;
   font-family: "Public Sans", Roboto, system-ui;
-  max-width: var(--login-gov-button-max-width);
+  line-height: var(--login-gov-button-line-height);
+  text-transform: none;
   text-decoration: none;
 }
 
@@ -420,6 +424,11 @@ footer .footer-links li a.footer-link:visited {
   line-height: 1;
 }
 
+.eligibility-start .btn.btn-lg.btn-primary.login {
+  border-width: calc(4rem / 16);
+  padding: var(--login-gov-button-padding);
+}
+
 @media (min-width: 992px) {
   .login .fallback-text {
     margin: 0 0 0 5px;
@@ -428,19 +437,18 @@ footer .footer-links li a.footer-link:visited {
   }
 }
 
-/* Sign in with Login.gov (white logo) on Eligibility Start, System Enrollment Error */
-
-.eligibility-start .btn.btn-lg.btn-primary.login,
-.system-enrollment-error .btn.btn-lg.btn-primary.login {
-  padding: 10px 0;
-}
-
 .login .fallback-text.white-logo {
   background-image: url("/static/img/login-gov-logo-rev.svg");
   width: 130.9887px;
   height: 17px;
 }
 
+/* Sign in with Login.gov (white logo) on System Enrollment Error */
+
+.system-enrollment-error .btn.btn-lg.btn-primary.login {
+  padding: 10px 0;
+}
+
 /* Login.gov modal button (color logo) on Eligibility Index */
 
 .login .fallback-text.color-logo {
@@ -588,50 +596,22 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --media-item-icon-size: calc(64rem / 16);
-  --media-item-gap: calc(24rem / 16);
   --media-item-icon-margin: calc(24rem / 16);
-  --media-title-margin-top: calc(24rem / 16);
 }
 
 @media (min-width: 992px) {
   :root {
     --media-item-icon-size: calc(90rem / 16);
-    --media-item-gap: calc(24rem / 16);
     --media-item-icon-margin: calc(32rem / 16);
-    --media-title-margin-top: calc(64rem / 16);
   }
 }
 
-.media-body--details p:not(:first-of-type) {
-  /* All the p within .media-body--details, except for the first p - Any media item with more than one p */
-  padding-top: calc(24rem / 16);
-}
-
-.media-title {
-  margin-top: var(--media-title-margin-top);
-  margin-bottom: calc(24rem / 16);
-}
-
-.media-list {
-  gap: var(--media-item-gap);
-  margin-bottom: calc(64rem / 16);
-}
-
 .media-list-icon-left-margin {
   margin-left: calc(
     var(--media-item-icon-size) + var(--media-item-icon-margin)
   );
 }
 
-.media-list .media .media-body--details,
-.media-list .media .media-body--items li:first-child {
-  padding-top: calc(5rem / 16);
-}
-
-.media-list .media .media-body--items li {
-  list-style-type: disc;
-}
-
 /* Cards */
 
 :root {