:root {
--color-dark: #101820;
--color-graphite: #1F2933;
--color-bg: #F6F8FA;
--color-white: #FFFFFF;
--color-heat: #F97316;
--color-water: #0284C7;
--color-electric: #FACC15;
--color-green: #16A34A;
--color-red: #DC2626;
--color-border: #E5E7EB;
--color-text: #111827;
--color-muted: #4B5563;
--shadow: 0 18px 50px rgba(16, 24, 32, 0.12);
--radius: 20px;
--container: 1220px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Inter, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
}
img,
svg,
iframe {
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
h1,
h2,
h3 {
font-family: Manrope, Arial, sans-serif;
line-height: 1.12;
margin: 0 0 18px;
color: var(--color-text);
letter-spacing: 0;
}
h1 {
font-size: 56px;
}
h2 {
font-size: 38px;
}
h3 {
font-size: 22px;
}
p {
margin: 0 0 18px;
color: var(--color-muted);
}
ul {
margin: 0;
padding: 0;
}
.container {
width: min(100% - 40px, var(--container));
margin: 0 auto;
}
.narrow {
max-width: 860px;
}
.section {
padding: 86px 0;
background: var(--color-white);
}
.section--muted {
background: var(--color-bg);
}
.section--dark {
background: var(--color-dark);
color: var(--color-white);
}
.section--dark h2,
.section--dark p,
.section--dark .eyebrow {
color: var(--color-white);
}
.section-title {
max-width: 760px;
margin-bottom: 34px;
}
.section-title p {
font-size: 18px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: var(--color-water);
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0;
}
.button,
.button:visited,
button.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 22px;
border-radius: 12px;
border: 1px solid var(--color-heat);
background: var(--color-heat);
color: var(--color-white);
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(249, 115, 22, 0.24);
}
.button--secondary {
background: var(--color-water);
border-color: var(--color-water);
}
.button--outline {
background: var(--color-white);
color: var(--color-dark);
border-color: var(--color-border);
}
.button--light {
border-color: #FFFFFF;
background: #FFFFFF;
color: #0B56D9;
}
.button--ghost {
background: transparent;
color: var(--color-dark);
border-color: rgba(16, 24, 32, 0.18);
}
.button--small {
min-height: 40px;
padding: 9px 15px;
border-radius: 10px;
font-size: 14px;
}
.button--full {
width: 100%;
}
.text-link {
font-weight: 800;
color: var(--color-water);
}
.screen-reader-text,
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
width: auto;
height: auto;
margin: 12px;
padding: 10px 14px;
clip: auto;
z-index: 1000;
background: var(--color-white);
}
.topbar {
background: var(--color-dark);
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
}
.topbar__inner {
min-height: 38px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid var(--color-border);
backdrop-filter: blur(12px);
}
.site-header__inner {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: Manrope, Arial, sans-serif;
font-weight: 800;
color: var(--color-dark);
flex: 0 0 auto;
}
.brand__mark {
display: grid;
grid-template-columns: repeat(3, 10px);
gap: 4px;
width: 46px;
height: 46px;
align-items: end;
justify-content: center;
padding: 9px;
border-radius: 14px;
background: var(--color-dark);
}
.brand__mark span {
display: block;
border-radius: 8px;
}
.brand__heat {
height: 24px;
background: var(--color-heat);
}
.brand__water {
height: 30px;
background: var(--color-water);
}
.brand__electric {
height: 18px;
background: var(--color-electric);
}
.brand__text {
max-width: 170px;
line-height: 1.12;
}
.primary-nav__list,
.footer-menu,
.mobile-menu__list {
list-style: none;
display: flex;
align-items: center;
gap: 22px;
}
.primary-nav a,
.footer-menu a {
color: var(--color-graphite);
font-weight: 700;
}
.site-header__actions {
display: flex;
align-items: center;
gap: 12px;
}
.header-phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
color: var(--color-dark);
}
.header-phone svg,
.icon-button svg,
.feature-item svg,
.trust-card svg,
.sticky-mobile-cta svg,
.contact-panel svg,
.service-mini-card svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-button {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-white);
color: var(--color-dark);
cursor: pointer;
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(16, 24, 32, 0.55);
}
.mobile-menu__panel {
margin-left: auto;
width: min(88vw, 380px);
height: 100%;
background: var(--color-white);
padding: 24px;
overflow-y: auto;
}
.mobile-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}
.mobile-menu__title {
font-family: Manrope, Arial, sans-serif;
font-size: 24px;
font-weight: 800;
}
.mobile-menu__list {
display: grid;
align-items: stretch;
gap: 10px;
}
.mobile-menu__list a {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
font-weight: 800;
}
.mobile-menu__cta {
display: grid;
gap: 10px;
margin-top: 24px;
}
.emergency-banner {
background: var(--color-red);
color: var(--color-white);
}
.emergency-banner__inner {
min-height: 44px;
display: flex;
align-items: center;
gap: 18px;
font-size: 15px;
}
.emergency-banner a {
margin-left: auto;
font-weight: 800;
text-decoration: underline;
}
.hero {
padding: 72px 0 88px;
background:
linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(249, 115, 22, 0.09)),
var(--color-bg);
}
.hero__grid,
.service-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.78fr);
gap: 44px;
align-items: center;
}
.hero__lead,
.service-hero__lead {
font-size: 20px;
max-width: 720px;
}
.hero__benefits {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 26px 0 30px;
}
.hero__benefits span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-white);
font-weight: 700;
}
.hero__benefits svg {
width: 16px;
height: 16px;
stroke: var(--color-green);
fill: none;
stroke-width: 3;
}
.hero__actions,
.section-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero__form-card,
.service-hero__form,
.contact-page__form {
position: relative;
padding: 28px;
border-radius: var(--radius);
background: var(--color-white);
box-shadow: var(--shadow);
border: 1px solid rgba(16, 24, 32, 0.08);
}
.hero__form-card h2,
.service-hero__form h2,
.contact-page__form h2 {
font-size: 26px;
}
.hero__scheme {
position: relative;
height: 128px;
margin-bottom: 24px;
border-radius: 18px;
background:
linear-gradient(90deg, rgba(16, 24, 32, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(16, 24, 32, 0.05) 1px, transparent 1px),
#F9FAFB;
background-size: 28px 28px;
overflow: hidden;
}
.scheme-node {
position: absolute;
width: 42px;
height: 42px;
border-radius: 14px;
border: 3px solid var(--color-white);
box-shadow: 0 10px 28px rgba(16, 24, 32, 0.18);
}
.scheme-node--heat {
background: var(--color-heat);
left: 32px;
top: 28px;
}
.scheme-node--water {
background: var(--color-water);
right: 48px;
top: 34px;
}
.scheme-node--electric {
background: var(--color-electric);
left: 50%;
bottom: 22px;
}
.scheme-line {
position: absolute;
height: 3px;
background: var(--color-graphite);
opacity: 0.28;
transform-origin: left center;
}
.scheme-line--a {
left: 72px;
top: 52px;
width: 160px;
transform: rotate(12deg);
}
.scheme-line--b {
right: 84px;
top: 62px;
width: 132px;
transform: rotate(148deg);
}
.scheme-line--c {
left: 46%;
bottom: 48px;
width: 160px;
transform: rotate(-18deg);
}
.lead-form {
display: grid;
gap: 14px;
}
.lead-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.lead-form--compact .lead-form__grid {
grid-template-columns: 1fr;
}
.lead-form label {
display: grid;
gap: 7px;
color: var(--color-graphite);
font-weight: 700;
}
.lead-form span {
font-size: 14px;
}
.lead-form input,
.lead-form select,
.lead-form textarea {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-white);
color: var(--color-text);
padding: 12px 14px;
min-height: 48px;
}
.lead-form textarea {
resize: vertical;
}
.lead-form__consent {
grid-template-columns: 20px 1fr;
align-items: start;
gap: 10px;
font-size: 13px;
}
.lead-form__consent input {
min-height: 20px;
margin-top: 3px;
}
.lead-form__consent a {
color: var(--color-water);
text-decoration: underline;
}
.lead-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-message {
padding: 12px 14px;
border-radius: 12px;
font-weight: 700;
}
.form-message--success {
background: rgba(22, 163, 74, 0.12);
color: #166534;
}
.form-message--error {
background: rgba(220, 38, 38, 0.1);
color: #991B1B;
}
.service-card-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}
.service-card,
.object-card,
.problem-card,
.step-card,
.content-card,
.portfolio-card,
.review-card,
.trust-card,
.notice,
.empty-state,
.contact-panel,
.service-mini-card {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
}
.service-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 22px;
}
.service-card__icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
margin-bottom: 18px;
color: var(--color-dark);
background: var(--color-bg);
}
.service-card__icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.service-card--bolt .service-card__icon,
.service-card--electric .service-card__icon {
background: rgba(250, 204, 21, 0.22);
}
.service-card--water .service-card__icon {
background: rgba(2, 132, 199, 0.12);
color: var(--color-water);
}
.service-card--heat .service-card__icon {
background: rgba(249, 115, 22, 0.14);
color: var(--color-heat);
}
.service-card ul,
.clean-list {
display: grid;
gap: 9px;
list-style: none;
}
.service-card li,
.clean-list li {
position: relative;
padding-left: 18px;
color: var(--color-muted);
}
.service-card li::before,
.clean-list li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 6px;
height: 6px;
border-radius: 99px;
background: var(--color-water);
}
.service-card__actions {
margin-top: auto;
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.object-grid,
.problem-grid,
.trust-grid,
.feature-list,
.portfolio-grid,
.review-grid,
.card-grid--related,
.content-list {
display: grid;
gap: 18px;
}
.object-grid,
.problem-grid,
.portfolio-grid,
.review-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trust-grid,
.feature-list,
.card-grid--related,
.content-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.object-card,
.problem-card,
.content-card,
.portfolio-card,
.review-card,
.empty-state {
padding: 24px;
}
.object-card span {
display: inline-flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--color-dark);
color: var(--color-white);
margin-bottom: 14px;
}
.object-card svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.steps {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
}
.step-card {
padding: 20px;
}
.step-card span {
display: inline-flex;
margin-bottom: 12px;
color: var(--color-water);
font-weight: 800;
}
.process-notes,
.two-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.process-notes {
margin-top: 24px;
}
.process-notes article,
.two-columns > article {
padding: 24px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
}
.two-columns--mt {
margin-top: 24px;
}
.price-tabs__nav {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.price-tabs__nav button {
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-white);
padding: 10px 16px;
font-weight: 800;
cursor: pointer;
}
.price-tabs__nav button.is-active {
background: var(--color-dark);
color: var(--color-white);
border-color: var(--color-dark);
}
.price-tabs__panel {
display: none;
}
.price-tabs__panel.is-active {
display: block;
}
.price-table-wrap {
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
}
.price-table-wrap h3 {
padding: 20px 20px 0;
}
.price-table {
width: 100%;
border-collapse: collapse;
min-width: 680px;
}
.price-table th,
.price-table td {
padding: 16px 18px;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}
.price-table th {
color: var(--color-graphite);
background: #F9FAFB;
font-weight: 800;
}
.section-actions {
margin-top: 22px;
}
.home-estimate {
padding-top: 76px;
padding-bottom: 76px;
}
.estimate-calculator {
border: 1px solid rgba(2, 132, 199, 0.14);
border-radius: 24px;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
box-shadow: var(--shadow);
overflow: hidden;
}
.estimate-calculator__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: start;
padding: 34px;
border-bottom: 1px solid var(--color-border);
}
.estimate-calculator__header h2 {
margin-bottom: 12px;
}
.estimate-calculator__header p {
max-width: 790px;
margin-bottom: 0;
font-size: 17px;
}
.estimate-calculator__badge {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 250px;
padding: 14px 16px;
border: 1px solid rgba(2, 132, 199, 0.18);
border-radius: 16px;
background: #EFF6FF;
color: var(--color-dark);
font-weight: 800;
line-height: 1.35;
}
.estimate-calculator__badge svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
color: #0B56D9;
}
.estimate-calculator__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
gap: 24px;
padding: 28px;
}
.estimate-calculator__tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.estimate-calculator__tabs button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 10px 15px;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-white);
color: var(--color-dark);
font-weight: 800;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.estimate-calculator__tabs button svg {
width: 20px;
height: 20px;
color: #0B56D9;
}
.estimate-calculator__tabs button.is-active {
background: #0B56D9;
border-color: #0B56D9;
color: var(--color-white);
box-shadow: 0 14px 32px rgba(11, 86, 217, 0.24);
}
.estimate-calculator__tabs button.is-active svg {
color: var(--color-white);
}
.estimate-calculator__panel {
display: grid;
gap: 12px;
}
.estimate-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 145px 96px;
gap: 16px;
align-items: center;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-white);
}
.estimate-item--request {
background: #FFF7ED;
border-color: rgba(249, 115, 22, 0.24);
}
.estimate-item.is-selected {
border-color: rgba(11, 86, 217, 0.62);
box-shadow: 0 14px 30px rgba(11, 86, 217, 0.12);
}
.estimate-item--request.is-selected {
border-color: rgba(249, 115, 22, 0.55);
box-shadow: 0 14px 30px rgba(249, 115, 22, 0.12);
}
.estimate-item__main {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
cursor: pointer;
}
.estimate-item__main input {
width: 20px;
height: 20px;
margin-top: 3px;
flex: 0 0 auto;
accent-color: #0B56D9;
}
.estimate-item__main strong {
display: block;
color: var(--color-dark);
font-size: 16px;
line-height: 1.35;
}
.estimate-item__main small {
display: block;
margin-top: 4px;
color: var(--color-muted);
line-height: 1.4;
}
.estimate-item__price strong {
display: block;
color: var(--color-dark);
font-weight: 900;
line-height: 1.25;
}
.estimate-item__price span {
display: block;
margin-top: 3px;
color: var(--color-muted);
font-size: 13px;
}
.estimate-item__qty {
display: grid;
gap: 6px;
}
.estimate-item__qty span {
color: var(--color-muted);
font-size: 12px;
font-weight: 800;
}
.estimate-item__qty input {
width: 100%;
min-height: 42px;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 8px 10px;
color: var(--color-dark);
font-weight: 800;
}
.estimate-item__qty input:disabled {
background: #F3F4F6;
color: #9CA3AF;
}
.estimate-summary {
position: sticky;
top: 18px;
align-self: start;
padding: 24px;
border-radius: 20px;
background: linear-gradient(145deg, #082B4E 0%, #0B56D9 100%);
color: var(--color-white);
box-shadow: 0 18px 46px rgba(11, 86, 217, 0.24);
}
.estimate-summary__label {
display: block;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.72);
font-weight: 800;
}
.estimate-summary__total {
display: block;
margin-bottom: 12px;
font-family: Manrope, Arial, sans-serif;
font-size: 42px;
line-height: 1.05;
font-weight: 900;
color: var(--color-white);
}
.estimate-summary p {
color: rgba(255, 255, 255, 0.82);
}
.estimate-summary__list {
display: grid;
gap: 8px;
margin: 16px 0;
padding: 0;
list-style: none;
}
.estimate-summary__list li {
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.35;
}
.estimate-summary__note {
display: flex;
gap: 10px;
margin: 18px 0;
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.84);
font-size: 14px;
line-height: 1.45;
}
.estimate-summary__note svg {
width: 22px;
height: 22px;
flex: 0 0 auto;
color: var(--color-electric);
}
.estimate-summary .button {
background: var(--color-white);
border-color: var(--color-white);
color: #0B56D9;
}
.trust-card {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
color: var(--color-white);
font-weight: 800;
}
.trust-card svg {
color: var(--color-electric);
flex: 0 0 auto;
}
.faq-list {
display: grid;
gap: 12px;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-white);
padding: 0 18px;
}
.faq-item summary {
cursor: pointer;
padding: 18px 0;
font-weight: 800;
color: var(--color-dark);
}
.faq-item div {
padding-bottom: 18px;
}
.contact-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
padding: 28px;
}
.contact-panel__list {
display: grid;
gap: 10px;
align-content: start;
}
.contact-panel__list a,
.contact-panel__list span {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 12px;
color: var(--color-graphite);
background: #F9FAFB;
}
.contact-panel__map {
grid-column: 1 / -1;
}
.contact-panel__map iframe {
width: 100%;
height: 360px;
border: 0;
border-radius: 16px;
}
.service-hero,
.page-hero,
.not-found {
padding: 58px 0;
background: var(--color-bg);
}
.page-hero h1,
.not-found h1 {
max-width: 900px;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
color: var(--color-muted);
font-size: 14px;
}
.breadcrumbs a {
color: var(--color-water);
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
font-weight: 800;
}
.seo-text {
margin-top: 28px;
max-width: 920px;
}
.notice {
padding: 22px;
}
.notice--warning {
border-color: rgba(220, 38, 38, 0.28);
background: rgba(220, 38, 38, 0.07);
}
.notice--success {
border-color: rgba(22, 163, 74, 0.22);
background: rgba(22, 163, 74, 0.08);
}
.service-mini-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 18px;
font-weight: 800;
}
.portfolio-card img,
.single-image {
display: block;
width: 100%;
border-radius: 16px;
margin-bottom: 16px;
}
.portfolio-hero {
padding: 62px 0 54px;
background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 55%, #EEF4FA 55%, #EEF4FA 100%);
}
.portfolio-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 44px;
align-items: center;
}
.portfolio-hero h1 {
max-width: 760px;
margin-bottom: 18px;
color: #020617;
font-size: 50px;
line-height: 1.08;
}
.portfolio-hero p {
max-width: 720px;
margin-bottom: 28px;
color: #374151;
font-size: 18px;
line-height: 1.58;
}
.portfolio-hero__panel {
padding: 28px;
border: 1px solid #E5E7EB;
border-radius: 18px;
background: #FFFFFF;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
.portfolio-hero__panel strong {
display: block;
margin-bottom: 16px;
color: #111827;
font-size: 20px;
}
.portfolio-hero__panel ul {
display: grid;
gap: 13px;
list-style: none;
}
.portfolio-hero__panel li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: center;
color: #111827;
font-weight: 700;
}
.portfolio-hero__panel svg,
.portfolio-card__meta svg,
.portfolio-single-hero__meta svg,
.portfolio-check-grid svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.portfolio-list-section {
background: #FFFFFF;
}
.portfolio-filters {
margin-bottom: 30px;
}
.portfolio-grid--rich {
gap: 24px;
}
.portfolio-card--rich {
overflow: hidden;
padding: 0;
border-radius: 16px;
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}
.portfolio-card__image {
display: block;
overflow: hidden;
background: #F8FAFC;
}
.portfolio-card__image img {
width: 100%;
height: 260px;
margin: 0;
border-radius: 0;
object-fit: cover;
transition: transform 0.25s ease;
}
.portfolio-card--rich:hover .portfolio-card__image img {
transform: scale(1.035);
}
.portfolio-card__body {
padding: 22px;
}
.portfolio-card__status {
display: inline-flex;
margin-bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(22, 163, 74, 0.1);
color: #166534;
font-size: 12px;
font-weight: 800;
}
.portfolio-card--rich h2,
.portfolio-card--rich h3 {
margin-bottom: 12px;
color: #111827;
font-size: 22px;
line-height: 1.18;
}
.portfolio-card__meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.portfolio-card__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #4B5563;
font-size: 13px;
font-weight: 700;
}
.portfolio-card--rich p {
margin-bottom: 18px;
color: #374151;
font-size: 15px;
line-height: 1.55;
}
.portfolio-hero {
padding: 0;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
overflow: hidden;
}
.portfolio-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
gap: 0;
align-items: stretch;
min-height: 300px;
}
.portfolio-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px 34px 30px 0;
background: #FFFFFF;
}
.portfolio-hero h1 {
max-width: 620px;
margin-bottom: 14px;
color: #0F172A;
font-size: 42px;
line-height: 1.05;
}
.portfolio-hero p {
max-width: 560px;
margin-bottom: 20px;
color: #374151;
font-size: 16px;
line-height: 1.5;
}
.portfolio-hero__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.portfolio-hero__facts div {
display: grid;
grid-template-columns: 32px 1fr;
gap: 2px 10px;
align-items: center;
min-width: 0;
}
.portfolio-hero__facts svg {
grid-row: span 2;
width: 28px;
height: 28px;
padding: 5px;
border: 1px solid #BFD6FF;
border-radius: 999px;
color: #0B56D9;
}
.portfolio-hero__facts span {
color: #111827;
font-size: 12px;
font-weight: 900;
}
.portfolio-hero__facts small {
color: #4B5563;
font-size: 11px;
line-height: 1.3;
}
.portfolio-hero__visual {
position: relative;
height: 300px;
min-height: 300px;
margin-right: calc((100vw - min(1180px, calc(100vw - 32px))) / -2);
}
.portfolio-hero__visual::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
z-index: 1;
width: 220px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.92) 34%, rgba(255, 255, 255, 0) 100%);
}
.portfolio-hero__visual img {
display: block;
width: 100%;
height: 300px;
min-height: 0;
object-fit: cover;
}
.portfolio-showcase {
background: #F6F8FA;
}
.portfolio-page-filters {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 26px;
}
.portfolio-page-filter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 128px;
padding: 12px 20px;
border: 1px solid #DCE3EF;
border-radius: 8px;
background: #FFFFFF;
color: #111827;
font-size: 14px;
font-weight: 800;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.portfolio-page-filter.is-active,
.portfolio-page-filter:hover {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
}
.portfolio-filter-empty {
padding: 28px;
border: 1px solid #DCE3EF;
border-radius: 16px;
background: #FFFFFF;
text-align: center;
}
.portfolio-filter-empty p {
max-width: 620px;
margin: 0 auto 18px;
color: #374151;
}
.portfolio-page-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.portfolio-project-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.portfolio-project-card__image {
position: relative;
display: block;
overflow: hidden;
height: 205px;
background: #EEF4FA;
}
.portfolio-project-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.portfolio-project-card:hover .portfolio-project-card__image img {
transform: scale(1.035);
}
.portfolio-tag {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 8px;
background: #FFFFFF;
color: #0B56D9;
font-size: 12px;
font-weight: 900;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.portfolio-tag svg {
width: 17px;
height: 17px;
}
.portfolio-tag--vodosnabzhenie {
color: #0284C7;
}
.portfolio-tag--otoplenie {
color: #F97316;
}
.portfolio-tag--avarijnye-raboty {
color: #DC2626;
}
.portfolio-tag--inzhenernye-sistemy {
color: #0B56D9;
}
.portfolio-project-card__body {
padding: 20px;
}
.portfolio-project-card h2 {
margin-bottom: 10px;
color: #111827;
font-size: 21px;
line-height: 1.2;
}
.portfolio-project-card h2 a {
color: inherit;
}
.portfolio-project-card p {
margin-bottom: 14px;
color: #4B5563;
font-size: 14px;
line-height: 1.5;
}
.portfolio-project-card__meta {
display: grid;
gap: 8px;
margin-bottom: 16px;
}
.portfolio-project-card__meta span {
display: inline-flex;
align-items: center;
gap: 8px;
color: #374151;
font-size: 13px;
font-weight: 700;
}
.portfolio-project-card__meta svg,
.portfolio-featured__meta svg,
.portfolio-featured__result svg,
.portfolio-proof-grid svg,
.portfolio-blue-cta svg {
width: 18px;
height: 18px;
color: #0B56D9;
}
.portfolio-project-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.portfolio-project-card__bottom strong {
color: #111827;
font-size: 13px;
}
.portfolio-project-card__bottom a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: 10px 14px;
border: 1px solid #0B56D9;
border-radius: 8px;
color: #0B56D9;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.portfolio-project-card__bottom a svg {
width: 15px;
height: 15px;
}
.portfolio-featured {
display: grid;
grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.1fr) minmax(260px, 0.82fr);
gap: 22px;
align-items: stretch;
margin-top: 26px;
padding: 22px;
border: 1px solid #DCE3EF;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.portfolio-featured__label {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 8px;
background: #0B56D9;
color: #FFFFFF;
font-size: 12px;
font-weight: 900;
}
.portfolio-featured h2 {
margin-bottom: 12px;
color: #111827;
font-size: 30px;
line-height: 1.15;
}
.portfolio-featured h2 a {
color: inherit;
}
.portfolio-featured p {
color: #374151;
font-size: 15px;
line-height: 1.55;
}
.portfolio-featured__meta {
display: grid;
gap: 11px;
margin: 18px 0 0;
}
.portfolio-featured__meta div {
display: grid;
grid-template-columns: 86px 1fr;
gap: 10px;
align-items: start;
}
.portfolio-featured__meta dt {
color: #0B56D9;
font-weight: 900;
}
.portfolio-featured__meta dd {
margin: 0;
color: #111827;
font-weight: 700;
}
.portfolio-featured__photos {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden;
min-height: 270px;
border-radius: 14px;
background: #EEF4FA;
}
.portfolio-featured__photos figure {
position: relative;
min-height: 270px;
}
.portfolio-featured__photos figure:only-child {
grid-column: 1 / -1;
}
.portfolio-featured__photos img {
display: block;
width: 100%;
height: 100%;
min-height: 270px;
object-fit: cover;
}
.portfolio-featured__photos figcaption {
position: absolute;
top: 10px;
right: 10px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.74);
color: #FFFFFF;
font-size: 12px;
font-weight: 800;
}
.portfolio-featured__handle {
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
border: 5px solid #FFFFFF;
border-radius: 999px;
background: #0B56D9;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
transform: translate(-50%, -50%);
}
.portfolio-featured__handle::before,
.portfolio-featured__handle::after {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}
.portfolio-featured__handle::before {
left: 11px;
transform: translateY(-50%) rotate(-45deg);
}
.portfolio-featured__handle::after {
right: 11px;
transform: translateY(-50%) rotate(135deg);
}
.portfolio-featured__result {
display: flex;
flex-direction: column;
gap: 16px;
}
.portfolio-featured__result h3 {
color: #111827;
font-size: 20px;
}
.portfolio-featured__result ul {
display: grid;
gap: 8px;
list-style: none;
}
.portfolio-featured__result li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 8px;
color: #374151;
font-size: 14px;
font-weight: 700;
}
.portfolio-featured__note {
padding: 14px;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #F8FAFC;
}
.portfolio-featured__note strong {
display: block;
margin-bottom: 6px;
color: #111827;
}
.portfolio-featured__note p {
margin: 0;
font-size: 14px;
}
.portfolio-featured__result .button {
justify-content: center;
margin-top: auto;
}
.portfolio-featured__result .button--outline {
border-color: #0B56D9;
color: #0B56D9;
}
.portfolio-proof-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 26px;
border: 1px solid #DCE3EF;
border-radius: 16px;
background: #FFFFFF;
overflow: hidden;
}
.portfolio-proof-grid div {
display: grid;
grid-template-columns: 44px 1fr;
gap: 4px 14px;
padding: 22px;
border-right: 1px solid #E5E7EB;
}
.portfolio-proof-grid div:last-child {
border-right: 0;
}
.portfolio-proof-grid svg {
grid-row: span 2;
width: 38px;
height: 38px;
padding: 7px;
border: 1px solid #BFD6FF;
border-radius: 12px;
}
.portfolio-proof-grid strong {
color: #111827;
font-size: 16px;
}
.portfolio-proof-grid span {
color: #4B5563;
font-size: 13px;
line-height: 1.4;
}
.portfolio-estimate-card {
display: grid;
grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.5fr);
gap: 24px;
align-items: center;
margin-top: 26px;
padding: 22px;
border: 1px solid #DCE3EF;
border-radius: 16px;
background: #FFFFFF;
}
.portfolio-estimate-card h2 {
margin-bottom: 8px;
color: #111827;
font-size: 24px;
}
.portfolio-estimate-card p {
color: #4B5563;
font-size: 15px;
line-height: 1.45;
}
.portfolio-estimate-card .lead-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.portfolio-estimate-card .lead-form__grid {
display: contents;
}
.portfolio-estimate-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.portfolio-estimate-card .lead-form input,
.portfolio-estimate-card .lead-form textarea {
min-height: 48px;
border-radius: 8px;
}
.portfolio-estimate-card .lead-form textarea {
height: 48px;
min-height: 48px;
}
.portfolio-estimate-card .lead-form__consent {
grid-column: 1 / 2;
margin: 0;
font-size: 12px;
}
.portfolio-estimate-card .lead-form .button {
grid-column: 2 / 3;
align-self: stretch;
}
.portfolio-blue-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 22px;
padding: 24px 32px;
border-radius: 14px;
background: linear-gradient(135deg, #0B56D9 0%, #003B95 100%);
color: #FFFFFF;
}
.portfolio-blue-cta > div {
display: flex;
align-items: center;
gap: 18px;
}
.portfolio-blue-cta svg {
flex: 0 0 auto;
width: 46px;
height: 46px;
color: #FFFFFF;
}
.portfolio-blue-cta h2 {
margin-bottom: 4px;
color: #FFFFFF;
font-size: 24px;
}
.portfolio-blue-cta p {
color: rgba(255, 255, 255, 0.84);
}
.portfolio-blue-cta .button {
flex: 0 0 auto;
min-width: 260px;
justify-content: center;
}
@media (max-width: 1180px) {
.portfolio-hero__content {
padding-right: 0;
}
.portfolio-hero__visual {
margin-right: 0;
}
.portfolio-page-grid,
.portfolio-proof-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portfolio-featured {
grid-template-columns: 1fr;
}
.portfolio-featured__photos {
min-height: 340px;
}
.portfolio-proof-grid div {
border-right: 0;
border-bottom: 1px solid #E5E7EB;
}
}
@media (max-width: 860px) {
.portfolio-hero h1 {
font-size: 40px;
}
.portfolio-hero__facts,
.portfolio-page-grid,
.portfolio-proof-grid,
.portfolio-estimate-card {
grid-template-columns: 1fr;
}
.portfolio-hero__visual::before {
display: none;
}
.portfolio-page-filter {
min-width: auto;
flex: 1 1 auto;
}
.portfolio-estimate-card .lead-form {
grid-template-columns: 1fr;
}
.portfolio-estimate-card .lead-form__consent,
.portfolio-estimate-card .lead-form .button {
grid-column: auto;
}
.portfolio-blue-cta {
display: grid;
}
.portfolio-blue-cta .button {
width: 100%;
min-width: 0;
}
}
@media (max-width: 620px) {
.portfolio-hero__content {
padding: 36px 0 24px;
}
.portfolio-hero h1 {
font-size: 34px;
}
.portfolio-hero__visual,
.portfolio-hero__visual img {
height: 240px;
min-height: 240px;
}
.portfolio-project-card__bottom {
display: grid;
}
.portfolio-project-card__bottom a {
justify-content: center;
}
.portfolio-featured,
.portfolio-estimate-card,
.portfolio-blue-cta {
padding: 18px;
}
.portfolio-featured__photos {
grid-template-columns: 1fr;
}
.portfolio-featured__photos figure,
.portfolio-featured__photos img {
min-height: 220px;
}
.portfolio-featured__handle {
display: none;
}
.portfolio-blue-cta > div {
align-items: flex-start;
}
}
.portfolio-single-hero {
padding: 54px 0;
background: #FFFFFF;
overflow: hidden;
}
.portfolio-single-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
gap: 46px;
align-items: center;
}
.portfolio-single-hero h1 {
margin-bottom: 18px;
color: #020617;
font-size: 50px;
line-height: 1.08;
}
.portfolio-single-hero p {
max-width: 720px;
margin-bottom: 24px;
color: #374151;
font-size: 18px;
line-height: 1.58;
}
.portfolio-single-hero__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.portfolio-single-hero__meta span {
display: grid;
grid-template-columns: 22px 1fr;
gap: 8px 10px;
align-items: center;
padding: 14px;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #F8FAFC;
color: #111827;
font-size: 14px;
}
.portfolio-single-hero__meta strong {
display: block;
color: #4B5563;
font-size: 12px;
}
.portfolio-single-hero__meta svg {
grid-row: span 2;
color: #0B56D9;
}
.portfolio-single-hero__image img {
display: block;
width: 100%;
height: 430px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}
.portfolio-single-section {
background: #F6F8FA;
}
.portfolio-single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 28px;
align-items: start;
}
.portfolio-single-main,
.portfolio-single-sidebar {
display: grid;
gap: 22px;
}
.portfolio-block {
padding: 28px;
border: 1px solid #E5E7EB;
border-radius: 18px;
background: #FFFFFF;
}
.portfolio-block h2 {
margin-bottom: 18px;
color: #111827;
font-size: 28px;
}
.portfolio-check-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.portfolio-check-grid div {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: center;
padding: 12px;
border-radius: 12px;
background: #F8FAFC;
color: #111827;
font-weight: 700;
}
.portfolio-check-grid svg {
color: #16A34A;
}
.portfolio-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.portfolio-gallery a {
display: block;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #F8FAFC;
}
.portfolio-gallery img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.25s ease;
}
.portfolio-gallery a:hover img {
transform: scale(1.035);
}
.portfolio-gallery span {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
padding: 8px 12px;
border-radius: 999px;
background: rgba(2, 6, 23, 0.78);
color: #FFFFFF;
font-size: 12px;
font-weight: 800;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.portfolio-gallery a:hover span,
.portfolio-gallery a:focus-visible span {
opacity: 1;
transform: translateY(0);
}
.portfolio-lightbox[hidden] {
display: none !important;
}
.portfolio-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: 24px;
background: rgba(2, 13, 28, 0.74);
}
body.has-portfolio-lightbox {
overflow: hidden;
}
.portfolio-lightbox__backdrop {
position: absolute;
inset: 0;
}
.portfolio-lightbox__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
width: min(1180px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 24px;
background: #FFFFFF;
box-shadow: 0 30px 90px rgba(2, 13, 28, 0.4);
}
.portfolio-lightbox__media {
position: relative;
display: grid;
place-items: center;
min-height: min(72vh, 720px);
background: #07182A;
}
.portfolio-lightbox__image {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
max-height: calc(100vh - 72px);
object-fit: contain;
}
.portfolio-lightbox__close,
.portfolio-lightbox__nav {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 999px;
background: rgba(2, 13, 28, 0.7);
color: #FFFFFF;
font-size: 30px;
line-height: 1;
box-shadow: 0 10px 28px rgba(2, 13, 28, 0.2);
}
.portfolio-lightbox__close:hover,
.portfolio-lightbox__nav:hover,
.portfolio-lightbox__close:focus-visible,
.portfolio-lightbox__nav:focus-visible {
background: #0B56D9;
}
.portfolio-lightbox__close {
top: 16px;
right: 16px;
}
.portfolio-lightbox__nav {
top: 50%;
transform: translateY(-50%);
}
.portfolio-lightbox__nav--prev {
left: 16px;
}
.portfolio-lightbox__nav--next {
right: 16px;
}
.portfolio-lightbox__side {
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px;
overflow-y: auto;
}
.portfolio-lightbox__eyebrow {
display: inline-flex;
margin-bottom: 10px;
color: #0B56D9;
font-size: 13px;
font-weight: 900;
}
.portfolio-lightbox__side h2 {
margin-bottom: 10px;
color: #111827;
font-size: 28px;
line-height: 1.15;
}
.portfolio-lightbox__side p {
color: #4B5563;
font-size: 15px;
line-height: 1.55;
}
.portfolio-lightbox__offer {
padding: 18px;
border: 1px solid #D8E6FF;
border-radius: 16px;
background: linear-gradient(135deg, #F4F8FF 0%, #FFFFFF 100%);
}
.portfolio-lightbox__offer strong {
display: block;
margin-bottom: 12px;
color: #111827;
font-size: 17px;
}
.portfolio-lightbox__offer ul {
display: grid;
gap: 8px;
margin: 0;
padding-left: 18px;
color: #374151;
font-size: 14px;
line-height: 1.45;
}
.portfolio-lightbox__actions {
display: grid;
gap: 12px;
margin-top: auto;
}
.portfolio-lightbox__actions .button {
width: 100%;
justify-content: center;
}
.portfolio-lightbox__phone {
display: inline-flex;
justify-content: center;
padding: 13px 16px;
border: 1px solid #BFD6FF;
border-radius: 12px;
color: #0B56D9;
font-weight: 900;
}
.portfolio-related-list {
display: grid;
gap: 10px;
}
.portfolio-related-list a {
padding: 12px 14px;
border-radius: 10px;
background: #F8FAFC;
color: #0B56D9;
font-weight: 800;
}
.portfolio-object-hero {
padding: 30px 0 22px;
background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%);
}
.portfolio-object-hero .breadcrumbs {
margin-bottom: 20px;
}
.portfolio-object-hero__grid {
display: grid;
grid-template-columns: minmax(0, 760px);
}
.portfolio-object-hero h1 {
max-width: 720px;
margin: 0 0 14px;
color: #0F172A;
font-size: 40px;
font-weight: 800;
line-height: 1.12;
letter-spacing: 0;
}
.portfolio-object-hero p {
max-width: 650px;
margin: 0 0 22px;
color: #334155;
font-size: 16px;
line-height: 1.58;
}
.portfolio-object-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
max-width: 960px;
}
.portfolio-object-facts div {
display: grid;
grid-template-columns: 38px 1fr;
gap: 3px 12px;
align-items: center;
min-width: 0;
}
.portfolio-object-facts svg,
.portfolio-brief svg,
.portfolio-object-related svg {
grid-row: span 2;
width: 34px;
height: 34px;
padding: 7px;
border: 2px solid #D7E7FF;
border-radius: 999px;
color: #0B56D9;
background: #FFFFFF;
}
.portfolio-object-hero svg path,
.portfolio-object-page svg path,
.portfolio-lightbox svg path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.portfolio-object-facts span,
.portfolio-brief span {
color: #0F172A;
font-size: 13px;
font-weight: 800;
}
.portfolio-object-facts strong,
.portfolio-brief strong {
color: #334155;
font-size: 13px;
line-height: 1.35;
}
.portfolio-object-page {
padding: 18px 0 0;
background: #F6F8FA;
}
.portfolio-object-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: start;
}
.portfolio-object-main,
.portfolio-object-sidebar {
display: grid;
gap: 16px;
}
.portfolio-object-sidebar {
position: sticky;
top: 18px;
}
.portfolio-object-card,
.portfolio-object-side-card {
overflow: hidden;
border: 1px solid #DDE7F3;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}
.portfolio-object-card {
padding: 22px;
}
.portfolio-object-card h2,
.portfolio-object-side-card h2 {
margin: 0 0 16px;
color: #0F172A;
font-size: 21px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
.portfolio-object-slider {
position: relative;
padding: 0;
}
.portfolio-object-slider__viewport {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #EEF4FA;
}
.portfolio-object-slider__item {
display: block;
}
.portfolio-object-slider__item[hidden] {
display: none;
}
.portfolio-object-slider__item img,
.portfolio-object-cover img {
display: block;
width: 100%;
height: 430px;
object-fit: cover;
}
.portfolio-object-slider__nav {
position: absolute;
top: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: #FFFFFF;
color: #0B56D9;
font-size: 30px;
font-weight: 700;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
transform: translateY(-50%);
}
.portfolio-object-slider__nav--prev {
left: 12px;
}
.portfolio-object-slider__nav--next {
right: 12px;
}
.portfolio-object-checks,
.portfolio-object-alerts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 22px;
}
.portfolio-object-checks--single {
grid-template-columns: 1fr;
}
.portfolio-object-checks div,
.portfolio-object-alerts div {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: start;
color: #0F172A;
font-size: 13.5px;
font-weight: 700;
line-height: 1.42;
}
.portfolio-object-checks svg {
width: 19px;
height: 19px;
padding: 4px;
border-radius: 999px;
background: #0B56D9;
color: #FFFFFF;
}
.portfolio-object-alerts svg {
width: 20px;
height: 20px;
color: #FF6B1A;
}
.portfolio-before-after {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.portfolio-before-after a,
.portfolio-object-gallery a {
position: relative;
display: block;
overflow: hidden;
border-radius: 12px;
background: #EEF4FA;
}
.portfolio-before-after img,
.portfolio-object-gallery img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.portfolio-before-after a:hover img,
.portfolio-object-gallery a:hover img {
transform: scale(1.035);
}
.portfolio-before-after span {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 6px 11px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.76);
color: #FFFFFF;
font-size: 12px;
font-weight: 900;
}
.portfolio-before-after img {
height: 245px;
}
.portfolio-object-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.portfolio-object-steps div {
position: relative;
padding-top: 34px;
}
.portfolio-object-steps span {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: #0B56D9;
color: #FFFFFF;
font-size: 12px;
font-weight: 900;
}
.portfolio-object-steps p {
margin: 0;
color: #334155;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
}
.portfolio-material-grid,
.portfolio-result-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.portfolio-material-grid div,
.portfolio-result-grid div {
display: grid;
gap: 10px;
justify-items: center;
padding: 16px 10px;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #F8FAFC;
text-align: center;
color: #0F172A;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.portfolio-material-grid svg,
.portfolio-result-grid svg {
width: 34px;
height: 34px;
padding: 7px;
border: 1px solid #BFD6FF;
border-radius: 10px;
color: #0B56D9;
}
.portfolio-object-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.portfolio-object-gallery {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.portfolio-object-gallery img {
height: 120px;
}
.portfolio-object-cta,
.portfolio-object-side-cta {
background: linear-gradient(135deg, #0049B8 0%, #075FE4 100%);
color: #FFFFFF;
box-shadow: 0 16px 34px rgba(11, 86, 217, 0.22);
}
.portfolio-object-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 34px;
border-radius: 16px;
}
.portfolio-object-cta > div {
display: flex;
align-items: center;
gap: 18px;
}
.portfolio-object-cta svg,
.portfolio-object-side-cta svg {
flex: 0 0 auto;
width: 48px;
height: 48px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
}
.portfolio-object-cta h2,
.portfolio-object-side-cta h2 {
margin: 0 0 6px;
color: #FFFFFF;
font-size: 22px;
}
.portfolio-object-cta p,
.portfolio-object-side-cta p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
}
.portfolio-object-side-card {
padding: 22px;
}
.portfolio-brief {
display: grid;
gap: 14px;
}
.portfolio-brief > div {
display: grid;
grid-template-columns: 34px 1fr;
gap: 3px 12px;
align-items: start;
}
.portfolio-brief__works ul {
grid-column: 2;
margin: 2px 0 0;
padding-left: 16px;
color: #334155;
font-size: 13px;
font-weight: 600;
line-height: 1.55;
}
.portfolio-object-side-cta {
padding: 24px;
border-radius: 16px;
}
.portfolio-object-side-cta .button {
justify-content: center;
width: 100%;
margin-top: 16px;
}
.portfolio-engineer-card {
display: grid;
grid-template-columns: 92px 1fr;
gap: 16px;
align-items: start;
}
.portfolio-engineer-card img {
width: 92px;
height: 130px;
object-fit: cover;
border-radius: 12px;
background: #EEF4FA;
}
.portfolio-engineer-card span {
color: #64748B;
font-size: 12px;
font-weight: 800;
}
.portfolio-engineer-card h2 {
margin: 2px 0 4px;
font-size: 20px;
}
.portfolio-engineer-card p,
.portfolio-engineer-card li {
color: #334155;
font-size: 13px;
line-height: 1.45;
}
.portfolio-engineer-card ul {
display: grid;
gap: 6px;
margin: 10px 0;
padding-left: 16px;
}
.portfolio-engineer-card a {
display: inline-flex;
align-items: center;
margin-top: 6px;
color: #0B56D9;
font-weight: 900;
}
.portfolio-object-form-card .lead-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.portfolio-object-form-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.portfolio-object-form-card .lead-form input,
.portfolio-object-form-card .lead-form textarea {
min-height: 46px;
border-radius: 8px;
}
.portfolio-object-form-card .lead-form textarea {
min-height: 86px;
}
.portfolio-object-form-card .lead-form__consent {
font-size: 12px;
}
.portfolio-object-related {
display: grid;
gap: 12px;
}
.portfolio-object-related a {
display: grid;
grid-template-columns: 30px 1fr;
gap: 10px;
align-items: center;
color: #0F172A;
font-weight: 800;
}
.portfolio-object-related svg {
width: 30px;
height: 30px;
padding: 6px;
}
.review-card__meta {
display: flex;
gap: 12px;
color: var(--color-muted);
margin-bottom: 12px;
}
.prose {
color: var(--color-graphite);
}
.prose a {
color: var(--color-water);
text-decoration: underline;
}
.cta-block {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 34px;
border-radius: var(--radius);
background: var(--color-dark);
color: var(--color-white);
}
.cta-block h2,
.cta-block p {
color: var(--color-white);
}
.cta-block .button--outline {
background: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.32);
}
.site-footer {
background: var(--color-dark);
color: rgba(255, 255, 255, 0.78);
padding: 58px 0 28px;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 42px;
}
.brand--footer,
.site-footer h2 {
color: var(--color-white);
}
.site-footer__contacts,
.footer-menu {
display: grid;
align-items: start;
gap: 10px;
}
.site-footer__contacts a,
.footer-menu a,
.site-footer__bottom a {
color: rgba(255, 255, 255, 0.9);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.16);
margin-top: 38px;
padding-top: 22px;
font-size: 14px;
}
.sticky-mobile-cta {
display: none;
}
.cookie-banner {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 80;
width: min(520px, calc(100vw - 40px));
padding: 18px;
border-radius: 18px;
border: 1px solid var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow);
}
.cookie-banner p {
margin-bottom: 12px;
font-size: 14px;
}
.cookie-banner__actions {
display: flex;
gap: 8px;
}
[hidden] {
display: none !important;
}
@media (max-width: 1180px) {
.service-card-grid,
.steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trust-grid,
.feature-list,
.card-grid--related,
.content-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
h1 {
font-size: 38px;
}
h2 {
font-size: 30px;
}
.topbar,
.primary-nav,
.header-phone,
.site-header__actions > .button {
display: none;
}
.icon-button {
display: inline-flex;
}
.hero__grid,
.service-hero__grid,
.contact-panel,
.site-footer__grid,
.two-columns,
.process-notes {
grid-template-columns: 1fr;
}
.object-grid,
.problem-grid,
.portfolio-grid,
.review-grid {
grid-template-columns: 1fr;
}
.hero,
.section,
.service-hero,
.page-hero,
.not-found {
padding: 54px 0;
}
}
@media (max-width: 720px) {
body {
padding-bottom: 78px;
}
.container {
width: min(100% - 28px, var(--container));
}
h1 {
font-size: 34px;
}
h2 {
font-size: 28px;
}
.site-header__inner {
min-height: 68px;
}
.brand__text {
max-width: 140px;
}
.hero__form-card,
.service-hero__form,
.contact-page__form,
.contact-panel,
.cta-block {
padding: 22px;
}
.hero__actions,
.section-actions,
.cta-block,
.cta-block__actions {
display: grid;
width: 100%;
}
.service-card-grid,
.steps,
.trust-grid,
.feature-list,
.card-grid--related,
.content-list,
.lead-form__grid {
grid-template-columns: 1fr;
}
.service-card__actions {
align-items: stretch;
flex-direction: column;
}
.price-table {
min-width: 0;
}
.price-table thead {
display: none;
}
.price-table,
.price-table tbody,
.price-table tr,
.price-table td {
display: block;
width: 100%;
}
.price-table tr {
border-bottom: 1px solid var(--color-border);
padding: 12px 0;
}
.price-table td {
border: 0;
padding: 7px 16px;
}
.price-table td::before {
content: attr(data-label) ": ";
display: block;
color: var(--color-muted);
font-size: 13px;
font-weight: 800;
}
.sticky-mobile-cta {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 70;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 8px;
padding: 8px;
border-radius: 18px;
background: var(--color-dark);
box-shadow: var(--shadow);
}
.sticky-mobile-cta a {
display: grid;
place-items: center;
gap: 3px;
min-height: 54px;
color: var(--color-white);
font-size: 12px;
font-weight: 800;
}
.cookie-banner {
left: 14px;
right: 14px;
bottom: 92px;
width: auto;
}
} body {
background: #FFFFFF;
}
.site-header--reference {
position: sticky;
top: 0;
z-index: 60;
background: #FFFFFF;
border-bottom: 0;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
backdrop-filter: none;
}
.header-main {
background: #FFFFFF;
}
.header-main__inner {
min-height: 96px;
display: grid;
grid-template-columns: minmax(260px, 340px) 1fr auto;
align-items: center;
gap: 34px;
}
.site-header--reference .brand--image {
width: min(340px, 100%);
height: 76px;
min-width: 0;
overflow: visible;
}
.brand--image img {
display: block;
width: 100%;
height: 100%;
max-height: 76px;
object-fit: contain;
object-position: left center;
}
.footer-logo {
display: inline-flex;
width: min(300px, 100%);
max-width: 300px;
min-height: 70px;
align-items: center;
}
.footer-logo img {
display: block;
width: 100%;
height: auto;
max-height: 82px;
object-fit: contain;
object-position: left center;
}
.header-main__meta {
display: flex;
justify-content: center;
gap: 54px;
}
.header-info {
display: grid;
grid-template-columns: 38px auto;
column-gap: 12px;
align-items: center;
color: #111827;
font-size: 14px;
}
.header-info__icon {
grid-row: span 2;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #0B56C5;
border-radius: 50%;
color: #0B56C5;
}
.header-info__icon svg,
.home-badge__icon svg,
.overlay-item svg,
.home-advantage svg,
.home-stat svg,
.footer-socials svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.header-info strong {
font-size: 16px;
line-height: 1.25;
}
.header-main__contacts {
display: grid;
justify-items: end;
gap: 3px;
}
.site-header--reference .header-phone {
font-family: Manrope, Arial, sans-serif;
font-size: 25px;
font-weight: 800;
gap: 10px;
}
.site-header--reference .header-phone svg {
width: 17px;
height: 17px;
color: #0B56C5;
}
.header-callback {
color: #0B56C5;
font-weight: 800;
font-size: 16px;
}
.header-nav {
background: linear-gradient(90deg, #061D36, #052F5F);
}
.header-nav__inner {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-header--reference .primary-nav__list {
gap: 0;
}
.site-header--reference .primary-nav a {
display: inline-flex;
align-items: center;
min-height: 64px;
padding: 0 18px;
color: #FFFFFF;
font-size: 15px;
font-weight: 800;
}
.site-header--reference .primary-nav a:hover {
background: rgba(255, 255, 255, 0.08);
}
.button--nav {
min-height: 44px;
padding-inline: 30px;
background: #0B56D9;
border-color: #0B56D9;
border-radius: 7px;
box-shadow: none;
}
.home-hero {
position: relative;
background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 43%, #EEF4FA 43%, #EEF4FA 100%);
overflow: hidden;
}
.home-hero__inner {
min-height: 488px;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
align-items: stretch;
}
.home-hero__content {
position: relative;
z-index: 2;
padding: 58px 0 45px;
max-width: 620px;
}
.home-hero__content h1 {
margin-bottom: 24px;
color: #020617;
font-size: 48px;
line-height: 1.12;
}
.home-hero__content p {
max-width: 520px;
margin-bottom: 34px;
color: #1F2937;
font-size: 18px;
}
.home-hero__badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-bottom: 38px;
}
.home-badge {
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 12px;
font-size: 13px;
line-height: 1.25;
}
.home-badge__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #CFE0FA;
border-radius: 50%;
color: #0B56C5;
background: #FFFFFF;
box-shadow: 0 8px 22px rgba(11, 86, 197, 0.10);
}
.home-badge strong {
display: block;
color: #111827;
font-size: 14px;
}
.home-hero__actions {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.home-hero__actions .button {
min-width: 214px;
min-height: 52px;
border-radius: 7px;
background: #0B56D9;
border-color: #0B56D9;
}
.home-hero__actions .button--outline {
background: #FFFFFF;
color: #0B2B54;
border-color: #0B56C5;
}
.home-hero__media {
position: relative;
min-height: 488px;
}
.home-hero__media img {
display: block;
width: calc(100% + 60px);
height: 100%;
min-height: 488px;
object-fit: cover;
object-position: center;
}
.home-hero__media::before {
content: "";
position: absolute;
inset: 0 auto 0 -120px;
z-index: 1;
width: 240px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
.home-hero__overlay {
position: absolute;
z-index: 2;
right: 0;
top: 132px;
width: 220px;
display: grid;
gap: 20px;
padding: 24px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}
.overlay-item {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: start;
}
.overlay-item span {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0B56C5;
border-radius: 50%;
background: #EEF4FF;
}
.overlay-item p {
margin: 0;
color: #111827;
font-size: 12px;
line-height: 1.35;
}
.overlay-item strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
}
.home-services {
padding: 26px 0 26px;
background: #FFFFFF;
}
.home-services__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.home-service-card {
position: relative;
min-height: 336px;
display: grid;
grid-template-columns: 1fr 118px;
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}
.home-service-card__body {
position: relative;
z-index: 2;
padding: 25px 14px 24px 22px;
}
.home-service-card h2 {
margin-bottom: 20px;
color: #0B56C5;
font-size: 24px;
text-transform: uppercase;
}
.home-service-card h2 a {
display: inline-flex;
align-items: center;
gap: 12px;
color: inherit;
}
.home-service-card--heat h2,
.home-service-card--otoplenie h2 {
color: #F0441D;
}
.home-service-card--vodosnabzhenie h2 {
color: #0284C7;
}
.home-service-card--avarijnye-raboty h2 {
color: #DC2626;
}
.home-service-card--inzhenernye-sistemy h2 {
color: #0B56C5;
}
.home-service-card h2 span {
width: 28px;
height: 28px;
display: inline-flex;
color: currentColor;
}
.home-service-card h2 svg,
.home-service-card__link svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-service-card ul {
display: grid;
gap: 9px;
list-style: none;
margin-bottom: 28px;
}
.home-service-card li {
position: relative;
padding-left: 13px;
color: #111827;
font-size: 14px;
line-height: 1.35;
}
.home-service-card li a {
color: inherit;
}
.home-service-card li a:hover,
.home-service-card h2 a:hover {
color: #0B56D9;
}
.home-service-card li::before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: #111827;
}
.home-service-card__link {
display: inline-flex;
align-items: center;
gap: 9px;
color: #0B56C5;
font-size: 14px;
font-weight: 800;
}
.home-service-card__link svg {
width: 18px;
height: 18px;
}
.home-service-card > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home-service-card::after {
content: "";
position: absolute;
inset: 0 92px 0 auto;
width: 120px;
background: linear-gradient(90deg, #FFFFFF 10%, rgba(255, 255, 255, 0));
pointer-events: none;
}
.home-portfolio {
padding: 48px 0 42px;
background: #FFFFFF;
}
.home-portfolio__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 26px;
}
.home-portfolio__head h2 {
margin-bottom: 10px;
color: #111827;
font-size: 38px;
line-height: 1.12;
}
.home-portfolio__head p {
max-width: 680px;
color: #4B5563;
font-size: 17px;
line-height: 1.55;
}
.home-portfolio__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.home-portfolio-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}
.home-portfolio-card__image {
display: block;
overflow: hidden;
background: #F8FAFC;
}
.home-portfolio-card__image img {
display: block;
width: 100%;
height: 245px;
object-fit: cover;
transition: transform 0.25s ease;
}
.home-portfolio-card:hover .home-portfolio-card__image img {
transform: scale(1.035);
}
.home-portfolio-card__body {
padding: 22px;
}
.home-portfolio-card h3 {
margin-bottom: 12px;
color: #111827;
font-size: 22px;
line-height: 1.2;
}
.home-portfolio-card h3 a {
color: inherit;
}
.home-portfolio-card__meta {
display: flex;
flex-wrap: wrap;
gap: 9px 12px;
margin-bottom: 14px;
}
.home-portfolio-card__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #4B5563;
font-size: 13px;
font-weight: 700;
}
.home-portfolio-card__meta svg,
.home-portfolio-card__link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-portfolio-card p {
margin-bottom: 18px;
color: #374151;
font-size: 15px;
line-height: 1.55;
}
.home-portfolio-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #0B56D9;
font-size: 14px;
font-weight: 800;
}
.home-advantages {
background: linear-gradient(90deg, #064A94, #062C56);
color: #FFFFFF;
}
.home-advantages__grid {
min-height: 112px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
align-items: center;
}
.home-advantage {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
align-items: center;
}
.home-advantage > span {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
}
.home-advantage h2 {
margin: 0 0 4px;
color: #FFFFFF;
font-size: 16px;
}
.home-advantage p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
line-height: 1.35;
}
.home-about {
padding: 52px 0 34px;
background: #FFFFFF;
}
.home-about__grid {
display: grid;
grid-template-columns: 0.92fr 0.86fr 0.95fr;
gap: 42px;
align-items: center;
}
.home-about__content h2,
.home-cost-card h2 {
font-size: 31px;
color: #101820;
}
.home-about__content p {
max-width: 500px;
color: #374151;
font-size: 15px;
}
.home-check-list {
display: grid;
gap: 16px;
margin-top: 28px;
list-style: none;
}
.home-check-list li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
align-items: center;
color: #374151;
font-size: 14px;
}
.home-check-list svg {
width: 20px;
height: 20px;
padding: 4px;
color: #FFFFFF;
background: #0B56C5;
border-radius: 50%;
fill: none;
stroke: currentColor;
stroke-width: 3;
}
.home-about__image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
}
.home-cost-card {
padding: 28px;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}
.home-cost-card h2 {
margin-bottom: 8px;
font-size: 25px;
}
.home-cost-card > p {
margin-bottom: 18px;
font-size: 14px;
}
.home-cost-card .lead-form {
gap: 12px;
}
.home-cost-card .lead-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-cost-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.home-cost-card .lead-form__consent {
display: grid;
grid-template-columns: 18px 1fr;
font-size: 11px;
line-height: 1.35;
}
.home-cost-card .lead-form__consent span {
display: block;
}
.home-cost-card .lead-form input,
.home-cost-card .lead-form textarea {
border-radius: 6px;
min-height: 44px;
font-size: 13px;
}
.home-cost-card .lead-form textarea {
min-height: 90px;
}
.home-cost-card .button {
min-height: 48px;
border-radius: 6px;
background: #0B56D9;
border-color: #0B56D9;
}
.home-cost-card__secure {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
color: #6B7280;
font-size: 12px;
}
.home-cost-card__secure svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.home-stats {
padding: 22px 0;
background: #F8FAFC;
border-top: 1px solid #E5E7EB;
border-bottom: 1px solid #E5E7EB;
}
.home-stats__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
}
.home-stat {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: center;
padding: 0 28px;
border-right: 1px solid #DCE3EC;
}
.home-stat:last-child {
border-right: 0;
}
.home-stat > span {
color: #0B56C5;
}
.home-stat p {
margin: 0;
color: #111827;
font-size: 14px;
line-height: 1.25;
}
.home-stat strong {
display: block;
font-family: Manrope, Arial, sans-serif;
font-size: 24px;
line-height: 1;
}
.site-footer--reference {
padding: 34px 0 24px;
background: linear-gradient(135deg, #08223F, #061D36);
}
.site-footer--reference .site-footer__grid {
grid-template-columns: 1.5fr 1fr 1fr 1.65fr;
gap: 58px;
}
.site-footer--reference .site-footer__brand p {
max-width: 300px;
margin-top: 22px;
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
}
.footer-socials {
display: flex;
gap: 12px;
margin-top: 22px;
}
.footer-socials a {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.16);
font-size: 12px;
font-weight: 800;
}
.site-footer--reference h2 {
margin-bottom: 16px;
color: #FFFFFF;
font-size: 17px;
}
.site-footer--reference .footer-menu {
display: grid;
gap: 7px;
list-style: none;
}
.site-footer--reference .footer-menu a {
color: rgba(255, 255, 255, 0.86);
font-size: 15px;
}
.site-footer--reference .site-footer__contacts {
gap: 14px;
}
.site-footer--reference .site-footer__contacts a,
.site-footer--reference .site-footer__contacts span {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
align-items: start;
color: rgba(255, 255, 255, 0.86);
}
.site-footer--reference .site-footer__contacts svg {
width: 18px;
height: 18px;
color: #FFFFFF;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-footer--reference .site-footer__bottom {
margin-top: 34px;
color: rgba(255, 255, 255, 0.58);
}
@media (max-width: 1180px) {
.header-main__inner {
grid-template-columns: minmax(230px, 290px) 1fr auto;
gap: 20px;
}
.site-header--reference .brand--image {
height: 68px;
}
.header-main__meta {
gap: 22px;
}
.site-header--reference .primary-nav a {
padding: 0 10px;
font-size: 14px;
}
.home-services__grid,
.home-portfolio__grid,
.home-about__grid {
grid-template-columns: 1fr;
}
.estimate-calculator__layout {
grid-template-columns: 1fr;
}
.estimate-summary {
position: static;
}
.home-service-card {
grid-template-columns: 1fr 200px;
}
.home-advantages__grid,
.home-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 24px 0;
}
.home-stat {
border-right: 0;
padding: 18px;
}
.site-footer--reference .site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.header-main__inner {
min-height: 76px;
display: flex;
justify-content: space-between;
}
.site-header--reference .brand--image {
width: min(300px, 68vw);
height: 62px;
}
.header-main__meta,
.header-nav {
display: none;
}
.site-header--reference .icon-button {
display: inline-flex;
}
.home-hero {
background: #FFFFFF;
}
.home-hero__inner {
grid-template-columns: 1fr;
}
.home-hero__content {
max-width: none;
padding: 42px 0 24px;
}
.home-hero__media {
min-height: auto;
}
.home-hero__media img {
width: 100%;
min-height: 320px;
border-radius: 16px;
}
.home-hero__media::before {
display: none;
}
.home-hero__overlay {
position: static;
width: auto;
margin-top: -24px;
margin-inline: 16px;
}
}
@media (max-width: 720px) {
.header-main__contacts .header-phone,
.header-callback {
display: none;
}
.site-header--reference .brand--image {
width: min(250px, 68vw);
height: 56px;
}
.home-hero__content h1 {
font-size: 34px;
}
.home-hero__badges,
.home-advantages__grid,
.home-stats__grid,
.site-footer--reference .site-footer__grid {
grid-template-columns: 1fr;
}
.home-estimate {
padding-top: 48px;
padding-bottom: 48px;
}
.estimate-calculator__header,
.estimate-calculator__layout {
padding: 20px;
}
.estimate-calculator__header {
grid-template-columns: 1fr;
}
.estimate-calculator__header h2 {
font-size: 28px;
}
.estimate-calculator__badge {
max-width: none;
}
.estimate-calculator__tabs {
display: grid;
grid-template-columns: 1fr;
}
.estimate-calculator__tabs button {
width: 100%;
justify-content: flex-start;
}
.estimate-item {
grid-template-columns: 1fr;
gap: 12px;
}
.estimate-item__price {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.estimate-item__qty {
grid-template-columns: 80px minmax(0, 1fr);
align-items: center;
}
.estimate-summary__total {
font-size: 34px;
}
.home-hero__actions,
.home-cost-card .lead-form__grid {
display: grid;
grid-template-columns: 1fr;
}
.home-portfolio__head {
display: grid;
align-items: start;
}
.home-portfolio__head h2 {
font-size: 30px;
}
.home-service-card {
min-height: auto;
grid-template-columns: 1fr;
}
.home-service-card > img,
.home-service-card::after {
display: none;
}
.home-about__content h2,
.home-cost-card h2 {
font-size: 27px;
}
} .catalog-hero {
background: #FFFFFF;
overflow: hidden;
}
.catalog-hero__grid {
min-height: 382px;
display: grid;
grid-template-columns: 0.82fr 1.18fr;
align-items: stretch;
}
.catalog-hero__content {
position: relative;
z-index: 2;
padding: 64px 0 54px;
}
.catalog-hero__content h1 {
margin-bottom: 28px;
color: #020617;
font-size: 58px;
line-height: 1.05;
}
.catalog-hero__content p {
max-width: 470px;
margin-bottom: 32px;
color: #111827;
font-size: 18px;
line-height: 1.55;
}
.catalog-hero__actions {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.catalog-hero__actions .button {
min-width: 220px;
min-height: 52px;
border-radius: 7px;
background: #0B56D9;
border-color: #0B56D9;
}
.catalog-hero__actions .button--outline {
background: #FFFFFF;
color: #0B2B54;
border-color: #0B56C5;
}
.catalog-hero__image {
position: relative;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
}
.catalog-hero__image img {
display: block;
width: 100%;
height: 100%;
min-height: 382px;
object-fit: cover;
}
.catalog-hero__image::before {
content: "";
position: absolute;
inset: 0 auto 0 -150px;
z-index: 1;
width: 270px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
.catalog-section {
background: #FFFFFF;
padding: 28px 0 20px;
}
.catalog-filters {
display: flex;
gap: 22px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.catalog-filter {
min-width: 112px;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
border: 1px solid #E5E7EB;
border-radius: 999px;
background: #FFFFFF;
color: #111827;
font-weight: 800;
font-size: 14px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.catalog-filter.is-active {
background: #0B56D9;
border-color: #0B56D9;
color: #FFFFFF;
}
.catalog-filter span {
color: #F59E0B;
}
.catalog-filter svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.catalog-card-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.catalog-card {
display: flex;
min-height: 418px;
flex-direction: column;
padding: 18px 14px 18px;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.catalog-card__head {
min-height: 50px;
display: grid;
grid-template-columns: 30px 1fr;
gap: 10px;
align-items: center;
margin-bottom: 16px;
}
.catalog-card__head span {
color: #0B56D9;
}
.catalog-card--vodosnabzhenie .catalog-card__head span {
color: #0284C7;
}
.catalog-card--otoplenie .catalog-card__head span {
color: #F97316;
}
.catalog-card--avarijnye-raboty .catalog-card__head span {
color: #EF4444;
}
.catalog-card--inzhenernye-sistemy .catalog-card__head span {
color: #0B56C5;
}
.catalog-card__head svg,
.catalog-card__link svg,
.popular-service a svg,
.catalog-area-card li svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.catalog-card h2 {
margin: 0;
color: #111827;
font-size: 18px;
line-height: 1.18;
}
.catalog-card > img {
width: 100%;
height: 138px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 16px;
background: #F8FAFC;
}
.catalog-card ul {
display: grid;
gap: 8px;
list-style: none;
margin-bottom: 18px;
}
.catalog-card li {
position: relative;
padding-left: 12px;
color: #111827;
font-size: 13px;
line-height: 1.32;
}
.catalog-card li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #111827;
}
.catalog-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
color: #0B56D9;
font-size: 13px;
font-weight: 800;
}
.catalog-card__link svg,
.popular-service a svg {
width: 17px;
height: 17px;
}
.catalog-popular {
padding: 10px 0 34px;
background: #FFFFFF;
}
.catalog-popular h2 {
margin-bottom: 20px;
font-size: 24px;
}
.catalog-popular__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.catalog-popular__grid > .empty-state {
grid-column: 1 / -1;
}
.popular-service {
display: grid;
grid-template-columns: 74px 1fr;
gap: 14px;
min-height: 126px;
padding: 12px;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.popular-service img {
width: 74px;
height: 102px;
object-fit: cover;
border-radius: 8px;
background: #F8FAFC;
}
.popular-service h3 {
min-height: 42px;
margin: 2px 0 8px;
color: #111827;
font-size: 13px;
line-height: 1.28;
}
.popular-service p {
margin: 0 0 11px;
color: #111827;
font-size: 13px;
font-weight: 800;
}
.popular-service a {
display: inline-flex;
align-items: center;
gap: 7px;
color: #0B56D9;
font-size: 12px;
font-weight: 800;
}
.catalog-bottom {
padding: 34px 0 28px;
background: #FFFFFF;
}
.catalog-bottom__grid {
display: grid;
grid-template-columns: 0.86fr 1.14fr;
gap: 28px;
}
.catalog-help-card,
.catalog-area-card {
min-height: 290px;
padding: 26px;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}
.catalog-help-card h2,
.catalog-area-card h2 {
margin-bottom: 8px;
color: #111827;
font-size: 25px;
}
.catalog-help-card > p,
.catalog-area-card > div > p {
margin-bottom: 18px;
color: #374151;
font-size: 14px;
}
.catalog-help-card .lead-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-help-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.catalog-help-card .lead-form input,
.catalog-help-card .lead-form textarea {
border-radius: 6px;
min-height: 44px;
font-size: 13px;
}
.catalog-help-card .lead-form textarea {
min-height: 88px;
}
.catalog-help-card .lead-form__consent {
grid-template-columns: 18px 1fr;
font-size: 11px;
line-height: 1.35;
}
.catalog-help-card .button {
min-height: 48px;
border-radius: 6px;
background: #0B56D9;
border-color: #0B56D9;
}
.catalog-area-card {
display: grid;
grid-template-columns: 0.78fr 1fr;
gap: 20px;
overflow: hidden;
}
.catalog-area-card ul {
display: grid;
gap: 13px;
list-style: none;
margin-top: 22px;
}
.catalog-area-card li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: center;
color: #111827;
font-size: 14px;
font-weight: 700;
}
.catalog-area-card li svg {
width: 18px;
height: 18px;
padding: 4px;
color: #FFFFFF;
background: #0B56C5;
border-radius: 50%;
stroke-width: 3;
}
.catalog-area-card img {
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
border-radius: 12px;
}
@media (max-width: 1180px) {
.catalog-card-grid,
.catalog-popular__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.catalog-hero__grid,
.catalog-bottom__grid {
grid-template-columns: 1fr;
}
.catalog-hero__image {
margin-right: 0;
}
.catalog-hero__image::before {
display: none;
}
.portfolio-hero__grid,
.portfolio-single-hero__grid,
.portfolio-single-layout {
grid-template-columns: 1fr;
}
.portfolio-lightbox__dialog {
grid-template-columns: 1fr;
overflow-y: auto;
}
.portfolio-lightbox__media {
min-height: 56vh;
}
.portfolio-hero {
background: #FFFFFF;
}
}
@media (max-width: 860px) {
.catalog-card-grid,
.catalog-popular__grid,
.catalog-area-card {
grid-template-columns: 1fr;
}
.catalog-hero__content h1 {
font-size: 42px;
}
.portfolio-hero h1,
.portfolio-single-hero h1 {
font-size: 38px;
}
.portfolio-single-hero__meta,
.portfolio-check-grid,
.portfolio-gallery {
grid-template-columns: 1fr;
}
.portfolio-lightbox {
padding: 10px;
}
.portfolio-lightbox__dialog {
width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
border-radius: 18px;
}
.portfolio-lightbox__media {
min-height: 48vh;
}
.portfolio-lightbox__image {
max-height: 54vh;
}
.portfolio-lightbox__side {
padding: 22px;
}
.portfolio-lightbox__side h2 {
font-size: 24px;
}
}
@media (max-width: 720px) {
.catalog-hero__content {
padding: 42px 0 24px;
}
.catalog-hero__content h1 {
font-size: 36px;
}
.catalog-hero__actions,
.catalog-help-card .lead-form__grid {
display: grid;
grid-template-columns: 1fr;
}
.catalog-filter {
min-width: auto;
flex: 1 1 auto;
}
} .service-page-hero {
background: #FFFFFF;
overflow: hidden;
}
.service-page-hero__grid {
min-height: 430px;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
align-items: stretch;
}
.service-page-hero__content {
padding: 54px 0;
position: relative;
z-index: 2;
}
.service-page-hero__content h1 {
max-width: 680px;
margin-bottom: 22px;
color: #020617;
font-size: 52px;
line-height: 1.08;
}
.service-page-hero__content > p {
max-width: 560px;
margin-bottom: 28px;
color: #1F2937;
font-size: 18px;
}
.service-page-hero__media {
position: relative;
display: flex;
align-items: stretch;
justify-content: flex-end;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
}
.service-page-hero__media::before {
content: "";
position: absolute;
inset: 0 auto 0 -150px;
z-index: 1;
width: 280px;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0) 100%);
}
.service-page-hero__media img {
width: 100%;
height: 100%;
min-height: 430px;
object-fit: cover;
background: #EEF4FA;
}
.service-page-section {
padding: 34px 0 42px;
background: #FFFFFF;
}
.service-page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 28px;
align-items: start;
}
.service-page-main {
display: grid;
gap: 24px;
}
.service-page-card,
.service-sidebar-card,
.service-page-notice {
padding: 26px;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.service-page-card h2,
.service-sidebar-card h2,
.service-page-notice h2 {
margin-bottom: 16px;
color: #111827;
font-size: 26px;
}
.service-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.service-feature {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: center;
padding: 12px;
border-radius: 10px;
background: #F8FAFC;
color: #111827;
font-weight: 700;
}
.service-feature svg,
.service-list li::before {
color: #0B56C5;
}
.service-feature svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 3;
}
.service-page-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.service-list {
display: grid;
gap: 11px;
list-style: none;
}
.service-list li {
position: relative;
padding-left: 18px;
color: #374151;
}
.service-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.service-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.service-steps-grid article {
padding: 18px;
border-radius: 12px;
background: #F8FAFC;
}
.service-steps-grid span {
display: inline-flex;
margin-bottom: 8px;
color: #0B56C5;
font-family: Manrope, Arial, sans-serif;
font-weight: 800;
}
.service-steps-grid p {
margin: 0;
color: #374151;
font-size: 14px;
}
.service-page-notice {
background: #F8FAFC;
}
.service-page-notice--warning {
margin-bottom: 18px;
background: #FEF2F2;
border-color: #FECACA;
}
.service-page-notice--success {
background: #F0FDF4;
border-color: #BBF7D0;
}
.service-page-sidebar {
position: sticky;
top: 188px;
}
.service-sidebar-card .lead-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-sidebar-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.service-sidebar-card .lead-form input,
.service-sidebar-card .lead-form textarea {
border-radius: 6px;
min-height: 44px;
font-size: 13px;
}
.service-sidebar-card .lead-form__consent {
grid-template-columns: 18px 1fr;
font-size: 11px;
}
.service-sidebar-card .button {
min-height: 48px;
border-radius: 6px;
background: #0B56D9;
border-color: #0B56D9;
}
.taxonomy-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.taxonomy-service-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.taxonomy-service-card img {
width: 100%;
height: 180px;
object-fit: cover;
background: #F8FAFC;
}
.taxonomy-service-card > div {
padding: 20px;
}
.taxonomy-service-card h2 {
margin-bottom: 10px;
font-size: 22px;
}
.taxonomy-service-card p {
margin-bottom: 16px;
color: #374151;
font-size: 15px;
line-height: 1.55;
}
.category-seo-description {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 18px;
margin-top: 26px;
padding: 26px;
border: 1px solid #DDE7F3;
border-radius: 18px;
background: #F8FAFC;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
}
.category-seo-description__icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border: 1px solid #CFE1FF;
border-radius: 16px;
background: #FFFFFF;
color: #0B56D9;
}
.category-seo-description__icon svg {
width: 28px;
height: 28px;
}
.category-seo-description__icon svg path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.category-seo-description .prose {
max-width: none;
color: #334155;
font-size: 16px;
line-height: 1.72;
}
.category-seo-description .prose p {
margin: 0 0 12px;
}
.category-seo-description .prose p:last-child {
margin-bottom: 0;
}
@media (max-width: 1180px) {
.service-page-layout,
.service-page-hero__grid {
grid-template-columns: 1fr;
}
.service-page-sidebar {
position: static;
}
.service-page-hero__media {
margin-right: 0;
}
.service-page-hero__media::before {
display: none;
}
}
@media (max-width: 860px) {
.service-page-two,
.service-feature-grid,
.taxonomy-service-grid {
grid-template-columns: 1fr;
}
.service-steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-page-hero__content h1 {
font-size: 38px;
}
.category-seo-description {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.service-steps-grid,
.service-sidebar-card .lead-form__grid {
grid-template-columns: 1fr;
}
.service-page-hero__content {
padding: 38px 0 24px;
}
} .page-hero--split,
.price-page-hero,
.contacts-hero,
.article-hero {
background: #FFFFFF;
}
.page-hero__grid,
.price-page-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
gap: 42px;
align-items: center;
}
.price-summary,
.contacts-hero__panel,
.home-experts__points,
.contacts-page-side,
.article-sidebar {
display: grid;
gap: 14px;
}
.price-summary-card,
.contacts-hero__panel div {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 18px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: #F8FAFC;
color: #111827;
font-weight: 750;
}
.price-summary-card svg,
.contacts-hero__panel svg,
.home-experts__points svg {
flex: 0 0 22px;
width: 22px;
height: 22px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.price-expert-strip,
.price-help-grid,
.contacts-page-grid,
.faq-page-layout,
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
gap: 32px;
align-items: start;
}
.price-expert-strip {
align-items: center;
}
.price-expert-strip > div:first-child,
.price-faq-panel,
.contact-details-card,
.contact-page__form,
.faq-page-nav,
.article-sidebar .service-mini-card {
padding: 28px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: #FFFFFF;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
.price-section {
padding: 26px;
border: 1px solid var(--color-border);
border-radius: 22px;
background: #FFFFFF;
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05);
}
.price-section + .price-section {
margin-top: 24px;
}
.price-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.price-section__head h2 {
margin: 10px 0 8px;
font-size: 30px;
}
.price-section__head p {
max-width: 720px;
margin: 0;
color: var(--color-muted);
}
.expert-card {
padding: 24px;
border: 1px solid rgba(229, 231, 235, 0.95);
border-radius: 22px;
background: #FFFFFF;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
.expert-card--compact {
padding: 22px;
}
.expert-card__top {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 16px;
}
.expert-card__avatar {
display: grid;
flex: 0 0 72px;
width: 72px;
height: 72px;
place-items: center;
overflow: hidden;
border: 2px solid #DBEAFE;
border-radius: 18px;
background: linear-gradient(135deg, #0B56D9, #0284C7);
color: #FFFFFF;
font-family: Manrope, Arial, sans-serif;
font-size: 32px;
font-weight: 900;
}
.expert-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.expert-card h3 {
margin-bottom: 4px;
font-size: 22px;
}
.expert-card__position,
.expert-card__experience {
margin: 0;
color: var(--color-muted);
}
.expert-card__experience {
margin-bottom: 14px;
}
.expert-card blockquote {
margin: 18px 0;
padding: 16px 18px;
border-left: 4px solid #0B56D9;
border-radius: 0 14px 14px 0;
background: #F8FAFC;
color: #1F2937;
font-weight: 700;
}
.expert-card__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0;
}
.expert-card__chips span {
padding: 7px 10px;
border: 1px solid #BFDBFE;
border-radius: 999px;
background: #EFF6FF;
color: #0B56D9;
font-size: 13px;
font-weight: 800;
}
.expert-card__list {
margin-top: 16px;
}
.home-experts {
padding: 58px 0;
background: #F6F8FA;
}
.home-experts__grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
gap: 36px;
align-items: center;
}
.home-experts__content h2,
.home-blog__head h2 {
margin-bottom: 12px;
font-size: 36px;
}
.home-experts__content p,
.home-blog__head p {
max-width: 680px;
color: var(--color-muted);
font-size: 17px;
}
.home-experts__points {
margin-top: 24px;
}
.home-experts__points span {
display: flex;
align-items: center;
gap: 10px;
color: #1F2937;
font-weight: 800;
}
.home-experts__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.home-experts__cards .expert-card:first-child:last-child {
grid-column: 1 / -1;
}
.home-blog {
padding: 56px 0;
background: #FFFFFF;
}
.home-blog__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 26px;
}
.home-blog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.blog-card {
display: flex;
min-height: 290px;
flex-direction: column;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #FFFFFF;
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}
.blog-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.blog-card__meta span,
.article-hero__service,
.faq-item__service {
color: #0B56D9;
font-size: 13px;
font-weight: 850;
}
.blog-card h2,
.blog-card h3 {
margin-bottom: 12px;
font-size: 22px;
}
.blog-card h2 a,
.blog-card h3 a {
color: inherit;
}
.blog-card p {
color: var(--color-muted);
}
.blog-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 18px;
}
.blog-card__footer a {
color: #0B56D9;
font-weight: 850;
}
.blog-card__more,
.service-mini-card a {
display: inline-flex;
align-items: center;
gap: 7px;
}
.blog-card__more {
white-space: nowrap;
}
.blog-card__more svg,
.service-mini-card a svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.faq-page-nav {
position: sticky;
top: 110px;
display: grid;
gap: 10px;
}
.faq-page-nav a {
padding: 11px 14px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: #F8FAFC;
color: #1F2937;
font-weight: 800;
}
.faq-group + .faq-group {
margin-top: 34px;
}
.faq-group__head {
margin-bottom: 16px;
}
.faq-item__service {
margin-top: 14px;
}
.faq-item__service a {
text-decoration: underline;
text-underline-offset: 3px;
}
.contacts-page-grid {
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
}
.contact-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.contact-card {
display: grid;
gap: 8px;
min-height: 150px;
padding: 22px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.contact-card svg {
width: 24px;
height: 24px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.contact-card span {
color: var(--color-muted);
font-size: 14px;
font-weight: 800;
}
.contact-card strong {
color: #111827;
font-size: 19px;
line-height: 1.25;
}
.contact-details-card,
.contact-map {
margin-top: 20px;
}
.contact-map {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 22px;
background: #FFFFFF;
}
.contact-map iframe {
display: block;
width: 100%;
height: 380px;
border: 0;
}
.article-layout {
grid-template-columns: minmax(0, 760px) minmax(320px, 400px);
}
.article-content {
padding: 30px;
border: 1px solid var(--color-border);
border-radius: 22px;
background: #FFFFFF;
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
}
.article-sidebar {
position: sticky;
top: 110px;
}
.service-mini-card a {
color: #0B56D9;
font-weight: 850;
}
@media (max-width: 1024px) {
.page-hero__grid,
.price-page-hero__grid,
.price-expert-strip,
.price-help-grid,
.contacts-page-grid,
.faq-page-layout,
.article-layout,
.home-experts__grid {
grid-template-columns: 1fr;
}
.home-experts__cards,
.home-blog__grid {
grid-template-columns: 1fr;
}
.faq-page-nav,
.article-sidebar {
position: static;
}
}
@media (max-width: 720px) {
.home-blog__head,
.price-section__head {
display: grid;
align-items: start;
}
.contact-cards {
grid-template-columns: 1fr;
}
.price-section,
.article-content,
.contact-page__form,
.contact-details-card,
.price-faq-panel,
.faq-page-nav,
.price-expert-strip > div:first-child {
padding: 22px;
}
.home-experts__content h2,
.home-blog__head h2,
.price-section__head h2 {
font-size: 28px;
}
} .faq-hero {
overflow: hidden;
background: #FFFFFF;
}
.faq-hero__grid {
min-height: 386px;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
align-items: stretch;
}
.faq-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 58px 0 50px;
}
.faq-hero__content h1 {
max-width: 720px;
margin-bottom: 24px;
color: #020617;
font-size: 50px;
line-height: 1.08;
}
.faq-hero__content p {
max-width: 560px;
margin: 0;
color: #1F2937;
font-size: 18px;
line-height: 1.55;
}
.faq-hero__image {
position: relative;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
}
.faq-hero__image::before {
content: "";
position: absolute;
inset: 0 auto 0 -170px;
z-index: 1;
width: 320px;
background: linear-gradient(90deg, #FFFFFF 4%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0) 100%);
}
.faq-hero__image img {
display: block;
width: 100%;
height: 100%;
min-height: 386px;
object-fit: cover;
}
.faq-main {
padding: 28px 0 36px;
background: #FFFFFF;
}
.faq-tabs {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}
.faq-tab {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 24px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #FFFFFF;
color: #111827;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
cursor: pointer;
font-weight: 850;
}
.faq-tab svg {
width: 20px;
height: 20px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.faq-tab.is-active {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
box-shadow: 0 12px 24px rgba(11, 86, 217, 0.22);
}
.faq-tab.is-active svg {
stroke: #FFFFFF;
}
.faq-main__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 34px;
align-items: start;
}
.faq-accordion {
display: grid;
gap: 12px;
}
.faq-accordion-item {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.faq-accordion-item[hidden] {
display: none;
}
.faq-accordion-item summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 22px;
gap: 16px;
align-items: center;
min-height: 56px;
padding: 16px 20px;
color: #111827;
cursor: pointer;
font-weight: 850;
list-style: none;
}
.faq-accordion-item summary::-webkit-details-marker {
display: none;
}
.faq-accordion-item summary svg {
width: 18px;
height: 18px;
fill: none;
stroke: #0B2B54;
stroke-width: 2;
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.faq-accordion-item[open] {
border-color: #DBEAFE;
box-shadow: 0 14px 32px rgba(11, 86, 217, 0.08);
}
.faq-accordion-item[open] summary {
color: #0B56D9;
}
.faq-accordion-item[open] summary svg {
stroke: #0B56D9;
transform: rotate(-90deg);
}
.faq-accordion-item__body {
padding: 0 20px 20px;
color: #1F2937;
font-size: 15px;
line-height: 1.62;
}
.faq-accordion-item__body p {
margin: 0 0 10px;
}
.faq-consult-card {
position: sticky;
top: 110px;
padding: 34px 28px;
border: 1px solid #E5E7EB;
border-radius: 18px;
background: #FFFFFF;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.faq-consult-card h2 {
max-width: 280px;
margin-bottom: 16px;
color: #111827;
font-size: 30px;
line-height: 1.15;
}
.faq-consult-card > p {
margin-bottom: 22px;
color: #4B5563;
font-size: 15px;
}
.faq-consult-card .lead-form__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.faq-consult-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.faq-consult-card .lead-form input,
.faq-consult-card .lead-form textarea {
min-height: 54px;
border-radius: 8px;
font-size: 14px;
}
.faq-consult-card .lead-form textarea {
min-height: 116px;
}
.faq-consult-card .lead-form__consent {
grid-template-columns: 18px 1fr;
color: #6B7280;
font-size: 11px;
line-height: 1.35;
}
.faq-consult-card .button {
min-height: 56px;
border-radius: 8px;
background: #0B56D9;
border-color: #0B56D9;
}
.faq-consult-card__secure {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 14px;
color: #8A96A8;
font-size: 13px;
line-height: 1.35;
}
.faq-consult-card__secure svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.faq-popular {
padding: 30px 0 34px;
background: #FFFFFF;
}
.faq-popular h2 {
margin-bottom: 22px;
font-size: 32px;
}
.faq-popular__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.faq-service-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
.faq-service-card__image {
display: block;
overflow: hidden;
background: #F8FAFC;
}
.faq-service-card__image img {
display: block;
width: 100%;
height: 150px;
object-fit: cover;
transition: transform 0.22s ease;
}
.faq-service-card:hover .faq-service-card__image img {
transform: scale(1.035);
}
.faq-service-card__body {
padding: 20px;
}
.faq-service-card__title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.faq-service-card__title h3 {
margin: 0;
font-size: 20px;
}
.faq-service-card p {
margin: 0 0 14px;
color: #374151;
font-size: 14px;
line-height: 1.45;
}
.faq-service-card__link {
display: inline-flex;
align-items: center;
gap: 7px;
color: #0B56D9;
font-size: 14px;
font-weight: 850;
}
.faq-service-card__link svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.faq-final {
padding: 0 0 34px;
background: #FFFFFF;
}
.faq-final__panel {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto 180px;
gap: 28px;
align-items: center;
padding: 26px 28px;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}
.faq-final__panel h2 {
margin-bottom: 8px;
font-size: 26px;
}
.faq-final__panel p {
margin: 0;
color: #374151;
font-size: 15px;
}
.faq-final__points {
display: flex;
gap: 22px;
align-items: center;
}
.faq-final__points span {
display: inline-flex;
max-width: 170px;
align-items: center;
gap: 9px;
color: #1F2937;
font-size: 13px;
font-weight: 800;
}
.faq-final__points svg {
flex: 0 0 22px;
width: 22px;
height: 22px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.faq-final__panel .button {
min-height: 56px;
border-radius: 7px;
background: #0B56D9;
border-color: #0B56D9;
}
@media (max-width: 1180px) {
.faq-hero__grid,
.faq-main__grid,
.faq-final__panel {
grid-template-columns: 1fr;
}
.faq-hero__image {
margin-right: 0;
}
.faq-hero__image::before {
display: none;
}
.faq-consult-card {
position: static;
}
.faq-popular__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq-final__points {
flex-wrap: wrap;
}
}
@media (max-width: 720px) {
.faq-hero__content {
padding: 42px 0 24px;
}
.faq-hero__content h1 {
font-size: 34px;
}
.faq-hero__content p {
font-size: 16px;
}
.faq-tabs {
gap: 10px;
}
.faq-tab {
flex: 1 1 auto;
min-height: 46px;
padding: 0 14px;
}
.faq-popular__grid {
grid-template-columns: 1fr;
}
.faq-final__panel,
.faq-consult-card {
padding: 22px;
}
.faq-final__points {
display: grid;
gap: 14px;
}
} .price-hero-reference {
overflow: hidden;
background: #FFFFFF;
}
.price-hero-reference__grid {
min-height: 384px;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
align-items: stretch;
}
.price-hero-reference__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 56px 0 48px;
}
.price-hero-reference__content h1 {
max-width: 680px;
margin-bottom: 24px;
color: #020617;
font-size: 54px;
line-height: 1.06;
}
.price-hero-reference__content p {
max-width: 540px;
margin: 0;
color: #1F2937;
font-size: 18px;
line-height: 1.55;
}
.price-hero-reference__image {
position: relative;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
}
.price-hero-reference__image::before {
content: "";
position: absolute;
inset: 0 auto 0 -170px;
z-index: 1;
width: 320px;
background: linear-gradient(90deg, #FFFFFF 4%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0) 100%);
}
.price-hero-reference__image img {
display: block;
width: 100%;
height: 100%;
min-height: 384px;
object-fit: cover;
}
.price-reference {
padding: 18px 0 38px;
background: #FFFFFF;
}
.price-tabs {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
}
.price-tab {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 22px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #FFFFFF;
color: #111827;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
cursor: pointer;
font-weight: 850;
}
.price-tab svg {
width: 18px;
height: 18px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.price-tab.is-active {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
box-shadow: 0 12px 24px rgba(11, 86, 217, 0.22);
}
.price-tab.is-active svg {
stroke: #FFFFFF;
}
.price-reference__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 26px;
align-items: start;
}
.price-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.price-card-grid.is-filtered {
grid-template-columns: minmax(0, 1fr);
}
.price-card {
display: flex;
min-height: 570px;
flex-direction: column;
padding: 20px 18px 18px;
border-right: 1px solid #E5E7EB;
background: #FFFFFF;
}
.price-card[hidden] {
display: none;
}
.price-card:last-child {
border-right: 0;
}
.price-card__head {
display: flex;
min-height: 44px;
align-items: center;
gap: 11px;
margin-bottom: 16px;
}
.price-card__head h2 {
margin: 0;
color: #0B56D9;
font-size: 24px;
text-transform: uppercase;
}
.price-card--otoplenie .price-card__head h2,
.price-card--avarijnye-raboty .price-card__head h2 {
color: #F04420;
}
.price-card__table {
display: grid;
border-top: 1px solid #E5E7EB;
}
.price-card__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
gap: 12px;
align-items: center;
min-height: 43px;
padding: 10px 0;
border-bottom: 1px solid #E5E7EB;
color: #111827;
font-size: 14px;
line-height: 1.3;
}
.price-card__row--head {
min-height: 38px;
color: #4B5563;
font-size: 13px;
font-weight: 700;
}
.price-card__row strong {
text-align: right;
color: #111827;
font-size: 14px;
font-weight: 850;
}
.price-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 20px;
color: #0B56D9;
font-weight: 850;
}
.price-card__link svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.price-sidebar {
display: grid;
gap: 16px;
}
.price-factor-card,
.price-sidebar-form,
.price-guarantee-card,
.price-faq-card {
padding: 22px;
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.price-factor-card h2,
.price-sidebar-form h2,
.price-faq-card h2 {
margin-bottom: 16px;
font-size: 22px;
}
.price-factor-list {
display: grid;
gap: 17px;
}
.price-factor-list article {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: start;
}
.price-factor-list article > span,
.price-guarantee-card > svg {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #EFF6FF;
color: #0B56D9;
}
.price-factor-list svg,
.price-guarantee-card > svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.price-factor-list h3 {
margin: 0 0 4px;
color: #111827;
font-size: 15px;
}
.price-factor-list p,
.price-sidebar-form p,
.price-guarantee-card p {
margin: 0;
color: #4B5563;
font-size: 13px;
line-height: 1.4;
}
.price-sidebar-form .lead-form__grid {
grid-template-columns: 1fr;
gap: 10px;
}
.price-sidebar-form .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.price-sidebar-form .lead-form input,
.price-sidebar-form .lead-form textarea {
min-height: 42px;
border-radius: 6px;
font-size: 13px;
}
.price-sidebar-form .lead-form textarea {
min-height: 74px;
}
.price-sidebar-form .lead-form__consent {
grid-template-columns: 18px 1fr;
color: #8A96A8;
font-size: 11px;
line-height: 1.35;
}
.price-sidebar-form .button {
min-height: 48px;
border-radius: 6px;
background: #0B56D9;
border-color: #0B56D9;
}
.price-guarantee-card {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: center;
}
.price-guarantee-card h2 {
margin: 0 0 4px;
font-size: 17px;
}
.price-faq-list {
display: grid;
gap: 8px;
}
.price-faq-list .faq-accordion-item {
border-radius: 8px;
}
.price-faq-list .faq-accordion-item summary {
min-height: 42px;
padding: 12px 14px;
font-size: 13px;
}
.price-faq-list .faq-accordion-item__body {
padding: 0 14px 14px;
font-size: 12px;
line-height: 1.45;
}
.price-promise-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 34px 0 24px;
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 14px;
background: #FFFFFF;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.price-promise-row article {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
min-height: 78px;
align-items: center;
padding: 16px;
border-right: 1px solid #E5E7EB;
}
.price-promise-row article:last-child {
border-right: 0;
}
.price-promise-row svg {
width: 28px;
height: 28px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.price-promise-row h3 {
margin: 0 0 4px;
font-size: 15px;
}
.price-promise-row p {
margin: 0;
color: #4B5563;
font-size: 12px;
line-height: 1.35;
}
.price-popular {
padding-top: 4px;
}
.price-popular h2 {
margin-bottom: 18px;
font-size: 26px;
}
.price-popular__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.price-popular-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.price-popular-card img {
display: block;
width: 100%;
height: 130px;
object-fit: cover;
}
.price-popular-card > div {
padding: 16px;
}
.price-popular-card h3 {
display: grid;
grid-template-columns: 24px 1fr;
gap: 8px;
align-items: center;
min-height: 46px;
margin: 0 0 8px;
font-size: 14px;
line-height: 1.3;
}
.price-popular-card p {
margin: 0 0 11px;
color: #111827;
font-weight: 850;
}
.price-popular-card a:last-child {
display: inline-flex;
align-items: center;
gap: 7px;
color: #0B56D9;
font-weight: 850;
}
.price-popular-card a:last-child svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
@media (max-width: 1180px) {
.price-hero-reference__grid,
.price-reference__layout {
grid-template-columns: 1fr;
}
.price-hero-reference__image {
margin-right: 0;
}
.price-hero-reference__image::before {
display: none;
}
.price-sidebar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.price-faq-card {
grid-column: 1 / -1;
}
}
@media (max-width: 980px) {
.price-card-grid,
.price-popular__grid,
.price-promise-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.price-card {
border-bottom: 1px solid #E5E7EB;
}
}
@media (max-width: 720px) {
.price-hero-reference__content {
padding: 42px 0 24px;
}
.price-hero-reference__content h1 {
font-size: 34px;
}
.price-hero-reference__content p {
font-size: 16px;
}
.price-tabs {
gap: 10px;
}
.price-tab {
flex: 1 1 auto;
min-height: 44px;
padding: 0 14px;
}
.price-card-grid,
.price-popular__grid,
.price-promise-row,
.price-sidebar {
grid-template-columns: 1fr;
}
.price-card {
min-height: auto;
border-right: 0;
}
.price-promise-row article {
border-right: 0;
border-bottom: 1px solid #E5E7EB;
}
.price-promise-row article:last-child {
border-bottom: 0;
}
} .blog-index-hero {
overflow: hidden;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
}
.blog-index-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
align-items: stretch;
min-height: 360px;
}
.blog-index-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 46px 36px 46px 0;
}
.blog-index-hero__content h1 {
max-width: 690px;
margin: 16px 0 18px;
font-size: clamp(36px, 4vw, 54px);
line-height: 1.08;
}
.blog-index-hero__content p {
max-width: 570px;
color: #1F2937;
font-size: 18px;
line-height: 1.55;
}
.blog-index-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
margin-top: 20px;
}
.blog-index-hero__badges span {
display: inline-flex;
align-items: center;
gap: 12px;
max-width: 190px;
color: #111827;
font-size: 14px;
font-weight: 850;
line-height: 1.25;
}
.blog-index-hero__badges svg {
flex: 0 0 42px;
width: 42px;
height: 42px;
padding: 9px;
border: 1px solid #DBEAFE;
border-radius: 50%;
background: #FFFFFF;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.10);
}
.blog-index-hero__image {
position: relative;
min-height: 360px;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
overflow: hidden;
}
.blog-index-hero__image::before {
position: absolute;
inset: 0 auto 0 0;
z-index: 1;
width: 42%;
content: "";
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.88) 35%, rgba(255, 255, 255, 0) 100%);
}
.blog-index-hero__image img {
display: block;
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
}
.blog-index {
padding: 24px 0 0;
background: #F6F8FA;
}
.blog-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0 0 26px;
}
.blog-filter-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
gap: 10px;
padding: 0 24px;
border: 1px solid #E5E7EB;
border-radius: 9px;
background: #FFFFFF;
color: #1F2937;
cursor: pointer;
font-weight: 850;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.blog-filter-tab svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-filter-tab.is-active {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
box-shadow: 0 12px 26px rgba(11, 86, 217, 0.24);
}
.blog-index__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28px;
align-items: start;
}
.blog-posts {
display: grid;
gap: 22px;
}
.blog-feature-card,
.blog-article-card,
.blog-sidebar-card,
.blog-consult-strip,
.blog-service-card {
border: 1px solid #E5E7EB;
background: #FFFFFF;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.blog-feature-card {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
gap: 24px;
padding: 18px;
border-radius: 13px;
}
.blog-entry__image {
display: block;
overflow: hidden;
border-radius: 10px;
background: #F1F5F9;
}
.blog-entry__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.blog-entry:hover .blog-entry__image img {
transform: scale(1.025);
}
.blog-feature-card .blog-entry__image {
min-height: 210px;
}
.blog-feature-card .blog-entry__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4px 4px 4px 0;
}
.blog-topic {
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
margin-bottom: 9px;
color: #0B56D9;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.blog-topic svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-topic--otoplenie {
color: #F97316;
}
.blog-topic--avarijnye-raboty {
color: #DC2626;
}
.blog-topic--sovety {
color: #2563EB;
}
.blog-entry h2,
.blog-entry h3 {
margin: 0 0 11px;
}
.blog-entry h2 {
font-size: 28px;
}
.blog-entry h3 {
font-size: 18px;
line-height: 1.22;
}
.blog-entry h2 a,
.blog-entry h3 a,
.blog-popular-item h3 a {
color: inherit;
}
.blog-entry p {
margin-bottom: 16px;
color: #1F2937;
line-height: 1.5;
}
.blog-entry__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: auto;
color: #6B7280;
font-size: 13px;
font-weight: 750;
}
.blog-entry__meta a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: #0B56D9;
font-weight: 900;
}
.blog-entry__meta svg,
.blog-sidebar-link svg,
.blog-service-card > a svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-posts__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.blog-article-card {
display: flex;
overflow: hidden;
min-height: 360px;
flex-direction: column;
border-radius: 12px;
}
.blog-article-card .blog-entry__image {
border-radius: 0;
}
.blog-article-card .blog-entry__image img {
height: 150px;
}
.blog-article-card .blog-entry__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 18px;
}
.blog-article-card p {
margin-bottom: 13px;
color: #4B5563;
font-size: 14px;
}
.blog-article-card .blog-entry__meta {
gap: 8px 12px;
font-size: 12px;
}
.blog-article-card .blog-entry__meta a {
margin-left: 0;
}
.blog-empty {
padding: 22px;
border: 1px dashed #BFDBFE;
border-radius: 14px;
background: #EFF6FF;
color: #1F2937;
font-weight: 800;
}
.blog-sidebar {
position: sticky;
top: 108px;
display: grid;
gap: 18px;
}
.blog-sidebar-card {
padding: 22px;
border-radius: 12px;
}
.blog-sidebar-card h2 {
margin-bottom: 16px;
font-size: 22px;
}
.blog-search {
position: relative;
}
.blog-search input {
width: 100%;
min-height: 52px;
padding: 0 52px 0 16px;
border: 1px solid #DDE3EA;
border-radius: 7px;
background: #FFFFFF;
color: #111827;
font-weight: 700;
}
.blog-search button {
position: absolute;
top: 50%;
right: 10px;
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: 0;
background: transparent;
color: #64748B;
cursor: pointer;
}
.blog-search button svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-topic-cloud {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.blog-topic-cloud a {
padding: 8px 12px;
border: 1px solid #E5E7EB;
border-radius: 7px;
background: #FFFFFF;
color: #64748B;
font-size: 13px;
font-weight: 800;
}
.blog-popular-list {
display: grid;
gap: 15px;
}
.blog-popular-item {
display: grid;
grid-template-columns: 74px 1fr;
gap: 13px;
align-items: center;
}
.blog-popular-item img {
display: block;
width: 74px;
height: 62px;
border-radius: 8px;
object-fit: cover;
}
.blog-popular-item h3 {
margin: 0 0 5px;
font-size: 15px;
line-height: 1.25;
}
.blog-popular-item span {
color: #64748B;
font-size: 12px;
font-weight: 750;
}
.blog-sidebar-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: #0B56D9;
font-weight: 900;
}
.blog-consult-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
gap: 30px;
align-items: center;
margin: 26px 0 8px;
padding: 22px 28px;
border-color: #DBEAFE;
border-radius: 12px;
background: linear-gradient(90deg, #EFF6FF 0%, #FFFFFF 100%);
}
.blog-consult-strip__text {
display: flex;
gap: 18px;
align-items: center;
}
.blog-consult-strip__text > span {
display: grid;
flex: 0 0 54px;
width: 54px;
height: 54px;
place-items: center;
border-radius: 50%;
background: #FFFFFF;
color: #0B56D9;
}
.blog-consult-strip__text svg {
width: 32px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-consult-strip h2 {
margin: 0 0 5px;
font-size: 24px;
}
.blog-consult-strip p {
max-width: 650px;
margin: 0;
color: #1F2937;
}
.blog-consult-form {
gap: 8px;
}
.blog-consult-form__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
}
.blog-consult-form input[type="tel"] {
min-height: 46px;
border-radius: 7px;
background: #FFFFFF;
}
.blog-consult-form button {
min-height: 46px;
padding: 0 22px;
border: 0;
border-radius: 7px;
background: #0B56D9;
color: #FFFFFF;
cursor: pointer;
font-weight: 900;
}
.blog-consult-form__consent {
display: grid;
grid-template-columns: 18px 1fr;
align-items: start;
gap: 8px;
color: #64748B;
font-size: 12px;
font-weight: 700;
}
.blog-consult-form__consent input {
min-height: 18px;
margin-top: 2px;
}
.blog-consult-form__consent a {
color: #0B56D9;
text-decoration: underline;
}
.blog-services {
padding: 0 0 42px;
}
.blog-services h2 {
margin: 0 0 16px;
font-size: 25px;
}
.blog-services__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.blog-service-card {
display: flex;
min-height: 190px;
flex-direction: column;
padding: 22px;
border-radius: 12px;
}
.blog-service-card h3 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #0B56D9;
font-size: 18px;
text-transform: uppercase;
}
.blog-service-card--otoplenie h3,
.blog-service-card--avarijnye-raboty h3 {
color: #F97316;
}
.blog-service-card--avarijnye-raboty h3 {
color: #DC2626;
}
.blog-service-card h3 svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.blog-service-card ul {
display: grid;
gap: 5px;
margin-bottom: 14px;
padding-left: 16px;
color: #111827;
font-size: 14px;
}
.blog-service-card li {
padding-left: 2px;
}
.blog-service-card > a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
color: #0B56D9;
font-weight: 900;
}
.blog-pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.blog-pagination .page-numbers {
display: inline-grid;
min-width: 42px;
min-height: 42px;
place-items: center;
padding: 0 12px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #FFFFFF;
color: #1F2937;
font-weight: 850;
}
.blog-pagination .current {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
}
@media (max-width: 1180px) {
.blog-index-hero__grid,
.blog-index__layout,
.blog-consult-strip {
grid-template-columns: 1fr;
}
.blog-index-hero__image {
margin-right: 0;
}
.blog-sidebar {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-sidebar-card:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 980px) {
.blog-posts__grid,
.blog-services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-feature-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.blog-index-hero__content {
padding: 40px 0 22px;
}
.blog-index-hero__content h1 {
font-size: 34px;
}
.blog-index-hero__content p {
font-size: 16px;
}
.blog-index-hero__badges {
gap: 12px;
}
.blog-index-hero__badges span {
max-width: none;
flex: 1 1 210px;
}
.blog-filter-tab {
flex: 1 1 150px;
padding: 0 14px;
}
.blog-posts__grid,
.blog-services__grid,
.blog-sidebar,
.blog-consult-form__row {
grid-template-columns: 1fr;
}
.blog-feature-card {
padding: 14px;
}
.blog-entry h2 {
font-size: 24px;
}
.blog-consult-strip {
padding: 20px;
}
.blog-consult-strip__text {
align-items: flex-start;
}
} .single-article-page {
background: #FFFFFF;
}
.single-article-hero {
padding: 22px 0 28px;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
}
.single-article-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
gap: 34px;
align-items: start;
margin-top: 12px;
}
.single-article-hero__content h1 {
max-width: 760px;
margin-bottom: 16px;
font-size: clamp(34px, 4.2vw, 50px);
line-height: 1.08;
}
.single-article-meta {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
margin-bottom: 18px;
}
.single-article-meta__item {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1F2937;
font-size: 14px;
font-weight: 800;
}
.single-article-meta__item svg {
width: 22px;
height: 22px;
fill: none;
stroke: #0B56D9;
stroke-width: 2;
}
.single-article-topic--otoplenie svg {
stroke: #F97316;
}
.single-article-topic--avarijnye-raboty svg {
stroke: #DC2626;
}
.single-article-expert,
.article-toc-card,
.article-sidebar-expert,
.article-service-card,
.article-consult-card {
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.single-article-expert {
display: grid;
grid-template-columns: minmax(220px, 0.88fr) minmax(0, 1fr);
gap: 20px;
max-width: 760px;
padding: 18px;
background: #F8FBFF;
}
.single-article-expert__person {
display: grid;
grid-template-columns: 118px 1fr;
gap: 16px;
align-items: center;
}
.single-article-expert__avatar {
display: grid;
width: 118px;
height: 118px;
place-items: center;
overflow: hidden;
border-radius: 12px;
background: #0B56D9;
color: #FFFFFF;
font-family: Manrope, Arial, sans-serif;
font-size: 42px;
font-weight: 900;
}
.single-article-expert__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-article-expert span {
display: block;
margin-bottom: 5px;
color: #1F2937;
font-size: 13px;
font-weight: 900;
}
.single-article-expert h2 {
margin-bottom: 5px;
font-size: 22px;
}
.single-article-expert p,
.single-article-expert small {
display: block;
margin: 0;
color: #4B5563;
font-size: 14px;
line-height: 1.45;
}
.single-article-expert blockquote {
position: relative;
margin: 0;
padding: 8px 0 0 24px;
border-left: 1px solid #BFDBFE;
color: #1F2937;
font-weight: 700;
line-height: 1.5;
}
.single-article-expert blockquote::before {
position: absolute;
top: -4px;
left: 14px;
color: #BFDBFE;
content: "“";
font-family: Georgia, serif;
font-size: 48px;
line-height: 1;
}
.single-article-expert ul {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: -4px;
}
.single-article-expert li {
padding: 7px 10px;
border: 1px solid #BFDBFE;
border-radius: 999px;
background: #FFFFFF;
color: #0B56D9;
font-size: 12px;
font-weight: 850;
}
.single-article-hero__image {
overflow: hidden;
margin: 0;
border-radius: 12px;
background: #F1F5F9;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.single-article-hero__image img {
display: block;
width: 100%;
height: 360px;
object-fit: cover;
}
.single-article-body {
padding: 28px 0 0;
background: #FFFFFF;
}
.single-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 34px;
align-items: start;
}
.single-article-content {
min-width: 0;
}
.single-article-lead {
margin-bottom: 26px;
color: #1F2937;
font-size: 18px;
line-height: 1.62;
}
.single-article-content h2,
.single-article-content h3 {
scroll-margin-top: 120px;
}
.single-article-content h2 {
margin: 30px 0 16px;
font-size: 27px;
}
.single-article-content h3 {
margin: 24px 0 12px;
font-size: 21px;
}
.single-article-content p {
color: #1F2937;
font-size: 17px;
line-height: 1.72;
}
.single-article-content ul,
.single-article-content ol {
display: grid;
gap: 9px;
margin: 0 0 22px;
padding-left: 22px;
}
.single-article-content li {
color: #1F2937;
line-height: 1.55;
}
.single-article-content table {
width: 100%;
margin: 18px 0 26px;
border-collapse: collapse;
overflow: hidden;
border: 1px solid #DDE3EA;
border-radius: 9px;
font-size: 15px;
}
.single-article-content th,
.single-article-content td {
padding: 13px 16px;
border: 1px solid #DDE3EA;
text-align: left;
vertical-align: top;
}
.single-article-content th {
background: #F8FAFC;
color: #111827;
font-weight: 900;
}
.single-article-content blockquote {
position: relative;
margin: 28px 0;
padding: 22px 26px 22px 74px;
border: 1px solid #BFDBFE;
border-radius: 12px;
background: #F8FBFF;
color: #1F2937;
font-weight: 750;
}
.single-article-content blockquote::before {
position: absolute;
top: 18px;
left: 22px;
color: #0B56D9;
content: "“";
font-family: Georgia, serif;
font-size: 68px;
line-height: 0.8;
opacity: 0.25;
}
.single-article-sidebar {
position: sticky;
top: 108px;
display: grid;
gap: 18px;
}
.article-toc-card,
.article-service-card,
.article-consult-card {
padding: 22px;
}
.article-toc-card h2,
.article-service-card h2,
.article-consult-card h2 {
margin-bottom: 14px;
font-size: 20px;
}
.article-toc-card ol {
display: grid;
gap: 10px;
margin: 0;
padding-left: 18px;
}
.article-toc-card a {
color: #1F2937;
font-size: 14px;
font-weight: 800;
}
.article-toc-card__level-3 {
margin-left: 14px;
}
.article-sidebar-expert {
overflow: hidden;
}
.article-sidebar-expert .expert-card {
border: 0;
border-radius: 12px 12px 0 0;
box-shadow: none;
}
.article-sidebar-expert__checked {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid #E5E7EB;
color: #0B56D9;
font-size: 13px;
font-weight: 850;
}
.article-sidebar-expert__checked svg,
.article-service-card > svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.article-service-card {
background: #0B4AA2;
color: #FFFFFF;
}
.article-service-card h2,
.article-service-card p {
color: #FFFFFF;
}
.article-service-card > svg {
margin-bottom: 10px;
}
.article-service-card a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #FFFFFF;
font-weight: 900;
}
.article-service-card a svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.article-consult-card .lead-form__grid {
grid-template-columns: 1fr;
}
.article-consult-card .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.article-consult-card .lead-form input,
.article-consult-card .lead-form textarea {
border-radius: 7px;
}
.article-consult-card .lead-form textarea {
min-height: 116px;
}
.article-consult-card .lead-form__consent {
color: #64748B;
font-size: 12px;
}
.single-article-faq {
margin-top: 32px;
}
.single-article-faq h2,
.single-related-articles h2 {
margin-bottom: 16px;
font-size: 25px;
}
.single-related-articles {
margin-top: 34px;
}
.single-related-articles__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.single-related-card {
overflow: hidden;
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.single-related-card img {
display: block;
width: 100%;
height: 115px;
object-fit: cover;
}
.single-related-card div {
padding: 14px;
}
.single-related-card .blog-topic {
margin-bottom: 6px;
font-size: 10px;
}
.single-related-card h3 {
margin-bottom: 7px;
font-size: 16px;
line-height: 1.25;
}
.single-related-card h3 a {
color: inherit;
}
.single-related-card p {
margin: 0;
color: #64748B;
font-size: 12px;
font-weight: 750;
}
.single-article-final {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
gap: 24px;
align-items: center;
margin: 32px 0 0;
padding: 24px 30px;
border-radius: 12px;
background: #0B56D9;
color: #FFFFFF;
}
.single-article-final h2,
.single-article-final p {
color: #FFFFFF;
}
.single-article-final h2 {
margin-bottom: 5px;
font-size: 24px;
}
.single-article-final p {
margin: 0;
}
.single-article-final a:not(.button) {
color: #FFFFFF;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1120px) {
.single-article-hero__grid,
.single-article-layout {
grid-template-columns: 1fr;
}
.single-article-sidebar {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-toc-card,
.article-consult-card {
grid-column: 1 / -1;
}
}
@media (max-width: 820px) {
.single-article-expert,
.single-related-articles__grid,
.single-article-sidebar,
.single-article-final {
grid-template-columns: 1fr;
}
.single-article-hero__image img {
height: 280px;
}
}
@media (max-width: 640px) {
.single-article-hero__content h1 {
font-size: 33px;
}
.single-article-expert__person {
grid-template-columns: 92px 1fr;
}
.single-article-expert__avatar {
width: 92px;
height: 92px;
}
.single-article-content h2 {
font-size: 24px;
}
.single-article-content p {
font-size: 16px;
}
.single-article-content table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.single-article-final {
padding: 22px;
}
} .catalog-ref-hero {
overflow: hidden;
border-bottom: 1px solid #E5E7EB;
background: #FFFFFF;
}
.catalog-ref-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
align-items: stretch;
min-height: 330px;
}
.catalog-ref-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 36px 46px 0;
}
.catalog-ref-hero__content h1 {
max-width: 680px;
margin-bottom: 18px;
color: #020617;
font-size: clamp(36px, 4vw, 52px);
line-height: 1.08;
}
.catalog-ref-hero__content p {
max-width: 620px;
color: #111827;
font-size: 18px;
line-height: 1.55;
}
.catalog-ref-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 10px;
}
.catalog-ref-hero__actions .button {
min-width: 190px;
min-height: 48px;
border-radius: 7px;
background: #0B56D9;
border-color: #0B56D9;
}
.catalog-ref-hero__actions .button--outline {
background: #FFFFFF;
color: #0B2B54;
}
.catalog-ref-hero__image {
position: relative;
min-height: 330px;
margin-right: calc((100vw - min(100vw - 40px, var(--container))) / -2);
overflow: hidden;
}
.catalog-ref-hero__image::before {
position: absolute;
inset: 0 auto 0 0;
z-index: 1;
width: 38%;
content: "";
background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.86) 36%, rgba(255,255,255,0) 100%);
}
.catalog-ref-hero__image img {
display: block;
width: 100%;
height: 100%;
min-height: 330px;
object-fit: cover;
}
.catalog-ref {
padding: 24px 0 0;
background: #FFFFFF;
}
.catalog-ref-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.catalog-ref-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 22px;
border: 1px solid #DDE3EA;
border-radius: 7px;
background: #FFFFFF;
color: #111827;
font-size: 14px;
font-weight: 850;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.catalog-ref-tab.is-active {
border-color: #0B56D9;
background: #0B56D9;
color: #FFFFFF;
}
.catalog-ref-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 28px;
align-items: start;
}
.catalog-ref-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.catalog-ref-card,
.catalog-ref-benefits,
.catalog-ref-form,
.catalog-ref-popular-card {
border: 1px solid #E5E7EB;
background: #FFFFFF;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.catalog-ref-card {
display: flex;
min-height: 330px;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
}
.catalog-ref-card__media {
position: relative;
min-height: 120px;
background: #F8FAFC;
}
.catalog-ref-card__media img {
display: block;
width: 100%;
height: 138px;
object-fit: cover;
}
.catalog-ref-card__icon {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: #0B56D9;
color: #FFFFFF;
box-shadow: 0 12px 24px rgba(11, 86, 217, 0.22);
}
.catalog-ref-card--otoplenie .catalog-ref-card__icon {
background: #F97316;
}
.catalog-ref-card--avarijnye-raboty .catalog-ref-card__icon {
background: #DC2626;
}
.catalog-ref-card__icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.catalog-ref-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 18px;
}
.catalog-ref-card h2 {
margin-bottom: 10px;
font-size: 21px;
line-height: 1.15;
}
.catalog-ref-card h2 a,
.catalog-ref-card li a,
.catalog-ref-popular-card h3 a {
color: inherit;
}
.catalog-ref-card ul {
display: grid;
gap: 7px;
margin-bottom: 16px;
padding-left: 16px;
}
.catalog-ref-card li {
color: #111827;
font-size: 13px;
line-height: 1.35;
}
.catalog-ref-card li a:hover,
.catalog-ref-popular-card h3 a:hover {
color: #0B56D9;
}
.catalog-ref-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
color: #0B56D9;
font-size: 13px;
font-weight: 900;
}
.catalog-ref-card__link svg,
.catalog-ref-popular-card svg,
.catalog-ref-cta svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.catalog-ref-sidebar {
position: sticky;
top: 108px;
display: grid;
gap: 18px;
}
.catalog-ref-benefits,
.catalog-ref-form {
border-radius: 12px;
padding: 22px;
}
.catalog-ref-benefits {
display: grid;
gap: 20px;
background: #F8FBFF;
}
.catalog-ref-benefits article {
display: grid;
grid-template-columns: 38px 1fr;
gap: 13px;
align-items: start;
}
.catalog-ref-benefits article > span {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: #EFF6FF;
color: #0B56D9;
}
.catalog-ref-benefits svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.catalog-ref-benefits h3 {
margin-bottom: 4px;
font-size: 16px;
}
.catalog-ref-benefits p {
margin: 0;
color: #1F2937;
font-size: 13px;
line-height: 1.4;
}
.catalog-ref-form h2 {
margin-bottom: 8px;
font-size: 22px;
}
.catalog-ref-form > p {
margin-bottom: 16px;
color: #374151;
font-size: 14px;
}
.catalog-ref-form .lead-form__grid {
grid-template-columns: 1fr;
}
.catalog-ref-form .lead-form label:not(.lead-form__consent) > span {
display: none;
}
.catalog-ref-form .lead-form input,
.catalog-ref-form .lead-form textarea {
min-height: 44px;
border-radius: 7px;
font-size: 13px;
}
.catalog-ref-form .lead-form textarea {
min-height: 92px;
}
.catalog-ref-form .lead-form__consent {
font-size: 11px;
line-height: 1.35;
}
.catalog-ref-form .button {
min-height: 46px;
border-color: #0B56D9;
border-radius: 7px;
background: #0B56D9;
}
.catalog-ref-popular {
padding: 28px 0 24px;
}
.catalog-ref-popular h2 {
margin-bottom: 16px;
font-size: 25px;
}
.catalog-ref-popular__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
}
.catalog-ref-popular-card {
overflow: hidden;
min-height: 160px;
border-radius: 10px;
}
.catalog-ref-popular-card img {
display: block;
width: 100%;
height: 82px;
object-fit: cover;
}
.catalog-ref-popular-card > div {
padding: 12px;
}
.catalog-ref-popular-card h3 {
min-height: 38px;
margin-bottom: 7px;
font-size: 13px;
line-height: 1.25;
}
.catalog-ref-popular-card p {
margin: 0;
color: #0B56D9;
font-size: 14px;
font-weight: 900;
}
.catalog-ref-cta {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) minmax(190px, 230px);
gap: 26px;
align-items: center;
margin: 0 0 28px;
overflow: hidden;
padding: 0 18px 0 0;
border-radius: 12px;
background: #082B4F;
color: #FFFFFF;
}
.catalog-ref-cta img {
display: block;
width: 190px;
height: 112px;
object-fit: cover;
}
.catalog-ref-cta h2,
.catalog-ref-cta p {
color: #FFFFFF;
}
.catalog-ref-cta h2 {
margin-bottom: 5px;
font-size: 24px;
}
.catalog-ref-cta p {
margin: 0;
}
.catalog-ref-cta .button {
width: 100%;
min-height: 48px;
border-radius: 7px;
}
@media (max-width: 1180px) {
.catalog-ref-hero__grid,
.catalog-ref-layout {
grid-template-columns: 1fr;
}
.catalog-ref-hero__image {
margin-right: 0;
}
.catalog-ref-sidebar {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.catalog-ref-grid,
.catalog-ref-popular__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-ref-cta {
grid-template-columns: 1fr;
padding: 0 20px 20px;
}
.catalog-ref-cta img {
width: calc(100% + 40px);
height: 180px;
margin: 0 -20px;
}
}
@media (max-width: 720px) {
.catalog-ref-hero__content {
padding: 40px 0 24px;
}
.catalog-ref-hero__content h1 {
font-size: 34px;
}
.catalog-ref-hero__content p {
font-size: 16px;
}
.catalog-ref-hero__actions,
.catalog-ref-grid,
.catalog-ref-popular__grid,
.catalog-ref-sidebar {
grid-template-columns: 1fr;
}
.catalog-ref-tabs {
gap: 10px;
}
.catalog-ref-tab {
flex: 1 1 150px;
padding: 0 14px;
}
}
@media (max-width: 620px) {
.portfolio-hero h1 {
font-size: 34px;
}
}
@media (max-width: 1180px) {
.portfolio-object-layout {
grid-template-columns: 1fr;
}
.portfolio-object-sidebar {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portfolio-object-form-card,
.portfolio-object-side-card:first-child {
grid-column: span 2;
}
}
@media (max-width: 900px) {
.portfolio-object-facts,
.portfolio-object-checks,
.portfolio-material-grid,
.portfolio-result-grid,
.portfolio-object-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portfolio-object-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.portfolio-object-two,
.portfolio-before-after {
grid-template-columns: 1fr;
}
.portfolio-object-slider__item img,
.portfolio-object-cover img {
height: 360px;
}
}
@media (max-width: 720px) {
.portfolio-object-hero h1 {
font-size: 34px;
}
.portfolio-object-hero p {
font-size: 16px;
}
.portfolio-object-facts,
.portfolio-object-checks,
.portfolio-material-grid,
.portfolio-result-grid,
.portfolio-object-gallery,
.portfolio-object-steps,
.portfolio-object-sidebar {
grid-template-columns: 1fr;
}
.portfolio-object-form-card,
.portfolio-object-side-card:first-child {
grid-column: auto;
}
.portfolio-object-card,
.portfolio-object-side-card,
.portfolio-object-side-cta {
padding: 18px;
}
.portfolio-object-slider__item img,
.portfolio-object-cover img {
height: 280px;
}
.portfolio-object-cta {
display: grid;
padding: 22px;
}
.portfolio-object-cta > div {
align-items: flex-start;
}
.portfolio-object-cta .button {
width: 100%;
justify-content: center;
}
}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}.wp-block-quote{box-sizing:border-box;overflow-wrap:break-word}.wp-block-quote.is-large:where(:not(.is-style-plain)),.wp-block-quote.is-style-large:where(:not(.is-style-plain)){margin-bottom:1em;padding:0 1em}.wp-block-quote.is-large:where(:not(.is-style-plain)) p,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p{font-size:1.5em;font-style:italic;line-height:1.6}.wp-block-quote.is-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-large:where(:not(.is-style-plain)) footer,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer{font-size:1.125em;text-align:right}.wp-block-quote>cite{display:block}