Update README.md

README.md

@@ -39,6 +39,14 @@ short_description: keeper-security org card
     border-radius: 6px 6px 0 0;
   }
   
+  html.light .keeper-header {
+    background-color: #000000;
+  }
+  
+  html:not(.light) .keeper-header {
+    background-color: #121212;
+  }
+  
   .keeper-heading {
     color: #FFFFFF;
     border-bottom: 3px solid #FFCC00;
@@ -53,11 +61,20 @@ short_description: keeper-security org card
     margin-bottom: 15px;
   }
   
+  html:not(.light) .keeper-card {
+    background-color: #2d2d2d;
+    color: #ffffff;
+  }
+  
   .keeper-card h3 {
     margin-top: 0;
     color: #000;
   }
   
+  html:not(.light) .keeper-card h3 {
+    color: #ffffff;
+  }
+  
   .keeper-dark-section {
     background-color: #000000;
     color: white;
@@ -66,84 +83,22 @@ short_description: keeper-security org card
     margin: 20px 0;
   }
   
-  .keeper-yellow {
-    color: #FFCC00;
-  }
-  
-  /* Banner animation replacing video */
-  .banner-container {
-    position: relative;
-    overflow: hidden;
-    max-width: 800px;
-    height: 300px;
-    margin: 0 auto 30px;
-    border-radius: 6px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-  }
-  
-  .banner-slide {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 1s ease-in-out;
-    background-size: cover;
-    background-position: center;
-  }
-  
-  .banner-slide:nth-child(1) {
-    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://www.keepersecurity.com/assets/images/home-hero-1.jpg');
-    animation: fade 15s infinite;
-    animation-delay: 0s;
+  html.light .keeper-dark-section {
+    background-color: #ffffff;
+    color: #000000;
   }
   
-  .banner-slide:nth-child(2) {
-    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://www.keepersecurity.com/assets/images/pam-hero.jpg');
-    animation: fade 15s infinite;
-    animation-delay: 5s;
-  }
-  
-  .banner-slide:nth-child(3) {
-    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://www.keepersecurity.com/assets/images/enterprise-hero.jpg');
-    animation: fade 15s infinite;
-    animation-delay: 10s;
-  }
-  
-  .banner-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  html:not(.light) .keeper-dark-section {
+    background-color: #121212;
     color: white;
-    text-align: center;
-    width: 80%;
   }
   
-  .banner-content h3 {
+  .keeper-yellow {
     color: #FFCC00;
-    margin-bottom: 15px;
-    font-size: 24px;
-  }
-  
-  @keyframes fade {
-    0% { opacity: 0; }
-    10% { opacity: 1; }
-    33% { opacity: 1; }
-    44% { opacity: 0; }
-    100% { opacity: 0; }
-  }
-  
-  /* Logo carousel animation */
-  @keyframes slide {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-1200px); }
   }
   
   .logo-slider {
     display: flex;
-    animation: slide 30s linear infinite;
     width: max-content;
   }
   
@@ -165,36 +120,129 @@ short_description: keeper-security org card
     margin-top: 5px;
     color: white;
   }
