mirror of
https://github.com/himanshudongre/smriti.git
synced 2026-08-28 05:14:59 +00:00
15e099b67e
Some checks failed
Deploy website to GitHub Pages / deploy (push) Has been cancelled
This pass replaces the v2 visual language with a more handcrafted, signature-feeling system. Structure and copy are preserved; only the visual + interaction layer is reworked. Visual metaphor --------------- The dominant motif is a braid of two agent strands (claude-code in ember, codex in indigo) weaving over and under each other through hexagonal "checkpoint stones." The stones carry short hashes; the rightmost is "wet" — currently being written — and gets a soft ember pulse. Braiding has cultural weight (DNA, rope, river confluence) and reads as "structured intertwining," which is exactly what shared reasoning state is. The same motif scales down to a taut, stretched braid in the drift section. Palette ------- Refined to feel like a signature, not a template: - Deeper cool-black `#070710` background (warm accents pop harder against blue-black than against grey-black). - Ember `#ffb663` — warmer and more saturated than v2's `#f5c773`; campfire ember, not corporate gold. This is the Smriti color. - Indigo `#7c8cff` — saturated, fresh; not v2's washed `#8ba0c7`. - Aurora `#7be3b0` — third pole used sparingly for matches / done states, so the page isn't just ember + indigo. - Warm off-white paper `#e9e7e2` for body text. - Subtle SVG-noise grain overlay (5% opacity, overlay blend) gives the dark surface tooth. - Three hand-placed ember-glow anchor regions (hero, centerpiece, CTA) signal hierarchy — not decorative gradient blobs. Section redesigns ----------------- - Hero — braid + 5 hexagonal stones replacing v2's circle-and-line timeline. Subtle 14s sway on the strands. The rightmost (wet) stone glows and pulses. - Missing primitive — replaced the rigid 3-column-grid + connector gutter with a typographic glossary. Mapped rows get an ember dot; unmapped rows get an indigo dot and the "no equivalent" label. Reads like a hand-typeset comparison sheet, not a spreadsheet. - HANDOFF.md vs structured — both panels now have a lined-paper background. The HANDOFF panel has a `COLLISION` (red) badge; the checkpoint panel has a `RESOLVED` (aurora) badge. The conflict line types in, gets struck through, and the resolution types in underneath on scroll-in. - What Smriti is — checkpoint render becomes a parsed structured tree with labeled field/value pairs and intent/agent tag pills. - Multi-agent coordination (centerpiece) — completely rebuilt. Three columns: claude-code panel (left) | task pool (center) | codex panel (right). Tasks are "packets" that fly from the central pool into the side panels via JS-animated transforms, with springy easing. Each agent has a working stack that populates as packets land. Plays once on scroll-in, replayable. Bonus: clicking any unclaimed packet fires it manually to whichever agent has fewer claims. - Drift — repo timeline replaced with a tensile braid stretched between the checkpoint stone and the HEAD stone. On scroll-in, the HEAD stone nudges +14px right, gets the warning color, and the "+2 commits ahead" badge fades in. - Built with Smriti — terminal panel now has traffic-light dots, a blinking caret, and ember underline animation on "67 cross-agent continuations" on scroll-in. Numbers are semantically colored (ember = main, indigo = codex, aurora = success rates). - Try it — two terminals now sit on a very subtle skew axis (like an open laptop spread); hover snaps them straight. - Brand mark — replaced the dot-grid with a hexagonal stone and two woven strand-threads. Soft ember pulse every ~6s. Motion ------ Tasteful, per-section motion treatments rather than uniform fade-up. Slow braid sway on hero. Live-typing markdown collision. Springy packet flight. Drift stone nudge. CLI caret blink. Brand mark pulse. SVG path draw-in. Honors `prefers-reduced-motion: reduce` — all animations skip, every element lands in its terminal state, carets go static. Implementation -------------- Still pure HTML + CSS + ~330 lines of vanilla JS. No framework, no build step, no webfont, no third-party requests. IntersectionObserver thresholds tuned to 0.18 so animations fire reliably on mobile (tall stacked sections were below the previous 0.35–0.45 thresholds). Existing GitHub Pages workflow uploads ./website unchanged. Mobile responsive at 980 / 720 / 420 breakpoints. Theatre stacks vertically on mobile, packets still fly to the correct positions via computed bounding rects. Nav collapses to the GitHub CTA on small screens.
1816 lines
45 KiB
CSS
1816 lines
45 KiB
CSS
/* ==========================================================================
|
|
Smriti — landing page styles (v2.1 design pass)
|
|
Pure HTML + CSS + a small amount of vanilla JS. No build step.
|
|
Motif: braided agent lanes around hexagonal checkpoint stones.
|
|
Palette: deep cool-black, ember (claude), indigo (codex), aurora (matches),
|
|
warm off-white paper, hand-placed atmospheric warm spots, subtle grain.
|
|
========================================================================== */
|
|
|
|
/* ── Tokens ──────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* Surface */
|
|
--ink-base: #070710;
|
|
--ink-1: #0e0e1a;
|
|
--ink-2: #16162a;
|
|
--ink-3: #1d1d33;
|
|
|
|
/* Type */
|
|
--paper: #e9e7e2;
|
|
--paper-muted: #8e8b96;
|
|
--paper-dim: #5a5764;
|
|
--paper-faint: #36343d;
|
|
|
|
/* Signature */
|
|
--ember: #ffb663;
|
|
--ember-2: #ffd089;
|
|
--ember-deep: #d68a3a;
|
|
--ember-soft: rgba(255, 182, 99, 0.14);
|
|
--ember-line: rgba(255, 182, 99, 0.42);
|
|
--ember-glow: rgba(255, 182, 99, 0.22);
|
|
|
|
/* Coordination — codex */
|
|
--indigo: #7c8cff;
|
|
--indigo-2: #a0adff;
|
|
--indigo-soft: rgba(124, 140, 255, 0.14);
|
|
--indigo-line: rgba(124, 140, 255, 0.42);
|
|
--indigo-glow: rgba(124, 140, 255, 0.18);
|
|
|
|
/* Third pole — matches/done */
|
|
--aurora: #7be3b0;
|
|
--aurora-soft: rgba(123, 227, 176, 0.14);
|
|
--aurora-line: rgba(123, 227, 176, 0.42);
|
|
|
|
/* Edges */
|
|
--edge: rgba(255, 255, 255, 0.05);
|
|
--edge-strong: rgba(255, 255, 255, 0.10);
|
|
--edge-warm: rgba(255, 182, 99, 0.10);
|
|
|
|
/* Agent semantic */
|
|
--agent-claude: var(--ember);
|
|
--agent-codex: var(--indigo);
|
|
|
|
/* Type stack */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
|
|
"Cascadia Mono", "Roboto Mono", Consolas, monospace;
|
|
--font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
|
|
|
|
/* Motion */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--t-fast: 180ms;
|
|
--t-base: 420ms;
|
|
--t-slow: 820ms;
|
|
--t-flow: 1400ms;
|
|
|
|
/* Layout */
|
|
--w-narrow: 720px;
|
|
--w-default: 960px;
|
|
--w-wide: 1180px;
|
|
--r-sm: 3px;
|
|
--r-md: 6px;
|
|
--r-lg: 10px;
|
|
--r-pill: 999px;
|
|
}
|
|
|
|
/* ── Reset + base ────────────────────────────────────────────────────────── */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
background: var(--ink-base);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
color: var(--paper);
|
|
background: var(--ink-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: "ss01", "cv11", "kern", "liga";
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Grain texture — subtle SVG noise overlay, fixed-attached */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: -20%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.05;
|
|
mix-blend-mode: overlay;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
|
|
background-size: 180px 180px;
|
|
}
|
|
|
|
/* Atmospheric ember anchors — hand-placed warm spots that signal hierarchy.
|
|
Two regions: under the hero, around the centerpiece. */
|
|
body::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background-image:
|
|
radial-gradient(ellipse 60% 35% at 22% 8%, rgba(255, 182, 99, 0.12), transparent 65%),
|
|
radial-gradient(ellipse 30% 18% at 75% 4%, rgba(124, 140, 255, 0.06), transparent 70%),
|
|
radial-gradient(ellipse 50% 24% at 50% 40%, rgba(255, 182, 99, 0.05), transparent 75%),
|
|
radial-gradient(ellipse 40% 22% at 50% 95%, rgba(255, 182, 99, 0.07), transparent 75%);
|
|
}
|
|
|
|
main, header, footer, section { position: relative; z-index: 2; }
|
|
|
|
img, svg { max-width: 100%; height: auto; display: block; }
|
|
|
|
a { color: var(--ember); text-decoration: none; }
|
|
a:hover { color: var(--ember-2); }
|
|
|
|
code, pre {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
code {
|
|
color: var(--paper);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid var(--edge);
|
|
padding: 0.1em 0.4em;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
|
|
pre {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 1rem 1.25rem;
|
|
overflow-x: auto;
|
|
line-height: 1.55;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--ember-soft);
|
|
color: var(--ember-2);
|
|
}
|
|
|
|
/* ── Container + section primitives ──────────────────────────────────────── */
|
|
|
|
.container {
|
|
max-width: var(--w-default);
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.container-narrow { max-width: var(--w-narrow); }
|
|
.container-wide { max-width: var(--w-wide); }
|
|
|
|
.section {
|
|
padding: 6.5rem 0;
|
|
position: relative;
|
|
}
|
|
|
|
.section + .section { border-top: 1px solid var(--edge); }
|
|
|
|
.section-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
margin: 0 0 1.2rem;
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.section-eyebrow::before {
|
|
content: "";
|
|
width: 22px;
|
|
height: 1px;
|
|
background: var(--ember);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: clamp(1.85rem, 3.6vw, 2.65rem);
|
|
line-height: 1.08;
|
|
letter-spacing: -0.025em;
|
|
margin: 0 0 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--paper);
|
|
}
|
|
|
|
.section h2 .accent { color: var(--ember); }
|
|
.section h2 .alt { color: var(--indigo); }
|
|
|
|
.section h3 {
|
|
font-size: 1.05rem;
|
|
margin: 0 0 0.5rem;
|
|
letter-spacing: -0.01em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section .lede {
|
|
font-size: 1.12rem;
|
|
color: var(--paper-muted);
|
|
max-width: 640px;
|
|
margin: 0 0 2.5rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.section .lede strong { color: var(--paper); font-weight: 600; }
|
|
|
|
.section p { margin: 0 0 1rem; color: var(--paper-muted); }
|
|
.section p strong { color: var(--paper); }
|
|
|
|
.section .caption {
|
|
font-size: 0.88rem;
|
|
color: var(--paper-dim);
|
|
margin-top: 2rem;
|
|
max-width: 680px;
|
|
line-height: 1.6;
|
|
font-style: italic;
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.section .caption code {
|
|
font-style: normal;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 0.78rem 1.55rem;
|
|
border-radius: var(--r-pill);
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
transition: background var(--t-fast) var(--ease-out),
|
|
color var(--t-fast) var(--ease-out),
|
|
border-color var(--t-fast) var(--ease-out),
|
|
transform var(--t-fast) var(--ease-out),
|
|
box-shadow var(--t-fast) var(--ease-out);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.btn:hover { transform: translateY(-1px); }
|
|
.btn:active { transform: translateY(0); }
|
|
|
|
.btn-primary {
|
|
background: var(--ember);
|
|
color: #1a1004;
|
|
box-shadow: 0 0 0 1px var(--ember-deep) inset,
|
|
0 8px 24px -8px var(--ember-glow);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--ember-2);
|
|
color: #1a1004;
|
|
text-decoration: none;
|
|
box-shadow: 0 0 0 1px var(--ember-deep) inset,
|
|
0 12px 32px -8px var(--ember-glow);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--paper);
|
|
border-color: var(--edge-strong);
|
|
border-radius: var(--r-pill);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--paper-muted);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
text-decoration: none;
|
|
color: var(--paper);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--paper-muted);
|
|
border: none;
|
|
padding: 0.45rem 0.85rem;
|
|
font-size: 0.85rem;
|
|
border-radius: var(--r-md);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
color: var(--paper);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Header ──────────────────────────────────────────────────────────────── */
|
|
|
|
.site-header {
|
|
border-bottom: 1px solid var(--edge);
|
|
padding: 1rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgba(7, 7, 16, 0.7);
|
|
backdrop-filter: blur(14px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
|
z-index: 50;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
letter-spacing: -0.015em;
|
|
color: var(--paper);
|
|
}
|
|
|
|
.brand:hover { color: var(--paper); text-decoration: none; }
|
|
|
|
.brand-mark {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.brand-mark .stone {
|
|
fill: var(--ember);
|
|
filter: drop-shadow(0 0 6px var(--ember-glow));
|
|
}
|
|
|
|
.brand-mark .pulse {
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
animation: brand-pulse 5.4s var(--ease-out) infinite;
|
|
}
|
|
|
|
@keyframes brand-pulse {
|
|
0%, 80%, 100% { opacity: 0; transform: scale(1); }
|
|
10% { opacity: 0.55; transform: scale(1); }
|
|
30% { opacity: 0; transform: scale(2.2); }
|
|
}
|
|
|
|
.site-header nav {
|
|
display: flex;
|
|
gap: 1.75rem;
|
|
font-size: 0.92rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-header nav a {
|
|
color: var(--paper-muted);
|
|
transition: color var(--t-fast) var(--ease-out);
|
|
position: relative;
|
|
}
|
|
|
|
.site-header nav a::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0;
|
|
bottom: -4px;
|
|
height: 1px;
|
|
background: var(--ember);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.site-header nav a:hover { color: var(--paper); text-decoration: none; }
|
|
.site-header nav a:hover::after { transform: scaleX(1); }
|
|
|
|
.site-header nav .nav-cta {
|
|
color: var(--paper);
|
|
border: 1px solid var(--edge-strong);
|
|
padding: 0.45rem 0.9rem;
|
|
border-radius: var(--r-pill);
|
|
transition: border-color var(--t-fast) var(--ease-out),
|
|
background var(--t-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header nav .nav-cta::after { display: none; }
|
|
.site-header nav .nav-cta:hover {
|
|
border-color: var(--ember-line);
|
|
background: var(--ember-soft);
|
|
color: var(--paper);
|
|
}
|
|
|
|
/* ── Hero ────────────────────────────────────────────────────────────────── */
|
|
|
|
.hero {
|
|
padding: 7rem 0 6rem;
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
|
|
gap: 3.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-copy h1 {
|
|
font-size: clamp(2.4rem, 6.2vw, 4.1rem);
|
|
line-height: 1.02;
|
|
letter-spacing: -0.035em;
|
|
margin: 0 0 1.4rem;
|
|
font-weight: 600;
|
|
color: var(--paper);
|
|
}
|
|
|
|
.hero-copy h1 .l1,
|
|
.hero-copy h1 .l2 { display: block; }
|
|
|
|
.hero-copy h1 .l2 {
|
|
color: var(--ember);
|
|
background: linear-gradient(180deg, var(--ember) 0%, var(--ember-deep) 110%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: 1.18rem;
|
|
color: var(--paper-muted);
|
|
max-width: 540px;
|
|
margin: 0 0 2.25rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.hero-sub strong {
|
|
color: var(--paper);
|
|
font-weight: 500;
|
|
background: linear-gradient(180deg, transparent 65%, var(--ember-soft) 65%);
|
|
padding: 0 0.15em;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-meta {
|
|
margin-top: 2rem;
|
|
font-size: 0.84rem;
|
|
color: var(--paper-dim);
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.hero-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
|
|
|
|
.hero-meta .dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--aurora);
|
|
box-shadow: 0 0 0 3px var(--aurora-soft);
|
|
}
|
|
|
|
/* Hero braid — the establishing visual */
|
|
.hero-braid {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 600 / 380;
|
|
max-width: 580px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.hero-braid svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Braid styling */
|
|
.braid .strand {
|
|
fill: none;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.braid .strand.claude {
|
|
stroke: var(--ember);
|
|
filter: drop-shadow(0 0 5px var(--ember-glow));
|
|
}
|
|
|
|
.braid .strand.codex {
|
|
stroke: var(--indigo);
|
|
filter: drop-shadow(0 0 5px var(--indigo-glow));
|
|
}
|
|
|
|
.braid .strand.faint {
|
|
stroke-opacity: 0.35;
|
|
filter: none;
|
|
}
|
|
|
|
/* Crossing patches — short over-segments redrawn on top of an under-segment
|
|
to create proper braid over/under at the crossing midpoints. */
|
|
.braid .patch {
|
|
fill: none;
|
|
stroke-width: 2.4;
|
|
stroke-linecap: round;
|
|
stroke: var(--ink-base);
|
|
}
|
|
|
|
.braid .patch.claude { stroke: var(--ember); }
|
|
.braid .patch.codex { stroke: var(--indigo); }
|
|
|
|
/* Animated sway on the strands — slow drift, very small amplitude */
|
|
.braid .sway {
|
|
transform-origin: center center;
|
|
animation: braid-sway 14s var(--ease-in-out) infinite alternate;
|
|
}
|
|
|
|
@keyframes braid-sway {
|
|
0% { transform: translateY(-1.5px) rotate(-0.2deg); }
|
|
100% { transform: translateY(1.5px) rotate(0.2deg); }
|
|
}
|
|
|
|
/* Hexagonal checkpoint stones */
|
|
.braid .stone-group {
|
|
cursor: default;
|
|
}
|
|
|
|
.braid .stone {
|
|
fill: var(--ink-1);
|
|
stroke: var(--edge-strong);
|
|
stroke-width: 1;
|
|
transition: fill var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.braid .stone.sealed { fill: var(--ink-2); stroke: var(--edge-strong); }
|
|
.braid .stone.wet {
|
|
fill: var(--ink-2);
|
|
stroke: var(--ember);
|
|
filter: drop-shadow(0 0 12px var(--ember-glow));
|
|
}
|
|
|
|
.braid .stone-hash {
|
|
font-family: var(--font-mono);
|
|
font-size: 9.5px;
|
|
fill: var(--paper-muted);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.braid .stone.wet ~ .stone-hash,
|
|
.braid .stone-group.is-wet .stone-hash { fill: var(--ember); }
|
|
|
|
.braid .label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10.5px;
|
|
fill: var(--paper-dim);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.braid .label.claude { fill: var(--ember); opacity: 0.85; }
|
|
.braid .label.codex { fill: var(--indigo); opacity: 0.85; }
|
|
|
|
/* Hero wet stone pulse — only on the rightmost stone */
|
|
.braid .stone-pulse {
|
|
fill: var(--ember);
|
|
opacity: 0;
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
animation: stone-pulse 3.4s var(--ease-out) infinite;
|
|
}
|
|
|
|
@keyframes stone-pulse {
|
|
0% { opacity: 0.4; transform: scale(1); }
|
|
70% { opacity: 0; transform: scale(2.4); }
|
|
100% { opacity: 0; transform: scale(2.4); }
|
|
}
|
|
|
|
/* ── Section: Missing primitive (typographic glossary) ───────────────────── */
|
|
|
|
.glossary {
|
|
margin: 2.5rem 0 0;
|
|
max-width: 760px;
|
|
}
|
|
|
|
.glossary .gloss-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.6fr;
|
|
gap: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--edge);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.glossary .gloss-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.6fr;
|
|
gap: 2rem;
|
|
padding: 1.1rem 0;
|
|
border-bottom: 1px solid var(--edge);
|
|
align-items: baseline;
|
|
position: relative;
|
|
}
|
|
|
|
.glossary .gloss-row:last-child { border-bottom: none; }
|
|
|
|
.glossary .gloss-row .git-term {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.95rem;
|
|
color: var(--paper-muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.glossary .gloss-row .git-term::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--ember);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.glossary .gloss-row.unmapped .git-term {
|
|
color: var(--paper-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.glossary .gloss-row.unmapped .git-term::before {
|
|
background: var(--indigo);
|
|
}
|
|
|
|
.glossary .gloss-row .smriti-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.glossary .gloss-row .smriti-term {
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--paper);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.glossary .gloss-row.unmapped .smriti-term { color: var(--indigo-2); }
|
|
|
|
.glossary .gloss-row .smriti-desc {
|
|
color: var(--paper-muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.glossary-footnote {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
font-size: 0.88rem;
|
|
color: var(--paper-dim);
|
|
max-width: 720px;
|
|
font-style: italic;
|
|
font-family: var(--font-serif);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.glossary-footnote .dot {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--indigo);
|
|
vertical-align: middle;
|
|
margin: 0 0.4rem 2px;
|
|
}
|
|
|
|
/* ── Section: Markdown collapses vs structured ───────────────────────────── */
|
|
|
|
.collapse-pair {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin: 2.5rem 0 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.collapse-pair > * { min-width: 0; }
|
|
|
|
/* Left surface — markdown collapse */
|
|
.md-surface {
|
|
position: relative;
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.84rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.md-surface .surface-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.55rem 1rem;
|
|
border-bottom: 1px solid var(--edge);
|
|
background: var(--ink-2);
|
|
font-size: 0.72rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.md-surface .surface-bar .filename {
|
|
font-family: var(--font-mono);
|
|
color: var(--paper-muted);
|
|
}
|
|
|
|
.md-surface .surface-bar .badge {
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.12em;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: var(--r-sm);
|
|
background: rgba(217, 122, 114, 0.12);
|
|
color: #d97a72;
|
|
}
|
|
|
|
.md-surface .surface-body {
|
|
padding: 1.1rem 1.25rem 1.3rem;
|
|
color: var(--paper-muted);
|
|
min-height: 220px;
|
|
}
|
|
|
|
.md-surface .line { display: block; white-space: nowrap; overflow: hidden; }
|
|
.md-surface .line.h { color: var(--paper); font-weight: 600; margin-bottom: 0.25rem; }
|
|
.md-surface .line.claude { color: var(--ember); }
|
|
.md-surface .line.codex { color: var(--indigo); }
|
|
.md-surface .line.struck { text-decoration: line-through; opacity: 0.5; }
|
|
.md-surface .indent-1 { padding-left: 1.1rem; }
|
|
|
|
.md-surface .typing-caret {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 1em;
|
|
background: var(--ember);
|
|
vertical-align: text-bottom;
|
|
margin-left: 2px;
|
|
animation: caret-blink 1.1s steps(2) infinite;
|
|
}
|
|
|
|
@keyframes caret-blink { 50% { opacity: 0; } }
|
|
|
|
.md-surface .surface-foot {
|
|
padding: 0.85rem 1.25rem;
|
|
border-top: 1px solid var(--edge);
|
|
font-size: 0.84rem;
|
|
color: var(--paper-muted);
|
|
background: rgba(217, 122, 114, 0.05);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.md-surface .surface-foot strong { color: #d97a72; font-weight: 600; }
|
|
|
|
/* Right surface — structured checkpoint (notebook-flavored, no rounded chrome) */
|
|
.cp-surface {
|
|
position: relative;
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 1.35rem 1.5rem 1.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.86rem;
|
|
line-height: 1.75;
|
|
background-image:
|
|
linear-gradient(180deg, transparent 0, transparent calc(1.75em - 1px), var(--edge) calc(1.75em - 1px), var(--edge) 1.75em, transparent 1.75em);
|
|
background-size: 100% 1.75em;
|
|
background-position: 0 1.7rem;
|
|
}
|
|
|
|
.cp-surface .cp-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.cp-surface .cp-bar .filename { color: var(--ember); }
|
|
|
|
.cp-surface .cp-bar .badge {
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.12em;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: var(--r-sm);
|
|
background: var(--aurora-soft);
|
|
color: var(--aurora);
|
|
}
|
|
|
|
.cp-surface .ln { display: block; color: var(--paper-muted); }
|
|
.cp-surface .ln .k { color: var(--paper); font-weight: 600; }
|
|
.cp-surface .ln .v { color: var(--ember); }
|
|
.cp-surface .ln .vi { color: var(--indigo); }
|
|
.cp-surface .ln .id { color: var(--paper-dim); font-style: italic; }
|
|
.cp-surface .ln.in-1 { padding-left: 1.2rem; }
|
|
.cp-surface .ln.in-2 { padding-left: 2.4rem; }
|
|
|
|
.cp-surface .cp-foot {
|
|
margin-top: 0.85rem;
|
|
padding-top: 0.85rem;
|
|
border-top: 1px solid var(--edge);
|
|
font-size: 0.84rem;
|
|
color: var(--paper-muted);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.cp-surface .cp-foot strong { color: var(--aurora); font-weight: 600; }
|
|
|
|
/* ── Section: What Smriti is ─────────────────────────────────────────────── */
|
|
|
|
.is-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.1fr;
|
|
gap: 3.5rem;
|
|
align-items: start;
|
|
margin: 2rem 0 0;
|
|
}
|
|
|
|
.is-grid p { color: var(--paper-muted); font-size: 1.02rem; }
|
|
.is-grid p code { font-size: 0.9em; }
|
|
|
|
/* Structured tree visualization — parsed JSON/YAML feel */
|
|
.struct-tree {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.86rem;
|
|
line-height: 1.75;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.struct-tree .tree-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.6rem 1.1rem;
|
|
background: var(--ink-2);
|
|
border-bottom: 1px solid var(--edge);
|
|
font-size: 0.72rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.struct-tree .tree-bar .hash { color: var(--ember); font-family: var(--font-mono); }
|
|
.struct-tree .tree-bar .meta { display: flex; gap: 0.85rem; }
|
|
|
|
.struct-tree .tree-body {
|
|
padding: 1.1rem 1.3rem 1.25rem;
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.struct-tree .tline {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr;
|
|
gap: 1rem;
|
|
align-items: baseline;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.struct-tree .tline .field {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.struct-tree .tline .field::before {
|
|
content: "·";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: var(--ember);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.struct-tree .tline .val {
|
|
color: var(--paper);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.struct-tree .tline .val .muted { color: var(--paper-muted); }
|
|
|
|
.struct-tree .tline .val ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.struct-tree .tline .val li {
|
|
display: flex;
|
|
gap: 0.55rem;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.struct-tree .tag {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.06em;
|
|
padding: 0.12rem 0.45rem;
|
|
border-radius: var(--r-sm);
|
|
text-transform: lowercase;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.struct-tree .tag.implement { background: var(--ember-soft); color: var(--ember); }
|
|
.struct-tree .tag.test { background: var(--indigo-soft); color: var(--indigo); }
|
|
.struct-tree .tag.doc { background: var(--aurora-soft); color: var(--aurora); }
|
|
.struct-tree .tag.investigate { background: rgba(216,163,90,0.14); color: #d8a35a; }
|
|
.struct-tree .tag.claude { background: var(--ember-soft); color: var(--ember); }
|
|
.struct-tree .tag.codex { background: var(--indigo-soft); color: var(--indigo); }
|
|
|
|
.struct-tree .id-pill {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--paper-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.struct-tree .repo-line {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.84rem;
|
|
color: var(--paper-muted);
|
|
}
|
|
|
|
.struct-tree .repo-line .ok { color: var(--aurora); }
|
|
|
|
/* ── Section: Multi-agent coordination — protocol theatre (rebuilt) ──────── */
|
|
|
|
.theatre {
|
|
margin: 2.5rem 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.theatre-frame {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px 1fr;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
position: relative;
|
|
min-height: 320px;
|
|
}
|
|
|
|
/* Agent panel */
|
|
.agent-panel {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 1.1rem 1.2rem 1.25rem;
|
|
min-height: 280px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
transition: border-color var(--t-base) var(--ease-out),
|
|
box-shadow var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.agent-panel.claude {
|
|
background-image: linear-gradient(180deg, var(--ember-soft) 0%, transparent 18%);
|
|
}
|
|
|
|
.agent-panel.codex {
|
|
background-image: linear-gradient(180deg, var(--indigo-soft) 0%, transparent 18%);
|
|
}
|
|
|
|
.agent-panel.is-active.claude {
|
|
border-color: var(--ember-line);
|
|
box-shadow: 0 0 0 1px var(--ember-line) inset,
|
|
0 24px 60px -24px var(--ember-glow);
|
|
}
|
|
|
|
.agent-panel.is-active.codex {
|
|
border-color: var(--indigo-line);
|
|
box-shadow: 0 0 0 1px var(--indigo-line) inset,
|
|
0 24px 60px -24px var(--indigo-glow);
|
|
}
|
|
|
|
.agent-panel .panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding-bottom: 0.9rem;
|
|
border-bottom: 1px solid var(--edge);
|
|
margin-bottom: 0.9rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.agent-panel.claude .panel-head { color: var(--ember); }
|
|
.agent-panel.codex .panel-head { color: var(--indigo); }
|
|
|
|
.agent-panel .panel-head .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 0 0 currentColor;
|
|
transition: box-shadow var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.agent-panel.is-active .panel-head .dot {
|
|
box-shadow: 0 0 0 4px var(--ember-soft);
|
|
}
|
|
.agent-panel.codex.is-active .panel-head .dot {
|
|
box-shadow: 0 0 0 4px var(--indigo-soft);
|
|
}
|
|
|
|
.agent-panel .panel-head .status {
|
|
margin-left: auto;
|
|
font-size: 0.72rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.agent-panel .work-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.agent-panel .work-stack {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
min-height: 110px;
|
|
flex: 1;
|
|
}
|
|
|
|
.agent-panel .work-stack:empty::before {
|
|
content: "(no claims yet)";
|
|
color: var(--paper-faint);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Pool */
|
|
.pool {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 1.1rem 1rem;
|
|
min-height: 280px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pool::before, .pool::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1.5rem;
|
|
right: -1.5rem;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent, var(--edge), var(--edge), var(--edge), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pool::before { top: 50%; transform: translateY(-50%); opacity: 0.25; }
|
|
.pool::after { display: none; }
|
|
|
|
.pool .pool-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
text-align: center;
|
|
margin-bottom: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pool .pool-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Task packet — the unit of work that flies into agent panels */
|
|
.packet {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 0.55rem 0.75rem;
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--edge-strong);
|
|
border-radius: var(--r-md);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--paper);
|
|
cursor: pointer;
|
|
transition: transform var(--t-fast) var(--ease-out),
|
|
border-color var(--t-fast) var(--ease-out),
|
|
background var(--t-base) var(--ease-out),
|
|
opacity var(--t-base) var(--ease-out);
|
|
position: relative;
|
|
}
|
|
|
|
.packet:hover {
|
|
transform: translateY(-1px);
|
|
border-color: var(--paper-dim);
|
|
}
|
|
|
|
.packet .intent {
|
|
font-size: 0.64rem;
|
|
letter-spacing: 0.06em;
|
|
padding: 0.12rem 0.42rem;
|
|
border-radius: var(--r-sm);
|
|
text-transform: lowercase;
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.packet .intent.implement { background: var(--ember-soft); color: var(--ember); }
|
|
.packet .intent.test { background: var(--indigo-soft); color: var(--indigo); }
|
|
.packet .intent.doc { background: var(--aurora-soft); color: var(--aurora); }
|
|
.packet .intent.investigate { background: rgba(216,163,90,0.14); color: #d8a35a; }
|
|
|
|
.packet .name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.packet .pid {
|
|
font-size: 0.7rem;
|
|
color: var(--paper-dim);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.packet.dimmed {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.packet.claimed-claude {
|
|
border-color: var(--ember-line);
|
|
background: linear-gradient(180deg, var(--ember-soft), transparent);
|
|
color: var(--ember-2);
|
|
}
|
|
|
|
.packet.claimed-codex {
|
|
border-color: var(--indigo-line);
|
|
background: linear-gradient(180deg, var(--indigo-soft), transparent);
|
|
color: var(--indigo-2);
|
|
}
|
|
|
|
/* Flying packet — overlays absolute on top of the theatre while transitioning */
|
|
.packet-flying {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
transition: transform var(--t-flow) var(--ease-spring),
|
|
opacity var(--t-flow) var(--ease-out);
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
/* Theatre controls */
|
|
.theatre-controls {
|
|
margin-top: 1.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
flex-wrap: wrap;
|
|
padding: 1.1rem 1.4rem;
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
}
|
|
|
|
.theatre-controls .step-text {
|
|
color: var(--paper);
|
|
font-size: 0.97rem;
|
|
flex: 1;
|
|
min-height: 1.4em;
|
|
transition: opacity var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.theatre-controls .step-text .muted { color: var(--paper-muted); }
|
|
|
|
.theatre-controls .controls-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.theatre-controls .step-counter {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.theatre-hint {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--paper-dim);
|
|
margin-top: 0.9rem;
|
|
text-align: center;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.theatre-hint .key {
|
|
display: inline-block;
|
|
padding: 0.1rem 0.4rem;
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--edge-strong);
|
|
border-radius: var(--r-sm);
|
|
color: var(--paper-muted);
|
|
margin: 0 0.15rem;
|
|
}
|
|
|
|
/* ── Section: Drift ──────────────────────────────────────────────────────── */
|
|
|
|
.drift-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin: 2.5rem 0 0;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.drift-canvas {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 2.2rem 1.5rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
min-height: 240px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.drift-canvas .canvas-label {
|
|
position: absolute;
|
|
top: 0.9rem;
|
|
left: 1.2rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--paper-dim);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.drift-canvas svg { width: 100%; height: auto; overflow: visible; }
|
|
|
|
.drift-canvas .timeline {
|
|
stroke: var(--paper-faint);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 2 4;
|
|
}
|
|
|
|
.drift-canvas .stone-base {
|
|
fill: var(--ink-2);
|
|
stroke: var(--ember);
|
|
stroke-width: 1.5;
|
|
filter: drop-shadow(0 0 6px var(--ember-glow));
|
|
}
|
|
|
|
.drift-canvas .stone-head {
|
|
fill: var(--ink-2);
|
|
stroke: var(--paper-muted);
|
|
stroke-width: 1.5;
|
|
transition: transform var(--t-flow) var(--ease-spring),
|
|
stroke var(--t-base) var(--ease-out),
|
|
filter var(--t-base) var(--ease-out);
|
|
transform-origin: center;
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
.drift-canvas.is-drifted .stone-head {
|
|
stroke: #d8a35a;
|
|
filter: drop-shadow(0 0 8px rgba(216,163,90,0.42));
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
.drift-canvas .commit-dot {
|
|
fill: var(--paper-faint);
|
|
transition: fill var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.drift-canvas.is-drifted .commit-dot { fill: var(--paper-muted); }
|
|
|
|
.drift-canvas .braid-taut {
|
|
fill: none;
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.drift-canvas .braid-taut.a { stroke: var(--ember); opacity: 0.85; }
|
|
.drift-canvas .braid-taut.b { stroke: var(--indigo); opacity: 0.85; }
|
|
|
|
.drift-canvas .drift-badge {
|
|
opacity: 0;
|
|
transition: opacity var(--t-slow) var(--ease-out) 300ms;
|
|
}
|
|
|
|
.drift-canvas.is-drifted .drift-badge { opacity: 1; }
|
|
|
|
.drift-canvas text {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.drift-state {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
padding: 1.3rem 1.5rem 1.4rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
line-height: 1.75;
|
|
background-image:
|
|
linear-gradient(180deg, transparent 0, transparent calc(1.75em - 1px), var(--edge) calc(1.75em - 1px), var(--edge) 1.75em, transparent 1.75em);
|
|
background-size: 100% 1.75em;
|
|
background-position: 0 1.75rem;
|
|
}
|
|
|
|
.drift-state .ds-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.9rem;
|
|
font-size: 0.72rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.drift-state .ds-bar .filename { color: var(--paper-muted); }
|
|
|
|
.drift-state .h { color: var(--paper); font-weight: 600; display: block; margin-bottom: 0.2rem; }
|
|
.drift-state .ln { display: block; color: var(--paper-muted); }
|
|
.drift-state .ln .k { color: var(--paper); }
|
|
.drift-state .ln .ok { color: var(--aurora); }
|
|
.drift-state .ln .warn { color: #d8a35a; }
|
|
.drift-state .ln .ahead { color: #d8a35a; font-weight: 600; }
|
|
.drift-state .ln.action { color: #d8a35a; margin-top: 0.4rem; }
|
|
|
|
/* ── Section: Built with Smriti ──────────────────────────────────────────── */
|
|
|
|
.terminal {
|
|
margin: 2.5rem 0 0;
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6),
|
|
0 0 0 1px var(--edge) inset;
|
|
}
|
|
|
|
.terminal .term-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.55rem 1rem;
|
|
background: var(--ink-2);
|
|
border-bottom: 1px solid var(--edge);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.terminal .term-bar .dots {
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
margin-right: 0.85rem;
|
|
}
|
|
|
|
.terminal .term-bar .dots span {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--paper-faint);
|
|
}
|
|
|
|
.terminal .term-bar .dots span:nth-child(1) { background: #d97a72; }
|
|
.terminal .term-bar .dots span:nth-child(2) { background: #d8a35a; }
|
|
.terminal .term-bar .dots span:nth-child(3) { background: var(--aurora); }
|
|
|
|
.terminal .term-bar .title { margin-right: auto; }
|
|
.terminal .term-bar .space-tag { color: var(--ember); font-family: var(--font-mono); }
|
|
|
|
.terminal .term-body {
|
|
padding: 1.3rem 1.5rem 1.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.88rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.terminal .cmd { color: var(--paper); }
|
|
.terminal .cmd .pr { color: var(--paper-dim); margin-right: 0.5rem; }
|
|
.terminal .cmd .verb { color: var(--ember); }
|
|
.terminal .cmd .arg { color: var(--paper); }
|
|
.terminal .caret {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 1em;
|
|
background: var(--ember);
|
|
vertical-align: text-bottom;
|
|
margin-left: 4px;
|
|
animation: caret-blink 1.1s steps(2) infinite;
|
|
}
|
|
|
|
.terminal .out-h {
|
|
color: var(--paper);
|
|
font-weight: 600;
|
|
margin-top: 0.9rem;
|
|
}
|
|
|
|
.terminal .out-sec {
|
|
color: var(--paper-dim);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-top: 1.1rem;
|
|
margin-bottom: 0.2rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.terminal .out {
|
|
color: var(--paper-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.terminal .out .n { color: var(--ember); font-weight: 600; }
|
|
.terminal .out .ni { color: var(--indigo); font-weight: 600; }
|
|
.terminal .out .na { color: var(--aurora); font-weight: 600; }
|
|
.terminal .out .agent-c { color: var(--ember); }
|
|
.terminal .out .agent-x { color: var(--indigo); }
|
|
.terminal .out .highlight {
|
|
position: relative;
|
|
}
|
|
.terminal .out .highlight::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; right: 0;
|
|
bottom: -2px;
|
|
height: 2px;
|
|
background: var(--ember);
|
|
transform-origin: left;
|
|
transform: scaleX(0);
|
|
transition: transform var(--t-slow) var(--ease-out) 200ms;
|
|
}
|
|
|
|
.terminal.is-revealed .out .highlight::after { transform: scaleX(1); }
|
|
|
|
.built-note {
|
|
margin-top: 1.75rem;
|
|
font-size: 0.95rem;
|
|
color: var(--paper-muted);
|
|
text-align: center;
|
|
max-width: 660px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.built-note em { color: var(--paper); font-style: normal; font-weight: 500; }
|
|
|
|
/* ── Section: Try it ─────────────────────────────────────────────────────── */
|
|
|
|
.try-stack {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin: 2.5rem 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.try-term {
|
|
background: var(--ink-1);
|
|
border: 1px solid var(--edge);
|
|
border-radius: var(--r-md);
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: transform var(--t-base) var(--ease-out);
|
|
}
|
|
|
|
.try-term:nth-child(1) { transform: rotate(-0.4deg) translateY(2px); }
|
|
.try-term:nth-child(2) { transform: rotate(0.4deg); }
|
|
|
|
.try-term:hover { transform: rotate(0) translateY(-2px); }
|
|
|
|
.try-term .tt-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.55rem 1rem;
|
|
background: var(--ink-2);
|
|
border-bottom: 1px solid var(--edge);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.74rem;
|
|
color: var(--paper-dim);
|
|
}
|
|
|
|
.try-term .tt-bar .ix {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--ember);
|
|
margin-right: 0.6rem;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.try-term .tt-bar h3 {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--paper);
|
|
font-weight: 600;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.try-term .tt-bar .marker {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--paper-dim);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.try-term .tt-body {
|
|
padding: 1.2rem 1.3rem 1.35rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
line-height: 1.75;
|
|
color: var(--paper);
|
|
}
|
|
|
|
.try-term .tt-body pre {
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.try-term .tt-body .verb { color: var(--ember); }
|
|
.try-term .tt-body .arg { color: var(--paper); }
|
|
.try-term .tt-body .note { color: var(--paper-dim); font-style: italic; }
|
|
|
|
.try-term .tt-body .note-block {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.85rem;
|
|
color: var(--paper-muted);
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--edge);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.try-foot {
|
|
margin-top: 1.75rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
font-size: 0.92rem;
|
|
color: var(--paper-muted);
|
|
}
|
|
|
|
.try-foot .reqs {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
color: var(--paper-dim);
|
|
}
|
|
|
|
/* ── CTA + footer ────────────────────────────────────────────────────────── */
|
|
|
|
.cta {
|
|
text-align: center;
|
|
padding: 7rem 0 6rem;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: clamp(1.95rem, 3.8vw, 2.7rem);
|
|
margin-bottom: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.cta h2 .accent { color: var(--ember); }
|
|
|
|
.cta p {
|
|
color: var(--paper-muted);
|
|
max-width: 540px;
|
|
margin: 0 auto 2.25rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.site-footer {
|
|
border-top: 1px solid var(--edge);
|
|
padding: 2.5rem 0 3rem;
|
|
font-size: 0.85rem;
|
|
color: var(--paper-dim);
|
|
}
|
|
|
|
.site-footer .footer-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.site-footer p { margin: 0; }
|
|
.site-footer a { color: var(--paper-muted); }
|
|
.site-footer a:hover { color: var(--paper); }
|
|
|
|
.site-footer .footer-meta {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--paper-dim);
|
|
}
|
|
|
|
/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
|
|
}
|
|
|
|
.reveal.in { opacity: 1; transform: translateY(0); }
|
|
|
|
.reveal-stagger > * {
|
|
opacity: 0;
|
|
transform: translateY(14px);
|
|
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
|
|
}
|
|
|
|
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
|
|
.reveal-stagger.in > *:nth-child(1) { transition-delay: 60ms; }
|
|
.reveal-stagger.in > *:nth-child(2) { transition-delay: 120ms; }
|
|
.reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; }
|
|
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
|
|
.reveal-stagger.in > *:nth-child(5) { transition-delay: 300ms; }
|
|
.reveal-stagger.in > *:nth-child(6) { transition-delay: 360ms; }
|
|
.reveal-stagger.in > *:nth-child(7) { transition-delay: 420ms; }
|
|
.reveal-stagger.in > *:nth-child(8) { transition-delay: 480ms; }
|
|
|
|
/* SVG path draw-in */
|
|
.draw-path {
|
|
stroke-dasharray: 2000;
|
|
stroke-dashoffset: 2000;
|
|
transition: stroke-dashoffset 1.6s var(--ease-out);
|
|
}
|
|
|
|
.in .draw-path,
|
|
.reveal.in .draw-path { stroke-dashoffset: 0; }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 980px) {
|
|
.section { padding: 5rem 0; }
|
|
.hero { padding: 4.5rem 0 3.5rem; }
|
|
.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
.hero-braid { margin-left: 0; max-width: 100%; }
|
|
|
|
.is-grid { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
.collapse-pair { grid-template-columns: 1fr; }
|
|
.drift-grid { grid-template-columns: 1fr; }
|
|
.try-stack { grid-template-columns: 1fr; }
|
|
|
|
.theatre-frame { grid-template-columns: 1fr; gap: 1rem; }
|
|
.agent-panel { min-height: 200px; }
|
|
.pool { min-height: 200px; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
body { font-size: 16px; }
|
|
.section { padding: 3.5rem 0; }
|
|
.cta { padding: 4.5rem 0 4rem; }
|
|
|
|
.hero { padding: 3rem 0 2rem; }
|
|
.hero-sub { font-size: 1.02rem; }
|
|
|
|
.container { padding: 0 1.25rem; }
|
|
|
|
.site-header nav { gap: 0.75rem; font-size: 0.86rem; }
|
|
.site-header nav a:not(.nav-cta) { display: none; }
|
|
.site-header nav .nav-cta { padding: 0.4rem 0.8rem; }
|
|
|
|
.glossary .gloss-header,
|
|
.glossary .gloss-row { grid-template-columns: 1fr; gap: 0.35rem; }
|
|
.glossary .gloss-row { padding: 1rem 0; }
|
|
.glossary .gloss-row .git-term { font-size: 0.82rem; color: var(--paper-dim); }
|
|
|
|
.struct-tree .tline { grid-template-columns: 1fr; gap: 0.2rem; }
|
|
|
|
.terminal .term-body { padding: 1rem 1.1rem 1.2rem; font-size: 0.82rem; }
|
|
|
|
.try-term:nth-child(1),
|
|
.try-term:nth-child(2) { transform: none; }
|
|
|
|
.footer-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.hero-cta { flex-direction: column; align-items: stretch; }
|
|
.hero-cta .btn { justify-content: center; }
|
|
}
|
|
|
|
/* ── Reduced motion ──────────────────────────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
html { scroll-behavior: auto; }
|
|
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
|
|
.draw-path { stroke-dashoffset: 0; }
|
|
.braid .sway { animation: none; transform: none; }
|
|
.braid .stone-pulse { display: none; }
|
|
.brand-mark .pulse { display: none; }
|
|
.terminal .caret, .md-surface .typing-caret { animation: none; opacity: 0.6; }
|
|
}
|