/* ====================================================== HALL OF WAVE - ISLAND SUPPORT BOARD File: /view/front/css/hall-of-wave.css Purpose: Visual ranking + neon glow system (scoped) Requires: ====================================================== */ /* ---------- SCOPE GUARD (ONLY THIS PAGE) ---------- */ body.hall-wave { /* Keep off in production unless debugging */ outline: none; } /* Smooth neon rendering */ body.hall-wave .support-card, body.hall-wave .support-status-card, body.hall-wave .directory-wrap { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ---------- CARD BASE OVERRIDES (BEAT INLINE CSS) ---------- */ body.hall-wave .support-card { position: relative; /* required for ::after sparkle */ overflow: hidden; /* keeps sparkle inside card */ transition: transform 0.25s ease, box-shadow 0.25s ease; } body.hall-wave .support-card:hover { transform: translateY(-4px) scale(1.02); } /* Optional: make rank label pop a bit more */ body.hall-wave .support-rank { text-shadow: 0 0 10px rgba(255,255,255,0.25); } /* ---------- RANK COLOR SYSTEM ---------- Rank tiers: 1 = Gold (Champion) 2-3 = Neon Purple 4-10 = Neon Pink 11-20 = Neon Green 21-40 = Neon Blue ---------------------------------------- */ /* Rank 1 - GOLD */ body.hall-wave .support-card.rank-1 { border: 1px solid rgba(253, 224, 71, 0.95) !important; box-shadow: 0 0 22px rgba(253, 224, 71, 0.95), 0 0 40px rgba(253, 224, 71, 0.55) !important; } /* Rank 2-3 - PURPLE */ body.hall-wave .support-card.rank-top { border: 1px solid rgba(216, 180, 254, 0.90) !important; box-shadow: 0 0 18px rgba(216, 180, 254, 0.90), 0 0 34px rgba(168, 85, 247, 0.60) !important; } /* Rank 4-10 - PINK */ body.hall-wave .support-card.rank-high { border: 1px solid rgba(244, 114, 182, 0.90) !important; box-shadow: 0 0 16px rgba(244, 114, 182, 0.85), 0 0 30px rgba(236, 72, 153, 0.60) !important; } /* Rank 11-20 - GREEN */ body.hall-wave .support-card.rank-mid { border: 1px solid rgba(74, 222, 128, 0.90) !important; box-shadow: 0 0 14px rgba(74, 222, 128, 0.85), 0 0 28px rgba(34, 197, 94, 0.60) !important; } /* Rank 21-40 - BLUE */ body.hall-wave .support-card.rank-low { border: 1px solid rgba(56, 189, 248, 0.90) !important; box-shadow: 0 0 12px rgba(56, 189, 248, 0.85), 0 0 24px rgba(14, 165, 233, 0.60) !important; } /* ---------- TBD PLACEHOLDER STYLE ---------- */ body.hall-wave .support-card.tbd { opacity: 0.55; filter: grayscale(35%); border: 1px dashed rgba(148, 163, 184, 0.60) !important; box-shadow: none !important; } body.hall-wave .support-card.tbd .support-name { color: #94a3b8 !important; } /* ---------- SUBTLE SPARKLE ANIMATION ---------- */ @keyframes hall_sparkle { 0% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 0.85; transform: translateY(-2px); } 100% { opacity: 0.35; transform: translateY(0); } } /* Sparkle only for top ranks */ body.hall-wave .support-card.rank-1::after, body.hall-wave .support-card.rank-top::after { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 40%), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.35), transparent 45%); animation: hall_sparkle 6s ease-in-out infinite; pointer-events: none; mix-blend-mode: screen; z-index: 0; /* behind text */ } /* Ensure text stays above sparkle overlay */ body.hall-wave .support-card > * { position: relative; z-index: 1; } /* ---------- LEGEND (FUTURE USE) ---------- */ body.hall-wave .hall-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.72rem; opacity: 0.85; } body.hall-wave .hall-legend span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); } /* ====================================================== HALL OF WAVE - STRONGER RANK LOOK (ADD AT BOTTOM) ====================================================== */ body.hall-wave .support-card.rank-1 { background: radial-gradient(circle at top, rgba(253,224,71,0.28), rgba(15,23,42,0.96)) !important; } body.hall-wave .support-card.rank-top { background: radial-gradient(circle at top, rgba(168,85,247,0.26), rgba(15,23,42,0.96)) !important; } body.hall-wave .support-card.rank-high { background: radial-gradient(circle at top, rgba(236,72,153,0.22), rgba(15,23,42,0.96)) !important; } body.hall-wave .support-card.rank-mid { background: radial-gradient(circle at top, rgba(34,197,94,0.22), rgba(15,23,42,0.96)) !important; } body.hall-wave .support-card.rank-low { background: radial-gradient(circle at top, rgba(14,165,233,0.22), rgba(15,23,42,0.96)) !important; }