Merge remote-tracking branch 'upstream/main' into order

src/css/about.css

@@ -1,5 +1,9 @@
+.about-container.container {
+  margin-bottom: 80px;
+}
+
 .about-title {
-  text-shadow: 0px 4px 70px 0px rgba(0, 0, 0, 0.1);
+  text-shadow: 0px 4px 70px rgba(0, 0, 0, 0.1);
   font-size: 28px;
   font-weight: 500;
   line-height: 1.14;
@@ -8,20 +12,18 @@
 }
 
 .about-vegetables {
-  margin-top: 80px;
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
-  gap: 20px 20px;
+  gap: 20px;
 }
 .about-vegetables-text {
-  padding-bottom: 80px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 .about-text {
-  text-shadow: 0px 4px 70px 0px rgba(0, 0, 0, 0.1);
+  text-shadow: 0px 4px 70px  rgba(0, 0, 0, 0.1);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.28;
@@ -44,16 +46,13 @@
     flex-direction: row;
     gap: 20px;
     align-items: center;
-    margin-bottom: 40px;
-    margin-top: 100px;
   }
 
   .about-vegetables-text {
     display: flex;
     flex-direction: row;
     gap: 20px;
-    max-width: 616px;
-    padding-bottom: 100px;
+    max-width: 687px;
   }
 
   .about-text {
@@ -68,11 +67,15 @@
 }
 
 @media screen and (min-width: 1280px) {
+.about-container.container {
+  margin-bottom: 124px;
+}
+
   .about-vegetables {
     display: flex;
     justify-content: space-between;
-    margin-top: 124px;
   }
+
   .about-title {
     font-size: 48px;
     font-weight: 500;

src/css/catalog.css

@@ -57,6 +57,7 @@
 	margin-bottom: 40px;
 	line-height: 1.28;
 	letter-spacing: -0.28px;
+	font-size: 14px;
 }
 .catalog-item-img {
 	margin: 0 auto;
@@ -66,6 +67,7 @@
 	margin-top: 22px;
 	line-height: 1.28;
 	letter-spacing: -0.28px;
+	font-size: 14px;
 }
 .catalog-btn-box {
 	margin-top: 20px;
@@ -122,7 +124,9 @@
 	transition: -webkit-transform 0.8s ease-in-out;
 	-o-transition: transform 0.8s ease-in-out;
 	transition: transform 0.8s ease-in-out;
-	transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
+	transition:
+		transform 0.8s ease-in-out,
+		-webkit-transform 0.8s ease-in-out;
 }
 
 .catalog-item .back {
@@ -186,12 +190,19 @@
 		width: 342px;
 		height: 465px;
 	}
+	.catalog-item-type {
+		font-size: 18px;
+	}
+	.catalog-item-price {
+		font-size: 18px;
+	}
 	.catalog-item .front,
 	.catalog-item .back {
 		padding-left: 24px;
 	}
 	.catalog-item-name {
 		margin-top: 64px;
+		font-size: 28px;
 	}
 	.catalog-item-type {
 		margin-bottom: 13px;
@@ -202,6 +213,11 @@
 	.catalog-btn-box {
 		margin-top: 40px;
 	}
+	.catalog-btn {
+		width: 114px;
+		height: 114px;
+		font-size: 18px;
+	}
 }
 @media (min-width: 1280px) {
 	.none {
@@ -223,4 +239,7 @@
 		margin: unset;
 		width: 389px;
 	}
+	.catalog-item-name {
+		font-size: 32px;
+	}
 }

src/css/footer.css

@@ -11,7 +11,6 @@
 
 .footer_wrap_logo {
   display: flex;
-
   flex-direction: column;
   align-items: center;
 }
@@ -36,10 +35,15 @@
 .footer_logo_link:focus {
   fill: var(--dark-green-color);
 }
+.footer_logo_link:hover .footer_logo_svg,
+.footer_logo_link:focus .footer_logo_svg {
+  transform: rotate(90deg);
+}
 
 .footer_logo_svg {
   margin-right: 8px;
   transition: fill var(--transition);
+  transition: transform var(--transition);
 }
 .footer_nav_cnt {
   margin-bottom: 40px;
@@ -54,13 +58,19 @@
   line-height: 18px;
   letter-spacing: -0.56px;
 }
+.footer_nav_item:hover,
+.footer_nav_item:focus {
+  animation: swing 0.5s ease;
+  animation-iteration-count: 1;
+}
 .footer_nav_link:hover,
 .footer_nav_link:focus {
-  color: var(--dark-green-color);
+  filter: drop-shadow(0 0 3px var(--dark-green-color))
+    drop-shadow(0 0 5px var(--logo-color));
 }
 
 .footer_nav_link {
-  transition: color var(--transition);
+  transition: filter var(--transition);
 }
 .footer_soc_cnt {
   margin-bottom: 40px;
@@ -73,11 +83,18 @@
 .footer_soc_link:hover,
 .footer_soc_link:focus {
   border-color: var(--dark-green-color);
+  transform: translate(-3px, -3px);
+  box-shadow: 0px 2px 5px 0px rgb(49, 81, 65);
 }
 .footer_soc_link:hover .footer_soc_icon,
 .footer_soc_link:focus .footer_soc_icon {
   fill: var(--dark-green-color);
 }
+.footer_soc_link:active {
+  border: 1px solid #141414;
+  transform: translate(0px, 0px);
+  box-shadow: unset;
+}
 .footer_soc_link {
   display: flex;
   align-items: center;
@@ -87,7 +104,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  transition: border-color var(--transition);
+  transition: all var(--transition);
 }
 .footer_soc_icon {
   fill: currentColor;
@@ -108,11 +125,12 @@
   font-style: normal;
 }
 .footer_address_link {
-  transition: color var(--transition);
+  transition: filter var(--transition);
 }
 .footer_address_link:hover,
 .footer_address_link:focus {
-  color: var(--dark-green-color);
+  filter: drop-shadow(0 0 3px var(--dark-green-color))
+    drop-shadow(0 0 5px var(--logo-color));
 }
 
 @media screen and (min-width: 768px) {
@@ -121,6 +139,10 @@
     gap: 171px;
     align-items: unset;
   }
+  .footer_img {
+    min-width: 349px;
+    height: 179px;
+  }
   .footer_wrap_logo_nav {
     display: flex;
     flex-direction: column;
@@ -150,9 +172,11 @@
     display: flex;
     flex-direction: row;
     gap: 166px;
-    align-items: center;
   }
   .footer_logo_link {
     margin: 0;
   }
+  .footer_nav_list {
+    margin-top: 84px;
+  }
 }

src/css/header.css

@@ -23,8 +23,8 @@
   transition: filter 250ms linear;
   filter: none;
 }
-.header-wrapper .header-link:hover,
-.header-wrapper .header-link:focus {
+.header-link:hover,
+.header-link:focus {
   filter: drop-shadow(0 0 3px var(--dark-green-color))
     drop-shadow(0 0 5px var(--logo-color));
 }
@@ -46,7 +46,8 @@
     transform: translateX(0);
   }
 }
