/* Theme default css */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); :root { /* ── Brand design tokens ────────────────────────────────────────────── Single source of truth for site theming. Per-org white-label overrides are injected from in home.php when kd_org carries primary_color / secondary_color / font_family values. */ /* Primary action color (buttons, links, focus rings). */ --theme-color: #0997d9; /* Darker shade of primary for :hover / :active states. The fallback works in every browser. The color-mix line wins in modern browsers (Chrome 111+, Safari 16.2+, Firefox 113+) and auto-derives hover from whatever --theme-color resolves to — so a white-label org that overrides --theme-color gets a coherent hover for free. */ --theme-color-hover: #087cb2; /* fallback */ --theme-color-hover: color-mix(in srgb, var(--theme-color), black 15%); /* Soft tint of primary (card backgrounds, subtle highlights, badges). */ --theme-light: #e6f5fb; /* Text color when sitting on top of --theme-color (e.g. button labels, pill content, owl arrow glyphs). Default is white; theme-contrast.js reads --theme-color's sRGB luminance at load and overrides this to #1a1a1a on :root if the primary is too pale for white text to read (cream, pastel pink, soft yellow). */ --theme-on-primary: #ffffff; /* Same idea for --theme-light (the org's secondary). Default is dark text because --theme-light is meant to be a soft tint, but an org can override it with a saturated secondary color via the dashboard; theme-contrast.js flips this to white when that happens. */ --theme-on-secondary: #1a1a1a; /* A version of --theme-color that's guaranteed to read on a white background. Default falls through to --theme-color itself, but theme-contrast.js iteratively darkens this if the primary's luminance is too high (e.g. a near-white pink) so outline buttons and theme-colored text on white cards stay visible. */ --theme-color-readable: var(--theme-color); /* Same idea for the secondary: a version of --theme-light that's guaranteed to read on a white background. Used for outline buttons that should follow the secondary brand color (e.g. the homepage 'View all X' CTAs). */ --theme-light-readable: var(--theme-light); /* Site-wide font stack. Defaults to Poppins. Per-org overrides from home.php's wl-theme-overrides block reassign this to the org's chosen font (e.g. Roboto, Lora, Inter, Nunito) on :root, and the same block dynamically loads the font from Google Fonts. Every surface in the site CSS references var(--font-stack) instead of hardcoding "Poppins", sans-serif so a dashboard font change flows everywhere with no per-rule update. */ --font-stack: "Poppins", sans-serif; /* Kannect's blue→magenta identity gradient. Hidden via the wl-hide-kannect