+  
+  html.light .logo-item figcaption {
+    color: #000000;
+  }
+  
+  .keeper-stats-container {
+    text-align: center;
+    margin: 30px 0;
+  }
+  
+  .keeper-intro-text {
+    font-size: 20px;
+    margin-bottom: 15px;
+  }
+  
+  .keeper-stats-flex {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    flex-wrap: wrap;
+  }
+  
+  .keeper-stat-item {
+    text-align: center;
+  }
+  
+  .keeper-stat-number {
+    font-size: 32px;
+    font-weight: bold;
+    color: #FFCC00;
+  }
+  
+  .keeper-logo-container {
+    overflow-x: scroll;
+    position: relative;
+    background-color: #121212;
+    border-radius: 4px;
+    /* Hide scrollbar but keep functionality */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+  
+  .keeper-logo-container::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+  
+  html.light .keeper-logo-container {
+    background-color: #000000;
+  }
+  
+  html:not(.light) .keeper-logo-container {
+    background-color: #000000;
+  }
+  
+  .keeper-buttons {
+    text-align: center;
+    margin-top: 10px;
+  }
+  
+  .keeper-primary-button {
+    background-color: #FFCC00;
+    color: black;
+    padding: 10px 25px;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+    display: inline-block;
+    margin-right: 10px;
+  }
+  
+  .keeper-secondary-button {
+    background-color: #333;
+    color: white;
+    padding: 10px 25px;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+    display: inline-block;
+  }
+  
+  .keeper-copyright {
+    text-align: center;
+    margin-top: 5px;
+    color: #666;
+    font-size: 12px;
+  }
+  
+  .keeper-logo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
 </style>
 
 <div class="keeper-wrapper">
-  <div class="keeper-header" style="text-align: center;">
-      <img src="https://www.keepersecurity.com/assets/branding/keeper-logo-light.svg" alt="Keeper Security" width="300" style="display: block; margin-left: auto; margin-right: auto;">
+  <div class="keeper-header">
+      <img src="https://www.keepersecurity.com/assets/branding/keeper-logo-light.svg" alt="Keeper Security" width="300" class="keeper-logo">
     <h2 class="keeper-heading">Next-Generation Privileged Access Management</h2>
   </div>
-<div style="text-align: center; margin: 30px 0;">
-    <div style="font-size: 20px; margin-bottom: 15px;">
+  
+<div class="keeper-stats-container">
+    <div class="keeper-intro-text">
       <strong>Trusted by millions of users and thousands of organizations worldwide</strong>
     </div>
-    <div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">
-      <div style="text-align: center;">
-        <div style="font-size: 32px; font-weight: bold; color: #FFCC00;">
+    <div class="keeper-stats-flex">
+      <div class="keeper-stat-item">
+        <div class="keeper-stat-number">
           120+
         </div>
         <div>
           Countries
         </div>
       </div>
-      <div style="text-align: center;">
-        <div style="font-size: 32px; font-weight: bold; color: #FFCC00;">
+      <div class="keeper-stat-item">
+        <div class="keeper-stat-number">
           300K+
         </div>
         <div>
           5-Star Reviews
         </div>
       </div>
-      <div style="text-align: center;">
-        <div style="font-size: 32px; font-weight: bold; color: #FFCC00;">
+      <div class="keeper-stat-item">
+        <div class="keeper-stat-number">
           #1
         </div>
         <div>
@@ -205,7 +253,7 @@ short_description: keeper-security org card
   </div>
 
   <div class="keeper-dark-section">
-    <div style="overflow-x: scroll; position: relative; background-color: #121212; border-radius: 4px;">
+    <div class="keeper-logo-container">
       <div class="logo-slider">
         <figure class="logo-item">
           <img alt="ISO" src="https://keepersecurity.com/assets/certifications/iso-white.svg" height="60" width="60">
@@ -273,25 +321,16 @@ short_description: keeper-security org card
             FIPS 140-3
           </figcaption>
         </figure>
-        <figure class="logo-item">
-          <img alt="ISO" src="https://keepersecurity.com/assets/certifications/iso-white.svg" height="60" width="60">
-          <figcaption>
-            ISO 27001
-          </figcaption>
-        </figure>
-        <figure class="logo-item">
-          <img alt="SOC 2" src="https://keepersecurity.com/assets/certifications/aicpa-white.svg" height="60" width="60">
-          <figcaption>
-            SOC 2
-          </figcaption>
-        </figure>
       </div>
     </div>
   </div>
-  <div style="text-align: center; margin-top: 10px;">
-    <a href="https://www.keepersecurity.com/privileged-access-management/" style="background-color: #FFCC00; color: black; padding: 10px 25px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block; margin-right: 10px;">Explore KeeperPAM</a> <a href="https://www.keepersecurity.com" style="background-color: #333; color: white; padding: 10px 25px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block;">Visit Website</a>
+  
+  <div class="keeper-buttons">
+    <a href="https://www.keepersecurity.com/privileged-access-management/" class="keeper-primary-button">Explore KeeperPAM</a>
+    <a href="https://www.keepersecurity.com" class="keeper-secondary-button">Visit Website</a>
   </div>
-  <div style="text-align: center; margin-top: 5px; color: #666; font-size: 12px;">
+  
+  <div class="keeper-copyright">
     <p>© 2025 Keeper Security, Inc. All Rights Reserved.</p>
   </div>
 </div>