-.header-item:hover {
+.header-item:hover,
+.header-item:focus {
   animation: swing 0.5s ease;
   animation-iteration-count: 1;
 }
@@ -75,21 +76,23 @@
   content: attr(content);
   position: absolute;
   text-transform: uppercase;
-  width: 2px;
   overflow: hidden;
   white-space: nowrap;
   border-right: 1px solid var(--white-color);
   color: var(--logo-color);
-  animation: move 7s linear infinite;
+  animation: move 15s linear infinite;
 }
 @keyframes move {
   0% {
     width: 0%;
     color: var(--logo-color);
   }
-
+  20% {
+    width: 101%;
+    color: var(--logo-color);
+  }
   100% {
-    width: 200%;
+    width: 101%;
     color: var(--text-color);
   }
 }
@@ -99,10 +102,10 @@
   padding: 0;
   height: 20px;
   filter: none;
-  transition: filter 250ms linear, transform 250ms linear;
+  transition: transform 250ms linear;
 }
-.header-wrapper .header-button:hover,
-.header-wrapper .header-button:focus {
+.header-button:hover,
+.header-button:focus {
   transform: scale(1.2);
 }
 .headerbutton-icon {
@@ -122,10 +125,21 @@
   border: none;
   width: 24px;
   height: 24px;
+  transition: transform 250ms linear, fill 250ms linear;
+}
+.menu-toggle.js-open-menu:hover,
+.menu-toggle.js-open-menu:focus {
+  transform: scale(1.2);
+  fill: var(--dark-green-color);
 }
 .menu-toggle.js-close-menu {
   stroke: var(--logo-color);
-  transition: fill 250ms linear;
+  transition: transform 250ms linear, stroke 250ms linear;
+}
+.menu-toggle.js-close-menu:hover,
+.menu-toggle.js-close-menu:focus {
+  stroke: var(--dark-green-color);
+  transform: scale(1.2);
 }
 .mobile-menu {
   position: fixed;