/* NEW WOOD ART — homepage from lab mockup */ /* ⚠️ ЭТОТ @import ПОДКЛЮЧАЕТ MONTSERRAT ВСЕМУ САЙТУ, А НЕ ТОЛЬКО ГЛАВНОЙ. Файл грузится на каждой странице: на главной тегом в home.twig, на остальных его добавляет uni_new_data.php. Веса 300 и 400 реально приходят с fonts.gstatic.com — проверено в Chrome (document.fonts: «Montserrat 300 loaded»), поэтому тонкое начертание заголовков настоящее, а не подстановка Arial. Уберёте строку — заголовки молча станут Arial обычной толщины. ⚠️ Это ДВА внешних запроса к Google на каждой странице (css2 и woff2). Если когда-нибудь встанет вопрос доступности или скорости в РФ — шрифт кладётся локально рядом с Roboto (catalog/view/theme/unishop2/fonts/) и @font-face пишется по образцу stylesheet/roboto.css. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); /* =========================================================================== ПАЛИТРА АКЦЕНТА — ОДИН ТОН, НЕСКОЛЬКО СВЕТЛОТ =========================================================================== 23.09.2026 — акцент #DE4E10: владелец прислал картинку, велел взять её средний цвет, сначала проверил в кабинете, затем — «на всём сайте». Все значения — ОДИН тон и ОДНА насыщенность hsl(18, 87%), меняется только светлота. Производные подобраны расчётом контраста WCAG, а не на глаз. | Роль | 15.09 | 23.09 | L | Контраст | |--------------------------------|-----------|-----------|-----|--------------------| | основной акцент | #CD802D | #DE4E10 | 47% | 4.04 к белому | | тёмный — заливки, мелкий текст | #A76825 | #BD420E | 40% | 5.32 белый на нём | | светлый — значки на тёмном | #DEA568 | #F38454 | 64% | 7.63 к #0C0D0F | | самая тёмная ссылка | #975E21 | #AB3C0C | 36% | 6.21 к белому | | наведение, выделение, «в корзине» | #FF6600 | #F06529 | 55% | 3.18 белый на нём | | наведение поверх выделенного | #E65C00 | #DE4E10 | | | | подложки | #F4EDE4 #F3EDE7 → #FAEAE2; #FBF7F2 → #FDF5F2; | | | #FFF4EC → #FFF1EB; #FFF0E6 → #FFEDE5; #FFF7F1 → #FFF4F0 | | генераторы: заливка / наведение / текст | #F26A1B / #FF8127 / #C2500C → #DE4E10 / #F06529 / #BD420E | | подсветки rgba | 205,128,45 · 166,124,82 · 242,106,27 → 222,78,16; 255,102,0 → 240,101,41 | Замена 23.09 шла скриптом ТОЛЬКО по коду: в комментариях старые значения остались как история — сверяйте их по этой таблице. Тогда же #FF6600 впервые сменён и в NWA-файлах (раньше его не трогали как цвет темы); в файлах самой темы (stylesheet.css, generated*.css, slideshow_v2.css) он остался — на страницах NWA их перекрывают наши правила, кольцо переключателя перекрыто в nwa-inner.css. Цвета со смыслом не менялись: жёлтый статус «Ожидание», шкала остатков товара (--nwa-orange в custom-dark-theme.css), золотые тона фасада, бежевые декоративные линии главной. ⚠️ ЗНАЧЕНИЯ ЗАШИТЫ ПРЯМЫМ ТЕКСТОМ во всех nwa-*.css, checkout.css и custom-dark-theme.css (23.09 — 210 мест в 13 файлах) плюс SVG-значки image/catalog/nwa/cat-icons/*.svg и menu-icons/viewer.svg (там #DE4E10). Меняете цвет — меняйте везде, иначе часть сайта останется прежней. ⚠️ Основной #DE4E10 даёт к белому 4.04 — чуть меньше 4.5 для мелкого текста. Мелкие подписи на светлом фоне — тёмным #BD420E или #AB3C0C. ⚠️ ОРАНЖЕВЫЙ ТЕКСТ ИЛИ ЗНАЧОК — ТОЛЬКО НА СЕРОЙ ПОДЛОЖКЕ #EEEEEA, не на оранжево-розовой (владелец, 23.09.2026: «оранжевое на оранжевом не читается»). Так сделаны плашки карточек главной, значки кабинета и NWA Viewer, плашки «G-код · ЧПУ» и выбранные варианты генераторов и подписки (--rc-neutral-soft / --zh-neutral-soft), наведение в меню категорий. Светло-оранжевая подложка осталась только там, где текст тёмный или его нет (тумблеры генераторов, выбранный способ оплаты, «продажа закрыта»). */ body.nwa-home header, body.nwa-home .top-menu, body.nwa-home .header-block, body.nwa-home #menu, body.nwa-home .menu, body.nwa-home .fly-menu{ display:none !important; } body.nwa-home, html:has(body.nwa-home){ padding-top:0 !important; margin-top:0 !important; } body.nwa-home .uni-wrapper, body.nwa-home .container, body.nwa-home .nwa-lab, body.nwa-home .nwa-hero{ padding-top:0 !important; margin-top:0 !important; } body.nwa-home .nwa-hero__top-inner{ padding-top:0 !important; } .nwa-lab{ font-family:'Montserrat', Tahoma, sans-serif; color:#2A2C2E; background:#F2F2F0; margin:0; padding:0; } .nwa-lab *{box-sizing:border-box} /* Hero — flush to top + typography 1:1 with mockup photo */ .nwa-hero{ --nwa-hero-accent:#DE4E10; --nwa-hero-white:#FFFFFF; position:relative; min-height:min(70vh, 680px); display:flex; flex-direction:column; align-items:stretch; overflow:visible; /* Обрезка только снизу: масштабированный фон не вылезает ниже секции и его край совпадает с нижним краем фигуры человека. */ clip-path:inset(-100vh -100vw 0 -100vw); background:#141618; color:var(--nwa-hero-white); margin:0; padding:0; font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .nwa-hero__bg{ position:absolute; inset:0; /* Фото и затемнение (.nwa-hero__scrim) вылетают вверх на одну и ту же величину, чтобы оба доходили до самой кромки страницы, даже если секция начинается не вплотную к верху окна. Раньше запас сверху давало только масштабирование от центра — около 1% высоты, и его не хватало. Точку масштабирования намеренно НЕ меняем: scale от центра добавляет ещё немного вылета во все стороны. Снизу лишнее срезает clip-path у .nwa-hero. */ top:-200px; background-size:cover; background-position:right center; /* Декоративное масштабирование расширяло документ за пределы viewport. */ transform:none; animation:none; overflow:hidden; } .nwa-hero__scrim{ position:absolute; inset:0; /* Затемнение должно доходить до самой верхней кромки страницы. Раньше оно было натянуто ровно по секции (inset:0), и над ним оставалась светлая полоса: фон при анимации выезжает вверх, да и сама секция может стоять не вплотную к краю окна. Запас в 200px закрывает это при любой причине. Растягивание по вертикали вид не искажает: градиент горизонтальный. */ top:-200px; background: /* Подложка под верхнюю панель: плотная у кромки и сходящая на нет через 260px, чтобы белые логотип и меню читались на любом кадре фотографии, а середина снимка осталась нетронутой. Смещение «0 200px» компенсирует вылет scrim вверх (top:-200px) — слой начинается ровно от верхней кромки экрана. Если менять вылет, это число менять вместе с ним. Плотность правится первым значением: .78 темнее, .5 светлее. */ linear-gradient(180deg, rgba(8,9,11,.78) 0px, rgba(8,9,11,.78) 200px, rgba(8,9,11,.45) 320px, rgba(8,9,11,0) 460px) top / 100% 460px no-repeat, linear-gradient(90deg, rgba(8,9,11,.82) 0%, rgba(8,9,11,.55) 42%, rgba(8,9,11,.38) 100%), rgba(8,9,11,.28); } .nwa-hero__man{ position:absolute; left:66%; right:auto; bottom:0; z-index:2; width:min(32vw, 368px); transform:translateX(-50%); pointer-events:none; animation:nwa-man-in .9s ease .15s both; display:flex; align-items:flex-end; } .nwa-hero__man img{ display:block; width:100%; height:auto; vertical-align:bottom; filter:drop-shadow(0 18px 36px rgba(0,0,0,.4)); } .nwa-hero__man--portrait{ left:69%; top:auto; bottom:0; width:min(32vw, 420px); overflow:visible; align-items:flex-end; border:0; border-radius:0; background:transparent; box-shadow:none; } .nwa-hero__man--portrait img{ height:auto; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 18px 36px rgba(0,0,0,.4)); } .nwa-hero__top{ position:relative; z-index:4; padding:0; } .nwa-hero__top-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; /* Панель прижата к верхнему краю. Подняв её, поправьте заодно .nwa-nav{margin-top} и .nwa-logo{transform} — вертикальное положение логотипа и меню задаётся там, каждое своим числом. */ padding-top:0; /* Панель обязана идти по той же сетке, что и текст hero, иначе проценты отсчитываются от разной ширины. Блок с заголовком (.nwa-hero__inner) растянут на всю ширину секции и без боковых полей, а .container сам по себе ограничен max-width и центрируется — из-за этого логотип с margin-left:4% уезжал к середине экрана вместо края текста. */ width:100%; max-width:none; padding-left:0; padding-right:0; } /* ⚠️ Claude Opus 5, 15.09.2026: снятие clearfix .container — на ВСЕХ ширинах. Bootstrap вешает каждому .container пару псевдоэлементов (content:" "; display:table). В обычной обёртке они невидимы, но и шапка главной, и полоса разделов внутренних страниц — это сам .container, объявленный flex. Там псевдоэлементы становятся ПОЛНОЦЕННЫМИ flex-элементами: добавляют два лишних gap и участвуют в раскладке justify-content. Что это ломало на десктопе: у .nwa-hero__top-inner стоит gap:24px, и логотип получал ровно эти 24px слева от псевдоэлемента. Замерено на 1440px: заголовок hero начинался на x=58, логотип — на x=82, хотя оба должны стоять на 4% ширины (см. комментарий в .nwa-logo, где это выравнивание и задумано). Убирать безопасно: очищать нечего — float у детей flex- и grid-контейнера не применяется вовсе. До 15.09.2026 такое же правило стояло только в @media (max-width:1100px) и лечило лишь переполнение на 320px. */ .nwa-hero__top-inner::before, .nwa-hero__top-inner::after, .nwa-topbar__rail-inner::before, .nwa-topbar__rail-inner::after{ display:none; } .nwa-logo{ display:flex; align-items:center; text-decoration:none !important; line-height:0; flex:0 0 auto; /* Левый край логотипа выровнен с заголовком hero. Оба лежат в .container, у заголовка отступ .nwa-hero__copy{margin-left:4%} — здесь тот же 4%, отсчитываемый от той же ширины, поэтому края совпадают на любом экране. Прежние translate(-28%) и margin-left:-40px выдвигали логотип левее контейнера на фиксированную величину, и с шириной окна расхождение менялось. По вертикали сдвиг сохранён. */ /* Вертикальный сдвиг логотипа. Было 25% — вместе с прежним отступом панели это опускало его заметно ниже верхнего края. */ transform:translateY(4%); position:relative; z-index:5; margin-left:4%; } .nwa-logo__img{ display:block; /* Логотип — вертикальная композиция: знак, под ним «ЛАБОРАТОРИЯ NESTING» и «NEW WOOD ART». Высоту меньше ~140px ставить нельзя, подпись под знаком становится нечитаемой. Правится одним числом. */ height:154px; width:auto; max-width:416px; object-fit:contain; } .nwa-nav{ display:flex; align-items:center; justify-content:flex-end; flex:1 1 auto; flex-wrap:wrap; gap:24px; /* Меню поднято к верхней кромке. Было calc(8px + 2vh) — на широких экранах это давало заметный провал вниз, потому что 2vh растёт вместе с высотой окна. */ margin-top:calc(2px + 0.4vh); /* Отступ от правого края. Раньше был 4% — зеркально логотипу; сейчас меню прижато ближе к краю, поэтому число меньше. Правится одной цифрой. */ margin-right:1.5%; } .nwa-mobile-actions, .nwa-nav__mobile-head{ display:none; } .nwa-mobile-menu-toggle, .nwa-mobile-cart, .nwa-mobile-menu-close{ font-family:inherit; } .nwa-nav a{ font-size:16px; font-weight:400; line-height:1.2; letter-spacing:0; text-transform:none; color:var(--nwa-hero-white) !important; text-decoration:none !important; } .nwa-nav a:hover{color:var(--nwa-hero-accent) !important} /* ⚠️ Кегль ТОЛЬКО верхней строки — 15px вместо общих 16 (владелец, 15.09.2026: «уменьшим размер текста»). Селектор привязан к .nwa-hero__top-inner намеренно. Класс .nwa-nav висит и на ленте разделов внутренних страниц (