/* =====================================================================
HostGuru - client portal header / footer
---------------------------------------------------------------------
Loaded AFTER hostguru.css (see includes/head.tpl). Everything here uses
the hg-pt- prefix so it never fights the older marketing header rules,
which means rollback is: delete the in head.tpl and remove this
file. See HEADER-ROLLBACK.md.
The aim is a quiet, task-first shell. The client area already has a
left sidebar, so the top bar's job is orientation and fast access -
not selling. Dropdowns are lists, not advert columns: no marketing
blurbs, no icons-per-row, no gradients.
===================================================================== */
/* ---------- design tokens ---------- */
.hg-pt {
--pt-bar-h: 64px;
--pt-strip-h: 36px;
--pt-ink: #111827;
--pt-ink-2: #4b5563;
--pt-ink-3: #6b7280;
--pt-line: #e5e7eb;
--pt-line-2: #f3f4f6;
--pt-bg: #ffffff;
--pt-accent: #f57200;
--pt-accent-ink: #c85f00;
--pt-ok: #12805c;
--pt-warn-bg: #fff7ed;
--pt-warn-line: #fed7aa;
--pt-r: 8px;
--pt-shadow: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .04);
}
/* =====================================================================
1. SHELL
===================================================================== */
/* The attention bar and the status strip sit above the header (see header.tpl),
so this box is only the main bar - which means it can stay put for the whole
page. A sticky element is confined to its containing block, so nesting the
other two rows inside here would leave it nowhere to travel. */
.hg-header {
position: sticky;
top: 0;
z-index: 1030;
background: var(--pt-bg);
border-bottom: 1px solid var(--pt-line);
}
.hg-pt-bar {
position: relative;
background: var(--pt-bg);
}
.hg-pt-bar-in {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
height: var(--pt-bar-h);
display: flex;
align-items: center;
gap: 8px;
}
.hg-pt-logo {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 10px;
}
.hg-pt-logo img {
width: 158px;
height: auto;
display: block;
}
/* =====================================================================
2. TOP STRIP - promo for visitors, real alerts for clients
===================================================================== */
.hg-pt-strip {
background: #f9fafb;
border-bottom: 1px solid var(--pt-line-2);
font-size: 13px;
color: var(--pt-ink-2);
}
.hg-pt-strip-in {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
min-height: var(--pt-strip-h);
display: flex;
align-items: center;
gap: 18px;
}
.hg-pt-strip-lead {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.hg-pt-strip-tail {
margin-left: auto;
display: flex;
align-items: center;
gap: 18px;
}
.hg-pt-strip a {
color: var(--pt-ink-2);
text-decoration: none;
}
.hg-pt-strip a:hover { color: var(--pt-accent); }
/* status pill - the one bit of colour in the strip */
.hg-pt-status {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--pt-ok);
font-weight: 600;
white-space: nowrap;
}
.hg-pt-status:hover { color: var(--pt-ok); }
.hg-pt-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
flex-shrink: 0;
}
.hg-pt-strip-sep {
width: 1px;
height: 14px;
background: var(--pt-line);
}
/* client alert strip */
.hg-pt-attn {
background: var(--pt-warn-bg);
border-bottom: 1px solid var(--pt-warn-line);
color: #7c3d00;
font-size: 13px;
}
.hg-pt-attn-in {
max-width: 1320px;
margin: 0 auto;
padding: 7px 24px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.hg-pt-attn-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 11px;
color: var(--pt-accent-ink);
white-space: nowrap;
}
.hg-pt-attn-list {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
min-width: 0;
}
.hg-pt-attn-list a {
color: #7c3d00;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hg-pt-attn-list a:hover { text-decoration: underline; }
.hg-pt-attn-list svg { flex-shrink: 0; opacity: .75; }
.hg-pt-attn-rest {
color: #a35a12;
font-weight: 600;
white-space: nowrap;
}
/* =====================================================================
3. PRIMARY NAV
Label size is left at the WHMCS default (1rem / 16px) on purpose.
===================================================================== */
.hg-pt-nav {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
height: var(--pt-bar-h);
min-width: 0;
}
.hg-pt-nav > li {
position: relative; /* anchors the narrow dropdowns */
display: flex;
align-items: center;
height: 100%;
}
.hg-pt-nav > li.hg-mega {
position: static; /* the wide panel spans the whole bar */
}
.hg-pt-nav .nav-link {
display: flex;
align-items: center;
gap: 5px;
height: 100%;
padding: 0 11px;
color: var(--pt-ink);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color .14s ease, border-color .14s ease;
cursor: pointer;
}
.hg-pt-nav .nav-link:hover,
.hg-pt-nav > li.show > .nav-link,
.hg-pt-nav > li:focus-within > .nav-link {
color: var(--pt-accent);
border-bottom-color: var(--pt-accent);
}
.hg-pt-nav .nav-link:focus-visible {
outline: 2px solid rgba(245, 114, 0, .45);
outline-offset: -2px;
border-radius: 2px;
}
.hg-pt-nav .nav-link .badge {
background: var(--pt-accent);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
line-height: 1.2;
}
/* Chevron drawn from two borders, so it inherits currentColor and stays crisp.
The border resets are not optional: Bootstrap's .dropdown-toggle::after builds
its caret from border-top + transparent side borders, so without zeroing the
top and left we end up with three borders on the box and the rotation renders
a half cube instead of a chevron. */
.hg-pt .navbar-nav .dropdown-toggle::after,
.hg-pt-nav .dropdown-toggle::after,
.hg-pt-nav .hg-mega > .nav-link::after {
content: '';
box-sizing: border-box;
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
flex-shrink: 0;
vertical-align: middle;
border: 0;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: .5;
transition: transform .16s ease;
}
/* hostguru.css draws a chevron on any .nav-item that has an .hg-dd, using a
background image on a more specific selector than ours. Neutralise the whole
legacy rule - image, box and all - so wide-panel links get exactly one
chevron, drawn at our own size. */
.hg-pt .navbar-nav > li > .nav-link::after,
.hg-pt .navbar-nav > li > a.dropdown-toggle::after {
background-image: none !important;
width: 10px !important;
height: 10px !important;
border-top: 0 !important;
border-left: 0 !important;
}
.hg-pt-nav > li:hover > .nav-link::after,
.hg-pt-nav > li.show > .nav-link::after {
transform: rotate(225deg) translateY(-2px);
opacity: .9;
}
/* =====================================================================
4. RIGHT-HAND CLUSTER
===================================================================== */
.hg-pt-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
list-style: none;
padding: 0;
height: 100%;
flex-shrink: 0;
}
.hg-pt-iconbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--pt-r);
background: none;
color: var(--pt-ink-2);
cursor: pointer;
text-decoration: none;
transition: background .14s ease, color .14s ease;
}
.hg-pt-iconbtn:hover {
background: var(--pt-line-2);
color: var(--pt-ink);
}
.hg-pt-iconbtn:focus-visible {
outline: 2px solid rgba(245, 114, 0, .45);
outline-offset: 1px;
}
.hg-pt-count {
position: absolute;
top: 3px;
right: 3px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: #e11d48;
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 17px;
text-align: center;
border: 2px solid var(--pt-bg);
box-sizing: content-box;
}
.hg-pt-count:empty { display: none; }
.hg-pt-count[data-zero="1"] { display: none; }
/* quick jump - opens the command palette (see js/hostguru.js) */
.hg-pt-jump {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
min-width: 190px;
padding: 0 10px 0 11px;
margin-right: 6px;
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: #fafafa;
color: var(--pt-ink-3);
font-size: 14.5px;
cursor: pointer;
transition: border-color .14s ease, background .14s ease;
}
.hg-pt-jump:hover {
border-color: #d1d5db;
background: #fff;
}
.hg-pt-jump-label {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hg-pt-kbd {
flex-shrink: 0;
padding: 1px 5px;
border: 1px solid var(--pt-line);
border-bottom-width: 2px;
border-radius: 4px;
background: #fff;
color: var(--pt-ink-3);
font-family: inherit;
font-size: 11px;
font-weight: 600;
line-height: 1.5;
}
/* account cluster - the client's own name, like every real portal */
.hg-pt-account {
display: flex;
align-items: center;
gap: 9px;
height: 44px;
padding: 0 10px 0 6px;
margin-left: 2px;
border-radius: 10px;
cursor: pointer;
color: var(--pt-ink);
text-decoration: none;
border: 1px solid transparent;
}
.hg-pt-account:hover {
background: var(--pt-line-2);
border-color: var(--pt-line);
}
.hg-pt-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--pt-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
text-transform: uppercase;
}
.hg-pt-who { line-height: 1.25; }
.hg-pt-who small {
display: block;
font-size: 11.5px;
color: var(--pt-ink-3);
}
.hg-pt-who b {
display: block;
font-size: 14.5px;
font-weight: 600;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* buttons */
.hg-pt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 40px;
padding: 0 16px;
border-radius: var(--pt-r);
border: 1px solid transparent;
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hg-pt-btn:focus-visible {
outline: 2px solid rgba(245, 114, 0, .45);
outline-offset: 2px;
}
.hg-pt-btn-primary {
background: var(--pt-accent);
color: #fff;
}
.hg-pt-btn-primary:hover {
background: var(--pt-accent-ink);
color: #fff;
}
.hg-pt-btn-ghost {
background: #fff;
border-color: var(--pt-line);
color: var(--pt-ink);
}
.hg-pt-btn-ghost:hover {
border-color: #d1d5db;
background: #fafafa;
color: var(--pt-ink);
}
.hg-pt-btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }
/* hamburger */
.hg-pt-burger {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
background: #fff;
color: var(--pt-ink);
cursor: pointer;
}
/* ---- items WHMCS hands us through $secondaryNavbar ---- */
.hg-pt-right > li {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
/* the palette takes the page hostage until it is dismissed */
body.hg-cp-open { overflow: hidden; }
/* the bar keeps a hairline shadow once the page has moved */
.hg-pt.hg-header.scrolled .hg-pt-bar {
box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .05);
}
.hg-pt-right .dropdown-menu {
position: absolute;
top: calc(100% - 6px);
right: 0;
left: auto;
margin: 0;
border: 1px solid var(--pt-line);
border-radius: 10px;
background: #fff;
box-shadow: var(--pt-shadow);
animation: hg-pt-pop .14s ease;
}
/* As with the primary menus, the rows keep WHMCS's own .dropdown-item
typography, spacing and hover - we only line the icons up. */
.hg-pt-right .dropdown-menu .dropdown-item > a i {
width: 16px;
flex: 0 0 16px;
text-align: center;
}
.hg-pt-right .dropdown-menu .dropdown-divider {
margin: 6px 4px;
border-top: 1px solid var(--pt-line-2);
}
/* navbar.tpl puts .d-block on every nav
, and Bootstrap defines that as
`display: block !important`. It silently beat our `display: flex`, so the
40px controls were never centred in the 64px row - they sat flush to the
top, 12px high. Both are !important here, so ours wins on specificity.
:not(.d-none) keeps Bootstrap's hidden "More" li hidden. */
.hg-pt .navbar-nav > li:not(.d-none) {
display: flex !important;
align-items: center;
}
.hg-pt .navbar-nav > li:not(.d-none) > .dropdown-menu {
position: absolute !important;
top: calc(100% - 10px);
right: 0;
left: auto;
bottom: auto;
float: none;
clear: both;
z-index: 1060;
transform: none;
}
/* Sign in - quiet. Only one solid button allowed on the bar. */
.hg-pt-right > li[menuItemName="Login"] > a {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 16px;
margin-right: 2px;
border: 1px solid var(--pt-line);
border-radius: var(--pt-r);
color: var(--pt-ink);
font-weight: 600;
text-decoration: none;
}
.hg-pt-right > li[menuItemName="Login"] > a:hover {
background: #fafafa;
border-color: #d1d5db;
color: var(--pt-ink);
}
/* Register - the one solid button when logged out, mirroring the signed-in
Order button. Same 40px as every other control in the cluster. */
.hg-pt-right > li[menuItemName="Register"] > a {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 16px;
margin-left: 2px;
border-radius: var(--pt-r);
background: var(--pt-accent);
color: #fff;
font-weight: 600;
text-decoration: none;
}
.hg-pt-right > li[menuItemName="Register"] > a:hover {
background: var(--pt-accent-ink);
color: #fff;
}
/* Account - avatar + real greeting, so clients can see who is signed in.
Height matches every other control in the cluster (40px) and the avatar is
sized to sit inside it comfortably rather than tower over the cart and bell. */
.hg-pt-right > li[menuItemName="Account"] > a {
display: flex;
align-items: center;
gap: 9px;
height: 40px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 10px;
color: var(--pt-ink);
text-decoration: none;
}
/* The avatar already reads as "this opens a menu", and a rotated-border
chevron sitting next to it is both redundant and optically misaligned inside
a flex row - so no chevron on this one control. */
.hg-pt-right > li[menuItemName="Account"] > a.dropdown-toggle::after {
display: none;
}
.hg-pt-right > li[menuItemName="Account"] > a:hover {
background: var(--pt-line-2);
border-color: var(--pt-line);
}
.hg-pt-right > li[menuItemName="Account"] > a::before {
content: '';
display: block;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--pt-accent) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/14px no-repeat;
flex-shrink: 0;
}
/* =====================================================================
5. DROPDOWNS
Narrow list for normal items. No icons, no blurbs - just rows.
===================================================================== */
.hg-pt-nav .dropdown-menu {
position: absolute;
top: calc(100% - 8px);
left: 0;
margin: 0;
border: 1px solid var(--pt-line);
border-radius: 10px;
background: #fff;
box-shadow: var(--pt-shadow);
animation: hg-pt-pop .14s ease;
}
.hg-pt-nav .dropdown-menu.dropdown-menu-right {
left: auto;
right: 0;
}
/* Open on hover, exactly like the wide panels do, so every item behaves the
same. Click still works - Bootstrap's JS just adds .show on top. Pointer
(coarse) devices keep click-to-open, which is why this is inside a
min-width media query. */
@media (min-width: 992px) {
.hg-pt-nav > li.dropdown:hover > .dropdown-menu,
.hg-pt-nav > li.dropdown:focus-within > .dropdown-menu {
display: block;
}
}
@keyframes hg-pt-pop {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Row styling is deliberately NOT redefined here.
WHMCS renders