use 'dark' class locally in header, hero or custom sections. adapt dark styles.

assets/scss/custom.scss

@@ -1,6 +1,6 @@
 ///// HOMEPAGE
 
-/// Chill colors
+/// Chill brand colors
 $chill-blue: #334d5c;
 $chill-green: #43b29d;
 $chill-beige: #d3c7b1;
@@ -10,41 +10,66 @@ $chill-orange: #e89463;
 $chill-lightgray: #efefef;
 $chill-yellow: #f1d275;
 
+/// Other custom colors
+$bg-dark-blue: #0d242e;
+$bg-light-blue: #a0dcff;
+$btn-orange: #f46839;
+$text-green: #56c4aa;
+$icon-red: #f0384d;
+$icon-yellow: #fcc958;
+
+// Pattern
+// hugo needs to precompile images in public dir, and make it automatically with images called from content.
+// here we need to use it in css, then need to generate it, calling it first from a content md file.
+@mixin apply-bgpattern-01() {
+    background-repeat: repeat;
+    background-position: bottom center;
+    background-image: url('../images/bg/dessin-3.png'); 
+}
+
 
 // Theme Custom sections
 header.header {
-    background-color: $chill-blue;
+    background-color: $bg-dark-blue;
 }
 main > section {
-    &:first-child {
-        background-color: $chill-blue;
+    &.hero {
+        background-color: $bg-dark-blue;
+        @include apply-bgpattern-01();
+        h1 {
+            color: $text-green;
+        }
+        p {
+            color: white;
+            font-weight: bolder;
+        }
     }
     &.section-1 {
+        background-color: $bg-light-blue;
     }
     &.section-2 {
     }
     &.section-3 {
+        background-color: $text-green;
     }
     &.section-4 {
     }
     &.section-5 {
+        background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-6 {
-        background-color: $chill-blue;
-        background-repeat: repeat;
-        background-position: bottom center;
-        background-image: url('../images/bg/dessin-3.png'); 
-        /* hugoplate needs to compile images in public, and make it automatically for images called from content.
-           we need to call first image from content md files, if we need to use it in css
-        */
+        background-color: $bg-dark-blue;
+        @include apply-bgpattern-01();        
     }
     &.section-7 {
+        background-color: $bg-light-blue;
     }
 }
 
 // Change bulletlists rendering in flex bloc
 section.section-1,
-section.section-6 {
+section.section-5,
+section.section-7 {
     .container .row {
         & > div {
             &:last-child {
@@ -69,4 +94,16 @@ section.section-6 {
             }
         }    
     }
+}
+
+// Dark context (homepage header, hero, footer)
+.dark {
+
+    // Overwrite primary button design
+    .btn-primary {
+        background-color: $btn-orange;
+        color: white;
+        border: 1px solid $btn-orange;
+        border-radius: 2em;
+    }
 }