[html]<style>
/* === ОБЩИЕ СТИЛИ === */
.houses-wrapper {
background-color: #d1d4d1;
padding: 30px;
font-family: 'Trebuchet MS', Arial, sans-serif;
color: #333;
border-radius: 8px;
max-width: 1200px;
margin: 0 auto;
}
.houses-header {
text-align: center;
margin-bottom: 30px;
}
.houses-header h3 {
color: #983e3e;
font-size: 24px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.houses-header p {
color: #555;
margin: 0;
font-size: 14px;
}
/* === СЕТКА === */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px 40px;
}
.grid-container-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 40px;
}
.grid-container-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px 40px;
}
@media (max-width: 800px) {
.grid-container-2col, .grid-container-3col {
grid-template-columns: 1fr;
}
}
/* === ЧЕХОЛ ДЛЯ КАРТОЧКИ И ЗАКЛАДКИ === */
.card-wrapper {
position: relative;
display: flex;
flex-direction: column;
z-index: 1;
}
/* Поднимаем только карточку, когда мышка где-угодно внутри чехла (на карточке или закладке) */
.card-wrapper:hover .house-card {
transform: translateY(-5px);
box-shadow: 4px 8px 15px rgba(0,0,0,0.1);
}
/* === САМА КАРТОЧКА === */
.house-card {
background-color: #f0f0f0;
border: 1px solid #b5b5b5;
border-radius: 4px; /* Безупречные углы */
overflow: hidden; /* Срезаем всё лишнее */
position: relative;
z-index: 2; /* КРИТИЧНО: Карточка лежит поверх закладки */
box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
flex-grow: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* === ЗАКЛАДКА С ПРОФИЛЕМ (ТОНКАЯ И ЧЕТКАЯ) === */
.leader-tab {
display: inline-block;
position: absolute;
top: 30px;
left: 100%;
z-index: 1;
background-color: #88A19D;
color: #ffffff !important;
/* Специальный шрифт и сглаживание для идеальной читаемости боком */
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
/* Делаем закладку более изящной и тонкой */
padding: 4px 15px 8px 15px;
border-radius: 6px 6px 0 0;
border: 1px solid #b5b5b5;
border-bottom: none;
box-shadow: 2px -4px 5px rgba(0,0,0,0.05);
/* Поворот и выдвижение. translateZ(0) убирает мыло шрифта */
transform-origin: top left;
transform: rotate(90deg) translateY(-20px) translateZ(0);
transition: transform 0.3s ease-out, background-color 0.3s ease !important;
text-align: center;
min-width: 80px;
white-space: nowrap;
}
.leader-tab:hover {
/* Выезжает вправо только при наведении на саму закладку */
transform: rotate(90deg) translateY(-23px) translateZ(0);
background-color: #983e3e !important;
}
/* СТИЛИ ЗАГОЛОВКОВ */
.card-title-house, .card-title-pillar, .card-title-special {
color: #ffffff;
text-align: center;
padding: 10px 10px 5px 10px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
}
.card-title-house { background-color: #983e3e; }
.card-title-pillar { background-color: #4a5759; font-size: 15px; }
.card-title-special { background-color: #3d3f3d; font-size: 15px; }
.card-subtitle-house, .card-subtitle-pillar, .card-subtitle-special {
text-align: center;
font-size: 11px;
font-style: italic;
}
.card-subtitle-house { background-color: #983e3e; color: #d1d4d1; padding: 0 10px 10px 10px; }
.card-subtitle-pillar { background-color: #4a5759; color: #d1d4d1; padding: 0 10px 10px 10px; }
.card-subtitle-special { background-color: #e5cdcd; color: #2b2b2b; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #d4a9a9; font-style: normal; }
.special-services-banner {
background: #3d3f3d;
color: #ffffff;
text-align: center;
padding: 12px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
border-radius: 4px;
margin-top: 50px;
margin-bottom: 20px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}
.special-services-banner span {
display: block;
font-size: 13px;
font-weight: normal;
margin-top: 5px;
text-transform: none;
color: #d1d4d1;
}
/* ТЕЛО КАРТОЧКИ */
.card-body {
padding: 15px;
line-height: 1.5;
flex-grow: 1;
}
.card-row { margin-bottom: 10px; }
.card-row:last-child { margin-bottom: 0; }
.card-row p { padding: 0px !important; margin: 0; }
.accent { color: #983e3e; font-weight: bold; }
.house-card .divider {
height: 1px;
background-color: #dcdcdc;
margin: 10px 0;
}
</style>
<div class="houses-wrapper">
<div class="houses-header">
<h3>Великие Дома</h3>
<p>Наследственные Опоры Свода Единства</p>
</div>
<div class="grid-container-2col">
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Рубина</div>
<div class="card-subtitle-house">Великий Лорд Северо-Востока</div>
<div class="card-title-pillar">Опора Защиты</div>
<div class="card-subtitle-pillar">Претор Щитов, Хранитель Защиты</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> наемники (отряды, телохранители, охрана). Кузни, тяжелые оружейники и бронники. Школы и наставники фехтования.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> обеспечение армии, контракты ВПК (тяжелое вооружение и броня). Жандармерия и стража.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Обсидиана</div>
<div class="card-subtitle-house">Великий Лорд Юга</div>
<div class="card-title-pillar">Опора Слова</div>
<div class="card-subtitle-pillar">Претор Оков, Хранитель Права</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> лучшие юристы (адвокаты, прокуроры, нотариусы). Ложа Слова: переводчики и посредники. Тайно: наемные убийцы.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> следствие и процесс вплоть до вынесения вердикта королевским судьей. Делопроизводство и переводы документов.</p></div>
</div>
</div>
<a href="/profile.php?id=621" target="_blank" class="leader-tab">Серапис</a>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Изумруда</div>
<div class="card-subtitle-house">Великая Леди Востока</div>
<div class="card-title-pillar">Опора Приручения</div>
<div class="card-subtitle-pillar">Претор Хлыстов, Хранитель Приручения</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> разведение животных, выведение новых (генная маго-химия). Дрессура и выучка, тренеры, наездники, возницы.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> животноводство, обеспечение кавалерии, монаршие конюшни, контроль квот на магических тварей.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Аметиста</div>
<div class="card-subtitle-house">Великий Лорд Юго-Востока</div>
<div class="card-title-pillar">Опора Магии</div>
<div class="card-subtitle-pillar">Претор Тиглей, Хранитель Магии</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> коммерческая магия и алхимия (артефакты, зелья, реактивы, яды). Погодные Техники. Сейфы и охранная магия.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> контроль прикладных чар, лицензии. Разработка оружия. Военное и экономическое изменение климата.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Жемчуга</div>
<div class="card-subtitle-house">Великий Лорд Северо-Запада</div>
<div class="card-title-pillar">Опора Здравия</div>
<div class="card-subtitle-pillar">Претор Ланцетов, Хранитель Здравия</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> здоровье тела и духа. Медицина (лекари, травники, целители). Рекреация (здравницы, минеральные источники).</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> здравоохранение, госпитали, карантины, военные медики, сертификация лекарей, надзор за ментальным уроном.</p></div>
</div>
</div>
<a href="/profile.php?id=445" target="_blank" class="leader-tab">Каллиан</a>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Турмалина</div>
<div class="card-subtitle-house">Великий Лорд Юго-Запада</div>
<div class="card-title-pillar">Опора Гостеприимства</div>
<div class="card-subtitle-pillar">Претор Весов, Хранитель Гостеприимства</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> таверны, ресторации, ярмарки; игорные клубы, курильни, дома утех. Ростовщичество и откупы.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> фискальный надзор рынков, физический сбор торговых пошлин, контроль правил торговли, аналитика.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Яшмы</div>
<div class="card-subtitle-house">Великая Леди Запада</div>
<div class="card-title-pillar">Опора Ремесел</div>
<div class="card-subtitle-pillar">Претор Багров, Хранитель Ремесел</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> изготовление и починка сложных предметов. Инженеры, лудильщики и корабелы, гражданские и торговые перевозки по морю.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> государственная инженерия, верфи Короны, разработка технологий флота, портовая инфраструктура.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-house">Дом Сапфира</div>
<div class="card-subtitle-house">Великий Лорд Севера (расформировано)</div>
<div class="card-title-pillar">Опора Поиска</div>
<div class="card-subtitle-pillar">Претор Силков, Хранитель Поиска</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Деятельность:</span> элитные следопыты, егеря-диверсанты, проводники. Выслеживание и отлов особо опасных целей (зверей и разумных); добыча редких материалов. Ложа Навигаторов.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Министерство:</span> надзор за дальними рубежами, глубинная разведка. Исследовательские экспедиции, картография.</p></div>
</div>
</div>
</div>
</div>
<div class="houses-header header-diamond" style="margin-top: 50px;">
<h3>Алмазный Дом</h3>
<p>Министры, назначаемые короной (Первая и Вторая Квадры Опор)</p>
</div>
<div class="grid-container-2col">
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Войны</div>
<div class="card-subtitle-pillar">Претор Мечей, Хранитель Войны</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> военное командование, Генштаб, стратегия, передвижение легионов, призыв, закупка вооружения.</p></div>
<div class="divider"></div>
<div class="card-row"><p><b>Бастион Войны</b> — главная военная академия страны.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Дипломатии</div>
<div class="card-subtitle-pillar">Претор Печатей, Хранитель Дипломатии</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> подготовка и прием послов (внутренних и внешних). Переговорщики, агентурные сети, полит разведка.</p></div>
<div class="divider"></div>
<div class="card-row"><p><b>Бастион Дипломатии</b> — академия политиков и придворных.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Знаний</div>
<div class="card-subtitle-pillar">Претор Скрижалей, Хранитель Знаний</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> наука и искусство (неразделимы для солари). Просвещение и образование. Книгопечатание, летописание, государственные Центральные Архивы и цензура.</p></div>
<div class="divider"></div>
<div class="card-row"><p><b>Бастион Знаний</b> — светская академия наук и искусств.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Традиций</div>
<div class="card-subtitle-pillar">Претор Пепла, Хранитель Традиций</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> идеологический и религиозно-социальный контроль, надзор за соблюдением устоев. Закрытые Скриптории, духовное наследие. Погребальный культ и некрополи.</p></div>
<div class="divider"></div>
<div class="card-row"><p><b>Помнящие</b> — живые библиотеки, "полиция нравов и традиций".</p></div>
</div>
</div>
<a href="/profile.php?id=" target="_blank" class="leader-tab">XII Строф</a>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Урожая</div>
<div class="card-subtitle-pillar">Претор Серпов, Хранитель Урожая</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> аграрное дело, продовольственная безопасность, квоты на посев или экспорт (зерна, вина, чая и прочих культур).</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Казны</div>
<div class="card-subtitle-pillar">Претор Чеканов, Хранитель Казны</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> казначейство, чеканка монет, бюджет империи, сбор налогов. Учет рабов. Имперский банк, векселя Короны. Аудит Домов.</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Недр</div>
<div class="card-subtitle-pillar">Претор Горнов, Хранитель Недр</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> добыча природных ресурсов, государственные шахты и каменоломни, контроль сырьевого рынка. Геологоразведка (поиск новых месторождений).</p></div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-pillar">Опора Путей и Твердынь</div>
<div class="card-subtitle-pillar">Претор Вех, Хранитель Путей и Твердынь</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Министерство:</span> инфраструктура и строительство (тракты, мосты, дворцы, форпосты). Военная инженерия (саперы, осадные орудия). Сеть сообщения: лицензии перевозок, дилижансы, гонцы.</p></div>
</div>
</div>
</div>
</div>
<div class="special-services-banner">
Особые Службы
<span>Стоят над законом и Сводом Единства. Напрямую подчиняются Королю-Фениксу</span>
</div>
<div class="grid-container-3col">
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-special">Янтарная тысяча</div>
<div class="card-subtitle-special">гос.безопасность, инквизиция</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Сфера:</span> тайный сыск, шпионаж, разведка и контрразведка, выявление заговоров.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Дополнительно:</span> борьба с ересью и крамолой, контроль образования. Надзор за лордами и министрами.</p></div>
</div>
</div>
<a href="/profile.php?id=831" target="_blank" class="leader-tab">Асмодей</a>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-special">Алмазная тысяча</div>
<div class="card-subtitle-special">королевская гвардия</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Сфера:</span> элита рыцарства, абсолютная преданность короне, безопасность монаршей семьи.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Дополнительно:</span> также личная мобильная армия короля (Белая Армия).</p></div>
</div>
</div>
<a href="/profile.php?id=445" target="_blank" class="leader-tab">Каллиан</a>
</div>
<div class="card-wrapper">
<div class="house-card">
<div class="card-title-special">Аметистовая тысяча</div>
<div class="card-subtitle-special">королевские маги и алхимики</div>
<div class="card-body">
<div class="card-row"><p><span class="accent">Сфера:</span> алхимики и маги-особисты на прямой королевской службе. Секретные лаборатории, особые разработки.</p></div>
<div class="divider"></div>
<div class="card-row"><p><span class="accent">Дополнительно:</span> выполняют специфические задачи в обход князей.</p></div>
</div>
</div>
</div>
</div>
</div>[/html][hideprofile]
- Подпись автора
это НЕ динозавр, а дракон!
Нет, он НЕ розовый,
а АЛМАЗНО-КРЫЛЫЙ! | 
III / X
|
X
