/ status containers on other pages
* (announcements, knowledgebase, contact) are NOT hidden by mistake.
*/
.nb-register-page .alert-info[style*="display:none"],
.nb-register-page .signin-status-msg,
.nb-register-page [class*="signin-prompt"],
.nb-register-page .signin-prompt-messages {
display: none !important;
}
/*
* v1.26 - the actual culprit revealed by user's pasted source. WHMCS
* 9.x renders the OAuth pre-link status messages inside
*
with each
* carrying a class like .providerLinkingMsg-preLink-. WHMCS
* intends .w-hidden to hide it, but on this install that class isn't
* actually hiding anything (parent twenty-one's CSS rule for it is
* either missing or overridden). The fix is dead simple: hide it
* ourselves with !important. UNSCOPED because:
* 1. These IDs/classes are uniquely WHMCS-OAuth-specific so won't
* collide with anything legitimate elsewhere.
* 2. The element appears at body-level BEFORE .nb-register-page
* renders, so scoping to .nb-register-page wouldn't catch it.
* 3. Even if WHMCS later clones a message into a visible container,
* the cloned
retains its providerLinkingMsg- class and gets
* hidden too.
* Also keeps .w-hidden honored globally as a defensive belt-and-braces.
*/
/* Universal .w-hidden hide. WHMCS uses this class as a "hide me until
* JS removes the class to reveal" utility. Restored after v1.27 review
* narrowing because that left other widgets (e.g. #passwdFeedback) as
* empty visible alerts. The OAuth provider-linking message paragraphs
* (.providerLinkingMsg-*) are no longer individually hidden here -
* their parent #providerLinkingMessages has .w-hidden so the parent
* rule already hides them, and individually hiding them would block
* WHMCS from ever showing a specific error/status message. */
#providerLinkingMessages,
.w-hidden,
#passwdFeedback:empty {
display: none !important;
}
/*
* "Open New Ticket" CTA on the support index. Make sure the button
* is visually unmissable so the v1.11 fix is obvious in screenshots.
*/
.nb-support-hero .btn-primary {
box-shadow: 0 4px 16px -4px rgba(100, 87, 246, .35);
}
.nb-support-hero .btn-primary:hover {
box-shadow: 0 6px 20px -4px rgba(100, 87, 246, .5);
}
/* === Cart / order forms === */
/*
* Force any inherited Bootstrap/twenty-one ".cart" wrappers, white
* "well" panels and modal-style inner backgrounds to follow our dark
* theme. The "going through order" screenshot showed white blocks
* overlapping dark blocks because parent CSS rules survived.
*/
.nb-main .well,
.nb-main .panel,
.nb-main .panel-default,
.nb-main .order-summary,
.nb-main .ordersummary,
.nb-main .order-summary-bar,
.nb-main .pull-right.product-pricing,
.nb-main .product-pricing,
.nb-main .product-info-pricing,
.nb-main .price,
.nb-main .pricing-block,
.nb-main .product-detail,
.nb-main .product-row,
.nb-main .cart-summary {
background: var(--card) !important;
background-color: var(--card) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
border-radius: var(--radius);
}
.nb-main .well h3,
.nb-main .well h4,
.nb-main .panel-heading,
.nb-main .panel-title,
.nb-main .order-summary h3,
.nb-main .order-summary h4 {
color: var(--text-strong) !important;
background: transparent !important;
border: 0 !important;
}
.nb-main .panel-body,
.nb-main .panel-heading {
background: transparent !important;
color: inherit !important;
border-color: var(--border) !important;
}
.nb-main .product-pricing-cycle,
.nb-main .product-cycle,
.nb-main .price-cycle {
color: var(--muted) !important;
}
/*
* Cart "Browse Services" comparison cards. Stretch them to a uniform
* height, give them a subtle gradient border and lift the active card.
*/
.nb-cart-products {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin: 6px 0 22px;
}
.nb-cart-product {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.nb-cart-product::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(140deg, rgba(100,87,246,.45), transparent 55%, rgba(27,196,138,.3));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .35;
pointer-events: none;
transition: opacity .15s;
}
.nb-cart-product:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(100,87,246,.45); }
.nb-cart-product:hover::before { opacity: .9; }
.nb-cart-product h3 {
margin: 0;
font-size: 17px;
color: var(--text-strong);
letter-spacing: -.015em;
}
.nb-cart-product .nb-cart-desc {
font-size: 13.5px;
color: var(--muted);
line-height: 1.55;
flex: 1;
}
.nb-cart-product .nb-cart-features {
margin: 6px 0 4px;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
}
.nb-cart-product .nb-cart-features li {
font-size: 13px;
color: var(--text);
display: flex;
align-items: flex-start;
gap: 8px;
}
.nb-cart-product .nb-cart-features li::before {
content: "";
width: 14px; height: 14px;
flex-shrink: 0;
margin-top: 3px;
background: var(--green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.nb-cart-product .nb-cart-price {
display: flex;
align-items: baseline;
gap: 4px;
border-top: 1px solid var(--border);
padding-top: 14px;
margin-top: auto;
}
.nb-cart-product .nb-cart-price-amt {
font-size: 22px;
font-weight: 700;
color: var(--text-strong);
letter-spacing: -.02em;
}
.nb-cart-product .nb-cart-price-cyc {
font-size: 13px;
color: var(--muted);
}
.nb-cart-product .nb-cart-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.nb-cart-product .nb-cart-actions .btn { flex: 1; justify-content: center; }
/*
* Added-to-cart confirmation. Hide the empty WHMCS "Based on this
* product, we recommend:" wrapper unless we actually have something
* to suggest.
*/
.nb-cart-recommend:empty,
.nb-cart-recommend.is-empty {
display: none !important;
}
/* Configure-product page on standard_cart - tighten parent layout */
.nb-cart-config .form-group label,
.nb-cart-config .control-label {
color: var(--text);
font-weight: 500;
font-size: 13.5px;
margin-bottom: 6px;
}
.nb-cart-config .product-pricing-display {
background: var(--card-elevated, var(--card));
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
color: var(--text-strong);
}
.nb-cart-config table.table { background: transparent !important; }
.nb-cart-config table.table > tbody > tr > td,
.nb-cart-config table.table > tbody > tr > th {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text);
}
/* ──────────────────────────────────────────────────────────────────
* v1.12 EMERGENCY FIX PASS
* - Account Details was anchored hard to the left because
* .nb-form-grid uses a fixed 320px right column. On wide viewports
* the form column stretched but the whole grid was still pinned to
* the left edge of .nb-main > .container - making the form FEEL
* anchored. Force the grid (and its children) to fill the container
* width so the form spans the full reading area.
* - .row gutter was only 8px which made Contact-Us and similar two-
* column forms (col-md-8 + col-md-4) look squished together with
* no breathing room. Bump to 12px each side (24px total).
* - Hide the empty WHMCS errormessage `
` that occasionally
* renders above forms with no text inside.
* ────────────────────────────────────────────────────────────────── */
/* ── A. Account Details: widen + space ── */
.nb-account-details { width: 100%; }
.nb-account-details .nb-form-grid {
/* Widen the form column. 360px aside is enough room for the shortcut
* list without dwarfing the main form. */
grid-template-columns: minmax(0, 1fr) 360px !important;
gap: 28px;
}
.nb-account-details .card { width: 100%; }
.nb-account-details .card-body { padding: 22px; }
@media (max-width: 1024px) {
.nb-account-details .nb-form-grid {
grid-template-columns: 1fr !important;
}
}
/* ── B. Contact / SubmitTicket: bigger row gutter ── */
.nb-main > .container > .row,
.nb-main .row { margin-left: -12px; margin-right: -12px; }
.nb-main > .container > .row > [class*="col-"],
.nb-main .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
/* Contact page specifically: force the form column and the "other ways"
* sidebar to feel like distinct cards with breathing room between them. */
.nb-main .row > .col-md-8 > .card,
.nb-main .row > .col-md-4 > .card { margin-bottom: 16px; }
/* ── C. Hide the empty errormessage ghost div WHMCS prints above some
* forms (a `` with no content). Only
* hide if it has no visible text. *but* using :empty matches content
* with no elements, while WHMCS may render a stray - cover both. */
.errormessage:empty,
.errorMessages:empty,
div[id*="error"]:empty { display: none !important; }
/* ── D. Cart product cards: make the action row stick to the bottom of
* each card so a 3-card / 2-card grid lines up neatly even when the
* descriptions are different lengths. Also push the price to the
* bottom-with-actions zone. */
.nb-cart-product .nb-cart-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.nb-cart-product .nb-cart-actions .btn { flex: 1; justify-content: center; }
/* ──────────────────────────────────────────────────────────────────
* v1.13 FIX PASS
* - Catalogue category pill strip
* - Cart product description block (paragraphs + bullet feature list)
* - Cart pages dark-theme overrides for WHMCS-leaked widgets
* - Wider register grid on desktop, single column on tablet
* - GIS slot hide-when-empty
* ────────────────────────────────────────────────────────────────── */
/* === Catalogue category pill strip ===
* Lives at the top of cart.php?gid=X.
* Desktop (>=768px): wraps to multiple rows so every category is visible.
* Mobile (<768px): horizontal scroll inside an overflow strip, with a
* subtle right-edge fade hint to signal more is offscreen, and the
* scrollbar muted so it doesn't dominate the chrome. */
.nb-cart-cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
padding: 0;
}
@media (max-width: 767px) {
.nb-cart-cats {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 6px;
margin-right: -16px;
padding-right: 16px;
mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
}
.nb-cart-cats::-webkit-scrollbar { height: 4px; }
.nb-cart-cats::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.nb-cart-cat { flex-shrink: 0; }
}
.nb-cart-cat {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--card);
color: var(--muted);
font-size: 13px;
font-weight: 500;
text-decoration: none !important;
transition: border-color .15s, color .15s, background .15s;
white-space: nowrap;
}
.nb-cart-cat:hover {
border-color: var(--border-hover);
color: var(--text-strong);
background: var(--card-hover);
}
.nb-cart-cat.is-active {
background: var(--accent-glow) !important;
border-color: rgba(100, 87, 246, .4) !important;
color: var(--accent-light) !important;
font-weight: 600;
}
/* === Cart product description block ===
* Container around the parsed description. The parser emits a mix of
*
and
elements; this wrapper just
* gives them sensible vertical rhythm and lets the feature list stay
* flush with paragraph text. */
.nb-cart-desc-block { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nb-cart-desc-block > p,
.nb-cart-desc-block > p.nb-cart-desc {
margin: 0;
font-size: 13.5px;
color: var(--muted);
line-height: 1.55;
}
.nb-cart-desc-block > ul.nb-cart-features { margin: 2px 0; }
/* === Cart-pages dark-theme overrides ===
* The standard_cart code path drags in the parent twenty-one cart CSS
* which gives every widget (promo box, gateway list, totals panel,
* "we recommend" cards) a hard white background. We scope these
* overrides under .nb-cart-config / .nb-cart-view / .nb-cart-added so
* they CANNOT leak elsewhere in the theme. !important is needed because
* some twenty-one rules use #shopping-cart .panel etc. with higher
* specificity than ours. */
.nb-cart-view,
.nb-cart-view *,
.nb-cart-added,
.nb-cart-added *,
.nb-cart-config,
.nb-cart-config * {
/* Inherit the dark text by default so nothing falls back to #333 */
color: inherit;
}
.nb-cart-view .panel,
.nb-cart-view .well,
.nb-cart-view .box,
.nb-cart-view .panel-default,
.nb-cart-added .panel,
.nb-cart-added .well,
.nb-cart-added .box,
.nb-cart-added .panel-default,
.nb-cart-config .panel,
.nb-cart-config .well,
.nb-cart-config .box,
.nb-cart-config .panel-default {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
color: var(--text) !important;
box-shadow: none !important;
}
.nb-cart-view .panel-heading,
.nb-cart-view .panel-title,
.nb-cart-added .panel-heading,
.nb-cart-added .panel-title,
.nb-cart-config .panel-heading,
.nb-cart-config .panel-title {
background: transparent !important;
border-bottom: 1px solid var(--border) !important;
color: var(--text-strong) !important;
padding: 14px 18px !important;
}
.nb-cart-view .panel-body,
.nb-cart-added .panel-body,
.nb-cart-config .panel-body { padding: 18px !important; background: transparent !important; }
.nb-cart-view input[type="text"],
.nb-cart-view input[type="email"],
.nb-cart-view input[type="number"],
.nb-cart-view input[type="password"],
.nb-cart-view select,
.nb-cart-view textarea,
.nb-cart-added input[type="text"],
.nb-cart-added input[type="email"],
.nb-cart-added select,
.nb-cart-config input[type="text"],
.nb-cart-config input[type="email"],
.nb-cart-config input[type="number"],
.nb-cart-config input[type="password"],
.nb-cart-config select,
.nb-cart-config textarea {
background: rgba(255, 255, 255, .03) !important;
border: 1px solid var(--border) !important;
color: var(--text-strong) !important;
}
/* Tables inside the cart pages */
.nb-cart-view table,
.nb-cart-view .table,
.nb-cart-added table,
.nb-cart-added .table,
.nb-cart-config table,
.nb-cart-config .table {
background: transparent !important;
color: var(--text) !important;
}
.nb-cart-view .table > thead > tr > th,
.nb-cart-view .table th,
.nb-cart-added .table > thead > tr > th,
.nb-cart-added .table th,
.nb-cart-config .table > thead > tr > th,
.nb-cart-config .table th {
background: transparent !important;
border-bottom: 1px solid var(--border) !important;
color: var(--muted) !important;
}
.nb-cart-view .table > tbody > tr > td,
.nb-cart-view .table td,
.nb-cart-added .table > tbody > tr > td,
.nb-cart-added .table td,
.nb-cart-config .table > tbody > tr > td,
.nb-cart-config .table td {
background: transparent !important;
border-top: 1px solid var(--border) !important;
color: var(--text) !important;
}
/* Discount / fee text helpers in the cart that twenty-one paints green
* on a white background - keep the green but transparent the chip. */
.nb-cart-view .text-success,
.nb-cart-view .text-info,
.nb-cart-added .text-success,
.nb-cart-added .text-info { background: transparent !important; }
/* Force WHMCS list-group leaks dark too */
.nb-cart-view .list-group,
.nb-cart-added .list-group,
.nb-cart-config .list-group { background: transparent !important; }
.nb-cart-view .list-group-item,
.nb-cart-added .list-group-item,
.nb-cart-config .list-group-item {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* === Register grid: widen on desktop, single column on tablet ===
* v1.12 used 22px gap. The form column visually crashes into the aside
* on 13" screens. 28px gap (and an explicit 1024px breakpoint) restores
* breathing room while keeping the existing two-column shape. */
@media (min-width: 1024px) {
.nb-register-grid,
.nb-form-grid {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 28px;
}
}
@media (max-width: 1023px) {
.nb-register-grid,
.nb-form-grid {
grid-template-columns: 1fr;
gap: 18px;
}
}
.nb-register-form,
.nb-register-aside,
.nb-form-grid > .card,
.nb-form-aside { width: 100%; min-width: 0; }
.nb-register-aside .card,
.nb-form-aside .card { width: 100%; }
/* === GIS slot: hide gracefully when no JS populated it ===
* The Google Identity Services divs are emitted unconditionally on
* login.tpl. We use the universally-supported `:empty` pseudo-class
* (IE9+, every modern engine) instead of `:has()` so this works on
* older browsers too:
* - #g_id_onload is a config-only element, never has children, so
* hide it always.
* - .g_id_signin starts empty and is populated by Google's JS once
* it loads. While empty, hide it - which removes its margin-top
* too, so the wrapper produces zero visual whitespace.
* When GSI loads and inserts content, the children appear and the
* widget renders normally. No `:has()` needed - works everywhere. */
.nb-gis-slot {
display: flex;
flex-direction: column;
align-items: center;
}
.nb-gis-slot #g_id_onload { display: none; }
.nb-gis-slot .g_id_signin:empty { display: none; }
.nb-gis-slot .g_id_signin { margin-top: 14px; }
/* === v1.14: Order result pages (complete / pending / failed) ===
* The standard_cart terminal pages (cart.php?a=complete / pending /
* failed) used to render with twenty-one's white widgets the moment
* checkout finished, visibly breaking the dark theme the rest of the
* cart now uses. We wrap each terminal template in .nb-cart-result and
* scope dark-theme overrides under that class so any leaked twenty-one
* widget (panel, alert, list-group) gets re-painted, while the
* overrides cannot bleed outside the cart. !important is needed for
* the same specificity reasons noted in the .nb-cart-view block above. */
.nb-cart-result,
.nb-cart-result * { color: inherit; }
.nb-cart-result {
max-width: 640px;
margin: 0 auto;
padding: 0 16px;
}
.nb-cart-result .nb-page-hero {
display: flex;
flex-direction: column;
align-items: center;
}
.nb-cart-result .nb-page-hero .nb-section-label { margin-bottom: 14px; }
.nb-cart-result-ic {
width: 56px !important;
height: 56px !important;
margin-bottom: 18px;
}
.nb-cart-result-ic .ic { width: 26px; height: 26px; }
.nb-cart-result .nb-page-hero h1 {
font-size: clamp(24px, 2.4vw, 30px);
color: var(--text-strong);
}
.nb-cart-result .nb-page-hero p { margin: 6px auto 0; }
.nb-cart-result-body {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 8px;
}
.nb-cart-result-card .card-body {
display: flex;
flex-direction: column;
gap: 0;
}
.nb-cart-result-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.nb-cart-result-row:last-child { border-bottom: 0; }
.nb-cart-result-row-label { color: var(--muted); font-size: 14px; }
.nb-cart-result-row-value { color: var(--text-strong); font-weight: 600; }
.nb-cart-result-row-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent-light);
text-decoration: none;
font-weight: 600;
}
.nb-cart-result-row-link:hover { text-decoration: underline; }
.nb-cart-result-row-link .ic { width: 14px; height: 14px; }
.nb-cart-result-alert { text-align: left; margin: 0; }
.nb-cart-result-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 6px;
}
/* Scoped twenty-one neutralisation, mirroring the .nb-cart-view block.
* The terminal pages rarely emit panels/tables of their own, but
* gateway-driven payment instructions occasionally inject .alert /
* .panel markup, so we cover the same surface area for safety. */
.nb-cart-result .panel,
.nb-cart-result .well,
.nb-cart-result .box,
.nb-cart-result .panel-default {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
color: var(--text) !important;
box-shadow: none !important;
}
.nb-cart-result .panel-heading,
.nb-cart-result .panel-title {
background: transparent !important;
border-bottom: 1px solid var(--border) !important;
color: var(--text-strong) !important;
padding: 14px 18px !important;
}
.nb-cart-result .panel-body {
padding: 18px !important;
background: transparent !important;
}
.nb-cart-result table,
.nb-cart-result .table {
background: transparent !important;
color: var(--text) !important;
}
.nb-cart-result .table > thead > tr > th,
.nb-cart-result .table th {
background: transparent !important;
border-bottom: 1px solid var(--border) !important;
color: var(--muted) !important;
}
.nb-cart-result .table > tbody > tr > td,
.nb-cart-result .table td {
background: transparent !important;
border-top: 1px solid var(--border) !important;
color: var(--text) !important;
}
.nb-cart-result .list-group { background: transparent !important; }
.nb-cart-result .list-group-item {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* === v1.15: Client-area invoice view ===
* Stock twenty-one viewinvoice.tpl rendered the line-item table,
* totals panel, payment-method selector and gateway forms on a
* white background with light Bootstrap widgets, visibly breaking
* the dark theme the moment customers landed here from the cart's
* "Update payment & retry" CTA (v1.14). We wrap the override in
* .nb-invoice-view and scope dark-theme overrides under that class
* so any twenty-one / gateway-injected widget (panel, well, list-
* group, alert, input, table) gets re-painted, while the overrides
* cannot bleed outside the invoice page. !important is needed for
* the same specificity reasons noted in the .nb-cart-view block. */
.nb-invoice-view,
.nb-invoice-view * { color: inherit; }
.nb-invoice-pay {
background: linear-gradient(135deg, var(--accent-glow), transparent 60%), var(--card);
border-color: rgba(100, 87, 246, .35);
}
/* v1.50: WHMCS pre-renders the entire pay-now control into the
* Smarty variable $paymentbutton - we output it as nofilter HTML
* inside .nb-invoice-paybtn. That HTML can be a redirect