[hideprofile][html]<div class="mantra-guest">
<!-- ШАПКА -->
<div class="mantra-guest-header">
</div>
<!-- ВЕРХНЯЯ НАВИГАЦИЯ -->
<div class="mantra-guest-topbar">
<div class="mantra-guest-tags">
<span>современная азия</span>
<span class="mantra-guest-tags-separator">
✦
</span> <span>реальная жизнь</span>
</div>
<div class="mantra-guest-toplinks">
<a class="mantra-guest-toplink"
href="https://mantra.rusff.me/profile.php?id=10">
taemin
</a>
<a class="mantra-guest-toplink"
href="https://mantra.rusff.me/profile.php?id=6">
felix
</a>
<a class="mantra-guest-toplink"
href="https://mantra.rusff.me/profile.php?id=86">
oat
</a>
<a class="mantra-guest-toplink"
href="https://mantra.rusff.me/profile.php?id=88">
boat
</a>
</div>
</div>
<!-- ОСНОВНОЕ СОДЕРЖАНИЕ -->
<div class="mantra-guest-content">
<div class="mantra-guest-welcome">
Мы долго думали и, наконец, придумали. Зачем устраивать переселение Китая и Тая в Корею, зачем думать, как и почему тот или иной персонаж оказался в Сеуле. Mantra — место, где мы свели воедино все кусочки и варианты Азии, которые толькоможно представить и захотеть сыграть.
</div>
<!-- РАЗДЕЛИТЕЛЬ -->
<div class="mantra-guest-divider">
<span></span>
<b>✦</b>
<span></span>
</div>
<!-- КОЛОНКИ -->
<div class="mantra-guest-reserves">
<!-- ЗАРЕГИСТРИРОВАННЫЕ -->
<div class="mantra-guest-reserve">
<div class="mantra-guest-reserve-title">
<span class="mantra-guest-title-star">✧</span>
<span>
зарегистрированные
</span>
<span class="mantra-guest-title-star">✧</span>
</div>
<div class="mantra-guest-reserve-box">
<div class="mantra-guest-reserve-list">
<a href="ссылка на профиль"> sung hanbin </a> — zb1 за амс <br>
<a href="https://mantra.rusff.me/profile.php?id=156">aya orapan phongmaykin</a> — actor до 28.09<br>
</div>
</div>
</div>
<!-- ГОСТИ -->
<div class="mantra-guest-reserve">
<div class="mantra-guest-reserve-title">
<span class="mantra-guest-title-star">✧</span>
<span>
гости
</span>
<span class="mantra-guest-title-star">✧</span>
</div>
<div class="mantra-guest-reserve-box">
<div class="mantra-guest-reserve-list">
</div>
</div>
</div>
</div>
<!-- НИЖНЯЯ НАВИГАЦИЯ -->
<div class="mantra-guest-bottom-nav">
<a class="mantra-guest-bottom-link"
href="https://mantra.rusff.me/viewtopic.php?id=7">
новости
</a>
<a class="mantra-guest-bottom-link"
href="https://mantra.rusff.me/viewtopic.php?id=21">
правила
</a>
<a class="mantra-guest-bottom-link"
href="https://mantra.rusff.me/viewtopic.php?id=8">
внешности
</a>
<a class="mantra-guest-bottom-link"
href="https://mantra.rusff.me/viewforum.php?id=2">
акции
</a>
</div>
</div>
<!-- УГЛОВОЙ ДЕКОР -->
<div class="mantra-guest-bottom-decor">
<img src="https://forumstatic.ru/files/001c/ac/b2/37476.png">
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@400;500;600&display=swap');
/* =====================================================
ПАЛИТРА
===================================================== */
.mantra-guest {
--mg-paper: #f8f1ef;
--mg-paper-light: #fcf8f6;
--mg-paper-dark: #eee1df;
--mg-peach: #d99a83;
--mg-peach-light: #edc2b1;
--mg-lilac: #a896b6;
--mg-lilac-light: #d8ccdf;
--mg-plum: #65536f;
--mg-plum-dark: #4f4059;
--mg-text: #55475d;
--mg-border: rgba(113, 91, 121, .22);
--mg-soft-border: rgba(139, 115, 145, .14);
position: relative;
width: 700px;
max-width: 100%;
margin: 35px auto;
overflow: visible;
border-radius: 0px;
background:
radial-gradient(
circle at 15% 5%,
rgba(255,255,255,.9),
transparent 33%
),
linear-gradient(
145deg,
#faf5f3 0%,
#f4ebeb 55%,
#f7f1f3 100%
);
border: 1px solid
rgba(118, 93, 126, .20);
box-shadow:
0 13px 35px rgba(75, 55, 76, .13),
0 2px 8px rgba(75, 55, 76, .07);
color: var(--mg-text);
font-family:
Manrope,
Arial,
sans-serif;
}
.mantra-guest,
.mantra-guest * {
box-sizing: border-box;
}
/* =====================================================
ШАПКА
===================================================== */
.mantra-guest-header {
position: relative;
height: 142px;
overflow: hidden;
border-radius: 0;
background: url(https://forumstatic.ru/files/001c/ac/b2/10955.png) center no-repeat;
background-size: cover;
}
/* бумажная зернистость */
.mantra-guest-header::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .42;
background:
repeating-radial-gradient(
circle,
rgba(84,64,91,.035) 0 1px,
transparent 1px 4px
),
linear-gradient(
90deg,
rgba(255,255,255,.30),
transparent 27%,
transparent 75%,
rgba(255,255,255,.25)
);
}
/* рваный нижний край */
.mantra-guest-header::before {
content: "";
position: absolute;
z-index: 5;
left: 0;
right: 0;
bottom: -1px;
height: 12px;
background:
linear-gradient(
176deg,
transparent 0 35%,
var(--mg-paper) 36% 100%
);
}
/* =====================================================
ДЕКОРАТИВНЫЕ БУМАЖКИ
===================================================== */
.mantra-guest-header-papers {
position: absolute;
right: 29px;
top: 20px;
width: 130px;
height: 85px;
opacity: .62;
}
.mantra-guest-header-papers i {
position: absolute;
display: block;
width: 54px;
height: 59px;
border:
1px solid rgba(97,75,107,.10);
background:
rgba(245,234,236,.68);
box-shadow:
2px 3px 0
rgba(92,70,99,.07);
}
.mantra-guest-header-papers i:nth-child(1) {
right: 76px;
top: 17px;
transform: rotate(-7deg);
background:
rgba(193,175,205,.45);
}
.mantra-guest-header-papers i:nth-child(2) {
right: 33px;
top: 3px;
transform: rotate(4deg);
background:
rgba(239,204,190,.55);
}
.mantra-guest-header-papers i:nth-child(3) {
right: 0;
top: 19px;
transform: rotate(-3deg);
background:
rgba(167,148,181,.40);
}
/* =====================================================
ЗВЁЗДЫ
===================================================== */
.mantra-guest-header-stars {
position: absolute;
inset: 0;
pointer-events: none;
color:
rgba(92,73,106,.70);
}
.mantra-guest-header-stars span {
position: absolute;
}
.mantra-guest-header-stars span:nth-child(1) {
top: 21px;
left: 65px;
font-size: 10px;
}
.mantra-guest-header-stars span:nth-child(2) {
top: 68px;
left: 108px;
font-size: 15px;
}
.mantra-guest-header-stars span:nth-child(3) {
top: 35px;
right: 203px;
font-size: 13px;
}
.mantra-guest-header-stars span:nth-child(4) {
top: 94px;
right: 150px;
font-size: 9px;
}
.mantra-guest-header-stars span:nth-child(5) {
bottom: 22px;
left: 228px;
font-size: 10px;
}
/* =====================================================
НАЗВАНИЕ
===================================================== */
.mantra-guest-brand {
position: absolute;
z-index: 4;
left: 50%;
top: 50%;
transform:
translate(-50%, -48%);
width: 430px;
text-align: center;
}
.mantra-guest-logo {
color: var(--mg-plum);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 66px;
font-weight: 400;
letter-spacing: 8px;
line-height: .9;
text-shadow:
0 1px 0 rgba(255,255,255,.45);
}
.mantra-guest-logo-line {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 210px;
margin: 10px auto 0;
color: var(--mg-peach);
}
.mantra-guest-logo-line span {
width: 72px;
height: 1px;
background:
linear-gradient(
to right,
transparent,
rgba(94,74,105,.45)
);
}
.mantra-guest-logo-line span:last-child {
background:
linear-gradient(
to left,
transparent,
rgba(94,74,105,.45)
);
}
.mantra-guest-logo-line b {
font-size: 12px;
font-weight: normal;
}
/* =====================================================
МИНИМАЛЬНЫЙ БОТАНИЧЕСКИЙ ДЕКОР
===================================================== */
.mantra-guest-header-botanical {
position: absolute;
z-index: 3;
left: 96px;
bottom: 23px;
width: 120px;
height: 67px;
transform: rotate(-10deg);
}
.mantra-guest-header-botanical::before {
content: "";
position: absolute;
left: 9px;
bottom: 18px;
width: 110px;
height: 1px;
background:
rgba(99,78,107,.42);
transform: rotate(-12deg);
}
.mg-leaf {
position: absolute;
display: block;
width: 19px;
height: 8px;
border-radius:
100% 0 100% 0;
background:
rgba(116,94,128,.53);
}
.mg-leaf-1 {
left: 22px;
bottom: 27px;
transform: rotate(-31deg);
}
.mg-leaf-2 {
left: 48px;
bottom: 18px;
transform: rotate(35deg);
}
.mg-leaf-3 {
left: 68px;
bottom: 34px;
transform: rotate(-34deg);
}
.mg-leaf-4 {
left: 92px;
bottom: 24px;
transform: rotate(40deg);
}
/* =====================================================
ВЕРХНЯЯ НАВИГАЦИЯ
===================================================== */
.mantra-guest-topbar {
display: flex;
align-items: center;
min-height: 52px;
padding:
13px 18px 8px;
gap: 15px;
background:
rgba(249,243,242,.93);
border-bottom:
1px solid
rgba(113,91,121,.10);
}
.mantra-guest-tags {
display: flex;
align-items: center;
gap: 13px;
margin-right: auto;
color: var(--mg-plum);
font-family: 'Manrope';
font-size: 11px;
white-space: nowrap;
}
.mantra-guest-tags-separator {
color: var(--mg-peach);
font-size: 10px;
}
/* =====================================================
ВЕРХНИЕ КНОПКИ
===================================================== */
.mantra-guest-toplinks {
display: flex;
gap: 6px;
}
.mantra-guest-toplink {
display: flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 18px;
padding: 0 12px 2px;
border: 1px solid rgba(112, 89, 121, .25);
border-radius: 3px;
background: rgba(255, 255, 255, .42);
color: #78657f !important;
font-family: 'Manrope';
font-size: 11px;
text-decoration: none !important;
transition: .22s ease;
}
.mantra-guest-toplink:hover {
color:
#fff !important;
background:
var(--mg-plum);
border-color:
var(--mg-plum);
transform:
translateY(-1px);
}
/* =====================================================
ОСНОВНОЙ БЛОК
===================================================== */
.mantra-guest-content {
position: relative;
z-index: 2;
padding:
10px 22px 22px;
}
/* =====================================================
ПРИВЕТСТВИЕ
===================================================== */
.mantra-guest-welcome {
padding: 9px 7px 4px;
color: #423846;
font-family: 'Manrope';
font-size: 11px;
line-height: 1.25;
text-align: justify;
}
/* =====================================================
РАЗДЕЛИТЕЛЬ
===================================================== */
.mantra-guest-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 54%;
margin:
13px auto 14px;
color:
var(--mg-peach);
}
.mantra-guest-divider span {
flex: 1;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(104,81,111,.35)
);
}
.mantra-guest-divider span:last-child {
background:
linear-gradient(
-90deg,
transparent,
rgba(104,81,111,.35)
);
}
.mantra-guest-divider b {
font-size: 17px;
font-weight: 400;
}
/* =====================================================
РЕЗЕРВЫ
===================================================== */
.mantra-guest-reserves {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 34px;
width: 87%;
margin: auto;
}
.mantra-guest-reserve {
position: relative;
min-width: 0;
}
/* =====================================================
ЗАГОЛОВОК КОЛОНКИ
===================================================== */
.mantra-guest-reserve-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
position: relative;
z-index: 3;
width: 82%;
min-height: 31px;
top: -9px;
margin: 0 auto -9px;
padding: 4px 16px;
color: var(--mg-plum);
font-family: 'Manrope';
font-size: 12px;
text-align: center;
}
.mantra-guest-title-star {
color:
var(--mg-peach);
font-size: 9px;
}
/* =====================================================
ОКНО СПИСКА
===================================================== */
.mantra-guest-reserve-box {
position: relative;
height: 145px;
padding: 25px 18px 13px;
overflow: hidden;
border: 1px solid rgba(123, 99, 129, .23);
border-radius: 2px;
background: radial-gradient(circle at 10% 0%, rgba(214, 195, 218, .24), transparent 34%), rgba(253, 248, 247, .70);
box-shadow: inset 0 0 19px rgba(136, 107, 137, .035), 0 3px 9px rgba(77, 58, 79, .035);
}
/* =====================================================
СПИСКИ
===================================================== */
.mantra-guest-reserve-list {
height: 144px;
overflow: auto;
color: #65556d;
font-family: 'Manrope';
font-size: 11px;
line-height: 1.5;
text-align: center;
scrollbar-width: thin;
scrollbar-color: rgba(115, 90, 124, .35) transparent;
}
.mantra-guest-reserve-list a {
color: #5f4d67 !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: color .2s ease;
font-size: 11px;
}
.mantra-guest-reserve-list a:hover {
color: #b0717e !important;
}
/* =====================================================
НИЖНЯЯ НАВИГАЦИЯ
===================================================== */
.mantra-guest-bottom-nav {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
.mantra-guest-bottom-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 89px;
height: 20px;
padding: 0 15px 2px;
border-radius: 2px;
background: linear-gradient(135deg, #9d8ba7, #806e8d);
color: #faf4f3 !important;
font-family: 'Manrope';
font-size: 11px;
text-decoration: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
transition: .22s ease;
}
.mantra-guest-bottom-link:hover {
background: linear-gradient(135deg,#d39a89,#a87683);
transform: translateY(-2px);
}
/* =====================================================
ПРАВЫЙ НИЖНИЙ ДЕКОР
===================================================== */
.mantra-guest-bottom-decor {
position: absolute;
z-index: 9;
right: -10px;
bottom: -25px;
width: 110px;
height: 110px;
pointer-events: none;
}
.mantra-guest-bottom-decor img {
height: 123px;
}
/* =====================================================
АДАПТИВ
===================================================== */
@media (max-width: 650px) {
.mantra-guest-header {
height: 125px;
}
.mantra-guest-logo {
font-size: 52px;
letter-spacing: 5px;
}
.mantra-guest-brand {
width: 300px;
}
.mantra-guest-topbar {
flex-direction: column;
align-items: center;
padding: 12px;
}
.mantra-guest-tags {
margin-right: 0;
}
.mantra-guest-toplinks {
flex-wrap: wrap;
justify-content: center;
}
.mantra-guest-reserves {
grid-template-columns: 1fr;
gap: 22px;
width: 93%;
}
.mantra-guest-welcome {
font-size: 14px;
}
.mantra-guest-bottom-decor {
display: none;
}
}
</style>
[/html]
<a href="ссылка на профиль">name surname</a> — actor | solo | group<br>
