, yet it displays monospace with its line breaks intact -- so the stored content itself contains a
. That could not be confirmed directly (the page needs
a login), so this is written to be correct either way: if there is no
, it matches nothing and changes nothing.
white-space is kept as pre-wrap so the author's line breaks survive;
only the typeface joins the rest of the page. Scoped to list items so
knowledgebase code blocks keep their monospace, which they want. */
.list-group-item pre {
font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
white-space: pre-wrap;
word-wrap: break-word;
background-color: transparent;
border: 0;
padding: 0;
margin: 0;
}
/* ---- Knowledgebase --------------------------------------------------
The "Was this answer helpful?" bar has its own class rather than being
an alert, so the alert rules above never reached it. */
.kb-rate-article {
background-color: var(--bg-soft);
color: var(--ink);
border-radius: 12px;
font-size: 16px;
font-weight: 600;
}
/* Article body ships at font-weight 200 with line-height 1.2em -- a
line-height SMALLER than the font size, which is what makes these
articles read as a cramped grey block. Also: we only load Inter at
400-700, so weight 200 has no real face to use and the browser either
substitutes or synthesises one. Normal weight and open leading. */
.kb-article-content {
font-size: 15px;
line-height: 1.7;
font-weight: 400;
color: var(--ink);
}
.kb-article-title { font-weight: 700; }
.kb-alsoread {
background-color: var(--bg-soft);
border-radius: 10px;
}
/* ---- Domain search & pricing ---------------------------------------
The single most off-brand thing left in the theme: Six wraps the
domain search in a #ffb201 -> #ffd960 gold gradient with a globe
image behind it. Replaced with the ink hero the marketing site uses.
The gradient is set via four vendor-prefixed background declarations
plus a background-color, so `background` has to be reset wholesale
rather than overriding background-color alone. */
.domain-checker-container {
background: var(--ink);
border-radius: 14px;
}
.domain-checker-bg {
padding: 40px 0;
background-image: none;
}
/* Six's white padded wrapper is what makes the field and button read as
one control; keep it, don't flatten it into the ink. */
.domain-checker-container .input-group-box {
background-color: #fff;
border-radius: 10px;
padding: 8px;
}
.domain-checker-container .input-group-box .form-control {
border: 0;
box-shadow: none;
background: transparent;
font-size: 16px;
}
.domain-checker-container .input-group-box .form-control:focus { box-shadow: none; }
/* The search button is .btn-primary, which this theme paints --ink --
directly on top of an --ink hero, so it disappeared entirely. Inside
this hero it takes the green CTA instead. */
.domain-checker-container .btn-primary.domain-check-availability {
background-color: var(--green);
border-color: var(--green);
color: #04150f;
border-radius: 8px;
padding-left: 26px;
padding-right: 26px;
}
.domain-checker-container .btn-primary.domain-check-availability:hover,
.domain-checker-container .btn-primary.domain-check-availability:focus {
background-color: var(--green-dark);
border-color: var(--green-dark);
color: #fff;
}
/* Extension category filters: one active pill, the rest inert. */
.tld-filters a {
border-radius: 999px;
padding: 5px 12px;
font-weight: 600;
background-color: var(--bg-soft);
color: var(--ink);
}
.tld-filters a:hover { background-color: #e6ebe9; color: var(--ink); }
.tld-filters a.active,
.tld-filters a.label-success {
background-color: var(--ink);
color: #fff;
}
/* TLD pricing table: a 6px #97b5d2 underline with #369 on alternating
columns, and two greys striping the header. Flattened to one rule. */
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
background-color: #fff;
border-bottom: 2px solid var(--ink);
border-color: var(--ink);
border-radius: 0;
font-weight: 700;
color: var(--ink);
}
.domain-pricing .tld-row { border-bottom-color: var(--line); }
.domain-pricing .tld-row.highlighted { background: var(--bg-soft); }
.domain-pricing .two-row-center { border-right-color: var(--line); }
/* Promo flags stay loud -- that is their job -- but on brand hues. */
.tld-sale-group { border-radius: 4px; font-weight: 700; }
.tld-sale-group-new { background-color: var(--green); color: #04150f; }
/* ---- Knowledgebase category grid ------------------------------------
Rebuilt as cards matching the marketing site's .feature-tile: a soft
green icon badge, bold name, muted description. Markup is fixed --
a col holding Name (n), an optional admin Edit link,
and -- so the col itself becomes the card.
Bootstrap's 15px col padding IS the gutter, so a border drawn on the
col would leave cards touching. Instead the padding is reset and the
row uses flex `gap` for separation, which also means the row's
negative margins have to go. */
.kbcategories,
.kbcategories ~ .row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0 0 20px;
}
/* Bootstrap gives .row clearfix pseudo-elements (content:" ";display:table).
Inside a FLEX container those become real flex items -- each one eating a
20px gap. That is four gaps instead of two, which is what pushed the third
card onto its own line while the arithmetic said it should fit. Measured,
not guessed: the first card sat 20px inside a row with zero padding. */
.kbcategories::before, .kbcategories::after,
.kbcategories ~ .row::before, .kbcategories ~ .row::after {
display: none;
}
.kbcategories > [class*="col-"],
.kbcategories ~ .row > [class*="col-"] {
position: relative;
flex: 1 1 calc(33.333% - 14px);
max-width: calc(33.333% - 14px);
width: auto;
float: none;
/* Flex items default to min-width:auto and so refuse to shrink below
their longest unbreakable word. "Authoring/Development" is one
21-character token, which forced every card wide enough that only
two fitted per row. */
min-width: 0;
padding: 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.kbcategories > [class*="col-"]:hover,
.kbcategories ~ .row > [class*="col-"]:hover {
border-color: var(--ink);
box-shadow: 0 12px 24px -14px rgb(13 26 26 / 30%);
}
/* Category name; the folder icon becomes the tile badge above it. */
.kbcategories > [class*="col-"] > a:first-of-type,
.kbcategories ~ .row > [class*="col-"] > a:first-of-type {
display: block;
color: var(--ink);
font-weight: 700;
font-size: 16px;
line-height: 1.35;
margin-bottom: 8px;
overflow-wrap: break-word;
}
.kbcategories > [class*="col-"] > a:first-of-type > i,
.kbcategories ~ .row > [class*="col-"] > a:first-of-type > i {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 10px;
background: #e4f8ec;
color: var(--green-dark);
font-size: 17px;
}
.kbcategories > [class*="col-"]:hover > a:first-of-type,
.kbcategories ~ .row > [class*="col-"]:hover > a:first-of-type { color: var(--green-dark); }
/* Make the whole card clickable without touching the markup. */
.kbcategories > [class*="col-"] > a:first-of-type::after,
.kbcategories ~ .row > [class*="col-"] > a:first-of-type::after {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
}
.kbcategories p,
.kbcategories ~ .row p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 991px) {
.kbcategories > [class*="col-"],
.kbcategories ~ .row > [class*="col-"] {
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 600px) {
.kbcategories > [class*="col-"],
.kbcategories ~ .row > [class*="col-"] {
flex-basis: 100%;
max-width: 100%;
}
}
/* Sits above the stretched-link overlay so it stays clickable. */
.admin-inline-edit {
position: relative;
z-index: 1;
white-space: nowrap;
font-size: 12px;
color: var(--muted);
}
.admin-inline-edit:hover { color: var(--ink); }
/* ---- Open Ticket department chooser ---------------------------------
Same card treatment as the knowledgebase categories. The department
list's row carries no class of its own, so it is reached through its
children: `col-md-6 margin-bottom` appears in exactly one template
(supportticketsubmit-stepone.tpl), which makes it a safe hook.
:has() is doing the parent selection. Where it is unsupported the
cards simply stay in Bootstrap's float layout -- less tidy, never
broken. */
.row:has(> .col-md-6.margin-bottom) {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0;
}
/* Both the clearfix divs the template emits every second item AND
Bootstrap's own .row pseudo-elements would otherwise become flex
items, each eating a gap. */
.row:has(> .col-md-6.margin-bottom)::before,
.row:has(> .col-md-6.margin-bottom)::after,
.row:has(> .col-md-6.margin-bottom) > .clearfix {
display: none;
}
.col-md-6.margin-bottom {
position: relative;
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
min-width: 0;
width: auto;
float: none;
margin: 0;
padding: 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.col-md-6.margin-bottom:hover {
border-color: var(--ink);
box-shadow: 0 12px 24px -14px rgb(13 26 26 / 30%);
}
.col-md-6.margin-bottom > p { margin: 0; }
.col-md-6.margin-bottom > p strong a {
display: block;
color: var(--ink);
font-weight: 700;
font-size: 16px;
}
.col-md-6.margin-bottom:hover > p strong a { color: var(--green-dark); }
.col-md-6.margin-bottom > p strong a > i {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 10px;
background: #e4f8ec;
color: var(--green-dark);
font-size: 16px;
}
.col-md-6.margin-bottom > p strong a::after {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
}
.col-md-6.margin-bottom > p + p {
margin-top: 6px;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 700px) {
.col-md-6.margin-bottom { flex-basis: 100%; max-width: 100%; }
}
/* ---- Affiliates -----------------------------------------------------
The three stat tiles (clicks, signups, conversions) are all neutral
counters, but Six tags them alert-warning / alert-info / alert-success
-- so they render cream, grey and green side by side as though two of
them were warnings. One card treatment for all three. */
.affiliate-stat {
background-color: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 14px;
color: var(--ink);
}
.affiliate-referral-link span {
border-color: var(--line);
border-radius: 10px;
color: var(--ink);
}
/* ---- Knowledgebase article lists ------------------------------------
Used by both "Most Popular Articles" and a category's article list.
The markup is a FLAT sequence inside .kbarticles -- , an optional
admin Edit link, , repeating -- with no wrapper per article. So a
row is built from the pair: the link opens it, the paragraph closes it
and carries the divider. */
.kbarticles {
padding: 0;
font-size: 15px;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.kbarticles > a:not(.admin-inline-edit) {
display: block;
padding: 16px 20px 0;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
}
.kbarticles > a:not(.admin-inline-edit):hover { color: var(--green-dark); }
/* Six paints the file glyph #8ce; inline green suits a dense list better
than the badge treatment used on the category cards. */
.kbarticles a .glyphicon,
.kbarticles a .fa-file-alt { color: var(--green-dark); }
.kbarticles > p {
margin: 0;
padding: 6px 20px 16px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.kbarticles > p:last-child { border-bottom: 0; }
/* The Edit link sits between the title and the excerpt in source order,
so keep it out of the flow rather than letting it break the row. */
.kbarticles > a.admin-inline-edit {
display: inline-block;
margin: 2px 0 0 20px;
}
/* ---- Knowledgebase sidebar icon -------------------------------------
WHMCS labels the KB Categories panel with `fas fa-info` (\f129), which
is the bare info mark -- it renders as a lowercase "i" next to the word
CATEGORIES and reads like a typo. Swapped for the folder (\f07b),
matching the fa-folder-open used on the category cards.
FontAwesome draws icons as ::before content, so overriding content is
enough; the font family and weight are unchanged. Scoped to the sidebar
panel title so fa-info elsewhere is untouched (fa-info-circle is a
different glyph and unaffected either way). */
.panel-sidebar .panel-title > .fa-info::before { content: "\f07b"; }
/* Related Articles uses the same .kbarticles container but a DIFFERENT
shape: each item is wrapped in its own
, where the category and
"most popular" lists are flat. The direct-child rules above therefore
never reach it. The wrapper is an improvement -- it gives a real row
element to hover and to hang the divider on. */
.kbarticles > div {
position: relative;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
transition: background-color .12s ease;
}
.kbarticles > div:last-child { border-bottom: 0; }
.kbarticles > div:hover { background-color: var(--bg-soft); }
.kbarticles > div > a:not(.admin-inline-edit) {
display: block;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
}
.kbarticles > div:hover > a:not(.admin-inline-edit) { color: var(--green-dark); }
/* Whole row clickable, with the Edit link kept above the overlay. */
.kbarticles > div > a:not(.admin-inline-edit)::after {
content: '';
position: absolute;
inset: 0;
}
.kbarticles > div > a.admin-inline-edit {
position: relative;
z-index: 1;
margin-left: 6px;
}
.kbarticles > div > p {
margin: 6px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
/* ===================================================================
ORDER FORM BODY
The standard_cart product listing, sidebar, and checkout steps.
Ships inside the client area theme's css/custom.css, which loads on
every cart page.
It briefly lived in a child order form template that overrode
common.tpl to link its own stylesheet. That does not work: verified
against the live server, a child's common.tpl is never rendered -- the
parent's is used instead, and our stylesheet was simply never
requested. Consistent with WHMCS's own shipped children, none of which
override common.tpl; universal_slider puts its tags in
products.tpl. But products.tpl is only the product listing, and we need
these rules on configure and checkout too.
=================================================================== */
/* ---- Page heading -------------------------------------------------
Six paints this #058 blue with a #ccc rule under it. */
div.header-lined h1 {
color: var(--ink);
font-weight: 700;
font-size: 30px;
border-bottom: 1px solid var(--line);
padding-bottom: 14px;
margin-bottom: 24px;
}
/* ---- Sidebar panels ------------------------------------------------ */
.panel-sidebar {
border-color: var(--line);
border-radius: 14px;
box-shadow: none;
overflow: hidden;
}
.panel-sidebar > .panel-heading {
background-color: #fff;
border-bottom: 1px solid var(--line);
padding: 14px 18px;
}
.panel-sidebar .panel-title {
font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--ink);
}
.panel-sidebar .list-group-item {
border-color: var(--line);
padding: 11px 18px;
font-size: 14px;
color: var(--ink);
}
.panel-sidebar a.list-group-item:hover {
background-color: var(--bg-soft);
color: var(--green-dark);
}
/* Six uses a slate #465054 for the selected category; the marketing
site's selected state is ink. */
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
background-color: var(--ink);
border-color: var(--ink);
color: #fff;
}
/* ---- Product cards -------------------------------------------------
standard_cart floats .product-desc left at 60% and footer right at
40%. The marketing site's pricing card is a single vertical column,
so we unwind both floats and stack them.
These rules ship in the order form child template's own stylesheet,
which common.tpl loads AFTER standard_cart's -- so equal specificity
wins on source order and no `body` prefix or !important is needed.
(Before the child template existed this lived in six/custom.css, which
loads in the head, and every rule here silently lost.) */
body #order-standard_cart .products .product {
padding: 0;
margin: 0 0 20px 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
}
body #order-standard_cart .products .product header {
margin: 0;
padding: 18px 22px 0;
background: #fff;
border-radius: 0;
}
body #order-standard_cart .products .product header span {
color: var(--ink);
font-size: 16px;
font-weight: 700;
}
body #order-standard_cart .products .product div.product-desc {
float: none;
width: 100%;
padding: 14px 22px 0;
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
body #order-standard_cart .products .product div.product-desc ul {
padding-left: 18px;
margin-bottom: 0;
}
body #order-standard_cart .products .product span.feature-value {
font-weight: 600;
color: var(--ink);
}
body #order-standard_cart .products .product footer {
float: none;
width: 100%;
margin: 0;
padding: 18px 22px 22px;
font-size: 13px;
text-align: left;
color: var(--muted);
}
body #order-standard_cart .products .product div.product-pricing {
margin-bottom: 14px;
}
body #order-standard_cart .products .product div.product-pricing span.price {
display: block;
color: var(--ink);
font-size: 26px;
font-weight: 700;
line-height: 1.2;
}
/* Full-width CTA, matching the marketing site's pricing card. */
body #order-standard_cart .products .product footer .btn {
display: block;
width: 100%;
padding: 11px;
font-size: 14px;
}
/* ---- Configure / checkout steps ------------------------------------ */
body #order-standard_cart .product-info {
background-color: var(--bg-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 14px 20px;
}
body #order-standard_cart .product-info .product-title {
color: var(--ink);
font-weight: 700;
}
body #order-standard_cart .panel,
body #order-standard_cart .well {
border-color: var(--line);
border-radius: 14px;
box-shadow: none;
}
body #order-standard_cart .order-summary .product-name {
color: var(--ink);
font-weight: 700;
}
/* ---- Forms --------------------------------------------------------- */
.form-control {
border-color: var(--line);
border-radius: 8px;
box-shadow: none;
height: auto;
padding: 9px 12px;
font-size: 14px;
color: var(--ink);
}
.form-control:focus {
border-color: var(--green);
box-shadow: 0 0 0 3px rgb(44 199 106 / 18%);
}
/* ---- Review & Checkout --------------------------------------------
Found by walking a real order through to the payment step; none of
this is reachable from the product listing. standard_cart carries its
own blue (#058) and a grey order summary, independent of Six's. */
/* The "Product/Options | Price/Cycle" bar and the rule under the items. */
body #order-standard_cart .view-cart-items-header {
background-color: var(--ink);
border-radius: 14px 14px 0 0;
padding: 12px 18px;
font-size: 13px;
font-weight: 600;
}
body #order-standard_cart .view-cart-items {
border-bottom: 1px solid var(--line);
}
/* "Empty Cart" tab hanging off the bottom of the items table. */
body #order-standard_cart .empty-cart .btn {
background-color: var(--muted);
border-radius: 0 0 8px 8px;
font-size: 12px;
}
body #order-standard_cart .empty-cart .btn:hover {
background-color: var(--ink);
}
/* Centred section captions -- "Personal Information", "Billing Address",
"Payment Details" and friends. The span sits on the rule, so its
background must stay opaque white to keep punching the gap. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
border-top-color: var(--line);
}
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
color: var(--ink);
background-color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Order summary panel: grey #666 header on a #f8f8f8 body. */
body #order-standard_cart .order-summary {
background-color: var(--ink);
border-bottom: 0;
border-radius: 14px;
overflow: hidden;
}
body #order-standard_cart .order-summary h2 {
padding: 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
body #order-standard_cart .summary-container {
background-color: #fff;
border-radius: 0;
}
body #order-standard_cart .order-summary .summary-totals {
border-top-color: var(--line);
border-bottom-color: var(--line);
}
body #order-standard_cart .order-summary .total-due-today .amt {
color: var(--ink);
font-weight: 700;
}