WIP
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user