@import "tailwindcss"; @source "../../../../vue/toolkit/src/**/demo.vue"; @source "../../../../vue/primitives/src/**/demo.vue"; @source "../../../../core/stdlib/src/**/demo.vue"; @source "../../../../core/platform/src/**/demo.vue"; /* Class-based dark mode (toggled on ) */ @custom-variant dark (&:where(.dark, .dark *)); @theme { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif; --radius-card: 0.5rem; } /* ── Semantic design tokens — ink on warm paper, signal-orange instruments ── The site reads like a tool-maker's field manual: warm neutral surfaces, hairline rules, international-orange accents, code-comment labels. */ :root { --bg: #faf8f3; --bg-subtle: #f4f1e8; --bg-elevated: #fffdf8; --bg-inset: #eeeadf; --border: #e5dfd0; --border-strong: #cfc6b1; --fg: #211e18; --fg-muted: #5d574b; --fg-subtle: #93897a; --accent: #d9480f; --accent-hover: #bf3f0d; --accent-fg: #fffdf8; --accent-subtle: #f7e7d8; --accent-text: #c2410c; --header-bg: rgba(250, 248, 243, 0.82); --ring: rgba(217, 72, 15, 0.35); --shadow-card: 0 1px 2px rgba(56, 44, 28, 0.05), 0 1px 3px rgba(56, 44, 28, 0.07); color-scheme: light; } .dark { --bg: #161310; --bg-subtle: #1b1813; --bg-elevated: #211d17; --bg-inset: #2a251c; --border: #322c22; --border-strong: #4a4231; --fg: #ece7db; --fg-muted: #b2a995; --fg-subtle: #7d7363; --accent: #ff7d33; --accent-hover: #ff9a59; --accent-fg: #1d0e04; --accent-subtle: #3a2415; --accent-text: #ff9c63; --header-bg: rgba(22, 19, 16, 0.82); --ring: rgba(255, 125, 51, 0.4); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); color-scheme: dark; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { background-color: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } code, pre, kbd { font-family: var(--font-mono); } ::selection { background-color: var(--accent-subtle); color: var(--accent-text); } /* Subtle, theme-aware scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; } *::-webkit-scrollbar-track { background: transparent; } /* ── Identity helpers ─────────────────────────────────────────────────────── */ /* Section labels styled as code comments: `// sensors` */ .comment-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: lowercase; color: var(--fg-subtle); } .comment-label::before { content: '// '; color: var(--accent-text); opacity: 0.75; } /* Engineering-grid backdrop for heroes, faded out radially */ .blueprint { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%); } /* Staggered rise-in for card grids (landing / package index) */ @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .stagger > * { animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .stagger > *:nth-child(1) { animation-delay: 0.03s; } .stagger > *:nth-child(2) { animation-delay: 0.07s; } .stagger > *:nth-child(3) { animation-delay: 0.11s; } .stagger > *:nth-child(4) { animation-delay: 0.15s; } .stagger > *:nth-child(5) { animation-delay: 0.19s; } .stagger > *:nth-child(6) { animation-delay: 0.23s; } .stagger > *:nth-child(7) { animation-delay: 0.27s; } .stagger > *:nth-child(8) { animation-delay: 0.31s; } .stagger > *:nth-child(n+9) { animation-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } } /* Shiki dual-theme: switch to dark colors under .dark */ .dark .shiki, .dark .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } /* Code blocks sit on the warm surface, not on the theme's own background */ .shiki { background-color: transparent !important; } /* ── Markdown (guide) typography ──────────────────────────────────────────── */ .prose-docs { color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.7; } .prose-docs > :first-child { margin-top: 0; } .prose-docs h1 { color: var(--fg); font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; } .prose-docs h2 { color: var(--fg); font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); scroll-margin-top: 5rem; } .prose-docs h3 { color: var(--fg); font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 0.75rem; scroll-margin-top: 5rem; } .prose-docs p { margin: 1rem 0; } .prose-docs a { color: var(--accent-text); text-decoration: none; font-weight: 500; border-bottom: 1px dotted var(--border-strong); } .prose-docs a:hover { border-bottom-color: var(--accent-text); } .prose-docs strong { color: var(--fg); font-weight: 600; } .prose-docs ul, .prose-docs ol { margin: 1rem 0; padding-left: 1.5rem; } .prose-docs ul { list-style: disc; } .prose-docs ol { list-style: decimal; } .prose-docs li { margin: 0.375rem 0; } .prose-docs li::marker { color: var(--accent-text); } .prose-docs blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.25rem 0; color: var(--fg-muted); } .prose-docs hr { border: 0; border-top: 1px dashed var(--border-strong); margin: 2rem 0; } /* inline code */ .prose-docs :not(pre) > code { font-size: 0.85em; background-color: var(--bg-inset); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.1rem 0.35rem; color: var(--fg); } /* fenced code (shiki replaces, but style the fallback + wrapper) */ .prose-docs pre { background-color: var(--bg-subtle); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin: 1.25rem 0; font-size: 0.85rem; line-height: 1.6; } .prose-docs pre code { background: none; border: 0; padding: 0; } .prose-docs table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.875rem; } .prose-docs th, .prose-docs td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .prose-docs th { background-color: var(--bg-subtle); color: var(--fg); font-weight: 600; font-family: var(--font-mono); font-size: 0.8125rem; } /* Page-enter fade for route transitions */ .page-enter-active, .page-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; } .page-enter-from { opacity: 0; transform: translateY(4px); } .page-leave-to { opacity: 0; }