/* ---- menu.css ---- */ /* The site's single navigation bar (line #944, card #1017). * * Replaces the 14 hand-faked per-section menus with one menu shown on every page. * Every size, colour and breakpoint here is taken from the live header so the page does * not visually change apart from the menu itself: 64/52 px tall, 12 px bold uppercase * top row, grey sub-links that turn black, the same shadow, the same 1200 px breakpoint. * * Every class is prefixed, because the page already carries the builder's own styles and * an unprefixed .nav or .panel would collide with them. */ /* Jump targets for the "contact us" buttons (see fix-anchors.py). Takes no space, and stops the sticky bar above from covering the top of whatever it lands on. */ .mbs-anchor{display:block; height:0; scroll-margin-top:86px} .mbs-nav{height:64px; position:relative; z-index:100; background:#fff} .mbs-nav-fixed{background:#fff; position:fixed; top:0; right:0; left:0; box-shadow:0 0 3px #b5b5b5} .mbs-nav .container{position:relative} .mbs-nav ul{margin:0; padding:0; list-style:none} .mbs-nav-logo{display:block; float:left; height:26px; margin:19px 0; line-height:0} .mbs-nav-logo img{height:26px; width:auto; display:block} .mbs-nav-tg{display:block; width:26px; height:26px; float:right; margin:18px 0 20px 25px; font-size:0; background:url('/_ext/b24.mbsgroup.ru/menu24/tg_blue.png') 50% no-repeat; background-size:26px 26px} .mbs-nav-burger{display:none} /* ---------- top row ---------- */ .mbs-nav-list{float:right; margin:0 -6px; text-align:right; font-size:1px; line-height:0} .mbs-nav-list > li{display:inline-block; height:64px; font-size:12px; line-height:64px; position:static} .mbs-nav-list > li > a{display:block; padding:0 6px; font-weight:700; text-transform:uppercase; color:#000; text-decoration:none; cursor:pointer} .mbs-nav-list > li > a:hover, .mbs-nav-list > li > a:focus{color:#000; text-decoration:none} .mbs-nav-list > li.here > a{color:#e64b3b} .mbs-nav-list > li.has > a:after{content:''; display:inline-block; width:5px; height:10px; margin:27px 0 27px 5px; vertical-align:top; background-size:5px 3px; background-repeat:no-repeat; background-position:50%; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAn0lEQVQoz62SsQ6CQBBEH1T+f0lLcwSQQkPE8Afak/AnNGrhSDYbRTidZJudmXfJ5uCpPTAQr0EMAA7ABNyBEAEL6k5iMWrxmnYDrHXdEWAH5M44AckCKFHGdnKxZjUu0C1AO5dtPr1cu+AZSI2famcz9be7VK7QG693XrX22KUrHjV2V279DoUD2CliP2x4Awv8qAy4aTL+pAtwXRN8AFfzUAVjEnnoAAAAAElFTkSuQmCC')} /* ---------- the two-level panel: list on the left, its pages on the right ---------- */ .mbs-nav-mega{display:none; position:absolute; top:64px; right:15px; width:900px; background:#fff; box-shadow:0 4px 15px rgba(0,0,0,.12); text-align:left; font-size:15px; line-height:1.4} /* Opened by script (mbs.js), not by a plain :hover: a plain hover closed the panel the instant the pointer left the top item, before it reached the panel below - the script keeps it open a moment longer so the pointer has time to arrive (12.08.2026). */ .mbs-nav-list > li.mega-open > .mbs-nav-mega{display:flex} .mbs-nav-rail{width:290px; flex:none; border-right:1px solid #eee; padding:12px 0; max-height:calc(100vh - 90px); overflow:auto} .mbs-nav-rail-i{display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer; font-family:inherit; font-size:15px; line-height:1.3; color:#4a4a4a; padding:11px 58px 11px 20px; border-left:3px solid transparent; position:relative} .mbs-nav-rail-i b{display:block; font-weight:400} .mbs-nav-rail-i em{display:block; font-style:normal; font-size:12px; color:#707070; margin-top:2px} /* How many pages the product holds. Pinned to the middle of the row like the arrow, so it stays put whether the row is one line or two. */ .mbs-nav-rail-i i{position:absolute; right:32px; top:50%; margin-top:-9px; min-width:18px; font-style:normal; font-size:12px; line-height:18px; text-align:right; color:#767676} .mbs-nav-rail-i:hover, .mbs-nav-rail-i.on{color:#000; background:#fafafa; border-left-color:#e64b3b} .mbs-nav-rail-i:hover em, .mbs-nav-rail-i.on em{color:#5a5a5a} .mbs-nav-rail-i:hover i, .mbs-nav-rail-i.on i{color:#444} /* A square box turned 45 degrees: equal sides, so the mark is symmetrical. Pinned to the middle of the row rather than floated, so it stays centred whether the row is one line or two. */ .mbs-nav-rail-i:after{content:''; position:absolute; right:18px; top:50%; width:7px; height:7px; margin-top:-4px; border-right:1px solid #8a8a8a; border-top:1px solid #8a8a8a; transform:rotate(45deg)} .mbs-nav-rail-i:hover:after, .mbs-nav-rail-i.on:after{border-color:#444} /* A section that holds no pages of its own promises nothing to open into, so it carries no mark. The narrow layout below already did this; the wide one did not, and the four such sections stood there with a mark and no count next to it (card #1052, Б-11). */ .mbs-nav-rail-i.leaf:after{display:none} .mbs-nav-panes{flex:1; padding:16px 20px 20px; max-height:calc(100vh - 90px); overflow:auto} .mbs-nav-pane{display:none} .mbs-nav-pane.on{display:block} .mbs-nav-h{display:block; font-size:15px; font-weight:700; color:#000; text-decoration:none; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid #eee} .mbs-nav-h span{font-weight:400; font-size:13px; color:#e64b3b; margin-left:10px} .mbs-nav-links{columns:2; column-gap:26px} .mbs-nav-links.one{columns:1} .mbs-nav-links a{display:block; color:#4a4a4a; text-decoration:none; padding:6px 0; break-inside:avoid; -webkit-column-break-inside:avoid} .mbs-nav-links a:hover{color:#000; text-decoration:none} .mbs-nav-note{color:#5f5f5f; font-size:14px; padding:4px 0 8px} .mbs-nav-list > li.mbs-nav-back{display:none} /* ---------- narrow screen: the same markup, a drill-down drawer ---------- */ @media (max-width:1199px){ .mbs-nav{height:52px} .mbs-nav-logo{height:22px; margin:15px 0} .mbs-nav-logo img{height:22px} .mbs-nav-tg{margin:12px 15px 14px 0} .mbs-nav-burger{display:block; float:right; width:22px; height:28px; margin:12px 0; padding:0; background:none; border:0; outline:none; cursor:pointer; position:relative} .mbs-nav-burger span{display:block; width:100%; height:1px; background:#444; position:absolute; top:7px; left:0; transition:.15s transform ease} .mbs-nav-burger span:before, .mbs-nav-burger span:after{content:''; display:block; width:100%; height:1px; background:#444; position:absolute; top:6px; left:0; transition:.15s transform ease,.15s opacity ease} .mbs-nav-burger span:after{top:12px} .mbs-nav-burger.on span{transform:translate3d(0,6px,0) rotate(45deg)} .mbs-nav-burger.on span:before{transform:rotate(-45deg) translate3d(-5.71429px,-6px,0); opacity:0} .mbs-nav-burger.on span:after{transform:translate3d(0,-12px,0) rotate(-90deg)} /* The class is doubled on purpose (".mbs-nav-list.mbs-nav-list"), not a typo: the page also carries a leftover unscoped copy of the plain-float/inline-block rules from an older build step (no media guard, sits after this file in the page, so at equal specificity it would win by document order and pull the drawer back into the desktop float layout - found 12.08.2026 chasing the empty field below). Doubling the class raises this rule's own weight above that leftover copy without using !important, which would have also outranked the drill-down rules further down this same file that rely on plain cascade order (open/closed submenu levels, the "back" row). */ .mbs-nav-list.mbs-nav-list{display:none; float:none; clear:both; margin:0 -15px; text-align:left; font-size:15px; line-height:1.4; background:#fff; max-height:calc(100vh - 52px); overflow:auto} /* Content-sized, not screen-filling: a full-viewport minimum height used to leave a blank field under a short list (7 top items only). Whatever remains under the drawer is the real page, frozen by the script's scroll lock while the drawer is open, not an empty box (found 12.08.2026, live report from the phone). */ .mbs-nav-list.drop{display:block} /* Same doubled-class trick as above, and for the same reason: without it every item falls back to the leftover copy's inline-block and the drawer wraps into ragged rows instead of one full-width row per item. */ .mbs-nav-list.mbs-nav-list > li{display:block; height:auto; font-size:15px; line-height:1.4; position:static} .mbs-nav-list > li > a{padding:15px; border-bottom:1px solid #f0f0f0} .mbs-nav-list > li.has > a:after{float:right; margin:4px 0 0; width:6px; height:9px; background:none; border-right:1px solid #999; border-bottom:1px solid #999; transform:rotate(-45deg)} .mbs-nav-list > li.mbs-nav-back{display:none; padding:0} .mbs-nav-back button{display:block; width:100%; text-align:left; border:0; background:#fafafa; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; text-transform:uppercase; color:#000; padding:14px 15px; border-bottom:1px solid #eee} /* Equal sides, so the arrow is symmetrical: a 6x9 box turned 45 degrees came out skewed. Nudged down a point because a rotated square sits high next to uppercase text. */ .mbs-nav-back button:before{content:''; display:inline-block; width:8px; height:8px; margin:0 12px 1px 2px; vertical-align:middle; border-left:1px solid #666; border-bottom:1px solid #666; transform:rotate(45deg)} .mbs-nav-mega{position:static; display:none; width:auto; box-shadow:none; font-size:15px} .mbs-nav-list > li.mega-open > .mbs-nav-mega{display:none} .mbs-nav-rail{width:auto; border:0; padding:0; max-height:none; overflow:visible} .mbs-nav-rail-i{padding:14px 56px 14px 15px; border-left:0; border-bottom:1px solid #f0f0f0; color:#000} .mbs-nav-rail-i.on, .mbs-nav-rail-i:hover{background:none; border-left:0} .mbs-nav-rail-i em{font-size:12px; color:#707070} .mbs-nav-rail-i i{right:30px; color:#767676} .mbs-nav-rail-i:after{right:15px; border-color:#767676} .mbs-nav-rail-i.leaf:after{display:none} .mbs-nav-panes{padding:0; max-height:none; overflow:visible} .mbs-nav-h{padding:14px 15px; margin:0; border-bottom:1px solid #eee} .mbs-nav-links{columns:1} .mbs-nav-links a{padding:13px 15px; color:#000; border-bottom:1px solid #f5f5f5} .mbs-nav-note{padding:14px 15px} .mbs-nav-list[data-level="0"] .mbs-nav-mega{display:none} .mbs-nav-list[data-level="1"] > li, .mbs-nav-list[data-level="2"] > li{display:none} .mbs-nav-list[data-level="1"] > li.open, .mbs-nav-list[data-level="2"] > li.open{display:block} .mbs-nav-list[data-level="1"] > li.open > a, .mbs-nav-list[data-level="2"] > li.open > a{display:none} .mbs-nav-list[data-level="1"] > li.open > .mbs-nav-mega, .mbs-nav-list[data-level="2"] > li.open > .mbs-nav-mega{display:block} .mbs-nav-list[data-level="1"] .mbs-nav-panes{display:none} .mbs-nav-list[data-level="2"] .mbs-nav-rail{display:none} .mbs-nav-list[data-level="1"] > li.mbs-nav-back, .mbs-nav-list[data-level="2"] > li.mbs-nav-back{display:block} } /* A card the builder made clickable by script is now wrapped in a plain link: the visitor presses the same place, and a search robot can follow it - 1003 passages, most of them the company phone, did not exist for robots before. Inherits everything so nothing looks new. */ .mbs-cardlink, .mbs-cardlink:hover, .mbs-cardlink:focus{display:inline; color:inherit; text-decoration:none; border:0} /* ---- crumbs.css ---- */ /* The "you are here" trail under the cover (line #944, card #1017). * * Deliberately quiet: it is a way back up, not a headline. Same font as the page, the * grey of the menu's sub-links, and the brand red only on hover. * * The spacing is built to the page's own rhythm: the cover ends flush, the trail takes * one comfortable line, and the first content block keeps its own top margin - so the * trail reads as a thin ledge between them rather than as another block. */ .block-crumbs{background:#fff} /* Grey, but a readable grey: the first shade tried was too pale against white to meet the readability standard, and this one is the same quiet tone one step darker. */ .block-crumbs .crumbs{padding:16px 0 14px; font-size:13px; line-height:1.5; color:#6e6e6e; border-bottom:1px solid #f0f0f0} .block-crumbs a{color:#6e6e6e; text-decoration:none} .block-crumbs a:hover, .block-crumbs a:focus{color:#e64b3b; text-decoration:none} .block-crumbs .sep{margin:0 9px; color:#dcdcdc} .block-crumbs .now{color:#333} @media (max-width:767px){ .block-crumbs .crumbs{padding:12px 0 11px; font-size:12px} .block-crumbs .sep{margin:0 6px} } /* ---- cover.css ---- */ /* Cover height (line #944, card #1017; architect 09.08.2026: the space above and below the * text inside the cover is excessive, halve it). * * Where that space comes from: it is not a padding anywhere. The text block is centred * inside a box the builder makes exactly one screen tall, so the space simply IS * (cover height - text height) / 2. Shrinking the box shrinks both gaps equally. * * The number is measured, not guessed. 40 random pages laid out in a browser, 09.08.2026: * wide screen (1440x900): text 236-610 tall, median 499; gap 145-332, median 200. * Halving the median gap needs a cover of 699px = 78% of the screen. * phone (390x844): text 205-527, median 408; gap 158-319, median 217. * Halving it needs 626px = 74% of the screen. * * The floor in pixels is not decoration. The text is positioned by its centre, so a box * shorter than the text would let the headline spill over the block below. The floor is * the tallest headline measured plus slack, and it only bites on unusually short windows. */ .block-46-8-cover-bgimg-title-with-icons .g-min-height-100vh{ min-height:max(78vh, 700px) !important; } @media (max-width:991px){ .block-46-8-cover-bgimg-title-with-icons .g-min-height-100vh{ min-height:max(76vh, 640px) !important; } } @media (max-width:575px){ .block-46-8-cover-bgimg-title-with-icons .g-min-height-100vh{ min-height:max(74vh, 600px) !important; } } /* ---- opros-embed.css ---- */ /* Height of the embedded questionnaire before the page measures it for itself * (line #944, card #1017). * * The exact height is set by opros-embed.js, which looks inside the frame and measures. * This file is what shows in the fraction of a second before that runs, and the safety * net if it ever cannot. * * Why the form scrolled inside itself. The questionnaire caps its card at the height of * ITS OWN window - and its window is this frame. So a short frame made a short card that * scrolled, and no number written here could ever be "enough": raise the frame and the * card just grows with it. The script breaks that circle by lifting the cap first and * measuring afterwards. * * The numbers below are measured with the cap lifted, plus slack. Measured 09.08.2026, * card height in pixels by frame width: * full form: 920 -> 337, 600 -> 387, 540 -> 470, 420 -> 505, 360 -> 553, 300 -> 700 * short form: 730 -> 372, 640 -> 407, 480 -> 554, 420 -> 574, 345 -> 609, 300 -> 707 * The jumps are the questionnaire's own layout switching, not measurement noise. */ .block-opros iframe[data-opros="page"]{height:365px} .block-opros iframe[data-opros="contact"]{height:400px} @media (max-width:1199px){ .block-opros iframe[data-opros="page"]{height:365px} .block-opros iframe[data-opros="contact"]{height:435px} } @media (max-width:991px){ .block-opros iframe[data-opros="page"]{height:415px} .block-opros iframe[data-opros="contact"]{height:585px} } @media (max-width:767px){ .block-opros iframe[data-opros="page"]{height:500px} .block-opros iframe[data-opros="contact"]{height:440px} } @media (max-width:575px){ .block-opros iframe[data-opros="page"]{height:575px} .block-opros iframe[data-opros="contact"]{height:640px} } @media (max-width:375px){ .block-opros iframe[data-opros="page"]{height:630px} .block-opros iframe[data-opros="contact"]{height:670px} } @media (max-width:340px){ .block-opros iframe[data-opros="page"]{height:730px} .block-opros iframe[data-opros="contact"]{height:750px} } /* ---- mobile.css ---- */ /* Fixes horizontal scrolling on phones (line #944, card #1017, checklist item 58). * * The webmaster panel named the defect - 30 of its 31 complaints are horizontal scrolling * - but not the cause. Found by laying 40 pages out at 360px and walking up from every * element that stuck out past the edge: * * .u-heading-v2-*--bottom is given width: fit-content and no upper bound. * * On a wide screen that is what draws the short red rule under a heading - the rule ends * where the words end. On a phone the same rule makes the heading as wide as its longest * line, 446 to 528px on a 360px screen, and everything sized "100%" then follows the page * out sideways: the header bar, the containers, the chat widget's shadow. One rule, every * page type, exactly as the item predicted. * * The fix keeps the decoration and only forbids it from outgrowing the screen. */ [class*="u-heading-v2-"]{max-width:100%} /* A long address or product code with no spaces can still push a line out. Breaking it is always better than a page that slides sideways. */ .landing-block-node-title, .landing-block-node-subtitle, .landing-block-node-text{ overflow-wrap:break-word; } @media (max-width:767px){ .landing-block p, .landing-block li, .landing-block span, .landing-block td{ overflow-wrap:break-word; } /* The net under everything above. After the real cause was fixed, 38 of 40 measured pages already fit the screen exactly; this stops the last stragglers (17 and 46 px over) from sliding the whole page sideways. "clip" rather than "hidden" on purpose - hidden would turn the page into a scrolling box of its own and break sticky elements. */ html, body{overflow-x:clip} } /* ---- a11y.css ---- */ /* Small fixes for people who tap rather than click (card #2, accessibility). * * The contact lines in the footer - post, phone, the three social links - were 16 px tall * strips of text. A finger is about 9 mm wide, and the accessibility standard asks for at * least 24 px of height and 24 px between neighbouring targets; measured, these had 16 px * of height and 24-26 px between lines, so a miss landed on the neighbour. * * The fix gives each line its own comfortable box instead of changing any type size, so the * footer reads exactly as before and only grows by a couple of points in total height. */ .landing-block-node-contact-text a{display:inline-block; min-height:26px; line-height:26px; vertical-align:top} /* ---- icons.css ---- */ /* The small pictograms next to the contacts (card #2, item 79 - repair). * * Each page already says WHICH pictogram it wants (the pin, the clock, the speech bubbles), * and the pictogram file was mirrored long ago. What was missing is the one line that ties * the two together - which set to draw them from. That line was never in any stylesheet: the * builder's machinery put it on the page while it ran, so taking the machinery off turned * every pictogram into an empty square. 2408 places across the site. * * Written out here once, in the same words the set expects. */ [class^="icon-"], [class*=" icon-"]{font-family:'simple-line-icons'; font-style:normal; font-weight:400; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} /* The same for the second set - the thin line drawings inside articles and question lists. The page carries the set itself and names each drawing; only the tie was missing. Both spellings the pages use are covered, and only the light weight, because that is the only file the site holds. */ .fal, .fa-light, .fas, .fa-solid, .far, .fa-regular, .fa{font-family:"Font Awesome 6 Pro"; font-weight:300; font-style:normal; font-variant:normal; text-rendering:auto; line-height:1; display:inline-block; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} /* Three spellings were missed on the first pass - the medium weight, and the bare short form that the older pages use - and they left empty squares on fourteen pages. Found 11.08 from Дмитрий's defect list, not by our own check, because that check had been run on a sample that did not happen to include them; the sweep behind this line now walks every page instead. They are pointed at the same file as the rest: the site loads exactly one weight, and at the size these are drawn (inside a red circle, about 20 px) the difference in stroke is not visible. Company logos are a genuinely different set - a logo cannot be drawn in another alphabet - so they get their own file, which the mirror already holds and which is fetched only by the one page that asks for it. */ @font-face{font-family:"Font Awesome 6 Brands"; font-style:normal; font-weight:400; font-display:block; src:url("/bitrix/templates/landing24/assets/vendor/icon/fab/font.woff2") format("woff2")} .fab, .fa-brands{font-family:"Font Awesome 6 Brands"; font-weight:400; font-style:normal; font-variant:normal; text-rendering:auto; line-height:1; display:inline-block; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} /* Значки мессенджеров перед кнопкой СВЯЗАТЬСЯ. Восстанавливается командой site/add-cta-messengers.py, если общий файл оформления пересоберут заново. Значки берут классы самой кнопки, поэтому наследуют ее рамку и цвета блока; растяжение по высоте держит их ровно той же высоты, что и кнопка, без жестких размеров. */ .mbs-cta-row{display:flex; align-items:stretch; justify-content:center; gap:8px; flex-wrap:wrap} .mbs-cta-msg{display:inline-flex !important; align-items:center; justify-content:center; padding-left:14px; padding-right:14px} .mbs-cta-msg svg{width:20px; height:20px; display:block} @media (max-width:575px){ .mbs-cta-row{gap:6px} .mbs-cta-msg{padding-left:11px; padding-right:11px} } /* Кнопка СВЯЗАТЬСЯ прыгает к нижней форме. Без этого отступа верхняя панель сайта накрывает заголовок формы, и человек попадает на середину поля вместо начала. Возвращается командой site/place-cta-rhythm.py, если общий файл пересоберут. */ .mbs-scroll-target{scroll-margin-top:90px} /* Снимок статьи в карточке списка. Восстанавливается командой site/fix-card-image-height.py, если общий файл оформления пересоберут заново. Ширину карточка задает сама, а высоту нет: у обложки, загруженной в полном размере, тег несет свою настоящую высоту, и карточка вытягивается на всю высоту снимка. Высота считается от ширины, пропорции сохраняются. */ .landing-block-node-card-img{height:auto !important; max-height:none} /* The icon borrows the СВЯЗАТЬСЯ button's own styling, which paints the button solid on :focus the same as on :hover - meant for a person tabbing through the page. The icons open a messenger in a new tab, so the browser tab keeps the icon focused with no hover after the visitor's attention (and mouse) has already left; without this rule the icon stayed permanently painted as if still pressed (measured 12.08.2026). Only the focus-without-hover case is reset, so an actual keyboard tab stop and a real mouse hover still look pressed as designed. */ .mbs-cta-msg:focus:not(:hover){background-color:transparent !important; color:var(--button-color) !important}