Codex
0ad8577621
- scattered island map replaces the syscard grid: four systems with emblem icons, names and scopes, clickable (problem popups) - central 'Missing Pieces' column: four dashed rects with '?' marks, clickable (popups explaining each gap with 'The gap' box) - title 'four missing pieces' to match the four destinations - deck.css: scatter/isle/todo/missing-title styles
274 lines
18 KiB
CSS
274 lines
18 KiB
CSS
/* AritmoLab deck theme — consolidated light layout (variant 1) */
|
|
:root {
|
|
--bordeaux: #cb333b; --bordeaux-hover: #b7252d; --bordeaux-deep: #8f1204;
|
|
--bordeaux-tint: #f4dfe1;
|
|
--surface: #fdfcfc; --surface-alt: #f6f5f5; --surface-sunken: #ecebeb;
|
|
--ink: #2a2426; --ink-muted: #6b6568;
|
|
--line: #e3e0e1; --line-strong: #c9c5c6;
|
|
--sans: 'Source Sans 3', system-ui, sans-serif;
|
|
--display: 'Source Serif 4', Georgia, serif;
|
|
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.reveal { font-family: var(--sans); }
|
|
.reveal .slides { text-align: left; }
|
|
.reveal .slides section.arit {
|
|
width: 100%; height: 100%; box-sizing: border-box;
|
|
display: flex; flex-direction: column;
|
|
background: var(--surface); color: var(--ink);
|
|
text-align: left; padding: 0; font-family: var(--sans); font-size: 16px;
|
|
}
|
|
.reveal .arit *, .reveal .arit *::before, .reveal .arit *::after { box-sizing: border-box; }
|
|
|
|
/* ---------- chrome ---------- */
|
|
.arit .head {
|
|
flex: 0 0 104px; height: 104px; display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line);
|
|
}
|
|
.arit .head img { height: 80px; display: block; }
|
|
.arit .head-org { font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
|
|
.arit .band {
|
|
height: 46px; display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 40px; background: var(--bordeaux); color: var(--surface); flex: 0 0 46px;
|
|
}
|
|
.arit .band-section { font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
|
|
.arit .band select.jump {
|
|
background: transparent; color: #fff; border: none;
|
|
padding: 6px 12px; font: 700 11.5px/1.2 var(--sans);
|
|
letter-spacing: .04em; cursor: pointer;
|
|
}
|
|
.arit .band select.jump option { color: var(--ink); background: #fff; }
|
|
.arit .foot {
|
|
flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
|
padding: 0 40px; border-top: 1px solid var(--line);
|
|
font: 600 10px/1.4 var(--sans); letter-spacing: .03em; color: var(--ink-muted);
|
|
}
|
|
.arit .foot span { white-space: nowrap; flex-shrink: 0; }
|
|
.arit .foot span:first-child { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
|
|
.arit .foot span:first-child { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
|
|
.arit .sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 30px 48px 22px; text-align: left; }
|
|
.arit .title-slide .sbody { justify-content: center; }
|
|
|
|
/* ---------- typography ---------- */
|
|
.arit .kicker { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 14px; }
|
|
.arit h1 { font: 700 46px/1.15 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 0; }
|
|
.arit h2 { font: 700 30px/1.15 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
|
|
.arit .lead { font: 400 16px/1.5 var(--sans); color: var(--ink-muted); margin: 8px 0 0; }
|
|
.arit .hgap { height: 16px; flex: 0 0 16px; }
|
|
|
|
/* title slide */
|
|
.arit .title-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
|
|
.arit .title-meta .pill {
|
|
display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
|
|
border-radius: 9999px; background: var(--bordeaux); color: #fdfcfc;
|
|
font: 700 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
|
|
}
|
|
.arit .title-meta .what { font: 400 14.5px/1.5 var(--sans); color: var(--ink-muted); }
|
|
.arit .speakers { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
|
|
.arit .speakers span { font: 600 15.5px/1.4 var(--sans); color: var(--ink); }
|
|
.arit .event { margin: 16px 0 0; font: italic 400 15px/1.5 var(--display); color: var(--ink-muted); }
|
|
.arit .event-where { margin: 8px 0 0; font: 600 14px/1.4 var(--sans); color: var(--ink-muted); }
|
|
|
|
/* quote */
|
|
.arit .quote {
|
|
margin: 14px 0 20px; padding: 16px 22px; border-left: 3px solid var(--bordeaux);
|
|
background: var(--surface-alt); border-radius: 0 8px 8px 0;
|
|
font: italic 400 16px/1.5 var(--display); color: var(--ink);
|
|
}
|
|
.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); }
|
|
|
|
/* mini pipeline (problem / thoth slides) */
|
|
.arit .pipeline { display: flex; align-items: stretch; gap: 10px; }
|
|
.arit .stage { flex: 1; padding: 12px 10px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
|
|
.arit .stage b { display: block; font: 700 13.5px/1.2 var(--sans); margin-bottom: 4px; }
|
|
.arit .stage span { display: block; font: 400 11px/1.35 var(--sans); color: var(--ink-muted); }
|
|
.arit .stage .tag { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 9999px;
|
|
background: var(--bordeaux); color: #fdfcfc; font: 700 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
|
|
.arit .stage.ai { background: var(--bordeaux-tint); border-color: var(--bordeaux); }
|
|
.arit .arrow { align-self: center; color: var(--line-strong); font: 700 18px/1 var(--sans); }
|
|
.arit .thoth-wrap { display: flex; justify-content: flex-end; margin-top: 14px; }
|
|
.arit .thoth-col { width: 470px; text-align: center; }
|
|
.arit .thoth-arrow { color: var(--line-strong); font: 700 16px/1 var(--sans); margin: 2px 0; }
|
|
.arit .thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 10px 14px;
|
|
background: var(--surface-alt); font: 600 12.5px/1.4 var(--sans); }
|
|
.arit .thoth-box .tag { margin-right: 8px; }
|
|
|
|
/* points */
|
|
.arit .points { list-style: none; margin: 0; padding: 0; }
|
|
.arit .points li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line);
|
|
font: 400 15px/1.45 var(--sans); color: var(--ink); }
|
|
.arit .points li::before { content: ''; position: absolute; left: 0; top: 18px;
|
|
width: 10px; height: 10px; border-radius: 9999px; background: var(--bordeaux); }
|
|
.arit .points code, .arit .stat-note code, .arit .ai-pop-list code {
|
|
font: 600 0.92em var(--mono); color: var(--bordeaux-deep); background: var(--surface-alt);
|
|
padding: 1px 5px; border-radius: 4px; }
|
|
|
|
/* split + code panel */
|
|
.arit .split { display: flex; gap: 40px; flex: 1; min-height: 0; }
|
|
.arit .split .left { flex: 0 0 430px; display: flex; flex-direction: column; }
|
|
.arit .split .right { flex: 1; min-width: 0; display: flex; }
|
|
.arit .code { width: 100%; display: flex; flex-direction: column; overflow: hidden;
|
|
border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sunken); }
|
|
.arit .code-head { flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 16px; border-bottom: 1px solid var(--line); font: 600 11px/1 var(--mono); color: var(--ink-muted); }
|
|
.arit .code pre { flex: 1; padding: 16px 18px; overflow: hidden; margin: 0;
|
|
font: 400 13px/1.6 var(--mono); color: var(--ink); text-align: left; box-shadow: none; }
|
|
.arit .code b { font-weight: 700; color: var(--bordeaux-deep); }
|
|
.arit .code i { font-style: normal; color: #2f6f4f; }
|
|
|
|
/* stats */
|
|
.arit .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; flex: 1; align-content: center; }
|
|
.arit .stat { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt);
|
|
padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; }
|
|
.arit .stat .num { font: 700 46px/1 var(--sans); color: var(--bordeaux); letter-spacing: -.02em; }
|
|
.arit .stat .lbl { font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
|
|
.arit .stat .sub { font: 400 11.5px/1.4 var(--sans); color: var(--ink-muted); }
|
|
.arit .stat-note { margin-top: 20px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); }
|
|
|
|
/* divider */
|
|
.arit.divider .sbody { justify-content: center; }
|
|
.arit .numeral { font: 700 110px/1 var(--sans); color: var(--bordeaux); }
|
|
.arit .divider-h { font: 700 40px/1.15 var(--sans); margin-top: 10px; }
|
|
.arit .cue { margin-top: 22px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
|
|
|
|
/* ontology chips */
|
|
.arit .tier { margin-bottom: 18px; }
|
|
.arit .tier-label { display: block; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--ink-muted); margin-bottom: 8px; }
|
|
.arit .chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.arit .chipc { border: 1px solid var(--bordeaux); color: var(--bordeaux-deep); background: #fff;
|
|
border-radius: 9999px; padding: 7px 14px; font: 700 13px/1 var(--sans); }
|
|
.arit .chipc.t2 { border-color: var(--line-strong); color: var(--ink-muted); }
|
|
|
|
/* flow */
|
|
.arit .flow { margin-top: 16px; display: flex; align-items: stretch; gap: 14px; }
|
|
.arit .zone { border-radius: 8px; padding: 30px 14px 14px; position: relative; }
|
|
.arit .zone > .zlabel { position: absolute; top: 8px; left: 14px;
|
|
font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
|
|
.arit .zone.existed { flex: 0 0 168px; background: var(--surface-alt); border: 1px dashed var(--line-strong); }
|
|
.arit .zone.existed > .zlabel { color: var(--ink-muted); }
|
|
.arit .zone.built { flex: 1; background: #faf4f5; border: 1px solid #e7c3c6; }
|
|
.arit .zone.built > .zlabel { color: var(--bordeaux); }
|
|
.arit .fcol { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
|
.arit .fbox { background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 10px; text-align: center; }
|
|
.arit .fbox b { display: block; font: 700 13.5px/1.25 var(--sans); }
|
|
.arit .fbox span { display: block; margin-top: 3px; font: 400 11px/1.3 var(--sans); color: var(--ink-muted); }
|
|
.arit .fbox.src { background: var(--surface-alt); border-color: var(--line); }
|
|
.arit .fbox.src.future { background: transparent; border: 1.5px dashed var(--line-strong); }
|
|
.arit .fbox.src.future b { color: var(--ink-muted); font-weight: 700; }
|
|
.arit .fbox.src.future .plus { display: inline-flex; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px;
|
|
align-items: center; justify-content: center; border-radius: 9999px; border: 1.5px solid var(--bordeaux);
|
|
color: var(--bordeaux); font: 800 11px/1 var(--sans); }
|
|
.arit .fbox.end { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; padding: 14px 10px; }
|
|
.arit .fbox.end span { color: rgba(255,255,255,.85); }
|
|
.arit .farrow { align-self: center; color: var(--bordeaux); font: 700 15px/1 var(--sans); }
|
|
.arit .fcol.ai { position: relative; padding-top: 12px; }
|
|
.arit .brain {
|
|
position: absolute; top: -6px; right: 6px; z-index: 5;
|
|
width: 30px; height: 30px; border-radius: 9999px;
|
|
background: #fff; border: 1.5px solid var(--bordeaux);
|
|
display: flex; align-items: center; justify-content: center; font-size: 15px;
|
|
}
|
|
.arit .fcap { font: italic 400 11px/1.4 var(--sans); color: var(--ink-muted); text-align: center; }
|
|
.arit .fcol.ai-hit { flex: 0 0 44px; align-items: center; justify-content: center; gap: 8px; }
|
|
.arit .fcol.ai-hit .brain-btn { position: static; }
|
|
|
|
/* clickable brains */
|
|
button.brain-btn { cursor: pointer; padding: 0; transition: transform .15s ease, box-shadow .15s ease; }
|
|
button.brain-btn:hover, button.brain-btn:focus-visible { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(203,51,59,.14); outline: none; }
|
|
|
|
/* popup */
|
|
.ai-pop { position: fixed; inset: 0; z-index: 100; background: rgba(42,36,38,.45); backdrop-filter: blur(2px);
|
|
display: block; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
|
|
.ai-pop.open { opacity: 1; pointer-events: auto; }
|
|
.ai-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
|
|
.ai-line line { stroke: var(--bordeaux); stroke-width: 2.5; }
|
|
.ai-line circle { fill: var(--bordeaux); }
|
|
.ai-pop-card { position: absolute; width: min(580px, 92vw); background: #fff; border: 1px solid var(--line);
|
|
border-radius: 12px; box-shadow: 0 18px 50px rgba(42,36,38,.28); padding: 24px 28px 22px;
|
|
transform: translateY(14px) scale(.95); transition: transform .24s cubic-bezier(.2,.9,.3,1.15); text-align: left; }
|
|
.ai-pop.open .ai-pop-card { transform: none; }
|
|
.ai-pop-kicker { font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 10px; }
|
|
.ai-pop-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
|
.ai-pop-title .brain { position: static; }
|
|
.ai-pop-title .brain-btn { cursor: default; pointer-events: none; }
|
|
.ai-pop-title b { font: 700 18px/1.3 var(--sans); color: var(--ink); font-family: var(--sans); }
|
|
.ai-pop-card p { font: 400 14px/1.65 var(--sans); color: var(--ink); margin: 0; text-align: left; }
|
|
.ai-pop-card p.lead { margin-bottom: 14px; }
|
|
.ai-pop-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
|
|
.ai-pop-list li { position: relative; padding-left: 20px; font: 400 13.5px/1.5 var(--sans); color: var(--ink); }
|
|
.ai-pop-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 9999px; background: var(--bordeaux); }
|
|
.ai-pop-list b { font-weight: 800; }
|
|
.ai-pop-list .n { color: var(--bordeaux-deep); font-weight: 800; }
|
|
.roi { margin-top: 14px; border: 1.5px solid var(--bordeaux); background: #faf4f5; border-radius: 8px;
|
|
padding: 10px 14px; font: 400 13.5px/1.55 var(--sans); color: var(--ink); }
|
|
.roi .k { display: block; margin-bottom: 4px; font: 800 10.5px/1 var(--mono); letter-spacing: .14em;
|
|
text-transform: uppercase; color: var(--bordeaux-deep); }
|
|
.ai-pop-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none;
|
|
border-radius: 9999px; background: var(--surface-alt); font: 700 15px/1 var(--sans); color: var(--ink-muted); cursor: pointer; }
|
|
.ai-pop-x:hover { background: var(--bordeaux-tint); color: var(--bordeaux-deep); }
|
|
|
|
/* chips on slides (wording TBD) */
|
|
.arit .chip.tbd { color: var(--bordeaux-deep); border: 1px solid var(--bordeaux); background: #fff;
|
|
border-radius: 9999px; padding: 6px 12px; font: 700 10.5px/1 var(--sans); letter-spacing: .06em; }
|
|
|
|
/* where we started — scattered orbit map */
|
|
.arit .scatter { position: relative; flex: 1; min-height: 0; }
|
|
.arit .todo-stack { position: absolute; z-index: 2; }
|
|
.arit .todo { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--bordeaux);
|
|
border-radius: 8px; background: #fff; padding: 8px 12px; margin-bottom: 8px;
|
|
box-shadow: 0 2px 8px rgba(42,36,38,.06); cursor: pointer; }
|
|
.arit .todo .q { font: 800 22px/1 var(--sans); color: var(--bordeaux-deep); }
|
|
.arit .todo .tx { display: flex; flex-direction: column; }
|
|
.arit .todo b { font: 700 13.5px/1.3 var(--sans); color: var(--bordeaux-deep); }
|
|
.arit .todo .tx span { font: 400 12px/1.4 var(--sans); color: var(--ink-muted); margin-top: 2px; }
|
|
.arit .missing-title { position: absolute; font: 700 30px/1.2 var(--sans); color: var(--bordeaux-deep); }
|
|
.arit .isle { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
|
cursor: pointer; transform: rotate(var(--rot, 0deg)); transition: transform .18s ease;
|
|
border: none; background: none; font-family: var(--sans); width: 230px; }
|
|
.arit .isle:hover, .arit .isle:focus-visible { transform: rotate(var(--rot, 0deg)) scale(1.05); outline: none; }
|
|
.arit .isle .ico { width: var(--size, 120px); height: var(--size, 120px); color: var(--bordeaux); display: block; }
|
|
.arit .isle .nm { font: 700 16px/1.3 var(--sans); color: var(--ink); margin-top: 4px; }
|
|
.arit .isle .sc { font: 400 13.5px/1.4 var(--sans); color: var(--ink-muted); max-width: 240px; }
|
|
.arit .hint { margin-top: 12px; font: italic 400 12px/1.4 var(--sans); color: var(--ink-muted); }
|
|
|
|
/* snapshot tours + chart placeholders */
|
|
.arit .shots { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
|
|
gap: 14px; flex: 1; min-height: 0; align-content: center; }
|
|
.arit .shot { border: 1.5px dashed var(--line-strong); border-radius: 8px;
|
|
background: var(--surface-alt); display: flex; align-items: center; justify-content: center;
|
|
font: italic 400 12px/1.4 var(--sans); color: var(--ink-muted); min-height: 0; overflow: hidden; }
|
|
.arit .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; min-height: 0; align-content: center; }
|
|
.arit .chart { border: 1.5px solid var(--line); border-radius: 8px; background: #fff; min-height: 0;
|
|
display: flex; flex-direction: column; overflow: hidden; }
|
|
.arit .chart b { display: block; padding: 12px 16px; font: 700 14px/1.3 var(--sans); color: var(--ink);
|
|
border-bottom: 1px solid var(--line); }
|
|
.arit .chart span { flex: 1; display: flex; align-items: center; justify-content: center;
|
|
font: italic 400 12px/1.4 var(--sans); color: var(--ink-muted); text-align: center; padding: 0 20px; }
|
|
|
|
/* pillars strip (vision slide) */
|
|
.arit .pillars { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
.arit .pillars .agents { font: italic 600 12px/1.4 var(--sans); color: var(--bordeaux-deep);
|
|
border: 1.5px dashed var(--bordeaux); border-radius: 8px; padding: 7px 12px; background: #faf4f5; }
|
|
.arit .pillars .pillar { border: 1px solid var(--line-strong); border-radius: 9999px;
|
|
padding: 6px 12px; font: 600 11.5px/1 var(--sans); color: var(--ink-muted); }
|
|
.arit .pillars .pillar b { color: var(--ink); font-weight: 700; }
|
|
|
|
/* Reveal sets inline "display: block" on the presented section — beat it
|
|
(author !important wins over inline) so our flex column layout applies */
|
|
.reveal .slides section.arit.present { display: flex !important; }
|
|
|
|
/* hide reveal default noise on our chrome */
|
|
.reveal .slides section.arit aside.notes { display: none; }
|
|
|
|
/* vision slide: tighter vertical rhythm to keep pillars clear of the footer */
|
|
.arit.flow-slide .kicker { margin-bottom: 10px; }
|
|
.arit.flow-slide h2 { margin-bottom: 6px; }
|
|
.arit.flow-slide .lead { margin-top: 6px; font-size: 15px; }
|
|
.arit.flow-slide .flow { margin-top: 14px; }
|
|
.arit.flow-slide .pillars { padding-top: 8px; }
|
|
|
|
/* popup: lead + list (missing-pieces popups) */
|
|
.ai-pop-card p.lead { font-style: italic; color: var(--ink-muted); }
|