/* .top-line { background:#005baa;color:#fff;padding:0;font-size:15px;top:40px;left:0;right:0;z-index:10;border-bottom:1px solid #fff; } .top-line a { color:#fff;margin-left:4px; } .top-line a:first-child { margin-left:0; } .top-line ul { margin-bottom:0; } .top-line-box { position:relative;width:100%;height:auto;display:flex;justify-content: space-between;} #menu-glavnoe-menyu, #menu-glavnoe-menyu > li { position:relative;height:100%; } #menu-glavnoe-menyu > li > a.nav-link { white-space:nowrap;padding:9px 5px;text-transform:uppercase; } #menu-glavnoe-menyu > li { display:flex;align-items: center;padding:1rem 0; } .top-phone { font-size:24px;white-space: nowrap;line-height: 20px; height: 100%;display: flex;justify-content: flex-end;align-items: center; } .top-phone a { text-decoration:none;padding-left:20px;padding-right:20px;display:flex;align-items:center;height:100%;transition:0.5s; } .top-phone a:hover { color:#ddd; } .top-line .order-ask { height: 100%;display: flex;font-size: 1rem;width: 150px;align-items: center;justify-content: center;background:#f7913c;text-decoration:none;text-transform:uppercase;transition:0.5s;color:#6f1b28;font-weight:600; } .top-line .order-ask:hover { background:#bc6116;color:#fff; } .top-line .gohome-link { width:250px;padding:0.5rem;display:block; } .gohome-link img { margin-left:-9px; } .navbar { padding:0; } .navbar .navbar-nav > li > a { padding: 0 7px;font-size: 14px;transition:0.4s;color:#fff; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus,.current-menu-ancestor > a { color:#e5a000; } .navbar .navbar-nav > li.current-menu-item > a,.navbar .navbar-nav > li.current-menu-parent > a,.navbar .navbar-nav > li.current-category-ancestor > a,.menu-glavnoe-menyu-container>ul>li.current-menu-item a { color:#e5a000; } #menu-glavnoe-menyu { display:flex; } .navbar-dark .navbar-toggler { border:none;padding:0; outline: none; } .navbar-dark .navbar-toggler .fa-bars { font-size:20px;color:#fff; } #menu-glavnoe-menyu { margin-left:0;padding-left:0; } .menu-glavnoe-menyu-container { font-size:0.9rem;display:flex;justify-content: center; } .menu-glavnoe-menyu-container a { text-decoration:none!important;line-height:1.4rem; } .menu-glavnoe-menyu-container ul li ul { display:none;text-align: left; } .menu-glavnoe-menyu-container>ul>li>a { padding:10px 10px;height:100%;display: flex;align-items: center;font-weight:500; } .menu-glavnoe-menyu-container>ul>li:hover>a,.current-menu-ancestor > a,.menu-glavnoe-menyu-container>ul>li.current-menu-item a { background:#ffffff33 } .menu-glavnoe-menyu-container>ul>li.menu-item-has-children { position:relative; } .menu-glavnoe-menyu-container .menu-item-has-children ul.sub-menu,.menu-glavnoe-menyu-container .menu-item-has-children ul.sub-menu li { padding:0;margin:0;list-style:none; } .menu-glavnoe-menyu-container .menu-item-has-children ul.sub-menu li a { padding:10px 10px; border-bottom:1px solid #333;display:block;width:200px; } .menu-glavnoe-menyu-container>ul>li.menu-item-has-children:hover ul.sub-menu{ display:block;position:absolute;left:0;background:#444444dd;top:100%; } .menu-glavnoe-menyu-container .menu-item-has-children ul.sub-menu li:hover a { background:#333333dd; } .menu-burger-close.this-close { display:none; } #menu-glavnoe-menyu .menu-item-has-children a { padding-right:25px;position:Relative; } #menu-glavnoe-menyu .menu-item-has-children > a:after { content:"\f107";font-family: "Font Awesome 5 Pro";font-weight: 400;position:absolute;right:10px; } .menu-burger { display:none;position:absolute; right: 0px;top:20px;font-size:30px;color:#fff;cursor: pointer; } @media(max-width:1375px) { .menu-glavnoe-menyu-container>ul>li>a { padding-left:10px;padding-right:10px; } } @media(max-width:1275px) { .menu-glavnoe-menyu-container>ul>li>a { padding-left:7px;padding-right:7px; } } @media(max-width:1200px) { .top-line .gohome-link { width:180px; } .menu-glavnoe-menyu-container { font-size:0.8rem; } #menu-glavnoe-menyu .menu-item-has-children a { padding-right:12px; } #menu-glavnoe-menyu .menu-item-has-children > a:after { font-size:10px;right:2px } .top-line .order-ask { width:100px;font-size:0.8rem } .menu-glavnoe-menyu-container>ul>li>a { padding-top:15px;padding-bottom:15px; } .top-phone { font-size:1rem; } } @media(max-width:991px){ body{ padding-top:70px; } .top-line-box { justify-content: flex-start; } .top_phones_box { margin-left:2rem; } .navbar-collapse.collapse.show { border-bottom:4px solid #fff; } .navbar .navbar-nav > li > a { font-size:18px;padding:10px 0; } .top-line .after.container.df.fw { display:block; } .top-menu-toggler { display:block;color:#fff;height:39px; } .top-menu-toggler .navbar-toggler { color:#fff;outline:none!important;padding:0;margin-top:5px; } .top-menu-toggler .navbar-toggler .fa-bars { font-size:24px; } #menu-glavnoe-menyu,#menu-glavnoe-menyu > li { display:block; } #menu-glavnoe-menyu > li > a.nav-link { padding:10px 15px;border-top:1px solid #555 } #menu-glavnoe-menyu > li:first-child > a.nav-link { border-top:none; } #menu-glavnoe-menyu > li > a.nav-link:hover { background:rgba(0,0,0,0.5) } .menu-glavnoe-menyu-container.show #menu-glavnoe-menyu{ display:block;height:auto } #menu-glavnoe-menyu, #menu-glavnoe-menyu > li { height:auto; } .menu-glavnoe-menyu-container #menu-glavnoe-menyu{ display:none;padding-bottom:1rem;padding-top:1rem; } .menu-burger { display:block;} .menu-glavnoe-menyu-container.show{position:fixed; background: #000; top: 53px; right: 0; left: 0;overflow:auto;bottom:0;padding-bottom: 50px;display:block;border-top:1px solid #fff;} .top-line .gohome-link { width:140px; } .close-to-close.this-close { display:none; } .close-to-close { display:block; } .burger-to-open { display:block; } .burger-to-open.this-open { display:none; } .menu-glavnoe-menyu-container.show #menu-glavnoe-menyu{ display:block; } .menu-burger { display:block;} .menu-glavnoe-menyu-container { font-size:1.2rem; justify-content: flex-start;padding:0px 40px; position:absolute;background: #005baaff;left: -14px;right: -14px;top: 100%;border-top:1px solid #fff; } .menu-glavnoe-menyu-container .menu-item a { display:block; } .menu-glavnoe-menyu-container .menu-item .sub-menu { display:block;position:relative; } .menu-glavnoe-menyu-container>ul>li.menu-item-has-children:hover ul.sub-menu { position:relative; } #menu-glavnoe-menyu .menu-item-has-children > a:after { display:none; } #menu-glavnoe-menyu .menu-item-has-children > a,#menu-glavnoe-menyu > li > a { padding:10px; font-weight:600; } .menu-glavnoe-menyu-container>ul>li.menu-item-has-children ul.sub-menu a { padding-left:20px; } .menu-glavnoe-menyu-container>ul>li:hover>a { background:none;color:#ccc; } .menu-glavnoe-menyu-container>ul>li.menu-item-has-children:hover ul.sub-menu { background: none; } body.openmobilemenu { overflow:hidden; } body.openmobilemenu .utl-mobile .uptl_container-share { z-index:0; } #menu-glavnoe-menyu li a { display:block;width:100%; } } .top_phones_box ul { margin:0;padding:0; } .top_phones_box li { list-style:none;margin:0;padding:0; } .top_phones_box li a { text-decoration:none;display:block;padding:0.1rem 0;font-weight:500;font-size: 1.0rem;line-height: 1.4rem; } .top-gohome { display: flex;align-items: center; } .top_phones_box { padding:5px 0; } @media (max-width:600px) { .top_phones_box li a { font-size:0.8rem;line-height:1.1rem;} } .menu-item.call_courier a { background:#c5a58c } */ .site-header { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .top-bar { background: #1a3366; padding: 0.5rem 0; } .cabinet-link { color: #fff; text-decoration: none; font-size: 0.9rem; transition: opacity 0.3s ease; } .cabinet-link:hover { color: #fff; opacity: 0.8; } .main-header { background: #005baa; padding: 0.4rem 0;border-bottom:1px solid #fff; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo-block { flex-shrink: 0; } .logo-img { height: 50px; width: auto; } .main-nav { flex-grow: 1; display: flex; justify-content: center; } .main-nav .menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 1rem; } .main-nav .menu-item a { color: #fff; text-decoration: none; font-weight: 500; position: relative; padding: 0.5rem 0; transition: opacity 0.3s ease; } .main-nav .menu-item a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #fff; transform: scaleX(0); transition: transform 0.3s ease; } .main-nav .menu-item a:hover::after { transform: scaleX(1); } .main-nav .current-menu-item a::after { transform: scaleX(1); } .header-phones { display: flex; flex-direction: column; gap: 0.3rem; text-align: right; } .phone-primary, .header-phones a { color: #fff; text-decoration: none; font-size: 1.2rem; transition: opacity 0.3s ease; display: block; white-space: nowrap;line-height:1.5rem; } .phone-primary:hover, .header-phones a:hover { opacity: 0.8; color: #fff; } .navbar-toggler { background: none; border: none; color: #fff; font-size: 1.5rem; padding: 0.5rem; display: none; cursor: pointer; } .navbar-toggler:hover { opacity: 0.8; } /* Мобильное меню */ /* Мобильное меню */ .mobile-menu { position: fixed; top: 0; right: -100%; bottom: 0; width: 100%; background: linear-gradient(135deg, #005baa 0%, #1a3366 100%); display: flex; flex-direction: column; transition: right 0.3s ease; z-index: 1000; } .mobile-menu.active { right: 0; } /* Фиксированная шапка */ .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .mobile-menu-logo { height: 35px; } .mobile-menu-logo img { height: 100%; width: auto; } .close-menu { background: none; border: none; color: #fff; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; } .close-menu:hover { background: rgba(255, 255, 255, 0.1); } .close-menu i { font-size: 1.5rem; } /* Прокручиваемый контент */ .mobile-menu-content { padding: 2rem 1.5rem; overflow-y: auto; flex-grow: 1; -webkit-overflow-scrolling: touch; } .mobile-menu .menu { list-style: none; margin: 0; padding: 0; } .mobile-menu .menu-item { margin-bottom: 1.5rem; transform: translateX(-20px); opacity: 0; animation: slideIn 0.3s ease forwards; } .mobile-menu .menu-item:nth-child(1) { animation-delay: 0.1s; } .mobile-menu .menu-item:nth-child(2) { animation-delay: 0.15s; } .mobile-menu .menu-item:nth-child(3) { animation-delay: 0.2s; } .mobile-menu .menu-item:nth-child(4) { animation-delay: 0.25s; } .mobile-menu .menu-item:nth-child(5) { animation-delay: 0.3s; } .mobile-menu .menu-item:nth-child(6) { animation-delay: 0.35s; } .mobile-menu .menu-item:nth-child(7) { animation-delay: 0.4s; } .mobile-menu .menu-item a { color: #fff; text-decoration: none; font-size: 1.25rem; display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .mobile-menu .menu-item a::before { content: ''; position: absolute; top: 50%; left: 0; width: 0; height: 2px; background: #fff; transition: width 0.3s ease; transform: translateY(-50%); } .mobile-menu .menu-item a:hover { background: rgba(255, 255, 255, 0.1); padding-left: 1.5rem; } .mobile-menu .menu-item a:hover::before { width: 8px; } .mobile-menu .menu-item.current-menu-item a { background: rgba(255, 255, 255, 0.15); } @keyframes slideIn { to { transform: translateX(0); opacity: 1; } } /* Адаптивность */ @media (max-width: 991px) { .main-nav { display: none; } .navbar-toggler { display: block; } .header-content { gap: 1rem; } .logo-img { height: 40px; } .header-phones .phone-primary { font-size: 0.95rem; } .header-phones a:not(.phone-primary) { display: none; } } @media (max-width: 575px) { .header-content { padding: 0 0.5rem; } .logo-img { height: 35px; } } /* Стилизация скроллбара */ .mobile-menu-content::-webkit-scrollbar { width: 6px; } .mobile-menu-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .mobile-menu-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .mobile-menu-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Для Firefox */ .mobile-menu-content { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05); } /* Добавляем отступ справа для контента, чтобы он не прилипал к скроллбару */ .mobile-menu-content { padding-right: 2rem; }