/* =========================================================
SHAPKA SAYTA
REBOOT
========================================================= */
/* =========================================
VNUTRENNIY KONTEYNER SHAPKI
========================================= */
.site-header .site-header-inner.fixed {
width: 100% !important;
max-width: 1270px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================
SSYLKI KONTAKTOV
========================================= */
.site-header .phone-link,
.site-header .email-link {
text-decoration: none;
}
/* =========================================
KONTAKTY — SSYLKA + IKONKA
========================================= */
.site-header .header-contacts-group a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
/* =========================================
IKONKI KONTAKTOV
========================================= */
.site-header .header-contacts-group i {
flex-shrink: 0;
color: #12729f;
font-size: 16px;
}
/* =========================================
KNOPKA "ZAKAZAT ZVONOK"
========================================= */
.site-header .header-callback-button {
display: inline-block;
padding: 10px 28px;
color: #ffffff;
background-color: #0f4c6e;
border: 1px solid #0f4c6e;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(15, 76, 110, 0.12);
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* HOVER */
.site-header .header-callback-button:hover {
color: #ffffff;
background-color: #145f85;
border-color: #145f85;
box-shadow: 0 3px 8px rgba(15, 76, 110, 0.14);
}
/* =========================================================
DESKTOP
>= 1201px
========================================================= */
@media (min-width: 1201px) {
.site-header .header-contacts-group {
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
/* KNOPKU NEMNOGO OPUSKAEM VNIZ */
.site-header .header-callback-button {
transform: translateY(4px);
}
}
/* =========================================================
TABLET
768-1200px
========================================================= */
@media (min-width: 768px) and (max-width: 1200px) {
.site-header .header-contacts-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
}
/* =========================================================
UZKIY TABLET
768-993px
========================================================= */
@media (min-width: 768px) and (max-width: 993px) {
.site-header .btn-box {
display: none !important;
}
}
/* =========================================================
MOBILE
<= 767px
========================================================= */
@media (max-width: 767px) {
/* =========================================
OBSHCHAYA VYSOTA SHAPKI
========================================= */
.site-header {
min-height: auto !important;
padding-top: 12px !important;
padding-bottom: 6px !important;
}
/* =========================================
KONTAKTY
========================================= */
.site-header .header-contacts-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
margin-top: 6px !important;
text-align: center;
}
/* UBIRAEM OTSTUPY VNUTRENNIKH BLOKOV */
.site-header .header-contacts-group > div {
margin: 0 !important;
}
/* =========================================
MOBILNOE MENYU
========================================= */
.site-header .humburger {
order: 1 !important;
}
/* =========================================
POISK
========================================= */
.site-header .header-search {
order: 2 !important;
width: 30px !important;
margin-left: 10px !important;
background: transparent !important;
border: none !important;
}
/* =========================================
LOGOTIP
========================================= */
.site-header .site-logotype img {
width: auto !important;
max-height: 40px !important;
}
/* =========================================
KNOPKA "ZAKAZAT ZVONOK"
========================================= */
.site-header .btn-box {
display: none !important;
}
}
===============================================================================================
/* =========================================================
FOOTER
========================================================= */
/* =========================================
FOOTER INFO
========================================= */
.footer-info {
font-size: 0.7em;
}
/* =========================================================
TABLET / SMALL DESKTOP FOOTER
<= 1199px
========================================================= */
@media (max-width: 1199px) {
.footer-widgets,
.site-footer .footer-inner,
.footer-widgets-container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
.footer-widget {
float: none !important;
margin: 0 !important;
padding: 10px;
box-sizing: border-box !important;
}
/* ROW 1 */
.footer-widget:nth-child(1) {
flex: 0 0 100% !important;
width: 100% !important;
}
/* ROW 2 */
.footer-widget:nth-child(2),
.footer-widget:nth-child(3) {
flex: 0 0 50% !important;
width: 50% !important;
}
/* ROW 3 */
.footer-widget:nth-child(4) {
flex: 0 0 100% !important;
width: 100% !important;
}
}
/* =========================================================
DROPDOWN MENU
========================================================= */
.main-navigation ul li .sub-menu li > a,
.main-navigation ul li .sub-menu li > span,
.footer-navigation ul li .sub-menu li > a,
.footer-navigation ul li .sub-menu li > span {
padding: 15px;
color: #334155;
background-color: #f5f7fa;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 400;
}
/* =========================================================
MAIN MENU ALIGNMENT
========================================================= */
.menu-osnovnaya-navigacziya-container {
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
FOOTER MENU
========================================================= */
.widget_nav_menu {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #888888;
}
.widget_nav_menu a {
color: inherit;
text-decoration: none;
}
/* =========================================================
FOOTER INFO
========================================================= */
.footer-info {
font-size: 0.7em;
}
============================================================
/* =========================================================
MAIN MENU
========================================================= */
.menu-osnovnaya-navigacziya-container {
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
FOOTER MENU
========================================================= */
.widget_nav_menu {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #888888;
}
.widget_nav_menu a {
color: inherit;
text-decoration: none;
}
===========================================
/* =========================================================
FOOTER BOTTOM
========================================================= */
/* =========================================
OSNOVNOY BLOK
========================================= */
.site-footer-bottom {
width: 100% !important;
background-color: #014565 !important;
overflow: hidden !important;
}
/* =========================================
VNUTRENNIY KONTEYNER
========================================= */
.site-footer-bottom-inner {
position: relative !important;
width: 100% !important;
max-width: 1490px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 24px 45px !important;
color: #ffffff !important;
background-color: #014565 !important;
box-shadow: 0 0 0 100vmax #014565 !important;
clip-path: inset(0 -100vmax) !important;
box-sizing: border-box !important;
}
/* =========================================
TIPOGRAFIKA
========================================= */
.site-footer-bottom-inner,
.site-footer-bottom-inner p,
.site-footer-bottom-inner span,
.site-footer-bottom-inner a {
color: #ffffff !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* =========================================
SSYLKI
========================================= */
.site-footer-bottom-inner a {
color: #ffffff !important;
text-decoration: none !important;
}
.site-footer-bottom-inner a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}
/* =========================================
FOOTER INFO
========================================= */
.footer-info {
color: #ffffff !important;
}
/* =========================================================
TABLET / DESKTOP
>= 768px
========================================================= */
@media (min-width: 768px) {
.site-footer-bottom-inner {
display: grid !important;
grid-template-columns:
minmax(360px, 1.1fr)
minmax(360px, 1fr)
auto !important;
align-items: center !important;
column-gap: 64px !important;
width: min(1100px, calc(100% - 96px)) !important;
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =========================================================
MOBILE
<= 767px
========================================================= */
@media (max-width: 767px) {
.site-footer-bottom-inner {
width: calc(100% - 48px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
=============================================
/* ====================================
ХЛЕБНЫЕ КРОШКИ
==================================== */
.breadcrumb {
position: relative !important;
width: min(1200px, calc(100vw - 48px)) !important;
max-width: none !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 12px !important;
padding: 0 !important;
color: #94a3b8 !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-transform: none !important;
box-sizing: border-box !important;
}
/* ====================================
TIPOGRAFIKA
==================================== */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-transform: none !important;
}
/* ====================================
SSYLKI
==================================== */
.breadcrumb a,
.breadcrumb a:visited {
color: #7a8898 !important;
font-size: 14px !important;
font-weight: 400 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: color 0.2s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
color: #0f4c6e !important;
text-decoration: none !important;
}
/* ====================================
TEKUSHCHAYA STRANITSA
==================================== */
.breadcrumb span {
color: #94a3b8 !important;
font-size: 14px !important;
font-weight: 400 !important;
text-transform: none !important;
}
/* ====================================
PLANSHET
<= 1024px
==================================== */
@media (max-width: 1024px) {
.breadcrumb {
width: calc(100vw - 40px) !important;
}
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
font-size: 13px !important;
line-height: 1.5 !important;
}
}
/* ====================================
MOBILNYY
<= 767px
==================================== */
@media (max-width: 767px) {
.breadcrumb {
width: calc(100vw - 12px) !important;
}
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
font-size: 12px !important;
line-height: 1.45 !important;
}
}
/* =========================================
ЖЁЛТАЯ МОДАЛЬНАЯ КНОПКА
========================================= */
.modal-button-yellow .uagb-modal-button-link {
background: #F5B800 !important;
border-color: #F5B800 !important;
color: #163B68 !important;
}
/* Hover */
.modal-button-yellow .uagb-modal-button-link:hover {
background: #E5AA00 !important;
border-color: #E5AA00 !important;
color: #163B68 !important;
}
/* =========================================================
OSNOVNOY KATALOG OBORUDOVANIYA
========================================================= */
/* =========================================================
1. SETKA KATALOGA — BAZOVYE PARAMETRY
========================================================= */
.wp-block-uagb-container.catalog-grid {
display: grid !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* =========================================================
2. DESKTOP — 4 KOLONKI
>= 1025px
========================================================= */
@media (min-width: 1025px) {
.wp-block-uagb-container.catalog-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: 20px !important;
row-gap: 20px !important;
}
}
/* =========================================================
3. TABLET — 3 KOLONKI
768-1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.wp-block-uagb-container.catalog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 16px !important;
}
}
/* =========================================================
4. MOBILE LARGE — 2 KOLONKI
576-767px
========================================================= */
@media (min-width: 576px) and (max-width: 767px) {
.wp-block-uagb-container.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 16px !important;
}
}
/* =========================================================
5. MOBILE SMALL — 1 KOLONKA
<= 575px
========================================================= */
@media (max-width: 575px) {
.wp-block-uagb-container.catalog-grid {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
row-gap: 16px !important;
}
}
/* =========================================================
6. MOBILE LANDSCAPE — VSEGDA 2 KOLONKI
========================================================= */
@media (max-width: 767px) and (orientation: landscape) {
.wp-block-uagb-container.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 16px !important;
}
}
/* =========================================================
7. GRID ITEMS
========================================================= */
.catalog-grid > * {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box;
}
/* =========================================================
8. KARTOCHKA KATALOGA
========================================================= */
.catalog-card {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
box-sizing: border-box;
background: #EFF0F3 !important;
border: 1px solid #E2E6EA !important;
border-bottom: 1px solid #E2E6EA !important;
border-radius: 8px !important;
overflow: hidden;
box-shadow:
0 2px 8px rgba(15, 76, 110, 0.035);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* =========================================================
9. HOVER KARTOCHKI
========================================================= */
@media (hover: hover) {
.catalog-card:hover {
border-color: rgba(15, 76, 110, 0.20) !important;
box-shadow:
0 4px 10px rgba(15, 76, 110, 0.055);
transform: translateY(-2px);
}
}
/* =========================================================
10. IZOBRAZHENIYA — OBSHCHIE PARAMETRY
========================================================= */
.catalog-card img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 82% !important;
max-height: 175px !important;
margin-left: auto !important;
margin-right: auto !important;
object-fit: contain !important;
}
/* =========================================================
11. IZOBRAZHENIYA — TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.catalog-card img {
max-width: 78% !important;
max-height: 155px !important;
}
}
/* =========================================================
12. IZOBRAZHENIYA — MOBILE LARGE
2 KOLONKI
========================================================= */
@media (min-width: 576px) and (max-width: 767px) {
.catalog-card img {
max-width: 78% !important;
max-height: 145px !important;
}
}
/* =========================================================
13. IZOBRAZHENIYA — MOBILE SMALL
1 KOLONKA
========================================================= */
@media (max-width: 575px) {
.catalog-card img {
max-width: 70% !important;
max-height: 175px !important;
}
}
/* =========================================================
14. MOBILE LANDSCAPE — IZOBRAZHENIYA
========================================================= */
@media (max-width: 767px) and (orientation: landscape) {
.catalog-card img {
max-width: 78% !important;
max-height: 145px !important;
}
}
/* =========================================================
15. INFO BOX V KARTOCHKE
========================================================= */
.catalog-card .wp-block-uagb-info-box {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* UBIRAEM VOZMOZHNYE DOPOLNITELNYE OTSTUPY SPECTRA */
.catalog-card .uagb-infobox-margin-wrapper,
.catalog-card .uagb-ifb-content,
.catalog-card .uagb-ifb-title-wrap {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
16. NAZVANIE KATEGORII
========================================================= */
.catalog-card .uagb-ifb-title {
margin: 0 !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #163B68 !important;
text-align: center !important;
}
/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
.catalog-card .uagb-ifb-title {
font-size: 15px !important;
line-height: 1.4 !important;
}
}
/* MOBILE */
@media (max-width: 767px) {
.catalog-card .uagb-ifb-title {
font-size: 15px !important;
line-height: 1.4 !important;
text-align: center !important;
}
}
/* =========================================================
CATALOG NEW
========================================================= */
.catalog-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px;
width: 100% !important;
max-width: none !important;
margin: 20px 0;
}
.catalog-grid #catalog-pagination {
display: none !important;
}
/* =========================================================
KARTOCHKA
========================================================= */
.catalog-grid .catalog-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 400px;
margin: 0;
padding-bottom: 12px;
background: #f9f9fa;
border: 1px solid #eaeaea;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(15, 76, 110, 0.08);
overflow: hidden;
}
/* =========================================================
IZOBRAZHENIE
========================================================= */
.catalog-grid .catalog-item img {
display: block;
width: 150px !important;
height: 150px !important;
border-radius: 8px 8px 0 0 !important;
object-fit: cover !important;
}
/* =========================================================
ZAGOLOVOK
========================================================= */
.catalog-grid .title {
margin: 5px 15px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.catalog-grid .catalog-item h3 {
margin: 15px;
font-size: 20px;
text-align: center;
text-decoration: none !important;
}
.catalog-grid .catalog-item h3 a {
color: #334155 !important;
font-family: "Manrope", sans-serif;
text-decoration: none;
}
.catalog-grid .catalog-item h3 a:hover {
text-decoration: underline;
}
/* =========================================================
RAZDELITEL POD NAZVANIEM
========================================================= */
.catalog-grid .catalog-item h3::after {
content: "";
display: block;
width: 120px;
height: 2px;
margin: 20px auto 0;
background: rgba(15, 76, 110, 0.55);
}
/* =========================================================
DOPOLNITELNYE POLYA
========================================================= */
.catalog-grid .catalog-custom-fields {
margin-top: auto;
padding: 15px;
background: #f6f7fb;
border-top: 1px solid #eaeaea;
text-align: center;
}
/* =========================================================
TSENA
========================================================= */
.catalog-grid .catalog-item .price {
margin-bottom: 0;
color: #014565;
font-family: "Manrope", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
text-align: center;
}
/* =========================================================
KNOPKA "ZAKAZAT"
========================================================= */
.catalog-grid .catalog-item .catalog_button {
display: block !important;
width: 80% !important;
margin-top: 12px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 12px 20px !important;
color: #ffffff !important;
background: #0f4c6e !important;
border: 1px solid #0f4c6e !important;
border-radius: 4px !important;
box-shadow: 0 4px 12px rgba(15, 76, 110, 0.14) !important;
box-sizing: border-box !important;
font-family: "Manrope", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
.catalog-grid .catalog-item .catalog_button:hover {
color: #ffffff !important;
background: #0c3f5c !important;
border-color: #0c3f5c !important;
box-shadow: 0 6px 16px rgba(15, 76, 110, 0.18) !important;
text-decoration: none !important;
transform: translateY(-1px) !important;
}
/* =========================================================
PAGINATSIYA / ZAGRUZKA
========================================================= */
#catalog-pagination {
width: 100%;
margin: 20px 0;
clear: both;
}
.catalog-load-more {
display: inline-block;
}
#loading-spinner {
display: none;
margin: 20px 0;
}
.spinner {
width: 40px;
height: 40px;
margin: 0 auto;
border: 4px solid #f3f3f3;
border-top-color: #025b96;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* =========================================================
LOAD MORE
========================================================= */
#load-more {
display: block;
margin: 20px auto;
padding: 15px 30px;
color: #ffffff;
background: #025b96;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition:
background-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
#load-more:hover {
color: #334155 !important;
background: #ffc107 !important;
border: none;
transform: translateY(-1px) !important;
}
/* =========================================================
KHARAKTERISTIKI
========================================================= */
.catalog-grid .catalog-item .specs {
display: flex;
flex-direction: column;
width: 80%;
gap: 0;
margin-top: 16px !important;
margin-right: auto;
margin-bottom: 16px !important;
margin-left: auto;
padding: 0;
color: #334155;
font-family: "Roboto Condensed", sans-serif;
font-size: 12px !important;
line-height: 1.2;
text-align: left;
}
.catalog-grid .spec-row {
display: flex;
width: 100%;
gap: 0;
margin-bottom: 0;
}
.catalog-grid .spec-name {
flex: 0 0 65%;
padding: 3px 0;
font-size: 12px !important;
line-height: 1.2;
text-align: left;
}
.catalog-grid .spec-value {
flex: 0 0 35%;
padding: 3px 0;
font-size: 12px;
line-height: 1.2;
text-align: right;
}
/* =========================================================
FILTR KATALOGA
========================================================= */
#catalog-filter {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
padding: 15px;
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 8px;
}
#catalog-filter input[type="number"] {
padding: 8px;
border: 1px solid #eaeaea;
border-radius: 5px;
}
#catalog-filter button {
padding: 10px 20px;
color: #ffffff;
background-color: #025b96;
border: none;
border-radius: 5px;
cursor: pointer;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
#catalog-filter button:hover {
color: #334155;
background-color: #ffc107;
}
/* =========================================================
PAGINATSIYA KATALOGA
========================================================= */
.catalog-pagination {
margin-top: 20px;
padding: 15px 0;
border-top: 1px solid #e0e0e0;
text-align: center;
}
.catalog-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.catalog-pagination li {
display: inline-block;
margin: 0;
}
.catalog-pagination a,
.catalog-pagination span {
display: inline-block;
padding: 10px 15px;
color: #333333;
background-color: #f5f5f5;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 14px;
text-decoration: none;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.catalog-pagination a:hover {
color: #ffffff;
background-color: #025b96;
border-color: #025b96;
}
.catalog-pagination .current,
.catalog-pagination span.current {
color: #ffffff;
background-color: #025b96;
border-color: #025b96;
font-weight: 700;
}
/* =========================================================
TABLET / NEBOLSHOY DESKTOP
769-1180px
========================================================= */
@media (min-width: 769px) and (max-width: 1180px) {
.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px;
}
.catalog-grid .catalog-item .specs {
width: 88%;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}
.catalog-grid .catalog-item .catalog_button {
padding: 10px 18px !important;
font-size: 13px !important;
}
}
/* =========================================================
MOBILNYY
BAZOVYE NASTROYKI <= 768px
========================================================= */
@media (max-width: 768px) {
.catalog-grid {
gap: 15px;
}
.catalog-grid .catalog-item {
min-height: 0;
}
.catalog-grid .catalog-item .specs {
width: 90%;
margin-top: 14px !important;
margin-right: auto !important;
margin-bottom: 14px !important;
margin-left: auto !important;
padding: 0 !important;
}
.catalog-grid .spec-row {
display: flex;
flex-direction: row;
width: 100%;
gap: 5px;
justify-content: center;
}
.catalog-grid .spec-name {
flex: 0 0 62%;
min-width: 0;
padding: 3px 0;
border-right: none;
border-bottom: 1px solid #dddddd;
font-size: 12px !important;
line-height: 1.2;
text-align: left;
}
.catalog-grid .spec-value {
flex: 0 0 33%;
min-width: 0;
padding: 3px 0;
font-size: 12px !important;
line-height: 1.2;
text-align: right;
}
.catalog-pagination a,
.catalog-pagination span {
padding: 8px 12px;
font-size: 12px;
}
.catalog-pagination ul {
gap: 5px;
}
}
/* =========================================================
UZKIY MOBILNYY
<= 560px - 1 KARTOCHKA
========================================================= */
@media (max-width: 560px) {
.catalog-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.catalog-grid .catalog-item img {
width: 120px !important;
height: 120px !important;
}
.catalog-grid .catalog-item .catalog_button {
width: 76% !important;
margin-top: 10px !important;
padding: 11px 18px !important;
font-size: 13px !important;
line-height: 1.3 !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
SHIROKIY MOBILNYY
561-768px - 2 KARTOCHKI
========================================================= */
@media (min-width: 561px) and (max-width: 768px) {
.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.catalog-grid .catalog-item img {
width: 130px !important;
height: 130px !important;
}
.catalog-grid .catalog-item h3 {
margin: 12px;
font-size: 18px;
}
.catalog-grid .catalog-item .price {
font-size: 18px;
}
.catalog-grid .catalog-item .specs {
width: 88%;
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.catalog-grid .spec-name {
flex: 0 0 62%;
padding: 2px 0;
font-size: 11px !important;
line-height: 1.2;
}
.catalog-grid .spec-value {
flex: 0 0 33%;
padding: 2px 0;
font-size: 11px !important;
line-height: 1.2;
}
.catalog-grid .catalog-item .catalog_button {
width: 82% !important;
margin-top: 10px !important;
padding: 10px 14px !important;
font-size: 13px !important;
line-height: 1.3 !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* =========================================================
MOBILNYY - GORIZONTALNAYA ORIENTATSIYA
2 KARTOCHKI V RYAD
========================================================= */
@media (max-width: 932px) and (orientation: landscape) {
.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 15px !important;
}
}
/* =========================================================
DOPOLNITELNYE ADAPTIVNYE PRAVILA SPECTRA
========================================================= */
/* Planshet / nebolshoy desktop */
@media screen and (min-width: 967px) and (max-width: 1200px) {
.uagb-block-1a2e6003,
.uagb-block-2e6ce25f,
.uagb-block-052ac0ac,
.uagb-block-t8nw0gyz {
padding-left: 28px !important;
padding-right: 28px !important;
}
}
/* Konkretnyy konteyner Spectra */
.wp-block-uagb-container.uagb-block-hbqhh2ss.alignwide.uagb-is-root-container {
row-gap: 20px;
}
/* Adaptiv <= 991px */
@media (max-width: 991px) {
.uagb-ifb-desc {
margin-bottom: 0;
}
.frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom button {
margin-bottom: 0;
}
.flex-two-columns p strong,
.flex-two-columns p::before {
display: none;
}
.flex-two-columns {
padding: 0 !important;
background-color: transparent !important;
}
.flex-two-columns p {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-two-columns p a {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 calc((100% - 30px) / 4);
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
font-size: 14px;
line-height: 1.3;
}
}
/* Adaptiv <= 767px */
@media (max-width: 767px) {
.flex-two-columns p a {
flex: 1 1 calc((100% - 10px) / 2);
}
}
/* =========================================================
НИЖНИЙ КОММЕРЧЕСКИЙ БЛОК
========================================================= */
/* =========================================
ОБЩИЙ КОНТЕЙНЕР
class: product-commercial-info
========================================= */
.product-commercial-info {
padding-top: 48px !important;
padding-bottom: 24px !important;
box-sizing: border-box !important;
}
/* =========================================
ОТДЕЛЬНЫЙ СМЫСЛОВОЙ РАЗДЕЛ
class: product-commercial-section
========================================= */
.product-commercial-section {
margin: 0 0 36px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.product-commercial-section:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
H2
Desktop: 22px
========================================================= */
.product-commercial-heading,
h2.product-commercial-heading,
.product-commercial-heading h2,
.product-commercial-heading .uagb-heading-text {
margin: 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-family: "Manrope", sans-serif !important;
font-size: 22px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
text-align: left !important;
}
.product-commercial-heading {
margin-bottom: 16px !important;
}
/* =========================================================
ОСНОВНОЙ ТЕКСТ
Desktop: 17px
========================================================= */
.product-commercial-info p {
margin: 0 0 14px !important;
padding: 0 !important;
color: #334155 !important;
font-family: "Manrope", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
.product-commercial-section p:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
СПИСОК
Desktop: 17px
========================================================= */
.product-commercial-info ul {
/*
Список намеренно немного утоплен вправо
относительно основного текста.
*/
margin-top: 8px !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
margin-left: 18px !important;
padding: 0 !important;
color: #334155 !important;
font-family: "Manrope", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
list-style: none !important;
}
.product-commercial-info ul > li {
position: relative !important;
margin: 0 0 8px !important;
padding-left: 20px !important;
color: #334155 !important;
font-family: "Manrope", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
list-style: none !important;
}
.product-commercial-info ul > li:last-child {
margin-bottom: 0 !important;
}
.product-commercial-info ul > li::marker {
content: "" !important;
font-size: 0 !important;
}
/* Все внутренние элементы LI
принудительно наследуют размер текста списка */
.product-commercial-info ul > li > *,
.product-commercial-info ul > li p,
.product-commercial-info ul > li span,
.product-commercial-info ul > li a,
.product-commercial-info ul > li strong {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* =========================================
МАРКЕР СПИСКА
========================================= */
.product-commercial-info ul > li::before {
content: "" !important;
position: absolute !important;
left: 1px !important;
top: 0.88em !important;
width: 4px !important;
height: 4px !important;
background: #0f4c6e !important;
border-radius: 50% !important;
transform: translateY(-50%) !important;
}
/* =========================================================
ССЫЛКИ
========================================================= */
.product-commercial-info a,
.product-commercial-info a:visited {
color: #0f4c6e !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.product-commercial-info a:hover,
.product-commercial-info a:focus {
color: #0c3f5c !important;
text-decoration: underline !important;
}
/* =========================================================
ПЛАНШЕТ + УЗКИЙ ДЕСКТОП
768–1280px
Text: 16px
H2: 20px
Horizontal padding: 24px
========================================================= */
@media (min-width: 768px) and (max-width: 1280px) {
/* Общий контейнер */
.product-commercial-info {
padding-top: 24px !important;
padding-right: 24px !important;
padding-bottom: 24px !important;
padding-left: 24px !important;
}
/* Разделы */
.product-commercial-section {
margin-bottom: 32px !important;
}
/* H2 */
.product-commercial-heading,
h2.product-commercial-heading,
.product-commercial-heading h2,
.product-commercial-heading .uagb-heading-text {
font-size: 20px !important;
line-height: 1.3 !important;
}
.product-commercial-heading {
margin-bottom: 14px !important;
}
/* Основной текст */
.product-commercial-info p {
font-size: 16px !important;
line-height: 1.6 !important;
}
/* Список */
.product-commercial-info ul {
margin-top: 8px !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
margin-left: 16px !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
.product-commercial-info ul > li {
margin-bottom: 7px !important;
padding-left: 20px !important;
font-size: 16px !important;
line-height: 1.6 !important;
}
.product-commercial-info ul > li > *,
.product-commercial-info ul > li p,
.product-commercial-info ul > li span,
.product-commercial-info ul > li a,
.product-commercial-info ul > li strong {
font-size: 16px !important;
line-height: 1.6 !important;
}
}
/* =============МОБИЛЬНЫЙ≤ 767px
Text: 14pxH2: 18pxHorizontal padding: 24px
====================================================== */
@media (max-width: 767px) {
/* Общий контейнер */
.product-commercial-info {
padding-top: 24px !important;
padding-right: 24px !important;
padding-bottom: 0px !important;
padding-left: 24px !important;
}
/* Разделы */
.product-commercial-section {
margin-bottom: 28px !important;
}
/* H2 */
.product-commercial-heading,
h2.product-commercial-heading,
.product-commercial-heading h2,
.product-commercial-heading .uagb-heading-text {
font-size: 18px !important;
line-height: 1.35 !important;
}
.product-commercial-heading {
margin-bottom: 12px !important;
}
/* Основной текст */
.product-commercial-info p {
margin-bottom: 12px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Список */
.product-commercial-info ul {
margin-top: 6px !important;
margin-right: 0 !important;
margin-bottom: 14px !important;
margin-left: 14px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
.product-commercial-info ul > li {
margin-bottom: 7px !important;
padding-left: 18px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Не даём Spectra / теме увеличивать
внутренние элементы списка */
.product-commercial-info ul > li > *,
.product-commercial-info ul > li p,
.product-commercial-info ul > li span,
.product-commercial-info ul > li a,
.product-commercial-info ul > li strong {
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Маркер */
.product-commercial-info ul > li::before {
left: 1px !important;
top: 0.9em !important;
width: 3.5px !important;
height: 3.5px !important;
}
}
/* =========================
ВКЛАДКИ НА СТРАНИЦЕ ОТГРУЗКИ
========================= */
/* =========================
OBSHCHEE VYRAVNIVANIE BLOKA
========================= */
.technical-info-title,
.technical-info-tabs {
width: 100% !important;
padding-left: 16px !important;
box-sizing: border-box !important;
}
/* =========================
ZAGOLOVOK
========================= */
.technical-info-title {
margin: 0 0 32px !important;
}
.technical-info-title,
.technical-info-title .uagb-ifb-title,
.technical-info-title .uagb-heading-text {
color: #163b68 !important;
font-family: Manrope, sans-serif !important;
font-size: 28px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
text-align: left !important;
}
.technical-info-title .uagb-ifb-title,
.technical-info-title .uagb-heading-text {
margin: 0 !important;
padding: 0 !important;
}
/* =========================
VKLADKI SPECTRA
========================= */
.technical-info-tabs .uagb-tabs__panel {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 48px !important;
margin-bottom: 40px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #d6e0e8 !important;
list-style: none !important;
}
.technical-info-tabs .uagb-tabs__panel > li {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
}
.technical-info-tabs .uagb-tabs__panel > li,
.technical-info-tabs .uagb-tabs__panel > li a,
.technical-info-tabs .uagb-tabs__panel > li span {
color: #64748b !important;
font-family: Manrope, sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
white-space: nowrap !important;
text-decoration: none !important;
box-shadow: none !important;
transition: color 0.25s ease !important;
}
.technical-info-tabs .uagb-tabs__panel > li:hover,
.technical-info-tabs .uagb-tabs__panel > li:hover a,
.technical-info-tabs .uagb-tabs__panel > li:hover span {
color: #075f86 !important;
text-decoration: none !important;
}
.technical-info-tabs .uagb-tabs__panel > li.uagb-tabs__active,
.technical-info-tabs .uagb-tabs__panel > li.uagb-tabs__active a,
.technical-info-tabs .uagb-tabs__panel > li.uagb-tabs__active span {
color: #075f86 !important;
font-weight: 500 !important;
text-decoration: none !important;
}
/* =========================
SODERZHIMOE VKLADOK
========================= */
.technical-info-tabs .uagb-tabs__body-wrap,
.technical-info-tabs .uagb-tabs__body-container,
.technical-info-tabs .uagb-tabs__body-container > div {
padding-left: 0 !important;
margin-left: 0 !important;
}
.technical-info-tabs .wp-block-html {
width: 100% !important;
margin-left: 0 !important;
padding-left: 0 !important;
box-sizing: border-box !important;
}
/* =========================
TABLITSY
========================= */
.technical-info-tabs table {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
box-sizing: border-box !important;
color: #334155 !important;
font-family: Manrope, sans-serif !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
.technical-info-tabs table td {
padding: 13px 16px !important;
border: 1px solid #d6e0e8 !important;
vertical-align: middle !important;
overflow-wrap: anywhere;
box-sizing: border-box !important;
color: #334155 !important;
background: #f5f7fa !important;
}
.technical-info-tabs table tr > td:first-child:not(:only-child) {
width: 36% !important;
color: #163b68 !important;
font-weight: 500 !important;
}
/* =========================
TEKST VKLADKI OPISANIE
========================= */
.technical-info-description p {
margin: 0 0 8px !important;
color: #334155 !important;
font-family: "Manrope", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
.technical-info-description p:last-child {
margin-bottom: 0 !important;
}
.technical-info-description h2 {
margin: 6px 0 6px !important;
color: #163b68 !important;
font-family: "Manrope", sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
/* =========================
SPISKI VO VKLADKAKH
========================= */
.technical-info-description ul {
margin: 6px 0 12px 28px !important;
padding: 0 !important;
list-style: none !important;
}
.technical-info-description ul > li {
position: relative !important;
margin: 0 0 12px !important;
padding-left: 20px !important;
color: #334155 !important;
font-family: Manrope, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.65 !important;
list-style: none !important;
}
.technical-info-description ul > li:last-child {
margin-bottom: 0 !important;
}
.technical-info-description ul > li::marker {
content: "" !important;
font-size: 0 !important;
}
.technical-info-description ul > li::before {
content: "" !important;
position: absolute !important;
top: 14px !important;
left: 0 !important;
width: 6px !important;
height: 6px !important;
background: #0f4c6e !important;
border: 0 !important;
border-radius: 50% !important;
transform: translateY(-50%) !important;
}
/* =========================
PRIMECHANIE
========================= */
p.technical-info-note {
margin: 10px 0 0 !important;
color: #334155 !important;
font-family: Manrope, sans-serif !important;
font-size: 14px !important;
font-style: italic !important;
font-weight: 400 !important;
line-height: 1.55 !important;
}
/* =========================
PLANSHET
========================= */
@media (max-width: 1024px) {
.technical-info-title,
.technical-info-tabs {
padding-left: 12px !important;
}
.technical-info-title,
.technical-info-title .uagb-ifb-title,
.technical-info-title .uagb-heading-text {
font-size: 25px !important;
font-weight: 500 !important;
}
.technical-info-tabs .uagb-tabs__panel {
gap: 20px !important;
margin-bottom: 20px !important;
}
.technical-info-tabs .uagb-tabs__panel > li,
.technical-info-tabs .uagb-tabs__panel > li a,
.technical-info-tabs .uagb-tabs__panel > li span {
font-size: 17px !important;
}
/* Tekst opisaniya */
.technical-info-description p {
font-size: 17px !important;
line-height: 1.65 !important;
}
/* H2 vnutri opisaniya */
.technical-info-description h2 {
margin: 16px 0 10px !important;
font-size: 22px !important;
}
/* Spiski */
.technical-info-description ul > li {
font-size: 17px !important;
line-height: 1.6 !important;
}
}
/* =========================
MOBILNYY
========================= */
@media (max-width: 767px) {
.technical-info-title,
.technical-info-tabs {
padding-left: 0 !important;
}
.technical-info-title {
margin: 0 !important;
}
.technical-info-title,
.technical-info-title .uagb-ifb-title,
.technical-info-title .uagb-heading-text {
font-size: 22px !important;
font-weight: 500 !important;
text-align: left !important;
}
.technical-info-tabs .uagb-tabs__panel {
gap: 10px !important;
margin-bottom: 20px !important;
overflow: visible !important;
}
.technical-info-tabs .uagb-tabs__panel > li,
.technical-info-tabs .uagb-tabs__panel > li a,
.technical-info-tabs .uagb-tabs__panel > li span {
font-size: 14px !important;
}
/* Tablitsa */
.technical-info-tabs table {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 13px !important;
}
.technical-info-tabs table td {
padding: 10px 7px !important;
}
.technical-info-tabs table td:first-child {
width: 38% !important;
}
/* Tekst opisaniya */
.technical-info-description p {
margin-bottom: 4px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
/* H2 vnutri opisaniya */
.technical-info-description h2 {
margin: 14px 0 8px !important;
font-size: 20px !important;
line-height: 1.35 !important;
}
/* Spiski */
.technical-info-description ul {
margin: 6px 0 10px 20px !important;
}
.technical-info-description ul > li {
margin-bottom: 7px !important;
padding-left: 17px !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
.technical-info-description ul > li::before {
top: 13px !important;
width: 5px !important;
height: 5px !important;
}
p.technical-info-note {
margin-top: 28px !important;
font-size: 12px !important;
}
}
/* ==================================================
HERO - REALIZOVANNYE PROEKTY
BAZOVOE OFORMLENIE KNOPOK
================================================== */
/* ==================================================
OSNOVNAYA KNOPKA - MODAL TRIGGER
================================================== */
.realized-projects-hero-primary .uagb-modal-button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 154px;
min-height: 54px;
padding: 13px 28px !important;
border: 1px solid #0f4c6e !important;
border-radius: 4px !important;
background: #0f4c6e !important;
color: #ffffff !important;
box-sizing: border-box;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: 0 6px 18px rgba(15, 76, 110, 0.16);
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.realized-projects-hero-primary .uagb-modal-button-link:hover {
border-color: #0c3f5c !important;
background: #0c3f5c !important;
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(15, 76, 110, 0.22);
transform: translateY(-1px);
}
/* ==================================================
VTORICHNAYA KNOPKA
================================================== */
.realized-projects-hero-secondary .uagb-buttons-repeater {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 300px;
min-height: 54px;
padding: 13px 28px !important;
border: 1px solid rgba(22, 59, 104, 0.22) !important;
border-radius: 4px !important;
background: transparent !important;
color: #0f4c6e !important;
box-sizing: border-box;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.realized-projects-hero-secondary .uagb-buttons-repeater:hover {
border-color: #0c3f5c !important;
background: transparent !important;
color: #0c3f5c !important;
box-shadow: 0 6px 16px rgba(15, 76, 110, 0.12) !important;
transform: translateY(-1px);
}
/* ==================================================
NORMALIZATSIYA OBERTOK SPECTRA
MODAL + BUTTONS
================================================== */
.realized-projects-hero-primary,
.realized-projects-hero-secondary {
margin: 0 !important;
padding: 0 !important;
}
/* Modal trigger wrapper */
.realized-projects-hero-primary .uagb-spectra-button-wrapper {
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* Obychnaya knopka Spectra */
.realized-projects-hero-secondary .uagb-buttons__wrap,
.realized-projects-hero-secondary .wp-block-uagb-buttons-child,
.realized-projects-hero-secondary .uagb-button__wrapper {
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==================================================
DESKTOP
> 1024px
================================================== */
@media (min-width: 1025px) {
/* Ubiraem skrytuyu lishnyuyu shirinu bloka Modal */
.realized-projects-hero-primary {
flex: 0 0 auto !important;
width: fit-content !important;
max-width: fit-content !important;
}
.realized-projects-hero-primary .uagb-spectra-button-wrapper {
width: fit-content !important;
max-width: fit-content !important;
margin: 0 !important;
padding: 0 !important;
}
.realized-projects-hero-secondary {
flex: 0 0 auto !important;
width: fit-content !important;
max-width: fit-content !important;
}
/* ==================================================
STRANITSY OTGRUZOK PO GODAM - DESKTOP
================================================== */
.year-projects-hero-actions
.realized-projects-hero-primary .uagb-modal-button-link {
width: auto !important;
min-width: 0 !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
.year-projects-hero-actions
.realized-projects-hero-secondary .uagb-buttons-repeater {
width: auto !important;
min-width: 190px !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
}
/* ==================================================
PLANSHET
768-1024px
================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
/* Realizovannye proekty */
.realized-projects-hero-actions {
display: grid !important;
grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.15fr) !important;
gap: 16px !important;
width: 100% !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.realized-projects-hero-primary,
.realized-projects-hero-secondary {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.realized-projects-hero-primary
.uagb-spectra-button-wrapper,
.realized-projects-hero-secondary
.uagb-buttons__wrap,
.realized-projects-hero-secondary
.wp-block-uagb-buttons-child,
.realized-projects-hero-secondary
.uagb-button__wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.realized-projects-hero-primary .uagb-modal-button-link,
.realized-projects-hero-secondary .uagb-buttons-repeater {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 50px !important;
margin: 0 !important;
padding: 12px 20px !important;
white-space: nowrap !important;
}
/* ==================================================
STRANITSY OTGRUZOK PO GODAM - TABLET
================================================== */
.year-projects-hero-actions {
display: grid !important;
grid-template-columns:
minmax(0, 1.15fr)
minmax(0, 0.85fr) !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary,
.year-projects-hero-actions
.realized-projects-hero-secondary {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary .uagb-modal-button-link,
.year-projects-hero-actions
.realized-projects-hero-secondary .uagb-buttons-repeater {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 12px 18px !important;
}
}
/* ==================================================
MOBILNYY - VERTIKALNYY
<= 767px
================================================== */
@media (max-width: 767px) {
.realized-projects-hero-actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 420px !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Oba dochernikh bloka - na vsyu shirinu */
.realized-projects-hero-primary,
.realized-projects-hero-secondary {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Modal wrapper */
.realized-projects-hero-primary
.uagb-spectra-button-wrapper {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Vse vnutrennie obertki Buttons */
.realized-projects-hero-secondary
.uagb-buttons__wrap,
.realized-projects-hero-secondary
.wp-block-uagb-buttons-child,
.realized-projects-hero-secondary
.uagb-button__wrapper {
display: flex !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Sami knopki */
.realized-projects-hero-primary
.uagb-modal-button-link,
.realized-projects-hero-secondary
.uagb-buttons-repeater {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 !important;
padding: 11px 18px !important;
box-sizing: border-box !important;
font-size: 13px !important;
white-space: nowrap !important;
}
/* ==================================================
STRANITSY OTGRUZOK PO GODAM - MOBILE
================================================== */
.year-projects-hero-actions {
width: 100% !important;
max-width: 420px !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary,
.year-projects-hero-actions
.realized-projects-hero-secondary {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary .uagb-modal-button-link,
.year-projects-hero-actions
.realized-projects-hero-secondary .uagb-buttons-repeater {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
padding: 11px 18px !important;
}
}
/* ==================================================
MOBILNYY - GORIZONTALNYY
DOLZHEN IDTI POSLE OBYCHNOGO MOBILE
================================================== */
@media (max-width: 767px) and (orientation: landscape) {
.realized-projects-hero-actions {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
align-items: stretch !important;
}
/* Sbrasyvaem min-width:100% iz portrait */
.realized-projects-hero-primary,
.realized-projects-hero-secondary {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Modal wrapper */
.realized-projects-hero-primary
.uagb-spectra-button-wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Buttons wrappers */
.realized-projects-hero-secondary
.uagb-buttons__wrap,
.realized-projects-hero-secondary
.wp-block-uagb-buttons-child,
.realized-projects-hero-secondary
.uagb-button__wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sami knopki */
.realized-projects-hero-primary
.uagb-modal-button-link,
.realized-projects-hero-secondary
.uagb-buttons-repeater {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 48px !important;
margin: 0 !important;
padding: 11px 16px !important;
white-space: nowrap !important;
}
/* ==================================================
STRANITSY OTGRUZOK PO GODAM - LANDSCAPE MOBILE
================================================== */
.year-projects-hero-actions {
grid-template-columns:
minmax(0, 1.15fr)
minmax(0, 0.85fr) !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary,
.year-projects-hero-actions
.realized-projects-hero-secondary {
min-width: 0 !important;
max-width: 100% !important;
}
.year-projects-hero-actions
.realized-projects-hero-primary .uagb-modal-button-link,
.year-projects-hero-actions
.realized-projects-hero-secondary .uagb-buttons-repeater {
min-width: 0 !important;
max-width: 100% !important;
}
}
/* =========================================================
POPUP KATALOGA - OFORMIT ZAKAZ
Popup Maker ID: 11613
Contact Form 7
========================================================= */
/* =========================================================
1. VNESHNEE OKNO
========================================================= */
#popmake-11613 {
width: 760px !important;
max-width: calc(100vw - 48px) !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* =========================================================
2. BELYY KONTEYNER FORMY
========================================================= */
#popmake-11613 .my-cf7-clean-form {
width: 100% !important;
margin: 0 !important;
padding-top: 30px !important;
padding-right: 40px !important;
padding-bottom: 28px !important;
padding-left: 40px !important;
color: #334155 !important;
background: #ffffff !important;
border: none !important;
border-radius: 8px !important;
box-shadow:
0 14px 36px rgba(15, 76, 110, 0.10) !important;
font-family: "Manrope", sans-serif !important;
box-sizing: border-box !important;
}
/* =========================================================
3. UBIRAEM LISHNIE AVTOOTSTUPY CF7
========================================================= */
#popmake-11613 .my-cf7-clean-form > p:not(.cf7-order-text) {
margin: 0 !important;
padding: 0 !important;
}
#popmake-11613 .my-cf7-clean-form > p:empty {
display: none !important;
}
/* =========================================================
CF7 - UBIRAEM LISHNIE INTERVALY MEZHDU POLYAMI
========================================================= */
/* Obertka kazhdogo polya CF7 */
#popmake-11613 .my-cf7-clean-form .wpcf7-form-control-wrap {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sluzhebnye perenosy posle poley */
#popmake-11613 .my-cf7-clean-form
.wpcf7-form-control-wrap + br {
display: none !important;
}
/* Paragrafy, kotorye CF7 mozhet sozdavat vokrug poley */
#popmake-11613 .my-cf7-clean-form > p:not(.cf7-order-text) {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* =========================================================
UBIRAEM SLUZHEBNYE PERENOSY CF7
MEZHDU ZAGOLOVKOM I PODZAGOLOVKOM
========================================================= */
#popmake-11613 .cf7-order-title + br,
#popmake-11613 .cf7-order-text + br {
display: none !important;
}
/* =========================================================
4. ZAGOLOVOK
========================================================= */
#popmake-11613 .cf7-order-title,
#popmake-11613 h2.cf7-order-title,
#popmake-11613 h3.cf7-order-title {
display: block !important;
width: 100% !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 6px !important;
margin-left: 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-family: "Manrope", sans-serif !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
text-align: center !important;
text-transform: none !important;
}
/* =========================================================
5. PODZAGOLOVOK
========================================================= */
#popmake-11613 .cf7-order-text {
display: block !important;
width: 100% !important;
max-width: 600px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 18px !important;
margin-left: auto !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-align: center !important;
}
/* =========================================================
6. POLYA
========================================================= */
#popmake-11613 .my-cf7-clean-form input[type="text"],
#popmake-11613 .my-cf7-clean-form input[type="tel"],
#popmake-11613 .my-cf7-clean-form textarea {
display: block !important;
width: 100% !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 14px !important;
margin-left: 0 !important;
padding: 14px 16px !important;
color: #334155 !important;
background: #ffffff !important;
border: 1px solid #d6e0e8 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
/* Input */
#popmake-11613 .my-cf7-clean-form input[type="text"],
#popmake-11613 .my-cf7-clean-form input[type="tel"] {
min-height: 52px !important;
}
/* Textarea */
#popmake-11613 .my-cf7-clean-form textarea {
min-height: 100px !important;
resize: vertical !important;
}
/* Placeholder */
#popmake-11613 .my-cf7-clean-form input::placeholder,
#popmake-11613 .my-cf7-clean-form textarea::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Focus */
#popmake-11613 .my-cf7-clean-form input[type="text"]:focus,
#popmake-11613 .my-cf7-clean-form input[type="tel"]:focus,
#popmake-11613 .my-cf7-clean-form textarea:focus {
outline: none !important;
border-color: #0f4c6e !important;
box-shadow:
0 0 0 3px rgba(15, 76, 110, 0.08) !important;
}
/* =========================================================
7. ZAGRUZKA OPROSNOGO LISTA
========================================================= */
#popmake-11613 .upload-field {
display: block !important;
width: 100% !important;
margin-top: 6px !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-left: 0 !important;
padding: 0 !important;
text-align: left !important;
}
#popmake-11613 .upload-field label {
display: block !important;
margin: 0 0 8px !important;
padding: 0 !important;
color: #334155 !important;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-align: left !important;
}
#popmake-11613 .upload-field input[type="file"] {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
/* Knopka "Vyberite fayl" */
#popmake-11613
.upload-field
input[type="file"]::file-selector-button {
margin-right: 10px !important;
padding: 8px 12px !important;
color: #334155 !important;
background: #f5f7fa !important;
border: 1px solid #d6e0e8 !important;
border-radius: 6px !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
}
/* =========================================================
8. OBSCHAYA SISTEMA DVUKH CTA-KNOPOK
========================================================= */
#popmake-11613 .cf7-document-link,
#popmake-11613 .cf7-order-submit,
#popmake-11613 input.cf7-order-submit,
#popmake-11613 .my-cf7-clean-form input[type="submit"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 54px !important;
padding: 13px 28px !important;
border-radius: 4px !important;
box-sizing: border-box !important;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
cursor: pointer !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
/* =========================================================
VTORICHNAYA KNOPKA
"ZAPOLNIT OPROSNYY LIST ONLAYN"
========================================================= */
#popmake-11613 .cf7-document-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 54px !important;
height: 54px !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 12px !important;
margin-left: 0 !important;
padding: 0 28px !important;
color: #0f4c6e !important;
background: transparent !important;
border: 1px solid rgba(22, 59, 104, 0.22) !important;
border-radius: 4px !important;
outline: none !important;
box-shadow: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
/* Na sluchay esli WordPress vse-taki vstavil
*/
#popmake-11613 .cf7-document-link br {
display: none !important;
}
/* Hover */
#popmake-11613 .cf7-document-link:hover,
#popmake-11613 .cf7-document-link:focus {
color: #0f4c6e !important;
background: #f5f7fa !important;
border-color: rgba(22, 59, 104, 0.35) !important;
outline: none !important;
box-shadow:
0 6px 16px rgba(15, 76, 110, 0.12) !important;
transform: translateY(-1px) !important;
text-decoration: none !important;
}
/* =========================================================
10. OSNOVNAYA KNOPKA "OTPRAVIT"
KAK PROJECTS-HERO-PRIMARY
========================================================= */
#popmake-11613 .cf7-order-submit,
#popmake-11613 input.cf7-order-submit,
#popmake-11613 .my-cf7-clean-form input[type="submit"] {
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
border: 1px solid #0f4c6e !important;
background: #0f4c6e !important;
background-color: #0f4c6e !important;
background-image: none !important;
color: #ffffff !important;
box-shadow:
0 6px 18px rgba(15, 76, 110, 0.16) !important;
opacity: 1 !important;
filter: none !important;
}
/* Hover osnovnoy */
#popmake-11613 .cf7-order-submit:hover,
#popmake-11613 input.cf7-order-submit:hover,
#popmake-11613 .my-cf7-clean-form input[type="submit"]:hover {
border-color: #0c3f5c !important;
background: #0c3f5c !important;
background-color: #0c3f5c !important;
color: #ffffff !important;
box-shadow:
0 8px 22px rgba(15, 76, 110, 0.22) !important;
transform: translateY(-1px) !important;
}
/* =========================================================
11. GDPR
========================================================= */
#popmake-11613 .cf7-consent {
display: block !important;
width: 100% !important;
margin-top: 12px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
}
/* Ubiraem sistemnye otstupy CF7 */
#popmake-11613 .cf7-consent .wpcf7-acceptance,
#popmake-11613 .cf7-consent .wpcf7-list-item {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Checkbox + tekst */
#popmake-11613 .cf7-consent label {
display: flex !important;
align-items: flex-start !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.55 !important;
text-align: left !important;
}
/* Checkbox */
#popmake-11613 .cf7-consent input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
min-width: 17px !important;
margin-top: 2px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
flex: 0 0 17px !important;
accent-color: #0f4c6e !important;
}
/* Ssylki GDPR */
#popmake-11613 .cf7-consent a {
color: #0f4c6e !important;
font-weight: 400 !important;
font-style: normal !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
#popmake-11613 .cf7-consent a:hover {
color: #0c3f5c !important;
}
/* =========================================================
12. VALIDATSIYA
========================================================= */
#popmake-11613 .wpcf7-not-valid-tip {
display: block !important;
margin-top: -8px !important;
margin-bottom: 10px !important;
color: #dc2626 !important;
font-family: "Manrope", sans-serif !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
/* Soobschenie CF7 */
#popmake-11613 .wpcf7-response-output {
margin: 16px 0 0 !important;
padding: 10px 14px !important;
border-radius: 6px !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
/* =========================================================
PLANSHET
768-1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
#popmake-11613 {
width: 90vw !important;
max-width: 760px !important;
}
#popmake-11613 .my-cf7-clean-form {
padding-top: 28px !important;
padding-right: 32px !important;
padding-bottom: 28px !important;
padding-left: 32px !important;
}
/* H2 */
#popmake-11613 .cf7-order-title,
#popmake-11613 h2.cf7-order-title,
#popmake-11613 h3.cf7-order-title {
margin-bottom: 6px !important;
font-size: 26px !important;
}
/* Podzagolovok */
#popmake-11613 .cf7-order-text {
margin-bottom: 18px !important;
font-size: 15px !important;
}
/* Knopki */
#popmake-11613 .cf7-document-link,
#popmake-11613 .cf7-order-submit,
#popmake-11613 input.cf7-order-submit,
#popmake-11613 .my-cf7-clean-form input[type="submit"] {
min-height: 52px !important;
padding: 12px 18px !important;
font-size: 15px !important;
}
}
/* =========================================================
MOBILNYY
<= 767px
========================================================= */
@media (max-width: 767px) {
/* Okno */
#popmake-11613 {
width: calc(100vw - 32px) !important;
max-width: none !important;
}
/* Konteyner */
#popmake-11613 .my-cf7-clean-form {
padding-top: 22px !important;
padding-right: 20px !important;
padding-bottom: 22px !important;
padding-left: 20px !important;
box-shadow:
0 10px 28px rgba(15, 76, 110, 0.10) !important;
}
/* Zagolovok */
#popmake-11613 .cf7-order-title,
#popmake-11613 h2.cf7-order-title,
#popmake-11613 h3.cf7-order-title {
margin-bottom: 5px !important;
font-size: 22px !important;
line-height: 1.3 !important;
}
/* Podzagolovok */
#popmake-11613 .cf7-order-text {
margin-bottom: 14px !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* Polya */
#popmake-11613 .my-cf7-clean-form input[type="text"],
#popmake-11613 .my-cf7-clean-form input[type="tel"],
#popmake-11613 .my-cf7-clean-form textarea {
margin-bottom: 12px !important;
padding: 12px 14px !important;
font-size: 14px !important;
border-radius: 7px !important;
}
#popmake-11613 .my-cf7-clean-form input[type="text"],
#popmake-11613 .my-cf7-clean-form input[type="tel"] {
min-height: 48px !important;
}
#popmake-11613 .my-cf7-clean-form textarea {
min-height: 90px !important;
}
/* Upload */
#popmake-11613 .upload-field {
margin-top: 4px !important;
margin-bottom: 8px !important;
}
#popmake-11613 .upload-field label {
font-size: 14px !important;
}
/* Obe CTA */
#popmake-11613 .cf7-document-link,
#popmake-11613 .cf7-order-submit,
#popmake-11613 input.cf7-order-submit,
#popmake-11613 .my-cf7-clean-form input[type="submit"] {
width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 11px 16px !important;
font-size: 13px !important;
font-weight: 400 !important;
border-radius: 4px !important;
}
/* Mezhdu dvumya knopkami */
#popmake-11613 .cf7-document-link {
margin-bottom: 12px !important;
}
/* GDPR */
#popmake-11613 .cf7-consent {
margin-top: 10px !important;
}
#popmake-11613 .cf7-consent label {
gap: 8px !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
#popmake-11613 .cf7-consent input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
margin-top: 2px !important;
flex: 0 0 16px !important;
}
}
/* =========================================================
FLUENT FORM #18
EDINYI STIL FORMY
========================================================= */
/* =========================================
OBSHCHAYA TIPOGRAFIKA
========================================= */
#fluentform_18,
#fluentform_18 input,
#fluentform_18 textarea,
#fluentform_18 button,
#fluentform_18 label {
font-family: "Manrope", sans-serif !important;
}
/* =========================================
GRUPPY POLEY
========================================= */
#fluentform_18 .ff-el-group {
margin-bottom: 16px !important;
}
/* =========================================
INPUT / TEXTAREA
========================================= */
#fluentform_18 .ff-el-form-control {
width: 100% !important;
margin: 0 !important;
padding: 14px 16px !important;
color: #334155 !important;
background: #ffffff !important;
border: 1px solid #d6e0e8 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
/* TEKSTOVYE POLYA */
#fluentform_18 input.ff-el-form-control {
min-height: 52px !important;
}
/* TEXTAREA */
#fluentform_18 textarea.ff-el-form-control {
min-height: 108px !important;
resize: vertical !important;
}
/* =========================================
PLACEHOLDER
========================================= */
#fluentform_18 .ff-el-form-control::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* =========================================
FOCUS
========================================= */
#fluentform_18 .ff-el-form-control:focus {
outline: none !important;
border-color: #0f4c6e !important;
box-shadow:
0 0 0 3px rgba(15, 76, 110, 0.08) !important;
}
/* =========================================
KNOPKA OTPRAVKI
========================================= */
#fluentform_18 .ff-btn-submit,
#fluentform_18 button[type="submit"],
#fluentform_18 input[type="submit"] {
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 13px 20px !important;
color: #ffffff !important;
background: #0f4c6e !important;
border: 1px solid #0f4c6e !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: center !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease !important;
}
/* HOVER */
#fluentform_18 .ff-btn-submit:hover,
#fluentform_18 button[type="submit"]:hover,
#fluentform_18 input[type="submit"]:hover {
color: #ffffff !important;
background-color: #0c3f5c !important;
background-image: none !important;
border-color: #0c3f5c !important;
box-shadow: 0 6px 14px rgba(15, 76, 110, 0.16) !important;
transform: translateY(-1px) !important;
opacity: 1 !important;
filter: none !important;
}
/* =========================================
WRAPPER KNOPKI
========================================= */
#fluentform_18 .ff_submit_wrapper,
#fluentform_18 .ff_submit_btn_wrapper_custom {
margin-top: 2px !important;
margin-bottom: 0 !important;
}
/* =========================================================
GDPR / SOGLASIE
class konteinera: form-consent
========================================================= */
/* =========================================
KONTEYNER SOGLASIYA
Zdes reguliruetsya rasstoyanie
ot knopki do checkbox + teksta
========================================= */
#fluentform_18 .form-consent {
width: 100% !important;
margin-top: 24px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================
VNUTRENNIE OBERTKI GDPR
========================================= */
#fluentform_18 .form-consent .ff-el-input--content,
#fluentform_18 .form-consent .ff-el-form-check {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================
CHECKBOX + TEKST
========================================= */
#fluentform_18 .form-consent .ff-el-form-check-label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.55 !important;
}
/* =========================================
SAM CHECKBOX
========================================= */
#fluentform_18 .form-consent input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
min-width: 17px !important;
margin-top: 3px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
flex: 0 0 17px !important;
accent-color: #0f4c6e !important;
}
/* =========================================
TEKST VNUTRI GDPR
========================================= */
#fluentform_18 .form-consent .ff-el-form-check-label span,
#fluentform_18 .form-consent .ff-el-form-check-label p {
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.55 !important;
}
/* =========================================
SSYLKI V SOGLASII
========================================= */
#fluentform_18 .form-consent a {
color: #0f4c6e !important;
font-weight: 400 !important;
font-style: normal !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
#fluentform_18 .form-consent a:hover {
color: #0c3f5c !important;
}
/* =========================================
SOOBSHCHENIYA OB OSHIBKAKH
========================================= */
#fluentform_18 .error,
#fluentform_18 .text-danger,
#fluentform_18 .ff-el-is-error .text-danger {
font-family: "Manrope", sans-serif !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
/* =========================================================
PLANSHET
768-1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* POLYA */
#fluentform_18 .ff-el-form-control {
font-size: 15px !important;
}
/* KNOPKA */
#fluentform_18 .ff-btn-submit,
#fluentform_18 button[type="submit"],
#fluentform_18 input[type="submit"] {
font-size: 15px !important;
}
/* GDPR - RASSTOYANIE OT KNOPKI */
#fluentform_18 .form-consent {
margin-top: 22px !important;
}
/* GDPR - TEKST */
#fluentform_18 .form-consent .ff-el-form-check-label,
#fluentform_18 .form-consent .ff-el-form-check-label span,
#fluentform_18 .form-consent .ff-el-form-check-label p {
font-size: 13px !important;
line-height: 1.5 !important;
}
/* CHECKBOX */
#fluentform_18 .form-consent input[type="checkbox"] {
margin-top: 3px !important;
}
}
/* =========================================================
MOBILNYY
<= 767px
========================================================= */
@media (max-width: 767px) {
/* =========================================
MEZHDU POLYAMI
========================================= */
#fluentform_18 .ff-el-group {
margin-bottom: 14px !important;
}
/* =========================================
POLYA
========================================= */
#fluentform_18 .ff-el-form-control {
padding: 12px 14px !important;
font-size: 14px !important;
line-height: 1.5 !important;
border-radius: 7px !important;
}
#fluentform_18 input.ff-el-form-control {
min-height: 48px !important;
}
#fluentform_18 textarea.ff-el-form-control {
min-height: 96px !important;
}
/* =========================================
KNOPKA
========================================= */
#fluentform_18 .ff-btn-submit,
#fluentform_18 button[type="submit"],
#fluentform_18 input[type="submit"] {
min-height: 48px !important;
padding: 12px 18px !important;
font-size: 14px !important;
border-radius: 7px !important;
}
/* =========================================
GDPR - RASSTOYANIE OT KNOPKI
========================================= */
#fluentform_18 .form-consent {
margin-top: 20px !important;
}
/* =========================================
GDPR - CHECKBOX + TEKST
========================================= */
#fluentform_18 .form-consent .ff-el-form-check-label {
gap: 8px !important;
}
/* CHECKBOX */
#fluentform_18 .form-consent input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
margin-top: 2px !important;
flex: 0 0 16px !important;
}
/* TEKST */
#fluentform_18 .form-consent .ff-el-form-check-label,
#fluentform_18 .form-consent .ff-el-form-check-label span,
#fluentform_18 .form-consent .ff-el-form-check-label p {
font-size: 12px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
FLUENT FORM #24
EDINYY STIL FORMY
========================================================= */
/* =========================================
OBSCHAYA TIPOGRAFIKA
========================================= */
#fluentform_24,
#fluentform_24 input,
#fluentform_24 textarea,
#fluentform_24 select,
#fluentform_24 button,
#fluentform_24 label {
font-family: "Manrope", sans-serif !important;
}
/* =========================================
SAMA FORMA
========================================= */
#fluentform_24 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================
GRUPPY POLEY
========================================= */
#fluentform_24 .ff-el-group {
margin-bottom: 16px !important;
}
/* =========================================
INPUT / TEXTAREA / SELECT
========================================= */
#fluentform_24 .ff-el-form-control {
width: 100% !important;
margin: 0 !important;
padding: 14px 16px !important;
color: #334155 !important;
background: #ffffff !important;
border: 1px solid #d6e0e8 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
}
/* Obychnye polya */
#fluentform_24 input.ff-el-form-control,
#fluentform_24 select.ff-el-form-control {
min-height: 52px !important;
}
/* Textarea */
#fluentform_24 textarea.ff-el-form-control {
min-height: 104px !important;
resize: vertical !important;
}
/* =========================================
PLACEHOLDER
========================================= */
#fluentform_24 .ff-el-form-control::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* =========================================
FOCUS
========================================= */
#fluentform_24 .ff-el-form-control:focus {
outline: none !important;
border-color: #0f4c6e !important;
box-shadow:
0 0 0 3px rgba(15, 76, 110, 0.08) !important;
}
/* =========================================
KNOPKA - ZHELTYY CTA
========================================= */
#fluentform_24 .ff-btn,
#fluentform_24 .ff-btn-submit,
#fluentform_24 button.ff-btn,
#fluentform_24 button[type="submit"],
#fluentform_24 input[type="submit"] {
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 13px 20px !important;
color: #23272f !important;
background: #ffbd00 !important;
background-color: #ffbd00 !important;
background-image: none !important;
border: 1px solid #ffbd00 !important;
border-radius: 8px !important;
box-shadow: none !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
text-align: center !important;
opacity: 1 !important;
filter: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease !important;
}
/* =========================================
HOVER / FOCUS KNOPKI
========================================= */
#fluentform_24 .ff-btn:hover,
#fluentform_24 .ff-btn-submit:hover,
#fluentform_24 button.ff-btn:hover,
#fluentform_24 button[type="submit"]:hover,
#fluentform_24 input[type="submit"]:hover,
#fluentform_24 .ff-btn:focus,
#fluentform_24 .ff-btn-submit:focus,
#fluentform_24 button[type="submit"]:focus {
color: #23272f !important;
background: #e6aa00 !important;
background-color: #e6aa00 !important;
background-image: none !important;
border-color: #e6aa00 !important;
opacity: 1 !important;
filter: none !important;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.14) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* =========================================
WRAPPER KNOPKI
========================================= */
#fluentform_24 .ff_submit_wrapper,
#fluentform_24 .ff_submit_btn_wrapper_custom,
#fluentform_24 .ff-el-group.ff_submit_wrapper {
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
}
/* =========================================================
GDPR / SOGLASIE
class konteynera: form-consent
========================================================= */
/* =========================================
KONTEYNER SOGLASIYA
Otstup ot knopki
========================================= */
#fluentform_24 .form-consent {
width: 100% !important;
margin-top: 18px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================
VNUTRENNIE OBERTKI
========================================= */
#fluentform_24 .form-consent .ff-el-input--content,
#fluentform_24 .form-consent .ff-el-form-check {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================
CHECKBOX + TEKST
========================================= */
#fluentform_24 .form-consent .ff-el-form-check-label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.82) !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.55 !important;
}
/* =========================================
CHECKBOX
========================================= */
#fluentform_24 .form-consent input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
min-width: 17px !important;
margin-top: 3px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding: 0 !important;
flex: 0 0 17px !important;
accent-color: #ffffff !important;
}
/* =========================================
TEKST VNUTRI SOGLASIYA
========================================= */
#fluentform_24 .form-consent .ff-el-form-check-label span,
#fluentform_24 .form-consent .ff-el-form-check-label p {
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.82) !important;
font-family: "Manrope", sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.55 !important;
}
/* =========================================
SSYLKI V SOGLASII
========================================= */
#fluentform_24 .form-consent a {
color: #ffffff !important;
font-weight: 400 !important;
font-style: normal !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
#fluentform_24 .form-consent a:hover {
color: rgba(255, 255, 255, 0.78) !important;
}
/* =========================================
OSHIBKI
========================================= */
#fluentform_24 .error,
#fluentform_24 .text-danger,
#fluentform_24 .ff-el-is-error .text-danger {
font-family: "Manrope", sans-serif !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
/* =========================================================
PLANSHET
768-1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
/* Polya */
#fluentform_24 .ff-el-form-control {
font-size: 15px !important;
}
/* Knopka */
#fluentform_24 .ff-btn,
#fluentform_24 .ff-btn-submit,
#fluentform_24 button[type="submit"] {
font-size: 15px !important;
}
/* GDPR - otstup ot knopki */
#fluentform_24 .form-consent {
margin-top: 16px !important;
}
/* GDPR - tekst */
#fluentform_24 .form-consent .ff-el-form-check-label,
#fluentform_24 .form-consent .ff-el-form-check-label span,
#fluentform_24 .form-consent .ff-el-form-check-label p {
font-size: 13px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
MOBILNYY
<= 767px
========================================================= */
@media (max-width: 767px) {
/* =========================================
MEZHDU POLYAMI
========================================= */
#fluentform_24 .ff-el-group {
margin-bottom: 14px !important;
}
/* =========================================
POLYA
========================================= */
#fluentform_24 .ff-el-form-control {
padding: 12px 14px !important;
font-size: 14px !important;
line-height: 1.5 !important;
border-radius: 7px !important;
}
#fluentform_24 input.ff-el-form-control,
#fluentform_24 select.ff-el-form-control {
min-height: 48px !important;
}
#fluentform_24 textarea.ff-el-form-control {
min-height: 92px !important;
}
/* =========================================
KNOPKA
========================================= */
#fluentform_24 .ff-btn,
#fluentform_24 .ff-btn-submit,
#fluentform_24 button.ff-btn,
#fluentform_24 button[type="submit"],
#fluentform_24 input[type="submit"] {
min-height: 48px !important;
padding: 12px 18px !important;
font-size: 14px !important;
border-radius: 7px !important;
}
/* =========================================
GDPR - OTSTUP OT KNOPKI
========================================= */
#fluentform_24 .form-consent {
margin-top: 14px !important;
}
/* =========================================
GDPR - CHECKBOX + TEKST
========================================= */
#fluentform_24 .form-consent .ff-el-form-check-label {
gap: 8px !important;
}
/* Checkbox */
#fluentform_24 .form-consent input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
margin-top: 2px !important;
flex: 0 0 16px !important;
}
/* Tekst */
#fluentform_24 .form-consent .ff-el-form-check-label,
#fluentform_24 .form-consent .ff-el-form-check-label span,
#fluentform_24 .form-consent .ff-el-form-check-label p {
font-size: 12px !important;
line-height: 1.5 !important;
}
}
/* =========================
СТРАНИЦА ОТГРУЗКИ - КЕЙС
========================= */
.shipment-hero-content {
row-gap: 20px !important;
gap: 16px !important;
}
.shipment-hero-info {
width: 100%;
margin: 0;
padding: 0 0 0 16px;
box-sizing: border-box;
}
/* =========================
ZAGOLOVOK
========================= */
.shipment-hero-info h1,
.shipment-hero-info .wp-block-heading,
.shipment-hero-info .uagb-heading-text {
margin: 0 0 12px !important;
padding: 0 !important;
color: #0b1f3a !important;
font-family: Manrope, sans-serif !important;
font-size: 36px !important;
font-weight: 600 !important;
line-height: 1.12 !important;
text-align: left !important;
}
/* =========================
OPISANIE
========================= */
.shipment-hero-info p {
margin: 0 !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
}
/* =========================
KNOPKI
========================= */
.shipment-hero-primary .uagb-modal-button-link,
.shipment-hero-secondary .uagb-buttons-repeater {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px;
padding: 12px 20px !important;
border-radius: 4px !important;
font-family: Manrope, sans-serif !important;
font-size: 15px !important;
line-height: 1.2 !important;
text-decoration: none !important;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease !important;
margin-top: 16px !important;
}
/* Osnovnaya knopka */
.shipment-hero-primary .uagb-modal-button-link {
border: 1px solid #0f4c6e !important;
background: #0f4c6e !important;
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(15, 76, 110, 0.16);
}
.shipment-hero-primary .uagb-modal-button-link:hover {
border-color: #0c3f5c !important;
background: #0c3f5c !important;
color: #ffffff !important;
box-shadow: 0 8px 22px rgba(15, 76, 110, 0.22);
transform: translateY(-1px);
}
/* Vtorichnaya knopka */
.shipment-hero-secondary .uagb-buttons-repeater {
border: 1px solid #b9d1de !important;
background: transparent !important;
color: #0f4c6e !important;
box-shadow: none !important;
}
.shipment-hero-secondary .uagb-buttons-repeater:hover {
border-color: #0c3f5c !important;
background: transparent !important;
color: #0c3f5c !important;
box-shadow: 0 6px 16px rgba(15, 76, 110, 0.12) !important;
transform: translateY(-1px);
}
/* =========================
LOKATSIYA I GOD
========================= */
.project-meta {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 48px !important;
width: 100% !important;
max-width: 520px !important;
margin: 0 !important;
padding: 20px 0 0 !important;
border-top: 1px solid rgba(22, 59, 104, 0.18) !important;
box-sizing: border-box !important;
}
.project-meta > .project-meta-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ikonki */
.project-meta-item img,
.project-meta-item svg {
display: block !important;
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
margin: 0 !important;
object-fit: contain !important;
}
/* Tekst */
.project-meta-item p {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-family: Manrope, sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
white-space: nowrap !important;
}
/* =========================
IZOBRAZHENIE
========================= */
.shipment-hero-image,
.shipment-hero-image figure {
width: 100% !important;
margin: 0 !important;
}
.shipment-hero-image img {
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 10px !important;
}
/* =========================
PLANSHET
========================= */
@media (min-width: 768px) and (max-width: 1024px) {
.shipment-hero-info {
padding-left: 12px;
}
.shipment-hero-info h1,
.shipment-hero-info .wp-block-heading,
.shipment-hero-info .uagb-heading-text {
font-size: 32px !important;
}
.shipment-hero-info p {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* Knopki */
.shipment-hero-actions {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 16px !important;
margin: 16px 0 0 !important;
padding: 0 !important;
}
.shipment-hero-actions > .shipment-hero-primary,
.shipment-hero-actions > .shipment-hero-secondary {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.shipment-hero-primary .uagb-spectra-button-wrapper,
.shipment-hero-primary .wp-block-button,
.shipment-hero-secondary,
.shipment-hero-secondary .uagb-buttons__wrap,
.shipment-hero-secondary .wp-block-uagb-buttons-child,
.shipment-hero-secondary .uagb-button__wrapper,
.shipment-hero-secondary .wp-block-button {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.shipment-hero-primary .uagb-modal-button-link,
.shipment-hero-secondary .uagb-buttons-repeater {
width: 100% !important;
max-width: 100% !important;
min-height: 48px;
margin: 0 !important;
padding: 12px 16px !important;
box-sizing: border-box;
}
/* Lokatsiya i god */
.project-meta {
max-width: 460px !important;
gap: 32px !important;
margin-top: 28px !important;
padding-top: 18px !important;
}
.project-meta > .project-meta-item {
gap: 10px !important;
}
.project-meta-item img,
.project-meta-item svg {
flex-basis: 24px !important;
width: 24px !important;
height: 24px !important;
}
.project-meta-item p {
font-size: 15px !important;
}
}
/* =========================
MOBILNYY - DO 767 PX
========================= */
@media (max-width: 767px) {
/* Tekstovaya kolonka */
.shipment-hero-info {
width: 100%;
padding-left: 0;
}
.shipment-hero-info h1,
.shipment-hero-info .wp-block-heading,
.shipment-hero-info .uagb-heading-text {
margin-bottom: 10px !important;
font-size: 26px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
.shipment-hero-info p {
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Konteyner knopok */
.shipment-hero-actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 12px !important;
margin: 14px 0 0px !important;
padding: 0 !important;
}
/* Osnovnye bloki obeikh knopok */
.shipment-hero-actions > .shipment-hero-primary,
.shipment-hero-actions > .shipment-hero-secondary,
.shipment-hero-primary,
.shipment-hero-secondary {
display: block !important;
flex: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Vnutrennie obertki Spectra */
.shipment-hero-primary .uagb-spectra-button-wrapper,
.shipment-hero-primary .wp-block-button,
.shipment-hero-secondary .uagb-buttons__wrap,
.shipment-hero-secondary .wp-block-uagb-buttons-child,
.shipment-hero-secondary .uagb-button__wrapper,
.shipment-hero-secondary .wp-block-button {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sami knopki */
.shipment-hero-primary .uagb-modal-button-link,
.shipment-hero-secondary .uagb-buttons-repeater {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 46px;
margin: 0 !important;
padding: 11px 14px !important;
box-sizing: border-box;
font-size: 13px !important;
line-height: 1.3 !important;
text-align: center !important;
white-space: normal;
}
/* Lokatsiya i god */
.project-meta {
max-width: 100% !important;
flex-direction: column !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 14px !important;
margin-top: 24px !important;
margin-bottom: 0 !important;
padding-top: 14px !important;
padding-bottom: 0 !important;
}
.project-meta > .project-meta-item {
gap: 9px !important;
}
.project-meta-item img,
.project-meta-item svg {
flex-basis: 22px !important;
width: 22px !important;
height: 22px !important;
}
.project-meta-item p {
font-size: 14px !important;
}
/* Izobrazhenie */
.shipment-hero-media,
.shipment-hero-image {
margin-top: 8px !important;
}
}
/* =========================
OCHEN UZKIY MOBILNYY
========================= */
@media (max-width: 420px) {
.project-meta {
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
}
}
/* =========================
MOBILNYY V ALBOMNOY ORIENTATSII
========================= */
@media (max-width: 767px) and (orientation: landscape) {
.shipment-hero-actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 8px 12px !important;
}
.shipment-hero-primary,
.shipment-hero-secondary {
width: auto !important;
flex: 0 0 auto !important;
}
.shipment-hero-media {
width: 65% !important;
max-width: 520px !important;
align-self: flex-start !important;
}
.project-meta {
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 16px 24px !important;
}
}
/* ==================================================
KONTEYNER ZAGOLOVKA "FOTO OBORUDOVANIYA"
================================================== */
body .project-gallery-section {
width: 100% !important;
margin: 0 !important;
padding: 56px 0 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
align-self: flex-start !important;
}
/* ==================================================
ZAGOLOVOK "FOTO OBORUDOVANIYA"
================================================== */
body .project-gallery-title {
width: 100% !important;
margin: 0 !important;
padding: 0 0 0 16px !important;
color: #163b68 !important;
font-family: Manrope, sans-serif !important;
font-size: 30px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: left !important;
}
/* ==================================================
PLANSHET
================================================== */
@media (max-width: 1024px) {
body .project-gallery-section {
padding: 40px 0 16px !important;
}
body .project-gallery-title {
padding-left: 12px !important;
font-size: 26px !important;
}
}
/* ==================================================
MOBILNYY
================================================== */
@media (max-width: 767px) {
body .project-gallery-section {
padding: 0 0 4px !important;
}
body .project-gallery-title {
margin: 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-size: 22px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
}
/* ==================================================
GALEREYA OBORUDOVANIYA
Otdelnyi blok Image Gallery
================================================== */
body .equipment-gallery {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 28px 0 80px !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 0 0 100vmax #ffffff !important;
clip-path: inset(0 -100vmax) !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Sbrasyvaem ogranicheniya samogo bloka Spectra */
body .equipment-gallery > div {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Kazhdyi element galerei */
body .equipment-gallery figure {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Izobrazheniya */
body .equipment-gallery img {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
/* ==================================================
PLANSHET
================================================== */
@media (max-width: 1024px) {
body .equipment-gallery {
padding: 24px 0 28px !important;
}
}
/* ==================================================
MOBILNYY
================================================== */
@media (max-width: 767px) {
body .equipment-gallery {
padding: 20px 0 64px !important;
}
}
===============================================================
/* =========================================================
HERO — PREIMUSHCHESTVA PROEKTIROVANIYA
========================================================= */
.project-benefits-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: 32px !important;
row-gap: 24px !important;
align-items: start !important;
}
.project-benefit-item {
display: flex !important;
align-items: flex-start !important;
gap: 16px !important;
width: 100% !important;
min-width: 0 !important;
}
.project-benefit-icon {
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
.project-benefit-icon .wp-block-uagb-image,
.project-benefit-icon figure {
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
margin: 0 !important;
}
.project-benefit-icon img,
.project-benefit-icon svg {
display: block !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
object-fit: contain !important;
}
.project-benefit-content {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.project-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 24px !important;
row-gap: 24px !important;
}
.project-benefit-icon {
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
}
.project-benefit-icon .wp-block-uagb-image,
.project-benefit-icon figure,
.project-benefit-icon img,
.project-benefit-icon svg {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.project-benefits-grid {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 20px !important;
}
.project-benefit-item {
gap: 14px !important;
}
.project-benefit-icon {
flex: 0 0 36px !important;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
}
.project-benefit-icon .wp-block-uagb-image,
.project-benefit-icon figure,
.project-benefit-icon img,
.project-benefit-icon svg {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
}
}
/* =========================================================
GORIZONTALNYY TELEFON: 2 X 2
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
.project-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 24px !important;
row-gap: 24px !important;
}
}
/* =========================================================
INSTRUMENTY DLYA PROEKTIROVSHCHIKOV
========================================================= */
.designer-tool-card {
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 24px;
background: #ffffff;
border: 1px solid #dce4ea;
border-radius: 8px;
}
/* =========================================================
IKONKA KARTOCHKI INSTRUMENTA
========================================================= */
.designer-tool-icon {
flex: 0 0 48px;
width: 48px;
min-width: 48px;
max-width: 48px;
}
.designer-tool-icon .wp-block-uagb-image,
.designer-tool-icon figure {
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
margin: 0 !important;
}
.designer-tool-icon img {
display: block;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
object-fit: contain !important;
}
/* =========================================================
TEKSTOVAYA CHAST KARTOCHKI
========================================================= */
.designer-tool-content {
flex: 1 1 auto;
min-width: 0;
padding: 0 0 32px 0;
margin: 0;
}
/* ZAGOLOVOK */
.designer-tool-content .uagb-ifb-title {
margin: 0 0 10px !important;
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: #163b68;
}
/* OPISANIE */
.designer-tool-content .uagb-ifb-desc {
margin: 0 !important;
font-family: "Manrope", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #475569;
}
/* =========================================================
STRELKA KARTOCHKI
========================================================= */
.designer-tool-arrow {
position: static !important;
display: flex !important;
justify-content: flex-end;
width: 100%;
margin-top: auto !important;
padding: 0 !important;
line-height: 1 !important;
}
.designer-tool-arrow svg {
width: 18px !important;
height: 18px !important;
}
/* =========================================================
SPISOK USLUG
========================================================= */
.services-list .uagb-icon-list__source-wrap {
border-radius: 2px;
}
/* =========================================================
NORMATIVY
========================================================= */
.normative-list {
word-spacing: 4px;
}
/* =========================================================
PROEKTIROVANIE — FONOVYE SKHEMY
DESKTOP
========================================================= */
.services-projecting {
overflow: hidden;
}
.services-scheme {
position: relative;
min-height: 560px;
overflow: visible;
}
/* OSNOVNAYA SINYAYA SKHEMA */
.services-scheme::before {
content: "";
position: absolute;
width: 720px;
height: 450px;
top: 0;
left: -60px;
background-image:
url("https://gazkomsar.ru/wp-content/uploads/2026/08/shema-oborudovanie-fon.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.42;
pointer-events: none;
z-index: 2;
}
/* BOLSHAYA BLEDNAYA FONOVAYA SKHEMA */
.services-scheme::after {
content: "";
position: absolute;
width: 920px;
height: 650px;
top: -200px;
right: -320px;
background-image:
url("https://gazkomsar.ru/wp-content/uploads/2026/08/shema-oborudovanie-fon.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.10;
filter: blur(1px);
pointer-events: none;
z-index: 1;
}
/* ====================================
PROEKTIROVANIE — SKHEMY
MOBILNYY
==================================== */
@media (max-width: 767px) {
.services-projecting {
padding-bottom: 0 !important;
}
.services-projecting > .uagb-container-inner-blocks-wrap {
row-gap: 0 !important;
}
.services-scheme {
height: 230px !important;
min-height: 230px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* OSNOVNAYA SINYAYA SKHEMA */
.services-scheme::before {
width: 340px;
height: 220px;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0.42;
}
/* BLEDNAYA FONOVAYA SKHEMA */
.services-scheme::after {
width: 420px;
height: 280px;
top: -40px;
left: 50%;
right: auto;
transform: translateX(-50%);
opacity: 0.07;
filter: blur(1px);
}
}
/* =========================================================
GORIZONTALNYY TELEFON
SKRYVAEM SKHEMU
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
.services-scheme {
display: none !important;
}
}
/* =========================================================
HERO — PREIMUSHCHESTVA
GORIZONTALNYY TELEFON: 2 X 2
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
.project-benefits-grid {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
column-gap: 24px !important;
row-gap: 24px !important;
align-items: start !important;
}
.project-benefit-item {
width: 100% !important;
min-width: 0 !important;
}
}
/* =========================================================
OSNOVNYE TIPY OBORUDOVANIYA
GORIZONTALNYY TELEFON: 2 X 2
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
.equipment-types-grid.uagb-layout-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 16px !important;
align-items: stretch !important;
}
.equipment-types-grid.uagb-layout-grid
> .wp-block-uagb-container {
width: 100% !important;
min-width: 0 !important;
}
}
==================================================================
/* =========================================================
POPUP MAKER — ЗАКАЗАТЬ ЗВОНОК
Popup ID: 2882
========================================================= */
/* =========================================
САМО ОКНО
========================================= */
#popmake-2882 {
width: 680px !important;
max-width: calc(100vw - 48px) !important;
padding: 0 !important;
background: #ffffff !important;
border: none !important;
border-radius: 8px !important;
box-shadow:
0 18px 50px rgba(15, 76, 110, 0.16) !important;
box-sizing: border-box !important;
}
/* =========================================
ВНУТРЕННИЙ КОНТЕНТ
========================================= */
#popmake-2882 .callback-popup-content {
width: 100% !important;
margin: 0 !important;
padding-top: 36px !important;
padding-right: 40px !important;
padding-bottom: 36px !important;
padding-left: 40px !important;
box-sizing: border-box !important;
}
/* =========================================
H2
========================================= */
#popmake-2882 .callback-popup-title {
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 12px !important;
margin-left: 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-family: "Manrope", sans-serif !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
text-align: center !important;
}
/* =========================================
ПОДЗАГОЛОВОК
========================================= */
#popmake-2882 .callback-popup-text {
max-width: 520px !important;
margin-top: 0 !important;
margin-right: auto !important;
margin-bottom: 24px !important;
margin-left: auto !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-align: center !important;
}
/* =========================================
КОНТЕЙНЕР ФОРМЫ
Fluent Form здесь НЕ стилизуем.
========================================= */
#popmake-2882 .callback-popup-form {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================
УБИРАЕМ ЛИШНИЕ P,
КОТОРЫЕ МОЖЕТ ДОБАВИТЬ WORDPRESS
========================================= */
#popmake-2882 .callback-popup-content > p:empty {
display: none !important;
}
/* =========================================
КНОПКА ЗАКРЫТИЯ
========================================= */
#popmake-2882 .pum-close {
top: 14px !important;
right: 14px !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
color: #163b68 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
font-family: Arial, sans-serif !important;
font-size: 26px !important;
font-weight: 300 !important;
line-height: 34px !important;
text-align: center !important;
opacity: 0.8 !important;
transition:
color 0.2s ease,
opacity 0.2s ease,
background-color 0.2s ease !important;
}
/* Hover крестика */
#popmake-2882 .pum-close:hover {
color: #0f4c6e !important;
background: rgba(15, 76, 110, 0.06) !important;
opacity: 1 !important;
}
/* =========================================================
ПЛАНШЕТ
768–1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
#popmake-2882 {
width: 90vw !important;
max-width: 680px !important;
border-radius: 14px !important;
}
#popmake-2882 .callback-popup-content {
padding-top: 32px !important;
padding-right: 32px !important;
padding-bottom: 32px !important;
padding-left: 32px !important;
}
#popmake-2882 .callback-popup-title {
margin-bottom: 10px !important;
font-size: 26px !important;
}
#popmake-2882 .callback-popup-text {
margin-bottom: 22px !important;
font-size: 15px !important;
}
}
/* =========================================================
МОБИЛЬНЫЙ
≤ 767px
========================================================= */
@media (max-width: 767px) {
#popmake-2882 {
width: calc(100vw - 32px) !important;
max-width: none !important;
border-radius: 12px !important;
box-shadow:
0 12px 32px rgba(15, 76, 110, 0.14) !important;
}
/* Контент */
#popmake-2882 .callback-popup-content {
padding-top: 28px !important;
padding-right: 20px !important;
padding-bottom: 24px !important;
padding-left: 20px !important;
}
/* H2 */
#popmake-2882 .callback-popup-title {
margin-bottom: 6px !important;
font-size: 22px !important;
line-height: 1.3 !important;
}
/* Подзаголовок */
#popmake-2882 .callback-popup-text {
max-width: none !important;
margin-bottom: 18px !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* Крестик */
#popmake-2882 .pum-close {
top: 8px !important;
right: 8px !important;
width: 32px !important;
height: 32px !important;
font-size: 24px !important;
line-height: 32px !important;
}
}
/* =========================================================
MODAL — ZAYAVKA NA OBORUDOVANIE
Universalnaya versiya dlya vsekh stranits
========================================================= */
/* =========================================================
1. NORMALIZATSIYA OBERTOK SPECTRA MODAL
Nuzhna potomu, chto raznye ekzemplyary Modal mogut imet
sobstvennye padding / margin / gap, dazhe esli vnutrenniy
Container byl skopirovan.
========================================================= */
.uagb-modal-popup:has(.equipment-request-modal),
.uagb-modal-popup-wrap:has(.equipment-request-modal),
.uagb-modal-popup-content:has(.equipment-request-modal) {
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
row-gap: 0 !important;
box-sizing: border-box !important;
}
/* Vneshnyuyu "kartochku" Spectra delaem prozrachnoy */
.uagb-modal-popup-content:has(.equipment-request-modal) {
background: transparent !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: none !important;
}
/* =========================================================
2. OSNOVNAYA BELAYA KARTOCHKA MODAL
class: equipment-request-modal
========================================================= */
.equipment-request-modal {
width: 100% !important;
margin: 0 !important;
padding:
36px
40px
36px
40px !important;
gap: 0 !important;
row-gap: 0 !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow:
0 18px 48px rgba(15, 76, 110, 0.12) !important;
box-sizing: border-box !important;
}
/* =========================================================
3. ZAGOLOVOK
Podderzhivaem dva varianta:
1. starye stranitsy:
.equipment-request-modal-title
2. novye / skopirovannye modalki:
pervyy pryamoy vnutri konteinera
========================================================= */
.equipment-request-modal-title,
.equipment-request-modal > p:first-of-type {
margin: 0 0 8px 0 !important;
padding: 0 !important;
color: #163b68 !important;
font-family: "Manrope", sans-serif !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
text-align: center !important;
}
/* =========================================================
4. PODZAGOLOVOK
Analogichno podderzhivaem staryy klass
i vtoroy pryamoy
.
========================================================= */
.equipment-request-modal-text,
.equipment-request-modal > p:nth-of-type(2) {
max-width: 560px !important;
margin:
0
auto
20px
auto !important;
padding: 0 !important;
color: #64748b !important;
font-family: "Manrope", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-align: center !important;
}
/* =========================================================
5. KONTEYNER FORMY
class: equipment-request-modal-form
========================================================= */
.equipment-request-modal-form {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Ubiraem vozmozhnyy verkhniy margin
u pervogo elementa formy */
.equipment-request-modal-form > *:first-child {
margin-top: 0 !important;
}
/* =========================================================
6. PLANSHET
768-1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.equipment-request-modal {
padding:
28px
32px
32px
32px !important;
border-radius: 12px !important;
}
.equipment-request-modal-title,
.equipment-request-modal > p:first-of-type {
margin-bottom: 8px !important;
font-size: 26px !important;
line-height: 1.3 !important;
}
.equipment-request-modal-text,
.equipment-request-modal > p:nth-of-type(2) {
max-width: 500px !important;
margin-bottom: 18px !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
7. MOBILNYY
<= 767px
========================================================= */
@media (max-width: 767px) {
.equipment-request-modal {
width: 100% !important;
margin: 0 !important;
padding:
24px
20px
24px
20px !important;
gap: 0 !important;
row-gap: 0 !important;
border-radius: 10px !important;
box-shadow:
0 12px 32px rgba(15, 76, 110, 0.12) !important;
}
.equipment-request-modal-title,
.equipment-request-modal > p:first-of-type {
margin:
0
0
8px
0 !important;
padding: 0 !important;
font-size: 22px !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
}
.equipment-request-modal-text,
.equipment-request-modal > p:nth-of-type(2) {
max-width: none !important;
margin:
0
auto
16px
auto !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
}
==========================================================