@import "tailwindcss"; @plugin "daisyui"; @plugin "daisyui/theme" { name: "mcaverify"; default: true; color-scheme: light; --color-primary: #12915a; --color-primary-content: #ffffff; --color-secondary: #0e7a4c; --color-accent: #1f63d6; /* Neutral (slate) for avatars/chrome so not everything reads as green. */ --color-neutral: #334155; --color-neutral-content: #ffffff; /* Near-neutral bases (a whisper of green) instead of the previous green wash. */ --color-base-100: #ffffff; --color-base-200: #f5f6f7; --color-base-300: #e4e7ea; --color-base-content: #1c2b25; --font-sans: "Archivo", Arial, sans-serif; } /* Categorical chart palette. Validated for CVD + contrast against surface #ffffff (worst adjacent CVD ΔE 9.1, normal-vision 19.6). Assign in FIXED slot order, never cycled, so a series keeps its hue between charts. Slot 6 is the brand green and is reserved for single-series charts (hbar_chart, the balance sparkline). Slots 3/4/5 fall below 3:1 contrast on white, so any chart using them must carry direct labels or a table beside it — both are present on /platform; keep it that way. Custom properties (not literals) so a future dark theme is a value swap here rather than an edit in every helper. */ :root { --chart-1: #1f63d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #12915a; /* Status tones for SMALL TEXT and thin glyphs. DaisyUI's success/warning/error are tuned as fill colours behind white content: rasterised, they are #00d390 / #fcb700 / #ff637d and measure 1.96 / 1.76 / 2.86:1 as ink on #ffffff — under the 4.5:1 that an 11px delta label needs and under the 3:1 a 2.6-stroke glyph needs. These are the same three meanings darkened to pass: 5.38 / 5.02 / 6.47:1. Use them wherever the colour IS the text; keep the DaisyUI tokens for badge and alert backgrounds, where they are legible. */ --tone-up: #0f7a4a; --tone-warn: #b45309; --tone-down: #b91c1c; } /* Rendered markdown (credit memos) — scoped so we don't need the typography plugin. */ .markdown-body h1 { font-size: 1.25rem; font-weight: 800; margin: 0.75rem 0 0.25rem; } .markdown-body h2 { font-size: 1.05rem; font-weight: 700; margin: 0.75rem 0 0.25rem; } .markdown-body h3 { font-size: 0.95rem; font-weight: 700; margin: 0.5rem 0 0.25rem; } .markdown-body p { margin: 0.35rem 0; } .markdown-body ul { list-style: disc; padding-left: 1.25rem; margin: 0.35rem 0; } .markdown-body ol { list-style: decimal; padding-left: 1.25rem; margin: 0.35rem 0; } .markdown-body li { margin: 0.15rem 0; } .markdown-body strong { font-weight: 700; } .markdown-body em { font-style: italic; } .markdown-body table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85rem; } .markdown-body th, .markdown-body td { border: 1px solid var(--color-base-300); padding: 0.25rem 0.5rem; text-align: left; } .markdown-body code { background: var(--color-base-200); padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.85em; } .markdown-body a { color: var(--color-primary); text-decoration: underline; } /* Collapsible sidebar rail (desktop only; mobile keeps the full drawer). Toggled by the `sidebar-collapsed` class on — see sidebar.js. */ #app-sidebar { transition: width 0.18s ease; } .sidebar-toggle svg { transition: transform 0.18s ease; } @media (min-width: 1024px) { /* --- shell: narrow rail, hide expanded-only chrome (menu-title kept: it becomes a labeled divider, see below) --- */ html.sidebar-collapsed #app-sidebar { width: 4.75rem; } html.sidebar-collapsed #app-sidebar .nav-label, html.sidebar-collapsed #app-sidebar .sidebar-logo-full { display: none; } html.sidebar-collapsed #app-sidebar .sidebar-logo-mark { display: inline-flex; } html.sidebar-collapsed #app-sidebar .sidebar-head { flex-direction: column; gap: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); } /* --- list rhythm: centered column, tight consistent gaps --- */ html.sidebar-collapsed #app-sidebar .menu { align-items: center; gap: 0.25rem; padding: 0.5rem 0.375rem; } html.sidebar-collapsed #app-sidebar .menu li { width: auto; } /* --- uniform 40px rounded-square hit-targets; muted icon + real hover; anchor for badge overlay --- */ html.sidebar-collapsed #app-sidebar .menu li > a { position: relative; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border-radius: 0.625rem; /* rounded-square tile (theme --radius-field is only 0.25rem, too tight for a 40px tile) */ color: color-mix(in oklch, var(--color-base-content) 55%, transparent); transition: background-color 0.12s ease, color 0.12s ease; } html.sidebar-collapsed #app-sidebar .menu li > a:hover, html.sidebar-collapsed #app-sidebar .menu li > a:focus-visible { background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent); color: var(--color-base-content); } /* --- active: faint primary tint + short primary accent bar (restrained, not a solid pill) --- */ html.sidebar-collapsed #app-sidebar .menu li > a.active, html.sidebar-collapsed #app-sidebar .menu li > a.active:hover { background-color: color-mix(in oklch, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 400; /* neutralize the expanded-state font-semibold */ } html.sidebar-collapsed #app-sidebar .menu li > a.active::before { content: ""; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%); width: 0.1875rem; height: 1.25rem; border-radius: 999px; background-color: var(--color-primary); } /* --- badge -> corner-dot overlay on the icon (kills ml-auto flow) --- */ html.sidebar-collapsed #app-sidebar .menu li > a .badge { position: absolute; top: 0.25rem; right: 0.25rem; margin: 0; height: 1rem; min-height: 1rem; min-width: 1rem; padding: 0 0.1875rem; font-size: 0.625rem; line-height: 1; border: 2px solid var(--color-base-200); /* punch-out ring against the rail bg */ border-radius: 999px; pointer-events: none; } /* --- section titles become slim labeled dividers instead of vanishing --- */ html.sidebar-collapsed #app-sidebar .menu-title { display: block; width: 100%; margin: 0.4rem 0 0.2rem; padding: 0.2rem 0 0; text-align: center; border-top: 1px solid var(--color-base-300); font-size: 0; /* suppress the full word; keeps the real text for screen readers */ } html.sidebar-collapsed #app-sidebar .menu-title::after { content: attr(data-collapsed-label); display: block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--color-base-content) 45%, transparent); } } /* MCATRACK brand-blue button (their primary UI blue #2678bf) — used for the "Send to MCATRACK" action so it reads as a hand-off to the MCATRACK system. */ .btn-mcatrack { background-color: #2678bf; border-color: #2678bf; color: #fff; } .btn-mcatrack:hover { background-color: #1f6199; border-color: #1f6199; } /* Frozen funder column on the two wide platform-metrics tables (22 columns, 9 features). The name is the subject of every number in its row, so losing it to a horizontal scroll makes the row unreadable. The pinned cell needs its OWN opaque background because the scrolling columns pass underneath it — but a hardcoded background would cover the row's hover and tint, visibly detaching the frozen cell from the row it belongs to. So the row owns the colour via --pin-bg and the cell only reads it. */ .metrics-pin { position: sticky; left: 0; background-color: var(--pin-bg, var(--color-base-100)); z-index: 10; } /* The corner cell is pinned on BOTH axes, so it has to outrank the sticky header row and the pinned column or whichever it ties with will scroll over it. */ thead .metrics-pin { z-index: 20; } .table tbody tr.hover:hover { --pin-bg: var(--color-base-200); } /* The "Vendor spend not attributable to a funder" row carries bg-base-200/60. */ .table tr.pin-tinted { --pin-bg: color-mix(in oklch, var(--color-base-200) 60%, var(--color-base-100)); }