/* ========================================= 1. ШАПКА И НАСТРОЙКИ МЕНЮ ========================================= */ .my-custom-menu .sp-column, .my-custom-menu .sp-module, .my-custom-menu .sp-megamenu-wrapper { background: transparent !important; } .my-custom-menu { background-color: #1e90ff !important; border-radius: 10px !important; max-width: 1300px !important; margin: 0 auto !important; padding: 10px 0 !important; } @media (min-width: 992px) { .my-custom-menu .sp-megamenu-parent { display: flex !important; justify-content: center !important; width: 100% !important; } } @media (max-width: 991px) { /* 1. Прячем сами слова (десктопные ссылки) на мобилках */ ul.sp-megamenu-parent, .sp-megamenu-wrapper { display: none !important; } /* 2. Убираем наезд меню на картинку и прозрачную полосу */ .home-overlay #sp-menyu { background-color: transparent !important; margin-bottom: 0 !important; height: auto !important; } } /* ЗАСТАВЛЯЕМ ГЛАВНОЕ МЕНЮ БЫТЬ КАПСОМ И НАСТРАИВАЕМ ШРИФТ */ .my-custom-menu ul.sp-megamenu-parent > li > a, .my-custom-menu ul.sp-megamenu-parent > li > span, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > a, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > span { text-transform: uppercase !important; font-family: "latoblack", Verdana, Helvetica, Arial, sans-serif !important; font-size: 13px !important; color: #ebebeb !important; /* Если захочешь сделать чисто белым, поменяй на #ffffff */ } /* ========================================= ИДЕАЛЬНОЕ ВЫПАДАЮЩЕЕ МЕНЮ И ПОДМЕНЮ ========================================= */ /* 1. Контейнер меню (ГЛАВНЫЙ И ВЛОЖЕННЫЕ) */ .my-custom-menu .sp-dropdown { background-color: #00508a !important; border-radius: 10px !important; border: none !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; padding: 10px 0 !important; margin: 0 !important; box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.15) !important; height: auto !important; z-index: 1000 !important; } /* 2. Чиним растягивание вложенного меню */ .my-custom-menu .sp-dropdown-inner, .my-custom-menu .sp-dropdown-items { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; width: 100% !important; } /* 3. Пункты меню */ .my-custom-menu .sp-dropdown li.sp-menu-item { position: relative !important; display: block !important; padding: 0 !important; margin: 0 !important; } /* 4. Позиционирование ВЛОЖЕННЫХ меню (ИСТОРИЯ) */ .my-custom-menu .sp-dropdown .sp-dropdown { position: absolute !important; left: 100% !important; top: -10px !important; margin-left: 0 !important; border-radius: 0 10px 10px 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; transform: none !important; z-index: 1001 !important; } /* 5. Показ вложенного меню при наведении */ .my-custom-menu .sp-dropdown li.sp-menu-item:hover > .sp-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ========================================= ВНЕШНИЙ ВИД ССЫЛОК И СТРЕЛОЧЕК ========================================= */ /* Внешний вид ВСЕХ пунктов в подменю */ .my-custom-menu .sp-dropdown li.sp-menu-item > a, .my-custom-menu .sp-dropdown li.sp-menu-item > span { color: #ebebeb !important; /* Цвет как у главного меню */ padding: 10px 20px !important; text-transform: uppercase !important; border-radius: 6px !important; margin: 2px 4px !important; transition: all 0.2s ease !important; display: block !important; /* === ВОТ ТУТ МЕНЯЕМ ШРИФТ И РАЗМЕР === */ font-family: "latoblack", Verdana, Helvetica, Arial, sans-serif !important; font-size: 13px !important; /* ==================================== */ font-weight: 400 !important; text-decoration: none !important; } /* ТОЛЬКО цвет текста при наведении */ .my-custom-menu .sp-dropdown li.sp-menu-item > a:hover, .my-custom-menu .sp-dropdown li.sp-menu-item > span:hover { color: #9ac2ff !important; background-color: transparent !important; } /* Место под стрелочку */ .my-custom-menu .sp-dropdown li.sp-has-child > a, .my-custom-menu .sp-dropdown li.sp-has-child > span { position: relative !important; padding-right: 30px !important; } /* Сама стрелочка */ .my-custom-menu .sp-dropdown li.sp-has-child > a::after, .my-custom-menu .sp-dropdown li.sp-has-child > span::after { content: "›" !important; position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 22px !important; font-weight: normal !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.6) !important; } /* Цвет стрелочки при наведении */ .my-custom-menu .sp-dropdown li.sp-has-child:hover > a::after, .my-custom-menu .sp-dropdown li.sp-has-child:hover > span::after { color: #9ac2ff !important; } /* Прозрачное меню поверх слайдера */ .home-overlay #sp-menyu { background-color: rgba(0, 0, 0, 0.55) !important; position: relative !important; z-index: 999 !important; margin-bottom: -60px !important; height: 60px !important; } .home-overlay .my-custom-menu { background: transparent !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; } .home-overlay .my-custom-menu ul.sp-megamenu-parent { margin: 0 auto !important; display: flex !important; justify-content: center !important; width: 100% !important; } .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > a, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > span { color: #ffffff !important; line-height: 60px !important; padding: 0 20px !important; margin: 0 !important; } .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > a:hover, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > span:hover { color: #9ac2ff !important; } /* ========================================= 2. ОСНОВНОЙ КОНТЕНТ (Новости, Хлебные крошки) ========================================= */ /* Блок новостей */ #sp-bottom1 { border-top: 5px solid #ebebeb !important; } .my-news-carousel h5 { text-align: center !important; padding: 15px 10px 10px 10px !important; margin: 0 !important; width: 100% !important; } .my-news-carousel h5 a.jt-title { color: #1b5693 !important; font-size: 19px !important; font-weight: 500 !important; text-transform: uppercase !important; display: block !important; text-decoration: none !important; } .my-news-carousel h5 a.jt-title:hover { color: #2a80b9 !important; } /* Анимация новостей */ .my-news-carousel .jt-inner { background-color: #f4f4f4 !important; height: 220px !important; padding-bottom: 10px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; overflow: hidden !important; } .my-news-carousel .jt-imagecover { height: 130px !important; max-height: 130px !important; opacity: 1; overflow: hidden !important; transition: height 0.4s ease, max-height 0.4s ease, opacity 0.2s ease !important; } .my-news-carousel .jt-inner:hover .jt-imagecover { height: 0px !important; max-height: 0px !important; opacity: 0 !important; } .my-news-carousel .jt-author-date, .my-news-carousel .jt-readmore { max-height: 0px; opacity: 0; overflow: hidden !important; transition: all 0.4s ease-in-out !important; text-align: center !important; margin: 0 !important; padding: 0 10px !important; width: 100% !important; box-sizing: border-box !important; } .my-news-carousel .jt-author-date { color: #777 !important; font-size: 13px !important; } .my-news-carousel .jt-inner:hover .jt-author-date { max-height: 30px !important; opacity: 1 !important; margin-top: 15px !important; } .my-news-carousel .jt-inner:hover .jt-readmore { max-height: 40px !important; opacity: 1 !important; margin-top: 5px !important; } .my-news-carousel .jt-readmore a { background: transparent !important; color: #1b72bc !important; padding: 0 !important; border: none !important; box-shadow: none !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; display: inline-block !important; line-height: 1.5 !important; } .my-news-carousel .jt-readmore a:hover { text-decoration: underline !important; color: #124d80 !important; } .my-news-carousel .jt-readmore a i, .my-news-carousel .jt-readmore a span { display: none !important; } /* Исправление кликабельности точек в новостях */ .my-news-carousel { position: relative !important; } .my-news-carousel .owl-dots { position: absolute !important; z-index: 9999 !important; pointer-events: auto !important; width: 100% !important; } .my-news-carousel .owl-dots button, .my-news-carousel .owl-dots .owl-dot { z-index: 10000 !important; position: relative !important; cursor: pointer !important; } /* Скрываем компонент на главной */ .view-featured #sp-component { display: none !important; } /* ПРЯЧЕМ ХЛЕБНЫЕ КРОШКИ НА ГЛАВНОЙ СТРАНИЦЕ */ .view-featured #sp-khlebanye-kroshki, .view-featured .breadcrumb { display: none !important; } /* Центрирование хлебных крошек */ .breadcrumb { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; } .breadcrumb, .breadcrumb li, .breadcrumb a, .breadcrumb span { text-transform: none !important; } #sp-breadcrumb .sp-module-content { text-align: center !important; } .breadcrumb i, .breadcrumb span[class*="icon-"] { color: #b0b0b0 !important; } .breadcrumb svg { fill: #b0b0b0 !important; color: #b0b0b0 !important; } /* ========================================= 3. БЛОК "ВАЖНОЕ НА ГЛАВНОЙ" И КАРУСЕЛЬ ========================================= */ #sp-vazhnoe-na-glavnoj-stranitse .row { flex-wrap: nowrap !important; } #sp-vazhnoe-na-glavnoj-stranitse .row > div { padding-left: 0 !important; padding-right: 0 !important; } @media (min-width: 992px) { #sp-vazhnoe-na-glavnoj-stranitse #sp-user4 { flex: 0 0 17% !important; max-width: 17% !important; width: 17% !important; } #sp-vazhnoe-na-glavnoj-stranitse #sp-user5 { flex: 0 0 83% !important; max-width: 83% !important; width: 83% !important; } } #sp-user4 .sp-column, #sp-user4 .sp-module, #sp-user4 .sp-module-content, #sp-user4 .custom, #sp-user4 .custom p { height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } #sp-user4 img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; } .my-important-block, .my-important-block .sp-module-content, .my-important-block .jtcs_item_wrapper, .my-important-block .owl-carousel, .my-important-block .owl-stage-outer { height: 100% !important; padding: 0 !important; margin: 0 !important; } .my-important-block .owl-stage { display: flex !important; align-items: stretch !important; height: 100% !important; } .my-important-block .owl-item { display: flex !important; float: none !important; } .my-important-block .fake-col-wrapper, .my-important-block .slide { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; } .my-important-block .jt-inner { background-color: #ffffff !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 350px !important; } .my-important-block .jt-imagecover, .my-important-block a.link-image { display: block !important; background: transparent !important; width: 100% !important; flex: 0 0 60% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .my-important-block img.jtcs-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .my-important-block h5 { background-color: #ffffff !important; margin: 0 !important; padding: 15px 10px !important; border-right: 1px solid #ebebeb !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 40% !important; box-sizing: border-box !important; } .my-important-block .owl-item:last-child h5 { border-right: none !important; } .my-important-block h5 a.jt-title { color: #00508a !important; font-size: 19px !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.3 !important; white-space: normal !important; display: block !important; } .my-important-block h5 a.jt-title:hover { color: #2a80b9 !important; } .my-important-block .owl-nav { position: absolute !important; top: 25% !important; width: 100% !important; display: block !important; pointer-events: none !important; margin: 0 !important; z-index: 10 !important; } .my-important-block .owl-nav button.owl-prev, .my-important-block .owl-nav button.owl-next { position: absolute !important; pointer-events: auto !important; background-color: rgba(0, 80, 138, 0.7) !important; color: #ffffff !important; width: 35px !important; height: 35px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; border: none !important; } .my-important-block .owl-nav button.owl-prev:hover, .my-important-block .owl-nav button.owl-next:hover { background-color: rgba(0, 80, 138, 1) !important; } .my-important-block .owl-nav button.owl-prev { left: 5px !important; } .my-important-block .owl-nav button.owl-next { right: 5px !important; } .my-important-block .owl-nav button i { margin: 0 !important; } .my-important-block a.link-image { position: relative !important; } .my-important-block a.link-image::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 80, 138, 0.7) !important; opacity: 0 !important; transition: opacity 0.3s ease-in-out !important; z-index: 5 !important; pointer-events: none !important; } .my-important-block a.link-image::after { content: "\f15c" !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: #ffffff !important; font-size: 35px !important; opacity: 0 !important; transition: opacity 0.3s ease-in-out !important; z-index: 6 !important; pointer-events: none !important; } .my-important-block .jt-inner:hover a.link-image::before, .my-important-block .jt-inner:hover a.link-image::after { opacity: 1 !important; } .my-important-block .jt-imagecover::before, .my-important-block .jt-inner:hover .jt-imagecover::before { display: none !important; opacity: 0 !important; background: transparent !important; width: 0 !important; height: 0 !important; } .my-important-block .owl-stage-outer { clip-path: inset(0px 1px 0px 0px) !important; overflow: hidden !important; } .my-important-block .owl-carousel, .my-important-block .owl-stage-outer { -webkit-mask-image: linear-gradient(to right, black calc(100% - 4px), transparent calc(100% - 4px)) !important; mask-image: linear-gradient(to right, black calc(100% - 4px), transparent calc(100% - 4px)) !important; } #sp-vazhnoe-na-glavnoj-stranitse { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ========================================= 4. БЛОКИ ИНФОРМАЦИИ, ПОДВАЛ И ФОНЫ ========================================= */ body { background-color: #ebebeb !important; } #sp-informatsiya-na-glavnoj, #sp-dop-infa-i-rassylka-na-glavnoj, #sp-podval-na-kazhdoj-stranitse { padding: 0 !important; margin: 0 !important; } #sp-informatsiya-na-glavnoj .row > div { padding-left: 0 !important; padding-right: 0 !important; } #sp-informatsiya-na-glavnoj .sp-module, #sp-informatsiya-na-glavnoj .sp-module-content, #sp-informatsiya-na-glavnoj .custom, #sp-informatsiya-na-glavnoj .custom p { margin: 0 !important; padding: 0 !important; line-height: 0 !important; } #sp-informatsiya-na-glavnoj img { width: 100% !important; height: auto !important; display: block !important; border-radius: 0 !important; } #sp-informatsiya-na-glavnoj .container { background-color: #6495ed !important; padding-bottom: 40px !important; } #sp-dop-infa-i-rassylka-na-glavnoj .container { background-color: #6495ed !important; padding-top: 45px !important; padding-bottom: 20px !important; } #sp-podval-na-kazhdoj-stranitse { background-color: transparent !important; } #sp-podval-na-kazhdoj-stranitse .container { background: linear-gradient(180deg, #6495ed 0%, #e6f0fa 100%) !important; padding-top: 30px !important; padding-bottom: 40px !important; margin-bottom: 40px !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; } /* Убираем верхние скругления подвала ТОЛЬКО на главной странице */ .view-featured #sp-podval-na-kazhdoj-stranitse .container { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } #sp-podval-na-kazhdoj-stranitse .container > .row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; } #sp-position4 .sp-column { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 35px !important; width: 100% !important; } #sp-footer { background-color: transparent !important; border-top: none !important; padding-top: 15px !important; padding-bottom: 20px !important; } #sp-footer, #sp-footer p, #sp-footer span { color: #666666 !important; font-size: 13px !important; } /* ========================================= 5. ТИПОГРАФИКА В ПОДВАЛЕ ========================================= */ #sp-podval-na-kazhdoj-stranitse .sp-module-title, #sp-dop-infa-i-rassylka-na-glavnoj .sp-module-title { font-family: Lato, Verdana, Helvetica, Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #ffffff !important; margin-top: 0 !important; margin-bottom: 25px !important; } #sp-podval-na-kazhdoj-stranitse p, #sp-podval-na-kazhdoj-stranitse .custom, #sp-dop-infa-i-rassylka-na-glavnoj p, #sp-dop-infa-i-rassylka-na-glavnoj .custom { font-family: Lato, Verdana, Helvetica, Arial, sans-serif !important; font-size: 13px !important; color: #ffffff !important; line-height: 1.5 !important; } #sp-podval-na-kazhdoj-stranitse ul li a, #sp-dop-infa-i-rassylka-na-glavnoj ul li a, #sp-dop-infa-i-rassylka-na-glavnoj a, #sp-dop-infa-i-rassylka-na-glavnoj p a { color: #ffffff !important; font-family: Lato, Verdana, Helvetica, Arial, sans-serif !important; font-size: 13px !important; text-decoration: none !important; } #sp-podval-na-kazhdoj-stranitse ul li a:hover, #sp-dop-infa-i-rassylka-na-glavnoj ul li a:hover, #sp-dop-infa-i-rassylka-na-glavnoj a:hover, #sp-dop-infa-i-rassylka-na-glavnoj p a:hover { color: #ffffff !important; text-decoration: underline !important; } #sp-podval-na-kazhdoj-stranitse ul, #sp-dop-infa-i-rassylka-na-glavnoj ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } #sp-podval-na-kazhdoj-stranitse ul li, #sp-dop-infa-i-rassylka-na-glavnoj ul li { margin-bottom: 8px !important; } /* ========================================= 6. ФОРМЫ (Подписка на рассылку и УМНЫЙ ПОИСК) ========================================= */ #sp-dop-infa-i-rassylka-na-glavnoj form, #sp-podval-na-kazhdoj-stranitse form { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; } #sp-dop-infa-i-rassylka-na-glavnoj form { max-width: 450px !important; } #sp-podval-na-kazhdoj-stranitse form { max-width: 380px !important; } #sp-podval-na-kazhdoj-stranitse form label { display: none !important; } #sp-podval-na-kazhdoj-stranitse form .mod-finder__search { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 10px !important; } #sp-podval-na-kazhdoj-stranitse form .awesomplete { flex: 1 !important; width: 100% !important; order: 1 !important; } #sp-dop-infa-i-rassylka-na-glavnoj form > div { display: flex !important; width: 100% !important; gap: 10px !important; } #sp-dop-infa-i-rassylka-na-glavnoj form input[type="email"], #sp-dop-infa-i-rassylka-na-glavnoj form input[type="text"], #sp-podval-na-kazhdoj-stranitse form input[type="email"], #sp-podval-na-kazhdoj-stranitse form input[type="text"], #sp-podval-na-kazhdoj-stranitse form input[type="search"], #sp-podval-na-kazhdoj-stranitse form input.search-query { width: 100% !important; flex: 1 !important; height: 40px !important; padding: 0 15px !important; border: none !important; border-radius: 2px !important; font-family: Lato, sans-serif !important; font-size: 13px !important; color: #555555 !important; margin: 0 !important; } #sp-dop-infa-i-rassylka-na-glavnoj form button, #sp-dop-infa-i-rassylka-na-glavnoj form input[type="submit"], #sp-podval-na-kazhdoj-stranitse form button, #sp-podval-na-kazhdoj-stranitse form input[type="submit"] { height: 40px !important; padding: 0 25px !important; background-color: #aed6df !important; border: none !important; border-radius: 2px !important; cursor: pointer !important; transition: background-color 0.2s ease !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #sp-dop-infa-i-rassylka-na-glavnoj form button, #sp-dop-infa-i-rassylka-na-glavnoj form input[type="submit"] { color: #333333 !important; font-size: 13px !important; font-family: Lato, sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; } #sp-podval-na-kazhdoj-stranitse form button, #sp-podval-na-kazhdoj-stranitse form input[type="submit"] { order: 2 !important; color: transparent !important; font-size: 0 !important; } #sp-podval-na-kazhdoj-stranitse form button span[class*="icon-"], #sp-podval-na-kazhdoj-stranitse form button svg, #sp-podval-na-kazhdoj-stranitse form button i { display: none !important; } #sp-podval-na-kazhdoj-stranitse form button::after, #sp-podval-na-kazhdoj-stranitse form input[type="submit"]::after { content: "ИСКАТЬ" !important; color: #333333 !important; font-size: 13px !important; font-family: Lato, sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; display: block !important; } #sp-dop-infa-i-rassylka-na-glavnoj form button:hover, #sp-dop-infa-i-rassylka-na-glavnoj form input[type="submit"]:hover, #sp-podval-na-kazhdoj-stranitse form button:hover, #sp-podval-na-kazhdoj-stranitse form input[type="submit"]:hover { background-color: #9ac2cb !important; } /* ========================================= 7. СОЦСЕТИ И КНОПКА "НАВЕРХ" ========================================= */ .footer-social-block { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 40px !important; margin: 0 !important; flex-wrap: wrap !important; } .footer-social-block .admin-logo { width: 100% !important; max-width: 380px !important; height: auto !important; display: block !important; } .footer-social-block .social-icon { width: 70px !important; height: 70px !important; display: block !important; object-fit: contain !important; transition: transform 0.2s ease-in-out !important; } .footer-social-block a:hover .social-icon { transform: scale(1.08) !important; } .sp-scroll-up { background-color: #3b8fd9 !important; color: #ffffff !important; transition: background-color 0.3s ease !important; } .sp-scroll-up:hover { background-color: #00508a !important; color: #ffffff !important; } /* ========================================= 8. МЕНЮ ВЕДОМСТВ (Комитет, Министерство, Администрация) ========================================= */ #sp-position3 ul.mod-menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; column-gap: 40px !important; row-gap: 15px !important; margin: 0 !important; padding: 0 !important; } #sp-position3 ul.mod-menu li { margin-bottom: 0 !important; } #sp-position3 ul.mod-menu li:last-child { flex: 0 0 100% !important; text-align: center !important; } #sp-position3 ul.mod-menu li a { text-align: center !important; display: inline-block !important; } /* ========================================= 9. КОНТАКТЫ (СЕТКА) ========================================= */ #sp-component .dl-horizontal { display: grid !important; grid-template-columns: 170px 1fr !important; column-gap: 20px !important; row-gap: 2px !important; margin-bottom: 25px !important; font-size: 15px !important; } #sp-component .dl-horizontal dt { text-align: right !important; font-weight: 700 !important; color: #686868 !important; margin: 0 !important; } #sp-component .dl-horizontal dd { margin: 0 !important; text-align: left !important; } /* ========================================= 10. БЕЛЫЙ ЛИСТ (КАРТОЧКА) ДЛЯ СТАТЕЙ ========================================= */ #sp-component, .item-page { background-color: #fafbff !important; border-radius: 20px !important; padding: 40px !important; box-shadow: 0 5px 25px rgba(0,0,0,0.05) !important; margin-top: 20px !important; margin-bottom: 40px !important; /* === ВАЖНО: ЗДЕСЬ МОЖНО МЕНЯТЬ ШИРИНУ БЕЛОГО ЛИСТА === */ max-width: 1200px !important; /* ===================================================== */ margin-left: auto !important; margin-right: auto !important; } /* Мобильная версия листа */ @media (max-width: 768px) { #sp-component, .item-page { padding: 20px !important; max-width: 100% !important; } } /* ========================================= 12. БЛОК ПРОФСОЮЗА (Состав комитета в position5) ========================================= */ /* Красим сам модуль и делаем скругления */ #sp-position5 .sp-module { background-color: #6495ed !important; border-radius: 20px !important; padding: 35px 30px !important; margin-bottom: 10px !important; /* УМЕНЬШЕННЫЙ ОТСТУП СНИЗУ */ max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-shadow: 0 5px 25px rgba(0,0,0,0.05) !important; } /* Настраиваем заголовок модуля */ #sp-position5 .sp-module-title { color: #ffffff !important; text-align: center !important; font-size: 26px !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 35px !important; text-transform: none !important; border-bottom: none !important; } /* Убиваем старые флоаты и включаем современный Grid */ #sp-position5 .gantry-width-container { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 20px !important; width: 100% !important; align-items: stretch !important; } #sp-position5 .gantry-width-20 { width: 100% !important; float: none !important; } /* Flexbox для идеального выравнивания текста */ #sp-position5 .gantry-width-spacer { display: flex !important; flex-direction: column !important; align-items: center !important; height: 100% !important; } /* Прячем лишние переносы строк, которые затесались в старом HTML */ #sp-position5 .gantry-width-spacer br { display: none !important; } /* Настройка фотографий */ #sp-position5 .rt-image { width: 100% !important; display: block !important; margin-bottom: 15px !important; } #sp-position5 .rt-image img { width: 100% !important; height: auto !important; display: block !important; border-radius: 4px !important; margin: 0 !important; } /* Имена (h3) */ #sp-position5 h3.nomarginbottom { color: #ffffff !important; font-size: 22px !important; /* Здесь можно увеличить шрифт */ font-weight: 400 !important; /* Измени на 400, чтобы убрать жирность */ line-height: 1.2 !important; margin: 0 0 8px 0 !important; text-align: center !important; flex-grow: 1 !important; } /* Должности (h6) */ #sp-position5 h6.nomargintop { color: #ffffff !important; font-size: 18px !important; font-weight: 400 !important; margin: 0 !important; text-align: center !important; opacity: 0.9 !important; } /* === АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И ТЕЛЕФОНОВ === */ @media (max-width: 991px) { #sp-position5 .gantry-width-container { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 767px) { #sp-position5 .sp-module { padding: 25px 15px !important; } #sp-position5 .gantry-width-container { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { #sp-position5 .gantry-width-container { grid-template-columns: 1fr !important; } } /* ========================================= 13. БОКОВОЕ МЕНЮ (НАВИГАЦИЯ В ПОЗИЦИИ RIGHT) ========================================= */ /* Оформляем сам серый блок */ #sp-right .sp-module { background-color: #cccccc !important; /* Цвет как на старом сайте */ border-radius: 20px !important; padding: 30px !important; margin-top: 20px !important; box-shadow: none !important; /* Убрал тень для большего сходства с оригиналом */ } /* Убираем стандартные отступы списка */ #sp-right ul.menu { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* УБРАЛИ ЛИНИИ и настроили отступы между пунктами */ #sp-right ul.menu li { border-bottom: none !important; /* Разделительных линий больше нет */ padding: 10px 0 !important; margin: 0 !important; } #sp-right ul.menu li:first-child { padding-top: 0 !important; } #sp-right ul.menu li:last-child { padding-bottom: 0 !important; } /* Внешний вид самих ссылок (ШРИФТ НЕ ЖИРНЫЙ) */ #sp-right ul.menu li a { color: #333333 !important; font-size: 15px !important; font-weight: 400 !important; /* Сделали шрифт обычным */ text-decoration: none !important; display: flex !important; align-items: center !important; transition: color 0.2s ease !important; } /* Круглая стрелочка перед текстом (как в оригинале) */ #sp-right ul.menu li a::before { content: "\f138" !important; /* Иконка: круг с уголком (chevron-circle-right) */ font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; margin-right: 12px !important; font-size: 15px !important; color: #444444 !important; /* Темно-серый цвет иконки */ transition: color 0.2s ease !important; } /* Эффект при наведении мышки */ #sp-right ul.menu li a:hover, #sp-right ul.menu li a:hover::before { color: #1b5693 !important; /* Фирменный синий при наведении */ } /* ========================================= 14. ОГРАНИЧЕНИЕ ШИРИНЫ ГЛАВНОГО КОНТЕЙНЕРА ========================================= */ /* Умный поиск контейнера: находим секцию с белым листом и сжимаем её */ section:has(#sp-component) > .container, section:has(#sp-right) > .container { max-width: 1200px !important; } /* Глобальное оформление всего блока Phoca */ .phocadownloadfilelist { background-color: #b0c4de !important; border-radius: 10px !important; padding: 15px 25px !important; margin: 20px 0 !important; border: none !important; box-shadow: none !important; } /* Убираем рамки и выравниваем строки с файлами */ .phocadownloadfilelist > div { border: none !important; background: transparent !important; padding: 8px 0 !important; display: flex !important; align-items: center !important; } /* Прячем стандартную серую иконку (стрелочку) от Phoca */ .phocadownloadfilelist img, .phocadownloadfilelist .pd-icon { display: none !important; } /* Настраиваем оригинальный шрифт для названий документов */ .phocadownloadfilelist a { color: #444444 !important; font-family: 'Roboto', sans-serif !important; font-size: 15px !important; text-decoration: none !important; font-weight: 500 !important; line-height: 1.4 !important; position: relative !important; padding-left: 28px !important; display: inline-block !important; } /* Бронебойная иконка PDF (Идеальный красный лист с надписью PDF) */ .phocadownloadfilelist a::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 24px !important; /* Чуть вытянул высоту под пропорции листа */ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzMiI+PHBhdGggZmlsbD0iI2VhNDMzNSIgZD0iTTMgMGgxMmw5IDl2MjBhMyAzIDAgMCAxLTMgM0gzYTMgMyAwIDAgMS0zLTNWM2EzIDMgMCAwIDEgMy0zeiIvPjxwYXRoIGZpbGw9IiNmZmNkZDIiIGQ9Ik0xNSAwdjZhMyAzIDAgMCAwIDMgM2g2eiIvPjx0ZXh0IHg9IjEyIiB5PSIyNiIgZmlsbD0iI2ZmZiIgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iOSIgZm9udC13ZWlnaHQ9ImJvbGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBERjwvdGV4dD48L3N2Zz4=") !important; background-size: contain !important; background-repeat: no-repeat !important; display: block !important; } /* Эффект при наведении мышки */ .phocadownloadfilelist a:hover { text-decoration: underline !important; color: #0b5ed7 !important; } /* Оформление всплывающего темного окна для PDF */ #custom-pdf-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.85) !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; opacity: 0; transition: opacity 0.3s ease; } #custom-pdf-modal.pdf-visible { opacity: 1 !important; } /* Панель с кнопками (ВНИЗ СПРАВА) */ .pdf-modal-actionbar { position: absolute !important; bottom: 30px !important; right: 40px !important; display: flex !important; align-items: center !important; gap: 15px !important; z-index: 10 !important; } /* Единый дизайн прозрачных стеклянных кнопок */ .pdf-modal-btn { background-color: rgba(255, 255, 255, 0.15) !important; color: #fff !important; text-decoration: none !important; font-family: 'Roboto', sans-serif !important; font-size: 14px !important; padding: 10px 20px !important; border-radius: 6px !important; transition: all 0.2s ease !important; cursor: pointer !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(5px) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .pdf-modal-btn:hover { background-color: rgba(255, 255, 255, 0.3) !important; border-color: #fff !important; } /* Отдельный дизайн для крестика (СВЕРХУ СПРАВА) */ .pdf-modal-btn-close-top { position: absolute !important; top: 30px !important; right: 40px !important; width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 50% !important; font-size: 20px !important; line-height: 1 !important; z-index: 10 !important; } /* Область самого документа (УВЕЛИЧИЛИ ВЫСОТУ НА МАКСИМУМ) */ #custom-pdf-modal iframe { width: 85% !important; max-width: 1200px !important; height: 94vh !important; border: none !important; background-color: #e5e5e5 !important; border-radius: 8px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important; } /* Светло-голубой блок для заголовков категорий */ .custom-title-block { display: block !important; width: 100% !important; background-color: #b8dcec !important; color: #333333 !important; text-align: center !important; text-transform: uppercase !important; font-family: 'Roboto Condensed', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; /* Твой настроенный размер шрифта */ padding: 15px 20px !important; border-radius: 6px !important; text-decoration: none !important; box-sizing: border-box !important; margin-bottom: 20px !important; border: none !important; /* Настройки для плавной магии */ position: relative !important; z-index: 1 !important; overflow: hidden !important; transition: color 0.4s ease !important; } /* Невидимый слой с градиентом */ .custom-title-block::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to bottom, #bce0ee 0%, #68a4e8 100%) !important; z-index: -1 !important; opacity: 0 !important; transition: opacity 0.4s ease !important; } /* Проявляем градиент при наведении */ .custom-title-block:hover::before { opacity: 1 !important; } /* ========================================= 16. МОДАЛЬНОЕ ОКНО ДЛЯ КАРТИНОК (Лайтбокс) ========================================= */ #custom-image-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.85) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0; transition: opacity 0.3s ease; cursor: pointer !important; } #custom-image-modal.img-visible { opacity: 1 !important; } #custom-image-modal img { max-width: 90% !important; max-height: 90vh !important; border-radius: 4px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important; } /* ========================================= 17. ПЛИТКИ СОЦИАЛЬНЫХ ССЫЛОК (Замена RokSprocket) ========================================= */ ul.custom-social-cards { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 15px !important; margin: 40px 0 !important; padding: 0 !important; list-style: none !important; /* Убиваем точки от списка */ } ul.custom-social-cards li { margin: 0 !important; padding: 0 !important; display: block !important; } /* Оформление самой карточки */ ul.custom-social-cards .social-card { display: flex !important; flex-direction: column !important; align-items: center !important; background-color: #ffffff !important; border: 1px solid #e5e5e5 !important; padding: 15px 10px 20px 10px !important; text-decoration: none !important; transition: all 0.2s ease !important; height: 100% !important; box-sizing: border-box !important; } /* Эффект при наведении мышки */ ul.custom-social-cards .social-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; transform: translateY(-2px) !important; } /* Контейнер для картинок */ ul.custom-social-cards .social-img { height: 70px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 15px !important; } ul.custom-social-cards .social-img img { max-height: 100% !important; max-width: 100% !important; object-fit: contain !important; } /* Синий текст заголовка */ ul.custom-social-cards .social-title { display: block !important; color: #1b5693 !important; font-size: 16px !important; line-height: 1.2 !important; text-align: center !important; font-family: 'Roboto', sans-serif !important; margin-bottom: 20px !important; flex-grow: 1 !important; } /* Серая кнопка-бэдж внизу */ ul.custom-social-cards .social-btn { display: inline-block !important; background: linear-gradient(to bottom, #a0a0a0 0%, #7d7d7d 100%) !important; color: #ffffff !important; font-size: 11px !important; font-family: Arial, sans-serif !important; font-weight: bold !important; text-transform: uppercase !important; padding: 4px 12px !important; border-radius: 3px !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; } /* --- Адаптивность для мобильных устройств --- */ @media (max-width: 1100px) { ul.custom-social-cards { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { ul.custom-social-cards { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { ul.custom-social-cards { grid-template-columns: 1fr !important; } } /* ========================================= 19. КНОПКА "ПОДРОБНЕЕ" В НОВОСТЯХ (Оригинал) ========================================= */ .blog .readmore, .blog-items .readmore { margin-top: 15px !important; } .blog .readmore a, .blog-items .readmore a { display: inline-block !important; background-color: #add8e6 !important; /* Точный цвет из DevTools */ color: #393939 !important; /* Точный цвет текста */ font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; /* Точный шрифт */ font-size: 13px !important; /* Точный размер */ padding: 15px 20px !important; /* Точные отступы из DevTools */ text-transform: uppercase !important; border: none !important; /* Дизайн плоский, без рамок */ border-radius: 3px !important; /* Совсем легкое скругление углов */ box-shadow: none !important; /* Без теней */ text-decoration: none !important; transition: background-color 0.2s ease !important; } /* Чуть-чуть затемняем кнопку при наведении мышки */ .blog .readmore a:hover, .blog-items .readmore a:hover { background-color: #9acbd9 !important; color: #393939 !important; } /* Прячем стрелочки/иконки шаблона, если они вылезают */ .blog .readmore a span, .blog .readmore a i { display: none !important; } /* Эффект увеличения для карточек Профориентации (Smart Slider) */ .prof-zoom { transition: transform 0.3s ease !important; /* Делает увеличение плавным */ } .prof-zoom:hover { transform: scale(1.05) !important; /* Увеличивает картинку на 5% */ cursor: pointer !important; /* Делает курсор в виде "руки" при наведении */ } /* Document header banner for Article 41 (static, no animation) */ .doc-header-banner, .doc-btn-toggle { display: block; width: 100%; background-color: #B6D6E6; color: #23374d !important; font-weight: 700; font-size: 13.5px; letter-spacing: 0.3px; text-transform: uppercase; text-align: center; padding: 12px 18px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); border: none; box-sizing: border-box; margin: 25px 0 15px 0; line-height: 1.4; cursor: default; user-select: text; } /* 5 column gallery layout for Article 42 */ .album-5cols .speasyimagegallery-row { display: flex; flex-wrap: wrap; } .album-5cols .speasyimagegallery-row > div { flex: 0 0 20%; max-width: 20%; } @media (max-width: 992px) { .album-5cols .speasyimagegallery-row > div { flex: 0 0 33.333%; max-width: 33.333%; } } @media (max-width: 576px) { .album-5cols .speasyimagegallery-row > div { flex: 0 0 50%; max-width: 50%; } } /* DOC file icon for Phoca Download */ .phocadownloadfilelist a[href*=".doc"]::before, .phocadownloadfilelist a[href*="opisanie-kompetencii"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyNiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgMkMwIDAuODk1NDMxIDAuODk1NDMxIDAgMiAwSDE0TDIyIDhWMjRDMjIgMjUuMTA0NiAyMS4xMDQ2IDI2IDIwIDI2SDJDMC44OTU0MzEgMjYgMCAyNS4xMDQ2IDAgMjRWMloiIGZpbGw9IiMzQjgyRjYiLz48cGF0aCBkPSJNMTQgMEwyMiA4SDE2QzE0Ljg5NTQgOCAxNCA3LjEwNDU3IDE0IDZWMFoiIGZpbGw9IiMyNTYzRUIiLz48dGV4dCB4PSIxMSIgeT0iMjAiIGZpbGw9IndoaXRlIiBmb250LXNpemU9IjcuNSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RE9DPC90ZXh0Pjwvc3ZnPg==") !important; } /* ============================================================= */ /* ============================================================= */ /* Professional Spheres Table (Творческие объединения по сферам) */ /* ============================================================= */ .prof-sphere-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 15px 0 35px 0; padding: 0; } .prof-sphere-table { width: 100% !important; min-width: 820px; border-collapse: separate !important; border-spacing: 0 !important; background-color: #ffffff !important; margin: 0 auto !important; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; border: none !important; } /* Header styling: soft grey border, not black, rounded top */ .prof-sphere-table thead tr th { background-color: #EAEAEA !important; color: #4D4D4D !important; font-weight: 700 !important; font-size: 13.5px !important; line-height: 1.35 !important; text-align: center !important; vertical-align: middle !important; padding: 15px 10px !important; border-top: 1px solid #A8A09F !important; border-bottom: 1px solid #A8A09F !important; border-right: 1px solid #A8A09F !important; border-left: none !important; width: 20% !important; box-sizing: border-box !important; } .prof-sphere-table thead tr th:first-child { border-left: 1px solid #A8A09F !important; border-top-left-radius: 8px !important; } .prof-sphere-table thead tr th:last-child { border-top-right-radius: 8px !important; } /* Data cells */ .prof-sphere-table tbody tr td { width: 20% !important; text-align: center !important; vertical-align: middle !important; padding: 11px 8px !important; font-size: 13.5px !important; line-height: 1.35 !important; color: #555555 !important; border: none !important; box-sizing: border-box !important; } /* Alternating stripes matching old site exactly */ .prof-sphere-table tbody tr:nth-child(odd) td { background-color: #FFFFFF !important; } .prof-sphere-table tbody tr:nth-child(even) td { background-color: #EAEAEA !important; } /* NO hover effect */ .prof-sphere-table tbody tr:hover td { background-color: inherit !important; } .prof-sphere-table tbody tr:nth-child(odd):hover td { background-color: #FFFFFF !important; } .prof-sphere-table tbody tr:nth-child(even):hover td { background-color: #EAEAEA !important; } /* Links inside prof-sphere-table */ .prof-sphere-table tbody tr td a { color: #2b5f8f !important; text-decoration: none !important; transition: color 0.15s ease !important; } .prof-sphere-table tbody tr td a:hover { color: #17426b !important; text-decoration: underline !important; } /* ========================================= ОФОРМЛЕНИЕ ТАБЛИЦЫ ТОЛЬКО ДЛЯ ПРОФОРИЕНТАЦИИ ========================================= */ /* Заголовки (Мероприятия, Профориентационные игры) */ .my-proforient-list h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; margin-top: 35px !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .my-proforient-list h3 a { color: #1b5693 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .my-proforient-list h3 a:hover { color: #2a80b9 !important; } /* Текст "Кол-во материалов" */ .my-proforient-list h3 + p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; color: #333333 !important; font-weight: 700 !important; margin-bottom: 20px !important; max-width: 150px !important; } /* Настройки самой таблицы */ .my-proforient-list table { width: 100% !important; border-collapse: collapse !important; border: none !important; margin-bottom: 40px !important; } /* Сброс стандартных рамок Joomla и добавление внутренних отступов */ .my-proforient-list table th, .my-proforient-list table td { border: none !important; padding: 14px 20px !important; vertical-align: middle !important; } /* Эффект "зебры": чередование серого и прозрачного фона строк */ .my-proforient-list table tr:nth-child(odd) { background-color: #e9ecef !important; border-radius: 6px !important; } .my-proforient-list table tr:nth-child(even) { background-color: transparent !important; } /* Оформление ссылок внутри таблицы (названия учреждений/тестов) */ .my-proforient-list table td a { color: #2a6496 !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: none !important; display: inline-block !important; width: 100% !important; transition: color 0.2s ease !important; } .my-proforient-list table td a:hover { color: #124d80 !important; text-decoration: underline !important; } /* ========================================= ИНФОРМАЦИОННАЯ БЕЗОПАСНОСТЬ - САЙДБАР МЕНЮ (КАК В ПРОФСОЮЗЕ) ========================================= */ #sp-right ul.mod-articlescategory { list-style: none !important; padding: 0 !important; margin: 0 !important; } #sp-right ul.mod-articlescategory li { border-bottom: none !important; padding: 10px 0 !important; margin: 0 !important; } #sp-right ul.mod-articlescategory li:first-child { padding-top: 0 !important; } #sp-right ul.mod-articlescategory li:last-child { padding-bottom: 0 !important; } #sp-right ul.mod-articlescategory li a { color: #333333 !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: none !important; display: flex !important; align-items: flex-start !important; line-height: 1.4 !important; transition: color 0.2s ease !important; } #sp-right ul.mod-articlescategory li a::before { content: "\f138" !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; margin-right: 12px !important; font-size: 15px !important; color: #444444 !important; flex-shrink: 0 !important; margin-top: 2px !important; transition: color 0.2s ease !important; } #sp-right ul.mod-articlescategory li a:hover, #sp-right ul.mod-articlescategory li a:hover::before { color: #1b5693 !important; } /* Баннеры под меню */ #sp-right .sp-module:has(.infobez-banners-wrap) { background: transparent !important; padding: 0 !important; box-shadow: none !important; } .infobez-banners-wrap img { border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; width: 100% !important; height: auto !important; display: block !important; } .infobez-banners-wrap img:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; } /* ========================================= ИНФОРМАЦИОННАЯ БЕЗОПАСНОСТЬ - ТАБЛИЦА МАТЕРИАЛОВ (КАК В ОРИГИНАЛЕ) ========================================= */ /* Скрываем селектор количества ('10'), шапку таблицы, автора и просмотры */ .com-content-category__pagination, .com-content-category thead, .com-content-category__table thead, .com-content-category .list-author, .com-content-category__table .list-author, .com-content-category .list-hits, .com-content-category__table .list-hits { display: none !important; } /* Сама таблица списка статей */ .com-content-category__table { border: none !important; border-collapse: separate !important; border-spacing: 0 6px !important; width: 100% !important; margin-top: 5px !important; margin-bottom: 20px !important; background: transparent !important; } .com-content-category__table tbody tr, .com-content-category__table tbody tr th, .com-content-category__table tbody tr td { border: none !important; box-shadow: none !important; } /* Чередование строк зеброй как в оригинале */ .com-content-category__table tbody tr.cat-list-row0, .com-content-category__table tbody tr:nth-of-type(odd) { background-color: #f2f4f8 !important; } .com-content-category__table tbody tr.cat-list-row1, .com-content-category__table tbody tr:nth-of-type(even) { background-color: transparent !important; } /* Ячейка заголовка статьи */ .com-content-category__table tbody tr th.list-title { padding: 13px 18px !important; font-weight: 400 !important; vertical-align: middle !important; border-radius: 6px !important; background-color: inherit !important; } /* Ссылки на статьи */ .com-content-category__table tbody tr th.list-title a { color: #1b5693 !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: none !important; display: block !important; line-height: 1.4 !important; transition: color 0.15s ease !important; } .com-content-category__table tbody tr th.list-title a:hover { color: #0b3c6d !important; text-decoration: underline !important; } /* ========================================= РОДИТЕЛЯМ (перенос со старого сайта) ========================================= */ .roditelyam-page .article-details img, .roditelyam-page .com-content-category-blog img { max-width: 100% !important; height: auto !important; } /* Миниатюры в тексте (как на старом сайте): свой размер из width/height, плиткой в ряд */ .roditelyam-page .custom-lightbox { display: inline-block; margin: 0 2px 6px 0; vertical-align: top; } .roditelyam-page .custom-lightbox img { display: block; /* width не задаём: размер берётся из атрибутов width/height в HTML, как на старом сайте */ border-radius: 4px; transition: opacity .2s ease; } .roditelyam-page .custom-lightbox:hover img { opacity: .85; } /* Ряд миниатюр в одном абзаце: в одну строку, при нехватке места все сжимаются пропорционально */ .roditelyam-page p:has(> a.custom-lightbox) { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; } .roditelyam-page p:has(> a.custom-lightbox) > a.custom-lightbox { flex: 0 1 auto; min-width: 0; margin: 0; } @media (max-width: 575px) { .roditelyam-page p:has(> a.custom-lightbox) { flex-wrap: wrap; } } /* Сетка колонок (слайдер «Грипп», фото в статьях блога) — на всю ширину колонки */ .roditelyam-page .row > [class*="col-"] > .custom-lightbox { display: block; margin: 0; } .roditelyam-page .row > [class*="col-"] > .custom-lightbox img { width: 100%; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .roditelyam-page .roditelyam-form iframe, .roditelyam-page .roditelyam-pdf iframe { display: block; width: 100% !important; border: 0; border-radius: 8px; background: #fff; } .roditelyam-page .roditelyam-pdf iframe { height: 80vh !important; min-height: 500px; } /* Кнопка «ПОДРОБНЕЕ...» в блоге раздела — как на старом сайте */ .roditelyam-page .com-content-category-blog .readmore { margin-top: 18px; } .roditelyam-page .com-content-category-blog .readmore a { display: inline-flex; /* убирает пробел между текстом и «...» */ padding: 14px 20px; background-color: #b8d8e6; color: #333333 !important; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease, box-shadow .2s ease; } .roditelyam-page .com-content-category-blog .readmore a::after { content: "..."; } .roditelyam-page .com-content-category-blog .readmore a:hover, .roditelyam-page .com-content-category-blog .readmore a:focus-visible { background-color: #9fc9dc; box-shadow: 0 8px 16px rgba(0, 0, 0, .22); } /* ========================================= ИНФОРМАЦИЯ ДЛЯ ДОБРОВОЛЬЦЕВ (перенос со старого сайта) ========================================= */ .dobrovolcy-contacts { margin-bottom: 20px; } .dobrovolcy-contacts dt { font-weight: 700; color: #444; } .dobrovolcy-contacts dd { margin-bottom: 6px; } .dobrovolcy-carousel { margin: 24px 0 10px; padding-bottom: 36px; /* место для точек под картинкой, как на старом сайте */ } .dobrovolcy-carousel .carousel-inner { border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); aspect-ratio: 2 / 1; background: #fff; } .dobrovolcy-carousel .carousel-item, .dobrovolcy-carousel .carousel-item img { height: 100%; } .dobrovolcy-carousel .carousel-item img { object-fit: cover; } .dobrovolcy-carousel .carousel-control-prev, .dobrovolcy-carousel .carousel-control-next { bottom: 36px; width: 10%; } .dobrovolcy-carousel .carousel-indicators { bottom: 0; margin-bottom: 0; } .dobrovolcy-carousel .carousel-indicators [data-bs-target] { width: 9px; height: 9px; margin: 0 8px; border: 2px solid #444; border-radius: 50%; background-color: #444; opacity: 1; box-sizing: content-box; } .dobrovolcy-carousel .carousel-indicators .active { background-color: #fff; } /* ========================================= ДЕТСКИЙ КЛУБ САМОДЕЛКИН + общие блоки перенесённых страниц ========================================= */ /* Кнопки-плашки во всю ширину (были btn-block на старом сайте) */ a.legacy-btn { display: block; margin: 10px 0; padding: 14px 20px; background-color: #b8d8e6; color: #333333 !important; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 700; text-align: center; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease; } a.legacy-btn:hover, a.legacy-btn:focus-visible { background-color: #9fc9dc; } /* Галерея-плитка (бывшая Droppics masonry) */ .legacy-masonry { column-width: 200px; column-gap: 8px; margin: 16px 0; } .legacy-masonry > a.custom-lightbox { display: block; margin: 0 0 8px; break-inside: avoid; } .legacy-masonry > a.custom-lightbox img { display: block; width: 100%; height: auto; border-radius: 4px; transition: opacity .2s ease; } .legacy-masonry > a.custom-lightbox:hover img { opacity: .85; } /* Плакат «Карта размещения кормушек» с живой Яндекс.Картой поверх */ .legacy-map-poster { position: relative; margin: 20px 0; } .legacy-map-poster > a.custom-lightbox img { display: block; width: 100%; height: auto; border-radius: 6px; } .legacy-map-poster__map { position: absolute; } .legacy-map-poster__map iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 4px; } @media (max-width: 767px) { .legacy-map-poster__map { position: static; width: 100% !important; height: 420px !important; margin-top: 12px; } } /* Страницы раздела: картинки не шире колонки, сетки на всю ширину, кнопка «Подробнее...» */ .samodelkin-page .article-details img, .samodelkin-page .com-content-category-blog img { max-width: 100% !important; height: auto !important; } .samodelkin-page .row > [class*="col-"] > .custom-lightbox { display: block; } .samodelkin-page .row > [class*="col-"] > .custom-lightbox img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .samodelkin-page .com-content-category-blog .readmore { margin-top: 18px; } .samodelkin-page .com-content-category-blog .readmore a { display: inline-flex; padding: 14px 20px; background-color: #b8d8e6; color: #333333 !important; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease; } .samodelkin-page .com-content-category-blog .readmore a::after { content: "..."; } .samodelkin-page .com-content-category-blog .readmore a:hover { background-color: #9fc9dc; } /* ========================================= ХЛЕБНЫЕ КРОШКИ: ровно между меню и материалом (полоса крошек 20px от меню и 20px до карточки материала) ========================================= */ #sp-khlebanye-kroshki { padding-top: 20px !important; padding-bottom: 0 !important; } /* Синий блок «Состав профкома» на страницах Профсоюза — с тем же отступом от крошек */ #sp-sostav-profsoyuznogo-komiteta { padding-top: 20px !important; } /* Заголовок раздела над крошками («Безопасность / ИНФОРМАЦИОННАЯ & ДОРОЖНАЯ»), как на старом сайте */ .page-section-title { padding: 14px 0 22px; text-align: center; } .page-section-title__main { margin: 0 0 4px; color: #3d4248; font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; } .page-section-title__sub { margin: 0; color: #9aa0a8; font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 17px; font-weight: 400; letter-spacing: .3px; text-transform: uppercase; } @media (max-width: 575px) { .page-section-title__main { font-size: 24px; } .page-section-title__sub { font-size: 14px; } } /* ===== Инновации → Районная инновационная площадка (innov_rip_build.py) ===== */ /* «КОНЕЧНЫЕ ПРОДУКТЫ РТИП»: картинки-кнопки 3 + 2 в ряд (стили были вставлены в саму старую статью) */ .rtip-products .image-container, .rtip-products .new-image-container { display: flex; align-items: center; gap: 10px; max-width: 90%; margin: 20px auto; } .rtip-products .image-container { justify-content: space-between; } .rtip-products .new-image-container { justify-content: center; } .rtip-products .image-container a { display: inline-block; width: 32%; } .rtip-products .new-image-container a { display: inline-block; width: 50%; } .rtip-products img { width: 100%; height: auto; object-fit: cover; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); } @media (max-width: 575px) { .rtip-products .image-container, .rtip-products .new-image-container { flex-direction: column; max-width: 100%; } .rtip-products .image-container a, .rtip-products .new-image-container a { width: 100%; } } /* «МЕРОПРИЯТИЯ РТИП»: карточки мероприятий (на старом сайте стили статьи действовали на всю страницу) */ .rtip-events { font-family: Arial, sans-serif; line-height: 1.6; } .rtip-events .content-container { border: 2px solid #ccc; border-radius: 10px; padding: 20px 10px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); margin: 0 auto; } .rtip-events .content-container h1 { text-align: left; margin: 20px 0; padding: 0 10px; font-family: inherit; } .rtip-events .content-container p { text-align: left; margin-bottom: 15px; padding: 0 10px; } .rtip-events .content-container .dp2 { padding: 0 10px; } /* ===== Smart Slider 3: эффекты наведения для слоёв (поле «CSS-класс» слоя) ===== */ /* hover-zoom — увеличение на 5%, hover-zoom-sm — на 3%, hover-lift — приподнять на 10px. Первое применение: РИП 2020-2022. Трансформация на содержимом слоя: позицию самого слоя Smart Slider рассчитывает сам. */ .n2-ss-layer.hover-zoom > .n2-ss-item-content, .n2-ss-layer.hover-zoom-sm > .n2-ss-item-content, .n2-ss-layer.hover-lift > .n2-ss-item-content { transition: transform .3s ease; } .n2-ss-layer.hover-zoom:hover > .n2-ss-item-content { transform: scale(1.05); } .n2-ss-layer.hover-zoom-sm:hover > .n2-ss-item-content { transform: scale(1.03); } .n2-ss-layer.hover-lift:hover > .n2-ss-item-content { transform: translateY(-10px); } .n2-ss-layer.hover-zoom img, .n2-ss-layer.hover-zoom-sm img, .n2-ss-layer.hover-lift img { display: block; } /* ===== Smart Slider 3, слайдеры 5 и 6 (РИП 2020-2022: плитки и схема «Алгоритм»): картинка заполняет слой целиком ===== */ /* Как в старом LayerSlider: размер слоя задан, картинка растягивается под него (иначе берёт свои пропорции и наезжает на соседей). */ #n2-ss-5 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content, #n2-ss-6 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content { height: 100%; } #n2-ss-5 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content a, #n2-ss-6 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content a { display: block; width: 100%; height: 100%; } #n2-ss-5 .n2-ss-item-image-content img, #n2-ss-6 .n2-ss-item-image-content img { width: 100% !important; height: 100% !important; object-fit: fill; } /* НОВОСТИ РИП (перенос со старого сайта, novrip_build.py) Карточки как в старой плитке RokSprocket: синий заголовок, серая дата, голубая кнопка «ПОДРОБНЕЕ» */ .novosti-rip .com-content-category-blog .article-header h2 { font-size: 17px; font-weight: 400; line-height: 1.5; } .novosti-rip .com-content-category-blog .article-header h2 a { color: #1e5f8c; } .novosti-rip .com-content-category-blog .article-header h2 a:hover { color: #2a8ad4; } .novosti-rip .com-content-category-blog .article-introtext > p { font-size: 13px; color: #666; } .novosti-rip .com-content-category-blog .readmore { margin-top: 15px; } .novosti-rip .com-content-category-blog .readmore a { display: inline-block; padding: 15px 20px; background-color: #add8e6; color: #393939 !important; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease, box-shadow .2s ease; } .novosti-rip .com-content-category-blog .readmore a:hover, .novosti-rip .com-content-category-blog .readmore a:focus-visible { background-color: #9acbd9; box-shadow: 0 8px 16px rgba(0, 0, 0, .22); } /* РЕСУРСНЫЙ ЦЕНТР (перенос со старого сайта, rc_build.py, rc_ss3.py) «Новости РЦ»: карточки как у «Новостей РИП» (novrip.css); плитка разделов — Smart Slider 7, картинка заполняет слой */ .resursnyj-tsentr .com-content-category-blog .article-header h2 { font-size: 17px; font-weight: 400; line-height: 1.5; } .resursnyj-tsentr .com-content-category-blog .article-header h2 a { color: #1e5f8c; } .resursnyj-tsentr .com-content-category-blog .article-header h2 a:hover { color: #2a8ad4; } .resursnyj-tsentr .com-content-category-blog .article-introtext > p { font-size: 13px; color: #666; } .resursnyj-tsentr .com-content-category-blog .readmore { margin-top: 15px; } .resursnyj-tsentr .com-content-category-blog .readmore a { display: inline-block; padding: 15px 20px; background-color: #add8e6; color: #393939 !important; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease, box-shadow .2s ease; } .resursnyj-tsentr .com-content-category-blog .readmore a:hover, .resursnyj-tsentr .com-content-category-blog .readmore a:focus-visible { background-color: #9acbd9; box-shadow: 0 8px 16px rgba(0, 0, 0, .22); } #n2-ss-7 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content { height: 100%; } #n2-ss-7 .n2-ss-layer[data-pm="absolute"] > .n2-ss-item-image-content a { display: block; width: 100%; height: 100%; } #n2-ss-7 .n2-ss-item-image-content img { width: 100% !important; height: 100% !important; object-fit: fill; } /* ХЛЕБНЫЕ КРОШКИ: разделитель «»» (двойная стрелка Font Awesome) вместо «/», как на старом сайте (breadcrumbs.css) */ .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: "\f101" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: .85em; color: #555 !important; padding: 0 .75rem 0 .35rem !important; float: none !important; } /* ВЫПАДАЮЩЕЕ МЕНЮ НА КОРОТКИХ СТРАНИЦАХ (menu_overflow.css): Helix даёт .body-innerwrapper overflow-x: hidden, а это делает его прокручиваемым блоком высотой с содержимое -> длинный список «Главная» обрезался по низу страницы и крутился внутри. clip так же не даёт странице уехать вбок, но меню выходит за низ страницы, как на старом сайте */ .body-innerwrapper { overflow-x: clip !important; overflow-y: visible !important; } /* ПОДМЕНЮ, СВИСАЮЩЕЕ НИЖЕ РОДИТЕЛЬСКОГО БЛОКА: скруглённый нижний левый угол (класс ставит js/custom.js = tools/menu_round.js; menu_round.css) */ .my-custom-menu .sp-dropdown .sp-dropdown.dd-round-bl { border-radius: 0 10px 10px 10px !important; } /* МЁРТВАЯ ЗОНА ПОД ПУНКТОМ МЕНЮ (menu_bridge.css): анимация fade-up первые ~250 мс держит список на 10–20px ниже пункта, быстрое движение мыши вниз попадало в эту щель и меню закрывалось. Невидимый мостик под наведённым пунктом (ниже списка по z-index) */ .my-custom-menu .sp-megamenu-parent > li.sp-has-child:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; z-index: 1; } /* АДАПТАЦИЯ, ЭТАП 1 — МОБИЛЬНОЕ МЕНЮ (mobile_menu.css; модули 145 «Кнопка мобильного меню», 146 «Контакты в мобильном меню» — mobile_menu.py). < 992px широкая строка меню скрыта (d-none d-lg-block у Helix) -> в синей полосе кнопка «☰ Меню», открывает боковое меню Helix */ .mobile-menu-btn-module { display: none; } /* своя кнопка Helix (выводится при «меню слева») — не нужна, есть «☰ Меню» */ #sp-logo .offcanvas-toggler-custom { display: none !important; } @media (max-width: 991.98px) { #sp-menu .my-custom-menu { height: auto !important; min-height: 0 !important; padding: 0 !important; } /* главная: на компьютере полоса меню — тёмная подложка поверх баннера (home-overlay, margin-bottom:-60px); на телефоне баннер ~80px, полоса закрывала его -> синяя полоса над баннером, как на остальных страницах */ body.home-overlay #sp-menyu { margin-bottom: 0 !important; background: transparent !important; } body.home-overlay #sp-menu .my-custom-menu { background-color: #1e90ff !important; border-radius: 10px !important; } #sp-menu .mobile-menu-btn-module, #sp-menu .mobile-menu-btn-module .sp-module-content, #sp-menu .mobile-menu-btn-module .mod-custom { display: block; width: 100%; margin: 0 !important; padding: 0 !important; } .mobile-menu-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 15px 20px; color: #fff !important; font-family: "latoblack", Verdana, Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; border-radius: 10px; } .mobile-menu-btn::before { content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 22px; letter-spacing: 0; } .mobile-menu-btn:hover, .mobile-menu-btn:focus-visible { color: #fff !important; background-color: rgba(255, 255, 255, .12); } } /* боковое меню: пункты в цветах и шрифте сайта, разделители, подпункты помельче */ .offcanvas-menu .offcanvas-inner ul.menu > li { border-bottom: 1px solid #e3ebf3; } .offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span { display: block; padding: 14px 34px 14px 0 !important; color: #00508a !important; font-family: "latoblack", Verdana, Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; text-transform: uppercase; text-decoration: none !important; opacity: 1 !important; } .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child { padding: 0 0 8px 14px !important; border-left: 2px solid #1e90ff; margin-bottom: 10px !important; } .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child li > a, .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child li > span { display: block; padding: 8px 34px 8px 0 !important; color: #1e5f8c !important; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 1.3 !important; text-transform: none; text-decoration: none !important; } .offcanvas-menu .offcanvas-inner ul.menu li.active > a, .offcanvas-menu .offcanvas-inner ul.menu li.current > a { color: #1e90ff !important; } /* стрелка Helix стоит на right:-10px — за краем пункта (li overflow:hidden): нажатие сдвигало пункт и срезало первую букву */ .offcanvas-menu .offcanvas-inner .menu-toggler { right: 0 !important; color: #00508a !important; } /* контакты внизу бокового меню (модуль 146) */ .offcanvas-contacts { margin-top: 22px; padding-top: 18px; border-top: 2px solid #1e90ff; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; color: #555; } .offcanvas-contacts p { margin: 0 0 16px; } .offcanvas-contacts__btn { display: inline-block; margin: 0 12px 8px 0; padding: 8px 14px; background-color: #005e9e; color: #fff !important; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 4px; } .offcanvas-contacts__link { display: inline-block; color: #000 !important; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; } .offcanvas-contacts__phone { font-size: 14px; } .offcanvas-contacts__phone a { color: #00508a !important; font-size: 20px; font-weight: 700; text-decoration: none !important; } .offcanvas-contacts__vk a { display: inline-flex; align-items: center; gap: 10px; color: #00508a !important; font-weight: 700; text-decoration: none !important; } /* АДАПТАЦИЯ — ГЛАВНАЯ НА ТЕЛЕФОНЕ/ПЛАНШЕТЕ (home_mobile.css; параметры модуля 124 — home_mobile_params.py) */ @media (max-width: 991.98px) { /* «Важное»: на компьютере строка nowrap (знак «!» 17% + карусель 83%); уже — друг под другом */ #sp-vazhnoe-na-glavnoj-stranitse .row { flex-wrap: wrap !important; } #sp-vazhnoe-na-glavnoj-stranitse #sp-user4, #sp-vazhnoe-na-glavnoj-stranitse #sp-user3 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* знак «!»: высокая картинка 1568×2724 -> тонкая синяя полоса со знаком */ #sp-vazhnoe-na-glavnoj-stranitse #sp-user4 { height: 56px !important; background-color: #04528c; } #sp-vazhnoe-na-glavnoj-stranitse #sp-user4 img { display: none !important; } #sp-vazhnoe-na-glavnoj-stranitse #sp-user4 .sp-column { display: flex !important; align-items: center; justify-content: center; } #sp-vazhnoe-na-glavnoj-stranitse #sp-user4 .sp-column::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 30px; line-height: 1; color: #e9e9ea; } } @media (max-width: 991.98px) { /* лента новостей: на телефоне по 1 новости -> 12 точек по 44px не влезали в строку и ложились на заголовок, на планшете теснились рядом с «Подробнее»; теперь отдельной строкой под карточками, компактнее */ .my-news-carousel .owl-dots { position: static !important; display: flex !important; justify-content: center; flex-wrap: wrap; height: auto !important; padding: 8px 0 4px !important; background-color: #f4f4f4; } .my-news-carousel .owl-dots .owl-dot { width: 28px !important; height: 28px !important; min-width: 0 !important; /* модуль ставит инлайн .jtcs118 .owl-dot { min-width: 44px } */ min-height: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } .my-news-carousel .owl-dots .owl-dot span { width: 10px !important; height: 10px !important; margin: 0 !important; } .my-news-carousel h5 a.jt-title { font-size: 17px !important; } } /* сенсорные экраны: наведения нет -> дата и «Подробнее» видны сразу, картинка не схлопывается от касания */ @media (hover: none) and (max-width: 991.98px) { .my-news-carousel .jt-inner { height: auto !important; } .my-news-carousel .jt-cs { background-color: #f4f4f4; } .my-news-carousel .jt-author-date { justify-content: center; /* блок flex — по центру, как заголовок */ } .my-news-carousel .jt-inner:hover .jt-imagecover { height: 130px !important; max-height: 130px !important; opacity: 1 !important; } .my-news-carousel .jt-author-date, .my-news-carousel .jt-inner:hover .jt-author-date { max-height: 30px !important; opacity: 1 !important; margin-top: 0 !important; } .my-news-carousel .jt-readmore, .my-news-carousel .jt-inner:hover .jt-readmore { max-height: 40px !important; opacity: 1 !important; margin-top: 4px !important; } } /* АДАПТАЦИЯ — ШИРИНА 992–1199 (планшет горизонтально, небольшие ноутбуки; tablet_landscape.css). Меню: пунктам нужно ~1073px -> уже ~1075 подписи переносились внутри пунктов; шрифт 12px и отступы 6px — в одну строку. Шапка: контакты (кнопка + глаз + телефон nowrap) шире своей колонки (25%) и наезжали на текст -> колонки 45% / 30%, текст 13px */ @media (min-width: 992px) and (max-width: 1199.98px) { .my-custom-menu ul.sp-megamenu-parent > li > a, .my-custom-menu ul.sp-megamenu-parent > li > span, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > a, .home-overlay .my-custom-menu ul.sp-megamenu-parent > li > span { font-size: 12px !important; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; } #sp-shapka #sp-title { flex: 0 0 45% !important; max-width: 45% !important; } #sp-shapka #sp-top2 { flex: 0 0 30% !important; max-width: 30% !important; } #sp-shapka #sp-title span { font-size: 13px !important; } } /* АДАПТАЦИЯ — СОДЕРЖИМОЕ СТРАНИЦ (content_mobile.css, по итогам проверки всех страниц на 360–1920px) */ /* общие правила для любых (и будущих) статей: длинные слова/ссылки переносятся; блоки, которым в редакторе задали ширину в px (style="width: 800px"), не шире колонки. Smart Slider не трогаем — у его слоёв фиксированные размеры нужны */ #sp-component { overflow-wrap: break-word; } #sp-component div[style*="width"]:not(.n2-section-smartslider *), #sp-component p[style*="width"], #sp-component figure[style*="width"], #sp-component span[style*="width"]:not(.n2-section-smartslider *) { max-width: 100%; } /* видео (Rutube / YouTube / VK) вставлены с фиксированной шириной 720px -> на телефоне резали край; теперь по ширине, 16:9 */ #sp-component iframe { max-width: 100%; } #sp-component iframe[src*="rutube.ru"], #sp-component iframe[src*="youtube.com"], #sp-component iframe[src*="youtu.be"], #sp-component iframe[src*="vk.com/video_ext"], #sp-component iframe[src*="vkvideo.ru"] { height: auto; aspect-ratio: 16 / 9; } /* списки «подпись — значение» («Сведения», «Контакты»): колонка подписей 170px сжимала значения -> на телефоне подпись над значением */ @media (max-width: 575.98px) { #sp-component .dl-horizontal { grid-template-columns: 1fr !important; } #sp-component .dl-horizontal dt { text-align: left !important; margin-top: 10px !important; } } /* АДАПТАЦИЯ — МОНИТОРЫ ШИРЕ 1920 (wide_screens.css). Главный слайдер (Smart Slider 2, «на всю ширину») выше 400px не растёт — на широком экране картинки 1920×400 обрезались сверху и снизу (у баннера «Запись в объединения» резало текст). Шире 1920 баннер показывается в родном размере по центру: обёртка, которую Smart Slider растягивает на всю ширину (инлайн width + сдвиг влево на (ширина экрана − 1290)/2), ограничена 1920px и сдвинута на (1920 − 1290)/2 = 315px; 1290 — ширина колонки модуля (контейнер Helix) */ @media (min-width: 1921px) { #sp-banner .n2-ss-no-bga-fixed, #sp-banner-na-glavnoj .n2-ss-no-bga-fixed { width: 1920px !important; transform: translate3d(-315px, 0, 0) !important; } } /* АДАПТАЦИЯ — ШАПКА НА ТЕЛЕФОНЕ/ПЛАНШЕТЕ (header_mobile.css). Макет Helix скрывает < 992 колонки VK, названия и контактов (d-none … d-lg-block) — оставался один логотип и пустое место. Теперь: логотип + название и горячая линия справа. VK и контакты — в мобильном меню (модуль 146) */ @media (max-width: 991.98px) { #sp-shapka { padding: 6px 0 10px; } #sp-shapka .row { flex-wrap: nowrap; align-items: center; } #sp-shapka #sp-logo { flex: 0 0 auto; width: auto; max-width: none; padding-right: 0; } #sp-shapka #sp-logo p { margin: 0 !important; } #sp-shapka #sp-logo .mod-custom img { /* только картинка модуля «Логотип в шапке»; логотип самого Helix (logo.svg) нулевой и пусть таким остаётся */ width: 72px !important; height: auto !important; } #sp-shapka #sp-title { display: block !important; flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding-left: 12px; } #sp-shapka #sp-title .custom > div { margin: 0 !important; text-align: left !important; line-height: 1.25; } #sp-shapka #sp-title span { font-size: 12px !important; } } @media (min-width: 576px) and (max-width: 991.98px) { #sp-shapka #sp-logo .mod-custom img { width: 95px !important; } #sp-shapka #sp-title .custom > div { text-align: center !important; line-height: 1.4; } #sp-shapka #sp-title span { font-size: 15px !important; } } /* АДАПТАЦИЯ — ТАБЛИЦЫ И ПЛИТКИ (site_custom.css; разметку .table-scroll и .ss-tiles-mobile строит js/custom.js = tools/site_custom.js) */ .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } .ss-tiles-mobile { display: none; } @media (max-width: 575.98px) { #sp-component .n2-section-smartslider.ss-has-tiles { display: none !important; } /* по 2 в ряд (плитки разной высоты — по центру ряда, без растягивания), широкие — на всю ширину, оставшаяся одна — по центру */ .ss-tiles-mobile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 10px 0 20px; } .ss-tile { display: block; flex: 0 0 calc(50% - 5px); overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .ss-tile--wide { flex-basis: 100%; } .ss-tile img { display: block; width: 100%; height: auto; } } /* КАРУСЕЛЬ «ВАЖНОЕ» НА ГЛАВНОЙ: стрелки видны всегда (home_arrows.css). Стиль модуля JT прячет их до наведения (opacity: 0), на телефоне/планшете наведения нет вовсе. Стрелка в крайнем положении (листать некуда) — бледная */ .my-important-block .owl-nav button.owl-prev, .my-important-block .owl-nav button.owl-next { opacity: 1 !important; } .my-important-block .owl-nav button.owl-prev.disabled, .my-important-block .owl-nav button.owl-next.disabled { /* сильнее инлайн-правила модуля .jtcs124:focus-within … opacity: 1 */ opacity: .35 !important; cursor: default !important; } /* ЛЕНТА НОВОСТЕЙ НА ГЛАВНОЙ (news_bg.css), как на старом сайте: карточки чередуются светлая / серая (#f2f2f2 / #dedede) и заканчиваются своей границей под текстом; ниже — белая полоса: слева точки, справа кнопка «Все новости» (одна строка). Пробовали без белой полосы: единый #dedede, чередование #f4f4f4/#dedede и #e2e2e2/#d6d6d6, белые карточки — сливалось */ .my-news-carousel .jt-cs { background-color: #fff !important; box-shadow: none; } .my-news-carousel .owl-item:nth-child(odd) .jt-inner { background-color: #f2f2f2 !important; } .my-news-carousel .owl-item:nth-child(even) .jt-inner { background-color: #dedede !important; } .my-news-carousel .jt-inner { border-right: 0; } .my-news-carousel .owl-dots { position: static !important; display: flex !important; justify-content: center !important; /* точки по центру (пользователь), кнопка справа в той же строке */ flex-wrap: wrap; align-items: center; min-height: 56px; margin: 0 !important; padding: 0 200px !important; /* поровну с обеих сторон — центр не сдвигается, справа место под кнопку */ background-color: #fff !important; bottom: auto !important; } .my-news-carousel .owl-dots .owl-dot { width: 26px !important; height: 26px !important; min-width: 0 !important; min-height: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } .my-news-carousel .owl-dots .owl-dot span { width: 10px !important; height: 10px !important; margin: 0 !important; } .my-news-carousel .jtcs_more_cat { margin-top: -48px !important; /* в строку с точками, справа */ margin-bottom: 8px !important; z-index: 10001; /* над полосой точек (у неё z-index 9999 из старых стилей) */ } .my-news-carousel .jt-author-date { justify-content: center !important; /* дата под заголовком по центру */ } @media (max-width: 767.98px) { /* на телефоне точек нет — кнопка своей строкой */ .my-news-carousel .jtcs_more_cat { margin-top: 12px !important; } } /* ЛЕНТА НОВОСТЕЙ НА ГЛАВНОЙ — СТРЕЛКИ И «ВСЕ НОВОСТИ» (news_carousel.css; настройки модуля 118 — news_setup.py). Стрелки видны всегда (стиль JT прячет их до наведения), по центру картинок; крайняя — бледная. Под лентой кнопка «Все новости →» (ссылка модуля на категорию: «Все» + «Новости», нажимается вся кнопка). На телефоне (1 новость на экран) точек нет — свайп и стрелки */ .my-news-carousel .owl-nav { top: 65px !important; } .my-news-carousel .owl-nav button.owl-prev, .my-news-carousel .owl-nav button.owl-next { display: flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; transform: translateY(-50%) !important; /* стиль JT: снаружи ленты (left/right: -40px) — внутрь, у краёв */ border-radius: 50% !important; background-color: rgba(0, 80, 138, .7) !important; color: #fff !important; font-size: 20px !important; opacity: 1 !important; } .my-news-carousel .owl-nav button.owl-prev { left: 10px !important; right: auto !important; } .my-news-carousel .owl-nav button.owl-next { right: 10px !important; left: auto !important; } .my-news-carousel .owl-nav button.owl-prev:hover, .my-news-carousel .owl-nav button.owl-next:hover { background-color: #00508a !important; } .my-news-carousel .owl-nav button.owl-prev.disabled, .my-news-carousel .owl-nav button.owl-next.disabled { opacity: .35 !important; cursor: default !important; } .my-news-carousel .jtcs_more_cat { position: relative; display: table; margin: 16px 20px 8px auto; /* справа, по просьбе пользователя */ padding: 10px 16px 10px 24px; /* справа меньше: после ссылки модуль ставит два   */ background-color: #add8e6; color: #393939; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease; } .my-news-carousel .jtcs_more_cat:hover { background-color: #9acbd9; } .my-news-carousel .jtcs_more_cat a { color: inherit !important; text-decoration: none !important; } .my-news-carousel .jtcs_more_cat a::before { /* вся кнопка — ссылка */ content: ""; position: absolute; inset: 0; } .my-news-carousel .jtcs_more_cat a::after { content: " \2192"; } @media (max-width: 767.98px) { .my-news-carousel .owl-dots { display: none !important; } } /* СТРАНИЦА «НОВОСТИ» (меню 121, класс страницы novosti; news_page.css). Карточки как у «Новостей РЦ»: заголовок, дата создания (её выводит своя версия info_block — templates/shaper_helixultimate/overrides), «Подробнее». Вводный текст (повтор заголовка, так было на старом сайте) на карточке скрыт. В самой новости дата не показывается — как на старом сайте */ .novosti .com-content-category-blog .article-header h2 { font-size: 17px; font-weight: 400; line-height: 1.5; } .novosti .com-content-category-blog .article-header h2 a { color: #1e5f8c; } .novosti .com-content-category-blog .article-header h2 a:hover { color: #2a8ad4; } .novosti .com-content-category-blog .article-info { margin: 0 0 4px; font-size: 13px; color: #666; } .novosti .com-content-category-blog .article-introtext > :not(.readmore) { display: none; } .novosti .com-content-category-blog .readmore { margin-top: 15px; } .novosti .com-content-category-blog .readmore a { display: inline-block; padding: 15px 20px; background-color: #add8e6; color: #393939 !important; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .18); transition: background-color .2s ease, box-shadow .2s ease; } .novosti .com-content-category-blog .readmore a:hover, .novosti .com-content-category-blog .readmore a:focus-visible { background-color: #9acbd9; box-shadow: 0 8px 16px rgba(0, 0, 0, .22); } .novosti .article-details .article-info { display: none; } /* ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ (a11y.css; панель и переключатель — js/custom.js = tools/site_custom.js, раздел 4). ГОСТ Р 52872-2019 и требования к сайтам образовательных организаций: шрифт до 200%, 5 цветовых схем, изображения вкл/ч-б/выкл, интервалы между буквами и строками, шрифт без засечек/с засечками. Правила общие — новые страницы, пункты меню и материалы подстраиваются сами. «:not(#a11y-…)» поднимает специфичность выше любых правил custom.css (там много id и !important). */ .a11y-alt, .a11y-panel { display: none; } html.a11y-fs-1 { --a11y-fs: 20px; } html.a11y-fs-2 { --a11y-fs: 26px; } html.a11y-fs-3 { --a11y-fs: 32px; } html.a11y-c-1 { --a11y-fg: #000; --a11y-bg: #fff; } html.a11y-c-2 { --a11y-fg: #fff; --a11y-bg: #000; } html.a11y-c-3 { --a11y-fg: #063462; --a11y-bg: #9dd1ff; } html.a11y-c-4 { --a11y-fg: #4d4b43; --a11y-bg: #f7f3d6; } html.a11y-c-5 { --a11y-fg: #a9e44d; --a11y-bg: #3b2716; } /* размер шрифта (иконочные шрифты не трогаем по семейству, но размер — да, чтобы иконки росли вместе с текстом) */ html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body, html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { font-size: var(--a11y-fs) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body :is(h1, h2) { font-size: calc(var(--a11y-fs) * 1.35) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body :is(h3, h4, h5, h6) { font-size: calc(var(--a11y-fs) * 1.15) !important; } /* цветовая схема: один цвет текста и фона на всём сайте, без фоновых картинок и теней */ html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z), html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body, html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { color: var(--a11y-fg) !important; background-color: var(--a11y-bg) !important; background-image: none !important; border-color: var(--a11y-fg) !important; box-shadow: none !important; text-shadow: none !important; } /* Smart Slider: служебные слои (цвет фона слайда и т. п.) лежат поверх картинки — заливка схемы закрасила бы баннеры и плитки */ html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .n2-section-smartslider * { background-color: transparent !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body a { text-decoration: underline !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) body :focus-visible { outline: 3px solid var(--a11y-fg) !important; outline-offset: 2px; } html.a11y body *, html.a11y body *::before, html.a11y body *::after { transition: none !important; animation: none !important; } /* шрифт, интервалы (иконочные шрифты Font Awesome / Joomla не трогаем) */ html.a11y-ff-sans:not(#a11y-x):not(#a11y-y):not(#a11y-z) body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="icon-"]) { font-family: Arial, Verdana, Helvetica, sans-serif !important; } html.a11y-ff-serif:not(#a11y-x):not(#a11y-y):not(#a11y-z) body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="icon-"]) { font-family: "Times New Roman", Times, Georgia, serif !important; } html.a11y-ls-1:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { letter-spacing: .1em !important; word-spacing: .2em !important; } html.a11y-ls-2:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { letter-spacing: .2em !important; word-spacing: .4em !important; } html.a11y-lh-0:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { line-height: 1.3 !important; } html.a11y-lh-1:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { line-height: 1.5 !important; } html.a11y-lh-2:not(#a11y-x):not(#a11y-y):not(#a11y-z) body * { line-height: 2 !important; } /* изображения */ html.a11y-img-gray:not(#a11y-x):not(#a11y-y):not(#a11y-z) body :is(img, video, iframe, svg) { filter: grayscale(1) !important; } html.a11y-img-off:not(#a11y-x):not(#a11y-y):not(#a11y-z) body img { display: none !important; } html.a11y-img-off:not(#a11y-x):not(#a11y-y):not(#a11y-z) body .a11y-alt { display: inline-block !important; margin: 4px 0; padding: 2px 8px; border: 1px dashed var(--a11y-fg) !important; } html.a11y-img-off:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-banner .n2-section-smartslider { display: none !important; /* баннеры главной — только картинки */ } /* раскладка при крупном шрифте: меню — кнопкой «☰ Меню» на всех экранах, шапка и блоки переносятся, всё видно без наведения */ html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .my-custom-menu ul.sp-megamenu-parent, html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .sp-megamenu-wrapper { display: none !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-menu .mobile-menu-btn-module, html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-menu .mobile-menu-btn-module :is(.sp-module-content, .mod-custom) { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; gap: 12px; padding: 15px 20px; text-transform: uppercase; border: 2px solid var(--a11y-fg) !important; border-radius: 10px; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .mobile-menu-btn::before { content: "\f0c9"; font-family: "Font Awesome 6 Free" !important; font-weight: 900; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) :is(#sp-menyu, #sp-menu .my-custom-menu) { height: auto !important; margin-bottom: 0 !important; padding: 0 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-shapka .row { flex-wrap: wrap !important; align-items: center; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-shapka .row > [id^="sp-"] { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-shapka :is(#sp-title .custom > div, #sp-top2 .custom > div) { flex-wrap: wrap !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) #sp-shapka #sp-top2 a { white-space: normal !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .my-news-carousel .jt-inner { height: auto !important; min-height: 260px; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .my-news-carousel :is(.jt-author-date, .jt-readmore) { max-height: none !important; opacity: 1 !important; margin-top: 6px !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .my-news-carousel .jt-inner:hover .jt-imagecover { height: 130px !important; max-height: 130px !important; opacity: 1 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .my-news-carousel .jtcs_more_cat { margin-top: 12px !important; border: 2px solid var(--a11y-fg) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) :is(.readmore a, .offcanvas-contacts__btn, .btn, button) { border: 2px solid var(--a11y-fg) !important; } /* боковое меню при крупном шрифте: шире (у Helix 300px), длинные слова переносятся, затемнение страницы — полупрозрачное */ html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) body .offcanvas-menu { width: min(440px, 100vw) !important; left: calc(-1 * min(440px, 100vw)) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) body.offcanvas-active .offcanvas-menu { left: 0 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z) .offcanvas-menu .offcanvas-inner :is(a, span) { overflow-wrap: anywhere; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) body .burger-icon > span { background-color: var(--a11y-fg) !important; /* крестик закрытия меню нарисован полосками-фоном */ } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) body .offcanvas-overlay { background-color: rgba(0, 0, 0, .7) !important; } /* панель настроек: свой размер шрифта, кнопки «Ц» — в своих цветах */ html.a11y .a11y-panel { display: block; /* без z-index: боковое меню Helix (z-index 10000) должно открываться поверх панели */ padding: 10px 16px; border-bottom: 3px solid var(--a11y-fg) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel, html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel * { font-family: Arial, Verdana, Helvetica, sans-serif !important; font-size: 17px !important; line-height: 1.3 !important; letter-spacing: normal !important; word-spacing: normal !important; } .a11y-panel__head, .a11y-panel__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; max-width: 1300px; margin: 0 auto; } .a11y-panel__head { justify-content: space-between; } .a11y-panel__groups { margin-top: 8px; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel__title { font-weight: 700; font-size: 19px !important; } .a11y-panel__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .a11y-panel button { min-width: 44px; min-height: 44px; padding: 4px 12px; border: 2px solid var(--a11y-fg) !important; border-radius: 6px; cursor: pointer; } .a11y-panel button[aria-pressed="true"] { outline: 3px solid var(--a11y-fg) !important; outline-offset: 2px; font-weight: 700; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel :is(.a11y-panel__off, button[aria-pressed="true"]:not([data-k="c"])) { color: var(--a11y-bg) !important; background-color: var(--a11y-fg) !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--fs-1 { font-size: 18px !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--fs-2 { font-size: 23px !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--fs-3 { font-size: 28px !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--c-1 { color: #000 !important; background-color: #fff !important; border-color: #000 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--c-2 { color: #fff !important; background-color: #000 !important; border-color: #fff !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--c-3 { color: #063462 !important; background-color: #9dd1ff !important; border-color: #063462 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--c-4 { color: #4d4b43 !important; background-color: #f7f3d6 !important; border-color: #4d4b43 !important; } html.a11y:not(#a11y-x):not(#a11y-y):not(#a11y-z):not(#a11y-w) .a11y-panel .a11y-btn--c-5 { color: #a9e44d !important; background-color: #3b2716 !important; border-color: #a9e44d !important; } .a11y-panel__more { display: none; } @media (max-width: 767.98px) { /* телефон: настройки свёрнуты под кнопку «Настройки» */ .a11y-panel__more { display: inline-block; } .a11y-panel__groups { display: none; } .a11y-panel--open .a11y-panel__groups { display: flex; } } /* переключатель в шапке (глаз) */ .a11y-toggle { display: inline-block; cursor: pointer; } /* ===== sved.css — раздел «Сведения об образовательной организации» (правая колонка, FAQ на «Обращениях») ===== */ /* Вложенный пункт навигации («Обращения» под «Основные сведения») — с отступом, как на старом сайте */ #sp-right ul.menu ul { list-style: none !important; margin: 10px 0 0 26px !important; padding: 0 !important; } #sp-right ul.menu ul li { padding: 6px 0 !important; } #sp-right ul.menu ul li a { font-size: 14px !important; } /* Текущая страница в навигации — светлая плашка (на старом сайте так выделялся открытый пункт) */ #sp-right ul.menu li.current > a { background: rgba(255, 255, 255, .55); border-radius: 10px; padding: 6px 10px; margin: -6px -10px; color: #1b5693 !important; } /* Заголовок модуля синей «таблеткой»: «Полезные ссылки», «Антикоррупционная деятельность» */ #sp-right .sp-module.sved-pill .sp-module-title { display: block; margin: -8px -8px 18px !important; padding: 10px 14px !important; border-radius: 16px; background: linear-gradient(180deg, #7aa5f0 0%, #5b8be6 100%); box-shadow: 0 3px 8px rgba(40, 80, 160, .35); color: #fff !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center; } #sp-right .sp-module.sved-pill ul:not(.menu) { margin: 0; padding-left: 18px; } #sp-right .sp-module.sved-pill ul:not(.menu) li { padding: 3px 0; font-size: 14px; } #sp-right .sp-module.sved-pill ul:not(.menu) a { color: #333; text-decoration: none; } #sp-right .sp-module.sved-pill ul:not(.menu) a:hover { color: #1b5693; text-decoration: underline; } /* Блок «Сведения об образовательной организации… в соответствии с Постановлением…» */ #sp-right .sp-module.sved-info { font-size: 13px; line-height: 1.55; color: #333; } #sp-right .sp-module.sved-info p:last-child { margin-bottom: 0; } /* FAQ под «Обращениями»: синяя плашка-обращение к родителям + аккордеон вопросов */ .sp-module.sved-faq-head { margin: 30px 0 10px; padding: 22px 26px; border-radius: 20px; background: #6495ed; color: #fff; } .sp-module.sved-faq-head h4 { color: #fff !important; font-size: 19px; line-height: 1.45; margin: 0 0 8px; } .sp-module.sved-faq-head h4:last-child { margin-bottom: 0; } .sp-module.sved-faq { margin-top: 26px; } .sp-module.sved-faq .sp-module-title { font-size: 26px; margin-bottom: 16px; } .faq-accordion .accordion-item { border: 0; border-bottom: 1px solid #dfe3ea; background: transparent; } .faq-accordion .accordion-header { margin: 0; } .faq-accordion .accordion-button { padding: 16px 4px; background: transparent; box-shadow: none; color: #333; font-size: 17px; font-weight: 700; line-height: 1.4; } .faq-accordion .accordion-button:not(.collapsed) { color: #1b5693; } .faq-accordion .accordion-button:focus-visible { outline: 2px solid #1b5693; outline-offset: 2px; } .faq-accordion .accordion-body { padding: 0 4px 16px; font-size: 15px; color: #444; } .faq-accordion .accordion-body p:last-child { margin-bottom: 0; } @media (max-width: 575px) { #sp-right .sp-module.sved-pill .sp-module-title { font-size: 19px !important; } .sp-module.sved-faq-head { padding: 16px 18px; } .sp-module.sved-faq-head h4 { font-size: 16px; } .faq-accordion .accordion-button { font-size: 15px; } } /* ===== sved_fix.css — общие правки, найденные на «Сведениях об ОО» ===== */ /* Боковое меню: длинные пункты в 2–3 строки шли с огромным межстрочным (line-height шаблона ~36px); значок — по первой строке, а не по центру абзаца */ #sp-right ul.menu li a { line-height: 1.45 !important; align-items: flex-start !important; } #sp-right ul.menu li a::before { margin-top: 2px !important; } /* .dl-horizontal: несколько dd подряд под одним dt (напр. «телефоны для экстренной связи» → ФИО, телефоны) всегда в колонке значений, а не уезжают в левую колонку подписей */ @media (min-width: 576px) { #sp-component .dl-horizontal dd { grid-column: 2; } } /* ===== sved_look.css — «Сведения об ОО» один в один со старым сайтом (шрифты, цвета, линии, правая колонка) ===== */ /* --- Весь сайт (кроме главной): лист материала как на старом сайте — контейнер 1200, лист на 25px уже колонки с каждой стороны (750 рядом с правой колонкой / 1150 без неё), текст в 20px от края (710), высота листа — по тексту --- */ @media (min-width: 992px) { body:not(.view-featured) #sp-component { flex: 1 1 0 !important; width: auto !important; min-width: 0; margin-left: 25px !important; margin-right: 25px !important; padding: 20px !important; align-self: flex-start; } } /* --- Весь сайт: таблицы из старых материалов --- */ /* : рамки у ячеек (Bootstrap 5 обнуляет их у всех td/th) */ #sp-component table[border]:not([border="0"]) > * > tr > :is(td, th) { border: 1px inset; } /* .table: цвет текста как у материала, а не почти чёрный цвет Bootstrap 5 (и при наведении на строку) */ #sp-component .table { --bs-table-color: inherit; --bs-table-bg: transparent; --bs-table-hover-color: inherit; --bs-table-striped-color: inherit; --bs-table-active-color: inherit; color: inherit; } /* --- Подменю в боковых колонках всегда раскрыто: main.js Helix сворачивает .menu-child при ЛЮБОМ клике по странице («закрыть меню при клике снаружи»), поэтому «Обращения» исчезали и меню прыгало вверх при переходе --- */ :is(#sp-left, #sp-right) ul.menu ul.menu-child { display: block !important; height: auto !important; overflow: visible !important; } :is(#sp-left, #sp-right) ul.menu .menu-toggler { display: none !important; } /* --- Текст материалов как на старом сайте: класс страницы old-look (пункт меню → «Класс CSS страницы», напр. «svedeniya old-look»); только тело статьи — модули под ней не трогаем --- */ body.old-look #sp-component [itemprop="articleBody"] { font-size: 15px; line-height: 24px; color: #686868; } body.old-look #sp-component [itemprop="articleBody"] p { font-size: 15px; margin: 0 0 15px; } body.old-look #sp-component [itemprop="articleBody"] :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; color: #686868; margin: 10px 0; } body.old-look #sp-component [itemprop="articleBody"] h1 { font-size: 30px; line-height: 36px; } body.old-look #sp-component [itemprop="articleBody"] h2 { font-size: 24px; line-height: 31.2px; } body.old-look #sp-component [itemprop="articleBody"] h3 { font-size: 22.5px; line-height: 28.8px; } body.old-look #sp-component [itemprop="articleBody"] h4 { font-size: 21px; line-height: 28.8px; } body.old-look #sp-component [itemprop="articleBody"] h5 { font-size: 19.5px; line-height: 26.4px; } body.old-look #sp-component [itemprop="articleBody"] h6 { font-size: 18px; line-height: 26.4px; } body.old-look #sp-component [itemprop="articleBody"] :is(strong, b) { font-weight: 700; } body.old-look #sp-component [itemprop="articleBody"] :is(ul, ol):not([class]) { margin: 0 0 15px 25px; padding: 0; } body.old-look #sp-component [itemprop="articleBody"] li { font-size: 15px; } body.old-look #sp-component [itemprop="articleBody"] hr { margin: 20px 0; border: 0; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; opacity: 1; } body.old-look #sp-component [itemprop="articleBody"] p.lead { font-size: 21px; font-weight: 200; line-height: 30px; margin-bottom: 20px; } body.old-look #sp-component [itemprop="articleBody"] p.success { padding: 15px; border-radius: 4px; background: #d6ceed linear-gradient(#d6ceed, #fff); box-shadow: 4px 4px 14px rgba(0, 0, 0, .25); color: #350466; font-weight: 700; } body.old-look #sp-component [itemprop="articleBody"] .dl-horizontal :is(dt, dd) { line-height: 20px; } /* .dl-horizontal как Bootstrap 2: подпись слева 160px, значения с отступом 180px идут подряд (несколько dd — без зазора) */ @media (min-width: 768px) { body.old-look #sp-component [itemprop="articleBody"] .dl-horizontal { display: flow-root !important; margin: 15px 0 20px !important; } body.old-look #sp-component [itemprop="articleBody"] .dl-horizontal dt { float: left; clear: left; width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.old-look #sp-component [itemprop="articleBody"] .dl-horizontal dd { margin: 0 0 0 180px !important; } } body.old-look #sp-component [itemprop="articleBody"] blockquote { margin: 0 0 20px; padding: 0 0 0 15px; border-left: 5px solid #d5d5d5; } body.old-look #sp-component [itemprop="articleBody"] blockquote p { margin: 0; font-size: 16px; font-weight: 300; line-height: 25px; } body.old-look #sp-component [itemprop="articleBody"] a.btn { padding: 4px 14px; border: 1px solid rgba(0, 0, 0, .15) !important; border-bottom-color: rgba(0, 0, 0, .25) !important; border-radius: 4px; background: #f5f5f5 linear-gradient(#fff, #e6e6e6); color: #333; font-size: 14px; line-height: 20px; text-shadow: 0 1px 1px rgba(255, 255, 255, .75); } body.old-look #sp-component [itemprop="articleBody"] a.btn:hover { background: #e6e6e6; color: #333; } /* список документов Dropfiles 2 — шаг строк ~30px и заголовок 20px, как в старом Dropfiles */ body.old-look #sp-component [itemprop="articleBody"] .df2-item { padding-top: 3px; padding-bottom: 3px; } body.old-look #sp-component [itemprop="articleBody"] .df2-cat-title { font-size: 20px; line-height: 26px; } /* таблицы .table — как Bootstrap 2 на старом сайте: линия над строкой, без нижней, 15px / 20px */ body.old-look #sp-component [itemprop="articleBody"] .table { margin-bottom: 20px; font-size: 15px; --bs-table-hover-bg: #f5f5f5; } body.old-look #sp-component [itemprop="articleBody"] .table > :not(caption) > * > * { padding: 8px; line-height: 20px; vertical-align: top; border-width: 1px 0 0; border-style: solid; border-color: #d5d5d5; box-shadow: none; } body.old-look #sp-component [itemprop="articleBody"] .table-bordered { border: 1px solid #ddd; border-left: 0; border-collapse: separate; border-radius: 4px; } body.old-look #sp-component [itemprop="articleBody"] .table-bordered > :not(caption) > * > * { border-color: #ddd; border-left-width: 1px; } body.old-look #sp-component [itemprop="articleBody"] .table-bordered > :first-child > tr:first-child > * { border-top: 0; } body.old-look #sp-component [itemprop="articleBody"] .table-bordered > :first-child > tr:first-child > :first-child { border-top-left-radius: 4px; } /* --- Правая колонка раздела: модули 147 (sved-nav), 148/149 (sved-pill), 150 (sved-info) — как .rt-block box3 старого сайта --- */ #sp-right .sp-module:is(.sved-nav, .sved-pill, .sved-info) { margin: 0 -5px 25px !important; padding: 15px !important; border: 1px solid transparent !important; border-radius: 28px !important; color: #383838; font-size: 15px; line-height: 24px; } #sp-right .sp-module:is(.sved-nav, .sved-pill, .sved-info):first-child { margin-top: 20px !important; } #sp-right .sp-module.sved-nav { padding-bottom: 40px !important; } /* меню: пункты во всю ширину блока, значок в строке текста (перенос — под значок), без лишних интервалов */ #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu { margin: 0 -15px !important; padding: 0 !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li { margin: 0 0 5px !important; padding: 0 !important; border: 0 !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li a { display: block !important; margin: 0 !important; padding: 5px 15px !important; border-radius: 3px; background: none !important; color: #383838 !important; font-size: 15px !important; line-height: 24px !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li a::before { margin: 0 10px 0 0 !important; font-size: 15px !important; color: #383838 !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li a:hover, #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li a:hover::before { color: #165feb !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu ul { margin: 0 0 0 25px !important; padding: 8px 0 0 !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu ul li { margin: 0 !important; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu ul li a, #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu ul li a::before { font-size: 14px !important; } /* открытая страница — тонкая рамка во всю ширину блока, текст того же цвета */ #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li.current { padding: 10px !important; border: 1px solid #d5d5d5 !important; } /* заголовок-«таблетка» («Полезные ссылки», «Антикоррупционная деятельность») */ #sp-right .sp-module.sved-pill .sp-module-title { margin: 10px 0 25px !important; padding: 10px 15px !important; border: 0 !important; border-radius: 16px; background: #6495ed !important; box-shadow: 4px 4px 14px rgba(0, 0, 0, .25); color: #fff !important; font-family: lato, Verdana, Helvetica, Arial, sans-serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 31.2px !important; text-align: center; } /* «Полезные ссылки»: обычный список с точками, строки вплотную, без линий */ #sp-right .sp-module.sved-pill ul:not(.menu, .menu-child) { margin: 0 0 15px 20px !important; padding: 0 !important; list-style: disc !important; } #sp-right .sp-module.sved-pill ul:not(.menu, .menu-child) li { display: list-item !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 15px !important; line-height: 24px !important; color: #383838; } #sp-right .sp-module.sved-pill ul:not(.menu, .menu-child) li a { display: inline !important; padding: 0 !important; line-height: inherit !important; font-size: inherit !important; color: #001b2e !important; text-decoration: none !important; } #sp-right .sp-module.sved-pill ul:not(.menu, .menu-child) li a:hover { color: #165feb !important; text-decoration: none !important; } /* блок «Сведения… в соответствии с Постановлением…» */ #sp-right .sp-module.sved-info { font-size: 15px !important; line-height: 24px !important; color: #383838 !important; } #sp-right .sp-module.sved-info p, #sp-right .sp-module.sved-info p:last-child { margin: 0 0 15px !important; color: #383838; } @media (max-width: 575px) { #sp-right .sp-module.sved-pill .sp-module-title { font-size: 20px !important; line-height: 26px !important; } } /* ===== otdel_card.css — карточка руководителя отдела справа («Контактная информация», старый .rt-block box1 title3); модуль с классом otdel-card ===== */ #sp-right .sp-module.otdel-card { margin: 20px -5px 25px !important; padding: 15px 15px 55px !important; border: 1px solid transparent !important; border-radius: 28px !important; background: #6495ed !important; color: #fff; font-size: 15px; line-height: 24px; } #sp-right .otdel-card .otdel-card-title { margin: 10px 0 25px; padding: 10px 15px; border-radius: 10px; background: #e1e1e1; box-shadow: 4px 4px 14px rgba(0, 0, 0, .25); color: #383838; font-family: lato, Verdana, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 31.2px; text-align: center; } #sp-right .otdel-card p { margin: 0 0 15px; color: #fff; } #sp-right .otdel-card img.avatar { display: inline; width: 100%; height: auto; border-radius: 28px; box-shadow: 4px 4px 14px rgba(0, 0, 0, .25); } #sp-right .otdel-card h4 { margin: 10px 0; color: #fff; font-size: 21px; font-weight: 400; line-height: 28.8px; } #sp-right .otdel-card a { color: #001b2e; } #sp-right .otdel-card a:hover { color: #165feb; } #sp-right .otdel-card ul { margin: 0 0 15px 20px; padding: 0; list-style: disc; } #sp-right .otdel-card ul li { display: list-item; margin: 0; padding: 0; border: 0; color: #fff; line-height: 24px; } #sp-right .otdel-card > :last-child, #sp-right .otdel-card .mod-custom > :last-child { margin-bottom: 15px; } @media (max-width: 575px) { #sp-right .otdel-card .otdel-card-title { font-size: 20px; line-height: 26px; } } /* ===== layout_table.css — таблица-раскладка из старых материалов («текст | картинка»): класс layout-table, < 768px ячейки друг под другом ===== */ @media (max-width: 767px) { #sp-component table.layout-table, #sp-component table.layout-table > tbody, #sp-component table.layout-table > tbody > tr, #sp-component table.layout-table > tbody > tr > td { display: block; width: 100% !important; padding-right: 0 !important; } #sp-component table.layout-table > tbody > tr > td + td { margin-top: 15px; } #sp-component table.layout-table img { margin: 0 auto; } } /* ===== staff.css — сотрудники: карусель «Наши сотрудники» (макет staff_strip) и карточки «Педагогический состав» (макет staff_grid) ===== */ /* модуль карусели в позиции position5 (над страницей отдела): без синего фона и отступов «Состава профкома» */ #sp-position5 .sp-module.staff-strip-module { padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .staff-strip { display: flex; max-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 20px; /* как белый лист материала и блоки справа */ background: #fff; box-shadow: 0 5px 25px rgba(0, 0, 0, .05); } .staff-strip__tile { flex: 0 0 200px; display: flex; flex-direction: column; align-items: center; padding: 75px 0 22px; background: #6495ed; color: #ebebeb; font-family: lato, Verdana, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 31.2px; text-align: center; text-transform: uppercase; } .staff-strip__tile .fa-graduation-cap { font-size: 54px; line-height: 54px; } .staff-strip__label { margin-top: auto; font-size: 17px; white-space: nowrap; } .staff-strip__viewport { position: relative; flex: 1; min-width: 0; } .staff-strip__items { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; margin: 0; padding: 0; list-style: none; } .staff-strip__item { min-width: 0; } /* листание (site custom.js, раздел 5): карточки по очереди гаснут/появляются, задержка ставится скриптом */ .staff-strip__item { transition: opacity .28s ease, transform .28s ease; } .staff-strip__item.is-out { opacity: 0; transform: translateY(10px); } .staff-strip__items > .staff-strip__item:last-child .staff-strip__name { border-right: 0; } .staff-strip__item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; } .staff-strip__photo { display: block; height: 176px; overflow: hidden; background: #ddd; } .staff-strip__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .staff-strip__item a:hover .staff-strip__photo img { transform: scale(1.04); } .staff-strip__name { flex: 1; display: flex; align-items: center; justify-content: center; padding: 15px; border-right: 1px solid #d9d9d9; background: #fff; color: #00508a; font-size: 18px; line-height: 28.8px; text-align: center; text-transform: uppercase; } .staff-strip__item a:hover .staff-strip__name { color: #165feb; } .staff-strip__arrow { position: absolute; top: 86px; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; background: #00508a; color: #fff; font-size: 18px; line-height: 45px; opacity: .35; transition: opacity .2s; } .staff-strip__arrow:hover, .staff-strip__arrow:focus-visible { opacity: .85; } .staff-strip__arrow--prev { left: 5px; } .staff-strip__arrow--next { right: 5px; } .staff-strip--single .staff-strip__arrow { display: none; } @media (max-width: 991px) { .staff-strip__items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .staff-strip { flex-direction: column; } .staff-strip__tile { flex: none; flex-direction: row; justify-content: center; gap: 12px; padding: 10px; } .staff-strip__tile .fa-graduation-cap { font-size: 28px; line-height: 31px; } .staff-strip__label { margin-top: 0; } .staff-strip__items { grid-template-columns: 1fr; } .staff-strip__photo { height: 230px; } .staff-strip__arrow { top: 92px; } .staff-strip__label { font-size: 18px; } } /* «Педагогический состав»: вкладки и карточки */ .staff-grid { margin-top: 30px; } .staff-grid__tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 20px; padding: 0; border: 0; } .staff-grid__tab { padding: 6px 20px; border: 0; border-radius: 3px; background: #ddd; color: #686868; font-size: 15px; line-height: 22px; } .staff-grid__tab:hover { background: #ccc; } .staff-grid__tab.active { background: #888; color: #fff; } .staff-grid__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; } .staff-card { display: flex; flex-direction: column; min-width: 0; padding: 15px; border: 1px solid #e3e3e3; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .staff-card__photo img { display: block; width: 100%; aspect-ratio: 388 / 273; object-fit: cover; } .staff-card__name { margin: 18px 0 15px; color: #00508a; font-size: 18px; line-height: 31px; overflow-wrap: anywhere; } .staff-card__name:hover { color: #165feb; } .staff-card__more { align-self: flex-start; margin-top: auto; padding: 10px 14px; background: #add8e6; box-shadow: 0 4px 8px rgba(0, 0, 0, .15); color: #333; font-size: 13px; font-weight: 700; text-transform: uppercase; } .staff-card__more:hover { background: #9ccbe0; color: #333; } .staff-card__depts { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; } .staff-card__dept { display: block; padding: 6px 8px; background: #6e6e6e; color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; } .staff-card__dept:hover { background: #555; color: #fff; } @media (max-width: 1199px) { .staff-grid__cards { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 991px) { .staff-grid__cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .staff-grid__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; } .staff-card { padding: 10px; } .staff-card__name { font-size: 16px; line-height: 24px; } } /* меню-«разделитель» в правой колонке (напр. «Руководство. Педагогический (научно-педагогический) состав») — как пункт меню, но без ссылки */ #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li > span:is(.menu-separator, .separator, .nav-header) { display: block; padding: 5px 15px; color: #383838; font-size: 15px; line-height: 24px; } #sp-right .sp-module:is(.sved-nav, .sved-pill) ul.menu li > span:is(.menu-separator, .separator, .nav-header)::before { content: "\f138"; margin-right: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #383838; } /* Dropfiles 2: вставка в обёртке df2-hide-subcats показывает только файлы категории, без её подпапок */ .df2-hide-subcats :is(.df2-fold, .df2-sub) { display: none !important; } /* «Конкурсы» ММО: оформление из вставленного в статью HTML-документа (было