@import "tailwindcss"; /* Dark mode is opt-in via a `dark` class on , set by the theme Stimulus controller. */ @variant dark (&:where(.dark, .dark *)); /* Brand typography. Plus Jakarta Sans is loaded via in the layouts. */ @theme { --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Eventya brand palette — see MIV_Eventya.pdf, chapter 4. */ --color-brand-50: #eaf0ef; --color-brand-100: #cdd9d7; --color-brand-500: #264D4A; --color-brand-600: #1f3f3d; --color-brand-700: #183030; --color-brand-yellow: #D6BD09; --color-brand-coral: #F95741; --color-brand-teal: #17C6A5; } /* Trix toolbar dark-mode override (ported from Stejar / Eventya). Replaces Trix's default black SVG button icons with mask-image so they inherit the surrounding `currentColor` and stay visible in both light and dark mode. */ @import "./trix.css"; /* Pagy pagination nav — Clarity brand theme */ @layer components { .pagy { --H: 160; --S: 33%; --L: 22%; --A: 1; --B: 1; --spacing: 0.125rem; --padding: 0.75rem; --rounding: 0.5rem; --border-width: 0rem; --font-size: 0.8125rem; --font-weight: 500; --line-height: 1.75; --text: hsl(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A)); --text-hover: hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A)); --text-current: hsl(var(--H) var(--S) calc(100% * (var(--B) + 1)) / var(--A)); --background: hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A)); --background-hover: hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A)); --background-current: #264D4A; @apply flex gap-x-[var(--spacing)] font-[var(--font-weight)] text-[length:var(--font-size)] text-[var(--text)] leading-[var(--line-height)]; a:not([role="separator"]) { @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)] border-solid border-[var(--background-current)] border-[length:var(--border-width)]; } a[href]:hover { @apply bg-[var(--background-hover)] text-[var(--text-hover)]; } a:not([href]) { @apply cursor-default; } a[role="link"]:not([aria-current]) { @apply opacity-60; } a[aria-current] { @apply bg-[var(--background-current)] text-white; } } } /* ── User guide (/guide) markdown styles ────────────────────────── Tailwind Typography plugin is not installed, so we hand-roll the minimum formatting needed for the kramdown-rendered guide pages. Scoped under `.guide-content` to avoid leaking into the rest of the app. */ .guide-content { color: #1e293b; line-height: 1.7; font-size: 0.95rem; } :where(.dark) .guide-content { color: #e2e8f0; } .guide-content h1, .guide-content h2, .guide-content h3, .guide-content h4 { font-family: var(--font-display); color: #264D4A; font-weight: 700; line-height: 1.25; } :where(.dark) .guide-content h1, :where(.dark) .guide-content h2, :where(.dark) .guide-content h3, :where(.dark) .guide-content h4 { color: #f1f5f9; } .guide-content > :first-child { margin-top: 0; } .guide-content h1 { font-size: 1.875rem; margin: 0 0 1.25rem; } .guide-content h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; } :where(.dark) .guide-content h2 { border-top-color: #334155; } .guide-content h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; } .guide-content h4 { font-size: 1rem; margin: 1.25rem 0 0.5rem; } .guide-content p { margin: 0 0 1rem; } .guide-content a { color: #264D4A; text-decoration: underline; text-underline-offset: 2px; } .guide-content a:hover { color: #1f3f3d; } :where(.dark) .guide-content a { color: #34d399; } :where(.dark) .guide-content a:hover { color: #6ee7b7; } .guide-content strong { font-weight: 600; color: #0f172a; } :where(.dark) .guide-content strong { color: #f8fafc; } .guide-content ul, .guide-content ol { margin: 0 0 1rem; padding-left: 1.5rem; } .guide-content ul { list-style: disc; } .guide-content ol { list-style: decimal; } .guide-content li { margin: 0.25rem 0; } .guide-content li > ul, .guide-content li > ol { margin: 0.25rem 0; } .guide-content blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid #264D4A; background: #f8fafc; color: #475569; font-style: italic; } :where(.dark) .guide-content blockquote { background: #0f172a; color: #cbd5e1; border-left-color: #34d399; } .guide-content code { background: #f1f5f9; color: #264D4A; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; } :where(.dark) .guide-content code { background: #1e293b; color: #34d399; } .guide-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; font-size: 0.85rem; line-height: 1.5; } .guide-content pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } .guide-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; } .guide-content th, .guide-content td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; } .guide-content th { background: #f8fafc; font-weight: 600; color: #264D4A; } :where(.dark) .guide-content th, :where(.dark) .guide-content td { border-color: #334155; } :where(.dark) .guide-content th { background: #1e293b; color: #f1f5f9; } .guide-content img { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 0.5rem; margin: 1rem 0; display: block; } :where(.dark) .guide-content img { border-color: #334155; } .guide-content hr { margin: 2rem 0; border: 0; border-top: 1px solid #e2e8f0; } :where(.dark) .guide-content hr { border-top-color: #334155; } /* Mermaid subgraph backgrounds — transparent instead of default grey. Mermaid sets inline styles on cluster rects, so !important is needed. */ .mermaid .cluster rect, .mermaid .cluster-alt rect, .mermaid [id*="flowchart-"] .cluster rect { fill: transparent !important; stroke: #e2e8f0 !important; rx: 8 !important; } html.dark .mermaid .cluster rect, html.dark .mermaid .cluster-alt rect, html.dark .mermaid [id*="flowchart-"] .cluster rect { fill: transparent !important; stroke: #334155 !important; } /* Background fill for the verb labels drawn by the turtle-connectors Stimulus controller. The labels sit on top of the SVG flow lines so they need an opaque background to remain readable. */ .turtle-label-bg { fill: #ffffff; } :where(.dark) .turtle-label-bg { fill: #0f172a; /* slate-900 */ } /* Arrow-shaped Turtle facet card. Used on Inputs (left column, middle row) and Outputs (right column, middle row) so the cards visually read as right-pointing arrows. The right-padding leaves room for the clipped triangular tip so the inner content doesn't collide with the slope. Hidden below md because the grid is single-column on mobile and the arrow shape would look odd stacked vertically. */ @media (min-width: 768px) { .turtle-arrow-card { clip-path: polygon( 0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100% ); padding-right: 36px; } }