<!-- wp:pc/pattern {"extraClass":"pc-header-aurora-01","componentId":"aurora-header-01"} -->
<!-- wp:group {"className":"pc-header-aurora-01__inner"} -->
<div class="wp-block-group pc-header-aurora-01__inner">
<!-- wp:group {"className":"pc-header-aurora-01__top"} -->
<div class="wp-block-group pc-header-aurora-01__top">
<!-- wp:group {"className":"pc-header-aurora-01__logo-wrap"} -->
<div class="wp-block-group pc-header-aurora-01__logo-wrap">
<!-- wp:html -->
<div class="pc-header-aurora-01__logo-icon">
<svg class="pc-header-aurora-01__logo-svg" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="14" fill="url(#grad)" />
<path d="M24 13L33 35H28.5L26.5 30H21.3L19.3 35H15L24 13ZM22.8 26H25.2L24 22.7L22.8 26Z" fill="white"/>
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="48" y2="48">
<stop stop-color="#7C3AED"/>
<stop offset="1" stop-color="#06B6D4"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"pc-header-aurora-01__logo"} -->
<p class="pc-header-aurora-01__logo">Aurora Studio</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:html -->
<button class="pc-header-aurora-01__burger" type="button" aria-label="Открыть меню">
<span></span>
<span></span>
<span></span>
</button>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"pc-header-aurora-01__nav-wrap"} -->
<div class="wp-block-group pc-header-aurora-01__nav-wrap">
<!-- wp:list {"className":"pc-header-aurora-01__menu"} -->
<ul class="wp-block-list pc-header-aurora-01__menu">
<!-- wp:list-item -->
<li><a href="#">Главная</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Услуги</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">Портфолио</a></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><a href="#">О нас</a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
<!-- wp:buttons -->
<!-- wp:button {"className":"pc-header-aurora-01__cta"} -->
<div class="wp-block-button pc-header-aurora-01__cta">
<a class="wp-block-button__link wp-element-button">Связаться</a>
</div>
<!-- /wp:button -->
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- /wp:pc/pattern -->
.pc-header-aurora-01{
position:relative;
width:100%;
padding:20px 24px;
border-radius:24px;
background:rgba(11,16,32,0.94);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 18px 40px rgba(0,0,0,0.22);
overflow:hidden;
}
.pc-header-aurora-01__inner{
max-width:1200px;
margin:0 auto;
}
.pc-header-aurora-01__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.pc-header-aurora-01__logo-wrap{
display:flex;
align-items:center;
gap:14px;
}
.pc-header-aurora-01__logo-icon{
width:48px;
height:48px;
border-radius:16px;
overflow:hidden;
flex-shrink:0;
}
.pc-header-aurora-01__logo-svg{
display:block;
width:100%;
height:100%;
}
.pc-header-aurora-01__logo{
margin:0;
color:#ffffff;
font-size:1.25rem;
font-weight:700;
letter-spacing:-0.03em;
}
.pc-header-aurora-01__burger{
display:none;
width:48px;
height:48px;
border:none;
border-radius:14px;
background:rgba(255,255,255,0.08);
cursor:pointer;
padding:0;
position:relative;
flex-shrink:0;
}
.pc-header-aurora-01__burger span{
position:absolute;
left:13px;
width:22px;
height:2px;
background:#ffffff;
border-radius:999px;
transition:transform .3s ease, opacity .3s ease;
}
.pc-header-aurora-01__burger span:nth-child(1){
top:16px;
}
.pc-header-aurora-01__burger span:nth-child(2){
top:23px;
}
.pc-header-aurora-01__burger span:nth-child(3){
top:30px;
}
.pc-header-aurora-01__burger.is-active span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.pc-header-aurora-01__burger.is-active span:nth-child(2){
opacity:0;
}
.pc-header-aurora-01__burger.is-active span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
.pc-header-aurora-01__nav-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
margin-top:0;
}
.pc-header-aurora-01__menu{
display:flex;
align-items:center;
gap:28px;
list-style:none;
padding:0;
margin:0;
}
.pc-header-aurora-01__menu li{
margin:0;
}
.pc-header-aurora-01__menu a{
position:relative;
color:#d8e2ff;
text-decoration:none;
font-size:0.98rem;
font-weight:500;
transition:color .25s ease;
}
.pc-header-aurora-01__menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
transition:width .25s ease;
}
.pc-header-aurora-01__menu a:hover{
color:#ffffff;
}
.pc-header-aurora-01__menu a:hover::after{
width:100%;
}
.pc-header-aurora-01__cta{
margin:0;
}
.pc-header-aurora-01__cta .wp-element-button{
border-radius:14px;
padding:14px 24px;
background:linear-gradient(135deg,#7c3aed,#06b6d4);
color:#ffffff;
font-size:0.95rem;
font-weight:700;
text-decoration:none;
border:none;
box-shadow:0 10px 24px rgba(124,58,237,0.34);
}
@media (max-width: 900px){
.pc-header-aurora-01__burger{
display:block;
}
.pc-header-aurora-01__nav-wrap{
position:absolute;
top:100%;
left:0;
width:100%;
padding:0 24px 24px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:24px;
opacity:0;
visibility:hidden;
pointer-events:none;
}
.pc-header-aurora-01__menu{
width:100%;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.pc-header-aurora-01__cta{
width:100%;
}
.pc-header-aurora-01__cta .wp-element-button{
width:100%;
text-align:center;
}
}
@media (min-width: 901px){
.pc-header-aurora-01__nav-wrap{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:none !important;
}
}
WPP.register('aurora-header-01', (root, gsap) => {
const burger = root.querySelector('.pc-header-aurora-01__burger');
const nav = root.querySelector('.pc-header-aurora-01__nav-wrap');
if (!burger || !nav) {
return;
}
const mm = window.matchMedia('(max-width: 900px)');
gsap.set(nav, {
height: 0,
y: -10
});
let opened = false;
const tl = gsap.timeline({
paused: true,
defaults: {
duration: 0.35,
ease: 'power2.out'
}
});
tl.to(nav, {
opacity: 1,
visibility: 'visible',
pointerEvents: 'auto',
height: 'auto',
y: 0
});
burger.addEventListener('click', () => {
if (!mm.matches) {
return;
}
opened = !opened;
burger.classList.toggle('is-active', opened);
if (opened) {
tl.play();
} else {
tl.reverse();
}
});
const resetDesktop = () => {
if (!mm.matches) {
burger.classList.remove('is-active');
gsap.set(nav, {
clearProps: 'all'
});
opened = false;
} else {
gsap.set(nav, {
height: 0,
opacity: 0,
visibility: 'hidden',
pointerEvents: 'none',
y: -10
});
}
};
resetDesktop();
window.addEventListener('resize', resetDesktop);
});
