[html]  <style>
   .charlist {
width: 100%;
height: auto;
position: relative;
z-index: 4;
margin-top: 50px;
}

.charlist * {
box-sizing: border-box;
}

.charlist::before {
content: '';
width: 96%;
background: url(https://i.pinimg.com/1200x/45/6c/60/456 … 67e886.jpg) no-repeat center / 100%;
height: 90px;
position: absolute;
display: block;
border-radius: 10px 10px 0 0;
top: -50px;
left: 50%;
transform: translatex(-50%);
filter: contrast(0.7);
z-index: -1;
}

.charlist::after{
    content: '';
    width: 198px;
    height: 149px;
    position: absolute;
    background: url(https://forumstatic.ru/files/001c/88/d4/71413.png) no-repeat center / 100%;
    right: -3px;
    top: 26px;
    z-index: 5;
    pointer-events: none;
}

.charcontent::after {
    content: '';
    width: 198px;
    height: 149px;
    position: absolute;
    background: url(https://forumstatic.ru/files/001c/88/d4/71413.png) no-repeat center / 100%;
    left: -3px;
    top: 26px;
    z-index: 5;
    pointer-events: none;
    transform: scaleX(-1);
}

body[data-scheme="dark"] .charlist::after,
body[data-scheme="dark"] .charcontent::after {
filter: brightness(.4);
}

   .charlist input[type="radio"] {
      display: none;
    }

    .chartabs {
    display: flex;
    justify-content: center;
    gap: 71px;
    }

    .chartab-label {
    flex-shrink: 0;
    padding: 2px 34px;
    height: 30px;
    width: 270px;
    background: rgb(255 255 255 / 40%);
    backdrop-filter: blur(5px);
    text-align: center;
    cursor: pointer;
    position: relative;
    border: solid rgb(var(--accent));
    border-width: 0 5px;
    transition: 0.3s;
    text-transform: lowercase;
    font-weight: 400 !important;
    box-shadow: 0 -5px 14px -5px black;
    font-size: 18px;
    font-family: 'RadjhaniRu';
    text-transform: uppercase;
    line-height: 1.5;
    color: rgb(0 0 0);
    }

    #chartab1:checked ~ .charcontent #charcontent1 {
display: grid;
    }

    #chartab2:checked ~ .charcontent #charcontent2 {
      display: grid;

}

    .charcontent > div {
      display: none;
      background: rgb(var(--canvas-secondary));
    padding: 20px;
      border-radius: 5px 5px 5px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }

    #chartab1:checked ~ .chartabs label[for="chartab1"],
    #chartab2:checked ~ .chartabs label[for="chartab2"] {
    background: rgb(82 82 82 / 74%);
    backdrop-filter: blur(5px);
    color: white;
    }

lt {
    display: flex;
    font-weight: 700;
    font-size: 18px;
    width: 100%;
    height: 25px;
    margin: 20px 0 15px !important;
    position: relative;
    color: rgb(var(--text-primary), 0.7);
    align-items: center;
    padding: 0 50px;
    background: linear-gradient(90deg, rgb(var(--accent), 0.4) 8%, rgb(var(--light-accent), .2) 30%, rgb(var(--accent), 0.4));
    justify-content: flex-start;
    break-inside: avoid;
}

lt:first-of-type {
margin-top: 0px!important;
}

/* lt::before {
content: '';
    width: 73%;
    height: 41px;
    display: block;
    background: url(https://forumstatic.ru/files/001c/17/76/69645.png) no-repeat;
    background-position: 0px -1px;
    background-size: cover;
    position: absolute;
    filter: sepia(1) brightness(1.2) contrast(0.7);
    left: 0px;
    top: 50%;
    transform: translatey(-50%);
    break-inside: avoid;
}

lt::after {
    content: attr(data-letter);
    font-size: 21px;
    padding: 5px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-family: 'Jost';
    background: #fff6f0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 57px;
    box-shadow: 0 2px 10px -3px black;
} */

#charcontent2 {
    padding: 50px 20px 20px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}

#charcontent2 > div {
    background: rgb(var(--canvas-quarternary));
    width: 90%;
}

#charcontent2 > div > div {
    width: 90%;
    margin: 0 10px 10px;
}

#charcontent1 {
grid-template-columns: repeat(5, 1fr);
gap: 20px;
  grid-auto-rows: auto;
width: 100%;
}

