Doors page

layout/style-scss/style.scss

@@ -6544,12 +6544,166 @@ footer {
 	margin-bottom: 70px;
 
 	.scontainer-content {
+		.colors-box-header {
+			padding: 45px 50px 30px;
+			margin-bottom: 50px;
+			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;
+					}
+				}
+			}
+		}
+
 		.colors-preview {
 			display: none;
 
 			&.active {
 				display: block;
 			}
+
+			.color-tiles-rows {
+				.color-tiles {
+					&:not(:last-child) {
+						margin-bottom: 130px;
+					}
+
+					.color-tiles-title {
+					}
+					.color-tiles-data {
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						column-gap: 17px;
+						row-gap: 17px;
+						align-items: flex-start;
+						overflow: hidden;
+
+						li {
+							flex: 0 0 calc(100% / 3 - (17px * 2 / 3));
+
+							@include respond-below(md) {
+								flex: 0 0 calc(100% / 2 - (17px / 2));
+
+								&.empty {
+									display: none;
+								}
+							}
+							@include respond-below(sm) {
+								flex: 0 0 100%;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 }
+
+button.c-button {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	max-width: 250px;
+	min-height: 38px;
+	background: $cWhite;
+	border: 1px solid $cBlack;
+	padding: 0 20px;
+	outline: none !important;
+	background: $cWhite;
+	transition: background 250ms ease-in-out;
+	cursor: pointer;
+
+	&:hover {
+		background: $cBlack;
+
+		p {
+			color: $cTxtWhite;
+		}
+
+		span {
+			border-color: $cWhite;
+
+			&::before,
+			&::after {
+				background: $cWhite;
+			}
+		}
+	}
+
+	p {
+		font-weight: 300;
+		font-size: 16px;
+		line-height: 20px;
+		letter-spacing: 0.15em;
+		text-transform: uppercase;
+		margin-bottom: 0;
+		transition: color 250ms ease-in;
+	}
+
+	span {
+		position: relative;
+		width: 20px;
+		height: 20px;
+		border-radius: 100%;
+		border: 1px solid $cBlack;
+		transition: border 250ms ease-in;
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			width: 10px;
+			height: 1px;
+			background: $cBlack;
+			border-radius: 3px;
+			transform: translate(-50%, -50%);
+			transition: background 250ms ease-in;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			width: 10px;
+			height: 1px;
+			background: $cBlack;
+			border-radius: 3px;
+			transform: translate(-50%, -50%) rotate(90deg);
+			transition: width 250ms ease-in, background 250ms ease-in;
+		}
+	}
+
+	@include respond-below(md) {
+		margin-left: 30px;
+	}
+}