/* ============================================================ Строймонтажрегион — общий стиль сайта (style.css) Подключается на всех страницах: Светло-серая тема. Шрифты Oswald + Inter подключаются в страницы. ============================================================ */ :root{ --sky:#DBE8F8; --sky-2:#CDDFF5; --paper:#E9F1FC; --white:#FFFFFF; --blue:#1E56B0; /* акцент (синий) */ --blue-deep:#123B7A; /* акцент тёмный */ --navy:#0B1220; /* тёмный для заголовков/подвала */ --ink:#0A0A0A; /* основной текст */ --muted:#37455A; /* приглушённый текст */ --line:#C3D5EC; --line-soft:rgba(12,24,48,.10); --amber:#F5A524; /* второй акцент (янтарный) */ --amber-deep:#E88709; /* янтарный тёмный */ --shadow:0 18px 40px -24px rgba(18,40,80,.28); --maxw:1200px; --reader:1080px; } /* ---------- Base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,Arial,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.display{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.08;letter-spacing:.01em;color:var(--navy)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .reader{max-width:var(--reader);margin:0 auto;padding:0 24px} .eyebrow{ font-family:'Oswald',sans-serif;font-weight:500; text-transform:uppercase;letter-spacing:.22em; font-size:.78rem;color:var(--blue-deep); display:inline-flex;align-items:center;gap:12px; } .eyebrow::before{content:"";width:34px;height:2px;background:var(--blue)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:'Oswald',sans-serif;font-weight:600; text-transform:uppercase;letter-spacing:.06em;font-size:.95rem; padding:15px 28px;border:2px solid transparent;cursor:pointer; transition:.2s ease;background:none;border-radius:6px; } .btn-amber,.btn-accent{background:var(--blue);color:#fff} .btn-amber:hover,.btn-accent:hover{background:var(--blue-deep)} .btn-ghost{border-color:var(--blue);color:var(--blue-deep)} .btn-ghost:hover{background:var(--blue);color:#fff} .btn-dark{background:var(--navy);color:#fff} .btn-dark:hover{background:#123B7A} :focus-visible{outline:3px solid var(--blue);outline-offset:3px} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:50;background:rgba(233,241,252,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;justify-content:space-between;height:74px;color:var(--ink)} .logo{display:flex;align-items:center;gap:13px} .mark{ width:44px;height:44px;flex:none;background:var(--blue);color:#fff;border-radius:8px; font-family:'Oswald',sans-serif;font-weight:700;font-size:1.15rem; display:grid;place-items:center;position:relative; } .mark::after{content:"";position:absolute;inset:5px;border:1.5px solid rgba(255,255,255,.45);border-radius:4px} .logo b{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;color:var(--navy)} .logo span{display:block;font-size:.68rem;letter-spacing:.18em;color:var(--blue);text-transform:uppercase;margin-top:3px} nav{display:flex;gap:28px} nav a{font-size:.9rem;color:var(--muted);transition:.2s} nav a:hover,nav a.active{color:var(--blue)} .head-cta{display:flex;align-items:center;gap:22px} .menu{display:contents} .phone{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.1rem;color:var(--navy);white-space:nowrap} .phone small{display:block;font-family:'Inter';font-weight:400;font-size:.68rem;color:var(--muted);letter-spacing:.05em} .burger{display:none;background:none;border:none;color:var(--navy);cursor:pointer;padding:8px;margin:-8px;line-height:0} .burger svg{width:28px;height:28px} /* ---------- Hero (главная) ---------- */ .hero{position:relative;background:linear-gradient(135deg,#D8E6F7 0%,#EEF4FC 58%);color:var(--ink);overflow:hidden} .blueprint{ position:absolute;inset:0; background-image: linear-gradient(rgba(30,86,176,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(30,86,176,.10) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(120deg,#000 40%,transparent 92%); -webkit-mask-image:linear-gradient(120deg,#000 40%,transparent 92%); } .hero-glow{position:absolute;right:-10%;top:-20%;width:60%;height:120%; background:radial-gradient(circle at 60% 40%,rgba(30,86,176,.12),transparent 60%);pointer-events:none} .hero-inner{position:relative;padding:86px 0 70px 18px;display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center} .hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);text-transform:uppercase;font-weight:700;color:var(--navy)} .hero h1 .amber{color:var(--blue)} .hero p.lead{margin:26px 0 34px;font-size:1.12rem;color:var(--muted);max-width:44ch} .hero-actions{display:flex;gap:16px;flex-wrap:wrap} .hero-card{ background:var(--white);border:1px solid var(--line);padding:34px 32px; position:relative;border-radius:12px;box-shadow:var(--shadow); } .hero-card::before{content:"";position:absolute;top:0;left:0;width:56px;height:4px;background:var(--blue);border-radius:0 0 4px 0} .hero-card h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px;color:var(--navy)} .hero-card ul{list-style:none;display:grid;gap:13px} .hero-card li{display:flex;gap:12px;font-size:.97rem;color:var(--ink)} .hero-card li b{color:var(--blue);font-family:'Oswald';font-weight:600;flex:none} /* stats strip */ .stats{position:relative;border-top:1px solid var(--line);background:var(--sky-2)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:30px 24px;border-right:1px solid var(--line)} .stat:last-child{border-right:none} .stat .n{font-family:'Oswald';font-weight:700;font-size:2.7rem;color:var(--blue);line-height:1} .stat .l{font-size:.86rem;color:var(--muted);margin-top:8px;letter-spacing:.02em} /* ---------- generic section ---------- */ section{padding:92px 0} .sec-head{max-width:720px;margin-bottom:52px} .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase;margin:16px 0 14px;font-weight:700;color:var(--navy)} .sec-head p{color:var(--muted);font-size:1.05rem} /* ---------- Services ---------- */ .services{background:var(--paper)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-bottom:none;border-right:none;border-radius:12px;overflow:hidden} .svc{ padding:38px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--white);position:relative;transition:.22s ease; } .svc:hover{background:var(--blue);color:#fff;transform:translateY(-2px)} .svc .num{font-family:'Oswald';font-weight:600;font-size:.82rem;letter-spacing:.18em;color:var(--blue-deep)} .svc:hover .num{color:#fff} .svc h3{font-size:1.32rem;text-transform:uppercase;margin:16px 0 12px;font-weight:600;color:var(--navy)} .svc:hover h3{color:#fff} .svc p{font-size:.95rem;color:var(--muted);transition:.22s} .svc:hover p{color:rgba(255,255,255,.9)} .svc .arrow{margin-top:18px;font-family:'Oswald';font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);opacity:0;transform:translateX(-6px);transition:.22s} .svc:hover .arrow{opacity:1;transform:none;color:#fff} /* ---------- Advantages ---------- */ .adv{background:var(--sky)} .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .adv-card{padding:32px 26px;background:var(--white);border-top:4px solid var(--blue);border-radius:0 0 12px 12px;box-shadow:var(--shadow)} .adv-card .ic{width:46px;height:46px;color:var(--blue);margin-bottom:18px} .adv-card h3{font-size:1.12rem;text-transform:uppercase;margin-bottom:10px;font-weight:600;color:var(--navy)} .adv-card p{font-size:.92rem;color:var(--muted)} /* ---------- Process ---------- */ .proc{background:var(--sky-2);position:relative;overflow:hidden} .proc .blueprint{mask-image:linear-gradient(200deg,#000 30%,transparent 90%);-webkit-mask-image:linear-gradient(200deg,#000 30%,transparent 90%)} .proc-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0} .step{padding:30px 24px 30px 0;border-top:2px solid var(--line);position:relative} .step::before{content:"";position:absolute;top:-2px;left:0;width:38%;height:2px;background:var(--blue)} .step .s{font-family:'Oswald';font-weight:700;font-size:2.4rem;color:var(--blue);line-height:1} .step h3{font-size:1.05rem;text-transform:uppercase;margin:14px 0 8px;font-weight:600;color:var(--navy)} .step p{font-size:.88rem;color:var(--muted)} /* ---------- CTA band ---------- */ .band{background:linear-gradient(120deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff} .band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:56px;padding-bottom:56px} .band h2{font-size:clamp(1.7rem,3vw,2.5rem);text-transform:uppercase;font-weight:700;max-width:20ch;color:#fff} .band p{margin-top:12px;font-weight:500;max-width:46ch;color:rgba(255,255,255,.92)} /* ---------- Contacts ---------- */ .contacts{background:var(--sky)} .cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px} .cont-info h2{font-size:clamp(1.9rem,3.4vw,2.7rem);text-transform:uppercase;font-weight:700;margin-bottom:26px;color:var(--navy)} .cont-list{list-style:none;display:grid;gap:22px;margin-top:8px} .cont-list li{display:flex;gap:16px;align-items:flex-start} .cont-list .ic{width:40px;height:40px;flex:none;background:var(--blue);border-radius:8px;display:grid;place-items:center;color:#fff} .cont-list .ic svg{width:20px;height:20px} .cont-list .k{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .cont-list .v{font-family:'Oswald';font-weight:500;font-size:1.15rem;color:var(--navy)} .form{background:var(--white);border:1px solid var(--line);padding:38px 34px;border-radius:12px;box-shadow:var(--shadow)} .form h3{text-transform:uppercase;font-size:1.3rem;margin-bottom:6px;font-weight:600;color:var(--navy)} .form .sub{font-size:.9rem;color:var(--muted);margin-bottom:24px} .field{margin-bottom:16px} .field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .field input,.field textarea{ width:100%;background:var(--paper);border:1px solid var(--line);border-radius:6px; color:var(--ink);padding:13px 15px;font-family:'Inter';font-size:.98rem;transition:.2s; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff} .field textarea{resize:vertical;min-height:92px} .form .btn{width:100%;justify-content:center;margin-top:8px} .form .note{font-size:.74rem;color:var(--muted);margin-top:14px;line-height:1.5} .ok{display:none;text-align:center;padding:30px 10px} .ok.show{display:block} .ok .ic{width:60px;height:60px;background:var(--blue);color:#fff;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px} .ok h3{margin-bottom:8px;color:var(--navy)} .ok p{color:var(--muted);font-size:.95rem} /* ============================================================ Раздел статей (страница «Строительно-монтажные работы») ============================================================ */ /* Page hero — своя вертикальная отбивка, гасим общий section{padding} */ .page-hero{padding:0;background:linear-gradient(135deg,#D8E6F7 0%,#EEF4FC 60%);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .page-hero .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,86,176,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(30,86,176,.09) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(120deg,#000 45%,transparent 92%);-webkit-mask-image:linear-gradient(120deg,#000 45%,transparent 92%)} .page-hero .inner{position:relative;padding:64px 0 58px} .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px} .crumbs a:hover{color:var(--blue)} .page-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);text-transform:uppercase;font-weight:700;margin:16px 0 16px} .page-hero p{max-width:70ch;color:var(--muted);font-size:1.08rem} /* Оглавление */ .toc{max-width:var(--reader);margin:44px auto 0;padding:0 24px} .toc-inner{background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:26px 30px} .toc h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:16px} .toc ol{list-style:none;counter-reset:t;display:grid;gap:12px} .toc li{counter-increment:t;display:flex;gap:14px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line)} .toc li:last-child{border-bottom:none;padding-bottom:0} .toc li::before{content:counter(t,decimal-leading-zero);font-family:'Oswald';font-weight:700;color:var(--blue);font-size:1rem;flex:none} .toc a{font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:1.02rem;color:var(--navy)} .toc a:hover{color:var(--blue)} .toc .d{display:block;font-family:'Inter';font-weight:400;text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--muted);margin-top:2px} /* Статьи */ main{padding:60px 0 40px} .article{max-width:var(--reader);margin:0 auto 56px;padding:0 24px} .article-inner{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden} .article-media{position:relative;width:100%;aspect-ratio:16/6;background:var(--navy)} .article-media svg{position:absolute;inset:0;width:100%;height:100%} .article-media .cap{position:absolute;left:20px;bottom:16px;background:rgba(11,18,32,.82);color:#fff;font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;padding:6px 12px;border-radius:4px} .article-body{padding:44px clamp(22px,4vw,60px) 50px;line-height:1.7} .a-tag{font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--blue-deep)} .article-body h2{font-size:clamp(1.6rem,3vw,2.25rem);text-transform:uppercase;margin:14px 0 10px} .article-body h2::before{content:"";display:block;width:54px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--amber),var(--amber-deep));margin-bottom:14px} .article-body .meta{font-size:.85rem;color:var(--muted);margin-bottom:26px;display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px} .article-body h3{font-size:1.4rem;margin:38px 0 12px;padding-top:6px} .article-body h4{font-size:1.12rem;margin:26px 0 8px;color:var(--ink)} .article-body p{margin:0 0 16px} .article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px} .article-body li{margin-bottom:9px} .article-body p.lead{font-size:1.14rem;color:var(--ink)} .article-body strong{color:var(--navy)} .callout{background:var(--sky);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:18px 22px;margin:24px 0;font-size:.98rem} .callout b{color:var(--navy)} .keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:26px 0} .keyfacts div{padding:20px 18px;border-right:1px solid var(--line)} .keyfacts div:last-child{border-right:none} .keyfacts .n{font-family:'Oswald';font-weight:700;font-size:1.9rem;color:var(--blue);line-height:1} .keyfacts .l{font-size:.82rem;color:var(--muted);margin-top:6px} .faq{margin-top:30px} .faq details{border:1px solid var(--line);border-radius:8px;padding:0 20px;margin-bottom:12px;background:var(--paper)} .faq summary{cursor:pointer;font-family:'Oswald';font-weight:500;font-size:1.05rem;color:var(--navy);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--blue);font-size:1.3rem;font-weight:700} .faq details[open] summary::after{content:"–"} .faq details[open] summary{border-bottom:1px solid var(--line)} .faq .fa{padding:14px 0 18px;color:var(--muted);font-size:.97rem} .article-cta{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .article-cta p{margin:0;font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);font-size:1.05rem} /* ---------- Footer ---------- */ footer{background:var(--navy);color:#B8BABE;padding:44px 0} .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .foot .logo b{color:#fff} .foot .logo span{color:#AFB2B7} .foot small{font-size:.82rem;line-height:1.6} .foot .req{font-size:.78rem;color:#8B8E93;margin-top:8px} /* ---------- Responsive ---------- */ @media(max-width:1000px){ .burger{display:block} .menu{ display:none;position:absolute;top:74px;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--white);border-bottom:1px solid var(--line); box-shadow:0 22px 30px -22px rgba(30,32,36,.45);padding:6px 0 14px; } header.open .menu{display:flex} .menu nav{display:flex;flex-direction:column;gap:0;width:100%} .menu nav a{padding:14px 24px;font-size:1.02rem;border-bottom:1px solid var(--line-soft)} .menu .head-cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 24px 0} .menu .head-cta .phone{font-size:1.18rem} .menu .head-cta .btn{justify-content:center;padding:14px 20px} .hero-inner{grid-template-columns:1fr;gap:40px} .svc-grid{grid-template-columns:repeat(2,1fr)} .adv-grid{grid-template-columns:repeat(2,1fr)} .proc-grid{grid-template-columns:repeat(2,1fr);gap:22px} .step{border-top:none}.step::before{width:60px} .cont-grid{grid-template-columns:1fr;gap:40px} } @media(max-width:640px){ .wrap{padding:0 20px} .reader,.toc,.article{padding-left:16px;padding-right:16px} section{padding:64px 0} .hero-inner{padding:64px 0 54px} .hero h1{font-size:clamp(2.1rem,8vw,3rem)} .stats-grid{grid-template-columns:repeat(2,1fr)} .stat{border-bottom:1px solid var(--line)} .stat:nth-child(2){border-right:none} .svc-grid,.adv-grid,.proc-grid{grid-template-columns:1fr} .band .wrap{flex-direction:column;align-items:flex-start;text-align:left} .hero-actions .btn{flex:1;justify-content:center} .article-body{padding:32px 20px 40px} .article-cta{flex-direction:column;align-items:stretch} .article-cta .btn{justify-content:center} .foot{flex-direction:column;align-items:flex-start;gap:16px} .keyfacts{grid-template-columns:1fr} .keyfacts div{border-right:none;border-bottom:1px solid var(--line)} .keyfacts div:last-child{border-bottom:none} .article-media{aspect-ratio:16/9} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} }