#charcontent1 input {
    height: 23px;
    border-radius: 4px;
    background: rgb(var(--canvas-tertiary));
    color: rgb(var(--text-primary));
    width: 150px;
    position: relative;
    padding: 2px 15px 3px;
}

#charcontent1 charcont {
    background: rgb(var(--canvas-primary));
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    padding-bottom: 8px;
    color: rgb(var(--text-primary), 1);
    text-align: center;
    box-shadow: 0 4px 10px -6px rgb(var(--light-accent), .4);
}

#charcontent1 > span {
    grid-column: span 5;
    text-align: center;
    font-size: 15px;
    height: 4px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgb(var(--gray-text));
}

#charcontent1 button {
    text-align: center;
    width: fit-content;
    justify-self: center;
    color: rgba(255, 255, 255, 1);
    border-radius: var(--bradius-minor);
    padding: 4px 35px 3px 35px;
    cursor: pointer;
    font: var(--fw400) 16px var(--font-cat-title);
    text-transform: uppercase;
    box-sizing: border-box;
    margin: 5px auto;
    outline: none;
    transition: var(--anim-hover);
    overflow: hidden;
    height: 24px;
    background: rgb(var(--light-accent));
    box-shadow: var(--buttons-shadow);
    border: 0px solid rgb(var(--light-accent));
}

#charcontent1 > button:hover {
color: rgb(0, 0, 0, .6);
background: rgb(var(--accent), .4);
box-shadow: 0 0 5px rgba(0,0,0,0.1);

}
#charcontent1 a {
    width: 100%;
    background: rgb(var(--text-primary), .85);
    text-align: left;
    color: rgb(var(--canvas-primary));
    font: 700 10px Inter;
    display: flex;
    height: 20px;
    padding: 1px 8px 3px;
    align-items: center;
}

.profile-card {
    margin: 0 auto !important;
    float: none!important;
}

.profile-card div.user-avatar {
    margin: -1px auto !important;
    float: none!important;
}

#loyaltyFilter,
#ageFilter {
    height: 20px;
    height: 23px;
    border-radius: 4px;
    background: rgb(var(--canvas-tertiary));
    color: rgb(var(--text-primary));
    padding: 2px 15px 3px;
    width: 150px;
    position: relative;
}
label[for="loyaltyFilter"],
label[for="ageFilter"] {
    text-align: right;
    position: relative;
    background: rgb(var(--canvas-primary));
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    right: -9px;
    padding: 1px 5px 2px 15px;
    color: rgb(var(--text-primary), 0.7);
}

chocc,
chloyalty,
chplace {
    display: block;
    position: relative;
    margin: 16px auto 7px;
padding: 2px 0 0;
    width: 100%;
    text-align: center;
}
chocc::before,
chloyalty::before,
chplace::before {
position: absolute;
background: rgb(var(--text-primary), .2);
font: 400 12px RadjhaniRu;
text-transform: uppercase;
width: 100%;
padding: 3px 0 0;
text-align: center;
bottom: 100%;
left: 0px;
box-sizing: border-box;
}

chocc::before {content: 'род деятельности';}
chloyalty::before {content: 'принадлежность';}
chplace::before {content: 'место жительства';}

charyears {
    position: absolute;
    top: 0px;
    font: 700 8px Inter;
    color: white;
    padding: 4px 5px;
    right: 0px;
    height: 19px;
    width: 32px;
    background: rgb(var(--accent));
}

