From 1351fcad81232dcc98ea723566ae5fc34dcd34ca Mon Sep 17 00:00:00 2001
From: da <da@mail.ru>
Date: Fri, 29 Sep 2023 20:08:21 +0300
Subject: [PATCH] modify styles footer - transition

---
 Lionica/style/style.css | 102 ++++++++++++++++++++++++++++++++++------
 1 file changed, 88 insertions(+), 14 deletions(-)

diff --git a/Lionica/style/style.css b/Lionica/style/style.css
index 0e8f373..3940e74 100644
--- a/Lionica/style/style.css
+++ b/Lionica/style/style.css
@@ -123,18 +123,21 @@ margin-right: auto;
 margin-right: 52px;
 }
 
-.header-list-item{
+/* .header-list-item{
 position: relative;
-}
+} */
 
 .header-list-item:not(:last-child){
 margin-right: 52px;
 }
 
 .header-link{
+position: relative;
 font-weight: 600;
 color: #1c1c1c;
 font-size: 15px;
+
+transition: color 0.3s ease-in-out;
 }
 
 /* при клике обводит ссылку рамкой */
@@ -158,6 +161,8 @@ width: 100%;
 height: 2px;
 background-color: #3474BA;
 opacity: 0;
+
+transition: opacity 0.3s ease-in-out; /*плавность показа стиля*/
 }
 
 /* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 2, SB-видео 10.8)*/
@@ -187,6 +192,8 @@ padding: 15px 35px;
 background-color: #3172b9;
 color: #fff;
 border-radius: 4px;
+
+transition: background-color 0.3s ease-in-out;
 }
 
 /* псевдоэлменты... */
@@ -203,6 +210,8 @@ border: 1px solid #3172b9;
 outline: none;
 
 opacity: 0; /*скрыт - до момента наведения / клика */
+
+transition: opacity 0.3s ease-in-out; /* плавность показа*/
 }
 
 .btn:focus::after{
@@ -307,6 +316,8 @@ width: 270px;
 border: 1px solid #e4e4e4;
 border-radius: 5px;
 
+transition: background-color  0.3s ease-in-out,  border-color 0.3s ease-in-out; /*плавность показа*/; /*плавность показа*/
+
 } 
 
 /* навдение мышкой, sb 8.10 */
@@ -322,8 +333,9 @@ margin-right: 30px;
 /* svg-иконки: борцы, сердце, карты, молот */
 .services-item-icon{
 fill: #3172B9; /* включить цвет, вместо fill:none в html'e*/
-
 margin-bottom: 25px;
+
+transition: fill 0.3s ease-in-out; /*плавность показа*/
 }
 
 /* окрас svg-иконки в белый цвет (при наведении) */
@@ -339,6 +351,8 @@ font-weight: 600;
 font-size: 20px;
 line-height: 130%;
 color: #1c1c1c;
+
+transition: color 0.3s ease-in-out; /*плавность показа*/
 }
 
 /* при наведении  текст станет белым */
@@ -352,6 +366,8 @@ text-align: center;
 font-size: 14px;
 line-height: 150%;
 color: #787878;
+
+transition: color 0.3s ease-in-out; /*плавность показа*/
 }
 
 /* при наведении  описание станет белым */
@@ -386,6 +402,8 @@ border-radius: 6px;
 display: flex;
 position: relative;
 width: 100%;
+
+transition: background-color 0.3s ease-in-out; /*плавность показа*/
 }
 
 /* псевдоклассы hover при наведении на карточки */
@@ -448,6 +466,8 @@ color: #787878;
 font-size: 10px;
 font-weight: 400;
 line-height: 150%;  
