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"). */
/* Reserve the window scrollbar gutter ONLY where the window can actually scroll — i.e. the small-screen
layout. From 641px up, MainLayout's app shell is `height: 100vh; overflow: hidden` with the ARTICLE
scrolling internally, so a window scrollbar can never appear and there is nothing to stabilise. Left
unscoped (as it was), the gutter reserved ~15px for a scrollbar that never comes: it shrinks the initial
containing block, so the header and footer stop short of the window edge and the page background shows
through as a pale strip down the right of both brand bars (owner report 2026-07-28).
Measured on production before the fix: innerWidth 1767, header/footer 1752 — and `width: 100vw` did NOT
help, because with a stable gutter 100vw resolves to the reduced 1752 too. */
@media (max-width: 640px) {
html {
scrollbar-gutter: stable;
}
}
/* The other half of that assumption, now ENFORCED. From 641px up the app shell (.page) is height:100vh and
owns the scrolling via the ARTICLE, so the WINDOW must never scroll. .page clamps itself, but islands
rendered at the body root (the Kendo drawer container, static, in the body flow) can push the body a few px
past the viewport — enough to raise a SECOND window scrollbar beside the article's on a tall page (owner
report 2026-08-23: the /download page showed two). html/body already have height:100% above; this stops them
scrolling so the shell is the sole scroll authority. Verified live: the window bar disappears, the article's
remains. */
@media (min-width: 641px) {
html, body {
overflow: hidden;
}
}
/* ── 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;
gap: 0.6rem; /* = .wt-topbar-brand */
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;
display: inline-flex; /* mark + wordmark on one baseline-centred row */
align-items: center;
gap: 0.6rem;
font-size: 1.2rem;
font-weight: 600;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
/* The Molls and Hersh dachshund mark (Mollie + Hershie), shared by the top bar and the lock overlay.
ON A LIGHT PLATE, deliberately: mollsandhersh.com sets this mark on a near-WHITE header, and Mollie
(the black dachshund) simply disappears against our dark navy bar — verified in-browser, she read as a
smudge next to Hershie. The paper-toned plate restores the background the artwork was drawn for, so
both dogs are legible, and it reads as an intentional brand chip rather than a floating cut-out.
The tone matches the company site's paper background. */
.wt-brand-mark {
flex: 0 0 auto;
width: 42px;
height: 32px;
object-fit: contain;
padding: 3px 5px;
border-radius: 0.45rem;
background: #f4f2ee;
}
.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. */
/* Sized so all EIGHT chips fit one row inside .wt-identity's 920px reading column. At the previous
0.95rem/0.95rem-padding they measured ~958px, so "Personal data" alone wrapped to a second line — which
reads as a layout fault rather than a deliberate reflow (owner report 2026-08-01). flex-wrap is KEPT for
genuinely narrow viewports, where reflowing is correct; ManageNavChipsE2ETests pins the single row at
desktop width so this cannot silently regress when a chip is added or renamed. */
.wt-section-chips {
display: flex;
flex-wrap: wrap;
/* Tightened (WT-106c) so all nav chips fit ONE row across all 8 languages — the widest, French, sums to ~92
chars once the 2FA chip is the short "2FA". flex-wrap stays as a graceful fallback on very narrow windows. */
gap: 0.3rem;
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.3rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
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