/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-x: hidden;
width: 100%;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #e0e0e0;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
position: relative;
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
transition: background-color 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 188, 212, 0.6);
background-clip: content-box;
}
::-webkit-scrollbar-thumb:active {
background: rgba(0, 188, 212, 0.8);
background-clip: content-box;
}
::-webkit-scrollbar-corner {
background: rgba(255, 255, 255, 0.05);
}
/* Firefox scrollbar styling */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
max-width: 100vw;
overflow-x: hidden;
}
/* Modern Header - Enhanced Dark Theme with Gradient */
.modern-header {
background: rgba(44, 62, 80, 0.75);
backdrop-filter: blur(25px);
border-bottom: 2px solid rgba(0, 188, 212, 0.4);
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
overflow: visible;
width: 100vw;
min-height: 80px;
will-change: transform;
margin-left: calc(-50vw + 50%);
}
/* Scrolled state for enhanced sticky navbar - now same as default */
.modern-header.scrolled {
background: rgba(44, 62, 80, 0.75);
backdrop-filter: blur(25px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
border-bottom-color: rgba(0, 188, 212, 0.4);
}
.modern-header.scrolled nav {
padding: 0.8rem 0;
}
/* Fallback for browsers that don't support sticky positioning */
.modern-header.fixed-fallback {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* Enhanced header design with subtle glow effect */
.modern-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.5), transparent);
animation: headerGlow 3s ease-in-out infinite;
}
/* Google Translate Widget - Footer Styling */
.google-translate-widget {
display: inline-block;
position: relative;
margin-top: 10px;
}
/* Footer translate section styling */
.footer-translate {
text-align: center;
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
.footer-translate .translate-container {
max-width: 600px;
margin: 0 auto;
padding: 0 20px;
}
.footer-translate h4 {
color: #00bcd4;
margin-bottom: 8px;
font-size: 1.2rem;
font-weight: 600;
}
.footer-translate p {
color: #b0b0b0;
font-size: 0.9rem;
margin-bottom: 15px;
line-height: 1.4;
}
/* Comprehensive Google Translate Widget Styling */
.goog-te-gadget {
font-family: inherit !important;
font-size: inherit !important;
display: inline-block !important;
vertical-align: middle !important;
}
.goog-te-gadget-simple {
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 25px !important;
padding: 10px 18px !important;
color: #e8eaed !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
text-decoration: none !important;
min-width: auto !important;
width: auto !important;
height: auto !important;
line-height: normal !important;
font-family: inherit !important;
font-size: inherit !important;
}
/* Add the same hover effect as nav buttons */
.goog-te-gadget-simple::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.2), transparent) !important;
transition: left 0.5s ease !important;
z-index: 1 !important;
}
.goog-te-gadget-simple:hover {
background: rgba(0, 188, 212, 0.15) !important;
color: #ffffff !important;
border-color: rgba(0, 188, 212, 0.3) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2) !important;
}
.goog-te-gadget-simple:hover::before {
left: 100% !important;
}
.goog-te-gadget-simple:active {
background: rgba(0, 188, 212, 0.25) !important;
transform: translateY(0) !important;
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3) !important;
}
/* Style the text content */
.goog-te-gadget-simple .goog-te-menu-value {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
position: relative !important;
z-index: 2 !important;
font-family: inherit !important;
}
.goog-te-gadget-simple .goog-te-menu-value span:first-child {
color: inherit !important;
font-weight: inherit !important;
font-family: inherit !important;
}
.goog-te-gadget-simple .goog-te-menu-value span:last-child {
color: inherit !important;
font-weight: inherit !important;
font-family: inherit !important;
}
/* Add globe icon like other nav buttons */
.goog-te-gadget-simple .goog-te-menu-value:before {
content: '\f0ac' !important;
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
font-size: 1.1rem !important;
transition: all 0.3s ease !important;
color: inherit !important;
}
.goog-te-gadget-simple:hover .goog-te-menu-value:before {
transform: scale(1.2) rotate(5deg) !important;
text-shadow: 0 0 8px rgba(0, 188, 212, 0.4) !important;
color: #00bcd4 !important;
}
/* Style the dropdown arrow */
.goog-te-gadget-simple .goog-te-menu-value:after {
content: '\f107' !important;
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
font-size: 0.8rem !important;
color: #00bcd4 !important;
transition: all 0.3s ease !important;
margin-left: 4px !important;
}
.goog-te-gadget-simple:hover .goog-te-menu-value:after {
transform: rotate(180deg) !important;
color: #00bcd4 !important;
}
/* Style the dropdown menu - fallback for when iframe styling doesn't work */
.goog-te-menu2 {
background: rgba(44, 62, 80, 0.98) !important;
border: 1px solid rgba(0, 188, 212, 0.4) !important;
border-radius: 12px !important;
backdrop-filter: blur(20px) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
margin-top: 8px !important;
overflow: hidden !important;
z-index: 1000 !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.goog-te-menu2-item {
color: #ffffff !important;
padding: 12px 16px !important;
transition: all 0.2s ease !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
font-size: 13px !important;
cursor: pointer !important;
font-family: inherit !important;
}
.goog-te-menu2-item:hover {
background: rgba(0, 188, 212, 0.2) !important;
color: #00bcd4 !important;
}
.goog-te-menu2-item:last-child {
border-bottom: none !important;
}
.goog-te-menu2-item .goog-te-menu2-item-separator {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Hide the Google Translate branding */
.goog-te-banner-frame {
display: none !important;
}
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
/* Hide the skip translate iframe */
.skiptranslate > iframe {
height: 0 !important;
border-style: none;
box-shadow: none;
}
body {
top: 0 !important;
}
/* Additional overrides for better integration */
#google_translate_element {
display: inline-block !important;
vertical-align: middle !important;
}
/* Ensure the widget integrates properly with the nav layout */
.goog-te-gadget-simple {
white-space: nowrap !important;
text-align: left !important;
}
/* Override any Google default styling */
.goog-te-gadget-simple * {
font-family: inherit !important;
color: inherit !important;
}
/* Ensure proper spacing in nav */
.google-translate-widget + .nav-btn {
margin-left: 0 !important;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.footer-translate {
padding: 20px 0;
margin: 15px 0;
}
.footer-translate .translate-container {
padding: 0 15px;
}
.footer-translate h4 {
font-size: 1.1rem;
}
.footer-translate p {
font-size: 0.85rem;
}
.goog-te-gadget-simple {
padding: 8px 12px !important;
font-size: 0.85rem !important;
}
.goog-te-gadget-simple .goog-te-menu-value:before {
font-size: 1rem !important;
}
.goog-te-menu2-item {
padding: 10px 14px !important;
font-size: 12px !important;
}
}
@media (max-width: 480px) {
.footer-translate {
padding: 15px 0;
margin: 10px 0;
}
.footer-translate .translate-container {
padding: 0 10px;
}
.footer-translate h4 {
font-size: 1rem;
}
.footer-translate p {
font-size: 0.8rem;
}
.goog-te-gadget-simple {
padding: 6px 8px !important;
font-size: 0.8rem !important;
}
.goog-te-gadget-simple .goog-te-menu-value:before {
font-size: 0.9rem !important;
}
}
@keyframes headerGlow {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
nav {
padding: 1.2rem 0;
position: relative;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
overflow: visible;
}
.logo h1 {
color: #00bcd4;
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
position: relative;
transition: all 0.3s ease;
}
.logo h1 a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
.logo h1:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.4));
}
/* Enhanced logo design */
.logo i {
font-size: 2rem;
background: linear-gradient(135deg, #00bcd4, #008ba3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.banner-logo {
height: 40px;
width: auto;
max-width: 300px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0, 188, 212, 0.3));
transition: all 0.3s ease;
}
.chip-icon-banner {
height: 50px;
width: 50px;
filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.4));
animation: rotate 20s linear infinite;
transition: all 0.3s ease;
vertical-align: middle;
display: inline-block;
}
.logo:hover .chip-icon-banner {
animation-duration: 10s;
filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.6));
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.nav-links {
display: flex;
gap: 16px;
align-items: center;
position: relative;
flex-wrap: nowrap;
min-width: 0;
flex-shrink: 1;
}
/* Notification indicator for nav items */
/* Removed collection button red dot */
/* Red glow effect for pending actions */
.nav-btn.pending-action {
background: rgba(255, 71, 87, 0.1) !important;
border-color: rgba(255, 71, 87, 0.3) !important;
color: #ff4757 !important;
box-shadow: 0 0 20px rgba(255, 71, 87, 0.4), 0 4px 12px rgba(255, 71, 87, 0.2) !important;
animation: pendingGlow 2s ease-in-out infinite alternate !important;
}
.nav-btn.pending-action:hover {
background: rgba(255, 71, 87, 0.2) !important;
border-color: rgba(255, 71, 87, 0.5) !important;
box-shadow: 0 0 30px rgba(255, 71, 87, 0.6), 0 6px 20px rgba(255, 71, 87, 0.3) !important;
transform: translateY(-2px) !important;
}
.nav-btn.pending-action i {
color: #ff4757 !important;
text-shadow: 0 0 8px rgba(255, 71, 87, 0.6) !important;
}
.nav-btn.pending-action .nav-text {
color: #ff4757 !important;
font-weight: 600 !important;
}
@keyframes pendingGlow {
0% {
box-shadow: 0 0 20px rgba(255, 71, 87, 0.4), 0 4px 12px rgba(255, 71, 87, 0.2);
}
100% {
box-shadow: 0 0 30px rgba(255, 71, 87, 0.6), 0 6px 20px rgba(255, 71, 87, 0.3);
}
}
/* Pending action badge */
.nav-btn.pending-action::after {
content: attr(data-pending-count);
position: absolute;
top: 2px; /* keep inside pill to avoid clipped red crescent */
right: 2px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
border: 2px solid #2c3e50;
animation: pendingPulse 1.5s ease-in-out infinite;
}
/* Hide badge when there is no count or count is 0 */
.nav-btn.pending-action:not([data-pending-count])::after,
.nav-btn.pending-action[data-pending-count=""]::after,
.nav-btn.pending-action[data-pending-count="0"]::after {
display: none !important;
content: none !important;
}
@keyframes pendingPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
/* Enhanced navigation links with better styling */
.nav-btn {
color: #e8eaed;
text-decoration: none;
padding: 10px 18px;
border-radius: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
min-height: 40px;
position: relative;
background: rgba(255, 255, 255, 0.05);
font-size: 14px;
backdrop-filter: blur(10px);
overflow: hidden;
}
.nav-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.2), transparent);
transition: left 0.5s ease;
}
.nav-btn:hover {
background: rgba(0, 188, 212, 0.15);
color: #ffffff;
border-color: rgba(0, 188, 212, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2);
}
.nav-btn:hover::before {
left: 100%;
}
.nav-btn:active {
background: rgba(0, 188, 212, 0.25);
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}
/* Active state for current page */
.nav-btn.active {
background: rgba(0, 188, 212, 0.1);
color: #00bcd4;
border-color: rgba(0, 188, 212, 0.5);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3), 0 8px 25px rgba(0, 188, 212, 0.2);
outline: none;
}
/* Enhanced Primary Button */
.nav-btn.btn-primary {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #ffffff;
font-weight: 600;
border: none;
box-shadow: 0 2px 10px rgba(0, 188, 212, 0.3);
padding: 12px 24px;
border-radius: 25px;
position: relative;
overflow: hidden;
}
.nav-btn.btn-primary::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.5s ease;
}
.nav-btn.btn-primary:hover {
background: linear-gradient(135deg, #00d4e6, #00bcd4);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}
.nav-btn.btn-primary:hover::before {
left: 100%;
}
.nav-btn.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 188, 212, 0.3);
}
/* Enhanced User Profile Section */
.user-info {
color: #e8eaed;
font-weight: 500;
padding: 10px 18px;
background: rgba(0, 188, 212, 0.1);
border-radius: 25px;
border: 1px solid rgba(0, 188, 212, 0.2);
position: relative;
font-size: 14px;
transition: all 0.3s ease;
}
.user-info:hover {
background: rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.3);
transform: translateY(-1px);
}
.user-profile-link {
display: flex;
align-items: center;
}
.profile-btn {
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.profile-btn:hover {
transform: scale(1.05);
}
.header-profile-pic {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0, 188, 212, 0.4);
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}
.profile-btn:hover .header-profile-pic {
border-color: rgba(0, 188, 212, 0.6);
box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
transform: scale(1.1);
}
/* Profile Dropdown Styles */
.profile-dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.profile-dropdown-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 25px;
transition: all 0.3s ease;
color: #e0e0e0;
font-size: 0.95rem;
font-weight: 500;
backdrop-filter: blur(10px);
position: relative;
z-index: 1001;
}
.profile-dropdown-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.2);
}
.profile-dropdown.active .profile-dropdown-btn {
background: rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.3);
color: #ffffff;
}
.dropdown-arrow {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.profile-dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
.profile-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: rgba(42, 42, 42, 0.98);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
min-width: 200px;
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 8px;
pointer-events: none;
}
.profile-dropdown.active .profile-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #e0e0e0;
text-decoration: none;
transition: all 0.2s ease;
font-size: 0.9rem;
border-radius: 8px;
margin: 4px;
}
.dropdown-item:hover {
background: rgba(0, 188, 212, 0.1);
color: #00bcd4;
transform: translateX(4px);
}
.dropdown-item.logout:hover {
background: rgba(244, 67, 54, 0.1);
color: #f44336;
}
.dropdown-item i {
width: 16px;
text-align: center;
font-size: 0.9rem;
}
.dropdown-item .dropdown-text {
display: inline;
}
@media (max-width: 640px) {
.profile-dropdown-btn .nav-text,
.dropdown-item .dropdown-text {
display: none;
}
.dropdown-item {
justify-content: center;
}
}
.dropdown-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 8px 12px;
}
/* Clean container design */
/* Enhanced hover effects for icons */
.nav-btn i {
transition: all 0.3s ease;
font-size: 1.1rem;
}
.nav-btn:hover i {
transform: scale(1.2) rotate(5deg);
text-shadow: 0 0 8px rgba(0, 188, 212, 0.4);
color: #00bcd4;
}
.nav-btn.primary:hover i {
transform: scale(1.15) rotate(-5deg);
text-shadow: 0 0 10px rgba(26, 26, 26, 0.3);
}
/* Special icon animations for different nav items */
.nav-btn[href*="home"]:hover i {
animation: homeBounce 0.6s ease;
}
.nav-btn[href*="dashboard"]:hover i {
animation: dashboardPulse 0.6s ease;
}
.nav-btn[href*="collection"]:hover i {
animation: collectionSpin 0.6s ease;
}
.nav-btn[href*="admin"]:hover i {
animation: adminShake 0.6s ease;
}
.nav-btn[href*="profile"]:hover i {
animation: profileGlow 0.6s ease;
}
.nav-btn[href*="logout"]:hover i {
animation: logoutSlide 0.6s ease;
}
@keyframes homeBounce {
0%, 100% {
transform: scale(1.2) rotate(5deg);
}
50% {
transform: scale(1.3) rotate(10deg);
}
}
@keyframes dashboardPulse {
0%, 100% {
transform: scale(1.2) rotate(5deg);
}
50% {
transform: scale(1.4) rotate(5deg);
}
}
@keyframes statSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes collectionSpin {
0% {
transform: scale(1.2) rotate(5deg);
}
50% {
transform: scale(1.3) rotate(185deg);
}
100% {
transform: scale(1.2) rotate(365deg);
}
}
@keyframes adminShake {
0%, 100% {
transform: scale(1.2) rotate(5deg);
}
25% {
transform: scale(1.2) rotate(-5deg);
}
75% {
transform: scale(1.2) rotate(5deg);
}
}
@keyframes profileGlow {
0%, 100% {
transform: scale(1.2) rotate(5deg);
}
50% {
transform: scale(1.3) rotate(5deg);
filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.8));
}
}
@keyframes logoutSlide {
0% {
transform: scale(1.2) rotate(5deg) translateX(0);
}
50% {
transform: scale(1.2) rotate(5deg) translateX(3px);
}
100% {
transform: scale(1.2) rotate(5deg) translateX(0);
}
}
/* Chip-like glow effect on active navigation */
.nav-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3), 0 8px 25px rgba(0, 188, 212, 0.2);
background: rgba(0, 188, 212, 0.1);
}
/* Modern Hero Section */
.hero-modern {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.05) 0%, rgba(26, 26, 26, 0.8) 100%);
padding: 80px 0 60px;
text-align: center;
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.hero-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 40px;
max-width: 100vw;
overflow-x: hidden;
}
.hero-text {
text-align: left;
}
.hero-text h2 {
font-size: 3.5rem;
color: #ffffff;
margin-bottom: 20px;
font-weight: 800;
line-height: 1.1;
background: linear-gradient(135deg, #ffffff, #00bcd4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text p {
font-size: 1.3rem;
color: #b0b0b0;
margin-bottom: 40px;
max-width: 600px;
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
min-height: 44px;
}
.cta-button.primary {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
}
.cta-button.primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 188, 212, 0.4);
}
.cta-button.secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.cta-button.secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.hero-stats {
display: flex;
gap: 60px;
justify-content: center;
margin: 60px 0;
perspective: 1000px;
flex-direction: column;
align-items: center;
}
/* Profile Page Styles */
.profile-page {
padding: 40px 0;
}
.profile-header {
display: flex;
align-items: flex-start;
gap: 30px;
margin-bottom: 40px;
padding: 30px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.profile-avatar {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #00bcd4;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
color: #00bcd4;
font-size: 3rem;
}
.profile-info {
flex: 1;
}
.profile-username {
font-size: 2.5rem;
font-weight: 700;
color: #00bcd4;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.profile-location {
color: #e0e0e0;
font-size: 1.1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.profile-bio {
color: #cccccc;
line-height: 1.6;
margin-bottom: 25px;
font-size: 1.1rem;
}
.profile-stats {
display: flex;
gap: 30px;
margin-bottom: 25px;
}
.profile-stat {
text-align: center;
}
.profile-stat .stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #00bcd4;
display: block;
}
.profile-stat .stat-label {
font-size: 0.9rem;
color: #cccccc;
text-transform: uppercase;
letter-spacing: 1px;
}
.profile-actions {
margin-top: 20px;
}
.profile-social {
margin-bottom: 40px;
padding: 25px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.profile-social h3 {
color: #00bcd4;
margin-bottom: 20px;
font-size: 1.5rem;
}
.social-links {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 188, 212, 0.1);
color: #00bcd4;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid rgba(0, 188, 212, 0.3);
}
.social-link:hover {
background: rgba(0, 188, 212, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
}
.social-link i {
font-size: 1.2rem;
}
.profile-chips {
margin-top: 40px;
}
.profile-chips h2 {
color: #00bcd4;
margin-bottom: 30px;
font-size: 2rem;
}
.empty-chips {
text-align: center;
padding: 60px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.empty-icon {
margin-bottom: 20px;
font-size: 4rem;
color: #00bcd4;
}
.empty-chips h3 {
color: #00bcd4;
margin-bottom: 15px;
font-size: 1.5rem;
}
.empty-chips p {
color: #cccccc;
margin-bottom: 25px;
font-size: 1.1rem;
}
/* Edit Profile Page Styles */
.edit-profile-page {
padding: 40px 0;
}
.edit-profile-header {
text-align: center;
margin-bottom: 40px;
}
.edit-profile-header h1 {
color: #00bcd4;
font-size: 2.5rem;
margin-bottom: 10px;
}
.edit-profile-header p {
color: #cccccc;
font-size: 1.1rem;
}
.edit-profile-content {
max-width: 800px;
margin: 0 auto;
}
.edit-section {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
}
.edit-section h3 {
color: #00bcd4;
margin-bottom: 25px;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.profile-picture-upload {
display: flex;
align-items: center;
gap: 30px;
}
.current-picture {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #00bcd4;
flex-shrink: 0;
}
.current-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-form {
flex: 1;
}
.upload-form .form-group {
margin-bottom: 20px;
}
.upload-form label {
display: block;
margin-bottom: 8px;
color: #e0e0e0;
font-weight: 600;
}
.upload-form input[type="file"] {
width: 100%;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #e0e0e0;
cursor: pointer;
}
.upload-form small {
display: block;
margin-top: 5px;
color: #999999;
font-size: 0.9rem;
}
.edit-form {
display: grid;
gap: 20px;
}
.edit-form h4 {
color: #00bcd4;
margin: 30px 0 20px 0;
font-size: 1.3rem;
grid-column: 1 / -1;
}
.edit-profile-actions {
text-align: center;
margin-top: 40px;
}
/* Creator Avatar Styles */
.chip-creator-section {
margin-bottom: 15px;
}
.chip-designer-section {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.creator-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.creator-link:hover {
transform: translateY(-2px);
}
.creator-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(0, 188, 212, 0.3);
flex-shrink: 0;
}
.creator-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.creator-avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
color: #00bcd4;
font-size: 0.8rem;
}
.chip-creator {
color: #00bcd4;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 20px;
}
/* Authentic Poker Chip Style Stats */
.stat-item {
position: relative;
width: 140px;
height: 140px;
border-radius: 50% !important;
background: transparent;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 188, 212, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transform-style: preserve-3d;
min-width: 140px;
min-height: 140px;
max-width: 140px;
max-height: 140px;
aspect-ratio: 1 / 1;
overflow: hidden;
padding: 0;
backdrop-filter: blur(10px);
}
/* Stat chip image container */
.stat-chip-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
overflow: hidden;
z-index: 2;
background: transparent;
}
.stat-chip-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Stat overlay for numbers and labels */
.stat-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
opacity: 1;
transition: opacity 0.3s ease;
z-index: 3;
}
/* Remove hover effects - no longer needed */
/* Remove old poker chip styling - no longer needed */
/* Remove hover effects - no longer needed */
/* Remove active effects - no longer needed */
.stat-number {
font-size: 2.2rem;
font-weight: 900;
color: #ffffff;
line-height: 1;
margin-bottom: 4px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
z-index: 3;
position: relative;
}
/* Remove old poker chip styling - no longer needed */
.stat-label {
font-size: 0.75rem;
font-family: 'FontAwesome';
color: #00bcd4;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
z-index: 3;
position: relative;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Individual stat chip color schemes */
.stat-item:nth-child(1) {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.4);
animation: chipEntrance 0.6s ease-out 0.1s both;
}
.stat-item:nth-child(1) .stat-label {
color: #ffd700;
}
.stat-item:nth-child(2) {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 69, 0, 0.4);
animation: chipEntrance 0.6s ease-out 0.3s both;
}
.stat-item:nth-child(2) .stat-label {
color: #ff4500;
}
.stat-item:nth-child(3) {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(30, 144, 255, 0.4);
animation: chipEntrance 0.6s ease-out 0.5s both;
}
.stat-item:nth-child(3) .stat-label {
color: #1e90ff;
}
/* Soft glow pulse for stat chips */
@keyframes glowPulse {
0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.10); }
50% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 34px rgba(255, 255, 255, 0.25); }
}
/***** Apply subtle pulse with color hints per chip *****/
.stat-item:nth-child(1) {
animation: chipEntrance 0.6s ease-out 0.1s both, glowPulse 2.6s ease-in-out 1.0s infinite;
}
.stat-item:nth-child(2) {
animation: chipEntrance 0.6s ease-out 0.3s both, glowPulse 2.6s ease-in-out 1.2s infinite;
}
.stat-item:nth-child(3) {
animation: chipEntrance 0.6s ease-out 0.5s both, glowPulse 2.6s ease-in-out 1.4s infinite;
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
.stat-item:nth-child(1),
.stat-item:nth-child(2),
.stat-item:nth-child(3) {
animation: chipEntrance 0.01s linear both; /* keep initial entrance minimal */
}
}
@keyframes chipEntrance {
0% {
opacity: 0;
transform: translateY(50px) rotateX(90deg);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0deg);
}
}
@keyframes chipEntrance {
0% {
opacity: 0;
transform: translateY(50px) rotateX(90deg);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0deg);
}
}
/* Search Section */
.search-section {
padding: 60px 0;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.05) 0%, rgba(26, 26, 26, 0.8) 100%);
position: relative;
overflow: hidden;
}
.search-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 30px 30px;
animation: float 15s ease-in-out infinite;
}
.search-form {
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.search-input-group {
position: relative;
display: flex;
align-items: center;
background: transparent;
border-radius: 50px;
border: none;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.search-input-group:focus-within {
box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.15), 0 12px 40px rgba(0, 188, 212, 0.2);
transform: translateY(-2px);
}
.search-input-group:focus-within .search-input {
border-color: #00bcd4;
box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
}
.search-icon {
position: absolute;
left: 24px;
color: #00bcd4;
font-size: 1.3rem;
z-index: 2;
transition: all 0.3s ease;
}
.search-input-group:focus-within .search-icon {
color: #ffffff;
transform: scale(1.1);
}
.search-input {
flex: 1;
padding: 20px 24px 20px 70px;
background: #2a2a2a;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 1.2rem;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: all 0.3s ease;
border-radius: 50px 0 0 50px;
/* Additional Safari fixes */
background-clip: padding-box;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
}
.search-input:focus {
font-size: 16px;
}
.search-btn {
padding: 20px 28px;
background: linear-gradient(135deg, #00bcd4, #008ba3);
border: none;
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0 50px 50px 0;
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
border: 1px solid rgba(0, 188, 212, 0.3);
border-left: none;
}
.search-btn:hover {
background: linear-gradient(135deg, #008ba3, #006d7a);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}
.search-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 188, 212, 0.3);
}
/* Featured Section Styles Removed */
.section-title {
font-size: 2.5rem;
color: #ffffff;
text-align: center;
margin-bottom: 8px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.section-title i {
color: #00bcd4;
font-size: 2rem;
}
/* Modern Gallery Grid */
.chips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
justify-items: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
align-items: stretch;
}
/* Modern Chip Cards */
.chip-card {
padding: 12px;
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
position: relative;
backdrop-filter: blur(10px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
max-width: 200px;
margin: 0 auto;
text-align: center;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
}
.chip-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.chip-card:active {
transform: translateY(-4px) scale(0.98);
}
/* Collection badge for collected chips */
.collection-badge {
position: absolute;
top: 8px;
right: 8px;
background: rgba(76, 175, 80, 0.9);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
z-index: 10;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
backdrop-filter: blur(4px);
}
.collection-badge i {
color: white;
}
/* Variant badge for chips with variants */
.variant-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 188, 212, 0.9);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
backdrop-filter: blur(4px);
}
.variant-badge i {
color: white;
}
.variant-badge .variant-count {
position: absolute;
top: -5px;
right: -5px;
background: #00bcd4;
color: #1a1a1a;
font-size: 0.7rem;
font-weight: bold;
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
min-width: 16px;
}
/* Green glow for collected chips */
.chip-card.collected {
border-color: rgba(76, 175, 80, 0.4);
box-shadow: 0 0 20px rgba(76, 175, 80, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
filter: brightness(0.85) contrast(1.1);
opacity: 0.9;
}
.chip-card.collected:hover {
border-color: rgba(76, 175, 80, 0.6);
box-shadow: 0 0 30px rgba(76, 175, 80, 0.3), 0 20px 40px rgba(0, 0, 0, 0.3);
filter: brightness(0.9) contrast(1.05);
opacity: 0.95;
}
.chip-image {
position: relative;
height: 100px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
width: 100px;
margin: 0 auto 10px auto;
}
.chip-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease;
}
.chip-card:hover .chip-image img {
transform: scale(1.25);
}
.chip-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #00bcd4;
font-size: 4rem;
opacity: 0.5;
width: 100%;
min-height: 400px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
border-radius: 50%;
}
.chip-placeholder i {
font-size: 4rem;
color: #00bcd4;
opacity: 0.5;
}
.chip-content {
padding: 0;
margin-top: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.chip-content h4 {
color: #ffffff;
font-size: 0.75rem;
margin-bottom: 6px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.creator {
color: #00bcd4;
font-size: 0.8rem;
margin-bottom: 8px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Hide description and features on home grid */
.chips-grid .description {
display: none;
}
.chips-grid .features {
display: none;
}
.chips-grid .chip-meta {
display: none;
}
.chips-grid .chip-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
font-size: 0.75rem;
color: #888;
margin-top: 8px;
margin-bottom: 12px;
}
/* Smaller creator text for home page grid */
.chips-grid .chip-creator {
font-size: 0.8rem;
margin-bottom: 8px;
}
.chips-grid .chip-stats span {
display: flex;
align-items: center;
gap: 4px;
}
.chips-grid .chip-stats i {
font-size: 0.9rem;
}
/* Description and features for other pages */
.description {
color: #b0b0b0;
margin-bottom: 12px;
line-height: 1.6;
font-size: 0.95rem;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.feature-tag {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
padding: 6px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chip-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-bottom: 30px;
margin: 8px 0;
}
.chip-meta-item {
color: #888;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 4px;
}
.chip-meta-item i {
color: #00bcd4;
font-size: 0.75rem;
}
.chip-stats {
display: flex;
gap: 20px;
margin-bottom: 12px;
font-size: 0.9rem;
color: #888;
}
.chip-stats span {
display: flex;
align-items: center;
gap: 6px;
}
.chip-actions {
display: flex;
gap: 15px;
padding: 0 24px 24px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
flex: 1;
justify-content: center;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
.btn-primary {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
/* Section Headers */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.section-header h3 {
margin: 0;
flex: 1;
min-width: 200px;
}
/* Add Chip Section */
.add-chip-section {
margin-bottom: 30px;
display: flex;
justify-content: flex-start;
}
.btn-small {
padding: 8px 16px !important;
font-size: 0.85rem !important;
min-height: auto !important;
border-radius: 8px !important;
}
.btn-notification {
padding: 6px 12px !important;
font-size: 0.8rem !important;
border-radius: 6px !important;
gap: 6px !important;
}
.search-results {
font-size: 1rem;
color: #888;
font-weight: 400;
}
.add-chip-btn {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
padding: 12px 24px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
.add-chip-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3);
}
/* Chips Section */
.chips-section {
padding: 80px 0;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.01) 0%, rgba(26, 26, 26, 0.2) 100%);
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.chips-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 60px 60px;
animation: float 35s ease-in-out infinite reverse;
pointer-events: none;
}
/* No Chips State */
.no-chips {
text-align: center;
padding: 80px 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 20px;
border: 2px dashed rgba(255, 255, 255, 0.1);
}
.no-chips-icon {
font-size: 4rem;
color: #00bcd4;
margin-bottom: 20px;
opacity: 0.5;
}
.no-chips h4 {
color: #ffffff;
font-size: 1.5rem;
margin-bottom: 16px;
font-weight: 600;
}
.no-chips p {
color: #b0b0b0;
font-size: 1.1rem;
margin-bottom: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 60px;
flex-wrap: wrap;
}
.page-btn {
padding: 12px 20px;
background: rgba(255, 255, 255, 0.05);
color: #e0e0e0;
text-decoration: none;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
.page-btn:hover {
background: rgba(0, 188, 212, 0.1);
border-color: rgba(0, 188, 212, 0.3);
transform: translateY(-1px);
}
.page-btn.active {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
border-color: transparent;
}
.page-numbers {
display: flex;
gap: 8px;
align-items: center;
}
.page-dots {
color: #888;
padding: 0 8px;
}
/* About Section */
.about-section {
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
padding: 100px 0;
margin-top: 80px;
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 60px 60px;
animation: float 25s ease-in-out infinite;
}
.about-header {
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.about-header .section-title {
font-size: 3rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 20px;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.about-header .section-subtitle {
font-size: 1.2rem;
color: #b0b0b0;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
position: relative;
z-index: 2;
max-width: 100vw;
overflow-x: hidden;
}
.about-text {
position: relative;
z-index: 2;
}
.about-description {
color: #b0b0b0;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 30px;
}
.attribution {
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.attribution p {
margin: 0;
color: #b0b0b0;
}
.attribution a {
color: #00bcd4;
text-decoration: none;
font-weight: 600;
}
.attribution a:hover {
text-decoration: underline;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
position: relative;
z-index: 2;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
/* Removed hover effects to prevent confusion with buttons */
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #00bcd4, #008ba3);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.feature-icon img {
width: 32px;
height: 32px;
filter: brightness(0) invert(1);
}
.feature-icon i {
font-size: 1.8rem;
color: #ffffff;
}
.feature-content {
position: relative;
z-index: 2;
}
.feature-content h3 {
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.3;
}
.feature-content p {
color: #b0b0b0;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
.stat-card {
background: rgba(42, 42, 42, 0.8);
padding: 25px;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(0, 188, 212, 0.2);
transition: all 0.3s ease;
min-width: 0;
word-wrap: break-word;
}
/* Removed hover effects to prevent confusion with buttons */
.stat-card i {
font-size: 2rem;
color: #00bcd4;
margin-bottom: 15px;
}
.stat-card h4 {
color: #e0e0e0;
font-size: 2rem;
margin-bottom: 5px;
font-weight: 700;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.stat-card p {
color: #b0b0b0;
font-size: 0.9rem;
margin: 0;
}
/* Modern Footer - Enhanced Design */
.modern-footer {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
padding: 80px 0 30px;
border-top: 2px solid rgba(0, 188, 212, 0.2);
width: 100%;
margin-top: 0;
position: relative;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
max-width: 100vw;
overflow-x: hidden;
position: relative;
z-index: 2;
}
.footer-section {
position: relative;
}
.footer-section h4 {
color: #00bcd4;
font-size: 1.3rem;
margin-bottom: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-section h4 i {
font-size: 1.1rem;
opacity: 0.8;
}
.footer-section p {
color: #c0c0c0;
line-height: 1.7;
margin-bottom: 20px;
font-size: 1rem;
}
.footer-brand p {
font-size: 1.1rem;
color: #d0d0d0;
margin-bottom: 25px;
}
.community-thanks {
background: rgba(0, 188, 212, 0.1);
padding: 15px;
border-radius: 8px;
border-left: 3px solid #00bcd4;
margin-bottom: 20px !important;
}
.community-thanks strong {
color: #00bcd4;
font-weight: 700;
}
.community-thanks strong a {
color: #00bcd4;
text-decoration: none;
transition: color 0.3s ease;
}
.community-thanks strong a:hover {
color: #00bcd4;
opacity: 0.8;
}
.footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-section ul li {
margin-bottom: 12px;
}
.footer-section ul li a {
color: #e0e0e0;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
border-radius: 4px;
font-size: 0.95rem;
}
.footer-section ul li a:hover {
color: #00bcd4;
transform: translateX(5px);
background: rgba(0, 188, 212, 0.1);
padding-left: 10px;
}
.footer-section ul li a i {
font-size: 0.9rem;
width: 16px;
opacity: 0.8;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
position: relative;
z-index: 2;
}
.footer-bottom-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom p {
color: #999;
font-size: 0.95rem;
margin: 0;
text-align: center;
}
.footer-bottom p a {
color: #20B2AA;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom p a:hover {
color: #48D1CC;
}
.footer-links {
display: flex;
gap: 25px;
}
.footer-links a {
color: #b0b0b0;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #00bcd4;
}
/* Responsive Footer */
@media (max-width: 968px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
@media (max-width: 768px) {
.modern-footer {
padding: 60px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 35px;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-links {
justify-content: center;
}
}
/* Modern Auth Forms */
.auth-hero {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
min-height: 60vh;
display: flex;
align-items: center;
}
.auth-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 50px 50px;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.auth-container {
position: relative;
z-index: 2;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
}
.auth-form {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.auth-form h2 {
color: #ffffff;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
background: linear-gradient(135deg, #00bcd4, #008ba3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.auth-form p {
color: #b0b0b0;
font-size: 1.1rem;
text-align: center;
margin-bottom: 30px;
line-height: 1.6;
}
/* Form styles consolidated */
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
color: #e0e0e0;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-group input {
width: 100%;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #e0e0e0;
font-size: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-group textarea {
width: 100%;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #e0e0e0;
font-size: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: vertical;
min-height: 100px;
}
/* Enhanced scrollbar for textareas */
.form-group textarea::-webkit-scrollbar {
width: 6px;
}
.form-group textarea::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
border-radius: 6px;
}
.form-group textarea::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
.form-group textarea::-webkit-scrollbar-thumb:hover {
background: rgba(0, 188, 212, 0.4);
}
.form-group input:focus {
outline: none;
border-color: #00bcd4;
background: rgba(0, 188, 212, 0.05);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}
.form-group textarea:focus {
outline: none;
border-color: #00bcd4;
background: rgba(0, 188, 212, 0.05);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}
.form-group input[type="date"]:focus {
font-size: 16px;
}
.form-group input[type="text"]:focus {
font-size: 16px;
}
.form-group input[type="email"]:focus {
font-size: 16px;
}
.form-group input[type="password"]:focus {
font-size: 16px;
}
.form-group input::placeholder {
color: #888;
}
.auth-form .btn {
width: 100%;
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
margin-top: 10px;
}
.auth-form .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
}
.auth-links {
margin-top: 30px;
text-align: center;
}
.auth-links p {
margin-bottom: 10px;
color: #b0b0b0;
font-size: 0.95rem;
}
.auth-links a {
color: #00bcd4;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.auth-links a:hover {
color: #008ba3;
text-decoration: underline;
}
.alert {
padding: 15px 20px;
border-radius: 12px;
margin-bottom: 25px;
font-weight: 500;
border: 1px solid;
}
.alert-error {
background: rgba(244, 67, 54, 0.1);
border-color: rgba(244, 67, 54, 0.3);
color: #ff6b6b;
}
.alert-success {
background: rgba(76, 175, 80, 0.1);
border-color: rgba(76, 175, 80, 0.3);
color: #4caf50;
}
.approval-info {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(76, 175, 80, 0.3);
}
.approval-info small {
color: rgba(76, 175, 80, 0.8);
font-size: 0.9rem;
}
.approval-info i {
margin-right: 5px;
}
.admin-pending-notice {
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.admin-notice-text {
color: rgba(255, 193, 7, 0.8);
font-size: 0.9rem;
margin: 10px 0 0 0;
}
.pending-notice {
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.pending-notice-text {
color: rgba(255, 193, 7, 0.8);
font-size: 0.9rem;
margin: 10px 0 0 0;
}
.chip-pending-badge {
background: rgba(255, 193, 7, 0.2);
color: rgba(255, 193, 7, 0.9);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
margin-bottom: 8px;
border: 1px solid rgba(255, 193, 7, 0.3);
}
.chip-pending-badge i {
margin-right: 4px;
}
/* Auth page specific styles */
.auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.auth-page main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Discord Login Styles */
.discord-login-section {
margin: 20px 0;
text-align: center;
}
.discord-divider {
display: flex;
align-items: center;
margin: 20px 0;
color: #888;
}
.discord-divider::before,
.discord-divider::after {
content: '';
flex: 1;
height: 1px;
background: #333;
}
.discord-divider span {
padding: 0 15px;
font-size: 14px;
}
.discord-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 20px;
background: #5865F2;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
margin-bottom: 10px;
}
.discord-btn:hover {
background: #4752C4;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(88, 101, 242, 0.3);
}
.discord-btn i {
margin-right: 8px;
font-size: 18px;
}
.oauth-section {
margin: 25px 0;
}
/* Chip Detail Page Styles */
.chip-detail {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.chip-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
align-items: start;
}
.chip-image-large {
border-radius: 50%;
overflow: visible;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
min-height: 400px;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
}
.chip-image-large img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Chip Slideshow Styles */
.chip-slideshow {
width: 100%;
height: 100%;
position: relative;
}
.slideshow-container {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.slideshow-controls {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
width: auto;
white-space: nowrap;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
.slide-btn {
background: rgba(0, 188, 212, 0.2);
border: 1px solid rgba(0, 188, 212, 0.4);
color: #00bcd4;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
min-width: 80px;
justify-content: center;
}
.slide-btn:hover {
background: rgba(0, 188, 212, 0.3);
border-color: rgba(0, 188, 212, 0.6);
transform: translateY(-2px);
}
.slide-btn.active {
background: rgba(0, 188, 212, 0.4);
border-color: rgba(0, 188, 212, 0.8);
color: #ffffff;
}
.slide-btn i {
font-size: 0.8rem;
}
.chip-info {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.chip-title {
font-size: 15px;
color: #ffffff;
margin-bottom: 10px;
font-weight: 700;
}
.chip-description {
color: #b0b0b0;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 30px;
}
.meta-item {
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.meta-value {
font-size: 1.5rem;
font-weight: 700;
color: #00bcd4;
display: block;
}
.meta-label {
font-size: 0.9rem;
color: #888;
margin-top: 5px;
}
.btn-large {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
.chip-details {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.detail-section h3 {
color: #ffffff;
font-size: 1.3rem;
margin-bottom: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.detail-section h3 i {
color: #00bcd4;
}
.features-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.feature-tag-large {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
padding: 8px 16px;
border-radius: 15px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-item {
background: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
padding: 6px 12px;
border-radius: 10px;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Dashboard Styles */
.dashboard-container {
max-width: 95%;
margin: 0 auto;
padding: 40px 20px;
}
.dashboard-header {
text-align: center;
margin-bottom: 50px;
}
.dashboard-title {
font-size: 2.5rem;
color: #ffffff;
margin-bottom: 15px;
font-weight: 700;
background: linear-gradient(135deg, #00bcd4, #008ba3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dashboard-subtitle {
color: #b0b0b0;
font-size: 1.1rem;
line-height: 1.6;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.dashboard-stats .stat-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 25px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dashboard-stats .stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.3);
}
.dashboard-stats .stat-card i {
font-size: 2.5rem;
color: #00bcd4;
margin-bottom: 15px;
}
.dashboard-stats .stat-card h4 {
color: #ffffff;
font-size: 2rem;
margin-bottom: 8px;
font-weight: 700;
}
.dashboard-stats .stat-card p {
color: #b0b0b0;
font-size: 0.95rem;
margin: 0;
}
.dashboard-content {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.dashboard-section {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.dashboard-section h3 {
color: #ffffff;
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.dashboard-section h3 i {
color: #00bcd4;
}
.upload-area {
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 30px;
text-align: center;
background: rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
cursor: pointer;
}
.upload-area:hover {
border-color: #00bcd4;
background: rgba(0, 188, 212, 0.05);
}
.upload-area.dragover {
border-color: #00bcd4;
background: rgba(0, 188, 212, 0.1);
}
.upload-area i {
font-size: 2rem;
color: #00bcd4;
margin-bottom: 10px;
}
.upload-area p {
color: #b0b0b0;
margin-bottom: 10px;
}
.upload-area small {
color: #888;
font-size: 0.85rem;
}
.photo-instructions {
margin-top: 15px;
padding: 15px;
background: rgba(0, 188, 212, 0.05);
border: 1px solid rgba(0, 188, 212, 0.2);
border-radius: 8px;
border-left: 4px solid #00bcd4;
}
.photo-instructions h4 {
color: #00bcd4;
margin: 0 0 10px 0;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
}
.photo-instructions h4 i {
font-size: 0.9rem;
}
.photo-instructions ul {
margin: 0;
padding-left: 20px;
list-style: none;
}
.photo-instructions li {
color: #b0b0b0;
font-size: 0.9rem;
margin-bottom: 6px;
line-height: 1.4;
}
.photo-instructions li:last-child {
margin-bottom: 0;
}
.photo-instructions li strong {
color: #e0e0e0;
font-weight: 600;
}
.image-preview {
margin-top: 15px;
text-align: center;
}
.image-preview img {
max-width: 200px;
max-height: 200px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.chips-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.chip-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.chip-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
.chip-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.chip-item-title {
font-size: 1.2rem;
color: #ffffff;
font-weight: 600;
}
.chip-item-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.chip-item-status.approved {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.chip-item-status.pending {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}
.chip-item-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn-small {
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.modal-content {
background: #2a2a2a;
margin: 5% auto;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
position: relative;
}
/* Enhanced scrollbar for modal content */
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
border: 1px solid transparent;
background-clip: content-box;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 188, 212, 0.5);
background-clip: content-box;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header h3 {
color: #ffffff;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.close {
color: #888;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.close:hover {
color: #ffffff;
}
.modal-content form {
padding: 30px;
box-sizing: border-box;
}
.modal-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 30px;
padding: 20px 0 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Extra bottom padding on small screens so buttons are fully visible above system UI */
@media (max-width: 768px) {
#addChipModal .modal-content form { padding-bottom: 90px; }
#addChipModal .modal-actions { position: sticky; bottom: 0; background: #2a2a2a; padding-bottom: 12px; }
}
.edit-image-preview {
text-align: center;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.edit-back-image-preview {
text-align: center;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section {
min-height: auto;
width: 100%;
position: relative;
}
.hero-showcase {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
background-image:
linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%),
radial-gradient(circle at 25% 25%, rgba(0, 188, 212, 0.03) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(0, 188, 212, 0.02) 0%, transparent 50%),
repeating-linear-gradient(
60deg,
transparent,
transparent 20px,
rgba(0, 188, 212, 0.01) 20px,
rgba(0, 188, 212, 0.01) 22px
),
repeating-linear-gradient(
-60deg,
transparent,
transparent 20px,
rgba(0, 188, 212, 0.01) 20px,
rgba(0, 188, 212, 0.01) 22px
);
padding: 80px 0;
min-height: 85vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-container {
position: relative;
z-index: 3;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Background Chip Grid */
.hero-background-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
opacity: 0.35;
}
.hero-background-grid::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.6) 0%, rgba(42, 42, 42, 0.4) 50%, rgba(26, 26, 26, 0.6) 100%);
pointer-events: none;
z-index: 2;
}
.chip-grid-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.chip-grid-row {
position: absolute;
width: 100%;
height: 100%;
}
/* Individual chip animations - each chip will get a unique animation via JavaScript */
/* Random movement keyframes - Responsive values */
@keyframes floatRandom1 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
25% { transform: translate(clamp(50px, 15vw, 150px), clamp(-40px, -8vh, -80px)) rotate(90deg) scale(1.1); }
50% { transform: translate(clamp(-50px, -10vw, -100px), clamp(60px, 12vh, 120px)) rotate(180deg) scale(0.9); }
75% { transform: translate(clamp(100px, 20vw, 200px), clamp(25px, 5vh, 50px)) rotate(270deg) scale(1.05); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes floatRandom2 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(clamp(-60px, -12vw, -120px), clamp(45px, 9vh, 90px)) rotate(120deg) scale(0.95); }
66% { transform: translate(clamp(90px, 18vw, 180px), clamp(-30px, -6vh, -60px)) rotate(240deg) scale(1.08); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes floatRandom3 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
20% { transform: translate(clamp(40px, 8vw, 80px), clamp(50px, 10vh, 100px)) rotate(72deg) scale(1.12); }
40% { transform: translate(clamp(-75px, -15vw, -150px), clamp(-20px, -4vh, -40px)) rotate(144deg) scale(0.88); }
60% { transform: translate(clamp(60px, 12vw, 120px), clamp(-45px, -9vh, -90px)) rotate(216deg) scale(1.06); }
80% { transform: translate(clamp(-40px, -8vw, -80px), clamp(35px, 7vh, 70px)) rotate(288deg) scale(0.94); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes floatRandom4 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
30% { transform: translate(-90px, -110px) rotate(-108deg) scale(1.15); }
60% { transform: translate(160px, 80px) rotate(-216deg) scale(0.85); }
100% { transform: translate(0, 0) rotate(-360deg) scale(1); }
}
@keyframes floatRandom5 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
25% { transform: translate(110px, -70px) rotate(90deg) scale(0.92); }
50% { transform: translate(-140px, 100px) rotate(180deg) scale(1.18); }
75% { transform: translate(70px, -120px) rotate(270deg) scale(0.96); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes floatRandom6 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
40% { transform: translate(-170px, 60px) rotate(-144deg) scale(1.1); }
80% { transform: translate(130px, -100px) rotate(-288deg) scale(0.9); }
100% { transform: translate(0, 0) rotate(-360deg) scale(1); }
}
@keyframes floatRandom7 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
16% { transform: translate(95px, 85px) rotate(60deg) scale(1.05); }
32% { transform: translate(-125px, -45px) rotate(120deg) scale(0.95); }
48% { transform: translate(155px, -75px) rotate(180deg) scale(1.12); }
64% { transform: translate(-85px, 105px) rotate(240deg) scale(0.88); }
80% { transform: translate(65px, -95px) rotate(300deg) scale(1.08); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
@keyframes floatRandom8 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
50% { transform: translate(-110px, -80px) rotate(-180deg) scale(1.2); }
100% { transform: translate(0, 0) rotate(-360deg) scale(1); }
}
.hero-chip-item {
position: absolute;
width: 160px;
height: 160px;
background: transparent;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: none;
backdrop-filter: none;
transition: all 0.3s ease;
overflow: hidden;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
/* Center the chip as starting position */
left: 50%;
top: 50%;
margin-left: -80px; /* Half of width */
margin-top: -80px; /* Half of height */
}
.hero-chip-item:hover {
transform: scale(1.08);
z-index: 10;
}
.hero-chip-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 8px;
border: 2px solid rgba(0, 188, 212, 0.3);
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.2);
}
.hero-chip-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease;
filter: brightness(1.1) contrast(1.1);
}
.hero-chip-item:hover .hero-chip-image img {
transform: scale(1.15);
filter: brightness(1.3) contrast(1.2);
}
.hero-chip-info {
text-align: center;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
border-radius: 0 0 50px 50px;
opacity: 0;
transition: all 0.3s ease;
}
.hero-chip-item:hover .hero-chip-info {
opacity: 1;
bottom: 0;
}
.hero-chip-name {
color: #ffffff;
font-size: 0.7rem;
font-weight: 600;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-chip-creator {
color: #00bcd4;
font-size: 0.6rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Fallback pattern when no chips are available */
.hero-fallback-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.3;
}
.pattern-row {
display: flex;
gap: 30px;
animation: scrollHorizontal 40s linear infinite;
}
.pattern-chip {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 188, 212, 0.1);
border: 2px solid rgba(0, 188, 212, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 188, 212, 0.6);
font-size: 2rem;
}
.hero-title {
font-size: 3.5rem;
font-weight: 900;
color: #ffffff;
margin-bottom: 20px;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
line-height: 1.1;
}
.hero-subtitle {
font-size: 2.2rem;
color: #00bcd4;
margin-bottom: 30px;
font-weight: 700;
letter-spacing: 1px;
}
.cycling-text {
opacity: 1;
transition: opacity 0.8s ease-in-out;
display: inline-block;
width: 100px;
text-align: left;
}
.cycling-text.fade-out {
opacity: 0;
}
.hero-description {
font-size: 1.1rem;
color: #b0b0b0;
max-width: 500px;
margin-bottom: 40px;
line-height: 1.6;
}
/* Chips Showcase Styles */
.chips-showcase {
padding: 80px 0;
background: #1a1a1a;
position: relative;
overflow: hidden;
}
.chips-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(0, 188, 212, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(0, 188, 212, 0.06) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.04) 0%, transparent 60%);
z-index: 1;
pointer-events: none;
}
.chips-showcase::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(2px 2px at 20px 20px, rgba(0, 188, 212, 0.015) 50%, transparent 50%),
radial-gradient(2px 2px at 60px 60px, rgba(0, 188, 212, 0.012) 50%, transparent 50%),
radial-gradient(1px 1px at 100px 100px, rgba(0, 188, 212, 0.01) 50%, transparent 50%);
background-size: 80px 80px, 120px 120px, 160px 160px;
z-index: 1;
pointer-events: none;
}
.showcase-header {
text-align: center;
margin-bottom: 15px;
margin-top: 25px;
position: relative;
z-index: 2;
}
.search-container {
max-width: 800px;
margin: 0 auto 10px;
position: relative;
z-index: 2;
}
.search-container input[type="text"] {
width: 100%;
padding: 18px 24px;
background: #2a2a2a;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 1.1rem;
outline: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.search-container input[type="search"] {
width: 100%;
padding: 18px 60px 18px 24px;
background: #2a2a2a;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 1.1rem;
outline: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.search-container input[type="text"]:focus {
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.1), 0 8px 25px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
.search-container input[type="search"]:focus {
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.1), 0 8px 25px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
.search-container input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
}
.search-container input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
}
/* Search and Sort Form Styles */
.search-sort-form {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.search-input-group {
position: relative;
width: 100%;
max-width: 600px;
}
.search-clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
cursor: pointer;
padding: 8px;
transition: all 0.3s ease;
border-radius: 50%;
width: 32px;
height: 32px;
display: none;
align-items: center;
justify-content: center;
z-index: 10;
/* Safari-specific fixes */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-clear-btn:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.1);
}
.search-clear-btn.visible {
display: flex;
}
.sort-controls {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 600px;
justify-content: center;
}
.sort-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
}
.sort-select {
background: #2a2a2a;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
padding: 8px 16px;
border-radius: 25px;
font-size: 0.9rem;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
/* Safari-specific fixes */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Custom dropdown arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.sort-select:hover {
border-color: rgba(0, 188, 212, 0.3);
background: #333333;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.sort-select:focus {
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.1), 0 8px 25px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
background: #333333;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
}
.sort-select option {
background: #2a2a2a;
color: #ffffff;
padding: 12px;
font-size: 1rem;
}
/* Search button removed for live search functionality */
.search-button {
display: none;
}
/* Improved Event Modal Styles */
.form-section {
margin-bottom: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.form-section:last-child {
margin-bottom: 0;
}
.form-section .section-title {
font-size: 1.1rem;
color: #00bcd4;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.form-section .section-title i {
font-size: 1rem;
}
.section-description {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-bottom: 20px;
line-height: 1.4;
}
.form-help {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
margin-top: 4px;
display: block;
font-style: italic;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 15px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.checkbox-label:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 188, 212, 0.3);
}
.checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
position: relative;
flex-shrink: 0;
margin-top: 2px;
transition: all 0.3s ease;
}
.checkbox-label:hover .checkmark {
border-color: rgba(0, 188, 212, 0.5);
}
.checkbox-label input:checked ~ .checkmark {
background-color: #00bcd4;
border-color: #00bcd4;
}
.checkbox-label input:checked ~ .checkmark:after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-content {
flex: 1;
}
.checkbox-content strong {
display: block;
color: #ffffff;
font-size: 0.95rem;
margin-bottom: 4px;
}
.checkbox-content small {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
line-height: 1.3;
}
.event-preview {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 120px;
}
.preview-placeholder {
text-align: center;
color: rgba(255, 255, 255, 0.4);
}
.preview-placeholder i {
font-size: 2rem;
margin-bottom: 10px;
display: block;
}
.preview-placeholder p {
font-size: 0.9rem;
margin: 0;
}
.event-preview-card {
background: rgba(42, 42, 42, 0.8);
border-radius: 8px;
padding: 15px;
border: 1px solid rgba(0, 188, 212, 0.2);
}
.event-preview-card h5 {
color: #00bcd4;
margin: 0 0 10px 0;
font-size: 1.1rem;
}
.event-preview-card .event-date {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 8px;
}
.event-preview-card .event-location {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
margin-bottom: 10px;
}
.event-preview-card .event-description {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 10px;
}
.event-preview-card .event-features {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.event-preview-card .feature-badge {
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
border: 1px solid rgba(0, 188, 212, 0.3);
}
.admin-modal-wide {
max-width: 800px;
width: 95%;
}
@media (max-width: 768px) {
.form-section {
padding: 15px;
margin-bottom: 20px;
}
.checkbox-group {
gap: 10px;
}
.checkbox-label {
padding: 12px;
}
.event-preview {
padding: 15px;
}
.admin-modal-wide {
width: 98%;
margin: 2% auto;
}
}
.search-help {
text-align: center;
margin-top: 12px;
opacity: 0.7;
}
.search-help small {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
font-style: italic;
}
.keyboard-shortcut {
color: rgba(0, 188, 212, 0.7) !important;
font-size: 0.75rem !important;
font-style: normal !important;
opacity: 0.8;
}
.search-suggestions {
text-align: center;
margin-top: 8px;
opacity: 0.8;
}
.search-suggestions small {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
.suggestion-link {
color: #00bcd4;
text-decoration: none;
transition: all 0.3s ease;
}
.suggestion-link:hover {
color: #ffffff;
text-decoration: underline;
}
.search-results-summary {
text-align: center;
margin-bottom: 30px;
padding: 15px;
background: rgba(0, 188, 212, 0.1);
border-radius: 10px;
border: 1px solid rgba(0, 188, 212, 0.2);
}
.search-results-summary p {
color: #00bcd4;
font-size: 1rem;
margin: 0;
font-weight: 500;
}
/* CTA Section Styles */
.cta-section {
background: linear-gradient(135deg, #00bcd4, #008ba3);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 60px 60px;
animation: float 25s ease-in-out infinite;
pointer-events: none;
}
.cta-content {
max-width: 600px;
margin: 0 auto;
padding: 0 20px;
}
.cta-title {
font-size: 2.5rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 20px;
}
.cta-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 15px 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-cta:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.btn-cta.primary {
background: #ffffff;
color: #00bcd4;
border-color: #ffffff;
}
.btn-cta.primary:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
/* Welcome Message Styles */
.welcome-message {
background: linear-gradient(135deg, #00bcd4, #0097a7);
color: white;
padding: 20px;
text-align: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.welcome-message h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
}
.welcome-message p {
margin: 0;
font-size: 1.1rem;
}
/* Logo Image Styles */
.logo-img {
width: 48px;
height: 48px;
vertical-align: middle;
}
.logo-img-small {
width: 40px;
height: 40px;
vertical-align: middle;
}
.logo-img-tiny {
width: 36px;
height: 36px;
vertical-align: middle;
}
.logo-img-large {
width: 72px;
height: 72px;
margin-bottom: 12px;
}
.logo-img-xl {
width: 96px;
height: 96px;
opacity: 0.5;
}
.chip-icon {
width: 30px;
height: 30px;
margin-right: 10px;
vertical-align: middle;
display: inline-block;
}
/* Status Colors */
.status-success {
color: #4caf50;
}
.status-error {
color: #f44336;
}
.status-info {
color: #2196f3;
}
.status-warning {
color: #ff9800;
}
/* Hidden Elements */
.hidden {
display: none;
}
/* Inline Form Styles */
.inline-form {
display: inline;
}
/* List Styles */
.list-indented {
margin-top: 10px;
margin-left: 20px;
}
.list-spaced {
margin: 20px 0;
padding-left: 20px;
}
.list-compact {
margin: 10px 0;
padding-left: 20px;
}
/* Info Box Styles */
.info-box {
background: rgba(42, 42, 42, 0.8);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.info-box-spaced {
margin-top: 30px;
}
/* Text Styles */
.text-muted {
color: #888;
font-size: 0.85rem;
margin-top: 5px;
display: block;
}
.text-center {
text-align: center;
}
/* Link Styles */
.link-primary {
color: #00bcd4;
}
/* Image Preview Actions */
.image-preview-actions {
margin-top: 10px;
}
.image-preview-actions .btn {
margin-right: 10px;
}
/* Edit Image Preview */
.edit-image-preview-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 10px 0;
}
.edit-image-upload {
margin-top: 15px;
}
.edit-upload-area {
margin-top: 10px;
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.02);
}
.edit-upload-area:hover {
border-color: rgba(0, 188, 212, 0.5);
background: rgba(0, 188, 212, 0.05);
}
.edit-upload-area.dragover {
border-color: #00bcd4;
background: rgba(0, 188, 212, 0.1);
}
.edit-upload-area i {
font-size: 2rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
}
.edit-upload-area p {
margin: 10px 0 5px 0;
color: rgba(255, 255, 255, 0.8);
}
.edit-upload-area small {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
/* Setup Container */
.setup-container {
max-width: 800px;
}
/* Admin Dashboard Styles */
/* Role Management Styles */
.role-management {
margin-bottom: 10px;
}
.role-select {
width: 70%;
padding: 10px 14px;
border: 1px solid #444;
border-radius: 6px;
background-color: #2a2a2a;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
}
.role-select:hover {
border-color: #555;
background-color: #333;
}
.role-select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
background-color: #333;
}
.role-select option {
background-color: #2a2a2a;
color: #fff;
padding: 8px;
}
/* Admin user actions layout */
.admin-user-actions {
display: flex;
gap: 8px;
justify-content: space-between;
}
.admin-user-actions .btn-danger {
width: 25%;
padding: 10px 14px;
font-size: 14px;
}
/* Role Badge Styles */
.badge-admin {
background-color: #dc3545;
color: white;
}
.badge-moderator {
background-color: #fd7e14;
color: white;
}
/* Moderator Dashboard Styles */
.moderator-info {
display: flex;
align-items: center;
gap: 15px;
}
.moderator-badge {
background: linear-gradient(135deg, #fd7e14, #e55a00);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);
}
.moderator-badge i {
font-size: 1rem;
}
.moderator-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
}
.section-header {
margin-bottom: 25px;
text-align: center;
}
.section-header h3 {
color: #00bcd4;
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.section-header p {
color: #b0b0b0;
font-size: 1rem;
margin: 0;
line-height: 1.5;
}
/* Responsive adjustments for moderator dashboard */
@media (max-width: 768px) {
.moderator-info {
flex-direction: column;
gap: 10px;
}
.moderator-badge {
font-size: 0.8rem;
padding: 6px 12px;
}
.moderator-section {
padding: 20px;
margin-bottom: 20px;
}
.section-header h3 {
font-size: 1.5rem;
flex-direction: column;
gap: 8px;
}
.section-header p {
font-size: 0.9rem;
}
}
/* Test page styles */
.admin-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
backdrop-filter: blur(10px);
}
.admin-section h3 {
color: #00bcd4;
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.test-actions {
margin-bottom: 20px;
}
.test-info {
background: rgba(0, 188, 212, 0.1);
border: 1px solid rgba(0, 188, 212, 0.3);
border-radius: 8px;
padding: 20px;
}
.test-info h4 {
color: #00bcd4;
margin-bottom: 15px;
font-size: 1.1rem;
}
.test-info ol {
color: #e0e0e0;
line-height: 1.6;
margin: 0;
padding-left: 20px;
}
.test-info li {
margin-bottom: 8px;
}
.admin-section ul {
color: #e0e0e0;
line-height: 1.6;
margin: 0;
padding-left: 20px;
}
.admin-section li {
margin-bottom: 8px;
}
.admin-section a {
color: #00bcd4;
text-decoration: none;
}
.admin-section a:hover {
text-decoration: underline;
}
.badge-user {
background-color: #6c757d;
color: white;
}
.badge-default {
background-color: #6c757d;
color: white;
}
.admin-container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.admin-stat-card {
background: rgba(255, 255, 255, 0.03);
padding: 25px;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
/* Removed hover effects to prevent confusion with buttons */
.admin-stat-card h3 {
color: #00bcd4;
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 800;
}
.admin-stat-card p {
color: #b0b0b0;
font-size: 1rem;
margin: 0;
}
.admin-tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.tab-btn {
background: rgba(255, 255, 255, 0.05);
color: #e0e0e0;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
.tab-btn.active {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
border-color: #00bcd4;
font-weight: 600;
}
.tab-btn:hover {
background: rgba(0, 188, 212, 0.1);
border-color: rgba(0, 188, 212, 0.4);
color: #e0e0e0;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Admin-specific chip grid and cards */
.admin-chips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.admin-chip-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
padding: 15px;
}
.admin-chip-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 188, 212, 0.3);
}
/* Admin-specific round chip images */
.admin-chip-image {
height: 80px;
width: 80px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
margin: 0 auto 12px;
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.admin-chip-image:hover {
border-color: #00bcd4;
transform: scale(1.05);
}
.admin-chip-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease;
}
.admin-chip-image img[src=""] {
display: none;
}
.admin-chip-image .chip-placeholder {
color: #00bcd4;
font-size: 3rem;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.admin-chip-content {
padding: 0;
}
.admin-chip-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.admin-chip-title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.status-badge.pending {
background: rgba(255, 152, 0, 0.2);
color: #ff9800;
border: 1px solid rgba(255, 152, 0, 0.3);
}
.status-badge.approved {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.status-badge.admin {
background: rgba(156, 39, 176, 0.2);
color: #9c27b0;
border: 1px solid rgba(156, 39, 176, 0.3);
}
.status-badge.user {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.status-badge.rejected {
background: rgba(231, 76, 60, 0.2);
color: #e74c3c;
border: 1px solid rgba(231, 76, 60, 0.3);
}
.status-badge.transfer-pending {
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
border: 1px solid rgba(0, 188, 212, 0.3);
}
/* Pending Ownership Transfers Section */
.transfers-grid {
display: grid;
gap: 20px;
margin-top: 20px;
}
.transfer-card {
background: #2a2a2a;
border: 1px solid #444;
border-radius: 12px;
padding: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
.transfer-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.transfer-chip-info {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #444;
}
.transfer-chip-image {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.transfer-chip-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.transfer-chip-image .chip-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.transfer-chip-image .chip-icon {
width: 40px;
height: 40px;
opacity: 0.6;
}
.transfer-chip-details {
flex: 1;
min-width: 0;
}
.transfer-chip-title {
font-size: 1.2rem;
font-weight: 600;
color: #e0e0e0;
margin: 0 0 8px 0;
word-wrap: break-word;
}
.transfer-chip-desc {
color: #aaa;
margin: 0;
line-height: 1.4;
word-wrap: break-word;
}
.transfer-request-info {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.requesting-user {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.requesting-user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: #444;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.requesting-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.requesting-user-avatar i {
color: #aaa;
font-size: 1.2rem;
}
.requesting-user-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.requesting-user-name {
font-weight: 600;
color: #e0e0e0;
font-size: 1rem;
}
.request-date {
color: #aaa;
font-size: 0.9rem;
}
.transfer-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.badge-warning {
background: rgba(255, 152, 0, 0.2);
color: #ff9800;
border: 1px solid rgba(255, 152, 0, 0.3);
}
@media (max-width: 768px) {
.transfer-chip-info {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.transfer-chip-image {
width: 100%;
height: 120px;
}
.transfer-request-info {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.requesting-user {
justify-content: center;
text-align: center;
}
.transfer-actions {
justify-content: center;
width: 100%;
}
.transfer-actions .btn {
flex: 1;
}
}
.rejection-reason {
margin-top: 5px;
font-size: 0.8rem;
color: #e74c3c;
opacity: 0.8;
}
/* Notification styles */
.notifications-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.notification-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
align-items: start;
}
.notification-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
.notification-content {
min-width: 0;
}
.notification-message {
color: #e0e0e0;
font-size: 0.95rem;
line-height: 1.4;
margin-bottom: 8px;
}
.notification-meta {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.notification-time {
color: #888;
font-size: 0.85rem;
}
.notification-close {
background: none;
border: none;
color: #888;
cursor: pointer;
padding: 5px;
border-radius: 5px;
transition: all 0.3s ease;
flex-shrink: 0;
grid-column: 2;
grid-row: 2;
align-self: end;
justify-self: end;
}
.notification-close:hover {
color: #e74c3c;
background: rgba(231, 76, 60, 0.1);
}
.no-notifications {
text-align: center;
color: #888;
font-style: italic;
padding: 20px;
}
/* Notification action buttons */
.notification-action {
grid-column: 2;
grid-row: 1;
align-self: start;
justify-self: end;
font-size: 0.75rem;
padding: 6px 12px;
min-width: auto;
white-space: nowrap;
margin-bottom: 5px;
}
.notification-action i {
font-size: 0.7rem;
margin-right: 4px;
}
/* Ensure notification meta doesn't interfere with grid layout */
.notification-meta {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
grid-column: 1;
grid-row: 2;
}
/* Mobile responsive styles for notifications */
@media (max-width: 768px) {
.notification-item {
grid-template-columns: 1fr;
gap: 10px;
}
.notification-action {
grid-column: 1;
grid-row: 3;
justify-self: start;
margin-bottom: 0;
}
.notification-close {
grid-column: 1;
grid-row: 3;
justify-self: end;
align-self: center;
}
.notification-meta {
grid-row: 2;
}
}
.admin-chip-creator {
color: #00bcd4;
font-size: 0.8rem;
margin-bottom: 8px;
}
.admin-chip-description {
color: #b0b0b0;
font-size: 0.8rem;
line-height: 1.4;
margin-bottom: 12px;
}
.admin-chip-stats {
display: flex;
gap: 12px;
font-size: 0.75rem;
color: #888;
margin-bottom: 12px;
}
.admin-chip-stats span {
display: flex;
align-items: center;
gap: 4px;
}
.admin-chip-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Admin form styles */
.admin-edit-form {
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.admin-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.admin-form-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
/* Admin search and filters */
.admin-search-bar {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 15px;
color: #e0e0e0;
width: 300px;
margin-bottom: 20px;
}
.admin-search-bar:focus {
outline: none;
border-color: #00bcd4;
}
.admin-filters {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.admin-filter-btn {
background: rgba(255, 255, 255, 0.05);
color: #e0e0e0;
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.admin-filter-btn.active {
background: #00bcd4;
color: #1a1a1a;
border-color: #00bcd4;
}
.admin-filter-btn:hover {
background: rgba(0, 188, 212, 0.1);
}
/* Users management styles */
.admin-users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.admin-user-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.admin-user-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
width: 100%;
}
.admin-user-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00bcd4;
font-size: 2rem;
overflow: hidden;
transition: all 0.3s ease;
}
.admin-user-avatar:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.admin-user-avatar a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
}
.admin-profile-pic {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.admin-user-info {
text-align: left;
flex-grow: 1;
}
.admin-user-name {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 5px;
}
.admin-profile-link {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
}
.admin-profile-link:hover {
color: #00bcd4;
text-decoration: underline;
}
.admin-user-email {
color: #b0b0b0;
font-size: 0.9rem;
margin-bottom: 10px;
}
.admin-user-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
width: 100%;
margin-bottom: 15px;
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-stat-item {
display: flex;
flex-direction: column;
text-align: center;
}
.admin-stat-label {
color: #888;
font-size: 0.7rem;
margin-bottom: 5px;
}
.admin-stat-value {
color: #00bcd4;
font-size: 1.1rem;
font-weight: 600;
}
.admin-user-actions {
display: flex;
gap: 10px;
}
/* Statistics Page Styles */
.stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.stats-header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #00bcd4, #0097a7);
border-radius: 15px;
color: white;
}
.stats-header h1 {
margin: 0 0 10px 0;
font-size: 2.5rem;
}
.stats-header p {
margin: 0;
font-size: 1.1rem;
opacity: 0.9;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.stat-card .stat-icon {
font-size: 2.5rem;
color: #00bcd4;
margin-bottom: 15px;
}
.stat-card .stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.stat-card .stat-label {
color: #666;
font-size: 1rem;
}
.chart-container {
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
.chart-container h3 {
margin: 0 0 20px 0;
color: #333;
font-size: 1.5rem;
}
.recent-visits {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
.recent-visits h3 {
margin: 0 0 20px 0;
color: #333;
font-size: 1.5rem;
}
.visit-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
}
.visit-item:hover {
background-color: #f8f9fa;
}
.visit-item:last-child {
border-bottom: none;
}
.visit-info {
flex: 1;
}
.visit-ip {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.visit-details {
color: #666;
font-size: 0.9rem;
}
.visit-time {
color: #00bcd4;
font-weight: 500;
text-align: right;
}
.no-visits {
text-align: center;
padding: 40px;
color: #666;
}
.no-visits i {
font-size: 3rem;
color: #ddd;
margin-bottom: 15px;
}
.back-button {
display: inline-block;
margin-bottom: 20px;
padding: 10px 20px;
background: #00bcd4;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.2s ease;
}
.back-button:hover {
background: #0097a7;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
}
.visit-item {
flex-direction: column;
align-items: flex-start;
}
.visit-time {
text-align: left;
margin-top: 10px;
}
}
.current-user-badge {
background: #00bcd4;
color: #1a1a1a;
padding: 8px 15px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Admin modal styles */
.admin-modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.admin-modal-content {
background: #2a2a2a;
margin: 5% auto;
padding: 0;
border-radius: 16px;
width: 90%;
max-width: 800px;
max-height: 80vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.admin-modal-header {
padding: 20px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-modal-header h3 {
color: #ffffff;
margin: 0;
}
.admin-close {
color: #888;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.admin-close:hover {
color: #ffffff;
}
.admin-modal-content form {
padding: 30px;
}
.admin-modal-body {
padding: 30px;
}
.admin-modal-body p {
color: #e0e0e0;
margin-bottom: 20px;
line-height: 1.5;
}
.admin-modal-body strong {
color: #ffffff;
font-weight: 600;
}
/* Admin modal form styles */
.admin-modal .form-group {
margin-bottom: 20px;
}
.admin-modal .form-group label {
display: block;
color: #e0e0e0;
font-weight: 500;
margin-bottom: 8px;
font-size: 0.95rem;
}
.admin-modal .form-group select,
.admin-modal .form-group textarea {
width: 100%;
padding: 12px 16px;
background: #2a2a2a;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #ffffff;
font-size: 0.95rem;
transition: all 0.3s ease;
box-sizing: border-box;
}
.admin-modal .form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.admin-modal .form-group select:focus,
.admin-modal .form-group textarea:focus {
outline: none;
border-color: #00bcd4;
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
background: #333333;
}
.admin-modal .form-group select:hover,
.admin-modal .form-group textarea:hover {
border-color: rgba(255, 255, 255, 0.3);
background: #333333;
}
.admin-modal .form-group select option {
background: #2a2a2a;
color: #ffffff;
padding: 8px;
}
.admin-modal .form-group textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.admin-modal .form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Admin chip modal specific styles */
.admin-modal-wide {
max-width: 900px;
width: 95%;
}
.admin-modal-title {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-modal-title h2 {
color: #ffffff;
margin: 0;
font-size: 1.8rem;
font-weight: 600;
}
.admin-modal-creator {
color: #00bcd4;
font-size: 0.9rem;
}
.modal-creator-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-creator-link {
display: flex;
align-items: center;
gap: 12px;
color: #00bcd4;
text-decoration: none;
}
.modal-creator-link img,
.modal-creator-avatar-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #888;
}
.modal-designer-info {
color: #e0e0e0;
font-size: 0.85rem;
}
.designer-label {
color: #ff9800;
}
.modal-chip-header {
display: grid;
grid-template-columns: 300px 1fr;
gap: 30px;
margin-bottom: 30px;
}
.modal-chip-image {
position: relative;
}
.modal-chip-image img {
width: 100%;
height: 300px;
object-fit: contain;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-chip-placeholder {
width: 100%;
height: 300px;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-chip-placeholder .logo-img-large {
width: 150px;
height: 150px;
opacity: 0.3;
}
.modal-chip-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal-chip-description {
color: #e0e0e0;
font-size: 1rem;
line-height: 1.6;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
}
.modal-chip-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.modal-meta-item {
text-align: center;
padding: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.modal-meta-value {
display: block;
font-size: 1.4rem;
font-weight: 600;
color: #00bcd4;
margin-bottom: 4px;
}
.modal-meta-label {
font-size: 0.85rem;
color: #b0b0b0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal-chip-features,
.modal-chip-website,
.modal-chip-model,
.modal-chip-tags,
.modal-chip-event,
.modal-chip-release {
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-chip-features h4,
.modal-chip-website h4,
.modal-chip-model h4,
.modal-chip-tags h4,
.modal-chip-event h4,
.modal-chip-release h4 {
color: #ffffff;
margin: 0 0 12px 0;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
}
.modal-chip-features h4 i,
.modal-chip-website h4 i,
.modal-chip-model h4 i,
.modal-chip-tags h4 i,
.modal-chip-event h4 i,
.modal-chip-release h4 i {
color: #00bcd4;
}
.modal-chip-features p,
.modal-chip-event p,
.modal-chip-release p {
color: #e0e0e0;
margin: 0;
line-height: 1.5;
}
.modal-chip-website a,
.modal-chip-model a {
color: #00bcd4;
text-decoration: none;
transition: color 0.3s ease;
}
.modal-chip-website a:hover,
.modal-chip-model a:hover {
color: #26d0ce;
text-decoration: underline;
}
.modal-tags-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.modal-tag {
padding: 6px 12px;
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
border-radius: 16px;
font-size: 0.85rem;
border: 1px solid rgba(0, 188, 212, 0.3);
}
/* Responsive modal styles */
@media (max-width: 768px) {
.admin-modal-wide {
width: 95%;
margin: 5% auto;
}
.modal-chip-header {
grid-template-columns: 1fr;
gap: 20px;
}
.modal-chip-image img,
.modal-chip-placeholder {
height: 250px;
}
.modal-chip-meta {
grid-template-columns: repeat(2, 1fr);
}
}
.btn-warning {
background: #ff9800;
color: white;
}
.btn-warning:hover {
background: #f57c00;
}
.btn-danger {
background: #e74c3c;
color: white;
border: 1px solid #e74c3c;
}
.btn-danger:hover {
background: #c0392b;
border-color: #c0392b;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.btn-danger:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}
.btn-success {
background: #27ae60;
color: white;
border: 1px solid #27ae60;
}
.btn-success:hover {
background: #229954;
border-color: #229954;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}
.btn-success:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
}
/* Edit badge styles */
.edit-badge {
background: #ff9800;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
margin-left: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.edit-badge i {
font-size: 0.7rem;
}
/* Rejection info styles */
.rejection-info {
margin: 10px 0;
padding: 10px;
background: rgba(231, 76, 60, 0.1);
border: 1px solid rgba(231, 76, 60, 0.2);
border-radius: 6px;
}
.rejection-reason {
margin: 0 0 5px 0;
font-size: 0.9rem;
color: #e74c3c;
}
.rejection-reason strong {
color: #c0392b;
}
.rejection-date {
margin: 0;
font-size: 0.8rem;
color: #95a5a6;
}
.rejection-date i {
margin-right: 5px;
}
/* Landscape mobile improvements */
/* Setup Wizard Styles */
.step-indicator {
display: flex;
justify-content: center;
margin-bottom: 30px;
gap: 20px;
}
.step {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.step.active {
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
border-color: #00bcd4;
transform: scale(1.1);
}
.step.completed {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
border-color: #4caf50;
}
.setup-form {
margin-top: 30px;
}
.setup-form .btn {
width: 100%;
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
margin-top: 10px;
}
.setup-form .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
}
.setup-success {
text-align: center;
padding: 40px 20px;
}
.setup-success i {
font-size: 4rem;
color: #4caf50;
margin-bottom: 20px;
}
.setup-success h3 {
color: #ffffff;
font-size: 2rem;
margin-bottom: 15px;
font-weight: 700;
}
.setup-success p {
color: #b0b0b0;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.setup-credentials {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.setup-credentials h4 {
color: #00bcd4;
font-size: 1.2rem;
margin-bottom: 15px;
font-weight: 600;
}
.setup-credentials .credential-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.setup-credentials .credential-item:last-child {
border-bottom: none;
}
.setup-credentials .credential-label {
color: #e0e0e0;
font-weight: 600;
}
.setup-credentials .credential-value {
color: #00bcd4;
font-family: monospace;
background: rgba(0, 188, 212, 0.1);
padding: 5px 10px;
border-radius: 5px;
border: 1px solid rgba(0, 188, 212, 0.2);
}
.setup-actions {
display: flex;
gap: 15px;
margin-top: 30px;
}
.setup-actions .btn {
flex: 1;
width: auto;
}
/* Quick Start Page Styles */
.quick-start-container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.quick-start-header {
text-align: center;
margin-bottom: 60px;
}
.quick-start-header .page-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(135deg, #00bcd4, #008ba3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.quick-start-header .page-subtitle {
font-size: 1.2rem;
color: #888;
margin: 0;
}
.quick-start-content {
display: flex;
flex-direction: column;
gap: 60px;
}
.guide-section {
background: rgba(255, 255, 255, 0.02);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.guide-section .section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #00bcd4, #008ba3);
border-radius: 50%;
margin-bottom: 20px;
font-size: 1.5rem;
color: #1a1a1a;
}
.guide-section h2 {
font-size: 2.2rem;
font-weight: 600;
margin-bottom: 15px;
color: #00bcd4;
}
.guide-section .section-description {
font-size: 1.1rem;
color: #ccc;
margin-bottom: 40px;
line-height: 1.6;
}
.highlight-section {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.05), rgba(0, 139, 163, 0.05));
border-color: rgba(0, 188, 212, 0.2);
}
.steps-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.step-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00bcd4, #008ba3);
color: #1a1a1a;
border-radius: 50%;
font-weight: 600;
font-size: 1.1rem;
flex-shrink: 0;
}
.step-content h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
color: #fff;
}
.step-content p {
color: #ccc;
line-height: 1.6;
margin-bottom: 15px;
}
.tip-box {
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: 10px;
padding: 15px;
margin-top: 15px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.tip-box i {
color: #ffc107;
font-size: 1.1rem;
margin-top: 2px;
flex-shrink: 0;
}
.tip-box strong {
color: #ffc107;
}
.emphasis-box {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(0, 139, 163, 0.1));
border: 2px solid rgba(0, 188, 212, 0.3);
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
text-align: center;
}
.emphasis-box i {
font-size: 2rem;
color: #00bcd4;
margin-bottom: 15px;
display: block;
}
.emphasis-box h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
color: #00bcd4;
}
.emphasis-box p {
color: #ccc;
line-height: 1.6;
margin: 0;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}
.tip-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.tip-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 10px 30px rgba(0, 188, 212, 0.1);
}
.tip-card i {
font-size: 2rem;
color: #00bcd4;
margin-bottom: 15px;
display: block;
}
.tip-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: #fff;
}
.tip-card p {
color: #ccc;
line-height: 1.5;
margin: 0;
font-size: 0.95rem;
}
.cta-section {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(0, 139, 163, 0.1));
border-color: rgba(0, 188, 212, 0.2);
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 15px;
color: #00bcd4;
}
.cta-content p {
font-size: 1.2rem;
color: #ccc;
margin-bottom: 30px;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
padding: 15px 25px;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
min-width: 160px;
}
/* Responsive Design for Quick Start */
@media (max-width: 768px) {
.quick-start-container {
padding: 20px 15px;
}
.quick-start-header .page-title {
font-size: 2.2rem;
}
.quick-start-header .page-subtitle {
font-size: 1rem;
}
.quick-start-content {
gap: 40px;
}
.guide-section {
padding: 25px 20px;
}
.guide-section h2 {
font-size: 1.8rem;
}
.step-item {
flex-direction: column;
gap: 15px;
align-items: center;
text-align: center;
}
.step-number {
order: -1;
}
.tips-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 250px;
}
.emphasis-box {
padding: 20px 15px;
}
}
/* Custom Date Picker */
.custom-date-picker {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.date-select {
flex: 1;
min-width: 100px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
}
.date-select:focus {
outline: none;
border-color: #00bcd4;
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
background-color: rgba(0, 188, 212, 0.05);
}
.date-select:hover {
border-color: rgba(0, 188, 212, 0.5);
background-color: rgba(255, 255, 255, 0.08);
}
.date-select option {
background: #2a2a2a;
color: #ffffff;
padding: 8px 12px;
font-size: 1rem;
}
.calendar-date-btn {
background: rgba(0, 188, 212, 0.1) !important;
color: #00bcd4 !important;
border: 1px solid rgba(0, 188, 212, 0.3) !important;
padding: 8px 12px !important;
min-width: auto !important;
flex-shrink: 0;
}
.calendar-date-btn:hover {
background: rgba(0, 188, 212, 0.2) !important;
color: #ffffff !important;
border-color: rgba(0, 188, 212, 0.5) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2) !important;
}
.calendar-button-wrapper {
position: relative;
flex-shrink: 0;
display: inline-block;
}
.calendar-date-btn {
pointer-events: none !important;
cursor: pointer !important;
position: relative;
z-index: 1;
}
.hidden-calendar-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
cursor: pointer !important;
border: none;
background: transparent;
margin: 0;
padding: 0;
font-size: 0;
}
.hidden-calendar-input:hover + .calendar-date-btn {
background: rgba(0, 188, 212, 0.2) !important;
color: #ffffff !important;
border-color: rgba(0, 188, 212, 0.5) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2) !important;
}
/* Responsive adjustments for custom date picker */
@media (max-width: 768px) {
.custom-date-picker {
flex-direction: column;
gap: 8px;
}
.date-select {
width: 100%;
min-width: auto;
}
.calendar-button-wrapper {
width: 100%;
}
.calendar-date-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.custom-date-picker {
gap: 6px;
}
.date-select {
padding: 10px 14px;
font-size: 0.95rem;
padding-right: 35px;
background-size: 14px;
background-position: right 10px center;
}
}
/* Image Upload Loading Dialog */
.upload-loading-modal {
z-index: 10000;
background-color: rgba(0, 0, 0, 0.8);
}
.upload-loading-content {
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
border-radius: 14px;
padding: 16px 18px;
text-align: center;
position: relative;
max-width: 280px;
width: 88%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 1px solid rgba(0, 188, 212, 0.25);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.upload-loading-spinner {
margin: 0 auto 14px;
width: 44px;
height: 44px;
}
.spinner {
width: 44px;
height: 44px;
border: 4px solid rgba(0, 188, 212, 0.2);
border-top: 4px solid #00bcd4;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.upload-loading-content h3 {
color: #00bcd4;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 6px;
}
.upload-loading-content p {
color: #ccc;
font-size: 0.95rem;
margin-bottom: 0;
}
/* Removed progress bar styles from upload dialog */
/* Responsive adjustments for upload loading */
@media (max-width: 768px) {
.upload-loading-content {
padding: 14px 16px;
max-width: 240px;
}
.upload-loading-content h3 {
font-size: 1.1rem;
}
.upload-loading-spinner {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.spinner {
width: 40px;
height: 40px;
}
}
/* Collection Styles */
/* Collection Page Specific Styles */
.collection-page {
padding: 40px 0;
}
.collection-header {
text-align: center;
margin-bottom: 40px;
padding: 0 20px;
}
/* Smaller panels for collection page */
.collection-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 0 20px;
}
.collection-page .chip-card {
max-width: 280px;
margin: 0 auto;
}
.collection-page .chip-image {
height: 150px;
width: 150px;
margin: 20px auto 8px auto;
}
.collection-page .chip-content {
padding: 8px;
margin-top: 4px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.collection-page .chip-content h3 {
font-size: 1.1rem;
margin-bottom: 6px;
}
.collection-page .chip-creator {
font-size: 0.85rem;
margin-bottom: 12px;
}
.collection-page .chip-meta {
margin-bottom: 12px;
}
.collection-page .chip-meta-item {
font-size: 0.75rem;
}
.collection-page .chip-stats {
gap: 15px;
font-size: 0.8rem;
margin-bottom: 15px;
}
/* Dashboard styling to match collection page */
.dashboard-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.dashboard-page .chip-card {
max-width: 240px;
margin: 0 auto;
}
.dashboard-page .chip-image {
width: 150px;
height: 150px;
}
.dashboard-page .chip-content {
padding: 8px;
margin-top: 4px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.dashboard-page .chip-content h3 {
font-size: 1rem;
margin-bottom: 6px;
}
.dashboard-page .chip-creator {
font-size: 0.8rem;
margin-bottom: 12px;
}
.dashboard-page .chip-meta {
margin-bottom: 12px;
}
.dashboard-page .chip-meta-item {
font-size: 0.75rem;
}
.dashboard-page .chip-stats {
gap: 15px;
font-size: 0.8rem;
margin-bottom: 15px;
}
/* Dashboard hover effects - match showcase exactly */
.dashboard-page .chip-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 188, 212, 0.4);
box-shadow: 0 15px 35px rgba(0, 188, 212, 0.2);
transition: all 0.3s ease;
}
.dashboard-page .chip-card:hover .chip-image img {
transform: scale(1.25);
transition: transform 0.3s ease;
}
.dashboard-page .chip-card .chip-overlay {
display: none;
}
/* Dashboard chip engagement stats */
.chip-engagement-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.engagement-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
color: #888;
font-weight: 500;
}
.engagement-stat i {
font-size: 0.8rem;
color: #00bcd4;
}
.engagement-stat:first-child i {
color: #ff4757;
}
.engagement-stat:last-child i {
color: #2ed573;
}
/* Collection page styling - match showcase layout */
.collection-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 22px;
}
.collection-page .chip-image {
width: 150px;
height: 150px;
}
.collection-page .chip-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 188, 212, 0.4);
box-shadow: 0 15px 35px rgba(0, 188, 212, 0.2);
transition: all 0.3s ease;
}
.collection-page .chip-card:hover .chip-image img {
transform: scale(1.25);
transition: transform 0.3s ease;
}
.collection-page .chip-card .chip-overlay {
display: none;
}
/* Missing chips styling - make them brighter */
.collection-page .chip-card.missing .chip-image img {
filter: none !important;
opacity: 1 !important;
}
.collection-page .chip-card.missing .chip-placeholder {
opacity: 1;
}
.collection-page .chip-card.missing .missing-overlay {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
color: white;
font-size: 2rem;
font-weight: bold;
}
.collection-header h1 {
color: #00bcd4;
font-size: 2.5rem;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.collection-subtitle {
color: #b0b0b0;
font-size: 1.1rem;
margin-bottom: 30px;
}
.collection-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
padding: 0 20px;
}
.collection-stats .stat-card {
background: rgba(42, 42, 42, 0.8);
border: 1px solid rgba(0, 188, 212, 0.2);
border-radius: 12px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
/* Removed hover effects to prevent confusion with buttons */
.collection-stats .stat-card i {
font-size: 2rem;
color: #00bcd4;
margin-bottom: 15px;
}
.collection-stats .stat-card h3 {
font-size: 2rem;
color: #e0e0e0;
margin-bottom: 5px;
font-weight: 700;
}
.collection-stats .stat-card p {
color: #b0b0b0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.progress-section {
background: rgba(42, 42, 42, 0.8);
border: 1px solid rgba(0, 188, 212, 0.2);
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.progress-section h3 {
color: #00bcd4;
margin-bottom: 20px;
font-size: 1.3rem;
}
.progress-bar {
width: 100%;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #00bcd4, #008ba3);
border-radius: 10px;
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.progress-text {
color: #b0b0b0;
font-size: 1rem;
font-weight: 500;
}
.collection-tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
justify-content: center;
padding: 0 20px;
}
.empty-collection {
text-align: center;
padding: 60px 20px;
background: rgba(42, 42, 42, 0.5);
border-radius: 12px;
border: 1px solid rgba(0, 188, 212, 0.1);
margin: 0 20px;
}
.empty-collection h3 {
color: #e0e0e0;
font-size: 1.5rem;
margin-bottom: 15px;
}
.empty-collection p {
color: #b0b0b0;
font-size: 1.1rem;
margin-bottom: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Enhanced chip overlay styles for collection */
.chip-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 20px;
}
/* Keep default overlay behavior globally; home page will override to hide overlay */
.chip-card:hover .chip-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
color: white;
padding: 20px;
}
.overlay-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
color: #ffffff;
}
.overlay-creator {
font-size: 0.9rem;
color: #00bcd4;
margin-bottom: 20px;
}
.overlay-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
}
/* Card actions row (visible buttons) */
.card-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 16px 12px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin-top: auto;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 0 0 16px 16px;
margin: 0 -12px -12px -12px;
}
.card-actions .overlay-btn {
padding: 12px;
min-width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
}
.card-actions .overlay-btn:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.card-actions .overlay-btn i {
font-size: 1rem;
pointer-events: none;
}
.card-actions .btn-view {
white-space: nowrap;
}
/* Screen-reader-only utility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 1px, 1px);
white-space: nowrap;
border: 0;
}
.overlay-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.overlay-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.overlay-btn-primary {
background: rgba(0, 188, 212, 0.2);
border: 1px solid #00bcd4;
color: #00bcd4;
transition: all 0.3s ease;
}
.overlay-btn-primary:hover {
background: #00bcd4;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}
.overlay-btn-danger {
background: rgba(244, 67, 54, 0.8);
color: #ffffff;
border-color: #f44336;
}
.overlay-btn-danger:hover {
background: rgba(244, 67, 54, 1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}
.overlay-btn-like {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.overlay-btn-like:hover {
background: rgba(255, 71, 87, 0.2);
border-color: #ff4757;
}
.overlay-btn-like.liked {
background: rgba(255, 71, 87, 0.3);
border-color: #ff4757;
color: #ff4757;
}
.overlay-btn-like.liked i {
color: #ff4757 !important;
}
.card-actions .overlay-btn-like.liked i {
color: #ff4757 !important;
}
.overlay-btn-collect {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.overlay-btn-collect:hover {
background: rgba(0, 188, 212, 0.2);
border-color: #00bcd4;
}
.overlay-btn-collect.collected {
background: rgba(76, 175, 80, 0.3);
border-color: #4caf50;
color: #4caf50;
}
.overlay-btn-collect.collected i {
color: #4caf50 !important;
}
.card-actions .overlay-btn-collect.collected i {
color: #4caf50 !important;
}
/* Missing chip styles */
.chip-card.missing {
opacity: 0.7;
}
.chip-card.missing:hover {
opacity: 1;
}
.missing-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: #b0b0b0;
font-size: 3rem;
}
.chip-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chip-status.approved {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
border: 1px solid rgba(76, 175, 80, 0.3);
}
.chip-status.pending {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}
@media (max-width: 1200px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hero-text {
text-align: center;
}
.hero-stats {
flex-direction: row;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
.chips-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
}
/* Image Tab Interface */
.image-tabs {
display: flex;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 8px 8px 0 0;
}
.image-tab {
flex: 1;
padding: 15px 20px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.image-tab:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.05);
}
.image-tab.active {
color: #00bcd4;
background: rgba(0, 188, 212, 0.1);
}
.image-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #00bcd4;
}
.image-tab i {
font-size: 16px;
}
.image-tab-content {
display: none;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 0 0 8px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
}
.image-tab-content.active {
display: block;
}
.image-tab-container {
margin-bottom: 20px;
}
.image-tab-container .form-group {
margin-bottom: 0;
}
/* Tab indicators for required fields */
.image-tab.required::before {
content: '*';
color: #ff6b6b;
margin-right: 4px;
font-weight: bold;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.image-tabs {
flex-direction: column;
}
.image-tab {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.image-tab.active::after {
display: none;
}
.image-tab.active {
border-left: 3px solid #00bcd4;
}
}
/* Chip Variants Section Styles */
.chip-variants-section {
margin-top: 40px;
padding: 30px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.chip-variants-section h3 {
color: #00bcd4;
font-size: 1.5rem;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.chip-variants-section h3 i {
font-size: 1.3rem;
}
.parent-chip-card {
background: rgba(0, 188, 212, 0.1);
border: 1px solid rgba(0, 188, 212, 0.3);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
}
.parent-chip-card:hover {
background: rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.5);
transform: translateY(-2px);
}
.parent-chip-link {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: inherit;
}
.parent-chip-image {
width: 100px;
height: 100px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.parent-chip-image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
}
.parent-chip-info h4 {
color: #00bcd4;
font-size: 1.2rem;
margin-bottom: 5px;
}
.parent-chip-info p {
color: #b0b0b0;
font-size: 0.9rem;
}
.variants-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.variant-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.variant-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.variant-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.variant-image {
width: 100%;
height: 180px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.variant-image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 15px;
transition: transform 0.3s ease;
}
.variant-card:hover .variant-image img {
transform: scale(1.05);
}
.variant-info {
padding: 15px;
}
.variant-info h4 {
color: #e0e0e0;
font-size: 1rem;
margin-bottom: 5px;
line-height: 1.3;
}
.variant-info p {
color: #b0b0b0;
font-size: 0.85rem;
}
.no-variants-message {
text-align: center;
padding: 30px 20px;
color: #b0b0b0;
}
.no-variants-message p {
margin-bottom: 20px;
font-size: 1rem;
}
.no-variants-message i {
color: #00bcd4;
margin-right: 8px;
}
.chip-placeholder-small {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
}
.logo-img-sm {
width: 40px;
height: 40px;
opacity: 0.6;
}
/* Modal Variants Styles */
.modal-chip-variants {
margin-top: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-chip-variants h3 {
color: #00bcd4;
font-size: 1.3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.modal-chip-variants h3 i {
font-size: 1.1rem;
}
.modal-variants-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 15px;
}
.modal-variant-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-variant-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.modal-variant-image {
width: 100%;
height: 120px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 8px 8px 0 0;
}
.modal-variant-image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
transition: transform 0.3s ease;
}
.modal-variant-card:hover .modal-variant-image img {
transform: scale(1.05);
}
.modal-variant-info {
padding: 10px;
}
.modal-variant-info h4 {
color: #e0e0e0;
font-size: 0.9rem;
margin-bottom: 3px;
line-height: 1.2;
}
.modal-variant-info p {
color: #b0b0b0;
font-size: 0.75rem;
}
/* Modal Variant Action Buttons */
.modal-variant-actions {
display: flex;
gap: 5px;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.1);
justify-content: center;
align-items: center;
}
.modal-variant-actions .overlay-btn {
flex: 0 0 auto;
padding: 6px;
font-size: 0.8rem;
min-width: 0;
}
.modal-variant-card .collection-badge {
position: absolute;
top: 8px;
right: 8px;
background: rgba(76, 175, 80, 0.9);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
z-index: 2;
}
.modal-variant-image {
position: relative;
}
.modal-no-variants {
text-align: center;
padding: 20px;
color: #b0b0b0;
}
.modal-no-variants p {
margin-bottom: 15px;
font-size: 0.9rem;
}
.modal-no-variants i {
color: #00bcd4;
margin-right: 6px;
}
.modal-parent-chip {
background: rgba(0, 188, 212, 0.1);
border: 1px solid rgba(0, 188, 212, 0.3);
border-radius: 8px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 15px;
}
.modal-parent-chip:hover {
background: rgba(0, 188, 212, 0.15);
border-color: rgba(0, 188, 212, 0.5);
transform: translateY(-2px);
}
.modal-parent-chip-image {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.modal-parent-chip-image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
.modal-parent-chip-info h4 {
color: #00bcd4;
font-size: 1rem;
margin-bottom: 3px;
}
.modal-parent-chip-info p {
color: #b0b0b0;
font-size: 0.8rem;
}
.modal-chip-placeholder-small {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
}
.logo-img-sm {
width: 30px;
height: 30px;
opacity: 0.6;
}
/* Responsive styles for variants */
@media (max-width: 768px) {
.chip-variants-section {
margin-top: 30px;
padding: 20px;
}
.chip-variants-section h3 {
font-size: 1.3rem;
}
.parent-chip-link {
flex-direction: column;
text-align: center;
gap: 15px;
}
.parent-chip-image {
width: 60px;
height: 60px;
}
.variants-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.variant-image {
height: 120px;
}
.variant-info {
padding: 12px;
}
.variant-info h4 {
font-size: 0.9rem;
}
.variant-info p {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.chip-variants-section {
margin-top: 20px;
padding: 15px;
}
.chip-variants-section h3 {
font-size: 1.2rem;
}
.variants-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.variant-image {
height: 100px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
/* Admin modal mobile improvements */
.admin-modal-content {
margin: 5% auto;
width: 95%;
max-width: none;
max-height: 90vh;
overflow-y: auto;
}
.admin-modal-header {
padding: 15px 20px;
position: sticky;
top: 0;
background: #2a2a2a;
z-index: 10;
}
.admin-modal-body {
padding: 20px;
padding-bottom: 80px; /* Space for sticky footer */
}
.admin-modal .form-group select,
.admin-modal .form-group input,
.admin-modal .form-group textarea {
padding: 12px;
font-size: 16px; /* Prevents zoom on iOS */
border-radius: 8px;
}
.admin-modal .form-group textarea {
min-height: 100px;
resize: vertical;
}
.admin-form-actions {
flex-direction: column;
gap: 10px;
position: sticky;
bottom: 0;
background: #2a2a2a;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px 20px;
z-index: 10;
}
.admin-form-actions .btn {
width: 100%;
justify-content: center;
padding: 12px;
font-size: 16px;
}
.admin-form-row {
flex-direction: column;
gap: 15px;
}
.admin-form-row .form-group {
width: 100%;
}
/* Hide nav text on mobile, show only icons */
.nav-text {
display: none;
}
/* Hide home button on mobile since users can click the banner */
.home-btn {
display: none;
}
/* Hide collection button pulsing dot on mobile */
.nav-btn[href*="collection"]::after {
display: none;
}
/* Adjust nav buttons for icon-only display */
.nav-btn {
padding: 8px 12px;
min-width: 44px;
justify-content: center;
}
/* Adjust profile dropdown button */
.profile-dropdown-btn {
padding: 8px 12px;
min-width: 44px;
}
/* Hide dropdown arrow on mobile */
.dropdown-arrow {
display: none;
}
/* Ensure profile picture is visible on mobile */
.header-profile-pic {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
/* Adjust nav container for mobile */
.nav-container {
padding: 0 10px;
}
/* Make logo smaller on mobile */
.banner-logo {
height: 30px;
max-width: 200px;
}
.chip-icon-banner {
height: 35px;
width: 35px;
}
.search-sort-form {
gap: 12px;
}
.sort-controls {
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 400px;
align-items: center;
justify-content: center;
text-align: center;
}
.sort-select {
width: 100%;
min-width: auto;
padding: 8px 14px;
font-size: 0.85rem;
}
.pagination {
gap: 6px;
margin-top: 40px;
flex-wrap: nowrap;
justify-content: center;
display: flex;
align-items: center;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.page-btn {
padding: 8px 10px;
min-width: 40px;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
white-space: nowrap;
}
.page-current {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #e0e0e0;
font-weight: 500;
white-space: nowrap;
min-width: 70px;
text-align: center;
flex-shrink: 0;
font-size: 0.85rem;
}
/* Mobile hero chip grid adjustments */
.hero-chip-item {
width: 120px;
height: 120px;
margin-left: -60px; /* Half of width */
margin-top: -60px; /* Half of height */
}
.hero-chip-image {
width: 90px;
height: 90px;
margin-bottom: 5px;
}
.hero-chip-name {
font-size: 0.6rem;
}
.hero-chip-creator {
font-size: 0.5rem;
}
/* Fix navbar overflow on mobile */
.nav-container {
flex-wrap: wrap;
gap: 10px;
padding: 15px 10px;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 10px;
}
.nav-btn {
padding: 8px 12px;
font-size: 0.85rem;
white-space: nowrap;
flex-shrink: 0;
}
.profile-dropdown-menu {
right: -10px;
left: auto;
min-width: 180px;
margin-top: 5px;
}
.profile-header {
flex-direction: column;
text-align: center;
gap: 20px;
}
.profile-avatar {
width: 100px;
height: 100px;
margin: 0 auto;
}
.profile-username {
font-size: 2rem;
}
.profile-stats {
justify-content: center;
gap: 20px;
}
.social-links {
justify-content: center;
}
.profile-picture-upload {
flex-direction: column;
text-align: center;
}
.current-picture {
margin: 0 auto;
}
.creator-avatar {
width: 25px;
height: 25px;
}
.creator-avatar-placeholder {
font-size: 0.7rem;
}
.hero-modern {
padding: 60px 0;
margin: 0;
width: 100%;
overflow: hidden;
}
.chips-section {
padding: 60px 0;
margin: 0;
width: 100%;
overflow: hidden;
}
.about-section {
padding: 60px 0;
margin: 0;
width: 100%;
overflow: hidden;
}
.cta-section {
padding: 60px 0;
margin: 0;
width: 100%;
overflow: hidden;
}
.hero-showcase {
padding: 60px 0;
min-height: auto;
}
.hero-container {
padding: 0 15px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.8rem;
}
.hero-description {
font-size: 1rem;
margin-bottom: 30px;
}
.nav-container {
flex-direction: column;
gap: 15px;
padding: 15px 20px;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.nav-btn {
padding: 8px 16px;
font-size: 0.9rem;
}
.logo h1 {
font-size: 1.5rem;
}
.banner-logo {
height: 32px;
max-width: 250px;
}
.hero-text h2 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero-text p {
font-size: 1.1rem;
margin-bottom: 30px;
}
.chips-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
padding: 0 10px;
}
.collection-page {
padding: 20px 0;
}
.collection-header {
padding: 0 15px;
}
.collection-stats {
padding: 0 15px;
}
.progress-section {
margin-left: 15px;
margin-right: 15px;
padding: 20px;
}
.collection-tabs {
padding: 0 15px;
}
.collection-page .chips-grid {
padding: 0 15px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.collection-page .chip-image {
width: 130px;
height: 130px;
}
.dashboard-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 15px;
}
.dashboard-page .chip-image {
width: 130px;
height: 130px;
}
.empty-collection {
margin: 0 15px;
padding: 40px 15px;
}
.hero-actions {
justify-content: center;
flex-direction: column;
gap: 15px;
}
.cta-button {
width: 100%;
max-width: 300px;
justify-content: center;
}
.hero-stats {
flex-direction: row;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin: 40px 0;
}
.stat-item {
width: 120px;
height: 120px;
min-width: 120px;
min-height: 120px;
max-width: 120px;
max-height: 120px;
border-width: 10px;
border-radius: 50% !important;
aspect-ratio: 1 / 1;
}
.stat-chip-image {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Remove old poker chip styling - no longer needed */
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.7rem;
letter-spacing: 1px;
}
.section-header {
flex-direction: column;
align-items: stretch;
gap: 15px;
margin-bottom: 40px;
}
.add-chip-section {
justify-content: center;
margin-bottom: 20px;
}
.btn-small {
width: auto;
min-width: 120px;
}
.section-title {
font-size: 2rem;
margin-bottom: 15px;
}
.section-subtitle {
font-size: 1rem;
margin-bottom: 30px;
}
.chip-actions {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
justify-content: center;
}
.pagination {
flex-direction: row !important;
gap: 6px;
margin-top: 40px;
flex-wrap: nowrap;
justify-content: center;
display: flex;
align-items: center;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.page-numbers {
order: 2;
flex-wrap: wrap;
justify-content: center;
}
.about-content {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 10px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.feature-card {
text-align: center;
}
.feature-icon {
margin: 0 auto 20px auto;
}
.about-header .section-title {
font-size: 2.5rem;
margin-bottom: 20px;
}
.about-description {
font-size: 1rem;
margin-bottom: 25px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 35px;
}
.chip-header {
grid-template-columns: 1fr;
gap: 20px;
}
.chip-image-large {
width: 300px;
height: 300px;
min-height: 300px;
}
.chip-title {
font-size: 2rem;
}
.chip-meta {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.dashboard-content {
grid-template-columns: 1fr;
gap: 30px;
}
.dashboard-stats {
grid-template-columns: 1fr 1fr !important;
gap: 12px;
padding: 0 12px;
margin-bottom: 16px;
grid-auto-flow: row;
}
.dashboard-stats .stat-card {
padding: 20px 15px;
border-radius: 12px;
}
.dashboard-stats .stat-card i {
font-size: 2rem;
margin-bottom: 10px;
}
.dashboard-stats .stat-card h4 {
font-size: 1.5rem;
margin-bottom: 5px;
}
.dashboard-stats .stat-card p {
font-size: 0.85rem;
}
.dashboard-title {
font-size: 2rem;
}
.search-section {
padding: 40px 0;
}
.search-form {
max-width: 90%;
}
.search-input-group {
border-radius: 25px;
}
.search-input {
padding: 18px 20px 18px 60px;
font-size: 1.1rem;
border-radius: 25px 0 0 25px;
}
.search-icon {
left: 20px;
font-size: 1.2rem;
}
.search-btn {
padding: 18px 24px;
font-size: 1rem;
border-radius: 0 25px 25px 0;
}
.modal-content {
width: 95%;
margin: 10% auto;
max-height: 85vh;
}
.modal-header {
padding: 15px 20px;
}
.modal-content form {
padding: 20px;
}
.modal-actions {
flex-direction: column;
gap: 10px;
}
.cta-content {
padding: 0 15px;
}
.cta-title {
font-size: 2rem;
margin-bottom: 20px;
}
.cta-description {
font-size: 1rem;
margin-bottom: 30px;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
}
.btn-cta {
width: 100%;
max-width: 300px;
justify-content: center;
}
.profile-dropdown-menu {
right: -10px;
left: -10px;
min-width: auto;
width: auto;
}
.profile-dropdown-btn span {
display: none;
}
.profile-dropdown-btn {
padding: 10px 12px;
}
.chip-icon-banner {
height: 28px;
width: 28px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
/* Even more compact navbar for very small screens */
.nav-btn {
padding: 6px 8px;
min-width: 40px;
}
.profile-dropdown-btn {
padding: 6px 8px;
min-width: 40px;
}
.header-profile-pic {
width: 28px;
height: 28px;
}
.banner-logo {
height: 25px;
max-width: 150px;
}
.chip-icon-banner {
height: 30px;
width: 30px;
}
.nav-container {
padding: 0 8px;
}
/* Extra small mobile hero chip grid */
.hero-chip-item {
width: 100px;
height: 100px;
margin-left: -50px; /* Half of width */
margin-top: -50px; /* Half of height */
}
.hero-chip-image {
width: 75px;
height: 75px;
margin-bottom: 3px;
}
.hero-chip-name {
font-size: 0.5rem;
}
.hero-chip-creator {
font-size: 0.4rem;
}
/* Reduce number of rows on very small screens */
.chip-grid-container {
padding: 10px 0;
}
.hero-modern {
padding: 40px 0;
}
.chips-section {
padding: 40px 0;
}
.about-section {
padding: 40px 0;
}
.cta-section {
padding: 40px 10px;
}
.hero-showcase {
padding: 40px 0;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.5rem;
}
.hero-description {
font-size: 0.95rem;
margin-bottom: 25px;
}
.nav-container {
padding: 10px 15px;
}
.logo h1 {
font-size: 1.3rem;
}
.banner-logo {
height: 40px;
max-width: 300px;
}
.hero-text h2 {
font-size: 2rem;
margin-bottom: 10px;
}
.hero-text p {
font-size: 1rem;
margin-bottom: 25px;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 10px;
}
.section-subtitle {
font-size: 0.95rem;
margin-bottom: 25px;
}
.chips-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
padding: 0 5px;
}
.chip-card {
margin: 0 5px;
}
.chip-content {
padding: 15px;
}
.chip-content h4 {
font-size: 1rem;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 20px;
margin: 30px 0;
}
.stat {
padding: 12px;
}
.stat-number {
font-size: 1.5rem;
}
.chip-image-large {
width: 250px;
height: 250px;
min-height: 250px;
}
.chip-title {
font-size: 1.8rem;
}
.chip-meta {
grid-template-columns: 1fr;
gap: 10px;
}
.dashboard-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.collection-stats {
grid-template-columns: 1fr;
gap: 15px;
padding: 0 10px;
}
.collection-tabs {
flex-direction: column;
gap: 8px;
padding: 0 10px;
}
.tab-btn {
width: 100%;
justify-content: center;
}
.progress-section {
margin-left: 10px;
margin-right: 10px;
padding: 20px 15px;
}
.collection-page .chips-grid {
padding: 0 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.collection-page .chip-image {
width: 115px;
height: 115px;
}
.dashboard-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.dashboard-page .chip-image {
width: 115px;
height: 115px;
}
.empty-collection {
margin: 0 10px;
padding: 30px 15px;
}
.collection-badge {
width: 20px;
height: 20px;
font-size: 10px;
top: 6px;
right: 6px;
}
.cta-title {
font-size: 1.8rem;
margin-bottom: 15px;
}
.cta-description {
font-size: 0.95rem;
margin-bottom: 25px;
}
.stat-item {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
max-width: 100px;
max-height: 100px;
border-width: 8px;
border-radius: 50% !important;
aspect-ratio: 1 / 1;
}
.stat-chip-image {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Remove old poker chip styling - no longer needed */
.stat-label {
font-size: 0.65rem;
letter-spacing: 0.5px;
}
.dashboard-page .chips-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
.dashboard-page .chip-card {
max-width: 240px;
}
.dashboard-page .chip-image {
height: 150px;
width: 150px;
margin: 20px auto 8px auto;
}
.dashboard-page .chip-content {
padding: 8px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.dashboard-page .chip-content h3 {
font-size: 1rem;
}
.dashboard-page .chip-creator {
font-size: 0.8rem;
}
.chip-image {
width: 140px;
height: 140px;
}
.admin-stats {
grid-template-columns: repeat(2, 1fr);
}
.admin-stat-card h3 {
font-size: 2rem;
}
.admin-chip-image {
height: 80px;
width: 80px;
margin: 0 auto 8px;
}
.admin-chip-title {
font-size: 1.1rem;
}
.admin-chip-actions {
flex-direction: column;
}
.admin-chip-actions .btn {
width: 100%;
text-align: center;
}
}
@media (hover: none) and (pointer: coarse) {
.nav-btn {
min-height: 44px;
padding: 12px 20px;
}
.btn {
min-height: 44px;
padding: 12px 20px;
}
.cta-button {
min-height: 44px;
padding: 12px 20px;
}
.page-btn {
min-height: 44px;
padding: 12px 20px;
}
.tab-btn {
min-height: 44px;
padding: 12px 20px;
}
.chip-card {
cursor: pointer;
}
.chip-card:hover {
transform: none;
}
.chip-card:active {
transform: scale(0.98);
}
.search-input {
font-size: 16px;
}
.form-group input {
font-size: 16px;
}
.form-group textarea {
font-size: 16px;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.hero-showcase {
padding: 40px 0;
}
.hero-text h2 {
font-size: 2rem;
}
.hero-stats {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.stat {
padding: 10px;
}
.stat-number {
font-size: 1.5rem;
}
.hero-modern {
padding: 40px 0;
}
.chips-section {
padding: 40px 0;
}
.about-section {
padding: 40px 0;
}
.cta-section {
padding: 40px 0;
}
}
/* Remember Me Checkbox Styles */
.checkbox-group {
margin: 15px 0;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
user-select: none;
padding: 8px 0;
}
.checkbox-label:hover {
color: #ffffff;
}
.checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 6px;
margin-right: 12px;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.checkbox-label:hover .checkmark {
border-color: rgba(0, 188, 212, 0.6);
background-color: rgba(0, 188, 212, 0.1);
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}
.checkbox-label input:checked ~ .checkmark {
background-color: rgba(0, 188, 212, 0.9);
border-color: rgba(0, 188, 212, 1);
box-shadow: 0 0 15px rgba(0, 188, 212, 0.4);
transform: scale(1.05);
}
/* Chip Detail Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-content {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
margin: 2% auto;
padding: 0;
border: 2px solid rgba(0, 188, 212, 0.3);
border-radius: 15px;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
padding: 15px 25px;
border-bottom: 1px solid rgba(0, 188, 212, 0.2);
border-radius: 13px 13px 0 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
position: sticky;
top: 0;
z-index: 1;
gap: 20px;
}
.modal-title h2 {
color: #e0e0e0;
font-size: 1.6rem;
font-weight: 600;
margin: 0 0 3px 0;
line-height: 1.2;
}
.modal-creator {
color: #00bcd4;
font-size: 0.9rem;
font-weight: 500;
}
.modal-creator-link {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
padding: 5px;
border-radius: 8px;
}
.modal-creator-link:hover {
background: rgba(0, 188, 212, 0.1);
transform: translateY(-1px);
}
.modal-creator-link img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0, 188, 212, 0.3);
transition: border-color 0.3s ease;
}
.modal-creator-link:hover img {
border-color: rgba(0, 188, 212, 0.6);
}
.modal-creator-avatar-placeholder {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 188, 212, 0.2);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(0, 188, 212, 0.3);
transition: all 0.3s ease;
}
.modal-creator-avatar-placeholder i {
font-size: 12px;
color: #00bcd4;
}
.modal-creator-link:hover .modal-creator-avatar-placeholder {
background: rgba(0, 188, 212, 0.3);
border-color: rgba(0, 188, 212, 0.6);
}
.modal-creator-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-designer-info {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.designer-label {
color: #e0e0e0;
font-size: 0.9rem;
font-style: italic;
}
.ownership-transfer-btn {
background: none !important;
border: none !important;
color: rgba(255, 193, 7, 0.7) !important;
font-size: 0.75rem;
padding: 2px 4px;
transition: all 0.3s ease;
border-radius: 3px;
min-height: auto;
line-height: 1.2;
text-decoration: underline;
font-weight: 400;
}
.ownership-transfer-btn:hover {
background: rgba(255, 193, 7, 0.1) !important;
color: #ffc107 !important;
text-decoration: none;
transform: none;
}
.ownership-transfer-btn i {
margin-right: 3px;
font-size: 0.7rem;
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
line-height: 1;
padding: 5px;
border-radius: 5px;
}
.close:hover,
.close:focus {
color: #00bcd4;
background: rgba(0, 188, 212, 0.1);
}
.modal-body {
padding: 30px;
color: #e0e0e0;
}
.loading-spinner {
text-align: center;
padding: 40px 20px;
color: #00bcd4;
}
.loading-spinner i {
font-size: 2rem;
margin-bottom: 15px;
display: block;
}
.loading-spinner p {
font-size: 1.1rem;
opacity: 0.8;
}
.error-message {
text-align: center;
padding: 40px 20px;
color: #f44336;
}
.error-message i {
font-size: 2rem;
margin-bottom: 15px;
display: block;
}
.error-message p {
font-size: 1.1rem;
opacity: 0.9;
}
/* Modal Chip Content Styles */
.modal-chip-header {
display: flex;
gap: 30px;
margin-bottom: 30px;
align-items: flex-start;
}
.modal-chip-image {
flex: 0 0 200px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
.modal-chip-image img {
width: 100%;
height: 200px;
object-fit: contain;
background: rgba(255,255,255,0.03);
display: block;
}
/* Modal Slideshow Styles */
.modal-chip-slideshow {
width: 100%;
position: relative;
}
.modal-slideshow-container {
width: 100%;
height: 200px;
position: relative;
background: rgba(255,255,255,0.03);
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
perspective: 1000px;
}
.modal-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-slide.active {
opacity: 1;
}
/* Flip animation for the image */
.modal-slideshow-container.flipping .modal-slide.active img {
transform: rotateY(180deg);
opacity: 0;
transition: transform 0.6s ease, opacity 0.1s ease;
}
/* Normal state for images */
.modal-slide.active img {
transform: rotateY(0deg);
opacity: 1;
transition: transform 0.6s ease, opacity 0.3s ease;
}
.modal-slide img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
border-radius: 10px;
max-width: 100%;
max-height: 100%;
padding: 10px;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
/* Flip animation for the image */
.modal-slideshow-container.flipping .modal-slide.active img {
transform: rotateY(180deg);
}
.modal-slide-overlay {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
pointer-events: none;
}
.modal-flip-btn {
pointer-events: auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.modal-flip-btn:hover {
background: rgba(0, 188, 212, 0.8);
border-color: #00bcd4;
transform: scale(1.1);
}
.modal-image-actions {
display: flex;
gap: 10px;
justify-content: center;
padding: 0 10px 15px 10px;
}
.modal-image-actions .modal-btn {
flex: 1;
padding: 8px 12px;
font-size: 0.9rem;
min-width: auto;
}
.modal-variants-button-container {
margin-top: 15px;
width: 100%;
padding: 0 10px;
}
.modal-btn-full-width {
width: 100%;
justify-content: center;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
}
.modal-features-section {
margin-top: 20px;
padding: 0 10px;
}
.modal-features-section h3 {
color: #00bcd4;
font-size: 1.1rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.modal-features-section h3 i {
font-size: 1rem;
}
/* Styled Select Dropdown */
.styled-select {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #e0e0e0;
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300bcd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
}
.styled-select:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
.styled-select:focus {
outline: none;
border-color: #00bcd4;
box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
background-color: rgba(255, 255, 255, 0.08);
}
.styled-select option {
background: #2a2a2a;
color: #e0e0e0;
padding: 8px 12px;
}
.styled-select option:hover {
background: #3a3a3a;
}
.modal-chip-placeholder {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed rgba(0, 188, 212, 0.3);
}
.modal-chip-placeholder img {
width: 60px;
height: 60px;
opacity: 0.6;
}
.modal-chip-info {
flex: 1;
}
.modal-chip-description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 20px;
color: #d0d0d0;
}
.modal-chip-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 25px;
}
.modal-meta-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 80px;
min-height: 80px;
justify-content: center;
padding: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-sizing: border-box;
}
.modal-meta-value {
font-size: 1.2rem;
font-weight: 600;
color: #00bcd4;
margin-bottom: 5px;
}
.modal-meta-label {
font-size: 0.9rem;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modal-chip-actions {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
}
.modal-btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 120px;
justify-content: center;
}
.modal-btn-primary {
background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
color: white;
}
.modal-btn-primary:hover {
background: linear-gradient(135deg, #0097a7 0%, #006064 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3);
}
.modal-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.modal-btn-success {
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
color: white;
}
.modal-btn-success:hover {
background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
}
/* Collection button icon styling */
.modal-btn i.fa-bookmark {
font-size: 1.1rem;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin-right: 6px;
}
.modal-btn-success i.fa-bookmark {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Report button styling */
.modal-report-section {
margin-top: 20px;
text-align: right;
}
.modal-btn-report {
background: rgba(244, 67, 54, 0.1) !important;
border: 1px solid rgba(244, 67, 54, 0.3) !important;
color: #f44336 !important;
font-size: 0.8rem;
padding: 8px 12px;
min-width: auto;
}
.modal-btn-report:hover {
background: rgba(244, 67, 54, 0.2) !important;
border-color: rgba(244, 67, 54, 0.5) !important;
transform: translateY(-1px);
}
.modal-btn-report i {
margin-right: 4px;
font-size: 0.7rem;
}
/* Admin Reports Styling */
.admin-reports-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.admin-report-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
transition: all 0.3s ease;
}
.admin-report-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.report-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.report-chip-name {
color: #00bcd4;
font-size: 1.2rem;
margin: 0;
}
.report-status {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.report-status.pending {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}
.report-details {
margin-bottom: 20px;
}
.report-details p {
margin: 8px 0;
color: #e0e0e0;
font-size: 0.9rem;
}
.report-details strong {
color: #ffffff;
}
.report-date {
color: #888 !important;
font-size: 0.8rem !important;
}
.report-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.report-actions .btn {
font-size: 0.8rem;
padding: 6px 12px;
}
.modal-chip-details {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 25px;
}
.modal-details-grid {
display: grid;
gap: 25px;
}
.modal-detail-section h3 {
color: #00bcd4;
font-size: 1.3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.modal-detail-section h3 i {
font-size: 1.1rem;
}
.modal-features-list,
.modal-tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.modal-feature-tag {
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(0, 188, 212, 0.3);
}
.modal-tag-item {
background: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Responsive Modal */
@media (max-width: 768px) {
.modal-content {
width: 95%;
margin: 5% auto;
max-height: 95vh;
}
.modal-header {
padding: 15px 20px;
flex-direction: column;
gap: 15px;
}
.modal-title h2 {
font-size: 1.5rem;
}
.modal-creator-link {
gap: 8px;
}
.modal-creator-link img,
.modal-creator-avatar-placeholder {
width: 20px;
height: 20px;
}
.modal-creator-avatar-placeholder i {
font-size: 10px;
}
.modal-body {
padding: 20px;
}
.modal-chip-header {
flex-direction: column;
gap: 20px;
}
.modal-chip-image {
flex: none;
width: 100%;
max-width: 250px;
margin: 0 auto;
}
.modal-chip-actions {
justify-content: center;
}
.modal-btn {
min-width: 100px;
padding: 10px 15px;
font-size: 0.9rem;
}
.modal-chip-meta {
justify-content: center;
}
}
/* Mobile compact stats for collection and dashboard */
@media (max-width: 768px) {
.collection-stats {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
padding: 0 12px;
}
.collection-stats .stat-card { padding: 14px; }
.collection-stats .stat-card i { font-size: 1.4rem; margin-bottom: 8px; }
.collection-stats .stat-card h3 { font-size: 1.4rem; margin-bottom: 2px; }
.collection-stats .stat-card p { font-size: 0.75rem; letter-spacing: .5px; }
.progress-section { padding: 14px; margin: 0 12px 16px 12px; }
.progress-section h3 { font-size: 1.05rem; margin-bottom: 10px; }
.progress-bar { height: 12px; }
/* Generic stat cards on dashboard */
.stat-card { padding: 16px 10px; }
.stat-card i { font-size: 1.6rem; margin-bottom: 8px; }
.stat-card h4 { font-size: 1rem; margin-bottom: 6px; }
.stat-card p { font-size: 0.8rem; }
}
@media (max-width: 480px) {
.modal-content {
width: 98%;
margin: 2% auto;
}
.modal-header {
padding: 15px;
}
.modal-body {
padding: 15px;
}
.modal-title h2 {
font-size: 1.3rem;
}
.modal-creator-link {
gap: 6px;
}
.modal-creator-link img,
.modal-creator-avatar-placeholder {
width: 18px;
height: 18px;
}
.modal-creator-avatar-placeholder i {
font-size: 9px;
}
.modal-chip-actions {
flex-direction: column;
align-items: center;
}
.modal-btn {
width: 100%;
max-width: 200px;
}
}
/* Events Section Styles */
.events-section {
margin-top: 40px;
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.events-title {
color: #e0e0e0;
font-size: 1.8rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px;
}
.events-title i {
color: #00bcd4;
font-size: 1.6rem;
}
.events-subtitle {
color: #b0b0b0;
font-size: 1rem;
margin-bottom: 30px;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.event-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.event-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2);
border-color: rgba(0, 188, 212, 0.3);
}
.event-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.event-name {
color: #e0e0e0;
font-size: 1.2rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.event-date {
color: #00bcd4;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.event-location {
color: #b0b0b0;
font-size: 0.9rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.event-description {
color: #d0d0d0;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 15px;
}
.event-features {
display: flex;
gap: 8px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.feature-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.feature-badge.makerchip-table {
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
border: 1px solid rgba(0, 188, 212, 0.3);
}
.feature-badge.contests {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}
.event-link {
margin-top: 10px;
}
.event-link .btn {
background: rgba(0, 188, 212, 0.2);
color: #00bcd4;
border: 1px solid rgba(0, 188, 212, 0.3);
padding: 6px 12px;
font-size: 0.8rem;
border-radius: 6px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.event-link .btn:hover {
background: rgba(0, 188, 212, 0.3);
border-color: rgba(0, 188, 212, 0.5);
transform: translateY(-1px);
}
/* Admin Events Overview Styles */
.events-overview {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 25px;
margin-top: 20px;
}
.events-overview h3 {
color: #e0e0e0;
font-size: 1.4rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.events-overview h3 i {
color: #00bcd4;
}
.events-overview p {
color: #b0b0b0;
margin-bottom: 15px;
line-height: 1.6;
}
.events-overview ul {
color: #b0b0b0;
margin-left: 20px;
line-height: 1.6;
}
.events-overview li {
margin-bottom: 8px;
}
/* Responsive Design for Events */
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.event-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.event-date {
align-self: flex-end;
}
.events-title {
font-size: 1.5rem;
}
.event-name {
font-size: 1.1rem;
}
.events-overview {
padding: 20px;
}
.events-overview h3 {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.events-section {
margin-top: 30px;
padding: 20px 0;
}
.events-title {
font-size: 1.3rem;
}
.event-card {
padding: 15px;
}
.event-features {
gap: 6px;
}
.feature-badge {
font-size: 0.7rem;
padding: 3px 6px;
}
}
/* Main Events Section Styles */
.events-section-main {
padding: 80px 0;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
position: relative;
overflow: hidden;
}
.events-section-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.events-header {
text-align: center;
margin-bottom: 50px;
}
.events-header .section-title {
color: #e0e0e0;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.events-header .section-title i {
color: #00bcd4;
font-size: 2.2rem;
}
.events-header .section-subtitle {
color: #b0b0b0;
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.events-grid-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
gap: 20px;
margin-bottom: 40px;
justify-content: center;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.event-card-main {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 18px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
max-width: 300px;
}
.event-card-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #00bcd4, #008ba3);
opacity: 0;
transition: opacity 0.3s ease;
}
.event-card-main:hover {
transform: translateY(-5px);
border-color: rgba(0, 188, 212, 0.3);
box-shadow: 0 15px 35px rgba(0, 188, 212, 0.2);
}
.event-card-main:hover::before {
opacity: 1;
}
.event-header-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
gap: 15px;
}
.event-name-main {
color: #e0e0e0;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
flex: 1;
}
.event-date-main {
display: flex;
align-items: center;
gap: 6px;
color: #00bcd4;
font-weight: 600;
font-size: 0.8rem;
white-space: nowrap;
}
.event-date-main i {
font-size: 0.8rem;
}
.event-location-main {
display: flex;
align-items: center;
gap: 6px;
color: #b0b0b0;
font-size: 0.85rem;
margin-bottom: 12px;
}
.event-location-main i {
color: #00bcd4;
font-size: 0.8rem;
}
.event-description-main {
color: #d0d0d0;
line-height: 1.6;
margin-bottom: 20px;
font-size: 0.95rem;
}
.event-features-main {
display: flex;
gap: 8px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.feature-badge-main {
padding: 4px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.feature-badge-main.makerchip-table {
background: rgba(0, 188, 212, 0.15);
color: #00bcd4;
border: 1px solid rgba(0, 188, 212, 0.3);
}
.feature-badge-main.makerchip-table:hover {
background: rgba(0, 188, 212, 0.25);
transform: translateY(-1px);
}
.feature-badge-main.contests {
background: rgba(255, 193, 7, 0.15);
color: #ffc107;
border: 1px solid rgba(255, 193, 7, 0.3);
}
.feature-badge-main.contests:hover {
background: rgba(255, 193, 7, 0.25);
transform: translateY(-1px);
}
.event-link-main {
margin-top: 12px;
}
.event-link-main .btn {
width: 100%;
justify-content: center;
padding: 10px 16px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.event-link-main .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.3);
}
.no-events {
text-align: center;
padding: 60px 20px;
color: #b0b0b0;
}
.no-events-icon {
font-size: 4rem;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.2);
}
.no-events h3 {
color: #e0e0e0;
font-size: 1.5rem;
margin-bottom: 10px;
font-weight: 600;
}
.no-events p {
font-size: 1.1rem;
margin-bottom: 25px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.no-events .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-weight: 600;
}
/* Event Details Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.modal-content {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
margin: 5% auto;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
padding: 25px 30px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
color: #e0e0e0;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.2s ease;
}
.close:hover {
color: #00bcd4;
}
.modal-body {
padding: 30px;
}
.event-details-grid {
display: grid;
gap: 20px;
margin-bottom: 30px;
}
.event-detail-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.event-detail-item i {
color: #00bcd4;
font-size: 1.2rem;
margin-top: 2px;
flex-shrink: 0;
}
.event-detail-item div {
flex: 1;
}
.event-detail-item label {
display: block;
color: #b0b0b0;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.event-detail-item span,
.event-detail-item a {
color: #e0e0e0;
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
}
.event-detail-item a {
color: #00bcd4;
text-decoration: none;
transition: color 0.2s ease;
}
.event-detail-item a:hover {
color: #00a0b0;
text-decoration: underline;
}
.event-description-section {
margin-bottom: 30px;
}
.event-description-section h4 {
color: #e0e0e0;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.event-description-section p {
color: #d0d0d0;
line-height: 1.6;
font-size: 1rem;
margin: 0;
}
.event-features-section {
margin-bottom: 20px;
}
.event-features-section h4 {
color: #e0e0e0;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
}
.event-features-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: rgba(0, 188, 212, 0.1);
border: 1px solid rgba(0, 188, 212, 0.2);
border-radius: 8px;
color: #00bcd4;
font-weight: 500;
}
.feature-item i {
font-size: 1rem;
}
.modal-footer {
padding: 20px 30px 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.modal-footer .btn {
padding: 12px 24px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.modal-footer .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-footer .btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.modal-footer .btn-primary {
background: #00bcd4;
color: #1a1a1a;
border: 1px solid #00bcd4;
}
.modal-footer .btn-primary:hover {
background: #00a0b0;
transform: translateY(-1px);
box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3);
}
/* Responsive modal */
@media (max-width: 768px) {
.modal-content {
margin: 10% auto;
width: 95%;
max-height: 85vh;
}
.modal-header {
padding: 20px 20px 15px;
}
.modal-header h3 {
font-size: 1.3rem;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 15px 20px 20px;
flex-direction: column;
}
.modal-footer .btn {
width: 100%;
justify-content: center;
}
/* Mobile modal chip layout */
.modal-chip-header {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
.modal-chip-image {
order: 1;
}
.modal-chip-info {
order: 2;
}
.modal-chip-meta {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.modal-chip-description {
padding: 15px;
font-size: 0.95rem;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.modal-chip-header {
gap: 15px;
margin-bottom: 15px;
}
.modal-chip-meta {
grid-template-columns: 1fr;
gap: 10px;
}
.modal-chip-description {
padding: 12px;
font-size: 0.9rem;
}
.modal-meta-item {
padding: 12px;
min-height: 70px;
justify-content: center;
}
.modal-meta-value {
font-size: 1.2rem;
}
}
/* Event Modal Checkbox Styling */
.admin-modal .form-group label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 0;
transition: all 0.2s ease;
}
.admin-modal .form-group label:hover {
color: #00bcd4;
}
.admin-modal .form-group input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
border: 2px solid #444;
border-radius: 4px;
background: #2a2a2a;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.admin-modal .form-group input[type="checkbox"]:checked {
background: #00bcd4;
border-color: #00bcd4;
}
.admin-modal .form-group input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #1a1a1a;
font-size: 12px;
font-weight: bold;
}
.admin-modal .form-group input[type="checkbox"]:focus {
outline: none;
border-color: #00bcd4;
box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
}
/* Responsive adjustments for events section */
@media (max-width: 768px) {
.events-section-main {
padding: 60px 0;
}
.events-header .section-title {
font-size: 2rem;
flex-direction: column;
gap: 10px;
}
.events-header .section-title i {
font-size: 1.8rem;
}
.events-header .section-subtitle {
font-size: 1.1rem;
}
.events-grid-main {
grid-template-columns: 1fr;
gap: 20px;
max-width: 350px;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.event-card-main {
padding: 20px;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.event-header-main {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.event-name-main {
font-size: 1.2rem;
}
.event-date-main {
align-self: flex-end;
}
.event-features-main {
gap: 8px;
}
.feature-badge-main {
font-size: 0.75rem;
padding: 5px 10px;
}
}
@media (max-width: 480px) {
.events-section-main {
padding: 40px 0;
}
.events-header .section-title {
font-size: 1.8rem;
}
.events-header .section-subtitle {
font-size: 1rem;
}
.event-card-main {
padding: 15px;
}
.event-name-main {
font-size: 1.1rem;
}
.event-description-main {
font-size: 0.9rem;
}
.no-events {
padding: 40px 15px;
}
.no-events-icon {
font-size: 3rem;
}
.no-events h3 {
font-size: 1.3rem;
}
.no-events p {
font-size: 1rem;
}
}
/* Left actions layout */
.modal-left-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin: 15px 0;
}
.modal-left-actions .modal-btn {
width: 100%;
justify-content: center;
}
.modal-model-link,
.modal-edit-link {
margin: 10px 0;
}
.modal-model-link .modal-btn,
.modal-edit-link .modal-btn {
width: 100%;
justify-content: center;
}