/* * Praktijk brand color overrides. * * Loaded by the embed page and the public clinic page. Both views set * --brand (and --brand-2) as inline custom properties on from * $praktijk->primaire_kleur / secundaire_kleur. This stylesheet remaps * every blue Tailwind utility used by the clinic / wizard / result / * thanks views onto those variables, so a praktijk's primary color * flows through buttons, links, rings, gradients, and shadows. * * Tints (50/100/400) and shades (700/900) are derived from --brand via * color-mix() — no need to ship per-praktijk CSS. */ /* Backgrounds */ .bg-blue-50, .hover\:bg-blue-50:hover, .bg-blue-50\/30, .bg-blue-50\/40, .bg-blue-50\/50, .bg-blue-50\/80 { background-color: color-mix(in srgb, var(--brand) 8%, white) !important; } .bg-blue-100, .hover\:bg-blue-100:hover, .bg-blue-100\/70 { background-color: color-mix(in srgb, var(--brand) 18%, white) !important; } .bg-blue-600, .hover\:bg-blue-600:hover { background-color: var(--brand) !important; } .bg-blue-700, .hover\:bg-blue-700:hover { background-color: color-mix(in srgb, var(--brand) 82%, black) !important; } /* Text */ .text-blue-100 { color: color-mix(in srgb, var(--brand) 18%, white) !important; } .text-blue-500, .hover\:text-blue-500:hover { color: var(--brand) !important; } .text-blue-600, .hover\:text-blue-600:hover { color: var(--brand) !important; } .text-blue-700, .hover\:text-blue-700:hover { color: color-mix(in srgb, var(--brand) 82%, black) !important; } .text-blue-900 { color: color-mix(in srgb, var(--brand) 60%, black) !important; } /* Borders */ .border-blue-400, .hover\:border-blue-400:hover { border-color: color-mix(in srgb, var(--brand) 60%, white) !important; } .border-blue-500, .hover\:border-blue-500:hover { border-color: var(--brand) !important; } .border-blue-600, .focus\:border-blue-600:focus { border-color: var(--brand) !important; } /* Rings */ .ring-blue-50 { --tw-ring-color: color-mix(in srgb, var(--brand) 8%, white) !important; } .ring-blue-100, .ring-blue-100\/70 { --tw-ring-color: color-mix(in srgb, var(--brand) 18%, white) !important; } .ring-blue-500, .focus\:ring-blue-500:focus, .focus-visible\:ring-blue-500:focus-visible { --tw-ring-color: var(--brand) !important; } .ring-blue-600, .focus\:ring-blue-600:focus { --tw-ring-color: var(--brand) !important; } /* Divides */ .divide-blue-100 > :not([hidden]) ~ :not([hidden]), .divide-blue-100\/60 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, var(--brand) 18%, white) !important; } /* Gradients Tailwind v4 expects --tw-gradient-from / --tw-gradient-to to be pure colors; v4's own --tw-gradient-stops template composes them with position + direction. Override colors only — do NOT redefine --tw-gradient-stops (that breaks v4). */ .from-blue-50, .from-blue-50\/80 { --tw-gradient-from: color-mix(in srgb, var(--brand) 8%, white) !important; } .from-blue-500, .from-blue-600 { --tw-gradient-from: var(--brand) !important; } .to-blue-700 { --tw-gradient-to: color-mix(in srgb, var(--brand) 82%, black) !important; } /* Shadows (incl. /20, /30, /40 opacity variants) — v4 only sets --tw-shadow-color */ .shadow-blue-500, .shadow-blue-500\/20, .shadow-blue-500\/30, .shadow-blue-500\/40, .shadow-blue-600, .shadow-blue-600\/20, .shadow-blue-600\/30 { --tw-shadow-color: var(--brand) !important; }