Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Решено ищу екстра лесс

Статус
В этой теме нельзя размещать новые ответы.
Решение
css:
.userBanner.userBanner--staff {
    background: linear-gradient(145deg, #2c2416, #3e351f) !important;
    border: 1.5px solid #f1c40f !important;
    border-radius: 30px !important;
    padding: 3px 14px 3px 10px !important;
    color: #fff8e7 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(241,196,15,0.4),inset 0 1px 3px rgba(255,215,0,0.2) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.userBanner.userBanner--staff i.fa,.userBanner.userBanner--staff::before {
    color: #f1c40f...
Фев
213
92
Активный
css:
.userBanner.userBanner--staff {
    background: linear-gradient(145deg, #2c2416, #3e351f) !important;
    border: 1.5px solid #f1c40f !important;
    border-radius: 30px !important;
    padding: 3px 14px 3px 10px !important;
    color: #fff8e7 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(241,196,15,0.4),inset 0 1px 3px rgba(255,215,0,0.2) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.userBanner.userBanner--staff i.fa,.userBanner.userBanner--staff::before {
    color: #f1c40f;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 3px #f39c12);
    animation: sunPulse 3s infinite ease-in-out
}

.userBanner.userBanner--staff::before {
    content: "✦";
    position: absolute;
    left: -4px;
    top: -4px;
    font-size: 8px;
    color: #f1c40f;
    filter: drop-shadow(0 0 3px #f39c12);
    opacity: 0.9;
    animation: sparkRotate 3s infinite
}

.userBanner.userBanner--staff::after {
    content: "✧";
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 8px;
    color: #f39c12;
    filter: drop-shadow(0 0 3px #f1c40f);
    opacity: 0.9;
    animation: sparkRotate 3s infinite .5s
}

.userBanner.userBanner--staff:hover {
    background: linear-gradient(145deg, #3e351f, #4d4127) !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 18px #f1c40f,0 0 30px #f39c12 !important;
    transform: translateY(-1px)
}

.userBanner.userBanner--staff:hover i.fa,.userBanner.userBanner--staff:hover::before {
    animation: none;
    transform: scale(1.2) rotate(10deg);
    color: #ffffff
}

.userBanner.userBanner--staff:hover::before,.userBanner.userBanner--staff:hover::after {
    animation: sparkIntense 1s infinite;
    color: #ffd700
}

.prefix-project-owner-small {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px 1px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #9a7d0b;
    border-radius: 8px 1px 8px 1px;
    border: 1px solid #e3b34c;
    color: #fef9e7;
    line-height: 1.2
}

.prefix-project-owner-small:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f521";
    width: 1.28571429em;
    display: inline-block;
    text-align: center;
    margin-right: 3px;
    font-size: 0.6rem;
    color: #f3c96b
}

.prefix-admin-head-small {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 5px 1px 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: #8e44ad !important;
    border-radius: 8px 1px 8px 1px !important;
    border: 1px solid #c39bd3 !important;
    color: #f5eef8 !important;
    line-height: 1.2 !important
}

.prefix-admin-head-small::before {
    content: "👔 " !important;
    font-size: 0.7rem !important;
    color: #d7b5e6 !important;
    display: inline-block !important;
    margin-right: 3px !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important
}

.prefix-project-head-small {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 5px 1px 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: #8a4b08 !important;
    border-radius: 8px 1px 8px 1px !important;
    border: 1px solid #d4a15d !important;
    color: #fff6e6 !important;
    line-height: 1.2 !important
}

.prefix-project-head-small::before {
    content: "📊 " !important;
    font-size: 0.7rem !important;
    color: #e6b86b !important;
    display: inline-block !important;
    margin-right: 3px !important;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important
}

.projectManagerExecutive {
    background: linear-gradient(145deg, #1a2634, #2c3e50, #1e2b3a) !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #ecf0f1 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 12px rgba(52,152,219,0.3),0 0 8px rgba(212,175,55,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.projectManagerExecutive i.fa {
    background: linear-gradient(135deg, #d4af37, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #f1c40f);
    animation: pmPulse 3s infinite ease-in-out
}

.projectManagerExecutive::before {
    content: "●";
    position: absolute;
    left: -3px;
    top: -3px;
    font-size: 6px;
    color: #d4af37;
    filter: drop-shadow(0 0 5px #f1c40f);
    animation: dotPulse 2s infinite
}

.projectManagerExecutive::after {
    content: "●";
    position: absolute;
    right: -3px;
    bottom: -3px;
    font-size: 6px;
    color: #3498db;
    filter: drop-shadow(0 0 5px #3498db);
    animation: dotPulse 2s infinite .3s
}

.projectManagerExecutive:hover {
    background: linear-gradient(145deg, #2c3e50, #1a2634) !important;
    border-color: #3498db !important;
    box-shadow: 0 0 20px #3498db,0 0 30px #d4af37 !important;
    transform: translateY(-1px)
}

.projectManagerExecutive:hover i.fa {
    animation: none;
    transform: scale(1.15) rotate(5deg);
    background: linear-gradient(135deg, #fff, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.projectManagerExecutive:hover::before,.projectManagerExecutive:hover::after {
    animation: dotIntense 1s infinite
}

@keyframes pmPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #d4af37)
    }

    50% {
        transform: scale(1.1) rotate(3deg);
        filter: drop-shadow(0 0 10px #f1c40f)
    }
}

@keyframes dotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
        filter: drop-shadow(0 0 5px currentColor)
    }
}

@keyframes dotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2);
        opacity: 1;
        filter: drop-shadow(0 0 8px #ffd700)
    }
}

.headAdminImperial {
    background: linear-gradient(145deg, #1a0f1f, #2a1a2f, #3a1f3f) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #d4af37, #9b59b6, #d4af37) !important;
    border-image-slice: 1 !important;
    border-radius: 40px !important;
    padding: 3px 18px 3px 14px !important;
    color: #f5eef7 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(155,89,182,0.5),0 0 10px rgba(212,175,55,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .3s ease;
    position: relative
}

.headAdminImperial i.fa {
    background: linear-gradient(135deg, #d4af37, #f1c40f, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 8px;
    font-size: 14px;
    filter: drop-shadow(0 0 8px #f1c40f);
    animation: imperialPulse 3s infinite ease-in-out
}

.headAdminImperial::before {
    content: "👑";
    position: absolute;
    left: -6px;
    top: -10px;
    font-size: 12px;
    filter: drop-shadow(0 0 8px #d4af37);
    animation: crownFloat 3s infinite;
    opacity: 0.9
}

.headAdminImperial::after {
    content: "✨✨";
    position: absolute;
    right: -8px;
    bottom: -10px;
    font-size: 8px;
    letter-spacing: 2px;
    color: #d4af37;
    filter: drop-shadow(0 0 5px #ffd700);
    animation: sparklesFloat 3s infinite .5s;
    opacity: 0.8;
    white-space: nowrap
}

.headAdminImperial:hover {
    background: linear-gradient(145deg, #2a1a2f, #3a1f3f, #4a2a4f) !important;
    border-image: linear-gradient(135deg, #f1c40f, #bb8fce, #f1c40f) !important;
    border-image-slice: 1 !important;
    box-shadow: 0 0 30px #9b59b6,0 0 45px #d4af37 !important;
    transform: translateY(-2px) scale(1.02)
}

.headAdminImperial:hover i.fa {
    animation: none;
    transform: scale(1.2) rotate(5deg);
    background: linear-gradient(135deg, #fff, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.headAdminImperial:hover::before {
    animation: crownBounce 1s infinite
}

.headAdminImperial:hover::after {
    animation: sparklesIntense 1s infinite
}

@keyframes imperialPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 5px #d4af37)
    }

    50% {
        transform: scale(1.15) rotate(3deg);
        filter: drop-shadow(0 0 15px #f1c40f, 0 0 25px #9b59b6)
    }
}

@keyframes crownFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 12px #ffd700)
    }
}

@keyframes crownBounce {
    0%,100% {
        transform: scale(1);
        opacity: 0.9
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 15px #ffd700)
    }
}

@keyframes sparklesFloat {
    0%,100% {
        transform: translateY(0) scale(1);
        opacity: 0.7
    }

    50% {
        transform: translateY(-3px) scale(1.2);
        opacity: 1;
        filter: drop-shadow(0 0 10px #ffd700)
    }
}

@keyframes sparklesIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 15px #ffd700)
    }
}

.deputyHeadAdmin {
    background: linear-gradient(145deg, #1e1a2a, #2a1f3a, #2a2350) !important;
    border: 1.5px solid #c0c0c0 !important;
    border-radius: 35px !important;
    padding: 3px 16px 3px 12px !important;
    color: #f0e6ff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(155,89,182,0.3),0 0 5px rgba(192,192,192,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.deputyHeadAdmin i.fa {
    background: linear-gradient(135deg, #e0e0e0, #b39ddb, #9575cd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #b39ddb);
    animation: deputyPulse 3s infinite ease-in-out
}

.deputyHeadAdmin::before {
    content: "⚜️";
    position: absolute;
    left: -5px;
    top: -7px;
    font-size: 9px;
    filter: drop-shadow(0 0 5px #c0c0c0);
    animation: deputyFloat 3s infinite;
    opacity: 0.8
}

.deputyHeadAdmin::after {
    content: "⬤";
    position: absolute;
    right: -3px;
    bottom: -5px;
    font-size: 6px;
    color: #9b59b6;
    filter: drop-shadow(0 0 5px #9b59b6);
    animation: deputyDotPulse 2.5s infinite;
    opacity: 0.7
}

.deputyHeadAdmin:hover {
    background: linear-gradient(145deg, #2a1f3a, #2a2350, #1e1a2a) !important;
    border-color: #b39ddb !important;
    box-shadow: 0 0 20px #9b59b6,0 0 15px #c0c0c0 !important;
    transform: translateY(-1px)
}

.deputyHeadAdmin:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(3deg);
    background: linear-gradient(135deg, #fff, #d2b4de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.deputyHeadAdmin:hover::before {
    animation: deputyFloatIntense 1s infinite
}

.deputyHeadAdmin:hover::after {
    animation: deputyDotIntense 1s infinite
}

@keyframes deputyPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #b39ddb)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #9575cd)
    }
}

@keyframes deputyFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7
    }

    50% {
        transform: translateY(-3px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #c0c0c0)
    }
}

@keyframes deputyFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 12px #c0c0c0)
    }
}

@keyframes deputyDotPulse {
    0%,100% {
        opacity: 0.6;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
        filter: drop-shadow(0 0 8px #9b59b6)
    }
}

@keyframes deputyDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.7
    }

    50% {
        transform: scale(2);
        opacity: 1;
        filter: drop-shadow(0 0 12px #9b59b6)
    }
}

.specialDeputyAdmin {
    background: linear-gradient(145deg, #1a2634, #0b2a3a, #0e3342) !important;
    border: 1.5px solid #cd7f32 !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #e6f0fa !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(205,127,50,0.3),0 0 5px rgba(40,116,166,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.specialDeputyAdmin i.fa {
    color: #cd7f32;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #b87333);
    animation: specialPulse 3s infinite ease-in-out
}

.specialDeputyAdmin::before {
    content: "🔷";
    position: absolute;
    left: -5px;
    top: -7px;
    font-size: 9px;
    filter: drop-shadow(0 0 5px #2874a6);
    animation: specialFloat 3s infinite;
    opacity: 0.9
}

.specialDeputyAdmin::after {
    content: "⬤";
    position: absolute;
    right: -3px;
    bottom: -5px;
    font-size: 6px;
    color: #cd7f32;
    filter: drop-shadow(0 0 5px #b87333);
    animation: specialDotPulse 2.5s infinite;
    opacity: 0.8
}

.specialDeputyAdmin:hover {
    background: linear-gradient(145deg, #0b2a3a, #0e3342, #1a2634) !important;
    border-color: #2874a6 !important;
    box-shadow: 0 0 20px #2874a6,0 0 15px #cd7f32 !important;
    transform: translateY(-1px)
}

.specialDeputyAdmin:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(3deg);
    color: #e6b87e
}

.specialDeputyAdmin:hover::before {
    animation: specialFloatIntense 1s infinite
}

.specialDeputyAdmin:hover::after {
    animation: specialDotIntense 1s infinite
}

@keyframes specialPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #cd7f32)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #b87333)
    }
}

@keyframes specialFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-3px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #2874a6)
    }
}

@keyframes specialFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 12px #2874a6)
    }
}

@keyframes specialDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
        filter: drop-shadow(0 0 8px #cd7f32)
    }
}

@keyframes specialDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2);
        opacity: 1;
        filter: drop-shadow(0 0 12px #cd7f32)
    }
}

.specialAdmin {
    background: linear-gradient(145deg, #3a0a0a, #4d0f0f, #601414) !important;
    border: 1.8px solid #ff4d4d !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #fff5f5 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(255,77,77,0.5),0 0 5px rgba(255,77,77,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.specialAdmin i.fa {
    color: #ff6666;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #ff4d4d);
    animation: specialAdminPulse 3s infinite ease-in-out
}

.specialAdmin::before {
    content: "🔴";
    position: absolute;
    left: -6px;
    top: -8px;
    font-size: 10px;
    color: #ff4d4d;
    filter: drop-shadow(0 0 6px #f33);
    animation: specialAdminFloat 3s infinite;
    opacity: 0.9
}

.specialAdmin::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #cc3333;
    filter: drop-shadow(0 0 6px #ff4d4d);
    animation: specialAdminDotPulse 2.5s infinite;
    opacity: 0.9
}

.specialAdmin:hover {
    background: linear-gradient(145deg, #4d0f0f, #601414, #3a0a0a) !important;
    border-color: #ff6666 !important;
    box-shadow: 0 0 25px #ff4d4d,0 0 20px #f66 !important;
    transform: translateY(-1px)
}

.specialAdmin:hover i.fa {
    animation: none;
    transform: scale(1.15) rotate(3deg);
    color: #ffffff
}

.specialAdmin:hover::before {
    animation: specialAdminFloatIntense 1s infinite;
    color: #ff8080
}

.specialAdmin:hover::after {
    animation: specialAdminDotIntense 1s infinite;
    color: #ff8080
}

@keyframes specialAdminPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #f66)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #ff4d4d)
    }
}

@keyframes specialAdminFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #ff4d4d)
    }
}

@keyframes specialAdminFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 15px #ff4d4d)
    }
}

@keyframes specialAdminDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #ff4d4d)
    }
}

