diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index ae58f85..2e0f341 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -2268,164 +2268,129 @@ h4 { .socials { margin-top: var(--space-section); padding-top: clamp(40px, 23.4254px + 4.4199vw, 80px); - background: var(--gradient-grey); } .socials-title { - text-align: center; + /* text-align: center; */ } -.socials-body { - display: grid; - 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-main{ + margin-top: 50px; } -.socials-grid { +.socials-grid{ display: grid; - grid-template-columns: 1fr 1fr; - gap: 6px; - margin-top: clamp(25px, -75px + 9.7656vw, 50px); + grid-template-columns: repeat(4, 1fr); + gap: 20px; } -.socials-item { - display: grid; +.socials-item{ + padding: 19px 29px; + + display: flex; + flex-direction: column; + justify-content: center; align-items: center; - grid-template-columns: auto 1fr; - column-gap: 25px; - padding: 15px 30px; - border-radius: 15px; - color: var(--main-color); - background-color: #fff; - transition: color 0.25s ease, background-color 0.25s ease; + gap: 20px; + + border-radius: 30px; + border: 1px solid #EDEDED; + + transition: all .2s ease-out; } -.socials-item:hover { - color: #fff; - background-color: var(--main-color); +.socials-item--vk .socials-item__icon{ + border: 1px solid rgba(220, 232, 242, 0.50); + background: #F5F8FE; } -.socials-item:hover .socials-item__icon::before, .socials-item:hover .socials-item__icon::after { - background-color: #fff; +.socials-item--telegram .socials-item__icon{ + 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; - 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 { - content: ""; - display: block; - width: 32px; - height: 32px; - background-color: var(--icon-color); - mask: var(--social-icon) center no-repeat; - -webkit-mask: var(--social-icon) center no-repeat; - mask-size: contain; - -webkit-mask-size: contain; - transition: background-color 0.25s ease; +.socials-item__name{ + text-align: center; + font-size: 20px; + line-height: 110%; /* 22px */ + letter-spacing: -0.2px; + color: var(--color-text); + + transition: all .2s ease-out; } -.socials-item__name { - font-size: 18px; - line-height: 1.2; +.socials-item:hover{ + background: var(--color-dark); + border-color: var(--color-dark); } -.socials-item--vk { - --main-color: #366cfe; - --icon-color: currentColor; - --social-icon: url(../img/icons/vk.svg); +.socials-item:hover .socials-item__icon{ + transform: translateY(-5px); + background: var(--color-light); } -.socials-item--instagram { - --main-color: #000; - --icon-color: currentColor; - --social-icon: url(../img/icons/instagram.svg); +.socials-item:hover .socials-item__name{ + color: var(--color-light); + + transform: scale(1.05); } -.socials-item--youtube { - --main-color: #e80b2e; - --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); +.socials-footnote{ + margin-top: 50px; + font-size: 11px; - line-height: 1.2; -} -.socials-img { - display: flex; - align-items: flex-end; -} -.socials-img img { - width: 100%; + line-height: 110%; /* 12.1px */ + letter-spacing: -0.11px; + color: var(--color-text); } @media (max-width: 1023.98px) { - .socials-grid { - margin-top: 0; - } - .socials-item { - column-gap: 15px; - padding: 10px 15px; - border-radius: 10px; + .socials-grid{ + grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { - .socials-body { - grid-template-columns: 1fr; + .socials-grid{ + grid-template-columns: repeat(2, 1fr); } - .socials-footnote { - margin-bottom: 0; + .socials-item{ + padding: 13.5px 10px 15.5; + + border-radius: 10px; + + gap: 14px; } - .socials-img { - width: clamp(345px, 101.6794px + 64.8855vw, 600px); - margin: 40px auto 0; + .socials-item__icon{ + width: 50px; + height: 50px; + + border-radius: 14px; } -} -@media (max-width: 575.98px) { - .socials-item { - column-gap: 10px; + .socials-item__name{ + font-size: 15px; + letter-spacing: -0.15px; } - .socials-item__icon::before { - 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 { + .socials-footnote{ margin-top: 30px; + + font-size: 11px; + line-height: 120%; /* 13.2px */ + letter-spacing: -0.11px; } } .reviews--block { diff --git a/wp-content/themes/hantico/template-parts/socials.php b/wp-content/themes/hantico/template-parts/socials.php index fbefef0..0919463 100644 --- a/wp-content/themes/hantico/template-parts/socials.php +++ b/wp-content/themes/hantico/template-parts/socials.php @@ -1,70 +1,90 @@

-
-
- - -
*Instagram принадлежат компании Meta, признанной экстремистской на территории РФ
- -
-
- <?php echo $socials_img['alt']; ?> +
+ + +
*Упоминаемые ресурсы Instagram, Facebook, принадлежат компании Meta, признанной экстремистской на территории РФ
+