messing about with colours

src/_includes/section-one.html

@@ -1,5 +1,5 @@
 <!-- One -->
-<section id="one" class="wrapper style1 special">
+<section id="one" class="wrapper style5 special">
 	<div class="inner">
 		<header class="major">
 			<h2>Arcu aliquet vel lobortis ata nisl<br />
@@ -12,11 +12,11 @@
 				<span class="icons__title">Sustainability</span>
 			</li>
 			<li>
-				<span class="icon fa-heart-o major style3"></span>
+				<span class="icon fa-heart-o major style1"></span>
 				<span class="icons__title">Privacy</span>
 			</li>
 			<li>
-				<span class="icon fa-heart-o major style4"></span>
+				<span class="icon fa-heart-o major style1"></span>
 				<span class="icons__title">Transparency</span>
 			</li>
 		</ul>

src/_includes/section-three.html

@@ -1,5 +1,5 @@
 <!-- Three -->
-<section id="three" class="wrapper style3 special">
+<section id="three" class="wrapper style6 special">
 	<div class="inner">
 		<header class="major">
 			<h2>Accumsan mus tortor nunc aliquet</h2>

src/_layouts/default.html

@@ -13,7 +13,6 @@
 {% include section-one.html %}
 {% include section-two.html %}
 {% include section-three.html %}
-{% include cta.html %}
 {% include footer.html %}
 </body>
 

src/assets/styles/components/_banner.scss

@@ -107,7 +107,7 @@ body.is-loading {
 .particle {
 	position: relative;
 	user-select: none;
-	background: _palette(bg);
+	background: _palette(accent3, bg);
 
 	@include breakpoint(medium) {
 		background: none;

src/assets/styles/components/_box.scss

@@ -54,18 +54,18 @@
 	}
 
 	&.style1 {
-		color: _palette(accent1, fg-dark);
+		color: _palette(bg);
 	}
 
 	&.style2 {
-		color: _palette(accent2, fg-dark);
+		color: _palette(accent2, bg);
 	}
 
 	&.style3 {
-		color: _palette(accent3, fg-dark);
+		color: _palette(accent3, bg);
 	}
 	
 	&.style4 {
-		color: _palette(accent4, fg-dark);
+		color: _palette(accent4, bg);
 	}
 }

src/assets/styles/components/_button.scss

@@ -57,16 +57,16 @@ button,
 	}
 
 	&.special {
-		background-color: _palette(accent4, bg);
+		background-color: _palette(accent3, bg);
 		box-shadow: none !important;
-		color: _palette(accent4, fg-bold) !important;
+		color: _palette(accent3, fg-bold) !important;
 
 		&:hover {
-			background-color: lighten(_palette(accent4, bg), 5) !important;
+			background-color: lighten(_palette(accent3, bg), 5) !important;
 		}
 
 		&:active {
-			background-color: darken(_palette(accent4, bg), 5) !important;
+			background-color: darken(_palette(accent3, bg), 5) !important;
 		}
 	}
 

src/assets/styles/components/_wrapper.scss

@@ -229,6 +229,10 @@
 	&.style5 {
 		@include wrapper(accent2);
 	}
+	
+	&.style6 {
+		@include wrapper(accent4);
+	}
 
 	@include breakpoint(medium) {
 		@include padding(4em, 3em);

src/assets/styles/libs/_vars.scss

@@ -31,22 +31,20 @@
 
 // Palette.
 	$palette: (
-		bg:					#232B3B,
+		bg:					#29335C,
 		fg:					#fff,
 		fg-bold:			#fff,
 		fg-light:			rgba(255,255,255,0.5),
-		fg-dark:			darken(#fff, 10%),
 		border:				#fff,
 		border-bg:			rgba(144,144,144,0.25),
 		border2:			#fff,
 		border2-bg:			rgba(144,144,144,0.5),
 
 		accent1: (
-			bg:				#21b2a6,
+			bg:				#F3A712,
 			fg-bold:		#ffffff,
-			fg:				mix(#21b2a6, #ffffff, 25%),
+			fg:				mix(#F3A712, #ffffff, 25%),
-			fg-light:		mix(#21b2a6, #ffffff, 40%),
+			fg-light:		mix(#F3A712, #ffffff, 40%),
-			fg-dark:		darken(#21b2a6, 15%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
@@ -58,7 +56,6 @@
 			fg-bold:		#2E3842,
 			fg:				#4E4852,
 			fg-light:		#8E8892,
-			fg-dark:		darken(#4E4852, 10%),
 			border:			#dfdfdf,
 			border-bg:		rgba(0,0,0,0.0375),
 			border2:		#bfbfbf,
@@ -66,23 +63,21 @@
 		),
 
 		accent3: (
-			bg:				#2B5681,
+			bg:				#ed4933,
 			fg-bold:		#ffffff,
-			fg:				mix(#2B5681, #ffffff, 25%),
+			fg:				mix(#ed4933, #ffffff, 25%),
-			fg-light:		mix(#2B5681, #ffffff, 40%),
+			fg-light:		mix(#ed4933, #ffffff, 40%),
-			fg-dark:		darken(#2B5681, 5%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
-
+		
 		accent4: (
-			bg:				#ed4933,
+			bg:				#25558C,
 			fg-bold:		#ffffff,
-			fg:				mix(#ed4933, #ffffff, 25%),
+			fg:				mix(#25558C, #ffffff, 25%),
-			fg-light:		mix(#ed4933, #ffffff, 40%),
+			fg-light:		mix(#25558C, #ffffff, 40%),
-			fg-dark:		darken(#ed4933, 10%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),