Save

layout/style-scss/eingangsturen.scss

@@ -0,0 +1,79 @@
+@import 'variables';
+@import '_mixins';
+
+.page-content {
+	overflow: hidden;
+}
+
+.box-01 {
+	padding-bottom: 150px;
+
+	@include respond-below(md) {
+		padding-bottom: 50px;
+	}
+
+	#product-preview-box {
+		.product-preview-box {
+			.scontainer-content {
+				.product-preview {
+					padding-left: 0;
+				}
+			}
+		}
+	}
+}
+
+.box-02 {
+	.scontainer-content {
+		.row {
+		}
+	}
+
+	.colors-box-header {
+		padding: 45px 50px 30px;
+		background: #f4f4f4;
+
+		h2 {
+			font-size: 30px;
+			font-weight: 300;
+			line-height: 25px;
+			letter-spacing: 0.15em;
+		}
+
+		p {
+			font-size: 16px;
+			font-weight: 300;
+			line-height: 25px;
+			letter-spacing: 0.05em;
+			margin-bottom: 0;
+		}
+
+		.c-row {
+			display: flex;
+			flex-direction: row;
+			column-gap: 40px;
+
+			.c-col {
+				&-2 {
+					display: flex;
+					justify-content: center;
+					flex: 1;
+				}
+			}
+		}
+	}
+}
+
+.box-05 {
+	&#our-catalog {
+		.scontainer-content {
+			.row {
+				display: none;
+
+				&.active {
+					display: flex !important;
+				}
+			}
+		}
+	}
+}

layout/style-scss/style.scss

@@ -5340,20 +5340,13 @@ footer {
 }
 
 //* navigation to 'product-preview-box' component
+
 #nav_tabs {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: 17px;
 	max-width: 980px;
 	padding-bottom: 120px;
 	margin-bottom: 90px;
 	margin-left: auto;
 	margin-right: auto;
-	// width: fit-content;
 
 	&::before {
 		content: '';
@@ -5364,6 +5357,18 @@ footer {
 		width: 100vw;
 		background-color: $cBlack;
 	}
+}
+
+#nav_tabs,
+#nav_tabs_colors {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 17px;
+	// width: fit-content;
 
 	li {
 		position: relative;
@@ -6534,3 +6539,17 @@ footer {
 		}
 	}
 }
+
+#product-colors-preview-box {
+	margin-bottom: 70px;
+
+	.scontainer-content {
+		.colors-preview {
+			display: none;
+
+			&.active {
+				display: block;
+			}
+		}
+	}
+}