[hideprofile][html]<div id="guestbook">
<style>
@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap');
#guestbook{
--ink:#2a2a2a;--muted:#6b6b6b;--edge:#e9e9ee;
--accent:#e5007d;--accent-soft:#ffe0f2;
max-width:910px;margin:0 auto
}
#guestbook *{box-sizing:border-box;font:14px/1.65 Arial,Helvetica,sans-serif;color:var(--ink)}
#guestbook h2{margin:0 0 8px!important;font:15px/1.3 Georgia,serif!important;text-align:center!important;color:var(--accent)!important;letter-spacing:1px;display:block!important;font-weight:700!important;text-transform:lowercase}
#guestbook a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(229,0,125,.35)}
#guestbook a:hover{border-bottom-color:transparent}
/* Контейнер */
#guestbook .skin{
margin:0 0 8px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;
background:url('https://forumstatic.ru/files/001c/87/df/31594.jpg') center/cover repeat;
clear:both;display:flow-root
}
/* Шапка */
#guestbook .hero{position:relative;border-top:1px solid var(--edge);line-height:0;font-size:0;margin:0}
#guestbook .hero img{display:block;width:100%;height:auto;object-fit:cover;margin:0}
#guestbook .hero .title{
position:absolute;top:25px;left:50%;
transform:translateX(-50%) rotate(-6deg);
font-family:'Comforter Brush', cursive;
font-size:64px;font-weight:400;
color:var(--accent);
text-shadow:0 0 6px rgba(0,0,0,.6), 0 0 14px rgba(229,0,125,.8);
white-space:nowrap;
}
/* Правила */
#guestbook .rules{
margin:0 12px 12px;padding:12px 16px;
border:1px solid var(--edge);border-radius:12px;
background:rgba(255,255,255,.66);
color:#444
}
#guestbook .rules .mini{font-size:12px;line-height:1.55}
#guestbook .rules .holdnote{font-size:13.5px;line-height:1.55}
#guestbook .rules b{color:var(--accent)}
/* амс */
#guestbook .ams {
margin:12px auto 0;padding:8px 0;
border-top:1px dashed rgba(229,0,125,.4);
border-bottom:1px dashed rgba(229,0,125,.4);
font-size:12.5px;letter-spacing:0.5px;text-align:center
}
#guestbook .ams a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:0}
#guestbook .ams a:hover{color:#000}
/* Карточки */
#guestbook .wrap{display:grid;gap:12px;margin:0 12px}
@media(min-width:720px){#guestbook .wrap{grid-template-columns:1fr 1fr 1fr}}
#guestbook .card{
background:rgba(255,255,255,.72);
border:1px solid var(--edge);border-radius:12px;
backdrop-filter:saturate(120%) blur(1px)
}
#guestbook .in{padding:12px 14px}
#guestbook .in h2{color:var(--accent)!important;font-weight:700!important;text-transform:lowercase;letter-spacing:1px;display:block!important}
/* Код для придержания */
#guestbook .codebox{
background:rgba(255,255,255,.35);
border:1px dashed var(--accent);
border-radius:10px;padding:6px;
backdrop-filter: blur(3px);
}
#guestbook .codebox .show{font-size:13px;line-height:1.5}
#guestbook .codebox textarea{display:none}
/* Кнопка */
#guestbook .copy{
display:block;width:100%;margin-top:6px;padding:6px;
text-align:center;border:1px solid var(--accent);
border-radius:10px;background:rgba(255,255,255,.35);
backdrop-filter: blur(3px);
color:var(--accent);font-weight:700;
cursor:pointer;transition:.25s ease
}
#guestbook .copy:hover{background:rgba(229,0,125,.25);color:#000}
/* Списки */
#guestbook .holds{max-height:200px;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-color: var(--accent) #f2f2f4;scrollbar-width: thin}
#guestbook .holds::-webkit-scrollbar{width:6px}
#guestbook .holds::-webkit-scrollbar-thumb{background:var(--accent)!important;border-radius:4px}
#guestbook .holds::-webkit-scrollbar-track{background:rgba(242,242,244,.8)!important;border-radius:4px}
#guestbook .box{padding:6px 0;border-bottom:1px solid var(--edge);font-size:13px}
#guestbook .box:last-child{border-bottom:0}
/* Чипсы */
#guestbook .links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 0 2px}
#guestbook .chip{
display:inline-block;padding:7px 12px;
border-radius:999px;border:1px solid var(--accent);
background:rgba(255,255,255,.35);
color:var(--accent);font-weight:700;
font-size:12px;backdrop-filter: blur(2px);
transition:.2s
}
#guestbook .chip:hover{background:var(--accent);color:#fff}
</style>
<div class="skin">
<div class="hero">
<img src="https://forumstatic.ru/files/001c/87/df/98203.png" alt="banner">
<div class="title"></div>
</div>
<div class="rules">
<p class="mini"><b>hp, 2029:</b> война закончилась 30 лет назад, Волдеморт мертв (опять?), Министерство раздает реформы пачками, будто это скидочные купоны, а сквибы рождаются быстрее, чем новые законы. Конкорд шепчет о дружбе с магглами, Ковенант — про изоляцию, а техномагия уже бахнула в центре Лондона так, что до сих пор пахнет гарью. Говорят, кто-то придумал ритуал (?), который вырывает магию прямо из тебя — но зачем? И кто первый решит проверить?</p>
<p class="holdnote"><b>» Придержать</b> роли и внешности можно сразу <b>до открытия</b>, гостям — на 1 сутки. 5 дней отсутствия на форуме — бронь слетает.
<br><b>»</b> В честь теста можно завести одного твинка вне очереди.
<br><b>»</b> Выкупить внешность для заявки можно за 15 реклам.</p>
<div class="ams">
<a href="https://separation.rusff.me/viewtopic.php?id=3">клетка фарадея</a> ●
<a href="https://separation.rusff.me/profile.php?id=4">connie-baby</a> ●
<a href="https://separation.rusff.me/profile.php?id=5">причина тряски</a> ●
<a href="https://separation.rusff.me/profile.php?id=6">malboro</a>
</div>
</div>
<div class="wrap">
<!-- код для придержания -->
<div class="card">
<div class="in">
<div class="codebox">
<div class="show">
<div class="box"> внешность/роль/семья - <a href="ссылка на профиль">имя фамилия</a></div>
</div>
<textarea id="copycode">
<div class="box"> внешность/роль/семья - <a href="ссылка на профиль">имя фамилия</a></div>
</textarea>
</div>
<button class="copy" onclick="
const t=document.getElementById('copycode');
t.style.display='block'; t.select(); document.execCommand('copy'); t.style.display='none';
this.textContent='Скопировано!'; setTimeout(()=>this.textContent='Копировать код',1200);
">Копировать код</button>
</div>
</div>
<!-- придержанные внешности -->
<div class="card">
<div class="in">
<div class="holds">
<div class="box"><b>до открытия</b></div>
<div class="box">aubri ibrag — <a href="https://separation.rusff.me/profile.php?id=5">причина тряски</a></div>
<div class="box">benjamin wadsworth — <a href="https://separation.rusff.me/profile.php?id=6">malboro</a></div>
<div class="box">christopher briney — <a href="https://separation.rusff.me/profile.php?id=4">connie-baby</a></div>
<div class="box">deacon phillippe — <a href="https://separation.rusff.me/profile.php?id=6">malboro</a></div>
<div class="box"> drew starkey - <a href="https://separation.rusff.me/profile.php?id=10">мама вызывай такси</a></div>
<div class="box">ester expósito — <a href="https://separation.rusff.me/profile.php?id=4">connie-baby</a></div>
<div class="box"> harris dickinson - <a href="https://separation.rusff.me/profile.php?id=13">strawberry fields</a></div>
<div class="box"> julia garner - <a href="https://separation.rusff.me/profile.php?id=12">frog</a></div>
<div class="box">kristine froseth - <a href="https://separation.rusff.me/profile.php?id=8">amortentia</a></div>
<div class="box">lady gaga — <a href="https://separation.rusff.me/profile.php?id=5">причина тряски</a></div>
<div class="box">sarah snook — <a href="https://separation.rusff.me/viewtopic.php?id=3">клетка фарадея</a></div>
<div class="box">tom glynn-carney — <a href="https://separation.rusff.me/viewtopic.php?id=3">клетка фарадея</a></div>
<div class="box"><b>для заявок:</b></div>
<div class="box">emma d'arcy — <a href="ссылка на заявку">роль</a></div>
<div class="box">evan peters — <a href="ссылка на заявку">роль</a></div>
<div class="box">jodie comer — <a href="ссылка на заявку">роль</a></div>
<div class="box">внешность — <a href="ссылка на заявку">роль</a></div>
<div class="box">внешность — <a href="ссылка на заявку">роль</a></div>
</div>
</div>
</div>
<!-- придержанные роли -->
<div class="card">
<div class="in">
<div class="holds">
<div class="box"><b>до открытия</b></div>
<div class="box"> draco malfoy - <a href="https://separation.rusff.me/profile.php?id=9">василиск</a></div>
<div class="box"> hugo weasley - <a href="https://separation.rusff.me/profile.php?id=13">strawberry fields</a></div>
<div class="box">lily l. potter - <a href="https://separation.rusff.me/profile.php?id=8">amortentia</a></div>
<div class="box">molly weasley ii — <a href="https://separation.rusff.me/viewtopic.php?id=3">клетка фарадея</a></div>
<div class="box">scorpius malfoy — <a href="https://separation.rusff.me/viewtopic.php?id=3">клетка фарадея</a></div>
<div class="box"><b>семьи:</b></div>
<div class="box"> finnigan fam. — <a href="https://separation.rusff.me/profile.php?id=10">мама вызывай такси</a></div>
<div class="box">montague fam. — <a href="https://separation.rusff.me/profile.php?id=4">connie-baby</a></div>
<div class="box">nott fam. — <a href="https://separation.rusff.me/profile.php?id=4">connie-baby</a></div>
<div class="box"> pucey fam. - <a href="https://separation.rusff.me/profile.php?id=12">frog</a></div>
<div class="box">selwyn fam. — <a href="https://separation.rusff.me/profile.php?id=6">malboro</a></div>
</div>
</div>
</div>
</div>
<div class="card" style="margin:12px">
<div class="in">
<div class="links">
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=2">ХОЧУ К ВАМ</a>
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=3#p3">НУЖНЫЕ</a>
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=6#p6">FAQ</a>
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=10">CЮЖЕТ</a>
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=8">ПОЛИТИКА</a>
<a class="chip" href="https://separation.rusff.me/viewtopic.php?id=9">ТЕХНОМАГИЯ</a>
</div>
</div>
</div>
</div>
</div>
[/html]
