(wip): Styles split/style 3

src/app/common/components/marketing/styles/general.scss

+.m-marketing__main,
+.m-marketing__section {
+ // Common
+ overflow-x: hidden;
+
+ .m-marketing--hideMobile {
+ @media screen and (max-width: $m-grid-min-vp) {
+ display: none;
+ }
+ }
+
+ .m-marketing__title,
+ h1 {
+ font-size: 22px;
+ line-height: 44px;
+ font-weight: bold;
+ opacity: 0.7;
+ margin: 12px 0 4px;
+
+ @include m-theme() {
+ color: themed($m-grey-800);
+ }
+ }
+
+ .m-marketing__subtitle,
+ h2 {
+ font-weight: 900;
+ font-size: 42px;
+ line-height: 44px;
+ margin: 0 0 23px;
+ position: relative;
+ z-index: 0;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 32px;
+ line-height: 34px;
+ margin: 0 0 18px;
+ }
+
+ &.m-marketing__subtitle--asTitle {
+ font-size: 48px;
+ line-height: 53px;
+ margin: 0 0 26px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 38px;
+ line-height: 46px;
+ margin: 0 0 21px;
+ }
+ }
+
+ em {
+ font-style: inherit;
+ text-decoration: inherit;
+ white-space: nowrap;
+ position: relative;
+
+ &::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ background: rgba(80, 226, 195, 0.3);
+ top: 0.36em;
+ left: -0.03em;
+ right: -0.03em;
+ bottom: 0.22em;
+ pointer-events: none;
+ z-index: -1;
+ }
+ }
+
+ em + em::after {
+ left: -0.25em;
+ }
+ }
+
+ p.m-marketing__description {
+ font-size: 18px;
+ line-height: 27px;
+ margin: 0 0 36px;
+ }
+
+ ul.m-marketing__points {
+ list-style: disc;
+ margin: 0 0 45px;
+ padding: 0 0 0 1em;
+ font-size: 16px;
+ line-height: 21px;
+
+ > li {
+ margin-bottom: 19px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .m-marketing__actionButtons {
+ > * {
+ margin-right: 25px;
+
+ &:last-child {
+ margin-right: initial;
+ }
+ }
+ }
+}

src/app/common/components/marketing/marketing-styles.scss → src/app/common/components/marketing/styles/style-1.scss

 .m-marketing__main,
 .m-marketing__section {
- // Common
- overflow-x: hidden;
-
- .m-marketing--hideMobile {
- @media screen and (max-width: $m-grid-min-vp) {
- display: none;
- }
- }
-
- .m-marketing__title,
- h1 {
- font-size: 22px;
- line-height: 44px;
- font-weight: bold;
- opacity: 0.7;
- margin: 12px 0 4px;
-
- @include m-theme() {
- color: themed($m-grey-800);
- }
- }
-
- .m-marketing__subtitle,
- h2 {
- font-weight: 900;
- font-size: 42px;
- line-height: 44px;
- margin: 0 0 23px;
- position: relative;
- z-index: 0;
-
- @media screen and (max-width: $m-grid-min-vp) {
- font-size: 32px;
- line-height: 34px;
- margin: 0 0 18px;
- }
-
- &.m-marketing__subtitle--asTitle {
- font-size: 48px;
- line-height: 53px;
- margin: 0 0 26px;
-
- @media screen and (max-width: $m-grid-min-vp) {
- font-size: 38px;
- line-height: 46px;
- margin: 0 0 21px;
- }
- }
-
- em {
- font-style: inherit;
- text-decoration: inherit;
- white-space: nowrap;
- position: relative;
-
- &::after {
- content: '';
- display: inline-block;
- position: absolute;
- background: rgba(80, 226, 195, 0.3);
- top: 0.36em;
- left: -0.03em;
- right: -0.03em;
- bottom: 0.22em;
- pointer-events: none;
- z-index: -1;
- }
- }
-
- em + em::after {
- left: -0.25em;
- }
- }
-
- p.m-marketing__description {
- font-size: 18px;
- line-height: 27px;
- margin: 0 0 36px;
- }
-
- ul.m-marketing__points {
- list-style: disc;
- margin: 0 0 45px;
- padding: 0 0 0 1em;
- font-size: 16px;
- line-height: 21px;
-
- > li {
- margin-bottom: 19px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- .m-marketing__actionButtons {
- > * {
- margin-right: 25px;
-
- &:last-child {
- margin-right: initial;
- }
- }
- }
-
- // Style 1
-
  &.m-marketing__section--style-1 {
  @include m-theme() {
  background: linear-gradient(
@@ -282,160 +174,4 @@
  }
  }
  }
-
- // Style 2
-
- &.m-marketing__section--style-2 {
- .m-marketing__wrapper {
- position: relative;
- z-index: 0;
- padding: 72px 0 32px;
-
- @media screen and (max-width: $m-grid-min-vp) {
- padding: 0;
- }
- }
-
- .m-marketing__body {
- position: relative;
-
- @media screen and (max-width: $m-grid-min-vp) {
- padding: 0 30px 30px;
- }
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- right: -290px;
- bottom: -56px;
- left: 0;
- transform: translate(-86px, -56px);
- clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
- z-index: -1;
-
- @include m-theme() {
- background: linear-gradient(
- 180deg,
- themed($m-marketing-bg-colored-gradient-start) 0%,
- themed($m-marketing-bg-colored-gradient-end) 99.99%
- );
- }
-
- @media screen and (max-width: $m-grid-min-vp) {
- right: 0;
- bottom: -3vw;
- transform: none;
- clip-path: none;
- }
- }
-
- h1 {
- @include m-on-theme(dark) {
- color: #ffffff;
- }
-
- @media screen and (max-width: $m-grid-min-vp) {
- margin: 15px 0 15px;
- text-align: center;
- }
- }
-
- h2 {
- @include m-on-theme(dark) {
- color: #ffffff;
- }
-
- @media screen and (max-width: $m-grid-min-vp) {
- font-size: 28px;
- line-height: 32px;
- margin: 0 0 17px;
- text-align: center;
- }
- }
- }
-
- p.m-marketing__description {
- margin-bottom: 42px;
- padding-right: 200px;
-
- @include m-theme() {
- color: themed($m-grey-300);
- }
-
- @include m-on-theme(dark) {
- color: #ffffff;
- }
-
- @media screen and (max-width: $m-grid-min-vp) {
- padding-right: 0;
- margin-bottom: 30px;
- font-size: 16px;
- line-height: 23px;
- text-align: center;
- }
- }
-
- .m-marketing__image {
- position: relative;
- z-index: 0;
-
- img {
- object-fit: contain;
- clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
-
- @media screen and (max-width: $m-grid-min-vp) {
- width: 100vw;
- height: 100vw;
- object-fit: cover;
- clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
- }
- }
-
- span {
- display: inline-block;
- position: relative;
-
- // Deco
-
- &::before {
- content: '';
- display: block;
- position: absolute;
- width: 393px;
- height: 193px;
- bottom: 0;
- right: 0;
- transform: translate(45px, 32px);
- background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
- no-repeat;
- z-index: -1;
-
- @media screen and (max-width: $m-grid-min-vp) {
- content: initial;
- display: none;
- }
- }
-
- &::after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- width: 284px;
- height: 262px;
- transform: translate(35px, -35px);
- background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
- no-repeat;
- z-index: -1;
-
- @media screen and (max-width: $m-grid-min-vp) {
- content: initial;
- display: none;
- }
- }
- }
- }
- }
 }

src/app/common/components/marketing/styles/style-2.scss

+.m-marketing__main,
+.m-marketing__section {
+ &.m-marketing__section--style-2 {
+ .m-marketing__wrapper {
+ position: relative;
+ z-index: 0;
+ padding: 72px 0 32px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0;
+ }
+ }
+
+ .m-marketing__body {
+ position: relative;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px 30px;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -290px;
+ bottom: -56px;
+ left: 0;
+ transform: translate(-86px, -56px);
+ clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
+ z-index: -1;
+
+ @include m-theme() {
+ background: linear-gradient(
+ 180deg,
+ themed($m-marketing-bg-colored-gradient-start) 0%,
+ themed($m-marketing-bg-colored-gradient-end) 99.99%
+ );
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ right: 0;
+ bottom: -3vw;
+ transform: none;
+ clip-path: none;
+ }
+ }
+
+ h1 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 15px 0 15px;
+ text-align: center;
+ }
+ }
+
+ h2 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 28px;
+ line-height: 32px;
+ margin: 0 0 17px;
+ text-align: center;
+ }
+ }
+ }
+
+ p.m-marketing__description {
+ margin-bottom: 42px;
+ padding-right: 200px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding-right: 0;
+ margin-bottom: 30px;
+ font-size: 16px;
+ line-height: 23px;
+ text-align: center;
+ }
+ }
+
+ .m-marketing__image {
+ position: relative;
+ z-index: 0;
+
+ img {
+ object-fit: contain;
+ clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 100vw;
+ height: 100vw;
+ object-fit: cover;
+ clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
+ }
+ }
+
+ span {
+ display: inline-block;
+ position: relative;
+
+ // Deco
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 393px;
+ height: 193px;
+ bottom: 0;
+ right: 0;
+ transform: translate(45px, 32px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 284px;
+ height: 262px;
+ transform: translate(35px, -35px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}

src/app/common/components/marketing/styles/style-3.scss

+.m-marketing__main,
+.m-marketing__section {
+ &.m-marketing__section--style-3 {
+ .m-marketing__wrapper {
+ position: relative;
+ z-index: 0;
+ padding: 72px 0 32px;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0;
+ }
+ }
+
+ .m-marketing__body {
+ position: relative;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding: 0 30px 30px;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -290px;
+ bottom: -56px;
+ left: 0;
+ transform: translate(-86px, -56px);
+ clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
+ z-index: -1;
+
+ @include m-theme() {
+ background: linear-gradient(
+ 180deg,
+ themed($m-marketing-bg-colored-gradient-start) 0%,
+ themed($m-marketing-bg-colored-gradient-end) 99.99%
+ );
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ right: 0;
+ bottom: -3vw;
+ transform: none;
+ clip-path: none;
+ }
+ }
+
+ h1 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ margin: 15px 0 15px;
+ text-align: center;
+ }
+ }
+
+ h2 {
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ font-size: 28px;
+ line-height: 32px;
+ margin: 0 0 17px;
+ text-align: center;
+ }
+ }
+ }
+
+ p.m-marketing__description {
+ margin-bottom: 42px;
+ padding-right: 200px;
+
+ @include m-theme() {
+ color: themed($m-grey-300);
+ }
+
+ @include m-on-theme(dark) {
+ color: #ffffff;
+ }
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ padding-right: 0;
+ margin-bottom: 30px;
+ font-size: 16px;
+ line-height: 23px;
+ text-align: center;
+ }
+ }
+
+ .m-marketing__image {
+ position: relative;
+ z-index: 0;
+
+ img {
+ object-fit: contain;
+ clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ width: 100vw;
+ height: 100vw;
+ object-fit: cover;
+ clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
+ }
+ }
+
+ span {
+ display: inline-block;
+ position: relative;
+
+ // Deco
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 393px;
+ height: 193px;
+ bottom: 0;
+ right: 0;
+ transform: translate(45px, 32px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 284px;
+ height: 262px;
+ transform: translate(35px, -35px);
+ background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
+ no-repeat;
+ z-index: -1;
+
+ @media screen and (max-width: $m-grid-min-vp) {
+ content: initial;
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}

src/app/modules/marketing/marketing.component.scss

@@ -194,8 +194,7 @@
  }
 }
 
-.m-marketing--section,
-.m-marketing__section {
+.m-marketing--section {
  height: 300px;
  align-items: center;
  justify-content: center;