/* ==========================================================================
Bang Media client area
Child theme of twenty-one. Loaded last, after all.min.css and theme.min.css.
Brand tokens lifted from bangmedia.com.au (bangmedia.shared.*.min.css).
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts
Display face is Cal Sans, which the website ships under the family name
Satoshi. Body face is Inter. Both files are copied from the live site so
the portal and the website render identically.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'BangDisplay';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('../fonts/calsans-vf2.woff2') format('woff2');
}
@font-face {
font-family: 'BangBody';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-normal-latin.woff2') format('woff2');
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;
}
@font-face {
font-family: 'BangBody';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-normal-latin-ext.woff2') format('woff2');
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;
}
@font-face {
font-family: 'BangBody';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
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;
}
@font-face {
font-family: 'BangBody';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
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;
}
/* --------------------------------------------------------------------------
2. Tokens
-------------------------------------------------------------------------- */
:root {
/* Surfaces, darkest to lightest */
--bang-bg: #0b0e12;
--bang-bg-deep: #070a0d;
--bang-surface: #12171e;
--bang-surface-2: #171d26;
--bang-surface-3: #1d2530;
/* Lines */
--bang-line: rgba(255, 255, 255, 0.09);
--bang-line-soft: rgba(255, 255, 255, 0.05);
--bang-line-strong: rgba(255, 255, 255, 0.16);
/* Type */
--bang-heading: #d1e2eb; /* white-stone */
--bang-text: #9db8c6;
--bang-muted: #6c8d9e; /* site body-text-colour */
/* Lifted from #4d6675, which measured 3.20:1 on the page and 3.28:1 in
the footer and so failed WCAG AA for normal text. This is 4.68:1 and
4.80:1, and still sits a clear step below --bang-muted. It carries the
copyright line, input placeholders and disabled text, all of which
clients actually read. */
--bang-faint: #64818f;
/* Brand accents */
--bang-blue: #9cdaeb;
--bang-button: #b7dee6;
--bang-blue-deep: #32a9d8;
--bang-mint: #5beeb9;
--bang-sky: #67c6fb;
--bang-pink: #e9a7f3;
--bang-purple: #cfaafe;
/* Status */
--bang-success: #5beeb9;
--bang-info: #67c6fb;
--bang-warning: #f5c86b;
--bang-danger: #ff7a85;
/* Shape */
--bang-radius: 10px;
--bang-radius-sm: 7px;
--bang-radius-pill: 999px;
--bang-font-display: 'BangDisplay', 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bang-font-body: 'BangBody', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--bang-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* --------------------------------------------------------------------------
3. Base
-------------------------------------------------------------------------- */
html {
background-color: var(--bang-bg);
/* Tells the browser to paint native controls, bare checkboxes and radios,
date pickers and select popups from the dark palette. Without this an
unchecked checkbox renders as a white square on the dark card. */
color-scheme: dark;
}
body,
body.primary-bg-color,
.primary-bg-color {
background-color: var(--bang-bg);
color: var(--bang-text);
font-family: var(--bang-font-body);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--bang-heading);
font-family: var(--bang-font-display);
font-weight: 500;
letter-spacing: -0.01em;
}
h1, .h1 { font-size: 2rem; line-height: 1.15; }
h2, .h2 { font-size: 1.55rem; line-height: 1.2; }
h3, .h3 { font-size: 1.25rem; line-height: 1.25; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
p { color: var(--bang-text); }
a {
color: var(--bang-blue);
text-decoration: none;
transition: color 160ms var(--bang-ease);
}
a:hover,
a:focus {
color: var(--bang-button);
text-decoration: none;
}
hr { border-top-color: var(--bang-line); }
small, .small { color: var(--bang-muted); }
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
code {
background-color: var(--bang-surface-2);
color: var(--bang-blue);
border-radius: var(--bang-radius-sm);
padding: 2px 6px;
}
pre {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
padding: 16px;
}
::selection {
background-color: rgba(156, 218, 235, 0.28);
color: #fff;
}
/* Keyboard focus. Bootstrap 4 hides this behind a blue glow that reads wrong
on a dark surface, so replace it outright. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--bang-blue);
outline-offset: 2px;
box-shadow: none;
}
/* Scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: var(--bang-surface-3) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background-color: var(--bang-surface-3);
border: 3px solid var(--bang-bg);
border-radius: var(--bang-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: #2b3644; }
/* --------------------------------------------------------------------------
4. Header
Structure comes from twenty-one header.tpl:
header.header > .topbar, .navbar (brand row), .main-navbar-wrapper (nav row)
-------------------------------------------------------------------------- */
header.header {
background-color: var(--bang-bg-deep);
border-bottom: 1px solid var(--bang-line);
position: relative;
z-index: 1020;
}
/* Thin ambient wash across the top, echoing the site's hero gradient. */
header.header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(91, 238, 185, 0.35) 18%,
rgba(103, 198, 251, 0.35) 42%,
rgba(207, 170, 254, 0.35) 68%,
transparent 100%);
pointer-events: none;
}
/* 4a. Topbar: notifications and the logged-in-as switcher */
header.header .topbar {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
padding: 6px 0;
color: var(--bang-muted);
font-size: 0.8rem;
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
color: var(--bang-muted);
font-size: 0.8rem;
border: 0;
background-color: transparent;
transition: color 160ms var(--bang-ease);
}
header.header .topbar .btn:hover,
header.header .topbar .active-client .btn:hover {
color: var(--bang-blue);
}
header.header .topbar .active-client .btn.btn-active-client span {
border-bottom: 1px dashed var(--bang-faint);
}
header.header .topbar .btn-return-to-admin {
color: var(--bang-warning);
}
/* 4b. Brand row */
header.header .navbar {
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
header.header .navbar-brand {
padding: 0;
margin-right: 1.5rem;
display: inline-block;
width: 100px;
height: 34px;
background-image: url('../img/logo-white.png');
background-image: image-set(url('../img/logo.webp') type('image/webp'),
url('../img/logo-white.png') type('image/png'));
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
/* The logo configured in WHMCS system settings is the dark-on-light mark. The
white brand asset is painted on the anchor above instead, so the is
hidden but left in the DOM for its alt text. */
header.header .navbar-brand .logo-img {
height: 34px;
width: 100px;
opacity: 0;
}
/* Knowledgebase search in the brand row.
theme.css puts `border: 1px solid #e5e5e5` on the .search wrapper itself,
not on the input, which is where the light outline in the header came from.
Style the wrapper as one pill and let the input and button sit inside it
with no borders of their own. */
header.header .search {
width: 325px;
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-pill);
overflow: hidden;
}
header.header .search:focus-within {
border-color: rgba(156, 218, 235, 0.45);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.10);
}
header.header .search .btn,
header.header .search .form-control,
header.header .navbar .search .btn,
header.header .navbar .search .form-control {
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
height: 38px;
color: var(--bang-text);
}
header.header .navbar .search .btn {
color: var(--bang-muted);
padding-left: 16px;
padding-right: 6px;
}
header.header .navbar .search .btn:hover { color: var(--bang-blue); }
header.header .navbar .search .form-control {
font-size: 0.875rem;
padding-left: 4px;
color: var(--bang-heading);
}
header.header .navbar .search .form-control::placeholder { color: var(--bang-faint); }
header.header .navbar .search .form-control:focus {
box-shadow: none;
border: 0;
background-color: transparent;
}
/* Cart and mobile toggle */
header.header .toolbar .nav-link,
header.header .toolbar .btn {
color: var(--bang-text);
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-pill);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 160ms var(--bang-ease);
}
header.header .toolbar .nav-link:hover,
header.header .toolbar .btn:hover {
color: var(--bang-blue);
border-color: var(--bang-line-strong);
background-color: var(--bang-surface-2);
}
header.header .toolbar .cart-btn { overflow: visible; }
header.header .toolbar .cart-btn .badge {
position: absolute;
top: -4px;
right: -4px;
background-color: var(--bang-mint);
color: #05231a;
font-weight: 600;
font-size: 0.65rem;
border-radius: var(--bang-radius-pill);
min-width: 18px;
padding: 2px 5px;
}
/* 4c. Main navigation row
Two constraints shape everything here.
First, twenty-one's includes/navbar.tpl does NOT emit .nav-link or .nav-item.
Top level anchors get `pr-4` and nothing else; the li gets `d-block`. Any
rule written against .nav-link matches nothing, which is how this bar ended
up at Bootstrap's #444 on a near-black ground with 24px of right-only
padding and no vertical padding at all.
Second, scripts.js runs `autoCollapse('#nav', 30)`, which measures the ul's
innerHeight and moves items into a "More" dropdown the moment it exceeds
30px. So the anchors cannot be given real vertical padding or a height: the
bar's height has to come from the wrapper instead, or the nav silently
collapses to a single item plus "More".
pr-4 is a Bootstrap utility carrying !important, so the padding reset must
carry it too. */
header.header .main-navbar-wrapper {
padding: 14px 0;
border-top: 1px solid var(--bang-line-soft);
}
@media (min-width: 1200px) {
header.header .main-navbar-wrapper > .container,
header.header .main-navbar-wrapper .navbar-collapse {
align-items: center;
}
/* theme.css puts 16px of horizontal padding on the collapse wrapper, which
pushed the whole row 16px right of the logo and the breadcrumb. */
header.header .main-navbar-wrapper .navbar-collapse {
padding-left: 0;
padding-right: 0;
}
}
header.header .main-navbar-wrapper .navbar-nav > li > a {
display: inline-block;
/* Keeps the ul under the 30px autoCollapse threshold. */
padding: 3px 1rem !important;
color: var(--bang-text);
font-family: var(--bang-font-body);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.005em;
white-space: nowrap;
position: relative;
transition: color 160ms var(--bang-ease);
}
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li.active > a,
header.header .main-navbar-wrapper .navbar-nav > li.show > a {
color: var(--bang-heading);
}
/* Line the row up with the logo above and the breadcrumb below. It is the
text that has to align, not the box, so drop the padding on the end items
rather than pulling the whole anchor left with a negative margin.
Desktop only. In the collapsed menu every item shares one gutter, and
stripping it from the first one left "Support Ticket" hanging out to the
left of everything under it. */
@media (min-width: 1200px) {
header.header .main-navbar-wrapper #nav > li:first-child > a {
padding-left: 0 !important;
}
header.header .main-navbar-wrapper #nav > li:first-child > a::before {
left: 0;
}
header.header .main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a {
padding-right: 0 !important;
}
header.header .main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a::before {
right: 0;
}
}
/* Underline sits on the bar's bottom edge, which is 14px below the anchor
because that is where the wrapper padding puts it. */
/* On ::before, not ::after. A .dropdown-toggle already uses ::after for its
caret, so an underline there fought the caret and produced the short grey
bar under Account instead of a rule under the item. */
header.header .main-navbar-wrapper .navbar-nav > li > a::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -14px;
height: 2px;
border-radius: 2px 2px 0 0;
background-color: var(--bang-blue);
transform: scaleX(0);
transform-origin: left center;
transition: transform 200ms var(--bang-ease);
}
header.header .main-navbar-wrapper .navbar-nav > li > a:hover::before,
header.header .main-navbar-wrapper .navbar-nav > li.active > a::before,
header.header .main-navbar-wrapper .navbar-nav > li.show > a::before {
transform: scaleX(1);
}
header.header .navbar .dropdown-toggle::after {
margin-left: 0.45em;
opacity: 0.5;
vertical-align: 0.15em;
}
/* 4d. Dropdown menus */
.dropdown-menu {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
padding: 6px;
margin-top: 6px;
color: var(--bang-text);
}
.dropdown-item {
color: var(--bang-text);
border-radius: var(--bang-radius-sm);
padding: 8px 12px;
font-size: 0.875rem;
transition: all 140ms var(--bang-ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: rgba(156, 218, 235, 0.14);
color: var(--bang-blue);
}
.dropdown-divider { border-top-color: var(--bang-line); }
.dropdown-header { color: var(--bang-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
/* Notifications popover */
.popover {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.popover .popover-header {
background-color: transparent;
border-bottom-color: var(--bang-line);
color: var(--bang-heading);
}
.popover .popover-body { color: var(--bang-text); }
.popover .arrow::after { border-top-color: var(--bang-surface-2); border-bottom-color: var(--bang-surface-2); }
.client-alerts li a { color: var(--bang-text); }
.client-alerts li a:hover { color: var(--bang-blue); }
.client-alerts li.none { color: var(--bang-faint); }
/* --------------------------------------------------------------------------
5. Breadcrumb
-------------------------------------------------------------------------- */
.master-breadcrumb {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
}
/* On login, register and the account chooser the breadcrumb renders with no
items at all, leaving an empty 29px strip under the nav. */
.master-breadcrumb:not(:has(.breadcrumb-item)) {
display: none;
}
/* Signed-out visitors get no breadcrumb at all. There is nothing to navigate
back through before signing in, and on the landing page it read as noise.
header.tpl only renders .topbar when $loggedin, so its absence is the one
reliable signal in the DOM that nobody is signed in. The breadcrumb is a
sibling of the header, hence the ~ combinator. */
header#header:not(:has(.topbar)) ~ .master-breadcrumb {
display: none;
}
.master-breadcrumb .breadcrumb {
background-color: transparent;
padding: 14px 0;
margin: 0;
font-size: 0.82rem;
}
.breadcrumb-item,
.breadcrumb-item a { color: var(--bang-muted); }
.breadcrumb-item a:hover { color: var(--bang-blue); }
.breadcrumb-item.active { color: var(--bang-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bang-faint); }
/* --------------------------------------------------------------------------
6. Main body and footer
-------------------------------------------------------------------------- */
section#main-body {
background-color: transparent;
padding: 42px 0 72px;
min-height: 60vh;
}
footer#footer,
.section.footer {
background-color: var(--bang-bg-deep);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 140px);
border-top: 1px solid var(--bang-line);
padding: 40px 0 32px;
color: var(--bang-muted);
font-size: 0.85rem;
}
footer#footer .nav-link,
footer#footer .btn,
footer#footer a {
color: var(--bang-muted);
padding-left: 0;
padding-right: 1.25rem;
transition: color 160ms var(--bang-ease);
}
footer#footer .nav-link:hover,
footer#footer .btn:hover,
footer#footer a:hover { color: var(--bang-blue); }
footer#footer .copyright { color: var(--bang-muted); font-size: 0.8rem; }
footer#footer .list-inline-item .btn {
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-pill);
padding: 6px 14px;
}
/* --------------------------------------------------------------------------
7. Cards and panels
twenty-one renders every content block as .card, with .card-accent-* on the
client home panels and .card-sidebar in the sidebar.
-------------------------------------------------------------------------- */
.card,
.panel {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
box-shadow: none;
margin-bottom: 22px;
overflow: hidden;
}
.card-header,
.panel-heading {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
padding: 16px 20px;
color: var(--bang-heading);
}
.card-header .card-title,
.card-title,
.panel-title {
color: var(--bang-heading);
font-family: var(--bang-font-display);
font-weight: 500;
letter-spacing: -0.005em;
}
.card-header .card-title i,
.card-title i { color: var(--bang-muted); }
.card-body,
.panel-body {
padding: 20px;
color: var(--bang-text);
}
.card-footer,
.panel-footer {
background-color: transparent;
border-top: 1px solid var(--bang-line-soft);
padding: 14px 20px;
color: var(--bang-muted);
}
/* twenty-one always emits .card-footer even when empty. Collapse the empty
ones so cards do not end in a stray 45px of dead space. */
.card-footer:empty {
display: none;
}
/* Accent stripe on the client home panels. theme.css already draws this as a
3px border-top in a stock Bootstrap colour, so retint it rather than adding
a second bar on top. 2px reads as a marker without shouting. */
.client-home-cards .card,
.card[class*="card-accent-"] {
position: relative;
}
.card[class*="card-accent-"] { border-top: 2px solid var(--bang-blue); }
.card-accent-blue { border-top-color: var(--bang-sky); }
.card-accent-green { border-top-color: var(--bang-mint); }
.card-accent-red { border-top-color: var(--bang-danger); }
.card-accent-gold,
.card-accent-orange { border-top-color: var(--bang-warning); }
.card-accent-purple { border-top-color: var(--bang-purple); }
.card-accent-pink { border-top-color: var(--bang-pink); }
/* List groups inside cards and the sidebar */
.list-group {
background-color: transparent;
border-radius: 0;
}
.list-group-item {
background-color: transparent;
border-color: var(--bang-line-soft);
color: var(--bang-text);
padding: 11px 20px;
font-size: 0.9rem;
transition: background-color 140ms var(--bang-ease), color 140ms var(--bang-ease);
}
.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0; }
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background-color: rgba(156, 218, 235, 0.12);
border-color: var(--bang-line-soft);
color: var(--bang-blue);
font-weight: 500;
}
.list-group-item i { color: var(--bang-muted); }
.list-group-item.active i { color: var(--bang-blue); }
/* --------------------------------------------------------------------------
8. Sidebar
-------------------------------------------------------------------------- */
.sidebar .card,
.sidebar .card-sidebar {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
}
.sidebar .card-header { padding: 14px 18px; }
.sidebar .card-title,
.sidebar .panel-title {
font-size: 0.8rem;
font-family: var(--bang-font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--bang-muted);
}
.sidebar .list-group { font-size: 0.875rem; }
.sidebar .list-group-item {
padding: 9px 18px;
border-color: var(--bang-line-soft);
}
.sidebar .list-group-item .badge {
background-color: var(--bang-surface-3);
color: var(--bang-text);
width: auto;
min-width: 26px;
padding: 4px 7px;
border-radius: var(--bang-radius-pill);
font-weight: 500;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
background-color: rgba(156, 218, 235, 0.12);
border-color: var(--bang-line-soft);
color: var(--bang-blue);
}
.sidebar .list-group-item.active .badge {
background-color: rgba(156, 218, 235, 0.22);
color: var(--bang-blue);
}
.sidebar .list-group-item > i.far.fa-circle { color: var(--bang-faint); }
.sidebar .card-minimise { color: var(--bang-muted); }
/* --------------------------------------------------------------------------
9. Dashboard stat tiles
Markup: .tiles .row > div > a.tile > i + .stat + .title + .highlight
-------------------------------------------------------------------------- */
.tiles {
background-color: transparent;
border: 0;
margin-bottom: 28px !important;
}
.tiles .row { gap: 0; }
.tiles .tile {
display: block;
position: relative;
background-color: var(--bang-surface);
border: 1px solid var(--bang-line) !important;
border-radius: var(--bang-radius);
padding: 22px 24px 20px;
margin: 0 10px 20px 10px;
overflow: hidden;
text-decoration: none;
transition: transform 200ms var(--bang-ease),
border-color 200ms var(--bang-ease),
background-color 200ms var(--bang-ease);
}
.tiles .tile:hover {
background-color: var(--bang-surface-2);
border-color: var(--bang-line-strong) !important;
transform: translateY(-2px);
}
.tiles .tile .stat {
margin-top: 10px;
font-family: var(--bang-font-display);
font-size: 44px;
font-weight: 500;
line-height: 1;
color: var(--bang-heading);
letter-spacing: -0.02em;
}
.tiles .tile .title {
margin-top: 6px;
color: var(--bang-muted);
font-family: var(--bang-font-body);
font-weight: 600;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.tiles .tile i {
position: absolute;
top: 18px;
right: 20px;
font-size: 34px;
line-height: 1;
color: var(--bang-line-strong);
transition: color 200ms var(--bang-ease), transform 200ms var(--bang-ease);
}
.tiles .tile:hover i {
font-size: 34px;
color: var(--bang-line-strong);
transform: scale(1.08);
}
.tiles .tile .highlight {
margin-top: 14px;
height: 3px;
width: 34px;
border-radius: var(--bang-radius-pill);
transition: width 220ms var(--bang-ease);
}
.tiles .tile:hover .highlight { width: 56px; }
/* Map WHMCS's tile colour words onto the brand accents. */
.tiles .bg-color-blue,
.bg-color-blue { background-color: var(--bang-sky) !important; }
.tiles .bg-color-green,
.bg-color-green { background-color: var(--bang-mint) !important; }
.tiles .bg-color-red,
.bg-color-red { background-color: var(--bang-danger) !important; }
.tiles .bg-color-gold,
.bg-color-gold { background-color: var(--bang-warning) !important; }
/* twenty-one draws separators between tiles at some breakpoints. The tiles are
discrete cards here, so clear them. */
.tiles .row > div .tile,
.tiles div:nth-child(1) > .tile,
.tiles div:nth-child(2) > .tile,
.tiles .row > div:last-child .tile {
border: 1px solid var(--bang-line) !important;
}
/* --------------------------------------------------------------------------
10. Buttons
The website's CTA is an outlined pill in #b7dee6. That reads as the brand,
but a billing portal needs its primary action to dominate, so primary is
filled light-on-dark and the outlined pill becomes the secondary style.
-------------------------------------------------------------------------- */
.btn {
font-family: var(--bang-font-body);
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.005em;
border-radius: var(--bang-radius-pill);
padding: 9px 20px;
border-width: 1px;
transition: all 160ms var(--bang-ease);
}
.btn:focus,
.btn.focus { box-shadow: none; }
.btn-primary,
.btn-success,
.btn-order,
.order-button,
.btn-checkout {
background-color: var(--bang-button);
border-color: var(--bang-button);
color: #08161c;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-order:hover,
.order-button:hover,
.btn-checkout:hover {
background-color: #d3ecf2;
border-color: #d3ecf2;
color: #08161c;
box-shadow: 0 0 0 4px rgba(183, 222, 230, 0.14);
}
.btn-secondary,
.btn-default {
background-color: transparent;
border-color: var(--bang-line-strong);
color: var(--bang-text);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:hover,
.btn-default:focus,
.btn-default:not(:disabled):not(.disabled):active {
background-color: var(--bang-surface-2);
border-color: var(--bang-blue);
color: var(--bang-heading);
}
.btn-info {
background-color: transparent;
border-color: var(--bang-sky);
color: var(--bang-sky);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
background-color: rgba(103, 198, 251, 0.14);
border-color: var(--bang-sky);
color: var(--bang-sky);
}
.btn-warning {
background-color: transparent;
border-color: var(--bang-warning);
color: var(--bang-warning);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
background-color: rgba(245, 200, 107, 0.14);
border-color: var(--bang-warning);
color: var(--bang-warning);
}
.btn-danger {
background-color: transparent;
border-color: var(--bang-danger);
color: var(--bang-danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
background-color: rgba(255, 122, 133, 0.16);
border-color: var(--bang-danger);
color: var(--bang-danger);
}
.btn-link {
color: var(--bang-blue);
border-color: transparent;
background-color: transparent;
}
.btn-link:hover { color: var(--bang-button); }
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
background-color: transparent;
border-color: var(--bang-line-strong);
color: var(--bang-text);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
background-color: var(--bang-surface-2);
border-color: var(--bang-blue);
color: var(--bang-heading);
}
.btn-lg { padding: 13px 30px; font-size: 0.95rem; }
.btn-sm { padding: 6px 15px; font-size: 0.8rem; }
.btn-xs { padding: 3px 11px; font-size: 0.72rem; }
.btn.disabled,
.btn:disabled {
opacity: 0.4;
box-shadow: none;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn:not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--bang-radius-pill) 0 0 var(--bang-radius-pill); }
.btn-group > .btn:last-child { border-radius: 0 var(--bang-radius-pill) var(--bang-radius-pill) 0; }
.btn-group > .btn:only-child { border-radius: var(--bang-radius-pill); }
/* --------------------------------------------------------------------------
11. Forms
-------------------------------------------------------------------------- */
label,
.control-label,
.form-group > label {
color: var(--bang-text);
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 6px;
}
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="search"].form-control {
background-color: var(--bang-bg-deep);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
color: var(--bang-heading);
font-family: var(--bang-font-body);
font-size: 0.9rem;
padding: 10px 14px;
height: auto;
transition: border-color 160ms var(--bang-ease), box-shadow 160ms var(--bang-ease);
}
.form-control:focus,
.custom-select:focus {
background-color: var(--bang-bg-deep);
border-color: var(--bang-blue);
color: var(--bang-heading);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.14);
outline: none;
}
.form-control::placeholder { color: var(--bang-faint); opacity: 1; }
.form-control:disabled,
.form-control[readonly] {
background-color: var(--bang-surface);
color: var(--bang-muted);
opacity: 1;
}
/* Native select and date pickers render their popup list with the OS palette.
Telling the browser the control is dark keeps that list readable. */
select,
select.form-control,
.custom-select,
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
color-scheme: dark;
}
.custom-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c8d9e' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
}
.form-text,
.help-block,
.text-muted {
color: var(--bang-muted) !important;
font-size: 0.8rem;
}
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
color: var(--bang-muted);
font-size: 0.85rem;
}
.custom-control-label { color: var(--bang-text); }
.custom-control-label::before {
background-color: var(--bang-bg-deep);
border: 1px solid var(--bang-line-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--bang-blue);
border-color: var(--bang-blue);
}
.custom-control-input:checked ~ .custom-control-label::after {
filter: brightness(0) saturate(0);
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.18);
}
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--bang-blue);
}
.custom-file-label {
background-color: var(--bang-bg-deep);
border-color: var(--bang-line);
color: var(--bang-muted);
}
.custom-file-label::after {
background-color: var(--bang-surface-2);
color: var(--bang-text);
border-left-color: var(--bang-line);
}
.is-invalid,
.form-control.is-invalid { border-color: var(--bang-danger); }
.invalid-feedback { color: var(--bang-danger); }
.is-valid,
.form-control.is-valid { border-color: var(--bang-mint); }
.valid-feedback { color: var(--bang-mint); }
/* Password strength meter */
.progress {
background-color: var(--bang-surface-3);
border-radius: var(--bang-radius-pill);
height: 6px;
}
.progress-bar { background-color: var(--bang-blue); }
/* --------------------------------------------------------------------------
12. Tables
Invoice, service, domain and ticket lists all render as .table, most of them
wrapped by DataTables.
-------------------------------------------------------------------------- */
.table {
color: var(--bang-text);
margin-bottom: 0;
}
.table thead th {
background-color: transparent;
border-bottom: 1px solid var(--bang-line);
border-top: 0;
color: var(--bang-muted);
font-family: var(--bang-font-body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
padding: 12px 16px;
white-space: nowrap;
}
.table td,
.table th {
border-top: 1px solid var(--bang-line-soft);
padding: 13px 16px;
vertical-align: middle;
}
.table tbody tr {
transition: background-color 140ms var(--bang-ease);
}
.table tbody tr:hover,
.table-hover tbody tr:hover {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: transparent;
}
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--bang-line-soft); }
.table .btn { white-space: nowrap; }
.table a { color: var(--bang-blue); }
.table a:hover { color: var(--bang-button); }
/* Tables that sit directly inside a card should meet its edges cleanly. */
.card > .table,
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table tbody tr:last-child td,
.card > .table-responsive > .table tbody tr:last-child td { border-bottom: 0; }
/* DataTables chrome */
.dataTables_wrapper,
#tableTicketsList_wrapper {
background-color: transparent;
padding: 0;
color: var(--bang-text);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: var(--bang-muted);
font-size: 0.82rem;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
background-color: var(--bang-bg-deep);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
color: var(--bang-heading);
padding: 6px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: transparent !important;
border: 1px solid transparent !important;
border-radius: var(--bang-radius-sm) !important;
color: var(--bang-muted) !important;
margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--bang-surface-2) !important;
border-color: var(--bang-line) !important;
color: var(--bang-heading) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: rgba(156, 218, 235, 0.14) !important;
border-color: transparent !important;
color: var(--bang-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
color: var(--bang-faint) !important;
opacity: 0.5;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--bang-muted); }
table.dataTable.no-footer { border-bottom-color: var(--bang-line); }
/* Pagination */
.pagination .page-link {
background-color: transparent;
border-color: var(--bang-line);
color: var(--bang-muted);
}
.pagination .page-link:hover {
background-color: var(--bang-surface-2);
border-color: var(--bang-line-strong);
color: var(--bang-heading);
}
.pagination .page-item.active .page-link {
background-color: rgba(156, 218, 235, 0.14);
border-color: transparent;
color: var(--bang-blue);
}
.pagination .page-item.disabled .page-link {
background-color: transparent;
border-color: var(--bang-line-soft);
color: var(--bang-faint);
}
/* --------------------------------------------------------------------------
13. Badges and status labels
WHMCS emits status words as .label-* and .badge-*. Tinted pills read far
better on a dark surface than Bootstrap's solid blocks.
-------------------------------------------------------------------------- */
.badge,
.label {
font-family: var(--bang-font-body);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.02em;
padding: 5px 11px;
border-radius: var(--bang-radius-pill);
border: 1px solid transparent;
}
.badge-success, .label-success,
.status-active, .badge-active {
background-color: rgba(91, 238, 185, 0.13);
border-color: rgba(91, 238, 185, 0.3);
color: var(--bang-mint);
}
.badge-info, .label-info,
.status-pending, .badge-pending {
background-color: rgba(103, 198, 251, 0.13);
border-color: rgba(103, 198, 251, 0.3);
color: var(--bang-sky);
}
.badge-warning, .label-warning,
.status-suspended {
background-color: rgba(245, 200, 107, 0.13);
border-color: rgba(245, 200, 107, 0.3);
color: var(--bang-warning);
}
.badge-danger, .label-danger,
.status-terminated, .status-cancelled, .status-overdue {
background-color: rgba(255, 122, 133, 0.13);
border-color: rgba(255, 122, 133, 0.3);
color: var(--bang-danger);
}
.badge-primary, .label-primary {
background-color: rgba(156, 218, 235, 0.13);
border-color: rgba(156, 218, 235, 0.3);
color: var(--bang-blue);
}
.badge-secondary, .label-default, .badge-default,
.badge-light, .badge-dark {
background-color: var(--bang-surface-3);
border-color: var(--bang-line);
color: var(--bang-text);
}
/* Text colour utilities WHMCS uses for statuses in table cells */
.text-success { color: var(--bang-mint) !important; }
.text-info { color: var(--bang-sky) !important; }
.text-warning { color: var(--bang-warning) !important; }
.text-danger { color: var(--bang-danger) !important; }
.text-primary { color: var(--bang-blue) !important; }
.text-dark { color: var(--bang-heading) !important; }
/* --------------------------------------------------------------------------
14. Alerts
-------------------------------------------------------------------------- */
.alert {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-left-width: 3px;
border-radius: var(--bang-radius);
color: var(--bang-text);
padding: 15px 18px;
font-size: 0.9rem;
}
.alert a { text-decoration: underline; }
.alert .close { color: var(--bang-muted); opacity: 0.7; text-shadow: none; }
.alert .close:hover { color: var(--bang-heading); opacity: 1; }
.alert-success { border-left-color: var(--bang-mint); color: var(--bang-mint); }
.alert-info { border-left-color: var(--bang-sky); color: var(--bang-sky); }
.alert-warning { border-left-color: var(--bang-warning); color: var(--bang-warning); }
.alert-danger { border-left-color: var(--bang-danger); color: var(--bang-danger); }
.alert-success p, .alert-info p, .alert-warning p, .alert-danger p { color: inherit; }
/* --------------------------------------------------------------------------
15. Modals
-------------------------------------------------------------------------- */
.modal-content {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.modal-header {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
padding: 18px 22px;
}
.modal-title { color: var(--bang-heading); }
.modal-body { color: var(--bang-text); padding: 22px; }
.modal-footer {
background-color: transparent;
border-top: 1px solid var(--bang-line-soft);
padding: 16px 22px;
}
.modal-header .close,
.modal .close {
color: var(--bang-muted);
opacity: 0.8;
text-shadow: none;
font-weight: 400;
}
.modal-header .close:hover { color: var(--bang-heading); opacity: 1; }
.modal-backdrop.show { background-color: #05080b; opacity: 0.78; }
#fullpage-overlay {
background-color: rgba(5, 8, 11, 0.85);
color: var(--bang-text);
}
/* --------------------------------------------------------------------------
16. Tabs and pills
-------------------------------------------------------------------------- */
.nav-tabs {
border-bottom: 1px solid var(--bang-line);
}
.nav-tabs .nav-link {
background-color: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--bang-muted);
font-size: 0.875rem;
font-weight: 500;
padding: 11px 16px;
}
.nav-tabs .nav-link:hover { color: var(--bang-heading); border-bottom-color: var(--bang-line-strong); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background-color: transparent;
border-color: transparent transparent var(--bang-blue);
color: var(--bang-blue);
}
.nav-pills .nav-link {
color: var(--bang-muted);
border-radius: var(--bang-radius-pill);
font-size: 0.875rem;
}
.nav-pills .nav-link:hover { color: var(--bang-heading); background-color: var(--bang-surface-2); }
.nav-pills .nav-link.active {
background-color: rgba(156, 218, 235, 0.14);
color: var(--bang-blue);
}
.tab-content { padding-top: 20px; }
/* --------------------------------------------------------------------------
17. Login, register and password reset
These pages render as a lone .card in the middle of the page. Give them a
little more presence than a generic panel.
-------------------------------------------------------------------------- */
body.login-page section#main-body,
section#main-body .logincontainer {
padding-top: 30px;
}
#login .card,
#frmLogin,
.logincontainer .card {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
}
#login .card-body,
.logincontainer .card-body { padding: 32px; }
#login h1, #login h2,
.logincontainer h1, .logincontainer h2 {
font-family: var(--bang-font-display);
color: var(--bang-heading);
}
.login-linkedin-btn,
.btn-social,
.linked-accounts .btn {
border-radius: var(--bang-radius-pill);
border: 1px solid var(--bang-line-strong);
background-color: transparent;
color: var(--bang-text);
}
.login-linkedin-btn:hover,
.btn-social:hover { background-color: var(--bang-surface-2); color: var(--bang-heading); }
/* reCAPTCHA sits on a white plate. Soften the join rather than fight it. */
.g-recaptcha,
.captcha-container {
border-radius: var(--bang-radius-sm);
overflow: hidden;
display: inline-block;
}
/* --------------------------------------------------------------------------
18. Invoices
-------------------------------------------------------------------------- */
.invoice-container,
#invoiceContainer {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
}
.invoice-header,
.invoice-details,
.invoice-summary { color: var(--bang-text); }
.invoice-header h1,
.invoice-header h2,
.invoice-header h3 { color: var(--bang-heading); }
.invoice-status,
.invoice-status-tag {
border-radius: var(--bang-radius-pill);
font-family: var(--bang-font-body);
font-weight: 600;
letter-spacing: 0.04em;
}
.invoice-status-paid,
.status-paid {
background-color: rgba(91, 238, 185, 0.13) !important;
color: var(--bang-mint) !important;
}
.invoice-status-unpaid,
.status-unpaid {
background-color: rgba(245, 200, 107, 0.13) !important;
color: var(--bang-warning) !important;
}
.invoice-status-cancelled,
.invoice-status-refunded {
background-color: var(--bang-surface-3) !important;
color: var(--bang-muted) !important;
}
/* The totals block at the foot of an invoice */
.invoice-items tfoot td,
.invoice-total { color: var(--bang-heading); font-weight: 500; }
/* --------------------------------------------------------------------------
19. Support tickets
-------------------------------------------------------------------------- */
.ticket-reply,
.ticket-message {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
margin-bottom: 16px;
}
.ticket-reply .ticket-header,
.ticket-reply-header {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
color: var(--bang-muted);
}
/* Staff replies get the brand accent so the thread is scannable. */
.ticket-reply.staff,
.ticket-reply-staff {
border-left: 3px solid var(--bang-blue);
}
.ticket-status { border-radius: var(--bang-radius-pill); }
/* Markdown editor used on ticket replies */
.editor-toolbar {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
border-radius: var(--bang-radius-sm) var(--bang-radius-sm) 0 0;
opacity: 1;
}
.editor-toolbar a,
.editor-toolbar button {
color: var(--bang-muted) !important;
border-color: transparent !important;
}
.editor-toolbar a:hover,
.editor-toolbar button:hover {
background-color: var(--bang-surface-3) !important;
color: var(--bang-heading) !important;
border-color: var(--bang-line) !important;
}
.editor-toolbar a.active { background-color: var(--bang-surface-3) !important; color: var(--bang-blue) !important; }
.editor-toolbar i.separator { border-color: var(--bang-line); }
.CodeMirror,
.CodeMirror-scroll {
background-color: var(--bang-bg-deep);
border-color: var(--bang-line);
color: var(--bang-heading);
border-radius: 0 0 var(--bang-radius-sm) var(--bang-radius-sm);
}
.CodeMirror-cursor { border-left-color: var(--bang-blue); }
.editor-statusbar { color: var(--bang-faint); }
.editor-preview,
.editor-preview-side {
background-color: var(--bang-surface);
color: var(--bang-text);
}
/* --------------------------------------------------------------------------
20. Domain search bar
Shown above the fold on the portal home when domain registration is enabled.
-------------------------------------------------------------------------- */
#domainSearch,
.domain-search,
.domain-checker-bg {
background-color: var(--bang-bg-deep);
background-image:
radial-gradient(1100px 400px at 15% -40%, rgba(103, 198, 251, 0.10), transparent 65%),
radial-gradient(900px 360px at 85% -30%, rgba(207, 170, 254, 0.09), transparent 65%);
border-bottom: 1px solid var(--bang-line);
padding: 56px 0;
color: var(--bang-text);
}
#domainSearch h1,
#domainSearch h2,
.domain-search h1,
.domain-search h2 {
color: var(--bang-heading);
font-family: var(--bang-font-display);
}
#domainSearch .form-control,
.domain-search .form-control {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--bang-line-strong);
color: var(--bang-heading);
font-size: 1rem;
padding: 14px 18px;
}
#domainSearch .btn,
.domain-search .btn { padding: 14px 28px; }
.domain-search-results .domain-result,
.domain-lookup-result {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
margin-bottom: 10px;
}
.domain-available, .available { color: var(--bang-mint) !important; }
.domain-unavailable, .unavailable { color: var(--bang-danger) !important; }
/* --------------------------------------------------------------------------
21. Order form
Nothing here any more. The order form is its own component now, styled by
templates/orderforms/premium_comparison/css/style.css, which mirrors the
hosting cards on bangmedia.com.au. This section used to hold ~100 lines
retinting the stock premium_comparison markup; that markup no longer exists,
so the rules went with it. The original template and stylesheet are kept in
whmcs-orderform/premium_comparison/*.orig if they are ever needed back.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
22. Third-party CSS loaded outside the theme
-------------------------------------------------------------------------- */
/* toastr, loaded from cdnjs */
#toast-container > div {
border-radius: var(--bang-radius);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
opacity: 1;
font-family: var(--bang-font-body);
}
#toast-container > .toast-success { background-color: #12492f; }
#toast-container > .toast-info { background-color: #13384e; }
#toast-container > .toast-warning { background-color: #4a3a15; }
#toast-container > .toast-error { background-color: #4d1d22; }
/* intl-tel-input, used on the phone number field */
.iti__country-list,
.intl-tel-input .country-list {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.iti__country.iti__highlight,
.intl-tel-input .country-list .country.highlight {
background-color: var(--bang-surface-3);
}
.iti__dial-code,
.intl-tel-input .country-list .dial-code { color: var(--bang-muted); }
.iti__divider,
.intl-tel-input .country-list .divider { border-bottom-color: var(--bang-line); }
.iti__selected-flag:hover,
.iti__selected-flag:focus { background-color: var(--bang-surface-2); }
/* Bootstrap tooltips */
.tooltip-inner {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
border-radius: var(--bang-radius-sm);
font-size: 0.78rem;
padding: 6px 10px;
}
.bs-tooltip-top .arrow::before { border-top-color: var(--bang-surface-3); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--bang-surface-3); }
.bs-tooltip-left .arrow::before { border-left-color: var(--bang-surface-3); }
.bs-tooltip-right .arrow::before { border-right-color: var(--bang-surface-3); }
/* --------------------------------------------------------------------------
23. Safety net
WHMCS core, addon modules and registrar modules all emit light Bootstrap
utilities. Neutralise them so a module page cannot punch a white hole in
the layout. Scoped to leave the invoice print view alone.
-------------------------------------------------------------------------- */
.bg-white,
.bg-light,
.panel-default,
.well {
background-color: var(--bang-surface) !important;
border-color: var(--bang-line) !important;
color: var(--bang-text) !important;
}
.well {
border-radius: var(--bang-radius);
box-shadow: none;
}
.bg-secondary { background-color: var(--bang-surface-2) !important; }
.border,
.border-top,
.border-right,
.border-bottom,
.border-left { border-color: var(--bang-line) !important; }
.table-light,
.table-light > th,
.table-light > td,
.thead-light th {
background-color: var(--bang-surface-2) !important;
color: var(--bang-muted) !important;
border-color: var(--bang-line) !important;
}
.close { color: var(--bang-muted); text-shadow: none; opacity: 0.8; }
.close:hover { color: var(--bang-heading); opacity: 1; }
/* Synergy Wholesale registrar module */
.synergy-container,
.synergywholesale,
[class^="synergy"],
[class*=" synergy"] {
background-color: transparent;
color: var(--bang-text);
}
/* --------------------------------------------------------------------------
24. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
header.header .main-navbar-wrapper {
background-color: var(--bang-surface);
border-top: 1px solid var(--bang-line);
}
header.header .main-navbar-wrapper .navbar-collapse {
padding: 10px 0 16px;
}
/* theme.css zeroes the gutter on .navbar > .container, so the collapsed
menu would otherwise sit hard against the screen edge while every other
block on the page is inset by 15px. Targets `> li > a` because this
template emits no .nav-link. */
header.header .main-navbar-wrapper .navbar-nav > li > a {
display: block;
padding: 12px 15px !important;
margin-left: 0;
margin-right: 0;
border-bottom: 1px solid var(--bang-line-soft);
}
header.header .main-navbar-wrapper .navbar-collapse > form { padding: 0 15px; }
header.header .main-navbar-wrapper .navbar-nav > li > a::before { display: none; }
.tiles .tile { margin-left: 6px; margin-right: 6px; }
}
@media (max-width: 767.98px) {
body { font-size: 14.5px; }
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
section#main-body { padding: 26px 0 48px; }
.card-body, .panel-body { padding: 16px; }
.card-header, .panel-heading { padding: 14px 16px; }
.tiles .tile { padding: 18px 18px 16px; }
.tiles .tile .stat { font-size: 34px; }
.tiles .tile i { font-size: 26px; top: 16px; right: 16px; }
.table td, .table th { padding: 11px 12px; }
header.header .navbar { padding-top: 0.85rem; padding-bottom: 0.85rem; }
}
/* --------------------------------------------------------------------------
25. Print
Invoices and quotes are printed from the browser, so force them back to
ink on paper.
-------------------------------------------------------------------------- */
@media print {
html { color-scheme: light; }
html,
body,
body.primary-bg-color,
.primary-bg-color,
section#main-body,
.card,
.panel,
.table,
.invoice-container {
background-color: #fff !important;
background-image: none !important;
color: #111 !important;
border-color: #ddd !important;
}
h1, h2, h3, h4, h5, h6,
p, td, th, li, span, div { color: #111 !important; }
a { color: #0b5c78 !important; }
header.header,
footer#footer,
.master-breadcrumb,
.sidebar,
.btn,
#fullpage-overlay { display: none !important; }
}
/* --------------------------------------------------------------------------
26. Higher-specificity overrides
twenty-one's theme.css sets light backgrounds on a number of two-class
selectors, which beat the single-class rules above. Each rule here was found
by grepping theme.css for light background and text declarations, so this
section is the list of places the dark skin would otherwise leak.
-------------------------------------------------------------------------- */
/* Client home panels: the header is hardcoded white */
.client-home-cards .card-header {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
font-weight: 500;
}
/* Buttons in those headers are forced to white text, which is unreadable on
the light accent fills. */
.client-home-cards .card-header .btn {
color: #08161c;
border: 0;
font-weight: 600;
}
/* .bg-color-* is used both as a tile stripe and as a button fill. When it is a
button it needs dark text to stay legible against the light accent. */
.btn.bg-color-blue,
.btn.bg-color-green,
.btn.bg-color-red,
.btn.bg-color-gold,
.btn.bg-color-orange,
.btn.bg-color-pink,
.btn.bg-color-purple {
color: #08161c !important;
border: 0;
}
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
background-color: var(--bang-surface-2);
border-color: var(--bang-blue);
color: var(--bang-heading);
}
/* Announcements */
.announcements .announcement article {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
}
/* Modal header */
.modal .modal-header {
background-color: transparent;
border-bottom-color: var(--bang-line-soft);
}
.modal-localisation .item-selector .item:hover {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
}
/* Markdown editor, used on ticket replies and notes */
.md-editor > .btn-toolbar {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
background-color: var(--bang-bg-deep);
color: var(--bang-heading);
border-color: var(--bang-line);
}
.md-preview table,
.markdown-content table {
background-color: transparent;
color: var(--bang-text);
}
.md-preview table > thead > tr > th,
.markdown-content table > thead > tr > th {
background-color: var(--bang-surface-2);
color: var(--bang-muted);
border-color: var(--bang-line);
}
.md-preview table td,
.markdown-content table td,
.md-preview table th,
.markdown-content table th { border-color: var(--bang-line-soft); }
.md-preview blockquote,
.markdown-content blockquote {
border-left: 3px solid var(--bang-line-strong);
color: var(--bang-muted);
}
/* Invoices */
.invoice-summary-table td.total-row {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
font-weight: 600;
}
/* Domain pricing table */
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header div:nth-child(odd) {
background-color: var(--bang-surface-2);
color: var(--bang-muted);
}
.domain-pricing .tld-row {
border-color: var(--bang-line-soft);
color: var(--bang-text);
}
.domain-pricing .tld-row.highlighted {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.featured-tld,
.featured-tld .price,
.featured-tld .price.host,
.featured-tld .price.live,
.featured-tld .price.net,
.featured-tld .price.rocks,
.featured-tld .price.shop,
.featured-tld .price.social,
.featured-tld .price.tv {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
border-radius: var(--bang-radius-sm);
}
.home-domain-search .input-group-wrapper {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--bang-line-strong);
border-radius: var(--bang-radius-pill);
}
/* DataTables sorted column header */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
/* Responsive tab strips used on product and domain management pages */
.responsive-tabs-sm .nav-item a:hover,
.responsive-tabs-sm .nav-item a.active {
background-color: var(--bang-surface-2);
color: var(--bang-blue);
}
/* Promo banners */
.promo-banner .btn,
.promo-banner.sitebuilder .btn,
.promo-banner.sitelock .btn {
background-color: var(--bang-button);
color: #08161c;
border: 0;
}
/* Upgrade and downgrade flow */
.upgrade .products .product,
.upgrade .product-to-be-upgraded {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
}
.upgrade .products .product .header {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
border-radius: var(--bang-radius) var(--bang-radius) 0 0;
}
.upgrade .products .product .footer {
background-color: transparent;
border: 0;
border-top: 1px solid var(--bang-line-soft);
}
.upgrade .products .product .current,
.upgrade .products .product .recommended {
background-color: rgba(91, 238, 185, 0.14);
color: var(--bang-mint);
}
/* Ticket view */
.view-ticket .posted-by {
background-color: var(--bang-surface-2);
color: var(--bang-muted);
border-color: var(--bang-line);
}
.view-ticket .attachment-list li figure {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
}
/* Registration form uses its own field class */
#registration .field,
#registration .form-control {
background-color: var(--bang-bg-deep);
border: 1px solid var(--bang-line);
color: var(--bang-heading);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
background-color: var(--bang-surface);
color: var(--bang-muted);
}
/* Two-factor setup */
.twofa-setup .backup-code {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
color: var(--bang-heading);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Product detail icon plate */
div.product-details div.product-icon {
background-color: var(--bang-surface-2);
border-radius: var(--bang-radius);
}
/* Contextual table rows. Bootstrap fills these with pastels meant for a white
page; retint them for a dark one. */
.table-success, .table-success > th, .table-success > td,
.table-hover .table-success:hover, .table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
background-color: rgba(91, 238, 185, 0.10) !important;
color: var(--bang-mint) !important;
}
.table-info, .table-info > th, .table-info > td,
.table-hover .table-info:hover, .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
background-color: rgba(103, 198, 251, 0.10) !important;
color: var(--bang-sky) !important;
}
.table-warning, .table-warning > th, .table-warning > td,
.table-hover .table-warning:hover, .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
background-color: rgba(245, 200, 107, 0.10) !important;
color: var(--bang-warning) !important;
}
.table-danger, .table-danger > th, .table-danger > td,
.table-hover .table-danger:hover, .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
background-color: rgba(255, 122, 133, 0.10) !important;
color: var(--bang-danger) !important;
}
.table-hover .table-light:hover,
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
background-color: var(--bang-surface-2) !important;
color: var(--bang-heading) !important;
}
/* Bootstrap's warning and light buttons sit on light fills with dark text and
are the only two that already read correctly. Keep their text dark. */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-light,
.btn-light:hover { color: var(--bang-warning); }
.btn-light,
.btn-light:hover,
.btn-light:focus {
background-color: transparent;
border-color: var(--bang-line-strong);
color: var(--bang-text);
}
.badge-warning { color: var(--bang-warning); }
.badge-light { color: var(--bang-text); }
/* Images WHMCS frames for a light page */
.img-thumbnail {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
}
mark, .mark {
background-color: rgba(245, 200, 107, 0.22);
color: var(--bang-heading);
}
/* --------------------------------------------------------------------------
27. Fixes found while proofing real pages
-------------------------------------------------------------------------- */
/* Links inside alerts. Bootstrap darkens .alert-link for a light alert fill,
which on our tinted dark alerts came out near-invisible. */
.alert a,
.alert .alert-link,
.alert-success .alert-link,
.alert-info .alert-link,
.alert-warning .alert-link,
.alert-danger .alert-link {
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
opacity: 0.95;
}
.alert a:hover,
.alert .alert-link:hover { color: inherit; opacity: 1; }
/* Search bars built as an input group: round the outer ends, square the join. */
.input-group > .form-control:first-child,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
border-top-left-radius: var(--bang-radius-sm);
border-bottom-left-radius: var(--bang-radius-sm);
}
.input-group > .form-control:last-child,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
border-top-right-radius: var(--bang-radius-sm);
border-bottom-right-radius: var(--bang-radius-sm);
}
.input-group > .input-group-append > .btn {
padding-left: 22px;
padding-right: 22px;
}
/* Password reveal toggle */
.input-group .btn-reveal-pw,
.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
color: var(--bang-muted);
}
.input-group .btn-reveal-pw:hover { color: var(--bang-heading); }
/* Embedded third-party forms. The pre-sales contact page hosts a ClickUp form
in a cross-origin iframe, so its interior cannot be restyled from here.
Frame it cleanly and let it be light. */
#main-body iframe.clickup-embed,
#main-body iframe[src*="forms.clickup.com"] {
border: 1px solid var(--bang-line) !important;
border-radius: var(--bang-radius) !important;
background: #fff !important;
min-height: 820px;
}
/* Sidebar collapse chevrons */
.card-header .card-minimise,
.card-header [data-toggle="collapse"] { color: var(--bang-muted); }
/* Knowledgebase and downloads category rows */
.kb-category,
.kbarticle-list .list-group-item { color: var(--bang-text); }
/* --------------------------------------------------------------------------
28. Wide tables on small screens
Most twenty-one templates emit a bare
with no
.table-responsive wrapper, so on a phone the services, invoices and domains
lists push the whole page sideways. Turning the table itself into a scroll
container fixes it without touching a single template.
-------------------------------------------------------------------------- */
.table-responsive { border: 0; }
@media (max-width: 767.98px) {
.card > .table,
.card > form > .table,
.primary-content > .table,
.primary-content > form > .table,
.tab-content .table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Keep a row from collapsing to two words per line once it can scroll. */
.card > .table td,
.card > .table th,
.primary-content > .table td,
.primary-content > .table th {
white-space: nowrap;
}
/* Give the scroll a visible edge so it reads as scrollable. */
.card > .table::-webkit-scrollbar { height: 6px; }
.card > .table::-webkit-scrollbar-thumb {
background-color: var(--bang-surface-3);
border: 0;
}
}
/* --------------------------------------------------------------------------
29. Behind the login
Everything in this section was found by clicking through a real client
account rather than reading markup, which is how the .table-list rules got
missed the first time. They are the single biggest offender: every list page
in the client area, invoices, services, domains, quotes, uses .table-list and
twenty-one paints its cells white.
-------------------------------------------------------------------------- */
/* 29a. The list tables.
theme.css sets `.table-list > tbody > tr > td { background-color: #fff }`
at (0,1,3), which beats a plain `.table td`. Match its shape to win. */
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
background-color: transparent;
border-bottom: 1px solid var(--bang-line);
color: var(--bang-muted);
font-family: var(--bang-font-body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
text-align: left;
padding: 12px 16px;
}
.table-list > tbody > tr > td,
.dataTables_wrapper table.table-list > tbody > tr > td {
background-color: transparent;
border-top: 1px solid var(--bang-line-soft);
color: var(--bang-text);
padding: 13px 16px;
}
.table-list > tbody > tr:hover > td,
.dataTables_wrapper table.table-list > tbody > tr:hover > td {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.dataTables_wrapper table.table-list {
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
overflow: hidden;
}
/* The sorted column had its own light fill, which made one column look
selected in a different palette to the rest of the header. */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
background-color: transparent;
color: var(--bang-blue);
}
.table-list > tbody > tr > td a { color: var(--bang-blue); }
.table-list > tbody > tr > td a:hover { color: var(--bang-button); }
/* 29b. The DataTables search box.
theme.css uses the `background` shorthand with a light search icon PNG and
#fff, at four classes deep. It has to be beaten on its own terms, shorthand
included, or the white comes straight back. */
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input[type="search"] {
background: var(--bang-bg-deep) no-repeat 14px center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c8d9e' stroke-width='1.8'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='M10.5 10.5L14 14' stroke-linecap='round'/%3e%3c/svg%3e");
background-size: 15px;
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-pill);
color: var(--bang-heading);
padding: 9px 16px 9px 38px !important;
}
.dataTables_wrapper .dataTables_filter label .form-control:focus {
border-color: var(--bang-blue);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.14);
}
.dataTables_wrapper .dataTables_filter label .form-control::placeholder { color: var(--bang-faint); }
/* 29c. Hover states that were still landing light. */
.select-account a {
border-bottom-color: var(--bang-line-soft);
color: var(--bang-text);
}
.select-account { border-top-color: var(--bang-line); }
.select-account a:hover {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.kb-category a:hover,
.kb-article-item:hover {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.kb-article-item small { color: var(--bang-muted); }
.list-group-item-danger.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-action:active {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
.store-order-container .store-domain-tabs li a {
background-color: var(--bang-surface-2);
border-bottom-color: var(--bang-line);
color: var(--bang-muted);
}
.store-order-container .store-domain-tabs li.active a {
background-color: var(--bang-surface);
border-bottom-color: transparent;
color: var(--bang-blue);
}
/* 29d. The notifications popover in the topbar. */
.popover-user-notifications {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
border-radius: var(--bang-radius);
font-family: var(--bang-font-body);
}
.popover-user-notifications ul li { border-bottom-color: var(--bang-line-soft); }
.popover-user-notifications ul li a { color: var(--bang-text); }
.popover-user-notifications ul li a:hover {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
}
.popover-user-notifications ul li.none { color: var(--bang-muted); }
/* 29e. The mailing list opt-in is a bootstrap-switch, which ships its own
light chrome and rendered as a white block with an invisible Yes half. */
.bootstrap-switch {
border: 1px solid var(--bang-line-strong);
border-radius: var(--bang-radius-pill);
overflow: hidden;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
background-color: var(--bang-surface-2);
color: var(--bang-text);
font-family: var(--bang-font-body);
font-size: 0.8rem;
font-weight: 600;
border: 0;
}
.bootstrap-switch .bootstrap-switch-label {
background-color: var(--bang-surface-3);
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
background-color: var(--bang-mint);
color: #05231a;
}
/* The off handle carries whichever Bootstrap colour word the widget was built
with, and this install uses -secondary, not -default. Cover the lot rather
than chase the variant. */
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-light,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
background-color: var(--bang-surface-2);
color: var(--bang-muted);
}
.bootstrap-switch.bootstrap-switch-focused {
border-color: var(--bang-blue);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.14);
}
/* 29f. Odds and ends spotted on the same pass. */
/* The phone field's country selector rendered as a pale plate. */
.iti__flag-container,
.iti__selected-flag,
.intl-tel-input .flag-container,
.intl-tel-input .selected-flag {
background-color: transparent;
}
.iti__selected-dial-code { color: var(--bang-text); }
/* "View More..." under the services panel sits at Bootstrap's disabled grey,
which disappears on a dark card. */
div[menuitemname="Active Products/Services"] .btn-view-more,
div[menuitemname="Active Products/Services"] .btn-view-more.disabled {
color: var(--bang-muted);
}
div[menuitemname="Active Products/Services"] .btn-view-more:hover { color: var(--bang-blue); }
/* Panel header buttons are forced to white text, then black on hover, both of
which fight the light accent fills these buttons use. */
.client-home-cards .card-header .btn:hover {
color: #08161c;
opacity: 0.9;
}
/* The split button next to "Log in to cPanel" on the services panel. */
.btn-group > .dropdown-toggle-split,
.btn-group > .btn + .dropdown-toggle {
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
/* Empty-state text inside panels. */
.card-body > p:only-child { color: var(--bang-muted); }
/* --------------------------------------------------------------------------
30. Panel header actions and the dead Tickets tile
-------------------------------------------------------------------------- */
/* WHMCS picks a colour word per panel from its own palette, so these buttons
arrived as gold, grey "asbestos", teal and so on, with white or black text
assigned separately. The grey ones ended up dark-on-dark and unreadable.
One consistent quiet button reads better than a rainbow of them, and it
cannot land on an unreadable pairing whatever colour word WHMCS chooses. */
.client-home-cards .card-header .btn,
.client-home-cards .card-header .btn[class*="bg-color-"] {
background-color: rgba(255, 255, 255, 0.06) !important;
background-image: none !important;
color: var(--bang-text) !important;
border: 1px solid var(--bang-line) !important;
font-weight: 600;
}
.client-home-cards .card-header .btn:hover,
.client-home-cards .card-header .btn[class*="bg-color-"]:hover {
background-color: var(--bang-surface-3) !important;
color: var(--bang-heading) !important;
border-color: var(--bang-line-strong) !important;
opacity: 1;
}
/* Tickets are handled on the website, so the Tickets tile is permanently zero
and only takes up a quarter of the dashboard. Hide the column it sits in,
matched on the link target rather than a position, so it stays correct if
WHMCS reorders the tiles. */
.tiles .row > div:has(> a.tile[href*="supporttickets"]) { display: none; }
.tiles a.tile[href*="supporttickets"] { display: none; }
/* With one tile gone the remaining three would leave a gap on the right, so
let them share the full width instead. */
@media (min-width: 1200px) {
.tiles .row { display: flex; flex-wrap: wrap; }
.tiles .row > div { flex: 1 1 0; max-width: none; }
}
/* --------------------------------------------------------------------------
31. The cart and checkout flow
templates/orderforms/standard_cart/css/all.min.css loads in the body, after
this file, and scopes nearly everything to #order-standard_cart. So its
rules win on a tie twice over. Prefixing with `body` adds an element to the
selector and takes the specificity back, which is the same trick the old
order form section used. Nothing here needs !important.
Every selector below was found by grepping that stylesheet for light
backgrounds rather than by clicking around, so this covers steps that are
hard to reach without a real order in progress: addon renewals, credit card
entry, account selection, transfer-ineligible notices.
-------------------------------------------------------------------------- */
/* 31a. Order summary panel */
body #order-standard_cart .order-summary {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
overflow: hidden;
}
body #order-standard_cart .order-summary h2 {
color: var(--bang-heading);
font-family: var(--bang-font-display);
font-weight: 500;
background-color: transparent;
}
body #order-standard_cart .summary-container {
background-color: var(--bang-surface);
color: var(--bang-text);
border-radius: 0 0 var(--bang-radius) var(--bang-radius);
}
body #order-standard_cart .order-summary .summary-totals {
border-top: 1px solid var(--bang-line);
border-bottom: 1px solid var(--bang-line);
}
body #order-standard_cart .order-summary .product-name,
body #order-standard_cart .order-summary .total-due-today .amt {
color: var(--bang-heading);
}
body #order-standard_cart .order-summary .product-group,
body #order-standard_cart .order-summary .loader {
color: var(--bang-muted);
}
/* 31b. Cart line items */
body #order-standard_cart .view-cart-items-header {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
border-radius: var(--bang-radius) var(--bang-radius) 0 0;
}
body #order-standard_cart .view-cart-items {
border-bottom: 2px solid var(--bang-line-strong);
}
body #order-standard_cart .view-cart-items .item,
body #order-standard_cart .view-cart-items .item:nth-child(even) {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
color: var(--bang-text);
}
body #order-standard_cart .view-cart-items .item:hover {
background-color: var(--bang-surface-2);
}
body #order-standard_cart .view-cart-items .item-title,
body #order-standard_cart .view-cart-items .item-price span {
color: var(--bang-heading);
}
body #order-standard_cart .view-cart-items .item-domain { color: var(--bang-blue); }
body #order-standard_cart .view-cart-items .item-group { color: var(--bang-muted); }
/* 31c. Promo code and tax estimate tabs */
body #order-standard_cart .view-cart-tabs .tab-content,
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-heading);
}
body #order-standard_cart .view-cart-promotion-code,
body #order-standard_cart .view-cart-gateway-checkout {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-text);
}
/* 31d. Form fields. standard_cart uses .field as well as .form-control. */
body #order-standard_cart .field,
body #order-standard_cart .form-control {
background-color: var(--bang-bg-deep);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
color: var(--bang-heading);
}
body #order-standard_cart .field:focus,
body #order-standard_cart .form-control:focus {
border-color: var(--bang-blue);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.14);
}
body #order-standard_cart .field[disabled],
body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled],
body #order-standard_cart .form-control[readonly] {
background-color: var(--bang-surface);
color: var(--bang-muted);
}
body #order-standard_cart .cc-input-container,
body #order-standard_cart .default-captcha {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
}
/* 31e. Domain choice step. These were the white blocks on "Choose a Domain". */
body #order-standard_cart .domain-selection-options .option {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius);
color: var(--bang-text);
margin-bottom: 10px;
}
/* The radio sits hard against its label in the stock markup. */
body #order-standard_cart .domain-selection-options .option label {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 14px 18px;
width: 100%;
cursor: pointer;
color: inherit;
}
body #order-standard_cart .domain-selection-options .option input[type="radio"] {
margin: 0 8px 0 0;
flex: 0 0 auto;
}
body #order-standard_cart .domain-selection-options .option:hover {
border-color: var(--bang-line-strong);
background-color: var(--bang-surface-2);
}
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .domain-selection-options .option.option-selected {
background-color: rgba(156, 218, 235, 0.10);
border-color: rgba(156, 218, 235, 0.45);
color: var(--bang-heading);
}
body #order-standard_cart .transfer-not-eligible {
background-color: rgba(245, 200, 107, 0.10);
border: 1px solid rgba(245, 200, 107, 0.3);
border-radius: var(--bang-radius-sm);
color: var(--bang-warning);
}
/* 31f. Product and addon panels on the configure step */
body #order-standard_cart .products .product,
body #order-standard_cart .products .product header,
body #order-standard_cart .product-info,
body #order-standard_cart .panel-addon .panel-price {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-text);
}
body #order-standard_cart .products .product header {
background-color: var(--bang-surface-3);
color: var(--bang-heading);
}
body #order-standard_cart .account-select-container div.account {
background-color: var(--bang-surface);
border: 1px solid var(--bang-line);
border-radius: var(--bang-radius-sm);
color: var(--bang-text);
}
body #order-standard_cart .account-select-container div.account.active {
background-color: rgba(156, 218, 235, 0.12);
border-color: rgba(156, 218, 235, 0.45);
color: var(--bang-heading);
}
/* 31g. MarketConnect promo tiles */
body #order-standard_cart .mc-promo,
body #order-standard_cart .mc-promo .body {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-text);
}
/* 31h. Domain search, spotlight TLDs and suggestions.
These sit outside the #order-standard_cart scope. */
body .domain-checker-container,
body .domain-checker-container .input-group-box,
body .domain-promo-box {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-text);
}
body .spotlight-tlds,
body .spotlight-tld,
body .spotlight-tld-hot,
body .spotlight-tld-sale {
background-color: var(--bang-surface-2);
border-color: var(--bang-line);
color: var(--bang-text);
border-radius: var(--bang-radius-sm);
}
body .spotlight-tld .invalid,
body .spotlight-tld .unavailable {
background-color: var(--bang-surface-3);
color: var(--bang-muted);
}
body .suggested-domains .domain-lookup-suggestions-loader,
body .suggested-domains .promo.hot,
body .suggested-domains .promo.sale {
background-color: var(--bang-surface-2);
color: var(--bang-text);
}
/* 31i. Renewal lists on the cart */
body .service-renewals,
body .domain-renewals,
body .addon-renewals,
body .service-renewals .service-renewal:nth-child(even),
body .domain-renewals .domain-renewal:nth-child(even),
body .addon-renewals .service-renewal:nth-child(even),
body .addon-renewals .service-renewal {
background-color: transparent;
border-color: var(--bang-line-soft);
color: var(--bang-text);
}
body .product-recommendations .product-recommendation,
body .product-recommendations .product-recommendation .body {
background-color: var(--bang-surface);
border-color: var(--bang-line);
color: var(--bang-text);
}
/* 31j. The checkout button. standard_cart paints it Bootstrap green, which is
both off-brand and, at its size, the loudest thing on the page. */
body #order-standard_cart .btn-success,
body #order-standard_cart .btn-checkout,
body #order-standard_cart #btnCompleteOrder,
body #order-standard_cart a#checkout {
background-color: var(--bang-button);
border-color: var(--bang-button);
color: #08161c;
font-weight: 600;
}
body #order-standard_cart .btn-success:hover,
body #order-standard_cart .btn-checkout:hover,
body #order-standard_cart #btnCompleteOrder:hover,
body #order-standard_cart a#checkout:hover {
background-color: #d3ecf2;
border-color: #d3ecf2;
color: #08161c;
}
/* The cart disables Checkout until something is in it. The theme's global
`opacity: 0.4` turned dark text on a light fill into an unreadable smudge, so
a disabled cart button gets its own flat treatment instead. */
body #order-standard_cart .btn-checkout.disabled,
body #order-standard_cart a#checkout.disabled,
body #order-standard_cart .btn-success.disabled,
body #order-standard_cart .btn-success:disabled {
background-color: var(--bang-surface-3);
border-color: var(--bang-line);
color: var(--bang-faint);
opacity: 1;
box-shadow: none;
}
/* standard_cart gives Continue Shopping a dark link colour built for a white
summary panel. */
/* Theirs is `#order-standard_cart .order-summary .btn-continue-shopping`, so
the panel class has to be in the chain here too or it loses on class count. */
body #order-standard_cart .order-summary .btn-continue-shopping,
body #order-standard_cart .order-summary #continueShopping {
color: var(--bang-muted);
font-weight: 500;
}
body #order-standard_cart .order-summary .btn-continue-shopping:hover,
body #order-standard_cart .order-summary #continueShopping:hover {
color: var(--bang-blue);
}
/* Headings inside the cart pick up the display face like the rest of the portal. */
body #order-standard_cart h1,
body #order-standard_cart h2,
body #order-standard_cart h3 {
font-family: var(--bang-font-display);
color: var(--bang-heading);
}
/* --------------------------------------------------------------------------
32. Footer tidy
The footer's Contact Us link is not wanted: contact goes through the website
and the nav already carries a Contact Us item pointing there.
-------------------------------------------------------------------------- */
/* Matches both hrefs on purpose. The footer hook rewrites /contact.php to the
website URL, and :has() re-evaluates live, so matching only the original
made the link reappear the moment that script ran. */
footer#footer .nav .nav-item:has(> a[href*="contact.php"]),
footer#footer .nav .nav-item:has(> a[href*="bangmedia.com.au/contact"]) {
display: none;
}
/* Both footer lists end up empty on this install, the social and currency one
because neither is enabled. Left alone they hold a 3rem bottom margin and
push the copyright down into open space. Collapse them, but only when they
have nothing left to show, so a Terms of Service link would still appear. */
footer#footer .list-inline:not(:has(.list-inline-item)),
footer#footer .nav:not(:has(.nav-item:not(:has(> a[href*="contact.php"], > a[href*="bangmedia.com.au/contact"])))) {
display: none;
}
footer#footer .copyright {
margin-top: 0;
}
/* --------------------------------------------------------------------------
33. Tap targets on phones
Measured at 360 and 390px: the login helper links came out 15px tall and the
breadcrumb links 21px. WCAG 2.5.8 asks for 24px minimum, and on a phone
anything under that is a genuine mis-tap. These are inline links, so the
height comes from padding rather than a fixed size, which keeps them from
shifting the layout around them.
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Forgot Password, Create account, and the like. */
#login a,
.logincontainer a,
footer#footer a,
.card-footer a,
.breadcrumb-item a {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* The breadcrumb sits in a tight bar, so widen the row rather than the
links, otherwise they collide. */
.master-breadcrumb .breadcrumb {
padding-top: 10px;
padding-bottom: 10px;
}
.breadcrumb-item a {
padding: 2px 0;
}
/* The Forgot Password link sits in the password field's label row, not in
any login container, so it needs naming directly. Measured 15px tall. */
a[href*="password/reset"],
.form-group a.small {
display: inline-flex;
align-items: center;
min-height: 24px;
}
/* Anything already presented as a button keeps a comfortable size. */
.btn {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-xs,
.btn-sm {
min-height: 32px;
}
}
/* --------------------------------------------------------------------------
34. The empty strip under the mobile header
Below 1200px the nav collapses to a burger, but .main-navbar-wrapper keeps
its 13.6px of vertical padding and its top border around a zero-height
menu. Measured at 28px: a dead band under the logo, made more obvious by the
accent line sitting on it.
The padding is only wanted while the menu is actually open, so it is off by
default here and comes back for .show and .collapsing. Doing it that way
round means a browser without :has() simply keeps the band collapsed, which
is the better failure.
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
header.header .main-navbar-wrapper {
padding-top: 0;
padding-bottom: 0;
border-top: 0;
min-height: 0;
}
header.header .main-navbar-wrapper:has(.navbar-collapse.show),
header.header .main-navbar-wrapper:has(.navbar-collapse.collapsing) {
padding-top: 6px;
padding-bottom: 10px;
border-top: 1px solid var(--bang-line-soft);
}
}
/* Dropdown entries carry Bootstrap's py-0, which is !important, so the only
way to give them a usable tap height is a minimum on the anchor. Forgot
Password lives in the account dropdown and measured 15px tall. */
@media (max-width: 767.98px) {
.dropdown-menu a.dropdown-item {
min-height: 32px;
display: flex;
align-items: center;
}
}
/* --------------------------------------------------------------------------
35. Landing page
The three-card entry page at /, styled from the same vocabulary as
bangmedia.com.au: the hero type scale, the gradient card face, the cyan
glow on hover.
-------------------------------------------------------------------------- */
/* header.tpl drops WHMCS's own domain search band above the content whenever
the page is the homepage. On the landing page that pushed the three cards
below the fold and duplicated the domain link further down, so it is hidden
here. It still appears everywhere else it normally would. */
.home-domain-search:has(~ #main-body .bm-landing),
body:has(.bm-landing) .home-domain-search {
display: none;
}
/* "Portal Home" on the portal home is just noise. */
body:has(.bm-landing) .master-breadcrumb {
display: none;
}
.bm-landing {
max-width: 1080px;
margin: 0 auto;
padding: clamp(1rem, 4vw, 2.5rem) 0 1rem;
}
/* ---- hero ---- */
.bm-landing .bm-hero {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(2rem, 5vw, 3.4rem);
}
.bm-landing .bm-eyebrow {
color: var(--bang-blue);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 0.7rem;
}
.bm-landing .bm-hero h1 {
font-family: var(--bang-font-display);
font-size: clamp(2rem, 5.5vw, 3.1rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.02em;
color: #eaf6fb;
margin: 0;
text-shadow: 0 0 44px rgba(156, 218, 235, 0.22);
text-wrap: balance;
}
.bm-landing .bm-lead {
color: #8aa4b3;
font-size: clamp(1rem, 1.6vw, 1.12rem);
line-height: 1.55;
max-width: 34rem;
margin: 1.2rem auto 0;
}
/* ---- the three cards ---- */
.bm-landing .bm-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
}
@media (max-width: 900px) {
.bm-landing .bm-cards {
grid-template-columns: minmax(0, 1fr);
max-width: 460px;
margin: 0 auto;
}
}
.bm-landing .bm-card {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(235.6deg, #0c0e11 60%, #07161e 92%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 1.4rem;
padding: 2rem 1.7rem 1.6rem;
text-decoration: none;
box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
transition: border-color 200ms var(--bang-ease),
box-shadow 200ms var(--bang-ease),
transform 200ms var(--bang-ease);
}
.bm-landing .bm-card:hover,
.bm-landing .bm-card:focus-visible {
border-color: rgba(156, 218, 235, 0.33);
box-shadow: 0 0 70px -22px rgba(156, 218, 235, 0.27);
transform: translateY(-4px);
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.bm-landing .bm-card { transition: none; }
.bm-landing .bm-card:hover { transform: none; }
}
.bm-landing .bm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: rgba(156, 218, 235, 0.10);
border: 1px solid rgba(156, 218, 235, 0.20);
margin-bottom: 1.1rem;
}
.bm-landing .bm-icon svg {
width: 22px;
height: 22px;
stroke: var(--bang-blue);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.bm-landing .bm-card h2 {
font-family: var(--bang-font-display);
font-size: 1.35rem;
font-weight: 600;
color: #e9f4fa;
margin: 0 0 0.4rem;
}
.bm-landing .bm-card p {
color: #8aa4b3;
font-size: 0.92rem;
line-height: 1.5;
margin: 0 0 1.4rem;
flex: 1 0 auto;
}
.bm-landing .bm-go {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 24px;
color: var(--bang-blue);
font-family: var(--bang-font-display);
font-size: 0.95rem;
font-weight: 600;
}
.bm-landing .bm-go::after {
content: '';
width: 7px;
height: 7px;
margin-left: 0.55rem;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms var(--bang-ease);
}
.bm-landing .bm-card:hover .bm-go { color: var(--bang-button); }
.bm-landing .bm-card:hover .bm-go::after { transform: rotate(45deg) translate(2px, -2px); }
/* ---- domain strip ---- */
.bm-landing .bm-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.3rem 0.9rem;
margin-top: clamp(2rem, 5vw, 3rem);
padding-top: clamp(1.4rem, 3vw, 2rem);
border-top: 1px solid var(--bang-line-soft);
text-align: center;
}
.bm-landing .bm-strip p {
margin: 0;
color: var(--bang-muted);
font-size: 0.95rem;
}
.bm-landing .bm-strip-link {
display: inline-flex;
align-items: center;
min-height: 24px;
color: var(--bang-blue);
font-weight: 600;
font-size: 0.95rem;
}
.bm-landing .bm-strip-link:hover { color: var(--bang-button); }
/* --------------------------------------------------------------------------
36. Submenus inside the collapsed mobile menu
A dropdown in the burger menu is not a floating panel, it is a nested list.
It was still carrying the desktop treatment: its own surface colour, a
border, a 10px radius and a 44px drop shadow, which read as a disabled box
sitting under the menu rather than as Account's sub-items.
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
header.header .main-navbar-wrapper .dropdown-menu {
position: static;
float: none;
width: 100%;
margin: 0;
padding: 0 0 6px;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Indented and rule-led, so they read as children of the item above. */
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item {
padding: 8px 15px 8px 30px !important;
color: var(--bang-text);
border-bottom: 1px solid var(--bang-line-soft);
border-radius: 0;
font-size: 0.875rem;
}
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
header.header .main-navbar-wrapper .dropdown-menu a.dropdown-item:focus {
background-color: var(--bang-surface-2);
color: var(--bang-heading);
}
header.header .main-navbar-wrapper .dropdown-menu .dropdown-divider {
margin: 0;
border-top-color: var(--bang-line-soft);
}
/* The li also carries .dropdown-item in this template, which would double
the indent and the rule. */
header.header .main-navbar-wrapper .dropdown-menu li.dropdown-item {
padding: 0;
background: none;
border: 0;
}
}
/* --------------------------------------------------------------------------
37. Icons: Material Symbols in place of Font Awesome
WHMCS renders every icon as , styled through a
::before on the fa-* class. Each of those is remapped here to a Material
Symbols glyph, which reads considerably more modern than Font Awesome 5 and
sits better next to the site's own line-drawn icons.
Two decisions worth keeping:
1. The font swap is applied to the mapped classes only, never to .fas or
.far wholesale. An icon that some module emits and this list does not
cover keeps rendering as Font Awesome rather than turning into a blank
square. Font Awesome stays loaded for exactly that reason.
2. .fab is deliberately untouched. Material Symbols has no brand marks, so
the social icons would vanish.
The font is subsetted to the 102 classes actually in use, which is 10 KB
against Font Awesome's five webfonts at roughly 680 KB. Regenerate it with
the Google Fonts icon_names endpoint if new icons appear; see CLAUDE.md.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
font-display: block;
src: url('../icons/material-symbols.woff2') format('woff2');
}
.fa-angle-double-right::before, .fa-arrow-circle-left::before, .fa-arrow-circle-right::before, .fa-arrow-circle-up::before,
.fa-arrow-left::before, .fa-arrow-right::before, .fa-ban::before, .fa-bars::before,
.fa-bolt::before, .fa-book::before, .fa-briefcase::before, .fa-building::before,
.fa-bullhorn::before, .fa-calendar-alt::before, .fa-calendar-check::before, .fa-certificate::before,
.fa-chart-bar::before, .fa-chart-line::before, .fa-check::before, .fa-check-circle::before,
.fa-chevron-down::before, .fa-chevron-left::before, .fa-chevron-right::before, .fa-chevron-up::before,
.fa-circle::before, .fa-circle-notch::before, .fa-clock::before, .fa-cloud::before,
.fa-code::before, .fa-comment-alt-lines::before, .fa-comments::before, .fa-credit-card::before,
.fa-cube::before, .fa-cubes::before, .fa-dot-circle::before, .fa-download::before,
.fa-envelope::before, .fa-envelope-open::before, .fa-exclamation-circle::before, .fa-exclamation-triangle::before,
.fa-eye::before, .fa-file::before, .fa-file-alt::before, .fa-file-code::before,
.fa-file-minus::before, .fa-flag::before, .fa-folder::before, .fa-folder-open::before,
.fa-gavel::before, .fa-globe::before, .fa-globe-americas::before, .fa-home::before,
.fa-inbox::before, .fa-info::before, .fa-info-circle::before, .fa-key::before,
.fa-level-up::before, .fa-life-ring::before, .fa-list::before, .fa-lock::before,
.fa-lock-alt::before, .fa-map-marker-alt::before, .fa-map-signs::before, .fa-minus::before,
.fa-money-bill-alt::before, .fa-paperclip::before, .fa-passport::before, .fa-pencil::before,
.fa-pencil-alt::before, .fa-phone::before, .fa-plus::before, .fa-print::before,
.fa-project-diagram::before, .fa-question-circle::before, .fa-random::before, .fa-redo-alt::before,
.fa-rocket::before, .fa-rss::before, .fa-search::before, .fa-server::before,
.fa-share::before, .fa-shield::before, .fa-shield-alt::before, .fa-shopping-cart::before,
.fa-sparkles::before, .fa-spinner::before, .fa-star::before, .fa-sync::before,
.fa-sync-alt::before, .fa-thumbs-down::before, .fa-thumbs-up::before, .fa-ticket-alt::before,
.fa-times::before, .fa-trash::before, .fa-trash-alt::before, .fa-trophy::before,
.fa-university::before, .fa-user::before, .fa-user-plus::before, .fa-users::before,
.fa-window-maximize::before, .fa-wrench::before {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: inherit;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
display: inline-block;
vertical-align: -0.15em;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Duotone renders a second layer through ::after, which would leave a stray
Font Awesome glyph behind the Material one. */
.fad::after { content: none !important; }
/* Fixed-width icons keep their column so lists stay aligned. */
.fa-fw { width: 1.25em; text-align: center; }
.fa-angle-double-right::before { content: 'keyboard_double_arrow_right'; }
.fa-arrow-circle-left::before { content: 'arrow_circle_left'; }
.fa-arrow-circle-right::before { content: 'arrow_circle_right'; }
.fa-arrow-circle-up::before { content: 'arrow_circle_up'; }
.fa-arrow-left::before { content: 'arrow_back'; }
.fa-arrow-right::before { content: 'arrow_forward'; }
.fa-ban::before { content: 'block'; }
.fa-bars::before { content: 'menu'; }
.fa-bolt::before { content: 'bolt'; }
.fa-book::before { content: 'menu_book'; }
.fa-briefcase::before { content: 'work'; }
.fa-building::before { content: 'apartment'; }
.fa-bullhorn::before { content: 'campaign'; }
.fa-calendar-alt::before { content: 'calendar_month'; }
.fa-calendar-check::before { content: 'event_available'; }
.fa-certificate::before { content: 'workspace_premium'; }
.fa-chart-bar::before { content: 'bar_chart'; }
.fa-chart-line::before { content: 'show_chart'; }
.fa-check::before { content: 'check'; }
.fa-check-circle::before { content: 'check_circle'; }
.fa-chevron-down::before { content: 'expand_more'; }
.fa-chevron-left::before { content: 'chevron_left'; }
.fa-chevron-right::before { content: 'chevron_right'; }
.fa-chevron-up::before { content: 'expand_less'; }
.fa-circle::before { content: 'circle'; }
.fa-circle-notch::before { content: 'progress_activity'; }
.fa-clock::before { content: 'schedule'; }
.fa-cloud::before { content: 'cloud'; }
.fa-code::before { content: 'code'; }
.fa-comment-alt-lines::before { content: 'chat'; }
.fa-comments::before { content: 'forum'; }
.fa-credit-card::before { content: 'credit_card'; }
.fa-cube::before { content: 'deployed_code'; }
.fa-cubes::before { content: 'widgets'; }
.fa-dot-circle::before { content: 'radio_button_checked'; }
.fa-download::before { content: 'download'; }
.fa-envelope::before { content: 'mail'; }
.fa-envelope-open::before { content: 'drafts'; }
.fa-exclamation-circle::before { content: 'error'; }
.fa-exclamation-triangle::before { content: 'warning'; }
.fa-eye::before { content: 'visibility'; }
.fa-file::before { content: 'description'; }
.fa-file-alt::before { content: 'description'; }
.fa-file-code::before { content: 'code_blocks'; }
.fa-file-minus::before { content: 'scan_delete'; }
.fa-flag::before { content: 'flag'; }
.fa-folder::before { content: 'folder'; }
.fa-folder-open::before { content: 'folder_open'; }
.fa-gavel::before { content: 'gavel'; }
.fa-globe::before { content: 'language'; }
.fa-globe-americas::before { content: 'public'; }
.fa-home::before { content: 'home'; }
.fa-inbox::before { content: 'inbox'; }
.fa-info::before { content: 'info'; }
.fa-info-circle::before { content: 'info'; }
.fa-key::before { content: 'key'; }
.fa-level-up::before { content: 'upgrade'; }
.fa-life-ring::before { content: 'support'; }
.fa-list::before { content: 'list'; }
.fa-lock::before { content: 'lock'; }
.fa-lock-alt::before { content: 'lock'; }
.fa-map-marker-alt::before { content: 'location_on'; }
.fa-map-signs::before { content: 'signpost'; }
.fa-minus::before { content: 'remove'; }
.fa-money-bill-alt::before { content: 'payments'; }
.fa-paperclip::before { content: 'attach_file'; }
.fa-passport::before { content: 'badge'; }
.fa-pencil::before { content: 'edit'; }
.fa-pencil-alt::before { content: 'edit'; }
.fa-phone::before { content: 'call'; }
.fa-plus::before { content: 'add'; }
.fa-print::before { content: 'print'; }
.fa-project-diagram::before { content: 'account_tree'; }
.fa-question-circle::before { content: 'help'; }
.fa-random::before { content: 'shuffle'; }
.fa-redo-alt::before { content: 'refresh'; }
.fa-rocket::before { content: 'rocket_launch'; }
.fa-rss::before { content: 'rss_feed'; }
.fa-search::before { content: 'search'; }
.fa-server::before { content: 'dns'; }
.fa-share::before { content: 'share'; }
.fa-shield::before { content: 'shield'; }
.fa-shield-alt::before { content: 'shield'; }
.fa-shopping-cart::before { content: 'shopping_cart'; }
.fa-sparkles::before { content: 'auto_awesome'; }
.fa-spinner::before { content: 'progress_activity'; }
.fa-star::before { content: 'star'; }
.fa-sync::before { content: 'sync'; }
.fa-sync-alt::before { content: 'sync'; }
.fa-thumbs-down::before { content: 'thumb_down'; }
.fa-thumbs-up::before { content: 'thumb_up'; }
.fa-ticket-alt::before { content: 'confirmation_number'; }
.fa-times::before { content: 'close'; }
.fa-trash::before { content: 'delete'; }
.fa-trash-alt::before { content: 'delete'; }
.fa-trophy::before { content: 'emoji_events'; }
.fa-university::before { content: 'account_balance'; }
.fa-user::before { content: 'person'; }
.fa-user-plus::before { content: 'person_add'; }
.fa-users::before { content: 'group'; }
.fa-window-maximize::before { content: 'web_asset'; }
.fa-wrench::before { content: 'build'; }
/* --------------------------------------------------------------------------
38. Client area polish
The public pages had the design attention; the pages behind them did not.
Everything here was measured on the live cart and checkout rather than
guessed, and the through-line is one rule: a divider is 1px solid
var(--bang-line). No exceptions, no second weight, no light greys.
The offenders found, all from standard_cart:
.sub-heading border-top: 1px solid #ddd
.form-control:focus border-color: #ddd
.view-cart-tabs border-color: #dee2e6 #dee2e6 #f8f8f8
.addon-renewals > div border: 1px solid #ccc
.empty-cart .btn background-color: #058
.sub-heading span color: #058
plus a 2px border on .view-cart-items that was mine, and heavier than
anything around it.
-------------------------------------------------------------------------- */
/* 38a. One divider, everywhere.
Colour only. An earlier version of this rule also forced `border-width` and
`border-style` on all four sides, which is not a recolour: an element with
only a `border-bottom` had the other three sides switched on, so the cart's
Subtotal row rendered as a boxed rectangle rather than a line under it.
Where a side is `border-style: none`, forcing the colour changes nothing,
which is exactly the behaviour wanted here. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .view-cart-items,
body #order-standard_cart .subtotal,
body #order-standard_cart .account.border-bottom,
body .addon-renewals > div,
body .service-renewals > div,
body .domain-renewals > div {
border-color: var(--bang-line) !important;
}
/* This one was 2px and mine, so it needs the width brought down as well. */
body #order-standard_cart .view-cart-items { border-bottom-width: 1px !important; }
body #order-standard_cart .form-control:focus,
body #order-standard_cart .field:focus {
border-color: var(--bang-blue);
}
/* 38b. Section labels.
The pattern is a rule with the label sitting on it, the label's background
cutting the line. Kept, because it reads well, but retuned: hairline instead
of #ddd, and an uppercase letterspaced label instead of 16px #058. Same
treatment as the "included with every plan" strip on the order form. */
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
background-color: var(--bang-bg);
color: var(--bang-muted);
font-family: var(--bang-font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0 18px;
}
/* 38c. Cart tabs.
Boxed tabs on a light plate, from an era of chrome. Now an underline on the
active tab and nothing else, matching the nav. */
body #order-standard_cart .view-cart-tabs .nav-tabs {
padding-left: 0;
font-size: 0.875rem;
border-bottom: 1px solid var(--bang-line);
}
body #order-standard_cart .view-cart-tabs .nav-tabs a {
background-color: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--bang-muted);
font-weight: 500;
padding: 10px 16px;
}
body #order-standard_cart .view-cart-tabs .nav-tabs a:hover {
color: var(--bang-heading);
border-bottom-color: var(--bang-line-strong);
background-color: transparent;
}
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a.active {
background-color: transparent;
border-color: transparent transparent var(--bang-blue);
color: var(--bang-blue);
}
body #order-standard_cart .view-cart-tabs .tab-content {
background-color: transparent;
border: 0;
padding: 18px 0 0;
}
/* 38d. Buttons that were still wearing stock colours. */
/* Emptying the cart is destructive and rare: a quiet outline, not a blue tab
welded to the corner of the table. */
body #order-standard_cart .empty-cart {
margin: 12px 0 0;
}
body #order-standard_cart .empty-cart .btn {
background-color: transparent;
border: 1px solid var(--bang-line-strong);
border-radius: var(--bang-radius-pill);
color: var(--bang-muted);
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 600;
}
body #order-standard_cart .empty-cart .btn:hover {
border-color: var(--bang-danger);
color: var(--bang-danger);
background-color: rgba(255, 122, 133, 0.10);
}
/* Already Registered is a .btn-info, which the theme renders sky blue. It is a
secondary action next to the form, so it gets the secondary treatment. */
body #order-standard_cart #btnAlreadyRegistered,
body #order-standard_cart .already-registered .btn {
background-color: transparent;
border: 1px solid var(--bang-line-strong);
border-radius: var(--bang-radius-pill);
color: var(--bang-text);
font-weight: 600;
}
body #order-standard_cart #btnAlreadyRegistered:hover,
body #order-standard_cart .already-registered .btn:hover {
border-color: var(--bang-blue);
color: var(--bang-heading);
background-color: var(--bang-surface-2);
}
/* Edit and remove on cart lines read as links, not buttons. */
body #order-standard_cart .btn-link,
body #order-standard_cart .btn-remove-from-cart {
color: var(--bang-muted);
border: 0;
background: transparent;
}
body #order-standard_cart .btn-link:hover { color: var(--bang-blue); }
body #order-standard_cart .btn-remove-from-cart:hover { color: var(--bang-danger); }
/* 38e. Navigation details.
The hover rule was inset 1rem on the left and flush on the right, because
the last-item rule zeroed one side only. That produced the short off-centre
bar under Account. Full width of the item, both sides, one weight. */
header.header .main-navbar-wrapper .navbar-nav > li > a::before,
header.header .main-navbar-wrapper #nav > li:first-child > a::before,
header.header .main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a::before {
left: 0;
right: 0;
height: 2px;
}
/* One more light divider, on the totals block in the cart sidebar. */
body #order-standard_cart .bordered-totals,
body .bordered-totals {
border-color: var(--bang-line) !important;
border-width: 1px !important;
}
/* The dropdown anchors resolve to #444, the same stock colour that made the
nav unreadable. The li around them is styled correctly, which is why this
was easy to miss: only the anchor is wrong. */
header.header .dropdown-menu a.dropdown-item,
.dropdown-menu a.dropdown-item {
color: var(--bang-text);
}
header.header .dropdown-menu a.dropdown-item:hover,
header.header .dropdown-menu a.dropdown-item:focus,
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
color: var(--bang-heading);
background-color: var(--bang-surface-3);
}
/* py-0 on those anchors leaves them 24px tall and crammed against each other. */
header.header .dropdown-menu a.dropdown-item {
padding-top: 7px !important;
padding-bottom: 7px !important;
}
/* --------------------------------------------------------------------------
39. Elevation
Everything up to here made the client area dark and consistent. It still
read as Bootstrap wearing a dark coat: flat surfaces, a tight 10px radius,
dense tables and no depth. This section brings the card language from the
landing and hosting pages inward, so a signed-in client sees the same
product they saw before they signed in.
The vocabulary, lifted from those pages:
face linear-gradient(235.6deg, #0c0e11 60%, #07161e 92%)
radius soft, ~1.25rem, not 10px
depth a long low shadow rather than a border alone
lift translateY on things that are actually clickable, nothing else
-------------------------------------------------------------------------- */
:root {
--bang-face: linear-gradient(235.6deg, #0c0e11 60%, #07161e 92%);
--bang-radius-lg: 1.25rem;
--bang-depth: 0 24px 48px -32px rgba(0, 0, 0, 0.65);
--bang-glow: 0 0 70px -22px rgba(156, 218, 235, 0.27);
}
/* 39a. Panels.
A card is a surface with depth now, not a bordered box. The accent stripe
that WHMCS puts on the client home panels goes: colour belongs on the icon
and the status, not as a bar welded to the top of every panel. */
.card,
.panel,
.sidebar .card,
.sidebar .card-sidebar {
background: var(--bang-face);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--bang-radius-lg);
box-shadow: var(--bang-depth);
margin-bottom: 26px;
}
.card[class*="card-accent-"] {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.card-header,
.panel-heading,
.sidebar .card-header {
padding: 20px 24px 16px;
border-bottom: 1px solid var(--bang-line-soft);
}
.card-header .card-title,
.card-title,
.panel-title {
font-family: var(--bang-font-display);
font-size: 1.15rem;
font-weight: 600;
color: #e9f4fa;
letter-spacing: -0.01em;
}
.primary-content .card-title { font-size: 1.15rem; }
.card-body,
.panel-body { padding: 22px 24px; }
.card-footer,
.panel-footer { padding: 16px 24px; border-top: 1px solid var(--bang-line-soft); }
/* Panel header icons pick up the accent the stripe used to carry. */
.card-header .card-title > i:first-child,
.card-header .card-title > .fa-fw:first-child { color: var(--bang-blue); }
/* 39b. Sidebar.
The heading becomes a quiet kicker and the active row gets a marker rather
than just a tint, so where you are is readable at a glance. */
.sidebar .card-header {
padding: 18px 22px 12px;
border-bottom: 0;
}
.sidebar .card-title,
.sidebar .panel-title {
font-family: var(--bang-font-body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bang-muted);
}
.sidebar .list-group-item {
position: relative;
padding: 11px 22px;
border-color: transparent;
font-size: 0.9rem;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
background-color: rgba(156, 218, 235, 0.10);
color: var(--bang-heading);
}
.sidebar .list-group-item.active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 0 2px 2px 0;
background-color: var(--bang-blue);
}
/* 39c. Stat tiles.
The numbers are the point, so they get the display face at a real size, and
the icon sits in a tinted plate like the landing page cards. */
.tiles .tile {
background: var(--bang-face);
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: var(--bang-radius-lg);
box-shadow: var(--bang-depth);
padding: 24px 26px 22px;
}
.tiles .tile:hover {
border-color: rgba(156, 218, 235, 0.33) !important;
box-shadow: var(--bang-glow);
}
.tiles .tile .stat {
font-family: var(--bang-font-display);
font-size: 2.9rem;
font-weight: 600;
letter-spacing: -0.03em;
margin-top: 4px;
}
.tiles .tile .title {
font-size: 0.68rem;
letter-spacing: 0.12em;
margin-top: 8px;
}
.tiles .tile i {
top: 22px;
right: 22px;
width: 38px;
height: 38px;
font-size: 19px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(156, 218, 235, 0.09);
border: 1px solid rgba(156, 218, 235, 0.18);
color: var(--bang-blue);
}
.tiles .tile:hover i {
font-size: 19px;
color: var(--bang-blue);
transform: none;
}
/* 39d. Tables.
Rows were fenced by a border each. One hairline between rows, more height,
and a header that reads as a label rather than a heading.
Cell padding is 16px with a 24px gutter on the outer columns only, so the
table lines up with the card's own padding without four columns of 48px
eating the width. That distinction matters: at a flat 24px the four-column
Recent Invoices table came out 430px inside a 398px card, and because .card
clips to its radius the status badge was silently cut in half. Anything
still too wide scrolls rather than disappearing, for the same reason. */
.table thead th,
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
padding: 14px 16px;
border-bottom: 1px solid var(--bang-line-soft);
font-size: 0.68rem;
letter-spacing: 0.12em;
}
.table td,
.table th,
.table-list > tbody > tr > td,
.dataTables_wrapper table.table-list > tbody > tr > td {
padding: 16px;
border-top: 1px solid var(--bang-line-soft);
}
.card > .table > * > tr > :first-child,
.card > .table-responsive > .table > * > tr > :first-child,
.card > .table-container > .table > * > tr > :first-child { padding-left: 24px; }
.card > .table > * > tr > :last-child,
.card > .table-responsive > .table > * > tr > :last-child,
.card > .table-container > .table > * > tr > :last-child { padding-right: 24px; }
/* Money, dates and status never look better broken across two lines, and
letting them wrap is what squeezed the columns in the first place. */
.card .table td .badge,
.card .table td .label { white-space: nowrap; }
/* Not `display: block; overflow-x: auto` on the table itself: that makes thead
and tbody two independent tables, so the column widths stop agreeing and the
headings drift off their own columns. WHMCS already wraps its real client
area tables in a scrolling container, so that is where the safety net goes. */
.card > .table-responsive,
.card > .table-container,
.card .dataTables_wrapper { overflow-x: auto; }
.card > .table > tbody > tr:first-child > td,
.card > .table-responsive > .table > tbody > tr:first-child > td { border-top: 0; }
.dataTables_wrapper table.table-list {
border: 0;
border-radius: 0;
}
/* 39e. Rhythm.
The old spacing was Bootstrap's default, which is tight for a dashboard. */
section#main-body { padding: 40px 0 84px; }
.primary-content > h1,
.primary-content > h2,
#main-body > .container > h1,
#main-body > .container > h2 {
font-family: var(--bang-font-display);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 1.4rem;
}
.tiles { margin-bottom: 30px !important; }
/* List rows inside panels get room to breathe too. */
.card .list-group-item,
.panel .list-group-item {
padding: 13px 24px;
border-color: var(--bang-line-soft);
}
.card .list-group-item:last-child { border-bottom: 0; }
/* 39f. Empty states.
"No Recent Tickets Found" and friends were body text in a panel. Centred and
muted reads as a considered state rather than a missing one. */
.card-body > p:only-child,
.panel-body > p:only-child {
color: var(--bang-muted);
text-align: center;
padding: 14px 0;
margin: 0;
}
/* --------------------------------------------------------------------------
40. Support pages
The knowledgebase, announcements and downloads pages are where the theme
still showed its Bootstrap seams: utility classes that assume a light
background, an oversized search slab, and cards that are links without
looking like it.
-------------------------------------------------------------------------- */
/* 40a. Utility classes that assume a white page.
WHMCS marks secondary icons with .text-black-50, which is rgba(0,0,0,.5).
On a #0b0e12 page that is not "subtle", it is invisible. Same for the muted
and dark variants. */
.text-black-50,
.text-dark,
.text-body { color: var(--bang-muted) !important; }
.text-muted,
small.text-muted { color: var(--bang-muted) !important; }
.text-white-50 { color: var(--bang-faint) !important; }
.bg-light,
.bg-white { background-color: var(--bang-surface-2) !important; }
/* 40b. Knowledgebase search.
input-group-lg plus btn-primary produced a 56px pale slab with 22px type in
the button, which shouted louder than anything else on the page. One pill,
one height, the button sized to its job. */
.kb-search {
border-radius: var(--bang-radius-pill);
overflow: hidden;
border: 1px solid var(--bang-line);
background-color: var(--bang-surface);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kb-search:focus-within {
border-color: rgba(156, 218, 235, 0.45);
box-shadow: 0 0 0 3px rgba(156, 218, 235, 0.10);
}
/* Specificity note: Bootstrap sizes this through
`.input-group-lg > .input-group-append > .btn`, which is (0,3,0). A plain
`.kb-search .btn` at (0,2,0) loses and the button keeps its 20px type, so
these selectors deliberately mirror Bootstrap's own chain and add the
.kb-search class on top of it. */
.kb-search.input-group > .form-control,
.kb-search.input-group > .form-control:focus {
height: 52px;
padding: 0 8px 0 24px;
font-size: 0.95rem;
background-color: transparent;
border: 0;
box-shadow: none;
}
.kb-search.input-group > .input-group-append > .btn {
height: 52px;
padding: 0 32px;
margin: 0;
font-size: 0.9rem;
font-weight: 600;
line-height: 52px;
border-radius: 0;
border: 0;
}
/* 40c. Category and article cards.
.kb-category wraps its whole body in an anchor, so it is a click target
already; it just never looked like one. */
.card.kb-category { margin-bottom: 20px; }
.card.kb-category > .card-body {
display: block;
padding: 22px 24px;
color: var(--bang-heading);
transition: background-color 0.18s ease;
}
.card.kb-category:hover {
border-color: rgba(156, 218, 235, 0.30);
box-shadow: var(--bang-glow);
transform: translateY(-2px);
}
.card.kb-category,
.tiles .tile { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.card.kb-category .h5 {
font-family: var(--bang-font-display);
font-size: 1.05rem;
font-weight: 600;
}
.card.kb-category .h5 > i { color: var(--bang-blue); margin-right: 4px; }
.card.kb-category p:empty,
.card.kb-category p small:empty { display: none; }
.kb-article-item {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 24px;
}
.kb-article-item > i { color: var(--bang-blue); opacity: 0.75; }
.kb-article-item:hover { background-color: rgba(156, 218, 235, 0.06); }
/* 40d. A card whose only child is a title needs no divider under it, and the
list that follows should not draw one either. Two hairlines 60px apart is
what made these panels look stacked rather than composed. */
.card > .card-body:first-child > .card-title:only-child { margin-bottom: 0; }
.list-group-flush > .list-group-item:first-child { border-top: 1px solid var(--bang-line-soft); }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }
/* --------------------------------------------------------------------------
41. Form controls
Every form on the site shares these, so a Bootstrap default left showing
here shows up on login, register, password reset, checkout and My Details
at once. The login page was the obvious case: .input-group-text still had
Bootstrap's #e9ecef, so each field carried a light grey slab on its left.
-------------------------------------------------------------------------- */
/* 41a. Addons. */
.input-group-text {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
color: var(--bang-muted);
padding: 0 14px;
}
.input-group-text i,
.input-group-text .fa,
.input-group-text .fas,
.input-group-text .far,
.input-group-text .fal { color: var(--bang-muted); }
/* twenty-one's .input-group-merge means "these read as one field", which only
works if the seam between them is not drawn twice. */
.input-group-merge .input-group-text { border-right: 0; }
.input-group-merge .input-group-prepend + .form-control { border-left: 0; }
.input-group-merge .form-control + .input-group-append .btn { border-left: 0; }
.input-group-merge:focus-within .input-group-text,
.input-group-merge:focus-within .form-control,
.input-group-merge:focus-within .btn { border-color: rgba(156, 218, 235, 0.45); }
.input-group-merge:focus-within .form-control { box-shadow: none; }
/* 41b. The password reveal button. btn-default is Bootstrap's light grey, so
it lit up the right-hand end of every password field. */
.btn.btn-reveal-pw,
.btn.btn-reveal-pw:hover,
.btn.btn-reveal-pw:focus,
.btn.btn-reveal-pw:active {
background-color: var(--bang-surface-2);
border: 1px solid var(--bang-line);
color: var(--bang-muted);
box-shadow: none;
}
.btn.btn-reveal-pw:hover { color: var(--bang-blue); }
/* 41c. Native checkboxes and radios.
Two properties, doing different halves of the job. color-scheme tells the
platform to draw its own controls dark, which is what fixes an *unchecked*
box: accent-color only touches the fill and tick once it is ticked, so on
its own it left a light grey square sitting in the Remember Me row. Declared
on :root so it also covers scrollbars and the native date pickers. */
:root { color-scheme: dark; }
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--bang-mint);
width: 15px;
height: 15px;
vertical-align: -2px;
}
.form-check-input { margin-top: 0.2rem; }
label > input[type="checkbox"],
label > input[type="radio"] { margin-right: 7px; }
/* 41d. Selects.
The native arrow is drawn by the platform in the platform's colour, which
on a dark field is a black chevron on a dark ground. */
select.form-control,
select.custom-select {
-webkit-appearance: none;
appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c8d9e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 16px;
}
/* 41e. Labels and help text. */
.form-control-label,
.control-label,
label {
color: var(--bang-text);
font-size: 0.86rem;
font-weight: 500;
}
.form-text,
.help-block,
small.form-text { color: var(--bang-muted); }
/* 41f. Autofill.
Chrome paints its own near-white over the field and ignores background-color
outright. An inset shadow the size of the box is the only thing it honours. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-text-fill-color: var(--bang-heading);
-webkit-box-shadow: 0 0 0 1000px var(--bang-surface-2) inset;
caret-color: var(--bang-heading);
transition: background-color 5000s ease-in-out 0s;
}
/* --------------------------------------------------------------------------
42. Cart and checkout, elevated
Section 31 made the cart dark. Next to a dashboard built from gradient cards
it then looked unfinished, because the cart's own blocks sit directly on the
page ground with no surface under them: the line-items header, the empty
state and the promo tabs were three loose strips beside one panel.
standard_cart gives no single wrapper to hang a card on, so the card face
goes on the two blocks that already exist, `.secondary-cart-body > form` for
the items and `.view-cart-tabs` for the tabs. That reads as two cards, which
is the same rhythm the dashboard uses.
-------------------------------------------------------------------------- */
body #order-standard_cart .secondary-cart-body > form:first-of-type,
body #order-standard_cart .view-cart-tabs,
body #order-standard_cart .order-summary {
background: var(--bang-face);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--bang-radius-lg);
box-shadow: var(--bang-depth);
overflow: hidden;
}
body #order-standard_cart .secondary-cart-body > form:first-of-type { margin-bottom: 26px; }
/* The items header becomes the card's header rather than a tinted plate. */
body #order-standard_cart .view-cart-items-header {
background-color: transparent;
border-bottom: 1px solid var(--bang-line-soft);
border-radius: 0;
padding: 16px 24px;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--bang-muted);
}
body #order-standard_cart .view-cart-items {
border-bottom: 0 !important;
padding: 0;
}
body #order-standard_cart .view-cart-items .item { padding: 18px 24px; }
body #order-standard_cart .view-cart-empty {
padding: 46px 24px;
text-align: center;
color: var(--bang-muted);
}
/* Tabs sit flush to the top of their own card, so the bar is the card header. */
body #order-standard_cart .view-cart-tabs .nav-tabs {
padding: 0 24px;
border-bottom: 1px solid var(--bang-line-soft);
}
body #order-standard_cart .view-cart-tabs .tab-content {
background-color: transparent;
border: 0;
padding: 24px;
}
/* 42b. Order summary.
The heading is a card header, the totals are a ledger, and the amount due is
the one number on the page that should be unmissable. */
body #order-standard_cart .order-summary h2 {
padding: 20px 24px 16px;
margin: 0;
font-size: 1.15rem;
border-bottom: 1px solid var(--bang-line-soft);
}
body #order-standard_cart .summary-container {
background-color: transparent;
border-radius: 0;
padding: 6px 24px 22px;
}
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .summary-totals > div {
padding: 11px 0;
}
body #order-standard_cart .order-summary .total-due-today .amt {
font-family: var(--bang-font-display);
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bang-heading);
}
body #order-standard_cart .order-summary .total-due-today small,
body #order-standard_cart .order-summary .total-due-today .label {
color: var(--bang-muted);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/* 42c. Sidebar select panels.
The cart's Categories and Actions panels collapse to a bare