.hostgauge-wrap {
max-width: none;
}
.hostgauge-shell {
animation: hostgauge-rise 0.35s ease-out both;
background: #fff;
border: 1px solid #c3c4c7;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
margin: 26px auto;
max-width: 980px;
padding: 28px 30px 34px;
}
.hostgauge-title {
margin-bottom: 22px;
text-align: center;
}
.hostgauge-title h1 {
color: #111827;
font-size: 24px;
font-weight: 800;
letter-spacing: 0;
line-height: 1.2;
margin: 0 0 8px;
}
.hostgauge-title p {
color: #5f6b7a;
font-size: 13px;
margin: 0;
}
.hostgauge-hub-card {
align-items: center;
background: #fbfdff;
border: 1px solid #b8c8d8;
border-left: 3px solid #2271b1;
border-radius: 4px;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 18px;
padding: 14px 16px;
}
.hostgauge-hub-main {
align-items: center;
display: flex;
gap: 12px;
min-width: 0;
}
.hostgauge-hub-icon,
.hostgauge-section-icon,
.hostgauge-card-title .dashicons,
.hostgauge-reading-note .dashicons {
align-items: center;
border-radius: 99px;
display: inline-flex;
flex: 0 0 auto;
font-size: 17px;
font-weight: 800;
height: 28px;
justify-content: center;
line-height: 28px;
width: 28px;
}
.hostgauge-hub-icon {
background: #e7f2ff;
color: #0b5cab;
}
.hostgauge-hub-card h2 {
color: #1d2327;
font-size: 13px;
font-weight: 800;
margin: 0 0 2px;
}
.hostgauge-hub-card h2 span,
.hostgauge-mode-badge {
background: #fff8e5;
border-radius: 99px;
color: #996800;
display: inline-block;
font-size: 11px;
font-weight: 800;
margin-left: 6px;
padding: 3px 8px;
}
.hostgauge-hub-card p {
color: #646970;
font-size: 12px;
line-height: 1.45;
margin: 0;
}
.hostgauge-grid {
display: grid;
gap: 16px;
margin-bottom: 16px;
}
.hostgauge-grid-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hostgauge-card,
.hostgauge-panel,
.hostgauge-pro-panel {
background: #fff;
border: 1px solid #ccd3da;
border-radius: 6px;
box-sizing: border-box;
padding: 20px 22px;
}
.hostgauge-card {
animation: hostgauge-rise 0.35s ease-out both;
overflow: hidden;
position: relative;
}
.hostgauge-card-title {
align-items: center;
color: #1d2327;
display: flex;
font-size: 14px;
font-weight: 700;
gap: 8px;
margin-bottom: 12px;
}
.hostgauge-card-title .dashicons {
background: #edf7ee;
color: #008a20;
font-size: 24px;
}
.hostgauge-card:nth-child(2) .hostgauge-card-title .dashicons {
background: #fff4d7;
color: #b56b00;
}
.hostgauge-card-metric {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hostgauge-card-value {
color: #101517;
font-size: 30px;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
}
.hostgauge-card-label {
color: #646970;
font-size: 12px;
}
.hostgauge-meter-glow {
background: #dbeeff;
border-radius: 99px;
height: 8px;
margin: 16px 0 8px;
overflow: hidden;
position: relative;
}
.hostgauge-meter-glow::after {
animation: hostgauge-sheen 2.7s ease-in-out infinite;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: translateX(-120%);
width: 32%;
}
.hostgauge-meter-glow span {
animation: hostgauge-bar-breathe 2.9s ease-in-out infinite;
background: linear-gradient(90deg, rgba(34, 113, 177, 0.16), rgba(34, 113, 177, 0.6), rgba(66, 165, 245, 0.18));
border-radius: 99px;
display: block;
height: 100%;
transform-origin: left center;
width: 100%;
}
.hostgauge-card-foot,
.hostgauge-widget-row,
.hostgauge-summary > div,
.hostgauge-reading-row {
align-items: center;
display: flex;
justify-content: space-between;
}
.hostgauge-card-foot {
color: #646970;
font-size: 12px;
}
.hostgauge-panel h2 {
font-size: 15px;
font-weight: 800;
margin: 0;
}
.hostgauge-section-title,
.hostgauge-section-title > div {
align-items: center;
display: flex;
gap: 8px;
}
.hostgauge-section-title-between {
justify-content: space-between;
}
.hostgauge-section-icon {
background: #e7f2ff;
color: #0b5cab;
}
.hostgauge-reading-stack {
display: grid;
gap: 12px;
margin-top: 18px;
}
.hostgauge-reading-row {
background: #f8fafc;
border: 1px solid #dcdcde;
border-radius: 4px;
gap: 14px;
padding: 12px;
}
.hostgauge-reading-row strong {
color: #101517;
display: block;
font-size: 13px;
}
.hostgauge-reading-row span {
color: #646970;
display: block;
font-size: 11px;
margin-top: 3px;
}
.hostgauge-reading-row b {
color: #0b4f8a;
font-size: 15px;
white-space: nowrap;
}
.hostgauge-reading-note {
align-items: flex-start;
background: #fff8e5;
border-left: 3px solid #dba617;
border-radius: 4px;
display: flex;
gap: 10px;
padding: 12px;
}
.hostgauge-reading-note .dashicons {
background: #fff;
color: #996800;
font-size: 16px;
height: 24px;
line-height: 24px;
width: 24px;
}
.hostgauge-reading-note p {
color: #5f4b00;
font-size: 12px;
line-height: 1.45;
margin: 0;
}
.hostgauge-summary {
display: grid;
gap: 10px;
margin-top: 16px;
}
.hostgauge-summary > div,
.hostgauge-widget-row {
background: #f8fafc;
border: 1px solid #dcdcde;
border-radius: 4px;
padding: 10px 12px;
}
.hostgauge-summary span {
color: #5f6b7a;
font-size: 12px;
}
.hostgauge-summary strong {
color: #101517;
font-size: 12px;
}
.hostgauge-status {
border-radius: 99px;
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
}
.hostgauge-status-normal {
background: #edfaef;
color: #008a20;
}
.hostgauge-status-warning {
background: #fff8e5;
color: #996800;
}
.hostgauge-status-critical {
background: #fcf0f1;
color: #b32d2e;
}
.hostgauge-scan-card {
align-items: center;
background: #eef7ff;
border: 1px solid #b8daff;
border-radius: 4px;
display: flex;
gap: 14px;
justify-content: space-between;
margin-top: 18px;
padding: 12px;
}
.hostgauge-scan-card strong {
color: #0b4f8a;
display: block;
font-size: 13px;
}
.hostgauge-scan-card span {
color: #5f6b7a;
display: block;
font-size: 11px;
margin-top: 3px;
}
.hostgauge-pro-panel {
align-items: center;
background: linear-gradient(135deg, #0f4f8a, #2271b1);
border-color: #0f4f8a;
color: #fff;
display: grid;
gap: 18px;
grid-template-columns: 1.4fr 1fr auto;
margin-top: 2px;
overflow: hidden;
position: relative;
}
.hostgauge-pro-panel::before {
background: rgba(255, 255, 255, 0.11);
border-radius: 999px;
content: "";
height: 130px;
position: absolute;
right: -48px;
top: -56px;
width: 130px;
}
.hostgauge-pro-kicker {
color: #cfe8ff;
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
margin-bottom: 5px;
text-transform: uppercase;
}
.hostgauge-pro-trial {
background: rgba(255, 255, 255, 0.9);
border-radius: 999px;
color: #0f4f8a;
display: inline-flex;
font-size: 11px;
font-weight: 850;
line-height: 1;
margin: 0 0 8px;
padding: 6px 9px;
position: relative;
}
.hostgauge-pro-panel h2 {
color: #fff;
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
}
.hostgauge-pro-panel p {
color: #e4f2ff;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.hostgauge-pro-list {
display: grid;
gap: 7px;
margin: 0;
}
.hostgauge-pro-benefits {
display: grid;
gap: 9px;
position: relative;
}
.hostgauge-pro-list li {
color: #fff;
font-size: 12px;
margin: 0;
padding-left: 18px;
position: relative;
}
.hostgauge-pro-list li::before {
background: #ffca3a;
border-radius: 99px;
content: "";
height: 7px;
left: 0;
position: absolute;
top: 6px;
width: 7px;
}
.hostgauge-pro-panel .button {
background: #fff;
border-color: #fff;
color: #0f4f8a;
font-weight: 700;
position: relative;
white-space: nowrap;
}
.hostgauge-widget {
display: grid;
gap: 10px;
}
#wpadminbar .hostgauge-admin-bar-normal > .ab-item {
color: #e8f6ee;
}
#wpadminbar .hostgauge-admin-bar-warning > .ab-item {
color: #ffe8a3;
}
#wpadminbar .hostgauge-admin-bar-critical > .ab-item {
color: #ffb4b4;
}
.hostgauge-shell .button,
.hostgauge-shell button.button,
.hostgauge-shell a.button,
.hostgauge-card {
transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hostgauge-shell .button,
.hostgauge-shell button.button,
.hostgauge-shell a.button {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.hostgauge-card:hover,
.hostgauge-card.is-hovered {
border-color: #8fb9dc;
box-shadow: 0 10px 22px rgba(11, 95, 171, 0.1);
}
.hostgauge-shell .button:hover,
.hostgauge-shell button.button:hover,
.hostgauge-shell a.button:hover {
box-shadow: 0 8px 18px rgba(34, 113, 177, 0.16);
}
.hostgauge-shell .button-primary:hover {
background: #0f5f9f;
border-color: #0f5f9f;
color: #fff;
}
.hostgauge-shell .button-secondary:hover {
background: #e8f5ff;
border-color: #78acd8;
color: #0f4f8f;
}
.hostgauge-pro-panel .button:hover {
background: #e8f5ff;
border-color: #e8f5ff;
color: #0f4f8a;
}
}
.hostgauge-shell .button:focus-visible,
.hostgauge-shell button.button:focus-visible,
.hostgauge-shell a.button:focus-visible {
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.24), 0 0 0 1px #2271b1;
outline: none;
}
.hostgauge-shell .button:focus:not(:focus-visible),
.hostgauge-shell button.button:focus:not(:focus-visible),
.hostgauge-shell a.button:focus:not(:focus-visible) {
box-shadow: none;
outline: none;
}
.hostgauge-shell .button:active,
.hostgauge-shell button.button:active,
.hostgauge-shell a.button:active {
transform: scale(0.97);
} .hostgauge-wrap {
--hg-ink: #07111f;
--hg-muted: #53657a;
--hg-blue: #176eb3;
--hg-blue-deep: #0f4f8a;
--hg-cyan: #14a7cf;
--hg-green: #08a86c;
--hg-gold: #e1a100;
--hg-border: #c7d6e3;
--hg-surface: #f7fbff;
}
.hostgauge-shell {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.98) 100%),
#fff;
border-color: #b9cada;
border-radius: 8px;
box-shadow: 0 18px 48px rgba(8, 35, 61, 0.1);
max-width: 1020px;
position: relative;
}
.hostgauge-shell::before {
background: linear-gradient(90deg, var(--hg-blue), var(--hg-cyan), var(--hg-green));
border-radius: 8px 8px 0 0;
content: "";
height: 3px;
left: -1px;
position: absolute;
right: -1px;
top: -1px;
}
.hostgauge-title {
margin-bottom: 24px;
}
.hostgauge-title h1 {
color: var(--hg-ink);
font-size: 26px;
font-weight: 900;
}
.hostgauge-title p {
color: var(--hg-muted);
}
.hostgauge-hub-card {
background:
linear-gradient(90deg, rgba(23, 110, 179, 0.1), rgba(20, 167, 207, 0.045)),
#fff;
border-color: #acc9df;
border-left-width: 5px;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(15, 79, 138, 0.08);
padding: 18px 20px;
position: relative;
}
.hostgauge-hub-icon {
background: #e5f3ff;
border: 1px solid #b7daf7;
color: var(--hg-blue);
font-size: 23px;
height: 42px;
line-height: 42px;
width: 42px;
}
.hostgauge-hub-card h2 {
color: var(--hg-ink);
font-size: 16px;
font-weight: 900;
}
.hostgauge-hub-card h2 span,
.hostgauge-mode-badge {
background: #fff2c8;
border: 1px solid #f0d689;
color: #946300;
}
.hostgauge-hub-card p {
color: #2b3f55;
max-width: 700px;
}
.hostgauge-card,
.hostgauge-panel {
border-color: var(--hg-border);
border-radius: 8px;
box-shadow: 0 11px 28px rgba(7, 31, 54, 0.065);
}
.hostgauge-card {
min-height: 148px;
padding: 22px 24px;
}
.hostgauge-card::before {
background: linear-gradient(90deg, var(--hg-green), var(--hg-cyan));
content: "";
height: 4px;
left: 22px;
position: absolute;
right: 22px;
top: 0;
transform: scaleX(0.34);
transform-origin: left;
transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
pointer-events: none;
}
.hostgauge-card:nth-child(2)::before {
background: linear-gradient(90deg, var(--hg-gold), #ffcd3d, var(--hg-cyan));
}
@media (hover: hover) and (pointer: fine) {
.hostgauge-card:hover::before,
.hostgauge-card.is-hovered::before {
transform: scaleX(1);
}
}
.hostgauge-card-title {
color: var(--hg-ink);
font-size: 15px;
font-weight: 900;
}
.hostgauge-card-title .dashicons {
background: #e8fbf4;
border: 1px solid #b8ecd7;
color: var(--hg-green);
font-size: 25px;
height: 38px;
line-height: 38px;
width: 38px;
}
.hostgauge-card:nth-child(2) .hostgauge-card-title .dashicons {
background: #fff6dc;
border-color: #efd586;
color: var(--hg-gold);
}
.hostgauge-card-value {
color: var(--hg-ink);
font-size: 34px;
font-weight: 950;
}
.hostgauge-card:first-child .hostgauge-card-value {
color: #02583a;
}
.hostgauge-card:nth-child(2) .hostgauge-card-value {
color: #5d4300;
}
.hostgauge-card-label,
.hostgauge-card-foot {
color: var(--hg-muted);
}
.hostgauge-panel {
padding: 24px;
}
.hostgauge-section-title {
border-bottom: 1px solid #e6eef5;
padding-bottom: 14px;
}
.hostgauge-section-title h2 {
color: var(--hg-ink);
font-size: 16px;
font-weight: 900;
}
.hostgauge-section-icon {
background: #e8f5ff;
border: 1px solid #bddcf7;
color: var(--hg-blue);
height: 32px;
line-height: 32px;
width: 32px;
}
.hostgauge-reading-row,
.hostgauge-summary > div,
.hostgauge-widget-row {
background: linear-gradient(180deg, #fbfdff, #f5f9fd);
border-color: #d8e4ee;
border-radius: 6px;
}
.hostgauge-reading-row b,
.hostgauge-summary strong {
color: #0b4f8a;
font-weight: 850;
}
.hostgauge-reading-note {
background: linear-gradient(90deg, #fff8e5, #fffdf6);
border-left-color: var(--hg-gold);
border-radius: 6px;
}
.hostgauge-scan-card {
background: linear-gradient(135deg, #eaf6ff, #f8fcff);
border-color: #afd6f9;
border-radius: 7px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
}
.hostgauge-scan-card .button-primary {
background: linear-gradient(135deg, #176eb3, #0f5f9f);
border-color: #0f5f9f;
border-radius: 7px;
box-shadow: 0 0 0 4px rgba(23, 110, 179, 0.12), 0 10px 20px rgba(15, 79, 138, 0.2);
color: #fff;
font-weight: 850;
min-height: 36px;
padding: 4px 15px;
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.hostgauge-scan-card .button-primary:hover {
background: linear-gradient(135deg, #0f5f9f, #0b4f8a);
border-color: #0b4f8a;
box-shadow: 0 0 0 5px rgba(23, 110, 179, 0.16), 0 12px 24px rgba(15, 79, 138, 0.24);
}
}
.hostgauge-pro-panel {
background:
radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.2), transparent 26%),
linear-gradient(135deg, #0e477d 0%, #176eb3 48%, #0b9a93 100%);
border: 0;
border-radius: 8px;
box-shadow: 0 18px 44px rgba(15, 79, 138, 0.22);
gap: 18px;
grid-template-columns: 1.4fr 1fr auto;
padding: 24px 26px;
}
.hostgauge-pro-panel::after {
display: none;
}
.hostgauge-pro-kicker {
color: #cbeeff;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.hostgauge-pro-panel h2 {
font-size: 19px;
font-weight: 900;
line-height: 1.2;
max-width: none;
}
.hostgauge-pro-panel p {
color: #eaf6ff;
font-size: 12px;
max-width: none;
}
.hostgauge-pro-trial {
background: rgba(255, 248, 229, 0.96);
border: 1px solid rgba(240, 214, 137, 0.86);
box-shadow: 0 7px 18px rgba(4, 36, 68, 0.12);
color: #805700;
margin: 0 0 1px;
padding: 6px 9px;
text-transform: none;
width: fit-content;
}
.hostgauge-pro-list {
background: transparent;
border: 0;
border-radius: 0;
gap: 7px;
padding: 0;
}
.hostgauge-pro-list li::before {
background: #ffcf38;
box-shadow: 0 0 0 4px rgba(255, 207, 56, 0.14);
}
.hostgauge-pro-panel .button {
border-radius: 6px;
box-shadow: 0 12px 24px rgba(4, 36, 68, 0.18);
font-weight: 850;
min-height: 0;
padding: 4px 15px;
}
.hostgauge-hub-card,
.hostgauge-panel,
.hostgauge-pro-panel {
animation: hostgauge-fade-ready 180ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.hostgauge-shell,
.hostgauge-hub-card,
.hostgauge-card,
.hostgauge-panel,
.hostgauge-pro-panel,
.hostgauge-meter-glow::after,
.hostgauge-meter-glow span,
.hostgauge-pro-panel::before,
.hostgauge-pro-panel::after {
animation: none !important;
}
.hostgauge-shell .button,
.hostgauge-shell button.button,
.hostgauge-shell a.button,
.hostgauge-card {
transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
}
@keyframes hostgauge-fade-ready {
from {
opacity: 0.001;
}
to {
opacity: 1;
}
}
@keyframes hostgauge-rise {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hostgauge-bar-breathe {
0% {
opacity: 0.58;
transform: scaleX(0.92);
}
50% {
opacity: 1;
transform: scaleX(1);
}
100% {
opacity: 0.58;
transform: scaleX(0.92);
}
}
@keyframes hostgauge-sheen {
0% {
transform: translateX(-120%);
}
52%,
100% {
transform: translateX(330%);
}
}
@media (max-width: 900px) {
.hostgauge-pro-panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 782px) {
.hostgauge-shell {
margin: 14px 0;
padding: 20px 16px;
}
.hostgauge-hub-card,
.hostgauge-scan-card {
align-items: stretch;
flex-direction: column;
}
.hostgauge-grid-two {
grid-template-columns: 1fr;
}
}