diff --git a/script.js b/script.js index 5d8b5e3..641d97e 100644 --- a/script.js +++ b/script.js @@ -514,6 +514,15 @@ var si = 0, var best = valid[0]; var bestServer = SERVERS.filter(function(s) { return s.host === best.host; })[0]; if (bestServer && heroImages[best.host]) { + /* Highlight the matching server card */ + var cards = document.querySelectorAll('.server-card'); + for (var i = 0; i < SERVERS.length && i < cards.length; i++) { + if (SERVERS[i].host === best.host) { + cards[i].classList.add('server-best'); + break; + } + } + /* Preload and animate hero */ var img = new Image(); img.onload = function() { animateHero(bestServer.city, heroImages[best.host]); }; img.src = heroImages[best.host]; diff --git a/style.css b/style.css index 8284d2c..9ac6dac 100644 --- a/style.css +++ b/style.css @@ -234,6 +234,7 @@ img { max-width: 100%; height: auto; vertical-align: middle; } padding: 1rem 0.75rem; text-align: center; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; } .server-card:hover { background: rgba(255,255,255,0.06); @@ -252,6 +253,15 @@ img { max-width: 100%; height: auto; vertical-align: middle; } text-transform: uppercase; letter-spacing: 0.06em; } +.server-card.server-best { + background: rgba(201,162,39,0.1); + border-color: var(--brass); + box-shadow: 0 0 25px rgba(201,162,39,0.15), inset 0 0 25px rgba(201,162,39,0.04); + transform: translateY(-3px); +} +.server-card.server-best .server-city { + color: var(--brass-bright); +} @media (max-width: 992px) { .server-grid {