/* ============================================================ BOXFORCAM(tm) — /proektirovshchikam/ visual fixes bfc-fixes.css * v20260616a * CW-OPS (FIX-WAVE2: A3/A5/B3/B4/C) Подключается ОДНИМ в index.html (C-14). КОРЕНЬ РЕГРЕССА (HANDOFF 06-15): прошлый проход слепо ставил img{border-radius:0} ВЕЗДЕ. Верно ТОЛЬКО для object-fit:cover, когда img заполняет обёртку (обёртка clip'ает углы). Для object-fit:contain + padding (hero, галерея, патенты) картинка МЕНЬШЕ обёртки -> радиус обёртки невидим, img:0 = квадрат. Поэтому два класса правил: COVER -> радиус на обёртку + inherit; CONTAIN -> радиус на САМ img. Токены: 18px, оранж #f6921e. ============================================================ */ /* ===== A. ГЛОБАЛЬНОЕ СКРУГЛЕНИЕ IMG ===== */ /* COVER: A3 Кейсы — обёртка clip, img inherit */ .cases-real .case > .case-photo{border-radius:18px!important;overflow:hidden!important} .cases-real .case > .case-photo > img, .cases-real .case > .case-photo.case-render > img{ border-radius:inherit!important;object-fit:cover!important; width:100%!important;height:100%!important;display:block!important;border:0!important; } /* COVER: A4 Отзывы — .testim-shot это img (cover, фикс. высота) */ .testim-shot{border-radius:18px!important;object-fit:cover!important;border:0!important;display:block!important} /* R-A4 (CC 17.06): ВСЕ карточки #reviews единообразно (не только 1-2). Был разнобой: скрины t-mp 140px / t-tg 175px, карточки 400/430. Унифицирую — одинаковая высота скрина 170px + cover + 18px + одинаковая высота карточки. */ #testimonials .testim-card .testim-shot, #testimonials .testim-card.t-mp .testim-shot, #testimonials .testim-card.t-tg .testim-shot{ width:100%!important;height:170px!important;max-height:170px!important; object-fit:cover!important;object-position:center top!important;border-radius:14px!important;display:block!important; } #testimonials .testim-card.t-mp,#testimonials .testim-card.t-tg{height:430px!important} .testim-card{border-radius:18px!important} /* CONTAIN: A1 Герой — img плавает в .hero-img(padding) -> радиус на img */ .hero-img{overflow:hidden} .hero-img > img{border-radius:18px!important;border:0!important} /* CONTAIN: A2 Галерея /cad/ (#art-004 и пр.) — img contain+padding -> радиус на img */ .gal-item,.gal-scroll .gal-item{border-radius:18px!important;overflow:hidden!important} .gal-item > img,.gal-scroll .gal-item > img{border-radius:14px!important;display:block!important;border:0!important} /* CONTAIN: B2 Патенты — .pc-slide 18px+overflow, img contain+padding -> радиус на img */ .patent-wrap-v2 .pc-slide{border-radius:18px!important;overflow:hidden!important} .patent-wrap-v2 .pc-slide img{border-radius:10px!important;border:0!important} /* A5+A6 «Установки на объектах / Реальные монтажи» (#installations, .inst-track translateX). R-A5-frame (CC 17.06): УБРАНА оранжевая рамка-обводка + тёмная подложка вокруг фото. Фото — только скругление + object-fit:cover (как у видео-слайдов), без оранжевого бордера. Спецификация выше инлайна index.html (~672). */ #installations .inst-track .inst-slide{ border-radius:18px!important;overflow:hidden!important; border:0!important;box-shadow:0 6px 20px rgba(26,26,26,.10); box-sizing:border-box;background:transparent!important; } #installations .inst-track .inst-slide > img{ border:0!important;border-radius:0!important;object-fit:cover!important; width:100%!important;height:100%!important;max-width:none!important;max-height:none!important; display:block!important;box-shadow:none!important; } /* R-A5b: ЕДИНЫЙ аспект 4/5 (портрет — большинство фото вертикальные/квадрат, минимум обрезки) на десктопе и мобиле; десктоп компактнее + ограничен под натуральное разрешение (≈≤2× апскейл) */ #installations .inst-track .inst-slide{aspect-ratio:4/5!important;height:auto!important} /* R-A5 (CC 17.06): cover/ноль-полос уже verified live; ТЗ-остаток = десктоп НЕ влазит (слайд был 81% высоты вьюпорта). Уменьшаю контейнер ~1.5× (480→320), аспект 4/5 сохранён, мобайл не задет (правило только min-width:769px). Без пикселизации (downscale). */ @media(min-width:769px){ #installations .inst-carousel{max-width:320px!important} } @media(max-width:768px){ #installations .inst-track .inst-slide{aspect-ratio:4/5!important;height:auto!important} } @media(max-width:480px){ #installations .inst-track .inst-slide{aspect-ratio:4/5!important;height:auto!important} } /* ===== B. КАРУСЕЛИ ===== */ /* B1: видео — компактнее, оверлей-стрелки поверх трека, старт без дыры слева. Цикл — в JS. */ #videos .vid-cf{position:relative;margin-top:24px} #videos .vid-card{flex:0 0 230px!important;max-width:230px!important} #videos .vid-card video{ aspect-ratio:9/16!important;border-radius:18px!important; border:2px solid #f6921e!important;object-fit:cover!important;background:#000!important;display:block!important; } /* R-B4: ВОССТАНОВЛЕН center-snap (регресс snap:none убран). Кнопки/цикл — программный scroll в JS. */ #videos .vid-grid{padding:8px calc(50% - 115px)!important;scroll-snap-type:x mandatory!important;justify-content:flex-start!important;gap:18px!important} #videos .vid-card{scroll-snap-align:center!important} @media(max-width:560px){#videos .vid-grid{padding:8px calc(50% - 35vw)!important}} #videos .vid-cf-arrows{ position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important; margin:0!important;display:block!important;pointer-events:none!important;z-index:5!important; } #videos .vid-cf-arrows button{ position:absolute!important;top:50%!important;transform:translateY(-50%)!important; width:46px!important;height:46px!important;border-radius:50%!important;border:0!important; background:rgba(26,26,26,.5)!important;color:#fff!important;font-size:24px!important;line-height:1!important; cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important; pointer-events:auto!important;opacity:.5!important;transition:opacity .15s,background .15s!important;backdrop-filter:blur(3px); } #videos .vid-cf-arrows button:hover{opacity:1!important;background:#f6921e!important} #videos #vidPrev{left:10px!important} #videos #vidNext{right:10px!important} @media(max-width:560px){ #videos .vid-card{flex:0 0 70%!important;max-width:70%!important} #videos .vid-grid{padding:8px 10px!important;gap:12px!important} #videos .vid-cf-arrows button{width:40px!important;height:40px!important;font-size:20px!important} #videos #vidPrev{left:4px!important}#videos #vidNext{right:4px!important} } /* B2: патенты (мобайл) — сохраняем родной JS-transform; чиним выход за экран: gap=0 (translateX(-100%*cur) ложится точно), слайд 100% минус зоны стрелок, центр. */ @media(max-width:680px){ #patCarousel .pc-track-wrap{overflow:hidden!important;padding:6px 0!important;border-radius:14px} #patCarousel .pc-track{gap:0!important} #patCarousel .pc-slide{flex:0 0 100%!important;max-width:100%!important;box-sizing:border-box!important;padding:0 44px!important} #patCarousel .pc-slide img{height:auto!important;max-height:440px!important} #patCarousel .pc-prev{left:2px!important} #patCarousel .pc-next{right:2px!important} #patCarousel .pc-prev,#patCarousel .pc-next{width:40px!important;height:40px!important;font-size:20px!important;z-index:4!important} } /* B4: карточки отзывов (мобайл) — формат как у патентов (88vw, не «вытянуты вверх») */ @media(max-width:576px){ .testim-scroll{scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;scroll-padding:0 6vw!important} .testim-card{flex:0 0 88vw!important;max-width:88vw!important;scroll-snap-align:center!important} .testim-card.t-mp,.testim-card.t-tg{height:auto!important;min-height:0!important} .testim-card.t-mp .testim-shot,.testim-card.t-tg .testim-shot{height:auto!important;max-height:200px!important} .testim-prev,.testim-next{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:4!important;opacity:.5!important;width:40px!important;height:40px!important;font-size:22px!important;background:rgba(255,255,255,.92)!important} .testim-prev{left:4px!important} .testim-next{right:4px!important} .testim-prev:active,.testim-next:active{opacity:.9!important;background:var(--orange)!important;color:#fff!important} } /* ===== F-CASES-MOBILE: <=576px coverflow кейсов (сохранено) ===== */ @media(max-width:576px){ .cases-real{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px!important;padding:8px 12% 14px;scroll-padding:0 12%;margin:0 -16px} .cases-real::-webkit-scrollbar{height:6px} .cases-real::-webkit-scrollbar-thumb{background:rgba(246,146,30,.4);border-radius:4px} .cases-real .case{flex:0 0 76%!important;scroll-snap-align:center;display:block!important;grid-template-columns:none!important;box-sizing:border-box;transition:transform .3s,box-shadow .3s,opacity .3s} .cases-real .case > .case-photo{grid-column:auto!important;grid-row:auto!important;margin:0 0 12px!important;width:100%} .cases-real .case > .case-photo > img{height:auto!important;max-height:260px!important;aspect-ratio:4/3} /* R-A3: prod-кейс (.case-render) на 375 — скругление 18px через обёртку + cover, как у соседей */ .cases-real .case > .case-photo.case-render{border-radius:18px!important;overflow:hidden!important;align-self:auto!important;height:auto!important} .cases-real .case > .case-photo.case-render > img{border-radius:inherit!important;object-fit:cover!important;width:100%!important;height:auto!important;max-height:260px!important;aspect-ratio:4/3!important;min-height:0!important;display:block!important} .cases-real .case > .case-photo.case-render .case-render-cap{display:none!important} .case-minidots{display:flex;justify-content:center;gap:6px;margin:-4px 0 10px;flex-wrap:wrap} .case-minidots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(26,26,26,.22);cursor:pointer;transition:background .2s,transform .2s} .case-minidots button.active{background:var(--orange);transform:scale(1.35)} .cases-cf-nav{display:flex;justify-content:center;gap:14px;margin-top:6px} .cases-cf-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:#1a1a1a;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(26,26,26,.08)} .cases-cf-nav button:active{background:var(--orange);color:#fff;border-color:var(--orange)} } @media(min-width:577px){.case-minidots,.cases-cf-nav{display:none}} /* ===== F-HERO-MOBILE: <=576px заголовок->картинка->текст (сохранено) ===== */ @media(max-width:576px){ .hero .hero-in > div:first-child{display:flex;flex-direction:column} .hero .hero-in > div:first-child .hero-tag{order:1} .hero .hero-in > div:first-child h1{order:2} .hero .hero-in > div:first-child .hero-img{order:3;margin:14px 0} .hero .hero-in > div:first-child .hero-sub{order:4} .hero .hero-in > div:first-child .hero-cta{order:5} .hero .hero-in > .hero-img{display:none} .hero-img{min-height:0!important;padding:0!important;border-radius:18px;overflow:hidden;position:relative} .hero-img > img{max-height:240px!important;width:100%!important;object-fit:cover!important;border-radius:inherit!important} .hero-img-cap{bottom:10px!important} } /* ===== R-C: ЛОКАЛЬНЫЙ SCROLLSPY DOT-NAV (вертикальная шкала справа) ===== */ .bfc-spy{position:fixed;right:18px;top:50%;transform:translateY(-50%) translateX(14px);z-index:120;display:flex;flex-direction:column;gap:14px;align-items:center;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease} .bfc-spy.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)} .bfc-spy a{display:block;width:11px;height:11px;border-radius:50%;background:rgba(26,26,26,.22);position:relative;transition:background .25s,transform .25s;cursor:pointer} .bfc-spy a:hover{background:rgba(246,146,30,.6);transform:scale(1.2)} .bfc-spy a.active{background:#f6921e;transform:scale(1.35)} .bfc-spy a.active::before{content:"";position:absolute;left:50%;top:50%;width:3px;height:18px;border-radius:3px;background:#f6921e;transform:translate(-50%,-50%);opacity:0} /* активная как чёрточка-индикатор: точка→вытянутая риска */ .bfc-spy a.active{width:5px;height:20px;border-radius:4px} .bfc-spy .spy-lbl{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#1a1a1a;color:#fff;font:600 12px/1 'Roboto Condensed','Roboto',sans-serif;padding:6px 10px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .2s} .bfc-spy a:hover .spy-lbl{opacity:1} @media(max-width:768px){.bfc-spy{right:10px;gap:11px}.bfc-spy a{width:9px;height:9px}.bfc-spy a.active{width:4px;height:16px}.bfc-spy .spy-lbl{display:none}} @media(max-width:420px){.bfc-spy{right:7px;gap:9px}} /* ===== R-G1 · ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ · CW-OPS 2026-06-16 ===== */ /* Одинаковый компактный padding для всех контентных секций лендинга. Источник правды — переменная --section-pad. Hero/trust исключены (свой ритм/тонкая полоса). */ :root{ --section-pad: 48px; } .proekt-landing section:not(.hero):not(.trust), body section:not(.hero):not(.trust){ padding-top: var(--section-pad) !important; padding-bottom: var(--section-pad) !important; } @media (max-width: 768px){ :root{ --section-pad: 36px; } } /* ===== R-A4b/R-A4c · ОТЗЫВЫ ДЕСКТОП — вписать фото монтажника и скрин-доказательство · CW-OPS 2026-06-16 ===== */ /* R-A4b — карточка монтажника (портрет 960×1280): не резать «по кепку». Даём более высокую рамку и фокус на верх корпуса/голову. */ .testim-card:has(img[src*="tg_montazhnik_449"]) .testim-shot{ height: 320px !important; max-height: 320px !important; object-fit: cover !important; object-position: 50% 22% !important; border-radius: 18px !important; } /* R-A4c — карточка-скрин Ozon (широкий лендскейп 820×226): показать ЦЕЛИКОМ, не кропать. */ .testim-card:has(img[src*="ozon_01_sergey_b"]) .testim-shot{ height: 150px !important; max-height: 150px !important; min-height: 150px !important; object-fit: contain !important; object-position: 50% 50% !important; background: #f4f4f4 !important; border-radius: 18px !important; width: 100% !important; } /* Моб ≤768: монтажник чуть ниже, но всё равно показываем целиком */ @media (max-width:768px){ .testim-card:has(img[src*="tg_montazhnik_449"]) .testim-shot{ height:260px !important; max-height:260px !important; } .testim-card:has(img[src*="ozon_01_sergey_b"]) .testim-shot{ height:130px !important; max-height:130px !important; min-height:130px !important; } } /* ============================================================ R-FIXWAVE 2026-06-17 · CC-CORE (И-73, PR #13) — локальные фронт-правки ============================================================ */ /* R-G2-fix (CC 18.06): прошлый contain+padding скруглял только БЕЛОЕ ПОЛЕ, не сам снимок (letterbox-фото инсетнуто паддингом → радиус не доставал до краёв фото). Переделано на cover+fill+no-padding: фото заполняет .gal-item (у которого border-radius:18px + overflow:hidden из правила выше) → контейнер клипает верхние углы СНИМКА → реальное заметное скругление. Высота — существующая фикс. (240px десктоп / 180px ≤768, инлайн index.html). Кроп принят (ТЗ Германа). */ #gallery .gal-item > img, #gallery .gal-scroll .gal-item > img{ padding:0!important; object-fit:cover!important; width:100%!important; border-radius:0!important; } /* R-A5-dots · #installations пагинация под галереей — точки были эллипсами: flex сплющивал ширину (25 точек в узком ~320px контейнере, flex-shrink:1 по умолчанию). Делаем круглыми — равные width=height, circle, запрет сжатия; контейнеру разрешаем перенос (иначе оверфлоу). */ #installations .inst-dots{flex-wrap:wrap!important} #installations .inst-dot{ flex:0 0 auto!important; width:8px!important;height:8px!important; border-radius:50%!important; } /* R-A5-arrows · ТОЛЬКО десктоп ≥1024: стрелки ‹ › выносим ПО БОКАМ от ленты (снаружи галереи слева/справа), не поверх фото и не внизу. Лента центрирована ~320px → отрицательный офсет уводит кнопки в боковое поле .wrap. До 1024px — прежнее поведение (оверлей у края фото). */ @media(min-width:1024px){ #installations .inst-prev{left:-60px!important;right:auto!important} #installations .inst-next{right:-60px!important;left:auto!important} } /* TASK3 (CC 18.06): зазор между nav и auth-чипом — «Партнёрство» не впритык к CTA «Скачать STEP/DWG». Шапка плотная при needs_consent (0 слака), поэтому зазор фондируем уменьшением inter-item gap 24→20 (net по ширине ~0, без оверфлоу). На анон/без-чипа margin инертен, items-gap 20px читаемо. */ .hdr-in .nav{gap:20px!important} .hdr-in #bfc-header-chip{margin-left:16px!important}