MediaWiki:Common.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* =====================================================
   ГЛАВНАЯ СТРАНИЦА: баннер и карточки серверов — TF2 стиль
   ===================================================== */

/* Главный баннер */
.main-banner {
	background: linear-gradient(180deg, #4a4436 0%, #3b372f 60%, #322e27 100%);
	border: 2px solid #171512;
	border-bottom: 4px solid #cf6a32;
	border-radius: 6px;
	padding: 40px;
	color: #f0e6d2;
	text-align: center;
	margin-bottom: 30px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.55);
	position: relative;
	overflow: hidden;
}

/* Диагональные полосы как на фоне loadout-экрана TF2 */
.main-banner::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: repeating-linear-gradient(45deg, rgba(207,106,50,.06) 0 12px, transparent 12px 24px);
	pointer-events: none;
}

.main-banner h1 {
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 2.5em;
	margin-bottom: 15px;
	color: #f0e6d2;
	text-shadow: 0 3px 0 rgba(0,0,0,.6);
	position: relative;
}

/* Карточки серверов */
.server-card {
	background: #3b372f;
	border: 2px solid #171512;
	border-radius: 6px;
	padding: 20px;
	margin: 15px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.45);
	transition: transform .2s ease, box-shadow .2s ease;
	border-left: 6px solid #cf6a32;
	color: #e8e0d0;
}

.server-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(207,106,50,.35);
}

.server-card.tf2 {
	border-left-color: #cf6a32;
	background: linear-gradient(to right, #46392c, #3b372f 45%);
}

.server-card.csgo {
	border-left-color: #4a90d9;
	background: linear-gradient(to right, #2e3a46, #3b372f 45%);
}

.server-card.css {
	border-left-color: #d9a441;
	background: linear-gradient(to right, #46402c, #3b372f 45%);
}

/* Заголовки внутри карточек */
.server-card h2, .server-card h3 {
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f0e6d2;
	border-bottom: 2px solid #4a4436;
	padding-bottom: 6px;
}

/* Список фич */
.feature-item {
	padding: 10px 0;
	border-bottom: 1px solid #2a2620;
	color: #cfb894;
}

.feature-item:last-child {
	border-bottom: none;
}

/* Кнопки в стиле меню TF2 */
.btn {
	display: inline-block;
	padding: 10px 24px;
	background: linear-gradient(180deg, #4a4436, #3b372f);
	border: 2px solid #171512;
	border-radius: 4px;
	color: #cfb894;
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	margin: 5px;
	transition: background .2s ease, color .2s ease, transform .1s ease;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.btn:hover {
	background: linear-gradient(180deg, #cf6a32, #a5521f);
	color: #fff;
}

.btn:active {
	transform: translateY(1px);
}

/* Анимация появления */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.main-content > div {
	animation: fadeIn 0.6s ease-out;
}