diff --git a/src/scss/_hero.scss b/src/scss/_hero.scss index c15abac..36b0dc4 100644 --- a/src/scss/_hero.scss +++ b/src/scss/_hero.scss @@ -3,6 +3,8 @@ body.rwavw-custom { height: 100vh; #home { + $shade-color: #000; + position: relative; width: 100%; height: 100%; @@ -13,9 +15,9 @@ body.rwavw-custom { align-items: center; padding: 96px 90px 90px !important; - text-shadow: 0 0 8em #000, - 0 0 2em rgba(#000, 0.57), - 0 0 0.5em rgba(#000, 0.1); + text-shadow: 0 0 8em $shade-color, + 0 0 2em rgba($shade-color, 0.57), + 0 0 0.5em rgba($shade-color, 0.1); &::before { content: ''; @@ -26,7 +28,22 @@ body.rwavw-custom { top: 0; left: 0; - background-color: rgba(#000, 0.2); + opacity: 0.5; + + background-color: rgba($shade-color, 0.2); + background: linear-gradient( + to bottom, + rgba($shade-color, 0.5), + rgba($shade-color, 0.5) 120px, + rgba($shade-color, 0.2) + ), + linear-gradient( + to top, + rgba($shade-color, 0.3), + rgba($shade-color, 0.3) 160px, + rgba($shade-color, 0) + ); + } > .section-top { @@ -101,6 +118,8 @@ body.rwavw-custom { .header-details { text-transform: none; + text-shadow: 0 0 1.5em $shade-color, + 0 0 1em rgba($shade-color, 0.6); } } @@ -135,10 +154,24 @@ body.rwavw-custom { #home { padding: 55px 11px 55px !important; + > .section-cols { + > .pure-g { + justify-content: space-around; + } + } + h1 { + margin: 77px 0 55px; font-size: 90px; } + p { + font-size: 22px; + font-weight: 400; + line-height: 1.2; + margin-bottom: 22px; + } + .hero-cta { margin: 66px 0 66px; flex-direction: row;