/****************************************************** ********************** Header ********************* ******************************************************/ #header{ padding: 0 15px; box-sizing: border-box; position:absolute;top:0;left:0;width:100%;text-align:center;line-height:0; background-color:#fff; color:#131624; box-shadow:0px 10px 10px 0px transparent;z-index:100; display: flex; justify-content: space-between; align-items: center;} #logo{display:inline-block;height:35px;padding:17px 0 18px;font-size:20px;margin-bottom:0; line-height: 0;} #header .submenu-close{display:none;float:left;padding:22px 20px 21px;transform:rotateY(180deg);cursor:pointer} #header .search-wrapper{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:none} #header .search-wrapper input.search{font-size:15px;border-bottom-width:1px} /* menu */ #menu{display:block} #menu ul{list-style:none} #menu ul li{float:left} #menu ul li a{display:block;line-height:20px; color:#08080e;text-decoration:none;font-size:15px; position: relative;cursor:pointer} #menu ul li a.button { color: #fff !important; padding: 20px; } #menu ul li:hover > a, #menu ul li.active:hover > a, #menu ul li a:not(.button):hover {color:#0089f7;} #menu ul li.show-mobile{display:none} /* menu level 1 */ #menu > ul > li > a{padding:25px 20px; height: 70px; font-weight: 500; box-sizing: border-box; } #menu > ul > li.has-menu:hover > a:after { content: ""; display: block; position: absolute; z-index: 2; left: calc(50% - 6px); bottom: -1px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #f6f7f9 transparent; } #menu > ul > li.has-menu:hover > a:before { content: ""; display: block; position: absolute; z-index: 1; left: calc(50% - 7px); bottom: -1px; width: 0; height: 0; border-style: solid; border-width: 0 7px 7px 7px; border-color: transparent transparent #e3e6ee transparent; } #menu > ul > li > a .menu-new { content: ""; display: block; position: absolute; right: 0px; top: 19px; width: 8px; height: 8px; flex-shrink: 0; background: #E51756; margin-right: 6px; border-radius: 100%; } #menu > ul > li > a .menu-new:before, #menu > ul > li > a .menu-new:after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: inherit; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.3; background-color: #E51756; } #menu > ul > li > a > sup { font-size: 11px; opacity: .5;} #menu > ul > li.active > a{color:#7a7c8d;} #menu > ul > li > a svg { display: none; } /* menu level 2 */ #menu ul > li > .submenu {display:none;position:absolute;left:0; width:100%; background-color:#f6f7f9; border-top: 1px solid #e3e6ee; box-shadow:0px 10px 10px 0px rgba(58, 63, 67, 0.12)} #menu ul > li:hover > .submenu {display:block} #menu ul > li ul li a { color: #2a2b39; } #menu ul > li:hover > .submenu.one-page-only {display:none} #menu li.menu-resources > a { cursor: default; } #menu .submenu.one-page ul { display: flex; justify-content: center; align-items: center; } #menu .submenu.one-page ul li a { padding:25px 20px;line-height:20px; } #menu .submenu.one-page ul li.active a{color:#0089f7} #menu .submenu.one-page ul li.active a:after { content: ""; display: block; width: 100%; height: 2px; border-radius: 2px; position: absolute; left: 0; bottom: -1px; background-color: #0089f7; } #menu .submenu.with-tabs .wrapper { display: flex; text-align: left; padding: 40px 0 50px; } #menu .submenu.with-tabs .tabs-nav { width: 25%; flex-shrink: 0; border-right: 1px solid #e3e6ee; margin-right: 40px; } #menu .submenu.with-tabs .tabs-nav li { float: none !important; display: block; margin-bottom: 5px; } #menu .submenu.with-tabs .tabs-nav li a { display: block; padding: 7px 10px; font-weight: 500; } #menu .submenu.with-tabs .tabs-nav li.active a { color: #0089f7; } #menu .submenu.with-tabs .tabs-nav li a:after { content: ""; display: none; width: 22px; height: 22px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-image: url(../img/move-right-blue.svg); background-position: center; background-repeat: no-repeat; background-size: 22px; } #menu .submenu.with-tabs .tabs-nav li.active a:after { display: block; } #menu .submenu.with-tabs .tab { width: calc(75% - 40px); } #menu .submenu.with-tabs .tab ul {} #menu .submenu.with-tabs .tab ul li { width: 31.3333%; margin: 0 1%; margin-bottom: 5px; } #menu .submenu.with-tabs .tab ul li a { position: relative; padding: 7px 10px 7px 40px; } #menu .submenu.with-tabs .tab ul li a:before { content: ""; display: block; width: 30px; height: 30px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-right: 10px; background-position: center; background-size: 24px; } #menu .submenu.with-tabs .tab ul li a:hover {} #menu .submenu.mega-menu .wrapper { padding: 40px 20px; display: flex; flex-wrap: wrap; text-align: left; line-height: 1.4; } #menu .submenu.mega-menu .wrapper .splash-link { display: inline-block; color: #0089f7; line-height: 30px; } #menu .submenu.mega-menu .heading { color: #00032a; } #menu .submenu.mega-menu h3.heading { width: 100%; margin-bottom: 40px; text-align: center; } #menu .submenu.mega-menu h6.heading { font-size: 13px; letter-spacing: 1px; } #menu .submenu.mega-menu .resources-list { display: grid; grid-template-columns: 1fr 1px 1fr 400px; gap: 30px; } #menu .submenu.mega-menu .resources-list > .sep { width: 1px; height: 100%; background-color: rgba(0,0,0,.1); } #menu .submenu.mega-menu .resources-list > div ul.builders { margin-bottom: 15px; } #menu .submenu.mega-menu .resources-list > div .response-time { opacity: .5; } #menu .submenu.mega-menu .resources-list .academy-banner { display: block; align-self: flex-start; border-radius: 8px; line-height: 0; overflow: hidden; position: relative; top: -15px; margin-left: 10px; } #menu .submenu.mega-menu .resources-list .latest-tutorials { background-color: #fff; padding: 20px 30px; border-radius: 8px; margin-top: -20px; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a { display: flex; align-items: center; gap: 15px; padding: 0; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a .video-pic { width: 140px; flex-shrink: 0; border-radius: 4px; line-height: 0; overflow: hidden; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a .video-desc { flex-grow: 1; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a .video-desc p { color: #00032a; font-weight: 500; margin-bottom: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a .video-desc span { color: #555c70; opacity: .5; } #menu .submenu.mega-menu .resources-list .latest-tutorials ul li a:hover .video-desc p { color: inherit; } #menu .submenu.mega-menu .resources-addons { display: flex; gap: 40px; margin: 40px 0 10px; } #menu .submenu.mega-menu .resources-addons .changelog-box { flex-grow: 1; } #menu .submenu.mega-menu .resources-addons .short-info { width: 62%; } #menu .submenu ul.builders { display: flex; width: 100%; flex-direction: column; } #menu .submenu.visual-select ul.builders { width: 45%; } #menu .submenu.resources .resources-list { grid-template-columns: 1fr 1px 1fr 400px; } #menu .submenu ul.builders li a { padding:13px 60px 13px 20px; display: flex; align-items: center; border-radius: 8px; transition: background-color .2s ease-in-out } #menu .submenu ul.builders li a .builder-icon { display: inline-flex; flex-shrink: 0; position: relative; width: 50px; height: 50px; background-size: 50px; background-position: center; background-repeat: no-repeat; margin-right: 15px; } #menu .submenu ul.builders li a .builder-desc { text-align: left; } #menu .submenu ul.builders li a h5 { font-size: 16px; line-height: 1.3; margin-bottom: 5px;; } #menu .submenu ul.builders li a p { margin-bottom: 0; font-size: 14px; line-height: 1.3; color: #555C70; } #menu .submenu ul.builders li a:after { content: ""; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: 26px; background-image: url(../img/move-right.svg); } #menu .submenu ul.builders li a:hover { background-color: rgba(255,255,255,.7); } #menu .submenu ul.builders li a:hover h5 { color: #0089f7 } #menu .submenu ul.builders li a:hover p { color: initial; } /* */ #menu .submenu.mega-menu .builders-info { flex: 1; margin-left: 40px; padding: 10px 0 0 40px; border-left: 1px solid rgba(0,0,0,.1); } #menu .submenu.mega-menu .builders-info h5 { margin-bottom: 5px; } #menu .submenu.mega-menu .builders-info .splash-link { display: inline-block; } #menu .submenu.mega-menu ul.builders-help { display: flex; margin: 30px -10px; } #menu .submenu.mega-menu ul.builders-help li { margin: 0 10px; flex: 1; } #menu .submenu.mega-menu ul.builders-help li .content-icon { border-radius: 8px; } #menu .submenu.mega-menu .short-info { margin-bottom: 0px; } #menu .submenu.mega-menu .short-info .price { font-size: 26px; line-height: 30px; } /* menu level 3 */ #menu ul li ul li ul li{float:none} #header .menu-toggle{display:none;float:left;width:22px;padding:22px 20px} #header .menu-toggle .icon-close{display:none;margin-left:3px} #header .right{float:right; display: flex; align-items: center; gap: 5px; position: relative; } #header .right .button { padding-left: 30px; padding-right: 30px; line-height: 1.5; margin: 0; } #header .help{display:block; margin-right: 20px;;} #header .right .buy{ position:relative; } #menu .buy{margin:20px 30px} #header .right .info { position: absolute; top: 100%; right: 0; display: none; padding-top: 8px; text-align: center; } #header .right .info .info-wrapper { background-color: #090a12; padding: 16px; color: #fff; box-shadow: 0px 10px 10px 0px rgba(58, 63, 67, 0.12); width: 320px; font-size: 14px; font-weight: 400; line-height: 1.5; border-radius: 4px; } #header .right .info .included { display: flex; margin-top: 10px; list-style: none; font-size: 12px; gap: 6px; margin-bottom: 6px; } #header .right .info .included li { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.18); border-radius: 6px; padding: 10px 5px; gap: 7px; width: 50%; color: #d9d9d9; line-height: 1.3;} #header .right .info .included li .icon-wrapper { display: inline-flex; width: 16px; height: 16px; border-radius: 30px; border: 1px solid #87e64b; align-items: center; justify-content: center; font-size: 8px; color: #87e64b; } #header .right .info .included li .stars { width: 80px; margin: 3px 0 2px; } #header .right .info .envato-profil { display: block; background-color: #1f2027; color: #fff; padding: 8px; border-radius: 5px; margin-bottom: 0; font-weight: 500; text-decoration: none; transition: all 0.3s ease-in-out; } #header .right .info .envato-profil:hover { background-color: #87e64b; color: #000 } #header .right .info.hover {display:block} #header .search-toggle{display:block;float:right;padding:20px 10px} .search-active .search-toggle path{fill:#0089f7!important} #header .filters-toggle{display:none;position:relative;float:right;padding:20px;color:#08080e;text-decoration:none} #header .filters-toggle span{position:relative;top:-3px;margin-right:5px} #header .filters-toggle .icon-close{position:absolute;right:22px;top:50%;margin-top:-8px;opacity:0} .filter-active .filters-toggle{color:#0089f7!important} .filter-active .filters-toggle path{fill:#0089f7!important} .page-main #header .filters-toggle { display: block; } /* header classes */ #header.sticky{ position:fixed; top: 0; left: 0; width: 100%; z-index: 1000; } #header.search .search-wrapper{display:inline-block} #header.sticky.down{top:-70px} #header.sticky.down #menu > ul > li.active > .submenu{display: block} #header.sticky.down #menu > ul > li.active > .visual-select{display:none} #header.hide{opacity:0} #header.hide #logo, #header.hide .right{opacity:0} #header.show{ opacity:1; box-shadow:0px 10px 10px 0px rgba(58, 63, 67, 0.12); background-color: #fff; } #header.show #logo, #header.show .right{opacity:1} /* Sticky header - change colors */ #header.sticky.show { background-color: #fff; color: #131624; } #header.sticky.show .logo-theme { fill: #08080e; } #header.sticky.show #menu ul li a { color: #131624; } #header.sticky.show a.menu-toggle path { fill: #08080e; } #header.animate{transition:box-shadow .2s ease-in-out} #header.animate-bg{transition:background-color .2s ease-in-out} #header.animate input.search{transition:font-size .2s ease-in-out, border .2s ease-in-out} #header.animate #logo,#header.animate #logo path,#header.animate .right{transition:all .2s ease-in-out} #header.search { background-color: #f6f7f9; height: 70px; } #header.search #logo, #header.search #menu, #header.search .right { display: none; } #header.search .search-wrapper input.search { padding-top: 13px; padding-bottom: 13px; } /* Логотип: aria белый по умолчанию, черный при скролле и hover */ .logo-aria { fill: #ffffff; transition: fill 0.3s ease; } /* Когда header становится sticky/show, меняем цвет на черный */ #header.sticky .logo-aria, #header.show .logo-aria { fill: #08080e; } /* При наведении курсора на header, меняем цвет на черный */ #header:hover .logo-aria { fill: #08080e; } /* На мобильном разрешении aria черная по умолчанию */ @media (max-width: 768px) { #header .logo-aria { fill: #08080e !important; } /* При скролле и hover на мобильном остается черной */ #header.sticky .logo-aria, #header.show .logo-aria, #header:hover .logo-aria { fill: #08080e !important; } /* Скрываем кнопку "Подписка" на мобильном */ #header .button.buy { display: none !important; } }