@keyframes specialAdminDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #f66)
    }
}

.projectOwnerRed {
    background: linear-gradient(145deg, #2a0f0f, #3a1414, #4d1a1a) !important;
    border: 1.8px solid transparent !important;
    border-image: linear-gradient(135deg, #ff4d4d, #f00, #c00, #900) !important;
    border-image-slice: 1 !important;
    border-radius: 40px !important;
    padding: 3px 16px 3px 12px !important;
    color: #fff0f0 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(255,0,0,0.5),0 2px 8px rgba(0,0,0,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.projectOwnerRed i.fa {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 6px;
    font-size: 14px;
    filter: drop-shadow(0 0 5px #ff8c00);
    animation: ownerPulse 2.5s infinite ease-in-out
}

.projectOwnerRed::before {
    content: "💎";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 10px;
    filter: drop-shadow(0 0 5px #f00);
    animation: diamondFloat 3s infinite;
    opacity: 0.9
}

.projectOwnerRed::after {
    content: "✨";
    position: absolute;
    right: -5px;
    bottom: -8px;
    font-size: 10px;
    filter: drop-shadow(0 0 5px #fa0);
    animation: sparkFloat 3s infinite .5s;
    opacity: 0.9
}

.projectOwnerRed:hover {
    background: linear-gradient(145deg, #3a1414, #5a1e1e) !important;
    border-image: linear-gradient(135deg, #fa0, #ff4d4d, #f00) !important;
    border-image-slice: 1 !important;
    box-shadow: 0 0 25px #f00,0 0 40px #c00 !important;
    transform: translateY(-2px) scale(1.02)
}

.projectOwnerRed:hover i.fa {
    animation: none;
    transform: scale(1.2) rotate(360deg);
    background: linear-gradient(135deg, #fff, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all .5s ease
}

.projectOwnerRed:hover::before,.projectOwnerRed:hover::after {
    animation: sparkIntense 1s infinite
}

@keyframes ownerPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #ff4d4d)
    }

    50% {
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 15px #f00)
    }
}

@keyframes diamondFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-3px) rotate(10deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #f00)
    }
}

@keyframes sparkFloat {
    0%,100% {
        transform: translateY(0) scale(1);
        opacity: 0.8
    }

    50% {
        transform: translateY(-2px) scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 10px #ffd700)
    }
}

@keyframes sparkIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.9
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
        filter: drop-shadow(0 0 12px #ffd700)
    }
}

.adminCurator {
    background: linear-gradient(145deg, #1a3a2a, #1e4a2e, #235b32) !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #f0fff0 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(46,139,87,0.4),0 0 5px rgba(212,175,55,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.adminCurator i.fa {
    color: #d4af37;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #f1c40f);
    animation: curatorPulse 3s infinite ease-in-out
}

.adminCurator::before {
    content: "🌿";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 10px;
    filter: drop-shadow(0 0 5px #d4af37);
    animation: curatorFloat 3s infinite;
    opacity: 0.9
}

.adminCurator::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #2e8b57;
    filter: drop-shadow(0 0 6px #3cb371);
    animation: curatorDotPulse 2.5s infinite;
    opacity: 0.9
}

.adminCurator:hover {
    background: linear-gradient(145deg, #1e4a2e, #235b32, #1a3a2a) !important;
    border-color: #2e8b57 !important;
    box-shadow: 0 0 20px #2e8b57,0 0 15px #d4af37 !important;
    transform: translateY(-1px)
}

.adminCurator:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(3deg);
    color: #f1c40f
}

.adminCurator:hover::before {
    animation: curatorFloatIntense 1s infinite;
    content: "🌟"
}

.adminCurator:hover::after {
    animation: curatorDotIntense 1s infinite;
    color: #d4af37
}

@keyframes curatorPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #d4af37)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #f1c40f)
    }
}

@keyframes curatorFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #d4af37)
    }
}

@keyframes curatorFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

@keyframes curatorDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #2e8b57)
    }
}

