.honoredRole {
background: linear-gradient(145deg, #4a3a0a, #6b550e, #8c7012) !important;
border: 1.5px solid #f1c40f !important;
border-radius: 30px !important;
padding: 3px 16px 3px 12px !important;
color: #fff8e7 !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
box-shadow: 0 0 15px rgba(241,196,15,0.4),0 0 5px rgba(241,196,15,0.3) !important;
backdrop-filter: blur(2px);
display: inline-flex !important;
align-items: center;
transition: all .25s ease;
position: relative
}
.honoredRole i.fa {
color: #f1c40f;
margin-right: 6px;
font-size: 13px;
filter: drop-shadow(0 0 4px #f1c40f);
animation: honoredPulse 3s infinite ease-in-out
}
.honoredRole::before {
content: "⭐";
position: absolute;
left: -5px;
top: -8px;
font-size: 9px;
filter: drop-shadow(0 0 5px #f1c40f);
animation: honoredFloat 3s infinite;
opacity: 0.9
}
.honoredRole::after {
content: "⬤";
position: absolute;
right: -4px;
bottom: -6px;
font-size: 7px;
color: #f1c40f;
filter: drop-shadow(0 0 6px #f39c12);
animation: honoredDotPulse 2.5s infinite;
opacity: 0.9
}
.honoredRole:hover {
background: linear-gradient(145deg, #6b550e, #8c7012, #4a3a0a) !important;
border-color: #f39c12 !important;
box-shadow: 0 0 20px #f1c40f,0 0 15px #f39c12 !important;
transform: translateY(-1px)
}
.honoredRole:hover i.fa {
animation: none;
transform: scale(1.1) rotate(5deg);
color: #ffd966
}
.honoredRole:hover::before {
animation: honoredFloatIntense 1s infinite;
content: "🏆"
}
.honoredRole:hover::after {
animation: honoredDotIntense 1s infinite;
color: #ffd966
}
@keyframes honoredPulse {
0%,100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 2px #f39c12)
}
50% {
transform: scale(1.1) rotate(3deg);
filter: drop-shadow(0 0 10px #f1c40f)
}
}
@keyframes honoredFloat {
0%,100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8
}
50% {
transform: translateY(-4px) rotate(5deg);
opacity: 1;
filter: drop-shadow(0 0 8px #f39c12)
}
}
@keyframes honoredFloatIntense {
0%,100% {
transform: scale(1);
opacity: 0.8
}
50% {
transform: scale(1.4);
opacity: 1;
filter: drop-shadow(0 0 12px #f1c40f)
}
}
@keyframes honoredDotPulse {
0%,100% {
opacity: 0.7;
transform: scale(1)
}
50% {
opacity: 1;
transform: scale(1.6);
filter: drop-shadow(0 0 10px #f1c40f)
}
}
@keyframes honoredDotIntense {
0%,100% {
transform: scale(1);
opacity: 0.8
}
50% {
transform: scale(2.2);
opacity: 1;
filter: drop-shadow(0 0 15px #f39c12)
}
}
.forbesBadge {
background: linear-gradient(145deg, #1e1a0e, #2a2416) !important;
border: 1.5px solid #d4af37 !important;
border-radius: 40px !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(212,175,55,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
}
.forbesBadge i.fa {
color: #ffd966;
margin-right: 6px;
font-size: 13px;
filter: drop-shadow(0 0 3px #ffb347);
animation: moneyFloat 2.5s infinite ease-in-out
}
.forbesBadge::after {
content: "✨";
position: absolute;
right: -2px;
top: -6px;
font-size: 8px;
opacity: 0.6;
animation: spark 3s infinite;
filter: drop-shadow(0 0 2px #ffd700)
}
.forbesBadge:hover {
background: linear-gradient(145deg, #2a2416, #3e3520) !important;
box-shadow: 0 0 18px #f1c40f !important;
border-color: #f1c40f !important;
transform: translateY(-1px)
}
.forbesBadge:hover i.fa {
animation: none;
transform: scale(1.1);
color: #ffd700
}
@keyframes moneyFloat {
0%,100% {
transform: translateY(0) rotate(0deg)
}
25% {
transform: translateY(-1px) rotate(-3deg)
}
75% {
transform: translateY(1px) rotate(3deg)
}
}
@keyframes spark {
0%,100% {
opacity: 0.4;
transform: scale(.8)
}
50% {
opacity: 1;
transform: scale(1.2);
filter: drop-shadow(0 0 4px #ffd700)
}
}
.userRole {
background: linear-gradient(145deg, #2a2a2e, #3a3a42, #2f2f35) !important;
border: 1.5px solid #6c6c7c !important;
border-radius: 30px !important;
padding: 3px 16px 3px 12px !important;
color: #e0e0e5 !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
box-shadow: 0 0 15px rgba(108,108,124,0.25),0 0 5px rgba(88,88,104,0.2) !important;
backdrop-filter: blur(2px);
display: inline-flex !important;
align-items: center;
transition: all .25s ease;
position: relative
}
.userRole i.fa {
color: #9a9ab0;
margin-right: 6px;
font-size: 13px;
filter: drop-shadow(0 0 4px #6c6c7c);
animation: userPulse 3s infinite ease-in-out
}
.userRole::before {
content: "⚙️";
position: absolute;
left: -5px;
top: -8px;
font-size: 9px;
filter: drop-shadow(0 0 5px #9a9ab0);
animation: userFloat 3s infinite;
opacity: 0.9
}
.userRole::after {
content: "⬤";
position: absolute;
right: -4px;
bottom: -6px;
font-size: 7px;
color: #6c6c7c;
filter: drop-shadow(0 0 6px #9a9ab0);
animation: userDotPulse 2.5s infinite;
opacity: 0.9
}
.userRole:hover {
background: linear-gradient(145deg, #3a3a42, #2f2f35, #2a2a2e) !important;
border-color: #9a9ab0 !important;
box-shadow: 0 0 20px #6c6c7c,0 0 15px #9a9ab0 !important;
transform: translateY(-1px)
}
.userRole:hover i.fa {
animation: none;
transform: scale(1.1) rotate(5deg);
color: #b8b8cc
}
.userRole:hover::before {
animation: userFloatIntense 1s infinite;
content: "🔧"
}
.userRole:hover::after {
animation: userDotIntense 1s infinite;
color: #b8b8cc
}
@keyframes userPulse {
0%,100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 2px #9a9ab0)
}
50% {
transform: scale(1.1) rotate(3deg);
filter: drop-shadow(0 0 10px #6c6c7c)
}
}
@keyframes userFloat {
0%,100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8
}
50% {
transform: translateY(-4px) rotate(5deg);
opacity: 1;
filter: drop-shadow(0 0 8px #9a9ab0)
}
}
@keyframes userFloatIntense {
0%,100% {
transform: scale(1);
opacity: 0.8
}
50% {
transform: scale(1.4);
opacity: 1;
filter: drop-shadow(0 0 12px #9a9ab0)
}
}
@keyframes userDotPulse {
0%,100% {
opacity: 0.7;
transform: scale(1)
}
50% {
opacity: 1;
transform: scale(1.6);
filter: drop-shadow(0 0 10px #6c6c7c)
}
}
@keyframes userDotIntense {
0%,100% {
transform: scale(1);
opacity: 0.8
}
50% {
transform: scale(2.2);
opacity: 1;
filter: drop-shadow(0 0 15px #9a9ab0)
}
}