diff --git a/index_ibm.html b/index_ibm.html index f074747..c3f0652 100644 --- a/index_ibm.html +++ b/index_ibm.html @@ -396,39 +396,48 @@ h1 .accent { color: var(--accent); } } /* ============================================================ - PROBLEMS — 3-column grid + PROBLEMS — horizontal row layout (icon left, text right) ============================================================ */ .problem-card { padding: 40px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; transition: all 0.4s var(--ease-out); + display: flex; gap: 32px; align-items: flex-start; } .problem-card:nth-child(3n) { border-right: none; } .problem-card:nth-last-child(-n+3) { border-bottom: none; } .problem-card:hover { background: var(--accent-dim); } +.problem-icon { + flex-shrink: 0; width: 80px; height: 80px; + border: 1px solid rgba(239,68,68,0.2); + border-radius: 12px; display: flex; align-items: center; + justify-content: center; margin: 0; + color: var(--red); opacity: 0.8; + transition: all 0.4s var(--ease-out); + background: var(--red-dim); +} +.problem-card:hover .problem-icon { + opacity: 1; transform: scale(1.08); + box-shadow: 0 0 0 4px var(--red-dim); +} +.problem-icon svg { width: 36px; height: 36px; stroke-width: 1.2; } +.problem-body { + display: flex; flex-direction: column; gap: 12px; +} .problem-num { font-size: 0.6875rem; color: var(--text-dim); - font-family: var(--mono); margin-bottom: 20px; - letter-spacing: 0.05em; + font-family: var(--mono); letter-spacing: 0.05em; } .problem-card h3 { - font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; + font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } .problem-card p { - font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; + font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6; + max-width: 400px; } -/* IBM Carbon icon — warning triangle */ -.problem-icon { - width: 40px; height: 40px; border: 1px solid var(--red-dim); - border-radius: 8px; display: flex; align-items: center; - justify-content: center; margin-bottom: 20px; - color: var(--red); opacity: 0.7; - transition: all 0.3s var(--ease-out); -} -.problem-card:hover .problem-icon { opacity: 1; transform: scale(1.05); } /* ============================================================ SOLUTION @@ -869,38 +878,44 @@ h1 .accent { color: var(--accent); }
Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.
+Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.
+Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.
+Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.
+В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.
+В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.
+