@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; } } } /* 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; } }