html {
scrollbar-gutter: stable;
}
@media (min-width: 992px) {
:root {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
:root {
--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}
/*
* Web Hosting Ninja brand tokens (client-panel-tide redesign).
* No brand color existed anywhere in the codebase before this — the logo is a
* neutral grey/white mark with no dominant hue (theme_color_enabled is off by
* default). This block picks a calm, navy-adjacent blue and overrides Tabler's
* own --tblr-primary/--tblr-link-color custom properties, so every existing
* Bootstrap/Tabler component (btn-primary, text-primary, bg-primary, active
* nav-link, focus rings, form-check, etc.) picks it up automatically instead
* of needing new component classes. Contrast verified against WCAG 2.1 AA
* (4.5:1 for text/button labels, 3:1+ for large text and non-text UI):
* - light primary #1b4b91 on white: 8.53:1
* - white text on dark-mode primary #3b6fd1: 4.79:1
* - dark-mode link color #7aa2e8 on body #111827: 6.89:1
* Urgency/status colors deliberately reuse Tabler's existing danger/warning/
* success tokens (already dark-mode aware, already tuned by Tabler for AA)
* rather than introducing a parallel palette — see the .text-urgency-* /
* .bg-urgency-*-subtle aliases below.
*/
:root {
--tblr-primary: #1b4b91;
--tblr-primary-rgb: 27, 75, 145;
--tblr-link-color: #1b4b91;
--tblr-link-color-rgb: 27, 75, 145;
/* Urgency aliases — map to Tabler's own semantic colors, not new hex values.
Uses danger/warning/success (Bootstrap semantic names), not the extended
red/orange/green palette — only the semantic set ships -bg-subtle and
-text-emphasis pairs with distinct, contrast-checked light/dark values. */
--brand-urgency-critical: var(--tblr-danger);
--brand-urgency-warning: var(--tblr-warning);
--brand-urgency-ok: var(--tblr-success);
}
[data-bs-theme="dark"] {
--tblr-primary: #3b6fd1;
--tblr-primary-rgb: 59, 111, 209;
--tblr-link-color: #7aa2e8;
--tblr-link-color-rgb: 122, 162, 232;
}
/*
* Urgency utilities for the dashboard stat cards and Domains/Hosting rows.
* Pairs with an icon/text label in the markup — never color alone (WCAG
* 1.4.1). Built on Tabler's existing *-subtle / *-emphasis pairs, which
* already carry separate, contrast-checked values per color mode.
*/
.text-urgency-critical { color: var(--tblr-danger-text-emphasis); }
.text-urgency-warning { color: var(--tblr-warning-text-emphasis); }
.text-urgency-ok { color: var(--tblr-success-text-emphasis); }
.bg-urgency-critical-subtle { background-color: var(--tblr-danger-bg-subtle); }
.bg-urgency-warning-subtle { background-color: var(--tblr-warning-bg-subtle); }
.bg-urgency-ok-subtle { background-color: var(--tblr-success-bg-subtle); }
/*
* Solid urgency fills (progress bars only — resource usage nearing its
* limit). Note there is deliberately no solid ".bg-urgency-ok": a usage bar
* under threshold is a neutral, unremarkable state, not a "success" one, so
* it stays the neutral brand primary color rather than borrowing green.
*/
.bg-urgency-critical { background-color: var(--tblr-danger); }
.bg-urgency-warning { background-color: var(--tblr-warning); }
/*
* Brand-colored active tab (hosting-order-page redesign). Tabler's default
* nav-tabs active state uses plain body text color, distinguished only by
* the folder-tab border shape. Reuses --tblr-primary (no new color) so the
* active tab reads as brand-colored, consistent with the "one calm brand,
* everywhere" principle.
*/
.nav-tabs .nav-link.active {
color: var(--tblr-primary);
font-weight: var(--tblr-font-weight-medium);
}
/*
* Underline tabs — Stripe/Linear-style tab bar: no boxy "folder tab" borders,
* just a colored underline beneath the active tab. Opt-in via .nav-tabs-underline
* so it doesn't silently restyle every nav-tabs instance in the app (e.g. the
* Services list page keeps the classic boxed tabs unless deliberately changed).
* Re-skins the existing .nav-tabs markup/JS — Bootstrap's tab switching
* behavior (data-bs-toggle="tab", keyboard nav) is untouched, only the paint.
*/
.nav-tabs.nav-tabs-underline {
--tblr-nav-tabs-border-width: 0;
border-bottom: 1px solid var(--tblr-border-color);
gap: 1.5rem;
}
.nav-tabs.nav-tabs-underline .nav-link {
padding: 0.65rem 0.125rem;
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--tblr-secondary);
background: transparent;
transition: color .15s ease, border-color .15s ease;
}
.nav-tabs.nav-tabs-underline .nav-link:hover,
.nav-tabs.nav-tabs-underline .nav-link:focus {
color: var(--tblr-body-color);
border-bottom-color: var(--tblr-border-color);
isolation: isolate;
}
.nav-tabs.nav-tabs-underline .nav-link.active {
color: var(--tblr-primary);
border-bottom-color: var(--tblr-primary);
background: transparent;
}
body {
font-feature-settings: "cv03", "cv04", "cv11";
}
.small-dropdown .dropdown-item {
padding: 0.25rem 1.5rem;
}
.small-dropdown .dropdown-menu{
max-height: 60vh;
overflow-y: auto;
}
.small-dropdown .flag {
width: 20px;
height: 15px;
display: inline-block;
}
.navbar .nav-control {
height: 40px;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 14px;
border-radius: 0.5rem;
background-position: right 0.75rem center;
}
.navbar-brand-image {
height: 70px;
width: auto;
}
.responsive-logo {
height: 70px;
width: auto;
}
@media (max-width: 576px) {
.responsive-logo {
height: 52px;
}
}
/*
* Mobile header: the hamburger toggle now sits on its own row below the logo,
* to the left of the language/theme/avatar controls (which stay right-aligned
* via the existing .ms-auto on .navbar-nav). .navbar-break forces that row
* split reliably at every viewport width — flex-wrap alone only wraps once
* content stops fitting, which isn't guaranteed to land exactly after the
* logo — and doubles as the visible seam between the two rows.
*/
@media (max-width: 767.98px) {
.navbar-break {
flex-basis: 100%;
height: 1px;
margin: 0.5rem 0;
background: var(--tblr-border-color);
}
}