/* Theme Name: Reboot Child Theme URI: https://wpshop.ru/themes/reboot Author: WPShop.biz Author URI: http://wpshop.biz/ Template: reboot Version: 1.0.0 */ /* Below you can add your CSS styles */ /* Ниже Вы можете добавить свои CSS стили */ :root { --social-icon-color: #ACACAC; --social-icon-hover: #2A02FB; --footer-social-icon-hover: #fff; } .social-button{ justify-content:center; } /* Базовые стили для всех иконок */ header, footer{ .social-button--instagram::before, .social-button--tiktok::before, .social-button--rutube::before, .social-button--vkontakte::before, .social-button--max::before, .social-button--telegram::before, .social-button--youtube::before, .social-button--odnoklassniki::before { content: ""; display: inline-block; width: 24px; height: 24px; background-color: var(--social-icon-color); transition: background-color 0.2s ease; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } } /* Hover / focus */ header{ .social-button--instagram:hover::before, .social-button--tiktok:hover::before, .social-button--rutube:hover::before, .social-button--vkontakte:hover::before, .social-button--youtube:hover::before, .social-button--telegram:hover::before, .social-button--max:hover::before, .social-button--odnoklassniki:hover::before, .social-button--instagram:focus-visible::before, .social-button--tiktok:focus-visible::before, .social-button--rutube:focus-visible::before, .social-button--vkontakte:focus-visible::before, .social-button--youtube:focus-visible::before, .social-button--telegram:focus-visible::before, .social-button--max:focus-visible::before, .social-button--odnoklassniki:focus-visible::before { background-color: var(--social-icon-hover); } } footer{ .social-button--instagram:hover::before, .social-button--tiktok:hover::before, .social-button--rutube:hover::before, .social-button--youtube:hover::before, .social-button--telegram:hover::before, .social-button--max:hover::before, .social-button--vkontakte:hover::before, .social-button--odnoklassniki:hover::before, .social-button--instagram:focus-visible::before, .social-button--tiktok:focus-visible::before, .social-button--rutube:focus-visible::before, .social-button--telegram:focus-visible::before, .social-button--max:focus-visible::before, .social-button--youtube:focus-visible::before, .social-button--vkontakte:focus-visible::before, .social-button--odnoklassniki:focus-visible::before { background-color: var(--footer-social-icon-hover); } } header, footer{ /* Instagram */ .social-button--instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M224.032 182.369c-40.756 0-73.631 32.874-73.631 73.631s32.874 73.631 73.631 73.631 73.631-32.874 73.631-73.631-32.874-73.631-73.631-73.631zm0 121.501c-26.338 0-47.87-21.468-47.87-47.87s21.468-47.87 47.87-47.87 47.87 21.468 47.87 47.87-21.532 47.87-47.87 47.87zm93.817-124.512c0 9.548-7.69 17.174-17.174 17.174-9.548 0-17.174-7.69-17.174-17.174s7.69-17.174 17.174-17.174 17.174 7.69 17.174 17.174zm48.767 17.43c-1.089-23.006-6.344-43.384-23.198-60.174-16.79-16.79-37.168-22.044-60.174-23.198-23.711-1.346-94.778-1.346-118.489 0-22.942 1.089-43.32 6.344-60.174 23.134s-22.044 37.168-23.198 60.174c-1.346 23.711-1.346 94.778 0 118.489 1.089 23.006 6.344 43.384 23.198 60.174s37.168 22.044 60.174 23.198c23.711 1.346 94.778 1.346 118.489 0 23.006-1.089 43.384-6.344 60.174-23.198 16.79-16.79 22.044-37.168 23.198-60.174 1.346-23.711 1.346-94.714 0-118.425zm-30.631 143.865c-4.998 12.56-14.675 22.237-27.299 27.299-18.904 7.498-63.762 5.767-84.653 5.767s-65.813 1.666-84.653-5.767c-12.56-4.998-22.237-14.675-27.299-27.299-7.498-18.904-5.767-63.762-5.767-84.653s-1.666-65.813 5.767-84.653c4.998-12.56 14.675-22.237 27.299-27.299 18.904-7.498 63.762-5.767 84.653-5.767s65.813-1.666 84.653 5.767c12.56 4.998 22.237 14.675 27.299 27.299 7.498 18.904 5.767 63.762 5.767 84.653s1.73 65.813-5.767 84.653z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M224.032 182.369c-40.756 0-73.631 32.874-73.631 73.631s32.874 73.631 73.631 73.631 73.631-32.874 73.631-73.631-32.874-73.631-73.631-73.631zm0 121.501c-26.338 0-47.87-21.468-47.87-47.87s21.468-47.87 47.87-47.87 47.87 21.468 47.87 47.87-21.532 47.87-47.87 47.87zm93.817-124.512c0 9.548-7.69 17.174-17.174 17.174-9.548 0-17.174-7.69-17.174-17.174s7.69-17.174 17.174-17.174 17.174 7.69 17.174 17.174zm48.767 17.43c-1.089-23.006-6.344-43.384-23.198-60.174-16.79-16.79-37.168-22.044-60.174-23.198-23.711-1.346-94.778-1.346-118.489 0-22.942 1.089-43.32 6.344-60.174 23.134s-22.044 37.168-23.198 60.174c-1.346 23.711-1.346 94.778 0 118.489 1.089 23.006 6.344 43.384 23.198 60.174s37.168 22.044 60.174 23.198c23.711 1.346 94.778 1.346 118.489 0 23.006-1.089 43.384-6.344 60.174-23.198 16.79-16.79 22.044-37.168 23.198-60.174 1.346-23.711 1.346-94.714 0-118.425zm-30.631 143.865c-4.998 12.56-14.675 22.237-27.299 27.299-18.904 7.498-63.762 5.767-84.653 5.767s-65.813 1.666-84.653-5.767c-12.56-4.998-22.237-14.675-27.299-27.299-7.498-18.904-5.767-63.762-5.767-84.653s-1.666-65.813 5.767-84.653c4.998-12.56 14.675-22.237 27.299-27.299 18.904-7.498 63.762-5.767 84.653-5.767s65.813-1.666 84.653 5.767c12.56 4.998 22.237 14.675 27.299 27.299 7.498 18.904 5.767 63.762 5.767 84.653s1.73 65.813-5.767 84.653z'/%3E%3C/svg%3E"); } /* TikTok */ .social-button--tiktok::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.99 8.02a4.033 4.033 0 01-4.04-3.99h-2.6v11c0 1.04-.68 1.92-1.62 2.23-.27.09-.57.13-.87.12-.39-.02-.76-.14-1.08-.33a2.346 2.346 0 01-1.15-1.98 2.352 2.352 0 012.36-2.39c.26 0 .51.04.74.12V10.16a4.984 4.984 0 00-4.5 1.62c-.73.81-1.16 1.85-1.23 2.94-.09 1.43.44 2.79 1.45 3.8.15.15.31.28.47.41a4.996 4.996 0 003.81.97 4.99 4.99 0 002.78-1.39 4.85 4.85 0 001.46-3.47l-.01-5.82c.45.35.94.63 1.46.85.82.34 1.68.52 2.57.52V8.02z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.99 8.02a4.033 4.033 0 01-4.04-3.99h-2.6v11c0 1.04-.68 1.92-1.62 2.23-.27.09-.57.13-.87.12-.39-.02-.76-.14-1.08-.33a2.346 2.346 0 01-1.15-1.98 2.352 2.352 0 012.36-2.39c.26 0 .51.04.74.12V10.16a4.984 4.984 0 00-4.5 1.62c-.73.81-1.16 1.85-1.23 2.94-.09 1.43.44 2.79 1.45 3.8.15.15.31.28.47.41a4.996 4.996 0 003.81.97 4.99 4.99 0 002.78-1.39 4.85 4.85 0 001.46-3.47l-.01-5.82c.45.35.94.63 1.46.85.82.34 1.68.52 2.57.52V8.02z'/%3E%3C/svg%3E"); } /* RuTube */ .social-button--rutube::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.7 5.4H4v13h3.3v-4.2h6.2l2.8 4.2H20l-3.1-4.3c1-.2 1.7-.5 2.1-1.1s.6-1.5.6-2.8v-1c0-.7-.1-1.3-.2-1.8-.1-.4-.4-.8-.7-1.2-.4-.3-.7-.6-1.2-.7-.5 0-1.1-.1-1.8-.1zm-.5 6H7.3v-3h7.9c.4 0 .8.1.9.2.2.1.3.4.3.8v1.1c0 .4-.1.6-.3.8-.2 0-.5.1-.9.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.7 5.4H4v13h3.3v-4.2h6.2l2.8 4.2H20l-3.1-4.3c1-.2 1.7-.5 2.1-1.1s.6-1.5.6-2.8v-1c0-.7-.1-1.3-.2-1.8-.1-.4-.4-.8-.7-1.2-.4-.3-.7-.6-1.2-.7-.5 0-1.1-.1-1.8-.1zm-.5 6H7.3v-3h7.9c.4 0 .8.1.9.2.2.1.3.4.3.8v1.1c0 .4-.1.6-.3.8-.2 0-.5.1-.9.1z'/%3E%3C/svg%3E"); } /* VK */ .social-button--vkontakte::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='101' height='100' viewBox='0 0 101 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M53.7085 72.042C30.9168 72.042 17.9169 56.417 17.3752 30.417H28.7919C29.1669 49.5003 37.5834 57.5836 44.25 59.2503V30.417H55.0004V46.8752C61.5837 46.1669 68.4995 38.667 70.8329 30.417H81.5832C79.7915 40.5837 72.2915 48.0836 66.9582 51.1669C72.2915 53.6669 80.8336 60.2086 84.0836 72.042H72.2499C69.7082 64.1253 63.3754 58.0003 55.0004 57.1669V72.042H53.7085Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='101' height='100' viewBox='0 0 101 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M53.7085 72.042C30.9168 72.042 17.9169 56.417 17.3752 30.417H28.7919C29.1669 49.5003 37.5834 57.5836 44.25 59.2503V30.417H55.0004V46.8752C61.5837 46.1669 68.4995 38.667 70.8329 30.417H81.5832C79.7915 40.5837 72.2915 48.0836 66.9582 51.1669C72.2915 53.6669 80.8336 60.2086 84.0836 72.042H72.2499C69.7082 64.1253 63.3754 58.0003 55.0004 57.1669V72.042H53.7085Z'/%3E%3C/svg%3E"); } /* OK */ .social-button--odnoklassniki::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M11.674 6.536a1.69 1.69 0 0 0-1.688 1.688c0 .93.757 1.687 1.688 1.687a1.69 1.69 0 0 0 1.688-1.687 1.69 1.69 0 0 0-1.688-1.688zm0 5.763a4.08 4.08 0 0 1-4.076-4.075 4.08 4.08 0 0 1 4.076-4.077 4.08 4.08 0 0 1 4.077 4.077 4.08 4.08 0 0 1-4.077 4.075zM10.025 15.624a7.633 7.633 0 0 1-2.367-.98 1.194 1.194 0 0 1 1.272-2.022 5.175 5.175 0 0 0 5.489 0 1.194 1.194 0 1 1 1.272 2.022 7.647 7.647 0 0 1-2.367.98l2.279 2.28a1.194 1.194 0 0 1-1.69 1.688l-2.238-2.24-2.24 2.24a1.193 1.193 0 1 1-1.689-1.689l2.279-2.279'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M11.674 6.536a1.69 1.69 0 0 0-1.688 1.688c0 .93.757 1.687 1.688 1.687a1.69 1.69 0 0 0 1.688-1.687 1.69 1.69 0 0 0-1.688-1.688zm0 5.763a4.08 4.08 0 0 1-4.076-4.075 4.08 4.08 0 0 1 4.076-4.077 4.08 4.08 0 0 1 4.077 4.077 4.08 4.08 0 0 1-4.077 4.075zM10.025 15.624a7.633 7.633 0 0 1-2.367-.98 1.194 1.194 0 0 1 1.272-2.022 5.175 5.175 0 0 0 5.489 0 1.194 1.194 0 1 1 1.272 2.022 7.647 7.647 0 0 1-2.367.98l2.279 2.28a1.194 1.194 0 0 1-1.69 1.688l-2.238-2.24-2.24 2.24a1.193 1.193 0 1 1-1.689-1.689l2.279-2.279'/%3E%3C/g%3E%3C/svg%3E"); } /* Telegram */ .social-button--telegram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M18.92 6.089L4.747 11.555c-.967.388-.962.928-.176 1.168l3.534 1.104 1.353 4.146c.164.454.083.634.56.634.368 0 .53-.168.736-.368.13-.127.903-.88 1.767-1.719l3.677 2.717c.676.373 1.165.18 1.333-.628l2.414-11.374c.247-.99-.378-1.44-1.025-1.146zM8.66 13.573l7.967-5.026c.398-.242.763-.112.463.154l-6.822 6.155-.265 2.833-1.343-4.116z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M18.92 6.089L4.747 11.555c-.967.388-.962.928-.176 1.168l3.534 1.104 1.353 4.146c.164.454.083.634.56.634.368 0 .53-.168.736-.368.13-.127.903-.88 1.767-1.719l3.677 2.717c.676.373 1.165.18 1.333-.628l2.414-11.374c.247-.99-.378-1.44-1.025-1.146zM8.66 13.573l7.967-5.026c.398-.242.763-.112.463.154l-6.822 6.155-.265 2.833-1.343-4.116z'/%3E%3C/svg%3E"); } /* MAX */ .social-button--max::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.1777 8.95215V8.95508C12.9799 9.00124 13.7323 9.36259 14.2725 9.95996 14.8123 10.5572 15.0967 11.3434 15.0654 12.1494 15.0116 12.954 14.6462 13.7057 14.0469 14.2422 13.4473 14.7787 12.6615 15.0573 11.8594 15.0186 11.3372 14.9765 10.8353 14.7971 10.4043 14.498 10.1436 14.7599 9.72478 15.0999 9.55859 15.0596 9.21191 14.9674 8.80501 13.1973 9.03418 11.7441 9.31212 9.9887 10.5674 8.86869 12.1777 8.95215ZM17 2C19.7614 2 22 4.23858 22 7V17C22 19.7614 19.7614 22 17 22H7C4.23858 22 2 19.7614 2 17V7C2 4.23858 4.23858 2 7 2H17ZM12.0977 6C8.79121 6 6.00022 8.56964 6 11.9854 6 13.4155 6.26402 14.4028 6.49609 15.2891 6.69094 16.0085 6.8623 16.6684 6.8623 17.4482 6.94593 18.4865 8.8515 17.8794 9.45312 17.1025 10.4042 17.793 10.9514 17.9658 12.1289 17.9658 13.6923 17.9574 15.1884 17.3261 16.2891 16.2109 17.3897 15.0958 18.0053 13.5878 18 12.0176 18 8.69672 15.407 6.00014 12.0977 6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.1777 8.95215V8.95508C12.9799 9.00124 13.7323 9.36259 14.2725 9.95996 14.8123 10.5572 15.0967 11.3434 15.0654 12.1494 15.0116 12.954 14.6462 13.7057 14.0469 14.2422 13.4473 14.7787 12.6615 15.0573 11.8594 15.0186 11.3372 14.9765 10.8353 14.7971 10.4043 14.498 10.1436 14.7599 9.72478 15.0999 9.55859 15.0596 9.21191 14.9674 8.80501 13.1973 9.03418 11.7441 9.31212 9.9887 10.5674 8.86869 12.1777 8.95215ZM17 2C19.7614 2 22 4.23858 22 7V17C22 19.7614 19.7614 22 17 22H7C4.23858 22 2 19.7614 2 17V7C2 4.23858 4.23858 2 7 2H17ZM12.0977 6C8.79121 6 6.00022 8.56964 6 11.9854 6 13.4155 6.26402 14.4028 6.49609 15.2891 6.69094 16.0085 6.8623 16.6684 6.8623 17.4482 6.94593 18.4865 8.8515 17.8794 9.45312 17.1025 10.4042 17.793 10.9514 17.9658 12.1289 17.9658 13.6923 17.9574 15.1884 17.3261 16.2891 16.2109 17.3897 15.0958 18.0053 13.5878 18 12.0176 18 8.69672 15.407 6.00014 12.0977 6Z'/%3E%3C/svg%3E"); } .social-button--youtube::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M462.308 171.799c0 0-4.111-29.026-16.774-41.771-16.034-16.774-33.96-16.857-42.183-17.843-58.875-4.276-147.269-4.276-147.269-4.276h-0.164c0 0-88.394 0-147.269 4.276-8.223 0.987-26.148 1.069-42.183 17.843-12.663 12.745-16.692 41.771-16.692 41.771s-4.194 34.042-4.194 68.166v31.904c0 34.042 4.194 68.166 4.194 68.166s4.111 29.026 16.692 41.771c16.034 16.774 37.084 16.199 46.458 18.008 33.713 3.207 143.157 4.194 143.157 4.194s88.476-0.164 147.351-4.358c8.223-0.987 26.148-1.069 42.183-17.843 12.663-12.745 16.774-41.771 16.774-41.771s4.194-34.042 4.194-68.166v-31.904c-0.082-34.042-4.276-68.166-4.276-68.166zM212.502 310.599v-118.325l113.72 59.368-113.72 58.957z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M462.308 171.799c0 0-4.111-29.026-16.774-41.771-16.034-16.774-33.96-16.857-42.183-17.843-58.875-4.276-147.269-4.276-147.269-4.276h-0.164c0 0-88.394 0-147.269 4.276-8.223 0.987-26.148 1.069-42.183 17.843-12.663 12.745-16.692 41.771-16.692 41.771s-4.194 34.042-4.194 68.166v31.904c0 34.042 4.194 68.166 4.194 68.166s4.111 29.026 16.692 41.771c16.034 16.774 37.084 16.199 46.458 18.008 33.713 3.207 143.157 4.194 143.157 4.194s88.476-0.164 147.351-4.358c8.223-0.987 26.148-1.069 42.183-17.843 12.663-12.745 16.774-41.771 16.774-41.771s4.194-34.042 4.194-68.166v-31.904c-0.082-34.042-4.276-68.166-4.276-68.166zM212.502 310.599v-118.325l113.72 59.368-113.72 58.957z'/%3E%3C/svg%3E"); } } /* ========================================================================== Эффекты для бесконечной прокрутки (Infinite Scroll) ========================================================================== */ /* Красивый анимированный лоадер */ .infinite-scroll-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 0; transition: opacity 0.3s ease; } .infinite-scroll-loader .spinner { width: 40px; height: 40px; border: 3px solid rgba(0, 0, 0, 0.07); border-radius: 50%; /* Цвет верхней дуги спиннера. Вы можете заменить #5173ff на основной цвет вашего сайта */ border-top-color: #5173ff; animation: spin-loader 0.8s cubic-bezier(0.6, 0.2, 0.1, 0.8) infinite; } .infinite-scroll-loader .loader-text { margin-top: 15px; font-size: 14px; color: #888; letter-spacing: 0.5px; font-weight: 500; } @keyframes spin-loader { to { transform: rotate(360deg); } } /* Эффект проявления статьи (Blur, Slide Up, Fading) */ .ajax-post-loaded { opacity: 0; filter: blur(15px); transform: translateY(40px); /* cubic-bezier задает физику плавного торможения в конце движения */ animation: postReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, opacity, filter; } @keyframes postReveal { 0% { opacity: 0; filter: blur(15px); transform: translateY(40px); } 100% { opacity: 1; filter: blur(0px); transform: translateY(0); } } /* Декоративный разделитель между статьями */ .ajax-post-separator { position: relative; height: 1px; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, rgba(0,0,0,0)); margin: 80px 0; } @media (max-width: 767px) { .ajax-post-separator{ margin: 40px 0; } }