B4BY.588

: / home / sportmx / www / wp-content / plugins / cookie-notice / css /
Filename : admin-dashboard.css
back
/**
 * Compliance by Hu-manity.co — dashboard widget "protection scorecard".
 * Scoped under #cn_dashboard_stats so nothing leaks into other wp-admin widgets.
 * No web fonts: inherits the WordPress admin system stack.
 */

#cn_dashboard_stats .inside {
	margin: 0;
	padding: 0;
}

#cn_dashboard_stats .cn-sc {
	/* brand */
	--cn-brand: #20c19e;
	--cn-brand-ink: #0f8f74;
	--cn-brand-hover: #1baa8a;
	--cn-brand-wash: #e9f9f4;
	/* status palette (matches the settings page cards) */
	--cn-ok-dot: #16a34a;   --cn-ok-pill-bg: #dcfce7; --cn-ok-pill-txt: #15803d; --cn-ok-val: #111827;
	--cn-warn-dot: #d97706; --cn-warn-pill-bg: #fde68a; --cn-warn-pill-txt: #92400e; --cn-warn-val: #b45309;
	--cn-crit-dot: #ef4444; --cn-crit-pill-bg: #fee2e2; --cn-crit-pill-txt: #b91c1c; --cn-crit-val: #dc2626;
	--cn-crit-card-bg: #fff8f8; --cn-crit-border: #fecaca;
	--cn-off-dot: #d1d5db;  --cn-off-pill-bg: #f3f4f6; --cn-off-pill-txt: #6b7280; --cn-off-val: #9ca3af;
	/* neutral chrome */
	--cn-ink: #1d2327;
	--cn-muted: #646970;
	--cn-faint: #787c82;
	--cn-line: #dcdcde;
	--cn-line-soft: #f0f0f1;
	--cn-danger: #d63638;
}

/* ---------- hero ---------- */
#cn_dashboard_stats .cn-sc-hero {
	padding: 15px 16px;
	border-bottom: 1px solid var(--cn-line-soft);
	background: linear-gradient(180deg, var(--cn-brand-wash), #fff);
}
#cn_dashboard_stats .cn-sc-hero.hero--warn { background: linear-gradient(180deg, #fcf6e6, #fff); }
#cn_dashboard_stats .cn-sc-hero.hero--crit { background: linear-gradient(180deg, #fcebec, #fff); }
#cn_dashboard_stats .cn-sc-hero__top {
	display: flex;
	align-items: center;
	gap: 9px;
}
#cn_dashboard_stats .cn-sc-hero__grade {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cn-ink);
}
#cn_dashboard_stats .cn-sc-hero__gap {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 5px;
	white-space: nowrap;
}
#cn_dashboard_stats .gap--neutral { color: #50575e; background: #eef1f4; }
#cn_dashboard_stats .gap--good { color: var(--cn-ok-pill-txt); background: var(--cn-ok-pill-bg); }
#cn_dashboard_stats .gap--warn { color: var(--cn-warn-pill-txt); background: var(--cn-warn-pill-bg); }
#cn_dashboard_stats .gap--crit { color: var(--cn-crit-pill-txt); background: var(--cn-crit-pill-bg); }
#cn_dashboard_stats .cn-sc-hero p {
	margin: 7px 0 0;
	font-size: 12px;
	color: var(--cn-muted);
}

/* ---------- card grid ---------- */
#cn_dashboard_stats .cn-sc-grid {
	display: grid;
	gap: 12px;
	padding: 16px;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
#cn_dashboard_stats .cn-card {
	background: #fff;
	border: 1px solid var(--cn-line);
	border-radius: 10px;
	padding: 14px 15px;
	display: flex;
	flex-direction: column;
}
#cn_dashboard_stats .cn-card--crit {
	background: var(--cn-crit-card-bg);
	border-color: var(--cn-crit-border);
}
#cn_dashboard_stats .cn-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9px;
}
#cn_dashboard_stats .cn-card__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--cn-muted);
}
#cn_dashboard_stats .cn-card__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
#cn_dashboard_stats .dot--ok { background: var(--cn-ok-dot); }
#cn_dashboard_stats .dot--warn { background: var(--cn-warn-dot); }
#cn_dashboard_stats .dot--crit { background: var(--cn-crit-dot); }
#cn_dashboard_stats .dot--off { background: var(--cn-off-dot); }

#cn_dashboard_stats .cn-card__main {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 3px;
	letter-spacing: -.01em;
}
#cn_dashboard_stats .main--ok { color: var(--cn-ok-val); }
#cn_dashboard_stats .main--warn { color: var(--cn-warn-val); }
#cn_dashboard_stats .main--crit { color: var(--cn-crit-val); }
#cn_dashboard_stats .main--off { color: var(--cn-off-val); font-weight: 600; font-size: 18px; }

