New logo + animation

layout/style-scss/style.scss

@@ -668,6 +668,100 @@ header {
 					max-width: 150px;
 				}
 			}
+
+			.header-logo {
+				min-height: 56px;
+				width: 120px;
+
+				.box-logo-relative {
+					position: relative;
+					transform-style: preserve-3d;
+					width: 100%;
+					height: 100%;
+
+					.box-logo-absolute {
+						position: absolute;
+						top: 0;
+						left: 0;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 120px;
+						height: 56px;
+						object-fit: contain;
+						backface-visibility: hidden;
+						-webkit-backface-visibility: hidden;
+						-moz-animation: action-logo 4s linear infinite alternate;
+						-webkit-animation: action-logo 4s linear infinite alternate;
+						-ms-animation: none;
+
+						&.box-logo-absolute-front {
+						}
+						&.box-logo-absolute-back {
+							transform: rotateY(180deg);
+							-moz-animation: action-logo-back 4s linear infinite alternate;
+							-webkit-animation: action-logo-back 4s linear infinite alternate;
+							-ms-animation: none;
+						}
+
+						img {
+							width: 100%;
+							height: 56px;
+							object-fit: contain;
+						}
+					}
+				}
+			}
+			@keyframes action-logo {
+				0% {
+					transform: rotateY(0);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				40% {
+					transform: rotateY(0);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				61% {
+					transform: rotateY(180deg);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				100% {
+					transform: rotateY(180deg);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+			}
+			@keyframes action-logo-back {
+				0% {
+					transform: rotateY(180deg);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				40% {
+					transform: rotateY(180deg);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				61% {
+					transform: rotateY(0);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+
+				100% {
+					transform: rotateY(0);
+					backface-visibility: hidden;
+					-webkit-backface-visibility: hidden;
+				}
+			}
 		}
 
 		.header_right {

templates_user/components/NavMenu.php

@@ -10,9 +10,23 @@
   <div class="container">
     <div class="header__wrapper">
       <div class="header_left">
-        <a href="/">
+        <!-- <a href="/">
           <img src="/upload/filemanager/Logos/vidok-com_DE-bialy.svg" alt="logo" class="nowebp" />
-        </a>
+        </a> -->
+        <div class="header-logo">
+          <div class="box-logo-relative">
+            <div class="box-logo-absolute box-logo-absolute-front">
+              <a href="/">
+                <img src="/upload/filemanager/Logos/VIDOK-logo-new.png" alt="logo">
+              </a>
+            </div>
+            <div class="box-logo-absolute box-logo-absolute-back">
+              <a href="/">
+                <img src="/upload/filemanager/Logos/VIDOK-COM_DE_white.png" alt="logo">
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="header_right">
         <div class="header_right_top">