Payment page style updates.

public/css/hop-styling.css

@@ -15,6 +15,7 @@ body .validation-info {
 }
 body .italicSmall {
   font-style: normal;
+  font-size: 14px;
 }
 body span {
   line-height: 24px;
@@ -27,7 +28,7 @@ body .form-group {
   display: flex;
   flex-direction: column;
 }
-body h2 {
+body .headerlinecontainer .headerline1 {
   font-size: 20px;
   line-height: 32px;
   font-weight: 400;
@@ -76,12 +77,12 @@ body .creditCardSpecific div {
 body .creditCardSpecific div .headerlinecontainer {
   padding: 0;
 }
-body .creditCardSpecific div .headerlinecontainer .headerline5v2 {
-  display: none;
-}
 body .creditCardSpecific div label {
   font-weight: 500;
 }
+body .creditCardSpecific div:first-child {
+  display: none;
+}
 body .creditCardSpecific #infoRow2 {
   margin-bottom: 0;
 }
@@ -91,7 +92,7 @@ body #cardExpirationContainer {
   justify-content: space-between;
   padding: 0;
 }
-@media (min-width: 368px) {
+@media (min-width: 400px) {
   body #cardExpirationContainer {
     flex-direction: row;
   }
@@ -116,7 +117,6 @@ body .optional-label:after {
 }
 body .buttonContainer {
   height: 48px;
-  margin-top: 36px;
 }
 body .buttonContainer button {
   position: relative;

public/css/hop-styling.scss

@@ -16,6 +16,7 @@ body {
 
     .italicSmall {
         font-style: normal;
+        font-size: 14px;
     }
 
     span {
@@ -32,11 +33,13 @@ body {
         flex-direction: column;
     }
 
-    h2 {
+    .headerlinecontainer {
-        font-size: 20px;
+        .headerline1 {
-        line-height: 32px;
+            font-size: 20px;
-        font-weight: 400;
+            line-height: 32px;
-        margin: 24px 0;
+            font-weight: 400;
+            margin: 24px 0;
+        }
     }
 
     input,
@@ -86,13 +89,13 @@ body {
             padding: 8px 0;
             .headerlinecontainer {
                 padding: 0;
-                .headerline5v2 {
-                    display: none;
-                }
             }
             label {
                 font-weight: 500;
             }
+            &:first-child {
+                display: none;
+            }
         }
         #infoRow2 {
             margin-bottom: 0;
@@ -104,7 +107,7 @@ body {
         flex-direction: column;
         justify-content: space-between;
         padding: 0;
-        @media (min-width: 368px) {
+        @media (min-width: 400px) {
             flex-direction: row;
             .card_expirationYear,
             .card_expirationMonth {
@@ -132,7 +135,6 @@ body {
 
     .buttonContainer {
         height: 48px;
-        margin-top: 36px;
         button {
             position: relative;
             background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);

src/layouts/payment/payment.vue

@@ -20,14 +20,12 @@
                             scrolling="no">
                         </iframe>
                     </div>
-                    <div class="fade-on-route-transition sub-container make-tall">
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             isForwardActionDisabled="true"
                             :isBackButtonHidden="shouldHideBackButton"
                             isSubmitHidden="true"
                             @back-clicked="backButtonAction" />
-                    </div>
                 </div>
             </div>
         </div>
@@ -387,7 +385,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1600px;
+    min-height: 1320px;
     width: 100%;
     border: 0 none;
 }