* {
box-sizing: border-box;
}
.rocksound-top100 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
}
.rocksound-header {
text-align: center;
margin-bottom: 40px;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.rocksound-header .logo-container {
margin-bottom: 20px;
padding: 20px;
background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
border-radius: 16px;
display: inline-block;
}
.rocksound-header .logo-container img {
max-width: 280px;
height: auto;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
display: block;
}
.rocksound-header h1 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 600;
color: #d32f2f;
margin: 10px 0;
}
.rocksound-header p {
font-size: 1.1rem;
color: #333;
font-weight: 400;
margin: 0;
}
.user-vote-status {
margin-top: 20px;
padding: 12px 20px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
background: rgba(211, 47, 47, 0.1);
border: 1px solid rgba(211, 47, 47, 0.2);
color: #d32f2f;
}
.user-vote-status.available {
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.2);
color: #27ae60;
}
.user-vote-status small {
opacity: 0.8;
font-size: 0.85rem;
}
.rocksound-album {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 24px;
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.rocksound-album::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.03) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.rocksound-album:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(102, 126, 234, 0.3);
}
.rocksound-album:hover::before {
opacity: 1;
} .rocksound-rank-1 {
border-color: rgba(211, 47, 47, 0.2) !important;
box-shadow: 0 12px 40px rgba(211, 47, 47, 0.15);
}
.rocksound-rank-1:hover {
border-color: rgba(211, 47, 47, 0.4) !important;
box-shadow: 0 20px 40px rgba(211, 47, 47, 0.25);
}
.album-rank {
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: white;
font-size: 1.5rem;
font-weight: 700;
position: relative;
z-index: 2;
} .rocksound-album img {
width: 300px;
height: 300px;
object-fit: cover;
}
.rocksound-album:hover img {
transform: scale(1.05);
}
.rocksound-album > div:not(.album-rank):not(.album-actions) {
flex: 1;
position: relative;
z-index: 2;
}
.rocksound-album h2 {
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
color: #333;
}
.rocksound-album p {
margin: 0 0 4px 0;
color: #000;
}
.rocksound-album p:first-of-type {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0px;
}
.rocksound-album p:last-of-type {
color: #ff0000;
text-transform: uppercase;
font-size: 1.0rem;
opacity: 0.7;
margin-bottom: 6px;
}
.ranking-move {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 1rem;
background: rgba(211, 47, 47, 0.1);
backdrop-filter: blur(10px);
transition: all 0.2s ease;
border: 1px solid rgba(211, 47, 47, 0.2);
cursor: help;
position: relative;
}
.ranking-move:hover {
transform: scale(1.1);
background: rgba(211, 47, 47, 0.2);
border-color: rgba(211, 47, 47, 0.4);
} .ranking-move::before {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
z-index: 1000;
margin-top: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ranking-move::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
z-index: 1000;
margin-top: 3px;
}
.ranking-move:hover::before,
.ranking-move:hover::after {
opacity: 1;
visibility: visible;
} .user-choice-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.9rem;
background: linear-gradient(135deg, #f1c40f, #f39c12);
animation: pulse 2s infinite;
}
.rocksound-album.user-voted {
border: 2px solid #f1c40f;
box-shadow: 0 8px 32px rgba(241, 196, 15, 0.3);
}
.rocksound-album.user-voted::before {
background: linear-gradient(135deg, rgba(241, 196, 15, 0.05), rgba(243, 156, 18, 0.03));
opacity: 1;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.platform-icons {
display: flex;
gap: 8px;
margin-top: 10px;
position: relative;
z-index: 2;
}
.platform-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(211, 47, 47, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
text-decoration: none;
border: 1px solid rgba(211, 47, 47, 0.2);
}
.platform-icons a:hover {
background: rgba(211, 47, 47, 0.2);
transform: translateY(-2px);
}
.platform-icons img {
width: 24px;
height: 24px;
filter: invert(0.5);
transition: filter 0.3s ease;
}
.vote-message {
margin-top: 8px;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.vote-message.show {
opacity: 1;
transform: translateY(0);
}
.vote-message[style*="green"] {
background: rgba(46, 204, 113, 0.1);
color: #27ae60;
border: 1px solid rgba(46, 204, 113, 0.2);
opacity: 1;
transform: translateY(0);
}
.vote-message[style*="red"] {
background: rgba(211, 47, 47, 0.1);
color: #d32f2f;
border: 1px solid rgba(211, 47, 47, 0.2);
opacity: 1;
transform: translateY(0);
} @keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
} .rocksound-album:nth-child(1) { animation-delay: 0.1s; }
.rocksound-album:nth-child(2) { animation-delay: 0.2s; }
.rocksound-album:nth-child(3) { animation-delay: 0.3s; }
.rocksound-album:nth-child(4) { animation-delay: 0.4s; }
.rocksound-album:nth-child(5) { animation-delay: 0.5s; }
.rocksound-album:nth-child(6) { animation-delay: 0.6s; }
.rocksound-album:nth-child(7) { animation-delay: 0.7s; }
.rocksound-album:nth-child(8) { animation-delay: 0.8s; }
.rocksound-album:nth-child(9) { animation-delay: 0.9s; }
.rocksound-album:nth-child(10) { animation-delay: 1.0s; } .touch-hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
} @media (max-width: 768px) {
.rocksound-top100 {
padding: 10px;
}
.rocksound-header {
padding: 30px 15px;
margin-bottom: 30px;
}
.rocksound-header h1 {
font-size: 2.5rem;
}
.rocksound-album {
flex-direction: column;
text-align: center;
padding: 20px;
gap: 16px;
}
.album-rank {
order: -1;
margin-bottom: 0;
}
.rocksound-album img {
width: 300px;
height: 300px;
}
.rocksound-album > div:not(.album-rank):not(.album-actions) {
margin-bottom: 0;
}
.vote-button {
width: 100%;
padding: 16px;
}
.platform-icons {
justify-content: center;
margin-top: 16px;
}
}
@media (max-width: 480px) {
.rocksound-top100 {
padding: 8px;
}
.rocksound-header {
padding: 20px 10px;
margin-bottom: 20px;
}
.rocksound-header h1 {
font-size: 2rem;
}
.album-title {
font-size: 1.5rem;
font-weight: 500;
margin: 0 0 1px 0;
color: #000;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.rocksound-album {
padding: 16px;
margin-bottom: 16px;
}
.rocksound-album h2 {
font-size: 1.2rem;
flex-direction: column;
gap: 8px;
}
.album-rank {
min-width: 50px;
height: 50px;
font-size: 1.3rem;
}
.rocksound-album img {
width: 250px;
height: 250px;
}
}  .import-info {
margin-top: 15px;
padding: 10px 16px;
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.2);
border-radius: 8px;
font-size: 0.9rem;
color: #667eea;
font-weight: 500;
} .album-scores {
margin: 8px 0;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
border-radius: 6px;
border-left: 3px solid #d32f2f;
}
.album-scores small {
font-size: 0.8rem;
color: #000;
line-height: 1.3;
} .platform-icons {
display: flex;
gap: 8px;
margin-top: 12px;
position: relative;
z-index: 2;
flex-wrap: wrap;
}
.platform-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(211, 47, 47, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
text-decoration: none;
border: 1px solid rgba(211, 47, 47, 0.2);
position: relative;
}
.platform-icons a:hover {
background: rgba(211, 47, 47, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}
.platform-icons img {
width: 20px;
height: 20px;
filter: invert(0.5);
transition: filter 0.3s ease;
}
.platform-icons a:hover img {
filter: invert(0.3);
} .platform-text {
font-size: 0.75rem;
font-weight: 700;
color: #d32f2f;
text-transform: uppercase;
} .platform-icons a[href*="spotify.com"]:hover {
background: rgba(30, 215, 96, 0.2);
border-color: rgba(30, 215, 96, 0.4);
}
.platform-icons a[href*="deezer.com"]:hover {
background: rgba(255, 100, 0, 0.2);
border-color: rgba(255, 100, 0, 0.4);
}
.platform-icons a[href*="apple.com"]:hover,
.platform-icons a[href*="itunes.apple.com"]:hover {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(0, 0, 0, 0.4);
}
.platform-icons a[href*="fnac.com"]:hover {
background: rgba(230, 126, 34, 0.2);
border-color: rgba(230, 126, 34, 0.4);
}
.platform-icons a[href*="qobuz.com"]:hover {
background: rgba(52, 152, 219, 0.2);
border-color: rgba(52, 152, 219, 0.4);
} .platform-icons a::after {
content: attr(title);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
z-index: 1000;
}
.platform-icons a:hover::after {
opacity: 1;
visibility: visible;
} .ranking-move[data-tooltip*="Nouveau"] {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
animation: newEntryPulse 2s infinite;
}
@keyframes newEntryPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 6px rgba(231, 76, 60, 0);
}
} @media (max-width: 768px) {
.album-scores {
margin: 12px 0;
text-align: center;
}
.platform-icons {
justify-content: center;
margin-top: 16px;
}
.import-info {
font-size: 0.85rem;
text-align: center;
}
}
@media (max-width: 480px) {
.platform-icons a {
width: 32px;
height: 32px;
}
.platform-icons img {
width: 16px;
height: 16px;
}
.platform-text {
font-size: 0.7rem;
}
.album-scores small {
font-size: 0.75rem;
}
}
.rocksound-header {
background: linear-gradient(to right, #1f1f1f, #2c2c2c);
color: white;
padding: 40px 20px;
text-align: center;
border-radius: 12px;
margin-bottom: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.rocksound-header .logo-container img {
max-height: 80px;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.rocksound-header .logo-container img:hover {
transform: scale(1.05);
}
.rocksound-header h1 {
font-size: 2em;
margin: 10px 0 5px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.rocksound-header p {
font-size: 1.1em;
margin-top: 5px;
color: #ccc;
}
.user-vote-status {
margin-top: 20px;
font-size: 1em;
background: #2a2a2a;
display: inline-block;
padding: 10px 15px;
border-radius: 8px;
border-left: 4px solid #2196f3;
color: #fff;
}
.user-vote-status.available {
border-left-color: #28a745;
}  .ranking-move.rising {
color: #27ae60;
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
}
.ranking-move.falling {
color: #e74c3c;
background: rgba(231, 76, 60, 0.1);
border: 1px solid rgba(231, 76, 60, 0.3);
}
.ranking-move.stable {
color: #95a5a6;
background: rgba(149, 165, 166, 0.1);
border: 1px solid rgba(149, 165, 166, 0.3);
} .ranking-move.evolution-highlight {
animation: evolutionPulse 1.5s ease-in-out 3;
}
@keyframes evolutionPulse {
0%, 100% { 
transform: scale(1);
box-shadow: 0 0 0 rgba(102, 126, 234, 0.5);
}
50% { 
transform: scale(1.3);
box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}
} .album-rising {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(39, 174, 96, 0.05)) !important;
border: 2px solid rgba(46, 204, 113, 0.3) !important;
transform: scale(1.02);
transition: all 0.8s ease;
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2) !important;
} .album-falling {
background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(192, 57, 43, 0.05)) !important;
border: 2px solid rgba(231, 76, 60, 0.3) !important;
transform: scale(0.98);
transition: all 0.8s ease;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2) !important;
} .new-badge {
position: absolute;
top: -8px;
right: -8px;
font-size: 1.2rem;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
animation: newBadgePulse 2s ease-in-out infinite;
}
@keyframes newBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
} .evolution-notification {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.4;
}
.evolution-notification::before {
content: '📊';
margin-right: 8px;
font-size: 1.2rem;
} .ranking-move::before {
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
} .album-rank.major-change {
animation: majorRankChange 2s ease-in-out;
}
@keyframes majorRankChange {
0% { 
background: linear-gradient(135deg, #d32f2f, #b71c1c);
transform: scale(1);
}
25% { 
background: linear-gradient(135deg, #f39c12, #e67e22);
transform: scale(1.2) rotate(-5deg);
}
50% { 
background: linear-gradient(135deg, #27ae60, #2ecc71);
transform: scale(1.3) rotate(5deg);
}
75% { 
background: linear-gradient(135deg, #8e44ad, #9b59b6);
transform: scale(1.1) rotate(-2deg);
}
100% { 
background: linear-gradient(135deg, #d32f2f, #b71c1c);
transform: scale(1) rotate(0deg);
}
} .voted-album-rising.major-jump {
animation: spectacularRise 3s ease-in-out;
}
@keyframes spectacularRise {
0% { 
transform: scale(1) translateY(0);
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
}
20% { 
transform: scale(1.1) translateY(-10px);
box-shadow: 0 15px 40px rgba(46, 204, 113, 0.5);
}
40% { 
transform: scale(1.05) translateY(-5px);
box-shadow: 0 20px 50px rgba(46, 204, 113, 0.6);
}
60% { 
transform: scale(1.08) translateY(-8px);
box-shadow: 0 25px 60px rgba(46, 204, 113, 0.7);
}
80% { 
transform: scale(1.03) translateY(-3px);
box-shadow: 0 15px 40px rgba(46, 204, 113, 0.5);
}
100% { 
transform: scale(1) translateY(0);
box-shadow: 0 12px 30px rgba(46, 204, 113, 0.4);
}
} @media (max-width: 768px) {
.evolution-notification {
top: 10px;
right: 10px;
left: 10px;
text-align: center;
font-size: 0.85rem;
padding: 12px 15px;
max-width: none;
}
.new-badge {
width: 24px;
height: 24px;
font-size: 1rem;
top: -6px;
right: -6px;
}
.ranking-move {
width: 28px;
height: 28px;
font-size: 0.9rem;
}
} .album-info {
flex: 1;
position: relative;
z-index: 2;
}
.album-info h2 {
font-size: 2.4rem;
font-weight: 600;
margin: 0 0 0px 0;
color: #000;
display: flex;
align-items: center;
gap: 8px;
}
.vote-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.vote-actions .platform-icons {
margin: 0;
}