/* ============================================================ Vrai logo Soundboard Chill Stream ============================================================ */ .chillroom-app-card-soundboard .chillroom-app-link-soundboard { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } /* Retire complètement l'ancien visuel SVG généré */ .chillroom-app-card-soundboard .chillroom-soundboard-logo { display: none !important; } /* Nouveau logo officiel */ .chillroom-soundboard-real-logo { display: block !important; width: min(98%, 410px) !important; max-width: 410px !important; height: auto !important; max-height: 215px !important; margin: 0 auto !important; object-fit: contain !important; transform: translate3d(0, 0, 0) scale(1) !important; transform-origin: center center !important; filter: drop-shadow( 0 0 11px rgba(104, 96, 255, 0.62) ) drop-shadow( 0 0 23px rgba(205, 62, 255, 0.35) ) drop-shadow( 0 0 31px rgba(38, 181, 255, 0.18) ) !important; transition: transform 0.24s ease, filter 0.24s ease !important; pointer-events: none !important; user-select: none !important; } .chillroom-app-card-soundboard:hover .chillroom-soundboard-real-logo, .chillroom-app-card-soundboard:focus-within .chillroom-soundboard-real-logo { transform: translate3d(0, -4px, 0) scale(1.04) !important; filter: drop-shadow( 0 0 16px rgba(112, 108, 255, 0.82) ) drop-shadow( 0 0 31px rgba(221, 65, 255, 0.54) ) drop-shadow( 0 0 44px rgba(34, 191, 255, 0.30) ) !important; } @media (max-width: 760px) { .chillroom-soundboard-real-logo { width: min(95%, 340px) !important; max-width: 340px !important; max-height: 215px !important; } } /* SOUNDBOARD BIGGER OVERRIDE START */ /* Carte Soundboard : laisse plus de place au logo */ .soundboard-card, a[href*="/ChillStream/"].soundboard-card, .app-card.soundboard-card { overflow: hidden !important; } .soundboard-card .app-logo-wrap, a[href*="/ChillStream/"] .app-logo-wrap, .app-card.soundboard-card .app-logo-wrap, .soundboard-card .logo-wrap, a[href*="/ChillStream/"] .logo-wrap, .app-card.soundboard-card .logo-wrap { min-height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Agrandit fortement le logo Soundboard */ .soundboard-card img, .soundboard-card .app-logo, .soundboard-card .soundboard-logo, .soundboard-card .soundboard-real-logo, a[href*="/ChillStream/"] img, a[href*="/ChillStream/"] .app-logo, a[href*="/ChillStream/"] .soundboard-logo, a[href*="/ChillStream/"] .soundboard-real-logo, .app-card.soundboard-card img, .app-card.soundboard-card .app-logo, .app-card.soundboard-card .soundboard-logo, .app-card.soundboard-card .soundboard-real-logo { width: min(100%, 520px) !important; max-width: 520px !important; max-height: 250px !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; transform: scale(1.22) !important; transform-origin: center center !important; } /* Petit écran */ @media (max-width: 1100px) { .soundboard-card .app-logo-wrap, a[href*="/ChillStream/"] .app-logo-wrap, .app-card.soundboard-card .app-logo-wrap, .soundboard-card .logo-wrap, a[href*="/ChillStream/"] .logo-wrap, .app-card.soundboard-card .logo-wrap { min-height: 190px !important; } .soundboard-card img, .soundboard-card .app-logo, .soundboard-card .soundboard-logo, .soundboard-card .soundboard-real-logo, a[href*="/ChillStream/"] img, a[href*="/ChillStream/"] .app-logo, a[href*="/ChillStream/"] .soundboard-logo, a[href*="/ChillStream/"] .soundboard-real-logo, .app-card.soundboard-card img, .app-card.soundboard-card .app-logo, .app-card.soundboard-card .soundboard-logo, .app-card.soundboard-card .soundboard-real-logo { width: min(100%, 430px) !important; max-width: 430px !important; max-height: 210px !important; transform: scale(1.16) !important; } } /* SOUNDBOARD BIGGER OVERRIDE END */ /* SOUNDBOARD VERTICAL POSITION START */ /* Logo normal : descendu davantage */ .chillroom-app-card-soundboard .chillroom-soundboard-real-logo { transform: translate3d(0, 24px, 0) scale(1.22) !important; } /* Survol : reste légèrement relevé par rapport à sa position normale */ .chillroom-app-card-soundboard:hover .chillroom-soundboard-real-logo, .chillroom-app-card-soundboard:focus-within .chillroom-soundboard-real-logo { transform: translate3d(0, 18px, 0) scale(1.26) !important; } @media (max-width: 1100px) { .chillroom-app-card-soundboard .chillroom-soundboard-real-logo { transform: translate3d(0, 19px, 0) scale(1.16) !important; } .chillroom-app-card-soundboard:hover .chillroom-soundboard-real-logo, .chillroom-app-card-soundboard:focus-within .chillroom-soundboard-real-logo { transform: translate3d(0, 14px, 0) scale(1.20) !important; } } /* SOUNDBOARD VERTICAL POSITION END */ /* SOUNDBOARD GLITCH START */ /* Active hover sur toute la carte */ .chillroom-app-card-soundboard:hover .chillroom-soundboard-real-logo, .chillroom-app-card-soundboard:focus-within .chillroom-soundboard-real-logo { animation: sbGlitch 0.18s infinite alternate; } /* Glitch RGB comme DJ */ @keyframes sbGlitch { 0% { transform: translate(0, 24px) scale(1.22); filter: drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 18px #00ffff) drop-shadow(0 0 25px #ff0033); } 25% { transform: translate(-2px, 25px) scale(1.23); } 50% { transform: translate(2px, 23px) scale(1.21); } 75% { transform: translate(-1px, 24px) scale(1.24); } 100% { transform: translate(1px, 26px) scale(1.22); } } /* Glow léger même sans hover */ .chillroom-app-card-soundboard .chillroom-soundboard-real-logo { transition: transform 0.2s ease, filter 0.2s ease; } /* ============================= */ /* DJ LANDRIAULT HOVER GLOBAL */ /* ============================= */ .chillroom-app-card-dj:hover .chillroom-dj-logo-button, .chillroom-app-card-dj:focus-within .chillroom-dj-logo-button { animation: djHoverPulse 0.16s infinite alternate; } @keyframes djHoverPulse { from { transform: scale(1); } to { transform: scale(1.06); } } /* SOUNDBOARD GLITCH END */ /* SOUNDBOARD ACTIVE GLITCH START */ /* Activation quand hover */ .chillroom-soundboard-real-logo.dj-hover-active { animation: sbReactiveGlitch 0.14s infinite alternate; } /* Glitch dynamique style DJ */ @keyframes sbReactiveGlitch { 0% { transform: translate(0, 24px) scale(1.22); filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 14px #00ffff) drop-shadow(0 0 20px #ff0033); } 20% { transform: translate(-2px, 26px) scale(1.23); } 40% { transform: translate(2px, 23px) scale(1.21); } 60% { transform: translate(-1px, 25px) scale(1.24); } 80% { transform: translate(1px, 27px) scale(1.22); } 100% { transform: translate(0px, 24px) scale(1.23); } } /* SOUNDBOARD ACTIVE GLITCH END */