/* ПРОМПОЛ — дизайн-система Layout-система: «разметка объекта» (белые линии зон, угловые маркеры, коды позиций моно). Палитра выведена из реальных материалов: бетон + hi-vis лайм сигнальных жилетов. */ /* ─────────────── Шрифты (локальные, OFL, кириллица) ─────────────── */ @font-face{font-family:Geologica;src:url(../fonts/geologica-600-cyrillic.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Geologica;src:url(../fonts/geologica-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:Geologica;src:url(../fonts/geologica-700-cyrillic.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Geologica;src:url(../fonts/geologica-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-400-cyrillic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-500-cyrillic.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-700-cyrillic.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Commissioner;src:url(../fonts/commissioner-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Martian Mono";src:url(../fonts/martian-mono-500-cyrillic.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Martian Mono";src:url(../fonts/martian-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} /* ─────────────── Токены ─────────────── */ :root{ --hdr:67px; /* фактическая высота шапки, замерена */ --ink:#0C0F12; --ink-2:#161B21; --ink-3:#1F262E; --steel:#39424C; --dust:#8C949C; --line:#DDE1E4; --line-2:#EDEFF1; --paper:#F4F5F6; --white:#fff; --hi:#C6F000; --hi-deep:#5F7500; --hi-soft:#EBFFA3; --alert:#FF4D2E; --alert-deep:#C42D12; --fg:var(--ink); --muted:var(--steel); --wrap:1240px; --gut:clamp(16px,4vw,40px); --r:14px; --r-lg:20px; --sec:clamp(64px,8vw,110px); --ff-d:Geologica,"Segoe UI",system-ui,sans-serif; --ff-b:Commissioner,"Segoe UI",system-ui,sans-serif; --ff-m:"Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; --sh-1:0 1px 2px rgba(12,15,18,.06),0 4px 14px rgba(12,15,18,.06); --sh-2:0 2px 4px rgba(12,15,18,.08),0 16px 40px rgba(12,15,18,.10); --ease:cubic-bezier(.22,.61,.36,1); } /* ─────────────── База ─────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* clip, НЕ hidden: hidden делает body скролл-контейнером и убивает sticky-шапку */ html,body{overflow-x:clip} body{margin:0;background:var(--paper);color:var(--fg); font:400 clamp(16px,1.03vw,17.5px)/1.62 var(--ff-b); font-feature-settings:"ss01","cv01";text-rendering:optimizeLegibility} img,svg,video{max-width:100%;height:auto;display:block} /* ставит to_picture() в core.py. display:contents убирает лишний бокс: правила вроде «.card__pic img{height:100%}» считают img прямым потомком блока, и без этого картинка в них схлопывается. */ picture{display:contents} a{color:inherit} /* длинные русские слова («конфиденциальности», «производственных») на 360 вылезали за экран */ h1,h2,h3,h4{font-family:var(--ff-d);font-weight:700;line-height:1.08;letter-spacing:-.022em;margin:0 0 .5em; overflow-wrap:break-word;hyphens:auto} h1{font-size:clamp(34px,5.4vw,62px)} h2{font-size:clamp(27px,3.5vw,44px)} h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.014em} h4{font-size:clamp(17px,1.4vw,19px);font-weight:600;letter-spacing:-.008em} p{margin:0 0 1em} ul,ol{margin:0 0 1em;padding-left:1.15em} li{margin:.3em 0} b,strong{font-weight:700} hr{border:0;border-top:1px solid var(--line);margin:32px 0} ::selection{background:var(--hi);color:var(--ink)} /* Стилизованный скроллбар (не оставляем системный) */ html{scrollbar-width:thin;scrollbar-color:var(--steel) var(--line-2)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--line-2)} ::-webkit-scrollbar-thumb{background:var(--steel);border-radius:8px;border:3px solid var(--line-2)} ::-webkit-scrollbar-thumb:hover{background:var(--ink)} :focus-visible{outline:3px solid var(--hi);outline-offset:2px;border-radius:4px} .on-dark :focus-visible,.hero :focus-visible{outline-color:var(--hi)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hi);color:var(--ink); padding:12px 20px;font-weight:700;border-radius:0 0 10px 0} .skip:focus{left:0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} /* 🚨 Колонка грида по умолчанию не ужимается ниже min-content содержимого: широкая таблица или длинное слово выпихивают весь блок за экран. min-width:0 это снимает. */ .split>*,.grid>*,.band__cols>*,.pir>*,.sec-head--split>*,.rows .row>*,.stats>*,.footer__top>*, .pir__grid>*,.pir__gar>*,.form-grid>*{min-width:0} .sec{padding-block:var(--sec);position:relative} .sec--paper{background:var(--paper)} .sec--white{background:var(--white)} .sec--tight{padding-block:clamp(40px,5vw,68px)} /* плейсхолдеры компонентов: футер не создаёт бокс, шапке резервируем высоту (CLS) */ #site-header{display:block;min-height:67px} #site-footer{display:contents} @media(min-width:1180px){:root{--hdr:79px}#site-header{min-height:79px}} /* ─────────────── Мотив «разметка объекта» ─────────────── */ .eyebrow{font:500 11.5px/1 var(--ff-m);letter-spacing:.14em;text-transform:uppercase; color:var(--hi-deep);margin:0 0 14px;display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:26px;height:3px;background:var(--hi);flex:none} /* 🚨 Единый список ТЁМНЫХ контекстов. Раньше акцентные правила висели только на .on-dark, а .hero/.phead/.band/.film/.footer тоже тёмные — и eyebrow с ghost-кнопкой оставались тёмными на тёмном (checklist D24/D32/D58). Замер: eyebrow давал 3,69:1, ghost — 1,00:1. */ .on-dark .eyebrow,.hero .eyebrow,.phead .eyebrow,.band .eyebrow,.film .eyebrow, .footer .eyebrow,.cookie .eyebrow{color:var(--hi)} .on-dark .eyebrow::before,.hero .eyebrow::before,.phead .eyebrow::before,.band .eyebrow::before, .film .eyebrow::before,.footer .eyebrow::before,.cookie .eyebrow::before{background:var(--hi)} /* .code на СВЕТЛОМ: --dust давал 2,82:1 на paper и 3,07:1 на white */ .code{font:500 11px/1 var(--ff-m);letter-spacing:.1em;color:#5F6870;text-transform:uppercase} .on-dark .code,.hero .code,.phead .code,.band .code,.film .code,.footer .code, .pir__ask .code,.tol .code,.drawer .code{color:var(--dust)} .mono{font-family:var(--ff-m);font-weight:500;letter-spacing:-.02em} .nb{white-space:nowrap} /* зона разметки: пунктирная граница + угловые засечки */ .zone{position:relative;border:1px dashed var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,30px)} .zone::before,.zone::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--hi)} .zone::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:var(--r) 0 0 0} .zone::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 var(--r) 0} .on-dark .zone{border-color:#2C343D} .sec-head{max-width:none} .sec-head p{color:var(--muted);max-width:66ch;font-size:1.05em} .sec-head--split{display:grid;gap:clamp(18px,3vw,44px);align-items:end;grid-template-columns:1fr} @media(min-width:900px){.sec-head--split{grid-template-columns:1.15fr .85fr} .sec-head--split p{margin-bottom:.35em}} .lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--muted)} .muted{color:var(--muted)} .small{font-size:.88em;line-height:1.55} /* ─────────────── Кнопки ─────────────── */ .btn{--bg:var(--ink);--bfg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 26px;border-radius:10px;background:var(--bg);color:var(--bfg); font:700 15.5px/1.15 var(--ff-b);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease); white-space:nowrap;text-align:center} .btn svg{width:18px;height:18px;flex:none} .btn:hover{box-shadow:var(--sh-2)} .btn:active{transform:translateY(1px)} .btn--primary{--bg:var(--hi);--bfg:var(--ink)} .btn--primary:hover{--bg:#D6FF16} .btn--ghost{--bg:transparent;--bfg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .btn--ghost:hover{--bg:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-1)} .on-dark .btn--ghost,.hero .btn--ghost,.phead .btn--ghost,.band .btn--ghost, .film .btn--ghost,.footer .btn--ghost,.cookie .btn--ghost,.drawer .btn--ghost{ --bfg:#fff;box-shadow:inset 0 0 0 1.5px #39424C} .on-dark .btn--ghost:hover,.hero .btn--ghost:hover,.phead .btn--ghost:hover,.band .btn--ghost:hover, .film .btn--ghost:hover,.footer .btn--ghost:hover,.cookie .btn--ghost:hover,.drawer .btn--ghost:hover{ --bg:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px var(--hi)} .btn--lg{padding:18px 32px;font-size:16.5px} .btn--block{width:100%} @media(max-width:560px){.btn{white-space:normal;max-width:100%}} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* ─────────────── Тёмные секции ─────────────── */ .on-dark{background:var(--ink);color:#E8EAEC} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff} .on-dark .muted,.on-dark .sec-head p,.on-dark .lead{color:#9DA5AD} .on-dark a:not(.btn){color:var(--hi)} .on-dark hr{border-color:#252D35} /* ─────────────── Шапка ─────────────── */ .header{position:sticky;top:0;z-index:60;background:rgba(12,15,18,.92); backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid #222932;color:#fff} .header__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:66px} @media(min-width:1180px){.header__in{min-height:78px}} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:none;margin-right:auto} .brand__mark{width:33px;height:33px;flex:none} .brand__txt{display:flex;flex-direction:column;line-height:1} .brand__name{font:700 19px/1 var(--ff-d);letter-spacing:.01em} .brand__sub{font:500 9.5px/1.3 var(--ff-m);letter-spacing:.1em;color:var(--dust);text-transform:uppercase;margin-top:4px} .nav{display:none} @media(min-width:1180px){.nav{display:block}} .nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nav>ul>li{position:relative} .nav a,.nav .nav__btn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap; padding:10px 11px;border-radius:9px;text-decoration:none;color:#D5DADF; font:500 14.5px/1 var(--ff-b);background:none;border:0;cursor:pointer;font-family:var(--ff-b)} .nav a:hover,.nav .nav__btn:hover,.nav .has-sub:focus-within>.nav__btn{color:#fff;background:#1C232B} .nav a[aria-current=page]{color:var(--hi)} .nav .nav__btn svg{width:15px;height:15px;transition:transform .2s var(--ease)} .has-sub:hover>.nav__btn svg,.has-sub:focus-within>.nav__btn svg{transform:rotate(180deg)} /* мостик через мёртвый зазор кнопка→выпадашка */ .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;display:none} .has-sub:hover::after,.has-sub:focus-within::after{display:block} /* 🚨 width:max-content без потолка = выпадашка растёт по самому длинному пункту и вылезает за правый край экрана (у «Услуг» было 1225px при окне 1280 — вылет 530px). Ставим max-width, тогда текст переносится, а панель всегда остаётся в экране. */ .subnav{position:absolute;left:0;top:calc(100% + 12px);z-index:5; display:grid;width:max-content;min-width:270px;max-width:min(340px,calc(100vw - 28px));gap:2px; background:#141A21;border:1px solid #262E37;border-radius:14px;padding:8px; list-style:none;margin:0;box-shadow:0 24px 60px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(-8px); transition:transform .18s var(--ease)} .has-sub:hover>.subnav,.has-sub:focus-within>.subnav,.subnav.is-open{ opacity:1;visibility:visible;transform:none} /* nowrap нужен верхней строке меню (.nav a), но в выпадашке он наследовался на описания — из-за него панель и разрасталась вширь вместо переноса. Здесь сбрасываем. */ .subnav a{display:block;padding:10px 12px;border-radius:9px;font-size:14.5px;color:#D5DADF; white-space:normal} .subnav a b{display:block;font-weight:600;color:#fff;font-size:15px} .subnav a span{display:block;font-size:12.5px;color:#818A93;margin-top:2px;line-height:1.4} .subnav a:hover{background:#1F2731} .subnav--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(600px,calc(100vw - 28px))} .header__phone{display:none;text-decoration:none;text-align:right;flex:none} @media(min-width:1180px){.header__phone{display:block}} .header__phone a{text-decoration:none} .header__phone b{display:block;font:700 17px/1.1 var(--ff-d);color:#fff;letter-spacing:-.01em} .header__call{display:block;margin:5px 0 0 auto;padding:0;background:none;border:0;cursor:pointer; font:500 11px/1 var(--ff-m);color:var(--hi);letter-spacing:.04em; border-bottom:1px dashed rgba(198,240,0,.5);padding-bottom:2px} .header__call:hover{border-bottom-style:solid} .header__cta{display:none} /* CTA в шапке появляется только когда для неё реально есть место: на 1280 бренд + меню + телефон + кнопка не помещались и кнопку срезало */ @media(min-width:1440px){.header__cta{display:inline-flex}} .burger{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;margin-left:auto;border-radius:10px;border:1px solid #2A323B; background:#161C23;color:#fff;cursor:pointer;flex:none} .burger svg{width:22px;height:22px} @media(min-width:1180px){.burger{display:none}} /* Оверлеи ВНЕ
(backdrop-filter предка ломает position:fixed) */ .scrim{position:fixed;inset:0;z-index:70;background:rgba(8,10,12,.6); opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s} .scrim.is-open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(400px,92vw); background:var(--ink);color:#fff;border-left:1px solid #232A32; transform:translateX(102%);transition:transform .3s var(--ease); display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain} .drawer.is-open{transform:none} .drawer__top{display:flex;align-items:center;justify-content:space-between; padding:16px 18px;border-bottom:1px solid #232A32;position:sticky;top:0;background:var(--ink);z-index:2} .drawer__close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; border-radius:10px;border:1px solid #2A323B;background:#161C23;color:#fff;cursor:pointer} .drawer__close svg{width:22px;height:22px} .drawer__body{padding:14px 18px 28px} .dnav{list-style:none;margin:0;padding:0} .dnav>li{border-bottom:1px solid #1C232B} .dnav a,.dnav .acc__btn{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;padding:15px 2px;color:#E8EAEC;text-decoration:none; font:600 16.5px/1.25 var(--ff-b);background:none;border:0;cursor:pointer;text-align:left;font-family:var(--ff-b)} .dnav a[aria-current=page]{color:var(--hi)} .dnav .acc__btn svg{width:19px;height:19px;flex:none;transition:transform .2s var(--ease);color:var(--dust)} .dnav .acc__btn[aria-expanded=true] svg{transform:rotate(180deg)} .dnav__sub{list-style:none;margin:0 0 12px;padding:0 0 0 14px;border-left:2px solid #232A32} .dnav__sub[hidden]{display:none} .dnav__sub a{padding:10px 2px;font-weight:400;font-size:15px;color:#A7AFB7} .drawer__cta{margin-top:22px;display:grid;gap:10px} .drawer__phone{margin-top:20px;padding-top:18px;border-top:1px solid #232A32} .drawer__phone a{font:700 21px/1.2 var(--ff-d);color:#fff;text-decoration:none;display:block} .drawer__phone span{font-size:13.5px;color:var(--dust);display:block;margin-top:4px} /* ─────────────── Модалка ─────────────── */ .modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px; opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s} .modal.is-open{opacity:1;visibility:visible} .modal__bd{position:absolute;inset:0;background:rgba(8,10,12,.72);cursor:pointer} .modal__box{position:relative;z-index:1;width:min(520px,100%);max-height:92vh;overflow-y:auto; background:var(--white);color:var(--fg);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px); box-shadow:0 40px 100px rgba(0,0,0,.45);transform:translateY(14px);transition:transform .22s var(--ease)} .modal.is-open .modal__box{transform:none} .modal__close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:10px; border:1px solid var(--line);background:var(--white);color:var(--steel);cursor:pointer; display:inline-flex;align-items:center;justify-content:center} .modal__close svg{width:20px;height:20px} .modal .form-actions{display:block} .modal .form-actions .btn{width:100%} /* display:block отключает gap флекса — задаём отступ явно, иначе согласие прилипает вплотную к кнопке отправки */ .modal .form-actions > * + *{margin-top:16px} /* ─────────────── Hero ─────────────── */ .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate} .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%} .hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(12,15,18,.94) 0%,rgba(12,15,18,.86) 30%,rgba(12,15,18,.34) 58%,rgba(12,15,18,.52) 100%)} @media(max-width:860px){.hero__bg::after{background:linear-gradient(180deg,rgba(12,15,18,.92) 0%,rgba(12,15,18,.72) 42%,rgba(12,15,18,.90) 100%)}} .hero__in{padding-block:clamp(52px,8vw,104px) clamp(40px,6vw,80px); display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;align-items:start} @media(min-width:1000px){.hero__in{grid-template-columns:1.06fr .94fr;gap:clamp(36px,4vw,64px)}} .hero h1{margin-bottom:.42em} .hero h1 em{font-style:normal;color:var(--hi)} .hero__lead{font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.58;color:#B6BDC4;max-width:60ch;margin-bottom:26px} .hero__note{margin-top:20px;font-size:13.5px;color:#7E878F;display:flex;align-items:flex-start;gap:9px;max-width:56ch} .hero__note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--dust)} /* Панель допуска — 4 цифры приёмки */ .tol{background:rgba(15,19,24,.90);border:1px solid #2B333C;border-radius:var(--r-lg); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden} .tol__top{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 20px;border-bottom:1px solid #2B333C;background:rgba(198,240,0,.05)} .tol__top b{font:600 13px/1 var(--ff-m);letter-spacing:.08em;text-transform:uppercase;color:var(--hi)} .tol__top span{font:500 11px/1 var(--ff-m);color:var(--dust);letter-spacing:.06em} .tol__grid{display:grid;grid-template-columns:1fr 1fr} .tol__i{padding:20px;border-bottom:1px solid #232B33} .tol__i:nth-child(odd){border-right:1px solid #232B33} .tol__i:nth-last-child(-n+2){border-bottom:0} .tol__v{font:700 clamp(26px,3vw,36px)/1 var(--ff-d);color:#fff;letter-spacing:-.03em;display:flex; align-items:baseline;gap:5px} .tol__v i{font-style:normal;font-size:.5em;font-weight:600;color:var(--hi)} .tol__k{font-size:13px;line-height:1.4;color:#8E979F;margin-top:8px} .tol__foot{padding:15px 20px;background:rgba(12,15,18,.6);border-top:1px solid #2B333C; font-size:12.5px;color:#7E878F;line-height:1.5} /* ─────────────── Фото-полосы ─────────────── */ .band{position:relative;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate} .band__bg{position:absolute;inset:0;z-index:-2} .band__bg img{width:100%;height:100%;object-fit:cover} .band__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(92deg,rgba(12,15,18,.95) 0%,rgba(12,15,18,.86) 44%,rgba(12,15,18,.42) 100%)} @media(max-width:800px){.band__bg::after{background:linear-gradient(180deg,rgba(12,15,18,.90),rgba(12,15,18,.94))}} .band__in{padding-block:clamp(58px,7vw,96px)} .band__in .lead,.band__in p{color:#B6BDC4} .band__cols{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr} @media(min-width:900px){.band__cols{grid-template-columns:1.1fr .9fr;align-items:center}} /* ─────────────── Карточки ─────────────── */ .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r); color:var(--fg);display:flex;flex-direction:column;overflow:hidden; transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)} a.card{text-decoration:none} a.card:hover{border-color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-3px)} .card__pic{position:relative;aspect-ratio:4/3;background:var(--line-2);overflow:hidden} .card__pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} a.card:hover .card__pic img{transform:scale(1.04)} .card__tag{position:absolute;left:12px;top:12px;background:var(--hi);color:var(--ink); font:500 10.5px/1 var(--ff-m);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:6px} .card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .card__body h3{margin-bottom:.35em} .card__body p{color:var(--muted);font-size:.94em;margin-bottom:14px} .card__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2); display:flex;align-items:center;justify-content:space-between;gap:12px} .card__price{font:700 17px/1 var(--ff-d);color:var(--ink)} .card__price i{font-style:normal;font-size:12px;font-weight:500;color:var(--muted);font-family:var(--ff-b)} .card__go{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--ff-b);color:var(--ink)} .card__go svg{width:16px;height:16px;transition:transform .2s var(--ease)} a.card:hover .card__go svg{transform:translateX(4px)} .on-dark .card{background:var(--ink-2);border-color:#2A323B;color:#E8EAEC} .on-dark .card h3,.on-dark .card__price,.on-dark .card__go{color:#fff} .on-dark .card__foot{border-top-color:#252D35} .on-dark a.card:hover{border-color:var(--hi)} .grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:1fr} @media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)}} /* ─────────────── Иконка-бейдж ─────────────── */ .ibadge{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#fff,#EDF0F2);box-shadow:inset 0 0 0 1px rgba(12,15,18,.09),0 2px 6px rgba(12,15,18,.07); color:var(--ink);flex:none} .ibadge svg{width:22px;height:22px} .ibadge--hi{background:linear-gradient(160deg,var(--hi),#AEDB00);box-shadow:inset 0 0 0 1px rgba(12,15,18,.14)} .on-dark .ibadge{background:linear-gradient(160deg,#242C35,#1A2129);box-shadow:inset 0 0 0 1px #333C46;color:#fff} .on-dark .ibadge--hi{background:linear-gradient(160deg,var(--hi),#9EC800);color:var(--ink)} /* ─────────────── Строки-фичи ─────────────── */ .rows{display:grid;gap:0;border-top:1px solid var(--line)} .row{display:grid;gap:14px 22px;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line); grid-template-columns:1fr;align-items:start} @media(min-width:820px){.row{grid-template-columns:56px minmax(200px,.9fr) 1.5fr}} .row__n{font:500 12px/1 var(--ff-m);color:var(--hi-deep);padding-top:6px;letter-spacing:.06em} .row h3{margin:0 0 .2em} .row p{margin:0;color:var(--muted)} .on-dark .rows,.on-dark .row{border-color:#242C34} .on-dark .row__n{color:var(--hi)} /* ─────────────── Сплит текст+фото ─────────────── */ .split{display:grid;gap:clamp(26px,3.4vw,52px);grid-template-columns:1fr;align-items:center} @media(min-width:920px){.split{grid-template-columns:1fr 1fr} /* кадр держится у верха, пока листается более длинная текстовая колонка */ .split--sticky>.split__pic{position:sticky;top:calc(var(--hdr) + 18px);align-self:start} .split--wide-l{grid-template-columns:1.2fr .8fr} .split--wide-r{grid-template-columns:.8fr 1.2fr} .split--rev>.split__pic{order:-1}} .split__pic{border-radius:var(--r-lg);overflow:hidden;position:relative;background:var(--line-2)} .split__pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .split__cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:30px 20px 16px; color:#fff;font-size:12.5px;line-height:1.45; background:linear-gradient(180deg,rgba(12,15,18,0) 0%,rgba(12,15,18,.55) 45%,rgba(12,15,18,.88) 100%)} /* ─────────────── Цифры ─────────────── */ .stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; grid-template-columns:repeat(2,1fr)} @media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}} .stats--3,.stats--2{grid-template-columns:repeat(2,1fr)} @media(min-width:560px){.stats--3{grid-template-columns:repeat(3,1fr)}} .stat{background:var(--white);padding:clamp(16px,2vw,26px);min-width:0} .stat b{overflow-wrap:anywhere} .stat b{display:block;font:700 clamp(26px,3.2vw,40px)/1 var(--ff-d);letter-spacing:-.03em} .stat b i{font-style:normal;font-size:.46em;font-weight:600;color:var(--hi-deep);margin-left:3px} .stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.42} .on-dark .stats{background:#252D35;border-color:#252D35} .on-dark .stat{background:var(--ink)} .on-dark .stat b i{color:var(--hi)} /* ─────────────── Таблицы ─────────────── */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--fg)} table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top} thead th{background:var(--paper);font:600 12px/1.3 var(--ff-m);letter-spacing:.06em;text-transform:uppercase; color:var(--steel);white-space:nowrap;border-bottom:1px solid var(--line)} tbody tr:last-child td{border-bottom:0} td .nb,th .nb{white-space:nowrap} tbody th[scope=row]{font-weight:600;background:var(--paper);width:34%} .tbl-note{font-size:13px;color:var(--muted);margin-top:12px} /* ─────────────── FAQ ─────────────── */ .faq{display:grid;gap:10px} @media(min-width:960px){.faq--2{grid-template-columns:1fr 1fr;align-items:start}} .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);color:var(--fg); transition:border-color .2s var(--ease)} .faq details[open]{border-color:var(--ink)} .faq summary{cursor:pointer;list-style:none;padding:17px 52px 17px 20px;position:relative; font:600 16px/1.42 var(--ff-b);color:var(--fg)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:20px;top:22px;width:12px;height:12px; border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(45deg); transition:transform .2s var(--ease)} .faq details[open] summary::after{transform:rotate(-135deg);top:26px} .faq .faq__a{padding:0 20px 20px;color:var(--muted);font-size:15.4px} .faq .faq__a>*:last-child{margin-bottom:0} /* ─────────────── Выноска ─────────────── */ .callout{display:flex;gap:15px;padding:18px 20px;border-radius:var(--r);background:var(--white); border:1px solid var(--line);border-left:4px solid var(--hi);color:var(--fg);font-size:15.2px;line-height:1.55} .callout svg{width:21px;height:21px;flex:none;margin-top:2px;color:var(--hi-deep)} .callout p:last-child{margin-bottom:0} .callout--alert{border-left-color:var(--alert)} .callout--alert svg{color:var(--alert-deep)} .on-dark .callout{background:var(--ink-2);border-color:#2A323B;color:#E8EAEC} /* ─────────────── Чек-лист ─────────────── */ .checks{list-style:none;padding:0;margin:0;display:grid;gap:11px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.6px;line-height:1.5} .checks svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--hi-deep)} .on-dark .checks svg{color:var(--hi)} .checks--no svg{color:var(--alert-deep)} .on-dark .checks--no svg{color:var(--alert)} /* ─────────────── Формы ─────────────── */ .lead-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(22px,2.6vw,32px);color:var(--fg);box-shadow:var(--sh-1)} .lead-box h3{margin-bottom:.3em} .lead-box>p{color:var(--muted);font-size:14.6px;margin-bottom:20px} .form-grid{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}} .field{display:block;position:relative} .field>span{display:block;font:500 12px/1 var(--ff-m);letter-spacing:.05em;text-transform:uppercase; color:var(--steel);margin-bottom:7px} .field input,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px; background:var(--paper);color:var(--fg);font:400 16px/1.3 var(--ff-b); transition:border-color .18s var(--ease),background .18s var(--ease)} .field textarea{min-height:92px;resize:vertical} .field input:focus,.field textarea:focus{outline:0;border-color:var(--ink);background:var(--white)} .field input:user-invalid{border-color:var(--alert)} .field input::placeholder{color:#5F6870} .field textarea::placeholder{color:#5F6870} /* кастомный select (нативный список опций не стилизуется) */ .sel select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .sel__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper); color:var(--fg);font:400 16px/1.3 var(--ff-b);cursor:pointer;text-align:left} .sel__btn:hover{border-color:#C3C9CE} .sel__btn[aria-expanded=true]{border-color:var(--ink);background:var(--white)} .sel__btn svg{width:17px;height:17px;flex:none;color:var(--steel);transition:transform .2s var(--ease)} .sel__btn[aria-expanded=true] svg{transform:rotate(180deg)} .sel__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px; list-style:none;background:var(--white);border:1px solid var(--line);border-radius:12px; box-shadow:var(--sh-2);max-height:262px;overflow-y:auto} .sel__list[hidden]{display:none} .sel__list li{padding:11px 12px;border-radius:8px;cursor:pointer;font-size:15px;margin:0} .sel__list li:hover,.sel__list li.is-hl{background:var(--paper)} .sel__list li[aria-selected=true]{background:var(--ink);color:#fff} .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .form-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:16px 14px;align-items:center} .form__consent{display:flex;gap:10px;align-items:flex-start;font-size:12.8px;line-height:1.45; color:var(--muted);flex:1 1 260px;cursor:pointer} .form__consent input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--hi-deep);cursor:pointer} .form__consent a{color:var(--fg);text-underline-offset:2px} .form__msg{width:100%;margin:0;font-size:14px;font-weight:600;color:var(--alert-deep)} .form__msg.ok{color:var(--hi-deep)} /* тёмные формы: не белить фон на фокусе и убрать autofill-заливку */ .on-dark .field input,.on-dark .field textarea,.on-dark .sel__btn{background:#12171D;border-color:#2E363F;color:#fff} .on-dark .field>span{color:#9DA5AD} .on-dark .field input:focus,.on-dark .sel__btn[aria-expanded=true]{background:#151B22;border-color:var(--hi)} .on-dark .field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #12171D inset} /* ─────────────── Крошки ─────────────── */ /* на носителе .wrap задаём ТОЛЬКО padding-block, иначе shorthand убьёт гут-отступ */ .crumbs{padding-block:16px 4px;font-size:13px} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;color:var(--muted)} .crumbs li+li::before{content:"/";margin-right:7px;color:#B9C0C6} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--fg);text-decoration:underline} .crumbs [aria-current]{color:var(--fg)} /* ─────────────── Подстраничный hero ─────────────── */ .phead{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate} .phead__bg{position:absolute;inset:0;z-index:-2} .phead__bg img{width:100%;height:100%;object-fit:cover} .phead__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(95deg,rgba(12,15,18,.95),rgba(12,15,18,.74))} .phead__in{padding-block:clamp(44px,5.5vw,80px)} .phead h1{max-width:22ch;margin-bottom:.35em} .phead p{color:#AEB6BD;max-width:62ch;font-size:clamp(16px,1.2vw,18.5px);margin-bottom:0} .phead .crumbs{padding-block:0 18px} .phead .crumbs ol{color:#7E878F} .phead .crumbs a{color:#9DA5AD} .phead .crumbs a:hover{color:#fff} .phead .crumbs [aria-current]{color:#D5DADF} .phead .crumbs li+li::before{color:#4B545D} .phead__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .phead__meta span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px; border:1px solid #303841;background:rgba(255,255,255,.04);font-size:13.5px;color:#D5DADF} .phead__meta svg{width:16px;height:16px;color:var(--hi)} .phead__meta a:hover,.phead__meta a:focus-visible{text-decoration:underline} /* ─────────────── Проза ─────────────── */ .prose{font-size:16.6px;line-height:1.68} .prose>*{max-width:74ch} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.5em} .prose ul li,.prose ol li{margin:.42em 0} .prose .tbl-wrap,.prose .callout,.prose figure,.prose .grid{max-width:none} .prose figure{margin:28px 0} .prose figure img{border-radius:var(--r);width:100%} .prose figcaption{font-size:13px;color:var(--muted);margin-top:9px} /* ─────────────── Футер ─────────────── */ .footer{background:var(--ink);color:#9DA5AD;font-size:14.6px} .footer a{color:#C7CDD3;text-decoration:none} .footer a:hover{color:var(--hi)} .footer__top{display:grid;gap:clamp(26px,3vw,44px);padding-block:clamp(46px,5vw,72px);grid-template-columns:1fr} @media(min-width:760px){.footer__top{grid-template-columns:1.25fr 1fr 1fr}} @media(min-width:1060px){.footer__top{grid-template-columns:1.35fr 1fr 1fr 1.1fr}} .footer h4,.footer__h{color:#fff;font:600 12px/1 var(--ff-m);letter-spacing:.11em; text-transform:uppercase;margin:0 0 16px} .footer ul{list-style:none;padding:0;margin:0} .footer li{margin:9px 0} .footer__brand .brand{margin-bottom:16px} .footer__req{font-size:13px;line-height:1.6;color:#79828A;margin-top:16px} .footer__req b{color:#9DA5AD;font-weight:500} .footer__phone{font:700 21px/1.2 var(--ff-d);color:#fff;display:block;margin-bottom:4px} .footer__bot{border-top:1px solid #232A32;padding-block:20px;display:flex;flex-wrap:wrap;gap:12px 26px; align-items:center;justify-content:space-between;font-size:13px;color:#7E878F} .footer__bot nav{display:flex;flex-wrap:wrap;gap:10px 22px} /* ─────────────── Cookie ─────────────── */ .cookie{position:fixed;left:16px;bottom:16px;z-index:95;width:min(400px,calc(100vw - 32px)); background:var(--ink-2);color:#D5DADF;border:1px solid #2C343D;border-radius:var(--r-lg); padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.45);font-size:14px;line-height:1.5; opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .cookie.is-in{opacity:1;transform:none} .cookie a{color:var(--hi)} .cookie__row{display:flex;gap:10px;margin-top:16px} .cookie .btn{padding:14px 18px;font-size:14px} /* ─────────────── Reveal (fail-safe) ─────────────── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} /* скраб-секцию гасим на уровне CSS, а не только в JS: если скрипт не выполнится, пользователь с reduced-motion всё равно не получит 260vh липкой прокрутки */ .film__track{height:auto} .film__stick{position:relative;top:0;height:auto;min-height:0} .film__caps{min-height:0;padding-block:clamp(56px,12vw,90px);gap:26px;grid-auto-flow:row;place-items:start} .film__cap{grid-area:auto;opacity:1;transform:none;text-align:left;max-width:34ch;padding:0} .film__cap::before{display:none} .film__hint{display:none} } /* ─────────────── ЛИСТ ОБЪЕКТА (фирменный элемент) ─────────────── */ .pir{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:1fr;align-items:start} @media(min-width:1060px){ .pir{grid-template-columns:minmax(340px,.82fr) 1.18fr} /* панель параметров держится у верха, пока листаешь длинный лист справа */ .pir__ask{position:sticky;top:calc(var(--hdr) + 18px);align-self:start; max-height:calc(100vh - var(--hdr) - 36px);overflow-y:auto;scrollbar-width:thin} } .pir__ask{background:var(--ink-2);border:1px solid #2A323B;border-radius:var(--r-lg); padding:clamp(20px,2.4vw,28px);color:#E8EAEC} .pir__q+.pir__q{margin-top:22px} .pir__q>span{display:block;font:500 11.5px/1 var(--ff-m);letter-spacing:.1em;text-transform:uppercase; color:var(--hi);margin-bottom:11px} .pir__chips{display:flex;flex-wrap:wrap;gap:7px} .pir__chips button{padding:10px 14px;border-radius:9px;border:1px solid #333C46;background:#12171D; color:#C7CDD3;font:500 14px/1.25 var(--ff-b);cursor:pointer;text-align:left; transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)} .pir__chips button:hover{border-color:#4A545F;color:#fff} .pir__chips button[aria-pressed=true]{background:var(--hi);border-color:var(--hi);color:var(--ink);font-weight:700} .pir__range{display:flex;align-items:center;gap:14px;margin-top:12px} .pir__range input{flex:1;appearance:none;height:4px;border-radius:4px;background:#333C46;cursor:pointer} .pir__range input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%; background:var(--hi);border:3px solid var(--ink-2);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5)} .pir__range input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--hi); border:3px solid var(--ink-2);cursor:pointer} .pir__range output{font:700 19px/1 var(--ff-d);color:#fff;min-width:96px;text-align:right;white-space:nowrap} .pir__sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-1)} .pir__head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between; padding:16px 22px;border-bottom:1px solid var(--line);background:var(--paper)} .pir__head b{font:600 12px/1 var(--ff-m);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)} .pir__head span{font-size:12.5px;color:var(--muted)} .pir__grid{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:640px){.pir__grid{grid-template-columns:112px 1fr}} .pir__cut{padding:20px 0 20px 22px;display:flex;flex-direction:column;gap:8px} /* Разрез: слои-блоки, пропорции держит flex-grow из JS (см. cutHtml в pirog.js). Фотофактура ложится фоном; background-size:100% auto = зерно одного масштаба во всех слоях, ничего не растягивается. Под текстурой остаётся цвет — не загрузились картинки, разрез читается как раньше. */ .pir__cut .cut{position:relative;display:flex;flex-direction:column;width:100%;flex:1 1 auto; min-height:210px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(12,15,18,.14)} .cut__l{display:block;background-repeat:repeat-y;background-position:50% 50%;background-size:100% auto} .cut__joint{position:absolute;left:62%;top:0;width:2px;background:#0C0F12;opacity:.85} .cut__mesh{position:absolute;left:7%;right:7%;height:0;border-top:1.4px dashed rgba(12,15,18,.7)} /* Текстуры материалов — генерация (бетон в разрезе, песок, щебень). Это ДЕКОР материала, а не фотографии объектов клиента. Светлый и тёплый варианты бетона делаются через background-blend-mode, чтобы не тащить отдельные файлы. */ .is-tex .cut__l[data-k=slab],.is-tex .pir__sw[data-k=slab]{background-image:url(../img/tex/beton.webp)} .is-tex .cut__l[data-k=sand],.is-tex .pir__sw[data-k=sand]{background-image:url(../img/tex/pesok.webp)} .is-tex .cut__l[data-k=base],.is-tex .pir__sw[data-k=base]{background-image:url(../img/tex/scheben.webp)} .is-tex .cut__l[data-k=grind],.is-tex .pir__sw[data-k=grind]{background-image:url(../img/tex/beton.webp); background-position:50% 88%;background-blend-mode:soft-light} .is-tex .cut__l[data-k=repair],.is-tex .pir__sw[data-k=repair]{background-image:url(../img/tex/beton.webp); background-position:50% 18%;background-blend-mode:soft-light} /* верхний слой остаётся фирменно-лаймовым — это то, что покупают; зерно даём мягко */ .is-tex .cut__l[data-k=top],.is-tex .cut__l[data-k=poly],.is-tex .pir__sw[data-k=top],.is-tex .pir__sw[data-k=poly]{ background-image:url(../img/tex/beton.webp);background-blend-mode:overlay} /* подпись к колонке-разрезу: без неё колонка читалась как непонятный «рисунок» */ .pir__cut-cap{margin:0;flex:none;font:500 10.5px/1.3 var(--ff-m);letter-spacing:.02em; color:var(--muted);text-align:center} .pir__legend{list-style:none;margin:0;padding:20px 22px;display:grid;gap:0;align-content:start} .pir__legend li{display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:baseline; padding:7px 0;border-bottom:1px dashed var(--line-2);font-size:14.2px} .pir__legend li:last-child{border-bottom:0} .pir__sw{width:14px;height:14px;border-radius:3px;display:block;align-self:center;background-repeat:no-repeat;background-position:50% 50%;background-size:cover} /* глифом-палочкой повторяем ту самую вертикальную линию на разрезе */ .pir__sw--joint{background:transparent;position:relative} .pir__sw--joint::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px; transform:translateX(-50%);background:var(--ink);border-radius:1px} .pir__legend-note{border-top:1px solid var(--line-2);margin-top:3px;padding-top:9px!important} .pir__legend b{font-weight:500;color:var(--fg)} .pir__legend i{font-style:normal;font-family:var(--ff-m);font-size:11.5px;color:var(--muted);white-space:nowrap} .pir__why{margin:0;padding:16px 22px;background:var(--hi-soft);border-block:1px solid #DCEE9E; font-size:14.4px;line-height:1.55;color:#3B4700} .pir__spec{width:100%;min-width:0;font-size:14.4px} .pir__spec th[scope=row]{width:30%;font-weight:600;background:var(--paper);font-size:13.6px;vertical-align:top} .pir__spec td{line-height:1.5} /* ссылки на нормы НЕ делаем nowrap: на 360 они выпихивали таблицу за экран */ .pir__spec .mono{font-size:11.5px;color:var(--muted)} @media(max-width:640px){ .pir__spec th[scope=row],.pir__spec td{display:block;width:auto} .pir__spec th[scope=row]{border-bottom:0;padding:14px 18px 2px} .pir__spec td{padding:0 18px 14px} .pir__cut{padding:18px 18px 4px} /* подпись «Разрез» не должна упираться в легенду */ .pir__cut .cut{min-height:150px} .pir__legend{padding:16px 18px} } .pir__price{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between; padding:18px 22px;border-top:1px solid var(--line);background:var(--ink);color:#fff} .pir__price b{font:700 clamp(22px,2.6vw,30px)/1 var(--ff-d);letter-spacing:-.02em} .pir__price b i{font-style:normal;font-size:.55em;color:var(--hi)} .pir__price span{font-size:12.3px;color:#8E979F;font-family:var(--ff-m)} .pir__total{margin:0;padding:14px 22px;background:var(--ink-2);color:#B6BDC4;font-size:14px;line-height:1.5} .pir__total b{color:#fff} .pir__gar{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)} @media(min-width:640px){.pir__gar{grid-template-columns:1fr 1fr}} .pir__gar>div{padding:18px 22px} .pir__gar>div+div{border-top:1px solid var(--line)} @media(min-width:640px){.pir__gar>div+div{border-top:0;border-left:1px solid var(--line)}} .pir__gar h4,.pir__gar-h{font:600 11.5px/1 var(--ff-m);letter-spacing:.09em;text-transform:uppercase; color:var(--steel);margin:0 0 12px} .pir__g{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.2px} .pir__g li{padding-left:24px;position:relative;line-height:1.45} .pir__g li::before{position:absolute;left:0;top:.05em;font-weight:700} .pir__g--yes li::before{content:"✓";color:var(--hi-deep)} .pir__g--no li::before{content:"×";color:var(--alert-deep);font-size:1.2em;top:-.08em} .pir__cta{padding:18px 22px;border-top:1px solid var(--line);background:var(--paper)} /* как в модалке: кнопка во всю ширину, согласие отдельной строкой под ней. display:block отключает gap флекса — отступ задаём явно (checklist D104) */ .pir__cta .form-actions{display:block} .pir__cta .form-actions .btn{width:100%} .pir__cta .form-actions > * + *{margin-top:16px} /* ─────────────── Бегущая строка: светлая передышка между двумя тёмными секциями ─────────────── */ .mq{background:var(--hi);border-block:1px solid #A9CE00;overflow:hidden} .mq__row{display:flex;width:max-content} .mq__track{display:flex;flex:none;list-style:none;margin:0;padding:0; animation:mq-run 52s linear infinite} .mq__track li{display:flex;align-items:center;margin:0;padding:0; font:600 clamp(14px,1.15vw,16.5px)/1 var(--ff-b);color:var(--ink); letter-spacing:-.005em;white-space:nowrap;padding-block:clamp(15px,1.7vw,20px)} /* ромб-разделитель между тезисами */ .mq__track li i{display:block;width:7px;height:7px;margin-inline:clamp(20px,2.6vw,38px); background:var(--ink);transform:rotate(45deg);flex:none;opacity:.55} @keyframes mq-run{from{transform:translateX(0)}to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){ .mq__track{animation:none} .mq__row{width:100%;overflow-x:auto;scrollbar-width:none} .mq__row::-webkit-scrollbar{display:none} .mq__track:last-child{display:none} } /* ─────────────── Кинематографичный проход (скраб по скроллу) ─────────────── */ .film{position:relative;background:var(--ink)} .film__track{height:260vh} /* от низа прилипшей шапки до низа экрана — кадр не уезжает под меню */ .film__stick{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr)); overflow:hidden;display:grid;place-items:center} .film__media{position:absolute;inset:0} /* 🚨 Оба слоя АБСОЛЮТНЫЕ и наложены друг на друга. Раньше они шли обычным потоком: постер занимал 100% высоты, а