* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold-primary: #bc952f;
--gold-secondary: #dfc47a;
--gold-dark: #8a6e24;
--gold-light: #e8d49a;
--dark-bg: #1e1e1e;
--card-bg: #2a2a2a;
--accent-bg: #363636;
--dark-grey: #404040;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--dark-bg), #2a2a2a);
color: #ffffff;
line-height: 1.6;
overflow-x: hidden;
}
body.modal-open {
overflow: hidden;
}
.header {
background: linear-gradient(135deg, var(--gold-primary), var(--dark-grey));
padding: 20px 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
position: relative;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.logo {
height: 60px;
width: auto;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.auth-section {
display: flex;
align-items: center;
gap: 15px;
}
.user-info5 {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0,0,0,0.2);
padding: 8px 15px;
border-radius: 8px;
}
.profile-pic5 {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #1e1e1e;
}
.username5 {
background: linear-gradient(45deg, var(--gold-primary), var(--gold-secondary), var(--gold-primary));
background-size: 300% 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 1.1rem;
animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.daily-limits5 {
background: rgba(0,0,0,0.2);
padding: 8px 15px;
border-radius: 6px;
text-align: center;
}
.daily-limits5 p {
color: var(--gold-secondary);
font-weight: 600;
margin: 0;
}
.limit-value5 {
color: var(--gold-primary);
font-weight: 800;
}
.login-btn5 {
background: var(--dark-grey);
color: var(--gold-secondary);
padding: 12px 25px;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.login-btn5:hover {
background: var(--gold-primary);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.footer-text5 {
color: var(--gold-secondary);
font-size: 0.9rem;
font-weight: 600;
margin: 5px 0 0 0;
text-align: center;
}
.search-section {
background: transparent;
padding: 40px 0;
position: relative;
}
.search-card {
background: var(--card-bg);
border-radius: 16px;
padding: 30px;
margin: 0 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
border: 1px solid rgba(188, 149, 47, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
position: relative;
z-index: 10;
}
.search-card:hover {
transform: translateY(-2px);
box-shadow: 0 15px 50px rgba(0,0,0,0.5);
border-color: rgba(188, 149, 47, 0.4);
}
.search-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(188, 149, 47, 0.1) 0%, transparent 50%, rgba(188, 149, 47, 0.05) 100%);
border-radius: 16px;
z-index: -1;
}
.main-footer{
background: linear-gradient(135deg, var(--card-bg), #1a1a1a);
margin-top: 0px !important;
border-top: 3px solid var(--gold-primary);}
.search-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
@media (max-width: 768px) {
.search-card {
margin: 0 10px;
padding: 20px;
border-radius: 12px;
}
}
@media (max-width: 480px) {
.search-card {
margin: 0 5px;
padding: 15px;
}
}
.search-input {
    flex: 2;
    min-width: 250px;
    padding: 15px 25px;
    background: rgba(51, 51, 51, 0.8);
    border: 2px solid transparent;
    border-radius: 6px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: var(--gold-primary);
box-shadow: 0 0 15px rgba(188, 149, 47, 0.3);
transform: translateY(-2px);
}
.filter-select {
    flex: 1;
    min-width: 140px;
    padding: 15px 20px;
    background: var(--card-bg);
    border: 2px solid transparent;
    border-radius: 6px;
    color: var(--gold-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-select option {
background: var(--card-bg);
color: var(--gold-primary);
padding: 8px;
}
.filter-select:focus {
outline: none;
border-color: var(--gold-secondary);
box-shadow: 0 0 10px rgba(223, 196, 122, 0.3);
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
padding: 40px 0;
}
.post-card {
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
transition: all 0.4s ease;
cursor: pointer;
border: 2px solid transparent;
position: relative;
}
.post-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.4);
border-color: var(--gold-primary);
}
.card-image {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}
.post-card:hover .card-image {
transform: scale(1.05);
}
.card-content {
padding: 25px;
}
.card-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 15px;
color: var(--gold-primary);
line-height: 1.3;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 0.9rem;
color: #ccc;
}
.card-stats {
display: flex;
gap: 20px;
font-size: 0.85rem;
color: #999;
margin-bottom: 15px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
transition: color 0.3s ease;
}
.post-card:hover .stat-item {
color: var(--gold-secondary);
}
.category-tag {
background: linear-gradient(45deg, var(--gold-primary), var(--dark-grey));
color: #ffffff;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.category-tag:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(188, 149, 47, 0.4);
}
.tags {
margin-top: 15px;
}
.tag {
display: inline-block;
background: var(--accent-bg);
color: var(--gold-secondary);
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
margin-right: 6px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.tag:hover {
background: var(--gold-primary);
color: #ffffff;
transform: translateY(-2px);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 2000;
overflow-y: auto;
backdrop-filter: blur(5px);
}
.modal-content {
background: var(--card-bg);
margin: 20px auto;
max-width: 1000px;
border-radius: 8px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
animation: modalSlideIn 0.4s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-close {
position: absolute;
top: 20px;
right: 25px;
font-size: 32px;
color: #ccc;
cursor: pointer;
z-index: 10;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.modal-close:hover {
color: var(--gold-primary);
background: rgba(188, 149, 47, 0.2);
transform: rotate(90deg);
}
.modal-images {
position: relative;
height: 400px;
border-radius: 8px 8px 0 0;
overflow: hidden;
cursor: grab;
}
.modal-images:active {
cursor: grabbing;
}
.modal-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease;
}
.modal-image.secondary {
opacity: 0;
transform: scale(1.1);
}
.modal-images:hover .modal-image.secondary {
opacity: 1;
transform: scale(1);
}
.modal-images:hover .modal-image.primary {
opacity: 0;
transform: scale(0.9);
}
.modal-body {
padding: 40px;
}
.modal-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 20px;
color: var(--gold-primary);
line-height: 1.2;
}
.modal-description {
background: rgba(51, 51, 51, 0.5);
padding: 25px;
border-radius: 6px;
margin-bottom: 30px;
line-height: 1.8;
font-size: 1.1rem;
border-left: 4px solid var(--gold-primary);
}
.modal-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 25px;
background: rgba(51, 51, 51, 0.3);
border-radius: 6px;
}
.meta-item {
text-align: center;
padding: 15px;
background: var(--card-bg);
border-radius: 4px;
transition: transform 0.3s ease;
}
.meta-item:hover {
transform: translateY(-3px);
}
.meta-label {
color: #999;
font-size: 0.9rem;
margin-bottom: 8px;
font-weight: 500;
}
.meta-value {
color: var(--gold-primary);
font-weight: 700;
font-size: 1.2rem;
}
.modal-tags {
margin-bottom: 30px;
}
.modal-tags h4 {
color: var(--gold-primary);
margin-bottom: 15px;
font-size: 1.2rem;
}
.download-section {
text-align: center;
margin: 30px 0;
}
.download-btn {
background: linear-gradient(45deg, var(--gold-primary), var(--dark-grey));
color: #ffffff;
padding: 18px 50px;
border: none;
border-radius: 6px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}
.download-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.download-btn:hover::before {
left: 100%;
}
.download-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(188, 149, 47, 0.4);
}
.related-section {
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #444;
}
.related-section h3 {
color: var(--gold-primary);
margin-bottom: 20px;
font-size: 1.5rem;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.related-card {
background: var(--card-bg);
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.related-image {
width: 100%;
height: 120px;
object-fit: cover;
}
.related-content {
padding: 15px;
}
.related-title {
font-size: 1rem;
font-weight: 600;
color: var(--gold-secondary);
margin-bottom: 10px;
}
.related-stats {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #999;
}
.load-more {
text-align: center;
padding: 40px 0;
}
.load-more-btn {
background: linear-gradient(45deg, var(--gold-primary), var(--dark-grey));
color: #ffffff;
padding: 15px 40px;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(188, 149, 47, 0.4);
}
.load-more-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.limit-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 3000;
backdrop-filter: blur(5px);
}
.limit-modal-content {
background: var(--card-bg);
margin: 10% auto;
max-width: 500px;
border-radius: 8px;
padding: 40px;
text-align: center;
position: relative;
animation: modalSlideIn 0.4s ease;
}
.limit-modal h3 {
color: var(--gold-primary);
font-size: 2rem;
margin-bottom: 20px;
}
.limit-modal p {
color: #ccc;
font-size: 1.1rem;
margin-bottom: 30px;
line-height: 1.6;
}
.limit-modal-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
background: linear-gradient(45deg, var(--gold-primary), var(--dark-grey));
color: #ffffff;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-secondary {
background: transparent;
color: var(--gold-secondary);
padding: 12px 30px;
border: 2px solid var(--gold-secondary);
border-radius: 6px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover,         .btn-secondary:hover {
transform: translateY(-2px);
background: var(--gold-secondary);
color: #1e1e1e;
}
#loginInstead {
background: #5865f2;
color: white;
border-color: #5865f2;
}
#loginInstead:hover {
background: #4752c4;
border-color: #4752c4;
color: white;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #333;
border-top: 4px solid var(--gold-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.skeleton {
background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-card {
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
padding: 20px;
}
.skeleton-image {
height: 220px;
border-radius: 4px;
margin-bottom: 15px;
}
.skeleton-text {
height: 20px;
border-radius: 4px;
margin-bottom: 10px;
}
.skeleton-text.short {
width: 60%;
}

@media (min-width: 769px) and (max-width: 1200px) {
    .search-input {
        flex: 1.5;
        min-width: 200px;
    }
    
    .filter-select {
        flex: 0.8;
        min-width: 120px;
    }
} 

@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
.auth-section {
flex-direction: column;
width: 100%;
}
.search-controls {
        flex-direction: column;
        gap: 12px;
    }
    .search-input,
    .filter-select {
        flex: none;
        width: 100%;
        min-width: 100%;
    }
.search-input {
min-width: 100%;
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px 0;
}
.post-card {
min-width: 0;
}
.card-image {
height: 140px;
}
.card-content {
padding: 15px;
}
.card-title {
font-size: 1rem;
}
.card-stats {
flex-wrap: wrap;
gap: 10px;
}
.modal-content {
margin: 10px;
max-width: calc(100% - 20px);
}
.modal-body {
padding: 20px;
}
.modal-title {
font-size: 1.8rem;
}
.modal-meta {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
}
.related-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
.posts-grid {
gap: 10px;
}
.card-image {
height: 120px;
}
.card-content {
padding: 12px;
}
.modal-meta {
grid-template-columns: 1fr;
}
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--gold-primary), var(--dark-grey));
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-primary);
}
.quick-view {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
z-index: 1500;
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.quick-view.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.quick-view-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1400;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
backdrop-filter: blur(3px);
}
.quick-view-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.quick-view-header {
position: relative;
height: 200px;
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.quick-view-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.quick-view-close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background: rgba(0,0,0,0.7);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.3s ease;
}
.quick-view-close:hover {
background: var(--gold-primary);
}
.quick-view-content {
padding: 25px;
}
.quick-view-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--gold-primary);
margin-bottom: 15px;
line-height: 1.3;
}
.quick-view-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: rgba(51, 51, 51, 0.3);
border-radius: 6px;
}
.quick-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: #ccc;
}
.quick-meta-item i {
color: var(--gold-primary);
}
.quick-view-description {
background: rgba(51, 51, 51, 0.3);
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
font-size: 0.95rem;
line-height: 1.6;
max-height: 120px;
overflow-y: auto;
border-left: 3px solid var(--gold-primary);
}
.quick-view-tags {
margin-bottom: 20px;
}
.quick-view-footer {
text-align: center;
padding-top: 20px;
border-top: 1px solid #444;
}
.view-full-btn {
background: linear-gradient(45deg, var(--gold-primary), var(--dark-grey));
color: #ffffff;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.view-full-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(188, 149, 47, 0.4);
}
.post-card {
transition: all 0.4s ease, transform 0.2s ease;
}
.post-card.quick-hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
border-color: var(--gold-secondary);
z-index: 100;
}
.post-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.post-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(188, 149, 47, 0.1), transparent);
transition: left 0.8s ease;
z-index: 1;
pointer-events: none;
}
.post-card:hover::before {
left: 100%;
}
.post-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 25px 50px rgba(0,0,0,0.6);
border-color: var(--gold-secondary);
z-index: 100;
}
.post-card:hover .card-image {
transform: scale(1.08);
filter: brightness(1.1) contrast(1.1);
}
.card-hover-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.9));
padding: 30px 20px 20px;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: #fff;
z-index: 2;
}
.post-card:hover .card-hover-info {
transform: translateY(0);
}
.hover-description {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 10px;
opacity: 0.9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hover-stats {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--gold-secondary);
font-weight: 600;
}
.hover-click-hint {
background: var(--gold-primary);
color: #000;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 700;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.card-title {
transition: all 0.3s ease;
}
.post-card:hover .card-title {
color: var(--gold-secondary);
text-shadow: 0 2px 8px rgba(188, 149, 47, 0.4);
}
.card-stats .stat-item {
transition: all 0.3s ease;
}
.post-card:hover .card-stats .stat-item {
color: var(--gold-light);
transform: translateY(-2px);
}
.post-card:hover .card-stats .stat-item i {
color: var(--gold-primary);
text-shadow: 0 0 8px rgba(188, 149, 47, 0.6);
}
.category-tag {
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.category-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.6s ease;
}
.post-card:hover .category-tag::before {
left: 100%;
}
.post-card:hover .category-tag {
transform: scale(1.08);
box-shadow: 0 4px 15px rgba(188, 149, 47, 0.5);
background: linear-gradient(45deg, var(--gold-secondary), var(--gold-primary));
}
.tag {
transition: all 0.3s ease;
position: relative;
}
.post-card:hover .tag {
background: var(--gold-dark);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.post-card:hover .tag:nth-child(even) {
animation-delay: 0.1s;
}
.post-card:hover .tag:nth-child(odd) {
animation-delay: 0.2s;
}
.card-uploader {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(188, 149, 47, 0.2);
font-size: 0.85rem;
color: var(--gold-secondary);
cursor: pointer;
transition: all 0.3s ease;
}
.card-uploader:hover {
color: var(--gold-primary);
transform: translateX(5px);
}
.card-uploader i {
font-size: 0.8rem;
}
.user-profile-header {
background: linear-gradient(135deg, var(--gold-primary), var(--dark-grey));
padding: 40px 20px;
text-align: center;
color: white;
margin-bottom: 30px;
margin-top: 30px;
border-radius: 12px;
}
.user-profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid white;
margin: 0 auto 20px;
object-fit: cover;
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.user-profile-name {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.user-profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin-top: 20px;
}
.stat-box {
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.stat-number {
font-size: 1.8rem;
font-weight: 700;
color: white;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.9;
margin-top: 5px;
}
.search-controls .filter-active {
background: var(--gold-primary) !important;
color: #000 !important;
border-color: var(--gold-primary) !important;
}
@media (max-width: 768px) {
.post-card:hover {
transform: translateY(-8px) scale(1.02);
}
.card-hover-info {
padding: 20px 15px 15px;
}
.hover-description {
-webkit-line-clamp: 1;
}
.user-profile-header {
padding: 30px 15px;
}
.user-profile-name {
font-size: 2rem;
}
}
.guest-buttons {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
justify-content: center;
}
.guest-info {
margin-top: 10px;
text-align: center;
}
.guest-info .footer-text5 {
color: var(--gold-secondary);
font-size: 0.9rem;
font-weight: 600;
margin: 0;
background: rgba(188, 149, 47, 0.1);
padding: 8px 15px;
border-radius: 6px;
border: 1px solid rgba(188, 149, 47, 0.2);
display: inline-block;
}
.login-btn5.discord-login {
background: #5865f2;
}
.login-btn5.discord-login:hover {
background: #4752c4;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4);
}
.login-btn5.register-btn {
background: linear-gradient(45deg, #16a34a, #15803d);
}
.login-btn5.register-btn:hover {
background: linear-gradient(45deg, #22c55e, #16a34a);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(34, 197, 94, 0.4);
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
gap: 20px;
}
.guest-buttons {
flex-direction: column;
width: 100%;
gap: 10px;
}
.login-btn5 {
width: 100%;
text-align: center;
justify-content: center;
}
.guest-info .footer-text5 {
font-size: 0.8rem;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
.login-btn5 {
padding: 10px 15px;
font-size: 0.95rem;
}
.guest-info .footer-text5 {
font-size: 0.75rem;
}
}  
.announcements-section {
background: transparent;
padding: 20px 0 0px 0;
position: relative;
}
.announcements-container {
margin: 0 20px;
}
.announcement {
display: flex;
align-items: center;
gap: 15px;
padding: 20px 60px 20px 25px;
border-radius: 12px;
margin-bottom: 15px;
border-left: 4px solid;
position: relative;
animation: slideDown 0.5s ease;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.announcement:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.announcement-info {
background: rgba(59, 130, 246, 0.15);
border-left-color: #3b82f6;
border-color: rgba(59, 130, 246, 0.3);
color: #93c5fd;
}
.announcement-info:hover {
border-color: rgba(59, 130, 246, 0.5);
}
.announcement-warning {
background: rgba(245, 158, 11, 0.15);
border-left-color: #f59e0b;
border-color: rgba(245, 158, 11, 0.3);
color: #fbbf24;
}
.announcement-warning:hover {
border-color: rgba(245, 158, 11, 0.5);
}
.announcement-success {
background: rgba(34, 197, 94, 0.15);
border-left-color: #22c55e;
border-color: rgba(34, 197, 94, 0.3);
color: #86efac;
}
.announcement-success:hover {
border-color: rgba(34, 197, 94, 0.5);
}
.announcement-premium {
background: rgba(139, 92, 246, 0.15);
border-left-color: #8b5cf6;
border-color: rgba(139, 92, 246, 0.3);
color: #c4b5fd;
}
.announcement-premium:hover {
border-color: rgba(139, 92, 246, 0.5);
}
.announcement-event {
background: rgba(236, 72, 153, 0.15);
border-left-color: #ec4899;
border-color: rgba(236, 72, 153, 0.3);
color: #f9a8d4;
}
.announcement-event:hover {
border-color: rgba(236, 72, 153, 0.5);
}
.announcement-close {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.announcement-close:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-50%) scale(1.1);
}
@media (max-width: 768px) {
.announcements-container {
margin: 0 10px;
}
.announcement {
padding: 15px 50px 15px 20px;
border-radius: 8px;
}
.announcement-close {
right: 10px;
width: 28px;
height: 28px;
}
}
@media (max-width: 480px) {
.announcements-container {
margin: 0 5px;
}
.announcement {
padding: 12px 45px 12px 15px;
}
.announcement-close {
right: 8px;
width: 24px;
height: 24px;
}
}
.subscription-badge {
position: absolute;
top: 10px;
right: 10px;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
z-index: 5;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.subscription-badge.tier-basic {
background: rgba(59, 130, 246, 0.9);
color: white;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
.subscription-badge.tier-pro {
background: rgba(139, 92, 246, 0.9);
color: white;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.subscription-badge.tier-ultra {
background: rgba(245, 158, 11, 0.9);
color: white;
box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
animation: ultraGlow 2s ease-in-out infinite alternate;
}
.subscription-badge.tier-maximum {
background: linear-gradient(45deg, #ef4444, #dc2626);
color: white;
box-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
animation: maximumPulse 1.5s ease-in-out infinite;
}
@keyframes ultraGlow {
0% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6); }
100% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.8); }
}
@keyframes maximumPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 40px rgba(239, 68, 68, 0.9);
}
}
.enhanced-uploader {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
background: rgba(51, 51, 51, 0.3);
border-radius: 6px;
border-top: 1px solid rgba(188, 149, 47, 0.2);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.enhanced-uploader:hover {
background: rgba(188, 149, 47, 0.1);
transform: translateX(5px);
}
.tier-badge {
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 12px;
font-weight: 700;
margin-left: 5px;
}
.tier-badge.tier-basic {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
border: 1px solid #3b82f6;
}
.tier-badge.tier-pro {
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
border: 1px solid #8b5cf6;
}
.tier-badge.tier-ultra {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
border: 1px solid #f59e0b;
}
.tier-badge.tier-maximum {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid #ef4444;
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.daily-popular-section,
.recent-uploads-section {
background: linear-gradient(180deg, var(--dark-bg) 0%, var(--card-bg) 10%, var(--card-bg) 90%, var(--dark-bg) 100%);
margin: 0;
padding: 60px 0;
position: relative;
}
.daily-popular-section::before,
.recent-uploads-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(180deg, var(--dark-bg) 0%, transparent 100%);
z-index: 1;
}
.daily-popular-section::after,
.recent-uploads-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(180deg, transparent 0%, var(--dark-bg) 100%);
z-index: 1;
}
.section-title {
color: var(--gold-primary);
font-size: 2rem;
font-weight: 700;
margin-bottom: 30px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.section-subtitle {
font-size: 1rem;
color: var(--gold-secondary);
font-weight: 400;
opacity: 0.8;
}
.popular-grid,
.recent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.popular-card,
.recent-card {
background: var(--accent-bg);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
border: 2px solid transparent;
}
.popular-card:hover,
.recent-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
border-color: var(--gold-primary);
}
.popular-rank {
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
background: linear-gradient(45deg, var(--gold-primary), var(--gold-secondary));
color: #000;
font-weight: 700;
font-size: 0.9rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.popular-image,
.recent-image {
width: 100%;
height: 160px;
object-fit: cover;
transition: transform 0.3s ease;
}
.popular-card:hover .popular-image,
.recent-card:hover .recent-image {
transform: scale(1.05);
}
.popular-content,
.recent-content {
padding: 15px;
}
.popular-title,
.recent-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--gold-secondary);
margin-bottom: 10px;
line-height: 1.3;
}
.popular-stats {
display: flex;
gap: 15px;
font-size: 0.8rem;
color: #999;
margin-bottom: 10px;
}
.recent-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #999;
margin-bottom: 10px;
}
.recent-category {
background: var(--gold-primary);
color: #000;
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
.popular-uploader,
.recent-uploader {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--gold-secondary);
cursor: pointer;
padding: 5px 8px;
border-radius: 4px;
transition: all 0.3s ease;
}
.popular-uploader:hover,
.recent-uploader:hover {
background: rgba(188, 149, 47, 0.1);
color: var(--gold-primary);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.popular-grid,
.recent-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.section-title {
font-size: 1.5rem;
}
.daily-popular-section,
.recent-uploads-section {
margin: 20px 0;
padding: 20px 0;
}
}
@media (max-width: 480px) {
.popular-grid,
.recent-grid {
grid-template-columns: 1fr;
}
}
.user-profile-header {
background: linear-gradient(135deg, var(--gold-primary), var(--dark-grey));
padding: 50px 20px;
text-align: center;
color: white;
margin-bottom: 40px;
margin-top: 40px;
border-radius: 16px;
position: relative;
overflow: hidden;
transition: all 0.6s ease;
}
.user-profile-header.tier-basic {
background: linear-gradient(135deg, #3b82f6, #1e40af, #1d4ed8);
}
.user-profile-header.tier-pro {
background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
}
.user-profile-header.tier-ultra {
background: linear-gradient(135deg, #f59e0b, #d97706, #92400e);
animation: ultraGlow 3s ease-in-out infinite alternate;
}
.user-profile-header.tier-maximum {
background: linear-gradient(135deg, #ef4444, #dc2626, #991b1b);
animation: maximumPulse 2s ease-in-out infinite;
}
@keyframes ultraGlow {
0% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.4); }
100% { box-shadow: 0 0 50px rgba(245, 158, 11, 0.7); }
}
@keyframes maximumPulse {
0%, 100% {
box-shadow: 0 0 40px rgba(239, 68, 68, 0.6);
transform: scale(1);
}
50% {
box-shadow: 0 0 60px rgba(239, 68, 68, 0.9);
transform: scale(1.02);
}
}
.profile-avatar-container {
position: relative;
display: inline-block;
margin-bottom: 25px;
}
.user-profile-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid white;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
transition: all 0.4s ease;
position: relative;
z-index: 3;
}
.tier-basic .user-profile-avatar {
border-color: #60a5fa;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}
.tier-pro .user-profile-avatar {
border-color: #a78bfa;
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}
.tier-ultra .user-profile-avatar {
border-color: #fbbf24;
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5);
}
.tier-maximum .user-profile-avatar {
border-color: #f87171;
box-shadow: 0 10px 30px rgba(239, 68, 68, 0.6);
}
.profile-tier-badge {
position: absolute;
bottom: 5px;
right: 5px;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
z-index: 5;
border: 3px solid white;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.profile-tier-badge.tier-basic {
background: linear-gradient(45deg, #3b82f6, #1d4ed8);
color: white;
}
.profile-tier-badge.tier-pro {
background: linear-gradient(45deg, #8b5cf6, #6d28d9);
color: white;
}
.profile-tier-badge.tier-ultra {
background: linear-gradient(45deg, #f59e0b, #d97706);
color: white;
animation: badgeGlow 2s ease-in-out infinite alternate;
}
.profile-tier-badge.tier-maximum {
background: linear-gradient(45deg, #ef4444, #dc2626);
color: white;
animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgeGlow {
0% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); }
100% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.8); }
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.profile-tier-ring {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px solid;
border-radius: 50%;
z-index: 2;
opacity: 0.6;
}
.profile-tier-ring.tier-ultra {
border-color: #fbbf24;
animation: ringRotate 4s linear infinite;
}
.profile-tier-ring.tier-maximum {
border-color: #f87171;
animation: ringPulseRotate 3s ease-in-out infinite;
}
@keyframes ringRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.05); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes ringPulseRotate {
0%, 100% {
transform: rotate(0deg) scale(1);
opacity: 0.6;
}
50% {
transform: rotate(180deg) scale(1.1);
opacity: 0.9;
}
}
.user-profile-name-container {
margin-bottom: 15px;
}
.user-profile-name {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
transition: all 0.4s ease;
}
.user-profile-name.tier-basic {
color: #dbeafe;
text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
.user-profile-name.tier-pro {
color: #e9d5ff;
text-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
}
.user-profile-name.tier-ultra {
color: #fef3c7;
text-shadow: 0 0 30px rgba(245, 158, 11, 0.7);
animation: nameGlow 3s ease-in-out infinite alternate;
}
.user-profile-name.tier-maximum {
background: linear-gradient(45deg, #fecaca, #ffffff, #fecaca);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
animation: nameShimmer 2s ease-in-out infinite;
}
@keyframes nameGlow {
0% { text-shadow: 0 0 30px rgba(245, 158, 11, 0.7); }
100% { text-shadow: 0 0 50px rgba(245, 158, 11, 0.9), 0 0 70px rgba(245, 158, 11, 0.5); }
}
@keyframes nameShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.tier-icon {
font-size: 2rem;
transition: all 0.4s ease;
}
.tier-icon.tier-ultra {
animation: iconFloat 3s ease-in-out infinite;
}
.tier-icon.tier-maximum {
animation: iconSpin 4s linear infinite;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
@keyframes iconSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.user-tier-label {
font-size: 1.1rem;
font-weight: 600;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 20px;
border-radius: 20px;
display: inline-block;
margin-bottom: 10px;
}
.user-tier-label.tier-basic {
background: rgba(59, 130, 246, 0.2);
color: #dbeafe;
border: 1px solid rgba(59, 130, 246, 0.4);
}
.user-tier-label.tier-pro {
background: rgba(139, 92, 246, 0.2);
color: #e9d5ff;
border: 1px solid rgba(139, 92, 246, 0.4);
}
.user-tier-label.tier-ultra {
background: rgba(245, 158, 11, 0.2);
color: #fef3c7;
border: 1px solid rgba(245, 158, 11, 0.4);
animation: labelGlow 2s ease-in-out infinite alternate;
}
.user-tier-label.tier-maximum {
background: rgba(239, 68, 68, 0.2);
color: #fecaca;
border: 1px solid rgba(239, 68, 68, 0.4);
animation: labelPulse 1.8s ease-in-out infinite;
}
@keyframes labelGlow {
0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }
}
@keyframes labelPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
}
.stat-box {
background: rgba(0,0,0,0.2);
padding: 20px 15px;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.4s ease;
}
.stat-box:hover {
transform: translateY(-5px);
backdrop-filter: blur(15px);
}
.stat-box.tier-basic {
border-color: rgba(59, 130, 246, 0.3);
background: rgba(59, 130, 246, 0.1);
}
.stat-box.tier-pro {
border-color: rgba(139, 92, 246, 0.3);
background: rgba(139, 92, 246, 0.1);
}
.stat-box.tier-ultra {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.1);
}
.stat-box.tier-maximum {
border-color: rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.1);
}
.profile-bg-effect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
z-index: 1;
pointer-events: none;
}
.profile-bg-effect.tier-ultra {
background: radial-gradient(circle at 30% 70%, #f59e0b 0%, transparent 50%),
radial-gradient(circle at 70% 30%, #fbbf24 0%, transparent 50%);
animation: bgFloat 6s ease-in-out infinite alternate;
}
.profile-bg-effect.tier-maximum {
background: radial-gradient(circle at 25% 75%, #ef4444 0%, transparent 40%),
radial-gradient(circle at 75% 25%, #f87171 0%, transparent 40%),
radial-gradient(circle at 50% 50%, #dc2626 0%, transparent 60%);
animation: bgPulse 4s ease-in-out infinite;
}
@keyframes bgFloat {
0% { transform: translateX(-10px) translateY(-5px); }
100% { transform: translateX(10px) translateY(5px); }
}
@keyframes bgPulse {
0%, 100% { opacity: 0.1; transform: scale(1); }
50% { opacity: 0.2; transform: scale(1.05); }
}
@media (max-width: 768px) {
.user-profile-name {
font-size: 2.2rem;
flex-direction: column;
gap: 10px;
}
.tier-icon {
font-size: 1.5rem;
}
.user-profile-avatar {
width: 120px;
height: 120px;
}
.profile-tier-badge {
width: 35px;
height: 35px;
font-size: 14px;
}
}
main.container {
position: relative;
z-index: 2;
}