-
-
-
+
+
{% endif %}
@@ -94,6 +92,8 @@
{% endcomment %}
+
{% include "core/includes/recaptcha-text.html" %}
+
{% endif %}
-
{% endif %}
diff --git a/benefits/core/templates/core/includes/recaptcha-text.html b/benefits/core/templates/core/includes/recaptcha-text.html
new file mode 100644
index 000000000..dbdf54c22
--- /dev/null
+++ b/benefits/core/templates/core/includes/recaptcha-text.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+
+ {% blocktranslate trimmed %}
+ This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
+ {% endblocktranslate %}
+
diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
index 00baf1eff..0ef9dc6b1 100644
--- a/benefits/eligibility/forms.py
+++ b/benefits/eligibility/forms.py
@@ -28,7 +28,6 @@ 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-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"]
@@ -110,7 +109,6 @@ def __init__(
self.headline = headline
self.blurb = blurb
- self.classes = "col-lg-6"
sub_widget = widgets.FormControlTextInput(placeholder=sub_placeholder)
if sub_pattern:
sub_widget.attrs.update({"pattern": sub_pattern})
diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html
index 42b2743e7..770d9a6da 100644
--- a/benefits/eligibility/templates/eligibility/confirm.html
+++ b/benefits/eligibility/templates/eligibility/confirm.html
@@ -26,7 +26,11 @@
{{ form.headline }}
{% endblock explanatory-text-wrapper %}
{% block inner-content %}
-
-
{% include "core/includes/form.html" with form=form %}
+
+
{% include "core/includes/form.html" with form=form %}
{% endblock inner-content %}
+
+{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %}
+{% block call-to-action %}
+{% endblock call-to-action %}
diff --git a/benefits/eligibility/templates/eligibility/index.html b/benefits/eligibility/templates/eligibility/index.html
index 428e2e8c8..69135ddc5 100644
--- a/benefits/eligibility/templates/eligibility/index.html
+++ b/benefits/eligibility/templates/eligibility/index.html
@@ -30,7 +30,9 @@
{% translate "Choose the transit benefit you would like to enroll in" %}
+
{% include "core/includes/form.html" with form=form %}
+
{% endblock inner-content %}
+
+{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %}
+{% block call-to-action %}
+{% endblock call-to-action %}
diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
index 1b40940fa..d64f88b19 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-12-09 13:27-0800\n"
+"POT-Creation-Date: 2024-12-11 12:16-0800\n"
"Language: English\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
@@ -320,6 +320,14 @@ msgid ""
"JavaScript. Please enable JavaScript for this website and"
msgstr ""
+msgid ""
+"This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service "
+"apply."
+msgstr ""
+
msgid "Get a reduced fare on CST public transportation when you tap to ride"
msgstr ""
diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
index 1f40c5888..257b882ce 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-12-09 13:27-0800\n"
+"POT-Creation-Date: 2024-12-11 12:16-0800\n"
"Language: Español\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
@@ -434,6 +434,19 @@ msgstr ""
"Para funcionar correctamente, este sitio web requiere un navegador que "
"admita JavaScript. Por favor, active JavaScript por este sitio web y"
+msgid ""
+"This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service "
+"apply."
+msgstr ""
+"Este sitio está protegido por reCAPTCHA y se aplican la
Política de privacidad y
las Condiciones de "
+"servicio de Google."
+
msgid "Get a reduced fare on CST public transportation when you tap to ride"
msgstr ""
"Obtenga una tarifa reducida en el transporte público CST cuando toque para "
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index e791d7009..02ca1777e 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -14,6 +14,11 @@ html {
scroll-padding-top: 101px; /* Header Height (80px) + Skip Nav Height (21px) = 101px */
}
+/* reCAPTCHA: Do not display badge */
+.grecaptcha-badge {
+ display: none;
+}
+
body {
font-size: 100%;
color: var(--text-primary-color);
@@ -53,6 +58,8 @@ li {
margin: 0;
}
+/* Utility Classes */
+
@media (min-width: 992px) {
/* Utility Class: Padding bottom 64px on Desktop */
/* Pair with pb-4 on Form pages to get 24px on Mobile, 64px on Desktop */
@@ -106,6 +113,11 @@ a:visited:not(.btn) {
color: var(--selected-color);
}
+:root {
+ --external-link-icon-size: var(--font-size-24px);
+ --external-link-icon-size-small: var(--font-size-18px);
+}
+
a[target="_blank"]::after {
content: " ";
background-color: currentColor;
@@ -119,12 +131,19 @@ a[target="_blank"]::after {
display: inline-block;
position: relative;
- width: 24px;
- height: 24px;
+ width: var(--external-link-icon-size);
+ height: var(--external-link-icon-size);
margin-left: 2px;
vertical-align: text-bottom;
}
+.form-text a[target="_blank"]::after {
+ width: var(--external-link-icon-size-small);
+ height: var(--external-link-icon-size-small);
+ mask-size: contain;
+ -webkit-mask-size: contain;
+}
+
/* Headlines */
/* All headlines */
h1,
@@ -513,18 +532,10 @@ footer .footer-links li a.footer-link:visited {
}
/* Forms: Text Inputs */
-/* Form Container: Must use .form-container parent to use these styles */
-
-:root {
- --form-input-gap: calc(24rem / 16);
-}
+/* Form Field Container: Must use .form-field-container parent to use these styles */
-.form-container .form-group:not(:first-child) {
- padding-top: var(--form-input-gap);
-}
-
-.form-container .form-control-label,
-.form-container .required-label {
+.form-field-container .form-control-label,
+.form-field-container .required-label {
font-size: var(--font-size-16px);
font-weight: var(--medium-font-weight);
line-height: var(--form-field-text-line-height);
@@ -532,7 +543,7 @@ footer .footer-links li a.footer-link:visited {
padding-bottom: calc(12rem / 16);
}
-.form-container .form-control {
+.form-field-container .form-control {
border-width: var(--border-width);
border-radius: var(--border-radius);
border-color: var(--primary-color);
@@ -542,8 +553,8 @@ footer .footer-links li a.footer-link:visited {
/* Input height should be 60px */
}
-.form-container .form-control:focus,
-.form-container .form-control:focus-visible {
+.form-field-container .form-control:focus,
+.form-field-container .form-control:focus-visible {
outline: 3px solid var(--focus-color) !important;
outline-offset: 2px !important;
box-shadow: none !important;
@@ -552,7 +563,7 @@ 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);
+ letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5));
}
/* Forms: Radio Buttons */