+
+transition: color 0.3s ease-in-out; /*плавность показа*/
 }
 
 .blog-preview-title{
@@ -457,6 +477,7 @@ font-size: 20px;
 font-weight: 600;
 line-height: 130%; 
 
+transition: color 0.3s ease-in-out; /*плавность показа*/
 }
 
 .blog-preview-descr{
@@ -466,6 +487,8 @@ color: #787878;
 font-size: 14px; 
 font-weight: 400;
 line-height: 150%; /* 21px */
+
+transition: color 0.3s ease-in-out; /*плавность показа*/
 }
 
 .articles-item:not(:nth-child(2n)){
@@ -561,7 +584,7 @@ line-height: 180%; /* 25.2px */
 .contacts{
 border-bottom: 1px solid #DADADA;
 }
-
+  
 .contacts-address{
 font-style: normal;
 }
@@ -576,6 +599,13 @@ background-size: 29px 29px;
 padding-top: 48px;
 }
 
+.contacts-item-link {
+ font-size: 14px;
+ line-height: 180%;
+ color: #787878;
+
+transition: color 0.3s ease-in-out; 
+}
 /* focus over active  для Контактов*/
 .contacts-item-link:focus{
 outline: 1px solid #71A7E2;
@@ -624,11 +654,7 @@ font-size: 14px;
 line-height: 180%; /* 25.2px */
 }
 
-.contacts-item-link {
- font-size: 14px;
- line-height: 180%;
- color: #787878;
-}
+
 
 
 /* .contacts-item-link:not(:last-child){
@@ -652,7 +678,7 @@ margin-bottom: 30px;
 
 .form{
 padding: 0 55px;
-}
+} 
 
 .form-top{
 display: flex;
@@ -678,6 +704,8 @@ border: 1px solid #DADADA;
 border-radius: 50px;
 box-sizing: border-box;
 padding: 16px 28px;
+
+transition: background-color 0.3s ease-in-out, border-color 0.3s;
 }
 
 .form-input:nth-child(-n+2){
@@ -705,6 +733,8 @@ border: 1px solid #DADADA;
 border-radius: 50px;
 box-sizing: border-box;
 padding: 16px 28px;
+
+transition: background-color 0.3s ease-in-out, border-color 0.3s; /*плавность показа*/
 }
 
 .form-select:focus{
@@ -727,6 +757,8 @@ border-radius: 20px;
 box-sizing: border-box;
 resize: none;
 padding: 16px 28px;
+
+transition: background-color 0.3s ease-in-out, border-color 0.3s;
 }
 
 .form-textarea:focus{
@@ -808,12 +840,51 @@ line-height: 16px;
 color: #787878;
 
 }
-  
-.footer-link{
+ 
+/*focus active hover на слова в футере*/
+.footer-item{
+position: relative;
 font-weight: 600;
+color: #1c1c1c;
 font-size: 15px;
-line-height: 20px;
-color: #787878;
+
+transition: color 0.3s ease-in-out;
+}
+
+/* при клике обводит ссылку рамкой */
+.footer-item:focus{
+outline-offset: 2px;
+outline: 1px solid #71A7E2;
+}
+
+/* цвет ссфлки при наведении */
+.footer-item:hover{
+color: #71A7E2;
+}
+
+/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 1, SB-видео 10.8)*/
+.footer-item::after{
+content: "";
+position: absolute;
+left: 0;
+bottom: 0;
+width: 100%;
+height: 2px;
+background-color: #3474BA;
+opacity: 0;
+
+transition: opacity 0.3s ease-in-out; /*плавность показа стиля*/
+}
+
+/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 2, SB-видео 10.8)*/
+.footer-item:active{
+color: #3172b9;
+outline: none;
+}
+
+/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 3, SB-видео 10.8)*/
+.footer-item:active::after{
+opacity: 1;
 }
 
 .footer-item:not(:last-child){
@@ -824,6 +895,7 @@ margin-right: 28px;
 margin-right: 56px;
 }
 
+/*тр иконки соц.сетей: Х in mail*/
 .social{
 align-items: center;
 }
@@ -851,6 +923,8 @@ background-repeat: no-repeat; */
 /* стили для svg-иконок */
 .social-link svg{
 fill: #000;
+/* плавность наведения*/
+transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
 }
 
 .social-link-tw{