@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/blkskrn/references/design-system.md

@@ -0,0 +1,637 @@
+# Presentation Base CSS — Merlin Brand Design System
+
+Complete CSS foundation for BLKSKRN presentation slides.
+Copy this into your slide's `<style>` block as the design system base.
+
+---
+
+## Full Base CSS
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Background layers (darkest to lightest) */
+  --mc-bg-base: #06080f;
+  --mc-bg-surface: #0c1018;
+  --mc-bg-card: #111622;
+  --mc-bg-elevated: #182034;
+
+  /* Text hierarchy */
+  --mc-text-primary: #f0f4f8;
+  --mc-text-secondary: #94a3b8;
+  --mc-text-tertiary: #64748b;
+  --mc-text-muted: #475569;
+
+  /* Accent colors */
+  --mc-accent: #7dd3fc; /* Crystal blue — primary */
+  --mc-accent-dim: rgba(125, 211, 252, 0.12);
+  --mc-info: #a78bfa; /* Violet — secondary */
+  --mc-success: #34d399; /* Emerald — positive */
+  --mc-warning: #fbbf24; /* Amber — caution */
+  --mc-danger: #f87171; /* Red — error/critical */
+
+  /* Borders */
+  --mc-border: #1e293b;
+
+  /* Easing curves */
+  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+body {
+  background: var(--mc-bg-base);
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color: var(--mc-text-primary);
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+```
+
+---
+
+## Slide Layout Components
+
+```css
+/* Slide container — fills entire viewport */
+.slide {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Padded content area */
+.slide-pad {
+  padding: 56px 64px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Slide number badge (bottom-right) */
+.slide-num {
+  position: absolute;
+  bottom: 24px;
+  right: 32px;
+  font-size: 11px;
+  color: var(--mc-text-muted);
+  font-weight: 500;
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+}
+```
+
+---
+
+## Brand Elements
+
+```css
+/* Top brand line — 3px gradient */
+.brand-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #7dd3fc 0%, #a78bfa 50%, #7dd3fc 100%);
+}
+
+/* Title slide ambient background */
+.title-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      ellipse at 70% 40%,
+      rgba(125, 211, 252, 0.06) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse at 30% 80%,
+      rgba(167, 139, 250, 0.04) 0%,
+      transparent 50%
+    );
+}
+
+/* Logo mark — gradient square with letter */
+.logo-mark {
+  width: 72px;
+  height: 72px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #a78bfa 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  font-weight: 800;
+  color: #06080f;
+  box-shadow: 0 0 40px rgba(125, 211, 252, 0.2);
+  flex-shrink: 0;
+}
+
+/* Subtle grid background */
+.grid-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-image:
+    linear-gradient(rgba(125, 211, 252, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(125, 211, 252, 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
+}
+```
+
+---
+
+## Typography
+
+```css
+/* Section label — small uppercase header */
+.section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--mc-accent);
+  margin-bottom: 8px;
+}
+
+/* Slide title */
+.slide-title {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--mc-text-primary);
+  margin-bottom: 6px;
+}
+
+/* Slide subtitle */
+.slide-subtitle {
+  font-size: 14px;
+  color: var(--mc-text-secondary);
+  font-weight: 400;
+  margin-bottom: 32px;
+}
+
+/* Hero title (title slide) */
+.hero-title {
+  font-size: 52px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+/* Gradient text effect */
+.text-gradient {
+  background: linear-gradient(135deg, #f0f4f8 0%, #7dd3fc 60%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+```
+
+---
+
+## Card Components
+
+```css
+/* Standard feature card */
+.feat-card {
+  background: var(--mc-bg-card);
+  border: 1px solid var(--mc-border);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+/* Card with accent top border */
+.feat-card-accent {
+  background: var(--mc-bg-card);
+  border: 1px solid var(--mc-border);
+  border-radius: 10px;
+  padding: 20px;
+  border-top: 2px solid var(--mc-accent);
+}
+
+/* Card title */
+.card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--mc-text-primary);
+  margin-bottom: 6px;
+}
+
+/* Card body text */
+.card-body {
+  font-size: 11px;
+  color: var(--mc-text-tertiary);
+  line-height: 1.5;
+}
+
+/* Stat card (big number + label) */
+.stat-card {
+  background: var(--mc-bg-card);
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--mc-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+  font-size: 10px;
+  color: var(--mc-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-top: 4px;
+}
+```
+
+---
+
+## Badges & Tags
+
+```css
+/* Version badge */
+.badge {
+  display: inline-flex;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.badge-crystal {
+  background: rgba(125, 211, 252, 0.15);
+  color: #7dd3fc;
+  border: 1px solid rgba(125, 211, 252, 0.3);
+}
+
+.badge-violet {
+  background: rgba(167, 139, 250, 0.15);
+  color: #a78bfa;
+  border: 1px solid rgba(167, 139, 250, 0.3);
+}
+
+.badge-emerald {
+  background: rgba(52, 211, 153, 0.15);
+  color: #34d399;
+  border: 1px solid rgba(52, 211, 153, 0.3);
+}
+
+.badge-amber {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+  border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+.badge-red {
+  background: rgba(248, 113, 113, 0.15);
+  color: #f87171;
+  border: 1px solid rgba(248, 113, 113, 0.3);
+}
+```
+
+---
+
+## Layout Utilities
+
+```css
+/* Flex row with gap */
+.row {
+  display: flex;
+  gap: 16px;
+}
+.row-tight {
+  display: flex;
+  gap: 8px;
+}
+.row-wide {
+  display: flex;
+  gap: 24px;
+}
+
+/* Grid layouts */
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+/* Split layout (diagram + details) */
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  flex: 1;
+}
+
+/* Center content */
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+```
+
+---
+
+## Ambient Effects
+
+```css
+/* Orb — blurred circle for depth. Position with inline styles. */
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  filter: blur(80px);
+  opacity: 0;
+  animation: orbAppear 2s ease-out forwards;
+}
+.orb-crystal {
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(
+    circle,
+    rgba(125, 211, 252, 0.12) 0%,
+    transparent 70%
+  );
+}
+.orb-violet {
+  width: 250px;
+  height: 250px;
+  background: radial-gradient(
+    circle,
+    rgba(167, 139, 250, 0.1) 0%,
+    transparent 70%
+  );
+}
+.orb-emerald {
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(
+    circle,
+    rgba(52, 211, 153, 0.08) 0%,
+    transparent 70%
+  );
+}
+@keyframes orbAppear {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+```
+
+```html
+<!-- Place orbs inside .slide, before .slide-pad -->
+<div class="orb orb-crystal" style="top:-80px;right:-60px;"></div>
+<div
+  class="orb orb-violet"
+  style="bottom:-40px;left:-30px;animation-delay:0.5s;"
+></div>
+```
+
+---
+
+## Animated Brand Line
+
+```css
+/* Sweep-in animation on brand line */
+.brand-line {
+  transform: scaleX(0);
+  transform-origin: left;
+  animation: sweepIn 1.2s var(--ease-enter) 0.2s forwards;
+}
+@keyframes sweepIn {
+  to {
+    transform: scaleX(1);
+  }
+}
+```
+
+---
+
+## Counter Animation (JavaScript)
+
+For stat cards with animated numbers:
+
+```html
+<div class="stat-value" id="s1">0</div>
+<script>
+  /* NOTE: This function is already included in slide-base.html template.
+   Only use this snippet if building slides WITHOUT the base template. */
+  function animateCounter(id, target, delay) {
+    setTimeout(function () {
+      var el = document.getElementById(id);
+      if (!el) return;
+      var start = performance.now();
+      function tick(now) {
+        var p = Math.min((now - start) / 1500, 1);
+        el.textContent = Math.round(target * (1 - Math.pow(1 - p, 3)));
+        if (p < 1) requestAnimationFrame(tick);
+      }
+      requestAnimationFrame(tick);
+    }, delay || 800);
+  }
+  animateCounter("s1", 42, 1000);
+</script>
+```
+
+---
+
+## Fill-Screen Utilities
+
+```css
+/* Fill remaining space in slide-pad */
+.fill {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.fill-center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.fill-grid {
+  flex: 1;
+  display: grid;
+  align-content: center;
+}
+```
+
+---
+
+## Additional Animation Classes
+
+```css
+/* Card entrance — rise + subtle scale */
+.card-enter {
+  opacity: 0;
+  transform: translateY(20px) scale(0.96);
+  animation: cardEnter 0.5s var(--ease-enter) forwards;
+}
+@keyframes cardEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Progress bar growth */
+.grow-bar {
+  transform: scaleX(0);
+  transform-origin: left;
+  animation: growBar 1.5s var(--ease-enter) forwards;
+}
+@keyframes growBar {
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* Breathing glow on card borders */
+.glow-pulse {
+  position: relative;
+}
+.glow-pulse::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    rgba(125, 211, 252, 0.15),
+    rgba(167, 139, 250, 0.1)
+  );
+  opacity: 0;
+  animation: glowPulse 3s ease-in-out infinite;
+}
+@keyframes glowPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+/* Logo spin entrance */
+@keyframes logoSpin {
+  0% {
+    opacity: 0;
+    transform: scale(0) rotate(-180deg);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.1) rotate(10deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+    box-shadow: 0 0 60px rgba(125, 211, 252, 0.25);
+  }
+}
+```
+
+---
+
+## Adapting for Project Themes
+
+When recreating a specific project's UI on a slide, override the base
+tokens to match that project's actual theme:
+
+```css
+/* Example: Override for a project using the real Merlin Dashboard theme */
+:root {
+  --mc-bg-base: #0a0a0a; /* from --color-surface */
+  --mc-bg-surface: #141414; /* from --color-surface-raised */
+  --mc-bg-card: #1e1e1e; /* from --color-surface-overlay */
+  --mc-border: #262626; /* from --color-border-subtle */
+  --mc-text-primary: #fafafa; /* from --color-text-primary */
+  --mc-text-secondary: #a3a3a3; /* from --color-text-secondary */
+  --mc-accent: #7dd3fc; /* from --color-crystal */
+}
+```
+
+Read the target project's CSS files (index.css, tailwind.config, globals.css)
+to extract the exact values.
+
+---
+
+## Footer Pattern
+
+```css
+.slide-footer {
+  position: absolute;
+  bottom: 24px;
+  left: 64px;
+  font-size: 10px;
+  color: var(--mc-text-muted);
+}
+```
+
+```html
+<span class="slide-footer"
+  >© 2026 &lt;your-company&gt; · Merlin AI Framework</span
+>
+<span class="slide-num">01 / 16</span>
+```
+
+---
+
+## Accessibility
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```