mobile styles and fix overflow

This commit is contained in:
2024-12-18 15:52:12 -08:00
parent 90505b964a
commit 01ca26189e
24 changed files with 458 additions and 331 deletions

View File

@@ -11233,12 +11233,6 @@ body {
color: #00447C;
}
h2, .headline-large, .h2 {
font-size: calc(1rem + 1vw);
font-weight: 400;
line-height: 50px;
}
.business-brand h2, .business-brand .headline-large, .business-brand .h2 {
color: #00447C;
}
@@ -11530,16 +11524,16 @@ button[type=submit].single_add_to_cart_button,
}
.padding-top-large {
padding-top: 0.75rem;
padding-top: 3rem;
}
@media (min-width: 768px) {
.padding-top-large {
padding-top: 1.5rem;
padding-top: 4rem;
}
}
@media (min-width: 992px) {
.padding-top-large {
padding-top: 3rem;
padding-top: 6rem;
}
}
@@ -11572,16 +11566,16 @@ button[type=submit].single_add_to_cart_button,
}
.padding-bottom-large {
padding-bottom: 0.75rem;
padding-bottom: 3rem;
}
@media (min-width: 768px) {
.padding-bottom-large {
padding-bottom: 1.5rem;
padding-bottom: 4rem;
}
}
@media (min-width: 992px) {
.padding-bottom-large {
padding-bottom: 3rem;
padding-bottom: 6rem;
}
}
@@ -11605,16 +11599,6 @@ button[type=submit].single_add_to_cart_button,
width: 100%;
}
.sonar-svg-left {
bottom: -165%;
left: 0;
overflow-x: hidden;
}
.sonar-svg-left svg {
max-width: 300px;
width: 100%;
}
.f-white {
color: white;
}
@@ -11793,20 +11777,20 @@ button[type=submit].single_add_to_cart_button,
padding-bottom: 10px;
}
.col2-circle-content-slice-container .highlighted-circle img {
.col2-image-coopy-slice-container .highlighted-circle img {
border-radius: 50%;
width: 225px;
height: 225px;
-o-object-fit: cover;
object-fit: cover;
}
.col2-circle-content-slice-container .highlighted-circle-title {
.col2-image-coopy-slice-container .highlighted-circle-title {
color: #000066;
}
.col2-circle-content-slice-container .highlighted-circle-copy p {
.col2-image-coopy-slice-container .highlighted-circle-copy p {
line-height: 41px;
}
.col2-circle-content-slice-container .highlighted-circle-link a {
.col2-image-coopy-slice-container .highlighted-circle-link a {
line-height: 41px;
}
@@ -11853,20 +11837,35 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.radial-container-col3-card .sonar {
width: 250px;
top: -646px;
}
.radial-container-col3-card .sonar svg {
width: 100%;
max-width: 250px;
}
@media (min-width: 768px) {
.radial-container-col3-card .sonar {
top: -705px;
}
}
@media (min-width: 992px) {
.radial-container-col3-card .sonar {
top: -745px;
}
}
.col3-card-slice-container .col3-card-wrapper {
z-index: 1;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item {
position: relative;
min-height: 40em;
background-color: #FFFFFF;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-img {
width: 100%;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper {
min-height: 350px;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper .col3-card-title {
color: #000066;
}
@@ -11932,6 +11931,8 @@ button[type=submit].single_add_to_cart_button,
}
.consumer-brand .faq-dropdown-slice-container .accordion-button {
padding: 0.5rem 1.25rem;
font-size: 20px;
line-height: normal;
}
.consumer-brand .faq-dropdown-slice-container .accordion-button,
.consumer-brand .faq-dropdown-slice-container .accordion-body {
@@ -11998,8 +11999,10 @@ h1, .headline-largest, .h1 {
color: #00447C;
}
.business-brand .h2-heading-slice-container h2, .business-brand .h2-heading-slice-container .headline-large, .business-brand .h2-heading-slice-container .h2 {
color: #00447C;
h2, .headline-large, .h2 {
font-size: calc(1.4rem + 1vw);
font-weight: 400;
line-height: 50px;
}
.f-purple h2, .f-purple .headline-large, .f-purple .h2 {
@@ -12047,13 +12050,8 @@ h3, .headline-standard, .h3 {
h4, .headline-small, .h4 {
font-size: 26px;
font-weight: 400;
line-height: 40px;
}
@media (min-width: 768px) {
h4, .headline-small, .h4 {
font-size: 32px;
}
font-weight: bold;
line-height: 32px;
}
.f-purple h4, .f-purple .headline-small, .f-purple .h4 {
@@ -12158,19 +12156,12 @@ h6, .h6 {
margin-bottom: -85px;
}
.sonar-svg-3 {
display: none;
.radial {
bottom: -42%;
right: -18%;
}
@media (min-width: 768px) {
.sonar-svg-3 {
display: block;
position: absolute;
bottom: -42%;
right: -18%;
overflow-x: hidden;
}
.pos {
margin-bottom: -175px;
}
@@ -12185,12 +12176,6 @@ h6, .h6 {
width: 100%;
}
}
.sonar-svg {
bottom: -292px;
right: -200px;
overflow-x: hidden;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card {
display: grid;
grid-template-rows: 1fr auto 1fr;
@@ -12297,6 +12282,14 @@ h6, .h6 {
color: #00447C;
}
.phone-contact-with-shortcode-slice-container .radial-left {
top: -53px;
left: 0;
}
.phone-contact-with-shortcode-slice-container .radial-left svg {
max-width: 300px;
}
.product-carousel-slice-container .products .product-slide .product-image img {
width: 100%;
}
@@ -12332,6 +12325,20 @@ h6, .h6 {
.products-list-slice-container .products-list-item .products-list-item-inner-wrapper .products-list-title {
color: #000066;
}
.simple-content-slice-container {
overflow: hidden;
}
.simple-content-slice-container .radial {
right: 0;
top: 120px;
width: 100%;
max-width: 250px;
}
.simple-content-slice-container .radial svg {
width: 100%;
max-width: 250px;
}
.testimonial-carousel-slice-container .testimonials .testimonial-image img {
width: 225px;
height: 225px;
@@ -12363,10 +12370,12 @@ h6, .h6 {
}
.testimonial-slice-container {
margin-bottom: 5rem;
padding-bottom: 9rem;
}
.testimonial-slice-container .g-sky-border {
top: 20px;
@media (min-width: 992px) {
.testimonial-slice-container .g-sky-border {
margin-bottom: -73px;
}
}
.testimonial-slice-container .testimonial-img {
width: 100%;
@@ -12383,9 +12392,9 @@ h6, .h6 {
.testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-quote-attribution {
text-align: right;
}
.testimonial-slice-container .sonar {
.testimonial-slice-container .radial {
right: 0;
top: 0;
top: -55px;
}
.text-highlights-col-slice-container .text-block .title {
@@ -12406,6 +12415,27 @@ h6, .h6 {
.video-copy-slice-container .ratio {
max-width: 620px;
}
.video-copy-slice-container .radial-right-graphic {
top: 0;
right: -200px;
}
.video-copy-slice-container .radial-right-graphic svg {
max-width: 1000px;
}
.video-copy-slice-container .radial-left-graphic {
top: 0;
left: -200px;
}
.video-copy-slice-container .radial-left-graphic svg {
max-width: 1000px;
}
.video-copy-slice-container .radial-center-graphic {
top: 0;
left: 50%;
}
.video-copy-slice-container .radial-center-graphic svg {
max-width: 1000px;
}
.video-grid-slice-container .heading {
color: #000066;
@@ -12439,6 +12469,11 @@ h6, .h6 {
.main-header .top-nav-mobile li a {
color: #FFFFFF;
}
.main-header .main-logo img {
height: 30px;
width: 200px !important;
max-width: 200px !important;
}
.main-header .top-bar-items li {
position: relative;
align-self: center;
@@ -12453,10 +12488,6 @@ h6, .h6 {
.main-header .main-nav .dropdown-toggle::after {
content: none;
}
.main-header .main-nav .main-logo img {
height: 30px;
width: 200px;
}
@media (min-width: 992px) {
.main-header .main-nav .menu-item-has-children::after {
content: "";