deck: port approved 'The problem' composition — four challenges + outputs rail from Marts + ThothII right with drawn arrow + AI circuit-brain medallions (.brain-ai, no clash with slide-3 .brain)

This commit is contained in:
Codex
2026-09-07 20:42:05 +02:00
parent 197c165a0a
commit da60b6af36
3 changed files with 110 additions and 12 deletions
+37
View File
@@ -94,6 +94,43 @@
.arit .code .en::before { content: 'EN'; display: inline-block; margin-right: 8px; padding: 2px 6px;
border-radius: 3px; background: var(--bordeaux); color: #fdfcfc;
font: 700 8.5px/1 var(--sans); letter-spacing: .1em; }
/* ---------- slide "The problem": challenges + outputs rail + ThothII right ---------- */
.arit.problem .sbody { padding-top: 20px; padding-bottom: 14px; }
.arit.problem .kicker { margin-bottom: 10px; }
.arit.problem .quote { margin: 0 0 10px; padding: 12px 22px 10px 64px; font-size: 16.5px; }
.arit.problem .tr-grid .en { font-size: 16.5px; }
.arit.problem .stage { padding: 11px 10px; }
.arit.problem .stage b { font-size: 13px; text-transform: uppercase; }
.arit.problem .stage span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.arit.problem .stage.hot { background: #fdf1f2; border-color: var(--bordeaux); }
.arit .brain-ai { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 9999px; background: #fff; border: 1.5px solid var(--bordeaux); }
.arit .brain-ai svg { width: 24px; height: 24px; color: var(--bordeaux); }
.arit.problem .stage .brain-ai { margin-top: 3px; }
.arit.problem .midrow { display: flex; gap: 28px; margin-top: 8px; align-items: flex-start; }
.arit.problem .concepts { flex: 1; min-width: 0; }
.arit .concepts .lbl, .arit .rail .lbl { display: block; font: 700 10px/1 var(--mono); letter-spacing: .14em;
text-transform: uppercase; color: var(--bordeaux); margin: 0 0 5px; }
.arit .citem { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); }
.arit .citem:last-child { border-bottom: none; }
.arit .citem .n { font: 700 11px/1 var(--mono); color: var(--bordeaux); }
.arit .citem b { font: 700 12.5px/1.3 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.arit .citem span.d { font: 400 11px/1.4 var(--sans); color: var(--ink-muted); margin-left: 8px; }
.arit .railwrap { position: relative; display: flex; justify-content: flex-end; }
.arit .conn-drop, .arit .t-conn { position: absolute; width: 2px; background: var(--bordeaux); }
.arit .conn-elbow { position: absolute; height: 2px; background: var(--bordeaux); }
.arit .t-head { position: absolute; width: 0; height: 0; border: 5px solid transparent;
border-bottom: 7px solid var(--bordeaux); transform: translateX(-50%); }
.arit .rail { width: 520px; border-left: 2px solid var(--bordeaux); padding-top: 12px; }
.arit .rail .row { display: flex; align-items: center; gap: 12px; padding: 5px 14px 5px 16px; position: relative; }
.arit .rail .row::before { content: ''; position: absolute; left: -2px; top: 50%; width: 14px; height: 2px; background: var(--bordeaux); }
.arit .rail .row .oicon { flex: 0 0 26px; width: 26px; height: 26px; color: var(--bordeaux); display: block; }
.arit .rail .row b { font: 700 13px/1.2 var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.arit .rail .row span.d { font: 400 11px/1.3 var(--sans); color: var(--ink-muted); }
.arit.problem .thoth-wrap { position: relative; justify-content: flex-end; margin-top: 10px; }
.arit.problem .thoth-box { padding: 8px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.arit.problem .thoth-box .brain-ai { margin-right: 9px; vertical-align: middle; }
.arit .quote small { display: block; margin-top: 6px; font: 600 11px/1.4 var(--sans); font-style: normal;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }