DOC-3313: update icons and svgs, match opacity styling to website css.

Author: kemister85

modules/ROOT/pages/installation-self-hosted.adoc

@@ -133,25 +133,25 @@ include::partial$css/installation-cards.css[]
     <div class="framework-grid">
       <a href="https://www.tiny.cloud/docs/tinymce/latest/npm-projects/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/nodejs-color.svg" alt="Node.js"></div>
+          <div class="framework-icon"><img src="https://cdn.worldvectorlogo.com/logos/npm.svg" alt="NPM"></div>
           <h3 class="framework-name">NPM Projects</h3>
         </div>
       </a>
       <a href="https://www.tiny.cloud/docs/tinymce/latest/php-projects/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon">🐘</div>
+          <div class="framework-icon"><img src="https://www.php.net/images/logos/new-php-logo.svg" alt="PHP"></div>
           <h3 class="framework-name">PHP Projects</h3>
         </div>
       </a>
       <a href="https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon">💼</div>
+          <div class="framework-icon"><img src="https://raw.githubusercontent.com/dotnet/brand/main/logo/dotnet-logo.svg" alt=".NET"></div>
           <h3 class="framework-name">.NET Projects</h3>
         </div>
       </a>
       <a href="https://www.tiny.cloud/docs/tinymce/latest/bower-projects/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon">🥃</div>
+          <div class="framework-icon"><img src="https://bower.io/img/bower-logo.svg" alt="Bower"></div>
           <h3 class="framework-name">Bower Projects</h3>
         </div>
       </a>
@@ -163,7 +163,7 @@ include::partial$css/installation-cards.css[]
       </a>
       <a href="https://www.tiny.cloud/docs/tinymce/latest/swing/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon">☕</div>
+          <div class="framework-icon"><img src="https://cdn.worldvectorlogo.com/logos/java-4.svg" alt="Java"></div>
           <h3 class="framework-name">Java Swing</h3>
         </div>
       </a>

modules/ROOT/pages/installation-zip.adoc

@@ -119,7 +119,7 @@ include::partial$css/installation-cards.css[]
       </a>
       <a href="https://www.tiny.cloud/docs/tinymce/latest/swing/" class="framework-card-link">
         <div class="framework-card">
-          <div class="framework-icon">☕</div>
+          <div class="framework-icon"><img src="https://cdn.worldvectorlogo.com/logos/java-4.svg" alt="Java"></div>
           <h3 class="framework-name">Java Swing</h3>
         </div>
       </a>

modules/ROOT/partials/css/installation-cards.css

@@ -220,12 +220,22 @@
   color: inherit;
   border: 2px solid transparent; /* reserve space to avoid layout shift on hover */
   border-radius: 10px;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease, opacity 0.3s ease;
+  opacity: 1;
 }
 
 .framework-card-link:hover {
   text-decoration: none !important;
-  border-color: var(--card-border);
+  border-color: var(--tiny-light-blue);
+}
+
+/* When hovering over framework-cards container, dim all cards except the hovered one */
+.framework-cards:hover .framework-card-link {
+  opacity: 0.5;
+}
+
+.framework-cards:hover .framework-card-link:hover {
+  opacity: 1;
 }
 
 .framework-card {