From f2f88c3520c2f4ad4e59546b6299418dfb9c7eca Mon Sep 17 00:00:00 2001
From: "web_103.2" <broadex@list.ru>
Date: Thu, 22 Oct 2026 14:55:42 +0300
Subject: [PATCH] =?UTF-8?q?task=2017075=20|=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20rticle-social?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../themes/hantico/assets/css/style.css       | 83 +++++++++++++++----
 wp-content/themes/hantico/single-article.php  | 20 +++--
 2 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css
index 469f1f6..ae58f85 100644
--- a/wp-content/themes/hantico/assets/css/style.css
+++ b/wp-content/themes/hantico/assets/css/style.css
@@ -6927,35 +6927,86 @@ h4 {
 }
 
 .article-social{
-  margin-top: 20px;
+  margin-top: 24px;
 
-  padding: 25px 30px;
-  background-color: var(--color-light);
-  border-radius: var(--radius-sm);
+  padding: 23px;
+
+  border-radius: 30px;
+  border: 1px solid #EDEDED;
 
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 24px;
 }
 .article-social__title{
-  font-size: var(--fs-h3-sm);
-    line-height: 1.2;
-    font-weight: 600;
-    color: var(--color-dark);
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 110%; /* 28.6px */
+  letter-spacing: -0.26px;
+  color: var(--color-dark);
+}
+.article-social__title span{
+  color: var(--color-red);
 }
 .article-social__text{
   font-size: 18px;
-  line-height: 1.2;
+  line-height: 150%; /* 27px */
+  letter-spacing: -0.18px;
+  color: var(--color-text);
 }
 .article-social__list{
+  padding: 6px;
+
+  border-radius: 12px;
+  background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%), #F0F0F0;
+
   display: flex;
-  gap: 10px;
+  align-items: center;
+  gap: 8px;
 }
-.article-social__list > .footer-socials__item {
-  flex: 1;
-  width: auto;
-  height: 44px;
-  aspect-ratio: auto;
+.article-social__list span{
+  width: 100%;
+
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 150%; /* 24px */
+  letter-spacing: -0.16px;
+  color: var(--color-text);
+}
+.article-social__list a {
+  flex-shrink: 0;
+
+  width: 40px;
+  height: 40px;
+
+  transition: all .2s ease-out;
+}
+.article-social__list a:hover{
+  opacity: .8;
+}
+
+@media (max-width: 767.98px) {
+  .article-social{
+    border-radius: 20px;
+
+    gap: 12px;
+  }
+
+  .article-social__title{
+    font-size: 16px;
+    line-height: 110%; /* 17.6px */
+    letter-spacing: -0.16px;
+  }
+  .article-social__text{
+    font-size: 13px;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: -0.13px;
+  }
+  .article-social__list span{
+    font-size: 13px;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: -0.13px;
+  }
 }
 
 .blog-links{
diff --git a/wp-content/themes/hantico/single-article.php b/wp-content/themes/hantico/single-article.php
index 52dbfa2..4f61bc9 100644
--- a/wp-content/themes/hantico/single-article.php
+++ b/wp-content/themes/hantico/single-article.php
@@ -168,7 +168,7 @@
 
 							<div class="article-social">
 								<p class="article-social__title">
-									Работайте проще и зарабатывайте больше!
+									Работайте <span>проще</span> <br>и зарабатывайте <span>больше!</span>
 								</p>
 
 								<p class="article-social__text">
@@ -176,12 +176,22 @@
 								</p>
 
 								<div class="article-social__list">
-									<a href="<?php echo $footer_socials['vk']; ?>" class="footer-socials__item" target="_blank" rel="noopener">
-										<img src="<?php echo get_theme_file_uri('assets/img/icons/vk.svg'); ?>" alt="VK" loading="lazy">
+									<span>
+										Подписаться
+									</span>
+
+									<a href="<?php echo $footer_socials['vk']; ?>" target="_blank" rel="noopener">
+										<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+											<rect width="40" height="40" rx="12" fill="white"/>
+											<path d="M12.9336 12.933C11.8184 14.0588 11.8184 15.859 11.8184 19.4646V20.1019C11.8184 23.7022 11.8184 25.5024 12.9336 26.6335C14.0593 27.7486 15.8595 27.7486 19.4652 27.7486H20.1024C23.7027 27.7486 25.5029 27.7486 26.634 26.6335C27.7491 25.5077 27.7491 23.7075 27.7491 20.1019V19.4646C27.7491 15.8643 27.7491 14.0641 26.634 12.933C25.5082 11.8179 23.708 11.8179 20.1024 11.8179H19.4652C15.8648 11.8179 14.0646 11.8179 12.9336 12.933ZM14.5054 16.6661H16.3321C16.3905 19.7036 17.7287 20.9887 18.7908 21.2542V16.6661H20.506V19.2841C21.5521 19.1726 22.6566 17.9778 23.0283 16.6608H24.7382C24.5987 17.3425 24.3202 17.9881 23.92 18.5573C23.5198 19.1265 23.0066 19.6071 22.4124 19.9691C23.0756 20.2991 23.6614 20.766 24.131 21.339C24.6005 21.912 24.9433 22.5781 25.1365 23.2933H23.2514C22.8478 22.0348 21.8388 21.0577 20.506 20.9249V23.2933H20.2936C16.6614 23.2933 14.5904 20.8081 14.5054 16.6661Z" fill="#215CFE"/>
+										</svg>
 									</a>
 									
-									<a href="<?php echo $footer_socials['telegram']; ?>" class="footer-socials__item" target="_blank" rel="noopener">
-										<img src="<?php echo get_theme_file_uri('assets/img/icons/telegram.svg'); ?>" alt="Telegram" loading="lazy">
+									<a href="<?php echo $footer_socials['telegram']; ?>" target="_blank" rel="noopener">
+										<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+											<rect width="40" height="40" rx="12" fill="white"/>
+											<path d="M11.3057 19.5545L15.4477 20.8499L25.2824 15.3131C25.4252 15.2331 25.5712 15.4114 25.4484 15.5157L18.003 21.8266L17.7265 25.3597C17.7219 25.4188 17.7371 25.4779 17.7698 25.529C17.8026 25.5801 17.8514 25.6208 17.9099 25.6457C17.9684 25.6706 18.0337 25.6786 18.0972 25.6686C18.1607 25.6585 18.2193 25.6309 18.2654 25.5895L20.5577 23.5135L24.7486 26.4347C25.2001 26.7498 25.8542 26.5277 25.9758 26.0183L28.8938 13.8169C29.0604 13.121 28.3195 12.5334 27.5972 12.7881L11.2851 18.5405C10.7731 18.7212 10.7873 19.3923 11.3057 19.5545Z" fill="#3292DD"/>
+										</svg>
 									</a>
 								</div>
 							</div>