@property --a{syntax:"";inherits:false;initial-value:0deg} #cn-nav,#cn-nav *{box-sizing:border-box} #cn-nav{ --blue:#03558B;--sky:#1B8FD6;--gold:#D6B029;--navy:#022B46;--white:#FFFFFF; --muted:rgba(222,234,246,.74);--line:rgba(160,200,235,.16); --cn-w:76px;--cn-wx:288px;--logo-h:60px;--plate:#FFFFFF; --ease:cubic-bezier(.22,1,.36,1);--tw:cubic-bezier(.4,0,.2,1);--ease-io:cubic-bezier(.65,0,.15,1); font-family:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif; } @media (min-width:1025px){html body{padding-left:var(--cn-w,76px)!important}} /* ===== Aurora glass rail ===== */ #cn-nav .cn-rail{ position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;bottom:0;z-index:99990;width:var(--cn-w);display:flex;flex-direction:column; padding:24px 0 18px;overflow:hidden; background:linear-gradient(180deg,#0B1733 0%,#060B1C 100%); transition:width .6s var(--ease),box-shadow .6s var(--ease); } #cn-nav .cn-rail::before{content:"";position:absolute;inset:-20% -80%;z-index:0;pointer-events:none;will-change:transform; background: radial-gradient(38% 20% at 32% 14%,rgba(27,143,214,.42),transparent 70%), radial-gradient(34% 18% at 72% 52%,rgba(214,176,41,.17),transparent 70%), radial-gradient(40% 22% at 26% 90%,rgba(3,85,139,.55),transparent 70%); animation:cn-aurora 26s ease-in-out infinite alternate} #cn-nav .cn-rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(214,176,41,.9) 25%,rgba(27,143,214,.7) 70%,transparent)} #cn-nav .cn-rail:hover,#cn-nav .cn-rail:focus-within{width:var(--cn-wx);box-shadow:22px 0 60px rgba(2,10,30,.55),0 0 40px rgba(27,143,214,.12)} #cn-nav .cn-brand,#cn-nav .cn-list{position:relative;z-index:1} /* ===== Logo: pearl plate + orbiting gold ring + 3D tilt + glare ===== */ #cn-nav .cn-brand{display:block;padding:0 12px;margin-bottom:22px;text-decoration:none;border-radius:16px;perspective:700px} #cn-nav .cn-ring{display:block;width:52px;padding:2px;border-radius:17px; background:conic-gradient(from var(--a),rgba(214,176,41,.45),rgba(27,143,214,.6),rgba(214,176,41,.95),rgba(214,176,41,.45)); box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 20px rgba(27,143,214,.22); transform:rotateX(var(--lrx,0deg)) rotateY(var(--lry,0deg));transition:width .6s var(--ease),transform .45s var(--tw),box-shadow .5s var(--tw)} #cn-nav .cn-rail:hover .cn-ring,#cn-nav .cn-rail:focus-within .cn-ring{width:calc(var(--cn-wx) - 24px)} #cn-nav .cn-plate{position:relative;display:block;width:100%;height:var(--logo-h);overflow:hidden;border-radius:15px; background:linear-gradient(150deg,var(--plate),#E8F1F8)} #cn-nav .cn-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))} #cn-nav .cn-plate::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:38%;z-index:4;pointer-events:none;opacity:0;transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(214,176,41,.55),rgba(255,255,255,.8),transparent)} #cn-nav .cn-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s var(--tw); background:radial-gradient(150px circle at var(--lx,50%) var(--ly,0%),rgba(214,176,41,.34),transparent 70%)} #cn-nav .cn-logo-img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;margin:0;padding:8px 12px;border:0;border-radius:0;box-shadow:none;object-fit:contain;object-position:center;opacity:0;transition:opacity .3s var(--tw)} #cn-nav .cn-mono{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-weight:800;font-size:28px;line-height:1;color:var(--blue); text-shadow:0 1px 0 #fff,0 3px 6px rgba(3,85,139,.35);transition:opacity .3s var(--tw)} #cn-nav .cn-mono::after{content:"";position:absolute;right:11px;bottom:13px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)} #cn-nav .cn-rail:hover .cn-logo-img,#cn-nav .cn-rail:focus-within .cn-logo-img{opacity:1;transition-delay:.18s} #cn-nav .cn-rail:hover .cn-mono,#cn-nav .cn-rail:focus-within .cn-mono{opacity:0} /* ===== Lists & dividers ===== */ #cn-nav .cn-list{list-style:none;margin:0;padding:0 14px} #cn-nav .cn-list--main{flex:1} #cn-nav .cn-list--auth{padding-top:6px} #cn-nav .cn-item{position:relative;margin:0;padding:3px 0;list-style:none} #cn-nav .cn-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line),rgba(160,200,235,.04));pointer-events:none} #cn-nav .cn-item::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,244,196,.95),transparent) -40% 0/32% 100% no-repeat,linear-gradient(90deg,var(--gold),rgba(27,143,214,.5) 55%,transparent); transform:scaleX(0);transform-origin:50% 50%;opacity:0;transition:transform .6s var(--ease),opacity .3s var(--tw)} #cn-nav .cn-item:has([aria-current="page"])::after{background:linear-gradient(90deg,rgba(214,176,41,.7),rgba(27,143,214,.15))} /* ===== Link ===== */ #cn-nav .cn-link{--mx:20%;--my:50%;position:relative;display:flex;align-items:center;gap:14px;height:52px;padding:0 4px;border-radius:14px;perspective:420px; color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;isolation:isolate; transition:background .4s var(--ease),color .3s var(--tw),box-shadow .5s var(--ease),transform .5s var(--ease)} #cn-nav .cn-link::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--gold),#fff1b5 50%,var(--gold)) 0 0/100% 220%;box-shadow:0 0 12px rgba(214,176,41,.7); transform:scaleY(0);transform-origin:50% 50%;opacity:0;transition:transform .55s var(--ease),opacity .3s var(--tw);z-index:2;pointer-events:none} #cn-nav .cn-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0; background:radial-gradient(180px circle at var(--mx) var(--my),rgba(214,176,41,.2),transparent 70%),linear-gradient(90deg,rgba(27,143,214,.28),rgba(27,143,214,.04)); transition:opacity .45s var(--ease)} /* 3D glossy icon tile */ #cn-nav .cn-ico{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#CFE6F8; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(3,85,139,.45)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 4px rgba(0,0,0,.35),0 5px 12px rgba(0,0,0,.45); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--tw),box-shadow .4s var(--tw),background .4s var(--tw)} #cn-nav .cn-ico::before{content:"";position:absolute;left:2px;right:2px;top:2px;height:46%;border-radius:10px 10px 50% 50%/10px 10px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none} #cn-nav .cn-ico svg{position:relative;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));transition:transform .55s var(--ease),stroke .3s} #cn-nav .cn-label{display:block;opacity:0;transform:translateX(-8px);transition:opacity .3s var(--tw),transform .5s var(--ease)} #cn-nav .cn-t{position:relative;display:inline-block;padding-bottom:2px;letter-spacing:.005em;transition:letter-spacing .45s var(--ease),transform .45s var(--ease)} #cn-nav .cn-t::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} #cn-nav .cn-rail:hover .cn-label,#cn-nav .cn-rail:focus-within .cn-label{opacity:1;transform:none;transition-delay:.1s} /* Active: gold 3D tile + bar + tint + stronger divider */ #cn-nav .cn-link[aria-current="page"]{color:var(--white);background:linear-gradient(90deg,rgba(214,176,41,.18),rgba(27,143,214,.05));box-shadow:inset 0 0 0 1px rgba(214,176,41,.22)} #cn-nav .cn-link[aria-current="page"]::before{transform:scaleY(1);opacity:1} #cn-nav .cn-link[aria-current="page"] .cn-ico{color:var(--navy);background:linear-gradient(145deg,#F6DF7A,#D6B029 55%,#9C7F12);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 4px rgba(90,65,0,.45),0 5px 14px rgba(214,176,41,.35)} #cn-nav .cn-link[aria-current="page"] .cn-ico svg{filter:none} #cn-nav .cn-link[aria-current="page"] .cn-t{font-weight:700} /* Register / Login */ #cn-nav .cn-link--reg{box-shadow:inset 0 0 0 1px rgba(214,176,41,.5);color:#F4E3A3} #cn-nav .cn-link--reg .cn-ico{color:var(--gold)} /* ===== Hover (mouse) / focus (keyboard) ===== */ @media (hover:hover){ #cn-nav .cn-brand:hover .cn-ring{box-shadow:0 14px 32px rgba(0,0,0,.55),0 0 28px rgba(214,176,41,.38),0 0 44px rgba(27,143,214,.25);animation:cn-spin 2.6s linear infinite} #cn-nav .cn-brand:hover .cn-glare{opacity:1} #cn-nav .cn-brand:hover .cn-plate::after{animation:cn-shine 1s var(--ease) 1} #cn-nav .cn-link:hover,#cn-nav .cn-link:focus-visible{color:var(--white);transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(214,176,41,.38),inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(2,10,30,.5),0 0 22px rgba(27,143,214,.18)} #cn-nav .cn-link:hover::before,#cn-nav .cn-link:focus-visible::before{transform:scaleY(1);opacity:1;animation:cn-edge .9s var(--ease) 1} #cn-nav .cn-link:hover::after,#cn-nav .cn-link:focus-visible::after{opacity:1} #cn-nav .cn-link:hover .cn-ico{color:var(--white);background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(27,143,214,.45) 55%,rgba(3,85,139,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 4px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.5),0 0 16px rgba(27,143,214,.45)} #cn-nav .cn-link[aria-current="page"]:hover .cn-ico{color:var(--navy);background:linear-gradient(145deg,#FBEA99,#E3BD2E 55%,#A8870F)} #cn-nav .cn-link:hover .cn-t,#cn-nav .cn-link:focus-visible .cn-t{letter-spacing:.03em;transform:translateX(2px)} #cn-nav .cn-link:hover .cn-t::after,#cn-nav .cn-link:focus-visible .cn-t::after{transform:scaleX(.55)} #cn-nav .cn-item:hover::before,#cn-nav .cn-item:focus-within::before{transform:scaleX(1);opacity:1;animation:cn-trail 1s var(--ease) 1} #cn-nav .cn-link--reg:hover{background:rgba(214,176,41,.12);box-shadow:inset 0 0 0 1px rgba(214,176,41,.85),0 8px 18px rgba(2,10,30,.5),0 0 22px rgba(214,176,41,.22)} #cn-nav [data-ico="home"]:hover svg{transform:translateY(-3px)} #cn-nav [data-ico="services"]:hover svg{transform:rotate(90deg)} #cn-nav [data-ico="about"]:hover svg{transform:translateX(3px)} #cn-nav [data-ico="contact"]:hover svg{animation:cn-pulse .7s var(--ease) 1} #cn-nav [data-ico="register"]:hover svg{transform:translateY(-2px) scale(1.1)} #cn-nav [data-ico="login"]:hover svg{transform:translateX(4px)} } #cn-nav .cn-link:focus-visible,#cn-nav .cn-brand:focus-visible,#cn-nav .cn-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @keyframes cn-aurora{to{transform:translate3d(10%,6%,0) rotate(7deg) scale(1.12)}} @keyframes cn-spin{to{--a:360deg}} @keyframes cn-shine{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(620%)}} @keyframes cn-edge{from{background-position:0 100%}to{background-position:0 0}} @keyframes cn-trail{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}} @keyframes cn-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.2) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}} /* ===== Staggered entrance (once) ===== */ @keyframes cn-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes cn-line{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes cn-glint{0%{box-shadow:0 0 0 rgba(214,176,41,0)}50%{box-shadow:0 0 16px rgba(214,176,41,.9)}100%{box-shadow:0 0 12px rgba(214,176,41,.7)}} #cn-nav.cn-play .cn-brand{animation:cn-up .6s var(--ease) both} #cn-nav.cn-play .cn-item{animation:cn-up .55s var(--ease) both;animation-delay:calc(.12s + var(--i)*.06s)} #cn-nav.cn-play .cn-item::after{animation:cn-line .6s var(--ease) both;transform-origin:left;animation-delay:calc(.2s + var(--i)*.06s)} #cn-nav.cn-play .cn-link[aria-current="page"]::before{animation:cn-glint 1s ease-out .75s both} /* ===== Mobile / tablet drawer ===== */ #cn-nav .cn-toggle,#cn-nav .cn-overlay{display:none} @media (max-width:1024px){ #cn-nav{--cn-w:0px} #cn-nav .cn-rail{width:min(86vw,320px);transform:translateX(-100%);visibility:hidden;transition:transform .55s var(--ease-io),visibility 0s .55s} #cn-nav.is-open .cn-rail{transform:none;visibility:visible;transition:transform .55s var(--ease-io);box-shadow:18px 0 60px rgba(2,10,30,.6)} #cn-nav .cn-rail:hover,#cn-nav .cn-rail:focus-within{width:min(86vw,320px)} #cn-nav .cn-label{opacity:1;transform:none} #cn-nav .cn-ring{width:calc(min(86vw,320px) - 24px)!important} #cn-nav .cn-logo-img{opacity:1}#cn-nav .cn-mono{opacity:0} #cn-nav .cn-toggle{display:grid;place-items:center;position:fixed;top:calc(14px + var(--wp-admin--admin-bar--height,0px));left:14px;z-index:99995;width:48px;height:48px;border:1px solid rgba(214,176,41,.55);border-radius:14px;background:linear-gradient(145deg,#0B1733,#060B1C);box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:pointer;padding:0;transition:left .55s var(--ease-io)} #cn-nav .cn-toggle span{display:block;width:20px;height:2px;background:var(--white);border-radius:2px;position:relative} #cn-nav .cn-toggle span::before,#cn-nav .cn-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--gold);border-radius:2px;transition:transform .4s var(--ease)} #cn-nav .cn-toggle span::before{top:-6px}#cn-nav .cn-toggle span::after{top:6px} #cn-nav.is-open .cn-toggle span{background:transparent} #cn-nav.is-open .cn-toggle span::before{transform:translateY(6px) rotate(45deg)} #cn-nav.is-open .cn-toggle span::after{transform:translateY(-6px) rotate(-45deg)} #cn-nav.is-open .cn-toggle{left:calc(min(86vw,320px) - 62px)} #cn-nav .cn-overlay{display:block;position:fixed;inset:0;z-index:99985;background:rgba(3,8,22,.65);opacity:0;pointer-events:none;transition:opacity .4s} #cn-nav.is-open .cn-overlay{opacity:1;pointer-events:auto} #cn-nav .cn-link:active{background:rgba(27,143,214,.25)} } @media (prefers-reduced-motion:reduce){ #cn-nav *,#cn-nav *::before,#cn-nav *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important} #cn-nav .cn-ico,#cn-nav .cn-ring{transform:none!important} } (function(){ var nav=document.getElementById('cn-nav'); if(!nav||nav.dataset.ready)return; nav.dataset.ready=1; var rail=nav.querySelector('.cn-rail'),btn=nav.querySelector('.cn-toggle'),ov=nav.querySelector('.cn-overlay'), links=[].slice.call(nav.querySelectorAll('.cn-link')),ring=nav.querySelector('.cn-ring'),brand=nav.querySelector('.cn-brand'), desktop=matchMedia('(min-width:1025px)'), fine=matchMedia('(hover:hover) and (pointer:fine)').matches, calm=matchMedia('(prefers-reduced-motion:reduce)').matches,played=false; // Active page detection var path=location.pathname.replace(/\/+$/,'')||'/'; links.forEach(function(a){ var p;try{p=new URL(a.href,location.origin).pathname.replace(/\/+$/,'')||'/';}catch(e){return;} if(p===path||(p!=='/'&&path.indexOf(p+'/')===0))a.setAttribute('aria-current','page'); }); // Entrance, once function play(){if(played||calm)return;played=true;nav.classList.add('cn-play');setTimeout(function(){nav.classList.remove('cn-play')},1400);} if(desktop.matches)play(); if(fine){ // Menu items: cursor light + 3D icon tilt (rect cached on enter, one rAF per frame) links.forEach(function(a){ var ico=a.querySelector('.cn-ico'),r,raf=0,x=0,y=0; a.addEventListener('pointerenter',function(){r=a.getBoundingClientRect();}); a.addEventListener('pointermove',function(e){ x=e.clientX;y=e.clientY;if(raf||!r)return; raf=requestAnimationFrame(function(){ raf=0;var lx=x-r.left,ly=y-r.top; a.style.setProperty('--mx',lx+'px');a.style.setProperty('--my',ly+'px'); if(!calm){var dx=Math.max(-1,Math.min(1,(lx-24)/24)),dy=Math.max(-1,Math.min(1,(ly-r.height/2)/(r.height/2))); ico.style.setProperty('--ry',(dx*16).toFixed(1)+'deg');ico.style.setProperty('--rx',(-dy*16).toFixed(1)+'deg');} }); }); a.addEventListener('pointerleave',function(){ico.style.removeProperty('--rx');ico.style.removeProperty('--ry');}); }); // Logo: 3D tilt + following glare var lr,lraf=0,lx=0,ly=0,glare=nav.querySelector('.cn-plate'); brand.addEventListener('pointerenter',function(){lr=ring.getBoundingClientRect();}); brand.addEventListener('pointermove',function(e){ lx=e.clientX;ly=e.clientY;if(lraf||!lr)return; lraf=requestAnimationFrame(function(){ lraf=0;var px=(lx-lr.left)/lr.width,py=(ly-lr.top)/lr.height; glare.style.setProperty('--lx',(px*100)+'%');glare.style.setProperty('--ly',(py*100)+'%'); if(!calm){ring.style.setProperty('--lry',((px-.5)*16).toFixed(1)+'deg');ring.style.setProperty('--lrx',((.5-py)*12).toFixed(1)+'deg');} }); }); brand.addEventListener('pointerleave',function(){ring.style.removeProperty('--lrx');ring.style.removeProperty('--lry');}); } // Mobile drawer function set(open){ nav.classList.toggle('is-open',open); btn.setAttribute('aria-expanded',open);btn.setAttribute('aria-label',open?'Close menu':'Open menu'); document.documentElement.style.overflow=open?'hidden':''; if(open){play();if(links[0])links[0].focus();} else if(document.activeElement&&rail.contains(document.activeElement))btn.focus(); } btn.addEventListener('click',function(){set(!nav.classList.contains('is-open'))}); ov.addEventListener('click',function(){set(false)}); document.addEventListener('keydown',function(e){if(e.key==='Escape'&&nav.classList.contains('is-open'))set(false)}); links.forEach(function(a){a.addEventListener('click',function(){if(nav.classList.contains('is-open'))set(false)})}); window.addEventListener('resize',function(){if(innerWidth>1024&&nav.classList.contains('is-open'))set(false)}); })();