/* ==========================================================================
SMUDGE HOSTING - WHMCS CLIENT AREA THEME
Child theme of "nexus". Mirrors the design language of
https://www.smudgehosting.com (WordPress + YOOtheme Pro / UIkit 3).
Colours, type and geometry below were extracted from the live marketing
site's compiled stylesheet, so the two front ends match exactly.
Contents
1. Self-hosted webfonts 10. Sidebars
2. Design tokens 11. Tables
3. Base & typography 12. Alerts, badges & labels
4. Layout wrappers 13. Breadcrumbs, tabs & pagination
5. Links 14. Modals
6. Header & navigation 15. Store, domains & pricing
7. Buttons 16. Footer
8. Forms & inputs 17. Utilities & accessibility
9. Cards & panels 18. Nexus reconciliation
19. Order form reconciliation
20. Logged-in client area
Every custom property is namespaced --sh-* so it cannot collide with
Bootstrap or WHMCS. Override the tokens in section 2 to retheme.
========================================================================== */
/* ==========================================================================
1. SELF-HOSTED WEBFONTS
The same woff2 subsets the marketing site serves, so glyph rendering is
identical across WordPress and WHMCS. Inter Tight for body copy and
headings, Poppins for display headings, Inter for UI furniture.
========================================================================== */
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; src: url(../fonts/intertight-26115f7e.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; src: url(../fonts/intertight-d0efbe32.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+1F00-1FFF; src: url(../fonts/intertight-2a09b282.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; src: url(../fonts/intertight-0981b562.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; src: url(../fonts/intertight-d4176ce7.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url(../fonts/intertight-d80f811b.woff2) format('woff2'); }
@font-face {font-family: 'Inter Tight'; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url(../fonts/intertight-74e08002.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; src: url(../fonts/inter-bdbe9b99.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; src: url(../fonts/inter-40a67e83.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+1F00-1FFF; src: url(../fonts/inter-beb8a0e6.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; src: url(../fonts/inter-45ac3302.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; src: url(../fonts/inter-bbb2ed67.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url(../fonts/inter-b8b4d618.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url(../fonts/inter-0a48f1da.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; src: url(../fonts/inter-e6a38d4f.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; src: url(../fonts/inter-1bbb6855.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+1F00-1FFF; src: url(../fonts/inter-e5a5b630.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; src: url(../fonts/inter-1eb125d4.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; src: url(../fonts/inter-e0affbb1.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url(../fonts/inter-e3a9c0ce.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url(../fonts/inter-be0def27.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; src: url(../fonts/inter-b09ff544.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; src: url(../fonts/inter-4d87105e.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+1F00-1FFF; src: url(../fonts/inter-b399ce3b.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; src: url(../fonts/inter-488d5ddf.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; src: url(../fonts/inter-b69383ba.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url(../fonts/inter-b595b8c5.woff2) format('woff2'); }
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url(../fonts/inter-67bb25fb.woff2) format('woff2'); }
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; src: url(../fonts/poppins-18a386d1.woff2) format('woff2'); }
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url(../fonts/poppins-1da9cb50.woff2) format('woff2'); }
@font-face {font-family: 'Poppins'; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url(../fonts/poppins-581f0b26.woff2) format('woff2'); }
/* ==========================================================================
2. DESIGN TOKENS
2a. Smudge brand tokens (--sh-*) 2b. Nexus token layer, retoned
========================================================================== */
:root {
/* Surfaces — deepest to lightest */
--sh-bg: #04052f; /* page background */
--sh-bg-secondary: #090834; /* alternating band */
--sh-bg-muted: #151853; /* raised band */
--sh-bg-notice: #1a1e67; /* default alert background */
/* Glass surfaces — used for cards and panels */
--sh-glass: rgba(255, 255, 255, .08);
--sh-glass-strong: rgba(255, 255, 255, .12);
--sh-glass-blur: 25px;
/* Ink */
--sh-text: rgba(255, 255, 255, .7);
--sh-text-dim: rgba(255, 255, 255, .56); /* >= 4.5:1 on card glass */
--sh-text-faint: rgba(255, 255, 255, .38);
--sh-heading: #fff;
/* Lines */
--sh-border: rgba(255, 255, 255, .11);
--sh-border-strong: rgba(255, 255, 255, .2);
/* Brand ramp — the gradient stops, usable individually */
--sh-violet: #4501b3;
--sh-indigo: #345da9;
--sh-blue: #2690ca;
--sh-cyan: #15dbf5;
--sh-azure: #2ea3d2; /* flat primary fallback */
--sh-purple: #7b12a7; /* marketing-site accent; */
/* unused here - links hover */
/* to #fff on the dark page */
/* Signature gradients */
--sh-gradient: linear-gradient(40deg, #4501b3 0, #345da9 45%, #2690ca 70%, #15dbf5 100%);
--sh-gradient-hover: linear-gradient(40deg, #4501b3 0, #345da9 35%, #2690ca 60%, #15dbf5 100%);
--sh-gradient-active: linear-gradient(40deg, #4501b3 0, #345da9 20%, #2690ca 50%, #15dbf5 100%);
--sh-gradient-card: linear-gradient(30deg, #4501b3 0, #345da9 40%, #2690ca 70%, #15dbf5 100%);
--sh-glow: conic-gradient(from 60deg, #00b7f3, #0057da, #5101b4, #0853e9, #00b7f3);
/* Status */
--sh-success: #00d082;
--sh-warning: #ffb343;
--sh-danger: #fc1263;
/* White text on --sh-danger is 3.9:1, under AA. Anything carrying white
ink at body size uses this pressed red instead (6.1:1). */
--sh-danger-deep: #c20c4d;
--sh-info: #2ea3d2;
/* Focus glow — the violet halo used on the marketing site's inputs */
--sh-ring: 0 0 17px rgba(121, 0, 242, .23);
--sh-ring-focus: 0 0 17px rgba(121, 0, 242, .5);
/* Type */
--sh-font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sh-font-display: 'Poppins', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
--sh-font-ui: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
--sh-font-mono: Consolas, monaco, monospace;
/* Geometry */
--sh-radius-pill: 500px;
--sh-radius-card: 8px;
--sh-radius-sm: 3px;
--sh-control-h: 48px;
--sh-container: 1200px;
--sh-ease: .1s ease-in-out;
--sh-ease-slow: .2s ease-in-out;
}
/* --------------------------------------------------------------------------
2b. NEXUS TOKEN LAYER, RETONED
The compiled Nexus stylesheet reads 42 custom properties, and Nexus ships
them in its OWN css/custom.css. A child theme replaces that file, so if we
do not redeclare them here Nexus silently loses its radii, surfaces and
borders (every border-radius collapses to 0 and cards fall back to white).
Redefining them is also what makes this theme cheap to maintain: one
value here retones every Nexus component, instead of an override per rule.
-------------------------------------------------------------------------- */
:root {
--white: #fff;
/* Surfaces */
--bg: #090834; /* raised surface: cards, footers */
--bg-muted: #04052f; /* page */
--bg-lifted: #151853; /* hover / secondary band */
--bg-accented: #1a1e67; /* notices */
/* Nexus treats --bg-inverted as its dark shell: it paints html/body and
the footer with it, and reuses it for contrast chips and buttons. It
is the dark end of the scale, NOT the opposite of --bg. */
--bg-inverted: #04052f;
/* Ink */
--text: #fff;
--text-accented: rgba(255, 255, 255, .7);
--text-lifted: rgba(255, 255, 255, .5);
--text-muted: rgba(255, 255, 255, .56); /* Nexus uses this for body copy */
/* Likewise --text-inverted is the light ink Nexus puts on that dark
shell (.btn-link:hover, card-header buttons), so it stays white. */
--text-inverted: #fff;
/* Lines */
--border-muted: rgba(255, 255, 255, .07);
--border: rgba(255, 255, 255, .11);
--border-lifted: rgba(255, 255, 255, .2);
--border-accented: rgba(255, 255, 255, .32);
/* Brand */
--primary: #2690ca;
--primary-lifted: #345da9;
--primary-accented: #4501b3;
/* Also a chip fill (.status-cancelled), so solid for the same reason. */
--secondary: #454b73;
--secondary-lifted: #515780;
--secondary-accented: #5d648d;
/* Status - the marketing site's palette, with darker press states */
--success: #00d082;
--success-lifted: #00b873;
--success-accented: #009c61;
--info: #2ea3d2;
--info-lifted: #2993be;
--info-accented: #2483a9;
--notice: #7b12a7;
--notice-lifted: #6a0f90;
--notice-accented: #580c78;
--warning: #ffb343;
--warning-lifted: #ffa526;
--warning-accented: #e08e14;
--error: #fc1263;
--error-lifted: #e00f59;
--error-accented: #c20c4d;
/* Nexus's grey ramps are SOLID and DARK (its neutral-500..900), and it
only ever uses them as opaque fills: the account topbar, status chips,
labels and button borders. Translucent white looks right in isolation
but turns the topbar into a pale band and washes the chips out, so
these stay solid slates that carry white text. */
--grayscale: #1b1f45;
--grayscale-lifted: #262b56;
--grayscale-accented: #2f3566;
--neutral: #454b73;
--neutral-lifted: #515780;
--neutral-accented: #5d648d;
/* Accent hues used by .card-accent-* top borders. Brightened from the
Nexus defaults so they stay visible against the dark surface. */
--yellow-200: #fff085;
--yellow-300: #ffdf20;
--teal-300: #46edd5;
--teal-400: #00d5be;
--emerald-300: #5ee9b5;
--pink-400: #fb64b6;
/* Type scale and outline widths, unchanged from Nexus */
--text-xs: .625rem;
--text-sm: .75rem;
--text-md: .875rem;
--text-lg: 1rem;
--outline-sm: 1px;
--outline-md: 2px;
--outline-lg: 3px;
/* Rounding. 8px matches the marketing site's cards; buttons and inputs
take their pill radius from sections 7 and 8 instead. */
--rounding-sm: 4px;
--rounding-md: 8px;
--rounding-lg: 12px;
--letter-spacing: 0em;
--disabled-opacity: 40%;
}
/* ==========================================================================
3. BASE & TYPOGRAPHY
========================================================================== */
html {
font-family: var(--sh-font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
background: var(--sh-bg);
color: var(--sh-text);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
background: var(--sh-bg);
color: var(--sh-text);
font-family: var(--sh-font-body);
font-size: 16px;
line-height: 1.5;
}
/* Headings match the marketing site: Inter Tight, regular weight, white. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
legend {
font-family: var(--sh-font-body);
font-weight: 400;
color: var(--sh-heading);
letter-spacing: 0;
text-transform: none;
}
h1, .h1 { font-size: 2.6rem; line-height: 1.2; }
h2, .h2 { font-size: 2rem; line-height: 1.25; }
h3, .h3 { font-size: 1.5rem; line-height: 1.3; }
h4, .h4 { font-size: 1.25rem; line-height: 1.4; }
h5, .h5 { font-size: 1.0625rem; line-height: 1.4; }
h6, .h6 { font-size: .9375rem; line-height: 1.4; }
/* Page titles use the Poppins display face, as the marketing hero headings do. */
h1, .h1,
.master-breadcrumb + h1,
#main-body > h1:first-child {
font-family: var(--sh-font-display);
font-weight: 700;
}
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
small, .small { font-size: .875rem; }
hr {
border: 0;
border-top: 1px solid var(--sh-border);
margin: 30px 0;
}
code, pre, kbd, samp {
font-family: var(--sh-font-mono);
font-size: .875em;
}
code {
padding: 2px 6px;
background: rgba(0, 0, 0, .3);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-sm);
color: var(--sh-cyan);
}
pre {
padding: 15px;
background: rgba(0, 0, 0, .3);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
overflow: auto;
}
blockquote {
padding-left: 20px;
border-left: 3px solid var(--sh-blue);
color: var(--sh-text-dim);
font-style: italic;
}
::selection { background: var(--sh-violet); color: #fff; }
/* Keep images inside their column, but never override a sizing attribute.
WHMCS product descriptions use bare ![]()
with no width (the
Microsoft 365 icon strip, for one); a blanket "height: auto" throws that
away and the image springs to its intrinsic size. Aspect ratio only needs
protecting when max-width is what is doing the scaling, which is exactly
the case where a width attribute is present. */
img { max-width: 100%; }
img[width] { height: auto; }
/* Scrollbars tuned to the dark surface */
* {
scrollbar-width: thin;
scrollbar-color: var(--sh-border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sh-bg-secondary); }
::-webkit-scrollbar-thumb {
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
/* ==========================================================================
4. LAYOUT WRAPPERS
========================================================================== */
.outer-wrapper,
.inner-wrapper {
background: transparent;
}
#main-body,
.primary-content {
background: transparent;
color: var(--sh-text);
}
/* Give the content column breathing room comparable to a UIkit section. */
#main-body {
padding-top: 40px;
padding-bottom: 70px;
}
.container { max-width: var(--sh-container); }
/* Subtle ambient glow behind the page, echoing the marketing site's hero. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60rem 30rem at 15% -10%, rgba(69, 1, 179, .38), transparent 60%),
radial-gradient(50rem 28rem at 90% 5%, rgba(21, 219, 245, .14), transparent 60%);
}
.outer-wrapper,
#header,
#footer { position: relative; z-index: 1; }
/* ==========================================================================
5. LINKS
========================================================================== */
a,
.btn-link {
color: var(--sh-cyan);
text-decoration: none;
transition: color var(--sh-ease);
}
a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
color: #fff;
text-decoration: none;
}
/* ==========================================================================
6. HEADER & NAVIGATION
Mirrors the marketing site translucent, blurred navbar:
rgba(4,5,47,.8) over a 40px backdrop blur.
========================================================================== */
#header,
.header {
background: transparent;
border: 0;
box-shadow: none;
}
#header .navbar.navbar-light {
background: transparent;
padding: 0;
}
#header .navbar-brand {
padding: 0;
margin: 0;
}
#header .logo-img,
#header .navbar-brand img {
max-height: 56px;
width: auto;
}
/* Main navigation bar - the blurred glass strip */
.main-navbar-wrapper {
background: rgba(4, 5, 47, .8);
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
border-top: 1px solid var(--sh-border);
border-bottom: 1px solid var(--sh-border);
padding: 0;
position: relative;
z-index: 990;
}
/* Keep the bar pinned and legible while scrolling. */
@supports (position: sticky) {
.main-navbar-wrapper {
position: sticky;
top: 0;
}
}
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav > li > .nav-link,
#nav > li > a {
display: block;
padding: 16px 15px;
color: var(--sh-text);
font-family: var(--sh-font-ui);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-transform: none;
letter-spacing: 0;
position: relative;
transition: color var(--sh-ease);
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.show > a,
#nav > li > a:hover,
#nav > li.active > a,
#nav > li.show > a {
color: #fff;
}
/* Gradient underline on the active / hovered item */
.main-navbar-wrapper .navbar-nav > li > a::after,
#nav > li > a::after {
content: "";
position: absolute;
left: 15px;
right: 15px;
bottom: 0;
height: 2px;
background: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
opacity: 0;
transform: scaleX(.4);
transition: opacity var(--sh-ease), transform var(--sh-ease);
}
.main-navbar-wrapper .navbar-nav > li > a:hover::after,
.main-navbar-wrapper .navbar-nav > li.active > a::after,
.main-navbar-wrapper .navbar-nav > li.show > a::after,
#nav > li > a:hover::after,
#nav > li.active > a::after,
#nav > li.show > a::after {
opacity: 1;
transform: scaleX(1);
}
/* Items linking back to the marketing site, added by the navigation hook in
includes/hooks/smudge_navigation.php. WHMCS renders every navbar item with
id="Primary_Navbar-- ", which is what we hook onto here. */
#nav > li.sh-site-link > a,
#nav > li#Primary_Navbar-Hosting > a,
#nav > li#Primary_Navbar-Domains > a,
#nav > li#Primary_Navbar-Collaboration > a,
#nav > li#Primary_Navbar-Maverick > a {
color: rgba(255, 255, 255, .82);
}
/* Divider separating the marketing links from the client-area links.
"Home" is the first item WHMCS contributes itself, so the rule hangs off it. */
#nav > li.sh-nav-divide,
#nav > li#Primary_Navbar-Home {
border-left: 1px solid var(--sh-border);
margin-left: 10px;
padding-left: 10px;
}
/* Dropdowns - glass panels with a soft shadow */
.dropdown-menu {
background: rgba(9, 8, 52, .92);
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
padding: 8px;
margin-top: 6px;
color: var(--sh-text);
}
.dropdown-menu .dropdown-item,
.dropdown-menu > li > a,
.dropdown-item > a {
color: var(--sh-text);
border-radius: var(--sh-radius-sm);
padding: 8px 12px;
background: transparent;
white-space: normal;
transition: background-color var(--sh-ease), color var(--sh-ease);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-item > a:hover,
.dropdown-item > a:focus {
background-color: var(--sh-glass-strong);
color: #fff;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
background-image: var(--sh-gradient);
color: #fff;
}
/* WHMCS nests a.dropdown-item inside li.dropdown-item; neutralise the
outer element so padding is not applied twice. */
li.dropdown-item {
padding: 0;
background: transparent;
}
li.dropdown-item:hover,
li.dropdown-item:focus { background: transparent; }
.dropdown-divider {
border-top-color: var(--sh-border);
margin: 6px 4px;
}
.dropdown-toggle::after { vertical-align: .2em; }
/* Toolbar - cart and mobile toggle */
#header .navbar-nav.toolbar .btn.nav-link,
#header .navbar-nav.toolbar .nav-link {
background: transparent;
background-image: none;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
color: var(--sh-text);
box-shadow: none;
padding: 10px 14px;
height: auto;
line-height: 1;
min-width: 0;
}
#header .navbar-nav.toolbar .btn.nav-link::before,
#header .navbar-nav.toolbar .btn.nav-link::after { display: none; }
#header .navbar-nav.toolbar .btn.nav-link:hover,
#header .navbar-nav.toolbar .nav-link:hover {
background: var(--sh-glass-strong);
border-color: var(--sh-border-strong);
color: #fff;
}
.cart-btn .badge,
#cartItemCount {
background: var(--sh-gradient);
color: #fff;
font-family: var(--sh-font-ui);
font-size: 11px;
}
/* Knowledgebase search in the header */
#header .input-group.search .form-control {
background: rgba(11, 23, 40, .35);
border-color: var(--sh-border);
color: #fff;
}
#header .input-group.search .btn,
#header .input-group.search .btn-default {
background: transparent;
background-image: none;
border: 1px solid var(--sh-border);
border-right: 0;
color: var(--sh-text-dim);
box-shadow: none;
}
#header .input-group.search .btn::before,
#header .input-group.search .btn::after { display: none; }
/* Mobile collapse panel */
@media (max-width: 1199.98px) {
#mainNavbar {
padding: 10px 0 16px;
}
.main-navbar-wrapper .navbar-nav > li > a,
#nav > li > a {
padding: 12px 4px;
}
.main-navbar-wrapper .navbar-nav > li > a::after,
#nav > li > a::after { left: 4px; right: 4px; }
#nav > li.sh-nav-divide,
#nav > li#Primary_Navbar-Home {
border-left: 0;
border-top: 1px solid var(--sh-border);
margin-left: 0;
padding-left: 0;
margin-top: 8px;
padding-top: 8px;
}
#mainNavbar .dropdown-menu {
background: rgba(0, 0, 0, .25);
box-shadow: none;
margin: 0 0 8px;
}
}
/* ==========================================================================
7. BUTTONS
Pill-shaped, 48px tall, Inter. The primary button carries the brand
gradient plus a blurred conic-gradient glow behind it - the marketing
site signature treatment.
========================================================================== */
.btn {
font-family: var(--sh-font-ui);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
padding: 0 30px;
height: var(--sh-control-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
border: none;
border-radius: var(--sh-radius-pill);
text-transform: none;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
background-origin: border-box;
transition: color var(--sh-ease), background-color var(--sh-ease),
background-position var(--sh-ease), box-shadow var(--sh-ease),
opacity var(--sh-ease);
}
.btn:focus,
.btn.focus {
outline: 0;
box-shadow: var(--sh-ring-focus);
}
.btn-sm,
.btn-group-sm > .btn {
height: 36px;
padding: 0 18px;
font-size: 14px;
}
.btn-lg,
.btn-group-lg > .btn {
height: 56px;
padding: 0 38px;
font-size: 17px;
}
.btn-block {
display: flex;
width: 100%;
}
.btn.disabled,
.btn:disabled {
background-color: rgba(9, 8, 52, .75);
background-image: none;
color: var(--sh-text-dim);
box-shadow: none;
opacity: 1;
}
.btn.disabled::before,
.btn:disabled::before { display: none; }
/* --- Primary: gradient fill + conic glow ------------------------------- */
.btn-primary,
.btn-order-now,
.btn-add-to-cart,
.btn-checkout {
position: relative;
z-index: 0;
color: #fff;
background-color: var(--sh-azure);
background-image: var(--sh-gradient);
box-shadow: none;
}
.btn-primary::after,
.btn-order-now::after,
.btn-add-to-cart::after,
.btn-checkout::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: var(--sh-azure);
background-image: var(--sh-gradient);
}
.btn-primary::before,
.btn-order-now::before,
.btn-add-to-cart::before,
.btn-checkout::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
border-radius: inherit;
background-image: var(--sh-glow);
filter: blur(10px);
will-change: filter;
transition: filter var(--sh-ease);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-order-now:hover,
.btn-add-to-cart:hover,
.btn-checkout:hover {
color: #fff;
background-image: var(--sh-gradient-hover);
}
.btn-primary:hover::after,
.btn-order-now:hover::after,
.btn-add-to-cart:hover::after,
.btn-checkout:hover::after { background-image: var(--sh-gradient-hover); }
.btn-primary:hover::before,
.btn-order-now:hover::before,
.btn-add-to-cart:hover::before,
.btn-checkout:hover::before { filter: blur(16px); }
.btn-primary:active,
.btn-primary.active,
.btn-order-now:active,
.btn-add-to-cart:active {
background-image: var(--sh-gradient-active);
}
.btn-primary:active::after,
.btn-primary.active::after { background-image: var(--sh-gradient-active); }
/* --- Default / secondary: glass pill ----------------------------------- */
/* The marketing site's .uk-button-default is a solid white pill, but it uses
it sparingly as a hero CTA. WHMCS uses .btn-default as its generic neutral
button in ~86 places, including small inline buttons inside card headers
and service rows, where solid white shouts far louder than the action
deserves. Glass reads as secondary and keeps the pill shape.
.btn-light stays white for the occasional bright secondary. */
.btn-default,
.btn-secondary {
background-color: var(--sh-glass);
background-image: none;
color: #fff;
box-shadow: inset 0 0 0 1px var(--sh-border);
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
background-color: var(--sh-glass-strong);
color: #fff;
box-shadow: inset 0 0 0 1px var(--sh-border-strong);
}
.btn-light {
background-color: #fff;
background-image: none;
color: #000;
box-shadow: none;
}
.btn-light:hover,
.btn-light:focus {
background-color: rgba(255, 255, 255, .88);
color: #000;
}
/* --- Outline variants -------------------------------------------------- */
.btn-outline-primary {
background: transparent;
color: var(--sh-cyan);
box-shadow: inset 0 0 0 1px var(--sh-border-strong);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background-image: var(--sh-gradient);
color: #fff;
box-shadow: none;
}
.btn-outline-light,
.btn-outline-secondary,
.btn-outline-dark {
background: transparent;
color: var(--sh-text);
box-shadow: inset 0 0 0 1px var(--sh-border);
}
.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
background: var(--sh-glass-strong);
color: #fff;
box-shadow: inset 0 0 0 1px var(--sh-border-strong);
}
/* --- Status variants --------------------------------------------------- */
.btn-success { background-color: var(--sh-success); background-image: none; color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #00b873; color: #fff; }
.btn-danger { background-color: var(--sh-danger-deep); background-image: none; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #a80a43; color: #fff; }
.btn-warning { background-color: var(--sh-warning); background-image: none; color: #1a1300; }
.btn-warning:hover, .btn-warning:focus { background-color: #ffa526; color: #1a1300; }
.btn-info { background-color: var(--sh-info); background-image: none; color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: #2993be; color: #fff; }
/* --- Link-style buttons ------------------------------------------------ */
.btn-link {
background: transparent;
background-image: none;
box-shadow: none;
color: var(--sh-cyan);
height: auto;
padding: 0;
}
.btn-link:hover { color: #fff; background: transparent; }
/* Buttons inside input groups stay square-edged so they join cleanly
with the adjacent field. */
.input-group .btn,
.input-group-prepend .btn,
.input-group-append .btn {
height: var(--sh-control-h);
border-radius: 0;
padding: 0 18px;
}
/* Only the outermost button in a welded group gets the rounded outer edge.
An append can hold several buttons - the dashboard's domain widget puts
Register and Transfer in one - and rounding them all leaves a bulge in the
middle of the group. */
.input-group-prepend:first-child .btn:first-child {
border-top-left-radius: var(--sh-radius-pill);
border-bottom-left-radius: var(--sh-radius-pill);
padding-left: 22px;
}
.input-group-append:last-child .btn:last-child {
border-top-right-radius: var(--sh-radius-pill);
border-bottom-right-radius: var(--sh-radius-pill);
padding-right: 22px;
}
/* ==========================================================================
8. FORMS & INPUTS
Pill fields on a translucent base, with the violet focus halo used
throughout the marketing site.
========================================================================== */
.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea {
width: 100%;
max-width: 100%;
height: var(--sh-control-h);
padding: 0 18px;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
background: rgba(11, 23, 40, .35);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
color: #fff;
font-family: var(--sh-font-body);
font-size: 16px;
line-height: 1.5;
box-shadow: var(--sh-ring), inset 0 0 20px 1px rgba(9, 8, 52, .4);
transition: color var(--sh-ease-slow), background-color var(--sh-ease-slow),
border-color var(--sh-ease-slow), box-shadow var(--sh-ease-slow);
-webkit-appearance: none;
appearance: none;
}
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
outline: 0;
background-color: var(--sh-bg);
color: #fff;
border-color: var(--sh-border-strong);
box-shadow: var(--sh-ring-focus), inset 0 0 20px 1px rgba(9, 8, 52, .4);
}
/* Textareas and multi-line controls need square corners to stay readable. */
textarea,
textarea.form-control,
select[multiple],
select[size] {
height: auto;
min-height: 120px;
padding: 14px 18px;
border-radius: var(--sh-radius-card);
line-height: 1.6;
}
select[multiple],
select[size] { min-height: 0; }
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
color: var(--sh-text-faint);
opacity: 1;
}
.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled {
background: rgba(9, 8, 52, .6);
color: var(--sh-text-dim);
box-shadow: none;
cursor: not-allowed;
}
/* Native dropdown arrow, drawn light so it reads on the dark field. */
.custom-select,
select:not([multiple]):not([size]) {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 44px;
}
/* Options render in the OS dropdown, which uses its own surface. */
.custom-select option,
select option {
background: var(--sh-bg-secondary);
color: #fff;
}
.form-group { margin-bottom: 20px; }
label,
.col-form-label,
.control-label {
color: var(--sh-text);
font-family: var(--sh-font-ui);
font-size: 15px;
font-weight: 400;
margin-bottom: 8px;
}
.form-text,
.help-block,
small.text-muted {
color: var(--sh-text-dim);
font-size: .875rem;
}
/* Checkboxes and radios */
.custom-control-label::before {
background: rgba(11, 23, 40, .5);
border: 1px solid var(--sh-border);
}
.custom-control-input:checked ~ .custom-control-label::before {
background-image: var(--sh-gradient);
border-color: transparent;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: var(--sh-ring-focus);
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
height: auto;
accent-color: var(--sh-blue);
box-shadow: none;
}
/* Input groups */
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
background: rgba(11, 23, 40, .5);
border: 1px solid var(--sh-border);
color: var(--sh-text-dim);
}
.input-group > .form-control:not(:first-child),
.prepended-form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child),
.appended-form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* Nexus re-rounds the size variants to 8px at ".input-group-lg >
.form-control" specificity, which left the knowledgebase and domain
checker fields half pill, half rounded rectangle. The inner-edge
flattening above is a class more specific again, so it still wins. */
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-sm > .form-control,
.input-group-sm > .custom-select {
border-radius: var(--sh-radius-pill);
}
/* The icon affixes on either end take the pill radius, so an icon + field +
button assembly reads as one control rather than three. */
.input-group > .input-group-prepend:first-child > .input-group-text:first-child {
border-radius: var(--sh-radius-pill) 0 0 var(--sh-radius-pill);
padding-left: 20px;
border-right: 0;
}
.input-group > .input-group-append:last-child > .input-group-text:last-child {
border-radius: 0 var(--sh-radius-pill) var(--sh-radius-pill) 0;
padding-right: 20px;
border-left: 0;
}
/* WHMCS icon-prefixed fields */
.field-icon,
.prepend-icon .field-icon {
color: var(--sh-text-faint);
}
.prepend-icon .form-control { padding-left: 44px; }
/* Validation states */
.has-error .form-control,
.form-control.is-invalid,
.form-control.invalid,
.is-invalid {
border-color: var(--sh-danger);
box-shadow: 0 0 17px rgba(252, 18, 99, .35);
}
.has-success .form-control,
.form-control.is-valid {
border-color: var(--sh-success);
box-shadow: 0 0 17px rgba(0, 208, 130, .3);
}
.invalid-feedback,
.text-danger,
.has-error .help-block { color: #ff5c8d; }
.valid-feedback { color: var(--sh-success); }
/* Password strength meter */
.progress {
background: rgba(0, 0, 0, .35);
border-radius: var(--sh-radius-pill);
height: 8px;
overflow: hidden;
}
.progress-bar {
background-image: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
}
.progress-bar.bg-success { background-color: var(--sh-success); background-image: none; }
.progress-bar.bg-danger { background-color: var(--sh-danger); background-image: none; }
.progress-bar.bg-warning { background-color: var(--sh-warning); background-image: none; }
/* Phone-country selector (intl-tel-input) */
.intl-tel-input .country-list {
background: var(--sh-bg-secondary);
border: 1px solid var(--sh-border);
color: var(--sh-text);
}
.intl-tel-input .country-list .country.highlight {
background: var(--sh-glass-strong);
}
.intl-tel-input .country-list .divider { border-bottom-color: var(--sh-border); }
/* ==========================================================================
9. CARDS & PANELS
Frosted glass over the dark page, matching uk-card-default:
rgba(255,255,255,.08) with a 25px backdrop blur and an 8px radius.
========================================================================== */
.card,
.panel {
background-color: var(--sh-glass);
-webkit-backdrop-filter: blur(var(--sh-glass-blur));
backdrop-filter: blur(var(--sh-glass-blur));
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
margin-bottom: 30px;
}
.card-header,
.panel-heading {
background: transparent;
border-bottom: 1px solid var(--sh-border);
color: var(--sh-heading);
padding: 20px 30px;
font-family: var(--sh-font-ui);
font-size: 17px;
border-radius: 0;
}
.card-header:first-child { border-radius: var(--sh-radius-card) var(--sh-radius-card) 0 0; }
.card-body,
.panel-body,
.collapsable-card-body {
background: transparent;
padding: 30px;
color: var(--sh-text);
}
.card-footer,
.panel-footer {
background: rgba(0, 0, 0, .18);
border-top: 1px solid var(--sh-border);
color: var(--sh-text);
padding: 20px 30px;
}
.card-title,
.panel-title {
color: var(--sh-heading);
font-family: var(--sh-font-body);
font-weight: 400;
margin-bottom: 0;
}
.card-title a,
.panel-title a { color: var(--sh-heading); }
.card-text { color: var(--sh-text); }
/* Bootstrap's primary surface utility carries the brand gradient.
The .card-accent-* classes are handled in section 18 instead: Nexus uses
them for the action tiles, where only the 3px top border should be
coloured and the face stays glass. */
.bg-primary {
background-color: var(--sh-azure) !important;
background-image: var(--sh-gradient-card) !important;
border-color: transparent;
color: #fff !important;
}
.bg-primary .card-title,
.bg-primary a { color: #fff; }
/* Collapse / minimise chevrons */
.card-minimise,
.panel-minimise {
color: var(--sh-text-dim);
transition: color var(--sh-ease), transform var(--sh-ease);
}
.card-minimise:hover,
.panel-minimise:hover { color: #fff; }
/* Larger card padding on wide screens, as the marketing site does. */
@media (min-width: 1200px) {
.card-body,
.panel-body { padding: 40px; }
.card-header,
.panel-heading { padding: 24px 40px; }
}
/* ==========================================================================
10. SIDEBARS
========================================================================== */
.sidebar .card,
.sidebar .panel,
.card-sidebar,
.panel-sidebar {
background-color: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
}
.sidebar .card-header,
.sidebar .panel-heading,
.card-sidebar .card-header {
padding: 16px 20px;
font-size: 16px;
}
.sidebar .list-group,
.sidebar .list-group-flush { background: transparent; }
.sidebar-menu-item-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-menu-item-icon-wrapper,
.sidebar-menu-item-icon {
color: var(--sh-text-faint);
transition: color var(--sh-ease);
}
.list-group-item:hover .sidebar-menu-item-icon,
.list-group-item.active .sidebar-menu-item-icon { color: var(--sh-cyan); }
.sidebar-menu-item-label { color: inherit; }
.sidebar-menu-item-badge {
background: var(--sh-gradient);
color: #fff;
border-radius: var(--sh-radius-pill);
font-family: var(--sh-font-ui);
font-size: 11px;
padding: 2px 8px;
}
/* ---- List groups (used for every sidebar menu and many content lists) -- */
.list-group { border-radius: var(--sh-radius-card); }
.list-group-item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--sh-border);
color: var(--sh-text);
padding: 14px 20px;
transition: background-color var(--sh-ease), color var(--sh-ease);
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: var(--sh-glass-strong);
color: #fff;
}
.list-group-item.active,
.list-group-item-action.active {
background-color: transparent;
background-image: var(--sh-gradient);
border-color: transparent;
color: #fff;
}
.list-group-item.disabled,
.list-group-item:disabled {
background: transparent;
color: var(--sh-text-faint);
}
.list-group-item a { color: var(--sh-text); }
.list-group-item a:hover { color: #fff; }
.list-group-item.active a { color: #fff; }
/* ==========================================================================
11. TABLES
========================================================================== */
.table {
color: var(--sh-text);
background: transparent;
margin-bottom: 20px;
}
.table th {
padding: 16px 12px;
border: 0;
border-bottom: 1px solid var(--sh-border);
text-align: left;
vertical-align: bottom;
font-family: var(--sh-font-ui);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--sh-heading);
}
.table td {
padding: 16px 12px;
border: 0;
border-top: 1px solid var(--sh-border);
vertical-align: middle;
color: var(--sh-text);
}
.table thead th {
border-bottom: 1px solid var(--sh-border);
background: transparent;
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03); }
.table-hover tbody tr:hover {
background: var(--sh-glass);
color: #fff;
}
.table-bordered,
.table-bordered th,
.table-bordered td { border-color: var(--sh-border); }
.table .thead-light th,
.table .thead-dark th {
background: rgba(0, 0, 0, .25);
color: var(--sh-heading);
border-color: var(--sh-border);
}
.table-responsive { border: 0; }
/* Contextual rows */
.table .table-success, .table tr.success { background: rgba(0, 208, 130, .12); }
.table .table-danger, .table tr.danger { background: rgba(252, 18, 99, .12); }
.table .table-warning, .table tr.warning { background: rgba(255, 179, 67, .12); }
.table .table-info, .table tr.info { background: rgba(46, 163, 210, .12); }
/* ==========================================================================
12. ALERTS, BADGES & LABELS
========================================================================== */
.alert {
position: relative;
margin-bottom: 20px;
padding: 15px 29px 15px 15px;
background: var(--sh-bg-notice);
color: var(--sh-text);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-sm);
}
.alert a,
.alert .alert-link {
color: #fff;
text-decoration: underline;
}
.alert-primary,
.alert-info {
background: var(--sh-indigo);
border-color: transparent;
color: #fff;
}
.alert-success {
background: #00794b;
border-color: transparent;
color: #fff;
}
.alert-warning {
background: var(--sh-warning);
border-color: transparent;
color: #1a1300;
}
.alert-warning a,
.alert-warning .close { color: #1a1300; }
.alert-danger {
background: var(--sh-danger-deep);
border-color: transparent;
color: #fff;
}
.alert-secondary {
background: var(--sh-bg-notice);
border-color: var(--sh-border);
color: var(--sh-text);
}
/* Nexus turns any alert that wraps a form white, via .alert:has(form) - the
contact chooser on the Contacts page is one, which left white-on-white
text. Matching that selector keeps the intent (a form container should not
look like a notice) with a surface that suits the dark page. */
.alert:has(form) {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
color: var(--sh-text);
}
.alert:has(form) label,
.alert:has(form) .col-form-label { color: var(--sh-text); }
.alert .close,
.close {
color: #fff;
opacity: .6;
text-shadow: none;
transition: opacity var(--sh-ease);
}
.close:hover,
.close:focus { color: #fff; opacity: 1; }
/* Badges and labels - Inter, pill for counters, near-square for labels. */
.badge {
font-family: var(--sh-font-ui);
font-weight: 400;
font-size: 11px;
padding: 4px 8px;
border-radius: 2px;
background: var(--sh-indigo);
color: #fff;
vertical-align: middle;
}
.badge-pill {
border-radius: var(--sh-radius-pill);
min-width: 18px;
padding: 4px 7px;
}
.badge-primary { background: var(--sh-indigo); color: #fff; }
.badge-secondary { background: var(--sh-glass-strong); color: #fff; }
.badge-success { background: var(--sh-success); color: #fff; }
.badge-warning { background: var(--sh-warning); color: #1a1300; }
.badge-danger { background: var(--sh-danger-deep); color: #fff; }
.badge-info { background: var(--sh-indigo); color: #fff; }
.badge-dark { background: rgba(0, 0, 0, .45); color: #fff; }
.badge-light { background: #fff; color: #000; }
/* WHMCS status labels */
.label {
display: inline-block;
padding: 2px 10px;
background-color: var(--sh-indigo);
border-radius: 2px;
font-family: var(--sh-font-ui);
font-size: 14px;
line-height: 1.5;
color: #fff;
white-space: nowrap;
}
.label-success { background-color: var(--sh-success); color: #04251a; }
.label-warning { background-color: var(--sh-warning); color: #1a1300; }
.label-danger { background-color: var(--sh-danger-deep); color: #fff; }
.label-info { background-color: var(--sh-info); color: #fff; }
.label-default { background-color: var(--sh-glass-strong); color: #fff; }
/* --- Ticket statuses ---------------------------------------------------- */
/* Nexus maps each ticket status onto one of its own tokens, but the .label
rule above sets a background at the same specificity and later in the
cascade, which flattened every status to a single colour. Restating them
here is what keeps the colour coding.
Answered is green so it reads clearly apart from Closed, which is
deliberately muted - a closed ticket needs no attention.
If a status still shows some other colour, it has a Status Color set in
Configuration -> System Settings -> Ticket Statuses. WHMCS emits that hex
inline, and no stylesheet can override an inline style. */
.status-open { background-color: var(--sh-info); color: #04252b; }
.status-answered { background-color: var(--sh-success); color: #04251a; }
.status-customer-reply { background-color: var(--sh-warning); color: #1a1300; }
.status-inprogress { background-color: var(--sh-purple); color: #fff; }
.status-onhold { background-color: #454b73; color: #fff; }
.status-closed { background-color: #363b5e; color: rgba(255, 255, 255, .85); }
/* --- Service, domain & billing statuses -------------------------------- */
.status-active,
.status-completed,
.status-paid {
background-color: var(--sh-success);
color: #04251a;
}
/* Amber for states that are recoverable or awaiting something... */
.status-pending,
.status-pending-registration,
.status-pending-transfer,
.status-grace,
.status-redemption,
.status-suspended {
background-color: var(--sh-warning);
color: #1a1300;
}
/* ...and red only for the ones that are final or need acting on. */
.status-cancelled,
.status-terminated,
.status-fraud,
.status-unpaid {
background-color: var(--sh-danger-deep);
color: #fff;
}
.status-expired,
.status-transferred-away,
.status-dead,
.status-lost {
background-color: #454b73;
color: #fff;
}
.status-collections { background-color: #5d648d; color: #fff; }
.status-refunded { background-color: var(--sh-cyan); color: #04252b; }
/* --- Ink on the bright status fills ------------------------------------ */
/* WHMCS puts white text on every bright fill, which the marketing site's
greens and ambers cannot carry: white on #00d082 is 2.0:1. Keeping the
vivid fill and darkening the ink holds the brand colour and clears AA at
8:1 and up - the same trick .alert-warning already used. Alerts keep white
ink on a deeper fill instead, because a paragraph reads better that way. */
.badge-success,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.progress-bar.bg-success {
color: #04251a;
}
.badge-warning,
.btn-warning,
.btn-warning:hover,
.btn-warning:focus {
color: #1a1300;
}
/* Nexus sets ".div-service-status .label { color:#fff }", which outranks the
single-class chip rules above, so these need matching specificity. */
.div-service-status .label-success,
.div-service-status .status-active,
.div-service-status .status-completed,
.div-service-status .status-answered {
color: #04251a;
}
.div-service-status .label-warning,
.div-service-status .status-pending,
.div-service-status .status-suspended {
color: #1a1300;
}
/* Icons riding inside a bright chip inherit the same ink. */
.label-success i, .badge-success i, .btn-success i,
.label-warning i, .badge-warning i, .btn-warning i { color: inherit; }
/* ==========================================================================
13. BREADCRUMBS, TABS & PAGINATION
========================================================================== */
.breadcrumb,
.master-breadcrumb {
background: transparent;
padding: 0 0 10px;
margin-bottom: 20px;
font-size: 14px;
border-radius: 0;
}
.breadcrumb-item,
.breadcrumb-item a { color: var(--sh-text-dim); }
.breadcrumb-item a:hover { color: #fff; }
.breadcrumb-item.active { color: var(--sh-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sh-text-faint); }
/* Tabs */
.nav-tabs {
border-bottom: 1px solid var(--sh-border);
margin-bottom: 24px;
}
.nav-tabs .nav-link {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--sh-text-dim);
font-family: var(--sh-font-ui);
padding: 12px 18px;
background: transparent;
transition: color var(--sh-ease), border-color var(--sh-ease);
}
.nav-tabs .nav-link:hover { color: #fff; border-bottom-color: var(--sh-border-strong); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background: transparent;
border-color: transparent;
border-bottom: 2px solid var(--sh-cyan);
color: #fff;
}
.nav-pills .nav-link {
border-radius: var(--sh-radius-pill);
color: var(--sh-text);
}
.nav-pills .nav-link.active {
background-image: var(--sh-gradient);
color: #fff;
}
.tab-content { color: var(--sh-text); }
/* Pagination */
.pagination { gap: 6px; }
.page-link {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-sm);
color: var(--sh-text);
transition: background-color var(--sh-ease), color var(--sh-ease);
}
.page-link:hover {
background: var(--sh-glass-strong);
border-color: var(--sh-border-strong);
color: #fff;
}
.page-item.active .page-link {
background-image: var(--sh-gradient);
border-color: transparent;
color: #fff;
}
.page-item.disabled .page-link {
background: transparent;
color: var(--sh-text-faint);
border-color: var(--sh-border);
}
/* ==========================================================================
14. MODALS
========================================================================== */
.modal-content {
background: rgba(9, 8, 52, .96);
-webkit-backdrop-filter: blur(var(--sh-glass-blur));
backdrop-filter: blur(var(--sh-glass-blur));
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
color: var(--sh-text);
}
.modal-header {
border-bottom: 1px solid var(--sh-border);
padding: 20px 30px;
}
.modal-title {
color: var(--sh-heading);
font-family: var(--sh-font-body);
font-weight: 400;
}
.modal-body { padding: 30px; }
.modal-footer {
border-top: 1px solid var(--sh-border);
padding: 20px 30px;
gap: 10px;
}
.modal-backdrop,
.modal-backdrop.show {
background: #04052f;
opacity: .82;
}
/* ==========================================================================
15. STORE, DOMAINS & PRICING
========================================================================== */
/* Domain search result states */
.domain-lookup-result,
.domain-checker-available,
.domain-checker-unavailable {
border-radius: var(--sh-radius-card);
border: 1px solid var(--sh-border);
background: var(--sh-glass);
}
.domain-lookup-result.available,
.available {
border-color: rgba(0, 208, 130, .45);
background: rgba(0, 208, 130, .1);
}
.domain-lookup-result.unavailable,
.unavailable,
.domain-checker-unavailable {
border-color: rgba(252, 18, 99, .4);
background: rgba(252, 18, 99, .08);
}
.domain-lookup-result.invalid,
.invalid { border-color: rgba(255, 179, 67, .45); }
/* TLD pricing rows */
.tld-row {
border-bottom: 1px solid var(--sh-border);
padding: 14px 0;
}
.tld-row:last-child { border-bottom: 0; }
.spotlight-tld,
.spotlight-tld-container {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
}
/* The featured-TLD tile keeps a light plate behind the registry logo:
Verisign's .com/.net and Nominet's .co.uk marks are dark artwork drawn for
white backgrounds and vanish on glass. Tile and price strip stay dark. */
.featured-tld {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
overflow: hidden;
}
.featured-tld .img-container {
background: #fff;
padding: 16px 0;
}
.spotlight-tld-hot,
.tld-sale-group-hot {
background: var(--sh-danger-deep);
color: #fff;
border-radius: var(--sh-radius-pill);
padding: 2px 10px;
font-family: var(--sh-font-ui);
font-size: 11px;
text-transform: uppercase;
}
.tld-sale-group-new {
background: var(--sh-success);
color: #fff;
border-radius: var(--sh-radius-pill);
padding: 2px 10px;
font-family: var(--sh-font-ui);
font-size: 11px;
text-transform: uppercase;
}
/* Prices and product tiles */
.price,
.product-pricing,
.feature-value,
.pricing-card-title {
color: var(--sh-heading);
font-family: var(--sh-font-display);
font-weight: 700;
}
.pricing-card-title { font-size: 2.2rem; line-height: 1.1; }
.setup-fee,
.product-desc,
.text-muted,
.text-black-50 {
color: var(--sh-text-dim) !important;
}
.product { color: var(--sh-text); }
/* Spinners and loaders */
.loader,
.domain-lookup-loader,
.domain-lookup-spotlight-loader {
border-color: var(--sh-border);
border-top-color: var(--sh-cyan);
}
/* ==========================================================================
16. FOOTER
========================================================================== */
#footer,
.footer {
background: var(--sh-bg-secondary);
border-top: 1px solid var(--sh-border);
color: var(--sh-text-dim);
padding: 40px 0 30px;
margin-top: 0;
}
#footer .nav-link,
.footer .nav-link {
color: var(--sh-text-dim);
padding: 6px 14px;
font-family: var(--sh-font-ui);
font-size: 15px;
transition: color var(--sh-ease);
}
#footer .nav-link:hover,
.footer .nav-link:hover { color: #fff; }
#footer .copyright,
.footer .copyright {
color: var(--sh-text-dim);
font-size: 14px;
margin-top: 16px;
}
/* Language / currency selector button */
#footer .btn-outline-light,
.footer .btn-outline-light {
height: 36px;
padding: 0 16px;
font-size: 14px;
color: var(--sh-text);
box-shadow: inset 0 0 0 1px var(--sh-border);
}
/* Optional brand strip above the footer links, filled by footer.tpl. */
.sh-footer-brand {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--sh-border);
}
.sh-footer-brand img { max-height: 48px; width: auto; }
.sh-footer-tagline {
color: var(--sh-text-faint);
font-size: 14px;
margin: 0;
}
/* ==========================================================================
17. UTILITIES & ACCESSIBILITY
========================================================================== */
/* Bootstrap text utilities that assume a light background */
.text-dark,
.text-body { color: var(--sh-text) !important; }
.text-white, .text-light { color: #fff !important; }
.text-primary { color: var(--sh-cyan) !important; }
.text-success { color: var(--sh-success) !important; }
.text-warning { color: var(--sh-warning) !important; }
.text-info { color: var(--sh-info) !important; }
.bg-light,
.bg-white {
background-color: var(--sh-bg-muted) !important;
color: var(--sh-text) !important;
}
.bg-dark { background-color: var(--sh-bg-secondary) !important; }
.border,
.border-top,
.border-bottom,
.border-left,
.border-right { border-color: var(--sh-border) !important; }
.header-lined {
border-bottom: 1px solid var(--sh-border);
padding-bottom: 12px;
margin-bottom: 24px;
}
.well {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
padding: 20px;
}
/* Gradient text helper, for headline accents. */
.sh-gradient-text {
background: var(--sh-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Visible keyboard focus everywhere, since the theme removes borders. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--sh-cyan);
outline-offset: 2px;
}
/* Skip link, mirroring the marketing site. */
.sh-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1100;
padding: 12px 20px;
background: var(--sh-bg-muted);
color: #fff;
border-radius: 0 0 var(--sh-radius-card) 0;
}
.sh-skip-link:focus {
left: 0;
color: #fff;
}
/* Honour a reduced-motion preference: keep the glow, drop the animation. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
18. NEXUS RECONCILIATION
Nexus ships ~140 rules prefixed "body #id" and ~900 !important
declarations. Everything above is written at plain class specificity, so
the handful of Nexus rules that would otherwise show through a dark theme
are re-asserted here, at matching specificity and no higher.
Keep this section last (ahead of the print block) and prefer adding to it
over sprinkling !important through the sections above.
========================================================================== */
/* --- Pill buttons where Nexus raises specificity ----------------------- */
body #main-body .btn,
body .primary-content .btn,
body #main-body .btn-default,
body #main-body .btn-outline-primary {
border-radius: var(--sh-radius-pill);
}
/* Buttons welded to a field keep a flat inner edge. */
body #main-body .input-group > .input-group-prepend > .btn,
body #main-body .input-group > .input-group-append > .btn {
border-radius: 0;
}
body #main-body .input-group > .input-group-prepend:first-child > .btn:first-child {
border-radius: var(--sh-radius-pill) 0 0 var(--sh-radius-pill);
}
body #main-body .input-group > .input-group-append:last-child > .btn:last-child {
border-radius: 0 var(--sh-radius-pill) var(--sh-radius-pill) 0;
}
/* --- Homepage domain search -------------------------------------------- */
/* The band ships with .bg-white; give it the raised band colour instead. */
.home-domain-search {
background: var(--sh-bg-muted) !important;
}
/* Nexus wraps the field and its buttons in a padded box. Turned into a
single glass pill, it reads as one control - the same shape the marketing
site uses for its search fields. */
.home-domain-search .input-group-wrapper,
body #frmDomainHomepage .input-group-wrapper {
background-color: rgba(11, 23, 40, .35);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
box-shadow: var(--sh-ring), inset 0 0 20px 1px rgba(9, 8, 52, .4);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
padding: 6px;
}
.input-group-wrapper .form-control,
.input-group-wrapper .form-control:focus {
background: transparent;
border: 0;
box-shadow: none;
color: #fff;
}
/* Both buttons sit inside the padded wrapper, so they stay full pills. */
.home-domain-search .input-group-wrapper .btn,
body #frmDomainHomepage .input-group-wrapper .btn,
body #main-body .input-group-wrapper .input-group > .input-group-append > .btn {
border-radius: var(--sh-radius-pill) !important;
margin: 0 2px !important;
}
/* Nexus paints the transfer button with --bg-inverted, which is white on a
dark theme. Glass keeps it secondary to the gradient Search button. */
body #frmDomainHomepage #btnTransfer,
body #frmDomainHomepage #btnTransfer2 {
background: var(--sh-glass-strong);
background-image: none;
color: #fff;
}
body #frmDomainHomepage #btnTransfer:hover,
body #frmDomainHomepage #btnTransfer2:hover {
background: rgba(255, 255, 255, .2);
color: #fff;
}
/* --- Action tiles ("How can we help today") ---------------------------- */
/* These are inside .action-icon-btns; Nexus gives
them a white face and keeps the accent hue as a 3px top border. */
.action-icon-btns a,
body #main-body .action-icon-btns a {
background-color: var(--sh-glass);
color: var(--sh-text);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
-webkit-backdrop-filter: blur(var(--sh-glass-blur));
backdrop-filter: blur(var(--sh-glass-blur));
transition: background-color var(--sh-ease), color var(--sh-ease);
}
.action-icon-btns a:hover,
.action-icon-btns a:focus,
body #main-body .action-icon-btns a:hover {
background-color: var(--sh-glass-strong);
color: #fff;
}
.action-icon-btns a .ico-container,
.action-icon-btns a i,
.action-icon-btns a .fas,
.action-icon-btns a .far {
color: var(--sh-cyan);
}
/* --- Store & order form ------------------------------------------------ */
/* Nexus builds the product grid with white faces at
"body #order-standard_cart ..." specificity. */
body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product {
background: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
}
#order-standard_cart .products .product header,
body #order-standard_cart .cart-body .products .product header {
background: rgba(0, 0, 0, .2);
border-bottom: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card) var(--sh-radius-card) 0 0;
color: var(--sh-heading);
}
body #order-standard_cart .panel .panel-heading {
background: rgba(0, 0, 0, .2);
border-bottom: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card) var(--sh-radius-card) 0 0;
}
/* The product name is set to #333 at "#order-standard_cart .products
.product header span" specificity, which is unreadable on a dark header. */
#order-standard_cart .products .product header span,
body #order-standard_cart .products .product header span {
color: var(--sh-heading);
}
body #order-standard_cart .products .product footer .btn-order-now {
background-color: var(--sh-azure);
background-image: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
color: #fff;
}
/* Nexus paints these from --bg-inverted, its dark shell colour. Give them
their own semantic colour back. */
body .sidebar .btn-success,
body .primary-content .client-home-cards .mc-promo-manage .btn-success {
background: var(--sh-success);
border-color: transparent;
color: #04251a;
}
body #main-body .btn-outline-primary:hover {
background-color: transparent;
background-image: var(--sh-gradient);
color: #fff;
}
/* Every field in the order flow is forced white at
"#order-standard_cart .form-control" specificity, including the radius. */
#order-standard_cart .form-control,
#order-standard_cart .field,
body #order-standard_cart .form-control,
body #order-standard_cart .field {
background-color: rgba(11, 23, 40, .35);
color: #fff;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
}
body #order-standard_cart textarea.form-control,
body #order-standard_cart select[multiple].form-control {
border-radius: var(--sh-radius-card);
}
/* The remaining white panels of the cart, checkout and domain steps. */
body .secondary-cart-body #domainRenewals,
body #order-standard_cart .cart-body .view-cart-empty,
body #order-standard_cart .domain-selection-options,
body #order-standard_cart .domain-promo-box,
body #order-standard_cart .panel .panel-footer {
background: var(--sh-glass);
border-color: var(--sh-border);
color: var(--sh-text);
}
body #order-standard_cart .sub-heading span {
background: rgba(0, 0, 0, .25);
color: var(--sh-heading);
}
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
background: var(--sh-glass-strong);
color: #fff;
}
body #order-standard_cart .domain-pricing .tld-filters .badge {
background: var(--sh-glass-strong);
color: #fff;
}
body #order-standard_cart .domain-pricing .tld-pricing-header div,
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header:has(~ .filtered-row) .tld-column {
background: rgba(0, 0, 0, .25);
color: var(--sh-heading);
}
/* --- DataTables (domain pricing, service lists) ------------------------ */
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
background-color: rgba(0, 0, 0, .25);
color: var(--sh-heading);
border-color: var(--sh-border);
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
background-color: rgba(0, 0, 0, .35);
}
.table-list > tbody > tr > td {
background-color: transparent;
color: var(--sh-text);
border-color: var(--sh-border);
}
.table-list > tbody > tr:hover > td { background-color: var(--sh-glass); }
.dataTables_wrapper .dataTables_filter label .form-control,
body .dataTables_wrapper .dataTables_filter label .form-control {
background: rgba(11, 23, 40, .35);
color: #fff;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--sh-text-dim); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: var(--sh-glass);
border-color: var(--sh-border);
color: var(--sh-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--sh-glass-strong);
border-color: var(--sh-border-strong);
color: #fff !important;
}
/* --- Buttons welded to the right of a field ---------------------------- */
.btn-default.btn-reveal-pw,
body #main-body .btn-reveal-pw {
background: var(--sh-glass);
color: var(--sh-text);
border: 1px solid var(--sh-border);
border-left: 0;
border-radius: 0 var(--sh-radius-pill) var(--sh-radius-pill) 0;
}
.btn-reveal-pw:hover { background: var(--sh-glass-strong); color: #fff; }
#btnKnowledgebaseSearch,
body #main-body .input-group > .input-group-append > #btnKnowledgebaseSearch {
border-radius: 0 var(--sh-radius-pill) var(--sh-radius-pill) 0;
}
/* --- Breadcrumb ------------------------------------------------------- */
/* Nexus paints the inner list with --bg-accented at .master-breadcrumb
.breadcrumb specificity; the bar reads better flush on a dark page. */
.master-breadcrumb .breadcrumb {
background-color: transparent;
margin: 0;
padding: 9px 0;
font-size: .9rem;
}
/* --- Registration & configure-product forms ---------------------------- */
/* Nexus hardcodes the whole signup form light at "#registration ..."
specificity - fields, labels and help text alike. */
#registration .field,
#registration .form-control,
body #registration .field,
body #registration .form-control {
background: rgba(11, 23, 40, .35);
color: #fff;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
}
body #registration textarea.form-control,
body #registration select[multiple].form-control {
border-radius: var(--sh-radius-card);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
background-color: rgba(9, 8, 52, .6);
color: var(--sh-text-dim);
}
#registration label { color: var(--sh-text); }
#registration .field-help-text { color: var(--sh-text-dim); }
#registration .sub-heading span {
background-color: rgba(0, 0, 0, .25);
color: var(--sh-heading);
}
body #frmConfigureProduct .form-control { color: #fff; }
/* --- Toggle switches --------------------------------------------------- */
/* The Yes/No switches ship a white "off" face with near-black text, and a
pale green "on" face that cannot carry white text at 4.5:1. */
/* The handles inside are square, so a small radius sits better on this
widget than the pill the rest of the controls use. */
.bootstrap-switch {
border-color: var(--sh-border);
border-radius: var(--sh-radius-sm);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary {
background-color: var(--sh-glass-strong);
border-color: var(--sh-border);
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
background-color: #00794b;
border-color: transparent;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
background-color: var(--sh-indigo);
border-color: transparent;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-label {
background-color: var(--sh-bg-muted);
color: var(--sh-text);
}
/* --- Standalone domain checker ----------------------------------------- */
.domain-checker-container .input-group-box {
background-color: rgba(11, 23, 40, .35);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
box-shadow: var(--sh-ring), inset 0 0 20px 1px rgba(9, 8, 52, .4);
}
.domain-checker-container .input-group-box .form-control,
.domain-checker-container .input-group-box .form-control:focus {
background: transparent;
border: 0;
box-shadow: none;
color: #fff;
}
/* --- Pagination, knowledgebase & TLD chips ----------------------------- */
/* Nexus sets #444 at ".pagination > li > a" specificity. */
.pagination > li > a,
.pagination > li > span,
.pagination > .page-item > .page-link {
color: var(--sh-text);
}
.pagination > .page-item.active > .page-link { color: #fff; }
.pagination > .page-item.disabled > .page-link { color: var(--sh-text-dim); }
/* Nexus colours this excerpt with --bg-lifted, a surface token, which is
unreadable as text in either theme. */
.kb-article-item small {
color: var(--sh-text-dim);
}
/* The featured-TLD tiles keep a light face so the registry logos stay
legible, but the price strip ships a different brand colour per TLD -
several of which cannot carry white text at 4.5:1 (.net is #efc00e).
One dark strip is both consistent and readable. */
.featured-tld .price,
.spotlight-tld .price,
.spotlight-tld-container .price {
background-color: var(--sh-bg-secondary) !important;
color: #fff !important;
}
.featured-tld { box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
/* --- Bootstrap utilities Nexus forces with !important ------------------ */
.text-danger,
a.text-danger:focus,
a.text-danger:hover { color: #ff5c8d !important; }
.text-primary { color: var(--sh-cyan) !important; }
.text-body { color: var(--sh-text) !important; }
.bg-warning { background-color: var(--sh-warning) !important; }
/* --- Remaining light surfaces ----------------------------------------- */
.img-thumbnail,
.custom-file-label,
.popover,
.mc-promo-login,
.mc-promo-manage {
background-color: var(--sh-glass);
border-color: var(--sh-border);
color: var(--sh-text);
}
.popover .popover-body { color: var(--sh-text); }
.popover .popover-header {
background: rgba(0, 0, 0, .25);
border-bottom-color: var(--sh-border);
color: #fff;
}
.responsive-tabs-sm .nav-item a.active {
background-color: var(--sh-glass-strong) !important;
color: #fff !important;
}
/* Markdown editor on the ticket form */
.md-editor > .btn-toolbar,
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
background-color: rgba(11, 23, 40, .35) !important;
color: #fff !important;
border-color: var(--sh-border);
}
.md-editor { border-color: var(--sh-border); }
/* ==========================================================================
19. ORDER FORM RECONCILIATION
The cart, checkout and domain-registration pages are rendered by a
separate order form template - here "templates/orderforms/
smudge_standard_cart" - which loads its own css/all.min.css AFTER this
file. Nothing in sections 1-18 can win a specificity tie against it, so
this section carries !important where it has to.
That bundle holds ~64 light surfaces: white product tiles, grey summary
panels, #666 labels and its own status colours. They are grouped by role
below rather than overridden one by one.
This section only applies to pages that load the order form (cart.php and
the domain steps). If the active order form template is ever changed in
Configuration -> General Settings -> Ordering, re-check this section - the
selectors are specific to the standard_cart family.
========================================================================== */
/* --- Panels, wells and containers -------------------------------------- */
#order-standard_cart .product-info,
#order-standard_cart .summary-container,
#order-standard_cart .apply-credit-container,
#order-standard_cart .cc-input-container,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .view-cart-gateway-checkout,
#order-standard_cart .default-captcha,
#order-standard_cart .panel-addon .panel-price,
.spotlight-tlds,
.spotlight-tld,
.domain-promo-box,
.suggested-domains .domain-lookup-suggestions-loader,
.addon-renewals .service-renewal,
.domain-renewals,
.service-renewals {
background-color: var(--sh-glass) !important;
border-color: var(--sh-border);
color: var(--sh-text);
}
/* Alternating rows keep a readable step without going light. */
#order-standard_cart .view-cart-items .item,
#order-standard_cart .account-select-container div.account,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
background-color: rgba(255, 255, 255, .05) !important;
color: var(--sh-text);
}
#order-standard_cart .view-cart-items .item:nth-child(even),
.addon-renewals .service-renewal:nth-child(even),
.domain-renewals .domain-renewal:nth-child(even) {
background-color: rgba(255, 255, 255, .09) !important;
}
#order-standard_cart .account-select-container div.account.active,
#order-standard_cart .domain-selection-options .option-selected,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
background-color: var(--sh-glass-strong) !important;
color: #fff;
}
#order-standard_cart .domain-selection-options .option {
background-color: rgba(255, 255, 255, .05) !important;
color: var(--sh-text);
}
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header div {
background-color: rgba(0, 0, 0, .25) !important;
color: var(--sh-heading);
}
.domain-pricing .tld-row.highlighted {
background: var(--sh-glass-strong) !important;
}
.spotlight-tld .invalid,
.spotlight-tld .unavailable {
background-color: rgba(252, 18, 99, .18) !important;
}
div.domainresults div:not(.btn-group) {
background-color: transparent !important;
}
/* --- Product tiles ----------------------------------------------------- */
#order-standard_cart .products .product,
.product-recommendations .product-recommendation,
#order-standard_cart .mc-promo {
background: var(--sh-glass) !important;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
}
#order-standard_cart .products .product header,
.product-recommendations .product-recommendation .body,
#order-standard_cart .mc-promo .body {
background: rgba(0, 0, 0, .2) !important;
color: var(--sh-heading);
}
#order-standard_cart .products .product header span {
color: var(--sh-heading) !important;
}
/* --- Fields, labels and helper text ------------------------------------ */
#order-standard_cart .field,
#order-standard_cart .form-control {
background: rgba(11, 23, 40, .35) !important;
color: #fff !important;
border: 1px solid var(--sh-border);
}
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
background-color: rgba(9, 8, 52, .6) !important;
color: var(--sh-text-dim) !important;
}
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
#order-standard_cart .panel-addon .panel-body label,
#order-standard_cart .cc-input-container .existing-cc-grid,
#order-standard_cart .transfer-not-eligible,
.service-renewals .div-renewal-ineligible {
color: var(--sh-text) !important;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-border span {
background-color: rgba(0, 0, 0, .25) !important;
color: var(--sh-heading) !important;
}
#order-standard_cart .view-cart-items .item-domain {
color: var(--sh-cyan) !important;
}
/* Remove-from-cart is a destructive control, so it keeps a red hover. */
#order-standard_cart .btn-remove-from-cart {
color: var(--sh-text-dim) !important;
}
#order-standard_cart .btn-remove-from-cart:hover {
color: #ff5c8d !important;
}
#order-standard_cart .order-summary .btn-continue-shopping {
color: var(--sh-text) !important;
}
#order-standard_cart .transfer-eligible {
color: var(--sh-success) !important;
}
/* --- Status and promo colours ------------------------------------------ */
/* The order form ships its own green/yellow, a shade off the brand palette
and too pale to carry white text. */
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add,
.product-recommendations .product-recommendation .btn-add,
#order-standard_cart .mc-promo .btn-add {
background-color: #00794b !important;
color: #fff !important;
}
#order-standard_cart .mc-promo .arrow {
background-color: #00633d !important;
}
#order-standard_cart .mc-promo.sitelock .btn-add {
background-color: #c26a00 !important;
color: #fff !important;
}
#order-standard_cart .mc-promo.sitelock .arrow {
background-color: #a55a00 !important;
}
.spotlight-tld-new,
.suggested-domains .promo.new {
background-color: #00794b !important;
color: #fff !important;
}
.spotlight-tld-sale,
.suggested-domains .promo.sale {
background-color: #9a6a00 !important;
color: #fff !important;
}
/* Third-party promo expanders; keep their brand hue but lift it off the
dark surface so it stays legible. */
#order-standard_cart .mc-promo.sitelockvpn .expander,
#order-standard_cart .mc-promo.threesixtymonitoring .expander,
#order-standard_cart .mc-promo.xovinow .expander {
color: var(--sh-cyan) !important;
}
/* --- Standalone domain checker ----------------------------------------- */
/* The order form paints this band a solid amber (#ffce44). */
.domain-checker-container {
background: var(--sh-bg-muted) !important;
border-radius: var(--sh-radius-card) !important;
}
/* ...and drop the amber globe illustration that sits on top of it. */
.domain-checker-bg {
background-image: none !important;
}
.domain-checker-container .input-group-box {
background-color: rgba(11, 23, 40, .35) !important;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-pill) !important;
box-shadow: var(--sh-ring), inset 0 0 20px 1px rgba(9, 8, 52, .4);
}
.domain-checker-container .input-group-box .form-control,
.domain-checker-container .input-group-box .form-control:focus {
background: transparent !important;
border: 0;
box-shadow: none;
color: #fff !important;
}
/* The renewals filter field carries a background image for its icon, so it
needs the colour replaced without losing the image. */
.form-control.domain-renewals-filter,
.form-control.service-renewals-filter {
background-color: rgba(11, 23, 40, .35) !important;
color: #fff !important;
}
/* ==========================================================================
20. LOGGED-IN CLIENT AREA
The dashboard, sidebars and account chrome that only render for a signed-in
customer. These pages need a session, so they are styled from the Nexus
rules that target them rather than from a captured render.
========================================================================== */
/* --- Account topbar ---------------------------------------------------- */
/* Notifications and the "Logged in as" switcher. Nexus fills this from
--grayscale-accented, which is a mid grey in its light theme. */
header.header .topbar {
background-color: var(--sh-bg-secondary);
border-bottom: 1px solid var(--sh-border);
color: var(--sh-text);
}
header.header .topbar a {
color: var(--sh-cyan);
}
header.header .topbar a:hover { color: #fff; }
/* --- Dashboard stat tiles (.tiles .tile) -------------------------------- */
/* The Services / Domains / Tickets / Invoices strip. Nexus gives each tile an
#f8f8f8 face, #ccc dividers and a #ccc icon. */
.tiles .tile {
background-color: var(--sh-glass);
border-right: 1px solid var(--sh-border);
color: var(--sh-text);
}
.tiles .tile:hover {
background-color: var(--sh-glass-strong);
}
.tiles div:nth-child(1) > .tile,
.tiles div:nth-child(2) > .tile {
border-bottom: 1px solid var(--sh-border);
}
.tiles .tile .stat {
color: var(--sh-cyan);
font-family: var(--sh-font-display);
font-weight: 700;
}
.tiles .tile .title {
color: var(--sh-text-dim);
}
.tiles .tile i {
color: rgba(255, 255, 255, .18);
}
.tiles .tile:hover i {
color: rgba(255, 255, 255, .3);
}
/* --- Dashboard cards (.client-home-cards) ------------------------------- */
/* Nexus gives these cards a white header and a white footer, with #ddd
list dividers and #888 excerpt text. */
.client-home-cards .card-header,
body .primary-content .client-home-cards .card-header,
body .primary-content .client-home-cards .mc-promo-login .card-header,
body .primary-content .client-home-cards .mc-promo-manage .card-header {
background-color: transparent;
border-bottom: 1px solid var(--sh-border);
color: var(--sh-heading);
border-radius: var(--sh-radius-card) var(--sh-radius-card) 0 0;
}
body .primary-content .client-home-cards .card .card-footer,
body .primary-content .client-home-cards .mc-promo-login .card-footer,
body .primary-content .client-home-cards .mc-promo-manage .card-footer {
background: rgba(0, 0, 0, .18);
border-top: 1px solid var(--sh-border);
border-radius: 0 0 var(--sh-radius-card) var(--sh-radius-card);
}
body .primary-content .client-home-cards .card .card-header .btn,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn {
background: var(--sh-glass);
color: #fff;
border: 1px solid var(--sh-border);
}
.client-home-cards .card-header .btn:hover,
body .primary-content .client-home-cards .card-header .btn:hover {
background: var(--sh-glass-strong);
color: #fff;
}
.client-home-cards .list-group {
border-top-color: var(--sh-border) !important;
border-bottom-color: var(--sh-border) !important;
}
/* WHMCS writes an inline "border-bottom: 1px solid rgb(221,221,221)" onto
each row, so only !important reaches it. */
.client-home-cards .list-group .list-group-item,
.client-home-cards .list-group .list-group-item[style] {
border-bottom-color: var(--sh-border) !important;
}
.client-home-cards small { color: var(--sh-text-dim); }
/* Nexus paints these from --bg-inverted, its dark shell colour. */
body .primary-content .client-home-cards .card .btn-success,
body .primary-content .client-home-cards .mc-promo-login .btn-success,
body .primary-content .client-home-cards .mc-promo-manage .btn-success {
background: var(--sh-success);
border-color: transparent;
color: #04251a;
}
body .primary-content .client-home-cards .card .card-header .btn:hover,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn:hover,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn:hover {
background: var(--sh-glass-strong);
border-color: var(--sh-border-strong);
color: #fff;
}
body .primary-content .client-home-cards .card .btn-success:hover,
body .primary-content .client-home-cards .mc-promo-login .btn-success:hover,
body .primary-content .client-home-cards .mc-promo-manage .btn-success:hover {
background: #00b873;
border-color: transparent;
color: #04251a;
}
/* --- Sidebar counter badges -------------------------------------------- */
/* These nest a .badge inside .sidebar-menu-item-badge. Styling both leaves a
gradient halo around a dark chip, because Nexus fills the inner badge from
--bg-inverted at a fixed 28px width. Where the wrapper holds a badge it
becomes plain layout and the inner chip carries the styling; where it does
not, the wrapper stays the chip itself. */
.sidebar-menu-item-badge:has(.badge) {
background: none;
padding: 0;
}
.sidebar .list-group-item .badge,
.sidebar-menu-item-badge .badge,
.sidebar-menu-item-badge {
background: var(--sh-indigo);
color: #fff;
border-radius: var(--sh-radius-pill);
font-family: var(--sh-font-ui);
font-size: 11px;
line-height: 1.5;
width: auto;
min-width: 26px;
padding: 2px 9px;
text-align: center;
}
/* --- Admin "return to admin area" tab ---------------------------------- */
/* Only renders while an admin is browsing as a client. Nexus pins it with
a #d7d7d7 face and #777 ink, both !important. */
.btn-return-to-admin,
.btn-return-to-admin .floating {
background-color: var(--sh-bg-muted) !important;
color: var(--sh-text) !important;
box-shadow: 0 0 0 1px var(--sh-border);
}
.btn-return-to-admin:hover,
.btn-return-to-admin .floating:hover {
background-color: var(--sh-bg-notice) !important;
color: #fff !important;
}
/* --- Navbar submenu text ------------------------------------------------ */
/* Submenu entries read at the same weight as the top-level item they hang
off, rather than the near-black Bootstrap default. Raised to id
specificity deliberately: the logged-in navbar is built by WHMCS and its
item markup varies (li.dropdown-item wrapping a.dropdown-item, plain
anchors, and the collapsable overflow menu), so this has to outrank
whichever of those Bootstrap rule wins on a given page. */
#nav .dropdown-menu a,
#nav .dropdown-menu .dropdown-item,
#nav .collapsable-dropdown-menu a,
header.header .navbar-nav .dropdown-menu a,
header.header .navbar-nav .dropdown-menu .dropdown-item {
color: var(--sh-text);
}
#nav .dropdown-menu a:hover,
#nav .dropdown-menu a:focus,
#nav .dropdown-menu .dropdown-item:hover,
#nav .collapsable-dropdown-menu a:hover,
header.header .navbar-nav .dropdown-menu a:hover,
header.header .navbar-nav .dropdown-menu a:focus,
header.header .navbar-nav .dropdown-menu .dropdown-item:hover {
color: #fff;
}
/* Disabled entries stay dimmer than the rest, but still legible. */
#nav .dropdown-menu .dropdown-item.disabled,
#nav .dropdown-menu a.disabled,
header.header .navbar-nav .dropdown-menu .dropdown-item.disabled {
color: var(--sh-text-dim);
}
/* Nexus marks the open entry with #ccc, which fights the glass panel. */
header.header .dropdown-item.active,
header.header .dropdown-item:active {
background-color: var(--sh-glass-strong);
color: #fff;
}
/* --- Product / service details ----------------------------------------- */
/* The big service tile. Nexus gives it an #efefef face, which left the white
icon and product name sitting on light grey. */
div.product-details div.product-icon {
background-color: var(--sh-glass);
border: 1px solid var(--sh-border);
color: var(--sh-heading);
}
div.product-details-tab-container {
background-color: var(--sh-glass);
border: 1px solid var(--sh-border);
border-top: 0;
color: var(--sh-text);
}
/* Service status strip under the tile */
.product-status-active { background-color: #00794b; color: #fff; }
.product-status-pending { background-color: var(--sh-warning); color: #1a1300; }
.product-status-suspended { background-color: var(--sh-indigo); color: #fff; }
.product-status-cancelled,
.product-status-terminated { background-color: #454b73; color: #fff; }
.product-status-fraud { background-color: var(--sh-danger-deep); color: #fff; }
/* --- Upgrade / downgrade flow ------------------------------------------- */
.upgrade .product-to-be-upgraded {
background-color: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
}
.upgrade .products .product {
background-color: var(--sh-glass);
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
overflow: hidden;
}
.upgrade .products .product .header {
background-color: var(--sh-indigo);
background-image: var(--sh-gradient-card);
color: #fff;
}
.upgrade .products .product .btn {
background-color: var(--sh-azure);
background-image: var(--sh-gradient);
color: #fff;
}
.upgrade .products .product .current {
background-color: var(--sh-warning);
color: #1a1300;
}
.upgrade .products .product .recommended {
background-color: #00794b;
color: #fff;
}
/* --- Invoices ----------------------------------------------------------- */
.invoice-summary-table td.total-row {
background-color: rgba(0, 0, 0, .25);
color: var(--sh-heading);
}
/* --- Odds and ends ----------------------------------------------------- */
.domain-pricing .two-row-center {
border-right-color: var(--sh-border);
}
.action-icon-btns a .ico-container i {
color: var(--sh-cyan);
}
/* --- Invoice document -------------------------------------------------- */
/* viewinvoice.php pulls templates//css/invoice.css, a complete
standalone Bootstrap build that paints the invoice as a white 850px sheet
with a #f8f8f8 total row. Selectors here are prefixed with `body` so they
win whichever order the two stylesheets end up in. Print styles at the end
of this file put the sheet back to paper white. */
body .invoice-container {
background-color: var(--sh-glass);
-webkit-backdrop-filter: blur(var(--sh-glass-blur));
backdrop-filter: blur(var(--sh-glass-blur));
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
}
body .invoice-container td.total-row {
background-color: rgba(0, 0, 0, .25);
color: var(--sh-heading);
}
body .invoice-container .table th,
body .invoice-container .table td,
body .invoice-container table th,
body .invoice-container table td {
border-color: var(--sh-border);
color: var(--sh-text);
}
body .invoice-container .table th,
body .invoice-container table th { color: var(--sh-heading); }
body .invoice-container h1,
body .invoice-container h2,
body .invoice-container h3,
body .invoice-container h4,
body .invoice-container strong,
body .invoice-container b { color: var(--sh-heading); }
/* Invoice status word. invoice.css declares these unscoped, so scope the
overrides to the sheet and use colours that read on the dark surface. */
body .invoice-container .invoice-status.paid,
body .invoice-container .paid { color: #00d082; }
body .invoice-container .invoice-status.unpaid,
body .invoice-container .unpaid { color: #ff5c8d; }
body .invoice-container .refunded { color: var(--sh-cyan); }
body .invoice-container .collections { color: var(--sh-warning); }
body .invoice-container .draft,
body .invoice-container .cancelled { color: var(--sh-text-dim); }
/* --- Third-party addon modules ----------------------------------------- */
/* Addons ship their own stylesheet, which WHMCS loads after this file, and
several hardcode a white background inline on their wrapper. Inline styles
outrank every stylesheet, so !important is genuinely the only tool here.
Scoped to the content column so it cannot reach the header, the footer or
the invoice sheet's print styling.
Anything translucent nested inside such a wrapper composites against it,
which is why one white div turned a whole page of text white-on-white. */
.primary-content [style*="background-color: #fff"],
.primary-content [style*="background-color:#fff"],
.primary-content [style*="background-color: #ffffff"],
.primary-content [style*="background-color:#ffffff"],
.primary-content [style*="background: #fff"],
.primary-content [style*="background:#fff"] {
background-color: var(--sh-glass) !important;
color: var(--sh-text);
}
/* SMS Manager: its styles.css paints .smsmanagerarea #f1f1f1 and loads after
this file, so the class needs !important as well as the inline rule above. */
.smsmanagerarea {
background-color: var(--sh-glass) !important;
border: 1px solid var(--sh-border);
border-radius: var(--sh-radius-card);
color: var(--sh-text);
}
.smsmanagerarea h3,
.smsmanagerarea h4,
.smsmanagerarea b,
.smsmanagerarea strong { color: var(--sh-heading); }
.smsmanagerarea label,
.smsmanagerarea p { color: var(--sh-text); }
/* The ambient background glow is decorative; drop it when the user asks
for reduced transparency, and on print. */
@media print {
body::before { display: none; }
html, body { background: #fff; color: #000; }
.card, .panel { background: #fff; border-color: #ccc; box-shadow: none; }
h1, h2, h3, h4, h5, h6 { color: #000; }
#header, #footer, .main-navbar-wrapper { display: none; }
/* Invoices are printed and saved as PDFs, so the sheet goes back to
paper white with black ink regardless of the on-screen theme. */
body .invoice-container {
background: #fff !important;
color: #000 !important;
border-color: #ccc !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body .invoice-container h1,
body .invoice-container h2,
body .invoice-container h3,
body .invoice-container h4,
body .invoice-container strong,
body .invoice-container b,
body .invoice-container .table th,
body .invoice-container .table td,
body .invoice-container table th,
body .invoice-container table td { color: #000 !important; }
body .invoice-container td.total-row {
background: #f8f8f8 !important;
color: #000 !important;
}
}