MediaWiki:DestaqueCard.css - Revision history

Noorisei at 12:26, 2 January 2026

2026-01-02T12:26:59Z

← Older revision		Revision as of 08:26, 2 January 2026
Line 11:		Line 11:

	.destaque-card {		.destaque-card {
	background: ~~#ffffff~~;		background: var(--bg-1);
	border: 2px solid ~~rgba~~(~~255, 107, 157, 0.18~~);		border: 2px solid var(--border);
	border-radius: 15px;		border-radius: 15px;
	padding: 12px;		padding: 12px;
Line 26:		Line 26:
	overflow: hidden;		overflow: hidden;
	cursor: pointer;		cursor: pointer;
	box-shadow: 0 6px 24px ~~rgba~~(~~255, 79, 145, 0.18~~);		box-shadow: 0 6px 24px var(--shadow-soft);
	}		}

Line 37:		Line 37:
	.destaque-card[data-tab-trigger]:hover {		.destaque-card[data-tab-trigger]:hover {
	transform: translateY(-5px);		transform: translateY(-5px);
	box-shadow: 0 12px 36px ~~rgba~~(~~255, 107, 157, 0.25~~);		box-shadow: 0 12px 36px var(--shadow-medium);
	border-color: ~~rgba~~(~~255, 111, 163, 0.7~~);		border-color: var(--border-strong);
	}		}

	.destaque-card[data-link] .destaque-text h3,		.destaque-card[data-link] .destaque-text h3,
	.destaque-card[data-tab-trigger] .destaque-text h3 {		.destaque-card[data-tab-trigger] .destaque-text h3 {
	color: ~~#ff6b9d~~;		color: var(--primary);
	}		}

	.destaque-card[data-link]:hover .destaque-text h3,		.destaque-card[data-link]:hover .destaque-text h3,
	.destaque-card[data-tab-trigger]:hover .destaque-text h3 {		.destaque-card[data-tab-trigger]:hover .destaque-text h3 {
	color: ~~#d63384~~;		color: var(--heading);
	}		}

			.destaque-card[data-link] *,
			.destaque-card[data-tab-trigger] * {
			pointer-events: none;
			}

	.destaque-image {		.destaque-image {
Line 79:		Line 83:

	.destaque-text h3 {		.destaque-text h3 {
	color: ~~#ff6b9d~~;		color: var(--primary);
	font-weight: bold;		font-weight: bold;
	margin: 0;		margin: 0;
Line 86:		Line 90:

	.destaque-text p {		.destaque-text p {
	color: ~~#ff6b9d~~;		color: var(--text-muted);
	font-size: 0.9em;		font-size: 0.9em;
	line-height: 1.4;		line-height: 1.4;
Line 100:		Line 104:
	width: 200%;		width: 200%;
	height: 200%;		height: 200%;
	background: ~~#ff6b9d~~;		background: var(--primary);
	opacity: 0;		opacity: 0;
	transition: opacity 0.3s ease;		transition: opacity 0.3s ease;
Line 112:		Line 116:
	.destaque-card:hover {		.destaque-card:hover {
	transform: translateY(-5px);		transform: translateY(-5px);
	box-shadow: 0 12px 36px ~~rgba~~(~~255, 107, 157, 0.25);~~		box-shadow: 0 12px 36px var(--shadow-medium);
	~~border~~-~~color: rgba(255, 111, 163, 0.7);~~		border-color: var(--border-strong);
	}

	~~html[data~~-~~theme="dark"] .destaque-card {~~
	~~background: linear~~-~~gradient(135deg, rgba(39,76,119,.12), rgba(39,76,119,.06));~~
	~~border: 1px solid rgba(159,208,255,.18~~);
	border-~~left: 4px solid #7bbbff;~~
	~~box-shadow: 0 6px 24px rgba(123,187,255,.18);~~
	color: ~~#cfe6ff;~~
	}

	~~html[data-theme="dark"] .destaque-card:hover {~~
	~~transform: translateY~~(-~~5px);~~
	~~box~~-~~shadow: 0 12px 36px rgba(123,187,255,.25);~~
	border-~~color: rgba(159,208,255,.35);~~
	}

	~~html[data-theme="dark"] .destaque-card::before {~~
	~~background: linear-gradient(135deg, #7bbbff, #a2d3ff);~~
	}

	~~html[data-theme="dark"] .destaque-card:hover::before {~~
	~~opacity: 0.12;~~
	}

	~~html[data-theme="dark"] .destaque-text h3 {~~
	~~color: #cfe6ff;~~
	}

	~~html[data-theme="dark"] .destaque-text p {~~
	~~color: #a8c6e8;~~
	}

	~~html[data-theme="dark"] .destaque-text li {~~
	~~color: #a8c6e8;~~
	}

	~~@media (min-width: 1400px) {~~
	~~.destaques-grid { max-width: 1400px; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 18px }~~
	~~.destaque-card { min-height: 260px; padding: 14px }~~
	}
	~~@media (max-width: 992px) {~~
	~~.destaques-grid { grid-template-columns: repeat(2, 1fr) }~~
	}
	~~@media (max-width: 576px~~) {
	~~.destaques-grid { grid-template-columns: 1fr }~~
	~~.destaque-image { max-width: 160px~~; ~~height: 120px }~~
	}		}

Noorisei at 07:09, 16 December 2025

2025-12-16T07:09:10Z

← Older revision		Revision as of 03:09, 16 December 2025
Line 51:		Line 51:
	}		}

	~~.destaque-card[data-link] *,~~
	~~.destaque-card[data-tab-trigger] * {~~
	~~pointer-events: none;~~
	}

	.destaque-image {		.destaque-image {

Noorisei: Created page with "/* [DESTAQUE CARDS] HOLOGRAMSIE SERVICE CARDS */ .destaques-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 30px auto; padding: 0 20px; max-width: 1200px; width: 100%; } .destaque-card { background: #ffffff; border: 2px solid rgba(255, 107, 157, 0.18); border-radius: 15px; padding: 12px; text-align: center; transition: all 0.3s ease; min-height: 250px; display: flex; flex-direction: co..."

2025-12-16T07:08:20Z

Created page with "[DESTAQUE CARDS] HOLOGRAMSIE SERVICE CARDS: .destaques-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 30px auto; padding: 0 20px; max-width: 1200px; width: 100%; } .destaque-card { background: #ffffff; border: 2px solid rgba(255, 107, 157, 0.18); border-radius: 15px; padding: 12px; text-align: center; transition: all 0.3s ease; min-height: 250px; display: flex; flex-direction: co..."

New page

/* [DESTAQUE CARDS] HOLOGRAMSIE SERVICE CARDS */
.destaques-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 30px auto;
padding: 0 20px;
max-width: 1200px;
width: 100%;
}

.destaque-card {
background: #ffffff;
border: 2px solid rgba(255, 107, 157, 0.18);
border-radius: 15px;
padding: 12px;
text-align: center;
transition: all 0.3s ease;
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: 0 6px 24px rgba(255, 79, 145, 0.18);
}

.destaque-card[data-link],
.destaque-card[data-tab-trigger] {
cursor: pointer;
}

.destaque-card[data-link]:hover,
.destaque-card[data-tab-trigger]:hover {
transform: translateY(-5px);
box-shadow: 0 12px 36px rgba(255, 107, 157, 0.25);
border-color: rgba(255, 111, 163, 0.7);
}

.destaque-card[data-link] .destaque-text h3,
.destaque-card[data-tab-trigger] .destaque-text h3 {
color: #ff6b9d;
}

.destaque-card[data-link]:hover .destaque-text h3,
.destaque-card[data-tab-trigger]:hover .destaque-text h3 {
color: #d63384;
}

.destaque-card[data-link] *,
.destaque-card[data-tab-trigger] * {
pointer-events: none;
}

.destaque-image {
width: 100%;
max-width: 180px;
height: 140px;
overflow: hidden;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.destaque-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}

.destaque-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}

.destaque-text h3 {
color: #ff6b9d;
font-weight: bold;
margin: 0;
line-height: 1.2;
}

.destaque-text p {
color: #ff6b9d;
font-size: 0.9em;
line-height: 1.4;
margin: 0;
opacity: 0.8;
}

.destaque-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: #ff6b9d;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}

.destaque-card:hover::before {
opacity: 0.1;
}

.destaque-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 36px rgba(255, 107, 157, 0.25);
border-color: rgba(255, 111, 163, 0.7);
}

html[data-theme="dark"] .destaque-card {
background: linear-gradient(135deg, rgba(39,76,119,.12), rgba(39,76,119,.06));
border: 1px solid rgba(159,208,255,.18);
border-left: 4px solid #7bbbff;
box-shadow: 0 6px 24px rgba(123,187,255,.18);
color: #cfe6ff;
}

html[data-theme="dark"] .destaque-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 36px rgba(123,187,255,.25);
border-color: rgba(159,208,255,.35);
}

html[data-theme="dark"] .destaque-card::before {
background: linear-gradient(135deg, #7bbbff, #a2d3ff);
}

html[data-theme="dark"] .destaque-card:hover::before {
opacity: 0.12;
}

html[data-theme="dark"] .destaque-text h3 {
color: #cfe6ff;
}

html[data-theme="dark"] .destaque-text p {
color: #a8c6e8;
}

html[data-theme="dark"] .destaque-text li {
color: #a8c6e8;
}

@media (min-width: 1400px) {
.destaques-grid { max-width: 1400px; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 18px }
.destaque-card { min-height: 260px; padding: 14px }
}
@media (max-width: 992px) {
.destaques-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px) {
.destaques-grid { grid-template-columns: 1fr }
.destaque-image { max-width: 160px; height: 120px }
}