@keyframes curatorDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

.rolexOwner {
    background: linear-gradient(145deg, #1a0f0a, #2a1a0f) !important;
    border: 2px solid #d4af37 !important;
    border-radius: 30px !important;
    padding: 3px 18px 3px 14px !important;
    color: #fff8e7 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    box-shadow: 0 0 25px rgba(212,175,55,0.5) !important
}

.rolexOwner i.fa {
    color: #d4af37;
    margin-right: 6px;
    font-size: 14px;
    animation: goldPulse 3s infinite
}

.rolexOwner::before {
    content: "👑";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 10px;
    filter: drop-shadow(0 0 5px #ffd700);
    animation: float 3s infinite
}

.rolexOwner::after {
    content: "✨";
    position: absolute;
    right: -5px;
    bottom: -8px;
    font-size: 8px;
    filter: drop-shadow(0 0 5px #ffd700);
    animation: sparkle 3s infinite .5s
}

.rolexAdminBlue {
    background: linear-gradient(145deg, #0b2545, #0f2b4d, #133456) !important;
    border: 1.8px solid #d4af37 !important;
    border-radius: 35px !important;
    padding: 3px 18px 3px 14px !important;
    color: #f0f8ff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(40,116,166,0.4),0 0 10px rgba(212,175,55,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.rolexAdminBlue i.fa {
    color: #d4af37;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #f1c40f);
    animation: rolexBluePulse 3s infinite ease-in-out
}

.rolexAdminBlue::before {
    content: "⭐";
    position: absolute;
    left: -6px;
    top: -10px;
    font-size: 10px;
    filter: drop-shadow(0 0 6px #d4af37);
    animation: rolexBlueFloat 3s infinite;
    opacity: 0.9
}

.rolexAdminBlue::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #2874a6;
    filter: drop-shadow(0 0 6px #3498db);
    animation: rolexBlueDotPulse 2.5s infinite;
    opacity: 0.9
}

.rolexAdminBlue:hover {
    background: linear-gradient(145deg, #0f2b4d, #133456, #0b2545) !important;
    border-color: #3498db !important;
    box-shadow: 0 0 25px #3498db,0 0 20px #d4af37 !important;
    transform: translateY(-1px)
}

.rolexAdminBlue:hover i.fa {
    animation: none;
    transform: scale(1.15) rotate(3deg);
    color: #f1c40f
}

.rolexAdminBlue:hover::before {
    animation: rolexBlueFloatIntense 1s infinite;
    content: "✨"
}

.rolexAdminBlue:hover::after {
    animation: rolexBlueDotIntense 1s infinite;
    color: #d4af37
}

@keyframes rolexBluePulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #d4af37)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #f1c40f)
    }
}

@keyframes rolexBlueFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #d4af37)
    }
}

@keyframes rolexBlueFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

@keyframes rolexBlueDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #2874a6)
    }
}