#cn_dashboard_stats .cn-card__bar-wrap {
	height: 5px;
	background: var(--cn-line-soft);
	border-radius: 3px;
	margin: 2px 0 9px;
	overflow: hidden;
}
#cn_dashboard_stats .cn-card__bar {
	height: 5px;
	width: 0; /* set by admin-dashboard.js from data-pct */
	border-radius: 3px;
	transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
#cn_dashboard_stats .bar--ok { background: var(--cn-brand); }
#cn_dashboard_stats .bar--warn { background: var(--cn-warn-dot); }
#cn_dashboard_stats .bar--crit { background: var(--cn-crit-dot); }

#cn_dashboard_stats .cn-card__sub {
	font-size: 11.5px;
	color: var(--cn-muted);
	line-height: 1.4;
	margin-bottom: 10px;
	flex: 1;
}
#cn_dashboard_stats .cn-card__sub b { color: var(--cn-ink); }
#cn_dashboard_stats .cn-card--crit .cn-card__sub b { color: var(--cn-crit-val); }

#cn_dashboard_stats .cn-card__pill {
	align-self: flex-start;
	margin-top: auto;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 10px;
	margin-bottom: 0;
}
#cn_dashboard_stats .cn-card__pill + .cn-card__foot { margin-top: 9px; }
#cn_dashboard_stats .pill--ok { background: var(--cn-ok-pill-bg); color: var(--cn-ok-pill-txt); }
#cn_dashboard_stats .pill--warn { background: var(--cn-warn-pill-bg); color: var(--cn-warn-pill-txt); }
#cn_dashboard_stats .pill--crit { background: var(--cn-crit-pill-bg); color: var(--cn-crit-pill-txt); }
#cn_dashboard_stats .pill--off { background: var(--cn-off-pill-bg); color: var(--cn-off-pill-txt); }
#cn_dashboard_stats .pill--pro {
	background: linear-gradient(135deg, var(--cn-brand), var(--cn-brand-ink));
	color: #fff;
	letter-spacing: .05em;
	text-transform: uppercase;
}

#cn_dashboard_stats .cn-card__foot {
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid var(--cn-line-soft);
}
#cn_dashboard_stats .cn-card__foot a {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--cn-brand-ink);
	text-decoration: none;
}
#cn_dashboard_stats .cn-card__foot a:hover { text-decoration: underline; }

/* ---------- primary CTA ---------- */
#cn_dashboard_stats .cn-sc-cta { padding: 0 16px 16px; }
#cn_dashboard_stats .cn-sc-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--cn-brand);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 13px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(32, 193, 158, .32);
	transition: transform .15s, background .15s;
}
#cn_dashboard_stats .cn-sc-cta__btn:hover { transform: translateY(-1px); background: var(--cn-brand-hover); color: #fff; }
#cn_dashboard_stats .cn-sc-cta__btn.is-danger { background: var(--cn-danger); box-shadow: 0 4px 14px rgba(214, 54, 56, .32); }
#cn_dashboard_stats .cn-sc-cta__btn.is-danger:hover { background: #b32d2e; }
#cn_dashboard_stats .cn-sc-cta small {
	display: block;
	text-align: center;
	color: var(--cn-faint);
	font-size: 11px;
	margin-top: 9px;
}

#cn_dashboard_stats .cn-sc-foot { padding: 0 16px 16px; text-align: center; }
#cn_dashboard_stats .cn-sc-foot a {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cn-brand-ink);
	text-decoration: none;
}
#cn_dashboard_stats .cn-sc-foot a:hover { text-decoration: underline; }

/* ---------- analytics (collapsible) ---------- */
#cn_dashboard_stats .cn-sc-analytics {
	border-top: 1px solid var(--cn-line-soft);
}
#cn_dashboard_stats .cn-sc-analytics__summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cn-ink);
}
#cn_dashboard_stats .cn-sc-analytics__summary::-webkit-details-marker { display: none; }
#cn_dashboard_stats .cn-sc-analytics__summary::after {
	content: "\f140";
	font: normal 18px/1 dashicons;
	float: right;
	color: var(--cn-faint);
}
#cn_dashboard_stats details[open] .cn-sc-analytics__summary::after { content: "\f142"; }
#cn_dashboard_stats .cn-sc-analytics__body { padding: 0 16px 16px; }
#cn_dashboard_stats .cn-legend {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
#cn_dashboard_stats .cn-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--cn-muted);
}
#cn_dashboard_stats .cn-legend i {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	display: inline-block;
}
#cn_dashboard_stats .cn-legend .lvl1 { background: #c4c4c4; }
#cn_dashboard_stats .cn-legend .lvl2 { background: #d5b565; }
#cn_dashboard_stats .cn-legend .lvl3 { background: #9891b1; }
#cn_dashboard_stats .cn-chart-wrap {
	position: relative;
	height: 150px;
	margin-bottom: 10px;
}