This commit is contained in:
rayelliott 2020-06-04 20:22:54 +00:00
parent 782807f5ae
commit 2f7eddda1e
4 changed files with 96 additions and 24 deletions

View File

@ -43,9 +43,7 @@ body.rwavw-custom {
} }
@media (max-width: 63.98em) { @media (max-width: 63.98em) {
.pure-g { .pure-g {
> div { > div {
position: relative; position: relative;
&:first-child { &:first-child {
@ -67,7 +65,7 @@ body.rwavw-custom {
} }
} }
h2, h3, h4, h5, h6, p { .heading-section-title, p {
color: #fff; color: #fff;
} }
} }

View File

@ -8,7 +8,7 @@ body.rwavw-custom {
display: none !important; display: none !important;
} }
h2, h3, h4, h5, h6 { .heading-section-title {
color: #000a38; color: #000a38;
} }
@ -30,7 +30,7 @@ body.rwavw-custom {
svg { svg {
height: 44px; height: 44px;
width: auto; width: auto;
opacity: 0.8; // color: $accent-500;
} }
} }
@ -58,35 +58,99 @@ body.rwavw-custom {
} }
.widget.rwavw-feature-narrow { .widget.rwavw-feature-narrow {
// bg color of row group accent
$bg-color: $accent-500;
.pure-g > div { .pure-g > div {
justify-content: flex-start; justify-content: flex-start;
} }
.row-group { .row-group {
position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 44px;
text-align: center; text-align: center;
p {
margin-bottom: 0;
}
&::before {
content: '';
display: block;
position: absolute;
top: -11px;
bottom: -11px;
left: -16px;
right: -16px;
background-color: $bg-color;
background: linear-gradient(
to top right,
rgba($bg-color, 1),
rgba($bg-color, 0.7)
);
opacity: 0.5;
}
} }
.row-group + p {
opacity: 0.7;
}
@media (min-width: 64em) {
.row-group::before {
top: -11px;
bottom: -11px;
left: calc((100vw - 1000px) / -2);
right: -22px;
background: linear-gradient(
to right,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
opacity: 0.4;
border-radius: 25px;
}
.pure-g > div:last-child .row-group::before {
left: -22px;
right: calc((100vw - 1000px) / -2);
background: linear-gradient(
to left,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
}
}
p, .heading-section-title { p, .heading-section-title {
margin-bottom: 22px; margin-bottom: 44px;
}
.heading-section-title + p {
margin-top: -22px;
} }
p { p {
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 18px;
line-height: 33px; line-height: 27px;
padding-right: 18px;
margin-top: 0; margin-top: 0;
opacity: 0.6; opacity: 0.6;
&:not(:last-child) {
padding-right: 18px;
}
a { a {
display: inline-block; display: inline-block;
color: rgb(0, 10, 56); color: rgb(0, 10, 56);
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 700;
background-color: rgba(0, 10, 56, 0.05); background-color: rgba(0, 10, 56, 0.05);
margin-left: -22px; margin-left: -22px;
padding: 0 22px; padding: 0 22px;
@ -94,13 +158,22 @@ body.rwavw-custom {
line-height: 42px; line-height: 42px;
height: 44px; height: 44px;
box-shadow: $box-shadow-sk;; color: $neutral-900;
background-color: $accent-500;
background-color: linear-gradient(
to top right,
rgba($accent-500, 1),
rgba($accent-500, 0.8)
);
box-shadow: 4px 4px 6px rgba($accent-500, 0.25), -4px -4px 9px rgba(#fff, 0.75);
svg { svg {
position: relative; position: relative;
height: 28px; height: 28px;
top: 8px; top: 8px;
margin-left: 4px; margin-left: 4px;
color: inherit;
} }
} }
@ -136,9 +209,6 @@ body.rwavw-custom {
} }
} }
@media (min-width: 767px) {
}
@media (max-width: 64em) { @media (max-width: 64em) {
p { p {
text-align: center !important; text-align: center !important;
@ -166,14 +236,18 @@ body.rwavw-custom {
justify-content: flex-start; justify-content: flex-start;
} }
h4, h5, h6 { .heading-col-title {
opacity: 0.8; color: $accent-500;
} }
p { p {
font-size:16px; font-size:16px;
font-weight: 600; font-weight: 600;
opacity: 0.6; opacity: 0.8;
&:last-child {
opacity: 0.7;
}
} }
} }

View File

@ -78,17 +78,17 @@ body.rwavw-custom {
font-weight: 600; font-weight: 600;
min-width: 18ch; min-width: 18ch;
border: 3px solid #fff; border: 3px solid $accent-500;
&:first-child { &:first-child {
color: #000; color: $neutral-900;
background-color: #fff; background-color: $accent-500;
margin-bottom: 22px; margin-bottom: 22px;
} }
&:last-child { &:last-child {
color: #fff; color: $accent-500;
background-color: transparent; background-color: rgba($neutral-900, 0.2);
} }
} }
} }

View File

@ -1,7 +1,7 @@
$color--accent-500: #fc8d00; $accent-500: #fc8d00;
$color--neutral-900: #231f20; $neutral-900: #231f20;
$box-shadow-sk: 4px 4px 6px rgba(0, 10, 56, 0.15), -4px -4px 9px rgba(#fff, 0.75); $box-shadow-sk: 4px 4px 6px rgba(0, 10, 56, 0.15), -4px -4px 9px rgba(#fff, 0.75);