@import "tailwindcss"; @plugin "@tailwindcss/typography"; /* Dark mode is opt-in via a `dark` class on , set by the theme Stimulus controller. */ @variant dark (&:where(.dark, .dark *)); /* ── Module cards ────────────────────────────────────────────────────── A wash of the module's own colour instead of a coloured stripe. Every card sets one custom property — `--accent` — and this rule does the rest, which is how four colours cost one rule instead of four sets of Tailwind classes the scanner would have to be told about. The tint comes from the layer's opacity rather than from a `color-mix` with a variable percentage: the CSS optimiser folds that one away and the gradient comes out at full strength. Opacity also animates without help, so the wash blooms on hover instead of snapping. The glow lives on ::before so it paints over the card's own background but under its content, which sits in a positioned wrapper above it. */ .module-card { position: relative; } .module-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: /* the broad wash behind the icon and the title */ radial-gradient(120% 80% at 50% 0%, var(--accent, transparent) 0%, transparent 62%), /* a corner each, so the card has a direction rather than a halo */ radial-gradient(85% 65% at 0% 0%, var(--accent, transparent) 0%, transparent 55%), radial-gradient(75% 60% at 100% 100%, var(--accent, transparent) 0%, transparent 60%); opacity: 0.3; transition: opacity 0.35s ease; } .module-card:hover::before { opacity: 0.52; } /* Dark ground takes a lighter hand: the same wash over slate reads twice as strong as it does over white. */ :where(.dark) .module-card::before { opacity: 0.2; } :where(.dark) .module-card:hover::before { opacity: 0.36; } /* A card nobody can open wears no colour at all: the wash is what says "this one is live and it is yours". */ .module-card--muted { --accent: transparent; } /* ── People ──────────────────────────────────────────────────────────── A person is written one way everywhere in the product: the display face, heavier than the sentence around it, tracked a touch tighter, and never in full — "Maria P." rather than "Maria Popescu". The weight is the signal. Body copy here is 400-500, so a name at 700 reads as a person before it is read as a word, which is what makes a name scannable in a list of forty rows. The tighter tracking keeps the extra weight from taking more room than the sentence can spare. One class, so a name cannot be styled a second way somewhere else. */ .person-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: normal; } /* Toast notification slide-in animation */ @keyframes slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .animate-slide-in { animation: slide-in 0.3s ease-out; } /* 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; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Clarity brand palette — see MIV_Clarity.pdf "Paleta de culori". Primary = Clarity Blue. brand-400 is the dark-mode accent. */ --color-brand-50: #e8f0ff; --color-brand-100: #cfe0ff; --color-brand-400: #4d8bff; --color-brand-500: #0B5BFC; --color-brand-600: #0A4FD1; --color-brand-700: #0941a8; --color-brand-yellow: #E1C907; --color-brand-teal: #00B96B; --color-brand-purple: #8B11FE; --color-brand-blue: #0B5BFC; /* ── Corner radius ────────────────────────────────────────────────── Two knobs shape the whole application: how sharp a panel is, and how sharp the things sitting inside one are. Everything else is mapped onto them. This works without touching a single view because Tailwind v4 compiles every radius utility to `border-radius: var(--radius-*)`. The 306 `rounded-2xl` panels and the 858 `rounded-lg` controls already in the markup follow these two lines — and follow them at runtime, which is what makes a corner theme possible at all (see the [data-corners] block below). `rounded-full` is deliberately not in here: Tailwind hardcodes it, so avatars, dots and pills stay round whatever the theme does. That is the correct behaviour — a pill is a shape, not a corner treatment. */ --radius-panel: 4px; /* cards, panels, dialogs, dropdowns */ --radius-control: 2px; /* buttons, inputs, chips, badges */ --radius-xs: var(--radius-control); --radius-sm: var(--radius-control); --radius-md: var(--radius-control); --radius-lg: var(--radius-control); --radius-xl: var(--radius-panel); --radius-2xl: var(--radius-panel); --radius-3xl: var(--radius-panel); --radius-4xl: var(--radius-panel); /* MIV dark backgrounds */ --color-brand-bg: #020618; --color-brand-bg2: #0F172B; } /* Corner themes. Redefining the two knobs restyles every panel, button and input in the app — no rebuild, no markup change, because the utilities resolve `var()` at paint time. Set the attribute on to try one: document.documentElement.dataset.corners = "soft" Leaving the attribute off keeps the values defined in @theme above. */ :root[data-corners="square"] { --radius-panel: 0; --radius-control: 0; } :root[data-corners="sharp"] { --radius-panel: 4px; --radius-control: 2px; } :root[data-corners="soft"] { --radius-panel: 12px; --radius-control: 8px; } :root[data-corners="round"] { --radius-panel: 20px; --radius-control: 12px; } /* 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: var(--radius-control); --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: #0B5BFC; @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: #0B5BFC; 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: #0B5BFC; text-decoration: underline; text-underline-offset: 2px; } .guide-content a:hover { color: #0A4FD1; } :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 #0B5BFC; 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: #0B5BFC; padding: 0.125rem 0.375rem; border-radius: var(--radius-control); 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: var(--radius-panel); 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: #0B5BFC; } :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: var(--radius-panel); 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; } /* ── @Mention autocomplete dropdown + inline mention styling ────── */ .mention-dropdown { overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-panel); box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 9999; } :where(.dark) .mention-dropdown { background: #0f172a; border-color: #334155; } .mention-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.1s; } .mention-dropdown-item:hover, .mention-dropdown-active { background: #f1f5f9; } :where(.dark) .mention-dropdown-item:hover, :where(.dark) .mention-dropdown-active { background: #1e293b; } .mention-dropdown-name { font-size: 0.8125rem; font-weight: 500; color: #1e293b; } :where(.dark) .mention-dropdown-name { color: #e2e8f0; } .mention-avatar { width: 24px; height: 24px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .mention-avatar-placeholder { width: 24px; height: 24px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; } /* Inline mention chip — shown in Trix editor + rendered comments */ .mention-chip { display: inline-flex !important; align-items: center !important; gap: 3px !important; background: #ede9fe !important; color: #6d28d9 !important; padding: 1px 6px 1px 2px !important; border-radius: 9999px !important; font-size: 0.8125rem !important; font-weight: 500 !important; line-height: 1.4 !important; vertical-align: middle !important; white-space: nowrap !important; text-decoration: none !important; } :where(.dark) .mention-chip { background: rgba(109, 40, 217, 0.2) !important; color: #c4b5fd !important; } .mention-chip-avatar { width: 18px; height: 18px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .mention-chip-initials { width: 18px; height: 18px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: #0B5BFC; flex-shrink: 0; } .mention-chip-name { font-weight: 600; } /* Trix attachment wrapper — inline for mention chips (editor + rendered) */ trix-editor figure.attachment:has(.mention-chip), .trix-content figure:has(.mention-chip), figure.attachment:has(.mention-chip) { display: inline !important; margin: 0 !important; padding: 0 !important; max-width: none !important; } trix-editor figure.attachment:has(.mention-chip) figcaption, .trix-content figure:has(.mention-chip) figcaption, figure.attachment:has(.mention-chip) figcaption { display: none !important; } action-text-attachment:has(.mention-chip) { display: inline !important; } /* Fallback: render content attribute from action-text-attachment */ action-text-attachment[content-type="application/vnd.clarity.mention"] { display: inline !important; } /* Override actiontext.css reset that kills prose margins/paddings */ .trix-content.prose * { margin: revert; padding: revert; } .trix-content.prose h1, .trix-content.prose h2, .trix-content.prose h3, .trix-content.prose h4 { font-weight: 600; } s, del, .trix-content s, .trix-content del, .tiptap-content s, .tiptap-content del, .prose s, .prose del { text-decoration: line-through !important; } u, .trix-content u, .tiptap-content u, .prose u { text-decoration: underline !important; } .trix-content.prose table { border-collapse: collapse; width: 100%; } .trix-content.prose th, .trix-content.prose td { border: 1px solid #e2e8f0; padding: 0.375rem 0.625rem; text-align: left; } .trix-content.prose th { background: #f8fafc; font-weight: 600; } :where(.dark) .trix-content.prose th, :where(.dark) .trix-content.prose td { border-color: #334155; } :where(.dark) .trix-content.prose th { background: #1e293b; } /* ── TipTap editor styles ──────────────────────────────────────────── */ .tiptap-content { caret-color: #0B5BFC; } .tiptap-content p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: #94a3b8; pointer-events: none; height: 0; } .tiptap-content table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; } .tiptap-content th, .tiptap-content td { border: 1px solid #e2e8f0; padding: 0.375rem 0.625rem; text-align: left; vertical-align: top; min-width: 80px; position: relative; } .tiptap-content th { background: #f8fafc; font-weight: 600; } :where(.dark) .tiptap-content th, :where(.dark) .tiptap-content td { border-color: #334155; } :where(.dark) .tiptap-content th { background: #1e293b; } .tiptap-content td.selectedCell, .tiptap-content th.selectedCell { background: rgba(38, 77, 74, 0.08); } :where(.dark) .tiptap-content td.selectedCell, :where(.dark) .tiptap-content th.selectedCell { background: rgba(52, 211, 153, 0.1); } .tiptap-content .tableWrapper { overflow-x: auto; } .tiptap-content hr { border: none; border-top: 2px solid #e2e8f0; margin: 1.5rem 0; } :where(.dark) .tiptap-content hr { border-top-color: #334155; } .tiptap-content ul[data-type="taskList"], .trix-content ul[data-type="taskList"], .prose ul[data-type="taskList"] { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .tiptap-content ul[data-type="taskList"] li, .trix-content ul[data-type="taskList"] li, .prose ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.375rem; padding-left: 0 !important; } .tiptap-content ul[data-type="taskList"] li label, .trix-content ul[data-type="taskList"] li label, .prose ul[data-type="taskList"] li label { flex-shrink: 0; display: flex; align-items: center; margin-top: 0.85rem; } .tiptap-content ul[data-type="taskList"] li label input[type="checkbox"], .trix-content ul[data-type="taskList"] li label input[type="checkbox"], .prose ul[data-type="taskList"] li label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #0B5BFC; cursor: pointer; } .tiptap-content ul[data-type="taskList"] li div, .trix-content ul[data-type="taskList"] li div, .prose ul[data-type="taskList"] li div { flex: 1; } /* ── Link color for rich text content (Trix body, prose) ───────────── */ .trix-content a:not(.mention), .prose a:not(.mention) { color: #4f46e5; /* indigo-600 */ text-decoration: underline; text-underline-offset: 2px; } .trix-content a:not(.mention):hover, .prose a:not(.mention):hover { color: #4338ca; /* indigo-700 */ } :where(.dark) .trix-content a:not(.mention), :where(.dark) .prose a:not(.mention) { color: #a5b4fc; /* indigo-300 */ } :where(.dark) .trix-content a:not(.mention):hover, :where(.dark) .prose a:not(.mention):hover { color: #c7d2fe; /* indigo-200 */ } /* Legacy plain-text mention links (older approval comments) */ a.mention, .trix-content a.mention { background: #ede9fe; color: #6d28d9; padding: 1px 4px; border-radius: var(--radius-control); font-weight: 500; text-decoration: none; cursor: default; } :where(.dark) a.mention, :where(.dark) .trix-content a.mention { background: rgba(109, 40, 217, 0.2); color: #c4b5fd; } /* ── Tag picker — chip input with autocomplete ───────────────────── */ .tag-picker-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; min-height: 42px; border: 1px solid #cbd5e1; border-radius: var(--radius-control); background: #fff; cursor: text; transition: border-color 0.15s, box-shadow 0.15s; } .tag-picker-wrapper:focus-within { border-color: #0B5BFC; box-shadow: 0 0 0 2px rgba(38, 77, 74, 0.2); } :where(.dark) .tag-picker-wrapper { background: #020617; border-color: #334155; } :where(.dark) .tag-picker-wrapper:focus-within { border-color: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15); } .tag-picker-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 8px; border-radius: 9999px; background: #f1f5f9; color: #334155; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } :where(.dark) .tag-picker-chip { background: #1e293b; color: #e2e8f0; } .tag-picker-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 9999px; font-size: 12px; line-height: 1; color: #94a3b8; cursor: pointer; border: none; background: none; padding: 0; } .tag-picker-chip-x:hover { color: #ef4444; } .tag-picker-input { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; font-size: 0.8125rem; color: #1e293b; padding: 2px 4px; } :where(.dark) .tag-picker-input { color: #e2e8f0; } .tag-picker-input::placeholder { color: #94a3b8; } .tag-picker-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-panel); box-shadow: 0 8px 20px rgba(0,0,0,0.08); z-index: 50; margin-top: 4px; } :where(.dark) .tag-picker-dropdown { background: #0f172a; border-color: #334155; } .tag-picker-dropdown-item { padding: 6px 10px; font-size: 0.8125rem; color: #334155; cursor: pointer; } .tag-picker-dropdown-item:hover, .tag-picker-dropdown-active { background: #f1f5f9; } :where(.dark) .tag-picker-dropdown-item { color: #e2e8f0; } :where(.dark) .tag-picker-dropdown-item:hover, :where(.dark) .tag-picker-dropdown-active { background: #1e293b; } /* 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; } }