Predefinição:Infobox Sistema/styles.css

/* =========================================================
   SPLIXMMO WIKI
   INFOBOX — SISTEMA
   ========================================================= */

.splix-infobox-sistema {
	float: right;

	width: 320px;

	margin: 0 0 24px 32px;

	background: #ffffff;

	border: 1px solid #dbeaf1;

	border-radius: 18px;

	overflow: hidden;

	box-shadow:
		0 10px 30px rgba(59, 122, 154, 0.10);

	color: #29445f;
}


/* =========================================================
   LIMPEZA DO PARSER
   ========================================================= */

.splix-infobox-sistema p {
	margin: 0 !important;
	padding: 0 !important;
}

.splix-infobox-sistema br {
	display: none;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.splix-infobox-sistema .splix-infobox-header {
	padding: 16px 18px 15px;

	text-align: center;

	background:
		linear-gradient(
			135deg,
			#4bbcff 0%,
			#71d2df 48%,
			#b7a5ff 100%
		);
}

.splix-infobox-sistema .splix-infobox-title {
	color: #ffffff;

	font-size: 20px;

	font-weight: 800;

	line-height: 1.2;

	text-shadow:
		0 1px 2px rgba(44, 85, 122, 0.16);
}

.splix-infobox-sistema .splix-infobox-subtitle {
	margin-top: 4px;

	color: rgba(255, 255, 255, 0.92);

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}


/* =========================================================
   IMAGEM
   ========================================================= */

.splix-infobox-sistema .splix-infobox-image {
	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	background:
		linear-gradient(
			180deg,
			#f7fcff,
			#ffffff
		);

	border-bottom:
		1px solid #e2edf3;
}

.splix-infobox-sistema .splix-infobox-image img {
	display: block;

	max-width: 220px;

	max-height: 180px;

	width: auto;

	height: auto;

	object-fit: contain;

	border-radius: 10px;
}


/* =========================================================
   CORPO
   ========================================================= */

.splix-infobox-sistema .splix-infobox-body {
	display: block;

	background: #ffffff;
}


/* =========================================================
   LINHAS
   ========================================================= */

.splix-infobox-sistema .splix-infobox-row {
	display: grid;

	grid-template-columns:
		112px minmax(0, 1fr);

	min-height: 38px;

	border-bottom:
		1px solid #e5eef3;
}

.splix-infobox-sistema .splix-infobox-label {
	display: flex;

	align-items: center;

	padding: 8px 11px;

	background: #eff8fb;

	color: #486f86;

	font-size: 12px;

	font-weight: 800;

	line-height: 1.3;
}

.splix-infobox-sistema .splix-infobox-value {
	display: flex;

	align-items: center;

	padding: 8px 12px;

	background: #ffffff;

	color: #36566e;

	font-size: 12.5px;

	line-height: 1.4;

	overflow-wrap: anywhere;
}

.splix-infobox-sistema .splix-infobox-value a {
	color: #259ee8;

	font-weight: 700;

	text-decoration: none;
}


/* =========================================================
   SEÇÕES
   ========================================================= */

.splix-infobox-sistema .splix-infobox-section {
	border-top:
		1px solid #e2edf3;
}

.splix-infobox-sistema .splix-infobox-section-title {
	padding: 8px 12px;

	background:
		linear-gradient(
			90deg,
			#edf9ff,
			#f5f2ff
		);

	color: #497b99;

	font-size: 11px;

	font-weight: 900;

	letter-spacing: 0.09em;

	text-transform: uppercase;
}

.splix-infobox-sistema .splix-infobox-section-content {
	padding: 11px 14px;

	background: #ffffff;

	color: #466177;

	font-size: 12.5px;

	line-height: 1.55;
}

.splix-infobox-sistema .splix-infobox-section-content ul {
	margin: 0;

	padding-left: 18px;
}

.splix-infobox-sistema .splix-infobox-section-content li {
	margin: 3px 0;
}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

.splix-infobox-sistema .splix-infobox-description {
	padding: 14px 16px;

	background:
		linear-gradient(
			135deg,
			#f5fbff,
			#faf8ff
		);

	color: #587187;

	font-size: 12.5px;

	line-height: 1.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {

	.splix-infobox-sistema {
		float: none;

		width: 100%;

		margin: 0 0 24px 0;
	}

	.splix-infobox-sistema .splix-infobox-row {
		grid-template-columns:
			108px minmax(0, 1fr);
	}

}