charyears.year77 {background:rgba(208, 62, 230, 1);}
charyears.year99 {background:rgba(0, 129, 175, 1);}
charyears.year7799 {background:linear-gradient(270deg, #0081AF 0%, #D03EE6 100%);}
charyears.year77 {background: linear-gradient(270deg, #D03EE6 0%, #CD9F20 100%);}

charface {
display: block;
width: 110px;
text-align: center;
margin: 0 auto 5px;
border: solid rgb(var(--text-primary), .2);
border-width: 0 1px;
    padding: 3px 0 2px;
position: relative;
text-transform: lowercase;
font: 400 9px Inter;
}

charface::before {
content: '';
width: 173px;
height: 1px;
position: absolute;
left: -32px;
top: 100%;
background: rgb(var(--text-primary), .2);
}

.char-filters {
    grid-column: span 5;
    width: 100%;
    margin-top: 26px;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

  </style>

<section class='charlist'>

  <input type="radio" name="chartab" id="chartab1" checked>
  <input type="radio" name="chartab" id="chartab2">

  <!-- Кнопки-вкладки -->
  <div class="chartabs">
    <label for="chartab1" class="chartab-label">список персонажей </label>
    <label for="chartab2" class="chartab-label">список внешностей </label>
  </div>

  <!-------- Контент ---------------------------->
  <div class="charcontent">

  <!-------- Список внешек ---------------------------->

    <div id="charcontent1">

<div class="char-filters">
  <span>поиск:</span>
 
  <input type="text" class="chname-input" placeholder="по имени/фамилии" maxlength="100">
  <input type="text" class="chocc-input" placeholder="по деятельности" maxlength="100">
 
  <label for="loyaltyFilter">принадлежность:</label>
  <select id="loyaltyFilter">
    <option value="">все</option>
    <option value="Баргест">Баргест</option>
    <option value="Сетевой Дозор">Сетевой Дозор</option>
    <option value="NetWatch">NetWatch</option>
    <option value="Арасака">Арасака</option>
    <option value="Милитех">Милитех</option>
    <option value="N/A">N/A</option>
  </select>

  <label for="ageFilter">таймлайн:</label>
  <select id="ageFilter">
    <option value="">все</option>
    <option value="2077">2077</option>
    <option value="2099">2099</option>
    <option value="77/99">77/99</option>
    <option value="20/77">20/77</option>
  </select>

  <button id='resetBtn'>сбросить</button>
</div>

<!--------------- перс ----------------------------------------->
<charcont>
<!------ ссылка на профиль и имя на англ -------->
<a href='https://lepidus.ru/profile.php?id=2'> Vandra</a>
<!------ в data-user-id - просто id профиля цифрой -------->
<div class="profile-card" data-user-id="2"></div>
<!------ годы таймлайна персонажа -------->
<charyears> 77/99 </charyears>
<!------ если внешности нет - original -------->
<charface>original</charface>

<!------ Основное место жительства -------->
<chplace> Сан-Франциско</chplace>

<!------ Чем занимается / род деятельности (кратко) -------->
<chocc> Нетраннер из "Сетевого дозора"</chocc>

<!------ Принадлежность персонажа -------->
<chloyalty> NetWatch </chloyalty>

</charcont>

<!--------------- перс ----------------------------------------->
<charcont>
<!------ ссылка на профиль и имя на англ -------->
<a href='https://lepidus.ru/profile.php?id=4'> Джо Керриган </a>
<!------ s data-user-id - просто id профиля цифрой -------->
<div class="profile-card" data-user-id="4"></div>
<!------ если внешности нет - original -------->
<charface>florence pew</charface>

<!------ годы таймлайна персонажа -------->
<charyears> 2099 </charyears>

<!------ Основное место жительства -------->
<chplace> Сан-Франциско </chplace>

<!------ Чем занимается / род деятельности (кратко) -------->
<chocc> Практикующий электрик </chocc>

<!------ Принадлежность персонажа -------->
<chloyalty> N/A</chloyalty>

</charcont>

    </div> 

  <!-------- Список персов ---------------------------->

    <div id="charcontent2">

<div><lt>A - B - C - D - E</lt>
<div>

Name Surname - <a href='#'>Character's Name</a>
</div></div>

<div><lt>F - G - H - I - J</lt></div>

<div><lt>K - L - M - N</lt></div>

<div><lt>O - P - Q - R</lt></div>

<div><lt>S - T - U - V</lt></div>

<div><lt>W - X - Y - Z</lt></div>

</div>
</div>

</section>

[/html][hideprofile]

Подпись автора

[html]<style>a.blackwall-signature {
    width: 172px;
    height: 128px;
    bottom: 5px;
    right: -30px;
    position: absolute !important;
    background: url(https://forumstatic.ru/files/001c/88/d4/69234.gif) no-repeat center / 100%;
    z-index: 5;
    border-bottom: none !important;
    filter:brightness(1.0);
    mix-blend-mode: screen;
    will-change: mix-blend-mode;
    transition:filter .3s ease-in-out!important;}
a.blackwall-signature:hover {filter:brightness(1.4)}
a.blackwall-signature::before {content: none!important;}</style>
<a href='https://lepidus.ru/viewtopic.php?id=6633#p276002' title='хронология' class='blackwall-signature' target='_blank'></a>[/html]