МНОГО ЧЕГО ХОЧУ УВИДЕТЬ
Предисловие: каждый персонаж может быть в той или иной мере адаптирован под задумку откликнувшегося игрока, мои требования к персонажам довольно размытые, а несменяемые параметры указаны в комментариях к каждому из героев. Помимо уже обещанного в каждом отдельном случае, я ручаюсь оказать логическую и информативную поддержку во всех начинаниях, а если Вы
будете достаточно активны - я буду рад и дальше рисовать выбранных персонажей, кидаться в вас подарками местного мыслетворчества.
А теперь о реальном пороге входа в роль: Я жду пост раз в неделю (Куда угодно, хоть в ау, хоть на твине. Главное - присутствие на форуме.), а также запрещаю использовать аниме внешности (за редчайшим исключением).
Персонажи могут быть использованы в качестве НПС или упоминаться в эпизодах.
[html]<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
/* GOTHIC THEME CONSTANTS */
.ls-pure-wrapper {
--gold: #c5a059;
--gold-dim: #8c6d2d;
--crimson: #8b0000;
--crimson-glow: #ff0000;
--bg-dark: #050101;
--card-bg: #0a0505;
all: initial;
display: block !important;
width: 100%;
height: 700px; /* Reduced from 800px */
background: var(--bg-dark) !important;
background-image: radial-gradient(circle at center, #2b0000 0%, #050101 100%) !important;
border: 2px solid var(--gold) !important;
position: relative;
overflow: hidden;
font-family: 'Inter', sans-serif !important;
color: #fff !important;
direction: ltr !important;
box-sizing: border-box !important;
z-index: 1 !important;
margin: 0 auto !important;
}
.ls-pure-wrapper * { box-sizing: border-box !important; }
/* NUCLEAR RESET FOR FORUM INTERFERENCE */
.ls-tree ul, .ls-tree li {
border: 0 !important;
background: none !important;
box-shadow: none !important;
outline: none !important;
margin: 0 !important;
list-style: none !important;
text-indent: 0 !important;
padding: 0 !important;
}
/* ATMOSPHERIC EMBER ANIMATION */
.ls-embers {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.ls-embers::before {
content: '';
position: absolute;
width: 2px;
height: 2px;
background: white;
box-shadow: 100px 800px #ff4500, 300px 900px #ff0000, 500px 750px #ffa500, 700px 850px #ff4500, 900px 950px #ff0000;
animation: rise 10s infinite linear;
opacity: 0.2;
}
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(-1000px); } }
/* HIDDEN RADIOS */
.ls-logic { display: none !important; position: absolute; visibility: hidden; }
/* HEADER */
.ls-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 0 0 40px;
z-index: 100 !important;
pointer-events: none;
display: block !important;
}
.ls-header h1 {
display: block !important;
font-family: 'Cinzel', serif !important;
font-size: 38px !important;
font-weight: 900 !important;
color: #fff !important;
margin: 0 !important;
letter-spacing: 8px !important;
line-height: 1 !important;
text-shadow: 0 0 20px var(--crimson-glow);
text-transform: uppercase;
}
.ls-header p {
display: block !important;
font-size: 12px !important;
color: var(--gold) !important;
letter-spacing: 6px !important;
margin: 15px 0 0 0 !important;
text-transform: uppercase !important;
font-weight: bold !important;
border-left: 3px solid var(--crimson);
padding-left: 15px;
}
/* VIEWPORT - Corrected Centering */
.ls-viewport {
width: 100%;
height: 100%;
overflow: auto;
padding-top: 150px;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
scrollbar-color: var(--crimson) var(--bg-dark);
}
/* THE TREE - REFINED CENTERING */
.ls-tree-container {
display: flex !important;
justify-content: center !important;
flex-shrink: 0;
transform: scale(0.65);
transform-origin: top center;
white-space: nowrap !important;
padding-bottom: 80px; /* Reduced from 400px to limit scroll space */
margin: 0 -25%;
}
.ls-tree, .ls-tree ul {
display: flex !important;
justify-content: center !important;
}
.ls-tree ul {
padding-top: 40px !important;
position: relative;
}
/* Vertical line from parent down to branch */
.ls-tree ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid var(--crimson);
width: 0;
height: 40px;
box-shadow: 0 0 5px var(--crimson);
z-index: 1;
}
.ls-tree > ul::before { display: none !important; }
.ls-tree li {
padding: 40px 15px 0 15px !important;
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.ls-tree li::before, .ls-tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid var(--crimson);
width: 50%;
height: 40px;
z-index: 1;
}
.ls-tree li::after {
right: auto;
left: 50%;
border-left: 2px solid var(--crimson);
}
.ls-tree li:only-child::after, .ls-tree li:only-child::before { display: none !important; }
.ls-tree li:only-child { padding-top: 0 !important; }
.ls-tree li:first-child::before, .ls-tree li:last-child::after { border: 0 none !important; }
.ls-tree li:last-child::before { border-right: 2px solid var(--crimson); border-radius: 0 5px 0 0; }
.ls-tree li:first-child::after { border-radius: 5px 0 0 0; }
.ls-tree .has-children > .ls-card::after {
content: '';
position: absolute;
bottom: -40px;
left: 50%;
width: 0;
height: 40px;
border-left: 2px solid var(--crimson);
box-shadow: 0 0 5px var(--crimson);
z-index: 1;
}
/* CARD DESIGN */
.ls-card {
width: 125px;
background: var(--card-bg) !important;
border: 1px solid var(--crimson) !important;
padding: 8px !important;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 10;
display: block !important;
box-shadow: 0 0 10px rgba(139, 0, 0, 0.3) !important;
}
.ls-card-corner {
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--gold);
z-index: 20;
pointer-events: none;
}
.c-tl { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.c-br { bottom: -3px; right: -3px; border-left: none; border-top: none; }
.ls-card:hover {
border-color: var(--gold) !important;
transform: scale(1.1);
box-shadow: 0 0 30px var(--crimson-glow) !important;
}
.ls-badge {
background: #000 !important;
border-bottom: 1px solid var(--crimson) !important;
font-size: 8px !important;
color: var(--gold) !important;
text-align: center !important;
padding: 3px 0 !important;
margin-bottom: 6px !important;
font-weight: 900 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
display: block !important;
font-family: 'Cinzel', serif !important;
}
.ls-img {
width: 100% !important;
height: 125px !important;
background: #111 !important;
overflow: hidden !important;
display: block !important;
clip-path: polygon(0% 10%, 10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%);
}
.ls-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: grayscale(1) sepia(0.3) contrast(1.1);
transition: 0.6s;
display: block !important;
}
.ls-card:hover .ls-img img { filter: grayscale(0) sepia(0); }
.ls-name {
font-family: 'Cinzel', serif !important;
font-size: 10px !important;
color: #fff !important;
text-align: center !important;
padding-top: 10px !important;
font-weight: 700 !important;
display: block !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
}
/* DOSSIER PANEL */
.ls-panel {
position: absolute;
top: 0;
right: -380px;
width: 380px;
height: 100%;
background: rgba(8, 2, 2, 0.99) !important;
border-left: 2px solid var(--gold) !important;
z-index: 1000;
transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
padding: 60px 40px !important;
color: #fff !important;
overflow-y: auto !important;
display: block !important;
box-shadow: -20px 0 60px rgba(0,0,0,0.95) !important;
}
.ls-close-btn {
position: absolute;
top: 30px;
right: 30px;
color: var(--gold) !important;
font-size: 30px !important;
cursor: pointer !important;
text-decoration: none !important;
display: block !important;
line-height: 1 !important;
}
.ls-content-item { display: none !important; }
/* TRIGGER LOGIC */
#p1:checked ~ .ls-panel, #p2:checked ~ .ls-panel, #p3:checked ~ .ls-panel,
#p4:checked ~ .ls-panel, #p5:checked ~ .ls-panel, #p6:checked ~ .ls-panel,
#p7:checked ~ .ls-panel, #p8:checked ~ .ls-panel, #p9:checked ~ .ls-panel,
#p10:checked ~ .ls-panel {
right: 0 !important;
}
#p1:checked ~ .ls-panel #c1, #p2:checked ~ .ls-panel #c2, #p3:checked ~ .ls-panel #c3,
#p4:checked ~ .ls-panel #c4, #p5:checked ~ .ls-panel #c5, #p6:checked ~ .ls-panel #c6,
#p7:checked ~ .ls-panel #c7, #p8:checked ~ .ls-panel #c8, #p9:checked ~ .ls-panel #c9,
#p10:checked ~ .ls-panel #c10 {
display: block !important;
}
/* DOSSIER UI */
.ls-dossier-head { text-align: center !important; margin-bottom: 40px !important; display: block !important; }
.ls-dossier-img {
width: 170px !important;
height: 170px !important;
border: 2px solid var(--gold) !important;
padding: 5px !important;
margin: 0 auto 20px !important;
display: block !important;
background: #000 !important;
}
.ls-dossier-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.ls-dossier-name { font-family: 'Cinzel', serif !important; font-size: 26px !important; color: #fff !important; margin: 0 !important; display: block !important; text-transform: uppercase !important; }
.ls-dossier-bio {
background: rgba(139, 0, 0, 0.15) !important;
border-left: 4px solid var(--crimson) !important;
padding: 25px !important;
font-size: 14px !important;
line-height: 1.8 !important;
color: #ccc !important;
display: block !important;
}
</style>
</head>
<body>
<div class="ls-pure-wrapper">
<div class="ls-embers"></div>
<input type="radio" name="ls-squad" id="p-none" class="ls-logic" checked>
<input type="radio" name="ls-squad" id="p1" class="ls-logic">
<input type="radio" name="ls-squad" id="p2" class="ls-logic">
<input type="radio" name="ls-squad" id="p3" class="ls-logic">
<input type="radio" name="ls-squad" id="p4" class="ls-logic">
<input type="radio" name="ls-squad" id="p5" class="ls-logic">
<input type="radio" name="ls-squad" id="p6" class="ls-logic">
<input type="radio" name="ls-squad" id="p7" class="ls-logic">
<input type="radio" name="ls-squad" id="p8" class="ls-logic">
<input type="radio" name="ls-squad" id="p9" class="ls-logic">
<input type="radio" name="ls-squad" id="p10" class="ls-logic">
<div class="ls-header">
<h1>LANCE SQUAD</h1>
<p>Southern Hierarchy</p>
</div>
<div class="ls-viewport">
<div class="ls-tree-container">
<div class="ls-tree">
<ul>
<li class="has-children">
<label for="p1" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">THE LORD</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t456142.png"></div>
<div class="ls-name">GAUTIER PAYTON</div>
</label>
<ul>
<li class="has-children">
<label for="p2" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">THE BANNERET</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/89426.png"></div>
<div class="ls-name">DAMARIS PAYTON</div>
</label>
<ul>
<li>
<label for="p3" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">SQUIRE</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t193999.png"></div>
<div class="ls-name">VAWRON PAYTON</div>
</label>
</li>
<li>
<label for="p4" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">SQUIRE</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/51996.png"></div>
<div class="ls-name">ANTOR SEGRAVE</div>
</label>
</li>
</ul>
</li>
<li class="has-children">
<label for="p5" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">COUSTILLIER</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t74717.png"></div>
<div class="ls-name">SARKOSIS GROTTE</div>
</label>
<ul>
<li>
<label for="p6" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">CADET</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/677989.png"></div>
<div class="ls-name">GAREN DIFENTAL</div>
</label>
</li>
<li>
<label for="p7" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">CADET</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/920716.png"></div>
<div class="ls-name">AGRIPINA GLOKTA</div>
</label>
</li>
<li>
<label for="p8" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">CADET</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/25452.png"></div>
<div class="ls-name">VELIZAR PAYTON</div>
</label>
</li>
</ul>
</li>
<li class="has-children">
<label for="p9" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">VIVISECTOR</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/456012.png"></div>
<div class="ls-name">CATERINA BUSSI</div>
</label>
<ul>
<li>
<label for="p10" class="ls-card">
<div class="ls-card-corner c-tl"></div>
<div class="ls-card-corner c-br"></div>
<div class="ls-badge">SCOUT</div>
<div class="ls-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/258333.png"></div>
<div class="ls-name">YURI</div>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Details Panel -->
<div class="ls-panel">
<label for="p-none" class="ls-close-btn">✕</label>
<h2 style="font-family: 'Cinzel'; color: var(--gold); border-bottom: 2px solid var(--crimson); padding-bottom: 15px; margin-bottom: 35px; display: block !important; text-transform: uppercase; letter-spacing: 4px;">DOSSIER</h2>
<div id="c1" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t456142.png"></div>
<h3 class="ls-dossier-name">GAUTIER PAYTON</h3>
</div>
<div class="ls-dossier-bio">Второй в очереди наследования Герцогского титула.<br>
Живет в трех днях пути от Редларта, к Западу, на месте старого форта. На картах локация не отмечена.<br><br>
Действующий чемпион арен столицы и Редларта | Самозанятый лорд, в чьих угодьях выращивают алхимические травы и разводят различный скот для продовольственной реализации.<br><br>
[502 г.] — Организовал алхимическую мануфактуру по производству защитной мази и снабжает ею герцогскую рать.</div>
</div>
<div id="c2" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/89426.png"></div>
<h3 class="ls-dossier-name">DAMARIS PAYTON</h3>
</div>
<div class="ls-dossier-bio">Душеприказчик и воспитатель, самое благонадежное лицо среди Пэйтонов.<br><br>
Прекрасная владелица огромного черного виверна и домовой книги расходов и доходов владений Готье Пэйтона. Лупит нагайкой прямоходящие статьи расходов.</div>
</div>
<div id="c3" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t193999.png"></div>
<h3 class="ls-dossier-name">VAWRON PAYTON</h3>
</div>
<div class="ls-dossier-bio">Heavy cavalry apprentice. Known for reckless bravery and a signature gold-hilted blade tempered in the heat of a thousand battles.</div>
</div>
<div id="c4" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/51996.png"></div>
<h3 class="ls-dossier-name">ANTOR SEGRAVE</h3>
</div>
<div class="ls-dossier-bio">Вы - угасшее пламя ненависти, Паж Антор Сегрейв. Будущий рыцарь в боевом Копье второго наследника Юга.<br><br>
Скрытный, не боящийся "замарать руки", мстительный мужчина сомнительного происхождения.</div>
</div>
<div id="c5" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/t74717.png"></div>
<h3 class="ls-dossier-name">SARKOSIS GROTTE</h3>
</div>
<div class="ls-dossier-bio">Инженер, артефактор, хитрая задница.<br><br>
Мастерит артефакты, ухаживает за снаряжением, заставляет всех чинить забор, а еще вечно просыпается в кровати чужих жен.</div>
</div>
<div id="c6" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/677989.png"></div>
<h3 class="ls-dossier-name">GAREN DIFENTAL</h3>
</div>
<div class="ls-dossier-bio">Вы - оплот спокойствия и надежности, делаете свою работу молча и без нареканий. Вытащить из вас хоть слово - задача со звездочкой, словно каждый слог стоит вам целое состояние. Вы рыцарь-в-обучении, в боевом Копье второго наследника Юга.</div>
</div>
<div id="c7" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/920716.png"></div>
<h3 class="ls-dossier-name">AGRIPINA GLOKTA</h3>
</div>
<div class="ls-dossier-bio">Вы - профессиональный суетолог, тамада и берсерк, скованный в узилищах женской формы. Вы рыцарь-в-обучении, в боевом Копье второго наследника Юга.<br><br>
Всю свою жизнь вы росли на родном острове, где традиции юга поддерживаются через раз. Вам всегда нравились лихие истории о женщинах, достигших невероятных ратных успехов, а Малис Пэйтон - ваш личный кумир. Её падение стало и вашей личной драмой.</div>
</div>
<div id="c8" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/25452.png"></div>
<h3 class="ls-dossier-name">VELIZAR PAYTON</h3>
</div>
<div class="ls-dossier-bio">Молодость в сапогах, "деревенщина", и просто милый парень.<br><br>
Тот самый Пэйтон, который ходит по кабакам просто чтобы бить людей дрыном.</div>
</div>
<div id="c9" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/456012.png"></div>
<h3 class="ls-dossier-name">CATERINA BUSSI</h3>
</div>
<div class="ls-dossier-bio">Вы - потомственная дрессировщица тварей, которая не брезгует выступать в бою вместе со своими творениями. Постоянный вивисектор и специалист по всем видам тварей у Копья второго наследника Юга.</div>
</div>
<div id="c10" class="ls-content-item">
<div class="ls-dossier-head">
<div class="ls-dossier-img"><img src="https://upforme.ru/uploads/001c/69/9f/65/258333.png"></div>
<h3 class="ls-dossier-name">YURI</h3>
</div>
<div class="ls-dossier-bio">Кто это у нас носится по лесу в медвежьих шкурах и пытается откусить лица зазевавшимся противникам, а затем спит до обеда? Вы - Юрий, контрабандист, разведчик и скаут. Ваше имя широко известно среди пьяниц и любителей кулачных боев в кабаках. Харизматичная скотина, обладающая талантом оказываться в совершенно неожиданных местах, куда его никто никогда не звал.</div>
</div>
</div>
</div>
</body>
</html>[/html]