@keyframes rolexBlueDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

.rolexViceOwner {
    background: linear-gradient(145deg, #1a1f2a, #252b36, #2c333f) !important;
    border: 2px solid #e5e4e2 !important;
    border-radius: 35px !important;
    padding: 3px 18px 3px 14px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 25px rgba(229,228,226,0.3),0 0 15px rgba(212,175,55,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.rolexViceOwner i.fa {
    color: #d4af37;
    margin-right: 6px;
    font-size: 14px;
    filter: drop-shadow(0 0 5px #f1c40f);
    animation: rolexVicePulse 3s infinite ease-in-out
}

.rolexViceOwner::before {
    content: "👑";
    position: absolute;
    left: -7px;
    top: -10px;
    font-size: 11px;
    filter: drop-shadow(0 0 8px #d4af37);
    animation: rolexViceFloat 3s infinite;
    opacity: 0.9
}

.rolexViceOwner::after {
    content: "⬤";
    position: absolute;
    right: -5px;
    bottom: -7px;
    font-size: 8px;
    color: #e5e4e2;
    filter: drop-shadow(0 0 8px #d4af37);
    animation: rolexViceDotPulse 2.5s infinite;
    opacity: 0.9
}

.rolexViceOwner:hover {
    background: linear-gradient(145deg, #252b36, #2c333f, #1a1f2a) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 30px #d4af37,0 0 25px #e5e4e2 !important;
    transform: translateY(-2px)
}

.rolexViceOwner:hover i.fa {
    animation: none;
    transform: scale(1.2) rotate(5deg);
    color: #f1c40f
}

.rolexViceOwner:hover::before {
    animation: rolexViceFloatIntense 1s infinite;
    filter: drop-shadow(0 0 12px #ffd700)
}

.rolexViceOwner:hover::after {
    animation: rolexViceDotIntense 1s infinite;
    color: #d4af37
}

@keyframes rolexVicePulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 3px #d4af37)
    }

    50% {
        transform: scale(1.15) rotate(3deg);
        filter: drop-shadow(0 0 15px #f1c40f)
    }
}

@keyframes rolexViceFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-5px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 12px #d4af37)
    }
}

@keyframes rolexViceFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
        filter: drop-shadow(0 0 20px #ffd700)
    }
}

@keyframes rolexViceDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.8);
        filter: drop-shadow(0 0 12px #e5e4e2)
    }
}

@keyframes rolexViceDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.5);
        opacity: 1;
        filter: drop-shadow(0 0 18px #d4af37)
    }
}

