/*
* GlowTest Cosmetics System — cosmetics.css
*
* Avatar HTML structure:
*
*
*
OR
A
*
*
![]()
inside .gt-avatar-holder
* The PNG should have a transparent center (where the avatar shows through)
* and the ring/decorations around. Crown or other decor can extend outside.
*
* Frame image design guide:
* - Canvas: 200×200px (or any square)
* - Transparent center circle (~100px diameter) — avatar shows through
* - Ring around the center: your texture/pattern
* - Any decorations can go outside the center (crown at top, gems at sides, etc.)
*/
.gt-frame-img-overlay {
position: absolute;
top: -38%;
left: -38%;
width: 176%;
height: 176%;
object-fit: contain;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
user-select: none;
}
/* ── Gold ── */
.gt-frame-gold .gt-avatar-wrap {
box-shadow:
0 0 0 3px #FFD700,
0 0 0 5px #B8860B,
0 0 18px rgba(255, 215, 0, 0.7);
animation: gt-frame-gold-pulse 2s ease-in-out infinite;
}
@keyframes gt-frame-gold-pulse {
0%, 100% { box-shadow: 0 0 0 3px #FFD700, 0 0 0 5px #B8860B, 0 0 18px rgba(255,215,0,.7); }
50% { box-shadow: 0 0 0 3px #FFD700, 0 0 0 5px #B8860B, 0 0 28px rgba(255,215,0,1); }
}
/* ── Rainbow ── */
.gt-frame-rainbow .gt-avatar-wrap {
overflow: visible;
}
.gt-frame-rainbow .gt-avatar-wrap::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(
#ff0000 0deg, #ff8800 51deg, #ffff00 103deg,
#00cc00 154deg, #0088ff 206deg, #8800ff 257deg,
#ff00cc 309deg, #ff0000 360deg
);
animation: gt-frame-rainbow-spin 2s linear infinite;
z-index: -1;
}
@keyframes gt-frame-rainbow-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Neon ── */
.gt-frame-neon .gt-avatar-wrap {
box-shadow:
0 0 0 2px #00f5ff,
0 0 10px #00f5ff,
0 0 30px rgba(0, 245, 255, 0.5),
0 0 60px rgba(0, 245, 255, 0.2);
animation: gt-frame-neon-flicker 3s ease-in-out infinite;
}
@keyframes gt-frame-neon-flicker {
0%, 100% { box-shadow: 0 0 0 2px #00f5ff, 0 0 10px #00f5ff, 0 0 30px rgba(0,245,255,.5); }
35% { box-shadow: 0 0 0 2px #00f5ff, 0 0 5px #00f5ff, 0 0 12px rgba(0,245,255,.2); }
65% { box-shadow: 0 0 0 2px #00f5ff, 0 0 18px #00f5ff, 0 0 50px rgba(0,245,255,.9); }
}
/* ── Royal Crown ── */
.gt-frame-royal .gt-avatar-wrap {
box-shadow:
0 0 0 3px #FFD700,
0 0 0 5px #92620A,
0 0 0 7px #FFD700,
0 0 22px rgba(255, 215, 0, 0.85),
0 0 48px rgba(255, 165, 0, 0.4);
animation: gt-frame-royal-pulse 2.5s ease-in-out infinite;
}
.gt-frame-royal .gt-avatar-holder::before {
content: '👑';
position: absolute;
font-size: 20px;
top: -20px;
left: 50%;
transform: translateX(-50%);
animation: gt-frame-royal-crown 3s ease-in-out infinite;
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 1));
}
.gt-frame-royal .gt-avatar-holder::after {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
background: conic-gradient(
#FFD700 0deg, #FFF8DC 40deg, #FFD700 80deg, #B8860B 120deg,
#FFD700 160deg, #FFF8DC 200deg, #FFD700 240deg, #B8860B 280deg,
#FFD700 320deg, #FFF8DC 360deg
);
animation: gt-frame-royal-spin 10s linear infinite;
z-index: -1;
opacity: 0.85;
}
@keyframes gt-frame-royal-pulse {
0%, 100% { box-shadow: 0 0 0 3px #FFD700, 0 0 0 5px #92620A, 0 0 0 7px #FFD700, 0 0 22px rgba(255,215,0,.85), 0 0 48px rgba(255,165,0,.4); }
50% { box-shadow: 0 0 0 3px #FFD700, 0 0 0 5px #92620A, 0 0 0 7px #FFD700, 0 0 36px rgba(255,215,0,1), 0 0 70px rgba(255,165,0,.7); }
}
@keyframes gt-frame-royal-crown {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(255,215,0,.9)); }
50% { transform: translateX(-50%) translateY(-5px) rotate(6deg); filter: drop-shadow(0 0 14px rgba(255,215,0,1)); }
}
@keyframes gt-frame-royal-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Diamond ── */
.gt-frame-diamond .gt-avatar-wrap {
animation: gt-frame-diamond-shimmer 1.8s ease-in-out infinite;
}
@keyframes gt-frame-diamond-shimmer {
0% { box-shadow: 0 0 0 3px #b9f2ff, 0 0 0 5px rgba(185,242,255,.4), 0 0 20px rgba(185,242,255,.8), 0 0 40px rgba(100,200,255,.4); }
33% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(255,255,255,.6), 0 0 28px rgba(255,255,255,1), 0 0 55px rgba(185,242,255,.7); }
66% { box-shadow: 0 0 0 3px #c9d6ff, 0 0 0 5px rgba(201,214,255,.5), 0 0 20px rgba(201,214,255,.9), 0 0 40px rgba(159,122,234,.5); }
100% { box-shadow: 0 0 0 3px #b9f2ff, 0 0 0 5px rgba(185,242,255,.4), 0 0 20px rgba(185,242,255,.8), 0 0 40px rgba(100,200,255,.4); }
}
/* ════════════════════════════════════════════
AVATAR EFFECTS
════════════════════════════════════════════ */
/* ── Fire ── */
.gt-effect-fire .gt-avatar-wrap {
box-shadow: 0 4px 20px rgba(255, 69, 0, 0.6), 0 0 40px rgba(255, 100, 0, 0.3);
animation: gt-effect-fire-glow 0.6s ease-in-out infinite alternate;
}
.gt-effect-fire .gt-avatar-holder::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: radial-gradient(ellipse, transparent 52%, rgba(255,69,0,.35) 72%, rgba(255,140,0,.15) 88%, transparent 100%);
animation: gt-effect-fire-spin 1.2s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes gt-effect-fire-glow {
from { box-shadow: 0 4px 15px rgba(255,69,0,.5), 0 0 30px rgba(255,100,0,.25); }
to { box-shadow: 0 4px 28px rgba(255,69,0,.95), 0 0 55px rgba(255,100,0,.55); }
}
@keyframes gt-effect-fire-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Stars ── */
.gt-effect-stars .gt-avatar-wrap {
animation: gt-effect-stars-glow 2s ease-in-out infinite;
}
.gt-effect-stars .gt-avatar-holder::before {
content: '✦';
position: absolute;
font-size: 12px;
color: #FFD700;
top: -6px; right: -4px;
animation: gt-effect-stars-orbit-a 3s linear infinite;
z-index: 2;
pointer-events: none;
}
.gt-effect-stars .gt-avatar-holder::after {
content: '✦';
position: absolute;
font-size: 8px;
color: #fff5b4;
bottom: -4px; left: -2px;
animation: gt-effect-stars-orbit-a 3s linear infinite reverse;
animation-delay: -1.5s;
z-index: 2;
pointer-events: none;
}
@keyframes gt-effect-stars-glow {
0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,.8)); }
50% { filter: drop-shadow(0 0 10px rgba(255,215,0,1)); }
}
@keyframes gt-effect-stars-orbit-a {
from { transform: rotate(0deg) translateX(24px) rotate(0deg); }
to { transform: rotate(360deg) translateX(24px) rotate(-360deg); }
}
/* ── Ice ── */
.gt-effect-ice .gt-avatar-wrap {
box-shadow:
0 0 0 2px rgba(168, 230, 250, 0.85),
0 0 14px rgba(168, 230, 250, 0.7),
0 0 32px rgba(135, 206, 250, 0.4);
animation: gt-effect-ice-pulse 2s ease-in-out infinite;
}
.gt-effect-ice .gt-avatar-holder::before {
content: '❄';
position: absolute;
font-size: 14px;
top: -10px;
left: 50%;
transform: translateX(-50%);
animation: gt-effect-ice-float 2s ease-in-out infinite;
z-index: 2;
pointer-events: none;
}
@keyframes gt-effect-ice-pulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(168,230,250,.85), 0 0 14px rgba(168,230,250,.7); }
50% { box-shadow: 0 0 0 3px rgba(168,230,250,1), 0 0 22px rgba(135,206,250,.9); }
}
@keyframes gt-effect-ice-float {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
50% { transform: translateX(-50%) translateY(-5px) rotate(25deg); }
}
/* ── Lightning ── */
.gt-effect-lightning .gt-avatar-wrap {
box-shadow:
0 0 0 2px #FFD700,
0 0 16px rgba(255, 215, 0, 0.7),
0 0 32px rgba(255, 255, 0, 0.3);
animation: gt-effect-lightning-flash 2.5s ease-in-out infinite;
}
.gt-effect-lightning .gt-avatar-holder::before {
content: '⚡';
position: absolute;
font-size: 13px;
top: -8px; right: -6px;
animation: gt-effect-lightning-zap 2.5s linear infinite;
z-index: 2;
pointer-events: none;
}
@keyframes gt-effect-lightning-flash {
0%, 85%, 100% { box-shadow: 0 0 0 2px #FFD700, 0 0 16px rgba(255,215,0,.7); }
90% { box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(255,255,255,1), 0 0 60px rgba(255,215,0,.9); }
}
@keyframes gt-effect-lightning-zap {
0%, 80%, 100% { opacity: 1; transform: scale(1); }
85% { opacity: 0; transform: scale(2.5); }
}
/* ════════════════════════════════════════════
PROFILE BACKGROUNDS
Applied to .profile-bg-layer inside .profile-bg-wrap
════════════════════════════════════════════ */
.profile-bg-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: inherit;
}
.profile-bg-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.profile-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── Cosmos ── */
.gt-bg-cosmos {
background: radial-gradient(ellipse at 20% 50%, #2d0b5e 0%, #0a0a2e 45%, #000010 100%);
}
/* ── Sunset ── */
.gt-bg-sunset {
background: linear-gradient(160deg, #ffd89b 0%, #ff9a56 25%, #ff6b95 55%, #c44dff 80%, #6e00ff 100%);
}
/* ── Cyberpunk ── */
.gt-bg-cyber {
background: linear-gradient(135deg, #050505 0%, #001520 50%, #000d1a 100%);
position: relative;
}
.gt-bg-cyber::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,245,255,.04) 39px, rgba(0,245,255,.04) 40px),
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,245,255,.04) 39px, rgba(0,245,255,.04) 40px);
}
/* ── Aurora ── */
.gt-bg-aurora {
background: linear-gradient(135deg, #0d1b2a 0%, #0e3d2c 25%, #16a085 50%, #1a5276 75%, #0d1b2a 100%);
background-size: 300% 300%;
animation: gt-bg-aurora-shift 8s ease-in-out infinite;
}
@keyframes gt-bg-aurora-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── Ocean ── */
.gt-bg-ocean {
background: linear-gradient(180deg, #004e7c 0%, #006994 30%, #00a8cc 65%, #004e7c 100%);
background-size: 100% 200%;
animation: gt-bg-ocean-wave 6s ease-in-out infinite;
}
@keyframes gt-bg-ocean-wave {
0%, 100% { background-position: 50% 0%; }
50% { background-position: 50% 100%; }
}
/* ── Lava ── */
.gt-bg-lava {
background: radial-gradient(ellipse at 30% 70%, #ff5500 0%, #cc2200 35%, #7a0000 65%, #1a0000 100%);
animation: gt-bg-lava-bubble 5s ease-in-out infinite;
}
@keyframes gt-bg-lava-bubble {
0%, 100% { background: radial-gradient(ellipse at 30% 70%, #ff5500 0%, #cc2200 35%, #7a0000 65%, #1a0000 100%); }
50% { background: radial-gradient(ellipse at 70% 30%, #ff7700 0%, #cc2200 35%, #7a0000 65%, #1a0000 100%); }
}
/* ════════════════════════════════════════════
TEST THEMES
Applied to .test-theme-wrap on about_quiz + take pages
CSS variables cascade into the page accent colours
════════════════════════════════════════════ */
/* Base: no-theme uses existing palette */
.gt-theme-dark {
--th-bg1: #0d0a1e;
--th-bg2: #1a1030;
--th-accent: #9F7AEA;
--th-accent2: #38B2AC;
--th-card: rgba(26,16,48,.85);
--th-text: #e2d9f3;
}
.gt-theme-neon {
--th-bg1: #030610;
--th-bg2: #00111e;
--th-accent: #00f5ff;
--th-accent2: #ff00cc;
--th-card: rgba(0,10,30,.85);
--th-text: #e0f7ff;
}
.gt-theme-sakura {
--th-bg1: #fff0f6;
--th-bg2: #ffe4ef;
--th-accent: #e91e8c;
--th-accent2: #ff6eb4;
--th-card: rgba(255,255,255,.9);
--th-text: #3d1127;
}
.gt-theme-forest {
--th-bg1: #0a1a0e;
--th-bg2: #122818;
--th-accent: #22c55e;
--th-accent2: #86efac;
--th-card: rgba(10,26,14,.85);
--th-text: #d1fae5;
}
.gt-theme-retro {
--th-bg1: #1c0f00;
--th-bg2: #2d1a00;
--th-accent: #f59e0b;
--th-accent2: #ef4444;
--th-card: rgba(28,15,0,.85);
--th-text: #fef3c7;
}
/* Apply theme variables to test pages */
[class*="gt-theme-"] .test-sidebar,
[class*="gt-theme-"] .test-content > div {
background: var(--th-card) !important;
color: var(--th-text) !important;
border: 1px solid rgba(255,255,255,.08);
}
[class*="gt-theme-"] .test-title,
[class*="gt-theme-"] .test-description h3 { color: var(--th-text) !important; }
[class*="gt-theme-"] .test-description p { color: var(--th-text) !important; opacity: .8; }
[class*="gt-theme-"] .btn {
background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)) !important;
color: #fff !important;
}
/* Background overlay for theme pages */
.gt-theme-bg {
position: fixed; inset: 0; z-index: -1;
background: linear-gradient(135deg, var(--th-bg1), var(--th-bg2));
transition: background .4s;
}
/* ════════════════════════════════════════════
RARITY COLORS (utility classes for shop UI)
════════════════════════════════════════════ */
.gt-rarity-common { color: #6b7280; }
.gt-rarity-rare { color: #3b82f6; }
.gt-rarity-epic { color: #8b5cf6; }
.gt-rarity-legendary { color: #f59e0b; }
.gt-rarity-bg-common { background: #f3f4f6; border-color: #d1d5db; }
.gt-rarity-bg-rare { background: #eff6ff; border-color: #93c5fd; }
.gt-rarity-bg-epic { background: #f5f3ff; border-color: #c4b5fd; }
.gt-rarity-bg-legendary { background: #fffbeb; border-color: #fcd34d; }
/* ════════════════════════════════════════════
TEST THEMES — take.php + about_quiz.php element overrides
Applies when body has a gt-theme-* class
════════════════════════════════════════════ */
/* Cards (question / result containers) */
[class*="gt-theme-"] .question-container,
[class*="gt-theme-"] .result-container {
background: var(--th-card) !important;
color: var(--th-text) !important;
box-shadow: 0 4px 24px rgba(0,0,0,.3) !important;
}
/* Headings & body text */
[class*="gt-theme-"] .question-title,
[class*="gt-theme-"] .result-title,
[class*="gt-theme-"] .result-container-res-info {
color: var(--th-text) !important;
}
[class*="gt-theme-"] .question-description,
[class*="gt-theme-"] .result-text {
color: var(--th-text) !important;
opacity: .8;
}
/* Answer options */
[class*="gt-theme-"] .option-btn {
background: rgba(255,255,255,.05) !important;
color: var(--th-text) !important;
border-color: rgba(255,255,255,.12) !important;
}
[class*="gt-theme-"] .option-btn:hover {
border-color: var(--th-accent) !important;
background: rgba(255,255,255,.1) !important;
}
[class*="gt-theme-"] .option-btn.selected {
border-color: var(--th-accent) !important;
background: rgba(255,255,255,.12) !important;
font-weight: 700;
}
/* Navigation buttons */
[class*="gt-theme-"] .btn-prev {
background: rgba(255,255,255,.1) !important;
color: var(--th-text) !important;
}
[class*="gt-theme-"] .btn-next,
[class*="gt-theme-"] .btn-submit {
background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)) !important;
color: #fff !important;
}
/* Progress bar */
[class*="gt-theme-"] .progress-bar {
background: rgba(255,255,255,.1) !important;
}
[class*="gt-theme-"] .progress-fill {
background: linear-gradient(90deg, var(--th-accent), var(--th-accent2)) !important;
}
/* Share / rate buttons */
[class*="gt-theme-"] .share-copy,
[class*="gt-theme-"] .rate-btn {
background: rgba(255,255,255,.08) !important;
color: var(--th-text) !important;
border-color: rgba(255,255,255,.12) !important;
}
[class*="gt-theme-"] .rate-btn.rate-like.active {
background: rgba(34,197,94,.2) !important;
border-color: #22c55e !important;
color: #86efac !important;
}
[class*="gt-theme-"] .rate-btn.rate-dislike.active {
background: rgba(239,68,68,.2) !important;
border-color: #ef4444 !important;
color: #fca5a5 !important;
}
[class*="gt-theme-"] .share-label,
[class*="gt-theme-"] .rate-label {
color: var(--th-text) !important;
opacity: .7;
}
[class*="gt-theme-"] .comment-cta {
background: rgba(255,255,255,.08) !important;
color: var(--th-text) !important;
border-color: rgba(255,255,255,.15) !important;
}
/* Similar tests section */
[class*="gt-theme-"] .similar-card {
background: var(--th-card) !important;
}
[class*="gt-theme-"] .similar-card-title {
color: var(--th-text) !important;
}
[class*="gt-theme-"] .similar-heading {
color: var(--th-text) !important;
}
[class*="gt-theme-"] .similar-section {
border-top-color: rgba(255,255,255,.1) !important;
}
/* ════════════════════════════════════════════
TEST THEMES — about_quiz.php element overrides
════════════════════════════════════════════ */
/* Author card */
[class*="gt-theme-"] .author-card {
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.1) !important;
color: var(--th-text) !important;
}
[class*="gt-theme-"] .author-card:hover { background: rgba(255,255,255,.12) !important; }
[class*="gt-theme-"] .author-info__name { color: var(--th-text) !important; }
[class*="gt-theme-"] .author-info__label { color: rgba(255,255,255,.45) !important; }
[class*="gt-theme-"] .author-card__arrow { color: rgba(255,255,255,.3) !important; }
/* Stat items (views, like, dislike) */
[class*="gt-theme-"] .stat-item {
background: rgba(255,255,255,.06) !important;
color: var(--th-text) !important;
border-color: rgba(255,255,255,.08) !important;
}
[class*="gt-theme-"] .stat-item i { color: var(--th-accent) !important; }
[class*="gt-theme-"] .stat-item--vote:hover {
background: rgba(255,255,255,.12) !important;
border-color: var(--th-accent) !important;
}
[class*="gt-theme-"] .stat-item--vote.active-like {
background: rgba(34,197,94,.2) !important;
border-color: #22c55e !important;
color: #86efac !important;
}
[class*="gt-theme-"] .stat-item--vote.active-like i { color: #86efac !important; }
[class*="gt-theme-"] .stat-item--vote.active-dislike {
background: rgba(239,68,68,.2) !important;
border-color: #ef4444 !important;
color: #fca5a5 !important;
}
[class*="gt-theme-"] .stat-item--vote.active-dislike i { color: #fca5a5 !important; }
/* Category badge */
[class*="gt-theme-"] .test-category-badge {
background: rgba(255,255,255,.08) !important;
color: var(--th-accent) !important;
}
/* Comments section */
[class*="gt-theme-"] .comments-section {
background: var(--th-card) !important;
border-color: rgba(255,255,255,.08) !important;
}
[class*="gt-theme-"] .comments-section h3 { color: var(--th-text) !important; }
[class*="gt-theme-"] .comment-form textarea {
background: rgba(255,255,255,.06) !important;
color: var(--th-text) !important;
border-color: rgba(255,255,255,.12) !important;
}
[class*="gt-theme-"] .comment-form textarea::placeholder { color: rgba(255,255,255,.35) !important; }
[class*="gt-theme-"] .comment-form textarea:focus { border-color: var(--th-accent) !important; }
[class*="gt-theme-"] .comment-submit {
background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)) !important;
}
[class*="gt-theme-"] .comment-item { border-bottom-color: rgba(255,255,255,.06) !important; }
[class*="gt-theme-"] .comment-author { color: var(--th-text) !important; }
[class*="gt-theme-"] .comment-text { color: var(--th-text) !important; opacity: .85; }
[class*="gt-theme-"] .comment-date { color: rgba(255,255,255,.35) !important; }
[class*="gt-theme-"] .comment-delete { color: rgba(255,255,255,.3) !important; }
[class*="gt-theme-"] .comment-delete:hover { color: #fca5a5 !important; background: rgba(239,68,68,.15) !important; }
[class*="gt-theme-"] .comments-empty,
[class*="gt-theme-"] .comments-loading { color: rgba(255,255,255,.35) !important; }
[class*="gt-theme-"] .comment-login-prompt {
background: rgba(255,255,255,.06) !important;
color: var(--th-text) !important;
}
[class*="gt-theme-"] .comment-login-prompt a { color: var(--th-accent) !important; }