/** * FM embed — чек-лист (v1, промежуточный эталон 2026-06-22) * * Один файл на все checklist-статьи. Правки здесь → build_article.py → export/{slug}/. * Классы на (ставит embed_script при ?embed=fm): * tk-embed-fm — общее * tk-embed-sheet — preview.html (bottom sheet) * tk-embed-full — index.html (WebView «Интерактивная инструкция») * * Снимок параметров v1: * список thumb 40×40, guide thumb 80px ширина / высота до счётчика, * без «Кол-во» в guide, счётчик слева, прогресс +52px снизу под кнопку FM. */ /* --- База embed --- */ html.tk-embed-fm { height: auto; overflow: visible; -webkit-text-size-adjust: 100%; } html.tk-embed-fm.tk-embed-scroll { height: 100%; overflow: hidden; } body.tk-embed-fm { min-height: 0 !important; height: auto !important; max-width: none; width: 100%; margin: 0; background: #fff; } /* FM WebView: PNG fallback, некоторые WebView ломают +webp */ html.tk-png-only picture source[type="image/webp"] { display: none !important; } .tk-embed-fm .tk-variant-tag, .tk-embed-fm .tk-compare-link, .tk-embed-fm .tk-footer, .tk-embed-fm .tk-sticky-cta { display: none !important; } /* --- Bottom sheet: preview.html?embed=fm --- */ body.tk-embed-sheet { min-height: 360px !important; height: auto !important; overflow-x: hidden; overflow-y: visible; } body.tk-embed-sheet.tk-embed-scroll { height: 100%; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; } body.tk-embed-sheet.tk-guide-open { height: auto; overflow: hidden; } .tk-embed-sheet .tk-fm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 10px 8px; } .tk-embed-sheet .tk-fm-bar__head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .tk-embed-sheet .tk-article-id { font-size: 10px; flex-shrink: 0; } .tk-embed-sheet .tk-fm-bar__title { font-size: 18px; font-weight: 700; color: var(--tk-text); line-height: 1.25; margin: 0; } .tk-embed-sheet .tk-fm-bar__qr { flex-shrink: 0; } .tk-embed-sheet .tk-header { display: none !important; } .tk-embed-sheet .tk-checklist__head { display: none !important; } .tk-embed-sheet .tk-app { min-height: 0 !important; height: auto !important; display: block; padding: 4px 8px 0; overflow: visible; } .tk-embed-sheet .tk-checklist { margin-bottom: 0; } .tk-embed-sheet .tk-main { border: none; border-radius: 0; box-shadow: none; margin: 0; background: transparent; overflow: visible; } .tk-embed-sheet .tk-checklist__summary { padding: 8px 10px; font-size: 14px; background: #f7f8fa; } .tk-embed-sheet .tk-checklist__note { padding: 0 10px 6px; font-size: 13px; } .tk-embed-sheet .tk-checklist__items { padding: 2px 4px 6px; } .tk-embed-sheet .tk-item-card { margin-bottom: 4px; padding-bottom: 4px; } .tk-embed-sheet .tk-item-card__row { min-height: 52px; } .tk-embed-sheet .tk-item-card__thumb { width: 40px; height: 40px; margin-top: 4px; border-radius: 8px; } .tk-embed-sheet .tk-item-card__thumb-empty { width: 18px; height: 18px; } .tk-embed-sheet .tk-item-card__check { width: 40px; padding-top: 12px; } .tk-embed-sheet .tk-check__mark { width: 22px; height: 22px; } .tk-embed-sheet .tk-check__label { font-size: 16px; } .tk-embed-sheet .tk-check__hint { font-size: 14px; } .tk-embed-sheet .tk-color-tag { font-size: 10px; padding: 2px 6px; } .tk-embed-sheet .tk-qty { padding: 2px 6px 4px 40px; gap: 8px; align-items: center; } .tk-embed-sheet .tk-qty__label { display: none; } .tk-embed-sheet .tk-qty__control { border-radius: 8px; } .tk-embed-sheet .tk-qty__btn { width: 44px; min-height: 44px; font-size: 22px; } .tk-embed-sheet .tk-qty__input { width: 52px; min-height: 44px; font-size: 18px; font-weight: 700; } .tk-embed-sheet .tk-qty__unit, .tk-embed-sheet .tk-item-card .tk-qty__expected { font-size: 14px; font-weight: 600; } .tk-embed-sheet .tk-progress-wrap { padding: 8px 10px 52px; margin-bottom: 0; background: transparent; border-top: 1px solid var(--tk-border); } .tk-embed-sheet .tk-progress { font-size: 13px; } .tk-embed-sheet .tk-progress__reset { margin-top: 6px; margin-bottom: 0; font-size: 13px; padding: 6px 12px; min-height: 36px; } .tk-embed-sheet .tk-scan-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; } /* Guide в bottom sheet */ .tk-embed-sheet .tk-guide-layer { max-width: 100%; width: 100%; background: #fff; box-sizing: border-box; } body.tk-embed-sheet.tk-guide-open .tk-guide-layer:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 200; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 8px; box-sizing: border-box; } .tk-embed-sheet .tk-guide-screen { min-height: 0; max-width: 100%; padding: 0 2px 0; box-sizing: border-box; } .tk-embed-sheet .tk-guide-hero { gap: 8px; max-width: 100%; align-items: stretch; } .tk-embed-sheet .tk-guide-hero__main { flex: 1; min-width: 0; } .tk-embed-sheet .tk-guide-hero__thumb { width: 80px; align-self: stretch; min-height: 72px; border-radius: 10px; flex-shrink: 0; } .tk-embed-sheet .tk-guide-hero__thumb .tk-item-card__thumb-img, .tk-embed-sheet .tk-guide-hero__thumb .tk-item-card__thumb-swatch { width: 100%; height: 100%; } .tk-embed-sheet .tk-guide-hero__thumb .tk-item-card__thumb-empty { width: 24px; height: 24px; } .tk-embed-sheet .tk-guide-body { padding-bottom: 0; max-width: 100%; } .tk-embed-sheet .tk-guide-header { padding: 6px 0 6px; margin-bottom: 8px; } .tk-embed-sheet .tk-guide-hero__title { font-size: 1.1rem; } .tk-embed-sheet .tk-guide-lead, .tk-embed-sheet .tk-guide-list li { font-size: 16px; } .tk-embed-sheet .tk-qty--guide { padding: 0; margin: 0; align-self: flex-start; } .tk-embed-sheet .tk-qty--guide .tk-qty__btn { width: 44px; min-height: 44px; font-size: 22px; } .tk-embed-sheet .tk-qty--guide .tk-qty__input { width: 52px; min-height: 36px; font-size: 19px; font-weight: 700; } .tk-embed-sheet .tk-qty--guide .tk-qty__field .tk-qty__expected { font-size: 12px; } /* Operation: preview slider (lead + CTA) */ .tk-embed-sheet .tk-op-slider { padding: 0 2px; } .tk-embed-sheet .tk-op-slider__lead { margin: 0 0 10px; padding: 0 8px; font-size: 16px; line-height: 1.4; } .tk-embed-sheet .tk-op-slider__cta { padding: 0 8px 52px; display: block; } .tk-embed-sheet .tk-op-slider__link { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; } .tk-embed-sheet .tk-slider-lead { padding: 0 10px 8px; font-size: 16px; } .tk-embed-sheet .tk-preview-infographic { margin-bottom: 8px; padding: 4px; } /* Operation accordion in preview bottom sheet */ .tk-embed-sheet .tk-step-acc-wrap { padding: 2px 6px 8px; margin-bottom: 0; } .tk-embed-sheet .tk-step-acc__progress { font-size: 12px; padding: 2px 4px 4px; } .tk-embed-sheet .tk-step-acc__summary { min-height: 48px; padding: 8px 2px 8px 0; } .tk-embed-sheet .tk-step-acc__title { font-size: 15px; } .tk-embed-sheet .tk-step-acc__hint { font-size: 13px; } .tk-embed-sheet .tk-direction, .tk-embed-full .tk-direction { background: #e8f0fa; color: var(--tk-navy); font-weight: 700; padding: 0 0.2em; border-radius: 3px; } .tk-embed-sheet .tk-step-acc__body { padding: 0 4px 10px 36px; } .tk-embed-sheet .tk-step-acc__figure img { max-height: 160px; } /* Safety TB in bottom sheet */ .tk-embed-sheet .tk-main .tk-rules .tk-card--rules { border-left: 3px solid var(--tk-danger); } /* Operation: full article accordion in WebView */ .tk-embed-full .tk-step-acc-wrap { padding: 4px 8px 8px; margin-bottom: 8px; } .tk-embed-full .tk-step-acc__summary { min-height: 48px; padding: 8px 2px 8px 0; } .tk-embed-full .tk-step-acc__title { font-size: 16px; } .tk-embed-full .tk-step-acc__hint { font-size: 14px; } .tk-embed-full .tk-step-acc__body { padding: 0 4px 10px 36px; } .tk-embed-full .tk-step-acc__figure img { max-height: 200px; } .tk-embed-full .tk-rules, .tk-embed-full .tk-forbidden { margin-bottom: 8px; } /* --- Prep slider (TK-0002, TK-0003, TK-0011) --- */ .tk-embed-sheet .tk-essentials { padding: 0 8px 4px; margin-bottom: 0; } .tk-embed-sheet .tk-essentials__item { padding: 5px 0; font-size: 15px; line-height: 1.35; } .tk-embed-sheet .tk-essentials__mark { width: 20px; height: 20px; font-size: 12px; } .tk-embed-sheet .tk-preview-gallery { margin: 0 0 6px; padding: 0 4px; } .tk-embed-sheet .tk-preview-gallery__slide { scroll-snap-align: center; } .tk-embed-sheet .tk-preview-gallery__label { font-size: 14px; } .tk-embed-sheet .tk-forbidden { padding: 0 8px 52px; margin-bottom: 0; } .tk-embed-sheet .tk-forbidden .tk-card { margin-bottom: 0; } .tk-embed-sheet .tk-forbidden__title { font-size: 15px; } .tk-embed-sheet .tk-forbidden__list li { font-size: 14px; line-height: 1.35; } body.tk-gallery-single .tk-preview-gallery__dots { display: none !important; } /* --- Полная статья: index.html?embed=fm --- */ body.tk-embed-full { min-height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tk-embed-full .tk-header { display: block; } .tk-embed-full .tk-checklist__head { display: flex !important; } .tk-embed-full .tk-app { min-height: 0; height: auto; padding: var(--tk-pad-x); padding-bottom: var(--tk-pad-bottom-safe); }