/* 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.title-slide .lead { font-size: 19px; max-width: 40em; } .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); }