update

roomwithavw-custom.php

@@ -15,6 +15,9 @@ function roomwithavw_custom_add_scripts() {
 	wp_register_script( 'roomwithavw-custom-script', plugins_url( 'assets/js/index.js', __FILE__ ), '', '1.0', true );
 	wp_enqueue_script( 'roomwithavw-custom-script' );
 
+	wp_register_script( 'iconify', 'https://code.iconify.design/1/1.0.6/iconify.min.js', '', '1.0', true );
+	wp_enqueue_script( 'iconify' );
+
 	wp_enqueue_style( 'roomwithavw-custom-styles', plugins_url( 'assets/css/style.css', __FILE__ ), '', '1.0' );
 }
 add_action( 'wp_enqueue_scripts', 'roomwithavw_custom_add_scripts' );

src/scss/_featured.scss

@@ -1,5 +1,187 @@
 body.rwavw-custom {
 
+	.widget.rwavw-feature-sunset {
+		.pure-g > div:first-child {
+			padding-right: 44px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+
+		.h2, h3, h4, h5, h6 {
+			font-weight: 400;
+			text-align: right !important;
+			color: #000a38;
+			margin-top: 0;
+			margin-bottom: 44px;
+		}
+
+		p {
+			font-size:19px;
+			margin-bottom: 22px;
+			color: #020121;
+			text-align: right !important;
+		}
+	}
+
+	.widget.rwavw-feature-main {
+
+		margin-top: 0;
+		margin-left: auto;
+		margin-right: auto;
+		max-width: 1800px;
+
+		.gallery-item {
+			flex: 100% 0 0;
+
+			.gallery-link {
+			}
+		}
+
+		.pure-g {
+			align-items: center;
+		}
+
+		.pure-u-1 {
+			color: inherit;
+		}
+
+		h4,
+		p {
+			font-size: 16px;
+			margin-bottom: 22px;
+		}
+
+		h4 {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			font-weight: 400;
+			font-size: 22px;
+			color: inherit;
+
+			svg {
+				font-size: 32px;
+				margin-right: 0.7ch;
+
+				&.small {
+					font-size: 24px;
+				}
+			}
+		}
+
+		p {
+		}
+
+		.hover-overlay {
+			> .overlay {
+				$color-overlay: #252c03;
+
+				background-color: transparent !important;
+				background-image: linear-gradient(
+					to bottom,
+					rgba($color-overlay, 0.05),
+					rgba($color-overlay, 0.0) 50%,
+					rgba($color-overlay, 1)
+				), linear-gradient(
+					to right,
+					rgba($color-overlay, 0.1),
+					rgba($color-overlay, 0) 20%,
+					rgba($color-overlay, 0) 80%,
+					rgba($color-overlay, 0.1)
+				);
+
+				opacity: 1;
+
+				&:hover {
+					opacity: 0;
+				}
+
+				> div {
+					height: 100%;
+					top: 0;
+					transform: none;
+
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-end;
+					align-items: flex-end;
+					padding: 22px;
+
+					h2, h3, h4, h5, h6 {
+						color: #fff !important;
+						margin: 0;
+						line-height: 1.2;
+						font-size: 26px;
+						font-weight: 400;
+						text-align: right;
+					}
+				}
+			}
+
+			&:hover img {
+				transform: none;
+			}
+		}
+
+		@media (max-width: 63.98em) {
+			text-align: center;
+
+			.hover-overlay {
+				margin-bottom: 22px;
+			}
+
+			h4 {
+				justify-content: center;
+			}
+		}
+
+		@media (min-width: 64em) {
+			margin-top: 44px;
+
+			.gallery-item {
+				flex: 40% 0 0;
+			}
+
+			.hover-overlay {
+				> .overlay {
+
+					&:hover {
+					}
+
+					> div {
+
+						h2, h3, h4, h5, h6 {
+							font-size: 32px;
+						}
+					}
+				}
+			}
+
+			h4,
+			p {
+				margin-left: 44px;
+			}
+		}
+
+		@media (min-width: 104em) {
+			.hover-overlay {
+				> .overlay {
+
+					&:hover {
+					}
+
+					> div {
+
+						h2, h3, h4, h5, h6 {
+							font-size: 44px;
+						}
+					}
+				}
+			}
+		}
+	}
+
 	.widget.rwavw-featured {
 		h2 {
 			color: red;

src/scss/_footer.scss

@@ -0,0 +1,71 @@
+body.rwavw-custom {
+
+	#footer {
+		// TODO set using theme - how?
+		color: #b0b0b0;
+		background-color: #272729;
+
+		a {
+			color: #fff;
+			font-weight: 600;
+			opacity: 0.8;
+
+			&.button-social {
+				color: #fff;
+				 &.btn-massive > i {
+					 font-size: 24px;
+				 }
+			}
+		}
+
+		h2, h3, h4, h5, h6 {
+			color: inherit;
+			font-size: 2.4rem;
+			font-weight: 400;
+			line-height: 22px;
+			letter-spacing: 0.75px;
+			margin: 0 0 22px;
+		}
+
+		.section-title .heading + .excerpt {
+			margin-top: 22px;
+		}
+
+		p {
+			margin: 0 0 22px;
+
+			&:last-child {
+				margin: 0;
+			}
+		}
+	}
+
+	.footer-widgets {
+		.widget.invert,
+		.section-title.invert,
+		widget *:not(:link) {
+			color: inherit;
+		}
+
+		> .pure-g > .pure-u-1 {
+			padding: 44px 22px 0;
+		}
+
+		.section-title {
+			margin: 0 0 22px;
+		}
+
+		.content-vertical-massive {
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+
+		// FIXME temp fix - why happening in first place??
+		.scroll-in-animation {
+			animation: none;
+			opacity: 1;
+		}
+	}
+}
+
+

src/scss/style.scss

@@ -1,6 +1,7 @@
 @import "featured";
 @import "contact";
 @import "faq";
+@import "footer";
 
 #top-nav .ext-nav-toggle,
 .state2 body.rwavw-custom .page-border.top {