diff --git a/src/scss/_feature-sunset.scss b/src/scss/_feature-sunset.scss index 76bc743..0a7d506 100644 --- a/src/scss/_feature-sunset.scss +++ b/src/scss/_feature-sunset.scss @@ -2,11 +2,17 @@ body.rwavw-custom { .widget.rwavw-feature-sunset { .pure-g { > div:first-child { + z-index: 10; padding: 20px 80px; } + + > div:last-child { + z-index: 5; + max-width: 40em; + } } - h2, h3, h4, h5, h6 { + .heading-section-title { position: relative; margin-bottom: 44px; } @@ -26,7 +32,7 @@ body.rwavw-custom { } } - h2, h3, h4, h5, h6 { + .heading-section-title { font-size: 28px; margin-bottom: 22px; } @@ -45,7 +51,7 @@ body.rwavw-custom { &:first-child { position: absolute; width: 100%; - max-width: 728px; + max-width: 40em; margin-left: auto; margin-right: auto; height: 100%; @@ -67,29 +73,29 @@ body.rwavw-custom { } @media (min-width: 64em) { - h2, h3, h4, h5, h6, p { + .heading-section-title, p { text-align: right !important; } - h2, h3, h4, h5, h6 { + .heading-section-title { &::before { - $bg-color: rgb(3, 41, 109); + $color: rgb(3, 41, 109); z-index: -1; content: ''; display: block; position: absolute; width: 230%; - height: 300%; - top: 48px; + height: 275%; + top: 35px; left: -22px; - border-radius: 3px; + border-radius: $border-radius; background-image: linear-gradient( 140deg, - rgba($bg-color, 0.01), - rgba($bg-color, 0.05) + rgba($color, 0.05), + rgba($color, 0.1) ); } } diff --git a/src/scss/_featured.scss b/src/scss/_featured.scss index 8dec880..4591d9a 100644 --- a/src/scss/_featured.scss +++ b/src/scss/_featured.scss @@ -94,7 +94,7 @@ body.rwavw-custom { line-height: 42px; height: 44px; - box-shadow: 4px 4px 6px rgba(0, 10, 56, 0.25), -4px -4px 6px rgba(#fff, 0.5); + box-shadow: $box-shadow-sk;; svg { position: relative; @@ -110,13 +110,13 @@ body.rwavw-custom { } .swiper-container { - border-radius: 6px; + border-radius: $border-radius; box-shadow: 4px 4px 6px 0 rgba(0, 10, 56, 0.2); } .swiper-wrapper { position: relative; - border-radius: 6px; + border-radius: $border-radius; overflow: hidden; &::after { @@ -188,76 +188,6 @@ body.rwavw-custom { } } - .widget.rwavw-feature-sunset { - .pure-g { - > div:first-child { - z-index: 10; - } - - > div:last-child { - z-index: 5; - } - } - - .h2, h3, h4, h5, h6 { - position: relative; - margin-bottom: 44px; - } - - @media (max-width: 63.98em) { - .pure-g { - - > div { - position: relative; - &:first-child { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } - } - } - } - - @media (min-width: 64em) { - h2, h3, h4, h5, h6, p { - text-align: right !important; - } - - h2, h3, h4, h5, h6 { - - &::before { - $color: rgb(3, 41, 109); - z-index: -1; - content: ''; - display: block; - position: absolute; - width: 230%; - height: 300%; - top: 48px; - left: -22px; - - border-radius: 3px; - - background-image: linear-gradient( - 140deg, - rgba($color, 0.01), - rgba($color, 0.05) - ); - } - } - - > div:first-child { - z-index: 10; - } - - > div:last-child { - z-index: 5; - } - } - } - .widget.rwavw-feature-main { margin-top: 0; diff --git a/src/scss/_social-proof.scss b/src/scss/_social-proof.scss index 81ebfef..d649baf 100644 --- a/src/scss/_social-proof.scss +++ b/src/scss/_social-proof.scss @@ -1,21 +1,44 @@ body.rwavw-custom { - .testimonials-widget { + .testimonials-widget-testimonial.list, + .bx-wrapper { + position: relative; + padding: 22px; - // display: flex; - // flex-direction: row; - // flex-wrap: wrap; - // justify-content: center; - // align-items: center; + &::before { + content: ''; + display: block; + position: absolute; + width: 100%; + top: 55px; + bottom: 0; + left: 0; + + border-radius: $border-radius; + box-shadow: $box-shadow-sk; + } + } + + .testimonials-widget-testimonial.list { + } + + .bx-wrapper { + height: 270px; + } + + .testimonials-widget { + max-width: 100%; > .image { - order: 2; - flex: 1 1 auto; - width: 4em; - height: 4em; + position: relative; + width: 66px; + height: 66px; + margin-bottom: 22px; border-radius: 50%; background-color: #999; overflow: hidden; + box-shadow: 2px 2px 4px rgba(#000, 0.075); + > img { width: 100%; height: auto; @@ -23,15 +46,15 @@ body.rwavw-custom { } > blockquote { - order: 1; - flex: 0 0 100%; - background-color: rgba(red, 0.1); } > .credit { - order: 3; - flex: 0 1 100%; - background-color: rgba(orange, 0.1); + } + } + + @media (min-width: 64em) { + .widget.social-proof { + min-height: 296px; } } } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 1844cb4..c72e0dc 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,25 +1,10 @@ -@import "color"; -$bp-s: 576px; -$bp-m: 768px; -$bp-l: 992px; -$bp-xl: 1200px; +$color--accent-500: #fc8d00; -// use with max- queries - so that min- and max- queries with equal -// breakpoints do not both evaluate to true -$bp-max-s: 575.98px; -$bp-max-m: 767.98px; -$bp-max-l: 991.98px; -$bp-max-xl: 1199.98px; +$color--neutral-900: #231f20; -$column-max-width: 1140px; -$line-height: 1.5; +$box-shadow-sk: 4px 4px 6px rgba(0, 10, 56, 0.15), -4px -4px 9px rgba(#fff, 0.75); +$border-radius: 6px; -$btn-border-radius: 12px; -$btn-border-width: 0; -$btn-border-color: currentColor; - -$color-body: $color__neutral-700; -$background-color: $color__white; diff --git a/src/scss/style.scss b/src/scss/style.scss index fa8e3ee..d418fa2 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,3 +1,4 @@ +@import "variables"; @import "hero"; @import "featured"; @import "feature-sunset"; @@ -52,9 +53,12 @@ body.rwavw-custom { } .wrapper-site > .wrapper-content > .widget { - margin-top: 44px; margin-bottom: 44px; + &:not(:first-child) { + margin-top: 44px; + } + &.rwavw-feature-details { @media (max-width: 64em) { margin-top: -44px;