diff --git a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html index 2dcd82e8f..01f0b302d 100644 --- a/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html +++ b/benefits/eligibility/templates/eligibility/start--mst-courtesy-card.html @@ -15,7 +15,11 @@

{% translate "eligibility.pages.start.mst_courtesy_card.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--mst-courtesy-card.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "eligibility:confirm" as button_url %} - {% translate "eligibility.buttons.continue" %} -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "eligibility:confirm" as button_url %} + {% translate "eligibility.buttons.continue" %} +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start--senior.html b/benefits/eligibility/templates/eligibility/start--senior.html index 06dc3f733..560fad490 100644 --- a/benefits/eligibility/templates/eligibility/start--senior.html +++ b/benefits/eligibility/templates/eligibility/start--senior.html @@ -15,10 +15,14 @@

{% translate "eligibility.pages.start.senior.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--senior.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "oauth:login" as button_url %} - {% translate "eligibility.buttons.senior.signin" as button_text %} - - {{ button_text }} - -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "oauth:login" as button_url %} + {% translate "eligibility.buttons.senior.signin" as button_text %} + + {{ button_text }} + +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start--veteran.html b/benefits/eligibility/templates/eligibility/start--veteran.html index 0e8d47976..76b6a8250 100644 --- a/benefits/eligibility/templates/eligibility/start--veteran.html +++ b/benefits/eligibility/templates/eligibility/start--veteran.html @@ -15,8 +15,12 @@

{% translate "eligibility.pages.start.veteran.headline" %}

{% include "eligibility/includes/media-item--idcardcheck--start--veteran.html" %} {% endblock media-item %} -{% block call-to-action-button %} - {% url "oauth:login" as button_url %} - {% translate "eligibility.buttons.veteran.signin" as button_text %} - {{ button_text }} -{% endblock call-to-action-button %} +{% block call-to-action %} +
+
+ {% url "oauth:login" as button_url %} + {% translate "eligibility.buttons.veteran.signin" as button_text %} + {{ button_text }} +
+
+{% endblock call-to-action %} diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html index 936bd2e69..d2d5fa1f3 100644 --- a/benefits/eligibility/templates/eligibility/start.html +++ b/benefits/eligibility/templates/eligibility/start.html @@ -21,5 +21,5 @@

{% translate "eligibility.pages.start.sub_headline" {% endblock inner-content %} -{% block call-to-action-button %} -{% endblock call-to-action-button %} +{% block call-to-action %} +{% endblock call-to-action %} diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 37c203d73..4172cfcb3 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -353,14 +353,14 @@ footer .footer-links li a:visited { /* Used on Eligibility Start */ :root { - --login-gov-button-font-size: var(--h3-font-size); - --login-gov-button-padding: 11px 0; + --login-gov-button-font-size: var(--font-size-20px); + --login-gov-button-max-width: 310px; } @media (min-width: 992px) { :root { --login-gov-button-font-size: var(--font-size-16px); - --login-gov-button-padding: var(--primary-button-padding); + --login-gov-button-max-width: 289px; } } @@ -371,13 +371,10 @@ footer .footer-links li a:visited { letter-spacing: 0; font-size: var(--login-gov-button-font-size); font-family: "Public Sans", Roboto, system-ui; + max-width: var(--login-gov-button-max-width); text-decoration: none; } -.eligibility-start #login { - padding: var(--login-gov-button-padding); -} - /* Sets the text `Login.gov` as transparent */ /* With an Login.gov logo image over it */ /* So screenreaders can read out `Login.gov` */ @@ -385,7 +382,7 @@ footer .footer-links li a:visited { background-size: contain; background-repeat: no-repeat; display: block; - margin: 8px auto 0 auto; + margin: 11px auto 0 auto; position: relative; padding-top: 1px; color: transparent; @@ -394,28 +391,36 @@ footer .footer-links li a:visited { line-height: 1; } -.eligibility-index #login .fallback-text { - display: inline-block; +@media (min-width: 992px) { + #login .fallback-text { + margin: 0 0 0 5px; + display: inline-block; + vertical-align: baseline; + } +} + +/* Sign in with Login.gov (white logo) on Eligibility Start */ + +.eligibility-start #login { + padding: 10px 0; } #login .fallback-text.white-logo { background-image: url("/static/img/login-gov-logo-rev.svg"); - width: 132px; - height: 18px; + width: 130.9887px; + height: 17px; } +/* Login.gov modal button (color logo) on Eligibility Index */ + #login .fallback-text.color-logo { background-image: url("/static/img/login-gov-logo.svg"); width: 120px; height: 16px; } -@media (min-width: 992px) { - #login .fallback-text { - margin: 0 0 0 5px; - display: inline-block; - vertical-align: baseline; - } +.eligibility-index #login .fallback-text { + display: inline-block; } /* Custom button: Sign Out */