- Регистрация
- 28 Дек 2023
- Сообщения
- 409
- Автор темы
- #1
Всем привет, сливаю для вас вот такие прикольные баннеры для вашего форума.
XenForo 2. 3
Автор: dev projects / Kolpak
XenForo 2. 3
Автор: dev projects / Kolpak
extra.less:
:root {
--banner-community-start: 0, 70%, 60%;
--banner-community-end: 0, 55%, 35%;
--banner-community-border: 0, 45%, 25%;
--banner-chief-start: 41, 70%, 60%;
--banner-chief-end: 41, 55%, 35%;
--banner-chief-border: 41°, 45%, 20%;
--banner-mod-lead-start: 271 76% 53%;
--banner-mod-lead-end: 271 76% 43%;
--banner-mod-lead-border: 271 76% 73%;
--banner-mod-deputy-start: 280 65% 60%;
--banner-mod-deputy-end: 280 65% 50%;
--banner-mod-deputy-border: 280 65% 80%;
--banner-tech-lead-start: 0 65% 45%;
--banner-tech-lead-end: 0 65% 35%;
--banner-tech-lead-border: 0 65% 65%;
--banner-tech-deputy-start: 25 95% 53%;
--banner-tech-deputy-end: 25 95% 43%;
--banner-tech-deputy-border: 25 95% 73%;
--banner-chief-mod-start: 221 83% 43%;
--banner-chief-mod-end: 221 83% 33%;
--banner-chief-mod-border: 221 83% 63%;
--banner-mod-deputy2-start: 199 89% 48%;
--banner-mod-deputy2-end: 199 89% 38%;
--banner-mod-deputy2-border: 199 89% 68%;
--banner-curator-mod-start: 243 75% 59%;
--banner-curator-mod-end: 243 75% 49%;
--banner-curator-mod-border: 243 75% 79%;
--banner-curator-tech-start: 38 92% 50%;
--banner-curator-tech-end: 38 92% 40%;
--banner-curator-tech-border: 38 92% 70%;
--banner-moderator-start: 142 76% 36%;
--banner-moderator-end: 142 76% 26%;
--banner-moderator-border: 142 76% 56%;
--banner-support-start: 173 80% 40%;
--banner-support-end: 173 80% 30%;
--banner-support-border: 173 80% 60%;
--banner-user-start: 215 14% 34%;
--banner-user-end: 215 14% 24%;
--banner-user-border: 215 14% 54%;
--banner-premium-start: 316 70% 50%;
--banner-premium-end: 45 93% 47%;
--banner-premium-border: 316 70% 70%;
}
/* Команда Сообщества */
.forum-banner-community {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-community-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-community-start)),
hsl(var(--banner-community-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-community::after {
content: 'TEAM';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-community:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(220, 38, 38, 0.4),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-community::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-community .userBanner-before {
position: relative;
z-index: 2;
width: 1.25rem;
height: 1.25rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-teamspeak-brands-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 2;
text-rendering: auto;
}
}
.forum-banner-community strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Главный Руководитель */
.forum-banner-chief {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-chief-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-chief-start)),
hsl(var(--banner-chief-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-chief::after {
content: 'CEO';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-chief:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-chief::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-chief .userBanner-before {
position: relative;
z-index: 2;
width: 1.25rem;
height: 1.25rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-friends, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-chief strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Пользователь */
.forum-banner-user {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-user-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-user-start)),
hsl(var(--banner-user-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-user::after {
content: 'USER';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-user:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-user::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-user .userBanner-before {
position: relative;
z-index: 2;
width: 1.25rem;
height: 1.25rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-user strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Руководитель Модерации */
.forum-banner-mod-lead {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-mod-lead-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-mod-lead-start)),
hsl(var(--banner-mod-lead-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-mod-lead::after {
content: 'MOD';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-mod-lead:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-mod-lead::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-mod-lead userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-shield-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-mod-lead strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Зам. Руководителя Модерации */
.forum-banner-mod-deputy {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-mod-deputy-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-mod-deputy-start)),
hsl(var(--banner-mod-deputy-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-mod-deputy::after {
content: 'DEPUTY';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-mod-deputy:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-mod-deputy::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-mod-deputy userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-shield-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-mod-deputy .strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Руководитель Тех. Поддержки */
.forum-banner-tech-lead {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-tech-lead-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-tech-lead-start)),
hsl(var(--banner-tech-lead-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-tech-lead::after {
content: 'TECH';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-tech-lead:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-tech-lead::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-tech-lead userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-shield-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-tech-lead strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Зам. Руководителя Тех. Поддержки */
.forum-banner-tech-deputy {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-tech-deputy-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-tech-deputy-start)),
hsl(var(--banner-tech-deputy-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-tech-deputy::after {
content: 'TECH';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-tech-deputy:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-tech-deputy::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-tech-deputy userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-user-shield-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-tech-deputy strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Главный Модератор */
.forum-banner-chief-mod {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-chief-mod-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-chief-mod-start)),
hsl(var(--banner-chief-mod-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-chief-mod::after {
content: 'CHIEF';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-chief-mod:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-chief-mod::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-chief-mod userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-users-cog-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-chief-mod strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Зам. Главного Модератора */
.forum-banner-mod-deputy2 {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-mod-deputy2-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-mod-deputy2-start)),
hsl(var(--banner-mod-deputy2-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-mod-deputy2::after {
content: 'DEPUTY';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-mod-deputy2:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-mod-deputy2::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-mod-deputy2 userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-users-cog-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-mod-deputy2 strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Куратор Модерации */
.forum-banner-curator-mod {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-curator-mod-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-curator-mod-start)),
hsl(var(--banner-curator-mod-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-curator-mod::after {
content: 'CURATOR';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-curator-mod:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-curator-mod::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-curator-mod userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-users-cog-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-curator-mod strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Куратор Тех. Поддержки */
.forum-banner-curator-tech {
position: relative;
overflow: hidden;
width: 100%;
max-width: 13rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-curator-tech-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-curator-tech-start)),
hsl(var(--banner-curator-tech-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-curator-tech::after {
content: 'CURATOR';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-curator-tech:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-curator-tech::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-curator-tech userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-users-cog-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-curator-tech strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Модератор */
.forum-banner-moderator {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-moderator-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-moderator-start)),
hsl(var(--banner-moderator-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-moderator::after {
content: 'MOD';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-moderator:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-moderator::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-moderator userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-monero-brands-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-moderator strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Техническая Поддержка */
.forum-banner-support {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-support-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-support-start)),
hsl(var(--banner-support-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-support::after {
content: 'SUPPORT';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-support:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-support::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-support userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-headset-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-support strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Premium */
.forum-banner-premium {
position: relative;
overflow: hidden;
width: 100%;
max-width: 12rem;
margin: 0 auto;
padding: 0.75rem 1rem;
border-radius: 1rem;
border: 2px solid hsl(var(--banner-premium-border));
background: linear-gradient(
to bottom right,
hsl(var(--banner-premium-start)),
hsl(var(--banner-premium-end))
);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 2px 8px rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.forum-banner-premium::after {
content: 'VIP';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
letter-spacing: -0.05em;
user-select: none;
pointer-events: none;
white-space: nowrap;
}
.forum-banner-premium:hover {
transform: scale(1.02);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.3),
inset 0 2px 12px rgba(255, 255, 255, 0.15);
}
.forum-banner-premium::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
rgba(0, 0, 0, 0.2)
);
border-radius: 1rem;
pointer-events: none;
z-index: 1;
}
.forum-banner-premium .userBanner-before {
position: relative;
z-index: 2;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
&:before {
.m-faContent(@fa-var-hat-cowboy-solid, 1.25rem);
speak: none;
aria-hidden: true;
display: inline-block;
line-height: 1;
text-rendering: auto;
}
}
.forum-banner-premium strong {
position: relative;
z-index: 2;
color: white;
font-weight: bold;
font-size: 0.6rem;
letter-spacing: 0.025em;
text-transform: uppercase;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
