/* pbn-enhance.css — дополнения к style.css макета phpshop-design.ru («PhpShop Design») под токен-движок BablO$. Статичная часть — этот файл (bin/pbn/data/phpshop-design/pbn-enhance.css, пишется вместе со схемой bin/pbn/phpshop-design_1_schema.php). Сид страниц bin/pbn/phpshop-design_2_pages.php копирует его в public/sites/phpshop-design-ru/assets/a/c801c6de8773.css и дописывает в конец маски иконок по ключам (i[data-ic="<ключ>"]{--ic:url("data:…")}); руками в public/ не править — перезапишется. Правило файла: только переменные и классы макета; своих классов нет — кроме тех, что рисует сам движок (.bf-msg/.bf-ok/.bf-err ответа формы, .pdo-pagenav/.pdo-pagebtn/.active листания). */ /* Иконка услуги (колонка icon набора mx_services — sections макета рисуют icon($serviceItem['icon'], 26)): значения MIGX экранируются, SVG туда не положить. В строке — ключ icon() макета: без класса (у svg макета класс icon icon--<ключ>, выдумывать свой не будем), форма — маской из того же SVG, размер — style как width/height у svg. display:block — как img, svg {display:block} сброса макета; цвет — currentColor обёртки (.service-block__icon — бордовый) */ i[data-ic]{display:block;flex:0 0 auto;background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} /* ключ не задан — без маски залился бы сплошным квадратом цвета иконки */ i[data-ic=""]{display:none} /* Условные абзацы макета (if (!empty($ctaBannerEyebrow)), if (!empty($heroDarkCaption)) и т. п.): токен стоит вплотную к тегам, пустое значение — пустой элемент, его нет. Бейдж категории пуст, если ключ категории у примера не нашёлся в наборе «Настроек» (без правила остался бы пустой коралловый овал) */ .eyebrow:empty,.lead:empty,.hero-dark__caption:empty,.example-card__badge:empty{display:none} .portfolio-detail__head:has(> .portfolio-detail__badge:empty){display:none} /* Пример магазина (primer.php): у живых работ бывает только «Задача» или только «Проделанная работа» — пустая колонка (абзац или список без строк) не выводится, вторая остаётся на своём месте сетки */ .portfolio-detail__grid > div:has(> p:empty), .portfolio-detail__grid > div:has(> .portfolio-detail__results:empty){display:none} /* Команда «О нас» без строк набора — секции с одним заголовком нет */ .section:has(> .container > .team-grid:empty){display:none} /* «Текст» страницы ([[*content]]: тексты живого сайта и воркфлоу генерации) — колонка .news-detail__body (так макет верстает тело новости и «Политику»), на главной — .intro__body блока «Кто мы». Пустой «Текст» — блока нет; у «Цен» — отдельной секции после тарифов, у главной — всего блока «Кто мы» (остался бы один заголовок) */ .news-detail__body:empty{display:none} .section:has(> .container > .news-detail__body:only-child:empty){display:none} .section:has(> .intro > .intro__body:empty){display:none} /* .reveal макета: main.js проявляет блок, когда в окне 15% его высоты (IntersectionObserver threshold .15). У колонки «Текста» выше ~6 экранов (длинная живая страница, генерация) доля 15% в окно не помещается никогда — блок остался бы прозрачным. Контейнеры «Текста» проявлены сразу, анимация остальных блоков макета — как была */ .news-detail__body.reveal,.intro.reveal{opacity:1;transform:none} /* Тексты из админки: сброс макета снял маркеры и отступы списков (ul, ol {list-style:none}) и оформление ссылок (a {color:inherit; text-decoration:none}) — возвращаем в палитре макета; картинки живых работ (макеты, скриншоты) — своей шириной, не растягиваясь колонкой flex; видео и таблицы — во всю колонку с прокруткой на узком экране */ :is(.news-detail__body,.intro__body) :is(p,li,td,th) a{color:var(--color-maroon);text-decoration:underline;text-underline-offset:2px} :is(.news-detail__body,.intro__body) :is(p,li,td,th) a:hover{color:var(--color-coral-dark)} :is(.news-detail__body,.intro__body) ul{padding-left:1.4em;list-style:disc} :is(.news-detail__body,.intro__body) ol{padding-left:1.4em;list-style:decimal} :is(.news-detail__body,.intro__body) li + li{margin-top:.35em} :is(.news-detail__body,.intro__body) h3{margin-top:.5rem} :is(.news-detail__body,.intro__body) img{align-self:flex-start;height:auto;border-radius:var(--radius-md)} :is(.news-detail__body,.intro__body) iframe{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius-md)} :is(.news-detail__body,.intro__body) blockquote{margin:0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--color-coral)} :is(.news-detail__body,.intro__body) table{display:block;overflow-x:auto;font-size:.92rem} :is(.news-detail__body,.intro__body) :is(th,td){padding:.6rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)} :is(.news-detail__body,.intro__body) th{font-family:var(--font-head);font-weight:700;background:var(--color-warm-white)} /* «Контакты»: у kontakty.php два

(в тёмной плашке hero-dark.php и «Как с нами связаться»), а у страницы H1 один — заголовок плашки там

. Правило .hero-dark h1 макета повторено для него, размер и начертание — как у h1 */ .hero-dark h2{color:var(--color-white);text-transform:uppercase;max-width:40rem;font-size:var(--fs-h1);font-weight:800} /* Ответ формы движка ([[+msg]] — после ряда кнопки .form-submit-row): плашка тёплого фона макета бордовым текстом, ошибка — красным цены распродажи. Скрытое состояние держит [hidden]{display:none!important} из style.css */ .bf-msg{margin-top:1rem;padding:.9rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-warm-white);font-size:.9rem;font-weight:600;color:var(--color-maroon)} .bf-msg.bf-err{color:var(--color-price-sale)} /* Листание лент (&paginate движка: «Примеры магазинов», «Новости»; у макета — все карточки одним списком): кнопки в виде табов-фильтров .filter-tabs__btn, текущая — как нажатый таб. Кнопки движка — с инлайн-стилями, поэтому !important */ .pdo-pagenav{gap:.6rem!important;margin:2.5rem 0 0!important} .pdo-pagenav .pdo-pagebtn{padding:.55rem 1.1rem!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-pill)!important;background:transparent!important;color:var(--color-text-muted)!important;font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition)} .pdo-pagenav .pdo-pagebtn:hover{border-color:var(--color-maroon)!important;color:var(--color-maroon)!important} .pdo-pagenav .pdo-pagebtn.active{background:var(--color-maroon)!important;border-color:var(--color-maroon)!important;color:var(--color-white)!important} .pdo-pagenav .pdo-pagebtn[disabled],.pdo-pagenav .pdo-pagebtn[disabled]:hover{opacity:.4;cursor:default;border-color:var(--color-border)!important;color:var(--color-text-muted)!important} /* Маски иконок i[data-ic="<ключ>"] по icon() макета — дописывает bin/pbn/phpshop-design_2_pages.php при каждом прогоне. Файл перезаписывается целиком: статичную часть правьте в bin/pbn/data/phpshop-design/pbn-enhance.css */ i[data-ic="layers"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22m12%203%208.5%204.5L12%2012%203.5%207.5%2012%203Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m3.5%2012%208.5%204.5L20.5%2012M3.5%2016.5%2012%2021l8.5-4.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} i[data-ic="tag"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2012.6%2012.6%2020a2%202%200%200%201-2.8%200l-6.8-6.8a2%202%200%200%201%200-2.8L10.4%203H19a1%201%200%200%201%201%201v8.6Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%228%22%20r%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")} i[data-ic="cart"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.5%204.5h2.3l1.1%2011.4a2%202%200%200%200%202%201.8h7.9a2%202%200%200%200%202-1.6l1.4-7.6H6.3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%229.6%22%20cy%3D%2220.5%22%20r%3D%221.4%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2217.2%22%20cy%3D%2220.5%22%20r%3D%221.4%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")} i[data-ic="shield"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12%203.5%2019%206v6c0%204.4-2.9%207.9-7%208.5-4.1-.6-7-4.1-7-8.5V6l7-2.5Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012l2.2%202.2L15.5%209.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} i[data-ic="search"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2210.6%22%20cy%3D%2210.6%22%20r%3D%226.6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.6%2021%2021%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")} i[data-ic="clock"]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%207.6V12l3%202%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")} /* Портфолио: реальные изображения проектов */ .example-card__media img,.portfolio-detail__media img{display:block;width:100%;height:100%;object-fit:cover} .portfolio-detail__media{overflow:hidden} /* Первый экран: слайдер */ .hero--slider{padding:0;background:var(--color-tint)} .hero-slider{position:relative;max-width:1080px;margin:0 auto} .hero-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:26px 54px 12px} .hero-slide[hidden]{display:none!important} .hero-slide__media img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover} .hero-slide__panel h1,.hero-slide__panel h2{font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.15;margin:0 0 14px} .hero-slide__panel p{color:var(--color-ink-soft);line-height:1.55;margin:0 0 12px} .hero-slider__nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 0 18px} .hero-slider__arrow{width:36px;height:36px;border:1px solid var(--color-line);border-radius:50%;background:#fff;cursor:pointer;font-size:18px;line-height:1} .hero-slider__dots{display:flex;gap:7px} .hero-slider__dot{width:8px;height:8px;border:0;border-radius:50%;background:var(--color-line);cursor:pointer;padding:0} .hero-slider__dot.is-active{background:var(--color-maroon)} @media(max-width:760px){.hero-slide{grid-template-columns:1fr;padding:18px 22px 8px;gap:16px}.hero-slide__panel h1,.hero-slide__panel h2{font-size:1.45rem}.hero-slide__media img{max-height:260px}} /* Слайдер: раскрываем на всю ширину контейнера */ .hero-slider{width:100%} .hero-slide{width:100%!important;box-sizing:border-box} .hero--slider{display:block!important} .hero--slider .hero-slider{width:100%!important;max-width:none!important;margin:0!important}