src/settings/styles/global/_config.scss

@@ -7,6 +7,7 @@
 	}
 
 	--clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')};
+	--clr-primary-blue-500: #{map-get(var.$clr-primary-blue, '500')};
 
 	@each $name, $value in var.$clr-gray {
 		--clr-gray-#{$name}: #{$value};

src/settings/styles/utils/resources/_colors.scss

@@ -9,6 +9,10 @@ $clr-primary-purple: (
 	'500': #5200ff,
 );
 
+$clr-primary-blue: (
+	'500': #00c8ff,
+);
+
 $clr-gray: (
 	'100': #fafafa,
 	'150': #f0f0f0,

src/template/Header/index.module.scss

@@ -6,13 +6,16 @@
 	left: 0;
 
 	padding: 25px 0;
-	background-color: var(--clr-common-black);
 
-	@media screen and (min-width: 1025px) {
+	background-color: var(--clr-common-black);
+}
+
+.header {
+	@media only screen and (min-width: 1025px) {
 		padding: 25px 0 0;
 	}
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		min-height: 162px;
 	}
 }
@@ -22,27 +25,29 @@
 	align-items: center;
 	justify-content: space-between;
 
-	padding: 0 16px;
+	padding: 0px 16px;
 	margin-bottom: 27.14px;
+}
 
-	@media screen and (min-width: 1025px) {
+.content {
+	@media only screen and (min-width: 1025px) {
 		width: #{function.fluid(1080px, 1280px)};
 		padding: 0;
 		margin: 0 auto 27.14px;
 	}
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		width: #{function.fluid(2299.68px, 2500px)};
 		margin-bottom: 22px;
 	}
 }
 
 .logo {
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		width: function.fluid(136px, 1080px);
 	}
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		width: function.fluid(265.62px, 2299.68px);
 	}
 }
@@ -52,7 +57,6 @@
 	align-items: center;
 	justify-content: center;
 
-	min-height: auto;
 	min-height: 36px;
 	border: 2px solid var(--clr-gray-150);
 	border-radius: 5px;
@@ -61,12 +65,15 @@
 
 	input {
 		width: 100%;
-		min-height: 36px;
-		font-size: var(--txt-normal);
 		padding: 0 9px 0 16px;
+		min-height: 36px;
 		border-radius: 5px 0 0 5px;
-	}
 
+		font-size: var(--txt-normal);
+	}
+}
+
+.search {
 	button {
 		display: flex;
 		align-items: center;
@@ -77,13 +84,16 @@
 
 		background-color: var(--clr-common-white);
 	}
-	@media screen and (min-width: 1025px) {
+}
+
+.search {
+	@media only screen and (min-width: 1025px) {
 		button {
 			width: 50px;
 		}
 	}
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		&,
 		input {
 			min-height: 57px;
@@ -106,15 +116,22 @@
 	align-items: center;
 
 	a {
-		color: var(--clr-common-white);
+		display: block;
 		font-size: var(--txt-normal);
+		text-transform: uppercase;
+		color: var(--clr-common-white);
+		transition: color 200ms linear;
+
+		&:hover {
+			color: var(--clr-primary-blue-500);
+		}
 	}
 }
 
 .actions-top {
 	gap: 55px;
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		img {
 			width: 54.68px;
 			height: 54.68px;
@@ -126,7 +143,7 @@
 .open {
 	display: flex;
 
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		display: none;
 	}
 }
@@ -137,7 +154,7 @@
 		display: none;
 	}
 
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		a {
 			display: block;
 		}
@@ -145,12 +162,14 @@
 }
 
 .menu {
-	@media screen and (max-width: 1024px) {
+	@media only screen and (max-width: 1024px) {
 		position: fixed;
-		width: 100vw;
-		height: 100vh;
 		left: -100%;
 		top: 0;
+
+		width: 100vw;
+		height: 100vh;
+
 		background-color: transparent;
 		transition: 300ms ease;
 
@@ -159,40 +178,52 @@
 			height: 100vh;
 		}
 	}
+}
 
-	@media screen and (max-width: 768px) {
+.menu {
+	@media only screen and (max-width: 768px) {
 		&-content {
 			width: function.fluid(339px, 375px);
 			height: 100vh;
 		}
 	}
+}
 
+.menu {
 	.actions-bottom {
 		width: 100%;
 		height: 78px;
+
 		background-color: var(--clr-common-black);
 	}
 
-	.actions-bottom,
 	.list {
 		padding: 0 16px;
 
 		a {
 			display: block;
 			text-transform: uppercase;
+			transition: color 200ms linear;
+
+			&:hover {
+				color: var(--clr-primary-blue-500);
+			}
 		}
 	}
+}
 
+.menu {
 	.list {
 		height: calc(100% - 78px);
-		background-color: var(--clr-common-white);
 		padding-top: 31px;
 
+		background-color: var(--clr-common-white);
+
 		a {
 			margin-bottom: 12px;
 
-			font-size: var(--txt-normal);
 			font-weight: 500;
+			font-size: var(--txt-normal);
 
 			color: var(--clr-gray-400);
 		}
@@ -205,17 +236,22 @@
 	justify-content: space-between;
 }
 
-// menu styles for large devices 1025 > x
+// styles for menu is active
+
 .menu {
 	&.active {
 		left: 0;
 		background-color: #0004;
 	}
+}
 
-	@media screen and (min-width: 1025px) {
-		width: 100%;
+// menu styles for large devices 1025 > x
+.menu {
+	@media only screen and (min-width: 1025px) {
 		display: block;
 
+		width: 100%;
+
 		.list {
 			display: flex;
 			align-items: center;
@@ -242,11 +278,11 @@
 }
 
 .search-top {
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		width: function.fluid(264px, 1080px);
 	}
 
-	@media screen and (min-width: 2500px) {
+	@media only screen and (min-width: 2500px) {
 		width: function.fluid(515.62px, 2299.68px);
 	}
 }
@@ -259,7 +295,7 @@
 .search-top {
 	display: none;
 
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		display: flex;
 	}
 }
@@ -273,7 +309,7 @@
 		width: 100%;
 	}
 
-	@media screen and (min-width: 1025px) {
+	@media only screen and (min-width: 1025px) {
 		display: none;
 	}
 }