/* ===== doc.css — shared "documentation article" layout ===== Used by the 10 content pages (architecture, core-engine, data-model, demo-scope, learning, memory-lifecycle, modal-zones, primitives, safety, vision). */ /* Narrower reading column for article pages. */ .container { max-width: 860px; } /* ===== Page header ===== The decorative radial gradient in ::before is an accent per topic. Each doc page sets ; default = cyan/purple. */ .page-header { padding: 140px 0 40px; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 400px; pointer-events: none; } /* default (architecture / vision) */ body .page-header::before { background: radial-gradient(ellipse 50% 50% at 30% 40%, rgba(0, 212, 255, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 70% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%); } body.accent-purple .page-header::before { background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 70%); } body.accent-purple-cyan .page-header::before { background: radial-gradient(ellipse 50% 50% at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 70% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } body.accent-purple-cyan-2 .page-header::before { background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 20% 60%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } body.accent-green .page-header::before { background: radial-gradient(ellipse 50% 50% at 40% 40%, rgba(16, 185, 129, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 70% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } body.accent-pink .page-header::before { background: radial-gradient(ellipse 50% 50% at 60% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 20% 60%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } body.accent-amber .page-header::before { background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(245, 158, 11, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 20% 60%, rgba(139, 92, 246, 0.04) 0%, transparent 70%); } body.accent-muted .page-header::before { background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(107, 122, 141, 0.05) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 20% 60%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } body.accent-red .page-header::before { background: radial-gradient(ellipse 50% 50% at 40% 40%, rgba(239, 68, 68, 0.04) 0%, transparent 70%), radial-gradient(ellipse 45% 50% at 60% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 70%); } .page-header h1 { font: 700 clamp(32px, 4.5vw, 48px)/1.1 var(--font-d); letter-spacing: -0.03em; color: #fff; margin-bottom: 16px; } .page-header .subtitle { font-size: 18px; line-height: 1.8; color: var(--fg2); max-width: 640px; } /* ===== Breadcrumb ===== */ .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 32px; font-family: var(--font-m); } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--cyan); } .breadcrumb .sep { opacity: 0.4; } /* ===== Article content ===== */ .content { padding: 0 0 100px; } .content p { font-size: 16px; line-height: 1.85; color: var(--fg2); margin-bottom: 20px; } .content p:last-child { margin-bottom: 0; } /* ===== Callout ===== */ .callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 28px; margin: 28px 0; } .callout p { margin: 0 0 8px; font-size: 15px; line-height: 1.75; } .callout p:last-child { margin-bottom: 0; } .callout-accent { border-left: 3px solid var(--cyan); } .callout strong { color: #fff; } /* ===== Prev / next navigation cards ===== */ .nav-card { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); } .nav-card a { flex: 1; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: border-color 0.3s, transform 0.3s; } .nav-card a:hover { transform: translateY(-2px); border-color: rgba(0, 212, 255, 0.15); } .nav-card .nc-label { font: 500 12px/1 var(--font-m); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .nav-card .nc-title { font: 600 15px/1.3 var(--font-d); color: #fff; } /* ===== Responsive ===== */ @media (max-width: 640px) { .page-header { padding: 110px 0 32px; } .nav-card { flex-direction: column; } }