X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/eb2eb95bfbfe8c777c4192ea434a0e999edf3a51..6407cf24cd6cf3f9ea6fdf4a8924dad109a590e6:/src/wolnelektury/static/2022/styles/components/_support.scss diff --git a/src/wolnelektury/static/2022/styles/components/_support.scss b/src/wolnelektury/static/2022/styles/components/_support.scss index 4f0ce2b15..413269849 100644 --- a/src/wolnelektury/static/2022/styles/components/_support.scss +++ b/src/wolnelektury/static/2022/styles/components/_support.scss @@ -1,53 +1,77 @@ +$green: #96C13D; +$teal: #007880; +$darkteal: #083F4D; + + .c-support { display: flex; + flex-direction: column-reverse; margin-top: 50px; - background: #FFF1BF url(../images/bg.png) top center no-repeat; + background: $darkteal; border-radius: 15px; overflow: hidden; justify-content: center; - align-items: center; + align-items: stretch; + @include rwd($break-flow) { + flex-direction: row; + } + h2 { - padding-left: 44px; - padding-right: 20px; - margin: 0 auto; + margin: 0 auto 35px; font-style: italic; - font-weight: 300; - font-size: 48px; - line-height: 72px; + font-weight: 400; + font-size: 34px; + line-height: 47px; letter-spacing: -0.02em; - color: #333333; + color: #ffffff; + + span { + color: $green; + } } - figure { - margin: 0; - font-size: 0; - position: relative; + div { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px 30px 30px; + } + + .bg { + flex-basis: 193px; + flex-grow: 0; + flex-shrink: 0; + background-image: url('/static/2022/images/dziecko.jpeg'); + background-size: cover; + background-position: 50% 20%; + + @include rwd($break-flow) { + flex-basis: 270px; + } } a { - bottom: 34px; - left: 0; right: 0; width: 100%; - margin: 0 auto; - max-width: 343px; - position: absolute; font-weight: 600; font-size: 22px; line-height: 28px; - color: #333333; + color: $darkteal; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 22px 14px 28px; - background: #FFF1BF; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); + background: $color-yellow; border-radius: 5px; transition: all $ease-dynamic 350ms; &:hover { - background: $color-yellow; + background: $green; } } } + +.c-support__content { + padding: 16px 32px 30px 32px; +}