.rolexDeputyPM {
    background: linear-gradient(145deg, #1a2a3a, #1e3347, #223b54) !important;
    border: 1.8px solid #e5e4e2 !important;
    border-radius: 35px !important;
    padding: 3px 18px 3px 14px !important;
    color: #f0f8ff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(52,152,219,0.3),0 0 10px rgba(229,228,226,0.2) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.rolexDeputyPM i.fa {
    color: #e5e4e2;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #d4af37);
    animation: rolexDeputyPulse 3s infinite ease-in-out
}

.rolexDeputyPM::before {
    content: "⭐";
    position: absolute;
    left: -6px;
    top: -9px;
    font-size: 10px;
    filter: drop-shadow(0 0 6px #d4af37);
    animation: rolexDeputyFloat 3s infinite;
    opacity: 0.9
}

.rolexDeputyPM::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #3498db;
    filter: drop-shadow(0 0 6px #5dade2);
    animation: rolexDeputyDotPulse 2.5s infinite;
    opacity: 0.9
}

.rolexDeputyPM:hover {
    background: linear-gradient(145deg, #1e3347, #223b54, #1a2a3a) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 25px #3498db,0 0 20px #d4af37 !important;
    transform: translateY(-1px)
}

.rolexDeputyPM:hover i.fa {
    animation: none;
    transform: scale(1.15) rotate(3deg);
    color: #ffffff
}

.rolexDeputyPM:hover::before {
    animation: rolexDeputyFloatIntense 1s infinite;
    content: "✨"
}

.rolexDeputyPM:hover::after {
    animation: rolexDeputyDotIntense 1s infinite;
    color: #d4af37
}

@keyframes rolexDeputyPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #e5e4e2)
    }

    50% {
        transform: scale(1.1) rotate(2deg);
        filter: drop-shadow(0 0 10px #d4af37)
    }
}

@keyframes rolexDeputyFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #d4af37)
    }
}

