neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Problems: larger icons 80x80, horizontal row layout (icon left + text right)

Browse Source
This commit is contained in:
neo committed 2026-06-25 18:35:01 +05:00
1 parent c437874473
commit cf6ba73334
1 file changed
+41 -26
Download Patch File Download Diff File Expand all files Collapse all files
index_ibm.html
+41 -26
View File
@@ -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); }
<div class="problem-card reveal reveal-delay-1">
<div class="problem-icon">
<!-- IBM Carbon icon — disconnect -->
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<circle cx="4" cy="8" r="2"/><circle cx="12" cy="8" r="2"/>
<path d="M6 7l2-2M10 9l2-2"/>
</svg>
</div>
<div class="problem-num">01</div>
<h3>Данные разбросаны</h3>
<p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
<div class="problem-body">
<div class="problem-num">01</div>
<h3>Данные разбросаны</h3>
<p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
</div>
</div>
<div class="problem-card reveal reveal-delay-2">
<div class="problem-icon">
<!-- IBM Carbon icon — eye off -->
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
<circle cx="8" cy="8" r="2"/><path d="M2 2l12 12"/>
</svg>
</div>
<div class="problem-num">02</div>
<h3>Не видно, где теряете</h3>
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
<div class="problem-body">
<div class="problem-num">02</div>
<h3>Не видно, где теряете</h3>
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
</div>
</div>
<div class="problem-card reveal reveal-delay-3">
<div class="problem-icon">
<!-- IBM Carbon icon — clock -->
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<circle cx="8" cy="8" r="6"/>
<path d="M8 4v4l3 2"/>
</svg>
</div>
<div class="problem-num">03</div>
<h3>Отчёты приходят поздно</h3>
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.</p>
<div class="problem-body">
<div class="problem-num">03</div>
<h3>Отчёты приходят поздно</h3>
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.</p>
</div>
</div>
</div>
</div>