task 17075 | переделал socials

This commit is contained in:
web_103.2 committed 2026-10-22 17:35:24 +03:00
1 parent f2f88c3520
commit a2fde2a193
2 files changed
+174 -189

No files matched your search

+95 -130
View File
@@ -2268,164 +2268,129 @@ h4 {
.socials { .socials {
margin-top: var(--space-section); margin-top: var(--space-section);
padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px); padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px);
background: var(--gradient-grey);
} }
.socials-title { .socials-title {
text-align: center; /* text-align: center; */
} }
.socials-body { .socials-main{
display: grid; margin-top: 50px;
grid-template-columns: 1.15fr 1fr;
column-gap: clamp(40px, -72.5px + 14.6484vw, 115px);
margin-top: clamp(25px, 14.6409px + 2.7624vw, 50px);
} }
.socials-grid { .socials-grid{
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(4, 1fr);
gap: 6px; gap: 20px;
margin-top: clamp(25px, -75px + 9.7656vw, 50px);
} }
.socials-item { .socials-item{
display: grid; padding: 19px 29px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
grid-template-columns: auto 1fr; gap: 20px;
column-gap: 25px;
padding: 15px 30px; border-radius: 30px;
border-radius: 15px; border: 1px solid #EDEDED;
color: var(--main-color);
background-color: #fff; transition: all .2s ease-out;
transition: color 0.25s ease, background-color 0.25s ease;
} }
.socials-item:hover { .socials-item--vk .socials-item__icon{
color: #fff; border: 1px solid rgba(220, 232, 242, 0.50);
background-color: var(--main-color); background: #F5F8FE;
} }
.socials-item:hover .socials-item__icon::before, .socials-item:hover .socials-item__icon::after { .socials-item--telegram .socials-item__icon{
background-color: #fff; border: 1px solid rgba(220, 232, 242, 0.50);
background: #F3FAFF;
} }
.socials-item__icon { .socials-item--youtube .socials-item__icon{
border: 1px solid rgba(220, 232, 242, 0.50);
background: #FCF3F5;
}
.socials-item--instagram {}
.socials-item--tiktok {}
.socials-item--threads {}
.socials-item--dzen {}
.socials-item--rutube .socials-item__icon{
border: 1px solid rgba(220, 232, 242, 0.50);
background: rgba(255, 173, 190, 0.08);
}
.socials-item__icon{
width: 63px;
height: 63px;
display: flex; display: flex;
align-items: flex-start; justify-content: center;
align-items: center;
border-radius: 20px;
border: 1px solid rgba(220, 232, 242, 0.50);
background: rgba(212, 206, 210, 0.08);
transition: all .2s ease-out;
} }
.socials-item__icon::before { .socials-item__name{
content: ""; text-align: center;
display: block; font-size: 20px;
width: 32px; line-height: 110%; /* 22px */
height: 32px; letter-spacing: -0.2px;
background-color: var(--icon-color); color: var(--color-text);
mask: var(--social-icon) center no-repeat;
-webkit-mask: var(--social-icon) center no-repeat; transition: all .2s ease-out;
mask-size: contain;
-webkit-mask-size: contain;
transition: background-color 0.25s ease;
} }
.socials-item__name { .socials-item:hover{
font-size: 18px; background: var(--color-dark);
line-height: 1.2; border-color: var(--color-dark);
} }
.socials-item--vk { .socials-item:hover .socials-item__icon{
--main-color: #366cfe; transform: translateY(-5px);
--icon-color: currentColor; background: var(--color-light);
--social-icon: url(../img/icons/vk.svg);
} }
.socials-item--instagram { .socials-item:hover .socials-item__name{
--main-color: #000; color: var(--color-light);
--icon-color: currentColor;
--social-icon: url(../img/icons/instagram.svg); transform: scale(1.05);
} }
.socials-item--youtube { .socials-footnote{
--main-color: #e80b2e; margin-top: 50px;
--icon-color: currentColor;
--social-icon: url(../img/icons/youtube.svg);
}
.socials-item--threads {
--main-color: #000;
--icon-color: currentColor;
--social-icon: url(../img/icons/threads.svg);
}
.socials-item--tiktok {
--main-color: #000;
--icon-color: currentColor;
--social-icon: url(../img/icons/tiktok.svg);
}
.socials-item--telegram {
--main-color: #3292dd;
--icon-color: currentColor;
--social-icon: url(../img/icons/telegram.svg);
}
.socials-item--dzen {
--main-color: #000;
--icon-color: #2c3036;
--social-icon: url(../img/icons/dzen.svg);
}
.socials-item--rutube {
--main-color: #0e0333;
--icon-color: currentColor;
--social-icon: url(../img/icons/rutube.svg);
}
.socials-item--rutube .socials-item__icon::after {
content: "";
display: block;
width: 8px;
aspect-ratio: 1;
border-radius: 50%;
background-color: #ed143b;
transition: background-color 0.25s ease;
}
.socials-footnote {
margin-block: clamp(30px, -90px + 11.7188vw, 60px);
font-size: 11px; font-size: 11px;
line-height: 1.2; line-height: 110%; /* 12.1px */
} letter-spacing: -0.11px;
.socials-img { color: var(--color-text);
display: flex;
align-items: flex-end;
}
.socials-img img {
width: 100%;
} }
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
.socials-grid { .socials-grid{
margin-top: 0; grid-template-columns: repeat(3, 1fr);
}
.socials-item {
column-gap: 15px;
padding: 10px 15px;
border-radius: 10px;
} }
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.socials-body { .socials-grid{
grid-template-columns: 1fr; grid-template-columns: repeat(2, 1fr);
} }
.socials-footnote { .socials-item{
margin-bottom: 0; padding: 13.5px 10px 15.5;
border-radius: 10px;
gap: 14px;
} }
.socials-img { .socials-item__icon{
width: clamp(345px, 101.6794px + 64.8855vw, 600px); width: 50px;
margin: 40px auto 0; height: 50px;
border-radius: 14px;
} }
} .socials-item__name{
@media (max-width: 575.98px) { font-size: 15px;
.socials-item { letter-spacing: -0.15px;
column-gap: 10px;
} }
.socials-item__icon::before { .socials-footnote{
width: 28px;
height: 28px;
}
.socials-item__name {
font-size: 16px;
}
.socials-item--rutube .socials-item__icon::after {
width: 6px;
}
.socials-footnote {
margin-top: 20px;
}
.socials-img {
margin-top: 30px; margin-top: 30px;
font-size: 11px;
line-height: 120%; /* 13.2px */
letter-spacing: -0.11px;
} }
} }
.reviews--block { .reviews--block {
@@ -1,70 +1,90 @@
<?php <?php
$socials_title = get_field('socials_title', 'option'); $socials_title = get_field('socials_title', 'option');
$socials_img = get_field('socials_img', 'option');
$socials = get_field('socials', 'option'); $socials = get_field('socials', 'option');
if ($socials_title && $socials_img && $socials) : if ($socials_title && $socials) :
?> ?>
<section class="socials"> <section class="socials">
<div class="container"> <div class="container">
<h2 class="socials-title"><?php echo $socials_title; ?></h2> <h2 class="socials-title"><?php echo $socials_title; ?></h2>
<div class="socials-body"> <div class="socials-main">
<div class="socials-main"> <div class="socials-grid">
<div class="socials-grid"> <?php if ($socials['vk']) { ?>
<?php if ($socials['vk']) { ?> <a href="<?php echo $socials['vk']; ?>" class="socials-item socials-item--vk" target="_blank" rel="noopener">
<a href="<?php echo $socials['vk']; ?>" class="socials-item socials-item--vk" target="_blank" rel="noopener"> <div class="socials-item__icon">
<div class="socials-item__icon"></div> <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
<div class="socials-item__name">Вконтакте</div> <path d="M1.61 1.61C2.38419e-07 3.23533 0 5.83433 0 11.04V11.96C0 17.158 2.38419e-07 19.757 1.61 21.39C3.23533 23 5.83433 23 11.04 23H11.96C17.158 23 19.757 23 21.39 21.39C23 19.7647 23 17.1657 23 11.96V11.04C23 5.842 23 3.243 21.39 1.61C19.7647 2.38419e-07 17.1657 0 11.96 0H11.04C5.842 0 3.243 2.38419e-07 1.61 1.61ZM3.87933 6.99967H6.51667C6.601 11.385 8.533 13.2403 10.0663 13.6237V6.99967H12.5427V10.7793C14.053 10.6183 15.6477 8.89333 16.1843 6.992H18.653C18.4516 7.97617 18.0494 8.90824 17.4717 9.73004C16.8939 10.5518 16.1529 11.2457 15.295 11.7683C16.2526 12.2448 17.0983 12.9189 17.7762 13.7462C18.4542 14.5735 18.949 15.5351 19.228 16.5677H16.5063C15.9237 14.7507 14.467 13.34 12.5427 13.1483V16.5677H12.236C6.992 16.5677 4.002 12.9797 3.87933 6.99967Z" fill="#215CFE"/>
</a> </svg>
<?php } if ($socials['instagram']) { ?> </div>
<a href="<?php echo $socials['instagram']; ?>" class="socials-item socials-item--instagram" target="_blank" rel="noopener"> <div class="socials-item__name">VK</div>
<div class="socials-item__icon"></div> </a>
<div class="socials-item__name">Instagram *</div> <?php } if ($socials['telegram']) { ?>
</a> <a href="<?php echo $socials['telegram']; ?>" class="socials-item socials-item--telegram" target="_blank" rel="noopener">
<?php } if ($socials['youtube']) { ?> <div class="socials-item__icon">
<a href="<?php echo $socials['youtube']; ?>" class="socials-item socials-item--youtube" target="_blank" rel="noopener"> <svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20" fill="none">
<div class="socials-item__icon"></div> <path d="M0.572859 9.85649L6.55291 11.7267L20.7518 3.7329C20.958 3.61745 21.1687 3.87485 20.9914 4.02535L10.2422 13.1368L9.84286 18.2376C9.83634 18.3231 9.85818 18.4083 9.90548 18.4821C9.95278 18.5558 10.0233 18.6146 10.1077 18.6506C10.1921 18.6866 10.2864 18.6981 10.3781 18.6836C10.4698 18.6691 10.5545 18.6293 10.621 18.5694L13.9305 15.5722L19.9811 19.7897C20.6329 20.2446 21.5773 19.9239 21.7528 19.1885L25.9658 1.57284C26.2063 0.568057 25.1366 -0.280233 24.0938 0.0874736L0.543145 8.3925C-0.196004 8.65332 -0.175575 9.62218 0.572859 9.85649Z" fill="#3292DD"/>
<div class="socials-item__name">YouTube</div> </svg>
</a> </div>
<?php } if ($socials['threads']) { ?> <div class="socials-item__name">Telegram</div>
<a href="<?php echo $socials['threads']; ?>" class="socials-item socials-item--threads" target="_blank" rel="noopener"> </a>
<div class="socials-item__icon"></div> <?php } if ($socials['youtube']) { ?>
<div class="socials-item__name">Threads</div> <a href="<?php echo $socials['youtube']; ?>" class="socials-item socials-item--youtube" target="_blank" rel="noopener">
</a> <div class="socials-item__icon">
<?php } if ($socials['tiktok']) { ?> <svg xmlns="http://www.w3.org/2000/svg" width="27" height="22" viewBox="0 0 27 22" fill="none">
<a href="<?php echo $socials['tiktok']; ?>" class="socials-item socials-item--tiktok" target="_blank" rel="noopener"> <path d="M13.5 0C14.6543 0 15.8382 0.0302501 16.9857 0.0797501L18.3411 0.14575L19.6385 0.224125L20.8535 0.308L21.9632 0.396C23.1676 0.489351 24.3011 1.0126 25.1639 1.87358C26.0268 2.73456 26.5637 3.87804 26.6801 5.10262L26.734 5.687L26.8353 6.93825C26.9298 8.23487 27 9.64837 27 11C27 12.3516 26.9298 13.7651 26.8353 15.0618L26.734 16.313L26.6801 16.8974C26.5636 18.1222 26.0266 19.2658 25.1634 20.1268C24.3003 20.9878 23.1665 21.511 21.9618 21.604L20.8548 21.6906L19.6398 21.7759L18.3411 21.8542L16.9857 21.9202C15.8245 21.9715 14.6623 21.9981 13.5 22C12.3377 21.9981 11.1755 21.9715 10.0143 21.9202L8.6589 21.8542L7.36155 21.7759L6.14655 21.6906L5.03685 21.604C3.8324 21.5106 2.69892 20.9874 1.83606 20.1264C0.973199 19.2654 0.436308 18.122 0.31995 16.8974L0.26595 16.313L0.1647 15.0618C0.0618742 13.7103 0.00693852 12.3555 0 11C0 9.64837 0.0702 8.23487 0.1647 6.93825L0.26595 5.687L0.31995 5.10262C0.436262 3.87826 0.972961 2.73495 1.83555 1.874C2.69813 1.01304 3.83129 0.48966 5.0355 0.396L6.14385 0.308L7.35885 0.224125L8.65755 0.14575L10.0129 0.0797501C11.1746 0.0284999 12.3372 0.00191067 13.5 0ZM10.8 7.66562V14.3344C10.8 14.9696 11.475 15.3656 12.015 15.0494L17.685 11.715C17.8084 11.6427 17.9109 11.5385 17.9821 11.413C18.0534 11.2874 18.0909 11.145 18.0909 11C18.0909 10.855 18.0534 10.7126 17.9821 10.587C17.9109 10.4615 17.8084 10.3573 17.685 10.285L12.015 6.952C11.8918 6.87957 11.7521 6.84145 11.6099 6.84147C11.4676 6.84149 11.3279 6.87966 11.2048 6.95213C11.0816 7.0246 10.9794 7.12883 10.9083 7.25432C10.8373 7.3798 10.7999 7.52214 10.8 7.667V7.66562Z" fill-rule="evenodd" clip-rule="evenodd" fill="#E80B2E"/>
<div class="socials-item__icon"></div> </svg>
<div class="socials-item__name">TikTok</div> </div>
</a> <div class="socials-item__name">YouTube</div>
<?php } if ($socials['telegram']) { ?> </a>
<a href="<?php echo $socials['telegram']; ?>" class="socials-item socials-item--telegram" target="_blank" rel="noopener"> <?php } if ($socials['instagram']) { ?>
<div class="socials-item__icon"></div> <a href="<?php echo $socials['instagram']; ?>" class="socials-item socials-item--instagram" target="_blank" rel="noopener">
<div class="socials-item__name">Telegram</div> <div class="socials-item__icon">
</a> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<?php } if ($socials['dzen']) { ?> <path d="M7.29949 0C6.17949 0 5.29128 -8.0237e-08 4.57641 0.0584615C3.8441 0.117949 3.22564 0.243077 2.66051 0.530256C1.74358 0.997615 0.998199 1.74335 0.531282 2.66051C0.243077 3.22462 0.117949 3.8441 0.0584615 4.57641C-8.0237e-08 5.29128 0 6.17949 0 7.29949V12.7005C0 13.8205 -8.0237e-08 14.7087 0.0584615 15.4236C0.117949 16.1559 0.243077 16.7744 0.530256 17.3405C0.99779 18.2571 1.74351 19.0021 2.66051 19.4687C3.22462 19.7569 3.8441 19.8821 4.57641 19.9415C5.29128 20 6.17949 20 7.29949 20H12.7005C13.8205 20 14.7087 20 15.4236 19.9415C16.1559 19.8821 16.7744 19.7569 17.3405 19.4697C18.2569 19.0025 19.0019 18.2571 19.4687 17.3405C19.7569 16.7744 19.8821 16.1559 19.9415 15.4236C20 14.7087 20 13.8205 20 12.7005V7.29949C20 6.17949 20 5.29128 19.9415 4.57641C19.8821 3.8441 19.7569 3.22564 19.4697 2.66051C19.0027 1.74373 18.2573 0.998374 17.3405 0.531282C16.7744 0.243077 16.1559 0.117949 15.4236 0.0584615C14.7087 -8.0237e-08 13.8205 0 12.7005 0H7.29949ZM14.359 4.35897C14.359 4.15496 14.44 3.95931 14.5843 3.81505C14.7285 3.67079 14.9242 3.58974 15.1282 3.58974H15.641C15.845 3.58974 16.0407 3.67079 16.185 3.81505C16.3292 3.95931 16.4103 4.15496 16.4103 4.35897C16.4103 4.56299 16.3292 4.75864 16.185 4.9029C16.0407 5.04716 15.845 5.12821 15.641 5.12821H15.1282C14.9242 5.12821 14.7285 5.04716 14.5843 4.9029C14.44 4.75864 14.359 4.56299 14.359 4.35897ZM7.99282 6.13128C8.50182 5.85673 9.06037 5.68621 9.63592 5.62965C10.2115 5.5731 10.7925 5.63164 11.3452 5.80186C11.8979 5.97209 12.4112 6.2506 12.8552 6.62116C13.2993 6.99173 13.6651 7.44695 13.9314 7.96029C14.1977 8.47364 14.3593 9.03485 14.4066 9.61124C14.4539 10.1876 14.386 10.7677 14.2069 11.3176C14.0278 11.8675 13.7411 12.3762 13.3634 12.8142C12.9858 13.2522 12.5247 13.6107 12.0072 13.8687C10.9834 14.3791 9.80007 14.4667 8.71236 14.1124C7.62466 13.7582 6.71979 12.9906 6.19298 11.9752C5.66616 10.9598 5.55961 9.77796 5.89632 8.6847C6.23303 7.59144 6.98601 6.67435 7.99282 6.13128Z" fill="black"/>
<a href="<?php echo $socials['dzen']; ?>" class="socials-item socials-item--dzen" target="_blank" rel="noopener"> </svg>
<div class="socials-item__icon"></div> </div>
<div class="socials-item__name">Дзен</div> <div class="socials-item__name">Instagram *</div>
</a> </a>
<?php } if ($socials['rutube']) { ?> <?php } if ($socials['tiktok']) { ?>
<a href="<?php echo $socials['rutube']; ?>" class="socials-item socials-item--rutube" target="_blank" rel="noopener"> <a href="<?php echo $socials['tiktok']; ?>" class="socials-item socials-item--tiktok" target="_blank" rel="noopener">
<div class="socials-item__icon"></div> <div class="socials-item__icon">
<div class="socials-item__name">Rutube</div> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="22" viewBox="0 0 19 22" fill="none">
</a> <path d="M15.074 3.44667C14.2459 2.49276 13.7894 1.26793 13.7895 0H10.0453V15.1556C10.017 15.9759 9.67391 16.7531 9.08838 17.3232C8.50286 17.8932 7.72069 18.2116 6.90689 18.2111C5.18622 18.2111 3.75638 16.7933 3.75638 15.0333C3.75638 12.9311 5.76786 11.3544 7.83992 12.0022V8.14C3.65944 7.57778 0 10.8533 0 15.0333C0 19.1033 3.34439 22 6.89477 22C10.6996 22 13.7895 18.8833 13.7895 15.0333V7.34556C15.3078 8.44537 17.1307 9.03546 19 9.03222V5.25556C19 5.25556 16.7219 5.36556 15.074 3.44667Z" fill="black"/>
<?php } ?> </svg>
</div> </div>
<?php if ($socials['instagram']) : ?> <div class="socials-item__name">TikTok</div>
<div class="socials-footnote">*Instagram принадлежат компании Meta, признанной экстремистской на территории РФ</div> </a>
<?php endif; ?> <?php } if ($socials['threads']) { ?>
</div> <a href="<?php echo $socials['threads']; ?>" class="socials-item socials-item--threads" target="_blank" rel="noopener">
<div class="socials-img"> <div class="socials-item__icon">
<img <svg xmlns="http://www.w3.org/2000/svg" width="23" height="26" viewBox="0 0 23 26" fill="none">
src="<?php echo $socials_img['sizes']['large']; ?>" <path d="M17.4061 12.0505C17.2941 11.9968 17.1803 11.9452 17.0651 11.8957C16.8644 8.19788 14.8438 6.08089 11.4511 6.05922C11.4357 6.05912 11.4204 6.05912 11.4051 6.05912C9.37576 6.05912 7.68802 6.92533 6.64923 8.50155L8.51513 9.78153C9.29115 8.60415 10.509 8.35315 11.406 8.35315C11.4163 8.35315 11.4267 8.35315 11.437 8.35324C12.5541 8.36037 13.397 8.68517 13.9426 9.31856C14.3397 9.7797 14.6052 10.4169 14.7367 11.2211C13.7463 11.0528 12.6751 11.001 11.5301 11.0667C8.30439 11.2525 6.23067 13.1338 6.36995 15.7479C6.44062 17.0739 7.10121 18.2146 8.22995 18.9598C9.18428 19.5898 10.4134 19.8979 11.6908 19.8281C13.3778 19.7356 14.7012 19.092 15.6245 17.9151C16.3257 17.0213 16.7692 15.8631 16.965 14.4037C17.769 14.8889 18.3648 15.5274 18.6939 16.295C19.2534 17.5997 19.286 19.7437 17.5366 21.4917C16.0038 23.023 14.1613 23.6855 11.3768 23.7059C8.28807 23.683 5.95208 22.6924 4.43328 20.7617C3.01106 18.9537 2.27604 16.3424 2.24862 13C2.27604 9.65762 3.01106 7.04622 4.43328 5.23828C5.95208 3.30754 8.28803 2.31698 11.3768 2.29403C14.488 2.31716 16.8647 3.31248 18.4416 5.25254C19.2148 6.20393 19.7978 7.40036 20.1821 8.79535L22.3687 8.21196C21.9028 6.49488 21.1698 5.01525 20.1723 3.78815C18.1507 1.3009 15.194 0.0264263 11.3844 0H11.3692C7.5673 0.0263345 4.64372 1.30566 2.67967 3.80241C0.931924 6.0242 0.0303875 9.11567 9.47912e-05 12.9909L0 13L9.47912e-05 13.0091C0.0303875 16.8843 0.931924 19.9759 2.67967 22.1976C4.64372 24.6943 7.5673 25.9737 11.3692 26H11.3844C14.7645 25.9766 17.147 25.0916 19.1097 23.1307C21.6776 20.5652 21.6003 17.3494 20.754 15.3753C20.1467 13.9597 18.9891 12.8099 17.4061 12.0505ZM11.5701 17.5374C10.1563 17.617 8.68757 16.9825 8.61515 15.6233C8.56147 14.6155 9.33235 13.491 11.6568 13.3571C11.923 13.3417 12.1842 13.3342 12.4409 13.3342C13.2852 13.3342 14.0751 13.4162 14.7932 13.5732C14.5253 16.9183 12.9542 17.4614 11.5701 17.5374Z" fill="black"/>
width="<?php echo $socials_img['sizes']['large-width']; ?>" </svg>
height="<?php echo $socials_img['sizes']['large-height']; ?>" </div>
alt="<?php echo $socials_img['alt']; ?>" <div class="socials-item__name">Threads</div>
loading="lazy" </a>
/> <?php } if ($socials['dzen']) { ?>
<a href="<?php echo $socials['dzen']; ?>" class="socials-item socials-item--dzen" target="_blank" rel="noopener">
<div class="socials-item__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
<path d="M26.8618 13.5748V13.287C20.9138 13.0951 18.1989 12.9512 16.0212 10.8407C13.9106 8.66294 13.7571 5.94797 13.5748 0H13.287C13.0951 5.94797 12.9512 8.66294 10.8407 10.8407C8.66294 12.9512 5.94797 13.1047 0 13.287V13.5748C5.94797 13.7667 8.66294 13.9106 10.8407 16.0212C12.9512 18.1989 13.1047 20.9138 13.287 26.8618H13.5748C13.7667 20.9138 13.9106 18.1989 16.0212 16.0212C18.1989 13.9106 20.9138 13.7571 26.8618 13.5748Z" fill="black"/>
</svg>
</div>
<div class="socials-item__name">Дзен</div>
</a>
<?php } if ($socials['rutube']) { ?>
<a href="<?php echo $socials['rutube']; ?>" class="socials-item socials-item--rutube" target="_blank" rel="noopener">
<div class="socials-item__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="19" viewBox="0 0 23 19" fill="none">
<path d="M15.7144 8.48495H4.67975V4.11838H15.7144C16.359 4.11838 16.8072 4.23075 17.0321 4.42692C17.257 4.62313 17.3963 4.98701 17.3963 5.51858V7.08645C17.3963 7.64651 17.257 8.0104 17.0321 8.2066C16.8072 8.40278 16.359 8.48665 15.7144 8.48665V8.48495ZM16.4715 0.00166984H0V18.6753H4.67975V12.6H13.3041L17.3963 18.6753H22.6367L18.1248 12.5715C19.7883 12.325 20.5352 11.8152 21.1512 10.9751C21.7672 10.135 22.0762 8.79182 22.0762 6.99925V5.59908C22.0762 4.53592 21.9636 3.69581 21.7672 3.05191C21.5708 2.40798 21.2352 1.84792 20.7584 1.34485C20.2549 0.868627 19.6943 0.533236 19.0212 0.308539C18.3481 0.112363 17.5071 0 16.4715 0V0.00166984Z" fill="#0E0333"/>
</svg>
</div>
<div class="socials-item__name">Rutube</div>
</a>
<?php } ?>
</div> </div>
<?php if ($socials['instagram']) : ?>
<div class="socials-footnote">*Упоминаемые ресурсы Instagram, Facebook, принадлежат компании Meta, признанной экстремистской на территории РФ</div>
<?php endif; ?>
</div> </div>
</div> </div>
</section> </section>