/* ============================================================
CrystalPrivacy × Radzen — theme overrides
------------------------------------------------------------
Drop-in override layer for a Radzen Blazor app running the
"material3-dark" theme. Pulls the admin UI toward the
CrystalPrivacy brand: cool near-black navy surfaces, a neon
periwinkle-blue primary, Space Grotesk / Tektur type, matching
radii and glowing focus rings.
HOW TO USE
----------
1. Keep loading the Radzen theme FIRST, e.g. in App.razor / index.html:
-- or --
2. Load this file AFTER it (it must win the cascade). The
simplest place is wwwroot/css/site.css — paste the contents
there, or add:
as the LAST stylesheet in the .
Everything below is scoped to Radzen's own CSS custom properties
(--rz-*) wherever possible, so it rides the theme's own machinery
and stays robust across component updates. A handful of targeted
selector rules follow for the few surfaces the variables don't
fully cover.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Tektur:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ------------------------------------------------------------
1. DESIGN TOKENS — remap Radzen's variables to the brand
------------------------------------------------------------ */
:root,
body,
.rz-material3-dark {
/* ---- brand primitives (single source of truth) ---- */
--cp-accent-h: 250;
--cp-accent: oklch(0.73 0.155 var(--cp-accent-h)); /* neon periwinkle blue ~#6f8ff5 */
--cp-accent-soft: oklch(0.84 0.12 var(--cp-accent-h)); /* lighter tint ~#a9bffb */
--cp-accent-deep: oklch(0.56 0.17 var(--cp-accent-h)); /* deep shade ~#3f5fd4 */
--cp-accent-darker: oklch(0.46 0.16 var(--cp-accent-h));
--cp-bg: oklch(0.16 0.025 255); /* page background */
--cp-bg-0: oklch(0.13 0.022 255); /* recessed / inputs */
--cp-panel: oklch(0.205 0.026 255); /* cards / panels */
--cp-panel-2: oklch(0.245 0.03 255); /* elevated / hover */
--cp-ink: oklch(0.97 0.012 250);
--cp-ink-mid: oklch(0.80 0.03 250);
--cp-ink-dim: oklch(0.66 0.03 252);
--cp-line: color-mix(in oklch, var(--cp-accent) 16%, transparent);
--cp-line-soft: color-mix(in oklch, var(--cp-accent) 8%, transparent);
--cp-glow: 0 0 22px color-mix(in oklch, var(--cp-accent) 40%, transparent);
--cp-display: 'Tektur', ui-sans-serif, sans-serif;
--cp-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
/* ---- primary accent (buttons, links, active states) ---- */
--rz-primary: var(--cp-accent);
--rz-primary-light: var(--cp-accent-soft);
--rz-primary-lighter: color-mix(in oklch, var(--cp-accent) 22%, transparent);
--rz-primary-dark: var(--cp-accent-deep);
--rz-primary-darker: var(--cp-accent-darker);
--rz-on-primary: #04101f; /* dark ink on bright buttons */
--rz-primary-contrast-text: #04101f;
/* material3 surface/primary container tokens */
--rz-primary-container: color-mix(in oklch, var(--cp-accent) 26%, var(--cp-panel));
--rz-on-primary-container: var(--cp-accent-soft);
/* ---- secondary → soft accent so the palette stays cohesive ---- */
--rz-secondary: var(--cp-accent-soft);
--rz-secondary-light: color-mix(in oklch, var(--cp-accent-soft) 60%, transparent);
--rz-secondary-dark: var(--cp-accent-deep);
--rz-on-secondary: #04101f;
--rz-secondary-container: color-mix(in oklch, var(--cp-accent) 20%, var(--cp-panel));
--rz-on-secondary-container: var(--cp-accent-soft);
/* ---- functional colours (kept meaningful, tuned to the palette) ---- */
--rz-success: oklch(0.78 0.15 150);
--rz-info: var(--cp-accent-soft);
--rz-warning: oklch(0.83 0.14 78);
--rz-danger: oklch(0.68 0.19 20);
--rz-on-success: #04101f; --rz-on-info: #04101f; --rz-on-warning: #04101f; --rz-on-danger: #fff;
/* ---- neutral base ramp ---- */
--rz-base: var(--cp-bg);
--rz-base-light: var(--cp-panel);
--rz-base-lighter: var(--cp-panel-2);
--rz-base-dark: var(--cp-bg-0);
--rz-base-darker: oklch(0.11 0.02 255);
--rz-base-background-color: var(--cp-bg);
--rz-on-base: var(--cp-ink);
/* ---- surfaces ---- */
--rz-body-background-color: var(--cp-bg);
--rz-content-background-color: var(--cp-bg);
--rz-panel-background-color: var(--cp-panel);
--rz-card-background-color: var(--cp-panel);
--rz-base-100: var(--cp-panel);
--rz-base-200: var(--cp-panel-2);
--rz-surface: var(--cp-panel);
--rz-on-surface: var(--cp-ink);
/* ---- text ---- */
--rz-body-color: var(--cp-ink);
--rz-text-color: var(--cp-ink);
--rz-text-title-color: var(--cp-ink);
--rz-text-contrast-color: #fff;
--rz-text-secondary-color: var(--cp-ink-mid);
--rz-text-tertiary-color: var(--cp-ink-dim);
--rz-text-disabled-color: var(--cp-ink-dim);
/* ---- borders & shape ---- */
--rz-border-color: var(--cp-line);
--rz-border-normal: 1px solid var(--cp-line);
--rz-border-radius: 12px;
--rz-border-radius-sm: 9px;
--rz-border-radius-lg: 16px;
/* ---- inputs ---- */
--rz-input-background-color: var(--cp-bg-0);
--rz-input-value-color: var(--cp-ink);
--rz-input-placeholder-color: var(--cp-ink-dim);
--rz-input-border: 1px solid var(--cp-line);
--rz-input-focus-border: 1px solid color-mix(in oklch, var(--cp-accent) 60%, transparent);
--rz-input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--cp-accent) 18%, transparent);
--rz-input-disabled-background-color: var(--cp-bg-0);
--rz-label-color: var(--cp-ink-mid);
/* ---- typography ---- */
--rz-body-font-family: var(--cp-body);
--rz-text-font-family: var(--cp-body);
--rz-body-font-size: 0.95rem;
--rz-body-line-height: 1.55;
/* ---- layout chrome ---- */
--rz-header-background-color: color-mix(in oklch, var(--cp-bg-0) 88%, transparent);
--rz-header-color: var(--cp-ink);
--rz-sidebar-background-color: color-mix(in oklch, var(--cp-bg-0) 92%, transparent);
--rz-sidebar-color: var(--cp-ink-mid);
--rz-footer-background-color: var(--cp-bg-0);
--rz-panel-menu-background-color: transparent;
/* ---- shadows: swap the neutral drop-shadows for a faint accent glow ---- */
--rz-shadow-1: 0 1px 2px rgba(0,0,0,.5);
--rz-shadow-2: 0 2px 8px rgba(0,0,0,.45);
--rz-shadow-3: 0 6px 20px rgba(0,0,0,.5);
--rz-panel-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* ------------------------------------------------------------
2. GLOBAL TYPE & CANVAS
------------------------------------------------------------ */
body {
font-family: var(--cp-body);
background: var(--cp-bg);
color: var(--cp-ink);
-webkit-font-smoothing: antialiased;
}
/* Ambient CrystalPrivacy field behind the whole app (very subtle for an admin) */
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(1100px 700px at 82% -10%, color-mix(in oklch, var(--cp-accent) 12%, transparent), transparent 60%),
radial-gradient(900px 600px at 2% 8%, color-mix(in oklch, var(--cp-accent-deep) 9%, transparent), transparent 55%);
}
/* keep app content above the ambient layer */
.rz-layout, .rz-body, #app, #components-reconnect-modal { position: relative; z-index: 1; }
h1, h2, h3, h4, h5,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5,
.rz-text-display-h1, .rz-text-display-h2 {
font-family: var(--cp-body);
font-weight: 700;
letter-spacing: -.02em;
}
/* brand wordmark / micro-labels use the display face */
.rz-text-overline, .cp-brand, .rz-badge {
font-family: var(--cp-display);
letter-spacing: .04em;
}
a, .rz-link { color: var(--cp-accent-soft); }
a:hover, .rz-link:hover { color: var(--cp-accent); }
::selection { background: color-mix(in oklch, var(--cp-accent) 40%, transparent); color: #fff; }
/* ------------------------------------------------------------
3. HEADER · SIDEBAR · FOOTER
------------------------------------------------------------ */
.rz-header {
background: color-mix(in oklch, var(--cp-bg-0) 82%, transparent) !important;
color: var(--cp-ink);
border-bottom: 1px solid var(--cp-line);
backdrop-filter: blur(14px) saturate(1.15);
}
.rz-sidebar {
background: color-mix(in oklch, var(--cp-bg-0) 92%, transparent) !important;
border-right: 1px solid var(--cp-line);
backdrop-filter: blur(8px);
}
.rz-footer {
background: var(--cp-bg-0) !important;
border-top: 1px solid var(--cp-line);
color: var(--cp-ink-dim);
}
/* sidebar / panel-menu items */
.rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-link {
color: var(--cp-ink-mid);
border-radius: 10px;
font-family: var(--cp-display);
font-weight: 500;
letter-spacing: .01em;
transition: background .18s, color .18s;
}
.rz-navigation-item-link:hover {
color: var(--cp-ink);
background: color-mix(in oklch, var(--cp-panel) 70%, transparent);
}
.rz-navigation-item-link.rz-navigation-item-link-active,
li.rz-navigation-item-active > .rz-navigation-item-wrapper > .rz-navigation-item-link {
color: var(--cp-accent-soft) !important;
background: color-mix(in oklch, var(--cp-accent) 14%, transparent) !important;
box-shadow: inset 2px 0 0 var(--cp-accent);
}
.rz-navigation-item-icon { color: inherit; }
/* ------------------------------------------------------------
4. BUTTONS
------------------------------------------------------------ */
.rz-button {
border-radius: 11px;
font-family: var(--cp-display);
font-weight: 600;
letter-spacing: .01em;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.rz-button.rz-primary,
.rz-button.rz-secondary {
color: #04101f;
background: linear-gradient(180deg, var(--cp-accent-soft), var(--cp-accent));
border: none;
box-shadow: var(--cp-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.rz-button.rz-primary:hover:not(:disabled),
.rz-button.rz-secondary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 0 30px color-mix(in oklch, var(--cp-accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
}
/* light / outlined / text buttons → ghost treatment */
.rz-button.rz-light,
.rz-button.rz-base,
.rz-button.rz-shade-default {
color: var(--cp-ink);
background: color-mix(in oklch, var(--cp-panel) 70%, transparent);
border: 1px solid var(--cp-line);
}
.rz-button.rz-light:hover:not(:disabled),
.rz-button.rz-base:hover:not(:disabled) {
border-color: color-mix(in oklch, var(--cp-accent) 50%, transparent);
color: var(--cp-accent-soft);
}
.rz-button.rz-button-text { color: var(--cp-accent-soft); background: transparent; }
/* ------------------------------------------------------------
5. INPUTS · FORMS
------------------------------------------------------------ */
.rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric input,
.rz-datepicker input, .rz-autocomplete input, .rz-spinner input,
.rz-lookup, .rz-mask {
background: var(--cp-bg-0) !important;
color: var(--cp-ink) !important;
border: 1px solid var(--cp-line) !important;
border-radius: 11px !important;
font-family: var(--cp-body);
transition: border-color .2s, box-shadow .2s;
}
.rz-textbox::placeholder, .rz-textarea::placeholder { color: var(--cp-ink-dim); }
.rz-textbox:focus, .rz-textarea:focus, .rz-dropdown.rz-state-focused,
.rz-numeric.rz-state-focused, .rz-state-focused input {
border-color: color-mix(in oklch, var(--cp-accent) 60%, transparent) !important;
box-shadow: 0 0 0 3px color-mix(in oklch, var(--cp-accent) 18%, transparent) !important;
outline: none !important;
}
.rz-form-field label, .rz-form-field-label { color: var(--cp-ink-mid); font-family: var(--cp-display); font-weight: 500; }
/* checkboxes / switches / radios pick up the accent */
.rz-chkbox-box.rz-state-active, .rz-radiobutton-box.rz-state-active,
.rz-switch.rz-state-active .rz-switch-circle,
.rz-switch-checked .rz-switch-circle-bar {
background: var(--cp-accent) !important;
border-color: var(--cp-accent) !important;
box-shadow: 0 0 10px color-mix(in oklch, var(--cp-accent) 50%, transparent);
}
.rz-slider-range { background: var(--cp-accent) !important; }
.rz-slider-handle { border-color: var(--cp-accent) !important; }
/* dropdown / menu popups */
.rz-dropdown-panel, .rz-menu, .rz-multiselect-panel, .rz-autocomplete-panel {
background: var(--cp-panel) !important;
border: 1px solid var(--cp-line) !important;
border-radius: 12px !important;
box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.rz-dropdown-item.rz-state-highlight, li.rz-state-highlight {
background: color-mix(in oklch, var(--cp-accent) 18%, transparent) !important;
color: var(--cp-accent-soft) !important;
}
/* ------------------------------------------------------------
6. CARDS · PANELS · FIELDSET
------------------------------------------------------------ */
.rz-card, .rz-panel, .rz-fieldset {
background: linear-gradient(180deg,
color-mix(in oklch, var(--cp-panel) 92%, transparent),
color-mix(in oklch, var(--cp-bg-0) 92%, transparent)) !important;
border: 1px solid var(--cp-line) !important;
border-radius: 16px !important;
color: var(--cp-ink);
}
.rz-fieldset-legend, .rz-panel-titlebar, .rz-card-title {
color: var(--cp-ink) !important;
font-family: var(--cp-body);
font-weight: 700;
letter-spacing: -.01em;
}
.rz-fieldset-legend { color: var(--cp-accent-soft) !important; }
.rz-panel-titlebar { border-bottom: 1px solid var(--cp-line-soft); background: transparent !important; }
/* accordion / tabs */
.rz-tabview-nav, .rz-accordion-header { border-color: var(--cp-line) !important; }
.rz-tabview-nav li.rz-state-active .rz-tabview-title,
.rz-tabview-nav li.rz-tabview-selected a { color: var(--cp-accent-soft) !important; }
.rz-tabview-nav li.rz-state-active, .rz-tabview-nav li.rz-tabview-selected {
border-bottom: 2px solid var(--cp-accent) !important;
}
.rz-accordion-header.rz-state-active { color: var(--cp-accent-soft) !important; }
/* ------------------------------------------------------------
7. DATA GRID · TABLES
------------------------------------------------------------ */
.rz-datatable, .rz-grid-table, .rz-data-grid {
background: transparent !important;
color: var(--cp-ink);
border-color: var(--cp-line) !important;
}
.rz-datatable thead .rz-column-title,
.rz-datatable .rz-grid-table thead th,
.rz-datatable-thead > tr > th {
background: color-mix(in oklch, var(--cp-bg-0) 80%, transparent) !important;
color: var(--cp-ink-mid) !important;
border-color: var(--cp-line) !important;
font-family: var(--cp-display);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
font-size: 12px;
}
.rz-datatable tbody > tr,
.rz-datatable-data > tr { background: transparent !important; color: var(--cp-ink); }
.rz-datatable tbody > tr > td,
.rz-datatable-data > tr > td { border-color: var(--cp-line-soft) !important; }
.rz-datatable tbody > tr:hover,
.rz-datatable-data > tr:hover {
background: color-mix(in oklch, var(--cp-accent) 8%, transparent) !important;
}
.rz-datatable tbody > tr.rz-state-highlight {
background: color-mix(in oklch, var(--cp-accent) 16%, transparent) !important;
color: var(--cp-accent-soft) !important;
}
/* pager */
.rz-paginator { background: transparent !important; border-color: var(--cp-line) !important; }
.rz-paginator .rz-state-active { background: var(--cp-accent) !important; color: #04101f !important; border-radius: 8px; }
/* ------------------------------------------------------------
8. BADGES · CHIPS · PROGRESS · MISC
------------------------------------------------------------ */
.rz-badge.rz-badge-primary, .rz-badge.rz-primary {
background: color-mix(in oklch, var(--cp-accent) 20%, transparent) !important;
color: var(--cp-accent-soft) !important;
border: 1px solid color-mix(in oklch, var(--cp-accent) 35%, transparent);
}
.rz-progressbar-value, .rz-progressbar-determinate .rz-progressbar-value {
background: linear-gradient(90deg, var(--cp-accent-deep), var(--cp-accent)) !important;
}
.rz-notification, .rz-dialog, .rz-tooltip-content {
background: var(--cp-panel) !important;
border: 1px solid var(--cp-line) !important;
color: var(--cp-ink);
border-radius: 14px !important;
}
.rz-dialog-titlebar { background: transparent !important; color: var(--cp-ink) !important; border-bottom: 1px solid var(--cp-line-soft); }
/* focus ring for keyboard nav, brand-tinted */
:focus-visible { outline: 2px solid color-mix(in oklch, var(--cp-accent) 70%, transparent); outline-offset: 2px; }
/* scrollbar */
* { scrollbar-color: color-mix(in oklch, var(--cp-accent) 40%, transparent) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
background: color-mix(in oklch, var(--cp-accent) 32%, transparent);
border: 3px solid transparent; background-clip: content-box; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--cp-accent) 50%, transparent); background-clip: content-box; }
/* ------------------------------------------------------------
9. HTML EDITOR — force a light "paper" surface
------------------------------------------------------------
RadzenHtmlEditor's editable area inherits the dark theme, so
email-template markup (dark text on a white card, the way it
renders in a mail client) is unreadable while editing. Pin the
content surface to white with dark default text on every
RadzenHtmlEditor (Invite page + EmailTemplateEditor). The
toolbar keeps the dark brand chrome. */
.rz-html-editor-content {
background: #ffffff !important;
color: #1c2733 !important;
}
.rz-html-editor-content a { color: #0b5cad !important; }