html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
}
/* Always reserve the window scrollbar gutter so the viewport width never changes when a vertical scrollbar
appears/disappears between pages — prevents the header from shifting (WT-089 dashboard "bump"). */
html {
scrollbar-gutter: stable;
}
/* ── Softened light-mode background (WT-119) ─────────────────────────────────────────────────────────────
Plain white is harsh; the page + footer default to a warm "paper" off-white that works under every accent
theme. A user can override the color on the My Preferences page; their choice is applied as the
--wt-light-bg custom property on (App.razor seed — localStorage + the saved UserPreference, no
flash). LIGHT MODE ONLY — dark mode keeps its own backgrounds. Cards, inputs and the terminal keep their
own surface colors so they stay crisp against the soft page. */
:root {
--wt-light-bg: #F7F5F0;
}
/* Derived tonal surfaces (WT-119): embedded surfaces are a soft, SAME-HUE step off the page color, so nested
containers read with gentle, pleasant contrast instead of stark white. Raised surfaces (cards, dialogs,
popups, inputs) lift TOWARD WHITE; the footer is GROUNDED slightly darker. All computed from the chosen
--wt-light-bg via color-mix, so the entire hierarchy re-harmonizes for ANY picked color. Light mode only —
dark mode keeps the Kendo dark surfaces. */
html:not([data-bs-theme="dark"]) {
--wt-surface: color-mix(in srgb, var(--wt-light-bg), #fff 55%); /* raised: inputs, cards, dialogs, popups */
--wt-surface-raised: color-mix(in srgb, var(--wt-light-bg), #fff 80%); /* a 2nd step up (menus floating over a dialog) */
--wt-surface-sunken: color-mix(in srgb, var(--wt-light-bg), #000 6%); /* grounded: footer */
/* Map the framework surface token so Telerik dialogs / popups / dropdowns follow the chosen page color. */
--kendo-color-app-surface: var(--wt-surface);
}
html:not([data-bs-theme="dark"]) body {
background-color: var(--wt-light-bg);
}
/* Sticky page/section toolbars read as page chrome → page base (blend with the page, not a white toolbar). */
html:not([data-bs-theme="dark"]) .wt-profile-actionbar,
html:not([data-bs-theme="dark"]) .wt-manage-actionbar {
background-color: var(--wt-light-bg);
}
/* Form inputs read as soft, RECESSED warm fields (a step toward the hue) — clearly not white even at a
near-white page default. (WT-119b) */
html:not([data-bs-theme="dark"]) .form-control,
html:not([data-bs-theme="dark"]) .form-select {
background-color: var(--wt-surface-sunken);
}
/* Telerik form inputs (dropdown, combobox, masked/numeric textbox, color-picker button) ground like the
Bootstrap inputs — they're recessed fields, not white. The background sits on the .k-input / .k-picker
WRAPPER (the .k-input-inner is transparent). The top-bar language selector keeps its own on-brand styling
(its .wt-topbar-scoped rules are more specific and win). (WT-119b) */
html:not([data-bs-theme="dark"]) .k-input,
html:not([data-bs-theme="dark"]) .k-picker {
background-color: var(--wt-surface-sunken);
}
/* The ColorPicker editor holds LIGHT pastel swatches, so the editor itself is a darker BACKDROP (grounded)
and the things ON it lift to --wt-surface — the swatches, the hex input and the Cancel button all then pop
against it (a popup full of light content needs a darker frame, not a lighter one). (WT-119b/f) */
html:not([data-bs-theme="dark"]) .k-coloreditor,
html:not([data-bs-theme="dark"]) .k-flatcolorpicker {
background-color: var(--wt-surface-sunken);
}
html:not([data-bs-theme="dark"]) .k-coloreditor .k-input,
html:not([data-bs-theme="dark"]) .k-coloreditor-cancel {
background-color: var(--wt-surface);
}
/* The marketing toggle (TelerikSwitch): its OFF track grounds to the recessed tone and the thumb lifts to the
warm raised tone — so the slider isn't a stark white pill. The ON track keeps the brand/accent color. */
html:not([data-bs-theme="dark"]) .k-switch-off .k-switch-track {
background-color: var(--wt-surface-sunken);
}
html:not([data-bs-theme="dark"]) .k-switch-thumb {
background-color: var(--wt-surface);
}
/* Dashboard tabs GROUND a step below the dashboard background (a touch darker, not white). The active tab,
the inactive tabs, and the content band around the terminal (the tab content panel + the 0.25rem
.wt-tab-body inset) all share this one sunken tone, so the tab flows seamlessly into its content area and
the whole tab surface reads as grounded below the page. (WT-119b) */
html:not([data-bs-theme="dark"]) .wt-tabstrip .k-tabstrip-item,
html:not([data-bs-theme="dark"]) .wt-tabstrip .k-tabstrip-item.k-active,
html:not([data-bs-theme="dark"]) .wt-tabstrip .k-tabstrip-content,
html:not([data-bs-theme="dark"]) .wt-tab-body {
background-color: var(--wt-surface-sunken);
}
/* The dialog title bar + action (button) bar ground a step BELOW the dialog body so the bars frame the
content with a soft, slightly-darker contrast (WT-119b). */
html:not([data-bs-theme="dark"]) .k-window-titlebar,
html:not([data-bs-theme="dark"]) .k-window-actions,
html:not([data-bs-theme="dark"]) .k-dialog-buttongroup {
background-color: var(--wt-surface-sunken);
}
/* Floating Telerik surfaces (dialogs, popups, dropdown/menu lists) lift toward white like other raised
surfaces, so they read as a soft same-hue step over the page rather than stark white. They use their own
tokens (not just --kendo-color-app-surface), so target the containers directly. */
html:not([data-bs-theme="dark"]) .k-window-content,
html:not([data-bs-theme="dark"]) .k-dialog,
html:not([data-bs-theme="dark"]) .k-popup,
html:not([data-bs-theme="dark"]) .k-list {
background-color: var(--wt-surface);
}
/* The ColorPicker palette must clearly show WHICH swatch is staged (WT-119): a dark ring on the selected tile,
and nothing when the current color matches no preset. (Telerik marks the active tile .k-selected.) */
.k-colorpalette .k-colorpalette-tile.k-selected {
outline: 2px solid rgba(15, 23, 42, 0.85);
outline-offset: -2px;
box-shadow: inset 0 0 0 1px #fff;
z-index: 1;
position: relative;
}
/* ============================================================================================
Brand COLOR themes (WT-096). Each user picks an accent palette ("navy" = default) on their profile;
it's applied as data-wt-theme on (App.razor script, from localStorage + UserPreference). Each
theme overrides --kendo-color-primary* (drives ALL Telerik components + the .btn shim) and the
--wt-brand* vars (custom brand surfaces: sidebar gradient, overlay wordmark, exit hint). To add a theme:
add ONE block here + ONE entry in the MyProfile picker list. Orthogonal to light/dark (data-bs-theme).
The :root block makes navy the default even before the attribute is set (and overrides Kendo's coral). */
:root,
[data-wt-theme="navy"] {
--kendo-color-primary: #052767;
--kendo-color-primary-hover: #0a3a8c;
--kendo-color-primary-active: #041e52;
--kendo-color-primary-emphasis: #6b82b8;
--kendo-color-primary-subtle: #e6ebf4;
--kendo-color-on-primary: #ffffff;
--wt-brand: #052767;
--wt-brand-2: #3a0647;
}
[data-wt-theme="ocean"] {
--kendo-color-primary: #0e7c8c;
--kendo-color-primary-hover: #0c6a78;
--kendo-color-primary-active: #084e5a;
--kendo-color-primary-emphasis: #6fb3bd;
--kendo-color-primary-subtle: #e3f1f3;
--kendo-color-on-primary: #ffffff;
--wt-brand: #0e7c8c;
--wt-brand-2: #08303a;
}
[data-wt-theme="ember"] {
--kendo-color-primary: #c0432a;
--kendo-color-primary-hover: #a5371f;
--kendo-color-primary-active: #872c17;
--kendo-color-primary-emphasis: #dd9080;
--kendo-color-primary-subtle: #f8e6e1;
--kendo-color-on-primary: #ffffff;
--wt-brand: #c0432a;
--wt-brand-2: #5a1a0a;
}
[data-wt-theme="forest"] {
--kendo-color-primary: #2e7d32;
--kendo-color-primary-hover: #276a2b;
--kendo-color-primary-active: #1f5523;
--kendo-color-primary-emphasis: #8bbf8d;
--kendo-color-primary-subtle: #e6f1e7;
--kendo-color-on-primary: #ffffff;
--wt-brand: #2e7d32;
--wt-brand-2: #143a1f;
}
[data-wt-theme="grape"] {
--kendo-color-primary: #6a2c97;
--kendo-color-primary-hover: #5a2580;
--kendo-color-primary-active: #4a1d6a;
--kendo-color-primary-emphasis: #b08fce;
--kendo-color-primary-subtle: #efe6f5;
--kendo-color-on-primary: #ffffff;
--wt-brand: #6a2c97;
--wt-brand-2: #3a1a52;
}
/* Cyber-Punk (WT-104) — neon magenta primary + electric-cyan emphasis on a deep cyber-purple bar; near-black
text on the neon for max pop. Best paired with dark mode; flourishes (brand glow + button glow) below. */
[data-wt-theme="cyberpunk"] {
--kendo-color-primary: #ff2a6d;
--kendo-color-primary-hover: #ff5c8d;
--kendo-color-primary-active: #d81f57;
--kendo-color-primary-emphasis: #05d9e8;
--kendo-color-primary-subtle: #2a0a3a;
--kendo-color-on-primary: #0a0118;
--wt-brand: #16003a;
--wt-brand-2: #02131f;
}
/* Pride (WT-104) — a vibrant magenta primary on a dark-neutral bar, with the recognizable 6-stripe rainbow
as a flag bottom-border + a rainbow-gradient wordmark. Celebratory but fully readable. */
[data-wt-theme="pride"] {
--kendo-color-primary: #c81d77;
--kendo-color-primary-hover: #b01968;
--kendo-color-primary-active: #981559;
--kendo-color-primary-emphasis: #ff8c00;
--kendo-color-primary-subtle: #fbe6f1;
--kendo-color-on-primary: #ffffff;
--wt-brand: #2a2a33;
--wt-brand-2: #18181f;
}
a, .btn-link {
color: #006bb7;
}
/* Kendo button shim (WT-095): static-SSR pages (account/legal) can't run TelerikButton, and Bootstrap's
.btn defaults are the "old" blue look. Restyle the .btn variants to the Kendo button appearance — the
SAME --kendo-color-* the real Telerik buttons use (so they match exactly + auto-theme for dark) plus
explicit Kendo "md" sizing — so every button looks like the genuine component everywhere. Action buttons
on interactive pages are real TelerikButtons; this covers form-submit buttons + nav links. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 8px;
font-size: 14px;
line-height: 1.4285714286;
font-weight: 400;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary {
background: var(--kendo-color-primary);
border-color: var(--kendo-color-primary);
color: var(--kendo-color-on-primary, #fff);
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--kendo-color-primary-hover, #ec463c);
border-color: var(--kendo-color-primary-hover, #ec463c);
color: var(--kendo-color-on-primary, #fff);
}
.btn-danger {
background: var(--kendo-color-error);
border-color: var(--kendo-color-error);
color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
background: var(--kendo-color-error-hover, #d33a3a);
border-color: var(--kendo-color-error-hover, #d33a3a);
color: #fff;
}
.btn-outline-primary {
background: transparent;
border-color: var(--kendo-color-primary);
color: var(--kendo-color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background: var(--kendo-color-primary);
color: var(--kendo-color-on-primary, #fff);
}
.btn-link {
background: transparent;
border-color: transparent;
color: var(--kendo-color-primary);
}
.btn-link:hover,
.btn-link:focus {
background: color-mix(in srgb, var(--kendo-color-primary) 8%, transparent);
color: var(--kendo-color-primary);
text-decoration: none;
}
/* Cancel / back-out buttons get a deliberate slim RED outline ("band") so they read as a distinct,
non-destructive escape action — and stay visible on ANY background, including the dark overlay (WT-097).
Destructive delete buttons use .btn-danger (SOLID red); cancel uses an OUTLINE so the two never collide.
The Telerik-component equivalent is FillMode=Outline + ThemeColor=Error (same look). */
.btn-cancel {
background: transparent;
border-color: var(--kendo-color-error, #d33a3a);
color: var(--kendo-color-error, #d33a3a);
}
.btn-cancel:hover,
.btn-cancel:focus {
background: var(--kendo-color-error, #d33a3a);
border-color: var(--kendo-color-error, #d33a3a);
color: #fff;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
/* ---- Site-wide footer (Footer.razor) ---- */
/* Pinned to the bottom of the app-shell main column so it is always visible (never needs scrolling). */
.wt-footer {
flex: 0 0 auto;
/* The footer is tied to the HEADER brand color — always a TINGE LIGHTER than the top bar (--wt-brand), so
the page is framed top + bottom by the brand. The background lives on the CONTAINER so the full
(multi-line) and compact (single-line) views ALWAYS share it (parity). Both light + dark mode; the
footer text is light-on-brand. (WT-119b) */
background: color-mix(in srgb, var(--wt-brand), #fff 12%);
border-top: 1px solid color-mix(in srgb, var(--wt-brand), #000 18%);
color: rgba(255, 255, 255, 0.82);
}
/* Both views live in the DOM; a class on (set from localStorage in App.razor) chooses which shows. */
.wt-footer-compact-view {
display: none;
}
html.wt-footer-compact .wt-footer-full-view {
display: none;
}
html.wt-footer-compact .wt-footer-compact-view {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
/* Footer styling — plain CSS (no runtime Tailwind CDN). */
.wt-footer-full-view {
background: transparent; /* brand background is on .wt-footer (shared with the compact view → parity) */
border-top: 0;
}
.wt-footer-inner {
/* Bottom padding is 0.5rem (NOT 1.5rem) so the bottom strip (copyright + toggles) sits the SAME
distance above the footer's bottom edge as the compact view's row — keeping that strip pixel-pinned
when toggling full <-> compact. Left 2rem aligns with the header (WT-090). */
padding: 1.5rem 1.5rem 0.5rem 2rem;
}
.wt-footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.wt-footer-brandcol {
grid-column: span 2;
}
@media (min-width: 768px) {
.wt-footer-grid {
grid-template-columns: repeat(4, 1fr);
}
.wt-footer-brandcol {
grid-column: span 1;
}
}
.wt-footer-brandname {
font-size: 1rem;
font-weight: 600;
color: #f8fafc;
}
.wt-footer-tagline {
margin-top: 0.5rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.62);
}
.wt-footer-colhead {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.55);
}
.wt-footer-links {
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
}
.wt-footer-links li {
margin-bottom: 0.5rem;
}
.wt-footer-link {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.wt-footer-link:hover {
color: #ffffff;
text-decoration: underline;
}
.wt-footer-bottom {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding-top: 0.75rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
.wt-footer-compact-view {
/* The brand background lives on .wt-footer, so this view matches the full view EXACTLY (parity). Padding
keeps copyright + toggles pixel-pinned across full <-> compact (WT-090). */
padding: 0.5rem 1.5rem 0.5rem 2rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
}
.wt-footer-copyright {
margin-right: auto;
}
/* Full-view bottom row: keep the theme toggle + view toggle pinned together at the right (WT-090). */
.wt-footer-actions {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* ---- CMS / legal content tables (e.g. the Cookie Policy cookie table) ---- */
/* Markdig renders a bare ; give it readable borders + TOP-aligned cells so multi-line rows line up. */
.cms-content table {
border-collapse: collapse;
margin: 1rem 0;
}
.cms-content th,
.cms-content td {
vertical-align: top;
text-align: left;
padding: 0.4rem 0.7rem;
border: 1px solid #dee2e6;
}
.cms-content thead th {
background: #f7f7f7;
}
/* ---- Tunnel Security Overlay (SecurityOverlay.razor / D-066 / WT-088) ---- */
/* Frosted layer: above all app content, BELOW the Telerik dialog (~10000+) so the dialog stays on top.
Blocks pointer events so the app underneath can't be clicked. Color/opacity/blur are set inline from config. */
.wt-security-overlay {
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: auto;
}
/* Logo + countdown sit ABOVE everything (incl. the dialog) so the brand stays visible and the timer is readable. */
.wt-security-brand {
/* Just the brand WORDMARK carried forward onto the frosted overlay — NO background block. It must sit at
the EXACT same position + size as the top-bar brand (.wt-topbar / .wt-topbar-brand) so it doesn't jitter
when the overlay engages: same height (3.5rem), same left inset (the bar's 2rem padding-left), same
font-size (1.2rem) and weight (600). (WT-106 — was calibrated for the old sidebar logo: 1.75rem/1.25rem.) */
position: fixed;
top: 0;
left: 0;
height: 3.5rem;
z-index: 100000;
display: flex;
align-items: center;
padding-left: 2rem; /* = .wt-topbar padding-left */
color: var(--wt-brand, rgb(5, 39, 103)); /* brand accent (theme-aware) — readable on the near-white frost */
font-size: 1.2rem; /* = .wt-topbar-brand */
font-weight: 600;
pointer-events: none;
}
/* Re-auth modal (WT-089): plain HTML modal replacing TelerikDialog, since the overlay is an interactive
island at the document root (outside the TelerikRootComponent). Above the frost (9990); the top-left
brand patch (z 100000) stays crisp and doesn't overlap the centered modal. */
.wt-security-modal-backdrop {
position: fixed;
inset: 0;
z-index: 99990;
background: rgba(0, 0, 0, 0.35);
}
.wt-security-modal {
position: fixed;
z-index: 99991;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 430px;
max-width: calc(100vw - 2rem);
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.wt-security-modal-header {
padding: 1rem 1.25rem;
font-size: 1.05rem;
font-weight: 600;
border-bottom: 1px solid #e6e6e6;
}
.wt-security-modal-body {
padding: 1.25rem;
}
.wt-security-modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.85rem 1.25rem;
border-top: 1px solid #e6e6e6;
background: #fafafa;
}
/* Centered exit hint shown on the bare frosted screen (dialog dismissed but still locked). Topmost so it's
never obscured; a subtle panel keeps it legible over the blur; theme-aware (dark overrides below). */
.wt-security-exit-hint {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100001;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.15rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
color: var(--wt-brand, rgb(5, 39, 103));
background: rgba(255, 255, 255, 0.62);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
/* The Ctrl+O key-cap is a SOLID high-contrast chip (brand fill + white text), not a faint tint — otherwise
it's navy-on-faint-navy and blends into the frosted overlay (WT-101). Reads as clearly as the label words. */
.wt-kbd {
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 0.85em;
padding: 0.15em 0.5em;
border-radius: 4px;
background: var(--wt-brand, #052767);
color: #fff;
border: 1px solid var(--wt-brand, #052767);
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ---- Site language selector (LanguageSelector.razor) ----
Global (not scoped) because the Telerik DropDownList renders its popup in a portal at the
TelerikRootComponent, outside any single component's scoped-CSS reach. */
/* Vendored flag-icons SVGs (rendered as ![]()
). 4x3 aspect; sized just under the text cap-height
so they sit alongside the words rather than dwarfing them. */
.flag {
height: 0.6em;
width: auto; /* keep the 4:3 aspect */
flex: none;
object-fit: contain;
margin-right: 0.45em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-name {
white-space: nowrap;
}
/* ---- Top navigation bar (TopNavBar.razor / WT-104) ---- */
/* The unified header — brand + primary TelerikMenu + utilities — as REAL Telerik components in an
interactive island at the document root, fixed across the top. Brand-colored (var(--wt-brand), which
follows the user's color theme) with light text. The .wt-topbar-placeholder (MainLayout) reserves its
height. Left 2rem / right 1.5rem matches the article padding so content aligns under it. */
.wt-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3.5rem;
z-index: 200; /* above content, below the security overlay (z 9990) */
display: flex;
align-items: center;
gap: 1rem;
padding: 0 1.5rem 0 2rem;
background: var(--wt-brand, rgb(5, 39, 103));
color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.wt-topbar-brand {
flex: 0 0 auto;
font-size: 1.2rem;
font-weight: 600;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.wt-topbar-brand:hover {
color: #fff;
text-decoration: none;
}
/* The horizontal TelerikMenu, restyled transparent on the bar; the ItemTemplate .wt-topnav-link carries
the look so links keep link-role + accessible text. Strip Kendo's item chrome so our controls it. */
.wt-topnav-menu.k-menu,
.wt-topnav-menu .k-menu-group,
.wt-topnav-menu .k-menu-item,
.wt-topnav-menu .k-menu-link,
.wt-topnav-menu .k-link {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* Push the menu right by ~the brand-logo width so it has breathing room from the wordmark (WT-104). */
.wt-topnav-menu {
margin-left: 7rem;
}
.wt-topnav-link {
display: inline-flex;
align-items: center;
height: 3.5rem;
padding: 0 0.9rem;
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
font-size: 0.95rem;
white-space: nowrap;
}
.wt-topnav-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
text-decoration: none;
}
/* Utilities (settings gear, language, theme toggle, hamburger) pushed to the right. */
.wt-topbar-utils {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.6rem;
flex: 0 0 auto;
}
/* Language selector ON the bar (WT-105): match the brand bar instead of a stark light/dark box — a subtle
translucent-white fill + light text/caret so it reads as part of the bar across every color theme. */
.wt-topbar .lang-ddl.k-picker {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.wt-topbar .lang-ddl.k-picker:hover {
background: rgba(255, 255, 255, 0.18);
}
.wt-topbar .lang-ddl .k-input-inner,
.wt-topbar .lang-ddl .k-input-value-text,
.wt-topbar .lang-ddl .k-input-button,
.wt-topbar .lang-ddl .k-button {
color: #fff;
}
/* The settings gear sits on the dark bar — light it up. */
.wt-topbar .wt-settings-btn-static {
color: rgba(255, 255, 255, 0.86);
}
.wt-topbar .wt-settings-btn-static:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
/* Theme toggle on the bar — light, flat (its sun/moon flip CSS is shared via .wt-theme-toggle). */
.wt-topbar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.86);
cursor: pointer;
border-radius: 4px;
line-height: 0;
}
.wt-topbar-toggle:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
/* Hamburger — hidden on desktop, shown under the small-screen breakpoint to open the drawer. */
.wt-topbar-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
}
.wt-drawer-link {
display: block;
padding: 0.75rem 1.25rem;
color: inherit;
text-decoration: none;
}
.wt-drawer-link:hover {
background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 640.98px) {
/* Collapse the inline menu to a hamburger -> drawer on small screens. */
.wt-topnav-menu {
display: none;
}
.wt-topbar-hamburger {
display: inline-flex;
}
}
/* ---- Theme flourishes (WT-104) — placed AFTER the base bar rules so they win cleanly ---- */
/* Cyber-Punk: a neon glow on the brand wordmark, a soft neon glow on primary buttons, and a cyan underline
on hovered nav links — the "genuine vibe", kept readable. */
[data-wt-theme="cyberpunk"] .wt-topbar-brand {
text-shadow: 0 0 8px var(--kendo-color-primary), 0 0 2px rgba(255, 255, 255, 0.55);
}
[data-wt-theme="cyberpunk"] .btn-primary {
box-shadow: 0 0 12px rgba(255, 42, 109, 0.45);
}
[data-wt-theme="cyberpunk"] .wt-topnav-link:hover {
box-shadow: inset 0 -2px 0 0 var(--kendo-color-primary-emphasis, #05d9e8);
}
/* Pride: the recognizable 6-stripe rainbow as a flag stripe along the bar's bottom, and a rainbow-gradient
wordmark (stays rainbow on hover too). The flag is a DECORATIVE ::after stripe — NOT a border — so it
doesn't consume the bar's content-box height (WT-106). A 4px border-bottom (with border-box sizing) shrank
the content box to 52px and centered the brand within it, lifting the wordmark 2px above true center; the
overlay wordmark (no border) centers in the full 56px, so the logo appeared to drop 2px on lock. An
absolutely-positioned stripe paints the same flag without touching layout, so bar + overlay center identically. */
[data-wt-theme="pride"] .wt-topbar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
pointer-events: none;
}
[data-wt-theme="pride"] .wt-topbar-brand,
[data-wt-theme="pride"] .wt-topbar-brand:hover {
background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00 38%, #008026, #004dff, #750787);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Global toast host (WT-101): a 10px gap from the top edge so the top-most toast isn't flush against the very
top. Per Telerik docs, the Class lands on the notification's ROOT element (which is the position:fixed one),
and their own examples use the Class as an ANCESTOR selector — so the earlier compound selector
`.wt-toast.k-notification-container` matched nothing (.k-notification-container is an INNER element). Target
`.wt-toast` itself (the positioned root) and cover the descendant case; `top` is a no-op on whichever of
these isn't the positioned element, so this is safe. */
.wt-toast,
.wt-toast .k-notification-container,
.wt-toast .k-animation-container {
top: 10px !important;
}
/* Telerik DropDownList instance used as the language picker: keep the flag + name on one line. */
.lang-ddl .k-input-value-text,
.k-animation-container .lang-name {
display: inline-flex;
align-items: center;
}
/* Static-SSR fallback (no Blazor circuit): native dropdown, sized + styled to MATCH the
interactive TelerikDropDownList (Width="180px") so the header doesn't jump between page types. No
margin-left here — spacing comes from the shared .gap-2 wrapper, same as the interactive control. */
.lang-select {
position: relative;
}
/* The summary carries the Kendo k-picker/k-dropdownlist classes, so the box styling (border, height,
caret button) comes from the Telerik theme — identical to the real dropdown. We only strip the
native marker and keep the flag+name on one line. */
.lang-select > summary {
list-style: none;
cursor: pointer;
white-space: nowrap;
/* PIN both the font AND the box height to absolute units so the control renders IDENTICALLY on every
page. The k-picker classes derive font-size, padding, and the nested caret-button height from
Kendo's --kendo-* metrics, which the theme resolves at FULL size when an active TelerikRootComponent
is engaged (the dashboard's TabStrip) but compact otherwise — so the same markup "squishes" on most
pages and OVERFLOWS the 3.5rem header bar on the dashboard. Fixed font + fixed 2rem box + a
full-height caret defeat that ambient variance entirely (WT-089). */
font-size: 0.875rem;
line-height: 1.5;
height: 2rem;
box-sizing: border-box;
display: inline-flex;
align-items: center;
padding-block: 0;
}
/* Neutralize the nested Kendo caret button's context-dependent height so it can't inflate the box. */
.lang-select > summary .k-input-button {
height: 100%;
min-height: 0;
align-self: stretch;
}
.lang-select > summary::-webkit-details-marker {
display: none;
}
.lang-select .k-input-value-text {
display: inline-flex;
align-items: center;
overflow: hidden;
}
.lang-select .lang-menu {
position: absolute;
right: 0;
top: calc(100% + 2px);
margin: 0;
padding: 0.25rem 0;
list-style: none;
width: max-content; /* size to the longest item so names are never clipped */
min-width: 180px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 20;
}
.lang-select .lang-menu a {
display: flex;
align-items: center;
margin-left: 0;
padding: 0.35rem 1rem;
white-space: nowrap;
text-decoration: none;
}
.lang-select .lang-menu a.active {
font-weight: bold;
}
.lang-select .lang-menu a:hover {
background: #f0f0f0;
text-decoration: none;
}
/* ---- Settings launcher (WT-089) ------------------------------------------------------------ */
/* The static-SSR fallback gear link (account pages have no circuit, so no Telerik button there). */
.wt-settings-btn-static {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
color: #424242; /* dark icon on the light (#f7f7f7) top-row */
border-radius: 4px;
text-decoration: none;
}
.wt-settings-btn-static:hover {
background: rgba(0, 0, 0, 0.06);
color: rgb(5, 39, 103); /* brand navy on hover */
text-decoration: none;
}
/* Dialog body: a list of destination "cards". Global (not scoped) because the Telerik dialog content
is teleported into a popup container outside the component's scoped-CSS subtree. */
.wt-settings-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wt-settings-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.85rem 1rem;
border: 1px solid #e3e3e3;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.wt-settings-item:hover {
background: #f5f7fb;
border-color: #c7d2fe;
text-decoration: none;
color: inherit;
}
.wt-settings-item .k-svg-icon {
margin-top: 0.15rem;
color: rgb(5, 39, 103);
flex: 0 0 auto;
}
.wt-settings-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.wt-settings-item-title {
font-weight: 600;
}
.wt-settings-item-desc {
font-size: 0.85rem;
color: #5b6470;
}
/* ---- My profile form (WT-089) -------------------------------------------------------------- */
/* Save action pinned to the top of the scrolling client area (WT-100). Zero the article's top padding on
this page so the bar sticks FLUSH at the very top — a negative top margin instead would make the unstuck
position higher than the stuck (top:0) position, so on first scroll the bar drops 1.1rem and exposes a
strip of content above it (the gap). Side margins still extend the opaque band full-width over the
article's left/right padding so nothing peeks at the edges either. */
article:has(.wt-profile-actionbar) {
padding-top: 0;
}
.wt-profile-actionbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 -1.5rem 0 -2rem;
padding: 0.85rem 1.5rem 0.85rem 2rem;
background: var(--kendo-color-app-surface, #fff);
border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.1));
}
.wt-profile-title {
margin: 0;
font-size: 1.5rem;
}
/* Account-settings (manage) Save bar (WT-105) — mirrors the profile action bar: the page heading + Save
pinned at the top of the form, sticky so it stays reachable. Lives inside the form's column. */
.wt-manage-actionbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
margin-bottom: 0.75rem;
background: var(--kendo-color-app-surface, #fff);
border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.1));
}
.wt-manage-title {
margin: 0;
font-size: 1.3rem;
}
/* Account Settings section nav as a horizontal CHIP bar (WT-105). Replaces the col-lg-3 vertical pill sidebar.
Each chip is a NavLink (full-page nav to its static-SSR page); the active chip is brand-highlighted. The bar
wraps to a second row on narrow widths (flex-wrap) so chips never clip — chosen over scroll-arrows because
the set is small + fixed, so nothing is hidden. Easy to swap for a TelerikTabStrip later. */
.wt-section-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.25rem 0 1.5rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
}
.wt-section-chip {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.95rem;
border-radius: 999px;
font-size: 0.95rem;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
color: var(--kendo-color-on-app-surface, #1b1b1b);
background: var(--kendo-color-base, rgba(0, 0, 0, 0.05));
border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
/* Works as both a NavLink (Account Settings nav) and a