/* ETAP_SP_WELCOME_SSR_v1 (сессия 184, 2026-09-11) — welcome-оверлей /plan в разметке. Повод: разбор обрыва воронки 11.09 (ОБРЫВ_ВОРОНКИ_конструктор_2026-09-11.md). arm() в smart_plan_welcome.js ждал window.SP_canvas (до 10 с) + ещё 900 мс, а первый заход на /plan — 45 запросов / 2,9 МБ. Медиана времени мобильного рекламного визита на /plan — 9 секунд: человек уходил раньше, чем появлялось то, ради чего он пришёл. welcome_show = 2 при plan_opened = 10. Решение: оверлей лежит в smart_plan.html и виден на ПЕРВОЙ отрисовке. Гейты (sp_welcome_done / sp_pending / sp_autodraft / ?template= / ?edit=) читает синхронно smart_plan_welcome_boot.js в и ставит .sp-welcome-off на ДО парсинга body — мигания у возвращающихся нет. Порог по ширине снят: на ПК и планшете welcome раньше не существовал вовсе (max-width:767px), а это 5 из 10 визитов, открывших /plan. CSP: style-src-attr захэширован — никаких style="" в разметке, только классы. */ #sp-welcome { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(244, 244, 245, .97); overflow: auto; opacity: 1; transition: opacity .25s ease; } html.sp-welcome-off #sp-welcome { display: none; } #sp-welcome.sp-w-hiding { opacity: 0; } #sp-welcome .sp-w-card { background: #fff; border-radius: 20px; padding: 20px 18px 12px; width: 100%; max-width: 380px; margin: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .14); border: 1px solid #f4f4f5; } #sp-welcome .sp-w-badge { font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #86bd0a; margin-bottom: 8px; } #sp-welcome .sp-w-h { font-weight: 900; font-size: 19px; color: #18181b; margin: 0 0 6px; line-height: 1.2; } #sp-welcome .sp-w-p { font-size: 12px; font-weight: 600; color: #71717a; line-height: 1.45; margin: 0; } #sp-welcome .sp-w-steps { display: flex; gap: 6px; margin: 10px 0 2px; } #sp-welcome .sp-w-step { flex: 1 1 0; min-width: 0; background: #f7ffe0; border: 1px solid #deff8f; border-radius: 10px; padding: 7px 6px; text-align: center; } #sp-welcome .sp-w-step-n { font-weight: 900; font-size: 12px; color: #5a8309; line-height: 1; } #sp-welcome .sp-w-step-l { font-weight: 700; font-size: 10px; color: #2d4307; margin-top: 3px; line-height: 1.2; } #sp-welcome .sp-w-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 10px; border-radius: 14px; cursor: pointer; border: 1px solid #e4e4e7; background: #fafafa; } #sp-welcome .sp-w-btn.sp-w-accent { padding: 15px 14px; border: 1px solid #a6e60f; background: linear-gradient(90deg, #b8fa19, #a6e60f); box-shadow: 0 6px 18px rgba(166, 230, 15, .35); } #sp-welcome .sp-w-ic { font-size: 22px; line-height: 1; flex-shrink: 0; } #sp-welcome .sp-w-accent .sp-w-ic { font-size: 26px; } #sp-welcome .sp-w-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #sp-welcome .sp-w-t { font-weight: 900; font-size: 13px; color: #18181b; letter-spacing: .02em; } #sp-welcome .sp-w-accent .sp-w-t { font-size: 14px; color: #000; } #sp-welcome .sp-w-s { font-weight: 600; font-size: 11px; color: #71717a; line-height: 1.35; } #sp-welcome .sp-w-accent .sp-w-s { color: rgba(0, 0, 0, .65); } #sp-welcome .sp-w-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; } #sp-welcome .sp-w-link { padding: 10px 4px; background: transparent; border: none; cursor: pointer; font-size: 11px; font-weight: 700; color: #a1a1aa; text-decoration: underline; } #sp-welcome .sp-w-busy { opacity: .7; pointer-events: none; } /* ETAP_SP_CANVAS_SKELETON_v1 — вместо пустого белого листа на время инициализации. Визит 14 (10.09): «Бездействие 5 сек» на голом белом холсте и уход. */ #sp-canvas-skeleton { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; background: #fff; } html.sp-skeleton-off #sp-canvas-skeleton { display: none; } #sp-canvas-skeleton .sp-sk-bars { display: flex; flex-direction: column; gap: 10px; width: min(70%, 320px); } #sp-canvas-skeleton .sp-sk-bar { height: 14px; border-radius: 8px; background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 37%, #f4f4f5 63%); background-size: 400% 100%; animation: sp-sk-shimmer 1.4s ease-in-out infinite; } #sp-canvas-skeleton .sp-sk-bar:nth-child(2) { width: 82%; } #sp-canvas-skeleton .sp-sk-bar:nth-child(3) { width: 64%; } #sp-canvas-skeleton .sp-sk-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa; } @keyframes sp-sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { #sp-canvas-skeleton .sp-sk-bar { animation: none; } } /* ETAP_SP_WELCOME_SSR_v1 — мелочи из разбора 11.09: заголовок «Готовые планировки» был жёлтым по белому (почти нечитаем); «Доп. Опции» наполовину уезжала под нижнюю навигацию на телефонах с жестами. */ #sp-templates-modal .ip-58801d59 { color: #18181b; } #sp-templates-modal .ip-0b31e898 { color: #52525b; } @media (max-width: 767px) { .smart-plan-v2 #btn-floating-extra { bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; } }