From b0a9279f5fff94b5d4034c4ea96dce2af0d19d21 Mon Sep 17 00:00:00 2001 From: "davyd.burianuvatyi@ua.nestle.com" <venia7vedmak@gmail.com> Date: Wed, 10 May 2023 15:22:10 +0300 Subject: [PATCH] Create Cards variations --- assets/css/lb-cards-chevron.css | 116 +++++++++++ assets/css/lb-cards-color.css | 93 +++++++++ assets/css/lb-cards-overlay.css | 116 +++++++++++ assets/css/lb-cards.css | 136 ++++++------- assets/scss/lb-cards-chevron.scss | 182 ++++++++++++++++++ assets/scss/lb-cards-color.scss | 148 ++++++++++++++ assets/scss/lb-cards-overlay.scss | 178 +++++++++++++++++ assets/scss/lb-cards.scss | 164 ++++++++++------ lb_cards.libraries.yml | 23 ++- lb_cards.module | 14 +- lb_cards.ws_style.yml | 7 + lb_cards.ws_style_option.yml | 26 +++ package.json | 2 +- ...ock--lb-cards--variation-chevron.html.twig | 129 +++++++++++++ ...block--lb-cards--variation-color.html.twig | 124 ++++++++++++ ...ock--lb-cards--variation-overlay.html.twig | 124 ++++++++++++ templates/block--lb-cards.html.twig | 15 +- templates/chevron.html.twig | 10 + 18 files changed, 1467 insertions(+), 140 deletions(-) create mode 100644 assets/css/lb-cards-chevron.css create mode 100644 assets/css/lb-cards-color.css create mode 100644 assets/css/lb-cards-overlay.css create mode 100644 assets/scss/lb-cards-chevron.scss create mode 100644 assets/scss/lb-cards-color.scss create mode 100644 assets/scss/lb-cards-overlay.scss create mode 100644 lb_cards.ws_style.yml create mode 100644 lb_cards.ws_style_option.yml create mode 100644 templates/block--lb-cards--variation-chevron.html.twig create mode 100644 templates/block--lb-cards--variation-color.html.twig create mode 100644 templates/block--lb-cards--variation-overlay.html.twig create mode 100644 templates/chevron.html.twig diff --git a/assets/css/lb-cards-chevron.css b/assets/css/lb-cards-chevron.css new file mode 100644 index 0000000..28cbc83 --- /dev/null +++ b/assets/css/lb-cards-chevron.css @@ -0,0 +1,116 @@ +:root { + --ylb-color-btn-grey: #636466; } + +.block-lb-cards-chevron .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; } + .block-lb-cards-chevron .section-description h2 { + font-size: 50px; + line-height: 65px; } + .block-lb-cards-chevron .section-description p { + font-size: 24px; + line-height: 36px; } + +.block-lb-cards-chevron .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + color: var(--ylb-color-white); + padding: 9px 20px; } + .block-lb-cards-chevron .btn:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); } + +.block-lb-cards-chevron .row-cards .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; } + .block-lb-cards-chevron .row-cards .card h3 { + font-size: 32px; + line-height: 32px; } + .block-lb-cards-chevron .row-cards .card .card-img-wrapper { + position: relative; } + .block-lb-cards-chevron .row-cards .card .card-img-wrapper .chevron { + height: 100%; + width: 100%; + top: 0; + transform: scale(1.01); + left: -25%; + position: absolute; } + .block-lb-cards-chevron .row-cards .card .card-img-wrapper .chevron svg { + height: 100%; + width: 100%; } + .block-lb-cards-chevron .row-cards .card .card-img-wrapper .img-container { + padding: 15px; + position: relative; + height: 100%; } + @media (min-width: 400px) { + .block-lb-cards-chevron .row-cards .card .card-img-wrapper .img-container { + padding: 20px; } } + .block-lb-cards-chevron .row-cards .card .card-img-wrapper img { + min-height: 170px; + border-radius: 10px; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; } + .block-lb-cards-chevron .row-cards .card .card-content { + gap: 25px; + padding: 20px; } + .block-lb-cards-chevron .row-cards .card .card-content .card-header { + border: none; + padding: 0; + background-color: transparent; } + .block-lb-cards-chevron .row-cards .card .card-content .card-header .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-dark-grey); + width: -moz-fit-content; + width: fit-content; } + .block-lb-cards-chevron .row-cards .card .card-content .card-body .card-heading { + margin-bottom: 25px; + color: #231F20; } + .block-lb-cards-chevron .row-cards .card .card-content .card-text { + font-size: 18px; + line-height: 28px; } + +@media (min-width: 992px) { + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card { + flex-direction: row; + height: 390px; } + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content { + flex: 1; } + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content .card-body { + flex: unset; } + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-img-wrapper { + height: unset; + width: 49%; } + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-img-wrapper img { + width: 100%; } } + +@media (min-width: 1200px) { + .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content { + padding: 40px 35px 40px 40px; } } + +@media (min-width: 1060px) { + .block-lb-cards-chevron .row-cards.row-cols-lg-2 .card .card-img-wrapper { + height: 400px; } + .block-lb-cards-chevron .row-cards.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; } + .block-lb-cards-chevron .row-cards.row-cols-lg-3 .card .card-img-wrapper .chevron { + left: -15%; } + .block-lb-cards-chevron .row-cards.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; } + .block-lb-cards-chevron .row-cards.row-cols-lg-4 .card .card-img-wrapper .img-container { + padding: 15px; } } + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLWNoZXZyb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkJBQTZCLEVBQUU7O0FBRWpDO0VBQ0UsaUNBQWlDO0VBQ2pDLG1CQUFtQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLGtCQUFrQjtFQUNsQixlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLFlBQVk7RUFDWixrRUFBa0U7RUFDbEUsNkJBQTZCO0VBQzdCLGlCQUFpQixFQUFFO0VBQ25CO0lBQ0UsdUNBQXVDO0lBQ3ZDLG1DQUFtQyxFQUFFOztBQUV6QztFQUNFLG1CQUFtQjtFQUNuQiwwQ0FBMEM7RUFDMUMsWUFBWTtFQUNaLGlDQUFpQztFQUNqQyxnQkFBZ0IsRUFBRTtFQUNsQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0UsWUFBWTtNQUNaLFdBQVc7TUFDWCxNQUFNO01BQ04sc0JBQXNCO01BQ3RCLFVBQVU7TUFDVixrQkFBa0IsRUFBRTtNQUNwQjtRQUNFLFlBQVk7UUFDWixXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLFlBQVksRUFBRTtNQUNkO1FBQ0U7VUFDRSxhQUFhLEVBQUUsRUFBRTtJQUN2QjtNQUNFLGlCQUFpQjtNQUNqQixtQkFBbUI7TUFDbkIsWUFBWTtNQUNaLFdBQVc7TUFDWCxvQkFBaUI7U0FBakIsaUJBQWlCLEVBQUU7RUFDdkI7SUFDRSxTQUFTO0lBQ1QsYUFBYSxFQUFFO0lBQ2Y7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QixFQUFFO01BQy9CO1FBQ0Usd0NBQXdDO1FBQ3hDLGVBQWU7UUFDZixpQkFBaUI7UUFDakIseUJBQXlCO1FBQ3pCLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLGlDQUFpQztRQUNqQyx1QkFBa0I7UUFBbEIsa0JBQWtCLEVBQUU7SUFDeEI7TUFDRSxtQkFBbUI7TUFDbkIsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7SUFDZjtNQUNFLFVBQVUsRUFBRTtFQUNoQjtJQUNFLGFBQWEsRUFBRTtJQUNmO01BQ0UsYUFBYSxFQUFFLEVBQUUiLCJmaWxlIjoibGItY2FyZHMtY2hldnJvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5zZWN0aW9uLWRlc2NyaXB0aW9uIHtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBtYXJnaW4tYm90dG9tOiA1MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5zZWN0aW9uLWRlc2NyaXB0aW9uIGgyIHtcbiAgICBmb250LXNpemU6IDUwcHg7XG4gICAgbGluZS1oZWlnaHQ6IDY1cHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5idG4ge1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGZvbnQtc2l6ZTogMjRweDtcbiAgbGluZS1oZWlnaHQ6IDMwcHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQYXJ0bmVyQ29sb3IsIHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSkpO1xuICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgcGFkZGluZzogOXB4IDIwcHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLmJ0bjpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0teWxiLWNvbG9yLWdyZXkpO1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0teWxiLWNvbG9yLWdyZXkpOyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgaDMge1xuICAgIGZvbnQtc2l6ZTogMzJweDtcbiAgICBsaW5lLWhlaWdodDogMzJweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIC5jaGV2cm9uIHtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgdG9wOiAwO1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAxKTtcbiAgICAgIGxlZnQ6IC0yNSU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmNoZXZyb24gc3ZnIHtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICB3aWR0aDogMTAwJTsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgcGFkZGluZzogMTVweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTsgfVxuICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDQwMHB4KSB7XG4gICAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgICAgIHBhZGRpbmc6IDIwcHg7IH0gfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgIG1pbi1oZWlnaHQ6IDE3MHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBnYXA6IDI1cHg7XG4gICAgcGFkZGluZzogMjBweDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1oZWFkZXIge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkgLmNhcmQtaGVhZGluZyB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAyNXB4O1xuICAgICAgY29sb3I6ICMyMzFGMjA7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtdGV4dCB7XG4gICAgICBmb250LXNpemU6IDE4cHg7XG4gICAgICBsaW5lLWhlaWdodDogMjhweDsgfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogOTkycHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzkwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgICBmbGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IHtcbiAgICAgICAgZmxleDogdW5zZXQ7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciBpbWcge1xuICAgICAgICB3aWR0aDogMTAwJTsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgIHBhZGRpbmc6IDQwcHggMzVweCA0MHB4IDQwcHg7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTA2MHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiA0MDBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjcwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmNoZXZyb24ge1xuICAgICAgbGVmdDogLTE1JTsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgcGFkZGluZzogMTVweDsgfSB9XG4iXX0= */ \ No newline at end of file diff --git a/assets/css/lb-cards-color.css b/assets/css/lb-cards-color.css new file mode 100644 index 0000000..eeca40e --- /dev/null +++ b/assets/css/lb-cards-color.css @@ -0,0 +1,93 @@ +:root { + --ylb-color-btn-grey: #636466; } + +.block-lb-cards-color .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; } + .block-lb-cards-color .section-description h2 { + font-size: 50px; + line-height: 65px; } + .block-lb-cards-color .section-description p { + font-size: 24px; + line-height: 36px; } + +.block-lb-cards-color .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--ylb-color-white); + color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + padding: 9px 20px; } + .block-lb-cards-color .btn:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); } + +.block-lb-cards-color .row-cards .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; } + .block-lb-cards-color .row-cards .card h3 { + font-size: 32px; + line-height: 32px; } + .block-lb-cards-color .row-cards .card .card-img-wrapper img { + min-height: 200px; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; } + .block-lb-cards-color .row-cards .card .card-content { + gap: 25px; + padding: 20px; + background-color: var(--wsPrimaryColor, #fff); } + .block-lb-cards-color .row-cards .card .card-content .card-header { + border: none; + padding: 0; + background-color: transparent; } + .block-lb-cards-color .row-cards .card .card-content .card-header .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-white); + width: -moz-fit-content; + width: fit-content; } + .block-lb-cards-color .row-cards .card .card-content .card-body .card-heading { + margin-bottom: 25px; + color: var(--ylb-color-white); } + .block-lb-cards-color .row-cards .card .card-content .card-text { + font-size: 18px; + line-height: 28px; } + +@media (min-width: 992px) { + .block-lb-cards-color .row-cards.row-cols-lg-1 .card { + flex-direction: row; + height: 360px; } + .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content { + flex: 1; } + .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content .card-body { + flex: unset; } + .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-img-wrapper { + height: unset; + width: 49%; } + .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-img-wrapper img { + width: 100%; } } + +@media (min-width: 1200px) { + .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content { + padding: 40px 35px 40px 40px; } } + +@media (min-width: 1060px) { + .block-lb-cards-color .row-cards.row-cols-lg-2 .card .card-img-wrapper { + height: 360px; } + .block-lb-cards-color .row-cards.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; } + .block-lb-cards-color .row-cards.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; } } + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLWNvbG9yLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixZQUFZO0VBQ1osd0NBQXdDO0VBQ3hDLHVEQUF1RDtFQUN2RCxpQkFBaUIsRUFBRTtFQUNuQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxtQkFBbUI7RUFDbkIsMENBQTBDO0VBQzFDLFlBQVk7RUFDWixpQ0FBaUM7RUFDakMsZ0JBQWdCLEVBQUU7RUFDbEI7SUFDRSxlQUFlO0lBQ2YsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxpQkFBaUI7SUFDakIsWUFBWTtJQUNaLFdBQVc7SUFDWCxvQkFBaUI7T0FBakIsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxTQUFTO0lBQ1QsYUFBYTtJQUNiLDZDQUE2QyxFQUFFO0lBQy9DO01BQ0UsWUFBWTtNQUNaLFVBQVU7TUFDViw2QkFBNkIsRUFBRTtNQUMvQjtRQUNFLHdDQUF3QztRQUN4QyxlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLHlCQUF5QjtRQUN6QixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQiw2QkFBNkI7UUFDN0IsdUJBQWtCO1FBQWxCLGtCQUFrQixFQUFFO0lBQ3hCO01BQ0UsbUJBQW1CO01BQ25CLDZCQUE2QixFQUFFO0lBQ2pDO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy1jb2xvci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jb2xvciAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jb2xvciAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIGNvbG9yOiB2YXIoLS13c1BhcnRuZXJDb2xvciwgdmFyKC0teWxiLWNvbG9yLWJ0bi1ncmV5KSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAuYnRuOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7IH1cblxuLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICBtaW4taGVpZ2h0OiAyMDBweDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgZ2FwOiAyNXB4O1xuICAgIHBhZGRpbmc6IDIwcHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQcmltYXJ5Q29sb3IsICNmZmYpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1oZWFkZXIge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciAuY2F0ZWdvcnktdGFnIHtcbiAgICAgICAgZm9udC1mYW1pbHk6IFZlcmRhbmEsIEdlbmV2YSwgc2Fucy1zZXJpZjtcbiAgICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICAgICAgbWluLWhlaWdodDogMTdweDtcbiAgICAgICAgcGFkZGluZzogMnB4IDRweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IC5jYXJkLWhlYWRpbmcge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC10ZXh0IHtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzYwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgICAgZmxleDogMTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkge1xuICAgICAgICBmbGV4OiB1bnNldDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTIwMHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0zIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDI3MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH0gfVxuIl19 */ \ No newline at end of file diff --git a/assets/css/lb-cards-overlay.css b/assets/css/lb-cards-overlay.css new file mode 100644 index 0000000..9a732e4 --- /dev/null +++ b/assets/css/lb-cards-overlay.css @@ -0,0 +1,116 @@ +:root { + --ylb-color-btn-grey: #636466; } + +.block-lb-cards-overlay .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; } + .block-lb-cards-overlay .section-description h2 { + font-size: 50px; + line-height: 65px; } + .block-lb-cards-overlay .section-description p { + font-size: 24px; + line-height: 36px; } + +.block-lb-cards-overlay .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--ylb-color-white); + color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + padding: 9px 20px; } + .block-lb-cards-overlay .btn:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); } + +.block-lb-cards-overlay .row-cards .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; } + .block-lb-cards-overlay .row-cards .card h3 { + font-size: 32px; + line-height: 32px; } + .block-lb-cards-overlay .row-cards .card .card-img-wrapper { + position: relative; } + .block-lb-cards-overlay .row-cards .card .card-img-wrapper:after { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 1; + content: ''; + background: linear-gradient(180deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%); } + .block-lb-cards-overlay .row-cards .card .card-img-wrapper img { + min-height: 230px; + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; } + .block-lb-cards-overlay .row-cards .card .card-content { + gap: 25px; + padding: 0 20px 20px; + margin-top: -55px; + background-color: var(--wsPrimaryColor); } + .block-lb-cards-overlay .row-cards .card .card-content .card-header { + border: none; + padding: 0; + background-color: transparent; + z-index: 1; } + .block-lb-cards-overlay .row-cards .card .card-content .card-header .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-white); + width: -moz-fit-content; + width: fit-content; } + .block-lb-cards-overlay .row-cards .card .card-content .card-body { + z-index: 1; } + .block-lb-cards-overlay .row-cards .card .card-content .card-body .card-heading { + margin-bottom: 25px; + color: var(--ylb-color-white); } + .block-lb-cards-overlay .row-cards .card .card-content .card-text { + color: var(--ylb-color-white); + font-size: 18px; + line-height: 28px; } + +@media (min-width: 992px) { + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card { + flex-direction: row; + height: 360px; } + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content { + flex: 1; + padding: 20px; + margin-top: 0; } + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content .card-body { + flex: unset; } + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper { + height: unset; + width: 49%; } + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper:after { + opacity: 1; + background: linear-gradient(90deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%); } + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper img { + width: 100%; } } + +@media (min-width: 1200px) { + .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content { + padding: 40px 35px 40px 40px; } } + +@media (min-width: 1060px) { + .block-lb-cards-overlay .row-cards.row-cols-lg-2 .card .card-img-wrapper { + height: 415px; } + .block-lb-cards-overlay .row-cards.row-cols-lg-2 .card .card-content { + margin-top: 0; } + .block-lb-cards-overlay .row-cards.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; } + .block-lb-cards-overlay .row-cards.row-cols-lg-4 .card .card-img-wrapper { + height: 230px; } } + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLW92ZXJsYXkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkJBQTZCLEVBQUU7O0FBRWpDO0VBQ0UsaUNBQWlDO0VBQ2pDLG1CQUFtQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLGtCQUFrQjtFQUNsQixlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLFlBQVk7RUFDWix3Q0FBd0M7RUFDeEMsdURBQXVEO0VBQ3ZELGlCQUFpQixFQUFFO0VBQ25CO0lBQ0UsdUNBQXVDO0lBQ3ZDLG1DQUFtQyxFQUFFOztBQUV6QztFQUNFLG1CQUFtQjtFQUNuQiwwQ0FBMEM7RUFDMUMsWUFBWTtFQUNaLGlDQUFpQztFQUNqQyxnQkFBZ0IsRUFBRTtFQUNsQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0Usa0JBQWtCO01BQ2xCLE9BQU87TUFDUCxRQUFRO01BQ1IsU0FBUztNQUNULE1BQU07TUFDTixVQUFVO01BQ1YsV0FBVztNQUNYLHNKQUFzSixFQUFFO0lBQzFKO01BQ0UsaUJBQWlCO01BQ2pCLFlBQVk7TUFDWixXQUFXO01BQ1gsb0JBQWlCO1NBQWpCLGlCQUFpQixFQUFFO0VBQ3ZCO0lBQ0UsU0FBUztJQUNULG9CQUFvQjtJQUNwQixpQkFBaUI7SUFDakIsdUNBQXVDLEVBQUU7SUFDekM7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QjtNQUM3QixVQUFVLEVBQUU7TUFDWjtRQUNFLHdDQUF3QztRQUN4QyxlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLHlCQUF5QjtRQUN6QixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQiw2QkFBNkI7UUFDN0IsdUJBQWtCO1FBQWxCLGtCQUFrQixFQUFFO0lBQ3hCO01BQ0UsVUFBVSxFQUFFO01BQ1o7UUFDRSxtQkFBbUI7UUFDbkIsNkJBQTZCLEVBQUU7SUFDbkM7TUFDRSw2QkFBNkI7TUFDN0IsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTztNQUNQLGFBQWE7TUFDYixhQUFhLEVBQUU7TUFDZjtRQUNFLFdBQVcsRUFBRTtJQUNqQjtNQUNFLGFBQWE7TUFDYixVQUFVLEVBQUU7TUFDWjtRQUNFLFVBQVU7UUFDVixxSkFBcUosRUFBRTtNQUN6SjtRQUNFLFdBQVcsRUFBRSxFQUFFOztBQUV2QjtFQUNFO0lBQ0UsNEJBQTRCLEVBQUUsRUFBRTs7QUFFcEM7RUFDRTtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRSxFQUFFIiwiZmlsZSI6ImxiLWNhcmRzLW92ZXJsYXkuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xuICAtLXlsYi1jb2xvci1idG4tZ3JleTogIzYzNjQ2NjsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuc2VjdGlvbi1kZXNjcmlwdGlvbiBoMiB7XG4gICAgZm9udC1zaXplOiA1MHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA2NXB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5zZWN0aW9uLWRlc2NyaXB0aW9uIHAge1xuICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICBsaW5lLWhlaWdodDogMzZweDsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIGNvbG9yOiB2YXIoLS13c1BhcnRuZXJDb2xvciwgdmFyKC0teWxiLWNvbG9yLWJ0bi1ncmV5KSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5idG46aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIHtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgYm94LXNoYWRvdzogMCAwIDEwcHggMCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICBib3JkZXI6IG5vbmU7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlcjphZnRlciB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBib3R0b206IDA7XG4gICAgICB0b3A6IDA7XG4gICAgICB6LWluZGV4OiAxO1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTgwZGVnLCByZ2JhKHZhcigtLXdzVGVydGlhcnlDb2xvclJHQiksIDAuMSkgMC4xJSwgcmdiYSh2YXIoLS13c1ByaW1hcnlDb2xvclJHQiksIDAuNzIpIDY0LjklLCB2YXIoLS13c1ByaW1hcnlDb2xvcikgMTAwJSk7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIGltZyB7XG4gICAgICBtaW4taGVpZ2h0OiAyMzBweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBnYXA6IDI1cHg7XG4gICAgcGFkZGluZzogMCAyMHB4IDIwcHg7XG4gICAgbWFyZ2luLXRvcDogLTU1cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQcmltYXJ5Q29sb3IpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICAgICAgICB3aWR0aDogZml0LWNvbnRlbnQ7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSB7XG4gICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSAuY2FyZC1oZWFkaW5nIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgICAgY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtdGV4dCB7XG4gICAgICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQge1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICAgIGZsZXg6IDE7XG4gICAgICBwYWRkaW5nOiAyMHB4O1xuICAgICAgbWFyZ2luLXRvcDogMDsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSB7XG4gICAgICAgIGZsZXg6IHVuc2V0OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICAgIGhlaWdodDogdW5zZXQ7XG4gICAgICB3aWR0aDogNDklOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXI6YWZ0ZXIge1xuICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEodmFyKC0td3NUZXJ0aWFyeUNvbG9yUkdCKSwgMC4xKSAwLjElLCByZ2JhKHZhcigtLXdzUHJpbWFyeUNvbG9yUkdCKSwgMC43MikgNjQuOSUsIHZhcigtLXdzUHJpbWFyeUNvbG9yKSAxMDAlKTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIGltZyB7XG4gICAgICAgIHdpZHRoOiAxMDAlOyB9IH1cblxuQG1lZGlhIChtaW4td2lkdGg6IDEyMDBweCkge1xuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0yIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDQxNXB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBtYXJnaW4tdG9wOiAwOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAyNzBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjMwcHg7IH0gfVxuIl19 */ \ No newline at end of file diff --git a/assets/css/lb-cards.css b/assets/css/lb-cards.css index be1ea23..c496d59 100644 --- a/assets/css/lb-cards.css +++ b/assets/css/lb-cards.css @@ -1,90 +1,92 @@ :root { --ylb-color-btn-grey: #636466; } -.block-lb-cards .section-description { +.block-lb-cards-standard .section-description { color: var(--ylb-color-dark-grey); margin-bottom: 50px; } - .block-lb-cards .section-description h2 { + .block-lb-cards-standard .section-description h2 { font-size: 50px; line-height: 65px; } - .block-lb-cards .section-description p { + .block-lb-cards-standard .section-description p { font-size: 24px; line-height: 36px; } -.block-lb-cards .btn { +.block-lb-cards-standard .btn { border-radius: 8px; font-size: 24px; line-height: 30px; - border-color: var(--ylb-color-btn-grey); - background-color: var(--ylb-color-btn-grey); + border: none; + background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); color: var(--ylb-color-white); - padding: 10px 34px; } - .block-lb-cards .btn:hover { + padding: 9px 20px; } + .block-lb-cards-standard .btn:hover { background-color: var(--ylb-color-grey); border-color: var(--ylb-color-grey); } -.block-lb-cards .card { - border-radius: 8px; - color: var(--ylb-color-white); - background-color: var(--ylb-color-dark-grey); } - .block-lb-cards .card h3 { +.block-lb-cards-standard .row-cards .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; } + .block-lb-cards-standard .row-cards .card h3 { font-size: 32px; line-height: 32px; } - -.block-lb-cards .card-header { - border: none; - background-color: transparent; } - .block-lb-cards .card-header .category-tag { - font-family: Verdana, Geneva, sans-serif; - font-size: 14px; - line-height: 17px; - text-transform: uppercase; - min-height: 17px; } - -.block-lb-cards .card-text { - font-size: 18px; - line-height: 28px; } - -.block-lb-cards .card-content { - padding: 18px 10px; } + .block-lb-cards-standard .row-cards .card .card-img-wrapper img { + height: 100%; + min-height: 200px; + width: 100%; + -o-object-fit: cover; + object-fit: cover; } + .block-lb-cards-standard .row-cards .card .card-content { + gap: 25px; + padding: 20px; } + .block-lb-cards-standard .row-cards .card .card-content .card-header { + border: none; + padding: 0; + background-color: transparent; } + .block-lb-cards-standard .row-cards .card .card-content .card-header .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-dark-grey); + width: -moz-fit-content; + width: fit-content; } + .block-lb-cards-standard .row-cards .card .card-content .card-body .card-heading { + margin-bottom: 25px; + color: #231F20; } + .block-lb-cards-standard .row-cards .card .card-content .card-text { + font-size: 18px; + line-height: 28px; } @media (min-width: 992px) { - .block-lb-cards .row-cols-md-1 .card { - flex-direction: row; } - .block-lb-cards .row-cols-md-1 .card img { - width: 33%; } } + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card { + flex-direction: row; + height: 360px; } + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content { + flex: 1; } + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content .card-body { + flex: unset; } + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-img-wrapper { + height: unset; + width: 49%; } + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-img-wrapper img { + width: 100%; } } -.block-lb-cards .row-cols-md-2 .card, -.block-lb-cards .row-cols-md-3 .card, -.block-lb-cards .row-cols-md-4 .card { - position: relative; - overflow: hidden; } - .block-lb-cards .row-cols-md-2 .card:before, - .block-lb-cards .row-cols-md-3 .card:before, - .block-lb-cards .row-cols-md-4 .card:before { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(35, 31, 32, 0.6); - z-index: 1; } - .block-lb-cards .row-cols-md-2 .card img, - .block-lb-cards .row-cols-md-3 .card img, - .block-lb-cards .row-cols-md-4 .card img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 0; } - .block-lb-cards .row-cols-md-2 .card .card-content, - .block-lb-cards .row-cols-md-3 .card .card-content, - .block-lb-cards .row-cols-md-4 .card .card-content { - z-index: 2; } +@media (min-width: 1200px) { + .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content { + padding: 40px 35px 40px 40px; } } + +@media (min-width: 1060px) { + .block-lb-cards-standard .row-cards.row-cols-lg-2 .card .card-img-wrapper { + height: 360px; } + .block-lb-cards-standard .row-cards.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; } + .block-lb-cards-standard .row-cards.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; } } -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQix1Q0FBdUM7RUFDdkMsMkNBQTJDO0VBQzNDLDZCQUE2QjtFQUM3QixrQkFBa0IsRUFBRTtFQUNwQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxrQkFBa0I7RUFDbEIsNkJBQTZCO0VBQzdCLDRDQUE0QyxFQUFFO0VBQzlDO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLFlBQVk7RUFDWiw2QkFBNkIsRUFBRTtFQUMvQjtJQUNFLHdDQUF3QztJQUN4QyxlQUFlO0lBQ2YsaUJBQWlCO0lBQ2pCLHlCQUF5QjtJQUN6QixnQkFBZ0IsRUFBRTs7QUFFdEI7RUFDRSxlQUFlO0VBQ2YsaUJBQWlCLEVBQUU7O0FBRXJCO0VBQ0Usa0JBQWtCLEVBQUU7O0FBRXRCO0VBQ0U7SUFDRSxtQkFBbUIsRUFBRTtJQUNyQjtNQUNFLFVBQVUsRUFBRSxFQUFFOztBQUVwQjs7O0VBR0Usa0JBQWtCO0VBQ2xCLGdCQUFnQixFQUFFO0VBQ2xCOzs7SUFHRSxXQUFXO0lBQ1gsY0FBYztJQUNkLGtCQUFrQjtJQUNsQixXQUFXO0lBQ1gsWUFBWTtJQUNaLE1BQU07SUFDTixPQUFPO0lBQ1AsUUFBUTtJQUNSLFNBQVM7SUFDVCx1Q0FBdUM7SUFDdkMsVUFBVSxFQUFFO0VBQ2Q7OztJQUdFLGtCQUFrQjtJQUNsQixNQUFNO0lBQ04sT0FBTztJQUNQLFFBQVE7SUFDUixTQUFTO0lBQ1QsVUFBVSxFQUFFO0VBQ2Q7OztJQUdFLFVBQVUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcyAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcyAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSk7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICBwYWRkaW5nOiAxMHB4IDM0cHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzIC5idG46aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTsgfVxuICAuYmxvY2stbGItY2FyZHMgLmNhcmQgaDMge1xuICAgIGZvbnQtc2l6ZTogMzJweDtcbiAgICBsaW5lLWhlaWdodDogMzJweDsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQtaGVhZGVyIHtcbiAgYm9yZGVyOiBub25lO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsgfVxuICAuYmxvY2stbGItY2FyZHMgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgIGZvbnQtZmFtaWx5OiBWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWY7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAxN3B4O1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgbWluLWhlaWdodDogMTdweDsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQtdGV4dCB7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgbGluZS1oZWlnaHQ6IDI4cHg7IH1cblxuLmJsb2NrLWxiLWNhcmRzIC5jYXJkLWNvbnRlbnQge1xuICBwYWRkaW5nOiAxOHB4IDEwcHg7IH1cblxuQG1lZGlhIChtaW4td2lkdGg6IDk5MnB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMSAuY2FyZCB7XG4gICAgZmxleC1kaXJlY3Rpb246IHJvdzsgfVxuICAgIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMSAuY2FyZCBpbWcge1xuICAgICAgd2lkdGg6IDMzJTsgfSB9XG5cbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMiAuY2FyZCxcbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMyAuY2FyZCxcbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjsgfVxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTIgLmNhcmQ6YmVmb3JlLFxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTMgLmNhcmQ6YmVmb3JlLFxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTQgLmNhcmQ6YmVmb3JlIHtcbiAgICBjb250ZW50OiBcIlwiO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgYm90dG9tOiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMzUsIDMxLCAzMiwgMC42KTtcbiAgICB6LWluZGV4OiAxOyB9XG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMiAuY2FyZCBpbWcsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMyAuY2FyZCBpbWcsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCBpbWcge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgICBib3R0b206IDA7XG4gICAgei1pbmRleDogMDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTIgLmNhcmQgLmNhcmQtY29udGVudCxcbiAgLmJsb2NrLWxiLWNhcmRzIC5yb3ctY29scy1tZC0zIC5jYXJkIC5jYXJkLWNvbnRlbnQsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICB6LWluZGV4OiAyOyB9XG4iXX0= */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixZQUFZO0VBQ1osa0VBQWtFO0VBQ2xFLDZCQUE2QjtFQUM3QixpQkFBaUIsRUFBRTtFQUNuQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxtQkFBbUI7RUFDbkIsMENBQTBDO0VBQzFDLFlBQVk7RUFDWixpQ0FBaUM7RUFDakMsZ0JBQWdCLEVBQUU7RUFDbEI7SUFDRSxlQUFlO0lBQ2YsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxZQUFZO0lBQ1osaUJBQWlCO0lBQ2pCLFdBQVc7SUFDWCxvQkFBaUI7T0FBakIsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxTQUFTO0lBQ1QsYUFBYSxFQUFFO0lBQ2Y7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QixFQUFFO01BQy9CO1FBQ0Usd0NBQXdDO1FBQ3hDLGVBQWU7UUFDZixpQkFBaUI7UUFDakIseUJBQXlCO1FBQ3pCLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLGlDQUFpQztRQUNqQyx1QkFBa0I7UUFBbEIsa0JBQWtCLEVBQUU7SUFDeEI7TUFDRSxtQkFBbUI7TUFDbkIsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdzUGFydG5lckNvbG9yLCB2YXIoLS15bGItY29sb3ItYnRuLWdyZXkpKTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuYnRuOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7IH1cblxuLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWluLWhlaWdodDogMjAwcHg7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgZ2FwOiAyNXB4O1xuICAgIHBhZGRpbmc6IDIwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IC5jYXJkLWhlYWRpbmcge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgIGNvbG9yOiAjMjMxRjIwOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC10ZXh0IHtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzYwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgICAgZmxleDogMTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkge1xuICAgICAgICBmbGV4OiB1bnNldDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTIwMHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0zIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDI3MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH0gfVxuIl19 */ \ No newline at end of file diff --git a/assets/scss/lb-cards-chevron.scss b/assets/scss/lb-cards-chevron.scss new file mode 100644 index 0000000..e885627 --- /dev/null +++ b/assets/scss/lb-cards-chevron.scss @@ -0,0 +1,182 @@ +@import "_functions"; +@import "_mixins"; +@import "_variables"; + +:root { + --ylb-color-btn-grey: #636466; +} + +.block-lb-cards-chevron { + .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; + + h2 { + font-size: 50px; + line-height: 65px; + } + + p { + font-size: 24px; + line-height: 36px; + } + } + + .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + color: var(--ylb-color-white); + padding: 9px 20px; + + &:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); + } + } + + .row-cards { + .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; + + h3 { + font-size: 32px; + line-height: 32px; + } + + .card-img-wrapper { + position: relative; + + .chevron { + height: 100%; + width: 100%; + top: 0; + transform: scale(1.01); + left: -25%; + position: absolute; + + svg { + height: 100%; + width: 100%; + } + } + + .img-container { + padding: 15px; + position: relative; + height: 100%; + + @media (min-width: 400px) { + padding: 20px; + } + } + + img { + min-height: 170px; + border-radius: 10px; + height: 100%; + width: 100%; + object-fit: cover; + } + } + + .card-content { + gap: 25px; + padding: 20px; + + .card-header { + border: none; + padding: 0; + background-color: transparent; + + .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-dark-grey); + width: fit-content; + } + } + + .card-body { + .card-heading { + margin-bottom: 25px; + color: #231F20; + } + } + + .card-text { + font-size: 18px; + line-height: 28px; + } + } + } + + &.row-cols-lg-1 { + @include media-breakpoint-up('lg') { + .card { + flex-direction: row; + height: 390px; + + + .card-content { + flex: 1; + + .card-body { + flex: unset; + } + } + + .card-img-wrapper { + height: unset; + width: 49%; + + img { + width: 100%; + } + } + } + } + + @include media-breakpoint-up('xl') { + .card { + .card-content { + padding: 40px 35px 40px 40px; + } + } + } + } + + @media (min-width: 1060px) { + &.row-cols-lg-2 .card .card-img-wrapper { + height: 400px; + } + + &.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; + + .chevron { + left: -15%; + } + } + + &.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; + + .img-container { + padding: 15px; + } + } + } + } +} diff --git a/assets/scss/lb-cards-color.scss b/assets/scss/lb-cards-color.scss new file mode 100644 index 0000000..1a6c7c8 --- /dev/null +++ b/assets/scss/lb-cards-color.scss @@ -0,0 +1,148 @@ +@import "_functions"; +@import "_mixins"; +@import "_variables"; + +:root { + --ylb-color-btn-grey: #636466; +} + +.block-lb-cards-color { + + .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; + + h2 { + font-size: 50px; + line-height: 65px; + } + + p { + font-size: 24px; + line-height: 36px; + } + } + + .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--ylb-color-white); + color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + padding: 9px 20px; + + &:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); + } + } + + .row-cards { + .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; + + h3 { + font-size: 32px; + line-height: 32px; + } + + .card-img-wrapper { + img { + min-height: 200px; + height: 100%; + width: 100%; + object-fit: cover; + } + } + + .card-content { + gap: 25px; + padding: 20px; + background-color: var(--wsPrimaryColor, #fff); + + .card-header { + border: none; + padding: 0; + background-color: transparent; + + .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-white); + width: fit-content; + } + } + + .card-body { + .card-heading { + margin-bottom: 25px; + color: var(--ylb-color-white); + } + } + + .card-text { + font-size: 18px; + line-height: 28px; + } + } + } + + &.row-cols-lg-1 { + @include media-breakpoint-up('lg') { + .card { + flex-direction: row; + height: 360px; + + .card-content { + flex: 1; + + .card-body { + flex: unset; + } + } + + .card-img-wrapper { + height: unset; + width: 49%; + + img { + width: 100%; + } + } + } + } + + @include media-breakpoint-up('xl') { + .card { + .card-content { + padding: 40px 35px 40px 40px; + } + } + } + } + + @media (min-width: 1060px) { + &.row-cols-lg-2 .card .card-img-wrapper { + height: 360px; + } + + &.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; + } + + &.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; + } + } + } +} diff --git a/assets/scss/lb-cards-overlay.scss b/assets/scss/lb-cards-overlay.scss new file mode 100644 index 0000000..05cfcf2 --- /dev/null +++ b/assets/scss/lb-cards-overlay.scss @@ -0,0 +1,178 @@ +@import "_functions"; +@import "_mixins"; +@import "_variables"; + +:root { + --ylb-color-btn-grey: #636466; +} + +.block-lb-cards-overlay { + + .section-description { + color: var(--ylb-color-dark-grey); + margin-bottom: 50px; + + h2 { + font-size: 50px; + line-height: 65px; + } + + p { + font-size: 24px; + line-height: 36px; + } + } + + .btn { + border-radius: 8px; + font-size: 24px; + line-height: 30px; + border: none; + background-color: var(--ylb-color-white); + color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); + padding: 9px 20px; + + &:hover { + background-color: var(--ylb-color-grey); + border-color: var(--ylb-color-grey); + } + } + + .row-cards { + + .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; + + h3 { + font-size: 32px; + line-height: 32px; + } + + .card-img-wrapper { + position: relative; + + &:after { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 1; + content: ''; + background: linear-gradient(180deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%); + } + + img { + min-height: 230px; + height: 100%; + width: 100%; + object-fit: cover; + } + } + + .card-content { + gap: 25px; + padding: 0 20px 20px; + margin-top: -55px; + background-color: var(--wsPrimaryColor); + + .card-header { + border: none; + padding: 0; + background-color: transparent; + z-index: 1; + + .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-white); + width: fit-content; + } + } + + .card-body { + z-index: 1; + + .card-heading { + margin-bottom: 25px; + color: var(--ylb-color-white); + } + } + + .card-text { + color: var(--ylb-color-white); + font-size: 18px; + line-height: 28px; + } + } + } + + &.row-cols-lg-1 { + @include media-breakpoint-up('lg') { + .card { + flex-direction: row; + height: 360px; + + .card-content { + flex: 1; + padding: 20px; + margin-top: 0; + + .card-body { + flex: unset; + } + } + + .card-img-wrapper { + height: unset; + width: 49%; + + &:after { + opacity: 1; + background: linear-gradient(90deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%) + } + + img { + width: 100%; + } + } + } + } + + @include media-breakpoint-up('xl') { + .card { + .card-content { + padding: 40px 35px 40px 40px; + } + } + } + } + + @media (min-width: 1060px) { + &.row-cols-lg-2 .card { + .card-img-wrapper { + height: 415px; + } + .card-content { + margin-top: 0; + } + } + &.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; + } + + &.row-cols-lg-4 .card .card-img-wrapper { + height: 230px; + } + } + } +} diff --git a/assets/scss/lb-cards.scss b/assets/scss/lb-cards.scss index 7e154bd..efc9081 100644 --- a/assets/scss/lb-cards.scss +++ b/assets/scss/lb-cards.scss @@ -6,14 +6,16 @@ --ylb-color-btn-grey: #636466; } -.block-lb-cards { +.block-lb-cards-standard { .section-description { color: var(--ylb-color-dark-grey); margin-bottom: 50px; + h2 { font-size: 50px; line-height: 65px; } + p { font-size: 24px; line-height: 36px; @@ -24,86 +26,120 @@ border-radius: 8px; font-size: 24px; line-height: 30px; - border-color: var(--ylb-color-btn-grey); - background-color: var(--ylb-color-btn-grey); + border: none; + background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey)); color: var(--ylb-color-white); - padding: 10px 34px; + padding: 9px 20px; + &:hover { background-color: var(--ylb-color-grey); border-color: var(--ylb-color-grey); } } - .card { - border-radius: 8px; - color: var(--ylb-color-white); - background-color: var(--ylb-color-dark-grey); - h3 { - font-size: 32px; - line-height: 32px; - } - } + .row-cards { + .card { + border-radius: 10px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + border: none; + color: var(--ylb-color-dark-grey); + overflow: hidden; - .card-header { - border: none; - background-color: transparent; - .category-tag { - font-family: Verdana, Geneva, sans-serif; - font-size: 14px; - line-height: 17px; - text-transform: uppercase; - min-height: 17px; + h3 { + font-size: 32px; + line-height: 32px; + } + + .card-img-wrapper { + img { + height: 100%; + min-height: 200px; + width: 100%; + object-fit: cover; + } + } + + .card-content { + gap: 25px; + padding: 20px; + + .card-header { + border: none; + padding: 0; + background-color: transparent; + + .category-tag { + font-family: Verdana, Geneva, sans-serif; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + min-height: 17px; + padding: 2px 4px; + border-radius: 5px; + color: var(--ylb-color-dark-grey); + width: fit-content; + } + } + + .card-body { + .card-heading { + margin-bottom: 25px; + color: #231F20; + } + } + + .card-text { + font-size: 18px; + line-height: 28px; + } + } } - } - .card-text { - font-size: 18px; - line-height: 28px; - } + &.row-cols-lg-1 { + @include media-breakpoint-up('lg') { + .card { + flex-direction: row; + height: 360px; - .card-content { - padding: 18px 10px; - } + .card-content { + flex: 1; - @include media-breakpoint-up('lg'){ - .row-cols-md-1 { - .card { - flex-direction: row; - img { - width: 33%; + .card-body { + flex: unset; + } + } + + .card-img-wrapper { + height: unset; + width: 49%; + + img { + width: 100%; + } + } + } + } + + @include media-breakpoint-up('xl') { + .card { + .card-content { + padding: 40px 35px 40px 40px; + } } } } - } - .row-cols-md-2, - .row-cols-md-3, - .row-cols-md-4 { - .card { - position: relative; - overflow: hidden; - &:before { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(35,31,32,0.6); - z-index: 1; + + @media (min-width: 1060px) { + &.row-cols-lg-2 .card .card-img-wrapper { + height: 360px; } - img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 0; + + &.row-cols-lg-3 .card .card-img-wrapper { + height: 270px; } - .card-content { - z-index: 2; + + &.row-cols-lg-4 .card .card-img-wrapper { + height: 200px; } } } diff --git a/lb_cards.libraries.yml b/lb_cards.libraries.yml index 915ac18..8c56be4 100644 --- a/lb_cards.libraries.yml +++ b/lb_cards.libraries.yml @@ -1,6 +1,27 @@ -# Custom module library for general purposes. +# Custom module library for standard variation. lb_cards: version: 1.0 css: theme: assets/css/lb-cards.css: { preprocess: true } + +# Custom module library for chevron variation. +lb_cards_chevron: + version: 1.0 + css: + theme: + assets/css/lb-cards-chevron.css: { preprocess: true } + +# Custom module library for color variation. +lb_cards_color: + version: 1.0 + css: + theme: + assets/css/lb-cards-color.css: { preprocess: true } + +# Custom module library for overlay variation. +lb_cards_overlay: + version: 1.0 + css: + theme: + assets/css/lb-cards-overlay.css: { preprocess: true } diff --git a/lb_cards.module b/lb_cards.module index 24e6695..3b6e37b 100644 --- a/lb_cards.module +++ b/lb_cards.module @@ -29,7 +29,19 @@ function lb_cards_theme($existing, $type, $theme, $path) { 'block__lb_cards' => [ 'base hook' => 'block', 'template' => 'block--lb-cards', - ] + ], + 'block__lb_cards__variation_overlay' => [ + 'base hook' => 'block', + 'template' => 'block--lb-cards--variation-overlay', + ], + 'block__lb_cards__variation_chevron' => [ + 'base hook' => 'block', + 'template' => 'block--lb-cards--variation-chevron', + ], + 'block__lb_cards__variation_color' => [ + 'base hook' => 'block', + 'template' => 'block--lb-cards--variation-color', + ], ]; } diff --git a/lb_cards.ws_style.yml b/lb_cards.ws_style.yml new file mode 100644 index 0000000..0245b33 --- /dev/null +++ b/lb_cards.ws_style.yml @@ -0,0 +1,7 @@ +lb_cards: + label: Cards variation + name: lb_cards + global: false + applies_to: ['inline_block:lb_cards'] + library: null + diff --git a/lb_cards.ws_style_option.yml b/lb_cards.ws_style_option.yml new file mode 100644 index 0000000..f85e056 --- /dev/null +++ b/lb_cards.ws_style_option.yml @@ -0,0 +1,26 @@ +lb_cards.ws_style_option: + - label: Standard variation + name: lb_cards_standard + group: lb_cards + image: null + library: null + template: block--lb-cards + - label: Overlay variation + name: lb_cards_overlay + group: lb_cards + image: null + library: null + template: block--lb-cards--variation-overlay + - label: Chevron variation + name: lb_cards_chevron + group: lb_cards + image: null + library: null + template: block--lb-cards--variation-chevron + - label: Color variation + name: lb_cards_color + group: lb_cards + image: null + library: null + template: block--lb-cards--variation-color + diff --git a/package.json b/package.json index bb967d0..f7e482e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": true, "version": "1.0.0", "scripts": { - "css:compile": "node-sass --include-path node_modules/bootstrap/scss --importer node_modules/node-sass-magic-importer/dist/cli.js assets/scss/lb-cards.scss -o assets/css", + "css:compile": "node-sass --include-path node_modules/bootstrap/scss --importer node_modules/node-sass-magic-importer/dist/cli.js assets/scss/ -o assets/css", "css:prefix": "postcss --use autoprefixer -b '> 10%' assets/css/*.css -r", "css:build": "npm run css:compile && npm run css:prefix", "css:watch": "nodemon -e scss -x \"npm run css:build\" --ignore assets/css", diff --git a/templates/block--lb-cards--variation-chevron.html.twig b/templates/block--lb-cards--variation-chevron.html.twig new file mode 100644 index 0000000..4a5da4c --- /dev/null +++ b/templates/block--lb-cards--variation-chevron.html.twig @@ -0,0 +1,129 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - block_content: Block content entity instance. + * + * @see template_preprocess_block() + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + 'block-lb-cards', + 'block-lb-cards-chevron' +] +%} + +{% set card_id = 'cards-' ~ configuration['block_revision_id'] %} +{{ attach_library('lb_cards/lb_cards_chevron') }} +<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}> + {{ title_prefix }} + {{ title_suffix }} + {% block content %} + {% if block_content.field_section_title.value or block_content.field_subtitle.value %} + <div class="row section-description"> + <div class="col-12"> + {% if block_content.field_section_title.value %} + <h2>{{ block_content.field_section_title.value }}</h2> + {% endif %} + {% if block_content.field_subtitle.value %} + <p>{{ block_content.field_subtitle.value }}</p> + {% endif %} + </div> + </div> + {% endif %} + <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}"> + {% if items %} + {% for key, item in items %} + + {# Setup our image style. #} + {% set media_image = null %} + {% set image = null %} + {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #} + {% if item.field_card_image.entity.field_media_image.entity.uri.value %} + {# lightning_media_image 8.x-4x source_field: [field_media_image] #} + {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %} + {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %} + {% endif %} + + {% if media_image %} + {% set image = file_url(media_image|image_style('card_image')) %} + {% endif %} + + {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %} + <div class="col mb-4"> + <div class="card d-flex"> + {% if image %} + <div class="card-img-wrapper"> + <div class="chevron"> + {% include "@lb_cards/chevron.html.twig" %} + </div> + <div class="img-container"> + <img src="{{ image }}" alt="{{ image_alt }}"> + </div> + </div> + {% endif %} + <div class="card-content w-100 d-flex flex-column align-content-between"> + <div class="card-header"> + <div class="category-tag"> + {% if item.field_card_topic_tag is not empty %} + {{ item.field_card_topic_tag.entity.label() }} + {% endif %} + </div> + </div> + <div class="card-body p-0"> + {% if item.field_card_title.value %} + <h3 class="card-heading" id="heading-{{ safe_hash }}"> + {{ item.field_card_title.value }} + </h3> + {% endif %} + + {% if item.field_card_description.value %} + <div class="card-text"> + {{ item.field_card_description.value|nl2br }} + </div> + {% endif %} + </div> + <div class="card-footer bg-transparent border-0 p-0"> + {% if item.field_card_cta.uri %} + <a href="{{ item.field_card_cta.0.url }}" + class="btn btn-primary"> + {{ item.field_card_cta.title }} + </a> + {% endif %} + </div> + </div> + </div> + </div> + {% endfor %} + {% endif %} + </div> + {% endblock %} + {% if block_content.field_cta.uri is not empty %} + <div class="row section-cta justify-content-center my-5"> + <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a> + </div> + {% endif %} +</div> diff --git a/templates/block--lb-cards--variation-color.html.twig b/templates/block--lb-cards--variation-color.html.twig new file mode 100644 index 0000000..e5ce5b8 --- /dev/null +++ b/templates/block--lb-cards--variation-color.html.twig @@ -0,0 +1,124 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - block_content: Block content entity instance. + * + * @see template_preprocess_block() + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + 'block-lb-cards', + 'block-lb-cards-color' +] +%} + +{% set card_id = 'cards-' ~ configuration['block_revision_id'] %} +{{ attach_library('lb_cards/lb_cards_color') }} +<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}> + {{ title_prefix }} + {{ title_suffix }} + {% block content %} + {% if block_content.field_section_title.value or block_content.field_subtitle.value %} + <div class="row section-description"> + <div class="col-12"> + {% if block_content.field_section_title.value %} + <h2>{{ block_content.field_section_title.value }}</h2> + {% endif %} + {% if block_content.field_subtitle.value %} + <p>{{ block_content.field_subtitle.value }}</p> + {% endif %} + </div> + </div> + {% endif %} + <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}"> + {% if items %} + {% for key, item in items %} + + {# Setup our image style. #} + {% set media_image = null %} + {% set image = null %} + {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #} + {% if item.field_card_image.entity.field_media_image.entity.uri.value %} + {# lightning_media_image 8.x-4x source_field: [field_media_image] #} + {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %} + {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %} + {% endif %} + + {% if media_image %} + {% set image = file_url(media_image|image_style('card_image')) %} + {% endif %} + + {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %} + <div class="col mb-4"> + <div class="card text-white d-flex"> + {% if image %} + <div class="card-img-wrapper"> + <img src="{{ image }}" alt="{{ image_alt }}"> + </div> + {% endif %} + <div class="card-content w-100 d-flex flex-column align-content-between"> + <div class="card-header"> + <div class="category-tag"> + {% if item.field_card_topic_tag is not empty %} + {{ item.field_card_topic_tag.entity.label() }} + {% endif %} + </div> + </div> + <div class="card-body p-0"> + {% if item.field_card_title.value %} + <h3 class="card-heading" id="heading-{{ safe_hash }}"> + {{ item.field_card_title.value }} + </h3> + {% endif %} + + {% if item.field_card_description.value %} + <div class="card-text"> + {{ item.field_card_description.value|nl2br }} + </div> + {% endif %} + </div> + <div class="card-footer bg-transparent border-0 p-0"> + {% if item.field_card_cta.uri %} + <a href="{{ item.field_card_cta.0.url }}" + class="btn btn-primary"> + {{ item.field_card_cta.title }} + </a> + {% endif %} + </div> + </div> + </div> + </div> + {% endfor %} + {% endif %} + </div> + {% endblock %} + {% if block_content.field_cta.uri is not empty %} + <div class="row section-cta justify-content-center my-5"> + <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a> + </div> + {% endif %} +</div> diff --git a/templates/block--lb-cards--variation-overlay.html.twig b/templates/block--lb-cards--variation-overlay.html.twig new file mode 100644 index 0000000..b49b464 --- /dev/null +++ b/templates/block--lb-cards--variation-overlay.html.twig @@ -0,0 +1,124 @@ +{# +/** + * @file + * Theme override to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * - block_content: Block content entity instance. + * + * @see template_preprocess_block() + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + 'block-lb-cards', + 'block-lb-cards-overlay' +] +%} + +{% set card_id = 'cards-' ~ configuration['block_revision_id'] %} +{{ attach_library('lb_cards/lb_cards_overlay') }} +<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}> + {{ title_prefix }} + {{ title_suffix }} + {% block content %} + {% if block_content.field_section_title.value or block_content.field_subtitle.value %} + <div class="row section-description"> + <div class="col-12"> + {% if block_content.field_section_title.value %} + <h2>{{ block_content.field_section_title.value }}</h2> + {% endif %} + {% if block_content.field_subtitle.value %} + <p>{{ block_content.field_subtitle.value }}</p> + {% endif %} + </div> + </div> + {% endif %} + <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}"> + {% if items %} + {% for key, item in items %} + + {# Setup our image style. #} + {% set media_image = null %} + {% set image = null %} + {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #} + {% if item.field_card_image.entity.field_media_image.entity.uri.value %} + {# lightning_media_image 8.x-4x source_field: [field_media_image] #} + {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %} + {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %} + {% endif %} + + {% if media_image %} + {% set image = file_url(media_image|image_style('card_image')) %} + {% endif %} + + {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %} + <div class="col mb-4"> + <div class="card d-flex"> + {% if image %} + <div class="card-img-wrapper"> + <img src="{{ image }}" alt="{{ image_alt }}"> + </div> + {% endif %} + <div class="card-content w-100 d-flex flex-column align-content-between"> + <div class="card-header"> + <div class="category-tag"> + {% if item.field_card_topic_tag is not empty %} + {{ item.field_card_topic_tag.entity.label() }} + {% endif %} + </div> + </div> + <div class="card-body p-0"> + {% if item.field_card_title.value %} + <h3 class="card-heading" id="heading-{{ safe_hash }}"> + {{ item.field_card_title.value }} + </h3> + {% endif %} + + {% if item.field_card_description.value %} + <div class="card-text"> + {{ item.field_card_description.value|nl2br }} + </div> + {% endif %} + </div> + <div class="card-footer bg-transparent border-0 p-0"> + {% if item.field_card_cta.uri %} + <a href="{{ item.field_card_cta.0.url }}" + class="btn btn-primary"> + {{ item.field_card_cta.title }} + </a> + {% endif %} + </div> + </div> + </div> + </div> + {% endfor %} + {% endif %} + </div> + {% endblock %} + {% if block_content.field_cta.uri is not empty %} + <div class="row section-cta justify-content-center my-5"> + <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a> + </div> + {% endif %} +</div> diff --git a/templates/block--lb-cards.html.twig b/templates/block--lb-cards.html.twig index a84ca60..4d149de 100644 --- a/templates/block--lb-cards.html.twig +++ b/templates/block--lb-cards.html.twig @@ -31,7 +31,8 @@ 'block', 'block-' ~ configuration.provider|clean_class, 'block-' ~ plugin_id|clean_class, - 'block-lb-cards' + 'block-lb-cards', + 'block-lb-cards-standard' ] %} @@ -53,7 +54,7 @@ </div> </div> {% endif %} - <div class="row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}"> + <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}"> {% if items %} {% for key, item in items %} @@ -73,9 +74,11 @@ {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %} <div class="col mb-4"> - <div class="card h-100" {% if columns > 1 %} style="background-image: url({{ image }}); background-size: cover;"{% endif %}> + <div class="card d-flex"> {% if image %} - <img class="card-img-top {% if columns > 1 %}d-none{% endif %}" src="{{ image }}" alt="{{ image_alt }}"> + <div class="card-img-wrapper"> + <img src="{{ image }}" alt="{{ image_alt }}"> + </div> {% endif %} <div class="card-content w-100 d-flex flex-column align-content-between"> <div class="card-header"> @@ -85,7 +88,7 @@ {% endif %} </div> </div> - <div class="card-body"> + <div class="card-body p-0"> {% if item.field_card_title.value %} <h3 class="card-heading" id="heading-{{ safe_hash }}"> {{ item.field_card_title.value }} @@ -98,7 +101,7 @@ </div> {% endif %} </div> - <div class="card-footer bg-transparent border-0 pb-0"> + <div class="card-footer bg-transparent border-0 p-0"> {% if item.field_card_cta.uri %} <a href="{{ item.field_card_cta.0.url }}" class="btn btn-primary"> diff --git a/templates/chevron.html.twig b/templates/chevron.html.twig new file mode 100644 index 0000000..ee8dc48 --- /dev/null +++ b/templates/chevron.html.twig @@ -0,0 +1,10 @@ +<svg preserveAspectRatio="none" viewBox="0 0 863 610" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g id="UI-KIt" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="banner" transform="translate(-1.000000, -1386.000000)"> + <g id="chevron" transform="translate(1.000000, 1386.000000)"> + <path d="M853.164443,287.453806 L851.894623,285.264012 L709.950849,38.2331146 L707.466419,33.9089651 C694.699258,12.5350138 671.554009,-0.384834781 646.735904,0.00874206473 L529.553617,0.00874206473 C516.509619,0.0393090701 505.951495,10.6658834 505.95153,23.7638452 C505.878831,27.6926463 506.830464,31.572251 508.712008,35.0177214 L651.67716,283.656316 C665.197627,306.800159 665.418515,335.423093 652.25686,358.774553 L528.035354,574.982027 C526.15381,578.427498 525.202177,582.307103 525.274876,586.235903 C525.274876,599.355483 535.866608,609.991006 548.932172,609.991006 L669.12338,609.991006 C693.942917,610.390316 717.090828,597.468982 729.853895,576.090783 L732.338325,571.766633 L851.867019,363.874832 L854.075401,360.021904 C860.132215,349.149681 863.208928,336.858896 862.991745,324.403109 C863.043758,311.439517 859.682037,298.692489 853.247258,287.453806 L853.164443,287.453806 Z" id="Shape" fill="var(--wsTertiaryColor, #000)"></path> + <path d="M710.164443,287.453806 L708.894623,285.264012 L566.950849,38.2331146 L564.466419,33.9089651 C551.699258,12.5350138 528.554009,-0.384834781 503.735904,0.00874206473 L0,0.0177360411 L0.378555001,610 L526.12338,609.991006 C550.942917,610.390316 574.090828,597.468982 586.853895,576.090783 L589.338325,571.766633 L708.867019,363.874832 L711.075401,360.021904 C717.132215,349.149681 720.208928,336.858896 719.991745,324.403109 C720.043758,311.439517 716.682037,298.692489 710.247258,287.453806 L710.164443,287.453806 Z" id="Shape" fill="var(--wsSecondaryColor, $fff)"></path> + </g> + </g> + </g> +</svg> -- GitLab