feat(copy-module): respect visualStyle field now

assets/stylesheets/landing-page/modules/copy.css

@@ -0,0 +1,64 @@
+@block module-copy {
+  @modifier emphasized {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: calc(var(--grid-gutter) * 0.75) 0;
+    background-color: var(--module-copy-emphasized-bg);
+    border-radius: var(--border-radius);
+    color: var(--module-copy-emphasized-color);
+
+    @media (--breakpoint-desktop) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  @element first {
+    @modifier emphasized {
+      flex: 1 1 auto;
+      width: 50vw;
+      padding: 0 var(--grid-gutter);
+
+      @media (--breakpoint-desktop) {
+        padding-left: var(--grid-gutter);
+      }
+    }
+  }
+
+  @element second {
+    @modifier emphasized {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @media (--breakpoint-desktop) {
+        flex: 1 1 auto;
+        padding: 0 var(--grid-gutter);
+        width: 20vw;
+      }
+    }
+  }
+
+
+  @element headline {
+    @modifier emphasized {
+      color: var(--module-copy-emphasized-headlines-color);
+      font-size: 1.25em;
+    }
+  }
+
+  @element copy {
+    @modifier emphasized {
+      font-size: 0.875em;
+    }
+  }
+
+  @element cta {
+    @modifier emphasized {
+      background-color: var(--module-copy-emphasized-cta-bg);
+      color: var(--module-copy-emphasized-cta-color);
+      margin-bottom: 0;
+    }
+  }
+}

assets/stylesheets/landing-page/modules/index.css

@@ -1,3 +1,4 @@
+@import './copy';
 @import './hero-image';
 @import './highlighted-course';
 

assets/stylesheets/variables.css

@@ -58,6 +58,12 @@
   --cta-bg-hover: var(--color-palette-blue-medium);
   --cta-radius: 3px;
 
+  --module-copy-emphasized-bg: #8091a5;
+  --module-copy-emphasized-color: #c3cfd5;
+  --module-copy-emphasized-headlines-color: #fff;
+  --module-copy-emphasized-cta-bg: #536171;
+  --module-copy-emphasized-cta-color: #fff;
+
   --code-bg: var(--color-bg-grey);
   --code-trigger-bg: color(var(--color-bg-grey) shade(20%));
   --code-trigger-bg-active: var(--code-bg);

public/stylesheets/style.css

@@ -1824,6 +1824,97 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     margin-bottom: 0;
 }
 
+.module-copy {}
+
+.module-copy--emphasized {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    padding: 16.5px 0;
+    background-color: #8091a5;
+    border-radius: 4px;
+    color: #c3cfd5;
+}
+
+@media (min-width: 700px) {
+
+  .module-copy--emphasized {
+    -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+  }
+}
+
+.module-copy__first {}
+
+.module-copy__first--emphasized {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 auto;
+              flex: 1 1 auto;
+      width: 50vw;
+      padding: 0 22px;
+}
+
+@media (min-width: 700px) {
+
+  .module-copy__first--emphasized {
+    padding-left: 22px;
+  }
+}
+
+.module-copy__second {}
+
+.module-copy__second--emphasized {
+      -webkit-box-flex: 1;
+          -ms-flex: 1 1 auto;
+              flex: 1 1 auto;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+}
+
+@media (min-width: 700px) {
+
+  .module-copy__second--emphasized {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    padding: 0 22px;
+    width: 20vw;
+  }
+}
+
+.module-copy__headline {}
+
+.module-copy__headline--emphasized {
+      color: #fff;
+      font-size: 1.25em;
+}
+
+.module-copy__copy {}
+
+.module-copy__copy--emphasized {
+      font-size: 0.875em;
+}
+
+.module-copy__cta {}
+
+.module-copy__cta--emphasized {
+      background-color: #536171;
+      color: #fff;
+      margin-bottom: 0;
+}
+
 .module-hero-image {}
 
 .module-hero-image__wrapper {

views/mixins/_moduleCopy.pug

@@ -1,7 +1,10 @@
 mixin moduleCopy(module)
-  .module.module-copy
+  - const style = module.fields.visualStyle === 'Emphasized' ? `--emphasized` : ''
-    h1.module-copy__headline #{module.fields.headline}
+  .module
-    div.module-copy__copy !{helpers.markdown(module.fields.copy)}
+    div(class=`module-copy${style}`)
-
+      div(class=`module-copy__first${style}`)
-    if module.fields.ctaTitle && module.fields.ctaLink
+        h1(class=`module-copy__headline${style}`) #{module.fields.headline}
-      a.cta(href=module.fields.ctaLink)= module.fields.ctaTitle
+        div(class=`module-copy__copy${style}`) !{helpers.markdown(module.fields.copy)}
+      div(class=`module-copy__second${style}`)
+        if module.fields.ctaTitle && module.fields.ctaLink
+          a.cta(class=`module-copy__cta${style}` href=module.fields.ctaLink)= module.fields.ctaTitle