/* * NoMa Studio AI brand layer for Vikunja 2.3.0 * Injected by the Caddy proxy right before , after Vikunja's own CSS, * together with the Google Fonts link for Outfit + Montserrat. * * Strategy: override Vikunja's design tokens (HSL channel custom properties * from frontend/src/styles/custom-properties/colors.scss) instead of fighting * component selectors. Vue scoped styles compile to .class[data-v-hash], so * the few component-level rules below need !important. * * Brand tokens (see DEPLOYMENT.md for the live-site discrepancy report): * magenta #DD005D = hsl(335deg 100% 43%) -> primary action/accent * surfaces #0a0a0f -> dark theme base * fonts Outfit (headings) / Montserrat (body) */ /* ---- Primary accent: NoMa magenta ---------------------------------- */ /* Vikunja composes --primary, --link, focus rings and hovers from these * channels, so overriding them rebrands every accent consistently. */ :root { --primary-h: 335deg; --primary-s: 100%; --primary-l: 43%; } /* Vikunja's dark theme redefines the FULL h/s/l triplet inside :root.dark * (higher specificity than :root), so all three channels must be repeated * here or the dark UI silently keeps the stock blue. Lightness is lifted * for contrast on dark surfaces, mirroring upstream's approach. */ :root.dark { --primary-h: 335deg; --primary-s: 100%; --primary-l: 52%; } /* ---- Dark theme surfaces toward NoMa near-black --------------------- */ /* Vikunja toggles the .dark class on . In dark mode --white is the * card/content surface and --site-background covers body, navbar and * sidebar. Keep cards one step above the base so depth survives. */ :root.dark { --site-background: #0a0a0f; --white: #101018; --card-border-color: #1e1e2a; --border: #1e1e2a; --input-background-color: #14141d; } /* ---- Typography ------------------------------------------------------ */ /* Vikunja bakes its fonts in at SCSS build time (Open Sans body, Quicksand * headings), so these cannot be re-tokened; font-family must be forced. */ body, button, input, select, textarea { font-family: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .title { font-family: 'Outfit', 'Quicksand', sans-serif !important; } /* ---- Targeted component touch-ups ------------------------------------ */ /* Primary buttons: hover to a slightly LIGHTER magenta (brand spec) since * Vikunja's default hover darkens. */ .button.is-primary:hover, .button.is-primary:focus-visible { background-color: hsl(335deg 100% 50%) !important; }