Merge pull request #2396 from Safelite/CASH-403-desktop-footer-updates

Cash 403 desktop footer updates

jest.config.js

@@ -18,6 +18,7 @@ module.exports = {
     "!src/layouts/payment-method/**/*.vue",
     "!src/fmg-components/cart/**/*.vue",
     "!src/fmg-components/add-vaps-modal-buttons/**/*.vue",
+    "!src/fmg-components/funnel-footer/**/*.vue", //UI component; nothing to test
     "!src/ux-components/text-link/**/*.vue",
     "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     "!src/common-components/funnel-header/menu-modal/**/*.vue",

src/App.vue

@@ -5,6 +5,7 @@
             <component :is="Component" ref="component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <funnelFooter />
     <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
@@ -12,6 +13,7 @@
 import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
 
 export default {
     name: "app",
@@ -32,6 +34,7 @@ export default {
     },
     components: {
         loadingModal,
+        funnelFooter,
     },
 };
 

src/assets/img/neighborhood.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 284.4 44.3" version="1.1" viewBox="0 0 284.4 44.3">
+  <style>
+    .st2,.st3{fill:#f4f4f5;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st3{fill:none}.st4{fill:#f4f4f5}.st5{fill:#fff}
+  </style>
+  <g style="opacity:.6">
+    <path d="M92.4 2.3h20.8l5.1 5.1H116v15.4h-14.5l-.3-14.7-8.8-5.8z" style="fill:#f4f4f5;stroke:#000;stroke-width:.75;stroke-miterlimit:10"/>
+    <path d="M158.2 35.2c0-3 3.1-11.6 5.3-11.6 2.6 0 5.4 8.5 5.5 11.5.1.8 0 1.5-.2 2.2-.2.7-.6 1.4-1.1 2-.5.6-1.1 1-1.8 1.3-.7.3-1.4.5-2.2.5-.8 0-1.5-.1-2.2-.5-.7-.3-1.3-.8-1.8-1.3-.5-.6-.9-1.2-1.1-2-.4-.6-.5-1.4-.4-2.1h0z" class="st2"/>
+    <path d="m163.5 43.9.1-10.9v-2.4M77.4 26v17.3H65.7m-52.5 0V26m27.4 17.3V32h-7.4v7M193 29.2v14.1m-21.3 0V29.2m8.4 3.8h6.6v6.6m-2.7 0h-6V33" class="st3"/>
+    <path d="M175.9 29.2H171v-9.5h23.2v9.5h-18.3z" class="st2"/>
+    <path d="M182.3 33v6.6m-3.8-3.3h8.2" class="st3"/>
+    <path d="M177.6 22.9V17h-3.4v8.5h3.4" class="st4"/>
+    <path d="M177.6 22.9V17h-3.4v8.5h3.4M77.4 19.6V8.1L89.3.4l11.9 7.7V42m37.4-31.8v33.1h-14.4" class="st3"/>
+    <path d="M98.6 43.3V25.5h20v17.8" class="st5"/>
+    <path d="M98.6 43.3V25.5h20v17.8m-2.9-38.6h19.4l5.6 5.6h-5.9m-42.4-8h20.8l5.1 5.1h-5.8" class="st3"/>
+    <path d="M103.1 26.3h-6.3l4.5-3.5h14.9l4.5 3.5h-6.6" class="st5"/>
+    <path d="M103.1 26.3h-6.3l4.5-3.5h14.9l4.5 3.5h-6.6M5 37.5c2.6 0 4.7-2.1 4.7-4.7S7.6 28.1 5 28.1.3 30.2.3 32.8c.1 2.7 2.2 4.7 4.7 4.7zm0-2.3-3.9-3.9M5 43.9V31.4" class="st3"/>
+    <path d="M54 38.9V32h-6.7v6.9H54zm13.3 0V32h-6.7v6.9h6.7zm-40.7 0V32h-6.7v6.9h6.7z" class="st2"/>
+    <path d="M116 7.4v15.4" class="st3"/>
+    <path d="M32.9 26H13.2l13.7-13.7h19.5" class="st4"/>
+    <path d="M32.9 26H13.2l13.7-13.7h19.5m46.8 18.4V15.2h-7.6v15.6h4.3m36.2-6.9V13.1h-4.5v10.8h2.5m10.3-.3V12.8h-4.5v10.8h2.5M253 43.3h-21.5v-9.7m28.8-7.6v17.3h-2.5m2.5-17.3-14.4-12.7" class="st3"/>
+    <path d="M245.9 13.4 231.5 26h-28.7l14.3-12.7h28.8z" class="st2"/>
+    <path d="M202.9 26v17.2h5.8m37.2-29.8h0" class="st3"/>
+    <path d="M213.3 37.8v-7.5h-4.5v7.5h4.5zm8 0v-7.5h-4.5v7.5h4.5z" class="st2"/>
+    <path d="M249 29.6v-8.9h-5.4v8.9h3.1" class="st5"/>
+    <path d="M249 29.6v-8.9h-5.4v8.9h3.1" class="st3"/>
+    <path d="M43.4 15.3 54 5.1l23.4 21H32.9" class="st4"/>
+    <path d="M43.4 15.3 54 5.1l23.4 21H32.9m246.5 12.8c2.6 0 4.7-2.1 4.7-4.7s-2.1-4.7-4.7-4.7-4.7 2.1-4.7 4.7 2.1 4.7 4.7 4.7zm0-2.4 3.9-3.9m-3.9 11.3V32.8" class="st3"/>
+    <path d="M266.7 36.7c0-2.3 2.4-9 4.1-9 2 0 4.2 6.6 4.2 8.9 0 .6-.1 1.1-.3 1.6-.2.5-.5 1-.9 1.4-.4.4-.8.7-1.4 1-.5.2-1.1.3-1.6.3-.6 0-1.1-.1-1.6-.3-.5-.2-1-.5-1.4-.9-.4-.4-.7-.9-.9-1.4-.1-.5-.2-1.1-.2-1.6h0z" class="st2"/>
+    <path d="m271 43.9-.1-10.5m0 4.5-1.7-1.6m-105.4.6 2.3-2.3" class="st3"/>
+    <path d="M105.4 43.3V32.9h6.2v7.6" class="st5"/>
+    <path d="M105.4 43.3V32.9h6.2v7.6" class="st3"/>
+  </g>
+</svg>

src/assets/img/skyline-van.svg

@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" id="Layer_1" x="0" y="0" style="enable-background:new 0 0 289.8 96.4" version="1.1" viewBox="0 0 289.8 96.4">
+  <style>
+    .st3{opacity:.6}.st6{fill:#fff}.st6,.st7,.st8{opacity:.6;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round;enable-background:new}.st7{fill:#f4f4f5}.st8{fill:none}.st9{fill:#fff}.st10{fill:none}.st10,.st12,.st13{stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st12{fill:#f4f4f5}.st13{fill:#fff}
+  </style>
+  <defs>
+    <path id="SVGID_1_" d="M0 .1h229v96H0z"/>
+  </defs>
+  <clipPath id="SVGID_00000081618564987475412120000010633357823219215248_">
+    <use xlink:href="#SVGID_1_" style="overflow:visible"/>
+  </clipPath>
+  <g style="clip-path:url(#SVGID_00000081618564987475412120000010633357823219215248_)">
+    <defs>
+      <path id="SVGID_00000010271964794733196470000001541803140098324380_" d="M-65 0h760v96H-65z"/>
+    </defs>
+    <clipPath id="SVGID_00000053531394918895929010000015208600179319091351_">
+      <use xlink:href="#SVGID_00000010271964794733196470000001541803140098324380_" style="overflow:visible"/>
+    </clipPath>
+    <g style="clip-path:url(#SVGID_00000053531394918895929010000015208600179319091351_)">
+      <path d="M111.7 95.4H93.4V85L90 82.1V35.7l-4.5-3.6V15.9h26.2v13.3h15.1v24.4h-15.1v41.8z" style="opacity:.6;fill:#f4f4f5;stroke:#000;stroke-width:.75;stroke-linejoin:round;stroke-miterlimit:10;enable-background:new"/>
+      <g class="st3">
+        <path d="M165.3 53.6v7.3h29.8V31.4H151v22.2" style="fill:#f4f4f5"/>
+        <path d="M165.3 53.6v7.3h29.8V31.4H151v22.2h14.3z" style="fill:none;stroke:#000;stroke-width:.75;stroke-linejoin:round;stroke-miterlimit:10"/>
+      </g>
+      <path d="M107.7 29.2v-7.3h-4.5v7.3h4.5zm0 11.2v-7.3h-4.5v7.3h4.5zm8.5 0v-7.3h-4.5v7.3h4.5zM21.9 21.9h-4.5v7.3h4.5v-7.3zm0 11.2h-4.5v7.3h4.5v-7.3zm7.9-11.2h-4.5v7.3h4.5v-7.3z" class="st6"/>
+      <path d="M13.8 18.4v30.1h13.8v27.6h10.1v19.3h6.8v-77H13.8zm8.1 22h-4.5v-7.3h4.5v7.3zm0-11.2h-4.5v-7.3h4.5v7.3zm7.9 0h-4.5v-7.3h4.4l.1 7.3z" class="st7"/>
+      <path d="M40.2 18.4V14H17.8v1.9M165 53.6h-38m-6.6-24.4V9.6H151v21.8m-137.2 64H0V48.5h27.6v27.6" class="st8"/>
+      <path d="M86.4 85.1c0-2.6-2.7-10-4.6-10-2.3 0-4.7 7.4-4.7 10 0 .6.1 1.2.3 1.8.2.6.6 1.1 1 1.5.4.4.9.8 1.5 1 .6.2 1.2.4 1.8.4.6 0 1.2-.1 1.8-.3.6-.2 1.1-.6 1.5-1 .4-.4.8-.9 1-1.5.2-.7.4-1.3.4-1.9z" class="st6"/>
+      <path d="m81.6 95.4.1-5.7.1-6.8m-.1 4.4L79.4 85" class="st8"/>
+      <g class="st3">
+        <path d="M131.7 68.9v-7.3h-4.5v7.3h2.5" class="st9"/>
+        <path d="M131.7 68.9v-7.3h-4.5v7.3h2.5" class="st10"/>
+      </g>
+      <g class="st3">
+        <path d="M122.3 68.9v-7.3h-4.5v7.3h2.5" class="st9"/>
+        <path d="M122.3 68.9v-7.3h-4.5v7.3h2.5" class="st10"/>
+      </g>
+      <g class="st3">
+        <path d="M122.3 81.1v-7.3h-4.5v7.3h2.5" class="st9"/>
+        <path d="M122.3 81.1v-7.3h-4.5v7.3h2.5" class="st10"/>
+      </g>
+      <path d="M86.1 60.6v-5H54.7v5h31.4zm0-8.5v-5H54.7v5h31.4z" class="st7"/>
+      <g class="st3">
+        <path d="M11.9 72V55.6H6.3V72h3.6" class="st9"/>
+        <path d="M11.9 72V55.6H6.3V72h3.6" class="st10"/>
+      </g>
+      <g class="st3">
+        <path d="M21.2 72V55.6h-5.6V72h3.6" class="st9"/>
+        <path d="M21.2 72V55.6h-5.6V72h3.6" class="st10"/>
+      </g>
+      <path d="M44.4 24.7h18.5v7.8" class="st8"/>
+      <g class="st3">
+        <path d="M86.2 35.7h3.9l-6.8-5.2H57.5l-6.8 5.2h30.9" class="st9"/>
+        <path d="M86.2 35.7h3.9l-6.8-5.2H57.5l-6.8 5.2h30.9" class="st10"/>
+      </g>
+      <path d="M50.8 35.7v59.8H75" class="st8"/>
+      <path d="M93.4 89.6c2.6 0 4.7-2.1 4.7-4.7s-2.1-4.7-4.7-4.7-4.7 2.1-4.7 4.7c.1 2.7 2.2 4.7 4.7 4.7z" class="st6"/>
+      <path d="m93.4 87.3 3.9-3.9m-3.9 6.3V83m53.7 12.4h-12.9" class="st8"/>
+      <path d="M24.5 89.6c2.6 0 4.7-2.1 4.7-4.7s-2.1-4.7-4.7-4.7-4.7 2.1-4.7 4.7c0 2.7 2.1 4.7 4.7 4.7z" class="st7"/>
+      <path d="m24.5 87.3-3.9-3.9M24.5 96V83.5m3.1-7.4h-6.4" class="st8"/>
+      <path d="M182.7 42.5v-7.3h-4.5v7.3h4.5zm8.4 0v-7.3h-4.5v7.3h4.5z" class="st6"/>
+      <path d="M120.6 14.3h25.2" class="st8"/>
+      <path d="M155 90.2h-7.8v5.2h7.8v-5.2zm28 0h-8.9v5.2h8.9v-5.2zm21.3 0h-5.9v5.2h5.9v-5.2zm24.3 0h-9v5.2h9v-5.2z" style="fill:#d92d27;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round"/>
+      <path d="M228.6 69.1v21.1h-9V77.9h-15.3v12.3h-5.9V77.9H183v12.3h-8.9V84h-5.7v0h5.7v-3.2l-4-2.1h-11.2l-4 2.1V84h5.6v0H155v6.2h-7.8V69.1h81.4z" class="st12"/>
+      <path d="M160.6 95.4V84m7.8 11.4V84" class="st10"/>
+      <path d="M195.5 87.9h-9.8v-3.6h9.8v3.6zm12.1-3.6h9.2v3.6H207v-3.6h.6z" class="st12"/>
+      <path d="M174.1 80.8V84h-19.2v-3.2l4-2.1h11.2l4 2.1z" class="st13"/>
+      <path d="M218.9 58.8h2.5l7.1 10.4h-81.4l7.1-10.4h59.5" class="st9"/>
+      <path d="M218.9 58.8h2.5l7.1 10.4h-81.4l7.1-10.4h59.5m-53.2 36.6h4" class="st10"/>
+    </g>
+  </g>
+  <path d="M283.8 85.1h2.2c1.2 0 2.3.7 2.3 2.1l.2 2.7h.9v2.6H247v-2.2h.8c0-9.7 1.5-11.2 1.5-11.2h28.8c2.7 1.6 5.7 6 5.7 6" style="fill:#db1f26"/>
+  <path d="M283.8 85.1h2.2c1.2 0 2.3.7 2.3 2.1l.2 2.7h.9v2.6H247v-2.2h.8c0-9.7 1.5-11.2 1.5-11.2h28.8c2.7 1.6 5.7 6 5.7 6" class="st10"/>
+  <path d="M270.9 85.3v-6h7c2 .5 6 6 6 6h-13z" class="st9"/>
+  <path d="M283.8 85.1h2.2c1.2 0 2.3.7 2.3 2.1l.2 2.7h.9v2.6H247v-2.2h.8c0-9.7 1.5-11.2 1.5-11.2h28.8c2.7 1.6 5.7 6 5.7 6m-36.1 5.1h2.9m22.9-5.1h7.4m-9.8-6.1v6" class="st10"/>
+  <path d="M256.3 96c2 0 3.6-1.6 3.6-3.6s-1.6-3.6-3.6-3.6-3.6 1.6-3.6 3.6 1.6 3.6 3.6 3.6zm24.7 0c2 0 3.6-1.6 3.6-3.6s-1.6-3.6-3.6-3.6-3.6 1.6-3.6 3.6S279 96 281 96z" class="st13"/>
+</svg>

src/digital-components/dropdown-question/dropdown-question.vue

@@ -142,6 +142,9 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
+        @include media-breakpoint-up(md) {
+            min-height: 3.5rem;
+        }
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px $blue;

src/digital-components/textbox-question/textbox-question.vue

@@ -325,8 +325,11 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
-        max-height: 48px;
-        padding: 12px 16px;
+        padding: 0.75rem 1rem;
+        @include media-breakpoint-up(md) {
+            padding: 1rem;
+            min-height: 3.5rem;
+        }
         &::placeholder {
             color: $gray-500;
         }

src/experiment-components/service-package-radio.vue

@@ -169,10 +169,10 @@ export default {
             display: flex;
             flex-direction: column;
             &:first-child {
-                margin: 1rem 0.5rem 0 0;
+                margin: 1rem 1rem 0 0;
             }
             &:last-child {
-                margin: 1rem 0 0 0.5rem;
+                margin: 1rem 0 0 1rem;
             }
         }
 

src/fmg-components/funnel-footer/funnel-footer.spec.js

@@ -0,0 +1 @@
+test.todo("Predominantly a UI component, so no tests are written");

src/fmg-components/funnel-footer/funnel-footer.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="funnel-footer">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col d-flex justify-content-center justify-content-md-start">
+                    <img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
+                </div>
+                <div class="col d-none d-md-flex justify-content-end align-items-end">
+                    <img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="footer-inner-wrapper">
+            <textLink
+                linkType="newWindowLink"
+                text="Terms of service"
+                href="//www.safelite.com/terms-of-service"
+                target="_blank" />
+            <textLink
+                linkType="newWindowLink"
+                text="Your privacy choices"
+                href="//www.safelite.com/privacy-center"
+                target="_blank">
+                <template v-slot:after-text>
+                    <img
+                        class="ccpa-icon"
+                        src="~@/assets/img/icons/ccpa-icon.svg"
+                        alt="Your privacy choices" />
+                </template>
+            </textLink>
+            <textLink
+                linkType="navigation"
+                text="Cookie preferences"
+                href="javascript:OneTrust.ToggleInfoDisplay();" />
+            <textLink
+                linkType="newWindowLink"
+                text="Warranty"
+                href="//www.safelite.com/national-lifetime-warranty"
+                target="_blank" />
+            <textLink
+                linkType="newWindowLink"
+                text="Notice at collection"
+                href="https://www.safelite.com/ccpa-privacy-policy"
+                target="_blank" />
+        </div>
+    </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "funnelFooter",
+    components: {
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.funnel-footer {
+    border-top: none;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: transparent;
+    align-items: end;
+    margin-top: auto;
+
+    .skyline {
+        height: 96px;
+    }
+    .neighborhood {
+        height: 48px;
+    }
+
+    .footer-inner-wrapper {
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid $gray;
+        padding: 2rem 0;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+
+        :deep(a) {
+            text-decoration: none;
+            &.new-window-link {
+                margin: 0 0.75rem;
+            }
+            &.navigation-link {
+                margin: 0 0.75rem;
+            }
+        }
+
+        .ccpa-icon {
+            width: 2.0625rem;
+            height: 1rem;
+            margin-left: 0.5rem;
+        }
+
+        @include media-breakpoint-up(md) {
+            flex-direction: row;
+        }
+    }
+}
+</style>

src/fmg-components/funnel-header/funnel-header.vue

@@ -3,7 +3,7 @@
         class="funnel-header d-flex justify-content-center align-items-center flex-column"
         v-if="imageSrc">
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-        <menuModal />
+        <!-- <menuModal /> Hide temporarily until re-implemented for use with progress bar. Edit display: none below as well. -->
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -59,7 +59,7 @@ export default {
     },
     components: {
         alert,
-        menuModal,
+        //menuModal, Temporary hide. See above.
     },
     mounted() {
         // Check if alert event is on the bus
@@ -88,6 +88,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.menu-modal-container) {
+    display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
+}
 .funnel-header {
     position: relative;
     padding: 0.97rem 0;

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -89,6 +89,7 @@ p.small {
 }
 .sub-text {
     margin: 0;
+    @include responsive-font-size-md(0.875rem, 1rem);
 }
 
 .justify-content-start {

src/fmg-components/nav-bar/nav-bar.vue

@@ -129,6 +129,8 @@ export default {
     overflow: visible;
     display: flex;
     padding: 0;
+    position: relative;
+    z-index: 2;
     a {
         display: flex;
         justify-content: center;

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -148,6 +148,9 @@ export default {
         margin: 0 auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &.btn {
             &.btn-secondary {

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -164,6 +164,9 @@ export default {
         margin: 0 auto 1.5rem auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &:hover,
         &:active,
@@ -241,7 +244,10 @@ export default {
             button.btn.skip-button {
                 padding: 0;
                 order: 2;
-                font-size: 1rem;
+                font-size: 0.875rem;
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
             }
             .modal-disclaimer {
                 font-size: 0.75rem;

src/layouts/quote/quote.vue

@@ -57,7 +57,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-6 d-flex justify-content-center"
+                        class="mt-6 d-flex justify-content-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -572,7 +572,7 @@ export default {
     methods: {
         getColCount() {
             if (this.packageNumber > 2) {
-                return "col-xl-8";
+                return "col-xl-10";
             } else {
                 return "col-xl-6";
             }
@@ -833,7 +833,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 
@@ -851,4 +851,7 @@ export default {
 .text-block {
     display: block;
 }
+:deep(.promo-modal-question a) {
+    @include responsive-font-size-md(0.875rem, 1rem);
+}
 </style>

src/layouts/schedule/schedule.vue

@@ -756,6 +756,9 @@ export default {
         &:focus {
             outline: 1px solid $blue;
         }
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
 }
 .funnel-sub-header {

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -6,7 +6,7 @@
             v-model="selectedValue">
             <div
                 :aria-label="buttonLabel"
-                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
                 <div class="row-one">
                     <span class="m-0 button-label-copy text-truncate" :class="textPosition">
                         {{ buttonLabel }}

src/layouts/service-location/shop-question/shop-question.vue

@@ -271,6 +271,10 @@ export default {
     margin-top: 1rem;
     text-align: center;
 
+    a {
+        @include responsive-font-size-md(0.875rem, 1rem);
+    }
+
     .button-question {
         .question-text {
             margin-top: 0.5rem;

src/styles/common-styles.scss

@@ -4,13 +4,25 @@ body {
     font-size: 16px;
     background-color: #fff;
     color: #4d5151;
+    #app {
+        display: flex;
+        flex-direction: column;
+        min-height: 100dvh;
+        form {
+            > .container-fluid {
+                margin-bottom: -1rem;
+                @media screen and (min-width: 1090px) {
+                    margin-bottom: -5rem;
+                }
+            }
+        }
+    }
     .container-fluid {
         padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }
         &.page-container-grouped-styles {
-            height: 100dvh;
             display: flex;
             flex-direction: column;
         }

src/styles/common-typography-styles.scss

@@ -8,6 +8,7 @@ body {
 
 //Headings
 //add helper fw-bold to any element to get bold style (500)
+
 h1,
 .h1 {
     line-height: 1.325;
@@ -36,6 +37,7 @@ h5,
 .h5 {
     line-height: 1.325;
     font-weight: 400;
+    @include responsive-font-size-md(1.25rem, 1.625rem);
 }
 
 h6,

src/styles/mixins/customMixins.scss

@@ -8,3 +8,15 @@
 @mixin box-shadow-hover($color) {
     box-shadow: 0 0 0 4px $color;
 }
+
+// Typography size mixin for medium breakpoints
+// Use this to adjust font size for medium breakpoint
+@mixin responsive-font-size-md($font-size, $md-font-size) {
+    font-size: $font-size;
+
+    @include media-breakpoint-up(md) {
+        font-size: $md-font-size;
+    }
+}
+// Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
+// Example: @include responsive-font-size-md(0.875rem, 1rem);

src/styles/ux-variables.scss

@@ -141,7 +141,7 @@ $h1-font-size: $font-size-base * 3;
 $h2-font-size: $font-size-base * 2.625;
 $h3-font-size: $font-size-base * 2;
 $h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
+//$h5-font-size: $font-size-base * 1.25;// Font size set in customMixins.scss
 $h6-font-size: $font-size-base * 0.875;
 
 //Border Radius

src/ux-components/list-button/list-button.vue

@@ -5,7 +5,7 @@
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
-            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
             <span class="m-0" :class="textPosition">
                 {{ buttonLabel }}
             </span>

src/ux-components/text-link/text-link.vue

@@ -80,10 +80,14 @@ a {
     }
     &.navigation-link,
     &.new-window-link {
+        font-size: 0.875rem;
         color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
     &.new-window-link {
         margin-bottom: 1.5rem;