/* ══════════════════════════════════════════════════════════════════════════ «Крафт-Букет» — основные стили. ФАЙЛ СОБИРАЕТСЯ АВТОМАТИЧЕСКИ. Не редактируйте его руками: правьте css/components/*.css и запускайте `php tools/build-css.php`. Токены дизайн-системы — в css/critical.css, он инлайнится в . Собрано: 2026-09-15 15:57 ══════════════════════════════════════════════════════════════════════════ */ /* ═══ components/ui.css ═══ */ /* ── Компоненты интерфейса: кнопки, значки, крошки, пагинация, уведомления ── */ .btn--icon { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--color-text); border-radius: var(--radius-pill); } .btn--icon:hover { color: var(--color-accent); background: var(--color-surface); } .btn--large { min-height: 56px; padding: 0 40px; font-size: var(--fs-lg); } /* ⚠ Два имени у одной кнопки — не небрежность, а починка. Сайт писался с `--small`, а вся панель КрафтОС — с `--sm`: 55 кнопок в 19 файлах ссылались на класс, которого не существовало, и получали базовый размер. На телефоне это 52 px с широкими полями, то есть каждая второстепенная кнопка выглядела как главная — панель переставала походить на остальной сайт. Найдено владельцем 14.09.2026 по кнопке «Скопировать» рядом с QR. Правим стилем, а не переименованием: половина этих файлов общая с соседним чатом, и массовая замена в них затёрла бы чужую работу ради косметики. */ .btn--small, .btn--sm { min-height: 40px; padding: 0 20px; font-size: var(--fs-sm); } /* .btn--small объявлена в styles.css, а мобильные 52px — в critical.css, который подключается раньше. По каскаду выигрывала уменьшенная кнопка, и «В корзину» в карточке каталога оказывалась 40px — ниже минимальной сенсорной зоны 44×44. На пальце это главная кнопка витрины */ @media (max-width: 900px) { .btn--small, .btn--sm { min-height: 44px; } } .btn[disabled], .btn.is-disabled { background: var(--color-disabled); color: var(--color-muted); border-color: transparent; cursor: not-allowed; pointer-events: none; } .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--color-on-accent); animation: kb-spin 700ms linear infinite; } @keyframes kb-spin { to { transform: rotate(360deg); } } /* Иконки Lucide. Эмодзи в интерфейсе запрещены: на разных ОС они рендерятся по-разному и мгновенно роняют премиальность */ .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon--sm { width: 16px; height: 16px; } .icon--lg { width: 24px; height: 24px; } .icon--xl { width: 32px; height: 32px; } /* ── Статус наличия ──────────────────────────────────────────────────────── Точка и слово одновременно. Цвет не может быть единственным носителем смысла — требование доступности и прямое правило trust-factors.md ───────────────────────────────────────────────────────────────────────── */ .stock { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); } .stock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); flex-shrink: 0; } .stock--in-stock { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); } .stock--in-stock .stock__dot { background: var(--color-success); } /* К1. «Под заказ» — не отказ, а вторая дата доставки. Серый здесь читался как «выключено», а по данным Posiflora так помечено больше половины каталога: витрина выглядела нерабочей при продающем тексте. Текст взят на тон темнее патча (--color-accent-hover вместо --color-accent): на подложке 28% accent-light исходное значение даёт 3.89:1 на кремовом фоне и 4.12:1 на белой карточке — ниже нормы 4.5:1, которую требует сам чек-лист приёмки. С accent-hover выходит 5.01–6.45:1 во всех четырёх сочетаниях тем и подложек. Токен существующий, золото сохраняется */ .stock--preorder { color: var(--color-accent-hover); /* Р2. Было 28%, тогда как у in-stock подложка 10%: недоступные позиции выделялись сильнее доступных, в тёмной теме перекос заметнее. Цель К1 («под заказ — не отказ, а вторая дата») держится и на 10%: носителем остаются золотой текст и золотая точка */ background: color-mix(in srgb, var(--color-accent-light) 10%, transparent); } .stock--preorder .stock__dot { background: var(--color-accent-deco); } /* Букет, который собирают под заказ из сегодняшнего наличия. Отдельный статус, а не «под заказ»: срок здесь не при чём, товар делается сегодня. Цвет успеха был бы обманом (наличие мы не считаем), золото «под заказа» тоже: это не отложенная доставка. Нейтральный текст на приглушённой подложке — статус читается как пояснение, а не как светофор. */ .stock--assembled { color: var(--color-text-soft); background: color-mix(in srgb, var(--color-muted) 8%, transparent); } .stock--assembled .stock__dot { background: var(--color-text-soft); } /* ── Значки ─────────────────────────────────────────────────────────────── Зачёркнутых цен, «−50%» и «горящих» плашек в системе нет намеренно: если скидка всегда, это не скидка, а ценник ───────────────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-soft); font-size: var(--fs-xs); letter-spacing: 0.02em; } .badge--accent { background: color-mix(in srgb, var(--color-accent-light) 25%, transparent); color: var(--color-accent); } .tag { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font-size: var(--fs-sm); cursor: pointer; transition: all var(--transition-fast) ease-out; } .tag:hover { border-color: var(--color-accent); color: var(--color-accent); } .tag.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } /* ── Сообщения ─────────────────────────────────────────────────────────── */ .alert { display: flex; gap: 12px; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: var(--fs-sm); margin-bottom: 24px; } .alert--error { border-color: var(--color-error); color: var(--color-error); } .alert--success { border-color: var(--color-success); color: var(--color-success); } .alert--warning { border-color: var(--color-warning); color: var(--color-warning); } /* ── Хлебные крошки ────────────────────────────────────────────────────── */ .breadcrumbs { padding: 20px 0 0; } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--color-muted); } .breadcrumbs__item + .breadcrumbs__item::before { content: '·'; margin-right: 8px; color: var(--color-muted); } .breadcrumbs__item a { color: var(--color-muted); } .breadcrumbs__item a:hover { color: var(--color-accent); } /* О3. Третья крошка на карточке товара — полное название букета: на 390 она занимала 97px в три строки и дословно дублировала

под ней */ @media (max-width: 900px) { .breadcrumbs__list { flex-wrap: nowrap; } .breadcrumbs__item:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ── Пагинация ─────────────────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; } .pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-sm); } .pagination__item:hover { border-color: var(--color-accent); color: var(--color-accent); } .pagination__item.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } /* ── Пустое состояние ──────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 72px 24px; color: var(--color-text-soft); max-width: 480px; margin: 0 auto; } .empty-state__title { margin-bottom: 12px; } .empty-state__text { margin-bottom: 24px; } /* ── Появление секций при скролле ──────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-slow) var(--ease-in), transform var(--transition-slow) var(--ease-in); } .reveal.is-visible { opacity: 1; transform: none; } /* Без JS содержимое обязано быть видимым */ .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Метка «не звонить» в списке заказов. Цвет предупреждения, а не ошибки: это просьба клиента, а не сбой. */ .no-calls-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--color-warning, #A8611B); white-space: nowrap; } .no-calls-mark svg { flex-shrink: 0; } /* ═══ components/forms.css ═══ */ /* ── Формы ──────────────────────────────────────────────────────────────── Поля строго 16px: меньший размер вызывает автозум в iOS Safari и ломает вёрстку чекаута — ключевого экрана конверсии. ───────────────────────────────────────────────────────────────────────── */ /* ⚠ display обязателен, хотя выглядит лишним. Почти везде `.field` — это