From 27ca60215425140c92459c4f32104edcb7ff4459 Mon Sep 17 00:00:00 2001 From: Roland Schneider Date: Mon, 15 Sep 2025 09:02:08 +0200 Subject: [PATCH] [yoga-12] serviceList page improvements - improve block with right image - cleanup with gemini --- .../src/styles/block-with-right-image.scss | 394 ++++++++---------- 1 file changed, 176 insertions(+), 218 deletions(-) diff --git a/yoga-app/src/styles/block-with-right-image.scss b/yoga-app/src/styles/block-with-right-image.scss index 8399191..c845069 100644 --- a/yoga-app/src/styles/block-with-right-image.scss +++ b/yoga-app/src/styles/block-with-right-image.scss @@ -4,248 +4,206 @@ --y-block-with-right-image-spacing-image: 96px; --y-block-with-image-spacing-main: 66px; --y-block-with-right-image-top-spacing: 150px; + --y-box-border-radius: 200px; + --y-btn-font-size: 22px; + --y-btn-padding: 24px 44px; padding: 130px 0 45px; position: relative; -} - -.block_with_right_image_image img{ - max-width: 50%; - border-top-left-radius: 200px; - border-bottom-right-radius: 200px; - margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px; -} - -.block_with_right_image .block_with_image_box { - width: 100%; - background-color: var(--e-global-color-white); - border-radius: 200px 0 200px 0; - box-shadow: 1px 1px 50px rgb(0 0 0 / 7%); -} - -.block_with_right_image_content { - padding-top: var(--y-block-with-right-image-top-spacing); - padding-left: 96px; -} - -.block_with_right_image_content h5 { - text-transform: uppercase; - color: var(--e-global-color-secondary); - letter-spacing: 3.1px; - margin-bottom: 12px; -} - -.block_with_right_image_content h2 { - margin-bottom: 16px; - color: var(--e-global-color-primary); -} - -.block_with_right_image_content p { - margin-bottom: 32px; - color: var(--e-global-color-text); - padding-right: 25px; -} - -.block_with_right_image_content .btn_wrapper .read_more_btn { - font-size: 22px; - line-height: 22px; - font-weight: 500; - padding: 24px 44px; - text-align: center; - color: var(--e-global-color-white); - display: inline-block; - background-color: var(--e-global-color-secondary); - border-radius: 35px 0px 35px 0px; - transition: all 0.3s ease-in-out; - position: relative; - overflow: hidden; -} - -.block_with_right_image_content .btn_wrapper .read_more_btn:hover { - color: var(--e-global-color-accent); - background-color: var(--e-global-color-soft-orange); - transform: translateY(-10px); -} - -.block_with_right_image_content .btn_wrapper .read_more_btn:hover:before { - left: 0%; - right: auto; - width: 100%; -} - -.block_with_right_image_content .btn_wrapper .read_more_btn:before { - display: block; - position: absolute; - top: 0px; - right: 0px; - height: 100%; - width: 0px; - z-index: -1; - content: ''; - color: var(--e-global-color-accent); - background-color: var(--e-global-color-soft-orange); - transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s; -} - -.block_with_right_image .block_with_right_image_right_shape { - position: absolute; - top: 210px; - right: 0; -} - -.block_with_right_image_content { - p, h1, h2, h3, h4, h5 { - padding-right: var(--y-block-with-right-image-spacing-image); - padding-left: 0; + &_image img { + max-width: 50%; + border-top-left-radius: 200px; + border-bottom-right-radius: 200px; + margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px; } -} + .block_with_image_box { + width: 100%; + background-color: var(--e-global-color-white); + border-radius: var(--y-box-border-radius) 0 var(--y-box-border-radius) 0; + box-shadow: 1px 1px 50px rgb(0 0 0 / 7%); + } -@media screen and (max-width: 1440px) { - .block_with_right_image_content { + &_content { padding-top: var(--y-block-with-right-image-top-spacing); + padding-left: 96px; + + h5 { + text-transform: uppercase; + color: var(--e-global-color-secondary); + letter-spacing: 3.1px; + margin-bottom: 12px; + } + + h2 { + margin-bottom: 16px; + color: var(--e-global-color-primary); + } + + p { + margin-bottom: 32px; + color: var(--e-global-color-text); + padding-right: 25px; + } + + .btn_wrapper .read_more_btn { + font-size: var(--y-btn-font-size); + line-height: var(--y-btn-font-size); + font-weight: 500; + padding: var(--y-btn-padding); + text-align: center; + color: var(--e-global-color-white); + display: inline-block; + background-color: var(--e-global-color-secondary); + border-radius: 35px 0px 35px 0px; + transition: all 0.3s ease-in-out; + position: relative; + overflow: hidden; + + &:hover { + color: var(--e-global-color-accent); + background-color: var(--e-global-color-soft-orange); + transform: translateY(-10px); + + &::before { + left: 0%; + right: auto; + width: 100%; + } + } + + &::before { + display: block; + position: absolute; + top: 0px; + right: 0px; + height: 100%; + width: 0px; + z-index: -1; + content: ''; + color: var(--e-global-color-accent); + background-color: var(--e-global-color-soft-orange); + transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s; + } + } + + p, h1, h2, h3, h4, h5 { + padding-right: var(--y-block-with-right-image-spacing-image); + padding-left: 0; + } } - .block_with_right_image_section .block_with_right_image_right_shape { - top: 15px; + &_right_shape { + position: absolute; + top: 210px; + right: 0; } - .block_with_right_image_section .block_with_right_image_right_shape img { - width: 90px; - } - .block_with_right_image_image img{ - margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); - } -} -@media screen and (max-width: 1199px) { - .block_with_right_image_section { + @media screen and (max-width: 1440px) { + &_right_shape { + top: 15px; + img { + width: 90px; + } + } + &_image img { + margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); + } + } + + @media screen and (max-width: 1199px) { --y-block-with-right-image-top-spacing: 135px; + --y-btn-font-size: 20px; + --y-btn-padding: 22px 40px; padding: 100px 0 50px; + + &_content { + padding-left: 70px; + h5 { + margin-bottom: 8px; + } + h2 { + margin-bottom: 12px; + } + p { + margin-bottom: 28px; + padding-right: 18px; + } + } + &_right_shape { + display: none; + } + &_image img { + margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); + } } - .block_with_right_image_content { - padding-top: var(--y-block-with-right-image-top-spacing); - padding-left: 70px; - } - .block_with_right_image_content h5 { - margin-bottom: 8px; - } - .block_with_right_image_content h2 { - margin-bottom: 12px; - } - .block_with_right_image_content p { - margin-bottom: 28px; - padding-right: 18px; - } - .block_with_right_image_content .btn_wrapper .read_more_btn { - font-size: 20px; - line-height: 20px; - padding: 22px 40px; - } - .block_with_right_image_section .block_with_right_image_right_shape { - display: none; - } - - .block_with_right_image_image img{ - margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); - } -} - -@media screen and (max-width: 991px) { - .block_with_right_image_section { + @media screen and (max-width: 991px) { --y-block-with-right-image-top-spacing: 70px; - + --y-box-border-radius: 140px; + --y-btn-font-size: 18px; + --y-btn-padding: 20px 35px; padding: 70px 0 35px; - } - .block_with_right_image_section .block_with_image_box { - border-radius: 140px 0 140px 0; - } - .block_with_right_image_content { - padding-top: var(--y-block-with-right-image-top-spacing); - padding-left: 45px; - } - .block_with_right_image_content h5 { - margin-bottom: 5px; - } - .block_with_right_image_content h2 { - margin-bottom: 10px; - } - .block_with_right_image_content p { - margin-bottom: 22px; - padding-right: 0px; - } - .block_with_right_image_content .btn_wrapper .read_more_btn { - font-size: 18px; - line-height: 18px; - padding: 20px 35px; + &_content { + padding-left: 45px; + h5 { + margin-bottom: 5px; + } + h2 { + margin-bottom: 10px; + } + p { + margin-bottom: 22px; + padding-right: 0px; + } + } + &_image img { + margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); + } } - .block_with_right_image_image img{ - margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing)); - } - -} - -@media screen and (max-width: 767px) { - .block_with_right_image_section { + @media screen and (max-width: 767px) { --y-block-with-right-image-top-spacing: 60px; + --y-box-border-radius: 185px; + --y-btn-font-size: 16px; + --y-btn-padding: 18px 32px; padding: 60px 0 30px; - } - .block_with_right_image_section .block_with_image_box { - border-radius: 185px 0 185px 0; - } - .block_with_right_image_content { - padding-top: var(--y-block-with-right-image-top-spacing); - padding-left: 0; - text-align: center; - margin-bottom: 30px; - } - .block_with_right_image_content h2 { - margin-bottom: 8px; - } - .block_with_right_image_content p { - margin-bottom: 18px; - padding: 0 50px; - } - .block_with_right_image_content .btn_wrapper .read_more_btn { - font-size: 16px; - line-height: 16px; - padding: 18px 32px; + + &_content { + padding-left: 0; + text-align: center; + margin-bottom: 30px; + h2 { + margin-bottom: 8px; + } + p { + margin-bottom: 18px; + padding: 0 50px; + } + } + &_image img { + margin-top: 0; + max-width: 100%; + } } - .block_with_right_image_image img{ - margin-top: 0; - max-width: 100%; + @media screen and (max-width: 575px) { + --y-block-with-right-image-top-spacing: 50px; + --y-box-border-radius: 118px; + --y-btn-font-size: 14px; + --y-btn-padding: 16px 30px; + + &_content { + p { + margin-bottom: 15px; + padding: 0 10px; + } + } + &_image img { + margin-top: 0; + max-width: 100%; + } } } - -@media screen and (max-width: 575px) { - - .block_with_right_image_section { - --y-block-with-right-image-top-spacing: 50px; - } - - .block_with_right_image_section .block_with_image_box { - border-radius: 118px 0 118px 0; - } - .block_with_right_image_content { - padding-top: var(--y-block-with-right-image-top-spacing); - } - .block_with_right_image_content p { - margin-bottom: 15px; - padding: 0 10px; - } - .block_with_right_image_content .btn_wrapper .read_more_btn { - font-size: 14px; - line-height: 14px; - padding: 16px 30px; - } - - .block_with_right_image_image img{ - margin-top: 0; - max-width: 100%; - } - -} \ No newline at end of file