homepage and mini mobile systems

This commit is contained in:
2024-12-18 07:06:24 -08:00
parent 23a9c365e8
commit 90505b964a
48 changed files with 11210 additions and 903 deletions

View File

@@ -8,7 +8,6 @@
.headline-largest {
font-size: 55px;
font-weight: 700;
line-height: 58px;
margin-bottom: unset;
color: #000066;
}
@@ -4059,7 +4058,7 @@ textarea.form-control-lg {
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: none;
border-radius: 1px;
transition: none;
}
.navbar-toggler:hover {
@@ -4445,10 +4444,10 @@ textarea.form-control-lg {
color: #FFFFFF;
}
.navbar-dark .navbar-nav .nav-link {
color: #FFFFFF;
color: #000066;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
color: #FFFFFF;
color: #000066;
}
.navbar-dark .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.25);
@@ -4458,14 +4457,14 @@ textarea.form-control-lg {
color: #FFFFFF;
}
.navbar-dark .navbar-toggler {
color: #FFFFFF;
color: #000066;
border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000066' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
color: #FFFFFF;
color: #000066;
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
@@ -11202,14 +11201,32 @@ body {
font-family: "Inter", sans-serif;
}
h1, .headline-largest, .h1 {
font-size: calc(2.214581rem + 1vw);
font-weight: 700;
line-height: 58px;
.py-1 {
padding: 1rem 0;
}
.consumer-brand h1, .consumer-brand .headline-largest, .consumer-brand .h1 {
color: #000066;
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
.py-4 {
padding: 4rem 0;
}
.overflow-hidden {
overflow: hidden;
}
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.business-brand h1, .business-brand .headline-largest, .business-brand .h1 {
@@ -11217,31 +11234,17 @@ h1, .headline-largest, .h1 {
}
h2, .headline-large, .h2 {
font-size: calc(1.3rem + 1vw);
font-weight: 700;
line-height: 55px;
}
.consumer-brand h2, .consumer-brand .headline-large, .consumer-brand .h2 {
color: #000066;
font-size: calc(1rem + 1vw);
font-weight: 400;
line-height: 50px;
}
.business-brand h2, .business-brand .headline-large, .business-brand .h2 {
color: #00447C;
}
h3, .headline-standard, .h3 {
font-size: 30px;
font-weight: 700;
line-height: 40px;
}
.consumer-brand h3, .consumer-brand .headline-standard, .consumer-brand .h3 {
color: #000066;
}
.business-brand h3, .business-brand .headline-standard, .business-brand .h3 {
color: #00447C;
.rounded {
border-radius: 27px !important;
}
h4, .headline-small, .h4 {
@@ -11258,6 +11261,18 @@ h4, .headline-small, .h4 {
color: #00447C;
}
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.pe-3 {
padding-right: 3rem;
}
p {
font-size: 20px;
line-height: 32px;
@@ -11285,15 +11300,16 @@ input[type=submit].gform_button,
button[type=submit].single_add_to_cart_button,
#searchBtn {
border: none;
padding: 8px 20px;
padding: 14px 28px;
background-color: #CC0033 !important;
color: #FFFFFF !important;
font-size: 25px;
font-size: 20px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
display: inline-block;
line-height: 36px;
line-height: 20.21px;
border-radius: 10px;
}
.button--primary {
@@ -11330,7 +11346,7 @@ button[type=submit].single_add_to_cart_button,
}
.bg-color-light-blue {
background-color: #EAEFF3;
background-color: #EBF5FF;
}
.bg-color-blue {
@@ -11439,7 +11455,7 @@ button[type=submit].single_add_to_cart_button,
position: absolute;
width: 100%;
height: 50%;
background-color: #EAEFF3;
background-color: #EBF5FF;
left: 0;
right: 0;
top: 0;
@@ -11454,7 +11470,7 @@ button[type=submit].single_add_to_cart_button,
position: absolute;
width: 100%;
height: 50%;
background-color: #EAEFF3;
background-color: #EBF5FF;
z-index: -1;
left: 0;
right: 0;
@@ -11569,6 +11585,184 @@ button[type=submit].single_add_to_cart_button,
}
}
.sonar-svg-right {
top: 0;
right: 0;
overflow-x: hidden;
}
.sonar-svg-right svg {
max-width: 300px;
width: 100%;
}
.sonar-svg-right-big {
top: 0;
right: -13%;
overflow-x: hidden;
}
.sonar-svg-right-big svg {
max-width: 1000px;
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;
}
.f-white p {
color: white;
}
.f-black {
color: #110F24;
}
.f-black p {
color: #110F24;
}
.f-purple {
color: #7e5bef;
}
.f-purple p {
color: #7e5bef !important;
}
.f-navy {
color: #000066;
}
.f-navy p {
color: #000066 !important;
}
.f-sky {
color: #3399FF;
}
.f-red {
color: #cc0133;
}
.f-gray {
color: #9AA5B5;
}
.f-yellow {
color: #ffb020;
}
.f-green {
color: #5CB25D;
}
.bg-navy {
background: #000066;
}
.bg-red {
background: #cc0133;
}
.btn-red {
background: #cc0133;
color: white;
font-weight: bold;
padding: 0.5em 3em;
border-radius: 10px;
}
.bg-sky {
color: #3399FF;
}
.bg-purple {
color: #7e5bef;
}
.bg-yellow {
color: #ffb020;
}
.bg-green {
color: #5CB25D;
}
.g-navy-sky {
background: linear-gradient(90deg, #000066 0%, #3399ff 100%);
}
.g-sky-bright {
background: linear-gradient(90deg, #3399ff 0%, rgba(51, 153, 255, 0.5) 100%);
}
.bg-color-gradient-light-blue {
background: linear-gradient(90deg, rgba(51, 153, 255, 0.5) 0%, rgba(51, 153, 255, 0.1) 100%);
}
.g-sky-hero {
background: linear-gradient(90deg, rgba(51, 153, 255, 0.1) 0%, rgba(51, 153, 255, 0.5) 100%);
border-bottom-right-radius: 45px;
border-bottom-left-radius: 45px;
}
.bg-color-sky-red {
background: linear-gradient(90deg, #3399ff 0%, #cc0133 100%);
}
.bg-color-sky-red h2, .bg-color-sky-red .headline-large, .bg-color-sky-red .h2 {
color: white !important;
}
.bg-color-sky-red p {
color: white !important;
}
.bg-color-navy-purple {
background: linear-gradient(90deg, #000066 0%, #7e5bef 100%);
}
.bg-color-red-yellow {
background: linear-gradient(90deg, #cc0133 0%, #ffb020 100%);
}
.g-sky-border {
border-radius: 20px;
background: linear-gradient(to left top, rgba(51, 153, 255, 0.1) 0%, rgba(51, 153, 255, 0.5) 100%);
padding: 5px;
}
.g-sky-border img {
border-radius: 17px;
}
.mw-250 {
max-width: 250px;
}
.g-purple-border {
position: relative;
border-radius: 20px;
background: linear-gradient(to left top, #000066 0%, #7e5bef 100%);
padding: 5px;
max-width: 458px;
}
.g-purple-border img {
border-radius: 17px;
}
.fs-xs {
font-size: 14px;
}
.fs-xs p {
font-size: 14px;
line-height: 19px;
}
.col2-circle-content-slice-container .highlighted-circle img {
border-radius: 50%;
width: 225px;
@@ -11599,6 +11793,23 @@ button[type=submit].single_add_to_cart_button,
padding-bottom: 10px;
}
.col2-circle-content-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 {
color: #000066;
}
.col2-circle-content-slice-container .highlighted-circle-copy p {
line-height: 41px;
}
.col2-circle-content-slice-container .highlighted-circle-link a {
line-height: 41px;
}
.col2-media-highlights-slice-container .border-side-1 {
border-right: 1px solid black;
}
@@ -11642,17 +11853,12 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.col3-card-slice-container {
text-align: center;
}
.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;
border: 1px solid rgba(123, 123, 123, 0.4);
box-shadow: 5px 5px 10px 0px rgba(119, 119, 119, 0.16);
background-color: #FFFFFF;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-img {
@@ -11660,7 +11866,6 @@ button[type=submit].single_add_to_cart_button,
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper {
min-height: 350px;
padding: 33px 25px 46px;
}
.col3-card-slice-container .col3-card-wrapper .col3-card-item .col3-card-item-inner-wrapper .col3-card-title {
color: #000066;
@@ -11704,7 +11909,7 @@ button[type=submit].single_add_to_cart_button,
}
.header-color-light-blue {
background-color: #EAEFF3;
background-color: #EBF5FF;
}
.header-color-light-blue h4, .header-color-light-blue .headline-small, .header-color-light-blue .h4 {
color: #505050;
@@ -11718,26 +11923,72 @@ button[type=submit].single_add_to_cart_button,
}
.faq-dropdown-slice-container .accordion-button {
color: #FFFFFF !important;
color: #000066 !important;
font-size: 26px;
font-weight: 700;
}
.faq-dropdown-slice-container .accordion-button::after {
filter: invert(1) grayscale(1);
}
.consumer-brand .faq-dropdown-slice-container .accordion-button {
background-color: #000066 !important;
padding: 0.5rem 1.25rem;
}
.consumer-brand .faq-dropdown-slice-container .accordion-button,
.consumer-brand .faq-dropdown-slice-container .accordion-body {
padding: 0.8rem 0;
background-color: #EBF5FF !important;
}
.consumer-brand .faq-dropdown-slice-container .accordion-item {
border-right: 0 !important;
border-left: 0 !important;
border-top: 1px solid #3399FF !important;
border-bottom: 0 !important;
}
.consumer-brand .faq-dropdown-slice-container .accordion-button:focus,
.consumer-brand .faq-dropdown-slice-container .accordion-button:not(.collapsed) {
box-shadow: none;
}
.consumer-brand .faq-dropdown-slice-container .accordion-body p {
margin-bottom: 0.2rem;
}
.consumer-brand .faq-dropdown-slice-container .accordion-item:last-child {
border-bottom: 1px solid #3399FF !important;
}
.business-brand .faq-dropdown-slice-container .accordion-button {
background-color: #00447C !important;
}
.form-with-image-slice-container {
/* Primary_Large_Default_Ex */
}
.form-with-image-slice-container .gform_heading,
.form-with-image-slice-container .gform_description {
display: none;
}
.form-with-image-slice-container .gform-theme--framework .gfield--type-choice .gfield_checkbox,
.form-with-image-slice-container .gform-theme--framework .gfield--type-choice .gfield_radio {
flex-direction: row;
padding-bottom: 1rem;
}
.form-with-image-slice-container .gform-theme--foundation .gform_footer,
.form-with-image-slice-container .gform-theme--foundation .gform_page_footer {
border-top: 1px solid #9AA5B5;
padding-top: 1.5rem;
}
.form-with-image-slice-container .gform-theme--foundation .gform_fields {
padding-top: 1rem;
}
.form-with-image-slice-container #gform_submit_button_1 {
padding: 12px 47px;
border-radius: 12.1242px;
}
h1, .headline-largest, .h1 {
font-size: 26px;
font-weight: 300;
font-size: calc(2.214581rem + 1vw);
}
.comsumer-brand .h1-heading-slice-container h1, .comsumer-brand .h1-heading-slice-container .headline-largest, .comsumer-brand .h1-heading-slice-container .h1 {
color: #000066;
@@ -11747,42 +11998,210 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.comsumer-brand .h2-heading-slice-container h2, .comsumer-brand .h2-heading-slice-container .headline-large, .comsumer-brand .h2-heading-slice-container .h2 {
color: #000066;
}
.business-brand .h2-heading-slice-container h2, .business-brand .h2-heading-slice-container .headline-large, .business-brand .h2-heading-slice-container .h2 {
color: #00447C;
}
.hero-slice-container {
background-repeat: no-repeat;
background-size: cover;
background-position: top;
min-height: 550px;
padding: 4rem 0;
.f-purple h2, .f-purple .headline-large, .f-purple .h2 {
color: #7e5bef;
}
.consumer-brand .hero-slice-container .hero-title {
.f-navy h2, .f-navy .headline-large, .f-navy .h2 {
color: #000066;
}
.f-white h2, .f-white .headline-large, .f-white .h2 {
color: white;
}
.f-black h2, .f-black .headline-large, .f-black .h2 {
color: #110F24;
}
h3, .headline-standard, .h3 {
font-size: 26px;
font-weight: 400;
line-height: 40px;
}
@media (min-width: 768px) {
h3, .headline-standard, .h3 {
font-size: 30px;
}
}
.f-purple h3, .f-purple .headline-standard, .f-purple .h3 {
color: #7e5bef;
}
.f-nacy h3, .f-nacy .headline-standard, .f-nacy .h3 {
color: #000066;
}
.f-white h3, .f-white .headline-standard, .f-white .h3 {
color: white;
}
.f-black h3, .f-black .headline-standard, .f-black .h3 {
color: #110F24;
}
h4, .headline-small, .h4 {
font-size: 26px;
font-weight: 400;
line-height: 40px;
}
@media (min-width: 768px) {
h4, .headline-small, .h4 {
font-size: 32px;
}
}
.f-purple h4, .f-purple .headline-small, .f-purple .h4 {
color: #7e5bef;
}
.f-navy h4, .f-navy .headline-small, .f-navy .h4 {
color: #000066;
}
.f-white h4, .f-white .headline-small, .f-white .h4 {
color: white;
}
.f-black h4, .f-black .headline-small, .f-black .h4 {
color: #110F24;
}
h5, .h5 {
font-size: 20px;
font-weight: 400;
line-height: 40px;
}
@media (min-width: 768px) {
h5, .h5 {
font-size: 24px;
}
}
.f-purple h5, .f-purple .h5 {
color: #7e5bef;
}
.f-nacy h5, .f-nacy .h5 {
color: #000066;
}
.f-white h5, .f-white .h5 {
color: white;
}
.f-black h5, .f-black .h5 {
color: #110F24;
}
h6, .h6 {
font-size: 18px;
font-weight: 600;
line-height: 40px;
text-transform: capitalize;
color: #7e5bef;
}
.f-purple h6, .f-purple .h6 {
color: #7e5bef;
}
.f-nacy h6, .f-nacy .h6 {
color: #000066;
}
.f-white h6, .f-white .h6 {
color: white;
}
.f-black h6, .f-black .h6 {
color: #110F24;
}
.hero-slice-container {
margin-bottom: 3rem;
}
.hero-slice-container .hero-copy {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #110F24;
}
.consumer-brand .hero-slice-container .hero-title {
color: #110F24;
}
.business-brand .hero-slice-container .hero-title {
color: #00447C;
color: #110F24;
}
.tile-1 {
max-width: 500px;
}
.tile-2 {
right: 2%;
bottom: -6%;
width: 160px;
}
.tile-square {
max-width: 250px;
}
.pos {
margin-bottom: -85px;
}
.sonar-svg-3 {
display: none;
}
@media (min-width: 768px) {
.sonar-svg-3 {
display: block;
position: absolute;
bottom: -42%;
right: -18%;
overflow-x: hidden;
}
.pos {
margin-bottom: -175px;
}
.tile-2 {
width: 100%;
right: -2%;
}
.tile-2 img {
max-width: 325px;
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;
justify-items: center;
width: 100%;
position: relative;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .icon-img {
max-width: 106px;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .content-wrapper .icon-title {
align-self: center;
max-width: 50px;
height: 50px;
display: flex;
align-items: end;
}
.icon-info-grid-slice-container .icon-card-wrapper .icon-card .content-wrapper .icon-link {
position: absolute;
@@ -11842,7 +12261,7 @@ button[type=submit].single_add_to_cart_button,
width: 100%;
}
.image-with-icon-info-grid-slice-container .icon-info-grid .icon img {
width: 77px;
width: 40px;
}
.image-with-icon-info-grid-slice-container .icon-info-grid .info .title {
color: #000066;
@@ -11878,31 +12297,6 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.phone-contact-with-shortcode-slice-container .call-title {
font-size: calc(1.6125rem + 1vw);
font-weight: 700;
line-height: 55px;
}
.phone-contact-with-shortcode-slice-container .call-title a {
font-size: calc(1.6125rem + 1vw);
font-weight: 700;
line-height: 55px;
}
.consumer-brand .call-title {
color: #000066;
}
.consumer-brand .call-title a {
color: #000066;
}
.business-brand .call-title {
color: #00447C;
}
.business-brand .call-title a {
color: #00447C;
}
.product-carousel-slice-container .products .product-slide .product-image img {
width: 100%;
}
@@ -11910,49 +12304,34 @@ button[type=submit].single_add_to_cart_button,
color: #036396;
}
.products-list-slice-container {
text-align: center;
}
.products-list-slice-container .products-list-wrapper .products-list-item {
.products-list-slice-container .products-list-item {
position: relative;
min-height: 33em;
border: 1px solid rgba(123, 123, 123, 0.4);
box-shadow: 5px 5px 10px 0px rgba(119, 119, 119, 0.16);
border-radius: 20px;
background: linear-gradient(to left top, rgba(51, 153, 255, 0.1) 0%, rgba(51, 153, 255, 0.5) 100%);
padding: 5px;
}
@media (min-width: 768px) {
.products-list-slice-container .products-list-wrapper .products-list-item {
min-height: 42em;
}
.products-list-slice-container .products-list-item .bg-white {
border-radius: 16px;
}
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-img {
.products-list-slice-container .products-list-item .products-list-img {
max-width: 50%;
}
@media (min-width: 992px) {
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-img {
.products-list-slice-container .products-list-item .products-list-img {
max-width: 70%;
}
}
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-item-inner-wrapper {
.products-list-slice-container .products-list-item .line-sm {
width: 57px;
height: 4px;
background: #CCE5FF;
}
.products-list-slice-container .products-list-item .products-list-item-inner-wrapper {
background-color: #FFFFFF;
padding: 20px;
}
@media (min-width: 992px) {
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-item-inner-wrapper {
padding: 33px 25px 46px;
}
}
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-item-inner-wrapper .products-list-title {
.products-list-slice-container .products-list-item .products-list-item-inner-wrapper .products-list-title {
color: #000066;
}
.products-list-slice-container .products-list-wrapper .products-list-item .products-list-item-inner-wrapper .products-list-link {
position: absolute;
bottom: 0;
width: -moz-fit-content;
width: fit-content;
left: 50%;
transform: translate(-50%, -50%);
}
.testimonial-carousel-slice-container .testimonials .testimonial-image img {
width: 225px;
height: 225px;
@@ -11983,10 +12362,16 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.testimonial-slice-container {
margin-bottom: 5rem;
}
.testimonial-slice-container .g-sky-border {
top: 20px;
}
.testimonial-slice-container .testimonial-img {
border-radius: 50%;
width: 300px;
height: 300px;
width: 100%;
max-width: 300px;
max-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
@@ -11998,6 +12383,10 @@ button[type=submit].single_add_to_cart_button,
.testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-quote-attribution {
text-align: right;
}
.testimonial-slice-container .sonar {
right: 0;
top: 0;
}
.text-highlights-col-slice-container .text-block .title {
color: #036396;
@@ -12011,6 +12400,13 @@ button[type=submit].single_add_to_cart_button,
height: auto;
}
.video-copy-slice-container .video-copy {
max-width: 666px;
}
.video-copy-slice-container .ratio {
max-width: 620px;
}
.video-grid-slice-container .heading {
color: #000066;
}
@@ -12018,6 +12414,9 @@ button[type=submit].single_add_to_cart_button,
width: 100%;
}
.main-header .top-info {
width: 225px;
}
.main-header h1, .main-header .headline-largest, .main-header .h1 {
color: #FFFFFF;
}
@@ -12055,7 +12454,8 @@ button[type=submit].single_add_to_cart_button,
content: none;
}
.main-header .main-nav .main-logo img {
max-width: 296px;
height: 30px;
width: 200px;
}
@media (min-width: 992px) {
.main-header .main-nav .menu-item-has-children::after {
@@ -12081,7 +12481,9 @@ button[type=submit].single_add_to_cart_button,
}
}
.main-header .main-nav .menu-item .nav-link {
color: #FFFFFF;
color: #000066;
padding-right: 0.2rem;
padding-left: 0.2rem;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.main-header .main-nav .menu-item a {
@@ -12151,8 +12553,8 @@ button[type=submit].single_add_to_cart_button,
padding-right: 0px !important;
}
.site-footer .footer-wrapper {
padding: 84px 0 46px 0;
.site-footer .footer-wrapper .nav-link {
padding: 0.3rem;
}
.site-footer .footer-wrapper .footer-logo {
max-width: 50%;
@@ -12184,26 +12586,20 @@ button[type=submit].single_add_to_cart_button,
.site-footer .footer-wrapper .social-icons .fa-facebook,
.site-footer .footer-wrapper .social-icons .fa-linkedin,
.site-footer .footer-wrapper .social-icons .fa-youtube {
font-size: 45px;
font-size: 25px;
color: #FFFFFF;
}
.site-footer .footer-bottom {
padding-top: 3rem;
padding-top: 1rem;
}
.site-footer .footer-bottom p {
color: #505050;
}
.consumer-brand .site-footer .footer-wrapper {
background: #000066;
}
.consumer-brand .site-footer .footer-bottom {
background: #FFFFFF;
}
.business-brand .site-footer .footer-wrapper {
background: #00447C;
}
.business-brand .site-footer .footer-bottom {
background: #FFFFFF;
}