/* ═══════════════════════════════════════════════════════════════════════════ /test5 — кандидат страницы «Цех360 вместо Excel» Страница обёрнута в .p-excel, и каждый селектор ниже начинается с него — тот же приём, что на /test4. Причина та же: макет называет свои блоки именами, которые уже заняты дизайн-системой. Совпадений девять, протекающих свойств тридцать одно. ЧТО ВЗЯТО ИЗ product-ui.css, А ЧТО НЕТ. Взято два компонента: .ui-pill (в макете назывался .tag) и .mini-kpi (назывался .metric-box) — у обоих совпадает почти всё, кроме размеров. НЕ взята таблица заказов: у макета четыре колонки, у product-ui шесть, и переиспользование свелось бы к полному переопределению сетки — то есть к лишнему слою без выгоды. Оболочка «экрана Excel» и линейный поток этапов — новые, аналогов нет. Контейнеры остались страничными (.metric-stack, .table-box): компонент отвечает за то, КАК он выглядит, страница — за то, ГДЕ он лежит. ═══════════════════════════════════════════════════════════════════════════ */ /* Токены — в candidate.css на .p-cand (класс на ). Собственного блока у страницы больше нет: он затенял бы общий словарь. Обёртка .p-excel остаётся — она нужна против занятых сайтом имён, а не ради токенов. */ .p-excel .btn{font-family: inherit; font-size: inherit; line-height: inherit; white-space: inherit} .p-excel .cta{overflow: initial; position: initial} .p-excel .faq-wrap{margin: initial; max-width: initial} .p-excel .hero{overflow: initial; position: initial} .p-excel .step{align-items: initial; display: initial; gap: initial} .p-excel .tag{background: initial; border: initial; color: inherit} .p-excel, .p-excel *{box-sizing:border-box} html{scroll-behavior:smooth} .p-excel{margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:#fff;color:var(--c-ink); -webkit-font-smoothing:antialiased} .p-excel a{text-decoration:none;color:inherit} .p-excel img, .p-excel svg{display:block;max-width:100%} .p-excel .h1{margin:18px 0 0;font-size:var(--c-fs-h1);line-height:var(--c-lh-h1);letter-spacing:var(--c-ls-h1);font-weight:600} .p-excel .h2{margin:12px 0 0;font-size:var(--c-fs-h2);line-height:var(--c-lh-h2);letter-spacing:var(--c-ls-h2);font-weight:600} .p-excel .h3{margin:0;font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);font-weight:600} .p-excel .body-lg{font-size:21px;line-height:1.58;color:var(--c-muted)} .p-excel .body{font-size:16px;line-height:1.58;color:var(--c-muted)} .p-excel .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:0 24px;border-radius:var(--c-r-control); border:1px solid var(--c-line);background:#fff;color:var(--c-ink);font-weight:600; transition:.2s ease;cursor:pointer} .p-excel .btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(23,23,23,.08)} .p-excel .btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff} .p-excel .btn.ghost{background:#fff} .p-excel .link{display:inline-flex;align-items:center;gap:8px;color:var(--c-accent);font-weight:600} .p-excel .link svg{width:18px;height:18px} .p-excel .accent{color:var(--c-accent)} .p-excel .hero{padding:74px 0 92px} .p-excel .crumbs{display:flex;align-items:center;gap:10px;color:#9a928b;font-size:14px;margin-bottom:36px} .p-excel .crumbs svg{width:15px;height:15px} .p-excel .hero-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(640px,1.06fr);gap:72px;align-items:start} .p-excel .hero-copy .h1{max-width:770px} .p-excel .hero-copy .body-lg{max-width:680px;margin:28px 0 0} .p-excel .hero-actions{display:flex;gap:12px;margin-top:32px} .p-excel .hero-note{margin-top:32px;display:inline-flex;align-items:center;gap:12px;padding:10px 14px; border-radius:999px;background:var(--c-green-soft);color:var(--c-green);font-size:14px;font-weight:600} .p-excel .hero-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px} .p-excel .hero-card{min-height:104px;border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:18px;background:#fff} .p-excel .hero-card strong{display:block;font-size:16px;line-height:1.25} .p-excel .hero-card span{display:block;margin-top:8px;font-size:12px;line-height:1.45;color:var(--c-muted)} .p-excel .excel-shell{border-radius:var(--c-r-frame);background:linear-gradient(135deg,#ffe3d3 0%, #ffd7bf 32%, #ffaf8a 68%, #ff6d34 100%); padding:26px;box-shadow:0 24px 60px rgba(255,84,20,.14)} .p-excel .excel-ui{background:#fff;border-radius:var(--c-r-panel);overflow:hidden;border:1px solid rgba(55,35,22,.08); box-shadow:0 22px 44px rgba(60,32,14,.10)} .p-excel .excel-top{height:46px;border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:8px;padding:0 16px} .p-excel .dot{width:8px;height:8px;border-radius:50%;background:#d6cec8} .p-excel .excel-title{margin-left:auto;font-size:12px;color:#9a928b} .p-excel .excel-body{padding:20px} .p-excel .excel-head{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center} .p-excel .state-card{border:1px solid var(--c-line);border-radius:16px;padding:18px;background:#fff} .p-excel .state-card.bad{background:#211d1a;color:#fff;border-color:#211d1a} .p-excel .state-card small{display:block;font-size:11px;color:#a39a93} .p-excel .state-card.bad small{color:#bab1aa} .p-excel .state-card h3{margin:6px 0 0;font-size:24px;line-height:1.05;font-weight:600} .p-excel .state-card p{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--c-muted)} .p-excel .state-card.bad p{color:#d0c8c2} .p-excel .arrow-swap{width:64px;height:64px;border-radius:var(--c-r-tile);background:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45); color:var(--c-accent);box-shadow:0 8px 18px rgba(255,84,20,.10)} .p-excel .arrow-swap svg{width:24px;height:24px} .p-excel .flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px} .p-excel .flow-step{border:1px solid var(--c-line);border-radius:var(--c-r-tile);padding:14px;background:var(--c-soft)} .p-excel .flow-step .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--c-line);color:#504b46} .p-excel .flow-step .icon svg{width:20px;height:20px} .p-excel .flow-step strong{display:block;margin-top:14px;font-size:15px;line-height:1.25;overflow-wrap:anywhere} .p-excel .flow-step span{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--c-muted)} .p-excel .flow-step.active{background:#fff8f4;border-color:#ffd3c0} .p-excel .mini-status{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-top:14px} .p-excel .table-box{border:1px solid var(--c-line);border-radius:16px;overflow:hidden} .p-excel .table-head, .p-excel .table-row{display:grid;grid-template-columns:1.2fr .85fr .75fr .55fr;gap:12px;align-items:center;padding:14px 16px} .p-excel .table-head{background:var(--c-soft);font-size:11px;font-weight:600;color:#9a928b;letter-spacing:.04em} .p-excel .table-row{border-top:1px solid var(--c-line);font-size:14px} .p-excel .ui-pill{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap} .p-excel .ui-pill.orange{background:var(--c-accent-soft);color:var(--c-accent)} .p-excel .ui-pill.green{background:var(--c-green-soft);color:var(--c-green)} .p-excel .ui-pill.red{background:var(--c-red-soft);color:var(--c-red)} .p-excel .mini-kpi{border:1px solid var(--c-line);border-radius:16px;padding:16px;background:#fff} .p-excel .mini-kpi .kpi-label{font-size:11px;color:#9a928b} .p-excel .mini-kpi .value{font-size:28px;line-height:1.02;font-weight:600;margin-top:8px} .p-excel .mini-kpi .sub{margin-top:8px;font-size:13px;color:var(--c-muted)} .p-excel .metric-stack{display:grid;gap:12px} .p-excel .problem-head, .p-excel .steps-head, .p-excel .linked-head{display:grid;grid-template-columns:1fr .95fr;gap:64px;align-items:end;margin-bottom:46px} .p-excel .problem-head .body-lg, .p-excel .steps-head .body-lg, .p-excel .linked-head .body-lg{max-width:580px;margin-left:auto} .p-excel .problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .p-excel .problem-card{border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:24px;min-height:250px;background:#fff} .p-excel .problem-icon{width:52px;height:52px;border-radius:var(--c-r-tile);background:var(--c-soft);display:grid;place-items:center;color:#4f4943} .p-excel .problem-icon svg{width:24px;height:24px} .p-excel .problem-card h3{font-size:var(--c-fs-h4);line-height:var(--c-lh-h4);letter-spacing:var(--c-ls-h4);margin:22px 0 0} .p-excel .problem-card p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--c-muted)} .p-excel .compare{background:#171717;border-radius:var(--c-r-panel);color:#fff;padding:56px} .p-excel .compare-head{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:end;margin-bottom:34px} .p-excel .compare .label{color:#ff9e7a} .p-excel .compare .label:before{background:#ff9e7a} .p-excel .compare .h2{color:#fff} .p-excel .compare .body-lg{color:#c7c0bb} .p-excel .compare-grid{border:1px solid #353535;border-radius:var(--c-r-card);overflow:hidden} .p-excel .compare-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:1px solid #353535} .p-excel .compare-row:first-child{border-top:0} .p-excel .compare-cell{padding:20px 22px;font-size:15px;line-height:1.5;color:#d8d2cd} .p-excel .compare-headline{background:#1e1e1e;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8e8782} .p-excel .compare-cell:nth-child(2), .p-excel .compare-headline:nth-child(2){background:#1c1918;border-left:1px solid #353535} .p-excel .compare-cell:nth-child(3), .p-excel .compare-headline:nth-child(3){background:#231d1a;border-left:1px solid #353535} .p-excel .compare-label{color:#fff;font-weight:600} .p-excel .check, .p-excel .cross{display:inline-flex;align-items:flex-start;gap:8px} .p-excel .check svg{color:#ff7b4e} .p-excel .cross svg{color:#817972} .p-excel .check svg, .p-excel .cross svg{width:18px;height:18px;flex:none;margin-top:2px} .p-excel .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .p-excel .step{border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:24px;min-height:256px;background:#fff} .p-excel .step .n{font-size:12px;color:var(--c-accent);font-weight:600;letter-spacing:.13em} .p-excel .step h3{font-size:var(--c-fs-h4);line-height:var(--c-lh-h4);letter-spacing:var(--c-ls-h4);margin:20px 0 0} .p-excel .step p{margin:10px 0 0;color:var(--c-muted);font-size:16px} .p-excel .step .mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--c-line);font-size:13px;color:#9a928b} .p-excel .linked-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .p-excel .linked-card{border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:24px;min-height:282px;background:#fff;display:flex;flex-direction:column} .p-excel .linked-card .num{font-size:12px;color:var(--c-accent);font-weight:600;letter-spacing:.14em} .p-excel .linked-card h3{font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);margin:18px 0 0} .p-excel .linked-card p{margin:10px 0 0;font-size:16px;color:var(--c-muted)} .p-excel .linked-card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px} .p-excel .linked-card li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#36312d} .p-excel .linked-card li i{width:8px;height:8px;border-radius:50%;background:var(--c-green);margin-top:8px;flex:none} .p-excel .linked-card .link{margin-top:auto;padding-top:20px} .p-excel .faq-wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:84px;align-items:start} .p-excel .faq-left .body-lg{margin-top:18px;max-width:500px} .p-excel .contact-card{margin-top:28px;background:var(--c-soft);border:1px solid var(--c-line);border-radius:var(--c-r-panel);padding:28px} .p-excel .contact-card h3{font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);margin:0} .p-excel .contact-card p{font-size:18px;line-height:1.58;color:var(--c-muted);margin:12px 0 0} .p-excel .contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .p-excel .faq-list{border-top:1px solid var(--c-line)} .p-excel details{border-bottom:1px solid var(--c-line)} .p-excel summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:21px;font-weight:600} .p-excel summary::-webkit-details-marker{display:none} .p-excel summary:after{content:"+";font-size:26px;font-weight:400;color:#9a928b;transition:.2s} .p-excel details[open] summary:after{transform:rotate(45deg)} .p-excel details p{margin:-6px 0 24px;max-width:760px;color:var(--c-muted);font-size:16px;line-height:1.6} .p-excel .cta{width:min(var(--c-container), calc(100% - 48px));margin:0 auto; padding:62px;border-radius:var(--c-r-frame);background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));color:#fff;text-align:center} .p-excel .cta .h2{color:#fff;max-width:920px;margin:0 auto} .p-excel .cta p{max-width:760px;margin:20px auto 0;color:#ffe0d3;font-size:21px} .p-excel .cta-actions{display:flex;justify-content:center;gap:12px;margin-top:28px} .p-excel .cta .btn.primary{background:#fff;color:var(--c-ink);border-color:#fff} .p-excel .cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)} @media (max-width:1180px){ .p-excel .hero-grid{grid-template-columns:1fr;gap:42px} .p-excel .problem-grid{grid-template-columns:repeat(2,1fr)} .p-excel .steps{grid-template-columns:repeat(2,1fr)} .p-excel .linked-grid{grid-template-columns:1fr} .p-excel .faq-wrap{grid-template-columns:1fr;gap:42px} .p-excel .compare-head, .p-excel .problem-head, .p-excel .steps-head, .p-excel .linked-head{grid-template-columns:1fr;gap:22px} .p-excel .problem-head .body-lg, .p-excel .steps-head .body-lg, .p-excel .linked-head .body-lg{margin-left:0} } @media (max-width:900px){ .p-excel .body-lg{font-size:18px} .p-excel .hero{padding:44px 0 70px} .p-excel .hero-actions{flex-direction:column;align-items:stretch} .p-excel .hero-actions .btn{width:100%} .p-excel .hero-cards{grid-template-columns:1fr 1fr} .p-excel .excel-shell{padding:14px;border-radius:var(--c-r-frame)} .p-excel .excel-body{padding:14px} .p-excel .excel-head{grid-template-columns:1fr;gap:12px} .p-excel .arrow-swap{width:56px;height:56px;justify-self:center} .p-excel .flow-grid{grid-template-columns:1fr 1fr} .p-excel .mini-status{grid-template-columns:1fr} .p-excel .problem-grid, .p-excel .linked-grid, .p-excel .steps{grid-template-columns:1fr} .p-excel .compare{padding:30px;border-radius:var(--c-r-panel)} .p-excel .compare-grid{overflow:auto} .p-excel .compare-row{min-width:760px} .p-excel .cta{width:calc(100% - 28px);padding:42px 22px} .p-excel .cta p{font-size:18px} .p-excel .cta-actions{flex-direction:column} } @media (max-width:480px){ .p-excel .hero-cards{grid-template-columns:1fr} .p-excel .flow-grid{grid-template-columns:1fr} .p-excel .table-head, .p-excel .table-row{grid-template-columns:1fr .9fr .8fr .55fr;padding:12px} } .p-excel .ui-label--state{font-size: 24px; line-height: 1.05; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em} .p-excel .flow-grid{gap: 8px} .p-excel .flow-grid > *{min-width: 0} .p-excel .flow-step span{overflow-wrap: anywhere} @media (max-width:640px){ .p-excel .crumbs a, .p-excel .link{display: inline-flex; align-items: center; min-height: 44px} } .p-excel .hero-cards > *{min-width: 0} .p-excel .hero-card strong, .p-excel .hero-card span{overflow-wrap: anywhere} @media (max-width:480px){ .p-excel .table-head{display: none} .p-excel .table-row{grid-template-columns: 1fr auto; gap: 4px 8px} .p-excel .table-row > *{min-width: 0} .p-excel .table-row > *:nth-child(1){grid-column: 1 / -1} .p-excel .table-row > *:nth-child(2){grid-column: 1} .p-excel .table-row > *:nth-child(3){grid-column: 2; justify-self: end} .p-excel .table-row > *:nth-child(4){grid-column: 1 / -1} } @media (max-width:640px){ .p-excel .faq-list summary{min-width: 0; position: relative; padding-right: 30px} .p-excel .faq-list summary:after{position: absolute; right: 0; top: 24px} .p-excel .faq-list summary > *{min-width: 0; overflow-wrap: anywhere} } /* ── Честный блок (/crm-dlya-proizvodstva) ──────────────────────────────── Тот же рисунок, что .honest/.honest-row на отраслевых страницах (industry-page.css, класс .p-ind) — но там правила висят на .p-ind, сюда не долетают. Переносить .p-ind целиком ради одного блока нельзя (там 30+ протекающих свойств, ту же ловушку уже разбирали на /vozmozhnosti и /pozakaznoe-proizvodstvo) — повторяю только сам компонент, под .p-excel, тем же именем классов, чтобы не плодить третье название одного и того же узора. */ .p-excel .honest{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:56px;align-items:center} .p-excel .honest > *{min-width:0} .p-excel .honest-copy p{color:var(--c-muted);font-size:16px;line-height:1.62;margin:18px 0 0} .p-excel .honest-table{border:1px solid var(--c-line);border-radius:17px;overflow:hidden;background:#fff} .p-excel .honest-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;padding:15px 17px;border-bottom:1px solid var(--c-line);align-items:start} .p-excel .honest-row:last-child{border-bottom:0} .p-excel .honest-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none} .p-excel .honest-icon.yes{background:var(--c-green-soft);color:var(--c-green)} .p-excel .honest-icon.no{background:var(--c-red-soft);color:var(--c-red)} .p-excel .honest-row b{display:block;font-size:15px;line-height:1.3} .p-excel .honest-row > div > span{display:block;color:var(--c-muted);font-size:13px;line-height:1.5;margin-top:3px} @media (max-width:900px){ .p-excel .honest{grid-template-columns:1fr;gap:32px} } @media (max-width:480px){ .p-excel .honest-row{padding:13px} .p-excel .honest-row b, .p-excel .honest-row > div > span{overflow-wrap:anywhere} }