/* ============================================================ CRITICAL CSS — стили для первого экрана Загружается синхронно в , остальное — асинхронно ============================================================ */ /* ----- 1. Базовые сбросы (из normalize.min.css) ----- */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } a { background-color: transparent; } a:active, a:hover { outline: 0; } b, strong { font-weight: 700; } img { border: 0; max-width: 100%; height: auto; } svg:not(:root) { overflow: hidden; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ----- 2. Базовые стили страницы (из main.css) ----- */ html { color: #222; font-size: 1em; line-height: 1.4; } body { min-width: 320px; font-family: 'FiraSans'; font-size: 16px; color: #14182e; background: #f8f8f8; } a, a:visited, a:hover, a:active { outline: none; } a { color: #0c29ca; } a:hover { text-decoration: none; } img { max-width: 100%; height: auto; } ul { padding: 0; margin: 0; list-style: none; } p { margin: 0 0 20px 0; } strong { font-weight: normal; font-family: 'FiraSansBold'; } h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; line-height: 1.2; font-family: 'FiraSansBold'; font-weight: normal; } h1 { font-size: 36px; font-family: 'FiraSansBlack'; } .dt { display: table; width: 100%; } .dtc { display: table-cell; vertical-align: middle; } .dtc.vat { vertical-align: top; } .dtc.vab { vertical-align: bottom; } /* ----- 3. Шрифты (только используемые на первом экране) ----- */ @font-face { font-display: swap; font-family: 'FiraSans'; src: url('../css/fonts/FiraSans.woff2') format('woff2'), url('../css/fonts/FiraSans.woff') format('woff'); } @font-face { font-display: swap; font-family: 'FiraSansBlack'; src: url('../css/fonts/FiraSansBlack.woff2') format('woff2'), url('../css/fonts/FiraSansBlack.woff') format('woff'); } @font-face { font-display: swap; font-family: 'FiraSansBold'; src: url('../css/fonts/FiraSansBold.woff2') format('woff2'), url('../css/fonts/FiraSansBold.woff') format('woff'); } @font-face { font-display: swap; font-family: 'FiraSansExtraBold'; src: url('../css/fonts/FiraSansExtraBold.woff2') format('woff2'), url('../css/fonts/FiraSansExtraBold.woff') format('woff'); } @font-face { font-display: swap; font-family: 'FiraSansSemiBold'; src: url('../css/fonts/FiraSansSemiBold.woff2') format('woff2'), url('../css/fonts/FiraSansSemiBold.woff') format('woff'); } @font-face { font-display: swap; font-family: 'FiraSansMedium'; src: url('../css/fonts/FiraSansMedium.woff2') format('woff2'), url('../css/fonts/FiraSansMedium.woff') format('woff'); } /* ----- 4. Стили шапки (#top) из dopmain.css и main.css ----- */ #top { padding: 12px 0; } .home #top { margin-bottom: 45px; } .dt-header { display: flex; width: 100%; align-items: center; justify-content: space-between; } .dt-header .head_social { width: fit-content; font-size: 12px; display: flex; flex-direction: column; align-items: center; } .dt-header .head_social a { margin-left: 0; color: #5a5a5b; font-size: 20px; font-weight: bold; } .dt-header .head_social .fa-vk:hover { color: #3079e7; } .dt-header .head_social .fa-telegram-plane:hover { color: #019be5; } .dt-header .main_nav_top { position: relative; z-index: 2; padding: 0; background: inherit; border-bottom: none; } .menupc111 { width: fit-content; } .menupc111 ul { display: flex; } .dt-header .main_nav_top ul li a { padding: 5px; font-size: 17px; height: auto; border-radius: 6px; line-height: 22px; margin-right: 5px; text-decoration: none; color: #14182e; font-family: 'FiraSansMedium'; display: inline-block; border: 2px solid transparent; border-radius: 25px; padding: 0 13px; box-sizing: border-box; transition: all 0.3s linear 0s; } .dt-header .main_nav_top ul li a:hover { color: #1da9dc; border-color: #1da9dc; } .dt-header .head_phone { text-align: center; } .dt-header .head_phone a { text-decoration: none; color: #2e2e2f; font-size: 16px; font-family: 'FiraSansBlack'; } .dt-header .head_phone.head_phonemail { width: fit-content; } .head_phonemail a { font-size: 16px; margin-top: 15px; white-space: nowrap; display: block; color: #2e2e2f; text-decoration: none; } .pgonesandbut { display: flex; flex-direction: column; gap: 6px; } .pgonesandbut > span { color: #5a5a5b; font-size: 12px; } .pgonesandbut-headerright { display: flex; align-items: center; gap: 20px; } .main_nav_order .button { font-size: 14px; font-family: 'FiraSansMedium'; display: block; text-align: center; padding: 0 15px; width: 100%; box-sizing: border-box; max-width: 150px; height: 32px; line-height: 32px; border: none; color: #fff; text-decoration: none; background: #307cfe; background: -moz-linear-gradient(left, #307cfe 0%, #12aef6 100%); background: -webkit-linear-gradient(left, #307cfe 0%, #12aef6 100%); background: linear-gradient(to right, #307cfe 0%, #12aef6 100%); border-radius: 40px; box-shadow: 0 10px 30px rgba(0,36,138,0.22); box-sizing: border-box; } .main_nav_order .button:hover { background: #12aef6; background: -moz-linear-gradient(left, #12aef6 0%, #307cfe 100%); background: -webkit-linear-gradient(left, #12aef6 0%, #307cfe 100%); background: linear-gradient(to right, #12aef6 0%, #307cfe 100%); } .listead_social { display: flex; gap: 10px; } .listead_social a { display: flex; text-decoration: none; } .listead_social a svg { height: 20px!important; width: auto; } .listead_social a:hover path { fill: #307cfe; } .head_phone a { text-decoration: none; color: #2e2e2f; font-size: 16px; font-family: 'FiraSansBlack'; } .topheadernevfixed { padding: 10px 0; transition: 0.3s; position: fixed; top: 0; width: 100%; left: 0; z-index: 99; opacity: 1; } .head_logo.helogsubtitle { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: #000; letter-spacing: 0px; align-items: center; text-decoration: none; justify-content: center; gap: 3px; font-family: 'FiraSansBold'; } .head_logo.helogsubtitle a { display: block; } .stickyww { background: #fff; transition: 0.3s; } .header-phone-subtitle { position: relative; padding-left: 20px; font-weight: bold; color: #333; } .header-phone-subtitle:before { content: ''; position: absolute; top: 5px; left: 2px; width: 6px; height: 6px; background: #009733; border-radius: 7px; animation: move 2s infinite linear; } @keyframes move { 0% { box-shadow: 0 0 0px 0px #009733; } 50% { box-shadow: 0 0 3px 2px #009733; } 100% { box-shadow: 0 0 0px 0px #009733; } } /* Для мобильного меню (кнопка) */ .mobile_top_menu_wrap { font-size: 22px; display: none; position: fixed; right: 15px; top: 25px; z-index: 1500; } .mobile_top_menu_wrap .fa { cursor: pointer; color: #14182e; } /* ----- 5. Стили главного баннера (из dopmain.css) ----- */ .fiscr140wrapper { padding-top: 224px; padding-bottom: 270px; } .fiscr140 { max-width: 645px; } .fiscr17h1 { margin-top: 0; margin-bottom: 30px; font-style: normal; font-weight: 900; font-size: 36px; line-height: 43px; color: #14182E; } .twobutscr17 { display: flex; gap: 30px; } .but17 { display: flex; text-decoration: none; cursor: pointer; justify-content: center; align-items: center; font-style: normal; font-weight: 700; font-size: 18px; line-height: 22px; color: #FFFFFF; padding: 21.5px 55px; transition: 0.3s; background: linear-gradient(90deg, #307CFE 0%, #12AEF6 100%); box-shadow: 0px 10px 30px rgba(0, 36, 138, 0.22); border-radius: 40px; } .but17:hover { background: #12aef6; background: -moz-linear-gradient(left, #12aef6 0%, #307cfe 100%); background: -webkit-linear-gradient(left, #12aef6 0%, #307cfe 100%); background: linear-gradient(to right, #12aef6 0%, #307cfe 100%); transition: 0.3s; } .fibl { font-family: 'FiraSansBlack'; } .fibol { font-family: 'FiraSansBold'; } .fiscr17-price span { padding: 2px; display: inline-block; background: #FFF0BC; } .fiscr-mtplash-wrp { margin-top: -128px; } .fiscr-mtplash { display: flex; gap: 24px; } .mt80 { margin-top: 80px; } .mb80 { margin-bottom: 80px; } .fiscr-mtplash-item { width: calc((100% - 72px) / 4); box-sizing: border-box; padding: 30px 35px; position: relative; background: #FFFFFF; border-left: 1px solid #E7E7E7; box-shadow: -12px 6px 76px rgba(216, 216, 216, 0.55); border-radius: 20px; } .fiscr-mtplash-yand { width: calc((100% - 72px) / 4); box-sizing: border-box; padding: 22px 32px; background: rgba(255, 255, 255, 0.86); border-radius: 16px; position: relative; } .fiscr-mtplash-yandli { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fiscr-mtplash-icon { display: flex; justify-content: center; margin-bottom: 10px; height: 64px; } .fiscr-mtplash-icon img { width: 64px; } .fiscr-mtplash-text { font-style: normal; font-weight: 700; font-size: 18px; line-height: 22px; text-align: center; color: #14182E; } .fiscr-mtplash-text1 { font-style: normal; font-weight: 700; font-size: 18px; line-height: 22px; color: #000; } .fiscr-mtplash-st { margin-bottom: 10px; margin-top: 15px; display: flex; } .fiscr-mtplash-st img { width: 182px; } .fiscr-mtplash-item, .fiscr-mtplash-icon, .fiscr-mtplash-text { transition: 0.3s; } .fiscr-mtplash-item:hover { background: #307CFE; transition: 0.3s; } .fiscr-mtplash-item:hover .fiscr-mtplash-icon { transition: 0.3s; filter: grayscale(1) brightness(1000%); } .fiscr-mtplash-item:hover .fiscr-mtplash-text { transition: 0.3s; color: #fff; } .yanlogos { display: flex; width: 100%; max-width: 180px; } .yanlogos img { width: 100%; } /* ----- 6. Базовые стили контейнеров (из dopmain.css) ----- */ .wrp { width: 1140px; margin-left: auto; margin-right: auto; } .secttitle16 { margin-top: 0; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px; color: #14182E; } .secttitle16 span { font-style: normal; font-weight: 700; font-size: 32px; line-height: 36px; color: #14182E; padding: 4px 14px; display: inline; background: #FFF0BC; } .mt80 { margin-top: 80px; } .mb80 { margin-bottom: 80px; } .mb50 { margin-bottom: 50px; } /* ----- 7. Адаптив для мобильных (только критичные стили) ----- */ @media(max-width: 990px) { .wrp { max-width: 750px; width: auto; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .fiscr140wrapper { padding-top: 160px; padding-bottom: 160px; } .fiscr17h1 { font-size: 26px; line-height: 130%; } .fiscr-mtplash { flex-wrap: wrap; } .fiscr-mtplash-yand, .fiscr-mtplash-item { width: calc(50% - 10px); } } @media(max-width: 650px) { .fiscr140wrapper { padding-top: 50px; padding-bottom: 160px; } .fiscr17h1 { font-size: 22px; line-height: 130%; } .but17 { font-size: 14px; line-height: 130%; padding: 10px 14px; } .twobutscr17 { gap: 10px; flex-direction: column; } .fiscr-mtplash-icon { height: 35px; } .fiscr-mtplash-icon img { width: 34px; } .fiscr-mtplash-text { font-size: 12px; line-height: 120%; } .fiscr-mtplash-item, .fiscr-mtplash-yand { padding: 15px; border-radius: 10px; } .fiscr-mtplash-st img { width: 91px; } .fiscr-mtplash-text1 { font-size: 12px; line-height: 120%; } .mt80 { margin-top: 40px; } .mb80 { margin-bottom: 40px; } .secttitle16 { font-size: 22px; line-height: 120%; } .secttitle16 span { font-size: 24px; line-height: 120%; padding: 4px; } .secttitle16.mb50 { margin-bottom: 25px; } } @media(max-width: 479px) { .home #header, .page-template-template-services #header, .inerpageheader { padding-top: 0; } } /* ----- 8. Дополнительные стили для мобильного меню ----- */ @media(max-width: 650px) { .mobile_fixed_menu > ul > li > a, .mobile_fixed_menu > ul > li:last-child > a, .hasvhildmenuinmobile-title { color: #fff; font-size: 18px; font-family: 'FiraSansBold'; } }