@keyframes rolexDeputyFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

@keyframes rolexDeputyDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #3498db)
    }
}

@keyframes rolexDeputyDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #d4af37)
    }
}

.techChiefOrange {
    background: linear-gradient(145deg, #2a1f15, #3a2a1a, #4a3320) !important;
    border: 1.5px solid #ff8c42 !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #fff5e6 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(255,140,66,0.4),0 0 5px rgba(230,126,34,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.techChiefOrange i.fa {
    color: #ff8c42;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #e67e22);
    animation: techOrangePulse 3s infinite ease-in-out
}

.techChiefOrange::before {
    content: "⚡";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 9px;
    filter: drop-shadow(0 0 5px #ff8c42);
    animation: techOrangeFloat 3s infinite;
    opacity: 0.9
}

.techChiefOrange::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #ff8c42;
    filter: drop-shadow(0 0 6px #e67e22);
    animation: techOrangeDotPulse 2.5s infinite;
    opacity: 0.9
}

.techChiefOrange:hover {
    background: linear-gradient(145deg, #3a2a1a, #4a3320, #2a1f15) !important;
    border-color: #e67e22 !important;
    box-shadow: 0 0 20px #ff8c42,0 0 15px #d35400 !important;
    transform: translateY(-1px)
}

.techChiefOrange:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(5deg);
    color: #ffb347
}

.techChiefOrange:hover::before {
    animation: techOrangeFloatIntense 1s infinite
}

.techChiefOrange:hover::after {
    animation: techOrangeDotIntense 1s infinite
}

@keyframes techOrangePulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #ff8c42)
    }

    50% {
        transform: scale(1.1) rotate(3deg);
        filter: drop-shadow(0 0 10px #e67e22)
    }
}

@keyframes techOrangeFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #ff8c42)
    }
}

@keyframes techOrangeFloatIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 12px #ff8c42)
    }
}

@keyframes techOrangeDotPulse {
    0%,100% {
        opacity: 0.7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #ff8c42)
    }
}

@keyframes techOrangeDotIntense {
    0%,100% {
        transform: scale(1);
        opacity: 0.8
    }

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #e67e22)
    }
}
 
🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙‍🤙
Май
1,070
581
Активный
Статус
В этой теме нельзя размещать новые ответы.
Сверху