/* ========================================================================== NAVIGATION v2 — GKSC Theme Mega-Navigation Based on menu-v5.html prototype. Dark B2B industrial theme. ========================================================================== */ /* ========================================================================== 1. CSS CUSTOM PROPERTIES ========================================================================== */:root{--bg:#0b1018;--bg2:#070b11;--bdr:rgba(255,255,255,0.06);--bl:#3b82f6;--bll:#60a5fa;--bld:#2563eb;--tw:#e2e8f0;--tg:#94a3b8;--tm:#64748b;--tn:#cbd5e1;--cyan:#06b6d4;--cyan-d:#0891b2;--nav-bg:#0e1013;--nav-panel:#12151a;--nav-line:rgba(255,255,255,0.06);--nav-text:#e7ecf3;--nav-soft:#94a3b8;--nav-dim:#64748b;--nav-accent:#40C4FF;--nav-hover:#ffffff;--nav-radius:8px;--nav-transition:200ms ease;}/* ========================================================================== 2. UTILITY BAR (.ub) ========================================================================== */ .ub{background:var(--bg2);border-bottom:1px solid var(--bdr);height:32px;transition:height 0.25s ease,opacity 0.2s ease;overflow:hidden;}.ub-in{max-width:1320px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;align-items:center;height:100%;}.ub-l{display:flex;gap:4px;}.ub-l a{color:var(--tm);text-decoration:none;font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:4px;transition:color 0.15s,background 0.15s;}.ub-l a:hover{color:var(--tg);background:rgba(255,255,255,0.03);}.ub-r{display:flex;align-items:center;gap:14px;}.ub-r a{color:var(--tm);text-decoration:none;font-size:11.5px;font-weight:500;transition:color 0.15s;}.ub-r a:hover{color:var(--tg);}.ub-r .s{opacity:0.3;color:var(--tm);}/* ========================================================================== 3. STICKY WRAPPER (.hd-wrap) ========================================================================== */ body{padding-top:88px}@media(max-width:1023px){body{padding-top:56px}}.hd-wrap{position:fixed;width:100%;top:0;z-index:1000;transition:box-shadow 0.3s ease;}.hd-wrap.scrolled{box-shadow:0 4px 24px rgba(0,0,0,0.5);}.hd-wrap.scrolled .ub{height:0;opacity:0;border-bottom:none;}/* ========================================================================== 4. HEADER (.hd) ========================================================================== */ .hd{background:var(--bg);border-bottom:1px solid var(--bdr);height:56px;}.hd-in{max-width:1320px;margin:0 auto;padding:0 28px;display:flex;align-items:center;height:100%;}/* ========================================================================== 5. LOGO ========================================================================== */ .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;margin-right:32px;}.logo-ic{width:32px;height:40px;flex-shrink:0;}.logo-t{line-height:1.15;}.logo-n{font-weight:800;font-size:14.5px;color:var(--tw);letter-spacing:0.3px;display:block;}.logo-s{font-size:7.5px;color:var(--tm);text-transform:uppercase;letter-spacing:2.5px;font-weight:600;display:block;}/* ========================================================================== 6. MAIN NAVIGATION (.nav,.nl) ========================================================================== */ .nav{display:flex;align-items:center;flex:1;}.nl{list-style:none;display:flex;margin:0;padding:0;}.nl > .hi{position:relative;}.nl > .hi > a{display:flex;align-items:center;gap:4px;padding:17px 13px;color:var(--tg);text-decoration:none;font-size:13px;font-weight:600;transition:color 0.15s;white-space:nowrap;letter-spacing:0.01em;}.nl > .hi > a:hover,.nl > .hi.on > a{color:var(--tw);}.nl > .hi > a .d{font-size:7px;opacity:0.4;margin-left:2px;}/* ========================================================================== 7. MEGA MENU (.mm) ========================================================================== */ .mm{display:none;position:absolute;top:100%;left:0;background:var(--bg);border:1px solid var(--bdr);border-top:2px solid var(--cyan);box-shadow:0 12px 32px rgba(0,0,0,0.5);z-index:999;border-radius:0 0 10px 10px;min-width:720px;}.mm.sh{display:block;animation:mm-fade 0.18s ease;}@keyframes mm-fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}.mega-wide{min-width:860px;}.mega-sm{min-width:640px;}/* -------------------------------------------------------------------------- 7a. Mega Menu Grid -------------------------------------------------------------------------- */ .mm-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:20px 24px;}.mm-c{padding:0 20px;}.mm-c + .mm-c{border-left:1px solid rgba(6,182,212,0.15);}.mm-c:first-child{padding-left:0;}.mm-c:last-child{padding-right:0;}/* -------------------------------------------------------------------------- 7b. Mega Menu Headings -------------------------------------------------------------------------- */ .mm-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--cyan);margin-bottom:10px;}.mm-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--cyan);margin:16px 0 10px;}/* -------------------------------------------------------------------------- 7c. Mega Menu Links -------------------------------------------------------------------------- */ .mm-a{display:block;padding:4px 0;color:var(--tg);text-decoration:none;font-size:13px;font-weight:500;transition:color 0.12s,padding-left 0.12s;line-height:1.45;}.mm-a:hover{color:var(--tw);padding-left:4px;}.mm-a.all{color:var(--bll);font-weight:600;margin-top:8px;font-size:12px;}.mm-a.all:hover{color:var(--tw);}/* -------------------------------------------------------------------------- 7d. Mega Menu Footer -------------------------------------------------------------------------- */ .mm-ft{padding:10px 24px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--bdr);}.mm-ft span{color:var(--tm);font-size:11px;}.mm-ft b{color:var(--tn);}.mm-ft button{padding:7px 18px;background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#fff;border:none;border-radius:7px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 2px 6px rgba(6,182,212,0.2);transition:filter 0.2s,box-shadow 0.2s;white-space:nowrap;}.mm-ft button:hover{filter:brightness(1.1);box-shadow:0 3px 12px rgba(6,182,212,0.35);}/* -------------------------------------------------------------------------- 7e. Mega Menu CTA Block -------------------------------------------------------------------------- */ .mm-cta{background:rgba(255,255,255,0.02);border:1px solid var(--bdr);border-radius:8px;padding:14px;text-align:center;margin-top:12px;}.mm-cta-t{font-size:13px;font-weight:700;color:var(--tw);margin-bottom:4px;}.mm-cta-s{font-size:11px;color:var(--tm);margin-bottom:10px;line-height:1.4;}.mm-cta button{padding:7px 16px;background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 2px 6px rgba(6,182,212,0.2);transition:filter 0.2s,box-shadow 0.2s;}.mm-cta button:hover{filter:brightness(1.1);box-shadow:0 3px 12px rgba(6,182,212,0.35);}/* ========================================================================== 8. HEADER RIGHT (.hr) ========================================================================== */ .hr{display:flex;align-items:center;gap:10px;margin-left:auto;}.ib{width:36px;height:36px;border-radius:50%;border:1px solid var(--bdr);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--tg);cursor:pointer;transition:border-color 0.2s,color 0.2s;text-decoration:none;padding:0;font-size:0;}.ib:hover{border-color:var(--tg);color:var(--tw);}.ib-bl{color:var(--cyan);}.ib-bl:hover{color:#22d3ee;border-color:var(--cyan);}.bk{padding:8px 18px;background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:filter 0.2s,box-shadow 0.2s;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;}.bk:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(6,182,212,0.3);}/* ========================================================================== 9. BURGER ========================================================================== */ .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;z-index:1001;cursor:pointer;background:none;border:none;padding:0;margin-left:12px;}.burger span{display:block;width:20px;height:2px;background:#fff;transition:all 0.3s ease;border-radius:1px;}.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}.burger.active span:nth-child(2){opacity:0;}.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}/* ========================================================================== 10. MOBILE MENU (.mob-menu) ========================================================================== */ .mob-menu{position:fixed;top:0;right:0;width:85vw;max-width:380px;height:100vh;background:var(--bg);z-index:9998;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;overflow:hidden;}.mob-menu.open{transform:translateX(0);}.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9997;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;}.mob-overlay.open{opacity:1;visibility:visible;}/* -------------------------------------------------------------------------- 10a. Mobile Menu Scroll Area -------------------------------------------------------------------------- */ .mob-in{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:72px 20px 20px;}/* -------------------------------------------------------------------------- 10b. Mobile Accordion Items -------------------------------------------------------------------------- */ .mob-item{border-bottom:1px solid var(--bdr);}.mob-head{display:flex;align-items:center;}.mob-head-link{flex:1;display:block;padding:14px 0;color:var(--tw);font-size:16px;font-weight:600;text-decoration:none;transition:color 0.15s;}.mob-head-link:hover{color:#fff;}.mob-head-link--solo{padding-right:48px;}.mob-toggle{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--tm);cursor:pointer;flex-shrink:0;transition:transform 0.25s,color 0.15s;}.mob-toggle.open{transform:rotate(180deg);color:var(--cyan);}/* -------------------------------------------------------------------------- 10c. Mobile Accordion Body -------------------------------------------------------------------------- */ .mob-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}.mob-body.open{max-height:2000px;}.mob-group{padding:0 0 12px;}.mob-gh{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--cyan);padding:10px 0 6px;}.mob-group a{display:block;padding:6px 0;color:var(--tg);font-size:14px;text-decoration:none;transition:color 0.12s;}.mob-group a:hover{color:var(--tw);}.mob-all{color:var(--bll) !important;font-weight:600;font-size:13px !important;margin-top:4px;}/* -------------------------------------------------------------------------- 10d. Mobile Bottom Bar -------------------------------------------------------------------------- */ .mob-bot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--bdr);background:var(--bg2);flex-shrink:0;}.mob-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;text-decoration:none;border:none;cursor:pointer;transition:opacity 0.2s;white-space:nowrap;}.mob-btn:active{opacity:0.85;}.mob-call{background:#0f3460;}.mob-tg{background:#0088cc;}.mob-kp{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));}/* ========================================================================== 11. RESPONSIVE BREAKPOINTS ========================================================================== */ @media (max-width:1023px){.ub{display:none;}.nav{display:none !important;}.hr .bk{display:none;}.hd{height:56px;}.burger{display:flex;}}@media (min-width:1024px){.nav{display:flex;}.burger{display:none !important;}.mob-menu,.mob-overlay{display:none !important;}}/* ========================================================================== 12. ACCESSIBILITY ========================================================================== */ a:focus-visible,button:focus-visible{outline:2px solid var(--bll);outline-offset:2px;border-radius:4px;}@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;}}/* ========================================================================== PRESERVED SECTIONS — Footer,Breadcrumbs,etc. (Using legacy --nav-* variables for backward compatibility) ========================================================================== */ /* ========================================================================== FOOTER ========================================================================== */ .site-footer{background:var(--nav-bg);padding:64px 0 32px;border-top:1px solid var(--nav-line);}.site-footer__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:40px;border-bottom:1px solid var(--nav-line);}.site-footer__logo{display:flex;align-items:center;gap:12px;text-decoration:none;}.site-footer__desc{max-width:400px;font-size:14px;color:var(--nav-dim);line-height:1.6;}.site-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:40px 0;}.site-footer__heading{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--nav-text);margin-bottom:16px;}.site-footer__links{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0;padding:0;}.site-footer__links li a{display:block;color:var(--nav-soft);font-size:14px;padding:4px 0;text-decoration:none;transition:color var(--nav-transition);}.site-footer__links li a:hover{color:var(--nav-hover);}.site-footer__links-all a{display:flex;align-items:center;gap:4px;margin-top:8px;color:var(--nav-dim);font-size:13px;text-decoration:none;transition:color var(--nav-transition);}.site-footer__links-all a:hover{color:var(--nav-soft);}.site-footer__contacts-bar{display:flex;flex-wrap:wrap;gap:32px;padding:32px 0;border-top:1px solid var(--nav-line);border-bottom:1px solid var(--nav-line);}.site-footer__contact{display:flex;align-items:flex-start;gap:8px;}.site-footer__contact svg{color:var(--nav-dim);flex-shrink:0;margin-top:2px;}.site-footer__contact a{color:var(--nav-soft);text-decoration:none;transition:color var(--nav-transition);}.site-footer__contact a:hover{color:var(--nav-hover);}.site-footer__contact-label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--nav-dim);margin-bottom:2px;}.site-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;gap:16px;}.site-footer__bottom p{font-size:13px;color:var(--nav-dim);line-height:1.5;margin:0;}.site-footer__bottom-nav{display:flex;gap:24px;}.site-footer__bottom-nav a{color:var(--nav-dim);font-size:13px;text-decoration:none;transition:color var(--nav-transition);}.site-footer__bottom-nav a:hover{color:var(--nav-soft);}/* ========================================================================== BREADCRUMBS ========================================================================== */ .breadcrumbs{background:var(--nav-panel);border-bottom:1px solid var(--nav-line);padding:12px 0;font-size:13px;}.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:4px;align-items:center;list-style:none;margin:0;padding:0;}.breadcrumbs__item{display:flex;align-items:center;gap:4px;color:var(--nav-dim);}.breadcrumbs__item:not(:last-child)::after{content:'>';margin-left:4px;color:var(--nav-dim);}.breadcrumbs__item a{color:var(--nav-soft);text-decoration:none;font-size:13px;transition:color var(--nav-transition);}.breadcrumbs__item a:hover{color:var(--nav-hover);}.breadcrumbs__item:last-child span{color:var(--nav-hover);font-weight:500;}/* ========================================================================== FOOTER RESPONSIVE ========================================================================== */ @media (max-width:1023px){.site-footer__grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:767px){.site-footer__grid{grid-template-columns:1fr;}.site-footer__contacts-bar{flex-direction:column;}}@media (max-width:479px){.site-footer__bottom{flex-direction:column;align-items:center;text-align:center;}.site-footer__bottom-nav{flex-direction:column;align-items:center;}}