') 16 16, pointer; }
h1 { animation: neonFlicker 3s infinite ease-in-out; }
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px #ff5555, 0 0 10px #ff5555; } 20%, 24%, 55% { text-shadow: none; } }
.pulse-neon {
animation: pulseNeon 1.5s infinite ease-in-out;
}
@keyframes pulseNeon {
0% { box-shadow: 0 0 5px #ff5555, 0 0 10px #ff5555; }
50% { box-shadow: 0 0 15px #ff5555, 0 0 25px #ff5555; }
100% { box-shadow: 0 0 5px #ff5555, 0 0 10px #ff5555; }
}
#matrix-rain {
animation: fadeIn 2s ease-in;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 0.6; }
}
a:hover { text-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555; transition: text-shadow 0.3s ease; }
.copyable-address[data-copied="true"] {
background: #00ff00 !important;
color: #000 !important;
box-shadow: 0 0 10px #00ff00 !important;
}
.copyable-address[data-copied="true"] .copied-message {
display: block !important;
}
.accordion-header.pulse {
animation: neonPulse 0.5s ease-in-out 2;
}
@keyframes neonPulse {
0%, 100% { box-shadow: 0 0 10px #ff5555; }
50% { box-shadow: 0 0 20px #ff5555, 0 0 30px #ff0000; }
}
a:focus, button:focus, [role="button"]:focus {
outline: 2px solid #ff5555;
outline-offset: 2px;
box-shadow: 0 0 10px #ff5555;
}
a:hover, button:hover, .hover-underline:hover, .join-rebellion:hover, .hof-arrow:hover {
box-shadow: 0 0 20px rgba(255, 85, 85, 0.9), 0 0 40px rgba(255, 85, 85, 0.7), 0 0 60px rgba(255, 85, 85, 0.5);
animation: neonBuzz 0.1s infinite alternate;
transition: box-shadow 0.3s ease;
}
@keyframes neonBuzz {
0% { box-shadow: 0 0 20px rgba(255, 85, 85, 0.9), 0 0 40px rgba(255, 85, 85, 0.7); }
100% { box-shadow: 0 0 25px rgba(255, 85, 85, 1), 0 0 50px rgba(255, 85, 85, 0.8); }
}
.phase:hover, .future-teaser:hover {
transform: scale(1.02);
transition: transform 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
border: 4px solid #ff5555;
box-shadow: 0 0 15px #ff5555, 0 0 25px #ff5555;
}
#roadmap:hover {
transform: none !important;
border: none !important;
box-shadow: none !important;
}
.footer-link {
color: #ff5555;
text-decoration: none;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.footer-link:hover {
color: #ff7777;
text-shadow: 0 0 6px #ff5555, 0 0 12px #ff5555;
}
.connect-wallet-bubble {
cursor: pointer;
position: relative;
margin-left: 10px;
width: 90px;
height: 90px;
background: radial-gradient(circle at center, #ff5555, #cc4444);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: pulseGlow 2s infinite ease-in-out;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.connect-wallet-bubble img {
width: 60px;
height: 60px;
object-fit: contain;
filter: brightness(1.2) drop-shadow(0 0 5px #fff);
}
.connect-wallet-bubble.connected {
background: radial-gradient(circle at center, #00cc00, #009900);
}
.connect-wallet-bubble.connected img {
filter: brightness(1.2) drop-shadow(0 0 5px #fff);
}
.connect-wallet-bubble:hover {
transform: scale(1.1);
box-shadow: 0 0 20px #ff5555, 0 0 40px #ff5555;
}
.connect-wallet-bubble.connected:hover {
box-shadow: 0 0 20px #00cc00, 0 0 40px #00cc00;
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555; }
50% { box-shadow: 0 0 20px #ff5555, 0 0 40px #ff5555; }
100% { box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555; }
}
@media (max-width: 768px) {
.connect-wallet-bubble {
display: none;
}
}
#walletInfo {
display: none; /* Controlled by JavaScript */
text-align: center;
padding: 8px 12px;
background-color: rgba(18, 18, 18, 0.8);
backdrop-filter: blur(5px);
border-radius: 8px;
border: 1px solid rgba(255, 85, 85, 0.5);
box-shadow: 0 0 15px rgba(255, 85, 85, 0.3);
color: #fff;
font-size: 0.8rem;
z-index: 1200;
max-width: 180px;
width: max-content;
}
@media (max-width: 768px) {
#walletInfo {
position: fixed;
top: 60px !important;
right: 15px !important;
left: auto !important;
transform: none !important;
font-size: 0.75rem;
}
}
@media (min-width: 769px) {
#walletInfo {
position: fixed;
top: 120px !important; /* Below 90px bubble */
right: 45px !important; /* Adjusted to center under 90px bubble */
left: auto !important;
transform: none !important;
}
}
.x-space-schedule {
text-align: center;
margin: 20px auto;
max-width: 400px;
padding: 20px;
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.x-space-schedule h2 {
font-size: 1.5rem;
color: #ff5555;
margin: 0 0 10px;
}
.x-space-schedule p {
font-size: 1.1rem;
margin: 0 0 10px;
color: #eee;
}
.schedule-list {
list-style: none;
padding: 0;
font-size: clamp(12px, 1.5vw, 14px);
line-height: 1.6;
}
.schedule-list li {
display: grid;
grid-template-columns: 1fr 0.5fr 1fr 2fr; /* Day, Emoji, Time, Host */
gap: 10px;
align-items: center;
padding: 8px 0;
text-align: center;
}
.saturday-group {
align-items: center;
}
.schedule-day {
font-weight: bold;
}
.schedule-emoji,
.schedule-time,
.schedule-host {
display: flex;
justify-content: center;
align-items: center;
}
.schedule-sub-events {
display: flex;
flex-direction: column;
gap: 0px; /* Reduced from 2px to 0px for ~5px closer */
grid-column: 2 / 4; /* Span Emoji and Time columns */
}
.sub-event {
display: grid;
grid-template-columns: 0.5fr 1fr; /* Match Emoji and Time column widths */
gap: 10px; /* Match main grid gap */
justify-content: center;
align-items: center;
}
.sub-event .schedule-emoji {
grid-column: 1; /* Align with main Emoji column */
}
.sub-event .schedule-time {
grid-column: 2; /* Align with main Time column */
}
.host-gap {
display: inline-block;
width: 5px; /* 5px gap between "with" and host name */
}
.schedule-host a {
color: #ff5555;
text-decoration: none;
transition: text-decoration 0.3s ease, color 0.3s ease;
}
.schedule-host a:hover {
text-decoration: underline;
color: #ff7777;
}
.cta-button {
/* --- Size & Spacing --- */
padding: 15px 35px;
font-size: 1.2rem;
font-weight: 700;
margin-top: 20px;
/* --- Appearance --- */
background: #ff5555;
color: #fff;
border: 2px solid #ff7777;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
/* --- Effects --- */
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: pulseGlow 2s infinite ease-in-out;
}
.cta-button:hover {
transform: scale(1.1);
box-shadow: 0 0 25px #ff5555, 0 0 50px #ff5555;
}
.ca-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2a2a2a;
border: 1px solid #444;
border-radius: 5px;
padding: 8px 12px;
margin: 15px 0;
}
.ca-label {
font-size: 0.9rem;
color: #ccc;
font-weight: bold;
}
.copyable-address-sleek {
font-family: monospace;
font-size: 0.9rem;
color: #ff5555;
background-color: #1a1a1a;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.copyable-address-sleek:hover {
background-color: #444;
}
.copyable-address-sleek.copied {
background-color: #1e4620; /* Dark green background */
color: #55ff55; /* Bright green text */
}
.copyable-address-sleek .address-text-short {
margin-right: 8px;
}
@media (max-width: 768px) {
.x-space-schedule {
max-width: 100%;
padding: 15px;
}
.schedule-list li {
grid-template-columns: 1fr 0.5fr 1fr 1.5fr;
gap: 5px;
font-size: clamp(10px, 1.2vw, 12px);
}
.schedule-sub-events {
gap: 0px; /* Keep tight on mobile */
}
.sub-event {
gap: 5px; /* Match main grid gap on mobile */
grid-template-columns: 0.5fr 1fr;
}
}
.audio-player {
display: none;
position: absolute;
top: 90px; /* Moved 20px closer to the logo (100px logo height - 10px gap) */
left: 50px; /* Position the player's left edge at the logo's center */
transform: translateX(-50%); /* Pull the player left by half its own width */
background: #121212;
border: 2px solid #ff5555;
border-radius: 10px;
padding: 10px;
z-index: 1000;
width: 180px; /* Fixed width to prevent resizing */
}
.audio-player.active {
display: flex;
flex-direction: column; /* Ensure vertical stacking for track-info */
}
.audio-controls {
display: flex;
gap: 10px;
justify-content: center; /* Center controls within fixed width */
}
.audio-btn {
background: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 8px 12px;
cursor: pointer;
font-size: 1.2rem;
transition: background-color 0.3s, transform 0.3s ease, box-shadow 0.3s ease;
}
.audio-btn:hover {
background: #ff5555;
transform: scale(1.1);
box-shadow: 0 0 10px #ff5555;
}
.audio-btn.play::before {
content: '▶';
}
.audio-btn.pause::before {
content: '⏸';
}
.logo-btn {
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-btn.active {
animation: subtlePulse 2s infinite ease-in-out;
}
#track-info {
max-width: 160px; /* Slightly less than audio-player width to account for padding */
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size: 14px;
color: #fff;
margin-top: 5px;
}
#track-info span {
display: inline-block;
animation: marquee 10s linear infinite;
animation-play-state: paused; /* <-- Add this line */
}
#track-info:hover span {
animation-play-state: paused; /* Pause animation on hover */
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes neonPulse {
0% {
box-shadow: 0 0 5px #ff5555, 0 0 10px #ff5555, 0 0 15px #ff5555;
}
50% {
box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555, 0 0 30px #ff5555;
}
100% {
box-shadow: 0 0 5px #ff5555, 0 0 10px #ff5555, 0 0 15px #ff5555;
}
}
@media (max-width: 768px) {
.audio-player-mobile-wrapper {
position: fixed;
top: 6px;
left: calc(50% - 40px);
transform: translateX(-50%);
z-index: 1000;
width: calc(100% - 60px);
max-width: 120px;
box-sizing: border-box;
}
.single-play-button {
background: #ff5555;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 auto;
}
.single-play-button:hover {
transform: scale(1.1);
box-shadow: 0 0 10px #ff5555;
}
.single-play-button:focus {
outline: 2px solid #ff7777;
outline-offset: 2px;
}
.audio-player-mobile {
background: #1e1e1e;
border: 1px solid #ff5555;
border-radius: 5px;
padding: 2px;
display: none;
flex-direction: column;
align-items: center;
}
.audio-player-mobile.active {
display: flex;
}
.audio-player-mobile .audio-controls {
display: flex;
gap: 5px;
}
.audio-player-mobile .audio-btn {
background: none;
border: none;
color: #ff5555;
font-size: 1rem;
cursor: pointer;
padding: 2px;
transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.audio-player-mobile .audio-btn:hover {
transform: scale(1.2);
text-shadow: 0 0 10px #ff5555;
}
.audio-player-mobile .audio-btn.play::before {
content: '▶';
}
.audio-player-mobile .audio-btn.pause::before {
content: '⏸';
}
#track-info-mobile {
width: 100%;
overflow: hidden;
white-space: nowrap;
margin-top: 2px;
}
#track-info-mobile span {
display: inline-block;
color: #fff;
font-size: 12px;
animation: marquee 8s linear infinite;
animation-play-state: paused;
}
#audioPlayerMobile.playing #track-info-mobile span {
animation-play-state: running;
}
}
.badge-year1 .badge-emblem {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
font-size: 1.2rem;
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
/* Reduce, but don't completely eliminate, transition speeds */
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Only disable the most intense animations */
.join-rebellion, .disclaimer, .contract-address, .cta-button, .tokenomics {
animation: none !important;
}
}
@media (min-width: 769px) {
.join-rebellion {
display: none;
}
}
.mobile-wallet-notice {
display: none; /* Hidden by default */
background-color: rgba(255, 85, 85, 0.1);
border: 1px solid rgba(255, 85, 85, 0.3);
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
font-size: 0.9rem;
line-height: 1.4;
color: #eee;
}
@media (max-width: 768px) {
.mobile-wallet-notice {
display: block; /* Only show on mobile devices */
}
}
#create-profile-btn {
display: none; /* Hidden by default */
}
#profile-nav-link {
display: none; /* Hidden by default */
}
/* --- Mobile Menu Link Hover Effects --- */
.mobile-menu a,
.mobile-menu .expand {
transition: text-shadow 0.3s ease;
}
.mobile-menu a:hover,
.mobile-menu .expand:hover {
text-shadow: 0 0 10px #ff5555;
}
.hero-buttons {
display: flex;
justify-content: center; /* Centers the buttons */
align-items: center; /* Vertically aligns them */
gap: 15px; /* Creates space between them */
flex-wrap: wrap; /* Allows them to stack on small screens */
}
#walletInfo.visible {
display: block;
}