/* Poppins — must stay the FIRST rule in the file. CSS only permits @import before other rules (comments excepted). This is kept as a FAIL-SAFE. nexus-lx/includes/head.tpl also requests Poppins via , which is faster (parallel, with preconnect) — but .tpl overrides need the WHMCS template cache cleared before they take effect, whereas this file deploys immediately. Verified on the live site: custom.css updates land at once, head.tpl did not. Browsers dedupe identical URLs, so having both costs nothing — one request either way. Once head.tpl is confirmed live, this line can be deleted for a marginally faster first paint. >>> After editing this file, bump lxAssetVersion in >>> nexus-lx/includes/head.tpl or browsers will keep serving >>> a cached copy for up to 7 days. See that file for why. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* ***************************************************** ** nexus-lx — hostLX Client Area Theme ** Child theme of: nexus Brand source: https://hostlx.com (css/custom.css, css/main.min.css) --------------------------------------------------- IMPORTANT — DO NOT DELETE THE :root BLOCK BELOW --------------------------------------------------- The Nexus parent theme is entirely token-driven: nexus/css/theme.css contains 392 var(--...) references and NONE of those tokens are defined in theme.css, all.css or the sass partials — they live only in nexus/css/custom.css. WHMCS resolves custom.css child-first. This file therefore REPLACES the parent's token block rather than adding to it. If any token below is removed, every rule referencing it silently fails (transparent backgrounds, collapsed radii, invisible borders). All 82 tokens from the parent are reproduced here. ***************************************************** */ :root { --white: #fff; /* --------------------------------------------------- Neutral shades — hostLX slate-blue ramp Replaces Nexus's pure-gray ramp. Values marked (site) are taken verbatim from hostlx.com; the rest are interpolated to complete the scale. --------------------------------------------------- */ --neutral-50: #f8f9fb; --neutral-100: #f0f2f5; /* (site) section backgrounds */ --neutral-200: #e6e9ee; /* (site) borders — most-used color on hostlx.com */ --neutral-300: #d3d9e2; --neutral-400: #a0abbc; /* (site) muted text */ --neutral-500: #667791; /* (site) */ --neutral-600: #4a5669; /* (site) body text */ --neutral-700: #3a4659; /* (site) */ --neutral-800: #2c3645; /* (site) */ --neutral-900: #1e2632; --neutral-950: #12171f; /* --------------------------------------------------- Primary ramp — hostLX navy Brand primary is #15417a (site): links, headings, header bg, footer bg, primary buttons, colored rows. --------------------------------------------------- */ --primary-50: #eaf0f8; --primary-100: #d5e0ef; --primary-200: #adc2dc; --primary-300: #6589b8; /* (site) */ --primary-400: #446795; /* (site) */ --primary-500: #2a5c9c; /* (site) */ --primary-600: #15417a; /* (site) BRAND PRIMARY */ --primary-700: #123769; /* (site) notification bg */ --primary-800: #0e2c55; --primary-900: #0a2140; --primary-950: #06152a; /* Primary colors Nexus ships these mapped to the neutral ramp (gray). Remapped to the navy ramp so the client area picks up the hostLX brand color the way the main site does. */ --primary: var(--primary-600); --primary-lifted: var(--primary-700); --primary-accented: var(--primary-800); /* Secondary colors — slate, NOT the hostLX gold. Careful: despite the name, --secondary has exactly one consumer in Nexus — .status-cancelled (theme.css:10528). It is a status gray, not the main site's "secondary button" color. Setting it to gold makes the Cancelled badge bright gold with white text (1.5:1, illegible). The hostLX gold lives in --brand-gold / --yellow-300. */ --secondary: var(--neutral-500); --secondary-lifted: var(--neutral-600); --secondary-accented: var(--neutral-700); /* hostLX gold #ffcc33 (site) — the main site's secondary button color. Not consumed by any parent rule; kept here for component overrides (gold CTAs) in a later pass. */ --brand-gold: #ffcc33; --brand-gold-lifted: #f0b81a; --brand-gold-accented: #d19d00; /* Success colors — base #00b75a (site) */ --success: #00b75a; --success-lifted: #009548; --success-accented: #007a3b; /* Info colors — base #0098ef (the Nexus/site template blue), accented #00629a (site notification default) */ --info: #0098ef; --info-lifted: #0079c0; --info-accented: #00629a; /* Notice colors hostLX has no purple in its palette, but Nexus needs a distinct hue for status badges (.status-answered) and card accents. Muted indigo, harmonized to the navy. */ --notice: #5b5bd6; --notice-lifted: #4a4ac0; --notice-accented: #3b3b9e; /* Warning colors — amber, sits between the site's gold (#ffcc33) and its error red (#cd3100) */ --warning: #f5a300; --warning-lifted: #d18a00; --warning-accented: #a86f00; /* Error colors — base #cd3100 (site) */ --error: #cd3100; --error-lifted: #a82800; --error-accented: #8a2100; /* Grayscale colors */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); /* Neutral colors */ --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); /* Text neutral colors --text is #4a5669 to match the main site's body color exactly (hostlx.com sets body { color: #4a5669 }). */ --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-600); /* Border neutral colors --border-muted is #e6e9ee, the main site's border color. */ --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); /* Background neutral colors */ --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--primary-600); /* Additional colors Retuned from Nexus's neon defaults to sit alongside the navy/slate scheme. Used by .card-accent-* and status badges. */ --yellow-200: #ffe08a; --yellow-300: #ffcc33; --teal-300: #4fd1c5; --teal-400: #26b3a6; --emerald-300: #4fd48a; --pink-400: #e86a9e; /* Additional custom properties */ /* Font sizes — unchanged from Nexus. These are UI text sizes; the main site's 16px applies to body copy, set in the typography section below. */ --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; /* Spacing */ --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; /* Rounding — matched to hostlx.com Site uses 4px (small), 6px (buttons/inputs), 12px (cards). */ --rounding-sm: 0.25rem; /* 4px */ --rounding-md: 0.375rem; /* 6px — was 0.5rem in Nexus */ --rounding-lg: 0.75rem; /* 12px */ /* Other */ --letter-spacing: 0em; --disabled-opacity: 25%; /* =================================================== ADDITIONS BEYOND THE PARENT'S TOKEN SET Everything above mirrors nexus/css/custom.css. The tokens below are new — the parent has no spacing scale and no focus-ring definition, which is why spacing in Nexus is ad hoc (every component invents its own numbers) and why focus states fall back to Bootstrap blue. =================================================== */ /* Spacing scale — 4px base. Nexus has no spacing tokens at all; component padding is hardcoded per-rule, which is the root of the inconsistent rhythm across pages. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ /* Brand primary as raw channels, so rgba() rings can be built from it. CSS cannot extract components from a hex token, so this has to be maintained alongside --primary-600 (#15417a). */ --primary-rgb: 21, 65, 122; /* Focus ring — one definition for every interactive element. theme.css:2270 etc. uses Bootstrap's rgba(0,123,255,.25) blue in ~34 places. */ --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.15); --focus-ring-strong: 0 0 0 3px rgba(var(--primary-rgb), 0.28); /* Elevation — matched to hostlx.com's box-shadow: 0 15px 30px rgba(74,86,105,0.1) */ --shadow-sm: 0 1px 2px rgba(74, 86, 105, 0.06); --shadow-md: 0 1px 2px rgba(74, 86, 105, 0.04), 0 8px 16px rgba(74, 86, 105, 0.06); --shadow-lg: 0 1px 2px rgba(74, 86, 105, 0.04), 0 15px 30px rgba(74, 86, 105, 0.1); /* Minimum comfortable tap target (WCAG 2.5.8 asks 24px, platform guidance asks 44px) */ --tap-min: 44px; } /* ***************************************************** Typography — Poppins Nexus sets Open Sans on body at theme.css:9199 (which already overrides the Bootstrap system stack at theme.css:64). Both are replaced here. Three other selectors hardcode their own stack and would otherwise stay on the old font: theme.css:5368 .tooltip theme.css:5470 .popover theme.css:11304 .popover-user-notifications Form controls need no help — theme.css:247 already sets font-family: inherit on input/button/select/textarea. Monospace and Font Awesome stacks are left alone. Poppins is geometric and noticeably WIDER than Open Sans at the same px size, with taller ascenders. Two knock-on adjustments: slightly negative tracking on headings so they do not sprawl, and more body leading (1.6 vs Bootstrap's 1.5) because the tall ascenders make tight lines feel cramped. ***************************************************** */ body, .tooltip, .popover, .popover-user-notifications { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { color: var(--text); line-height: 1.6; } /* ***************************************************** Type scale theme.css:362-392 is Bootstrap 4's raw scale — h1 2.5rem (40px), h2 2rem, h3 1.75rem — applied with NO responsive step-down, so a phone renders headings at full desktop size. That is why the store headline swallows the viewport while its subtitle stays tiny: the jump between them is ~27px with nothing in between. Rebuilt as a scale that actually steps down, and pulled in a little overall since Poppins reads larger than the Open Sans these numbers were chosen for. Weight moves 500 -> 600: Bootstrap's 500 is too light for Poppins, whose geometric forms need more stroke to hold as headings. Note: the --text-xs/sm/md/lg tokens are NOT used here, and are not used anywhere in the parent theme either (zero references across theme.css, store.css and invoice.css). They are dead in Nexus. They stay defined above only so the child keeps full parity with the parent's contract — editing them changes nothing on screen. ***************************************************** */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } h1, .h1 { font-size: 2.25rem; } /* 36px, was 40px */ h2, .h2 { font-size: 1.875rem; } /* 30px, was 32px */ h3, .h3 { font-size: 1.5rem; } /* 24px, was 28px */ h4, .h4 { font-size: 1.25rem; } /* 20px, was 24px */ h5, .h5 { font-size: 1.125rem; } /* 18px, was 20px */ h6, .h6 { font-size: 1rem; } /* 16px, unchanged */ /* Phones: Bootstrap applies no reduction at all, so a 40px h1 sat on a 390px screen. */ @media (max-width: 767.98px) { h1, .h1 { font-size: 1.75rem; } /* 28px */ h2, .h2 { font-size: 1.5rem; } /* 24px */ h3, .h3 { font-size: 1.25rem; } /* 20px */ h4, .h4 { font-size: 1.125rem; } /* 18px */ h5, .h5 { font-size: 1rem; } /* 16px */ h6, .h6 { font-size: 0.9375rem; } /* 15px */ } .card-title { letter-spacing: -0.015em; } /* ***************************************************** FIX 1 — Footer copyright contrast theme.css:9851 sets .copyright to var(--text-lifted) (#667791) on the footer's var(--bg-inverted). With the navy footer that is 2.2:1 — fails WCAG AA (needs 4.5:1). Note: stock Nexus had --bg-inverted as near-black (#111827), giving ~4.0:1 — still failing, but less visibly. Pointing --bg-inverted at the brand navy to match hostlx.com's footer surfaced it. --neutral-300 on #15417a = 7.1:1 ***************************************************** */ footer.footer .copyright { color: var(--neutral-300); } /* ***************************************************** FIX 1b — Footer social icons were invisible Two overlapping causes: 1. .btn hardcodes `color: #212529` (Bootstrap base). footer.footer sets `color: #fff`, but that is INHERITED styling and loses to .btn's own declaration. Result: near-black icons on the navy footer at 1.5:1. Proof: the language button in the same row IS legible because it carries .btn-outline-light (color: #f8f9fa). The social icons use a bare .btn (includes/social-accounts.tpl:3), so nothing ever lightens them. 2. theme.css:9837 sets footer .btn border-color to var(--border-accented) (#4a5669) — 1.4:1 on navy, so the boxes read as barely-there smudges. At specificity 0,2,1 it also beats .btn-outline-light's light border, so the language button is affected too. White on navy = 10.1:1. Border at 50% white blends to #8aa0bd = 3.8:1, clearing the 3:1 bar for non-text UI. .btn-icon has no base definition anywhere in the theme (only footer.footer .btn-icon exists), so the glyph is also flex-centered here rather than baseline-aligned in its 1.75rem box. ***************************************************** */ footer.footer .btn { border-color: rgba(255, 255, 255, 0.5); } /* ***************************************************** FIX 1f — "Contact UsTerms of Service" ran together theme.css:9829-9833 zeroes the footer link padding below 1200px: @media (max-width: 1199.98px) { footer.footer .nav-link { padding: 0 } } Bootstrap's .nav-link normally supplies 0.5rem 1rem, and that is the ONLY thing separating the two footer links (footer.tpl:34-45 has no margins or separators). Zeroing it butts the labels directly against each other. Restored with enough vertical padding to make them real tap targets too, since this only applies on small screens. ***************************************************** */ @media (max-width: 1199.98px) { footer.footer .nav-link { padding: 0.35rem 0.75rem; } } footer.footer .btn-icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: var(--rounding-sm); } footer.footer .btn-icon:hover, footer.footer .btn-icon:focus { color: var(--primary); background-color: #fff; border-color: #fff; } /* ***************************************************** FIX 1c — Logo row was cramped against the topbar theme.css:9741 zeroes the navbar padding and :9762 zeroes .navbar-brand's padding/margin, so the ONLY breathing room above the logo is mt-2 (8px) from header.tpl:81. With a 60px logo that reads as squeezed against the navy topbar. hostlx.com uses #header { height: 60px; padding: 30px 0 } — 30px above and below. Matched here. The mt-2/mb-2 utilities are neutralized because Bootstrap's spacing utilities ship with !important, so they cannot be overridden any other way short of copying header.tpl into the child. Spacing then lives in one place (the padding below) instead of being split between markup and CSS. Only the logo row is targeted: it is .navbar.navbar-light (header.tpl:80), whereas the menu row below is .navbar-expand-xl.main-navbar-wrapper (header.tpl:117). ***************************************************** */ header.header .navbar.navbar-light > .container { margin-top: 0 !important; margin-bottom: 0 !important; } header.header .navbar.navbar-light { padding-top: 30px; padding-bottom: 20px; } /* hostlx.com drops to body{padding-top:80px} on small screens, so the header tightens up there too. */ @media (max-width: 767.98px) { header.header .navbar.navbar-light { padding-top: 16px; padding-bottom: 12px; } } /* ***************************************************** FIX 1d — Mobile: logo, cart and menu on one line theme.css:9683 allows .logo-img up to 400px wide. On a ~390px viewport the logo eats the full container, so the .toolbar (cart + hamburger, header.tpl:101-114) wraps to a second row. theme.css:9744 then centers that orphaned row via `justify-content: center` under 576px, which is why the two buttons sit centered under the logo. Fixed by capping logo height on smaller screens and forbidding the row from wrapping. The .navbar-light selector keeps this on the logo row only. Specificity 0,3,1 beats theme.css:9744's 0,2,1, so the centering rule is overridden regardless of order. ***************************************************** */ @media (max-width: 1199.98px) { header.header .navbar.navbar-light > .container { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; } header.header .navbar-brand { flex: 0 1 auto; min-width: 0; } header.header .logo-img { max-height: 42px; max-width: 100%; } header.header .toolbar { flex: 0 0 auto; flex-wrap: nowrap; } } /* ***************************************************** FIX 1e — Mobile menu had 40px gaps between every item theme.css:9646 sets #nav { gap: 40px }. On desktop .navbar-nav is flex-direction: row, so that is HORIZONTAL spacing between top-level menu items — correct. When the navbar collapses, Bootstrap switches the list to flex-direction: column and the same 40px becomes VERTICAL space between every item. The mobile menu balloons to several screens tall. Made worse by markup: the in includes/navbar.tpl:3 carries no .nav-link class (only `dropdown-toggle`, or no class at all for leaf items), so the links get zero padding from Bootstrap. The result is small tap targets separated by large voids. So: collapse the gap, then give the links real padding — ~44px tap targets with a divider for structure. #nav is an ID (specificity 1,0,0), so it has to be named explicitly; a class-only selector cannot beat it. ***************************************************** */ @media (max-width: 1199.98px) { /* Menu items sat flush against the viewport edge because Bootstrap zeroes the container padding below the expand breakpoint (theme.css:3966-3976): @media (max-width: 1199.98px) { .navbar-expand-xl > .container { padding: 0 } } That is deliberate in Bootstrap — it lets a collapsed menu run edge to edge on the assumption the theme pads the items itself. Nexus never does, so nav text, the dividers and the search box all ran into the screen edge. Restoring the 15px here (rather than padding each link) realigns the menu with the breadcrumb and cards, and fixes the search box in the same stroke. */ header.header .main-navbar-wrapper > .container { padding-right: 15px; padding-left: 15px; } header.header .main-navbar-wrapper #nav, header.header .main-navbar-wrapper .navbar-nav { gap: 0; } /* Horizontal padding now comes from the container, so links align exactly with the page grid */ header.header .main-navbar-wrapper .navbar-nav > li > a { display: block; padding: 11px 0; border-bottom: 1px solid var(--border-muted); } /* Last item in each list needs no trailing rule */ header.header .main-navbar-wrapper .navbar-nav > li:last-child > a { border-bottom: 0; } /* Submenus: theme.css:3801 already makes them static when collapsed, but they arrive unindented and on a white card, so they read as top-level items. Indent + tint to show hierarchy. */ header.header .main-navbar-wrapper .dropdown-menu { margin: 0 0 4px; padding: 4px 0; border: 0; border-left: 2px solid var(--border-muted); border-radius: 0; margin-left: 8px; background-color: var(--bg-muted); box-shadow: none; } /* navbar.tpl:14-15 puts .dropdown-item on BOTH the
  • and the , so Bootstrap's 1.5rem side padding applies twice (3rem total indent). Neutralize the outer one. */ header.header .main-navbar-wrapper .dropdown-menu > li.dropdown-item { padding: 0; } header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item { padding: 9px 12px !important; white-space: normal; } } /* ***************************************************** FIX 2 — Badge text contrast theme.css:9521 hardcodes .label { color: #fff }, but several badge backgrounds are far too light for white text. Measured against white: --yellow-300 #ffcc33 1.5:1 (Suspended, Refunded) --warning #f5a300 2.1:1 (Pending, In Progress) --success #00b75a 2.7:1 (Active, Open, Paid) --info #0098ef 3.1:1 (On Hold) All four fail. Rather than dull the brand colors, the foreground is flipped to dark on those backgrounds — every combination below clears AA: dark on --yellow-300 10.1:1 dark on --warning 7.3:1 dark on --success 5.8:1 dark on --info 4.9:1 Backgrounds where white already passes are left alone: --error 5.2:1, --notice 5.4:1, --neutral 4.6:1, --primary 10.1:1. This is a pre-existing Nexus bug, not a brand issue — stock #ffdf20 on white text was 1.45:1. ***************************************************** */ .label-warning, .status-suspended, .status-pending-transfer, .status-refunded, .requestor-type-registereduser, .status-pending, .status-customer-reply, .status-pending-registration, .status-redemption, .status-grace, .status-inprogress, .status-active, .status-open, .status-completed, .status-paid, .status-accepted, .status-onhold, .label-success, .label-info { color: var(--neutral-900); } /* ***************************************************** FIX 2a — Container-less pages ran edge to edge header.tpl:159 renders:
    WHMCS core sets $skipMainBodyContainer on cart and order pages, so those render a bare
    with no container and therefore no 15px gutter. Headings, panels and product cards all touch the viewport edge. The intent upstream is that such pages supply their own .container (as store/order.tpl:1 does). Order form templates frequently do not, which is the broken case. :has() lets this pad ONLY when the page has not already provided its own container, so templates that do the right thing are left untouched rather than double-padded. ***************************************************** */ section#main-body > div:not(.container):not(:has(> .container)) { padding-left: 15px; padding-right: 15px; } /* ***************************************************** FIX 2b — Service status badges: clipped text + white-on-gold Two separate defects on the "Your Active Products/Services" list (includes/active-products-services-item.tpl:6, which renders ). (a) theme.css:11089 .div-service-status .label:not(.label-placeholder) { width: 3rem } A hard 48px cap, combined with overflow:hidden and text-overflow:ellipsis on the same element, is why "Suspended" renders as "Susp...". theme.css:11125 releases it with `width: initial !important` — but only at min-width 768px, so mobile stays clamped. The .label-placeholder sibling exists specifically to reserve the width of the longest status string, so sizing to content is what the markup already intends. (b) theme.css:11080 .div-service-status .label { color: white } At specificity 0,2,0 this beat the 0,1,0 .label-success / .label-warning rules in FIX 2 above, so Active and Suspended kept their unreadable white text. Re-applied here at matching specificity. Contrast recap: dark on --success 5.8:1, on --yellow-300 10.1:1. White was 2.7:1 and 1.5:1. ***************************************************** */ .div-service-status .label:not(.label-placeholder) { width: auto; max-width: 100%; } .div-service-status .label-success, .div-service-status .label-warning, .div-service-status .label-info { color: var(--neutral-900); } /* ***************************************************** FIX 2c — Dead 70px band under the logo theme.css:9653 sets `header.header .navbar { min-height: 70px }`. Both header rows carry the .navbar class — the logo row (header.tpl:80) and the menu row (header.tpl:117) — so the menu row reserves 70px even when it has collapsed to nothing on mobile. That is the empty white gap under the logo, and it is at its worst on the login page, where there is no menu to show at all. min-height only matters for the logo row, which already exceeds it. ***************************************************** */ @media (max-width: 1199.98px) { header.header .navbar.main-navbar-wrapper { min-height: 0; } /* An empty collapse still contributes its own box */ header.header .main-navbar-wrapper .navbar-collapse:not(.show):empty { display: none; } header.header .main-navbar-wrapper .navbar-nav { margin-top: 0; margin-bottom: 8px; } } /* ***************************************************** FIX 2d — Empty card footers padding out every panel clientareahome.tpl:116-120 renders .card-footer unconditionally — the {if $item->hasFooterHtml()} sits INSIDE the div rather than around it. Every panel without footer content therefore gets an empty footer carrying Bootstrap's `padding: 0.75rem 1.25rem` plus a tinted background, which is the dead space under Overdue Invoices, Recent Support Tickets and Register a New Domain. _client-home.scss:32 strips its border-top, so the strip is invisible but still occupies height. :empty alone will not match: Smarty leaves a whitespace text node inside the div. :not(:has(*)) catches the whitespace-only case by testing for element children. Caveat: a footer holding ONLY bare text with no element wrapper would also be hidden. Every footer this theme produces wraps its content in /