DOC-3313: update css varables, refactor content changes and add supported framework icons to landing page.

Author: kemister85

modules/ROOT/pages/installation-cloud.adoc

@@ -31,6 +31,7 @@ Get started with {productname} in your preferred framework:
 
 ++++
 include::partial$css/installation-cards.css[]
+<div class="tiny-installation-cards">
 <div class="framework-cards">
   <div class="framework-grid">
     <a href="https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/" class="framework-card-link">
@@ -118,6 +119,7 @@ include::partial$css/installation-cards.css[]
     </a>
   </div>
 </div>
+</div>
 ++++
 
 == Benefits of the {cloudname}

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

@@ -42,6 +42,7 @@ Get started with {productname} in your preferred framework:
 
 ++++
 include::partial$css/installation-cards.css[]
+<div class="tiny-installation-cards">
 <div class="framework-cards">
   <div class="framework-group">
     <h4 class="framework-group-title">Frontend Frameworks</h4>
@@ -169,6 +170,7 @@ include::partial$css/installation-cards.css[]
     </div>
   </div>
 </div>
+</div>
 ++++
 
 == Package managers

modules/ROOT/pages/installation-zip.adoc

@@ -34,6 +34,7 @@ Get started with {productname} in your preferred framework:
 
 ++++
 include::partial$css/installation-cards.css[]
+<div class="tiny-installation-cards">
 <div class="framework-cards">
   <div class="framework-group">
     <h4 class="framework-group-title">Frontend Frameworks</h4>
@@ -125,6 +126,7 @@ include::partial$css/installation-cards.css[]
     </div>
   </div>
 </div>
+</div>
 ++++
 
 == Installation steps

modules/ROOT/pages/installation.adoc

@@ -9,7 +9,7 @@ There are multiple ways to install {productname}. Choose your installation metho
 include::partial$css/installation-cards.css[]
 <div class="integration-cards">
   <div class="integration-card">
-    <div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
+  <div class="card-icon-wrapper brand-gradient--sunny">
       <div class="card-icon">☁️</div>
     </div>
     <h3 class="card-title">Cloud CDN</h3>
@@ -20,7 +20,7 @@ include::partial$css/installation-cards.css[]
   </div>
   
   <div class="integration-card">
-    <div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
+  <div class="card-icon-wrapper brand-gradient--neutral">
       <div class="card-icon">📦</div>
     </div>
     <h3 class="card-title">Package Manager</h3>
@@ -31,7 +31,7 @@ include::partial$css/installation-cards.css[]
   </div>
   
   <div class="integration-card">
-    <div class="card-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
+  <div class="card-icon-wrapper brand-gradient--marine">
       <div class="card-icon">⬇️</div>
     </div>
     <h3 class="card-title">Direct Download</h3>
@@ -45,64 +45,66 @@ include::partial$css/installation-cards.css[]
 
 ++++
 include::partial$css/installation-cards.css[]
-<h3 style="margin-top: 3rem; font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem;">Browse by Framework</h3>
+<h3 class="brand-section-title">Browse by Framework</h3>
   
+<div class="tiny-installation-cards">
 <div class="framework-cards">
   <div class="framework-grid">
     <a href="https://www.tiny.cloud/docs/tinymce/latest/react-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/react-color.svg" alt="React"></div>
         <h3 class="framework-name">React</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/angular-color.svg" alt="Angular"></div>
         <h3 class="framework-name">Angular</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/vue-color.svg" alt="Vue"></div>
         <h3 class="framework-name">Vue.js</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/blazor-color.svg" alt="Blazor"></div>
         <h3 class="framework-name">Blazor</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/svelte-color.svg" alt="Svelte"></div>
         <h3 class="framework-name">Svelte</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/web-components-color.svg" alt="Web Components"></div>
         <h3 class="framework-name">Web Component</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/jquery-color.svg" alt="jQuery"></div>
         <h3 class="framework-name">jQuery</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/laravel-color.svg" alt="Laravel"></div>
         <h3 class="framework-name">Laravel</h3>
       </div>
     </a>
     <a href="https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/" class="framework-card-link">
       <div class="framework-card">
-        <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
+          <div class="framework-icon"><img src="https://www.tiny.cloud/images/homepage/integrations/rails-color.svg" alt="Rails"></div>
         <h3 class="framework-name">Ruby on Rails</h3>
       </div>
     </a>
   </div>
 </div>
+</div>
 ++++