This commit is contained in:
2025-01-15 13:07:49 -08:00
parent 054b09e69e
commit b0eb83530c
29 changed files with 920 additions and 527 deletions

View File

@@ -27,6 +27,30 @@ $ma-black: #110F24;
color: $consumer-primary;
}
.h1 {
@extend h1
}
.h2 {
@extend h2
}
.h3 {
@extend h3
}
.h4 {
@extend h4
}
.h5 {
@extend h5
}
.h6 {
@extend h6
}
.headline-largest {
font-size: 55px;
font-weight: 700;

View File

@@ -3,7 +3,7 @@
max-width: 1500px;
}
.none-graphic {
.radial-none-graphic {
display: none
}
@@ -13,11 +13,6 @@
}
.radial-right-graphic {
top: 50%;
right: -71%;
}
.radial-center-graphic {
top: -50%;
right: -30%;
}

View File

@@ -1,11 +1,14 @@
.col3-card-slice-container {
.radial-top {
left: 0;
left: -175px;
top: 0;
svg {
width: 100%;
max-width: 350px;
max-width: 610px;
max-height: 610px;
color: #F2F8FF;
opacity: 1;
}
// @include media-breakpoint-up(xs) {
@@ -21,6 +24,13 @@
// }
}
&.bg-color-light-blue {
.radial-top svg {
color: white;
opacity: 1;
}
}
.col3-card-wrapper {
z-index: 1;

View File

@@ -35,43 +35,6 @@ body {
z-index: 1;
}
// .consumer-brand {
// h1 {
// color: $consumer-primary;
// }
// }
.business-brand {
h1 {
color: $business-primary;
}
}
// .consumer-brand {
// h2 {
// color: $consumer-primary;
// }
// }
.business-brand {
h2 {
color: $business-primary;
}
}
// .consumer-brand {
// h3 {
// color: $consumer-primary;
// }
// }
// .business-brand {
// h3 {
// color: $business-primary;
// }
// }
.rounded {
border-radius: 27px !important;
}
@@ -135,7 +98,7 @@ button[type="submit"].single_add_to_cart_button,
#searchBtn {
border: none;
padding: 10px 36px;
background-color: $orange !important;
background-color: $ma-red !important;
color: $white !important;
font-size: 16px;
font-weight: 600;
@@ -527,12 +490,60 @@ button[type="submit"].single_add_to_cart_button,
.btn-red {
background: $ma-red;
color: white;
// font-weight: bold;
// padding: .5em 3em;
// border-radius: 10px;
}
.btn-outline-primary {
// override bootstrap btn-primary
.btn-primary {
color: white;
border-color: $ma-red;
background: $ma-red;
}
.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:visited,
.btn-primary.dropdown-toggle.show {
color: white;
border-color: $ma-red;
background: $ma-red;
opacity: 0.9;
}
.btn-check:focus+.btn-primary,
.btn-primary:focus {
box-shadow: 0 0 0 0.1rem rgba(244, 244, 244, 0.5);
}
// override bootstrap btn-secondary
.btn-secondary,
.btn-secondary:visited {
color: white;
border-color: $ma-sky;
background: $ma-sky;
}
.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.dropdown-toggle.show {
color: $ma-sky;
border-color: $ma-sky;
background: #EBF5FF;
}
.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
box-shadow: 0 0 0 0.1rem rgba(244, 244, 244, 0.5);
}
// override bootstrap btn-outline-primary
.btn-outline-primary,
.btn-outline-primary:visited {
color: $ma-sky;
border-color: $ma-sky;
background: white;
@@ -554,7 +565,6 @@ button[type="submit"].single_add_to_cart_button,
box-shadow: 0 0 0 0.25rem rgba(153, 173, 237, 0.5);
}
.bg-sky {
background: $ma-sky;
}
@@ -571,26 +581,27 @@ button[type="submit"].single_add_to_cart_button,
background: $ma-green;
}
.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-navy-sky {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
@@ -598,75 +609,77 @@ button[type="submit"].single_add_to_cart_button,
.bg-color-sky-bright {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(51, 153, 255, 0.5) 100%);
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
.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;
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
.bg-color-sky-red {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(204, 1, 51, 1) 100%);
color: white !important;
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
.bg-color-navy-purple {
background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
color: white;
li {
color: white;
}
p {
color: white;
}
a {
color: white;
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
@@ -674,16 +687,19 @@ button[type="submit"].single_add_to_cart_button,
background: linear-gradient(90deg, rgba(204, 1, 51, 1)0%, rgba(255, 176, 32, 1) 100%);
color: white;
li {
color: white;
}
p {
color: white;
}
a {
color: white;
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
strong,
b,
a,
a:hover {
color: white !important;
}
}
@@ -698,19 +714,6 @@ button[type="submit"].single_add_to_cart_button,
}
}
ul,
ol {
line-height: 30px !important;
li {
margin-bottom: 6px;
}
}
.mw-250 {
max-width: 250px;
}
.g-purple-border {
position: relative;
border-radius: 20px;
@@ -731,6 +734,19 @@ ol {
margin: 0 auto;
}
ul,
ol {
line-height: 30px !important;
li {
margin-bottom: 6px;
}
}
.mw-250 {
max-width: 250px;
}
.fs-xs {
font-size: 14px;

View File

@@ -1,27 +1,9 @@
h1 {
font-size: 26px;
font-weight: 300;
font-size: calc(2.214581rem + 1vw);
}
// @include media-breakpoint-up(lg) {
// h1 {
// font-size: 56px;
// }
// }
.comsumer-brand {
.h1-heading-slice-container {
h1 {
color: $consumer-primary;
}
}
}
.business-brand {
.h1-heading-slice-container {
h1 {
color: $business-primary;
}
@include media-breakpoint-up(lg) {
font-size: 56px;
line-height: 58px;
}
}

View File

@@ -1,26 +1,14 @@
// .comsumer-brand {
// .h2-heading-slice-container {
// h2 {
// color: $consumer-primary;
// }
// }
// }
// .business-brand {
// .h2-heading-slice-container {
// h2 {
// color: $business-primary;
// }
// }
// }
h2 {
font-size: calc(1.4rem + 1vw);
font-weight: 400;
line-height: 50px;
@include media-breakpoint-up(lg) {
font-size: 42px;
}
}
.f-purple h2 {
color: $ma-purple;
}

View File

@@ -1,7 +1,7 @@
h3 {
font-size: 26px;
font-weight: 400;
line-height: 40px;
font-weight: 900;
line-height: 32px;
@include media-breakpoint-up(md) {
font-size: 30px;

View File

@@ -1,11 +1,12 @@
h4 {
font-size: 26px;
font-weight: bold;
line-height: 32px;
font-weight: 900;
}
// @include media-breakpoint-up(md) {
// font-size: 32px;
// }
.bg-color-sky-red h4,
.bg-color-navy-purple h4 {
color: white;
}
.f-purple h4 {

View File

@@ -1,11 +1,12 @@
h5 {
font-size: 20px;
font-weight: 400;
line-height: 40px;
line-height: 24px;
font-weight: 900;
}
@include media-breakpoint-up(md) {
font-size: 24px;
}
.bg-color-sky-red h5,
.bg-color-navy-purple h5 {
color: white;
}
.f-purple h5 {

View File

@@ -1,13 +1,14 @@
h6 {
font-size: 18px;
font-weight: 600;
line-height: 40px;
line-height: 24px;
font-weight: 900;
text-transform: capitalize;
color: $ma-purple;
}
@include media-breakpoint-up(lg) {
// font-size: 24px;
}
.bg-color-sky-red h6,
.bg-color-navy-purple h6 {
color: white;
}
.f-purple h6 {

View File

@@ -2,6 +2,7 @@
h3 {
font-weight: 200;
}
.bold-copy {
a {
font-size: 45px;
@@ -9,24 +10,13 @@
line-height: 55px;
}
}
}
.consumer-brand {
.phone-contact-slice-container {
.bold-copy {
a {
color: $consumer-primary;
}
}
}
}
.radial-left {
top: -53px;
left: 0;
.business-brand {
.phone-contact-slice-container {
.bold-copy {
a {
color: $business-primary;
}
svg {
max-width: 300px;
}
}
}

View File

@@ -10,6 +10,8 @@
svg {
width: 100%;
max-width: 250px;
color: white;
opacity: 0.3;
}
// @include media-breakpoint-up(xs) {
@@ -26,4 +28,11 @@
// }
}
&.bg-color-white {
.radial svg {
color: #F2F8FF;
opacity: 1;
}
}
}