ЗАНЯТЫЕ ВНЕШНОСТИ

[html]<style>
/* ================== CYBERPUNK – CLAIMED FACES ================== */
.cfc-wrap{
--bg:#0b0f16;
--panel:#0f1523;
--panel2:#0b111d;
--text:#dfe5ff;
--muted:#9fb0c7;
--accent:#45f2ff;
--accent2:#ff2bd6;
--chip:#0a1320;
--radius:16px;

max-width: 980px;
margin: 18px auto 26px;
padding: 18px;
border-radius: calc(var(--radius) + 8px);
background:
radial-gradient(140% 80% at 100% 0,#1b2233 0,#0b0f16 60%),
repeating-linear-gradient(90deg,#ffffff06 0 1px,#0000 1px 6px),
var(--bg);
color: var(--text);
font: 15px/1.7 "Courier New", monospace;
box-shadow: 10 12px 48px #000a, inset 0 0 0 1px #ffffff10;
}

/* header */
.cfc-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.cfc-kicker{
font-family:"WDXL Lubrifont TC",system-ui,sans-serif;
text-transform:uppercase;letter-spacing:.18em;font-size:14px;
color:#bfeaff;opacity:.85
}
.cfc-title{
margin:-2px 0 2px;
font-family:"WDXL Lubrifont TC",system-ui,sans-serif;
font-weight:900;font-size:56px;line-height:.95;letter-spacing:.02em;

background:linear-gradient(180deg,#fefefe,#b6e7ff 40%,#45f2ff);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:10 0 6px #fff5,0 0 18px var(--accent),0 0 42px var(--accent2)
}
.cfc-badges{display:flex;gap:10px;flex-wrap:wrap;justify-self:end}
.cfc-badge{
padding:10px 14px;border-radius:999px;font-weight:900;
text-transform:uppercase;letter-spacing:.06em;color:#061019;
background:linear-gradient(90deg,var(--accent2),var(--accent));
box-shadow:0 8px 22px #00f3ff55,0 0 0 2px #000 inset
}

/* panel + chips */
.cfc-panel{
margin-top:14px;padding:16px;border-radius:var(--radius);
background:linear-gradient(180deg,var(--panel),var(--panel2));
box-shadow:inset 0 0 0 1px #ffffff12,0 10px 30px #0009
}
.cfc-panel p{margin:.6em 0;color:var(--muted)}
.cfc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cfc-chip{
background:var(--chip);color:#eaf2ff;border-radius:999px;
padding:8px 12px;font-weight:800;font-size:12px;text-decoration:none;
box-shadow:inset 0 0 0 1px #27d4ff80
}
.cfc-chip:hover{box-shadow:inset 0 0 0 1px #fff;color:#fff}

/* active chip by :target */
.cfc-chip[data-for="all"]{--sel:#fff}
#cfc-all:target ~ .cfc-panel .cfc-chip[data-for="all"],
#cfc-female:target ~ .cfc-panel .cfc-chip[data-for="female"],
#cfc-male:target ~ .cfc-panel .cfc-chip[data-for="male"],
#cfc-npc:target ~ .cfc-panel .cfc-chip[data-for="npc"],
#cfc-pend:target ~ .cfc-panel .cfc-chip[data-for="pend"]{
box-shadow:inset 0 0 0 1px #fff, 0 0 0 3px #27d4ff44;
}

/* sections */
.cfc-alpha{display:grid;gap:12px;margin-top:14px}
.cfc-letter{
border-radius:14px;overflow:hidden;background:#0c1322cc;
box-shadow:inset 0 0 0 1px #ffffff12,0 10px 28px #0009
}
.cfc-letter summary{
cursor:pointer;list-style:none;position:relative;
padding:12px 14px;background:#081224;color:#eaf2ff;
font-family:"WDXL Lubrifont TC",system-ui,sans-serif;
text-transform:uppercase;letter-spacing:.16em;
box-shadow:inset 0 0 0 1px #27d4ff66
}
.cfc-letter summary::-webkit-details-marker{display:none}
.cfc-letter[open] summary{box-shadow:inset 0 0 0 1px #fff}
.cfc-list{
display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));
gap:12px;padding:14px;background:#0b1424
}

/* face card */
.cfc-face{
display:grid;grid-template-columns:72px 1fr;gap:10px;
align-items:center;padding:10px;border-radius:12px;
background:#0e1a2b;box-shadow:inset 0 0 0 1px #27d4ff33
}
.cfc-ava{
width:72px;height:72px;border-radius:10px;background-size:cover;
background-position:center;box-shadow:0 0 0 2px #000 inset,0 4px 14px #000a
}
.cfc-meta{min-width:0}
.cfc-actor{
margin:0 0 3px;color:#e9f2ff;font-weight:800;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis
}
.cfc-char{
color:#b6c8de;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cfc-char a{color:#9ee6ff;text-decoration:none}
.cfc-char a:hover{color:#fff}
.cfc-badge-sm{
display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;
font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em
}
.cfc-badge--busy{
color:#061019;background:linear-gradient(90deg,var(--accent2),var(--accent))
}
.cfc-badge--pend{
color:#cfe9ff;background:#27353f;box-shadow:inset 0 0 0 1px #27d4ff66
}

/* filter lists by :target */
.cfc-body .cfc-list{display:none}
.cfc-body #list-all{display:grid} /* default */
#cfc-female:target ~ .cfc-body #list-female{display:grid}
#cfc-male:target ~ .cfc-body #list-male{display:grid}
#cfc-npc:target ~ .cfc-body #list-npc{display:grid}
#cfc-pend:target ~ .cfc-body #list-pend{display:grid}
#cfc-female:target ~ .cfc-body #list-all,
#cfc-male:target ~ .cfc-body #list-all,
#cfc-npc:target ~ .cfc-body #list-all,
#cfc-pend:target ~ .cfc-body #list-all{display:none}

/* template/code */
.cfc-divider{
margin:16px 0 8px;padding:10px 20px;text-align:center;
text-transform:uppercase;letter-spacing:.2em;font-weight:900;
border-radius:999px;background:#0a1320;color:#eaf2ff;
box-shadow:inset 0 0 0 1px #27d4ff88,0 4px 18px #27d4ff44
}
.cfc-copyrow{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:center}
.cfc-copybtn{
display:inline-block;padding:10px 14px;border-radius:12px;
font-weight:900;text-transform:uppercase;letter-spacing:.08em;
background:#07111e;color:#d9eeff;text-decoration:none;
box-shadow:inset 0 0 0 1px #27d4ff80,0 8px 20px #0009
}
.cfc-copybtn:hover{box-shadow:inset 0 0 0 1px #fff,0 10px 24px #27d4ff66;color:#fff}
.cfc-code{
margin:12px 0 0;width:100%;max-height:0;opacity:0;overflow:hidden;
transition:.25s ease;border-radius:12px;background:#0b1424;color:#d8ebff;
border:1px solid #27d4ff55;padding:0 10px;font:14px/1.6 "Courier New", monospace
}
:target.cfc-code{max-height:160px;padding:10px;opacity:1}

/* responsive */
@media (max-width:820px){
.cfc-title{font-size:44px}
.cfc-list{grid-template-columns:1fr 1fr}
.cfc-copyrow{grid-template-columns:1fr}
}
@media (max-width:520px){
.cfc-list{grid-template-columns:1fr}
}
</style>

<div class="cfc-wrap">
<div class="cfc-head">
<div>
<div class="cfc-kicker">faces</div>
<div class="cfc-title">ЗАНЯТЫЕ ВНЕШНОСТИ</div><br>
</div>

</div>

<div class="cfc-body">

<details class="cfc-letter" open>
<summary>МУЖСКИЕ ВНЕШНОСТИ</summary>
<div id="list-all" class="cfc-list">

<div class="cfc-face">
<div class="cfc-ava" style="background-image:url(https://i.pinimg.com/1200x/0d/fe/31/0df … a4df49.jpg);"></div>
<div class="cfc-meta">
<div class="cfc-actor">ИМЯ ФАМИЛИЯ (внеха)</div>
<div class="cfc-char"><a href="ссылка на профиль">Имя Фамилия (перс)</a></div>
</div>
</div>

<details class="cfc-letter" open>
<summary>ЖЕНСКИЕ ВНЕШНОСТИ</summary>
<div id="list-all" class="cfc-list">

<div class="cfc-face">
<div class="cfc-ava" style="background-image:url(https://i.pinimg.com/1200x/b7/c6/53/b7c … 9e0a02.jpg);"></div>
<div class="cfc-meta">
<div class="cfc-actor">ИМЯ ФАМИЛИЯ (внеха)</div>
<div class="cfc-char"><a href="ссылка на профиль">Имя Фамилия (перс)</a></div>
</div>
</div>

</div>
</details>

</div>

</div>
</div>[/html]

[hideprofile]

Код:

        <div class="cfc-face">
          <div class="cfc-ava" style="background-image:url(https://i.pinimg.com/1200x/0d/fe/31/0dfe31ad9dc1a5aed4cce9f342a4df49.jpg);"></div>
          <div class="cfc-meta">
            <div class="cfc-actor">ИМЯ ФАМИЛИЯ (внеха)</div>
            <div class="cfc-char"><a href="ссылка на профиль">Имя Фамилия (перс)</a></div>
          </div>
        </div>

THE LAST DAWN

Меню навигации

Пользовательские ссылки

Информация о пользователе

ЗАНЯТЫЕ ВНЕШНОСТИ

Сообщений 1 страница 1 из 1

Поделиться12025-08-27 10:53:35

Быстрый ответ